From 6eca8eff08e293229c2ff957f175573faf994fc0 Mon Sep 17 00:00:00 2001
From: IDrissAitHafid <31975500+IDrissAitHafid@users.noreply.github.com>
Date: Thu, 8 Oct 2020 13:46:15 +0100
Subject: [PATCH 0001/1603] updating the informations needed when adding a root
 node to a tree in react-devtools overview doc (#19979)

Co-authored-by: Idriss AITHAFID <Idriss.AITHAFID@um6p.ma>
---
 packages/react-devtools/OVERVIEW.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index fa9fc8c1bdd7..19b54f0124af 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -49,20 +49,22 @@ Later operations will reference strings by a one-based index. For example, `1` w
 
 #### Adding a root node
 
-Adding a root to the tree requires sending 4 numbers:
+Adding a root to the tree requires sending 5 numbers:
 
 1. add operation constant (`1`)
 1. fiber id
-1. element type constant (`8 === ElementTypeRoot`)
+1. element type constant (`11 === ElementTypeRoot`)
 1. profiling supported flag
+1. owner metadata flag
 
 For example, adding a root fiber with an id of 1:
 ```js
 [
   1, // add operation
   1, // fiber id
-  8, // ElementTypeRoot
+  11, // ElementTypeRoot
   1, // this root's renderer supports profiling
+  1, // this root has owner metadata
 ]
 ```
 

From 40c52de96043f56430d464a62635014f0e8dd900 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 8 Oct 2020 14:11:15 -0400
Subject: [PATCH 0002/1603] [Flight] Add Runtime Errors for Non-serializable
 Values (#19980)

* Error on encoding non-serializable props

* Add DEV time warnings to enforce that values are plain objects
---
 .../src/__tests__/ReactFlight-test.js         | 121 +++++++++
 .../react-server/src/ReactFlightServer.js     | 246 +++++++++++++++++-
 scripts/error-codes/codes.json                |   7 +-
 3 files changed, 368 insertions(+), 6 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 8e877ea10164..e08e61748cd4 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -18,6 +18,7 @@ let ReactNoop;
 let ReactNoopFlightServer;
 let ReactNoopFlightServerRuntime;
 let ReactNoopFlightClient;
+let ErrorBoundary;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
@@ -29,6 +30,27 @@ describe('ReactFlight', () => {
     ReactNoopFlightServerRuntime = require('react-noop-renderer/flight-server-runtime');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = ReactNoop.act;
+
+    ErrorBoundary = class extends React.Component {
+      state = {hasError: false, error: null};
+      static getDerivedStateFromError(error) {
+        return {
+          hasError: true,
+          error,
+        };
+      }
+      componentDidMount() {
+        expect(this.state.hasError).toBe(true);
+        expect(this.state.error).toBeTruthy();
+        expect(this.state.error.message).toContain(this.props.expectedMessage);
+      }
+      render() {
+        if (this.state.hasError) {
+          return this.state.error.message;
+        }
+        return this.props.children;
+      }
+    };
   });
 
   function block(render, load) {
@@ -127,4 +149,103 @@ describe('ReactFlight', () => {
       expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
     });
   }
+
+  it('should error if a non-serializable value is passed to a host component', () => {
+    function EventHandlerProp() {
+      return (
+        <div className="foo" onClick={function() {}}>
+          Test
+        </div>
+      );
+    }
+    function FunctionProp() {
+      return <div>{() => {}}</div>;
+    }
+    function SymbolProp() {
+      return <div foo={Symbol('foo')} />;
+    }
+
+    const event = ReactNoopFlightServer.render(<EventHandlerProp />);
+    const fn = ReactNoopFlightServer.render(<FunctionProp />);
+    const symbol = ReactNoopFlightServer.render(<SymbolProp />);
+
+    function Client({transport}) {
+      return ReactNoopFlightClient.read(transport);
+    }
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <ErrorBoundary expectedMessage="Event handlers cannot be passed to client component props.">
+            <Client transport={event} />
+          </ErrorBoundary>
+          <ErrorBoundary expectedMessage="Functions cannot be passed directly to client components because they're not serializable.">
+            <Client transport={fn} />
+          </ErrorBoundary>
+          <ErrorBoundary expectedMessage="Symbol values (foo) cannot be passed to client components.">
+            <Client transport={symbol} />
+          </ErrorBoundary>
+        </>,
+      );
+    });
+  });
+
+  it('should warn in DEV if a toJSON instance is passed to a host component', () => {
+    expect(() => {
+      const transport = ReactNoopFlightServer.render(
+        <input value={new Date()} />,
+      );
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ',
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn in DEV if a special object is passed to a host component', () => {
+    expect(() => {
+      const transport = ReactNoopFlightServer.render(<input value={Math} />);
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ' +
+        'Built-ins like Math are not supported.',
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn in DEV if an object with symbols is passed to a host component', () => {
+    expect(() => {
+      const transport = ReactNoopFlightServer.render(
+        <input value={{[Symbol.iterator]: {}}} />,
+      );
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ' +
+        'Objects with symbol properties like Symbol.iterator are not supported.',
+      {withoutStack: true},
+    );
+  });
+
+  it('should warn in DEV if a class instance is passed to a host component', () => {
+    class Foo {
+      method() {}
+    }
+    expect(() => {
+      const transport = ReactNoopFlightServer.render(
+        <input value={new Foo()} />,
+      );
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ',
+      {withoutStack: true},
+    );
+  });
 });
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 17fd077c57f8..d934ce5f7fbf 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -50,6 +50,8 @@ import * as React from 'react';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
 
+const isArray = Array.isArray;
+
 type ReactJSONValue =
   | string
   | boolean
@@ -186,12 +188,146 @@ function escapeStringValue(value: string): string {
   }
 }
 
+function isObjectPrototype(object): boolean {
+  if (!object) {
+    return false;
+  }
+  // $FlowFixMe
+  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 (Object.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;
+}
+
+function isSimpleObject(object): boolean {
+  if (!isObjectPrototype(Object.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 || !descriptor.enumerable) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function objectName(object): string {
+  const name = Object.prototype.toString.call(object);
+  return name.replace(/^\[object (.*)\]$/, function(m, p0) {
+    return p0;
+  });
+}
+
+function describeKeyForErrorMessage(key: string): string {
+  const encodedKey = JSON.stringify(key);
+  return '"' + key + '"' === encodedKey ? key : encodedKey;
+}
+
+function describeValueForErrorMessage(value: ReactModel): string {
+  switch (typeof value) {
+    case 'string': {
+      return JSON.stringify(
+        value.length <= 10 ? value : value.substr(0, 10) + '...',
+      );
+    }
+    case 'object': {
+      if (isArray(value)) {
+        return '[...]';
+      }
+      const name = objectName(value);
+      if (name === '[object Object]') {
+        return '{...}';
+      }
+      return name;
+    }
+    case 'function':
+      return 'function';
+    default:
+      // eslint-disable-next-line
+      return String(value);
+  }
+}
+
+function describeObjectForErrorMessage(
+  objectOrArray:
+    | {+[key: string | number]: ReactModel}
+    | $ReadOnlyArray<ReactModel>,
+): string {
+  if (isArray(objectOrArray)) {
+    let str = '[';
+    // $FlowFixMe: Should be refined by now.
+    const array: $ReadOnlyArray<ReactModel> = objectOrArray;
+    for (let i = 0; i < array.length; i++) {
+      if (i > 0) {
+        str += ', ';
+      }
+      if (i > 6) {
+        str += '...';
+        break;
+      }
+      str += describeValueForErrorMessage(array[i]);
+    }
+    str += ']';
+    return str;
+  } else {
+    let str = '{';
+    // $FlowFixMe: Should be refined by now.
+    const object: {+[key: string | number]: ReactModel} = objectOrArray;
+    const names = Object.keys(object);
+    for (let i = 0; i < names.length; i++) {
+      if (i > 0) {
+        str += ', ';
+      }
+      if (i > 6) {
+        str += '...';
+        break;
+      }
+      const name = names[i];
+      str +=
+        describeKeyForErrorMessage(name) +
+        ': ' +
+        describeValueForErrorMessage(object[name]);
+    }
+    str += '}';
+    return str;
+  }
+}
+
 export function resolveModelToJSON(
   request: Request,
   parent: {+[key: string | number]: ReactModel} | $ReadOnlyArray<ReactModel>,
   key: string,
   value: ReactModel,
 ): ReactJSONValue {
+  if (__DEV__) {
+    // $FlowFixMe
+    const originalValue = parent[key];
+    if (typeof originalValue === 'object' && originalValue !== value) {
+      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. ' +
+          'Remove %s from these props: %s',
+        describeKeyForErrorMessage(key),
+        describeObjectForErrorMessage(parent),
+      );
+    }
+  }
+
   // Special Symbols
   switch (value) {
     case REACT_ELEMENT_TYPE:
@@ -263,10 +399,6 @@ export function resolveModelToJSON(
     }
   }
 
-  if (typeof value === 'string') {
-    return escapeStringValue(value);
-  }
-
   // Resolve server components.
   while (
     typeof value === 'object' &&
@@ -293,7 +425,111 @@ export function resolveModelToJSON(
     }
   }
 
-  return value;
+  if (typeof value === 'object') {
+    if (__DEV__) {
+      if (value !== null && !isArray(value)) {
+        // Verify that this is a simple plain object.
+        if (objectName(value) !== 'Object') {
+          console.error(
+            'Only plain objects can be passed to client components from server components. ' +
+              'Built-ins like %s are not supported. ' +
+              'Remove %s from these props: %s',
+            objectName(value),
+            describeKeyForErrorMessage(key),
+            describeObjectForErrorMessage(parent),
+          );
+        } else if (!isSimpleObject(value)) {
+          console.error(
+            'Only plain objects can be passed to client components from server components. ' +
+              'Classes or other objects with methods are not supported. ' +
+              'Remove %s from these props: %s',
+            describeKeyForErrorMessage(key),
+            describeObjectForErrorMessage(parent),
+          );
+        } else if (Object.getOwnPropertySymbols) {
+          const symbols = Object.getOwnPropertySymbols(value);
+          if (symbols.length > 0) {
+            console.error(
+              'Only plain objects can be passed to client components from server components. ' +
+                'Objects with symbol properties like %s are not supported. ' +
+                'Remove %s from these props: %s',
+              symbols[0].description,
+              describeKeyForErrorMessage(key),
+              describeObjectForErrorMessage(parent),
+            );
+          }
+        }
+      }
+    }
+    return value;
+  }
+
+  if (typeof value === 'string') {
+    return escapeStringValue(value);
+  }
+
+  if (
+    typeof value === 'boolean' ||
+    typeof value === 'number' ||
+    typeof value === 'undefined'
+  ) {
+    return value;
+  }
+
+  if (typeof value === 'function') {
+    if (/^on[A-Z]/.test(key)) {
+      invariant(
+        false,
+        'Event handlers cannot be passed to client component props. ' +
+          'Remove %s from these props if possible: %s\n' +
+          'If you need interactivity, consider converting part of this to a client component.',
+        describeKeyForErrorMessage(key),
+        describeObjectForErrorMessage(parent),
+      );
+    } else {
+      invariant(
+        false,
+        'Functions cannot be passed directly to client components ' +
+          "because they're not serializable. " +
+          'Remove %s (%s) from this object, or avoid the entire object: %s',
+        describeKeyForErrorMessage(key),
+        value.displayName || value.name || 'function',
+        describeObjectForErrorMessage(parent),
+      );
+    }
+  }
+
+  if (typeof value === 'symbol') {
+    invariant(
+      false,
+      'Symbol values (%s) cannot be passed to client components. ' +
+        'Remove %s from this object, or avoid the entire object: %s',
+      value.description,
+      describeKeyForErrorMessage(key),
+      describeObjectForErrorMessage(parent),
+    );
+  }
+
+  // $FlowFixMe: bigint isn't added to Flow yet.
+  if (typeof value === 'bigint') {
+    invariant(
+      false,
+      'BigInt (%s) is not yet supported in client component props. ' +
+        'Remove %s from this object or use a plain number instead: %s',
+      value,
+      describeKeyForErrorMessage(key),
+      describeObjectForErrorMessage(parent),
+    );
+  }
+
+  invariant(
+    false,
+    'Type %s is not supported in client component props. ' +
+      'Remove %s from this object, or avoid the entire object: %s',
+    typeof value,
+    describeKeyForErrorMessage(key),
+    describeObjectForErrorMessage(parent),
+  );
 }
 
 function emitErrorChunk(request: Request, id: number, error: mixed): void {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 069339abfdd2..369c97c32a2c 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -361,5 +361,10 @@
   "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."
+  "373": "This Hook is not supported in Server Components.",
+  "374": "Event handlers cannot be passed to client component props. Remove %s from these props if possible: %s\nIf you need interactivity, consider converting part of this to a client component.",
+  "375": "Functions cannot be passed directly to client components because they're not serializable. Remove %s (%s) from this object, or avoid the entire object: %s",
+  "376": "Symbol values (%s) cannot be passed to client components. Remove %s from this object, or avoid the entire object: %s",
+  "377": "BigInt (%s) is not yet supported in client component props. Remove %s from this object or use a plain number instead: %s",
+  "378": "Type %s is not supported in client component props. Remove %s from this object, or avoid the entire object: %s"
 }

From 993ca533b42756811731f6b7791ae06a35ee6b4d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 8 Oct 2020 19:32:28 +0100
Subject: [PATCH 0003/1603] Enable eager listeners statically (#19983)

---
 .../src/__tests__/ReactDOMFiber-test.js       |  1 -
 .../react-dom/src/client/ReactDOMComponent.js | 88 +----------------
 .../src/client/ReactDOMEventHandle.js         | 87 +----------------
 .../src/client/ReactDOMHostConfig.js          | 12 +--
 packages/react-dom/src/client/ReactDOMRoot.js | 31 +-----
 .../src/events/DOMPluginEventSystem.js        | 97 ++++---------------
 .../src/events/ReactDOMEventListener.js       | 19 ++--
 .../src/events/ReactDOMEventReplaying.js      | 46 +--------
 .../DOMPluginEventSystem-test.internal.js     |  2 +-
 .../src/events/plugins/SelectEventPlugin.js   | 23 +----
 .../__tests__/SimpleEventPlugin-test.js       | 40 ++------
 packages/shared/ReactFeatureFlags.js          |  2 -
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 21 files changed, 55 insertions(+), 402 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index 130c06b443c6..ec3ec75ce482 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1040,7 +1040,6 @@ describe('ReactDOMFiber', () => {
     expect(ops).toEqual([]);
   });
 
-  // @gate enableEagerRootListeners
   it('listens to events that do not exist in the Portal subtree', () => {
     const onClick = jest.fn();
 
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 8f0e3302327c..86789230ca0f 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -61,12 +61,7 @@ import {
   shouldRemoveAttribute,
 } from '../shared/DOMProperty';
 import assertValidProps from '../shared/assertValidProps';
-import {
-  DOCUMENT_NODE,
-  ELEMENT_NODE,
-  COMMENT_NODE,
-  DOCUMENT_FRAGMENT_NODE,
-} from '../shared/HTMLNodeType';
+import {DOCUMENT_NODE} from '../shared/HTMLNodeType';
 import isCustomComponent from '../shared/isCustomComponent';
 import possibleStandardNames from '../shared/possibleStandardNames';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
@@ -74,12 +69,8 @@ import {validateProperties as validateInputProperties} from '../shared/ReactDOMN
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 
+import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 import {
-  enableTrustedTypesIntegration,
-  enableEagerRootListeners,
-} from 'shared/ReactFeatureFlags';
-import {
-  listenToReactEvent,
   mediaEventTypes,
   listenToNonDelegatedEvent,
 } from '../events/DOMPluginEventSystem';
@@ -253,39 +244,6 @@ if (__DEV__) {
   };
 }
 
-export function ensureListeningTo(
-  rootContainerInstance: Element | Node,
-  reactPropEvent: string,
-  targetElement: Element | null,
-): void {
-  if (!enableEagerRootListeners) {
-    // If we have a comment node, then use the parent node,
-    // which should be an element.
-    const rootContainerElement =
-      rootContainerInstance.nodeType === COMMENT_NODE
-        ? rootContainerInstance.parentNode
-        : rootContainerInstance;
-    if (__DEV__) {
-      if (
-        rootContainerElement == null ||
-        (rootContainerElement.nodeType !== ELEMENT_NODE &&
-          // This is to support rendering into a ShadowRoot:
-          rootContainerElement.nodeType !== DOCUMENT_FRAGMENT_NODE)
-      ) {
-        console.error(
-          'ensureListeningTo(): received a container that was not an element node. ' +
-            'This is likely a bug in React. Please file an issue.',
-        );
-      }
-    }
-    listenToReactEvent(
-      reactPropEvent,
-      ((rootContainerElement: any): Element),
-      targetElement,
-    );
-  }
-}
-
 function getOwnerDocumentFromRootContainer(
   rootContainerElement: Element | Document,
 ): Document {
@@ -364,9 +322,7 @@ function setInitialDOMProperties(
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
         }
-        if (!enableEagerRootListeners) {
-          ensureListeningTo(rootContainerElement, propKey, domElement);
-        } else if (propKey === 'onScroll') {
+        if (propKey === 'onScroll') {
           listenToNonDelegatedEvent('scroll', domElement);
         }
       }
@@ -577,11 +533,6 @@ export function setInitialProperties(
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
-      if (!enableEagerRootListeners) {
-        // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-        ensureListeningTo(rootContainerElement, 'onChange', domElement);
-      }
       break;
     case 'option':
       ReactDOMOptionValidateProps(domElement, rawProps);
@@ -593,11 +544,6 @@ export function setInitialProperties(
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
-      if (!enableEagerRootListeners) {
-        // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-        ensureListeningTo(rootContainerElement, 'onChange', domElement);
-      }
       break;
     case 'textarea':
       ReactDOMTextareaInitWrapperState(domElement, rawProps);
@@ -605,11 +551,6 @@ export function setInitialProperties(
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
-      if (!enableEagerRootListeners) {
-        // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-        ensureListeningTo(rootContainerElement, 'onChange', domElement);
-      }
       break;
     default:
       props = rawProps;
@@ -827,9 +768,7 @@ export function diffProperties(
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
         }
-        if (!enableEagerRootListeners) {
-          ensureListeningTo(rootContainerElement, propKey, domElement);
-        } else if (propKey === 'onScroll') {
+        if (propKey === 'onScroll') {
           listenToNonDelegatedEvent('scroll', domElement);
         }
       }
@@ -983,11 +922,6 @@ export function diffHydratedProperties(
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
-      if (!enableEagerRootListeners) {
-        // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-        ensureListeningTo(rootContainerElement, 'onChange', domElement);
-      }
       break;
     case 'option':
       ReactDOMOptionValidateProps(domElement, rawProps);
@@ -997,22 +931,12 @@ export function diffHydratedProperties(
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
-      if (!enableEagerRootListeners) {
-        // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-        ensureListeningTo(rootContainerElement, 'onChange', domElement);
-      }
       break;
     case 'textarea':
       ReactDOMTextareaInitWrapperState(domElement, rawProps);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
       listenToNonDelegatedEvent('invalid', domElement);
-      if (!enableEagerRootListeners) {
-        // For controlled components we always need to ensure we're listening
-        // to onChange. Even if there is no listener.
-        ensureListeningTo(rootContainerElement, 'onChange', domElement);
-      }
       break;
   }
 
@@ -1079,9 +1003,7 @@ export function diffHydratedProperties(
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
         }
-        if (!enableEagerRootListeners) {
-          ensureListeningTo(rootContainerElement, propKey, domElement);
-        } else if (propKey === 'onScroll') {
+        if (propKey === 'onScroll') {
           listenToNonDelegatedEvent('scroll', domElement);
         }
       }
diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
index ed227252e153..69a2eb4851f1 100644
--- a/packages/react-dom/src/client/ReactDOMEventHandle.js
+++ b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -16,23 +16,19 @@ import type {
 
 import {allNativeEvents} from '../events/EventRegistry';
 import {
-  getClosestInstanceFromNode,
   getEventHandlerListeners,
   setEventHandlerListeners,
-  getFiberFromScopeInstance,
   doesTargetHaveEventHandle,
   addEventHandleToTarget,
 } from './ReactDOMComponentTree';
-import {ELEMENT_NODE, COMMENT_NODE} from '../shared/HTMLNodeType';
+import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 import {listenToNativeEvent} from '../events/DOMPluginEventSystem';
 
-import {HostRoot, HostPortal} from 'react-reconciler/src/ReactWorkTags';
 import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../events/EventSystemFlags';
 
 import {
   enableScopeAPI,
   enableCreateEventHandleAPI,
-  enableEagerRootListeners,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
@@ -40,19 +36,6 @@ type EventHandleOptions = {|
   capture?: boolean,
 |};
 
-function getNearestRootOrPortalContainer(node: Fiber): null | Element {
-  while (node !== null) {
-    const tag = node.tag;
-    // Once we encounter a host container or root container
-    // we can return their DOM instance.
-    if (tag === HostRoot || tag === HostPortal) {
-      return node.stateNode.containerInfo;
-    }
-    node = node.return;
-  }
-  return null;
-}
-
 function isValidEventTarget(target: EventTarget | ReactScopeInstance): boolean {
   return typeof (target: Object).addEventListener === 'function';
 }
@@ -73,79 +56,15 @@ function createEventHandleListener(
   };
 }
 
-function registerEventOnNearestTargetContainer(
-  targetFiber: Fiber,
-  domEventName: DOMEventName,
-  isCapturePhaseListener: boolean,
-  targetElement: Element | null,
-): void {
-  if (!enableEagerRootListeners) {
-    // If it is, find the nearest root or portal and make it
-    // our event handle target container.
-    let targetContainer = getNearestRootOrPortalContainer(targetFiber);
-    if (targetContainer === null) {
-      if (__DEV__) {
-        console.error(
-          'ReactDOM.createEventHandle: setListener called on an target ' +
-            'that did not have a corresponding root. This is likely a bug in React.',
-        );
-      }
-      return;
-    }
-    if (targetContainer.nodeType === COMMENT_NODE) {
-      targetContainer = ((targetContainer.parentNode: any): Element);
-    }
-    listenToNativeEvent(
-      domEventName,
-      isCapturePhaseListener,
-      targetContainer,
-      targetElement,
-    );
-  }
-}
-
 function registerReactDOMEvent(
   target: EventTarget | ReactScopeInstance,
   domEventName: DOMEventName,
   isCapturePhaseListener: boolean,
 ): void {
-  // Check if the target is a DOM element.
   if ((target: any).nodeType === ELEMENT_NODE) {
-    if (!enableEagerRootListeners) {
-      const targetElement = ((target: any): Element);
-      // Check if the DOM element is managed by React.
-      const targetFiber = getClosestInstanceFromNode(targetElement);
-      if (targetFiber === null) {
-        if (__DEV__) {
-          console.error(
-            'ReactDOM.createEventHandle: setListener called on an element ' +
-              'target that is not managed by React. Ensure React rendered the DOM element.',
-          );
-        }
-        return;
-      }
-      registerEventOnNearestTargetContainer(
-        targetFiber,
-        domEventName,
-        isCapturePhaseListener,
-        targetElement,
-      );
-    }
+    // Do nothing. We already attached all root listeners.
   } else if (enableScopeAPI && isReactScope(target)) {
-    if (!enableEagerRootListeners) {
-      const scopeTarget = ((target: any): ReactScopeInstance);
-      const targetFiber = getFiberFromScopeInstance(scopeTarget);
-      if (targetFiber === null) {
-        // Scope is unmounted, do not proceed.
-        return;
-      }
-      registerEventOnNearestTargetContainer(
-        targetFiber,
-        domEventName,
-        isCapturePhaseListener,
-        null,
-      );
-    }
+    // 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
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index e5ce50add75a..63fdb08a3ae8 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -67,13 +67,9 @@ import {
   enableFundamentalAPI,
   enableCreateEventHandleAPI,
   enableScopeAPI,
-  enableEagerRootListeners,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
-import {
-  listenToReactEvent,
-  listenToAllSupportedEvents,
-} from '../events/DOMPluginEventSystem';
+import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
 
 export type Type = string;
 export type Props = {
@@ -1073,11 +1069,7 @@ export function makeOpaqueHydratingObject(
 }
 
 export function preparePortalMount(portalInstance: Instance): void {
-  if (enableEagerRootListeners) {
-    listenToAllSupportedEvents(portalInstance);
-  } else {
-    listenToReactEvent('onMouseEnter', portalInstance, null);
-  }
+  listenToAllSupportedEvents(portalInstance);
 }
 
 export function prepareScopeUpdate(
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 11ec850a4ab2..66a31328540e 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -36,14 +36,12 @@ import {
   unmarkContainerAsRoot,
 } from './ReactDOMComponentTree';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
-import {eagerlyTrapReplayableEvents} from '../events/ReactDOMEventReplaying';
 import {
   ELEMENT_NODE,
   COMMENT_NODE,
   DOCUMENT_NODE,
   DOCUMENT_FRAGMENT_NODE,
 } from '../shared/HTMLNodeType';
-import {ensureListeningTo} from './ReactDOMComponent';
 
 import {
   createContainer,
@@ -52,7 +50,6 @@ import {
   registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
-import {enableEagerRootListeners} from 'shared/ReactFeatureFlags';
 import {
   BlockingRoot,
   ConcurrentRoot,
@@ -133,30 +130,10 @@ function createRootImpl(
     null;
   const root = createContainer(container, tag, hydrate, hydrationCallbacks);
   markContainerAsRoot(root.current, container);
-  const containerNodeType = container.nodeType;
-
-  if (enableEagerRootListeners) {
-    const rootContainerElement =
-      container.nodeType === COMMENT_NODE ? container.parentNode : container;
-    listenToAllSupportedEvents(rootContainerElement);
-  } else {
-    if (hydrate && tag !== LegacyRoot) {
-      const doc =
-        containerNodeType === DOCUMENT_NODE
-          ? container
-          : container.ownerDocument;
-      // We need to cast this because Flow doesn't work
-      // with the hoisted containerNodeType. If we inline
-      // it, then Flow doesn't complain. We intentionally
-      // hoist it to reduce code-size.
-      eagerlyTrapReplayableEvents(container, ((doc: any): Document));
-    } else if (
-      containerNodeType !== DOCUMENT_FRAGMENT_NODE &&
-      containerNodeType !== DOCUMENT_NODE
-    ) {
-      ensureListeningTo(container, 'onMouseEnter', null);
-    }
-  }
+
+  const rootContainerElement =
+    container.nodeType === COMMENT_NODE ? container.parentNode : container;
+  listenToAllSupportedEvents(rootContainerElement);
 
   if (mutableSources) {
     for (let i = 0; i < mutableSources.length; i++) {
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 0b374b6e91d2..74b95dea3d4e 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -21,7 +21,7 @@ import type {
 } from './ReactSyntheticEventType';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
-import {registrationNameDependencies, allNativeEvents} from './EventRegistry';
+import {allNativeEvents} from './EventRegistry';
 import {
   IS_CAPTURE_PHASE,
   IS_EVENT_HANDLE_NON_MANAGED_NODE,
@@ -51,7 +51,6 @@ import {
   enableLegacyFBSupport,
   enableCreateEventHandleAPI,
   enableScopeAPI,
-  enableEagerRootListeners,
 } from 'shared/ReactFeatureFlags';
 import {
   invokeGuardedCallbackAndCatchFirstError,
@@ -320,32 +319,30 @@ const listeningMarker =
     .slice(2);
 
 export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
-  if (enableEagerRootListeners) {
-    if ((rootContainerElement: any)[listeningMarker]) {
-      // Performance optimization: don't iterate through events
-      // for the same portal container or root node more than once.
-      // TODO: once we remove the flag, we may be able to also
-      // remove some of the bookkeeping maps used for laziness.
-      return;
-    }
-    (rootContainerElement: any)[listeningMarker] = true;
-    allNativeEvents.forEach(domEventName => {
-      if (!nonDelegatedEvents.has(domEventName)) {
-        listenToNativeEvent(
-          domEventName,
-          false,
-          ((rootContainerElement: any): Element),
-          null,
-        );
-      }
+  if ((rootContainerElement: any)[listeningMarker]) {
+    // Performance optimization: don't iterate through events
+    // for the same portal container or root node more than once.
+    // TODO: once we remove the flag, we may be able to also
+    // remove some of the bookkeeping maps used for laziness.
+    return;
+  }
+  (rootContainerElement: any)[listeningMarker] = true;
+  allNativeEvents.forEach(domEventName => {
+    if (!nonDelegatedEvents.has(domEventName)) {
       listenToNativeEvent(
         domEventName,
-        true,
+        false,
         ((rootContainerElement: any): Element),
         null,
       );
-    });
-  }
+    }
+    listenToNativeEvent(
+      domEventName,
+      true,
+      ((rootContainerElement: any): Element),
+      null,
+    );
+  });
 }
 
 export function listenToNativeEvent(
@@ -411,60 +408,6 @@ export function listenToNativeEvent(
   }
 }
 
-export function listenToReactEvent(
-  reactEvent: string,
-  rootContainerElement: Element,
-  targetElement: Element | null,
-): void {
-  if (!enableEagerRootListeners) {
-    const dependencies = registrationNameDependencies[reactEvent];
-    const dependenciesLength = dependencies.length;
-    // If the dependencies length is 1, that means we're not using a polyfill
-    // plugin like ChangeEventPlugin, BeforeInputPlugin, EnterLeavePlugin
-    // and SelectEventPlugin. We always use the native bubble event phase for
-    // these plugins and emulate two phase event dispatching. SimpleEventPlugin
-    // always only has a single dependency and SimpleEventPlugin events also
-    // use either the native capture event phase or bubble event phase, there
-    // is no emulation (except for focus/blur, but that will be removed soon).
-    const isPolyfillEventPlugin = dependenciesLength !== 1;
-
-    if (isPolyfillEventPlugin) {
-      const listenerSet = getEventListenerSet(rootContainerElement);
-      // When eager listeners are off, this Set has a dual purpose: it both
-      // captures which native listeners we registered (e.g. "click__bubble")
-      // and *React* lazy listeners (e.g. "onClick") so we don't do extra checks.
-      // This second usage does not exist in the eager mode.
-      if (!listenerSet.has(reactEvent)) {
-        listenerSet.add(reactEvent);
-        for (let i = 0; i < dependenciesLength; i++) {
-          listenToNativeEvent(
-            dependencies[i],
-            false,
-            rootContainerElement,
-            targetElement,
-          );
-        }
-      }
-    } else {
-      const isCapturePhaseListener =
-        reactEvent.substr(-7) === 'Capture' &&
-        // Edge case: onGotPointerCapture and onLostPointerCapture
-        // end with "Capture" but that's part of their event names.
-        // The Capture versions would end with CaptureCapture.
-        // So we have to check against that.
-        // This check works because none of the events we support
-        // end with "Pointer".
-        reactEvent.substr(-14, 7) !== 'Pointer';
-      listenToNativeEvent(
-        dependencies[0],
-        isCapturePhaseListener,
-        rootContainerElement,
-        targetElement,
-      );
-    }
-  }
-}
-
 function addTrappedEventListener(
   targetContainer: EventTarget,
   domEventName: DOMEventName,
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 3aacb54873d2..d5f13d3b0ad9 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -40,7 +40,6 @@ import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 
 import {
   enableLegacyFBSupport,
-  enableEagerRootListeners,
   decoupleUpdatePriorityFromScheduler,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -188,16 +187,14 @@ export function dispatchEvent(
   if (!_enabled) {
     return;
   }
-  let allowReplay = true;
-  if (enableEagerRootListeners) {
-    // TODO: replaying capture phase events is currently broken
-    // because we used to do it during top-level native bubble handlers
-    // but now we use different bubble and capture handlers.
-    // In eager mode, we attach capture listeners early, so we need
-    // to filter them out until we fix the logic to handle them correctly.
-    // This could've been outside the flag but I put it inside to reduce risk.
-    allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
-  }
+
+  // TODO: replaying capture phase events is currently broken
+  // because we used to do it during top-level native bubble handlers
+  // but now we use different bubble and capture handlers.
+  // In eager mode, we attach capture listeners early, so we need
+  // to filter them out until we fix the logic to handle them correctly.
+  const allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
+
   if (
     allowReplay &&
     hasQueuedDiscreteEvents() &&
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 8b8d08f5e06a..2fbe0e1b0b61 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -14,10 +14,7 @@ import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {LanePriority} from 'react-reconciler/src/ReactFiberLane';
 
-import {
-  enableSelectiveHydration,
-  enableEagerRootListeners,
-} from 'shared/ReactFeatureFlags';
+import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
 import {
   unstable_runWithPriority as runWithPriority,
   unstable_scheduleCallback as scheduleCallback,
@@ -85,7 +82,6 @@ type PointerEvent = Event & {
 };
 
 import {IS_REPLAYED} from './EventSystemFlags';
-import {listenToNativeEvent} from './DOMPluginEventSystem';
 
 type QueuedReplayableEvent = {|
   blockedOn: null | Container | SuspenseInstance,
@@ -159,50 +155,10 @@ const discreteReplayableEvents: Array<DOMEventName> = [
   'submit',
 ];
 
-const continuousReplayableEvents: Array<DOMEventName> = [
-  'dragenter',
-  'dragleave',
-  'focusin',
-  'focusout',
-  'mouseover',
-  'mouseout',
-  'pointerover',
-  'pointerout',
-  'gotpointercapture',
-  'lostpointercapture',
-];
-
 export function isReplayableDiscreteEvent(eventType: DOMEventName): boolean {
   return discreteReplayableEvents.indexOf(eventType) > -1;
 }
 
-function trapReplayableEventForContainer(
-  domEventName: DOMEventName,
-  container: Container,
-) {
-  // When the flag is on, we do this in a unified codepath elsewhere.
-  if (!enableEagerRootListeners) {
-    listenToNativeEvent(domEventName, false, ((container: any): Element), null);
-  }
-}
-
-export function eagerlyTrapReplayableEvents(
-  container: Container,
-  document: Document,
-) {
-  // When the flag is on, we do this in a unified codepath elsewhere.
-  if (!enableEagerRootListeners) {
-    // Discrete
-    discreteReplayableEvents.forEach(domEventName => {
-      trapReplayableEventForContainer(domEventName, container);
-    });
-    // Continuous
-    continuousReplayableEvents.forEach(domEventName => {
-      trapReplayableEventForContainer(domEventName, container);
-    });
-  }
-}
-
 function createQueuedReplayableEvent(
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index a2517cba8345..6a3662962a74 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -2643,7 +2643,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log[5]).toEqual(['bubble', buttonElement]);
           });
 
-          // @gate experimental && enableEagerRootListeners
+          // @gate experimental
           it('propagates known createEventHandle events through portals without inner listeners', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
diff --git a/packages/react-dom/src/events/plugins/SelectEventPlugin.js b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
index e1989b773b56..befa735be878 100644
--- a/packages/react-dom/src/events/plugins/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
@@ -16,14 +16,10 @@ import {canUseDOM} from 'shared/ExecutionEnvironment';
 import {SyntheticEvent} from '../../events/SyntheticEvent';
 import isTextInputElement from '../isTextInputElement';
 import shallowEqual from 'shared/shallowEqual';
-import {enableEagerRootListeners} from 'shared/ReactFeatureFlags';
 
 import {registerTwoPhaseEvent} from '../EventRegistry';
 import getActiveElement from '../../client/getActiveElement';
-import {
-  getNodeFromInstance,
-  getEventListenerSet,
-} from '../../client/ReactDOMComponentTree';
+import {getNodeFromInstance} from '../../client/ReactDOMComponentTree';
 import {hasSelectionCapabilities} from '../../client/ReactInputSelection';
 import {DOCUMENT_NODE} from '../../shared/HTMLNodeType';
 import {accumulateTwoPhaseListeners} from '../DOMPluginEventSystem';
@@ -154,23 +150,6 @@ function extractEvents(
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
 ) {
-  if (!enableEagerRootListeners) {
-    const eventListenerSet = getEventListenerSet(targetContainer);
-    // Track whether all listeners exists for this plugin. If none exist, we do
-    // not extract events. See #3639.
-    if (
-      // If we are handling selectionchange, then we don't need to
-      // check for the other dependencies, as selectionchange is only
-      // event attached from the onChange plugin and we don't expose an
-      // onSelectionChange event from React.
-      domEventName !== 'selectionchange' &&
-      !eventListenerSet.has('onSelect') &&
-      !eventListenerSet.has('onSelectCapture')
-    ) {
-      return;
-    }
-  }
-
   const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
 
   switch (domEventName) {
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index a01bb938883c..92ee2e369315 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -516,36 +516,16 @@ describe('SimpleEventPlugin', function() {
         return nativeAddEventListener.apply(this, arguments);
       };
 
-      ReactDOM.render(
-        <div
-          // Affected by the intervention:
-          // https://github.com/facebook/react/issues/19651
-          onTouchStart={() => {}}
-          onTouchMove={() => {}}
-          onWheel={() => {}}
-          // A few events that should be unaffected:
-          onClick={() => {}}
-          onScroll={() => {}}
-          onTouchEnd={() => {}}
-          onChange={() => {}}
-          onPointerDown={() => {}}
-          onPointerMove={() => {}}
-        />,
-        container,
-      );
-
-      if (gate(flags => flags.enableEagerRootListeners)) {
-        expect(passiveEvents).toEqual([
-          'touchstart',
-          'touchstart',
-          'touchmove',
-          'touchmove',
-          'wheel',
-          'wheel',
-        ]);
-      } else {
-        expect(passiveEvents).toEqual(['touchstart', 'touchmove', 'wheel']);
-      }
+      ReactDOM.render(<div />, container);
+
+      expect(passiveEvents).toEqual([
+        'touchstart',
+        'touchstart',
+        'touchmove',
+        'touchmove',
+        'wheel',
+        'wheel',
+      ]);
     });
   });
 });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 1302c0f6ff7f..836b78524ef9 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -133,6 +133,4 @@ export const decoupleUpdatePriorityFromScheduler = false;
 
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableEagerRootListeners = true;
-
 export const enableDoubleInvokingEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index bd4a939be432..82e8d4dcd7ba 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -49,7 +49,6 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
-export const enableEagerRootListeners = true;
 
 export const enableDoubleInvokingEffects = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 7a120940842d..7a793d16ab33 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -48,7 +48,6 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
-export const enableEagerRootListeners = true;
 
 export const enableDoubleInvokingEffects = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 6804c1923bf8..4402523c5410 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -48,7 +48,6 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
-export const enableEagerRootListeners = true;
 
 export const enableDoubleInvokingEffects = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f4ccc11a08cf..a71ad45dbd46 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -48,7 +48,6 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
-export const enableEagerRootListeners = true;
 
 export const enableDoubleInvokingEffects = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index b4b7a56097c7..c60072346eab 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -48,7 +48,6 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
-export const enableEagerRootListeners = true;
 
 export const enableDoubleInvokingEffects = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index f28ad3567e0e..90c1fa268b25 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -48,7 +48,6 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
-export const enableEagerRootListeners = true;
 
 export const enableDoubleInvokingEffects = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index a962b280a23a..717199df1d53 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -48,7 +48,6 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = true;
-export const enableEagerRootListeners = true;
 
 export const enableDoubleInvokingEffects = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 881a0e61010d..103e8adc5c72 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -19,7 +19,6 @@ export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const decoupleUpdatePriorityFromScheduler = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
-export const enableEagerRootListeners = !__VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index ea9610713d05..58d6987495f9 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -27,7 +27,6 @@ export const {
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   skipUnmountedBoundaries,
-  enableEagerRootListeners,
   enableDoubleInvokingEffects,
 } = dynamicFeatureFlags;
 

From 0a4c7c565146222a2b701455ba2d66540063b98d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 8 Oct 2020 20:02:23 -0400
Subject: [PATCH 0004/1603] [Flight] Don't warn for key, but error for ref
 (#19986)

* Improve error message by expanding the object in question

* Don't warn for key/ref getters

* Error if refs are passed in server components or to client components
---
 .../src/__tests__/ReactFlight-test.js         | 16 +++++
 .../react-server/src/ReactFlightServer.js     | 62 ++++++++++++++++---
 scripts/error-codes/codes.json                |  5 +-
 3 files changed, 71 insertions(+), 12 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index e08e61748cd4..865686b7e077 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -165,9 +165,15 @@ describe('ReactFlight', () => {
       return <div foo={Symbol('foo')} />;
     }
 
+    const ref = React.createRef();
+    function RefProp() {
+      return <div ref={ref} />;
+    }
+
     const event = ReactNoopFlightServer.render(<EventHandlerProp />);
     const fn = ReactNoopFlightServer.render(<FunctionProp />);
     const symbol = ReactNoopFlightServer.render(<SymbolProp />);
+    const refs = ReactNoopFlightServer.render(<RefProp />);
 
     function Client({transport}) {
       return ReactNoopFlightClient.read(transport);
@@ -185,6 +191,9 @@ describe('ReactFlight', () => {
           <ErrorBoundary expectedMessage="Symbol values (foo) cannot be passed to client components.">
             <Client transport={symbol} />
           </ErrorBoundary>
+          <ErrorBoundary expectedMessage="Refs cannot be used in server components, nor passed to client components.">
+            <Client transport={refs} />
+          </ErrorBoundary>
         </>,
       );
     });
@@ -217,6 +226,13 @@ describe('ReactFlight', () => {
     );
   });
 
+  it('should NOT warn in DEV for key getters', () => {
+    const transport = ReactNoopFlightServer.render(<div key="a" />);
+    act(() => {
+      ReactNoop.render(ReactNoopFlightClient.read(transport));
+    });
+  });
+
   it('should warn in DEV if an object with symbols is passed to a host component', () => {
     expect(() => {
       const transport = ReactNoopFlightServer.render(
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index d934ce5f7fbf..eccc17c2a193 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -119,6 +119,15 @@ export function createRequest(
 function attemptResolveElement(element: React$Element<any>): ReactModel {
   const type = element.type;
   const props = element.props;
+  if (element.ref !== null && element.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.
+    invariant(
+      false,
+      'Refs cannot be used in server components, nor passed to client components.',
+    );
+  }
   if (typeof type === 'function') {
     // This is a server-side component.
     return type(props);
@@ -153,7 +162,11 @@ function attemptResolveElement(element: React$Element<any>): ReactModel {
       }
     }
   }
-  invariant(false, 'Unsupported type.');
+  invariant(
+    false,
+    'Unsupported server component type: %s',
+    describeValueForErrorMessage(type),
+  );
 }
 
 function pingSegment(request: Request, segment: Segment): void {
@@ -218,7 +231,19 @@ function isSimpleObject(object): boolean {
   const names = Object.getOwnPropertyNames(object);
   for (let i = 0; i < names.length; i++) {
     const descriptor = Object.getOwnPropertyDescriptor(object, names[i]);
-    if (!descriptor || !descriptor.enumerable) {
+    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;
     }
   }
@@ -249,7 +274,7 @@ function describeValueForErrorMessage(value: ReactModel): string {
         return '[...]';
       }
       const name = objectName(value);
-      if (name === '[object Object]') {
+      if (name === 'Object') {
         return '{...}';
       }
       return name;
@@ -266,6 +291,7 @@ function describeObjectForErrorMessage(
   objectOrArray:
     | {+[key: string | number]: ReactModel}
     | $ReadOnlyArray<ReactModel>,
+  expandedName?: string,
 ): string {
   if (isArray(objectOrArray)) {
     let str = '[';
@@ -279,7 +305,16 @@ function describeObjectForErrorMessage(
         str += '...';
         break;
       }
-      str += describeValueForErrorMessage(array[i]);
+      const value = array[i];
+      if (
+        '' + i === expandedName &&
+        typeof value === 'object' &&
+        value !== null
+      ) {
+        str += describeObjectForErrorMessage(value);
+      } else {
+        str += describeValueForErrorMessage(value);
+      }
     }
     str += ']';
     return str;
@@ -297,10 +332,17 @@ function describeObjectForErrorMessage(
         break;
       }
       const name = names[i];
-      str +=
-        describeKeyForErrorMessage(name) +
-        ': ' +
-        describeValueForErrorMessage(object[name]);
+      str += describeKeyForErrorMessage(name) + ': ';
+      const value = object[name];
+      if (
+        name === expandedName &&
+        typeof value === 'object' &&
+        value !== null
+      ) {
+        str += describeObjectForErrorMessage(value);
+      } else {
+        str += describeValueForErrorMessage(value);
+      }
     }
     str += '}';
     return str;
@@ -444,7 +486,7 @@ export function resolveModelToJSON(
               'Classes or other objects with methods are not supported. ' +
               'Remove %s from these props: %s',
             describeKeyForErrorMessage(key),
-            describeObjectForErrorMessage(parent),
+            describeObjectForErrorMessage(parent, key),
           );
         } else if (Object.getOwnPropertySymbols) {
           const symbols = Object.getOwnPropertySymbols(value);
@@ -455,7 +497,7 @@ export function resolveModelToJSON(
                 'Remove %s from these props: %s',
               symbols[0].description,
               describeKeyForErrorMessage(key),
-              describeObjectForErrorMessage(parent),
+              describeObjectForErrorMessage(parent, key),
             );
           }
         }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 369c97c32a2c..6eb8441d1fff 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -340,7 +340,7 @@
   "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 is a bug in React. Please file an issue.",
-  "351": "Unsupported type.",
+  "351": "Unsupported server component type: %s",
   "352": "React Blocks (and Lazy Components) are expected to be replaced by a compiler on the server. Try configuring your compiler set up and avoid using React.lazy inside of Blocks.",
   "353": "A server block should never encode any other slots. This is a bug in React.",
   "354": "getInspectorDataForViewAtPoint() is not available in production.",
@@ -366,5 +366,6 @@
   "375": "Functions cannot be passed directly to client components because they're not serializable. Remove %s (%s) from this object, or avoid the entire object: %s",
   "376": "Symbol values (%s) cannot be passed to client components. Remove %s from this object, or avoid the entire object: %s",
   "377": "BigInt (%s) is not yet supported in client component props. Remove %s from this object or use a plain number instead: %s",
-  "378": "Type %s is not supported in client component props. Remove %s from this object, or avoid the entire object: %s"
+  "378": "Type %s is not supported in client component props. Remove %s from this object, or avoid the entire object: %s",
+  "379": "Refs cannot be used in server components, nor passed to client components."
 }

From f46a80ae11ce606e5dc148f9399bef7c60a755a2 Mon Sep 17 00:00:00 2001
From: Saikat Guha <sktguha@gmail.com>
Date: Fri, 9 Oct 2020 07:26:30 +0530
Subject: [PATCH 0005/1603] Update outdated links and fix two broken links 
 (#19985)

* update all facebook.github.io links

* facebookincubator links : update some outdated links and fix two other broken links where they are actually the latest updated ones
---
 CHANGELOG.md                                                  | 2 +-
 fixtures/attribute-behavior/README.md                         | 4 ++--
 fixtures/flight/config/jest/cssTransform.js                   | 2 +-
 fixtures/flight/config/jest/fileTransform.js                  | 2 +-
 .../src/__tests__/ReactDevToolsHooksIntegration-test.js       | 2 +-
 .../src/__tests__/ReactHooksInspectionIntegration-test.js     | 2 +-
 packages/react-devtools-extensions/popups/deadcode.html       | 2 +-
 packages/react-devtools-extensions/popups/development.html    | 2 +-
 packages/react-devtools-extensions/popups/outdated.html       | 2 +-
 packages/react-devtools-extensions/popups/unminified.html     | 2 +-
 packages/react-devtools/README.md                             | 2 +-
 packages/react-test-renderer/README.md                        | 2 +-
 packages/shared/invokeGuardedCallbackImpl.js                  | 2 +-
 13 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2a3c50fa6f83..7882adf318b7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1218,7 +1218,7 @@ Each of these changes will continue to work as before with a new warning until t
 - 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://facebook.github.io/draft-js/) that intentionally manage `contentEditable` children with React. ([@mxstbr](https://github.com/mxstbr) in [#6112](https://github.com/facebook/react/pull/6112))
+- 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))
 
 
diff --git a/fixtures/attribute-behavior/README.md b/fixtures/attribute-behavior/README.md
index d14c5e55cdbd..fbf2acfb5230 100644
--- a/fixtures/attribute-behavior/README.md
+++ b/fixtures/attribute-behavior/README.md
@@ -26,6 +26,6 @@ Right now, we use a purple outline to call out cases where the assigned property
 ---
 
 
-This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
+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/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
+You can find the guide for how to do things in a CRA [here](https://github.com/facebook/create-react-app/blob/master/packages/cra-template/template/README.md).
diff --git a/fixtures/flight/config/jest/cssTransform.js b/fixtures/flight/config/jest/cssTransform.js
index 8f65114812a4..35fe644d7e03 100644
--- a/fixtures/flight/config/jest/cssTransform.js
+++ b/fixtures/flight/config/jest/cssTransform.js
@@ -1,7 +1,7 @@
 'use strict';
 
 // This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/en/webpack.html
+// https://jestjs.io/docs/en/webpack.html
 
 module.exports = {
   process() {
diff --git a/fixtures/flight/config/jest/fileTransform.js b/fixtures/flight/config/jest/fileTransform.js
index aab67618c38b..3ce5e04c6e43 100644
--- a/fixtures/flight/config/jest/fileTransform.js
+++ b/fixtures/flight/config/jest/fileTransform.js
@@ -4,7 +4,7 @@ const path = require('path');
 const camelcase = require('camelcase');
 
 // This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/en/webpack.html
+// https://jestjs.io/docs/en/webpack.html
 
 module.exports = {
   process(src, filename) {
diff --git a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
index 71587ef89d25..6f9cf52787e1 100644
--- a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
@@ -133,7 +133,7 @@ describe('React hooks DevTools integration', () => {
   });
 
   // This test case is based on an open source bug report:
-  // facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
+  // 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)', () => {
     const MyContext = React.createContext(1);
 
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 4dfe0bac0b1f..29ce46b5545a 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -797,7 +797,7 @@ describe('ReactHooksInspectionIntegration', () => {
   });
 
   // This test case is based on an open source bug report:
-  // facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
+  // https://github.com/facebookincubator/redux-react-hook/issues/34#issuecomment-466693787
   it('should properly advance the current hook for useContext', () => {
     const MyContext = React.createContext(1);
 
diff --git a/packages/react-devtools-extensions/popups/deadcode.html b/packages/react-devtools-extensions/popups/deadcode.html
index cdd4c278e86c..4073f80bde20 100644
--- a/packages/react-devtools-extensions/popups/deadcode.html
+++ b/packages/react-devtools-extensions/popups/deadcode.html
@@ -24,7 +24,7 @@
   This makes its size larger, and causes React to run slower.
   <br />
   <br />
-  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">set up dead code elimination</a> before deployment.
+  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>
diff --git a/packages/react-devtools-extensions/popups/development.html b/packages/react-devtools-extensions/popups/development.html
index 3d092a5eb69f..5d537ed37c67 100644
--- a/packages/react-devtools-extensions/popups/development.html
+++ b/packages/react-devtools-extensions/popups/development.html
@@ -20,7 +20,7 @@
 <p>
   Note that the development build is not suitable for production.
   <br />
-  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">use the production build</a> before deployment.
+  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>
diff --git a/packages/react-devtools-extensions/popups/outdated.html b/packages/react-devtools-extensions/popups/outdated.html
index 8f3f3f950876..53484658b046 100644
--- a/packages/react-devtools-extensions/popups/outdated.html
+++ b/packages/react-devtools-extensions/popups/outdated.html
@@ -21,7 +21,7 @@
   We recommend updating React to ensure that you receive important bugfixes and performance improvements.
   <br />
   <br />
-  You can find the upgrade instructions on the <a href="https://facebook.github.io/react/blog/">React blog</a>.
+  You can find the upgrade instructions on the <a href="https://reactjs.org/blog/">React blog</a>.
 </p>
 <hr />
 <p>
diff --git a/packages/react-devtools-extensions/popups/unminified.html b/packages/react-devtools-extensions/popups/unminified.html
index c53885f5098c..b61fb78519b2 100644
--- a/packages/react-devtools-extensions/popups/unminified.html
+++ b/packages/react-devtools-extensions/popups/unminified.html
@@ -23,7 +23,7 @@
   This makes its size larger, and causes React to run slower.
   <br />
   <br />
-  Make sure to <a href="https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build">set up minification</a> before deployment.
+  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>
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
index afb8749d5aca..2551416b970d 100644
--- a/packages/react-devtools/README.md
+++ b/packages/react-devtools/README.md
@@ -101,7 +101,7 @@ By default DevTools listen to port `8097` on `localhost`. If you need to customi
 
 Or you could develop with a local HTTP server [like `serve`](https://www.npmjs.com/package/serve).
 
-**The React tab won't show up if the site doesn't use React**, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named `__REACT_DEVTOOLS_GLOBAL_HOOK__`, then React communicates with that hook during initialization. You can test this on the [React website](http://facebook.github.io/react/) or by inspecting [Facebook](https://www.facebook.com/).
+**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.
 
diff --git a/packages/react-test-renderer/README.md b/packages/react-test-renderer/README.md
index 5ce816cbc740..70e37778d3a3 100644
--- a/packages/react-test-renderer/README.md
+++ b/packages/react-test-renderer/README.md
@@ -23,4 +23,4 @@ console.log(renderer.toJSON());
 //   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://facebook.github.io/jest/blog/2016/07/27/jest-14.html.
+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/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js
index e7a1ba398a24..215a8ae91c51 100644
--- a/packages/shared/invokeGuardedCallbackImpl.js
+++ b/packages/shared/invokeGuardedCallbackImpl.js
@@ -81,7 +81,7 @@ if (__DEV__) {
     ) {
       // If document doesn't exist we know for sure we will crash in this method
       // when we call document.createEvent(). However this can cause confusing
-      // errors: https://github.com/facebookincubator/create-react-app/issues/3482
+      // errors: https://github.com/facebook/create-react-app/issues/3482
       // So we preemptively throw with a better message instead.
       invariant(
         typeof document !== 'undefined',

From 48907797294340b6d5d8fecfbcf97edf0691888d Mon Sep 17 00:00:00 2001
From: IDrissAitHafid <31975500+IDrissAitHafid@users.noreply.github.com>
Date: Fri, 9 Oct 2020 14:29:30 +0100
Subject: [PATCH 0006/1603] Updated OVERVIEW.md to the new infos required when
 adding a new leaf node to the tree (#19981)

Co-authored-by: Idriss AITHAFID <Idriss.AITHAFID@um6p.ma>
---
 packages/react-devtools/OVERVIEW.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index 19b54f0124af..a59a9fcc3bfd 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -70,7 +70,7 @@ For example, adding a root fiber with an id of 1:
 
 #### Adding a leaf node
 
-Adding a leaf node takes a variable number of numbers since we need to decode the name (and potentially the key):
+Adding a leaf node to the tree requires sending 7 numbers:
 
 1. add operation constant (`1`)
 1. fiber id
@@ -88,7 +88,6 @@ For example, adding a function component `<Foo>` with an id 2:
   1,   // ElementTypeClass
   1,   // parent id
   0,   // owner id
-  3,   // encoded display name size
   1,   // id of "Foo" displayName in the string table
   0,   // id of null key in the string table (always zero for null)
 ]

From 7e405d458d6481fb1c04dfca6afab0651e6f67cd Mon Sep 17 00:00:00 2001
From: Nick Reiley <bloomber111@gmail.com>
Date: Mon, 12 Oct 2020 22:07:10 +0500
Subject: [PATCH 0007/1603] [DevTools] Add DevTools forked Feature flags
 (#18994)

Also resolve an uncaught error in extension build (#18843).

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .eslintrc.js                                  |  4 ++-
 .../react-devtools-core/webpack.backend.js    | 10 ++++--
 .../react-devtools-core/webpack.standalone.js | 10 ++++--
 .../webpack.config.js                         |  8 +++--
 .../react-devtools-inline/webpack.config.js   |  8 +++--
 packages/react-devtools-shared/buildUtils.js  | 33 +++++++++++++++++++
 .../config/DevToolsFeatureFlags.default.js    | 16 +++++++++
 .../config/DevToolsFeatureFlags.extension.js  | 29 ++++++++++++++++
 packages/react-devtools-shared/src/hook.js    |  6 +++-
 .../react-devtools-shell/webpack.config.js    |  8 +++--
 scripts/flow/createFlowConfigs.js             |  1 +
 scripts/flow/react-devtools.js                |  3 +-
 scripts/jest/config.build-devtools.js         |  3 ++
 scripts/jest/setupEnvironment.js              |  2 ++
 scripts/jest/typescript/jest.d.ts             |  2 ++
 15 files changed, 128 insertions(+), 15 deletions(-)
 create mode 100644 packages/react-devtools-shared/buildUtils.js
 create mode 100644 packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
 create mode 100644 packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 036df0925197..cb2d737a12f6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -201,9 +201,11 @@ module.exports = {
     spyOnDev: true,
     spyOnDevAndProd: true,
     spyOnProd: true,
+    __EXPERIMENTAL__: true,
+    __EXTENSION__: true,
     __PROFILE__: true,
+    __TEST__: true,
     __UMD__: true,
-    __EXPERIMENTAL__: true,
     __VARIANT__: true,
     gate: true,
     trustedTypes: true,
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index b0809234ff23..f111d7330c62 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -4,6 +4,7 @@ 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) {
@@ -39,17 +40,20 @@ module.exports = {
   resolve: {
     alias: {
       react: resolve(builtModulesDir, 'react'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags('core/backend'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
   plugins: [
     new DefinePlugin({
-      __DEV__: true,
-      __PROFILE__: false,
+      __DEV__,
       __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 4d00d0f2d3a6..64556ae65812 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -4,6 +4,7 @@ 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) {
@@ -33,8 +34,9 @@ module.exports = {
   resolve: {
     alias: {
       react: resolve(builtModulesDir, 'react'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags('core/standalone'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
@@ -47,9 +49,11 @@ module.exports = {
   },
   plugins: [
     new DefinePlugin({
-      __DEV__: false,
-      __PROFILE__: false,
+      __DEV__,
       __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index e2720ec240a9..1a406ccdaf90 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -3,6 +3,7 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {GITHUB_URL, getVersionString} = require('./utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
@@ -39,6 +40,7 @@ module.exports = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags('extension'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
@@ -49,9 +51,11 @@ module.exports = {
   },
   plugins: [
     new DefinePlugin({
-      __DEV__: false,
-      __PROFILE__: false,
+      __DEV__,
       __EXPERIMENTAL__: true,
+      __EXTENSION__: true,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 85c7da82ea3e..af829455c6bd 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -4,6 +4,7 @@ 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) {
@@ -11,7 +12,7 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
-const __DEV__ = true; // NODE_ENV === 'development';
+const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
@@ -32,6 +33,7 @@ module.exports = {
     react: 'react',
     // TODO: Once this package is published, remove the external
     // 'react-debug-tools': 'react-debug-tools',
+    'react-devtools-feature-flags': resolveFeatureFlags('inline'),
     'react-dom': 'react-dom',
     'react-is': 'react-is',
     scheduler: 'scheduler',
@@ -42,8 +44,10 @@ module.exports = {
   plugins: [
     new DefinePlugin({
       __DEV__,
-      __PROFILE__: false,
       __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-shared/buildUtils.js b/packages/react-devtools-shared/buildUtils.js
new file mode 100644
index 000000000000..d5f48d63421b
--- /dev/null
+++ b/packages/react-devtools-shared/buildUtils.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+const {resolve} = require('path');
+
+function resolveFeatureFlags(target) {
+  let flagsPath;
+  switch (target) {
+    case 'core/backend':
+    case 'core/standalone':
+    case 'inline':
+    case 'shell':
+      flagsPath = 'DevToolsFeatureFlags.default';
+      break;
+    case 'extension':
+      flagsPath = 'DevToolsFeatureFlags.extension';
+      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/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
new file mode 100644
index 000000000000..9e2d09d6304f
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/************************************************************************
+ * This file is forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+// TODO Add feature flags here...
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js
new file mode 100644
index 000000000000..a224621bb79b
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/************************************************************************
+ * This file is forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+// TODO Add feature flags here...
+
+/************************************************************************
+ * 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';
+
+// eslint-disable-next-line no-unused-vars
+type Check<_X, Y: _X, X: Y = _X> = null;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<ExportsType, FeatureFlagsType>);
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index f9f65df7fb9c..62234fdc4642 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -172,7 +172,11 @@ export function installHook(target: any): DevToolsHook | null {
     // In that case, we'll patch later (when the frontend attaches).
     //
     // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
-    if (process.env.NODE_ENV !== 'test') {
+    //
+    // Note that because this function is inlined, this conditional check must only use static booleans.
+    // Otherwise the extension will throw with an undefined error.
+    // (See comments in the try/catch below for more context on inlining.)
+    if (!__EXTENSION__ && !__TEST__) {
       try {
         const appendComponentStack =
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 500fed2fb12e..c61e8850295c 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -4,6 +4,7 @@ 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) {
@@ -33,8 +34,9 @@ const config = {
   resolve: {
     alias: {
       react: resolve(builtModulesDir, 'react'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
+      'react-devtools-feature-flags': resolveFeatureFlags('shell'),
+      'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
@@ -45,8 +47,10 @@ const config = {
   plugins: [
     new DefinePlugin({
       __DEV__,
-      __PROFILE__: false,
       __EXPERIMENTAL__: true,
+      __EXTENSION__: false,
+      __PROFILE__: false,
+      __TEST__: NODE_ENV === 'test',
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),
diff --git a/scripts/flow/createFlowConfigs.js b/scripts/flow/createFlowConfigs.js
index ff7bf1b9c6f8..62a54d11122a 100644
--- a/scripts/flow/createFlowConfigs.js
+++ b/scripts/flow/createFlowConfigs.js
@@ -53,6 +53,7 @@ module.name_mapper='ReactServerStreamConfig$$' -> 'forks/ReactServerStreamConfig
 module.name_mapper='ReactServerFormatConfig$$' -> 'forks/ReactServerFormatConfig.${serverRenderer}'
 module.name_mapper='ReactFlightServerConfig$$' -> 'forks/ReactFlightServerConfig.${serverRenderer}'
 module.name_mapper='ReactFlightClientHostConfig$$' -> 'forks/ReactFlightClientHostConfig.${serverRenderer}'
+module.name_mapper='react-devtools-feature-flags' -> 'react-devtools-shared/src/config/DevToolsFeatureFlags.default'
     `.trim(),
     )
     .replace('%REACT_RENDERER_FLOW_IGNORES%', ignoredPaths.join('\n'));
diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js
index bab037351147..c8a8789de4ef 100644
--- a/scripts/flow/react-devtools.js
+++ b/scripts/flow/react-devtools.js
@@ -7,4 +7,5 @@
  * @flow
  */
 
-// No types
+declare var __EXTENSION__: boolean;
+declare var __TEST__: boolean;
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 494cc4a8e721..7f1cd8855929 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -26,6 +26,9 @@ const packages = readdirSync(packagesRoot).filter(dir => {
 // 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
diff --git a/scripts/jest/setupEnvironment.js b/scripts/jest/setupEnvironment.js
index 456645cddaba..2ba88b156169 100644
--- a/scripts/jest/setupEnvironment.js
+++ b/scripts/jest/setupEnvironment.js
@@ -5,6 +5,8 @@ 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';
 global.__UMD__ = false;
 
diff --git a/scripts/jest/typescript/jest.d.ts b/scripts/jest/typescript/jest.d.ts
index ef5ec332bbd7..ca68247fb9fb 100644
--- a/scripts/jest/typescript/jest.d.ts
+++ b/scripts/jest/typescript/jest.d.ts
@@ -1,5 +1,7 @@
 declare var jasmine: any;
 declare var __DEV__: boolean;
+declare var __TEST__: boolean;
+declare var __EXTENSION__: boolean;
 
 declare function afterEach(fn: any): any;
 declare function beforeEach(fn: any): any;

From 7559722a865e89992f75ff38c1015a865660c3cd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 13 Oct 2020 13:08:12 -0400
Subject: [PATCH 0008/1603] Fix bad null check in DevTools highlight code
 (#20010)

---
 .../src/backend/views/Highlighter/index.js                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
index bfd9c7c23033..1278619c5b07 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -103,7 +103,7 @@ export default function setupHighlighter(
     }
 
     let nodes: ?Array<HTMLElement> = null;
-    if (renderer !== null) {
+    if (renderer != null) {
       nodes = ((renderer.findNativeNodesForFiberID(
         id,
       ): any): ?Array<HTMLElement>);

From e614e6965749c096c9db0e6ad2844a2803ebdcb6 Mon Sep 17 00:00:00 2001
From: IDrissAitHafid <31975500+IDrissAitHafid@users.noreply.github.com>
Date: Tue, 13 Oct 2020 18:38:58 +0100
Subject: [PATCH 0009/1603] handled a missing suspense fiber when suspense is
 filtered on the profiler (#19987)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../storeComponentFilters-test.js.snap        | 13 ++++++++
 .../__tests__/storeComponentFilters-test.js   | 30 +++++++++++++++++++
 .../src/backend/renderer.js                   |  2 +-
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
index 884b6cbcec85..cfe68aa69ecb 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
@@ -84,6 +84,19 @@ exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2
       <div>
 `;
 
+exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 1: suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Loading>
+        <div>
+`;
+
+exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 2: resolved 1`] = `
+[root]
+  ▾ <Wrapper>
+      <Component>
+`;
+
 exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
 [root]
   ▾ <Root>
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index 1a5be03f09aa..bfbf3e98210a 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -227,4 +227,34 @@ describe('Store component filters', () => {
         ]),
     );
   });
+
+  it('should not break when Suspense nodes are filtered from the tree', () => {
+    const promise = new Promise(() => {});
+
+    const Loading = () => <div>Loading...</div>;
+
+    const Component = ({shouldSuspend}) => {
+      if (shouldSuspend) {
+        throw promise;
+      }
+      return null;
+    };
+
+    const Wrapper = ({shouldSuspend}) => (
+      <React.Suspense fallback={<Loading />}>
+        <Component shouldSuspend={shouldSuspend} />
+      </React.Suspense>
+    );
+
+    store.componentFilters = [
+      utils.createElementTypeFilter(Types.ElementTypeSuspense),
+    ];
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
+    expect(store).toMatchSnapshot('1: suspended');
+
+    act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
+    expect(store).toMatchSnapshot('2: resolved');
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 2b382e24a59e..c10d71bbfec2 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1572,7 +1572,7 @@ export function attach(
       if (nextPrimaryChildSet !== null) {
         mountFiberRecursively(
           nextPrimaryChildSet,
-          nextFiber,
+          shouldIncludeInTree ? nextFiber : parentFiber,
           true,
           traceNearestHostComponentUpdate,
         );

From 880587366d84f9d36dd606088bc7bad050ead77e Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 14 Oct 2020 08:54:34 -0400
Subject: [PATCH 0010/1603] Deprecate old test script commands (#19893)

* Deprecate old test script commands

* Update PR template test script

* Add test-stable and test-www-classic

* Update circle test names

* Rename test-www-classic to test-classic

* Missed some job renames

* Missed some more job renames
---
 .circleci/config.yml             | 86 ++++++++++++++++----------------
 .github/PULL_REQUEST_TEMPLATE.md |  2 +-
 package.json                     | 28 ++++++-----
 scripts/jest/jest-cli.js         |  9 ++++
 4 files changed, 68 insertions(+), 57 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 07459b232ab1..d41354116fbe 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -101,7 +101,7 @@ jobs:
       - *restore_node_modules
       - run: node ./scripts/tasks/flow-ci
 
-  RELEASE_CHANNEL_stable_yarn_test:
+  yarn_test-stable:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
@@ -109,7 +109,7 @@ jobs:
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=stable --ci
+      - run: yarn test-stable --ci
 
   yarn_test:
     docker: *docker
@@ -120,79 +120,79 @@ jobs:
       - *restore_node_modules
       - run: yarn test --ci
 
-  RELEASE_CHANNEL_stable_yarn_test_www:
+  yarn_test-classic:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-classic --ci
+      - run: yarn test-classic --ci
 
-  RELEASE_CHANNEL_stable_yarn_test_www_variant:
+  yarn_test-classic_variant:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-classic --variant --ci
+      - run: yarn test-classic --variant --ci
 
-  RELEASE_CHANNEL_stable_yarn_test_prod_www:
+  yarn_test-classic_prod:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-classic --prod --ci
+      - run: yarn test-classic --prod --ci
 
-  RELEASE_CHANNEL_stable_yarn_test_prod_www_variant:
+  yarn_test-classic_prod_variant:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-classic --prod --variant --ci
+      - run: yarn test-classic --prod --variant --ci
 
-  yarn_test_www:
+  yarn_test-www:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-modern --ci
+      - run: yarn test-www --ci
 
-  yarn_test_www_variant:
+  yarn_test-www_variant:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-modern --variant --ci
+      - run: yarn test-www --variant --ci
 
-  yarn_test_prod_www:
+  yarn_test-www_prod:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-modern --prod --ci
+      - run: yarn test-www --prod --ci
 
-  yarn_test_prod_www_variant:
+  yarn_test-www_prod_variant:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=www-modern --prod --variant --ci
+      - run: yarn test-www --prod --variant --ci
 
-  RELEASE_CHANNEL_stable_yarn_test_persistent:
+  yarn_test-stable_persistent:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
@@ -200,9 +200,9 @@ jobs:
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=stable --persistent --ci
+      - run: yarn test-stable --persistent --ci
 
-  RELEASE_CHANNEL_stable_yarn_test_prod:
+  yarn_test-stable_prod:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
@@ -210,7 +210,7 @@ jobs:
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=stable --prod --ci
+      - run: yarn test-stable --prod --ci
 
   yarn_test_prod:
     docker: *docker
@@ -219,7 +219,7 @@ jobs:
     steps:
       - checkout
       - *restore_node_modules
-      - run: yarn test --release-channel=experimental --prod --ci
+      - run: yarn test --prod --ci
 
   RELEASE_CHANNEL_stable_yarn_build:
     docker: *docker
@@ -316,7 +316,7 @@ jobs:
           root: packages/react-devtools-scheduling-profiler
           paths:
             - dist
-  
+
   deploy_devtools_scheduling_profiler:
     docker: *docker
     environment: *environment
@@ -389,7 +389,7 @@ jobs:
           command: yarn lint-build
       - run: scripts/circleci/check_minified_errors.sh
 
-  RELEASE_CHANNEL_stable_yarn_test_build:
+  yarn_test-stable_build:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
@@ -397,7 +397,7 @@ jobs:
       - checkout
       - attach_workspace: *attach_workspace
       - *restore_node_modules
-      - run: yarn test --release-channel=stable --build --ci
+      - run: yarn test-stable --build --ci
 
   yarn_test_build:
     docker: *docker
@@ -407,7 +407,7 @@ jobs:
       - checkout
       - attach_workspace: *attach_workspace
       - *restore_node_modules
-      - run: yarn test --release-channel=experimental --build --ci
+      - run: yarn test --build --ci
 
   yarn_test_build_devtools:
     docker: *docker
@@ -447,7 +447,7 @@ jobs:
             FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
             FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci
 
-  RELEASE_CHANNEL_stable_yarn_test_build_prod:
+  yarn_test-stable_build_prod:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
@@ -455,7 +455,7 @@ jobs:
       - checkout
       - attach_workspace: *attach_workspace
       - *restore_node_modules
-      - run: yarn test --release-channel=stable --build --prod --ci
+      - run: yarn test-stable --build --prod --ci
 
   yarn_test_build_prod:
     docker: *docker
@@ -465,7 +465,7 @@ jobs:
       - checkout
       - attach_workspace: *attach_workspace
       - *restore_node_modules
-      - run: yarn test --release-channel=experimental --build --prod --ci
+      - run: yarn test --build --prod --ci
 
 workflows:
   version: 2
@@ -478,25 +478,25 @@ workflows:
       - yarn_flow:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test:
+      - yarn_test-stable:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test_prod:
+      - yarn_test-stable_prod:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test_persistent:
+      - yarn_test-stable_persistent:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test_www:
+      - yarn_test-classic:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test_www_variant:
+      - yarn_test-classic_variant:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test_prod_www:
+      - yarn_test-classic_prod:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test_prod_www_variant:
+      - yarn_test-classic_prod_variant:
           requires:
             - setup
       - RELEASE_CHANNEL_stable_yarn_build:
@@ -511,10 +511,10 @@ workflows:
       - RELEASE_CHANNEL_stable_yarn_lint_build:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
-      - RELEASE_CHANNEL_stable_yarn_test_build:
+      - yarn_test-stable_build:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
-      - RELEASE_CHANNEL_stable_yarn_test_build_prod:
+      - yarn_test-stable_build_prod:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
       - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
@@ -530,16 +530,16 @@ workflows:
       - yarn_test_prod:
           requires:
             - setup
-      - yarn_test_www:
+      - yarn_test-www:
           requires:
             - setup
-      - yarn_test_www_variant:
+      - yarn_test-www_variant:
           requires:
             - setup
-      - yarn_test_prod_www:
+      - yarn_test-www_prod:
           requires:
             - setup
-      - yarn_test_prod_www_variant:
+      - yarn_test-www_prod_variant:
           requires:
             - setup
       - yarn_build:
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 7759363adb33..11ef400966cd 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -8,7 +8,7 @@
   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`.
+  5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`.
   6. If you need a debugger, run `yarn debug-test --watch TestName`, open `chrome://inspect`, and press "Inspect".
   7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`).
   8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
diff --git a/package.json b/package.json
index 42e625fd6cbd..64e4430ede0a 100644
--- a/package.json
+++ b/package.json
@@ -110,21 +110,23 @@
     "lint-build": "node ./scripts/rollup/validate/index.js",
     "extract-errors": "yarn build --type=dev --extract-errors",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
-    "debug-test": "yarn test --debug",
+    "debug-test": "yarn test --deprecated 'yarn test --debug'",
     "test": "node ./scripts/jest/jest-cli.js",
-    "test-www": "yarn test --release-channel=www-modern",
-    "test-www-variant": "yarn test --release-channel=www-modern --variant",
-    "test-prod-www": "yarn test --prod --release-channel=www-modern",
-    "test-prod-www-variant": "yarn test --prod --release-channel=www-modern --variant",
-    "test-persistent": "yarn test --persistent",
-    "debug-test-persistent": "yarn test --debug --persistent",
-    "test-prod": "yarn test --prod",
-    "debug-test-prod": "yarn test --debug --prod",
-    "test-prod-build": "yarn test --prod --build",
-    "test-build": "yarn test --build",
-    "test-build-prod": "yarn test --build --prod",
+    "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-www-variant": "yarn test --deprecated 'yarn test-www --variant'",
+    "test-prod-www": "yarn test --deprecated 'yarn test-www --prod'",
+    "test-prod-www-variant": "yarn test --deprecated 'yarn test-www --prod --variant'",
+    "test-persistent": "yarn test --deprecated 'yarn test --persistent'",
+    "debug-test-persistent": "yarn test --deprecated 'yarn test --debug --persistent'",
+    "test-prod": "yarn test --deprecated 'yarn test --prod'",
+    "debug-test-prod": "yarn test --deprecated 'yarn test --debug --prod'",
+    "test-prod-build": "yarn test --deprecated 'yarn test --prod --build'",
+    "test-build": "yarn test --deprecated 'yarn test --build'",
+    "test-build-prod": "yarn test --deprecated 'yarn test --build --prod'",
     "test-build-devtools": "yarn test --build --project devtools",
-    "debug-test-build-devtools": "yarn test --debug --build --project devtools",
+    "debug-test-build-devtools": "yarn test --deprecated 'yarn test-build-devtools --debug'",
     "test-dom-fixture": "cd fixtures/dom && yarn && yarn prestart && yarn test",
     "flow": "node ./scripts/tasks/flow.js",
     "flow-ci": "node ./scripts/tasks/flow-ci.js",
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 4bd737713466..19e3879c776a 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -93,6 +93,11 @@ const argv = yargs
       type: 'boolean',
       default: false,
     },
+    deprecated: {
+      describe: 'Print deprecation message for command.',
+      requiresArg: true,
+      type: 'string',
+    },
   }).argv;
 
 function logError(message) {
@@ -287,6 +292,10 @@ function getEnvars() {
 }
 
 function main() {
+  if (argv.deprecated) {
+    console.log(chalk.red(`\nPlease run: \`${argv.deprecated}\` instead.\n`));
+    return;
+  }
   validateOptions();
   const args = getCommandArgs();
   const envars = getEnvars();

From f75f8b48a2ab14e31712389f91750c58de18c378 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 14 Oct 2020 13:19:47 -0400
Subject: [PATCH 0011/1603] DevTools always overrides the dispatcher when
 shallow rendering (#20011)

This is done so that any effects scheduled by the shallow render are thrown away.

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.
---
 .../src/__tests__/componentStacks-test.js     | 105 ++++++++++++++++++
 .../backend/DevToolsComponentStackFrame.js    |  24 ++--
 2 files changed, 117 insertions(+), 12 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/__tests__/componentStacks-test.js

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 000000000000..3028fc182da5
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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 **)';
+  });
+}
+
+describe('component stack', () => {
+  let React;
+  let ReactDOM;
+  let act;
+  let mockError;
+  let mockWarn;
+
+  beforeEach(() => {
+    // Intercept native console methods before DevTools bootstraps.
+    // Normalize component stack locations.
+    mockError = jest.fn();
+    mockWarn = jest.fn();
+    console.error = (...args) => {
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
+    console.warn = (...args) => {
+      mockWarn(...args.map(normalizeCodeLocInfo));
+    };
+
+    const utils = require('./utils');
+    act = utils.act;
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+  });
+
+  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;
+    };
+
+    const container = document.createElement('div');
+
+    act(() => ReactDOM.render(<Grandparent />, container));
+
+    expect(mockError).toHaveBeenCalledWith(
+      'Test error.',
+      '\n    in Child (at **)' +
+        '\n    in Parent (at **)' +
+        '\n    in Grandparent (at **)',
+    );
+    expect(mockWarn).toHaveBeenCalledWith(
+      '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...
+  xit('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;
+    };
+
+    const container = document.createElement('div');
+    act(() => ReactDOM.render(<Example test="abc" />, container));
+
+    expect(useEffectCount).toBe(1);
+
+    expect(mockWarn).toHaveBeenCalledWith(
+      'Warning to trigger appended component stacks.',
+      '\n    in Example (at **)',
+    );
+  });
+});
diff --git a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
index b3b306a111be..581fdfa40a1b 100644
--- a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
+++ b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
@@ -85,14 +85,16 @@ export function describeNativeComponentFrame(
   Error.prepareStackTrace = undefined;
 
   reentry = true;
-  let previousDispatcher;
-  if (__DEV__) {
-    previousDispatcher = currentDispatcherRef.current;
-    // Set the dispatcher in DEV because this might be call in the render function
-    // for warnings.
-    currentDispatcherRef.current = null;
-    disableLogs();
-  }
+
+  // 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.current;
+  currentDispatcherRef.current = null;
+  disableLogs();
+
   try {
     // This should throw.
     if (construct) {
@@ -188,10 +190,8 @@ export function describeNativeComponentFrame(
 
     Error.prepareStackTrace = previousPrepareStackTrace;
 
-    if (__DEV__) {
-      currentDispatcherRef.current = previousDispatcher;
-      reenableLogs();
-    }
+    currentDispatcherRef.current = previousDispatcher;
+    reenableLogs();
   }
   // Fallback to just using the name if we couldn't make it throw.
   const name = fn ? fn.displayName || fn.name : '';

From 6d50a9d090a2a672fc3dea5ce77a3a05332a6caa Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 14 Oct 2020 18:28:03 +0100
Subject: [PATCH 0012/1603] Fixture: Legacy JSX Runtimes (#20012)

* Fixture: Legacy JSX Runtimes

* Add more comments
---
 fixtures/legacy-jsx-runtimes/README.md        |   12 +
 fixtures/legacy-jsx-runtimes/babel.config.js  |   12 +
 fixtures/legacy-jsx-runtimes/lint-runtimes.js |   63 +
 fixtures/legacy-jsx-runtimes/package.json     |   19 +
 .../cjs/react-jsx-dev-runtime.development.js  |  861 ++++
 .../react-jsx-dev-runtime.production.min.js   |    9 +
 .../cjs/react-jsx-runtime.development.js      |  883 ++++
 .../cjs/react-jsx-runtime.production.min.js   |   10 +
 .../react-14/jsx-dev-runtime.js               |    7 +
 .../react-14/jsx-runtime.js                   |    7 +
 .../legacy-jsx-runtimes/react-14/package.json |    6 +
 .../react-14/react-14.test.js                 |  780 ++++
 .../legacy-jsx-runtimes/react-14/yarn.lock    |  285 ++
 .../cjs/react-jsx-dev-runtime.development.js  |  866 ++++
 .../react-jsx-dev-runtime.production.min.js   |    9 +
 .../cjs/react-jsx-runtime.development.js      |  888 ++++
 .../cjs/react-jsx-runtime.production.min.js   |   10 +
 .../react-15/jsx-dev-runtime.js               |    7 +
 .../react-15/jsx-runtime.js                   |    7 +
 .../legacy-jsx-runtimes/react-15/package.json |    6 +
 .../react-15/react-15.test.js                 |  775 ++++
 .../legacy-jsx-runtimes/react-15/yarn.lock    |  149 +
 .../cjs/react-jsx-dev-runtime.development.js  |  889 ++++
 .../react-jsx-dev-runtime.production.min.js   |    9 +
 .../cjs/react-jsx-runtime.development.js      |  911 ++++
 .../cjs/react-jsx-runtime.production.min.js   |   10 +
 .../react-16/jsx-dev-runtime.js               |    7 +
 .../react-16/jsx-runtime.js                   |    7 +
 .../legacy-jsx-runtimes/react-16/package.json |    7 +
 .../react-16/react-16.test.js                 |  773 ++++
 .../legacy-jsx-runtimes/react-16/yarn.lock    |   61 +
 .../cjs/react-jsx-dev-runtime.development.js  | 1203 ++++++
 .../react-jsx-dev-runtime.production.min.js   |    9 +
 .../cjs/react-jsx-runtime.development.js      | 1221 ++++++
 .../cjs/react-jsx-runtime.production.min.js   |   10 +
 .../react-17/jsx-dev-runtime.js               |    7 +
 .../react-17/jsx-runtime.js                   |    7 +
 .../legacy-jsx-runtimes/react-17/package.json |    7 +
 .../react-17/react-17.test.js                 |  773 ++++
 .../legacy-jsx-runtimes/react-17/yarn.lock    |   59 +
 fixtures/legacy-jsx-runtimes/setupTests.js    |  318 ++
 fixtures/legacy-jsx-runtimes/yarn.lock        | 3780 +++++++++++++++++
 scripts/prettier/index.js                     |    2 +-
 43 files changed, 15740 insertions(+), 1 deletion(-)
 create mode 100644 fixtures/legacy-jsx-runtimes/README.md
 create mode 100644 fixtures/legacy-jsx-runtimes/babel.config.js
 create mode 100644 fixtures/legacy-jsx-runtimes/lint-runtimes.js
 create mode 100644 fixtures/legacy-jsx-runtimes/package.json
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-dev-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/cjs/react-jsx-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/jsx-dev-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/jsx-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/package.json
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/react-14.test.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-14/yarn.lock
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-dev-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/cjs/react-jsx-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/jsx-dev-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/jsx-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/package.json
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/react-15.test.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-15/yarn.lock
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-dev-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/cjs/react-jsx-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/jsx-dev-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/jsx-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/package.json
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/react-16.test.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-16/yarn.lock
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-dev-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.development.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/cjs/react-jsx-runtime.production.min.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/jsx-dev-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/jsx-runtime.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/package.json
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/react-17.test.js
 create mode 100644 fixtures/legacy-jsx-runtimes/react-17/yarn.lock
 create mode 100644 fixtures/legacy-jsx-runtimes/setupTests.js
 create mode 100644 fixtures/legacy-jsx-runtimes/yarn.lock

diff --git a/fixtures/legacy-jsx-runtimes/README.md b/fixtures/legacy-jsx-runtimes/README.md
new file mode 100644
index 000000000000..376c2c4f208f
--- /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 000000000000..132bbca7ae23
--- /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 000000000000..fb6584c572f7
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/lint-runtimes.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const 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 000000000000..94feb1aed0d1
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/package.json
@@ -0,0 +1,19 @@
+{
+  "dependencies": {
+    "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "jest": "^26.5.3"
+  },
+  "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",
+    "test-jsx-dev": "BABEL_ENV=production NODE_ENV=development jest",
+    "test-jsx-prod": "BABEL_ENV=production NODE_ENV=production jest",
+    "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 000000000000..31238ef27cf8
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..1cdc0e2730e8
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..5658993188ae
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..517b90d6793a
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..324eb11e5992
--- /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 000000000000..0416df54291a
--- /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 000000000000..20cff83c9d8e
--- /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 000000000000..a7161485a363
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-14/react-14.test.js
@@ -0,0 +1,780 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 000000000000..e6924d109655
--- /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 000000000000..ecad786788f0
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..d3abdf0a41b5
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..9fce32b1c1e4
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..a80ad2d1384e
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..324eb11e5992
--- /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 000000000000..0416df54291a
--- /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 000000000000..e5d144ca0533
--- /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 000000000000..75891a88b8a5
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-15/react-15.test.js
@@ -0,0 +1,775 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 000000000000..47c01c42e828
--- /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 000000000000..880e9b652f0b
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..a20e4b9242b9
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..76e6f2457b9c
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..cbc6bf496a52
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..324eb11e5992
--- /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 000000000000..0416df54291a
--- /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 000000000000..a283476fb76b
--- /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 000000000000..55bcb8ae84ac
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-16/react-16.test.js
@@ -0,0 +1,773 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 000000000000..0c9a46a49a49
--- /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 000000000000..3b7122293e1b
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..a55f6ac700aa
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..690bebdf5252
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+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 000000000000..09cf15e9eb5b
--- /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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';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 000000000000..324eb11e5992
--- /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 000000000000..0416df54291a
--- /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 000000000000..2808e59ffaeb
--- /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 000000000000..6e47d4655c2c
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js
@@ -0,0 +1,773 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 fn (at **)\n' + // Jest/Node issue
+      '    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 construct (at **)' // Jest/Node issue
+  );
+});
+
+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 000000000000..becb74e0081c
--- /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 000000000000..85a21cc15d91
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/setupTests.js
@@ -0,0 +1,318 @@
+'use strict';
+
+// This is mostly copypasta from toWarnDev.js matchers
+// that we use in the main repo Jest configuration.
+
+const expect = global.expect;
+
+const jestDiff = require('jest-diff').default;
+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;
+    }
+    if (
+      format.indexOf(
+        'act(...) is not supported in production builds of React'
+      ) === 0
+    ) {
+      // We don't yet support act() for prod builds, and warn for it.
+      // But we'd like to use act() ourselves for prod builds.
+      // Let's ignore the warning and #yolo.
+      return true;
+    }
+  }
+  // Looks legit
+  return false;
+}
+
+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 000000000000..0311bc8df168
--- /dev/null
+++ b/fixtures/legacy-jsx-runtimes/yarn.lock
@@ -0,0 +1,3780 @@
+# 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":
+  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/core@^7.1.0", "@babel/core@^7.7.5":
+  version "7.11.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.6.tgz#3a9455dc7387ff1bac45770650bc13ba04a15651"
+  integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/generator" "^7.11.6"
+    "@babel/helper-module-transforms" "^7.11.0"
+    "@babel/helpers" "^7.10.4"
+    "@babel/parser" "^7.11.5"
+    "@babel/template" "^7.10.4"
+    "@babel/traverse" "^7.11.5"
+    "@babel/types" "^7.11.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.11.5", "@babel/generator@^7.11.6":
+  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/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-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-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-transforms@^7.10.4", "@babel/helper-module-transforms@^7.11.0":
+  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-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.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-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.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-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/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.1.0", "@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.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-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-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-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", "@babel/template@^7.3.3":
+  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.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.11.5":
+  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/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3":
+  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==
+
+"@cnakazawa/watch@^1.0.3":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
+  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
+  dependencies:
+    exec-sh "^0.3.2"
+    minimist "^1.2.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@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.5.2.tgz#94fc4865b1abed7c352b5e21e6c57be4b95604a6"
+  integrity sha512-lJELzKINpF1v74DXHbCRIkQ/+nUV1M+ntj+X1J8LxCgpmJZjfLmhFejiMSbjjD66fayxl5Z06tbs3HMyuik6rw==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^26.5.2"
+    jest-util "^26.5.2"
+    slash "^3.0.0"
+
+"@jest/core@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.5.3.tgz#712ed4adb64c3bda256a3f400ff1d3eb2a031f13"
+  integrity sha512-CiU0UKFF1V7KzYTVEtFbFmGLdb2g4aTtY0WlyUfLgj/RtoTnJFhh50xKKr7OYkdmBUlGFSa2mD1TU3UZ6OLd4g==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/reporters" "^26.5.3"
+    "@jest/test-result" "^26.5.2"
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^26.5.2"
+    jest-config "^26.5.3"
+    jest-haste-map "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.5.2"
+    jest-resolve-dependencies "^26.5.3"
+    jest-runner "^26.5.3"
+    jest-runtime "^26.5.3"
+    jest-snapshot "^26.5.3"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    jest-watcher "^26.5.2"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.5.2.tgz#eba3cfc698f6e03739628f699c28e8a07f5e65fe"
+  integrity sha512-YjhCD/Zhkz0/1vdlS/QN6QmuUdDkpgBdK4SdiVg4Y19e29g4VQYN5Xg8+YuHjdoWGY7wJHMxc79uDTeTOy9Ngw==
+  dependencies:
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    jest-mock "^26.5.2"
+
+"@jest/fake-timers@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.5.2.tgz#1291ac81680ceb0dc7daa1f92c059307eea6400a"
+  integrity sha512-09Hn5Oraqt36V1akxQeWMVL0fR9c6PnEhpgLaYvREXZJAh2H2Y+QLCsl0g7uMoJeoWJAuz4tozk1prbR1Fc1sw==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@sinonjs/fake-timers" "^6.0.1"
+    "@types/node" "*"
+    jest-message-util "^26.5.2"
+    jest-mock "^26.5.2"
+    jest-util "^26.5.2"
+
+"@jest/globals@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.5.3.tgz#90769b40e0af3fa0b28f6d8c5bbe3712467243fd"
+  integrity sha512-7QztI0JC2CuB+Wx1VdnOUNeIGm8+PIaqngYsZXQCkH2QV0GFqzAYc9BZfU0nuqA6cbYrWh5wkuMzyii3P7deug==
+  dependencies:
+    "@jest/environment" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    expect "^26.5.3"
+
+"@jest/reporters@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.5.3.tgz#e810e9c2b670f33f1c09e9975749260ca12f1c17"
+  integrity sha512-X+vR0CpfMQzYcYmMFKNY9n4jklcb14Kffffp7+H/MqitWnb0440bW2L76NGWKAa+bnXhNoZr+lCVtdtPmfJVOQ==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^26.5.2"
+    "@jest/test-result" "^26.5.2"
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.2"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^26.5.2"
+    jest-resolve "^26.5.2"
+    jest-util "^26.5.2"
+    jest-worker "^26.5.0"
+    slash "^3.0.0"
+    source-map "^0.6.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^6.0.1"
+  optionalDependencies:
+    node-notifier "^8.0.0"
+
+"@jest/source-map@^26.5.0":
+  version "26.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.5.0.tgz#98792457c85bdd902365cd2847b58fff05d96367"
+  integrity sha512-jWAw9ZwYHJMe9eZq/WrsHlwF8E3hM9gynlcDpOyCb9bR8wEd9ZNBZCi7/jZyzHxC7t3thZ10gO2IDhu0bPKS5g==
+  dependencies:
+    callsites "^3.0.0"
+    graceful-fs "^4.2.4"
+    source-map "^0.6.0"
+
+"@jest/test-result@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.5.2.tgz#cc1a44cfd4db2ecee3fb0bc4e9fe087aa54b5230"
+  integrity sha512-E/Zp6LURJEGSCWpoMGmCFuuEI1OWuI3hmZwmULV0GsgJBh7u0rwqioxhRU95euUuviqBDN8ruX/vP/4bwYolXw==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
+"@jest/test-sequencer@^26.5.3":
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.5.3.tgz#9ae0ab9bc37d5171b28424029192e50229814f8d"
+  integrity sha512-Wqzb7aQ13L3T47xHdpUqYMOpiqz6Dx2QDDghp5AV/eUDXR7JieY+E1s233TQlNyl+PqtqgjVokmyjzX/HA51BA==
+  dependencies:
+    "@jest/test-result" "^26.5.2"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.5.2"
+    jest-runner "^26.5.3"
+    jest-runtime "^26.5.3"
+
+"@jest/transform@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.5.2.tgz#6a0033a1d24316a1c75184d010d864f2c681bef5"
+  integrity sha512-AUNjvexh+APhhmS8S+KboPz+D3pCxPvEAGduffaAJYxIFxGi/ytZQkrqcKDUU0ERBAo5R7087fyOYr2oms1seg==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/types" "^26.5.2"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^4.0.0"
+    convert-source-map "^1.4.0"
+    fast-json-stable-stringify "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-util "^26.5.2"
+    micromatch "^4.0.2"
+    pirates "^4.0.1"
+    slash "^3.0.0"
+    source-map "^0.6.1"
+    write-file-atomic "^3.0.0"
+
+"@jest/types@^26.5.2":
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.5.2.tgz#44c24f30c8ee6c7f492ead9ec3f3c62a5289756d"
+  integrity sha512-QDs5d0gYiyetI8q+2xWdkixVQMklReZr4ltw7GFDtb4fuJIBCE6mzj2LnitGqCuAlLap6wPyb8fpoHgwZz5fdg==
+  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"
+
+"@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@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
+  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
+  version "7.1.10"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.10.tgz#ca58fc195dd9734e77e57c6f2df565623636ab40"
+  integrity sha512-x8OM8XzITIMyiwl5Vmo2B1cR1S1Ipkyv4mdlbJjMa1lmuKvKY9FrBbEANIaMlnWn5Rf7uO+rC/VgYabNkE17Hw==
+  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.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.2.tgz#f3d71178e187858f7c45e30380f8f1b7415a12d8"
+  integrity sha512-MdSJnBjl+bdwkLskZ3NGFp9YcXGx5ggLpQQPqtgakVhsWK0hTtNYhjpZLlWQTviGTvF8at+Bvli3jV7faPdgeQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.3.tgz#b8aaeba0a45caca7b56a5de9459872dde3727214"
+  integrity sha512-uCoznIPDmnickEi6D0v11SBpW0OuVqHJCa7syXqQHy5uktSCreIlt0iglsCnmvz8yCb38hGcWeseA8cWJSwv5Q==
+  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.0.15"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.15.tgz#db9e4238931eb69ef8aab0ad6523d4d4caa39d03"
+  integrity sha512-Pzh9O3sTK8V6I1olsXpCfj2k/ygO2q1X0vhhnDrEQyYLHZesWz+zMZMVcwXLCYf0U36EtmyYaFGPfXlTtDHe3A==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/graceful-fs@^4.1.2":
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.3.tgz#039af35fe26bec35003e8d86d2ee9c586354348f"
+  integrity sha512-AiHRaEB50LQg0pZmm659vNBb9f4SJ0qrAnteuzhSeAUcJKxoYgEnprg/83kppCnc2zvtCKbdZry1a5pVY3lOTQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@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 "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.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/node@*":
+  version "14.11.8"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.8.tgz#fe2012f2355e4ce08bca44aeb3abbb21cf88d33f"
+  integrity sha512-KPcKqKm5UKDkaYPTuXSx8wEP7vE9GnuaXIZKijwRYcePpZFDVuy2a57LarFKiORbHOuTOOwYzxVxcUzsh2P2Pw==
+
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
+  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
+
+"@types/prettier@^2.0.0":
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.2.tgz#4929992f87a0129f4960a110faeb526210562e7b"
+  integrity sha512-IiPhNnenzkqdSdQH3ifk9LoX7oQe61ZlDdDO4+MUv6FyWdPGDPr26gCPVs3oguZEMq//nFZZpwUZcVuNJsG+DQ==
+
+"@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/yargs-parser@*":
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
+  integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
+
+"@types/yargs@^15.0.0":
+  version "15.0.8"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.8.tgz#7644904cad7427eb704331ea9bf1ee5499b82e23"
+  integrity sha512-b0BYzFUzBpOhPjpl1wtAHU994jBeKF4TKVlT7ssFv44T617XNcPdRoG4AzHLVshLzlrF7i3lTelH7UbuNYV58Q==
+  dependencies:
+    "@types/yargs-parser" "*"
+
+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==
+
+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-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==
+
+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"
+
+ansi-escapes@^4.2.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-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.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.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"
+
+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"
+
+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-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@~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=
+
+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=
+
+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==
+
+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.10.1"
+  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428"
+  integrity sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==
+
+babel-jest@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.5.2.tgz#164f367a35946c6cf54eaccde8762dec50422250"
+  integrity sha512-U3KvymF3SczA3vOL/cgiUFOznfMET+XDIXiWnoJV45siAp2pLMG8i2+/MGZlAC3f/F6Q40LR4M4qDrWZ9wkK8A==
+  dependencies:
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^26.5.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    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.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
+  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.5.0.tgz#3916b3a28129c29528de91e5784a44680db46385"
+  integrity sha512-ck17uZFD3CDfuwCLATWZxkkuGGFhMij8quP8CNhwj8ek1mqFgbFzRJ30xwC04LLscj/aKsVFfRST+b5PT7rSuw==
+  dependencies:
+    "@babel/template" "^7.3.3"
+    "@babel/types" "^7.3.3"
+    "@types/babel__core" "^7.0.0"
+    "@types/babel__traverse" "^7.0.6"
+
+babel-preset-current-node-syntax@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-0.1.4.tgz#826f1f8e7245ad534714ba001f84f7e906c3b615"
+  integrity sha512-5/INNCYhUGqw7VbVjT/hb3ucjgkVHKXY7lX3ZjlN4gm565VyFmJUrJ/h+h16ECVB38R/9SF6aACydpKMLZ/c9w==
+  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-preset-jest@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.5.0.tgz#f1b166045cd21437d1188d29f7fba470d5bdb0e7"
+  integrity sha512-F2vTluljhqkiGSJGBg/jOruA8vIIIL11YrxRcO7nviNTMbbofPSHwnm8mgP7d/wS7wRSexRoI6X1A6T74d4LQA==
+  dependencies:
+    babel-plugin-jest-hoist "^26.5.0"
+    babel-preset-current-node-syntax "^0.1.3"
+
+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=
+
+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"
+
+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"
+
+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:
+  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:
+  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"
+
+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==
+
+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==
+
+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"
+
+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, 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.1.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.1.0.tgz#27dc176173725fb0adf8a48b647f4d7871944d78"
+  integrity sha512-WCMml9ivU60+8rEJgELlFp1gxFcEGxwYleE3bziHEDeqsqAWGHdimB7beBFGjLzVNgPGyDsfgXLQEYMpmIFnVQ==
+
+capture-exit@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
+  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
+  dependencies:
+    rsvp "^4.8.4"
+
+caseless@~0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
+
+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.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"
+
+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@^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==
+
+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"
+
+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"
+
+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=
+
+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==
+
+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==
+
+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"
+
+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==
+
+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@^1.4.0, 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"
+  integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
+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-util-is@1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
+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.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"
+
+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.2.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"
+
+dashdash@^1.12.0:
+  version "1.14.1"
+  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
+  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
+  dependencies:
+    assert-plus "^1.0.0"
+
+data-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"
+
+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@^4.1.0, debug@^4.1.1:
+  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"
+
+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.2.0:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
+  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
+
+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=
+
+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-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 sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
+
+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@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.5.0.tgz#ef766cf09d43ed40406611f11c6d8d9dd8b2fefd"
+  integrity sha512-ZXx86srb/iYy6jG71k++wBN9P9J05UNQ5hQHQd9MtMPvcqXPx/vKU69jfHV637D00Q2gSgPk2D+jSx3l1lDW/Q==
+
+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"
+
+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"
+
+emittery@^0.7.1:
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.1.tgz#c02375a927a40948c0345cc903072597f5270451"
+  integrity sha512-d34LN4L6h18Bzz9xpoku2nPwKxCPlPMr3EEKTkoEBi+1/+b0lcRkRJ1UVyyZaKNeqGR3swcGl6s390DNO4YVgQ==
+
+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==
+
+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"
+
+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"
+
+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==
+
+escodegen@^1.14.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"
+
+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==
+
+estraverse@^4.2.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+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==
+
+exec-sh@^0.3.2:
+  version "0.3.4"
+  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
+  integrity sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==
+
+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"
+
+exit@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
+  integrity sha1-BjJjj42HfMghB9MKD/8aF8uhzQw=
+
+expand-brackets@^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"
+
+expect@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-26.5.3.tgz#89d9795036f7358b0a9a5243238eb8086482d741"
+  integrity sha512-kkpOhGRWGOr+TEFUnYAjfGvv35bfP+OlPtqPIJpOCR9DVtv8QV+p8zG0Edqafh80fsjeE+7RBcVUq1xApnYglw==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    ansi-styles "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-matcher-utils "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-regex-util "^26.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.2:
+  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"
+
+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=
+
+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"
+
+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"
+
+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"
+
+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=
+
+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"
+
+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"
+
+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@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
+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:
+  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==
+
+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-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@^4.0.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:
+  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-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@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+  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@^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.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==
+
+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=
+
+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-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-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.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"
+
+hosted-git-info@^2.1.4:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
+  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
+
+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-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==
+
+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"
+
+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==
+
+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-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"
+  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.4"
+  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ip-regex@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
+  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
+
+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-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-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-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
+  dependencies:
+    ci-info "^2.0.0"
+
+is-data-descriptor@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
+  integrity sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=
+  dependencies:
+    kind-of "^3.0.2"
+
+is-data-descriptor@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
+  dependencies:
+    kind-of "^6.0.0"
+
+is-date-object@^1.0.1:
+  version "1.0.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-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.1.1"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
+  integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
+
+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-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@^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-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-potential-custom-element-name@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
+  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+
+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@^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.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-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"
+
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
+
+is-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@^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@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-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-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
+  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.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.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
+  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
+  dependencies:
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
+
+jest-changed-files@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.5.2.tgz#330232c6a5c09a7f040a5870e8f0a9c6abcdbed5"
+  integrity sha512-qSmssmiIdvM5BWVtyK/nqVpN3spR5YyvkvPqz1x3BR1bwIxsWmU/MGwLoCrPNLbkG2ASAKfvmJpOduEApBPh2w==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    execa "^4.0.0"
+    throat "^5.0.0"
+
+jest-cli@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.5.3.tgz#f936b98f247b76b7bc89c7af50af82c88e356a80"
+  integrity sha512-HkbSvtugpSXBf2660v9FrNVUgxvPkssN8CRGj9gPM8PLhnaa6zziFiCEKQAkQS4uRzseww45o0TR+l6KeRYV9A==
+  dependencies:
+    "@jest/core" "^26.5.3"
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
+    is-ci "^2.0.0"
+    jest-config "^26.5.3"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    prompts "^2.0.1"
+    yargs "^15.4.1"
+
+jest-config@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.5.3.tgz#baf51c9be078c2c755c8f8a51ec0f06c762c1d3f"
+  integrity sha512-NVhZiIuN0GQM6b6as4CI5FSCyXKxdrx5ACMCcv/7Pf+TeCajJhJc+6dwgdAVPyerUFB9pRBIz3bE7clSrRge/w==
+  dependencies:
+    "@babel/core" "^7.1.0"
+    "@jest/test-sequencer" "^26.5.3"
+    "@jest/types" "^26.5.2"
+    babel-jest "^26.5.2"
+    chalk "^4.0.0"
+    deepmerge "^4.2.2"
+    glob "^7.1.1"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^26.5.2"
+    jest-environment-node "^26.5.2"
+    jest-get-type "^26.3.0"
+    jest-jasmine2 "^26.5.3"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.5.2"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    micromatch "^4.0.2"
+    pretty-format "^26.5.2"
+
+jest-diff@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.5.2.tgz#8e26cb32dc598e8b8a1b9deff55316f8313c8053"
+  integrity sha512-HCSWDUGwsov5oTlGzrRM+UPJI/Dpqi9jzeV0fdRNi3Ch5bnoXhnyJMmVg2juv9081zLIy3HGPI5mcuGgXM2xRA==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.5.0"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.5.2"
+
+jest-docblock@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
+  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.5.2.tgz#35e68d6906a7f826d3ca5803cfe91d17a5a34c31"
+  integrity sha512-w7D9FNe0m2D3yZ0Drj9CLkyF/mGhmBSULMQTypzAKR746xXnjUrK8GUJdlLTWUF6dd0ks3MtvGP7/xNFr9Aphg==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-util "^26.5.2"
+    pretty-format "^26.5.2"
+
+jest-environment-jsdom@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.5.2.tgz#5feab05b828fd3e4b96bee5e0493464ddd2bb4bc"
+  integrity sha512-fWZPx0bluJaTQ36+PmRpvUtUlUFlGGBNyGX1SN3dLUHHMcQ4WseNEzcGGKOw4U5towXgxI4qDoI3vwR18H0RTw==
+  dependencies:
+    "@jest/environment" "^26.5.2"
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    jest-mock "^26.5.2"
+    jest-util "^26.5.2"
+    jsdom "^16.4.0"
+
+jest-environment-node@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.5.2.tgz#275a0f01b5e47447056f1541a15ed4da14acca03"
+  integrity sha512-YHjnDsf/GKFCYMGF1V+6HF7jhY1fcLfLNBDjhAOvFGvt6d8vXvNdJGVM7uTZ2VO/TuIyEFhPGaXMX5j3h7fsrA==
+  dependencies:
+    "@jest/environment" "^26.5.2"
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    jest-mock "^26.5.2"
+    jest-util "^26.5.2"
+
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+
+jest-haste-map@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.5.2.tgz#a15008abfc502c18aa56e4919ed8c96304ceb23d"
+  integrity sha512-lJIAVJN3gtO3k4xy+7i2Xjtwh8CfPcH08WYjZpe9xzveDaqGw9fVNCpkYu6M525wKFVkLmyi7ku+DxCAP1lyMA==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
+    fb-watchman "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^26.0.0"
+    jest-serializer "^26.5.0"
+    jest-util "^26.5.2"
+    jest-worker "^26.5.0"
+    micromatch "^4.0.2"
+    sane "^4.0.3"
+    walker "^1.0.7"
+  optionalDependencies:
+    fsevents "^2.1.2"
+
+jest-jasmine2@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.5.3.tgz#baad2114ce32d16aff25aeb877d18bb4e332dc4c"
+  integrity sha512-nFlZOpnGlNc7y/+UkkeHnvbOM+rLz4wB1AimgI9QhtnqSZte0wYjbAm8hf7TCwXlXgDwZxAXo6z0a2Wzn9FoOg==
+  dependencies:
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^26.5.2"
+    "@jest/source-map" "^26.5.0"
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    expect "^26.5.3"
+    is-generator-fn "^2.0.0"
+    jest-each "^26.5.2"
+    jest-matcher-utils "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-runtime "^26.5.3"
+    jest-snapshot "^26.5.3"
+    jest-util "^26.5.2"
+    pretty-format "^26.5.2"
+    throat "^5.0.0"
+
+jest-leak-detector@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.5.2.tgz#83fcf9a4a6ef157549552cb4f32ca1d6221eea69"
+  integrity sha512-h7ia3dLzBFItmYERaLPEtEKxy3YlcbcRSjj0XRNJgBEyODuu+3DM2o62kvIFvs3PsaYoIIv+e+nLRI61Dj1CNw==
+  dependencies:
+    jest-get-type "^26.3.0"
+    pretty-format "^26.5.2"
+
+jest-matcher-utils@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.5.2.tgz#6aa2c76ce8b9c33e66f8856ff3a52bab59e6c85a"
+  integrity sha512-W9GO9KBIC4gIArsNqDUKsLnhivaqf8MSs6ujO/JDcPIQrmY+aasewweXVET8KdrJ6ADQaUne5UzysvF/RR7JYA==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^26.5.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.5.2"
+
+jest-message-util@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.5.2.tgz#6c4c4c46dcfbabb47cd1ba2f6351559729bc11bb"
+  integrity sha512-Ocp9UYZ5Jl15C5PNsoDiGEk14A4NG0zZKknpWdZGoMzJuGAkVt10e97tnEVMYpk7LnQHZOfuK2j/izLBMcuCZw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@jest/types" "^26.5.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    slash "^3.0.0"
+    stack-utils "^2.0.2"
+
+jest-mock@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.5.2.tgz#c9302e8ef807f2bfc749ee52e65ad11166a1b6a1"
+  integrity sha512-9SiU4b5PtO51v0MtJwVRqeGEroH66Bnwtq4ARdNP7jNXbpT7+ByeWNAk4NeT/uHfNSVDXEXgQo1XRuwEqS6Rdw==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@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@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
+  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
+
+jest-resolve-dependencies@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.5.3.tgz#11483f91e534bdcd257ab21e8622799e59701aba"
+  integrity sha512-+KMDeke/BFK+mIQ2IYSyBz010h7zQaVt4Xie6cLqUGChorx66vVeQVv4ErNoMwInnyYHi1Ud73tDS01UbXbfLQ==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-snapshot "^26.5.3"
+
+jest-resolve@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.5.2.tgz#0d719144f61944a428657b755a0e5c6af4fc8602"
+  integrity sha512-XsPxojXGRA0CoDD7Vis59ucz2p3cQFU5C+19tz3tLEAlhYKkK77IL0cjYjikY9wXnOaBeEdm1rOgSJjbZWpcZg==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^26.5.2"
+    read-pkg-up "^7.0.1"
+    resolve "^1.17.0"
+    slash "^3.0.0"
+
+jest-runner@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.5.3.tgz#800787459ea59c68e7505952933e33981dc3db38"
+  integrity sha512-qproP0Pq7IIule+263W57k2+8kWCszVJTC9TJWGUz0xJBr+gNiniGXlG8rotd0XxwonD5UiJloYoSO5vbUr5FQ==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/environment" "^26.5.2"
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.7.1"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-config "^26.5.3"
+    jest-docblock "^26.0.0"
+    jest-haste-map "^26.5.2"
+    jest-leak-detector "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-resolve "^26.5.2"
+    jest-runtime "^26.5.3"
+    jest-util "^26.5.2"
+    jest-worker "^26.5.0"
+    source-map-support "^0.5.6"
+    throat "^5.0.0"
+
+jest-runtime@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.5.3.tgz#5882ae91fd88304310f069549e6bf82f3f198bea"
+  integrity sha512-IDjalmn2s/Tc4GvUwhPHZ0iaXCdMRq5p6taW9P8RpU+FpG01O3+H8z+p3rDCQ9mbyyyviDgxy/LHPLzrIOKBkQ==
+  dependencies:
+    "@jest/console" "^26.5.2"
+    "@jest/environment" "^26.5.2"
+    "@jest/fake-timers" "^26.5.2"
+    "@jest/globals" "^26.5.3"
+    "@jest/source-map" "^26.5.0"
+    "@jest/test-result" "^26.5.2"
+    "@jest/transform" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
+    exit "^0.1.2"
+    glob "^7.1.3"
+    graceful-fs "^4.2.4"
+    jest-config "^26.5.3"
+    jest-haste-map "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-mock "^26.5.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.5.2"
+    jest-snapshot "^26.5.3"
+    jest-util "^26.5.2"
+    jest-validate "^26.5.3"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.4.1"
+
+jest-serializer@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.5.0.tgz#f5425cc4c5f6b4b355f854b5f0f23ec6b962bc13"
+  integrity sha512-+h3Gf5CDRlSLdgTv7y0vPIAoLgX/SI7T4v6hy+TEXMgYbv+ztzbg5PSN6mUXAT/hXYHvZRWm+MaObVfqkhCGxA==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
+
+jest-snapshot@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.5.3.tgz#f6b4b4b845f85d4b0dadd7cf119c55d0c1688601"
+  integrity sha512-ZgAk0Wm0JJ75WS4lGaeRfa0zIgpL0KD595+XmtwlIEMe8j4FaYHyZhP1LNOO+8fXq7HJ3hll54+sFV9X4+CGVw==
+  dependencies:
+    "@babel/types" "^7.0.0"
+    "@jest/types" "^26.5.2"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.5.3"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.5.2"
+    jest-get-type "^26.3.0"
+    jest-haste-map "^26.5.2"
+    jest-matcher-utils "^26.5.2"
+    jest-message-util "^26.5.2"
+    jest-resolve "^26.5.2"
+    natural-compare "^1.4.0"
+    pretty-format "^26.5.2"
+    semver "^7.3.2"
+
+jest-util@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.5.2.tgz#8403f75677902cc52a1b2140f568e91f8ed4f4d7"
+  integrity sha512-WTL675bK+GSSAYgS8z9FWdCT2nccO1yTIplNLPlP0OD8tUk/H5IrWKMMRudIQQ0qp8bb4k+1Qa8CxGKq9qnYdg==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    is-ci "^2.0.0"
+    micromatch "^4.0.2"
+
+jest-validate@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.5.3.tgz#eefd5a5c87059550548c5ad8d6589746c66929e3"
+  integrity sha512-LX07qKeAtY+lsU0o3IvfDdN5KH9OulEGOMN1sFo6PnEf5/qjS1LZIwNk9blcBeW94pQUI9dLN9FlDYDWI5tyaA==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    camelcase "^6.0.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    leven "^3.1.0"
+    pretty-format "^26.5.2"
+
+jest-watcher@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.5.2.tgz#2957f4461007e0769d74b537379ecf6b7c696916"
+  integrity sha512-i3m1NtWzF+FXfJ3ljLBB/WQEp4uaNhX7QcQUWMokcifFTUQBDFyUMEwk0JkJ1kopHbx7Een3KX0Q7+9koGM/Pw==
+  dependencies:
+    "@jest/test-result" "^26.5.2"
+    "@jest/types" "^26.5.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^26.5.2"
+    string-length "^4.0.1"
+
+jest-worker@^26.5.0:
+  version "26.5.0"
+  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.5.0.tgz#87deee86dbbc5f98d9919e0dadf2c40e3152fa30"
+  integrity sha512-kTw66Dn4ZX7WpjZ7T/SUDgRhapFRKWmisVAF0Rv4Fu8SLFD7eLbqpLvbxVqYhSgaWa7I+bW7pHnbyfNsH6stug==
+  dependencies:
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
+
+jest@^26.5.3:
+  version "26.5.3"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-26.5.3.tgz#5e7a322d16f558dc565ca97639e85993ef5affe6"
+  integrity sha512-uJi3FuVSLmkZrWvaDyaVTZGLL8WcfynbRnFXyAHuEtYiSZ+ijDDIMOw1ytmftK+y/+OdAtsG9QrtbF7WIBmOyA==
+  dependencies:
+    "@jest/core" "^26.5.3"
+    import-local "^3.0.2"
+    jest-cli "^26.5.3"
+
+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.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.14.0.tgz#a7a34170f26a21bb162424d8adacb4113a69e482"
+  integrity sha512-/4IbIeHcD9VMHFqDR/gQ7EdZdLimOvW2DdcxFjdyyZ9NsbS+ccrXqVWDtab/lRl5AlUqmpBx8EhPaWR+OtY17A==
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
+jsbn@~0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
+
+jsdom@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.4.0.tgz#36005bde2d136f73eee1a830c6d45e55408edddb"
+  integrity sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==
+  dependencies:
+    abab "^2.0.3"
+    acorn "^7.1.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.2.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.0"
+    domexception "^2.0.1"
+    escodegen "^1.14.1"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    saxes "^5.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^3.0.1"
+    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.0.0"
+    ws "^7.2.3"
+    xml-name-validator "^3.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==
+
+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-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@^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"
+
+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"
+
+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==
+
+leven@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
+  integrity sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==
+
+levn@~0.3.0:
+  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"
+
+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=
+
+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.sortby@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
+  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
+
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+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.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"
+
+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@^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"
+
+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-types@^2.1.12, mime-types@~2.1.19:
+  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"
+
+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@^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==
+
+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"
+
+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==
+
+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=
+
+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-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-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@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.0.tgz#a7eee2d51da6d0f7ff5094bc7108c911240c1620"
+  integrity sha512-46z7DUmcjoYdaWyXouuFNNfUo6eFa94t23c53c+lG/9Cvauk4a98rAUp9672X5dxGdQmLpPzTxzu8f/OeEPaFA==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^2.2.0"
+    semver "^7.3.2"
+    shellwords "^0.1.1"
+    uuid "^8.3.0"
+    which "^2.0.2"
+
+normalize-package-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    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:
+  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@^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:
+  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"
+
+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==
+
+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-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.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-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.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"
+
+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"
+
+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.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.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"
+
+p-each-series@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
+  integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
+
+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@^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@^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.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"
+
+parse5@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
+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-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@^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-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==
+
+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.0.5:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
+  integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
+
+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"
+
+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=
+
+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=
+
+pretty-format@^26.5.2:
+  version "26.5.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.5.2.tgz#5d896acfdaa09210683d34b6dc0e6e21423cd3e1"
+  integrity sha512-VizyV669eqESlkOikKJI8Ryxl/kPpbdLwNdPs2GrbQs18MpySB5S0Yo0N7zkg2xTRiFq4CFw8ct5Vg4a0xP0og==
+  dependencies:
+    "@jest/types" "^26.5.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^16.12.0"
+
+prompts@^2.0.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
+  integrity sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.4"
+
+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==
+
+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"
+
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+qs@~6.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==
+
+react-is@^16.12.0:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
+  dependencies:
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
+
+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"
+
+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=
+
+request-promise-core@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
+  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
+  dependencies:
+    lodash "^4.17.19"
+
+request-promise-native@^1.0.8:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
+  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
+  dependencies:
+    request-promise-core "1.1.4"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
+
+request@^2.88.2:
+  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-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@^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.10.0, resolve@^1.17.0, resolve@^1.3.2:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
+  integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
+  dependencies:
+    path-parse "^1.0.6"
+
+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@^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"
+
+rsvp@^4.8.4:
+  version "4.8.5"
+  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
+
+safe-buffer@^5.0.1, safe-buffer@^5.1.2:
+  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.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-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.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@^4.0.3:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
+  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
+  dependencies:
+    "@cnakazawa/watch" "^1.0.3"
+    anymatch "^2.0.0"
+    capture-exit "^2.0.0"
+    exec-sh "^0.3.2"
+    execa "^1.0.0"
+    fb-watchman "^2.0.0"
+    micromatch "^3.1.4"
+    minimist "^1.1.1"
+    walker "~1.0.5"
+
+saxes@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
+  dependencies:
+    xmlchars "^2.2.0"
+
+"semver@2 || 3 || 4 || 5", semver@^5.4.1, semver@^5.5.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
+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.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
+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"
+
+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==
+
+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==
+
+sisteransi@^1.0.4:
+  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==
+
+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-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.6:
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  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.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==
+
+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==
+
+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.6"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz#c80757383c28abf7296744998cbc106ae8b854ce"
+  integrity sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==
+
+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"
+
+stack-utils@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.2.tgz#5cf48b4557becb4638d0bc4f21d23f5d19586593"
+  integrity sha512-0H7QK2ECz3fyZMzQ8rH0j2ykpfbnd20BFtfg/SqVC2+sCTtcw0aDTGB7dk+de4U4uUeuz6nOtJcrkFFLG1B0Rg==
+  dependencies:
+    escape-string-regexp "^2.0.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"
+
+stealthy-require@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
+
+string-length@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
+  integrity sha512-PKyXUd0LK0ePjSOnWn34V2uD6acUWev9uy0Ft05k0E8xRW+SKcA0F7eMr7h5xlzfn+4O3N+55rduYyet3Jk+jw==
+  dependencies:
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
+
+string-width@^4.1.0, string-width@^4.2.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.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:
+  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"
+
+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-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==
+
+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-hyperlinks@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
+  integrity sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+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==
+
+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"
+
+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"
+
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
+
+tmpl@1.0.x:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
+  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
+
+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-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"
+
+tough-cookie@^2.3.3, 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@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
+  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
+  dependencies:
+    ip-regex "^2.1.0"
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+tr46@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
+  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+  dependencies:
+    punycode "^2.1.1"
+
+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-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.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
+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==
+
+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"
+
+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"
+
+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"
+
+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"
+
+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=
+
+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==
+
+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==
+
+uuid@^8.3.0:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
+  integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
+
+v8-to-istanbul@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-6.0.1.tgz#7ef0e32faa10f841fe4c1b0f8de96ed067c0be1e"
+  integrity sha512-PzM1WlqquhBvsV+Gco6WSFeg1AGdD53ccMRkFeyHRE/KRZaVacPOmQYP3EeVgDBtKD2BJ8kgynBQ5OtKiHCH+w==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
+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"
+
+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"
+
+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, 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"
+
+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==
+
+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:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.4.0.tgz#50fb9615b05469591d2b2bd6dfaed2942ed72837"
+  integrity sha512-vwTUFf6V4zhcPkWp/4CQPr1TW9Ml6SF4lVyaIMBdJw5i6qUUJ1QWM4Z6YYVkfka0OUIzVo/0aNtGVGk256IKWw==
+  dependencies:
+    lodash.sortby "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^6.1.0"
+
+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.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"
+
+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==
+
+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"
+
+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"
+
+ws@^7.2.3:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
+  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+
+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@^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==
+
+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@^15.4.1:
+  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"
diff --git a/scripts/prettier/index.js b/scripts/prettier/index.js
index 92c741ad6a0b..4853557640af 100644
--- a/scripts/prettier/index.js
+++ b/scripts/prettier/index.js
@@ -25,7 +25,7 @@ let didWarn = false;
 let didError = false;
 
 const files = glob
-  .sync('**/*.js', {ignore: '**/node_modules/**'})
+  .sync('**/*.js', {ignore: ['**/node_modules/**', '**/cjs/**']})
   .filter(f => !onlyChanged || changedFiles.has(f));
 
 if (!files.length) {

From 4eb589169c83ba9d5cf4ecb2cf07c1f1576bba32 Mon Sep 17 00:00:00 2001
From: Saikat Guha <sktguha@gmail.com>
Date: Wed, 14 Oct 2020 23:29:05 +0530
Subject: [PATCH 0013/1603] DevTools: Handle restricted browser pages properly
 like new tab page, extensions page etc(only chrome and edge for now) (#20023)

---
 .../icons/128-restricted.png                  | Bin 0 -> 4792 bytes
 .../icons/16-restricted.png                   | Bin 0 -> 494 bytes
 .../icons/32-restricted.png                   | Bin 0 -> 1092 bytes
 .../icons/48-restricted.png                   | Bin 0 -> 1564 bytes
 .../icons/restricted.svg                      |   1 +
 .../popups/deadcode.html                      |   6 +--
 .../popups/development.html                   |   6 +--
 .../popups/disabled.html                      |   6 +--
 .../popups/outdated.html                      |   6 +--
 .../popups/production.html                    |   6 +--
 .../popups/restricted.html                    |  14 ++++++
 .../popups/shared.css                         |   7 +++
 .../src/background.js                         |  42 ++++++++++++++----
 13 files changed, 61 insertions(+), 33 deletions(-)
 create mode 100644 packages/react-devtools-extensions/icons/128-restricted.png
 create mode 100644 packages/react-devtools-extensions/icons/16-restricted.png
 create mode 100644 packages/react-devtools-extensions/icons/32-restricted.png
 create mode 100644 packages/react-devtools-extensions/icons/48-restricted.png
 create mode 100644 packages/react-devtools-extensions/icons/restricted.svg
 create mode 100644 packages/react-devtools-extensions/popups/restricted.html
 create mode 100644 packages/react-devtools-extensions/popups/shared.css

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 0000000000000000000000000000000000000000..67b1c9a31a6dfe22567ce26e385b0be06022e3c2
GIT binary patch
literal 4792
zcmV;p5=ZTcP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU^T1iAfRCwC#on34eRT{_pK`90cRf%Gk
zR*fIo+TcfG6j0;Umc|&pSQalxG=XA_8na-$@CL=0ctMaGBt!~{CSJf26Af`IUKyoj
zjftY$C4NN<T||Plg|cl$WY3Ru%s73XnKLtI-g)WFlS~4A=biV=Isfx~KhLSH38y(z
zSEIS=Yf8G9=$yGG%{4J~iBzlnods_$7kx&7VPpyrkpP%)uDRu$%}6?9u2KIVf;+sq
zT>KeLv!~X4LIOa!^NT?Z=Bo3=L7h+Lmy2H<nme`TzXPDToRh*)vj>1VrM6#4V$J7x
z04S-LbO8X3<vbLY8tY2-Uu-c@SI$APsRTg5X;w84?(MhV?zsH&%jfa$;o;#^4?XnI
zz{N1$wzjs8*|TTQ|MABk2Tq?pJ$moG_x4xon280nRMUXI`s%Bdt*xyq=ggV2RQmjv
zUw#=FA0Hq1{`>FWyY05ydh;CX+O=!vJ^SplT`esw%P+a)l4W&ub@Q})M@L8ZeDTE>
zd#Vi#RRe$zKm2g%k|j&F%$hZ;)%H8T{r20bpMU;&&+gs3d!Bsq$)lAT>#MK6+PZ4h
zs`c~d&tDn$yFdN(Q_q403!X0l5ZLuM-gx7dG|ym%z4_*wuVe{?Gz%Z(VoyEw)QTND
zcAP3a09-77aECqj+;f{<PA;te<(FT6=87w>=yvr?0NdQ$ysppyU`IXv_~ZM-WM>jW
zG#Gii&V`Qf*=L`1End8Mi|rUECMGV(c<wifU`N=!Uw{4ex|?pgX-{FzK-j4^u}tKl
zLx<MX*4F;XyB>S&vG$KX`e+5a{MTQ9RargHy!F;wcaDvX?PT{R-SvE*=Y%aj<6u1R
zyz@>cV>HU(3a-Y+#!kk2{P^)#0HpNY>#x6lW76?m^c;ZQ|HKnd989w_qAUiF8}#+{
zt&XF8W6s@w|NT3|6jA{C<(FUf*l-yZdF$4#dnJx=<j9fdues)$p27j(<jIp8C7GIp
zEyAWdIyznmTQGLw)mLA=Ijv5@j{okv?_P;JMnJHA`}ThYxd{p(+@f$Iz-ZFTgMT}7
z=1gxAnaD0|XlPi%B5U_7T)1$3lt>sE8QBuH_^^7zwK|iG5vBCoZ@-;p{=pUChJ^wE
zELPgBufP8K3u&Iq4o4QVtEA88&Yjx@D-KRLpco$?->aE-h!J!T?DsU*1;CMXmj@nr
zV0obc(B9tOA=$<*Y<S$o*w~m^(&y|rEDu2Fm(Q9Wfvh+8-{s1KckI})9)TNn6bb-M
zO--$WjCN)Yu}iVB(I+%3!R)%dcpo+8%wzdz^e%l0Mqil*B%=f5CIWI%0%5no9S4ie
z!cWd3FI%>3S6p91mNxqN^XLCNZ6S;aSvWs{pWb-mjZ7kafNI~qeJeCuT$1-$J7_#-
zQ8iF50FYR2mVR;c0_3=+9Qqd@u;k&L^K_Cz03gVYZFgr{y`ZP3XHD2Wm}!;BIWXq#
zwBPXZ9ttS}qIRYWLfh}|?%o-853bot?8LKY&z`EO5-LneSeUjSv<~uO$Atwzm@nT2
z;o*x~d_M@fy1KSx8Kg0$<)T6ZAS{ySntu4<hi5bopBAYDEO3mhKp@%upMU=OP>}#o
zk(VW~LkvLrj3^wgW6eYa1e-Q(+E}SMsbor9Rq6n)<u1=dsgpj#P3(nW(fUaqk?w<Y
z3=R%<yMEVMvt|`r1WZm&9?jAWf^`$mm%M*i9Klp9qKR+>=~-=UZ5s(UI|e{&ULvt7
z05Cp2K1~GNaKjDDTs?n_At~C(L=z~Iz5_?l0!XBUxeD1zoUT$Lv1$N7!9-S?F)W*~
zZ}9KP`FG!acTJeb5zZj_B;X`bJ_K7bKx?((h%*`hRLcke=y0*SVA;}Vwq8Csgr*dd
z#gul8S6y{ghYd%p6y;JHMu6u0`Sa5z*oEAeK4VuKu5%QV&=R1%lIcha8{ynE*~W&;
zO!Iks^UXJXg#v)LD8WT1bZZk5=03mPz@(yCYdL}Z&OP_sv)9GA$r3g@w%=pj>|O(y
zqX3MEW>ip10(xFP04TSlP`q=&T^3B-gry@hVVhBlTrGt70Nez8%yraQ7Xu!sd7lR#
zd~kp8{`&g*_QG)hqj3)y00d3J<%UgP*wO41*99XLQL4<Cacy%Mk%1XW0*IOeU^qx$
zp5x680LW4%C&(TbE?hVx12I~>!<c}%Mg}V`0&uEad+oK$jj6V@lI+}L&6bXuMU@^K
zif0}r?-c<6vhVJ@?_PP?WtXk21Y5_e_tHx*?QxZ5goUwf+qV4@C|Epmjk*Gi2Zl=Z
z637$)1Y?X6*PX`1!+U46Z8~lI$KP>7QX(OWOD?_i(lxH%1<OOSBv`QR+qZWT%)wiD
z%PqGo!aBjRg>NJ6yOT!l63h~{xV+46`Lj{vHlI6pZuERYGK;(0O!!}Umh>BZCVh|J
z)V|~5I(hQs4(WHN6gl;Kh6Da3&3y1(<}{0UbLI(zP2y;w{*4f<EvuKjZYW0Vat-x#
z5|REsG&Hn1%bh~s0V!~Uf)^DqlIDZhgH1jp-(^mjTjtnho`Mq*0IMhTYP0A;g-0q9
zWs<4&lfKUcNHKoQEQ&ZPp~T`0lGrtMgAxFv-VyQA-rn9ty`+sU!5re+c9p%Hn0*+T
zcNgr>hK-Gljs4S1-fD?GO84`3NxW#RRJuQ_i+7R60GpQXKYRA<k>I_E6X{;&2oY#A
zr_4QTkn(+!ebMatzemY6Pj*EO(sqKhiP0uAtBd#1-aYuPaR8n~m*R72W7%GbM1ZD&
z`&rb96DN8$Y}l~FMkY%vGUy_e+^F7t6n(^z{hqe&|65#>OA|#wD@2;BFcBx|RxiHz
z;@T^(ys|q?#M<^hNF@S5rN;jJY%s32s_hcEjCYSFYW(-u>?n!b_{9_!hV8huXZfEY
z?cgLF%Nu``^^~ay2$T0|<&iX*o_VF2eUp=u|F(HH-;ZO4F_AVPhV_P-g@DtwzQT8T
zZ-*eTyD>~L(UhM!*Wlpb22G}Fz_Zz{+9E^|lWYTmFwP`>W((RVZV<K}wp`H~02<O0
z{8;EqNzd2VY?SjQYTULUNGiUxaRYQ$%BThcxScIGuCq}>NQ#s`b6G}>5{CjM1ZG6L
zc-O97>ynP!mT==nWf75PCMA<<<HoJ)$|pe%qx9P-i;q6~=nGci>!=&hKqc*y?isGj
zs6YMmQ>%7qymV9{g*NWEg!Ucfd80+G?YLcgDz!vb5@T&LnIi$PV8MdFNnWok8XjYc
z+2qLEOt>`eBm{`)2p)D1U}Qr?J&Oom7T(E^KmJ%;i-#Y6xH}a9v~FHfqa#;D55Ba!
zALP4?=Nm2%S-eV|Ak44NF3l>u%X1Yj(2)uNQa3MX-@bkCWd(pun>O`^O{C544?20$
zl1&pQSUb)y?Q^62W!eq&^y$<6QjjVY0HkhS9?Q$>MVLs=07$y~^CUc<+Gkm}ok`ks
zqAD9i81_9c=}yd(!gK{MmA%@iE`qHb)pUcb288_9;ta5~YMn^vy6di6uYGp=?YDPl
z`P*bv2mfZ%jVu%ZhYueXlPK@J^UkiUUL;C$z2lBMBCC5`D_bKYBazP|Cn8Mov^C3;
zZW<}|Oln3I3jjDdB(u!MHcm<;j)r{>7htlZo+CMxQkYr2X?A}cvn&Z|PM-q@4(v$<
z0L|pXHl_sI^^35uHqINH$+mSWMG<T?s;D$-_xr)^dgEx-&^F_?0swXM5*Oe{iFLbt
z84iE2R1#aGxBy}xEf>HX-M@c-sKbi|wE?89Qz`C-(W;@N#vRKFIC$`&+Cs$@2#{lv
z-Ku%mY>r!5XDCe%LYtCuT+Y(&*N(NZ1-Z@QYiApf91^GDrB&o9EE$2wT-uan?fE=c
zOUJeeL-T#xyhVRB%_hpJ<tTdT>0u%6nv6ohndJl2MC1gd%}tZSr{2qiC4<^drfsbP
zV6jcu(B{JfrWWE(n#0KahGjI_<}lQxNeYe1SY-m^q*c{~#MJ$O(l`WZTyb^}JDYc4
zoc@dF$H~;u#vCk8k>-m<j59yXXA~Dpm=2aKE7&H>CJqoJ7B5YbO%7hAF54VMEuGB<
zY&Hv@HX|#MD;U2vXY+)GZc*r{rQ>jjD2-h@Kx%Y!bXve^U|>MBceP5PtcdrK6jl_@
zpwC|maZ@a-Srt6ru=D-QUsyng=W@_S(rn;Vu>iD8Dq*7H;Jg6Zs$q?Xu^57GWG&<@
zIWedtlH8ko-?slxT4I5;29#P{UIKFv^i&)%Ka_tlUr|M+-U()Dy`D}=!&t=5&d!at
zO`k!ovC;b}52O7{Fuy)5Z$9k6$!*)VEy+4ssGWBhR+X&PG+?e#McmZX)D`DwT5Nn*
z=NdRI4<}HAuRd+}@2Dfz^QsTDDG}GcYxI|cX_8cUw@*I#WV7oyM<)FN(gFclN`gbM
z$&#N9YYiK+Jc<>$Y;*i8<9p<hM>^;eV0QP-jg5^RNf)0Sh%B2$WZEDCc1-}pMQ0Gi
z0xeaEaCylO5*M)9jY&x3I(}A8zJiP9R=lebHUD_)t+z5yfT>uIAg?!29C??N;2^`p
z!+%h`Y@0C}ouoCG3B@j!0xmA8(yd`C4gd)ZVFji|A;60DP{~El9RQx3eC@T@4i{;$
z+2z%CdU$Sq0*!22Chdma-rjX&Ba@1qw#ic7i|us`9U2<yKXBl{1+y(^!sh*cxp4qV
zsnX0pf6G|paeaOL{Hza}imRM@eS^_8=>4lHZ<0Bf)v>u%%>ksY+3XbQ-YKUCSFdDp
zddiy?AD38f)PiaN^JI3|B8L$UFr)kY0RU}nZE%5N0YEx8$77Rm$hUL)2L}h|X&Exa
zE^NJLQ`~8(1SC!$O=Fr#J(3G|eEbvuT7#3D*5<_-Bc*}GISUYuqS^Z#E|qqSIJSa+
z%d_4g7XV1P{jQFWB@Il9zM*VIC9>kU;;4D)GxQS|eS9TZpQj>NHI+d&IqWt>X&Gk&
zNuS}&(T;ub&KA~A8gp3<9Rz5eZSivffOJBb%LA2>^)#=LJ|mJR<tM-$q@C!=eaDu=
zkPTNX6bEp9ZVrhVTCM`tf<G?-uAsSk`}+D;yY|Ps;&vA;02&$^D#G$$+gg2`cS<<i
zK#K1}aFHzR^THn=Z_~KI6+Qj*)2p?!00DvKJ0J|3bxC)WSS*wX$jTFjQmCB;s3~8V
zlELF;U6NLHU1$JgNq|5*C0x?@F(tDc4@b<E0H`ow8AO4A#fMvDdFBAr)YLS;1VDhY
zY&ubGBpn}HC;&)ikjvxaCBn`|=?inZ;0M^cb?e?dz$hK4J!1hNnL$MJvidztJ+gUi
zJZ^x%GZ8Zs0XGYZ;b>t1AZfvd17tGcG*Hk?J!HOS9RLEGP9#Z)EaBka@;W~_7XV0F
zu-O$(U7`5)skG6;!=A#YDTaUm;JB_h(wbQ2)&4FQ0B8|0S51^)-^g+;>C~_7d)9$g
z=SXOn`bJl+T?}VQ)Xi(gSpkxFZq=$)>(f3LmJj>ZLaccBf~KBV=ct9G$qu4sFY0JG
z8)|83>9$ddXFLFoA3r|L&B~5Vs(isc*r~95P1&P>0}r2M=kqtRbEWp{o=D)hxUsRZ
zok=+r;>5NPcE$rh>o;thx#O4hMDxhD)$;g|@rMo_T4Pg24L}G2X$~WzhWu9C0~}E(
zrA#A4kE=q@B$QiLFvO14>g=P6CEyhI-FIJiRHYHmN|MLN^8sU2whkQQgAYFF(H7A=
z^-D`Lb9v~-MF#+_Y}&6Joj7r#*UO{BSAe-_d%|X#qtyItTU)%~PWBGD_Wl-C`W@%^
zxETomNUOI`L#}J+<MuzWr9A5ass;dIq987@qd0IPE0&5Jrzxb1!zl7*{kbcFej;fj
zO;=AAo(YAWW;v-mo8REKY>u|k6w+#0{Hoyqej9$#qD9ZxX2}AYW5<rYm)B$xU|PI*
z@k-m0cN9iWJgKHbFRBUvepX9ysK4QY=ePHYEsZVSmv!7eE*L2BGG=0{Kjn?_4i66x
zy#N0D{ndEdNmT-%q=M-HC6xdusRTetc>&;DISqxSa{yqnoQJ~FBmkHw=b^AP;Q^o&
z0|jLN9sr<`ay|-27uLMqhX%kfyPTIo(3z?0cL3B(DTDmKp`4!?P5(33?==YZL8YMN
z1T%i;|Dgb-R=Kg!T+ISNO1gLzz7fgfuZ{TPoT;m^1j9wS=#x`iT{ZRpFTen&T)1>{
Sp@}{K0000<MNUMnLSTaTkuNs@

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..2f0317ea3fd6b7933988fb03624d7fa0d1981d36
GIT binary patch
literal 494
zcmV<K0TKR*P)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzkV!;ARCwB?Q$1_KP!x@U5?oRUbSddx
zaB(Yk&+Jg?n4ztcOMij?pkt<NZlzPE{(xv_6Pm@%T97~x6^WQH`_7{`JkyV%y>Q9n
z-goZ3=iI!SBuOXCkEFj@Dp$d->$WD7$#u8eRVij!*4cDAy+f{2fMZX|*@dg!Zuc5R
zk)5XL8!L3rfc-qrSM&M&0bj>)3=wls0G9y5nRUHD5jdOXyqYJMtE3b~;iDUd(JG2!
z4e#}Omz0m=cwNQtO6Y<P)OF8nyWPIPai%!v(L^N$j73QTf;-~S1%)@8%`-F*_2C7;
z6$z@kTrMB!!v51B9Ae0kKENDk&}=r3MP6YT&giUZnkwdWU00blt5SoXD4;VO6tG@&
zr3pdpV2z@PB%El7A&0`>uF<w_z8*HkQ@vjAc%FBgBuS8E*=#r*b`V3Zy23C20RwSv
zqtPgkWtnsLegFNp2T_g#zT&FJ<M9og^g#|A5HU3pf{YbuK=r|35D+aqEYma_i^XEy
kZnp#Re(k@{`9pvK00h~KYD=d<ZU6uP07*qoM6N<$f=$lfl>h($

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..7c750453238885d1cba45da238abc82ae0fcfa06
GIT binary patch
literal 1092
zcmV-K1iSl*P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F80000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#=1D|BRCwCNSG`MHQ526aF)9+3P*g&y
zh)ZY?vlT_hwjyp72gg<yb*PHsAO`<{AP9nx=+dcH1VO0nR8X4YU>({HVg{3dAJt$@
z#3X9$`B{(LT;F@q2<E`ed%5@A^L>8zzC44$pwO_=FdH71k~AWD^z$SK%5RKNa;O|+
zRx)u+O-(&LI5-%O#bPtt+uL3Euf@BvveE$F)6>&=JiEKQOYUNYO>2;{=NA_je=ms=
ziNw##Ya-!Z67CTBNa;7MfuDKL&d!1&pT^K$gdzx9TwHvC{}9G=P=a~#`ZbhdP=v;K
z@8;&_JMiI|wE^%7L!K9vvN4E)%!df<?Cf~-bY!f7qoX6gJlEXZ><@>-9z{{Ea=f;-
z=I-t74at1x=jY+Fva$v}`56t!&(FVANECXf-EJRDCX>HXsnl^}W8<t=!BKQV4>F**
zxY#NFhoaWj))~C}e7?6!OH1vD#N_1U?5!R%o1K)xu%3KVrtp`Smv?P!Y_wEVR5&db
z%d>)l0;kDjx@yIqo}TZ_TUc1wK;C{qM6fR!jfP+to_ad+xDsVAM@L6HY&KgLD+56|
zgvR4>zg!zutMwH;W}X|UqclY#k<SYY3v+69lGX)cn}G;?KH*8qK41-1t<~F%8R!V^
zAn>vbHT+0xLkM61fkJL82;g?Y8l~e6=JCWDc+r-a0}g<PpHRrM!N)Bt8S(!G3-EwJ
zM+OuSV*-?4O2qqMtUM><hlDK#8yK-c3p5yT*i$jAOuUy3Rs%2*UGEG;*%B46U1PpP
zwFqG`JY_G{QoscU9?^U3L!Oaaj+R(2JmlI)s{w4*D?;APhYQk%uwyVU7b<vQ2;^|h
z@M+0&s)rGbfDrizh7sI`Skr1l&OMCdh;mWlsdh4I0@2XWP)kis&436*!XXpFK_ll}
zjrZi_WO-|A>!Zu%TD~(9GEp=JD=RApR##WstE#G;gmk4M;sNCt^F@RN{O;}Tg_@e0
z=7YhYySlpCm(`63p;v1sP7OlMm;hciKB?gDcONhsjitz=Jm1&X*NzCZwYAOH)zwWP
z68%InA9&=`^xnrY<@#8j^Lo9<fk42Guwzh%_%N3ZUg#PC?~96xZh3&?xwf`;93Eoe
z9XDb%FnZ91<nZv&j{>9i>EJ6m71>06ef<nNVS0M{B?jJ6a9HDOJFf8Piv9h4f7aJ>
z?tK~c)XoeMKV;<88%FxEXj!(tzMk0K-JK(k|4=vlpo_)w@bGYdXJ_YEnb+g-_{oU(
z4u>N^M*jxy$jFErGVXmNdQ4KTzfyBWNu(ft{ef!C#pn4y0R{m73@I68j+emz0000<
KMNUMnLSTXgoDP}*

literal 0
HcmV?d00001

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 0000000000000000000000000000000000000000..372b6e00e88a85c08ccfa020e8db75b31b429a5b
GIT binary patch
literal 1564
zcmV+%2IKjOP)<h;3K|Lk000e1NJLTq001xm001xu1^@s6R|5Hm0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU%zDYzuRCwClTFFnFM-(^4Y(iiPlqHSf
z0w@s&xJ5+bSS1G}4yoYY7zv3>X|Jd>e?ZEK3(Fq>>IDf=r&l24$Pz0Ohy##{rBE=7
zFpKTHpX(RBOlH2t#%bM=MtsaS^S-yg-y6vD{4?@t`e_z>a$`hkMrg+JQp|r%)9cBt
z5vTbVnE#4qfhYF{l<)KAklW}+vDcI1!?gf?eSPJ-ySqQ#+}ylLBocpKU0wZgczF0?
zW@e_<DUJ2@^`7(d^T}8&_6{^a3pCRe;+~sH48Khn1~K*f=;-Jp)7j<a<?o5vZPR&D
z#JF32TnVtXwe>T9j5PLget!NLm^wK*nc{WQYJ@cWgFHu8djR2h4}<_Mvf8(p@;rXe
zngFbQFt5IY<|UJ0ir1ypbZ0RyFE3xGX$9w-nF(mriIu=OEW(zt(k?8CeGtSAPmY6_
zgY^3PIy^o;ernp+*w{F+u(0r5JRUzSEG%sGdcEa1)8F6!sJpv6Y&y5NxR`wB^ZD*)
zB@0znR+cBrA2DXPcXf63y}D*4G{(Tdz)nhlKvvVJlQbI)1}CBU+uPeDQ?LZZ#E2t&
z;6OoX3DDWuxs)t@#l;;~`$lMhVK6c`H}`yFV`C8Oe!stm;v;A}M;WbyT{P<!fR=UZ
zC`P5FrBCs^wzf71pKobtncmym`xR>q4Gk}tQFWA+mHE>JME9I-rVQ~LEU>b&^1Qvh
zJ%qrfpbga4*0vTD6qHw0RR!4%ph*tmXf(RSmczT_<Kt<n1*iM_`(d)m4g^It$9V`_
zUtj++D+0ie;R^6=x54Jb_aW@|_VzF`*_{bMg(%S5+Z!atpXiu|c3IP4VsmqIm^8bi
zqeU*%3OB+tltA;nE~fA<5{bN;nwpy6?Bp5?p@Pa1&&7zJQFyQq#fjHY#Ow+WS8LGX
zf{5zOYw{ah(XH^6$5c%vArN7PnE{3b3;|Geom5UR&9oUdFb$@u!&er{`E)@Z)S*iN
zH3nn=bG#SNya!g1npU+a;fAE4e#?Zfi~_JJF;qk;HK>Epl6ln)RF}bISj~H_EGPwL
zPxwp#X<9p9R%1hIPHM~w?@P^FDU2u1vgNe`NP>2LECW|HYr<lvNRxeEwT|64ZPBQy
z(yG7?qo}ATkS>;C<cSnah0(GSqhQ*mQFb9y(_wNU8Nlj0IizcHGO%lO)MiT4FX)5C
z6bCYhIS?gL#Dgw~!2r97j5lUX<J%v<CtXd`6q&V)gHpRzX;fwhd=x>4^O#VE^l@3Z
zq`+#1!M9{br^!J2LM9KgAXt;yU<<Lp5XdeN*+Qz@Fb({Kh9SKCKCEQXj+!f`N=Wr*
zFr%xiR+AOLE(0r?;s$%{(yJ|)Lq-}J8tSR5tLp)1vqF-1J~}#@094lPD=8_t4>W6s
zO3%*DLex)8a}#xEaGEhY&>}bOcLAf(J3s-T=N3-;+<c6>tt7+YaQGKAG<;iuy3o|r
z^th&`Cdifm%>LvSHU*o(EV<tVAUB$ShRbL-0kz3Ou9V_R0M<BPfnbQMk|oL#;kLH6
z$yD>R#GMryAqW6%heDx2-SrA-K1>39Rv7Qpg>Vs@Jd~IBjcE`1Vv3g^@yrc<b93_u
z|BfEn6l-H+WAE(fXDk4;n4h2j&`Im526uIJ^>C&N%J^1-?|Q68MMcFR_A&Dp7Z)Kr
z=D*nA2b^Rc-2cn|nbPNDijSxNx&Vwct^SyS7+{~L#(Wyt2$n!_TU~6ifNn3gT-{D{
zvm!e%iPyQxs#RIVS2|emMXuK+c!LlCS19$e3p0T(tVvjcGk_zQQgE9ah|C1A!~1w=
z1?ce3>bxE9Nec^^f;12ae8e;d2M3|q+1Xc4E}{6ctgEZ*3Bi&MO38jgn>$XiPeyg%
zfAMG5|DpiV9Ogd?0q|cR@f>6xJV)@)9=K<@Od(TWu4ta--!x+%1Q-Bvr`E+MSw)!u
O0000<MNUMnLSTaCAnqan

literal 0
HcmV?d00001

diff --git a/packages/react-devtools-extensions/icons/restricted.svg b/packages/react-devtools-extensions/icons/restricted.svg
new file mode 100644
index 000000000000..73c2bb51cdbb
--- /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/popups/deadcode.html b/packages/react-devtools-extensions/popups/deadcode.html
index 4073f80bde20..5b458981e006 100644
--- a/packages/react-devtools-extensions/popups/deadcode.html
+++ b/packages/react-devtools-extensions/popups/deadcode.html
@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 133px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }
diff --git a/packages/react-devtools-extensions/popups/development.html b/packages/react-devtools-extensions/popups/development.html
index 5d537ed37c67..a0d27ecc6e50 100644
--- a/packages/react-devtools-extensions/popups/development.html
+++ b/packages/react-devtools-extensions/popups/development.html
@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 101px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }
diff --git a/packages/react-devtools-extensions/popups/disabled.html b/packages/react-devtools-extensions/popups/disabled.html
index 2be9e4fb85a5..3e16aa507918 100644
--- a/packages/react-devtools-extensions/popups/disabled.html
+++ b/packages/react-devtools-extensions/popups/disabled.html
@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 410px;
     min-height: 33px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }
diff --git a/packages/react-devtools-extensions/popups/outdated.html b/packages/react-devtools-extensions/popups/outdated.html
index 53484658b046..ebeabc778740 100644
--- a/packages/react-devtools-extensions/popups/outdated.html
+++ b/packages/react-devtools-extensions/popups/outdated.html
@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 117px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }
diff --git a/packages/react-devtools-extensions/popups/production.html b/packages/react-devtools-extensions/popups/production.html
index 7b92841c6c75..44ae17939e26 100644
--- a/packages/react-devtools-extensions/popups/production.html
+++ b/packages/react-devtools-extensions/popups/production.html
@@ -1,15 +1,11 @@
 <script src="shared.js"></script>
+<link rel="stylesheet" href="shared.css" />
 <style>
   html, body {
-    font-size: 14px;
     min-width: 460px;
     min-height: 39px;
   }
 
-  body {
-    margin: 8px;
-  }
-
   hr {
     width: 100%;
   }
diff --git a/packages/react-devtools-extensions/popups/restricted.html b/packages/react-devtools-extensions/popups/restricted.html
new file mode 100644
index 000000000000..77acf08f37bb
--- /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 000000000000..cd3d35d00589
--- /dev/null
+++ b/packages/react-devtools-extensions/popups/shared.css
@@ -0,0 +1,7 @@
+html, body {
+  font-size: 14px;
+}
+
+body {
+  margin: 8px;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 1a8302c2b1df..cfe5e3c7a973 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -78,17 +78,43 @@ function setIconAndPopup(reactBuildType, tabId) {
   });
 }
 
-// Listen to URL changes on the active tab and reset the DevTools icon.
-// This prevents non-disabled icons from sticking in Firefox.
-// Don't listen to this event in Chrome though.
-// It fires more frequently, often after onMessage() has been called.
-if (IS_FIREFOX) {
-  chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+function isRestrictedBrowserPage(url) {
+  return !url || new URL(url).protocol === 'chrome:';
+}
+
+function checkAndHandleRestrictedPageIfSo(tab) {
+  if (tab && isRestrictedBrowserPage(tab.url)) {
+    setIconAndPopup('restricted', tab.id);
+  }
+}
+
+// update popup page of any existing open tabs, if they are restricted browser pages.
+// we can't update for any other types (prod,dev,outdated etc)
+// as the content script needs to be injected at document_start itself for those kinds of detection
+// TODO: Show a different popup page(to reload current page probably) for old tabs, opened before the extension is installed
+if (!IS_FIREFOX) {
+  chrome.tabs.query({}, tabs => tabs.forEach(checkAndHandleRestrictedPageIfSo));
+  chrome.tabs.onCreated.addListener((tabId, changeInfo, tab) =>
+    checkAndHandleRestrictedPageIfSo(tab),
+  );
+}
+
+// Listen to URL changes on the active tab and update the DevTools icon.
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (IS_FIREFOX) {
+    // We don't properly detect protected URLs in Firefox at the moment.
+    // However we can reset the DevTools icon to its loading state when the URL changes.
+    // It will be updated to the correct icon by the onMessage callback below.
     if (tab.active && changeInfo.status === 'loading') {
       setIconAndPopup('disabled', tabId);
     }
-  });
-}
+  } else {
+    // Don't reset the icon to the loading state for Chrome or Edge.
+    // The onUpdated callback fires more frequently for these browsers,
+    // often after onMessage has been called.
+    checkAndHandleRestrictedPageIfSo(tab);
+  }
+});
 
 chrome.runtime.onMessage.addListener((request, sender) => {
   if (sender.tab) {

From 020d3aa4e8df4455274b79b29e2452ae7f430ec0 Mon Sep 17 00:00:00 2001
From: Simen Bekkhus <sbekkhus91@gmail.com>
Date: Wed, 14 Oct 2020 21:45:54 +0200
Subject: [PATCH 0014/1603] chore: downgrade source-map-support for stack "fix"
 (#20026)

* chore: downgrade source-map-support for stack "fix"

* lint?
---
 fixtures/legacy-jsx-runtimes/react-17/react-17.test.js | 8 ++++----
 fixtures/legacy-jsx-runtimes/yarn.lock                 | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js b/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js
index 6e47d4655c2c..a3687536499c 100644
--- a/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js
+++ b/fixtures/legacy-jsx-runtimes/react-17/react-17.test.js
@@ -318,9 +318,9 @@ it('should give context for PropType errors in nested components.', () => {
   }
   expect(() => ReactTestUtils.renderIntoDocument(<ParentComp />)).toErrorDev(
     'Warning: Failed prop type: ' +
-    'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
-    'expected `string`.\n' +
-    '    in fn (at **)\n' + // Jest/Node issue
+      'Invalid prop `color` of type `number` supplied to `MyComp`, ' +
+      'expected `string`.\n' +
+      '    in color (at **)\n' +
       '    in ParentComp (at **)'
   );
 });
@@ -377,7 +377,7 @@ it('should check default prop values', () => {
   ).toErrorDev(
     'Warning: Failed prop type: The prop `prop` is marked as required in ' +
       '`RequiredPropComponent`, but its value is `null`.\n' +
-      '    in construct (at **)' // Jest/Node issue
+      '    in RequiredPropComponent (at **)'
   );
 });
 
diff --git a/fixtures/legacy-jsx-runtimes/yarn.lock b/fixtures/legacy-jsx-runtimes/yarn.lock
index 0311bc8df168..fe5d0c7955c2 100644
--- a/fixtures/legacy-jsx-runtimes/yarn.lock
+++ b/fixtures/legacy-jsx-runtimes/yarn.lock
@@ -3247,9 +3247,9 @@ source-map-resolve@^0.5.0:
     urix "^0.1.0"
 
 source-map-support@^0.5.6:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  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"

From b5eabd543f4a6c9d950f1bb5ec73da5a1c7c5caa Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 14 Oct 2020 20:52:37 +0100
Subject: [PATCH 0015/1603] Update changelog for 16.14, 15.7, 0.14.10 (#20027)

---
 CHANGELOG.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7882adf318b7..fa0dedf6714d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 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
@@ -770,6 +776,12 @@ Starting with 16.1.0, we will no longer be publishing new releases on Bower. You
 - 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
@@ -1221,6 +1233,11 @@ Each of these changes will continue to work as before with a new warning until t
 - 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)
 

From d95c4938df670a8f0a13267bd89173737bb185e4 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 14 Oct 2020 23:38:57 +0100
Subject: [PATCH 0016/1603] [EventSystem] Revise onBeforeBlur propagation
 mechanics (#20020)

---
 packages/react-art/src/ReactARTHostConfig.js  |   2 +-
 .../src/client/ReactDOMHostConfig.js          |  14 +-
 .../src/events/DOMPluginEventSystem.js        |  20 ++-
 .../DOMPluginEventSystem-test.internal.js     | 135 ++++++++++++++++++
 .../src/events/plugins/SimpleEventPlugin.js   |   1 +
 .../src/ReactFabricHostConfig.js              |   2 +-
 .../src/ReactNativeHostConfig.js              |   2 +-
 .../src/ReactFiberWorkLoop.new.js             |   4 +-
 .../src/ReactFiberWorkLoop.old.js             |   4 +-
 .../src/ReactTestHostConfig.js                |   2 +-
 10 files changed, 174 insertions(+), 12 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 459f714b90cf..43a563e90aa2 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -467,7 +467,7 @@ export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
   throw new Error('Not yet implemented');
 }
 
-export function beforeActiveInstanceBlur() {
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 63fdb08a3ae8..8de2f2c5c7ca 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -232,10 +232,13 @@ export function prepareForCommit(containerInfo: Container): Object | null {
   return activeInstance;
 }
 
-export function beforeActiveInstanceBlur(): void {
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object): void {
   if (enableCreateEventHandleAPI) {
     ReactBrowserEventEmitterSetEnabled(true);
-    dispatchBeforeDetachedBlur((selectionInformation: any).focusedElem);
+    dispatchBeforeDetachedBlur(
+      (selectionInformation: any).focusedElem,
+      internalInstanceHandle,
+    );
     ReactBrowserEventEmitterSetEnabled(false);
   }
 }
@@ -499,12 +502,17 @@ function createEvent(type: DOMEventName, bubbles: boolean): Event {
   return event;
 }
 
-function dispatchBeforeDetachedBlur(target: HTMLElement): void {
+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: internal field
+    event._detachedInterceptFiber = internalInstanceHandle;
     target.dispatchEvent(event);
   }
 }
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 74b95dea3d4e..c43d96dcb1c9 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -658,10 +658,11 @@ export function accumulateSinglePhaseListeners(
   nativeEventType: string,
   inCapturePhase: boolean,
   accumulateTargetOnly: boolean,
+  nativeEvent: AnyNativeEvent,
 ): Array<DispatchListener> {
   const captureName = reactName !== null ? reactName + 'Capture' : null;
   const reactEventName = inCapturePhase ? captureName : reactName;
-  const listeners: Array<DispatchListener> = [];
+  let listeners: Array<DispatchListener> = [];
 
   let instance = targetFiber;
   let lastHostComponent = null;
@@ -740,6 +741,23 @@ export function accumulateSinglePhaseListeners(
     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: internal field
+      const detachedInterceptFiber = nativeEvent._detachedInterceptFiber;
+      if (
+        detachedInterceptFiber !== null &&
+        (detachedInterceptFiber === instance ||
+          detachedInterceptFiber === instance.alternate)
+      ) {
+        listeners = [];
+      }
+    }
     instance = instance.return;
   }
   return listeners;
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 6a3662962a74..004f0bb631f3 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -2424,6 +2424,60 @@ describe('DOMPluginEventSystem', () => {
             expect(log).toEqual(['beforeblur', 'afterblur']);
           });
 
+          // @gate experimental
+          it('beforeblur should skip handlers from a deleted subtree after the focused element is unmounted', () => {
+            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>
+              );
+            };
+
+            ReactDOM.render(<Component show={true} />, container);
+            Scheduler.unstable_flushAll();
+
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+            expect(onBeforeBlur).toHaveBeenCalledTimes(0);
+
+            ReactDOM.render(<Component show={false} />, container);
+            Scheduler.unstable_flushAll();
+
+            expect(onBeforeBlur).toHaveBeenCalledTimes(1);
+          });
+
           // @gate experimental
           it('beforeblur and afterblur are called after a focused element is suspended', () => {
             const log = [];
@@ -2510,6 +2564,87 @@ describe('DOMPluginEventSystem', () => {
             document.body.removeChild(container2);
           });
 
+          // @gate experimental
+          it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', () => {
+            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 = ReactDOM.createRoot(container2);
+
+            act(() => {
+              root.render(<Component />);
+            });
+            jest.runAllTimers();
+
+            const inner = innerRef.current;
+            const target = createEventTarget(inner);
+            target.focus();
+            expect(onBeforeBlur).toHaveBeenCalledTimes(0);
+
+            suspend = true;
+            act(() => {
+              root.render(<Component />);
+            });
+            jest.runAllTimers();
+
+            expect(onBeforeBlur).toHaveBeenCalledTimes(1);
+            resolve();
+
+            document.body.removeChild(container2);
+          });
+
           // @gate experimental
           it('regression: does not fire beforeblur/afterblur if target is already hidden', () => {
             const Suspense = React.Suspense;
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
index fafccff92014..03bf9484b2c0 100644
--- a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -200,6 +200,7 @@ function extractEvents(
       nativeEvent.type,
       inCapturePhase,
       accumulateTargetOnly,
+      nativeEvent,
     );
     if (listeners.length > 0) {
       // Intentionally create event lazily.
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index dcdceb7a60db..636542e8d426 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -481,7 +481,7 @@ export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
   throw new Error('Not yet implemented');
 }
 
-export function beforeActiveInstanceBlur() {
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 0369755c136a..eba0a2b90462 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -534,7 +534,7 @@ export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
   throw new Error('Not yet implemented');
 }
 
-export function beforeActiveInstanceBlur() {
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 4f40bde18231..fffa71d20801 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2172,7 +2172,7 @@ function commitBeforeMutationEffectsImpl(fiber: Fiber) {
       doesFiberContain(fiber, focusedInstanceHandle)
     ) {
       shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur();
+      beforeActiveInstanceBlur(fiber);
     }
   }
 
@@ -2206,7 +2206,7 @@ function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {
 
     if (doesFiberContain(fiber, ((focusedInstanceHandle: any): Fiber))) {
       shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur();
+      beforeActiveInstanceBlur(fiber);
     }
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c0fcb9c5c09b..cece268e3d01 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2261,7 +2261,7 @@ function commitBeforeMutationEffects() {
       if ((nextEffect.flags & Deletion) !== NoFlags) {
         if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
           shouldFireAfterActiveInstanceBlur = true;
-          beforeActiveInstanceBlur();
+          beforeActiveInstanceBlur(nextEffect);
         }
       } else {
         // TODO: Move this out of the hot path using a dedicated effect tag.
@@ -2271,7 +2271,7 @@ function commitBeforeMutationEffects() {
           doesFiberContain(nextEffect, focusedInstanceHandle)
         ) {
           shouldFireAfterActiveInstanceBlur = true;
-          beforeActiveInstanceBlur();
+          beforeActiveInstanceBlur(nextEffect);
         }
       }
     }
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index b244810736d8..a6d661d5fe9c 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -377,7 +377,7 @@ export function makeOpaqueHydratingObject(
   };
 }
 
-export function beforeActiveInstanceBlur() {
+export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
 

From 02da938fd51f6345ca185d571ea6628189ae81a7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 15 Oct 2020 08:40:12 -0400
Subject: [PATCH 0017/1603] Don't double-invoke effects in legacy roots
 (#20028)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Large legacy applications are likely to be difficult to update to handle this feature, and it wouldn't add any value– since newer APIs that require this resilience are not legacy compatible.
---
 .../src/ReactFiberClassComponent.new.js       |  33 +++-
 .../src/ReactFiberCommitWork.new.js           |   8 +
 .../src/ReactFiberHooks.new.js                |  31 +++-
 .../src/ReactFiberWorkLoop.new.js             |   7 +
 .../ReactDoubleInvokeEvents-test.internal.js  | 164 +++++++++++++-----
 .../__tests__/ReactProfiler-test.internal.js  |   6 +-
 6 files changed, 193 insertions(+), 56 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 4688c10998d1..663b27dfed41 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -30,7 +30,13 @@ import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
-import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
+import {
+  BlockingMode,
+  ConcurrentMode,
+  DebugTracingMode,
+  NoMode,
+  StrictMode,
+} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -891,7 +897,12 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    if (__DEV__ && enableDoubleInvokingEffects) {
+    if (
+      __DEV__ &&
+      enableDoubleInvokingEffects &&
+      (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    ) {
+      // Never double-invoke effects for legacy roots.
       workInProgress.flags |= MountLayoutDev | Update;
     } else {
       workInProgress.flags |= Update;
@@ -965,7 +976,11 @@ function resumeMountClassInstance(
     // 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') {
-      if (__DEV__ && enableDoubleInvokingEffects) {
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
         workInProgress.flags |= MountLayoutDev | Update;
       } else {
         workInProgress.flags |= Update;
@@ -1012,7 +1027,11 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      if (__DEV__ && enableDoubleInvokingEffects) {
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
         workInProgress.flags |= MountLayoutDev | Update;
       } else {
         workInProgress.flags |= Update;
@@ -1022,7 +1041,11 @@ function resumeMountClassInstance(
     // 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') {
-      if (__DEV__ && enableDoubleInvokingEffects) {
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
         workInProgress.flags |= MountLayoutDev | Update;
       } else {
         workInProgress.flags |= Update;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 4e9acfae1135..c43c6f8b1363 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2024,6 +2024,8 @@ function commitPassiveMount(
 
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
@@ -2057,6 +2059,8 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
 
 function invokePassiveEffectMountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
@@ -2081,6 +2085,8 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
 
 function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
@@ -2113,6 +2119,8 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
 
 function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 67c148ddc017..bdd0bed4c759 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -29,7 +29,12 @@ import {
   enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  DebugTracingMode,
+} from './ReactTypeOfMode';
 import {
   NoLane,
   NoLanes,
@@ -485,7 +490,11 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
     workInProgress.flags &= ~(
       MountPassiveDevEffect |
       PassiveEffect |
@@ -1253,7 +1262,11 @@ function mountEffect(
     }
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
     return mountEffectImpl(
       MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
       HookPassive,
@@ -1287,7 +1300,11 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
     return mountEffectImpl(
       MountLayoutDevEffect | UpdateEffect,
       HookLayout,
@@ -1355,7 +1372,11 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
     return mountEffectImpl(
       MountLayoutDevEffect | UpdateEffect,
       HookLayout,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index fffa71d20801..1229ff006d41 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2874,6 +2874,11 @@ function commitDoubleInvokeEffectsInDEV(
   hasPassiveEffects: boolean,
 ) {
   if (__DEV__ && enableDoubleInvokingEffects) {
+    // Never double-invoke effects for legacy roots.
+    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
+      return;
+    }
+
     setCurrentDebugFiberInDEV(fiber);
     invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
     if (hasPassiveEffects) {
@@ -2898,6 +2903,8 @@ function invokeEffectsInDev(
   invokeEffectFn: (fiber: Fiber) => void,
 ): void {
   if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
     let fiber = firstChild;
     while (fiber !== null) {
       if (fiber.child !== null) {
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
index fddc3744245a..e5136af4e240 100644
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
@@ -11,17 +11,44 @@
 
 let React;
 let ReactFeatureFlags;
-let ReactNoop;
+let ReactTestRenderer;
 let Scheduler;
+let act;
 
 describe('ReactDoubleInvokeEvents', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactNoop = require('react-noop-renderer');
+    ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
     ReactFeatureFlags.enableDoubleInvokingEffects = __VARIANT__;
+    act = ReactTestRenderer.unstable_concurrentAct;
+  });
+
+  it('should not double invoke effects in legacy mode', () => {
+    function App({text}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect mount');
+        return () => Scheduler.unstable_yieldValue('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect mount');
+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+      });
+
+      return text;
+    }
+
+    act(() => {
+      ReactTestRenderer.create(<App text={'mount'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect mount',
+      'useEffect mount',
+    ]);
   });
 
   it('double invoking for effects works properly', () => {
@@ -38,8 +65,12 @@ describe('ReactDoubleInvokeEvents', () => {
 
       return text;
     }
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<App text={'mount'} />, {
+        unstable_isConcurrent: true,
+      });
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -58,8 +89,8 @@ describe('ReactDoubleInvokeEvents', () => {
       ]);
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
+    act(() => {
+      renderer.update(<App text={'update'} />);
     });
 
     expect(Scheduler).toHaveYielded([
@@ -69,8 +100,8 @@ describe('ReactDoubleInvokeEvents', () => {
       'useEffect mount',
     ]);
 
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
+    act(() => {
+      renderer.unmount();
     });
 
     expect(Scheduler).toHaveYielded([
@@ -94,8 +125,11 @@ describe('ReactDoubleInvokeEvents', () => {
       return text;
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<App text={'mount'} />, {
+        unstable_isConcurrent: true,
+      });
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -114,8 +148,8 @@ describe('ReactDoubleInvokeEvents', () => {
       ]);
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
+    act(() => {
+      renderer.update(<App text={'update'} />);
     });
 
     expect(Scheduler).toHaveYielded([
@@ -125,8 +159,8 @@ describe('ReactDoubleInvokeEvents', () => {
       'useEffect Two mount',
     ]);
 
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
+    act(() => {
+      renderer.unmount(null);
     });
 
     expect(Scheduler).toHaveYielded([
@@ -152,8 +186,11 @@ describe('ReactDoubleInvokeEvents', () => {
       return text;
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<App text={'mount'} />, {
+        unstable_isConcurrent: true,
+      });
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -172,8 +209,8 @@ describe('ReactDoubleInvokeEvents', () => {
       ]);
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
+    act(() => {
+      renderer.update(<App text={'update'} />);
     });
 
     expect(Scheduler).toHaveYielded([
@@ -183,8 +220,8 @@ describe('ReactDoubleInvokeEvents', () => {
       'useLayoutEffect Two mount',
     ]);
 
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
+    act(() => {
+      renderer.unmount();
     });
 
     expect(Scheduler).toHaveYielded([
@@ -206,8 +243,11 @@ describe('ReactDoubleInvokeEvents', () => {
       return text;
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<App text={'mount'} />, {
+        unstable_isConcurrent: true,
+      });
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -224,8 +264,8 @@ describe('ReactDoubleInvokeEvents', () => {
       ]);
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
+    act(() => {
+      renderer.update(<App text={'update'} />);
     });
 
     expect(Scheduler).toHaveYielded([
@@ -233,8 +273,8 @@ describe('ReactDoubleInvokeEvents', () => {
       'useEffect mount',
     ]);
 
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
+    act(() => {
+      renderer.unmount();
     });
 
     expect(Scheduler).toHaveYielded([]);
@@ -264,8 +304,8 @@ describe('ReactDoubleInvokeEvents', () => {
       }
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App />);
+    act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -298,8 +338,11 @@ describe('ReactDoubleInvokeEvents', () => {
       }
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<App text={'mount'} />, {
+        unstable_isConcurrent: true,
+      });
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -312,19 +355,45 @@ describe('ReactDoubleInvokeEvents', () => {
       expect(Scheduler).toHaveYielded(['componentDidMount']);
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
+    act(() => {
+      renderer.update(<App text={'update'} />);
     });
 
     expect(Scheduler).toHaveYielded(['componentDidUpdate']);
 
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
+    act(() => {
+      renderer.unmount();
     });
 
     expect(Scheduler).toHaveYielded(['componentWillUnmount']);
   });
 
+  it('should not double invoke class lifecycles in legacy mode', () => {
+    class App extends React.PureComponent {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    act(() => {
+      ReactTestRenderer.create(<App text={'mount'} />);
+    });
+
+    expect(Scheduler).toHaveYielded(['componentDidMount']);
+  });
+
   it('double flushing passive effects only results in one double invoke', () => {
     function App({text}) {
       const [state, setState] = React.useState(0);
@@ -345,8 +414,10 @@ describe('ReactDoubleInvokeEvents', () => {
       return text;
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+    act(() => {
+      ReactTestRenderer.create(<App text={'mount'} />, {
+        unstable_isConcurrent: true,
+      });
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -410,8 +481,8 @@ describe('ReactDoubleInvokeEvents', () => {
       return showChild && <Child />;
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App />);
+    act(() => {
+      ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -430,7 +501,7 @@ describe('ReactDoubleInvokeEvents', () => {
       ]);
     }
 
-    ReactNoop.act(() => {
+    act(() => {
       _setShowChild(true);
     });
 
@@ -495,8 +566,11 @@ describe('ReactDoubleInvokeEvents', () => {
       );
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<App text={'mount'} />, {
+        unstable_isConcurrent: true,
+      });
     });
 
     if (__DEV__ && __VARIANT__) {
@@ -519,8 +593,8 @@ describe('ReactDoubleInvokeEvents', () => {
       ]);
     }
 
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
+    act(() => {
+      renderer.update(<App text={'mount'} />);
     });
 
     expect(Scheduler).toHaveYielded([
@@ -530,8 +604,8 @@ describe('ReactDoubleInvokeEvents', () => {
       'useEffect mount',
     ]);
 
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
+    act(() => {
+      renderer.unmount();
     });
 
     expect(Scheduler).toHaveYielded([
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 191cec9492ce..05d73235b1b3 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -4180,7 +4180,11 @@ describe('Profiler', () => {
               const interactions = SchedulerTracing.unstable_getCurrent();
               expect(interactions.size).toBe(1);
               interaction = Array.from(interactions)[0];
-              ReactTestRenderer.create(<Component />);
+              ReactTestRendererAct(() => {
+                ReactTestRenderer.create(<Component />, {
+                  unstable_isConcurrent: true,
+                });
+              });
             },
           );
           Scheduler.unstable_flushAll();

From c57fe4a2c1402acdbf31ac48cfc6a6bf336c4067 Mon Sep 17 00:00:00 2001
From: adasq <adasq@users.noreply.github.com>
Date: Thu, 15 Oct 2020 14:48:28 +0200
Subject: [PATCH 0018/1603] ReactIs.isValidElementType Unit Test extended with
 PureComponent case (#20033)

Co-authored-by: Adam Plocieniak <adam.plocieniak@allegro.pl>
---
 packages/react-is/src/__tests__/ReactIs-test.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js
index a56c9f756a1d..cddd479c4344 100644
--- a/packages/react-is/src/__tests__/ReactIs-test.js
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -29,6 +29,8 @@ describe('ReactIs', () => {
     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', () => {
@@ -37,6 +39,11 @@ describe('ReactIs', () => {
         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) =>
@@ -48,6 +55,7 @@ describe('ReactIs', () => {
 
     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);

From 2eb3181eb4247077eafc4df98d06d7a999ecf5d8 Mon Sep 17 00:00:00 2001
From: IDrissAitHafid <31975500+IDrissAitHafid@users.noreply.github.com>
Date: Thu, 15 Oct 2020 19:45:23 +0100
Subject: [PATCH 0019/1603] fixed unfound node error when Suspense is filtered
 (#20019)

* fixed unfound node error when Suspense is filtered

* added a test for filtered Suspense node
---
 .../storeComponentFilters-test.js.snap        |  7 ++++++
 .../__tests__/storeComponentFilters-test.js   |  3 +++
 .../src/backend/renderer.js                   | 22 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
index cfe68aa69ecb..49035b992783 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
@@ -97,6 +97,13 @@ exports[`Store component filters should not break when Suspense nodes are filter
       <Component>
 `;
 
+exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 3: suspended 1`] = `
+[root]
+  ▾ <Wrapper>
+    ▾ <Loading>
+        <div>
+`;
+
 exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
 [root]
   ▾ <Root>
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index bfbf3e98210a..a8a0e151ef74 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -256,5 +256,8 @@ describe('Store component filters', () => {
 
     act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
     expect(store).toMatchSnapshot('2: resolved');
+
+    act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
+    expect(store).toMatchSnapshot('3: suspended');
   });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c10d71bbfec2..23deda7dde25 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1437,6 +1437,9 @@ export function attach(
   }
 
   function recordResetChildren(fiber: Fiber, childSet: Fiber) {
+    if (__DEBUG__) {
+      debug('recordResetChildren()', childSet, fiber);
+    }
     // The frontend only really cares about the displayName, key, and children.
     // The first two don't really change, so we are only concerned with the order of children here.
     // This is trickier than a simple comparison though, since certain types of fibers are filtered.
@@ -1471,6 +1474,23 @@ export function attach(
       nextChildren.push(getFiberID(getPrimaryFiber(fiber)));
     } else {
       let child = fiber.child;
+      const isTimedOutSuspense =
+        fiber.tag === SuspenseComponent && fiber.memoizedState !== null;
+      if (isTimedOutSuspense) {
+        // Special case: if Suspense mounts in a timed-out state,
+        // get the fallback child from the inner fragment,
+        // and skip over the primary child.
+        const primaryChildFragment = fiber.child;
+        const fallbackChildFragment = primaryChildFragment
+          ? primaryChildFragment.sibling
+          : null;
+        const fallbackChild = fallbackChildFragment
+          ? fallbackChildFragment.child
+          : null;
+        if (fallbackChild !== null) {
+          child = fallbackChild;
+        }
+      }
       while (child !== null) {
         findReorderedChildrenRecursively(child, nextChildren);
         child = child.sibling;
@@ -1592,7 +1612,7 @@ export function attach(
       if (nextFallbackChildSet != null) {
         mountFiberRecursively(
           nextFallbackChildSet,
-          nextFiber,
+          shouldIncludeInTree ? nextFiber : parentFiber,
           true,
           traceNearestHostComponentUpdate,
         );

From 8df7b7911aa7fc3a896fb29da29e09f574e931aa Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 16 Oct 2020 08:21:58 -0500
Subject: [PATCH 0020/1603] Remove Passive flag from "before mutation" phase
 (#20038)

We don't need to visit passive effect nodes during before mutation.

The only reason we were previously was to schedule the root-level
passive effect callback as early as possible, but now that
`subtreeFlags` exists, we can check that instead.

This should reduce the amount of traversal during the commit phase,
particularly when mounting or updating large trees that contain many
passive effects.
---
 .../react-reconciler/src/ReactFiberFlags.js   |  5 ++-
 .../src/ReactFiberWorkLoop.new.js             | 40 +++++++------------
 2 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 9fc29c29adb6..ed1f114e77b3 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -48,7 +48,10 @@ export const ForceUpdateForLegacySuspense = /* */ 0b000100000000000000;
 export const PassiveStatic = /*                */ 0b001000000000000000;
 
 // Union of side effect groupings as pertains to subtreeFlags
-export const BeforeMutationMask = /*           */ 0b000000001100001010;
+// TODO: Don't need to visit Placement during BeforeMutation phase
+// TODO: Only need to visit Deletions during BeforeMutation phase if an element
+// is focused.
+export const BeforeMutationMask = /*           */ 0b000000000100001010;
 export const MutationMask = /*                 */ 0b000000010010011110;
 export const LayoutMask = /*                   */ 0b000000000010100100;
 export const PassiveMask = /*                  */ 0b000000001000001000;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 1229ff006d41..ff171af0c535 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1880,6 +1880,20 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
+    // If there are pending passive effects, schedule a callback to process them.
+    if (
+      (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
+      (finishedWork.flags & PassiveMask) !== NoFlags
+    ) {
+      if (!rootDoesHavePassiveEffects) {
+        rootDoesHavePassiveEffects = true;
+        scheduleCallback(NormalSchedulerPriority, () => {
+          flushPassiveEffects();
+          return null;
+        });
+      }
+    }
+
     let previousLanePriority;
     if (decoupleUpdatePriorityFromScheduler) {
       previousLanePriority = getCurrentUpdateLanePriority();
@@ -1972,20 +1986,6 @@ function commitRootImpl(root, renderPriorityLevel) {
       markLayoutEffectsStopped();
     }
 
-    // If there are pending passive effects, schedule a callback to process them.
-    if (
-      (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
-      (finishedWork.flags & PassiveMask) !== NoFlags
-    ) {
-      if (!rootDoesHavePassiveEffects) {
-        rootDoesHavePassiveEffects = true;
-        scheduleCallback(NormalSchedulerPriority, () => {
-          flushPassiveEffects();
-          return null;
-        });
-      }
-    }
-
     // Tell Scheduler to yield at the end of the frame, so the browser has an
     // opportunity to paint.
     requestPaint();
@@ -2181,18 +2181,6 @@ function commitBeforeMutationEffectsImpl(fiber: Fiber) {
     commitBeforeMutationEffectOnFiber(current, fiber);
     resetCurrentDebugFiberInDEV();
   }
-
-  if ((flags & Passive) !== NoFlags) {
-    // If there are passive effects, schedule a callback to flush at
-    // the earliest opportunity.
-    if (!rootDoesHavePassiveEffects) {
-      rootDoesHavePassiveEffects = true;
-      scheduleCallback(NormalSchedulerPriority, () => {
-        flushPassiveEffects();
-        return null;
-      });
-    }
-  }
 }
 
 function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {

From f668b6c351c2654fef43e5f1ec24fd72a899d219 Mon Sep 17 00:00:00 2001
From: oltrep <34498770+oltrep@users.noreply.github.com>
Date: Fri, 16 Oct 2020 08:06:08 -0700
Subject: [PATCH 0021/1603] Bump to latest eslint-config-fbjs (#20029)

* bump package to latest

* update files to respect lint

* disable object-type-delimiter rule to work with prettier

* disable rule to let flow check pass
---
 .eslintrc.js                                  |  13 ++
 package.json                                  |   3 +-
 .../__tests__/inspectedElementContext-test.js |   2 +-
 .../__tests__/legacy/inspectElement-test.js   |   2 +-
 yarn.lock                                     | 171 +++++++++++++++++-
 5 files changed, 182 insertions(+), 9 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index cb2d737a12f6..591952fd3617 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -48,6 +48,7 @@ module.exports = {
     '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),
@@ -61,6 +62,8 @@ module.exports = {
     'space-before-blocks': ERROR,
     'space-before-function-paren': OFF,
     'valid-typeof': [ERROR, {requireStringLiterals: true}],
+    // Flow fails with 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.
@@ -74,6 +77,8 @@ module.exports = {
     // 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,
+    // Prettier forces semicolons in a few places
+    'flowtype/object-type-delimiter': OFF,
 
     // React & JSX
     // Our transforms set this automatically
@@ -172,6 +177,14 @@ module.exports = {
       rules: {
         'react-internal/no-production-logging': OFF,
         'react-internal/warning-args': OFF,
+
+        // Disable accessibility checks
+        'jsx-a11y/aria-role': OFF,
+        'jsx-a11y/no-noninteractive-element-interactions': OFF,
+        'jsx-a11y/no-static-element-interactions': OFF,
+        'jsx-a11y/role-has-required-aria-props': OFF,
+        'jsx-a11y/no-noninteractive-tabindex': OFF,
+        'jsx-a11y/tabindex-no-positive': OFF,
       },
     },
     {
diff --git a/package.json b/package.json
index 64e4430ede0a..507465c59318 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,12 @@
     "danger": "^9.2.10",
     "error-stack-parser": "^2.0.6",
     "eslint": "^7.7.0",
-    "eslint-config-fbjs": "^1.1.1",
+    "eslint-config-fbjs": "^3.1.1",
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-flowtype": "^2.25.0",
     "eslint-plugin-jest": "^22.15.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
     "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",
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
index e43b925658f9..f08a3d9d6807 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -1040,7 +1040,7 @@ describe('InspectedElementContext', () => {
         enumerable: false,
         configurable: true,
       },
-      [123]: {
+      123: {
         value: 3,
         writable: true,
         enumerable: true,
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index d4f60af305cb..6ccff70c7777 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -505,7 +505,7 @@ describe('InspectedElementContext', () => {
         enumerable: false,
         configurable: true,
       },
-      [123]: {
+      123: {
         value: 3,
         writable: true,
         enumerable: true,
diff --git a/yarn.lock b/yarn.lock
index f6501ea3d7a6..ace507ca9bae 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1407,6 +1407,14 @@
     core-js "^2.6.5"
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.12.0.tgz#e74206f51ebd69a787a6be762e26593dc3e97756"
+  integrity sha512-CltlJftStV4CBG4/HWVVRnBWFvLkYd22BkYO4gFgX+89JOlYiKQ5+Ji9Ovqb1o3T5DkkBn3JrVq1V/xweAaeGA==
+  dependencies:
+    core-js-pure "^3.0.0"
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@7.10.2":
   version "7.10.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.10.2.tgz#d103f21f2602497d38348a32e008637d506db839"
@@ -1421,6 +1429,13 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
+"@babel/runtime@^7.10.2":
+  version "7.12.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.0.tgz#98bd7666186969c04be893d747cf4a6c6c8fa6b0"
+  integrity sha512-lS4QLXQ2Vbw2ubfQjeQcn+BZgZ5+ROHW9f+DWjEp5Y+NHYmkRGKqHSJ1tuhbUauKu2nhZNTBIvsIQ8dXfY5Gjw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@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"
@@ -2993,6 +3008,14 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
 arr-diff@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-1.1.0.tgz#687c32758163588fef7de7b36fabe495eb1a399a"
@@ -3058,6 +3081,15 @@ array-flatten@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
+array-includes@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.1.tgz#cdd67e6852bdf9c1215460786732255ed2459348"
+  integrity sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0"
+    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"
@@ -3157,6 +3189,11 @@ assign-symbols@^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=
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -3238,6 +3275,16 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axe-core@^3.5.4:
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-3.5.5.tgz#84315073b53fa3c0c51676c588d59da09a192227"
+  integrity sha512-5P0QZ6J5xGikH780pghEdbEKijCTrruK9KxtPZCFWUpef0f6GipO+xEZ5GKCb020mmqgbiNO6TcA55CriL784Q==
+
+axobject-query@^2.1.2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
 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"
@@ -4532,6 +4579,11 @@ core-js-compat@^3.6.2:
     browserslist "^4.8.3"
     semver "7.0.0"
 
+core-js-pure@^3.0.0:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
+  integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
+
 core-js@3.6.4, core-js@^3.6.4:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
@@ -4846,6 +4898,11 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+damerau-levenshtein@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791"
+  integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==
+
 danger@^9.2.10:
   version "9.2.10"
   resolved "https://registry.yarnpkg.com/danger/-/danger-9.2.10.tgz#7b4e34ca805dd39bbbc0ca2da9025d63f4d36a85"
@@ -5396,6 +5453,11 @@ emoji-regex@^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.0.0:
+  version "9.1.1"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.1.1.tgz#1d5ffce26d8191e6c3f3a9d27987b1c5bba7d20a"
+  integrity sha512-AaWyDiNO9rbtMIcGl7tdxMcNu8SOLaDLxmQEFT5JhgKufOJzPPkYmgN2QwqTgw4doWMZZQttC6sUWVQjb+1VdA==
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -5526,6 +5588,23 @@ es-abstract@^1.13.0:
     is-regex "^1.0.4"
     object-keys "^1.0.12"
 
+es-abstract@^1.17.0:
+  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.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"
@@ -5543,6 +5622,24 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
     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.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
@@ -5642,10 +5739,10 @@ escodegen@^1.14.1:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-fbjs@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-config-fbjs/-/eslint-config-fbjs-1.1.1.tgz#dd29f8d912e8a755257e9eeef00bae1cce57f73a"
-  integrity sha1-3Sn42RLop1Ulfp7u8AuuHM5X9zo=
+eslint-config-fbjs@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-fbjs/-/eslint-config-fbjs-3.1.1.tgz#f5b4c1df888693672116f000527a8df25d61b888"
+  integrity sha512-Vpyqz+ZcyLyiUGUdUfiQmZnxiQ4Nj/KDRKed/Y5qSm+xHbQJ5zcZUQwLUMWHQicpDHewsdXwlpUAblvy1DtGvg==
 
 eslint-config-prettier@^6.9.0:
   version "6.9.0"
@@ -5675,6 +5772,23 @@ eslint-plugin-jest@^22.15.0:
   dependencies:
     "@typescript-eslint/experimental-utils" "^1.13.0"
 
+eslint-plugin-jsx-a11y@^6.3.1:
+  version "6.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.3.1.tgz#99ef7e97f567cc6a5b8dd5ab95a94a67058a2660"
+  integrity sha512-i1S+P+c3HOlBJzMFORRbC58tHa65Kbo8b52/TwCwSKLohwvpfT5rm2GjGWzOHTEuq4xxf2aRlHHTtmExDQOP+g==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    aria-query "^4.2.2"
+    array-includes "^3.1.1"
+    ast-types-flow "^0.0.7"
+    axe-core "^3.5.4"
+    axobject-query "^2.1.2"
+    damerau-levenshtein "^1.0.6"
+    emoji-regex "^9.0.0"
+    has "^1.0.3"
+    jsx-ast-utils "^2.4.1"
+    language-tags "^1.0.5"
+
 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"
@@ -7764,6 +7878,11 @@ is-callable@^1.2.0:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.0.tgz#83336560b54a38e35e3a2df7afd0454d691468bb"
   integrity sha512-pyVD9AaGLxtg6srb2Ng6ynWJqkHU9bEM087AKck0w8QwDarTfNcpIYoU8x8Hv2Icm8u6kFJM18Dag8lyqGkviw==
 
+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-ci@^1.0.10:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
@@ -7928,6 +8047,11 @@ is-negated-glob@^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.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-npm@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-1.0.0.tgz#f2fb63a65e4905b406c86072765a1a4dc793b9f4"
@@ -8039,7 +8163,7 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
-is-regex@^1.1.0:
+is-regex@^1.1.0, 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==
@@ -8073,6 +8197,11 @@ is-stream@^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:
+  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-symbol@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.2.tgz#a055f6ae57192caee329e7a860118b497a950f38"
@@ -8870,6 +8999,14 @@ jsx-ast-utils@^1.3.4:
   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.4.1:
+  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"
+
 jszip@^2.4.0:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
@@ -8953,6 +9090,18 @@ ky@^0.12.0:
   resolved "https://registry.yarnpkg.com/ky/-/ky-0.12.0.tgz#c05be95e6745ba422a6d2cc8ae964164962279f9"
   integrity sha512-t9b7v3V2fGwAcQnnDDQwKQGF55eWrf4pwi1RN08Fy8b/9GEwV7Ea0xQiaSW6ZbeghBHIwl8kgnla4vVo9seepQ==
 
+language-subtag-registry@~0.3.2:
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.20.tgz#a00a37121894f224f763268e431c55556b0c0755"
+  integrity sha512-KPMwROklF4tEx283Xw0pNKtfTj1gZ4UByp4EsIFWLgBavJltF4TiYPc39k06zSTsLzxTVXXDSpbwaQXaFB4Qeg==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
 latest-version@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-3.1.0.tgz#a205383fea322b33b5ae3b18abee0dc2f356ee15"
@@ -10157,7 +10306,7 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.7.0:
+object-inspect@^1.7.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==
@@ -10184,6 +10333,16 @@ object.assign@^4.0.4, object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+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"
+
 object.getownpropertydescriptors@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"

From b093528650db32b0112eb3adfcf9867e5f3b56d0 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 16 Oct 2020 17:07:27 +0200
Subject: [PATCH 0022/1603] test: Add regression test for hooks after error
 boundaries (#20002)

* test: Add regression test for hooks after error boundaries

* fix lint
---
 ...ReactErrorBoundariesHooks-test.internal.js | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 packages/react-dom/src/__tests__/ReactErrorBoundariesHooks-test.internal.js

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 000000000000..078c58e0357e
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundariesHooks-test.internal.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+
+describe('ReactErrorBoundariesHooks', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactDOM = require('react-dom');
+    React = require('react');
+  });
+
+  it('should preserve hook order if errors are caught', () => {
+    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');
+    ReactDOM.render(<App />, container);
+
+    expect(() => {
+      ReactDOM.render(<App />, container);
+    }).not.toThrow();
+  });
+});

From e9f5ad2584ddb0d42a96045c9b23d0b4d9311331 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 16 Oct 2020 16:49:41 +0100
Subject: [PATCH 0023/1603] Remove Set bookkeeping for root events (#19990)

* Remove dead code branch

This function is only called when initializing roots/containers (where we skip non-delegated events) and in the createEventHandle path for non-DOM nodes (where we never hit this path because targetElement is null).

* Move related functions close to each other

* Fork listenToNativeEvent for createEventHandle

It doesn't need all of the logic that's needed for normal event path.

And the normal codepath doesn't use the last two arguments.

* Expand test coverage for non-delegated events

This changes a test to fail if we removed the event handler Sets. Previously, we didn't cover that.

* Add DEV-level check that top-level events and non-delegated events do not overlap

This makes us confident that they're mutually exclusive and there is no duplication between them.

* Add a test verifying selectionchange deduplication

This is why we still need the Set bookkeeping. Adding a test for it.

* Remove Set bookkeeping for root events

Root events don't intersect with non-delegated bubbled events (so no need to deduplicate there). They also don't intersect with createEventHandle non-managed events (because those don't go on the DOM elements). So we can remove the bookeeping because we already have code ensuring the eager subscriptions only run once per element.

I've moved the selectionchange special case outside, and added document-level deduplication for it alone.

Technically this might change the behavior of createEventHandle with selectionchange on the document, but we're not using that, and I'm not sure that behavior makes sense anyway.

* Flow
---
 .../__tests__/ReactDOMEventListener-test.js   | 107 +++++++++++++-
 .../src/client/ReactDOMEventHandle.js         |   8 +-
 .../src/events/DOMPluginEventSystem.js        | 139 +++++++++---------
 3 files changed, 173 insertions(+), 81 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
index a6918c69197e..42e73d58f154 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
@@ -820,19 +820,21 @@ describe('ReactDOMEventListener', () => {
         </div>,
         container,
       );
+
+      // Update to attach.
       ReactDOM.render(
         <div
           className="grand"
-          onScroll={onScroll}
-          onScrollCapture={onScrollCapture}>
+          onScroll={e => onScroll(e)}
+          onScrollCapture={e => onScrollCapture(e)}>
           <div
             className="parent"
-            onScroll={onScroll}
-            onScrollCapture={onScrollCapture}>
+            onScroll={e => onScroll(e)}
+            onScrollCapture={e => onScrollCapture(e)}>
             <div
               className="child"
-              onScroll={onScroll}
-              onScrollCapture={onScrollCapture}
+              onScroll={e => onScroll(e)}
+              onScrollCapture={e => onScrollCapture(e)}
               ref={ref}
             />
           </div>
@@ -850,6 +852,58 @@ describe('ReactDOMEventListener', () => {
         ['capture', 'child'],
         ['bubble', 'child'],
       ]);
+
+      // Update to verify deduplication.
+      log.length = 0;
+      ReactDOM.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)}>
+          <div
+            className="parent"
+            onScroll={e => onScroll(e)}
+            onScrollCapture={e => onScrollCapture(e)}>
+            <div
+              className="child"
+              onScroll={e => onScroll(e)}
+              onScrollCapture={e => onScrollCapture(e)}
+              ref={ref}
+            />
+          </div>
+        </div>,
+        container,
+      );
+      ref.current.dispatchEvent(
+        new Event('scroll', {
+          bubbles: false,
+        }),
+      );
+      expect(log).toEqual([
+        ['capture', 'grand'],
+        ['capture', 'parent'],
+        ['capture', 'child'],
+        ['bubble', 'child'],
+      ]);
+
+      // Update to detach.
+      log.length = 0;
+      ReactDOM.render(
+        <div>
+          <div>
+            <div ref={ref} />
+          </div>
+        </div>,
+        container,
+      );
+      ref.current.dispatchEvent(
+        new Event('scroll', {
+          bubbles: false,
+        }),
+      );
+      expect(log).toEqual([]);
     } finally {
       document.body.removeChild(container);
     }
@@ -899,8 +953,49 @@ describe('ReactDOMEventListener', () => {
         ['capture', 'child'],
         ['bubble', 'child'],
       ]);
+
+      log.length = 0;
+      ReactDOM.render(
+        <div>
+          <div>
+            <div ref={ref} />
+          </div>
+        </div>,
+        container,
+      );
+      ref.current.dispatchEvent(
+        new Event('scroll', {
+          bubbles: false,
+        }),
+      );
+      expect(log).toEqual([]);
     } finally {
       document.body.removeChild(container);
     }
   });
+
+  it('should not subscribe to selectionchange twice', () => {
+    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 {
+      ReactDOM.render(<input />, document.createElement('div'));
+      ReactDOM.render(<input />, document.createElement('div'));
+    } finally {
+      document.addEventListener = originalDocAddEventListener;
+    }
+
+    expect(log).toEqual([false]);
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
index 69a2eb4851f1..80834c32834d 100644
--- a/packages/react-dom/src/client/ReactDOMEventHandle.js
+++ b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -22,9 +22,7 @@ import {
   addEventHandleToTarget,
 } from './ReactDOMComponentTree';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
-import {listenToNativeEvent} from '../events/DOMPluginEventSystem';
-
-import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../events/EventSystemFlags';
+import {listenToNativeEventForNonManagedEventTarget} from '../events/DOMPluginEventSystem';
 
 import {
   enableScopeAPI,
@@ -69,12 +67,10 @@ function registerReactDOMEvent(
     const eventTarget = ((target: any): EventTarget);
     // These are valid event targets, but they are also
     // non-managed React nodes.
-    listenToNativeEvent(
+    listenToNativeEventForNonManagedEventTarget(
       domEventName,
       isCapturePhaseListener,
       eventTarget,
-      null,
-      IS_EVENT_HANDLE_NON_MANAGED_NODE,
     );
   } else {
     invariant(
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index c43d96dcb1c9..874fa394e5c4 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -295,6 +295,15 @@ 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(
@@ -312,88 +321,46 @@ export function listenToNonDelegatedEvent(
   }
 }
 
-const listeningMarker =
-  '_reactListening' +
-  Math.random()
-    .toString(36)
-    .slice(2);
-
-export function listenToAllSupportedEvents(rootContainerElement: EventTarget) {
-  if ((rootContainerElement: any)[listeningMarker]) {
-    // Performance optimization: don't iterate through events
-    // for the same portal container or root node more than once.
-    // TODO: once we remove the flag, we may be able to also
-    // remove some of the bookkeeping maps used for laziness.
-    return;
-  }
-  (rootContainerElement: any)[listeningMarker] = true;
-  allNativeEvents.forEach(domEventName => {
-    if (!nonDelegatedEvents.has(domEventName)) {
-      listenToNativeEvent(
+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,
-        false,
-        ((rootContainerElement: any): Element),
-        null,
       );
     }
-    listenToNativeEvent(
-      domEventName,
-      true,
-      ((rootContainerElement: any): Element),
-      null,
-    );
-  });
+  }
+
+  let eventSystemFlags = 0;
+  if (isCapturePhaseListener) {
+    eventSystemFlags |= IS_CAPTURE_PHASE;
+  }
+  addTrappedEventListener(
+    target,
+    domEventName,
+    eventSystemFlags,
+    isCapturePhaseListener,
+  );
 }
 
-export function listenToNativeEvent(
+// This is only used by createEventHandle when the
+// target is not a DOM element. E.g. window.
+export function listenToNativeEventForNonManagedEventTarget(
   domEventName: DOMEventName,
   isCapturePhaseListener: boolean,
-  rootContainerElement: EventTarget,
-  targetElement: Element | null,
-  eventSystemFlags?: EventSystemFlags = 0,
+  target: EventTarget,
 ): void {
-  let target = rootContainerElement;
-
-  // selectionchange needs to be attached to the document
-  // otherwise it won't capture incoming events that are only
-  // triggered on the document directly.
-  if (
-    domEventName === 'selectionchange' &&
-    (rootContainerElement: any).nodeType !== DOCUMENT_NODE
-  ) {
-    target = (rootContainerElement: any).ownerDocument;
-  }
-  // If the event can be delegated (or is capture phase), we can
-  // register it to the root container. Otherwise, we should
-  // register the event to the target element and mark it as
-  // a non-delegated event.
-  if (
-    targetElement !== null &&
-    !isCapturePhaseListener &&
-    nonDelegatedEvents.has(domEventName)
-  ) {
-    // For all non-delegated events, apart from scroll, we attach
-    // their event listeners to the respective elements that their
-    // events fire on. That means we can skip this step, as event
-    // listener has already been added previously. However, we
-    // special case the scroll event because the reality is that any
-    // element can scroll.
-    // TODO: ideally, we'd eventually apply the same logic to all
-    // events from the nonDelegatedEvents list. Then we can remove
-    // this special case and use the same logic for all events.
-    if (domEventName !== 'scroll') {
-      return;
-    }
-    eventSystemFlags |= IS_NON_DELEGATED;
-    target = targetElement;
-  }
+  let eventSystemFlags = IS_EVENT_HANDLE_NON_MANAGED_NODE;
   const listenerSet = getEventListenerSet(target);
   const listenerSetKey = getListenerSetKey(
     domEventName,
     isCapturePhaseListener,
   );
-  // If the listener entry is empty or we should upgrade, then
-  // we need to trap an event listener onto the target.
   if (!listenerSet.has(listenerSetKey)) {
     if (isCapturePhaseListener) {
       eventSystemFlags |= IS_CAPTURE_PHASE;
@@ -408,6 +375,40 @@ export function listenToNativeEvent(
   }
 }
 
+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,

From 0dd809bdfad2c2d714e369bb7f0082ce3ac34f9c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 16 Oct 2020 11:06:55 -0500
Subject: [PATCH 0024/1603] Remove last schedulePassiveEffectCallback call
 (#20042)

Now there's only a single place where the passive effect callback
is scheduled.
---
 .../src/ReactFiberCommitWork.new.js           |  6 --
 .../src/ReactFiberWorkLoop.new.js             | 56 ++++++-------------
 2 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index c43c6f8b1363..687e62de976c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -70,7 +70,6 @@ import {
   Update,
   Callback,
   LayoutMask,
-  PassiveMask,
   Ref,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
@@ -125,7 +124,6 @@ import {
   captureCommitPhaseError,
   resolveRetryWakeable,
   markCommitTimeOfFallback,
-  schedulePassiveEffectCallback,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -599,10 +597,6 @@ function recursivelyCommitLayoutEffects(
                 finishedWork,
               );
             }
-
-            if ((finishedWork.subtreeFlags & PassiveMask) !== NoFlags) {
-              schedulePassiveEffectCallback();
-            }
             break;
           }
           case ClassComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ff171af0c535..7eaf02ad4e3e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -341,7 +341,6 @@ let hasUncaughtError = false;
 let firstUncaughtError = null;
 let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;
 
-let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
@@ -1865,6 +1864,22 @@ function commitRootImpl(root, renderPriorityLevel) {
     // times out.
   }
 
+  // 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.)
+  const rootDoesHavePassiveEffects =
+    (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
+    (finishedWork.flags & PassiveMask) !== NoFlags;
+  if (rootDoesHavePassiveEffects) {
+    rootWithPendingPassiveEffects = root;
+    pendingPassiveEffectsLanes = lanes;
+    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
+    scheduleCallback(NormalSchedulerPriority, () => {
+      flushPassiveEffects();
+      return null;
+    });
+  }
+
   // 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 satsify Flow. I think the
@@ -1880,20 +1895,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
-    // If there are pending passive effects, schedule a callback to process them.
-    if (
-      (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
-      (finishedWork.flags & PassiveMask) !== NoFlags
-    ) {
-      if (!rootDoesHavePassiveEffects) {
-        rootDoesHavePassiveEffects = true;
-        scheduleCallback(NormalSchedulerPriority, () => {
-          flushPassiveEffects();
-          return null;
-        });
-      }
-    }
-
     let previousLanePriority;
     if (decoupleUpdatePriorityFromScheduler) {
       previousLanePriority = getCurrentUpdateLanePriority();
@@ -2010,17 +2011,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
-
-  if (rootDoesHavePassiveEffects) {
-    // This commit has passive effects. Stash a reference to them. But don't
-    // schedule a callback until after flushing layout work.
-    rootDoesHavePassiveEffects = false;
-    rootWithPendingPassiveEffects = root;
-    pendingPassiveEffectsLanes = lanes;
-    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
-  }
-
   // Read this again, since an effect might have updated it
   remainingLanes = root.pendingLanes;
 
@@ -2047,13 +2037,13 @@ function commitRootImpl(root, renderPriorityLevel) {
   }
 
   if (__DEV__ && enableDoubleInvokingEffects) {
-    if (!rootDidHavePassiveEffects) {
+    if (!rootDoesHavePassiveEffects) {
       commitDoubleInvokeEffectsInDEV(root.current, false);
     }
   }
 
   if (enableSchedulerTracing) {
-    if (!rootDidHavePassiveEffects) {
+    if (!rootDoesHavePassiveEffects) {
       // If there are no passive effects, then we can complete the pending interactions.
       // Otherwise, we'll wait until after the passive effects are flushed.
       // Wait to do this until after remaining work has been scheduled,
@@ -2356,16 +2346,6 @@ function commitMutationEffectsDeletions(
   }
 }
 
-export function schedulePassiveEffectCallback() {
-  if (!rootDoesHavePassiveEffects) {
-    rootDoesHavePassiveEffects = true;
-    scheduleCallback(NormalSchedulerPriority, () => {
-      flushPassiveEffects();
-      return null;
-    });
-  }
-}
-
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {

From eb3181e7722905933da3b53ebff05339f12a3ba6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 16 Oct 2020 11:49:07 -0500
Subject: [PATCH 0025/1603] Add Visibility flag for hiding/unhiding trees
 (#20043)

* Add Visibility flag for hiding/unhiding trees

There's `beforeblur` logic in the snapshot phase that needs to visit
every Suspense boundary whose visibility is toggled. Right now it does
that by visiting Placement and Deletion effects. That includes many
unrelated nodes.

By adding a new flag specifically for toggling Visibility, we will only
visit the relevant Suspense (and Offscreen) boundaries, instead of all
nodes that have a Placement.

Potential follow-ups (not urgent):

- The `beforeblur` logic also has a check to see whether the visibility
was toggled on or off. It only cares about things being hidden. As a
follow up, I can split the Visibility flag into separate Hide/Show
flags, and only visit Hide.
- Now that this is separate from Update, we can move the rest of the
Suspense's layout effects (like attaching retry listeners) to the
passive phase.

* Gate behind createEventHandle feature flag

Only need to visit deleted and hidden trees during the snapshot phase
if the experimental `createEventHandle` flag is enabled. Currently,
it's only used internally at Facebook, not open source.
---
 .../src/ReactFiberCompleteWork.new.js         | 10 ++-
 .../react-reconciler/src/ReactFiberFlags.js   | 74 +++++++++++--------
 .../src/ReactFiberWorkLoop.new.js             |  5 +-
 3 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 1c7799618531..e32b0d394f5b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -73,6 +73,7 @@ import {
   NoFlags,
   DidCapture,
   Snapshot,
+  Visibility,
   MutationMask,
   LayoutMask,
   PassiveMask,
@@ -1154,8 +1155,8 @@ function completeWork(
         // TODO: Only schedule updates if not prevDidTimeout.
         if (nextDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
-          // primary children.
+          // retry listener to the promise.
+          // TODO: Move to passive phase
           workInProgress.flags |= Update;
         }
       }
@@ -1167,7 +1168,7 @@ function completeWork(
           // primary children. In mutation mode, we also need the flag to
           // *unhide* children that were previously hidden, so check if this
           // is currently timed out, too.
-          workInProgress.flags |= Update;
+          workInProgress.flags |= Update | Visibility;
         }
       }
       if (
@@ -1176,6 +1177,7 @@ function completeWork(
         workInProgress.memoizedProps.suspenseCallback != null
       ) {
         // Always notify the callback
+        // TODO: Move to passive phase
         workInProgress.flags |= Update;
       }
       bubbleProperties(workInProgress);
@@ -1523,7 +1525,7 @@ function completeWork(
           prevIsHidden !== nextIsHidden &&
           newProps.mode !== 'unstable-defer-without-hiding'
         ) {
-          workInProgress.flags |= Update;
+          workInProgress.flags |= Update | Visibility;
         }
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index ed1f114e77b3..4340131c0004 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -7,62 +7,72 @@
  * @flow
  */
 
+import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
+
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b000000000000000000;
-export const PerformedWork = /*                */ 0b000000000000000001;
+export const NoFlags = /*                      */ 0b0000000000000000000;
+export const PerformedWork = /*                */ 0b0000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b000000000000000010;
-export const Update = /*                       */ 0b000000000000000100;
-export const PlacementAndUpdate = /*           */ 0b000000000000000110;
-export const Deletion = /*                     */ 0b000000000000001000;
-export const ContentReset = /*                 */ 0b000000000000010000;
-export const Callback = /*                     */ 0b000000000000100000;
-export const DidCapture = /*                   */ 0b000000000001000000;
-export const Ref = /*                          */ 0b000000000010000000;
-export const Snapshot = /*                     */ 0b000000000100000000;
-export const Passive = /*                      */ 0b000000001000000000;
-// TODO (effects) Remove this bit once the new reconciler is synced to the old.
-export const PassiveUnmountPendingDev = /*     */ 0b000010000000000000;
-export const Hydrating = /*                    */ 0b000000010000000000;
-export const HydratingAndUpdate = /*           */ 0b000000010000000100;
+export const Placement = /*                    */ 0b0000000000000000010;
+export const Update = /*                       */ 0b0000000000000000100;
+export const PlacementAndUpdate = /*           */ 0b0000000000000000110;
+export const Deletion = /*                     */ 0b0000000000000001000;
+export const ContentReset = /*                 */ 0b0000000000000010000;
+export const Callback = /*                     */ 0b0000000000000100000;
+export const DidCapture = /*                   */ 0b0000000000001000000;
+export const Ref = /*                          */ 0b0000000000010000000;
+export const Snapshot = /*                     */ 0b0000000000100000000;
+export const Passive = /*                      */ 0b0000000001000000000;
+export const Hydrating = /*                    */ 0b0000000010000000000;
+export const HydratingAndUpdate = /*           */ 0b0000000010000000100;
+export const Visibility = /*                   */ 0b0000000100000000000;
 
 // Passive & Update & Callback & Ref & Snapshot
-export const LifecycleEffectMask = /*          */ 0b000000001110100100;
+export const LifecycleEffectMask = /*          */ 0b0000000001110100100;
 
 // Union of all host effects
-export const HostEffectMask = /*               */ 0b000000011111111111;
+export const HostEffectMask = /*               */ 0b0000000111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b000000100000000000;
-export const ShouldCapture = /*                */ 0b000001000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b000100000000000000;
+export const Incomplete = /*                   */ 0b0000001000000000000;
+export const ShouldCapture = /*                */ 0b0000010000000000000;
+// TODO (effects) Remove this bit once the new reconciler is synced to the old.
+export const PassiveUnmountPendingDev = /*     */ 0b0000100000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b0001000000000000000;
 
 // 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 PassiveStatic = /*                */ 0b001000000000000000;
+export const PassiveStatic = /*                */ 0b0010000000000000000;
 
 // Union of side effect groupings as pertains to subtreeFlags
-// TODO: Don't need to visit Placement during BeforeMutation phase
-// TODO: Only need to visit Deletions during BeforeMutation phase if an element
-// is focused.
-export const BeforeMutationMask = /*           */ 0b000000000100001010;
-export const MutationMask = /*                 */ 0b000000010010011110;
-export const LayoutMask = /*                   */ 0b000000000010100100;
-export const PassiveMask = /*                  */ 0b000000001000001000;
+
+export const BeforeMutationMask =
+  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.
+      Deletion | Visibility
+    : 0);
+
+export const MutationMask = /*                 */ 0b0000000110010011110;
+export const LayoutMask = /*                   */ 0b0000000000010100100;
+export const PassiveMask = /*                  */ 0b0000000001000001000;
 
 // Union of tags that don't get reset on clones.
 // This allows certain concepts to persist without recalculting them,
 // e.g. whether a subtree contains passive effects or portals.
-export const StaticMask = /*                   */ 0b001000000000000000;
+export const StaticMask = /*                   */ 0b0010000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b010000000000000000;
-export const MountPassiveDev = /*              */ 0b100000000000000000;
+export const MountLayoutDev = /*               */ 0b0100000000000000000;
+export const MountPassiveDev = /*              */ 0b1000000000000000000;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7eaf02ad4e3e..33d8398fad5f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -134,6 +134,7 @@ import {
   HostEffectMask,
   Hydrating,
   HydratingAndUpdate,
+  Visibility,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
@@ -2155,8 +2156,10 @@ function commitBeforeMutationEffectsImpl(fiber: Fiber) {
 
   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.
     if (
+      // TODO: Can optimize this further with separate Hide and Show flags. We
+      // only care about Hide here.
+      (flags & Visibility) !== NoFlags &&
       fiber.tag === SuspenseComponent &&
       isSuspenseBoundaryBeingHidden(current, fiber) &&
       doesFiberContain(fiber, focusedInstanceHandle)

From 37cb732c59863297e48f69ac1f6e2ba1aa1886f0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 16 Oct 2020 15:30:35 -0500
Subject: [PATCH 0026/1603] Use bitwise OR to define flag masks (#20044)

Easier to read, harder to mess up. These expressions get simplified by
Closure, so there's no runtime impact.
---
 .../react-reconciler/src/ReactFiberFlags.js   | 29 ++++++++++---------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 4340131c0004..da8255c6e8d1 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -30,10 +30,9 @@ export const Hydrating = /*                    */ 0b0000000010000000000;
 export const HydratingAndUpdate = /*           */ 0b0000000010000000100;
 export const Visibility = /*                   */ 0b0000000100000000000;
 
-// Passive & Update & Callback & Ref & Snapshot
-export const LifecycleEffectMask = /*          */ 0b0000000001110100100;
+export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
 
-// Union of all host effects
+// Union of all commit flags (flags with the lifetime of a particular commit)
 export const HostEffectMask = /*               */ 0b0000000111111111111;
 
 // These are not really side effects, but we still reuse this field.
@@ -50,7 +49,14 @@ export const ForceUpdateForLegacySuspense = /* */ 0b0001000000000000000;
 // and instead rely on the static flag as a signal that there may be cleanup work.
 export const PassiveStatic = /*                */ 0b0010000000000000000;
 
-// Union of side effect groupings as pertains to subtreeFlags
+// These flags allow us to traverse to fibers that have effects on mount
+// without traversing the entire tree after every commit for
+// double invoking
+export const MountLayoutDev = /*               */ 0b0100000000000000000;
+export const MountPassiveDev = /*              */ 0b1000000000000000000;
+
+// 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 =
   Snapshot |
@@ -62,17 +68,12 @@ export const BeforeMutationMask =
       Deletion | Visibility
     : 0);
 
-export const MutationMask = /*                 */ 0b0000000110010011110;
-export const LayoutMask = /*                   */ 0b0000000000010100100;
-export const PassiveMask = /*                  */ 0b0000000001000001000;
+export const MutationMask =
+  Placement | Update | Deletion | ContentReset | Ref | Hydrating | Visibility;
+export const LayoutMask = Update | Callback | Ref;
+export const PassiveMask = Passive | Deletion;
 
 // Union of tags that don't get reset on clones.
 // This allows certain concepts to persist without recalculting them,
 // e.g. whether a subtree contains passive effects or portals.
-export const StaticMask = /*                   */ 0b0010000000000000000;
-
-// These flags allow us to traverse to fibers that have effects on mount
-// without traversing the entire tree after every commit for
-// double invoking
-export const MountLayoutDev = /*               */ 0b0100000000000000000;
-export const MountPassiveDev = /*              */ 0b1000000000000000000;
+export const StaticMask = PassiveStatic;

From dfb6a403357d5ac2c0ea87aa6e5a4f947de342f8 Mon Sep 17 00:00:00 2001
From: Kai Riemann <53490304+kri@users.noreply.github.com>
Date: Sat, 17 Oct 2020 18:47:52 +0200
Subject: [PATCH 0027/1603] [Fast Refresh] Fix crashes caused by rogue Proxies
 (#20030) (#20039)

---
 .../react-refresh/src/ReactFreshRuntime.js    | 14 +++++++++++--
 .../src/__tests__/ReactFresh-test.js          | 21 +++++++++++++++++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index e6f0fb70ae5c..cd5d5a6716bf 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -178,6 +178,16 @@ function cloneSet<T>(set: Set<T>): Set<T> {
   return clone;
 }
 
+// This is a safety mechanism to protect against rogue getters and Proxies.
+function getProperty(object, property) {
+  try {
+    return object[property];
+  } catch (err) {
+    // Intentionally ignore.
+    return undefined;
+  }
+}
+
 export function performReactRefresh(): RefreshUpdate | null {
   if (!__DEV__) {
     throw new Error(
@@ -322,7 +332,7 @@ export function register(type: any, id: string): void {
 
     // Visit inner types because we might not have registered them.
     if (typeof type === 'object' && type !== null) {
-      switch (type.$$typeof) {
+      switch (getProperty(type, '$$typeof')) {
         case REACT_FORWARD_REF_TYPE:
           register(type.render, id + '$render');
           break;
@@ -676,7 +686,7 @@ export function isLikelyComponentType(type: any): boolean {
       }
       case 'object': {
         if (type != null) {
-          switch (type.$$typeof) {
+          switch (getProperty(type, '$$typeof')) {
             case REACT_FORWARD_REF_TYPE:
             case REACT_MEMO_TYPE:
               // Definitely React components.
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 3b6f69b13e31..da73032520c6 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -3612,11 +3612,26 @@ describe('ReactFresh', () => {
       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);
@@ -3624,8 +3639,14 @@ describe('ReactFresh', () => {
       // 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() {}}),

From 7b6cac95229be79f4f7504f2ccd87d2a0a0f87e2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Oct 2020 09:36:00 -0400
Subject: [PATCH 0028/1603] Improved Profiler commit hooks test (#20053)

Previously the tests didn't ensure that time spent during cascading render was not included in duration reported by commit hooks.
---
 .../src/__tests__/ReactProfiler-test.internal.js  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 05d73235b1b3..180eb81b964b 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -1400,6 +1400,7 @@ describe('Profiler', () => {
 
         const ComponentWithEffects = ({shouldCascade}) => {
           const [didCascade, setDidCascade] = React.useState(false);
+          Scheduler.unstable_advanceTime(100000000);
           React.useLayoutEffect(() => {
             if (shouldCascade && !didCascade) {
               setDidCascade(true);
@@ -1426,6 +1427,7 @@ describe('Profiler', () => {
             }
           }
           render() {
+            Scheduler.unstable_advanceTime(1000000000);
             return null;
           }
         }
@@ -1447,7 +1449,7 @@ describe('Profiler', () => {
         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)
+        expect(call[3]).toBe(1100000001); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
 
         call = callback.mock.calls[1];
@@ -1456,7 +1458,7 @@ describe('Profiler', () => {
         expect(call[0]).toBe('mount-test');
         expect(call[1]).toBe('update');
         expect(call[2]).toBe(130); // durations
-        expect(call[3]).toBe(1011); // commit start time (before mutations or effects)
+        expect(call[3]).toBe(1200001011); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
 
         Scheduler.unstable_advanceTime(1);
@@ -1476,7 +1478,7 @@ describe('Profiler', () => {
         expect(call[0]).toBe('update-test');
         expect(call[1]).toBe('update');
         expect(call[2]).toBe(10130); // durations
-        expect(call[3]).toBe(1142); // commit start time (before mutations or effects)
+        expect(call[3]).toBe(2300001142); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
 
         call = callback.mock.calls[3];
@@ -1485,7 +1487,7 @@ describe('Profiler', () => {
         expect(call[0]).toBe('update-test');
         expect(call[1]).toBe('update');
         expect(call[2]).toBe(10000); // durations
-        expect(call[3]).toBe(11272); // commit start time (before mutations or effects)
+        expect(call[3]).toBe(3300011272); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
       });
 
@@ -1966,6 +1968,7 @@ describe('Profiler', () => {
 
         const ComponentWithEffects = () => {
           const [didMount, setDidMount] = React.useState(false);
+          Scheduler.unstable_advanceTime(1000);
           React.useEffect(() => {
             if (!didMount) {
               setDidMount(true);
@@ -1996,7 +1999,7 @@ describe('Profiler', () => {
         expect(call[0]).toBe('mount-test');
         expect(call[1]).toBe('mount');
         expect(call[2]).toBe(10); // durations
-        expect(call[3]).toBe(1); // commit start time (before mutations or effects)
+        expect(call[3]).toBe(1001); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
 
         call = callback.mock.calls[1];
@@ -2005,7 +2008,7 @@ describe('Profiler', () => {
         expect(call[0]).toBe('mount-test');
         expect(call[1]).toBe('update');
         expect(call[2]).toBe(130); // durations
-        expect(call[3]).toBe(11); // commit start time (before mutations or effects)
+        expect(call[3]).toBe(2011); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
       });
 

From 51a3aa6afbfd9f239f3a435ff12a2da5870ab925 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Oct 2020 11:20:54 -0400
Subject: [PATCH 0029/1603] DevTools 4.8.2 -> 4.9.0 bump

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 +-
 .../edge/manifest.json                        |  4 +-
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 packages/react-devtools/CHANGELOG.md          | 44 +++++++++++++++++++
 packages/react-devtools/package.json          |  4 +-
 7 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 9a802f907d7c..a63724d4cfcc 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.8.2",
+  "version": "4.9.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 60fd566a5ebd..c1e7cf3c0c12 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.8.2",
-  "version_name": "4.8.2",
+  "version": "4.9.0",
+  "version_name": "4.9.0",
 
   "minimum_chrome_version": "49",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 3fbb2900bd64..9c168a430e5b 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.8.2",
-  "version_name": "4.8.2",
+  "version": "4.9.0",
+  "version_name": "4.9.0",
 
   "minimum_chrome_version": "49",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index ebe8547f10f5..d8c79b1aa647 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.8.2",
+  "version": "4.9.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 62f6fe1cba2f..b1f702b1354c 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.8.2",
+  "version": "4.9.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 9df1bd1bef48..f686c4a6d2c6 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,50 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index de46d6dce0a8..460e5f21340e 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.8.2",
+  "version": "4.9.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^9.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.8.2",
+    "react-devtools-core": "4.9.0",
     "update-notifier": "^2.1.0"
   }
 }

From 75726fadfd4ab063390805bf5baab966c8523d2c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Oct 2020 15:21:41 -0400
Subject: [PATCH 0030/1603] DevTools fix props editing for host components
 (#20055)

---
 .../src/__tests__/editing-test.js             | 27 +++++++++++++++++++
 .../src/backend/renderer.js                   | 25 ++++++++++-------
 2 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/editing-test.js b/packages/react-devtools-shared/src/__tests__/editing-test.js
index 156e4b1f391e..1a57927f5102 100644
--- a/packages/react-devtools-shared/src/__tests__/editing-test.js
+++ b/packages/react-devtools-shared/src/__tests__/editing-test.js
@@ -28,6 +28,7 @@ describe('editing interface', () => {
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
+    store.componentFilters = [];
 
     PropTypes = require('prop-types');
     React = require('react');
@@ -37,8 +38,10 @@ describe('editing interface', () => {
   describe('props', () => {
     let committedClassProps;
     let committedFunctionProps;
+    let inputRef;
     let classID;
     let functionID;
+    let hostComponentID;
 
     async function mountTestApp() {
       class ClassComponent extends React.Component {
@@ -60,6 +63,8 @@ describe('editing interface', () => {
         return null;
       }
 
+      inputRef = React.createRef(null);
+
       const container = document.createElement('div');
       await utils.actAsync(() =>
         ReactDOM.render(
@@ -76,6 +81,7 @@ describe('editing interface', () => {
               shallow="initial"
             />
             ,
+            <input ref={inputRef} onChange={jest.fn()} value="initial" />
           </>,
           container,
         ),
@@ -83,6 +89,7 @@ describe('editing interface', () => {
 
       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],
@@ -98,6 +105,7 @@ describe('editing interface', () => {
         },
         shallow: 'initial',
       });
+      expect(inputRef.current.value).toBe('initial');
     }
 
     it('should have editable values', async () => {
@@ -380,6 +388,25 @@ describe('editing interface', () => {
         object: {},
       });
     });
+
+    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', () => {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 23deda7dde25..208615bcccbb 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2888,18 +2888,25 @@ export function attach(
           }
           break;
         case 'props':
-          if (instance === null) {
-            if (typeof overrideProps === 'function') {
-              overrideProps(fiber, path, value);
-            }
-          } else {
-            fiber.pendingProps = copyWithSet(instance.props, path, value);
-            instance.forceUpdate();
+          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':
-          setInObject(instance.state, path, value);
-          instance.forceUpdate();
+          switch (fiber.tag) {
+            case ClassComponent:
+              setInObject(instance.state, path, value);
+              instance.forceUpdate();
+              break;
+          }
           break;
       }
     }

From c59c3dfe554dafb64864f3bbcfff6ffe51f32275 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Oct 2020 16:05:00 -0400
Subject: [PATCH 0031/1603] useRef: Warn about reading or writing mutable
 values during render (#18545)

Reading or writing a ref value during render is only safe if you are implementing the lazy initialization pattern.

Other types of reading are unsafe as the ref is a mutable source.

Other types of writing are unsafe as they are effectively side effects.

This change also refactors useTransition to no longer use a ref hook, but instead manage its own (stable) hook state.
---
 .../ReactDOMServerIntegrationHooks-test.js    |  18 +-
 .../src/ReactFiberHooks.new.js                | 103 ++++-
 .../src/ReactFiberHooks.old.js                | 103 ++++-
 .../ReactHooksWithNoopRenderer-test.js        |  89 +----
 .../src/__tests__/useRef-test.internal.js     | 364 ++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 15 files changed, 567 insertions(+), 121 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/useRef-test.internal.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index 6cb57a8560b7..397b739546dc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -474,12 +474,12 @@ describe('ReactDOMServerHooks', () => {
   describe('useRef', () => {
     itRenders('basic render', async render => {
       function Counter(props) {
-        const count = useRef(0);
-        return <span>Count: {count.current}</span>;
+        const ref = useRef();
+        return <span ref={ref}>Hi</span>;
       }
 
       const domNode = await render(<Counter />);
-      expect(domNode.textContent).toEqual('Count: 0');
+      expect(domNode.textContent).toEqual('Hi');
     });
 
     itRenders(
@@ -487,18 +487,16 @@ describe('ReactDOMServerHooks', () => {
       async render => {
         function Counter(props) {
           const [count, setCount] = useState(0);
-          const ref = useRef(count);
+          const ref = useRef();
 
           if (count < 3) {
             const newCount = count + 1;
-
-            ref.current = newCount;
             setCount(newCount);
           }
 
           yieldValue(count);
 
-          return <span>Count: {ref.current}</span>;
+          return <span ref={ref}>Count: {count}</span>;
         }
 
         const domNode = await render(<Counter />);
@@ -513,7 +511,7 @@ describe('ReactDOMServerHooks', () => {
         let firstRef = null;
         function Counter(props) {
           const [count, setCount] = useState(0);
-          const ref = useRef(count);
+          const ref = useRef();
           if (firstRef === null) {
             firstRef = ref;
           } else if (firstRef !== ref) {
@@ -528,12 +526,12 @@ describe('ReactDOMServerHooks', () => {
 
           yieldValue(count);
 
-          return <span>Count: {ref.current}</span>;
+          return <span ref={ref}>Count: {count}</span>;
         }
 
         const domNode = await render(<Counter />);
         expect(clearYields()).toEqual([0, 1, 2, 3]);
-        expect(domNode.textContent).toEqual('Count: 0');
+        expect(domNode.textContent).toEqual('Count: 3');
       },
     );
   });
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index bdd0bed4c759..231b33e69bcf 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -27,6 +27,7 @@ import {
   enableNewReconciler,
   decoupleUpdatePriorityFromScheduler,
   enableDoubleInvokingEffects,
+  enableUseRefAccessWarning,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -1197,14 +1198,92 @@ function pushEffect(tag, create, destroy, deps) {
   return effect;
 }
 
+let stackContainsErrorMessage: boolean | null = null;
+
+function getCallerStackFrame(): string {
+  const stackFrames = new Error('Error message').stack.split('\n');
+
+  // Some browsers (e.g. Chrome) include the error message in the stack
+  // but others (e.g. Firefox) do not.
+  if (stackContainsErrorMessage === null) {
+    stackContainsErrorMessage = stackFrames[0].includes('Error message');
+  }
+
+  return stackContainsErrorMessage
+    ? stackFrames.slice(3, 4).join('\n')
+    : stackFrames.slice(2, 3).join('\n');
+}
+
 function mountRef<T>(initialValue: T): {|current: T|} {
   const hook = mountWorkInProgressHook();
-  const ref = {current: initialValue};
-  if (__DEV__) {
-    Object.seal(ref);
+  if (enableUseRefAccessWarning) {
+    if (__DEV__) {
+      // Support lazy initialization pattern shown in docs.
+      // We need to store the caller stack frame so that we don't warn on subsequent renders.
+      let hasBeenInitialized = initialValue != null;
+      let lazyInitGetterStack = null;
+      let didCheckForLazyInit = false;
+
+      // Only warn once per component+hook.
+      let didWarnAboutRead = false;
+      let didWarnAboutWrite = false;
+
+      let current = initialValue;
+      const ref = {
+        get current() {
+          if (!hasBeenInitialized) {
+            didCheckForLazyInit = true;
+            lazyInitGetterStack = getCallerStackFrame();
+          } else if (currentlyRenderingFiber !== null && !didWarnAboutRead) {
+            if (
+              lazyInitGetterStack === null ||
+              lazyInitGetterStack !== getCallerStackFrame()
+            ) {
+              didWarnAboutRead = true;
+              console.warn(
+                '%s: Unsafe read of a mutable value during render.\n\n' +
+                  'Reading from a ref during render is only safe if:\n' +
+                  '1. The ref value has not been updated, or\n' +
+                  '2. The ref holds a lazily-initialized value that is only set once.\n',
+                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+              );
+            }
+          }
+          return current;
+        },
+        set current(value) {
+          if (currentlyRenderingFiber !== null && !didWarnAboutWrite) {
+            if (
+              hasBeenInitialized ||
+              (!hasBeenInitialized && !didCheckForLazyInit)
+            ) {
+              didWarnAboutWrite = true;
+              console.warn(
+                '%s: Unsafe write of a mutable value during render.\n\n' +
+                  'Writing to a ref during render is only safe if the ref holds ' +
+                  'a lazily-initialized value that is only set once.\n',
+                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+              );
+            }
+          }
+
+          hasBeenInitialized = true;
+          current = value;
+        },
+      };
+      Object.seal(ref);
+      hook.memoizedState = ref;
+      return ref;
+    } else {
+      const ref = {current: initialValue};
+      hook.memoizedState = ref;
+      return ref;
+    }
+  } else {
+    const ref = {current: initialValue};
+    hook.memoizedState = ref;
+    return ref;
   }
-  hook.memoizedState = ref;
-  return ref;
 }
 
 function updateRef<T>(initialValue: T): {|current: T|} {
@@ -1591,24 +1670,24 @@ function startTransition(setPending, callback) {
 
 function mountTransition(): [(() => void) => void, boolean] {
   const [isPending, setPending] = mountState(false);
-  // The `start` method can be stored on a ref, since `setPending`
-  // never changes.
+  // The `start` method never changes.
   const start = startTransition.bind(null, setPending);
-  mountRef(start);
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = start;
   return [start, isPending];
 }
 
 function updateTransition(): [(() => void) => void, boolean] {
   const [isPending] = updateState(false);
-  const startRef = updateRef();
-  const start: (() => void) => void = (startRef.current: any);
+  const hook = updateWorkInProgressHook();
+  const start = hook.memoizedState;
   return [start, isPending];
 }
 
 function rerenderTransition(): [(() => void) => void, boolean] {
   const [isPending] = rerenderState(false);
-  const startRef = updateRef();
-  const start: (() => void) => void = (startRef.current: any);
+  const hook = updateWorkInProgressHook();
+  const start = hook.memoizedState;
   return [start, isPending];
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 972a74640278..ccd69abae6aa 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -26,6 +26,7 @@ import {
   enableSchedulingProfiler,
   enableNewReconciler,
   decoupleUpdatePriorityFromScheduler,
+  enableUseRefAccessWarning,
 } from 'shared/ReactFeatureFlags';
 
 import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
@@ -1175,14 +1176,92 @@ function pushEffect(tag, create, destroy, deps) {
   return effect;
 }
 
+let stackContainsErrorMessage: boolean | null = null;
+
+function getCallerStackFrame(): string {
+  const stackFrames = new Error('Error message').stack.split('\n');
+
+  // Some browsers (e.g. Chrome) include the error message in the stack
+  // but others (e.g. Firefox) do not.
+  if (stackContainsErrorMessage === null) {
+    stackContainsErrorMessage = stackFrames[0].includes('Error message');
+  }
+
+  return stackContainsErrorMessage
+    ? stackFrames.slice(3, 4).join('\n')
+    : stackFrames.slice(2, 3).join('\n');
+}
+
 function mountRef<T>(initialValue: T): {|current: T|} {
   const hook = mountWorkInProgressHook();
-  const ref = {current: initialValue};
-  if (__DEV__) {
-    Object.seal(ref);
+  if (enableUseRefAccessWarning) {
+    if (__DEV__) {
+      // Support lazy initialization pattern shown in docs.
+      // We need to store the caller stack frame so that we don't warn on subsequent renders.
+      let hasBeenInitialized = initialValue != null;
+      let lazyInitGetterStack = null;
+      let didCheckForLazyInit = false;
+
+      // Only warn once per component+hook.
+      let didWarnAboutRead = false;
+      let didWarnAboutWrite = false;
+
+      let current = initialValue;
+      const ref = {
+        get current() {
+          if (!hasBeenInitialized) {
+            didCheckForLazyInit = true;
+            lazyInitGetterStack = getCallerStackFrame();
+          } else if (currentlyRenderingFiber !== null && !didWarnAboutRead) {
+            if (
+              lazyInitGetterStack === null ||
+              lazyInitGetterStack !== getCallerStackFrame()
+            ) {
+              didWarnAboutRead = true;
+              console.warn(
+                '%s: Unsafe read of a mutable value during render.\n\n' +
+                  'Reading from a ref during render is only safe if:\n' +
+                  '1. The ref value has not been updated, or\n' +
+                  '2. The ref holds a lazily-initialized value that is only set once.\n',
+                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+              );
+            }
+          }
+          return current;
+        },
+        set current(value) {
+          if (currentlyRenderingFiber !== null && !didWarnAboutWrite) {
+            if (
+              hasBeenInitialized ||
+              (!hasBeenInitialized && !didCheckForLazyInit)
+            ) {
+              didWarnAboutWrite = true;
+              console.warn(
+                '%s: Unsafe write of a mutable value during render.\n\n' +
+                  'Writing to a ref during render is only safe if the ref holds ' +
+                  'a lazily-initialized value that is only set once.\n',
+                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+              );
+            }
+          }
+
+          hasBeenInitialized = true;
+          current = value;
+        },
+      };
+      Object.seal(ref);
+      hook.memoizedState = ref;
+      return ref;
+    } else {
+      const ref = {current: initialValue};
+      hook.memoizedState = ref;
+      return ref;
+    }
+  } else {
+    const ref = {current: initialValue};
+    hook.memoizedState = ref;
+    return ref;
   }
-  hook.memoizedState = ref;
-  return ref;
 }
 
 function updateRef<T>(initialValue: T): {|current: T|} {
@@ -1534,24 +1613,24 @@ function startTransition(setPending, callback) {
 
 function mountTransition(): [(() => void) => void, boolean] {
   const [isPending, setPending] = mountState(false);
-  // The `start` method can be stored on a ref, since `setPending`
-  // never changes.
+  // The `start` method never changes.
   const start = startTransition.bind(null, setPending);
-  mountRef(start);
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = start;
   return [start, isPending];
 }
 
 function updateTransition(): [(() => void) => void, boolean] {
   const [isPending] = updateState(false);
-  const startRef = updateRef();
-  const start: (() => void) => void = (startRef.current: any);
+  const hook = updateWorkInProgressHook();
+  const start = hook.memoizedState;
   return [start, isPending];
 }
 
 function rerenderTransition(): [(() => void) => void, boolean] {
   const [isPending] = rerenderState(false);
-  const startRef = updateRef();
-  const start: (() => void) => void = (startRef.current: any);
+  const hook = updateWorkInProgressHook();
+  const start = hook.memoizedState;
   return [start, isPending];
 }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 333e8930e734..79794bbea7ff 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1536,7 +1536,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     it('does not show a warning when a component updates a childs state from within passive unmount function', () => {
       function Parent() {
         Scheduler.unstable_yieldValue('Parent');
-        const updaterRef = React.useRef(null);
+        const updaterRef = useRef(null);
         React.useEffect(() => {
           Scheduler.unstable_yieldValue('Parent passive create');
           return () => {
@@ -2612,7 +2612,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       // @gate new
-      it('should skip unmounted boundaries and use the nearest still-mounted boundary', () => {
+      it('should skip unmounted boundaries and use the nearest still-mounted boundary', () => {
         function Conditional({showChildren}) {
           if (showChildren) {
             return (
@@ -3202,91 +3202,6 @@ describe('ReactHooksWithNoopRenderer', () => {
     });
   });
 
-  describe('useRef', () => {
-    it('creates a ref object initialized with the provided value', () => {
-      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.unstable_yieldValue('ping: ' + value);
-          },
-          100,
-          [],
-        );
-        return null;
-      }
-
-      act(() => {
-        ReactNoop.render(<App />);
-      });
-      expect(Scheduler).toHaveYielded([]);
-
-      ping(1);
-      ping(2);
-      ping(3);
-
-      expect(Scheduler).toHaveYielded([]);
-
-      jest.advanceTimersByTime(100);
-
-      expect(Scheduler).toHaveYielded(['ping: 3']);
-
-      ping(4);
-      jest.advanceTimersByTime(20);
-      ping(5);
-      ping(6);
-      jest.advanceTimersByTime(80);
-
-      expect(Scheduler).toHaveYielded([]);
-
-      jest.advanceTimersByTime(20);
-      expect(Scheduler).toHaveYielded(['ping: 6']);
-    });
-
-    it('should return the same ref during re-renders', () => {
-      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={ref.current} />;
-      }
-
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield(['val']);
-
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield(['val']);
-    });
-  });
-
   describe('useImperativeHandle', () => {
     it('does not update when deps are the same', () => {
       const INCREMENT = 'INCREMENT';
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 000000000000..ccfc6d0d4b2a
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useRef-test.internal.js
@@ -0,0 +1,364 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-func-assign */
+
+'use strict';
+
+describe('useRef', () => {
+  let React;
+  let ReactNoop;
+  let Scheduler;
+  let act;
+  let useCallback;
+  let useEffect;
+  let useLayoutEffect;
+  let useRef;
+  let useState;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+
+    act = ReactNoop.act;
+    useCallback = React.useCallback;
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+    useRef = React.useRef;
+    useState = React.useState;
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return <span prop={props.text} />;
+  }
+
+  it('creates a ref object initialized with the provided value', () => {
+    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.unstable_yieldValue('ping: ' + value);
+        },
+        100,
+        [],
+      );
+      return null;
+    }
+
+    act(() => {
+      ReactNoop.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([]);
+
+    ping(1);
+    ping(2);
+    ping(3);
+
+    expect(Scheduler).toHaveYielded([]);
+
+    jest.advanceTimersByTime(100);
+
+    expect(Scheduler).toHaveYielded(['ping: 3']);
+
+    ping(4);
+    jest.advanceTimersByTime(20);
+    ping(5);
+    ping(6);
+    jest.advanceTimersByTime(80);
+
+    expect(Scheduler).toHaveYielded([]);
+
+    jest.advanceTimersByTime(20);
+    expect(Scheduler).toHaveYielded(['ping: 6']);
+  });
+
+  it('should return the same ref during re-renders', () => {
+    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 />);
+    expect(Scheduler).toFlushAndYield([3]);
+
+    ReactNoop.render(<Counter />);
+    expect(Scheduler).toFlushAndYield([3]);
+  });
+
+  if (__DEV__) {
+    it('should never warn when attaching to children', () => {
+      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} />
+          </>
+        );
+      }
+
+      act(() => {
+        ReactNoop.render(<Example phase="mount" />);
+      });
+      act(() => {
+        ReactNoop.render(<Example phase="update" />);
+      });
+    });
+
+    // @gate enableUseRefAccessWarning
+    it('should warn about reads during render', () => {
+      function Example() {
+        const ref = useRef(123);
+        let value;
+        expect(() => {
+          value = ref.current;
+        }).toWarnDev([
+          'Example: Unsafe read of a mutable value during render.',
+        ]);
+        return value;
+      }
+
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    it('should not warn about lazy init during render', () => {
+      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;
+      }
+
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+
+      // Should not warn after an update either.
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    it('should not warn about lazy init outside of render', () => {
+      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;
+      }
+
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    // @gate enableUseRefAccessWarning
+    it('should warn about unconditional lazy init during render', () => {
+      function Example() {
+        const ref1 = useRef(null);
+        const ref2 = useRef(undefined);
+
+        if (shouldExpectWarning) {
+          expect(() => {
+            ref1.current = 123;
+          }).toWarnDev([
+            'Example: Unsafe write of a mutable value during render',
+          ]);
+          expect(() => {
+            ref2.current = 123;
+          }).toWarnDev([
+            'Example: Unsafe write of a mutable value during render',
+          ]);
+        } else {
+          ref1.current = 123;
+          ref1.current = 123;
+        }
+
+        // But only warn once
+        ref1.current = 345;
+        ref1.current = 345;
+
+        return null;
+      }
+
+      let shouldExpectWarning = true;
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+
+      // Should not warn again on update.
+      shouldExpectWarning = false;
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    // @gate enableUseRefAccessWarning
+    it('should warn about reads to ref after lazy init pattern', () => {
+      function Example() {
+        const ref1 = useRef(null);
+        const ref2 = useRef(undefined);
+
+        // Read 1: safe because lazy init:
+        if (ref1.current === null) {
+          ref1.current = 123;
+        }
+        if (ref2.current === undefined) {
+          ref2.current = 123;
+        }
+
+        let value;
+        expect(() => {
+          value = ref1.current;
+        }).toWarnDev(['Example: Unsafe read of a mutable value during render']);
+        expect(() => {
+          value = ref2.current;
+        }).toWarnDev(['Example: Unsafe read of a mutable value during render']);
+
+        // But it should only warn once.
+        value = ref1.current;
+        value = ref2.current;
+
+        return value;
+      }
+
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    // @gate enableUseRefAccessWarning
+    it('should warn about writes to ref after lazy init pattern', () => {
+      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;
+        }
+
+        expect(() => {
+          ref1.current = 456;
+        }).toWarnDev([
+          'Example: Unsafe write of a mutable value during render',
+        ]);
+        expect(() => {
+          ref2.current = 456;
+        }).toWarnDev([
+          'Example: Unsafe write of a mutable value during render',
+        ]);
+
+        return null;
+      }
+
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+    });
+
+    it('should not warn about reads or writes within effect', () => {
+      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;
+      }
+
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+
+      ReactNoop.flushPassiveEffects();
+    });
+
+    it('should not warn about reads or writes outside of render phase (e.g. event handler)', () => {
+      let ref;
+      function Example() {
+        ref = useRef(123);
+        return null;
+      }
+
+      act(() => {
+        ReactNoop.render(<Example />);
+      });
+
+      expect(ref.current).toBe(123);
+      ref.current = 456;
+      expect(ref.current).toBe(456);
+    });
+  }
+});
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 836b78524ef9..dbf9f5bd2853 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -134,3 +134,5 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableDoubleInvokingEffects = false;
+
+export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 82e8d4dcd7ba..0df33470e570 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -51,6 +51,7 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 7a793d16ab33..77148d9be29b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -50,6 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 4402523c5410..7e66eb9e75e5 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -50,6 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index a71ad45dbd46..90c4360c6d46 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -50,6 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index c60072346eab..4dbd671409e3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -50,6 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 90c1fa268b25..c98063376f09 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -50,6 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 717199df1d53..362569dfb01b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -50,6 +50,7 @@ export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = true;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 103e8adc5c72..d03ba3eadd41 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -48,3 +48,4 @@ export const enableTrustedTypesIntegration = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 
 export const enableDoubleInvokingEffects = false;
+export const enableUseRefAccessWarning = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 58d6987495f9..f5861a2e336a 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -28,6 +28,7 @@ export const {
   enableDebugTracing,
   skipUnmountedBoundaries,
   enableDoubleInvokingEffects,
+  enableUseRefAccessWarning,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From d1bb4d851f4956cb64ad0ae1867153c23409f971 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 20 Oct 2020 14:35:57 -0400
Subject: [PATCH 0032/1603] Profiler: Include ref callbacks in onCommit
 duration (#20060)

---
 .../src/ReactFiberCommitWork.new.js           | 58 +++++++++++++++++--
 .../src/ReactFiberCommitWork.old.js           | 58 +++++++++++++++++--
 .../__tests__/ReactProfiler-test.internal.js  | 55 ++++++++++++++++++
 3 files changed, 163 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 687e62de976c..3664803f2043 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -194,14 +194,38 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber) {
   if (ref !== null) {
     if (typeof ref === 'function') {
       if (__DEV__) {
-        invokeGuardedCallback(null, ref, null, null);
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          current.mode & ProfileMode
+        ) {
+          startLayoutEffectTimer();
+          invokeGuardedCallback(null, ref, null, null);
+          recordLayoutEffectDuration(current);
+        } else {
+          invokeGuardedCallback(null, ref, null, null);
+        }
+
         if (hasCaughtError()) {
           const refError = clearCaughtError();
           captureCommitPhaseError(current, nearestMountedAncestor, refError);
         }
       } else {
         try {
-          ref(null);
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            current.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
+              ref(null);
+            } finally {
+              recordLayoutEffectDuration(current);
+            }
+          } else {
+            ref(null);
+          }
         } catch (refError) {
           captureCommitPhaseError(current, nearestMountedAncestor, refError);
         }
@@ -965,7 +989,20 @@ function commitAttachRef(finishedWork: Fiber) {
       instanceToUse = instance;
     }
     if (typeof ref === 'function') {
-      ref(instanceToUse);
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          ref(instanceToUse);
+        } finally {
+          recordLayoutEffectDuration(finishedWork);
+        }
+      } else {
+        ref(instanceToUse);
+      }
     } else {
       if (__DEV__) {
         if (!ref.hasOwnProperty('current')) {
@@ -986,7 +1023,20 @@ function commitDetachRef(current: Fiber) {
   const currentRef = current.ref;
   if (currentRef !== null) {
     if (typeof currentRef === 'function') {
-      currentRef(null);
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        current.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          currentRef(null);
+        } finally {
+          recordLayoutEffectDuration(current);
+        }
+      } else {
+        currentRef(null);
+      }
     } else {
       currentRef.current = null;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index e094e5bd9b5a..84ff06fe7f99 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -180,14 +180,38 @@ function safelyDetachRef(current: Fiber) {
   if (ref !== null) {
     if (typeof ref === 'function') {
       if (__DEV__) {
-        invokeGuardedCallback(null, ref, null, null);
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          current.mode & ProfileMode
+        ) {
+          startLayoutEffectTimer();
+          invokeGuardedCallback(null, ref, null, null);
+          recordLayoutEffectDuration(current);
+        } else {
+          invokeGuardedCallback(null, ref, null, null);
+        }
+
         if (hasCaughtError()) {
           const refError = clearCaughtError();
           captureCommitPhaseError(current, refError);
         }
       } else {
         try {
-          ref(null);
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            current.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
+              ref(null);
+            } finally {
+              recordLayoutEffectDuration(current);
+            }
+          } else {
+            ref(null);
+          }
         } catch (refError) {
           captureCommitPhaseError(current, refError);
         }
@@ -832,7 +856,20 @@ function commitAttachRef(finishedWork: Fiber) {
       instanceToUse = instance;
     }
     if (typeof ref === 'function') {
-      ref(instanceToUse);
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          ref(instanceToUse);
+        } finally {
+          recordLayoutEffectDuration(finishedWork);
+        }
+      } else {
+        ref(instanceToUse);
+      }
     } else {
       if (__DEV__) {
         if (!ref.hasOwnProperty('current')) {
@@ -853,7 +890,20 @@ function commitDetachRef(current: Fiber) {
   const currentRef = current.ref;
   if (currentRef !== null) {
     if (typeof currentRef === 'function') {
-      currentRef(null);
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        current.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          currentRef(null);
+        } finally {
+          recordLayoutEffectDuration(current);
+        }
+      } else {
+        currentRef(null);
+      }
     } else {
       currentRef.current = null;
     }
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 180eb81b964b..73812de49a3b 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -1491,6 +1491,61 @@ describe('Profiler', () => {
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
       });
 
+      it('should include time spent in ref callbacks', () => {
+        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 renderer = ReactTestRenderer.create(
+          <React.Profiler id="root" onCommit={callback}>
+            <Component />
+          </React.Profiler>,
+        );
+
+        expect(callback).toHaveBeenCalledTimes(1);
+
+        let call = callback.mock.calls[0];
+
+        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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();
+
+        renderer.update(<React.Profiler id="root" onCommit={callback} />);
+
+        expect(callback).toHaveBeenCalledTimes(1);
+
+        call = callback.mock.calls[0];
+
+        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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', () => {
         const callback = jest.fn();
 

From 46ed2684718d160b06cf6e4f5f5ecf70c7b8974c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 20 Oct 2020 21:22:00 +0100
Subject: [PATCH 0033/1603] Add React 17 changelog

---
 CHANGELOG.md | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa0dedf6714d..cb0704775977 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,88 @@
+## 17.0.0 (October 20, 2020)
+
+### 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

From f021a983aa46ea56c5092a55f8002a96c239fc1b Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 20 Oct 2020 21:41:18 +0100
Subject: [PATCH 0034/1603] Bump versions for 17 (#20062)

---
 packages/create-subscription/package.json         | 4 ++--
 packages/eslint-plugin-react-hooks/package.json   | 2 +-
 packages/jest-mock-scheduler/package.json         | 2 +-
 packages/jest-react/package.json                  | 6 +++---
 packages/react-art/package.json                   | 6 +++---
 packages/react-cache/package.json                 | 2 +-
 packages/react-client/package.json                | 2 +-
 packages/react-debug-tools/package.json           | 2 +-
 packages/react-dom/package.json                   | 6 +++---
 packages/react-fetch/package.json                 | 2 +-
 packages/react-interactions/package.json          | 2 +-
 packages/react-is/package.json                    | 2 +-
 packages/react-native-renderer/package.json       | 2 +-
 packages/react-noop-renderer/package.json         | 2 +-
 packages/react-reconciler/package.json            | 6 +++---
 packages/react-refresh/package.json               | 2 +-
 packages/react-server/package.json                | 2 +-
 packages/react-test-renderer/package.json         | 8 ++++----
 packages/react-transport-dom-relay/package.json   | 4 ++--
 packages/react-transport-dom-webpack/package.json | 4 ++--
 packages/react/package.json                       | 2 +-
 packages/scheduler/package.json                   | 2 +-
 packages/shared/ReactVersion.js                   | 2 +-
 packages/use-subscription/package.json            | 4 ++--
 24 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/packages/create-subscription/package.json b/packages/create-subscription/package.json
index 4677c731b7b5..4342325d50f2 100644
--- a/packages/create-subscription/package.json
+++ b/packages/create-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-subscription",
   "description": "utility for subscribing to external data sources inside React components",
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
@@ -15,7 +15,7 @@
     "cjs/"
   ],
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "devDependencies": {
     "rxjs": "^5.5.6"
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 112c303b8a47..a33566047c73 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/jest-mock-scheduler/package.json b/packages/jest-mock-scheduler/package.json
index 4cd04b7c8f2e..c886ff325dce 100644
--- a/packages/jest-mock-scheduler/package.json
+++ b/packages/jest-mock-scheduler/package.json
@@ -20,7 +20,7 @@
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
     "jest": "^23.0.1 || ^24.0.0 || ^25.1.0",
-    "scheduler": "^0.15.0"
+    "scheduler": "^0.20.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
index 2a1d8e8929d7..4f0198a39008 100644
--- a/packages/jest-react/package.json
+++ b/packages/jest-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-react",
-  "version": "0.12.0-alpha.0",
+  "version": "0.12.0",
   "description": "Jest matchers and utilities for testing React components.",
   "main": "index.js",
   "repository": {
@@ -20,8 +20,8 @@
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
     "jest": "^23.0.1 || ^24.0.0 || ^25.1.0",
-    "react": "^17.0.0-alpha",
-    "react-test-renderer": "^17.0.0-alpha"
+    "react": "^17.0.0",
+    "react-test-renderer": "^17.0.0"
   },
   "dependencies": {
     "object-assign": "^4.1.1"
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index b611b4790fd8..35214ede04c4 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "create-react-class": "^15.6.2",
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "scheduler": "^0.19.0"
+    "scheduler": "^0.20.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "17.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-cache/package.json b/packages/react-cache/package.json
index 56fb3d4dee09..670edefbe179 100644
--- a/packages/react-cache/package.json
+++ b/packages/react-cache/package.json
@@ -17,6 +17,6 @@
     "umd/"
   ],
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   }
 }
diff --git a/packages/react-client/package.json b/packages/react-client/package.json
index 18cb2e872edb..7752fcb73f8a 100644
--- a/packages/react-client/package.json
+++ b/packages/react-client/package.json
@@ -24,7 +24,7 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
diff --git a/packages/react-debug-tools/package.json b/packages/react-debug-tools/package.json
index e0ab8b93209c..9b4bc145da6f 100644
--- a/packages/react-debug-tools/package.json
+++ b/packages/react-debug-tools/package.json
@@ -26,7 +26,7 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "dependencies": {
     "error-stack-parser": "^2.0.2",
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 6a96e0d4942e..1ef8be46dbe1 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -19,10 +19,10 @@
   "dependencies": {
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "scheduler": "^0.19.0"
+    "scheduler": "^0.20.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "17.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-fetch/package.json b/packages/react-fetch/package.json
index 7a3fd32f2963..e229a44e35f5 100644
--- a/packages/react-fetch/package.json
+++ b/packages/react-fetch/package.json
@@ -18,7 +18,7 @@
     "cjs/"
   ],
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "browser": {
     "./index.js": "./index.browser.js"
diff --git a/packages/react-interactions/package.json b/packages/react-interactions/package.json
index b8f219265143..c2ef0f831632 100644
--- a/packages/react-interactions/package.json
+++ b/packages/react-interactions/package.json
@@ -38,7 +38,7 @@
     "loose-envify": "^1.1.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index 5e2b11fa8590..172fe4bfd11f 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-native-renderer/package.json b/packages/react-native-renderer/package.json
index 34c06e5ef966..bc5066c43ba0 100644
--- a/packages/react-native-renderer/package.json
+++ b/packages/react-native-renderer/package.json
@@ -12,6 +12,6 @@
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   }
 }
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
index 4a5a575c0b5c..1b4cdab557ac 100644
--- a/packages/react-noop-renderer/package.json
+++ b/packages/react-noop-renderer/package.json
@@ -17,7 +17,7 @@
     "react-server": "*"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 2e2aa934aa17..7e63acfb984d 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-reconciler",
   "description": "React package for creating custom renderers.",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "keywords": [
     "react"
   ],
@@ -26,12 +26,12 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "scheduler": "^0.19.0"
+    "scheduler": "^0.20.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 226da5ee9cdf..36b5102dc1e3 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "0.8.3",
+  "version": "0.9.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
index 7c448e766e0b..7e6129e61198 100644
--- a/packages/react-server/package.json
+++ b/packages/react-server/package.json
@@ -27,7 +27,7 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index 724eba635de0..0155b472ba33 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -20,12 +20,12 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "object-assign": "^4.1.1",
-    "react-is": "^17.0.0-alpha",
+    "react-is": "^17.0.0",
     "react-shallow-renderer": "^16.13.1",
-    "scheduler": "^0.19.0"
+    "scheduler": "^0.20.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "17.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-transport-dom-relay/package.json b/packages/react-transport-dom-relay/package.json
index fbb3e0622e52..d89d18392998 100644
--- a/packages/react-transport-dom-relay/package.json
+++ b/packages/react-transport-dom-relay/package.json
@@ -12,7 +12,7 @@
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha",
-    "react-dom": "^17.0.0-alpha"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   }
 }
diff --git a/packages/react-transport-dom-webpack/package.json b/packages/react-transport-dom-webpack/package.json
index b15fbdd356e9..5af19cb1d034 100644
--- a/packages/react-transport-dom-webpack/package.json
+++ b/packages/react-transport-dom-webpack/package.json
@@ -34,8 +34,8 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha",
-    "react-dom": "^17.0.0-alpha",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "webpack": "^4.43.0"
   },
   "dependencies": {
diff --git a/packages/react/package.json b/packages/react/package.json
index 26ee45210b78..5b161487c793 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "17.0.0-alpha.0",
+  "version": "17.0.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index 5a3b5ce3ea8a..e71cb7b31496 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scheduler",
-  "version": "0.19.1",
+  "version": "0.20.0",
   "description": "Cooperative scheduler for the browser environment.",
   "main": "index.js",
   "repository": {
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index a45f8bf18f4e..447f02874f49 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -6,4 +6,4 @@
  */
 
 // TODO: this is special because it gets imported during build.
-export default '17.0.0-alpha.0';
+export default '17.0.0';
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index 42c0e4913f9f..e3e4e394d66d 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-subscription",
   "description": "Reusable hooks",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
@@ -19,7 +19,7 @@
     "object-assign": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^17.0.0-alpha"
+    "react": "^17.0.0"
   },
   "devDependencies": {
     "rxjs": "^5.5.6"

From a50f638b064f109c33d3189f9ed6419e700de0f8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 20 Oct 2020 21:51:41 +0100
Subject: [PATCH 0035/1603] Link to the blog post

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cb0704775977..42d9691366b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
 ## 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))

From 40cfe1f486a6f3901f98e7856cb7974690f311e9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 21 Oct 2020 01:15:28 +0100
Subject: [PATCH 0036/1603] Update CHANGELOG.md

---
 packages/eslint-plugin-react-hooks/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index 01a767eb5817..0ca1cda305ed 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 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))
 

From 6f62abb58ae46d9c88525635f1790487285666e6 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 21 Oct 2020 13:17:44 +0100
Subject: [PATCH 0037/1603] Remove usage of Array#fill (#20071)

---
 packages/react-reconciler/src/ReactFiberLane.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.js b/packages/react-reconciler/src/ReactFiberLane.js
index 3dc89c45a956..027754dd76ee 100644
--- a/packages/react-reconciler/src/ReactFiberLane.js
+++ b/packages/react-reconciler/src/ReactFiberLane.js
@@ -640,7 +640,13 @@ export function higherLanePriority(
 }
 
 export function createLaneMap<T>(initial: T): LaneMap<T> {
-  return new Array(TotalLanes).fill(initial);
+  // 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(

From 928a819a28b1c7867f891d20e4b4373ab39b8b74 Mon Sep 17 00:00:00 2001
From: Minh Nguyen <minhnguyenxx@gmail.com>
Date: Wed, 21 Oct 2020 15:37:34 +0300
Subject: [PATCH 0038/1603] Use react-shallow-renderer@16.14.1 in yarn.lock
 (#20072)

This ensures that tests are run against the latest published version. This
merely updates the version in `yarn.lock` and not in `react-test-renderer`'s
`package.json` to avoid having to cut another release of `react-test-renderer`.
---
 yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index ace507ca9bae..52febebc3db8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11536,12 +11536,12 @@ react-native-web@0.0.0-26873b469:
     react-timer-mixin "^0.13.4"
 
 react-shallow-renderer@^16.13.1:
-  version "16.13.1"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.13.1.tgz#4cfd6dc0f05a8d4d261ff7a80e9b88f15491a00a"
-  integrity sha512-hLmExm5/ZnjodLgm/4oxYw4i7fL6LLPhbO9mF/4tmaZUurtLrp2aSeDHZmRk0SVCHXPz0VaEbb3Dqi5J7odz7Q==
+  version "16.14.1"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
+  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
   dependencies:
     object-assign "^4.1.1"
-    react-is "^16.12.0"
+    react-is "^16.12.0 || ^17.0.0"
 
 react-timer-mixin@^0.13.4:
   version "0.13.4"

From eaaf4cbce76db03850401fa6a2dcb9cabbcdf3c3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Thu, 22 Oct 2020 13:24:46 +0100
Subject: [PATCH 0039/1603] 17.0.1

---
 CHANGELOG.md                              | 6 ++++++
 packages/react-art/package.json           | 6 +++---
 packages/react-dom/package.json           | 6 +++---
 packages/react-is/package.json            | 2 +-
 packages/react-reconciler/package.json    | 6 +++---
 packages/react-test-renderer/package.json | 8 ++++----
 packages/react/package.json               | 2 +-
 packages/scheduler/package.json           | 2 +-
 packages/shared/ReactVersion.js           | 2 +-
 9 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 42d9691366b3..b84fad6adbfa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 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!
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index 35214ede04c4..194a9697e0a3 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -26,10 +26,10 @@
     "create-react-class": "^15.6.2",
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "scheduler": "^0.20.0"
+    "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.0"
+    "react": "17.0.1"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 1ef8be46dbe1..f512ed9f516b 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -19,10 +19,10 @@
   "dependencies": {
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "scheduler": "^0.20.0"
+    "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.0"
+    "react": "17.0.1"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index 172fe4bfd11f..1687b93fae93 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 7e63acfb984d..858a7190a6ea 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-reconciler",
   "description": "React package for creating custom renderers.",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "keywords": [
     "react"
   ],
@@ -26,12 +26,12 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0"
+    "react": "^17.0.1"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1",
-    "scheduler": "^0.20.0"
+    "scheduler": "^0.20.1"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index 0155b472ba33..c12ce070d8f3 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "17.0.0",
+  "version": "17.0.1",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -20,12 +20,12 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "object-assign": "^4.1.1",
-    "react-is": "^17.0.0",
+    "react-is": "^17.0.1",
     "react-shallow-renderer": "^16.13.1",
-    "scheduler": "^0.20.0"
+    "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.0"
+    "react": "17.0.1"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react/package.json b/packages/react/package.json
index 5b161487c793..4ed34b868d91 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "17.0.0",
+  "version": "17.0.1",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index e71cb7b31496..cea8e16c2e87 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scheduler",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "Cooperative scheduler for the browser environment.",
   "main": "index.js",
   "repository": {
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index 447f02874f49..b042a00d1143 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -6,4 +6,4 @@
  */
 
 // TODO: this is special because it gets imported during build.
-export default '17.0.0';
+export default '17.0.1';

From 3314115cb484af42e7090180503ea9850aaa1e1a Mon Sep 17 00:00:00 2001
From: Abhyuday Bharat <71846122+recurx@users.noreply.github.com>
Date: Thu, 22 Oct 2020 18:22:14 +0530
Subject: [PATCH 0040/1603] Overly eager update-notifier usage in
 react-devtools (#20078)

Co-authored-by: abhyuday <abhyuday@miqdigital.com>
---
 packages/react-devtools/bin.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools/bin.js b/packages/react-devtools/bin.js
index 99780a2d9a4c..ced9dce48c2b 100755
--- a/packages/react-devtools/bin.js
+++ b/packages/react-devtools/bin.js
@@ -15,8 +15,19 @@ const argv = process.argv.slice(2);
 const pkg = require('./package.json');
 const updateNotifier = require('update-notifier');
 
-// notify if there's an update
-updateNotifier({pkg}).notify({defer: false});
+// 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',

From 4e5d7faf54b38ebfc7a2dcadbd09a25d6f330ac0 Mon Sep 17 00:00:00 2001
From: Sy Tran Dung <13009812+sytranvn@users.noreply.github.com>
Date: Thu, 22 Oct 2020 22:26:24 +0700
Subject: [PATCH 0041/1603] Fix error loading source maps for devtools
 extension (#20079)

---
 packages/react-devtools-extensions/chrome/manifest.json  | 9 +--------
 packages/react-devtools-extensions/edge/manifest.json    | 9 +--------
 packages/react-devtools-extensions/firefox/manifest.json | 9 +--------
 packages/react-devtools-extensions/webpack.backend.js    | 2 +-
 packages/react-devtools-extensions/webpack.config.js     | 2 +-
 5 files changed, 5 insertions(+), 26 deletions(-)

diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index c1e7cf3c0c12..8924a9d95cb6 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -32,14 +32,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "build/background.js.map",
-    "build/contentScript.js.map",
-    "build/injectGlobalHook.js.map",
-    "build/main.js.map",
-    "build/panel.js.map",
-    "build/renderer.js.map",
-    "build/react_devtools_backend.js.map"
+    "build/renderer.js"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 9c168a430e5b..bdd387ff7aab 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -32,14 +32,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "build/background.js.map",
-    "build/contentScript.js.map",
-    "build/injectGlobalHook.js.map",
-    "build/main.js.map",
-    "build/panel.js.map",
-    "build/renderer.js.map",
-    "build/react_devtools_backend.js.map"
+    "build/renderer.js"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index d8c79b1aa647..6a46cd88fb84 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -37,14 +37,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "build/background.js.map",
-    "build/contentScript.js.map",
-    "build/injectGlobalHook.js.map",
-    "build/main.js.map",
-    "build/panel.js.map",
-    "build/renderer.js.map",
-    "build/react_devtools_backend.js.map"
+    "build/renderer.js"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index c9f1c336b026..2399c10892e3 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -18,7 +18,7 @@ const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
   entry: {
     backend: './src/backend.js',
   },
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 1a406ccdaf90..4d6d00c52ac1 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -19,7 +19,7 @@ const DEVTOOLS_VERSION = getVersionString();
 
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
+  devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
   entry: {
     background: './src/background.js',
     contentScript: './src/contentScript.js',

From 06a4615be28bc34f53ce1d9523995c83106b07e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Justus=20H=C3=A4m=C3=A4l=C3=A4inen?=
 <justushamalainen@gmail.com>
Date: Tue, 27 Oct 2020 17:16:16 +0200
Subject: [PATCH 0042/1603] Allow Node 15.x (#20108)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Justus Hämäläinen <me@justushamalainen.fi>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 507465c59318..a9feab2a2c98 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
     "yargs": "^15.3.1"
   },
   "devEngines": {
-    "node": "8.x || 9.x || 10.x || 11.x || 12.x || 13.x || 14.x"
+    "node": "8.x || 9.x || 10.x || 11.x || 12.x || 13.x || 14.x || 15.x"
   },
   "jest": {
     "testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"

From 25b18d31c8b7ffd256416672dc21c50dd22ac3dc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 27 Oct 2020 14:02:19 -0500
Subject: [PATCH 0043/1603] Traverse commit phase effects iteratively (#20094)

* Move traversal logic to ReactFiberCommitWork

The current traversal logic is spread between ReactFiberWorkLoop and
ReactFiberCommitWork, and it's a bit awkward, especially when
refactoring. Idk the ideal module structure, so for now I'd rather keep
it all in one file.

* Traverse commit phase effects iteratively

We suspect that using the JS stack to traverse through the tree in the
commit phase is slower than traversing iteratively.

I've kept the recursive implementation behind a flag, both so we have
the option to run an experiment comparing the two, and so we can revert
it easily later if needed.
---
 .../src/ReactFiberCommitWork.new.js           | 1350 +++++++++++++++--
 .../src/ReactFiberWorkLoop.new.js             |  510 +------
 packages/shared/ReactFeatureFlags.js          |    2 +
 .../forks/ReactFeatureFlags.native-fb.js      |    2 +
 .../forks/ReactFeatureFlags.native-oss.js     |    2 +
 .../forks/ReactFeatureFlags.test-renderer.js  |    2 +
 .../ReactFeatureFlags.test-renderer.native.js |    2 +
 .../ReactFeatureFlags.test-renderer.www.js    |    2 +
 .../shared/forks/ReactFeatureFlags.testing.js |    2 +
 .../forks/ReactFeatureFlags.testing.www.js    |    2 +
 .../shared/forks/ReactFeatureFlags.www.js     |    2 +
 11 files changed, 1255 insertions(+), 623 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 3664803f2043..2997e809a499 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -24,6 +24,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
+import type {Flags} from './ReactFiberFlags';
 
 import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
@@ -35,6 +36,7 @@ import {
   enableSuspenseCallback,
   enableScopeAPI,
   enableDoubleInvokingEffects,
+  enableRecursiveCommitTraversal,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -67,10 +69,21 @@ import {
   ContentReset,
   Placement,
   Snapshot,
+  Visibility,
   Update,
   Callback,
-  LayoutMask,
   Ref,
+  PlacementAndUpdate,
+  Hydrating,
+  HydratingAndUpdate,
+  Passive,
+  PassiveStatic,
+  BeforeMutationMask,
+  MutationMask,
+  LayoutMask,
+  PassiveMask,
+  MountLayoutDev,
+  MountPassiveDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -88,13 +101,20 @@ import {
   recordPassiveEffectDuration,
   startPassiveEffectTimer,
 } from './ReactProfilerTimer.new';
-import {ProfileMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  ProfileMode,
+} from './ReactTypeOfMode';
 import {commitUpdateQueue} from './ReactUpdateQueue.new';
 import {
   getPublicInstance,
   supportsMutation,
   supportsPersistence,
   supportsHydration,
+  prepareForCommit,
+  beforeActiveInstanceBlur,
   commitMount,
   commitUpdate,
   resetTextContent,
@@ -132,6 +152,9 @@ import {
   Passive as HookPassive,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
+import {doesFiberContain} from './ReactFiberTreeReflection';
+
+let nextEffect: Fiber | null = null;
 
 // Used to avoid traversing the return path to find the nearest Profiler ancestor during commit.
 let nearestProfilerOnStack: Fiber | null = null;
@@ -256,98 +279,6 @@ export function safelyCallDestroy(
   }
 }
 
-function commitBeforeMutationLifeCycles(
-  current: Fiber | null,
-  finishedWork: Fiber,
-): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent:
-    case Block: {
-      return;
-    }
-    case ClassComponent: {
-      if (finishedWork.flags & Snapshot) {
-        if (current !== null) {
-          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 === finishedWork.elementType &&
-              !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.',
-                  getComponentName(finishedWork.type) || 'instance',
-                );
-              }
-              if (instance.state !== finishedWork.memoizedState) {
-                console.error(
-                  'Expected %s state to match memoized state before ' +
-                    'getSnapshotBeforeUpdate. ' +
-                    'This might either be because of a bug in React, or because ' +
-                    'a component reassigns its own `this.state`. ' +
-                    'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
-                );
-              }
-            }
-          }
-          const snapshot = instance.getSnapshotBeforeUpdate(
-            finishedWork.elementType === finishedWork.type
-              ? prevProps
-              : resolveDefaultProps(finishedWork.type, prevProps),
-            prevState,
-          );
-          if (__DEV__) {
-            const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
-            if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
-              didWarnSet.add(finishedWork.type);
-              console.error(
-                '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
-                  'must be returned. You have returned undefined.',
-                getComponentName(finishedWork.type),
-              );
-            }
-          }
-          instance.__reactInternalSnapshotBeforeUpdate = snapshot;
-        }
-      }
-      return;
-    }
-    case HostRoot: {
-      if (supportsMutation) {
-        if (finishedWork.flags & Snapshot) {
-          const root = finishedWork.stateNode;
-          clearContainer(root.containerInfo);
-        }
-      }
-      return;
-    }
-    case HostComponent:
-    case HostText:
-    case HostPortal:
-    case IncompleteClassComponent:
-      // Nothing to do for these component types
-      return;
-  }
-  invariant(
-    false,
-    'This unit of work tag should not have side-effects. This error is ' +
-      'likely caused by a bug in React. Please file an issue.',
-  );
-}
-
 function commitHookEffectListUnmount(
   flags: HookFlags,
   finishedWork: Fiber,
@@ -462,6 +393,530 @@ function commitProfilerPassiveEffect(
   }
 }
 
+let focusedInstanceHandle: null | Fiber = null;
+let shouldFireAfterActiveInstanceBlur: boolean = false;
+
+export function commitBeforeMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+) {
+  focusedInstanceHandle = prepareForCommit(root.containerInfo);
+
+  if (enableRecursiveCommitTraversal) {
+    recursivelyCommitBeforeMutationEffects(firstChild);
+  } else {
+    nextEffect = firstChild;
+    iterativelyCommitBeforeMutationEffects_begin();
+  }
+
+  // We no longer need to track the active instance fiber
+  const shouldFire = shouldFireAfterActiveInstanceBlur;
+  shouldFireAfterActiveInstanceBlur = false;
+  focusedInstanceHandle = null;
+
+  return shouldFire;
+}
+
+function recursivelyCommitBeforeMutationEffects(firstChild: Fiber) {
+  let fiber = firstChild;
+  while (fiber !== null) {
+    // TODO: Should wrap this in flags check, too, as optimization
+    if (fiber.deletions !== null) {
+      commitBeforeMutationEffectsDeletions(fiber.deletions);
+    }
+
+    const child = fiber.child;
+    if (fiber.subtreeFlags & BeforeMutationMask && child !== null) {
+      recursivelyCommitBeforeMutationEffects(child);
+    }
+
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitBeforeMutationEffectsOnFiber,
+        null,
+        fiber,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitBeforeMutationEffectsOnFiber(fiber);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+    }
+    fiber = fiber.sibling;
+  }
+}
+
+function iterativelyCommitBeforeMutationEffects_begin() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // TODO: Should wrap this in flags check, too, as optimization
+    const deletions = fiber.deletions;
+    if (deletions !== null) {
+      commitBeforeMutationEffectsDeletions(deletions);
+    }
+
+    const child = fiber.child;
+    if (
+      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
+      child !== null
+    ) {
+      child.return = fiber;
+      nextEffect = child;
+    } else {
+      iterativelyCommitBeforeMutationEffects_complete();
+    }
+  }
+}
+
+function iterativelyCommitBeforeMutationEffects_complete() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitBeforeMutationEffectsOnFiber,
+        null,
+        fiber,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitBeforeMutationEffectsOnFiber(fiber);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
+  const current = finishedWork.alternate;
+  const flags = finishedWork.flags;
+
+  if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
+    // Check to see if the focused element was inside of a hidden (Suspense) subtree.
+    if (
+      // TODO: Can optimize this further with separate Hide and Show flags. We
+      // only care about Hide here.
+      (flags & Visibility) !== NoFlags &&
+      finishedWork.tag === SuspenseComponent &&
+      isSuspenseBoundaryBeingHidden(current, finishedWork) &&
+      doesFiberContain(finishedWork, focusedInstanceHandle)
+    ) {
+      shouldFireAfterActiveInstanceBlur = true;
+      beforeActiveInstanceBlur(finishedWork);
+    }
+  }
+
+  if ((flags & Snapshot) !== NoFlags) {
+    setCurrentDebugFiberInDEV(finishedWork);
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent:
+      case Block: {
+        break;
+      }
+      case ClassComponent: {
+        if (finishedWork.flags & Snapshot) {
+          if (current !== null) {
+            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 === finishedWork.elementType &&
+                !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.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+                if (instance.state !== finishedWork.memoizedState) {
+                  console.error(
+                    'Expected %s state to match memoized state before ' +
+                      'getSnapshotBeforeUpdate. ' +
+                      'This might either be because of a bug in React, or because ' +
+                      'a component reassigns its own `this.state`. ' +
+                      'Please file an issue.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+              }
+            }
+            const snapshot = instance.getSnapshotBeforeUpdate(
+              finishedWork.elementType === finishedWork.type
+                ? prevProps
+                : resolveDefaultProps(finishedWork.type, prevProps),
+              prevState,
+            );
+            if (__DEV__) {
+              const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
+              if (
+                snapshot === undefined &&
+                !didWarnSet.has(finishedWork.type)
+              ) {
+                didWarnSet.add(finishedWork.type);
+                console.error(
+                  '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
+                    'must be returned. You have returned undefined.',
+                  getComponentName(finishedWork.type),
+                );
+              }
+            }
+            instance.__reactInternalSnapshotBeforeUpdate = snapshot;
+          }
+        }
+        break;
+      }
+      case HostRoot: {
+        if (supportsMutation) {
+          if (finishedWork.flags & Snapshot) {
+            const root = finishedWork.stateNode;
+            clearContainer(root.containerInfo);
+          }
+        }
+        break;
+      }
+      case HostComponent:
+      case HostText:
+      case HostPortal:
+      case IncompleteClassComponent:
+        // Nothing to do for these component types
+        break;
+      default:
+        invariant(
+          false,
+          'This unit of work tag should not have side-effects. This error is ' +
+            'likely caused by a bug in React. Please file an issue.',
+        );
+    }
+    resetCurrentDebugFiberInDEV();
+  }
+}
+
+function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {
+  for (let i = 0; i < deletions.length; i++) {
+    const fiber = deletions[i];
+
+    // 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(fiber, ((focusedInstanceHandle: any): Fiber))) {
+      shouldFireAfterActiveInstanceBlur = true;
+      beforeActiveInstanceBlur(fiber);
+    }
+  }
+}
+
+export function commitMutationEffects(
+  firstChild: Fiber,
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  if (enableRecursiveCommitTraversal) {
+    recursivelyCommitMutationEffects(firstChild, root, renderPriorityLevel);
+  } else {
+    nextEffect = firstChild;
+    iterativelyCommitMutationEffects_begin(root, renderPriorityLevel);
+  }
+}
+
+function recursivelyCommitMutationEffects(
+  firstChild: Fiber,
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  let fiber = firstChild;
+  while (fiber !== null) {
+    const deletions = fiber.deletions;
+    if (deletions !== null) {
+      commitMutationEffectsDeletions(
+        deletions,
+        fiber,
+        root,
+        renderPriorityLevel,
+      );
+    }
+
+    if (fiber.child !== null) {
+      const mutationFlags = fiber.subtreeFlags & MutationMask;
+      if (mutationFlags !== NoFlags) {
+        recursivelyCommitMutationEffects(
+          fiber.child,
+          root,
+          renderPriorityLevel,
+        );
+      }
+    }
+
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitMutationEffectsOnFiber,
+        null,
+        fiber,
+        root,
+        renderPriorityLevel,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+    }
+    fiber = fiber.sibling;
+  }
+}
+
+function iterativelyCommitMutationEffects_begin(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // TODO: Should wrap this in flags check, too, as optimization
+    const deletions = fiber.deletions;
+    if (deletions !== null) {
+      commitMutationEffectsDeletions(
+        deletions,
+        fiber,
+        root,
+        renderPriorityLevel,
+      );
+    }
+
+    const child = fiber.child;
+    if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
+      child.return = fiber;
+      nextEffect = child;
+    } else {
+      iterativelyCommitMutationEffects_complete(root, renderPriorityLevel);
+    }
+  }
+}
+
+function iterativelyCommitMutationEffects_complete(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitMutationEffectsOnFiber,
+        null,
+        fiber,
+        root,
+        renderPriorityLevel,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
+      }
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitMutationEffectsOnFiber(
+  fiber: Fiber,
+  root: FiberRoot,
+  renderPriorityLevel,
+) {
+  const flags = fiber.flags;
+  if (flags & ContentReset) {
+    commitResetTextContent(fiber);
+  }
+
+  if (flags & Ref) {
+    const current = fiber.alternate;
+    if (current !== null) {
+      commitDetachRef(current);
+    }
+    if (enableScopeAPI) {
+      // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
+      if (fiber.tag === ScopeComponent) {
+        commitAttachRef(fiber);
+      }
+    }
+  }
+
+  // The following switch statement is only concerned about placement,
+  // updates, and deletions. To avoid needing to add a case for every possible
+  // bitmap value, we remove the secondary effects from the effect tag and
+  // switch on that value.
+  const primaryFlags = flags & (Placement | Update | Hydrating);
+  switch (primaryFlags) {
+    case Placement: {
+      commitPlacement(fiber);
+      // 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.
+      fiber.flags &= ~Placement;
+      break;
+    }
+    case PlacementAndUpdate: {
+      // Placement
+      commitPlacement(fiber);
+      // Clear the "placement" from effect tag so that we know that this is
+      // inserted, before any life-cycles like componentDidMount gets called.
+      fiber.flags &= ~Placement;
+
+      // Update
+      const current = fiber.alternate;
+      commitWork(current, fiber);
+      break;
+    }
+    case Hydrating: {
+      fiber.flags &= ~Hydrating;
+      break;
+    }
+    case HydratingAndUpdate: {
+      fiber.flags &= ~Hydrating;
+
+      // Update
+      const current = fiber.alternate;
+      commitWork(current, fiber);
+      break;
+    }
+    case Update: {
+      const current = fiber.alternate;
+      commitWork(current, fiber);
+      break;
+    }
+  }
+}
+
+function commitMutationEffectsDeletions(
+  deletions: Array<Fiber>,
+  nearestMountedAncestor: Fiber,
+  root: FiberRoot,
+  renderPriorityLevel,
+) {
+  for (let i = 0; i < deletions.length; i++) {
+    const childToDelete = deletions[i];
+    if (__DEV__) {
+      invokeGuardedCallback(
+        null,
+        commitDeletion,
+        null,
+        root,
+        childToDelete,
+        nearestMountedAncestor,
+        renderPriorityLevel,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);
+      }
+    } else {
+      try {
+        commitDeletion(
+          root,
+          childToDelete,
+          nearestMountedAncestor,
+          renderPriorityLevel,
+        );
+      } catch (error) {
+        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);
+      }
+    }
+  }
+}
+
+export function commitLayoutEffects(
+  finishedWork: Fiber,
+  finishedRoot: FiberRoot,
+) {
+  if (enableRecursiveCommitTraversal) {
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(finishedWork);
+      invokeGuardedCallback(
+        null,
+        recursivelyCommitLayoutEffects,
+        null,
+        finishedWork,
+        finishedRoot,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(finishedWork, null, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        recursivelyCommitLayoutEffects(finishedWork, finishedRoot);
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, null, error);
+      }
+    }
+  } else {
+    nextEffect = finishedWork;
+    iterativelyCommitLayoutEffects_begin(finishedWork, finishedRoot);
+  }
+}
+
 function recursivelyCommitLayoutEffects(
   finishedWork: Fiber,
   finishedRoot: FiberRoot,
@@ -660,18 +1115,229 @@ function recursivelyCommitLayoutEffects(
           }
         }
       }
-
-      if (enableScopeAPI) {
-        // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
-        if (flags & Ref && tag !== ScopeComponent) {
-          commitAttachRef(finishedWork);
-        }
-      } else {
-        if (flags & Ref) {
-          commitAttachRef(finishedWork);
-        }
+
+      if (enableScopeAPI) {
+        // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
+        if (flags & Ref && tag !== ScopeComponent) {
+          commitAttachRef(finishedWork);
+        }
+      } else {
+        if (flags & Ref) {
+          commitAttachRef(finishedWork);
+        }
+      }
+      break;
+    }
+  }
+}
+
+function iterativelyCommitLayoutEffects_begin(
+  subtreeRoot: Fiber,
+  finishedRoot: FiberRoot,
+) {
+  while (nextEffect !== null) {
+    const finishedWork: Fiber = nextEffect;
+    const firstChild = finishedWork.child;
+
+    if (
+      (finishedWork.subtreeFlags & LayoutMask) !== NoFlags &&
+      firstChild !== null
+    ) {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.tag === Profiler
+      ) {
+        const prevProfilerOnStack = nearestProfilerOnStack;
+        nearestProfilerOnStack = finishedWork;
+
+        let child = firstChild;
+        while (child !== null) {
+          nextEffect = child;
+          iterativelyCommitLayoutEffects_begin(child, finishedRoot);
+          child = child.sibling;
+        }
+        nextEffect = finishedWork;
+
+        if ((finishedWork.flags & LayoutMask) !== NoFlags) {
+          if (__DEV__) {
+            setCurrentDebugFiberInDEV(finishedWork);
+            invokeGuardedCallback(
+              null,
+              commitLayoutEffectsForProfiler,
+              null,
+              finishedWork,
+              finishedRoot,
+            );
+            if (hasCaughtError()) {
+              const error = clearCaughtError();
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+            }
+            resetCurrentDebugFiberInDEV();
+          } else {
+            try {
+              commitLayoutEffectsForProfiler(finishedWork, finishedRoot);
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+            }
+          }
+        }
+
+        // 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.
+        if (prevProfilerOnStack !== null) {
+          prevProfilerOnStack.stateNode.effectDuration +=
+            finishedWork.stateNode.effectDuration;
+        }
+        nearestProfilerOnStack = prevProfilerOnStack;
+
+        if (finishedWork === subtreeRoot) {
+          nextEffect = null;
+          return;
+        }
+        const sibling = finishedWork.sibling;
+        if (sibling !== null) {
+          sibling.return = finishedWork.return;
+          nextEffect = sibling;
+        } else {
+          nextEffect = finishedWork.return;
+          iterativelyCommitLayoutEffects_complete(subtreeRoot, finishedRoot);
+        }
+      } else {
+        firstChild.return = finishedWork;
+        nextEffect = firstChild;
+      }
+    } else {
+      iterativelyCommitLayoutEffects_complete(subtreeRoot, finishedRoot);
+    }
+  }
+}
+
+function iterativelyCommitLayoutEffects_complete(
+  subtreeRoot: Fiber,
+  finishedRoot: FiberRoot,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    if ((fiber.flags & LayoutMask) !== NoFlags) {
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        invokeGuardedCallback(
+          null,
+          commitLayoutEffectsOnFiber,
+          null,
+          finishedRoot,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, fiber.return, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          commitLayoutEffectsOnFiber(finishedRoot, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
+        }
+      }
+    }
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = nextEffect.return;
+  }
+}
+
+function commitLayoutEffectsOnFiber(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+) {
+  const tag = finishedWork.tag;
+  const flags = finishedWork.flags;
+  if ((flags & (Update | Callback)) !== NoFlags) {
+    switch (tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent:
+      case Block: {
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          try {
+            startLayoutEffectTimer();
+            commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+          } finally {
+            recordLayoutEffectDuration(finishedWork);
+          }
+        } else {
+          commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+        }
+        break;
+      }
+      case ClassComponent: {
+        // NOTE: Layout effect durations are measured within this function.
+        commitLayoutEffectsForClassComponent(finishedWork);
+        break;
       }
-      break;
+      case HostRoot: {
+        commitLayoutEffectsForHostRoot(finishedWork);
+        break;
+      }
+      case HostComponent: {
+        commitLayoutEffectsForHostComponent(finishedWork);
+        break;
+      }
+      case Profiler: {
+        commitLayoutEffectsForProfiler(finishedWork, finishedRoot);
+        break;
+      }
+      case SuspenseComponent: {
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+        break;
+      }
+      case FundamentalComponent:
+      case HostPortal:
+      case HostText:
+      case IncompleteClassComponent:
+      case LegacyHiddenComponent:
+      case OffscreenComponent:
+      case ScopeComponent:
+      case SuspenseListComponent: {
+        // We have no life-cycles associated with these component types.
+        break;
+      }
+      default: {
+        invariant(
+          false,
+          'This unit of work tag should not have side-effects. This error is ' +
+            'likely caused by a bug in React. Please file an issue.',
+        );
+      }
+    }
+  }
+
+  if (enableScopeAPI) {
+    // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
+    if (flags & Ref && tag !== ScopeComponent) {
+      commitAttachRef(finishedWork);
+    }
+  } else {
+    if (flags & Ref) {
+      commitAttachRef(finishedWork);
     }
   }
 }
@@ -972,6 +1638,401 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
   }
 }
 
+export function commitPassiveMountEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+): void {
+  if (enableRecursiveCommitTraversal) {
+    recursivelyCommitPassiveMountEffects(root, firstChild);
+  } else {
+    nextEffect = firstChild;
+    iterativelyCommitPassiveMountEffects_begin(firstChild, root);
+  }
+}
+
+function recursivelyCommitPassiveMountEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+): void {
+  let fiber = firstChild;
+  while (fiber !== null) {
+    let prevProfilerOnStack = null;
+    if (enableProfilerTimer && enableProfilerCommitHooks) {
+      if (fiber.tag === Profiler) {
+        prevProfilerOnStack = nearestProfilerOnStack;
+        nearestProfilerOnStack = fiber;
+      }
+    }
+
+    const primarySubtreeFlags = fiber.subtreeFlags & PassiveMask;
+
+    if (fiber.child !== null && primarySubtreeFlags !== NoFlags) {
+      recursivelyCommitPassiveMountEffects(root, fiber.child);
+    }
+
+    if ((fiber.flags & Passive) !== NoFlags) {
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        invokeGuardedCallback(
+          null,
+          commitPassiveMountOnFiber,
+          null,
+          root,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, fiber.return, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          commitPassiveMountOnFiber(root, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
+        }
+      }
+    }
+
+    if (enableProfilerTimer && enableProfilerCommitHooks) {
+      if (fiber.tag === Profiler) {
+        // Bubble times to the next nearest ancestor Profiler.
+        // After we process that Profiler, we'll bubble further up.
+        if (prevProfilerOnStack !== null) {
+          prevProfilerOnStack.stateNode.passiveEffectDuration +=
+            fiber.stateNode.passiveEffectDuration;
+        }
+
+        nearestProfilerOnStack = prevProfilerOnStack;
+      }
+    }
+
+    fiber = fiber.sibling;
+  }
+}
+
+function iterativelyCommitPassiveMountEffects_begin(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        fiber.tag === Profiler
+      ) {
+        const prevProfilerOnStack = nearestProfilerOnStack;
+        nearestProfilerOnStack = fiber;
+
+        let child = firstChild;
+        while (child !== null) {
+          nextEffect = child;
+          iterativelyCommitPassiveMountEffects_begin(child, root);
+          child = child.sibling;
+        }
+        nextEffect = fiber;
+
+        if ((fiber.flags & PassiveMask) !== NoFlags) {
+          if (__DEV__) {
+            setCurrentDebugFiberInDEV(fiber);
+            invokeGuardedCallback(
+              null,
+              commitProfilerPassiveEffect,
+              null,
+              root,
+              fiber,
+            );
+            if (hasCaughtError()) {
+              const error = clearCaughtError();
+              captureCommitPhaseError(fiber, fiber.return, error);
+            }
+            resetCurrentDebugFiberInDEV();
+          } else {
+            try {
+              commitProfilerPassiveEffect(root, fiber);
+            } catch (error) {
+              captureCommitPhaseError(fiber, fiber.return, error);
+            }
+          }
+        }
+
+        // Bubble times to the next nearest ancestor Profiler.
+        // After we process that Profiler, we'll bubble further up.
+        if (prevProfilerOnStack !== null) {
+          prevProfilerOnStack.stateNode.passiveEffectDuration +=
+            fiber.stateNode.passiveEffectDuration;
+        }
+
+        nearestProfilerOnStack = prevProfilerOnStack;
+
+        if (fiber === subtreeRoot) {
+          nextEffect = null;
+          return;
+        }
+        const sibling = fiber.sibling;
+        if (sibling !== null) {
+          sibling.return = fiber.return;
+          nextEffect = sibling;
+        } else {
+          nextEffect = fiber.return;
+          iterativelyCommitPassiveMountEffects_complete(subtreeRoot, root);
+        }
+      } else {
+        firstChild.return = fiber;
+        nextEffect = firstChild;
+      }
+    } else {
+      iterativelyCommitPassiveMountEffects_complete(subtreeRoot, root);
+    }
+  }
+}
+
+function iterativelyCommitPassiveMountEffects_complete(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & Passive) !== NoFlags) {
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        invokeGuardedCallback(
+          null,
+          commitPassiveMountOnFiber,
+          null,
+          root,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, fiber.return, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          commitPassiveMountOnFiber(root, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
+        }
+      }
+    }
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+export function commitPassiveUnmountEffects(firstChild: Fiber): void {
+  if (enableRecursiveCommitTraversal) {
+    recursivelyCommitPassiveUnmountEffects(firstChild);
+  } else {
+    nextEffect = firstChild;
+    iterativelyCommitPassiveUnmountEffects_begin();
+  }
+}
+
+function recursivelyCommitPassiveUnmountEffects(firstChild: Fiber): void {
+  let fiber = firstChild;
+  while (fiber !== null) {
+    const deletions = fiber.deletions;
+    if (deletions !== null) {
+      for (let i = 0; i < deletions.length; i++) {
+        const fiberToDelete = deletions[i];
+        recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
+          fiberToDelete,
+          fiber,
+        );
+
+        // Now that passive effects have been processed, it's safe to detach lingering pointers.
+        detachFiberAfterEffects(fiberToDelete);
+      }
+    }
+
+    const child = fiber.child;
+    if (child !== null) {
+      // If any children have passive effects then traverse the subtree.
+      // Note that this requires checking subtreeFlags of the current Fiber,
+      // rather than the subtreeFlags/effectsTag of the first child,
+      // since that would not cover passive effects in siblings.
+      const passiveFlags = fiber.subtreeFlags & PassiveMask;
+      if (passiveFlags !== NoFlags) {
+        recursivelyCommitPassiveUnmountEffects(child);
+      }
+    }
+
+    const primaryFlags = fiber.flags & Passive;
+    if (primaryFlags !== NoFlags) {
+      setCurrentDebugFiberInDEV(fiber);
+      commitPassiveUnmountOnFiber(fiber);
+      resetCurrentDebugFiberInDEV();
+    }
+
+    fiber = fiber.sibling;
+  }
+}
+
+function iterativelyCommitPassiveUnmountEffects_begin() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const child = fiber.child;
+
+    // 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 fiberToDelete = deletions[i];
+        nextEffect = fiberToDelete;
+        iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+          fiberToDelete,
+          fiber,
+        );
+
+        // Now that passive effects have been processed, it's safe to detach lingering pointers.
+        detachFiberAfterEffects(fiberToDelete);
+      }
+      nextEffect = fiber;
+    }
+
+    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
+      child.return = fiber;
+      nextEffect = child;
+    } else {
+      iterativelyCommitPassiveUnmountEffects_complete();
+    }
+  }
+}
+
+function iterativelyCommitPassiveUnmountEffects_complete() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & Passive) !== NoFlags) {
+      setCurrentDebugFiberInDEV(fiber);
+      commitPassiveUnmountOnFiber(fiber);
+      resetCurrentDebugFiberInDEV();
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
+  fiberToDelete: Fiber,
+  nearestMountedAncestor: Fiber,
+): void {
+  if ((fiberToDelete.subtreeFlags & PassiveStatic) !== NoFlags) {
+    // If any children have passive effects then traverse the subtree.
+    // Note that this requires checking subtreeFlags of the current Fiber,
+    // rather than the subtreeFlags/effectsTag of the first child,
+    // since that would not cover passive effects in siblings.
+    let child = fiberToDelete.child;
+    while (child !== null) {
+      recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
+        child,
+        nearestMountedAncestor,
+      );
+      child = child.sibling;
+    }
+  }
+
+  if ((fiberToDelete.flags & PassiveStatic) !== NoFlags) {
+    setCurrentDebugFiberInDEV(fiberToDelete);
+    commitPassiveUnmountInsideDeletedTreeOnFiber(
+      fiberToDelete,
+      nearestMountedAncestor,
+    );
+    resetCurrentDebugFiberInDEV();
+  }
+}
+
+function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+  deletedSubtreeRoot: Fiber,
+  nearestMountedAncestor: Fiber,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const child = fiber.child;
+    if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
+      child.return = fiber;
+      nextEffect = child;
+    } else {
+      iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+        deletedSubtreeRoot,
+        nearestMountedAncestor,
+      );
+    }
+  }
+}
+
+function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+  deletedSubtreeRoot: Fiber,
+  nearestMountedAncestor: Fiber,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & PassiveStatic) !== NoFlags) {
+      setCurrentDebugFiberInDEV(fiber);
+      commitPassiveUnmountInsideDeletedTreeOnFiber(
+        fiber,
+        nearestMountedAncestor,
+      );
+      resetCurrentDebugFiberInDEV();
+    }
+
+    if (fiber === deletedSubtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function detachFiberAfterEffects(fiber: Fiber): void {
+  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
+  // Note that we already cleared the return pointer in detachFiberMutation().
+  fiber.child = null;
+  fiber.deletions = null;
+  fiber.dependencies = null;
+  fiber.memoizedProps = null;
+  fiber.memoizedState = null;
+  fiber.pendingProps = null;
+  fiber.sibling = null;
+  fiber.stateNode = null;
+  fiber.updateQueue = null;
+
+  if (__DEV__) {
+    fiber._debugOwner = null;
+  }
+}
+
 function commitAttachRef(finishedWork: Fiber) {
   const ref = finishedWork.ref;
   if (ref !== null) {
@@ -1950,7 +3011,7 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
 // 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.
-export function isSuspenseBoundaryBeingHidden(
+function isSuspenseBoundaryBeingHidden(
   current: Fiber | null,
   finishedWork: Fiber,
 ): boolean {
@@ -1971,7 +3032,7 @@ function commitResetTextContent(current: Fiber): void {
   resetTextContent(current.stateNode);
 }
 
-function commitPassiveUnmount(finishedWork: Fiber): void {
+function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -2001,7 +3062,7 @@ function commitPassiveUnmount(finishedWork: Fiber): void {
   }
 }
 
-function commitPassiveUnmountInsideDeletedTree(
+function commitPassiveUnmountInsideDeletedTreeOnFiber(
   current: Fiber,
   nearestMountedAncestor: Fiber | null,
 ): void {
@@ -2034,7 +3095,7 @@ function commitPassiveUnmountInsideDeletedTree(
   }
 }
 
-function commitPassiveMount(
+function commitPassiveMountOnFiber(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
 ): void {
@@ -2188,20 +3249,57 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
   }
 }
 
-export {
-  commitBeforeMutationLifeCycles,
-  commitResetTextContent,
-  commitPlacement,
-  commitDeletion,
-  commitWork,
-  commitAttachRef,
-  commitDetachRef,
-  commitPassiveUnmount,
-  commitPassiveUnmountInsideDeletedTree,
-  commitPassiveMount,
-  invokeLayoutEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokePassiveEffectUnmountInDEV,
-  recursivelyCommitLayoutEffects,
-};
+// TODO: Convert this to iteration instead of recursion, too. Leaving this for
+// a follow up because the flag is off.
+export function commitDoubleInvokeEffectsInDEV(
+  fiber: Fiber,
+  hasPassiveEffects: boolean,
+) {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // Never double-invoke effects for legacy roots.
+    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
+      return;
+    }
+
+    setCurrentDebugFiberInDEV(fiber);
+    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(
+        fiber,
+        MountPassiveDev,
+        invokePassiveEffectUnmountInDEV,
+      );
+    }
+
+    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
+    }
+    resetCurrentDebugFiberInDEV();
+  }
+}
+
+function invokeEffectsInDev(
+  firstChild: Fiber,
+  fiberFlags: Flags,
+  invokeEffectFn: (fiber: Fiber) => void,
+): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    let fiber = firstChild;
+    while (fiber !== null) {
+      if (fiber.child !== null) {
+        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
+        if (primarySubtreeFlag !== NoFlags) {
+          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
+        }
+      }
+
+      if ((fiber.flags & fiberFlags) !== NoFlags) {
+        invokeEffectFn(fiber);
+      }
+      fiber = fiber.sibling;
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 33d8398fad5f..ee2df3564cc0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -15,21 +15,18 @@ import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
-import type {Flags} from './ReactFiberFlags';
 
 import {
   warnAboutDeprecatedLifecycles,
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableProfilerTimer,
-  enableProfilerCommitHooks,
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   enableSchedulingProfiler,
-  enableScopeAPI,
   skipUnmountedBoundaries,
   enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
@@ -83,13 +80,11 @@ import * as Scheduler from 'scheduler';
 import {__interactionsRef, __subscriberRef} from 'scheduler/tracing';
 
 import {
-  prepareForCommit,
   resetAfterCommit,
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
   warnsIfNotActing,
-  beforeActiveInstanceBlur,
   afterActiveInstanceBlur,
   clearContainer,
 } from './ReactFiberHostConfig';
@@ -116,31 +111,19 @@ import {
   MemoComponent,
   SimpleMemoComponent,
   Block,
-  ScopeComponent,
-  Profiler,
 } from './ReactWorkTags';
 import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
   Placement,
-  Update,
-  PlacementAndUpdate,
-  Ref,
-  ContentReset,
-  Snapshot,
-  Passive,
   PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
-  HydratingAndUpdate,
-  Visibility,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
   PassiveMask,
-  MountPassiveDev,
-  MountLayoutDev,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -191,22 +174,12 @@ import {
   createClassErrorUpdate,
 } from './ReactFiberThrow.new';
 import {
-  commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
-  commitPlacement,
-  commitWork,
-  commitDeletion,
-  commitPassiveUnmount as commitPassiveUnmountOnFiber,
-  commitPassiveUnmountInsideDeletedTree as commitPassiveUnmountInsideDeletedTreeOnFiber,
-  commitPassiveMount as commitPassiveMountOnFiber,
-  commitDetachRef,
-  commitAttachRef,
-  commitResetTextContent,
-  isSuspenseBoundaryBeingHidden,
-  invokeLayoutEffectMountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectUnmountInDEV,
-  recursivelyCommitLayoutEffects,
+  commitBeforeMutationEffects,
+  commitMutationEffects,
+  commitLayoutEffects,
+  commitPassiveMountEffects,
+  commitPassiveUnmountEffects,
+  commitDoubleInvokeEffectsInDEV,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
@@ -247,7 +220,6 @@ import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
 // Used by `act`
 import enqueueTask from 'shared/enqueueTask';
-import {doesFiberContain} from './ReactFiberTreeReflection';
 
 const ceil = Math.ceil;
 
@@ -327,9 +299,6 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 // suspense heuristics and opt out of rendering more content.
 const RENDER_TIMEOUT_MS = 500;
 
-// Used to avoid traversing the return path to find the nearest Profiler ancestor during commit.
-let nearestProfilerOnStack: Fiber | null = null;
-
 function resetRenderTimer() {
   workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS;
 }
@@ -374,9 +343,6 @@ let currentEventPendingLanes: Lanes = NoLanes;
 // We warn about state updates for unmounted components differently in this case.
 let isFlushingPassiveEffects = false;
 
-let focusedInstanceHandle: null | Fiber = null;
-let shouldFireAfterActiveInstanceBlur: boolean = false;
-
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -1916,13 +1882,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     // 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.
-    focusedInstanceHandle = prepareForCommit(root.containerInfo);
-    shouldFireAfterActiveInstanceBlur = false;
-
-    commitBeforeMutationEffects(finishedWork);
-
-    // We no longer need to track the active instance fiber
-    focusedInstanceHandle = null;
+    const shouldFireAfterActiveInstanceBlur = commitBeforeMutationEffects(
+      root,
+      finishedWork,
+    );
 
     if (enableProfilerTimer) {
       // Mark the current commit time to be shared by all Profilers in this
@@ -1957,27 +1920,7 @@ function commitRootImpl(root, renderPriorityLevel) {
       markLayoutEffectsStarted(lanes);
     }
 
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(finishedWork);
-      invokeGuardedCallback(
-        null,
-        recursivelyCommitLayoutEffects,
-        null,
-        finishedWork,
-        root,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseErrorOnRoot(finishedWork, finishedWork, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        recursivelyCommitLayoutEffects(finishedWork, root);
-      } catch (error) {
-        captureCommitPhaseErrorOnRoot(finishedWork, finishedWork, error);
-      }
-    }
+    commitLayoutEffects(finishedWork, root);
 
     if (__DEV__) {
       if (enableDebugTracing) {
@@ -2117,238 +2060,6 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
-function commitBeforeMutationEffects(firstChild: Fiber) {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    if (fiber.deletions !== null) {
-      commitBeforeMutationEffectsDeletions(fiber.deletions);
-    }
-
-    if (fiber.child !== null) {
-      const primarySubtreeFlags = fiber.subtreeFlags & BeforeMutationMask;
-      if (primarySubtreeFlags !== NoFlags) {
-        commitBeforeMutationEffects(fiber.child);
-      }
-    }
-
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(null, commitBeforeMutationEffectsImpl, null, fiber);
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitBeforeMutationEffectsImpl(fiber);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-    }
-    fiber = fiber.sibling;
-  }
-}
-
-function commitBeforeMutationEffectsImpl(fiber: Fiber) {
-  const current = fiber.alternate;
-  const flags = fiber.flags;
-
-  if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
-    // Check to see if the focused element was inside of a hidden (Suspense) subtree.
-    if (
-      // TODO: Can optimize this further with separate Hide and Show flags. We
-      // only care about Hide here.
-      (flags & Visibility) !== NoFlags &&
-      fiber.tag === SuspenseComponent &&
-      isSuspenseBoundaryBeingHidden(current, fiber) &&
-      doesFiberContain(fiber, focusedInstanceHandle)
-    ) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur(fiber);
-    }
-  }
-
-  if ((flags & Snapshot) !== NoFlags) {
-    setCurrentDebugFiberInDEV(fiber);
-    commitBeforeMutationEffectOnFiber(current, fiber);
-    resetCurrentDebugFiberInDEV();
-  }
-}
-
-function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {
-  for (let i = 0; i < deletions.length; i++) {
-    const fiber = deletions[i];
-
-    // 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(fiber, ((focusedInstanceHandle: any): Fiber))) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur(fiber);
-    }
-  }
-}
-
-function commitMutationEffects(
-  firstChild: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    const deletions = fiber.deletions;
-    if (deletions !== null) {
-      commitMutationEffectsDeletions(
-        deletions,
-        fiber,
-        root,
-        renderPriorityLevel,
-      );
-    }
-
-    if (fiber.child !== null) {
-      const mutationFlags = fiber.subtreeFlags & MutationMask;
-      if (mutationFlags !== NoFlags) {
-        commitMutationEffects(fiber.child, root, renderPriorityLevel);
-      }
-    }
-
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitMutationEffectsImpl,
-        null,
-        fiber,
-        root,
-        renderPriorityLevel,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitMutationEffectsImpl(fiber, root, renderPriorityLevel);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-    }
-    fiber = fiber.sibling;
-  }
-}
-
-function commitMutationEffectsImpl(
-  fiber: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel,
-) {
-  const flags = fiber.flags;
-  if (flags & ContentReset) {
-    commitResetTextContent(fiber);
-  }
-
-  if (flags & Ref) {
-    const current = fiber.alternate;
-    if (current !== null) {
-      commitDetachRef(current);
-    }
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
-      if (fiber.tag === ScopeComponent) {
-        commitAttachRef(fiber);
-      }
-    }
-  }
-
-  // The following switch statement is only concerned about placement,
-  // updates, and deletions. To avoid needing to add a case for every possible
-  // bitmap value, we remove the secondary effects from the effect tag and
-  // switch on that value.
-  const primaryFlags = flags & (Placement | Update | Hydrating);
-  switch (primaryFlags) {
-    case Placement: {
-      commitPlacement(fiber);
-      // 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.
-      fiber.flags &= ~Placement;
-      break;
-    }
-    case PlacementAndUpdate: {
-      // Placement
-      commitPlacement(fiber);
-      // Clear the "placement" from effect tag so that we know that this is
-      // inserted, before any life-cycles like componentDidMount gets called.
-      fiber.flags &= ~Placement;
-
-      // Update
-      const current = fiber.alternate;
-      commitWork(current, fiber);
-      break;
-    }
-    case Hydrating: {
-      fiber.flags &= ~Hydrating;
-      break;
-    }
-    case HydratingAndUpdate: {
-      fiber.flags &= ~Hydrating;
-
-      // Update
-      const current = fiber.alternate;
-      commitWork(current, fiber);
-      break;
-    }
-    case Update: {
-      const current = fiber.alternate;
-      commitWork(current, fiber);
-      break;
-    }
-  }
-}
-
-function commitMutationEffectsDeletions(
-  deletions: Array<Fiber>,
-  nearestMountedAncestor: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel,
-) {
-  for (let i = 0; i < deletions.length; i++) {
-    const childToDelete = deletions[i];
-    if (__DEV__) {
-      invokeGuardedCallback(
-        null,
-        commitDeletion,
-        null,
-        root,
-        childToDelete,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);
-      }
-    } else {
-      try {
-        commitDeletion(
-          root,
-          childToDelete,
-          nearestMountedAncestor,
-          renderPriorityLevel,
-        );
-      } catch (error) {
-        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);
-      }
-    }
-  }
-}
-
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
@@ -2374,130 +2085,6 @@ export function flushPassiveEffects(): boolean {
   return false;
 }
 
-function flushPassiveMountEffects(root, firstChild: Fiber): void {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    let prevProfilerOnStack = null;
-    if (enableProfilerTimer && enableProfilerCommitHooks) {
-      if (fiber.tag === Profiler) {
-        prevProfilerOnStack = nearestProfilerOnStack;
-        nearestProfilerOnStack = fiber;
-      }
-    }
-
-    const primarySubtreeFlags = fiber.subtreeFlags & PassiveMask;
-
-    if (fiber.child !== null && primarySubtreeFlags !== NoFlags) {
-      flushPassiveMountEffects(root, fiber.child);
-    }
-
-    if ((fiber.flags & Passive) !== NoFlags) {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitPassiveMountOnFiber,
-          null,
-          root,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitPassiveMountOnFiber(root, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-      }
-    }
-
-    if (enableProfilerTimer && enableProfilerCommitHooks) {
-      if (fiber.tag === Profiler) {
-        // Bubble times to the next nearest ancestor Profiler.
-        // After we process that Profiler, we'll bubble further up.
-        if (prevProfilerOnStack !== null) {
-          prevProfilerOnStack.stateNode.passiveEffectDuration +=
-            fiber.stateNode.passiveEffectDuration;
-        }
-
-        nearestProfilerOnStack = prevProfilerOnStack;
-      }
-    }
-
-    fiber = fiber.sibling;
-  }
-}
-
-function flushPassiveUnmountEffects(firstChild: Fiber): void {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    const deletions = fiber.deletions;
-    if (deletions !== null) {
-      for (let i = 0; i < deletions.length; i++) {
-        const fiberToDelete = deletions[i];
-        flushPassiveUnmountEffectsInsideOfDeletedTree(fiberToDelete, fiber);
-
-        // Now that passive effects have been processed, it's safe to detach lingering pointers.
-        detachFiberAfterEffects(fiberToDelete);
-      }
-    }
-
-    const child = fiber.child;
-    if (child !== null) {
-      // If any children have passive effects then traverse the subtree.
-      // Note that this requires checking subtreeFlags of the current Fiber,
-      // rather than the subtreeFlags/effectsTag of the first child,
-      // since that would not cover passive effects in siblings.
-      const passiveFlags = fiber.subtreeFlags & PassiveMask;
-      if (passiveFlags !== NoFlags) {
-        flushPassiveUnmountEffects(child);
-      }
-    }
-
-    const primaryFlags = fiber.flags & Passive;
-    if (primaryFlags !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
-
-    fiber = fiber.sibling;
-  }
-}
-
-function flushPassiveUnmountEffectsInsideOfDeletedTree(
-  fiberToDelete: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  if ((fiberToDelete.subtreeFlags & PassiveStatic) !== NoFlags) {
-    // If any children have passive effects then traverse the subtree.
-    // Note that this requires checking subtreeFlags of the current Fiber,
-    // rather than the subtreeFlags/effectsTag of the first child,
-    // since that would not cover passive effects in siblings.
-    let child = fiberToDelete.child;
-    while (child !== null) {
-      flushPassiveUnmountEffectsInsideOfDeletedTree(
-        child,
-        nearestMountedAncestor,
-      );
-      child = child.sibling;
-    }
-  }
-
-  if ((fiberToDelete.flags & PassiveStatic) !== NoFlags) {
-    setCurrentDebugFiberInDEV(fiberToDelete);
-    commitPassiveUnmountInsideDeletedTreeOnFiber(
-      fiberToDelete,
-      nearestMountedAncestor,
-    );
-    resetCurrentDebugFiberInDEV();
-  }
-}
-
 function flushPassiveEffectsImpl() {
   if (rootWithPendingPassiveEffects === null) {
     return false;
@@ -2537,8 +2124,8 @@ function flushPassiveEffectsImpl() {
   // e.g. a destroy function in one component may unintentionally override a ref
   // value set by a create function in another component.
   // Layout effects have the same constraint.
-  flushPassiveUnmountEffects(root.current);
-  flushPassiveMountEffects(root, root.current);
+  commitPassiveUnmountEffects(root.current);
+  commitPassiveMountEffects(root, root.current);
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2840,59 +2427,6 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
   }
 }
 
-function commitDoubleInvokeEffectsInDEV(
-  fiber: Fiber,
-  hasPassiveEffects: boolean,
-) {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // Never double-invoke effects for legacy roots.
-    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
-      return;
-    }
-
-    setCurrentDebugFiberInDEV(fiber);
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(
-        fiber,
-        MountPassiveDev,
-        invokePassiveEffectUnmountInDEV,
-      );
-    }
-
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
-    }
-    resetCurrentDebugFiberInDEV();
-  }
-}
-
-function invokeEffectsInDev(
-  firstChild: Fiber,
-  fiberFlags: Flags,
-  invokeEffectFn: (fiber: Fiber) => void,
-): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
-    let fiber = firstChild;
-    while (fiber !== null) {
-      if (fiber.child !== null) {
-        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
-        if (primarySubtreeFlag !== NoFlags) {
-          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
-        }
-      }
-
-      if ((fiber.flags & fiberFlags) !== NoFlags) {
-        invokeEffectFn(fiber);
-      }
-      fiber = fiber.sibling;
-    }
-  }
-}
-
 let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
 function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
   if (__DEV__) {
@@ -3675,21 +3209,3 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
     };
   }
 }
-
-function detachFiberAfterEffects(fiber: Fiber): void {
-  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
-  // Note that we already cleared the return pointer in detachFiberMutation().
-  fiber.child = null;
-  fiber.deletions = null;
-  fiber.dependencies = null;
-  fiber.memoizedProps = null;
-  fiber.memoizedState = null;
-  fiber.pendingProps = null;
-  fiber.sibling = null;
-  fiber.stateNode = null;
-  fiber.updateQueue = null;
-
-  if (__DEV__) {
-    fiber._debugOwner = null;
-  }
-}
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index dbf9f5bd2853..ba92ea171539 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -136,3 +136,5 @@ export const enableDiscreteEventFlushingChange = false;
 export const enableDoubleInvokingEffects = false;
 
 export const enableUseRefAccessWarning = false;
+
+export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 0df33470e570..2009366d12f1 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -53,6 +53,8 @@ export const enableDiscreteEventFlushingChange = false;
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 77148d9be29b..aa53af7e58c8 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -52,6 +52,8 @@ export const enableDiscreteEventFlushingChange = false;
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 7e66eb9e75e5..eee1cb988618 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -52,6 +52,8 @@ export const enableDiscreteEventFlushingChange = false;
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 90c4360c6d46..f2b19e6dc26b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -52,6 +52,8 @@ export const enableDiscreteEventFlushingChange = false;
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 4dbd671409e3..11989ccafdc6 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -52,6 +52,8 @@ export const enableDiscreteEventFlushingChange = false;
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index c98063376f09..7bb6c2bd8b94 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -52,6 +52,8 @@ export const enableDiscreteEventFlushingChange = false;
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 362569dfb01b..23da5613036e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -52,6 +52,8 @@ export const enableDiscreteEventFlushingChange = true;
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index f5861a2e336a..fec7e2beaa87 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -84,6 +84,8 @@ export const enableDiscreteEventFlushingChange = true;
 // to the correct value.
 export const enableNewReconciler = __VARIANT__;
 
+export const enableRecursiveCommitTraversal = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From 779a472b0901b2d28e382f3850b2ad09a555b014 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 27 Oct 2020 14:51:34 -0500
Subject: [PATCH 0044/1603] Prevent inlining into recursive commit functions
 (#20105)

Adds a bunch of no-inline directives to commit phase functions to
prevent them from being inlined into one of our recursive algorithms.

The motivation is to minimize the number of variables in the recursive
functions, since each one contributes to the size of the stack frame.

Theoretically, this could help the performance of both the recursive
and non-recursive (iterative) implementations of the commit phase,
since even the iterative implementation sometimes uses the JS stack.
---
 .../src/ReactFiberCommitWork.new.js                 | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 2997e809a499..699b0ac45ae9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -212,6 +212,7 @@ function safelyCallComponentWillUnmount(
   }
 }
 
+/** @noinline */
 function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber) {
   const ref = current.ref;
   if (ref !== null) {
@@ -279,6 +280,7 @@ export function safelyCallDestroy(
   }
 }
 
+/** @noinline */
 function commitHookEffectListUnmount(
   flags: HookFlags,
   finishedWork: Fiber,
@@ -303,6 +305,7 @@ function commitHookEffectListUnmount(
   }
 }
 
+/** @noinline */
 function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
@@ -512,6 +515,7 @@ function iterativelyCommitBeforeMutationEffects_complete() {
   }
 }
 
+/** @noinline */
 function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
   const current = finishedWork.alternate;
   const flags = finishedWork.flags;
@@ -627,6 +631,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
   }
 }
 
+/** @noinline */
 function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {
   for (let i = 0; i < deletions.length; i++) {
     const fiber = deletions[i];
@@ -778,6 +783,7 @@ function iterativelyCommitMutationEffects_complete(
   }
 }
 
+/** @noinline */
 function commitMutationEffectsOnFiber(
   fiber: Fiber,
   root: FiberRoot,
@@ -848,6 +854,7 @@ function commitMutationEffectsOnFiber(
   }
 }
 
+/** @noinline */
 function commitMutationEffectsDeletions(
   deletions: Array<Fiber>,
   nearestMountedAncestor: Fiber,
@@ -1342,6 +1349,7 @@ function commitLayoutEffectsOnFiber(
   }
 }
 
+/** @noinline */
 function commitLayoutEffectsForProfiler(
   finishedWork: Fiber,
   finishedRoot: FiberRoot,
@@ -1407,6 +1415,7 @@ function commitLayoutEffectsForProfiler(
   }
 }
 
+/** @noinline */
 function commitLayoutEffectsForClassComponent(finishedWork: Fiber) {
   const instance = finishedWork.stateNode;
   const current = finishedWork.alternate;
@@ -1555,6 +1564,7 @@ function commitLayoutEffectsForClassComponent(finishedWork: Fiber) {
   }
 }
 
+/** @noinline */
 function commitLayoutEffectsForHostRoot(finishedWork: Fiber) {
   // TODO: I think this is now always non-null by the time it reaches the
   // commit phase. Consider removing the type check.
@@ -1575,6 +1585,7 @@ function commitLayoutEffectsForHostRoot(finishedWork: Fiber) {
   }
 }
 
+/** @noinline */
 function commitLayoutEffectsForHostComponent(finishedWork: Fiber) {
   const instance: Instance = finishedWork.stateNode;
   const current = finishedWork.alternate;
@@ -1590,6 +1601,7 @@ function commitLayoutEffectsForHostComponent(finishedWork: Fiber) {
   }
 }
 
+/** @noinline */
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
@@ -2950,6 +2962,7 @@ function commitSuspenseComponent(finishedWork: Fiber) {
   }
 }
 
+/** @noinline */
 function commitSuspenseHydrationCallbacks(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,

From b6a750be3ca0fc4126ef018e205c951b890c1881 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 28 Oct 2020 22:08:47 -0400
Subject: [PATCH 0045/1603] Make DevTools Websocket retry delay configurable
 (#20107)

---
 packages/react-devtools-core/README.md      | 1 +
 packages/react-devtools-core/src/backend.js | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index 9b0963de9310..39a42bbfdad1 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -24,6 +24,7 @@ The `config` object may contain:
 * `useHttps: boolean` (defaults to `false`) - Websocked should use a secure protocol (wss).
 * `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided.
 * `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
+* `retryConnectionDelay: number` (defaults to `2000`) - Milliseconds delay to wait between retrying a failed Websocket connection.
 * `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
 
 ## `react-devtools-core/standalone`
diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js
index 6581101b5b97..b63cd13006e3 100644
--- a/packages/react-devtools-core/src/backend.js
+++ b/packages/react-devtools-core/src/backend.js
@@ -26,6 +26,7 @@ type ConnectOptions = {
   port?: number,
   useHttps?: boolean,
   resolveRNStyle?: ResolveNativeStyle,
+  retryConnectionDelay?: number,
   isAppActive?: () => boolean,
   websocket?: ?WebSocket,
   ...
@@ -60,6 +61,7 @@ export function connectToDevTools(options: ?ConnectOptions) {
     port = 8097,
     websocket,
     resolveRNStyle = null,
+    retryConnectionDelay = 2000,
     isAppActive = () => true,
   } = options || {};
 
@@ -69,7 +71,10 @@ export function connectToDevTools(options: ?ConnectOptions) {
   function scheduleRetry() {
     if (retryTimeoutID === null) {
       // Two seconds because RN had issues with quick retries.
-      retryTimeoutID = setTimeout(() => connectToDevTools(options), 2000);
+      retryTimeoutID = setTimeout(
+        () => connectToDevTools(options),
+        retryConnectionDelay,
+      );
     }
   }
 

From 343d7a4a7eb621a31ba946309b557e0988be3a63 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 29 Oct 2020 13:23:57 -0400
Subject: [PATCH 0046/1603] Fast Refresh: Don't block DevTools commit hook
 (#20129)

In some scenarios (either timing dependent, or pre-FR compatible React versions) FR blocked calling the React DevTools commit hook. This PR adds a test and a fix for that.
---
 packages/react-refresh/package.json           |  6 +-
 .../react-refresh/src/ReactFreshRuntime.js    | 84 +++++++++----------
 .../src/__tests__/ReactFresh-test.js          | 75 +++++++++++++----
 yarn.lock                                     | 28 +++++++
 4 files changed, 134 insertions(+), 59 deletions(-)

diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 36b5102dc1e3..84b3d704ee9d 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -25,5 +25,9 @@
   },
   "engines": {
     "node": ">=0.10.0"
+  },
+  "devDependencies": {
+    "react-16-8": "npm:react@16.8.0",
+    "react-dom-16-8": "npm:react-dom@16.8.0"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index cd5d5a6716bf..9cf8af21182b 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -517,53 +517,53 @@ export function injectIntoGlobalHook(globalObject: any): void {
       didError: boolean,
     ) {
       const helpers = helpersByRendererID.get(id);
-      if (helpers === undefined) {
-        return;
-      }
-      helpersByRoot.set(root, helpers);
-
-      const current = root.current;
-      const alternate = current.alternate;
-
-      // We need to determine whether this root has just (un)mounted.
-      // This logic is copy-pasted from similar logic in the DevTools backend.
-      // If this breaks with some refactoring, you'll want to update DevTools too.
-
-      if (alternate !== null) {
-        const wasMounted =
-          alternate.memoizedState != null &&
-          alternate.memoizedState.element != null;
-        const isMounted =
-          current.memoizedState != null &&
-          current.memoizedState.element != null;
-
-        if (!wasMounted && isMounted) {
+      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;
+          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);
-          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 {
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index da73032520c6..5e4a766640ad 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -3745,24 +3745,32 @@ describe('ReactFresh', () => {
     }
   });
 
-  // This simulates the scenario in https://github.com/facebook/react/issues/17626.
+  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', () => {
     if (__DEV__) {
-      // This is a minimal shim for the global hook installed by DevTools.
-      // The real one is in packages/react-devtools-shared/src/hook.js.
-      let idCounter = 0;
-      const renderers = new Map();
-      global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
-        renderers,
-        supportsFiber: true,
-        inject(renderer) {
-          const id = ++idCounter;
-          renderers.set(id, renderer);
-          return id;
-        },
-        onCommitFiberRoot() {},
-        onCommitFiberUnmount() {},
-      };
+      initFauxDevToolsHook();
 
       // Load these first, as if they're coming from a CDN.
       jest.resetModules();
@@ -3820,4 +3828,39 @@ describe('ReactFresh', () => {
       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 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('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);
+
+      render(() => {
+        function Hello() {
+          return <div>Hi!</div>;
+        }
+        $RefreshReg$(Hello, 'Hello');
+        return Hello;
+      });
+
+      expect(onCommitFiberRoot).toHaveBeenCalled();
+    }
+  });
 });
diff --git a/yarn.lock b/yarn.lock
index 52febebc3db8..fb413bf61246 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11499,6 +11499,16 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     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-dom-15@npm:react-dom@^15":
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
@@ -11509,6 +11519,16 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     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-is@^16.12.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -12315,6 +12335,14 @@ scheduler@^0.11.0:
     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"
+
 schema-utils@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"

From ffd84233568fd9d277eaba7c01d53d516f6f132f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 29 Oct 2020 20:57:31 -0400
Subject: [PATCH 0047/1603] [Flight] Add support for Module References in
 transport protocol (#20121)

* Refactor Flight to require a module reference to be brand checked

This exposes a host environment (bundler) specific hook to check if an
object is a module reference. This will be used so that they can be passed
directly into Flight without needing additional wrapper objects.

* Emit module references as a special type of value

We already have JSON and errors as special types of "rows". This encodes
module references as a special type of row value. This was always the
intention because it allows those values to be emitted first in the stream
so that as a large models stream down, we can start preloading as early
as possible.

We preload the module when they resolve but we lazily require them as they
are referenced.

* Emit module references where ever they occur

This emits module references where ever they occur. In blocks or even
directly in elements.

* Don't special case the root row

I originally did this so that a simple stream is also just plain JSON.

However, since we might want to emit things like modules before the root
module in the stream, this gets unnecessarily complicated. We could add
this back as a special case if it's the first byte written but meh.

* Update the protocol

* Add test for using a module reference as a client component

* Relax element type check

Since Flight now accepts a module reference as returned by any bundler
system, depending on the renderer running. We need to drastically relax
the check to include all of them. We can add more as we discover them.

* Move flow annotation

Seems like our compiler is not happy with stripping this.

* Some bookkeeping bug

* Can't use the private field to check
---
 .../react-client/src/ReactFlightClient.js     | 81 ++++++++++++++++---
 .../src/ReactFlightClientStream.js            | 14 +++-
 .../src/__tests__/ReactFlight-test.js         | 45 ++++++++++-
 .../src/ReactNoopFlightServer.js              | 10 ++-
 .../react-server/src/ReactFlightServer.js     | 74 +++++++++++++----
 .../ReactFlightServerBundlerConfigCustom.js   |  1 +
 .../src/ReactFlightServerConfigStream.js      | 21 +++--
 .../src/ReactFlightDOMRelayClient.js          |  1 +
 .../ReactFlightDOMRelayClientHostConfig.js    |  9 ++-
 .../ReactFlightDOMRelayServerHostConfig.js    | 31 ++++++-
 .../src/__mocks__/JSResourceReference.js      | 19 +++++
 .../ReactFlightDOMRelayClientIntegration.js   |  6 +-
 .../ReactFlightDOMRelayServerIntegration.js   |  9 ++-
 .../ReactFlightDOMRelay-test.internal.js      | 45 ++++++++++-
 .../ReactFlightServerWebpackBundlerConfig.js  | 15 +++-
 .../src/__tests__/ReactFlightDOM-test.js      |  3 +-
 packages/shared/isValidElementType.js         | 11 +++
 scripts/flow/react-relay-hooks.js             | 23 ++++--
 scripts/jest/setupHostConfigs.js              |  1 +
 scripts/rollup/bundles.js                     | 13 ++-
 20 files changed, 367 insertions(+), 65 deletions(-)
 create mode 100644 packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index cda19b8e505b..2b5a692b2e4a 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -41,8 +41,9 @@ export type JSONValue =
 
 const PENDING = 0;
 const RESOLVED_MODEL = 1;
-const INITIALIZED = 2;
-const ERRORED = 3;
+const RESOLVED_MODULE = 2;
+const INITIALIZED = 3;
+const ERRORED = 4;
 
 type PendingChunk = {
   _status: 0,
@@ -56,14 +57,20 @@ type ResolvedModelChunk = {
   _response: Response,
   then(resolve: () => mixed): void,
 };
-type InitializedChunk<T> = {
+type ResolvedModuleChunk<T> = {
   _status: 2,
+  _value: ModuleReference<T>,
+  _response: Response,
+  then(resolve: () => mixed): void,
+};
+type InitializedChunk<T> = {
+  _status: 3,
   _value: T,
   _response: Response,
   then(resolve: () => mixed): void,
 };
 type ErroredChunk = {
-  _status: 3,
+  _status: 4,
   _value: Error,
   _response: Response,
   then(resolve: () => mixed): void,
@@ -71,6 +78,7 @@ type ErroredChunk = {
 type SomeChunk<T> =
   | PendingChunk
   | ResolvedModelChunk
+  | ResolvedModuleChunk<T>
   | InitializedChunk<T>
   | ErroredChunk;
 
@@ -105,6 +113,8 @@ function readChunk<T>(chunk: SomeChunk<T>): T {
       return chunk._value;
     case RESOLVED_MODEL:
       return initializeModelChunk(chunk);
+    case RESOLVED_MODULE:
+      return initializeModuleChunk(chunk);
     case PENDING:
       // eslint-disable-next-line no-throw-literal
       throw (chunk: Wakeable);
@@ -155,6 +165,13 @@ function createResolvedModelChunk(
   return new Chunk(RESOLVED_MODEL, value, response);
 }
 
+function createResolvedModuleChunk<T>(
+  response: Response,
+  value: ModuleReference<T>,
+): ResolvedModuleChunk<T> {
+  return new Chunk(RESOLVED_MODULE, value, response);
+}
+
 function resolveModelChunk<T>(
   chunk: SomeChunk<T>,
   value: UninitializedModel,
@@ -170,6 +187,21 @@ function resolveModelChunk<T>(
   wakeChunk(listeners);
 }
 
+function resolveModuleChunk<T>(
+  chunk: SomeChunk<T>,
+  value: ModuleReference<T>,
+): void {
+  if (chunk._status !== PENDING) {
+    // We already resolved. We didn't expect to see this.
+    return;
+  }
+  const listeners = chunk._value;
+  const resolvedChunk: ResolvedModuleChunk<T> = (chunk: any);
+  resolvedChunk._status = RESOLVED_MODULE;
+  resolvedChunk._value = value;
+  wakeChunk(listeners);
+}
+
 function initializeModelChunk<T>(chunk: ResolvedModelChunk): T {
   const value: T = parseModel(chunk._response, chunk._value);
   const initializedChunk: InitializedChunk<T> = (chunk: any);
@@ -178,6 +210,14 @@ function initializeModelChunk<T>(chunk: ResolvedModelChunk): T {
   return value;
 }
 
+function initializeModuleChunk<T>(chunk: ResolvedModuleChunk<T>): T {
+  const value: T = requireModule(chunk._value);
+  const initializedChunk: InitializedChunk<T> = (chunk: any);
+  initializedChunk._status = INITIALIZED;
+  initializedChunk._value = value;
+  return value;
+}
+
 // 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 {
@@ -241,7 +281,7 @@ function createElement(type, key, props): React$Element<any> {
 
 type UninitializedBlockPayload<Data> = [
   mixed,
-  ModuleMetaData | SomeChunk<ModuleMetaData>,
+  BlockRenderFunction<any, Data> | SomeChunk<BlockRenderFunction<any, Data>>,
   Data | SomeChunk<Data>,
   Response,
 ];
@@ -250,14 +290,7 @@ function initializeBlock<Props, Data>(
   tuple: UninitializedBlockPayload<Data>,
 ): BlockComponent<Props, Data> {
   // Require module first and then data. The ordering matters.
-  const moduleMetaData: ModuleMetaData = readMaybeChunk(tuple[1]);
-  const moduleReference: ModuleReference<
-    BlockRenderFunction<Props, Data>,
-  > = resolveModuleReference(moduleMetaData);
-  // TODO: Do this earlier, as the chunk is resolved.
-  preloadModule(moduleReference);
-
-  const moduleExport = requireModule(moduleReference);
+  const moduleExport = readMaybeChunk(tuple[1]);
 
   // The ordering here is important because this call might suspend.
   // We don't want that to prevent the module graph for being initialized.
@@ -363,6 +396,28 @@ export function resolveModel(
   }
 }
 
+export function resolveModule(
+  response: Response,
+  id: number,
+  model: UninitializedModel,
+): void {
+  const chunks = response._chunks;
+  const chunk = chunks.get(id);
+  const moduleMetaData: ModuleMetaData = parseModel(response, model);
+  const moduleReference = resolveModuleReference(moduleMetaData);
+
+  // 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.
+  preloadModule(moduleReference);
+
+  if (!chunk) {
+    chunks.set(id, createResolvedModuleChunk(response, moduleReference));
+  } else {
+    resolveModuleChunk(chunk, moduleReference);
+  }
+}
+
 export function resolveError(
   response: Response,
   id: number,
diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js
index af73c297ec37..4bb493a66ddb 100644
--- a/packages/react-client/src/ReactFlightClientStream.js
+++ b/packages/react-client/src/ReactFlightClientStream.js
@@ -10,6 +10,7 @@
 import type {Response} from './ReactFlightClientHostConfigStream';
 
 import {
+  resolveModule,
   resolveModel,
   resolveError,
   createResponse as createResponseBase,
@@ -39,6 +40,13 @@ function processFullRow(response: Response, row: string): void {
       resolveModel(response, id, json);
       return;
     }
+    case 'M': {
+      const colon = row.indexOf(':', 1);
+      const id = parseInt(row.substring(1, colon), 16);
+      const json = row.substring(colon + 1);
+      resolveModule(response, id, json);
+      return;
+    }
     case 'E': {
       const colon = row.indexOf(':', 1);
       const id = parseInt(row.substring(1, colon), 16);
@@ -48,9 +56,9 @@ function processFullRow(response: Response, row: string): void {
       return;
     }
     default: {
-      // Assume this is the root model.
-      resolveModel(response, 0, row);
-      return;
+      throw new Error(
+        "Error parsing the data. It's probably an error code or network corruption.",
+      );
     }
   }
 }
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 865686b7e077..3ba54c51262e 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -53,17 +53,29 @@ describe('ReactFlight', () => {
     };
   });
 
+  function moduleReference(value) {
+    return {
+      $$typeof: Symbol.for('react.module.reference'),
+      value: value,
+    };
+  }
+
   function block(render, load) {
     if (load === undefined) {
       return () => {
-        return ReactNoopFlightServerRuntime.serverBlockNoData(render);
+        return ReactNoopFlightServerRuntime.serverBlockNoData(
+          moduleReference(render),
+        );
       };
     }
     return function(...args) {
       const curriedLoad = () => {
         return load(...args);
       };
-      return ReactNoopFlightServerRuntime.serverBlock(render, curriedLoad);
+      return ReactNoopFlightServerRuntime.serverBlock(
+        moduleReference(render),
+        curriedLoad,
+      );
     };
   }
 
@@ -97,6 +109,35 @@ describe('ReactFlight', () => {
     });
   });
 
+  it('can render a client component using a module reference and render there', () => {
+    function UserClient(props) {
+      return (
+        <span>
+          {props.greeting}, {props.name}
+        </span>
+      );
+    }
+    const User = moduleReference(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);
+
+    act(() => {
+      const rootModel = ReactNoopFlightClient.read(transport);
+      const greeting = rootModel.greeting;
+      ReactNoop.render(greeting);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
+  });
+
   if (ReactFeatureFlags.enableBlocksAPI) {
     it('can transfer a Block to the client and render there, without data', () => {
       function User(props, data) {
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 4220936602f5..f6e8845c9681 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -42,8 +42,14 @@ const ReactNoopFlightServer = ReactFlightServer({
   formatChunk(type: string, props: Object): Uint8Array {
     return Buffer.from(JSON.stringify({type, props}), 'utf8');
   },
-  resolveModuleMetaData(config: void, renderFn: Function) {
-    return saveModule(renderFn);
+  isModuleReference(reference: Object): boolean {
+    return reference.$$typeof === Symbol.for('react.module.reference');
+  },
+  resolveModuleMetaData(
+    config: void,
+    reference: {$$typeof: Symbol, value: any},
+  ) {
+    return saveModule(reference.value);
   },
 });
 
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index eccc17c2a193..51e5d56583dc 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -24,8 +24,10 @@ import {
   flushBuffered,
   close,
   processModelChunk,
+  processModuleChunk,
   processErrorChunk,
   resolveModuleMetaData,
+  isModuleReference,
 } from './ReactFlightServerConfig';
 
 import {
@@ -83,6 +85,7 @@ export type Request = {
   nextChunkId: number,
   pendingChunks: number,
   pingedSegments: Array<Segment>,
+  completedModuleChunks: Array<Chunk>,
   completedJSONChunks: Array<Chunk>,
   completedErrorChunks: Array<Chunk>,
   flowing: boolean,
@@ -103,6 +106,7 @@ export function createRequest(
     nextChunkId: 0,
     pendingChunks: 0,
     pingedSegments: pingedSegments,
+    completedModuleChunks: [],
     completedJSONChunks: [],
     completedErrorChunks: [],
     flowing: false,
@@ -151,6 +155,10 @@ function attemptResolveElement(element: React$Element<any>): ReactModel {
   ) {
     return element.props.children;
   } else if (type != null && typeof type === 'object') {
+    if (isModuleReference(type)) {
+      // This is a reference to a client component.
+      return [REACT_ELEMENT_TYPE, type, element.key, element.props];
+    }
     switch (type.$$typeof) {
       case REACT_FORWARD_REF_TYPE: {
         const render = type.render;
@@ -391,19 +399,8 @@ export function resolveModelToJSON(
     switch (key) {
       case '1': {
         // Module reference
-        const moduleReference: ModuleReference<any> = (value: any);
-        try {
-          const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
-            request.bundlerConfig,
-            moduleReference,
-          );
-          return (moduleMetaData: ReactJSONValue);
-        } catch (x) {
-          request.pendingChunks++;
-          const errorId = request.nextChunkId++;
-          emitErrorChunk(request, errorId, x);
-          return serializeIDRef(errorId);
-        }
+        // Encode as a normal value.
+        break;
       }
       case '2': {
         // Load function
@@ -467,7 +464,30 @@ export function resolveModelToJSON(
     }
   }
 
+  if (value === null) {
+    return null;
+  }
+
   if (typeof value === 'object') {
+    if (isModuleReference(value)) {
+      const moduleReference: ModuleReference<any> = (value: any);
+      try {
+        const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
+          request.bundlerConfig,
+          moduleReference,
+        );
+        request.pendingChunks++;
+        const moduleId = request.nextChunkId++;
+        emitModuleChunk(request, moduleId, moduleMetaData);
+        return serializeIDRef(moduleId);
+      } catch (x) {
+        request.pendingChunks++;
+        const errorId = request.nextChunkId++;
+        emitErrorChunk(request, errorId, x);
+        return serializeIDRef(errorId);
+      }
+    }
+
     if (__DEV__) {
       if (value !== null && !isArray(value)) {
         // Verify that this is a simple plain object.
@@ -595,6 +615,15 @@ function emitErrorChunk(request: Request, id: number, error: mixed): void {
   request.completedErrorChunks.push(processedChunk);
 }
 
+function emitModuleChunk(
+  request: Request,
+  id: number,
+  moduleMetaData: ModuleMetaData,
+): void {
+  const processedChunk = processModuleChunk(request, id, moduleMetaData);
+  request.completedModuleChunks.push(processedChunk);
+}
+
 function retrySegment(request: Request, segment: Segment): void {
   const query = segment.query;
   let value;
@@ -654,8 +683,22 @@ function flushCompletedChunks(request: Request): void {
   const destination = request.destination;
   beginWriting(destination);
   try {
-    const jsonChunks = request.completedJSONChunks;
+    // We emit module chunks first in the stream so that
+    // they can be preloaded as early as possible.
+    const moduleChunks = request.completedModuleChunks;
     let i = 0;
+    for (; i < moduleChunks.length; i++) {
+      request.pendingChunks--;
+      const chunk = moduleChunks[i];
+      if (!writeChunk(destination, chunk)) {
+        request.flowing = false;
+        i++;
+        break;
+      }
+    }
+    // Next comes model data.
+    const jsonChunks = request.completedJSONChunks;
+    i = 0;
     for (; i < jsonChunks.length; i++) {
       request.pendingChunks--;
       const chunk = jsonChunks[i];
@@ -666,6 +709,9 @@ function flushCompletedChunks(request: Request): void {
       }
     }
     jsonChunks.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++) {
diff --git a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
index 9e2e01a3b5c7..c0db2f6b2892 100644
--- a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
+++ b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
@@ -12,4 +12,5 @@ declare var $$$hostConfig: any;
 export opaque type BundlerConfig = mixed; // eslint-disable-line no-undef
 export opaque type ModuleReference<T> = mixed; // eslint-disable-line no-undef
 export opaque type ModuleMetaData: any = mixed; // eslint-disable-line no-undef
+export const isModuleReference = $$$hostConfig.isModuleReference;
 export const resolveModuleMetaData = $$$hostConfig.resolveModuleMetaData;
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index 698eb17c3982..01c0dea4c0c0 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -14,8 +14,7 @@
 FLIGHT PROTOCOL GRAMMAR
 
 Response
-- JSONData RowSequence
-- JSONData
+- RowSequence
 
 RowSequence
 - Row RowSequence
@@ -23,6 +22,7 @@ RowSequence
 
 Row
 - "J" RowID JSONData
+- "M" RowID JSONModuleData
 - "H" RowID HTMLData
 - "B" RowID BlobData
 - "U" RowID URLData
@@ -95,12 +95,17 @@ export function processModelChunk(
   model: ReactModel,
 ): Chunk {
   const json = stringify(model, request.toJSON);
-  let row;
-  if (id === 0) {
-    row = json + '\n';
-  } else {
-    row = serializeRowHeader('J', id) + json + '\n';
-  }
+  const row = serializeRowHeader('J', id) + json + '\n';
+  return convertStringToBuffer(row);
+}
+
+export function processModuleChunk(
+  request: Request,
+  id: number,
+  moduleMetaData: ReactModel,
+): Chunk {
+  const json = stringify(moduleMetaData);
+  const row = serializeRowHeader('M', id) + json + '\n';
   return convertStringToBuffer(row);
 }
 
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
index 3ca80460c8d5..7a5e51ff6311 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
@@ -10,6 +10,7 @@
 export {
   createResponse,
   resolveModel,
+  resolveModule,
   resolveError,
   close,
 } from 'react-client/src/ReactFlightClient';
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
index 81c86e94ad96..1dde710b4af8 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -9,6 +9,10 @@
 
 import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
 
+import type JSResourceReference from 'JSResourceReference';
+
+export type ModuleReference<T> = JSResourceReference<T>;
+
 import {
   parseModelString,
   parseModelTuple,
@@ -20,10 +24,7 @@ export {
   requireModule,
 } from 'ReactFlightDOMRelayClientIntegration';
 
-export type {
-  ModuleReference,
-  ModuleMetaData,
-} from 'ReactFlightDOMRelayClientIntegration';
+export type {ModuleMetaData} from 'ReactFlightDOMRelayClientIntegration';
 
 export opaque type UninitializedModel = JSONValue;
 
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 9c6f67af9289..73bc60d4eb89 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -9,10 +9,13 @@
 
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 
+import JSResourceReference from 'JSResourceReference';
+
+export type ModuleReference<T> = JSResourceReference<T>;
+
 import type {
   Destination,
   BundlerConfig,
-  ModuleReference,
   ModuleMetaData,
 } from 'ReactFlightDOMRelayServerIntegration';
 
@@ -20,6 +23,7 @@ import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
 
 import {
   emitModel,
+  emitModule,
   emitError,
   resolveModuleMetaData as resolveModuleMetaDataImpl,
 } from 'ReactFlightDOMRelayServerIntegration';
@@ -27,10 +31,13 @@ import {
 export type {
   Destination,
   BundlerConfig,
-  ModuleReference,
   ModuleMetaData,
 } from 'ReactFlightDOMRelayServerIntegration';
 
+export function isModuleReference(reference: Object): boolean {
+  return reference instanceof JSResourceReference;
+}
+
 export function resolveModuleMetaData<T>(
   config: BundlerConfig,
   resource: ModuleReference<T>,
@@ -52,6 +59,11 @@ export type Chunk =
       id: number,
       json: JSONValue,
     }
+  | {
+      type: 'module',
+      id: number,
+      json: ModuleMetaData,
+    }
   | {
       type: 'error',
       id: number,
@@ -121,6 +133,19 @@ export function processModelChunk(
   };
 }
 
+export function processModuleChunk(
+  request: Request,
+  id: number,
+  moduleMetaData: ModuleMetaData,
+): Chunk {
+  // The moduleMetaData is already a JSON serializable value.
+  return {
+    type: 'module',
+    id: id,
+    json: moduleMetaData,
+  };
+}
+
 export function scheduleWork(callback: () => void) {
   callback();
 }
@@ -132,6 +157,8 @@ export function beginWriting(destination: Destination) {}
 export function writeChunk(destination: Destination, chunk: Chunk): boolean {
   if (chunk.type === 'json') {
     emitModel(destination, chunk.id, chunk.json);
+  } else if (chunk.type === 'module') {
+    emitModule(destination, chunk.id, chunk.json);
   } else {
     emitError(destination, chunk.id, chunk.json.message, chunk.json.stack);
   }
diff --git a/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js b/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js
new file mode 100644
index 000000000000..cf0cc624a981
--- /dev/null
+++ b/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+class JSResourceReference {
+  constructor(exportedValue) {
+    this._moduleId = exportedValue;
+  }
+  getModuleID() {
+    return this._moduleId;
+  }
+}
+
+module.exports = JSResourceReference;
diff --git a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js b/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
index 3a3543c0f0bf..25403877da25 100644
--- a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
+++ b/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
@@ -7,13 +7,15 @@
 
 'use strict';
 
+import JSResourceReference from 'JSResourceReference';
+
 const ReactFlightDOMRelayClientIntegration = {
   resolveModuleReference(moduleData) {
-    return moduleData;
+    return new JSResourceReference(moduleData);
   },
   preloadModule(moduleReference) {},
   requireModule(moduleReference) {
-    return moduleReference;
+    return moduleReference._moduleId;
   },
 };
 
diff --git a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js b/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
index 8ace12a35d91..3a873ffcad39 100644
--- a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
+++ b/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
@@ -15,6 +15,13 @@ const ReactFlightDOMRelayServerIntegration = {
       json: json,
     });
   },
+  emitModule(destination, id, json) {
+    destination.push({
+      type: 'module',
+      id: id,
+      json: json,
+    });
+  },
   emitError(destination, id, message, stack) {
     destination.push({
       type: 'error',
@@ -24,7 +31,7 @@ const ReactFlightDOMRelayServerIntegration = {
   },
   close(destination) {},
   resolveModuleMetaData(config, resource) {
-    return resource;
+    return resource._moduleId;
   },
 };
 
diff --git a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 7109a7270a99..a9dd37c2eddc 100644
--- a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -10,6 +10,7 @@
 let act;
 let React;
 let ReactDOM;
+let JSResourceReference;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayServerRuntime;
 let ReactDOMFlightRelayClient;
@@ -24,6 +25,7 @@ describe('ReactFlightDOMRelay', () => {
     ReactDOMFlightRelayServer = require('react-transport-dom-relay/server');
     ReactDOMFlightRelayServerRuntime = require('react-transport-dom-relay/server-runtime');
     ReactDOMFlightRelayClient = require('react-transport-dom-relay');
+    JSResourceReference = require('JSResourceReference');
   });
 
   function readThrough(data) {
@@ -32,6 +34,8 @@ describe('ReactFlightDOMRelay', () => {
       const chunk = data[i];
       if (chunk.type === 'json') {
         ReactDOMFlightRelayClient.resolveModel(response, chunk.id, chunk.json);
+      } else if (chunk.type === 'module') {
+        ReactDOMFlightRelayClient.resolveModule(response, chunk.id, chunk.json);
       } else {
         ReactDOMFlightRelayClient.resolveError(
           response,
@@ -47,14 +51,18 @@ describe('ReactFlightDOMRelay', () => {
   }
 
   function block(render, load) {
+    const reference = new JSResourceReference(render);
     if (load === undefined) {
-      return ReactDOMFlightRelayServerRuntime.serverBlock(render);
+      return ReactDOMFlightRelayServerRuntime.serverBlock(reference);
     }
     return function(...args) {
       const curriedLoad = () => {
         return load(...args);
       };
-      return ReactDOMFlightRelayServerRuntime.serverBlock(render, curriedLoad);
+      return ReactDOMFlightRelayServerRuntime.serverBlock(
+        reference,
+        curriedLoad,
+      );
     };
   }
 
@@ -93,6 +101,39 @@ describe('ReactFlightDOMRelay', () => {
     });
   });
 
+  // @gate experimental
+  it('can render a client component using a module reference and render there', () => {
+    function UserClient(props) {
+      return (
+        <span>
+          {props.greeting}, {props.name}
+        </span>
+      );
+    }
+    const User = new JSResourceReference(UserClient);
+
+    function Greeting({firstName, lastName}) {
+      return <User greeting="Hello" name={firstName + ' ' + lastName} />;
+    }
+
+    const model = {
+      greeting: <Greeting firstName="Seb" lastName="Smith" />,
+    };
+
+    const transport = [];
+    ReactDOMFlightRelayServer.render(model, transport);
+
+    const modelClient = readThrough(transport);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    act(() => {
+      root.render(modelClient.greeting);
+    });
+
+    expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
+  });
+
   // @gate experimental
   it('can transfer a Block to the client and render there', () => {
     function load(firstName, lastName) {
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index 6c5bf3d4554c..b8bb0d5cbee7 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -14,7 +14,10 @@ type WebpackMap = {
 export type BundlerConfig = WebpackMap;
 
 // eslint-disable-next-line no-unused-vars
-export type ModuleReference<T> = string;
+export type ModuleReference<T> = {
+  $$typeof: Symbol,
+  name: string,
+};
 
 export type ModuleMetaData = {
   id: string,
@@ -22,9 +25,15 @@ export type ModuleMetaData = {
   name: string,
 };
 
+const MODULE_TAG = Symbol.for('react.module.reference');
+
+export function isModuleReference(reference: Object): boolean {
+  return reference.$$typeof === MODULE_TAG;
+}
+
 export function resolveModuleMetaData<T>(
   config: BundlerConfig,
-  modulePath: ModuleReference<T>,
+  moduleReference: ModuleReference<T>,
 ): ModuleMetaData {
-  return config[modulePath];
+  return config[moduleReference.name];
 }
diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index ecd71cea82d9..ebabf4e75f5f 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -83,8 +83,9 @@ describe('ReactFlightDOM', () => {
       const curriedLoad = () => {
         return load(...args);
       };
+      const MODULE_TAG = Symbol.for('react.module.reference');
       return ReactTransportDOMServerRuntime.serverBlock(
-        'path/' + idx,
+        {$$typeof: MODULE_TAG, name: 'path/' + idx},
         curriedLoad,
       );
     };
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index e433cb374f8b..75c5fa74c5b7 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -27,6 +27,11 @@ import {
 } from 'shared/ReactSymbols';
 import {enableScopeAPI} from './ReactFeatureFlags';
 
+let REACT_MODULE_REFERENCE: number | Symbol = 0;
+if (typeof Symbol === 'function') {
+  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+}
+
 export default function isValidElementType(type: mixed) {
   if (typeof type === 'string' || typeof type === 'function') {
     return true;
@@ -54,6 +59,12 @@ export default function isValidElementType(type: mixed) {
       type.$$typeof === REACT_CONTEXT_TYPE ||
       type.$$typeof === REACT_FORWARD_REF_TYPE ||
       type.$$typeof === REACT_FUNDAMENTAL_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_MODULE_REFERENCE ||
+      type.getModuleID !== undefined ||
       type.$$typeof === REACT_BLOCK_TYPE ||
       type[(0: any)] === REACT_SERVER_BLOCK_TYPE
     ) {
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
index 285327b1c839..0a4eae04cd4d 100644
--- a/scripts/flow/react-relay-hooks.js
+++ b/scripts/flow/react-relay-hooks.js
@@ -15,6 +15,14 @@ type JSONValue =
   | {+[key: string]: JSONValue}
   | $ReadOnlyArray<JSONValue>;
 
+declare class JSResourceReference<T> {
+  _moduleId: T;
+}
+
+declare module 'JSResourceReference' {
+  declare export default typeof JSResourceReference;
+}
+
 declare module 'ReactFlightDOMRelayServerIntegration' {
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
@@ -23,6 +31,11 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
     id: number,
     json: JSONValue,
   ): void;
+  declare export function emitModule(
+    destination: Destination,
+    id: number,
+    json: ModuleMetaData,
+  ): void;
   declare export function emitError(
     destination: Destination,
     id: number,
@@ -31,24 +44,22 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
   ): void;
   declare export function close(destination: Destination): void;
 
-  declare export opaque type ModuleReference<T>;
   declare export type ModuleMetaData = JSONValue;
   declare export function resolveModuleMetaData<T>(
     config: BundlerConfig,
-    resourceReference: ModuleReference<T>,
+    resourceReference: JSResourceReference<T>,
   ): ModuleMetaData;
 }
 
 declare module 'ReactFlightDOMRelayClientIntegration' {
-  declare export opaque type ModuleReference<T>;
   declare export opaque type ModuleMetaData;
   declare export function resolveModuleReference<T>(
     moduleData: ModuleMetaData,
-  ): ModuleReference<T>;
+  ): JSResourceReference<T>;
   declare export function preloadModule<T>(
-    moduleReference: ModuleReference<T>,
+    moduleReference: JSResourceReference<T>,
   ): void;
   declare export function requireModule<T>(
-    moduleReference: ModuleReference<T>,
+    moduleReference: JSResourceReference<T>,
   ): T;
 }
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index 9a4af65cf0c5..78b4de416417 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -34,6 +34,7 @@ jest.mock('react-server/flight', () => {
     jest.mock(shimServerStreamConfigPath, () => config);
     jest.mock(shimServerFormatConfigPath, () => config);
     jest.mock('react-server/src/ReactFlightServerBundlerConfigCustom', () => ({
+      isModuleReference: config.isModuleReference,
       resolveModuleMetaData: config.resolveModuleMetaData,
     }));
     jest.mock(shimFlightServerConfigPath, () =>
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index baf93fd57815..d4e8b06a2322 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -301,6 +301,7 @@ const bundles = [
       'react',
       'react-dom/server',
       'ReactFlightDOMRelayServerIntegration',
+      'JSResourceReference',
     ],
   },
   {
@@ -308,7 +309,11 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-transport-dom-relay/server-runtime',
     global: 'ReactFlightDOMRelayServerRuntime',
-    externals: ['react', 'ReactFlightDOMRelayServerIntegration'],
+    externals: [
+      'react',
+      'ReactFlightDOMRelayServerIntegration',
+      'JSResourceReference',
+    ],
   },
 
   /******* React DOM Flight Client Relay *******/
@@ -317,7 +322,11 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-transport-dom-relay',
     global: 'ReactFlightDOMRelayClient',
-    externals: ['react', 'ReactFlightDOMRelayClientIntegration'],
+    externals: [
+      'react',
+      'ReactFlightDOMRelayClientIntegration',
+      'JSResourceReference',
+    ],
   },
 
   /******* React ART *******/

From 39eb6d1765cad681dc78b8955c39ed819064e7b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 29 Oct 2020 21:58:32 -0400
Subject: [PATCH 0048/1603] Rename (#20134)

---
 .../src/__mocks__/JSResourceReference.js                        | 2 +-
 packages/shared/isValidElementType.js                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js b/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js
index cf0cc624a981..18dab0739c65 100644
--- a/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js
+++ b/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js
@@ -11,7 +11,7 @@ class JSResourceReference {
   constructor(exportedValue) {
     this._moduleId = exportedValue;
   }
-  getModuleID() {
+  getModuleId() {
     return this._moduleId;
   }
 }
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 75c5fa74c5b7..57e3d249b998 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -64,7 +64,7 @@ export default function isValidElementType(type: mixed) {
       // we don't know which Flight build this will end up being used
       // with.
       type.$$typeof === REACT_MODULE_REFERENCE ||
-      type.getModuleID !== undefined ||
+      type.getModuleId !== undefined ||
       type.$$typeof === REACT_BLOCK_TYPE ||
       type[(0: any)] === REACT_SERVER_BLOCK_TYPE
     ) {

From 930ce7c15a50a8d67f24a0bd85ec0937bc84afd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 30 Oct 2020 16:02:03 -0400
Subject: [PATCH 0049/1603] Allow values to be encoded by "reference" to a
 value rather than the value itself (#20136)

These references are currently transformed into React.lazy values. We can use these in
React positions like element type or node position.

This could be expanded to a more general concept like Suspensey Promises, asset references or JSResourceReferences.

For now it's only used in React Element type position.

The purpose of these is to let you suspend deeper in the tree.
---
 .../react-client/src/ReactFlightClient.js     | 57 +++++++++++++------
 .../react-server/src/ReactFlightServer.js     | 24 ++++++--
 2 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 2b5a692b2e4a..7450e736de60 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -318,6 +318,17 @@ function createLazyBlock<Props, Data>(
   return lazyType;
 }
 
+function createLazyChunkWrapper<T>(
+  chunk: SomeChunk<T>,
+): LazyComponent<T, SomeChunk<T>> {
+  const lazyType: LazyComponent<T, SomeChunk<T>> = {
+    $$typeof: REACT_LAZY_TYPE,
+    _payload: chunk,
+    _init: readChunk,
+  };
+  return lazyType;
+}
+
 function getChunk(response: Response, id: number): SomeChunk<any> {
   const chunks = response._chunks;
   let chunk = chunks.get(id);
@@ -333,26 +344,36 @@ export function parseModelString(
   parentObject: Object,
   value: string,
 ): any {
-  if (value[0] === '$') {
-    if (value === '$') {
-      return REACT_ELEMENT_TYPE;
-    } else if (value[1] === '$' || value[1] === '@') {
-      // This was an escaped string value.
-      return value.substring(1);
-    } else {
-      const id = parseInt(value.substring(1), 16);
-      const chunk = getChunk(response, id);
-      if (parentObject[0] === REACT_BLOCK_TYPE) {
-        // Block types know how to deal with lazy values.
-        return chunk;
+  switch (value[0]) {
+    case '$': {
+      if (value === '$') {
+        return REACT_ELEMENT_TYPE;
+      } else if (value[1] === '$' || value[1] === '@') {
+        // This was an escaped string value.
+        return value.substring(1);
+      } else {
+        const id = parseInt(value.substring(1), 16);
+        const chunk = getChunk(response, id);
+        if (parentObject[0] === REACT_BLOCK_TYPE) {
+          // Block types know how to deal with lazy values.
+          return chunk;
+        }
+        // For anything else we must Suspend this block if
+        // we don't yet have the value.
+        return readChunk(chunk);
+      }
+    }
+    case '@': {
+      if (value === '@') {
+        return REACT_BLOCK_TYPE;
+      } else {
+        const id = parseInt(value.substring(1), 16);
+        const chunk = getChunk(response, id);
+        // 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);
       }
-      // For anything else we must Suspend this block if
-      // we don't yet have the value.
-      return readChunk(chunk);
     }
-  }
-  if (value === '@') {
-    return REACT_BLOCK_TYPE;
   }
   return value;
 }
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 51e5d56583dc..e82171d24de5 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -195,10 +195,14 @@ function createSegment(request: Request, query: () => ReactModel): Segment {
   return segment;
 }
 
-function serializeIDRef(id: number): string {
+function serializeByValueID(id: number): string {
   return '$' + id.toString(16);
 }
 
+function serializeByRefID(id: number): string {
+  return '@' + id.toString(16);
+}
+
 function escapeStringValue(value: string): string {
   if (value[0] === '$' || value[0] === '@') {
     // We need to escape $ or @ prefixed strings since we use those to encode
@@ -419,13 +423,13 @@ export function resolveModelToJSON(
             const newSegment = createSegment(request, load);
             const ping = newSegment.ping;
             x.then(ping, ping);
-            return serializeIDRef(newSegment.id);
+            return serializeByValueID(newSegment.id);
           } else {
             // This load failed, encode the error as a separate row and reference that.
             request.pendingChunks++;
             const errorId = request.nextChunkId++;
             emitErrorChunk(request, errorId, x);
-            return serializeIDRef(errorId);
+            return serializeByValueID(errorId);
           }
         }
       }
@@ -456,7 +460,7 @@ export function resolveModelToJSON(
         const newSegment = createSegment(request, () => value);
         const ping = newSegment.ping;
         x.then(ping, ping);
-        return serializeIDRef(newSegment.id);
+        return serializeByValueID(newSegment.id);
       } else {
         // Something errored. Don't bother encoding anything up to here.
         throw x;
@@ -479,12 +483,20 @@ export function resolveModelToJSON(
         request.pendingChunks++;
         const moduleId = request.nextChunkId++;
         emitModuleChunk(request, moduleId, moduleMetaData);
-        return serializeIDRef(moduleId);
+        if (parent[0] === REACT_ELEMENT_TYPE && key === '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 serializeByRefID(moduleId);
+        }
+        return serializeByValueID(moduleId);
       } catch (x) {
         request.pendingChunks++;
         const errorId = request.nextChunkId++;
         emitErrorChunk(request, errorId, x);
-        return serializeIDRef(errorId);
+        return serializeByValueID(errorId);
       }
     }
 

From 3fbd47b86285b6b7bdeab66d29c85951a84d4525 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 30 Oct 2020 20:19:46 -0400
Subject: [PATCH 0050/1603] Serialize pending server components by reference
 (lazy component) (#20137)

This now means that if a server component suspends, its value becomes a
React.lazy object. I.e. the element that rendered the server component
gets replaced with a lazy node.

As of #19033 lazy objects can be rendered in the node position. This allows
us to suspend at the location of the server component while we're waiting
on its content.

Now server components has the same capabilities as Blocks to progressively
reveal its content.
---
 .../react-server/src/ReactFlightServer.js     |   3 +-
 .../src/__tests__/ReactFlightDOM-test.js      | 211 +++++++++++++++++-
 2 files changed, 208 insertions(+), 6 deletions(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index e82171d24de5..97bee6c04c60 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -460,7 +460,7 @@ export function resolveModelToJSON(
         const newSegment = createSegment(request, () => value);
         const ping = newSegment.ping;
         x.then(ping, ping);
-        return serializeByValueID(newSegment.id);
+        return serializeByRefID(newSegment.id);
       } else {
         // Something errored. Don't bother encoding anything up to here.
         throw x;
@@ -708,6 +708,7 @@ function flushCompletedChunks(request: Request): void {
         break;
       }
     }
+    moduleChunks.splice(0, i);
     // Next comes model data.
     const jsonChunks = request.completedJSONChunks;
     i = 0;
diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index ebabf4e75f5f..8b690219ec6e 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -64,28 +64,34 @@ describe('ReactFlightDOM', () => {
     };
   }
 
-  function block(render, load) {
+  function moduleReference(moduleExport) {
     const idx = webpackModuleIdx++;
     webpackModules[idx] = {
-      d: render,
+      d: moduleExport,
     };
     webpackMap['path/' + idx] = {
       id: '' + idx,
       chunks: [],
       name: 'd',
     };
+    const MODULE_TAG = Symbol.for('react.module.reference');
+    return {$$typeof: MODULE_TAG, name: 'path/' + idx};
+  }
+
+  function block(render, load) {
     if (load === undefined) {
       return () => {
-        return ReactTransportDOMServerRuntime.serverBlockNoData('path/' + idx);
+        return ReactTransportDOMServerRuntime.serverBlockNoData(
+          moduleReference(render),
+        );
       };
     }
     return function(...args) {
       const curriedLoad = () => {
         return load(...args);
       };
-      const MODULE_TAG = Symbol.for('react.module.reference');
       return ReactTransportDOMServerRuntime.serverBlock(
-        {$$typeof: MODULE_TAG, name: 'path/' + idx},
+        moduleReference(render),
         curriedLoad,
       );
     };
@@ -314,6 +320,9 @@ describe('ReactFlightDOM', () => {
         return 'data';
       }
       function DelayedText({children}, data) {
+        if (data !== 'data') {
+          throw new Error('No data');
+        }
         return <Text>{children}</Text>;
       }
       const loadBlock = block(DelayedText, load);
@@ -477,4 +486,196 @@ describe('ReactFlightDOM', () => {
         '<p>Game over</p>', // TODO: should not have message in prod.
     );
   });
+
+  // @gate experimental
+  it('should progressively reveal server components', async () => {
+    const {Suspense} = React;
+
+    // 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;
+      }
+    }
+
+    function MyErrorBoundary({children}) {
+      return (
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          {children}
+        </ErrorBoundary>
+      );
+    }
+
+    function Placeholder({children, fallback}) {
+      return <Suspense fallback={fallback}>{children}</Suspense>;
+    }
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    function makeDelayedText() {
+      let error, _resolve, _reject;
+      let promise = new Promise((resolve, reject) => {
+        _resolve = () => {
+          promise = null;
+          resolve();
+        };
+        _reject = e => {
+          error = e;
+          promise = null;
+          reject(e);
+        };
+      });
+      function DelayedText({children}, data) {
+        if (promise) {
+          throw promise;
+        }
+        if (error) {
+          throw error;
+        }
+        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 = moduleReference(MyErrorBoundary);
+    const PlaceholderClient = moduleReference(Placeholder);
+
+    function ProfileContent() {
+      return (
+        <>
+          <ProfileDetails avatar={<Text>:avatar:</Text>} />
+          <PlaceholderClient fallback={<p>(loading sidebar)</p>}>
+            <ProfileSidebar friends={<Friends>:friends:</Friends>} />
+          </PlaceholderClient>
+          <PlaceholderClient fallback={<p>(loading posts)</p>}>
+            <ProfilePosts posts={<Posts>:posts:</Posts>} />
+          </PlaceholderClient>
+          <MyErrorBoundaryClient>
+            <PlaceholderClient fallback={<p>(loading games)</p>}>
+              <ProfileGames games={<Games>:games:</Games>} />
+            </PlaceholderClient>
+          </MyErrorBoundaryClient>
+        </>
+      );
+    }
+
+    const model = {
+      rootContent: <ProfileContent />,
+    };
+
+    function ProfilePage({response}) {
+      return response.readRoot().rootContent;
+    }
+
+    const {writable, readable} = getTestStream();
+    ReactTransportDOMServer.pipeToNodeWritable(model, writable, webpackMap);
+    const response = ReactTransportDOMClient.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.unstable_createRoot(container);
+    await act(async () => {
+      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 act(async () => {
+      resolveFriends();
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // We can now show the details. Sidebar and posts are still loading.
+    await act(async () => {
+      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>',
+    );
+
+    // Let's *fail* loading games.
+    await act(async () => {
+      rejectGames(new Error('Game over'));
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    // We can now show the sidebar.
+    await act(async () => {
+      resolvePhotos();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    // Show everything.
+    await act(async () => {
+      resolvePosts();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<div>:posts:</div>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+  });
 });

From 56e9feead0f91075ba0a4f725c9e4e343bca1c67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Sat, 31 Oct 2020 02:03:45 -0400
Subject: [PATCH 0051/1603] Remove Blocks (#20138)

* Remove Blocks

* Remove Flight Server Runtime

There's no need for this now that the JSResource is part of the bundler
protocol. Might need something for Webpack plugin specifically later.

* Devtools
---
 .../react-client/src/ReactFlightClient.js     |  78 +---
 .../src/__tests__/ReactFlight-test.js         |  76 ----
 .../react-debug-tools/src/ReactDebugHooks.js  |   4 +-
 .../backend/DevToolsComponentStackFrame.js    |  10 -
 .../backend/DevToolsFiberComponentStack.js    |   8 -
 .../src/backend/ReactSymbols.js               |   6 -
 .../src/backend/renderer.js                   |   6 +-
 .../src/backend/types.js                      |   1 -
 .../flight-server-runtime.js                  |  10 -
 .../npm/flight-server-runtime.js              |   3 -
 packages/react-noop-renderer/package.json     |   1 -
 .../src/ReactChildFiber.new.js                |  71 ----
 .../src/ReactChildFiber.old.js                |  71 ----
 .../react-reconciler/src/ReactFiber.new.js    |  11 -
 .../react-reconciler/src/ReactFiber.old.js    |  11 -
 .../src/ReactFiberBeginWork.new.js            |  94 -----
 .../src/ReactFiberBeginWork.old.js            |  94 -----
 .../src/ReactFiberCommitWork.new.js           |  40 +-
 .../src/ReactFiberCommitWork.old.js           |  16 +-
 .../src/ReactFiberCompleteWork.new.js         |   8 -
 .../src/ReactFiberCompleteWork.old.js         |   7 -
 .../src/ReactFiberComponentStack.js           |   3 -
 .../src/ReactFiberWorkLoop.new.js             |   7 +-
 .../src/ReactFiberWorkLoop.old.js             |   7 +-
 .../react-reconciler/src/ReactWorkTags.js     |   8 +-
 .../src/__tests__/ReactBlocks-test.js         | 351 ------------------
 .../react-server/flight-server-runtime.js     |  10 -
 .../react-server/npm/flight-server-runtime.js |   7 -
 packages/react-server/package.json            |   1 -
 .../react-server/src/ReactFlightServer.js     |  55 +--
 .../src/ReactFlightServerRuntime.js           |  52 ---
 .../src/ReactTestRenderer.js                  |  10 -
 .../server-runtime.js                         |  10 -
 .../ReactFlightDOMRelay-test.internal.js      |  50 ---
 .../npm/server-runtime.js                     |   7 -
 .../react-transport-dom-webpack/package.json  |   1 -
 .../server-runtime.js                         |  10 -
 .../src/__tests__/ReactFlightDOM-test.js      | 235 ------------
 packages/react/index.classic.fb.js            |   3 -
 packages/react/index.experimental.js          |   2 -
 packages/react/index.js                       |   2 -
 packages/react/index.modern.fb.js             |   3 -
 packages/react/src/React.js                   |   3 -
 packages/react/src/ReactBlock.js              | 138 -------
 packages/shared/ReactComponentStackFrame.js   |   3 -
 packages/shared/ReactFeatureFlags.js          |   1 -
 packages/shared/ReactSymbols.js               |   4 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 packages/shared/getComponentName.js           |   3 -
 packages/shared/isValidElementType.js         |   6 +-
 scripts/error-codes/codes.json                |   2 +-
 scripts/jest/TestFlags.js                     |   6 +-
 scripts/rollup/bundles.js                     |  25 --
 scripts/shared/inlinedHostConfigs.js          |   7 -
 61 files changed, 39 insertions(+), 1627 deletions(-)
 delete mode 100644 packages/react-noop-renderer/flight-server-runtime.js
 delete mode 100644 packages/react-noop-renderer/npm/flight-server-runtime.js
 delete mode 100644 packages/react-reconciler/src/__tests__/ReactBlocks-test.js
 delete mode 100644 packages/react-server/flight-server-runtime.js
 delete mode 100644 packages/react-server/npm/flight-server-runtime.js
 delete mode 100644 packages/react-server/src/ReactFlightServerRuntime.js
 delete mode 100644 packages/react-transport-dom-relay/server-runtime.js
 delete mode 100644 packages/react-transport-dom-webpack/npm/server-runtime.js
 delete mode 100644 packages/react-transport-dom-webpack/server-runtime.js
 delete mode 100644 packages/react/src/ReactBlock.js

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 7450e736de60..67e6ee9bf374 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -8,7 +8,6 @@
  */
 
 import type {Wakeable} from 'shared/ReactTypes';
-import type {BlockComponent, BlockRenderFunction} from 'react/src/ReactBlock';
 import type {LazyComponent} from 'react/src/ReactLazy';
 
 import type {
@@ -25,11 +24,7 @@ import {
   parseModel,
 } from './ReactFlightClientHostConfig';
 
-import {
-  REACT_LAZY_TYPE,
-  REACT_BLOCK_TYPE,
-  REACT_ELEMENT_TYPE,
-} from 'shared/ReactSymbols';
+import {REACT_LAZY_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
 export type JSONValue =
   | number
@@ -229,15 +224,6 @@ export function reportGlobalError(response: Response, error: Error): void {
   });
 }
 
-function readMaybeChunk<T>(maybeChunk: SomeChunk<T> | T): T {
-  if (maybeChunk == null || !(maybeChunk instanceof Chunk)) {
-    // $FlowFixMe
-    return maybeChunk;
-  }
-  const chunk: SomeChunk<T> = (maybeChunk: any);
-  return readChunk(chunk);
-}
-
 function createElement(type, key, props): React$Element<any> {
   const element: any = {
     // This tag allows us to uniquely identify this as a React Element
@@ -279,45 +265,6 @@ function createElement(type, key, props): React$Element<any> {
   return element;
 }
 
-type UninitializedBlockPayload<Data> = [
-  mixed,
-  BlockRenderFunction<any, Data> | SomeChunk<BlockRenderFunction<any, Data>>,
-  Data | SomeChunk<Data>,
-  Response,
-];
-
-function initializeBlock<Props, Data>(
-  tuple: UninitializedBlockPayload<Data>,
-): BlockComponent<Props, Data> {
-  // Require module first and then data. The ordering matters.
-  const moduleExport = readMaybeChunk(tuple[1]);
-
-  // The ordering here is important because this call might suspend.
-  // We don't want that to prevent the module graph for being initialized.
-  const data: Data = readMaybeChunk(tuple[2]);
-
-  return {
-    $$typeof: REACT_BLOCK_TYPE,
-    _status: -1,
-    _data: data,
-    _render: moduleExport,
-  };
-}
-
-function createLazyBlock<Props, Data>(
-  tuple: UninitializedBlockPayload<Data>,
-): LazyComponent<BlockComponent<Props, Data>, UninitializedBlockPayload<Data>> {
-  const lazyType: LazyComponent<
-    BlockComponent<Props, Data>,
-    UninitializedBlockPayload<Data>,
-  > = {
-    $$typeof: REACT_LAZY_TYPE,
-    _payload: tuple,
-    _init: initializeBlock,
-  };
-  return lazyType;
-}
-
 function createLazyChunkWrapper<T>(
   chunk: SomeChunk<T>,
 ): LazyComponent<T, SomeChunk<T>> {
@@ -354,25 +301,15 @@ export function parseModelString(
       } else {
         const id = parseInt(value.substring(1), 16);
         const chunk = getChunk(response, id);
-        if (parentObject[0] === REACT_BLOCK_TYPE) {
-          // Block types know how to deal with lazy values.
-          return chunk;
-        }
-        // For anything else we must Suspend this block if
-        // we don't yet have the value.
         return readChunk(chunk);
       }
     }
     case '@': {
-      if (value === '@') {
-        return REACT_BLOCK_TYPE;
-      } else {
-        const id = parseInt(value.substring(1), 16);
-        const chunk = getChunk(response, id);
-        // 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);
-      }
+      const id = parseInt(value.substring(1), 16);
+      const chunk = getChunk(response, id);
+      // 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);
     }
   }
   return value;
@@ -387,9 +324,6 @@ export function parseModelTuple(
     // TODO: Consider having React just directly accept these arrays as elements.
     // Or even change the ReactElement type to be an array.
     return createElement(tuple[1], tuple[2], tuple[3]);
-  } else if (tuple[0] === REACT_BLOCK_TYPE) {
-    // TODO: Consider having React just directly accept these arrays as blocks.
-    return createLazyBlock((tuple: any));
   }
   return value;
 }
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 3ba54c51262e..838db8337121 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -10,13 +10,10 @@
 
 'use strict';
 
-const ReactFeatureFlags = require('shared/ReactFeatureFlags');
-
 let act;
 let React;
 let ReactNoop;
 let ReactNoopFlightServer;
-let ReactNoopFlightServerRuntime;
 let ReactNoopFlightClient;
 let ErrorBoundary;
 
@@ -27,7 +24,6 @@ describe('ReactFlight', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
-    ReactNoopFlightServerRuntime = require('react-noop-renderer/flight-server-runtime');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = ReactNoop.act;
 
@@ -60,25 +56,6 @@ describe('ReactFlight', () => {
     };
   }
 
-  function block(render, load) {
-    if (load === undefined) {
-      return () => {
-        return ReactNoopFlightServerRuntime.serverBlockNoData(
-          moduleReference(render),
-        );
-      };
-    }
-    return function(...args) {
-      const curriedLoad = () => {
-        return load(...args);
-      };
-      return ReactNoopFlightServerRuntime.serverBlock(
-        moduleReference(render),
-        curriedLoad,
-      );
-    };
-  }
-
   it('can render a server component', () => {
     function Bar({text}) {
       return text.toUpperCase();
@@ -138,59 +115,6 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
   });
 
-  if (ReactFeatureFlags.enableBlocksAPI) {
-    it('can transfer a Block to the client and render there, without data', () => {
-      function User(props, data) {
-        return (
-          <span>
-            {props.greeting} {typeof data}
-          </span>
-        );
-      }
-      const loadUser = block(User);
-      const model = {
-        User: loadUser('Seb', 'Smith'),
-      };
-
-      const transport = ReactNoopFlightServer.render(model);
-
-      act(() => {
-        const rootModel = ReactNoopFlightClient.read(transport);
-        const UserClient = rootModel.User;
-        ReactNoop.render(<UserClient greeting="Hello" />);
-      });
-
-      expect(ReactNoop).toMatchRenderedOutput(<span>Hello undefined</span>);
-    });
-
-    it('can transfer a Block to the client and render there, with data', () => {
-      function load(firstName, lastName) {
-        return {name: firstName + ' ' + lastName};
-      }
-      function User(props, data) {
-        return (
-          <span>
-            {props.greeting}, {data.name}
-          </span>
-        );
-      }
-      const loadUser = block(User, load);
-      const model = {
-        User: loadUser('Seb', 'Smith'),
-      };
-
-      const transport = ReactNoopFlightServer.render(model);
-
-      act(() => {
-        const rootModel = ReactNoopFlightClient.read(transport);
-        const UserClient = rootModel.User;
-        ReactNoop.render(<UserClient greeting="Hello" />);
-      });
-
-      expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
-    });
-  }
-
   it('should error if a non-serializable value is passed to a host component', () => {
     function EventHandlerProp() {
       return (
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 24d74bd309fa..39f8f5118c26 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -30,7 +30,6 @@ import {
   SimpleMemoComponent,
   ContextProvider,
   ForwardRef,
-  Block,
 } from 'react-reconciler/src/ReactWorkTags';
 
 type CurrentDispatcherRef = typeof ReactSharedInternals.ReactCurrentDispatcher;
@@ -667,8 +666,7 @@ export function inspectHooksOfFiber(
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
-    fiber.tag !== ForwardRef &&
-    fiber.tag !== Block
+    fiber.tag !== ForwardRef
   ) {
     throw new Error(
       'Unknown Fiber. Needs to be a function component to inspect hooks.',
diff --git a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
index 581fdfa40a1b..f673dbd7b975 100644
--- a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
+++ b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
@@ -17,8 +17,6 @@ import type {LazyComponent} from 'react/src/ReactLazy';
 import type {CurrentDispatcherRef} from './types';
 
 import {
-  BLOCK_NUMBER,
-  BLOCK_SYMBOL_STRING,
   FORWARD_REF_NUMBER,
   FORWARD_REF_SYMBOL_STRING,
   LAZY_NUMBER,
@@ -276,14 +274,6 @@ export function describeUnknownElementTypeFrameInDEV(
           ownerFn,
           currentDispatcherRef,
         );
-      case BLOCK_NUMBER:
-      case BLOCK_SYMBOL_STRING:
-        return describeFunctionComponentFrame(
-          type._render,
-          source,
-          ownerFn,
-          currentDispatcherRef,
-        );
       case LAZY_NUMBER:
       case LAZY_SYMBOL_STRING: {
         const lazyComponent: LazyComponent<any, any> = (type: any);
diff --git a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
index ecb2ac6d3be5..b1f5948ab647 100644
--- a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
+++ b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
@@ -35,7 +35,6 @@ function describeFiber(
     IndeterminateComponent,
     SimpleMemoComponent,
     ForwardRef,
-    Block,
     ClassComponent,
   } = workTagMap;
 
@@ -70,13 +69,6 @@ function describeFiber(
         owner,
         currentDispatcherRef,
       );
-    case Block:
-      return describeFunctionComponentFrame(
-        workInProgress.type._render,
-        source,
-        owner,
-        currentDispatcherRef,
-      );
     case ClassComponent:
       return describeClassComponentFrame(
         workInProgress.type,
diff --git a/packages/react-devtools-shared/src/backend/ReactSymbols.js b/packages/react-devtools-shared/src/backend/ReactSymbols.js
index 70629f3bffa0..88e2ec29416d 100644
--- a/packages/react-devtools-shared/src/backend/ReactSymbols.js
+++ b/packages/react-devtools-shared/src/backend/ReactSymbols.js
@@ -13,9 +13,6 @@
 // 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 BLOCK_NUMBER = 0xead9;
-export const BLOCK_SYMBOL_STRING = 'Symbol(react.block)';
-
 export const CONCURRENT_MODE_NUMBER = 0xeacf;
 export const CONCURRENT_MODE_SYMBOL_STRING = 'Symbol(react.concurrent_mode)';
 
@@ -61,9 +58,6 @@ export const PROVIDER_SYMBOL_STRING = 'Symbol(react.provider)';
 export const SCOPE_NUMBER = 0xead7;
 export const SCOPE_SYMBOL_STRING = 'Symbol(react.scope)';
 
-export const SERVER_BLOCK_NUMBER = 0xeada;
-export const SERVER_BLOCK_SYMBOL_STRING = 'Symbol(react.server.block)';
-
 export const STRICT_MODE_NUMBER = 0xeacc;
 export const STRICT_MODE_SYMBOL_STRING = 'Symbol(react.strict_mode)';
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 208615bcccbb..1245c254c557 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -169,7 +169,6 @@ export function getInternalReactConstants(
   if (gte(version, '17.0.0-alpha')) {
     // TODO (Offscreen) Update the version number above to reflect the first Offscreen alpha/beta release.
     ReactTypeOfWork = {
-      Block: 22,
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -188,7 +187,7 @@ export function getInternalReactConstants(
       LazyComponent: 16,
       MemoComponent: 14,
       Mode: 8,
-      OffscreenComponent: 23, // Experimental
+      OffscreenComponent: 22, // Experimental
       Profiler: 12,
       SimpleMemoComponent: 15,
       SuspenseComponent: 13,
@@ -197,7 +196,6 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
-      Block: 22,
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -225,7 +223,6 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.4.3-alpha')) {
     ReactTypeOfWork = {
-      Block: -1, // Doesn't exist yet
       ClassComponent: 2,
       ContextConsumer: 11,
       ContextProvider: 12,
@@ -253,7 +250,6 @@ export function getInternalReactConstants(
     };
   } else {
     ReactTypeOfWork = {
-      Block: -1, // Doesn't exist yet
       ClassComponent: 2,
       ContextConsumer: 12,
       ContextProvider: 13,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index d4a01d7081e1..4ec480acedad 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -26,7 +26,6 @@ export type WorkFlags = number;
 export type ExpirationTime = number;
 
 export type WorkTagMap = {|
-  Block: WorkTag,
   ClassComponent: WorkTag,
   ContextConsumer: WorkTag,
   ContextProvider: WorkTag,
diff --git a/packages/react-noop-renderer/flight-server-runtime.js b/packages/react-noop-renderer/flight-server-runtime.js
deleted file mode 100644
index 3d6aec59668b..000000000000
--- a/packages/react-noop-renderer/flight-server-runtime.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from 'react-server/flight-server-runtime';
diff --git a/packages/react-noop-renderer/npm/flight-server-runtime.js b/packages/react-noop-renderer/npm/flight-server-runtime.js
deleted file mode 100644
index b04059111198..000000000000
--- a/packages/react-noop-renderer/npm/flight-server-runtime.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('react-server/flight-server-runtime');
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
index 1b4cdab557ac..020a0e87f726 100644
--- a/packages/react-noop-renderer/package.json
+++ b/packages/react-noop-renderer/package.json
@@ -29,7 +29,6 @@
     "flight-client.js",
     "flight-modules.js",
     "flight-server.js",
-    "flight-server-runtime.js",
     "cjs/"
   ]
 }
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 463ebefe876e..e9048959fd7a 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -9,8 +9,6 @@
 
 import type {ReactElement} from 'shared/ReactElementType';
 import type {ReactPortal} from 'shared/ReactTypes';
-import type {BlockComponent} from 'react/src/ReactBlock';
-import type {LazyComponent} from 'react/src/ReactLazy';
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane';
 
@@ -22,7 +20,6 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_PORTAL_TYPE,
   REACT_LAZY_TYPE,
-  REACT_BLOCK_TYPE,
 } from 'shared/ReactSymbols';
 import {
   FunctionComponent,
@@ -32,12 +29,10 @@ import {
   ForwardRef,
   Fragment,
   SimpleMemoComponent,
-  Block,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
 import {
   warnAboutStringRefs,
-  enableBlocksAPI,
   enableLazyElements,
 } from 'shared/ReactFeatureFlags';
 
@@ -251,22 +246,6 @@ function warnOnFunctionType(returnFiber: Fiber) {
   }
 }
 
-// We avoid inlining this to avoid potential deopts from using try/catch.
-/** @noinline */
-function resolveLazyType<T, P>(
-  lazyComponent: LazyComponent<T, P>,
-): LazyComponent<T, P> | T {
-  try {
-    // If we can, let's peek at the resulting type.
-    const payload = lazyComponent._payload;
-    const init = lazyComponent._init;
-    return init(payload);
-  } catch (x) {
-    // Leave it in place and let it throw again in the begin phase.
-    return lazyComponent;
-  }
-}
-
 // 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
@@ -412,28 +391,6 @@ function ChildReconciler(shouldTrackSideEffects) {
           existing._debugOwner = element._owner;
         }
         return existing;
-      } else if (enableBlocksAPI && current.tag === Block) {
-        // The new Block might not be initialized yet. We need to initialize
-        // it in case initializing it turns out it would match.
-        let type = element.type;
-        if (type.$$typeof === REACT_LAZY_TYPE) {
-          type = resolveLazyType(type);
-        }
-        if (
-          type.$$typeof === REACT_BLOCK_TYPE &&
-          ((type: any): BlockComponent<any, any>)._render ===
-            (current.type: BlockComponent<any, any>)._render
-        ) {
-          // Same as above but also update the .type field.
-          const existing = useFiber(current, element.props);
-          existing.return = returnFiber;
-          existing.type = type;
-          if (__DEV__) {
-            existing._debugSource = element._source;
-            existing._debugOwner = element._owner;
-          }
-          return existing;
-        }
       }
     }
     // Insert
@@ -1151,33 +1108,6 @@ function ChildReconciler(shouldTrackSideEffects) {
             }
             break;
           }
-          case Block:
-            if (enableBlocksAPI) {
-              let type = element.type;
-              if (type.$$typeof === REACT_LAZY_TYPE) {
-                type = resolveLazyType(type);
-              }
-              if (type.$$typeof === REACT_BLOCK_TYPE) {
-                // The new Block might not be initialized yet. We need to initialize
-                // it in case initializing it turns out it would match.
-                if (
-                  ((type: any): BlockComponent<any, any>)._render ===
-                  (child.type: BlockComponent<any, any>)._render
-                ) {
-                  deleteRemainingChildren(returnFiber, child.sibling);
-                  const existing = useFiber(child, element.props);
-                  existing.type = type;
-                  existing.return = returnFiber;
-                  if (__DEV__) {
-                    existing._debugSource = element._source;
-                    existing._debugOwner = element._owner;
-                  }
-                  return existing;
-                }
-              }
-            }
-          // We intentionally fallthrough here if enableBlocksAPI is not on.
-          // eslint-disable-next-lined no-fallthrough
           default: {
             if (
               child.elementType === element.type ||
@@ -1380,7 +1310,6 @@ function ChildReconciler(shouldTrackSideEffects) {
         // Intentionally fall through to the next case, which handles both
         // functions and classes
         // eslint-disable-next-lined no-fallthrough
-        case Block:
         case FunctionComponent:
         case ForwardRef:
         case SimpleMemoComponent: {
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 0aea86f03367..adb9c0418df0 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -9,8 +9,6 @@
 
 import type {ReactElement} from 'shared/ReactElementType';
 import type {ReactPortal} from 'shared/ReactTypes';
-import type {BlockComponent} from 'react/src/ReactBlock';
-import type {LazyComponent} from 'react/src/ReactLazy';
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane';
 
@@ -22,7 +20,6 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_PORTAL_TYPE,
   REACT_LAZY_TYPE,
-  REACT_BLOCK_TYPE,
 } from 'shared/ReactSymbols';
 import {
   FunctionComponent,
@@ -32,12 +29,10 @@ import {
   ForwardRef,
   Fragment,
   SimpleMemoComponent,
-  Block,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
 import {
   warnAboutStringRefs,
-  enableBlocksAPI,
   enableLazyElements,
 } from 'shared/ReactFeatureFlags';
 
@@ -251,22 +246,6 @@ function warnOnFunctionType(returnFiber: Fiber) {
   }
 }
 
-// We avoid inlining this to avoid potential deopts from using try/catch.
-/** @noinline */
-function resolveLazyType<T, P>(
-  lazyComponent: LazyComponent<T, P>,
-): LazyComponent<T, P> | T {
-  try {
-    // If we can, let's peek at the resulting type.
-    const payload = lazyComponent._payload;
-    const init = lazyComponent._init;
-    return init(payload);
-  } catch (x) {
-    // Leave it in place and let it throw again in the begin phase.
-    return lazyComponent;
-  }
-}
-
 // 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
@@ -419,28 +398,6 @@ function ChildReconciler(shouldTrackSideEffects) {
           existing._debugOwner = element._owner;
         }
         return existing;
-      } else if (enableBlocksAPI && current.tag === Block) {
-        // The new Block might not be initialized yet. We need to initialize
-        // it in case initializing it turns out it would match.
-        let type = element.type;
-        if (type.$$typeof === REACT_LAZY_TYPE) {
-          type = resolveLazyType(type);
-        }
-        if (
-          type.$$typeof === REACT_BLOCK_TYPE &&
-          ((type: any): BlockComponent<any, any>)._render ===
-            (current.type: BlockComponent<any, any>)._render
-        ) {
-          // Same as above but also update the .type field.
-          const existing = useFiber(current, element.props);
-          existing.return = returnFiber;
-          existing.type = type;
-          if (__DEV__) {
-            existing._debugSource = element._source;
-            existing._debugOwner = element._owner;
-          }
-          return existing;
-        }
       }
     }
     // Insert
@@ -1158,33 +1115,6 @@ function ChildReconciler(shouldTrackSideEffects) {
             }
             break;
           }
-          case Block:
-            if (enableBlocksAPI) {
-              let type = element.type;
-              if (type.$$typeof === REACT_LAZY_TYPE) {
-                type = resolveLazyType(type);
-              }
-              if (type.$$typeof === REACT_BLOCK_TYPE) {
-                // The new Block might not be initialized yet. We need to initialize
-                // it in case initializing it turns out it would match.
-                if (
-                  ((type: any): BlockComponent<any, any>)._render ===
-                  (child.type: BlockComponent<any, any>)._render
-                ) {
-                  deleteRemainingChildren(returnFiber, child.sibling);
-                  const existing = useFiber(child, element.props);
-                  existing.type = type;
-                  existing.return = returnFiber;
-                  if (__DEV__) {
-                    existing._debugSource = element._source;
-                    existing._debugOwner = element._owner;
-                  }
-                  return existing;
-                }
-              }
-            }
-          // We intentionally fallthrough here if enableBlocksAPI is not on.
-          // eslint-disable-next-lined no-fallthrough
           default: {
             if (
               child.elementType === element.type ||
@@ -1387,7 +1317,6 @@ function ChildReconciler(shouldTrackSideEffects) {
         // Intentionally fall through to the next case, which handles both
         // functions and classes
         // eslint-disable-next-lined no-fallthrough
-        case Block:
         case FunctionComponent:
         case ForwardRef:
         case SimpleMemoComponent: {
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index eca759ceaba6..0dcff2f776fb 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -27,7 +27,6 @@ import {
   enableProfilerTimer,
   enableFundamentalAPI,
   enableScopeAPI,
-  enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -53,7 +52,6 @@ import {
   LazyComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -88,7 +86,6 @@ import {
   REACT_LAZY_TYPE,
   REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
-  REACT_BLOCK_TYPE,
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
 } from 'shared/ReactSymbols';
@@ -239,11 +236,6 @@ export function resolveLazyComponentTag(Component: Function): WorkTag {
     if ($$typeof === REACT_MEMO_TYPE) {
       return MemoComponent;
     }
-    if (enableBlocksAPI) {
-      if ($$typeof === REACT_BLOCK_TYPE) {
-        return Block;
-      }
-    }
   }
   return IndeterminateComponent;
 }
@@ -516,9 +508,6 @@ export function createFiberFromTypeAndProps(
               fiberTag = LazyComponent;
               resolvedType = null;
               break getTag;
-            case REACT_BLOCK_TYPE:
-              fiberTag = Block;
-              break getTag;
             case REACT_FUNDAMENTAL_TYPE:
               if (enableFundamentalAPI) {
                 return createFiberFromFundamental(
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 6906869acee9..57c421e9076a 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -27,7 +27,6 @@ import {
   enableProfilerTimer,
   enableFundamentalAPI,
   enableScopeAPI,
-  enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -53,7 +52,6 @@ import {
   LazyComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -88,7 +86,6 @@ import {
   REACT_LAZY_TYPE,
   REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
-  REACT_BLOCK_TYPE,
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
 } from 'shared/ReactSymbols';
@@ -241,11 +238,6 @@ export function resolveLazyComponentTag(Component: Function): WorkTag {
     if ($$typeof === REACT_MEMO_TYPE) {
       return MemoComponent;
     }
-    if (enableBlocksAPI) {
-      if ($$typeof === REACT_BLOCK_TYPE) {
-        return Block;
-      }
-    }
   }
   return IndeterminateComponent;
 }
@@ -522,9 +514,6 @@ export function createFiberFromTypeAndProps(
               fiberTag = LazyComponent;
               resolvedType = null;
               break getTag;
-            case REACT_BLOCK_TYPE:
-              fiberTag = Block;
-              break getTag;
             case REACT_FUNDAMENTAL_TYPE:
               if (enableFundamentalAPI) {
                 return createFiberFromFundamental(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 99dd385674ee..163984840a21 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -8,7 +8,6 @@
  */
 
 import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
-import type {BlockComponent} from 'react/src/ReactBlock';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
@@ -49,7 +48,6 @@ import {
   IncompleteClassComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -76,7 +74,6 @@ import {
   enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
-  enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -780,75 +777,6 @@ function updateFunctionComponent(
   return workInProgress.child;
 }
 
-function updateBlock<Props, Data>(
-  current: Fiber | null,
-  workInProgress: Fiber,
-  block: BlockComponent<Props, Data>,
-  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 = block._render;
-  const data = block._data;
-
-  // The rest is a fork of updateFunctionComponent
-  let nextChildren;
-  prepareToReadContext(workInProgress, renderLanes);
-  if (__DEV__) {
-    ReactCurrentOwner.current = workInProgress;
-    setIsRendering(true);
-    nextChildren = renderWithHooks(
-      current,
-      workInProgress,
-      render,
-      nextProps,
-      data,
-      renderLanes,
-    );
-    if (
-      debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
-    ) {
-      disableLogs();
-      try {
-        nextChildren = renderWithHooks(
-          current,
-          workInProgress,
-          render,
-          nextProps,
-          data,
-          renderLanes,
-        );
-      } finally {
-        reenableLogs();
-      }
-    }
-    setIsRendering(false);
-  } else {
-    nextChildren = renderWithHooks(
-      current,
-      workInProgress,
-      render,
-      nextProps,
-      data,
-      renderLanes,
-    );
-  }
-
-  if (current !== null && !didReceiveUpdate) {
-    bailoutHooks(current, workInProgress, renderLanes);
-    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  }
-
-  // React DevTools reads this flag.
-  workInProgress.flags |= PerformedWork;
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
-}
-
 function updateClassComponent(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -1265,20 +1193,6 @@ function mountLazyComponent(
       );
       return child;
     }
-    case Block: {
-      if (enableBlocksAPI) {
-        // TODO: Resolve for Hot Reloading.
-        child = updateBlock(
-          null,
-          workInProgress,
-          Component,
-          props,
-          renderLanes,
-        );
-        return child;
-      }
-      break;
-    }
   }
   let hint = '';
   if (__DEV__) {
@@ -3454,14 +3368,6 @@ function beginWork(
       }
       break;
     }
-    case Block: {
-      if (enableBlocksAPI) {
-        const block = workInProgress.type;
-        const props = workInProgress.pendingProps;
-        return updateBlock(current, workInProgress, block, props, renderLanes);
-      }
-      break;
-    }
     case OffscreenComponent: {
       return updateOffscreenComponent(current, workInProgress, renderLanes);
     }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index ef41dff89a0e..e12f7f300b47 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -8,7 +8,6 @@
  */
 
 import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
-import type {BlockComponent} from 'react/src/ReactBlock';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
@@ -49,7 +48,6 @@ import {
   IncompleteClassComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -76,7 +74,6 @@ import {
   enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
-  enableBlocksAPI,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -782,75 +779,6 @@ function updateFunctionComponent(
   return workInProgress.child;
 }
 
-function updateBlock<Props, Data>(
-  current: Fiber | null,
-  workInProgress: Fiber,
-  block: BlockComponent<Props, Data>,
-  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 = block._render;
-  const data = block._data;
-
-  // The rest is a fork of updateFunctionComponent
-  let nextChildren;
-  prepareToReadContext(workInProgress, renderLanes);
-  if (__DEV__) {
-    ReactCurrentOwner.current = workInProgress;
-    setIsRendering(true);
-    nextChildren = renderWithHooks(
-      current,
-      workInProgress,
-      render,
-      nextProps,
-      data,
-      renderLanes,
-    );
-    if (
-      debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
-    ) {
-      disableLogs();
-      try {
-        nextChildren = renderWithHooks(
-          current,
-          workInProgress,
-          render,
-          nextProps,
-          data,
-          renderLanes,
-        );
-      } finally {
-        reenableLogs();
-      }
-    }
-    setIsRendering(false);
-  } else {
-    nextChildren = renderWithHooks(
-      current,
-      workInProgress,
-      render,
-      nextProps,
-      data,
-      renderLanes,
-    );
-  }
-
-  if (current !== null && !didReceiveUpdate) {
-    bailoutHooks(current, workInProgress, renderLanes);
-    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  }
-
-  // React DevTools reads this flag.
-  workInProgress.flags |= PerformedWork;
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
-}
-
 function updateClassComponent(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -1264,20 +1192,6 @@ function mountLazyComponent(
       );
       return child;
     }
-    case Block: {
-      if (enableBlocksAPI) {
-        // TODO: Resolve for Hot Reloading.
-        child = updateBlock(
-          null,
-          workInProgress,
-          Component,
-          props,
-          renderLanes,
-        );
-        return child;
-      }
-      break;
-    }
   }
   let hint = '';
   if (__DEV__) {
@@ -3470,14 +3384,6 @@ function beginWork(
       }
       break;
     }
-    case Block: {
-      if (enableBlocksAPI) {
-        const block = workInProgress.type;
-        const props = workInProgress.pendingProps;
-        return updateBlock(current, workInProgress, block, props, renderLanes);
-      }
-      break;
-    }
     case OffscreenComponent: {
       return updateOffscreenComponent(current, workInProgress, renderLanes);
     }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 699b0ac45ae9..a627cf4e17d0 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -55,7 +55,6 @@ import {
   SuspenseListComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -540,8 +539,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
     switch (finishedWork.tag) {
       case FunctionComponent:
       case ForwardRef:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         break;
       }
       case ClassComponent: {
@@ -1061,8 +1059,7 @@ function recursivelyCommitLayoutEffects(
         switch (tag) {
           case FunctionComponent:
           case ForwardRef:
-          case SimpleMemoComponent:
-          case Block: {
+          case SimpleMemoComponent: {
             if (
               enableProfilerTimer &&
               enableProfilerCommitHooks &&
@@ -1277,8 +1274,7 @@ function commitLayoutEffectsOnFiber(
     switch (tag) {
       case FunctionComponent:
       case ForwardRef:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         if (
           enableProfilerTimer &&
           enableProfilerCommitHooks &&
@@ -2131,8 +2127,7 @@ function commitUnmount(
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
       if (updateQueue !== null) {
         const lastEffect = updateQueue.lastEffect;
@@ -2725,8 +2720,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case MemoComponent:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         // 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,
@@ -2793,8 +2787,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       // 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,
@@ -3049,8 +3042,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       if (
         enableProfilerTimer &&
         enableProfilerCommitHooks &&
@@ -3082,8 +3074,7 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
   switch (current.tag) {
     case FunctionComponent:
     case ForwardRef:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       if (
         enableProfilerTimer &&
         enableProfilerCommitHooks &&
@@ -3115,8 +3106,7 @@ function commitPassiveMountOnFiber(
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       if (
         enableProfilerTimer &&
         enableProfilerCommitHooks &&
@@ -3147,8 +3137,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         invokeGuardedCallback(
           null,
           commitHookEffectListMount,
@@ -3182,8 +3171,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         invokeGuardedCallback(
           null,
           commitHookEffectListMount,
@@ -3208,8 +3196,7 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         invokeGuardedCallback(
           null,
           commitHookEffectListUnmount,
@@ -3242,8 +3229,7 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
     switch (fiber.tag) {
       case FunctionComponent:
       case ForwardRef:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         invokeGuardedCallback(
           null,
           commitHookEffectListUnmount,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 84ff06fe7f99..1ec6ed787481 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -52,7 +52,6 @@ import {
   SuspenseListComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -245,8 +244,7 @@ function commitBeforeMutationLifeCycles(
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       return;
     }
     case ClassComponent: {
@@ -484,8 +482,7 @@ function commitLifeCycles(
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       // 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
@@ -924,8 +921,7 @@ function commitUnmount(
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
       if (updateQueue !== null) {
         const lastEffect = updateQueue.lastEffect;
@@ -1486,8 +1482,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case MemoComponent:
-      case SimpleMemoComponent:
-      case Block: {
+      case SimpleMemoComponent: {
         // 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,
@@ -1549,8 +1544,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
-    case SimpleMemoComponent:
-    case Block: {
+    case SimpleMemoComponent: {
       // 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,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index e32b0d394f5b..0a187f9c84b0 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -54,7 +54,6 @@ import {
   IncompleteClassComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -140,7 +139,6 @@ import {
   enableSuspenseServerRenderer,
   enableFundamentalAPI,
   enableScopeAPI,
-  enableBlocksAPI,
   enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -1505,12 +1503,6 @@ function completeWork(
       }
       break;
     }
-    case Block:
-      if (enableBlocksAPI) {
-        bubbleProperties(workInProgress);
-        return null;
-      }
-      break;
     case OffscreenComponent:
     case LegacyHiddenComponent: {
       popRenderLanes(workInProgress);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 618705accff8..21ffea1c92dd 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -54,7 +54,6 @@ import {
   IncompleteClassComponent,
   FundamentalComponent,
   ScopeComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
@@ -120,7 +119,6 @@ import {
   enableSuspenseServerRenderer,
   enableFundamentalAPI,
   enableScopeAPI,
-  enableBlocksAPI,
   enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -1256,11 +1254,6 @@ function completeWork(
       }
       break;
     }
-    case Block:
-      if (enableBlocksAPI) {
-        return null;
-      }
-      break;
     case OffscreenComponent:
     case LegacyHiddenComponent: {
       popRenderLanes(workInProgress);
diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js
index b539ee795084..43ad9fd3b542 100644
--- a/packages/react-reconciler/src/ReactFiberComponentStack.js
+++ b/packages/react-reconciler/src/ReactFiberComponentStack.js
@@ -18,7 +18,6 @@ import {
   IndeterminateComponent,
   ForwardRef,
   SimpleMemoComponent,
-  Block,
   ClassComponent,
 } from './ReactWorkTags';
 import {
@@ -49,8 +48,6 @@ function describeFiber(fiber: Fiber): string {
       return describeFunctionComponentFrame(fiber.type, source, owner);
     case ForwardRef:
       return describeFunctionComponentFrame(fiber.type.render, source, owner);
-    case Block:
-      return describeFunctionComponentFrame(fiber.type._render, source, owner);
     case ClassComponent:
       return describeClassComponentFrame(fiber.type, source, owner);
     default:
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ee2df3564cc0..d80988906706 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -110,7 +110,6 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  Block,
 } from './ReactWorkTags';
 import {LegacyRoot} from './ReactRootTags';
 import {
@@ -2447,8 +2446,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       tag !== FunctionComponent &&
       tag !== ForwardRef &&
       tag !== MemoComponent &&
-      tag !== SimpleMemoComponent &&
-      tag !== Block
+      tag !== SimpleMemoComponent
     ) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;
@@ -2495,8 +2493,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
       tag !== FunctionComponent &&
       tag !== ForwardRef &&
       tag !== MemoComponent &&
-      tag !== SimpleMemoComponent &&
-      tag !== Block
+      tag !== SimpleMemoComponent
     ) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index cece268e3d01..24875508a9c3 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -108,7 +108,6 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  Block,
   OffscreenComponent,
   LegacyHiddenComponent,
   ScopeComponent,
@@ -3006,8 +3005,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       tag !== FunctionComponent &&
       tag !== ForwardRef &&
       tag !== MemoComponent &&
-      tag !== SimpleMemoComponent &&
-      tag !== Block
+      tag !== SimpleMemoComponent
     ) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;
@@ -3054,8 +3052,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
       tag !== FunctionComponent &&
       tag !== ForwardRef &&
       tag !== MemoComponent &&
-      tag !== SimpleMemoComponent &&
-      tag !== Block
+      tag !== SimpleMemoComponent
     ) {
       // Only warn for user-defined components, not internal ones like Suspense.
       return;
diff --git a/packages/react-reconciler/src/ReactWorkTags.js b/packages/react-reconciler/src/ReactWorkTags.js
index 44717fd372e5..84cd9ebd4ba5 100644
--- a/packages/react-reconciler/src/ReactWorkTags.js
+++ b/packages/react-reconciler/src/ReactWorkTags.js
@@ -31,8 +31,7 @@ export type WorkTag =
   | 20
   | 21
   | 22
-  | 23
-  | 24;
+  | 23;
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
@@ -56,6 +55,5 @@ export const DehydratedFragment = 18;
 export const SuspenseListComponent = 19;
 export const FundamentalComponent = 20;
 export const ScopeComponent = 21;
-export const Block = 22;
-export const OffscreenComponent = 23;
-export const LegacyHiddenComponent = 24;
+export const OffscreenComponent = 22;
+export const LegacyHiddenComponent = 23;
diff --git a/packages/react-reconciler/src/__tests__/ReactBlocks-test.js b/packages/react-reconciler/src/__tests__/ReactBlocks-test.js
deleted file mode 100644
index 18971c18a0c4..000000000000
--- a/packages/react-reconciler/src/__tests__/ReactBlocks-test.js
+++ /dev/null
@@ -1,351 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- * @jest-environment node
- */
-
-let React;
-let ReactNoop;
-let useState;
-let Suspense;
-let block;
-let readString;
-let resolvePromises;
-let Scheduler;
-
-describe('ReactBlocks', () => {
-  beforeEach(() => {
-    jest.resetModules();
-
-    Scheduler = require('scheduler');
-    React = require('react');
-    ReactNoop = require('react-noop-renderer');
-
-    block = React.unstable_block;
-    useState = React.useState;
-    Suspense = React.Suspense;
-    const cache = new Map();
-    let unresolved = [];
-    readString = function(text) {
-      let entry = cache.get(text);
-      if (!entry) {
-        entry = {
-          promise: new Promise(resolve => {
-            unresolved.push(() => {
-              entry.resolved = true;
-              resolve();
-            });
-          }),
-          resolved: false,
-        };
-        cache.set(text, entry);
-      }
-      if (!entry.resolved) {
-        throw entry.promise;
-      }
-      return text;
-    };
-
-    resolvePromises = () => {
-      const res = unresolved;
-      unresolved = [];
-      res.forEach(r => r());
-    };
-  });
-
-  // @gate experimental
-  it('renders a simple component', () => {
-    function User(props, data) {
-      return <div>{typeof data}</div>;
-    }
-
-    function App({Component}) {
-      return (
-        <Suspense fallback={'Loading...'}>
-          <Component name="Name" />
-        </Suspense>
-      );
-    }
-
-    const loadUser = block(User);
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App Component={loadUser()} />);
-    });
-
-    expect(ReactNoop).toMatchRenderedOutput(<div>undefined</div>);
-  });
-
-  // @gate experimental
-  it('prints the name of the render function in warnings', () => {
-    function load(firstName) {
-      return {
-        name: firstName,
-      };
-    }
-
-    function User(props, data) {
-      const array = [<span>{data.name}</span>];
-      return <div>{array}</div>;
-    }
-
-    function App({Component}) {
-      return (
-        <Suspense fallback={'Loading...'}>
-          <Component name="Name" />
-        </Suspense>
-      );
-    }
-
-    const loadUser = block(User, load);
-
-    expect(() => {
-      ReactNoop.act(() => {
-        ReactNoop.render(<App Component={loadUser()} />);
-      });
-    }).toErrorDev(
-      'Warning: Each child in a list should have a unique ' +
-        '"key" prop.\n\nCheck the render method of `User`. See ' +
-        'https://reactjs.org/link/warning-keys for more information.\n' +
-        '    in span (at **)\n' +
-        '    in User (at **)\n' +
-        '    in Suspense (at **)\n' +
-        '    in App (at **)',
-    );
-  });
-
-  // @gate experimental
-  it('renders a component with a suspending load', async () => {
-    function load(id) {
-      return {
-        id: id,
-        name: readString('Sebastian'),
-      };
-    }
-
-    function Render(props, data) {
-      return (
-        <span>
-          {props.title}: {data.name}
-        </span>
-      );
-    }
-
-    const loadUser = block(Render, load);
-
-    function App({User}) {
-      return (
-        <Suspense fallback={'Loading...'}>
-          <User title="Name" />
-        </Suspense>
-      );
-    }
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App User={loadUser(123)} />);
-    });
-
-    expect(ReactNoop).toMatchRenderedOutput('Loading...');
-
-    await ReactNoop.act(async () => {
-      resolvePromises();
-    });
-
-    expect(ReactNoop).toMatchRenderedOutput(<span>Name: Sebastian</span>);
-  });
-
-  // @gate experimental
-  it('does not support a lazy wrapper around a chunk', async () => {
-    function load(id) {
-      return {
-        id: id,
-        name: readString('Sebastian'),
-      };
-    }
-
-    function Render(props, data) {
-      return (
-        <span>
-          {props.title}: {data.name}
-        </span>
-      );
-    }
-
-    const loadUser = block(Render, load);
-
-    function App({User}) {
-      return (
-        <Suspense fallback={'Loading...'}>
-          <User title="Name" />
-        </Suspense>
-      );
-    }
-
-    let resolveLazy;
-    const LazyUser = React.lazy(
-      () =>
-        new Promise(resolve => {
-          resolveLazy = function() {
-            resolve({
-              default: loadUser(123),
-            });
-          };
-        }),
-    );
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App User={LazyUser} />);
-    });
-
-    expect(ReactNoop).toMatchRenderedOutput('Loading...');
-
-    // Resolve the component.
-    await resolveLazy();
-
-    expect(Scheduler).toFlushAndThrow(
-      '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?'
-          : ''),
-    );
-  });
-
-  // @gate experimental
-  it('can receive updated data for the same component', async () => {
-    function load(firstName) {
-      return {
-        name: firstName,
-      };
-    }
-
-    function Render(props, data) {
-      const [initialName] = useState(data.name);
-      return (
-        <>
-          <span>Initial name: {initialName}</span>
-          <span>Latest name: {data.name}</span>
-        </>
-      );
-    }
-
-    const loadUser = block(Render, load);
-
-    function App({User}) {
-      return (
-        <Suspense fallback={'Loading...'}>
-          <User title="Name" />
-        </Suspense>
-      );
-    }
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App User={loadUser('Sebastian')} />);
-    });
-
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <span>Initial name: Sebastian</span>
-        <span>Latest name: Sebastian</span>
-      </>,
-    );
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App User={loadUser('Dan')} />);
-    });
-
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <span>Initial name: Sebastian</span>
-        <span>Latest name: Dan</span>
-      </>,
-    );
-  });
-
-  // Regression test.
-  // @gate experimental
-  it('does not render stale data after ping', async () => {
-    function Child() {
-      return <span>Name: {readString('Sebastian')}</span>;
-    }
-
-    const loadParent = block(
-      function Parent(props, data) {
-        return (
-          <Suspense fallback="Loading...">
-            {data.name ? <Child /> : <span>Empty</span>}
-          </Suspense>
-        );
-      },
-      function load(name) {
-        return {name};
-      },
-    );
-
-    function App({Page}) {
-      return <Page />;
-    }
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App Page={loadParent(null)} />);
-    });
-    expect(ReactNoop).toMatchRenderedOutput(<span>Empty</span>);
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App Page={loadParent('Sebastian')} />);
-    });
-    await ReactNoop.act(async () => {
-      resolvePromises();
-    });
-    expect(ReactNoop).toMatchRenderedOutput(<span>Name: Sebastian</span>);
-  });
-
-  // Regression test.
-  // @gate experimental
-  it('does not render stale data after ping and setState', async () => {
-    function Child() {
-      return <span>Name: {readString('Sebastian')}</span>;
-    }
-
-    let _setSuspend;
-    const loadParent = block(
-      function Parent(props, data) {
-        const [suspend, setSuspend] = useState(true);
-        _setSuspend = setSuspend;
-        if (!suspend) {
-          return <span>{data.name}</span>;
-        }
-        return (
-          <Suspense fallback="Loading...">
-            {data.name ? <Child /> : <span>Empty</span>}
-          </Suspense>
-        );
-      },
-      function load(name) {
-        return {name};
-      },
-    );
-
-    function App({Page}) {
-      return <Page />;
-    }
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App Page={loadParent(null)} />);
-    });
-    expect(ReactNoop).toMatchRenderedOutput(<span>Empty</span>);
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App Page={loadParent('Sebastian')} />);
-    });
-    await ReactNoop.act(async () => {
-      _setSuspend(false);
-      resolvePromises();
-    });
-    expect(ReactNoop).toMatchRenderedOutput(<span>Sebastian</span>);
-  });
-});
diff --git a/packages/react-server/flight-server-runtime.js b/packages/react-server/flight-server-runtime.js
deleted file mode 100644
index 34f1dcd8f029..000000000000
--- a/packages/react-server/flight-server-runtime.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from './src/ReactFlightServerRuntime';
diff --git a/packages/react-server/npm/flight-server-runtime.js b/packages/react-server/npm/flight-server-runtime.js
deleted file mode 100644
index 12a1d8124927..000000000000
--- a/packages/react-server/npm/flight-server-runtime.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-flight-server-runtime.production.min.js');
-} else {
-  module.exports = require('./cjs/react-server-flight-server-runtime.development.js');
-}
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
index 7e6129e61198..3e9252d2615d 100644
--- a/packages/react-server/package.json
+++ b/packages/react-server/package.json
@@ -14,7 +14,6 @@
     "README.md",
     "index.js",
     "flight.js",
-    "flight-server-runtime.js",
     "cjs/"
   ],
   "main": "index.js",
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 97bee6c04c60..76690a192eca 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -31,7 +31,6 @@ import {
 } from './ReactFlightServerConfig';
 
 import {
-  REACT_BLOCK_TYPE,
   REACT_ELEMENT_TYPE,
   REACT_DEBUG_TRACING_MODE_TYPE,
   REACT_FORWARD_REF_TYPE,
@@ -42,7 +41,6 @@ import {
   REACT_OFFSCREEN_TYPE,
   REACT_PROFILER_TYPE,
   REACT_SCOPE_TYPE,
-  REACT_SERVER_BLOCK_TYPE,
   REACT_STRICT_MODE_TYPE,
   REACT_SUSPENSE_TYPE,
   REACT_SUSPENSE_LIST_TYPE,
@@ -138,8 +136,6 @@ function attemptResolveElement(element: React$Element<any>): ReactModel {
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
     return [REACT_ELEMENT_TYPE, type, element.key, element.props];
-  } else if (type[0] === REACT_SERVER_BLOCK_TYPE) {
-    return [REACT_ELEMENT_TYPE, type, element.key, element.props];
   } else if (
     type === REACT_FRAGMENT_TYPE ||
     type === REACT_STRICT_MODE_TYPE ||
@@ -386,62 +382,13 @@ export function resolveModelToJSON(
   switch (value) {
     case REACT_ELEMENT_TYPE:
       return '$';
-    case REACT_SERVER_BLOCK_TYPE:
-      return '@';
     case REACT_LAZY_TYPE:
-    case REACT_BLOCK_TYPE:
       invariant(
         false,
-        'React Blocks (and Lazy Components) are expected to be replaced by a ' +
-          'compiler on the server. Try configuring your compiler set up and avoid ' +
-          'using React.lazy inside of Blocks.',
+        'React Lazy Components are not yet supported on the server.',
       );
   }
 
-  if (parent[0] === REACT_SERVER_BLOCK_TYPE) {
-    // We're currently encoding part of a Block. Look up which key.
-    switch (key) {
-      case '1': {
-        // Module reference
-        // Encode as a normal value.
-        break;
-      }
-      case '2': {
-        // Load function
-        const load: () => ReactModel = (value: any);
-        try {
-          // Attempt to resolve the data.
-          return load();
-        } catch (x) {
-          if (
-            typeof x === 'object' &&
-            x !== null &&
-            typeof x.then === 'function'
-          ) {
-            // Something suspended, we'll need to create a new segment and resolve it later.
-            request.pendingChunks++;
-            const newSegment = createSegment(request, load);
-            const ping = newSegment.ping;
-            x.then(ping, ping);
-            return serializeByValueID(newSegment.id);
-          } else {
-            // This load failed, encode the error as a separate row and reference that.
-            request.pendingChunks++;
-            const errorId = request.nextChunkId++;
-            emitErrorChunk(request, errorId, x);
-            return serializeByValueID(errorId);
-          }
-        }
-      }
-      default: {
-        invariant(
-          false,
-          'A server block should never encode any other slots. This is a bug in React.',
-        );
-      }
-    }
-  }
-
   // Resolve server components.
   while (
     typeof value === 'object' &&
diff --git a/packages/react-server/src/ReactFlightServerRuntime.js b/packages/react-server/src/ReactFlightServerRuntime.js
deleted file mode 100644
index be12e47baa85..000000000000
--- a/packages/react-server/src/ReactFlightServerRuntime.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {BlockRenderFunction} from 'react/src/ReactBlock';
-
-import type {ModuleReference} from './ReactFlightServerConfig';
-
-import {REACT_SERVER_BLOCK_TYPE} from 'shared/ReactSymbols';
-
-export type ServerBlockComponent<Props, Data> =
-  | [
-      Symbol | number,
-      ModuleReference<BlockRenderFunction<Props, Data>>,
-      () => Data,
-    ]
-  | [Symbol | number, ModuleReference<BlockRenderFunction<Props, void>>];
-
-opaque type ServerBlock<Props>: React$AbstractComponent<
-  Props,
-  null,
-> = React$AbstractComponent<Props, null>;
-
-export function serverBlock<Props, Data>(
-  moduleReference: ModuleReference<BlockRenderFunction<Props, Data>>,
-  loadData: () => Data,
-): ServerBlock<Props> {
-  const blockComponent: ServerBlockComponent<Props, Data> = [
-    REACT_SERVER_BLOCK_TYPE,
-    moduleReference,
-    loadData,
-  ];
-
-  // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
-  return blockComponent;
-}
-
-export function serverBlockNoData<Props>(
-  moduleReference: ModuleReference<BlockRenderFunction<Props, void>>,
-): ServerBlock<Props> {
-  const blockComponent: ServerBlockComponent<Props, void> = [
-    REACT_SERVER_BLOCK_TYPE,
-    moduleReference,
-  ];
-  // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
-  return blockComponent;
-}
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 899f4c654288..c4eea12e8a55 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -39,7 +39,6 @@ import {
   Profiler,
   MemoComponent,
   SimpleMemoComponent,
-  Block,
   IncompleteClassComponent,
   ScopeComponent,
 } from 'react-reconciler/src/ReactWorkTags';
@@ -195,14 +194,6 @@ function toTree(node: ?Fiber) {
         instance: null,
         rendered: childrenToTree(node.child),
       };
-    case Block:
-      return {
-        nodeType: 'block',
-        type: node.type,
-        props: {...node.memoizedProps},
-        instance: null,
-        rendered: childrenToTree(node.child),
-      };
     case HostComponent: {
       return {
         nodeType: 'host',
@@ -240,7 +231,6 @@ const validWrapperTypes = new Set([
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  Block,
   // Normally skipped, but used when there's more than one root child.
   HostRoot,
 ]);
diff --git a/packages/react-transport-dom-relay/server-runtime.js b/packages/react-transport-dom-relay/server-runtime.js
deleted file mode 100644
index f57e18f99018..000000000000
--- a/packages/react-transport-dom-relay/server-runtime.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from 'react-server/src/ReactFlightServerRuntime';
diff --git a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index a9dd37c2eddc..035f5c1abd0b 100644
--- a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -12,7 +12,6 @@ let React;
 let ReactDOM;
 let JSResourceReference;
 let ReactDOMFlightRelayServer;
-let ReactDOMFlightRelayServerRuntime;
 let ReactDOMFlightRelayClient;
 
 describe('ReactFlightDOMRelay', () => {
@@ -23,7 +22,6 @@ describe('ReactFlightDOMRelay', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMFlightRelayServer = require('react-transport-dom-relay/server');
-    ReactDOMFlightRelayServerRuntime = require('react-transport-dom-relay/server-runtime');
     ReactDOMFlightRelayClient = require('react-transport-dom-relay');
     JSResourceReference = require('JSResourceReference');
   });
@@ -50,22 +48,6 @@ describe('ReactFlightDOMRelay', () => {
     return model;
   }
 
-  function block(render, load) {
-    const reference = new JSResourceReference(render);
-    if (load === undefined) {
-      return ReactDOMFlightRelayServerRuntime.serverBlock(reference);
-    }
-    return function(...args) {
-      const curriedLoad = () => {
-        return load(...args);
-      };
-      return ReactDOMFlightRelayServerRuntime.serverBlock(
-        reference,
-        curriedLoad,
-      );
-    };
-  }
-
   it('can render a server component', () => {
     function Bar({text}) {
       return text.toUpperCase();
@@ -134,38 +116,6 @@ describe('ReactFlightDOMRelay', () => {
     expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
   });
 
-  // @gate experimental
-  it('can transfer a Block to the client and render there', () => {
-    function load(firstName, lastName) {
-      return {name: firstName + ' ' + lastName};
-    }
-    function User(props, data) {
-      return (
-        <span>
-          {props.greeting}, {data.name}
-        </span>
-      );
-    }
-    const loadUser = block(User, load);
-    const model = {
-      User: loadUser('Seb', 'Smith'),
-    };
-
-    const transport = [];
-    ReactDOMFlightRelayServer.render(model, transport);
-
-    const modelClient = readThrough(transport);
-
-    const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
-    act(() => {
-      const UserClient = modelClient.User;
-      root.render(<UserClient greeting="Hello" />);
-    });
-
-    expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
-  });
-
   // @gate experimental
   it('can reasonably handle different element types', () => {
     const {
diff --git a/packages/react-transport-dom-webpack/npm/server-runtime.js b/packages/react-transport-dom-webpack/npm/server-runtime.js
deleted file mode 100644
index 2f24534ec01c..000000000000
--- a/packages/react-transport-dom-webpack/npm/server-runtime.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-transport-dom-webpack-server-runtime.production.min.js');
-} else {
-  module.exports = require('./cjs/react-transport-dom-webpack-server-runtime.development.js');
-}
diff --git a/packages/react-transport-dom-webpack/package.json b/packages/react-transport-dom-webpack/package.json
index 5af19cb1d034..b362d0847afa 100644
--- a/packages/react-transport-dom-webpack/package.json
+++ b/packages/react-transport-dom-webpack/package.json
@@ -17,7 +17,6 @@
     "server.js",
     "server.browser.js",
     "server.node.js",
-    "server-runtime.js",
     "cjs/",
     "umd/"
   ],
diff --git a/packages/react-transport-dom-webpack/server-runtime.js b/packages/react-transport-dom-webpack/server-runtime.js
deleted file mode 100644
index f57e18f99018..000000000000
--- a/packages/react-transport-dom-webpack/server-runtime.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from 'react-server/src/ReactFlightServerRuntime';
diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 8b690219ec6e..04910ff98e61 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -29,7 +29,6 @@ let Stream;
 let React;
 let ReactDOM;
 let ReactTransportDOMServer;
-let ReactTransportDOMServerRuntime;
 let ReactTransportDOMClient;
 
 describe('ReactFlightDOM', () => {
@@ -42,7 +41,6 @@ describe('ReactFlightDOM', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTransportDOMServer = require('react-transport-dom-webpack/server');
-    ReactTransportDOMServerRuntime = require('react-transport-dom-webpack/server-runtime');
     ReactTransportDOMClient = require('react-transport-dom-webpack');
   });
 
@@ -78,25 +76,6 @@ describe('ReactFlightDOM', () => {
     return {$$typeof: MODULE_TAG, name: 'path/' + idx};
   }
 
-  function block(render, load) {
-    if (load === undefined) {
-      return () => {
-        return ReactTransportDOMServerRuntime.serverBlockNoData(
-          moduleReference(render),
-        );
-      };
-    }
-    return function(...args) {
-      const curriedLoad = () => {
-        return load(...args);
-      };
-      return ReactTransportDOMServerRuntime.serverBlock(
-        moduleReference(render),
-        curriedLoad,
-      );
-    };
-  }
-
   async function waitForSuspense(fn) {
     while (true) {
       try {
@@ -273,220 +252,6 @@ describe('ReactFlightDOM', () => {
     expect(container.innerHTML).toBe('<p>@div</p>');
   });
 
-  // @gate experimental
-  it('should progressively reveal Blocks', async () => {
-    const {Suspense} = React;
-
-    class ErrorBoundary extends React.Component {
-      state = {hasError: false, error: null};
-      static getDerivedStateFromError(error) {
-        return {
-          hasError: true,
-          error,
-        };
-      }
-      render() {
-        if (this.state.hasError) {
-          return this.props.fallback(this.state.error);
-        }
-        return this.props.children;
-      }
-    }
-
-    // Model
-    function Text({children}) {
-      return children;
-    }
-    function makeDelayedTextBlock() {
-      let error, _resolve, _reject;
-      let promise = new Promise((resolve, reject) => {
-        _resolve = () => {
-          promise = null;
-          resolve();
-        };
-        _reject = e => {
-          error = e;
-          promise = null;
-          reject(e);
-        };
-      });
-      function load() {
-        if (promise) {
-          throw promise;
-        }
-        if (error) {
-          throw error;
-        }
-        return 'data';
-      }
-      function DelayedText({children}, data) {
-        if (data !== 'data') {
-          throw new Error('No data');
-        }
-        return <Text>{children}</Text>;
-      }
-      const loadBlock = block(DelayedText, load);
-      return [loadBlock(), _resolve, _reject];
-    }
-
-    function makeDelayedText() {
-      let error, _resolve, _reject;
-      let promise = new Promise((resolve, reject) => {
-        _resolve = () => {
-          promise = null;
-          resolve();
-        };
-        _reject = e => {
-          error = e;
-          promise = null;
-          reject(e);
-        };
-      });
-      function DelayedText({children}, data) {
-        if (promise) {
-          throw promise;
-        }
-        if (error) {
-          throw error;
-        }
-        return <Text>{children}</Text>;
-      }
-      return [DelayedText, _resolve, _reject];
-    }
-
-    const [FriendsModel, resolveFriendsModel] = makeDelayedText();
-    const [NameModel, resolveNameModel] = makeDelayedText();
-    const [PostsModel, resolvePostsModel] = makeDelayedTextBlock();
-    const [PhotosModel, resolvePhotosModel] = makeDelayedTextBlock();
-    const [GamesModel, , rejectGamesModel] = makeDelayedTextBlock();
-    function ProfileMore() {
-      return {
-        avatar: <Text>:avatar:</Text>,
-        friends: <FriendsModel>:friends:</FriendsModel>,
-        posts: <PostsModel>:posts:</PostsModel>,
-        games: <GamesModel>:games:</GamesModel>,
-      };
-    }
-    const profileModel = {
-      photos: <PhotosModel>:photos:</PhotosModel>,
-      name: <NameModel>:name:</NameModel>,
-      more: <ProfileMore />,
-    };
-
-    // View
-    function ProfileDetails({response}) {
-      const model = response.readRoot();
-      return (
-        <div>
-          {model.name}
-          {model.more.avatar}
-        </div>
-      );
-    }
-    function ProfileSidebar({response}) {
-      const model = response.readRoot();
-      return (
-        <div>
-          {model.photos}
-          {model.more.friends}
-        </div>
-      );
-    }
-    function ProfilePosts({response}) {
-      return <div>{response.readRoot().more.posts}</div>;
-    }
-    function ProfileGames({response}) {
-      return <div>{response.readRoot().more.games}</div>;
-    }
-    function ProfilePage({response}) {
-      return (
-        <>
-          <Suspense fallback={<p>(loading)</p>}>
-            <ProfileDetails response={response} />
-            <Suspense fallback={<p>(loading sidebar)</p>}>
-              <ProfileSidebar response={response} />
-            </Suspense>
-            <Suspense fallback={<p>(loading posts)</p>}>
-              <ProfilePosts response={response} />
-            </Suspense>
-            <ErrorBoundary fallback={e => <p>{e.message}</p>}>
-              <Suspense fallback={<p>(loading games)</p>}>
-                <ProfileGames response={response} />
-              </Suspense>
-            </ErrorBoundary>
-          </Suspense>
-        </>
-      );
-    }
-
-    const {writable, readable} = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(
-      profileModel,
-      writable,
-      webpackMap,
-    );
-    const response = ReactTransportDOMClient.createFromReadableStream(readable);
-
-    const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
-    await act(async () => {
-      root.render(<ProfilePage response={response} />);
-    });
-    expect(container.innerHTML).toBe('<p>(loading)</p>');
-
-    // This isn't enough to show anything.
-    await act(async () => {
-      resolveFriendsModel();
-    });
-    expect(container.innerHTML).toBe('<p>(loading)</p>');
-
-    // We can now show the details. Sidebar and posts are still loading.
-    await act(async () => {
-      resolveNameModel();
-    });
-    // Advance time enough to trigger a nested fallback.
-    jest.advanceTimersByTime(500);
-    expect(container.innerHTML).toBe(
-      '<div>:name::avatar:</div>' +
-        '<p>(loading sidebar)</p>' +
-        '<p>(loading posts)</p>' +
-        '<p>(loading games)</p>',
-    );
-
-    // Let's *fail* loading games.
-    await act(async () => {
-      rejectGamesModel(new Error('Game over'));
-    });
-    expect(container.innerHTML).toBe(
-      '<div>:name::avatar:</div>' +
-        '<p>(loading sidebar)</p>' +
-        '<p>(loading posts)</p>' +
-        '<p>Game over</p>', // TODO: should not have message in prod.
-    );
-
-    // We can now show the sidebar.
-    await act(async () => {
-      resolvePhotosModel();
-    });
-    expect(container.innerHTML).toBe(
-      '<div>:name::avatar:</div>' +
-        '<div>:photos::friends:</div>' +
-        '<p>(loading posts)</p>' +
-        '<p>Game over</p>', // TODO: should not have message in prod.
-    );
-
-    // Show everything.
-    await act(async () => {
-      resolvePostsModel();
-    });
-    expect(container.innerHTML).toBe(
-      '<div>:name::avatar:</div>' +
-        '<div>:photos::friends:</div>' +
-        '<div>:posts:</div>' +
-        '<p>Game over</p>', // TODO: should not have message in prod.
-    );
-  });
-
   // @gate experimental
   it('should progressively reveal server components', async () => {
     const {Suspense} = React;
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 5f79d3de1fef..db5d2b2a2233 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -50,9 +50,6 @@ export {
   startTransition as unstable_startTransition,
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
-  // enableBlocksAPI
-  block,
-  block as unstable_block,
   // enableScopeAPI
   unstable_Scope,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 0b5e7efd1350..3b2b47f1ee7c 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -44,8 +44,6 @@ export {
   useDeferredValue as unstable_useDeferredValue,
   startTransition as unstable_startTransition,
   SuspenseList as unstable_SuspenseList,
-  // enableBlocksAPI
-  block as unstable_block,
   unstable_useOpaqueIdentifier,
   // enableDebugTracing
   unstable_DebugTracingMode,
diff --git a/packages/react/index.js b/packages/react/index.js
index 9fd5ccfbf37f..5a170667c082 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -78,8 +78,6 @@ export {
   useDeferredValue as unstable_useDeferredValue,
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
-  block,
-  block as unstable_block,
   unstable_LegacyHidden,
   unstable_createFundamental,
   unstable_Scope,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index a5b509460d89..8217fa158d12 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -49,9 +49,6 @@ export {
   startTransition as unstable_startTransition,
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
-  // enableBlocksAPI
-  block,
-  block as unstable_block,
   // enableScopeAPI
   unstable_Scope,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index d5367da328bb..c5e61fb55c67 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -32,7 +32,6 @@ import {createContext} from './ReactContext';
 import {lazy} from './ReactLazy';
 import {forwardRef} from './ReactForwardRef';
 import {memo} from './ReactMemo';
-import {block} from './ReactBlock';
 import {
   useCallback,
   useContext,
@@ -111,8 +110,6 @@ export {
   useDeferredValue,
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
-  // enableBlocksAPI
-  block,
   // enableFundamentalAPI
   createFundamental as unstable_createFundamental,
   // enableScopeAPI
diff --git a/packages/react/src/ReactBlock.js b/packages/react/src/ReactBlock.js
deleted file mode 100644
index de5c3ac7ec7a..000000000000
--- a/packages/react/src/ReactBlock.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {LazyComponent} from './ReactLazy';
-
-import {
-  REACT_LAZY_TYPE,
-  REACT_BLOCK_TYPE,
-  REACT_MEMO_TYPE,
-  REACT_FORWARD_REF_TYPE,
-} from 'shared/ReactSymbols';
-
-type BlockLoadFunction<Args: Iterable<any>, Data> = (...args: Args) => Data;
-export type BlockRenderFunction<Props, Data> = (
-  props: Props,
-  data: Data,
-) => React$Node;
-
-type Payload<Props, Args: Iterable<any>, Data> = {
-  load: BlockLoadFunction<Args, Data>,
-  args: Args,
-  render: BlockRenderFunction<Props, Data>,
-};
-
-export type BlockComponent<Props, Data> = {
-  $$typeof: Symbol | number,
-  _data: Data,
-  _render: BlockRenderFunction<Props, Data>,
-};
-
-opaque type Block<Props>: React$AbstractComponent<
-  Props,
-  null,
-> = React$AbstractComponent<Props, null>;
-
-function lazyInitializer<Props, Args: Iterable<any>, Data>(
-  payload: Payload<Props, Args, Data>,
-): BlockComponent<Props, Data> {
-  return {
-    $$typeof: REACT_BLOCK_TYPE,
-    _data: payload.load.apply(null, payload.args),
-    _render: payload.render,
-  };
-}
-
-export function block<Args: Iterable<any>, Props, Data>(
-  render: BlockRenderFunction<Props, Data>,
-  load?: BlockLoadFunction<Args, Data>,
-): (...args: Args) => Block<Props> {
-  if (__DEV__) {
-    if (load !== undefined && typeof load !== 'function') {
-      console.error(
-        'Blocks require a load function, if provided, but was given %s.',
-        load === null ? 'null' : typeof load,
-      );
-    }
-    if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
-      console.error(
-        'Blocks require a render function but received a `memo` ' +
-          'component. Use `memo` on an inner component instead.',
-      );
-    } else if (render != null && render.$$typeof === REACT_FORWARD_REF_TYPE) {
-      console.error(
-        'Blocks require a render function but received a `forwardRef` ' +
-          'component. Use `forwardRef` on an inner component instead.',
-      );
-    } else if (typeof render !== 'function') {
-      console.error(
-        'Blocks require a render function but was given %s.',
-        render === null ? 'null' : typeof render,
-      );
-    } else if (render.length !== 0 && render.length !== 2) {
-      // Warn if it's not accepting two args.
-      // Do not warn for 0 arguments because it could be due to usage of the 'arguments' object.
-      console.error(
-        'Block render functions accept exactly two parameters: props and data. %s',
-        render.length === 1
-          ? 'Did you forget to use the data parameter?'
-          : 'Any additional parameter will be undefined.',
-      );
-    }
-
-    if (
-      render != null &&
-      (render.defaultProps != null || render.propTypes != null)
-    ) {
-      console.error(
-        'Block render functions do not support propTypes or defaultProps. ' +
-          'Did you accidentally pass a React component?',
-      );
-    }
-  }
-
-  if (load === undefined) {
-    return function(): Block<Props> {
-      const blockComponent: BlockComponent<Props, void> = {
-        $$typeof: REACT_BLOCK_TYPE,
-        _data: undefined,
-        // $FlowFixMe: Data must be void in this scenario.
-        _render: render,
-      };
-
-      // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
-      return blockComponent;
-    };
-  }
-
-  // Trick to let Flow refine this.
-  const loadFn = load;
-
-  return function(): Block<Props> {
-    const args: Args = arguments;
-
-    const payload: Payload<Props, Args, Data> = {
-      load: loadFn,
-      args: args,
-      render: render,
-    };
-
-    const lazyType: LazyComponent<
-      BlockComponent<Props, Data>,
-      Payload<Props, Args, Data>,
-    > = {
-      $$typeof: REACT_LAZY_TYPE,
-      _payload: payload,
-      _init: lazyInitializer,
-    };
-
-    // $FlowFixMe: Upstream BlockComponent to Flow as a valid Node.
-    return lazyType;
-  };
-}
diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
index efb58642f874..e330e08d6751 100644
--- a/packages/shared/ReactComponentStackFrame.js
+++ b/packages/shared/ReactComponentStackFrame.js
@@ -17,7 +17,6 @@ import {
   REACT_SUSPENSE_LIST_TYPE,
   REACT_FORWARD_REF_TYPE,
   REACT_MEMO_TYPE,
-  REACT_BLOCK_TYPE,
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 
@@ -301,8 +300,6 @@ export function describeUnknownElementTypeFrameInDEV(
       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, source, ownerFn);
       case REACT_LAZY_TYPE: {
         const lazyComponent: LazyComponent<any, any> = (type: any);
         const payload = lazyComponent._payload;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index ba92ea171539..2bb5e7a5dc3f 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -44,7 +44,6 @@ export const enableSuspenseServerRenderer = __EXPERIMENTAL__;
 export const enableSelectiveHydration = __EXPERIMENTAL__;
 
 // Flight experiments
-export const enableBlocksAPI = __EXPERIMENTAL__;
 export const enableLazyElements = __EXPERIMENTAL__;
 
 // Only used in www builds.
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 49e4eba689ef..1870c8c00948 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -25,8 +25,6 @@ export let REACT_SUSPENSE_TYPE = 0xead1;
 export let REACT_SUSPENSE_LIST_TYPE = 0xead8;
 export let REACT_MEMO_TYPE = 0xead3;
 export let REACT_LAZY_TYPE = 0xead4;
-export let REACT_BLOCK_TYPE = 0xead9;
-export let REACT_SERVER_BLOCK_TYPE = 0xeada;
 export let REACT_FUNDAMENTAL_TYPE = 0xead5;
 export let REACT_SCOPE_TYPE = 0xead7;
 export let REACT_OPAQUE_ID_TYPE = 0xeae0;
@@ -48,8 +46,6 @@ if (typeof Symbol === 'function' && Symbol.for) {
   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');
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 2009366d12f1..40bee41d566a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -18,7 +18,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableBlocksAPI = false;
 export const enableLazyElements = false;
 export const enableSchedulerDebugging = false;
 export const debugRenderPhaseSideEffectsForStrictMode = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index aa53af7e58c8..0665b4b5d71b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableBlocksAPI = false;
 export const enableLazyElements = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index eee1cb988618..2102c905be9f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableBlocksAPI = false;
 export const enableLazyElements = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f2b19e6dc26b..f2dc6d7f0ad0 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableBlocksAPI = false;
 export const enableLazyElements = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 11989ccafdc6..7c6588150ef9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableBlocksAPI = false;
 export const enableLazyElements = false;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 7bb6c2bd8b94..36cf66d18e4b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableBlocksAPI = false;
 export const enableLazyElements = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 23da5613036e..fd6eba5a5208 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableSchedulerTracing = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
-export const enableBlocksAPI = true;
 export const enableLazyElements = false;
 export const disableJavaScriptURLs = true;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index fec7e2beaa87..c12be6366806 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -54,7 +54,6 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 
-export const enableBlocksAPI = true;
 export const enableLazyElements = true;
 
 export const disableJavaScriptURLs = true;
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
index e7b7e6427586..ae74676ed361 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentName.js
@@ -21,7 +21,6 @@ import {
   REACT_SUSPENSE_TYPE,
   REACT_SUSPENSE_LIST_TYPE,
   REACT_LAZY_TYPE,
-  REACT_BLOCK_TYPE,
 } from 'shared/ReactSymbols';
 import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 
@@ -86,8 +85,6 @@ function getComponentName(type: mixed): string | null {
         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: {
         const lazyComponent: LazyComponent<any, any> = (type: any);
         const payload = lazyComponent._payload;
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 57e3d249b998..35eeae2a308c 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -21,8 +21,6 @@ import {
   REACT_LAZY_TYPE,
   REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
-  REACT_BLOCK_TYPE,
-  REACT_SERVER_BLOCK_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
 } from 'shared/ReactSymbols';
 import {enableScopeAPI} from './ReactFeatureFlags';
@@ -64,9 +62,7 @@ export default function isValidElementType(type: mixed) {
       // we don't know which Flight build this will end up being used
       // with.
       type.$$typeof === REACT_MODULE_REFERENCE ||
-      type.getModuleId !== undefined ||
-      type.$$typeof === REACT_BLOCK_TYPE ||
-      type[(0: any)] === REACT_SERVER_BLOCK_TYPE
+      type.getModuleId !== undefined
     ) {
       return true;
     }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 6eb8441d1fff..a86c8bc32812 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -341,7 +341,7 @@
   "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 is a bug in React. Please file an issue.",
   "351": "Unsupported server component type: %s",
-  "352": "React Blocks (and Lazy Components) are expected to be replaced by a compiler on the server. Try configuring your compiler set up and avoid using React.lazy inside of Blocks.",
+  "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.",
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 75f1663ae4bf..790d5fbcc1ae 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -4,7 +4,7 @@
 // certain conditions. They're like GKs.
 //
 // Examples:
-//   // @gate enableBlocksAPI
+//   // @gate enableSomeAPI
 //   test('uses an unstable API', () => {/*...*/})
 //
 //   // @gate __DEV__
@@ -18,12 +18,12 @@
 //
 // You can also combine flags using multiple gates:
 //
-//   // @gate enableBlocksAPI
+//   // @gate enableSomeAPI
 //   // @gate __DEV__
 //   test('both conditions must pass', () => {/*...*/})
 //
 // Or using logical operators
-//   // @gate enableBlocksAPI && __DEV__
+//   // @gate enableSomeAPI && __DEV__
 //   test('both conditions must pass', () => {/*...*/})
 //
 // Negation also works:
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index d4e8b06a2322..45fe488b7ced 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -265,13 +265,6 @@ const bundles = [
     global: 'ReactTransportDOMServer',
     externals: ['react', 'react-dom/server'],
   },
-  {
-    bundleTypes: [NODE_DEV, NODE_PROD],
-    moduleType: RENDERER,
-    entry: 'react-transport-dom-webpack/server-runtime',
-    global: 'ReactTransportDOMServerRuntime',
-    externals: ['react'],
-  },
 
   /******* React Transport DOM Client Webpack *******/
   {
@@ -304,17 +297,6 @@ const bundles = [
       'JSResourceReference',
     ],
   },
-  {
-    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
-    moduleType: RENDERER,
-    entry: 'react-transport-dom-relay/server-runtime',
-    global: 'ReactFlightDOMRelayServerRuntime',
-    externals: [
-      'react',
-      'ReactFlightDOMRelayServerIntegration',
-      'JSResourceReference',
-    ],
-  },
 
   /******* React DOM Flight Client Relay *******/
   {
@@ -521,13 +503,6 @@ const bundles = [
     global: 'ReactFlightServer',
     externals: ['react'],
   },
-  {
-    bundleTypes: [NODE_DEV, NODE_PROD],
-    moduleType: RENDERER,
-    entry: 'react-server/flight-server-runtime',
-    global: 'ReactFlightServerRuntime',
-    externals: ['react'],
-  },
 
   /******* React Flight Client *******/
   {
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 8bb32ed0bcef..e51377006000 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -14,7 +14,6 @@ module.exports = [
       'react-dom/testing',
       'react-dom/unstable-fizz.node',
       'react-transport-dom-webpack/server.node',
-      'react-transport-dom-webpack/server-runtime',
       'react-transport-dom-webpack',
     ],
     paths: [
@@ -25,7 +24,6 @@ module.exports = [
       'react-transport-dom-webpack',
       'react-transport-dom-webpack/server',
       'react-transport-dom-webpack/server.node',
-      'react-transport-dom-webpack/server-runtime',
       'react-transport-dom-webpack/src/ReactFlightDOMServerNode.js', // react-transport-dom-webpack/server.browser
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
       'react-interactions',
@@ -40,7 +38,6 @@ module.exports = [
       'react-dom/testing',
       'react-dom/unstable-fizz.browser',
       'react-transport-dom-webpack/server.browser',
-      'react-transport-dom-webpack/server-runtime',
       'react-transport-dom-webpack',
     ],
     paths: [
@@ -50,7 +47,6 @@ module.exports = [
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/unstable-fizz.browser
       'react-transport-dom-webpack',
       'react-transport-dom-webpack/server.browser',
-      'react-transport-dom-webpack/server-runtime',
       'react-transport-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-transport-dom-webpack/server.browser
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
     ],
@@ -90,7 +86,6 @@ module.exports = [
     entryPoints: [
       'react-transport-dom-relay',
       'react-transport-dom-relay/server',
-      'react-transport-dom-relay/server-runtime',
     ],
     paths: ['react-dom', 'react-transport-dom-relay'],
     isFlowTyped: true,
@@ -103,12 +98,10 @@ module.exports = [
       'react-client/flight',
       'react-server',
       'react-server/flight',
-      'react-server/flight-server-runtime',
     ],
     paths: [
       'react-client/flight',
       'react-server/flight',
-      'react-server/flight-server-runtime',
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
     ],
     isFlowTyped: true,

From 454c2211c09bfa2fd5475c25665f3bbeb6882841 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 2 Nov 2020 12:46:58 -0500
Subject: [PATCH 0052/1603] Refactor SchedulerHostConfigs (#20025)

* Remove SchedulerHostConfigs

* Fix builds

* Fix forks

* Move SchedulerNoDom check to npm/index.js

* Fix tests

* Add @gate source

* Gate build-only test to build test runs
---
 ...ReactTestUtilsActUnmockedScheduler-test.js |   4 +-
 ...tUnmockedSchedulerWarning-test.internal.js |   2 +-
 .../ReactUnmockedSchedulerWarning-test.js     |   4 +-
 packages/scheduler/index.js                   |   2 +-
 packages/scheduler/npm/index.js               |   4 +-
 packages/scheduler/npm/unstable_no_dom.js     |   7 +
 packages/scheduler/package.json               |   1 +
 ...erBrowser-test.js => SchedulerDOM-test.js} |   5 -
 ...cheduler-test.js => SchedulerMock-test.js} |   0
 .../src/__tests__/SchedulerNoDOM-test.js      |   7 +-
 .../SchedulerUMDBundle-test.internal.js       |  24 +-
 packages/scheduler/src/forks/SchedulerDOM.js  | 598 ++++++++++++++++
 .../src/forks/SchedulerFeatureFlags.www.js    |   2 +-
 .../src/forks/SchedulerHostConfig.default.js  | 246 -------
 .../src/forks/SchedulerHostConfig.mock.js     | 225 -------
 packages/scheduler/src/forks/SchedulerMock.js | 636 ++++++++++++++++++
 .../{Scheduler.js => forks/SchedulerNoDOM.js} |  76 ++-
 .../src/{ => forks}/SchedulerPostTask.js      |   4 +-
 packages/scheduler/unstable_mock.js           |  13 +-
 ...edulerHostConfig.js => unstable_no_dom.js} |   6 +-
 packages/scheduler/unstable_post_task.js      |   2 +-
 .../__tests__/ReactDOMFrameScheduling-test.js |   6 +-
 scripts/jest/TestFlags.js                     |   1 +
 scripts/jest/config.build.js                  |   2 +
 scripts/jest/setupHostConfigs.js              |   3 -
 scripts/jest/setupTests.build.js              |   3 -
 scripts/rollup/bundles.js                     |  18 +
 scripts/rollup/forks.js                       |  12 -
 28 files changed, 1365 insertions(+), 548 deletions(-)
 create mode 100644 packages/scheduler/npm/unstable_no_dom.js
 rename packages/scheduler/src/__tests__/{SchedulerBrowser-test.js => SchedulerDOM-test.js} (97%)
 rename packages/scheduler/src/__tests__/{Scheduler-test.js => SchedulerMock-test.js} (100%)
 create mode 100644 packages/scheduler/src/forks/SchedulerDOM.js
 delete mode 100644 packages/scheduler/src/forks/SchedulerHostConfig.default.js
 delete mode 100644 packages/scheduler/src/forks/SchedulerHostConfig.mock.js
 create mode 100644 packages/scheduler/src/forks/SchedulerMock.js
 rename packages/scheduler/src/{Scheduler.js => forks/SchedulerNoDOM.js} (87%)
 rename packages/scheduler/src/{ => forks}/SchedulerPostTask.js (98%)
 rename packages/scheduler/{src/SchedulerHostConfig.js => unstable_no_dom.js} (70%)

diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
index f7145f657c72..6f1587e7042e 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
@@ -33,7 +33,9 @@ function unmount(dom) {
 
 beforeEach(() => {
   jest.resetModules();
-  jest.unmock('scheduler');
+  jest.mock('scheduler', () =>
+    require.requireActual('scheduler/unstable_no_dom'),
+  );
   yields = [];
   React = require('react');
   ReactDOM = require('react-dom');
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
index 501b01336b1b..6c443a832aa1 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
@@ -17,7 +17,7 @@ function App() {
 
 beforeEach(() => {
   jest.resetModules();
-  jest.unmock('scheduler');
+  jest.mock('scheduler', () => require('scheduler/unstable_no_dom'));
   React = require('react');
   ReactDOM = require('react-dom');
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
index 57fc7fdcdc40..435b4989c115 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -16,7 +16,9 @@ function App() {
 
 beforeEach(() => {
   jest.resetModules();
-  jest.unmock('scheduler');
+  jest.mock('scheduler', () =>
+    require.requireActual('scheduler/unstable_no_dom'),
+  );
   React = require('react');
   ReactDOM = require('react-dom');
 });
diff --git a/packages/scheduler/index.js b/packages/scheduler/index.js
index aa14495a61ab..a5e913d1dd26 100644
--- a/packages/scheduler/index.js
+++ b/packages/scheduler/index.js
@@ -7,4 +7,4 @@
 
 'use strict';
 
-export * from './src/Scheduler';
+export * from './src/forks/SchedulerDOM';
diff --git a/packages/scheduler/npm/index.js b/packages/scheduler/npm/index.js
index 77770b0c219e..68a443aa1de8 100644
--- a/packages/scheduler/npm/index.js
+++ b/packages/scheduler/npm/index.js
@@ -1,6 +1,8 @@
 'use strict';
 
-if (process.env.NODE_ENV === 'production') {
+if (typeof window === 'undefined' || typeof MessageChannel !== 'function') {
+  module.exports = require('./unstable_no_dom');
+} else if (process.env.NODE_ENV === 'production') {
   module.exports = require('./cjs/scheduler.production.min.js');
 } else {
   module.exports = require('./cjs/scheduler.development.js');
diff --git a/packages/scheduler/npm/unstable_no_dom.js b/packages/scheduler/npm/unstable_no_dom.js
new file mode 100644
index 000000000000..2ba763765a0c
--- /dev/null
+++ b/packages/scheduler/npm/unstable_no_dom.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/scheduler-unstable_no_dom.production.min.js');
+} else {
+  module.exports = require('./cjs/scheduler-unstable_no_dom.development.js');
+}
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index cea8e16c2e87..04daf3e6a313 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -28,6 +28,7 @@
     "tracing.js",
     "tracing-profiling.js",
     "unstable_mock.js",
+    "unstable_no_dom.js",
     "unstable_post_task.js",
     "cjs/",
     "umd/"
diff --git a/packages/scheduler/src/__tests__/SchedulerBrowser-test.js b/packages/scheduler/src/__tests__/SchedulerDOM-test.js
similarity index 97%
rename from packages/scheduler/src/__tests__/SchedulerBrowser-test.js
rename to packages/scheduler/src/__tests__/SchedulerDOM-test.js
index 50a9927ae3c6..f6dd4be5db18 100644
--- a/packages/scheduler/src/__tests__/SchedulerBrowser-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerDOM-test.js
@@ -35,11 +35,6 @@ describe('SchedulerBrowser', () => {
 
     // Un-mock scheduler
     jest.mock('scheduler', () => require.requireActual('scheduler'));
-    jest.mock('scheduler/src/SchedulerHostConfig', () =>
-      require.requireActual(
-        'scheduler/src/forks/SchedulerHostConfig.default.js',
-      ),
-    );
 
     runtime = installMockBrowserRuntime();
     performance = global.performance;
diff --git a/packages/scheduler/src/__tests__/Scheduler-test.js b/packages/scheduler/src/__tests__/SchedulerMock-test.js
similarity index 100%
rename from packages/scheduler/src/__tests__/Scheduler-test.js
rename to packages/scheduler/src/__tests__/SchedulerMock-test.js
diff --git a/packages/scheduler/src/__tests__/SchedulerNoDOM-test.js b/packages/scheduler/src/__tests__/SchedulerNoDOM-test.js
index 2cabdfa29859..8d3920fd920f 100644
--- a/packages/scheduler/src/__tests__/SchedulerNoDOM-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerNoDOM-test.js
@@ -24,11 +24,8 @@ describe('SchedulerNoDOM', () => {
     jest.useFakeTimers();
 
     // Un-mock scheduler
-    jest.mock('scheduler', () => require.requireActual('scheduler'));
-    jest.mock('scheduler/src/SchedulerHostConfig', () =>
-      require.requireActual(
-        'scheduler/src/forks/SchedulerHostConfig.default.js',
-      ),
+    jest.mock('scheduler', () =>
+      require.requireActual('scheduler/unstable_no_dom'),
     );
 
     Scheduler = require('scheduler');
diff --git a/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js b/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
index 219bbc69bec8..d6dfeb2081e4 100644
--- a/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
+++ b/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
@@ -8,6 +8,13 @@
  */
 'use strict';
 
+class MockMessageChannel {
+  constructor() {
+    this.port1 = jest.fn();
+    this.port2 = jest.fn();
+  }
+}
+
 describe('Scheduling UMD bundle', () => {
   beforeEach(() => {
     // Fool SECRET_INTERNALS object into including UMD forwarding methods.
@@ -16,11 +23,18 @@ describe('Scheduling UMD bundle', () => {
     jest.resetModules();
 
     jest.mock('scheduler', () => require.requireActual('scheduler'));
-    jest.mock('scheduler/src/SchedulerHostConfig', () =>
-      require.requireActual(
-        'scheduler/src/forks/SchedulerHostConfig.default.js',
-      ),
-    );
+
+    // Mock a browser environment since we're testing UMD modules.
+    global.window = {
+      requestAnimationFrame: jest.fn(),
+      cancelAnimationFrame: jest.fn(),
+    };
+    global.MessageChannel = MockMessageChannel;
+  });
+
+  afterEach(() => {
+    global.window = undefined;
+    global.MessageChannel = undefined;
   });
 
   function filterPrivateKeys(name) {
diff --git a/packages/scheduler/src/forks/SchedulerDOM.js b/packages/scheduler/src/forks/SchedulerDOM.js
new file mode 100644
index 000000000000..53101a6e6e58
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerDOM.js
@@ -0,0 +1,598 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/* eslint-disable no-var */
+
+import {
+  enableSchedulerDebugging,
+  enableProfiling,
+} from '../SchedulerFeatureFlags';
+
+import {push, pop, peek} from '../SchedulerMinHeap';
+
+// TODO: Use symbols?
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+} from '../SchedulerPriorities';
+import {
+  sharedProfilingBuffer,
+  markTaskRun,
+  markTaskYield,
+  markTaskCompleted,
+  markTaskCanceled,
+  markTaskErrored,
+  markSchedulerSuspended,
+  markSchedulerUnsuspended,
+  markTaskStart,
+  stopLoggingProfilingEvents,
+  startLoggingProfilingEvents,
+} from '../SchedulerProfiling';
+
+import {enableIsInputPending} from '../SchedulerFeatureFlags';
+
+let getCurrentTime;
+const hasPerformanceNow =
+  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;
+
+// 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 = [];
+var timerQueue = [];
+
+// Incrementing id counter. Used to maintain insertion order.
+var taskIdCounter = 1;
+
+// Pausing the scheduler is useful for debugging.
+var isSchedulerPaused = false;
+
+var currentTask = null;
+var currentPriorityLevel = NormalPriority;
+
+// This is set while performing work, to prevent re-entrancy.
+var isPerformingWork = false;
+
+var isHostCallbackScheduled = false;
+var isHostTimeoutScheduled = false;
+
+// Capture local references to native APIs, in case a polyfill overrides them.
+const setTimeout = window.setTimeout;
+const clearTimeout = window.clearTimeout;
+
+if (typeof console !== 'undefined') {
+  // TODO: Scheduler no longer requires these methods to be polyfilled. But
+  // maybe we want to continue warning if they don't exist, to preserve the
+  // option to rely on it in the future?
+  const requestAnimationFrame = window.requestAnimationFrame;
+  const cancelAnimationFrame = window.cancelAnimationFrame;
+
+  if (typeof requestAnimationFrame !== 'function') {
+    // Using console['error'] to evade Babel and ESLint
+    console['error'](
+      "This browser doesn't support requestAnimationFrame. " +
+        'Make sure that you load a ' +
+        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
+    );
+  }
+  if (typeof cancelAnimationFrame !== 'function') {
+    // Using console['error'] to evade Babel and ESLint
+    console['error'](
+      "This browser doesn't support cancelAnimationFrame. " +
+        'Make sure that you load a ' +
+        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
+    );
+  }
+}
+
+function advanceTimers(currentTime) {
+  // Check for tasks that are no longer delayed and add them to the queue.
+  let timer = peek(timerQueue);
+  while (timer !== null) {
+    if (timer.callback === null) {
+      // Timer was cancelled.
+      pop(timerQueue);
+    } else if (timer.startTime <= currentTime) {
+      // Timer fired. Transfer to the task queue.
+      pop(timerQueue);
+      timer.sortIndex = timer.expirationTime;
+      push(taskQueue, timer);
+      if (enableProfiling) {
+        markTaskStart(timer, currentTime);
+        timer.isQueued = true;
+      }
+    } else {
+      // Remaining timers are pending.
+      return;
+    }
+    timer = peek(timerQueue);
+  }
+}
+
+function handleTimeout(currentTime) {
+  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, initialTime) {
+  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();
+          markTaskErrored(currentTask, currentTime);
+          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, initialTime) {
+  let currentTime = initialTime;
+  advanceTimers(currentTime);
+  currentTask = peek(taskQueue);
+  while (
+    currentTask !== null &&
+    !(enableSchedulerDebugging && isSchedulerPaused)
+  ) {
+    if (
+      currentTask.expirationTime > currentTime &&
+      (!hasTimeRemaining || shouldYieldToHost())
+    ) {
+      // This currentTask hasn't expired, and we've reached the deadline.
+      break;
+    }
+    const callback = currentTask.callback;
+    if (typeof callback === 'function') {
+      currentTask.callback = null;
+      currentPriorityLevel = currentTask.priorityLevel;
+      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
+      markTaskRun(currentTask, currentTime);
+      const continuationCallback = callback(didUserCallbackTimeout);
+      currentTime = getCurrentTime();
+      if (typeof continuationCallback === 'function') {
+        currentTask.callback = continuationCallback;
+        markTaskYield(currentTask, currentTime);
+      } else {
+        if (enableProfiling) {
+          markTaskCompleted(currentTask, currentTime);
+          currentTask.isQueued = false;
+        }
+        if (currentTask === peek(taskQueue)) {
+          pop(taskQueue);
+        }
+      }
+      advanceTimers(currentTime);
+    } else {
+      pop(taskQueue);
+    }
+    currentTask = peek(taskQueue);
+  }
+  // Return whether there's additional work
+  if (currentTask !== null) {
+    return true;
+  } else {
+    const firstTimer = peek(timerQueue);
+    if (firstTimer !== null) {
+      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+    }
+    return false;
+  }
+}
+
+function unstable_runWithPriority(priorityLevel, eventHandler) {
+  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(eventHandler) {
+  var 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(callback) {
+  var parentPriorityLevel = currentPriorityLevel;
+  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, callback, options) {
+  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 = {
+    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_pauseExecution() {
+  isSchedulerPaused = true;
+}
+
+function unstable_continueExecution() {
+  isSchedulerPaused = false;
+  if (!isHostCallbackScheduled && !isPerformingWork) {
+    isHostCallbackScheduled = true;
+    requestHostCallback(flushWork);
+  }
+}
+
+function unstable_getFirstCallbackNode() {
+  return peek(taskQueue);
+}
+
+function unstable_cancelCallback(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() {
+  return currentPriorityLevel;
+}
+
+let isMessageLoopRunning = false;
+let scheduledHostCallback = null;
+let taskTimeoutID = -1;
+
+// Scheduler periodically yields in case there is other work on the main
+// thread, like user events. By default, it yields multiple times per frame.
+// It does not attempt to align with frame boundaries, since most tasks don't
+// need to be frame aligned; for those that do, use requestAnimationFrame.
+let yieldInterval = 5;
+let deadline = 0;
+
+// TODO: Make this configurable
+// TODO: Adjust this based on priority?
+const maxYieldInterval = 300;
+let needsPaint = false;
+
+function shouldYieldToHost() {
+  if (
+    enableIsInputPending &&
+    navigator !== undefined &&
+    navigator.scheduling !== undefined &&
+    navigator.scheduling.isInputPending !== undefined
+  ) {
+    const scheduling = navigator.scheduling;
+    const currentTime = getCurrentTime();
+    if (currentTime >= deadline) {
+      // There's no time left. We may want to yield control of the main
+      // thread, so the browser can perform high priority tasks. The main ones
+      // are painting and user input. If there's a pending paint or a pending
+      // input, then we should yield. But if there's neither, then we can
+      // yield less often while remaining responsive. We'll eventually yield
+      // regardless, since there could be a pending paint that wasn't
+      // accompanied by a call to `requestPaint`, or other main thread tasks
+      // like network events.
+      if (needsPaint || scheduling.isInputPending()) {
+        // There is either a pending paint or a pending input.
+        return true;
+      }
+      // There's no pending input. Only yield if we've reached the max
+      // yield interval.
+      return currentTime >= maxYieldInterval;
+    } else {
+      // There's still time left in the frame.
+      return false;
+    }
+  } else {
+    // `isInputPending` is not available. Since we have no way of knowing if
+    // there's pending input, always yield at the end of the frame.
+    return getCurrentTime() >= deadline;
+  }
+}
+
+function requestPaint() {
+  if (
+    enableIsInputPending &&
+    navigator !== undefined &&
+    navigator.scheduling !== undefined &&
+    navigator.scheduling.isInputPending !== undefined
+  ) {
+    needsPaint = true;
+  }
+
+  // Since we yield every frame regardless, `requestPaint` has no effect.
+}
+
+function forceFrameRate(fps) {
+  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) {
+    yieldInterval = Math.floor(1000 / fps);
+  } else {
+    // reset the framerate
+    yieldInterval = 5;
+  }
+}
+
+const performWorkUntilDeadline = () => {
+  if (scheduledHostCallback !== null) {
+    const currentTime = getCurrentTime();
+    // Yield after `yieldInterval` ms, regardless of where we are in the vsync
+    // cycle. This means there's always time remaining at the beginning of
+    // the message event.
+    deadline = currentTime + yieldInterval;
+    const hasTimeRemaining = true;
+    try {
+      const hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
+      if (!hasMoreWork) {
+        isMessageLoopRunning = false;
+        scheduledHostCallback = null;
+      } else {
+        // If there's more work, schedule the next message event at the end
+        // of the preceding one.
+        port.postMessage(null);
+      }
+    } catch (error) {
+      // If a scheduler task throws, exit the current browser task so the
+      // error can be observed.
+      port.postMessage(null);
+      throw error;
+    }
+  } else {
+    isMessageLoopRunning = false;
+  }
+  // Yielding to the browser will give it a chance to paint, so we can
+  // reset this.
+  needsPaint = false;
+};
+
+const channel = new MessageChannel();
+const port = channel.port2;
+channel.port1.onmessage = performWorkUntilDeadline;
+
+function requestHostCallback(callback) {
+  scheduledHostCallback = callback;
+  if (!isMessageLoopRunning) {
+    isMessageLoopRunning = true;
+    port.postMessage(null);
+  }
+}
+
+function requestHostTimeout(callback, ms) {
+  taskTimeoutID = setTimeout(() => {
+    callback(getCurrentTime());
+  }, ms);
+}
+
+function cancelHostTimeout() {
+  clearTimeout(taskTimeoutID);
+  taskTimeoutID = -1;
+}
+
+const unstable_requestPaint = requestPaint;
+
+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,
+  unstable_requestPaint,
+  unstable_continueExecution,
+  unstable_pauseExecution,
+  unstable_getFirstCallbackNode,
+  getCurrentTime as unstable_now,
+  forceFrameRate as unstable_forceFrameRate,
+};
+
+export const unstable_Profiling = enableProfiling
+  ? {
+      startLoggingProfilingEvents,
+      stopLoggingProfilingEvents,
+      sharedProfilingBuffer,
+    }
+  : null;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index 9fd86c7f94b2..ae94a0fa8c34 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -10,6 +10,6 @@ export const {
   enableIsInputPending,
   enableSchedulerDebugging,
   enableProfiling: enableProfilingFeatureFlag,
-} = require('SchedulerFeatureFlags');
+} = require('packages/scheduler/src/SchedulerFeatureFlags');
 
 export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;
diff --git a/packages/scheduler/src/forks/SchedulerHostConfig.default.js b/packages/scheduler/src/forks/SchedulerHostConfig.default.js
deleted file mode 100644
index 825cf3d22834..000000000000
--- a/packages/scheduler/src/forks/SchedulerHostConfig.default.js
+++ /dev/null
@@ -1,246 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import {enableIsInputPending} from '../SchedulerFeatureFlags';
-
-export let requestHostCallback;
-export let cancelHostCallback;
-export let requestHostTimeout;
-export let cancelHostTimeout;
-export let shouldYieldToHost;
-export let requestPaint;
-export let getCurrentTime;
-export let forceFrameRate;
-
-const hasPerformanceNow =
-  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;
-}
-
-if (
-  // If Scheduler runs in a non-DOM environment, it falls back to a naive
-  // implementation using setTimeout.
-  typeof window === 'undefined' ||
-  // Check if MessageChannel is supported, too.
-  typeof MessageChannel !== 'function'
-) {
-  // If this accidentally gets imported in a non-browser environment, e.g. JavaScriptCore,
-  // fallback to a naive implementation.
-  let _callback = null;
-  let _timeoutID = null;
-  const _flushCallback = function() {
-    if (_callback !== null) {
-      try {
-        const currentTime = getCurrentTime();
-        const hasRemainingTime = true;
-        _callback(hasRemainingTime, currentTime);
-        _callback = null;
-      } catch (e) {
-        setTimeout(_flushCallback, 0);
-        throw e;
-      }
-    }
-  };
-  requestHostCallback = function(cb) {
-    if (_callback !== null) {
-      // Protect against re-entrancy.
-      setTimeout(requestHostCallback, 0, cb);
-    } else {
-      _callback = cb;
-      setTimeout(_flushCallback, 0);
-    }
-  };
-  cancelHostCallback = function() {
-    _callback = null;
-  };
-  requestHostTimeout = function(cb, ms) {
-    _timeoutID = setTimeout(cb, ms);
-  };
-  cancelHostTimeout = function() {
-    clearTimeout(_timeoutID);
-  };
-  shouldYieldToHost = function() {
-    return false;
-  };
-  requestPaint = forceFrameRate = function() {};
-} else {
-  // Capture local references to native APIs, in case a polyfill overrides them.
-  const setTimeout = window.setTimeout;
-  const clearTimeout = window.clearTimeout;
-
-  if (typeof console !== 'undefined') {
-    // TODO: Scheduler no longer requires these methods to be polyfilled. But
-    // maybe we want to continue warning if they don't exist, to preserve the
-    // option to rely on it in the future?
-    const requestAnimationFrame = window.requestAnimationFrame;
-    const cancelAnimationFrame = window.cancelAnimationFrame;
-
-    if (typeof requestAnimationFrame !== 'function') {
-      // Using console['error'] to evade Babel and ESLint
-      console['error'](
-        "This browser doesn't support requestAnimationFrame. " +
-          'Make sure that you load a ' +
-          'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
-      );
-    }
-    if (typeof cancelAnimationFrame !== 'function') {
-      // Using console['error'] to evade Babel and ESLint
-      console['error'](
-        "This browser doesn't support cancelAnimationFrame. " +
-          'Make sure that you load a ' +
-          'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
-      );
-    }
-  }
-
-  let isMessageLoopRunning = false;
-  let scheduledHostCallback = null;
-  let taskTimeoutID = -1;
-
-  // Scheduler periodically yields in case there is other work on the main
-  // thread, like user events. By default, it yields multiple times per frame.
-  // It does not attempt to align with frame boundaries, since most tasks don't
-  // need to be frame aligned; for those that do, use requestAnimationFrame.
-  let yieldInterval = 5;
-  let deadline = 0;
-
-  // TODO: Make this configurable
-  // TODO: Adjust this based on priority?
-  const maxYieldInterval = 300;
-  let needsPaint = false;
-
-  if (
-    enableIsInputPending &&
-    navigator !== undefined &&
-    navigator.scheduling !== undefined &&
-    navigator.scheduling.isInputPending !== undefined
-  ) {
-    const scheduling = navigator.scheduling;
-    shouldYieldToHost = function() {
-      const currentTime = getCurrentTime();
-      if (currentTime >= deadline) {
-        // There's no time left. We may want to yield control of the main
-        // thread, so the browser can perform high priority tasks. The main ones
-        // are painting and user input. If there's a pending paint or a pending
-        // input, then we should yield. But if there's neither, then we can
-        // yield less often while remaining responsive. We'll eventually yield
-        // regardless, since there could be a pending paint that wasn't
-        // accompanied by a call to `requestPaint`, or other main thread tasks
-        // like network events.
-        if (needsPaint || scheduling.isInputPending()) {
-          // There is either a pending paint or a pending input.
-          return true;
-        }
-        // There's no pending input. Only yield if we've reached the max
-        // yield interval.
-        return currentTime >= maxYieldInterval;
-      } else {
-        // There's still time left in the frame.
-        return false;
-      }
-    };
-
-    requestPaint = function() {
-      needsPaint = true;
-    };
-  } else {
-    // `isInputPending` is not available. Since we have no way of knowing if
-    // there's pending input, always yield at the end of the frame.
-    shouldYieldToHost = function() {
-      return getCurrentTime() >= deadline;
-    };
-
-    // Since we yield every frame regardless, `requestPaint` has no effect.
-    requestPaint = function() {};
-  }
-
-  forceFrameRate = function(fps) {
-    if (fps < 0 || fps > 125) {
-      // 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) {
-      yieldInterval = Math.floor(1000 / fps);
-    } else {
-      // reset the framerate
-      yieldInterval = 5;
-    }
-  };
-
-  const performWorkUntilDeadline = () => {
-    if (scheduledHostCallback !== null) {
-      const currentTime = getCurrentTime();
-      // Yield after `yieldInterval` ms, regardless of where we are in the vsync
-      // cycle. This means there's always time remaining at the beginning of
-      // the message event.
-      deadline = currentTime + yieldInterval;
-      const hasTimeRemaining = true;
-      try {
-        const hasMoreWork = scheduledHostCallback(
-          hasTimeRemaining,
-          currentTime,
-        );
-        if (!hasMoreWork) {
-          isMessageLoopRunning = false;
-          scheduledHostCallback = null;
-        } else {
-          // If there's more work, schedule the next message event at the end
-          // of the preceding one.
-          port.postMessage(null);
-        }
-      } catch (error) {
-        // If a scheduler task throws, exit the current browser task so the
-        // error can be observed.
-        port.postMessage(null);
-        throw error;
-      }
-    } else {
-      isMessageLoopRunning = false;
-    }
-    // Yielding to the browser will give it a chance to paint, so we can
-    // reset this.
-    needsPaint = false;
-  };
-
-  const channel = new MessageChannel();
-  const port = channel.port2;
-  channel.port1.onmessage = performWorkUntilDeadline;
-
-  requestHostCallback = function(callback) {
-    scheduledHostCallback = callback;
-    if (!isMessageLoopRunning) {
-      isMessageLoopRunning = true;
-      port.postMessage(null);
-    }
-  };
-
-  cancelHostCallback = function() {
-    scheduledHostCallback = null;
-  };
-
-  requestHostTimeout = function(callback, ms) {
-    taskTimeoutID = setTimeout(() => {
-      callback(getCurrentTime());
-    }, ms);
-  };
-
-  cancelHostTimeout = function() {
-    clearTimeout(taskTimeoutID);
-    taskTimeoutID = -1;
-  };
-}
diff --git a/packages/scheduler/src/forks/SchedulerHostConfig.mock.js b/packages/scheduler/src/forks/SchedulerHostConfig.mock.js
deleted file mode 100644
index 070b31043a42..000000000000
--- a/packages/scheduler/src/forks/SchedulerHostConfig.mock.js
+++ /dev/null
@@ -1,225 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-let currentTime: number = 0;
-let scheduledCallback: ((boolean, number) => void) | null = null;
-let scheduledTimeout: (number => void) | null = null;
-let timeoutTime: number = -1;
-let yieldedValues: Array<mixed> | null = null;
-let expectedNumberOfYields: number = -1;
-let didStop: boolean = false;
-let isFlushing: boolean = false;
-let needsPaint: boolean = false;
-let shouldYieldForPaint: boolean = false;
-
-export function requestHostCallback(callback: boolean => void) {
-  scheduledCallback = callback;
-}
-
-export function cancelHostCallback(): void {
-  scheduledCallback = null;
-}
-
-export function requestHostTimeout(callback: number => void, ms: number) {
-  scheduledTimeout = callback;
-  timeoutTime = currentTime + ms;
-}
-
-export function cancelHostTimeout(): void {
-  scheduledTimeout = null;
-  timeoutTime = -1;
-}
-
-export function shouldYieldToHost(): boolean {
-  if (
-    (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;
-}
-
-export function getCurrentTime(): number {
-  return currentTime;
-}
-
-export function forceFrameRate() {
-  // No-op
-}
-
-export function reset() {
-  if (isFlushing) {
-    throw new Error('Cannot reset while already flushing work.');
-  }
-  currentTime = 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.
-export 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, currentTime);
-      } while (hasMoreWork && !didStop);
-      if (!hasMoreWork) {
-        scheduledCallback = null;
-      }
-    } finally {
-      expectedNumberOfYields = -1;
-      didStop = false;
-      isFlushing = false;
-    }
-  }
-}
-
-export function unstable_flushUntilNextPaint(): void {
-  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, currentTime);
-      } while (hasMoreWork && !didStop);
-      if (!hasMoreWork) {
-        scheduledCallback = null;
-      }
-    } finally {
-      shouldYieldForPaint = false;
-      didStop = false;
-      isFlushing = false;
-    }
-  }
-}
-
-export function unstable_flushExpired() {
-  if (isFlushing) {
-    throw new Error('Already flushing work.');
-  }
-  if (scheduledCallback !== null) {
-    isFlushing = true;
-    try {
-      const hasMoreWork = scheduledCallback(false, currentTime);
-      if (!hasMoreWork) {
-        scheduledCallback = null;
-      }
-    } finally {
-      isFlushing = false;
-    }
-  }
-}
-
-export function unstable_flushAllWithoutAsserting(): boolean {
-  // Returns false if no work was flushed.
-  if (isFlushing) {
-    throw new Error('Already flushing work.');
-  }
-  if (scheduledCallback !== null) {
-    const cb = scheduledCallback;
-    isFlushing = true;
-    try {
-      let hasMoreWork = true;
-      do {
-        hasMoreWork = cb(true, currentTime);
-      } while (hasMoreWork);
-      if (!hasMoreWork) {
-        scheduledCallback = null;
-      }
-      return true;
-    } finally {
-      isFlushing = false;
-    }
-  } else {
-    return false;
-  }
-}
-
-export function unstable_clearYields(): Array<mixed> {
-  if (yieldedValues === null) {
-    return [];
-  }
-  const values = yieldedValues;
-  yieldedValues = null;
-  return values;
-}
-
-export function unstable_flushAll(): void {
-  if (yieldedValues !== null) {
-    throw new Error(
-      'Log is not empty. Assert on the log of yielded values before ' +
-        'flushing additional work.',
-    );
-  }
-  unstable_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([...])',
-    );
-  }
-}
-
-export function unstable_yieldValue(value: mixed): void {
-  // eslint-disable-next-line react-internal/no-production-logging
-  if (console.log.name === 'disabledLog') {
-    // 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);
-  }
-}
-
-export function unstable_advanceTime(ms: number) {
-  // eslint-disable-next-line react-internal/no-production-logging
-  if (console.log.name === 'disabledLog') {
-    // If console.log has been patched, we assume we're in render
-    // replaying and we ignore any time advancing in the second pass.
-    return;
-  }
-  currentTime += ms;
-  if (scheduledTimeout !== null && timeoutTime <= currentTime) {
-    scheduledTimeout(currentTime);
-    timeoutTime = -1;
-    scheduledTimeout = null;
-  }
-}
-
-export function requestPaint() {
-  needsPaint = true;
-}
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
new file mode 100644
index 000000000000..9ec5504b243f
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -0,0 +1,636 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/* eslint-disable no-var */
+
+import {
+  enableSchedulerDebugging,
+  enableProfiling,
+} from '../SchedulerFeatureFlags';
+import {push, pop, peek} from '../SchedulerMinHeap';
+
+// TODO: Use symbols?
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+} from '../SchedulerPriorities';
+import {
+  sharedProfilingBuffer,
+  markTaskRun,
+  markTaskYield,
+  markTaskCompleted,
+  markTaskCanceled,
+  markTaskErrored,
+  markSchedulerSuspended,
+  markSchedulerUnsuspended,
+  markTaskStart,
+  stopLoggingProfilingEvents,
+  startLoggingProfilingEvents,
+} from '../SchedulerProfiling';
+
+// Max 31 bit integer. The max integer size in V8 for 32-bit systems.
+// Math.pow(2, 30) - 1
+// 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 = [];
+var timerQueue = [];
+
+// Incrementing id counter. Used to maintain insertion order.
+var taskIdCounter = 1;
+
+// Pausing the scheduler is useful for debugging.
+var isSchedulerPaused = false;
+
+var currentTask = null;
+var currentPriorityLevel = NormalPriority;
+
+// This is set while performing work, to prevent re-entrancy.
+var isPerformingWork = false;
+
+var isHostCallbackScheduled = false;
+var isHostTimeoutScheduled = false;
+
+let currentMockTime: number = 0;
+let scheduledCallback: ((boolean, number) => void) | null = null;
+let scheduledTimeout: (number => void) | null = null;
+let timeoutTime: number = -1;
+let yieldedValues: Array<mixed> | null = null;
+let expectedNumberOfYields: number = -1;
+let didStop: boolean = false;
+let isFlushing: boolean = false;
+let needsPaint: boolean = false;
+let shouldYieldForPaint: boolean = false;
+
+function advanceTimers(currentTime) {
+  // Check for tasks that are no longer delayed and add them to the queue.
+  let timer = peek(timerQueue);
+  while (timer !== null) {
+    if (timer.callback === null) {
+      // Timer was cancelled.
+      pop(timerQueue);
+    } else if (timer.startTime <= currentTime) {
+      // Timer fired. Transfer to the task queue.
+      pop(timerQueue);
+      timer.sortIndex = timer.expirationTime;
+      push(taskQueue, timer);
+      if (enableProfiling) {
+        markTaskStart(timer, currentTime);
+        timer.isQueued = true;
+      }
+    } else {
+      // Remaining timers are pending.
+      return;
+    }
+    timer = peek(timerQueue);
+  }
+}
+
+function handleTimeout(currentTime) {
+  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, initialTime) {
+  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();
+          markTaskErrored(currentTask, currentTime);
+          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, initialTime) {
+  let currentTime = initialTime;
+  advanceTimers(currentTime);
+  currentTask = peek(taskQueue);
+  while (
+    currentTask !== null &&
+    !(enableSchedulerDebugging && isSchedulerPaused)
+  ) {
+    if (
+      currentTask.expirationTime > currentTime &&
+      (!hasTimeRemaining || shouldYieldToHost())
+    ) {
+      // This currentTask hasn't expired, and we've reached the deadline.
+      break;
+    }
+    const callback = currentTask.callback;
+    if (typeof callback === 'function') {
+      currentTask.callback = null;
+      currentPriorityLevel = currentTask.priorityLevel;
+      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
+      markTaskRun(currentTask, currentTime);
+      const continuationCallback = callback(didUserCallbackTimeout);
+      currentTime = getCurrentTime();
+      if (typeof continuationCallback === 'function') {
+        currentTask.callback = continuationCallback;
+        markTaskYield(currentTask, currentTime);
+      } else {
+        if (enableProfiling) {
+          markTaskCompleted(currentTask, currentTime);
+          currentTask.isQueued = false;
+        }
+        if (currentTask === peek(taskQueue)) {
+          pop(taskQueue);
+        }
+      }
+      advanceTimers(currentTime);
+    } else {
+      pop(taskQueue);
+    }
+    currentTask = peek(taskQueue);
+  }
+  // Return whether there's additional work
+  if (currentTask !== null) {
+    return true;
+  } else {
+    const firstTimer = peek(timerQueue);
+    if (firstTimer !== null) {
+      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+    }
+    return false;
+  }
+}
+
+function unstable_runWithPriority(priorityLevel, eventHandler) {
+  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(eventHandler) {
+  var 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(callback) {
+  var parentPriorityLevel = currentPriorityLevel;
+  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, callback, options) {
+  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 = {
+    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_pauseExecution() {
+  isSchedulerPaused = true;
+}
+
+function unstable_continueExecution() {
+  isSchedulerPaused = false;
+  if (!isHostCallbackScheduled && !isPerformingWork) {
+    isHostCallbackScheduled = true;
+    requestHostCallback(flushWork);
+  }
+}
+
+function unstable_getFirstCallbackNode() {
+  return peek(taskQueue);
+}
+
+function unstable_cancelCallback(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() {
+  return currentPriorityLevel;
+}
+
+function requestHostCallback(callback: boolean => void) {
+  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 !== -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(): void {
+  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;
+    }
+  }
+}
+
+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_clearYields(): 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 unstable_yieldValue(value: mixed): void {
+  // eslint-disable-next-line react-internal/no-production-logging
+  if (console.log.name === 'disabledLog') {
+    // 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') {
+    // 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,
+  unstable_continueExecution,
+  unstable_pauseExecution,
+  unstable_getFirstCallbackNode,
+  getCurrentTime as unstable_now,
+  forceFrameRate as unstable_forceFrameRate,
+  unstable_flushAllWithoutAsserting,
+  unstable_flushNumberOfYields,
+  unstable_flushExpired,
+  unstable_clearYields,
+  unstable_flushUntilNextPaint,
+  unstable_flushAll,
+  unstable_yieldValue,
+  unstable_advanceTime,
+  reset,
+};
+
+export const unstable_Profiling = enableProfiling
+  ? {
+      startLoggingProfilingEvents,
+      stopLoggingProfilingEvents,
+      sharedProfilingBuffer,
+    }
+  : null;
diff --git a/packages/scheduler/src/Scheduler.js b/packages/scheduler/src/forks/SchedulerNoDOM.js
similarity index 87%
rename from packages/scheduler/src/Scheduler.js
rename to packages/scheduler/src/forks/SchedulerNoDOM.js
index 9162da0a0875..e1a4a5e946d3 100644
--- a/packages/scheduler/src/Scheduler.js
+++ b/packages/scheduler/src/forks/SchedulerNoDOM.js
@@ -11,17 +11,8 @@
 import {
   enableSchedulerDebugging,
   enableProfiling,
-} from './SchedulerFeatureFlags';
-import {
-  requestHostCallback,
-  requestHostTimeout,
-  cancelHostTimeout,
-  shouldYieldToHost,
-  getCurrentTime,
-  forceFrameRate,
-  requestPaint,
-} from './SchedulerHostConfig';
-import {push, pop, peek} from './SchedulerMinHeap';
+} from '../SchedulerFeatureFlags';
+import {push, pop, peek} from '../SchedulerMinHeap';
 
 // TODO: Use symbols?
 import {
@@ -30,7 +21,7 @@ import {
   NormalPriority,
   LowPriority,
   IdlePriority,
-} from './SchedulerPriorities';
+} from '../SchedulerPriorities';
 import {
   sharedProfilingBuffer,
   markTaskRun,
@@ -43,7 +34,7 @@ import {
   markTaskStart,
   stopLoggingProfilingEvents,
   startLoggingProfilingEvents,
-} from './SchedulerProfiling';
+} from '../SchedulerProfiling';
 
 // Max 31 bit integer. The max integer size in V8 for 32-bit systems.
 // Math.pow(2, 30) - 1
@@ -78,6 +69,19 @@ var isPerformingWork = false;
 var isHostCallbackScheduled = false;
 var isHostTimeoutScheduled = false;
 
+let getCurrentTime;
+const hasPerformanceNow =
+  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;
+}
+
 function advanceTimers(currentTime) {
   // Check for tasks that are no longer delayed and add them to the queue.
   let timer = peek(timerQueue);
@@ -393,7 +397,49 @@ function unstable_getCurrentPriorityLevel() {
   return currentPriorityLevel;
 }
 
-const unstable_requestPaint = requestPaint;
+// If this accidentally gets imported in a non-browser environment, e.g. JavaScriptCore,
+// fallback to a naive implementation.
+let _callback = null;
+let _timeoutID = null;
+const _flushCallback = function() {
+  if (_callback !== null) {
+    try {
+      const currentTime = getCurrentTime();
+      const hasRemainingTime = true;
+      _callback(hasRemainingTime, currentTime);
+      _callback = null;
+    } catch (e) {
+      setTimeout(_flushCallback, 0);
+      throw e;
+    }
+  }
+};
+
+function requestHostCallback(cb) {
+  if (_callback !== null) {
+    // Protect against re-entrancy.
+    setTimeout(requestHostCallback, 0, cb);
+  } else {
+    _callback = cb;
+    setTimeout(_flushCallback, 0);
+  }
+}
+
+function requestHostTimeout(cb, ms) {
+  _timeoutID = setTimeout(cb, ms);
+}
+
+function cancelHostTimeout() {
+  clearTimeout(_timeoutID);
+}
+
+function shouldYieldToHost() {
+  return false;
+}
+
+function forceFrameRate() {}
+
+function requestPaint() {}
 
 export {
   ImmediatePriority as unstable_ImmediatePriority,
@@ -408,7 +454,7 @@ export {
   unstable_wrapCallback,
   unstable_getCurrentPriorityLevel,
   shouldYieldToHost as unstable_shouldYield,
-  unstable_requestPaint,
+  requestPaint as unstable_requestPaint,
   unstable_continueExecution,
   unstable_pauseExecution,
   unstable_getFirstCallbackNode,
diff --git a/packages/scheduler/src/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
similarity index 98%
rename from packages/scheduler/src/SchedulerPostTask.js
rename to packages/scheduler/src/forks/SchedulerPostTask.js
index 5d986d5127cb..c07f7f03819c 100644
--- a/packages/scheduler/src/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {PriorityLevel} from './SchedulerPriorities';
+import type {PriorityLevel} from '../SchedulerPriorities';
 
 declare class TaskController {
   constructor(priority?: string): TaskController;
@@ -27,7 +27,7 @@ import {
   NormalPriority,
   LowPriority,
   IdlePriority,
-} from './SchedulerPriorities';
+} from '../SchedulerPriorities';
 
 export {
   ImmediatePriority as unstable_ImmediatePriority,
diff --git a/packages/scheduler/unstable_mock.js b/packages/scheduler/unstable_mock.js
index 11afa5abd11c..474fe7e4f1da 100644
--- a/packages/scheduler/unstable_mock.js
+++ b/packages/scheduler/unstable_mock.js
@@ -7,15 +7,4 @@
 
 'use strict';
 
-export * from './src/Scheduler';
-
-export {
-  unstable_flushAllWithoutAsserting,
-  unstable_flushNumberOfYields,
-  unstable_flushExpired,
-  unstable_clearYields,
-  unstable_flushUntilNextPaint,
-  unstable_flushAll,
-  unstable_yieldValue,
-  unstable_advanceTime,
-} from './src/SchedulerHostConfig.js';
+export * from './src/forks/SchedulerMock';
diff --git a/packages/scheduler/src/SchedulerHostConfig.js b/packages/scheduler/unstable_no_dom.js
similarity index 70%
rename from packages/scheduler/src/SchedulerHostConfig.js
rename to packages/scheduler/unstable_no_dom.js
index a4af84870258..bf235f9b1514 100644
--- a/packages/scheduler/src/SchedulerHostConfig.js
+++ b/packages/scheduler/unstable_no_dom.js
@@ -3,8 +3,8 @@
  *
  * 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('This module must be shimmed by a specific build.');
+'use strict';
+
+export * from './src/forks/SchedulerNoDOM';
diff --git a/packages/scheduler/unstable_post_task.js b/packages/scheduler/unstable_post_task.js
index 666eff8a8589..9954099f4b69 100644
--- a/packages/scheduler/unstable_post_task.js
+++ b/packages/scheduler/unstable_post_task.js
@@ -7,4 +7,4 @@
 
 'use strict';
 
-export * from './src/SchedulerPostTask';
+export * from './src/forks/SchedulerPostTask';
diff --git a/packages/shared/__tests__/ReactDOMFrameScheduling-test.js b/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
index fa3d145e6cb2..3d6407ebe384 100644
--- a/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
+++ b/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
@@ -15,11 +15,6 @@ describe('ReactDOMFrameScheduling', () => {
 
     // Un-mock scheduler
     jest.mock('scheduler', () => require.requireActual('scheduler'));
-    jest.mock('scheduler/src/SchedulerHostConfig', () =>
-      require.requireActual(
-        'scheduler/src/forks/SchedulerHostConfig.default.js',
-      ),
-    );
   });
 
   it('warns when requestAnimationFrame is not polyfilled in the browser', () => {
@@ -47,6 +42,7 @@ describe('ReactDOMFrameScheduling', () => {
 
   // We're just testing importing, not using it.
   // It is important because even isomorphic components may import it.
+  // @gate !source
   it('can import findDOMNode in Node environment', () => {
     const previousRAF = global.requestAnimationFrame;
     const previousRIC = global.requestIdleCallback;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 790d5fbcc1ae..6a2be742e296 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -74,6 +74,7 @@ function getTestFlags() {
       channel: releaseChannel,
       modern: releaseChannel === 'modern',
       classic: releaseChannel === 'classic',
+      source: !process.env.IS_BUILD,
       www,
 
       ...featureFlags,
diff --git a/scripts/jest/config.build.js b/scripts/jest/config.build.js
index 765909b41b16..fe83740fa4fe 100644
--- a/scripts/jest/config.build.js
+++ b/scripts/jest/config.build.js
@@ -4,6 +4,8 @@ const {readdirSync, statSync} = require('fs');
 const {join} = require('path');
 const baseConfig = require('./config.base');
 
+process.env.IS_BUILD = true;
+
 // Find all folders in packages/* with package.json
 const packagesRoot = join(__dirname, '..', '..', 'packages');
 const packages = readdirSync(packagesRoot).filter(dir => {
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index 78b4de416417..4f9cbf5d479d 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -96,6 +96,3 @@ jest.mock('shared/ReactSharedInternals', () =>
 );
 
 jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));
-jest.mock('scheduler/src/SchedulerHostConfig', () =>
-  require.requireActual('scheduler/src/forks/SchedulerHostConfig.mock.js')
-);
diff --git a/scripts/jest/setupTests.build.js b/scripts/jest/setupTests.build.js
index 62db0fc007f9..f3d4be6c01ee 100644
--- a/scripts/jest/setupTests.build.js
+++ b/scripts/jest/setupTests.build.js
@@ -1,6 +1,3 @@
 'use strict';
 
 jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));
-jest.mock('scheduler/src/SchedulerHostConfig', () =>
-  require.requireActual('scheduler/src/forks/SchedulerHostConfig.mock.js')
-);
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 45fe488b7ced..56d59127a35c 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -633,6 +633,24 @@ const bundles = [
     externals: [],
   },
 
+  /******* React Scheduler No DOM (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/unstable_no_dom',
+    global: 'SchedulerNoDOM',
+    externals: [],
+  },
+
   /******* Jest React (experimental) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index e34daab32c6d..03437e1f3103 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -201,18 +201,6 @@ const forks = Object.freeze({
     return 'scheduler/src/SchedulerFeatureFlags';
   },
 
-  'scheduler/src/SchedulerHostConfig': (bundleType, entry, dependencies) => {
-    if (
-      entry === 'scheduler/unstable_mock' ||
-      entry === 'react-noop-renderer' ||
-      entry === 'react-noop-renderer/persistent' ||
-      entry === 'react-test-renderer'
-    ) {
-      return 'scheduler/src/forks/SchedulerHostConfig.mock';
-    }
-    return 'scheduler/src/forks/SchedulerHostConfig.default';
-  },
-
   'shared/consoleWithStackDev': (bundleType, entry) => {
     switch (bundleType) {
       case FB_WWW_DEV:

From c3e20f18fe37993ddcbf11dccb55663b4c0d02fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 2 Nov 2020 21:49:48 -0500
Subject: [PATCH 0053/1603] Add Relay specific React Native build of Flight
 (#20149)

This adds a new dimension similar to dom-relay. It's different from
"native" which would be Flight for RN without Relay.

This has some copy-pasta that's the same between the two Relay builds but
the key difference will be Metro and we're not quite sure what other
differences there will be yet.
---
 .circleci/config.yml                          |   2 +
 .eslintrc.js                                  |   5 +-
 ...eactFlightClientHostConfig.native-relay.js |  11 ++
 .../ReactFiberHostConfig.native-relay.js      |  10 ++
 .../src/ReactNativeServerFormatConfig.js      |  23 +++
 .../ReactFlightServerConfig.native-relay.js   |  10 ++
 .../ReactServerFormatConfig.native-relay.js   |  10 ++
 .../ReactServerStreamConfig.native-relay.js   |  10 ++
 .../react-transport-native-relay/index.js     |  10 ++
 .../react-transport-native-relay/package.json |  18 ++
 .../react-transport-native-relay/server.js    |  10 ++
 .../src/ReactFlightNativeRelayClient.js       |  16 ++
 .../ReactFlightNativeRelayClientHostConfig.js |  60 +++++++
 .../src/ReactFlightNativeRelayServer.js       |  27 +++
 .../ReactFlightNativeRelayServerHostConfig.js | 170 ++++++++++++++++++
 .../src/__mocks__/JSResourceReferenceImpl.js  |  19 ++
 ...ReactFlightNativeRelayClientIntegration.js |  22 +++
 ...ReactFlightNativeRelayServerIntegration.js |  38 ++++
 .../ReactFlightNativeRelay-test.internal.js   | 127 +++++++++++++
 ...actFlightNativeRelay-test.internal.js.snap |  25 +++
 scripts/flow/react-relay-hooks.js             |  50 ++++++
 scripts/rollup/bundles.js                     |  28 ++-
 scripts/rollup/packaging.js                   |   2 +
 scripts/shared/inlinedHostConfigs.js          |  10 ++
 24 files changed, 711 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
 create mode 100644 packages/react-reconciler/src/forks/ReactFiberHostConfig.native-relay.js
 create mode 100644 packages/react-server/src/ReactNativeServerFormatConfig.js
 create mode 100644 packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
 create mode 100644 packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js
 create mode 100644 packages/react-server/src/forks/ReactServerStreamConfig.native-relay.js
 create mode 100644 packages/react-transport-native-relay/index.js
 create mode 100644 packages/react-transport-native-relay/package.json
 create mode 100644 packages/react-transport-native-relay/server.js
 create mode 100644 packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
 create mode 100644 packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
 create mode 100644 packages/react-transport-native-relay/src/ReactFlightNativeRelayServer.js
 create mode 100644 packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
 create mode 100644 packages/react-transport-native-relay/src/__mocks__/JSResourceReferenceImpl.js
 create mode 100644 packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
 create mode 100644 packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
 create mode 100644 packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
 create mode 100644 packages/react-transport-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d41354116fbe..97d574dd19a3 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -242,6 +242,7 @@ jobs:
             - RELEASE_CHANNEL
             - facebook-www
             - facebook-react-native
+            - facebook-relay
             - node_modules
             - react-native
             - dist
@@ -268,6 +269,7 @@ jobs:
             - RELEASE_CHANNEL
             - facebook-www
             - facebook-react-native
+            - facebook-relay
             - node_modules
             - react-native
             - dist
diff --git a/.eslintrc.js b/.eslintrc.js
index 591952fd3617..8f88ba30a07b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -188,7 +188,10 @@ module.exports = {
       },
     },
     {
-      files: ['packages/react-native-renderer/**/*.js'],
+      files: [
+        'packages/react-native-renderer/**/*.js',
+        'packages/react-transport-native-relay/**/*.js'
+      ],
       globals: {
         nativeFabricUIManager: true,
       },
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
new file mode 100644
index 000000000000..ca1d639fe948
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig';
+export * from '../ReactFlightClientHostConfigNoStream';
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.native-relay.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.native-relay.js
new file mode 100644
index 000000000000..137d0d5bcd11
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.native-relay.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-native-renderer/src/ReactFabricHostConfig';
diff --git a/packages/react-server/src/ReactNativeServerFormatConfig.js b/packages/react-server/src/ReactNativeServerFormatConfig.js
new file mode 100644
index 000000000000..1e36890e995d
--- /dev/null
+++ b/packages/react-server/src/ReactNativeServerFormatConfig.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {convertStringToBuffer} from 'react-server/src/ReactServerStreamConfig';
+
+export function formatChunkAsString(type: string, props: Object): string {
+  let str = '<' + type + '>';
+  if (typeof props.children === 'string') {
+    str += props.children;
+  }
+  str += '</' + type + '>';
+  return str;
+}
+
+export function formatChunk(type: string, props: Object): Uint8Array {
+  return convertStringToBuffer(formatChunkAsString(type, props));
+}
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js b/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
new file mode 100644
index 000000000000..35e6334ab331
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js b/packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js
new file mode 100644
index 000000000000..2cfdaeeb3768
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactNativeServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.native-relay.js b/packages/react-server/src/forks/ReactServerStreamConfig.native-relay.js
new file mode 100644
index 000000000000..7b6480120ee8
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.native-relay.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactServerStreamConfigNode';
diff --git a/packages/react-transport-native-relay/index.js b/packages/react-transport-native-relay/index.js
new file mode 100644
index 000000000000..0b70ae34be47
--- /dev/null
+++ b/packages/react-transport-native-relay/index.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightNativeRelayClient';
diff --git a/packages/react-transport-native-relay/package.json b/packages/react-transport-native-relay/package.json
new file mode 100644
index 000000000000..3c9bb80dbb4c
--- /dev/null
+++ b/packages/react-transport-native-relay/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "react-transport-native-relay",
+  "version": "0.1.0",
+  "private": true,
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-transport-native-relay"
+  },
+  "dependencies": {
+    "object-assign": "^4.1.1",
+    "scheduler": "^0.11.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "react-native-renderer": "^17.0.0"
+  }
+}
diff --git a/packages/react-transport-native-relay/server.js b/packages/react-transport-native-relay/server.js
new file mode 100644
index 000000000000..ff91c4bbfc5d
--- /dev/null
+++ b/packages/react-transport-native-relay/server.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightNativeRelayServer';
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
new file mode 100644
index 000000000000..7a5e51ff6311
--- /dev/null
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  createResponse,
+  resolveModel,
+  resolveModule,
+  resolveError,
+  close,
+} from 'react-client/src/ReactFlightClient';
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
new file mode 100644
index 000000000000..035dcaf9f4c1
--- /dev/null
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
+
+import type JSResourceReference from 'JSResourceReference';
+
+export type ModuleReference<T> = JSResourceReference<T>;
+
+import {
+  parseModelString,
+  parseModelTuple,
+} from 'react-client/src/ReactFlightClient';
+
+export {
+  resolveModuleReference,
+  preloadModule,
+  requireModule,
+} from 'ReactFlightNativeRelayClientIntegration';
+
+export type {ModuleMetaData} from 'ReactFlightNativeRelayClientIntegration';
+
+export opaque type UninitializedModel = JSONValue;
+
+export type Response = ResponseBase;
+
+function parseModelRecursively(response: Response, parentObj, value) {
+  if (typeof value === 'string') {
+    return parseModelString(response, parentObj, value);
+  }
+  if (typeof value === 'object' && value !== null) {
+    if (Array.isArray(value)) {
+      for (let i = 0; i < value.length; i++) {
+        (value: any)[i] = parseModelRecursively(response, value, value[i]);
+      }
+      return parseModelTuple(response, value);
+    } else {
+      for (const innerKey in value) {
+        (value: any)[innerKey] = parseModelRecursively(
+          response,
+          value,
+          value[innerKey],
+        );
+      }
+    }
+  }
+  return value;
+}
+
+const dummy = {};
+
+export function parseModel<T>(response: Response, json: UninitializedModel): T {
+  return (parseModelRecursively(response, dummy, json): any);
+}
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServer.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServer.js
new file mode 100644
index 000000000000..dc09a3a80d1c
--- /dev/null
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServer.js
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {
+  BundlerConfig,
+  Destination,
+} from './ReactFlightNativeRelayServerHostConfig';
+
+import {createRequest, startWork} from 'react-server/src/ReactFlightServer';
+
+function render(
+  model: ReactModel,
+  destination: Destination,
+  config: BundlerConfig,
+): void {
+  const request = createRequest(model, destination, config);
+  startWork(request);
+}
+
+export {render};
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
new file mode 100644
index 000000000000..3992b670e1fa
--- /dev/null
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -0,0 +1,170 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
+
+import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
+
+export type ModuleReference<T> = JSResourceReferenceImpl<T>;
+
+import type {
+  Destination,
+  BundlerConfig,
+  ModuleMetaData,
+} from 'ReactFlightNativeRelayServerIntegration';
+
+import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
+
+import {
+  emitModel,
+  emitModule,
+  emitError,
+  resolveModuleMetaData as resolveModuleMetaDataImpl,
+} from 'ReactFlightNativeRelayServerIntegration';
+
+export type {
+  Destination,
+  BundlerConfig,
+  ModuleMetaData,
+} from 'ReactFlightNativeRelayServerIntegration';
+
+export function isModuleReference(reference: Object): boolean {
+  return reference instanceof JSResourceReferenceImpl;
+}
+
+export function resolveModuleMetaData<T>(
+  config: BundlerConfig,
+  resource: ModuleReference<T>,
+): ModuleMetaData {
+  return resolveModuleMetaDataImpl(config, resource);
+}
+
+type JSONValue =
+  | string
+  | number
+  | boolean
+  | null
+  | {+[key: string]: JSONValue}
+  | Array<JSONValue>;
+
+export type Chunk =
+  | {
+      type: 'json',
+      id: number,
+      json: JSONValue,
+    }
+  | {
+      type: 'module',
+      id: number,
+      json: ModuleMetaData,
+    }
+  | {
+      type: 'error',
+      id: number,
+      json: {
+        message: string,
+        stack: string,
+        ...
+      },
+    };
+
+export function processErrorChunk(
+  request: Request,
+  id: number,
+  message: string,
+  stack: string,
+): Chunk {
+  return {
+    type: 'error',
+    id: id,
+    json: {
+      message,
+      stack,
+    },
+  };
+}
+
+function convertModelToJSON(
+  request: Request,
+  parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
+  key: string,
+  model: ReactModel,
+): JSONValue {
+  const json = resolveModelToJSON(request, parent, key, model);
+  if (typeof json === 'object' && json !== null) {
+    if (Array.isArray(json)) {
+      const jsonArray: Array<JSONValue> = [];
+      for (let i = 0; i < json.length; i++) {
+        jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]);
+      }
+      return jsonArray;
+    } else {
+      const jsonObj: {[key: string]: JSONValue} = {};
+      for (const nextKey in json) {
+        jsonObj[nextKey] = convertModelToJSON(
+          request,
+          json,
+          nextKey,
+          json[nextKey],
+        );
+      }
+      return jsonObj;
+    }
+  }
+  return json;
+}
+
+export function processModelChunk(
+  request: Request,
+  id: number,
+  model: ReactModel,
+): Chunk {
+  const json = convertModelToJSON(request, {}, '', model);
+  return {
+    type: 'json',
+    id: id,
+    json: json,
+  };
+}
+
+export function processModuleChunk(
+  request: Request,
+  id: number,
+  moduleMetaData: ModuleMetaData,
+): Chunk {
+  // The moduleMetaData is already a JSON serializable value.
+  return {
+    type: 'module',
+    id: id,
+    json: moduleMetaData,
+  };
+}
+
+export function scheduleWork(callback: () => void) {
+  callback();
+}
+
+export function flushBuffered(destination: Destination) {}
+
+export function beginWriting(destination: Destination) {}
+
+export function writeChunk(destination: Destination, chunk: Chunk): boolean {
+  if (chunk.type === 'json') {
+    emitModel(destination, chunk.id, chunk.json);
+  } else if (chunk.type === 'module') {
+    emitModule(destination, chunk.id, chunk.json);
+  } else {
+    emitError(destination, chunk.id, chunk.json.message, chunk.json.stack);
+  }
+  return true;
+}
+
+export function completeWriting(destination: Destination) {}
+
+export {close} from 'ReactFlightNativeRelayServerIntegration';
diff --git a/packages/react-transport-native-relay/src/__mocks__/JSResourceReferenceImpl.js b/packages/react-transport-native-relay/src/__mocks__/JSResourceReferenceImpl.js
new file mode 100644
index 000000000000..8fc06aca7a30
--- /dev/null
+++ b/packages/react-transport-native-relay/src/__mocks__/JSResourceReferenceImpl.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+class JSResourceReferenceImpl {
+  constructor(exportedValue) {
+    this._moduleId = exportedValue;
+  }
+  getModuleId() {
+    return this._moduleId;
+  }
+}
+
+module.exports = JSResourceReferenceImpl;
diff --git a/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js b/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
new file mode 100644
index 000000000000..ea8f508ea294
--- /dev/null
+++ b/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import JSResourceReference from 'JSResourceReference';
+
+const ReactFlightNativeRelayClientIntegration = {
+  resolveModuleReference(moduleData) {
+    return new JSResourceReference(moduleData);
+  },
+  preloadModule(moduleReference) {},
+  requireModule(moduleReference) {
+    return moduleReference._moduleId;
+  },
+};
+
+module.exports = ReactFlightNativeRelayClientIntegration;
diff --git a/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js b/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
new file mode 100644
index 000000000000..197048cc50c8
--- /dev/null
+++ b/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const ReactFlightNativeRelayServerIntegration = {
+  emitModel(destination, id, json) {
+    destination.push({
+      type: 'json',
+      id: id,
+      json: json,
+    });
+  },
+  emitModule(destination, id, json) {
+    destination.push({
+      type: 'module',
+      id: id,
+      json: json,
+    });
+  },
+  emitError(destination, id, message, stack) {
+    destination.push({
+      type: 'error',
+      id: id,
+      json: {message, stack},
+    });
+  },
+  close(destination) {},
+  resolveModuleMetaData(config, resource) {
+    return resource._moduleId;
+  },
+};
+
+module.exports = ReactFlightNativeRelayServerIntegration;
diff --git a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js b/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
new file mode 100644
index 000000000000..48742e6bc1cb
--- /dev/null
+++ b/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+let React;
+let ReactFabric;
+let createReactNativeComponentClass;
+let View;
+let Text;
+let JSResourceReferenceImpl;
+let ReactNativeFlightRelayServer;
+let ReactNativeFlightRelayClient;
+
+describe('ReactFlightNativeRelay', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
+
+    React = require('react');
+    // TODO: Switch this out to react-native
+    ReactFabric = require('react-native-renderer/fabric');
+    createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+      .ReactNativeViewConfigRegistry.register;
+    View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTView',
+    }));
+    Text = createReactNativeComponentClass('RCTText', () => ({
+      validAttributes: {},
+      uiViewClassName: 'RCTText',
+    }));
+
+    ReactNativeFlightRelayServer = require('react-transport-native-relay/server');
+    ReactNativeFlightRelayClient = require('react-transport-native-relay');
+    JSResourceReferenceImpl = require('JSResourceReferenceImpl');
+  });
+
+  function readThrough(data) {
+    const response = ReactNativeFlightRelayClient.createResponse();
+    for (let i = 0; i < data.length; i++) {
+      const chunk = data[i];
+      if (chunk.type === 'json') {
+        ReactNativeFlightRelayClient.resolveModel(
+          response,
+          chunk.id,
+          chunk.json,
+        );
+      } else if (chunk.type === 'module') {
+        ReactNativeFlightRelayClient.resolveModule(
+          response,
+          chunk.id,
+          chunk.json,
+        );
+      } else {
+        ReactNativeFlightRelayClient.resolveError(
+          response,
+          chunk.id,
+          chunk.json.message,
+          chunk.json.stack,
+        );
+      }
+    }
+    ReactNativeFlightRelayClient.close(response);
+    const model = response.readRoot();
+    return model;
+  }
+
+  it('can render a server component', () => {
+    function Bar({text}) {
+      return <Text>{text.toUpperCase()}</Text>;
+    }
+    function Foo() {
+      return {
+        bar: (
+          <View>
+            <Bar text="a" /> <Bar text="b" />
+          </View>
+        ),
+      };
+    }
+    const transport = [];
+    ReactNativeFlightRelayServer.render(
+      {
+        foo: <Foo />,
+      },
+      transport,
+    );
+
+    const model = readThrough(transport);
+    expect(model).toMatchSnapshot();
+  });
+
+  it('can render a client component using a module reference and render there', () => {
+    function UserClient(props) {
+      return (
+        <Text>
+          {props.greeting}, {props.name}
+        </Text>
+      );
+    }
+    const User = new JSResourceReferenceImpl(UserClient);
+
+    function Greeting({firstName, lastName}) {
+      return <User greeting="Hello" name={firstName + ' ' + lastName} />;
+    }
+
+    const model = {
+      greeting: <Greeting firstName="Seb" lastName="Smith" />,
+    };
+
+    const transport = [];
+    ReactNativeFlightRelayServer.render(model, transport);
+
+    const modelClient = readThrough(transport);
+
+    ReactFabric.render(modelClient.greeting, 1);
+    expect(
+      nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
+    ).toMatchSnapshot();
+  });
+});
diff --git a/packages/react-transport-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap b/packages/react-transport-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap
new file mode 100644
index 000000000000..4e7a196871b5
--- /dev/null
+++ b/packages/react-transport-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReactFlightNativeRelay can render a client component using a module reference and render there 1`] = `
+"1
+ RCTText null
+   RCTRawText {\\"text\\":\\"Hello\\"}
+   RCTRawText {\\"text\\":\\", \\"}
+   RCTRawText {\\"text\\":\\"Seb Smith\\"}"
+`;
+
+exports[`ReactFlightNativeRelay can render a server component 1`] = `
+Object {
+  "foo": Object {
+    "bar": <RCTView>
+      <RCTText>
+        A
+      </RCTText>
+       
+      <RCTText>
+        B
+      </RCTText>
+    </RCTView>,
+  },
+}
+`;
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
index 0a4eae04cd4d..00fdbc839741 100644
--- a/scripts/flow/react-relay-hooks.js
+++ b/scripts/flow/react-relay-hooks.js
@@ -17,12 +17,21 @@ type JSONValue =
 
 declare class JSResourceReference<T> {
   _moduleId: T;
+  getModuleId(): string;
 }
 
+// Haste
 declare module 'JSResourceReference' {
   declare export default typeof JSResourceReference;
 }
 
+// Metro
+declare module 'JSResourceReferenceImpl' {
+  declare export default class JSResourceReferenceImpl<
+    T,
+  > extends JSResourceReference<T> {}
+}
+
 declare module 'ReactFlightDOMRelayServerIntegration' {
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
@@ -63,3 +72,44 @@ declare module 'ReactFlightDOMRelayClientIntegration' {
     moduleReference: JSResourceReference<T>,
   ): T;
 }
+
+declare module 'ReactFlightNativeRelayServerIntegration' {
+  declare export opaque type Destination;
+  declare export opaque type BundlerConfig;
+  declare export function emitModel(
+    destination: Destination,
+    id: number,
+    json: JSONValue,
+  ): void;
+  declare export function emitModule(
+    destination: Destination,
+    id: number,
+    json: ModuleMetaData,
+  ): void;
+  declare export function emitError(
+    destination: Destination,
+    id: number,
+    message: string,
+    stack: string,
+  ): void;
+  declare export function close(destination: Destination): void;
+
+  declare export type ModuleMetaData = JSONValue;
+  declare export function resolveModuleMetaData<T>(
+    config: BundlerConfig,
+    resourceReference: JSResourceReference<T>,
+  ): ModuleMetaData;
+}
+
+declare module 'ReactFlightNativeRelayClientIntegration' {
+  declare export opaque type ModuleMetaData;
+  declare export function resolveModuleReference<T>(
+    moduleData: ModuleMetaData,
+  ): JSResourceReference<T>;
+  declare export function preloadModule<T>(
+    moduleReference: JSResourceReference<T>,
+  ): void;
+  declare export function requireModule<T>(
+    moduleReference: JSResourceReference<T>,
+  ): T;
+}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 56d59127a35c..cd873e7df7ff 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -298,7 +298,7 @@ const bundles = [
     ],
   },
 
-  /******* React DOM Flight Client Relay *******/
+  /******* React Transport DOM Client Relay *******/
   {
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
@@ -311,6 +311,32 @@ const bundles = [
     ],
   },
 
+  /******* React Transport Native Server Relay *******/
+  {
+    bundleTypes: [RN_FB_DEV, RN_FB_PROD],
+    moduleType: RENDERER,
+    entry: 'react-transport-native-relay/server',
+    global: 'ReactFlightNativeRelayServer',
+    externals: [
+      'react',
+      'ReactFlightNativeRelayServerIntegration',
+      'JSResourceReferenceImpl',
+    ],
+  },
+
+  /******* React Transport Native Client Relay *******/
+  {
+    bundleTypes: [RN_FB_DEV, RN_FB_PROD],
+    moduleType: RENDERER,
+    entry: 'react-transport-native-relay',
+    global: 'ReactFlightNativeRelayClient',
+    externals: [
+      'react',
+      'ReactFlightNativeRelayClientIntegration',
+      'JSResourceReferenceImpl',
+    ],
+  },
+
   /******* React ART *******/
   {
     bundleTypes: [
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index e2a4f51b7404..2dd98b22a46f 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -79,6 +79,8 @@ function getBundleOutputPath(bundleType, filename, packageName) {
             /\.js$/,
             '.fb.js'
           )}`;
+        case 'react-transport-native-relay':
+          return `build/facebook-relay/flight/${filename}`;
         default:
           throw new Error('Unknown RN package.');
       }
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index e51377006000..175ce42f0748 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -91,6 +91,16 @@ module.exports = [
     isFlowTyped: true,
     isServerSupported: true,
   },
+  {
+    shortName: 'native-relay',
+    entryPoints: [
+      'react-transport-native-relay',
+      'react-transport-native-relay/server',
+    ],
+    paths: ['react-native-renderer', 'react-transport-native-relay'],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
   {
     shortName: 'custom',
     entryPoints: [

From 2af07d3f4d3b5bf5d34b66d1bd64c9b521713125 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 3 Nov 2020 03:00:23 +0000
Subject: [PATCH 0054/1603] [Flight Fixture] Server + Client Components
 (#20150)

---
 fixtures/flight/server/App.server.js  | 16 ++++++++++++++
 fixtures/flight/server/handler.js     | 31 ++++++++++-----------------
 fixtures/flight/server/index.js       |  1 +
 fixtures/flight/src/App.js            | 15 -------------
 fixtures/flight/src/Counter.client.js |  6 ++++++
 fixtures/flight/src/index.js          | 18 +++++++++++++---
 6 files changed, 49 insertions(+), 38 deletions(-)
 create mode 100644 fixtures/flight/server/App.server.js
 delete mode 100644 fixtures/flight/src/App.js
 create mode 100644 fixtures/flight/src/Counter.client.js

diff --git a/fixtures/flight/server/App.server.js b/fixtures/flight/server/App.server.js
new file mode 100644
index 000000000000..72858c944779
--- /dev/null
+++ b/fixtures/flight/server/App.server.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+// TODO: A transform should read this from webpack plugin output.
+const CounterClient = {
+  $$typeof: Symbol.for('react.module.reference'),
+  name: './src/Counter.client.js',
+};
+
+export default function App() {
+  return (
+    <div>
+      <h1>Hello, world</h1>
+      <CounterClient />
+    </div>
+  );
+}
diff --git a/fixtures/flight/server/handler.js b/fixtures/flight/server/handler.js
index 25618543db4e..9a0c6004150d 100644
--- a/fixtures/flight/server/handler.js
+++ b/fixtures/flight/server/handler.js
@@ -1,26 +1,17 @@
 'use strict';
 
-const ReactTransportDOMServer = require('react-transport-dom-webpack/server');
-const React = require('react');
-const Stream = require('stream');
-
-function Text({children}) {
-  return <span>{children}</span>;
-}
-
-function HTML() {
-  return (
-    <div>
-      <Text>Hello</Text>
-      <Text>world</Text>
-    </div>
-  );
-}
+import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
+import * as React from 'react';
+import App from './App.server';
 
 module.exports = function(req, res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
-  let model = {
-    content: <HTML />,
-  };
-  ReactTransportDOMServer.pipeToNodeWritable(model, res);
+  pipeToNodeWritable(<App />, res, {
+    // TODO: Read from a map on the disk.
+    './src/Counter.client.js': {
+      id: './src/Counter.client.js',
+      chunks: ['2'],
+      name: 'default',
+    },
+  });
 };
diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js
index 2388365eee39..016fe9f15dba 100644
--- a/fixtures/flight/server/index.js
+++ b/fixtures/flight/server/index.js
@@ -5,6 +5,7 @@ const babelRegister = require('@babel/register');
 babelRegister({
   ignore: [/\/(build|node_modules)\//],
   presets: ['react-app'],
+  plugins: ['@babel/transform-modules-commonjs'],
 });
 
 const express = require('express');
diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js
deleted file mode 100644
index e3a7b558b35d..000000000000
--- a/fixtures/flight/src/App.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, {Suspense} from 'react';
-
-function Content({data}) {
-  return data.readRoot().content;
-}
-
-function App({data}) {
-  return (
-    <Suspense fallback={<h1>Loading...</h1>}>
-      <Content data={data} />
-    </Suspense>
-  );
-}
-
-export default App;
diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.client.js
new file mode 100644
index 000000000000..8274f6134b5a
--- /dev/null
+++ b/fixtures/flight/src/Counter.client.js
@@ -0,0 +1,6 @@
+import * as React from 'react';
+
+export default function Counter() {
+  const [count, setCount] = React.useState(0);
+  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
+}
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index c3e134c096b4..100164f5a461 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -1,10 +1,22 @@
-import React from 'react';
+import React, {Suspense} from 'react';
 import ReactDOM from 'react-dom';
 import ReactTransportDOMClient from 'react-transport-dom-webpack';
-import App from './App';
 
 let data = ReactTransportDOMClient.createFromFetch(
   fetch('http://localhost:3001')
 );
 
-ReactDOM.render(<App data={data} />, document.getElementById('root'));
+function Content() {
+  return data.readRoot();
+}
+
+ReactDOM.render(
+  <Suspense fallback={<h1>Loading...</h1>}>
+    <Content />
+  </Suspense>,
+  document.getElementById('root')
+);
+
+// Create entry points for Client Components.
+// TODO: Webpack plugin should do this and write a map to disk.
+require.context('./', true, /\.client\.js$/, 'lazy');

From 31d096605c31d58361cfe97bb02dac1a5a34959f Mon Sep 17 00:00:00 2001
From: Deniz Susman <susmandeniz@gmail.com>
Date: Tue, 3 Nov 2020 15:57:56 +0100
Subject: [PATCH 0055/1603] typo fix in comment (#20153)

---
 packages/react-dom/src/events/DOMPluginEventSystem.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 874fa394e5c4..0b0991a9e33e 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -133,7 +133,7 @@ function extractEvents(
   // 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 forsee right now.
+  // can't foresee right now.
   if (shouldProcessPolyfillPlugins) {
     EnterLeaveEventPlugin.extractEvents(
       dispatchQueue,

From 6b28eb6175e5251b31507749b79c55c0e389b6ef Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 3 Nov 2020 15:02:06 -0500
Subject: [PATCH 0056/1603] Add workspaces hash to yarn cache key (#20154)

* Add branch to yarn cache key

* Add checksum check for workspace info

* Fix yaml

* Try moving the command

* How about here

* Just inline it

* i hate it here

* try reverting back

* Add run

* idk

* try inlining the command everywhere

* Create workspace_info.txt when we create the cache

* Delete the timestamp
---
 .circleci/config.yml | 38 +++++++++++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 97d574dd19a3..f859b2c59a30 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -16,7 +16,7 @@ aliases:
     restore_cache:
       name: Restore node_modules cache
       keys:
-        - v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-node-modules
+        - v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum "workspace_info.txt" }}-node-modules
 
   - &TEST_PARALLELISM 20
 
@@ -29,6 +29,7 @@ aliases:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: node ./scripts/rollup/consolidateBundleSizes.js
       - run: ./scripts/circleci/pack_and_store_artifact.sh
@@ -51,7 +52,6 @@ jobs:
   setup:
     docker: *docker
     environment: *environment
-
     steps:
       - checkout
       - run:
@@ -61,6 +61,7 @@ jobs:
       - run:
           name: Install Packages
           command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - save_cache:
           # Store the yarn cache globally for all lock files with this same
           # checksum. This will speed up the setup job for all PRs where the
@@ -75,7 +76,7 @@ jobs:
           # all jobs run on this branch with the same lockfile.
           name: Save node_modules cache
           # This cache key is per branch, a yarn install in setup is required.
-          key: v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-node-modules
+          key: v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum "workspace_info.txt" }}-node-modules
           paths:
             - node_modules
 
@@ -85,6 +86,7 @@ jobs:
 
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: node ./scripts/prettier/index
       - run: node ./scripts/tasks/eslint
@@ -98,6 +100,7 @@ jobs:
 
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: node ./scripts/tasks/flow-ci
 
@@ -108,6 +111,7 @@ jobs:
 
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-stable --ci
 
@@ -117,6 +121,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test --ci
 
@@ -126,6 +131,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-classic --ci
 
@@ -135,6 +141,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-classic --variant --ci
 
@@ -144,6 +151,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-classic --prod --ci
 
@@ -153,6 +161,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-classic --prod --variant --ci
 
@@ -162,6 +171,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-www --ci
 
@@ -171,6 +181,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-www --variant --ci
 
@@ -180,6 +191,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-www --prod --ci
 
@@ -189,6 +201,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-www --prod --variant --ci
 
@@ -199,6 +212,7 @@ jobs:
 
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-stable --persistent --ci
 
@@ -209,6 +223,7 @@ jobs:
 
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-stable --prod --ci
 
@@ -218,6 +233,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test --prod --ci
 
@@ -227,6 +243,7 @@ jobs:
     parallelism: *TEST_PARALLELISM
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:
           environment:
@@ -254,6 +271,7 @@ jobs:
     parallelism: 20
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:
           environment:
@@ -281,6 +299,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_yarn_cache
       - *restore_node_modules
       - run:
@@ -299,6 +318,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_yarn_cache
       - *restore_node_modules
       - run:
@@ -326,6 +346,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: packages/react-devtools-scheduling-profiler
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:
           name: Deploy
@@ -344,6 +365,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       # This runs in the process_artifacts job, too, but it's faster to run
       # this step in both jobs instead of running the jobs sequentially
@@ -359,6 +381,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       # This runs in the process_artifacts job, too, but it's faster to run
       # this step in both jobs instead of running the jobs sequentially
@@ -374,6 +397,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn lint-build
       - run: scripts/circleci/check_minified_errors.sh
@@ -384,6 +408,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:
           environment:
@@ -398,6 +423,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-stable --build --ci
 
@@ -408,6 +434,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test --build --ci
 
@@ -417,6 +444,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test --project=devtools --build --ci
 
@@ -426,6 +454,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:
           name: Run DOM fixture tests
@@ -442,6 +471,7 @@ jobs:
     environment: *environment
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:
           name: Run fuzz tests
@@ -456,6 +486,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test-stable --build --prod --ci
 
@@ -466,6 +497,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test --build --prod --ci
 

From c29710a570f01736a24d66af7b14edf3deef7f68 Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Mon, 9 Nov 2020 03:59:53 +0800
Subject: [PATCH 0057/1603] fix: useImperativeMethods to useImperativeHandle
 (#20194)

---
 packages/react-refresh/src/ReactFreshBabelPlugin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
index 49b0dce0f76a..4171893e41dd 100644
--- a/packages/react-refresh/src/ReactFreshBabelPlugin.js
+++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -226,8 +226,8 @@ export default function(babel, opts = {}) {
       case 'React.useRef':
       case 'useContext':
       case 'React.useContext':
-      case 'useImperativeMethods':
-      case 'React.useImperativeMethods':
+      case 'useImperativeHandle':
+      case 'React.useImperativeHandle':
       case 'useDebugValue':
       case 'React.useDebugValue':
         return true;

From fc06cf8d3509329eba61a1f1f0b6f5c466f32bcc Mon Sep 17 00:00:00 2001
From: inokawa <48897392+inokawa@users.noreply.github.com>
Date: Mon, 9 Nov 2020 23:17:40 +0900
Subject: [PATCH 0058/1603] Fix typo (#20188)

---
 packages/react-dom/src/events/DOMPluginEventSystem.js  | 2 +-
 packages/react-dom/src/events/ReactDOMEventListener.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 0b0991a9e33e..b2c118d3cea8 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -551,7 +551,7 @@ export function dispatchEventForPluginEventSystem(
     if (
       enableLegacyFBSupport &&
       // If our event flags match the required flags for entering
-      // FB legacy mode and we are prcocessing the "click" event,
+      // 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.
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index d5f13d3b0ad9..9a41c6c1317f 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -252,7 +252,7 @@ export function dispatchEvent(
       return;
     }
     // We need to clear only if we didn't queue because
-    // queueing is accummulative.
+    // queueing is accumulative.
     clearIfContinuousEvent(domEventName, nativeEvent);
   }
 

From 7a73d6a0f9ad43a6dce145e3cc47e88cc59fbbd7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 9 Nov 2020 10:14:24 -0500
Subject: [PATCH 0059/1603] (Temporarily) revert unmounting error boundaries
 changes (#20147)

This reverts commits bcca5a6ca78b33504e0a328c411b043261e7e303 and ffb749c95e0361b3cfbbfc4e1a73bfa2fda0aa93, although neither revert cleanly since methods have been moved between the work-loop and commit-work files. This commit is a mostly manual effort of undoing the changes.
---
 .../ReactErrorBoundaries-test.internal.js     | 171 -------
 .../DOMPluginEventSystem-test.internal.js     |  56 +--
 .../src/ReactFiberCommitWork.new.js           | 271 +++-------
 .../src/ReactFiberWorkLoop.new.js             |  15 +-
 .../src/ReactFiberWorkLoop.old.js             |  24 +-
 .../ReactHooksWithNoopRenderer-test.js        | 461 ------------------
 ...tIncrementalErrorHandling-test.internal.js |  18 +-
 packages/shared/ReactFeatureFlags.js          |   6 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 17 files changed, 100 insertions(+), 931 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
index 46ace25fd7a1..50eae32123b7 100644
--- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -2473,175 +2473,4 @@ describe('ReactErrorBoundaries', () => {
       'Caught an error: gotta catch em all.',
     );
   });
-
-  // @gate skipUnmountedBoundaries
-  it('catches errors thrown in componentWillUnmount', () => {
-    class LocalErrorBoundary extends React.Component {
-      state = {error: null};
-      static getDerivedStateFromError(error) {
-        Scheduler.unstable_yieldValue(
-          `ErrorBoundary static getDerivedStateFromError`,
-        );
-        return {error};
-      }
-      render() {
-        const {children, id, fallbackID} = this.props;
-        const {error} = this.state;
-        if (error) {
-          Scheduler.unstable_yieldValue(`${id} render error`);
-          return <Component id={fallbackID} />;
-        }
-        Scheduler.unstable_yieldValue(`${id} render success`);
-        return children || null;
-      }
-    }
-
-    class Component extends React.Component {
-      render() {
-        const {id} = this.props;
-        Scheduler.unstable_yieldValue('Component render ' + id);
-        return id;
-      }
-    }
-
-    class LocalBrokenComponentWillUnmount extends React.Component {
-      componentWillUnmount() {
-        Scheduler.unstable_yieldValue(
-          'BrokenComponentWillUnmount componentWillUnmount',
-        );
-        throw Error('Expected');
-      }
-
-      render() {
-        Scheduler.unstable_yieldValue('BrokenComponentWillUnmount render');
-        return 'broken';
-      }
-    }
-
-    const container = document.createElement('div');
-
-    ReactDOM.render(
-      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
-        <Component id="sibling" />
-        <LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
-          <LocalBrokenComponentWillUnmount />
-        </LocalErrorBoundary>
-      </LocalErrorBoundary>,
-      container,
-    );
-
-    expect(container.firstChild.textContent).toBe('sibling');
-    expect(container.lastChild.textContent).toBe('broken');
-    expect(Scheduler).toHaveYielded([
-      'OuterBoundary render success',
-      'Component render sibling',
-      'InnerBoundary render success',
-      'BrokenComponentWillUnmount render',
-    ]);
-
-    ReactDOM.render(
-      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
-        <Component id="sibling" />
-      </LocalErrorBoundary>,
-      container,
-    );
-
-    // 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');
-    expect(Scheduler).toHaveYielded([
-      'OuterBoundary render success',
-      'Component render sibling',
-      'BrokenComponentWillUnmount componentWillUnmount',
-      'ErrorBoundary static getDerivedStateFromError',
-      'OuterBoundary render error',
-      'Component render OuterFallback',
-    ]);
-  });
-
-  // @gate skipUnmountedBoundaries
-  it('catches errors thrown while detaching refs', () => {
-    class LocalErrorBoundary extends React.Component {
-      state = {error: null};
-      static getDerivedStateFromError(error) {
-        Scheduler.unstable_yieldValue(
-          `ErrorBoundary static getDerivedStateFromError`,
-        );
-        return {error};
-      }
-      render() {
-        const {children, id, fallbackID} = this.props;
-        const {error} = this.state;
-        if (error) {
-          Scheduler.unstable_yieldValue(`${id} render error`);
-          return <Component id={fallbackID} />;
-        }
-        Scheduler.unstable_yieldValue(`${id} render success`);
-        return children || null;
-      }
-    }
-
-    class Component extends React.Component {
-      render() {
-        const {id} = this.props;
-        Scheduler.unstable_yieldValue('Component render ' + id);
-        return id;
-      }
-    }
-
-    class LocalBrokenCallbackRef extends React.Component {
-      _ref = ref => {
-        Scheduler.unstable_yieldValue('LocalBrokenCallbackRef ref ' + !!ref);
-        if (ref === null) {
-          throw Error('Expected');
-        }
-      };
-
-      render() {
-        Scheduler.unstable_yieldValue('LocalBrokenCallbackRef render');
-        return <div ref={this._ref}>ref</div>;
-      }
-    }
-
-    const container = document.createElement('div');
-
-    ReactDOM.render(
-      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
-        <Component id="sibling" />
-        <LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
-          <LocalBrokenCallbackRef />
-        </LocalErrorBoundary>
-      </LocalErrorBoundary>,
-      container,
-    );
-
-    expect(container.firstChild.textContent).toBe('sibling');
-    expect(container.lastChild.textContent).toBe('ref');
-    expect(Scheduler).toHaveYielded([
-      'OuterBoundary render success',
-      'Component render sibling',
-      'InnerBoundary render success',
-      'LocalBrokenCallbackRef render',
-      'LocalBrokenCallbackRef ref true',
-    ]);
-
-    ReactDOM.render(
-      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
-        <Component id="sibling" />
-      </LocalErrorBoundary>,
-      container,
-    );
-
-    // 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');
-    expect(Scheduler).toHaveYielded([
-      '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/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 004f0bb631f3..8bf16bc94255 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -1669,28 +1669,16 @@ describe('DOMPluginEventSystem', () => {
 
             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,
-                );
+                setClick1(buttonRef.current, targetListener1);
+                setClick2(buttonRef.current, targetListener2);
+                setClick3(buttonRef.current, targetListener3);
+                setClick4(buttonRef.current, targetListener4);
 
                 return () => {
-                  clearClick1();
-                  clearClick2();
-                  clearClick3();
-                  clearClick4();
+                  setClick1();
+                  setClick2();
+                  setClick3();
+                  setClick4();
                 };
               });
 
@@ -1715,28 +1703,16 @@ describe('DOMPluginEventSystem', () => {
 
             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,
-                );
+                setClick1(buttonRef.current, targetListener1);
+                setClick2(buttonRef.current, targetListener2);
+                setClick3(buttonRef.current, targetListener3);
+                setClick4(buttonRef.current, targetListener4);
 
                 return () => {
-                  clearClick1();
-                  clearClick2();
-                  clearClick3();
-                  clearClick4();
+                  setClick1();
+                  setClick2();
+                  setClick3();
+                  setClick4();
                 };
               });
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index a627cf4e17d0..0f16c4c0a3fb 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -185,11 +185,7 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
 };
 
 // Capture errors so they don't interrupt unmounting.
-function safelyCallComponentWillUnmount(
-  current: Fiber,
-  instance: any,
-  nearestMountedAncestor: Fiber | null,
-) {
+function safelyCallComponentWillUnmount(current, instance) {
   if (__DEV__) {
     invokeGuardedCallback(
       null,
@@ -200,19 +196,19 @@ function safelyCallComponentWillUnmount(
     );
     if (hasCaughtError()) {
       const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+      captureCommitPhaseError(current, unmountError);
     }
   } else {
     try {
       callComponentWillUnmountWithTimer(current, instance);
     } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+      captureCommitPhaseError(current, unmountError);
     }
   }
 }
 
 /** @noinline */
-function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber) {
+function safelyDetachRef(current: Fiber) {
   const ref = current.ref;
   if (ref !== null) {
     if (typeof ref === 'function') {
@@ -231,7 +227,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber) {
 
         if (hasCaughtError()) {
           const refError = clearCaughtError();
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
+          captureCommitPhaseError(current, refError);
         }
       } else {
         try {
@@ -250,7 +246,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber) {
             ref(null);
           }
         } catch (refError) {
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
+          captureCommitPhaseError(current, refError);
         }
       }
     } else {
@@ -259,32 +255,24 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber) {
   }
 }
 
-export function safelyCallDestroy(
-  current: Fiber,
-  nearestMountedAncestor: Fiber | null,
-  destroy: () => void,
-) {
+export function safelyCallDestroy(current: Fiber, destroy: () => void) {
   if (__DEV__) {
     invokeGuardedCallback(null, destroy, null);
     if (hasCaughtError()) {
       const error = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
+      captureCommitPhaseError(current, error);
     }
   } else {
     try {
       destroy();
     } catch (error) {
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
+      captureCommitPhaseError(current, error);
     }
   }
 }
 
 /** @noinline */
-function commitHookEffectListUnmount(
-  flags: HookFlags,
-  finishedWork: Fiber,
-  nearestMountedAncestor: Fiber | null,
-) {
+function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
@@ -296,7 +284,7 @@ function commitHookEffectListUnmount(
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
-          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+          safelyCallDestroy(finishedWork, destroy);
         }
       }
       effect = effect.next;
@@ -442,14 +430,14 @@ function recursivelyCommitBeforeMutationEffects(firstChild: Fiber) {
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitBeforeMutationEffectsOnFiber(fiber);
       } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
     }
     fiber = fiber.sibling;
@@ -492,14 +480,14 @@ function iterativelyCommitBeforeMutationEffects_complete() {
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitBeforeMutationEffectsOnFiber(fiber);
       } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
     }
 
@@ -668,12 +656,7 @@ function recursivelyCommitMutationEffects(
   while (fiber !== null) {
     const deletions = fiber.deletions;
     if (deletions !== null) {
-      commitMutationEffectsDeletions(
-        deletions,
-        fiber,
-        root,
-        renderPriorityLevel,
-      );
+      commitMutationEffectsDeletions(deletions, root, renderPriorityLevel);
     }
 
     if (fiber.child !== null) {
@@ -699,14 +682,14 @@ function recursivelyCommitMutationEffects(
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
       } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
     }
     fiber = fiber.sibling;
@@ -723,12 +706,7 @@ function iterativelyCommitMutationEffects_begin(
     // TODO: Should wrap this in flags check, too, as optimization
     const deletions = fiber.deletions;
     if (deletions !== null) {
-      commitMutationEffectsDeletions(
-        deletions,
-        fiber,
-        root,
-        renderPriorityLevel,
-      );
+      commitMutationEffectsDeletions(deletions, root, renderPriorityLevel);
     }
 
     const child = fiber.child;
@@ -759,14 +737,14 @@ function iterativelyCommitMutationEffects_complete(
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
       } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
+        captureCommitPhaseError(fiber, error);
       }
     }
 
@@ -855,7 +833,6 @@ function commitMutationEffectsOnFiber(
 /** @noinline */
 function commitMutationEffectsDeletions(
   deletions: Array<Fiber>,
-  nearestMountedAncestor: Fiber,
   root: FiberRoot,
   renderPriorityLevel,
 ) {
@@ -868,23 +845,17 @@ function commitMutationEffectsDeletions(
         null,
         root,
         childToDelete,
-        nearestMountedAncestor,
         renderPriorityLevel,
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);
+        captureCommitPhaseError(childToDelete, error);
       }
     } else {
       try {
-        commitDeletion(
-          root,
-          childToDelete,
-          nearestMountedAncestor,
-          renderPriorityLevel,
-        );
+        commitDeletion(root, childToDelete, renderPriorityLevel);
       } catch (error) {
-        captureCommitPhaseError(childToDelete, nearestMountedAncestor, error);
+        captureCommitPhaseError(childToDelete, error);
       }
     }
   }
@@ -906,14 +877,14 @@ export function commitLayoutEffects(
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(finishedWork, null, error);
+        captureCommitPhaseError(finishedWork, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         recursivelyCommitLayoutEffects(finishedWork, finishedRoot);
       } catch (error) {
-        captureCommitPhaseError(finishedWork, null, error);
+        captureCommitPhaseError(finishedWork, error);
       }
     }
   } else {
@@ -951,7 +922,7 @@ function recursivelyCommitLayoutEffects(
             );
             if (hasCaughtError()) {
               const error = clearCaughtError();
-              captureCommitPhaseError(child, finishedWork, error);
+              captureCommitPhaseError(child, error);
             }
             if (prevCurrentFiberInDEV !== null) {
               setCurrentDebugFiberInDEV(prevCurrentFiberInDEV);
@@ -962,7 +933,7 @@ function recursivelyCommitLayoutEffects(
             try {
               recursivelyCommitLayoutEffects(child, finishedRoot);
             } catch (error) {
-              captureCommitPhaseError(child, finishedWork, error);
+              captureCommitPhaseError(child, error);
             }
           }
         }
@@ -984,7 +955,7 @@ function recursivelyCommitLayoutEffects(
             );
             if (hasCaughtError()) {
               const error = clearCaughtError();
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+              captureCommitPhaseError(finishedWork, error);
             }
             if (prevCurrentFiberInDEV !== null) {
               setCurrentDebugFiberInDEV(prevCurrentFiberInDEV);
@@ -995,7 +966,7 @@ function recursivelyCommitLayoutEffects(
             try {
               commitLayoutEffectsForProfiler(finishedWork, finishedRoot);
             } catch (error) {
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+              captureCommitPhaseError(finishedWork, error);
             }
           }
         }
@@ -1036,7 +1007,7 @@ function recursivelyCommitLayoutEffects(
             );
             if (hasCaughtError()) {
               const error = clearCaughtError();
-              captureCommitPhaseError(child, finishedWork, error);
+              captureCommitPhaseError(child, error);
             }
             if (prevCurrentFiberInDEV !== null) {
               setCurrentDebugFiberInDEV(prevCurrentFiberInDEV);
@@ -1047,7 +1018,7 @@ function recursivelyCommitLayoutEffects(
             try {
               recursivelyCommitLayoutEffects(child, finishedRoot);
             } catch (error) {
-              captureCommitPhaseError(child, finishedWork, error);
+              captureCommitPhaseError(child, error);
             }
           }
         }
@@ -1175,14 +1146,14 @@ function iterativelyCommitLayoutEffects_begin(
             );
             if (hasCaughtError()) {
               const error = clearCaughtError();
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+              captureCommitPhaseError(finishedWork, error);
             }
             resetCurrentDebugFiberInDEV();
           } else {
             try {
               commitLayoutEffectsForProfiler(finishedWork, finishedRoot);
             } catch (error) {
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+              captureCommitPhaseError(finishedWork, error);
             }
           }
         }
@@ -1236,14 +1207,14 @@ function iterativelyCommitLayoutEffects_complete(
         );
         if (hasCaughtError()) {
           const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
+          captureCommitPhaseError(fiber, error);
         }
         resetCurrentDebugFiberInDEV();
       } else {
         try {
           commitLayoutEffectsOnFiber(finishedRoot, fiber);
         } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
+          captureCommitPhaseError(fiber, error);
         }
       }
     }
@@ -1690,14 +1661,14 @@ function recursivelyCommitPassiveMountEffects(
         );
         if (hasCaughtError()) {
           const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
+          captureCommitPhaseError(fiber, error);
         }
         resetCurrentDebugFiberInDEV();
       } else {
         try {
           commitPassiveMountOnFiber(root, fiber);
         } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
+          captureCommitPhaseError(fiber, error);
         }
       }
     }
@@ -1755,14 +1726,14 @@ function iterativelyCommitPassiveMountEffects_begin(
             );
             if (hasCaughtError()) {
               const error = clearCaughtError();
-              captureCommitPhaseError(fiber, fiber.return, error);
+              captureCommitPhaseError(fiber, error);
             }
             resetCurrentDebugFiberInDEV();
           } else {
             try {
               commitProfilerPassiveEffect(root, fiber);
             } catch (error) {
-              captureCommitPhaseError(fiber, fiber.return, error);
+              captureCommitPhaseError(fiber, error);
             }
           }
         }
@@ -1816,14 +1787,14 @@ function iterativelyCommitPassiveMountEffects_complete(
         );
         if (hasCaughtError()) {
           const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
+          captureCommitPhaseError(fiber, error);
         }
         resetCurrentDebugFiberInDEV();
       } else {
         try {
           commitPassiveMountOnFiber(root, fiber);
         } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
+          captureCommitPhaseError(fiber, error);
         }
       }
     }
@@ -1862,7 +1833,6 @@ function recursivelyCommitPassiveUnmountEffects(firstChild: Fiber): void {
         const fiberToDelete = deletions[i];
         recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
           fiberToDelete,
-          fiber,
         );
 
         // Now that passive effects have been processed, it's safe to detach lingering pointers.
@@ -1906,7 +1876,6 @@ function iterativelyCommitPassiveUnmountEffects_begin() {
         nextEffect = fiberToDelete;
         iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
           fiberToDelete,
-          fiber,
         );
 
         // Now that passive effects have been processed, it's safe to detach lingering pointers.
@@ -1946,7 +1915,6 @@ function iterativelyCommitPassiveUnmountEffects_complete() {
 
 function recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
   fiberToDelete: Fiber,
-  nearestMountedAncestor: Fiber,
 ): void {
   if ((fiberToDelete.subtreeFlags & PassiveStatic) !== NoFlags) {
     // If any children have passive effects then traverse the subtree.
@@ -1955,27 +1923,20 @@ function recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
     // since that would not cover passive effects in siblings.
     let child = fiberToDelete.child;
     while (child !== null) {
-      recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
-        child,
-        nearestMountedAncestor,
-      );
+      recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(child);
       child = child.sibling;
     }
   }
 
   if ((fiberToDelete.flags & PassiveStatic) !== NoFlags) {
     setCurrentDebugFiberInDEV(fiberToDelete);
-    commitPassiveUnmountInsideDeletedTreeOnFiber(
-      fiberToDelete,
-      nearestMountedAncestor,
-    );
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiberToDelete);
     resetCurrentDebugFiberInDEV();
   }
 }
 
 function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
   deletedSubtreeRoot: Fiber,
-  nearestMountedAncestor: Fiber,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -1986,7 +1947,6 @@ function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     } else {
       iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
         deletedSubtreeRoot,
-        nearestMountedAncestor,
       );
     }
   }
@@ -1994,16 +1954,12 @@ function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
 
 function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
   deletedSubtreeRoot: Fiber,
-  nearestMountedAncestor: Fiber,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     if ((fiber.flags & PassiveStatic) !== NoFlags) {
       setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountInsideDeletedTreeOnFiber(
-        fiber,
-        nearestMountedAncestor,
-      );
+      commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
       resetCurrentDebugFiberInDEV();
     }
 
@@ -2118,7 +2074,6 @@ function commitDetachRef(current: Fiber) {
 function commitUnmount(
   finishedRoot: FiberRoot,
   current: Fiber,
-  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   onCommitUnmount(current);
@@ -2145,10 +2100,10 @@ function commitUnmount(
                   current.mode & ProfileMode
                 ) {
                   startLayoutEffectTimer();
-                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
+                  safelyCallDestroy(current, destroy);
                   recordLayoutEffectDuration(current);
                 } else {
-                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
+                  safelyCallDestroy(current, destroy);
                 }
               }
             }
@@ -2159,19 +2114,15 @@ function commitUnmount(
       return;
     }
     case ClassComponent: {
-      safelyDetachRef(current, nearestMountedAncestor);
+      safelyDetachRef(current);
       const instance = current.stateNode;
       if (typeof instance.componentWillUnmount === 'function') {
-        safelyCallComponentWillUnmount(
-          current,
-          instance,
-          nearestMountedAncestor,
-        );
+        safelyCallComponentWillUnmount(current, instance);
       }
       return;
     }
     case HostComponent: {
-      safelyDetachRef(current, nearestMountedAncestor);
+      safelyDetachRef(current);
       return;
     }
     case HostPortal: {
@@ -2179,12 +2130,7 @@ function commitUnmount(
       // We are also not using this parent because
       // the portal will get pushed immediately.
       if (supportsMutation) {
-        unmountHostComponents(
-          finishedRoot,
-          current,
-          nearestMountedAncestor,
-          renderPriorityLevel,
-        );
+        unmountHostComponents(finishedRoot, current, renderPriorityLevel);
       } else if (supportsPersistence) {
         emptyPortalContainer(current);
       }
@@ -2214,7 +2160,7 @@ function commitUnmount(
     }
     case ScopeComponent: {
       if (enableScopeAPI) {
-        safelyDetachRef(current, nearestMountedAncestor);
+        safelyDetachRef(current);
       }
       return;
     }
@@ -2224,7 +2170,6 @@ function commitUnmount(
 function commitNestedUnmounts(
   finishedRoot: FiberRoot,
   root: Fiber,
-  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   // While we're inside a removed host node we don't want to call
@@ -2234,12 +2179,7 @@ function commitNestedUnmounts(
   // we do an inner loop while we're still inside the host node.
   let node: Fiber = root;
   while (true) {
-    commitUnmount(
-      finishedRoot,
-      node,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    commitUnmount(finishedRoot, node, renderPriorityLevel);
     // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
     if (
@@ -2520,10 +2460,9 @@ function insertOrAppendPlacementNode(
 }
 
 function unmountHostComponents(
-  finishedRoot: FiberRoot,
-  current: Fiber,
-  nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  finishedRoot,
+  current,
+  renderPriorityLevel,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
@@ -2572,12 +2511,7 @@ function unmountHostComponents(
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
+      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -2594,12 +2528,7 @@ function unmountHostComponents(
       // Don't visit children because we already visited them.
     } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
       const fundamentalNode = node.stateNode.instance;
-      commitNestedUnmounts(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
+      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -2651,12 +2580,7 @@ function unmountHostComponents(
         continue;
       }
     } else {
-      commitUnmount(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
+      commitUnmount(finishedRoot, node, renderPriorityLevel);
       // Visit children because we may find more host components below.
       if (node.child !== null) {
         node.child.return = node;
@@ -2686,26 +2610,15 @@ function unmountHostComponents(
 function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
-  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(
-      finishedRoot,
-      current,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    unmountHostComponents(finishedRoot, current, renderPriorityLevel);
   } else {
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(
-      finishedRoot,
-      current,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);
   }
   const alternate = current.alternate;
   detachFiberMutation(current);
@@ -2736,17 +2649,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
             commitHookEffectListUnmount(
               HookLayout | HookHasEffect,
               finishedWork,
-              finishedWork.return,
             );
           } finally {
             recordLayoutEffectDuration(finishedWork);
           }
         } else {
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
+          commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
         }
         return;
       }
@@ -2800,20 +2708,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       ) {
         try {
           startLayoutEffectTimer();
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
+          commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
         } finally {
           recordLayoutEffectDuration(finishedWork);
         }
       } else {
-        commitHookEffectListUnmount(
-          HookLayout | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
+        commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
       }
       return;
     }
@@ -3049,28 +2949,17 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
         finishedWork.mode & ProfileMode
       ) {
         startPassiveEffectTimer();
-        commitHookEffectListUnmount(
-          HookPassive | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
+        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
         recordPassiveEffectDuration(finishedWork);
       } else {
-        commitHookEffectListUnmount(
-          HookPassive | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
+        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
       }
       break;
     }
   }
 }
 
-function commitPassiveUnmountInsideDeletedTreeOnFiber(
-  current: Fiber,
-  nearestMountedAncestor: Fiber | null,
-): void {
+function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
   switch (current.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -3081,18 +2970,10 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
         current.mode & ProfileMode
       ) {
         startPassiveEffectTimer();
-        commitHookEffectListUnmount(
-          HookPassive,
-          current,
-          nearestMountedAncestor,
-        );
+        commitHookEffectListUnmount(HookPassive, current);
         recordPassiveEffectDuration(current);
       } else {
-        commitHookEffectListUnmount(
-          HookPassive,
-          current,
-          nearestMountedAncestor,
-        );
+        commitHookEffectListUnmount(HookPassive, current);
       }
       break;
     }
@@ -3147,7 +3028,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+          captureCommitPhaseError(fiber, mountError);
         }
         break;
       }
@@ -3156,7 +3037,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         invokeGuardedCallback(null, instance.componentDidMount, instance);
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+          captureCommitPhaseError(fiber, mountError);
         }
         break;
       }
@@ -3181,7 +3062,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+          captureCommitPhaseError(fiber, mountError);
         }
         break;
       }
@@ -3203,18 +3084,17 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
           null,
           HookLayout | HookHasEffect,
           fiber,
-          fiber.return,
         );
         if (hasCaughtError()) {
           const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, unmountError);
+          captureCommitPhaseError(fiber, unmountError);
         }
         break;
       }
       case ClassComponent: {
         const instance = fiber.stateNode;
         if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(fiber, instance, fiber.return);
+          safelyCallComponentWillUnmount(fiber, instance);
         }
         break;
       }
@@ -3236,11 +3116,10 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
           null,
           HookPassive | HookHasEffect,
           fiber,
-          fiber.return,
         );
         if (hasCaughtError()) {
           const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, unmountError);
+          captureCommitPhaseError(fiber, unmountError);
         }
         break;
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index d80988906706..9988e7b3b1ad 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -27,7 +27,6 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   enableSchedulingProfiler,
-  skipUnmountedBoundaries,
   enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -2201,11 +2200,7 @@ function captureCommitPhaseErrorOnRoot(
   }
 }
 
-export function captureCommitPhaseError(
-  sourceFiber: Fiber,
-  nearestMountedAncestor: Fiber | null,
-  error: mixed,
-) {
+export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
   if (sourceFiber.tag === HostRoot) {
     // Error was thrown at the root. There is no parent, so the root
     // itself should capture it.
@@ -2213,13 +2208,7 @@ export function captureCommitPhaseError(
     return;
   }
 
-  let fiber = null;
-  if (skipUnmountedBoundaries) {
-    fiber = nearestMountedAncestor;
-  } else {
-    fiber = sourceFiber.return;
-  }
-
+  let fiber = sourceFiber.return;
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 24875508a9c3..47eb654b6ac7 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2298,10 +2298,7 @@ function commitBeforeMutationEffects() {
   }
 }
 
-function commitMutationEffects(
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
+function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
   // TODO: Should probably move the bulk of this function to commitWork.
   while (nextEffect !== null) {
     setCurrentDebugFiberInDEV(nextEffect);
@@ -2760,7 +2757,6 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
   }
 
   let fiber = sourceFiber.return;
-
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
@@ -2786,24 +2782,6 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
           markRootUpdated(root, SyncLane, eventTime);
           ensureRootIsScheduled(root, eventTime);
           schedulePendingInteractions(root, SyncLane);
-        } else {
-          // This component has already been unmounted.
-          // We can't schedule any follow up work for the root because the fiber is already unmounted,
-          // but we can still call the log-only boundary so the error isn't swallowed.
-          //
-          // TODO This is only a temporary bandaid for the old reconciler fork.
-          // We can delete this special case once the new fork is merged.
-          if (
-            typeof instance.componentDidCatch === 'function' &&
-            !isAlreadyFailedLegacyErrorBoundary(instance)
-          ) {
-            try {
-              instance.componentDidCatch(error, errorInfo);
-            } catch (errorToIgnore) {
-              // TODO Ignore this error? Rethrow it?
-              // This is kind of an edge case.
-            }
-          }
         }
         return;
       }
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 79794bbea7ff..1a7e3d1f5fe9 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2353,388 +2353,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
     });
 
-    describe('errors thrown in passive destroy function within unmounted trees', () => {
-      let BrokenUseEffectCleanup;
-      let ErrorBoundary;
-      let DerivedStateOnlyErrorBoundary;
-      let LogOnlyErrorBoundary;
-
-      beforeEach(() => {
-        BrokenUseEffectCleanup = function() {
-          useEffect(() => {
-            Scheduler.unstable_yieldValue('BrokenUseEffectCleanup useEffect');
-            return () => {
-              Scheduler.unstable_yieldValue(
-                'BrokenUseEffectCleanup useEffect destroy',
-              );
-              throw new Error('Expected error');
-            };
-          }, []);
-
-          return 'inner child';
-        };
-
-        ErrorBoundary = class extends React.Component {
-          state = {error: null};
-          static getDerivedStateFromError(error) {
-            Scheduler.unstable_yieldValue(
-              `ErrorBoundary static getDerivedStateFromError`,
-            );
-            return {error};
-          }
-          componentDidCatch(error, info) {
-            Scheduler.unstable_yieldValue(`ErrorBoundary componentDidCatch`);
-          }
-          render() {
-            if (this.state.error) {
-              Scheduler.unstable_yieldValue('ErrorBoundary render error');
-              return <span prop="ErrorBoundary fallback" />;
-            }
-            Scheduler.unstable_yieldValue('ErrorBoundary render success');
-            return this.props.children || null;
-          }
-        };
-
-        DerivedStateOnlyErrorBoundary = class extends React.Component {
-          state = {error: null};
-          static getDerivedStateFromError(error) {
-            Scheduler.unstable_yieldValue(
-              `DerivedStateOnlyErrorBoundary static getDerivedStateFromError`,
-            );
-            return {error};
-          }
-          render() {
-            if (this.state.error) {
-              Scheduler.unstable_yieldValue(
-                'DerivedStateOnlyErrorBoundary render error',
-              );
-              return <span prop="DerivedStateOnlyErrorBoundary fallback" />;
-            }
-            Scheduler.unstable_yieldValue(
-              'DerivedStateOnlyErrorBoundary render success',
-            );
-            return this.props.children || null;
-          }
-        };
-
-        LogOnlyErrorBoundary = class extends React.Component {
-          componentDidCatch(error, info) {
-            Scheduler.unstable_yieldValue(
-              `LogOnlyErrorBoundary componentDidCatch`,
-            );
-          }
-          render() {
-            Scheduler.unstable_yieldValue(`LogOnlyErrorBoundary render`);
-            return this.props.children || null;
-          }
-        };
-      });
-
-      // @gate old
-      it('should call componentDidCatch() for the nearest unmounted log-only boundary', () => {
-        function Conditional({showChildren}) {
-          if (showChildren) {
-            return (
-              <LogOnlyErrorBoundary>
-                <BrokenUseEffectCleanup />
-              </LogOnlyErrorBoundary>
-            );
-          } else {
-            return null;
-          }
-        }
-
-        act(() => {
-          ReactNoop.render(
-            <ErrorBoundary>
-              <Conditional showChildren={true} />
-            </ErrorBoundary>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'ErrorBoundary render success',
-          'LogOnlyErrorBoundary render',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        act(() => {
-          ReactNoop.render(
-            <ErrorBoundary>
-              <Conditional showChildren={false} />
-            </ErrorBoundary>,
-          );
-          expect(Scheduler).toFlushAndYieldThrough([
-            'ErrorBoundary render success',
-          ]);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'BrokenUseEffectCleanup useEffect destroy',
-          'LogOnlyErrorBoundary componentDidCatch',
-        ]);
-      });
-
-      // @gate old
-      it('should call componentDidCatch() for the nearest unmounted logging-capable boundary', () => {
-        function Conditional({showChildren}) {
-          if (showChildren) {
-            return (
-              <ErrorBoundary>
-                <BrokenUseEffectCleanup />
-              </ErrorBoundary>
-            );
-          } else {
-            return null;
-          }
-        }
-
-        act(() => {
-          ReactNoop.render(
-            <ErrorBoundary>
-              <Conditional showChildren={true} />
-            </ErrorBoundary>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'ErrorBoundary render success',
-          'ErrorBoundary render success',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        act(() => {
-          ReactNoop.render(
-            <ErrorBoundary>
-              <Conditional showChildren={false} />
-            </ErrorBoundary>,
-          );
-          expect(Scheduler).toFlushAndYieldThrough([
-            'ErrorBoundary render success',
-          ]);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'BrokenUseEffectCleanup useEffect destroy',
-          'ErrorBoundary componentDidCatch',
-        ]);
-      });
-
-      // @gate old
-      it('should not call getDerivedStateFromError for unmounted error boundaries', () => {
-        function Conditional({showChildren}) {
-          if (showChildren) {
-            return (
-              <ErrorBoundary>
-                <BrokenUseEffectCleanup />
-              </ErrorBoundary>
-            );
-          } else {
-            return null;
-          }
-        }
-
-        act(() => {
-          ReactNoop.render(<Conditional showChildren={true} />);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'ErrorBoundary render success',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        act(() => {
-          ReactNoop.render(<Conditional showChildren={false} />);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'BrokenUseEffectCleanup useEffect destroy',
-          'ErrorBoundary componentDidCatch',
-        ]);
-      });
-
-      // @gate old
-      it('should not throw if there are no unmounted logging-capable boundaries to call', () => {
-        function Conditional({showChildren}) {
-          if (showChildren) {
-            return (
-              <DerivedStateOnlyErrorBoundary>
-                <BrokenUseEffectCleanup />
-              </DerivedStateOnlyErrorBoundary>
-            );
-          } else {
-            return null;
-          }
-        }
-
-        act(() => {
-          ReactNoop.render(<Conditional showChildren={true} />);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'DerivedStateOnlyErrorBoundary render success',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        act(() => {
-          ReactNoop.render(<Conditional showChildren={false} />);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'BrokenUseEffectCleanup useEffect destroy',
-        ]);
-      });
-
-      // @gate new
-      it('should use the nearest still-mounted boundary if there are no unmounted boundaries', () => {
-        act(() => {
-          ReactNoop.render(
-            <LogOnlyErrorBoundary>
-              <BrokenUseEffectCleanup />
-            </LogOnlyErrorBoundary>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'LogOnlyErrorBoundary render',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        act(() => {
-          ReactNoop.render(<LogOnlyErrorBoundary />);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'LogOnlyErrorBoundary render',
-          'BrokenUseEffectCleanup useEffect destroy',
-          'LogOnlyErrorBoundary componentDidCatch',
-        ]);
-      });
-
-      // @gate new
-      it('should skip unmounted boundaries and use the nearest still-mounted boundary', () => {
-        function Conditional({showChildren}) {
-          if (showChildren) {
-            return (
-              <ErrorBoundary>
-                <BrokenUseEffectCleanup />
-              </ErrorBoundary>
-            );
-          } else {
-            return null;
-          }
-        }
-
-        act(() => {
-          ReactNoop.render(
-            <LogOnlyErrorBoundary>
-              <Conditional showChildren={true} />
-            </LogOnlyErrorBoundary>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'LogOnlyErrorBoundary render',
-          'ErrorBoundary render success',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        act(() => {
-          ReactNoop.render(
-            <LogOnlyErrorBoundary>
-              <Conditional showChildren={false} />
-            </LogOnlyErrorBoundary>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'LogOnlyErrorBoundary render',
-          'BrokenUseEffectCleanup useEffect destroy',
-          'LogOnlyErrorBoundary componentDidCatch',
-        ]);
-      });
-
-      // @gate new
-      it('should call getDerivedStateFromError in the nearest still-mounted boundary', () => {
-        function Conditional({showChildren}) {
-          if (showChildren) {
-            return <BrokenUseEffectCleanup />;
-          } else {
-            return null;
-          }
-        }
-
-        act(() => {
-          ReactNoop.render(
-            <ErrorBoundary>
-              <Conditional showChildren={true} />
-            </ErrorBoundary>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'ErrorBoundary render success',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        act(() => {
-          ReactNoop.render(
-            <ErrorBoundary>
-              <Conditional showChildren={false} />
-            </ErrorBoundary>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'ErrorBoundary render success',
-          'BrokenUseEffectCleanup useEffect destroy',
-          'ErrorBoundary static getDerivedStateFromError',
-          'ErrorBoundary render error',
-          'ErrorBoundary componentDidCatch',
-        ]);
-
-        expect(ReactNoop.getChildren()).toEqual([
-          span('ErrorBoundary fallback'),
-        ]);
-      });
-
-      // @gate new
-      it('should rethrow error if there are no still-mounted boundaries', () => {
-        function Conditional({showChildren}) {
-          if (showChildren) {
-            return (
-              <ErrorBoundary>
-                <BrokenUseEffectCleanup />
-              </ErrorBoundary>
-            );
-          } else {
-            return null;
-          }
-        }
-
-        act(() => {
-          ReactNoop.render(<Conditional showChildren={true} />);
-        });
-
-        expect(Scheduler).toHaveYielded([
-          'ErrorBoundary render success',
-          'BrokenUseEffectCleanup useEffect',
-        ]);
-
-        expect(() => {
-          act(() => {
-            ReactNoop.render(<Conditional showChildren={false} />);
-          });
-        }).toThrow('Expected error');
-
-        expect(Scheduler).toHaveYielded([
-          'BrokenUseEffectCleanup useEffect destroy',
-        ]);
-
-        expect(ReactNoop.getChildren()).toEqual([]);
-      });
-    });
-
     it('calls passive effect destroy functions for memoized components', () => {
       const Wrapper = ({children}) => children;
       function Child() {
@@ -2971,85 +2589,6 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Mount normal [current: 1]',
       ]);
     });
-
-    // @gate skipUnmountedBoundaries
-    it('catches errors thrown in useLayoutEffect', () => {
-      class ErrorBoundary extends React.Component {
-        state = {error: null};
-        static getDerivedStateFromError(error) {
-          Scheduler.unstable_yieldValue(
-            `ErrorBoundary static getDerivedStateFromError`,
-          );
-          return {error};
-        }
-        render() {
-          const {children, id, fallbackID} = this.props;
-          const {error} = this.state;
-          if (error) {
-            Scheduler.unstable_yieldValue(`${id} render error`);
-            return <Component id={fallbackID} />;
-          }
-          Scheduler.unstable_yieldValue(`${id} render success`);
-          return children || null;
-        }
-      }
-
-      function Component({id}) {
-        Scheduler.unstable_yieldValue('Component render ' + id);
-        return <span prop={id} />;
-      }
-
-      function BrokenLayoutEffectDestroy() {
-        useLayoutEffect(() => {
-          return () => {
-            Scheduler.unstable_yieldValue(
-              'BrokenLayoutEffectDestroy useLayoutEffect destroy',
-            );
-            throw Error('Expected');
-          };
-        }, []);
-
-        Scheduler.unstable_yieldValue('BrokenLayoutEffectDestroy render');
-        return <span prop="broken" />;
-      }
-
-      ReactNoop.render(
-        <ErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
-          <Component id="sibling" />
-          <ErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
-            <BrokenLayoutEffectDestroy />
-          </ErrorBoundary>
-        </ErrorBoundary>,
-      );
-
-      expect(Scheduler).toFlushAndYield([
-        'OuterBoundary render success',
-        'Component render sibling',
-        'InnerBoundary render success',
-        'BrokenLayoutEffectDestroy render',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('sibling'),
-        span('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.
-      expect(Scheduler).toFlushAndYield([
-        'OuterBoundary render success',
-        'Component render sibling',
-        'BrokenLayoutEffectDestroy useLayoutEffect destroy',
-        'ErrorBoundary static getDerivedStateFromError',
-        'OuterBoundary render error',
-        'Component render OuterFallback',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('OuterFallback')]);
-    });
   });
 
   describe('useCallback', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 06668b4eb389..503dc98f0de4 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -961,7 +961,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
   });
 
-  // @gate skipUnmountedBoundaries
   it('should not attempt to recover an unmounting error boundary', () => {
     class Parent extends React.Component {
       componentWillUnmount() {
@@ -993,17 +992,12 @@ describe('ReactIncrementalErrorHandling', () => {
 
     ReactNoop.render(<Parent />);
     expect(Scheduler).toFlushWithoutYielding();
-
-    // Because the error boundary is also unmounting,
-    // an error in ThrowsOnUnmount should be rethrown.
-    expect(() => {
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushAndYield([
-        'Parent componentWillUnmount',
-        'ThrowsOnUnmount componentWillUnmount',
-      ]);
-    }).toThrow('unmount error');
-
+    ReactNoop.render(null);
+    expect(Scheduler).toFlushAndYield([
+      // Parent unmounts before the error is thrown.
+      'Parent componentWillUnmount',
+      'ThrowsOnUnmount componentWillUnmount',
+    ]);
     ReactNoop.render(<Parent />);
   });
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 2bb5e7a5dc3f..e1b3f657f3f9 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -91,12 +91,6 @@ export const enableComponentStackLocations = true;
 
 export const enableNewReconciler = false;
 
-// Errors that are thrown while unmounting (or after in the case of passive effects)
-// should bypass any error boundaries that are also unmounting (or have unmounted)
-// and be handled by the nearest still-mounted boundary.
-// If there are no still-mounted boundaries, the errors should be rethrown.
-export const skipUnmountedBoundaries = false;
-
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 40bee41d566a..53eb440cffd1 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -42,7 +42,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
-export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 0665b4b5d71b..b0bad62bae54 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,7 +41,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
-export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 2102c905be9f..2b5f7985cb19 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,7 +41,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
-export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f2dc6d7f0ad0..ef0d466da4a2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -41,7 +41,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
-export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7c6588150ef9..45bd15b5c72b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,7 +41,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
-export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 36cf66d18e4b..881c6f156b53 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,7 +41,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
-export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index fd6eba5a5208..af360493b19d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,7 +41,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
-export const skipUnmountedBoundaries = __EXPERIMENTAL__;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index d03ba3eadd41..fee39cd71aa4 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -18,7 +18,6 @@ export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const decoupleUpdatePriorityFromScheduler = __VARIANT__;
-export const skipUnmountedBoundaries = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c12be6366806..4ab58388642c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -26,7 +26,6 @@ export const {
   deferRenderPhaseUpdateToNextBatch,
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
-  skipUnmountedBoundaries,
   enableDoubleInvokingEffects,
   enableUseRefAccessWarning,
 } = dynamicFeatureFlags;

From 13a62feab8c39bc0292eb36d636af0bb4f3a78df Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 9 Nov 2020 11:22:59 -0500
Subject: [PATCH 0060/1603] Fix path for SchedulerFeatureFlags (#20200)

---
 packages/scheduler/src/forks/SchedulerFeatureFlags.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index ae94a0fa8c34..9fd86c7f94b2 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -10,6 +10,6 @@ export const {
   enableIsInputPending,
   enableSchedulerDebugging,
   enableProfiling: enableProfilingFeatureFlag,
-} = require('packages/scheduler/src/SchedulerFeatureFlags');
+} = require('SchedulerFeatureFlags');
 
 export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;

From 93c3dc54b66166fd5df7d081a9b2c2ca76a2af00 Mon Sep 17 00:00:00 2001
From: Sean Keenan <sean9keenan@gmail.com>
Date: Tue, 10 Nov 2020 05:47:39 -0800
Subject: [PATCH 0061/1603] react-devtools-inline: Remove css-sourcemap's when
 bundling for dist (#20170)

---
 packages/react-devtools-inline/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index af829455c6bd..98920b3508c1 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -76,7 +76,7 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
-              sourceMap: true,
+              sourceMap: __DEV__,
               modules: true,
               localIdentName: '[local]___[hash:base64:5]',
             },

From 393c452e39a72932af734c7c25998b48a20698f7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 10 Nov 2020 09:40:30 -0500
Subject: [PATCH 0062/1603] Add "nested-update" phase to Profiler API (#20163)

Background:
State updates that are scheduled in a layout effect (useLayoutEffect or componentDidMount / componentDidUpdate) get processed synchronously by React before it yields to the browser to paint. This is done so that components can adjust their layout (e.g. position and size a tooltip) without any visible shifting being seen by users. This type of update is often called a "nested update" or a "cascading update".

Because they delay paint, nested updates are considered expensive and should be avoided when possible. For example, effects that do not impact layout (e.g. adding event handlers, logging impressions) can be safely deferred to the passive effect phase by using useEffect instead.

This PR updates the Profiler API to explicitly flag nested updates so they can be monitored for and avoided when possible.

Implementation:
I considered a few approaches for this.

Add a new callback (e.g. onNestedUpdateScheduled) to the Profiler that gets called when a nested updates gets scheduled.
Add an additional boolean parameter to the end of existing callbacks (e.g. wasNestedUpdate).
Update the phase param to add an additional variant: "mount", "update", or "nested-update" (new).
I think the third option makes for the best API so that's what I've implemented in this PR.

Because the Profiler API is stable, this change will need to remain behind a feature flag until v18. I've turned the feature flag on for Facebook builds though after confirming that Web Speed does not currently make use of the phase parameter.

Quirks:
One quirk about the implementation I've chosen is that errors thrown during the layout phase are also reported as nested updates. I believe this is appropriate since these errors get processed synchronously and block paint. Errors thrown during render or from within passive effects are not affected by this change.
---
 .../src/ReactFiberCommitWork.new.js           | 33 +++++++++-----
 .../src/ReactFiberCommitWork.old.js           | 33 +++++++++-----
 .../src/ReactFiberWorkLoop.new.js             | 11 +++++
 .../src/ReactFiberWorkLoop.old.js             | 11 +++++
 .../src/ReactProfilerTimer.new.js             | 45 ++++++++++++++++++-
 .../src/ReactProfilerTimer.old.js             | 45 ++++++++++++++++++-
 .../__tests__/ReactProfiler-test.internal.js  | 14 +++---
 packages/shared/ReactFeatureFlags.js          |  3 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 16 files changed, 173 insertions(+), 30 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 0f16c4c0a3fb..6f0b923c1444 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -31,6 +31,7 @@ import {
   enableSchedulerTracing,
   enableProfilerTimer,
   enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
   enableSuspenseServerRenderer,
   enableFundamentalAPI,
   enableSuspenseCallback,
@@ -94,6 +95,7 @@ import {
 import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
+  isCurrentUpdateNested,
   getCommitTime,
   recordLayoutEffectDuration,
   startLayoutEffectTimer,
@@ -357,22 +359,24 @@ function commitProfilerPassiveEffect(
         // It does not get reset until the start of the next commit phase.
         const commitTime = getCommitTime();
 
+        let phase = finishedWork.alternate === null ? 'mount' : 'update';
+        if (enableProfilerNestedUpdatePhase) {
+          if (isCurrentUpdateNested()) {
+            phase = 'nested-update';
+          }
+        }
+
         if (typeof onPostCommit === 'function') {
           if (enableSchedulerTracing) {
             onPostCommit(
               id,
-              finishedWork.alternate === null ? 'mount' : 'update',
+              phase,
               passiveEffectDuration,
               commitTime,
               finishedRoot.memoizedInteractions,
             );
           } else {
-            onPostCommit(
-              id,
-              finishedWork.alternate === null ? 'mount' : 'update',
-              passiveEffectDuration,
-              commitTime,
-            );
+            onPostCommit(id, phase, passiveEffectDuration, commitTime);
           }
         }
         break;
@@ -1333,11 +1337,18 @@ function commitLayoutEffectsForProfiler(
     const OnRenderFlag = Update;
     const OnCommitFlag = Callback;
 
+    let phase = current === null ? 'mount' : 'update';
+    if (enableProfilerNestedUpdatePhase) {
+      if (isCurrentUpdateNested()) {
+        phase = 'nested-update';
+      }
+    }
+
     if ((flags & OnRenderFlag) !== NoFlags && typeof onRender === 'function') {
       if (enableSchedulerTracing) {
         onRender(
           finishedWork.memoizedProps.id,
-          current === null ? 'mount' : 'update',
+          phase,
           finishedWork.actualDuration,
           finishedWork.treeBaseDuration,
           finishedWork.actualStartTime,
@@ -1347,7 +1358,7 @@ function commitLayoutEffectsForProfiler(
       } else {
         onRender(
           finishedWork.memoizedProps.id,
-          current === null ? 'mount' : 'update',
+          phase,
           finishedWork.actualDuration,
           finishedWork.treeBaseDuration,
           finishedWork.actualStartTime,
@@ -1364,7 +1375,7 @@ function commitLayoutEffectsForProfiler(
         if (enableSchedulerTracing) {
           onCommit(
             finishedWork.memoizedProps.id,
-            current === null ? 'mount' : 'update',
+            phase,
             effectDuration,
             commitTime,
             finishedRoot.memoizedInteractions,
@@ -1372,7 +1383,7 @@ function commitLayoutEffectsForProfiler(
         } else {
           onCommit(
             finishedWork.memoizedProps.id,
-            current === null ? 'mount' : 'update',
+            phase,
             effectDuration,
             commitTime,
           );
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 1ec6ed787481..55db13cf3988 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -30,6 +30,7 @@ import {
   enableSchedulerTracing,
   enableProfilerTimer,
   enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
   enableSuspenseServerRenderer,
   enableFundamentalAPI,
   enableSuspenseCallback,
@@ -73,6 +74,7 @@ import invariant from 'shared/invariant';
 import {onCommitUnmount} from './ReactFiberDevToolsHook.old';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
+  isCurrentUpdateNested,
   getCommitTime,
   recordLayoutEffectDuration,
   startLayoutEffectTimer,
@@ -434,22 +436,24 @@ export function commitPassiveEffectDurations(
           // It does not get reset until the start of the next commit phase.
           const commitTime = getCommitTime();
 
+          let phase = finishedWork.alternate === null ? 'mount' : 'update';
+          if (enableProfilerNestedUpdatePhase) {
+            if (isCurrentUpdateNested()) {
+              phase = 'nested-update';
+            }
+          }
+
           if (typeof onPostCommit === 'function') {
             if (enableSchedulerTracing) {
               onPostCommit(
                 id,
-                finishedWork.alternate === null ? 'mount' : 'update',
+                phase,
                 passiveEffectDuration,
                 commitTime,
                 finishedRoot.memoizedInteractions,
               );
             } else {
-              onPostCommit(
-                id,
-                finishedWork.alternate === null ? 'mount' : 'update',
-                passiveEffectDuration,
-                commitTime,
-              );
+              onPostCommit(id, phase, passiveEffectDuration, commitTime);
             }
           }
 
@@ -706,11 +710,18 @@ function commitLifeCycles(
 
         const commitTime = getCommitTime();
 
+        let phase = current === null ? 'mount' : 'update';
+        if (enableProfilerNestedUpdatePhase) {
+          if (isCurrentUpdateNested()) {
+            phase = 'nested-update';
+          }
+        }
+
         if (typeof onRender === 'function') {
           if (enableSchedulerTracing) {
             onRender(
               finishedWork.memoizedProps.id,
-              current === null ? 'mount' : 'update',
+              phase,
               finishedWork.actualDuration,
               finishedWork.treeBaseDuration,
               finishedWork.actualStartTime,
@@ -720,7 +731,7 @@ function commitLifeCycles(
           } else {
             onRender(
               finishedWork.memoizedProps.id,
-              current === null ? 'mount' : 'update',
+              phase,
               finishedWork.actualDuration,
               finishedWork.treeBaseDuration,
               finishedWork.actualStartTime,
@@ -734,7 +745,7 @@ function commitLifeCycles(
             if (enableSchedulerTracing) {
               onCommit(
                 finishedWork.memoizedProps.id,
-                current === null ? 'mount' : 'update',
+                phase,
                 effectDuration,
                 commitTime,
                 finishedRoot.memoizedInteractions,
@@ -742,7 +753,7 @@ function commitLifeCycles(
             } else {
               onCommit(
                 finishedWork.memoizedProps.id,
-                current === null ? 'mount' : 'update',
+                phase,
                 effectDuration,
                 commitTime,
               );
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 9988e7b3b1ad..9153c03049b9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -21,6 +21,7 @@ import {
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableProfilerTimer,
+  enableProfilerNestedUpdatePhase,
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
@@ -194,9 +195,11 @@ import {
 } from './ReactFiberStack.new';
 
 import {
+  markNestedUpdateScheduled,
   recordCommitTime,
   startProfilerTimer,
   stopProfilerTimerIfRunningAndRecordDelta,
+  syncNestedUpdateFlag,
 } from './ReactProfilerTimer.new';
 
 // DEV stuff
@@ -938,6 +941,10 @@ function markRootSuspended(root, suspendedLanes) {
 // This is the entry point for synchronous tasks that don't go
 // through Scheduler
 function performSyncWorkOnRoot(root) {
+  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
+    syncNestedUpdateFlag();
+  }
+
   invariant(
     (executionContext & (RenderContext | CommitContext)) === NoContext,
     'Should not already be working.',
@@ -1995,6 +2002,10 @@ function commitRootImpl(root, renderPriorityLevel) {
   }
 
   if (remainingLanes === SyncLane) {
+    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) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 47eb654b6ac7..b2476dad5b61 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -22,6 +22,7 @@ import {
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableProfilerTimer,
   enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
@@ -207,11 +208,13 @@ import {
 } from './ReactFiberStack.old';
 
 import {
+  markNestedUpdateScheduled,
   recordCommitTime,
   recordPassiveEffectDuration,
   startPassiveEffectTimer,
   startProfilerTimer,
   stopProfilerTimerIfRunningAndRecordDelta,
+  syncNestedUpdateFlag,
 } from './ReactProfilerTimer.old';
 
 // DEV stuff
@@ -962,6 +965,10 @@ function markRootSuspended(root, suspendedLanes) {
 // This is the entry point for synchronous tasks that don't go
 // through Scheduler
 function performSyncWorkOnRoot(root) {
+  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
+    syncNestedUpdateFlag();
+  }
+
   invariant(
     (executionContext & (RenderContext | CommitContext)) === NoContext,
     'Should not already be working.',
@@ -2189,6 +2196,10 @@ function commitRootImpl(root, renderPriorityLevel) {
   }
 
   if (remainingLanes === SyncLane) {
+    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) {
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.new.js b/packages/react-reconciler/src/ReactProfilerTimer.new.js
index e7f58e1b1bc2..95395b6898de 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.new.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.new.js
@@ -10,8 +10,9 @@
 import type {Fiber} from './ReactInternalTypes';
 
 import {
-  enableProfilerTimer,
   enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
+  enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
 import {Profiler} from './ReactWorkTags';
 
@@ -23,10 +24,13 @@ const {unstable_now: now} = Scheduler;
 
 export type ProfilerTimer = {
   getCommitTime(): number,
+  isCurrentUpdateNested(): boolean,
+  markNestedUpdateScheduled(): void,
   recordCommitTime(): void,
   startProfilerTimer(fiber: Fiber): void,
   stopProfilerTimerIfRunning(fiber: Fiber): void,
   stopProfilerTimerIfRunningAndRecordDelta(fiber: Fiber): void,
+  syncNestedUpdateFlag(): void,
   ...
 };
 
@@ -35,6 +39,42 @@ let layoutEffectStartTime: number = -1;
 let profilerStartTime: number = -1;
 let passiveEffectStartTime: number = -1;
 
+/**
+ * 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;
+
+function isCurrentUpdateNested(): boolean {
+  return currentUpdateIsNested;
+}
+
+function markNestedUpdateScheduled(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    nestedUpdateScheduled = true;
+  }
+}
+
+function syncNestedUpdateFlag(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    currentUpdateIsNested = nestedUpdateScheduled;
+    nestedUpdateScheduled = false;
+  }
+}
+
 function getCommitTime(): number {
   return commitTime;
 }
@@ -161,6 +201,8 @@ function transferActualDuration(fiber: Fiber): void {
 
 export {
   getCommitTime,
+  isCurrentUpdateNested,
+  markNestedUpdateScheduled,
   recordCommitTime,
   recordLayoutEffectDuration,
   recordPassiveEffectDuration,
@@ -169,5 +211,6 @@ export {
   startProfilerTimer,
   stopProfilerTimerIfRunning,
   stopProfilerTimerIfRunningAndRecordDelta,
+  syncNestedUpdateFlag,
   transferActualDuration,
 };
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.old.js b/packages/react-reconciler/src/ReactProfilerTimer.old.js
index e7f58e1b1bc2..95395b6898de 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.old.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.old.js
@@ -10,8 +10,9 @@
 import type {Fiber} from './ReactInternalTypes';
 
 import {
-  enableProfilerTimer,
   enableProfilerCommitHooks,
+  enableProfilerNestedUpdatePhase,
+  enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
 import {Profiler} from './ReactWorkTags';
 
@@ -23,10 +24,13 @@ const {unstable_now: now} = Scheduler;
 
 export type ProfilerTimer = {
   getCommitTime(): number,
+  isCurrentUpdateNested(): boolean,
+  markNestedUpdateScheduled(): void,
   recordCommitTime(): void,
   startProfilerTimer(fiber: Fiber): void,
   stopProfilerTimerIfRunning(fiber: Fiber): void,
   stopProfilerTimerIfRunningAndRecordDelta(fiber: Fiber): void,
+  syncNestedUpdateFlag(): void,
   ...
 };
 
@@ -35,6 +39,42 @@ let layoutEffectStartTime: number = -1;
 let profilerStartTime: number = -1;
 let passiveEffectStartTime: number = -1;
 
+/**
+ * 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;
+
+function isCurrentUpdateNested(): boolean {
+  return currentUpdateIsNested;
+}
+
+function markNestedUpdateScheduled(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    nestedUpdateScheduled = true;
+  }
+}
+
+function syncNestedUpdateFlag(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    currentUpdateIsNested = nestedUpdateScheduled;
+    nestedUpdateScheduled = false;
+  }
+}
+
 function getCommitTime(): number {
   return commitTime;
 }
@@ -161,6 +201,8 @@ function transferActualDuration(fiber: Fiber): void {
 
 export {
   getCommitTime,
+  isCurrentUpdateNested,
+  markNestedUpdateScheduled,
   recordCommitTime,
   recordLayoutEffectDuration,
   recordPassiveEffectDuration,
@@ -169,5 +211,6 @@ export {
   startProfilerTimer,
   stopProfilerTimerIfRunning,
   stopProfilerTimerIfRunningAndRecordDelta,
+  syncNestedUpdateFlag,
   transferActualDuration,
 };
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 73812de49a3b..d9c70ae73b75 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -28,6 +28,7 @@ let resourcePromise;
 function loadModules({
   enableProfilerTimer = true,
   enableProfilerCommitHooks = true,
+  enableProfilerNestedUpdatePhase = true,
   enableSchedulerTracing = true,
   replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
   useNoopRenderer = false,
@@ -36,6 +37,7 @@ function loadModules({
 
   ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
   ReactFeatureFlags.enableProfilerCommitHooks = enableProfilerCommitHooks;
+  ReactFeatureFlags.enableProfilerNestedUpdatePhase = enableProfilerNestedUpdatePhase;
   ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
   ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = replayFailedUnitOfWorkWithInvokeGuardedCallback;
 
@@ -1098,7 +1100,7 @@ describe('Profiler', () => {
                 );
 
                 // The update includes the ErrorBoundary and its fallback child
-                expect(updateCall[1]).toBe('update');
+                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)
@@ -1456,7 +1458,7 @@ describe('Profiler', () => {
 
         expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
         expect(call[0]).toBe('mount-test');
-        expect(call[1]).toBe('update');
+        expect(call[1]).toBe('nested-update');
         expect(call[2]).toBe(130); // durations
         expect(call[3]).toBe(1200001011); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
@@ -1485,7 +1487,7 @@ describe('Profiler', () => {
 
         expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
         expect(call[0]).toBe('update-test');
-        expect(call[1]).toBe('update');
+        expect(call[1]).toBe('nested-update');
         expect(call[2]).toBe(10000); // durations
         expect(call[3]).toBe(3300011272); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
@@ -1716,7 +1718,7 @@ describe('Profiler', () => {
         // Cleanup render from error boundary
         expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
         expect(call[0]).toBe('root');
-        expect(call[1]).toBe('update');
+        expect(call[1]).toBe('nested-update');
         expect(call[2]).toBe(100000000); // durations
         expect(call[3]).toBe(10110111); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
@@ -1847,7 +1849,7 @@ describe('Profiler', () => {
         // Cleanup render from error boundary
         expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
         expect(call[0]).toBe('root');
-        expect(call[1]).toBe('update');
+        expect(call[1]).toBe('nested-update');
         expect(call[2]).toBe(100001000); // durations
         expect(call[3]).toBe(11221221); // commit start time (before mutations or effects)
         expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
@@ -1905,7 +1907,7 @@ describe('Profiler', () => {
 
           expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
           expect(call[0]).toBe('root');
-          expect(call[1]).toBe('update');
+          expect(call[1]).toBe('nested-update');
           expect(call[4]).toMatchInteractions([interaction]);
         });
       }
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index e1b3f657f3f9..b796e5b1ffac 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -36,6 +36,9 @@ export const enableProfilerTimer = __PROFILE__;
 // Record durations for commit and passive effects phases.
 export const enableProfilerCommitHooks = false;
 
+// Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
+export const enableProfilerNestedUpdatePhase = false;
+
 // Trace which interactions trigger each commit.
 export const enableSchedulerTracing = __PROFILE__;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 53eb440cffd1..5a5bc9ea85f8 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -15,6 +15,7 @@ export const enableDebugTracing = false;
 export const enableSchedulingProfiler = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
+export const enableProfilerNestedUpdatePhase = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index b0bad62bae54..82c57055f1c0 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -17,6 +17,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
+export const enableProfilerNestedUpdatePhase = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 2b5f7985cb19..6a572127e5ea 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -17,6 +17,7 @@ export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
+export const enableProfilerNestedUpdatePhase = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index ef0d466da4a2..2fae5f7e2bda 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -17,6 +17,7 @@ export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
+export const enableProfilerNestedUpdatePhase = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 45bd15b5c72b..d254b9274ad3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -17,6 +17,7 @@ export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
+export const enableProfilerNestedUpdatePhase = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 881c6f156b53..7b470ba5bf67 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -17,6 +17,7 @@ export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
+export const enableProfilerNestedUpdatePhase = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index af360493b19d..a0bc67a833bd 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -17,6 +17,7 @@ export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = false;
 export const enableProfilerCommitHooks = false;
+export const enableProfilerNestedUpdatePhase = false;
 export const enableSchedulerTracing = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 4ab58388642c..2e8d9d39cfa4 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -35,6 +35,7 @@ export const {
 
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler = __PROFILE__;

From 08986601546f69ba2c3107b472862cf2cb30d2ce Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 10 Nov 2020 12:11:46 -0500
Subject: [PATCH 0063/1603] Add version of scheduler that only swaps
 MessageChannel for postTask (#20206)

* Fork SchedulerDOM to SchedulerPostTaskOnly

* Swap in postTask for MessageChannel

* Add SchedulerPostTaskOnly-test.js

* Update getCurrentTime

* Gate tests to source

* Prettier
---
 .../__tests__/SchedulerPostTaskOnly-test.js   | 275 ++++++++
 .../src/forks/SchedulerPostTaskOnly.js        | 592 ++++++++++++++++++
 packages/scheduler/unstable_post_task_only.js |  10 +
 scripts/rollup/bundles.js                     |  15 +
 4 files changed, 892 insertions(+)
 create mode 100644 packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js
 create mode 100644 packages/scheduler/src/forks/SchedulerPostTaskOnly.js
 create mode 100644 packages/scheduler/unstable_post_task_only.js

diff --git a/packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js b/packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js
new file mode 100644
index 000000000000..bc25f3dbb148
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js
@@ -0,0 +1,275 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+'use strict';
+
+let Scheduler;
+let runtime;
+let performance;
+let cancelCallback;
+let scheduleCallback;
+let NormalPriority;
+
+describe('SchedulerPostTaskOnly', () => {
+  beforeEach(() => {
+    if (!process.env.IS_BUILD) {
+      jest.resetModules();
+
+      // Un-mock scheduler
+      jest.mock('scheduler', () =>
+        require.requireActual('scheduler/unstable_post_task_only'),
+      );
+
+      runtime = installMockBrowserRuntime();
+      performance = window.performance;
+      Scheduler = require('scheduler');
+      cancelCallback = Scheduler.unstable_cancelCallback;
+      scheduleCallback = Scheduler.unstable_scheduleCallback;
+      NormalPriority = Scheduler.unstable_NormalPriority;
+    }
+  });
+
+  afterEach(() => {
+    if (!process.env.IS_BUILD) {
+      if (!runtime.isLogEmpty()) {
+        throw Error('Test exited without clearing log.');
+      }
+    }
+  });
+
+  function installMockBrowserRuntime() {
+    let hasPendingTask = false;
+    let timerIDCounter = 0;
+    let eventLog = [];
+
+    // Mock window functions
+    const window = {};
+    global.window = window;
+
+    // TODO: Scheduler no longer requires these methods to be polyfilled. But
+    // maybe we want to continue warning if they don't exist, to preserve the
+    // option to rely on it in the future?
+    window.requestAnimationFrame = window.cancelAnimationFrame = () => {};
+
+    let currentTime = 0;
+    window.performance = {
+      now() {
+        return currentTime;
+      },
+    };
+
+    window.setTimeout = (cb, delay) => {
+      const id = timerIDCounter++;
+      log(`Set Timer`);
+      // TODO
+      return id;
+    };
+    window.clearTimeout = id => {
+      // TODO
+    };
+
+    // Mock browser scheduler.
+    const scheduler = {};
+    global.scheduler = scheduler;
+
+    let nextTask;
+    scheduler.postTask = function(callback) {
+      if (hasPendingTask) {
+        throw Error('Task already scheduled');
+      }
+      log('Post Task');
+      hasPendingTask = true;
+      nextTask = callback;
+    };
+
+    function ensureLogIsEmpty() {
+      if (eventLog.length !== 0) {
+        throw Error('Log is not empty. Call assertLog before continuing.');
+      }
+    }
+
+    function advanceTime(ms) {
+      currentTime += ms;
+    }
+
+    function fireNextTask() {
+      ensureLogIsEmpty();
+      if (!hasPendingTask) {
+        throw Error('No task was scheduled');
+      }
+      hasPendingTask = false;
+
+      log('Task Event');
+
+      // 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 task = nextTask;
+      nextTask = null;
+      task();
+    }
+
+    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,
+      fireNextTask,
+      log,
+      isLogEmpty,
+      assertLog,
+    };
+  }
+
+  // @gate source
+  it('task that finishes before deadline', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Post Task']);
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'Task']);
+  });
+
+  // @gate source
+  it('task with continuation', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+      while (!Scheduler.unstable_shouldYield()) {
+        runtime.advanceTime(1);
+      }
+      runtime.log(`Yield at ${performance.now()}ms`);
+      return () => {
+        runtime.log('Continuation');
+      };
+    });
+    runtime.assertLog(['Post Task']);
+
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'Task', 'Yield at 5ms', 'Post Task']);
+
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'Continuation']);
+  });
+
+  // @gate source
+  it('multiple tasks', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Task']);
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'A', 'B']);
+  });
+
+  // @gate source
+  it('multiple tasks with a yield in between', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+      runtime.advanceTime(4999);
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Task']);
+    runtime.fireNextTask();
+    runtime.assertLog([
+      'Task Event',
+      'A',
+      // Ran out of time. Post a continuation event.
+      'Post Task',
+    ]);
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'B']);
+  });
+
+  // @gate source
+  it('cancels tasks', () => {
+    const task = scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Post Task']);
+    cancelCallback(task);
+    runtime.assertLog([]);
+  });
+
+  // @gate source
+  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 Task']);
+
+    expect(() => runtime.fireNextTask()).toThrow('Oops!');
+    runtime.assertLog(['Task Event', 'Oops!', 'Post Task']);
+
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'Yay']);
+  });
+
+  // @gate source
+  it('schedule new task after queue has emptied', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Post Task']);
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'A']);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Task']);
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'B']);
+  });
+
+  // @gate source
+  it('schedule new task after a cancellation', () => {
+    const handle = scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+
+    runtime.assertLog(['Post Task']);
+    cancelCallback(handle);
+
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event']);
+
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Post Task']);
+    runtime.fireNextTask();
+    runtime.assertLog(['Task Event', 'B']);
+  });
+});
diff --git a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
new file mode 100644
index 000000000000..ba081d3236e5
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
@@ -0,0 +1,592 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+/* eslint-disable no-var */
+
+import {
+  enableSchedulerDebugging,
+  enableProfiling,
+} from '../SchedulerFeatureFlags';
+
+import {push, pop, peek} from '../SchedulerMinHeap';
+
+// TODO: Use symbols?
+import {
+  ImmediatePriority,
+  UserBlockingPriority,
+  NormalPriority,
+  LowPriority,
+  IdlePriority,
+} from '../SchedulerPriorities';
+import {
+  sharedProfilingBuffer,
+  markTaskRun,
+  markTaskYield,
+  markTaskCompleted,
+  markTaskCanceled,
+  markTaskErrored,
+  markSchedulerSuspended,
+  markSchedulerUnsuspended,
+  markTaskStart,
+  stopLoggingProfilingEvents,
+  startLoggingProfilingEvents,
+} from '../SchedulerProfiling';
+
+import {enableIsInputPending} from '../SchedulerFeatureFlags';
+
+const perf = window.performance;
+
+function getCurrentTime() {
+  return perf.now();
+}
+
+// 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 = [];
+var timerQueue = [];
+
+// Incrementing id counter. Used to maintain insertion order.
+var taskIdCounter = 1;
+
+// Pausing the scheduler is useful for debugging.
+var isSchedulerPaused = false;
+
+var currentTask = null;
+var currentPriorityLevel = NormalPriority;
+
+// This is set while performing work, to prevent re-entrancy.
+var isPerformingWork = false;
+
+var isHostCallbackScheduled = false;
+var isHostTimeoutScheduled = false;
+
+// Capture local references to native APIs, in case a polyfill overrides them.
+const setTimeout = window.setTimeout;
+const clearTimeout = window.clearTimeout;
+
+if (typeof console !== 'undefined') {
+  // TODO: Scheduler no longer requires these methods to be polyfilled. But
+  // maybe we want to continue warning if they don't exist, to preserve the
+  // option to rely on it in the future?
+  const requestAnimationFrame = window.requestAnimationFrame;
+  const cancelAnimationFrame = window.cancelAnimationFrame;
+
+  if (typeof requestAnimationFrame !== 'function') {
+    // Using console['error'] to evade Babel and ESLint
+    console['error'](
+      "This browser doesn't support requestAnimationFrame. " +
+        'Make sure that you load a ' +
+        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
+    );
+  }
+  if (typeof cancelAnimationFrame !== 'function') {
+    // Using console['error'] to evade Babel and ESLint
+    console['error'](
+      "This browser doesn't support cancelAnimationFrame. " +
+        'Make sure that you load a ' +
+        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
+    );
+  }
+}
+
+function advanceTimers(currentTime) {
+  // Check for tasks that are no longer delayed and add them to the queue.
+  let timer = peek(timerQueue);
+  while (timer !== null) {
+    if (timer.callback === null) {
+      // Timer was cancelled.
+      pop(timerQueue);
+    } else if (timer.startTime <= currentTime) {
+      // Timer fired. Transfer to the task queue.
+      pop(timerQueue);
+      timer.sortIndex = timer.expirationTime;
+      push(taskQueue, timer);
+      if (enableProfiling) {
+        markTaskStart(timer, currentTime);
+        timer.isQueued = true;
+      }
+    } else {
+      // Remaining timers are pending.
+      return;
+    }
+    timer = peek(timerQueue);
+  }
+}
+
+function handleTimeout(currentTime) {
+  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, initialTime) {
+  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();
+          markTaskErrored(currentTask, currentTime);
+          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, initialTime) {
+  let currentTime = initialTime;
+  advanceTimers(currentTime);
+  currentTask = peek(taskQueue);
+  while (
+    currentTask !== null &&
+    !(enableSchedulerDebugging && isSchedulerPaused)
+  ) {
+    if (
+      currentTask.expirationTime > currentTime &&
+      (!hasTimeRemaining || shouldYieldToHost())
+    ) {
+      // This currentTask hasn't expired, and we've reached the deadline.
+      break;
+    }
+    const callback = currentTask.callback;
+    if (typeof callback === 'function') {
+      currentTask.callback = null;
+      currentPriorityLevel = currentTask.priorityLevel;
+      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
+      markTaskRun(currentTask, currentTime);
+      const continuationCallback = callback(didUserCallbackTimeout);
+      currentTime = getCurrentTime();
+      if (typeof continuationCallback === 'function') {
+        currentTask.callback = continuationCallback;
+        markTaskYield(currentTask, currentTime);
+      } else {
+        if (enableProfiling) {
+          markTaskCompleted(currentTask, currentTime);
+          currentTask.isQueued = false;
+        }
+        if (currentTask === peek(taskQueue)) {
+          pop(taskQueue);
+        }
+      }
+      advanceTimers(currentTime);
+    } else {
+      pop(taskQueue);
+    }
+    currentTask = peek(taskQueue);
+  }
+  // Return whether there's additional work
+  if (currentTask !== null) {
+    return true;
+  } else {
+    const firstTimer = peek(timerQueue);
+    if (firstTimer !== null) {
+      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
+    }
+    return false;
+  }
+}
+
+function unstable_runWithPriority(priorityLevel, eventHandler) {
+  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(eventHandler) {
+  var 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(callback) {
+  var parentPriorityLevel = currentPriorityLevel;
+  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, callback, options) {
+  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 = {
+    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_pauseExecution() {
+  isSchedulerPaused = true;
+}
+
+function unstable_continueExecution() {
+  isSchedulerPaused = false;
+  if (!isHostCallbackScheduled && !isPerformingWork) {
+    isHostCallbackScheduled = true;
+    requestHostCallback(flushWork);
+  }
+}
+
+function unstable_getFirstCallbackNode() {
+  return peek(taskQueue);
+}
+
+function unstable_cancelCallback(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() {
+  return currentPriorityLevel;
+}
+
+let isTaskLoopRunning = false;
+let scheduledHostCallback = null;
+let taskTimeoutID = -1;
+
+// Scheduler periodically yields in case there is other work on the main
+// thread, like user events. By default, it yields multiple times per frame.
+// It does not attempt to align with frame boundaries, since most tasks don't
+// need to be frame aligned; for those that do, use requestAnimationFrame.
+let yieldInterval = 5;
+let deadline = 0;
+
+// TODO: Make this configurable
+// TODO: Adjust this based on priority?
+const maxYieldInterval = 300;
+let needsPaint = false;
+
+function shouldYieldToHost() {
+  if (
+    enableIsInputPending &&
+    navigator !== undefined &&
+    navigator.scheduling !== undefined &&
+    navigator.scheduling.isInputPending !== undefined
+  ) {
+    const scheduling = navigator.scheduling;
+    const currentTime = getCurrentTime();
+    if (currentTime >= deadline) {
+      // There's no time left. We may want to yield control of the main
+      // thread, so the browser can perform high priority tasks. The main ones
+      // are painting and user input. If there's a pending paint or a pending
+      // input, then we should yield. But if there's neither, then we can
+      // yield less often while remaining responsive. We'll eventually yield
+      // regardless, since there could be a pending paint that wasn't
+      // accompanied by a call to `requestPaint`, or other main thread tasks
+      // like network events.
+      if (needsPaint || scheduling.isInputPending()) {
+        // There is either a pending paint or a pending input.
+        return true;
+      }
+      // There's no pending input. Only yield if we've reached the max
+      // yield interval.
+      return currentTime >= maxYieldInterval;
+    } else {
+      // There's still time left in the frame.
+      return false;
+    }
+  } else {
+    // `isInputPending` is not available. Since we have no way of knowing if
+    // there's pending input, always yield at the end of the frame.
+    return getCurrentTime() >= deadline;
+  }
+}
+
+function requestPaint() {
+  if (
+    enableIsInputPending &&
+    navigator !== undefined &&
+    navigator.scheduling !== undefined &&
+    navigator.scheduling.isInputPending !== undefined
+  ) {
+    needsPaint = true;
+  }
+
+  // Since we yield every frame regardless, `requestPaint` has no effect.
+}
+
+function forceFrameRate(fps) {
+  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) {
+    yieldInterval = Math.floor(1000 / fps);
+  } else {
+    // reset the framerate
+    yieldInterval = 5;
+  }
+}
+
+const performWorkUntilDeadline = () => {
+  if (scheduledHostCallback !== null) {
+    const currentTime = getCurrentTime();
+    // Yield after `yieldInterval` ms, regardless of where we are in the vsync
+    // cycle. This means there's always time remaining at the beginning of
+    // the message event.
+    deadline = currentTime + yieldInterval;
+    const hasTimeRemaining = true;
+    try {
+      const hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
+      if (!hasMoreWork) {
+        isTaskLoopRunning = false;
+        scheduledHostCallback = null;
+      } else {
+        // If there's more work, schedule the next message event at the end
+        // of the preceding one.
+        postTask(performWorkUntilDeadline);
+      }
+    } catch (error) {
+      // If a scheduler task throws, exit the current browser task so the
+      // error can be observed.
+      postTask(performWorkUntilDeadline);
+      throw error;
+    }
+  } else {
+    isTaskLoopRunning = false;
+  }
+  // Yielding to the browser will give it a chance to paint, so we can
+  // reset this.
+  needsPaint = false;
+};
+
+function postTask(callback) {
+  // Use experimental Chrome Scheduler postTask API.
+  global.scheduler.postTask(callback);
+}
+
+function requestHostCallback(callback) {
+  scheduledHostCallback = callback;
+  if (!isTaskLoopRunning) {
+    isTaskLoopRunning = true;
+    postTask(performWorkUntilDeadline);
+  }
+}
+
+function requestHostTimeout(callback, ms) {
+  taskTimeoutID = setTimeout(() => {
+    callback(getCurrentTime());
+  }, ms);
+}
+
+function cancelHostTimeout() {
+  clearTimeout(taskTimeoutID);
+  taskTimeoutID = -1;
+}
+
+const unstable_requestPaint = requestPaint;
+
+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,
+  unstable_requestPaint,
+  unstable_continueExecution,
+  unstable_pauseExecution,
+  unstable_getFirstCallbackNode,
+  getCurrentTime as unstable_now,
+  forceFrameRate as unstable_forceFrameRate,
+};
+
+export const unstable_Profiling = enableProfiling
+  ? {
+      startLoggingProfilingEvents,
+      stopLoggingProfilingEvents,
+      sharedProfilingBuffer,
+    }
+  : null;
diff --git a/packages/scheduler/unstable_post_task_only.js b/packages/scheduler/unstable_post_task_only.js
new file mode 100644
index 000000000000..d6e22c230162
--- /dev/null
+++ b/packages/scheduler/unstable_post_task_only.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+export * from './src/forks/SchedulerPostTaskOnly';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index cd873e7df7ff..51d5c495a23c 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -659,6 +659,21 @@ const bundles = [
     externals: [],
   },
 
+  /******* React Scheduler Post Task Only (experimental) *******/
+  {
+    bundleTypes: [
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+      FB_WWW_PROFILING,
+    ],
+    moduleType: ISOMORPHIC,
+    entry: 'scheduler/unstable_post_task_only',
+    global: 'SchedulerPostTaskOnly',
+    externals: [],
+  },
+
   /******* React Scheduler No DOM (experimental) *******/
   {
     bundleTypes: [

From c896cf9617626be54f4ef599578e6f8a3a874205 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 10 Nov 2020 13:20:04 -0600
Subject: [PATCH 0064/1603] Set return pointer when reusing current tree
 (#20212)

* Do not fix return pointers during commit phase

In the commit phase, we should be able to assume that the `return`
pointers in the just-completed tree are consistent. The render phase
should be responsible for ensuring these are always correct.

I've removed the `return` pointer assignments from the render phase
traversal logic. This isn't all of them, only the ones added recently
during the effects refactor. The other ones have been around longer so
I'll leave those for a later clean up.

This breaks a few SuspenseList tests; I'll fix in the next commit.

* Set return pointer when reusing current tree

We always set the return pointer on freshly cloned, work-in-progress
fibers. However, we were neglecting to set them on trees that are reused
from current.

I fixed this in the same path of the complete phase where we reset the
fiber flags.

This is a code smell because it assumes the commit phase is never
concurrent with the render phase. Our eventual goal is to make fibers a
lock free data structure.

Will address further during refactor to alternate model.
---
 .../src/ReactFiberCommitWork.new.js                | 14 --------------
 .../src/ReactFiberCompleteWork.new.js              | 10 ++++++++++
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6f0b923c1444..55c7c986effc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -463,7 +463,6 @@ function iterativelyCommitBeforeMutationEffects_begin() {
       (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
       child !== null
     ) {
-      child.return = fiber;
       nextEffect = child;
     } else {
       iterativelyCommitBeforeMutationEffects_complete();
@@ -497,7 +496,6 @@ function iterativelyCommitBeforeMutationEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -715,7 +713,6 @@ function iterativelyCommitMutationEffects_begin(
 
     const child = fiber.child;
     if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
-      child.return = fiber;
       nextEffect = child;
     } else {
       iterativelyCommitMutationEffects_complete(root, renderPriorityLevel);
@@ -754,7 +751,6 @@ function iterativelyCommitMutationEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -1176,14 +1172,12 @@ function iterativelyCommitLayoutEffects_begin(
         }
         const sibling = finishedWork.sibling;
         if (sibling !== null) {
-          sibling.return = finishedWork.return;
           nextEffect = sibling;
         } else {
           nextEffect = finishedWork.return;
           iterativelyCommitLayoutEffects_complete(subtreeRoot, finishedRoot);
         }
       } else {
-        firstChild.return = finishedWork;
         nextEffect = firstChild;
       }
     } else {
@@ -1230,7 +1224,6 @@ function iterativelyCommitLayoutEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -1764,14 +1757,12 @@ function iterativelyCommitPassiveMountEffects_begin(
         }
         const sibling = fiber.sibling;
         if (sibling !== null) {
-          sibling.return = fiber.return;
           nextEffect = sibling;
         } else {
           nextEffect = fiber.return;
           iterativelyCommitPassiveMountEffects_complete(subtreeRoot, root);
         }
       } else {
-        firstChild.return = fiber;
         nextEffect = firstChild;
       }
     } else {
@@ -1817,7 +1808,6 @@ function iterativelyCommitPassiveMountEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -1896,7 +1886,6 @@ function iterativelyCommitPassiveUnmountEffects_begin() {
     }
 
     if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
-      child.return = fiber;
       nextEffect = child;
     } else {
       iterativelyCommitPassiveUnmountEffects_complete();
@@ -1915,7 +1904,6 @@ function iterativelyCommitPassiveUnmountEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -1953,7 +1941,6 @@ function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     const fiber = nextEffect;
     const child = fiber.child;
     if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
-      child.return = fiber;
       nextEffect = child;
     } else {
       iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
@@ -1981,7 +1968,6 @@ function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 0a187f9c84b0..1b353a097268 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -738,6 +738,11 @@ function bubbleProperties(completedWork: Fiber) {
         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;
       }
     }
@@ -784,6 +789,11 @@ function bubbleProperties(completedWork: Fiber) {
         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;
       }
     }

From e855f91e858d36758b8a67c8bd910c0971131451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 10 Nov 2020 15:48:51 -0500
Subject: [PATCH 0065/1603] [Flight] Expand the fixture to use
 require.extensions (#20209)

* Expand fixture

Use .server convention. /server/index.js should really change too so it can be compiled but for now we treat it as bootstrapping code outside the compiled code.

Move App.server. It's part of the application code rather than the infra.

Add hybrid component used in both server/client and an extra component shared by multiple entry points.

* Use require.extensions to replace .client imports

The simplest server doesn't need AOT compilation. Instead we can just
configure require.extensions. This is probably not the best idea to use
in prod but is enough to show the set up.
---
 fixtures/flight/server/App.server.js          | 16 ----------------
 .../server/{handler.js => handler.server.js}  |  9 +++++++--
 fixtures/flight/server/index.js               |  9 ++++++++-
 fixtures/flight/src/App.server.js             | 19 +++++++++++++++++++
 fixtures/flight/src/Container.js              |  5 +++++
 fixtures/flight/src/Counter.client.js         |  8 +++++++-
 fixtures/flight/src/ShowMore.client.js        | 11 +++++++++++
 fixtures/flight/src/index.js                  |  3 ++-
 8 files changed, 59 insertions(+), 21 deletions(-)
 delete mode 100644 fixtures/flight/server/App.server.js
 rename fixtures/flight/server/{handler.js => handler.server.js} (62%)
 create mode 100644 fixtures/flight/src/App.server.js
 create mode 100644 fixtures/flight/src/Container.js
 create mode 100644 fixtures/flight/src/ShowMore.client.js

diff --git a/fixtures/flight/server/App.server.js b/fixtures/flight/server/App.server.js
deleted file mode 100644
index 72858c944779..000000000000
--- a/fixtures/flight/server/App.server.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-
-// TODO: A transform should read this from webpack plugin output.
-const CounterClient = {
-  $$typeof: Symbol.for('react.module.reference'),
-  name: './src/Counter.client.js',
-};
-
-export default function App() {
-  return (
-    <div>
-      <h1>Hello, world</h1>
-      <CounterClient />
-    </div>
-  );
-}
diff --git a/fixtures/flight/server/handler.js b/fixtures/flight/server/handler.server.js
similarity index 62%
rename from fixtures/flight/server/handler.js
rename to fixtures/flight/server/handler.server.js
index 9a0c6004150d..f3b899d498d7 100644
--- a/fixtures/flight/server/handler.js
+++ b/fixtures/flight/server/handler.server.js
@@ -2,14 +2,19 @@
 
 import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
 import * as React from 'react';
-import App from './App.server';
+import App from '../src/App.server';
 
 module.exports = function(req, res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
   pipeToNodeWritable(<App />, res, {
     // TODO: Read from a map on the disk.
-    './src/Counter.client.js': {
+    [require.resolve('../src/Counter.client.js')]: {
       id: './src/Counter.client.js',
+      chunks: ['1'],
+      name: 'default',
+    },
+    [require.resolve('../src/ShowMore.client.js')]: {
+      id: './src/ShowMore.client.js',
       chunks: ['2'],
       name: 'default',
     },
diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js
index 016fe9f15dba..06c245b4120a 100644
--- a/fixtures/flight/server/index.js
+++ b/fixtures/flight/server/index.js
@@ -1,5 +1,12 @@
 'use strict';
 
+require.extensions['.client.js'] = function(module, path) {
+  module.exports = {
+    $$typeof: Symbol.for('react.module.reference'),
+    name: path,
+  };
+};
+
 const babelRegister = require('@babel/register');
 
 babelRegister({
@@ -18,7 +25,7 @@ app.get('/', function(req, res) {
       delete require.cache[key];
     }
   }
-  require('./handler')(req, res);
+  require('./handler.server')(req, res);
 });
 
 app.listen(3001, () => {
diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.server.js
new file mode 100644
index 000000000000..bf3b20fa32a7
--- /dev/null
+++ b/fixtures/flight/src/App.server.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import Container from './Container';
+
+import Counter from './Counter.client';
+
+import ShowMore from './ShowMore.client';
+
+export default function App() {
+  return (
+    <Container>
+      <h1>Hello, world</h1>
+      <Counter />
+      <ShowMore>
+        <p>Lorem ipsum</p>
+      </ShowMore>
+    </Container>
+  );
+}
diff --git a/fixtures/flight/src/Container.js b/fixtures/flight/src/Container.js
new file mode 100644
index 000000000000..49875403c8c7
--- /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.client.js b/fixtures/flight/src/Counter.client.js
index 8274f6134b5a..892af50df69a 100644
--- a/fixtures/flight/src/Counter.client.js
+++ b/fixtures/flight/src/Counter.client.js
@@ -1,6 +1,12 @@
 import * as React from 'react';
 
+import Container from './Container';
+
 export default function Counter() {
   const [count, setCount] = React.useState(0);
-  return <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>;
+  return (
+    <Container>
+      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
+    </Container>
+  );
 }
diff --git a/fixtures/flight/src/ShowMore.client.js b/fixtures/flight/src/ShowMore.client.js
new file mode 100644
index 000000000000..d8ff151725e8
--- /dev/null
+++ b/fixtures/flight/src/ShowMore.client.js
@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import Container from './Container';
+
+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/index.js b/fixtures/flight/src/index.js
index 100164f5a461..ce9595dbe548 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -1,4 +1,5 @@
-import React, {Suspense} from 'react';
+import * as React from 'react';
+import {Suspense} from 'react';
 import ReactDOM from 'react-dom';
 import ReactTransportDOMClient from 'react-transport-dom-webpack';
 

From 16e6dadba67a49b4a12271a6c80fab48a4e1a2d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 10 Nov 2020 19:35:27 -0500
Subject: [PATCH 0066/1603] Encode throwing server components as lazy throwing
 references (#20217)

This ensures that if this server component was the child of a client
component that has an error boundary, it doesn't trigger the error until
this gets rendered so it happens as deep as possible.
---
 .../src/__tests__/ReactFlight-test.js         | 64 +++++++++++++++++++
 .../react-server/src/ReactFlightServer.js     |  9 ++-
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 838db8337121..3d4ccf5c459f 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -16,6 +16,7 @@ let ReactNoop;
 let ReactNoopFlightServer;
 let ReactNoopFlightClient;
 let ErrorBoundary;
+let NoErrorExpected;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
@@ -47,6 +48,26 @@ describe('ReactFlight', () => {
         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;
+      }
+    };
   });
 
   function moduleReference(value) {
@@ -164,6 +185,49 @@ describe('ReactFlight', () => {
     });
   });
 
+  it('should trigger the inner most error boundary inside a client component', () => {
+    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 = moduleReference(ClientComponent);
+
+    function Server() {
+      return (
+        <ClientComponentReference>
+          <ServerComponent />
+        </ClientComponentReference>
+      );
+    }
+
+    const data = ReactNoopFlightServer.render(<Server />);
+
+    function Client({transport}) {
+      return ReactNoopFlightClient.read(transport);
+    }
+
+    act(() => {
+      ReactNoop.render(
+        <NoErrorExpected>
+          <Client transport={data} />
+        </NoErrorExpected>,
+      );
+    });
+  });
+
   it('should warn in DEV if a toJSON instance is passed to a host component', () => {
     expect(() => {
       const transport = ReactNoopFlightServer.render(
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 76690a192eca..56842b7b2f40 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -409,8 +409,13 @@ export function resolveModelToJSON(
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
       } else {
-        // Something errored. Don't bother encoding anything up to here.
-        throw x;
+        // Something errored. We'll still send everything we have up until this point.
+        // We'll replace this element with a lazy reference that throws on the client
+        // once it gets rendered.
+        request.pendingChunks++;
+        const errorId = request.nextChunkId++;
+        emitErrorChunk(request, errorId, x);
+        return serializeByRefID(errorId);
       }
     }
   }

From 35e53b4653fdfb9c1712ce4c07037f5f276b4e91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 10 Nov 2020 22:54:42 -0500
Subject: [PATCH 0067/1603] [Flight] Simplify Relay row protocol (#20168)

* Simplify Relay protocol integration

* Encode Relay rows as tuples instead of objects

This is slightly more compact and more ressembles more closely the encoding
we use for the raw stream protocol.
---
 .../src/ReactFlightDOMRelayClient.js          | 19 +++++-
 .../ReactFlightDOMRelayClientHostConfig.js    |  2 +-
 .../src/ReactFlightDOMRelayProtocol.js        | 31 +++++++++
 .../ReactFlightDOMRelayServerHostConfig.js    | 65 ++++---------------
 .../ReactFlightDOMRelayServerIntegration.js   | 22 +------
 .../ReactFlightDOMRelay-test.internal.js      | 13 +---
 .../src/ReactFlightNativeRelayClient.js       | 19 +++++-
 .../ReactFlightNativeRelayClientHostConfig.js |  2 +-
 .../src/ReactFlightNativeRelayProtocol.js     | 31 +++++++++
 .../ReactFlightNativeRelayServerHostConfig.js | 65 ++++---------------
 ...ReactFlightNativeRelayServerIntegration.js | 22 +------
 .../ReactFlightNativeRelay-test.internal.js   | 21 +-----
 scripts/flow/react-relay-hooks.js             | 28 +-------
 13 files changed, 132 insertions(+), 208 deletions(-)
 create mode 100644 packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js
 create mode 100644 packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js

diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
index 7a5e51ff6311..b42f52097f54 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
@@ -7,10 +7,27 @@
  * @flow
  */
 
-export {
+import type {RowEncoding} from './ReactFlightDOMRelayProtocol';
+
+import type {Response} from 'react-client/src/ReactFlightClient';
+
+import {
   createResponse,
   resolveModel,
   resolveModule,
   resolveError,
   close,
 } from 'react-client/src/ReactFlightClient';
+
+export {createResponse, close};
+
+export function resolveRow(response: Response, chunk: RowEncoding): void {
+  if (chunk[0] === 'J') {
+    resolveModel(response, chunk[1], chunk[2]);
+  } else if (chunk[0] === 'M') {
+    resolveModule(response, chunk[1], chunk[2]);
+  } else {
+    // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
+    resolveError(response, chunk[1], chunk[2].message, chunk[2].stack);
+  }
+}
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
index 1dde710b4af8..f81644378170 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -26,7 +26,7 @@ export {
 
 export type {ModuleMetaData} from 'ReactFlightDOMRelayClientIntegration';
 
-export opaque type UninitializedModel = JSONValue;
+export type UninitializedModel = JSONValue;
 
 export type Response = ResponseBase;
 
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js
new file mode 100644
index 000000000000..263161d53852
--- /dev/null
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ModuleMetaData} from 'ReactFlightDOMRelayServerIntegration';
+
+export type JSONValue =
+  | string
+  | number
+  | boolean
+  | null
+  | {+[key: string]: JSONValue}
+  | Array<JSONValue>;
+
+export type RowEncoding =
+  | ['J', number, JSONValue]
+  | ['M', number, ModuleMetaData]
+  | [
+      'E',
+      number,
+      {
+        message: string,
+        stack: string,
+        ...
+      },
+    ];
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 73bc60d4eb89..d3fc134176a9 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {RowEncoding, JSONValue} from './ReactFlightDOMRelayProtocol';
+
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 
 import JSResourceReference from 'JSResourceReference';
@@ -22,9 +24,7 @@ import type {
 import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
 
 import {
-  emitModel,
-  emitModule,
-  emitError,
+  emitRow,
   resolveModuleMetaData as resolveModuleMetaDataImpl,
 } from 'ReactFlightDOMRelayServerIntegration';
 
@@ -45,34 +45,7 @@ export function resolveModuleMetaData<T>(
   return resolveModuleMetaDataImpl(config, resource);
 }
 
-type JSONValue =
-  | string
-  | number
-  | boolean
-  | null
-  | {+[key: string]: JSONValue}
-  | Array<JSONValue>;
-
-export type Chunk =
-  | {
-      type: 'json',
-      id: number,
-      json: JSONValue,
-    }
-  | {
-      type: 'module',
-      id: number,
-      json: ModuleMetaData,
-    }
-  | {
-      type: 'error',
-      id: number,
-      json: {
-        message: string,
-        stack: string,
-        ...
-      },
-    };
+export type Chunk = RowEncoding;
 
 export function processErrorChunk(
   request: Request,
@@ -80,14 +53,14 @@ export function processErrorChunk(
   message: string,
   stack: string,
 ): Chunk {
-  return {
-    type: 'error',
-    id: id,
-    json: {
+  return [
+    'E',
+    id,
+    {
       message,
       stack,
     },
-  };
+  ];
 }
 
 function convertModelToJSON(
@@ -126,11 +99,7 @@ export function processModelChunk(
   model: ReactModel,
 ): Chunk {
   const json = convertModelToJSON(request, {}, '', model);
-  return {
-    type: 'json',
-    id: id,
-    json: json,
-  };
+  return ['J', id, json];
 }
 
 export function processModuleChunk(
@@ -139,11 +108,7 @@ export function processModuleChunk(
   moduleMetaData: ModuleMetaData,
 ): Chunk {
   // The moduleMetaData is already a JSON serializable value.
-  return {
-    type: 'module',
-    id: id,
-    json: moduleMetaData,
-  };
+  return ['M', id, moduleMetaData];
 }
 
 export function scheduleWork(callback: () => void) {
@@ -155,13 +120,7 @@ export function flushBuffered(destination: Destination) {}
 export function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): boolean {
-  if (chunk.type === 'json') {
-    emitModel(destination, chunk.id, chunk.json);
-  } else if (chunk.type === 'module') {
-    emitModule(destination, chunk.id, chunk.json);
-  } else {
-    emitError(destination, chunk.id, chunk.json.message, chunk.json.stack);
-  }
+  emitRow(destination, chunk);
   return true;
 }
 
diff --git a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js b/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
index 3a873ffcad39..cc755f8eaee7 100644
--- a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
+++ b/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
@@ -8,26 +8,8 @@
 'use strict';
 
 const ReactFlightDOMRelayServerIntegration = {
-  emitModel(destination, id, json) {
-    destination.push({
-      type: 'json',
-      id: id,
-      json: json,
-    });
-  },
-  emitModule(destination, id, json) {
-    destination.push({
-      type: 'module',
-      id: id,
-      json: json,
-    });
-  },
-  emitError(destination, id, message, stack) {
-    destination.push({
-      type: 'error',
-      id: id,
-      json: {message, stack},
-    });
+  emitRow(destination, json) {
+    destination.push(json);
   },
   close(destination) {},
   resolveModuleMetaData(config, resource) {
diff --git a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 035f5c1abd0b..092e12abac9d 100644
--- a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -30,18 +30,7 @@ describe('ReactFlightDOMRelay', () => {
     const response = ReactDOMFlightRelayClient.createResponse();
     for (let i = 0; i < data.length; i++) {
       const chunk = data[i];
-      if (chunk.type === 'json') {
-        ReactDOMFlightRelayClient.resolveModel(response, chunk.id, chunk.json);
-      } else if (chunk.type === 'module') {
-        ReactDOMFlightRelayClient.resolveModule(response, chunk.id, chunk.json);
-      } else {
-        ReactDOMFlightRelayClient.resolveError(
-          response,
-          chunk.id,
-          chunk.json.message,
-          chunk.json.stack,
-        );
-      }
+      ReactDOMFlightRelayClient.resolveRow(response, chunk);
     }
     ReactDOMFlightRelayClient.close(response);
     const model = response.readRoot();
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
index 7a5e51ff6311..94222c0ca713 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
@@ -7,10 +7,27 @@
  * @flow
  */
 
-export {
+import type {RowEncoding} from './ReactFlightNativeRelayProtocol';
+
+import type {Response} from 'react-client/src/ReactFlightClient';
+
+import {
   createResponse,
   resolveModel,
   resolveModule,
   resolveError,
   close,
 } from 'react-client/src/ReactFlightClient';
+
+export {createResponse, close};
+
+export function resolveRow(response: Response, chunk: RowEncoding): void {
+  if (chunk[0] === 'J') {
+    resolveModel(response, chunk[1], chunk[2]);
+  } else if (chunk[0] === 'M') {
+    resolveModule(response, chunk[1], chunk[2]);
+  } else {
+    // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
+    resolveError(response, chunk[1], chunk[2].message, chunk[2].stack);
+  }
+}
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
index 035dcaf9f4c1..b13d18b3c409 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
@@ -26,7 +26,7 @@ export {
 
 export type {ModuleMetaData} from 'ReactFlightNativeRelayClientIntegration';
 
-export opaque type UninitializedModel = JSONValue;
+export type UninitializedModel = JSONValue;
 
 export type Response = ResponseBase;
 
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js
new file mode 100644
index 000000000000..5689f8c0f974
--- /dev/null
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ModuleMetaData} from 'ReactFlightNativeRelayServerIntegration';
+
+export type JSONValue =
+  | string
+  | number
+  | boolean
+  | null
+  | {+[key: string]: JSONValue}
+  | Array<JSONValue>;
+
+export type RowEncoding =
+  | ['J', number, JSONValue]
+  | ['M', number, ModuleMetaData]
+  | [
+      'E',
+      number,
+      {
+        message: string,
+        stack: string,
+        ...
+      },
+    ];
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 3992b670e1fa..bd28ee033752 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {RowEncoding, JSONValue} from './ReactFlightNativeRelayProtocol';
+
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 
 import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
@@ -22,9 +24,7 @@ import type {
 import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
 
 import {
-  emitModel,
-  emitModule,
-  emitError,
+  emitRow,
   resolveModuleMetaData as resolveModuleMetaDataImpl,
 } from 'ReactFlightNativeRelayServerIntegration';
 
@@ -45,34 +45,7 @@ export function resolveModuleMetaData<T>(
   return resolveModuleMetaDataImpl(config, resource);
 }
 
-type JSONValue =
-  | string
-  | number
-  | boolean
-  | null
-  | {+[key: string]: JSONValue}
-  | Array<JSONValue>;
-
-export type Chunk =
-  | {
-      type: 'json',
-      id: number,
-      json: JSONValue,
-    }
-  | {
-      type: 'module',
-      id: number,
-      json: ModuleMetaData,
-    }
-  | {
-      type: 'error',
-      id: number,
-      json: {
-        message: string,
-        stack: string,
-        ...
-      },
-    };
+export type Chunk = RowEncoding;
 
 export function processErrorChunk(
   request: Request,
@@ -80,14 +53,14 @@ export function processErrorChunk(
   message: string,
   stack: string,
 ): Chunk {
-  return {
-    type: 'error',
-    id: id,
-    json: {
+  return [
+    'E',
+    id,
+    {
       message,
       stack,
     },
-  };
+  ];
 }
 
 function convertModelToJSON(
@@ -126,11 +99,7 @@ export function processModelChunk(
   model: ReactModel,
 ): Chunk {
   const json = convertModelToJSON(request, {}, '', model);
-  return {
-    type: 'json',
-    id: id,
-    json: json,
-  };
+  return ['J', id, json];
 }
 
 export function processModuleChunk(
@@ -139,11 +108,7 @@ export function processModuleChunk(
   moduleMetaData: ModuleMetaData,
 ): Chunk {
   // The moduleMetaData is already a JSON serializable value.
-  return {
-    type: 'module',
-    id: id,
-    json: moduleMetaData,
-  };
+  return ['M', id, moduleMetaData];
 }
 
 export function scheduleWork(callback: () => void) {
@@ -155,13 +120,7 @@ export function flushBuffered(destination: Destination) {}
 export function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): boolean {
-  if (chunk.type === 'json') {
-    emitModel(destination, chunk.id, chunk.json);
-  } else if (chunk.type === 'module') {
-    emitModule(destination, chunk.id, chunk.json);
-  } else {
-    emitError(destination, chunk.id, chunk.json.message, chunk.json.stack);
-  }
+  emitRow(destination, chunk);
   return true;
 }
 
diff --git a/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js b/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
index 197048cc50c8..eec41c718881 100644
--- a/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
+++ b/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
@@ -8,26 +8,8 @@
 'use strict';
 
 const ReactFlightNativeRelayServerIntegration = {
-  emitModel(destination, id, json) {
-    destination.push({
-      type: 'json',
-      id: id,
-      json: json,
-    });
-  },
-  emitModule(destination, id, json) {
-    destination.push({
-      type: 'module',
-      id: id,
-      json: json,
-    });
-  },
-  emitError(destination, id, message, stack) {
-    destination.push({
-      type: 'error',
-      id: id,
-      json: {message, stack},
-    });
+  emitRow(destination, json) {
+    destination.push(json);
   },
   close(destination) {},
   resolveModuleMetaData(config, resource) {
diff --git a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js b/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
index 48742e6bc1cb..cf893bca760e 100644
--- a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
+++ b/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
@@ -45,26 +45,7 @@ describe('ReactFlightNativeRelay', () => {
     const response = ReactNativeFlightRelayClient.createResponse();
     for (let i = 0; i < data.length; i++) {
       const chunk = data[i];
-      if (chunk.type === 'json') {
-        ReactNativeFlightRelayClient.resolveModel(
-          response,
-          chunk.id,
-          chunk.json,
-        );
-      } else if (chunk.type === 'module') {
-        ReactNativeFlightRelayClient.resolveModule(
-          response,
-          chunk.id,
-          chunk.json,
-        );
-      } else {
-        ReactNativeFlightRelayClient.resolveError(
-          response,
-          chunk.id,
-          chunk.json.message,
-          chunk.json.stack,
-        );
-      }
+      ReactNativeFlightRelayClient.resolveRow(response, chunk);
     }
     ReactNativeFlightRelayClient.close(response);
     const model = response.readRoot();
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
index 00fdbc839741..73eb20ef4127 100644
--- a/scripts/flow/react-relay-hooks.js
+++ b/scripts/flow/react-relay-hooks.js
@@ -35,22 +35,10 @@ declare module 'JSResourceReferenceImpl' {
 declare module 'ReactFlightDOMRelayServerIntegration' {
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
-  declare export function emitModel(
+  declare export function emitRow(
     destination: Destination,
-    id: number,
     json: JSONValue,
   ): void;
-  declare export function emitModule(
-    destination: Destination,
-    id: number,
-    json: ModuleMetaData,
-  ): void;
-  declare export function emitError(
-    destination: Destination,
-    id: number,
-    message: string,
-    stack: string,
-  ): void;
   declare export function close(destination: Destination): void;
 
   declare export type ModuleMetaData = JSONValue;
@@ -76,22 +64,10 @@ declare module 'ReactFlightDOMRelayClientIntegration' {
 declare module 'ReactFlightNativeRelayServerIntegration' {
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
-  declare export function emitModel(
+  declare export function emitRow(
     destination: Destination,
-    id: number,
     json: JSONValue,
   ): void;
-  declare export function emitModule(
-    destination: Destination,
-    id: number,
-    json: ModuleMetaData,
-  ): void;
-  declare export function emitError(
-    destination: Destination,
-    id: number,
-    message: string,
-    stack: string,
-  ): void;
   declare export function close(destination: Destination): void;
 
   declare export type ModuleMetaData = JSONValue;

From 76a6dbcb9ad93cf1e18606cb9280a1afc206b153 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 10 Nov 2020 22:56:50 -0500
Subject: [PATCH 0068/1603] =?UTF-8?q?[Flight]=20Encode=20Symbols=20as=20sp?=
 =?UTF-8?q?ecial=20rows=20that=20can=20be=20referenced=20by=20models=20?=
 =?UTF-8?q?=E2=80=A6=20(#20171)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Encode Symbols as special rows that can be referenced by models

If a symbol was extracted from Symbol.for(...) then we can reliably
recreate the same symbol on the client.

S123:"react.suspense"
M456:{mySymbol: '$123'}

This doesn't suffer from the XSS problem because you have to write actual
code to create one of these symbols. That problem is only a problem because
values pass through common other usages of JSON which are not secure.

Since React encodes its built-ins as symbols, we can now use them as long
as its props are serializable. Like Suspense.

* Refactor resolution to avoid memo hack

Going through createElement isn't quite equivalent for ref and key in props.

* Reuse symbol ids that have already been written earlier in the stream
---
 .../react-client/src/ReactFlightClient.js     | 18 ++++
 .../src/ReactFlightClientStream.js            | 27 +++---
 .../src/__tests__/ReactFlight-test.js         |  2 +-
 .../react-server/src/ReactFlightServer.js     | 90 +++++++++++--------
 .../src/ReactFlightServerConfigStream.js      | 10 +++
 .../src/ReactFlightDOMRelayClient.js          |  4 +
 .../src/ReactFlightDOMRelayProtocol.js        |  1 +
 .../ReactFlightDOMRelayServerHostConfig.js    |  8 ++
 .../ReactFlightDOMRelay-test.internal.js      | 13 +--
 .../src/__tests__/ReactFlightDOM-test.js      | 17 ++--
 .../src/ReactFlightNativeRelayClient.js       |  4 +
 .../src/ReactFlightNativeRelayProtocol.js     |  1 +
 .../ReactFlightNativeRelayServerHostConfig.js |  8 ++
 scripts/error-codes/codes.json                |  2 +-
 14 files changed, 140 insertions(+), 65 deletions(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 67e6ee9bf374..983e3edc9380 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -132,6 +132,13 @@ function createErrorChunk(response: Response, error: Error): ErroredChunk {
   return new Chunk(ERRORED, error, response);
 }
 
+function createInitializedChunk<T>(
+  response: Response,
+  value: T,
+): InitializedChunk<T> {
+  return new Chunk(INITIALIZED, value, response);
+}
+
 function wakeChunk(listeners: null | Array<() => mixed>) {
   if (listeners !== null) {
     for (let i = 0; i < listeners.length; i++) {
@@ -373,6 +380,17 @@ export function resolveModule(
   }
 }
 
+export function resolveSymbol(
+  response: Response,
+  id: number,
+  name: string,
+): void {
+  const chunks = response._chunks;
+  // We assume that we'll always emit the symbol before anything references it
+  // to save a few bytes.
+  chunks.set(id, createInitializedChunk(response, Symbol.for(name)));
+}
+
 export function resolveError(
   response: Response,
   id: number,
diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js
index 4bb493a66ddb..9f07d8cc999a 100644
--- a/packages/react-client/src/ReactFlightClientStream.js
+++ b/packages/react-client/src/ReactFlightClientStream.js
@@ -12,6 +12,7 @@ import type {Response} from './ReactFlightClientHostConfigStream';
 import {
   resolveModule,
   resolveModel,
+  resolveSymbol,
   resolveError,
   createResponse as createResponseBase,
   parseModelString,
@@ -32,26 +33,28 @@ function processFullRow(response: Response, row: string): void {
     return;
   }
   const tag = row[0];
+  // When tags that are not text are added, check them here before
+  // parsing the row as text.
+  // switch (tag) {
+  // }
+  const colon = row.indexOf(':', 1);
+  const id = parseInt(row.substring(1, colon), 16);
+  const text = row.substring(colon + 1);
   switch (tag) {
     case 'J': {
-      const colon = row.indexOf(':', 1);
-      const id = parseInt(row.substring(1, colon), 16);
-      const json = row.substring(colon + 1);
-      resolveModel(response, id, json);
+      resolveModel(response, id, text);
       return;
     }
     case 'M': {
-      const colon = row.indexOf(':', 1);
-      const id = parseInt(row.substring(1, colon), 16);
-      const json = row.substring(colon + 1);
-      resolveModule(response, id, json);
+      resolveModule(response, id, text);
+      return;
+    }
+    case 'S': {
+      resolveSymbol(response, id, JSON.parse(text));
       return;
     }
     case 'E': {
-      const colon = row.indexOf(':', 1);
-      const id = parseInt(row.substring(1, colon), 16);
-      const json = row.substring(colon + 1);
-      const errorInfo = JSON.parse(json);
+      const errorInfo = JSON.parse(text);
       resolveError(response, id, errorInfo.message, errorInfo.stack);
       return;
     }
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 3d4ccf5c459f..e0947c68811d 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -174,7 +174,7 @@ describe('ReactFlight', () => {
           <ErrorBoundary expectedMessage="Functions cannot be passed directly to client components because they're not serializable.">
             <Client transport={fn} />
           </ErrorBoundary>
-          <ErrorBoundary expectedMessage="Symbol values (foo) cannot be passed to client components.">
+          <ErrorBoundary expectedMessage="Only global symbols received from Symbol.for(...) can be passed to client components.">
             <Client transport={symbol} />
           </ErrorBoundary>
           <ErrorBoundary expectedMessage="Refs cannot be used in server components, nor passed to client components.">
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 56842b7b2f40..34404544efbd 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -25,6 +25,7 @@ import {
   close,
   processModelChunk,
   processModuleChunk,
+  processSymbolChunk,
   processErrorChunk,
   resolveModuleMetaData,
   isModuleReference,
@@ -32,21 +33,12 @@ import {
 
 import {
   REACT_ELEMENT_TYPE,
-  REACT_DEBUG_TRACING_MODE_TYPE,
   REACT_FORWARD_REF_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_LAZY_TYPE,
-  REACT_LEGACY_HIDDEN_TYPE,
   REACT_MEMO_TYPE,
-  REACT_OFFSCREEN_TYPE,
-  REACT_PROFILER_TYPE,
-  REACT_SCOPE_TYPE,
-  REACT_STRICT_MODE_TYPE,
-  REACT_SUSPENSE_TYPE,
-  REACT_SUSPENSE_LIST_TYPE,
 } from 'shared/ReactSymbols';
 
-import * as React from 'react';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
 
@@ -86,6 +78,7 @@ export type Request = {
   completedModuleChunks: Array<Chunk>,
   completedJSONChunks: Array<Chunk>,
   completedErrorChunks: Array<Chunk>,
+  writtenSymbols: Map<Symbol, number>,
   flowing: boolean,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
@@ -107,6 +100,7 @@ export function createRequest(
     completedModuleChunks: [],
     completedJSONChunks: [],
     completedErrorChunks: [],
+    writtenSymbols: new Map(),
     flowing: false,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
@@ -118,10 +112,13 @@ export function createRequest(
   return request;
 }
 
-function attemptResolveElement(element: React$Element<any>): ReactModel {
-  const type = element.type;
-  const props = element.props;
-  if (element.ref !== null && element.ref !== undefined) {
+function attemptResolveElement(
+  type: any,
+  key: null | React$Key,
+  ref: mixed,
+  props: any,
+): ReactModel {
+  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.
@@ -135,25 +132,22 @@ function attemptResolveElement(element: React$Element<any>): ReactModel {
     return type(props);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
-    return [REACT_ELEMENT_TYPE, type, element.key, element.props];
-  } else if (
-    type === REACT_FRAGMENT_TYPE ||
-    type === REACT_STRICT_MODE_TYPE ||
-    type === REACT_PROFILER_TYPE ||
-    type === REACT_SCOPE_TYPE ||
-    type === REACT_DEBUG_TRACING_MODE_TYPE ||
-    type === REACT_LEGACY_HIDDEN_TYPE ||
-    type === REACT_OFFSCREEN_TYPE ||
-    // TODO: These are temporary shims
-    // and we'll want a different behavior.
-    type === REACT_SUSPENSE_TYPE ||
-    type === REACT_SUSPENSE_LIST_TYPE
-  ) {
-    return element.props.children;
+    return [REACT_ELEMENT_TYPE, type, key, props];
+  } else if (typeof type === 'symbol') {
+    if (type === REACT_FRAGMENT_TYPE) {
+      // For key-less fragments, we add a small optimization to avoid serializing
+      // it as a wrapper.
+      // TODO: If a key is specified, we should propagate its key to any children.
+      // Same as if a server component has a key.
+      return props.children;
+    }
+    // This might be a built-in React component. We'll let the client decide.
+    // Any built-in works as long as its props are serializable.
+    return [REACT_ELEMENT_TYPE, type, key, props];
   } else if (type != null && typeof type === 'object') {
     if (isModuleReference(type)) {
       // This is a reference to a client component.
-      return [REACT_ELEMENT_TYPE, type, element.key, element.props];
+      return [REACT_ELEMENT_TYPE, type, key, props];
     }
     switch (type.$$typeof) {
       case REACT_FORWARD_REF_TYPE: {
@@ -161,8 +155,7 @@ function attemptResolveElement(element: React$Element<any>): ReactModel {
         return render(props, undefined);
       }
       case REACT_MEMO_TYPE: {
-        const nextChildren = React.createElement(type.type, element.props);
-        return attemptResolveElement(nextChildren);
+        return attemptResolveElement(type.type, key, ref, props);
       }
     }
   }
@@ -399,7 +392,12 @@ export function resolveModelToJSON(
     const element: React$Element<any> = (value: any);
     try {
       // Attempt to render the server component.
-      value = attemptResolveElement(element);
+      value = attemptResolveElement(
+        element.type,
+        element.key,
+        element.ref,
+        element.props,
+      );
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
@@ -526,14 +524,26 @@ export function resolveModelToJSON(
   }
 
   if (typeof value === 'symbol') {
+    const writtenSymbols = request.writtenSymbols;
+    const existingId = writtenSymbols.get(value);
+    if (existingId !== undefined) {
+      return serializeByValueID(existingId);
+    }
+    const name = value.description;
     invariant(
-      false,
-      'Symbol values (%s) cannot be passed to client components. ' +
+      Symbol.for(name) === value,
+      'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
+        'The symbol Symbol.for(%s) cannot be found among global symbols. ' +
         'Remove %s from this object, or avoid the entire object: %s',
       value.description,
       describeKeyForErrorMessage(key),
       describeObjectForErrorMessage(parent),
     );
+    request.pendingChunks++;
+    const symbolId = request.nextChunkId++;
+    emitSymbolChunk(request, symbolId, name);
+    writtenSymbols.set(value, symbolId);
+    return serializeByValueID(symbolId);
   }
 
   // $FlowFixMe: bigint isn't added to Flow yet.
@@ -588,6 +598,11 @@ function emitModuleChunk(
   request.completedModuleChunks.push(processedChunk);
 }
 
+function emitSymbolChunk(request: Request, id: number, name: string): void {
+  const processedChunk = processSymbolChunk(request, id, name);
+  request.completedModuleChunks.push(processedChunk);
+}
+
 function retrySegment(request: Request, segment: Segment): void {
   const query = segment.query;
   let value;
@@ -604,7 +619,12 @@ function retrySegment(request: Request, segment: Segment): void {
       // Doing this here lets us reuse this same segment if the next component
       // also suspends.
       segment.query = () => value;
-      value = attemptResolveElement(element);
+      value = attemptResolveElement(
+        element.type,
+        element.key,
+        element.ref,
+        element.props,
+      );
     }
     const processedChunk = processModelChunk(request, segment.id, value);
     request.completedJSONChunks.push(processedChunk);
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index 01c0dea4c0c0..12241493e57f 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -109,6 +109,16 @@ export function processModuleChunk(
   return convertStringToBuffer(row);
 }
 
+export function processSymbolChunk(
+  request: Request,
+  id: number,
+  name: string,
+): Chunk {
+  const json = stringify(name);
+  const row = serializeRowHeader('S', id) + json + '\n';
+  return convertStringToBuffer(row);
+}
+
 export {
   scheduleWork,
   flushBuffered,
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
index b42f52097f54..6ea0b861aa7a 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
@@ -15,6 +15,7 @@ import {
   createResponse,
   resolveModel,
   resolveModule,
+  resolveSymbol,
   resolveError,
   close,
 } from 'react-client/src/ReactFlightClient';
@@ -26,6 +27,9 @@ export function resolveRow(response: Response, chunk: RowEncoding): void {
     resolveModel(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'M') {
     resolveModule(response, chunk[1], chunk[2]);
+  } else if (chunk[0] === 'S') {
+    // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
+    resolveSymbol(response, chunk[1], chunk[2]);
   } else {
     // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
     resolveError(response, chunk[1], chunk[2].message, chunk[2].stack);
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js
index 263161d53852..94f73b0d7a4a 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js
@@ -20,6 +20,7 @@ export type JSONValue =
 export type RowEncoding =
   | ['J', number, JSONValue]
   | ['M', number, ModuleMetaData]
+  | ['S', number, string]
   | [
       'E',
       number,
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index d3fc134176a9..70c2e957596c 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -111,6 +111,14 @@ export function processModuleChunk(
   return ['M', id, moduleMetaData];
 }
 
+export function processSymbolChunk(
+  request: Request,
+  id: number,
+  name: string,
+): Chunk {
+  return ['S', id, name];
+}
+
 export function scheduleWork(callback: () => void) {
   callback();
 }
diff --git a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 092e12abac9d..fd0d327fc8e6 100644
--- a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -153,11 +153,14 @@ describe('ReactFlightDOMRelay', () => {
       foo: {
         bar: (
           <div>
-            {'Fragment child'}
-            {'Profiler child'}
-            {'StrictMode child'}
-            {'Suspense child'}
-            {['SuspenseList row 1', 'SuspenseList row 2']}
+            Fragment child
+            <Profiler>Profiler child</Profiler>
+            <StrictMode>StrictMode child</StrictMode>
+            <Suspense fallback="Loading...">Suspense child</Suspense>
+            <SuspenseList fallback="Loading...">
+              {'SuspenseList row 1'}
+              {'SuspenseList row 2'}
+            </SuspenseList>
             <div>Hello world</div>
           </div>
         ),
diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 04910ff98e61..d8568c661c2a 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -282,10 +282,6 @@ describe('ReactFlightDOM', () => {
       );
     }
 
-    function Placeholder({children, fallback}) {
-      return <Suspense fallback={fallback}>{children}</Suspense>;
-    }
-
     // Model
     function Text({children}) {
       return children;
@@ -347,22 +343,21 @@ describe('ReactFlightDOM', () => {
     }
 
     const MyErrorBoundaryClient = moduleReference(MyErrorBoundary);
-    const PlaceholderClient = moduleReference(Placeholder);
 
     function ProfileContent() {
       return (
         <>
           <ProfileDetails avatar={<Text>:avatar:</Text>} />
-          <PlaceholderClient fallback={<p>(loading sidebar)</p>}>
+          <Suspense fallback={<p>(loading sidebar)</p>}>
             <ProfileSidebar friends={<Friends>:friends:</Friends>} />
-          </PlaceholderClient>
-          <PlaceholderClient fallback={<p>(loading posts)</p>}>
+          </Suspense>
+          <Suspense fallback={<p>(loading posts)</p>}>
             <ProfilePosts posts={<Posts>:posts:</Posts>} />
-          </PlaceholderClient>
+          </Suspense>
           <MyErrorBoundaryClient>
-            <PlaceholderClient fallback={<p>(loading games)</p>}>
+            <Suspense fallback={<p>(loading games)</p>}>
               <ProfileGames games={<Games>:games:</Games>} />
-            </PlaceholderClient>
+            </Suspense>
           </MyErrorBoundaryClient>
         </>
       );
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
index 94222c0ca713..42b9efa73b47 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
@@ -15,6 +15,7 @@ import {
   createResponse,
   resolveModel,
   resolveModule,
+  resolveSymbol,
   resolveError,
   close,
 } from 'react-client/src/ReactFlightClient';
@@ -26,6 +27,9 @@ export function resolveRow(response: Response, chunk: RowEncoding): void {
     resolveModel(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'M') {
     resolveModule(response, chunk[1], chunk[2]);
+  } else if (chunk[0] === 'S') {
+    // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
+    resolveSymbol(response, chunk[1], chunk[2]);
   } else {
     // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
     resolveError(response, chunk[1], chunk[2].message, chunk[2].stack);
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js
index 5689f8c0f974..75f6db8039ab 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js
@@ -20,6 +20,7 @@ export type JSONValue =
 export type RowEncoding =
   | ['J', number, JSONValue]
   | ['M', number, ModuleMetaData]
+  | ['S', number, string]
   | [
       'E',
       number,
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index bd28ee033752..c8566c960f0d 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -111,6 +111,14 @@ export function processModuleChunk(
   return ['M', id, moduleMetaData];
 }
 
+export function processSymbolChunk(
+  request: Request,
+  id: number,
+  name: string,
+): Chunk {
+  return ['S', id, name];
+}
+
 export function scheduleWork(callback: () => void) {
   callback();
 }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index a86c8bc32812..269b7d278772 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -364,7 +364,7 @@
   "373": "This Hook is not supported in Server Components.",
   "374": "Event handlers cannot be passed to client component props. Remove %s from these props if possible: %s\nIf you need interactivity, consider converting part of this to a client component.",
   "375": "Functions cannot be passed directly to client components because they're not serializable. Remove %s (%s) from this object, or avoid the entire object: %s",
-  "376": "Symbol values (%s) cannot be passed to client components. Remove %s from this object, or avoid the entire object: %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. Remove %s from this object, or avoid the entire object: %s",
   "377": "BigInt (%s) is not yet supported in client component props. Remove %s from this object or use a plain number instead: %s",
   "378": "Type %s is not supported in client component props. Remove %s from this object, or avoid the entire object: %s",
   "379": "Refs cannot be used in server components, nor passed to client components."

From 163199d8cc99309e765c85e93c6b9dd1f22c2974 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 10 Nov 2020 22:58:58 -0500
Subject: [PATCH 0069/1603] Dedupe module id generation (#20172)

---
 .../react-noop-renderer/src/ReactNoopFlightServer.js     | 3 +++
 packages/react-server/src/ReactFlightServer.js           | 9 +++++++++
 .../src/ReactFlightServerBundlerConfigCustom.js          | 2 ++
 .../src/ReactFlightDOMRelayServerHostConfig.js           | 8 ++++++++
 .../src/ReactFlightServerWebpackBundlerConfig.js         | 6 ++++++
 .../src/ReactFlightNativeRelayServerHostConfig.js        | 8 ++++++++
 scripts/jest/setupHostConfigs.js                         | 1 +
 7 files changed, 37 insertions(+)

diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index f6e8845c9681..f080f27addfd 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -45,6 +45,9 @@ const ReactNoopFlightServer = ReactFlightServer({
   isModuleReference(reference: Object): boolean {
     return reference.$$typeof === Symbol.for('react.module.reference');
   },
+  getModuleKey(reference: Object): Object {
+    return reference;
+  },
   resolveModuleMetaData(
     config: void,
     reference: {$$typeof: Symbol, value: any},
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 34404544efbd..374ce95397f3 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -14,6 +14,7 @@ import type {
   BundlerConfig,
   ModuleMetaData,
   ModuleReference,
+  ModuleKey,
 } from './ReactFlightServerConfig';
 
 import {
@@ -28,6 +29,7 @@ import {
   processSymbolChunk,
   processErrorChunk,
   resolveModuleMetaData,
+  getModuleKey,
   isModuleReference,
 } from './ReactFlightServerConfig';
 
@@ -79,6 +81,7 @@ export type Request = {
   completedJSONChunks: Array<Chunk>,
   completedErrorChunks: Array<Chunk>,
   writtenSymbols: Map<Symbol, number>,
+  writtenModules: Map<ModuleKey, number>,
   flowing: boolean,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
@@ -101,6 +104,7 @@ export function createRequest(
     completedJSONChunks: [],
     completedErrorChunks: [],
     writtenSymbols: new Map(),
+    writtenModules: new Map(),
     flowing: false,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
@@ -425,6 +429,11 @@ export function resolveModelToJSON(
   if (typeof value === 'object') {
     if (isModuleReference(value)) {
       const moduleReference: ModuleReference<any> = (value: any);
+      const moduleKey: ModuleKey = getModuleKey(moduleReference);
+      const existingId = request.writtenModules.get(moduleKey);
+      if (existingId !== undefined) {
+        return serializeByValueID(existingId);
+      }
       try {
         const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
           request.bundlerConfig,
diff --git a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
index c0db2f6b2892..eba05dab334f 100644
--- a/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
+++ b/packages/react-server/src/ReactFlightServerBundlerConfigCustom.js
@@ -12,5 +12,7 @@ declare var $$$hostConfig: any;
 export opaque type BundlerConfig = mixed; // eslint-disable-line no-undef
 export opaque type ModuleReference<T> = mixed; // eslint-disable-line no-undef
 export opaque type ModuleMetaData: any = mixed; // eslint-disable-line no-undef
+export opaque type ModuleKey: any = mixed; // eslint-disable-line no-undef
 export const isModuleReference = $$$hostConfig.isModuleReference;
+export const getModuleKey = $$$hostConfig.getModuleKey;
 export const resolveModuleMetaData = $$$hostConfig.resolveModuleMetaData;
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 70c2e957596c..73c75872c506 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -38,6 +38,14 @@ export function isModuleReference(reference: Object): boolean {
   return reference instanceof JSResourceReference;
 }
 
+export type ModuleKey = ModuleReference<any>;
+
+export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
+  // We use the reference object itself as the key because we assume the
+  // object will be cached by the bundler runtime.
+  return reference;
+}
+
 export function resolveModuleMetaData<T>(
   config: BundlerConfig,
   resource: ModuleReference<T>,
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index b8bb0d5cbee7..f691809522ca 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -25,8 +25,14 @@ export type ModuleMetaData = {
   name: string,
 };
 
+export type ModuleKey = string;
+
 const MODULE_TAG = Symbol.for('react.module.reference');
 
+export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
+  return reference.name;
+}
+
 export function isModuleReference(reference: Object): boolean {
   return reference.$$typeof === MODULE_TAG;
 }
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index c8566c960f0d..7ba6ba34420e 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -38,6 +38,14 @@ export function isModuleReference(reference: Object): boolean {
   return reference instanceof JSResourceReferenceImpl;
 }
 
+export type ModuleKey = ModuleReference<any>;
+
+export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
+  // We use the reference object itself as the key because we assume the
+  // object will be cached by the bundler runtime.
+  return reference;
+}
+
 export function resolveModuleMetaData<T>(
   config: BundlerConfig,
   resource: ModuleReference<T>,
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index 4f9cbf5d479d..58f4d4adf124 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -35,6 +35,7 @@ jest.mock('react-server/flight', () => {
     jest.mock(shimServerFormatConfigPath, () => config);
     jest.mock('react-server/src/ReactFlightServerBundlerConfigCustom', () => ({
       isModuleReference: config.isModuleReference,
+      getModuleKey: config.getModuleKey,
       resolveModuleMetaData: config.resolveModuleMetaData,
     }));
     jest.mock(shimFlightServerConfigPath, () =>

From 12627f93b5357032881412abcc014da53a0b70f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 10 Nov 2020 22:59:46 -0500
Subject: [PATCH 0070/1603] Perform hasOwnProperty check in Relay Flight
 (#20220)

We simulate JSON.stringify in this loop so we should do a has own check.
Otherwise we'll include things like constructor properties.

This will actually make things throw less even when it should.
---
 .../ReactFlightDOMRelayServerHostConfig.js    | 16 +++++++++-----
 .../ReactFlightDOMRelay-test.internal.js      | 19 ++++++++++++++++
 .../ReactFlightNativeRelayServerHostConfig.js | 16 +++++++++-----
 .../ReactFlightNativeRelay-test.internal.js   | 22 +++++++++++++++++++
 4 files changed, 61 insertions(+), 12 deletions(-)

diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 73c75872c506..1aa02e00d54b 100644
--- a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -71,6 +71,8 @@ export function processErrorChunk(
   ];
 }
 
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function convertModelToJSON(
   request: Request,
   parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
@@ -88,12 +90,14 @@ function convertModelToJSON(
     } else {
       const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
-        jsonObj[nextKey] = convertModelToJSON(
-          request,
-          json,
-          nextKey,
-          json[nextKey],
-        );
+        if (hasOwnProperty.call(json, nextKey)) {
+          jsonObj[nextKey] = convertModelToJSON(
+            request,
+            json,
+            nextKey,
+            json[nextKey],
+          );
+        }
       }
       return jsonObj;
     }
diff --git a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index fd0d327fc8e6..1bdb8b7684b8 100644
--- a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -214,4 +214,23 @@ describe('ReactFlightDOMRelay', () => {
     const model = readThrough(transport);
     expect(model).toEqual(14);
   });
+
+  it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
+    function Bar() {}
+
+    function Foo() {}
+    Foo.prototype = Object.create(Bar.prototype);
+    // This is enumerable which some polyfills do.
+    Foo.prototype.constructor = Foo;
+    Foo.prototype.method = function() {};
+
+    expect(() => {
+      const transport = [];
+      ReactDOMFlightRelayServer.render(<input value={new Foo()} />, transport);
+      readThrough(transport);
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ',
+      {withoutStack: true},
+    );
+  });
 });
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 7ba6ba34420e..ecea013654f3 100644
--- a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -71,6 +71,8 @@ export function processErrorChunk(
   ];
 }
 
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
 function convertModelToJSON(
   request: Request,
   parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
@@ -88,12 +90,14 @@ function convertModelToJSON(
     } else {
       const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
-        jsonObj[nextKey] = convertModelToJSON(
-          request,
-          json,
-          nextKey,
-          json[nextKey],
-        );
+        if (hasOwnProperty.call(json, nextKey)) {
+          jsonObj[nextKey] = convertModelToJSON(
+            request,
+            json,
+            nextKey,
+            json[nextKey],
+          );
+        }
       }
       return jsonObj;
     }
diff --git a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js b/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
index cf893bca760e..a28a6fa35e07 100644
--- a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
+++ b/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
@@ -105,4 +105,26 @@ describe('ReactFlightNativeRelay', () => {
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
   });
+
+  it('should warn in DEV if a class instance polyfill is passed to a host component', () => {
+    function Bar() {}
+
+    function Foo() {}
+    Foo.prototype = Object.create(Bar.prototype);
+    // This is enumerable which some polyfills do.
+    Foo.prototype.constructor = Foo;
+    Foo.prototype.method = function() {};
+
+    expect(() => {
+      const transport = [];
+      ReactNativeFlightRelayServer.render(
+        <input value={new Foo()} />,
+        transport,
+      );
+      readThrough(transport);
+    }).toErrorDev(
+      'Only plain objects can be passed to client components from server components. ',
+      {withoutStack: true},
+    );
+  });
 });

From 9aca239f11f31109dc1a229aa1571c2bf02f5524 Mon Sep 17 00:00:00 2001
From: Alphabet Codes <40604284+alphabet-codes@users.noreply.github.com>
Date: Wed, 11 Nov 2020 15:36:51 +0100
Subject: [PATCH 0071/1603] Improved dev experience when DevTools hook is
 disabled (#20208)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
---
 packages/react-refresh/src/ReactFreshRuntime.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index 9cf8af21182b..669eb7c1520f 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -465,6 +465,17 @@ export function injectIntoGlobalHook(globalObject: any): void {
       };
     }
 
+    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(injected) {

From 15df051c94533c70b065d51c41cf9b6b2f1dc6a6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 11 Nov 2020 09:06:37 -0600
Subject: [PATCH 0072/1603] Add warning if return pointer is inconsistent
 (#20219)

Bugs caused by inconsistent return pointers are tricky to diagnose
because the source of the error is often in a different part of the
codebase from the actual mistake. For example, you might forget to set a
return pointer during the render phase, which later causes a crash in
the commit phase.

This adds a dev-only invariant to the commit phase to check for
inconsistencies. With this in place, we'll hopefully catch return
pointer errors quickly during local development, when we have the most
context for what might have caused it.
---
 .../__tests__/ReactWrongReturnPointer-test.js | 61 +++++++++++++++++++
 .../src/createReactNoop.js                    |  5 ++
 .../src/ReactFiberCommitWork.new.js           | 27 ++++++++
 3 files changed, 93 insertions(+)
 create mode 100644 packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js

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 000000000000..688fb5c926ed
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+let React;
+let ReactNoop;
+
+beforeEach(() => {
+  React = require('react');
+  ReactNoop = require('react-noop-renderer');
+});
+
+// Don't feel too guilty if you have to delete this test.
+// @gate new
+// @gate __DEV__
+test('warns in DEV if return pointer is inconsistent', async () => {
+  const {useRef, useLayoutEffect} = React;
+
+  let ref = null;
+  function App({text}) {
+    ref = useRef(null);
+    return (
+      <>
+        <Sibling text={text} />
+        <div ref={ref}>{text}</div>
+      </>
+    );
+  }
+
+  function Sibling({text}) {
+    useLayoutEffect(() => {
+      if (text === 'B') {
+        // Mutate the return pointer of the div to point to the wrong alternate.
+        // This simulates the most common type of return pointer inconsistency.
+        const current = ref.current.fiber;
+        const workInProgress = current.alternate;
+        workInProgress.return = current.return;
+      }
+    }, [text]);
+    return null;
+  }
+
+  const root = ReactNoop.createRoot();
+  await ReactNoop.act(async () => {
+    root.render(<App text="A" />);
+  });
+
+  spyOnDev(console, 'error');
+  await ReactNoop.act(async () => {
+    root.render(<App text="B" />);
+  });
+  expect(console.error.calls.count()).toBe(1);
+  expect(console.error.calls.argsFor(0)[0]).toMatch(
+    'Internal React error: Return pointer is inconsistent with parent.',
+  );
+});
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 386d040e9075..ec2a6d714b4f 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -275,6 +275,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       props: Props,
       rootContainerInstance: Container,
       hostContext: HostContext,
+      internalInstanceHandle: Object,
     ): Instance {
       if (type === 'errorInCompletePhase') {
         throw new Error('Error in host config.');
@@ -300,6 +301,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         value: inst.context,
         enumerable: false,
       });
+      Object.defineProperty(inst, 'fiber', {
+        value: internalInstanceHandle,
+        enumerable: false,
+      });
       return inst;
     },
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 55c7c986effc..e45db46500fa 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -463,6 +463,7 @@ function iterativelyCommitBeforeMutationEffects_begin() {
       (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
       child !== null
     ) {
+      warnIfWrongReturnPointer(fiber, child);
       nextEffect = child;
     } else {
       iterativelyCommitBeforeMutationEffects_complete();
@@ -496,6 +497,7 @@ function iterativelyCommitBeforeMutationEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
+      warnIfWrongReturnPointer(fiber.return, sibling);
       nextEffect = sibling;
       return;
     }
@@ -713,6 +715,7 @@ function iterativelyCommitMutationEffects_begin(
 
     const child = fiber.child;
     if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
+      warnIfWrongReturnPointer(fiber, child);
       nextEffect = child;
     } else {
       iterativelyCommitMutationEffects_complete(root, renderPriorityLevel);
@@ -751,6 +754,7 @@ function iterativelyCommitMutationEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
+      warnIfWrongReturnPointer(fiber.return, sibling);
       nextEffect = sibling;
       return;
     }
@@ -1172,12 +1176,14 @@ function iterativelyCommitLayoutEffects_begin(
         }
         const sibling = finishedWork.sibling;
         if (sibling !== null) {
+          warnIfWrongReturnPointer(finishedWork.return, sibling);
           nextEffect = sibling;
         } else {
           nextEffect = finishedWork.return;
           iterativelyCommitLayoutEffects_complete(subtreeRoot, finishedRoot);
         }
       } else {
+        warnIfWrongReturnPointer(finishedWork, firstChild);
         nextEffect = firstChild;
       }
     } else {
@@ -1224,6 +1230,7 @@ function iterativelyCommitLayoutEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
+      warnIfWrongReturnPointer(fiber.return, sibling);
       nextEffect = sibling;
       return;
     }
@@ -1757,12 +1764,14 @@ function iterativelyCommitPassiveMountEffects_begin(
         }
         const sibling = fiber.sibling;
         if (sibling !== null) {
+          warnIfWrongReturnPointer(fiber.return, sibling);
           nextEffect = sibling;
         } else {
           nextEffect = fiber.return;
           iterativelyCommitPassiveMountEffects_complete(subtreeRoot, root);
         }
       } else {
+        warnIfWrongReturnPointer(fiber, firstChild);
         nextEffect = firstChild;
       }
     } else {
@@ -1808,6 +1817,7 @@ function iterativelyCommitPassiveMountEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
+      warnIfWrongReturnPointer(fiber.return, sibling);
       nextEffect = sibling;
       return;
     }
@@ -1886,6 +1896,7 @@ function iterativelyCommitPassiveUnmountEffects_begin() {
     }
 
     if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
+      warnIfWrongReturnPointer(fiber, child);
       nextEffect = child;
     } else {
       iterativelyCommitPassiveUnmountEffects_complete();
@@ -1904,6 +1915,7 @@ function iterativelyCommitPassiveUnmountEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
+      warnIfWrongReturnPointer(fiber.return, sibling);
       nextEffect = sibling;
       return;
     }
@@ -1941,6 +1953,7 @@ function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     const fiber = nextEffect;
     const child = fiber.child;
     if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
+      warnIfWrongReturnPointer(fiber, child);
       nextEffect = child;
     } else {
       iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
@@ -1968,6 +1981,7 @@ function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
+      warnIfWrongReturnPointer(fiber.return, sibling);
       nextEffect = sibling;
       return;
     }
@@ -3178,3 +3192,16 @@ function invokeEffectsInDev(
     }
   }
 }
+
+let didWarnWrongReturnPointer = false;
+function warnIfWrongReturnPointer(returnFiber, child) {
+  if (__DEV__) {
+    if (!didWarnWrongReturnPointer && child.return !== returnFiber) {
+      didWarnWrongReturnPointer = true;
+      console.error(
+        'Internal React error: Return pointer is inconsistent ' +
+          'with parent.',
+      );
+    }
+  }
+}

From e7006d67dff2b9d3a9545204a469f32c70d52a8b Mon Sep 17 00:00:00 2001
From: Billy Janitsch <billy@kensho.com>
Date: Wed, 11 Nov 2020 19:30:19 -0500
Subject: [PATCH 0073/1603] Widen peer dependency range of use-subscription
 (#20225)

---
 packages/use-subscription/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index e3e4e394d66d..ec329e1f0ae6 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -19,7 +19,7 @@
     "object-assign": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^17.0.0"
+    "react": "^16.8.0 || ^17.0.0"
   },
   "devDependencies": {
     "rxjs": "^5.5.6"

From 62efd9618b5027816cf7f8b54f5fc80b3d7af8ec Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Thu, 12 Nov 2020 00:36:00 +0000
Subject: [PATCH 0074/1603] use-subscription@1.5.1

---
 packages/use-subscription/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index ec329e1f0ae6..7af8cc7bc51e 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-subscription",
   "description": "Reusable hooks",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 11a2ae3a0d9ef5f6b54c1d2b8c2da52d2392ae01 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Nov 2020 09:07:10 -0500
Subject: [PATCH 0075/1603] DevTools 4.9.0 -> 4.10.0

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 8 ++++++++
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index a63724d4cfcc..bbc3235e0aea 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 8924a9d95cb6..45fe3ce9a72f 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.9.0",
-  "version_name": "4.9.0",
+  "version": "4.10.0",
+  "version_name": "4.10.0",
 
   "minimum_chrome_version": "49",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index bdd387ff7aab..1bde752cd7f7 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.9.0",
-  "version_name": "4.9.0",
+  "version": "4.10.0",
+  "version_name": "4.10.0",
 
   "minimum_chrome_version": "49",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 6a46cd88fb84..0ce5b37972c4 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.9.0",
+  "version": "4.10.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index b1f702b1354c..b1bce8cfa121 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index f686c4a6d2c6..0b7585aa63ed 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,14 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 460e5f21340e..2ce727ea70a6 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.9.0",
+  "version": "4.10.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^9.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.9.0",
+    "react-devtools-core": "4.10.0",
     "update-notifier": "^2.1.0"
   }
 }

From 9403c3b536f510fc54a16607bb211f630c71b55f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Nov 2020 09:31:27 -0500
Subject: [PATCH 0076/1603] Add Profiler callback when nested updates are
 scheduled (#20211)

This callback accepts the no parameters (except for the current interactions). Users of this hook can inspect the call stack to access and log the source location of the component.
---
 .../src/ReactFiberWorkLoop.new.js             |  38 ++
 .../src/ReactFiberWorkLoop.old.js             |  40 ++
 .../__tests__/ReactProfiler-test.internal.js  | 524 ++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |   4 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   2 +
 .../shared/forks/ReactFeatureFlags.www.js     |   2 +
 13 files changed, 617 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 9153c03049b9..4ccd2ea67e8b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -22,6 +22,7 @@ import {
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableProfilerTimer,
   enableProfilerNestedUpdatePhase,
+  enableProfilerNestedUpdateScheduledHook,
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
@@ -110,6 +111,7 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
+  Profiler,
 } from './ReactWorkTags';
 import {LegacyRoot} from './ReactRootTags';
 import {
@@ -258,6 +260,10 @@ let workInProgress: Fiber | null = null;
 // The lanes we're rendering
 let workInProgressRootRenderLanes: Lanes = NoLanes;
 
+// Only used when enableProfilerNestedUpdateScheduledHook is true;
+// to track which root is currently committing layout effects.
+let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
+
 // Stack that allows components to change the render lanes for its subtree
 // This is a superset of the lanes we started working on at the root. The only
 // case where it's different from `workInProgressRootRenderLanes` is when we
@@ -509,6 +515,30 @@ export function scheduleUpdateOnFiber(
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
+  if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+    if (
+      executionContext === CommitContext &&
+      root === rootCommittingMutationOrLayoutEffects
+    ) {
+      if (fiber.mode & ProfileMode) {
+        let current = fiber;
+        while (current !== null) {
+          if (current.tag === Profiler) {
+            const {onNestedUpdateScheduled} = current.memoizedProps;
+            if (typeof onNestedUpdateScheduled === 'function') {
+              if (enableSchedulerTracing) {
+                onNestedUpdateScheduled(root.memoizedInteractions);
+              } else {
+                onNestedUpdateScheduled();
+              }
+            }
+          }
+          current = current.return;
+        }
+      }
+    }
+  }
+
   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. Unless the
@@ -1898,6 +1928,10 @@ function commitRootImpl(root, renderPriorityLevel) {
       recordCommitTime();
     }
 
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      rootCommittingMutationOrLayoutEffects = root;
+    }
+
     // The next phase is the mutation phase, where we mutate the host tree.
     commitMutationEffects(finishedWork, root, renderPriorityLevel);
 
@@ -1936,6 +1970,10 @@ function commitRootImpl(root, renderPriorityLevel) {
       markLayoutEffectsStopped();
     }
 
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      rootCommittingMutationOrLayoutEffects = null;
+    }
+
     // Tell Scheduler to yield at the end of the frame, so the browser has an
     // opportunity to paint.
     requestPaint();
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b2476dad5b61..609bd8016b9c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -23,6 +23,7 @@ import {
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
+  enableProfilerNestedUpdateScheduledHook,
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
@@ -112,6 +113,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   ScopeComponent,
+  Profiler,
 } from './ReactWorkTags';
 import {LegacyRoot} from './ReactRootTags';
 import {
@@ -329,6 +331,10 @@ let hasUncaughtError = false;
 let firstUncaughtError = null;
 let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;
 
+// Only used when enableProfilerNestedUpdateScheduledHook is true;
+// to track which root is currently committing layout effects.
+let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
+
 let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
@@ -533,6 +539,30 @@ export function scheduleUpdateOnFiber(
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
+  if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+    if (
+      executionContext === CommitContext &&
+      root === rootCommittingMutationOrLayoutEffects
+    ) {
+      if (fiber.mode & ProfileMode) {
+        let current = fiber;
+        while (current !== null) {
+          if (current.tag === Profiler) {
+            const {onNestedUpdateScheduled} = current.memoizedProps;
+            if (typeof onNestedUpdateScheduled === 'function') {
+              if (enableSchedulerTracing) {
+                onNestedUpdateScheduled(root.memoizedInteractions);
+              } else {
+                onNestedUpdateScheduled();
+              }
+            }
+          }
+          current = current.return;
+        }
+      }
+    }
+  }
+
   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. Unless the
@@ -2047,6 +2077,12 @@ function commitRootImpl(root, renderPriorityLevel) {
       recordCommitTime();
     }
 
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      // Track the root here, rather than in commitLayoutEffects(), because of ref setters.
+      // Updates scheduled during ref detachment should also be flagged.
+      rootCommittingMutationOrLayoutEffects = root;
+    }
+
     // The next phase is the mutation phase, where we mutate the host tree.
     nextEffect = firstEffect;
     do {
@@ -2112,6 +2148,10 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     nextEffect = null;
 
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      rootCommittingMutationOrLayoutEffects = null;
+    }
+
     // Tell Scheduler to yield at the end of the frame, so the browser has an
     // opportunity to paint.
     requestPaint();
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index d9c70ae73b75..92b30d9280fa 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -29,6 +29,7 @@ function loadModules({
   enableProfilerTimer = true,
   enableProfilerCommitHooks = true,
   enableProfilerNestedUpdatePhase = true,
+  enableProfilerNestedUpdateScheduledHook = false,
   enableSchedulerTracing = true,
   replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
   useNoopRenderer = false,
@@ -38,6 +39,7 @@ function loadModules({
   ReactFeatureFlags.enableProfilerTimer = enableProfilerTimer;
   ReactFeatureFlags.enableProfilerCommitHooks = enableProfilerCommitHooks;
   ReactFeatureFlags.enableProfilerNestedUpdatePhase = enableProfilerNestedUpdatePhase;
+  ReactFeatureFlags.enableProfilerNestedUpdateScheduledHook = enableProfilerNestedUpdateScheduledHook;
   ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
   ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = replayFailedUnitOfWorkWithInvokeGuardedCallback;
 
@@ -2438,6 +2440,528 @@ describe('Profiler', () => {
         });
       }
     });
+
+    describe(`onNestedUpdateScheduled enableSchedulerTracing:${
+      enableSchedulerTracing ? 'enabled' : 'disabled'
+    }`, () => {
+      beforeEach(() => {
+        jest.resetModules();
+
+        loadModules({
+          enableProfilerNestedUpdateScheduledHook: true,
+          enableSchedulerTracing,
+          useNoopRenderer: true,
+        });
+      });
+
+      it('is not called when the legacy render API is used to schedule an update', () => {
+        const onNestedUpdateScheduled = jest.fn();
+
+        ReactNoop.renderLegacySyncRoot(
+          <React.Profiler
+            id="test"
+            onNestedUpdateScheduled={onNestedUpdateScheduled}>
+            <div>initial</div>
+          </React.Profiler>,
+        );
+
+        ReactNoop.renderLegacySyncRoot(
+          <React.Profiler
+            id="test"
+            onNestedUpdateScheduled={onNestedUpdateScheduled}>
+            <div>update</div>
+          </React.Profiler>,
+        );
+
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+      });
+
+      it('is not called when the root API is used to schedule an update', () => {
+        const onNestedUpdateScheduled = jest.fn();
+
+        ReactNoop.render(
+          <React.Profiler
+            id="test"
+            onNestedUpdateScheduled={onNestedUpdateScheduled}>
+            <div>initial</div>
+          </React.Profiler>,
+        );
+
+        ReactNoop.render(
+          <React.Profiler
+            id="test"
+            onNestedUpdateScheduled={onNestedUpdateScheduled}>
+            <div>update</div>
+          </React.Profiler>,
+        );
+
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+      });
+
+      it('is called when a function component schedules an update during a layout effect', () => {
+        function Component() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useLayoutEffect(() => {
+            setDidMount(true);
+          }, []);
+          Scheduler.unstable_yieldValue(`Component:${didMount}`);
+          return didMount;
+        }
+
+        const interactionCreation = {
+          id: 0,
+          name: 'creation event',
+          timestamp: Scheduler.unstable_now(),
+        };
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        SchedulerTracing.unstable_trace(
+          interactionCreation.name,
+          Scheduler.unstable_now(),
+          () => {
+            ReactNoop.act(() => {
+              ReactNoop.render(
+                <React.Profiler
+                  id="test"
+                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
+                  <Component />
+                </React.Profiler>,
+              );
+            });
+          },
+        );
+
+        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        if (ReactFeatureFlags.enableSchedulerTracing) {
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+            interactionCreation,
+          ]);
+        }
+      });
+
+      it('bubbles up and calls all ancestor Profilers', () => {
+        function Component() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useLayoutEffect(() => {
+            setDidMount(true);
+          }, []);
+          Scheduler.unstable_yieldValue(`Component:${didMount}`);
+          return didMount;
+        }
+        const onNestedUpdateScheduledOne = jest.fn();
+        const onNestedUpdateScheduledTwo = jest.fn();
+        const onNestedUpdateScheduledThree = jest.fn();
+
+        ReactNoop.act(() => {
+          ReactNoop.render(
+            <React.Profiler
+              id="one"
+              onNestedUpdateScheduled={onNestedUpdateScheduledOne}>
+              <React.Profiler
+                id="two"
+                onNestedUpdateScheduled={onNestedUpdateScheduledTwo}>
+                <>
+                  <Component />
+                  <React.Profiler
+                    id="three"
+                    onNestedUpdateScheduled={onNestedUpdateScheduledThree}
+                  />
+                </>
+              </React.Profiler>
+            </React.Profiler>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+        expect(onNestedUpdateScheduledOne).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduledTwo).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduledThree).not.toHaveBeenCalled();
+      });
+
+      it('is not called when an update is scheduled for another doort during a layout effect', () => {
+        const setStateRef = React.createRef(null);
+
+        function ComponentRootOne() {
+          const [state, setState] = React.useState(false);
+          setStateRef.current = setState;
+          Scheduler.unstable_yieldValue(`ComponentRootOne:${state}`);
+          return state;
+        }
+
+        function ComponentRootTwo() {
+          React.useLayoutEffect(() => {
+            setStateRef.current(true);
+          }, []);
+          Scheduler.unstable_yieldValue('ComponentRootTwo');
+          return null;
+        }
+
+        const interactionCreation = {
+          id: 0,
+          name: 'creation event',
+          timestamp: Scheduler.unstable_now(),
+        };
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        SchedulerTracing.unstable_trace(
+          interactionCreation.name,
+          Scheduler.unstable_now(),
+          () => {
+            ReactNoop.act(() => {
+              ReactNoop.renderToRootWithID(
+                <React.Profiler
+                  id="test"
+                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
+                  <ComponentRootOne />
+                </React.Profiler>,
+                1,
+              );
+
+              ReactNoop.renderToRootWithID(
+                <React.Profiler
+                  id="test"
+                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
+                  <ComponentRootTwo />
+                </React.Profiler>,
+                2,
+              );
+            });
+          },
+        );
+
+        expect(Scheduler).toHaveYielded([
+          'ComponentRootOne:false',
+          'ComponentRootTwo',
+          'ComponentRootOne:true',
+        ]);
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+      });
+
+      it('is not called when a function component schedules an update during a passive effect', () => {
+        function Component() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useEffect(() => {
+            setDidMount(true);
+          }, []);
+          Scheduler.unstable_yieldValue(`Component:${didMount}`);
+          return didMount;
+        }
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        ReactNoop.act(() => {
+          ReactNoop.render(
+            <React.Profiler
+              id="test"
+              onNestedUpdateScheduled={onNestedUpdateScheduled}>
+              <Component />
+            </React.Profiler>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+      });
+
+      it('is not called when a function component schedules an update outside of render', () => {
+        const updateFnRef = React.createRef(null);
+
+        function Component() {
+          const [state, setState] = React.useState(false);
+          updateFnRef.current = () => setState(true);
+          Scheduler.unstable_yieldValue(`Component:${state}`);
+          return state;
+        }
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        ReactNoop.act(() => {
+          ReactNoop.render(
+            <React.Profiler
+              id="test"
+              onNestedUpdateScheduled={onNestedUpdateScheduled}>
+              <Component />
+            </React.Profiler>,
+          );
+        });
+        expect(Scheduler).toHaveYielded(['Component:false']);
+
+        ReactNoop.act(() => {
+          updateFnRef.current();
+        });
+        expect(Scheduler).toHaveYielded(['Component:true']);
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+      });
+
+      it('it is not called when a component schedules an update during render', () => {
+        function Component() {
+          const [state, setState] = React.useState(false);
+          if (state === false) {
+            setState(true);
+          }
+          Scheduler.unstable_yieldValue(`Component:${state}`);
+          return state;
+        }
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        ReactNoop.act(() => {
+          ReactNoop.render(
+            <React.Profiler
+              id="test"
+              onNestedUpdateScheduled={onNestedUpdateScheduled}>
+              <Component />
+            </React.Profiler>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+      });
+
+      it('it is called when a component schedules an update from a ref callback', () => {
+        function Component({mountChild}) {
+          const [refAttached, setRefAttached] = React.useState(false);
+          const [refDetached, setRefDetached] = React.useState(false);
+          const refSetter = React.useCallback(ref => {
+            if (ref !== null) {
+              setRefAttached(true);
+            } else {
+              setRefDetached(true);
+            }
+          }, []);
+          Scheduler.unstable_yieldValue(
+            `Component:${refAttached}:${refDetached}`,
+          );
+          return mountChild ? <div ref={refSetter} /> : null;
+        }
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        const interactionCreation = {
+          id: 0,
+          name: 'creation event',
+          timestamp: Scheduler.unstable_now(),
+        };
+
+        SchedulerTracing.unstable_trace(
+          interactionCreation.name,
+          Scheduler.unstable_now(),
+          () => {
+            ReactNoop.act(() => {
+              ReactNoop.render(
+                <React.Profiler
+                  id="test"
+                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
+                  <Component mountChild={true} />
+                </React.Profiler>,
+              );
+            });
+          },
+        );
+
+        expect(Scheduler).toHaveYielded([
+          'Component:false:false',
+          'Component:true:false',
+        ]);
+        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        if (ReactFeatureFlags.enableSchedulerTracing) {
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+            interactionCreation,
+          ]);
+        }
+
+        const interactionUpdate = {
+          id: 1,
+          name: 'update event',
+          timestamp: Scheduler.unstable_now(),
+        };
+
+        SchedulerTracing.unstable_trace(
+          interactionUpdate.name,
+          Scheduler.unstable_now(),
+          () => {
+            ReactNoop.act(() => {
+              ReactNoop.render(
+                <React.Profiler
+                  id="test"
+                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
+                  <Component mountChild={false} />
+                </React.Profiler>,
+              );
+            });
+          },
+        );
+
+        expect(Scheduler).toHaveYielded([
+          'Component:true:false',
+          'Component:true:true',
+        ]);
+        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(2);
+        if (ReactFeatureFlags.enableSchedulerTracing) {
+          expect(onNestedUpdateScheduled.mock.calls[1][0]).toMatchInteractions([
+            interactionUpdate,
+          ]);
+        }
+      });
+
+      it('is called when a class component schedules an update from the componentDidMount lifecycles', () => {
+        class Component extends React.Component {
+          state = {
+            value: false,
+          };
+          componentDidMount() {
+            this.setState({value: true});
+          }
+          render() {
+            const {value} = this.state;
+            Scheduler.unstable_yieldValue(`Component:${value}`);
+            return value;
+          }
+        }
+
+        const interactionCreation = {
+          id: 0,
+          name: 'creation event',
+          timestamp: Scheduler.unstable_now(),
+        };
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        SchedulerTracing.unstable_trace(
+          interactionCreation.name,
+          Scheduler.unstable_now(),
+          () => {
+            ReactNoop.act(() => {
+              ReactNoop.render(
+                <React.Profiler
+                  id="test"
+                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
+                  <Component />
+                </React.Profiler>,
+              );
+            });
+          },
+        );
+
+        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        if (ReactFeatureFlags.enableSchedulerTracing) {
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+            interactionCreation,
+          ]);
+        }
+      });
+
+      it('is called when a class component schedules an update from the componentDidUpdate lifecycles', () => {
+        class Component extends React.Component {
+          state = {
+            nestedUpdateSheduled: false,
+          };
+          componentDidUpdate(prevProps, prevState) {
+            if (
+              this.props.scheduleNestedUpdate &&
+              !this.state.nestedUpdateSheduled
+            ) {
+              this.setState({nestedUpdateSheduled: true});
+            }
+          }
+          render() {
+            const {scheduleNestedUpdate} = this.props;
+            const {nestedUpdateSheduled} = this.state;
+            Scheduler.unstable_yieldValue(
+              `Component:${scheduleNestedUpdate}:${nestedUpdateSheduled}`,
+            );
+            return nestedUpdateSheduled;
+          }
+        }
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        ReactNoop.act(() => {
+          ReactNoop.render(
+            <React.Profiler
+              id="test"
+              onNestedUpdateScheduled={onNestedUpdateScheduled}>
+              <Component scheduleNestedUpdate={false} />
+            </React.Profiler>,
+          );
+        });
+        expect(Scheduler).toHaveYielded(['Component:false:false']);
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+
+        const interactionCreation = {
+          id: 0,
+          name: 'creation event',
+          timestamp: Scheduler.unstable_now(),
+        };
+
+        SchedulerTracing.unstable_trace(
+          interactionCreation.name,
+          Scheduler.unstable_now(),
+          () => {
+            ReactNoop.act(() => {
+              ReactNoop.render(
+                <React.Profiler
+                  id="test"
+                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
+                  <Component scheduleNestedUpdate={true} />
+                </React.Profiler>,
+              );
+            });
+          },
+        );
+
+        expect(Scheduler).toHaveYielded([
+          'Component:true:false',
+          'Component:true:true',
+        ]);
+        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        if (ReactFeatureFlags.enableSchedulerTracing) {
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+            interactionCreation,
+          ]);
+        }
+      });
+
+      it('is not called when a class component schedules an update outside of render', () => {
+        const updateFnRef = React.createRef(null);
+
+        class Component extends React.Component {
+          state = {
+            value: false,
+          };
+          render() {
+            const {value} = this.state;
+            updateFnRef.current = () => this.setState({value: true});
+            Scheduler.unstable_yieldValue(`Component:${value}`);
+            return value;
+          }
+        }
+
+        const onNestedUpdateScheduled = jest.fn();
+
+        ReactNoop.act(() => {
+          ReactNoop.render(
+            <React.Profiler
+              id="test"
+              onNestedUpdateScheduled={onNestedUpdateScheduled}>
+              <Component />
+            </React.Profiler>,
+          );
+        });
+        expect(Scheduler).toHaveYielded(['Component:false']);
+
+        ReactNoop.act(() => {
+          updateFnRef.current();
+        });
+        expect(Scheduler).toHaveYielded(['Component:true']);
+        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+      });
+    });
   });
 
   describe('interaction tracing', () => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index b796e5b1ffac..c2c4ada6260d 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -39,6 +39,10 @@ export const enableProfilerCommitHooks = false;
 // Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
 export const enableProfilerNestedUpdatePhase = false;
 
+// Profiler API accepts a function to be called when a nested update is scheduled.
+// This callback accepts the component type (class instance or function) the update is scheduled for.
+export const enableProfilerNestedUpdateScheduledHook = false;
+
 // Trace which interactions trigger each commit.
 export const enableSchedulerTracing = __PROFILE__;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 5a5bc9ea85f8..461267619d82 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -16,6 +16,7 @@ export const enableSchedulingProfiler = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 82c57055f1c0..d3b55536eaef 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -18,6 +18,7 @@ export const warnAboutDeprecatedLifecycles = true;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 6a572127e5ea..b20b1b1da03e 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -18,6 +18,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 2fae5f7e2bda..b0da73bc65fb 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -18,6 +18,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index d254b9274ad3..cfa4816166c0 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -18,6 +18,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 7b470ba5bf67..757e99c6e1dc 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -18,6 +18,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index a0bc67a833bd..1de76e52c3bb 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -18,6 +18,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = false;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index fee39cd71aa4..95ba1859e150 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -48,3 +48,5 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = __VARIANT__;
+
+export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 2e8d9d39cfa4..947b05ab8530 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -36,6 +36,8 @@ export const {
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
+export const enableProfilerNestedUpdateScheduledHook =
+  __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler = __PROFILE__;

From 760d9ab57a0fbffe8caf1d15c40efaa0a3592733 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Nov 2020 09:47:04 -0500
Subject: [PATCH 0077/1603] Scheduling profiler tweaks (#20215)

---
 .../src/SchedulingProfiler.js                 |  94 ++++++++-----
 .../SchedulingProfiler-test.internal.js       | 127 +++++++++++-------
 .../forks/ReactFeatureFlags.www-dynamic.js    |   2 +
 .../shared/forks/ReactFeatureFlags.www.js     |   3 +-
 4 files changed, 149 insertions(+), 77 deletions(-)

diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 4c2a18b780e6..1c69edebcbb7 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -20,31 +20,63 @@ import getComponentName from 'shared/getComponentName';
  * require.
  */
 const supportsUserTiming =
-  typeof performance !== 'undefined' && typeof performance.mark === 'function';
+  typeof performance !== 'undefined' &&
+  typeof performance.mark === 'function' &&
+  typeof performance.clearMarks === 'function';
+
+let supportsUserTimingV3 = false;
+if (enableSchedulingProfiler) {
+  if (supportsUserTiming) {
+    const CHECK_V3_MARK = '__v3';
+    const markOptions = {};
+    // $FlowFixMe: Ignore Flow complaining about needing a value
+    Object.defineProperty(markOptions, 'startTime', {
+      get: function() {
+        supportsUserTimingV3 = true;
+        return 0;
+      },
+      set: function() {},
+    });
+
+    try {
+      // $FlowFixMe: Flow expects the User Timing level 2 API.
+      performance.mark(CHECK_V3_MARK, markOptions);
+    } catch (error) {
+      // Ignore
+    } finally {
+      performance.clearMarks(CHECK_V3_MARK);
+    }
+  }
+}
 
 function formatLanes(laneOrLanes: Lane | Lanes): string {
   return ((laneOrLanes: any): number).toString();
 }
 
+function markAndClear(name) {
+  performance.mark(name);
+  performance.clearMarks(name);
+}
+
 // Create a mark on React initialization
 if (enableSchedulingProfiler) {
-  if (supportsUserTiming) {
-    performance.mark(`--react-init-${ReactVersion}`);
+  if (supportsUserTimingV3) {
+    markAndClear(`--react-init-${ReactVersion}`);
   }
 }
 
 export function markCommitStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--commit-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--commit-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markCommitStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--commit-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--commit-stop');
     }
   }
 }
@@ -63,14 +95,14 @@ function getWakeableID(wakeable: Wakeable): number {
 
 export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
+    if (supportsUserTimingV3) {
       const id = getWakeableID(wakeable);
       const componentName = getComponentName(fiber.type) || 'Unknown';
       // TODO Add component stack id
-      performance.mark(`--suspense-suspend-${id}-${componentName}`);
+      markAndClear(`--suspense-suspend-${id}-${componentName}`);
       wakeable.then(
-        () => performance.mark(`--suspense-resolved-${id}-${componentName}`),
-        () => performance.mark(`--suspense-rejected-${id}-${componentName}`),
+        () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
+        () => markAndClear(`--suspense-rejected-${id}-${componentName}`),
       );
     }
   }
@@ -78,74 +110,74 @@ export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {
 
 export function markLayoutEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--layout-effects-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--layout-effects-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markLayoutEffectsStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--layout-effects-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--layout-effects-stop');
     }
   }
 }
 
 export function markPassiveEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--passive-effects-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--passive-effects-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markPassiveEffectsStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--passive-effects-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--passive-effects-stop');
     }
   }
 }
 
 export function markRenderStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--render-start-${formatLanes(lanes)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--render-start-${formatLanes(lanes)}`);
     }
   }
 }
 
 export function markRenderYielded(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--render-yield');
+    if (supportsUserTimingV3) {
+      markAndClear('--render-yield');
     }
   }
 }
 
 export function markRenderStopped(): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark('--render-stop');
+    if (supportsUserTimingV3) {
+      markAndClear('--render-stop');
     }
   }
 }
 
 export function markRenderScheduled(lane: Lane): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
-      performance.mark(`--schedule-render-${formatLanes(lane)}`);
+    if (supportsUserTimingV3) {
+      markAndClear(`--schedule-render-${formatLanes(lane)}`);
     }
   }
 }
 
 export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
+    if (supportsUserTimingV3) {
       const componentName = getComponentName(fiber.type) || 'Unknown';
       // TODO Add component stack id
-      performance.mark(
+      markAndClear(
         `--schedule-forced-update-${formatLanes(lane)}-${componentName}`,
       );
     }
@@ -154,10 +186,10 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
 
 export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
-    if (supportsUserTiming) {
+    if (supportsUserTimingV3) {
       const componentName = getComponentName(fiber.type) || 'Unknown';
       // TODO Add component stack id
-      performance.mark(
+      markAndClear(
         `--schedule-state-update-${formatLanes(lane)}-${componentName}`,
       );
     }
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 55f8d3617c0d..35c854e4b2e7 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -18,22 +18,56 @@ describe('SchedulingProfiler', () => {
   let ReactNoop;
   let Scheduler;
 
+  let clearedMarks;
+  let featureDetectionMarkName = null;
   let marks;
 
   function createUserTimingPolyfill() {
+    featureDetectionMarkName = null;
+
+    clearedMarks = [];
+    marks = [];
+
     // 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 {
-      mark(markName) {
+      clearMarks(markName) {
+        clearedMarks.push(markName);
+        marks = marks.filter(mark => mark !== markName);
+      },
+      mark(markName, markOptions) {
+        if (featureDetectionMarkName === null) {
+          featureDetectionMarkName = markName;
+        }
         marks.push(markName);
+        if (markOptions != null) {
+          // This is triggers the feature detection.
+          markOptions.startTime++;
+        }
       },
     };
   }
 
+  function clearPendingMarks() {
+    clearedMarks.splice(0);
+  }
+
+  function expectMarksToContain(expectedMarks) {
+    expect(clearedMarks).toContain(expectedMarks);
+  }
+
+  function expectMarksToEqual(expectedMarks) {
+    expect(
+      clearedMarks[0] === featureDetectionMarkName
+        ? clearedMarks.slice(1)
+        : clearedMarks,
+    ).toEqual(expectedMarks);
+  }
+
   beforeEach(() => {
     jest.resetModules();
+
     global.performance = createUserTimingPolyfill();
-    marks = [];
 
     React = require('react');
 
@@ -45,25 +79,28 @@ describe('SchedulingProfiler', () => {
   });
 
   afterEach(() => {
+    // Verify all logged marks also get cleared.
+    expect(marks).toHaveLength(0);
+
     delete global.performance;
   });
 
   // @gate !enableSchedulingProfiler
   it('should not mark if enableSchedulingProfiler is false', () => {
     ReactTestRenderer.create(<div />);
-    expect(marks).toEqual([]);
+    expectMarksToEqual([]);
   });
 
   // @gate enableSchedulingProfiler
   it('should log React version on initialization', () => {
-    expect(marks).toEqual([`--react-init-${ReactVersion}`]);
+    expectMarksToEqual([`--react-init-${ReactVersion}`]);
   });
 
   // @gate enableSchedulingProfiler
   it('should mark sync render without suspends or state updates', () => {
     ReactTestRenderer.create(<div />);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-1',
       '--render-start-1',
@@ -79,16 +116,16 @@ describe('SchedulingProfiler', () => {
   it('should mark concurrent render without suspends or state updates', () => {
     ReactTestRenderer.create(<div />, {unstable_isConcurrent: true});
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       '--render-start-512',
       '--render-stop',
       '--commit-start-512',
@@ -114,7 +151,7 @@ describe('SchedulingProfiler', () => {
     // Do one step of work.
     expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
       '--render-start-512',
@@ -135,7 +172,7 @@ describe('SchedulingProfiler', () => {
       </React.Suspense>,
     );
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-1',
       '--render-start-1',
@@ -147,10 +184,10 @@ describe('SchedulingProfiler', () => {
       '--commit-stop',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     await fakeSuspensePromise;
-    expect(marks).toEqual(['--suspense-resolved-0-Example']);
+    expectMarksToEqual(['--suspense-resolved-0-Example']);
   });
 
   // @gate enableSchedulingProfiler
@@ -166,7 +203,7 @@ describe('SchedulingProfiler', () => {
       </React.Suspense>,
     );
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-1',
       '--render-start-1',
@@ -178,10 +215,10 @@ describe('SchedulingProfiler', () => {
       '--commit-stop',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     await expect(fakeSuspensePromise).rejects.toThrow();
-    expect(marks).toEqual(['--suspense-rejected-0-Example']);
+    expectMarksToEqual(['--suspense-rejected-0-Example']);
   });
 
   // @gate enableSchedulingProfiler
@@ -198,16 +235,16 @@ describe('SchedulingProfiler', () => {
       {unstable_isConcurrent: true},
     );
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       '--render-start-512',
       '--suspense-suspend-0-Example',
       '--render-stop',
@@ -217,10 +254,10 @@ describe('SchedulingProfiler', () => {
       '--commit-stop',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     await fakeSuspensePromise;
-    expect(marks).toEqual(['--suspense-resolved-0-Example']);
+    expectMarksToEqual(['--suspense-resolved-0-Example']);
   });
 
   // @gate enableSchedulingProfiler
@@ -237,16 +274,16 @@ describe('SchedulingProfiler', () => {
       {unstable_isConcurrent: true},
     );
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       '--render-start-512',
       '--suspense-suspend-0-Example',
       '--render-stop',
@@ -256,10 +293,10 @@ describe('SchedulingProfiler', () => {
       '--commit-stop',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     await expect(fakeSuspensePromise).rejects.toThrow();
-    expect(marks).toEqual(['--suspense-rejected-0-Example']);
+    expectMarksToEqual(['--suspense-rejected-0-Example']);
   });
 
   // @gate enableSchedulingProfiler
@@ -276,16 +313,16 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       '--render-start-512',
       '--render-stop',
       '--commit-start-512',
@@ -313,16 +350,16 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       '--render-start-512',
       '--render-stop',
       '--commit-start-512',
@@ -351,12 +388,12 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(() => {
       expect(Scheduler).toFlushUntilNextPaint([]);
@@ -364,8 +401,8 @@ describe('SchedulingProfiler', () => {
 
     gate(({old}) =>
       old
-        ? expect(marks).toContain('--schedule-state-update-1024-Example')
-        : expect(marks).toContain('--schedule-state-update-512-Example'),
+        ? expectMarksToContain('--schedule-state-update-1024-Example')
+        : expectMarksToContain('--schedule-state-update-512-Example'),
     );
   });
 
@@ -383,12 +420,12 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(() => {
       expect(Scheduler).toFlushUntilNextPaint([]);
@@ -396,8 +433,8 @@ describe('SchedulingProfiler', () => {
 
     gate(({old}) =>
       old
-        ? expect(marks).toContain('--schedule-forced-update-1024-Example')
-        : expect(marks).toContain('--schedule-forced-update-512-Example'),
+        ? expectMarksToContain('--schedule-forced-update-1024-Example')
+        : expectMarksToContain('--schedule-forced-update-512-Example'),
     );
   });
 
@@ -413,16 +450,16 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
     ]);
 
-    marks.splice(0);
+    clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       '--render-start-512',
       '--render-stop',
       '--commit-start-512',
@@ -451,7 +488,7 @@ describe('SchedulingProfiler', () => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
-    expect(marks).toEqual([
+    expectMarksToEqual([
       `--react-init-${ReactVersion}`,
       '--schedule-render-512',
       '--render-start-512',
@@ -486,8 +523,8 @@ describe('SchedulingProfiler', () => {
 
     gate(({old}) =>
       old
-        ? expect(marks).toContain('--schedule-state-update-1024-Example')
-        : expect(marks).toContain('--schedule-state-update-512-Example'),
+        ? expectMarksToContain('--schedule-state-update-1024-Example')
+        : expectMarksToContain('--schedule-state-update-512-Example'),
     );
   });
 });
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 95ba1859e150..1321bf70bab2 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,6 +25,8 @@ export const decoupleUpdatePriorityFromScheduler = __VARIANT__;
 // NOTE: This feature will only work in DEV mode; all callsights are wrapped with __DEV__.
 export const enableDebugTracing = __EXPERIMENTAL__;
 
+export const enableSchedulingProfiler = __VARIANT__;
+
 // This only has an effect in the new reconciler. But also, the new reconciler
 // is only enabled when __VARIANT__ is true. So this is set to the opposite of
 // __VARIANT__ so that it's `false` when running against the new reconciler.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 947b05ab8530..70d68cef060b 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -40,7 +40,8 @@ export const enableProfilerNestedUpdateScheduledHook =
   __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
-export const enableSchedulingProfiler = __PROFILE__;
+export const enableSchedulingProfiler =
+  __PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler;
 
 // Note: we'll want to remove this when we to userland implementation.
 // For now, we'll turn it on for everyone because it's *already* on for everyone in practice.

From e41fd1fc0605dde41cff53e01039633c8e852b6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 12 Nov 2020 11:11:05 -0500
Subject: [PATCH 0078/1603] Support ESM module loaders in Flight fixture
 (#20229)

This lets the Flight fixture run as "type": "module" or "commonjs".

Experimental loaders can be used similar to require.extensions to do the
transpilation and replacement of .client.js references.
---
 fixtures/flight/config/package.json       |  3 ++
 fixtures/flight/package.json              |  4 ++-
 fixtures/flight/scripts/package.json      |  3 ++
 fixtures/flight/server/handler.server.mjs | 27 +++++++++++++++
 fixtures/flight/server/index.js           |  3 +-
 fixtures/flight/server/loader.mjs         | 42 +++++++++++++++++++++++
 fixtures/flight/server/package.json       |  3 ++
 fixtures/flight/src/App.server.js         |  6 ++--
 fixtures/flight/src/Counter.client.js     |  2 +-
 fixtures/flight/src/ShowMore.client.js    |  2 +-
 fixtures/flight/yarn.lock                 | 12 +++++++
 package.json                              |  1 +
 yarn.lock                                 |  7 ++++
 13 files changed, 108 insertions(+), 7 deletions(-)
 create mode 100644 fixtures/flight/config/package.json
 create mode 100644 fixtures/flight/scripts/package.json
 create mode 100644 fixtures/flight/server/handler.server.mjs
 create mode 100644 fixtures/flight/server/loader.mjs
 create mode 100644 fixtures/flight/server/package.json

diff --git a/fixtures/flight/config/package.json b/fixtures/flight/config/package.json
new file mode 100644
index 000000000000..5bbefffbabee
--- /dev/null
+++ b/fixtures/flight/config/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
index 65d2556d635a..92c41ebfe47a 100644
--- a/fixtures/flight/package.json
+++ b/fixtures/flight/package.json
@@ -1,9 +1,11 @@
 {
   "name": "flight",
+  "type": "module",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@babel/core": "7.6.0",
+    "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/register": "^7.7.0",
     "@svgr/webpack": "4.3.2",
     "@typescript-eslint/eslint-plugin": "^2.2.0",
@@ -65,7 +67,7 @@
     "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
     "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
     "start:client": "node scripts/start.js",
-    "start:server": "NODE_ENV=development node server",
+    "start:server": "NODE_ENV=development node --experimental-loader ./server/loader.mjs server",
     "start:prod": "node scripts/build.js && NODE_ENV=production node server",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
diff --git a/fixtures/flight/scripts/package.json b/fixtures/flight/scripts/package.json
new file mode 100644
index 000000000000..5bbefffbabee
--- /dev/null
+++ b/fixtures/flight/scripts/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/fixtures/flight/server/handler.server.mjs b/fixtures/flight/server/handler.server.mjs
new file mode 100644
index 000000000000..0d21c80eebfd
--- /dev/null
+++ b/fixtures/flight/server/handler.server.mjs
@@ -0,0 +1,27 @@
+import {pipeToNodeWritable} from 'react-transport-dom-webpack/server.js';
+import * as React from 'react';
+import App from '../src/App.server.js';
+
+import {URL} from 'url';
+
+const rootPath = import.meta.url;
+function resolve(relative) {
+  return new URL(relative, rootPath).href;
+}
+
+export default function(req, res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  pipeToNodeWritable(<App />, res, {
+    // TODO: Read from a map on the disk.
+    [resolve('../src/Counter.client.js')]: {
+      id: './src/Counter.client.js',
+      chunks: ['1'],
+      name: 'default',
+    },
+    [resolve('../src/ShowMore.client.js')]: {
+      id: './src/ShowMore.client.js',
+      chunks: ['2'],
+      name: 'default',
+    },
+  });
+};
diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js
index 06c245b4120a..ffa1a8628b8e 100644
--- a/fixtures/flight/server/index.js
+++ b/fixtures/flight/server/index.js
@@ -25,7 +25,8 @@ app.get('/', function(req, res) {
       delete require.cache[key];
     }
   }
-  require('./handler.server')(req, res);
+  import('./handler.server.mjs').then(m => m.default(req, res));
+  //   require('./handler.server.js')(req, res);
 });
 
 app.listen(3001, () => {
diff --git a/fixtures/flight/server/loader.mjs b/fixtures/flight/server/loader.mjs
new file mode 100644
index 000000000000..f2d109ce8179
--- /dev/null
+++ b/fixtures/flight/server/loader.mjs
@@ -0,0 +1,42 @@
+import babel from '@babel/core';
+
+const options = {
+  babelrc: false,
+  ignore: [/\/(build|node_modules)\//],
+  plugins: [
+    '@babel/plugin-syntax-import-meta',
+    '@babel/plugin-transform-react-jsx',
+  ],
+};
+
+const optionsCommonJS = {
+  ignore: [/\/(build|node_modules)\//],
+  presets: ['react-app'],
+  plugins: ['@babel/transform-modules-commonjs'],
+};
+
+export async function transformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module' || format === 'commonjs') {
+    const opt = Object.assign(
+      {filename: context.url},
+      format === 'commonjs' ? optionsCommonJS : options
+    );
+    const {code} = await babel.transformAsync(source, opt);
+    return {source: code};
+  }
+  return defaultTransformSource(source, context);
+}
+
+export async function getSource(url, context, defaultGetSource) {
+  if (url.endsWith('.client.js')) {
+    const name = url;
+    return {
+      source:
+        "export default { $$typeof: Symbol.for('react.module.reference'), name: " +
+        JSON.stringify(name) +
+        '}',
+    };
+  }
+  return defaultGetSource(url, context, defaultGetSource);
+}
diff --git a/fixtures/flight/server/package.json b/fixtures/flight/server/package.json
new file mode 100644
index 000000000000..5bbefffbabee
--- /dev/null
+++ b/fixtures/flight/server/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}
diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.server.js
index bf3b20fa32a7..54a644dc48d4 100644
--- a/fixtures/flight/src/App.server.js
+++ b/fixtures/flight/src/App.server.js
@@ -1,10 +1,10 @@
 import * as React from 'react';
 
-import Container from './Container';
+import Container from './Container.js';
 
-import Counter from './Counter.client';
+import Counter from './Counter.client.js';
 
-import ShowMore from './ShowMore.client';
+import ShowMore from './ShowMore.client.js';
 
 export default function App() {
   return (
diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.client.js
index 892af50df69a..00a1f2cbe440 100644
--- a/fixtures/flight/src/Counter.client.js
+++ b/fixtures/flight/src/Counter.client.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Container from './Container';
+import Container from './Container.js';
 
 export default function Counter() {
   const [count, setCount] = React.useState(0);
diff --git a/fixtures/flight/src/ShowMore.client.js b/fixtures/flight/src/ShowMore.client.js
index d8ff151725e8..86d01baa7984 100644
--- a/fixtures/flight/src/ShowMore.client.js
+++ b/fixtures/flight/src/ShowMore.client.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import Container from './Container';
+import Container from './Container.js';
 
 export default function ShowMore({children}) {
   const [show, setShow] = React.useState(false);
diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock
index faf12e3ff847..ad74759fddff 100644
--- a/fixtures/flight/yarn.lock
+++ b/fixtures/flight/yarn.lock
@@ -252,6 +252,11 @@
   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":
+  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.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27"
@@ -445,6 +450,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@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.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
diff --git a/package.json b/package.json
index a9feab2a2c98..788479a9df8f 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@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.10.4",
     "@babel/plugin-transform-arrow-functions": "^7.10.4",
     "@babel/plugin-transform-async-to-generator": "^7.10.4",
diff --git a/yarn.lock b/yarn.lock
index fb413bf61246..d44e85f4e47d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -739,6 +739,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@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.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz#01ca21b668cd8218c9e640cb6dd88c5412b2c96a"

From 1b96ee444e544cc4797bbbd8dee249ff02d62279 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 12 Nov 2020 12:21:56 -0600
Subject: [PATCH 0079/1603] Remove noinline directives from new commit phase
 (#20241)

My theory for too much inlining contributing to overall stack size is
likely flawed, because Closure reuses variables within a function to
optimize registers.

Even if my theory were correct, the impact would be minimal anyway
because the recursive implementation of the commit phase traversals is
behind a disabled feature flag.

Going to revert this. We can maybe test the impact once we land the
commit phase changes. In the meantime, I'd prefer to eliminate this
delta from the new fork.
---
 .../src/ReactFiberCommitWork.new.js                 | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e45db46500fa..8f268e9261aa 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -209,7 +209,6 @@ function safelyCallComponentWillUnmount(current, instance) {
   }
 }
 
-/** @noinline */
 function safelyDetachRef(current: Fiber) {
   const ref = current.ref;
   if (ref !== null) {
@@ -273,7 +272,6 @@ export function safelyCallDestroy(current: Fiber, destroy: () => void) {
   }
 }
 
-/** @noinline */
 function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
@@ -294,7 +292,6 @@ function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
   }
 }
 
-/** @noinline */
 function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
@@ -506,7 +503,6 @@ function iterativelyCommitBeforeMutationEffects_complete() {
   }
 }
 
-/** @noinline */
 function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
   const current = finishedWork.alternate;
   const flags = finishedWork.flags;
@@ -621,7 +617,6 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
   }
 }
 
-/** @noinline */
 function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {
   for (let i = 0; i < deletions.length; i++) {
     const fiber = deletions[i];
@@ -763,7 +758,6 @@ function iterativelyCommitMutationEffects_complete(
   }
 }
 
-/** @noinline */
 function commitMutationEffectsOnFiber(
   fiber: Fiber,
   root: FiberRoot,
@@ -834,7 +828,6 @@ function commitMutationEffectsOnFiber(
   }
 }
 
-/** @noinline */
 function commitMutationEffectsDeletions(
   deletions: Array<Fiber>,
   root: FiberRoot,
@@ -1320,7 +1313,6 @@ function commitLayoutEffectsOnFiber(
   }
 }
 
-/** @noinline */
 function commitLayoutEffectsForProfiler(
   finishedWork: Fiber,
   finishedRoot: FiberRoot,
@@ -1393,7 +1385,6 @@ function commitLayoutEffectsForProfiler(
   }
 }
 
-/** @noinline */
 function commitLayoutEffectsForClassComponent(finishedWork: Fiber) {
   const instance = finishedWork.stateNode;
   const current = finishedWork.alternate;
@@ -1542,7 +1533,6 @@ function commitLayoutEffectsForClassComponent(finishedWork: Fiber) {
   }
 }
 
-/** @noinline */
 function commitLayoutEffectsForHostRoot(finishedWork: Fiber) {
   // TODO: I think this is now always non-null by the time it reaches the
   // commit phase. Consider removing the type check.
@@ -1563,7 +1553,6 @@ function commitLayoutEffectsForHostRoot(finishedWork: Fiber) {
   }
 }
 
-/** @noinline */
 function commitLayoutEffectsForHostComponent(finishedWork: Fiber) {
   const instance: Instance = finishedWork.stateNode;
   const current = finishedWork.alternate;
@@ -1579,7 +1568,6 @@ function commitLayoutEffectsForHostComponent(finishedWork: Fiber) {
   }
 }
 
-/** @noinline */
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
@@ -2866,7 +2854,6 @@ function commitSuspenseComponent(finishedWork: Fiber) {
   }
 }
 
-/** @noinline */
 function commitSuspenseHydrationCallbacks(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,

From 504222dcd21c7ac43eb78df11226bab47ec03bb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 13 Nov 2020 08:57:45 -0500
Subject: [PATCH 0080/1603] Add Node ESM build option (#20243)

This allows exporting ESM modules for the Webpack plugin. This is necessary
for making a resolver plugin. We could probably make the whole plugin
use ESM instead of CJS ES2015.
---
 scripts/rollup/build.js                 |  6 +++
 scripts/rollup/bundles.js               |  4 ++
 scripts/rollup/packaging.js             |  3 ++
 scripts/rollup/validate/eslintrc.esm.js | 60 +++++++++++++++++++++++++
 scripts/rollup/validate/index.js        |  4 ++
 scripts/rollup/wrappers.js              | 12 +++++
 6 files changed, 89 insertions(+)
 create mode 100644 scripts/rollup/validate/eslintrc.esm.js

diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 803847eccd7d..d25110eed892 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -46,6 +46,7 @@ process.on('unhandledRejection', err => {
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -259,12 +260,15 @@ function getFormat(bundleType) {
     case RN_FB_PROD:
     case RN_FB_PROFILING:
       return `cjs`;
+    case NODE_ESM:
+      return `es`;
   }
 }
 
 function isProductionBundleType(bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
+    case NODE_ESM:
     case UMD_DEV:
     case NODE_DEV:
     case FB_WWW_DEV:
@@ -290,6 +294,7 @@ function isProductionBundleType(bundleType) {
 function isProfilingBundleType(bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
+    case NODE_ESM:
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case NODE_DEV:
@@ -729,6 +734,7 @@ async function buildEverything() {
   for (const bundle of Bundles.bundles) {
     bundles.push(
       [bundle, NODE_ES2015],
+      [bundle, NODE_ESM],
       [bundle, UMD_DEV],
       [bundle, UMD_PROD],
       [bundle, UMD_PROFILING],
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 51d5c495a23c..6a04d6aa4b06 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -9,6 +9,7 @@ const __EXPERIMENTAL__ =
 
 const bundleTypes = {
   NODE_ES2015: 'NODE_ES2015',
+  NODE_ESM: 'NODE_ESM',
   UMD_DEV: 'UMD_DEV',
   UMD_PROD: 'UMD_PROD',
   UMD_PROFILING: 'UMD_PROFILING',
@@ -28,6 +29,7 @@ const bundleTypes = {
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -777,6 +779,8 @@ function getFilename(bundle, bundleType) {
   switch (bundleType) {
     case NODE_ES2015:
       return `${name}.js`;
+    case NODE_ESM:
+      return `${name}.js`;
     case UMD_DEV:
       return `${name}.development.js`;
     case UMD_PROD:
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index 2dd98b22a46f..1e7ae2b018db 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -17,6 +17,7 @@ const {
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -45,6 +46,8 @@ function getBundleOutputPath(bundleType, filename, packageName) {
   switch (bundleType) {
     case NODE_ES2015:
       return `build/node_modules/${packageName}/cjs/${filename}`;
+    case NODE_ESM:
+      return `build/node_modules/${packageName}/esm/${filename}`;
     case NODE_DEV:
     case NODE_PROD:
     case NODE_PROFILING:
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
new file mode 100644
index 000000000000..e7f8d1ca0955
--- /dev/null
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -0,0 +1,60 @@
+'use strict';
+
+module.exports = {
+  env: {
+    commonjs: true,
+    browser: true,
+  },
+  globals: {
+    // ES 6
+    Map: true,
+    Set: true,
+    Proxy: true,
+    Symbol: true,
+    WeakMap: true,
+    WeakSet: true,
+    Uint16Array: true,
+    Reflect: true,
+    // Vendor specific
+    MSApp: true,
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    // CommonJS / Node
+    process: true,
+    setImmediate: true,
+    Buffer: true,
+    // Trusted Types
+    trustedTypes: true,
+
+    // Scheduler profiling
+    SharedArrayBuffer: true,
+    Int32Array: true,
+    ArrayBuffer: true,
+
+    TaskController: true,
+
+    // Flight
+    Uint8Array: true,
+    Promise: true,
+
+    // Flight Webpack
+    __webpack_chunk_load__: true,
+    __webpack_require__: true,
+
+    // jest
+    expect: true,
+    jest: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2015,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-undef': 'error',
+    'no-shadow-restricted-names': 'error',
+  },
+
+  // These plugins aren't used, but eslint complains if an eslint-ignore comment
+  // references unused plugins. An alternate approach could be to strip
+  // eslint-ignore comments as part of the build.
+  plugins: ['jest', 'no-for-of-loops', 'react', 'react-internal'],
+};
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
index 2e3b0d60dfff..4d1c9210e231 100644
--- a/scripts/rollup/validate/index.js
+++ b/scripts/rollup/validate/index.js
@@ -9,6 +9,7 @@ const Packaging = require('../packaging');
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -34,6 +35,8 @@ function getFormat(bundleType) {
       return 'umd';
     case NODE_ES2015:
       return 'cjs2015';
+    case NODE_ESM:
+      return 'esm';
     case NODE_DEV:
     case NODE_PROD:
     case NODE_PROFILING:
@@ -64,6 +67,7 @@ function getESLintInstance(format) {
 const esLints = {
   cjs: getESLintInstance('cjs'),
   cjs2015: getESLintInstance('cjs2015'),
+  esm: getESLintInstance('esm'),
   rn: getESLintInstance('rn'),
   fb: getESLintInstance('fb'),
   umd: getESLintInstance('umd'),
diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index ed62f37211d0..836929dbec87 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -5,6 +5,7 @@ const reactVersion = require('../../package.json').version;
 
 const {
   NODE_ES2015,
+  NODE_ESM,
   UMD_DEV,
   UMD_PROD,
   UMD_PROFILING,
@@ -40,6 +41,17 @@ ${license}
 
 'use strict';
 
+${source}`;
+  },
+
+  /***************** NODE_ESM *****************/
+  [NODE_ESM](source, globalName, filename, moduleType) {
+    return `/** @license React v${reactVersion}
+ * ${filename}
+ *
+${license}
+ */
+
 ${source}`;
   },
 

From 2fbcc98066667848a0eb103e7f0afa540cbb475b Mon Sep 17 00:00:00 2001
From: Paul Doyle <37384169+ZoteTheMighty@users.noreply.github.com>
Date: Fri, 13 Nov 2020 06:18:24 -0800
Subject: [PATCH 0081/1603] Remove cycle between ReactFiberHooks and
 ReactInternalTypes (#20242)

Co-authored-by: Paul Doyle <pauldoyle22@gmail.com>
---
 .../src/ReactFiberHooks.new.js                 | 18 +-----------------
 .../src/ReactFiberHooks.old.js                 | 18 +-----------------
 .../react-reconciler/src/ReactInternalTypes.js | 18 +++++++++++++++++-
 3 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 231b33e69bcf..37b141839b97 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -13,7 +13,7 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
 } from 'shared/ReactTypes';
-import type {Fiber, Dispatcher} from './ReactInternalTypes';
+import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
@@ -118,22 +118,6 @@ type UpdateQueue<S, A> = {|
   lastRenderedState: S | null,
 |};
 
-export type HookType =
-  | 'useState'
-  | 'useReducer'
-  | 'useContext'
-  | 'useRef'
-  | 'useEffect'
-  | 'useLayoutEffect'
-  | 'useCallback'
-  | 'useMemo'
-  | 'useImperativeHandle'
-  | 'useDebugValue'
-  | 'useDeferredValue'
-  | 'useTransition'
-  | 'useMutableSource'
-  | 'useOpaqueIdentifier';
-
 let didWarnAboutMismatchedHooksForComponent;
 let didWarnAboutUseOpaqueIdentifier;
 if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index ccd69abae6aa..98e5d709cd28 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -13,7 +13,7 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
 } from 'shared/ReactTypes';
-import type {Fiber, Dispatcher} from './ReactInternalTypes';
+import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
@@ -109,22 +109,6 @@ type UpdateQueue<S, A> = {|
   lastRenderedState: S | null,
 |};
 
-export type HookType =
-  | 'useState'
-  | 'useReducer'
-  | 'useContext'
-  | 'useRef'
-  | 'useEffect'
-  | 'useLayoutEffect'
-  | 'useCallback'
-  | 'useMemo'
-  | 'useImperativeHandle'
-  | 'useDebugValue'
-  | 'useDeferredValue'
-  | 'useTransition'
-  | 'useMutableSource'
-  | 'useOpaqueIdentifier';
-
 let didWarnAboutMismatchedHooksForComponent;
 let didWarnAboutUseOpaqueIdentifier;
 if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index cebc8725ccb6..f63495cdce65 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -21,12 +21,28 @@ import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Flags} from './ReactFiberFlags';
 import type {Lane, LanePriority, Lanes, LaneMap} from './ReactFiberLane';
-import type {HookType} from './ReactFiberHooks.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 
+// Unwind Circular: moved from ReactFiberHooks.old
+export type HookType =
+  | 'useState'
+  | 'useReducer'
+  | 'useContext'
+  | 'useRef'
+  | 'useEffect'
+  | 'useLayoutEffect'
+  | 'useCallback'
+  | 'useMemo'
+  | 'useImperativeHandle'
+  | 'useDebugValue'
+  | 'useDeferredValue'
+  | 'useTransition'
+  | 'useMutableSource'
+  | 'useOpaqueIdentifier';
+
 export type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
 
 export type ContextDependency<T> = {

From 3ebf05183dfcb8eadfc41a9e19559d835fd9b77e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 13 Nov 2020 10:09:48 -0600
Subject: [PATCH 0082/1603] Add new effect fields to old fork, and vice versa
 (#20246)

* Add new effect fields to old fork

So that when comparing relative performance, we don't penalize the new
fork for using more memory.

* Add firstEffect, et al fields to new fork

We need to bisect the changes to the recent commit phase refactor. To
do this, we'll need to add back the effect list temporarily.

This only adds them to the Fiber type so that the memory is the same
as the old fork.
---
 .eslintrc.js                                    | 11 +++--------
 packages/react-reconciler/src/ReactFiber.new.js |  7 +++++++
 packages/react-reconciler/src/ReactFiber.old.js |  9 +++++++++
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 8f88ba30a07b..715c6eb96074 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,13 +116,8 @@ module.exports = {
     'react-internal/no-cross-fork-types': [
       ERROR,
       {
-        old: [
-          'firstEffect',
-          'nextEffect',
-          // Disabled because it's also used by the Hook type.
-          // 'lastEffect',
-        ],
-        new: ['subtreeFlags'],
+        old: [],
+        new: [],
       },
     ],
   },
@@ -190,7 +185,7 @@ module.exports = {
     {
       files: [
         'packages/react-native-renderer/**/*.js',
-        'packages/react-transport-native-relay/**/*.js'
+        'packages/react-transport-native-relay/**/*.js',
       ],
       globals: {
         nativeFabricUIManager: true,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 0dcff2f776fb..ccad1371d8f4 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -141,6 +141,10 @@ function FiberNode(
 
   // Effects
   this.flags = NoFlags;
+  this.nextEffect = null;
+
+  this.firstEffect = null;
+  this.lastEffect = null;
   this.subtreeFlags = NoFlags;
   this.deletions = null;
 
@@ -805,6 +809,9 @@ export function assignFiberPropertiesInDEV(
   target.dependencies = source.dependencies;
   target.mode = source.mode;
   target.flags = source.flags;
+  target.nextEffect = source.nextEffect;
+  target.firstEffect = source.firstEffect;
+  target.lastEffect = source.lastEffect;
   target.subtreeFlags = source.subtreeFlags;
   target.deletions = source.deletions;
   target.lanes = source.lanes;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 57c421e9076a..56ef2f5a528a 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -145,6 +145,8 @@ function FiberNode(
 
   this.firstEffect = null;
   this.lastEffect = null;
+  this.subtreeFlags = NoFlags;
+  this.deletions = null;
 
   this.lanes = NoLanes;
   this.childLanes = NoLanes;
@@ -284,6 +286,8 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     workInProgress.nextEffect = null;
     workInProgress.firstEffect = null;
     workInProgress.lastEffect = null;
+    workInProgress.subtreeFlags = NoFlags;
+    workInProgress.deletions = null;
 
     if (enableProfilerTimer) {
       // We intentionally reset, rather than copy, actualDuration & actualStartTime.
@@ -372,6 +376,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = renderLanes;
 
     workInProgress.child = null;
+    workInProgress.subtreeFlags = NoFlags;
     workInProgress.memoizedProps = null;
     workInProgress.memoizedState = null;
     workInProgress.updateQueue = null;
@@ -392,6 +397,8 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = current.lanes;
 
     workInProgress.child = current.child;
+    workInProgress.subtreeFlags = current.subtreeFlags;
+    workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
     workInProgress.memoizedState = current.memoizedState;
     workInProgress.updateQueue = current.updateQueue;
@@ -814,6 +821,8 @@ export function assignFiberPropertiesInDEV(
   target.nextEffect = source.nextEffect;
   target.firstEffect = source.firstEffect;
   target.lastEffect = source.lastEffect;
+  target.subtreeFlags = source.subtreeFlags;
+  target.deletions = source.deletions;
   target.lanes = source.lanes;
   target.childLanes = source.childLanes;
   target.alternate = source.alternate;

From b44e4b13a99901281ee02f66930fbc24181993d2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 13 Nov 2020 12:45:46 -0600
Subject: [PATCH 0083/1603] Check for deletions in `hadNoMutationsEffects`
 (#20252)

When detecting if a host tree was changed, we must check for deletions
in addition to mounts and updates.
---
 .../react-reconciler/src/ReactFiberCompleteWork.new.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 1b353a097268..da98e0c4de34 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -178,12 +178,18 @@ function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
     return true;
   }
 
+  if ((completedWork.flags & Deletion) !== NoFlags) {
+    return false;
+  }
+
+  // TODO: If we move the `hadNoMutationsEffects` call after `bubbleProperties`
+  // then we only have to check the `completedWork.subtreeFlags`.
   let child = completedWork.child;
   while (child !== null) {
-    if ((child.flags & MutationMask) !== NoFlags) {
+    if ((child.flags & (MutationMask | Deletion)) !== NoFlags) {
       return false;
     }
-    if ((child.subtreeFlags & MutationMask) !== NoFlags) {
+    if ((child.subtreeFlags & (MutationMask | Deletion)) !== NoFlags) {
       return false;
     }
     child = child.sibling;

From 73bf2d68efc363810209bb3c35768793b1e40ecb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 13 Nov 2020 13:00:45 -0600
Subject: [PATCH 0084/1603] Pass extra CLI args through to ESLint (#20250)

These now work:

```
yarn run lint --fix
yarn run linc --fix
```
---
 scripts/eslint/index.js | 5 +++--
 scripts/tasks/eslint.js | 4 +++-
 scripts/tasks/linc.js   | 4 +++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/scripts/eslint/index.js b/scripts/eslint/index.js
index d9acaf913edf..4a8f1868723e 100644
--- a/scripts/eslint/index.js
+++ b/scripts/eslint/index.js
@@ -64,13 +64,14 @@ function intersect(files, patterns) {
   return [...new Set(intersection)];
 }
 
-function runESLint({onlyChanged}) {
+function runESLint({onlyChanged, ...options}) {
   if (typeof onlyChanged !== 'boolean') {
     throw new Error('Pass options.onlyChanged as a boolean.');
   }
   const {errorCount, warningCount, output} = runESLintOnFilesWithOptions(
     allPaths,
-    onlyChanged
+    onlyChanged,
+    options
   );
   console.log(output);
   return errorCount === 0 && warningCount === 0;
diff --git a/scripts/tasks/eslint.js b/scripts/tasks/eslint.js
index 9b7e9f8b90fa..aa01f41dd1e7 100644
--- a/scripts/tasks/eslint.js
+++ b/scripts/tasks/eslint.js
@@ -7,6 +7,7 @@
 
 'use strict';
 
+const minimist = require('minimist');
 const runESLint = require('../eslint');
 
 console.log('Linting all files...');
@@ -15,7 +16,8 @@ if (!process.env.CI) {
   console.log('Hint: run `yarn linc` to only lint changed files.');
 }
 
-if (runESLint({onlyChanged: false})) {
+const cliOptions = minimist(process.argv.slice(2));
+if (runESLint({onlyChanged: false, ...cliOptions})) {
   console.log('Lint passed.');
 } else {
   console.log('Lint failed.');
diff --git a/scripts/tasks/linc.js b/scripts/tasks/linc.js
index ddd725b2a346..282926399bb7 100644
--- a/scripts/tasks/linc.js
+++ b/scripts/tasks/linc.js
@@ -7,11 +7,13 @@
 
 'use strict';
 
+const minimist = require('minimist');
 const runESLint = require('../eslint');
 
 console.log('Linting changed files...');
 
-if (runESLint({onlyChanged: true})) {
+const cliOptions = minimist(process.argv.slice(2));
+if (runESLint({onlyChanged: true, ...cliOptions})) {
   console.log('Lint passed for changed files.');
 } else {
   console.log('Lint failed for changed files.');

From 453df3ff72dae3ebd1e1dcd6f965c4f251b0553c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 13 Nov 2020 13:01:25 -0600
Subject: [PATCH 0085/1603] Autofix imports when running replace-fork (#20251)

* Pass extra CLI args through to ESLint

These now work:

```
yarn run lint --fix
yarn run linc --fix
```

* Autofix imports when running replace-fork

We have a custom ESLint rule that can autofix cross-fork imports.

Usually, after running the `replace-fork` script, you need to run
`yarn lint --fix` to fix the imports.

This combines the two steps into one.
---
 scripts/merge-fork/replace-fork.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/scripts/merge-fork/replace-fork.js b/scripts/merge-fork/replace-fork.js
index 5267d105a041..b51515643b5f 100644
--- a/scripts/merge-fork/replace-fork.js
+++ b/scripts/merge-fork/replace-fork.js
@@ -6,6 +6,7 @@
 
 const {promisify} = require('util');
 const glob = promisify(require('glob'));
+const {spawnSync} = require('child_process');
 const fs = require('fs');
 
 const stat = promisify(fs.stat);
@@ -14,6 +15,9 @@ const copyFile = promisify(fs.copyFile);
 async function main() {
   const oldFilenames = await glob('packages/react-reconciler/**/*.old.js');
   await Promise.all(oldFilenames.map(unforkFile));
+
+  // Use ESLint to autofix imports
+  spawnSync('yarn', ['linc', '--fix']);
 }
 
 async function unforkFile(oldFilename) {

From bd8bc5afce51a95b7223b5ae57960d2d001fbafa Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 13 Nov 2020 13:09:02 -0600
Subject: [PATCH 0086/1603] Add --reverse option to replace-fork script
 (#20249)

When enabled, replaces new fork with old fork.

I've done this several times by manually editing the script file, so
seems useful enough to add an option.
---
 scripts/merge-fork/replace-fork.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/scripts/merge-fork/replace-fork.js b/scripts/merge-fork/replace-fork.js
index b51515643b5f..0c68172cde8f 100644
--- a/scripts/merge-fork/replace-fork.js
+++ b/scripts/merge-fork/replace-fork.js
@@ -8,10 +8,15 @@ const {promisify} = require('util');
 const glob = promisify(require('glob'));
 const {spawnSync} = require('child_process');
 const fs = require('fs');
+const minimist = require('minimist');
 
 const stat = promisify(fs.stat);
 const copyFile = promisify(fs.copyFile);
 
+const argv = minimist(process.argv.slice(2), {
+  boolean: ['reverse'],
+});
+
 async function main() {
   const oldFilenames = await glob('packages/react-reconciler/**/*.old.js');
   await Promise.all(oldFilenames.map(unforkFile));
@@ -42,7 +47,11 @@ async function unforkFile(oldFilename) {
     return;
   }
 
-  await copyFile(newFilename, oldFilename);
+  if (argv.reverse) {
+    await copyFile(oldFilename, newFilename);
+  } else {
+    await copyFile(newFilename, oldFilename);
+  }
 }
 
 main();

From 7548dd573edae9444e2f3c8c15691c5caefdc3c1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 13 Nov 2020 14:29:06 -0500
Subject: [PATCH 0087/1603] Properly reset Profiler nested-update flag (#20253)

Previously this flag was not being reset correctly if a concurrent update followed a nested (sync) update. This PR fixes the behavior and adds a regression test.
---
 .../src/ReactFiberWorkLoop.new.js             |  5 ++
 .../src/ReactFiberWorkLoop.old.js             |  5 ++
 .../src/ReactProfilerTimer.new.js             |  8 ++++
 .../src/ReactProfilerTimer.old.js             |  8 ++++
 .../__tests__/ReactProfiler-test.internal.js  | 48 +++++++++++++++++++
 5 files changed, 74 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 4ccd2ea67e8b..17346a73660f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -199,6 +199,7 @@ import {
 import {
   markNestedUpdateScheduled,
   recordCommitTime,
+  resetNestedUpdateFlag,
   startProfilerTimer,
   stopProfilerTimerIfRunningAndRecordDelta,
   syncNestedUpdateFlag,
@@ -746,6 +747,10 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 // This is the entry point for every concurrent task, i.e. anything that
 // goes through Scheduler.
 function performConcurrentWorkOnRoot(root) {
+  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
+    resetNestedUpdateFlag();
+  }
+
   // Since we know we're in a React event, we can clear the current
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 609bd8016b9c..b4852f120db9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -213,6 +213,7 @@ import {
   markNestedUpdateScheduled,
   recordCommitTime,
   recordPassiveEffectDuration,
+  resetNestedUpdateFlag,
   startPassiveEffectTimer,
   startProfilerTimer,
   stopProfilerTimerIfRunningAndRecordDelta,
@@ -770,6 +771,10 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 // This is the entry point for every concurrent task, i.e. anything that
 // goes through Scheduler.
 function performConcurrentWorkOnRoot(root) {
+  if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
+    resetNestedUpdateFlag();
+  }
+
   // Since we know we're in a React event, we can clear the current
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.new.js b/packages/react-reconciler/src/ReactProfilerTimer.new.js
index 95395b6898de..235074b78ad8 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.new.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.new.js
@@ -68,6 +68,13 @@ function markNestedUpdateScheduled(): void {
   }
 }
 
+function resetNestedUpdateFlag(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    currentUpdateIsNested = false;
+    nestedUpdateScheduled = false;
+  }
+}
+
 function syncNestedUpdateFlag(): void {
   if (enableProfilerNestedUpdatePhase) {
     currentUpdateIsNested = nestedUpdateScheduled;
@@ -206,6 +213,7 @@ export {
   recordCommitTime,
   recordLayoutEffectDuration,
   recordPassiveEffectDuration,
+  resetNestedUpdateFlag,
   startLayoutEffectTimer,
   startPassiveEffectTimer,
   startProfilerTimer,
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.old.js b/packages/react-reconciler/src/ReactProfilerTimer.old.js
index 95395b6898de..235074b78ad8 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.old.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.old.js
@@ -68,6 +68,13 @@ function markNestedUpdateScheduled(): void {
   }
 }
 
+function resetNestedUpdateFlag(): void {
+  if (enableProfilerNestedUpdatePhase) {
+    currentUpdateIsNested = false;
+    nestedUpdateScheduled = false;
+  }
+}
+
 function syncNestedUpdateFlag(): void {
   if (enableProfilerNestedUpdatePhase) {
     currentUpdateIsNested = nestedUpdateScheduled;
@@ -206,6 +213,7 @@ export {
   recordCommitTime,
   recordLayoutEffectDuration,
   recordPassiveEffectDuration,
+  resetNestedUpdateFlag,
   startLayoutEffectTimer,
   startPassiveEffectTimer,
   startProfilerTimer,
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 92b30d9280fa..831861941a24 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -700,6 +700,54 @@ describe('Profiler', () => {
         expect(updateCall[5]).toBe(43); // commit time
       });
 
+      it('should clear nested-update flag when multiple cascading renders are scheduled', () => {
+        loadModules({
+          enableSchedulerTracing,
+          useNoopRenderer: true,
+        });
+
+        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.unstable_yieldValue(`${didMount}:${didMountAndUpdate}`);
+
+          return null;
+        }
+
+        const onRender = jest.fn();
+
+        ReactNoop.act(() => {
+          ReactNoop.render(
+            <React.Profiler id="root" onRender={onRender}>
+              <Component />
+            </React.Profiler>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          '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');
+      });
+
       describe('with regard to interruptions', () => {
         it('should accumulate actual time after a scheduling interruptions', () => {
           const callback = jest.fn();

From 765e89b908206fe62feb10240604db224f38de7d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 13 Nov 2020 13:54:33 -0600
Subject: [PATCH 0088/1603] Reset new fork to old fork  (#20254)

* Fix typo

This typo was fixed in the new fork but not the old.

* Reset new fork to old fork

Something in the new fork is causing a topline metrics regression. We're
not sure what it is, so we're going to split it into steps and bisect.

As a first step, this resets the new fork back to the contents of the
old fork. We will land this to confirm that the fork infra itself is
not causing a regression.

* Fix tests: Add `dfsEffectsRefactor` flag

Some of the tests that gated on the effects refactor used the `new`
flag. In order to bisect, we'll need to decompose the new fork changes
into multiple steps.

So I added a hardcoded test flag called `dfsEffectsRefactor` and set it
to false. Will turn back on when we switch back to traversing the
finished tree using DFS and `subtreeTag`.
---
 ...DOMServerPartialHydration-test.internal.js |    2 +-
 .../__tests__/ReactWrongReturnPointer-test.js |    1 +
 .../src/ReactChildFiber.new.js                |   19 +-
 .../react-reconciler/src/ReactFiber.new.js    |   17 +-
 .../src/ReactFiberBeginWork.new.js            |   68 +-
 .../src/ReactFiberClassComponent.new.js       |   52 +-
 .../src/ReactFiberCommitWork.new.js           | 2457 ++++-------------
 .../src/ReactFiberCompleteWork.new.js         |  356 +--
 .../src/ReactFiberHooks.new.js                |  112 +-
 .../src/ReactFiberHydrationContext.new.js     |   18 +-
 .../src/ReactFiberSuspenseComponent.new.js    |    3 +
 .../src/ReactFiberThrow.new.js                |    2 +
 .../src/ReactFiberWorkLoop.new.js             |  769 +++++-
 .../src/ReactStrictModeWarnings.old.js        |    2 +-
 .../src/SchedulerWithReactIntegration.new.js  |    7 +-
 ...nal.js => ReactDoubleInvokeEvents-test.js} |   32 +-
 .../ReactDOMTracing-test.internal.js          |    4 +-
 .../__tests__/ReactProfiler-test.internal.js  |    7 +-
 scripts/jest/TestFlags.js                     |    4 +
 19 files changed, 1380 insertions(+), 2552 deletions(-)
 rename packages/react-reconciler/src/__tests__/{ReactDoubleInvokeEvents-test.internal.js => ReactDoubleInvokeEvents-test.js} (96%)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 9a897789b47c..c8e2a0f5ea98 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -367,7 +367,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // This is a new node.
     expect(span).not.toBe(span2);
 
-    if (gate(flags => flags.new)) {
+    if (gate(flags => flags.dfsEffectsRefactor)) {
       // The effects list refactor causes this to be null because the Suspense Offscreen's child
       // is null. However, since we can't hydrate Suspense in legacy this change in behavior is ok
       expect(ref.current).toBe(null);
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index 688fb5c926ed..72cb43d75386 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -16,6 +16,7 @@ beforeEach(() => {
 });
 
 // Don't feel too guilty if you have to delete this test.
+// @gate dfsEffectsRefactor
 // @gate new
 // @gate __DEV__
 test('warns in DEV if return pointer is inconsistent', async () => {
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index e9048959fd7a..601f3b21e439 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -13,7 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane';
 
 import getComponentName from 'shared/getComponentName';
-import {Deletion, Placement} from './ReactFiberFlags';
+import {Placement, Deletion} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -256,13 +256,20 @@ function ChildReconciler(shouldTrackSideEffects) {
       // Noop.
       return;
     }
-    const deletions = returnFiber.deletions;
-    if (deletions === null) {
-      returnFiber.deletions = [childToDelete];
-      returnFiber.flags |= Deletion;
+    // Deletions are added in reversed order so we add it to the front.
+    // At this point, the return fiber's effect list is empty except for
+    // deletions, so we can just append the deletion to the list. The remaining
+    // effects aren't added until the complete phase. Once we implement
+    // resuming, this may not be true.
+    const last = returnFiber.lastEffect;
+    if (last !== null) {
+      last.nextEffect = childToDelete;
+      returnFiber.lastEffect = childToDelete;
     } else {
-      deletions.push(childToDelete);
+      returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
+    childToDelete.nextEffect = null;
+    childToDelete.flags = Deletion;
   }
 
   function deleteRemainingChildren(
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index ccad1371d8f4..5426568b9661 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -28,7 +28,7 @@ import {
   enableFundamentalAPI,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
-import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
+import {NoFlags, Placement} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
@@ -279,6 +279,13 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     workInProgress.type = current.type;
 
     // We already have an alternate.
+    // Reset the effect tag.
+    workInProgress.flags = NoFlags;
+
+    // The effect list is no longer valid.
+    workInProgress.nextEffect = null;
+    workInProgress.firstEffect = null;
+    workInProgress.lastEffect = null;
     workInProgress.subtreeFlags = NoFlags;
     workInProgress.deletions = null;
 
@@ -292,9 +299,6 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     }
   }
 
-  // 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;
 
@@ -360,6 +364,11 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
   // that child fiber is setting, not the reconciliation.
   workInProgress.flags &= Placement;
 
+  // The effect list is no longer valid.
+  workInProgress.nextEffect = null;
+  workInProgress.firstEffect = null;
+  workInProgress.lastEffect = null;
+
   const current = workInProgress.alternate;
   if (current === null) {
     // Reset to createFiber's initial values.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 163984840a21..52bbc5ac405b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -58,10 +58,10 @@ import {
   Hydrating,
   ContentReset,
   DidCapture,
+  Update,
   Ref,
   Deletion,
   ForceUpdateForLegacySuspense,
-  StaticMask,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -671,6 +671,8 @@ function updateProfiler(
   renderLanes: Lanes,
 ) {
   if (enableProfilerTimer) {
+    workInProgress.flags |= Update;
+
     // 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;
@@ -1077,9 +1079,6 @@ function updateHostComponent(
     workInProgress.flags |= ContentReset;
   }
 
-  // React DevTools reads this flag.
-  workInProgress.flags |= PerformedWork;
-
   markRef(current, workInProgress);
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -2005,14 +2004,9 @@ function updateSuspensePrimaryChildren(
   primaryChildFragment.sibling = null;
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
-    const deletions = workInProgress.deletions;
-    if (deletions === null) {
-      workInProgress.deletions = [currentFallbackChildFragment];
-      // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-      workInProgress.flags |= Deletion;
-    } else {
-      deletions.push(currentFallbackChildFragment);
-    }
+    currentFallbackChildFragment.nextEffect = null;
+    currentFallbackChildFragment.flags = Deletion;
+    workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -2069,19 +2063,24 @@ function updateSuspenseFallbackChildren(
 
     // The fallback fiber was added as a deletion effect during the first pass.
     // However, since we're going to remain on the fallback, we no longer want
-    // to delete it.
-    workInProgress.deletions = null;
+    // to delete it. So we need to remove it from the list. Deletions are stored
+    // on the same list as effects. We want to keep the effects from the primary
+    // tree. So we copy the primary child fragment's effect list, which does not
+    // include the fallback deletion effect.
+    const progressedLastEffect = primaryChildFragment.lastEffect;
+    if (progressedLastEffect !== null) {
+      workInProgress.firstEffect = primaryChildFragment.firstEffect;
+      workInProgress.lastEffect = progressedLastEffect;
+      progressedLastEffect.nextEffect = null;
+    } else {
+      // TODO: Reset this somewhere else? Lol legacy mode is so weird.
+      workInProgress.firstEffect = workInProgress.lastEffect = null;
+    }
   } else {
     primaryChildFragment = createWorkInProgressOffscreenFiber(
       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) {
@@ -2566,6 +2565,7 @@ function initSuspenseListRenderState(
   tail: null | Fiber,
   lastContentRow: null | Fiber,
   tailMode: SuspenseListTailMode,
+  lastEffectBeforeRendering: null | Fiber,
 ): void {
   const renderState: null | SuspenseListRenderState =
     workInProgress.memoizedState;
@@ -2577,6 +2577,7 @@ function initSuspenseListRenderState(
       last: lastContentRow,
       tail: tail,
       tailMode: tailMode,
+      lastEffect: lastEffectBeforeRendering,
     }: SuspenseListRenderState);
   } else {
     // We can reuse the existing object from previous renders.
@@ -2586,6 +2587,7 @@ function initSuspenseListRenderState(
     renderState.last = lastContentRow;
     renderState.tail = tail;
     renderState.tailMode = tailMode;
+    renderState.lastEffect = lastEffectBeforeRendering;
   }
 }
 
@@ -2667,6 +2669,7 @@ function updateSuspenseListComponent(
           tail,
           lastContentRow,
           tailMode,
+          workInProgress.lastEffect,
         );
         break;
       }
@@ -2698,6 +2701,7 @@ function updateSuspenseListComponent(
           tail,
           null, // last
           tailMode,
+          workInProgress.lastEffect,
         );
         break;
       }
@@ -2708,6 +2712,7 @@ function updateSuspenseListComponent(
           null, // tail
           null, // last
           undefined,
+          workInProgress.lastEffect,
         );
         break;
       }
@@ -2967,14 +2972,15 @@ function remountFiber(
 
     // 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];
-      // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-      returnFiber.flags |= Deletion;
+    const last = returnFiber.lastEffect;
+    if (last !== null) {
+      last.nextEffect = current;
+      returnFiber.lastEffect = current;
     } else {
-      deletions.push(current);
+      returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
+    current.nextEffect = null;
+    current.flags = Deletion;
 
     newWorkInProgress.flags |= Placement;
 
@@ -3059,6 +3065,15 @@ function beginWork(
         }
         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;
+            }
+
             // 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;
@@ -3165,6 +3180,7 @@ function beginWork(
             // update in the past but didn't complete it.
             renderState.rendering = null;
             renderState.tail = null;
+            renderState.lastEffect = null;
           }
           pushSuspenseContext(workInProgress, suspenseStackCursor.current);
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 663b27dfed41..4e58dd71f3dc 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -12,14 +12,13 @@ import type {Lanes} from './ReactFiberLane';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 
 import * as React from 'react';
-import {Update, Snapshot, MountLayoutDev} from './ReactFiberFlags';
+import {Update, Snapshot} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -30,13 +29,7 @@ import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
-import {
-  BlockingMode,
-  ConcurrentMode,
-  DebugTracingMode,
-  NoMode,
-  StrictMode,
-} from './ReactTypeOfMode';
+import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -897,16 +890,7 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    if (
-      __DEV__ &&
-      enableDoubleInvokingEffects &&
-      (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-    ) {
-      // Never double-invoke effects for legacy roots.
-      workInProgress.flags |= MountLayoutDev | Update;
-    } else {
-      workInProgress.flags |= Update;
-    }
+    workInProgress.flags |= Update;
   }
 }
 
@@ -976,15 +960,7 @@ function resumeMountClassInstance(
     // 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') {
-      if (
-        __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-      ) {
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
-      }
+      workInProgress.flags |= Update;
     }
     return false;
   }
@@ -1027,29 +1003,13 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      if (
-        __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-      ) {
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
-      }
+      workInProgress.flags |= Update;
     }
   } 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') {
-      if (
-        __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-      ) {
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
-      }
+      workInProgress.flags |= Update;
     }
 
     // If shouldComponentUpdate returned false, we should still update the
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 8f268e9261aa..f16fb9943551 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -17,14 +17,13 @@ import type {
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
-import type {HookFlags} from './ReactHookEffectTags';
-import type {Flags} from './ReactFiberFlags';
 
 import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
@@ -36,8 +35,6 @@ import {
   enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableDoubleInvokingEffects,
-  enableRecursiveCommitTraversal,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -69,29 +66,11 @@ import {
   ContentReset,
   Placement,
   Snapshot,
-  Visibility,
   Update,
-  Callback,
-  Ref,
-  PlacementAndUpdate,
-  Hydrating,
-  HydratingAndUpdate,
-  Passive,
-  PassiveStatic,
-  BeforeMutationMask,
-  MutationMask,
-  LayoutMask,
-  PassiveMask,
-  MountLayoutDev,
-  MountPassiveDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
-import {
-  current as currentDebugFiberInDEV,
-  resetCurrentFiber as resetCurrentDebugFiberInDEV,
-  setCurrentFiber as setCurrentDebugFiberInDEV,
-} from './ReactCurrentFiber';
+
 import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
@@ -99,23 +78,14 @@ import {
   getCommitTime,
   recordLayoutEffectDuration,
   startLayoutEffectTimer,
-  recordPassiveEffectDuration,
-  startPassiveEffectTimer,
 } from './ReactProfilerTimer.new';
-import {
-  NoMode,
-  BlockingMode,
-  ConcurrentMode,
-  ProfileMode,
-} from './ReactTypeOfMode';
+import {ProfileMode} from './ReactTypeOfMode';
 import {commitUpdateQueue} from './ReactUpdateQueue.new';
 import {
   getPublicInstance,
   supportsMutation,
   supportsPersistence,
   supportsHydration,
-  prepareForCommit,
-  beforeActiveInstanceBlur,
   commitMount,
   commitUpdate,
   resetTextContent,
@@ -145,6 +115,9 @@ import {
   captureCommitPhaseError,
   resolveRetryWakeable,
   markCommitTimeOfFallback,
+  enqueuePendingPassiveHookEffectMount,
+  enqueuePendingPassiveHookEffectUnmount,
+  enqueuePendingPassiveProfilerEffect,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -153,12 +126,6 @@ import {
   Passive as HookPassive,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
-import {doesFiberContain} from './ReactFiberTreeReflection';
-
-let nextEffect: Fiber | null = null;
-
-// Used to avoid traversing the return path to find the nearest Profiler ancestor during commit.
-let nearestProfilerOnStack: Fiber | null = null;
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -187,7 +154,7 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
 };
 
 // Capture errors so they don't interrupt unmounting.
-function safelyCallComponentWillUnmount(current, instance) {
+function safelyCallComponentWillUnmount(current: Fiber, instance: any) {
   if (__DEV__) {
     invokeGuardedCallback(
       null,
@@ -256,7 +223,7 @@ function safelyDetachRef(current: Fiber) {
   }
 }
 
-export function safelyCallDestroy(current: Fiber, destroy: () => void) {
+function safelyCallDestroy(current: Fiber, destroy: () => void) {
   if (__DEV__) {
     invokeGuardedCallback(null, destroy, null);
     if (hasCaughtError()) {
@@ -272,19 +239,110 @@ export function safelyCallDestroy(current: Fiber, destroy: () => void) {
   }
 }
 
-function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
+function commitBeforeMutationLifeCycles(
+  current: Fiber | null,
+  finishedWork: Fiber,
+): void {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      return;
+    }
+    case ClassComponent: {
+      if (finishedWork.flags & Snapshot) {
+        if (current !== null) {
+          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 === finishedWork.elementType &&
+              !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.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
+              if (instance.state !== finishedWork.memoizedState) {
+                console.error(
+                  'Expected %s state to match memoized state before ' +
+                    'getSnapshotBeforeUpdate. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.state`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
+            }
+          }
+          const snapshot = instance.getSnapshotBeforeUpdate(
+            finishedWork.elementType === finishedWork.type
+              ? prevProps
+              : resolveDefaultProps(finishedWork.type, prevProps),
+            prevState,
+          );
+          if (__DEV__) {
+            const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
+            if (snapshot === undefined && !didWarnSet.has(finishedWork.type)) {
+              didWarnSet.add(finishedWork.type);
+              console.error(
+                '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
+                  'must be returned. You have returned undefined.',
+                getComponentName(finishedWork.type),
+              );
+            }
+          }
+          instance.__reactInternalSnapshotBeforeUpdate = snapshot;
+        }
+      }
+      return;
+    }
+    case HostRoot: {
+      if (supportsMutation) {
+        if (finishedWork.flags & Snapshot) {
+          const root = finishedWork.stateNode;
+          clearContainer(root.containerInfo);
+        }
+      }
+      return;
+    }
+    case HostComponent:
+    case HostText:
+    case HostPortal:
+    case IncompleteClassComponent:
+      // Nothing to do for these component types
+      return;
+  }
+  invariant(
+    false,
+    'This unit of work tag should not have side-effects. This error is ' +
+      'likely caused by a bug in React. Please file an issue.',
+  );
+}
+
+function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
   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 ((effect.tag & tag) === tag) {
         // Unmount
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
-          safelyCallDestroy(finishedWork, destroy);
+          destroy();
         }
       }
       effect = effect.next;
@@ -292,14 +350,14 @@ function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
   }
 }
 
-function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
+function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
   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 ((effect.tag & tag) === tag) {
         // Mount
         const create = effect.create;
         effect.destroy = create();
@@ -342,1657 +400,450 @@ function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
   }
 }
 
-function commitProfilerPassiveEffect(
+function schedulePassiveEffects(finishedWork: Fiber) {
+  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 {
+      const {next, tag} = effect;
+      if (
+        (tag & HookPassive) !== NoHookEffect &&
+        (tag & HookHasEffect) !== NoHookEffect
+      ) {
+        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
+        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
+      }
+      effect = next;
+    } while (effect !== firstEffect);
+  }
+}
+
+export function commitPassiveEffectDurations(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
 ): void {
   if (enableProfilerTimer && enableProfilerCommitHooks) {
-    switch (finishedWork.tag) {
-      case Profiler: {
-        const {passiveEffectDuration} = finishedWork.stateNode;
-        const {id, onPostCommit} = finishedWork.memoizedProps;
-
-        // This value will still reflect the previous commit phase.
-        // It does not get reset until the start of the next commit phase.
-        const commitTime = getCommitTime();
+    // Only Profilers with work in their subtree will have an Update effect scheduled.
+    if ((finishedWork.flags & Update) !== NoFlags) {
+      switch (finishedWork.tag) {
+        case Profiler: {
+          const {passiveEffectDuration} = finishedWork.stateNode;
+          const {id, onPostCommit} = finishedWork.memoizedProps;
+
+          // This value will still reflect the previous commit phase.
+          // It does not get reset until the start of the next commit phase.
+          const commitTime = getCommitTime();
+
+          let phase = finishedWork.alternate === null ? 'mount' : 'update';
+          if (enableProfilerNestedUpdatePhase) {
+            if (isCurrentUpdateNested()) {
+              phase = 'nested-update';
+            }
+          }
 
-        let phase = finishedWork.alternate === null ? 'mount' : 'update';
-        if (enableProfilerNestedUpdatePhase) {
-          if (isCurrentUpdateNested()) {
-            phase = 'nested-update';
+          if (typeof onPostCommit === 'function') {
+            if (enableSchedulerTracing) {
+              onPostCommit(
+                id,
+                phase,
+                passiveEffectDuration,
+                commitTime,
+                finishedRoot.memoizedInteractions,
+              );
+            } else {
+              onPostCommit(id, phase, passiveEffectDuration, commitTime);
+            }
           }
-        }
 
-        if (typeof onPostCommit === 'function') {
-          if (enableSchedulerTracing) {
-            onPostCommit(
-              id,
-              phase,
-              passiveEffectDuration,
-              commitTime,
-              finishedRoot.memoizedInteractions,
-            );
-          } else {
-            onPostCommit(id, phase, passiveEffectDuration, commitTime);
+          // Bubble times to the next nearest ancestor Profiler.
+          // After we process that Profiler, we'll bubble further up.
+          let parentFiber = finishedWork.return;
+          while (parentFiber !== null) {
+            if (parentFiber.tag === Profiler) {
+              const parentStateNode = parentFiber.stateNode;
+              parentStateNode.passiveEffectDuration += passiveEffectDuration;
+              break;
+            }
+            parentFiber = parentFiber.return;
           }
+          break;
         }
-        break;
-      }
-      default:
-        break;
-    }
-  }
-}
-
-let focusedInstanceHandle: null | Fiber = null;
-let shouldFireAfterActiveInstanceBlur: boolean = false;
-
-export function commitBeforeMutationEffects(
-  root: FiberRoot,
-  firstChild: Fiber,
-) {
-  focusedInstanceHandle = prepareForCommit(root.containerInfo);
-
-  if (enableRecursiveCommitTraversal) {
-    recursivelyCommitBeforeMutationEffects(firstChild);
-  } else {
-    nextEffect = firstChild;
-    iterativelyCommitBeforeMutationEffects_begin();
-  }
-
-  // We no longer need to track the active instance fiber
-  const shouldFire = shouldFireAfterActiveInstanceBlur;
-  shouldFireAfterActiveInstanceBlur = false;
-  focusedInstanceHandle = null;
-
-  return shouldFire;
-}
-
-function recursivelyCommitBeforeMutationEffects(firstChild: Fiber) {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    // TODO: Should wrap this in flags check, too, as optimization
-    if (fiber.deletions !== null) {
-      commitBeforeMutationEffectsDeletions(fiber.deletions);
-    }
-
-    const child = fiber.child;
-    if (fiber.subtreeFlags & BeforeMutationMask && child !== null) {
-      recursivelyCommitBeforeMutationEffects(child);
-    }
-
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitBeforeMutationEffectsOnFiber,
-        null,
-        fiber,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitBeforeMutationEffectsOnFiber(fiber);
-      } catch (error) {
-        captureCommitPhaseError(fiber, error);
+        default:
+          break;
       }
     }
-    fiber = fiber.sibling;
-  }
-}
-
-function iterativelyCommitBeforeMutationEffects_begin() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-
-    // TODO: Should wrap this in flags check, too, as optimization
-    const deletions = fiber.deletions;
-    if (deletions !== null) {
-      commitBeforeMutationEffectsDeletions(deletions);
-    }
-
-    const child = fiber.child;
-    if (
-      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
-      child !== null
-    ) {
-      warnIfWrongReturnPointer(fiber, child);
-      nextEffect = child;
-    } else {
-      iterativelyCommitBeforeMutationEffects_complete();
-    }
   }
 }
 
-function iterativelyCommitBeforeMutationEffects_complete() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitBeforeMutationEffectsOnFiber,
-        null,
-        fiber,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitBeforeMutationEffectsOnFiber(fiber);
-      } catch (error) {
-        captureCommitPhaseError(fiber, error);
+function commitLifeCycles(
+  finishedRoot: FiberRoot,
+  current: Fiber | null,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+): void {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      // 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 (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+        } finally {
+          recordLayoutEffectDuration(finishedWork);
+        }
+      } else {
+        commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
       }
-    }
 
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      warnIfWrongReturnPointer(fiber.return, sibling);
-      nextEffect = sibling;
+      schedulePassiveEffects(finishedWork);
       return;
     }
-
-    nextEffect = fiber.return;
-  }
-}
-
-function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
-  const current = finishedWork.alternate;
-  const flags = finishedWork.flags;
-
-  if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
-    // Check to see if the focused element was inside of a hidden (Suspense) subtree.
-    if (
-      // TODO: Can optimize this further with separate Hide and Show flags. We
-      // only care about Hide here.
-      (flags & Visibility) !== NoFlags &&
-      finishedWork.tag === SuspenseComponent &&
-      isSuspenseBoundaryBeingHidden(current, finishedWork) &&
-      doesFiberContain(finishedWork, focusedInstanceHandle)
-    ) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur(finishedWork);
-    }
-  }
-
-  if ((flags & Snapshot) !== NoFlags) {
-    setCurrentDebugFiberInDEV(finishedWork);
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        break;
-      }
-      case ClassComponent: {
-        if (finishedWork.flags & Snapshot) {
-          if (current !== null) {
-            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 === finishedWork.elementType &&
-                !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.',
-                    getComponentName(finishedWork.type) || 'instance',
-                  );
-                }
-                if (instance.state !== finishedWork.memoizedState) {
-                  console.error(
-                    'Expected %s state to match memoized state before ' +
-                      'getSnapshotBeforeUpdate. ' +
-                      'This might either be because of a bug in React, or because ' +
-                      'a component reassigns its own `this.state`. ' +
-                      'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
-                  );
-                }
+    case ClassComponent: {
+      const instance = finishedWork.stateNode;
+      if (finishedWork.flags & Update) {
+        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 === finishedWork.elementType &&
+              !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.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
+              if (instance.state !== finishedWork.memoizedState) {
+                console.error(
+                  'Expected %s state to match memoized state before ' +
+                    'componentDidMount. ' +
+                    'This might either be because of a bug in React, or because ' +
+                    'a component reassigns its own `this.state`. ' +
+                    'Please file an issue.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
               }
             }
-            const snapshot = instance.getSnapshotBeforeUpdate(
-              finishedWork.elementType === finishedWork.type
-                ? prevProps
-                : resolveDefaultProps(finishedWork.type, prevProps),
-              prevState,
-            );
-            if (__DEV__) {
-              const didWarnSet = ((didWarnAboutUndefinedSnapshotBeforeUpdate: any): Set<mixed>);
-              if (
-                snapshot === undefined &&
-                !didWarnSet.has(finishedWork.type)
-              ) {
-                didWarnSet.add(finishedWork.type);
+          }
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            finishedWork.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
+              instance.componentDidMount();
+            } finally {
+              recordLayoutEffectDuration(finishedWork);
+            }
+          } else {
+            instance.componentDidMount();
+          }
+        } else {
+          const prevProps =
+            finishedWork.elementType === finishedWork.type
+              ? current.memoizedProps
+              : resolveDefaultProps(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 === finishedWork.elementType &&
+              !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.',
+                  getComponentName(finishedWork.type) || 'instance',
+                );
+              }
+              if (instance.state !== finishedWork.memoizedState) {
                 console.error(
-                  '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
-                    'must be returned. You have returned undefined.',
-                  getComponentName(finishedWork.type),
+                  '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.',
+                  getComponentName(finishedWork.type) || 'instance',
                 );
               }
             }
-            instance.__reactInternalSnapshotBeforeUpdate = snapshot;
+          }
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            finishedWork.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
+              instance.componentDidUpdate(
+                prevProps,
+                prevState,
+                instance.__reactInternalSnapshotBeforeUpdate,
+              );
+            } finally {
+              recordLayoutEffectDuration(finishedWork);
+            }
+          } else {
+            instance.componentDidUpdate(
+              prevProps,
+              prevState,
+              instance.__reactInternalSnapshotBeforeUpdate,
+            );
           }
         }
-        break;
       }
-      case HostRoot: {
-        if (supportsMutation) {
-          if (finishedWork.flags & Snapshot) {
-            const root = finishedWork.stateNode;
-            clearContainer(root.containerInfo);
+
+      // 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<
+        *,
+      > | null = (finishedWork.updateQueue: any);
+      if (updateQueue !== null) {
+        if (__DEV__) {
+          if (
+            finishedWork.type === finishedWork.elementType &&
+            !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.',
+                getComponentName(finishedWork.type) || 'instance',
+              );
+            }
+            if (instance.state !== finishedWork.memoizedState) {
+              console.error(
+                'Expected %s state to match memoized state before ' +
+                  'processing the update queue. ' +
+                  'This might either be because of a bug in React, or because ' +
+                  'a component reassigns its own `this.state`. ' +
+                  'Please file an issue.',
+                getComponentName(finishedWork.type) || 'instance',
+              );
+            }
           }
         }
-        break;
+        // 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.
+        commitUpdateQueue(finishedWork, updateQueue, instance);
       }
-      case HostComponent:
-      case HostText:
-      case HostPortal:
-      case IncompleteClassComponent:
-        // Nothing to do for these component types
-        break;
-      default:
-        invariant(
-          false,
-          'This unit of work tag should not have side-effects. This error is ' +
-            'likely caused by a bug in React. Please file an issue.',
-        );
-    }
-    resetCurrentDebugFiberInDEV();
-  }
-}
-
-function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {
-  for (let i = 0; i < deletions.length; i++) {
-    const fiber = deletions[i];
-
-    // 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(fiber, ((focusedInstanceHandle: any): Fiber))) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur(fiber);
+      return;
     }
-  }
-}
-
-export function commitMutationEffects(
-  firstChild: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
-  if (enableRecursiveCommitTraversal) {
-    recursivelyCommitMutationEffects(firstChild, root, renderPriorityLevel);
-  } else {
-    nextEffect = firstChild;
-    iterativelyCommitMutationEffects_begin(root, renderPriorityLevel);
-  }
-}
-
-function recursivelyCommitMutationEffects(
-  firstChild: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    const deletions = fiber.deletions;
-    if (deletions !== null) {
-      commitMutationEffectsDeletions(deletions, root, renderPriorityLevel);
-    }
-
-    if (fiber.child !== null) {
-      const mutationFlags = fiber.subtreeFlags & MutationMask;
-      if (mutationFlags !== NoFlags) {
-        recursivelyCommitMutationEffects(
-          fiber.child,
-          root,
-          renderPriorityLevel,
-        );
+    case HostRoot: {
+      // 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<
+        *,
+      > | null = (finishedWork.updateQueue: any);
+      if (updateQueue !== null) {
+        let instance = null;
+        if (finishedWork.child !== null) {
+          switch (finishedWork.child.tag) {
+            case HostComponent:
+              instance = getPublicInstance(finishedWork.child.stateNode);
+              break;
+            case ClassComponent:
+              instance = finishedWork.child.stateNode;
+              break;
+          }
+        }
+        commitUpdateQueue(finishedWork, updateQueue, instance);
       }
+      return;
     }
+    case HostComponent: {
+      const instance: Instance = finishedWork.stateNode;
 
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitMutationEffectsOnFiber,
-        null,
-        fiber,
-        root,
-        renderPriorityLevel,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
+      // 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 && finishedWork.flags & Update) {
+        const type = finishedWork.type;
+        const props = finishedWork.memoizedProps;
+        commitMount(instance, type, props, finishedWork);
       }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
-      } catch (error) {
-        captureCommitPhaseError(fiber, error);
-      }
-    }
-    fiber = fiber.sibling;
-  }
-}
-
-function iterativelyCommitMutationEffects_begin(
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-
-    // TODO: Should wrap this in flags check, too, as optimization
-    const deletions = fiber.deletions;
-    if (deletions !== null) {
-      commitMutationEffectsDeletions(deletions, root, renderPriorityLevel);
-    }
-
-    const child = fiber.child;
-    if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
-      warnIfWrongReturnPointer(fiber, child);
-      nextEffect = child;
-    } else {
-      iterativelyCommitMutationEffects_complete(root, renderPriorityLevel);
-    }
-  }
-}
-
-function iterativelyCommitMutationEffects_complete(
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitMutationEffectsOnFiber,
-        null,
-        fiber,
-        root,
-        renderPriorityLevel,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
-      } catch (error) {
-        captureCommitPhaseError(fiber, error);
-      }
-    }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      warnIfWrongReturnPointer(fiber.return, sibling);
-      nextEffect = sibling;
-      return;
-    }
-
-    nextEffect = fiber.return;
-  }
-}
-
-function commitMutationEffectsOnFiber(
-  fiber: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel,
-) {
-  const flags = fiber.flags;
-  if (flags & ContentReset) {
-    commitResetTextContent(fiber);
-  }
-
-  if (flags & Ref) {
-    const current = fiber.alternate;
-    if (current !== null) {
-      commitDetachRef(current);
-    }
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
-      if (fiber.tag === ScopeComponent) {
-        commitAttachRef(fiber);
-      }
-    }
-  }
-
-  // The following switch statement is only concerned about placement,
-  // updates, and deletions. To avoid needing to add a case for every possible
-  // bitmap value, we remove the secondary effects from the effect tag and
-  // switch on that value.
-  const primaryFlags = flags & (Placement | Update | Hydrating);
-  switch (primaryFlags) {
-    case Placement: {
-      commitPlacement(fiber);
-      // 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.
-      fiber.flags &= ~Placement;
-      break;
-    }
-    case PlacementAndUpdate: {
-      // Placement
-      commitPlacement(fiber);
-      // Clear the "placement" from effect tag so that we know that this is
-      // inserted, before any life-cycles like componentDidMount gets called.
-      fiber.flags &= ~Placement;
-
-      // Update
-      const current = fiber.alternate;
-      commitWork(current, fiber);
-      break;
-    }
-    case Hydrating: {
-      fiber.flags &= ~Hydrating;
-      break;
-    }
-    case HydratingAndUpdate: {
-      fiber.flags &= ~Hydrating;
-
-      // Update
-      const current = fiber.alternate;
-      commitWork(current, fiber);
-      break;
-    }
-    case Update: {
-      const current = fiber.alternate;
-      commitWork(current, fiber);
-      break;
-    }
-  }
-}
-
-function commitMutationEffectsDeletions(
-  deletions: Array<Fiber>,
-  root: FiberRoot,
-  renderPriorityLevel,
-) {
-  for (let i = 0; i < deletions.length; i++) {
-    const childToDelete = deletions[i];
-    if (__DEV__) {
-      invokeGuardedCallback(
-        null,
-        commitDeletion,
-        null,
-        root,
-        childToDelete,
-        renderPriorityLevel,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(childToDelete, error);
-      }
-    } else {
-      try {
-        commitDeletion(root, childToDelete, renderPriorityLevel);
-      } catch (error) {
-        captureCommitPhaseError(childToDelete, error);
-      }
-    }
-  }
-}
-
-export function commitLayoutEffects(
-  finishedWork: Fiber,
-  finishedRoot: FiberRoot,
-) {
-  if (enableRecursiveCommitTraversal) {
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(finishedWork);
-      invokeGuardedCallback(
-        null,
-        recursivelyCommitLayoutEffects,
-        null,
-        finishedWork,
-        finishedRoot,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(finishedWork, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        recursivelyCommitLayoutEffects(finishedWork, finishedRoot);
-      } catch (error) {
-        captureCommitPhaseError(finishedWork, error);
-      }
-    }
-  } else {
-    nextEffect = finishedWork;
-    iterativelyCommitLayoutEffects_begin(finishedWork, finishedRoot);
-  }
-}
-
-function recursivelyCommitLayoutEffects(
-  finishedWork: Fiber,
-  finishedRoot: FiberRoot,
-) {
-  const {flags, tag} = finishedWork;
-  switch (tag) {
-    case Profiler: {
-      let prevProfilerOnStack = null;
-      if (enableProfilerTimer && enableProfilerCommitHooks) {
-        prevProfilerOnStack = nearestProfilerOnStack;
-        nearestProfilerOnStack = finishedWork;
-      }
-
-      let child = finishedWork.child;
-      while (child !== null) {
-        const primarySubtreeFlags = finishedWork.subtreeFlags & LayoutMask;
-        if (primarySubtreeFlags !== NoFlags) {
-          if (__DEV__) {
-            const prevCurrentFiberInDEV = currentDebugFiberInDEV;
-            setCurrentDebugFiberInDEV(child);
-            invokeGuardedCallback(
-              null,
-              recursivelyCommitLayoutEffects,
-              null,
-              child,
-              finishedRoot,
-            );
-            if (hasCaughtError()) {
-              const error = clearCaughtError();
-              captureCommitPhaseError(child, error);
-            }
-            if (prevCurrentFiberInDEV !== null) {
-              setCurrentDebugFiberInDEV(prevCurrentFiberInDEV);
-            } else {
-              resetCurrentDebugFiberInDEV();
-            }
-          } else {
-            try {
-              recursivelyCommitLayoutEffects(child, finishedRoot);
-            } catch (error) {
-              captureCommitPhaseError(child, error);
-            }
-          }
-        }
-        child = child.sibling;
-      }
-
-      const primaryFlags = flags & (Update | Callback);
-      if (primaryFlags !== NoFlags) {
-        if (enableProfilerTimer) {
-          if (__DEV__) {
-            const prevCurrentFiberInDEV = currentDebugFiberInDEV;
-            setCurrentDebugFiberInDEV(finishedWork);
-            invokeGuardedCallback(
-              null,
-              commitLayoutEffectsForProfiler,
-              null,
-              finishedWork,
-              finishedRoot,
-            );
-            if (hasCaughtError()) {
-              const error = clearCaughtError();
-              captureCommitPhaseError(finishedWork, error);
-            }
-            if (prevCurrentFiberInDEV !== null) {
-              setCurrentDebugFiberInDEV(prevCurrentFiberInDEV);
-            } else {
-              resetCurrentDebugFiberInDEV();
-            }
-          } else {
-            try {
-              commitLayoutEffectsForProfiler(finishedWork, finishedRoot);
-            } catch (error) {
-              captureCommitPhaseError(finishedWork, error);
-            }
-          }
-        }
-      }
-
-      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.
-        if (prevProfilerOnStack !== null) {
-          prevProfilerOnStack.stateNode.effectDuration +=
-            finishedWork.stateNode.effectDuration;
-        }
-
-        nearestProfilerOnStack = prevProfilerOnStack;
-      }
-      break;
-    }
-
-    // case Offscreen: {
-    //   TODO: Fast path to invoke all nested layout effects when Offscren goes from hidden to visible.
-    //   break;
-    // }
-
-    default: {
-      let child = finishedWork.child;
-      while (child !== null) {
-        const primarySubtreeFlags = finishedWork.subtreeFlags & LayoutMask;
-        if (primarySubtreeFlags !== NoFlags) {
-          if (__DEV__) {
-            const prevCurrentFiberInDEV = currentDebugFiberInDEV;
-            setCurrentDebugFiberInDEV(child);
-            invokeGuardedCallback(
-              null,
-              recursivelyCommitLayoutEffects,
-              null,
-              child,
-              finishedRoot,
-            );
-            if (hasCaughtError()) {
-              const error = clearCaughtError();
-              captureCommitPhaseError(child, error);
-            }
-            if (prevCurrentFiberInDEV !== null) {
-              setCurrentDebugFiberInDEV(prevCurrentFiberInDEV);
-            } else {
-              resetCurrentDebugFiberInDEV();
-            }
-          } else {
-            try {
-              recursivelyCommitLayoutEffects(child, finishedRoot);
-            } catch (error) {
-              captureCommitPhaseError(child, error);
-            }
-          }
-        }
-        child = child.sibling;
-      }
-
-      const primaryFlags = flags & (Update | Callback);
-      if (primaryFlags !== NoFlags) {
-        switch (tag) {
-          case FunctionComponent:
-          case ForwardRef:
-          case SimpleMemoComponent: {
-            if (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
-                commitHookEffectListMount(
-                  HookLayout | HookHasEffect,
-                  finishedWork,
-                );
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
-              }
-            } else {
-              commitHookEffectListMount(
-                HookLayout | HookHasEffect,
-                finishedWork,
-              );
-            }
-            break;
-          }
-          case ClassComponent: {
-            // NOTE: Layout effect durations are measured within this function.
-            commitLayoutEffectsForClassComponent(finishedWork);
-            break;
-          }
-          case HostRoot: {
-            commitLayoutEffectsForHostRoot(finishedWork);
-            break;
-          }
-          case HostComponent: {
-            commitLayoutEffectsForHostComponent(finishedWork);
-            break;
-          }
-          case SuspenseComponent: {
-            commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-            break;
-          }
-          case FundamentalComponent:
-          case HostPortal:
-          case HostText:
-          case IncompleteClassComponent:
-          case LegacyHiddenComponent:
-          case OffscreenComponent:
-          case ScopeComponent:
-          case SuspenseListComponent: {
-            // We have no life-cycles associated with these component types.
-            break;
-          }
-          default: {
-            invariant(
-              false,
-              'This unit of work tag should not have side-effects. This error is ' +
-                'likely caused by a bug in React. Please file an issue.',
-            );
-          }
-        }
-      }
-
-      if (enableScopeAPI) {
-        // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
-        if (flags & Ref && tag !== ScopeComponent) {
-          commitAttachRef(finishedWork);
-        }
-      } else {
-        if (flags & Ref) {
-          commitAttachRef(finishedWork);
-        }
-      }
-      break;
-    }
-  }
-}
-
-function iterativelyCommitLayoutEffects_begin(
-  subtreeRoot: Fiber,
-  finishedRoot: FiberRoot,
-) {
-  while (nextEffect !== null) {
-    const finishedWork: Fiber = nextEffect;
-    const firstChild = finishedWork.child;
-
-    if (
-      (finishedWork.subtreeFlags & LayoutMask) !== NoFlags &&
-      firstChild !== null
-    ) {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.tag === Profiler
-      ) {
-        const prevProfilerOnStack = nearestProfilerOnStack;
-        nearestProfilerOnStack = finishedWork;
-
-        let child = firstChild;
-        while (child !== null) {
-          nextEffect = child;
-          iterativelyCommitLayoutEffects_begin(child, finishedRoot);
-          child = child.sibling;
-        }
-        nextEffect = finishedWork;
-
-        if ((finishedWork.flags & LayoutMask) !== NoFlags) {
-          if (__DEV__) {
-            setCurrentDebugFiberInDEV(finishedWork);
-            invokeGuardedCallback(
-              null,
-              commitLayoutEffectsForProfiler,
-              null,
-              finishedWork,
-              finishedRoot,
-            );
-            if (hasCaughtError()) {
-              const error = clearCaughtError();
-              captureCommitPhaseError(finishedWork, error);
-            }
-            resetCurrentDebugFiberInDEV();
-          } else {
-            try {
-              commitLayoutEffectsForProfiler(finishedWork, finishedRoot);
-            } catch (error) {
-              captureCommitPhaseError(finishedWork, error);
-            }
-          }
-        }
-
-        // 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.
-        if (prevProfilerOnStack !== null) {
-          prevProfilerOnStack.stateNode.effectDuration +=
-            finishedWork.stateNode.effectDuration;
-        }
-        nearestProfilerOnStack = prevProfilerOnStack;
-
-        if (finishedWork === subtreeRoot) {
-          nextEffect = null;
-          return;
-        }
-        const sibling = finishedWork.sibling;
-        if (sibling !== null) {
-          warnIfWrongReturnPointer(finishedWork.return, sibling);
-          nextEffect = sibling;
-        } else {
-          nextEffect = finishedWork.return;
-          iterativelyCommitLayoutEffects_complete(subtreeRoot, finishedRoot);
-        }
-      } else {
-        warnIfWrongReturnPointer(finishedWork, firstChild);
-        nextEffect = firstChild;
-      }
-    } else {
-      iterativelyCommitLayoutEffects_complete(subtreeRoot, finishedRoot);
-    }
-  }
-}
-
-function iterativelyCommitLayoutEffects_complete(
-  subtreeRoot: Fiber,
-  finishedRoot: FiberRoot,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-
-    if ((fiber.flags & LayoutMask) !== NoFlags) {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitLayoutEffectsOnFiber,
-          null,
-          finishedRoot,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitLayoutEffectsOnFiber(finishedRoot, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, error);
-        }
-      }
-    }
-
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
-    }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      warnIfWrongReturnPointer(fiber.return, sibling);
-      nextEffect = sibling;
-      return;
-    }
-
-    nextEffect = nextEffect.return;
-  }
-}
-
-function commitLayoutEffectsOnFiber(
-  finishedRoot: FiberRoot,
-  finishedWork: Fiber,
-) {
-  const tag = finishedWork.tag;
-  const flags = finishedWork.flags;
-  if ((flags & (Update | Callback)) !== NoFlags) {
-    switch (tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
-          try {
-            startLayoutEffectTimer();
-            commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-          } finally {
-            recordLayoutEffectDuration(finishedWork);
-          }
-        } else {
-          commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-        }
-        break;
-      }
-      case ClassComponent: {
-        // NOTE: Layout effect durations are measured within this function.
-        commitLayoutEffectsForClassComponent(finishedWork);
-        break;
-      }
-      case HostRoot: {
-        commitLayoutEffectsForHostRoot(finishedWork);
-        break;
-      }
-      case HostComponent: {
-        commitLayoutEffectsForHostComponent(finishedWork);
-        break;
-      }
-      case Profiler: {
-        commitLayoutEffectsForProfiler(finishedWork, finishedRoot);
-        break;
-      }
-      case SuspenseComponent: {
-        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-        break;
-      }
-      case FundamentalComponent:
-      case HostPortal:
-      case HostText:
-      case IncompleteClassComponent:
-      case LegacyHiddenComponent:
-      case OffscreenComponent:
-      case ScopeComponent:
-      case SuspenseListComponent: {
-        // We have no life-cycles associated with these component types.
-        break;
-      }
-      default: {
-        invariant(
-          false,
-          'This unit of work tag should not have side-effects. This error is ' +
-            'likely caused by a bug in React. Please file an issue.',
-        );
-      }
-    }
-  }
-
-  if (enableScopeAPI) {
-    // TODO: This is a temporary solution that allowed us to transition away from React Flare on www.
-    if (flags & Ref && tag !== ScopeComponent) {
-      commitAttachRef(finishedWork);
-    }
-  } else {
-    if (flags & Ref) {
-      commitAttachRef(finishedWork);
-    }
-  }
-}
-
-function commitLayoutEffectsForProfiler(
-  finishedWork: Fiber,
-  finishedRoot: FiberRoot,
-) {
-  if (enableProfilerTimer) {
-    const flags = finishedWork.flags;
-    const current = finishedWork.alternate;
-
-    const {onCommit, onRender} = finishedWork.memoizedProps;
-    const {effectDuration} = finishedWork.stateNode;
-
-    const commitTime = getCommitTime();
-
-    const OnRenderFlag = Update;
-    const OnCommitFlag = Callback;
-
-    let phase = current === null ? 'mount' : 'update';
-    if (enableProfilerNestedUpdatePhase) {
-      if (isCurrentUpdateNested()) {
-        phase = 'nested-update';
-      }
-    }
-
-    if ((flags & OnRenderFlag) !== NoFlags && typeof onRender === 'function') {
-      if (enableSchedulerTracing) {
-        onRender(
-          finishedWork.memoizedProps.id,
-          phase,
-          finishedWork.actualDuration,
-          finishedWork.treeBaseDuration,
-          finishedWork.actualStartTime,
-          commitTime,
-          finishedRoot.memoizedInteractions,
-        );
-      } else {
-        onRender(
-          finishedWork.memoizedProps.id,
-          phase,
-          finishedWork.actualDuration,
-          finishedWork.treeBaseDuration,
-          finishedWork.actualStartTime,
-          commitTime,
-        );
-      }
-    }
-
-    if (enableProfilerCommitHooks) {
-      if (
-        (flags & OnCommitFlag) !== NoFlags &&
-        typeof onCommit === 'function'
-      ) {
-        if (enableSchedulerTracing) {
-          onCommit(
-            finishedWork.memoizedProps.id,
-            phase,
-            effectDuration,
-            commitTime,
-            finishedRoot.memoizedInteractions,
-          );
-        } else {
-          onCommit(
-            finishedWork.memoizedProps.id,
-            phase,
-            effectDuration,
-            commitTime,
-          );
-        }
-      }
-    }
-  }
-}
-
-function commitLayoutEffectsForClassComponent(finishedWork: Fiber) {
-  const instance = finishedWork.stateNode;
-  const current = finishedWork.alternate;
-  if (finishedWork.flags & Update) {
-    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 === finishedWork.elementType &&
-          !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.',
-              getComponentName(finishedWork.type) || 'instance',
-            );
-          }
-          if (instance.state !== finishedWork.memoizedState) {
-            console.error(
-              'Expected %s state to match memoized state before ' +
-                'componentDidMount. ' +
-                'This might either be because of a bug in React, or because ' +
-                'a component reassigns its own `this.state`. ' +
-                'Please file an issue.',
-              getComponentName(finishedWork.type) || 'instance',
-            );
-          }
-        }
-      }
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          instance.componentDidMount();
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
-        }
-      } else {
-        instance.componentDidMount();
-      }
-    } else {
-      const prevProps =
-        finishedWork.elementType === finishedWork.type
-          ? current.memoizedProps
-          : resolveDefaultProps(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 === finishedWork.elementType &&
-          !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.',
-              getComponentName(finishedWork.type) || 'instance',
-            );
-          }
-          if (instance.state !== finishedWork.memoizedState) {
-            console.error(
-              'Expected %s state to match memoized state before ' +
-                'componentDidUpdate. ' +
-                'This might either be because of a bug in React, or because ' +
-                'a component reassigns its own `this.state`. ' +
-                'Please file an issue.',
-              getComponentName(finishedWork.type) || 'instance',
-            );
-          }
-        }
-      }
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          instance.componentDidUpdate(
-            prevProps,
-            prevState,
-            instance.__reactInternalSnapshotBeforeUpdate,
-          );
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
-        }
-      } else {
-        instance.componentDidUpdate(
-          prevProps,
-          prevState,
-          instance.__reactInternalSnapshotBeforeUpdate,
-        );
-      }
-    }
-  }
-
-  // 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<*> | null = (finishedWork.updateQueue: any);
-  if (updateQueue !== null) {
-    if (__DEV__) {
-      if (
-        finishedWork.type === finishedWork.elementType &&
-        !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.',
-            getComponentName(finishedWork.type) || 'instance',
-          );
-        }
-        if (instance.state !== finishedWork.memoizedState) {
-          console.error(
-            'Expected %s state to match memoized state before ' +
-              'processing the update queue. ' +
-              'This might either be because of a bug in React, or because ' +
-              'a component reassigns its own `this.state`. ' +
-              'Please file an issue.',
-            getComponentName(finishedWork.type) || '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.
-    commitUpdateQueue(finishedWork, updateQueue, instance);
-  }
-}
-
-function commitLayoutEffectsForHostRoot(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<*> | null = (finishedWork.updateQueue: any);
-  if (updateQueue !== null) {
-    let instance = null;
-    if (finishedWork.child !== null) {
-      switch (finishedWork.child.tag) {
-        case HostComponent:
-          instance = getPublicInstance(finishedWork.child.stateNode);
-          break;
-        case ClassComponent:
-          instance = finishedWork.child.stateNode;
-          break;
-      }
-    }
-    commitUpdateQueue(finishedWork, updateQueue, instance);
-  }
-}
-
-function commitLayoutEffectsForHostComponent(finishedWork: Fiber) {
-  const instance: Instance = finishedWork.stateNode;
-  const current = finishedWork.alternate;
-
-  // 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 && finishedWork.flags & Update) {
-    const type = finishedWork.type;
-    const props = finishedWork.memoizedProps;
-    commitMount(instance, type, props, finishedWork);
-  }
-}
-
-function hideOrUnhideAllChildren(finishedWork, isHidden) {
-  if (supportsMutation) {
-    // We only have the top Fiber that was inserted but we need to recurse down its
-    // children to find all the terminal nodes.
-    let node: Fiber = finishedWork;
-    while (true) {
-      if (node.tag === HostComponent) {
-        const instance = node.stateNode;
-        if (isHidden) {
-          hideInstance(instance);
-        } else {
-          unhideInstance(node.stateNode, node.memoizedProps);
-        }
-      } else if (node.tag === HostText) {
-        const instance = node.stateNode;
-        if (isHidden) {
-          hideTextInstance(instance);
-        } else {
-          unhideTextInstance(instance, node.memoizedProps);
-        }
-      } else if (
-        (node.tag === OffscreenComponent ||
-          node.tag === LegacyHiddenComponent) &&
-        (node.memoizedState: OffscreenState) !== null &&
-        node !== finishedWork
-      ) {
-        // Found a nested Offscreen component that is hidden. Don't search
-        // any deeper. This tree should remain hidden.
-      } else if (node.child !== null) {
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
-      if (node === finishedWork) {
-        return;
-      }
-      while (node.sibling === null) {
-        if (node.return === null || node.return === finishedWork) {
-          return;
-        }
-        node = node.return;
-      }
-      node.sibling.return = node.return;
-      node = node.sibling;
-    }
-  }
-}
-
-export function commitPassiveMountEffects(
-  root: FiberRoot,
-  firstChild: Fiber,
-): void {
-  if (enableRecursiveCommitTraversal) {
-    recursivelyCommitPassiveMountEffects(root, firstChild);
-  } else {
-    nextEffect = firstChild;
-    iterativelyCommitPassiveMountEffects_begin(firstChild, root);
-  }
-}
-
-function recursivelyCommitPassiveMountEffects(
-  root: FiberRoot,
-  firstChild: Fiber,
-): void {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    let prevProfilerOnStack = null;
-    if (enableProfilerTimer && enableProfilerCommitHooks) {
-      if (fiber.tag === Profiler) {
-        prevProfilerOnStack = nearestProfilerOnStack;
-        nearestProfilerOnStack = fiber;
-      }
-    }
-
-    const primarySubtreeFlags = fiber.subtreeFlags & PassiveMask;
-
-    if (fiber.child !== null && primarySubtreeFlags !== NoFlags) {
-      recursivelyCommitPassiveMountEffects(root, fiber.child);
-    }
-
-    if ((fiber.flags & Passive) !== NoFlags) {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitPassiveMountOnFiber,
-          null,
-          root,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitPassiveMountOnFiber(root, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, error);
-        }
-      }
-    }
-
-    if (enableProfilerTimer && enableProfilerCommitHooks) {
-      if (fiber.tag === Profiler) {
-        // Bubble times to the next nearest ancestor Profiler.
-        // After we process that Profiler, we'll bubble further up.
-        if (prevProfilerOnStack !== null) {
-          prevProfilerOnStack.stateNode.passiveEffectDuration +=
-            fiber.stateNode.passiveEffectDuration;
-        }
-
-        nearestProfilerOnStack = prevProfilerOnStack;
-      }
-    }
-
-    fiber = fiber.sibling;
-  }
-}
-
-function iterativelyCommitPassiveMountEffects_begin(
-  subtreeRoot: Fiber,
-  root: FiberRoot,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
-    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        fiber.tag === Profiler
-      ) {
-        const prevProfilerOnStack = nearestProfilerOnStack;
-        nearestProfilerOnStack = fiber;
-
-        let child = firstChild;
-        while (child !== null) {
-          nextEffect = child;
-          iterativelyCommitPassiveMountEffects_begin(child, root);
-          child = child.sibling;
-        }
-        nextEffect = fiber;
-
-        if ((fiber.flags & PassiveMask) !== NoFlags) {
-          if (__DEV__) {
-            setCurrentDebugFiberInDEV(fiber);
-            invokeGuardedCallback(
-              null,
-              commitProfilerPassiveEffect,
-              null,
-              root,
-              fiber,
-            );
-            if (hasCaughtError()) {
-              const error = clearCaughtError();
-              captureCommitPhaseError(fiber, error);
-            }
-            resetCurrentDebugFiberInDEV();
-          } else {
-            try {
-              commitProfilerPassiveEffect(root, fiber);
-            } catch (error) {
-              captureCommitPhaseError(fiber, error);
-            }
-          }
-        }
-
-        // Bubble times to the next nearest ancestor Profiler.
-        // After we process that Profiler, we'll bubble further up.
-        if (prevProfilerOnStack !== null) {
-          prevProfilerOnStack.stateNode.passiveEffectDuration +=
-            fiber.stateNode.passiveEffectDuration;
-        }
-
-        nearestProfilerOnStack = prevProfilerOnStack;
-
-        if (fiber === subtreeRoot) {
-          nextEffect = null;
-          return;
-        }
-        const sibling = fiber.sibling;
-        if (sibling !== null) {
-          warnIfWrongReturnPointer(fiber.return, sibling);
-          nextEffect = sibling;
-        } else {
-          nextEffect = fiber.return;
-          iterativelyCommitPassiveMountEffects_complete(subtreeRoot, root);
-        }
-      } else {
-        warnIfWrongReturnPointer(fiber, firstChild);
-        nextEffect = firstChild;
-      }
-    } else {
-      iterativelyCommitPassiveMountEffects_complete(subtreeRoot, root);
-    }
-  }
-}
-
-function iterativelyCommitPassiveMountEffects_complete(
-  subtreeRoot: Fiber,
-  root: FiberRoot,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if ((fiber.flags & Passive) !== NoFlags) {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitPassiveMountOnFiber,
-          null,
-          root,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitPassiveMountOnFiber(root, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, error);
-        }
-      }
-    }
 
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
       return;
     }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      warnIfWrongReturnPointer(fiber.return, sibling);
-      nextEffect = sibling;
+    case HostText: {
+      // We have no life-cycles associated with text.
       return;
     }
-
-    nextEffect = fiber.return;
-  }
-}
-
-export function commitPassiveUnmountEffects(firstChild: Fiber): void {
-  if (enableRecursiveCommitTraversal) {
-    recursivelyCommitPassiveUnmountEffects(firstChild);
-  } else {
-    nextEffect = firstChild;
-    iterativelyCommitPassiveUnmountEffects_begin();
-  }
-}
-
-function recursivelyCommitPassiveUnmountEffects(firstChild: Fiber): void {
-  let fiber = firstChild;
-  while (fiber !== null) {
-    const deletions = fiber.deletions;
-    if (deletions !== null) {
-      for (let i = 0; i < deletions.length; i++) {
-        const fiberToDelete = deletions[i];
-        recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
-          fiberToDelete,
-        );
-
-        // Now that passive effects have been processed, it's safe to detach lingering pointers.
-        detachFiberAfterEffects(fiberToDelete);
-      }
-    }
-
-    const child = fiber.child;
-    if (child !== null) {
-      // If any children have passive effects then traverse the subtree.
-      // Note that this requires checking subtreeFlags of the current Fiber,
-      // rather than the subtreeFlags/effectsTag of the first child,
-      // since that would not cover passive effects in siblings.
-      const passiveFlags = fiber.subtreeFlags & PassiveMask;
-      if (passiveFlags !== NoFlags) {
-        recursivelyCommitPassiveUnmountEffects(child);
-      }
-    }
-
-    const primaryFlags = fiber.flags & Passive;
-    if (primaryFlags !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
-
-    fiber = fiber.sibling;
-  }
-}
-
-function iterativelyCommitPassiveUnmountEffects_begin() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const child = fiber.child;
-
-    // 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 fiberToDelete = deletions[i];
-        nextEffect = fiberToDelete;
-        iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
-          fiberToDelete,
-        );
-
-        // Now that passive effects have been processed, it's safe to detach lingering pointers.
-        detachFiberAfterEffects(fiberToDelete);
-      }
-      nextEffect = fiber;
-    }
-
-    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
-      warnIfWrongReturnPointer(fiber, child);
-      nextEffect = child;
-    } else {
-      iterativelyCommitPassiveUnmountEffects_complete();
-    }
-  }
-}
-
-function iterativelyCommitPassiveUnmountEffects_complete() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if ((fiber.flags & Passive) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      warnIfWrongReturnPointer(fiber.return, sibling);
-      nextEffect = sibling;
+    case HostPortal: {
+      // We have no life-cycles associated with portals.
       return;
     }
+    case Profiler: {
+      if (enableProfilerTimer) {
+        const {onCommit, onRender} = finishedWork.memoizedProps;
+        const {effectDuration} = finishedWork.stateNode;
 
-    nextEffect = fiber.return;
-  }
-}
-
-function recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(
-  fiberToDelete: Fiber,
-): void {
-  if ((fiberToDelete.subtreeFlags & PassiveStatic) !== NoFlags) {
-    // If any children have passive effects then traverse the subtree.
-    // Note that this requires checking subtreeFlags of the current Fiber,
-    // rather than the subtreeFlags/effectsTag of the first child,
-    // since that would not cover passive effects in siblings.
-    let child = fiberToDelete.child;
-    while (child !== null) {
-      recursivelyCommitPassiveUnmountEffectsInsideOfDeletedTree(child);
-      child = child.sibling;
-    }
-  }
-
-  if ((fiberToDelete.flags & PassiveStatic) !== NoFlags) {
-    setCurrentDebugFiberInDEV(fiberToDelete);
-    commitPassiveUnmountInsideDeletedTreeOnFiber(fiberToDelete);
-    resetCurrentDebugFiberInDEV();
-  }
-}
+        const commitTime = getCommitTime();
 
-function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_begin(
-  deletedSubtreeRoot: Fiber,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const child = fiber.child;
-    if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
-      warnIfWrongReturnPointer(fiber, child);
-      nextEffect = child;
-    } else {
-      iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
-        deletedSubtreeRoot,
-      );
-    }
-  }
-}
+        let phase = current === null ? 'mount' : 'update';
+        if (enableProfilerNestedUpdatePhase) {
+          if (isCurrentUpdateNested()) {
+            phase = 'nested-update';
+          }
+        }
 
-function iterativelyCommitPassiveUnmountEffectsInsideOfDeletedTree_complete(
-  deletedSubtreeRoot: Fiber,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
+        if (typeof onRender === 'function') {
+          if (enableSchedulerTracing) {
+            onRender(
+              finishedWork.memoizedProps.id,
+              phase,
+              finishedWork.actualDuration,
+              finishedWork.treeBaseDuration,
+              finishedWork.actualStartTime,
+              commitTime,
+              finishedRoot.memoizedInteractions,
+            );
+          } else {
+            onRender(
+              finishedWork.memoizedProps.id,
+              phase,
+              finishedWork.actualDuration,
+              finishedWork.treeBaseDuration,
+              finishedWork.actualStartTime,
+              commitTime,
+            );
+          }
+        }
+
+        if (enableProfilerCommitHooks) {
+          if (typeof onCommit === 'function') {
+            if (enableSchedulerTracing) {
+              onCommit(
+                finishedWork.memoizedProps.id,
+                phase,
+                effectDuration,
+                commitTime,
+                finishedRoot.memoizedInteractions,
+              );
+            } else {
+              onCommit(
+                finishedWork.memoizedProps.id,
+                phase,
+                effectDuration,
+                commitTime,
+              );
+            }
+          }
 
-    if (fiber === deletedSubtreeRoot) {
-      nextEffect = null;
+          // 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.
+          enqueuePendingPassiveProfilerEffect(finishedWork);
+
+          // 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.
+          let parentFiber = finishedWork.return;
+          while (parentFiber !== null) {
+            if (parentFiber.tag === Profiler) {
+              const parentStateNode = parentFiber.stateNode;
+              parentStateNode.effectDuration += effectDuration;
+              break;
+            }
+            parentFiber = parentFiber.return;
+          }
+        }
+      }
       return;
     }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      warnIfWrongReturnPointer(fiber.return, sibling);
-      nextEffect = sibling;
+    case SuspenseComponent: {
+      commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
       return;
     }
-
-    nextEffect = fiber.return;
+    case SuspenseListComponent:
+    case IncompleteClassComponent:
+    case FundamentalComponent:
+    case ScopeComponent:
+    case OffscreenComponent:
+    case LegacyHiddenComponent:
+      return;
   }
+  invariant(
+    false,
+    'This unit of work tag should not have side-effects. This error is ' +
+      'likely caused by a bug in React. Please file an issue.',
+  );
 }
 
-function detachFiberAfterEffects(fiber: Fiber): void {
-  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
-  // Note that we already cleared the return pointer in detachFiberMutation().
-  fiber.child = null;
-  fiber.deletions = null;
-  fiber.dependencies = null;
-  fiber.memoizedProps = null;
-  fiber.memoizedState = null;
-  fiber.pendingProps = null;
-  fiber.sibling = null;
-  fiber.stateNode = null;
-  fiber.updateQueue = null;
-
-  if (__DEV__) {
-    fiber._debugOwner = null;
+function hideOrUnhideAllChildren(finishedWork, isHidden) {
+  if (supportsMutation) {
+    // We only have the top Fiber that was inserted but we need to recurse down its
+    // children to find all the terminal nodes.
+    let node: Fiber = finishedWork;
+    while (true) {
+      if (node.tag === HostComponent) {
+        const instance = node.stateNode;
+        if (isHidden) {
+          hideInstance(instance);
+        } else {
+          unhideInstance(node.stateNode, node.memoizedProps);
+        }
+      } else if (node.tag === HostText) {
+        const instance = node.stateNode;
+        if (isHidden) {
+          hideTextInstance(instance);
+        } else {
+          unhideTextInstance(instance, node.memoizedProps);
+        }
+      } else if (
+        (node.tag === OffscreenComponent ||
+          node.tag === LegacyHiddenComponent) &&
+        (node.memoizedState: OffscreenState) !== null &&
+        node !== finishedWork
+      ) {
+        // Found a nested Offscreen component that is hidden. Don't search
+        // any deeper. This tree should remain hidden.
+      } else if (node.child !== null) {
+        node.child.return = node;
+        node = node.child;
+        continue;
+      }
+      if (node === finishedWork) {
+        return;
+      }
+      while (node.sibling === null) {
+        if (node.return === null || node.return === finishedWork) {
+          return;
+        }
+        node = node.return;
+      }
+      node.sibling.return = node.return;
+      node = node.sibling;
+    }
   }
 }
 
@@ -2092,7 +943,9 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if ((tag & HookLayout) !== NoHookEffect) {
+              if ((tag & HookPassive) !== NoHookEffect) {
+                enqueuePendingPassiveHookEffectUnmount(current, effect);
+              } else {
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -2206,24 +1059,32 @@ function commitNestedUnmounts(
 }
 
 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
+  // Cut off the return pointers to disconnect it from the tree. Ideally, we
+  // should clear the child pointer of the parent alternate to let this
   // get GC:ed but we don't know which for sure which parent is the current
-  // 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.
+  // 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: we cannot null out sibling here, otherwise it can cause issues
+  // with findDOMNode and how it requires the sibling field to carry out
+  // traversal in a later effect. See PR #16820. We now clear the sibling
+  // field after effects, see: detachFiberAfterEffects.
   //
-  // 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).
-  const alternate = fiber.alternate;
-  if (alternate !== null) {
-    alternate.return = null;
-    fiber.alternate = null;
-  }
+  // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.
+  // It may be required if the current component is an error boundary,
+  // and one of its descendants throws while unmounting a passive effect.
+  fiber.alternate = null;
+  fiber.child = null;
+  fiber.dependencies = null;
+  fiber.firstEffect = null;
+  fiber.lastEffect = null;
+  fiber.memoizedProps = null;
+  fiber.memoizedState = null;
+  fiber.pendingProps = null;
   fiber.return = null;
+  fiber.updateQueue = null;
+  if (__DEV__) {
+    fiber._debugOwner = null;
+  }
 }
 
 function emptyPortalContainer(current: Fiber) {
@@ -2459,9 +1320,9 @@ function insertOrAppendPlacementNode(
 }
 
 function unmountHostComponents(
-  finishedRoot,
-  current,
-  renderPriorityLevel,
+  finishedRoot: FiberRoot,
+  current: Fiber,
+  renderPriorityLevel: ReactPriorityLevel,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
@@ -2915,7 +1776,7 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
 // 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(
+export function isSuspenseBoundaryBeingHidden(
   current: Fiber | null,
   finishedWork: Fiber,
 ): boolean {
@@ -2929,266 +1790,20 @@ function isSuspenseBoundaryBeingHidden(
   return false;
 }
 
-function commitResetTextContent(current: Fiber): void {
+function commitResetTextContent(current: Fiber) {
   if (!supportsMutation) {
     return;
   }
   resetTextContent(current.stateNode);
 }
 
-function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
-        recordPassiveEffectDuration(finishedWork);
-      } else {
-        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
-      }
-      break;
-    }
-  }
-}
-
-function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
-  switch (current.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        current.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        commitHookEffectListUnmount(HookPassive, current);
-        recordPassiveEffectDuration(current);
-      } else {
-        commitHookEffectListUnmount(HookPassive, current);
-      }
-      break;
-    }
-  }
-}
-
-function commitPassiveMountOnFiber(
-  finishedRoot: FiberRoot,
-  finishedWork: Fiber,
-): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        try {
-          commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
-        } finally {
-          recordPassiveEffectDuration(finishedWork);
-        }
-      } else {
-        commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
-      }
-      break;
-    }
-    case Profiler: {
-      commitProfilerPassiveEffect(finishedRoot, finishedWork);
-      break;
-    }
-  }
-}
-
-function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        invokeGuardedCallback(null, instance.componentDidMount, instance);
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(fiber, instance);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
-        }
-        break;
-      }
-    }
-  }
-}
-
-// TODO: Convert this to iteration instead of recursion, too. Leaving this for
-// a follow up because the flag is off.
-export function commitDoubleInvokeEffectsInDEV(
-  fiber: Fiber,
-  hasPassiveEffects: boolean,
-) {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // Never double-invoke effects for legacy roots.
-    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
-      return;
-    }
-
-    setCurrentDebugFiberInDEV(fiber);
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(
-        fiber,
-        MountPassiveDev,
-        invokePassiveEffectUnmountInDEV,
-      );
-    }
-
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
-    }
-    resetCurrentDebugFiberInDEV();
-  }
-}
-
-function invokeEffectsInDev(
-  firstChild: Fiber,
-  fiberFlags: Flags,
-  invokeEffectFn: (fiber: Fiber) => void,
-): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
-    let fiber = firstChild;
-    while (fiber !== null) {
-      if (fiber.child !== null) {
-        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
-        if (primarySubtreeFlag !== NoFlags) {
-          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
-        }
-      }
-
-      if ((fiber.flags & fiberFlags) !== NoFlags) {
-        invokeEffectFn(fiber);
-      }
-      fiber = fiber.sibling;
-    }
-  }
-}
-
-let didWarnWrongReturnPointer = false;
-function warnIfWrongReturnPointer(returnFiber, child) {
-  if (__DEV__) {
-    if (!didWarnWrongReturnPointer && child.return !== returnFiber) {
-      didWarnWrongReturnPointer = true;
-      console.error(
-        'Internal React error: Return pointer is inconsistent ' +
-          'with parent.',
-      );
-    }
-  }
-}
+export {
+  commitBeforeMutationLifeCycles,
+  commitResetTextContent,
+  commitPlacement,
+  commitDeletion,
+  commitWork,
+  commitLifeCycles,
+  commitAttachRef,
+  commitDetachRef,
+};
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index da98e0c4de34..89d2193176c2 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane';
 import type {
   ReactFundamentalComponentInstance,
   ReactScopeInstance,
@@ -57,28 +57,8 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
-import {
-  NoMode,
-  BlockingMode,
-  ConcurrentMode,
-  ProfileMode,
-} from './ReactTypeOfMode';
-import {
-  Ref,
-  Update,
-  Callback,
-  Passive,
-  Deletion,
-  NoFlags,
-  DidCapture,
-  Snapshot,
-  Visibility,
-  MutationMask,
-  LayoutMask,
-  PassiveMask,
-  StaticMask,
-  PerformedWork,
-} from './ReactFiberFlags';
+import {NoMode, BlockingMode, ProfileMode} from './ReactTypeOfMode';
+import {Ref, Update, NoFlags, DidCapture, Snapshot} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -148,16 +128,9 @@ import {
   renderHasNotSuspendedYet,
   popRenderLanes,
   getRenderTargetTime,
-  subtreeRenderLanes,
 } from './ReactFiberWorkLoop.new';
 import {createFundamentalStateInstance} from './ReactFiberFundamental.new';
-import {
-  OffscreenLane,
-  SomeRetryLane,
-  NoLanes,
-  includesSomeLane,
-  mergeLanes,
-} from './ReactFiberLane';
+import {OffscreenLane, SomeRetryLane} from './ReactFiberLane';
 import {resetChildFibers} from './ReactChildFiber.new';
 import {createScopeInstance} from './ReactFiberScope.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
@@ -172,31 +145,6 @@ function markRef(workInProgress: Fiber) {
   workInProgress.flags |= Ref;
 }
 
-function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
-  const didBailout = current !== null && current.child === completedWork.child;
-  if (didBailout) {
-    return true;
-  }
-
-  if ((completedWork.flags & Deletion) !== NoFlags) {
-    return false;
-  }
-
-  // TODO: If we move the `hadNoMutationsEffects` call after `bubbleProperties`
-  // then we only have to check the `completedWork.subtreeFlags`.
-  let child = completedWork.child;
-  while (child !== null) {
-    if ((child.flags & (MutationMask | Deletion)) !== NoFlags) {
-      return false;
-    }
-    if ((child.subtreeFlags & (MutationMask | Deletion)) !== NoFlags) {
-      return false;
-    }
-    child = child.sibling;
-  }
-  return true;
-}
-
 let appendAllChildren;
 let updateHostContainer;
 let updateHostComponent;
@@ -241,7 +189,7 @@ if (supportsMutation) {
     }
   };
 
-  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
+  updateHostContainer = function(workInProgress: Fiber) {
     // Noop
   };
   updateHostComponent = function(
@@ -485,13 +433,13 @@ if (supportsMutation) {
       node = node.sibling;
     }
   };
-  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
+  updateHostContainer = function(workInProgress: Fiber) {
     const portalOrRoot: {
       containerInfo: Container,
       pendingChildren: ChildSet,
       ...
     } = workInProgress.stateNode;
-    const childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
+    const childrenUnchanged = workInProgress.firstEffect === null;
     if (childrenUnchanged) {
       // No changes, just reuse the existing instance.
     } else {
@@ -516,7 +464,7 @@ if (supportsMutation) {
     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 childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
+    const childrenUnchanged = workInProgress.firstEffect === null;
     if (childrenUnchanged && oldProps === newProps) {
       // No changes, just reuse the existing instance.
       // Note that this might release a previous clone.
@@ -599,7 +547,7 @@ if (supportsMutation) {
   };
 } else {
   // No host operations
-  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
+  updateHostContainer = function(workInProgress: Fiber) {
     // Noop
   };
   updateHostComponent = function(
@@ -692,126 +640,6 @@ function cutOffTailIfNeeded(
   }
 }
 
-function bubbleProperties(completedWork: Fiber) {
-  const didBailout =
-    completedWork.alternate !== null &&
-    completedWork.alternate.child === completedWork.child;
-
-  let newChildLanes = NoLanes;
-  let subtreeFlags = 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.
-        actualDuration += child.actualDuration;
-
-        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;
-
-        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 completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -827,16 +655,15 @@ function completeWork(
     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: {
@@ -864,8 +691,7 @@ function completeWork(
           workInProgress.flags |= Snapshot;
         }
       }
-      updateHostContainer(current, workInProgress);
-      bubbleProperties(workInProgress);
+      updateHostContainer(workInProgress);
       return null;
     }
     case HostComponent: {
@@ -892,7 +718,6 @@ function completeWork(
               'caused by a bug in React. Please file an issue.',
           );
           // This can happen when we abort work.
-          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -950,7 +775,6 @@ function completeWork(
           markRef(workInProgress);
         }
       }
-      bubbleProperties(workInProgress);
       return null;
     }
     case HostText: {
@@ -985,58 +809,6 @@ function completeWork(
           );
         }
       }
-      bubbleProperties(workInProgress);
-      return null;
-    }
-    case Profiler: {
-      const didBailout = bubbleProperties(workInProgress);
-      if (!didBailout) {
-        // Use subtreeFlags to determine which commit callbacks should fire.
-        // TODO: Move this logic to the commit phase, since we already check if
-        // a fiber's subtree contains effects. Refactor the commit phase's
-        // depth-first traversal so that we can put work tag-specific logic
-        // before or after committing a subtree's effects.
-        const OnRenderFlag = Update;
-        const OnCommitFlag = Callback;
-        const OnPostCommitFlag = Passive;
-        const subtreeFlags = workInProgress.subtreeFlags;
-        const flags = workInProgress.flags;
-        let newFlags = flags;
-
-        // Call onRender any time this fiber or its subtree are worked on.
-        if (
-          (flags & PerformedWork) !== NoFlags ||
-          (subtreeFlags & PerformedWork) !== NoFlags
-        ) {
-          newFlags |= OnRenderFlag;
-        }
-
-        // Call onCommit only if the subtree contains layout work, or if it
-        // contains deletions, since those might result in unmount work, which
-        // we include in the same measure.
-        // TODO: Can optimize by using a static flag to track whether a tree
-        // contains layout effects, like we do for passive effects.
-        if (
-          (flags & (LayoutMask | Deletion)) !== NoFlags ||
-          (subtreeFlags & (LayoutMask | Deletion)) !== NoFlags
-        ) {
-          newFlags |= OnCommitFlag;
-        }
-
-        // Call onPostCommit only if the subtree contains passive work.
-        // Don't have to check for deletions, because Deletion is already
-        // a passive flag.
-        if (
-          (flags & PassiveMask) !== NoFlags ||
-          (subtreeFlags & PassiveMask) !== NoFlags
-        ) {
-          newFlags |= OnPostCommitFlag;
-        }
-        workInProgress.flags = newFlags;
-      } else {
-        // This fiber and its subtree bailed out, so don't fire any callbacks.
-      }
-
       return null;
     }
     case SuspenseComponent: {
@@ -1056,20 +828,6 @@ function completeWork(
             if (enableSchedulerTracing) {
               markSpawnedWork(OffscreenLane);
             }
-            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 Flow doens't support type casting in combiation with the -= operator
-                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                  }
-                }
-              }
-            }
             return null;
           } else {
             // We should never have been in a hydration state if we didn't have a current.
@@ -1086,20 +844,6 @@ function completeWork(
             // 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 Flow doens't support type casting in combiation with the -= operator
-                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                  }
-                }
-              }
-            }
             return null;
           }
         }
@@ -1115,7 +859,6 @@ function completeWork(
         ) {
           transferActualDuration(workInProgress);
         }
-        // Don't bubble properties in this case.
         return workInProgress;
       }
 
@@ -1169,8 +912,8 @@ function completeWork(
         // TODO: Only schedule updates if not prevDidTimeout.
         if (nextDidTimeout) {
           // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise.
-          // TODO: Move to passive phase
+          // retry listener to the promise. This flag is also used to hide the
+          // primary children.
           workInProgress.flags |= Update;
         }
       }
@@ -1182,7 +925,7 @@ function completeWork(
           // primary children. In mutation mode, we also need the flag to
           // *unhide* children that were previously hidden, so check if this
           // is currently timed out, too.
-          workInProgress.flags |= Update | Visibility;
+          workInProgress.flags |= Update;
         }
       }
       if (
@@ -1191,36 +934,20 @@ function completeWork(
         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 Flow doens't support type casting in combiation with the -= operator
-              workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-            }
-          }
-        }
-      }
       return null;
     }
     case HostPortal:
       popHostContainer(workInProgress);
-      updateHostContainer(current, workInProgress);
+      updateHostContainer(workInProgress);
       if (current === null) {
         preparePortalMount(workInProgress.stateNode.containerInfo);
       }
-      bubbleProperties(workInProgress);
       return null;
     case ContextProvider:
       // Pop provider fiber
       popProvider(workInProgress);
-      bubbleProperties(workInProgress);
       return null;
     case IncompleteClassComponent: {
       // Same as class component case. I put it down here so that the tags are
@@ -1229,7 +956,6 @@ function completeWork(
       if (isLegacyContextProvider(Component)) {
         popLegacyContext(workInProgress);
       }
-      bubbleProperties(workInProgress);
       return null;
     }
     case SuspenseListComponent: {
@@ -1241,7 +967,6 @@ function completeWork(
       if (renderState === null) {
         // We're running in the default, "independent" mode.
         // We don't do anything in this mode.
-        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -1294,8 +1019,12 @@ function completeWork(
 
                 // Rerender the whole list, but this time, we'll force fallbacks
                 // to stay in place.
+                // Reset the effect list before doing the second pass since that's now invalid.
+                if (renderState.lastEffect === null) {
+                  workInProgress.firstEffect = null;
+                }
+                workInProgress.lastEffect = renderState.lastEffect;
                 // Reset the child fibers to their original state.
-                workInProgress.subtreeFlags = NoFlags;
                 resetChildFibers(workInProgress, renderLanes);
 
                 // Set up the Suspense Context to force suspense and immediately
@@ -1307,7 +1036,6 @@ function completeWork(
                     ForceSuspenseFallback,
                   ),
                 );
-                // Don't bubble properties in this case.
                 return workInProgress.child;
               }
               row = row.sibling;
@@ -1364,8 +1092,16 @@ function completeWork(
               !renderedTail.alternate &&
               !getIsHydrating() // We don't cut it if we're hydrating.
             ) {
+              // We need to delete the row we just rendered.
+              // Reset the effect list to what it was before we rendered this
+              // child. The nested children have already appended themselves.
+              const lastEffect = (workInProgress.lastEffect =
+                renderState.lastEffect);
+              // Remove any effects that were appended after this point.
+              if (lastEffect !== null) {
+                lastEffect.nextEffect = null;
+              }
               // We're done.
-              bubbleProperties(workInProgress);
               return null;
             }
           } else if (
@@ -1385,10 +1121,13 @@ function completeWork(
             cutOffTailIfNeeded(renderState, false);
 
             // Since nothing actually suspended, there will nothing to ping this
-            // to get it started back up to attempt the next item. If we can show
-            // them, then they really have the same priority as this render.
-            // So we'll pick it back up the very next render pass once we've had
-            // an opportunity to yield for paint.
+            // 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 (enableSchedulerTracing) {
               markSpawnedWork(SomeRetryLane);
@@ -1420,6 +1159,7 @@ function completeWork(
         const next = renderState.tail;
         renderState.rendering = next;
         renderState.tail = next.sibling;
+        renderState.lastEffect = workInProgress.lastEffect;
         renderState.renderingStartTime = now();
         next.sibling = null;
 
@@ -1437,10 +1177,8 @@ function completeWork(
         }
         pushSuspenseContext(workInProgress, suspenseContext);
         // Do a pass over the next row.
-        // Don't bubble properties in this case.
         return next;
       }
-      bubbleProperties(workInProgress);
       return null;
     }
     case FundamentalComponent: {
@@ -1468,7 +1206,6 @@ function completeWork(
           ): any): Instance);
           fundamentalInstance.instance = instance;
           if (fundamentalImpl.reconcileChildren === false) {
-            bubbleProperties(workInProgress);
             return null;
           }
           appendAllChildren(instance, workInProgress, false, false);
@@ -1491,7 +1228,6 @@ function completeWork(
             markUpdate(workInProgress);
           }
         }
-        bubbleProperties(workInProgress);
         return null;
       }
       break;
@@ -1514,7 +1250,6 @@ function completeWork(
             markRef(workInProgress);
           }
         }
-        bubbleProperties(workInProgress);
         return null;
       }
       break;
@@ -1522,30 +1257,19 @@ function completeWork(
     case OffscreenComponent:
     case LegacyHiddenComponent: {
       popRenderLanes(workInProgress);
-      const nextState: OffscreenState | null = workInProgress.memoizedState;
-      const nextIsHidden = nextState !== null;
-
       if (current !== null) {
+        const nextState: OffscreenState | null = workInProgress.memoizedState;
         const prevState: OffscreenState | null = current.memoizedState;
 
         const prevIsHidden = prevState !== null;
+        const nextIsHidden = nextState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
           newProps.mode !== 'unstable-defer-without-hiding'
         ) {
-          workInProgress.flags |= Update | Visibility;
+          workInProgress.flags |= Update;
         }
       }
-
-      // Don't bubble properties for hidden children.
-      if (
-        !nextIsHidden ||
-        includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) ||
-        (workInProgress.mode & ConcurrentMode) === NoMode
-      ) {
-        bubbleProperties(workInProgress);
-      }
-
       return null;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 37b141839b97..6f2cb9ca400c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -26,16 +26,10 @@ import {
   enableSchedulingProfiler,
   enableNewReconciler,
   decoupleUpdatePriorityFromScheduler,
-  enableDoubleInvokingEffects,
   enableUseRefAccessWarning,
 } from 'shared/ReactFeatureFlags';
 
-import {
-  NoMode,
-  BlockingMode,
-  ConcurrentMode,
-  DebugTracingMode,
-} from './ReactTypeOfMode';
+import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   NoLane,
   NoLanes,
@@ -54,9 +48,6 @@ import {readContext} from './ReactFiberNewContext.new';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
-  PassiveStatic as PassiveStaticEffect,
-  MountLayoutDev as MountLayoutDevEffect,
-  MountPassiveDev as MountPassiveDevEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -475,20 +466,7 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-  ) {
-    workInProgress.flags &= ~(
-      MountPassiveDevEffect |
-      PassiveEffect |
-      MountLayoutDevEffect |
-      UpdateEffect
-    );
-  } else {
-    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
-  }
+  workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
   current.lanes = removeLanes(current.lanes, lanes);
 }
 
@@ -1320,30 +1298,16 @@ function mountEffect(
 ): void {
   if (__DEV__) {
     // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if (typeof jest !== 'undefined') {
+    if ('undefined' !== typeof jest) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-  ) {
-    return mountEffectImpl(
-      MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(
-      PassiveEffect | PassiveStaticEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  }
+  return mountEffectImpl(
+    UpdateEffect | PassiveEffect,
+    HookPassive,
+    create,
+    deps,
+  );
 }
 
 function updateEffect(
@@ -1352,31 +1316,23 @@ function updateEffect(
 ): void {
   if (__DEV__) {
     // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if (typeof jest !== 'undefined') {
+    if ('undefined' !== typeof jest) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-  return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
+  return updateEffectImpl(
+    UpdateEffect | PassiveEffect,
+    HookPassive,
+    create,
+    deps,
+  );
 }
 
 function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-  ) {
-    return mountEffectImpl(
-      MountLayoutDevEffect | UpdateEffect,
-      HookLayout,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
-  }
+  return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
 }
 
 function updateLayoutEffect(
@@ -1435,25 +1391,12 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
-  ) {
-    return mountEffectImpl(
-      MountLayoutDevEffect | UpdateEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
-  } else {
-    return mountEffectImpl(
-      UpdateEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
-  }
+  return mountEffectImpl(
+    UpdateEffect,
+    HookLayout,
+    imperativeHandleEffect.bind(null, create, ref),
+    effectDeps,
+  );
 }
 
 function updateImperativeHandle<T>(
@@ -1734,12 +1677,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      if (__DEV__ && enableDoubleInvokingEffects) {
-        currentlyRenderingFiber.flags |=
-          MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect;
-      } else {
-        currentlyRenderingFiber.flags |= PassiveEffect | PassiveStaticEffect;
-      }
+      currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
       pushEffect(
         HookHasEffect | HookPassive,
         () => {
@@ -1855,7 +1793,7 @@ function dispatchAction<S, A>(
     }
     if (__DEV__) {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if (typeof jest !== 'undefined') {
+      if ('undefined' !== typeof jest) {
         warnIfNotScopedWithMatchingAct(fiber);
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index da5e5cbfaa45..e90bc9768a9a 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -24,7 +24,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {Deletion, Hydrating, Placement} from './ReactFiberFlags';
+import {Deletion, Placement, Hydrating} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -124,14 +124,18 @@ function deleteHydratableInstance(
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
+  childToDelete.flags = Deletion;
 
-  const deletions = returnFiber.deletions;
-  if (deletions === null) {
-    returnFiber.deletions = [childToDelete];
-    // TODO (effects) Rename this to better reflect its new usage (e.g. ChildDeletions)
-    returnFiber.flags |= Deletion;
+  // This might seem like it belongs on progressedFirstDeletion. However,
+  // these children are not part of the reconciliation list of children.
+  // Even if we abort and rereconcile the children, that will try to hydrate
+  // again and the nodes are still in the host tree so these will be
+  // recreated.
+  if (returnFiber.lastEffect !== null) {
+    returnFiber.lastEffect.nextEffect = childToDelete;
+    returnFiber.lastEffect = childToDelete;
   } else {
-    deletions.push(childToDelete);
+    returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 385a2ebdfa67..6e14aacd77de 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -60,6 +60,9 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
+  // Last Effect before we rendered the "rendering" item.
+  // Used to remove new effects added by the rendered item.
+  lastEffect: null | Fiber,
 |};
 
 export function shouldCaptureSuspense(
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index af41cd639a07..9dd9df6d0cfe 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -185,6 +185,8 @@ function throwException(
 ) {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
+  // Its effect list is no longer valid.
+  sourceFiber.firstEffect = sourceFiber.lastEffect = null;
 
   if (
     value !== null &&
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 17346a73660f..f7a4f39bb1cb 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -13,14 +13,15 @@ import type {Lanes, Lane} from './ReactFiberLane';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
+import type {Effect as HookEffect} from './ReactFiberHooks.new';
 import type {StackCursor} from './ReactFiberStack.new';
-import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 
 import {
   warnAboutDeprecatedLifecycles,
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableProfilerTimer,
+  enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableProfilerNestedUpdateScheduledHook,
   enableSchedulerTracing,
@@ -29,7 +30,7 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   enableSchedulingProfiler,
-  enableDoubleInvokingEffects,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -49,10 +50,6 @@ import {
   flushSyncCallbackQueue,
   scheduleSyncCallback,
 } from './SchedulerWithReactIntegration.new';
-import {
-  NoFlags as NoHookEffect,
-  Passive as HookPassive,
-} from './ReactHookEffectTags';
 import {
   logCommitStarted,
   logCommitStopped,
@@ -81,11 +78,13 @@ import * as Scheduler from 'scheduler';
 import {__interactionsRef, __subscriberRef} from 'scheduler/tracing';
 
 import {
+  prepareForCommit,
   resetAfterCommit,
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
   warnsIfNotActing,
+  beforeActiveInstanceBlur,
   afterActiveInstanceBlur,
   clearContainer,
 } from './ReactFiberHostConfig';
@@ -111,20 +110,29 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  ScopeComponent,
   Profiler,
 } from './ReactWorkTags';
 import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
+  PerformedWork,
   Placement,
-  PassiveStatic,
+  Update,
+  PlacementAndUpdate,
+  Deletion,
+  Ref,
+  ContentReset,
+  Snapshot,
+  Callback,
+  Passive,
+  PassiveUnmountPendingDev,
   Incomplete,
   HostEffectMask,
   Hydrating,
-  BeforeMutationMask,
-  MutationMask,
-  LayoutMask,
-  PassiveMask,
+  HydratingAndUpdate,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -136,6 +144,7 @@ import {
   NoLane,
   SyncLane,
   SyncBatchedLane,
+  OffscreenLane,
   NoTimestamp,
   findUpdateLane,
   findTransitionLane,
@@ -175,12 +184,16 @@ import {
   createClassErrorUpdate,
 } from './ReactFiberThrow.new';
 import {
-  commitBeforeMutationEffects,
-  commitMutationEffects,
-  commitLayoutEffects,
-  commitPassiveMountEffects,
-  commitPassiveUnmountEffects,
-  commitDoubleInvokeEffectsInDEV,
+  commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
+  commitLifeCycles as commitLayoutEffectOnFiber,
+  commitPlacement,
+  commitWork,
+  commitDeletion,
+  commitDetachRef,
+  commitAttachRef,
+  commitPassiveEffectDurations,
+  commitResetTextContent,
+  isSuspenseBoundaryBeingHidden,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
@@ -199,7 +212,9 @@ import {
 import {
   markNestedUpdateScheduled,
   recordCommitTime,
+  recordPassiveEffectDuration,
   resetNestedUpdateFlag,
+  startPassiveEffectTimer,
   startProfilerTimer,
   stopProfilerTimerIfRunningAndRecordDelta,
   syncNestedUpdateFlag,
@@ -224,6 +239,7 @@ import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
 // Used by `act`
 import enqueueTask from 'shared/enqueueTask';
+import {doesFiberContain} from './ReactFiberTreeReflection';
 
 const ceil = Math.ceil;
 
@@ -261,10 +277,6 @@ let workInProgress: Fiber | null = null;
 // The lanes we're rendering
 let workInProgressRootRenderLanes: Lanes = NoLanes;
 
-// Only used when enableProfilerNestedUpdateScheduledHook is true;
-// to track which root is currently committing layout effects.
-let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
-
 // Stack that allows components to change the render lanes for its subtree
 // This is a superset of the lanes we started working on at the root. The only
 // case where it's different from `workInProgressRootRenderLanes` is when we
@@ -273,7 +285,7 @@ let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
 //
 // Most things in the work loop should deal with workInProgressRootRenderLanes.
 // Most things in begin/complete phases should deal with subtreeRenderLanes.
-export let subtreeRenderLanes: Lanes = NoLanes;
+let subtreeRenderLanes: Lanes = NoLanes;
 const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
 
 // Whether to root completed, errored, suspended, etc.
@@ -315,13 +327,22 @@ export function getRenderTargetTime(): number {
   return workInProgressRootRenderTargetTime;
 }
 
+let nextEffect: Fiber | null = null;
 let hasUncaughtError = false;
 let firstUncaughtError = null;
 let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;
 
+// Only used when enableProfilerNestedUpdateScheduledHook is true;
+// to track which root is currently committing layout effects.
+let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
+
+let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
+let pendingPassiveHookEffectsMount: Array<HookEffect | Fiber> = [];
+let pendingPassiveHookEffectsUnmount: Array<HookEffect | Fiber> = [];
+let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
 let rootsWithPendingDiscreteUpdates: Set<FiberRoot> | null = null;
 
@@ -351,6 +372,9 @@ let currentEventPendingLanes: Lanes = NoLanes;
 // We warn about state updates for unmounted components differently in this case.
 let isFlushingPassiveEffects = false;
 
+let focusedInstanceHandle: null | Fiber = null;
+let shouldFireAfterActiveInstanceBlur: boolean = false;
+
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -1717,6 +1741,47 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         workInProgress = next;
         return;
       }
+
+      resetChildLanes(completedWork);
+
+      if (
+        returnFiber !== null &&
+        // Do not append effects to parents if a sibling failed to complete
+        (returnFiber.flags & Incomplete) === NoFlags
+      ) {
+        // Append all the effects of the subtree and this fiber onto the effect
+        // list of the parent. The completion order of the children affects the
+        // side-effect order.
+        if (returnFiber.firstEffect === null) {
+          returnFiber.firstEffect = completedWork.firstEffect;
+        }
+        if (completedWork.lastEffect !== null) {
+          if (returnFiber.lastEffect !== null) {
+            returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
+          }
+          returnFiber.lastEffect = completedWork.lastEffect;
+        }
+
+        // If this fiber had side-effects, we append it AFTER the children's
+        // side-effects. We can perform certain side-effects earlier if needed,
+        // by doing multiple passes over the effect list. We don't want to
+        // schedule our own side-effect on our own list because if end up
+        // reusing children we'll schedule this effect onto itself since we're
+        // at the end.
+        const flags = completedWork.flags;
+
+        // Skip both NoWork and PerformedWork tags when creating the effect
+        // list. PerformedWork effect is read by React DevTools but shouldn't be
+        // committed.
+        if (flags > PerformedWork) {
+          if (returnFiber.lastEffect !== null) {
+            returnFiber.lastEffect.nextEffect = completedWork;
+          } else {
+            returnFiber.firstEffect = completedWork;
+          }
+          returnFiber.lastEffect = completedWork;
+        }
+      }
     } else {
       // This fiber did not complete because something threw. Pop values off
       // the stack without entering the complete phase. If this is a boundary,
@@ -1753,10 +1818,9 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       }
 
       if (returnFiber !== null) {
-        // Mark the parent fiber as incomplete
+        // Mark the parent fiber as incomplete and clear its effect list.
+        returnFiber.firstEffect = returnFiber.lastEffect = null;
         returnFiber.flags |= Incomplete;
-        returnFiber.subtreeFlags = NoFlags;
-        returnFiber.deletions = null;
       }
     }
 
@@ -1778,6 +1842,81 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
+function resetChildLanes(completedWork: Fiber) {
+  if (
+    // TODO: Move this check out of the hot path by moving `resetChildLanes`
+    // to switch statement in `completeWork`.
+    (completedWork.tag === LegacyHiddenComponent ||
+      completedWork.tag === OffscreenComponent) &&
+    completedWork.memoizedState !== null &&
+    !includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) &&
+    (completedWork.mode & ConcurrentMode) !== NoLanes
+  ) {
+    // The children of this component are hidden. Don't bubble their
+    // expiration times.
+    return;
+  }
+
+  let newChildLanes = NoLanes;
+
+  // 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);
+
+    // 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.
+    const shouldBubbleActualDurations =
+      completedWork.alternate === null ||
+      completedWork.child !== completedWork.alternate.child;
+
+    let child = completedWork.child;
+    while (child !== null) {
+      newChildLanes = mergeLanes(
+        newChildLanes,
+        mergeLanes(child.lanes, child.childLanes),
+      );
+      if (shouldBubbleActualDurations) {
+        actualDuration += child.actualDuration;
+      }
+      treeBaseDuration += child.treeBaseDuration;
+      child = child.sibling;
+    }
+
+    const isTimedOutSuspense =
+      completedWork.tag === SuspenseComponent &&
+      completedWork.memoizedState !== null;
+    if (isTimedOutSuspense) {
+      // Don't count time spent in a timed out Suspense subtree as part of the base duration.
+      const primaryChildFragment = completedWork.child;
+      if (primaryChildFragment !== null) {
+        treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+      }
+    }
+
+    completedWork.actualDuration = actualDuration;
+    completedWork.treeBaseDuration = treeBaseDuration;
+  } else {
+    let child = completedWork.child;
+    while (child !== null) {
+      newChildLanes = mergeLanes(
+        newChildLanes,
+        mergeLanes(child.lanes, child.childLanes),
+      );
+      child = child.sibling;
+    }
+  }
+
+  completedWork.childLanes = newChildLanes;
+}
+
 function commitRoot(root) {
   const renderPriorityLevel = getCurrentPriorityLevel();
   runWithPriority(
@@ -1871,37 +2010,25 @@ function commitRootImpl(root, renderPriorityLevel) {
     // times out.
   }
 
-  // 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.)
-  const rootDoesHavePassiveEffects =
-    (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
-    (finishedWork.flags & PassiveMask) !== NoFlags;
-  if (rootDoesHavePassiveEffects) {
-    rootWithPendingPassiveEffects = root;
-    pendingPassiveEffectsLanes = lanes;
-    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
-    scheduleCallback(NormalSchedulerPriority, () => {
-      flushPassiveEffects();
-      return null;
-    });
+  // Get the list of effects.
+  let firstEffect;
+  if (finishedWork.flags > PerformedWork) {
+    // A fiber's effect list consists only of its children, not itself. So if
+    // the root has an effect, we need to add it to the end of the list. The
+    // resulting list is the set that would belong to the root's parent, if it
+    // had one; that is, all the effects in the tree including the root.
+    if (finishedWork.lastEffect !== null) {
+      finishedWork.lastEffect.nextEffect = finishedWork;
+      firstEffect = finishedWork.firstEffect;
+    } else {
+      firstEffect = finishedWork;
+    }
+  } else {
+    // There is no effect on the root.
+    firstEffect = finishedWork.firstEffect;
   }
 
-  // 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 satsify Flow. I think the
-  // only other reason this optimization exists is because it affects profiling.
-  // Reconsider whether this is necessary.
-  const subtreeHasEffects =
-    (finishedWork.subtreeFlags &
-      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
-    NoFlags;
-  const rootHasEffect =
-    (finishedWork.flags &
-      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
-    NoFlags;
-
-  if (subtreeHasEffects || rootHasEffect) {
+  if (firstEffect !== null) {
     let previousLanePriority;
     if (decoupleUpdatePriorityFromScheduler) {
       previousLanePriority = getCurrentUpdateLanePriority();
@@ -1922,10 +2049,32 @@ function commitRootImpl(root, renderPriorityLevel) {
     // 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.
-    const shouldFireAfterActiveInstanceBlur = commitBeforeMutationEffects(
-      root,
-      finishedWork,
-    );
+    focusedInstanceHandle = prepareForCommit(root.containerInfo);
+    shouldFireAfterActiveInstanceBlur = false;
+
+    nextEffect = firstEffect;
+    do {
+      if (__DEV__) {
+        invokeGuardedCallback(null, commitBeforeMutationEffects, null);
+        if (hasCaughtError()) {
+          invariant(nextEffect !== null, 'Should be working on an effect.');
+          const error = clearCaughtError();
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      } else {
+        try {
+          commitBeforeMutationEffects();
+        } catch (error) {
+          invariant(nextEffect !== null, 'Should be working on an effect.');
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      }
+    } while (nextEffect !== null);
+
+    // We no longer need to track the active instance fiber
+    focusedInstanceHandle = null;
 
     if (enableProfilerTimer) {
       // Mark the current commit time to be shared by all Profilers in this
@@ -1934,11 +2083,38 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      // Track the root here, rather than in commitLayoutEffects(), because of ref setters.
+      // Updates scheduled during ref detachment should also be flagged.
       rootCommittingMutationOrLayoutEffects = root;
     }
 
     // The next phase is the mutation phase, where we mutate the host tree.
-    commitMutationEffects(finishedWork, root, renderPriorityLevel);
+    nextEffect = firstEffect;
+    do {
+      if (__DEV__) {
+        invokeGuardedCallback(
+          null,
+          commitMutationEffects,
+          null,
+          root,
+          renderPriorityLevel,
+        );
+        if (hasCaughtError()) {
+          invariant(nextEffect !== null, 'Should be working on an effect.');
+          const error = clearCaughtError();
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      } else {
+        try {
+          commitMutationEffects(root, renderPriorityLevel);
+        } catch (error) {
+          invariant(nextEffect !== null, 'Should be working on an effect.');
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      }
+    } while (nextEffect !== null);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -1954,26 +2130,28 @@ function commitRootImpl(root, renderPriorityLevel) {
     // 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 (__DEV__) {
-      if (enableDebugTracing) {
-        logLayoutEffectsStarted(lanes);
+    nextEffect = firstEffect;
+    do {
+      if (__DEV__) {
+        invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
+        if (hasCaughtError()) {
+          invariant(nextEffect !== null, 'Should be working on an effect.');
+          const error = clearCaughtError();
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
+      } else {
+        try {
+          commitLayoutEffects(root, lanes);
+        } catch (error) {
+          invariant(nextEffect !== null, 'Should be working on an effect.');
+          captureCommitPhaseError(nextEffect, error);
+          nextEffect = nextEffect.nextEffect;
+        }
       }
-    }
-    if (enableSchedulingProfiler) {
-      markLayoutEffectsStarted(lanes);
-    }
+    } while (nextEffect !== null);
 
-    commitLayoutEffects(finishedWork, root);
-
-    if (__DEV__) {
-      if (enableDebugTracing) {
-        logLayoutEffectsStopped();
-      }
-    }
-    if (enableSchedulingProfiler) {
-      markLayoutEffectsStopped();
-    }
+    nextEffect = null;
 
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       rootCommittingMutationOrLayoutEffects = null;
@@ -2003,6 +2181,30 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
+  const rootDidHavePassiveEffects = rootDoesHavePassiveEffects;
+
+  if (rootDoesHavePassiveEffects) {
+    // This commit has passive effects. Stash a reference to them. But don't
+    // schedule a callback until after flushing layout work.
+    rootDoesHavePassiveEffects = false;
+    rootWithPendingPassiveEffects = root;
+    pendingPassiveEffectsLanes = lanes;
+    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
+  } else {
+    // We are done with the effect chain at this point so let's clear the
+    // nextEffect pointers to assist with GC. If we have passive effects, we'll
+    // clear this in flushPassiveEffects.
+    nextEffect = firstEffect;
+    while (nextEffect !== null) {
+      const nextNextEffect = nextEffect.nextEffect;
+      nextEffect.nextEffect = null;
+      if (nextEffect.flags & Deletion) {
+        detachFiberAfterEffects(nextEffect);
+      }
+      nextEffect = nextNextEffect;
+    }
+  }
+
   // Read this again, since an effect might have updated it
   remainingLanes = root.pendingLanes;
 
@@ -2028,14 +2230,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     legacyErrorBoundariesThatAlreadyFailed = null;
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    if (!rootDoesHavePassiveEffects) {
-      commitDoubleInvokeEffectsInDEV(root.current, false);
-    }
-  }
-
   if (enableSchedulerTracing) {
-    if (!rootDoesHavePassiveEffects) {
+    if (!rootDidHavePassiveEffects) {
       // If there are no passive effects, then we can complete the pending interactions.
       // Otherwise, we'll wait until after the passive effects are flushed.
       // Wait to do this until after remaining work has been scheduled,
@@ -2112,6 +2308,181 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
+function commitBeforeMutationEffects() {
+  while (nextEffect !== null) {
+    const current = nextEffect.alternate;
+
+    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
+      if ((nextEffect.flags & Deletion) !== NoFlags) {
+        if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
+          shouldFireAfterActiveInstanceBlur = true;
+          beforeActiveInstanceBlur(nextEffect);
+        }
+      } else {
+        // TODO: Move this out of the hot path using a dedicated effect tag.
+        if (
+          nextEffect.tag === SuspenseComponent &&
+          isSuspenseBoundaryBeingHidden(current, nextEffect) &&
+          doesFiberContain(nextEffect, focusedInstanceHandle)
+        ) {
+          shouldFireAfterActiveInstanceBlur = true;
+          beforeActiveInstanceBlur(nextEffect);
+        }
+      }
+    }
+
+    const flags = nextEffect.flags;
+    if ((flags & Snapshot) !== NoFlags) {
+      setCurrentDebugFiberInDEV(nextEffect);
+
+      commitBeforeMutationEffectOnFiber(current, nextEffect);
+
+      resetCurrentDebugFiberInDEV();
+    }
+    if ((flags & Passive) !== NoFlags) {
+      // If there are passive effects, schedule a callback to flush at
+      // the earliest opportunity.
+      if (!rootDoesHavePassiveEffects) {
+        rootDoesHavePassiveEffects = true;
+        scheduleCallback(NormalSchedulerPriority, () => {
+          flushPassiveEffects();
+          return null;
+        });
+      }
+    }
+    nextEffect = nextEffect.nextEffect;
+  }
+}
+
+function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
+  // TODO: Should probably move the bulk of this function to commitWork.
+  while (nextEffect !== null) {
+    setCurrentDebugFiberInDEV(nextEffect);
+
+    const flags = nextEffect.flags;
+
+    if (flags & ContentReset) {
+      commitResetTextContent(nextEffect);
+    }
+
+    if (flags & Ref) {
+      const current = nextEffect.alternate;
+      if (current !== null) {
+        commitDetachRef(current);
+      }
+      if (enableScopeAPI) {
+        // TODO: This is a temporary solution that allowed us to transition away
+        // from React Flare on www.
+        if (nextEffect.tag === ScopeComponent) {
+          commitAttachRef(nextEffect);
+        }
+      }
+    }
+
+    // The following switch statement is only concerned about placement,
+    // updates, and deletions. To avoid needing to add a case for every possible
+    // bitmap value, we remove the secondary effects from the effect tag and
+    // switch on that value.
+    const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
+    switch (primaryFlags) {
+      case Placement: {
+        commitPlacement(nextEffect);
+        // 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.
+        nextEffect.flags &= ~Placement;
+        break;
+      }
+      case PlacementAndUpdate: {
+        // Placement
+        commitPlacement(nextEffect);
+        // Clear the "placement" from effect tag so that we know that this is
+        // inserted, before any life-cycles like componentDidMount gets called.
+        nextEffect.flags &= ~Placement;
+
+        // Update
+        const current = nextEffect.alternate;
+        commitWork(current, nextEffect);
+        break;
+      }
+      case Hydrating: {
+        nextEffect.flags &= ~Hydrating;
+        break;
+      }
+      case HydratingAndUpdate: {
+        nextEffect.flags &= ~Hydrating;
+
+        // Update
+        const current = nextEffect.alternate;
+        commitWork(current, nextEffect);
+        break;
+      }
+      case Update: {
+        const current = nextEffect.alternate;
+        commitWork(current, nextEffect);
+        break;
+      }
+      case Deletion: {
+        commitDeletion(root, nextEffect, renderPriorityLevel);
+        break;
+      }
+    }
+
+    resetCurrentDebugFiberInDEV();
+    nextEffect = nextEffect.nextEffect;
+  }
+}
+
+function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      logLayoutEffectsStarted(committedLanes);
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markLayoutEffectsStarted(committedLanes);
+  }
+
+  // TODO: Should probably move the bulk of this function to commitWork.
+  while (nextEffect !== null) {
+    setCurrentDebugFiberInDEV(nextEffect);
+
+    const flags = nextEffect.flags;
+
+    if (flags & (Update | Callback)) {
+      const current = nextEffect.alternate;
+      commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
+    }
+
+    if (enableScopeAPI) {
+      // TODO: This is a temporary solution that allowed us to transition away
+      // from React Flare on www.
+      if (flags & Ref && nextEffect.tag !== ScopeComponent) {
+        commitAttachRef(nextEffect);
+      }
+    } else {
+      if (flags & Ref) {
+        commitAttachRef(nextEffect);
+      }
+    }
+
+    resetCurrentDebugFiberInDEV();
+    nextEffect = nextEffect.nextEffect;
+  }
+
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      logLayoutEffectsStopped();
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markLayoutEffectsStopped();
+  }
+}
+
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
@@ -2137,6 +2508,59 @@ export function flushPassiveEffects(): boolean {
   return false;
 }
 
+export function enqueuePendingPassiveProfilerEffect(fiber: Fiber): void {
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    pendingPassiveProfilerEffects.push(fiber);
+    if (!rootDoesHavePassiveEffects) {
+      rootDoesHavePassiveEffects = true;
+      scheduleCallback(NormalSchedulerPriority, () => {
+        flushPassiveEffects();
+        return null;
+      });
+    }
+  }
+}
+
+export function enqueuePendingPassiveHookEffectMount(
+  fiber: Fiber,
+  effect: HookEffect,
+): void {
+  pendingPassiveHookEffectsMount.push(effect, fiber);
+  if (!rootDoesHavePassiveEffects) {
+    rootDoesHavePassiveEffects = true;
+    scheduleCallback(NormalSchedulerPriority, () => {
+      flushPassiveEffects();
+      return null;
+    });
+  }
+}
+
+export function enqueuePendingPassiveHookEffectUnmount(
+  fiber: Fiber,
+  effect: HookEffect,
+): void {
+  pendingPassiveHookEffectsUnmount.push(effect, fiber);
+  if (__DEV__) {
+    fiber.flags |= PassiveUnmountPendingDev;
+    const alternate = fiber.alternate;
+    if (alternate !== null) {
+      alternate.flags |= PassiveUnmountPendingDev;
+    }
+  }
+  if (!rootDoesHavePassiveEffects) {
+    rootDoesHavePassiveEffects = true;
+    scheduleCallback(NormalSchedulerPriority, () => {
+      flushPassiveEffects();
+      return null;
+    });
+  }
+}
+
+function invokePassiveEffectCreate(effect: HookEffect): void {
+  const create = effect.create;
+  effect.destroy = create();
+}
+
 function flushPassiveEffectsImpl() {
   if (rootWithPendingPassiveEffects === null) {
     return false;
@@ -2176,25 +2600,137 @@ function flushPassiveEffectsImpl() {
   // e.g. a destroy function in one component may unintentionally override a ref
   // value set by a create function in another component.
   // Layout effects have the same constraint.
-  commitPassiveUnmountEffects(root.current);
-  commitPassiveMountEffects(root, root.current);
 
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      logPassiveEffectsStopped();
+  // First pass: Destroy stale passive effects.
+  const unmountEffects = pendingPassiveHookEffectsUnmount;
+  pendingPassiveHookEffectsUnmount = [];
+  for (let i = 0; i < unmountEffects.length; i += 2) {
+    const effect = ((unmountEffects[i]: any): HookEffect);
+    const fiber = ((unmountEffects[i + 1]: any): Fiber);
+    const destroy = effect.destroy;
+    effect.destroy = undefined;
+
+    if (__DEV__) {
+      fiber.flags &= ~PassiveUnmountPendingDev;
+      const alternate = fiber.alternate;
+      if (alternate !== null) {
+        alternate.flags &= ~PassiveUnmountPendingDev;
+      }
     }
-  }
 
-  if (enableSchedulingProfiler) {
-    markPassiveEffectsStopped();
+    if (typeof destroy === 'function') {
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          fiber.mode & ProfileMode
+        ) {
+          startPassiveEffectTimer();
+          invokeGuardedCallback(null, destroy, null);
+          recordPassiveEffectDuration(fiber);
+        } else {
+          invokeGuardedCallback(null, destroy, null);
+        }
+        if (hasCaughtError()) {
+          invariant(fiber !== null, 'Should be working on an effect.');
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            fiber.mode & ProfileMode
+          ) {
+            try {
+              startPassiveEffectTimer();
+              destroy();
+            } finally {
+              recordPassiveEffectDuration(fiber);
+            }
+          } else {
+            destroy();
+          }
+        } catch (error) {
+          invariant(fiber !== null, 'Should be working on an effect.');
+          captureCommitPhaseError(fiber, error);
+        }
+      }
+    }
+  }
+  // Second pass: Create new passive effects.
+  const mountEffects = pendingPassiveHookEffectsMount;
+  pendingPassiveHookEffectsMount = [];
+  for (let i = 0; i < mountEffects.length; i += 2) {
+    const effect = ((mountEffects[i]: any): HookEffect);
+    const fiber = ((mountEffects[i + 1]: any): Fiber);
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        fiber.mode & ProfileMode
+      ) {
+        startPassiveEffectTimer();
+        invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
+        recordPassiveEffectDuration(fiber);
+      } else {
+        invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
+      }
+      if (hasCaughtError()) {
+        invariant(fiber !== null, 'Should be working on an effect.');
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        const create = effect.create;
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          fiber.mode & ProfileMode
+        ) {
+          try {
+            startPassiveEffectTimer();
+            effect.destroy = create();
+          } finally {
+            recordPassiveEffectDuration(fiber);
+          }
+        } else {
+          effect.destroy = create();
+        }
+      } catch (error) {
+        invariant(fiber !== null, 'Should be working on an effect.');
+        captureCommitPhaseError(fiber, error);
+      }
+    }
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    commitDoubleInvokeEffectsInDEV(root.current, true);
+  // Note: This currently assumes there are no passive effects on the root fiber
+  // because the root is not part of its own effect list.
+  // This could change in the future.
+  let effect = root.current.firstEffect;
+  while (effect !== null) {
+    const nextNextEffect = effect.nextEffect;
+    // Remove nextEffect pointer to assist GC
+    effect.nextEffect = null;
+    if (effect.flags & Deletion) {
+      detachFiberAfterEffects(effect);
+    }
+    effect = nextNextEffect;
   }
 
-  if (__DEV__) {
-    isFlushingPassiveEffects = false;
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    const profilerEffects = pendingPassiveProfilerEffects;
+    pendingPassiveProfilerEffects = [];
+    for (let i = 0; i < profilerEffects.length; i++) {
+      const fiber = ((profilerEffects[i]: any): Fiber);
+      commitPassiveEffectDurations(root, fiber);
+    }
   }
 
   if (enableSchedulerTracing) {
@@ -2202,6 +2738,20 @@ function flushPassiveEffectsImpl() {
     finishPendingInteractions(root, lanes);
   }
 
+  if (__DEV__) {
+    isFlushingPassiveEffects = false;
+  }
+
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      logPassiveEffectsStopped();
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markPassiveEffectsStopped();
+  }
+
   executionContext = prevExecutionContext;
 
   flushSyncCallbackQueue();
@@ -2542,24 +3092,10 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
       return;
     }
 
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      const updateQueue: FunctionComponentUpdateQueue | null = (fiber.updateQueue: any);
-      if (updateQueue !== null) {
-        const lastEffect = updateQueue.lastEffect;
-        if (lastEffect !== null) {
-          const firstEffect = lastEffect.next;
-
-          let effect = firstEffect;
-          do {
-            if (effect.destroy !== undefined) {
-              if ((effect.tag & HookPassive) !== NoHookEffect) {
-                return;
-              }
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
-        }
-      }
+    // If there are pending passive effects unmounts for this Fiber,
+    // we can assume that they would have prevented this update.
+    if ((fiber.flags & PassiveUnmountPendingDev) !== NoFlags) {
+      return;
     }
 
     // We show the whole stack but dedupe on the top component's name because
@@ -3249,3 +3785,8 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
     };
   }
 }
+
+function detachFiberAfterEffects(fiber: Fiber): void {
+  fiber.sibling = null;
+  fiber.stateNode = null;
+}
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
index 5cb33579c7be..5dd09a8cc80d 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
@@ -64,7 +64,7 @@ if (__DEV__) {
     fiber: Fiber,
     instance: any,
   ) => {
-    // Dedup strategy: Warn once per component.
+    // Dedupe strategy: Warn once per component.
     if (didWarnAboutUnsafeLifecycles.has(fiber.type)) {
       return;
     }
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index f73ae2f8998f..606a90252077 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -165,13 +165,13 @@ export function cancelCallback(callbackNode: mixed) {
   }
 }
 
-export function flushSyncCallbackQueue(): boolean {
+export function flushSyncCallbackQueue() {
   if (immediateQueueCallbackNode !== null) {
     const node = immediateQueueCallbackNode;
     immediateQueueCallbackNode = null;
     Scheduler_cancelCallback(node);
   }
-  return flushSyncCallbackQueueImpl();
+  flushSyncCallbackQueueImpl();
 }
 
 function flushSyncCallbackQueueImpl() {
@@ -237,8 +237,5 @@ function flushSyncCallbackQueueImpl() {
         isFlushingSyncQueue = false;
       }
     }
-    return true;
-  } else {
-    return false;
   }
 }
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
similarity index 96%
rename from packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
rename to packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
index e5136af4e240..5b6abbc4f659 100644
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
@@ -10,7 +10,6 @@
 'use strict';
 
 let React;
-let ReactFeatureFlags;
 let ReactTestRenderer;
 let Scheduler;
 let act;
@@ -19,13 +18,20 @@ describe('ReactDoubleInvokeEvents', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
-    ReactFeatureFlags.enableDoubleInvokingEffects = __VARIANT__;
     act = ReactTestRenderer.unstable_concurrentAct;
   });
 
+  function supportsDoubleInvokeEffects() {
+    return gate(
+      flags =>
+        flags.build === 'development' &&
+        flags.enableDoubleInvokingEffects &&
+        flags.dfsEffectsRefactor,
+    );
+  }
+
   it('should not double invoke effects in legacy mode', () => {
     function App({text}) {
       React.useEffect(() => {
@@ -73,7 +79,7 @@ describe('ReactDoubleInvokeEvents', () => {
       });
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'useLayoutEffect mount',
         'useEffect mount',
@@ -132,7 +138,7 @@ describe('ReactDoubleInvokeEvents', () => {
       });
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'useEffect One mount',
         'useEffect Two mount',
@@ -193,7 +199,7 @@ describe('ReactDoubleInvokeEvents', () => {
       });
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'useLayoutEffect One mount',
         'useLayoutEffect Two mount',
@@ -250,7 +256,7 @@ describe('ReactDoubleInvokeEvents', () => {
       });
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'useLayoutEffect mount',
         'useEffect mount',
@@ -308,7 +314,7 @@ describe('ReactDoubleInvokeEvents', () => {
       ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'componentDidMount',
         'componentWillUnmount',
@@ -345,7 +351,7 @@ describe('ReactDoubleInvokeEvents', () => {
       });
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'componentDidMount',
         'componentWillUnmount',
@@ -420,7 +426,7 @@ describe('ReactDoubleInvokeEvents', () => {
       });
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'mount',
         'useLayoutEffect mount',
@@ -485,7 +491,7 @@ describe('ReactDoubleInvokeEvents', () => {
       ReactTestRenderer.create(<App />, {unstable_isConcurrent: true});
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'App useLayoutEffect mount',
         'App useEffect mount',
@@ -505,7 +511,7 @@ describe('ReactDoubleInvokeEvents', () => {
       _setShowChild(true);
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'App useLayoutEffect unmount',
         'Child useLayoutEffect mount',
@@ -573,7 +579,7 @@ describe('ReactDoubleInvokeEvents', () => {
       });
     });
 
-    if (__DEV__ && __VARIANT__) {
+    if (supportsDoubleInvokeEffects()) {
       expect(Scheduler).toHaveYielded([
         'componentDidMount',
         'useLayoutEffect mount',
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
index 7be6513a5737..5026605672fc 100644
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -152,7 +152,7 @@ describe('ReactDOMTracing', () => {
           onInteractionScheduledWorkCompleted,
         ).toHaveBeenLastNotifiedOfInteraction(interaction);
 
-        if (gate(flags => flags.new)) {
+        if (gate(flags => flags.dfsEffectsRefactor)) {
           expect(onRender).toHaveBeenCalledTimes(3);
         } else {
           // TODO: This is 4 instead of 3 because this update was scheduled at
@@ -310,7 +310,7 @@ describe('ReactDOMTracing', () => {
         expect(
           onInteractionScheduledWorkCompleted,
         ).toHaveBeenLastNotifiedOfInteraction(interaction);
-        if (gate(flags => flags.new)) {
+        if (gate(flags => flags.dfsEffectsRefactor)) {
           expect(onRender).toHaveBeenCalledTimes(3);
         } else {
           // TODO: This is 4 instead of 3 because this update was scheduled at
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 831861941a24..a87c83e9c180 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -368,7 +368,7 @@ describe('Profiler', () => {
 
         renderer.update(<App />);
 
-        if (gate(flags => flags.new)) {
+        if (gate(flags => flags.dfsEffectsRefactor)) {
           // 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();
@@ -4292,7 +4292,7 @@ describe('Profiler', () => {
         // because the resolved suspended subtree doesn't contain any passive effects.
         // If <AsyncComponentWithCascadingWork> or its decendents had a passive effect,
         // onPostCommit would be called again.
-        if (gate(flags => flags.new)) {
+        if (gate(flags => flags.dfsEffectsRefactor)) {
           expect(Scheduler).toFlushAndYield([]);
         } else {
           expect(Scheduler).toFlushAndYield(['onPostCommit']);
@@ -4783,7 +4783,8 @@ describe('Profiler', () => {
       });
 
       if (__DEV__) {
-        // @gate new
+        // @gate dfsEffectsRefactor
+        // @gate enableDoubleInvokingEffects
         it('double invoking does not disconnect wrapped async work', () => {
           ReactFeatureFlags.enableDoubleInvokingEffects = true;
 
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 6a2be742e296..f869620f0329 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -44,6 +44,10 @@ const environmentFlags = {
 
   // Use this for tests that are known to be broken.
   FIXME: false,
+
+  // Turn this flag back on (or delete) once the effect list is removed in favor
+  // of a depth-first traversal using `subtreeTags`.
+  dfsEffectsRefactor: false,
 };
 
 function getTestFlags() {

From 369c3db6299506d9d1ab6628accc2c40827d1f1f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 16 Nov 2020 09:13:39 -0600
Subject: [PATCH 0089/1603] Add separate ChildDeletion flag (#20264)

In the old, effect list implementation, the Deletion flag is is set on
each deleted fiber.

In the new, subtreeTag implementation, the Deletion flag is set on the
parent of each deleted fiber, and the deleted fibers themselves are
pushed to the `deletions` array.

To better distinguish between these two uses, I've added a separate
ChildDeletion flag. That way we can, if desired, maintain both
implementations simultaneously, as we bisect to find the performance
regression that we're currently investigating.
---
 .../react-reconciler/src/ReactFiberFlags.js   | 59 +++++++++++--------
 1 file changed, 33 insertions(+), 26 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index da8255c6e8d1..518abbee1105 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,48 +12,49 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b0000000000000000000;
-export const PerformedWork = /*                */ 0b0000000000000000001;
+export const NoFlags = /*                      */ 0b00000000000000000000;
+export const PerformedWork = /*                */ 0b00000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b0000000000000000010;
-export const Update = /*                       */ 0b0000000000000000100;
-export const PlacementAndUpdate = /*           */ 0b0000000000000000110;
-export const Deletion = /*                     */ 0b0000000000000001000;
-export const ContentReset = /*                 */ 0b0000000000000010000;
-export const Callback = /*                     */ 0b0000000000000100000;
-export const DidCapture = /*                   */ 0b0000000000001000000;
-export const Ref = /*                          */ 0b0000000000010000000;
-export const Snapshot = /*                     */ 0b0000000000100000000;
-export const Passive = /*                      */ 0b0000000001000000000;
-export const Hydrating = /*                    */ 0b0000000010000000000;
-export const HydratingAndUpdate = /*           */ 0b0000000010000000100;
-export const Visibility = /*                   */ 0b0000000100000000000;
+export const Placement = /*                    */ 0b00000000000000000010;
+export const Update = /*                       */ 0b00000000000000000100;
+export const PlacementAndUpdate = /*           */ Placement | Update;
+export const Deletion = /*                     */ 0b00000000000000001000;
+export const ChildDeletion = /*                */ 0b00000000000000010000;
+export const ContentReset = /*                 */ 0b00000000000000100000;
+export const Callback = /*                     */ 0b00000000000001000000;
+export const DidCapture = /*                   */ 0b00000000000010000000;
+export const Ref = /*                          */ 0b00000000000100000000;
+export const Snapshot = /*                     */ 0b00000000001000000000;
+export const Passive = /*                      */ 0b00000000010000000000;
+export const Hydrating = /*                    */ 0b00000000100000000000;
+export const HydratingAndUpdate = /*           */ Hydrating | Update;
+export const Visibility = /*                   */ 0b00000001000000000000;
 
 export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
 
 // Union of all commit flags (flags with the lifetime of a particular commit)
-export const HostEffectMask = /*               */ 0b0000000111111111111;
+export const HostEffectMask = /*               */ 0b00000001111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b0000001000000000000;
-export const ShouldCapture = /*                */ 0b0000010000000000000;
+export const Incomplete = /*                   */ 0b00000010000000000000;
+export const ShouldCapture = /*                */ 0b00000100000000000000;
 // TODO (effects) Remove this bit once the new reconciler is synced to the old.
-export const PassiveUnmountPendingDev = /*     */ 0b0000100000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b0001000000000000000;
+export const PassiveUnmountPendingDev = /*     */ 0b00001000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b00010000000000000000;
 
 // 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 PassiveStatic = /*                */ 0b0010000000000000000;
+export const PassiveStatic = /*                */ 0b00100000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b0100000000000000000;
-export const MountPassiveDev = /*              */ 0b1000000000000000000;
+export const MountLayoutDev = /*               */ 0b01000000000000000000;
+export const MountPassiveDev = /*              */ 0b10000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
@@ -65,13 +66,19 @@ export const BeforeMutationMask =
       // fire beforeblur
       // TODO: Only need to visit Deletions during BeforeMutation phase if an
       // element is focused.
-      Deletion | Visibility
+      ChildDeletion | Visibility
     : 0);
 
 export const MutationMask =
-  Placement | Update | Deletion | ContentReset | Ref | Hydrating | Visibility;
+  Placement |
+  Update |
+  ChildDeletion |
+  ContentReset |
+  Ref |
+  Hydrating |
+  Visibility;
 export const LayoutMask = Update | Callback | Ref;
-export const PassiveMask = Passive | Deletion;
+export const PassiveMask = Passive | ChildDeletion;
 
 // Union of tags that don't get reset on clones.
 // This allows certain concepts to persist without recalculting them,

From bf7b7aeb1070f5184733ece11e67902d1ace85bd Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 16 Nov 2020 17:09:53 -0600
Subject: [PATCH 0090/1603] findDOMNode: Remove return pointer mutation
 (#20272)

The last step of the `findDOMNode` algorithm is a search of the
current tree.

When descending into a child node, it mutates `child.return` so that it
points to the current fiber pair, instead of a work-in-progress. This
can cause bugs if `findDOMNode` is called at the wrong time, like in
an interleaved event.

For this reason (among others), you're not suppposed to use
`findDOMNode` in Concurrent Mode. However, we still have some internal
uses that we haven't migrated.

To reduce the potential for bugs, I've removed the `.return` pointer
assignment in favor of recursion.
---
 .../src/ReactFiberTreeReflection.js           | 88 ++++++++-----------
 1 file changed, 37 insertions(+), 51 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index caf503d19ee6..0b3448fec2b0 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -265,71 +265,57 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
 
 export function findCurrentHostFiber(parent: Fiber): Fiber | null {
   const currentParent = findCurrentFiberUsingSlowPath(parent);
-  if (!currentParent) {
-    return null;
-  }
+  return currentParent !== null
+    ? findCurrentHostFiberImpl(currentParent)
+    : null;
+}
 
+function findCurrentHostFiberImpl(node: Fiber) {
   // Next we'll drill down this component to find the first HostComponent/Text.
-  let node: Fiber = currentParent;
-  while (true) {
-    if (node.tag === HostComponent || node.tag === HostText) {
-      return node;
-    } else if (node.child) {
-      node.child.return = node;
-      node = node.child;
-      continue;
-    }
-    if (node === currentParent) {
-      return null;
-    }
-    while (!node.sibling) {
-      if (!node.return || node.return === currentParent) {
-        return null;
-      }
-      node = node.return;
+  if (node.tag === HostComponent || node.tag === HostText) {
+    return node;
+  }
+
+  let child = node.child;
+  while (child !== null) {
+    const match = findCurrentHostFiberImpl(child);
+    if (match !== null) {
+      return match;
     }
-    node.sibling.return = node.return;
-    node = node.sibling;
+    child = child.sibling;
   }
-  // Flow needs the return null here, but ESLint complains about it.
-  // eslint-disable-next-line no-unreachable
+
   return null;
 }
 
 export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {
   const currentParent = findCurrentFiberUsingSlowPath(parent);
-  if (!currentParent) {
-    return null;
-  }
+  return currentParent !== null
+    ? findCurrentHostFiberWithNoPortalsImpl(currentParent)
+    : null;
+}
 
+function findCurrentHostFiberWithNoPortalsImpl(node: Fiber) {
   // Next we'll drill down this component to find the first HostComponent/Text.
-  let node: Fiber = currentParent;
-  while (true) {
-    if (
-      node.tag === HostComponent ||
-      node.tag === HostText ||
-      (enableFundamentalAPI && node.tag === FundamentalComponent)
-    ) {
-      return node;
-    } else if (node.child && node.tag !== HostPortal) {
-      node.child.return = node;
-      node = node.child;
-      continue;
-    }
-    if (node === currentParent) {
-      return null;
-    }
-    while (!node.sibling) {
-      if (!node.return || node.return === currentParent) {
-        return null;
+  if (
+    node.tag === HostComponent ||
+    node.tag === HostText ||
+    (enableFundamentalAPI && node.tag === FundamentalComponent)
+  ) {
+    return node;
+  }
+
+  let child = node.child;
+  while (child !== null) {
+    if (child.tag !== HostPortal) {
+      const match = findCurrentHostFiberWithNoPortalsImpl(child);
+      if (match !== null) {
+        return match;
       }
-      node = node.return;
     }
-    node.sibling.return = node.return;
-    node = node.sibling;
+    child = child.sibling;
   }
-  // Flow needs the return null here, but ESLint complains about it.
-  // eslint-disable-next-line no-unreachable
+
   return null;
 }
 

From 82e99e1b027636fd55937a3b5633064cbcb2ffe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 16 Nov 2020 23:46:27 -0500
Subject: [PATCH 0091/1603] Add Node ESM Loader and Register Entrypoints
 (#20274)

* Add Node ESM loader build

This adds a loader build as a first-class export. This will grow in
complexity so it deserves its own module.

* Add Node CommonJS regiter build

This adds a build as a first-class export for legacy CommonJS registration
in Node.js. This will grow in complexity so it deserves its own module.

* Simplify fixture a bit to easier show usage with or without esm

* Bump es version

We leave async function in here which are newer than ES2015.
---
 fixtures/flight/loader/index.js               | 24 ++++++++
 fixtures/flight/loader/package.json           |  3 +
 fixtures/flight/package.json                  |  2 +-
 fixtures/flight/server/handler.server.js      | 16 ++++--
 fixtures/flight/server/handler.server.mjs     | 27 ---------
 fixtures/flight/server/index.js               | 11 +---
 fixtures/flight/server/loader.mjs             | 42 --------------
 .../esm/package.json                          |  3 +
 ...react-transport-dom-webpack-node-loader.js | 10 ++++
 .../node-register.js                          | 10 ++++
 .../npm/esm/package.json                      |  3 +
 .../npm/node-register.js                      |  3 +
 .../react-transport-dom-webpack/package.json  | 14 ++++-
 .../src/ReactFlightWebpackNodeLoader.js       | 57 +++++++++++++++++++
 .../src/ReactFlightWebpackNodeRegister.js     | 19 +++++++
 scripts/rollup/bundles.js                     | 18 ++++++
 scripts/rollup/validate/eslintrc.esm.js       |  2 +-
 scripts/shared/pathsByLanguageVersion.js      |  1 +
 18 files changed, 181 insertions(+), 84 deletions(-)
 create mode 100644 fixtures/flight/loader/index.js
 create mode 100644 fixtures/flight/loader/package.json
 delete mode 100644 fixtures/flight/server/handler.server.mjs
 delete mode 100644 fixtures/flight/server/loader.mjs
 create mode 100644 packages/react-transport-dom-webpack/esm/package.json
 create mode 100644 packages/react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js
 create mode 100644 packages/react-transport-dom-webpack/node-register.js
 create mode 100644 packages/react-transport-dom-webpack/npm/esm/package.json
 create mode 100644 packages/react-transport-dom-webpack/npm/node-register.js
 create mode 100644 packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
 create mode 100644 packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js

diff --git a/fixtures/flight/loader/index.js b/fixtures/flight/loader/index.js
new file mode 100644
index 000000000000..b9cfa5b73eee
--- /dev/null
+++ b/fixtures/flight/loader/index.js
@@ -0,0 +1,24 @@
+import {resolve, getSource} from 'react-transport-dom-webpack/node-loader';
+
+export {resolve, getSource};
+
+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 transformSource(source, context, defaultTransformSource) {
+  const {format} = context;
+  if (format === 'module') {
+    const opt = Object.assign({filename: context.url}, babelOptions);
+    const {code} = await babel.transformAsync(source, opt);
+    return {source: code};
+  }
+  return defaultTransformSource(source, context, defaultTransformSource);
+}
diff --git a/fixtures/flight/loader/package.json b/fixtures/flight/loader/package.json
new file mode 100644
index 000000000000..3dbc1ca591c0
--- /dev/null
+++ b/fixtures/flight/loader/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
index 92c41ebfe47a..e8e30736f3fb 100644
--- a/fixtures/flight/package.json
+++ b/fixtures/flight/package.json
@@ -67,7 +67,7 @@
     "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
     "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
     "start:client": "node scripts/start.js",
-    "start:server": "NODE_ENV=development node --experimental-loader ./server/loader.mjs server",
+    "start:server": "NODE_ENV=development node --experimental-loader ./loader/index.js server",
     "start:prod": "node scripts/build.js && NODE_ENV=production node server",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index f3b899d498d7..d7715af9cc75 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -2,18 +2,26 @@
 
 import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
 import * as React from 'react';
-import App from '../src/App.server';
 
-module.exports = function(req, res) {
+import url from 'url';
+
+function resolve(path) {
+  return url.pathToFileURL(require.resolve(path)).href;
+}
+
+module.exports = async function(req, res) {
   res.setHeader('Access-Control-Allow-Origin', '*');
+  const m = await import('../src/App.server.js');
+  // const m = require('../src/App.server.js');
+  const App = m.default.default || m.default;
   pipeToNodeWritable(<App />, res, {
     // TODO: Read from a map on the disk.
-    [require.resolve('../src/Counter.client.js')]: {
+    [resolve('../src/Counter.client.js')]: {
       id: './src/Counter.client.js',
       chunks: ['1'],
       name: 'default',
     },
-    [require.resolve('../src/ShowMore.client.js')]: {
+    [resolve('../src/ShowMore.client.js')]: {
       id: './src/ShowMore.client.js',
       chunks: ['2'],
       name: 'default',
diff --git a/fixtures/flight/server/handler.server.mjs b/fixtures/flight/server/handler.server.mjs
deleted file mode 100644
index 0d21c80eebfd..000000000000
--- a/fixtures/flight/server/handler.server.mjs
+++ /dev/null
@@ -1,27 +0,0 @@
-import {pipeToNodeWritable} from 'react-transport-dom-webpack/server.js';
-import * as React from 'react';
-import App from '../src/App.server.js';
-
-import {URL} from 'url';
-
-const rootPath = import.meta.url;
-function resolve(relative) {
-  return new URL(relative, rootPath).href;
-}
-
-export default function(req, res) {
-  res.setHeader('Access-Control-Allow-Origin', '*');
-  pipeToNodeWritable(<App />, res, {
-    // TODO: Read from a map on the disk.
-    [resolve('../src/Counter.client.js')]: {
-      id: './src/Counter.client.js',
-      chunks: ['1'],
-      name: 'default',
-    },
-    [resolve('../src/ShowMore.client.js')]: {
-      id: './src/ShowMore.client.js',
-      chunks: ['2'],
-      name: 'default',
-    },
-  });
-};
diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/index.js
index ffa1a8628b8e..00dc4815b728 100644
--- a/fixtures/flight/server/index.js
+++ b/fixtures/flight/server/index.js
@@ -1,11 +1,7 @@
 'use strict';
 
-require.extensions['.client.js'] = function(module, path) {
-  module.exports = {
-    $$typeof: Symbol.for('react.module.reference'),
-    name: path,
-  };
-};
+const register = require('react-transport-dom-webpack/node-register');
+register();
 
 const babelRegister = require('@babel/register');
 
@@ -25,8 +21,7 @@ app.get('/', function(req, res) {
       delete require.cache[key];
     }
   }
-  import('./handler.server.mjs').then(m => m.default(req, res));
-  //   require('./handler.server.js')(req, res);
+  require('./handler.server.js')(req, res);
 });
 
 app.listen(3001, () => {
diff --git a/fixtures/flight/server/loader.mjs b/fixtures/flight/server/loader.mjs
deleted file mode 100644
index f2d109ce8179..000000000000
--- a/fixtures/flight/server/loader.mjs
+++ /dev/null
@@ -1,42 +0,0 @@
-import babel from '@babel/core';
-
-const options = {
-  babelrc: false,
-  ignore: [/\/(build|node_modules)\//],
-  plugins: [
-    '@babel/plugin-syntax-import-meta',
-    '@babel/plugin-transform-react-jsx',
-  ],
-};
-
-const optionsCommonJS = {
-  ignore: [/\/(build|node_modules)\//],
-  presets: ['react-app'],
-  plugins: ['@babel/transform-modules-commonjs'],
-};
-
-export async function transformSource(source, context, defaultTransformSource) {
-  const {format} = context;
-  if (format === 'module' || format === 'commonjs') {
-    const opt = Object.assign(
-      {filename: context.url},
-      format === 'commonjs' ? optionsCommonJS : options
-    );
-    const {code} = await babel.transformAsync(source, opt);
-    return {source: code};
-  }
-  return defaultTransformSource(source, context);
-}
-
-export async function getSource(url, context, defaultGetSource) {
-  if (url.endsWith('.client.js')) {
-    const name = url;
-    return {
-      source:
-        "export default { $$typeof: Symbol.for('react.module.reference'), name: " +
-        JSON.stringify(name) +
-        '}',
-    };
-  }
-  return defaultGetSource(url, context, defaultGetSource);
-}
diff --git a/packages/react-transport-dom-webpack/esm/package.json b/packages/react-transport-dom-webpack/esm/package.json
new file mode 100644
index 000000000000..3dbc1ca591c0
--- /dev/null
+++ b/packages/react-transport-dom-webpack/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js b/packages/react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js
new file mode 100644
index 000000000000..d7a01f6f221d
--- /dev/null
+++ b/packages/react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../src/ReactFlightWebpackNodeLoader.js';
diff --git a/packages/react-transport-dom-webpack/node-register.js b/packages/react-transport-dom-webpack/node-register.js
new file mode 100644
index 000000000000..03754438bf33
--- /dev/null
+++ b/packages/react-transport-dom-webpack/node-register.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './src/ReactFlightWebpackNodeRegister';
diff --git a/packages/react-transport-dom-webpack/npm/esm/package.json b/packages/react-transport-dom-webpack/npm/esm/package.json
new file mode 100644
index 000000000000..3dbc1ca591c0
--- /dev/null
+++ b/packages/react-transport-dom-webpack/npm/esm/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
diff --git a/packages/react-transport-dom-webpack/npm/node-register.js b/packages/react-transport-dom-webpack/npm/node-register.js
new file mode 100644
index 000000000000..87a431afe198
--- /dev/null
+++ b/packages/react-transport-dom-webpack/npm/node-register.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./cjs/react-transport-dom-webpack-node-register.js');
diff --git a/packages/react-transport-dom-webpack/package.json b/packages/react-transport-dom-webpack/package.json
index b362d0847afa..a71a558f5160 100644
--- a/packages/react-transport-dom-webpack/package.json
+++ b/packages/react-transport-dom-webpack/package.json
@@ -17,9 +17,21 @@
     "server.js",
     "server.browser.js",
     "server.node.js",
+    "node-register.js",
     "cjs/",
-    "umd/"
+    "umd/",
+    "esm/"
   ],
+  "exports": {
+    ".": "./index.js",
+    "./plugin": "./plugin.js",
+    "./server": "./server.js",
+    "./server.browser": "./server.browser.js",
+    "./server.node": "./server.node.js",
+    "./node-loader": "./esm/react-transport-dom-webpack-node-loader.js",
+    "./node-register": "./node-register.js",
+    "./package.json": "./package.json"
+  },
   "browser": {
     "./server.js": "./server.browser.js"
   },
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
new file mode 100644
index 000000000000..f9fd2a54e24f
--- /dev/null
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+type ResolveContext = {
+  conditions: Array<string>,
+  parentURL: string | void,
+};
+
+type ResolveFunction = (
+  string,
+  ResolveContext,
+  ResolveFunction,
+) => Promise<string>;
+
+type GetSourceContext = {
+  format: string,
+  url: string,
+};
+
+type GetSourceFunction = (
+  string,
+  GetSourceContext,
+  GetSourceFunction,
+) => Promise<{source: Source}>;
+
+type Source = string | ArrayBuffer | Uint8Array;
+
+export async function resolve(
+  specifier: string,
+  context: ResolveContext,
+  defaultResolve: ResolveFunction,
+): Promise<string> {
+  // TODO: Resolve server-only files.
+  return defaultResolve(specifier, context, defaultResolve);
+}
+
+export async function getSource(
+  url: string,
+  context: GetSourceContext,
+  defaultGetSource: GetSourceFunction,
+): Promise<{source: Source}> {
+  if (url.endsWith('.client.js')) {
+    // TODO: Named exports.
+    const src =
+      "export default { $$typeof: Symbol.for('react.module.reference'), name: " +
+      JSON.stringify(url) +
+      '}';
+    return {source: src};
+  }
+  return defaultGetSource(url, context, defaultGetSource);
+}
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
new file mode 100644
index 000000000000..f5149be1c42c
--- /dev/null
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const url = require('url');
+
+module.exports = function register() {
+  (require: any).extensions['.client.js'] = function(module, path) {
+    module.exports = {
+      $$typeof: Symbol.for('react.module.reference'),
+      name: url.pathToFileURL(path).href,
+    };
+  };
+};
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 6a04d6aa4b06..15bbc68d364d 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -286,6 +286,24 @@ const bundles = [
     externals: [],
   },
 
+  /******* React Transport DOM Webpack Node.js Loader *******/
+  {
+    bundleTypes: [NODE_ESM],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-transport-dom-webpack/node-loader',
+    global: 'ReactFlightWebpackNodeLoader',
+    externals: [],
+  },
+
+  /******* React Transport DOM Webpack Node.js CommonJS Loader *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-transport-dom-webpack/node-register',
+    global: 'ReactFlightWebpackNodeRegister',
+    externals: ['url'],
+  },
+
   /******* React Transport DOM Server Relay *******/
   {
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index e7f8d1ca0955..3b644b6274e4 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -45,7 +45,7 @@ module.exports = {
     jest: true,
   },
   parserOptions: {
-    ecmaVersion: 2015,
+    ecmaVersion: 2017,
     sourceType: 'module',
   },
   rules: {
diff --git a/scripts/shared/pathsByLanguageVersion.js b/scripts/shared/pathsByLanguageVersion.js
index f1b19a8893a3..af6963f78949 100644
--- a/scripts/shared/pathsByLanguageVersion.js
+++ b/scripts/shared/pathsByLanguageVersion.js
@@ -10,6 +10,7 @@
 const esNextPaths = [
   // Internal forwarding modules
   'packages/*/*.js',
+  'packages/*/esm/*.js',
   // Source files
   'packages/*/src/**/*.js',
   'packages/dom-event-testing-library/**/*.js',

From ebf158965f2b437515af0bed2b9e9af280e0ba3c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 17 Nov 2020 13:28:12 +0000
Subject: [PATCH 0092/1603] Add best-effort documentation for third-party
 renderers (#20278)

* Add best-effort documentation for third-party renderers

* Update README.md

* Update README.md
---
 packages/react-reconciler/README.md | 240 +++++++++++++++++++++++++++-
 1 file changed, 239 insertions(+), 1 deletion(-)

diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 1a29542be8b0..d1accf49b12f 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -6,7 +6,7 @@ This is an experimental package for creating custom React renderers.
 
 **Use it at your own risk.**
 
-## API
+## Usage
 
 ```js
 const Reconciler = require('react-reconciler');
@@ -62,3 +62,241 @@ The examples in the React repository are declared a bit differently than a third
 * [React Native](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactNativeRenderer.js) and its [host config](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactNativeHostConfig.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 peristent 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 node 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 addded 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`.
+
+#### `prepareUpdate(instance, type, oldProps, newProps, rootContainer, hostContext)`
+
+React calls this method so that you can compare the previous and the next props, and decide whether you need to update the underlying instance or not. If you don't need to update it, return `null`. If you need to update it, you can return an arbitrary object representing the changes that need to happen. Then in `commitUpdate` you would need to apply those changes to the instance.
+
+This method happens **in the render phase**. It should only *calculate* the update — but not apply it! For example, the DOM renderer returns an array that looks like `[prop1, value1, prop2, value2, ...]` for all props that have actually changed. And only in `commitUpdate` it applies those changes. You should calculate as much as you can in `prepareUpdate` so that `commitUpdate` can be very fast and straightforward.
+
+See the meaning of `rootContainer` and `hostContext` in the `createInstance` documentation.
+
+#### `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.
+
+#### `now()`
+
+You can proxy this to `performance.now()` or its equivalent in your environment.
+
+#### `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`.
+
+#### `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`.
+
+### 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, updatePayload, type, prevProps, nextProps, internalHandle)`
+
+This method should mutate the `instance` according to the set of changes in `updatePayload`. Here, `updatePayload` is the object that you've returned from `prepareUpdate` and has an arbitrary structure that makes sense for your renderer. For example, the DOM renderer returns an update payload like `[prop1, value1, prop2, value2, ...]` from `prepareUpdate`, and that structure gets passed into `commitUpdate`. Ideally, all the diffing and calculation should happen inside `prepareUpdate` so that `commitUpdate` can be fast and straightforward.
+
+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)`
+
+This method should make the `instance` visible, undoing what `hideInstance` did.
+
+#### `unhideTextInstance(textInstance)`
+
+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.
+
+### 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/master/packages/react-reconciler/src/forks/ReactFiberHostConfig.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/master/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js). File an issue if you need help.

From 0f83a64eda73e93135b2d30531b10427fccc4c05 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 18 Nov 2020 10:33:26 -0600
Subject: [PATCH 0093/1603] Regression test: Missing unmount after re-order
 (#20285)

Adds a regression test for a bug I found in the effects refactor.

The bug was that reordering a child that contains passive effects would
cause the child to "forget" that it contains passive effects. This is
because when a Placement effect is scheduled by the reconciler, it would
override all of the fiber's flags, including its "static" ones:

```
child.flags = Placement;
```

The problem is that we use a static flag to use a "static" flag to track
that a fiber contains passive effects.

So what happens is that when the tree is deleted, the unmount effect is
never fired.

In the new implementation, the fix is to add the Placement flag without
overriding the rest of the bitmask:

```
child.flags |= Placement;
```

(The old implementation doesn't need to be changed because it does not
use static flags for this purpose.)
---
 .../ReactHooksWithNoopRenderer-test.js        | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 1a7e3d1f5fe9..43ec803f1155 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -3370,4 +3370,50 @@ describe('ReactHooksWithNoopRenderer', () => {
     });
     expect(Scheduler).toHaveYielded(['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.unstable_yieldValue('Mount ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount ' + label);
+        };
+      }, [label]);
+      return label;
+    }
+
+    await act(async () => {
+      root.render(
+        <>
+          <Child key="A" label="A" />
+          <Child key="B" label="B" />
+        </>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Mount A', 'Mount B']);
+
+    await act(async () => {
+      root.render(
+        <>
+          <Child key="B" label="B" />
+          <Child key="A" label="A" />
+        </>,
+      );
+    });
+    expect(Scheduler).toHaveYielded([]);
+
+    await act(async () => {
+      root.render(null);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      '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',
+    ]);
+  });
 });

From ac2cff4b10624b87b14333d9b7c5d41a51fac0ec Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 18 Nov 2020 11:23:39 -0600
Subject: [PATCH 0094/1603] Warn if commit phase error thrown in detached tree
 (#20286)

Until `skipUnmountedBoundaries` lands again, we need some way to detect
when errors are thrown inside a deleted tree. I've added a warning to
`captureCommitPhaseError` that fires when we reach the root of a subtree
without finding either a boundary or a HostRoot.

Even after `skipUnmountedBoundaries`  lands, this warning could be a
useful guard against internal bugs, like a bug in the
`skipUnmountedBoundaries` implementation itself.

In the meantime, do not add this warning to the allowlist; this is only
for our internal use. For this reason, I've also only added it to the
new fork, not the old one, to prevent this from accidentally leaking
into the open source build.
---
 .../DOMPluginEventSystem-test.internal.js     | 56 +++++++++++++------
 .../src/ReactFiberWorkLoop.new.js             | 16 ++++++
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 8bf16bc94255..004f0bb631f3 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -1669,16 +1669,28 @@ describe('DOMPluginEventSystem', () => {
 
             function Test() {
               React.useEffect(() => {
-                setClick1(buttonRef.current, targetListener1);
-                setClick2(buttonRef.current, targetListener2);
-                setClick3(buttonRef.current, targetListener3);
-                setClick4(buttonRef.current, targetListener4);
+                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 () => {
-                  setClick1();
-                  setClick2();
-                  setClick3();
-                  setClick4();
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
                 };
               });
 
@@ -1703,16 +1715,28 @@ describe('DOMPluginEventSystem', () => {
 
             function Test2() {
               React.useEffect(() => {
-                setClick1(buttonRef.current, targetListener1);
-                setClick2(buttonRef.current, targetListener2);
-                setClick3(buttonRef.current, targetListener3);
-                setClick4(buttonRef.current, targetListener4);
+                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 () => {
-                  setClick1();
-                  setClick2();
-                  setClick3();
-                  setClick4();
+                  clearClick1();
+                  clearClick2();
+                  clearClick3();
+                  clearClick4();
                 };
               });
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f7a4f39bb1cb..0f881d853426 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2844,6 +2844,22 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
     }
     fiber = fiber.return;
   }
+
+  if (__DEV__) {
+    // TODO: Until we re-land skipUnmountedBoundaries (see #20147), this warning
+    // will fire for errors that are thrown by destroy functions inside deleted
+    // trees. What it should instead do is propagate the error to the parent of
+    // the deleted tree. In the meantime, do not add this warning to the
+    // allowlist; this is only for our internal use.
+    console.error(
+      'Internal React error: Attempted to capture a commit phase error ' +
+        'inside a detached tree. This indicates a bug in React. Likely ' +
+        '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 pingSuspendedRoot(

From a81c02ac150233bdb5f31380d4135397fb8f4660 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 18 Nov 2020 17:56:42 -0500
Subject: [PATCH 0095/1603] Profiler onNestedUpdateScheduled accepts id as
 first param (#20293)

---
 .../src/ReactFiberWorkLoop.new.js               |  6 +++---
 .../src/ReactFiberWorkLoop.old.js               |  6 +++---
 .../__tests__/ReactProfiler-test.internal.js    | 17 ++++++++++++-----
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0f881d853426..254106c78401 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -549,12 +549,12 @@ export function scheduleUpdateOnFiber(
         let current = fiber;
         while (current !== null) {
           if (current.tag === Profiler) {
-            const {onNestedUpdateScheduled} = current.memoizedProps;
+            const {id, onNestedUpdateScheduled} = current.memoizedProps;
             if (typeof onNestedUpdateScheduled === 'function') {
               if (enableSchedulerTracing) {
-                onNestedUpdateScheduled(root.memoizedInteractions);
+                onNestedUpdateScheduled(id, root.memoizedInteractions);
               } else {
-                onNestedUpdateScheduled();
+                onNestedUpdateScheduled(id);
               }
             }
           }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b4852f120db9..4c515ec0fb01 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -549,12 +549,12 @@ export function scheduleUpdateOnFiber(
         let current = fiber;
         while (current !== null) {
           if (current.tag === Profiler) {
-            const {onNestedUpdateScheduled} = current.memoizedProps;
+            const {id, onNestedUpdateScheduled} = current.memoizedProps;
             if (typeof onNestedUpdateScheduled === 'function') {
               if (enableSchedulerTracing) {
-                onNestedUpdateScheduled(root.memoizedInteractions);
+                onNestedUpdateScheduled(id, root.memoizedInteractions);
               } else {
-                onNestedUpdateScheduled();
+                onNestedUpdateScheduled(id);
               }
             }
           }
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index a87c83e9c180..9089bfb1caba 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -2583,7 +2583,8 @@ describe('Profiler', () => {
         expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
         }
@@ -2624,7 +2625,9 @@ describe('Profiler', () => {
 
         expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
         expect(onNestedUpdateScheduledOne).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduledOne.mock.calls[0][0]).toBe('one');
         expect(onNestedUpdateScheduledTwo).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduledTwo.mock.calls[0][0]).toBe('two');
         expect(onNestedUpdateScheduledThree).not.toHaveBeenCalled();
       });
 
@@ -2817,7 +2820,8 @@ describe('Profiler', () => {
         ]);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
         }
@@ -2850,7 +2854,8 @@ describe('Profiler', () => {
         ]);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(2);
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[1][0]).toMatchInteractions([
+          expect(onNestedUpdateScheduled.mock.calls[1][0]).toBe('test');
+          expect(onNestedUpdateScheduled.mock.calls[1][1]).toMatchInteractions([
             interactionUpdate,
           ]);
         }
@@ -2898,7 +2903,8 @@ describe('Profiler', () => {
         expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
         }
@@ -2969,7 +2975,8 @@ describe('Profiler', () => {
         ]);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toMatchInteractions([
+          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
         }

From 89d4fe141a28b54807901126063249cab6483f89 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 20 Nov 2020 02:45:03 +0000
Subject: [PATCH 0096/1603] Exclude fixtures from Flow config (#20302)

---
 scripts/flow/config/flowconfig | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 79789c4ec56a..bb2d4db0b6f8 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -1,6 +1,7 @@
 [ignore]
 .*/scripts/bench/.*
 .*/build/.*
+.*/fixtures/.*
 .*/.tempUserDataDir/.*
 
 # These shims are copied into external projects:

From d93b58a5e38cf06998da628932029291cc605c2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 20 Nov 2020 11:47:13 -0500
Subject: [PATCH 0097/1603] Add flight specific entry point for react package
 (#20304)

This configures the Flight fixture to use the "react-server" environment.

This allows the package.json exports field to specify a different resolution
in this environment.

I use this in the "react" package to resolve to a new bundle that excludes
the Hooks that aren't relevant in this environment like useState and useEffect.

This allows us to error early if these names are imported. If we actually
published ESM, it would we a static error. Now it's a runtime error.

You can test this by importing useState in Container.js which is used
by the client and server.
---
 fixtures/flight/package.json                  |  2 +-
 packages/react/npm/unstable-index.server.js   |  7 ++++
 packages/react/package.json                   | 15 ++++++++
 .../unstable-index.server.experimental.js     | 37 +++++++++++++++++++
 packages/react/unstable-index.server.js       | 12 ++++++
 scripts/rollup/bundles.js                     |  9 +++++
 scripts/rollup/forks.js                       |  6 +--
 7 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/npm/unstable-index.server.js
 create mode 100644 packages/react/unstable-index.server.experimental.js
 create mode 100644 packages/react/unstable-index.server.js

diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
index e8e30736f3fb..3470e72e753a 100644
--- a/fixtures/flight/package.json
+++ b/fixtures/flight/package.json
@@ -67,7 +67,7 @@
     "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
     "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
     "start:client": "node scripts/start.js",
-    "start:server": "NODE_ENV=development node --experimental-loader ./loader/index.js server",
+    "start:server": "NODE_ENV=development node --experimental-loader ./loader/index.js --conditions=react-server server",
     "start:prod": "node scripts/build.js && NODE_ENV=production node server",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
diff --git a/packages/react/npm/unstable-index.server.js b/packages/react/npm/unstable-index.server.js
new file mode 100644
index 000000000000..431f25786777
--- /dev/null
+++ b/packages/react/npm/unstable-index.server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-unstable-index.server.production.min.js');
+} else {
+  module.exports = require('./cjs/react-unstable-index.server.development.js');
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 4ed34b868d91..993a45af3bc5 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -17,9 +17,24 @@
     "umd/",
     "jsx-runtime.js",
     "jsx-dev-runtime.js",
+    "unstable-index.server.js",
     "unstable-cache.js"
   ],
   "main": "index.js",
+  "exports": {
+    ".": {
+      "react-server": "./unstable-index.server.js",
+      "default": "./index.js"
+    },
+    "./index": {
+      "react-server": "./unstable-index.server.js",
+      "default": "./index.js"
+    },
+    "./build-info.json": "./build-info.json",
+    "./jsx-runtime": "./jsx-runtime.js",
+    "./jsx-dev-runtime": "./jsx-dev-runtime.js",
+    "./": "./"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/react/unstable-index.server.experimental.js b/packages/react/unstable-index.server.experimental.js
new file mode 100644
index 000000000000..479094f46de6
--- /dev/null
+++ b/packages/react/unstable-index.server.experimental.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  Children,
+  createRef,
+  forwardRef,
+  lazy,
+  memo,
+  useCallback,
+  useContext,
+  useDebugValue,
+  useMemo,
+  useMutableSource as unstable_useMutableSource,
+  createMutableSource as unstable_createMutableSource,
+  Fragment,
+  Profiler,
+  StrictMode,
+  Suspense,
+  createElement,
+  cloneElement,
+  isValidElement,
+  version,
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  // exposeConcurrentModeAPIs
+  useDeferredValue as unstable_useDeferredValue,
+  SuspenseList as unstable_SuspenseList,
+  unstable_useOpaqueIdentifier,
+  // enableDebugTracing
+  unstable_DebugTracingMode,
+} from './src/React';
diff --git a/packages/react/unstable-index.server.js b/packages/react/unstable-index.server.js
new file mode 100644
index 000000000000..e2ae4ad2f62d
--- /dev/null
+++ b/packages/react/unstable-index.server.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'This entry point is not yet supported outside of experimental channels',
+);
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 15bbc68d364d..f39d197eb036 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -90,6 +90,15 @@ const bundles = [
     externals: [],
   },
 
+  /******* Isomorphic Server Only *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react/unstable-index.server',
+    global: 'React',
+    externals: [],
+  },
+
   /******* React JSX Runtime *******/
   {
     bundleTypes: [
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 03437e1f3103..4651b3fa86af 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -43,7 +43,7 @@ const forks = Object.freeze({
       // happens. Other bundles just require('object-assign') anyway.
       return null;
     }
-    if (entry === 'react') {
+    if (entry === 'react' || entry === 'react/unstable-index.server') {
       // Use the forked version that uses ES modules instead of CommonJS.
       return 'shared/forks/object-assign.inline-umd.js';
     }
@@ -64,8 +64,8 @@ const forks = Object.freeze({
   // Without this fork, importing `shared/ReactSharedInternals` inside
   // the `react` package itself would not work due to a cyclical dependency.
   'shared/ReactSharedInternals': (bundleType, entry, dependencies) => {
-    if (entry === 'react') {
-      return 'react/src/ReactSharedInternals';
+    if (entry === 'react' || entry === 'react/unstable-index.server') {
+      return 'react/src/ReactSharedInternals.js';
     }
     if (!entry.startsWith('react/') && dependencies.indexOf('react') === -1) {
       // React internals are unavailable if we can't reference the package.

From 2cf8f7f61c338928cdb1d4faebb5632da3a2b79d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 20 Nov 2020 12:31:29 -0500
Subject: [PATCH 0098/1603] Speed up local "build-for-detools" target (#20307)

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 788479a9df8f..eb95ebce230f 100644
--- a/package.json
+++ b/package.json
@@ -106,7 +106,8 @@
   },
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE",
+    "build-for-devtools-dev": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom/index,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_DEV",
+    "build-for-devtools-prod": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom/index,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",

From e6a0f276307fcb2f1c5bc41d630c5e4c9e95a037 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 20 Nov 2020 14:46:45 -0500
Subject: [PATCH 0099/1603] Profiler: Improve nested-update checks (#20299)

Previous checks were too naive when it comes to pending lower-pri work or batched updates. This commit adds two new (previously failing) tests and fixes.
---
 .../src/ReactFiberWorkLoop.new.js             |  4 +-
 .../src/ReactFiberWorkLoop.old.js             |  4 +-
 .../__tests__/ReactProfiler-test.internal.js  | 94 ++++++++++++++++++-
 3 files changed, 93 insertions(+), 9 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 254106c78401..140ea56e0420 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -542,7 +542,7 @@ export function scheduleUpdateOnFiber(
 
   if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
     if (
-      executionContext === CommitContext &&
+      (executionContext & CommitContext) !== NoContext &&
       root === rootCommittingMutationOrLayoutEffects
     ) {
       if (fiber.mode & ProfileMode) {
@@ -2240,7 +2240,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  if (remainingLanes === SyncLane) {
+  if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
     if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
       markNestedUpdateScheduled();
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 4c515ec0fb01..02cfdce20af4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -542,7 +542,7 @@ export function scheduleUpdateOnFiber(
 
   if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
     if (
-      executionContext === CommitContext &&
+      (executionContext & CommitContext) !== NoContext &&
       root === rootCommittingMutationOrLayoutEffects
     ) {
       if (fiber.mode & ProfileMode) {
@@ -2240,7 +2240,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  if (remainingLanes === SyncLane) {
+  if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
     if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
       markNestedUpdateScheduled();
     }
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 9089bfb1caba..eb0c69537df4 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -748,6 +748,52 @@ describe('Profiler', () => {
         expect(onRender.mock.calls[2][1]).toBe('update');
       });
 
+      it('is properly distinguish updates and nested-updates when there is more than sync remaining work', () => {
+        loadModules({
+          enableSchedulerTracing,
+          useNoopRenderer: true,
+        });
+
+        function Component() {
+          const [didMount, setDidMount] = React.useState(false);
+
+          React.useLayoutEffect(() => {
+            setDidMount(true);
+          }, []);
+          Scheduler.unstable_yieldValue(didMount);
+          return didMount;
+        }
+
+        const onRender = jest.fn();
+
+        // Schedule low-priority work.
+        Scheduler.unstable_runWithPriority(
+          Scheduler.unstable_LowPriority,
+          () => {
+            ReactNoop.render(
+              <React.Profiler id="root" onRender={onRender}>
+                <Component />
+              </React.Profiler>,
+            );
+          },
+        );
+
+        // Flush sync work with a nested upate
+        ReactNoop.flushSync(() => {
+          ReactNoop.render(
+            <React.Profiler id="root" onRender={onRender}>
+              <Component />
+            </React.Profiler>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([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', () => {
           const callback = jest.fn();
@@ -2582,14 +2628,50 @@ describe('Profiler', () => {
 
         expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
           expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
         }
       });
 
+      it('is called when a function component schedules a batched update during a layout effect', () => {
+        function Component() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useLayoutEffect(() => {
+            ReactNoop.batchedUpdates(() => {
+              setDidMount(true);
+            });
+          }, []);
+          Scheduler.unstable_yieldValue(`Component:${didMount}`);
+          return didMount;
+        }
+
+        const onNestedUpdateScheduled = jest.fn();
+        const onRender = jest.fn();
+
+        ReactNoop.render(
+          <React.Profiler
+            id="root"
+            onNestedUpdateScheduled={onNestedUpdateScheduled}
+            onRender={onRender}>
+            <Component />
+          </React.Profiler>,
+        );
+        expect(Scheduler).toFlushAndYield([
+          'Component:false',
+          'Component:true',
+        ]);
+
+        expect(onRender).toHaveBeenCalledTimes(2);
+        expect(onRender.mock.calls[0][1]).toBe('mount');
+        expect(onRender.mock.calls[1][1]).toBe('nested-update');
+
+        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('root');
+      });
+
       it('bubbles up and calls all ancestor Profilers', () => {
         function Component() {
           const [didMount, setDidMount] = React.useState(false);
@@ -2819,8 +2901,8 @@ describe('Profiler', () => {
           'Component:true:false',
         ]);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
           expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
@@ -2853,8 +2935,8 @@ describe('Profiler', () => {
           'Component:true:true',
         ]);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(2);
+        expect(onNestedUpdateScheduled.mock.calls[1][0]).toBe('test');
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[1][0]).toBe('test');
           expect(onNestedUpdateScheduled.mock.calls[1][1]).toMatchInteractions([
             interactionUpdate,
           ]);
@@ -2902,8 +2984,8 @@ describe('Profiler', () => {
 
         expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
           expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
@@ -2974,8 +3056,8 @@ describe('Profiler', () => {
           'Component:true:true',
         ]);
         expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
         if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
           expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
             interactionCreation,
           ]);
@@ -3016,6 +3098,8 @@ describe('Profiler', () => {
         expect(Scheduler).toHaveYielded(['Component:true']);
         expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
       });
+
+      // TODO Add hydration tests to ensure we don't have false positives called.
     });
   });
 

From 565148d7516f9f0c4d90a7f06ab479c79ad56c69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 30 Nov 2020 17:25:56 -0500
Subject: [PATCH 0100/1603] Disallow *.server.js imports from any other files
 (#20309)

This convention ensures that you can declare that you intend for a file
to only be used on the server (even if it technically might resolve
on the client).
---
 .../flight/server/{index.js => cli.server.js} |  0
 fixtures/flight/server/package.json           |  3 +-
 .../src/ReactFlightWebpackNodeLoader.js       | 29 ++++++++++++++++++-
 .../src/ReactFlightWebpackNodeRegister.js     | 25 ++++++++++++++++
 scripts/rollup/bundles.js                     |  2 +-
 5 files changed, 56 insertions(+), 3 deletions(-)
 rename fixtures/flight/server/{index.js => cli.server.js} (100%)

diff --git a/fixtures/flight/server/index.js b/fixtures/flight/server/cli.server.js
similarity index 100%
rename from fixtures/flight/server/index.js
rename to fixtures/flight/server/cli.server.js
diff --git a/fixtures/flight/server/package.json b/fixtures/flight/server/package.json
index 5bbefffbabee..59055eee7d5b 100644
--- a/fixtures/flight/server/package.json
+++ b/fixtures/flight/server/package.json
@@ -1,3 +1,4 @@
 {
-  "type": "commonjs"
+  "type": "commonjs",
+  "main": "./cli.server.js"
 }
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index f9fd2a54e24f..102da3302876 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -31,12 +31,39 @@ type GetSourceFunction = (
 
 type Source = string | ArrayBuffer | Uint8Array;
 
+let warnedAboutConditionsFlag = false;
+
 export async function resolve(
   specifier: string,
   context: ResolveContext,
   defaultResolve: ResolveFunction,
 ): Promise<string> {
-  // TODO: Resolve server-only files.
+  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.',
+      );
+    }
+  }
+  // We intentionally check the specifier here instead of the resolved file.
+  // This allows package exports to configure non-server aliases that resolve to server files
+  // depending on environment. It's probably a bad idea to export a server file as "main" though.
+  if (specifier.endsWith('.server.js')) {
+    if (context.parentURL && !context.parentURL.endsWith('.server.js')) {
+      throw new Error(
+        `Cannot import "${specifier}" from "${context.parentURL}". ` +
+          'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
+          'That way nobody accidentally sends these to the client by indirectly importing it.',
+      );
+    }
+  }
   return defaultResolve(specifier, context, defaultResolve);
 }
 
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index f5149be1c42c..17c3b8ef9d9c 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -9,6 +9,9 @@
 
 const url = require('url');
 
+// $FlowFixMe
+const Module = require('module');
+
 module.exports = function register() {
   (require: any).extensions['.client.js'] = function(module, path) {
     module.exports = {
@@ -16,4 +19,26 @@ module.exports = function register() {
       name: url.pathToFileURL(path).href,
     };
   };
+
+  const originalResolveFilename = Module._resolveFilename;
+
+  Module._resolveFilename = function(request, parent, isMain, options) {
+    // We intentionally check the request here instead of the resolved file.
+    // This allows package exports to configure non-server aliases that resolve to server files
+    // depending on environment. It's probably a bad idea to export a server file as "main" though.
+    if (request.endsWith('.server.js')) {
+      if (
+        parent &&
+        parent.filename &&
+        !parent.filename.endsWith('.server.js')
+      ) {
+        throw new Error(
+          `Cannot import "${request}" from "${parent.filename}". ` +
+            'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
+            'That way nobody accidentally sends these to the client by indirectly importing it.',
+        );
+      }
+    }
+    return originalResolveFilename.apply(this, arguments);
+  };
 };
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index f39d197eb036..641e6dd26027 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -310,7 +310,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-transport-dom-webpack/node-register',
     global: 'ReactFlightWebpackNodeRegister',
-    externals: ['url'],
+    externals: ['url', 'module'],
   },
 
   /******* React Transport DOM Server Relay *******/

From 3f73dcee374732a331b7e72c88ff6dd3b7116a42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 30 Nov 2020 17:37:27 -0500
Subject: [PATCH 0101/1603] Support named exports from client references
 (#20312)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Rename "name"->"filepath" field on Webpack module references

This field name will get confused with the imported name or the module id.

* Switch back to transformSource instead of getSource

getSource would be more efficient in the cases where we don't need to read
the original file but we'll need to most of the time.

Even then, we can't return a JS file if we're trying to support non-JS
loader because it'll end up being transformed.

Similarly, we'll need to parse the file and we can't parse it before it's
transformed. So we need to chain with other loaders that know how.

* Add acorn dependency

This should be the version used by Webpack since we have a dependency on
Webpack anyway.

* Parse exported names of ESM modules

We need to statically resolve the names that a client component will
export so that we can export a module reference for each of the names.

For export * from, this gets tricky because we need to also load the
source of the next file to parse that. We don't know exactly how the
client is built so we guess it's somewhat default.

* Handle imported names one level deep in CommonJS using a Proxy

We use a proxy to see what property the server access and that will tell
us which property we'll want to import on the client.

* Add export name to module reference and Webpack map

To support named exports each name needs to be encoded as a separate
reference. It's possible with module splitting that different exports end
up in different chunks.

It's also possible that the export is renamed as part of minification.
So the map also includes a map from the original to the bundled name.

* Special case plain CJS requires and conditional imports using __esModule

This models if the server tries to import .default or a plain require.
We should replicate the same thing on the client when we load that
module reference.

* Dedupe acorn-related deps

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 fixtures/flight/loader/index.js               |  14 +-
 fixtures/flight/server/handler.server.js      |  33 ++-
 fixtures/flight/src/App.server.js             |   4 +-
 fixtures/flight/src/Counter.client.js         |   2 +-
 fixtures/flight/src/Counter2.client.js        |   1 +
 .../react-transport-dom-webpack/package.json  |   1 +
 .../ReactFlightClientWebpackBundlerConfig.js  |  13 +-
 .../ReactFlightServerWebpackBundlerConfig.js  |   9 +-
 .../src/ReactFlightWebpackNodeLoader.js       | 200 +++++++++++++++++-
 .../src/ReactFlightWebpackNodeRegister.js     |  53 ++++-
 .../src/__tests__/ReactFlightDOM-test.js      |  10 +-
 scripts/flow/environment.js                   |   2 +-
 scripts/rollup/bundles.js                     |   2 +-
 yarn.lock                                     |  39 ++--
 14 files changed, 322 insertions(+), 61 deletions(-)
 create mode 100644 fixtures/flight/src/Counter2.client.js

diff --git a/fixtures/flight/loader/index.js b/fixtures/flight/loader/index.js
index b9cfa5b73eee..04960e6dcc9e 100644
--- a/fixtures/flight/loader/index.js
+++ b/fixtures/flight/loader/index.js
@@ -1,4 +1,8 @@
-import {resolve, getSource} from 'react-transport-dom-webpack/node-loader';
+import {
+  resolve,
+  getSource,
+  transformSource as reactTransformSource,
+} from 'react-transport-dom-webpack/node-loader';
 
 export {resolve, getSource};
 
@@ -13,7 +17,7 @@ const babelOptions = {
   ],
 };
 
-export async function transformSource(source, context, defaultTransformSource) {
+async function babelTransformSource(source, context, defaultTransformSource) {
   const {format} = context;
   if (format === 'module') {
     const opt = Object.assign({filename: context.url}, babelOptions);
@@ -22,3 +26,9 @@ export async function transformSource(source, context, defaultTransformSource) {
   }
   return defaultTransformSource(source, context, defaultTransformSource);
 }
+
+export async function transformSource(source, context, defaultTransformSource) {
+  return reactTransformSource(source, context, (s, c) => {
+    return babelTransformSource(s, c, defaultTransformSource);
+  });
+}
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index d7715af9cc75..86476bb2c2d7 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -17,14 +17,35 @@ module.exports = async function(req, res) {
   pipeToNodeWritable(<App />, res, {
     // TODO: Read from a map on the disk.
     [resolve('../src/Counter.client.js')]: {
-      id: './src/Counter.client.js',
-      chunks: ['1'],
-      name: 'default',
+      Counter: {
+        id: './src/Counter.client.js',
+        chunks: ['2'],
+        name: 'Counter',
+      },
+    },
+    [resolve('../src/Counter2.client.js')]: {
+      Counter: {
+        id: './src/Counter2.client.js',
+        chunks: ['1'],
+        name: 'Counter',
+      },
     },
     [resolve('../src/ShowMore.client.js')]: {
-      id: './src/ShowMore.client.js',
-      chunks: ['2'],
-      name: 'default',
+      default: {
+        id: './src/ShowMore.client.js',
+        chunks: ['3'],
+        name: 'default',
+      },
+      '': {
+        id: './src/ShowMore.client.js',
+        chunks: ['3'],
+        name: '',
+      },
+      '*': {
+        id: './src/ShowMore.client.js',
+        chunks: ['3'],
+        name: '*',
+      },
     },
   });
 };
diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.server.js
index 54a644dc48d4..35a223dce8b0 100644
--- a/fixtures/flight/src/App.server.js
+++ b/fixtures/flight/src/App.server.js
@@ -2,7 +2,8 @@ import * as React from 'react';
 
 import Container from './Container.js';
 
-import Counter from './Counter.client.js';
+import {Counter} from './Counter.client.js';
+import {Counter as Counter2} from './Counter2.client.js';
 
 import ShowMore from './ShowMore.client.js';
 
@@ -11,6 +12,7 @@ export default function App() {
     <Container>
       <h1>Hello, world</h1>
       <Counter />
+      <Counter2 />
       <ShowMore>
         <p>Lorem ipsum</p>
       </ShowMore>
diff --git a/fixtures/flight/src/Counter.client.js b/fixtures/flight/src/Counter.client.js
index 00a1f2cbe440..676280f0542f 100644
--- a/fixtures/flight/src/Counter.client.js
+++ b/fixtures/flight/src/Counter.client.js
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import Container from './Container.js';
 
-export default function Counter() {
+export function Counter() {
   const [count, setCount] = React.useState(0);
   return (
     <Container>
diff --git a/fixtures/flight/src/Counter2.client.js b/fixtures/flight/src/Counter2.client.js
new file mode 100644
index 000000000000..084f7bc5f071
--- /dev/null
+++ b/fixtures/flight/src/Counter2.client.js
@@ -0,0 +1 @@
+export * from './Counter.client.js';
diff --git a/packages/react-transport-dom-webpack/package.json b/packages/react-transport-dom-webpack/package.json
index a71a558f5160..8e2db02610ef 100644
--- a/packages/react-transport-dom-webpack/package.json
+++ b/packages/react-transport-dom-webpack/package.json
@@ -50,6 +50,7 @@
     "webpack": "^4.43.0"
   },
   "dependencies": {
+    "acorn": "^6.2.1",
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1"
   },
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index 3e667960d262..f3c4e1bf1c16 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -59,5 +59,16 @@ export function requireModule<T>(moduleData: ModuleReference<T>): T {
       throw entry;
     }
   }
-  return __webpack_require__(moduleData.id)[moduleData.name];
+  const moduleExports = __webpack_require__(moduleData.id);
+  if (moduleData.name === '*') {
+    // This is a placeholder value that represents that the caller imported this
+    // as a CommonJS module as is.
+    return moduleExports;
+  }
+  if (moduleData.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;
+  }
+  return moduleExports[moduleData.name];
 }
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index f691809522ca..c8469eeba806 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -8,7 +8,9 @@
  */
 
 type WebpackMap = {
-  [filename: string]: ModuleMetaData,
+  [filepath: string]: {
+    [name: string]: ModuleMetaData,
+  },
 };
 
 export type BundlerConfig = WebpackMap;
@@ -16,6 +18,7 @@ export type BundlerConfig = WebpackMap;
 // eslint-disable-next-line no-unused-vars
 export type ModuleReference<T> = {
   $$typeof: Symbol,
+  filepath: string,
   name: string,
 };
 
@@ -30,7 +33,7 @@ export type ModuleKey = string;
 const MODULE_TAG = Symbol.for('react.module.reference');
 
 export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
-  return reference.name;
+  return reference.filepath + '#' + reference.name;
 }
 
 export function isModuleReference(reference: Object): boolean {
@@ -41,5 +44,5 @@ export function resolveModuleMetaData<T>(
   config: BundlerConfig,
   moduleReference: ModuleReference<T>,
 ): ModuleMetaData {
-  return config[moduleReference.name];
+  return config[moduleReference.filepath][moduleReference.name];
 }
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 102da3302876..d716cda4653c 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import acorn from 'acorn';
+
 type ResolveContext = {
   conditions: Array<string>,
   parentURL: string | void,
@@ -16,11 +18,10 @@ type ResolveFunction = (
   string,
   ResolveContext,
   ResolveFunction,
-) => Promise<string>;
+) => Promise<{url: string}>;
 
 type GetSourceContext = {
   format: string,
-  url: string,
 };
 
 type GetSourceFunction = (
@@ -29,15 +30,32 @@ type GetSourceFunction = (
   GetSourceFunction,
 ) => Promise<{source: Source}>;
 
+type TransformSourceContext = {
+  format: string,
+  url: string,
+};
+
+type TransformSourceFunction = (
+  Source,
+  TransformSourceContext,
+  TransformSourceFunction,
+) => Promise<{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<string> {
+): 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,
@@ -71,14 +89,174 @@ export async function getSource(
   url: string,
   context: GetSourceContext,
   defaultGetSource: GetSourceFunction,
+) {
+  // We stash this in case we end up needing to resolve export * statements later.
+  stashedGetSource = defaultGetSource;
+  return defaultGetSource(url, context, defaultGetSource);
+}
+
+function addExportNames(names, node) {
+  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,
+): 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 loadClientImport(
+  url: string,
+  defaultTransformSource: TransformSourceFunction,
 ): Promise<{source: Source}> {
-  if (url.endsWith('.client.js')) {
-    // TODO: Named exports.
-    const src =
-      "export default { $$typeof: Symbol.for('react.module.reference'), name: " +
-      JSON.stringify(url) +
-      '}';
-    return {source: src};
+  if (stashedGetSource === null) {
+    throw new Error(
+      'Expected getSource to have been called before transformSource',
+    );
   }
-  return defaultGetSource(url, context, defaultGetSource);
+  // TODO: Validate that this is another module by calling getFormat.
+  const {source} = await stashedGetSource(
+    url,
+    {format: 'module'},
+    stashedGetSource,
+  );
+  return defaultTransformSource(
+    source,
+    {format: 'module', url},
+    defaultTransformSource,
+  );
+}
+
+async function parseExportNamesInto(
+  transformedSource: string,
+  names: Array<string>,
+  parentURL: string,
+  defaultTransformSource,
+): Promise<void> {
+  const {body} = acorn.parse(transformedSource, {
+    ecmaVersion: '2019',
+    sourceType: 'module',
+  });
+  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 loadClientImport(url, defaultTransformSource);
+          if (typeof source !== 'string') {
+            throw new Error('Expected the transformed source to be a string.');
+          }
+          parseExportNamesInto(source, names, url, defaultTransformSource);
+          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.specificers) {
+          const specificers = node.specificers;
+          for (let j = 0; j < specificers.length; j++) {
+            addExportNames(names, specificers[j].exported);
+          }
+        }
+        continue;
+    }
+  }
+}
+
+export async function transformSource(
+  source: Source,
+  context: TransformSourceContext,
+  defaultTransformSource: TransformSourceFunction,
+): Promise<{source: Source}> {
+  const transformed = await defaultTransformSource(
+    source,
+    context,
+    defaultTransformSource,
+  );
+  if (context.format === 'module' && context.url.endsWith('.client.js')) {
+    const transformedSource = transformed.source;
+    if (typeof transformedSource !== 'string') {
+      throw new Error('Expected source to have been transformed to a string.');
+    }
+
+    const names = [];
+    await parseExportNamesInto(
+      transformedSource,
+      names,
+      context.url,
+      defaultTransformSource,
+    );
+
+    let newSrc =
+      "const MODULE_REFERENCE = Symbol.for('react.module.reference');\n";
+    for (let i = 0; i < names.length; i++) {
+      const name = names[i];
+      if (name === 'default') {
+        newSrc += 'export default ';
+      } else {
+        newSrc += 'export const ' + name + ' = ';
+      }
+      newSrc += '{ $$typeof: MODULE_REFERENCE, filepath: ';
+      newSrc += JSON.stringify(context.url);
+      newSrc += ', name: ';
+      newSrc += JSON.stringify(name);
+      newSrc += '};\n';
+    }
+
+    return {source: newSrc};
+  }
+  return transformed;
 }
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index 17c3b8ef9d9c..26a92b8323d3 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -13,11 +13,58 @@ const url = require('url');
 const Module = require('module');
 
 module.exports = function register() {
+  const MODULE_REFERENCE = Symbol.for('react.module.reference');
+  const proxyHandlers = {
+    get: function(target, name, receiver) {
+      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 'filepath':
+          return target.filepath;
+        case 'name':
+          return target.name;
+        // We need to special case this because createElement reads it if we pass this
+        // reference.
+        case 'defaultProps':
+          return undefined;
+        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.
+          target.default = {
+            $$typeof: MODULE_REFERENCE,
+            filepath: target.filepath,
+            // This a placeholder value that tells the client to conditionally use the
+            // whole object or just the default export.
+            name: '',
+          };
+          return true;
+      }
+      let cachedReference = target[name];
+      if (!cachedReference) {
+        cachedReference = target[name] = {
+          $$typeof: MODULE_REFERENCE,
+          filepath: target.filepath,
+          name: name,
+        };
+      }
+      return cachedReference;
+    },
+    set: function() {
+      throw new Error('Cannot assign to a client module from a server module.');
+    },
+  };
+
   (require: any).extensions['.client.js'] = function(module, path) {
-    module.exports = {
-      $$typeof: Symbol.for('react.module.reference'),
-      name: url.pathToFileURL(path).href,
+    const moduleId = url.pathToFileURL(path).href;
+    const moduleReference: {[string]: any} = {
+      $$typeof: MODULE_REFERENCE,
+      filepath: moduleId,
+      name: '*', // Represents the whole object instead of a particular import.
     };
+    module.exports = new Proxy(moduleReference, proxyHandlers);
   };
 
   const originalResolveFilename = Module._resolveFilename;
diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index d8568c661c2a..e437c7b20bc6 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -68,12 +68,14 @@ describe('ReactFlightDOM', () => {
       d: moduleExport,
     };
     webpackMap['path/' + idx] = {
-      id: '' + idx,
-      chunks: [],
-      name: 'd',
+      default: {
+        id: '' + idx,
+        chunks: [],
+        name: 'd',
+      },
     };
     const MODULE_TAG = Symbol.for('react.module.reference');
-    return {$$typeof: MODULE_TAG, name: 'path/' + idx};
+    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
   }
 
   async function waitForSuspense(fn) {
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 8fd7111ebf52..3efe41ff344d 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -68,4 +68,4 @@ declare module 'EventListener' {
 }
 
 declare function __webpack_chunk_load__(id: string): Promise<mixed>;
-declare function __webpack_require__(id: string): {default: any};
+declare function __webpack_require__(id: string): any;
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 641e6dd26027..6f0f88e04e00 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -301,7 +301,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-transport-dom-webpack/node-loader',
     global: 'ReactFlightWebpackNodeLoader',
-    externals: [],
+    externals: ['acorn'],
   },
 
   /******* React Transport DOM Webpack Node.js CommonJS Loader *******/
diff --git a/yarn.lock b/yarn.lock
index d44e85f4e47d..7b6cb0890962 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2617,15 +2617,10 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.1.0.tgz#294adb71b57398b0680015f0a38c563ee1db5384"
-  integrity sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==
-
-acorn-jsx@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.2.0.tgz#4c66069173d6fdd68ed85239fc256226182b2ebe"
-  integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
+acorn-jsx@^5.0.0, 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-walk@^6.0.1:
   version "6.2.0"
@@ -2637,25 +2632,15 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^6.0.1, acorn@^6.0.7:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
-  integrity sha512-/czfa8BwS88b9gWQVhc8eknunSA2DoJpJyTQkhheIf5E48u1N0R4q/YxxsAeqRrmK9TQ/uYfgLDfZo91UlANIA==
-
-acorn@^6.4.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
-  integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
-
-acorn@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
-  integrity sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==
+acorn@^6.0.1, acorn@^6.0.7, acorn@^6.2.1, 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==
 
-acorn@^7.1.1, acorn@^7.4.0:
-  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.0.tgz#e1ad486e6c54501634c6c397c5c121daa383607c"
-  integrity sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==
+acorn@^7.1.0, acorn@^7.1.1, 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==
 
 adbkit-logcat@^1.1.0:
   version "1.1.0"

From 5711811da17c62de7ba6c911dbc7f20f16bfc980 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 1 Dec 2020 10:14:04 -0500
Subject: [PATCH 0102/1603] Reconcile element types of lazy component yielding
 the same type (#20357)

* Reconcile element types of lazy component yielding the same type

* Add some legacy mode and suspense boundary flushing tests

* Fix infinite loop in legacy mode

In legacy mode we typically commit the suspending fiber and then rerender
the nearest boundary to render the fallback in a separate commit.

We can't do that when the boundary itself suspends because when we try to
do the second pass, it'll suspend again and infinite loop.

Interestingly the legacy semantics are not needed in this case because
they exist to let an existing partial render fully commit its partial state.

In this case there's no partial state, so we can just render the fallback
immediately instead.

* Check fast refresh compatibility first

resolveLazy can suspend and if it does, it can resuspend. Fast refresh
assumes that we don't resuspend. Instead it relies on updating the inner
component later.

* Use timers instead of act to force fallbacks to show
---
 .../src/ReactChildFiber.new.js                | 114 ++++----
 .../src/ReactChildFiber.old.js                | 113 ++++----
 .../src/ReactFiberThrow.new.js                |  10 +-
 .../src/ReactFiberThrow.old.js                |  10 +-
 .../src/__tests__/ReactLazy-test.internal.js  | 262 ++++++++++++++++++
 5 files changed, 407 insertions(+), 102 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 601f3b21e439..534d7032ba2d 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -246,6 +246,12 @@ function warnOnFunctionType(returnFiber: Fiber) {
   }
 }
 
+function resolveLazy(lazyType) {
+  const payload = lazyType._payload;
+  const init = lazyType._init;
+  return init(payload);
+}
+
 // 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
@@ -383,11 +389,32 @@ function ChildReconciler(shouldTrackSideEffects) {
     element: ReactElement,
     lanes: Lanes,
   ): Fiber {
+    const elementType = element.type;
+    if (elementType === REACT_FRAGMENT_TYPE) {
+      return updateFragment(
+        returnFiber,
+        current,
+        element.props.children,
+        lanes,
+        element.key,
+      );
+    }
     if (current !== null) {
       if (
-        current.elementType === element.type ||
+        current.elementType === elementType ||
         // Keep this check inline so it only runs on the false path:
-        (__DEV__ ? isCompatibleFamilyForHotReloading(current, element) : false)
+        (__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.
+        (enableLazyElements &&
+          typeof elementType === 'object' &&
+          elementType !== null &&
+          elementType.$$typeof === REACT_LAZY_TYPE &&
+          resolveLazy(elementType) === current.type)
       ) {
         // Move based on index
         const existing = useFiber(current, element.props);
@@ -551,15 +578,6 @@ function ChildReconciler(shouldTrackSideEffects) {
       switch (newChild.$$typeof) {
         case REACT_ELEMENT_TYPE: {
           if (newChild.key === key) {
-            if (newChild.type === REACT_FRAGMENT_TYPE) {
-              return updateFragment(
-                returnFiber,
-                oldFiber,
-                newChild.props.children,
-                lanes,
-                key,
-              );
-            }
             return updateElement(returnFiber, oldFiber, newChild, lanes);
           } else {
             return null;
@@ -622,15 +640,6 @@ function ChildReconciler(shouldTrackSideEffects) {
             existingChildren.get(
               newChild.key === null ? newIdx : newChild.key,
             ) || null;
-          if (newChild.type === REACT_FRAGMENT_TYPE) {
-            return updateFragment(
-              returnFiber,
-              matchedFiber,
-              newChild.props.children,
-              lanes,
-              newChild.key,
-            );
-          }
           return updateElement(returnFiber, matchedFiber, newChild, lanes);
         }
         case REACT_PORTAL_TYPE: {
@@ -1101,39 +1110,44 @@ function ChildReconciler(shouldTrackSideEffects) {
       // TODO: If key === null and child.key === null, then this only applies to
       // the first item in the list.
       if (child.key === key) {
-        switch (child.tag) {
-          case Fragment: {
-            if (element.type === REACT_FRAGMENT_TYPE) {
-              deleteRemainingChildren(returnFiber, child.sibling);
-              const existing = useFiber(child, element.props.children);
-              existing.return = returnFiber;
-              if (__DEV__) {
-                existing._debugSource = element._source;
-                existing._debugOwner = element._owner;
-              }
-              return existing;
+        const elementType = element.type;
+        if (elementType === REACT_FRAGMENT_TYPE) {
+          if (child.tag === Fragment) {
+            deleteRemainingChildren(returnFiber, child.sibling);
+            const existing = useFiber(child, element.props.children);
+            existing.return = returnFiber;
+            if (__DEV__) {
+              existing._debugSource = element._source;
+              existing._debugOwner = element._owner;
             }
-            break;
+            return existing;
           }
-          default: {
-            if (
-              child.elementType === element.type ||
-              // Keep this check inline so it only runs on the false path:
-              (__DEV__
-                ? isCompatibleFamilyForHotReloading(child, element)
-                : false)
-            ) {
-              deleteRemainingChildren(returnFiber, child.sibling);
-              const existing = useFiber(child, element.props);
-              existing.ref = coerceRef(returnFiber, child, element);
-              existing.return = returnFiber;
-              if (__DEV__) {
-                existing._debugSource = element._source;
-                existing._debugOwner = element._owner;
-              }
-              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.
+            (enableLazyElements &&
+              typeof elementType === 'object' &&
+              elementType !== null &&
+              elementType.$$typeof === REACT_LAZY_TYPE &&
+              resolveLazy(elementType) === child.type)
+          ) {
+            deleteRemainingChildren(returnFiber, child.sibling);
+            const existing = useFiber(child, element.props);
+            existing.ref = coerceRef(returnFiber, child, element);
+            existing.return = returnFiber;
+            if (__DEV__) {
+              existing._debugSource = element._source;
+              existing._debugOwner = element._owner;
             }
-            break;
+            return existing;
           }
         }
         // Didn't match.
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index adb9c0418df0..df4c2e10d929 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -246,6 +246,12 @@ function warnOnFunctionType(returnFiber: Fiber) {
   }
 }
 
+function resolveLazy(lazyType) {
+  const payload = lazyType._payload;
+  const init = lazyType._init;
+  return init(payload);
+}
+
 // 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
@@ -383,11 +389,32 @@ function ChildReconciler(shouldTrackSideEffects) {
     element: ReactElement,
     lanes: Lanes,
   ): Fiber {
+    const elementType = element.type;
+    if (elementType === REACT_FRAGMENT_TYPE) {
+      return updateFragment(
+        returnFiber,
+        current,
+        element.props.children,
+        lanes,
+        element.key,
+      );
+    }
     if (current !== null) {
       if (
-        current.elementType === element.type ||
+        current.elementType === elementType ||
         // Keep this check inline so it only runs on the false path:
-        (__DEV__ ? isCompatibleFamilyForHotReloading(current, element) : false)
+        (__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.
+        (enableLazyElements &&
+          typeof elementType === 'object' &&
+          elementType !== null &&
+          elementType.$$typeof === REACT_LAZY_TYPE &&
+          resolveLazy(elementType) === current.type)
       ) {
         // Move based on index
         const existing = useFiber(current, element.props);
@@ -551,15 +578,6 @@ function ChildReconciler(shouldTrackSideEffects) {
       switch (newChild.$$typeof) {
         case REACT_ELEMENT_TYPE: {
           if (newChild.key === key) {
-            if (newChild.type === REACT_FRAGMENT_TYPE) {
-              return updateFragment(
-                returnFiber,
-                oldFiber,
-                newChild.props.children,
-                lanes,
-                key,
-              );
-            }
             return updateElement(returnFiber, oldFiber, newChild, lanes);
           } else {
             return null;
@@ -622,15 +640,6 @@ function ChildReconciler(shouldTrackSideEffects) {
             existingChildren.get(
               newChild.key === null ? newIdx : newChild.key,
             ) || null;
-          if (newChild.type === REACT_FRAGMENT_TYPE) {
-            return updateFragment(
-              returnFiber,
-              matchedFiber,
-              newChild.props.children,
-              lanes,
-              newChild.key,
-            );
-          }
           return updateElement(returnFiber, matchedFiber, newChild, lanes);
         }
         case REACT_PORTAL_TYPE: {
@@ -1101,39 +1110,43 @@ function ChildReconciler(shouldTrackSideEffects) {
       // TODO: If key === null and child.key === null, then this only applies to
       // the first item in the list.
       if (child.key === key) {
-        switch (child.tag) {
-          case Fragment: {
-            if (element.type === REACT_FRAGMENT_TYPE) {
-              deleteRemainingChildren(returnFiber, child.sibling);
-              const existing = useFiber(child, element.props.children);
-              existing.return = returnFiber;
-              if (__DEV__) {
-                existing._debugSource = element._source;
-                existing._debugOwner = element._owner;
-              }
-              return existing;
+        const elementType = element.type;
+        if (elementType === REACT_FRAGMENT_TYPE) {
+          if (child.tag === Fragment) {
+            deleteRemainingChildren(returnFiber, child.sibling);
+            const existing = useFiber(child, element.props.children);
+            existing.return = returnFiber;
+            if (__DEV__) {
+              existing._debugSource = element._source;
+              existing._debugOwner = element._owner;
             }
-            break;
+            return existing;
           }
-          default: {
-            if (
-              child.elementType === element.type ||
-              // Keep this check inline so it only runs on the false path:
-              (__DEV__
-                ? isCompatibleFamilyForHotReloading(child, element)
-                : false)
-            ) {
-              deleteRemainingChildren(returnFiber, child.sibling);
-              const existing = useFiber(child, element.props);
-              existing.ref = coerceRef(returnFiber, child, element);
-              existing.return = returnFiber;
-              if (__DEV__) {
-                existing._debugSource = element._source;
-                existing._debugOwner = element._owner;
-              }
-              return existing;
+        } else {
+          if (
+            child.elementType === elementType ||
+            (__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.
+            (enableLazyElements &&
+              typeof elementType === 'object' &&
+              elementType !== null &&
+              elementType.$$typeof === REACT_LAZY_TYPE &&
+              resolveLazy(elementType) === child.type)
+          ) {
+            deleteRemainingChildren(returnFiber, child.sibling);
+            const existing = useFiber(child, element.props);
+            existing.ref = coerceRef(returnFiber, child, element);
+            existing.return = returnFiber;
+            if (__DEV__) {
+              existing._debugSource = element._source;
+              existing._debugOwner = element._owner;
             }
-            break;
+            return existing;
           }
         }
         // Didn't match.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 9dd9df6d0cfe..01ab69cecee6 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -256,7 +256,15 @@ function throwException(
         // Note: It doesn't matter whether the component that suspended was
         // inside a blocking mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
-        if ((workInProgress.mode & BlockingMode) === NoMode) {
+        //
+        // If the suspense boundary suspended itself suspended, we don't have to
+        // do this trick because nothing was partially started. We can just
+        // directly do a second pass over the fallback in this render and
+        // pretend we meant to render that directly.
+        if (
+          (workInProgress.mode & BlockingMode) === NoMode &&
+          workInProgress !== returnFiber
+        ) {
           workInProgress.flags |= DidCapture;
           sourceFiber.flags |= ForceUpdateForLegacySuspense;
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 8d338d552d7d..fabcffa87378 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -256,7 +256,15 @@ function throwException(
         // Note: It doesn't matter whether the component that suspended was
         // inside a blocking mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
-        if ((workInProgress.mode & BlockingMode) === NoMode) {
+        //
+        // If the suspense boundary suspended itself suspended, we don't have to
+        // do this trick because nothing was partially started. We can just
+        // directly do a second pass over the fallback in this render and
+        // pretend we meant to render that directly.
+        if (
+          (workInProgress.mode & BlockingMode) === NoMode &&
+          workInProgress !== returnFiber
+        ) {
           workInProgress.flags |= DidCapture;
           sourceFiber.flags |= ForceUpdateForLegacySuspense;
 
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 55c15e7412ea..b7f1570823c1 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -1268,6 +1268,192 @@ describe('ReactLazy', () => {
     expect(componentStackMessage).toContain('in Lazy');
   });
 
+  // @gate enableLazyElements
+  it('mount and reorder lazy types', async () => {
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
+      }
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('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.unstable_yieldValue('Init A');
+      return fakeImport(ChildA);
+    });
+    const LazyChildB = lazy(() => {
+      Scheduler.unstable_yieldValue('Init B');
+      return fakeImport(ChildB);
+    });
+    const LazyChildA2 = lazy(() => {
+      Scheduler.unstable_yieldValue('Init A2');
+      return fakeImport(ChildA);
+    });
+    let resolveB2;
+    const LazyChildB2 = lazy(() => {
+      Scheduler.unstable_yieldValue('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,
+    });
+
+    expect(Scheduler).toFlushAndYield(['Init A', 'Init B', 'Loading...']);
+    expect(root).not.toMatchRenderedOutput('AB');
+
+    await LazyChildA;
+    await LazyChildB;
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'B',
+      'Did mount: A',
+      'Did mount: B',
+    ]);
+    expect(root).toMatchRenderedOutput('AB');
+
+    // Swap the position of A and B
+    root.update(<Parent swap={true} />);
+    expect(Scheduler).toFlushAndYield(['Init B2', 'Loading...']);
+    jest.runAllTimers();
+
+    // The suspense boundary should've triggered now.
+    expect(root).toMatchRenderedOutput('Loading...');
+    await resolveB2({default: ChildB});
+
+    // We need to flush to trigger the second one to load.
+    expect(Scheduler).toFlushAndYield(['Init A2']);
+    await LazyChildA2;
+
+    expect(Scheduler).toFlushAndYield([
+      'b',
+      'a',
+      'Did update: b',
+      'Did update: a',
+    ]);
+    expect(root).toMatchRenderedOutput('ba');
+  });
+
+  // @gate enableLazyElements
+  it('mount and reorder lazy types (legacy mode)', async () => {
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
+      }
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('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.unstable_yieldValue('Init A');
+      return fakeImport(ChildA);
+    });
+    const LazyChildB = lazy(() => {
+      Scheduler.unstable_yieldValue('Init B');
+      return fakeImport(ChildB);
+    });
+    const LazyChildA2 = lazy(() => {
+      Scheduler.unstable_yieldValue('Init A2');
+      return fakeImport(ChildA);
+    });
+    const LazyChildB2 = lazy(() => {
+      Scheduler.unstable_yieldValue('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,
+    });
+
+    expect(Scheduler).toHaveYielded(['Init A', 'Init B', 'Loading...']);
+    expect(root).not.toMatchRenderedOutput('AB');
+
+    await LazyChildA;
+    await LazyChildB;
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'B',
+      'Did mount: A',
+      'Did mount: B',
+    ]);
+    expect(root).toMatchRenderedOutput('AB');
+
+    // Swap the position of A and B
+    root.update(<Parent swap={true} />);
+    expect(Scheduler).toHaveYielded(['Init B2', 'Loading...']);
+    await LazyChildB2;
+    // We need to flush to trigger the second one to load.
+    expect(Scheduler).toFlushAndYield(['Init A2']);
+    await LazyChildA2;
+
+    expect(Scheduler).toFlushAndYield([
+      'b',
+      'a',
+      'Did update: b',
+      'Did update: a',
+    ]);
+    expect(root).toMatchRenderedOutput('ba');
+  });
+
   // @gate enableLazyElements
   it('mount and reorder lazy elements', async () => {
     class Child extends React.Component {
@@ -1343,4 +1529,80 @@ describe('ReactLazy', () => {
     ]);
     expect(root).toMatchRenderedOutput('ba');
   });
+
+  // @gate enableLazyElements
+  it('mount and reorder lazy elements (legacy mode)', async () => {
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
+      }
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('Did update: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    const lazyChildA = lazy(() => {
+      Scheduler.unstable_yieldValue('Init A');
+      return fakeImport(<Child key="A" label="A" />);
+    });
+    const lazyChildB = lazy(() => {
+      Scheduler.unstable_yieldValue('Init B');
+      return fakeImport(<Child key="B" label="B" />);
+    });
+    const lazyChildA2 = lazy(() => {
+      Scheduler.unstable_yieldValue('Init A2');
+      return fakeImport(<Child key="A" label="a" />);
+    });
+    const lazyChildB2 = lazy(() => {
+      Scheduler.unstable_yieldValue('Init B2');
+      return fakeImport(<Child key="B" label="b" />);
+    });
+
+    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,
+    });
+
+    expect(Scheduler).toHaveYielded(['Init A', 'Loading...']);
+    expect(root).not.toMatchRenderedOutput('AB');
+
+    await lazyChildA;
+    // We need to flush to trigger the B to load.
+    expect(Scheduler).toFlushAndYield(['Init B']);
+    await lazyChildB;
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'B',
+      'Did mount: A',
+      'Did mount: B',
+    ]);
+    expect(root).toMatchRenderedOutput('AB');
+
+    // Swap the position of A and B
+    root.update(<Parent swap={true} />);
+    expect(Scheduler).toHaveYielded(['Init B2', 'Loading...']);
+    await lazyChildB2;
+    // We need to flush to trigger the second one to load.
+    expect(Scheduler).toFlushAndYield(['Init A2']);
+    await lazyChildA2;
+
+    expect(Scheduler).toFlushAndYield([
+      'b',
+      'a',
+      'Did update: b',
+      'Did update: a',
+    ]);
+    expect(root).toMatchRenderedOutput('ba');
+  });
 });

From a2a025537d5b4e1fd249c0a83217b04092527069 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 1 Dec 2020 10:33:32 -0500
Subject: [PATCH 0103/1603] Fixed invalid DevTools work tags (#20362)

* Fixed invalid DevTools work tags

Work tags changed recently (PR #13902) but we didn't bump React versions. This meant that DevTools has valid work tags only for master (and FB www sync) but invalid work tags for the latest open source releases. To fix this, I incremneted React's version in Git (without an actual release) and added a new fork to the work tags detection branch.

This commit also adds tags for the experimental Scope and Fundamental APIs to DevTools so component names will at least display correctly. Technically these new APIs were first introduced to experimental builds ~16.9 but I didn't add a new branch to the work tags fork because I don't they're used commonly. I've just added them to the 17+ branches.

* Removed FundamentalComponent from DevTools tag defs
---
 package.json                                  |  4 +-
 packages/react-art/package.json               |  4 +-
 .../src/backend/renderer.js                   | 71 +++++++++++++++++--
 .../src/backend/types.js                      |  2 +
 packages/react-dom/package.json               |  4 +-
 packages/react-is/package.json                |  2 +-
 packages/react-reconciler/package.json        |  2 +-
 packages/react-test-renderer/package.json     |  6 +-
 packages/react/package.json                   |  2 +-
 packages/shared/ReactVersion.js               |  6 +-
 10 files changed, 84 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index eb95ebce230f..0d50364ef51e 100644
--- a/package.json
+++ b/package.json
@@ -106,8 +106,8 @@
   },
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
-    "build-for-devtools-dev": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom/index,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_DEV",
-    "build-for-devtools-prod": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom/index,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_PROD",
+    "build-for-devtools-dev": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_DEV",
+    "build-for-devtools-prod": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index 194a9697e0a3..ae977717034e 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.1"
+    "react": "17.0.2"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 1245c254c557..f8e0f07104ac 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {gte} from 'semver';
+import {gt, gte} from 'semver';
 import {
   ComponentFilterDisplayName,
   ComponentFilterElementType,
@@ -166,8 +166,10 @@ export function getInternalReactConstants(
   // **********************************************************
   // The section below is copied from files in React repo.
   // Keep it in sync, and add version guards if it changes.
-  if (gte(version, '17.0.0-alpha')) {
-    // TODO (Offscreen) Update the version number above to reflect the first Offscreen alpha/beta release.
+  //
+  // 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 = {
       ClassComponent: 1,
       ContextConsumer: 9,
@@ -185,10 +187,41 @@ export function getInternalReactConstants(
       IncompleteClassComponent: 17,
       IndeterminateComponent: 2,
       LazyComponent: 16,
+      LegacyHiddenComponent: 23,
       MemoComponent: 14,
       Mode: 8,
       OffscreenComponent: 22, // Experimental
       Profiler: 12,
+      ScopeComponent: 21, // Experimental
+      SimpleMemoComponent: 15,
+      SuspenseComponent: 13,
+      SuspenseListComponent: 19, // Experimental
+      YieldComponent: -1, // Removed
+    };
+  } else if (gte(version, '17.0.0-alpha')) {
+    ReactTypeOfWork = {
+      ClassComponent: 1,
+      ContextConsumer: 9,
+      ContextProvider: 10,
+      CoroutineComponent: -1, // Removed
+      CoroutineHandlerPhase: -1, // Removed
+      DehydratedSuspenseComponent: 18, // Behind a flag
+      ForwardRef: 11,
+      Fragment: 7,
+      FunctionComponent: 0,
+      HostComponent: 5,
+      HostPortal: 4,
+      HostRoot: 3,
+      HostText: 6,
+      IncompleteClassComponent: 17,
+      IndeterminateComponent: 2,
+      LazyComponent: 16,
+      LegacyHiddenComponent: 24,
+      MemoComponent: 14,
+      Mode: 8,
+      OffscreenComponent: 23, // Experimental
+      Profiler: 12,
+      ScopeComponent: 21, // Experimental
       SimpleMemoComponent: 15,
       SuspenseComponent: 13,
       SuspenseListComponent: 19, // Experimental
@@ -212,10 +245,12 @@ export function getInternalReactConstants(
       IncompleteClassComponent: 17,
       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
@@ -239,10 +274,12 @@ export function getInternalReactConstants(
       IncompleteClassComponent: -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
@@ -266,10 +303,12 @@ export function getInternalReactConstants(
       IncompleteClassComponent: -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
@@ -301,7 +340,11 @@ export function getInternalReactConstants(
     HostPortal,
     HostText,
     Fragment,
+    LazyComponent,
+    LegacyHiddenComponent,
     MemoComponent,
+    OffscreenComponent,
+    ScopeComponent,
     SimpleMemoComponent,
     SuspenseComponent,
     SuspenseListComponent,
@@ -354,11 +397,22 @@ export function getInternalReactConstants(
       case HostText:
       case Fragment:
         return null;
+      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:
         return getDisplayName(resolvedType, 'Anonymous');
       case SuspenseComponent:
         return 'Suspense';
+      case LegacyHiddenComponent:
+        return 'LegacyHidden';
+      case OffscreenComponent:
+        return 'Offscreen';
+      case ScopeComponent:
+        return 'Scope';
       case SuspenseListComponent:
         return 'SuspenseList';
       default:
@@ -493,10 +547,14 @@ export function attach(
 
   const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
     if (__DEBUG__) {
-      const displayName = getDisplayNameForFiber(fiber) || 'null';
+      const displayName =
+        fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null');
       const id = getFiberID(fiber);
-      const parentDisplayName =
-        (parentFiber != null && getDisplayNameForFiber(parentFiber)) || 'null';
+      const parentDisplayName = parentFiber
+        ? parentFiber.tag +
+          ':' +
+          (getDisplayNameForFiber(parentFiber) || 'null')
+        : '';
       const parentID = parentFiber ? getFiberID(parentFiber) : '';
       // NOTE: calling getFiberID or getPrimaryFiber is unsafe here
       // because it will put them in the map. For now, we'll omit them.
@@ -1207,6 +1265,7 @@ export function attach(
       return;
     }
     const id = getFiberID(primaryFiber);
+
     if (isRoot) {
       // Roots must be removed only after all children (pending and simulated) have been removed.
       // So we track it separately.
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 4ec480acedad..d87c2fdf97b2 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -42,10 +42,12 @@ export type WorkTagMap = {|
   IncompleteClassComponent: WorkTag,
   IndeterminateComponent: WorkTag,
   LazyComponent: WorkTag,
+  LegacyHiddenComponent: WorkTag,
   MemoComponent: WorkTag,
   Mode: WorkTag,
   OffscreenComponent: WorkTag,
   Profiler: WorkTag,
+  ScopeComponent: WorkTag,
   SimpleMemoComponent: WorkTag,
   SuspenseComponent: WorkTag,
   SuspenseListComponent: WorkTag,
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index f512ed9f516b..5e8991e89877 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -22,7 +22,7 @@
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.1"
+    "react": "17.0.2"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index 1687b93fae93..1a6567dcff5e 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 858a7190a6ea..a6fd3a05a962 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -26,7 +26,7 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.1"
+    "react": "^17.0.2"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index c12ce070d8f3..ea62201e24b1 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "17.0.1",
+  "version": "17.0.2",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -20,12 +20,12 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "object-assign": "^4.1.1",
-    "react-is": "^17.0.1",
+    "react-is": "^17.0.2",
     "react-shallow-renderer": "^16.13.1",
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.1"
+    "react": "17.0.2"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react/package.json b/packages/react/package.json
index 993a45af3bc5..0dd2c35ee628 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "17.0.1",
+  "version": "17.0.2",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index b042a00d1143..0404e3972272 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -6,4 +6,8 @@
  */
 
 // TODO: this is special because it gets imported during build.
-export default '17.0.1';
+//
+// TODO: 17.0.2 has not been released to NPM;
+// It exists as a placeholder so that DevTools can support work tag changes between releases.
+// When we next publish a release (either 17.0.2 or 17.1.0), update the matching TODO in backend/renderer.js
+export default '17.0.2';

From ad6f3d5c55a79e8a44798aad36118e73de3a64f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 1 Dec 2020 11:01:16 -0500
Subject: [PATCH 0104/1603] Ignore node_modules when printing warnings (#20363)

This now finds acorn and fails to extract warnings from it. But also, this
seems slow.
---
 scripts/print-warnings/print-warnings.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index 163aacf00ac4..9bdd6543d2a3 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -90,6 +90,7 @@ gs([
   '!packages/react-devtools*/**/*.js',
   '!**/__tests__/**/*.js',
   '!**/__mocks__/**/*.js',
+  '!**/node_modules/**/*.js',
 ]).pipe(
   through.obj(transform, cb => {
     process.stdout.write(

From 148ffe3cfe7a2627bebfb1852f332a1d122b3103 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 1 Dec 2020 16:40:12 +0000
Subject: [PATCH 0105/1603] Failing test for Client reconciliation (#20318)

---
 .../src/__tests__/ReactFlightDOM-test.js      | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index e437c7b20bc6..4ff3ff20341c 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -440,4 +440,92 @@ describe('ReactFlightDOM', () => {
         '<p>Game over</p>', // TODO: should not have message in prod.
     );
   });
+
+  // @gate experimental
+  it('should preserve state of client components on refetch', async () => {
+    const {Suspense} = React;
+
+    // Client
+
+    function Page({response}) {
+      return response.readRoot();
+    }
+
+    function Input() {
+      return <input />;
+    }
+
+    const InputClient = moduleReference(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 = ReactDOM.unstable_createRoot(container);
+
+    const stream1 = getTestStream();
+    ReactTransportDOMServer.pipeToNodeWritable(
+      <App color="red" />,
+      stream1.writable,
+      webpackMap,
+    );
+    const response1 = ReactTransportDOMClient.createFromReadableStream(
+      stream1.readable,
+    );
+    await act(async () => {
+      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();
+    ReactTransportDOMServer.pipeToNodeWritable(
+      <App color="blue" />,
+      stream2.writable,
+      webpackMap,
+    );
+    const response2 = ReactTransportDOMClient.createFromReadableStream(
+      stream2.readable,
+    );
+    await act(async () => {
+      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');
+  });
 });

From 555eeae33de09a5cbbb0b71aba3c57d7bfac0513 Mon Sep 17 00:00:00 2001
From: Philipp Spiess <hello@philippspiess.com>
Date: Wed, 2 Dec 2020 16:25:55 +0100
Subject: [PATCH 0106/1603] Add disableNativeComponentFrames flag (#20364)

## Summary

We're experiencing some issues internally where the component stack is
getting into our way of fixing them as it causes the page to become
unresponsive. This adds a flag so that we can disable this feature as a
temporary workaround.

More internal context: https://fburl.com/go9yoklm

## Test Plan

I tried to default this flag to `__VARIANT__` but the variant tests
(`yarn test-www --variant`) started to fail across the board since a lot
of tests depend on the component tree, things like this:

https://user-images.githubusercontent.com/458591/100771192-6a1e1c00-33fe-11eb-9ab0-8ff46ba378a2.png

So, it seems to work :-)

Given that it's unhandy to update the hundreds of tests that are failing
I decided to hard code this to `false` like we already do for some other
options.
---
 packages/shared/ReactComponentStackFrame.js                | 7 +++++--
 packages/shared/ReactFeatureFlags.js                       | 2 ++
 packages/shared/forks/ReactFeatureFlags.native-fb.js       | 1 +
 packages/shared/forks/ReactFeatureFlags.native-oss.js      | 1 +
 packages/shared/forks/ReactFeatureFlags.test-renderer.js   | 1 +
 .../shared/forks/ReactFeatureFlags.test-renderer.native.js | 1 +
 .../shared/forks/ReactFeatureFlags.test-renderer.www.js    | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.js         | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.www.js     | 1 +
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js     | 1 +
 packages/shared/forks/ReactFeatureFlags.www.js             | 1 +
 11 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
index e330e08d6751..0e6b8a03c125 100644
--- a/packages/shared/ReactComponentStackFrame.js
+++ b/packages/shared/ReactComponentStackFrame.js
@@ -10,7 +10,10 @@
 import type {Source} from 'shared/ReactElementType';
 import type {LazyComponent} from 'react/src/ReactLazy';
 
-import {enableComponentStackLocations} from 'shared/ReactFeatureFlags';
+import {
+  enableComponentStackLocations,
+  disableNativeComponentFrames,
+} from 'shared/ReactFeatureFlags';
 
 import {
   REACT_SUSPENSE_TYPE,
@@ -65,7 +68,7 @@ export function describeNativeComponentFrame(
   construct: boolean,
 ): string {
   // If something asked for a stack inside a fake render, it should get ignored.
-  if (!fn || reentry) {
+  if (disableNativeComponentFrames || !fn || reentry) {
     return '';
   }
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index c2c4ada6260d..e7f6a22cdf3e 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -98,6 +98,8 @@ export const enableComponentStackLocations = true;
 
 export const enableNewReconciler = false;
 
+export const disableNativeComponentFrames = false;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 461267619d82..3c589f1aa687 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -44,6 +44,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableNativeComponentFrames = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index d3b55536eaef..2a5da4d2e496 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableNativeComponentFrames = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b20b1b1da03e..dca5277ca1d7 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableNativeComponentFrames = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index b0da73bc65fb..49b020333e24 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableNativeComponentFrames = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index cfa4816166c0..9c6cec531b58 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableNativeComponentFrames = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 757e99c6e1dc..ef61a51dbf9e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableNativeComponentFrames = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 1de76e52c3bb..42c91d88de1f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
+export const disableNativeComponentFrames = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 1321bf70bab2..ad4ff2bab765 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -47,6 +47,7 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 // to __VARIANT__.
 export const enableTrustedTypesIntegration = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const disableNativeComponentFrames = false;
 
 export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 70d68cef060b..d9ae9c183e90 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -28,6 +28,7 @@ export const {
   enableDebugTracing,
   enableDoubleInvokingEffects,
   enableUseRefAccessWarning,
+  disableNativeComponentFrames,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From e23673b511a2eab6ddcb848a4150105c954f289a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 3 Dec 2020 03:44:56 +0000
Subject: [PATCH 0107/1603] [Flight] Add getCacheForType() to the dispatcher
 (#20315)

* Remove react/unstable_cache

We're probably going to make it available via the dispatcher. Let's remove this for now.

* Add readContext() to the dispatcher

On the server, it will be per-request.

On the client, there will be some way to shadow it.

For now, I provide it on the server, and throw on the client.

* Use readContext() from react-fetch

This makes it work on the server (but not on the client until we implement it there.)

Updated the test to use Server Components. Now it passes.

* Fixture: Add fetch from a Server Component

* readCache -> getCacheForType<T>

* Add React.unstable_getCacheForType

* Add a feature flag

* Fix Flow

* Add react-suspense-test-utils and port tests

* Remove extra Map lookup

* Unroll async/await because build system

* Add some error coverage and retry

* Add unstable_getCacheForType to Flight entry
---
 fixtures/flight/server/cli.server.js          |  21 ++-
 fixtures/flight/src/App.server.js             |   7 +
 .../react-debug-tools/src/ReactDebugHooks.js  |   6 +
 .../src/server/ReactPartialRendererHooks.js   |   9 ++
 packages/react-fetch/src/ReactFetchBrowser.js |  21 ++-
 packages/react-fetch/src/ReactFetchNode.js    |  19 +--
 .../src/__tests__/ReactFetchNode-test.js      | 120 +++++++++++-------
 .../src/ReactFiberHooks.new.js                |  35 +++++
 .../src/ReactFiberHooks.old.js                |  38 ++++++
 .../src/ReactInternalTypes.js                 |   1 +
 .../react-server/src/ReactFlightServer.js     |  20 +++
 packages/react-suspense-test-utils/README.md  |  12 ++
 .../index.js}                                 |   3 +-
 .../react-suspense-test-utils/npm/index.js    |   3 +
 .../react-suspense-test-utils/package.json    |  20 +++
 .../src/ReactSuspenseTestUtils.js             |  68 ++++++++++
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/package.json                   |   3 +-
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   6 +
 .../react/src/__tests__/ReactCache-test.js    |  26 ----
 packages/react/src/cache/ReactCache.js        |  43 -------
 .../unstable-index.server.experimental.js     |   1 +
 packages/shared/ReactFeatureFlags.js          |   1 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 scripts/error-codes/codes.json                |   4 +-
 scripts/rollup/bundles.js                     |  18 +--
 37 files changed, 363 insertions(+), 156 deletions(-)
 create mode 100644 packages/react-suspense-test-utils/README.md
 rename packages/{react/unstable-cache.js => react-suspense-test-utils/index.js} (72%)
 create mode 100644 packages/react-suspense-test-utils/npm/index.js
 create mode 100644 packages/react-suspense-test-utils/package.json
 create mode 100644 packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
 delete mode 100644 packages/react/src/__tests__/ReactCache-test.js
 delete mode 100644 packages/react/src/cache/ReactCache.js

diff --git a/fixtures/flight/server/cli.server.js b/fixtures/flight/server/cli.server.js
index 00dc4815b728..3d28e818bcf8 100644
--- a/fixtures/flight/server/cli.server.js
+++ b/fixtures/flight/server/cli.server.js
@@ -17,13 +17,28 @@ const app = express();
 // Application
 app.get('/', function(req, res) {
   if (process.env.NODE_ENV === 'development') {
-    for (var key in require.cache) {
-      delete require.cache[key];
-    }
+    // This doesn't work in ESM mode.
+    // for (var key in require.cache) {
+    //   delete require.cache[key];
+    // }
   }
   require('./handler.server.js')(req, res);
 });
 
+app.get('/todos', function(req, res) {
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.json([
+    {
+      id: 1,
+      text: 'Shave yaks',
+    },
+    {
+      id: 2,
+      text: 'Eat kale',
+    },
+  ]);
+});
+
 app.listen(3001, () => {
   console.log('Flight Server listening on port 3001...');
 });
diff --git a/fixtures/flight/src/App.server.js b/fixtures/flight/src/App.server.js
index 35a223dce8b0..4a22318e9f18 100644
--- a/fixtures/flight/src/App.server.js
+++ b/fixtures/flight/src/App.server.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {fetch} from 'react-fetch';
 
 import Container from './Container.js';
 
@@ -8,11 +9,17 @@ import {Counter as Counter2} from './Counter2.client.js';
 import ShowMore from './ShowMore.client.js';
 
 export default function App() {
+  const todos = fetch('http://localhost:3001/todos').json();
   return (
     <Container>
       <h1>Hello, world</h1>
       <Counter />
       <Counter2 />
+      <ul>
+        {todos.map(todo => (
+          <li key={todo.id}>{todo.text}</li>
+        ))}
+      </ul>
       <ShowMore>
         <p>Lorem ipsum</p>
       </ShowMore>
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 39f8f5118c26..ce62b5ce8b9e 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -23,6 +23,7 @@ import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
+import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
@@ -100,6 +101,10 @@ function nextHook(): null | Hook {
   return hook;
 }
 
+function getCacheForType<T>(resourceType: () => T): T {
+  invariant(false, 'Not implemented.');
+}
+
 function readContext<T>(
   context: ReactContext<T>,
   observedBits: void | number | boolean,
@@ -298,6 +303,7 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
 }
 
 const Dispatcher: DispatcherType = {
+  getCacheForType,
   readContext,
   useCallback,
   useContext,
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 49ef413357e7..3a543aa337b6 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -20,6 +20,7 @@ import type PartialRenderer from './ReactPartialRenderer';
 import {validateContextBounds} from './ReactPartialRendererContext';
 
 import invariant from 'shared/invariant';
+import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
 type BasicStateAction<S> = (S => S) | S;
@@ -214,6 +215,10 @@ export function resetHooksState(): void {
   workInProgressHook = null;
 }
 
+function getCacheForType<T>(resourceType: () => T): T {
+  invariant(false, 'Not implemented.');
+}
+
 function readContext<T>(
   context: ReactContext<T>,
   observedBits: void | number | boolean,
@@ -512,3 +517,7 @@ export const Dispatcher: DispatcherType = {
   // Subscriptions are not setup in a server environment.
   useMutableSource,
 };
+
+if (enableCache) {
+  Dispatcher.getCacheForType = getCacheForType;
+}
diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index af073733b828..a83c8f5a6236 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -9,7 +9,7 @@
 
 import type {Wakeable} from 'shared/ReactTypes';
 
-import {readCache} from 'react/unstable-cache';
+import {unstable_getCacheForType} from 'react';
 
 const Pending = 0;
 const Resolved = 1;
@@ -34,16 +34,13 @@ type Result = PendingResult | ResolvedResult | RejectedResult;
 
 // TODO: this is a browser-only version. Add a separate Node entry point.
 const nativeFetch = window.fetch;
-const fetchKey = {};
-
-function readResultMap(): Map<string, Result> {
-  const resources = readCache().resources;
-  let map = resources.get(fetchKey);
-  if (map === undefined) {
-    map = new Map();
-    resources.set(fetchKey, map);
-  }
-  return map;
+
+function getResultMap(): Map<string, Result> {
+  return unstable_getCacheForType(createResultMap);
+}
+
+function createResultMap(): Map<string, Result> {
+  return new Map();
 }
 
 function toResult(thenable): Result {
@@ -120,7 +117,7 @@ Response.prototype = {
 };
 
 function preloadResult(url: string, options: mixed): Result {
-  const map = readResultMap();
+  const map = getResultMap();
   let entry = map.get(url);
   if (!entry) {
     if (options) {
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index e082fbaf37f0..c6260d863fc5 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -11,8 +11,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 
 import * as http from 'http';
 import * as https from 'https';
-
-import {readCache} from 'react/unstable-cache';
+import {unstable_getCacheForType} from 'react';
 
 type FetchResponse = {|
   // Properties
@@ -75,16 +74,12 @@ type RejectedResult = {|
 
 type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
 
-const fetchKey = {};
+function getResultMap(): Map<string, Result<FetchResponse>> {
+  return unstable_getCacheForType(createResultMap);
+}
 
-function readResultMap(): Map<string, Result<FetchResponse>> {
-  const resources = readCache().resources;
-  let map = resources.get(fetchKey);
-  if (map === undefined) {
-    map = new Map();
-    resources.set(fetchKey, map);
-  }
-  return map;
+function createResultMap(): Map<string, Result<FetchResponse>> {
+  return new Map();
 }
 
 function readResult<T>(result: Result<T>): T {
@@ -166,7 +161,7 @@ Response.prototype = {
 };
 
 function preloadResult(url: string, options: mixed): Result<FetchResponse> {
-  const map = readResultMap();
+  const map = getResultMap();
   let entry = map.get(url);
   if (!entry) {
     if (options) {
diff --git a/packages/react-fetch/src/__tests__/ReactFetchNode-test.js b/packages/react-fetch/src/__tests__/ReactFetchNode-test.js
index 158855497269..6ad5fdc9c434 100644
--- a/packages/react-fetch/src/__tests__/ReactFetchNode-test.js
+++ b/packages/react-fetch/src/__tests__/ReactFetchNode-test.js
@@ -10,30 +10,28 @@
 'use strict';
 
 describe('ReactFetchNode', () => {
-  let ReactCache;
-  let ReactFetchNode;
   let http;
   let fetch;
+  let waitForSuspense;
   let server;
   let serverEndpoint;
   let serverImpl;
 
   beforeEach(done => {
     jest.resetModules();
-    if (__EXPERIMENTAL__) {
-      ReactCache = require('react/unstable-cache');
-      // TODO: A way to pass load context.
-      ReactCache.CacheProvider._context._currentValue = ReactCache.createCache();
-      ReactFetchNode = require('react-fetch');
-      fetch = ReactFetchNode.fetch;
-    }
+
+    fetch = require('react-fetch').fetch;
     http = require('http');
+    waitForSuspense = require('react-suspense-test-utils').waitForSuspense;
 
     server = http.createServer((req, res) => {
       serverImpl(req, res);
     });
-    server.listen(done);
-    serverEndpoint = `http://localhost:${server.address().port}/`;
+    serverEndpoint = null;
+    server.listen(() => {
+      serverEndpoint = `http://localhost:${server.address().port}/`;
+      done();
+    });
   });
 
   afterEach(done => {
@@ -41,55 +39,83 @@ describe('ReactFetchNode', () => {
     server = null;
   });
 
-  async function waitForSuspense(fn) {
-    while (true) {
-      try {
-        return fn();
-      } catch (promise) {
-        if (typeof promise.then === 'function') {
-          await promise;
-        } else {
-          throw promise;
-        }
-      }
-    }
-  }
+  // @gate experimental
+  it('can fetch text from a server component', async () => {
+    serverImpl = (req, res) => {
+      res.write('mango');
+      res.end();
+    };
+    const text = await waitForSuspense(() => {
+      return fetch(serverEndpoint).text();
+    });
+    expect(text).toEqual('mango');
+  });
 
   // @gate experimental
-  it('can read text', async () => {
+  it('can fetch json from a server component', async () => {
     serverImpl = (req, res) => {
-      res.write('ok');
+      res.write(JSON.stringify({name: 'Sema'}));
       res.end();
     };
-    await waitForSuspense(() => {
-      const response = fetch(serverEndpoint);
-      expect(response.status).toBe(200);
-      expect(response.statusText).toBe('OK');
-      expect(response.ok).toBe(true);
-      expect(response.text()).toEqual('ok');
-      // Can read again:
-      expect(response.text()).toEqual('ok');
+    const json = await waitForSuspense(() => {
+      return fetch(serverEndpoint).json();
     });
+    expect(json).toEqual({name: 'Sema'});
   });
 
   // @gate experimental
-  it('can read json', async () => {
+  it('provides response status', async () => {
     serverImpl = (req, res) => {
       res.write(JSON.stringify({name: 'Sema'}));
       res.end();
     };
-    await waitForSuspense(() => {
-      const response = fetch(serverEndpoint);
-      expect(response.status).toBe(200);
-      expect(response.statusText).toBe('OK');
-      expect(response.ok).toBe(true);
-      expect(response.json()).toEqual({
-        name: 'Sema',
-      });
-      // Can read again:
-      expect(response.json()).toEqual({
-        name: 'Sema',
-      });
+    const response = await waitForSuspense(() => {
+      return fetch(serverEndpoint);
+    });
+    expect(response).toMatchObject({
+      status: 200,
+      statusText: 'OK',
+      ok: true,
     });
   });
+
+  // @gate experimental
+  it('handles different paths', async () => {
+    serverImpl = (req, res) => {
+      switch (req.url) {
+        case '/banana':
+          res.write('banana');
+          break;
+        case '/mango':
+          res.write('mango');
+          break;
+        case '/orange':
+          res.write('orange');
+          break;
+      }
+      res.end();
+    };
+    const outputs = await waitForSuspense(() => {
+      return [
+        fetch(serverEndpoint + 'banana').text(),
+        fetch(serverEndpoint + 'mango').text(),
+        fetch(serverEndpoint + 'orange').text(),
+      ];
+    });
+    expect(outputs).toMatchObject(['banana', 'mango', 'orange']);
+  });
+
+  // @gate experimental
+  it('can produce an error', async () => {
+    serverImpl = (req, res) => {};
+
+    expect.assertions(1);
+    try {
+      await waitForSuspense(() => {
+        return fetch('BOOM');
+      });
+    } catch (err) {
+      expect(err.message).toEqual('Invalid URL: BOOM');
+    }
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 6f2cb9ca400c..f257657d2b55 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -25,6 +25,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableNewReconciler,
+  enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
 } from 'shared/ReactFeatureFlags';
@@ -1815,6 +1816,10 @@ function dispatchAction<S, A>(
   }
 }
 
+function getCacheForType<T>(resourceType: () => T): T {
+  invariant(false, 'Not implemented.');
+}
+
 export const ContextOnlyDispatcher: Dispatcher = {
   readContext,
 
@@ -1835,6 +1840,9 @@ export const ContextOnlyDispatcher: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -1877,6 +1885,9 @@ const HooksDispatcherOnUpdate: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -1898,6 +1909,9 @@ const HooksDispatcherOnRerender: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2052,6 +2066,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(
@@ -2174,6 +2191,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(
@@ -2296,6 +2316,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(
@@ -2419,6 +2442,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(
@@ -2556,6 +2582,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(
@@ -2693,6 +2722,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(
@@ -2831,4 +2863,7 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 98e5d709cd28..9fa15c5c0655 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -25,6 +25,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableNewReconciler,
+  enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
 } from 'shared/ReactFeatureFlags';
@@ -1815,6 +1816,10 @@ function dispatchAction<S, A>(
   }
 }
 
+function getCacheForType<T>(resourceType: () => T): T {
+  invariant(false, 'Not implemented.');
+}
+
 export const ContextOnlyDispatcher: Dispatcher = {
   readContext,
 
@@ -1835,6 +1840,9 @@ export const ContextOnlyDispatcher: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -1856,6 +1864,9 @@ const HooksDispatcherOnMount: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
+}
 
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
@@ -1877,6 +1888,9 @@ const HooksDispatcherOnUpdate: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -1898,6 +1912,9 @@ const HooksDispatcherOnRerender: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2052,6 +2069,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(
@@ -2174,6 +2194,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(
@@ -2296,6 +2319,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(
@@ -2419,6 +2445,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(
@@ -2556,6 +2585,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(
@@ -2693,6 +2725,9 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(
@@ -2831,4 +2866,7 @@ if (__DEV__) {
 
     unstable_isNewReconciler: enableNewReconciler,
   };
+  if (enableCache) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+  }
 }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index f63495cdce65..ce3f786a5186 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -274,6 +274,7 @@ type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
 export type Dispatcher = {|
+  getCacheForType?: <T>(resourceType: () => T) => T,
   readContext<T>(
     context: ReactContext<T>,
     observedBits: void | number | boolean,
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 374ce95397f3..e4f307998ba1 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -74,6 +74,7 @@ type Segment = {
 export type Request = {
   destination: Destination,
   bundlerConfig: BundlerConfig,
+  cache: Map<Function, mixed>,
   nextChunkId: number,
   pendingChunks: number,
   pingedSegments: Array<Segment>,
@@ -97,6 +98,7 @@ export function createRequest(
   const request = {
     destination,
     bundlerConfig,
+    cache: new Map(),
     nextChunkId: 0,
     pendingChunks: 0,
     pingedSegments: pingedSegments,
@@ -652,7 +654,9 @@ function retrySegment(request: Request, segment: Segment): void {
 
 function performWork(request: Request): void {
   const prevDispatcher = ReactCurrentDispatcher.current;
+  const prevCache = currentCache;
   ReactCurrentDispatcher.current = Dispatcher;
+  currentCache = request.cache;
 
   const pingedSegments = request.pingedSegments;
   request.pingedSegments = [];
@@ -665,6 +669,7 @@ function performWork(request: Request): void {
   }
 
   ReactCurrentDispatcher.current = prevDispatcher;
+  currentCache = prevCache;
 }
 
 let reentrant = false;
@@ -743,6 +748,8 @@ function unsupportedHook(): void {
   invariant(false, 'This Hook is not supported in Server Components.');
 }
 
+let currentCache: Map<Function, mixed> | null = null;
+
 const Dispatcher: DispatcherType = {
   useMemo<T>(nextCreate: () => T): T {
     return nextCreate();
@@ -757,6 +764,19 @@ const Dispatcher: DispatcherType = {
   useTransition(): [(callback: () => void) => void, boolean] {
     return [() => {}, false];
   },
+  getCacheForType<T>(resourceType: () => T): T {
+    invariant(
+      currentCache,
+      'Reading the cache is only supported while rendering.',
+    );
+    let entry: T | void = (currentCache.get(resourceType): any);
+    if (entry === undefined) {
+      entry = resourceType();
+      // TODO: Warn if undefined?
+      currentCache.set(resourceType, entry);
+    }
+    return entry;
+  },
   readContext: (unsupportedHook: any),
   useContext: (unsupportedHook: any),
   useReducer: (unsupportedHook: any),
diff --git a/packages/react-suspense-test-utils/README.md b/packages/react-suspense-test-utils/README.md
new file mode 100644
index 000000000000..77630cd7507b
--- /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/unstable-cache.js b/packages/react-suspense-test-utils/index.js
similarity index 72%
rename from packages/react/unstable-cache.js
rename to packages/react-suspense-test-utils/index.js
index a6b90aa6728a..d0e5204abab2 100644
--- a/packages/react/unstable-cache.js
+++ b/packages/react-suspense-test-utils/index.js
@@ -6,4 +6,5 @@
  *
  * @flow
  */
-export {createCache, readCache, CacheProvider} from './src/cache/ReactCache';
+
+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 000000000000..dc9c621a5b77
--- /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 000000000000..b23c3fc2e31c
--- /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 000000000000..a58c6cae824c
--- /dev/null
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import invariant from 'shared/invariant';
+
+const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+
+function unsupported() {
+  invariant(false, 'This feature is not supported by ReactSuspenseTestUtils.');
+}
+
+export function waitForSuspense<T>(fn: () => T): Promise<T> {
+  const cache: Map<Function, mixed> = new Map();
+  const testDispatcher: Dispatcher = {
+    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;
+    },
+    readContext: unsupported,
+    useContext: unsupported,
+    useMemo: unsupported,
+    useReducer: unsupported,
+    useRef: unsupported,
+    useState: unsupported,
+    useLayoutEffect: unsupported,
+    useCallback: unsupported,
+    useImperativeHandle: unsupported,
+    useEffect: unsupported,
+    useDebugValue: unsupported,
+    useDeferredValue: unsupported,
+    useTransition: unsupported,
+    useOpaqueIdentifier: unsupported,
+    useMutableSource: unsupported,
+  };
+  // Not using async/await because we don't compile it.
+  return new Promise((resolve, reject) => {
+    function retry() {
+      const prevDispatcher = ReactCurrentDispatcher.current;
+      ReactCurrentDispatcher.current = testDispatcher;
+      try {
+        const result = fn();
+        resolve(result);
+      } catch (thrownValue) {
+        if (typeof thrownValue.then === 'function') {
+          thrownValue.then(retry, retry);
+        } else {
+          reject(thrownValue);
+        }
+      } finally {
+        ReactCurrentDispatcher.current = prevDispatcher;
+      }
+    }
+    retry();
+  });
+}
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index db5d2b2a2233..04723075defa 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -50,6 +50,7 @@ export {
   startTransition as unstable_startTransition,
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
+  unstable_getCacheForType,
   // enableScopeAPI
   unstable_Scope,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 3b2b47f1ee7c..5de53908ae88 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -45,6 +45,7 @@ export {
   startTransition as unstable_startTransition,
   SuspenseList as unstable_SuspenseList,
   unstable_useOpaqueIdentifier,
+  unstable_getCacheForType,
   // enableDebugTracing
   unstable_DebugTracingMode,
 } from './src/React';
diff --git a/packages/react/index.js b/packages/react/index.js
index 5a170667c082..1553bdd9e9a8 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -82,4 +82,5 @@ export {
   unstable_createFundamental,
   unstable_Scope,
   unstable_useOpaqueIdentifier,
+  unstable_getCacheForType,
 } from './src/React';
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 8217fa158d12..9a3bb4384ca2 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -49,6 +49,7 @@ export {
   startTransition as unstable_startTransition,
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
+  unstable_getCacheForType,
   // enableScopeAPI
   unstable_Scope,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/package.json b/packages/react/package.json
index 0dd2c35ee628..87e5a806a21d 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -17,8 +17,7 @@
     "umd/",
     "jsx-runtime.js",
     "jsx-dev-runtime.js",
-    "unstable-index.server.js",
-    "unstable-cache.js"
+    "unstable-index.server.js"
   ],
   "main": "index.js",
   "exports": {
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index c5e61fb55c67..aae52b2750db 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -33,6 +33,7 @@ import {lazy} from './ReactLazy';
 import {forwardRef} from './ReactForwardRef';
 import {memo} from './ReactMemo';
 import {
+  getCacheForType,
   useCallback,
   useContext,
   useEffect,
@@ -110,6 +111,7 @@ export {
   useDeferredValue,
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
+  getCacheForType as unstable_getCacheForType,
   // enableFundamentalAPI
   createFundamental as unstable_createFundamental,
   // enableScopeAPI
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index e1e0879c5f9f..1020efa74cb9 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -36,6 +36,12 @@ function resolveDispatcher() {
   return dispatcher;
 }
 
+export function getCacheForType<T>(resourceType: () => T): T {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.getCacheForType(resourceType);
+}
+
 export function useContext<T>(
   Context: ReactContext<T>,
   unstable_observedBits: number | boolean | void,
diff --git a/packages/react/src/__tests__/ReactCache-test.js b/packages/react/src/__tests__/ReactCache-test.js
deleted file mode 100644
index 3839d1a6b2e8..000000000000
--- a/packages/react/src/__tests__/ReactCache-test.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-describe('ReactCache', () => {
-  let ReactCache;
-
-  beforeEach(() => {
-    if (__EXPERIMENTAL__) {
-      ReactCache = require('react/unstable-cache');
-    }
-  });
-
-  // TODO: test something useful.
-  // @gate experimental
-  it('exports something', () => {
-    expect(ReactCache.readCache).not.toBe(undefined);
-  });
-});
diff --git a/packages/react/src/cache/ReactCache.js b/packages/react/src/cache/ReactCache.js
deleted file mode 100644
index d4240e1dca8a..000000000000
--- a/packages/react/src/cache/ReactCache.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @flow
- */
-
-import type {ReactContext} from 'shared/ReactTypes';
-
-import {createContext} from 'react';
-import invariant from 'shared/invariant';
-
-type Cache = {|
-  resources: Map<any, any>,
-|};
-
-// TODO: should there be a default cache?
-const CacheContext: ReactContext<null | Cache> = createContext(null);
-
-function CacheImpl() {
-  this.resources = new Map();
-  // TODO: cancellation token.
-}
-
-function createCache(): Cache {
-  // $FlowFixMe
-  return new CacheImpl();
-}
-
-function readCache(): Cache {
-  // TODO: this doesn't subscribe.
-  // But we really want load context anyway.
-  const value = CacheContext._currentValue;
-  if (value instanceof CacheImpl) {
-    return value;
-  }
-  invariant(false, 'Could not read the cache.');
-}
-
-const CacheProvider = CacheContext.Provider;
-
-export {createCache, readCache, CacheProvider};
diff --git a/packages/react/unstable-index.server.experimental.js b/packages/react/unstable-index.server.experimental.js
index 479094f46de6..890066957e38 100644
--- a/packages/react/unstable-index.server.experimental.js
+++ b/packages/react/unstable-index.server.experimental.js
@@ -32,6 +32,7 @@ export {
   useDeferredValue as unstable_useDeferredValue,
   SuspenseList as unstable_SuspenseList,
   unstable_useOpaqueIdentifier,
+  unstable_getCacheForType,
   // enableDebugTracing
   unstable_DebugTracingMode,
 } from './src/React';
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index e7f6a22cdf3e..519ea5015d7d 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -52,6 +52,7 @@ export const enableSelectiveHydration = __EXPERIMENTAL__;
 
 // Flight experiments
 export const enableLazyElements = __EXPERIMENTAL__;
+export const enableCache = __EXPERIMENTAL__;
 
 // Only used in www builds.
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 3c589f1aa687..32b1e3d45d0a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -21,6 +21,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
+export const enableCache = false;
 export const enableSchedulerDebugging = false;
 export const debugRenderPhaseSideEffectsForStrictMode = true;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 2a5da4d2e496..701cfd745fe3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
+export const enableCache = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index dca5277ca1d7..fb16a242199d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
+export const enableCache = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 49b020333e24..c9e64734268a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
+export const enableCache = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 9c6cec531b58..7002ed80ef6b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
+export const enableCache = false;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index ef61a51dbf9e..1d028ee23ca4 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -23,6 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
+export const enableCache = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 42c91d88de1f..ed3c033e99ff 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -23,6 +23,7 @@ export const enableSchedulerTracing = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const enableLazyElements = false;
+export const enableCache = false;
 export const disableJavaScriptURLs = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index d9ae9c183e90..8db205e18436 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -59,6 +59,7 @@ export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 
 export const enableLazyElements = true;
+export const enableCache = true;
 
 export const disableJavaScriptURLs = true;
 
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 269b7d278772..444e3ff80922 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -367,5 +367,7 @@
   "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. Remove %s from this object, or avoid the entire object: %s",
   "377": "BigInt (%s) is not yet supported in client component props. Remove %s from this object or use a plain number instead: %s",
   "378": "Type %s is not supported in client component props. Remove %s from this object, or avoid the entire object: %s",
-  "379": "Refs cannot be used in server components, nor passed to client components."
+  "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."
 }
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 6f0f88e04e00..db8a8b8002cf 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -135,15 +135,6 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* React Cache (experimental, new) *******/
-  {
-    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD, NODE_PROFILING] : [],
-    moduleType: ISOMORPHIC,
-    entry: 'react/unstable-cache',
-    global: 'ReactCache',
-    externals: ['react'],
-  },
-
   /******* React Fetch Browser (experimental, new) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
@@ -366,6 +357,15 @@ const bundles = [
     ],
   },
 
+  /******* React Suspense Test Utils *******/
+  {
+    bundleTypes: [NODE_ES2015],
+    moduleType: RENDERER_UTILS,
+    entry: 'react-suspense-test-utils',
+    global: 'ReactSuspenseTestUtils',
+    externals: ['react'],
+  },
+
   /******* React ART *******/
   {
     bundleTypes: [

From 41c5d00fc90734822e915a6a268a24c9726828a5 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 3 Dec 2020 21:21:19 +0000
Subject: [PATCH 0108/1603] [Flight] Minimal webpack plugin (#20228)

---
 fixtures/flight/.gitignore                    |  1 +
 fixtures/flight/server/handler.server.js      | 51 ++++---------------
 fixtures/flight/src/index.js                  |  2 +-
 .../src/ReactFlightWebpackPlugin.js           | 37 +++++++++++++-
 scripts/rollup/bundles.js                     |  2 +-
 scripts/rollup/modules.js                     |  3 ++
 6 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/fixtures/flight/.gitignore b/fixtures/flight/.gitignore
index 4d29575de804..800f3a80c348 100644
--- a/fixtures/flight/.gitignore
+++ b/fixtures/flight/.gitignore
@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index 86476bb2c2d7..cb9bcbf306e1 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -1,51 +1,20 @@
 'use strict';
 
 import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
+import {readFileSync} from 'fs';
+import {resolve} from 'path';
 import * as React from 'react';
 
-import url from 'url';
-
-function resolve(path) {
-  return url.pathToFileURL(require.resolve(path)).href;
-}
-
 module.exports = async function(req, res) {
-  res.setHeader('Access-Control-Allow-Origin', '*');
   const m = await import('../src/App.server.js');
   // const m = require('../src/App.server.js');
   const App = m.default.default || m.default;
-  pipeToNodeWritable(<App />, res, {
-    // TODO: Read from a map on the disk.
-    [resolve('../src/Counter.client.js')]: {
-      Counter: {
-        id: './src/Counter.client.js',
-        chunks: ['2'],
-        name: 'Counter',
-      },
-    },
-    [resolve('../src/Counter2.client.js')]: {
-      Counter: {
-        id: './src/Counter2.client.js',
-        chunks: ['1'],
-        name: 'Counter',
-      },
-    },
-    [resolve('../src/ShowMore.client.js')]: {
-      default: {
-        id: './src/ShowMore.client.js',
-        chunks: ['3'],
-        name: 'default',
-      },
-      '': {
-        id: './src/ShowMore.client.js',
-        chunks: ['3'],
-        name: '',
-      },
-      '*': {
-        id: './src/ShowMore.client.js',
-        chunks: ['3'],
-        name: '*',
-      },
-    },
-  });
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  const moduleMap = JSON.parse(
+    readFileSync(
+      resolve(__dirname, '../dist/react-transport-manifest.json'),
+      'utf8'
+    )
+  );
+  pipeToNodeWritable(<App />, res, moduleMap);
 };
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index ce9595dbe548..9fc13a76aa89 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -19,5 +19,5 @@ ReactDOM.render(
 );
 
 // Create entry points for Client Components.
-// TODO: Webpack plugin should do this and write a map to disk.
+// TODO: Webpack plugin should do this.
 require.context('./', true, /\.client\.js$/, 'lazy');
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
index 3b5550917017..a954f08935e0 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -7,7 +7,42 @@
  * @flow
  */
 
+import {mkdirSync, writeFileSync} from 'fs';
+import {dirname, resolve} from 'path';
+import {pathToFileURL} from 'url';
+
 export default class ReactFlightWebpackPlugin {
   constructor(options: {isServer: boolean}) {}
-  apply(compiler: any) {}
+
+  apply(compiler: any) {
+    compiler.hooks.emit.tap('React Transport Plugin', compilation => {
+      const json = {};
+      compilation.chunks.forEach(chunk => {
+        chunk.getModules().forEach(mod => {
+          if (!/\.client\.js$/.test(mod.resource)) {
+            return;
+          }
+          const moduleExports = {};
+          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
+            moduleExports[name] = {
+              id: mod.id,
+              chunks: chunk.ids,
+              name: name,
+            };
+          });
+          const href = pathToFileURL(mod.resource).href;
+          if (href !== undefined) {
+            json[href] = moduleExports;
+          }
+        });
+      });
+      const output = JSON.stringify(json, null, 2);
+      const filename = resolve(
+        compiler.options.output.path,
+        'react-transport-manifest.json',
+      );
+      mkdirSync(dirname(filename), {recursive: true});
+      writeFileSync(filename, output);
+    });
+  }
 }
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index db8a8b8002cf..37fdafa3408a 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -283,7 +283,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-transport-dom-webpack/plugin',
     global: 'ReactFlightWebpackPlugin',
-    externals: [],
+    externals: ['fs', 'path', 'url'],
   },
 
   /******* React Transport DOM Webpack Node.js Loader *******/
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
index e89b12f7dbc0..226ea5be5b77 100644
--- a/scripts/rollup/modules.js
+++ b/scripts/rollup/modules.js
@@ -9,6 +9,8 @@ const {UMD_DEV, UMD_PROD, UMD_PROFILING} = require('./bundles').bundleTypes;
 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,
+  path: 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,
@@ -17,6 +19,7 @@ const importSideEffects = Object.freeze({
   'react/jsx-dev-runtime': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'react-fetch/node': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'react-dom': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  url: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
 });
 
 // Bundles exporting globals that other modules rely on.

From e9860d426f4036265f87eb5b1bd500df6b4e570f Mon Sep 17 00:00:00 2001
From: Arindam Pradhan <arindampradhan10@gmail.com>
Date: Fri, 4 Dec 2020 20:29:17 +0530
Subject: [PATCH 0109/1603] fixed: typo in react-devtools/README.md Websocked
 -> Websocket (#20376)

---
 packages/react-devtools-core/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index 39a42bbfdad1..d139bf2e3b9b 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -21,7 +21,7 @@ Be sure to run this function *before* importing e.g. `react`, `react-dom`, `reac
 The `config` object may contain:
 * `host: string` (defaults to "localhost") - Websocket will connect to this host.
 * `port: number` (defaults to `8097`) - Websocket will connect to this port.
-* `useHttps: boolean` (defaults to `false`) - Websocked should use a secure protocol (wss).
+* `useHttps: boolean` (defaults to `false`) - Websocket should use a secure protocol (wss).
 * `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided.
 * `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
 * `retryConnectionDelay: number` (defaults to `2000`) - Milliseconds delay to wait between retrying a failed Websocket connection.

From 88ef95712d315705b2d6654f3c0d5c5ace4a6456 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 4 Dec 2020 10:54:09 -0600
Subject: [PATCH 0110/1603] Fork ReactFiberLane (#20371)

This wasn't forked previously because Lane and associated types are
opaque, and they leak into non-reconciler packages. So forking the type
would also require forking all those other packages.

But I really want to use the reconciler fork infra for lanes changes.
So I made them no longer opaque.

Another possible solution would be to add separate `new` and `old`
fields to the Fiber type, like I did when migrating from expiration
times. But that seems so excessive. This seems fine.

But we should still treat them like they're opaque and only do lanes
manipulation in the ReactFiberLane module. At least until the model
stabilizes more. We'll just need to enforce this with discipline
instead of with the type system.
---
 .../src/events/ReactDOMEventListener.js       |  25 +-
 .../src/events/ReactDOMEventReplaying.js      |   2 +-
 packages/react-reconciler/src/DebugTracing.js |   2 +-
 .../src/ReactChildFiber.new.js                |   2 +-
 .../src/ReactChildFiber.old.js                |   2 +-
 .../react-reconciler/src/ReactFiber.new.js    |   4 +-
 .../react-reconciler/src/ReactFiber.old.js    |   4 +-
 .../src/ReactFiberBeginWork.new.js            |   4 +-
 .../src/ReactFiberBeginWork.old.js            |   4 +-
 .../src/ReactFiberClassComponent.new.js       |   4 +-
 .../src/ReactFiberClassComponent.old.js       |   4 +-
 .../src/ReactFiberCommitWork.new.js           |   2 +-
 .../src/ReactFiberCommitWork.old.js           |   2 +-
 .../src/ReactFiberCompleteWork.new.js         |   4 +-
 .../src/ReactFiberCompleteWork.old.js         |   4 +-
 .../src/ReactFiberHooks.new.js                |   4 +-
 .../src/ReactFiberHooks.old.js                |   4 +-
 .../src/ReactFiberHotReloading.new.js         |   2 +-
 .../src/ReactFiberHotReloading.old.js         |   2 +-
 .../src/ReactFiberHydrationContext.new.js     |   2 +-
 .../src/ReactFiberHydrationContext.old.js     |   2 +-
 ...eactFiberLane.js => ReactFiberLane.new.js} |  11 +-
 .../src/ReactFiberLane.old.js                 | 845 ++++++++++++++++++
 .../src/ReactFiberNewContext.new.js           |   4 +-
 .../src/ReactFiberNewContext.old.js           |   4 +-
 .../src/ReactFiberOffscreenComponent.js       |   2 +-
 .../src/ReactFiberReconciler.new.js           |   4 +-
 .../src/ReactFiberReconciler.old.js           |   4 +-
 .../src/ReactFiberRoot.new.js                 |   2 +-
 .../src/ReactFiberRoot.old.js                 |   2 +-
 .../src/ReactFiberSuspenseComponent.new.js    |   2 +-
 .../src/ReactFiberSuspenseComponent.old.js    |   2 +-
 .../src/ReactFiberThrow.new.js                |   4 +-
 .../src/ReactFiberThrow.old.js                |   4 +-
 .../src/ReactFiberUnwindWork.new.js           |   2 +-
 .../src/ReactFiberUnwindWork.old.js           |   2 +-
 .../src/ReactFiberWorkLoop.new.js             |   4 +-
 .../src/ReactFiberWorkLoop.old.js             |   4 +-
 .../src/ReactInternalTypes.js                 |   2 +-
 .../src/ReactUpdateQueue.new.js               |   9 +-
 .../src/ReactUpdateQueue.old.js               |   9 +-
 .../src/SchedulerWithReactIntegration.new.js  |   2 +-
 .../src/SchedulerWithReactIntegration.old.js  |   2 +-
 .../src/SchedulingProfiler.js                 |   2 +-
 44 files changed, 944 insertions(+), 69 deletions(-)
 rename packages/react-reconciler/src/{ReactFiberLane.js => ReactFiberLane.new.js} (99%)
 create mode 100644 packages/react-reconciler/src/ReactFiberLane.old.js

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 9a41c6c1317f..dcb2cfb9fd70 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -41,6 +41,7 @@ import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 import {
   enableLegacyFBSupport,
   decoupleUpdatePriorityFromScheduler,
+  enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 import {
   UserBlockingEvent,
@@ -53,11 +54,27 @@ import {
   flushDiscreteUpdatesIfNeeded,
   discreteUpdates,
 } from './ReactDOMUpdateBatching';
+
+import {
+  InputContinuousLanePriority as InputContinuousLanePriority_old,
+  getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
+  setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_old,
+} from 'react-reconciler/src/ReactFiberLane.old';
 import {
-  InputContinuousLanePriority,
-  getCurrentUpdateLanePriority,
-  setCurrentUpdateLanePriority,
-} from 'react-reconciler/src/ReactFiberLane';
+  InputContinuousLanePriority as InputContinuousLanePriority_new,
+  getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
+  setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_new,
+} from 'react-reconciler/src/ReactFiberLane.new';
+
+const InputContinuousLanePriority = enableNewReconciler
+  ? InputContinuousLanePriority_new
+  : InputContinuousLanePriority_old;
+const getCurrentUpdateLanePriority = enableNewReconciler
+  ? getCurrentUpdateLanePriority_new
+  : getCurrentUpdateLanePriority_old;
+const setCurrentUpdateLanePriority = enableNewReconciler
+  ? setCurrentUpdateLanePriority_new
+  : setCurrentUpdateLanePriority_old;
 
 const {
   unstable_UserBlockingPriority: UserBlockingPriority,
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 2fbe0e1b0b61..a56487c0928d 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -12,7 +12,7 @@ import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
 import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
-import type {LanePriority} from 'react-reconciler/src/ReactFiberLane';
+import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.old';
 
 import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
 import {
diff --git a/packages/react-reconciler/src/DebugTracing.js b/packages/react-reconciler/src/DebugTracing.js
index 075a705f03bd..ac13410c3623 100644
--- a/packages/react-reconciler/src/DebugTracing.js
+++ b/packages/react-reconciler/src/DebugTracing.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Lane, Lanes} from './ReactFiberLane';
+import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {Wakeable} from 'shared/ReactTypes';
 
 import {enableDebugTracing} from 'shared/ReactFeatureFlags';
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 534d7032ba2d..52bd63272118 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -10,7 +10,7 @@
 import type {ReactElement} from 'shared/ReactElementType';
 import type {ReactPortal} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.new';
 
 import getComponentName from 'shared/getComponentName';
 import {Placement, Deletion} from './ReactFiberFlags';
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index df4c2e10d929..7313d78f0bf3 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -10,7 +10,7 @@
 import type {ReactElement} from 'shared/ReactElementType';
 import type {ReactPortal} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.old';
 
 import getComponentName from 'shared/getComponentName';
 import {Placement, Deletion} from './ReactFiberFlags';
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 5426568b9661..edeae5caa6fe 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -18,7 +18,7 @@ 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 {Lanes} from './ReactFiberLane.new';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
@@ -63,7 +63,7 @@ import {
   resolveFunctionForHotReloading,
   resolveForwardRefForHotReloading,
 } from './ReactFiberHotReloading.new';
-import {NoLanes} from './ReactFiberLane';
+import {NoLanes} from './ReactFiberLane.new';
 import {
   NoMode,
   ConcurrentMode,
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 56ef2f5a528a..8e3df44ac676 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -18,7 +18,7 @@ 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 {Lanes} from './ReactFiberLane.old';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
@@ -63,7 +63,7 @@ import {
   resolveFunctionForHotReloading,
   resolveForwardRefForHotReloading,
 } from './ReactFiberHotReloading.old';
-import {NoLanes} from './ReactFiberLane';
+import {NoLanes} from './ReactFiberLane.old';
 import {
   NoMode,
   ConcurrentMode,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 52bbc5ac405b..99aa9193e2f2 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -11,7 +11,7 @@ import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {MutableSource} from 'shared/ReactTypes';
 import type {
   SuspenseState,
@@ -113,7 +113,7 @@ import {
   removeLanes,
   mergeLanes,
   getBumpedLaneForHydration,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 import {
   ConcurrentMode,
   NoMode,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index e12f7f300b47..f875db594495 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -11,7 +11,7 @@ import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {MutableSource} from 'shared/ReactTypes';
 import type {
   SuspenseState,
@@ -113,7 +113,7 @@ import {
   removeLanes,
   mergeLanes,
   getBumpedLaneForHydration,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 import {
   ConcurrentMode,
   NoMode,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 4e58dd71f3dc..e807ae8222a2 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 
 import * as React from 'react';
@@ -42,7 +42,7 @@ import {
   initializeUpdateQueue,
   cloneUpdateQueue,
 } from './ReactUpdateQueue.new';
-import {NoLanes} from './ReactFiberLane';
+import {NoLanes} from './ReactFiberLane.new';
 import {
   cacheContext,
   getMaskedContext,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index c5f352741949..f055bac71ca9 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 
 import * as React from 'react';
@@ -42,7 +42,7 @@ import {
   initializeUpdateQueue,
   cloneUpdateQueue,
 } from './ReactUpdateQueue.old';
-import {NoLanes} from './ReactFiberLane';
+import {NoLanes} from './ReactFiberLane.old';
 import {
   cacheContext,
   getMaskedContext,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index f16fb9943551..a9c54d9c02e9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -17,7 +17,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 55db13cf3988..c134ecccddbb 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -17,7 +17,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 89d2193176c2..9d91de82073c 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.new';
 import type {
   ReactFundamentalComponentInstance,
   ReactScopeInstance,
@@ -130,7 +130,7 @@ import {
   getRenderTargetTime,
 } from './ReactFiberWorkLoop.new';
 import {createFundamentalStateInstance} from './ReactFiberFundamental.new';
-import {OffscreenLane, SomeRetryLane} from './ReactFiberLane';
+import {OffscreenLane, SomeRetryLane} from './ReactFiberLane.new';
 import {resetChildFibers} from './ReactChildFiber.new';
 import {createScopeInstance} from './ReactFiberScope.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 21ffea1c92dd..6f1942f7b90b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.old';
 import type {
   ReactFundamentalComponentInstance,
   ReactScopeInstance,
@@ -130,7 +130,7 @@ import {
   getRenderTargetTime,
 } from './ReactFiberWorkLoop.old';
 import {createFundamentalStateInstance} from './ReactFiberFundamental.old';
-import {OffscreenLane, SomeRetryLane} from './ReactFiberLane';
+import {OffscreenLane, SomeRetryLane} from './ReactFiberLane.old';
 import {resetChildFibers} from './ReactChildFiber.old';
 import {createScopeInstance} from './ReactFiberScope.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index f257657d2b55..4a0a9231f044 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -14,7 +14,7 @@ import type {
   ReactContext,
 } from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
@@ -44,7 +44,7 @@ import {
   setCurrentUpdateLanePriority,
   higherLanePriority,
   DefaultLanePriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 import {readContext} from './ReactFiberNewContext.new';
 import {
   Update as UpdateEffect,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 9fa15c5c0655..0a7a99079c96 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -14,7 +14,7 @@ import type {
   ReactContext,
 } from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
@@ -44,7 +44,7 @@ import {
   setCurrentUpdateLanePriority,
   higherLanePriority,
   DefaultLanePriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 import {readContext} from './ReactFiberNewContext.old';
 import {
   Update as UpdateEffect,
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index ed962e9d3266..4c9eaf010125 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -20,7 +20,7 @@ import {
 } from './ReactFiberWorkLoop.new';
 import {updateContainer} from './ReactFiberReconciler.new';
 import {emptyContextObject} from './ReactFiberContext.new';
-import {SyncLane, NoTimestamp} from './ReactFiberLane';
+import {SyncLane, NoTimestamp} from './ReactFiberLane.new';
 import {
   ClassComponent,
   FunctionComponent,
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index 00db4f034e86..ee0616fae79c 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -20,7 +20,7 @@ import {
 } from './ReactFiberWorkLoop.old';
 import {updateContainer} from './ReactFiberReconciler.old';
 import {emptyContextObject} from './ReactFiberContext.old';
-import {SyncLane, NoTimestamp} from './ReactFiberLane';
+import {SyncLane, NoTimestamp} from './ReactFiberLane.old';
 import {
   ClassComponent,
   FunctionComponent,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index e90bc9768a9a..6ed0f6c8cbc5 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -55,7 +55,7 @@ import {
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
-import {OffscreenLane} from './ReactFiberLane';
+import {OffscreenLane} from './ReactFiberLane.new';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 7576bd5ac081..5d084bf97bad 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -55,7 +55,7 @@ import {
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
-import {OffscreenLane} from './ReactFiberLane';
+import {OffscreenLane} from './ReactFiberLane.old';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
diff --git a/packages/react-reconciler/src/ReactFiberLane.js b/packages/react-reconciler/src/ReactFiberLane.new.js
similarity index 99%
rename from packages/react-reconciler/src/ReactFiberLane.js
rename to packages/react-reconciler/src/ReactFiberLane.new.js
index 027754dd76ee..b5d8846ec200 100644
--- a/packages/react-reconciler/src/ReactFiberLane.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -9,7 +9,9 @@
 
 import type {FiberRoot, ReactPriorityLevel} from './ReactInternalTypes';
 
-export opaque type LanePriority =
+// 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 LanePriority =
   | 0
   | 1
   | 2
@@ -28,9 +30,10 @@ export opaque type LanePriority =
   | 15
   | 16
   | 17;
-export opaque type Lanes = number;
-export opaque type Lane = number;
-export opaque type LaneMap<T> = Array<T>;
+
+export type Lanes = number;
+export type Lane = number;
+export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
new file mode 100644
index 000000000000..f58ab2053174
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -0,0 +1,845 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {FiberRoot, ReactPriorityLevel} from './ReactInternalTypes';
+
+// 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 LanePriority =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17;
+
+export type Lanes = number;
+export type Lane = number;
+export type LaneMap<T> = Array<T>;
+
+import invariant from 'shared/invariant';
+
+import {
+  ImmediatePriority as ImmediateSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
+  NormalPriority as NormalSchedulerPriority,
+  LowPriority as LowSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
+  NoPriority as NoSchedulerPriority,
+} from './SchedulerWithReactIntegration.old';
+
+export const SyncLanePriority: LanePriority = 15;
+export const SyncBatchedLanePriority: LanePriority = 14;
+
+const InputDiscreteHydrationLanePriority: LanePriority = 13;
+export const InputDiscreteLanePriority: LanePriority = 12;
+
+const InputContinuousHydrationLanePriority: LanePriority = 11;
+export const InputContinuousLanePriority: LanePriority = 10;
+
+const DefaultHydrationLanePriority: LanePriority = 9;
+export const DefaultLanePriority: LanePriority = 8;
+
+const TransitionHydrationPriority: LanePriority = 7;
+export const TransitionPriority: LanePriority = 6;
+
+const RetryLanePriority: LanePriority = 5;
+
+const SelectiveHydrationLanePriority: LanePriority = 4;
+
+const IdleHydrationLanePriority: LanePriority = 3;
+const IdleLanePriority: LanePriority = 2;
+
+const OffscreenLanePriority: LanePriority = 1;
+
+export const NoLanePriority: LanePriority = 0;
+
+const TotalLanes = 31;
+
+export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
+export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;
+
+export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
+export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
+
+export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
+const InputDiscreteLanes: Lanes = /*                    */ 0b0000000000000000000000000011000;
+
+const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000;
+const InputContinuousLanes: Lanes = /*                  */ 0b0000000000000000000000011000000;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000;
+export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000111000000000;
+
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
+
+const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
+
+export const SomeRetryLane: Lanes = /*                  */ 0b0000010000000000000000000000000;
+
+export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
+
+const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111;
+
+export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
+const IdleLanes: Lanes = /*                             */ 0b0110000000000000000000000000000;
+
+export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
+
+export const NoTimestamp = -1;
+
+let currentUpdateLanePriority: LanePriority = NoLanePriority;
+
+export function getCurrentUpdateLanePriority(): LanePriority {
+  return currentUpdateLanePriority;
+}
+
+export function setCurrentUpdateLanePriority(newLanePriority: LanePriority) {
+  currentUpdateLanePriority = newLanePriority;
+}
+
+// "Registers" used to "return" multiple values
+// Used by getHighestPriorityLanes and getNextLanes:
+let return_highestLanePriority: LanePriority = DefaultLanePriority;
+
+function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
+  if ((SyncLane & lanes) !== NoLanes) {
+    return_highestLanePriority = SyncLanePriority;
+    return SyncLane;
+  }
+  if ((SyncBatchedLane & lanes) !== NoLanes) {
+    return_highestLanePriority = SyncBatchedLanePriority;
+    return SyncBatchedLane;
+  }
+  if ((InputDiscreteHydrationLane & lanes) !== NoLanes) {
+    return_highestLanePriority = InputDiscreteHydrationLanePriority;
+    return InputDiscreteHydrationLane;
+  }
+  const inputDiscreteLanes = InputDiscreteLanes & lanes;
+  if (inputDiscreteLanes !== NoLanes) {
+    return_highestLanePriority = InputDiscreteLanePriority;
+    return inputDiscreteLanes;
+  }
+  if ((lanes & InputContinuousHydrationLane) !== NoLanes) {
+    return_highestLanePriority = InputContinuousHydrationLanePriority;
+    return InputContinuousHydrationLane;
+  }
+  const inputContinuousLanes = InputContinuousLanes & lanes;
+  if (inputContinuousLanes !== NoLanes) {
+    return_highestLanePriority = InputContinuousLanePriority;
+    return inputContinuousLanes;
+  }
+  if ((lanes & DefaultHydrationLane) !== NoLanes) {
+    return_highestLanePriority = DefaultHydrationLanePriority;
+    return DefaultHydrationLane;
+  }
+  const defaultLanes = DefaultLanes & lanes;
+  if (defaultLanes !== NoLanes) {
+    return_highestLanePriority = DefaultLanePriority;
+    return defaultLanes;
+  }
+  if ((lanes & TransitionHydrationLane) !== NoLanes) {
+    return_highestLanePriority = TransitionHydrationPriority;
+    return TransitionHydrationLane;
+  }
+  const transitionLanes = TransitionLanes & lanes;
+  if (transitionLanes !== NoLanes) {
+    return_highestLanePriority = TransitionPriority;
+    return transitionLanes;
+  }
+  const retryLanes = RetryLanes & lanes;
+  if (retryLanes !== NoLanes) {
+    return_highestLanePriority = RetryLanePriority;
+    return retryLanes;
+  }
+  if (lanes & SelectiveHydrationLane) {
+    return_highestLanePriority = SelectiveHydrationLanePriority;
+    return SelectiveHydrationLane;
+  }
+  if ((lanes & IdleHydrationLane) !== NoLanes) {
+    return_highestLanePriority = IdleHydrationLanePriority;
+    return IdleHydrationLane;
+  }
+  const idleLanes = IdleLanes & lanes;
+  if (idleLanes !== NoLanes) {
+    return_highestLanePriority = IdleLanePriority;
+    return idleLanes;
+  }
+  if ((OffscreenLane & lanes) !== NoLanes) {
+    return_highestLanePriority = OffscreenLanePriority;
+    return OffscreenLane;
+  }
+  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_highestLanePriority = DefaultLanePriority;
+  return lanes;
+}
+
+export function schedulerPriorityToLanePriority(
+  schedulerPriorityLevel: ReactPriorityLevel,
+): LanePriority {
+  switch (schedulerPriorityLevel) {
+    case ImmediateSchedulerPriority:
+      return SyncLanePriority;
+    case UserBlockingSchedulerPriority:
+      return InputContinuousLanePriority;
+    case NormalSchedulerPriority:
+    case LowSchedulerPriority:
+      // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
+      return DefaultLanePriority;
+    case IdleSchedulerPriority:
+      return IdleLanePriority;
+    default:
+      return NoLanePriority;
+  }
+}
+
+export function lanePriorityToSchedulerPriority(
+  lanePriority: LanePriority,
+): ReactPriorityLevel {
+  switch (lanePriority) {
+    case SyncLanePriority:
+    case SyncBatchedLanePriority:
+      return ImmediateSchedulerPriority;
+    case InputDiscreteHydrationLanePriority:
+    case InputDiscreteLanePriority:
+    case InputContinuousHydrationLanePriority:
+    case InputContinuousLanePriority:
+      return UserBlockingSchedulerPriority;
+    case DefaultHydrationLanePriority:
+    case DefaultLanePriority:
+    case TransitionHydrationPriority:
+    case TransitionPriority:
+    case SelectiveHydrationLanePriority:
+    case RetryLanePriority:
+      return NormalSchedulerPriority;
+    case IdleHydrationLanePriority:
+    case IdleLanePriority:
+    case OffscreenLanePriority:
+      return IdleSchedulerPriority;
+    case NoLanePriority:
+      return NoSchedulerPriority;
+    default:
+      invariant(
+        false,
+        'Invalid update priority: %s. This is a bug in React.',
+        lanePriority,
+      );
+  }
+}
+
+export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
+  // Early bailout if there's no pending work left.
+  const pendingLanes = root.pendingLanes;
+  if (pendingLanes === NoLanes) {
+    return_highestLanePriority = NoLanePriority;
+    return NoLanes;
+  }
+
+  let nextLanes = NoLanes;
+  let nextLanePriority = NoLanePriority;
+
+  const expiredLanes = root.expiredLanes;
+  const suspendedLanes = root.suspendedLanes;
+  const pingedLanes = root.pingedLanes;
+
+  // Check if any work has expired.
+  if (expiredLanes !== NoLanes) {
+    nextLanes = expiredLanes;
+    nextLanePriority = return_highestLanePriority = SyncLanePriority;
+  } else {
+    // 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) {
+      const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
+      if (nonIdleUnblockedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+        nextLanePriority = return_highestLanePriority;
+      } else {
+        const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
+        if (nonIdlePingedLanes !== NoLanes) {
+          nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
+          nextLanePriority = return_highestLanePriority;
+        }
+      }
+    } else {
+      // The only remaining work is Idle.
+      const unblockedLanes = pendingLanes & ~suspendedLanes;
+      if (unblockedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(unblockedLanes);
+        nextLanePriority = return_highestLanePriority;
+      } else {
+        if (pingedLanes !== NoLanes) {
+          nextLanes = getHighestPriorityLanes(pingedLanes);
+          nextLanePriority = return_highestLanePriority;
+        }
+      }
+    }
+  }
+
+  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 there are higher priority lanes, we'll include them even if they
+  // are suspended.
+  nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes);
+
+  // 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
+  ) {
+    getHighestPriorityLanes(wipLanes);
+    const wipLanePriority = return_highestLanePriority;
+    if (nextLanePriority <= wipLanePriority) {
+      return wipLanes;
+    } else {
+      return_highestLanePriority = nextLanePriority;
+    }
+  }
+
+  // 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.
+  //
+  // For those exceptions where entanglement is semantically important, like
+  // useMutableSource, we should ensure that there is no partial work at the
+  // time we apply the entanglement.
+  const entangledLanes = root.entangledLanes;
+  if (entangledLanes !== NoLanes) {
+    const entanglements = root.entanglements;
+    let lanes = nextLanes & entangledLanes;
+    while (lanes > 0) {
+      const index = pickArbitraryLaneIndex(lanes);
+      const lane = 1 << index;
+
+      nextLanes |= entanglements[index];
+
+      lanes &= ~lane;
+    }
+  }
+
+  return nextLanes;
+}
+
+export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
+  const eventTimes = root.eventTimes;
+
+  let mostRecentEventTime = NoTimestamp;
+  while (lanes > 0) {
+    const index = pickArbitraryLaneIndex(lanes);
+    const lane = 1 << index;
+
+    const eventTime = eventTimes[index];
+    if (eventTime > mostRecentEventTime) {
+      mostRecentEventTime = eventTime;
+    }
+
+    lanes &= ~lane;
+  }
+
+  return mostRecentEventTime;
+}
+
+function computeExpirationTime(lane: Lane, currentTime: number) {
+  // TODO: Expiration heuristic is constant per lane, so could use a map.
+  getHighestPriorityLanes(lane);
+  const priority = return_highestLanePriority;
+  if (priority >= InputContinuousLanePriority) {
+    // 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.
+    //
+    // Also note that, in the case of user input specifically, this will soon no
+    // longer be an issue because we plan to make user input synchronous by
+    // default (until you enter `startTransition`, of course.)
+    //
+    // If weren't planning to make these updates synchronous soon anyway, I
+    // would probably make this number a configurable parameter.
+    return currentTime + 250;
+  } else if (priority >= TransitionPriority) {
+    return currentTime + 5000;
+  } else {
+    // Anything idle priority or lower should never expire.
+    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.
+  let lanes = pendingLanes;
+  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) {
+  return getHighestPriorityLanes(root.pendingLanes);
+}
+
+export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
+  const everythingButOffscreen = root.pendingLanes & ~OffscreenLane;
+  if (everythingButOffscreen !== NoLanes) {
+    return everythingButOffscreen;
+  }
+  if (everythingButOffscreen & OffscreenLane) {
+    return OffscreenLane;
+  }
+  return NoLanes;
+}
+
+export function returnNextLanesPriority() {
+  return return_highestLanePriority;
+}
+export function includesNonIdleWork(lanes: Lanes) {
+  return (lanes & NonIdleLanes) !== NoLanes;
+}
+export function includesOnlyRetries(lanes: Lanes) {
+  return (lanes & RetryLanes) === lanes;
+}
+export function includesOnlyTransitions(lanes: Lanes) {
+  return (lanes & TransitionLanes) === lanes;
+}
+
+// To ensure consistency across multiple updates in the same event, this should
+// be a pure function, so that it always returns the same lane for given inputs.
+export function findUpdateLane(
+  lanePriority: LanePriority,
+  wipLanes: Lanes,
+): Lane {
+  switch (lanePriority) {
+    case NoLanePriority:
+      break;
+    case SyncLanePriority:
+      return SyncLane;
+    case SyncBatchedLanePriority:
+      return SyncBatchedLane;
+    case InputDiscreteLanePriority: {
+      const lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
+      if (lane === NoLane) {
+        // Shift to the next priority level
+        return findUpdateLane(InputContinuousLanePriority, wipLanes);
+      }
+      return lane;
+    }
+    case InputContinuousLanePriority: {
+      const lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
+      if (lane === NoLane) {
+        // Shift to the next priority level
+        return findUpdateLane(DefaultLanePriority, wipLanes);
+      }
+      return lane;
+    }
+    case DefaultLanePriority: {
+      let lane = pickArbitraryLane(DefaultLanes & ~wipLanes);
+      if (lane === NoLane) {
+        // If all the default lanes are already being worked on, look for a
+        // lane in the transition range.
+        lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
+        if (lane === NoLane) {
+          // All the transition lanes are taken, too. This should be very
+          // rare, but as a last resort, pick a default lane. This will have
+          // the effect of interrupting the current work-in-progress render.
+          lane = pickArbitraryLane(DefaultLanes);
+        }
+      }
+      return lane;
+    }
+    case TransitionPriority: // Should be handled by findTransitionLane instead
+    case RetryLanePriority: // Should be handled by findRetryLane instead
+      break;
+    case IdleLanePriority:
+      let lane = pickArbitraryLane(IdleLanes & ~wipLanes);
+      if (lane === NoLane) {
+        lane = pickArbitraryLane(IdleLanes);
+      }
+      return lane;
+    default:
+      // The remaining priorities are not valid for updates
+      break;
+  }
+  invariant(
+    false,
+    'Invalid update priority: %s. This is a bug in React.',
+    lanePriority,
+  );
+}
+
+// To ensure consistency across multiple updates in the same event, this should
+// be pure function, so that it always returns the same lane for given inputs.
+export function findTransitionLane(wipLanes: Lanes, pendingLanes: Lanes): Lane {
+  // First look for lanes that are completely unclaimed, i.e. have no
+  // pending work.
+  let lane = pickArbitraryLane(TransitionLanes & ~pendingLanes);
+  if (lane === NoLane) {
+    // If all lanes have pending work, look for a lane that isn't currently
+    // being worked on.
+    lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
+    if (lane === NoLane) {
+      // If everything is being worked on, pick any lane. This has the
+      // effect of interrupting the current work-in-progress.
+      lane = pickArbitraryLane(TransitionLanes);
+    }
+  }
+  return lane;
+}
+
+// To ensure consistency across multiple updates in the same event, this should
+// be pure function, so that it always returns the same lane for given inputs.
+export function findRetryLane(wipLanes: Lanes): Lane {
+  // This is a fork of `findUpdateLane` designed specifically for Suspense
+  // "retries" — a special update that attempts to flip a Suspense boundary
+  // from its placeholder state to its primary/resolved state.
+  let lane = pickArbitraryLane(RetryLanes & ~wipLanes);
+  if (lane === NoLane) {
+    lane = pickArbitraryLane(RetryLanes);
+  }
+  return lane;
+}
+
+function getHighestPriorityLane(lanes: Lanes) {
+  return lanes & -lanes;
+}
+
+function getLowestPriorityLane(lanes: Lanes): Lane {
+  // This finds the most significant non-zero bit.
+  const index = 31 - clz32(lanes);
+  return index < 0 ? NoLanes : 1 << index;
+}
+
+function getEqualOrHigherPriorityLanes(lanes: Lanes | Lane): Lanes {
+  return (getLowestPriorityLane(lanes) << 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) {
+  return (a & b) !== NoLanes;
+}
+
+export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane) {
+  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;
+}
+
+// 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) {
+  // This works because the bit ranges decrease in priority as you go left.
+  return a !== NoLane && a < b ? a : b;
+}
+
+export function higherLanePriority(
+  a: LanePriority,
+  b: LanePriority,
+): LanePriority {
+  return a !== NoLanePriority && 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,
+  eventTime: number,
+) {
+  root.pendingLanes |= updateLane;
+
+  // TODO: Theoretically, any update to any lane can unblock any other lane. But
+  // it's not practical to try every single possible combination. We need a
+  // heuristic to decide which lanes to attempt to render, and in which batches.
+  // For now, we use the same heuristic as in the old ExpirationTimes model:
+  // retry any lane at equal or lower priority, but don't try updates at higher
+  // priority without also including the lower priority updates. This works well
+  // when considering updates across different priority levels, but isn't
+  // sufficient for updates within the same priority, since we want to treat
+  // those updates as parallel.
+
+  // Unsuspend any update at equal or lower priority.
+  const higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
+
+  root.suspendedLanes &= higherPriorityLanes;
+  root.pingedLanes &= higherPriorityLanes;
+
+  const eventTimes = root.eventTimes;
+  const index = laneToIndex(updateLane);
+  // We can always overwrite an existing timestamp because we prefer the most
+  // recent event, and we assume time is monotonically increasing.
+  eventTimes[index] = eventTime;
+}
+
+export function markRootSuspended(root: FiberRoot, suspendedLanes: Lanes) {
+  root.suspendedLanes |= suspendedLanes;
+  root.pingedLanes &= ~suspendedLanes;
+
+  // 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;
+  }
+}
+
+export function markRootPinged(
+  root: FiberRoot,
+  pingedLanes: Lanes,
+  eventTime: number,
+) {
+  root.pingedLanes |= root.suspendedLanes & pingedLanes;
+}
+
+export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
+  root.expiredLanes |= expiredLanes & root.pendingLanes;
+}
+
+export function markDiscreteUpdatesExpired(root: FiberRoot) {
+  root.expiredLanes |= InputDiscreteLanes & root.pendingLanes;
+}
+
+export function hasDiscreteLanes(lanes: Lanes) {
+  return (lanes & InputDiscreteLanes) !== NoLanes;
+}
+
+export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
+  root.mutableReadLanes |= updateLane & root.pendingLanes;
+}
+
+export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
+  const noLongerPendingLanes = root.pendingLanes & ~remainingLanes;
+
+  root.pendingLanes = remainingLanes;
+
+  // Let's try everything again
+  root.suspendedLanes = 0;
+  root.pingedLanes = 0;
+
+  root.expiredLanes &= remainingLanes;
+  root.mutableReadLanes &= remainingLanes;
+
+  root.entangledLanes &= remainingLanes;
+
+  const entanglements = root.entanglements;
+  const eventTimes = root.eventTimes;
+  const expirationTimes = root.expirationTimes;
+
+  // 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;
+    eventTimes[index] = NoTimestamp;
+    expirationTimes[index] = NoTimestamp;
+
+    lanes &= ~lane;
+  }
+}
+
+export function markRootEntangled(root: FiberRoot, entangledLanes: Lanes) {
+  root.entangledLanes |= entangledLanes;
+
+  const entanglements = root.entanglements;
+  let lanes = entangledLanes;
+  while (lanes > 0) {
+    const index = pickArbitraryLaneIndex(lanes);
+    const lane = 1 << index;
+
+    entanglements[index] |= entangledLanes;
+
+    lanes &= ~lane;
+  }
+}
+
+export function getBumpedLaneForHydration(
+  root: FiberRoot,
+  renderLanes: Lanes,
+): Lane {
+  getHighestPriorityLanes(renderLanes);
+  const highestLanePriority = return_highestLanePriority;
+
+  let lane;
+  switch (highestLanePriority) {
+    case SyncLanePriority:
+    case SyncBatchedLanePriority:
+      lane = NoLane;
+      break;
+    case InputDiscreteHydrationLanePriority:
+    case InputDiscreteLanePriority:
+      lane = InputDiscreteHydrationLane;
+      break;
+    case InputContinuousHydrationLanePriority:
+    case InputContinuousLanePriority:
+      lane = InputContinuousHydrationLane;
+      break;
+    case DefaultHydrationLanePriority:
+    case DefaultLanePriority:
+      lane = DefaultHydrationLane;
+      break;
+    case TransitionHydrationPriority:
+    case TransitionPriority:
+      lane = TransitionHydrationLane;
+      break;
+    case RetryLanePriority:
+      // Shouldn't be reachable under normal circumstances, so there's no
+      // dedicated lane for retry priority. Use the one for long transitions.
+      lane = TransitionHydrationLane;
+      break;
+    case SelectiveHydrationLanePriority:
+      lane = SelectiveHydrationLane;
+      break;
+    case IdleHydrationLanePriority:
+    case IdleLanePriority:
+      lane = IdleHydrationLane;
+      break;
+    case OffscreenLanePriority:
+    case NoLanePriority:
+      lane = NoLane;
+      break;
+    default:
+      invariant(false, 'Invalid lane: %s. This is a bug in React.', lane);
+  }
+
+  // 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.
+  if ((lane & (root.suspendedLanes | renderLanes)) !== NoLane) {
+    // Give up trying to hydrate and fall back to client render.
+    return NoLane;
+  }
+
+  return lane;
+}
+
+const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
+
+// Count leading zeros. Only used on lanes, so assume input is an integer.
+// 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(lanes: Lanes | Lane) {
+  if (lanes === 0) {
+    return 32;
+  }
+  return (31 - ((log(lanes) / LN2) | 0)) | 0;
+}
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index fb464e62a259..8e387ee012ec 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -10,7 +10,7 @@
 import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, ContextDependency} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.new';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
@@ -27,7 +27,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 
 import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index af2899727244..c7f03442d579 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -10,7 +10,7 @@
 import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, ContextDependency} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.old';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
@@ -27,7 +27,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 
 import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 9f3aabcdde26..4a013a9d7eaf 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -8,7 +8,7 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.old';
 
 export type OffscreenProps = {|
   // TODO: Pick an API before exposing the Offscreen type. I've chosen an enum
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 86749f5c2039..980b623343dc 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -19,7 +19,7 @@ import type {
 import type {RendererInspectionConfig} from './ReactFiberHostConfig';
 import {FundamentalComponent} from './ReactWorkTags';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {Lane, LanePriority} from './ReactFiberLane';
+import type {Lane, LanePriority} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 
 import {
@@ -82,7 +82,7 @@ import {
   higherPriorityLane,
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 import {
   scheduleRefresh,
   scheduleRoot,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 425cde8ab84f..0fc72c42a07e 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -19,7 +19,7 @@ import type {
 import type {RendererInspectionConfig} from './ReactFiberHostConfig';
 import {FundamentalComponent} from './ReactWorkTags';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {Lane, LanePriority} from './ReactFiberLane';
+import type {Lane, LanePriority} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 
 import {
@@ -82,7 +82,7 @@ import {
   higherPriorityLane,
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 import {
   scheduleRefresh,
   scheduleRoot,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 89b0743cf0b9..1b504a18fc32 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -17,7 +17,7 @@ import {
   NoLanePriority,
   NoTimestamp,
   createLaneMap,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 import {
   enableSchedulerTracing,
   enableSuspenseCallback,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index e72cf818a46a..84509babdb51 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -17,7 +17,7 @@ import {
   NoLanePriority,
   NoTimestamp,
   createLaneMap,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 import {
   enableSchedulerTracing,
   enableSuspenseCallback,
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 6e14aacd77de..9692c89a6591 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -10,7 +10,7 @@
 import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import type {Lane} from './ReactFiberLane';
+import type {Lane} from './ReactFiberLane.new';
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index 6e14aacd77de..e98826932f92 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -10,7 +10,7 @@
 import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import type {Lane} from './ReactFiberLane';
+import type {Lane} from './ReactFiberLane.old';
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 01ab69cecee6..058b46be0040 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lane, Lanes} from './ReactFiberLane';
+import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {CapturedValue} from './ReactCapturedValue';
 import type {Update} from './ReactUpdateQueue.new';
 import type {Wakeable} from 'shared/ReactTypes';
@@ -67,7 +67,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index fabcffa87378..fbb9daa45262 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lane, Lanes} from './ReactFiberLane';
+import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {CapturedValue} from './ReactCapturedValue';
 import type {Update} from './ReactUpdateQueue.old';
 import type {Wakeable} from 'shared/ReactTypes';
@@ -67,7 +67,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 98d1f7957f31..8d445cedd44f 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index b97dcf0a4a74..3590f3ea4f1b 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane';
+import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 140ea56e0420..dc1ff874b882 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -9,7 +9,7 @@
 
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
@@ -173,7 +173,7 @@ import {
   markRootFinished,
   schedulerPriorityToLanePriority,
   lanePriorityToSchedulerPriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.new';
 import {completeWork} from './ReactFiberCompleteWork.new';
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 02cfdce20af4..57fce214dc47 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -9,7 +9,7 @@
 
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
@@ -173,7 +173,7 @@ import {
   markRootFinished,
   schedulerPriorityToLanePriority,
   lanePriorityToSchedulerPriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.old';
 import {completeWork} from './ReactFiberCompleteWork.old';
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index ce3f786a5186..c48d53fbb919 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -20,7 +20,7 @@ import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Flags} from './ReactFiberFlags';
-import type {Lane, LanePriority, Lanes, LaneMap} from './ReactFiberLane';
+import type {Lane, LanePriority, Lanes, LaneMap} from './ReactFiberLane.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Wakeable} from 'shared/ReactTypes';
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index f745445a1e38..132f83ab22c3 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -85,9 +85,14 @@
 // resources, but the final state is always the same.
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.new';
 
-import {NoLane, NoLanes, isSubsetOfLanes, mergeLanes} from './ReactFiberLane';
+import {
+  NoLane,
+  NoLanes,
+  isSubsetOfLanes,
+  mergeLanes,
+} from './ReactFiberLane.new';
 import {
   enterDisallowedContextReadInDEV,
   exitDisallowedContextReadInDEV,
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 4eccd78d1234..f1c14537a42d 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -85,9 +85,14 @@
 // resources, but the final state is always the same.
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane';
+import type {Lanes, Lane} from './ReactFiberLane.old';
 
-import {NoLane, NoLanes, isSubsetOfLanes, mergeLanes} from './ReactFiberLane';
+import {
+  NoLane,
+  NoLanes,
+  isSubsetOfLanes,
+  mergeLanes,
+} from './ReactFiberLane.old';
 import {
   enterDisallowedContextReadInDEV,
   exitDisallowedContextReadInDEV,
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 606a90252077..36fdf3938128 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -22,7 +22,7 @@ import {
   SyncLanePriority,
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.new';
 
 const {
   unstable_runWithPriority: Scheduler_runWithPriority,
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 606a90252077..4a44229ac524 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -22,7 +22,7 @@ import {
   SyncLanePriority,
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
-} from './ReactFiberLane';
+} from './ReactFiberLane.old';
 
 const {
   unstable_runWithPriority: Scheduler_runWithPriority,
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 1c69edebcbb7..0779b870a274 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Lane, Lanes} from './ReactFiberLane';
+import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {Fiber} from './ReactInternalTypes';
 import type {Wakeable} from 'shared/ReactTypes';
 

From 60e4a76fa872e429975e336827f8c0a51394110f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 4 Dec 2020 17:27:33 +0000
Subject: [PATCH 0111/1603] [Flight] Add rudimentary PG binding (#20372)

* [Flight] Add rudimentary PG binding

* Use nested Maps for parameters

* Inline and fix Flow
---
 packages/react-pg/README.md            |  12 +++
 packages/react-pg/index.browser.js     |  12 +++
 packages/react-pg/index.js             |  12 +++
 packages/react-pg/index.node.js        |  12 +++
 packages/react-pg/npm/index.browser.js |   7 ++
 packages/react-pg/npm/index.js         |   3 +
 packages/react-pg/npm/index.node.js    |   7 ++
 packages/react-pg/package.json         |  27 +++++++
 packages/react-pg/src/ReactPostgres.js | 107 +++++++++++++++++++++++++
 scripts/flow/environment.js            |  14 ++++
 scripts/rollup/bundles.js              |  18 +++++
 11 files changed, 231 insertions(+)
 create mode 100644 packages/react-pg/README.md
 create mode 100644 packages/react-pg/index.browser.js
 create mode 100644 packages/react-pg/index.js
 create mode 100644 packages/react-pg/index.node.js
 create mode 100644 packages/react-pg/npm/index.browser.js
 create mode 100644 packages/react-pg/npm/index.js
 create mode 100644 packages/react-pg/npm/index.node.js
 create mode 100644 packages/react-pg/package.json
 create mode 100644 packages/react-pg/src/ReactPostgres.js

diff --git a/packages/react-pg/README.md b/packages/react-pg/README.md
new file mode 100644
index 000000000000..cbcc8fb09a7f
--- /dev/null
+++ b/packages/react-pg/README.md
@@ -0,0 +1,12 @@
+# react-pg
+
+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-pg/index.browser.js b/packages/react-pg/index.browser.js
new file mode 100644
index 000000000000..444c63ec765f
--- /dev/null
+++ b/packages/react-pg/index.browser.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'This entry point is not yet supported in the browser environment',
+);
diff --git a/packages/react-pg/index.js b/packages/react-pg/index.js
new file mode 100644
index 000000000000..ceb2071c4f05
--- /dev/null
+++ b/packages/react-pg/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './index.node';
diff --git a/packages/react-pg/index.node.js b/packages/react-pg/index.node.js
new file mode 100644
index 000000000000..71ee93be80aa
--- /dev/null
+++ b/packages/react-pg/index.node.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './src/ReactPostgres';
diff --git a/packages/react-pg/npm/index.browser.js b/packages/react-pg/npm/index.browser.js
new file mode 100644
index 000000000000..6e11ea9c992e
--- /dev/null
+++ b/packages/react-pg/npm/index.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-pg.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-pg.browser.development.js');
+}
diff --git a/packages/react-pg/npm/index.js b/packages/react-pg/npm/index.js
new file mode 100644
index 000000000000..ee510df2ad68
--- /dev/null
+++ b/packages/react-pg/npm/index.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./index.node');
diff --git a/packages/react-pg/npm/index.node.js b/packages/react-pg/npm/index.node.js
new file mode 100644
index 000000000000..a351531e3c90
--- /dev/null
+++ b/packages/react-pg/npm/index.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-pg.node.production.min.js');
+} else {
+  module.exports = require('./cjs/react-pg.node.development.js');
+}
diff --git a/packages/react-pg/package.json b/packages/react-pg/package.json
new file mode 100644
index 000000000000..9f8575414eb4
--- /dev/null
+++ b/packages/react-pg/package.json
@@ -0,0 +1,27 @@
+{
+  "private": true,
+  "name": "react-pg",
+  "description": "React bindings for PostgreSQL",
+  "version": "0.0.0",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-pg"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "build-info.json",
+    "index.js",
+    "index.node.js",
+    "index.browser.js",
+    "cjs/"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0",
+    "pg": "*"
+  },
+  "browser": {
+    "./index.js": "./index.browser.js"
+  }
+}
diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
new file mode 100644
index 000000000000..fc4eae302a32
--- /dev/null
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+
+import {unstable_getCacheForType} from 'react';
+import {Pool as PostgresPool} from 'pg';
+import {prepareValue} from 'pg/lib/utils';
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingResult = {|
+  status: 0,
+  value: Wakeable,
+|};
+
+type ResolvedResult = {|
+  status: 1,
+  value: mixed,
+|};
+
+type RejectedResult = {|
+  status: 2,
+  value: mixed,
+|};
+
+type Result = PendingResult | ResolvedResult | RejectedResult;
+
+function toResult(thenable): Result {
+  const result: Result = {
+    status: Pending,
+    value: thenable,
+  };
+  thenable.then(
+    value => {
+      if (result.status === Pending) {
+        const resolvedResult = ((result: any): ResolvedResult);
+        resolvedResult.status = Resolved;
+        resolvedResult.value = value;
+      }
+    },
+    err => {
+      if (result.status === Pending) {
+        const rejectedResult = ((result: any): RejectedResult);
+        rejectedResult.status = Rejected;
+        rejectedResult.value = err;
+      }
+    },
+  );
+  return result;
+}
+
+function readResult(result: Result) {
+  if (result.status === Resolved) {
+    return result.value;
+  } else {
+    throw result.value;
+  }
+}
+
+export function Pool(options: mixed) {
+  this.pool = new PostgresPool(options);
+  // Unique function per instance because it's used for cache identity.
+  this.createResultMap = function() {
+    return new Map();
+  };
+}
+
+Pool.prototype.query = function(query: string, values?: Array<mixed>) {
+  const pool = this.pool;
+  const outerMap = unstable_getCacheForType(this.createResultMap);
+
+  let innerMap: Map<any, any> = outerMap;
+  let key = query;
+  if (values != null) {
+    // If we have parameters, each becomes as a nesting layer for Maps.
+    // We want to find (or create as needed) the innermost Map, and return that.
+    for (let i = 0; i < values.length; i++) {
+      let nextMap = innerMap.get(key);
+      if (nextMap === undefined) {
+        nextMap = new Map();
+        innerMap.set(key, nextMap);
+      }
+      innerMap = nextMap;
+      // Postgres bindings convert everything to strings:
+      // https://node-postgres.com/features/queries#parameterized-query
+      // We reuse their algorithm instead of reimplementing.
+      key = prepareValue(values[i]);
+    }
+  }
+
+  let entry: Result | void = innerMap.get(key);
+  if (!entry) {
+    const thenable = pool.query(query, values);
+    entry = toResult(thenable);
+    innerMap.set(key, entry);
+  }
+  return readResult(entry);
+};
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 3efe41ff344d..65d7c81da974 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -69,3 +69,17 @@ declare module 'EventListener' {
 
 declare function __webpack_chunk_load__(id: string): Promise<mixed>;
 declare function __webpack_require__(id: string): any;
+
+declare module 'pg' {
+  declare var Pool: (
+    options: mixed,
+  ) => {
+    query: (query: string, values?: Array<mixed>) => void,
+  };
+}
+
+declare module 'pg/lib/utils' {
+  declare module.exports: {
+    prepareValue(val: any): mixed,
+  };
+}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 37fdafa3408a..2ee1ab74a402 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -153,6 +153,24 @@ const bundles = [
     externals: ['react', 'http', 'https'],
   },
 
+  /******* React PG Browser (experimental, new) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react-pg/index.browser',
+    global: 'ReactPostgres',
+    externals: [],
+  },
+
+  /******* React PG Node (experimental, new) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react-pg/index.node',
+    global: 'ReactPostgres',
+    externals: ['react', 'pg'],
+  },
+
   /******* React DOM *******/
   {
     bundleTypes: [

From 9b8060041b4dec3388c448f909e3d6387edefa69 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 4 Dec 2020 20:11:00 +0000
Subject: [PATCH 0112/1603] Error when the number of parameters to a query
 changes (#20379)

---
 packages/react-pg/src/ReactPostgres.js | 21 +++++++++++++++++++--
 scripts/error-codes/codes.json         |  4 +++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
index fc4eae302a32..b3eea21ff082 100644
--- a/packages/react-pg/src/ReactPostgres.js
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -12,6 +12,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import {unstable_getCacheForType} from 'react';
 import {Pool as PostgresPool} from 'pg';
 import {prepareValue} from 'pg/lib/utils';
+import invariant from 'shared/invariant';
 
 const Pending = 0;
 const Resolved = 1;
@@ -74,11 +75,13 @@ export function Pool(options: mixed) {
   };
 }
 
+type NestedMap = Map<any, Result | NestedMap>;
+
 Pool.prototype.query = function(query: string, values?: Array<mixed>) {
   const pool = this.pool;
   const outerMap = unstable_getCacheForType(this.createResultMap);
 
-  let innerMap: Map<any, any> = outerMap;
+  let innerMap: NestedMap = outerMap;
   let key = query;
   if (values != null) {
     // If we have parameters, each becomes as a nesting layer for Maps.
@@ -88,6 +91,13 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
       if (nextMap === undefined) {
         nextMap = new Map();
         innerMap.set(key, nextMap);
+      } else if (!(nextMap instanceof Map)) {
+        invariant(
+          false,
+          '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.',
+        );
       }
       innerMap = nextMap;
       // Postgres bindings convert everything to strings:
@@ -97,11 +107,18 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
     }
   }
 
-  let entry: Result | void = innerMap.get(key);
+  let entry = innerMap.get(key);
   if (!entry) {
     const thenable = pool.query(query, values);
     entry = toResult(thenable);
     innerMap.set(key, entry);
+  } else if (entry instanceof Map) {
+    invariant(
+      false,
+      '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.',
+    );
   }
   return readResult(entry);
 };
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 444e3ff80922..641901fcaba0 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -369,5 +369,7 @@
   "378": "Type %s is not supported in client component props. Remove %s from this object, or avoid the entire object: %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."
+  "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."
 }

From f160547f47cb271bff09c639a6dae8f1b169bc14 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 4 Dec 2020 16:43:13 -0500
Subject: [PATCH 0113/1603] React DevTools 4.10.0 -> 4.10.1

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 4 ++++
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index bbc3235e0aea..19090533447c 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 45fe3ce9a72f..8e631995c6b4 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.10.0",
-  "version_name": "4.10.0",
+  "version": "4.10.1",
+  "version_name": "4.10.1",
 
   "minimum_chrome_version": "49",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 1bde752cd7f7..06b0d892391c 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.10.0",
-  "version_name": "4.10.0",
+  "version": "4.10.1",
+  "version_name": "4.10.1",
 
   "minimum_chrome_version": "49",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 0ce5b37972c4..0a4631baf579 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.10.0",
+  "version": "4.10.1",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index b1bce8cfa121..e1234341353c 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 0b7585aa63ed..e6b0c5cddcc4 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,10 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 4.10.1 (November 12, 2020)
+#### Bugfix
+* Fixed invalid internal work tag mappings ([bvaughn](https://github.com/bvaughn) in [#20380](https://github.com/facebook/react/pull/20380))
+
 ## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 2ce727ea70a6..3a22f5c622f2 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.10.0",
+  "version": "4.10.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^9.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.10.0",
+    "react-devtools-core": "4.10.1",
     "update-notifier": "^2.1.0"
   }
 }

From 3a8c04e3b234d8f54b35fa07796f4db8311bcbbd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 4 Dec 2020 16:54:14 -0500
Subject: [PATCH 0114/1603] React DevTools 4.10.0 -> 4.10.1

---
 packages/react-devtools/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index e6b0c5cddcc4..f4f20116e292 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -11,7 +11,7 @@
 
 ## 4.10.1 (November 12, 2020)
 #### Bugfix
-* Fixed invalid internal work tag mappings ([bvaughn](https://github.com/bvaughn) in [#20380](https://github.com/facebook/react/pull/20380))
+* 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

From 0db61a08befe6406aa93568708224d1cca2aff7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 4 Dec 2020 21:00:57 -0500
Subject: [PATCH 0115/1603] Fix Flight Prod Fixture (#20382)

* Don't use async/await

Babel transpilation fails for some reason in prod.

* Set up production runner command

Uses python because meh. Just to show it's static.

* Use build folder in prod
---
 fixtures/flight/package.json             |  4 ++-
 fixtures/flight/server/handler.server.js | 31 +++++++++++++++---------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
index 3470e72e753a..551d810d5773 100644
--- a/fixtures/flight/package.json
+++ b/fixtures/flight/package.json
@@ -68,7 +68,9 @@
     "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
     "start:client": "node scripts/start.js",
     "start:server": "NODE_ENV=development node --experimental-loader ./loader/index.js --conditions=react-server server",
-    "start:prod": "node scripts/build.js && NODE_ENV=production node server",
+    "start:prod": "node scripts/build.js && concurrently \"npm run start:prod-server\" \"npm run start:prod-client\"",
+    "start:prod-client": "cd ./build && python -m SimpleHTTPServer 3000",
+    "start:prod-server": "NODE_ENV=production node --experimental-loader ./loader/index.js --conditions=react-server server",
     "build": "node scripts/build.js",
     "test": "node scripts/test.js --env=jsdom"
   },
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index cb9bcbf306e1..29d493303b68 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -1,20 +1,27 @@
 'use strict';
 
 import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
-import {readFileSync} from 'fs';
+import {readFile} from 'fs';
 import {resolve} from 'path';
 import * as React from 'react';
 
-module.exports = async function(req, res) {
-  const m = await import('../src/App.server.js');
+module.exports = function(req, res) {
   // const m = require('../src/App.server.js');
-  const App = m.default.default || m.default;
-  res.setHeader('Access-Control-Allow-Origin', '*');
-  const moduleMap = JSON.parse(
-    readFileSync(
-      resolve(__dirname, '../dist/react-transport-manifest.json'),
-      'utf8'
-    )
-  );
-  pipeToNodeWritable(<App />, res, moduleMap);
+  import('../src/App.server.js').then(m => {
+    const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';
+    readFile(
+      resolve(__dirname, `../${dist}/react-transport-manifest.json`),
+      'utf8',
+      (err, data) => {
+        if (err) {
+          throw err;
+        }
+
+        const App = m.default.default || m.default;
+        res.setHeader('Access-Control-Allow-Origin', '*');
+        const moduleMap = JSON.parse(data);
+        pipeToNodeWritable(<App />, res, moduleMap);
+      }
+    );
+  });
 };

From 4053c76b7d0fd230517ba26c71a9550ac3346c88 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 6 Dec 2020 09:10:15 -0500
Subject: [PATCH 0116/1603] Add more DevTools tests for React.Lazy (#20380)

---
 .../profilingCommitTreeBuilder-test.js.snap   | 336 ++++++++++++++++++
 .../__snapshots__/store-test.js.snap          |  60 +++-
 .../profilingCommitTreeBuilder-test.js        | 189 ++++++++++
 .../src/__tests__/store-test.js               | 114 +++++-
 .../src/backend/renderer.js                   |  31 +-
 5 files changed, 709 insertions(+), 21 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
index b1a4a14818b5..1fa419013d98 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
@@ -1,5 +1,341 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`commit tree Lazy should support Lazy components (createRoot): 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 12,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree Lazy should support Lazy components (createRoot): 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [
+        4,
+      ],
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 12,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "LazyInnerComponent",
+      "hocDisplayNames": null,
+      "id": 4,
+      "key": null,
+      "parentID": 3,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree Lazy should support Lazy components (legacy render): 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 12,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree Lazy should support Lazy components (legacy render): 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [
+        4,
+      ],
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 12,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "LazyInnerComponent",
+      "hocDisplayNames": null,
+      "id": 4,
+      "key": null,
+      "parentID": 3,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 12,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 0: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        3,
+      ],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+    3 => Object {
+      "children": Array [],
+      "displayName": "Suspense",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "parentID": 2,
+      "treeBaseDuration": 0,
+      "type": 12,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
+exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 1: CommitTree 1`] = `
+Object {
+  "nodes": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "parentID": 0,
+      "treeBaseDuration": 0,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [],
+      "displayName": "App",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "parentID": 1,
+      "treeBaseDuration": 0,
+      "type": 5,
+    },
+  },
+  "rootID": 1,
+}
+`;
+
 exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `
 Object {
   "nodes": Map {
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
index 46e5f86aedc0..cc3c9b6c3cc2 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
@@ -1,5 +1,63 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Store Lazy should support Lazy components (legacy render): 1: mounted + loading 1`] = `
+[root]
+  ▾ <App>
+      <Suspense>
+`;
+
+exports[`Store Lazy should support Lazy components (legacy render): 2: mounted + loaded 1`] = `
+[root]
+  ▾ <App>
+    ▾ <Suspense>
+        <LazyInnerComponent>
+`;
+
+exports[`Store Lazy should support Lazy components (legacy render): 3: unmounted 1`] = `
+[root]
+    <App>
+`;
+
+exports[`Store Lazy should support Lazy components in (createRoot): 1: mounted + loading 1`] = `
+[root]
+  ▾ <App>
+      <Suspense>
+`;
+
+exports[`Store Lazy should support Lazy components in (createRoot): 2: mounted + loaded 1`] = `
+[root]
+  ▾ <App>
+    ▾ <Suspense>
+        <LazyInnerComponent>
+`;
+
+exports[`Store Lazy should support Lazy components in (createRoot): 3: unmounted 1`] = `
+[root]
+    <App>
+`;
+
+exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 1: mounted + loading 1`] = `
+[root]
+  ▾ <App>
+      <Suspense>
+`;
+
+exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 2: unmounted 1`] = `
+[root]
+    <App>
+`;
+
+exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 1: mounted + loading 1`] = `
+[root]
+  ▾ <App>
+      <Suspense>
+`;
+
+exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 2: unmounted 1`] = `
+[root]
+    <App>
+`;
+
 exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `
 [root]
   ▾ <Wrapper>
@@ -624,8 +682,6 @@ exports[`Store should show the right display names for special component types 1
       <MyComponent4> [Memo]
     ▾ <MyComponent> [Memo]
         <MyComponent> [ForwardRef]
-    ▾ <Suspense>
-        <MyComponent5>
       <Baz> [withFoo][withBar]
       <Baz> [Memo][withFoo][withBar]
       <Baz> [ForwardRef][withFoo][withBar]
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index c4bccdef90b3..544f4d1614d8 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -79,4 +79,193 @@ describe('commit tree', () => {
       expect(renderFinished).toBe(true);
     }
   });
+
+  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));
+    });
+
+    it('should support Lazy components (legacy render)', async done => {
+      const container = document.createElement('div');
+
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() =>
+        ReactDOM.render(<App renderChildren={true} />, container),
+      );
+      await Promise.resolve();
+      utils.act(() =>
+        ReactDOM.render(<App renderChildren={true} />, container),
+      );
+      utils.act(() =>
+        ReactDOM.render(<App renderChildren={false} />, container),
+      );
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      let renderFinished = false;
+
+      function Validator({commitIndex, rootID}) {
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        });
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        renderFinished = true;
+        return null;
+      }
+
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        renderFinished = false;
+
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
+          );
+        });
+
+        expect(renderFinished).toBe(true);
+      }
+
+      done();
+    });
+
+    it('should support Lazy components (createRoot)', async done => {
+      const container = document.createElement('div');
+      const root = ReactDOM.unstable_createRoot(container);
+
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() => root.render(<App renderChildren={true} />));
+      await Promise.resolve();
+      utils.act(() => root.render(<App renderChildren={true} />));
+      utils.act(() => root.render(<App renderChildren={false} />));
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      let renderFinished = false;
+
+      function Validator({commitIndex, rootID}) {
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        });
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        renderFinished = true;
+        return null;
+      }
+
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        renderFinished = false;
+
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
+          );
+        });
+
+        expect(renderFinished).toBe(true);
+      }
+
+      done();
+    });
+
+    it('should support Lazy components that are unmounted before resolving (legacy render)', async done => {
+      const container = document.createElement('div');
+
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() =>
+        ReactDOM.render(<App renderChildren={true} />, container),
+      );
+      utils.act(() =>
+        ReactDOM.render(<App renderChildren={false} />, container),
+      );
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      let renderFinished = false;
+
+      function Validator({commitIndex, rootID}) {
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        });
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        renderFinished = true;
+        return null;
+      }
+
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        renderFinished = false;
+
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
+          );
+        });
+
+        expect(renderFinished).toBe(true);
+      }
+
+      done();
+    });
+
+    it('should support Lazy components that are unmounted before resolving (createRoot)', async done => {
+      const container = document.createElement('div');
+      const root = ReactDOM.unstable_createRoot(container);
+
+      utils.act(() => store.profilerStore.startProfiling());
+      utils.act(() => root.render(<App renderChildren={true} />));
+      utils.act(() => root.render(<App renderChildren={false} />));
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      let renderFinished = false;
+
+      function Validator({commitIndex, rootID}) {
+        const commitTree = store.profilerStore.profilingCache.getCommitTree({
+          commitIndex,
+          rootID,
+        });
+        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
+        renderFinished = true;
+        return null;
+      }
+
+      const rootID = store.roots[0];
+
+      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
+        renderFinished = false;
+
+        utils.act(() => {
+          TestRenderer.create(
+            <Validator commitIndex={commitIndex} rootID={rootID} />,
+          );
+        });
+
+        expect(renderFinished).toBe(true);
+      }
+
+      done();
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index d2e95073e8a6..92face2f3765 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -850,10 +850,6 @@ describe('Store', () => {
   });
 
   it('should show the right display names for special component types', async done => {
-    async function fakeImport(result) {
-      return {default: result};
-    }
-
     const MyComponent = (props, ref) => null;
     const ForwardRefComponent = React.forwardRef(MyComponent);
     const MyComponent2 = (props, ref) => null;
@@ -868,8 +864,6 @@ describe('Store', () => {
     const MyComponent4 = (props, ref) => null;
     const MemoComponent = React.memo(MyComponent4);
     const MemoForwardRefComponent = React.memo(ForwardRefComponent);
-    const MyComponent5 = (props, ref) => null;
-    const LazyComponent = React.lazy(() => fakeImport(MyComponent5));
 
     const FakeHigherOrderComponent = () => null;
     FakeHigherOrderComponent.displayName = 'withFoo(withBar(Baz))';
@@ -889,9 +883,6 @@ describe('Store', () => {
         <ForwardRefComponentWithCustomDisplayName />
         <MemoComponent />
         <MemoForwardRefComponent />
-        <React.Suspense fallback="Loading...">
-          <LazyComponent />
-        </React.Suspense>
         <FakeHigherOrderComponent />
         <MemoizedFakeHigherOrderComponent />
         <ForwardRefFakeHigherOrderComponent />
@@ -912,4 +903,109 @@ describe('Store', () => {
 
     done();
   });
+
+  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));
+    });
+
+    it('should support Lazy components (legacy render)', async done => {
+      const container = document.createElement('div');
+
+      // Render once to start fetching the lazy component
+      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+
+      expect(store).toMatchSnapshot('1: mounted + loading');
+
+      await Promise.resolve();
+
+      // Render again after it resolves
+      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+
+      expect(store).toMatchSnapshot('2: mounted + loaded');
+
+      // Render again to unmount it
+      act(() => ReactDOM.render(<App renderChildren={false} />, container));
+
+      expect(store).toMatchSnapshot('3: unmounted');
+
+      done();
+    });
+
+    it('should support Lazy components in (createRoot)', async done => {
+      const container = document.createElement('div');
+      const root = ReactDOM.unstable_createRoot(container);
+
+      // Render once to start fetching the lazy component
+      act(() => root.render(<App renderChildren={true} />));
+
+      expect(store).toMatchSnapshot('1: mounted + loading');
+
+      await Promise.resolve();
+
+      // Render again after it resolves
+      act(() => root.render(<App renderChildren={true} />));
+
+      expect(store).toMatchSnapshot('2: mounted + loaded');
+
+      // Render again to unmount it
+      act(() => root.render(<App renderChildren={false} />));
+
+      expect(store).toMatchSnapshot('3: unmounted');
+
+      done();
+    });
+
+    it('should support Lazy components that are unmounted before they finish loading (legacy render)', async done => {
+      const container = document.createElement('div');
+
+      // Render once to start fetching the lazy component
+      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+
+      expect(store).toMatchSnapshot('1: mounted + loading');
+
+      // Render again to unmount it before it finishes loading
+      act(() => ReactDOM.render(<App renderChildren={false} />, container));
+
+      expect(store).toMatchSnapshot('2: unmounted');
+
+      done();
+    });
+
+    it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async done => {
+      const container = document.createElement('div');
+      const root = ReactDOM.unstable_createRoot(container);
+
+      // Render once to start fetching the lazy component
+      act(() => root.render(<App renderChildren={true} />));
+
+      expect(store).toMatchSnapshot('1: mounted + loading');
+
+      // Render again to unmount it before it finishes loading
+      act(() => root.render(<App renderChildren={false} />));
+
+      expect(store).toMatchSnapshot('2: unmounted');
+
+      done();
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index f8e0f07104ac..983a17f51dc9 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -545,7 +545,12 @@ export function attach(
     }
   }
 
-  const debug = (name: string, fiber: Fiber, parentFiber: ?Fiber): void => {
+  const debug = (
+    name: string,
+    fiber: Fiber,
+    parentFiber: ?Fiber,
+    extraString?: string = '',
+  ): void => {
     if (__DEBUG__) {
       const displayName =
         fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null');
@@ -562,10 +567,11 @@ export function attach(
       console.log(
         `[renderer] %c${name} %c${displayName} (${id}) %c${
           parentFiber ? `${parentDisplayName} (${parentID})` : ''
-        }`,
+        } %c${extraString}`,
         'color: red; font-weight: bold;',
         'color: blue;',
         'color: purple;',
+        'color: black;',
       );
     }
   };
@@ -1237,7 +1243,12 @@ export function attach(
 
   function recordUnmount(fiber: Fiber, isSimulated: boolean) {
     if (__DEBUG__) {
-      debug('recordUnmount()', fiber);
+      debug(
+        'recordUnmount()',
+        fiber,
+        null,
+        isSimulated ? 'unmount is simulated' : '',
+      );
     }
 
     if (trackedPathMatchFiber !== null) {
@@ -1255,17 +1266,17 @@ export function attach(
     const isRoot = fiber.tag === HostRoot;
     const primaryFiber = getPrimaryFiber(fiber);
     if (!fiberToIDMap.has(primaryFiber)) {
-      // If we've never seen this Fiber, it might be because
-      // it is inside a non-current Suspense fragment tree,
-      // and so the store is not even aware of it.
-      // In that case we can just ignore it, or otherwise
-      // there will be errors later on.
+      // If we've never seen this Fiber, it might be inside of a legacy render Suspense fragment (so the store is not even aware of it).
+      // In that case we can just ignore it or it will cause errors later on.
+      // One example of this is a Lazy component that never resolves before being unmounted.
+      //
+      // TODO: This is fragile and can obscure actual bugs.
+      //
+      // Calling getPrimaryFiber() lazily adds fibers to the Map, so clean up after ourselves before returning.
       primaryFibers.delete(primaryFiber);
-      // TODO: this is fragile and can obscure actual bugs.
       return;
     }
     const id = getFiberID(primaryFiber);
-
     if (isRoot) {
       // Roots must be removed only after all children (pending and simulated) have been removed.
       // So we track it separately.

From dd16b789907758fb3effb316361a63198ed8d49f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 7 Dec 2020 10:10:43 -0500
Subject: [PATCH 0117/1603] Tweaked DevTools build command slightly

---
 package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 0d50364ef51e..bf225d9cdc81 100644
--- a/package.json
+++ b/package.json
@@ -106,8 +106,9 @@
   },
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
-    "build-for-devtools-dev": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_DEV",
-    "build-for-devtools-prod": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE_PROD",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh",
+    "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
+    "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",

From 30dfb860259dea126b3f43ab270ec51593824dd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 7 Dec 2020 12:10:18 -0500
Subject: [PATCH 0118/1603] [Flight] Basic scan of the file system to find
 Client modules (#20383)

* Basic scan of the file system to find Client modules

This does a rudimentary merge of the plugins. It still uses the global
scan and writes to file system.

Now the plugin accepts a search path or a list of referenced client files.
In prod, the best practice is to provide a list of files that are actually
referenced rather than including everything possibly reachable. Probably
in dev too since it's faster.

This is using the same convention as the upstream ContextModule - which
powers the require.context helpers.

* Add neo-async to dependencies
---
 fixtures/flight/config/webpack.config.js      |   9 +-
 fixtures/flight/src/index.js                  |   4 -
 .../react-transport-dom-webpack/package.json  |   1 +
 .../src/ReactFlightWebpackPlugin.js           | 234 +++++++++++++++++-
 scripts/rollup/bundles.js                     |   2 +-
 5 files changed, 241 insertions(+), 9 deletions(-)

diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
index da7df8ee4ae6..1912d148d775 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -664,7 +664,14 @@ module.exports = function(webpackEnv) {
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
       // Fork Start
-      new ReactFlightWebpackPlugin({isServer: false}),
+      new ReactFlightWebpackPlugin({
+        isServer: false,
+        clientReferences: {
+          directory: './src/',
+          recursive: true,
+          include: /\.client\.js$/,
+        },
+      }),
       // Fork End
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index 9fc13a76aa89..4069f2fe88eb 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -17,7 +17,3 @@ ReactDOM.render(
   </Suspense>,
   document.getElementById('root')
 );
-
-// Create entry points for Client Components.
-// TODO: Webpack plugin should do this.
-require.context('./', true, /\.client\.js$/, 'lazy');
diff --git a/packages/react-transport-dom-webpack/package.json b/packages/react-transport-dom-webpack/package.json
index 8e2db02610ef..e2666f94809f 100644
--- a/packages/react-transport-dom-webpack/package.json
+++ b/packages/react-transport-dom-webpack/package.json
@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "acorn": "^6.2.1",
+    "neo-async": "^2.6.1",
     "loose-envify": "^1.1.0",
     "object-assign": "^4.1.1"
   },
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
index a954f08935e0..f86f965e11e9 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -8,17 +8,169 @@
  */
 
 import {mkdirSync, writeFileSync} from 'fs';
-import {dirname, resolve} from 'path';
+import {dirname, resolve, join} from 'path';
 import {pathToFileURL} from 'url';
 
+import asyncLib from 'neo-async';
+
+import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
+import NullDependency from 'webpack/lib/dependencies/NullDependency';
+import AsyncDependenciesBlock from 'webpack/lib/AsyncDependenciesBlock';
+import Template from 'webpack/lib/Template';
+
+class ClientReferenceDependency extends ModuleDependency {
+  constructor(request) {
+    super(request);
+  }
+
+  get type() {
+    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 clientFileName = require.resolve('../');
+
+type ClientReferenceSearchPath = {
+  directory: string,
+  recursive?: boolean,
+  include: RegExp,
+  exclude?: RegExp,
+};
+
+type ClientReferencePath = string | ClientReferenceSearchPath;
+
+type Options = {
+  isServer: boolean,
+  clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
+  chunkName?: string,
+};
+
+const PLUGIN_NAME = 'React Transport Plugin';
+
 export default class ReactFlightWebpackPlugin {
-  constructor(options: {isServer: boolean}) {}
+  clientReferences: $ReadOnlyArray<ClientReferencePath>;
+  chunkName: 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: /\.client\.(js|ts|jsx|tsx)$/,
+        },
+      ];
+    } else if (
+      typeof options.clientReferences === 'string' ||
+      !Array.isArray(options.clientReferences)
+    ) {
+      this.clientReferences = [(options.clientReferences: $FlowFixMe)];
+    } else {
+      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]';
+    }
+  }
 
   apply(compiler: any) {
-    compiler.hooks.emit.tap('React Transport Plugin', compilation => {
+    const run = (params, callback) => {
+      // First we need to find all client files on the file system. We do this early so
+      // that we have them synchronously available later when we need them. This might
+      // not be needed anymore since we no longer need to compile the module itself in
+      // a special way. So it's probably better to do this lazily and in parallel with
+      // other compilation.
+      const contextResolver = compiler.resolverFactory.get('context', {});
+      this.resolveAllClientFiles(
+        compiler.context,
+        contextResolver,
+        compiler.inputFileSystem,
+        compiler.createContextModuleFactory(),
+        (err, resolvedClientReferences) => {
+          if (err) {
+            callback(err);
+            return;
+          }
+          compiler.hooks.compilation.tap(
+            PLUGIN_NAME,
+            (compilation, {normalModuleFactory}) => {
+              compilation.dependencyFactories.set(
+                ClientReferenceDependency,
+                normalModuleFactory,
+              );
+              compilation.dependencyTemplates.set(
+                ClientReferenceDependency,
+                new NullDependency.Template(),
+              );
+
+              compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
+                // 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.
+                // TODO: Warn if we don't find this file anywhere in the compilation.
+                if (module.resource !== clientFileName) {
+                  return;
+                }
+                if (resolvedClientReferences) {
+                  for (let i = 0; i < resolvedClientReferences.length; i++) {
+                    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,
+                      },
+                      module,
+                      null,
+                      dep.require,
+                    );
+                    block.addDependency(dep);
+                    module.addBlock(block);
+                  }
+                }
+              });
+            },
+          );
+
+          callback();
+        },
+      );
+    };
+
+    compiler.hooks.run.tapAsync(PLUGIN_NAME, run);
+    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);
+
+    compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {
       const json = {};
       compilation.chunks.forEach(chunk => {
         chunk.getModules().forEach(mod => {
+          // TOOD: 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 (!/\.client\.js$/.test(mod.resource)) {
             return;
           }
@@ -42,7 +194,83 @@ export default class ReactFlightWebpackPlugin {
         'react-transport-manifest.json',
       );
       mkdirSync(dirname(filename), {recursive: true});
+      // TODO: Use webpack's emit API and read from the devserver.
       writeFileSync(filename, output);
     });
   }
+
+  // This attempts to replicate the dynamic file path resolution used for other wildcard
+  // resolution in Webpack is using.
+  resolveAllClientFiles(
+    context: string,
+    contextResolver: any,
+    fs: any,
+    contextModuleFactory: any,
+    callback: (
+      err: null | Error,
+      result?: $ReadOnlyArray<ClientReferenceDependency>,
+    ) => void,
+  ) {
+    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<ModuleDependency>) => {
+                if (err2) return cb(err2);
+                const clientRefDeps = deps.map(dep => {
+                  const request = join(resolvedDirectory, dep.request);
+                  const clientRefDep = new ClientReferenceDependency(request);
+                  clientRefDep.userRequest = dep.userRequest;
+                  return clientRefDep;
+                });
+                cb(null, clientRefDeps);
+              },
+            );
+          },
+        );
+      },
+      (
+        err: null | Error,
+        result: $ReadOnlyArray<$ReadOnlyArray<ClientReferenceDependency>>,
+      ): void => {
+        if (err) return callback(err);
+        const flat = [];
+        for (let i = 0; i < result.length; i++) {
+          flat.push.apply(flat, result[i]);
+        }
+        callback(null, flat);
+      },
+    );
+  }
 }
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 2ee1ab74a402..47a004ed4e12 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -301,7 +301,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-transport-dom-webpack/plugin',
     global: 'ReactFlightWebpackPlugin',
-    externals: ['fs', 'path', 'url'],
+    externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
   /******* React Transport DOM Webpack Node.js Loader *******/

From 18d7574ae297a24d53fe418e9008e969c29ffba2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 7 Dec 2020 13:10:53 -0600
Subject: [PATCH 0119/1603] Remove `catch` from Scheduler build (#20396)

Makes debugging errors harder.

In this case, we can use `finally` instead.
---
 packages/scheduler/src/forks/SchedulerDOM.js  | 24 ++++++++++-------
 .../src/forks/SchedulerPostTaskOnly.js        | 26 +++++++++++--------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/scheduler/src/forks/SchedulerDOM.js b/packages/scheduler/src/forks/SchedulerDOM.js
index 53101a6e6e58..e872b3ae6590 100644
--- a/packages/scheduler/src/forks/SchedulerDOM.js
+++ b/packages/scheduler/src/forks/SchedulerDOM.js
@@ -519,21 +519,25 @@ const performWorkUntilDeadline = () => {
     // the message event.
     deadline = currentTime + yieldInterval;
     const hasTimeRemaining = true;
+
+    // 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 `scheduledHostCallback` errors, then
+    // `hasMoreWork` will remain true, and we'll continue the work loop.
+    let hasMoreWork = true;
     try {
-      const hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
-      if (!hasMoreWork) {
-        isMessageLoopRunning = false;
-        scheduledHostCallback = null;
-      } else {
+      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
+    } finally {
+      if (hasMoreWork) {
         // If there's more work, schedule the next message event at the end
         // of the preceding one.
         port.postMessage(null);
+      } else {
+        isMessageLoopRunning = false;
+        scheduledHostCallback = null;
       }
-    } catch (error) {
-      // If a scheduler task throws, exit the current browser task so the
-      // error can be observed.
-      port.postMessage(null);
-      throw error;
     }
   } else {
     isMessageLoopRunning = false;
diff --git a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
index ba081d3236e5..8ee96e2d16e5 100644
--- a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
+++ b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
@@ -512,21 +512,25 @@ const performWorkUntilDeadline = () => {
     // the message event.
     deadline = currentTime + yieldInterval;
     const hasTimeRemaining = true;
+
+    // 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 `scheduledHostCallback` errors, then
+    // `hasMoreWork` will remain true, and we'll continue the work loop.
+    let hasMoreWork = true;
     try {
-      const hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
-      if (!hasMoreWork) {
+      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
+    } finally {
+      if (hasMoreWork) {
+        // If there's more work, schedule the next browser task at the end of
+        // the preceding one.
+        postTask(performWorkUntilDeadline);
+      } else {
         isTaskLoopRunning = false;
         scheduledHostCallback = null;
-      } else {
-        // If there's more work, schedule the next message event at the end
-        // of the preceding one.
-        postTask(performWorkUntilDeadline);
       }
-    } catch (error) {
-      // If a scheduler task throws, exit the current browser task so the
-      // error can be observed.
-      postTask(performWorkUntilDeadline);
-      throw error;
     }
   } else {
     isTaskLoopRunning = false;

From 1377e465ddc492a1b4b33d75e652bce9b273cc85 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 7 Dec 2020 15:07:28 -0600
Subject: [PATCH 0120/1603] Add Placement bit without removing others (#20398)

When scheduling a Placement effect, we should add the Placement bit
without resetting the others.

In the old fork, there are no flags to reset, anyway, since by the
time we reach the child reconciler, the flags will have already been
reset.

However, in the effects refactor, "static" flags are not reset, so this
can actually manifest as a bug. See #20285 for a regression test.
---
 packages/react-reconciler/src/ReactChildFiber.new.js | 6 +++---
 packages/react-reconciler/src/ReactChildFiber.old.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 52bd63272118..a92f6a6790d5 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -342,7 +342,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       const oldIndex = current.index;
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.flags = Placement;
+        newFiber.flags |= Placement;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
@@ -350,7 +350,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       }
     } else {
       // This is an insertion.
-      newFiber.flags = Placement;
+      newFiber.flags |= Placement;
       return lastPlacedIndex;
     }
   }
@@ -359,7 +359,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // 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;
+      newFiber.flags |= Placement;
     }
     return newFiber;
   }
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 7313d78f0bf3..730f08663878 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -342,7 +342,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       const oldIndex = current.index;
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.flags = Placement;
+        newFiber.flags |= Placement;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
@@ -350,7 +350,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       }
     } else {
       // This is an insertion.
-      newFiber.flags = Placement;
+      newFiber.flags |= Placement;
       return lastPlacedIndex;
     }
   }
@@ -359,7 +359,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // 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;
+      newFiber.flags |= Placement;
     }
     return newFiber;
   }

From de75315d7ed388493f6d42fccd15ae3638adebe0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 16 Nov 2020 16:01:26 -0600
Subject: [PATCH 0121/1603] Track deletions using an array on the parent

Adds back the `deletions` array and uses it in the commit phase.

We use a trick where the first time we hit a deletion effect, we commit
all the deletion effects that belong to that parent. This is an
incremental step away from using the effect list and toward a DFS +
subtreeFlags traversal.

This will help determine whether the regression is caused by, say,
pushing the same fiber into the deletions array multiple times.
---
 .../src/ReactChildFiber.new.js                | 19 ++++++-
 .../src/ReactChildFiber.old.js                | 20 +++++++-
 .../src/ReactFiberBeginWork.new.js            | 48 ++++++++++++------
 .../src/ReactFiberBeginWork.old.js            | 48 ++++++++++++------
 .../src/ReactFiberHooks.old.js                |  3 --
 .../src/ReactFiberHydrationContext.new.js     | 11 ++++-
 .../src/ReactFiberHydrationContext.old.js     | 11 ++++-
 .../src/ReactFiberWorkLoop.new.js             | 33 ++++++++++++-
 .../src/ReactFiberWorkLoop.old.js             | 49 ++++++++++++++++++-
 9 files changed, 203 insertions(+), 39 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index a92f6a6790d5..d8894768c6d9 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -13,7 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 
 import getComponentName from 'shared/getComponentName';
-import {Placement, Deletion} from './ReactFiberFlags';
+import {Deletion, ChildDeletion, Placement} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -276,6 +276,23 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
     childToDelete.nextEffect = null;
     childToDelete.flags = Deletion;
+
+    let deletions = returnFiber.deletions;
+    if (deletions === null) {
+      deletions = returnFiber.deletions = [childToDelete];
+      returnFiber.flags |= ChildDeletion;
+    } else {
+      deletions.push(childToDelete);
+    }
+    // Stash a reference to the return fiber's deletion array on each of the
+    // deleted children. This is really weird, but it's a temporary workaround
+    // while we're still using the effect list to traverse effect fibers. A
+    // better workaround would be to follow the `.return` pointer in the commit
+    // phase, but unfortunately we can't assume that `.return` points to the
+    // correct fiber, even in the commit phase, because `findDOMNode` might
+    // mutate it.
+    // TODO: Remove this line.
+    childToDelete.deletions = deletions;
   }
 
   function deleteRemainingChildren(
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 730f08663878..268f71dd5308 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -13,7 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 
 import getComponentName from 'shared/getComponentName';
-import {Placement, Deletion} from './ReactFiberFlags';
+import {Deletion, ChildDeletion, Placement} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -276,6 +276,23 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
     childToDelete.nextEffect = null;
     childToDelete.flags = Deletion;
+
+    let deletions = returnFiber.deletions;
+    if (deletions === null) {
+      deletions = returnFiber.deletions = [childToDelete];
+      returnFiber.flags |= ChildDeletion;
+    } else {
+      deletions.push(childToDelete);
+    }
+    // Stash a reference to the return fiber's deletion array on each of the
+    // deleted children. This is really weird, but it's a temporary workaround
+    // while we're still using the effect list to traverse effect fibers. A
+    // better workaround would be to follow the `.return` pointer in the commit
+    // phase, but unfortunately we can't assume that `.return` points to the
+    // correct fiber, even in the commit phase, because `findDOMNode` might
+    // mutate it.
+    // TODO: Remove this line.
+    childToDelete.deletions = deletions;
   }
 
   function deleteRemainingChildren(
@@ -1125,6 +1142,7 @@ function ChildReconciler(shouldTrackSideEffects) {
         } else {
           if (
             child.elementType === elementType ||
+            // Keep this check inline so it only runs on the false path:
             (__DEV__
               ? isCompatibleFamilyForHotReloading(child, element)
               : false) ||
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 99aa9193e2f2..3ae9945a5707 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -61,6 +61,7 @@ import {
   Update,
   Ref,
   Deletion,
+  ChildDeletion,
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -2007,6 +2008,14 @@ function updateSuspensePrimaryChildren(
     currentFallbackChildFragment.nextEffect = null;
     currentFallbackChildFragment.flags = Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
+    let deletions = workInProgress.deletions;
+    if (deletions === null) {
+      deletions = workInProgress.deletions = [currentFallbackChildFragment];
+      workInProgress.flags |= ChildDeletion;
+    } else {
+      deletions.push(currentFallbackChildFragment);
+    }
+    currentFallbackChildFragment.deletions = deletions;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -2061,21 +2070,23 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    // The fallback fiber was added as a deletion effect during the first pass.
-    // However, since we're going to remain on the fallback, we no longer want
-    // to delete it. So we need to remove it from the list. Deletions are stored
-    // on the same list as effects. We want to keep the effects from the primary
-    // tree. So we copy the primary child fragment's effect list, which does not
-    // include the fallback deletion effect.
-    const progressedLastEffect = primaryChildFragment.lastEffect;
-    if (progressedLastEffect !== null) {
-      workInProgress.firstEffect = primaryChildFragment.firstEffect;
-      workInProgress.lastEffect = progressedLastEffect;
-      progressedLastEffect.nextEffect = null;
-    } else {
-      // TODO: Reset this somewhere else? Lol legacy mode is so weird.
-      workInProgress.firstEffect = workInProgress.lastEffect = null;
+    if (currentFallbackChildFragment !== null) {
+      // The fallback fiber was added as a deletion effect during the first
+      // pass. However, since we're going to remain on the fallback, we no
+      // longer want to delete it. So we need to remove it from the list.
+      // Deletions are stored on the same list as effects, and are always added
+      // to the front. So we know that the first effect must be the fallback
+      // deletion effect, and everything after that is from the primary free.
+      const firstPrimaryTreeEffect = currentFallbackChildFragment.nextEffect;
+      if (firstPrimaryTreeEffect !== null) {
+        workInProgress.firstEffect = firstPrimaryTreeEffect;
+      } else {
+        // TODO: Reset this somewhere else? Lol legacy mode is so weird.
+        workInProgress.firstEffect = workInProgress.lastEffect = null;
+      }
     }
+
+    workInProgress.deletions = null;
   } else {
     primaryChildFragment = createWorkInProgressOffscreenFiber(
       currentPrimaryChildFragment,
@@ -2982,6 +2993,15 @@ function remountFiber(
     current.nextEffect = null;
     current.flags = Deletion;
 
+    let deletions = returnFiber.deletions;
+    if (deletions === null) {
+      deletions = returnFiber.deletions = [current];
+      returnFiber.flags |= ChildDeletion;
+    } else {
+      deletions.push(current);
+    }
+    current.deletions = deletions;
+
     newWorkInProgress.flags |= Placement;
 
     // Restart work from the new fiber.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index f875db594495..7cd86c488c04 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -61,6 +61,7 @@ import {
   Update,
   Ref,
   Deletion,
+  ChildDeletion,
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -2007,6 +2008,14 @@ function updateSuspensePrimaryChildren(
     currentFallbackChildFragment.nextEffect = null;
     currentFallbackChildFragment.flags = Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
+    let deletions = workInProgress.deletions;
+    if (deletions === null) {
+      deletions = workInProgress.deletions = [currentFallbackChildFragment];
+      workInProgress.flags |= ChildDeletion;
+    } else {
+      deletions.push(currentFallbackChildFragment);
+    }
+    currentFallbackChildFragment.deletions = deletions;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -2061,21 +2070,23 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    // The fallback fiber was added as a deletion effect during the first pass.
-    // However, since we're going to remain on the fallback, we no longer want
-    // to delete it. So we need to remove it from the list. Deletions are stored
-    // on the same list as effects. We want to keep the effects from the primary
-    // tree. So we copy the primary child fragment's effect list, which does not
-    // include the fallback deletion effect.
-    const progressedLastEffect = primaryChildFragment.lastEffect;
-    if (progressedLastEffect !== null) {
-      workInProgress.firstEffect = primaryChildFragment.firstEffect;
-      workInProgress.lastEffect = progressedLastEffect;
-      progressedLastEffect.nextEffect = null;
-    } else {
-      // TODO: Reset this somewhere else? Lol legacy mode is so weird.
-      workInProgress.firstEffect = workInProgress.lastEffect = null;
+    if (currentFallbackChildFragment !== null) {
+      // The fallback fiber was added as a deletion effect during the first
+      // pass. However, since we're going to remain on the fallback, we no
+      // longer want to delete it. So we need to remove it from the list.
+      // Deletions are stored on the same list as effects, and are always added
+      // to the front. So we know that the first effect must be the fallback
+      // deletion effect, and everything after that is from the primary free.
+      const firstPrimaryTreeEffect = currentFallbackChildFragment.nextEffect;
+      if (firstPrimaryTreeEffect !== null) {
+        workInProgress.firstEffect = firstPrimaryTreeEffect;
+      } else {
+        // TODO: Reset this somewhere else? Lol legacy mode is so weird.
+        workInProgress.firstEffect = workInProgress.lastEffect = null;
+      }
     }
+
+    workInProgress.deletions = null;
   } else {
     primaryChildFragment = createWorkInProgressOffscreenFiber(
       currentPrimaryChildFragment,
@@ -2982,6 +2993,15 @@ function remountFiber(
     current.nextEffect = null;
     current.flags = Deletion;
 
+    let deletions = returnFiber.deletions;
+    if (deletions === null) {
+      deletions = returnFiber.deletions = [current];
+      returnFiber.flags |= ChildDeletion;
+    } else {
+      deletions.push(current);
+    }
+    current.deletions = deletions;
+
     newWorkInProgress.flags |= Placement;
 
     // Restart work from the new fiber.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 0a7a99079c96..8206eb00f67e 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1864,9 +1864,6 @@ const HooksDispatcherOnMount: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
-if (enableCache) {
-  (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
-}
 
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 6ed0f6c8cbc5..85ddcca5f08e 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -24,7 +24,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {Deletion, Placement, Hydrating} from './ReactFiberFlags';
+import {Deletion, ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -137,6 +137,15 @@ function deleteHydratableInstance(
   } else {
     returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
+
+  let deletions = returnFiber.deletions;
+  if (deletions === null) {
+    deletions = returnFiber.deletions = [childToDelete];
+    returnFiber.flags |= ChildDeletion;
+  } else {
+    deletions.push(childToDelete);
+  }
+  childToDelete.deletions = deletions;
 }
 
 function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 5d084bf97bad..b9a5a2229899 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -24,7 +24,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {Deletion, Placement, Hydrating} from './ReactFiberFlags';
+import {Deletion, ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -137,6 +137,15 @@ function deleteHydratableInstance(
   } else {
     returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
+
+  let deletions = returnFiber.deletions;
+  if (deletions === null) {
+    deletions = returnFiber.deletions = [childToDelete];
+    returnFiber.flags |= ChildDeletion;
+  } else {
+    deletions.push(childToDelete);
+  }
+  childToDelete.deletions = deletions;
 }
 
 function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index dc1ff874b882..2db6d5e7554c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1821,6 +1821,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         // Mark the parent fiber as incomplete and clear its effect list.
         returnFiber.firstEffect = returnFiber.lastEffect = null;
         returnFiber.flags |= Incomplete;
+        returnFiber.deletions = null;
       }
     }
 
@@ -2384,7 +2385,7 @@ function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
     // bitmap value, we remove the secondary effects from the effect tag and
     // switch on that value.
     const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
-    switch (primaryFlags) {
+    outer: switch (primaryFlags) {
       case Placement: {
         commitPlacement(nextEffect);
         // Clear the "placement" from effect tag so that we know that this is
@@ -2424,7 +2425,35 @@ function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
         break;
       }
       case Deletion: {
-        commitDeletion(root, nextEffect, renderPriorityLevel);
+        // Reached a deletion effect. Instead of commit this effect like we
+        // normally do, we're going to use the `deletions` array of the parent.
+        // However, because the effect list is sorted in depth-first order, we
+        // can't wait until we reach the parent node, because the child effects
+        // will have run in the meantime.
+        //
+        // So instead, we use a trick where the first time we hit a deletion
+        // effect, we commit all the deletion effects that belong to that parent.
+        //
+        // This is an incremental step away from using the effect list and
+        // toward a DFS + subtreeFlags traversal.
+        //
+        // A reference to the deletion array of the parent is also stored on
+        // each of the deletions. This is really weird. It would be better to
+        // follow the `.return` pointer, but unfortunately we can't assume that
+        // `.return` points to the correct fiber, even in the commit phase,
+        // because `findDOMNode` might mutate it.
+        const deletedChild = nextEffect;
+        const deletions = deletedChild.deletions;
+        if (deletions !== null) {
+          for (let i = 0; i < deletions.length; i++) {
+            const deletion = deletions[i];
+            // Clear the deletion effect so that we don't delete this node more
+            // than once.
+            deletion.flags &= ~Deletion;
+            deletion.deletions = null;
+            commitDeletion(root, deletion, renderPriorityLevel);
+          }
+        }
         break;
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 57fce214dc47..72c580dcf48d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1821,6 +1821,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         // Mark the parent fiber as incomplete and clear its effect list.
         returnFiber.firstEffect = returnFiber.lastEffect = null;
         returnFiber.flags |= Incomplete;
+        returnFiber.deletions = null;
       }
     }
 
@@ -2384,7 +2385,7 @@ function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
     // bitmap value, we remove the secondary effects from the effect tag and
     // switch on that value.
     const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
-    switch (primaryFlags) {
+    outer: switch (primaryFlags) {
       case Placement: {
         commitPlacement(nextEffect);
         // Clear the "placement" from effect tag so that we know that this is
@@ -2424,7 +2425,35 @@ function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
         break;
       }
       case Deletion: {
-        commitDeletion(root, nextEffect, renderPriorityLevel);
+        // Reached a deletion effect. Instead of commit this effect like we
+        // normally do, we're going to use the `deletions` array of the parent.
+        // However, because the effect list is sorted in depth-first order, we
+        // can't wait until we reach the parent node, because the child effects
+        // will have run in the meantime.
+        //
+        // So instead, we use a trick where the first time we hit a deletion
+        // effect, we commit all the deletion effects that belong to that parent.
+        //
+        // This is an incremental step away from using the effect list and
+        // toward a DFS + subtreeFlags traversal.
+        //
+        // A reference to the deletion array of the parent is also stored on
+        // each of the deletions. This is really weird. It would be better to
+        // follow the `.return` pointer, but unfortunately we can't assume that
+        // `.return` points to the correct fiber, even in the commit phase,
+        // because `findDOMNode` might mutate it.
+        const deletedChild = nextEffect;
+        const deletions = deletedChild.deletions;
+        if (deletions !== null) {
+          for (let i = 0; i < deletions.length; i++) {
+            const deletion = deletions[i];
+            // Clear the deletion effect so that we don't delete this node more
+            // than once.
+            deletion.flags &= ~Deletion;
+            deletion.deletions = null;
+            commitDeletion(root, deletion, renderPriorityLevel);
+          }
+        }
         break;
       }
     }
@@ -2844,6 +2873,22 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
     }
     fiber = fiber.return;
   }
+
+  if (__DEV__) {
+    // TODO: Until we re-land skipUnmountedBoundaries (see #20147), this warning
+    // will fire for errors that are thrown by destroy functions inside deleted
+    // trees. What it should instead do is propagate the error to the parent of
+    // the deleted tree. In the meantime, do not add this warning to the
+    // allowlist; this is only for our internal use.
+    console.error(
+      'Internal React error: Attempted to capture a commit phase error ' +
+        'inside a detached tree. This indicates a bug in React. Likely ' +
+        '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 pingSuspendedRoot(

From b66ae09b6e9feba21aaea248da0e0c870193b597 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 17 Nov 2020 13:51:57 -0600
Subject: [PATCH 0122/1603] Track subtreeFlags et al with bubbleProperties

Original PR: #19836
---
 .../react-reconciler/src/ReactFiber.new.js    |   5 +-
 .../react-reconciler/src/ReactFiber.old.js    |   5 +-
 .../src/ReactFiberBeginWork.new.js            |   7 +
 .../src/ReactFiberBeginWork.old.js            |   7 +
 .../src/ReactFiberCompleteWork.new.js         | 223 +++++++++++++++++-
 .../src/ReactFiberCompleteWork.old.js         | 223 +++++++++++++++++-
 .../src/ReactFiberWorkLoop.new.js             |  83 +------
 .../src/ReactFiberWorkLoop.old.js             |  83 +------
 8 files changed, 458 insertions(+), 178 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index edeae5caa6fe..258183147000 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -28,7 +28,7 @@ import {
   enableFundamentalAPI,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
-import {NoFlags, Placement} from './ReactFiberFlags';
+import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
@@ -299,6 +299,9 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     }
   }
 
+  // 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;
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 8e3df44ac676..cd5a3a3649df 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -28,7 +28,7 @@ import {
   enableFundamentalAPI,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
-import {NoFlags, Placement} from './ReactFiberFlags';
+import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
@@ -299,6 +299,9 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     }
   }
 
+  // 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;
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 3ae9945a5707..3ae2541bf061 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -63,6 +63,7 @@ import {
   Deletion,
   ChildDeletion,
   ForceUpdateForLegacySuspense,
+  StaticMask,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -2092,6 +2093,12 @@ function updateSuspenseFallbackChildren(
       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) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 7cd86c488c04..ff68570676ed 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -63,6 +63,7 @@ import {
   Deletion,
   ChildDeletion,
   ForceUpdateForLegacySuspense,
+  StaticMask,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -2092,6 +2093,12 @@ function updateSuspenseFallbackChildren(
       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) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 9d91de82073c..53a328121051 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane.new';
+import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {
   ReactFundamentalComponentInstance,
   ReactScopeInstance,
@@ -57,8 +57,20 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
-import {NoMode, BlockingMode, ProfileMode} from './ReactTypeOfMode';
-import {Ref, Update, NoFlags, DidCapture, Snapshot} from './ReactFiberFlags';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  ProfileMode,
+} from './ReactTypeOfMode';
+import {
+  Ref,
+  Update,
+  NoFlags,
+  DidCapture,
+  Snapshot,
+  StaticMask,
+} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -128,9 +140,16 @@ import {
   renderHasNotSuspendedYet,
   popRenderLanes,
   getRenderTargetTime,
+  subtreeRenderLanes,
 } from './ReactFiberWorkLoop.new';
 import {createFundamentalStateInstance} from './ReactFiberFundamental.new';
-import {OffscreenLane, SomeRetryLane} from './ReactFiberLane.new';
+import {
+  OffscreenLane,
+  SomeRetryLane,
+  NoLanes,
+  includesSomeLane,
+  mergeLanes,
+} from './ReactFiberLane.new';
 import {resetChildFibers} from './ReactChildFiber.new';
 import {createScopeInstance} from './ReactFiberScope.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
@@ -640,6 +659,126 @@ function cutOffTailIfNeeded(
   }
 }
 
+function bubbleProperties(completedWork: Fiber) {
+  const didBailout =
+    completedWork.alternate !== null &&
+    completedWork.alternate.child === completedWork.child;
+
+  let newChildLanes = NoLanes;
+  let subtreeFlags = 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.
+        actualDuration += child.actualDuration;
+
+        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;
+
+        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 completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -658,12 +797,14 @@ function completeWork(
     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: {
@@ -692,6 +833,7 @@ function completeWork(
         }
       }
       updateHostContainer(workInProgress);
+      bubbleProperties(workInProgress);
       return null;
     }
     case HostComponent: {
@@ -718,6 +860,7 @@ function completeWork(
               'caused by a bug in React. Please file an issue.',
           );
           // This can happen when we abort work.
+          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -775,6 +918,7 @@ function completeWork(
           markRef(workInProgress);
         }
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case HostText: {
@@ -809,6 +953,7 @@ function completeWork(
           );
         }
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case SuspenseComponent: {
@@ -828,6 +973,20 @@ function completeWork(
             if (enableSchedulerTracing) {
               markSpawnedWork(OffscreenLane);
             }
+            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 Flow doens't support type casting in combiation with the -= operator
+                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+                  }
+                }
+              }
+            }
             return null;
           } else {
             // We should never have been in a hydration state if we didn't have a current.
@@ -844,6 +1003,20 @@ function completeWork(
             // 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 Flow doens't support type casting in combiation with the -= operator
+                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+                  }
+                }
+              }
+            }
             return null;
           }
         }
@@ -859,6 +1032,7 @@ function completeWork(
         ) {
           transferActualDuration(workInProgress);
         }
+        // Don't bubble properties in this case.
         return workInProgress;
       }
 
@@ -936,6 +1110,19 @@ function completeWork(
         // Always notify the callback
         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 Flow doens't support type casting in combiation with the -= operator
+              workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
       return null;
     }
     case HostPortal:
@@ -944,10 +1131,12 @@ function completeWork(
       if (current === null) {
         preparePortalMount(workInProgress.stateNode.containerInfo);
       }
+      bubbleProperties(workInProgress);
       return null;
     case ContextProvider:
       // Pop provider fiber
       popProvider(workInProgress);
+      bubbleProperties(workInProgress);
       return null;
     case IncompleteClassComponent: {
       // Same as class component case. I put it down here so that the tags are
@@ -956,6 +1145,7 @@ function completeWork(
       if (isLegacyContextProvider(Component)) {
         popLegacyContext(workInProgress);
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case SuspenseListComponent: {
@@ -967,6 +1157,7 @@ function completeWork(
       if (renderState === null) {
         // We're running in the default, "independent" mode.
         // We don't do anything in this mode.
+        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -1025,6 +1216,7 @@ function completeWork(
                 }
                 workInProgress.lastEffect = renderState.lastEffect;
                 // Reset the child fibers to their original state.
+                workInProgress.subtreeFlags = NoFlags;
                 resetChildFibers(workInProgress, renderLanes);
 
                 // Set up the Suspense Context to force suspense and immediately
@@ -1036,6 +1228,7 @@ function completeWork(
                     ForceSuspenseFallback,
                   ),
                 );
+                // Don't bubble properties in this case.
                 return workInProgress.child;
               }
               row = row.sibling;
@@ -1102,6 +1295,7 @@ function completeWork(
                 lastEffect.nextEffect = null;
               }
               // We're done.
+              bubbleProperties(workInProgress);
               return null;
             }
           } else if (
@@ -1177,8 +1371,10 @@ function completeWork(
         }
         pushSuspenseContext(workInProgress, suspenseContext);
         // Do a pass over the next row.
+        // Don't bubble properties in this case.
         return next;
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case FundamentalComponent: {
@@ -1206,6 +1402,7 @@ function completeWork(
           ): any): Instance);
           fundamentalInstance.instance = instance;
           if (fundamentalImpl.reconcileChildren === false) {
+            bubbleProperties(workInProgress);
             return null;
           }
           appendAllChildren(instance, workInProgress, false, false);
@@ -1228,6 +1425,7 @@ function completeWork(
             markUpdate(workInProgress);
           }
         }
+        bubbleProperties(workInProgress);
         return null;
       }
       break;
@@ -1250,6 +1448,7 @@ function completeWork(
             markRef(workInProgress);
           }
         }
+        bubbleProperties(workInProgress);
         return null;
       }
       break;
@@ -1257,12 +1456,12 @@ function completeWork(
     case OffscreenComponent:
     case LegacyHiddenComponent: {
       popRenderLanes(workInProgress);
+      const nextState: OffscreenState | null = workInProgress.memoizedState;
+      const nextIsHidden = nextState !== null;
+
       if (current !== null) {
-        const nextState: OffscreenState | null = workInProgress.memoizedState;
         const prevState: OffscreenState | null = current.memoizedState;
-
         const prevIsHidden = prevState !== null;
-        const nextIsHidden = nextState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
           newProps.mode !== 'unstable-defer-without-hiding'
@@ -1270,6 +1469,16 @@ function completeWork(
           workInProgress.flags |= Update;
         }
       }
+
+      // Don't bubble properties for hidden children.
+      if (
+        !nextIsHidden ||
+        includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) ||
+        (workInProgress.mode & ConcurrentMode) === NoMode
+      ) {
+        bubbleProperties(workInProgress);
+      }
+
       return null;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 6f1942f7b90b..8f0e68353d90 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -8,7 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane.old';
+import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {
   ReactFundamentalComponentInstance,
   ReactScopeInstance,
@@ -57,8 +57,20 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
-import {NoMode, BlockingMode, ProfileMode} from './ReactTypeOfMode';
-import {Ref, Update, NoFlags, DidCapture, Snapshot} from './ReactFiberFlags';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  ProfileMode,
+} from './ReactTypeOfMode';
+import {
+  Ref,
+  Update,
+  NoFlags,
+  DidCapture,
+  Snapshot,
+  StaticMask,
+} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -128,9 +140,16 @@ import {
   renderHasNotSuspendedYet,
   popRenderLanes,
   getRenderTargetTime,
+  subtreeRenderLanes,
 } from './ReactFiberWorkLoop.old';
 import {createFundamentalStateInstance} from './ReactFiberFundamental.old';
-import {OffscreenLane, SomeRetryLane} from './ReactFiberLane.old';
+import {
+  OffscreenLane,
+  SomeRetryLane,
+  NoLanes,
+  includesSomeLane,
+  mergeLanes,
+} from './ReactFiberLane.old';
 import {resetChildFibers} from './ReactChildFiber.old';
 import {createScopeInstance} from './ReactFiberScope.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
@@ -640,6 +659,126 @@ function cutOffTailIfNeeded(
   }
 }
 
+function bubbleProperties(completedWork: Fiber) {
+  const didBailout =
+    completedWork.alternate !== null &&
+    completedWork.alternate.child === completedWork.child;
+
+  let newChildLanes = NoLanes;
+  let subtreeFlags = 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.
+        actualDuration += child.actualDuration;
+
+        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;
+
+        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 completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -658,12 +797,14 @@ function completeWork(
     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: {
@@ -692,6 +833,7 @@ function completeWork(
         }
       }
       updateHostContainer(workInProgress);
+      bubbleProperties(workInProgress);
       return null;
     }
     case HostComponent: {
@@ -718,6 +860,7 @@ function completeWork(
               'caused by a bug in React. Please file an issue.',
           );
           // This can happen when we abort work.
+          bubbleProperties(workInProgress);
           return null;
         }
 
@@ -775,6 +918,7 @@ function completeWork(
           markRef(workInProgress);
         }
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case HostText: {
@@ -809,6 +953,7 @@ function completeWork(
           );
         }
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case SuspenseComponent: {
@@ -828,6 +973,20 @@ function completeWork(
             if (enableSchedulerTracing) {
               markSpawnedWork(OffscreenLane);
             }
+            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 Flow doens't support type casting in combiation with the -= operator
+                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+                  }
+                }
+              }
+            }
             return null;
           } else {
             // We should never have been in a hydration state if we didn't have a current.
@@ -844,6 +1003,20 @@ function completeWork(
             // 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 Flow doens't support type casting in combiation with the -= operator
+                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+                  }
+                }
+              }
+            }
             return null;
           }
         }
@@ -859,6 +1032,7 @@ function completeWork(
         ) {
           transferActualDuration(workInProgress);
         }
+        // Don't bubble properties in this case.
         return workInProgress;
       }
 
@@ -936,6 +1110,19 @@ function completeWork(
         // Always notify the callback
         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 Flow doens't support type casting in combiation with the -= operator
+              workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
       return null;
     }
     case HostPortal:
@@ -944,10 +1131,12 @@ function completeWork(
       if (current === null) {
         preparePortalMount(workInProgress.stateNode.containerInfo);
       }
+      bubbleProperties(workInProgress);
       return null;
     case ContextProvider:
       // Pop provider fiber
       popProvider(workInProgress);
+      bubbleProperties(workInProgress);
       return null;
     case IncompleteClassComponent: {
       // Same as class component case. I put it down here so that the tags are
@@ -956,6 +1145,7 @@ function completeWork(
       if (isLegacyContextProvider(Component)) {
         popLegacyContext(workInProgress);
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case SuspenseListComponent: {
@@ -967,6 +1157,7 @@ function completeWork(
       if (renderState === null) {
         // We're running in the default, "independent" mode.
         // We don't do anything in this mode.
+        bubbleProperties(workInProgress);
         return null;
       }
 
@@ -1025,6 +1216,7 @@ function completeWork(
                 }
                 workInProgress.lastEffect = renderState.lastEffect;
                 // Reset the child fibers to their original state.
+                workInProgress.subtreeFlags = NoFlags;
                 resetChildFibers(workInProgress, renderLanes);
 
                 // Set up the Suspense Context to force suspense and immediately
@@ -1036,6 +1228,7 @@ function completeWork(
                     ForceSuspenseFallback,
                   ),
                 );
+                // Don't bubble properties in this case.
                 return workInProgress.child;
               }
               row = row.sibling;
@@ -1102,6 +1295,7 @@ function completeWork(
                 lastEffect.nextEffect = null;
               }
               // We're done.
+              bubbleProperties(workInProgress);
               return null;
             }
           } else if (
@@ -1177,8 +1371,10 @@ function completeWork(
         }
         pushSuspenseContext(workInProgress, suspenseContext);
         // Do a pass over the next row.
+        // Don't bubble properties in this case.
         return next;
       }
+      bubbleProperties(workInProgress);
       return null;
     }
     case FundamentalComponent: {
@@ -1206,6 +1402,7 @@ function completeWork(
           ): any): Instance);
           fundamentalInstance.instance = instance;
           if (fundamentalImpl.reconcileChildren === false) {
+            bubbleProperties(workInProgress);
             return null;
           }
           appendAllChildren(instance, workInProgress, false, false);
@@ -1228,6 +1425,7 @@ function completeWork(
             markUpdate(workInProgress);
           }
         }
+        bubbleProperties(workInProgress);
         return null;
       }
       break;
@@ -1250,6 +1448,7 @@ function completeWork(
             markRef(workInProgress);
           }
         }
+        bubbleProperties(workInProgress);
         return null;
       }
       break;
@@ -1257,12 +1456,12 @@ function completeWork(
     case OffscreenComponent:
     case LegacyHiddenComponent: {
       popRenderLanes(workInProgress);
+      const nextState: OffscreenState | null = workInProgress.memoizedState;
+      const nextIsHidden = nextState !== null;
+
       if (current !== null) {
-        const nextState: OffscreenState | null = workInProgress.memoizedState;
         const prevState: OffscreenState | null = current.memoizedState;
-
         const prevIsHidden = prevState !== null;
-        const nextIsHidden = nextState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
           newProps.mode !== 'unstable-defer-without-hiding'
@@ -1270,6 +1469,16 @@ function completeWork(
           workInProgress.flags |= Update;
         }
       }
+
+      // Don't bubble properties for hidden children.
+      if (
+        !nextIsHidden ||
+        includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) ||
+        (workInProgress.mode & ConcurrentMode) === NoMode
+      ) {
+        bubbleProperties(workInProgress);
+      }
+
       return null;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 2db6d5e7554c..52631ef72663 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -110,8 +110,6 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  OffscreenComponent,
-  LegacyHiddenComponent,
   ScopeComponent,
   Profiler,
 } from './ReactWorkTags';
@@ -144,7 +142,6 @@ import {
   NoLane,
   SyncLane,
   SyncBatchedLane,
-  OffscreenLane,
   NoTimestamp,
   findUpdateLane,
   findTransitionLane,
@@ -285,7 +282,7 @@ let workInProgressRootRenderLanes: Lanes = NoLanes;
 //
 // Most things in the work loop should deal with workInProgressRootRenderLanes.
 // Most things in begin/complete phases should deal with subtreeRenderLanes.
-let subtreeRenderLanes: Lanes = NoLanes;
+export let subtreeRenderLanes: Lanes = NoLanes;
 const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
 
 // Whether to root completed, errored, suspended, etc.
@@ -1742,8 +1739,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         return;
       }
 
-      resetChildLanes(completedWork);
-
       if (
         returnFiber !== null &&
         // Do not append effects to parents if a sibling failed to complete
@@ -1821,6 +1816,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         // Mark the parent fiber as incomplete and clear its effect list.
         returnFiber.firstEffect = returnFiber.lastEffect = null;
         returnFiber.flags |= Incomplete;
+        returnFiber.subtreeFlags = NoFlags;
         returnFiber.deletions = null;
       }
     }
@@ -1843,81 +1839,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
-function resetChildLanes(completedWork: Fiber) {
-  if (
-    // TODO: Move this check out of the hot path by moving `resetChildLanes`
-    // to switch statement in `completeWork`.
-    (completedWork.tag === LegacyHiddenComponent ||
-      completedWork.tag === OffscreenComponent) &&
-    completedWork.memoizedState !== null &&
-    !includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) &&
-    (completedWork.mode & ConcurrentMode) !== NoLanes
-  ) {
-    // The children of this component are hidden. Don't bubble their
-    // expiration times.
-    return;
-  }
-
-  let newChildLanes = NoLanes;
-
-  // 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);
-
-    // 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.
-    const shouldBubbleActualDurations =
-      completedWork.alternate === null ||
-      completedWork.child !== completedWork.alternate.child;
-
-    let child = completedWork.child;
-    while (child !== null) {
-      newChildLanes = mergeLanes(
-        newChildLanes,
-        mergeLanes(child.lanes, child.childLanes),
-      );
-      if (shouldBubbleActualDurations) {
-        actualDuration += child.actualDuration;
-      }
-      treeBaseDuration += child.treeBaseDuration;
-      child = child.sibling;
-    }
-
-    const isTimedOutSuspense =
-      completedWork.tag === SuspenseComponent &&
-      completedWork.memoizedState !== null;
-    if (isTimedOutSuspense) {
-      // Don't count time spent in a timed out Suspense subtree as part of the base duration.
-      const primaryChildFragment = completedWork.child;
-      if (primaryChildFragment !== null) {
-        treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-      }
-    }
-
-    completedWork.actualDuration = actualDuration;
-    completedWork.treeBaseDuration = treeBaseDuration;
-  } else {
-    let child = completedWork.child;
-    while (child !== null) {
-      newChildLanes = mergeLanes(
-        newChildLanes,
-        mergeLanes(child.lanes, child.childLanes),
-      );
-      child = child.sibling;
-    }
-  }
-
-  completedWork.childLanes = newChildLanes;
-}
-
 function commitRoot(root) {
   const renderPriorityLevel = getCurrentPriorityLevel();
   runWithPriority(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 72c580dcf48d..6e97ab4a3351 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -110,8 +110,6 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  OffscreenComponent,
-  LegacyHiddenComponent,
   ScopeComponent,
   Profiler,
 } from './ReactWorkTags';
@@ -144,7 +142,6 @@ import {
   NoLane,
   SyncLane,
   SyncBatchedLane,
-  OffscreenLane,
   NoTimestamp,
   findUpdateLane,
   findTransitionLane,
@@ -285,7 +282,7 @@ let workInProgressRootRenderLanes: Lanes = NoLanes;
 //
 // Most things in the work loop should deal with workInProgressRootRenderLanes.
 // Most things in begin/complete phases should deal with subtreeRenderLanes.
-let subtreeRenderLanes: Lanes = NoLanes;
+export let subtreeRenderLanes: Lanes = NoLanes;
 const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
 
 // Whether to root completed, errored, suspended, etc.
@@ -1742,8 +1739,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         return;
       }
 
-      resetChildLanes(completedWork);
-
       if (
         returnFiber !== null &&
         // Do not append effects to parents if a sibling failed to complete
@@ -1821,6 +1816,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         // Mark the parent fiber as incomplete and clear its effect list.
         returnFiber.firstEffect = returnFiber.lastEffect = null;
         returnFiber.flags |= Incomplete;
+        returnFiber.subtreeFlags = NoFlags;
         returnFiber.deletions = null;
       }
     }
@@ -1843,81 +1839,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
-function resetChildLanes(completedWork: Fiber) {
-  if (
-    // TODO: Move this check out of the hot path by moving `resetChildLanes`
-    // to switch statement in `completeWork`.
-    (completedWork.tag === LegacyHiddenComponent ||
-      completedWork.tag === OffscreenComponent) &&
-    completedWork.memoizedState !== null &&
-    !includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) &&
-    (completedWork.mode & ConcurrentMode) !== NoLanes
-  ) {
-    // The children of this component are hidden. Don't bubble their
-    // expiration times.
-    return;
-  }
-
-  let newChildLanes = NoLanes;
-
-  // 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);
-
-    // 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.
-    const shouldBubbleActualDurations =
-      completedWork.alternate === null ||
-      completedWork.child !== completedWork.alternate.child;
-
-    let child = completedWork.child;
-    while (child !== null) {
-      newChildLanes = mergeLanes(
-        newChildLanes,
-        mergeLanes(child.lanes, child.childLanes),
-      );
-      if (shouldBubbleActualDurations) {
-        actualDuration += child.actualDuration;
-      }
-      treeBaseDuration += child.treeBaseDuration;
-      child = child.sibling;
-    }
-
-    const isTimedOutSuspense =
-      completedWork.tag === SuspenseComponent &&
-      completedWork.memoizedState !== null;
-    if (isTimedOutSuspense) {
-      // Don't count time spent in a timed out Suspense subtree as part of the base duration.
-      const primaryChildFragment = completedWork.child;
-      if (primaryChildFragment !== null) {
-        treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-      }
-    }
-
-    completedWork.actualDuration = actualDuration;
-    completedWork.treeBaseDuration = treeBaseDuration;
-  } else {
-    let child = completedWork.child;
-    while (child !== null) {
-      newChildLanes = mergeLanes(
-        newChildLanes,
-        mergeLanes(child.lanes, child.childLanes),
-      );
-      child = child.sibling;
-    }
-  }
-
-  completedWork.childLanes = newChildLanes;
-}
-
 function commitRoot(root) {
   const renderPriorityLevel = getCurrentPriorityLevel();
   runWithPriority(

From 0512cd6a261eb738059aac4769ea31e66aab2065 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 8 Dec 2020 01:23:49 +0000
Subject: [PATCH 0123/1603] Bump fixture dependency versions (#20397)

* Bump all versions

* Switch to CJS mode

* Revert "Switch to CJS mode"

This reverts commit b3c4fd92dcef6ecb4116fc66f674ae88aad3c582.

* Fix ES mode

* Add nodemon to restart the server on edits

* Ignore /server/ from compilation
---
 fixtures/flight/.gitignore                    |    1 +
 fixtures/flight/config/env.js                 |   21 +-
 fixtures/flight/config/getHttpsConfig.js      |   66 +
 fixtures/flight/config/jest/cssTransform.js   |    2 +-
 fixtures/flight/config/jest/fileTransform.js  |    2 +-
 fixtures/flight/config/modules.js             |   13 +-
 fixtures/flight/config/paths.js               |   35 +-
 fixtures/flight/config/webpack.config.js      |  302 +-
 .../flight/config/webpackDevServer.config.js  |   58 +-
 fixtures/flight/package.json                  |  128 +-
 fixtures/flight/scripts/build.js              |   43 +-
 fixtures/flight/scripts/start.js              |   37 +-
 fixtures/flight/server/cli.server.js          |   21 +-
 fixtures/flight/server/handler.server.js      |   10 +-
 fixtures/flight/yarn.lock                     | 8435 +++++++++++------
 15 files changed, 5861 insertions(+), 3313 deletions(-)
 create mode 100644 fixtures/flight/config/getHttpsConfig.js

diff --git a/fixtures/flight/.gitignore b/fixtures/flight/.gitignore
index 800f3a80c348..0852d35565e8 100644
--- a/fixtures/flight/.gitignore
+++ b/fixtures/flight/.gitignore
@@ -11,6 +11,7 @@
 # production
 /build
 /dist
+.eslintcache
 
 # misc
 .DS_Store
diff --git a/fixtures/flight/config/env.js b/fixtures/flight/config/env.js
index 940be1eb1159..56ac7fbd0e75 100644
--- a/fixtures/flight/config/env.js
+++ b/fixtures/flight/config/env.js
@@ -17,11 +17,11 @@ if (!NODE_ENV) {
 // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
 const dotenvFiles = [
   `${paths.dotenv}.${NODE_ENV}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
   // 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);
 
@@ -46,7 +46,7 @@ dotenvFiles.forEach(dotenvFile => {
 // 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.
+// 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());
@@ -57,7 +57,7 @@ process.env.NODE_PATH = (process.env.NODE_PATH || '')
   .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.
+// injected into the application via DefinePlugin in webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
@@ -77,9 +77,22 @@ function getClientEnvironment(publicUrl) {
         // 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.
+        // react-refresh is not 100% stable at this time,
+        // which is why it's disabled by default.
+        // 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
+  // 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]);
diff --git a/fixtures/flight/config/getHttpsConfig.js b/fixtures/flight/config/getHttpsConfig.js
new file mode 100644
index 000000000000..2120a07ec331
--- /dev/null
+++ b/fixtures/flight/config/getHttpsConfig.js
@@ -0,0 +1,66 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({cert, key, keyFile, crtFile}) {
+  let encrypted;
+  try {
+    // publicEncrypt will throw an error with an invalid cert
+    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+  } catch (err) {
+    throw new Error(
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+    );
+  }
+
+  try {
+    // privateDecrypt will throw an error with an invalid key
+    crypto.privateDecrypt(key, encrypted);
+  } catch (err) {
+    throw new Error(
+      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+        err.message
+      }`
+    );
+  }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+  if (!fs.existsSync(file)) {
+    throw new Error(
+      `You specified ${chalk.cyan(
+        type
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+    );
+  }
+  return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+  const {SSL_CRT_FILE, SSL_KEY_FILE, HTTPS} = process.env;
+  const isHttps = HTTPS === 'true';
+
+  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+    const config = {
+      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+    };
+
+    validateKeyAndCerts({...config, keyFile, crtFile});
+    return config;
+  }
+  return isHttps;
+}
+
+module.exports = getHttpsConfig;
diff --git a/fixtures/flight/config/jest/cssTransform.js b/fixtures/flight/config/jest/cssTransform.js
index 35fe644d7e03..8f65114812a4 100644
--- a/fixtures/flight/config/jest/cssTransform.js
+++ b/fixtures/flight/config/jest/cssTransform.js
@@ -1,7 +1,7 @@
 'use strict';
 
 // This is a custom Jest transformer turning style imports into empty objects.
-// https://jestjs.io/docs/en/webpack.html
+// http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
   process() {
diff --git a/fixtures/flight/config/jest/fileTransform.js b/fixtures/flight/config/jest/fileTransform.js
index 3ce5e04c6e43..aab67618c38b 100644
--- a/fixtures/flight/config/jest/fileTransform.js
+++ b/fixtures/flight/config/jest/fileTransform.js
@@ -4,7 +4,7 @@ const path = require('path');
 const camelcase = require('camelcase');
 
 // This is a custom Jest transformer turning file imports into filenames.
-// https://jestjs.io/docs/en/webpack.html
+// http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
   process(src, filename) {
diff --git a/fixtures/flight/config/modules.js b/fixtures/flight/config/modules.js
index c84210a8f4fe..d63e41d78dc7 100644
--- a/fixtures/flight/config/modules.js
+++ b/fixtures/flight/config/modules.js
@@ -14,15 +14,8 @@ const resolve = require('resolve');
 function getAdditionalModulePaths(options = {}) {
   const baseUrl = options.baseUrl;
 
-  // We need to explicitly check for null and undefined (and not a falsy value) because
-  // TypeScript treats an empty string as `.`.
-  if (baseUrl == null) {
-    // If there's no baseUrl set we respect NODE_PATH
-    // Note that NODE_PATH is deprecated and will be removed
-    // in the next major release of create-react-app.
-
-    const nodePath = process.env.NODE_PATH || '';
-    return nodePath.split(path.delimiter).filter(Boolean);
+  if (!baseUrl) {
+    return '';
   }
 
   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
@@ -93,7 +86,7 @@ function getJestAliases(options = {}) {
 
   if (path.relative(paths.appPath, baseUrlResolved) === '') {
     return {
-      'src/(.*)$': '<rootDir>/src/$1',
+      '^src/(.*)$': '<rootDir>/src/$1',
     };
   }
 }
diff --git a/fixtures/flight/config/paths.js b/fixtures/flight/config/paths.js
index df5eb072bbd4..20c5e1201803 100644
--- a/fixtures/flight/config/paths.js
+++ b/fixtures/flight/config/paths.js
@@ -2,41 +2,24 @@
 
 const path = require('path');
 const fs = require('fs');
-const url = require('url');
+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);
 
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(inputPath, needsSlash) {
-  const hasSlash = inputPath.endsWith('/');
-  if (hasSlash && !needsSlash) {
-    return inputPath.substr(0, inputPath.length - 1);
-  } else if (!hasSlash && needsSlash) {
-    return `${inputPath}/`;
-  } else {
-    return inputPath;
-  }
-}
-
-const getPublicUrl = appPackageJson =>
-  envPublicUrl || require(appPackageJson).homepage;
-
 // 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
+// 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.
-function getServedPath(appPackageJson) {
-  const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl =
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
-  return ensureSlash(servedUrl, true);
-}
+const publicUrlOrPath = getPublicUrlOrPath(
+  process.env.NODE_ENV === 'development',
+  require(resolveApp('package.json')).homepage,
+  process.env.PUBLIC_URL
+);
 
 const moduleFileExtensions = [
   'web.mjs',
@@ -81,8 +64,8 @@ module.exports = {
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
-  publicUrl: getPublicUrl(resolveApp('package.json')),
-  servedPath: getServedPath(resolveApp('package.json')),
+  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
index 1912d148d775..37037c207b4c 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -5,7 +5,6 @@ const ReactFlightWebpackPlugin = require('react-transport-dom-webpack/plugin');
 // Fork End
 
 const fs = require('fs');
-const isWsl = require('is-wsl');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
@@ -23,13 +22,14 @@ const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+const ESLintPlugin = require('eslint-webpack-plugin');
 const paths = require('./paths');
 const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-const eslint = require('eslint');
+const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const postcssNormalize = require('postcss-normalize');
 
@@ -37,6 +37,14 @@ const appPackageJson = require(paths.appPackageJson);
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
+
+const webpackDevClientEntry = require.resolve(
+  'react-dev-utils/webpackHotDevClient'
+);
+const reactRefreshOverlayEntry = require.resolve(
+  'react-dev-utils/refreshOverlayInterop'
+);
+
 // 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';
@@ -48,12 +56,28 @@ const imageInlineSizeLimit = parseInt(
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);
 
+// 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) {
@@ -65,24 +89,13 @@ module.exports = function(webpackEnv) {
   const isEnvProductionProfile =
     isEnvProduction && process.argv.includes('--profile');
 
-  // 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.
-  // In development, we always serve from the root. This makes config easier.
-  const publicPath = isEnvProduction
-    ? paths.servedPath
-    : isEnvDevelopment && '/';
-  // Some apps do not use client-side routing with pushState.
-  // For these, "homepage" can be set to "." to enable relative asset paths.
-  const shouldUseRelativeAssetPaths = publicPath === './';
-
-  // `publicUrl` is just like `publicPath`, but we will provide it to our app
+  // 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.
-  const publicUrl = isEnvProduction
-    ? publicPath.slice(0, -1)
-    : isEnvDevelopment && '';
   // Get environment variables to inject into our app.
-  const env = getClientEnvironment(publicUrl);
+  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+  const shouldUseReactRefresh = env.raw.FAST_REFRESH;
 
   // common function to get style loaders
   const getStyleLoaders = (cssOptions, preProcessor) => {
@@ -90,7 +103,11 @@ module.exports = function(webpackEnv) {
       isEnvDevelopment && require.resolve('style-loader'),
       isEnvProduction && {
         loader: MiniCssExtractPlugin.loader,
-        options: shouldUseRelativeAssetPaths ? {publicPath: '../../'} : {},
+        // 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'),
@@ -118,7 +135,7 @@ module.exports = function(webpackEnv) {
             // which in turn let's users customize the target behavior as per their needs.
             postcssNormalize(),
           ],
-          sourceMap: isEnvProduction && shouldUseSourceMap,
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
         },
       },
     ].filter(Boolean);
@@ -127,7 +144,8 @@ module.exports = function(webpackEnv) {
         {
           loader: require.resolve('resolve-url-loader'),
           options: {
-            sourceMap: isEnvProduction && shouldUseSourceMap,
+            sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
+            root: paths.appSrc,
           },
         },
         {
@@ -152,25 +170,31 @@ module.exports = function(webpackEnv) {
       : isEnvDevelopment && 'cheap-module-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: [
-      // Include an alternative client for WebpackDevServer. A client's job is to
-      // connect to WebpackDevServer by a socket and get notified about changes.
-      // When you save a file, the client will either apply hot updates (in case
-      // of CSS changes), or refresh the page (in case of JS changes). When you
-      // make a syntax error, this client will display a syntax error overlay.
-      // Note: instead of the default WebpackDevServer client, we use a custom one
-      // to bring better experience for Create React App users. You can replace
-      // the line below with these two lines if you prefer the stock client:
-      // require.resolve('webpack-dev-server/client') + '?/',
-      // require.resolve('webpack/hot/dev-server'),
-      isEnvDevelopment &&
-        require.resolve('react-dev-utils/webpackHotDevClient'),
-      // Finally, this is your app's code:
-      paths.appIndexJs,
-      // We include the app code last so that if there is a runtime error during
-      // initialization, it doesn't blow up the WebpackDevServer client, and
-      // changing JS code would still trigger a refresh.
-    ].filter(Boolean),
+    entry:
+      isEnvDevelopment && !shouldUseReactRefresh
+        ? [
+            // Include an alternative client for WebpackDevServer. A client's job is to
+            // connect to WebpackDevServer by a socket and get notified about changes.
+            // When you save a file, the client will either apply hot updates (in case
+            // of CSS changes), or refresh the page (in case of JS changes). When you
+            // make a syntax error, this client will display a syntax error overlay.
+            // Note: instead of the default WebpackDevServer client, we use a custom one
+            // to bring better experience for Create React App users. You can replace
+            // the line below with these two lines if you prefer the stock client:
+            //
+            // require.resolve('webpack-dev-server/client') + '?/',
+            // require.resolve('webpack/hot/dev-server'),
+            //
+            // When using the experimental react-refresh integration,
+            // the webpack plugin takes care of injecting the dev client for us.
+            webpackDevClientEntry,
+            // Finally, this is your app's code:
+            paths.appIndexJs,
+            // We include the app code last so that if there is a runtime error during
+            // initialization, it doesn't blow up the WebpackDevServer client, and
+            // changing JS code would still trigger a refresh.
+          ]
+        : paths.appIndexJs,
     output: {
       // The build folder.
       path: isEnvProduction ? paths.appBuild : undefined,
@@ -187,9 +211,10 @@ module.exports = function(webpackEnv) {
       chunkFilename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].chunk.js'
         : isEnvDevelopment && 'static/js/[name].chunk.js',
+      // 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.
-      // We use "/" in development.
-      publicPath: publicPath,
+      publicPath: paths.publicUrlOrPath,
       // Point sourcemap entries to original disk location (format as URL on Windows)
       devtoolModuleFilenameTemplate: isEnvProduction
         ? info =>
@@ -198,7 +223,7 @@ module.exports = function(webpackEnv) {
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple Webpack runtimes (from different apps)
+      // Prevents conflicts when multiple webpack runtimes (from different apps)
       // are used on the same page.
       jsonpFunction: `webpackJsonp${appPackageJson.name}`,
       // this defaults to 'window', but by setting it to 'this' then
@@ -247,13 +272,6 @@ module.exports = function(webpackEnv) {
               ascii_only: true,
             },
           },
-          // Use multi-process parallel running to improve the build speed
-          // Default number of concurrent runs: os.cpus().length - 1
-          // Disabled on WSL (Windows Subsystem for Linux) due to an issue with Terser
-          // https://github.com/webpack-contrib/terser-webpack-plugin/issues/21
-          parallel: !isWsl,
-          // Enable file caching
-          cache: true,
           sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
@@ -271,6 +289,9 @@ module.exports = function(webpackEnv) {
                 }
               : false,
           },
+          cssProcessorPluginOptions: {
+            preset: ['default', {minifyFontValues: {removeQuotes: false}}],
+          },
         }),
       ],
       // Automatically split vendor and commons
@@ -288,7 +309,7 @@ module.exports = function(webpackEnv) {
       },
     },
     resolve: {
-      // This allows you to set a fallback for where Webpack should look for modules.
+      // 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
@@ -324,12 +345,15 @@ module.exports = function(webpackEnv) {
         // 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]),
+        new ModuleScopePlugin(paths.appSrc, [
+          paths.appPackageJson,
+          reactRefreshOverlayEntry,
+        ]),
       ],
     },
     resolveLoader: {
       plugins: [
-        // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
+        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
         // from the current package.
         PnpWebpackPlugin.moduleLoader(module),
       ],
@@ -339,30 +363,22 @@ module.exports = function(webpackEnv) {
       rules: [
         // Disable require.ensure as it's not a standard language feature.
         {parser: {requireEnsure: false}},
-
-        // First, run the linter.
-        // It's important to do this before Babel processes the JS.
-        {
-          test: /\.(js|mjs|jsx|ts|tsx)$/,
-          enforce: 'pre',
-          use: [
-            {
-              options: {
-                cache: true,
-                formatter: require.resolve('react-dev-utils/eslintFormatter'),
-                eslintPath: require.resolve('eslint'),
-                resolvePluginsRelativeTo: __dirname,
-              },
-              loader: require.resolve('eslint-loader'),
-            },
-          ],
-          include: paths.appSrc,
-        },
         {
           // "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$/],
+              loader: require.resolve('url-loader'),
+              options: {
+                limit: imageInlineSizeLimit,
+                mimetype: 'image/avif',
+                name: 'static/media/[name].[hash:8].[ext]',
+              },
+            },
             // "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.
@@ -384,6 +400,14 @@ module.exports = function(webpackEnv) {
                 customize: require.resolve(
                   'babel-preset-react-app/webpack-overrides'
                 ),
+                presets: [
+                  [
+                    require.resolve('babel-preset-react-app'),
+                    {
+                      runtime: hasJsxRuntime ? 'automatic' : 'classic',
+                    },
+                  ],
+                ],
 
                 plugins: [
                   [
@@ -397,7 +421,10 @@ module.exports = function(webpackEnv) {
                       },
                     },
                   ],
-                ],
+                  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.
@@ -427,11 +454,11 @@ module.exports = function(webpackEnv) {
                 // See #6846 for context on why cacheCompression is disabled
                 cacheCompression: false,
 
-                // If an error happens in a package, it's possible to be
-                // because it was compiled. Thus, we don't want the browser
-                // debugger to show the original code. Instead, the code
-                // being evaluated would be much more helpful.
-                sourceMaps: 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.
@@ -446,7 +473,9 @@ module.exports = function(webpackEnv) {
               exclude: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
               }),
               // Don't consider CSS imports dead code even if the
               // containing package claims to have no side effects.
@@ -460,9 +489,12 @@ module.exports = function(webpackEnv) {
               test: cssModuleRegex,
               use: getStyleLoaders({
                 importLoaders: 1,
-                sourceMap: isEnvProduction && shouldUseSourceMap,
-                modules: true,
-                getLocalIdent: getCSSModuleLocalIdent,
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                modules: {
+                  getLocalIdent: getCSSModuleLocalIdent,
+                },
               }),
             },
             // Opt-in support for SASS (using .scss or .sass extensions).
@@ -473,8 +505,10 @@ module.exports = function(webpackEnv) {
               exclude: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
                 },
                 'sass-loader'
               ),
@@ -490,10 +524,13 @@ module.exports = function(webpackEnv) {
               test: sassModuleRegex,
               use: getStyleLoaders(
                 {
-                  importLoaders: 2,
-                  sourceMap: isEnvProduction && shouldUseSourceMap,
-                  modules: true,
-                  getLocalIdent: getCSSModuleLocalIdent,
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  modules: {
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
                 },
                 'sass-loader'
               ),
@@ -556,9 +593,8 @@ module.exports = function(webpackEnv) {
       // Makes some environment variables available in index.html.
       // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
       // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-      // In production, it will be an empty string unless you specify "homepage"
+      // It will be an empty string unless you specify "homepage"
       // in `package.json`, in which case it will be the pathname of that URL.
-      // In development, this will be an empty string.
       new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
       // This gives some necessary context to module not found errors, such as
       // the requesting resource.
@@ -569,14 +605,29 @@ module.exports = function(webpackEnv) {
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (currently CSS only):
+      // This is necessary to emit hot updates (CSS and Fast Refresh):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
+      // Experimental hot reloading for React .
+      // https://github.com/facebook/react/tree/master/packages/react-refresh
+      isEnvDevelopment &&
+        shouldUseReactRefresh &&
+        new ReactRefreshWebpackPlugin({
+          overlay: {
+            entry: webpackDevClientEntry,
+            // The expected exports are slightly different from what the overlay exports,
+            // so an interop is included here to enable feedback on module-level errors.
+            module: reactRefreshOverlayEntry,
+            // Since we ship a custom dev client and overlay integration,
+            // the bundled socket handling logic can be eliminated.
+            sockIntegration: 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(),
       // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for Webpack to discover it. This plugin
+      // to restart the development server for webpack to discover it. This plugin
       // makes the discovery automatic so you don't have to restart.
       // See https://github.com/facebook/create-react-app/issues/186
       isEnvDevelopment &&
@@ -596,7 +647,7 @@ module.exports = function(webpackEnv) {
       //   can be used to reconstruct the HTML if necessary
       new ManifestPlugin({
         fileName: 'asset-manifest.json',
-        publicPath: publicPath,
+        publicPath: paths.publicUrlOrPath,
         generate: (seed, files, entrypoints) => {
           const manifestFiles = files.reduce((manifest, file) => {
             manifest[file.name] = file.path;
@@ -613,28 +664,23 @@ module.exports = function(webpackEnv) {
         },
       }),
       // 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
+      // 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(/^\.\/locale$/, /moment$/),
       // Generate a service worker script that will precache, and keep up to date,
-      // the HTML & assets that are part of the Webpack build.
+      // the HTML & assets that are part of the webpack build.
       isEnvProduction &&
-        new WorkboxWebpackPlugin.GenerateSW({
-          clientsClaim: true,
-          exclude: [/\.map$/, /asset-manifest\.json$/],
-          importWorkboxFrom: 'cdn',
-          navigateFallback: publicUrl + '/index.html',
-          navigateFallbackBlacklist: [
-            // Exclude URLs starting with /_, as they're likely an API call
-            new RegExp('^/_'),
-            // Exclude any URLs whose last part seems to be a file extension
-            // as they're likely a resource and not a SPA route.
-            // URLs containing a "?" character won't be blacklisted as they're likely
-            // a route with query params (e.g. auth callbacks).
-            new RegExp('/[^/?]+\\.[^/]+$'),
-          ],
+        fs.existsSync(swSrc) &&
+        new WorkboxWebpackPlugin.InjectManifest({
+          swSrc,
+          dontCacheBustURLsMatching: /\.[0-9a-f]{8}\./,
+          exclude: [/\.map$/, /asset-manifest\.json$/, /LICENSE/],
+          // Bump up the default maximum size (2mb) that's precached,
+          // to make lazy-loading failure scenarios less likely.
+          // See https://github.com/cra-template/pwa/issues/13#issuecomment-722667270
+          maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,
         }),
       // TypeScript type checking
       useTypeScript &&
@@ -643,7 +689,6 @@ module.exports = function(webpackEnv) {
             basedir: paths.appNodeModules,
           }),
           async: isEnvDevelopment,
-          useTypescriptIncrementalApi: true,
           checkSyntacticErrors: true,
           resolveModuleNameModule: process.versions.pnp
             ? `${__dirname}/pnpTs.js`
@@ -653,9 +698,14 @@ module.exports = function(webpackEnv) {
             : undefined,
           tsconfig: paths.appTsConfig,
           reportFiles: [
-            '**',
-            '!**/__tests__/**',
-            '!**/?(*.)(spec|test).*',
+            // This one is specifically to match during CI tests,
+            // as micromatch doesn't match
+            // '../cra-template-typescript/template/src/App.tsx'
+            // otherwise.
+            '../**/src/**/*.{ts,tsx}',
+            '**/src/**/*.{ts,tsx}',
+            '!**/src/**/__tests__/**',
+            '!**/src/**/?(*.)(spec|test).*',
             '!**/src/setupProxy.*',
             '!**/src/setupTests.*',
           ],
@@ -663,19 +713,31 @@ module.exports = function(webpackEnv) {
           // The formatter is invoked directly in WebpackDevServerUtils during development
           formatter: isEnvProduction ? typescriptFormatter : undefined,
         }),
-      // Fork Start
-      new ReactFlightWebpackPlugin({
-        isServer: false,
-        clientReferences: {
-          directory: './src/',
-          recursive: true,
-          include: /\.client\.js$/,
+      new ESLintPlugin({
+        // Plugin options
+        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+        formatter: require.resolve('react-dev-utils/eslintFormatter'),
+        eslintPath: require.resolve('eslint'),
+        context: paths.appSrc,
+        cache: true,
+        // ESLint class options
+        cwd: paths.appPath,
+        resolvePluginsRelativeTo: __dirname,
+        baseConfig: {
+          extends: [require.resolve('eslint-config-react-app/base')],
+          rules: {
+            ...(!hasJsxRuntime && {
+              'react/react-in-jsx-scope': 'error',
+            }),
+          },
         },
       }),
+      // Fork Start
+      new ReactFlightWebpackPlugin({isServer: false}),
       // Fork End
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.
-    // Tell Webpack to provide empty mocks for them so importing them works.
+    // Tell webpack to provide empty mocks for them so importing them works.
     node: {
       module: 'empty',
       dgram: 'empty',
diff --git a/fixtures/flight/config/webpackDevServer.config.js b/fixtures/flight/config/webpackDevServer.config.js
index 240881e9f586..9892bec9488c 100644
--- a/fixtures/flight/config/webpackDevServer.config.js
+++ b/fixtures/flight/config/webpackDevServer.config.js
@@ -1,14 +1,18 @@
 'use strict';
 
+const fs = require('fs');
 const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
+const redirectServedPath = require('react-dev-utils/redirectServedPathMiddleware');
 const paths = require('./paths');
-const fs = require('fs');
+const getHttpsConfig = require('./getHttpsConfig');
 
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 const host = process.env.HOST || '0.0.0.0';
+const sockHost = process.env.WDS_SOCKET_HOST;
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function(proxy, allowedHost) {
   return {
@@ -47,20 +51,35 @@ module.exports = function(proxy, allowedHost) {
     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
     // Note that we only recommend to use `public` folder as an escape hatch
     // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through Webpack. If you just want to
+    // for some reason broken when imported through webpack. If you just want to
     // use an image, put it in `src` and `import` it from JavaScript instead.
     contentBase: paths.appPublic,
+    contentBasePublicPath: paths.publicUrlOrPath,
     // By default files from `contentBase` will not trigger a page reload.
     watchContentBase: true,
-    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
+    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
     // for the WebpackDevServer client so it can learn when the files were
     // updated. The WebpackDevServer client is included as an entry point
-    // in the Webpack development configuration. Note that only changes
+    // in the webpack development configuration. Note that only changes
     // to CSS are currently hot reloaded. JS changes will refresh the browser.
     hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: '/',
+    // Use 'ws' instead of 'sockjs-node' on server since we're using native
+    // websockets in `webpackHotDevClient`.
+    transportMode: 'ws',
+    // Prevent a WS client from getting injected as we're already including
+    // `webpackHotDevClient`.
+    injectClient: false,
+    // Enable custom sockjs pathname for websocket connection to hot reloading server.
+    // Enable custom sockjs hostname, pathname and port for websocket connection
+    // to hot reloading server.
+    sockHost,
+    sockPath,
+    sockPort,
+    // It is important to tell WebpackDevServer to use the same "publicPath" path as
+    // we specified in the webpack config. When homepage is '.', default to serving
+    // from the root.
+    // remove last slash so user can land on `/test` instead of `/test/`
+    publicPath: paths.publicUrlOrPath.slice(0, -1),
     // WebpackDevServer is noisy by default so we emit custom message instead
     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
     quiet: true,
@@ -71,34 +90,41 @@ module.exports = function(proxy, allowedHost) {
     watchOptions: {
       ignored: ignoredFiles(paths.appSrc),
     },
-    // Enable HTTPS if the HTTPS environment variable is set to 'true'
-    https: protocol === 'https',
+    https: getHttpsConfig(),
     host,
     overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
+      index: paths.publicUrlOrPath,
     },
     public: allowedHost,
+    // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
     before(app, server) {
-      if (fs.existsSync(paths.proxySetup)) {
-        // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
-      }
-
+      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
+      // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
       app.use(evalSourceMapMiddleware(server));
       // This lets us open files from the runtime error overlay.
       app.use(errorOverlayMiddleware());
 
+      if (fs.existsSync(paths.proxySetup)) {
+        // This registers user provided middleware for proxy reasons
+        require(paths.proxySetup)(app);
+      }
+    },
+    after(app) {
+      // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
+      app.use(redirectServedPath(paths.publicUrlOrPath));
+
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
+      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
   };
 };
diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
index 551d810d5773..27cf494b00d2 100644
--- a/fixtures/flight/package.json
+++ b/fixtures/flight/package.json
@@ -4,70 +4,76 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "7.6.0",
+    "@babel/core": "7.12.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/register": "^7.7.0",
-    "@svgr/webpack": "4.3.2",
-    "@typescript-eslint/eslint-plugin": "^2.2.0",
-    "@typescript-eslint/parser": "^2.2.0",
-    "babel-eslint": "10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-named-asset-import": "^0.3.4",
-    "babel-preset-react-app": "^9.0.2",
-    "camelcase": "^5.2.0",
-    "case-sensitive-paths-webpack-plugin": "2.2.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
+    "@svgr/webpack": "5.4.0",
+    "@typescript-eslint/eslint-plugin": "^4.5.0",
+    "@typescript-eslint/parser": "^4.5.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^26.6.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-named-asset-import": "^0.3.7",
+    "babel-preset-react-app": "^10.0.0",
+    "bfj": "^7.0.2",
+    "camelcase": "^6.1.0",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
     "concurrently": "^5.0.0",
-    "css-loader": "2.1.1",
-    "dotenv": "6.2.0",
+    "css-loader": "4.3.0",
+    "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
-    "eslint": "^6.1.0",
-    "eslint-config-react-app": "^5.0.2",
-    "eslint-loader": "3.0.2",
-    "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "2.18.2",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.14.3",
-    "eslint-plugin-react-hooks": "^1.6.1",
+    "eslint": "^7.11.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^5.2.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.0",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-testing-library": "^3.9.2",
+    "eslint-webpack-plugin": "^2.1.0",
     "express": "^4.17.1",
-    "file-loader": "3.0.1",
-    "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-beta.5",
+    "file-loader": "6.1.1",
+    "fs-extra": "^9.0.1",
+    "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
-    "is-wsl": "^1.1.0",
-    "jest": "24.9.0",
-    "jest-environment-jsdom-fourteen": "0.1.0",
-    "jest-resolve": "24.9.0",
-    "jest-watch-typeahead": "0.4.0",
-    "mini-css-extract-plugin": "0.8.0",
-    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "pnp-webpack-plugin": "1.5.0",
-    "postcss-flexbugs-fixes": "4.1.0",
+    "jest": "26.6.0",
+    "jest-circus": "26.6.0",
+    "jest-resolve": "26.6.0",
+    "jest-watch-typeahead": "0.6.1",
+    "mini-css-extract-plugin": "0.11.3",
+    "nodemon": "^2.0.6",
+    "optimize-css-assets-webpack-plugin": "5.0.4",
+    "pnp-webpack-plugin": "1.6.4",
+    "postcss-flexbugs-fixes": "4.2.1",
     "postcss-loader": "3.0.0",
-    "postcss-normalize": "7.0.1",
+    "postcss-normalize": "8.0.1",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.1",
-    "react-app-polyfill": "^1.0.4",
-    "react-dev-utils": "^9.1.0",
-    "resolve": "1.12.0",
-    "resolve-url-loader": "3.1.0",
-    "sass-loader": "7.2.0",
-    "semver": "6.3.0",
-    "style-loader": "1.0.0",
-    "terser-webpack-plugin": "1.4.1",
-    "ts-pnp": "1.1.4",
-    "url-loader": "2.1.0",
-    "webpack": "4.41.0",
-    "webpack-dev-server": "3.2.1",
-    "webpack-manifest-plugin": "2.1.1",
-    "workbox-webpack-plugin": "4.3.1"
+    "postcss-safe-parser": "5.0.2",
+    "prompts": "2.4.0",
+    "react-app-polyfill": "^2.0.0",
+    "react-dev-utils": "^11.0.1",
+    "react-refresh": "^0.8.3",
+    "resolve": "1.18.1",
+    "resolve-url-loader": "^3.1.2",
+    "sass-loader": "8.0.2",
+    "semver": "7.3.2",
+    "style-loader": "1.3.0",
+    "terser-webpack-plugin": "4.2.3",
+    "ts-pnp": "1.2.0",
+    "url-loader": "4.1.1",
+    "webpack": "4.44.2",
+    "webpack-dev-server": "3.11.0",
+    "webpack-manifest-plugin": "2.2.0",
+    "workbox-webpack-plugin": "5.1.4"
   },
   "scripts": {
     "prestart": "cp -r ../../build/node_modules/* ./node_modules/",
     "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
     "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
     "start:client": "node scripts/start.js",
-    "start:server": "NODE_ENV=development node --experimental-loader ./loader/index.js --conditions=react-server server",
+    "start:server": "NODE_ENV=development nodemon -- --experimental-loader ./loader/index.js --conditions=react-server server",
     "start:prod": "node scripts/build.js && concurrently \"npm run start:prod-server\" \"npm run start:prod-client\"",
     "start:prod-client": "cd ./build && python -m SimpleHTTPServer 3000",
     "start:prod-server": "NODE_ENV=production node --experimental-loader ./loader/index.js --conditions=react-server server",
@@ -89,6 +95,11 @@
       "last 1 safari version"
     ]
   },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
+  },
   "jest": {
     "roots": [
       "<rootDir>/src"
@@ -105,14 +116,15 @@
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
-    "testEnvironment": "jest-environment-jsdom-fourteen",
+    "testEnvironment": "jsdom",
+    "testRunner": "<rootDir>/node_modules/jest-circus/runner.js",
     "transform": {
-      "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+      "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
     },
     "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
       "^.+\\.module\\.(css|sass|scss)$"
     ],
     "modulePaths": [],
@@ -135,11 +147,7 @@
     "watchPlugins": [
       "jest-watch-typeahead/filename",
       "jest-watch-typeahead/testname"
-    ]
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
+    ],
+    "resetMocks": true
   }
 }
diff --git a/fixtures/flight/scripts/build.js b/fixtures/flight/scripts/build.js
index 10adb3768592..a5a6429d725d 100644
--- a/fixtures/flight/scripts/build.js
+++ b/fixtures/flight/scripts/build.js
@@ -17,6 +17,7 @@ require('../config/env');
 const path = require('path');
 const chalk = require('react-dev-utils/chalk');
 const fs = require('fs-extra');
+const bfj = require('bfj');
 const webpack = require('webpack');
 const configFactory = require('../config/webpack.config');
 const paths = require('../config/paths');
@@ -42,6 +43,9 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
 }
 
+const argv = process.argv.slice(2);
+const writeStatsJson = argv.indexOf('--stats') !== -1;
+
 // Generate configuration
 const config = configFactory('production');
 
@@ -93,7 +97,7 @@ checkBrowsers(paths.appPath, isInteractive)
       console.log();
 
       const appPackage = require(paths.appPackageJson);
-      const publicUrl = paths.publicUrl;
+      const publicUrl = paths.publicUrlOrPath;
       const publicPath = config.output.publicPath;
       const buildFolder = path.relative(process.cwd(), paths.appBuild);
       printHostingInstructions(
@@ -129,18 +133,6 @@ checkBrowsers(paths.appPath, isInteractive)
 
 // Create the production build and print the deployment instructions.
 function build(previousFileSizes) {
-  // We used to support resolving modules according to `NODE_PATH`.
-  // This now has been deprecated in favor of jsconfig/tsconfig.json
-  // This lets you use absolute paths in imports inside large monorepos:
-  if (process.env.NODE_PATH) {
-    console.log(
-      chalk.yellow(
-        'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
-      )
-    );
-    console.log();
-  }
-
   console.log('Creating an optimized production build...');
 
   const compiler = webpack(config);
@@ -151,8 +143,18 @@ function build(previousFileSizes) {
         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: [err.message],
+          errors: [errMessage],
           warnings: [],
         });
       } else {
@@ -183,11 +185,20 @@ function build(previousFileSizes) {
         return reject(new Error(messages.warnings.join('\n\n')));
       }
 
-      return resolve({
+      const resolveArgs = {
         stats,
         previousFileSizes,
         warnings: messages.warnings,
-      });
+      };
+
+      if (writeStatsJson) {
+        return bfj
+          .write(paths.appBuild + '/bundle-stats.json', stats.toJson())
+          .then(() => resolve(resolveArgs))
+          .catch(error => reject(new Error(error)));
+      }
+
+      return resolve(resolveArgs);
     });
   });
 }
diff --git a/fixtures/flight/scripts/start.js b/fixtures/flight/scripts/start.js
index ea414fada59f..1a51119e03be 100644
--- a/fixtures/flight/scripts/start.js
+++ b/fixtures/flight/scripts/start.js
@@ -27,10 +27,14 @@ const {
   prepareUrls,
 } = require('react-dev-utils/WebpackDevServerUtils');
 const openBrowser = require('react-dev-utils/openBrowser');
+const semver = require('semver');
 const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
+const getClientEnvironment = require('../config/env');
+const react = require(require.resolve('react', {paths: [paths.appPath]}));
 
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
 
@@ -55,7 +59,7 @@ if (process.env.HOST) {
     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
   );
   console.log(
-    `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
+    `Learn more here: ${chalk.yellow('https://cra.link/advanced-config')}`
   );
   console.log();
 }
@@ -74,12 +78,19 @@ checkBrowsers(paths.appPath, isInteractive)
       // We have not found a port.
       return;
     }
+
     const config = configFactory('development');
     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
     const appName = require(paths.appPackageJson).name;
+
     const useTypeScript = fs.existsSync(paths.appTsConfig);
     const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
-    const urls = prepareUrls(protocol, HOST, port);
+    const urls = prepareUrls(
+      protocol,
+      HOST,
+      port,
+      paths.publicUrlOrPath.slice(0, -1)
+    );
     const devSocket = {
       warnings: warnings =>
         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
@@ -99,7 +110,11 @@ checkBrowsers(paths.appPath, isInteractive)
     });
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
+    const proxyConfig = prepareProxy(
+      proxySetting,
+      paths.appPublic,
+      paths.publicUrlOrPath
+    );
     // Serve webpack assets generated by the compiler over a web server.
     const serverConfig = createDevServerConfig(
       proxyConfig,
@@ -115,16 +130,12 @@ checkBrowsers(paths.appPath, isInteractive)
         clearConsole();
       }
 
-      // We used to support resolving modules according to `NODE_PATH`.
-      // This now has been deprecated in favor of jsconfig/tsconfig.json
-      // This lets you use absolute paths in imports inside large monorepos:
-      if (process.env.NODE_PATH) {
+      if (env.raw.FAST_REFRESH && semver.lt(react.version, '16.10.0')) {
         console.log(
           chalk.yellow(
-            'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
+            `Fast Refresh requires React 16.10 or higher. You are using React ${react.version}.`
           )
         );
-        console.log();
       }
 
       console.log(chalk.cyan('Starting the development server...\n'));
@@ -137,6 +148,14 @@ checkBrowsers(paths.appPath, isInteractive)
         process.exit();
       });
     });
+
+    if (process.env.CI !== 'true') {
+      // Gracefully exit when stdin ends
+      process.stdin.on('end', function() {
+        devServer.close();
+        process.exit();
+      });
+    }
   })
   .catch(err => {
     if (err && err.message) {
diff --git a/fixtures/flight/server/cli.server.js b/fixtures/flight/server/cli.server.js
index 3d28e818bcf8..fefef07e9bd0 100644
--- a/fixtures/flight/server/cli.server.js
+++ b/fixtures/flight/server/cli.server.js
@@ -4,9 +4,22 @@ const register = require('react-transport-dom-webpack/node-register');
 register();
 
 const babelRegister = require('@babel/register');
+const path = require('path');
 
 babelRegister({
-  ignore: [/\/(build|node_modules)\//],
+  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: ['react-app'],
   plugins: ['@babel/transform-modules-commonjs'],
 });
@@ -16,12 +29,6 @@ const app = express();
 
 // Application
 app.get('/', function(req, res) {
-  if (process.env.NODE_ENV === 'development') {
-    // This doesn't work in ESM mode.
-    // for (var key in require.cache) {
-    //   delete require.cache[key];
-    // }
-  }
   require('./handler.server.js')(req, res);
 });
 
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index 29d493303b68..85037cf280a4 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -1,9 +1,9 @@
 'use strict';
 
-import {pipeToNodeWritable} from 'react-transport-dom-webpack/server';
-import {readFile} from 'fs';
-import {resolve} from 'path';
-import * as React from 'react';
+const {pipeToNodeWritable} = require('react-transport-dom-webpack/server');
+const {readFile} = require('fs');
+const {resolve} = require('path');
+const React = require('react');
 
 module.exports = function(req, res) {
   // const m = require('../src/App.server.js');
@@ -20,7 +20,7 @@ module.exports = function(req, res) {
         const App = m.default.default || m.default;
         res.setHeader('Access-Control-Allow-Origin', '*');
         const moduleMap = JSON.parse(data);
-        pipeToNodeWritable(<App />, res, moduleMap);
+        pipeToNodeWritable(React.createElement(App), res, moduleMap);
       }
     );
   });
diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock
index ad74759fddff..3a8e86245ddf 100644
--- a/fixtures/flight/yarn.lock
+++ b/fixtures/flight/yarn.lock
@@ -8,11 +8,12 @@
   dependencies:
     "@babel/highlight" "7.0.0-beta.44"
 
-"@babel/code-frame@7.5.5", "@babel/code-frame@^7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.5.5.tgz#bc0782f6d69f7b7d49531219699b988f669a8f9d"
+"@babel/code-frame@7.10.4", "@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.0.0"
+    "@babel/highlight" "^7.10.4"
 
 "@babel/code-frame@^7.0.0":
   version "7.0.0"
@@ -20,26 +21,40 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/core@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.6.0.tgz#9b00f73554edd67bebc86df8303ef678be3d7b48"
+"@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/code-frame" "^7.5.5"
-    "@babel/generator" "^7.6.0"
-    "@babel/helpers" "^7.6.0"
-    "@babel/parser" "^7.6.0"
-    "@babel/template" "^7.6.0"
-    "@babel/traverse" "^7.6.0"
-    "@babel/types" "^7.6.0"
-    convert-source-map "^1.1.0"
+    "@babel/highlight" "^7.0.0"
+
+"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
+  integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==
+
+"@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"
-    json5 "^2.1.0"
-    lodash "^4.17.13"
+    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.1.0", "@babel/core@^7.4.5":
+"@babel/core@^7.1.0":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.2.tgz#ea5b99693bcfc058116f42fa1dd54da412b29d91"
   dependencies:
@@ -58,6 +73,28 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.12.3", "@babel/core@^7.7.5", "@babel/core@^7.8.4", "@babel/core@^7.9.0":
+  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/generator@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -78,7 +115,16 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/generator@^7.4.0", "@babel/generator@^7.6.0", "@babel/generator@^7.7.2":
+"@babel/generator@^7.12.1", "@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.7.2":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.2.tgz#2f4852d04131a5e17ea4f6645488b5da66ebf3af"
   dependencies:
@@ -87,50 +133,66 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
+"@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.0.0"
+    "@babel/types" "^7.10.4"
 
-"@babel/helper-annotate-as-pure@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.7.0.tgz#efc54032d43891fe267679e63f6860aa7dbf4a5e"
+"@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/types" "^7.7.0"
+    "@babel/helper-explode-assignable-expression" "^7.10.4"
+    "@babel/types" "^7.10.4"
 
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.1.0.tgz#6b69628dfe4087798e0c4ed98e3d4a6b2fbd2f5f"
+"@babel/helper-builder-react-jsx-experimental@^7.12.4":
+  version "7.12.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.12.4.tgz#55fc1ead5242caa0ca2875dcb8eed6d311e50f48"
+  integrity sha512-AjEa0jrQqNk7eDQOo0pTfUOwQBMF+xVqrausQwT9/rTKy0g04ggFNaJpaE09IQMn9yExluigWMJcj0WC7bq+Og==
   dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-module-imports" "^7.12.1"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-builder-react-jsx@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.0.0.tgz#fa154cb53eb918cf2a9a7ce928e29eb649c5acdb"
+"@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/types" "^7.0.0"
-    esutils "^2.0.0"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/types" "^7.10.4"
 
-"@babel/helper-call-delegate@^7.4.4":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.7.0.tgz#df8942452c2c1a217335ca7e393b9afc67f668dc"
+"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz#cb470c76198db6a24e9dbc8987275631e5d29831"
+  integrity sha512-+qH6NrscMolUlzOYngSBMIOQpKUGPPsc61Bu5W10mg84LxZ7cmvnBHzARKbDoFxVvqqAbj6Tg6N7bSrWSPXMyw==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
+    "@babel/compat-data" "^7.12.5"
+    "@babel/helper-validator-option" "^7.12.1"
+    browserslist "^4.14.5"
+    semver "^5.5.0"
 
-"@babel/helper-create-class-features-plugin@^7.5.5", "@babel/helper-create-class-features-plugin@^7.6.0", "@babel/helper-create-class-features-plugin@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.7.0.tgz#bcdc223abbfdd386f94196ae2544987f8df775e8"
+"@babel/helper-create-class-features-plugin@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
+  integrity sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==
   dependencies:
-    "@babel/helper-function-name" "^7.7.0"
-    "@babel/helper-member-expression-to-functions" "^7.7.0"
-    "@babel/helper-optimise-call-expression" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.0"
-    "@babel/helper-split-export-declaration" "^7.7.0"
+    "@babel/helper-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@^7.12.1":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.7.tgz#2084172e95443fa0a09214ba1bb328f9aea1278f"
+  integrity sha512-idnutvQPdpbduutvi3JVfEgcVIHooQnhvhx0Nk9isOINOIGYkZea1Pk2JlJRiUnMefrlvr0vkByATBY/mB4vjQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    regexpu-core "^4.7.1"
 
 "@babel/helper-create-regexp-features-plugin@^7.7.0":
   version "7.7.2"
@@ -139,20 +201,21 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.6.0"
 
-"@babel/helper-define-map@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.7.0.tgz#60b0e9fd60def9de5054c38afde8c8ee409c7529"
+"@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.7.0"
-    "@babel/types" "^7.7.0"
-    lodash "^4.17.13"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/types" "^7.10.5"
+    lodash "^4.17.19"
 
-"@babel/helper-explode-assignable-expression@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.1.0.tgz#537fa13f6f1674df745b0c00ec8fe4e99681c8f6"
+"@babel/helper-explode-assignable-expression@^7.10.4":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz#8006a466695c4ad86a2a5f2fb15b5f2c31ad5633"
+  integrity sha512-dmUwH8XmlrUpVqgtZ737tK88v07l840z9j3OEhCLwKTkjlvKpfqXVIZ0wpK3aeOxspwGrf/5AP5qLx4rO3w5rA==
   dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.12.1"
 
 "@babel/helper-function-name@7.0.0-beta.44":
   version "7.0.0-beta.44"
@@ -170,6 +233,15 @@
     "@babel/template" "^7.1.0"
     "@babel/types" "^7.0.0"
 
+"@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.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz#44a5ad151cfff8ed2599c91682dda2ec2c8430a3"
@@ -190,23 +262,32 @@
   dependencies:
     "@babel/types" "^7.0.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.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.7.0.tgz#b4552e4cfe5577d7de7b183e193e84e4ec538c81"
+"@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.7.0"
+    "@babel/types" "^7.10.4"
 
-"@babel/helper-member-expression-to-functions@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.7.0.tgz#472b93003a57071f95a541ea6c2b098398bcad8a"
+"@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.7.0"
+    "@babel/types" "^7.12.7"
 
 "@babel/helper-module-imports@^7.0.0":
   version "7.0.0"
@@ -214,93 +295,82 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-module-imports@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.0.tgz#99c095889466e5f7b6d66d98dffc58baaf42654d"
+"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.5":
+  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.7.0"
-
-"@babel/helper-module-transforms@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.1.0.tgz#470d4f9676d9fad50b324cdcce5fbabbc3da5787"
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/helper-simple-access" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.0.0"
-    "@babel/template" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    lodash "^4.17.10"
+    "@babel/types" "^7.12.5"
 
-"@babel/helper-module-transforms@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.7.0.tgz#154a69f0c5b8fd4d39e49750ff7ac4faa3f36786"
+"@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.7.0"
-    "@babel/helper-simple-access" "^7.7.0"
-    "@babel/helper-split-export-declaration" "^7.7.0"
-    "@babel/template" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    lodash "^4.17.13"
+    "@babel/helper-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-optimise-call-expression@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.7.0.tgz#4f66a216116a66164135dc618c5d8b7a959f9365"
+"@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.7.0"
+    "@babel/types" "^7.12.7"
 
 "@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.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-regex@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.0.0.tgz#2c1718923b57f9bbe64705ffe5640ac64d9bdb27"
-  dependencies:
-    lodash "^4.17.10"
-
 "@babel/helper-regex@^7.4.4":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.5.5.tgz#0aa6824f7100a2e0e89c1527c23936c152cab351"
   dependencies:
     lodash "^4.17.13"
 
-"@babel/helper-remap-async-to-generator@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.7.0.tgz#4d69ec653e8bff5bce62f5d33fc1508f223c75a7"
+"@babel/helper-remap-async-to-generator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz#8c4dbbf916314f6047dc05e6a2217074238347fd"
+  integrity sha512-9d0KQCRM8clMPcDwo8SevNs+/9a8yWVVmaE80FGJcEP8N1qToREmWEGnBn8BUlJhYRFz6fqxeRL1sl5Ogsed7A==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.0"
-    "@babel/helper-wrap-function" "^7.7.0"
-    "@babel/template" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-wrap-function" "^7.10.4"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-replace-supers@^7.5.5", "@babel/helper-replace-supers@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.7.0.tgz#d5365c8667fe7cbd13b8ddddceb9bd7f2b387512"
+"@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.7.0"
-    "@babel/helper-optimise-call-expression" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
+    "@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-simple-access@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.1.0.tgz#65eeb954c8c245beaa4e859da6188f39d71e585c"
+"@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/template" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.12.1"
 
-"@babel/helper-simple-access@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.7.0.tgz#97a8b6c52105d76031b86237dc1852b44837243d"
+"@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
+  integrity sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==
   dependencies:
-    "@babel/template" "^7.7.0"
-    "@babel/types" "^7.7.0"
+    "@babel/types" "^7.12.1"
 
 "@babel/helper-split-export-declaration@7.0.0-beta.44":
   version "7.0.0-beta.44"
@@ -314,22 +384,49 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
-"@babel/helper-split-export-declaration@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz#1365e74ea6c614deeb56ebffabd71006a0eb2300"
+"@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.7.0"
+    "@babel/types" "^7.11.0"
 
-"@babel/helper-wrap-function@^7.7.0":
+"@babel/helper-split-export-declaration@^7.7.0":
   version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.7.0.tgz#15af3d3e98f8417a60554acbb6c14e75e0b33b74"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.7.0.tgz#1365e74ea6c614deeb56ebffabd71006a0eb2300"
   dependencies:
-    "@babel/helper-function-name" "^7.7.0"
-    "@babel/template" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
     "@babel/types" "^7.7.0"
 
-"@babel/helpers@^7.6.0", "@babel/helpers@^7.7.0":
+"@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-option@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
+  integrity sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A==
+
+"@babel/helper-wrap-function@^7.10.4":
+  version "7.12.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
+  integrity sha512-Cvb8IuJDln3rs6tzjW3Y8UeelAOdnpB8xtQ4sme2MSZ9wOxrbThporC0y/EtE16VAtoyEfLM404Xr1e0OOp+ow==
+  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.12.1", "@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.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.7.0.tgz#359bb5ac3b4726f7c1fde0ec75f64b3f4275d60b"
   dependencies:
@@ -353,557 +450,820 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.2":
+"@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.1.0", "@babel/parser@^7.1.2":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.2.tgz#85c5c47af6d244fab77bce6b9bd830e38c978409"
 
-"@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.7.0", "@babel/parser@^7.7.2":
+"@babel/parser@^7.12.3", "@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.7.0", "@babel/parser@^7.7.2":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.2.tgz#ea8334dc77416bfd9473eb470fd00d8245b3943b"
 
-"@babel/plugin-proposal-async-generator-functions@^7.2.0", "@babel/plugin-proposal-async-generator-functions@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.7.0.tgz#83ef2d6044496b4c15d8b4904e2219e6dccc6971"
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e"
+  integrity sha512-d+/o30tJxFxrA1lhzJqiUcEJdI6jKlNregCv5bASeGf2Q4MXmnwH7viDo7nhx1/ohf09oaH8j1GVYG/e3Yqk6A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-remap-async-to-generator" "^7.7.0"
-    "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/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@7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.5.tgz#a974cfae1e37c3110e71f3c6a2e48b8e71958cd4"
+"@babel/plugin-proposal-class-properties@7.12.1", "@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.5.5"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-proposal-decorators@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.6.0.tgz#6659d2572a17d70abd68123e89a12a43d90aa30c"
+"@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.6.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-decorators" "^7.2.0"
+    "@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.5.0", "@babel/plugin-proposal-dynamic-import@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.0.tgz#dc02a8bad8d653fb59daf085516fa416edd2aa7f"
+"@babel/plugin-proposal-dynamic-import@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz#43eb5c2a3487ecd98c5c8ea8b5fdb69a2749b2dc"
+  integrity sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
-"@babel/plugin-proposal-json-strings@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
+"@babel/plugin-proposal-export-namespace-from@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.1.tgz#8b9b8f376b2d88f5dd774e4d24a5cc2e3679b6d4"
+  integrity sha512-6CThGf0irEkzujYS5LQcjBx8j/4aQGiVv7J9+2f7pGfxqyKh3WnmVJYW3hdrQjyksErMGBPQrCnHfOtna+WLbw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-json-strings" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-object-rest-spread@7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.5.tgz#61939744f71ba76a3ae46b5eea18a54c16d22e58"
+"@babel/plugin-proposal-json-strings@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz#d45423b517714eedd5621a9dfdc03fa9f4eb241c"
+  integrity sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.5.5", "@babel/plugin-proposal-object-rest-spread@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.6.2.tgz#8ffccc8f3a6545e9f78988b6bf4fe881b88e8096"
+"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.1.tgz#f2c490d36e1b3c9659241034a5d2cd50263a2751"
+  integrity sha512-k8ZmVv0JU+4gcUGeCDZOGd0lCIamU/sMtIiX3UWnUc5yzgq6YUGyEolNYD+MLYKfSzgECPcqetVcJP9Afe/aCA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.2.0.tgz#135d81edb68a081e55e56ec48541ece8065c38f5"
+"@babel/plugin-proposal-nullish-coalescing-operator@7.12.1", "@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.0.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
+"@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-unicode-property-regex@^7.4.4", "@babel/plugin-proposal-unicode-property-regex@^7.7.0":
+"@babel/plugin-proposal-numeric-separator@^7.12.1", "@babel/plugin-proposal-numeric-separator@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.7.tgz#8bf253de8139099fea193b297d23a9d406ef056b"
+  integrity sha512-8c+uy0qmnRTeukiGsjLGy6uVs/TFjJchGXUeBqlG4VWYOdJWkhhVPdQ3uHwbmalfJwv2JsV0qffXP4asRfL2SQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
+"@babel/plugin-proposal-object-rest-spread@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
+  integrity sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==
+  dependencies:
+    "@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@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz#ccc2421af64d3aae50b558a71cede929a5ab2942"
+  integrity sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+
+"@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", "@babel/plugin-proposal-optional-chaining@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.7.tgz#e02f0ea1b5dc59d401ec16fb824679f683d3303c"
+  integrity sha512-4ovylXZ0PWmwoOvhU2vhnzVNnm88/Sm9nx7V8BPgMvAzn5zDou3/Awy0EjglyubVHasJj+XCEkr/r1X3P5elCA==
+  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-private-methods@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.1.tgz#86814f6e7a21374c980c10d38b4493e703f4a389"
+  integrity sha512-mwZ1phvH7/NHK6Kf8LP7MYDogGV+DKB1mryFOEwx5EBNQrosvIczzZFTUmWaeujd5xT6G1ELYWUz3CutMhjE1w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-proposal-unicode-property-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz#2a183958d417765b9eae334f47758e5d6a82e072"
+  integrity sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@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.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.2.0.tgz#69e1f0db34c6f5a0cf7e2b3323bf159a76c8cb7f"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-decorators@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.2.0.tgz#c50b1b957dcc69e4b1127b65e1c33eef61570c1b"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-dynamic-import@7.2.0", "@babel/plugin-syntax-dynamic-import@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"
+"@babel/plugin-syntax-class-properties@^7.12.1", "@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.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-flow@^7.2.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.7.0.tgz#5c9465bcd26354d5215294ea90ab1c706a571386"
+"@babel/plugin-syntax-decorators@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.1.tgz#81a8b535b284476c41be6de06853a8802b98c5dd"
+  integrity sha512-ir9YW5daRrTYiy9UJ2TzdNIJEZu8KclVzDcfSt4iEmOtwQ4llPtWInNKJyKnVXp1vE4bbVd5S31M/im3mYMO1w==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@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-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.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.1.tgz#a77670d9abe6d63e8acadf4c31bb1eb5a506bbdd"
+  integrity sha512-1lBLLmtxrwpm4VKmtVFselI/P3pX+G63fAtUUt6b2Nzgao77KNDwyuRt90Mj2/9pKobtt68FdvjfqohZjg/FCA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-import-meta@^7.10.4":
+"@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.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.2.0.tgz#72bd13f6ffe1d25938129d2a186b11fd62951470"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.0.0.tgz#034d5e2b4e14ccaea2e4c137af7e4afb39375ffd"
+"@babel/plugin-syntax-jsx@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926"
+  integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-object-rest-spread@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.0.0.tgz#37d8fbcaf216bd658ea1aebbeb8b75e88ebc549b"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-object-rest-spread@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.2.0.tgz#3b7a3e733510c57e820b9142a6579ac8b0dfad2e"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-optional-catch-binding@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.2.0.tgz#a94013d6eda8908dfe6a477e7f9eda85656ecf5c"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-top-level-await@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.7.0.tgz#f5699549f50bbe8d12b1843a4e82f0a37bb65f4d"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-typescript@^7.2.0":
-  version "7.3.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.3.3.tgz#a7cc3f66119a9f7ebe2de5383cce193473d65991"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-transform-arrow-functions@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.2.0.tgz#9aeafbe4d6ffc6563bf8f8372091628f00779550"
+"@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.0.0"
+    "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-transform-async-to-generator@^7.5.0", "@babel/plugin-transform-async-to-generator@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.7.0.tgz#e2b84f11952cf5913fe3438b7d2585042772f492"
+"@babel/plugin-syntax-top-level-await@^7.12.1", "@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-module-imports" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-remap-async-to-generator" "^7.7.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-block-scoped-functions@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.2.0.tgz#5d3cc11e8d5ddd752aa64c9148d0db6cb79fd190"
+"@babel/plugin-syntax-typescript@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.1.tgz#460ba9d77077653803c3dd2e673f76d66b4029e5"
+  integrity sha512-UZNEcCY+4Dp9yYRCAHrHDU+9ZXLYaY9MgBXSRLkB9WjYFRR6quJBumfVrEkUxrePPBwFcpWfNKXqVRQQtm7mMA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-block-scoping@^7.6.0", "@babel/plugin-transform-block-scoping@^7.6.3":
-  version "7.6.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.6.3.tgz#6e854e51fbbaa84351b15d4ddafe342f3a5d542a"
+"@babel/plugin-transform-arrow-functions@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
+  integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    lodash "^4.17.13"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-classes@^7.5.5", "@babel/plugin-transform-classes@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.7.0.tgz#b411ecc1b8822d24b81e5d184f24149136eddd4a"
+"@babel/plugin-transform-async-to-generator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz#3849a49cc2a22e9743cbd6b52926d30337229af1"
+  integrity sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.7.0"
-    "@babel/helper-define-map" "^7.7.0"
-    "@babel/helper-function-name" "^7.7.0"
-    "@babel/helper-optimise-call-expression" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.7.0"
-    "@babel/helper-split-export-declaration" "^7.7.0"
+    "@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@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz#f2a1a365bde2b7112e0a6ded9067fdd7c07905d9"
+  integrity sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-block-scoping@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz#f0ee727874b42a208a48a586b84c3d222c2bbef1"
+  integrity sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-classes@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz#65e650fcaddd3d88ddce67c0f834a3d436a32db6"
+  integrity sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==
+  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"
 
-"@babel/plugin-transform-computed-properties@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.2.0.tgz#83a7df6a658865b1c8f641d510c6f3af220216da"
+"@babel/plugin-transform-computed-properties@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz#d68cf6c9b7f838a8a4144badbe97541ea0904852"
+  integrity sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-destructuring@7.6.0", "@babel/plugin-transform-destructuring@^7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.6.0.tgz#44bbe08b57f4480094d57d9ffbcd96d309075ba6"
+"@babel/plugin-transform-destructuring@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz#b9a570fe0d0a8d460116413cb4f97e8e08b2f847"
+  integrity sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@babel/plugin-transform-dotall-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz#a1d16c14862817b6409c0a678d6f9373ca9cd975"
+  integrity sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.7.0":
+"@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.5.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
+"@babel/plugin-transform-duplicate-keys@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz#745661baba295ac06e686822797a69fbaa2ca228"
+  integrity sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-exponentiation-operator@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.2.0.tgz#a63868289e5b4007f7054d46491af51435766008"
+"@babel/plugin-transform-exponentiation-operator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz#b0f2ed356ba1be1428ecaf128ff8a24f02830ae0"
+  integrity sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==
   dependencies:
-    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.1.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-flow-strip-types@7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.4.4.tgz#d267a081f49a8705fc9146de0768c6b58dccd8f7"
+"@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.0.0"
-    "@babel/plugin-syntax-flow" "^7.2.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-flow" "^7.12.1"
 
-"@babel/plugin-transform-for-of@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.4.4.tgz#0267fc735e24c808ba173866c6c4d1440fc3c556"
+"@babel/plugin-transform-for-of@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz#07640f28867ed16f9511c99c888291f560921cfa"
+  integrity sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-function-name@^7.4.4", "@babel/plugin-transform-function-name@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.7.0.tgz#0fa786f1eef52e3b7d4fc02e54b2129de8a04c2a"
+"@babel/plugin-transform-function-name@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz#2ec76258c70fe08c6d7da154003a480620eba667"
+  integrity sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==
   dependencies:
-    "@babel/helper-function-name" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-function-name" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-literals@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.2.0.tgz#690353e81f9267dad4fd8cfd77eafa86aba53ea1"
+"@babel/plugin-transform-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz#d73b803a26b37017ddf9d3bb8f4dc58bfb806f57"
+  integrity sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-member-expression-literals@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.2.0.tgz#fa10aa5c58a2cb6afcf2c9ffa8cb4d8b3d489a2d"
+"@babel/plugin-transform-member-expression-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.1.tgz#496038602daf1514a64d43d8e17cbb2755e0c3ad"
+  integrity sha512-1sxePl6z9ad0gFMB9KqmYofk34flq62aqMt9NqliS/7hPEpURUCMbyHXrMPlo282iY7nAvUB1aQd5mg79UD9Jg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-modules-amd@^7.5.0":
-  version "7.5.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
+"@babel/plugin-transform-modules-amd@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz#3154300b026185666eebb0c0ed7f8415fefcf6f9"
+  integrity sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==
   dependencies:
-    "@babel/helper-module-transforms" "^7.1.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@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@^7.6.0", "@babel/plugin-transform-modules-commonjs@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.7.0.tgz#3e5ffb4fd8c947feede69cbe24c9554ab4113fe3"
+"@babel/plugin-transform-modules-commonjs@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz#fa403124542636c786cf9b460a0ffbb48a86e648"
+  integrity sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-simple-access" "^7.7.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@babel/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@^7.5.0", "@babel/plugin-transform-modules-systemjs@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.7.0.tgz#9baf471213af9761c1617bb12fd278e629041417"
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz#663fea620d593c93f214a464cd399bf6dc683086"
+  integrity sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==
   dependencies:
-    "@babel/helper-hoist-variables" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    "@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@^7.2.0", "@babel/plugin-transform-modules-umd@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.7.0.tgz#d62c7da16670908e1d8c68ca0b5d4c0097b69966"
+"@babel/plugin-transform-modules-umd@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz#eb5a218d6b1c68f3d6217b8fa2cc82fec6547902"
+  integrity sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==
   dependencies:
-    "@babel/helper-module-transforms" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-module-transforms" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.6.0", "@babel/plugin-transform-named-capturing-groups-regex@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.7.0.tgz#358e6fd869b9a4d8f5cbc79e4ed4fc340e60dcaf"
+"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz#b407f5c96be0d9f5f88467497fa82b30ac3e8753"
+  integrity sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.0"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
 
-"@babel/plugin-transform-new-target@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.4.4.tgz#18d120438b0cc9ee95a47f2c72bc9768fbed60a5"
+"@babel/plugin-transform-new-target@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz#80073f02ee1bb2d365c3416490e085c95759dec0"
+  integrity sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-object-super@^7.5.5":
-  version "7.5.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.5.5.tgz#c70021df834073c65eb613b8679cc4a381d1a9f9"
+"@babel/plugin-transform-object-super@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz#4ea08696b8d2e65841d0c7706482b048bed1066e"
+  integrity sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-replace-supers" "^7.5.5"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-replace-supers" "^7.12.1"
 
-"@babel/plugin-transform-parameters@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.4.4.tgz#7556cf03f318bd2719fe4c922d2d808be5571e16"
+"@babel/plugin-transform-parameters@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz#d2e963b038771650c922eff593799c96d853255d"
+  integrity sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==
   dependencies:
-    "@babel/helper-call-delegate" "^7.4.4"
-    "@babel/helper-get-function-arity" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-property-literals@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.2.0.tgz#03e33f653f5b25c4eb572c98b9485055b389e905"
+"@babel/plugin-transform-property-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.1.tgz#41bc81200d730abb4456ab8b3fbd5537b59adecd"
+  integrity sha512-6MTCR/mZ1MQS+AwZLplX4cEySjCpnIF26ToWo942nqn8hXSm7McaHQNeGx/pt7suI1TWOWMfa/NgBhiqSnX0cQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-constant-elements@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.0.0.tgz#ab413e33e9c46a766f5326014bcbf9e2b34ef7a4"
+"@babel/plugin-transform-react-constant-elements@^7.9.0":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.12.1.tgz#4471f0851feec3231cc9aaa0dccde39947c1ac1e"
+  integrity sha512-KOHd0tIRLoER+J+8f9DblZDa1fLGPwaaN1DI1TVHuQFOpjHV22C3CUB3obeC4fexHY9nx+fH0hQNvLFFfA1mxA==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-display-name@7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz#ebfaed87834ce8dc4279609a4f0c324c156e3eb0"
+"@babel/plugin-transform-react-display-name@7.12.1", "@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.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-display-name@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.0.0.tgz#93759e6c023782e52c2da3b75eca60d4f10533ee"
+"@babel/plugin-transform-react-jsx-development@^7.12.1", "@babel/plugin-transform-react-jsx-development@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.7.tgz#4c2a647de79c7e2b16bfe4540677ba3121e82a08"
+  integrity sha512-Rs3ETtMtR3VLXFeYRChle5SsP/P9Jp/6dsewBQfokDSzKJThlsuFcnzLTDRALiUmTC48ej19YD9uN1mupEeEDg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-builder-react-jsx-experimental" "^7.12.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.12.1"
 
-"@babel/plugin-transform-react-jsx-self@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.0.0.tgz#a84bb70fea302d915ea81d9809e628266bb0bc11"
+"@babel/plugin-transform-react-jsx-self@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.12.1.tgz#ef43cbca2a14f1bd17807dbe4376ff89d714cf28"
+  integrity sha512-FbpL0ieNWiiBB5tCldX17EtXgmzeEZjFrix72rQYeq9X6nUK38HCaxexzVQrZWXanxKJPKVVIU37gFjEQYkPkA==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx-source@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.0.0.tgz#28e00584f9598c0dd279f6280eee213fa0121c3c"
+"@babel/plugin-transform-react-jsx-source@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.12.1.tgz#d07de6863f468da0809edcf79a1aa8ce2a82a26b"
+  integrity sha512-keQ5kBfjJNRc6zZN1/nVHCd6LLIHq4aUKcVnvE/2l+ZZROSbqoiGFRtT5t3Is89XJxBQaP7NLZX2jgGHdZvvFQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-react-jsx@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.0.0.tgz#524379e4eca5363cd10c4446ba163f093da75f3e"
+"@babel/plugin-transform-react-jsx@^7.12.1", "@babel/plugin-transform-react-jsx@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.7.tgz#8b14d45f6eccd41b7f924bcb65c021e9f0a06f7f"
+  integrity sha512-YFlTi6MEsclFAPIDNZYiCRbneg1MFGao9pPG9uD5htwE0vDbPaMUMeYd6itWjw7K4kro4UbdQf3ljmFl9y48dQ==
   dependencies:
-    "@babel/helper-builder-react-jsx" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
+    "@babel/helper-builder-react-jsx" "^7.10.4"
+    "@babel/helper-builder-react-jsx-experimental" "^7.12.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-syntax-jsx" "^7.12.1"
 
-"@babel/plugin-transform-regenerator@^7.4.5", "@babel/plugin-transform-regenerator@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.7.0.tgz#f1b20b535e7716b622c99e989259d7dd942dd9cc"
+"@babel/plugin-transform-react-pure-annotations@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz#05d46f0ab4d1339ac59adf20a1462c91b37a1a42"
+  integrity sha512-RqeaHiwZtphSIUZ5I85PEH19LOSzxfuEazoY7/pWASCAIBuATQzpSVD+eT6MebeeZT2F4eSL0u4vw6n4Nm0Mjg==
   dependencies:
-    regenerator-transform "^0.14.0"
+    "@babel/helper-annotate-as-pure" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-reserved-words@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.2.0.tgz#4792af87c998a49367597d07fedf02636d2e1634"
+"@babel/plugin-transform-regenerator@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz#5f0a28d842f6462281f06a964e88ba8d7ab49753"
+  integrity sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    regenerator-transform "^0.14.2"
 
-"@babel/plugin-transform-runtime@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.6.0.tgz#85a3cce402b28586138e368fce20ab3019b9713e"
+"@babel/plugin-transform-reserved-words@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.1.tgz#6fdfc8cc7edcc42b36a7c12188c6787c873adcd8"
+  integrity sha512-pOnUfhyPKvZpVyBHhSBoX8vfA09b7r00Pmm1sH+29ae2hMTKVmSp4Ztsr8KBKjLjx17H0eJqaRC3bR2iThM54A==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@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.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.2.0.tgz#6333aee2f8d6ee7e28615457298934a3b46198f0"
+"@babel/plugin-transform-shorthand-properties@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
+  integrity sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-spread@^7.2.0", "@babel/plugin-transform-spread@^7.6.2":
-  version "7.6.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.6.2.tgz#fc77cf798b24b10c46e1b51b1b88c2bf661bb8dd"
+"@babel/plugin-transform-spread@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz#527f9f311be4ec7fdc2b79bb89f7bf884b3e1e1e"
+  integrity sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
 
-"@babel/plugin-transform-sticky-regex@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.2.0.tgz#a1e454b5995560a9c1e0d537dfc15061fd2687e1"
+"@babel/plugin-transform-sticky-regex@^7.12.1", "@babel/plugin-transform-sticky-regex@^7.12.7":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.7.tgz#560224613ab23987453948ed21d0b0b193fa7fad"
+  integrity sha512-VEiqZL5N/QvDbdjfYQBhruN0HYjSPjC4XkeqW4ny/jNtH9gcbgaqBIXYEZCNnESMAGs0/K/R7oFGMhOyu/eIxg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/helper-regex" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-template-literals@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.4.4.tgz#9d28fea7bbce637fb7612a0750989d8321d4bcb0"
+"@babel/plugin-transform-template-literals@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
+  integrity sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==
   dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-typeof-symbol@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.2.0.tgz#117d2bcec2fbf64b4b59d1f9819894682d29f2b2"
+"@babel/plugin-transform-typeof-symbol@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.1.tgz#9ca6be343d42512fbc2e68236a82ae64bc7af78a"
+  integrity sha512-EPGgpGy+O5Kg5pJFNDKuxt9RdmTgj5sgrus2XVeMp/ZIbOESadgILUbm50SNpghOh3/6yrbsH+NB5+WJTmsA7Q==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-transform-typescript@^7.6.0":
-  version "7.7.2"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.7.2.tgz#eb9f14c516b5d36f4d6f3a9d7badae6d0fc313d4"
+"@babel/plugin-transform-typescript@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.1.tgz#d92cc0af504d510e26a754a7dbc2e5c8cd9c7ab4"
+  integrity sha512-VrsBByqAIntM+EYMqSm59SiMEf7qkmI9dqMt6RbD/wlwueWmYcI0FFK5Fj47pP6DRZm+3teXjosKlwcZJ5lIMw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-syntax-typescript" "^7.2.0"
+    "@babel/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-regex@^7.4.4", "@babel/plugin-transform-unicode-regex@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.0.tgz#743d9bcc44080e3cc7d49259a066efa30f9187a3"
+"@babel/plugin-transform-unicode-escapes@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.1.tgz#5232b9f81ccb07070b7c3c36c67a1b78f1845709"
+  integrity sha512-I8gNHJLIc7GdApm7wkVnStWssPNbSRMPtgHdmH3sRM1zopz09UWPS4x5V4n1yz/MIWTVnJ9sp6IkuXdWM4w+2Q==
   dependencies:
-    "@babel/helper-create-regexp-features-plugin" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/preset-env@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.6.0.tgz#aae4141c506100bb2bfaa4ac2a5c12b395619e50"
+"@babel/plugin-transform-unicode-regex@^7.12.1":
+  version "7.12.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz#cc9661f61390db5c65e3febaccefd5c6ac3faecb"
+  integrity sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
-    "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.5.5"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
-    "@babel/plugin-syntax-async-generators" "^7.2.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
-    "@babel/plugin-syntax-json-strings" "^7.2.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-transform-arrow-functions" "^7.2.0"
-    "@babel/plugin-transform-async-to-generator" "^7.5.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
-    "@babel/plugin-transform-block-scoping" "^7.6.0"
-    "@babel/plugin-transform-classes" "^7.5.5"
-    "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.6.0"
-    "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
-    "@babel/plugin-transform-for-of" "^7.4.4"
-    "@babel/plugin-transform-function-name" "^7.4.4"
-    "@babel/plugin-transform-literals" "^7.2.0"
-    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.5.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.6.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
-    "@babel/plugin-transform-modules-umd" "^7.2.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.6.0"
-    "@babel/plugin-transform-new-target" "^7.4.4"
-    "@babel/plugin-transform-object-super" "^7.5.5"
-    "@babel/plugin-transform-parameters" "^7.4.4"
-    "@babel/plugin-transform-property-literals" "^7.2.0"
-    "@babel/plugin-transform-regenerator" "^7.4.5"
-    "@babel/plugin-transform-reserved-words" "^7.2.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
-    "@babel/plugin-transform-spread" "^7.2.0"
-    "@babel/plugin-transform-sticky-regex" "^7.2.0"
-    "@babel/plugin-transform-template-literals" "^7.4.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
-    "@babel/plugin-transform-unicode-regex" "^7.4.4"
-    "@babel/types" "^7.6.0"
-    browserslist "^4.6.0"
-    core-js-compat "^3.1.1"
-    invariant "^2.2.2"
-    js-levenshtein "^1.1.3"
+    "@babel/helper-create-regexp-features-plugin" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.10.4"
+
+"@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-env@^7.4.5":
-  version "7.7.1"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.7.1.tgz#04a2ff53552c5885cf1083e291c8dd5490f744bb"
+"@babel/preset-env@^7.8.4", "@babel/preset-env@^7.9.5":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.7.tgz#54ea21dbe92caf6f10cb1a0a576adc4ebf094b55"
+  integrity sha512-OnNdfAr1FUQg7ksb7bmbKoby4qFOHw6DKWWUNB9KqnnCldxhxJlP+21dpyaWFmf2h0rTbOkXJtAGevY3XW1eew==
   dependencies:
-    "@babel/helper-module-imports" "^7.7.0"
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/plugin-proposal-async-generator-functions" "^7.7.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.7.0"
-    "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.6.2"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-proposal-unicode-property-regex" "^7.7.0"
-    "@babel/plugin-syntax-async-generators" "^7.2.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
-    "@babel/plugin-syntax-json-strings" "^7.2.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
-    "@babel/plugin-syntax-top-level-await" "^7.7.0"
-    "@babel/plugin-transform-arrow-functions" "^7.2.0"
-    "@babel/plugin-transform-async-to-generator" "^7.7.0"
-    "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
-    "@babel/plugin-transform-block-scoping" "^7.6.3"
-    "@babel/plugin-transform-classes" "^7.7.0"
-    "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.6.0"
-    "@babel/plugin-transform-dotall-regex" "^7.7.0"
-    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
-    "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
-    "@babel/plugin-transform-for-of" "^7.4.4"
-    "@babel/plugin-transform-function-name" "^7.7.0"
-    "@babel/plugin-transform-literals" "^7.2.0"
-    "@babel/plugin-transform-member-expression-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.5.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.7.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.7.0"
-    "@babel/plugin-transform-modules-umd" "^7.7.0"
-    "@babel/plugin-transform-named-capturing-groups-regex" "^7.7.0"
-    "@babel/plugin-transform-new-target" "^7.4.4"
-    "@babel/plugin-transform-object-super" "^7.5.5"
-    "@babel/plugin-transform-parameters" "^7.4.4"
-    "@babel/plugin-transform-property-literals" "^7.2.0"
-    "@babel/plugin-transform-regenerator" "^7.7.0"
-    "@babel/plugin-transform-reserved-words" "^7.2.0"
-    "@babel/plugin-transform-shorthand-properties" "^7.2.0"
-    "@babel/plugin-transform-spread" "^7.6.2"
-    "@babel/plugin-transform-sticky-regex" "^7.2.0"
-    "@babel/plugin-transform-template-literals" "^7.4.4"
-    "@babel/plugin-transform-typeof-symbol" "^7.2.0"
-    "@babel/plugin-transform-unicode-regex" "^7.7.0"
-    "@babel/types" "^7.7.1"
-    browserslist "^4.6.0"
-    core-js-compat "^3.1.1"
-    invariant "^2.2.2"
-    js-levenshtein "^1.1.3"
+    "@babel/compat-data" "^7.12.7"
+    "@babel/helper-compilation-targets" "^7.12.5"
+    "@babel/helper-module-imports" "^7.12.5"
+    "@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.7"
+    "@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.7"
+    "@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.7"
+    "@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.7"
+    core-js-compat "^3.7.0"
     semver "^5.5.0"
 
-"@babel/preset-react@7.0.0", "@babel/preset-react@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0"
+"@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-transform-react-display-name" "^7.0.0"
-    "@babel/plugin-transform-react-jsx" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-self" "^7.0.0"
-    "@babel/plugin-transform-react-jsx-source" "^7.0.0"
+    "@babel/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-typescript@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.6.0.tgz#25768cb8830280baf47c45ab1a519a9977498c98"
+"@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.0.0"
-    "@babel/plugin-transform-typescript" "^7.6.0"
+    "@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-react@^7.9.4":
+  version "7.12.7"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.7.tgz#36d61d83223b07b6ac4ec55cf016abb0f70be83b"
+  integrity sha512-wKeTdnGUP5AEYCYQIMeXMMwU7j+2opxrG0WzuZfxuuW9nhKvvALBjl67653CWamZJVefuJGI219G591RSldrqQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-display-name" "^7.12.1"
+    "@babel/plugin-transform-react-jsx" "^7.12.7"
+    "@babel/plugin-transform-react-jsx-development" "^7.12.7"
+    "@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.7.0":
   version "7.7.0"
@@ -916,17 +1276,27 @@
     pirates "^4.0.0"
     source-map-support "^0.5.16"
 
-"@babel/runtime@7.6.0":
-  version "7.6.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.12.5.tgz#ffee91da0eb4c6dae080774e94ba606368e414f4"
+  integrity sha512-roGr54CsTmNPPzZoCP1AmDXuBoNao7tnSA83TXTwt+UK5QVyh1DIJnrgYRPWKCF2flqZQXwa7Yr8v7VmLzF0YQ==
   dependencies:
-    regenerator-runtime "^0.13.2"
+    core-js-pure "^3.0.0"
+    regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
-  version "7.7.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.7.2.tgz#111a78002a5c25fc8e3361bedc9529c696b85a6a"
+"@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.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@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.2"
+    regenerator-runtime "^0.13.4"
 
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
@@ -945,7 +1315,16 @@
     "@babel/parser" "^7.1.2"
     "@babel/types" "^7.1.2"
 
-"@babel/template@^7.4.0", "@babel/template@^7.6.0", "@babel/template@^7.7.0":
+"@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.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0"
   dependencies:
@@ -968,7 +1347,7 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0":
+"@babel/traverse@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.0.tgz#503ec6669387efd182c3888c4eec07bcc45d91b2"
   dependencies:
@@ -982,7 +1361,22 @@
     globals "^11.1.0"
     lodash "^4.17.10"
 
-"@babel/traverse@^7.4.3", "@babel/traverse@^7.6.0", "@babel/traverse@^7.7.0", "@babel/traverse@^7.7.2":
+"@babel/traverse@^7.10.4", "@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.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:
@@ -1012,7 +1406,16 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0", "@babel/types@^7.7.0", "@babel/types@^7.7.1", "@babel/types@^7.7.2":
+"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@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.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:
@@ -1020,6 +1423,11 @@
     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==
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
@@ -1031,9 +1439,26 @@
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
 
-"@csstools/normalize.css@^9.0.1":
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-9.0.1.tgz#c27b391d8457d1e893f1eddeaf5e5412d12ffbb5"
+"@csstools/normalize.css@^10.1.0":
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
+  integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
+
+"@eslint/eslintrc@^0.2.2":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
+  integrity sha512-EfB5OHNYp1F4px/LI/FEnGylop7nOqkQ1LRzCM0KccA2U8tvV8w01KBv37LbO7nW4H+YhKyo2LcJhRwjjV17QQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.1.1"
+    espree "^7.3.0"
+    globals "^12.1.0"
+    ignore "^4.0.6"
+    import-fresh "^3.2.1"
+    js-yaml "^3.13.1"
+    lodash "^4.17.19"
+    minimatch "^3.0.4"
+    strip-json-comments "^3.1.1"
 
 "@hapi/address@2.x.x":
   version "2.1.2"
@@ -1047,9 +1472,10 @@
   version "8.5.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.0.tgz#2f9ce301c8898e1c3248b0a8564696b24d1a9a5a"
 
-"@hapi/joi@^15.0.0":
+"@hapi/joi@^15.1.0":
   version "15.1.1"
   resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
+  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
   dependencies:
     "@hapi/address" "2.x.x"
     "@hapi/bourne" "1.x.x"
@@ -1062,247 +1488,407 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
-"@jest/console@^24.7.1", "@jest/console@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-24.9.0.tgz#79b1bc06fb74a8cfb01cbdedf945584b1b9707f0"
-  dependencies:
-    "@jest/source-map" "^24.9.0"
-    chalk "^2.0.1"
-    slash "^2.0.0"
-
-"@jest/core@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-24.9.0.tgz#2ceccd0b93181f9c4850e74f2a9ad43d351369c4"
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/reporters" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-changed-files "^24.9.0"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-resolve-dependencies "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    jest-watcher "^24.9.0"
-    micromatch "^3.1.10"
-    p-each-series "^1.0.0"
-    realpath-native "^1.1.0"
-    rimraf "^2.5.4"
-    slash "^2.0.0"
-    strip-ansi "^5.0.0"
-
-"@jest/environment@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-24.9.0.tgz#21e3afa2d65c0586cbd6cbefe208bafade44ab18"
+"@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:
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
+    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"
 
-"@jest/fake-timers@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-24.9.0.tgz#ba3e6bf0eecd09a636049896434d306636540c93"
-  dependencies:
-    "@jest/types" "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
+"@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@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.6.2.tgz#4e04bc464014358b03ab4937805ee36a0aeb98f2"
+  integrity sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^26.6.2"
+    jest-util "^26.6.2"
+    slash "^3.0.0"
 
-"@jest/reporters@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-24.9.0.tgz#86660eff8e2b9661d042a8e98a028b8d631a5b43"
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+"@jest/core@^26.6.0", "@jest/core@^26.6.3":
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
+  integrity sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/reporters" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    exit "^0.1.2"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^26.6.2"
+    jest-config "^26.6.3"
+    jest-haste-map "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-resolve-dependencies "^26.6.3"
+    jest-runner "^26.6.3"
+    jest-runtime "^26.6.3"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    jest-watcher "^26.6.2"
+    micromatch "^4.0.2"
+    p-each-series "^2.1.0"
+    rimraf "^3.0.0"
+    slash "^3.0.0"
+    strip-ansi "^6.0.0"
+
+"@jest/environment@^26.6.0", "@jest/environment@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.6.2.tgz#ba364cc72e221e79cc8f0a99555bf5d7577cf92c"
+  integrity sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==
+  dependencies:
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+
+"@jest/fake-timers@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
+  integrity sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@sinonjs/fake-timers" "^6.0.1"
+    "@types/node" "*"
+    jest-message-util "^26.6.2"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
+
+"@jest/globals@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.6.2.tgz#5b613b78a1aa2655ae908eba638cc96a20df720a"
+  integrity sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    expect "^26.6.2"
+
+"@jest/reporters@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.6.2.tgz#1f518b99637a5f18307bd3ecf9275f6882a667f6"
+  integrity sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==
+  dependencies:
+    "@bcoe/v8-coverage" "^0.2.3"
+    "@jest/console" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.2"
-    istanbul-lib-coverage "^2.0.2"
-    istanbul-lib-instrument "^3.0.1"
-    istanbul-lib-report "^2.0.4"
-    istanbul-lib-source-maps "^3.0.1"
-    istanbul-reports "^2.2.6"
-    jest-haste-map "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
-    node-notifier "^5.4.2"
-    slash "^2.0.0"
+    graceful-fs "^4.2.4"
+    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-report "^3.0.0"
+    istanbul-lib-source-maps "^4.0.0"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^26.6.2"
+    jest-resolve "^26.6.2"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
+    slash "^3.0.0"
     source-map "^0.6.0"
-    string-length "^2.0.0"
+    string-length "^4.0.1"
+    terminal-link "^2.0.0"
+    v8-to-istanbul "^7.0.0"
+  optionalDependencies:
+    node-notifier "^8.0.0"
 
-"@jest/source-map@^24.3.0", "@jest/source-map@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-24.9.0.tgz#0e263a94430be4b41da683ccc1e6bffe2a191714"
+"@jest/source-map@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
+  integrity sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==
   dependencies:
     callsites "^3.0.0"
-    graceful-fs "^4.1.15"
+    graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
-"@jest/test-result@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-24.9.0.tgz#11796e8aa9dbf88ea025757b3152595ad06ba0ca"
+"@jest/test-result@^26.6.0", "@jest/test-result@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.6.2.tgz#55da58b62df134576cc95476efa5f7949e3f5f18"
+  integrity sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==
   dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/types" "^24.9.0"
+    "@jest/console" "^26.6.2"
+    "@jest/types" "^26.6.2"
     "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
 
-"@jest/test-sequencer@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-24.9.0.tgz#f8f334f35b625a4f2f355f2fe7e6036dad2e6b31"
+"@jest/test-sequencer@^26.6.3":
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz#98e8a45100863886d074205e8ffdc5a7eb582b17"
+  integrity sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-runner "^24.9.0"
-    jest-runtime "^24.9.0"
+    "@jest/test-result" "^26.6.2"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.6.2"
+    jest-runner "^26.6.3"
+    jest-runtime "^26.6.3"
 
-"@jest/transform@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
+"@jest/transform@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
+  integrity sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/types" "^24.9.0"
-    babel-plugin-istanbul "^5.1.0"
-    chalk "^2.0.1"
+    "@jest/types" "^26.6.2"
+    babel-plugin-istanbul "^6.0.0"
+    chalk "^4.0.0"
     convert-source-map "^1.4.0"
     fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.1.15"
-    jest-haste-map "^24.9.0"
-    jest-regex-util "^24.9.0"
-    jest-util "^24.9.0"
-    micromatch "^3.1.10"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-util "^26.6.2"
+    micromatch "^4.0.2"
     pirates "^4.0.1"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
+    slash "^3.0.0"
     source-map "^0.6.1"
-    write-file-atomic "2.4.1"
+    write-file-atomic "^3.0.0"
 
-"@jest/types@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
+"@jest/types@^26.6.0", "@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" "^1.1.1"
-    "@types/yargs" "^13.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
 
-"@mrmlnc/readdir-enhanced@^2.2.1":
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
+"@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:
-    call-me-maybe "^1.0.1"
-    glob-to-regexp "^0.3.0"
+    "@nodelib/fs.stat" "2.0.3"
+    run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@^1.1.2":
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
+"@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==
 
-"@svgr/babel-plugin-add-jsx-attribute@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1"
+"@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"
 
-"@svgr/babel-plugin-remove-jsx-attribute@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-4.2.0.tgz#297550b9a8c0c7337bea12bdfc8a80bb66f85abc"
+"@npmcli/move-file@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464"
+  integrity sha512-Uv6h1sT+0DrblvIrolFtbvM1FgWm+/sy4B3pvLp67Zys+thcukzS5ekn7HsZFGpWP4Q3fYJCljbWQE/XivMRLw==
+  dependencies:
+    mkdirp "^1.0.4"
 
-"@svgr/babel-plugin-remove-jsx-empty-expression@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-4.2.0.tgz#c196302f3e68eab6a05e98af9ca8570bc13131c7"
+"@pmmmwh/react-refresh-webpack-plugin@0.4.2":
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.2.tgz#1f9741e0bde9790a0e13272082ed7272a083620d"
+  integrity sha512-Loc4UDGutcZ+Bd56hBInkm6JyjyCwWy4t2wcDXzN8EDPANgVRj0VP8Nxn0Zq2pc+WKauZwEivQgbDGg4xZO20A==
+  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"
 
-"@svgr/babel-plugin-replace-jsx-attribute-value@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
+"@rollup/plugin-node-resolve@^7.1.1":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
+  integrity sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.8"
+    "@types/resolve" "0.0.8"
+    builtin-modules "^3.1.0"
+    is-module "^1.0.0"
+    resolve "^1.14.2"
+
+"@rollup/plugin-replace@^2.3.1":
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz#7dd84c17755d62b509577f2db37eb524d7ca88ca"
+  integrity sha512-waBhMzyAtjCL1GwZes2jaE9MjuQ/DQF2BatH3fRivUF3z0JBFrU0U6iBNC/4WR+2rLKhaAhPWDNPYp4mI6RqdQ==
+  dependencies:
+    "@rollup/pluginutils" "^3.1.0"
+    magic-string "^0.25.7"
+
+"@rollup/pluginutils@^3.0.8", "@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"
+
+"@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==
+
+"@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@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
+  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+  dependencies:
+    "@sinonjs/commons" "^1.7.0"
+
+"@surma/rollup-plugin-off-main-thread@^1.1.1":
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
+  integrity sha512-yBMPqmd1yEJo/280PAMkychuaALyQ9Lkb5q1ck3mjJrFuEobIfhnQ4J3mbvBoISmR3SWMWV+cGB/I0lCQee79A==
+  dependencies:
+    ejs "^2.6.1"
+    magic-string "^0.25.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-dynamic-title@^4.3.3":
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.3.tgz#2cdedd747e5b1b29ed4c241e46256aac8110dd93"
+"@svgr/babel-plugin-svg-em-dimensions@^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-svg-em-dimensions@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-4.2.0.tgz#9a94791c9a288108d20a9d2cc64cac820f141391"
+"@svgr/babel-plugin-transform-react-native-svg@^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-react-native-svg@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-4.2.0.tgz#151487322843359a1ca86b21a3815fd21a88b717"
+"@svgr/babel-plugin-transform-svg-component@^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-plugin-transform-svg-component@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
-
-"@svgr/babel-preset@^4.3.3":
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.3.tgz#a75d8c2f202ac0e5774e6bfc165d028b39a1316c"
-  dependencies:
-    "@svgr/babel-plugin-add-jsx-attribute" "^4.2.0"
-    "@svgr/babel-plugin-remove-jsx-attribute" "^4.2.0"
-    "@svgr/babel-plugin-remove-jsx-empty-expression" "^4.2.0"
-    "@svgr/babel-plugin-replace-jsx-attribute-value" "^4.2.0"
-    "@svgr/babel-plugin-svg-dynamic-title" "^4.3.3"
-    "@svgr/babel-plugin-svg-em-dimensions" "^4.2.0"
-    "@svgr/babel-plugin-transform-react-native-svg" "^4.2.0"
-    "@svgr/babel-plugin-transform-svg-component" "^4.2.0"
-
-"@svgr/core@^4.3.2":
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.3.tgz#b37b89d5b757dc66e8c74156d00c368338d24293"
-  dependencies:
-    "@svgr/plugin-jsx" "^4.3.3"
-    camelcase "^5.3.1"
-    cosmiconfig "^5.2.1"
+"@svgr/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.4.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@^4.3.2":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.2.tgz#1d5a082f7b929ef8f1f578950238f630e14532b8"
+"@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.4.4"
+    "@babel/types" "^7.12.6"
 
-"@svgr/plugin-jsx@^4.3.2", "@svgr/plugin-jsx@^4.3.3":
-  version "4.3.3"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
+"@svgr/plugin-jsx@^5.4.0", "@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.4.5"
-    "@svgr/babel-preset" "^4.3.3"
-    "@svgr/hast-util-to-babel-ast" "^4.3.2"
-    svg-parser "^2.0.0"
+    "@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@^4.3.1":
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
+"@svgr/plugin-svgo@^5.4.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 "^5.2.1"
-    merge-deep "^3.0.2"
+    cosmiconfig "^7.0.0"
+    deepmerge "^4.2.2"
     svgo "^1.2.2"
 
-"@svgr/webpack@4.3.2":
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.2.tgz#319d4471c8f3d5c3af35059274834d9b5b8fb956"
-  dependencies:
-    "@babel/core" "^7.4.5"
-    "@babel/plugin-transform-react-constant-elements" "^7.0.0"
-    "@babel/preset-env" "^7.4.5"
-    "@babel/preset-react" "^7.0.0"
-    "@svgr/core" "^4.3.2"
-    "@svgr/plugin-jsx" "^4.3.2"
-    "@svgr/plugin-svgo" "^4.3.1"
-    loader-utils "^1.2.3"
+"@svgr/webpack@5.4.0":
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.4.0.tgz#b68bc86e29cf007292b96ced65f80971175632e0"
+  integrity sha512-LjepnS/BSAvelnOnnzr6Gg0GcpLmnZ9ThGFK5WJtm1xOqdBE/1IACZU7MMdVzjyUkfFqGz87eRE4hFaSLiUwYg==
+  dependencies:
+    "@babel/core" "^7.9.0"
+    "@babel/plugin-transform-react-constant-elements" "^7.9.0"
+    "@babel/preset-env" "^7.9.5"
+    "@babel/preset-react" "^7.9.4"
+    "@svgr/core" "^5.4.0"
+    "@svgr/plugin-jsx" "^5.4.0"
+    "@svgr/plugin-svgo" "^5.4.0"
+    loader-utils "^2.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"
 
-"@types/babel__core@^7.1.0":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.3.tgz#e441ea7df63cd080dfcd02ab199e6d16a735fc30"
+"@types/anymatch@*":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
+  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
+  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"
@@ -1329,213 +1915,427 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/eslint-visitor-keys@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
+"@types/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@^7.2.4":
+  version "7.2.6"
+  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.6.tgz#5e9aff555a975596c03a98b59ecd103decc70c3c"
+  integrity sha512-I+1sYH+NPQ3/tVqCeUSBwTE/0heyvtXqpIopUUArlBm0Kpocb8FbMa3AZ/ASKIFpN3rnEx932TTXDbt9OXsNDw==
+  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@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/glob@^7.1.1":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
+  integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
+  dependencies:
+    "@types/minimatch" "*"
+    "@types/node" "*"
+
+"@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@^5.0.0":
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
+  integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
 
 "@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@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
+"@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-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
+"@types/json-schema@*", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.6":
+  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.3":
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
 
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
+  integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
+
+"@types/minimatch@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
+  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+
+"@types/node@*":
+  version "14.14.10"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
+  integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
+
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
+  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
+
+"@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.0.0":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.5.tgz#b6ab3bba29e16b821d84e09ecfaded462b816b00"
+  integrity sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ==
+
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
 
-"@types/stack-utils@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
+"@types/resolve@0.0.8":
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
+  integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
+  dependencies:
+    "@types/node" "*"
+
+"@types/source-list-map@*":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
+  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
+
+"@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/tapable@*", "@types/tapable@^1.0.5":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
+  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
+
+"@types/uglify-js@*":
+  version "3.11.1"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.11.1.tgz#97ff30e61a0aa6876c270b5f538737e2d6ab8ceb"
+  integrity sha512-7npvPKV+jINLu1SpSYVWG8KvyJBhBa8tmzMMdDoVc2pWUYHN8KIXlPJhjJ4LT97c4dXJA2SHL/q6ADbDriZN+Q==
+  dependencies:
+    source-map "^0.6.1"
+
+"@types/webpack-sources@*":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
+  integrity sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==
+  dependencies:
+    "@types/node" "*"
+    "@types/source-list-map" "*"
+    source-map "^0.7.3"
+
+"@types/webpack@^4.41.8":
+  version "4.41.25"
+  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.25.tgz#4d3b5aecc4e44117b376280fbfd2dc36697968c4"
+  integrity sha512-cr6kZ+4m9lp86ytQc1jPOJXgINQyz3kLLunZ57jznW+WIAL0JqZbGubQk4GlD42MuQL5JGOABrxdpqqWeovlVQ==
+  dependencies:
+    "@types/anymatch" "*"
+    "@types/node" "*"
+    "@types/tapable" "*"
+    "@types/uglify-js" "*"
+    "@types/webpack-sources" "*"
+    source-map "^0.6.0"
 
 "@types/yargs-parser@*":
   version "13.1.0"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
 
-"@types/yargs@^13.0.0":
-  version "13.0.3"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.3.tgz#76482af3981d4412d65371a318f992d33464a380"
+"@types/yargs@^15.0.0":
+  version "15.0.11"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.11.tgz#361d7579ecdac1527687bcebf9946621c12ab78c"
+  integrity sha512-jfcNBxHFYJ4nPIacsi3woz1+kvUO6s1CyeEhtnDHBjHUMNj5UlW2GynmnSgiJJEdNg9yW5C8lfoNRZrHGv5EqA==
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^2.2.0":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.6.1.tgz#e34972a24f8aba0861f9ccf7130acd74fd11e079"
+"@typescript-eslint/eslint-plugin@^4.5.0":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.9.1.tgz#66758cbe129b965fe9c63b04b405d0cf5280868b"
+  integrity sha512-QRLDSvIPeI1pz5tVuurD+cStNR4sle4avtHhxA+2uyixWGFjKzJ+EaFVRW6dA/jOgjV5DTAjOxboQkRDE8cRlQ==
   dependencies:
-    "@typescript-eslint/experimental-utils" "2.6.1"
-    eslint-utils "^1.4.2"
+    "@typescript-eslint/experimental-utils" "4.9.1"
+    "@typescript-eslint/scope-manager" "4.9.1"
+    debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
-    regexpp "^2.0.1"
+    regexpp "^3.0.0"
+    semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.6.1":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.6.1.tgz#eddaca17a399ebf93a8628923233b4f93793acfd"
+"@typescript-eslint/experimental-utils@4.9.1", "@typescript-eslint/experimental-utils@^4.0.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.9.1.tgz#86633e8395191d65786a808dc3df030a55267ae2"
+  integrity sha512-c3k/xJqk0exLFs+cWSJxIjqLYwdHCuLWhnpnikmPQD2+NGAx9KjLYlBDcSI81EArh9FDYSL6dslAUSwILeWOxg==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.6.1"
+    "@typescript-eslint/scope-manager" "4.9.1"
+    "@typescript-eslint/types" "4.9.1"
+    "@typescript-eslint/typescript-estree" "4.9.1"
     eslint-scope "^5.0.0"
+    eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^2.2.0":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.6.1.tgz#3c00116baa0d696bc334ca18ac5286b34793993c"
+"@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/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.6.1"
-    "@typescript-eslint/typescript-estree" "2.6.1"
-    eslint-visitor-keys "^1.1.0"
+    "@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/typescript-estree@2.6.1":
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.6.1.tgz#fb363dd4ca23384745c5ea4b7f4c867432b00d31"
+"@typescript-eslint/parser@^4.5.0":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.9.1.tgz#2d74c4db5dd5117379a9659081a4d1ec02629055"
+  integrity sha512-Gv2VpqiomvQ2v4UL+dXlQcZ8zCX4eTkoIW+1aGVWT6yTO+6jbxsw7yQl2z2pPl/4B9qa5JXeIbhJpONKjXIy3g==
   dependencies:
+    "@typescript-eslint/scope-manager" "4.9.1"
+    "@typescript-eslint/types" "4.9.1"
+    "@typescript-eslint/typescript-estree" "4.9.1"
     debug "^4.1.1"
-    glob "^7.1.4"
+
+"@typescript-eslint/scope-manager@4.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.9.1.tgz#cc2fde310b3f3deafe8436a924e784eaab265103"
+  integrity sha512-sa4L9yUfD/1sg9Kl8OxPxvpUcqxKXRjBeZxBuZSSV1v13hjfEJkn84n0An2hN8oLQ1PmEl2uA6FkI07idXeFgQ==
+  dependencies:
+    "@typescript-eslint/types" "4.9.1"
+    "@typescript-eslint/visitor-keys" "4.9.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.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.9.1.tgz#a1a7dd80e4e5ac2c593bc458d75dd1edaf77faa2"
+  integrity sha512-fjkT+tXR13ks6Le7JiEdagnwEFc49IkOyys7ueWQ4O8k4quKPwPJudrwlVOJCUQhXo45PrfIvIarcrEjFTNwUA==
+
+"@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.unescape "4.0.1"
-    semver "^6.3.0"
+    lodash "^4.17.15"
+    semver "^7.3.2"
+    tsutils "^3.17.1"
+
+"@typescript-eslint/typescript-estree@4.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.9.1.tgz#6e5b86ff5a5f66809e1f347469fadeec69ac50bf"
+  integrity sha512-bzP8vqwX6Vgmvs81bPtCkLtM/Skh36NE6unu6tsDeU/ZFoYthlTXbBmpIrvosgiDKlWTfb2ZpPELHH89aQjeQw==
+  dependencies:
+    "@typescript-eslint/types" "4.9.1"
+    "@typescript-eslint/visitor-keys" "4.9.1"
+    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"
 
-"@webassemblyjs/ast@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359"
+"@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.9.1":
+  version "4.9.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.9.1.tgz#d76374a58c4ead9e92b454d186fea63487b25ae1"
+  integrity sha512-9gspzc6UqLQHd7lXQS7oWs+hrYggspv/rk6zzEMhCbYwPE/sF7oxo7GAjkS35Tdlt7wguIG+ViWCPtVZHz/ybQ==
+  dependencies:
+    "@typescript-eslint/types" "4.9.1"
+    eslint-visitor-keys "^2.0.0"
+
+"@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.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/wast-parser" "1.8.5"
+    "@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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.8.5.tgz#1ba926a2923613edce496fd5b02e8ce8a5f49721"
+"@webassemblyjs/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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.8.5.tgz#c49dad22f645227c5edb610bdb9697f1aab721f7"
+"@webassemblyjs/helper-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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.8.5.tgz#fea93e429863dd5e4338555f42292385a653f204"
+"@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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.8.5.tgz#9a740ff48e3faa3022b1dff54423df9aa293c25e"
+"@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.8.5"
+    "@webassemblyjs/wast-printer" "1.9.0"
 
-"@webassemblyjs/helper-fsm@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-fsm/-/helper-fsm-1.8.5.tgz#ba0b7d3b3f7e4733da6059c9332275d860702452"
+"@webassemblyjs/helper-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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-module-context/-/helper-module-context-1.8.5.tgz#def4b9927b0101dc8cbbd8d1edb5b7b9c82eb245"
+"@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.8.5"
-    mamacro "^0.0.3"
+    "@webassemblyjs/ast" "1.9.0"
 
-"@webassemblyjs/helper-wasm-bytecode@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.8.5.tgz#537a750eddf5c1e932f3744206551c91c1b93e61"
+"@webassemblyjs/helper-wasm-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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.8.5.tgz#74ca6a6bcbe19e50a3b6b462847e69503e6bfcbf"
+"@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.8.5"
-    "@webassemblyjs/helper-buffer" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/wasm-gen" "1.8.5"
+    "@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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.8.5.tgz#712329dbef240f36bf57bd2f7b8fb9bf4154421e"
+"@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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.8.5.tgz#044edeb34ea679f3e04cd4fd9824d5e35767ae10"
+"@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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.8.5.tgz#a8bf3b5d8ffe986c7c1e373ccbdc2a0915f0cedc"
-
-"@webassemblyjs/wasm-edit@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.8.5.tgz#962da12aa5acc1c131c81c4232991c82ce56e01a"
-  dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-buffer" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/helper-wasm-section" "1.8.5"
-    "@webassemblyjs/wasm-gen" "1.8.5"
-    "@webassemblyjs/wasm-opt" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
-    "@webassemblyjs/wast-printer" "1.8.5"
-
-"@webassemblyjs/wasm-gen@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.8.5.tgz#54840766c2c1002eb64ed1abe720aded714f98bc"
-  dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/ieee754" "1.8.5"
-    "@webassemblyjs/leb128" "1.8.5"
-    "@webassemblyjs/utf8" "1.8.5"
-
-"@webassemblyjs/wasm-opt@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.8.5.tgz#b24d9f6ba50394af1349f510afa8ffcb8a63d264"
-  dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-buffer" "1.8.5"
-    "@webassemblyjs/wasm-gen" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
-
-"@webassemblyjs/wasm-parser@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.8.5.tgz#21576f0ec88b91427357b8536383668ef7c66b8d"
-  dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/helper-api-error" "1.8.5"
-    "@webassemblyjs/helper-wasm-bytecode" "1.8.5"
-    "@webassemblyjs/ieee754" "1.8.5"
-    "@webassemblyjs/leb128" "1.8.5"
-    "@webassemblyjs/utf8" "1.8.5"
-
-"@webassemblyjs/wast-parser@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-parser/-/wast-parser-1.8.5.tgz#e10eecd542d0e7bd394f6827c49f3df6d4eefb8c"
-  dependencies:
-    "@webassemblyjs/ast" "1.8.5"
-    "@webassemblyjs/floating-point-hex-parser" "1.8.5"
-    "@webassemblyjs/helper-api-error" "1.8.5"
-    "@webassemblyjs/helper-code-frame" "1.8.5"
-    "@webassemblyjs/helper-fsm" "1.8.5"
+"@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.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.8.5.tgz#114bbc481fd10ca0e23b3560fa812748b0bae5bc"
+"@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.8.5"
-    "@webassemblyjs/wast-parser" "1.8.5"
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/wast-parser" "1.9.0"
     "@xtuc/long" "4.2.2"
 
 "@xtuc/ieee754@^1.2.0":
@@ -1546,9 +2346,10 @@
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
 
-abab@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
+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==
 
 abbrev@1:
   version "1.1.1"
@@ -1569,44 +2370,38 @@ accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-globals@^4.1.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.0.tgz#e3b6f8da3c1552a95ae627571f7dd6923bb54103"
-  dependencies:
-    acorn "^6.0.1"
-    acorn-walk "^6.0.1"
-
-acorn-globals@^4.3.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
+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 "^6.0.1"
-    acorn-walk "^6.0.1"
-
-acorn-jsx@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.1.0.tgz#294adb71b57398b0680015f0a38c563ee1db5384"
-
-acorn-walk@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.0.tgz#c957f4a1460da46af4a0388ce28b4c99355b0cbc"
+    acorn "^7.1.1"
+    acorn-walk "^7.1.1"
 
-acorn@^5.5.3:
-  version "5.7.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
+acorn-jsx@^5.3.1:
+  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@^6.0.1:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.0.2.tgz#6a459041c320ab17592c6317abbfdf4bbaa98ca4"
+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@^6.0.4, acorn@^6.2.1:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.3.0.tgz#0087509119ffa4fc0a0041d1e93a417e68cb856e"
+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==
 
 acorn@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
 
+acorn@^7.1.1, 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==
+
 address@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
@@ -1615,15 +2410,21 @@ address@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
 
-adjust-sourcemap-loader@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-2.0.0.tgz#6471143af75ec02334b219f54bc7970c52fb29a4"
+adjust-sourcemap-loader@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz#5ae12fb5b7b1c585e80bbb5a63ec163a1a45e61e"
+  integrity sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==
   dependencies:
-    assert "1.4.1"
-    camelcase "5.0.0"
-    loader-utils "1.2.3"
-    object-path "0.11.4"
-    regex-parser "2.2.10"
+    loader-utils "^2.0.0"
+    regex-parser "^2.2.11"
+
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
 
 ajv-errors@^1.0.0:
   version "1.0.0"
@@ -1637,14 +2438,10 @@ ajv-keywords@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
 
-ajv@^5.3.0:
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
-  dependencies:
-    co "^4.6.0"
-    fast-deep-equal "^1.0.0"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.3.0"
+ajv-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:
   version "6.5.4"
@@ -1664,21 +2461,35 @@ ajv@^6.10.0, ajv@^6.10.2:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.12.3, 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"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
 
+ansi-align@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
+  integrity sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==
+  dependencies:
+    string-width "^3.0.0"
+
 ansi-colors@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.1.0.tgz#dcfaacc90ef9187de413ec3ef8d5eb981a98808f"
 
-ansi-escapes@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.1.0.tgz#f73207bb81207d75fd6c83f125af26eea378ca30"
-
-ansi-escapes@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
 ansi-escapes@^4.2.1:
   version "4.2.1"
@@ -1686,7 +2497,14 @@ ansi-escapes@^4.2.1:
   dependencies:
     type-fest "^0.5.2"
 
-ansi-html@0.0.7:
+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@0.0.7, ansi-html@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
 
@@ -1698,13 +2516,14 @@ ansi-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
 
-ansi-regex@^4.0.0, ansi-regex@^4.1.0:
+ansi-regex@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.1.0.tgz#8b9f8f08cf1acb843756a839ca8c7e3168c51997"
 
-ansi-styles@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+ansi-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.0, ansi-styles@^3.2.1:
   version "3.2.1"
@@ -1712,6 +2531,13 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   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"
@@ -1719,6 +2545,14 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
+anymatch@^3.0.3, anymatch@~3.1.1:
+  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"
+
 aproba@^1.0.3, aproba@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
@@ -1736,12 +2570,13 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
-aria-query@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-3.0.0.tgz#65b3fcc1ca1155a8c9ae64d6eee297f15d5133cc"
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
   dependencies:
-    ast-types-flow "0.0.7"
-    commander "^2.11.0"
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
 
 arity-n@^1.0.4:
   version "1.0.4"
@@ -1759,10 +2594,6 @@ arr-union@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
 
-array-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
-
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
@@ -1771,12 +2602,16 @@ 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"
+array-includes@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.2.tgz#a8db03e0b88c8c6aeddc49cb132f9bcab4ebf9c8"
+  integrity sha512-w2GspexNQpx+PutG3QpT437/BenZBj0M/MZGn5mzv/MofYqo0xmRHzn4lFsoDlWJ+THYsGJmFlW68WlDFx7VRw==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+    get-intrinsic "^1.0.1"
+    is-string "^1.0.5"
 
 array-union@^1.0.1:
   version "1.0.2"
@@ -1784,6 +2619,11 @@ array-union@^1.0.1:
   dependencies:
     array-uniq "^1.0.1"
 
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
 array-uniq@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
@@ -1792,9 +2632,29 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
-arrify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
+array.prototype.flat@^1.2.3:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz#6ef638b43312bd401b4c6199fdec7e2dc9e9a123"
+  integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+
+array.prototype.flatmap@^1.2.3:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz#94cfd47cc1556ec0747d97f7c7738c58122004c9"
+  integrity sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+    function-bind "^1.1.1"
+
+arrify@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
+  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
 
 asap@~2.0.6:
   version "2.0.6"
@@ -1818,7 +2678,7 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
 
-assert@1.4.1, assert@^1.1.1:
+assert@^1.1.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
   dependencies:
@@ -1828,7 +2688,7 @@ assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
 
-ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
+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"
 
@@ -1836,10 +2696,6 @@ astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
 
-async-each@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
-
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -1848,14 +2704,22 @@ async-limiter@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
 
-async@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+async@^2.6.2:
+  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"
 
 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==
+
 atob@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
@@ -1880,28 +2744,25 @@ aws4@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
 
-axobject-query@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
-  dependencies:
-    ast-types-flow "0.0.7"
+axe-core@^4.0.2:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.1.tgz#70a7855888e287f7add66002211a423937063eaf"
+  integrity sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==
 
-babel-code-frame@^6.22.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
-  dependencies:
-    chalk "^1.1.3"
-    esutils "^2.0.2"
-    js-tokens "^3.0.2"
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-eslint@10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
+babel-eslint@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
@@ -1922,59 +2783,72 @@ babel-extract-comments@^1.0.0:
   dependencies:
     babylon "^6.18.0"
 
-babel-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.9.0.tgz#3fc327cb8467b89d14d7bc70e315104a783ccd54"
-  dependencies:
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/babel__core" "^7.1.0"
-    babel-plugin-istanbul "^5.1.0"
-    babel-preset-jest "^24.9.0"
-    chalk "^2.4.2"
-    slash "^2.0.0"
+babel-jest@^26.6.0, babel-jest@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
+  integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
+  dependencies:
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/babel__core" "^7.1.7"
+    babel-plugin-istanbul "^6.0.0"
+    babel-preset-jest "^26.6.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    slash "^3.0.0"
 
-babel-loader@8.0.6:
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
+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.0.0"
-    loader-utils "^1.0.2"
-    mkdirp "^0.5.1"
+    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.0, babel-plugin-dynamic-import-node@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
+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@^5.1.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
+babel-plugin-istanbul@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
+  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
-    find-up "^3.0.0"
-    istanbul-lib-instrument "^3.3.0"
-    test-exclude "^5.2.3"
-
-babel-plugin-jest-hoist@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-24.9.0.tgz#4f837091eb407e01447c8843cbec546d0002d756"
-  dependencies:
+    "@istanbuljs/load-nyc-config" "^1.0.0"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-instrument "^4.0.0"
+    test-exclude "^6.0.0"
+
+babel-plugin-jest-hoist@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz#8185bd030348d254c6d7dd974355e6a28b21e62d"
+  integrity sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
+  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@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.6.1.tgz#41f7ead616fc36f6a93180e89697f69f51671181"
+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.4.2"
-    cosmiconfig "^5.2.0"
-    resolve "^1.10.0"
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
 
-babel-plugin-named-asset-import@^0.3.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.4.tgz#4a8fc30e9a3e2b1f5ed36883386ab2d84e1089bd"
+babel-plugin-named-asset-import@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
+  integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
 
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
@@ -1991,32 +2865,51 @@ babel-plugin-transform-react-remove-prop-types@0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
 
-babel-preset-jest@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-24.9.0.tgz#192b521e2217fb1d1f67cf73f70c336650ad3cdc"
-  dependencies:
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    babel-plugin-jest-hoist "^24.9.0"
-
-babel-preset-react-app@^9.0.2:
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.0.2.tgz#247d37e883d6d6f4b4691e5f23711bb2dd80567d"
-  dependencies:
-    "@babel/core" "7.6.0"
-    "@babel/plugin-proposal-class-properties" "7.5.5"
-    "@babel/plugin-proposal-decorators" "7.6.0"
-    "@babel/plugin-proposal-object-rest-spread" "7.5.5"
-    "@babel/plugin-syntax-dynamic-import" "7.2.0"
-    "@babel/plugin-transform-destructuring" "7.6.0"
-    "@babel/plugin-transform-flow-strip-types" "7.4.4"
-    "@babel/plugin-transform-react-display-name" "7.2.0"
-    "@babel/plugin-transform-runtime" "7.6.0"
-    "@babel/preset-env" "7.6.0"
-    "@babel/preset-react" "7.0.0"
-    "@babel/preset-typescript" "7.6.0"
-    "@babel/runtime" "7.6.0"
-    babel-plugin-dynamic-import-node "2.3.0"
-    babel-plugin-macros "2.6.1"
+babel-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@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz#747872b1171df032252426586881d62d31798fee"
+  integrity sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==
+  dependencies:
+    babel-plugin-jest-hoist "^26.6.2"
+    babel-preset-current-node-syntax "^1.0.0"
+
+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"
 
 babel-runtime@^6.26.0:
@@ -2064,6 +2957,16 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
+bfj@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
+  integrity sha512-+e/UqUzwmzJamNF50tBV6tZPTORow7gQ96iFow+8b562OdMpEK0BcJEq2OSPEDmAbSMBQ7PKZ87ubFkgxpYWgw==
+  dependencies:
+    bluebird "^3.5.5"
+    check-types "^11.1.1"
+    hoopy "^0.1.4"
+    tryer "^1.0.1"
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
@@ -2076,6 +2979,11 @@ binary-extensions@^1.0.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
 
+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==
+
 bluebird@^3.5.5:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
@@ -2084,21 +2992,6 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
 
-body-parser@1.18.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
-  dependencies:
-    bytes "3.0.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.1"
-    http-errors "~1.6.2"
-    iconv-lite "0.4.19"
-    on-finished "~2.3.0"
-    qs "6.5.1"
-    raw-body "2.3.2"
-    type-is "~1.6.15"
-
 body-parser@1.19.0:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
@@ -2130,6 +3023,20 @@ boolbase@^1.0.0, boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
 
+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"
+
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -2137,7 +3044,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^2.3.0, braces@^2.3.1, braces@^2.3.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"
   dependencies:
@@ -2152,19 +3059,21 @@ braces@^2.3.0, braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
+braces@^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:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
 
-browser-process-hrtime@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
-
-browser-resolve@^1.11.3:
-  version "1.11.3"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
-  dependencies:
-    resolve "1.1.7"
+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==
 
 browserify-aes@^1.0.0, browserify-aes@^1.0.4:
   version "1.2.0"
@@ -2219,15 +3128,17 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
+browserslist@4.14.2:
+  version "4.14.2"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.2.tgz#1b3cec458a1ba87588cc5e9be62f19b6d48813ce"
+  integrity sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==
   dependencies:
-    caniuse-lite "^1.0.30000989"
-    electron-to-chromium "^1.3.247"
-    node-releases "^1.1.29"
+    caniuse-lite "^1.0.30001125"
+    electron-to-chromium "^1.3.564"
+    escalade "^3.0.2"
+    node-releases "^1.1.61"
 
-browserslist@^4.0.0, browserslist@^4.1.1:
+browserslist@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.1.2.tgz#632feb46d1cbdd6bb1a6eb660eff68f2345ae7e7"
   dependencies:
@@ -2235,7 +3146,18 @@ browserslist@^4.0.0, browserslist@^4.1.1:
     electron-to-chromium "^1.3.73"
     node-releases "^1.0.0-alpha.12"
 
-browserslist@^4.6.0, browserslist@^4.6.4, browserslist@^4.7.2:
+browserslist@^4.14.5, browserslist@^4.15.0, browserslist@^4.6.2:
+  version "4.15.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.15.0.tgz#3d48bbca6a3f378e86102ffd017d9a03f122bdb0"
+  integrity sha512-IJ1iysdMkGmjjYeRlDU8PQejVwxvVO5QOfXH7ylW31GO6LwNRSmm/SgRXtNsEXqMLl2e+2H5eEJ7sfynF8TCaQ==
+  dependencies:
+    caniuse-lite "^1.0.30001164"
+    colorette "^1.2.1"
+    electron-to-chromium "^1.3.612"
+    escalade "^3.1.1"
+    node-releases "^1.1.67"
+
+browserslist@^4.6.4, browserslist@^4.7.2:
   version "4.7.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.2.tgz#1bb984531a476b5d389cedecb195b2cd69fb1348"
   dependencies:
@@ -2273,6 +3195,11 @@ builtin-modules@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
 
+builtin-modules@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
+  integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
+
 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"
@@ -2306,6 +3233,29 @@ cacache@^12.0.2:
     unique-filename "^1.1.1"
     y18n "^4.0.0"
 
+cacache@^15.0.5:
+  version "15.0.5"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.5.tgz#69162833da29170d6732334643c60e005f5f17d0"
+  integrity sha512-lloiL22n7sOjEEXdL8NAjTgv9a1u43xICE9/203qonkZUCj5X1UEWIdf2/Y0d6QcCtMzbKQyhrcDbdvlZTs/+A==
+  dependencies:
+    "@npmcli/move-file" "^1.0.1"
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    glob "^7.1.4"
+    infer-owner "^1.0.4"
+    lru-cache "^6.0.0"
+    minipass "^3.1.1"
+    minipass-collect "^1.0.2"
+    minipass-flush "^1.0.5"
+    minipass-pipeline "^1.2.2"
+    mkdirp "^1.0.3"
+    p-map "^4.0.0"
+    promise-inflight "^1.0.1"
+    rimraf "^3.0.2"
+    ssri "^8.0.0"
+    tar "^6.0.2"
+    unique-filename "^1.1.1"
+
 cache-base@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
@@ -2320,48 +3270,52 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.0.0"
 
-call-me-maybe@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
-
-caller-callsite@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-callsite/-/caller-callsite-2.0.0.tgz#847e0fce0a223750a9a027c54b33731ad3154134"
-  dependencies:
-    callsites "^2.0.0"
-
-caller-path@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/caller-path/-/caller-path-2.0.0.tgz#468f83044e369ab2010fac5f06ceee15bb2cb1f4"
+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.0"
+  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.0.tgz#24127054bb3f9bdcb4b1fb82418186072f77b8ce"
+  integrity sha512-AEXsYIyyDY3MCzbwdhzG3Jx1R0J2wetQyUynn6dYHAO+bg8l1k7jwZtRv4ryryFs7EP+NDlikJlVe59jr0cM2w==
   dependencies:
-    caller-callsite "^2.0.0"
-
-callsites@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.0"
 
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
 
-camel-case@3.0.x:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
+camel-case@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
+  integrity sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==
   dependencies:
-    no-case "^2.2.0"
-    upper-case "^1.1.1"
+    pascal-case "^3.1.2"
+    tslib "^2.0.3"
+
+camelcase@5.3.1, 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@5.0.0, camelcase@^5.0.0:
+camelcase@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
 
-camelcase@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
-
-camelcase@^5.2.0, camelcase@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
+camelcase@^6.0.0, camelcase@^6.1.0, 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-api@^3.0.0:
   version "3.0.0"
@@ -2376,19 +3330,25 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000888:
   version "1.0.30000889"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000889.tgz#53e266c83e725ad3bd2e4a3ea76d5031a8aa4c3e"
 
-caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001004, caniuse-lite@^1.0.30001006:
+caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001004, caniuse-lite@^1.0.30001006:
   version "1.0.30001008"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001008.tgz#b8841b1df78a9f5ed9702537ef592f1f8772c0d9"
 
+caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001164:
+  version "1.0.30001165"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
+  integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
   dependencies:
     rsvp "^4.8.4"
 
-case-sensitive-paths-webpack-plugin@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.2.0.tgz#3371ef6365ef9c25fa4b81c16ace0e9c7dc58c3e"
+case-sensitive-paths-webpack-plugin@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
+  integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -2402,17 +3362,7 @@ chalk@2.4.2, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
-  dependencies:
-    ansi-styles "^2.2.1"
-    escape-string-regexp "^1.0.2"
-    has-ansi "^2.0.0"
-    strip-ansi "^3.0.0"
-    supports-color "^2.0.0"
-
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
+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:
@@ -2420,32 +3370,36 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
+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"
 
-chokidar@^2.0.0, chokidar@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
+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:
-    anymatch "^2.0.0"
-    async-each "^1.0.0"
-    braces "^2.3.0"
-    glob-parent "^3.1.0"
-    inherits "^2.0.1"
-    is-binary-path "^1.0.0"
-    is-glob "^4.0.0"
-    lodash.debounce "^4.0.8"
-    normalize-path "^2.1.1"
-    path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
-    upath "^1.0.5"
-  optionalDependencies:
-    fsevents "^1.2.2"
+    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==
+
+check-types@^11.1.1:
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
+  integrity sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ==
 
-chokidar@^2.0.4:
+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"
@@ -2461,6 +3415,21 @@ chokidar@^2.0.4:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.2.2, chokidar@^3.4.1:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
+  integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+  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.1.2"
+
 chownr@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
@@ -2469,6 +3438,11 @@ chownr@^1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
 
+chownr@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
+  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+
 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"
@@ -2486,6 +3460,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+cjs-module-lexer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f"
+  integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -2495,27 +3474,22 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css@4.2.x:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
+clean-css@^4.2.3:
+  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@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  dependencies:
-    restore-cursor "^2.0.0"
-
-cli-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
-  dependencies:
-    restore-cursor "^3.1.0"
-
-cli-width@^2.0.0:
+clean-stack@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
+cli-boxes@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
+  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
 
 cliui@^4.0.0:
   version "4.1.0"
@@ -2533,15 +3507,14 @@ cliui@^5.0.0:
     strip-ansi "^5.2.0"
     wrap-ansi "^5.1.0"
 
-clone-deep@^0.2.4:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-0.2.4.tgz#4e73dd09e9fb971cc38670c5dced9c1896481cc6"
+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:
-    for-own "^0.1.3"
-    is-plain-object "^2.0.1"
-    kind-of "^3.0.2"
-    lazy-cache "^1.0.3"
-    shallow-clone "^0.1.2"
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^6.2.0"
 
 clone-deep@^4.0.1:
   version "4.0.1"
@@ -2551,6 +3524,13 @@ clone-deep@^4.0.1:
     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"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -2573,6 +3553,11 @@ 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"
 
+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==
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -2586,11 +3571,18 @@ color-convert@^1.9.0, color-convert@^1.9.1:
   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.0.0:
+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"
 
@@ -2608,6 +3600,11 @@ color@^3.0.0:
     color-convert "^1.9.1"
     color-string "^1.5.2"
 
+colorette@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
+  integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
+
 colors@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
@@ -2624,18 +3621,15 @@ combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@2.17.x, commander@~2.17.1:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
-
-commander@^2.11.0:
-  version "2.18.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.18.0.tgz#2bf063ddee7c7891176981a2cc798e5754bc6970"
-
 commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
 
+commander@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -2654,21 +3648,23 @@ compose-function@3.0.3:
   dependencies:
     arity-n "^1.0.4"
 
-compressible@~2.0.14:
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.15.tgz#857a9ab0a7e5a07d8d837ed43fe2defff64fe212"
+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.36.0 < 2"
+    mime-db ">= 1.43.0 < 2"
 
-compression@^1.5.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.3.tgz#27e0e176aaf260f7f2c2813c3e440adb9f1993db"
+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.14"
+    compressible "~2.0.16"
     debug "2.6.9"
-    on-headers "~1.0.1"
+    on-headers "~1.0.2"
     safe-buffer "5.1.2"
     vary "~1.1.2"
 
@@ -2700,13 +3696,27 @@ concurrently@^5.0.0:
     tree-kill "^1.2.1"
     yargs "^12.0.5"
 
-confusing-browser-globals@^1.0.9:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
+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"
 
-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"
+confusing-browser-globals@^1.0.10:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz#30d1e7f3d1b882b25ec4933d1d1adac353d20a59"
+  integrity sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA==
+
+connect-history-api-fallback@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
+  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
 
 console-browserify@^1.1.0:
   version "1.1.0"
@@ -2726,10 +3736,6 @@ contains-path@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
 
-content-disposition@0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
-
 content-disposition@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
@@ -2741,9 +3747,9 @@ content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-convert-source-map@1.6.0, convert-source-map@^1.1.0, convert-source-map@^1.4.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.6.0.tgz#51b537a8c43e0f04dec1993bffcdd504e758ac20"
+convert-source-map@1.7.0, 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"
 
@@ -2751,9 +3757,9 @@ convert-source-map@^0.3.3:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
 
-convert-source-map@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
+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"
 
@@ -2761,10 +3767,6 @@ cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
 
-cookie@0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
-
 cookie@0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
@@ -2785,21 +3787,28 @@ copy-descriptor@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
 
-core-js-compat@^3.1.1:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.4.0.tgz#2a47c51d3dc026d290018cacd987495f68a47c75"
+core-js-compat@^3.6.2, core-js-compat@^3.7.0:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.8.1.tgz#8d1ddd341d660ba6194cbe0ce60f4c794c87a36e"
+  integrity sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==
   dependencies:
-    browserslist "^4.7.2"
-    semver "^6.3.0"
+    browserslist "^4.15.0"
+    semver "7.0.0"
 
-core-js@3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.2.1.tgz#cd41f38534da6cc59f7db050fe67307de9868b09"
+core-js-pure@^3.0.0:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.8.1.tgz#23f84048f366fdfcf52d3fd1c68fec349177d119"
+  integrity sha512-Se+LaxqXlVXGvmexKGPvnUIYC1jwXu1H6Pkyb3uBM5d8/NELMYCHs/4/roD7721NxrTLyv7e5nXd5/QLBO+10g==
 
 core-js@^2.4.0:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
 
+core-js@^3.6.5:
+  version "3.8.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.1.tgz#f51523668ac8a294d1285c3b9db44025fda66d47"
+  integrity sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg==
+
 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"
@@ -2821,14 +3830,27 @@ cosmiconfig@^5.0.0:
     js-yaml "^3.9.0"
     parse-json "^4.0.0"
 
-cosmiconfig@^5.2.0, cosmiconfig@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
+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:
-    import-fresh "^2.0.0"
-    is-directory "^0.3.1"
-    js-yaml "^3.13.1"
-    parse-json "^4.0.0"
+    "@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"
 
 create-ecdh@^4.0.0:
   version "4.0.3"
@@ -2858,7 +3880,16 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-spawn@7.0.3, 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"
+
+cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   dependencies:
@@ -2884,6 +3915,16 @@ crypto-browserify@^3.11.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=
+
+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@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
@@ -2908,21 +3949,23 @@ css-has-pseudo@^0.10.0:
     postcss "^7.0.6"
     postcss-selector-parser "^5.0.0-rc.4"
 
-css-loader@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-2.1.1.tgz#d8254f72e412bb2238bb44dd674ffbef497333ea"
+css-loader@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e"
+  integrity sha512-rdezjCjScIrsL8BSYszgT4s476IcNKt6yX69t0pHjJVnPUTDpn4WfIpDQTN3wCJvUvfsz/mFjuGOekf3PY3NUg==
   dependencies:
-    camelcase "^5.2.0"
-    icss-utils "^4.1.0"
-    loader-utils "^1.2.3"
-    normalize-path "^3.0.0"
-    postcss "^7.0.14"
+    camelcase "^6.0.0"
+    cssesc "^3.0.0"
+    icss-utils "^4.1.1"
+    loader-utils "^2.0.0"
+    postcss "^7.0.32"
     postcss-modules-extract-imports "^2.0.0"
-    postcss-modules-local-by-default "^2.0.6"
-    postcss-modules-scope "^2.1.0"
-    postcss-modules-values "^2.0.0"
-    postcss-value-parser "^3.3.0"
-    schema-utils "^1.0.0"
+    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.1"
+    semver "^7.3.2"
 
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
@@ -3088,19 +4131,22 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.37"
 
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.4.tgz#8cd52e8a3acfd68d3aed38ee0a640177d2f9d797"
+cssom@^0.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.4:
+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@^1.0.0, cssstyle@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.1.1.tgz#18b038a9c44d65f7a8e428a653b9f6fe42faf5fb"
+cssstyle@^2.2.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.x"
+    cssom "~0.3.6"
 
 cyclist@~0.2.2:
   version "0.2.2"
@@ -3113,9 +4159,10 @@ d@1, d@^1.0.1:
     es5-ext "^0.10.50"
     type "^1.0.1"
 
-damerau-levenshtein@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
+damerau-levenshtein@^1.0.6:
+  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"
@@ -3123,21 +4170,14 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-data-urls@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.0.1.tgz#d416ac3896918f29ca84d81085bc3705834da579"
-  dependencies:
-    abab "^2.0.0"
-    whatwg-mimetype "^2.1.0"
-    whatwg-url "^7.0.0"
-
-data-urls@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
+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.0"
-    whatwg-mimetype "^2.2.0"
-    whatwg-url "^7.0.0"
+    abab "^2.0.3"
+    whatwg-mimetype "^2.3.0"
+    whatwg-url "^8.0.0"
 
 date-fns@^2.0.1:
   version "2.7.0"
@@ -3148,7 +4188,7 @@ date-now@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
 
-debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
+debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
@@ -3166,6 +4206,13 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
+debug@^3.1.1, 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@^3.2.5:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -3182,16 +4229,27 @@ decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
 
-decamelize@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-2.0.0.tgz#656d7bbc8094c4c788ea53c5840908c9c7d063c7"
-  dependencies:
-    xregexp "4.0.0"
+decimal.js@^10.2.0:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
+  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
 
 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"
 
+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"
+
+dedent@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+  integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
+
 deep-equal@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
@@ -3200,9 +4258,15 @@ deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
 
-deep-is@~0.1.3:
+deep-is@^0.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=
+
+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==
 
 default-gateway@^4.2.0:
   version "4.2.0"
@@ -3211,6 +4275,11 @@ default-gateway@^4.2.0:
     execa "^1.0.0"
     ip-regex "^2.1.0"
 
+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.2, define-properties@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
@@ -3236,16 +4305,18 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-del@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
+del@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
+  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
   dependencies:
+    "@types/glob" "^7.1.1"
     globby "^6.1.0"
-    is-path-cwd "^1.0.0"
-    is-path-in-cwd "^1.0.0"
-    p-map "^1.1.1"
-    pify "^3.0.0"
-    rimraf "^2.2.8"
+    is-path-cwd "^2.0.0"
+    is-path-in-cwd "^2.0.0"
+    p-map "^2.0.0"
+    pify "^4.0.1"
+    rimraf "^2.6.3"
 
 delayed-stream@~1.0.0:
   version "1.0.0"
@@ -3255,11 +4326,7 @@ delegates@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
 
-depd@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
-
-depd@~1.1.1, depd@~1.1.2:
+depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
 
@@ -3278,9 +4345,10 @@ detect-libc@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
 
-detect-newline@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
+detect-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"
@@ -3293,9 +4361,10 @@ detect-port-alt@1.1.6:
     address "^1.0.1"
     debug "^2.6.0"
 
-diff-sequences@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
+diff-sequences@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
+  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
 
 diffie-hellman@^5.0.0:
   version "5.0.3"
@@ -3305,12 +4374,12 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-dir-glob@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/dir-glob/-/dir-glob-2.0.0.tgz#0b205d2b6aef98238ca286598a8204d29d0a0034"
+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:
-    arrify "^1.0.1"
-    path-type "^3.0.0"
+    path-type "^4.0.0"
 
 dns-equal@^1.0.0:
   version "1.0.0"
@@ -3373,11 +4442,12 @@ domelementtype@~1.1.1:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
 
-domexception@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
+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 "^4.0.2"
+    webidl-conversions "^5.0.0"
 
 domhandler@2.1:
   version "2.1.0"
@@ -3405,19 +4475,40 @@ domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+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"
+
 dot-prop@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
   dependencies:
     is-obj "^1.0.0"
 
+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"
+
 dotenv-expand@5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
 
-dotenv@6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
+dotenv@8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
+  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+
+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"
@@ -3443,10 +4534,20 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.295:
+ejs@^2.6.1:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
+  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
+
+electron-to-chromium@^1.3.295:
   version "1.3.306"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.306.tgz#e8265301d053d5f74e36cb876486830261fbe946"
 
+electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.612:
+  version "1.3.617"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.617.tgz#4192fa4db846c6ad51fffe3a06e71727e9699a74"
+  integrity sha512-yHXyI0fHnU0oLxdu21otLYpW3qwkbo8EBTpqeS9w14fwNjFy65SG6unrS3Gg+wX1JKWlAFCcNt13fG0nsCo/1A==
+
 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"
@@ -3463,7 +4564,12 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emoji-regex@^7.0.1, emoji-regex@^7.0.2:
+emittery@^0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
+  integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
+
+emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
 
@@ -3471,10 +4577,20 @@ 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.0.0:
+  version "9.2.0"
+  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.0.tgz#a26da8e832b16a9753309f25e35e3c0efb9a066a"
+  integrity sha512-DNc3KFPK18bPdElMJnf/Pkv5TXhxFU3YFDEuGLDRtPmV4rkmCjBkCSEp22u6rBHdSN9Vlp/GK7k98prmE1Jgug==
+
 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==
+
 encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -3485,14 +4601,22 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enhanced-resolve@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.1.0.tgz#41c7e0bfdfe74ac1ffe1e57ad6a5c6c9f3742a7f"
+enhanced-resolve@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
+  integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
   dependencies:
     graceful-fs "^4.1.2"
-    memory-fs "^0.4.0"
+    memory-fs "^0.5.0"
     tapable "^1.0.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@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
@@ -3509,7 +4633,14 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.12.0, es-abstract@^1.15.0:
+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"
+
+es-abstract@^1.12.0:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.16.0.tgz#d3a26dc9c3283ac9750dca569586e976d9dcc06d"
   dependencies:
@@ -3524,7 +4655,42 @@ es-abstract@^1.12.0, es-abstract@^1.15.0:
     string.prototype.trimleft "^2.1.0"
     string.prototype.trimright "^2.1.0"
 
-es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
+es-abstract@^1.17.0-next.1:
+  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, es-abstract@^1.18.0-next.1:
+  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-abstract@^1.5.1, es-abstract@^1.6.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
   dependencies:
@@ -3542,6 +4708,15 @@ es-to-primitive@^1.1.1, es-to-primitive@^1.2.0:
     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"
+
 es5-ext@^0.10.35, es5-ext@^0.10.50:
   version "0.10.52"
   resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.52.tgz#bb21777e919a04263736ded120a9d665f10ea63f"
@@ -3565,108 +4740,143 @@ es6-symbol@^3.1.1, es6-symbol@~3.1.2:
     d "^1.0.1"
     ext "^1.1.2"
 
+escalade@^3.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-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"
 
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@2.0.0, 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@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
-escodegen@^1.11.0, escodegen@^1.9.1:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.11.0.tgz#b27a9389481d5bfd5bec76f7bb1eb3f8f4556589"
+escodegen@^1.14.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 "^3.1.3"
+    esprima "^4.0.1"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-react-app@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.0.2.tgz#df40d73a1402986030680c040bbee520db5a32a4"
+eslint-config-react-app@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e"
+  integrity sha512-bpoAAC+YRfzq0dsTk+6v9aHm/uqnDwayNAXleMypGl6CpxI9oXXscVHo4fk3eJPIn+rsbtNetB4r/ZIidFIE8A==
   dependencies:
-    confusing-browser-globals "^1.0.9"
+    confusing-browser-globals "^1.0.10"
 
-eslint-import-resolver-node@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
+eslint-import-resolver-node@^0.3.4:
+  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.5.0"
+    resolve "^1.13.1"
 
-eslint-loader@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/eslint-loader/-/eslint-loader-3.0.2.tgz#5a627316a51d6f41d357b9f6f0554e91506cdd6e"
-  dependencies:
-    fs-extra "^8.1.0"
-    loader-fs-cache "^1.0.2"
-    loader-utils "^1.2.3"
-    object-hash "^1.3.1"
-    schema-utils "^2.2.0"
-
-eslint-module-utils@^2.4.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.4.1.tgz#7b4675875bf96b0dbf1b21977456e5bb1f5e018c"
+eslint-module-utils@^2.6.0:
+  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.8"
+    debug "^2.6.9"
     pkg-dir "^2.0.0"
 
-eslint-plugin-flowtype@3.13.0:
-  version "3.13.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-3.13.0.tgz#e241ebd39c0ce519345a3f074ec1ebde4cf80f2c"
+eslint-plugin-flowtype@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.2.0.tgz#a4bef5dc18f9b2bdb41569a4ab05d73805a3d261"
+  integrity sha512-z7ULdTxuhlRJcEe1MVljePXricuPOrsWfScRXFhNzVD5dmTHWjIF57AxD0e7AbEoLSbjSsaA5S+hCg43WvpXJQ==
   dependencies:
     lodash "^4.17.15"
+    string-natural-compare "^3.0.1"
 
-eslint-plugin-import@2.18.2:
-  version "2.18.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.18.2.tgz#02f1180b90b077b33d447a17a2326ceb400aceb6"
+eslint-plugin-import@^2.22.1:
+  version "2.22.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
+  integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
+    array.prototype.flat "^1.2.3"
     contains-path "^0.1.0"
     debug "^2.6.9"
     doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.2"
-    eslint-module-utils "^2.4.0"
+    eslint-import-resolver-node "^0.3.4"
+    eslint-module-utils "^2.6.0"
     has "^1.0.3"
     minimatch "^3.0.4"
-    object.values "^1.1.0"
+    object.values "^1.1.1"
     read-pkg-up "^2.0.0"
-    resolve "^1.11.0"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
 
-eslint-plugin-jsx-a11y@6.2.3:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.2.3.tgz#b872a09d5de51af70a97db1eea7dc933043708aa"
+eslint-plugin-jest@^24.1.0:
+  version "24.1.3"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.1.3.tgz#fa3db864f06c5623ff43485ca6c0e8fc5fe8ba0c"
+  integrity sha512-dNGGjzuEzCE3d5EPZQ/QGtmlMotqnYWD/QpCZ1UuZlrMAdhG5rldh0N0haCvhGnUkSeuORS5VNROwF9Hrgn3Lg==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^4.0.1"
+
+eslint-plugin-jsx-a11y@^6.3.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
+  integrity sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==
   dependencies:
-    "@babel/runtime" "^7.4.5"
-    aria-query "^3.0.0"
-    array-includes "^3.0.3"
+    "@babel/runtime" "^7.11.2"
+    aria-query "^4.2.2"
+    array-includes "^3.1.1"
     ast-types-flow "^0.0.7"
-    axobject-query "^2.0.2"
-    damerau-levenshtein "^1.0.4"
-    emoji-regex "^7.0.2"
+    axe-core "^4.0.2"
+    axobject-query "^2.2.0"
+    damerau-levenshtein "^1.0.6"
+    emoji-regex "^9.0.0"
     has "^1.0.3"
-    jsx-ast-utils "^2.2.1"
+    jsx-ast-utils "^3.1.0"
+    language-tags "^1.0.5"
 
-eslint-plugin-react-hooks@^1.6.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.7.0.tgz#6210b6d5a37205f0b92858f895a4e827020a7d04"
+eslint-plugin-react-hooks@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
+  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
 
-eslint-plugin-react@7.14.3:
-  version "7.14.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.14.3.tgz#911030dd7e98ba49e1b2208599571846a66bdf13"
+eslint-plugin-react@^7.21.5:
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz#50b21a412b9574bfe05b21db176e8b7b3b15bff3"
+  integrity sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==
   dependencies:
-    array-includes "^3.0.3"
+    array-includes "^3.1.1"
+    array.prototype.flatmap "^1.2.3"
     doctrine "^2.1.0"
     has "^1.0.3"
-    jsx-ast-utils "^2.1.0"
-    object.entries "^1.1.0"
-    object.fromentries "^2.0.0"
-    object.values "^1.1.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    object.entries "^1.1.2"
+    object.fromentries "^2.0.2"
+    object.values "^1.1.1"
     prop-types "^15.7.2"
-    resolve "^1.10.1"
+    resolve "^1.18.1"
+    string.prototype.matchall "^4.0.2"
+
+eslint-plugin-testing-library@^3.9.2:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.10.1.tgz#4dd02306d601c3238fdabf1d1dbc5f2a8e85d531"
+  integrity sha512-nQIFe2muIFv2oR2zIuXE4vTbcFNx8hZKRzgHZqJg8rfopIWwoTwtlbCCNELT/jXzVe1uZF68ALGYoDXjLczKiQ==
+  dependencies:
+    "@typescript-eslint/experimental-utils" "^3.10.1"
 
 eslint-scope@3.7.1:
   version "3.7.1"
@@ -3686,12 +4896,21 @@ eslint-scope@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
   dependencies:
-    esrecurse "^4.1.0"
+    esrecurse "^4.1.0"
+    estraverse "^4.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-utils@^1.4.2, eslint-utils@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.4.3.tgz#74fec7c54d0776b6f67e0251040b5806564e981f"
+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"
 
@@ -3703,69 +4922,89 @@ eslint-visitor-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
 
-eslint@^6.1.0:
-  version "6.6.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.6.0.tgz#4a01a2fb48d32aacef5530ee9c5a78f11a8afd04"
+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-webpack-plugin@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.4.1.tgz#9353ec46a31d29558734a38a05eb14c5760a7144"
+  integrity sha512-cj8iPWZKuAiVD8MMgTSunyMCAvxQxp5mxoPHZl1UMGkApFXaXJHdCFcCR+oZEJbBNhReNa5SjESIn34uqUbBtg==
+  dependencies:
+    "@types/eslint" "^7.2.4"
+    arrify "^2.0.1"
+    jest-worker "^26.6.2"
+    micromatch "^4.0.2"
+    schema-utils "^3.0.0"
+
+eslint@^7.11.0:
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.15.0.tgz#eb155fb8ed0865fcf5d903f76be2e5b6cd7e0bc7"
+  integrity sha512-Vr64xFDT8w30wFll643e7cGrIkPEU50yIiI36OdSIDoSGguIeaLzBo0vpGvzo9RECUqq7htURfwEtKqwytkqzA==
   dependencies:
     "@babel/code-frame" "^7.0.0"
+    "@eslint/eslintrc" "^0.2.2"
     ajv "^6.10.0"
-    chalk "^2.1.0"
-    cross-spawn "^6.0.5"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
     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"
+    enquirer "^2.3.5"
+    eslint-scope "^5.1.1"
+    eslint-utils "^2.1.0"
+    eslint-visitor-keys "^2.0.0"
+    espree "^7.3.1"
+    esquery "^1.2.0"
     esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
+    file-entry-cache "^6.0.0"
     functional-red-black-tree "^1.0.1"
     glob-parent "^5.0.0"
-    globals "^11.7.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"
+    levn "^0.4.1"
+    lodash "^4.17.19"
     minimatch "^3.0.4"
-    mkdirp "^0.5.1"
     natural-compare "^1.4.0"
-    optionator "^0.8.2"
+    optionator "^0.9.1"
     progress "^2.0.0"
-    regexpp "^2.0.1"
-    semver "^6.1.2"
-    strip-ansi "^5.2.0"
-    strip-json-comments "^3.0.1"
+    regexpp "^3.1.0"
+    semver "^7.2.1"
+    strip-ansi "^6.0.0"
+    strip-json-comments "^3.1.0"
     table "^5.2.3"
     text-table "^0.2.0"
     v8-compile-cache "^2.0.3"
 
-espree@^6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-6.1.2.tgz#6c272650932b4f91c3714e5e7b5f5e2ecf47262d"
+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.1.0"
-    acorn-jsx "^5.1.0"
-    eslint-visitor-keys "^1.1.0"
-
-esprima@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.1.3.tgz#fdca51cee6133895e3c88d535ce49dbff62a4633"
+    acorn "^7.4.0"
+    acorn-jsx "^5.3.1"
+    eslint-visitor-keys "^1.3.0"
 
-esprima@^4.0.0:
+esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
 
-esquery@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
+esquery@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   dependencies:
-    estraverse "^4.0.0"
+    estraverse "^5.1.0"
 
 esrecurse@^4.1.0:
   version "4.2.1"
@@ -3773,11 +5012,33 @@ esrecurse@^4.1.0:
   dependencies:
     estraverse "^4.1.0"
 
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.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, estraverse@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
-esutils@^2.0.0, esutils@^2.0.2:
+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@^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.2"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
 
@@ -3834,6 +5095,21 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
+  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+  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"
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c"
@@ -3850,51 +5126,17 @@ expand-brackets@^2.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-expect@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-24.9.0.tgz#b75165b4817074fa4a157794f46fe9f1ba15b6ca"
-  dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-styles "^3.2.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-regex-util "^24.9.0"
-
-express@^4.16.2:
-  version "4.16.3"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.16.3.tgz#6af8a502350db3246ecc4becf6b5a34d22f7ed53"
+expect@^26.6.0, expect@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
+  integrity sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==
   dependencies:
-    accepts "~1.3.5"
-    array-flatten "1.1.1"
-    body-parser "1.18.2"
-    content-disposition "0.5.2"
-    content-type "~1.0.4"
-    cookie "0.3.1"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "1.1.1"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.3"
-    qs "6.5.1"
-    range-parser "~1.2.0"
-    safe-buffer "5.1.1"
-    send "0.16.2"
-    serve-static "1.13.2"
-    setprototypeof "1.1.0"
-    statuses "~1.4.0"
-    type-is "~1.6.16"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
+    "@jest/types" "^26.6.2"
+    ansi-styles "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-regex-util "^26.0.0"
 
 express@^4.17.1:
   version "4.17.1"
@@ -3955,14 +5197,6 @@ extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
 
-external-editor@^3.0.3:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
@@ -3984,32 +5218,47 @@ extsprintf@^1.2.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
 
-fast-deep-equal@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
 
-fast-glob@^2.0.2:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-2.2.7.tgz#6953857c3afa475fff92ee6015d52da70a4cd39d"
+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-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:
-    "@mrmlnc/readdir-enhanced" "^2.2.1"
-    "@nodelib/fs.stat" "^1.1.2"
-    glob-parent "^3.1.0"
-    is-glob "^4.0.0"
-    merge2 "^1.2.3"
-    micromatch "^3.1.10"
+    "@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-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:
+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.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"
 
 faye-websocket@^0.10.0:
   version "0.10.0"
@@ -4033,34 +5282,25 @@ figgy-pudding@^3.5.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
 
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-figures@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-3.1.0.tgz#4b198dd07d8d71530642864af2d45dd9e459c4ec"
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
+file-entry-cache@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.0.tgz#7921a89c391c6d93efec2169ac6bf300c527ea0a"
+  integrity sha512-fqoO76jZ3ZnYrXLDRxBR1YvOvc0k844kcOg40bgsPrE25LAb/PDqTY+ho64Xh2c8ZXgIKldchCFHczG2UVRcWA==
   dependencies:
-    flat-cache "^2.0.1"
+    flat-cache "^3.0.4"
 
-file-loader@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
+file-loader@6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.1.1.tgz#a6f29dfb3f5933a1c350b2dbaa20ac5be0539baa"
+  integrity sha512-Klt8C4BjWSXYQAfhpYYkG4qHNTna4toMHEbWrI5IuVoxbU6uiDKeKAP99R8mmbJi3lvewn/jQBOgU4+NS3tDQw==
   dependencies:
-    loader-utils "^1.0.2"
-    schema-utils "^1.0.0"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
 
-filesize@3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
+filesize@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.1.0.tgz#e81bdaa780e2451d714d71c0d7a4f3238d37ad00"
+  integrity sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==
 
 fill-range@^4.0.0:
   version "4.0.0"
@@ -4071,17 +5311,12 @@ fill-range@^4.0.0:
     repeat-string "^1.6.1"
     to-regex-range "^2.1.0"
 
-finalhandler@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.1.tgz#eebf4ed840079c83f4249038c9d703008301b105"
+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:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    statuses "~1.4.0"
-    unpipe "~1.0.0"
+    to-regex-range "^5.0.1"
 
 finalhandler@~1.1.2:
   version "1.1.2"
@@ -4096,14 +5331,6 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-cache-dir@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz#c8defae57c8a52a8a784f9e31c57c742e993a0b9"
-  dependencies:
-    commondir "^1.0.1"
-    mkdirp "^0.5.1"
-    pkg-dir "^1.0.0"
-
 find-cache-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
@@ -4120,18 +5347,22 @@ find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-up@3.0.0, find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+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:
-    locate-path "^3.0.0"
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
 
-find-up@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
+find-up@4.1.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:
-    path-exists "^2.0.0"
-    pinkie-promise "^2.0.0"
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
 
 find-up@^2.0.0, find-up@^2.1.0:
   version "2.1.0"
@@ -4139,17 +5370,24 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
   dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
+    locate-path "^3.0.0"
 
-flatted@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
+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"
+
+flatted@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067"
+  integrity sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==
 
 flatten@^1.0.2:
   version "1.0.2"
@@ -4168,31 +5406,21 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "=3.1.0"
 
-for-in@^0.1.3:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
-
-for-in@^1.0.1, for-in@^1.0.2:
+for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
 
-for-own@^0.1.3:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
-  dependencies:
-    for-in "^1.0.1"
-
 forever-agent@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
 
-fork-ts-checker-webpack-plugin@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-1.5.0.tgz#ce1d77190b44d81a761b10b6284a373795e41f0c"
+fork-ts-checker-webpack-plugin@4.1.6:
+  version "4.1.6"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz#5055c703febcf37fa06405d400c122b905167fc5"
+  integrity sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==
   dependencies:
-    babel-code-frame "^6.22.0"
+    "@babel/code-frame" "^7.5.5"
     chalk "^2.4.1"
-    chokidar "^2.0.4"
     micromatch "^3.1.10"
     minimatch "^3.0.4"
     semver "^5.6.0"
@@ -4228,22 +5456,6 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra@7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.1.tgz#4f189c44aa123b895f722804f55ea23eadc348e9"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
-fs-extra@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-extra@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.0.tgz#8cc3f47ce07ef7b3593a11b9fb245f7e34c041d6"
@@ -4260,12 +5472,29 @@ fs-extra@^8.1.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-minipass@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
   dependencies:
     minipass "^2.2.1"
 
+fs-minipass@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
+  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
+  dependencies:
+    minipass "^3.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"
@@ -4279,13 +5508,6 @@ 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.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
-  dependencies:
-    nan "^2.9.2"
-    node-pre-gyp "^0.10.0"
-
 fsevents@^1.2.7:
   version "1.2.9"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
@@ -4293,6 +5515,16 @@ fsevents@^1.2.7:
     nan "^2.12.1"
     node-pre-gyp "^0.12.0"
 
+fsevents@^2.1.2:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.2.1.tgz#1fb02ded2036a8ac288d507a65962bd87b97628d"
+  integrity sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==
+
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+
 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"
@@ -4314,6 +5546,11 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
+gensync@^1.0.0-beta.1:
+  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@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
@@ -4322,20 +5559,41 @@ get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
 
+get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
+  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-own-enumerable-property-symbols@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.1.tgz#6f7764f88ea11e0b514bd9bd860a132259992ca4"
 
+get-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@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
 
-get-stream@^4.0.0:
+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"
   dependencies:
     pump "^3.0.0"
 
+get-stream@^5.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-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"
@@ -4359,9 +5617,12 @@ glob-parent@^5.0.0:
   dependencies:
     is-glob "^4.0.1"
 
-glob-to-regexp@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
+glob-parent@^5.1.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@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
   version "7.1.3"
@@ -4374,7 +5635,7 @@ glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.3, glob@^7.1.4:
+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:
@@ -4385,6 +5646,13 @@ glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+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-modules@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-2.0.0.tgz#997605ad2345f27f51539bea26574421215c7780"
@@ -4399,21 +5667,28 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
-globals@^11.1.0, globals@^11.7.0:
+globals@^11.1.0:
   version "11.8.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d"
 
-globby@8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-8.0.2.tgz#5697619ccd95c5275dbb2d6faa42087c1a941d8d"
+globals@^12.1.0:
+  version "12.4.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
+  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
   dependencies:
-    array-union "^1.0.1"
-    dir-glob "2.0.0"
-    fast-glob "^2.0.2"
-    glob "^7.1.2"
-    ignore "^3.3.5"
-    pify "^3.0.0"
-    slash "^1.0.0"
+    type-fest "^0.8.1"
+
+globby@11.0.1, 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@^6.1.0:
   version "6.1.0"
@@ -4425,6 +5700,23 @@ globby@^6.1.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+got@^9.6.0:
+  version "9.6.0"
+  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
+  integrity sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==
+  dependencies:
+    "@sindresorhus/is" "^0.14.0"
+    "@szmarczak/http-timer" "^1.1.2"
+    cacheable-request "^6.0.0"
+    decompress-response "^3.3.0"
+    duplexer3 "^0.1.4"
+    get-stream "^4.1.0"
+    lowercase-keys "^1.0.1"
+    mimic-response "^1.0.1"
+    p-cancelable "^1.0.0"
+    to-readable-stream "^1.0.0"
+    url-parse-lax "^3.0.0"
+
 graceful-fs@^4.1.11, 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"
@@ -4433,6 +5725,11 @@ graceful-fs@^4.1.15, graceful-fs@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
 
+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==
+
 growly@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
@@ -4448,37 +5745,22 @@ handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
 
-handlebars@^4.1.2:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.1.tgz#8a01c382c180272260d07f2d1aa3ae745715c7ba"
-  dependencies:
-    neo-async "^2.6.0"
-    optimist "^0.6.1"
-    source-map "^0.6.1"
-  optionalDependencies:
-    uglify-js "^3.1.4"
-
 har-schema@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
 
-har-validator@~5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.0.tgz#44657f5688a22cfd4b72486e81b3a3fb11742c29"
+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 "^5.3.0"
+    ajv "^6.12.3"
     har-schema "^2.0.0"
 
 harmony-reflect@^1.4.6:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
 
-has-ansi@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
-  dependencies:
-    ansi-regex "^2.0.0"
-
 has-flag@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-2.0.0.tgz#e8207af1cc7b30d446cc70b734b5e8be18f88d51"
@@ -4488,10 +5770,20 @@ 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-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-unicode@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
@@ -4523,6 +5815,11 @@ has-values@^1.0.0:
     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.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"
@@ -4543,9 +5840,10 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.2.x:
+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==
 
 hex-color-regex@^1.1.0:
   version "1.1.0"
@@ -4559,6 +5857,11 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+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==
+
 hosted-git-info@^2.1.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
@@ -4584,37 +5887,49 @@ html-comment-regex@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
 
-html-encoding-sniffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+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.1"
+    whatwg-encoding "^1.0.5"
 
-html-entities@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+html-entities@^1.2.1, html-entities@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
+  integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
 
-html-minifier@^3.5.20:
-  version "3.5.21"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
-  dependencies:
-    camel-case "3.0.x"
-    clean-css "4.2.x"
-    commander "2.17.x"
-    he "1.2.x"
-    param-case "2.1.x"
-    relateurl "0.2.x"
-    uglify-js "3.4.x"
+html-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-webpack-plugin@4.0.0-beta.5:
-  version "4.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
+html-minifier-terser@^5.0.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
+  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
+  dependencies:
+    camel-case "^4.1.1"
+    clean-css "^4.2.3"
+    commander "^4.1.1"
+    he "^1.2.0"
+    param-case "^3.0.3"
+    relateurl "^0.2.7"
+    terser "^4.6.3"
+
+html-webpack-plugin@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c"
+  integrity sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==
   dependencies:
-    html-minifier "^3.5.20"
-    loader-utils "^1.1.0"
-    lodash "^4.17.11"
+    "@types/html-minifier-terser" "^5.0.0"
+    "@types/tapable" "^1.0.5"
+    "@types/webpack" "^4.41.8"
+    html-minifier-terser "^5.0.1"
+    loader-utils "^1.2.3"
+    lodash "^4.17.15"
     pretty-error "^2.1.1"
-    tapable "^1.1.0"
+    tapable "^1.1.3"
     util.promisify "1.0.0"
 
 htmlparser2@~3.3.0:
@@ -4626,19 +5941,15 @@ htmlparser2@~3.3.0:
     domutils "1.1"
     readable-stream "1.0"
 
+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-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
 
-http-errors@1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
-  dependencies:
-    depd "1.1.1"
-    inherits "2.0.3"
-    setprototypeof "1.0.3"
-    statuses ">= 1.3.1 < 2"
-
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
@@ -4674,9 +5985,10 @@ http-parser-js@>=0.4.0:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
 
-http-proxy-middleware@^0.19.1:
+http-proxy-middleware@0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
+  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
   dependencies:
     http-proxy "^1.17.0"
     is-glob "^4.0.0"
@@ -4703,23 +6015,21 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
-iconv-lite@0.4.19:
-  version "0.4.19"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
+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==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-icss-replace-symbols@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded"
-
-icss-utils@^4.1.0:
+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"
 
@@ -4737,23 +6047,30 @@ iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
 
+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=
+
 ignore-walk@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
   dependencies:
     minimatch "^3.0.4"
 
-ignore@^3.3.5:
-  version "3.3.10"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
-
 ignore@^4.0.6:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
 
-immer@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
+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==
+
+immer@7.0.9:
+  version "7.0.9"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e"
+  integrity sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A==
 
 import-cwd@^2.0.0:
   version "2.1.0"
@@ -4761,13 +6078,6 @@ import-cwd@^2.0.0:
   dependencies:
     import-from "^2.1.0"
 
-import-fresh@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-2.0.0.tgz#d81355c15612d386c61f9ddd3922d4304822a546"
-  dependencies:
-    caller-path "^2.0.0"
-    resolve-from "^3.0.0"
-
 import-fresh@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.1.0.tgz#6d33fa1dcef6df930fae003446f33415af905118"
@@ -4775,12 +6085,25 @@ import-fresh@^3.0.0:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
+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-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
   dependencies:
     resolve-from "^3.0.0"
 
+import-lazy@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
+  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
+
 import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -4788,15 +6111,28 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.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"
 
-infer-owner@^1.0.3:
+infer-owner@^1.0.3, infer-owner@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
 
@@ -4818,56 +6154,30 @@ inherits@2.0.1:
 inherits@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
-  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-ini@^1.3.5, ini@~1.3.0:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
-
-inquirer@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
-  dependencies:
-    ansi-escapes "^3.2.0"
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^2.0.0"
-    lodash "^4.17.12"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^2.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
-inquirer@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-7.0.0.tgz#9e2b032dde77da1db5db804758b8fea3a970519a"
-  dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.2"
-    cli-cursor "^3.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^3.0.0"
-    lodash "^4.17.15"
-    mute-stream "0.0.8"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^4.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+ini@^1.3.5, ini@~1.3.0:
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-internal-ip@^4.2.0:
+internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
+  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
   dependencies:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-invariant@^2.2.0, invariant@^2.2.2, invariant@^2.2.4:
+internal-slot@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
+  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
+  dependencies:
+    es-abstract "^1.17.0-next.1"
+    has "^1.0.3"
+    side-channel "^1.0.2"
+
+invariant@^2.2.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -4885,10 +6195,6 @@ ip@^1.1.0, ip@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
 
-ipaddr.js@1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.8.0.tgz#eaa33d6ddd7ace8f7f6fe0c9ca0440e706738b1e"
-
 ipaddr.js@1.9.0:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
@@ -4902,6 +6208,11 @@ 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-absolute-url@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
+  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
+
 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"
@@ -4928,7 +6239,14 @@ is-binary-path@^1.0.0:
   dependencies:
     binary-extensions "^1.0.0"
 
-is-buffer@^1.0.2, is-buffer@^1.1.5:
+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"
 
@@ -4942,6 +6260,11 @@ 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.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-ci@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
@@ -4959,6 +6282,13 @@ is-color-stop@^1.0.0:
     rgb-regex "^1.0.1"
     rgba-regex "^1.0.0"
 
+is-core-module@^2.0.0, is-core-module@^2.1.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"
@@ -4995,6 +6325,11 @@ is-directory@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
 
+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-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"
@@ -5039,37 +6374,78 @@ is-glob@^4.0.0:
   dependencies:
     is-extglob "^2.1.1"
 
-is-glob@^4.0.1:
+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-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-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
+
+is-negative-zero@^2.0.0:
+  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-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-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, is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
-is-path-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
+is-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-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"
+is-path-cwd@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
+  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
+
+is-path-in-cwd@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
+  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
   dependencies:
-    is-path-inside "^1.0.0"
+    is-path-inside "^2.1.0"
 
-is-path-inside@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+is-path-inside@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
+  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
   dependencies:
-    path-is-inside "^1.0.1"
+    path-is-inside "^1.0.2"
+
+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-plain-obj@^1.0.0:
   version "1.1.0"
@@ -5081,9 +6457,10 @@ is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
+is-potential-custom-element-name@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
+  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
 
 is-regex@^1.0.4:
   version "1.0.4"
@@ -5091,6 +6468,13 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
+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-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
@@ -5107,6 +6491,16 @@ is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
+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:
+  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@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
@@ -5119,9 +6513,10 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.0"
 
-is-typedarray@~1.0.0:
+is-typedarray@^1.0.0, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
+  integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
 is-windows@^1.0.2:
   version "1.0.2"
@@ -5131,6 +6526,18 @@ is-wsl@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
 
+is-wsl@^2.1.1, 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==
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -5157,396 +6564,482 @@ isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
-istanbul-lib-coverage@^2.0.2, istanbul-lib-coverage@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.5.tgz#675f0ab69503fad4b1d849f736baaca803344f49"
+istanbul-lib-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-instrument@^3.0.1, istanbul-lib-instrument@^3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-3.3.0.tgz#a5f63d91f0bbc0c3e479ef4c5de027335ec6d630"
-  dependencies:
-    "@babel/generator" "^7.4.0"
-    "@babel/parser" "^7.4.3"
-    "@babel/template" "^7.4.0"
-    "@babel/traverse" "^7.4.3"
-    "@babel/types" "^7.4.0"
-    istanbul-lib-coverage "^2.0.5"
-    semver "^6.0.0"
+istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
+  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+  dependencies:
+    "@babel/core" "^7.7.5"
+    "@istanbuljs/schema" "^0.1.2"
+    istanbul-lib-coverage "^3.0.0"
+    semver "^6.3.0"
 
-istanbul-lib-report@^2.0.4:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-2.0.8.tgz#5a8113cd746d43c4889eba36ab10e7d50c9b4f33"
+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 "^2.0.5"
-    make-dir "^2.1.0"
-    supports-color "^6.1.0"
+    istanbul-lib-coverage "^3.0.0"
+    make-dir "^3.0.0"
+    supports-color "^7.1.0"
 
-istanbul-lib-source-maps@^3.0.1:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-3.0.6.tgz#284997c48211752ec486253da97e3879defba8c8"
+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 "^2.0.5"
-    make-dir "^2.1.0"
-    rimraf "^2.6.3"
+    istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.6.tgz#7b4f2660d82b29303a8fe6091f8ca4bf058da1af"
+istanbul-reports@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
+  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
   dependencies:
-    handlebars "^4.1.2"
+    html-escaper "^2.0.0"
+    istanbul-lib-report "^3.0.0"
 
-jest-changed-files@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-24.9.0.tgz#08d8c15eb79a7fa3fc98269bc14b451ee82f8039"
+jest-changed-files@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
+  integrity sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==
   dependencies:
-    "@jest/types" "^24.9.0"
-    execa "^1.0.0"
-    throat "^4.0.0"
+    "@jest/types" "^26.6.2"
+    execa "^4.0.0"
+    throat "^5.0.0"
 
-jest-cli@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-24.9.0.tgz#ad2de62d07472d419c6abc301fc432b98b10d2af"
+jest-circus@26.6.0:
+  version "26.6.0"
+  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-26.6.0.tgz#7d9647b2e7f921181869faae1f90a2629fd70705"
+  integrity sha512-L2/Y9szN6FJPWFK8kzWXwfp+FOR7xq0cUL4lIsdbIdwz3Vh6P1nrpcqOleSzr28zOtSHQNV9Z7Tl+KkuK7t5Ng==
   dependencies:
-    "@jest/core" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+    "@babel/traverse" "^7.1.0"
+    "@jest/environment" "^26.6.0"
+    "@jest/test-result" "^26.6.0"
+    "@jest/types" "^26.6.0"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    co "^4.6.0"
+    dedent "^0.7.0"
+    expect "^26.6.0"
+    is-generator-fn "^2.0.0"
+    jest-each "^26.6.0"
+    jest-matcher-utils "^26.6.0"
+    jest-message-util "^26.6.0"
+    jest-runner "^26.6.0"
+    jest-runtime "^26.6.0"
+    jest-snapshot "^26.6.0"
+    jest-util "^26.6.0"
+    pretty-format "^26.6.0"
+    stack-utils "^2.0.2"
+    throat "^5.0.0"
+
+jest-cli@^26.6.0:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
+  integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
+  dependencies:
+    "@jest/core" "^26.6.3"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
     exit "^0.1.2"
-    import-local "^2.0.0"
+    graceful-fs "^4.2.4"
+    import-local "^3.0.2"
     is-ci "^2.0.0"
-    jest-config "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
+    jest-config "^26.6.3"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
     prompts "^2.0.1"
-    realpath-native "^1.1.0"
-    yargs "^13.3.0"
+    yargs "^15.4.1"
 
-jest-config@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-24.9.0.tgz#fb1bbc60c73a46af03590719efa4825e6e4dd1b5"
+jest-config@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
+  integrity sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    babel-jest "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/test-sequencer" "^26.6.3"
+    "@jest/types" "^26.6.2"
+    babel-jest "^26.6.3"
+    chalk "^4.0.0"
+    deepmerge "^4.2.2"
     glob "^7.1.1"
-    jest-environment-jsdom "^24.9.0"
-    jest-environment-node "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    micromatch "^3.1.10"
-    pretty-format "^24.9.0"
-    realpath-native "^1.1.0"
-
-jest-diff@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
-  dependencies:
-    chalk "^2.0.1"
-    diff-sequences "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-docblock@^24.3.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-24.9.0.tgz#7970201802ba560e1c4092cc25cbedf5af5a8ce2"
-  dependencies:
-    detect-newline "^2.1.0"
-
-jest-each@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-24.9.0.tgz#eb2da602e2a610898dbc5f1f6df3ba86b55f8b05"
-  dependencies:
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-environment-jsdom-fourteen@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-fourteen/-/jest-environment-jsdom-fourteen-0.1.0.tgz#aad6393a9d4b565b69a609109bf469f62bf18ccc"
-  dependencies:
-    jest-mock "^24.5.0"
-    jest-util "^24.5.0"
-    jsdom "^14.0.0"
-
-jest-environment-jsdom@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-24.9.0.tgz#4b0806c7fc94f95edb369a69cc2778eec2b7375b"
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
-    jsdom "^11.5.1"
-
-jest-environment-node@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-24.9.0.tgz#333d2d2796f9687f2aeebf0742b519f33c1cbfd3"
-  dependencies:
-    "@jest/environment" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-util "^24.9.0"
-
-jest-get-type@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
-
-jest-haste-map@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
-  dependencies:
-    "@jest/types" "^24.9.0"
-    anymatch "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^26.6.2"
+    jest-environment-node "^26.6.2"
+    jest-get-type "^26.3.0"
+    jest-jasmine2 "^26.6.3"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    micromatch "^4.0.2"
+    pretty-format "^26.6.2"
+
+jest-diff@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
+  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-docblock@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
+  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
+  dependencies:
+    detect-newline "^3.0.0"
+
+jest-each@^26.6.0, jest-each@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.6.2.tgz#02526438a77a67401c8a6382dfe5999952c167cb"
+  integrity sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-util "^26.6.2"
+    pretty-format "^26.6.2"
+
+jest-environment-jsdom@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
+  integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
+    jsdom "^16.4.0"
+
+jest-environment-node@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c"
+  integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
+
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+
+jest-haste-map@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
+  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
+    anymatch "^3.0.3"
     fb-watchman "^2.0.0"
-    graceful-fs "^4.1.15"
-    invariant "^2.2.4"
-    jest-serializer "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.9.0"
-    micromatch "^3.1.10"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^26.0.0"
+    jest-serializer "^26.6.2"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
+    micromatch "^4.0.2"
     sane "^4.0.3"
     walker "^1.0.7"
   optionalDependencies:
-    fsevents "^1.2.7"
+    fsevents "^2.1.2"
 
-jest-jasmine2@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-24.9.0.tgz#1f7b1bd3242c1774e62acabb3646d96afc3be6a0"
+jest-jasmine2@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
+  integrity sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==
   dependencies:
     "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
+    "@jest/environment" "^26.6.2"
+    "@jest/source-map" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
     co "^4.6.0"
-    expect "^24.9.0"
+    expect "^26.6.2"
     is-generator-fn "^2.0.0"
-    jest-each "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    pretty-format "^24.9.0"
-    throat "^4.0.0"
-
-jest-leak-detector@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-24.9.0.tgz#b665dea7c77100c5c4f7dfcb153b65cf07dcf96a"
-  dependencies:
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-matcher-utils@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
-  dependencies:
-    chalk "^2.0.1"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    pretty-format "^24.9.0"
-
-jest-message-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
+    jest-each "^26.6.2"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-runtime "^26.6.3"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    pretty-format "^26.6.2"
+    throat "^5.0.0"
+
+jest-leak-detector@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz#7717cf118b92238f2eba65054c8a0c9c653a91af"
+  integrity sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==
+  dependencies:
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-matcher-utils@^26.6.0, jest-matcher-utils@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
+  integrity sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
+
+jest-message-util@^26.6.0, jest-message-util@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
+  integrity sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^2.0.1"
-    micromatch "^3.1.10"
-    slash "^2.0.0"
-    stack-utils "^1.0.1"
+    "@jest/types" "^26.6.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.2"
+    pretty-format "^26.6.2"
+    slash "^3.0.0"
+    stack-utils "^2.0.2"
 
-jest-mock@^24.5.0, jest-mock@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-24.9.0.tgz#c22835541ee379b908673ad51087a2185c13f1c6"
+jest-mock@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
+  integrity sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==
   dependencies:
-    "@jest/types" "^24.9.0"
-
-jest-pnp-resolver@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
-
-jest-regex-util@^24.3.0, jest-regex-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-24.9.0.tgz#c13fb3380bde22bf6575432c493ea8fe37965636"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
 
-jest-resolve-dependencies@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-24.9.0.tgz#ad055198959c4cfba8a4f066c673a3f0786507ab"
-  dependencies:
-    "@jest/types" "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-snapshot "^24.9.0"
+jest-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@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
+  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
+
+jest-resolve-dependencies@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
+  integrity sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-snapshot "^26.6.2"
+
+jest-resolve@26.6.0:
+  version "26.6.0"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.0.tgz#070fe7159af87b03e50f52ea5e17ee95bbee40e1"
+  integrity sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==
+  dependencies:
+    "@jest/types" "^26.6.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^26.6.0"
+    read-pkg-up "^7.0.1"
+    resolve "^1.17.0"
+    slash "^3.0.0"
 
-jest-resolve@24.9.0, jest-resolve@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-24.9.0.tgz#dff04c7687af34c4dd7e524892d9cf77e5d17321"
-  dependencies:
-    "@jest/types" "^24.9.0"
-    browser-resolve "^1.11.3"
-    chalk "^2.0.1"
-    jest-pnp-resolver "^1.2.1"
-    realpath-native "^1.1.0"
+jest-resolve@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.2.tgz#a3ab1517217f469b504f1b56603c5bb541fbb507"
+  integrity sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==
+  dependencies:
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^26.6.2"
+    read-pkg-up "^7.0.1"
+    resolve "^1.18.1"
+    slash "^3.0.0"
 
-jest-runner@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-24.9.0.tgz#574fafdbd54455c2b34b4bdf4365a23857fcdf42"
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.4.2"
+jest-runner@^26.6.0, jest-runner@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
+  integrity sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/environment" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.7.1"
     exit "^0.1.2"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-docblock "^24.3.0"
-    jest-haste-map "^24.9.0"
-    jest-jasmine2 "^24.9.0"
-    jest-leak-detector "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    jest-runtime "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.6.0"
+    graceful-fs "^4.2.4"
+    jest-config "^26.6.3"
+    jest-docblock "^26.0.0"
+    jest-haste-map "^26.6.2"
+    jest-leak-detector "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-resolve "^26.6.2"
+    jest-runtime "^26.6.3"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
     source-map-support "^0.5.6"
-    throat "^4.0.0"
-
-jest-runtime@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-24.9.0.tgz#9f14583af6a4f7314a6a9d9f0226e1a781c8e4ac"
-  dependencies:
-    "@jest/console" "^24.7.1"
-    "@jest/environment" "^24.9.0"
-    "@jest/source-map" "^24.3.0"
-    "@jest/transform" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    chalk "^2.0.1"
+    throat "^5.0.0"
+
+jest-runtime@^26.6.0, jest-runtime@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
+  integrity sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/globals" "^26.6.2"
+    "@jest/source-map" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/yargs" "^15.0.0"
+    chalk "^4.0.0"
+    cjs-module-lexer "^0.6.0"
+    collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.3"
-    graceful-fs "^4.1.15"
-    jest-config "^24.9.0"
-    jest-haste-map "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^24.9.0"
-    jest-regex-util "^24.3.0"
-    jest-resolve "^24.9.0"
-    jest-snapshot "^24.9.0"
-    jest-util "^24.9.0"
-    jest-validate "^24.9.0"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
-    strip-bom "^3.0.0"
-    yargs "^13.3.0"
+    graceful-fs "^4.2.4"
+    jest-config "^26.6.3"
+    jest-haste-map "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-mock "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    slash "^3.0.0"
+    strip-bom "^4.0.0"
+    yargs "^15.4.1"
 
-jest-serializer@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-24.9.0.tgz#e6d7d7ef96d31e8b9079a714754c5d5c58288e73"
+jest-serializer@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
+  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
 
-jest-snapshot@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-24.9.0.tgz#ec8e9ca4f2ec0c5c87ae8f925cf97497b0e951ba"
+jest-snapshot@^26.6.0, jest-snapshot@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
+  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
   dependencies:
     "@babel/types" "^7.0.0"
-    "@jest/types" "^24.9.0"
-    chalk "^2.0.1"
-    expect "^24.9.0"
-    jest-diff "^24.9.0"
-    jest-get-type "^24.9.0"
-    jest-matcher-utils "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-resolve "^24.9.0"
-    mkdirp "^0.5.1"
+    "@jest/types" "^26.6.2"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.6.2"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.6.2"
+    jest-get-type "^26.3.0"
+    jest-haste-map "^26.6.2"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-resolve "^26.6.2"
     natural-compare "^1.4.0"
-    pretty-format "^24.9.0"
-    semver "^6.2.0"
-
-jest-util@^24.5.0, jest-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
-  dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/source-map" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    callsites "^3.0.0"
-    chalk "^2.0.1"
-    graceful-fs "^4.1.15"
+    pretty-format "^26.6.2"
+    semver "^7.3.2"
+
+jest-util@^26.6.0, jest-util@^26.6.2:
+  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"
-    mkdirp "^0.5.1"
-    slash "^2.0.0"
-    source-map "^0.6.0"
+    micromatch "^4.0.2"
 
-jest-validate@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-24.9.0.tgz#0775c55360d173cd854e40180756d4ff52def8ab"
+jest-validate@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
+  integrity sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==
   dependencies:
-    "@jest/types" "^24.9.0"
-    camelcase "^5.3.1"
-    chalk "^2.0.1"
-    jest-get-type "^24.9.0"
+    "@jest/types" "^26.6.2"
+    camelcase "^6.0.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
     leven "^3.1.0"
-    pretty-format "^24.9.0"
+    pretty-format "^26.6.2"
 
-jest-watch-typeahead@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.4.0.tgz#4d5356839a85421588ce452d2440bf0d25308397"
+jest-watch-typeahead@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.1.tgz#45221b86bb6710b7e97baaa1640ae24a07785e63"
+  integrity sha512-ITVnHhj3Jd/QkqQcTqZfRgjfyRhDFM/auzgVo2RKvSwi18YMvh0WvXDJFoFED6c7jd/5jxtu4kSOb9PTu2cPVg==
   dependencies:
-    ansi-escapes "^4.2.1"
-    chalk "^2.4.1"
-    jest-watcher "^24.3.0"
+    ansi-escapes "^4.3.1"
+    chalk "^4.0.0"
+    jest-regex-util "^26.0.0"
+    jest-watcher "^26.3.0"
     slash "^3.0.0"
-    string-length "^3.1.0"
-    strip-ansi "^5.0.0"
+    string-length "^4.0.1"
+    strip-ansi "^6.0.0"
 
-jest-watcher@^24.3.0, jest-watcher@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-24.9.0.tgz#4b56e5d1ceff005f5b88e528dc9afc8dd4ed2b3b"
+jest-watcher@^26.3.0, jest-watcher@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.6.2.tgz#a5b683b8f9d68dbcb1d7dae32172d2cca0592975"
+  integrity sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==
   dependencies:
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/yargs" "^13.0.0"
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.1"
-    jest-util "^24.9.0"
-    string-length "^2.0.0"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    jest-util "^26.6.2"
+    string-length "^4.0.1"
 
-jest-worker@^24.6.0, jest-worker@^24.9.0:
+jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
   dependencies:
     merge-stream "^2.0.0"
     supports-color "^6.1.0"
 
-jest@24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-24.9.0.tgz#987d290c05a08b52c56188c1002e368edb007171"
+jest-worker@^26.5.0, jest-worker@^26.6.2:
+  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:
-    import-local "^2.0.0"
-    jest-cli "^24.9.0"
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^7.0.0"
 
-js-levenshtein@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.4.tgz#3a56e3cbf589ca0081eb22cd9ba0b1290a16d26e"
+jest@26.6.0:
+  version "26.6.0"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.0.tgz#546b25a1d8c888569dbbe93cae131748086a4a25"
+  integrity sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA==
+  dependencies:
+    "@jest/core" "^26.6.0"
+    import-local "^3.0.2"
+    jest-cli "^26.6.0"
 
-js-tokens@^3.0.0, js-tokens@^3.0.2:
+js-tokens@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
@@ -5572,66 +7065,36 @@ jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
-jsdom@^11.5.1:
-  version "11.12.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.12.0.tgz#1a80d40ddd378a1de59656e9e6dc5a3ba8657bc8"
-  dependencies:
-    abab "^2.0.0"
-    acorn "^5.5.3"
-    acorn-globals "^4.1.0"
-    array-equal "^1.0.0"
-    cssom ">= 0.3.2 < 0.4.0"
-    cssstyle "^1.0.0"
-    data-urls "^1.0.0"
-    domexception "^1.0.1"
-    escodegen "^1.9.1"
-    html-encoding-sniffer "^1.0.2"
-    left-pad "^1.3.0"
-    nwsapi "^2.0.7"
-    parse5 "4.0.0"
-    pn "^1.1.0"
-    request "^2.87.0"
-    request-promise-native "^1.0.5"
-    sax "^1.2.4"
-    symbol-tree "^3.2.2"
-    tough-cookie "^2.3.4"
-    w3c-hr-time "^1.0.1"
-    webidl-conversions "^4.0.2"
-    whatwg-encoding "^1.0.3"
-    whatwg-mimetype "^2.1.0"
-    whatwg-url "^6.4.1"
-    ws "^5.2.0"
-    xml-name-validator "^3.0.0"
-
-jsdom@^14.0.0:
-  version "14.1.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-14.1.0.tgz#916463b6094956b0a6c1782c94e380cd30e1981b"
-  dependencies:
-    abab "^2.0.0"
-    acorn "^6.0.4"
-    acorn-globals "^4.3.0"
-    array-equal "^1.0.0"
-    cssom "^0.3.4"
-    cssstyle "^1.1.1"
-    data-urls "^1.1.0"
-    domexception "^1.0.1"
-    escodegen "^1.11.0"
-    html-encoding-sniffer "^1.0.2"
-    nwsapi "^2.1.3"
-    parse5 "5.1.0"
-    pn "^1.1.0"
-    request "^2.88.0"
-    request-promise-native "^1.0.5"
-    saxes "^3.1.9"
-    symbol-tree "^3.2.2"
-    tough-cookie "^2.5.0"
-    w3c-hr-time "^1.0.1"
-    w3c-xmlserializer "^1.1.2"
-    webidl-conversions "^4.0.2"
+jsdom@^16.4.0:
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.4.0.tgz#36005bde2d136f73eee1a830c6d45e55408edddb"
+  integrity sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==
+  dependencies:
+    abab "^2.0.3"
+    acorn "^7.1.1"
+    acorn-globals "^6.0.0"
+    cssom "^0.4.4"
+    cssstyle "^2.2.0"
+    data-urls "^2.0.0"
+    decimal.js "^10.2.0"
+    domexception "^2.0.1"
+    escodegen "^1.14.1"
+    html-encoding-sniffer "^2.0.1"
+    is-potential-custom-element-name "^1.0.0"
+    nwsapi "^2.2.0"
+    parse5 "5.1.1"
+    request "^2.88.2"
+    request-promise-native "^1.0.8"
+    saxes "^5.0.0"
+    symbol-tree "^3.2.4"
+    tough-cookie "^3.0.1"
+    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 "^7.0.0"
-    ws "^6.1.2"
+    whatwg-url "^8.0.0"
+    ws "^7.2.3"
     xml-name-validator "^3.0.0"
 
 jsesc@^2.5.1:
@@ -5642,13 +7105,19 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
+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"
 
-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-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"
@@ -5662,12 +7131,6 @@ json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
 
-json-stable-stringify@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz#9a759d39c5f2ff503fd5300646ed445f88c4f9af"
-  dependencies:
-    jsonify "~0.0.0"
-
 json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
@@ -5692,15 +7155,27 @@ json5@^2.1.0:
   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"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-jsonify@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/jsonify/-/jsonify-0.0.0.tgz#2c74b6ee41d93ca51b7b5aaee8f503631d252a73"
+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"
 
 jsprim@^1.2.2:
   version "1.4.1"
@@ -5711,22 +7186,25 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jsx-ast-utils@^2.1.0, jsx-ast-utils@^2.2.1:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz#8a9364e402448a3ce7f14d357738310d9248054f"
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz#642f1d7b88aa6d7eb9d8f2210e166478444fa891"
+  integrity sha512-d4/UOjg+mxAWxCiF0c5UTSwyqbchkbqCvK87aBovhnh8GtysTjWmgC63tY0cJx/HzGgm9qnA147jVBdpOiQ2RA==
+  dependencies:
+    array-includes "^3.1.1"
+    object.assign "^4.1.1"
+
+keyv@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
+  integrity sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==
   dependencies:
-    array-includes "^3.0.3"
-    object.assign "^4.1.0"
+    json-buffer "3.0.0"
 
-killable@^1.0.0:
+killable@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
-
-kind-of@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-2.0.1.tgz#018ec7a4ce7e3a86cb9141be519d24c8faa981b5"
-  dependencies:
-    is-buffer "^1.0.2"
+  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
 
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
@@ -5752,6 +7230,18 @@ kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
 
+language-subtag-registry@~0.3.2:
+  version "0.3.21"
+  resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
+  integrity sha512-L0IqwlIXjilBVVYKFT37X9Ih11Um5NEl9cbJIuU/SwP/zEEAbBPOnEeeuxVMf45ydWQRDQN3Nqc96OgbH1K+Pg==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/language-tags/-/language-tags-1.0.5.tgz#d321dbc4da30ba8bf3024e040fa5c14661f9193a"
+  integrity sha1-0yHbxNowuovzAk4ED6XBRmH5GTo=
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
 last-call-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
@@ -5759,13 +7249,12 @@ last-call-webpack-plugin@^3.0.0:
     lodash "^4.17.5"
     webpack-sources "^1.1.0"
 
-lazy-cache@^0.2.3:
-  version "0.2.7"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-0.2.7.tgz#7feddf2dcb6edb77d11ef1d117ab5ffdf0ab1b65"
-
-lazy-cache@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
+latest-version@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
+  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
+  dependencies:
+    package-json "^6.3.0"
 
 lcid@^2.0.0:
   version "2.0.0"
@@ -5773,21 +7262,30 @@ lcid@^2.0.0:
   dependencies:
     invert-kv "^2.0.0"
 
-left-pad@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/left-pad/-/left-pad-1.3.0.tgz#5b8a3a7765dfe001261dde915589e782f8c94d1e"
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
 
-levn@^0.3.0, levn@~0.3.0:
+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"
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+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=
+
 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"
@@ -5797,22 +7295,6 @@ load-json-file@^2.0.0:
     pify "^2.0.0"
     strip-bom "^3.0.0"
 
-load-json-file@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
-  dependencies:
-    graceful-fs "^4.1.2"
-    parse-json "^4.0.0"
-    pify "^3.0.0"
-    strip-bom "^3.0.0"
-
-loader-fs-cache@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/loader-fs-cache/-/loader-fs-cache-1.0.2.tgz#54cedf6b727e1779fd8f01205f05f6e88706f086"
-  dependencies:
-    find-cache-dir "^0.1.1"
-    mkdirp "0.5.1"
-
 loader-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -5825,7 +7307,16 @@ loader-utils@1.2.3, loader-utils@^1.2.3:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
-loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
+loader-utils@2.0.0, 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"
+
+loader-utils@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
   dependencies:
@@ -5833,6 +7324,15 @@ loader-utils@^1.0.1, loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^0.5.0"
 
+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@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -5847,14 +7347,17 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
-lodash._reinterpolate@~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._reinterpolate@^3.0.0, lodash._reinterpolate@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -5863,38 +7366,48 @@ lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
 
-lodash.template@^4.2.4, lodash.template@^4.4.0:
+lodash.template@^4.2.4:
   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.template@^4.5.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.1.0"
   resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
   dependencies:
     lodash._reinterpolate "~3.0.0"
 
-lodash.unescape@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
-
 lodash.uniq@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
 
-"lodash@>=3.5 <5", lodash@^4.13.1, lodash@^4.17.10, lodash@^4.17.5, lodash@^4.2.0:
+"lodash@>=3.5 <5", lodash@^4.17.10, lodash@^4.17.5, lodash@^4.2.0:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
+lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 
-loglevel@^1.4.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa"
+lodash@^4.17.19:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+
+loglevel@^1.6.8:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
+  integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
 loose-envify@^1.0.0, loose-envify@^1.4.0:
   version "1.4.0"
@@ -5902,9 +7415,22 @@ loose-envify@^1.0.0, loose-envify@^1.4.0:
   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"
+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"
+
+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"
@@ -5912,6 +7438,20 @@ lru-cache@^5.1.1:
   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"
+
+magic-string@^0.25.0, magic-string@^0.25.7:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -5922,8 +7462,15 @@ make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
   dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+make-dir@^3.0.0, make-dir@^3.0.2:
+  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.x:
   version "1.0.11"
@@ -5931,10 +7478,6 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
-mamacro@^0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/mamacro/-/mamacro-0.0.3.tgz#ad2c9576197c9f1abf308d0787865bd975a3f3e4"
-
 map-age-cleaner@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz#098fb15538fd3dbe461f12745b0ca8568d4e3f74"
@@ -5979,20 +7522,20 @@ mem@^4.0.0:
     mimic-fn "^1.0.0"
     p-is-promise "^1.1.0"
 
-memory-fs@^0.4.0, memory-fs@^0.4.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-deep@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/merge-deep/-/merge-deep-3.0.2.tgz#f39fa100a4f1bd34ff29f7d2bf4508fbb8d83ad2"
+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:
-    arr-union "^3.1.0"
-    clone-deep "^0.2.4"
-    kind-of "^3.0.2"
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
 
 merge-descriptors@1.0.1:
   version "1.0.1"
@@ -6002,9 +7545,10 @@ merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
 
-merge2@^1.2.3:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.3.0.tgz#5b366ee83b2f1582c48f87e47cf1a9352103ca81"
+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==
 
 methods@~1.1.2:
   version "1.1.2"
@@ -6032,6 +7576,14 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     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"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -6044,7 +7596,17 @@ mime-db@1.40.0:
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.40.0.tgz#a65057e998db090f732a68f6c276d387d4126c32"
   integrity sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==
 
-"mime-db@>= 1.36.0 < 2", mime-db@~1.36.0:
+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.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-db@~1.36.0:
   version "1.36.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.36.0.tgz#5020478db3c7fe93aad7bbcc4dcf869c43363397"
 
@@ -6054,6 +7616,13 @@ mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.19:
   dependencies:
     mime-db "~1.36.0"
 
+mime-types@^2.1.27:
+  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.24:
   version "2.1.24"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
@@ -6061,10 +7630,6 @@ mime-types@~2.1.24:
   dependencies:
     mime-db "1.40.0"
 
-mime@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
-
 mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
@@ -6082,9 +7647,15 @@ mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
 
-mini-css-extract-plugin@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.8.0.tgz#81d41ec4fe58c713a96ad7c723cdb2d0bd4d70e1"
+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==
+
+mini-css-extract-plugin@0.11.3:
+  version "0.11.3"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
+  integrity sha512-n9BA8LonkOkW1/zn+IbLPQmovsL0wMb9yx75fMJQZf2X1Zoec9yTZtyMePcyu19wPkmFbzZZA6fLTotpFhQsOA==
   dependencies:
     loader-utils "^1.1.0"
     normalize-url "1.9.1"
@@ -6113,9 +7684,31 @@ 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"
+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==
+
+minipass-collect@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
+  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-flush@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
+  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
+  dependencies:
+    minipass "^3.0.0"
+
+minipass-pipeline@^1.2.2:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
+  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
+  dependencies:
+    minipass "^3.0.0"
 
 minipass@^2.2.1, minipass@^2.3.3:
   version "2.3.4"
@@ -6124,12 +7717,27 @@ minipass@^2.2.1, minipass@^2.3.3:
     safe-buffer "^5.1.2"
     yallist "^3.0.0"
 
+minipass@^3.0.0, minipass@^3.1.1:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
+  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
+  dependencies:
+    yallist "^4.0.0"
+
 minizlib@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
   dependencies:
     minipass "^2.2.1"
 
+minizlib@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
+  dependencies:
+    minipass "^3.0.0"
+    yallist "^4.0.0"
+
 mississippi@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
@@ -6152,19 +7760,24 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mixin-object@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/mixin-object/-/mixin-object-2.0.1.tgz#4fb949441dab182540f1fe035ba60e1947a5e57e"
-  dependencies:
-    for-in "^0.1.3"
-    is-extendable "^0.1.1"
-
-mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
     minimist "0.0.8"
 
+mkdirp@^0.5.3, mkdirp@^0.5.5:
+  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, mkdirp@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
+  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -6195,21 +7808,14 @@ multicast-dns@^6.0.1:
     dns-packet "^1.3.1"
     thunky "^1.0.2"
 
-mute-stream@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
-
-mute-stream@0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
-
 nan@^2.12.1:
   version "2.14.0"
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
 
-nan@^2.9.2:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.11.1.tgz#90e22bccb8ca57ea4cd37cc83d3819b52eea6766"
+nanoid@^3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
 
 nanomatch@^1.2.9:
   version "1.2.13"
@@ -6227,6 +7833,13 @@ nanomatch@^1.2.9:
     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"
@@ -6252,7 +7865,7 @@ neo-async@^2.5.0:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.2.tgz#489105ce7bc54e709d736b195f82135048c50fcc"
 
-neo-async@^2.6.0, neo-async@^2.6.1:
+neo-async@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
 
@@ -6264,15 +7877,18 @@ nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
 
-no-case@^2.2.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
+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 "^1.1.1"
+    lower-case "^2.0.2"
+    tslib "^2.0.3"
 
-node-forge@0.7.5:
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df"
+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"
@@ -6310,30 +7926,17 @@ node-modules-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
 
-node-notifier@^5.4.2:
-  version "5.4.3"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
+node-notifier@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.0.tgz#a7eee2d51da6d0f7ff5094bc7108c911240c1620"
+  integrity sha512-46z7DUmcjoYdaWyXouuFNNfUo6eFa94t23c53c+lG/9Cvauk4a98rAUp9672X5dxGdQmLpPzTxzu8f/OeEPaFA==
   dependencies:
     growly "^1.3.0"
-    is-wsl "^1.1.0"
-    semver "^5.5.0"
+    is-wsl "^2.2.0"
+    semver "^7.3.2"
     shellwords "^0.1.1"
-    which "^1.3.0"
-
-node-pre-gyp@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4"
+    uuid "^8.3.0"
+    which "^2.0.2"
 
 node-pre-gyp@^0.12.0:
   version "0.12.0"
@@ -6356,12 +7959,33 @@ node-releases@^1.0.0-alpha.12:
   dependencies:
     semver "^5.3.0"
 
-node-releases@^1.1.29, node-releases@^1.1.38:
+node-releases@^1.1.38:
   version "1.1.39"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.39.tgz#c1011f30343aff5b633153b10ff691d278d08e8d"
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.61, node-releases@^1.1.67:
+  version "1.1.67"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
+  integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
+
+nodemon@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.6.tgz#1abe1937b463aaf62f0d52e2b7eaadf28cc2240d"
+  integrity sha512-4I3YDSKXg6ltYpcnZeHompqac4E6JeAMpGm8tJnB9Y3T0ehasLa4139dJOcCrB93HHrUMsCrKtoAlXTqT5n4AQ==
+  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"
+
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -6369,6 +7993,13 @@ nopt@^4.0.1:
     abbrev "1"
     osenv "^0.1.4"
 
+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.4.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
@@ -6378,13 +8009,23 @@ normalize-package-data@^2.3.2:
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
+normalize-package-data@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    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"
   dependencies:
     remove-trailing-separator "^1.0.1"
 
-normalize-path@^3.0.0:
+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"
 
@@ -6405,6 +8046,11 @@ normalize-url@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
 
+normalize-url@^4.1.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
+  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
+
 npm-bundled@^1.0.1:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
@@ -6422,6 +8068,13 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
+npm-run-path@^4.0.0:
+  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"
+
 npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -6445,19 +8098,16 @@ number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
 
-nwsapi@^2.0.7:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.0.9.tgz#77ac0cdfdcad52b6a1151a84e73254edc33ed016"
-
-nwsapi@^2.1.3:
+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==
 
 oauth-sign@~0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
 
-object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+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"
 
@@ -6469,14 +8119,15 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-hash@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
-
 object-inspect@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
 
+object-inspect@^1.8.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
 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"
@@ -6485,10 +8136,6 @@ object-keys@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
 
-object-path@0.11.4:
-  version "0.11.4"
-  resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
-
 object-visit@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
@@ -6504,6 +8151,16 @@ object.assign@^4.1.0:
     has-symbols "^1.0.0"
     object-keys "^1.0.11"
 
+object.assign@^4.1.1:
+  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.entries@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
@@ -6513,13 +8170,24 @@ object.entries@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
-object.fromentries@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.1.tgz#050f077855c7af8ae6649f45c80b16ee2d31e704"
+object.entries@^1.1.2:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6"
+  integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==
   dependencies:
+    call-bind "^1.0.0"
     define-properties "^1.1.3"
-    es-abstract "^1.15.0"
-    function-bind "^1.1.1"
+    es-abstract "^1.18.0-next.1"
+    has "^1.0.3"
+
+object.fromentries@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.3.tgz#13cefcffa702dc67750314a3305e8cb3fad1d072"
+  integrity sha512-IDUSMXs6LOSJBWE++L0lzIbSqHl9KDCfff2x/JSEIDtEUavUnyMYC2ZGay/04Zq4UT8lvd4xNhU4/YHKibAOlw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
     has "^1.0.3"
 
 object.getownpropertydescriptors@^2.0.3:
@@ -6553,6 +8221,16 @@ object.values@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
+object.values@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.2.tgz#7a2015e06fcb0f546bd652486ce8583a4731c731"
+  integrity sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+    has "^1.0.3"
+
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
@@ -6563,9 +8241,10 @@ on-finished@~2.3.0:
   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"
+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"
@@ -6573,45 +8252,36 @@ once@^1.3.0, once@^1.3.1, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  dependencies:
-    mimic-fn "^1.0.0"
-
 onetime@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
   dependencies:
     mimic-fn "^2.1.0"
 
-open@^6.3.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
+open@^7.0.2:
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.3.0.tgz#45461fdee46444f3645b6e14eb3ca94b82e1be69"
+  integrity sha512-mgLwQIx2F/ye9SmbrUkurZCnkoXyXyu9EbHtJZrICjVAJfyMArdHp3KkixGdZx1ZHFPNIwl0DDM1dFFqXbTLZw==
   dependencies:
-    is-wsl "^1.1.0"
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
 
-opn@^5.1.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.4.0.tgz#cb545e7aab78562beb11aa3bfabc7042e1761035"
+opn@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
+  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
   dependencies:
     is-wsl "^1.1.0"
 
-optimist@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
-  dependencies:
-    minimist "~0.0.1"
-    wordwrap "~0.0.2"
-
-optimize-css-assets-webpack-plugin@5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz#e2f1d4d94ad8c0af8967ebd7cf138dcb1ef14572"
+optimize-css-assets-webpack-plugin@5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz#85883c6528aaa02e30bbad9908c92926bb52dc90"
+  integrity sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==
   dependencies:
     cssnano "^4.1.10"
     last-call-webpack-plugin "^3.0.0"
 
-optionator@^0.8.1, optionator@^0.8.2:
+optionator@^0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
   dependencies:
@@ -6622,6 +8292,18 @@ optionator@^0.8.1, optionator@^0.8.2:
     type-check "~0.3.2"
     wordwrap "~1.0.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"
+
 original@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
@@ -6644,7 +8326,7 @@ os-locale@^3.0.0:
     lcid "^2.0.0"
     mem "^4.0.0"
 
-os-tmpdir@^1.0.0, os-tmpdir@~1.0.2:
+os-tmpdir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
 
@@ -6655,15 +8337,19 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+p-cancelable@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
+  integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
+
 p-defer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
 
-p-each-series@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-1.0.0.tgz#930f3d12dd1f50e7434457a22cd6f04ac6ad7f71"
-  dependencies:
-    p-reduce "^1.0.0"
+p-each-series@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"
+  integrity sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==
 
 p-finally@^1.0.0:
   version "1.0.0"
@@ -6685,6 +8371,20 @@ p-limit@^2.0.0:
   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@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
@@ -6697,13 +8397,31 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
-p-map@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+p-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-reduce@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-1.0.0.tgz#18c2b0dd936a4690a529f8231f58a0fdb6a47dfa"
+p-map@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
+  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
+
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
+p-retry@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
+  integrity sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==
+  dependencies:
+    retry "^0.12.0"
 
 p-try@^1.0.0:
   version "1.0.0"
@@ -6713,6 +8431,16 @@ 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@^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.6"
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
@@ -6725,11 +8453,13 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@2.1.x:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
+param-case@^3.0.3:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
+  integrity sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==
   dependencies:
-    no-case "^2.2.0"
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
 
 parent-module@^1.0.0:
   version "1.0.1"
@@ -6760,13 +8490,20 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse5@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608"
-
-parse5@5.1.0:
+parse-json@^5.0.0:
   version "5.1.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  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"
+
+parse5@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
 
 parseurl@~1.3.2:
   version "1.3.2"
@@ -6777,6 +8514,14 @@ parseurl@~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"
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -6789,28 +8534,33 @@ path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
 
-path-exists@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
-  dependencies:
-    pinkie-promise "^2.0.0"
-
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
 
+path-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-is-inside@^1.0.1:
+path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
+  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
 
 path-key@^2.0.0, path-key@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
 
+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.5, path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
@@ -6825,11 +8575,10 @@ path-type@^2.0.0:
   dependencies:
     pify "^2.0.0"
 
-path-type@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
-  dependencies:
-    pify "^3.0.0"
+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.0.17"
@@ -6845,6 +8594,11 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
+picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
+  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:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -6873,12 +8627,6 @@ pirates@^4.0.0, pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
-pkg-dir@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-1.0.0.tgz#7a4b508a8d5bb2d629d447056ff4e9c9314cf3d4"
-  dependencies:
-    find-up "^1.0.0"
-
 pkg-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
@@ -6891,29 +8639,35 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-up@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+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 "^2.1.0"
+    find-up "^4.0.0"
 
-pn@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
+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"
 
-pnp-webpack-plugin@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz#62a1cd3068f46d564bb33c56eb250e4d586676eb"
+pnp-webpack-plugin@1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
+  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
   dependencies:
-    ts-pnp "^1.1.2"
+    ts-pnp "^1.1.6"
 
-portfinder@^1.0.9:
-  version "1.0.17"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.17.tgz#a8a1691143e46c4735edefcf4fbcccedad26456a"
+portfinder@^1.0.26:
+  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 "^1.5.2"
-    debug "^2.2.0"
-    mkdirp "0.5.x"
+    async "^2.6.2"
+    debug "^3.1.1"
+    mkdirp "^0.5.5"
 
 posix-character-classes@^0.1.0:
   version "0.1.1"
@@ -6926,11 +8680,12 @@ postcss-attribute-case-insensitive@^4.0.1:
     postcss "^7.0.2"
     postcss-selector-parser "^5.0.0"
 
-postcss-browser-comments@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-2.0.0.tgz#dc48d6a8ddbff188a80a000b7393436cb18aed88"
+postcss-browser-comments@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-3.0.0.tgz#1248d2d935fb72053c8e1f61a84a57292d9f65e9"
+  integrity sha512-qfVjLfq7HFd2e0HW4s1dvU8X080OZdG46fFbIBFjW7US7YPDcWfRvdElvwMJr2LI6hMmD+7LnH2HcmXTs+uOig==
   dependencies:
-    postcss "^7.0.2"
+    postcss "^7"
 
 postcss-calc@^7.0.1:
   version "7.0.1"
@@ -7060,11 +8815,12 @@ postcss-env-function@^2.0.2:
     postcss "^7.0.2"
     postcss-values-parser "^2.0.0"
 
-postcss-flexbugs-fixes@4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.1.0.tgz#e094a9df1783e2200b7b19f875dcad3b3aff8b20"
+postcss-flexbugs-fixes@4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
+  integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==
   dependencies:
-    postcss "^7.0.0"
+    postcss "^7.0.26"
 
 postcss-focus-visible@^4.0.0:
   version "4.0.0"
@@ -7202,26 +8958,30 @@ postcss-modules-extract-imports@^2.0.0:
   dependencies:
     postcss "^7.0.5"
 
-postcss-modules-local-by-default@^2.0.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.6.tgz#dd9953f6dd476b5fd1ef2d8830c8929760b56e63"
+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:
-    postcss "^7.0.6"
-    postcss-selector-parser "^6.0.0"
-    postcss-value-parser "^3.3.1"
+    icss-utils "^4.1.1"
+    postcss "^7.0.32"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
 
-postcss-modules-scope@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.0.tgz#ad3f5bf7856114f6fcab901b0502e2a2bc39d4eb"
+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-values@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64"
+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-replace-symbols "^1.1.0"
+    icss-utils "^4.0.0"
     postcss "^7.0.6"
 
 postcss-nesting@^7.0.0:
@@ -7302,14 +9062,16 @@ postcss-normalize-whitespace@^4.0.2:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
-postcss-normalize@7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-7.0.1.tgz#eb51568d962b8aa61a8318383c8bb7e54332282e"
+postcss-normalize@8.0.1:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-8.0.1.tgz#90e80a7763d7fdf2da6f2f0f82be832ce4f66776"
+  integrity sha512-rt9JMS/m9FHIRroDDBGSMsyW1c0fkvOJPy62ggxSHUldJO7B195TqFMqIf+lY5ezpDcYOV4j86aUp3/XbxzCCQ==
   dependencies:
-    "@csstools/normalize.css" "^9.0.1"
-    browserslist "^4.1.1"
-    postcss "^7.0.2"
-    postcss-browser-comments "^2.0.0"
+    "@csstools/normalize.css" "^10.1.0"
+    browserslist "^4.6.2"
+    postcss "^7.0.17"
+    postcss-browser-comments "^3.0.0"
+    sanitize.css "^10.0.0"
 
 postcss-ordered-values@^4.1.2:
   version "4.1.2"
@@ -7411,11 +9173,12 @@ postcss-replace-overflow-wrap@^3.0.0:
   dependencies:
     postcss "^7.0.2"
 
-postcss-safe-parser@4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-4.0.1.tgz#8756d9e4c36fdce2c72b091bbc8ca176ab1fcdea"
+postcss-safe-parser@5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz#459dd27df6bc2ba64608824ba39e45dacf5e852d"
+  integrity sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==
   dependencies:
-    postcss "^7.0.0"
+    postcss "^8.1.0"
 
 postcss-selector-matches@^4.0.0:
   version "4.0.0"
@@ -7464,6 +9227,16 @@ postcss-selector-parser@^6.0.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+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@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
@@ -7481,7 +9254,7 @@ postcss-unique-selectors@^4.0.1:
     postcss "^7.0.0"
     uniqs "^2.0.0"
 
-postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0:
+postcss-value-parser@^3.0.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
 
@@ -7493,6 +9266,11 @@ postcss-value-parser@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
 
+postcss-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-values-parser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.0.tgz#1ba42cae31367c44f96721cb5eb99462bfb39705"
@@ -7509,9 +9287,18 @@ postcss-values-parser@^2.0.1:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@7.0.14:
-  version "7.0.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.14.tgz#4527ed6b1ca0d82c53ce5ec1a2041c2346bbd6e5"
+postcss@7.0.21, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.21, postcss@^7.0.6:
+  version "7.0.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^7, postcss@^7.0.26, postcss@^7.0.32:
+  version "7.0.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
+  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
   dependencies:
     chalk "^2.4.2"
     source-map "^0.6.1"
@@ -7525,13 +9312,19 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.2, postcss@^7.0.5:
     source-map "^0.6.1"
     supports-color "^5.5.0"
 
-postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.21, postcss@^7.0.6:
-  version "7.0.21"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
+postcss@^8.1.0:
+  version "8.1.14"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.14.tgz#77d6a5db2fdc0afa918e24af5323a53fb8727f2e"
+  integrity sha512-KatkyVPBKfENS+c3dpXJoDXnDD5UZs5exAnDksLqaRJPKwYphEPZt4N0m0i049v2/BtWVQibAhxW4ilXXcolpA==
   dependencies:
-    chalk "^2.4.2"
+    colorette "^1.2.1"
+    nanoid "^3.1.20"
     source-map "^0.6.1"
-    supports-color "^6.1.0"
+
+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"
@@ -7541,9 +9334,15 @@ prepend-http@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
 
-pretty-bytes@^5.1.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
+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=
+
+pretty-bytes@^5.3.0:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
 
 pretty-error@^2.1.1:
   version "2.1.1"
@@ -7552,18 +9351,15 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
+pretty-format@^26.6.0, pretty-format@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
+  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
   dependencies:
-    "@jest/types" "^24.9.0"
-    ansi-regex "^4.0.0"
-    ansi-styles "^3.2.0"
-    react-is "^16.8.4"
-
-private@^0.1.6:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+    "@jest/types" "^26.6.2"
+    ansi-regex "^5.0.0"
+    ansi-styles "^4.0.0"
+    react-is "^17.0.1"
 
 process-nextick-args@~2.0.0:
   version "2.0.0"
@@ -7581,12 +9377,21 @@ promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
 
-promise@8.0.3:
-  version "8.0.3"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-8.0.3.tgz#f592e099c6cddc000d538ee7283bb190452b0bf6"
+promise@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
+  integrity sha512-W04AqnILOL/sPRXziNicCjSNRruLAuIHEOVBazepu0545DDNGYHz7ar9ZgZ1fMU8/MA4mVxp5rkBWRi6OXIy3Q==
   dependencies:
     asap "~2.0.6"
 
+prompts@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7"
+  integrity sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==
+  dependencies:
+    kleur "^3.0.3"
+    sisteransi "^1.0.5"
+
 prompts@^2.0.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
@@ -7600,14 +9405,7 @@ prop-types@^15.7.2:
   dependencies:
     loose-envify "^1.4.0"
     object-assign "^4.1.1"
-    react-is "^16.8.1"
-
-proxy-addr@~2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.4.tgz#ecfc733bf22ff8c6f407fa275327b9ab67e48b93"
-  dependencies:
-    forwarded "~0.1.2"
-    ipaddr.js "1.8.0"
+    react-is "^16.8.1"
 
 proxy-addr@~2.0.5:
   version "2.0.5"
@@ -7621,14 +9419,15 @@ prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
 
-psl@^1.1.24:
-  version "1.1.29"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.29.tgz#60f580d360170bb722a797cc704411e6da850c67"
-
 psl@^1.1.28:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
 
+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"
@@ -7666,7 +9465,7 @@ 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:
+punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
 
@@ -7674,14 +9473,17 @@ punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
+pupa@^2.0.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"
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
 
-qs@6.5.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
-
 qs@6.7.0:
   version "6.7.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -7702,7 +9504,7 @@ 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:
+querystring@0.2.0, querystring@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
@@ -7710,9 +9512,10 @@ querystringify@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
 
-raf@3.4.1:
+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"
 
@@ -7722,6 +9525,13 @@ randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   dependencies:
     safe-buffer "^5.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"
+
 randomfill@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
@@ -7733,19 +9543,6 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
 
-range-parser@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
-
-raw-body@2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
-  dependencies:
-    bytes "3.0.0"
-    http-errors "1.6.2"
-    iconv-lite "0.4.19"
-    unpipe "1.0.0"
-
 raw-body@2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.0.tgz#a1ce6fb9c9bc356ca52e89256ab59059e13d0332"
@@ -7756,7 +9553,7 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.2.7:
+rc@^1.2.7, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   dependencies:
@@ -7765,55 +9562,67 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-app-polyfill@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.4.tgz#4dd2636846b585c2d842b1e44e1bc29044345874"
+react-app-polyfill@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
+  integrity sha512-0sF4ny9v/B7s6aoehwze9vJNWcmCemAUYBVasscVr92+UYiEqDXOxfKjXN685mDaMRNF3WdhHQs76oTODMocFA==
   dependencies:
-    core-js "3.2.1"
-    object-assign "4.1.1"
-    promise "8.0.3"
-    raf "3.4.1"
-    regenerator-runtime "0.13.3"
-    whatwg-fetch "3.0.0"
+    core-js "^3.6.5"
+    object-assign "^4.1.1"
+    promise "^8.1.0"
+    raf "^3.4.1"
+    regenerator-runtime "^0.13.7"
+    whatwg-fetch "^3.4.1"
 
-react-dev-utils@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-9.1.0.tgz#3ad2bb8848a32319d760d0a84c56c14bdaae5e81"
+react-dev-utils@^11.0.1:
+  version "11.0.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.1.tgz#30106c2055acfd6b047d2dc478a85c356e66fe45"
+  integrity sha512-rlgpCupaW6qQqvu0hvv2FDv40QG427fjghV56XyPcP5aKtOAPzNAhQ7bHqk1YdS2vpW1W7aSV3JobedxuPlBAA==
   dependencies:
-    "@babel/code-frame" "7.5.5"
+    "@babel/code-frame" "7.10.4"
     address "1.1.2"
-    browserslist "4.7.0"
+    browserslist "4.14.2"
     chalk "2.4.2"
-    cross-spawn "6.0.5"
+    cross-spawn "7.0.3"
     detect-port-alt "1.1.6"
-    escape-string-regexp "1.0.5"
-    filesize "3.6.1"
-    find-up "3.0.0"
-    fork-ts-checker-webpack-plugin "1.5.0"
+    escape-string-regexp "2.0.0"
+    filesize "6.1.0"
+    find-up "4.1.0"
+    fork-ts-checker-webpack-plugin "4.1.6"
     global-modules "2.0.0"
-    globby "8.0.2"
+    globby "11.0.1"
     gzip-size "5.1.1"
-    immer "1.10.0"
-    inquirer "6.5.0"
+    immer "7.0.9"
     is-root "2.1.0"
-    loader-utils "1.2.3"
-    open "^6.3.0"
-    pkg-up "2.0.0"
-    react-error-overlay "^6.0.3"
+    loader-utils "2.0.0"
+    open "^7.0.2"
+    pkg-up "3.1.0"
+    prompts "2.4.0"
+    react-error-overlay "^6.0.8"
     recursive-readdir "2.2.2"
     shell-quote "1.7.2"
-    sockjs-client "1.4.0"
-    strip-ansi "5.2.0"
+    strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-error-overlay@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.3.tgz#c378c4b0a21e88b2e159a3e62b2f531fd63bf60d"
+react-error-overlay@^6.0.8:
+  version "6.0.8"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
+  integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
 
-react-is@^16.8.1, react-is@^16.8.4:
+react-is@^16.8.1:
   version "16.11.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
 
+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-refresh@^0.8.3:
+  version "0.8.3"
+  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
+  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
+
 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"
@@ -7821,12 +9630,14 @@ read-pkg-up@^2.0.0:
     find-up "^2.0.0"
     read-pkg "^2.0.0"
 
-read-pkg-up@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-4.0.0.tgz#1b221c6088ba7799601c808f91161c66e58f8978"
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
   dependencies:
-    find-up "^3.0.0"
-    read-pkg "^3.0.0"
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
 
 read-pkg@^2.0.0:
   version "2.0.0"
@@ -7836,14 +9647,6 @@ read-pkg@^2.0.0:
     normalize-package-data "^2.3.2"
     path-type "^2.0.0"
 
-read-pkg@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
-  dependencies:
-    load-json-file "^4.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^3.0.0"
-
 read-pkg@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-4.0.1.tgz#963625378f3e1c4d48c85872b5a6ec7d5d093237"
@@ -7853,6 +9656,16 @@ read-pkg@^4.0.1:
     parse-json "^4.0.0"
     pify "^3.0.0"
 
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
+
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
@@ -7882,7 +9695,7 @@ readable-stream@^3.0.6:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readdirp@^2.0.0, readdirp@^2.2.1:
+readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
   dependencies:
@@ -7890,11 +9703,12 @@ readdirp@^2.0.0, readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-realpath-native@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
+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:
-    util.promisify "^1.0.0"
+    picomatch "^2.2.1"
 
 recursive-readdir@2.2.2:
   version "2.2.2"
@@ -7908,23 +9722,32 @@ regenerate-unicode-properties@^8.1.0:
   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"
 
-regenerator-runtime@0.13.3, regenerator-runtime@^0.13.2:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz#7cf6a77d8f5c6f60eb73c5fc1955b2ceb01e6bf5"
-
 regenerator-runtime@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
 
-regenerator-transform@^0.14.0:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.1.tgz#3b2fce4e1ab7732c08f665dfdb314749c7ddd2fb"
+regenerator-runtime@^0.13.4, 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-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:
-    private "^0.1.6"
+    "@babel/runtime" "^7.8.4"
 
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
@@ -7933,13 +9756,23 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regex-parser@2.2.10:
-  version "2.2.10"
-  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.10.tgz#9e66a8f73d89a107616e63b39d4deddfee912b37"
+regex-parser@^2.2.11:
+  version "2.2.11"
+  resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
+  integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
 
-regexpp@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
+regexp.prototype.flags@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
+
+regexpp@^3.0.0, regexpp@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
+  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
 regexpu-core@^4.6.0:
   version "4.6.0"
@@ -7952,19 +9785,58 @@ regexpu-core@^4.6.0:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.1.0"
 
+regexpu-core@^4.7.1:
+  version "4.7.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
+  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
+  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"
+
+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.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
 
+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"
   dependencies:
     jsesc "~0.5.0"
 
-relateurl@0.2.x:
+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"
+
+relateurl@^0.2.7:
   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"
@@ -7988,23 +9860,26 @@ repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
 
-request-promise-core@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.1.tgz#3eee00b2c5aa83239cfb04c5700da36f81cd08b6"
+request-promise-core@1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
+  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
   dependencies:
-    lodash "^4.13.1"
+    lodash "^4.17.19"
 
-request-promise-native@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5"
+request-promise-native@^1.0.8:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
+  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
   dependencies:
-    request-promise-core "1.1.1"
-    stealthy-require "^1.1.0"
-    tough-cookie ">=2.3.3"
+    request-promise-core "1.1.4"
+    stealthy-require "^1.1.1"
+    tough-cookie "^2.3.3"
 
-request@^2.87.0, request@^2.88.0:
-  version "2.88.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
+request@^2.88.2:
+  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"
@@ -8013,7 +9888,7 @@ request@^2.87.0, request@^2.88.0:
     extend "~3.0.2"
     forever-agent "~0.6.1"
     form-data "~2.3.2"
-    har-validator "~5.1.0"
+    har-validator "~5.1.3"
     http-signature "~1.2.0"
     is-typedarray "~1.0.0"
     isstream "~0.1.2"
@@ -8023,7 +9898,7 @@ request@^2.87.0, request@^2.88.0:
     performance-now "^2.1.0"
     qs "~6.5.2"
     safe-buffer "^5.1.2"
-    tough-cookie "~2.4.3"
+    tough-cookie "~2.5.0"
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
@@ -8053,6 +9928,13 @@ resolve-cwd@^2.0.0:
   dependencies:
     resolve-from "^3.0.0"
 
+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@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
@@ -8061,17 +9943,23 @@ resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
 
-resolve-url-loader@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.0.tgz#54d8181d33cd1b66a59544d05cadf8e4aa7d37cc"
+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@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
+  integrity sha512-QEb4A76c8Mi7I3xNKXlRKQSlLBwjUV/ULFMP+G7n3/7tJZ8MG5wsZ3ucxP1Jz8Vevn6fnJsxDx9cIls+utGzPQ==
   dependencies:
-    adjust-sourcemap-loader "2.0.0"
-    camelcase "5.0.0"
+    adjust-sourcemap-loader "3.0.0"
+    camelcase "5.3.1"
     compose-function "3.0.3"
-    convert-source-map "1.6.0"
+    convert-source-map "1.7.0"
     es6-iterator "2.0.3"
     loader-utils "1.2.3"
-    postcss "7.0.14"
+    postcss "7.0.21"
     rework "1.0.1"
     rework-visit "1.0.0"
     source-map "0.6.1"
@@ -8080,40 +9968,55 @@ resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
 
-resolve@1.1.7:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
+resolve@1.18.1:
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130"
+  integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==
+  dependencies:
+    is-core-module "^2.0.0"
+    path-parse "^1.0.6"
 
-resolve@1.12.0, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.11.0, resolve@^1.12.0:
+resolve@^1.10.0, resolve@^1.12.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.3.2, resolve@^1.5.0, resolve@^1.8.1:
+resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
+  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
+  dependencies:
+    is-core-module "^2.1.0"
+    path-parse "^1.0.6"
+
+resolve@^1.3.2, resolve@^1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
   dependencies:
     path-parse "^1.0.5"
 
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
-restore-cursor@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
+responselike@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
+  integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=
   dependencies:
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
+    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"
 
+retry@^0.12.0:
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
+  integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
+
+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==
+
 rework-visit@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
@@ -8133,13 +10036,7 @@ rgba-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
 
-rimraf@2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
-  dependencies:
-    glob "^7.1.3"
-
-rimraf@^2.2.8, rimraf@^2.5.4, rimraf@^2.6.1:
+rimraf@^2.5.4, rimraf@^2.6.1:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
   dependencies:
@@ -8151,6 +10048,13 @@ rimraf@^2.6.3:
   dependencies:
     glob "^7.1.3"
 
+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"
+
 ripemd160@^2.0.0, ripemd160@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
@@ -8158,15 +10062,49 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-babel@^4.3.3:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz#d15bd259466a9d1accbdb2fe2fff17c52d030acb"
+  integrity sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    rollup-pluginutils "^2.8.1"
+
+rollup-plugin-terser@^5.3.1:
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz#8c650062c22a8426c64268548957463bf981b413"
+  integrity sha512-1pkwkervMJQGFYvM9nscrUoncPwiKR/K+bHdjv6PFgRo3cgPHoRT83y2Aa3GvINj4539S15t/tpFPb775TDs6w==
+  dependencies:
+    "@babel/code-frame" "^7.5.5"
+    jest-worker "^24.9.0"
+    rollup-pluginutils "^2.8.2"
+    serialize-javascript "^4.0.0"
+    terser "^4.6.2"
+
+rollup-pluginutils@^2.8.1, 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@^1.31.1:
+  version "1.32.1"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.32.1.tgz#4480e52d9d9e2ae4b46ba0d9ddeaf3163940f9c4"
+  integrity sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==
+  dependencies:
+    "@types/estree" "*"
+    "@types/node" "*"
+    acorn "^7.1.0"
+
 rsvp@^4.8.4:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
 
-run-async@^2.2.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
-  dependencies:
-    is-promise "^2.1.0"
+run-parallel@^1.1.9:
+  version "1.1.10"
+  resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
+  integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==
 
 run-queue@^1.0.0, run-queue@^1.0.3:
   version "1.0.3"
@@ -8174,16 +10112,12 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rxjs@^6.4.0, rxjs@^6.5.2:
+rxjs@^6.5.2:
   version "6.5.3"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
   dependencies:
     tslib "^1.9.0"
 
-safe-buffer@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
-
 safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -8216,25 +10150,32 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-loader@7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.2.0.tgz#e34115239309d15b2527cb62b5dfefb62a96ff7f"
+sanitize.css@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-10.0.0.tgz#b5cb2547e96d8629a60947544665243b1dc3657a"
+  integrity sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==
+
+sass-loader@8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
+  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
   dependencies:
     clone-deep "^4.0.1"
-    loader-utils "^1.0.1"
-    neo-async "^2.5.0"
-    pify "^4.0.1"
-    semver "^5.5.0"
+    loader-utils "^1.2.3"
+    neo-async "^2.6.1"
+    schema-utils "^2.6.1"
+    semver "^6.3.0"
 
 sax@^1.2.4, sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-saxes@^3.1.9:
-  version "3.1.11"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+saxes@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
+  integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
   dependencies:
-    xmlchars "^2.1.1"
+    xmlchars "^2.2.0"
 
 schema-utils@^1.0.0:
   version "1.0.0"
@@ -8244,52 +10185,70 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.0.1, schema-utils@^2.2.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.5.0.tgz#8f254f618d402cc80257486213c8970edfd7c22f"
+schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.7.0, schema-utils@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
+  integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
   dependencies:
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
+    "@types/json-schema" "^7.0.5"
+    ajv "^6.12.4"
+    ajv-keywords "^3.5.2"
+
+schema-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.0.0.tgz#67502f6aa2b66a2d4032b4279a2944978a0913ef"
+  integrity sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==
+  dependencies:
+    "@types/json-schema" "^7.0.6"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
 
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
 
-selfsigned@^1.9.1:
-  version "1.10.3"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.3.tgz#d628ecf9e3735f84e8bafba936b3cf85bea43823"
+selfsigned@^1.10.7:
+  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.7.5"
+    node-forge "^0.10.0"
+
+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.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
 
-semver@6.3.0, semver@^6.0.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+semver@7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
+  integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
+
+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@^5.6.0:
+semver@^5.6.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
 
-send@0.16.2:
-  version "0.16.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.16.2.tgz#6ecca1e0f8c156d141597559848df64730a6bbc1"
+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"
+
+semver@^7.2.1, semver@^7.3.2:
+  version "7.3.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
+  integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
   dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.6.2"
-    mime "1.4.1"
-    ms "2.0.0"
-    on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.4.0"
+    lru-cache "^6.0.0"
 
 send@0.17.1:
   version "0.17.1"
@@ -8310,13 +10269,24 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
-serialize-javascript@^1.7.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-1.9.1.tgz#cfc200aef77b600c47da9bb8149c943e798c2fdb"
+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-index@^1.7.2:
+serialize-javascript@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
+  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
+  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"
@@ -8326,15 +10296,6 @@ serve-index@^1.7.2:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.13.2:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.13.2.tgz#095e8472fd5b46237db50ce486a43f4b86c6cec1"
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.2"
-    send "0.16.2"
-
 serve-static@1.14.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.1.tgz#666e636dc4f010f7ef29970a88a674320898b2f9"
@@ -8371,10 +10332,6 @@ setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
 
-setprototypeof@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
-
 setprototypeof@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
@@ -8391,15 +10348,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallow-clone@^0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-0.1.2.tgz#5909e874ba77106d73ac414cfec1ffca87d97060"
-  dependencies:
-    is-extendable "^0.1.1"
-    kind-of "^2.0.1"
-    lazy-cache "^0.2.3"
-    mixin-object "^2.0.1"
-
 shallow-clone@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
@@ -8412,10 +10360,22 @@ shebang-command@^1.2.0:
   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"
 
+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.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
@@ -8424,6 +10384,14 @@ shellwords@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
+side-channel@^1.0.2, side-channel@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
+  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+  dependencies:
+    es-abstract "^1.18.0-next.0"
+    object-inspect "^1.8.0"
+
 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"
@@ -8438,13 +10406,10 @@ sisteransi@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.3.tgz#98168d62b79e3a5e758e27ae63c4a053d748f4eb"
 
-slash@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"
-
-slash@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/slash/-/slash-2.0.0.tgz#de552851a1759df3a8f206535442f5ec4ddeab44"
+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"
@@ -8485,17 +10450,6 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-sockjs-client@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.3.0.tgz#12fc9d6cb663da5739d3dc5fb6e8687da95cb177"
-  dependencies:
-    debug "^3.2.5"
-    eventsource "^1.0.7"
-    faye-websocket "~0.11.1"
-    inherits "^2.0.3"
-    json3 "^3.3.2"
-    url-parse "^1.4.3"
-
 sockjs-client@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
@@ -8507,12 +10461,14 @@ sockjs-client@1.4.0:
     json3 "^3.3.2"
     url-parse "^1.4.3"
 
-sockjs@0.3.19:
-  version "0.3.19"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.19.tgz#d976bbe800af7bd20ae08598d582393508993c0d"
+sockjs@0.3.20:
+  version "0.3.20"
+  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.20.tgz#b26a283ec562ef8b2687b44033a4eeceac75d855"
+  integrity sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==
   dependencies:
     faye-websocket "^0.10.0"
-    uuid "^3.0.1"
+    uuid "^3.4.0"
+    websocket-driver "0.6.5"
 
 sort-keys@^1.0.0:
   version "1.1.2"
@@ -8548,6 +10504,14 @@ source-map-support@^0.5.6:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@~0.5.19:
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  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"
@@ -8560,6 +10524,16 @@ source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
+source-map@^0.7.3, source-map@~0.7.2:
+  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.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 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"
@@ -8598,9 +10572,10 @@ spdy-transport@^3.0.0:
     readable-stream "^3.0.6"
     wbuf "^1.7.3"
 
-spdy@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/spdy/-/spdy-4.0.1.tgz#6f12ed1c5db7ea4f24ebb8b89ba58c87c08257f2"
+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"
@@ -8639,13 +10614,28 @@ ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
+ssri@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.0.tgz#79ca74e21f8ceaeddfcb4b90143c458b8d988808"
+  integrity sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==
+  dependencies:
+    minipass "^3.1.1"
+
 stable@^0.1.8, stable@~0.1.6:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
 
-stack-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.1.tgz#d4f33ab54e8e38778b0ca5cfd3b3afb12db68620"
+stack-utils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
+  integrity sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
+  dependencies:
+    escape-string-regexp "^2.0.0"
+
+stackframe@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
+  integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
 
 static-extend@^0.1.1:
   version "0.1.2"
@@ -8654,17 +10644,14 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
 
-statuses@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
-
-stealthy-require@^1.1.0:
+stealthy-require@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
+  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
 
 stream-browserify@^2.0.1:
   version "2.0.1"
@@ -8698,19 +10685,18 @@ strict-uri-encode@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
 
-string-length@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
+string-length@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
+  integrity sha512-PKyXUd0LK0ePjSOnWn34V2uD6acUWev9uy0Ft05k0E8xRW+SKcA0F7eMr7h5xlzfn+4O3N+55rduYyet3Jk+jw==
   dependencies:
-    astral-regex "^1.0.0"
-    strip-ansi "^4.0.0"
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
 
-string-length@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
-  dependencies:
-    astral-regex "^1.0.0"
-    strip-ansi "^5.2.0"
+string-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@^1.0.1:
   version "1.0.2"
@@ -8720,7 +10706,7 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
+"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
   dependencies:
@@ -8735,6 +10721,15 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.0.0, string-width@^4.2.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:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
@@ -8743,6 +10738,27 @@ string-width@^4.1.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^5.2.0"
 
+string.prototype.matchall@^4.0.2:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.3.tgz#24243399bc31b0a49d19e2b74171a15653ec996a"
+  integrity sha512-OBxYDA2ifZQ2e13cP82dWFMaCV9CGF8GzmN4fljBVw5O5wep0lu4gacm1OL6MjROoUnB8VbkWRThqkV2YFLNxw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+    has-symbols "^1.0.1"
+    internal-slot "^1.0.2"
+    regexp.prototype.flags "^1.3.0"
+    side-channel "^1.0.3"
+
+string.prototype.trimend@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b"
+  integrity sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 string.prototype.trimleft@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
@@ -8757,6 +10773,14 @@ string.prototype.trimright@^2.1.0:
     define-properties "^1.1.3"
     function-bind "^1.1.1"
 
+string.prototype.trimstart@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz#9b4cb590e123bb36564401d59824298de50fd5aa"
+  integrity sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -8781,11 +10805,12 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-strip-ansi@5.2.0, strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+strip-ansi@6.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 "^4.1.0"
+    ansi-regex "^5.0.0"
 
 strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
@@ -8799,10 +10824,21 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  dependencies:
+    ansi-regex "^4.1.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@^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@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
@@ -8814,20 +10850,27 @@ strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
 
-strip-json-comments@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
+strip-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.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"
 
-style-loader@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.0.0.tgz#1d5296f9165e8e2c85d24eee0b7caf9ec8ca1f82"
+style-loader@1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"
+  integrity sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==
   dependencies:
-    loader-utils "^1.2.3"
-    schema-utils "^2.0.1"
+    loader-utils "^2.0.0"
+    schema-utils "^2.7.0"
 
 stylehacks@^4.0.0:
   version "4.0.1"
@@ -8837,10 +10880,6 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
-supports-color@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
-
 supports-color@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
@@ -8860,9 +10899,25 @@ supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
-svg-parser@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.2.tgz#d134cc396fa2681dc64f518330784e98bd801ec8"
+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-hyperlinks@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
+  integrity sha512-zoE5/e+dnEijk6ASB6/qrK+oYdm2do1hjoLWrqUC/8WEIW1gbxFcKuBof7sW8ArN6e+AYvsE8HBGiVRWL/F5CA==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
+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.0.0:
   version "1.1.1"
@@ -8901,9 +10956,10 @@ svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-tree@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+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==
 
 table@^5.2.3:
   version "5.4.6"
@@ -8914,7 +10970,7 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tapable@^1.0.0, tapable@^1.1.0:
+tapable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.0.tgz#0d076a172e3d9ba088fd2272b2668fb8d194b78c"
 
@@ -8934,15 +10990,70 @@ tar@^4:
     safe-buffer "^5.1.2"
     yallist "^3.0.2"
 
-terser-webpack-plugin@1.4.1, terser-webpack-plugin@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.1.tgz#61b18e40eaee5be97e771cdbb10ed1280888c2b4"
+tar@^6.0.2:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f"
+  integrity sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg==
+  dependencies:
+    chownr "^2.0.0"
+    fs-minipass "^2.0.0"
+    minipass "^3.0.0"
+    minizlib "^2.1.1"
+    mkdirp "^1.0.3"
+    yallist "^4.0.0"
+
+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=
+
+tempy@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.3.0.tgz#6f6c5b295695a16130996ad5ab01a8bd726e8bf8"
+  integrity sha512-WrH/pui8YCwmeiAoxV+lpRH9HpRtgBhSR2ViBPgpGb/wnYDzp21R4MN45fsCGvLROvY67o3byhJRYRONJyImVQ==
+  dependencies:
+    temp-dir "^1.0.0"
+    type-fest "^0.3.1"
+    unique-string "^1.0.0"
+
+term-size@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
+
+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@4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz#28daef4a83bd17c1db0297070adc07fc8cfc6a9a"
+  integrity sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ==
+  dependencies:
+    cacache "^15.0.5"
+    find-cache-dir "^3.3.1"
+    jest-worker "^26.5.0"
+    p-limit "^3.0.2"
+    schema-utils "^3.0.0"
+    serialize-javascript "^5.0.1"
+    source-map "^0.6.1"
+    terser "^5.3.4"
+    webpack-sources "^1.4.3"
+
+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 "^1.7.0"
+    serialize-javascript "^4.0.0"
     source-map "^0.6.1"
     terser "^4.1.2"
     webpack-sources "^1.4.0"
@@ -8956,22 +11067,41 @@ terser@^4.1.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-test-exclude@^5.2.3:
-  version "5.2.3"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
+terser@^4.6.2, terser@^4.6.3:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
+  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
   dependencies:
-    glob "^7.1.3"
+    commander "^2.20.0"
+    source-map "~0.6.1"
+    source-map-support "~0.5.12"
+
+terser@^5.3.4:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289"
+  integrity sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.19"
+
+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"
-    read-pkg-up "^4.0.0"
-    require-main-filename "^2.0.0"
 
 text-table@0.2.0, text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-throat@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
+throat@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
+  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
 
 through2@^2.0.0:
   version "2.0.3"
@@ -8980,10 +11110,6 @@ through2@^2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@^2.3.6:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
-
 thunky@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.2.tgz#a862e018e3fb1ea2ec3fce5d55605cf57f247371"
@@ -8998,12 +11124,6 @@ timsort@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
 
-tmp@^0.0.33:
-  version "0.0.33"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
-  dependencies:
-    os-tmpdir "~1.0.2"
-
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
@@ -9022,6 +11142,11 @@ to-object-path@^0.3.0:
   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"
@@ -9029,6 +11154,13 @@ to-regex-range@^2.1.0:
     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"
@@ -9043,25 +11175,36 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-tough-cookie@>=2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"
+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:
-    psl "^1.1.24"
-    punycode "^1.4.1"
+    nopt "~1.0.10"
 
-tough-cookie@^2.5.0:
+tough-cookie@^2.3.3, 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@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
+tough-cookie@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
+  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
   dependencies:
-    punycode "^2.1.0"
+    ip-regex "^2.1.0"
+    psl "^1.1.28"
+    punycode "^2.1.1"
+
+tr46@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
+  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+  dependencies:
+    punycode "^2.1.1"
 
 tree-kill@^1.2.1:
   version "1.2.1"
@@ -9072,9 +11215,25 @@ trim-right@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
 
-ts-pnp@1.1.4, ts-pnp@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.4.tgz#ae27126960ebaefb874c6d7fa4729729ab200d90"
+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-pnp@1.2.0, ts-pnp@^1.1.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
+  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
+
+tsconfig-paths@^3.9.0:
+  version "3.9.0"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
+  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.0"
+    strip-bom "^3.0.0"
 
 tslib@^1.8.1:
   version "1.10.0"
@@ -9084,6 +11243,11 @@ tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
 
+tslib@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
+  integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
+
 tsutils@^3.17.1:
   version "3.17.1"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
@@ -9104,22 +11268,47 @@ 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.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"
   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.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
+  integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
+
 type-fest@^0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
 
-type-is@~1.6.15, type-is@~1.6.16:
-  version "1.6.16"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.16.tgz#f89ce341541c672b25ee7ae3c73dee3b2be50194"
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.18"
+type-fest@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
+type-fest@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
 
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
@@ -9137,16 +11326,23 @@ type@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
 
+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"
 
-uglify-js@3.4.x, uglify-js@^3.1.4:
-  version "3.4.9"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
+undefsafe@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.3.tgz#6b166e7094ad46313b2202da7ecc2cd7cc6e7aae"
+  integrity sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==
   dependencies:
-    commander "~2.17.1"
-    source-map "~0.6.1"
+    debug "^2.2.0"
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
@@ -9163,6 +11359,11 @@ unicode-match-property-value-ecmascript@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
 
+unicode-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.4"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
@@ -9196,10 +11397,34 @@ unique-slug@^2.0.0:
   dependencies:
     imurmurhash "^0.1.4"
 
+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"
+
+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.1.0:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
 
+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.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
+  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
+
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -9215,17 +11440,29 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-upath@^1.0.5:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd"
-
-upath@^1.1.1:
+upath@^1.1.1, upath@^1.1.2, upath@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894"
-
-upper-case@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
+  integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==
+
+update-notifier@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"
+  integrity sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==
+  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"
 
 uri-js@^4.2.2:
   version "4.2.2"
@@ -9237,13 +11474,21 @@ urix@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
 
-url-loader@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-2.1.0.tgz#bcc1ecabbd197e913eca23f5e0378e24b4412961"
+url-loader@4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
+  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
   dependencies:
-    loader-utils "^1.2.3"
-    mime "^2.4.4"
-    schema-utils "^2.0.0"
+    loader-utils "^2.0.0"
+    mime-types "^2.1.27"
+    schema-utils "^3.0.0"
+
+url-parse-lax@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
+  integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=
+  dependencies:
+    prepend-http "^2.0.0"
 
 url-parse@^1.4.3:
   version "1.4.3"
@@ -9263,11 +11508,11 @@ use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+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"
 
-util.promisify@1.0.0, util.promisify@^1.0.0, util.promisify@~1.0.0:
+util.promisify@1.0.0, util.promisify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
   dependencies:
@@ -9294,14 +11539,33 @@ utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
 
-uuid@^3.0.1, uuid@^3.3.2:
+uuid@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
 
+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==
+
+uuid@^8.3.0:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
+  integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
+
 v8-compile-cache@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
 
+v8-to-istanbul@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-7.0.0.tgz#b4fe00e35649ef7785a9b7fcebcea05f37c332fc"
+  integrity sha512-fLL2rFuQpMtm9r8hrAV2apXX/WqHJ6+IC4/eQVdMDGBUgH/YMV4Gv3duk3kjmyg6uiQWBAA9nJwue4iJUOkHeA==
+  dependencies:
+    "@types/istanbul-lib-coverage" "^2.0.1"
+    convert-source-map "^1.6.0"
+    source-map "^0.7.3"
+
 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"
@@ -9329,18 +11593,18 @@ vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
 
-w3c-hr-time@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
+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 "^0.1.2"
+    browser-process-hrtime "^1.0.0"
 
-w3c-xmlserializer@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
+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:
-    domexception "^1.0.1"
-    webidl-conversions "^4.0.2"
     xml-name-validator "^3.0.0"
 
 walker@^1.0.7, walker@~1.0.5:
@@ -9349,13 +11613,23 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-watchpack@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"
+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:
-    chokidar "^2.0.2"
     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.3:
   version "1.7.3"
@@ -9363,13 +11637,20 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   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"
+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@^3.5.1:
+webpack-dev-middleware@^3.7.2:
   version "3.7.2"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
+  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
   dependencies:
     memory-fs "^0.4.1"
     mime "^2.4.4"
@@ -9377,40 +11658,44 @@ webpack-dev-middleware@^3.5.1:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@3.2.1:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.2.1.tgz#1b45ce3ecfc55b6ebe5e36dab2777c02bc508c4e"
+webpack-dev-server@3.11.0:
+  version "3.11.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
+  integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
-    chokidar "^2.0.0"
-    compression "^1.5.2"
-    connect-history-api-fallback "^1.3.0"
+    chokidar "^2.1.8"
+    compression "^1.7.4"
+    connect-history-api-fallback "^1.6.0"
     debug "^4.1.1"
-    del "^3.0.0"
-    express "^4.16.2"
-    html-entities "^1.2.0"
-    http-proxy-middleware "^0.19.1"
+    del "^4.1.1"
+    express "^4.17.1"
+    html-entities "^1.3.1"
+    http-proxy-middleware "0.19.1"
     import-local "^2.0.0"
-    internal-ip "^4.2.0"
+    internal-ip "^4.3.0"
     ip "^1.1.5"
-    killable "^1.0.0"
-    loglevel "^1.4.1"
-    opn "^5.1.0"
-    portfinder "^1.0.9"
+    is-absolute-url "^3.0.3"
+    killable "^1.0.1"
+    loglevel "^1.6.8"
+    opn "^5.5.0"
+    p-retry "^3.0.1"
+    portfinder "^1.0.26"
     schema-utils "^1.0.0"
-    selfsigned "^1.9.1"
-    semver "^5.6.0"
-    serve-index "^1.7.2"
-    sockjs "0.3.19"
-    sockjs-client "1.3.0"
-    spdy "^4.0.0"
-    strip-ansi "^3.0.0"
+    selfsigned "^1.10.7"
+    semver "^6.3.0"
+    serve-index "^1.9.1"
+    sockjs "0.3.20"
+    sockjs-client "1.4.0"
+    spdy "^4.0.2"
+    strip-ansi "^3.0.1"
     supports-color "^6.1.0"
     url "^0.11.0"
-    webpack-dev-middleware "^3.5.1"
+    webpack-dev-middleware "^3.7.2"
     webpack-log "^2.0.0"
-    yargs "12.0.2"
+    ws "^6.2.1"
+    yargs "^13.3.2"
 
 webpack-log@^2.0.0:
   version "2.0.0"
@@ -9419,9 +11704,10 @@ webpack-log@^2.0.0:
     ansi-colors "^3.0.0"
     uuid "^3.3.2"
 
-webpack-manifest-plugin@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.1.1.tgz#6b3e280327815b83152c79f42d0ca13b665773c4"
+webpack-manifest-plugin@2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
+  integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
   dependencies:
     fs-extra "^7.0.0"
     lodash ">=3.5 <5"
@@ -9435,41 +11721,49 @@ webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   dependencies:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@4.41.0:
-  version "4.41.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.0.tgz#db6a254bde671769f7c14e90a1a55e73602fc70b"
+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.8.5"
-    "@webassemblyjs/helper-module-context" "1.8.5"
-    "@webassemblyjs/wasm-edit" "1.8.5"
-    "@webassemblyjs/wasm-parser" "1.8.5"
-    acorn "^6.2.1"
+    "@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.1.0"
+    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.1"
+    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.1"
-    watchpack "^1.6.0"
+    terser-webpack-plugin "^1.4.3"
+    watchpack "^1.7.4"
     webpack-sources "^1.4.1"
 
+websocket-driver@0.6.5:
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
+  integrity sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=
+  dependencies:
+    websocket-extensions ">=0.1.1"
+
 websocket-driver@>=0.5.1:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.7.0.tgz#0caf9d2d755d93aee049d4bdd0d3fe2cca2a24eb"
@@ -9481,182 +11775,221 @@ websocket-extensions@>=0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
 
-whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
+whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb"
-
-whatwg-mimetype@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"
+whatwg-fetch@^3.4.1:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
+  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
 
-whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
 
-whatwg-url@^6.4.1:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.5.0.tgz#f2df02bff176fd65070df74ad5ccbb5a199965a8"
-  dependencies:
-    lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
-
-whatwg-url@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"
+whatwg-url@^8.0.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.4.0.tgz#50fb9615b05469591d2b2bd6dfaed2942ed72837"
+  integrity sha512-vwTUFf6V4zhcPkWp/4CQPr1TW9Ml6SF4lVyaIMBdJw5i6qUUJ1QWM4Z6YYVkfka0OUIzVo/0aNtGVGk256IKWw==
   dependencies:
     lodash.sortby "^4.7.0"
-    tr46 "^1.0.1"
-    webidl-conversions "^4.0.2"
+    tr46 "^2.0.2"
+    webidl-conversions "^6.1.0"
 
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
 
-which@^1.2.9, which@^1.3.0, which@^1.3.1:
+which@^1.2.9, which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   dependencies:
     isexe "^2.0.0"
 
+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"
+
 wide-align@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
   dependencies:
     string-width "^1.0.2 || 2"
 
-wordwrap@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+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"
+
+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@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
 
-workbox-background-sync@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz#26821b9bf16e9e37fd1d640289edddc08afd1950"
+workbox-background-sync@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-5.1.4.tgz#5ae0bbd455f4e9c319e8d827c055bb86c894fd12"
+  integrity sha512-AH6x5pYq4vwQvfRDWH+vfOePfPIYQ00nCEB7dJRU1e0n9+9HMRyvI63FlDvtFT2AvXVRsXvUt7DNMEToyJLpSA==
   dependencies:
-    workbox-core "^4.3.1"
+    workbox-core "^5.1.4"
 
-workbox-broadcast-update@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz#e2c0280b149e3a504983b757606ad041f332c35b"
+workbox-broadcast-update@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-5.1.4.tgz#0eeb89170ddca7f6914fa3523fb14462891f2cfc"
+  integrity sha512-HTyTWkqXvHRuqY73XrwvXPud/FN6x3ROzkfFPsRjtw/kGZuZkPzfeH531qdUGfhtwjmtO/ZzXcWErqVzJNdXaA==
   dependencies:
-    workbox-core "^4.3.1"
+    workbox-core "^5.1.4"
 
-workbox-build@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-4.3.1.tgz#414f70fb4d6de47f6538608b80ec52412d233e64"
+workbox-build@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-5.1.4.tgz#23d17ed5c32060c363030c8823b39d0eabf4c8c7"
+  integrity sha512-xUcZn6SYU8usjOlfLb9Y2/f86Gdo+fy1fXgH8tJHjxgpo53VVsqRX0lUDw8/JuyzNmXuo8vXX14pXX2oIm9Bow==
   dependencies:
-    "@babel/runtime" "^7.3.4"
-    "@hapi/joi" "^15.0.0"
+    "@babel/core" "^7.8.4"
+    "@babel/preset-env" "^7.8.4"
+    "@babel/runtime" "^7.8.4"
+    "@hapi/joi" "^15.1.0"
+    "@rollup/plugin-node-resolve" "^7.1.1"
+    "@rollup/plugin-replace" "^2.3.1"
+    "@surma/rollup-plugin-off-main-thread" "^1.1.1"
     common-tags "^1.8.0"
-    fs-extra "^4.0.2"
-    glob "^7.1.3"
-    lodash.template "^4.4.0"
-    pretty-bytes "^5.1.0"
+    fast-json-stable-stringify "^2.1.0"
+    fs-extra "^8.1.0"
+    glob "^7.1.6"
+    lodash.template "^4.5.0"
+    pretty-bytes "^5.3.0"
+    rollup "^1.31.1"
+    rollup-plugin-babel "^4.3.3"
+    rollup-plugin-terser "^5.3.1"
+    source-map "^0.7.3"
+    source-map-url "^0.4.0"
     stringify-object "^3.3.0"
     strip-comments "^1.0.2"
-    workbox-background-sync "^4.3.1"
-    workbox-broadcast-update "^4.3.1"
-    workbox-cacheable-response "^4.3.1"
-    workbox-core "^4.3.1"
-    workbox-expiration "^4.3.1"
-    workbox-google-analytics "^4.3.1"
-    workbox-navigation-preload "^4.3.1"
-    workbox-precaching "^4.3.1"
-    workbox-range-requests "^4.3.1"
-    workbox-routing "^4.3.1"
-    workbox-strategies "^4.3.1"
-    workbox-streams "^4.3.1"
-    workbox-sw "^4.3.1"
-    workbox-window "^4.3.1"
-
-workbox-cacheable-response@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz#f53e079179c095a3f19e5313b284975c91428c91"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-core@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-4.3.1.tgz#005d2c6a06a171437afd6ca2904a5727ecd73be6"
-
-workbox-expiration@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-4.3.1.tgz#d790433562029e56837f341d7f553c4a78ebe921"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-google-analytics@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz#9eda0183b103890b5c256e6f4ea15a1f1548519a"
-  dependencies:
-    workbox-background-sync "^4.3.1"
-    workbox-core "^4.3.1"
-    workbox-routing "^4.3.1"
-    workbox-strategies "^4.3.1"
-
-workbox-navigation-preload@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz#29c8e4db5843803b34cd96dc155f9ebd9afa453d"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-precaching@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-4.3.1.tgz#9fc45ed122d94bbe1f0ea9584ff5940960771cba"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-range-requests@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz#f8a470188922145cbf0c09a9a2d5e35645244e74"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-routing@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-4.3.1.tgz#a675841af623e0bb0c67ce4ed8e724ac0bed0cda"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-strategies@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-4.3.1.tgz#d2be03c4ef214c115e1ab29c9c759c9fe3e9e646"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-streams@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-4.3.1.tgz#0b57da70e982572de09c8742dd0cb40a6b7c2cc3"
-  dependencies:
-    workbox-core "^4.3.1"
-
-workbox-sw@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-4.3.1.tgz#df69e395c479ef4d14499372bcd84c0f5e246164"
-
-workbox-webpack-plugin@4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-4.3.1.tgz#47ff5ea1cc074b6c40fb5a86108863a24120d4bd"
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    json-stable-stringify "^1.0.1"
-    workbox-build "^4.3.1"
+    tempy "^0.3.0"
+    upath "^1.2.0"
+    workbox-background-sync "^5.1.4"
+    workbox-broadcast-update "^5.1.4"
+    workbox-cacheable-response "^5.1.4"
+    workbox-core "^5.1.4"
+    workbox-expiration "^5.1.4"
+    workbox-google-analytics "^5.1.4"
+    workbox-navigation-preload "^5.1.4"
+    workbox-precaching "^5.1.4"
+    workbox-range-requests "^5.1.4"
+    workbox-routing "^5.1.4"
+    workbox-strategies "^5.1.4"
+    workbox-streams "^5.1.4"
+    workbox-sw "^5.1.4"
+    workbox-window "^5.1.4"
+
+workbox-cacheable-response@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-5.1.4.tgz#9ff26e1366214bdd05cf5a43da9305b274078a54"
+  integrity sha512-0bfvMZs0Of1S5cdswfQK0BXt6ulU5kVD4lwer2CeI+03czHprXR3V4Y8lPTooamn7eHP8Iywi5QjyAMjw0qauA==
+  dependencies:
+    workbox-core "^5.1.4"
+
+workbox-core@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-5.1.4.tgz#8bbfb2362ecdff30e25d123c82c79ac65d9264f4"
+  integrity sha512-+4iRQan/1D8I81nR2L5vcbaaFskZC2CL17TLbvWVzQ4qiF/ytOGF6XeV54pVxAvKUtkLANhk8TyIUMtiMw2oDg==
+
+workbox-expiration@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-5.1.4.tgz#92b5df461e8126114943a3b15c55e4ecb920b163"
+  integrity sha512-oDO/5iC65h2Eq7jctAv858W2+CeRW5e0jZBMNRXpzp0ZPvuT6GblUiHnAsC5W5lANs1QS9atVOm4ifrBiYY7AQ==
+  dependencies:
+    workbox-core "^5.1.4"
+
+workbox-google-analytics@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-5.1.4.tgz#b3376806b1ac7d7df8418304d379707195fa8517"
+  integrity sha512-0IFhKoEVrreHpKgcOoddV+oIaVXBFKXUzJVBI+nb0bxmcwYuZMdteBTp8AEDJacENtc9xbR0wa9RDCnYsCDLjA==
+  dependencies:
+    workbox-background-sync "^5.1.4"
+    workbox-core "^5.1.4"
+    workbox-routing "^5.1.4"
+    workbox-strategies "^5.1.4"
+
+workbox-navigation-preload@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-5.1.4.tgz#30d1b720d26a05efc5fa11503e5cc1ed5a78902a"
+  integrity sha512-Wf03osvK0wTflAfKXba//QmWC5BIaIZARU03JIhAEO2wSB2BDROWI8Q/zmianf54kdV7e1eLaIEZhth4K4MyfQ==
+  dependencies:
+    workbox-core "^5.1.4"
+
+workbox-precaching@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-5.1.4.tgz#874f7ebdd750dd3e04249efae9a1b3f48285fe6b"
+  integrity sha512-gCIFrBXmVQLFwvAzuGLCmkUYGVhBb7D1k/IL7pUJUO5xacjLcFUaLnnsoVepBGAiKw34HU1y/YuqvTKim9qAZA==
+  dependencies:
+    workbox-core "^5.1.4"
+
+workbox-range-requests@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-5.1.4.tgz#7066a12c121df65bf76fdf2b0868016aa2bab859"
+  integrity sha512-1HSujLjgTeoxHrMR2muDW2dKdxqCGMc1KbeyGcmjZZAizJTFwu7CWLDmLv6O1ceWYrhfuLFJO+umYMddk2XMhw==
+  dependencies:
+    workbox-core "^5.1.4"
+
+workbox-routing@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-5.1.4.tgz#3e8cd86bd3b6573488d1a2ce7385e547b547e970"
+  integrity sha512-8ljknRfqE1vEQtnMtzfksL+UXO822jJlHTIR7+BtJuxQ17+WPZfsHqvk1ynR/v0EHik4x2+826Hkwpgh4GKDCw==
+  dependencies:
+    workbox-core "^5.1.4"
+
+workbox-strategies@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-5.1.4.tgz#96b1418ccdfde5354612914964074d466c52d08c"
+  integrity sha512-VVS57LpaJTdjW3RgZvPwX0NlhNmscR7OQ9bP+N/34cYMDzXLyA6kqWffP6QKXSkca1OFo/v6v7hW7zrrguo6EA==
+  dependencies:
+    workbox-core "^5.1.4"
+    workbox-routing "^5.1.4"
+
+workbox-streams@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-5.1.4.tgz#05754e5e3667bdc078df2c9315b3f41210d8cac0"
+  integrity sha512-xU8yuF1hI/XcVhJUAfbQLa1guQUhdLMPQJkdT0kn6HP5CwiPOGiXnSFq80rAG4b1kJUChQQIGPrq439FQUNVrw==
+  dependencies:
+    workbox-core "^5.1.4"
+    workbox-routing "^5.1.4"
+
+workbox-sw@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-5.1.4.tgz#2bb34c9f7381f90d84cef644816d45150011d3db"
+  integrity sha512-9xKnKw95aXwSNc8kk8gki4HU0g0W6KXu+xks7wFuC7h0sembFnTrKtckqZxbSod41TDaGh+gWUA5IRXrL0ECRA==
+
+workbox-webpack-plugin@5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-5.1.4.tgz#7bfe8c16e40fe9ed8937080ac7ae9c8bde01e79c"
+  integrity sha512-PZafF4HpugZndqISi3rZ4ZK4A4DxO8rAqt2FwRptgsDx7NF8TVKP86/huHquUsRjMGQllsNdn4FNl8CD/UvKmQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    fast-json-stable-stringify "^2.0.0"
+    source-map-url "^0.4.0"
+    upath "^1.1.2"
+    webpack-sources "^1.3.0"
+    workbox-build "^5.1.4"
 
-workbox-window@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-4.3.1.tgz#ee6051bf10f06afa5483c9b8dfa0531994ede0f3"
+workbox-window@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-5.1.4.tgz#2740f7dea7f93b99326179a62f1cc0ca2c93c863"
+  integrity sha512-vXQtgTeMCUq/4pBWMfQX8Ee7N2wVC4Q7XYFqLnfbXJ2hqew/cU1uMTD2KqGEgEpE4/30luxIxgE+LkIa8glBYw==
   dependencies:
-    workbox-core "^4.3.1"
+    workbox-core "^5.1.4"
 
 worker-farm@^1.7.0:
   version "1.7.0"
@@ -9685,47 +12018,54 @@ wrap-ansi@^5.1.0:
     string-width "^3.0.0"
     strip-ansi "^5.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"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
 
-write-file-atomic@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
+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:
-    graceful-fs "^4.1.11"
     imurmurhash "^0.1.4"
+    is-typedarray "^1.0.0"
     signal-exit "^3.0.2"
+    typedarray-to-buffer "^3.1.5"
 
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
-  dependencies:
-    mkdirp "^0.5.1"
-
-ws@^5.2.0:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-5.2.2.tgz#dffef14866b8e8dc9133582514d1befaf96e980f"
-  dependencies:
-    async-limiter "~1.0.0"
-
-ws@^6.1.2:
+ws@^6.2.1:
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
+  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
   dependencies:
     async-limiter "~1.0.0"
 
+ws@^7.2.3:
+  version "7.4.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.1.tgz#a333be02696bd0e54cea0434e21dcc8a9ac294bb"
+  integrity sha512-pTsP8UAfhy3sk1lSk/O/s4tjD0CRwvMnzvwr4OKGX7ZvqZtUyx4KIJB5JWbkykPoc55tixMGgTNoh3k4FkNGFQ==
+
+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==
+
 xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
 
-xmlchars@^2.1.1:
+xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
-
-xregexp@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.0.0.tgz#e698189de49dd2a18cc5687b05e17c8e43943020"
+  integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
 xtend@^4.0.0, xtend@~4.0.1:
   version "4.0.1"
@@ -9739,11 +12079,15 @@ yallist@^3.0.0, yallist@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
 
-yargs-parser@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
-  dependencies:
-    camelcase "^4.1.0"
+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.10.0, yaml@^1.7.2:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
 
 yargs-parser@^11.1.1:
   version "11.1.1"
@@ -9753,29 +12097,21 @@ yargs-parser@^11.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
-yargs-parser@^13.1.1:
-  version "13.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.1.tgz#d26058532aa06d365fe091f6a1fc06b2f7e5eca0"
+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@12.0.2:
-  version "12.0.2"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.2.tgz#fe58234369392af33ecbef53819171eff0f5aadc"
+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:
-    cliui "^4.0.0"
-    decamelize "^2.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^1.0.1"
-    os-locale "^3.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1 || ^4.0.0"
-    yargs-parser "^10.1.0"
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
 
 yargs@^12.0.5:
   version "12.0.5"
@@ -9795,9 +12131,10 @@ yargs@^12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-yargs@^13.3.0:
-  version "13.3.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
+yargs@^13.3.2:
+  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"
@@ -9808,4 +12145,26 @@ yargs@^13.3.0:
     string-width "^3.0.0"
     which-module "^2.0.0"
     y18n "^4.0.0"
-    yargs-parser "^13.1.1"
+    yargs-parser "^13.1.2"
+
+yargs@^15.4.1:
+  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"
+
+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==

From ce40f1dc2f8e0869ae4b484e7248a449efba64c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 7 Dec 2020 20:54:28 -0500
Subject: [PATCH 0124/1603] Use assets API + writeToDisk instead of directly
 writing to disk (#20402)

---
 .../flight/config/webpackDevServer.config.js  |  3 +++
 fixtures/flight/server/handler.server.js      |  2 +-
 .../src/ReactFlightWebpackPlugin.js           | 23 +++++++++++--------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/fixtures/flight/config/webpackDevServer.config.js b/fixtures/flight/config/webpackDevServer.config.js
index 9892bec9488c..8870c04d7e21 100644
--- a/fixtures/flight/config/webpackDevServer.config.js
+++ b/fixtures/flight/config/webpackDevServer.config.js
@@ -90,6 +90,9 @@ module.exports = function(proxy, allowedHost) {
     watchOptions: {
       ignored: ignoredFiles(paths.appSrc),
     },
+    writeToDisk: filePath => {
+      return /react-client-manifest\.json$/.test(filePath);
+    },
     https: getHttpsConfig(),
     host,
     overlay: false,
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index 85037cf280a4..3a7b138ae4ad 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -10,7 +10,7 @@ module.exports = function(req, res) {
   import('../src/App.server.js').then(m => {
     const dist = process.env.NODE_ENV === 'development' ? 'dist' : 'build';
     readFile(
-      resolve(__dirname, `../${dist}/react-transport-manifest.json`),
+      resolve(__dirname, `../${dist}/react-client-manifest.json`),
       'utf8',
       (err, data) => {
         if (err) {
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
index f86f965e11e9..3ae5acbe460a 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -7,8 +7,7 @@
  * @flow
  */
 
-import {mkdirSync, writeFileSync} from 'fs';
-import {dirname, resolve, join} from 'path';
+import {join} from 'path';
 import {pathToFileURL} from 'url';
 
 import asyncLib from 'neo-async';
@@ -48,6 +47,7 @@ type Options = {
   isServer: boolean,
   clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
   chunkName?: string,
+  manifestFilename?: string,
 };
 
 const PLUGIN_NAME = 'React Transport Plugin';
@@ -55,6 +55,8 @@ const PLUGIN_NAME = 'React Transport Plugin';
 export default class ReactFlightWebpackPlugin {
   clientReferences: $ReadOnlyArray<ClientReferencePath>;
   chunkName: string;
+  manifestFilename: string;
+
   constructor(options: Options) {
     if (!options || typeof options.isServer !== 'boolean') {
       throw new Error(
@@ -88,6 +90,8 @@ export default class ReactFlightWebpackPlugin {
     } else {
       this.chunkName = 'client[index]';
     }
+    this.manifestFilename =
+      options.manifestFilename || 'react-client-manifest.json';
   }
 
   apply(compiler: any) {
@@ -189,13 +193,14 @@ export default class ReactFlightWebpackPlugin {
         });
       });
       const output = JSON.stringify(json, null, 2);
-      const filename = resolve(
-        compiler.options.output.path,
-        'react-transport-manifest.json',
-      );
-      mkdirSync(dirname(filename), {recursive: true});
-      // TODO: Use webpack's emit API and read from the devserver.
-      writeFileSync(filename, output);
+      compilation.assets[this.manifestFilename] = {
+        source() {
+          return output;
+        },
+        size() {
+          return output.length;
+        },
+      };
     });
   }
 

From 5fd9db732dff1b99c096bffef9a565b594c788de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 8 Dec 2020 08:08:57 -0500
Subject: [PATCH 0125/1603] [Flight] Rename react-transport-... packages to
 react-server-... (#20403)

* Move files

* Update paths

* Rename import variables

* Rename /server to /writer

This is mainly because "React Server Server" is weird so we need another
dimension.

* Use "react-server" convention to enforce that writer is only loaded in a server
---
 .eslintrc.js                                  |  4 +-
 fixtures/flight-browser/index.html            | 10 ++--
 fixtures/flight/config/webpack.config.js      |  2 +-
 fixtures/flight/loader/index.js               |  2 +-
 fixtures/flight/server/cli.server.js          |  2 +-
 fixtures/flight/server/handler.server.js      |  2 +-
 fixtures/flight/src/index.js                  |  6 +-
 ...ReactFlightClientHostConfig.dom-browser.js |  2 +-
 .../ReactFlightClientHostConfig.dom-relay.js  |  2 +-
 .../forks/ReactFlightClientHostConfig.dom.js  |  2 +-
 ...eactFlightClientHostConfig.native-relay.js |  2 +-
 .../index.js                                  |  0
 .../package.json                              |  4 +-
 .../server.js                                 |  0
 .../src/ReactFlightDOMRelayClient.js          |  0
 .../ReactFlightDOMRelayClientHostConfig.js    |  0
 .../src/ReactFlightDOMRelayProtocol.js        |  0
 .../src/ReactFlightDOMRelayServer.js          |  0
 .../ReactFlightDOMRelayServerHostConfig.js    |  0
 .../src/__mocks__/JSResourceReference.js      |  0
 .../ReactFlightDOMRelayClientIntegration.js   |  0
 .../ReactFlightDOMRelayServerIntegration.js   |  0
 .../ReactFlightDOMRelay-test.internal.js      |  4 +-
 .../README.md                                 |  2 +-
 .../esm/package.json                          |  0
 .../react-server-dom-webpack-node-loader.js}  |  0
 .../index.js                                  |  0
 .../node-register.js                          |  0
 .../npm/esm/package.json                      |  0
 .../react-server-dom-webpack/npm/index.js     |  7 +++
 .../npm/node-register.js                      |  3 +
 .../react-server-dom-webpack/npm/plugin.js    |  3 +
 .../npm/writer.browser.server.js              |  7 +++
 .../react-server-dom-webpack/npm/writer.js    |  6 ++
 .../npm/writer.node.server.js                 |  7 +++
 .../package.json                              | 28 ++++++----
 .../plugin.js                                 |  0
 .../ReactFlightClientWebpackBundlerConfig.js  |  0
 .../src/ReactFlightDOMClient.js               |  0
 .../src/ReactFlightDOMServerBrowser.js        |  0
 .../src/ReactFlightDOMServerNode.js           |  0
 .../ReactFlightServerWebpackBundlerConfig.js  |  0
 .../src/ReactFlightWebpackNodeLoader.js       |  0
 .../src/ReactFlightWebpackNodeRegister.js     |  0
 .../src/ReactFlightWebpackPlugin.js           |  2 +-
 .../src/__tests__/ReactFlightDOM-test.js      | 36 ++++++------
 .../__tests__/ReactFlightDOMBrowser-test.js   | 12 ++--
 .../writer.browser.server.js}                 |  0
 .../writer.js}                                |  5 +-
 .../writer.node.server.js}                    |  0
 .../index.js                                  |  0
 .../package.json                              |  4 +-
 .../server.js                                 |  0
 .../src/ReactFlightNativeRelayClient.js       |  0
 .../ReactFlightNativeRelayClientHostConfig.js |  0
 .../src/ReactFlightNativeRelayProtocol.js     |  0
 .../src/ReactFlightNativeRelayServer.js       |  0
 .../ReactFlightNativeRelayServerHostConfig.js |  0
 .../src/__mocks__/JSResourceReferenceImpl.js  |  0
 ...ReactFlightNativeRelayClientIntegration.js |  0
 ...ReactFlightNativeRelayServerIntegration.js |  0
 .../ReactFlightNativeRelay-test.internal.js   |  4 +-
 ...actFlightNativeRelay-test.internal.js.snap |  0
 .../ReactFlightServerConfig.dom-browser.js    |  2 +-
 .../ReactFlightServerConfig.dom-relay.js      |  2 +-
 .../src/forks/ReactFlightServerConfig.dom.js  |  2 +-
 .../ReactFlightServerConfig.native-relay.js   |  2 +-
 .../react-transport-dom-webpack/npm/index.js  |  7 ---
 .../npm/node-register.js                      |  3 -
 .../react-transport-dom-webpack/npm/plugin.js |  3 -
 .../npm/server.browser.js                     |  7 ---
 .../react-transport-dom-webpack/npm/server.js |  3 -
 .../npm/server.node.js                        |  7 ---
 scripts/rollup/bundles.js                     | 56 +++++++++----------
 scripts/rollup/packaging.js                   |  2 +-
 scripts/shared/inlinedHostConfigs.js          | 35 ++++++------
 76 files changed, 154 insertions(+), 147 deletions(-)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/index.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/package.json (76%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/server.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/ReactFlightDOMRelayClient.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/ReactFlightDOMRelayClientHostConfig.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/ReactFlightDOMRelayProtocol.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/ReactFlightDOMRelayServer.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/ReactFlightDOMRelayServerHostConfig.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/__mocks__/JSResourceReference.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/__mocks__/ReactFlightDOMRelayClientIntegration.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/__mocks__/ReactFlightDOMRelayServerIntegration.js (100%)
 rename packages/{react-transport-dom-relay => react-server-dom-relay}/src/__tests__/ReactFlightDOMRelay-test.internal.js (97%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/README.md (74%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/esm/package.json (100%)
 rename packages/{react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js => react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.js} (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/index.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/node-register.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/npm/esm/package.json (100%)
 create mode 100644 packages/react-server-dom-webpack/npm/index.js
 create mode 100644 packages/react-server-dom-webpack/npm/node-register.js
 create mode 100644 packages/react-server-dom-webpack/npm/plugin.js
 create mode 100644 packages/react-server-dom-webpack/npm/writer.browser.server.js
 create mode 100644 packages/react-server-dom-webpack/npm/writer.js
 create mode 100644 packages/react-server-dom-webpack/npm/writer.node.server.js
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/package.json (56%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/plugin.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightClientWebpackBundlerConfig.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightDOMClient.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightDOMServerBrowser.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightDOMServerNode.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightServerWebpackBundlerConfig.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightWebpackNodeLoader.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightWebpackNodeRegister.js (100%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/ReactFlightWebpackPlugin.js (99%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/__tests__/ReactFlightDOM-test.js (91%)
 rename packages/{react-transport-dom-webpack => react-server-dom-webpack}/src/__tests__/ReactFlightDOMBrowser-test.js (80%)
 rename packages/{react-transport-dom-webpack/server.browser.js => react-server-dom-webpack/writer.browser.server.js} (100%)
 rename packages/{react-transport-dom-webpack/server.js => react-server-dom-webpack/writer.js} (52%)
 rename packages/{react-transport-dom-webpack/server.node.js => react-server-dom-webpack/writer.node.server.js} (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/index.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/package.json (76%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/server.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/ReactFlightNativeRelayClient.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/ReactFlightNativeRelayClientHostConfig.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/ReactFlightNativeRelayProtocol.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/ReactFlightNativeRelayServer.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/ReactFlightNativeRelayServerHostConfig.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/__mocks__/JSResourceReferenceImpl.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/__mocks__/ReactFlightNativeRelayClientIntegration.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/__mocks__/ReactFlightNativeRelayServerIntegration.js (100%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/__tests__/ReactFlightNativeRelay-test.internal.js (95%)
 rename packages/{react-transport-native-relay => react-server-native-relay}/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap (100%)
 delete mode 100644 packages/react-transport-dom-webpack/npm/index.js
 delete mode 100644 packages/react-transport-dom-webpack/npm/node-register.js
 delete mode 100644 packages/react-transport-dom-webpack/npm/plugin.js
 delete mode 100644 packages/react-transport-dom-webpack/npm/server.browser.js
 delete mode 100644 packages/react-transport-dom-webpack/npm/server.js
 delete mode 100644 packages/react-transport-dom-webpack/npm/server.node.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 715c6eb96074..a456964bdbdb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -185,14 +185,14 @@ module.exports = {
     {
       files: [
         'packages/react-native-renderer/**/*.js',
-        'packages/react-transport-native-relay/**/*.js',
+        'packages/react-server-native-relay/**/*.js',
       ],
       globals: {
         nativeFabricUIManager: true,
       },
     },
     {
-      files: ['packages/react-transport-dom-webpack/**/*.js'],
+      files: ['packages/react-server-dom-webpack/**/*.js'],
       globals: {
         __webpack_chunk_load__: true,
         __webpack_require__: true,
diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
index 1fc2a4e19528..c48e3e4c9e63 100644
--- a/fixtures/flight-browser/index.html
+++ b/fixtures/flight-browser/index.html
@@ -19,8 +19,8 @@ <h1>Flight Example</h1>
     <script src="../../build/node_modules/react/umd/react.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
-    <script src="../../build/node_modules/react-transport-dom-webpack/umd/react-transport-dom-webpack-server.browser.development.js"></script>
-    <script src="../../build/node_modules/react-transport-dom-webpack/umd/react-transport-dom-webpack.development.js"></script>
+    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.server.development.js"></script>
+    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let Suspense = React.Suspense;
@@ -60,7 +60,7 @@ <h1>Flight Example</h1>
         content: <HTML />,
       };
 
-      let stream = ReactTransportDOMServer.renderToReadableStream(model);
+      let stream = ReactServerDOMWriter.renderToReadableStream(model);
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });
@@ -70,13 +70,13 @@ <h1>Flight Example</h1>
         let blob = await responseToDisplay.blob();
         let url = URL.createObjectURL(blob);
 
-        let data = ReactTransportDOMClient.createFromFetch(
+        let data = ReactServerDOMReader.createFromFetch(
           fetch(url)
         );
         // The client also supports XHR streaming.
         // var xhr = new XMLHttpRequest();
         // xhr.open('GET', url);
-        // let data = ReactTransportDOMClient.createFromXHR(xhr);
+        // let data = ReactServerDOMReader.createFromXHR(xhr);
         // xhr.send();
 
         renderResult(data);
diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
index 37037c207b4c..2d4bbe74f614 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -1,7 +1,7 @@
 'use strict';
 
 // Fork Start
-const ReactFlightWebpackPlugin = require('react-transport-dom-webpack/plugin');
+const ReactFlightWebpackPlugin = require('react-server-dom-webpack/plugin');
 // Fork End
 
 const fs = require('fs');
diff --git a/fixtures/flight/loader/index.js b/fixtures/flight/loader/index.js
index 04960e6dcc9e..07e7eacd0104 100644
--- a/fixtures/flight/loader/index.js
+++ b/fixtures/flight/loader/index.js
@@ -2,7 +2,7 @@ import {
   resolve,
   getSource,
   transformSource as reactTransformSource,
-} from 'react-transport-dom-webpack/node-loader';
+} from 'react-server-dom-webpack/node-loader';
 
 export {resolve, getSource};
 
diff --git a/fixtures/flight/server/cli.server.js b/fixtures/flight/server/cli.server.js
index fefef07e9bd0..3b60f0579614 100644
--- a/fixtures/flight/server/cli.server.js
+++ b/fixtures/flight/server/cli.server.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const register = require('react-transport-dom-webpack/node-register');
+const register = require('react-server-dom-webpack/node-register');
 register();
 
 const babelRegister = require('@babel/register');
diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index 3a7b138ae4ad..cd4af7319f01 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const {pipeToNodeWritable} = require('react-transport-dom-webpack/server');
+const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');
 const {readFile} = require('fs');
 const {resolve} = require('path');
 const React = require('react');
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index 4069f2fe88eb..a096ff25e897 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -1,11 +1,9 @@
 import * as React from 'react';
 import {Suspense} from 'react';
 import ReactDOM from 'react-dom';
-import ReactTransportDOMClient from 'react-transport-dom-webpack';
+import ReactServerDOMReader from 'react-server-dom-webpack';
 
-let data = ReactTransportDOMClient.createFromFetch(
-  fetch('http://localhost:3001')
-);
+let data = ReactServerDOMReader.createFromFetch(fetch('http://localhost:3001'));
 
 function Content() {
   return data.readRoot();
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js
index 96c6d5c723ab..59e1171c144e 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-browser.js
@@ -9,4 +9,4 @@
 
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
-export * from 'react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js
index bafd639ab2d1..cfa4c770aafe 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-relay.js
@@ -7,5 +7,5 @@
  * @flow
  */
 
-export * from 'react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig';
+export * from 'react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig';
 export * from '../ReactFlightClientHostConfigNoStream';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom.js
index 96c6d5c723ab..59e1171c144e 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom.js
@@ -9,4 +9,4 @@
 
 export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
 export * from 'react-client/src/ReactFlightClientHostConfigStream';
-export * from 'react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
+export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
index ca1d639fe948..594b723a3d97 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.native-relay.js
@@ -7,5 +7,5 @@
  * @flow
  */
 
-export * from 'react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig';
+export * from 'react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig';
 export * from '../ReactFlightClientHostConfigNoStream';
diff --git a/packages/react-transport-dom-relay/index.js b/packages/react-server-dom-relay/index.js
similarity index 100%
rename from packages/react-transport-dom-relay/index.js
rename to packages/react-server-dom-relay/index.js
diff --git a/packages/react-transport-dom-relay/package.json b/packages/react-server-dom-relay/package.json
similarity index 76%
rename from packages/react-transport-dom-relay/package.json
rename to packages/react-server-dom-relay/package.json
index d89d18392998..5353bf9a1e5e 100644
--- a/packages/react-transport-dom-relay/package.json
+++ b/packages/react-server-dom-relay/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "react-transport-dom-relay",
+  "name": "react-server-dom-relay",
   "version": "0.1.0",
   "private": true,
   "repository": {
     "type" : "git",
     "url" : "https://github.com/facebook/react.git",
-    "directory": "packages/react-transport-dom-relay"
+    "directory": "packages/react-server-dom-relay"
   },
   "dependencies": {
     "object-assign": "^4.1.1",
diff --git a/packages/react-transport-dom-relay/server.js b/packages/react-server-dom-relay/server.js
similarity index 100%
rename from packages/react-transport-dom-relay/server.js
rename to packages/react-server-dom-relay/server.js
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/ReactFlightDOMRelayClient.js
rename to packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
rename to packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/ReactFlightDOMRelayProtocol.js
rename to packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/ReactFlightDOMRelayServer.js
rename to packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
diff --git a/packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
rename to packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
diff --git a/packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js b/packages/react-server-dom-relay/src/__mocks__/JSResourceReference.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/__mocks__/JSResourceReference.js
rename to packages/react-server-dom-relay/src/__mocks__/JSResourceReference.js
diff --git a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js b/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
rename to packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
diff --git a/packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js b/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
similarity index 100%
rename from packages/react-transport-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
rename to packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
diff --git a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
similarity index 97%
rename from packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
rename to packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 1bdb8b7684b8..e63a357b31da 100644
--- a/packages/react-transport-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -21,8 +21,8 @@ describe('ReactFlightDOMRelay', () => {
     act = require('react-dom/test-utils').unstable_concurrentAct;
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactDOMFlightRelayServer = require('react-transport-dom-relay/server');
-    ReactDOMFlightRelayClient = require('react-transport-dom-relay');
+    ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
+    ReactDOMFlightRelayClient = require('react-server-dom-relay');
     JSResourceReference = require('JSResourceReference');
   });
 
diff --git a/packages/react-transport-dom-webpack/README.md b/packages/react-server-dom-webpack/README.md
similarity index 74%
rename from packages/react-transport-dom-webpack/README.md
rename to packages/react-server-dom-webpack/README.md
index 1897fa8502d7..f3568e050b16 100644
--- a/packages/react-transport-dom-webpack/README.md
+++ b/packages/react-server-dom-webpack/README.md
@@ -1,4 +1,4 @@
-# react-transport-dom-webpack
+# react-server-dom-webpack
 
 Experimental React Flight bindings for DOM using Webpack.
 
diff --git a/packages/react-transport-dom-webpack/esm/package.json b/packages/react-server-dom-webpack/esm/package.json
similarity index 100%
rename from packages/react-transport-dom-webpack/esm/package.json
rename to packages/react-server-dom-webpack/esm/package.json
diff --git a/packages/react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js b/packages/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.js
similarity index 100%
rename from packages/react-transport-dom-webpack/esm/react-transport-dom-webpack-node-loader.js
rename to packages/react-server-dom-webpack/esm/react-server-dom-webpack-node-loader.js
diff --git a/packages/react-transport-dom-webpack/index.js b/packages/react-server-dom-webpack/index.js
similarity index 100%
rename from packages/react-transport-dom-webpack/index.js
rename to packages/react-server-dom-webpack/index.js
diff --git a/packages/react-transport-dom-webpack/node-register.js b/packages/react-server-dom-webpack/node-register.js
similarity index 100%
rename from packages/react-transport-dom-webpack/node-register.js
rename to packages/react-server-dom-webpack/node-register.js
diff --git a/packages/react-transport-dom-webpack/npm/esm/package.json b/packages/react-server-dom-webpack/npm/esm/package.json
similarity index 100%
rename from packages/react-transport-dom-webpack/npm/esm/package.json
rename to packages/react-server-dom-webpack/npm/esm/package.json
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 000000000000..76932ab8e3c6
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/index.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack.development.js');
+}
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 000000000000..9c7c6a9fcfdf
--- /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 000000000000..64e01aad024c
--- /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/writer.browser.server.js b/packages/react-server-dom-webpack/npm/writer.browser.server.js
new file mode 100644
index 000000000000..e15f6bdec7f8
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/writer.browser.server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-writer.browser.server.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-writer.browser.server.development.js');
+}
diff --git a/packages/react-server-dom-webpack/npm/writer.js b/packages/react-server-dom-webpack/npm/writer.js
new file mode 100644
index 000000000000..13a632e64117
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/writer.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/writer.node.server.js b/packages/react-server-dom-webpack/npm/writer.node.server.js
new file mode 100644
index 000000000000..b40cc946ea2f
--- /dev/null
+++ b/packages/react-server-dom-webpack/npm/writer.node.server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-server-dom-webpack-writer.node.server.production.min.js');
+} else {
+  module.exports = require('./cjs/react-server-dom-webpack-writer.node.server.development.js');
+}
diff --git a/packages/react-transport-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
similarity index 56%
rename from packages/react-transport-dom-webpack/package.json
rename to packages/react-server-dom-webpack/package.json
index e2666f94809f..711ffb37d68e 100644
--- a/packages/react-transport-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-transport-dom-webpack",
-  "description": "React Transport bindings for DOM using Webpack. This is intended to be integrated into meta-frameworks. It is not intended to be imported directly.",
+  "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": "0.1.0",
   "private": true,
   "keywords": [
@@ -14,9 +14,9 @@
     "README.md",
     "index.js",
     "plugin.js",
-    "server.js",
-    "server.browser.js",
-    "server.node.js",
+    "writer.js",
+    "writer.browser.server.js",
+    "writer.node.server.js",
     "node-register.js",
     "cjs/",
     "umd/",
@@ -25,21 +25,27 @@
   "exports": {
     ".": "./index.js",
     "./plugin": "./plugin.js",
-    "./server": "./server.js",
-    "./server.browser": "./server.browser.js",
-    "./server.node": "./server.node.js",
-    "./node-loader": "./esm/react-transport-dom-webpack-node-loader.js",
+    "./writer": {
+      "react-server": {
+        "node": "./writer.node.server.js",
+        "browser": "./writer.browser.server.js"
+      },
+      "default": "./writer.js"
+    },
+    "./writer.node.server": "./writer.node.server.js",
+    "./writer.browser.server": "./writer.browser.server.js",
+    "./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
     "./node-register": "./node-register.js",
     "./package.json": "./package.json"
   },
   "browser": {
-    "./server.js": "./server.browser.js"
+    "./writer.js": "./writer.browser.server.js"
   },
   "main": "index.js",
   "repository": {
     "type" : "git",
     "url" : "https://github.com/facebook/react.git",
-    "directory": "packages/react-transport-dom-webpack"
+    "directory": "packages/react-server-dom-webpack"
   },
   "engines": {
     "node": ">=0.10.0"
diff --git a/packages/react-transport-dom-webpack/plugin.js b/packages/react-server-dom-webpack/plugin.js
similarity index 100%
rename from packages/react-transport-dom-webpack/plugin.js
rename to packages/react-server-dom-webpack/plugin.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
similarity index 100%
rename from packages/react-transport-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
rename to packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
similarity index 100%
rename from packages/react-transport-dom-webpack/src/ReactFlightDOMClient.js
rename to packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
similarity index 100%
rename from packages/react-transport-dom-webpack/src/ReactFlightDOMServerBrowser.js
rename to packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
similarity index 100%
rename from packages/react-transport-dom-webpack/src/ReactFlightDOMServerNode.js
rename to packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
similarity index 100%
rename from packages/react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
rename to packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
similarity index 100%
rename from packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeLoader.js
rename to packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
similarity index 100%
rename from packages/react-transport-dom-webpack/src/ReactFlightWebpackNodeRegister.js
rename to packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
diff --git a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
similarity index 99%
rename from packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
rename to packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index 3ae5acbe460a..4b273acdfef6 100644
--- a/packages/react-transport-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -50,7 +50,7 @@ type Options = {
   manifestFilename?: string,
 };
 
-const PLUGIN_NAME = 'React Transport Plugin';
+const PLUGIN_NAME = 'React Server Plugin';
 
 export default class ReactFlightWebpackPlugin {
   clientReferences: $ReadOnlyArray<ClientReferencePath>;
diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
similarity index 91%
rename from packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
rename to packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 4ff3ff20341c..a481d6ebbcd6 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -28,8 +28,8 @@ let act;
 let Stream;
 let React;
 let ReactDOM;
-let ReactTransportDOMServer;
-let ReactTransportDOMClient;
+let ReactServerDOMWriter;
+let ReactServerDOMReader;
 
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
@@ -40,8 +40,8 @@ describe('ReactFlightDOM', () => {
     Stream = require('stream');
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactTransportDOMServer = require('react-transport-dom-webpack/server');
-    ReactTransportDOMClient = require('react-transport-dom-webpack');
+    ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
+    ReactServerDOMReader = require('react-server-dom-webpack');
   });
 
   function getTestStream() {
@@ -113,8 +113,8 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(<App />, writable, webpackMap);
-    const response = ReactTransportDOMClient.createFromReadableStream(readable);
+    ReactServerDOMWriter.pipeToNodeWritable(<App />, writable, webpackMap);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
     await waitForSuspense(() => {
       const model = response.readRoot();
       expect(model).toEqual({
@@ -163,12 +163,12 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(
+    ReactServerDOMWriter.pipeToNodeWritable(
       <RootModel />,
       writable,
       webpackMap,
     );
-    const response = ReactTransportDOMClient.createFromReadableStream(readable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
     const root = ReactDOM.unstable_createRoot(container);
@@ -202,12 +202,12 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(
+    ReactServerDOMWriter.pipeToNodeWritable(
       <RootModel />,
       writable,
       webpackMap,
     );
-    const response = ReactTransportDOMClient.createFromReadableStream(readable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
     const root = ReactDOM.unstable_createRoot(container);
@@ -239,12 +239,12 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(
+    ReactServerDOMWriter.pipeToNodeWritable(
       <RootModel />,
       writable,
       webpackMap,
     );
-    const response = ReactTransportDOMClient.createFromReadableStream(readable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
     const root = ReactDOM.unstable_createRoot(container);
@@ -374,8 +374,8 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(model, writable, webpackMap);
-    const response = ReactTransportDOMClient.createFromReadableStream(readable);
+    ReactServerDOMWriter.pipeToNodeWritable(model, writable, webpackMap);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
     const root = ReactDOM.unstable_createRoot(container);
@@ -473,12 +473,12 @@ describe('ReactFlightDOM', () => {
     const root = ReactDOM.unstable_createRoot(container);
 
     const stream1 = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(
+    ReactServerDOMWriter.pipeToNodeWritable(
       <App color="red" />,
       stream1.writable,
       webpackMap,
     );
-    const response1 = ReactTransportDOMClient.createFromReadableStream(
+    const response1 = ReactServerDOMReader.createFromReadableStream(
       stream1.readable,
     );
     await act(async () => {
@@ -501,12 +501,12 @@ describe('ReactFlightDOM', () => {
     inputB.value = 'goodbye';
 
     const stream2 = getTestStream();
-    ReactTransportDOMServer.pipeToNodeWritable(
+    ReactServerDOMWriter.pipeToNodeWritable(
       <App color="blue" />,
       stream2.writable,
       webpackMap,
     );
-    const response2 = ReactTransportDOMClient.createFromReadableStream(
+    const response2 = ReactServerDOMReader.createFromReadableStream(
       stream2.readable,
     );
     await act(async () => {
diff --git a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
similarity index 80%
rename from packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
rename to packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 182e9ed2bf3c..04710cbdc5cf 100644
--- a/packages/react-transport-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -16,15 +16,15 @@ global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
 let React;
-let ReactTransportDOMServer;
-let ReactTransportDOMClient;
+let ReactServerDOMWriter;
+let ReactServerDOMReader;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactTransportDOMServer = require('react-transport-dom-webpack/server.browser');
-    ReactTransportDOMClient = require('react-transport-dom-webpack');
+    ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
+    ReactServerDOMReader = require('react-server-dom-webpack');
   });
 
   async function waitForSuspense(fn) {
@@ -61,8 +61,8 @@ describe('ReactFlightDOMBrowser', () => {
       return model;
     }
 
-    const stream = ReactTransportDOMServer.renderToReadableStream(<App />);
-    const response = ReactTransportDOMClient.createFromReadableStream(stream);
+    const stream = ReactServerDOMWriter.renderToReadableStream(<App />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
     await waitForSuspense(() => {
       const model = response.readRoot();
       expect(model).toEqual({
diff --git a/packages/react-transport-dom-webpack/server.browser.js b/packages/react-server-dom-webpack/writer.browser.server.js
similarity index 100%
rename from packages/react-transport-dom-webpack/server.browser.js
rename to packages/react-server-dom-webpack/writer.browser.server.js
diff --git a/packages/react-transport-dom-webpack/server.js b/packages/react-server-dom-webpack/writer.js
similarity index 52%
rename from packages/react-transport-dom-webpack/server.js
rename to packages/react-server-dom-webpack/writer.js
index 6010f4e3d5b2..00db7f503faf 100644
--- a/packages/react-transport-dom-webpack/server.js
+++ b/packages/react-server-dom-webpack/writer.js
@@ -7,4 +7,7 @@
  * @flow
  */
 
-export * from './server.node';
+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-transport-dom-webpack/server.node.js b/packages/react-server-dom-webpack/writer.node.server.js
similarity index 100%
rename from packages/react-transport-dom-webpack/server.node.js
rename to packages/react-server-dom-webpack/writer.node.server.js
diff --git a/packages/react-transport-native-relay/index.js b/packages/react-server-native-relay/index.js
similarity index 100%
rename from packages/react-transport-native-relay/index.js
rename to packages/react-server-native-relay/index.js
diff --git a/packages/react-transport-native-relay/package.json b/packages/react-server-native-relay/package.json
similarity index 76%
rename from packages/react-transport-native-relay/package.json
rename to packages/react-server-native-relay/package.json
index 3c9bb80dbb4c..1c328bd2ba32 100644
--- a/packages/react-transport-native-relay/package.json
+++ b/packages/react-server-native-relay/package.json
@@ -1,11 +1,11 @@
 {
-  "name": "react-transport-native-relay",
+  "name": "react-server-native-relay",
   "version": "0.1.0",
   "private": true,
   "repository": {
     "type" : "git",
     "url" : "https://github.com/facebook/react.git",
-    "directory": "packages/react-transport-native-relay"
+    "directory": "packages/react-server-native-relay"
   },
   "dependencies": {
     "object-assign": "^4.1.1",
diff --git a/packages/react-transport-native-relay/server.js b/packages/react-server-native-relay/server.js
similarity index 100%
rename from packages/react-transport-native-relay/server.js
rename to packages/react-server-native-relay/server.js
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
similarity index 100%
rename from packages/react-transport-native-relay/src/ReactFlightNativeRelayClient.js
rename to packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
similarity index 100%
rename from packages/react-transport-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
rename to packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
similarity index 100%
rename from packages/react-transport-native-relay/src/ReactFlightNativeRelayProtocol.js
rename to packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServer.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
similarity index 100%
rename from packages/react-transport-native-relay/src/ReactFlightNativeRelayServer.js
rename to packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
diff --git a/packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
similarity index 100%
rename from packages/react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
rename to packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
diff --git a/packages/react-transport-native-relay/src/__mocks__/JSResourceReferenceImpl.js b/packages/react-server-native-relay/src/__mocks__/JSResourceReferenceImpl.js
similarity index 100%
rename from packages/react-transport-native-relay/src/__mocks__/JSResourceReferenceImpl.js
rename to packages/react-server-native-relay/src/__mocks__/JSResourceReferenceImpl.js
diff --git a/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js b/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
similarity index 100%
rename from packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
rename to packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
diff --git a/packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js b/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
similarity index 100%
rename from packages/react-transport-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
rename to packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayServerIntegration.js
diff --git a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js b/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
similarity index 95%
rename from packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
rename to packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
index a28a6fa35e07..0d439154b537 100644
--- a/packages/react-transport-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
+++ b/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
@@ -36,8 +36,8 @@ describe('ReactFlightNativeRelay', () => {
       uiViewClassName: 'RCTText',
     }));
 
-    ReactNativeFlightRelayServer = require('react-transport-native-relay/server');
-    ReactNativeFlightRelayClient = require('react-transport-native-relay');
+    ReactNativeFlightRelayServer = require('react-server-native-relay/server');
+    ReactNativeFlightRelayClient = require('react-server-native-relay');
     JSResourceReferenceImpl = require('JSResourceReferenceImpl');
   });
 
diff --git a/packages/react-transport-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap b/packages/react-server-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap
similarity index 100%
rename from packages/react-transport-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap
rename to packages/react-server-native-relay/src/__tests__/__snapshots__/ReactFlightNativeRelay-test.internal.js.snap
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
index c5768555f71f..07b5f345f193 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-browser.js
@@ -8,4 +8,4 @@
  */
 
 export * from '../ReactFlightServerConfigStream';
-export * from 'react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js
index ba3627cb2370..3fe901f5742f 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-relay.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-transport-dom-relay/src/ReactFlightDOMRelayServerHostConfig';
+export * from 'react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.dom.js b/packages/react-server/src/forks/ReactFlightServerConfig.dom.js
index c5768555f71f..07b5f345f193 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.dom.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom.js
@@ -8,4 +8,4 @@
  */
 
 export * from '../ReactFlightServerConfigStream';
-export * from 'react-transport-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
+export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js b/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
index 35e6334ab331..ba0f441a4dfd 100644
--- a/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.native-relay.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from 'react-transport-native-relay/src/ReactFlightNativeRelayServerHostConfig';
+export * from 'react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig';
diff --git a/packages/react-transport-dom-webpack/npm/index.js b/packages/react-transport-dom-webpack/npm/index.js
deleted file mode 100644
index 479f8a52f74c..000000000000
--- a/packages/react-transport-dom-webpack/npm/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-transport-dom-webpack.production.min.js');
-} else {
-  module.exports = require('./cjs/react-transport-dom-webpack.development.js');
-}
diff --git a/packages/react-transport-dom-webpack/npm/node-register.js b/packages/react-transport-dom-webpack/npm/node-register.js
deleted file mode 100644
index 87a431afe198..000000000000
--- a/packages/react-transport-dom-webpack/npm/node-register.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./cjs/react-transport-dom-webpack-node-register.js');
diff --git a/packages/react-transport-dom-webpack/npm/plugin.js b/packages/react-transport-dom-webpack/npm/plugin.js
deleted file mode 100644
index a6c80480c1f1..000000000000
--- a/packages/react-transport-dom-webpack/npm/plugin.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./cjs/react-transport-dom-webpack-plugin.js');
diff --git a/packages/react-transport-dom-webpack/npm/server.browser.js b/packages/react-transport-dom-webpack/npm/server.browser.js
deleted file mode 100644
index af28f2e4695f..000000000000
--- a/packages/react-transport-dom-webpack/npm/server.browser.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-transport-dom-webpack-server.browser.production.min.js');
-} else {
-  module.exports = require('./cjs/react-transport-dom-webpack-server.browser.development.js');
-}
diff --git a/packages/react-transport-dom-webpack/npm/server.js b/packages/react-transport-dom-webpack/npm/server.js
deleted file mode 100644
index 02f1553990a2..000000000000
--- a/packages/react-transport-dom-webpack/npm/server.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./server.node');
diff --git a/packages/react-transport-dom-webpack/npm/server.node.js b/packages/react-transport-dom-webpack/npm/server.node.js
deleted file mode 100644
index 2461e39a9561..000000000000
--- a/packages/react-transport-dom-webpack/npm/server.node.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-transport-dom-webpack-server.node.production.min.js');
-} else {
-  module.exports = require('./cjs/react-transport-dom-webpack-server.node.development.js');
-}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 47a004ed4e12..e6ef2e59bec9 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -270,64 +270,64 @@ const bundles = [
     externals: ['react', 'react-dom/server'],
   },
 
-  /******* React Transport DOM Server Webpack *******/
+  /******* React Server DOM Webpack Writer *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
-    entry: 'react-transport-dom-webpack/server.browser',
-    global: 'ReactTransportDOMServer',
+    entry: 'react-server-dom-webpack/writer.browser.server',
+    global: 'ReactServerDOMWriter',
     externals: ['react', 'react-dom/server'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-transport-dom-webpack/server.node',
-    global: 'ReactTransportDOMServer',
+    entry: 'react-server-dom-webpack/writer.node.server',
+    global: 'ReactServerDOMWriter',
     externals: ['react', 'react-dom/server'],
   },
 
-  /******* React Transport DOM Client Webpack *******/
+  /******* React Server DOM Webpack Reader *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
-    entry: 'react-transport-dom-webpack',
-    global: 'ReactTransportDOMClient',
+    entry: 'react-server-dom-webpack',
+    global: 'ReactServerDOMReader',
     externals: ['react'],
   },
 
-  /******* React Transport DOM Webpack Plugin *******/
+  /******* React Server DOM Webpack Plugin *******/
   {
     bundleTypes: [NODE_ES2015],
     moduleType: RENDERER_UTILS,
-    entry: 'react-transport-dom-webpack/plugin',
-    global: 'ReactFlightWebpackPlugin',
+    entry: 'react-server-dom-webpack/plugin',
+    global: 'ReactServerWebpackPlugin',
     externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
-  /******* React Transport DOM Webpack Node.js Loader *******/
+  /******* React Server DOM Webpack Node.js Loader *******/
   {
     bundleTypes: [NODE_ESM],
     moduleType: RENDERER_UTILS,
-    entry: 'react-transport-dom-webpack/node-loader',
-    global: 'ReactFlightWebpackNodeLoader',
+    entry: 'react-server-dom-webpack/node-loader',
+    global: 'ReactServerWebpackNodeLoader',
     externals: ['acorn'],
   },
 
-  /******* React Transport DOM Webpack Node.js CommonJS Loader *******/
+  /******* React Server DOM Webpack Node.js CommonJS Loader *******/
   {
     bundleTypes: [NODE_ES2015],
     moduleType: RENDERER_UTILS,
-    entry: 'react-transport-dom-webpack/node-register',
+    entry: 'react-server-dom-webpack/node-register',
     global: 'ReactFlightWebpackNodeRegister',
     externals: ['url', 'module'],
   },
 
-  /******* React Transport DOM Server Relay *******/
+  /******* React Server DOM Relay Writer *******/
   {
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
-    entry: 'react-transport-dom-relay/server',
-    global: 'ReactFlightDOMRelayServer',
+    entry: 'react-server-dom-relay/server',
+    global: 'ReactFlightDOMRelayServer', // TODO: Rename to Writer
     externals: [
       'react',
       'react-dom/server',
@@ -336,12 +336,12 @@ const bundles = [
     ],
   },
 
-  /******* React Transport DOM Client Relay *******/
+  /******* React Server DOM Relay Reader *******/
   {
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
-    entry: 'react-transport-dom-relay',
-    global: 'ReactFlightDOMRelayClient',
+    entry: 'react-server-dom-relay',
+    global: 'ReactFlightDOMRelayClient', // TODO: Rename to Reader
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
@@ -349,12 +349,12 @@ const bundles = [
     ],
   },
 
-  /******* React Transport Native Server Relay *******/
+  /******* React Server Native Relay Writer *******/
   {
     bundleTypes: [RN_FB_DEV, RN_FB_PROD],
     moduleType: RENDERER,
-    entry: 'react-transport-native-relay/server',
-    global: 'ReactFlightNativeRelayServer',
+    entry: 'react-server-native-relay/server',
+    global: 'ReactFlightNativeRelayServer', // TODO: Rename to Writer
     externals: [
       'react',
       'ReactFlightNativeRelayServerIntegration',
@@ -362,12 +362,12 @@ const bundles = [
     ],
   },
 
-  /******* React Transport Native Client Relay *******/
+  /******* React Server Native Relay Reader *******/
   {
     bundleTypes: [RN_FB_DEV, RN_FB_PROD],
     moduleType: RENDERER,
-    entry: 'react-transport-native-relay',
-    global: 'ReactFlightNativeRelayClient',
+    entry: 'react-server-native-relay',
+    global: 'ReactFlightNativeRelayClient', // TODO: Rename to Reader
     externals: [
       'react',
       'ReactFlightNativeRelayClientIntegration',
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index 1e7ae2b018db..eaf78959a678 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -82,7 +82,7 @@ function getBundleOutputPath(bundleType, filename, packageName) {
             /\.js$/,
             '.fb.js'
           )}`;
-        case 'react-transport-native-relay':
+        case 'react-server-native-relay':
           return `build/facebook-relay/flight/${filename}`;
         default:
           throw new Error('Unknown RN package.');
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 175ce42f0748..98fc13e4f120 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -13,18 +13,18 @@ module.exports = [
       'react-dom',
       'react-dom/testing',
       'react-dom/unstable-fizz.node',
-      'react-transport-dom-webpack/server.node',
-      'react-transport-dom-webpack',
+      'react-server-dom-webpack/writer.node.server',
+      'react-server-dom-webpack',
     ],
     paths: [
       'react-dom',
       'react-dom/unstable-fizz',
       'react-dom/unstable-fizz.node',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/unstable-fizz.node
-      'react-transport-dom-webpack',
-      'react-transport-dom-webpack/server',
-      'react-transport-dom-webpack/server.node',
-      'react-transport-dom-webpack/src/ReactFlightDOMServerNode.js', // react-transport-dom-webpack/server.browser
+      'react-server-dom-webpack',
+      'react-server-dom-webpack/writer',
+      'react-server-dom-webpack/writer.node.server',
+      'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/writer.node.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
       'react-interactions',
     ],
@@ -37,17 +37,17 @@ module.exports = [
       'react-dom',
       'react-dom/testing',
       'react-dom/unstable-fizz.browser',
-      'react-transport-dom-webpack/server.browser',
-      'react-transport-dom-webpack',
+      'react-server-dom-webpack/writer.browser.server',
+      'react-server-dom-webpack',
     ],
     paths: [
       'react-dom',
       'react-dom/testing',
       'react-dom/unstable-fizz.browser',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/unstable-fizz.browser
-      'react-transport-dom-webpack',
-      'react-transport-dom-webpack/server.browser',
-      'react-transport-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-transport-dom-webpack/server.browser
+      'react-server-dom-webpack',
+      'react-server-dom-webpack/writer.browser.server',
+      'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
     ],
     isFlowTyped: true,
@@ -83,21 +83,18 @@ module.exports = [
   },
   {
     shortName: 'dom-relay',
-    entryPoints: [
-      'react-transport-dom-relay',
-      'react-transport-dom-relay/server',
-    ],
-    paths: ['react-dom', 'react-transport-dom-relay'],
+    entryPoints: ['react-server-dom-relay', 'react-server-dom-relay/server'],
+    paths: ['react-dom', 'react-server-dom-relay'],
     isFlowTyped: true,
     isServerSupported: true,
   },
   {
     shortName: 'native-relay',
     entryPoints: [
-      'react-transport-native-relay',
-      'react-transport-native-relay/server',
+      'react-server-native-relay',
+      'react-server-native-relay/server',
     ],
-    paths: ['react-native-renderer', 'react-transport-native-relay'],
+    paths: ['react-native-renderer', 'react-server-native-relay'],
     isFlowTyped: true,
     isServerSupported: true,
   },

From 1b5ca99063414146048886c632256cdd3002c5a0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 8 Dec 2020 13:19:59 +0000
Subject: [PATCH 0126/1603] Fix module ID deduplication (#20406)

---
 packages/react-server/src/ReactFlightServer.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index e4f307998ba1..8a6ee64d4d8d 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -432,7 +432,8 @@ export function resolveModelToJSON(
     if (isModuleReference(value)) {
       const moduleReference: ModuleReference<any> = (value: any);
       const moduleKey: ModuleKey = getModuleKey(moduleReference);
-      const existingId = request.writtenModules.get(moduleKey);
+      const writtenModules = request.writtenModules;
+      const existingId = writtenModules.get(moduleKey);
       if (existingId !== undefined) {
         return serializeByValueID(existingId);
       }
@@ -444,6 +445,7 @@ export function resolveModelToJSON(
         request.pendingChunks++;
         const moduleId = request.nextChunkId++;
         emitModuleChunk(request, moduleId, moduleMetaData);
+        writtenModules.set(moduleKey, moduleId);
         if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
           // If we're encoding the "type" of an element, we can refer
           // to that by a lazy reference instead of directly since React

From 373b297c5534f5ff741bb011baefec0f7e0d1cb5 Mon Sep 17 00:00:00 2001
From: Sam Zhou <sam@developersam.com>
Date: Tue, 8 Dec 2020 10:40:05 -0500
Subject: [PATCH 0127/1603] fix: Fix typo in react-reconciler docs (#20284)

peristent -> persistent
---
 packages/react-reconciler/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index d1accf49b12f..a084df179abc 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -69,7 +69,7 @@ At the moment, we can't commit to documenting every API detail because the host
 
 #### Modes
 
-The reconciler has two modes: mutation mode and peristent mode. You must specify one of them.
+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.
 

From 51a7cfe210f2e2b3f7b9e06c7539bf46de5decb1 Mon Sep 17 00:00:00 2001
From: Hollow Man <hollowman@hollowman.ml>
Date: Tue, 8 Dec 2020 23:40:23 +0800
Subject: [PATCH 0128/1603] Fix typo (#20300)

Signed-off-by: Hollow Man <hollowman@hollowman.ml>
---
 packages/react-reconciler/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index a084df179abc..5fb890f38165 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -121,7 +121,7 @@ This method happens **in the render phase**. It can mutate `parentInstance` and
 
 #### `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 addded to the `instance`, but the instance itself has not yet been connected to the tree on the screen.
+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.
 

From cdae31ab8ef1738d53cba20304311ad266d09445 Mon Sep 17 00:00:00 2001
From: inokawa <48897392+inokawa@users.noreply.github.com>
Date: Wed, 9 Dec 2020 00:40:35 +0900
Subject: [PATCH 0129/1603] Fix typo (#20279)

---
 .../__tests__/ReactDOMServerPartialHydration-test.internal.js   | 2 +-
 packages/react-refresh/src/__tests__/ReactFresh-test.js         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index c8e2a0f5ea98..67d1a29f0ab0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -87,7 +87,7 @@ describe('ReactDOMServerPartialHydration', () => {
   });
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 5e4a766640ad..02295a8d98ec 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -76,7 +76,7 @@ describe('ReactFresh', () => {
   }
 
   // Note: This is based on a similar component we use in www. We can delete
-  // once the extra div wrapper is no longer neccessary.
+  // once the extra div wrapper is no longer necessary.
   function LegacyHiddenDiv({children, mode}) {
     return (
       <div hidden={mode === 'hidden'}>

From b9680aef7dfc180ab4d4a7957611ad024db7e8db Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 8 Dec 2020 22:37:24 +0000
Subject: [PATCH 0130/1603] Cache react-fetch results in the Node version
 (#20407)

---
 packages/react-fetch/src/ReactFetchNode.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index c6260d863fc5..65f0e063faee 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -100,7 +100,6 @@ function Response(nativeResponse) {
   this.url = nativeResponse.url;
 
   this._response = nativeResponse;
-  this._blob = null;
   this._json = null;
   this._text = null;
 
@@ -151,12 +150,22 @@ Response.prototype = {
     throw new Error('Not implemented.');
   },
   json() {
+    if (this._json !== null) {
+      return this._json;
+    }
     const buffer = readResult(this._result);
-    return JSON.parse(buffer.toString());
+    const json = JSON.parse(buffer.toString());
+    this._json = json;
+    return json;
   },
   text() {
+    if (this._text !== null) {
+      return this._text;
+    }
     const buffer = readResult(this._result);
-    return buffer.toString();
+    const text = buffer.toString();
+    this._text = text;
+    return text;
   },
 };
 

From 7659949d6515e7895b8e67b2777bbfd2ef8d5163 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 8 Dec 2020 19:13:20 -0600
Subject: [PATCH 0131/1603] Clear `deletions` in `detachFiber` (#20401)

This was added in a later step of the refactor but since `deletions`
array already landed, clearing it should, too.

I think it's unlikely that this causes GC problems but worth
adding anyway.
---
 packages/react-reconciler/src/ReactFiberCommitWork.new.js | 1 +
 packages/react-reconciler/src/ReactFiberCommitWork.old.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index a9c54d9c02e9..84a20638ef29 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1074,6 +1074,7 @@ function detachFiberMutation(fiber: Fiber) {
   // and one of its descendants throws while unmounting a passive effect.
   fiber.alternate = null;
   fiber.child = null;
+  fiber.deletions = null;
   fiber.dependencies = null;
   fiber.firstEffect = null;
   fiber.lastEffect = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index c134ecccddbb..94d137c99bdc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1074,6 +1074,7 @@ function detachFiberMutation(fiber: Fiber) {
   // and one of its descendants throws while unmounting a passive effect.
   fiber.alternate = null;
   fiber.child = null;
+  fiber.deletions = null;
   fiber.dependencies = null;
   fiber.firstEffect = null;
   fiber.lastEffect = null;

From 6a4b12b81c4c855934985225f9f448f1b49a8a14 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 9 Dec 2020 02:37:29 +0000
Subject: [PATCH 0132/1603] [Flight] Add rudimentary FS binding (#20409)

* [Flight] Add rudimentary FS binding

* Throw for unsupported

* Don't mess with hidden class

* Use absolute path as the key

* Warn on relative and non-normalized paths
---
 packages/react-fs/README.md              |  12 ++
 packages/react-fs/index.browser.js       |  12 ++
 packages/react-fs/index.js               |  12 ++
 packages/react-fs/index.node.js          |  12 ++
 packages/react-fs/npm/index.browser.js   |   7 ++
 packages/react-fs/npm/index.js           |   3 +
 packages/react-fs/npm/index.node.js      |   7 ++
 packages/react-fs/package.json           |  26 ++++
 packages/react-fs/src/ReactFilesystem.js | 148 +++++++++++++++++++++++
 scripts/flow/environment.js              |  10 ++
 scripts/rollup/bundles.js                |  18 +++
 11 files changed, 267 insertions(+)
 create mode 100644 packages/react-fs/README.md
 create mode 100644 packages/react-fs/index.browser.js
 create mode 100644 packages/react-fs/index.js
 create mode 100644 packages/react-fs/index.node.js
 create mode 100644 packages/react-fs/npm/index.browser.js
 create mode 100644 packages/react-fs/npm/index.js
 create mode 100644 packages/react-fs/npm/index.node.js
 create mode 100644 packages/react-fs/package.json
 create mode 100644 packages/react-fs/src/ReactFilesystem.js

diff --git a/packages/react-fs/README.md b/packages/react-fs/README.md
new file mode 100644
index 000000000000..cca1192f52c4
--- /dev/null
+++ b/packages/react-fs/README.md
@@ -0,0 +1,12 @@
+# react-fs
+
+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-fs/index.browser.js b/packages/react-fs/index.browser.js
new file mode 100644
index 000000000000..444c63ec765f
--- /dev/null
+++ b/packages/react-fs/index.browser.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+throw new Error(
+  'This entry point is not yet supported in the browser environment',
+);
diff --git a/packages/react-fs/index.js b/packages/react-fs/index.js
new file mode 100644
index 000000000000..ceb2071c4f05
--- /dev/null
+++ b/packages/react-fs/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './index.node';
diff --git a/packages/react-fs/index.node.js b/packages/react-fs/index.node.js
new file mode 100644
index 000000000000..ea6d021f8d2d
--- /dev/null
+++ b/packages/react-fs/index.node.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './src/ReactFilesystem';
diff --git a/packages/react-fs/npm/index.browser.js b/packages/react-fs/npm/index.browser.js
new file mode 100644
index 000000000000..d08a7383d699
--- /dev/null
+++ b/packages/react-fs/npm/index.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-fs.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-fs.browser.development.js');
+}
diff --git a/packages/react-fs/npm/index.js b/packages/react-fs/npm/index.js
new file mode 100644
index 000000000000..ee510df2ad68
--- /dev/null
+++ b/packages/react-fs/npm/index.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = require('./index.node');
diff --git a/packages/react-fs/npm/index.node.js b/packages/react-fs/npm/index.node.js
new file mode 100644
index 000000000000..fa1d5b986e65
--- /dev/null
+++ b/packages/react-fs/npm/index.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-fs.node.production.min.js');
+} else {
+  module.exports = require('./cjs/react-fs.node.development.js');
+}
diff --git a/packages/react-fs/package.json b/packages/react-fs/package.json
new file mode 100644
index 000000000000..d3f9586725e0
--- /dev/null
+++ b/packages/react-fs/package.json
@@ -0,0 +1,26 @@
+{
+  "private": true,
+  "name": "react-fs",
+  "description": "React bindings for the filesystem",
+  "version": "0.0.0",
+  "repository": {
+    "type" : "git",
+    "url" : "https://github.com/facebook/react.git",
+    "directory": "packages/react-fs"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "build-info.json",
+    "index.js",
+    "index.node.js",
+    "index.browser.js",
+    "cjs/"
+  ],
+  "peerDependencies": {
+    "react": "^17.0.0"
+  },
+  "browser": {
+    "./index.js": "./index.browser.js"
+  }
+}
diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js
new file mode 100644
index 000000000000..cfc74bdfd219
--- /dev/null
+++ b/packages/react-fs/src/ReactFilesystem.js
@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable, Thenable} from 'shared/ReactTypes';
+
+import {unstable_getCacheForType} from 'react';
+import * as fs from 'fs/promises';
+import {isAbsolute, normalize} from 'path';
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingResult = {|
+  status: 0,
+  value: Wakeable,
+  cache: Array<mixed>,
+|};
+
+type ResolvedResult<T> = {|
+  status: 1,
+  value: T,
+  cache: Array<mixed>,
+|};
+
+type RejectedResult = {|
+  status: 2,
+  value: mixed,
+  cache: Array<mixed>,
+|};
+
+type Result<T> = PendingResult | ResolvedResult<T> | RejectedResult;
+
+function toResult<T>(thenable: Thenable<T>): Result<T> {
+  const result: Result<T> = {
+    status: Pending,
+    value: thenable,
+    cache: [],
+  };
+  thenable.then(
+    value => {
+      if (result.status === Pending) {
+        const resolvedResult = ((result: any): ResolvedResult<T>);
+        resolvedResult.status = Resolved;
+        resolvedResult.value = value;
+      }
+    },
+    err => {
+      if (result.status === Pending) {
+        const rejectedResult = ((result: any): RejectedResult);
+        rejectedResult.status = Rejected;
+        rejectedResult.value = err;
+      }
+    },
+  );
+  return result;
+}
+
+function readResult<T>(result: Result<T>): T {
+  if (result.status === Resolved) {
+    return result.value;
+  } else {
+    throw result.value;
+  }
+}
+
+// We don't want to normalize every path ourselves in production.
+// However, relative or non-normalized paths will lead to cache misses.
+// So we encourage the developer to fix it in DEV and normalize on their end.
+function checkPathInDev(path: string) {
+  if (__DEV__) {
+    if (!isAbsolute(path)) {
+      console.error(
+        'The provided path was not absolute: "%s". ' +
+          'Convert it to an absolute path first.',
+        path,
+      );
+    } else if (path !== normalize(path)) {
+      console.error(
+        'The provided path was not normalized: "%s". ' +
+          'Convert it to a normalized path first.',
+        path,
+      );
+    }
+  }
+}
+
+function createReadFileCache(): Map<string, Result<Buffer>> {
+  return new Map();
+}
+
+export function readFile(
+  path: string,
+  options:
+    | string
+    | {
+        encoding?: string | null,
+        // Unsupported:
+        flag?: string, // Doesn't make sense except "r"
+        signal?: mixed, // We'll have our own signal
+      },
+): string | Buffer {
+  const map = unstable_getCacheForType(createReadFileCache);
+  checkPathInDev(path);
+  let entry = map.get(path);
+  if (!entry) {
+    const thenable = fs.readFile(path);
+    entry = toResult(thenable);
+    map.set(path, entry);
+  }
+  const result: Buffer = readResult(entry);
+  if (!options) {
+    return result;
+  }
+  let encoding;
+  if (typeof options === 'string') {
+    encoding = options;
+  } else {
+    const flag = options.flag;
+    if (flag != null && flag !== 'r') {
+      throw Error(
+        'The flag option is not supported, and always defaults to "r".',
+      );
+    }
+    if (options.signal) {
+      throw Error('The signal option is not supported.');
+    }
+    encoding = options.encoding;
+  }
+  if (typeof encoding !== 'string') {
+    return result;
+  }
+  const textCache = entry.cache;
+  for (let i = 0; i < textCache.length; i += 2) {
+    if (textCache[i] === encoding) {
+      return (textCache[i + 1]: any);
+    }
+  }
+  const text = result.toString((encoding: any));
+  textCache.push(encoding, text);
+  return text;
+}
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 65d7c81da974..0fac49adfb21 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -70,6 +70,16 @@ declare module 'EventListener' {
 declare function __webpack_chunk_load__(id: string): Promise<mixed>;
 declare function __webpack_require__(id: string): any;
 
+declare module 'fs/promises' {
+  declare var readFile: (
+    path: string,
+    options?:
+      | ?string
+      | {
+          encoding?: ?string,
+        },
+  ) => Promise<Buffer>;
+}
 declare module 'pg' {
   declare var Pool: (
     options: mixed,
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index e6ef2e59bec9..e97f7aa8d306 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -153,6 +153,24 @@ const bundles = [
     externals: ['react', 'http', 'https'],
   },
 
+  /******* React FS Browser (experimental, new) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react-fs/index.browser',
+    global: 'ReactFilesystem',
+    externals: [],
+  },
+
+  /******* React FS Node (experimental, new) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'react-fs/index.node',
+    global: 'ReactFilesystem',
+    externals: ['react', 'fs/promises', 'path'],
+  },
+
   /******* React PG Browser (experimental, new) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],

From a233c9e2aa121d6cb27f37115ace83fe81aaf349 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 9 Dec 2020 02:57:14 +0000
Subject: [PATCH 0133/1603] Rename internal cache helpers (#20410)

---
 packages/react-fetch/src/ReactFetchBrowser.js | 85 ++++++++++---------
 packages/react-fetch/src/ReactFetchNode.js    | 83 +++++++++---------
 packages/react-fs/src/ReactFilesystem.js      | 58 ++++++-------
 packages/react-pg/src/ReactPostgres.js        | 57 +++++++------
 4 files changed, 145 insertions(+), 138 deletions(-)

diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index a83c8f5a6236..fbf5b50b2f29 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -15,63 +15,63 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingResult = {|
+type PendingRecord = {|
   status: 0,
   value: Wakeable,
 |};
 
-type ResolvedResult = {|
+type ResolvedRecord = {|
   status: 1,
   value: mixed,
 |};
 
-type RejectedResult = {|
+type RejectedRecord = {|
   status: 2,
   value: mixed,
 |};
 
-type Result = PendingResult | ResolvedResult | RejectedResult;
+type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
 // TODO: this is a browser-only version. Add a separate Node entry point.
 const nativeFetch = window.fetch;
 
-function getResultMap(): Map<string, Result> {
-  return unstable_getCacheForType(createResultMap);
+function getRecordMap(): Map<string, Record> {
+  return unstable_getCacheForType(createRecordMap);
 }
 
-function createResultMap(): Map<string, Result> {
+function createRecordMap(): Map<string, Record> {
   return new Map();
 }
 
-function toResult(thenable): Result {
-  const result: Result = {
+function createRecordFromThenable(thenable): Record {
+  const record: Record = {
     status: Pending,
     value: thenable,
   };
   thenable.then(
     value => {
-      if (result.status === Pending) {
-        const resolvedResult = ((result: any): ResolvedResult);
-        resolvedResult.status = Resolved;
-        resolvedResult.value = value;
+      if (record.status === Pending) {
+        const resolvedRecord = ((record: any): ResolvedRecord);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = value;
       }
     },
     err => {
-      if (result.status === Pending) {
-        const rejectedResult = ((result: any): RejectedResult);
-        rejectedResult.status = Rejected;
-        rejectedResult.value = err;
+      if (record.status === Pending) {
+        const rejectedRecord = ((record: any): RejectedRecord);
+        rejectedRecord.status = Rejected;
+        rejectedRecord.value = err;
       }
     },
   );
-  return result;
+  return record;
 }
 
-function readResult(result: Result) {
-  if (result.status === Resolved) {
-    return result.value;
+function readRecordValue(record: Record) {
+  if (record.status === Resolved) {
+    return record.value;
   } else {
-    throw result.value;
+    throw record.value;
   }
 }
 
@@ -94,32 +94,37 @@ function Response(nativeResponse) {
 Response.prototype = {
   constructor: Response,
   arrayBuffer() {
-    return readResult(
+    return readRecordValue(
       this._arrayBuffer ||
-        (this._arrayBuffer = toResult(this._response.arrayBuffer())),
+        (this._arrayBuffer = createRecordFromThenable(
+          this._response.arrayBuffer(),
+        )),
     );
   },
   blob() {
-    return readResult(
-      this._blob || (this._blob = toResult(this._response.blob())),
+    return readRecordValue(
+      this._blob ||
+        (this._blob = createRecordFromThenable(this._response.blob())),
     );
   },
   json() {
-    return readResult(
-      this._json || (this._json = toResult(this._response.json())),
+    return readRecordValue(
+      this._json ||
+        (this._json = createRecordFromThenable(this._response.json())),
     );
   },
   text() {
-    return readResult(
-      this._text || (this._text = toResult(this._response.text())),
+    return readRecordValue(
+      this._text ||
+        (this._text = createRecordFromThenable(this._response.text())),
     );
   },
 };
 
-function preloadResult(url: string, options: mixed): Result {
-  const map = getResultMap();
-  let entry = map.get(url);
-  if (!entry) {
+function preloadRecord(url: string, options: mixed): Record {
+  const map = getRecordMap();
+  let record = map.get(url);
+  if (!record) {
     if (options) {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
@@ -128,20 +133,20 @@ function preloadResult(url: string, options: mixed): Result {
       }
     }
     const thenable = nativeFetch(url, options);
-    entry = toResult(thenable);
-    map.set(url, entry);
+    record = createRecordFromThenable(thenable);
+    map.set(url, record);
   }
-  return entry;
+  return record;
 }
 
 export function preload(url: string, options: mixed): void {
-  preloadResult(url, options);
+  preloadRecord(url, options);
   // Don't return anything.
 }
 
 export function fetch(url: string, options: mixed): Object {
-  const result = preloadResult(url, options);
-  const nativeResponse = (readResult(result): any);
+  const record = preloadRecord(url, options);
+  const nativeResponse = (readRecordValue(record): any);
   if (nativeResponse._reactResponse) {
     return nativeResponse._reactResponse;
   } else {
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index 65f0e063faee..727c43abec41 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -57,36 +57,36 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingResult = {|
+type PendingRecord = {|
   status: 0,
   value: Wakeable,
 |};
 
-type ResolvedResult<V> = {|
+type ResolvedRecord<V> = {|
   status: 1,
   value: V,
 |};
 
-type RejectedResult = {|
+type RejectedRecord = {|
   status: 2,
   value: mixed,
 |};
 
-type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
+type Record<V> = PendingRecord | ResolvedRecord<V> | RejectedRecord;
 
-function getResultMap(): Map<string, Result<FetchResponse>> {
-  return unstable_getCacheForType(createResultMap);
+function getRecordMap(): Map<string, Record<FetchResponse>> {
+  return unstable_getCacheForType(createRecordMap);
 }
 
-function createResultMap(): Map<string, Result<FetchResponse>> {
+function createRecordMap(): Map<string, Record<FetchResponse>> {
   return new Map();
 }
 
-function readResult<T>(result: Result<T>): T {
-  if (result.status === Resolved) {
-    return result.value;
+function readRecordValue<T>(record: Record<T>): T {
+  if (record.status === Resolved) {
+    return record.value;
   } else {
-    throw result.value;
+    throw record.value;
   }
 }
 
@@ -111,7 +111,7 @@ function Response(nativeResponse) {
       cb();
     }
   }
-  const result: PendingResult = (this._result = {
+  const bufferRecord: PendingRecord = (this._bufferRecord = {
     status: Pending,
     value: {
       then(cb) {
@@ -122,18 +122,18 @@ function Response(nativeResponse) {
   const data = [];
   nativeResponse.on('data', chunk => data.push(chunk));
   nativeResponse.on('end', () => {
-    if (result.status === Pending) {
-      const resolvedResult = ((result: any): ResolvedResult<Buffer>);
-      resolvedResult.status = Resolved;
-      resolvedResult.value = Buffer.concat(data);
+    if (bufferRecord.status === Pending) {
+      const resolvedRecord = ((bufferRecord: any): ResolvedRecord<Buffer>);
+      resolvedRecord.status = Resolved;
+      resolvedRecord.value = Buffer.concat(data);
       wake();
     }
   });
   nativeResponse.on('error', err => {
-    if (result.status === Pending) {
-      const rejectedResult = ((result: any): RejectedResult);
-      rejectedResult.status = Rejected;
-      rejectedResult.value = err;
+    if (bufferRecord.status === Pending) {
+      const rejectedRecord = ((bufferRecord: any): RejectedRecord);
+      rejectedRecord.status = Rejected;
+      rejectedRecord.value = err;
       wake();
     }
   });
@@ -142,7 +142,7 @@ function Response(nativeResponse) {
 Response.prototype = {
   constructor: Response,
   arrayBuffer() {
-    const buffer = readResult(this._result);
+    const buffer = readRecordValue(this._bufferRecord);
     return buffer;
   },
   blob() {
@@ -153,7 +153,7 @@ Response.prototype = {
     if (this._json !== null) {
       return this._json;
     }
-    const buffer = readResult(this._result);
+    const buffer = readRecordValue(this._bufferRecord);
     const json = JSON.parse(buffer.toString());
     this._json = json;
     return json;
@@ -162,17 +162,17 @@ Response.prototype = {
     if (this._text !== null) {
       return this._text;
     }
-    const buffer = readResult(this._result);
+    const buffer = readRecordValue(this._bufferRecord);
     const text = buffer.toString();
     this._text = text;
     return text;
   },
 };
 
-function preloadResult(url: string, options: mixed): Result<FetchResponse> {
-  const map = getResultMap();
-  let entry = map.get(url);
-  if (!entry) {
+function preloadRecord(url: string, options: mixed): Record<FetchResponse> {
+  const map = getRecordMap();
+  let record = map.get(url);
+  if (!record) {
     if (options) {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
@@ -193,7 +193,7 @@ function preloadResult(url: string, options: mixed): Result<FetchResponse> {
         cb();
       }
     };
-    const result: Result<FetchResponse> = (entry = {
+    const newRecord: Record<FetchResponse> = (record = {
       status: Pending,
       value: wakeable,
     });
@@ -201,33 +201,34 @@ function preloadResult(url: string, options: mixed): Result<FetchResponse> {
       url,
       options,
       response => {
-        if (result.status === Pending) {
-          const resolvedResult = ((result: any): ResolvedResult<FetchResponse>);
-          resolvedResult.status = Resolved;
-          resolvedResult.value = response;
+        if (newRecord.status === Pending) {
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<FetchResponse>);
+          resolvedRecord.status = Resolved;
+          resolvedRecord.value = response;
           wake();
         }
       },
       err => {
-        if (result.status === Pending) {
-          const rejectedResult = ((result: any): RejectedResult);
-          rejectedResult.status = Rejected;
-          rejectedResult.value = err;
+        if (newRecord.status === Pending) {
+          const rejectedRecord = ((newRecord: any): RejectedRecord);
+          rejectedRecord.status = Rejected;
+          rejectedRecord.value = err;
           wake();
         }
       },
     );
-    map.set(url, entry);
+    map.set(url, record);
   }
-  return entry;
+  return record;
 }
 
 export function preload(url: string, options: mixed): void {
-  preloadResult(url, options);
+  preloadRecord(url, options);
   // Don't return anything.
 }
 
 export function fetch(url: string, options: mixed): FetchResponse {
-  const result = preloadResult(url, options);
-  return readResult(result);
+  const record = preloadRecord(url, options);
+  const response = readRecordValue(record);
+  return response;
 }
diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js
index cfc74bdfd219..f13c6ce12476 100644
--- a/packages/react-fs/src/ReactFilesystem.js
+++ b/packages/react-fs/src/ReactFilesystem.js
@@ -17,56 +17,56 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingResult = {|
+type PendingRecord = {|
   status: 0,
   value: Wakeable,
   cache: Array<mixed>,
 |};
 
-type ResolvedResult<T> = {|
+type ResolvedRecord<T> = {|
   status: 1,
   value: T,
   cache: Array<mixed>,
 |};
 
-type RejectedResult = {|
+type RejectedRecord = {|
   status: 2,
   value: mixed,
   cache: Array<mixed>,
 |};
 
-type Result<T> = PendingResult | ResolvedResult<T> | RejectedResult;
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
-function toResult<T>(thenable: Thenable<T>): Result<T> {
-  const result: Result<T> = {
+function createRecordFromThenable<T>(thenable: Thenable<T>): Record<T> {
+  const record: Record<T> = {
     status: Pending,
     value: thenable,
     cache: [],
   };
   thenable.then(
     value => {
-      if (result.status === Pending) {
-        const resolvedResult = ((result: any): ResolvedResult<T>);
-        resolvedResult.status = Resolved;
-        resolvedResult.value = value;
+      if (record.status === Pending) {
+        const resolvedRecord = ((record: any): ResolvedRecord<T>);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = value;
       }
     },
     err => {
-      if (result.status === Pending) {
-        const rejectedResult = ((result: any): RejectedResult);
-        rejectedResult.status = Rejected;
-        rejectedResult.value = err;
+      if (record.status === Pending) {
+        const rejectedRecord = ((record: any): RejectedRecord);
+        rejectedRecord.status = Rejected;
+        rejectedRecord.value = err;
       }
     },
   );
-  return result;
+  return record;
 }
 
-function readResult<T>(result: Result<T>): T {
-  if (result.status === Resolved) {
-    return result.value;
+function readRecordValue<T>(record: Record<T>): T {
+  if (record.status === Resolved) {
+    return record.value;
   } else {
-    throw result.value;
+    throw record.value;
   }
 }
 
@@ -91,7 +91,7 @@ function checkPathInDev(path: string) {
   }
 }
 
-function createReadFileCache(): Map<string, Result<Buffer>> {
+function createReadFileCache(): Map<string, Record<Buffer>> {
   return new Map();
 }
 
@@ -108,15 +108,15 @@ export function readFile(
 ): string | Buffer {
   const map = unstable_getCacheForType(createReadFileCache);
   checkPathInDev(path);
-  let entry = map.get(path);
-  if (!entry) {
+  let record = map.get(path);
+  if (!record) {
     const thenable = fs.readFile(path);
-    entry = toResult(thenable);
-    map.set(path, entry);
+    record = createRecordFromThenable(thenable);
+    map.set(path, record);
   }
-  const result: Buffer = readResult(entry);
+  const buffer: Buffer = readRecordValue(record);
   if (!options) {
-    return result;
+    return buffer;
   }
   let encoding;
   if (typeof options === 'string') {
@@ -134,15 +134,15 @@ export function readFile(
     encoding = options.encoding;
   }
   if (typeof encoding !== 'string') {
-    return result;
+    return buffer;
   }
-  const textCache = entry.cache;
+  const textCache = record.cache;
   for (let i = 0; i < textCache.length; i += 2) {
     if (textCache[i] === encoding) {
       return (textCache[i + 1]: any);
     }
   }
-  const text = result.toString((encoding: any));
+  const text = buffer.toString((encoding: any));
   textCache.push(encoding, text);
   return text;
 }
diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
index b3eea21ff082..ec49f8c04323 100644
--- a/packages/react-pg/src/ReactPostgres.js
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -18,68 +18,68 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingResult = {|
+type PendingRecord = {|
   status: 0,
   value: Wakeable,
 |};
 
-type ResolvedResult = {|
+type ResolvedRecord = {|
   status: 1,
   value: mixed,
 |};
 
-type RejectedResult = {|
+type RejectedRecord = {|
   status: 2,
   value: mixed,
 |};
 
-type Result = PendingResult | ResolvedResult | RejectedResult;
+type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
-function toResult(thenable): Result {
-  const result: Result = {
+function createRecordFromThenable(thenable): Record {
+  const record: Record = {
     status: Pending,
     value: thenable,
   };
   thenable.then(
     value => {
-      if (result.status === Pending) {
-        const resolvedResult = ((result: any): ResolvedResult);
-        resolvedResult.status = Resolved;
-        resolvedResult.value = value;
+      if (record.status === Pending) {
+        const resolvedRecord = ((record: any): ResolvedRecord);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = value;
       }
     },
     err => {
-      if (result.status === Pending) {
-        const rejectedResult = ((result: any): RejectedResult);
-        rejectedResult.status = Rejected;
-        rejectedResult.value = err;
+      if (record.status === Pending) {
+        const rejectedRecord = ((record: any): RejectedRecord);
+        rejectedRecord.status = Rejected;
+        rejectedRecord.value = err;
       }
     },
   );
-  return result;
+  return record;
 }
 
-function readResult(result: Result) {
-  if (result.status === Resolved) {
-    return result.value;
+function readRecordValue(record: Record) {
+  if (record.status === Resolved) {
+    return record.value;
   } else {
-    throw result.value;
+    throw record.value;
   }
 }
 
 export function Pool(options: mixed) {
   this.pool = new PostgresPool(options);
   // Unique function per instance because it's used for cache identity.
-  this.createResultMap = function() {
+  this.createRecordMap = function() {
     return new Map();
   };
 }
 
-type NestedMap = Map<any, Result | NestedMap>;
+type NestedMap = Map<any, Record | NestedMap>;
 
 Pool.prototype.query = function(query: string, values?: Array<mixed>) {
   const pool = this.pool;
-  const outerMap = unstable_getCacheForType(this.createResultMap);
+  const outerMap = unstable_getCacheForType(this.createRecordMap);
 
   let innerMap: NestedMap = outerMap;
   let key = query;
@@ -107,12 +107,12 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
     }
   }
 
-  let entry = innerMap.get(key);
-  if (!entry) {
+  let record = innerMap.get(key);
+  if (!record) {
     const thenable = pool.query(query, values);
-    entry = toResult(thenable);
-    innerMap.set(key, entry);
-  } else if (entry instanceof Map) {
+    record = createRecordFromThenable(thenable);
+    innerMap.set(key, record);
+  } else if (record instanceof Map) {
     invariant(
       false,
       'This query has received fewer parameters than the last time ' +
@@ -120,5 +120,6 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
         'parameters that the query needs.',
     );
   }
-  return readResult(entry);
+  const result = readRecordValue(record);
+  return result;
 };

From 1a242233758c32c771daaf3a09affa84b3cb5b51 Mon Sep 17 00:00:00 2001
From: togami2864 <62130798+togami2864@users.noreply.github.com>
Date: Wed, 9 Dec 2020 23:26:12 +0900
Subject: [PATCH 0134/1603] fixed typo (#20351)

---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 52631ef72663..f1c2fb4cb2aa 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -3260,7 +3260,7 @@ export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
             '// for react-test-renderer:\n' +
             // Break up imports to avoid accidentally parsing them as dependencies.
             'import TestRenderer fr' +
-            "om react-test-renderer';\n" +
+            "om 'react-test-renderer';\n" +
             'const {act} = TestRenderer;\n' +
             '// ...\n' +
             'act(() => ...);',
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 6e97ab4a3351..36874fb5797b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -3260,7 +3260,7 @@ export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
             '// for react-test-renderer:\n' +
             // Break up imports to avoid accidentally parsing them as dependencies.
             'import TestRenderer fr' +
-            "om react-test-renderer';\n" +
+            "om 'react-test-renderer';\n" +
             'const {act} = TestRenderer;\n' +
             '// ...\n' +
             'act(() => ...);',

From 56a632adb657fe5b704125caabf29f0cc03b0b12 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 9 Dec 2020 14:18:26 -0500
Subject: [PATCH 0135/1603] Double Invoke Effects in __DEV__ (in old reconciler
 fork) (#20415)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We originally added a new DEV behavior of double-invoking effects during mount to our new reconciler fork in PRs #19523 and #19935 and later refined it to only affect modern roots in PR #20028. This PR adds that behavior to the old reconciler fork with a small twist– the behavior applies to StrictMode subtrees, regardless of the root type.

This commit also adds a few additional tests that weren't in the original commits.
---
 .../src/ReactFiberClassComponent.old.js       |  45 +-
 .../src/ReactFiberCommitWork.old.js           | 115 +++
 .../src/ReactFiberHooks.old.js                | 103 ++-
 .../src/ReactFiberWorkLoop.old.js             | 101 ++-
 .../ReactDoubleInvokeEvents-test.internal.js  | 771 ++++++++++++++++++
 .../__tests__/ReactDoubleInvokeEvents-test.js |   4 +-
 .../__tests__/ReactProfiler-test.internal.js  |  10 +-
 7 files changed, 1099 insertions(+), 50 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index f055bac71ca9..6ea7435f3757 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -12,13 +12,14 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 
 import * as React from 'react';
-import {Update, Snapshot} from './ReactFiberFlags';
+import {Update, Snapshot, MountLayoutDev} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -29,7 +30,7 @@ import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
-import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
+import {DebugTracingMode, NoMode, StrictMode} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -890,7 +891,15 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    workInProgress.flags |= Update;
+    if (
+      __DEV__ &&
+      enableDoubleInvokingEffects &&
+      (workInProgress.mode & StrictMode) !== NoMode
+    ) {
+      workInProgress.flags |= MountLayoutDev | Update;
+    } else {
+      workInProgress.flags |= Update;
+    }
   }
 }
 
@@ -960,7 +969,15 @@ function resumeMountClassInstance(
     // 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;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & StrictMode) !== NoMode
+      ) {
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
     return false;
   }
@@ -1003,13 +1020,29 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.flags |= Update;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & StrictMode) !== NoMode
+      ) {
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
   } 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;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & StrictMode) !== NoMode
+      ) {
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
 
     // If shouldComponentUpdate returned false, we should still update the
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 94d137c99bdc..265d2adbec69 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -35,6 +35,7 @@ import {
   enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -1798,6 +1799,116 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
+function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListMount,
+          null,
+          HookLayout | HookHasEffect,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+      case ClassComponent: {
+        const instance = fiber.stateNode;
+        invokeGuardedCallback(null, instance.componentDidMount, instance);
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokePassiveEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListMount,
+          null,
+          HookPassive | HookHasEffect,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListUnmount,
+          null,
+          HookLayout | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+        if (hasCaughtError()) {
+          const unmountError = clearCaughtError();
+          captureCommitPhaseError(fiber, unmountError);
+        }
+        break;
+      }
+      case ClassComponent: {
+        const instance = fiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          safelyCallComponentWillUnmount(fiber, instance);
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListUnmount,
+          null,
+          HookPassive | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+        if (hasCaughtError()) {
+          const unmountError = clearCaughtError();
+          captureCommitPhaseError(fiber, unmountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
 export {
   commitBeforeMutationLifeCycles,
   commitResetTextContent,
@@ -1807,4 +1918,8 @@ export {
   commitLifeCycles,
   commitAttachRef,
   commitDetachRef,
+  invokeLayoutEffectMountInDEV,
+  invokeLayoutEffectUnmountInDEV,
+  invokePassiveEffectMountInDEV,
+  invokePassiveEffectUnmountInDEV,
 };
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 8206eb00f67e..529ed75814d3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -28,9 +28,15 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  BlockingMode,
+  DebugTracingMode,
+  StrictMode,
+} from './ReactTypeOfMode';
 import {
   NoLane,
   NoLanes,
@@ -49,6 +55,8 @@ import {readContext} from './ReactFiberNewContext.old';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
+  MountLayoutDev as MountLayoutDevEffect,
+  MountPassiveDev as MountPassiveDevEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -467,7 +475,20 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
-  workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (workInProgress.mode & StrictMode) !== NoMode
+  ) {
+    workInProgress.flags &= ~(
+      MountLayoutDevEffect |
+      MountPassiveDevEffect |
+      PassiveEffect |
+      UpdateEffect
+    );
+  } else {
+    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
+  }
   current.lanes = removeLanes(current.lanes, lanes);
 }
 
@@ -1303,12 +1324,26 @@ function mountEffect(
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-  return mountEffectImpl(
-    UpdateEffect | PassiveEffect,
-    HookPassive,
-    create,
-    deps,
-  );
+
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & StrictMode) !== NoMode
+  ) {
+    return mountEffectImpl(
+      UpdateEffect | PassiveEffect | MountPassiveDevEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  } else {
+    return mountEffectImpl(
+      UpdateEffect | PassiveEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  }
 }
 
 function updateEffect(
@@ -1333,7 +1368,20 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & StrictMode) !== NoMode
+  ) {
+    return mountEffectImpl(
+      UpdateEffect | MountLayoutDevEffect,
+      HookLayout,
+      create,
+      deps,
+    );
+  } else {
+    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+  }
 }
 
 function updateLayoutEffect(
@@ -1392,12 +1440,25 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  return mountEffectImpl(
-    UpdateEffect,
-    HookLayout,
-    imperativeHandleEffect.bind(null, create, ref),
-    effectDeps,
-  );
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & StrictMode) !== NoMode
+  ) {
+    return mountEffectImpl(
+      UpdateEffect | MountLayoutDevEffect,
+      HookLayout,
+      imperativeHandleEffect.bind(null, create, ref),
+      effectDeps,
+    );
+  } else {
+    return mountEffectImpl(
+      UpdateEffect,
+      HookLayout,
+      imperativeHandleEffect.bind(null, create, ref),
+      effectDeps,
+    );
+  }
 }
 
 function updateImperativeHandle<T>(
@@ -1678,7 +1739,17 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (currentlyRenderingFiber.mode & StrictMode) !== NoMode
+      ) {
+        currentlyRenderingFiber.flags |=
+          UpdateEffect | PassiveEffect | MountPassiveDevEffect;
+      } else {
+        currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
+      }
+
       pushEffect(
         HookHasEffect | HookPassive,
         () => {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 36874fb5797b..9205d23c143b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -14,6 +14,7 @@ import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Effect as HookEffect} from './ReactFiberHooks.old';
+import type {Flags} from './ReactFiberFlags';
 import type {StackCursor} from './ReactFiberStack.old';
 
 import {
@@ -31,6 +32,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableScopeAPI,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -131,6 +133,8 @@ import {
   HostEffectMask,
   Hydrating,
   HydratingAndUpdate,
+  MountPassiveDev,
+  MountLayoutDev,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -191,6 +195,10 @@ import {
   commitPassiveEffectDurations,
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
+  invokeLayoutEffectMountInDEV,
+  invokePassiveEffectMountInDEV,
+  invokeLayoutEffectUnmountInDEV,
+  invokePassiveEffectUnmountInDEV,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactUpdateQueue.old';
 import {resetContextDependencies} from './ReactFiberNewContext.old';
@@ -2113,6 +2121,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     pendingPassiveEffectsLanes = lanes;
     pendingPassiveEffectsRenderPriority = renderPriorityLevel;
   } else {
+    if (__DEV__ && enableDoubleInvokingEffects) {
+      commitDoubleInvokeEffectsInDEV(root, false);
+    }
+
     // We are done with the effect chain at this point so let's clear the
     // nextEffect pointers to assist with GC. If we have passive effects, we'll
     // clear this in flushPassiveEffects.
@@ -2660,6 +2672,29 @@ function flushPassiveEffectsImpl() {
     }
   }
 
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    const profilerEffects = pendingPassiveProfilerEffects;
+    pendingPassiveProfilerEffects = [];
+    for (let i = 0; i < profilerEffects.length; i++) {
+      const fiber = ((profilerEffects[i]: any): Fiber);
+      commitPassiveEffectDurations(root, fiber);
+    }
+  }
+
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      logPassiveEffectsStopped();
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markPassiveEffectsStopped();
+  }
+
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    commitDoubleInvokeEffectsInDEV(root, true);
+  }
+
   // Note: This currently assumes there are no passive effects on the root fiber
   // because the root is not part of its own effect list.
   // This could change in the future.
@@ -2674,13 +2709,8 @@ function flushPassiveEffectsImpl() {
     effect = nextNextEffect;
   }
 
-  if (enableProfilerTimer && enableProfilerCommitHooks) {
-    const profilerEffects = pendingPassiveProfilerEffects;
-    pendingPassiveProfilerEffects = [];
-    for (let i = 0; i < profilerEffects.length; i++) {
-      const fiber = ((profilerEffects[i]: any): Fiber);
-      commitPassiveEffectDurations(root, fiber);
-    }
+  if (__DEV__) {
+    isFlushingPassiveEffects = false;
   }
 
   if (enableSchedulerTracing) {
@@ -2688,20 +2718,6 @@ function flushPassiveEffectsImpl() {
     finishPendingInteractions(root, lanes);
   }
 
-  if (__DEV__) {
-    isFlushingPassiveEffects = false;
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      logPassiveEffectsStopped();
-    }
-  }
-
-  if (enableSchedulingProfiler) {
-    markPassiveEffectsStopped();
-  }
-
   executionContext = prevExecutionContext;
 
   flushSyncCallbackQueue();
@@ -2985,6 +3001,49 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
   }
 }
 
+function commitDoubleInvokeEffectsInDEV(
+  root: FiberRoot,
+  hasPassiveEffects: boolean,
+) {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    invokeEffectsInDev(root, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(
+        root,
+        MountPassiveDev,
+        invokePassiveEffectUnmountInDEV,
+      );
+    }
+
+    invokeEffectsInDev(root, MountLayoutDev, invokeLayoutEffectMountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(root, MountPassiveDev, invokePassiveEffectMountInDEV);
+    }
+  }
+}
+
+function invokeEffectsInDev(
+  root: FiberRoot,
+  fiberFlags: Flags,
+  invokeEffectFn: (fiber: Fiber) => void,
+): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // Note: This currently assumes there are no passive effects on the root fiber
+    // because the root is not part of its own effect list.
+    // This could change in the future.
+    let currentEffect = root.current.firstEffect;
+    while (currentEffect !== null) {
+      const flags = currentEffect.flags;
+      if ((flags & fiberFlags) !== NoFlags) {
+        setCurrentDebugFiberInDEV(currentEffect);
+        invokeEffectFn(currentEffect);
+        resetCurrentDebugFiberInDEV();
+      }
+      currentEffect = currentEffect.nextEffect;
+    }
+  }
+}
+
 let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
 function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
new file mode 100644
index 000000000000..802d08a94670
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
@@ -0,0 +1,771 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactNoop;
+let Scheduler;
+
+function shouldDoubleInvokingEffects() {
+  // For now, this feature only exists in the old fork (while the new fork is being bisected).
+  // Eventually we'll land it in both forks.
+  return __DEV__ && !__VARIANT__;
+}
+
+describe('ReactDoubleInvokeEvents', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    ReactFeatureFlags.enableDoubleInvokingEffects = shouldDoubleInvokingEffects();
+  });
+
+  it('should not double invoke effects outside of StrictMode', () => {
+    function App({text}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect mount');
+        return () => Scheduler.unstable_yieldValue('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect mount');
+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+      });
+
+      return text;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect mount',
+      'useEffect mount',
+    ]);
+  });
+
+  it('should double invoke effects only within StrictMode subtrees', () => {
+    function ComponentWithEffects({label}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue(`useEffect mount "${label}"`);
+        return () =>
+          Scheduler.unstable_yieldValue(`useEffect unmount "${label}"`);
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
+        return () =>
+          Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
+      });
+
+      return label;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(
+        <>
+          <ComponentWithEffects label={'loose'} />
+          <React.StrictMode>
+            <ComponentWithEffects label={'strict'} />
+          </React.StrictMode>
+        </>,
+      );
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount "loose"',
+        'useLayoutEffect mount "strict"',
+        'useEffect mount "loose"',
+        'useEffect mount "strict"',
+
+        'useLayoutEffect unmount "strict"',
+        'useEffect unmount "strict"',
+        'useLayoutEffect mount "strict"',
+        'useEffect mount "strict"',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount "loose"',
+        'useLayoutEffect mount "strict"',
+        'useEffect mount "loose"',
+        'useEffect mount "strict"',
+      ]);
+    }
+  });
+
+  it('should flush double-invoked effects within the same frame as layout effects if there are no passive effects', () => {
+    function ComponentWithEffects({label}) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
+        return () =>
+          Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
+      });
+
+      return label;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(
+        <React.StrictMode>
+          <ComponentWithEffects label={'one'} />
+        </React.StrictMode>,
+      );
+
+      if (shouldDoubleInvokingEffects()) {
+        expect(Scheduler).toFlushUntilNextPaint([
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+        ]);
+      } else {
+        expect(Scheduler).toFlushUntilNextPaint([
+          'useLayoutEffect mount "one"',
+        ]);
+      }
+    });
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(
+        <React.StrictMode>
+          <ComponentWithEffects label={'one'} />
+          <ComponentWithEffects label={'two'} />
+        </React.StrictMode>,
+      );
+
+      if (shouldDoubleInvokingEffects()) {
+        expect(Scheduler).toFlushUntilNextPaint([
+          // 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"',
+        ]);
+      } else {
+        expect(Scheduler).toFlushUntilNextPaint([
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          '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', () => {
+    function ComponentWithEffects({label}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue(`useEffect mount "${label}"`);
+        return () =>
+          Scheduler.unstable_yieldValue(`useEffect unmount "${label}"`);
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
+        return () =>
+          Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
+      });
+
+      return label;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(
+        <React.StrictMode>
+          <ComponentWithEffects label={'one'} />
+        </React.StrictMode>,
+      );
+
+      if (shouldDoubleInvokingEffects()) {
+        expect(Scheduler).toFlushAndYieldThrough([
+          'useLayoutEffect mount "one"',
+        ]);
+        expect(Scheduler).toFlushAndYield([
+          'useEffect mount "one"',
+          'useLayoutEffect unmount "one"',
+          'useEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useEffect mount "one"',
+        ]);
+      } else {
+        expect(Scheduler).toFlushAndYieldThrough([
+          'useLayoutEffect mount "one"',
+        ]);
+        expect(Scheduler).toFlushAndYield(['useEffect mount "one"']);
+      }
+    });
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(
+        <React.StrictMode>
+          <ComponentWithEffects label={'one'} />
+          <ComponentWithEffects label={'two'} />
+        </React.StrictMode>,
+      );
+
+      if (shouldDoubleInvokingEffects()) {
+        expect(Scheduler).toFlushAndYieldThrough([
+          // Cleanup and re-run "one" (and "two") since there is no dependencies array.
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect mount "two"',
+        ]);
+        expect(Scheduler).toFlushAndYield([
+          '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"',
+        ]);
+      } else {
+        expect(Scheduler).toFlushAndYieldThrough([
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect mount "two"',
+        ]);
+        expect(Scheduler).toFlushAndYield([
+          'useEffect unmount "one"',
+          'useEffect mount "one"',
+          'useEffect mount "two"',
+        ]);
+      }
+    });
+  });
+
+  it('double invoking for effects for modern roots', () => {
+    function App({text}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect mount');
+        return () => Scheduler.unstable_yieldValue('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect mount');
+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+      });
+
+      return text;
+    }
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'update'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect unmount',
+      'useLayoutEffect mount',
+      'useEffect unmount',
+      'useEffect mount',
+    ]);
+
+    ReactNoop.act(() => {
+      ReactNoop.render(null);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect unmount',
+      'useEffect unmount',
+    ]);
+  });
+
+  it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
+    function App({text}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect One mount');
+        return () => Scheduler.unstable_yieldValue('useEffect One unmount');
+      });
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect Two mount');
+        return () => Scheduler.unstable_yieldValue('useEffect Two unmount');
+      });
+
+      return text;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'useEffect One mount',
+        'useEffect Two mount',
+        'useEffect One unmount',
+        'useEffect Two unmount',
+        'useEffect One mount',
+        'useEffect Two mount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'useEffect One mount',
+        'useEffect Two mount',
+      ]);
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'update'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useEffect One unmount',
+      'useEffect Two unmount',
+      'useEffect One mount',
+      'useEffect Two mount',
+    ]);
+
+    ReactNoop.act(() => {
+      ReactNoop.render(null);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useEffect One unmount',
+      'useEffect Two unmount',
+    ]);
+  });
+
+  it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
+    function App({text}) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect One mount');
+        return () =>
+          Scheduler.unstable_yieldValue('useLayoutEffect One unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect Two mount');
+        return () =>
+          Scheduler.unstable_yieldValue('useLayoutEffect Two unmount');
+      });
+
+      return text;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'update'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect One unmount',
+      'useLayoutEffect Two unmount',
+      'useLayoutEffect One mount',
+      'useLayoutEffect Two mount',
+    ]);
+
+    ReactNoop.act(() => {
+      ReactNoop.render(null);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect One unmount',
+      'useLayoutEffect Two unmount',
+    ]);
+  });
+
+  it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {
+    function App({text}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect mount');
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect mount');
+      });
+
+      return text;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'update'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect mount',
+      'useEffect mount',
+    ]);
+
+    ReactNoop.act(() => {
+      ReactNoop.render(null);
+    });
+
+    expect(Scheduler).toHaveYielded([]);
+  });
+
+  it('passes the right context to class component lifecycles', () => {
+    class App extends React.PureComponent {
+      test() {}
+
+      componentDidMount() {
+        this.test();
+        Scheduler.unstable_yieldValue('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        this.test();
+        Scheduler.unstable_yieldValue('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        this.test();
+        Scheduler.unstable_yieldValue('componentWillUnmount');
+      }
+
+      render() {
+        return null;
+      }
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded(['componentDidMount']);
+    }
+  });
+
+  it('double invoking works for class components', () => {
+    class App extends React.PureComponent {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded(['componentDidMount']);
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'update'} />);
+    });
+
+    expect(Scheduler).toHaveYielded(['componentDidUpdate']);
+
+    ReactNoop.act(() => {
+      ReactNoop.render(null);
+    });
+
+    expect(Scheduler).toHaveYielded(['componentWillUnmount']);
+  });
+
+  it('double flushing passive effects only results in one double invoke', () => {
+    function App({text}) {
+      const [state, setState] = React.useState(0);
+      React.useEffect(() => {
+        if (state !== 1) {
+          setState(1);
+        }
+        Scheduler.unstable_yieldValue('useEffect mount');
+        return () => Scheduler.unstable_yieldValue('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect mount');
+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+      });
+
+      Scheduler.unstable_yieldValue(text);
+      return text;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'mount',
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'mount',
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+    }
+  });
+
+  it('newly mounted components after initial mount get double invoked', () => {
+    let _setShowChild;
+    function Child() {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('Child useEffect mount');
+        return () => Scheduler.unstable_yieldValue('Child useEffect unmount');
+      });
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Child useLayoutEffect mount');
+        return () =>
+          Scheduler.unstable_yieldValue('Child useLayoutEffect unmount');
+      });
+
+      return null;
+    }
+
+    function App() {
+      const [showChild, setShowChild] = React.useState(false);
+      _setShowChild = setShowChild;
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('App useEffect mount');
+        return () => Scheduler.unstable_yieldValue('App useEffect unmount');
+      });
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('App useLayoutEffect mount');
+        return () =>
+          Scheduler.unstable_yieldValue('App useLayoutEffect unmount');
+      });
+
+      return showChild && <Child />;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+        'App useLayoutEffect unmount',
+        'App useEffect unmount',
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+      ]);
+    }
+
+    ReactNoop.act(() => {
+      _setShowChild(true);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        '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(Scheduler).toHaveYielded([
+        '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', () => {
+    class ClassChild extends React.PureComponent {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('componentDidMount');
+      }
+
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    function FunctionChild({text}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect mount');
+        return () => Scheduler.unstable_yieldValue('useEffect unmount');
+      });
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect mount');
+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+      });
+      return text;
+    }
+
+    function App({text}) {
+      return (
+        <>
+          <ClassChild text={text} />
+          <FunctionChild text={text} />
+        </>
+      );
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    if (shouldDoubleInvokingEffects()) {
+      expect(Scheduler).toHaveYielded([
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'componentWillUnmount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<App text={'mount'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect unmount',
+      'useLayoutEffect mount',
+      'useEffect unmount',
+      'useEffect mount',
+    ]);
+
+    ReactNoop.act(() => {
+      ReactNoop.render(null);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'componentWillUnmount',
+      'useLayoutEffect unmount',
+      'useEffect unmount',
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
index 5b6abbc4f659..6a1f00b7dd0b 100644
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
@@ -26,9 +26,7 @@ describe('ReactDoubleInvokeEvents', () => {
   function supportsDoubleInvokeEffects() {
     return gate(
       flags =>
-        flags.build === 'development' &&
-        flags.enableDoubleInvokingEffects &&
-        flags.dfsEffectsRefactor,
+        flags.build === 'development' && flags.enableDoubleInvokingEffects,
     );
   }
 
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index eb0c69537df4..972dacda7a11 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -4874,10 +4874,8 @@ describe('Profiler', () => {
       });
 
       if (__DEV__) {
-        // @gate dfsEffectsRefactor
-        // @gate enableDoubleInvokingEffects
         it('double invoking does not disconnect wrapped async work', () => {
-          ReactFeatureFlags.enableDoubleInvokingEffects = true;
+          ReactFeatureFlags.enableDoubleInvokingEffects = !__VARIANT__;
 
           const callback = jest.fn(() => {
             const wrappedInteractions = SchedulerTracing.unstable_getCurrent();
@@ -4915,7 +4913,11 @@ describe('Profiler', () => {
 
           jest.runAllTimers();
 
-          expect(callback).toHaveBeenCalledTimes(4); // 2x per effect
+          if (ReactFeatureFlags.enableDoubleInvokingEffects) {
+            expect(callback).toHaveBeenCalledTimes(4); // 2x per effect
+          } else {
+            expect(callback).toHaveBeenCalledTimes(2);
+          }
 
           expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
         });

From b51a686a93b6670fc80ae21d1a649194b3b723b2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 9 Dec 2020 14:46:18 -0500
Subject: [PATCH 0136/1603] Turn on double effects for www test renderer
 (#20416)

---
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7002ed80ef6b..546784ff88ed 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -51,7 +51,7 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = false;
+export const enableDoubleInvokingEffects = true;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;

From 03126dd087b285789447ab814ee7f3385e1c179d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 9 Dec 2020 21:46:50 +0000
Subject: [PATCH 0137/1603] [Flight] Add read-only fs methods (#20412)

* Don't allocate the inner cache unnecessarily

We only need it when we're asking for text. I anticipate I'll want to avoid allocating it in other methods too when it's not strictly necessary.

* Add fs.access

* Add fs.lstat

* Add fs.stat

* Add fs.readdir

* Add fs.readlink

* Add fs.realpath

* Rename functions to disambiguate two caches
---
 packages/react-fs/src/ReactFilesystem.js | 253 ++++++++++++++++++++++-
 scripts/flow/environment.js              |  34 +++
 scripts/rollup/modules.js                |   1 +
 3 files changed, 278 insertions(+), 10 deletions(-)

diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js
index f13c6ce12476..e505005e21db 100644
--- a/packages/react-fs/src/ReactFilesystem.js
+++ b/packages/react-fs/src/ReactFilesystem.js
@@ -20,19 +20,19 @@ const Rejected = 2;
 type PendingRecord = {|
   status: 0,
   value: Wakeable,
-  cache: Array<mixed>,
+  cache: null,
 |};
 
 type ResolvedRecord<T> = {|
   status: 1,
   value: T,
-  cache: Array<mixed>,
+  cache: null | Array<mixed>,
 |};
 
 type RejectedRecord = {|
   status: 2,
   value: mixed,
-  cache: Array<mixed>,
+  cache: null,
 |};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
@@ -41,7 +41,7 @@ function createRecordFromThenable<T>(thenable: Thenable<T>): Record<T> {
   const record: Record<T> = {
     status: Pending,
     value: thenable,
-    cache: [],
+    cache: null,
   };
   thenable.then(
     value => {
@@ -62,9 +62,10 @@ function createRecordFromThenable<T>(thenable: Thenable<T>): Record<T> {
   return record;
 }
 
-function readRecordValue<T>(record: Record<T>): T {
+function readRecord<T>(record: Record<T>): ResolvedRecord<T> {
   if (record.status === Resolved) {
-    return record.value;
+    // This is just a type refinement.
+    return record;
   } else {
     throw record.value;
   }
@@ -91,7 +92,122 @@ function checkPathInDev(path: string) {
   }
 }
 
-function createReadFileCache(): Map<string, Record<Buffer>> {
+function createAccessMap(): Map<string, Array<number | Record<void>>> {
+  return new Map();
+}
+
+export function access(path: string, mode?: number): void {
+  checkPathInDev(path);
+  if (mode == null) {
+    mode = 0; // fs.constants.F_OK
+  }
+  const map = unstable_getCacheForType(createAccessMap);
+  let accessCache = map.get(path);
+  if (!accessCache) {
+    accessCache = [];
+    map.set(path, accessCache);
+  }
+  let record;
+  for (let i = 0; i < accessCache.length; i += 2) {
+    const cachedMode: number = (accessCache[i]: any);
+    if (mode === cachedMode) {
+      const cachedRecord: Record<void> = (accessCache[i + 1]: any);
+      record = cachedRecord;
+      break;
+    }
+  }
+  if (!record) {
+    const thenable = fs.access(path, mode);
+    record = createRecordFromThenable(thenable);
+    accessCache.push(mode, record);
+  }
+  readRecord(record); // No return value.
+}
+
+function createLstatMap(): Map<string, Array<boolean | Record<mixed>>> {
+  return new Map();
+}
+
+export function lstat(path: string, options?: {bigint?: boolean}): mixed {
+  checkPathInDev(path);
+  let bigint = false;
+  if (options && options.bigint) {
+    bigint = true;
+  }
+  const map = unstable_getCacheForType(createLstatMap);
+  let lstatCache = map.get(path);
+  if (!lstatCache) {
+    lstatCache = [];
+    map.set(path, lstatCache);
+  }
+  let record;
+  for (let i = 0; i < lstatCache.length; i += 2) {
+    const cachedBigint: boolean = (lstatCache[i]: any);
+    if (bigint === cachedBigint) {
+      const cachedRecord: Record<void> = (lstatCache[i + 1]: any);
+      record = cachedRecord;
+      break;
+    }
+  }
+  if (!record) {
+    const thenable = fs.lstat(path, {bigint});
+    record = createRecordFromThenable(thenable);
+    lstatCache.push(bigint, record);
+  }
+  const stats = readRecord(record).value;
+  return stats;
+}
+
+function createReaddirMap(): Map<
+  string,
+  Array<string | boolean | Record<mixed>>,
+> {
+  return new Map();
+}
+
+export function readdir(
+  path: string,
+  options?: string | {encoding?: string, withFileTypes?: boolean},
+): mixed {
+  checkPathInDev(path);
+  let encoding = 'utf8';
+  let withFileTypes = false;
+  if (typeof options === 'string') {
+    encoding = options;
+  } else if (options != null) {
+    if (options.encoding) {
+      encoding = options.encoding;
+    }
+    if (options.withFileTypes) {
+      withFileTypes = true;
+    }
+  }
+  const map = unstable_getCacheForType(createReaddirMap);
+  let readdirCache = map.get(path);
+  if (!readdirCache) {
+    readdirCache = [];
+    map.set(path, readdirCache);
+  }
+  let record;
+  for (let i = 0; i < readdirCache.length; i += 3) {
+    const cachedEncoding: string = (readdirCache[i]: any);
+    const cachedWithFileTypes: boolean = (readdirCache[i + 1]: any);
+    if (encoding === cachedEncoding && withFileTypes === cachedWithFileTypes) {
+      const cachedRecord: Record<void> = (readdirCache[i + 2]: any);
+      record = cachedRecord;
+      break;
+    }
+  }
+  if (!record) {
+    const thenable = fs.readdir(path, {encoding, withFileTypes});
+    record = createRecordFromThenable(thenable);
+    readdirCache.push(encoding, withFileTypes, record);
+  }
+  const files = readRecord(record).value;
+  return files;
+}
+
+function createReadFileMap(): Map<string, Record<Buffer>> {
   return new Map();
 }
 
@@ -106,15 +222,16 @@ export function readFile(
         signal?: mixed, // We'll have our own signal
       },
 ): string | Buffer {
-  const map = unstable_getCacheForType(createReadFileCache);
   checkPathInDev(path);
+  const map = unstable_getCacheForType(createReadFileMap);
   let record = map.get(path);
   if (!record) {
     const thenable = fs.readFile(path);
     record = createRecordFromThenable(thenable);
     map.set(path, record);
   }
-  const buffer: Buffer = readRecordValue(record);
+  const resolvedRecord = readRecord(record);
+  const buffer: Buffer = resolvedRecord.value;
   if (!options) {
     return buffer;
   }
@@ -136,7 +253,7 @@ export function readFile(
   if (typeof encoding !== 'string') {
     return buffer;
   }
-  const textCache = record.cache;
+  const textCache = resolvedRecord.cache || (resolvedRecord.cache = []);
   for (let i = 0; i < textCache.length; i += 2) {
     if (textCache[i] === encoding) {
       return (textCache[i + 1]: any);
@@ -146,3 +263,119 @@ export function readFile(
   textCache.push(encoding, text);
   return text;
 }
+
+function createReadlinkMap(): Map<string, Array<string | Record<mixed>>> {
+  return new Map();
+}
+
+export function readlink(
+  path: string,
+  options?: string | {encoding?: string},
+): mixed {
+  checkPathInDev(path);
+  let encoding = 'utf8';
+  if (typeof options === 'string') {
+    encoding = options;
+  } else if (options != null) {
+    if (options.encoding) {
+      encoding = options.encoding;
+    }
+  }
+  const map = unstable_getCacheForType(createReadlinkMap);
+  let readlinkCache = map.get(path);
+  if (!readlinkCache) {
+    readlinkCache = [];
+    map.set(path, readlinkCache);
+  }
+  let record;
+  for (let i = 0; i < readlinkCache.length; i += 2) {
+    const cachedEncoding: string = (readlinkCache[i]: any);
+    if (encoding === cachedEncoding) {
+      const cachedRecord: Record<void> = (readlinkCache[i + 1]: any);
+      record = cachedRecord;
+      break;
+    }
+  }
+  if (!record) {
+    const thenable = fs.readlink(path, {encoding});
+    record = createRecordFromThenable(thenable);
+    readlinkCache.push(encoding, record);
+  }
+  const linkString = readRecord(record).value;
+  return linkString;
+}
+
+function createRealpathMap(): Map<string, Array<string | Record<mixed>>> {
+  return new Map();
+}
+
+export function realpath(
+  path: string,
+  options?: string | {encoding?: string},
+): mixed {
+  checkPathInDev(path);
+  let encoding = 'utf8';
+  if (typeof options === 'string') {
+    encoding = options;
+  } else if (options != null) {
+    if (options.encoding) {
+      encoding = options.encoding;
+    }
+  }
+  const map = unstable_getCacheForType(createRealpathMap);
+  let realpathCache = map.get(path);
+  if (!realpathCache) {
+    realpathCache = [];
+    map.set(path, realpathCache);
+  }
+  let record;
+  for (let i = 0; i < realpathCache.length; i += 2) {
+    const cachedEncoding: string = (realpathCache[i]: any);
+    if (encoding === cachedEncoding) {
+      const cachedRecord: Record<void> = (realpathCache[i + 1]: any);
+      record = cachedRecord;
+      break;
+    }
+  }
+  if (!record) {
+    const thenable = fs.realpath(path, {encoding});
+    record = createRecordFromThenable(thenable);
+    realpathCache.push(encoding, record);
+  }
+  const resolvedPath = readRecord(record).value;
+  return resolvedPath;
+}
+
+function createStatMap(): Map<string, Array<boolean | Record<mixed>>> {
+  return new Map();
+}
+
+export function stat(path: string, options?: {bigint?: boolean}): mixed {
+  checkPathInDev(path);
+  let bigint = false;
+  if (options && options.bigint) {
+    bigint = true;
+  }
+  const map = unstable_getCacheForType(createStatMap);
+  let statCache = map.get(path);
+  if (!statCache) {
+    statCache = [];
+    map.set(path, statCache);
+  }
+  let record;
+  for (let i = 0; i < statCache.length; i += 2) {
+    const cachedBigint: boolean = (statCache[i]: any);
+    if (bigint === cachedBigint) {
+      const cachedRecord: Record<void> = (statCache[i + 1]: any);
+      record = cachedRecord;
+      break;
+    }
+  }
+  if (!record) {
+    const thenable = fs.stat(path, {bigint});
+    record = createRecordFromThenable(thenable);
+    statCache.push(bigint, record);
+  }
+  const stats = readRecord(record).value;
+  return stats;
+}
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 0fac49adfb21..86b19777cd31 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -71,6 +71,20 @@ declare function __webpack_chunk_load__(id: string): Promise<mixed>;
 declare function __webpack_require__(id: string): any;
 
 declare module 'fs/promises' {
+  declare var access: (path: string, mode?: number) => Promise<void>;
+  declare var lstat: (
+    path: string,
+    options?: ?{bigint?: boolean},
+  ) => Promise<mixed>;
+  declare var readdir: (
+    path: string,
+    options?:
+      | ?string
+      | {
+          encoding?: ?string,
+          withFileTypes?: ?boolean,
+        },
+  ) => Promise<Buffer>;
   declare var readFile: (
     path: string,
     options?:
@@ -79,6 +93,26 @@ declare module 'fs/promises' {
           encoding?: ?string,
         },
   ) => Promise<Buffer>;
+  declare var readlink: (
+    path: string,
+    options?:
+      | ?string
+      | {
+          encoding?: ?string,
+        },
+  ) => Promise<mixed>;
+  declare var realpath: (
+    path: string,
+    options?:
+      | ?string
+      | {
+          encoding?: ?string,
+        },
+  ) => Promise<mixed>;
+  declare var stat: (
+    path: string,
+    options?: ?{bigint?: boolean},
+  ) => Promise<mixed>;
 }
 declare module 'pg' {
   declare var Pool: (
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
index 226ea5be5b77..80c0a6c2cddb 100644
--- a/scripts/rollup/modules.js
+++ b/scripts/rollup/modules.js
@@ -10,6 +10,7 @@ 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,
   'prop-types/checkPropTypes': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

From dbf40ef7599b824f9712074540fedfa15d3e948a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 9 Dec 2020 22:47:17 +0000
Subject: [PATCH 0138/1603] Put .server.js at the end of bundle filenames
 (#20419)

* Put .server.js at the end of bundle filenames

* Client too
---
 .../npm/writer.browser.server.js              |  4 ++--
 .../npm/writer.node.server.js                 |  4 ++--
 packages/react/npm/unstable-index.server.js   |  4 ++--
 scripts/rollup/bundles.js                     | 19 ++++++++++++++++++-
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/packages/react-server-dom-webpack/npm/writer.browser.server.js b/packages/react-server-dom-webpack/npm/writer.browser.server.js
index e15f6bdec7f8..3f6729883fda 100644
--- a/packages/react-server-dom-webpack/npm/writer.browser.server.js
+++ b/packages/react-server-dom-webpack/npm/writer.browser.server.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-writer.browser.server.production.min.js');
+  module.exports = require('./cjs/react-server-dom-webpack-writer.browser.production.min.server.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-writer.browser.server.development.js');
+  module.exports = require('./cjs/react-server-dom-webpack-writer.browser.development.server.js');
 }
diff --git a/packages/react-server-dom-webpack/npm/writer.node.server.js b/packages/react-server-dom-webpack/npm/writer.node.server.js
index b40cc946ea2f..0254033b0b9c 100644
--- a/packages/react-server-dom-webpack/npm/writer.node.server.js
+++ b/packages/react-server-dom-webpack/npm/writer.node.server.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-server-dom-webpack-writer.node.server.production.min.js');
+  module.exports = require('./cjs/react-server-dom-webpack-writer.node.production.min.server.js');
 } else {
-  module.exports = require('./cjs/react-server-dom-webpack-writer.node.server.development.js');
+  module.exports = require('./cjs/react-server-dom-webpack-writer.node.development.server.js');
 }
diff --git a/packages/react/npm/unstable-index.server.js b/packages/react/npm/unstable-index.server.js
index 431f25786777..c84b65bf312f 100644
--- a/packages/react/npm/unstable-index.server.js
+++ b/packages/react/npm/unstable-index.server.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-unstable-index.server.production.min.js');
+  module.exports = require('./cjs/react-unstable-index.production.min.server.js');
 } else {
-  module.exports = require('./cjs/react-unstable-index.server.development.js');
+  module.exports = require('./cjs/react-unstable-index.development.server.js');
 }
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index e97f7aa8d306..90f1f50e3ef6 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -834,7 +834,7 @@ deepFreeze(bundles);
 deepFreeze(bundleTypes);
 deepFreeze(moduleTypes);
 
-function getFilename(bundle, bundleType) {
+function getOriginalFilename(bundle, bundleType) {
   let name = bundle.entry;
   const globalName = bundle.global;
   // we do this to replace / to -, for react-dom/server
@@ -871,6 +871,23 @@ function getFilename(bundle, bundleType) {
   }
 }
 
+function getFilename(bundle, bundleType) {
+  const originalFilename = getOriginalFilename(bundle, bundleType);
+  // Ensure .server.js or .client.js is the final suffix.
+  // This is important for the Server tooling convention.
+  if (originalFilename.indexOf('.server.') !== -1) {
+    return originalFilename
+      .replace('.server.', '.')
+      .replace('.js', '.server.js');
+  }
+  if (originalFilename.indexOf('.client.') !== -1) {
+    return originalFilename
+      .replace('.client.', '.')
+      .replace('.js', '.client.js');
+  }
+  return originalFilename;
+}
+
 module.exports = {
   bundleTypes,
   moduleTypes,

From 842ee367e620d322e67262d67e892b17712998f8 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 10 Dec 2020 02:14:50 +0000
Subject: [PATCH 0139/1603] [Flight] Rename the shared entry point (#20420)

* [Flight] Rename the shared entry point

* Shared
---
 packages/react/npm/unstable-index.server.js                | 7 -------
 packages/react/npm/unstable-shared-subset.js               | 7 +++++++
 packages/react/package.json                                | 6 +++---
 ...erimental.js => unstable-shared-subset.experimental.js} | 0
 ...{unstable-index.server.js => unstable-shared-subset.js} | 0
 scripts/rollup/bundles.js                                  | 4 ++--
 scripts/rollup/forks.js                                    | 4 ++--
 7 files changed, 14 insertions(+), 14 deletions(-)
 delete mode 100644 packages/react/npm/unstable-index.server.js
 create mode 100644 packages/react/npm/unstable-shared-subset.js
 rename packages/react/{unstable-index.server.experimental.js => unstable-shared-subset.experimental.js} (100%)
 rename packages/react/{unstable-index.server.js => unstable-shared-subset.js} (100%)

diff --git a/packages/react/npm/unstable-index.server.js b/packages/react/npm/unstable-index.server.js
deleted file mode 100644
index c84b65bf312f..000000000000
--- a/packages/react/npm/unstable-index.server.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-unstable-index.production.min.server.js');
-} else {
-  module.exports = require('./cjs/react-unstable-index.development.server.js');
-}
diff --git a/packages/react/npm/unstable-shared-subset.js b/packages/react/npm/unstable-shared-subset.js
new file mode 100644
index 000000000000..e56831a36a54
--- /dev/null
+++ b/packages/react/npm/unstable-shared-subset.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-unstable-shared-subset.production.min.js');
+} else {
+  module.exports = require('./cjs/react-unstable-shared-subset.development.js');
+}
diff --git a/packages/react/package.json b/packages/react/package.json
index 87e5a806a21d..311982f5c354 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -17,16 +17,16 @@
     "umd/",
     "jsx-runtime.js",
     "jsx-dev-runtime.js",
-    "unstable-index.server.js"
+    "unstable-shared-subset.js"
   ],
   "main": "index.js",
   "exports": {
     ".": {
-      "react-server": "./unstable-index.server.js",
+      "react-server": "./unstable-shared-subset.js",
       "default": "./index.js"
     },
     "./index": {
-      "react-server": "./unstable-index.server.js",
+      "react-server": "./unstable-shared-subset.js",
       "default": "./index.js"
     },
     "./build-info.json": "./build-info.json",
diff --git a/packages/react/unstable-index.server.experimental.js b/packages/react/unstable-shared-subset.experimental.js
similarity index 100%
rename from packages/react/unstable-index.server.experimental.js
rename to packages/react/unstable-shared-subset.experimental.js
diff --git a/packages/react/unstable-index.server.js b/packages/react/unstable-shared-subset.js
similarity index 100%
rename from packages/react/unstable-index.server.js
rename to packages/react/unstable-shared-subset.js
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 90f1f50e3ef6..46af927e3f64 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -90,11 +90,11 @@ const bundles = [
     externals: [],
   },
 
-  /******* Isomorphic Server Only *******/
+  /******* Isomorphic Shared Subset *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'react/unstable-index.server',
+    entry: 'react/unstable-shared-subset',
     global: 'React',
     externals: [],
   },
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 4651b3fa86af..af295ad53c3b 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -43,7 +43,7 @@ const forks = Object.freeze({
       // happens. Other bundles just require('object-assign') anyway.
       return null;
     }
-    if (entry === 'react' || entry === 'react/unstable-index.server') {
+    if (entry === 'react' || entry === 'react/unstable-shared-subset') {
       // Use the forked version that uses ES modules instead of CommonJS.
       return 'shared/forks/object-assign.inline-umd.js';
     }
@@ -64,7 +64,7 @@ const forks = Object.freeze({
   // Without this fork, importing `shared/ReactSharedInternals` inside
   // the `react` package itself would not work due to a cyclical dependency.
   'shared/ReactSharedInternals': (bundleType, entry, dependencies) => {
-    if (entry === 'react' || entry === 'react/unstable-index.server') {
+    if (entry === 'react' || entry === 'react/unstable-shared-subset') {
       return 'react/src/ReactSharedInternals.js';
     }
     if (!entry.startsWith('react/') && dependencies.indexOf('react') === -1) {

From 94aa365e3abfa3ae946875fe2e957ebdcf1d00bc Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 10 Dec 2020 03:03:53 +0000
Subject: [PATCH 0140/1603] [Flight] Fix webpack plugin to use chunk groups
 (#20421)

---
 .../src/ReactFlightWebpackPlugin.js           | 41 ++++++++++---------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index 4b273acdfef6..a1957692b7e7 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -170,26 +170,29 @@ export default class ReactFlightWebpackPlugin {
 
     compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {
       const json = {};
-      compilation.chunks.forEach(chunk => {
-        chunk.getModules().forEach(mod => {
-          // TOOD: 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 (!/\.client\.js$/.test(mod.resource)) {
-            return;
-          }
-          const moduleExports = {};
-          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
-            moduleExports[name] = {
-              id: mod.id,
-              chunks: chunk.ids,
-              name: name,
-            };
+      compilation.chunkGroups.forEach(chunkGroup => {
+        const chunkIds = chunkGroup.chunks.map(c => c.id);
+        chunkGroup.chunks.forEach(chunk => {
+          chunk.getModules().forEach(mod => {
+            // 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 (!/\.client\.js$/.test(mod.resource)) {
+              return;
+            }
+            const moduleExports = {};
+            ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
+              moduleExports[name] = {
+                id: mod.id,
+                chunks: chunkIds,
+                name: name,
+              };
+            });
+            const href = pathToFileURL(mod.resource).href;
+            if (href !== undefined) {
+              json[href] = moduleExports;
+            }
           });
-          const href = pathToFileURL(mod.resource).href;
-          if (href !== undefined) {
-            json[href] = moduleExports;
-          }
         });
       });
       const output = JSON.stringify(json, null, 2);

From 40ff2395e44d5f821ddcd4f56d5f9a53ee99ceb1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 10 Dec 2020 03:55:38 +0000
Subject: [PATCH 0141/1603] [Flight] Prevent non-Server imports of aliased
 Server entrypoints (#20422)

* [Flight] Prevent non-Server imports of aliased Server entrypoints

* Fix Flow + await

* Tighten the types
---
 fixtures/flight-browser/index.html            |  2 +-
 .../src/ReactFlightWebpackNodeLoader.js       | 23 +++++++++++--------
 .../src/ReactFlightWebpackNodeRegister.js     | 16 ++++++++-----
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
index c48e3e4c9e63..ac39b6e26c6c 100644
--- a/fixtures/flight-browser/index.html
+++ b/fixtures/flight-browser/index.html
@@ -19,7 +19,7 @@ <h1>Flight Example</h1>
     <script src="../../build/node_modules/react/umd/react.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
-    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.server.development.js"></script>
+    <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack-writer.browser.development.server.js"></script>
     <script src="../../build/node_modules/react-server-dom-webpack/umd/react-server-dom-webpack.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index d716cda4653c..db618f0eb17e 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -18,7 +18,7 @@ type ResolveFunction = (
   string,
   ResolveContext,
   ResolveFunction,
-) => Promise<{url: string}>;
+) => {url: string} | Promise<{url: string}>;
 
 type GetSourceContext = {
   format: string,
@@ -70,19 +70,24 @@ export async function resolve(
       );
     }
   }
-  // We intentionally check the specifier here instead of the resolved file.
-  // This allows package exports to configure non-server aliases that resolve to server files
-  // depending on environment. It's probably a bad idea to export a server file as "main" though.
-  if (specifier.endsWith('.server.js')) {
-    if (context.parentURL && !context.parentURL.endsWith('.server.js')) {
+  const resolved = await defaultResolve(specifier, context, defaultResolve);
+  if (resolved.url.endsWith('.server.js')) {
+    const parentURL = context.parentURL;
+    if (parentURL && !parentURL.endsWith('.server.js')) {
+      let reason;
+      if (specifier.endsWith('.server.js')) {
+        reason = `"${specifier}"`;
+      } else {
+        reason = `"${specifier}" (which expands to "${resolved.url}")`;
+      }
       throw new Error(
-        `Cannot import "${specifier}" from "${context.parentURL}". ` +
+        `Cannot import ${reason} from "${parentURL}". ` +
           'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
           'That way nobody accidentally sends these to the client by indirectly importing it.',
       );
     }
   }
-  return defaultResolve(specifier, context, defaultResolve);
+  return resolved;
 }
 
 export async function getSource(
@@ -128,7 +133,7 @@ function addExportNames(names, node) {
 function resolveClientImport(
   specifier: string,
   parentURL: string,
-): Promise<{url: 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
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index 26a92b8323d3..a5f889d3eb15 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -70,22 +70,26 @@ module.exports = function register() {
   const originalResolveFilename = Module._resolveFilename;
 
   Module._resolveFilename = function(request, parent, isMain, options) {
-    // We intentionally check the request here instead of the resolved file.
-    // This allows package exports to configure non-server aliases that resolve to server files
-    // depending on environment. It's probably a bad idea to export a server file as "main" though.
-    if (request.endsWith('.server.js')) {
+    const resolved = originalResolveFilename.apply(this, arguments);
+    if (resolved.endsWith('.server.js')) {
       if (
         parent &&
         parent.filename &&
         !parent.filename.endsWith('.server.js')
       ) {
+        let reason;
+        if (request.endsWith('.server.js')) {
+          reason = `"${request}"`;
+        } else {
+          reason = `"${request}" (which expands to "${resolved}")`;
+        }
         throw new Error(
-          `Cannot import "${request}" from "${parent.filename}". ` +
+          `Cannot import ${reason} from "${parent.filename}". ` +
             'By react-server convention, .server.js files can only be imported from other .server.js files. ' +
             'That way nobody accidentally sends these to the client by indirectly importing it.',
         );
       }
     }
-    return originalResolveFilename.apply(this, arguments);
+    return resolved;
   };
 };

From b15d6e93e70a50605f9a1187ea104d7e280447e4 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 10 Dec 2020 06:15:37 +0000
Subject: [PATCH 0142/1603] [Flight] Make PG and FS server-only (#20424)

* Make react-fs server-only

* Make react-pg server-only
---
 ...dex.browser.js => index.browser.server.js} |  0
 packages/react-fs/index.js                    |  7 ++++---
 .../{index.node.js => index.node.server.js}   |  0
 ...dex.browser.js => index.browser.server.js} |  4 ++--
 packages/react-fs/npm/index.js                |  5 ++++-
 packages/react-fs/npm/index.node.js           |  7 -------
 packages/react-fs/npm/index.node.server.js    |  7 +++++++
 packages/react-fs/package.json                | 19 ++++++++++++++-----
 ...dex.browser.js => index.browser.server.js} |  0
 packages/react-pg/index.js                    |  7 ++++---
 .../{index.node.js => index.node.server.js}   |  0
 ...dex.browser.js => index.browser.server.js} |  4 ++--
 packages/react-pg/npm/index.js                |  5 ++++-
 packages/react-pg/npm/index.node.js           |  7 -------
 packages/react-pg/npm/index.node.server.js    |  7 +++++++
 packages/react-pg/package.json                | 19 ++++++++++++++-----
 .../react-server-dom-webpack/package.json     |  3 ---
 scripts/rollup/bundles.js                     |  8 ++++----
 18 files changed, 66 insertions(+), 43 deletions(-)
 rename packages/react-fs/{index.browser.js => index.browser.server.js} (100%)
 rename packages/react-fs/{index.node.js => index.node.server.js} (100%)
 rename packages/react-fs/npm/{index.browser.js => index.browser.server.js} (59%)
 delete mode 100644 packages/react-fs/npm/index.node.js
 create mode 100644 packages/react-fs/npm/index.node.server.js
 rename packages/react-pg/{index.browser.js => index.browser.server.js} (100%)
 rename packages/react-pg/{index.node.js => index.node.server.js} (100%)
 rename packages/react-pg/npm/{index.browser.js => index.browser.server.js} (59%)
 delete mode 100644 packages/react-pg/npm/index.node.js
 create mode 100644 packages/react-pg/npm/index.node.server.js

diff --git a/packages/react-fs/index.browser.js b/packages/react-fs/index.browser.server.js
similarity index 100%
rename from packages/react-fs/index.browser.js
rename to packages/react-fs/index.browser.server.js
diff --git a/packages/react-fs/index.js b/packages/react-fs/index.js
index ceb2071c4f05..02bc45822d62 100644
--- a/packages/react-fs/index.js
+++ b/packages/react-fs/index.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
-'use strict';
-
-export * from './index.node';
+throw new Error(
+  'React FS cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-fs/index.node.js b/packages/react-fs/index.node.server.js
similarity index 100%
rename from packages/react-fs/index.node.js
rename to packages/react-fs/index.node.server.js
diff --git a/packages/react-fs/npm/index.browser.js b/packages/react-fs/npm/index.browser.server.js
similarity index 59%
rename from packages/react-fs/npm/index.browser.js
rename to packages/react-fs/npm/index.browser.server.js
index d08a7383d699..1bb15134d659 100644
--- a/packages/react-fs/npm/index.browser.js
+++ b/packages/react-fs/npm/index.browser.server.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-fs.browser.production.min.js');
+  module.exports = require('./cjs/react-fs.browser.production.min.server.js');
 } else {
-  module.exports = require('./cjs/react-fs.browser.development.js');
+  module.exports = require('./cjs/react-fs.browser.development.server.js');
 }
diff --git a/packages/react-fs/npm/index.js b/packages/react-fs/npm/index.js
index ee510df2ad68..39ea7955e3f3 100644
--- a/packages/react-fs/npm/index.js
+++ b/packages/react-fs/npm/index.js
@@ -1,3 +1,6 @@
 'use strict';
 
-module.exports = require('./index.node');
+throw new Error(
+  'React FS cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-fs/npm/index.node.js b/packages/react-fs/npm/index.node.js
deleted file mode 100644
index fa1d5b986e65..000000000000
--- a/packages/react-fs/npm/index.node.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-fs.node.production.min.js');
-} else {
-  module.exports = require('./cjs/react-fs.node.development.js');
-}
diff --git a/packages/react-fs/npm/index.node.server.js b/packages/react-fs/npm/index.node.server.js
new file mode 100644
index 000000000000..58f2b422839b
--- /dev/null
+++ b/packages/react-fs/npm/index.node.server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-fs.node.production.min.server.js');
+} else {
+  module.exports = require('./cjs/react-fs.node.development.server.js');
+}
diff --git a/packages/react-fs/package.json b/packages/react-fs/package.json
index d3f9586725e0..b83cebf3b25c 100644
--- a/packages/react-fs/package.json
+++ b/packages/react-fs/package.json
@@ -13,14 +13,23 @@
     "README.md",
     "build-info.json",
     "index.js",
-    "index.node.js",
-    "index.browser.js",
+    "index.node.server.js",
+    "index.browser.server.js",
     "cjs/"
   ],
+  "exports": {
+    ".": {
+      "react-server": {
+        "node": "./index.node.server.js",
+        "browser": "./index.browser.server.js"
+      },
+      "default": "./index.js"
+    },
+    "./index.node.server": "./index.node.server.js",
+    "./index.browser.server": "./index.browser.server.js",
+    "./package.json": "./package.json"
+  },
   "peerDependencies": {
     "react": "^17.0.0"
-  },
-  "browser": {
-    "./index.js": "./index.browser.js"
   }
 }
diff --git a/packages/react-pg/index.browser.js b/packages/react-pg/index.browser.server.js
similarity index 100%
rename from packages/react-pg/index.browser.js
rename to packages/react-pg/index.browser.server.js
diff --git a/packages/react-pg/index.js b/packages/react-pg/index.js
index ceb2071c4f05..cdf76f5d7632 100644
--- a/packages/react-pg/index.js
+++ b/packages/react-pg/index.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
-'use strict';
-
-export * from './index.node';
+throw new Error(
+  'React PG cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.',
+);
diff --git a/packages/react-pg/index.node.js b/packages/react-pg/index.node.server.js
similarity index 100%
rename from packages/react-pg/index.node.js
rename to packages/react-pg/index.node.server.js
diff --git a/packages/react-pg/npm/index.browser.js b/packages/react-pg/npm/index.browser.server.js
similarity index 59%
rename from packages/react-pg/npm/index.browser.js
rename to packages/react-pg/npm/index.browser.server.js
index 6e11ea9c992e..175cec16ae3e 100644
--- a/packages/react-pg/npm/index.browser.js
+++ b/packages/react-pg/npm/index.browser.server.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-pg.browser.production.min.js');
+  module.exports = require('./cjs/react-pg.browser.production.min.server.js');
 } else {
-  module.exports = require('./cjs/react-pg.browser.development.js');
+  module.exports = require('./cjs/react-pg.browser.development.server.js');
 }
diff --git a/packages/react-pg/npm/index.js b/packages/react-pg/npm/index.js
index ee510df2ad68..64e0b2b2b59b 100644
--- a/packages/react-pg/npm/index.js
+++ b/packages/react-pg/npm/index.js
@@ -1,3 +1,6 @@
 'use strict';
 
-module.exports = require('./index.node');
+throw new Error(
+  'React PG cannot be used outside a react-server environment. ' +
+    'You must configure Node.js using the `--conditions react-server` flag.'
+);
diff --git a/packages/react-pg/npm/index.node.js b/packages/react-pg/npm/index.node.js
deleted file mode 100644
index a351531e3c90..000000000000
--- a/packages/react-pg/npm/index.node.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-pg.node.production.min.js');
-} else {
-  module.exports = require('./cjs/react-pg.node.development.js');
-}
diff --git a/packages/react-pg/npm/index.node.server.js b/packages/react-pg/npm/index.node.server.js
new file mode 100644
index 000000000000..c49f5fe6453e
--- /dev/null
+++ b/packages/react-pg/npm/index.node.server.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-pg.node.production.min.server.js');
+} else {
+  module.exports = require('./cjs/react-pg.node.development.server.js');
+}
diff --git a/packages/react-pg/package.json b/packages/react-pg/package.json
index 9f8575414eb4..83a8b31c256c 100644
--- a/packages/react-pg/package.json
+++ b/packages/react-pg/package.json
@@ -13,15 +13,24 @@
     "README.md",
     "build-info.json",
     "index.js",
-    "index.node.js",
-    "index.browser.js",
+    "index.node.server.js",
+    "index.browser.server.js",
     "cjs/"
   ],
+  "exports": {
+    ".": {
+      "react-server": {
+        "node": "./index.node.server.js",
+        "browser": "./index.browser.server.js"
+      },
+      "default": "./index.js"
+    },
+    "./index.node.server": "./index.node.server.js",
+    "./index.browser.server": "./index.browser.server.js",
+    "./package.json": "./package.json"
+  },
   "peerDependencies": {
     "react": "^17.0.0",
     "pg": "*"
-  },
-  "browser": {
-    "./index.js": "./index.browser.js"
   }
 }
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index 711ffb37d68e..8c7be6ca6682 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -38,9 +38,6 @@
     "./node-register": "./node-register.js",
     "./package.json": "./package.json"
   },
-  "browser": {
-    "./writer.js": "./writer.browser.server.js"
-  },
   "main": "index.js",
   "repository": {
     "type" : "git",
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 46af927e3f64..9c6a8c8a95d8 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -157,7 +157,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'react-fs/index.browser',
+    entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
     externals: [],
   },
@@ -166,7 +166,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'react-fs/index.node',
+    entry: 'react-fs/index.node.server',
     global: 'ReactFilesystem',
     externals: ['react', 'fs/promises', 'path'],
   },
@@ -175,7 +175,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'react-pg/index.browser',
+    entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
     externals: [],
   },
@@ -184,7 +184,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'react-pg/index.node',
+    entry: 'react-pg/index.node.server',
     global: 'ReactPostgres',
     externals: ['react', 'pg'],
   },

From cdfde3ae110844baf068706e7ed3fe97ec15f1d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 10 Dec 2020 08:50:41 -0500
Subject: [PATCH 0143/1603] Always rethrow original error when we replay errors
 (#20425)

We replay errors so you can break on paused exceptions. This is done in
the second pass so that the first pass can ignore suspense.

Originally this threw the original error. For suppression purposes
we copied the flag onto the original error.

https://github.com/facebook/react/blob/f1dc626b29b8bf0f14c75a8525e8650b7ea94a47/packages/react-reconciler/src/ReactFiberScheduler.old.js#L367-L369

During this refactor it changed to just throw the retried error:

https://github.com/facebook/react/pull/15151

We're not sure exactly why but it was likely just an optimization or
clean up.

So we can go back to throwing the original error. That helps in the case
where a memoized function is naively not rethrowing each time such as
in Node's module system.

Unfortunately this doesn't fix the problem fully.
Because invokeGuardedCallback captures the error and logs it to the browser.
So you still end up seeing the wrong message in the logs.

This just fixes so that the error boundary sees the first one.
---
 .../fixtures/error-handling/index.js          |   29 +
 fixtures/dom/yarn.lock                        | 6685 ++++++++++-------
 .../src/ReactFiberWorkLoop.new.js             |   20 +-
 .../src/ReactFiberWorkLoop.old.js             |   20 +-
 4 files changed, 4069 insertions(+), 2685 deletions(-)

diff --git a/fixtures/dom/src/components/fixtures/error-handling/index.js b/fixtures/dom/src/components/fixtures/error-handling/index.js
index 7fb9941a73f0..5bbeec7de447 100644
--- a/fixtures/dom/src/components/fixtures/error-handling/index.js
+++ b/fixtures/dom/src/components/fixtures/error-handling/index.js
@@ -241,6 +241,20 @@ class TrySilenceFatalError extends React.Component {
   }
 }
 
+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 (
@@ -288,6 +302,21 @@ export default class ErrorHandlingTestCases extends React.Component {
             }}
           />
         </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="">
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
index 039f1f128e99..59ad08c8297d 100644
--- a/fixtures/dom/yarn.lock
+++ b/fixtures/dom/yarn.lock
@@ -3,40 +3,36 @@
 
 
 "@babel/standalone@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.0.0.tgz#856446641620c1c5f0ca775621d478324ebd1f52"
+  version "7.12.10"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.12.10.tgz#f77f6750d0ab88c7c23234dd2d2f3800f170a573"
+  integrity sha512-e3sJ7uwwjiGWv7qeATKrP+Mjltr6JEurPh3yR0dBb9ie2YDnKl52lO82f+Ha+HAtyxTHfsPIXwgFmWKsCT2zOQ==
 
-"@jest/types@^25.1.0":
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.1.0.tgz#b26831916f0d7c381e11dbb5e103a72aed1b4395"
-  integrity sha512-VpOtt7tCrgvamWZh1reVsGADujKigBUFTi19mlRjqEGsE8qH4r3s+skY33dNdXOwyZIvuftZ5tqdF1IgsMejMA==
+"@jest/types@^25.5.0":
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
+  integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.0"
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^15.0.0"
     chalk "^3.0.0"
 
-"@types/color-name@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
-  integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"
-  integrity sha512-hRJD2ahnnpLgsj6KWMYSrmXkM3rm2Dl1qkx6IOFD5FnuNPXJIG5L0dhgKXCYTRMGzU4n0wImQ/xfmRc4POUFlg==
+  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"
-  integrity sha512-3BUTyMzbZa2DtDI2BkERNC6jJw2Mr2Y0oGI7mRxYNBPxppbtEK1F66u3bKwU2g+wxwWI7PAoRpJnOY1grJqzHg==
+  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@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
-  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.2.tgz#e875cc689e47bce549ec81f3df5e6f6f11cfaeb2"
+  integrity sha512-P/W9yOX/3oPZSpaYOCQzGqgCQRXn0FFO/V8bWrCQs+wLmvVVxk6CRBXALEvNs9OHIatlnlFokfhuDo2ug01ciw==
   dependencies:
     "@types/istanbul-lib-coverage" "*"
     "@types/istanbul-lib-report" "*"
@@ -47,99 +43,105 @@
   integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
 
 "@types/yargs@^15.0.0":
-  version "15.0.1"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.1.tgz#9266a9d7be68cfcc982568211085a49a277f7c96"
-  integrity sha512-sYlwNU7zYi6eZbMzFvG6eHD7VsEvFdoDtlD7eI1JTg7YNnuguzmiGsc6MPSq5l8n+h21AsNof0je+9sgOe4+dg==
+  version "15.0.11"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.11.tgz#361d7579ecdac1527687bcebf9946621c12ab78c"
+  integrity sha512-jfcNBxHFYJ4nPIacsi3woz1+kvUO6s1CyeEhtnDHBjHUMNj5UlW2GynmnSgiJJEdNg9yW5C8lfoNRZrHGv5EqA==
   dependencies:
     "@types/yargs-parser" "*"
 
 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"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e"
+  integrity sha1-X6rZwsB/YN12dw9xzwJbYqY8/U4=
 
-accepts@~1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+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.11"
-    negotiator "0.6.1"
+    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.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@^4.0.4:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"
-
-acorn@^5.0.0, acorn@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.1.1.tgz#53fe161111f912ab999ee887a90a0bc52822fd75"
+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.2, address@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.0.2.tgz#480081e82b587ba319459fef512f516fe03d58af"
+address@1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/address/-/address-1.0.3.tgz#b5f50631f8d6cec8bd20c963963afb55e06cbce9"
+  integrity sha512-z55ocwKBRLryBs394Sm3ushTtBeg6VAeuku7utSoSnsJKvKcnXFIyC6vh27n3rXyxSgkJBBCAvyOn7gSUcTYjg==
 
-ajv-keywords@^1.0.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-1.5.0.tgz#c11e6859eafff83e0dafc416929472eca946aa2c"
+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.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
-
-ajv@^4.7.0:
-  version "4.10.3"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.10.3.tgz#3e4fea9675b157de7888b80dd0ed735b83f28e11"
-  dependencies:
-    co "^4.6.0"
-    json-stable-stringify "^1.0.1"
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+  integrity sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I=
 
-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-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.2.2"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.2.2.tgz#47c68d69e86f5d953103b0074a9430dc63da5e39"
+  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"
-    json-stable-stringify "^1.0.1"
+
+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"
@@ -148,44 +150,39 @@ align-text@^0.1.1, align-text@^0.1.3:
 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"
-
-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"
+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 "^1.0.1"
+    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@^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.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:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.0.0.tgz#c5061b6e0ef8a81775e50f5d66151bf6bf371107"
-
-ansi-regex@^2.1.1:
+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-regex@^5.0.0:
   version "5.0.0"
@@ -195,119 +192,162 @@ ansi-regex@^5.0.0:
 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.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+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.0.0, ansi-styles@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.2.1.tgz#90ae75c424d008d2624c5bf29ead3177ebfcf359"
-  integrity sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
-    "@types/color-name" "^1.1.1"
     color-convert "^2.0.1"
 
 anymatch@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
   dependencies:
-    arrify "^1.0.0"
     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.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"
 
 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.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"
+  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.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
+  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-flatten@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+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.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+  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:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+array-includes@^3.0.3, array-includes@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.2.tgz#a8db03e0b88c8c6aeddc49cb132f9bcab4ebf9c8"
+  integrity sha512-w2GspexNQpx+PutG3QpT437/BenZBj0M/MZGn5mzv/MofYqo0xmRHzn4lFsoDlWJ+THYsGJmFlW68WlDFx7VRw==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.1"
+    get-intrinsic "^1.0.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=
 
 art@^0.10.3:
   version "0.10.3"
@@ -315,236 +355,218 @@ art@^0.10.3:
   integrity sha512-HXwbdofRTiJT6qZX/FnchtldzJjS3vkLJxQilc3Xj+ma2MXjY4UAyQ0ls1XZYVnDvVIBiFZbC6QsvtW86TD6tQ==
 
 asap@~2.0.3:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
-asn1.js@^4.0.0:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
+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.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"
+  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, 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.4.1"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  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.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-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:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.5.0.tgz#843190fd6b7357a0b9e1c956edddd5ec8462b54d"
+async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.2:
+  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.14.0"
+    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=
 
-autoprefixer@7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.2.tgz#fbeaf07d48fd878e0682bf7cbeeade728adb2b18"
+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.1.5"
-    caniuse-lite "^1.0.30000697"
+    browserslist "^2.5.1"
+    caniuse-lite "^1.0.30000748"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^6.0.6"
+    postcss "^6.0.13"
     postcss-value-parser "^3.2.3"
 
 autoprefixer@^6.3.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.5.1.tgz#ae759a5221e709f3da17c2d656230e67c43cbb75"
+  version "6.7.7"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
+  integrity sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=
   dependencies:
-    browserslist "~1.4.0"
-    caniuse-db "^1.0.30000554"
+    browserslist "^1.7.6"
+    caniuse-db "^1.0.30000634"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^5.2.4"
+    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"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.2.1:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.5.0.tgz#0a29ffb79c31c9e712eeb087e8e7a64b4a56d755"
+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.22.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"
+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.0"
+    chalk "^1.1.3"
     esutils "^2.0.2"
-    js-tokens "^3.0.0"
+    js-tokens "^3.0.2"
 
-babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.20.0:
-  version "6.20.0"
-  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.20.0.tgz#b968f839090f9a8bc6d41938fb96cb84f7387b26"
+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:
-    chalk "^1.1.0"
-    esutils "^2.0.2"
-    js-tokens "^2.0.0"
+    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.25.0, babel-core@^6.24.1:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.25.0.tgz#7dd42b0463c742e9d5296deb3ec67a9322dad729"
+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.22.0"
-    babel-generator "^6.25.0"
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.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:
-  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.17.0.tgz#6c4576447df479e241e58c807e4bc7da4db7f425"
-  dependencies:
-    babel-code-frame "^6.16.0"
-    babel-generator "^6.17.0"
-    babel-helpers "^6.16.0"
-    babel-messages "^6.8.0"
-    babel-register "^6.16.0"
-    babel-runtime "^6.9.1"
-    babel-template "^6.16.0"
-    babel-traverse "^6.16.0"
-    babel-types "^6.16.0"
-    babylon "^6.11.0"
-    convert-source-map "^1.1.0"
-    debug "^2.1.1"
-    json5 "^0.4.0"
-    lodash "^4.2.0"
-    minimatch "^3.0.2"
-    path-exists "^1.0.0"
-    path-is-absolute "^1.0.0"
-    private "^0.1.6"
-    shebang-regex "^1.0.0"
-    slash "^1.0.0"
-    source-map "^0.5.0"
-
-babel-core@^6.18.0:
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.21.0.tgz#75525480c21c803f826ef3867d22c19f080a3724"
-  dependencies:
-    babel-code-frame "^6.20.0"
-    babel-generator "^6.21.0"
-    babel-helpers "^6.16.0"
-    babel-messages "^6.8.0"
-    babel-register "^6.18.0"
-    babel-runtime "^6.20.0"
-    babel-template "^6.16.0"
-    babel-traverse "^6.21.0"
-    babel-types "^6.21.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"
+    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.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.17.0, babel-generator@^6.18.0, babel-generator@^6.21.0:
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.21.0.tgz#605f1269c489a1c75deeca7ea16d43d4656c8494"
-  dependencies:
-    babel-messages "^6.8.0"
-    babel-runtime "^6.20.0"
-    babel-types "^6.21.0"
-    detect-indent "^4.0.0"
-    jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-
-babel-generator@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.25.0.tgz#33a1af70d5f2890aeb465a4a7793c1df6a9ea9fc"
+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.22.0"
-    babel-types "^6.25.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.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.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-builder-react-jsx/-/babel-helper-builder-react-jsx-6.24.1.tgz#0ad7917e33c8d751e646daca4e77cc19377d2cbc"
+  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.22.0"
-    babel-types "^6.24.1"
-    esutils "^2.0.0"
+    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"
@@ -552,17 +574,19 @@ babel-helper-call-delegate@^6.24.1:
     babel-types "^6.24.1"
 
 babel-helper-define-map@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.24.1.tgz#7a9747f258d8947d32d515f6aa1c7bd02204a080"
+  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.22.0"
-    babel-types "^6.24.1"
-    lodash "^4.2.0"
+    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"
@@ -571,6 +595,7 @@ babel-helper-explode-assignable-expression@^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"
@@ -581,6 +606,7 @@ babel-helper-function-name@^6.24.1:
 babel-helper-get-function-arity@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
+  integrity sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -588,6 +614,7 @@ babel-helper-get-function-arity@^6.24.1:
 babel-helper-hoist-variables@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76"
+  integrity sha1-HssnaJydJVE+rbyZFKc/VAi+enY=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -595,21 +622,24 @@ babel-helper-hoist-variables@^6.24.1:
 babel-helper-optimise-call-expression@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
+  integrity sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
 babel-helper-regex@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.24.1.tgz#d36e22fab1008d79d88648e32116868128456ce8"
+  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.22.0"
-    babel-types "^6.24.1"
-    lodash "^4.2.0"
+    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"
@@ -620,6 +650,7 @@ babel-helper-remap-async-to-generator@^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"
@@ -628,16 +659,10 @@ babel-helper-replace-supers@^6.24.1:
     babel-traverse "^6.24.1"
     babel-types "^6.24.1"
 
-babel-helpers@^6.16.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.16.0.tgz#1095ec10d99279460553e67eb3eee9973d3867e3"
-  dependencies:
-    babel-runtime "^6.0.0"
-    babel-template "^6.16.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"
@@ -645,14 +670,16 @@ babel-helpers@^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.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-7.1.1.tgz#b87134c8b12e3e4c2a94e0546085bc680a2b8488"
+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"
@@ -661,76 +688,85 @@ babel-loader@7.1.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-messages@^6.8.0:
-  version "6.8.0"
-  resolved "https://registry.yarnpkg.com/babel-messages/-/babel-messages-6.8.0.tgz#bf504736ca967e6d65ef0adb5a2a5f947c8e0eb9"
-  dependencies:
-    babel-runtime "^6.0.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.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"
+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.24.1"
-    babel-types "^6.24.1"
+    babel-template "^6.26.0"
+    babel-types "^6.26.0"
 
 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"
+  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.7.2"
-    test-exclude "^4.1.1"
+    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.8.0:
+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"
@@ -739,6 +775,7 @@ babel-plugin-transform-async-to-generator@^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"
@@ -748,28 +785,32 @@ babel-plugin-transform-class-properties@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.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.24.1.tgz#76c295dc3a4741b1665adfd3167215dcff32a576"
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-template "^6.24.1"
-    babel-traverse "^6.24.1"
-    babel-types "^6.24.1"
-    lodash "^4.2.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"
@@ -784,19 +825,22 @@ babel-plugin-transform-es2015-classes@^6.23.0:
 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, 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"
@@ -804,12 +848,14 @@ babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
 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"
@@ -818,29 +864,33 @@ babel-plugin-transform-es2015-function-name@^6.22.0:
 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.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.24.1.tgz#d3e310b40ef664a36622200097c6d440298f2bfe"
+  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.22.0"
-    babel-template "^6.24.1"
-    babel-types "^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"
@@ -849,6 +899,7 @@ babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
 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"
@@ -857,6 +908,7 @@ babel-plugin-transform-es2015-modules-umd@^6.23.0:
 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"
@@ -864,6 +916,7 @@ babel-plugin-transform-es2015-object-super@^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"
@@ -875,6 +928,7 @@ babel-plugin-transform-es2015-parameters@^6.23.0:
 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"
@@ -882,12 +936,14 @@ babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
 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"
@@ -896,18 +952,21 @@ babel-plugin-transform-es2015-sticky-regex@^6.22.0:
 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"
@@ -916,6 +975,7 @@ babel-plugin-transform-es2015-unicode-regex@^6.22.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"
@@ -924,32 +984,37 @@ babel-plugin-transform-exponentiation-operator@^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.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"
+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.22.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"
@@ -957,6 +1022,7 @@ babel-plugin-transform-react-jsx-self@6.22.0, babel-plugin-transform-react-jsx-s
 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"
@@ -964,33 +1030,38 @@ babel-plugin-transform-react-jsx-source@6.22.0, babel-plugin-transform-react-jsx
 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.24.1, babel-plugin-transform-regenerator@^6.22.0:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.24.1.tgz#b8da305ad43c3c99b4848e4fe4037b770d23c418"
+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.9.11"
+    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.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.5.2.tgz#cd4ae90a6e94b709f97374b33e5f8b983556adef"
+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"
@@ -1026,35 +1097,40 @@ babel-preset-env@1.5.2:
 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.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-3.0.2.tgz#d062fca5dce68ed9c2615f2fecbc08861720f8e5"
+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.0.2"
+    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.23.0"
+    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.24.1"
+    babel-plugin-transform-regenerator "6.26.0"
     babel-plugin-transform-runtime "6.23.0"
-    babel-preset-env "1.5.2"
+    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"
@@ -1063,199 +1139,170 @@ babel-preset-react@6.24.1:
     babel-plugin-transform-react-jsx-source "^6.22.0"
     babel-preset-flow "^6.23.0"
 
-babel-register@^6.16.0, babel-register@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.18.0.tgz#892e2e03865078dd90ad2c715111ec4449b32a68"
-  dependencies:
-    babel-core "^6.18.0"
-    babel-runtime "^6.11.6"
-    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-register@^6.24.1:
-  version "6.24.1"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.1.tgz#7e10e13a2f71065bdfad5a1787ba45bca6ded75f"
+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.24.1"
-    babel-runtime "^6.22.0"
-    core-js "^2.4.0"
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
     home-or-tmp "^2.0.0"
-    lodash "^4.2.0"
+    lodash "^4.17.4"
     mkdirp "^0.5.1"
-    source-map-support "^0.4.2"
-
-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.0.0, babel-runtime@^6.11.6, babel-runtime@^6.20.0, babel-runtime@^6.9.0, babel-runtime@^6.9.1:
-  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"
+    source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.22.0.tgz#1cf8b4ac67c77a4ddb0db2ae1f74de52ac4ca611"
+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.10.0"
-
-babel-template@^6.16.0:
-  version "6.16.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.16.0.tgz#e149dd1a9f03a35f817ddbc4d0481988e7ebc8ca"
-  dependencies:
-    babel-runtime "^6.9.0"
-    babel-traverse "^6.16.0"
-    babel-types "^6.16.0"
-    babylon "^6.11.0"
-    lodash "^4.2.0"
-
-babel-template@^6.24.1, babel-template@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.25.0.tgz#665241166b7c2aa4c619d71e192969552b10c071"
-  dependencies:
-    babel-runtime "^6.22.0"
-    babel-traverse "^6.25.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    lodash "^4.2.0"
-
-babel-traverse@^6.16.0, babel-traverse@^6.18.0, babel-traverse@^6.21.0:
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.21.0.tgz#69c6365804f1a4f69eb1213f85b00a818b8c21ad"
-  dependencies:
-    babel-code-frame "^6.20.0"
-    babel-messages "^6.8.0"
-    babel-runtime "^6.20.0"
-    babel-types "^6.21.0"
-    babylon "^6.11.0"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
+    regenerator-runtime "^0.11.0"
 
-babel-traverse@^6.23.1:
-  version "6.23.1"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.23.1.tgz#d3cb59010ecd06a97d81310065f966b699e14f48"
+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-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-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.24.1, babel-traverse@^6.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.25.0.tgz#2257497e2fcd19b89edc13c4c91381f9512496f1"
+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.22.0"
+    babel-code-frame "^6.26.0"
     babel-messages "^6.23.0"
-    babel-runtime "^6.22.0"
-    babel-types "^6.25.0"
-    babylon "^6.17.2"
-    debug "^2.2.0"
-    globals "^9.0.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-babel-types@^6.16.0, babel-types@^6.18.0, babel-types@^6.21.0:
-  version "6.21.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.21.0.tgz#314b92168891ef6d3806b7f7a917fdf87c11a4b2"
-  dependencies:
-    babel-runtime "^6.20.0"
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babel-types@^6.19.0, babel-types@^6.23.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"
+    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.25.0:
-  version "6.25.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.25.0.tgz#70afb248d5660e5d18f811d91c8303b54134a18e"
+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.22.0"
+    babel-runtime "^6.26.0"
     esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
-
-babylon@^6.11.0, babylon@^6.13.0:
-  version "6.14.1"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.14.1.tgz#956275fab72753ad9b3435d7afe58f8bf0a29815"
-
-babylon@^6.15.0:
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
 
-babylon@^6.17.0, babylon@^6.17.2, babylon@^6.17.4:
-  version "6.17.4"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a"
+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.1, balanced-match@^0.4.2:
+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.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.2.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
+  integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==
 
-batch@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+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.0"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.0.tgz#3ca76b85241c7170bf7d9703e7b9aa74630040d4"
+  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.1.3"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+  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.8.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
+  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==
 
-block-stream@*:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+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:
-    inherits "~2.0.0"
+    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.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+  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.4.0:
+  version "4.11.9"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
+  integrity sha512-E6QoYqCKZfgatHTdHzs1RRKP7ip4vvm+EyRUeE2RF0NblwVvb0p6jSVeNTOFxPn26QXN2o6SMfNxKp6kU8zQaw==
+
+bn.js@^5.0.0, bn.js@^5.1.1:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.3.tgz#beca005408f642ebebea80b042b4d18d2ac0ee6b"
+  integrity sha512-GkTiFpjFtUzU9CbMeJ5iazkCzGL3jrhzerzZIuqLABjbwRaFt33I9tUdSNryIptM+RxDet6OKm2WnLXzW51KsQ==
+
+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"
@@ -1267,37 +1314,25 @@ bonjour@^3.5.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"
+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:
-    hoek "2.x.x"
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^2.0.1"
+    cli-boxes "^1.0.0"
+    string-width "^2.0.0"
+    term-size "^1.2.0"
+    widest-line "^2.0.0"
 
-boxen@^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:
-  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"
-
-brace-expansion@^1.1.7:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+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"
@@ -1305,112 +1340,157 @@ brace-expansion@^1.1.7:
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
   dependencies:
     expand-range "^1.8.1"
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
+braces@^2.3.1, braces@^2.3.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:
   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.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  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.0.6"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.0.6.tgz#5e7725dbdef1fd5930d4ebab48567ce451c48a0a"
+  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.2"
+    buffer-xor "^1.0.3"
     cipher-base "^1.0.0"
     create-hash "^1.1.0"
-    evp_bytestokey "^1.0.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"
+  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.0"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
   dependencies:
     cipher-base "^1.0.1"
     des.js "^1.0.0"
     inherits "^2.0.1"
+    safe-buffer "^5.1.2"
 
-browserify-rsa@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
+  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 "^4.1.0"
+    bn.js "^5.0.0"
     randombytes "^2.0.1"
 
 browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
-
-browserify-zlib@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.1.4.tgz#bb35f8a519f600e0fa6b8485241c979d0141fb2d"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
   dependencies:
-    pako "~0.2.0"
+    pako "~1.0.5"
 
-browserslist@^2.1.2, browserslist@^2.1.5:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.3.2.tgz#343ff101cce799d5eaf0b742e17d0d21efc2d379"
+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-lite "^1.0.30000715"
-    electron-to-chromium "^1.3.18"
+    caniuse-db "^1.0.30000639"
+    electron-to-chromium "^1.2.7"
 
-browserslist@~1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.4.0.tgz#9cfdcf5384d9158f5b70da2aa00b30e8ff019049"
+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-db "^1.0.30000539"
+    caniuse-lite "^1.0.30000792"
+    electron-to-chromium "^1.3.30"
 
-bser@^1.0.2:
+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.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
+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-indexof@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.0.tgz#f54f647c4f4e25228baa656a2e57e43d5f270982"
+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-shims@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+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.2:
+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.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  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"
@@ -1419,32 +1499,67 @@ buffer@^4.3.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@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-2.0.0.tgz#6f22003baacf003ccd287afe6872151fddc58579"
+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@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
+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:
+  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"
 
 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"
@@ -1452,6 +1567,7 @@ camel-case@3.0.x:
 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"
@@ -1459,53 +1575,70 @@ camelcase-keys@^2.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, camelcase@^2.1.0:
+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.1.0:
+camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
+
+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.30000539, caniuse-db@^1.0.30000554:
-  version "1.0.30000602"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000602.tgz#06b2cbfb6c3aeef7ddb18cd588043549ad1a2d4e"
+caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
+  version "1.0.30001165"
+  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001165.tgz#579fd28b57e907dd9f8ce25970ac31f8afa5bf03"
+  integrity sha512-0Z8BRu+sxK2qh/+yXM+sUwbpX+qJpIg7BgAJZe3zw7WL6arffICUfNmUCPDRCP4WGyo4tC1d//1xAHz3mzA2uw==
 
-caniuse-lite@^1.0.30000697, caniuse-lite@^1.0.30000715:
-  version "1.0.30000715"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000715.tgz#c327f5e6d907ebcec62cde598c3bf0dd793fb9a0"
+caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
+  version "1.0.30001165"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
+  integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
 
 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"
+  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"
-
-caseless@~0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.11.0.tgz#715b96ea9841593cc33067923f5ec60ebda4f7d7"
+  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.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.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"
@@ -1513,13 +1646,14 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+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.1.0"
+    ansi-styles "^3.2.1"
     escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
+    supports-color "^5.3.0"
 
 chalk@^3.0.0:
   version "3.0.0"
@@ -1529,69 +1663,113 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.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"
+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 "^2.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
     path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
+  optionalDependencies:
+    fsevents "^1.2.7"
+
+chokidar@^3.4.1:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
+  integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
+  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 "^1.0.0"
+    fsevents "~2.1.2"
 
-ci-info@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.0.0.tgz#dc5285f2b4e251821683681c381c3388f46ec534"
+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.1"
-  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
 
 clap@^1.0.9:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.2.tgz#316545bf22229225a2cecaa6824cd2f56a9709ed"
+  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.2.5"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
+  integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
-clean-css@4.1.x:
-  version "4.1.7"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.7.tgz#b9aea4f85679889cf3eae8b40349ec4ebdfdd032"
+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.5.x"
+    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.1.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+  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"
@@ -1600,44 +1778,53 @@ cliui@^2.1.0:
 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.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+  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.1"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  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=
 
 codemirror@^5.40.0:
-  version "5.40.0"
-  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.40.0.tgz#2f5ed47366e514f41349ba0fe34daaa39be4e257"
+  version "5.58.3"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.58.3.tgz#3f0689854ecfbed5d4479a98b96148b2c3b79796"
+  integrity sha512-KBhB+juiyOOgn0AqtRmWyAT3yoElkuvWTI6hsHa9E6GQrl6bk/fdAYcvuqW1/upO9T9rtEtapWdw4XYcNiVDEA==
 
-color-convert@^1.3.0:
-  version "1.8.2"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.8.2.tgz#be868184d7c8631766d54e7078e2672d7c7e3339"
+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:
-    color-name "^1.1.1"
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
 
-color-convert@^1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+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.1"
+    color-name "1.1.3"
 
 color-convert@^2.0.1:
   version "2.0.1"
@@ -1646,11 +1833,12 @@ color-convert@^2.0.1:
   dependencies:
     color-name "~1.1.4"
 
-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-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:
+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==
@@ -1658,12 +1846,14 @@ color-name@~1.1.4:
 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"
@@ -1672,6 +1862,7 @@ color@^0.11.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"
@@ -1680,141 +1871,167 @@ colormin@^1.0.5:
 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.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+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.11.x, commander@~2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
-
-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.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.20.3:
+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=
 
-compressible@~2.0.8:
-  version "2.0.9"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.9.tgz#6daab4e2b599c2770dd9e21e7a891b1c5a755425"
+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.24.0 < 2"
+    mime-db ">= 1.43.0 < 2"
 
 compression@^1.5.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.6.2.tgz#cceb121ecc9d09c52d7ad0c3350ea93ddd402bc3"
+  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.3"
-    bytes "2.3.0"
-    compressible "~2.0.8"
-    debug "~2.2.0"
-    on-headers "~1.0.1"
-    vary "~1.1.0"
+    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.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  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@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
+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 "^3.0.0"
+    dot-prop "^4.2.1"
     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"
+    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.3.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.3.0.tgz#e51d17f8f0ef0db90a64fdb47de3051556e9f169"
+  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.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"
+  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.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.1.tgz#87476c6a67c8daa87e32e87616df883ba7fb071b"
+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.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"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+  integrity sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==
 
-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"
+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:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+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.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
+copy-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.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+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.0:
+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.1.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.1.tgz#817f2c2039347a1e9bf7d090c0923e53f749ca82"
+  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"
@@ -1823,30 +2040,35 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     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"
+  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.0.0"
+    elliptic "^6.5.3"
 
-create-error-class@^3.0.1:
+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.1, create-hash@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+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"
-    ripemd160 "^2.0.0"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
     sha.js "^2.4.0"
 
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+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"
@@ -1855,23 +2077,27 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-class@^15.6.0:
+  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"
+
 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"
 
-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"
+  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"
@@ -1883,14 +2109,22 @@ crypto-browserify@^3.11.0:
     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-loader@0.28.4:
-  version "0.28.4"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.4.tgz#6cf3579192ce355e8b38d5f42dd7a1f2ec898d0f"
+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"
@@ -1905,44 +2139,40 @@ css-loader@0.28.4:
     postcss-modules-scope "^1.0.0"
     postcss-modules-values "^1.1.0"
     postcss-value-parser "^3.3.0"
-    source-list-map "^0.1.7"
+    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"
+  integrity sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=
   dependencies:
     boolbase "~1.0.0"
     css-what "2.1"
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-selector-tokenizer@^0.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"
+  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 "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
 
 css-what@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
+  integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
-cssesc@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+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.9.1"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.9.1.tgz#41422bb5390d85a94ad4db03cc1a188bf68744fe"
+  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"
@@ -1977,107 +2207,144 @@ cssesc@^0.1.0:
     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"
+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:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.1.tgz#c9e37ef2490e64f6d1baa10fda852257082c25d3"
-
-"cssom@>= 0.3.2 < 0.4.0":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+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"
 
-d@^0.1.1, d@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
+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.2"
+    es5-ext "^0.10.50"
+    type "^1.0.1"
 
 damerau-levenshtein@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.3.tgz#ae4f4ce0b62acae10ff63a01bb08f652f5213af2"
+  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"
 
-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.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"
-
-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"
+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@~2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
+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 "0.7.1"
+    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.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
 deep-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  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.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+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.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+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:
-    foreach "^2.0.5"
-    object-keys "^1.0.8"
+    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.0.2, del@^2.2.2:
+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"
@@ -2090,6 +2357,7 @@ del@^2.0.2, del@^2.2.2:
 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"
@@ -2101,18 +2369,17 @@ del@^3.0.0:
 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"
-
-depd@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
+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.0"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  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"
@@ -2120,36 +2387,42 @@ des.js@^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.3"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
+  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
 
-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"
+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@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.1.0.tgz#fd29a46f1c913fd66c22645dc75bffbe43051f32"
-  integrity sha512-nFIfVk5B/NStCsJ+zaPO4vYuLjlzQ6uFvPxzYyHlejNZ/UGa7G/n7peOXVrVNvRuyfstt+mZQYGpjxg9Z6N8Kw==
+diff-sequences@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
+  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
 
 diff@^3.2.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.3.0.tgz#056695150d7aa93237ca7e378ac3b1682b7963b9"
+  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.2"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  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"
@@ -2158,10 +2431,12 @@ diffie-hellman@^5.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.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.1.1.tgz#2369d45038af045f3898e6fa56862aed3f40296c"
+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"
@@ -2169,110 +2444,134 @@ dns-packet@^1.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.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.0.tgz#c73d8d2909d22291e1a007a395804da8b665fe63"
+  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"
-    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"
+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.3"
+    utila "~0.4"
 
 dom-serializer@0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  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 "~1.1.1"
-    entities "~1.1.1"
+    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.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"
+  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.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+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==
 
-domhandler@2.1:
+domelementtype@^2.0.1:
   version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
-  dependencies:
-    domelementtype "1"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.1.0.tgz#a851c080a6d1c3d94344aed151d99f669edf585e"
+  integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
 
-domutils@1.1:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
 domutils@1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+  integrity sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=
   dependencies:
     dom-serializer "0"
     domelementtype "1"
 
-dot-prop@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+domutils@^1.5.1:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
+  integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
+  dependencies:
+    dom-serializer "0"
+    domelementtype "1"
+
+dot-prop@^4.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=
 
-duplexer2@^0.1.4:
+duplexer3@^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"
+  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"
+  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.1"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  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.3.18:
-  version "1.3.18"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.18.tgz#3dcc99da3e6b665f6abbc71c28ad51a2cd731a9c"
+electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
+  version "1.3.621"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.621.tgz#0bbe2100ef0b28f88d0b1101fbdf433312f69be0"
+  integrity sha512-FeIuBzArONbAmKmZIsZIFGu/Gc9AVGlVeVbhCq+G2YIl6QkT0TDn2HKN/FMf1btXEB9kEmIuQf3/lBTVAbmFOg==
 
-elliptic@^6.0.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+elliptic@^6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
+  integrity sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -2283,164 +2582,231 @@ elliptic@^6.0.0:
     minimalistic-crypto-utils "^1.0.0"
 
 emoji-regex@^6.1.0:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.1.tgz#77486fe9cd45421d260a6238b88d721e2fad2050"
+  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.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+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.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  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.4.13"
+    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.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+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==
 
-"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"
+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.7"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
+  integrity sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==
   dependencies:
-    prr "~0.0.0"
+    prr "~1.0.1"
 
 error-ex@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.0.tgz#e67b43f3e82c96ea3a584ffee0b9fc3325d802d9"
+  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.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"
+es-abstract@^1.17.0-next.1:
+  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.1:
+  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.1"
+    is-callable "^1.1.4"
     is-date-object "^1.0.1"
-    is-symbol "^1.0.1"
+    is-symbol "^1.0.2"
 
-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"
+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"
-    es6-symbol "~3.1"
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
 
-es6-iterator@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
+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 "^0.1.1"
-    es5-ext "^0.10.7"
-    es6-symbol "3"
+    d "1"
+    es5-ext "^0.10.35"
+    es6-symbol "^3.1.1"
 
 es6-map@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.4.tgz#a34b147be224773a4d7da8072794cefa3632b897"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/es6-map/-/es6-map-0.1.5.tgz#9136e0503dcc06a301690f0bb14ff4e364e949f0"
+  integrity sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=
   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"
+    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"
+  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.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/es6-set/-/es6-set-0.1.4.tgz#9516b6761c2964b92ff479456233a247dc707ce8"
+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 "~0.1.1"
-    es5-ext "~0.10.11"
-    es6-iterator "2"
-    es6-symbol "3"
-    event-emitter "~0.3.4"
+    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, 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"
+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 "~0.1.1"
-    es5-ext "~0.10.11"
+    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.1"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.1.tgz#0d2bbd8827eb5fb4ba8f97fbfea50d43db21ea81"
+  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 "^0.1.1"
-    es5-ext "^0.10.8"
-    es6-iterator "2"
-    es6-symbol "3"
+    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.8.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  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 "^2.7.1"
-    estraverse "^1.9.1"
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
-    source-map "~0.2.0"
+    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.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-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.1"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.1.tgz#4422574cde66a9a7b099938ee4d508a199e0e3cc"
+  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.8"
-    resolve "^1.2.0"
+    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"
@@ -2449,21 +2815,24 @@ eslint-loader@1.9.0:
     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"
+  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.8"
-    pkg-dir "^1.0.0"
+    debug "^2.6.9"
+    pkg-dir "^2.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"
+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.7.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.7.0.tgz#21de33380b9efb55f5ef6d2e210ec0e07e7fa69f"
+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"
@@ -2479,6 +2848,7 @@ eslint-plugin-import@2.7.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"
@@ -2488,34 +2858,38 @@ eslint-plugin-jsx-a11y@5.1.1:
     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"
+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 "^1.4.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"
+  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.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.4.1.tgz#99cd7eafcffca2ff99a5c8f5f2a474d6364b4bd3"
+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 "^1.1.3"
+    chalk "^2.1.0"
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
-    debug "^2.6.8"
+    debug "^3.0.1"
     doctrine "^2.0.0"
     eslint-scope "^3.7.1"
-    espree "^3.5.0"
+    espree "^3.5.1"
     esquery "^1.0.0"
     estraverse "^4.2.0"
     esutils "^2.0.2"
@@ -2536,98 +2910,111 @@ eslint@4.4.1:
     natural-compare "^1.4.0"
     optionator "^0.8.2"
     path-is-inside "^1.0.2"
-    pluralize "^4.0.0"
+    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.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.0.tgz#98358625bdd055861ea27e2867ea729faf463d8d"
+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.1.1"
+    acorn "^5.5.0"
     acorn-jsx "^3.0.0"
 
-esprima@^2.6.0, esprima@^2.7.1:
+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:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.0.tgz#4499eddcd1110e0b218bacf2fa7f7f59f55ca804"
+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.0.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
+  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
   dependencies:
-    estraverse "^4.0.0"
+    estraverse "^5.1.0"
 
 esrecurse@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  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 "~4.1.0"
-    object-assign "^4.0.1"
+    estraverse "^5.2.0"
 
-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.1, estraverse@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+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@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
+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.0, esutils@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+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.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.7.0.tgz#03d30b5f67dd6e632d2945d30d6652731a34d5d8"
+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.4:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.4.tgz#8d63ddfb4cfe1fae3b32ca265c4c720222080bb5"
+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 "~0.1.1"
-    es5-ext "~0.10.7"
+    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"
+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"
+events@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/events/-/events-3.2.0.tgz#93b87c18f8efcd4202a461aec4dfc0556b639379"
+  integrity sha512-/46HWwbfCX2xTawVfkKLGxMifJYQBWMwY1mjywRtb4c9x8l5NP3KoJtnIOiL1hfdRkIuYhETxQlo62IF8tcnlg==
 
 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:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.0.tgz#497b66ad9fef65cd7c08a6180824ba1476b66e53"
+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:
-    create-hash "^1.1.1"
+    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"
+  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.1.3"
+    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"
@@ -2640,122 +3027,207 @@ execa@^0.7.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.13.3:
-  version "4.14.0"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.14.0.tgz#c1ee3f42cdc891fb3dc650a8922d51ec847d0d66"
+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.3"
+    accepts "~1.3.7"
     array-flatten "1.1.1"
-    content-disposition "0.5.1"
-    content-type "~1.0.2"
-    cookie "0.3.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.2.0"
-    depd "~1.1.0"
-    encodeurl "~1.0.1"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    etag "~1.7.0"
-    finalhandler "0.5.0"
-    fresh "0.3.0"
+    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.1"
+    parseurl "~1.3.3"
     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"
+    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.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.0.4"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.0.4.tgz#1ed9199da9cbfe2ef2f7a31b2fde8b0d12368972"
+  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"
-    jschardet "^1.4.2"
-    tmp "^0.0.31"
+    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"
 
-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"
+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.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+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.0.0"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+  integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
+
+fast-deep-equal@^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.4:
+fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
-fastparse@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+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.1"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  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.0"
-  resolved "https://registry.npmjs.org/fb-watchman/-/fb-watchman-1.9.0.tgz#6f268f1f347a6b3c875d1e89da7e1ed79adfc0ec"
+  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"
+    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"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
   dependencies:
-    bser "^2.0.0"
+    bser "2.1.1"
 
-fbjs@^0.8.1, fbjs@^0.8.4:
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.8.tgz#02f1b6e0ea0d46c24e0b51a2d24df069563a5ad6"
+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"
@@ -2763,81 +3235,99 @@ fbjs@^0.8.1, fbjs@^0.8.4:
     object-assign "^4.1.0"
     promise "^7.1.1"
     setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
-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"
+    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@0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
+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.0"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+  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.10:
-  version "3.5.10"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.5.10.tgz#fc8fa23ddb4ef9e5e0ab6e1e64f679a24a56761f"
+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.3"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  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 "^1.1.3"
+    randomatic "^3.0.0"
     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"
+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@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-0.5.0.tgz#e9508abece9b6dba871a6942a1d7911b91911ac7"
+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.2.0"
+    debug "2.6.9"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
-    statuses "~1.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"
@@ -2846,6 +3336,7 @@ find-cache-dir@^0.1.1:
 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"
@@ -2854,6 +3345,7 @@ find-cache-dir@^1.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"
@@ -2861,59 +3353,77 @@ find-up@^1.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.2.2"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.2.tgz#fa86714e72c21db88601761ecf2f555d1abc6b96"
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.4.tgz#2c2ef77525cc2929007dfffa1dd314aa9c9dee6f"
+  integrity sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==
   dependencies:
     circular-json "^0.3.1"
-    del "^2.0.2"
     graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
     write "^0.2.1"
 
 flatten@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
+  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
 
-for-in@^0.1.5:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.6.tgz#c9f96e89bfad18a545af5ec3ed352a1d9e5b4dc8"
+follow-redirects@^1.0.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
+  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+
+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.4"
-  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.4.tgz#0149b41a39088c7515f51ebe1c1386d45f935072"
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
   dependencies:
-    for-in "^0.1.5"
-
-foreach@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
+    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.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+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.5"
+    combined-stream "^1.0.6"
     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"
+forwarded@~0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
+  integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
-fresh@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.3.0.tgz#651f838e22424e7566de161d8358caa199f83d4f"
+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"
@@ -2922,6 +3432,7 @@ fs-extra@3.0.1:
 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"
@@ -2932,113 +3443,71 @@ fs-extra@^0.30.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=
 
-fsevents@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.1.2.tgz#3282b713fb3ad80ede0e9fcf4611b5aa6fc033f4"
+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:
-    nan "^2.3.0"
-    node-pre-gyp "^0.6.36"
+    bindings "^1.5.0"
+    nan "^2.12.1"
 
-fsevents@^1.0.0:
-  version "1.0.14"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.0.14.tgz#558e8cc38643d8ef40fe45158486d0d25758eee4"
-  dependencies:
-    nan "^2.3.0"
-    node-pre-gyp "^0.6.29"
+fsevents@~2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
+  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
 
-fstream-ignore@^1.0.5, 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"
-
-fstream@^1.0.10:
-  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:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+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=
 
-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"
-
-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"
-
-generate-function@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
+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==
 
-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"
+get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
+  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:
-    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"
+    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.6"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  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"
@@ -3046,23 +3515,29 @@ glob-base@^0.3.0:
 glob-parent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
   dependencies:
     is-glob "^2.0.0"
 
-glob@^7.0.3, glob@^7.0.5:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8"
+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:
-    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"
+    is-glob "^3.1.0"
+    path-dirname "^1.0.0"
 
-glob@^7.1.1, glob@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+glob-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@^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"
@@ -3071,9 +3546,17 @@ glob@^7.1.1, glob@^7.1.2:
     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"
@@ -3082,6 +3565,7 @@ global-modules@1.0.0, global-modules@^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"
@@ -3089,17 +3573,15 @@ global-prefix@^1.0.1:
     is-windows "^1.0.1"
     which "^1.2.14"
 
-globals@^9.0.0:
-  version "9.14.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.14.0.tgz#8859936af0038741263053b39d0e76ca241e4034"
-
-globals@^9.17.0:
+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"
@@ -3111,6 +3593,7 @@ globby@^5.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"
@@ -3118,166 +3601,195 @@ globby@^6.1.0:
     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"
+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.1"
-    duplexer2 "^0.1.4"
+    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"
-    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"
+    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"
-
-"graceful-readlink@>= 1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+  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 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.5.3"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.5.3.tgz#5cf75bd8714f7605713511a56be7c349becb0482"
-  integrity sha512-3yPecJoJHK/4c6aZhSvxOyG4vJKDshV36VHp0iVCDVh7o9w2vwi3NSnL2MMPj3YdduqaBcu7cGbggJQM0br9xA==
+  version "4.7.6"
+  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e"
+  integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
   dependencies:
+    minimist "^1.2.5"
     neo-async "^2.6.0"
-    optimist "^0.6.1"
     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"
-
-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"
+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"
+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 "^4.9.1"
-    har-schema "^1.0.5"
+    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-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-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-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:
+has-symbols@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.1.tgz#9f5214758a44196c406d9bd76cebf81ec2dd31e8"
+  integrity sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==
+
+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:
-    function-bind "^1.0.2"
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
 
-hash-base@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+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:
-    inherits "^2.0.1"
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
 
-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"
+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:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.0"
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
 
-hawk@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
+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:
-    boom "2.x.x"
-    cryptiles "2.x.x"
-    hoek "2.x.x"
-    sntp "1.x.x"
+    function-bind "^1.1.1"
 
-he@1.1.x:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.0.tgz#29319d49beec13a9b1f3c4f9b2a6dde4859bb2a7"
+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.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
+  integrity sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=
   dependencies:
     hash.js "^1.0.3"
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoek@2.x.x:
-  version "2.16.3"
-  resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed"
-
 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.1"
-  resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz#4c2bbc8a758998feebf5ed68580f76d46768b4bc"
+  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.1.5"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.1.5.tgz#0ba81d90da2e25ab34a332e6ec77936e1598118b"
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
+  integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
 
 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"
@@ -3285,35 +3797,39 @@ hpack.js@^2.1.6:
     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"
+  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.1"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz#79bf7a785ea495fe66165e734153f363ff5437da"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
+  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
   dependencies:
     whatwg-encoding "^1.0.1"
 
-html-entities@1.2.1, html-entities@^1.2.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+html-entities@^1.2.0:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
+  integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
 
 html-minifier@^3.2.3:
-  version "3.5.3"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.3.tgz#4a275e3b1a16639abb79b4c11191ff0d0fcf1ab9"
+  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.1.x"
-    commander "2.11.x"
-    he "1.1.x"
-    ncname "1.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.0.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"
@@ -3322,30 +3838,64 @@ html-webpack-plugin@2.29.0:
     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"
+htmlparser2@^3.3.0:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
   dependencies:
-    domelementtype "1"
-    domhandler "2.1"
-    domutils "1.1"
-    readable-stream "1.0"
+    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.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+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.0.2"
-    statuses ">= 1.3.1 < 2"
+    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.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 sha1-ZC6ISIUdZvCdTxJJEoRtuutBuDM=
   dependencies:
     http-proxy "^1.16.2"
     is-glob "^3.1.0"
@@ -3353,96 +3903,128 @@ http-proxy-middleware@~0.17.4:
     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"
+  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 "1.x.x"
-    requires-port "1.x.x"
+    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"
+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 "^0.2.0"
+    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.13:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+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=
 
-iconv-lite@^0.4.17:
-  version "0.4.18"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.18.tgz#23d8656b16aae6742ac29732ea8f0336a4789cf2"
+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.4.13:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+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.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+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.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+  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.3"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
+  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"
-
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  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.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, 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@^1.3.4, ini@~1.3.0:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
+  integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
 
-inquirer@3.2.1, inquirer@^3.0.6:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.2.1.tgz#06ceb0f540f45ca548c17d6840959878265fa175"
+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 "^2.0.0"
+    ansi-escapes "^3.0.0"
     chalk "^2.0.0"
     cli-cursor "^2.1.0"
     cli-width "^2.0.0"
@@ -3457,260 +4039,420 @@ inquirer@3.2.1, inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-internal-ip@^1.2.0:
+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.0.2"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.2.tgz#f4f623f0bb7122f15f5717c8e254b8161b5c5b2d"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-invariant@^2.2.0, invariant@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+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.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.1.1.tgz#c791d95f52b29c1247d5df80ada39b8a73647230"
+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-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-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.0.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.4.tgz#cfc86ccd5dc5a52fa80489111c6920c457e2d98b"
+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-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.1, is-callable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+is-callable@^1.1.4, 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-ci@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.0.10.tgz#f739336b2632365061a9d48270cd56ae3369318e"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
   dependencies:
-    ci-info "^1.0.0"
+    ci-info "^1.5.0"
+
+is-core-module@^2.1.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-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"
+  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-dotfile@^1.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-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+  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.1:
+is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
 
 is-extglob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
 
-is-extglob@^2.1.0:
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  dependencies:
-    number-is-nan "^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.0"
+    is-extglob "^2.1.1"
 
-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"
+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:
-    generate-function "^2.0.0"
-    generate-object-property "^1.1.0"
-    jsonpointer "^4.0.0"
-    xtend "^4.0.0"
+    global-dirs "^0.1.0"
+    is-path-inside "^1.0.0"
+
+is-negative-zero@^2.0.0:
+  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@^2.0.2, is-number@^2.1.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-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.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  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.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.0.tgz#fc06e5a1683fbda13de667aff717bbc10a48f37f"
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-1.0.1.tgz#8ef5b7de50437a3fdca6b4e865ef7aa55cb48036"
+  integrity sha1-jvW33lBDej/cprToZe96pVy0gDY=
   dependencies:
     path-is-inside "^1.0.1"
 
 is-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.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
+  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"
-
-is-promise@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.1.0.tgz#79a2a9ece7f096e80f36d2b2f3bc16c1ff4bf3fa"
-
-is-property@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-property/-/is-property-1.0.2.tgz#57fe1c4e48474edd65b09911f26b1cd4095dda84"
+  integrity sha1-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:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+is-regex@^1.0.4, 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 "^1.0.1"
+    has-symbols "^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"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
 
 is-retry-allowed@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
+  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.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+is-symbol@^1.0.2:
+  version "1.0.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-windows@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
+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=
 
 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"
-
-isexe@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/isexe/-/isexe-1.1.2.tgz#36f3e22e60750920f5e7241a476a8c6a42275ad0"
+  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"
@@ -3718,93 +4460,87 @@ isomorphic-fetch@^2.1.1:
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
 istanbul-api@^1.1.1:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.11.tgz#fcc0b461e2b3bda71e305155138238768257d9de"
+  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.1.1"
-    istanbul-lib-hook "^1.0.7"
-    istanbul-lib-instrument "^1.7.4"
-    istanbul-lib-report "^1.1.1"
-    istanbul-lib-source-maps "^1.2.1"
-    istanbul-reports "^1.1.1"
+    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.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
-
-istanbul-lib-coverage@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.2.tgz#87a0c015b6910651cb3b184814dfb339337e25e1"
+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.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.7.tgz#dd6607f03076578fe7d6f2a630cf143b49bacddc"
+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.4.2:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.0.tgz#b8e0dc25709bb44e17336ab47b7bb5c97c23f659"
-  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.2"
-    semver "^5.3.0"
-
-istanbul-lib-instrument@^1.7.2, istanbul-lib-instrument@^1.7.4:
-  version "1.7.4"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.4.tgz#e9fd920e4767f3d19edc765e2d6b3f5ccbd0eea8"
+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.17.4"
-    istanbul-lib-coverage "^1.1.1"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.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"
+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.1.1"
+    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.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.1.tgz#a6fe1acba8ce08eebc638e572e294d267008aa0c"
+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 "^2.6.3"
-    istanbul-lib-coverage "^1.1.1"
+    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.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.1.1.tgz#042be5c89e175bc3f86523caab29c014e77fee4e"
+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"
@@ -3840,6 +4576,7 @@ jest-cli@^20.0.4:
 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"
@@ -3855,6 +4592,7 @@ jest-config@^20.0.4:
 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"
@@ -3862,22 +4600,24 @@ jest-diff@^20.0.3:
     pretty-format "^20.0.3"
 
 jest-diff@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.1.0.tgz#58b827e63edea1bc80c1de952b80cec9ac50e1ad"
-  integrity sha512-nepXgajT+h017APJTreSieh4zCqnSHEJ1iT8HDlewu630lSJ4Kjjr9KNzm+kzGwwcpsDE6Snx1GJGzzsefaEHw==
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.5.0.tgz#1dd26ed64f96667c068cef026b677dfa01afcfa9"
+  integrity sha512-z1kygetuPiREYdNIumRpAHY6RXiGmp70YHptjdaxTWGmA085W3iCnXNx0DhflK3vwrKmrRWyY1wUpkPMVxMK7A==
   dependencies:
     chalk "^3.0.0"
-    diff-sequences "^25.1.0"
-    jest-get-type "^25.1.0"
-    pretty-format "^25.1.0"
+    diff-sequences "^25.2.6"
+    jest-get-type "^25.2.6"
+    pretty-format "^25.5.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 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"
@@ -3886,18 +4626,20 @@ jest-environment-jsdom@^20.0.3:
 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-get-type@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.1.0.tgz#1cfe5fc34f148dc3a8a3b7275f6b9ce9e2e8a876"
-  integrity sha512-yWkBnT+5tMr8ANB6V+OjmrIJufHtCAqI5ic2H40v+tRqxDmE0PGnIiTyvRWFOMtmVHYpwRqyazDbTnhpjsGvLw==
+jest-get-type@^25.2.6:
+  version "25.2.6"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
+  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
 
 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"
@@ -3909,6 +4651,7 @@ jest-haste-map@^20.0.4:
 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"
@@ -3923,6 +4666,7 @@ jest-jasmine2@^20.0.4:
 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"
@@ -3930,6 +4674,7 @@ jest-matcher-utils@^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"
@@ -3939,6 +4684,7 @@ jest-matchers@^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"
@@ -3947,20 +4693,24 @@ jest-message-util@^20.0.3:
 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"
@@ -3969,6 +4719,7 @@ jest-resolve@^20.0.4:
 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"
@@ -3989,6 +4740,7 @@ jest-runtime@^20.0.4:
 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"
@@ -4000,6 +4752,7 @@ jest-snapshot@^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"
@@ -4012,6 +4765,7 @@ jest-util@^20.0.3:
 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"
@@ -4021,59 +4775,50 @@ jest-validate@^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"
 
-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"
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
+  integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
-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 || ^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.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
+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.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.6.1.tgz#6e5fe67d8b205ce4d22fad05b7781e8dadcc4b30"
+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 "^2.6.0"
+    esprima "^4.0.0"
 
-js-yaml@^3.7.0:
+js-yaml@~3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
+  integrity sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=
   dependencies:
     argparse "^1.0.7"
     esprima "^2.6.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"
-
 jsbn@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.0.tgz#650987da0dd74f4ebf5a11377a2aa2d273e97dfd"
-
-jschardet@^1.4.2:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/jschardet/-/jschardet-1.5.1.tgz#c519f629f86b3a5bedba58a88d311309eec097f9"
+  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"
@@ -4098,116 +4843,168 @@ jsdom@^9.12.0:
 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.2"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
-
-json5@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.4.0.tgz#054352e4c4c80c86c0923877d449de176a732c8d"
+  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"
-
-jsonpointer@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+  integrity sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=
 
 jsprim@^1.2.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.3.1.tgz#2a7256f70412a29ee3670aaca625994c4dcff252"
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
+  integrity sha1-MT5mvB5cwG5Di8G3SZwuXFastqI=
   dependencies:
-    extsprintf "1.0.2"
+    assert-plus "1.0.0"
+    extsprintf "1.3.0"
     json-schema "0.2.3"
-    verror "1.3.6"
+    verror "1.10.0"
 
-jsx-ast-utils@^1.4.0, jsx-ast-utils@^1.4.1:
+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=
 
-kind-of@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+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.0.2"
+    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@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
+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 "^2.0.0"
+    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"
-
-lazy-req@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac"
+  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"
@@ -4215,6 +5012,7 @@ levn@^0.3.0, levn@~0.3.0:
 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"
@@ -4225,6 +5023,7 @@ load-json-file@^1.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"
@@ -4232,19 +5031,22 @@ load-json-file@^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"
+  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"
+    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"
+  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.16"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-0.2.16.tgz#f08632066ed8282835dff88dfb52704765adee6d"
+  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"
@@ -4252,138 +5054,181 @@ loader-utils@^0.2.16:
     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"
+  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 "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
+    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:
+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.indexof@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/lodash.indexof/-/lodash.indexof-4.0.5.tgz#53714adc2cddd6ed87638f893aa9b6c24e31ef3c"
+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.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  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._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"
+  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._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.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.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+"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.3.0:
+  version "4.17.20"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
+  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
 loglevel@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.4.1.tgz#95b383f91a3c2756fd4ab093667e4309161f2bcd"
+  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:
-  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"
+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"
+    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.3"
-  resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.3.tgz#c92393d976793eee5ba4edb583cf8eae35bd9bfb"
+  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.0"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+  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.0.2"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
+  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.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"
+    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"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
+  integrity sha512-2w31R7SJtieJJnQtGc7RVL2StM2vGYVfqUOvUDxH6bC6aJTxPxTF0GnIgCyu7tjockiUWAYQRbxa7vKn34s5sQ==
   dependencies:
-    pify "^2.3.0"
+    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"
 
 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"
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.3.6.tgz#fb8c447110093dd5f32e7aec877dd247e3c98eb1"
+  integrity sha512-gbzsZEUgefao+OqOUOr03GlpjkdOySxVNHQDuiUZXPbLHgDZqiMtOgDSxuzBEtyt9BDXWS503a16bAmlJW/oFA==
+
+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:
-    lodash.indexof "^4.0.5"
+    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 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"
@@ -4391,6 +5236,7 @@ memory-fs@^0.4.0, memory-fs@~0.4.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"
@@ -4406,18 +5252,22 @@ meow@^3.3.0, meow@^3.7.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.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+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"
@@ -4433,256 +5283,275 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     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.0"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.0.tgz#4a62fb1d42933c05583982f4c716f6fb9e6c6d3d"
+  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.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-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-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-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@1.3.4, mime@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.19, 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@1.3.x:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
+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.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+  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:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
 minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
+  integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@3.0.3, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3:
+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.4:
+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@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"
-  integrity sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=
+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==
 
-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"
+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:
-    minimist "0.0.8"
-
-ms@0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
 
-ms@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+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.1.1"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.1.1.tgz#6e7de86a570872ab17058adea7160bbeca814dde"
+  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.0.1"
-    thunky "^0.1.0"
+    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"
-
-nan@^2.3.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.5.0.tgz#aa8f1e34531d807e9e27755b234b4a6ec0c152a8"
+  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=
 
-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.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.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+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==
 
-neo-async@^2.6.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
-  integrity sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==
+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.0"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.0.tgz#ca2825ccb76b18e6f79d573dcfbf1eace33dd164"
+  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.6.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  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.6.33:
-  version "0.6.33"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+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.0.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.0.0.tgz#a3a59ec97024985b46e958379646f96c4b616646"
+  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.1.4"
+    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 "^1.0.0"
-    https-browserify "0.0.1"
-    os-browserify "^0.2.0"
-    path-browserify "0.0.0"
-    process "^0.11.0"
+    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.0.5"
+    readable-stream "^2.3.3"
     stream-browserify "^2.0.1"
-    stream-http "^2.3.1"
-    string_decoder "^0.10.25"
-    timers-browserify "^2.0.2"
+    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.10.3"
-    vm-browserify "0.0.4"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
 
 node-notifier@^5.0.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
+  version "5.4.3"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.4.3.tgz#cb72daf94c93904098e28b9c590fd866e464bd50"
+  integrity sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==
   dependencies:
     growly "^1.3.0"
-    semver "^5.3.0"
-    shellwords "^0.1.0"
-    which "^1.2.12"
-
-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"
-
-node-pre-gyp@^0.6.36:
-  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"
-
-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"
-
-nopt@~3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/nopt/-/nopt-3.0.6.tgz#c6465dbf08abcd4db359317f79ac68a646b28ff9"
-  dependencies:
-    abbrev "1"
+    is-wsl "^1.1.0"
+    semver "^5.5.0"
+    shellwords "^0.1.1"
+    which "^1.3.0"
 
-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"
+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"
-    is-builtin-module "^1.0.0"
+    resolve "^1.10.0"
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-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"
+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:
-    hosted-git-info "^2.1.4"
-    is-builtin-module "^1.0.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
+    remove-trailing-separator "^1.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-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.8.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.8.0.tgz#a9550b079aa3523c85d78df24eef1959fce359ab"
+  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"
@@ -4692,296 +5561,358 @@ normalize-url@^1.4.0:
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.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"
-
-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"
+  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.3.9"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.9.tgz#8bab486ff7fa3dfd086656bbe8b17116d3692d2a"
+  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"
+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.1.1:
+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-assign@^4.0.1, object-assign@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.0.tgz#7a3b3d0e98063d43f4c03f2e8ae6cd51a86883a0"
+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.1.8"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.1.8.tgz#28a659cf987d96a4dabe7860289f3b5326c4a03c"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
-object-keys@^1.0.8:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+object-inspect@^1.8.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.9.0.tgz#c90521d74e1127b67266ded3394ad6116986533a"
+  integrity sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==
+
+object-is@^1.0.1:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.4.tgz#63d6c83c00a43f4cbc9434eb9757c8a5b8565068"
+  integrity sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==
+  dependencies:
+    call-bind "^1.0.0"
+    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.1:
+  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.1"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
+  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.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+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:
+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"
+  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@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"
+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"
 
-optimist@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
-  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
+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:
-    minimist "~0.0.1"
-    wordwrap "~0.0.2"
+    is-wsl "^1.1.0"
 
 optionator@^0.8.1, optionator@^0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.2.tgz#364c5e409d3f4d6301d6c0b4c05bba50180aeb64"
+  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.4"
+    fast-levenshtein "~2.0.6"
     levn "~0.3.0"
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
-    wordwrap "~1.0.0"
+    word-wrap "~1.2.3"
 
 original@>=0.0.5:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+  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.0.x"
+    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"
+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.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.1:
+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"
+  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.1.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
+  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.1.1"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.1.1.tgz#05f5e4ae97a068371bc2a5cc86bfbdbc19c4ae7a"
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
+  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
 
-package-json@^2.0.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
+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 "^5.0.0"
+    got "^6.7.1"
     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"
+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.0"
-  resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.0.tgz#2619f90fd6c829ed0b958f1c84ed03a745a6d70a"
+  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:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
+  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 "^4.0.0"
+    asn1.js "^5.2.0"
     browserify-aes "^1.0.0"
-    create-hash "^1.1.0"
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
 
 parse-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.1.0, parse-json@^2.2.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.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+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==
 
-path-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+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-exists@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-1.0.0.tgz#d5a8998eb71ef37a74c34eb0d9eba6e878eea081"
+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.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:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+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.7.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  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"
@@ -4990,12 +5921,14 @@ path-type@^1.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.0.13"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.13.tgz#c37d295531e786b1da3e3eadc840426accb0ae25"
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94"
+  integrity sha512-4Ejy1OPxi9f2tt1rRV7Go7zmfDQ+ZectEQz3VGUQhgq62HtIRPDyG/JtnwIxs6x3uNMwo2V7q1fMvKjb+Tnpqg==
   dependencies:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
@@ -5003,71 +5936,93 @@ pbkdf2@^3.0.3:
     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"
+  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 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@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
+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.13"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  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 "^1.5.2"
-    debug "^2.2.0"
-    mkdirp "0.5.x"
+    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.1"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.1.tgz#dc5421b6ae6f779ef6bfd47352b94abe59d0316b"
+  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.0"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.0.tgz#08c6d06130fe58a91a21ff50829e1aad6a3a1acc"
+  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"
@@ -5075,50 +6030,57 @@ postcss-convert-values@^2.3.4:
 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.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.0.2.tgz#02be520e91571ffb10738766a981d5770989bb32"
+  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.2"
-  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  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"
-    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"
+  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"
@@ -5128,6 +6090,7 @@ postcss-load-config@^1.2.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"
@@ -5135,47 +6098,57 @@ postcss-load-options@^1.2.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.6:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-2.0.6.tgz#8c7e0055a3df1889abc6bad52dd45b2f41bbc6fc"
+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.2"
+    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.1"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.1.tgz#ff59b5dec6d586ce2cea183138f55c5876fa9cdc"
+  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.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.0.11.tgz#c5d7c8de5056a7377aea0dff2fd83f92cafb9b8a"
+  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"
@@ -5184,6 +6157,7 @@ postcss-minify-font-values@^1.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"
@@ -5191,6 +6165,7 @@ postcss-minify-gradients@^1.0.1:
 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"
@@ -5200,6 +6175,7 @@ postcss-minify-params@^1.0.4:
 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"
@@ -5207,41 +6183,47 @@ postcss-minify-selectors@^2.0.4:
     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"
+  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 "^5.0.4"
+    postcss "^6.0.1"
 
 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"
+  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.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 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"
+  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.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 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"
+  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.0.2"
-    postcss "^5.0.14"
+    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"
@@ -5249,15 +6231,17 @@ postcss-normalize-url@^3.0.7:
     postcss-value-parser "^3.2.3"
 
 postcss-ordered-values@^2.1.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.2.tgz#be8b511741fab2dac8e614a2302e9d10267b0771"
+  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.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.3.1.tgz#024e8e219f52773313408573db9645ba62d2d2fe"
+  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"
@@ -5265,20 +6249,23 @@ postcss-reduce-idents@^2.2.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:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.2.tgz#3d70f5adda130da51c7c0c2fc023f56b1374fe08"
+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"
@@ -5287,6 +6274,7 @@ postcss-selector-parser@^2.0.0:
 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"
@@ -5296,168 +6284,203 @@ postcss-svgo@^2.1.1:
 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.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+  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.4:
-  version "5.2.8"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.8.tgz#05720c49df23c79bda51fd01daeb1e9222e94390"
+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.1.2"
+    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"
+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.1.0"
-    source-map "^0.5.6"
-    supports-color "^4.2.1"
+    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.0.2"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.0.2.tgz#a7db19cbb529ca9f0af3d3a2f77d5caf8e5dec23"
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
   dependencies:
-    renderkid "~2.0.0"
-    utila "~0.4"
+    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"
 
-pretty-format@^25.1.0:
-  version "25.1.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.1.0.tgz#ed869bdaec1356fc5ae45de045e2c8ec7b07b0c8"
-  integrity sha512-46zLRSGLd02Rp+Lhad9zzuNZ+swunitn8zIpfD2B4OPCRLXbM87RJT2aBLBWYOznNUML/2l/ReMyWNC80PJBUQ==
+pretty-format@^25.5.0:
+  version "25.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.5.0.tgz#7873c1d774f682c34b8d48b6743a2bf2ac55791a"
+  integrity sha512-kbo/kq2LQ/A/is0PQwsEHM7Ca6//bGPPvU6UnsdDRSKTWxT/ru/xb88v4BJf6a69H+uTytOEsTusT9ksd/1iWQ==
   dependencies:
-    "@jest/types" "^25.1.0"
+    "@jest/types" "^25.5.0"
     ansi-regex "^5.0.0"
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
-private@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.6.tgz#55c6a976d0f9bafb9924851350fe47b9b5fbb7c1"
+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@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+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.9"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+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.0"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
+  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.1.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.1.1.tgz#489654c692616b8aa55b0724fa809bb7db49c5bf"
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
+prop-types@^15.5.10, prop-types@^15.6.0:
+  version "15.7.2"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
   dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
+    loose-envify "^1.4.0"
     object-assign "^4.1.1"
+    react-is "^16.8.1"
 
-proxy-addr@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.2.tgz#b4cc5f22610d9535824c123aef9d3cf73c40ba37"
+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.0"
-    ipaddr.js "1.1.1"
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.1"
 
-prr@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+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.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.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.0"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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, punycode@^1.4.1:
+punycode@^1.2.4:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
+  integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
-q@^1.1.2:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.4.1.tgz#55705bcd93c5f3673530c2c2cbc0c2b3addc286e"
+punycode@^2.1.0, punycode@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qs@6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.2.0.tgz#3b7848c03c2dece69a9522b0fae8c4126d745f3b"
+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.3.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.3.0.tgz#f403b264f23bc01228c74131b407f18d5ea5d442"
+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"
+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, query-string@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.2.3.tgz#9f27273d207a25a8ee4c7b8c74dcd45d556db822"
+  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"
@@ -5465,163 +6488,179 @@ query-string@^4.1.0, query-string@^4.2.3:
 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@0.0.x:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
+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==
 
-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"
+  integrity sha512-pDP/NMRAXoTfrhCfyfSEwJAKLaxBU9eApMeBPB1TkDouZmvPerIClV8lTAd+uF8ZiTaVl69e1FCxQrAd/VTjGw==
+  dependencies:
+    performance-now "^2.1.0"
 
-randomatic@^1.1.3:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
+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 "^2.0.2"
-    kind-of "^3.0.2"
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
 
-randombytes@^2.0.0, randombytes@^2.0.1:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+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"
 
-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"
+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"
 
-rc@^1.0.1, rc@^1.1.6, rc@^1.1.7:
+range-parser@^1.0.3, range-parser@~1.2.1:
   version "1.2.1"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+  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:
-    deep-extend "~0.4.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
+    bytes "3.1.0"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
+    unpipe "1.0.0"
 
-rc@~1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.1.6.tgz#43651b76b6ae53b5c802f1151fa3fc3b059969c9"
+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.4.0"
+    deep-extend "^0.6.0"
     ini "~1.3.0"
     minimist "^1.2.0"
-    strip-json-comments "~1.0.4"
+    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"
+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.2"
-    anser "1.4.1"
-    babel-code-frame "6.22.0"
+    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"
+    detect-port-alt "1.1.6"
     escape-string-regexp "1.0.5"
-    filesize "3.5.10"
+    filesize "3.5.11"
     global-modules "1.0.0"
     gzip-size "3.0.0"
-    html-entities "1.2.1"
-    inquirer "3.2.1"
+    inquirer "3.3.0"
     is-root "1.0.0"
-    opn "5.1.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.4"
+    sockjs-client "1.1.5"
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
 react-dom@^15.4.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.4.1.tgz#d54c913261aaedb17adc20410d029dcc18a1344a"
+  version "15.7.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.7.0.tgz#39106dee996d0742fb0f43d567ef8b8153483ab2"
+  integrity sha512-mpjXqC2t1FuYsILOLCj0kg6pbg460byZkVA/80VtDmKU/pYmoTdHOtaMcTRIDiyXLz4sIur0cQ04nOC6iGndJg==
   dependencies:
-    fbjs "^0.8.1"
+    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-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.12.0:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
-  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
+react-is@^16.12.0, 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-scripts@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.0.11.tgz#483d49e27f417ec981ae415a4456120a2a2bc8c1"
+  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.2"
-    babel-core "6.25.0"
+    autoprefixer "7.1.6"
+    babel-core "6.26.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"
+    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.4"
+    css-loader "0.28.7"
     dotenv "4.0.0"
-    eslint "4.4.1"
-    eslint-config-react-app "^2.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.35.0"
-    eslint-plugin-import "2.7.0"
+    eslint-plugin-flowtype "2.39.1"
+    eslint-plugin-import "2.8.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"
+    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.6"
+    postcss-loader "2.0.8"
     promise "8.0.1"
-    react-dev-utils "^3.1.0"
-    react-error-overlay "^1.0.10"
-    style-loader "0.18.2"
+    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.5.9"
-    webpack "3.5.1"
-    webpack-dev-server "2.7.1"
-    webpack-manifest-plugin "1.2.1"
+    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.2"
+    fsevents "^1.1.3"
 
 react@^15.4.1:
-  version "15.4.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-15.4.1.tgz#498e918602677a3983cd0fd206dfe700389a0dd6"
+  version "15.7.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-15.7.0.tgz#10308fd42ac6912a250bf00380751abc41ac7106"
+  integrity sha512-5/MMRYmpmM0sMTHGLossnJCrmXQIiJilD6y3YN3TzAwGFj6zdnMtFv6xmi65PHKRV+pehIHpT7oy67Sr6s9AHA==
   dependencies:
-    fbjs "^0.8.4"
+    create-react-class "^15.6.0"
+    fbjs "^0.8.9"
     loose-envify "^1.1.0"
     object-assign "^4.1.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"
+    prop-types "^15.5.10"
 
 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"
@@ -5629,6 +6668,7 @@ read-pkg-up@^1.0.1:
 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"
@@ -5636,6 +6676,7 @@ read-pkg-up@^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"
@@ -5644,74 +6685,61 @@ read-pkg@^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@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.1.4, readable-stream@^2.2.9:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+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 "~1.0.6"
+    process-nextick-args "~2.0.0"
     safe-buffer "~5.1.1"
-    string_decoder "~1.0.3"
+    string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-"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"
+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:
-    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"
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    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"
+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:
-    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"
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
+    readable-stream "^2.0.2"
 
-readdirp@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+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:
-    graceful-fs "^4.1.2"
-    minimatch "^3.0.2"
-    readable-stream "^2.0.2"
-    set-immediate-shim "^1.0.1"
+    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"
@@ -5719,59 +6747,74 @@ redent@^1.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.2"
-  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+  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 "^0.4.2"
+    balanced-match "^1.0.0"
 
 regenerate@^1.2.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
+  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.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.1.tgz#257f41961ce44558b18f7814af48c17559f9faeb"
+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.11:
-  version "0.9.11"
-  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.9.11.tgz#3a7d067520cb7b7176769eb5ff868691befe1283"
+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.3"
-  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  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"
-    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"
+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:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
+    extend-shallow "^3.0.2"
+    safe-regex "^1.1.0"
+
+regexp.prototype.flags@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
+  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+  dependencies:
+    define-properties "^1.1.3"
+    es-abstract "^1.17.0-next.1"
 
 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.3.1"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  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"
@@ -5779,125 +6822,125 @@ registry-auth-token@^3.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=
 
-renderkid@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.0.tgz#1859753e7a5adbf35443aba0d4e4579e78abee85"
+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.4"
+  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.4.tgz#d325e532afb28d3f8796ffee306be8ffd6fc864c"
+  integrity sha512-K2eXrSOJdq+HuKzlcjOlGoOarUu5SDguDEhE7+Ah4zuOWL40j8A/oHvLlLob9PSTNvVnBd+/q0Er1QfpEuem5g==
   dependencies:
     css-select "^1.1.0"
-    dom-converter "~0.1"
-    htmlparser2 "~3.3.0"
+    dom-converter "^0.2"
+    htmlparser2 "^3.3.0"
+    lodash "^4.17.20"
     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"
+  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.5.2:
+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.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"
-
-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"
+  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.5"
-    extend "~3.0.0"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
     forever-agent "~0.6.1"
-    form-data "~2.1.1"
-    har-validator "~4.2.1"
-    hawk "~3.1.3"
-    http-signature "~1.1.0"
+    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.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"
+    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.0.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.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"
+  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"
@@ -5905,76 +6948,123 @@ resolve-dir@^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.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.2.0.tgz#9589c3f2f6149d1417a40becc1663db6ec6bc26c"
-
-resolve@^1.3.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.4.0.tgz#a75be01c53da25d934a98ebd0e4c4a7312f92a86"
+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.19.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
+  integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
+  dependencies:
+    is-core-module "^2.1.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, rimraf@^2.2.8, rimraf@~2.5.1, rimraf@~2.5.4:
-  version "2.5.4"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.5.4.tgz#96800093cbf1a0c86bd95b4625467535c29dfa04"
+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.0.5"
+    glob "^7.1.3"
 
-rimraf@^2.5.1, rimraf@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+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.0.5"
+    glob "^7.1.3"
 
 ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
   dependencies:
-    hash-base "^2.0.0"
+    hash-base "^3.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"
+  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.0.1, safe-buffer@^5.1.0, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
+safe-buffer@5.1.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.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"
@@ -5985,160 +7075,204 @@ sane@~1.6.0:
     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"
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
 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.1"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  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.6.33"
+    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.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"
-
-semver@^5.0.3:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
-
-semver@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+"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.14.1:
-  version "0.14.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"
+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.2.0"
-    depd "~1.1.0"
+    debug "2.6.9"
+    depd "~1.1.2"
     destroy "~1.0.4"
-    encodeurl "~1.0.1"
+    encodeurl "~1.0.2"
     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"
+    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.0"
-    statuses "~1.3.0"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
 
 serve-index@^1.7.2:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
+  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.3"
-    batch "0.5.3"
-    debug "~2.2.0"
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
     escape-html "~1.0.3"
-    http-errors "~1.5.0"
-    mime-types "~2.1.11"
-    parseurl "~1.3.1"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
 
-serve-static@~1.11.1:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.11.1.tgz#d6cce7693505f733c759de57befc1af76c0f0805"
+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.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    parseurl "~1.3.1"
-    send "0.14.1"
+    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, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-immediate-shim@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+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.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
+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==
 
-settle-promise@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/settle-promise/-/settle-promise-1.0.0.tgz#697adb58b821f387ce2757c06efc9de5f0ee33d8"
+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.8"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.8.tgz#37068c2c476b6baf402d14a49c67f597921f634f"
+  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.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.0.tgz#66afd47b6a12932d9071cbfd98a52e785cd0ba14"
+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.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  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"
+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"
 
-slide@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+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"
 
-sntp@1.x.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+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:
-    hoek "2.x.x"
+    kind-of "^3.2.0"
 
-sockjs-client@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+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"
@@ -6147,65 +7281,89 @@ sockjs-client@1.1.4:
     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"
+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 "^2.0.2"
+    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@^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"
+  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-support@^0.4.2:
-  version "0.4.8"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.8.tgz#4871918d8a3af07289182e974e32844327b2e98b"
+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:
-    source-map "^0.5.3"
+    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@0.5.6, 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.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+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.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.1:
+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.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+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:
-    amdefine ">=0.0.4"
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
 
-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-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@~1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz#9bdf2f20e1f40ed447fbe273266191fced51626c"
+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@^1.0.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57"
+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.0.20"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
+  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"
@@ -6218,6 +7376,7 @@ spdy-transport@^2.0.18:
 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"
@@ -6226,174 +7385,217 @@ spdy@^3.4.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.10.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0"
+  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"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-  optionalDependencies:
     bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
     ecc-jsbn "~0.1.1"
-    jodid25519 "^1.0.0"
+    getpass "^0.1.1"
     jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
     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"
+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.1"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  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.3.1:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.5.0.tgz#585eee513217ed98fe199817e7313b6f772a6802"
+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 "^2.0.0"
+    builtin-status-codes "^3.0.0"
     inherits "^2.0.1"
-    readable-stream "^2.1.0"
+    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:
-  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-width@^2.1.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_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.prototype.trimend@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz#a22bd53cca5c7cf44d7c9d5c732118873d6cd18b"
+  integrity sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==
+  dependencies:
+    call-bind "^1.0.0"
+    define-properties "^1.1.3"
 
-string_decoder@~1.0.3:
+string.prototype.trimstart@^1.0.1:
   version "1.0.3"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.0.3.tgz#0fc67d7c141825de94282dd536bec6b9bce860ab"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz#9b4cb590e123bb36564401d59824298de50fd5aa"
+  integrity sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==
   dependencies:
-    safe-buffer "~5.1.0"
+    call-bind "^1.0.0"
+    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"
 
-stringstream@~0.0.4:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+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@~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"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
-style-loader@0.18.2:
-  version "0.18.2"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.18.2.tgz#cc31459afbcd6d80b7220ee54b291a9fd66ff5eb"
+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@^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"
+  integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^3.1.1, supports-color@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5"
+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.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"
+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"
+
 supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  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"
 
 svgo@^0.7.0:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.1.tgz#287320fed972cb097e72c2bb1685f96fe08f8034"
+  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.2.1"
-    js-yaml "~3.6.1"
+    csso "~2.3.1"
+    js-yaml "~3.7.0"
     mkdirp "~0.5.1"
     sax "~1.2.1"
     whet.extend "~0.9.9"
@@ -6401,14 +7603,16 @@ svgo@^0.7.0:
 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.0"
-  resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.0.tgz#eb6225ce580ceaae148194578a0ad01ab7ea199c"
+  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"
@@ -6419,71 +7623,49 @@ sw-precache@^5.1.1:
     mkdirp "^0.5.1"
     pretty-bytes "^4.0.2"
     sw-toolbox "^3.4.0"
-    update-notifier "^1.0.3"
+    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.2"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
 table@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-4.0.1.tgz#a8116c133fac2c61f4a420ab6cdf5c4d61f0e435"
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
+  integrity sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==
   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"
+    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.8"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.8.tgz#99372a5c999bf2df160afc0d74bed4f47948cd22"
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.9.tgz#af2d8bbc9b04f74ee17af2b4d9048f807acd18a8"
+  integrity sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A==
 
-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-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, tar@~2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.1.tgz#8e4d2a256c0e2185c6b18ad694aec968b83cb1d1"
+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:
-    block-stream "*"
-    fstream "^1.0.2"
-    inherits "2"
+    execa "^0.7.0"
 
-test-exclude@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
+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"
@@ -6494,381 +7676,523 @@ test-exclude@^4.1.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.0.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-3.0.0.tgz#e7c64c867cbb3845f10877642f7b60055b8ec0d6"
+  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=
 
-thunky@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
+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.0.0"
-  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.2.0.tgz#917e0a66905688790ec7bbbde04046259af83f57"
+  integrity sha512-zxke8goJQpBeEgD82CXABeMh0LSJcj7CXEd0OHOg45HgcofF7pxNwZm9+RknpxpDhwN4gFpySkApKfFYfRQnUA==
 
-timed-out@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
+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.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+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.31:
-  version "0.0.31"
-  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.31.tgz#8f38ab9438e17315e5dbd8b3657e8bfb277ae4a7"
+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.1"
+    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.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+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=
 
-toposort@^1.0.0:
+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/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef"
+  resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
+  integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-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"
+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:
-    punycode "^1.4.1"
+    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"
-
-tryit@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+  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"
 
-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"
+  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.13:
-  version "1.6.14"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.14.tgz#e219639c17ded1ca0789092dd54a03826b817cb2"
+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.13"
+    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.1.0"
+  resolved "https://registry.yarnpkg.com/type/-/type-2.1.0.tgz#9bdc22c648cf8cf86dd23d32336a41cfb6475e3f"
+  integrity sha512-G9absDWvhAWCV2gmF1zKud3OyC61nZDwWvBL2DApaVFogI07CprggiQAOOjvp2NRjYWFzPyu7vwtDrQFq8jeSA==
 
 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.9:
-  version "0.7.12"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
+ua-parser-js@^0.7.18:
+  version "0.7.23"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.23.tgz#704d67f951e13195fbcd3d78818577f5bc1d547b"
+  integrity sha512-m4hvMLxgGHXG3O3fQVAyyAQpZzDOvwnhOTjYz5Xmr7r/+LpkNy3vJXdVRWgd1TkAb7NGROZuSy96CrlNVjA7KA==
 
-uglify-js@3.0.x, uglify-js@^3.0.13:
-  version "3.0.27"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.0.27.tgz#a97db8c8ba6b9dba4e2f88d86aa9548fa6320034"
+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.11.0"
-    source-map "~0.5.1"
+    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.1.4:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.7.3.tgz#f918fce9182f466d5140f24bb0ff35c2d32dcc6a"
-  integrity sha512-7tINm46/3puUA4hCkKYo4Xdts+JDaVC9ZPRcG8Xw9R4nhO/gZgUM3TENq8IF4Vatk8qCig4MzP/c8G4u2BkVQg==
-  dependencies:
-    commander "~2.20.3"
-    source-map "~0.6.1"
+uglify-js@^3.0.13, uglify-js@^3.1.4:
+  version "3.12.1"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.12.1.tgz#78307f539f7b9ca5557babb186ea78ad30cc0375"
+  integrity sha512-o8lHP20KjIiQe5b/67Rh68xEGRrc2SRsCuuoYclXXoC74AfSRGblU1HKzJWH3HxPZ+Ort85fWHpSX7KwBUC9CQ==
 
 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"
 
-uid-number@^0.0.6, uid-number@~0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+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"
-
-uniqid@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/uniqid/-/uniqid-4.1.0.tgz#33d9679f65022f48988a03fd24e7dcaf8f109eca"
-  dependencies:
-    macaddress "^0.2.8"
+  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"
 
 universalify@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+  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, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
+  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unzip-response@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
+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"
 
-update-notifier@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"
+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 "^0.6.0"
-    chalk "^1.0.0"
-    configstore "^2.0.0"
+    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 "^2.0.0"
-    lazy-req "^1.1.0"
+    latest-version "^3.0.0"
     semver-diff "^2.0.0"
-    xdg-basedir "^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.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.18.12"
-  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.18.12.tgz#f04d91e1fabb29c16fc842f9a14ee8ddc3fda64e"
+  version "1.19.2"
+  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.2.tgz#f9be09f00c4c5134b7cb3cf475c1dd394526265a"
+  integrity sha512-s/UIq9ap4JPZ7H1EB5ULo/aOUbWqfDi7FKzMC2Nz+0Si8GiT1rIEaprt8hy3Vy2Ex2aJPpOQv4P4DuOZ+K1c6w==
+
+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.9:
-  version "0.5.9"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-0.5.9.tgz#cc8fea82c7b906e7777019250869e569e995c295"
+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.3.x"
+    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.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"
+url-parse@^1.1.8, url-parse@^1.4.3:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.7.tgz#a8a83535e8c00a316e403a5db4ac1b9b853ae278"
+  integrity sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==
   dependencies:
-    querystringify "~1.0.0"
-    requires-port "1.0.x"
+    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"
 
-util-deprecate@~1.0.1:
+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, util@^0.10.3:
+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"
 
-utila@~0.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+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.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"
+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:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+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.1"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  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 "~1.0.0"
-    spdx-expression-parse "~1.0.0"
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
 
-vary@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.0.tgz#e1e5affbbd16ae768dd2674394b9ad3022653140"
+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.1"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
-verror@1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+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:
-    extsprintf "1.0.2"
+    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"
+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.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
-    async "^2.1.2"
-    chokidar "^1.7.0"
     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.2"
-  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
+  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.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
+  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.11.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.0.tgz#d34efefb2edda7e1d3b5dbe07289513219651709"
+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.3.4"
+    mime "^1.5.0"
     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"
+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 "^1.6.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.13.3"
+    express "^4.16.2"
     html-entities "^1.2.0"
     http-proxy-middleware "~0.17.4"
-    internal-ip "^1.2.0"
+    import-local "^1.0.0"
+    internal-ip "1.2.0"
     ip "^1.1.5"
+    killable "^1.0.0"
     loglevel "^1.4.1"
-    opn "4.0.2"
+    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"
+    sockjs "0.3.19"
+    sockjs-client "1.1.5"
     spdy "^3.4.1"
     strip-ansi "^3.0.0"
-    supports-color "^3.1.1"
-    webpack-dev-middleware "^1.11.0"
-    yargs "^6.0.0"
+    supports-color "^5.1.0"
+    webpack-dev-middleware "1.12.2"
+    yargs "6.6.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"
+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.0.1"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.0.1.tgz#c7356436a4d13123be2e2426a05d1dad9cbe65cf"
+  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.5.3"
+    source-map "~0.6.1"
 
-webpack@3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.1.tgz#b749ee3d2b5a118dad53e8e41585b3f71e75499a"
+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"
@@ -6894,32 +8218,40 @@ webpack@3.5.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"
+  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.1"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
+  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.1"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"
+  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.13"
+    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 "1.0.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-1.0.0.tgz#01c2ac4df40e236aaa18480e3be74bd5c8eb798e"
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
+  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
 
 whatwg-url@^4.3.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.7.0.tgz#202035ac1955b087cdd20fa8b58ded3ab1cd2af5"
+  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"
@@ -6927,66 +8259,63 @@ whatwg-url@^4.3.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-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:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+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"
 
-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"
-
-widest-line@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-1.0.0.tgz#0c09c85c2a94683d0d7eaf8ee097d564bf0e105c"
+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 "^1.0.1"
+    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@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
-
-wordwrap@~1.0.0:
+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.3.1"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.3.1.tgz#4333112bb49b17aa050b87895ca6b2cacf40e5ff"
+  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.1 <0.2.0-0"
-    xtend ">=4.0.0 <4.1.0-0"
+    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"
@@ -6994,68 +8323,75 @@ wrap-ansi@^2.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@^1.1.2:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
+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"
-    slide "^1.1.5"
+    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"
 
-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"
+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 <4.1.0-0", xtend@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+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.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  integrity sha1-bRX7qITAhnnA136I53WegR4H+kE=
 
-yallist@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.0.0.tgz#306c543835f09ee1a4cb23b7bce9ab341c91cdd4"
+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"
+yargs-parser@5.0.0-security.0:
+  version "5.0.0-security.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0-security.0.tgz#4ff7271d25f90ac15643b86076a2ab499ec9ee24"
+  integrity sha512-T69y4Ps64LNesYxeYGYPvfoMTt/7y1XtfpIslUeK4um+9Hu7hlGoRtaDLvdXb7+/tfq4opVa2HRY5xGip022rQ==
   dependencies:
     camelcase "^3.0.0"
+    object.assign "^4.1.0"
 
-yargs-parser@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+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@^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.0.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"
@@ -7072,8 +8408,9 @@ yargs@^6.0.0:
     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"
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.1.tgz#67f0ef52e228d4ee0d6311acede8850f53464df6"
+  integrity sha512-huO4Fr1f9PmiJJdll5kwoS2e4GqzGSsMT3PPMpOwoVkOK8ckqAewMTZyA6LXVQWflleb/Z8oPBEvNsMft0XE+g==
   dependencies:
     camelcase "^3.0.0"
     cliui "^3.2.0"
@@ -7087,11 +8424,12 @@ yargs@^7.0.2:
     string-width "^1.0.2"
     which-module "^1.0.0"
     y18n "^3.2.1"
-    yargs-parser "^5.0.0"
+    yargs-parser "5.0.0-security.0"
 
 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"
@@ -7110,6 +8448,7 @@ yargs@^8.0.2:
 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"
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f1c2fb4cb2aa..3c189a73dd76 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -3169,13 +3169,21 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
 
       if (hasCaughtError()) {
         const replayError = clearCaughtError();
-        // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
-        // Rethrow this error instead of the original one.
-        throw replayError;
-      } else {
-        // This branch is reachable if the render phase is impure.
-        throw originalError;
+        if (
+          typeof replayError === 'object' &&
+          replayError !== null &&
+          replayError._suppressLogging &&
+          typeof originalError === 'object' &&
+          originalError !== null &&
+          !originalError._suppressLogging
+        ) {
+          // If suppressed, let the flag carry over to the original error which is the one we'll rethrow.
+          originalError._suppressLogging = true;
+        }
       }
+      // We always throw the original error in case the second render pass is not idempotent.
+      // This can happen if a memoized function or CommonJS module doesn't throw after first invokation.
+      throw originalError;
     }
   };
 } else {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 9205d23c143b..220b1598a10d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -3228,13 +3228,21 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
 
       if (hasCaughtError()) {
         const replayError = clearCaughtError();
-        // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
-        // Rethrow this error instead of the original one.
-        throw replayError;
-      } else {
-        // This branch is reachable if the render phase is impure.
-        throw originalError;
+        if (
+          typeof replayError === 'object' &&
+          replayError !== null &&
+          replayError._suppressLogging &&
+          typeof originalError === 'object' &&
+          originalError !== null &&
+          !originalError._suppressLogging
+        ) {
+          // If suppressed, let the flag carry over to the original error which is the one we'll rethrow.
+          originalError._suppressLogging = true;
+        }
       }
+      // We always throw the original error in case the second render pass is not idempotent.
+      // This can happen if a memoized function or CommonJS module doesn't throw after first invokation.
+      throw originalError;
     }
   };
 } else {

From 3f9205c3331b80f13a0376826d1ef859786c086b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 11 Dec 2020 10:38:49 -0600
Subject: [PATCH 0144/1603] Regression test: SuspenseList causes lost unmount
 (#20433)

@sebmarkbage reminded me that the complete phase of SuspenseList
will sometimes enter the begin phase of the children without calling
`createWorkInProgress` again, instead calling `resetWorkInProgress`.

This was raised in the context of considering whether #20398 might
have accidentally caused a SuspenseList bug. (I did look at this code
at the time, but considering how complicated SuspenseList is it's not
hard to imagine that I made a mistake.)

Anyway, I think that PR is fine; however, reviewing it again did lead me
to find a different bug. This new bug is actually a variant of the bug
fixed by #20398.

`resetWorkInProgress` clears a fiber's static flags. That's wrong, since
static flags -- like PassiveStatic -- are meant to last the lifetime of
the component.

In more practical terms, what happens is that if a direct child of
SuspenseList contains a `useEffect`, then SuspenseList will cause the
child to "forget" that it contains passive effects. When the child
is deleted, its unmount effects are not fired :O

This is the second of this type of bug I've found, which indicates to me
that it's too easy to accidentally clear static flags.

Maybe we should only update the `flags` field using helper functions,
like we do with `lanes`.

Or perhaps we add an internal warning somewhere that detects when a
fiber has different static flags than its alternate.
---
 .../ReactHooksWithNoopRenderer-test.js        | 56 +++++++++++++++++++
 1 file changed, 56 insertions(+)

diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 43ec803f1155..8d006b2f300b 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -3416,4 +3416,60 @@ describe('ReactHooksWithNoopRenderer', () => {
       'Unmount A',
     ]);
   });
+
+  // @gate experimental
+  it('regression: SuspenseList causes unmounts to be dropped on deletion', async () => {
+    const SuspenseList = React.unstable_SuspenseList;
+
+    function Row({label}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Mount ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Mount A',
+      'Mount B',
+    ]);
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Promise resolved [A]',
+      'A',
+      'Suspend! [B]',
+    ]);
+
+    await ReactNoop.act(async () => {
+      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.
+    expect(Scheduler).toHaveYielded(['Unmount A', 'Unmount B']);
+  });
 });

From daf38ecdfcda32a1050231fcc6dea364f8b102e3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 11 Dec 2020 22:45:18 +0000
Subject: [PATCH 0145/1603] [Flight] Use lazy reference for existing modules
 (#20445)

---
 packages/react-server/src/ReactFlightServer.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 8a6ee64d4d8d..d6717a083076 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -435,6 +435,14 @@ export function resolveModelToJSON(
       const writtenModules = request.writtenModules;
       const existingId = writtenModules.get(moduleKey);
       if (existingId !== undefined) {
+        if (parent[0] === REACT_ELEMENT_TYPE && key === '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 serializeByRefID(existingId);
+        }
         return serializeByValueID(existingId);
       }
       try {

From 0f80dd1484ce546076c7936329610e7854ef6dff Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Sun, 13 Dec 2020 17:44:59 +0000
Subject: [PATCH 0146/1603] [Flight] Support concatenated modules in Webpack
 plugin (#20449)

* Extract recordModule

* Add support for concatenated modules
---
 .../src/ReactFlightWebpackPlugin.js           | 45 ++++++++++++-------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index a1957692b7e7..eb8c489d394d 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -172,25 +172,36 @@ export default class ReactFlightWebpackPlugin {
       const json = {};
       compilation.chunkGroups.forEach(chunkGroup => {
         const chunkIds = chunkGroup.chunks.map(c => c.id);
+
+        function recordModule(id, mod) {
+          // 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 (!/\.client\.js$/.test(mod.resource)) {
+            return;
+          }
+          const moduleExports = {};
+          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
+            moduleExports[name] = {
+              id: id,
+              chunks: chunkIds,
+              name: name,
+            };
+          });
+          const href = pathToFileURL(mod.resource).href;
+          if (href !== undefined) {
+            json[href] = moduleExports;
+          }
+        }
+
         chunkGroup.chunks.forEach(chunk => {
           chunk.getModules().forEach(mod => {
-            // 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 (!/\.client\.js$/.test(mod.resource)) {
-              return;
-            }
-            const moduleExports = {};
-            ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
-              moduleExports[name] = {
-                id: mod.id,
-                chunks: chunkIds,
-                name: name,
-              };
-            });
-            const href = pathToFileURL(mod.resource).href;
-            if (href !== undefined) {
-              json[href] = moduleExports;
+            recordModule(mod.id, mod);
+            // If this is a concatenation, register each child to the parent ID.
+            if (mod.modules) {
+              mod.modules.forEach(concatenatedMod => {
+                recordModule(mod.id, concatenatedMod);
+              });
             }
           });
         });

From 070372cde2d8b344a96ec63c92b5dcbec863073f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 14 Dec 2020 15:50:20 +0000
Subject: [PATCH 0147/1603] [Flight] Fix webpack watch mode issue (#20457)

---
 .../src/ReactFlightWebpackPlugin.js           | 96 +++++++++----------
 1 file changed, 47 insertions(+), 49 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index eb8c489d394d..ecdd66ed82c6 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -95,6 +95,7 @@ export default class ReactFlightWebpackPlugin {
   }
 
   apply(compiler: any) {
+    let resolvedClientReferences;
     const run = (params, callback) => {
       // First we need to find all client files on the file system. We do this early so
       // that we have them synchronously available later when we need them. This might
@@ -107,59 +108,12 @@ export default class ReactFlightWebpackPlugin {
         contextResolver,
         compiler.inputFileSystem,
         compiler.createContextModuleFactory(),
-        (err, resolvedClientReferences) => {
+        (err, resolvedClientRefs) => {
           if (err) {
             callback(err);
             return;
           }
-          compiler.hooks.compilation.tap(
-            PLUGIN_NAME,
-            (compilation, {normalModuleFactory}) => {
-              compilation.dependencyFactories.set(
-                ClientReferenceDependency,
-                normalModuleFactory,
-              );
-              compilation.dependencyTemplates.set(
-                ClientReferenceDependency,
-                new NullDependency.Template(),
-              );
-
-              compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
-                // 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.
-                // TODO: Warn if we don't find this file anywhere in the compilation.
-                if (module.resource !== clientFileName) {
-                  return;
-                }
-                if (resolvedClientReferences) {
-                  for (let i = 0; i < resolvedClientReferences.length; i++) {
-                    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,
-                      },
-                      module,
-                      null,
-                      dep.require,
-                    );
-                    block.addDependency(dep);
-                    module.addBlock(block);
-                  }
-                }
-              });
-            },
-          );
-
+          resolvedClientReferences = resolvedClientRefs;
           callback();
         },
       );
@@ -167,6 +121,50 @@ export default class ReactFlightWebpackPlugin {
 
     compiler.hooks.run.tapAsync(PLUGIN_NAME, run);
     compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);
+    compiler.hooks.compilation.tap(
+      PLUGIN_NAME,
+      (compilation, {normalModuleFactory}) => {
+        compilation.dependencyFactories.set(
+          ClientReferenceDependency,
+          normalModuleFactory,
+        );
+        compilation.dependencyTemplates.set(
+          ClientReferenceDependency,
+          new NullDependency.Template(),
+        );
+
+        compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
+          // 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.
+          // TODO: Warn if we don't find this file anywhere in the compilation.
+          if (module.resource !== clientFileName) {
+            return;
+          }
+          if (resolvedClientReferences) {
+            for (let i = 0; i < resolvedClientReferences.length; i++) {
+              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,
+                },
+                module,
+                null,
+                dep.require,
+              );
+              block.addDependency(dep);
+              module.addBlock(block);
+            }
+          }
+        });
+      },
+    );
 
     compiler.hooks.emit.tap(PLUGIN_NAME, compilation => {
       const json = {};

From 604bbcd87d6df2cf8554ae410776ff61b0795210 Mon Sep 17 00:00:00 2001
From: Oliver Lassen <TryingToImprove@users.noreply.github.com>
Date: Mon, 14 Dec 2020 22:23:26 +0100
Subject: [PATCH 0148/1603] [devtools] Increase the clickable area of the prop
 value (#20428)

---
 .../src/devtools/views/Components/KeyValue.css                   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index e7a822b535a0..4add9729d833 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -24,6 +24,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   cursor: default;
+  flex: 1;
 }
 
 .None {

From 4e62fd2712fc279cc01a65a73ac7e7866489c654 Mon Sep 17 00:00:00 2001
From: Luna Ruan <luna@fb.com>
Date: Tue, 15 Dec 2020 15:33:54 -0800
Subject: [PATCH 0149/1603] clone json obj in relay flight client host config
 parser (#20465)

When `parseModel` suspends because of missing dependencies, it will exit and retry to parse later. However, in the relay implementation, the model is an object that we modify in place when we parse it, so when we we retry, part of the model might be parsed already into React elements, which will error because the parsing code expect a Flight model. This diff clones instead of mutating the original model, which fixes this error.
---
 .../src/ReactFlightDOMRelayClientHostConfig.js      | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
index f81644378170..09dd7df1d553 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -36,18 +36,25 @@ function parseModelRecursively(response: Response, parentObj, value) {
   }
   if (typeof value === 'object' && value !== null) {
     if (Array.isArray(value)) {
+      const parsedValue = [];
       for (let i = 0; i < value.length; i++) {
-        (value: any)[i] = parseModelRecursively(response, value, value[i]);
+        (parsedValue: any)[i] = parseModelRecursively(
+          response,
+          value,
+          value[i],
+        );
       }
-      return parseModelTuple(response, value);
+      return parseModelTuple(response, parsedValue);
     } else {
+      const parsedValue = {};
       for (const innerKey in value) {
-        (value: any)[innerKey] = parseModelRecursively(
+        (parsedValue: any)[innerKey] = parseModelRecursively(
           response,
           value,
           value[innerKey],
         );
       }
+      return parsedValue;
     }
   }
   return value;

From 9f338e5d7787cbef326082278ddfa06ca0d65393 Mon Sep 17 00:00:00 2001
From: Luna Ruan <luna@fb.com>
Date: Wed, 16 Dec 2020 11:53:51 -0800
Subject: [PATCH 0150/1603] clone json obj in react native flight client host
 config parser (#20474)

As per Seb's comment in #20465, we need to do the same thing in React Native as we do in Relay.

When `parseModel` suspends because of missing dependencies, it will exit and retry to parse later. However, in the relay implementation, the model is an object that we modify in place when we parse it, so when we we retry, part of the model might be parsed already into React elements, which will error because the parsing code expect a Flight model. This diff clones instead of mutating the original model, which fixes this error.
---
 .../src/ReactFlightNativeRelayClientHostConfig.js   | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
index b13d18b3c409..7ff02159bb7e 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
@@ -36,18 +36,25 @@ function parseModelRecursively(response: Response, parentObj, value) {
   }
   if (typeof value === 'object' && value !== null) {
     if (Array.isArray(value)) {
+      const parsedValue = [];
       for (let i = 0; i < value.length; i++) {
-        (value: any)[i] = parseModelRecursively(response, value, value[i]);
+        (parsedValue: any)[i] = parseModelRecursively(
+          response,
+          value,
+          value[i],
+        );
       }
-      return parseModelTuple(response, value);
+      return parseModelTuple(response, parsedValue);
     } else {
+      const parsedValue = {};
       for (const innerKey in value) {
-        (value: any)[innerKey] = parseModelRecursively(
+        (parsedValue: any)[innerKey] = parseModelRecursively(
           response,
           value,
           value[innerKey],
         );
       }
+      return parsedValue;
     }
   }
   return value;

From 5687864eb77f2a43eefa1681f2d097490832f002 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 17 Dec 2020 17:17:23 -0500
Subject: [PATCH 0151/1603] Add back disableSchedulerTimeoutInWorkLoop flag
 (#20482)

* Add back enableSchedulerTimeoutInWorkLoop flag

* Nvm, keep it as disableSchedulerTimeoutInWorkLoop
---
 .../src/ReactFiberWorkLoop.new.js                 | 15 ++++++++++++++-
 .../src/ReactFiberWorkLoop.old.js                 | 15 ++++++++++++++-
 packages/shared/ReactFeatureFlags.js              |  2 ++
 .../shared/forks/ReactFeatureFlags.native-fb.js   |  1 +
 .../shared/forks/ReactFeatureFlags.native-oss.js  |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js      |  1 +
 .../ReactFeatureFlags.test-renderer.native.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.www.js  |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js     |  1 +
 .../shared/forks/ReactFeatureFlags.testing.www.js |  1 +
 .../shared/forks/ReactFeatureFlags.www-dynamic.js |  1 +
 packages/shared/forks/ReactFeatureFlags.www.js    |  1 +
 12 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 3c189a73dd76..e8d097e9ef56 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -31,6 +31,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableScopeAPI,
+  disableSchedulerTimeoutInWorkLoop,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -767,7 +768,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
 // This is the entry point for every concurrent task, i.e. anything that
 // goes through Scheduler.
-function performConcurrentWorkOnRoot(root) {
+function performConcurrentWorkOnRoot(root, didTimeout) {
   if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
     resetNestedUpdateFlag();
   }
@@ -811,6 +812,18 @@ function performConcurrentWorkOnRoot(root) {
     return null;
   }
 
+  // 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.
+  if (!disableSchedulerTimeoutInWorkLoop && didTimeout) {
+    // Something expired. Flush synchronously until there's no expired
+    // work left.
+    markRootExpired(root, lanes);
+    // This will schedule a synchronous callback.
+    ensureRootIsScheduled(root, now());
+    return null;
+  }
+
   let exitStatus = renderRootConcurrent(root, lanes);
 
   if (
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 220b1598a10d..331fe20ee10a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -33,6 +33,7 @@ import {
   enableSchedulingProfiler,
   enableScopeAPI,
   enableDoubleInvokingEffects,
+  disableSchedulerTimeoutInWorkLoop,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -775,7 +776,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
 // This is the entry point for every concurrent task, i.e. anything that
 // goes through Scheduler.
-function performConcurrentWorkOnRoot(root) {
+function performConcurrentWorkOnRoot(root, didTimeout) {
   if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
     resetNestedUpdateFlag();
   }
@@ -819,6 +820,18 @@ function performConcurrentWorkOnRoot(root) {
     return null;
   }
 
+  // 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.
+  if (!disableSchedulerTimeoutInWorkLoop && didTimeout) {
+    // Something expired. Flush synchronously until there's no expired
+    // work left.
+    markRootExpired(root, lanes);
+    // This will schedule a synchronous callback.
+    ensureRootIsScheduled(root, now());
+    return null;
+  }
+
   let exitStatus = renderRootConcurrent(root, lanes);
 
   if (
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 519ea5015d7d..c3ffb65e96ff 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -141,3 +141,5 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+
+export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 32b1e3d45d0a..23c926c65a3f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -56,6 +56,7 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 701cfd745fe3..3ed2d7701c93 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -55,6 +55,7 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index fb16a242199d..16e488409e0c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -55,6 +55,7 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index c9e64734268a..84ea8902f60c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -55,6 +55,7 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 546784ff88ed..eb1630fc49bd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -55,6 +55,7 @@ export const enableDoubleInvokingEffects = true;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 1d028ee23ca4..87133385439f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -55,6 +55,7 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index ed3c033e99ff..671f44be0295 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -55,6 +55,7 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
+export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index ad4ff2bab765..cf0ca5ae5439 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -53,3 +53,4 @@ export const enableDoubleInvokingEffects = false;
 export const enableUseRefAccessWarning = __VARIANT__;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
+export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 8db205e18436..8b2bda551339 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -29,6 +29,7 @@ export const {
   enableDoubleInvokingEffects,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
+  disableSchedulerTimeoutInWorkLoop,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From ff17fc176f959bda67a6c1d8e7d294c4852f9546 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 7 Dec 2020 15:30:31 -0600
Subject: [PATCH 0152/1603] Don't clear other flags when adding Deletion

Same as #20398 but for Deletions. There's no new regression test, but in
the effects refactor, existing tests will fail without this.
---
 .../src/ReactChildFiber.new.js                |   9 +-
 .../src/ReactChildFiber.old.js                |   9 +-
 .../src/ReactFiberBeginWork.new.js            |   5 +-
 .../src/ReactFiberBeginWork.old.js            |   5 +-
 .../src/ReactFiberClassComponent.old.js       |  45 +------
 .../src/ReactFiberCommitWork.old.js           | 115 ------------------
 .../src/ReactFiberHooks.old.js                | 103 +++-------------
 .../src/ReactFiberHydrationContext.new.js     |  10 +-
 .../src/ReactFiberHydrationContext.old.js     |  10 +-
 .../src/ReactFiberWorkLoop.old.js             | 101 ++++-----------
 .../ReactDoubleInvokeEvents-test.internal.js  |   5 +-
 .../__tests__/ReactDoubleInvokeEvents-test.js |   4 +-
 .../__tests__/ReactProfiler-test.internal.js  |  10 +-
 13 files changed, 88 insertions(+), 343 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index d8894768c6d9..7163df34d856 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -13,7 +13,12 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 
 import getComponentName from 'shared/getComponentName';
-import {Deletion, ChildDeletion, Placement} from './ReactFiberFlags';
+import {
+  Deletion,
+  ChildDeletion,
+  Placement,
+  StaticMask,
+} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -275,7 +280,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
     childToDelete.nextEffect = null;
-    childToDelete.flags = Deletion;
+    childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
     let deletions = returnFiber.deletions;
     if (deletions === null) {
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 268f71dd5308..f1a52dedeebb 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -13,7 +13,12 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 
 import getComponentName from 'shared/getComponentName';
-import {Deletion, ChildDeletion, Placement} from './ReactFiberFlags';
+import {
+  Deletion,
+  ChildDeletion,
+  Placement,
+  StaticMask,
+} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -275,7 +280,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
     childToDelete.nextEffect = null;
-    childToDelete.flags = Deletion;
+    childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
     let deletions = returnFiber.deletions;
     if (deletions === null) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 3ae2541bf061..056d9c8b1ca7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2007,7 +2007,8 @@ function updateSuspensePrimaryChildren(
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
     currentFallbackChildFragment.nextEffect = null;
-    currentFallbackChildFragment.flags = Deletion;
+    currentFallbackChildFragment.flags =
+      (currentFallbackChildFragment.flags & StaticMask) | Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
     let deletions = workInProgress.deletions;
     if (deletions === null) {
@@ -2998,7 +2999,7 @@ function remountFiber(
       returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
     current.nextEffect = null;
-    current.flags = Deletion;
+    current.flags = (current.flags & StaticMask) | Deletion;
 
     let deletions = returnFiber.deletions;
     if (deletions === null) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index ff68570676ed..3f462e198aaf 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2007,7 +2007,8 @@ function updateSuspensePrimaryChildren(
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
     currentFallbackChildFragment.nextEffect = null;
-    currentFallbackChildFragment.flags = Deletion;
+    currentFallbackChildFragment.flags =
+      (currentFallbackChildFragment.flags & StaticMask) | Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
     let deletions = workInProgress.deletions;
     if (deletions === null) {
@@ -2998,7 +2999,7 @@ function remountFiber(
       returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
     current.nextEffect = null;
-    current.flags = Deletion;
+    current.flags = (current.flags & StaticMask) | Deletion;
 
     let deletions = returnFiber.deletions;
     if (deletions === null) {
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 6ea7435f3757..f055bac71ca9 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -12,14 +12,13 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 
 import * as React from 'react';
-import {Update, Snapshot, MountLayoutDev} from './ReactFiberFlags';
+import {Update, Snapshot} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -30,7 +29,7 @@ import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
-import {DebugTracingMode, NoMode, StrictMode} from './ReactTypeOfMode';
+import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -891,15 +890,7 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    if (
-      __DEV__ &&
-      enableDoubleInvokingEffects &&
-      (workInProgress.mode & StrictMode) !== NoMode
-    ) {
-      workInProgress.flags |= MountLayoutDev | Update;
-    } else {
-      workInProgress.flags |= Update;
-    }
+    workInProgress.flags |= Update;
   }
 }
 
@@ -969,15 +960,7 @@ function resumeMountClassInstance(
     // 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') {
-      if (
-        __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & StrictMode) !== NoMode
-      ) {
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
-      }
+      workInProgress.flags |= Update;
     }
     return false;
   }
@@ -1020,29 +1003,13 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      if (
-        __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & StrictMode) !== NoMode
-      ) {
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
-      }
+      workInProgress.flags |= Update;
     }
   } 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') {
-      if (
-        __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & StrictMode) !== NoMode
-      ) {
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
-      }
+      workInProgress.flags |= Update;
     }
 
     // If shouldComponentUpdate returned false, we should still update the
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 265d2adbec69..94d137c99bdc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -35,7 +35,6 @@ import {
   enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -1799,116 +1798,6 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        invokeGuardedCallback(null, instance.componentDidMount, instance);
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-          fiber.return,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(fiber, instance);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-          fiber.return,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
-        }
-        break;
-      }
-    }
-  }
-}
-
 export {
   commitBeforeMutationLifeCycles,
   commitResetTextContent,
@@ -1918,8 +1807,4 @@ export {
   commitLifeCycles,
   commitAttachRef,
   commitDetachRef,
-  invokeLayoutEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokePassiveEffectUnmountInDEV,
 };
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 529ed75814d3..8206eb00f67e 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -28,15 +28,9 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
-  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 
-import {
-  NoMode,
-  BlockingMode,
-  DebugTracingMode,
-  StrictMode,
-} from './ReactTypeOfMode';
+import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   NoLane,
   NoLanes,
@@ -55,8 +49,6 @@ import {readContext} from './ReactFiberNewContext.old';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
-  MountLayoutDev as MountLayoutDevEffect,
-  MountPassiveDev as MountPassiveDevEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -475,20 +467,7 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (workInProgress.mode & StrictMode) !== NoMode
-  ) {
-    workInProgress.flags &= ~(
-      MountLayoutDevEffect |
-      MountPassiveDevEffect |
-      PassiveEffect |
-      UpdateEffect
-    );
-  } else {
-    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
-  }
+  workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
   current.lanes = removeLanes(current.lanes, lanes);
 }
 
@@ -1324,26 +1303,12 @@ function mountEffect(
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & StrictMode) !== NoMode
-  ) {
-    return mountEffectImpl(
-      UpdateEffect | PassiveEffect | MountPassiveDevEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(
-      UpdateEffect | PassiveEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  }
+  return mountEffectImpl(
+    UpdateEffect | PassiveEffect,
+    HookPassive,
+    create,
+    deps,
+  );
 }
 
 function updateEffect(
@@ -1368,20 +1333,7 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & StrictMode) !== NoMode
-  ) {
-    return mountEffectImpl(
-      UpdateEffect | MountLayoutDevEffect,
-      HookLayout,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
-  }
+  return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
 }
 
 function updateLayoutEffect(
@@ -1440,25 +1392,12 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  if (
-    __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & StrictMode) !== NoMode
-  ) {
-    return mountEffectImpl(
-      UpdateEffect | MountLayoutDevEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
-  } else {
-    return mountEffectImpl(
-      UpdateEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
-  }
+  return mountEffectImpl(
+    UpdateEffect,
+    HookLayout,
+    imperativeHandleEffect.bind(null, create, ref),
+    effectDeps,
+  );
 }
 
 function updateImperativeHandle<T>(
@@ -1739,17 +1678,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      if (
-        __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (currentlyRenderingFiber.mode & StrictMode) !== NoMode
-      ) {
-        currentlyRenderingFiber.flags |=
-          UpdateEffect | PassiveEffect | MountPassiveDevEffect;
-      } else {
-        currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
-      }
-
+      currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
       pushEffect(
         HookHasEffect | HookPassive,
         () => {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 85ddcca5f08e..37be28be6628 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -24,7 +24,13 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {Deletion, ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
+import {
+  Deletion,
+  ChildDeletion,
+  Placement,
+  Hydrating,
+  StaticMask,
+} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -124,7 +130,7 @@ function deleteHydratableInstance(
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  childToDelete.flags = Deletion;
+  childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
   // This might seem like it belongs on progressedFirstDeletion. However,
   // these children are not part of the reconciliation list of children.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index b9a5a2229899..a1ca81dc502d 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -24,7 +24,13 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {Deletion, ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
+import {
+  Deletion,
+  ChildDeletion,
+  Placement,
+  Hydrating,
+  StaticMask,
+} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -124,7 +130,7 @@ function deleteHydratableInstance(
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  childToDelete.flags = Deletion;
+  childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
   // This might seem like it belongs on progressedFirstDeletion. However,
   // these children are not part of the reconciliation list of children.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 331fe20ee10a..b5e87af0958a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -14,7 +14,6 @@ import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Effect as HookEffect} from './ReactFiberHooks.old';
-import type {Flags} from './ReactFiberFlags';
 import type {StackCursor} from './ReactFiberStack.old';
 
 import {
@@ -32,7 +31,6 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableScopeAPI,
-  enableDoubleInvokingEffects,
   disableSchedulerTimeoutInWorkLoop,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -134,8 +132,6 @@ import {
   HostEffectMask,
   Hydrating,
   HydratingAndUpdate,
-  MountPassiveDev,
-  MountLayoutDev,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -196,10 +192,6 @@ import {
   commitPassiveEffectDurations,
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
-  invokeLayoutEffectMountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectUnmountInDEV,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactUpdateQueue.old';
 import {resetContextDependencies} from './ReactFiberNewContext.old';
@@ -2134,10 +2126,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     pendingPassiveEffectsLanes = lanes;
     pendingPassiveEffectsRenderPriority = renderPriorityLevel;
   } else {
-    if (__DEV__ && enableDoubleInvokingEffects) {
-      commitDoubleInvokeEffectsInDEV(root, false);
-    }
-
     // We are done with the effect chain at this point so let's clear the
     // nextEffect pointers to assist with GC. If we have passive effects, we'll
     // clear this in flushPassiveEffects.
@@ -2685,29 +2673,6 @@ function flushPassiveEffectsImpl() {
     }
   }
 
-  if (enableProfilerTimer && enableProfilerCommitHooks) {
-    const profilerEffects = pendingPassiveProfilerEffects;
-    pendingPassiveProfilerEffects = [];
-    for (let i = 0; i < profilerEffects.length; i++) {
-      const fiber = ((profilerEffects[i]: any): Fiber);
-      commitPassiveEffectDurations(root, fiber);
-    }
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      logPassiveEffectsStopped();
-    }
-  }
-
-  if (enableSchedulingProfiler) {
-    markPassiveEffectsStopped();
-  }
-
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    commitDoubleInvokeEffectsInDEV(root, true);
-  }
-
   // Note: This currently assumes there are no passive effects on the root fiber
   // because the root is not part of its own effect list.
   // This could change in the future.
@@ -2722,8 +2687,13 @@ function flushPassiveEffectsImpl() {
     effect = nextNextEffect;
   }
 
-  if (__DEV__) {
-    isFlushingPassiveEffects = false;
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    const profilerEffects = pendingPassiveProfilerEffects;
+    pendingPassiveProfilerEffects = [];
+    for (let i = 0; i < profilerEffects.length; i++) {
+      const fiber = ((profilerEffects[i]: any): Fiber);
+      commitPassiveEffectDurations(root, fiber);
+    }
   }
 
   if (enableSchedulerTracing) {
@@ -2731,6 +2701,20 @@ function flushPassiveEffectsImpl() {
     finishPendingInteractions(root, lanes);
   }
 
+  if (__DEV__) {
+    isFlushingPassiveEffects = false;
+  }
+
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      logPassiveEffectsStopped();
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markPassiveEffectsStopped();
+  }
+
   executionContext = prevExecutionContext;
 
   flushSyncCallbackQueue();
@@ -3014,49 +2998,6 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
   }
 }
 
-function commitDoubleInvokeEffectsInDEV(
-  root: FiberRoot,
-  hasPassiveEffects: boolean,
-) {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    invokeEffectsInDev(root, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(
-        root,
-        MountPassiveDev,
-        invokePassiveEffectUnmountInDEV,
-      );
-    }
-
-    invokeEffectsInDev(root, MountLayoutDev, invokeLayoutEffectMountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(root, MountPassiveDev, invokePassiveEffectMountInDEV);
-    }
-  }
-}
-
-function invokeEffectsInDev(
-  root: FiberRoot,
-  fiberFlags: Flags,
-  invokeEffectFn: (fiber: Fiber) => void,
-): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // Note: This currently assumes there are no passive effects on the root fiber
-    // because the root is not part of its own effect list.
-    // This could change in the future.
-    let currentEffect = root.current.firstEffect;
-    while (currentEffect !== null) {
-      const flags = currentEffect.flags;
-      if ((flags & fiberFlags) !== NoFlags) {
-        setCurrentDebugFiberInDEV(currentEffect);
-        invokeEffectFn(currentEffect);
-        resetCurrentDebugFiberInDEV();
-      }
-      currentEffect = currentEffect.nextEffect;
-    }
-  }
-}
-
 let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
 function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
index 802d08a94670..0a7ac0a50d9f 100644
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
@@ -15,9 +15,8 @@ let ReactNoop;
 let Scheduler;
 
 function shouldDoubleInvokingEffects() {
-  // For now, this feature only exists in the old fork (while the new fork is being bisected).
-  // Eventually we'll land it in both forks.
-  return __DEV__ && !__VARIANT__;
+  // Reverted temporarily. Need to re-land.
+  return false;
 }
 
 describe('ReactDoubleInvokeEvents', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
index 6a1f00b7dd0b..5b6abbc4f659 100644
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
@@ -26,7 +26,9 @@ describe('ReactDoubleInvokeEvents', () => {
   function supportsDoubleInvokeEffects() {
     return gate(
       flags =>
-        flags.build === 'development' && flags.enableDoubleInvokingEffects,
+        flags.build === 'development' &&
+        flags.enableDoubleInvokingEffects &&
+        flags.dfsEffectsRefactor,
     );
   }
 
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 972dacda7a11..eb0c69537df4 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -4874,8 +4874,10 @@ describe('Profiler', () => {
       });
 
       if (__DEV__) {
+        // @gate dfsEffectsRefactor
+        // @gate enableDoubleInvokingEffects
         it('double invoking does not disconnect wrapped async work', () => {
-          ReactFeatureFlags.enableDoubleInvokingEffects = !__VARIANT__;
+          ReactFeatureFlags.enableDoubleInvokingEffects = true;
 
           const callback = jest.fn(() => {
             const wrappedInteractions = SchedulerTracing.unstable_getCurrent();
@@ -4913,11 +4915,7 @@ describe('Profiler', () => {
 
           jest.runAllTimers();
 
-          if (ReactFeatureFlags.enableDoubleInvokingEffects) {
-            expect(callback).toHaveBeenCalledTimes(4); // 2x per effect
-          } else {
-            expect(callback).toHaveBeenCalledTimes(2);
-          }
+          expect(callback).toHaveBeenCalledTimes(4); // 2x per effect
 
           expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
         });

From 19e15a39865e4f5b7c4419f8db7d9f122e27e9a4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 7 Dec 2020 16:07:55 -0600
Subject: [PATCH 0153/1603] Add PassiveStatic to trees with passive effects

Indicates that a tree needs passive clean-up on deletion.
---
 packages/react-reconciler/src/ReactFiberHooks.new.js    | 3 ++-
 packages/react-reconciler/src/ReactFiberHooks.old.js    | 3 ++-
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 3 ++-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 4a0a9231f044..66c85b274df0 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -49,6 +49,7 @@ import {readContext} from './ReactFiberNewContext.new';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
+  PassiveStatic as PassiveStaticEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -1304,7 +1305,7 @@ function mountEffect(
     }
   }
   return mountEffectImpl(
-    UpdateEffect | PassiveEffect,
+    UpdateEffect | PassiveEffect | PassiveStaticEffect,
     HookPassive,
     create,
     deps,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 8206eb00f67e..49e222fa6735 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -49,6 +49,7 @@ import {readContext} from './ReactFiberNewContext.old';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
+  PassiveStatic as PassiveStaticEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -1304,7 +1305,7 @@ function mountEffect(
     }
   }
   return mountEffectImpl(
-    UpdateEffect | PassiveEffect,
+    UpdateEffect | PassiveEffect | PassiveStaticEffect,
     HookPassive,
     create,
     deps,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e8d097e9ef56..042361ebdb1b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -132,6 +132,7 @@ import {
   HostEffectMask,
   Hydrating,
   HydratingAndUpdate,
+  StaticMask,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -1781,7 +1782,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         // Skip both NoWork and PerformedWork tags when creating the effect
         // list. PerformedWork effect is read by React DevTools but shouldn't be
         // committed.
-        if (flags > PerformedWork) {
+        if ((flags & ~StaticMask) > PerformedWork) {
           if (returnFiber.lastEffect !== null) {
             returnFiber.lastEffect.nextEffect = completedWork;
           } else {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b5e87af0958a..65157db61925 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -132,6 +132,7 @@ import {
   HostEffectMask,
   Hydrating,
   HydratingAndUpdate,
+  StaticMask,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -1781,7 +1782,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         // Skip both NoWork and PerformedWork tags when creating the effect
         // list. PerformedWork effect is read by React DevTools but shouldn't be
         // committed.
-        if (flags > PerformedWork) {
+        if ((flags & ~StaticMask) > PerformedWork) {
           if (returnFiber.lastEffect !== null) {
             returnFiber.lastEffect.nextEffect = completedWork;
           } else {

From d37d7a4bb4d6b55e2f393827f65082c7ea529ab7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 7 Dec 2020 16:15:00 -0600
Subject: [PATCH 0154/1603] Convert passive mount phase to tree traversal

---
 .../src/ReactFiberCommitWork.new.js           | 121 ++++++++++++++++++
 .../src/ReactFiberCommitWork.old.js           | 121 ++++++++++++++++++
 .../src/ReactFiberWorkLoop.new.js             |  71 +---------
 .../src/ReactFiberWorkLoop.old.js             |  71 +---------
 4 files changed, 248 insertions(+), 136 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 84a20638ef29..fb4c942ab6ee 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -67,9 +67,15 @@ import {
   Placement,
   Snapshot,
   Update,
+  Passive,
+  PassiveMask,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
+import {
+  resetCurrentFiber as resetCurrentDebugFiberInDEV,
+  setCurrentFiber as setCurrentDebugFiberInDEV,
+} from './ReactCurrentFiber';
 
 import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
@@ -78,6 +84,8 @@ import {
   getCommitTime,
   recordLayoutEffectDuration,
   startLayoutEffectTimer,
+  recordPassiveEffectDuration,
+  startPassiveEffectTimer,
 } from './ReactProfilerTimer.new';
 import {ProfileMode} from './ReactTypeOfMode';
 import {commitUpdateQueue} from './ReactUpdateQueue.new';
@@ -134,6 +142,8 @@ if (__DEV__) {
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
+let nextEffect: Fiber | null = null;
+
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
@@ -1798,6 +1808,117 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
+export function commitPassiveMountEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+): void {
+  nextEffect = firstChild;
+  commitPassiveMountEffects_begin(firstChild, root);
+}
+
+function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
+      ensureCorrectReturnPointer(firstChild, fiber);
+      nextEffect = firstChild;
+    } else {
+      commitPassiveMountEffects_complete(subtreeRoot, root);
+    }
+  }
+}
+
+function commitPassiveMountEffects_complete(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & Passive) !== NoFlags) {
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        invokeGuardedCallback(
+          null,
+          commitPassiveMountOnFiber,
+          null,
+          root,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          commitPassiveMountOnFiber(root, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, error);
+        }
+      }
+    }
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitPassiveMountOnFiber(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+): void {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        startPassiveEffectTimer();
+        try {
+          commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
+        } finally {
+          recordPassiveEffectDuration(finishedWork);
+        }
+      } else {
+        commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
+      }
+      break;
+    }
+  }
+}
+
+let didWarnWrongReturnPointer = false;
+function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
+  if (__DEV__) {
+    if (!didWarnWrongReturnPointer && fiber.return !== expectedReturnFiber) {
+      didWarnWrongReturnPointer = true;
+      console.error(
+        'Internal React error: Return pointer is inconsistent ' +
+          'with parent.',
+      );
+    }
+  }
+
+  // TODO: Remove this assignment once we're confident that it won't break
+  // anything, by checking the warning logs for the above invariant
+  fiber.return = expectedReturnFiber;
+}
+
 export {
   commitBeforeMutationLifeCycles,
   commitResetTextContent,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 94d137c99bdc..7f98172a30ed 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -67,9 +67,15 @@ import {
   Placement,
   Snapshot,
   Update,
+  Passive,
+  PassiveMask,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
+import {
+  resetCurrentFiber as resetCurrentDebugFiberInDEV,
+  setCurrentFiber as setCurrentDebugFiberInDEV,
+} from './ReactCurrentFiber';
 
 import {onCommitUnmount} from './ReactFiberDevToolsHook.old';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
@@ -78,6 +84,8 @@ import {
   getCommitTime,
   recordLayoutEffectDuration,
   startLayoutEffectTimer,
+  recordPassiveEffectDuration,
+  startPassiveEffectTimer,
 } from './ReactProfilerTimer.old';
 import {ProfileMode} from './ReactTypeOfMode';
 import {commitUpdateQueue} from './ReactUpdateQueue.old';
@@ -134,6 +142,8 @@ if (__DEV__) {
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
+let nextEffect: Fiber | null = null;
+
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
@@ -1798,6 +1808,117 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
+export function commitPassiveMountEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+): void {
+  nextEffect = firstChild;
+  commitPassiveMountEffects_begin(firstChild, root);
+}
+
+function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
+      ensureCorrectReturnPointer(firstChild, fiber);
+      nextEffect = firstChild;
+    } else {
+      commitPassiveMountEffects_complete(subtreeRoot, root);
+    }
+  }
+}
+
+function commitPassiveMountEffects_complete(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & Passive) !== NoFlags) {
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        invokeGuardedCallback(
+          null,
+          commitPassiveMountOnFiber,
+          null,
+          root,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          commitPassiveMountOnFiber(root, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, error);
+        }
+      }
+    }
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitPassiveMountOnFiber(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+): void {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        startPassiveEffectTimer();
+        try {
+          commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
+        } finally {
+          recordPassiveEffectDuration(finishedWork);
+        }
+      } else {
+        commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
+      }
+      break;
+    }
+  }
+}
+
+let didWarnWrongReturnPointer = false;
+function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
+  if (__DEV__) {
+    if (!didWarnWrongReturnPointer && fiber.return !== expectedReturnFiber) {
+      didWarnWrongReturnPointer = true;
+      console.error(
+        'Internal React error: Return pointer is inconsistent ' +
+          'with parent.',
+      );
+    }
+  }
+
+  // TODO: Remove this assignment once we're confident that it won't break
+  // anything, by checking the warning logs for the above invariant
+  fiber.return = expectedReturnFiber;
+}
+
 export {
   commitBeforeMutationLifeCycles,
   commitResetTextContent,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 042361ebdb1b..3177abb63c51 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -193,6 +193,7 @@ import {
   commitPassiveEffectDurations,
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
+  commitPassiveMountEffects,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
@@ -339,7 +340,6 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
-let pendingPassiveHookEffectsMount: Array<HookEffect | Fiber> = [];
 let pendingPassiveHookEffectsUnmount: Array<HookEffect | Fiber> = [];
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
@@ -2489,7 +2489,6 @@ export function enqueuePendingPassiveHookEffectMount(
   fiber: Fiber,
   effect: HookEffect,
 ): void {
-  pendingPassiveHookEffectsMount.push(effect, fiber);
   if (!rootDoesHavePassiveEffects) {
     rootDoesHavePassiveEffects = true;
     scheduleCallback(NormalSchedulerPriority, () => {
@@ -2520,11 +2519,6 @@ export function enqueuePendingPassiveHookEffectUnmount(
   }
 }
 
-function invokePassiveEffectCreate(effect: HookEffect): void {
-  const create = effect.create;
-  effect.destroy = create();
-}
-
 function flushPassiveEffectsImpl() {
   if (rootWithPendingPassiveEffects === null) {
     return false;
@@ -2626,68 +2620,9 @@ function flushPassiveEffectsImpl() {
     }
   }
   // Second pass: Create new passive effects.
-  const mountEffects = pendingPassiveHookEffectsMount;
-  pendingPassiveHookEffectsMount = [];
-  for (let i = 0; i < mountEffects.length; i += 2) {
-    const effect = ((mountEffects[i]: any): HookEffect);
-    const fiber = ((mountEffects[i + 1]: any): Fiber);
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        fiber.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
-        recordPassiveEffectDuration(fiber);
-      } else {
-        invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
-      }
-      if (hasCaughtError()) {
-        invariant(fiber !== null, 'Should be working on an effect.');
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        const create = effect.create;
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          fiber.mode & ProfileMode
-        ) {
-          try {
-            startPassiveEffectTimer();
-            effect.destroy = create();
-          } finally {
-            recordPassiveEffectDuration(fiber);
-          }
-        } else {
-          effect.destroy = create();
-        }
-      } catch (error) {
-        invariant(fiber !== null, 'Should be working on an effect.');
-        captureCommitPhaseError(fiber, error);
-      }
-    }
-  }
-
-  // Note: This currently assumes there are no passive effects on the root fiber
-  // because the root is not part of its own effect list.
-  // This could change in the future.
-  let effect = root.current.firstEffect;
-  while (effect !== null) {
-    const nextNextEffect = effect.nextEffect;
-    // Remove nextEffect pointer to assist GC
-    effect.nextEffect = null;
-    if (effect.flags & Deletion) {
-      detachFiberAfterEffects(effect);
-    }
-    effect = nextNextEffect;
-  }
+  commitPassiveMountEffects(root, root.current);
 
+  // TODO: Move to commitPassiveMountEffects
   if (enableProfilerTimer && enableProfilerCommitHooks) {
     const profilerEffects = pendingPassiveProfilerEffects;
     pendingPassiveProfilerEffects = [];
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 65157db61925..dc21ff6b7f3e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -193,6 +193,7 @@ import {
   commitPassiveEffectDurations,
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
+  commitPassiveMountEffects,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactUpdateQueue.old';
 import {resetContextDependencies} from './ReactFiberNewContext.old';
@@ -339,7 +340,6 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
-let pendingPassiveHookEffectsMount: Array<HookEffect | Fiber> = [];
 let pendingPassiveHookEffectsUnmount: Array<HookEffect | Fiber> = [];
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
@@ -2489,7 +2489,6 @@ export function enqueuePendingPassiveHookEffectMount(
   fiber: Fiber,
   effect: HookEffect,
 ): void {
-  pendingPassiveHookEffectsMount.push(effect, fiber);
   if (!rootDoesHavePassiveEffects) {
     rootDoesHavePassiveEffects = true;
     scheduleCallback(NormalSchedulerPriority, () => {
@@ -2520,11 +2519,6 @@ export function enqueuePendingPassiveHookEffectUnmount(
   }
 }
 
-function invokePassiveEffectCreate(effect: HookEffect): void {
-  const create = effect.create;
-  effect.destroy = create();
-}
-
 function flushPassiveEffectsImpl() {
   if (rootWithPendingPassiveEffects === null) {
     return false;
@@ -2626,68 +2620,9 @@ function flushPassiveEffectsImpl() {
     }
   }
   // Second pass: Create new passive effects.
-  const mountEffects = pendingPassiveHookEffectsMount;
-  pendingPassiveHookEffectsMount = [];
-  for (let i = 0; i < mountEffects.length; i += 2) {
-    const effect = ((mountEffects[i]: any): HookEffect);
-    const fiber = ((mountEffects[i + 1]: any): Fiber);
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        fiber.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
-        recordPassiveEffectDuration(fiber);
-      } else {
-        invokeGuardedCallback(null, invokePassiveEffectCreate, null, effect);
-      }
-      if (hasCaughtError()) {
-        invariant(fiber !== null, 'Should be working on an effect.');
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        const create = effect.create;
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          fiber.mode & ProfileMode
-        ) {
-          try {
-            startPassiveEffectTimer();
-            effect.destroy = create();
-          } finally {
-            recordPassiveEffectDuration(fiber);
-          }
-        } else {
-          effect.destroy = create();
-        }
-      } catch (error) {
-        invariant(fiber !== null, 'Should be working on an effect.');
-        captureCommitPhaseError(fiber, error);
-      }
-    }
-  }
-
-  // Note: This currently assumes there are no passive effects on the root fiber
-  // because the root is not part of its own effect list.
-  // This could change in the future.
-  let effect = root.current.firstEffect;
-  while (effect !== null) {
-    const nextNextEffect = effect.nextEffect;
-    // Remove nextEffect pointer to assist GC
-    effect.nextEffect = null;
-    if (effect.flags & Deletion) {
-      detachFiberAfterEffects(effect);
-    }
-    effect = nextNextEffect;
-  }
+  commitPassiveMountEffects(root, root.current);
 
+  // TODO: Move to commitPassiveMountEffects
   if (enableProfilerTimer && enableProfilerCommitHooks) {
     const profilerEffects = pendingPassiveProfilerEffects;
     pendingPassiveProfilerEffects = [];

From ab29695a050b806492351250a24221d622d5e4cc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 7 Dec 2020 17:51:07 -0600
Subject: [PATCH 0155/1603] Defer more field detachments to passive phase

This allows us to use those fields during passive unmount traversal.
---
 .../src/ReactFiberCommitWork.new.js           | 42 ++++++++++++-------
 .../src/ReactFiberCommitWork.old.js           | 42 ++++++++++++-------
 .../src/ReactFiberWorkLoop.new.js             | 21 ++++++----
 .../src/ReactFiberWorkLoop.old.js             | 21 ++++++----
 4 files changed, 80 insertions(+), 46 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index fb4c942ab6ee..a3147ab213c4 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1069,30 +1069,42 @@ function commitNestedUnmounts(
 }
 
 function detachFiberMutation(fiber: Fiber) {
-  // Cut off the return pointers to disconnect it from the tree. Ideally, we
-  // should clear the child pointer of the parent alternate to let this
+  // 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: we cannot null out sibling here, otherwise it can cause issues
-  // with findDOMNode and how it requires the sibling field to carry out
-  // traversal in a later effect. See PR #16820. We now clear the sibling
-  // field after effects, see: detachFiberAfterEffects.
+  // 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.
   //
-  // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.
-  // It may be required if the current component is an error boundary,
-  // and one of its descendants throws while unmounting a passive effect.
-  fiber.alternate = null;
+  // 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).
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    alternate.return = null;
+    fiber.alternate = null;
+  }
+  fiber.return = null;
+}
+
+export function detachFiberAfterEffects(fiber: Fiber): void {
+  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
+  // Note that we already cleared the return pointer in detachFiberMutation().
   fiber.child = null;
   fiber.deletions = null;
   fiber.dependencies = null;
-  fiber.firstEffect = null;
-  fiber.lastEffect = null;
   fiber.memoizedProps = null;
   fiber.memoizedState = null;
   fiber.pendingProps = null;
-  fiber.return = null;
+  fiber.sibling = null;
+  fiber.stateNode = null;
   fiber.updateQueue = null;
+  fiber.nextEffect = null;
+  fiber.firstEffect = null;
+  fiber.lastEffect = null;
+
   if (__DEV__) {
     fiber._debugOwner = null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7f98172a30ed..6d7776597c15 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1069,30 +1069,42 @@ function commitNestedUnmounts(
 }
 
 function detachFiberMutation(fiber: Fiber) {
-  // Cut off the return pointers to disconnect it from the tree. Ideally, we
-  // should clear the child pointer of the parent alternate to let this
+  // 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: we cannot null out sibling here, otherwise it can cause issues
-  // with findDOMNode and how it requires the sibling field to carry out
-  // traversal in a later effect. See PR #16820. We now clear the sibling
-  // field after effects, see: detachFiberAfterEffects.
+  // 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.
   //
-  // Don't disconnect stateNode now; it will be detached in detachFiberAfterEffects.
-  // It may be required if the current component is an error boundary,
-  // and one of its descendants throws while unmounting a passive effect.
-  fiber.alternate = null;
+  // 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).
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    alternate.return = null;
+    fiber.alternate = null;
+  }
+  fiber.return = null;
+}
+
+export function detachFiberAfterEffects(fiber: Fiber): void {
+  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
+  // Note that we already cleared the return pointer in detachFiberMutation().
   fiber.child = null;
   fiber.deletions = null;
   fiber.dependencies = null;
-  fiber.firstEffect = null;
-  fiber.lastEffect = null;
   fiber.memoizedProps = null;
   fiber.memoizedState = null;
   fiber.pendingProps = null;
-  fiber.return = null;
+  fiber.sibling = null;
+  fiber.stateNode = null;
   fiber.updateQueue = null;
+  fiber.nextEffect = null;
+  fiber.firstEffect = null;
+  fiber.lastEffect = null;
+
   if (__DEV__) {
     fiber._debugOwner = null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 3177abb63c51..a994a01c204e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -122,6 +122,7 @@ import {
   Update,
   PlacementAndUpdate,
   Deletion,
+  ChildDeletion,
   Ref,
   ContentReset,
   Snapshot,
@@ -194,6 +195,7 @@ import {
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
+  detachFiberAfterEffects,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
@@ -2129,13 +2131,21 @@ function commitRootImpl(root, renderPriorityLevel) {
   } else {
     // We are done with the effect chain at this point so let's clear the
     // nextEffect pointers to assist with GC. If we have passive effects, we'll
-    // clear this in flushPassiveEffects.
+    // clear this in flushPassiveEffects
+    // TODO: We should always do this in the passive phase, by scheduling
+    // a passive callback for every deletion.
     nextEffect = firstEffect;
     while (nextEffect !== null) {
       const nextNextEffect = nextEffect.nextEffect;
       nextEffect.nextEffect = null;
-      if (nextEffect.flags & Deletion) {
-        detachFiberAfterEffects(nextEffect);
+      if (nextEffect.flags & ChildDeletion) {
+        const deletions = nextEffect.deletions;
+        if (deletions !== null) {
+          for (let i = 0; i < deletions.length; i++) {
+            const deletion = deletions[i];
+            detachFiberAfterEffects(deletion);
+          }
+        }
       }
       nextEffect = nextNextEffect;
     }
@@ -3708,8 +3718,3 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
     };
   }
 }
-
-function detachFiberAfterEffects(fiber: Fiber): void {
-  fiber.sibling = null;
-  fiber.stateNode = null;
-}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index dc21ff6b7f3e..020d90cf5610 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -122,6 +122,7 @@ import {
   Update,
   PlacementAndUpdate,
   Deletion,
+  ChildDeletion,
   Ref,
   ContentReset,
   Snapshot,
@@ -194,6 +195,7 @@ import {
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
+  detachFiberAfterEffects,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactUpdateQueue.old';
 import {resetContextDependencies} from './ReactFiberNewContext.old';
@@ -2129,13 +2131,21 @@ function commitRootImpl(root, renderPriorityLevel) {
   } else {
     // We are done with the effect chain at this point so let's clear the
     // nextEffect pointers to assist with GC. If we have passive effects, we'll
-    // clear this in flushPassiveEffects.
+    // clear this in flushPassiveEffects
+    // TODO: We should always do this in the passive phase, by scheduling
+    // a passive callback for every deletion.
     nextEffect = firstEffect;
     while (nextEffect !== null) {
       const nextNextEffect = nextEffect.nextEffect;
       nextEffect.nextEffect = null;
-      if (nextEffect.flags & Deletion) {
-        detachFiberAfterEffects(nextEffect);
+      if (nextEffect.flags & ChildDeletion) {
+        const deletions = nextEffect.deletions;
+        if (deletions !== null) {
+          for (let i = 0; i < deletions.length; i++) {
+            const deletion = deletions[i];
+            detachFiberAfterEffects(deletion);
+          }
+        }
       }
       nextEffect = nextNextEffect;
     }
@@ -3708,8 +3718,3 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
     };
   }
 }
-
-function detachFiberAfterEffects(fiber: Fiber): void {
-  fiber.sibling = null;
-  fiber.stateNode = null;
-}

From 1cf59f34b89728f8ef2bc17158c438ab17f063bd Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 7 Dec 2020 18:01:47 -0600
Subject: [PATCH 0156/1603] Convert passive unmount phase to tree traversal

---
 .../react-reconciler/src/ReactFiber.new.js    |   2 +-
 .../react-reconciler/src/ReactFiber.old.js    |   2 +-
 .../src/ReactFiberCommitWork.new.js           | 158 +++++++++++++++++-
 .../src/ReactFiberCommitWork.old.js           | 158 +++++++++++++++++-
 .../src/ReactFiberWorkLoop.new.js             | 111 +++---------
 .../src/ReactFiberWorkLoop.old.js             | 111 +++---------
 6 files changed, 364 insertions(+), 178 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 258183147000..b617bb3eeeb1 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -363,7 +363,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
   // We assume pendingProps, index, key, ref, return are still untouched to
   // avoid doing another reconciliation.
 
-  // Reset the effect tag but keep any Placement tags, since that's something
+  // Reset the effect flags but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
   workInProgress.flags &= Placement;
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index cd5a3a3649df..a130aec76432 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -363,7 +363,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
   // We assume pendingProps, index, key, ref, return are still untouched to
   // avoid doing another reconciliation.
 
-  // Reset the effect tag but keep any Placement tags, since that's something
+  // Reset the effect flags but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
   workInProgress.flags &= Placement;
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index a3147ab213c4..6545ad876f87 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -24,6 +24,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {HookFlags} from './ReactHookEffectTags';
 
 import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
@@ -65,10 +66,13 @@ import {
   NoFlags,
   ContentReset,
   Placement,
+  ChildDeletion,
   Snapshot,
   Update,
   Passive,
+  PassiveStatic,
   PassiveMask,
+  PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -340,19 +344,19 @@ function commitBeforeMutationLifeCycles(
   );
 }
 
-function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
+function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
   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 & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
         // Unmount
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
-          destroy();
+          safelyCallDestroy(finishedWork, destroy);
         }
       }
       effect = effect.next;
@@ -1914,6 +1918,154 @@ function commitPassiveMountOnFiber(
   }
 }
 
+export function commitPassiveUnmountEffects(firstChild: Fiber): void {
+  nextEffect = firstChild;
+  commitPassiveUnmountEffects_begin();
+}
+
+function commitPassiveUnmountEffects_begin() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const child = fiber.child;
+
+    if ((nextEffect.flags & ChildDeletion) !== NoFlags) {
+      const deletions = fiber.deletions;
+      if (deletions !== null) {
+        for (let i = 0; i < deletions.length; i++) {
+          const fiberToDelete = deletions[i];
+          nextEffect = fiberToDelete;
+          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(fiberToDelete);
+
+          // Now that passive effects have been processed, it's safe to detach lingering pointers.
+          detachFiberAfterEffects(fiberToDelete);
+        }
+        nextEffect = fiber;
+      }
+    }
+
+    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitPassiveUnmountEffects_complete();
+    }
+  }
+}
+
+function commitPassiveUnmountEffects_complete() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & Passive) !== NoFlags) {
+      setCurrentDebugFiberInDEV(fiber);
+      commitPassiveUnmountOnFiber(fiber);
+      resetCurrentDebugFiberInDEV();
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
+  if (__DEV__) {
+    finishedWork.flags &= ~PassiveUnmountPendingDev;
+    const alternate = finishedWork.alternate;
+    if (alternate !== null) {
+      alternate.flags &= ~PassiveUnmountPendingDev;
+    }
+  }
+
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        startPassiveEffectTimer();
+        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+        recordPassiveEffectDuration(finishedWork);
+      } else {
+        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+      }
+      break;
+    }
+  }
+}
+
+function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+  deletedSubtreeRoot: Fiber,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const child = fiber.child;
+    if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+        deletedSubtreeRoot,
+      );
+    }
+  }
+}
+
+function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+  deletedSubtreeRoot: Fiber,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & PassiveStatic) !== NoFlags) {
+      setCurrentDebugFiberInDEV(fiber);
+      commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+      resetCurrentDebugFiberInDEV();
+    }
+
+    if (fiber === deletedSubtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
+  switch (current.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        current.mode & ProfileMode
+      ) {
+        startPassiveEffectTimer();
+        commitHookEffectListUnmount(HookPassive, current);
+        recordPassiveEffectDuration(current);
+      } else {
+        commitHookEffectListUnmount(HookPassive, current);
+      }
+      break;
+    }
+  }
+}
+
 let didWarnWrongReturnPointer = false;
 function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 6d7776597c15..3e68baae514e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -24,6 +24,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {HookFlags} from './ReactHookEffectTags';
 
 import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
@@ -65,10 +66,13 @@ import {
   NoFlags,
   ContentReset,
   Placement,
+  ChildDeletion,
   Snapshot,
   Update,
   Passive,
+  PassiveStatic,
   PassiveMask,
+  PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
 import invariant from 'shared/invariant';
@@ -340,19 +344,19 @@ function commitBeforeMutationLifeCycles(
   );
 }
 
-function commitHookEffectListUnmount(tag: number, finishedWork: Fiber) {
+function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
   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 & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
         // Unmount
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
-          destroy();
+          safelyCallDestroy(finishedWork, destroy);
         }
       }
       effect = effect.next;
@@ -1914,6 +1918,154 @@ function commitPassiveMountOnFiber(
   }
 }
 
+export function commitPassiveUnmountEffects(firstChild: Fiber): void {
+  nextEffect = firstChild;
+  commitPassiveUnmountEffects_begin();
+}
+
+function commitPassiveUnmountEffects_begin() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const child = fiber.child;
+
+    if ((nextEffect.flags & ChildDeletion) !== NoFlags) {
+      const deletions = fiber.deletions;
+      if (deletions !== null) {
+        for (let i = 0; i < deletions.length; i++) {
+          const fiberToDelete = deletions[i];
+          nextEffect = fiberToDelete;
+          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(fiberToDelete);
+
+          // Now that passive effects have been processed, it's safe to detach lingering pointers.
+          detachFiberAfterEffects(fiberToDelete);
+        }
+        nextEffect = fiber;
+      }
+    }
+
+    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitPassiveUnmountEffects_complete();
+    }
+  }
+}
+
+function commitPassiveUnmountEffects_complete() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & Passive) !== NoFlags) {
+      setCurrentDebugFiberInDEV(fiber);
+      commitPassiveUnmountOnFiber(fiber);
+      resetCurrentDebugFiberInDEV();
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
+  if (__DEV__) {
+    finishedWork.flags &= ~PassiveUnmountPendingDev;
+    const alternate = finishedWork.alternate;
+    if (alternate !== null) {
+      alternate.flags &= ~PassiveUnmountPendingDev;
+    }
+  }
+
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        startPassiveEffectTimer();
+        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+        recordPassiveEffectDuration(finishedWork);
+      } else {
+        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+      }
+      break;
+    }
+  }
+}
+
+function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+  deletedSubtreeRoot: Fiber,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const child = fiber.child;
+    if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+        deletedSubtreeRoot,
+      );
+    }
+  }
+}
+
+function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
+  deletedSubtreeRoot: Fiber,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & PassiveStatic) !== NoFlags) {
+      setCurrentDebugFiberInDEV(fiber);
+      commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+      resetCurrentDebugFiberInDEV();
+    }
+
+    if (fiber === deletedSubtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
+  switch (current.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        current.mode & ProfileMode
+      ) {
+        startPassiveEffectTimer();
+        commitHookEffectListUnmount(HookPassive, current);
+        recordPassiveEffectDuration(current);
+      } else {
+        commitHookEffectListUnmount(HookPassive, current);
+      }
+      break;
+    }
+  }
+}
+
 let didWarnWrongReturnPointer = false;
 function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a994a01c204e..390feac65314 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -15,6 +15,7 @@ import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Effect as HookEffect} from './ReactFiberHooks.new';
 import type {StackCursor} from './ReactFiberStack.new';
+import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -51,6 +52,10 @@ import {
   flushSyncCallbackQueue,
   scheduleSyncCallback,
 } from './SchedulerWithReactIntegration.new';
+import {
+  NoFlags as NoHookEffect,
+  Passive as HookPassive,
+} from './ReactHookEffectTags';
 import {
   logCommitStarted,
   logCommitStopped,
@@ -128,7 +133,7 @@ import {
   Snapshot,
   Callback,
   Passive,
-  PassiveUnmountPendingDev,
+  PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
@@ -195,6 +200,7 @@ import {
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
+  commitPassiveUnmountEffects,
   detachFiberAfterEffects,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
@@ -214,9 +220,7 @@ import {
 import {
   markNestedUpdateScheduled,
   recordCommitTime,
-  recordPassiveEffectDuration,
   resetNestedUpdateFlag,
-  startPassiveEffectTimer,
   startProfilerTimer,
   stopProfilerTimerIfRunningAndRecordDelta,
   syncNestedUpdateFlag,
@@ -342,7 +346,6 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
-let pendingPassiveHookEffectsUnmount: Array<HookEffect | Fiber> = [];
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
 let rootsWithPendingDiscreteUpdates: Set<FiberRoot> | null = null;
@@ -2512,14 +2515,6 @@ export function enqueuePendingPassiveHookEffectUnmount(
   fiber: Fiber,
   effect: HookEffect,
 ): void {
-  pendingPassiveHookEffectsUnmount.push(effect, fiber);
-  if (__DEV__) {
-    fiber.flags |= PassiveUnmountPendingDev;
-    const alternate = fiber.alternate;
-    if (alternate !== null) {
-      alternate.flags |= PassiveUnmountPendingDev;
-    }
-  }
   if (!rootDoesHavePassiveEffects) {
     rootDoesHavePassiveEffects = true;
     scheduleCallback(NormalSchedulerPriority, () => {
@@ -2562,74 +2557,7 @@ function flushPassiveEffectsImpl() {
   executionContext |= CommitContext;
   const prevInteractions = pushInteractions(root);
 
-  // It's important that ALL pending passive effect destroy functions are called
-  // before ANY passive effect create functions are called.
-  // Otherwise effects in sibling components might interfere with each other.
-  // e.g. a destroy function in one component may unintentionally override a ref
-  // value set by a create function in another component.
-  // Layout effects have the same constraint.
-
-  // First pass: Destroy stale passive effects.
-  const unmountEffects = pendingPassiveHookEffectsUnmount;
-  pendingPassiveHookEffectsUnmount = [];
-  for (let i = 0; i < unmountEffects.length; i += 2) {
-    const effect = ((unmountEffects[i]: any): HookEffect);
-    const fiber = ((unmountEffects[i + 1]: any): Fiber);
-    const destroy = effect.destroy;
-    effect.destroy = undefined;
-
-    if (__DEV__) {
-      fiber.flags &= ~PassiveUnmountPendingDev;
-      const alternate = fiber.alternate;
-      if (alternate !== null) {
-        alternate.flags &= ~PassiveUnmountPendingDev;
-      }
-    }
-
-    if (typeof destroy === 'function') {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          fiber.mode & ProfileMode
-        ) {
-          startPassiveEffectTimer();
-          invokeGuardedCallback(null, destroy, null);
-          recordPassiveEffectDuration(fiber);
-        } else {
-          invokeGuardedCallback(null, destroy, null);
-        }
-        if (hasCaughtError()) {
-          invariant(fiber !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            fiber.mode & ProfileMode
-          ) {
-            try {
-              startPassiveEffectTimer();
-              destroy();
-            } finally {
-              recordPassiveEffectDuration(fiber);
-            }
-          } else {
-            destroy();
-          }
-        } catch (error) {
-          invariant(fiber !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(fiber, error);
-        }
-      }
-    }
-  }
-  // Second pass: Create new passive effects.
+  commitPassiveUnmountEffects(root.current);
   commitPassiveMountEffects(root, root.current);
 
   // TODO: Move to commitPassiveMountEffects
@@ -3017,12 +2945,25 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
       return;
     }
 
-    // If there are pending passive effects unmounts for this Fiber,
-    // we can assume that they would have prevented this update.
-    if ((fiber.flags & PassiveUnmountPendingDev) !== NoFlags) {
-      return;
-    }
+    if ((fiber.flags & PassiveStatic) !== NoFlags) {
+      const updateQueue: FunctionComponentUpdateQueue | null = (fiber.updateQueue: any);
+      if (updateQueue !== null) {
+        const lastEffect = updateQueue.lastEffect;
+        if (lastEffect !== null) {
+          const firstEffect = lastEffect.next;
 
+          let effect = firstEffect;
+          do {
+            if (effect.destroy !== undefined) {
+              if ((effect.tag & HookPassive) !== NoHookEffect) {
+                return;
+              }
+            }
+            effect = effect.next;
+          } while (effect !== firstEffect);
+        }
+      }
+    }
     // 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 = getComponentName(fiber.type) || 'ReactComponent';
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 020d90cf5610..0aa21dbfa85b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -15,6 +15,7 @@ import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Effect as HookEffect} from './ReactFiberHooks.old';
 import type {StackCursor} from './ReactFiberStack.old';
+import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -51,6 +52,10 @@ import {
   flushSyncCallbackQueue,
   scheduleSyncCallback,
 } from './SchedulerWithReactIntegration.old';
+import {
+  NoFlags as NoHookEffect,
+  Passive as HookPassive,
+} from './ReactHookEffectTags';
 import {
   logCommitStarted,
   logCommitStopped,
@@ -128,7 +133,7 @@ import {
   Snapshot,
   Callback,
   Passive,
-  PassiveUnmountPendingDev,
+  PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
@@ -195,6 +200,7 @@ import {
   commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
+  commitPassiveUnmountEffects,
   detachFiberAfterEffects,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactUpdateQueue.old';
@@ -214,9 +220,7 @@ import {
 import {
   markNestedUpdateScheduled,
   recordCommitTime,
-  recordPassiveEffectDuration,
   resetNestedUpdateFlag,
-  startPassiveEffectTimer,
   startProfilerTimer,
   stopProfilerTimerIfRunningAndRecordDelta,
   syncNestedUpdateFlag,
@@ -342,7 +346,6 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
-let pendingPassiveHookEffectsUnmount: Array<HookEffect | Fiber> = [];
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
 let rootsWithPendingDiscreteUpdates: Set<FiberRoot> | null = null;
@@ -2512,14 +2515,6 @@ export function enqueuePendingPassiveHookEffectUnmount(
   fiber: Fiber,
   effect: HookEffect,
 ): void {
-  pendingPassiveHookEffectsUnmount.push(effect, fiber);
-  if (__DEV__) {
-    fiber.flags |= PassiveUnmountPendingDev;
-    const alternate = fiber.alternate;
-    if (alternate !== null) {
-      alternate.flags |= PassiveUnmountPendingDev;
-    }
-  }
   if (!rootDoesHavePassiveEffects) {
     rootDoesHavePassiveEffects = true;
     scheduleCallback(NormalSchedulerPriority, () => {
@@ -2562,74 +2557,7 @@ function flushPassiveEffectsImpl() {
   executionContext |= CommitContext;
   const prevInteractions = pushInteractions(root);
 
-  // It's important that ALL pending passive effect destroy functions are called
-  // before ANY passive effect create functions are called.
-  // Otherwise effects in sibling components might interfere with each other.
-  // e.g. a destroy function in one component may unintentionally override a ref
-  // value set by a create function in another component.
-  // Layout effects have the same constraint.
-
-  // First pass: Destroy stale passive effects.
-  const unmountEffects = pendingPassiveHookEffectsUnmount;
-  pendingPassiveHookEffectsUnmount = [];
-  for (let i = 0; i < unmountEffects.length; i += 2) {
-    const effect = ((unmountEffects[i]: any): HookEffect);
-    const fiber = ((unmountEffects[i + 1]: any): Fiber);
-    const destroy = effect.destroy;
-    effect.destroy = undefined;
-
-    if (__DEV__) {
-      fiber.flags &= ~PassiveUnmountPendingDev;
-      const alternate = fiber.alternate;
-      if (alternate !== null) {
-        alternate.flags &= ~PassiveUnmountPendingDev;
-      }
-    }
-
-    if (typeof destroy === 'function') {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          fiber.mode & ProfileMode
-        ) {
-          startPassiveEffectTimer();
-          invokeGuardedCallback(null, destroy, null);
-          recordPassiveEffectDuration(fiber);
-        } else {
-          invokeGuardedCallback(null, destroy, null);
-        }
-        if (hasCaughtError()) {
-          invariant(fiber !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            fiber.mode & ProfileMode
-          ) {
-            try {
-              startPassiveEffectTimer();
-              destroy();
-            } finally {
-              recordPassiveEffectDuration(fiber);
-            }
-          } else {
-            destroy();
-          }
-        } catch (error) {
-          invariant(fiber !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(fiber, error);
-        }
-      }
-    }
-  }
-  // Second pass: Create new passive effects.
+  commitPassiveUnmountEffects(root.current);
   commitPassiveMountEffects(root, root.current);
 
   // TODO: Move to commitPassiveMountEffects
@@ -3017,12 +2945,25 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
       return;
     }
 
-    // If there are pending passive effects unmounts for this Fiber,
-    // we can assume that they would have prevented this update.
-    if ((fiber.flags & PassiveUnmountPendingDev) !== NoFlags) {
-      return;
-    }
+    if ((fiber.flags & PassiveStatic) !== NoFlags) {
+      const updateQueue: FunctionComponentUpdateQueue | null = (fiber.updateQueue: any);
+      if (updateQueue !== null) {
+        const lastEffect = updateQueue.lastEffect;
+        if (lastEffect !== null) {
+          const firstEffect = lastEffect.next;
 
+          let effect = firstEffect;
+          do {
+            if (effect.destroy !== undefined) {
+              if ((effect.tag & HookPassive) !== NoHookEffect) {
+                return;
+              }
+            }
+            effect = effect.next;
+          } while (effect !== firstEffect);
+        }
+      }
+    }
     // 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 = getComponentName(fiber.type) || 'ReactComponent';

From a6329b10508e9b27222392dc03d7867d82b2e984 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 11 Dec 2020 15:37:43 -0600
Subject: [PATCH 0157/1603] Don't clear static flags in resetWorkInProgress

Fixes the regression test added in #20433
---
 packages/react-reconciler/src/ReactFiber.new.js | 2 +-
 packages/react-reconciler/src/ReactFiber.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index b617bb3eeeb1..9d55634deab9 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -365,7 +365,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
   // Reset the effect flags but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
-  workInProgress.flags &= Placement;
+  workInProgress.flags &= StaticMask | Placement;
 
   // The effect list is no longer valid.
   workInProgress.nextEffect = null;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index a130aec76432..76001dd757e7 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -365,7 +365,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
   // Reset the effect flags but keep any Placement tags, since that's something
   // that child fiber is setting, not the reconciliation.
-  workInProgress.flags &= Placement;
+  workInProgress.flags &= StaticMask | Placement;
 
   // The effect list is no longer valid.
   workInProgress.nextEffect = null;

From 00a5b08e24eb7429678aaed88360ae485dc08e68 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 11 Dec 2020 15:45:08 -0600
Subject: [PATCH 0158/1603] Remove PassiveStatic optimization

Passive flags are a new concept that is tricky to get right. We've
already found two bugs related to PassiveStatic. Let's remove this
optimization for now, and add it back once the main part of the effects
refactor lands.
---
 .../src/ReactFiberCommitWork.new.js                 | 13 ++++++-------
 .../src/ReactFiberCommitWork.old.js                 | 13 ++++++-------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6545ad876f87..d3082d5f785b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -70,7 +70,6 @@ import {
   Snapshot,
   Update,
   Passive,
-  PassiveStatic,
   PassiveMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
@@ -2007,7 +2006,8 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
   while (nextEffect !== null) {
     const fiber = nextEffect;
     const child = fiber.child;
-    if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
+    // TODO: Only traverse subtree if it has a PassiveStatic flag
+    if (child !== null) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
@@ -2023,11 +2023,10 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
+    // TODO: Check if fiber has a PassiveStatic flag
+    setCurrentDebugFiberInDEV(fiber);
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+    resetCurrentDebugFiberInDEV();
 
     if (fiber === deletedSubtreeRoot) {
       nextEffect = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 3e68baae514e..95e48b1e4ae4 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -70,7 +70,6 @@ import {
   Snapshot,
   Update,
   Passive,
-  PassiveStatic,
   PassiveMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
@@ -2007,7 +2006,8 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
   while (nextEffect !== null) {
     const fiber = nextEffect;
     const child = fiber.child;
-    if ((fiber.subtreeFlags & PassiveStatic) !== NoFlags && child !== null) {
+    // TODO: Only traverse subtree if it has a PassiveStatic flag
+    if (child !== null) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
@@ -2023,11 +2023,10 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
+    // TODO: Check if fiber has a PassiveStatic flag
+    setCurrentDebugFiberInDEV(fiber);
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+    resetCurrentDebugFiberInDEV();
 
     if (fiber === deletedSubtreeRoot) {
       nextEffect = null;

From efc57e5cbbd618f3c98d941c48eec859026c2dcb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 18 Dec 2020 12:57:24 -0600
Subject: [PATCH 0159/1603] Add built-in Suspense cache with support for
 invalidation (refreshing) (#20456)

---
 .../src/server/ReactPartialRendererHooks.js   |   5 +
 .../react-reconciler/src/ReactFiber.new.js    |  26 +
 .../react-reconciler/src/ReactFiber.old.js    |  26 +
 .../src/ReactFiberBeginWork.new.js            | 226 ++++-
 .../src/ReactFiberBeginWork.old.js            | 226 ++++-
 .../src/ReactFiberCacheComponent.new.js       | 204 ++++
 .../src/ReactFiberCacheComponent.old.js       | 204 ++++
 .../src/ReactFiberCompleteWork.new.js         |  35 +-
 .../src/ReactFiberCompleteWork.old.js         |  35 +-
 .../src/ReactFiberHooks.new.js                | 106 +-
 .../src/ReactFiberHooks.old.js                | 106 +-
 .../src/ReactFiberLane.new.js                 |  10 +
 .../src/ReactFiberLane.old.js                 |  10 +
 .../src/ReactFiberNewContext.new.js           |  20 +-
 .../src/ReactFiberNewContext.old.js           |  20 +-
 .../src/ReactFiberOffscreenComponent.js       |   2 +
 .../src/ReactFiberRoot.new.js                 |  21 +
 .../src/ReactFiberRoot.old.js                 |  21 +
 .../src/ReactFiberThrow.new.js                |  15 +-
 .../src/ReactFiberThrow.old.js                |  15 +-
 .../src/ReactFiberUnwindWork.new.js           |  58 +-
 .../src/ReactFiberUnwindWork.old.js           |  58 +-
 .../src/ReactFiberWorkLoop.new.js             |  13 +-
 .../src/ReactFiberWorkLoop.old.js             |  13 +-
 .../src/ReactInternalTypes.js                 |   8 +-
 .../react-reconciler/src/ReactWorkTags.js     |   4 +-
 .../src/__tests__/ReactCache-test.js          | 916 ++++++++++++++++++
 .../react-server/src/ReactFlightServer.js     |  10 +
 .../src/ReactSuspenseTestUtils.js             |   1 +
 packages/react/index.classic.fb.js            |   2 +
 packages/react/index.experimental.js          |   2 +
 packages/react/index.js                       |   2 +
 packages/react/index.modern.fb.js             |   2 +
 packages/react/src/React.js                   |   4 +
 packages/react/src/ReactHooks.js              |   6 +
 packages/shared/ReactSymbols.js               |   2 +
 packages/shared/getComponentName.js           |   3 +
 packages/shared/isValidElementType.js         |   6 +-
 scripts/error-codes/codes.json                |   3 +-
 39 files changed, 2387 insertions(+), 59 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberCacheComponent.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberCacheComponent.old.js
 create mode 100644 packages/react-reconciler/src/__tests__/ReactCache-test.js

diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 3a543aa337b6..50edb72c2844 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -489,6 +489,10 @@ function useOpaqueIdentifier(): OpaqueIDType {
   );
 }
 
+function useCacheRefresh(): <T>(?() => T, ?T) => void {
+  invariant(false, 'Not implemented.');
+}
+
 function noop(): void {}
 
 export let currentPartialRenderer: PartialRenderer = (null: any);
@@ -520,4 +524,5 @@ export const Dispatcher: DispatcherType = {
 
 if (enableCache) {
   Dispatcher.getCacheForType = getCacheForType;
+  Dispatcher.useCacheRefresh = useCacheRefresh;
 }
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 9d55634deab9..3b3d9d4bc2e7 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -27,6 +27,7 @@ import {
   enableProfilerTimer,
   enableFundamentalAPI,
   enableScopeAPI,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -54,6 +55,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -88,6 +90,7 @@ import {
   REACT_SCOPE_TYPE,
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
+  REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
 
 export type {Fiber};
@@ -501,6 +504,11 @@ export function createFiberFromTypeAndProps(
           return createFiberFromScope(type, pendingProps, mode, lanes, key);
         }
       // eslint-disable-next-line no-fallthrough
+      case REACT_CACHE_TYPE:
+        if (enableCache) {
+          return createFiberFromCache(pendingProps, mode, lanes, key);
+        }
+      // eslint-disable-next-line no-fallthrough
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
@@ -745,6 +753,24 @@ export function createFiberFromLegacyHidden(
   return fiber;
 }
 
+export function createFiberFromCache(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: null | string,
+) {
+  const fiber = createFiber(CacheComponent, pendingProps, key, mode);
+  // TODO: The Cache fiber shouldn't have a type. It has a tag.
+  // This needs to be fixed in getComponentName so that it relies on the tag
+  // instead.
+  if (__DEV__) {
+    fiber.type = REACT_CACHE_TYPE;
+  }
+  fiber.elementType = REACT_CACHE_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
 export function createFiberFromText(
   content: string,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 76001dd757e7..1e20db285100 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -27,6 +27,7 @@ import {
   enableProfilerTimer,
   enableFundamentalAPI,
   enableScopeAPI,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -54,6 +55,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import getComponentName from 'shared/getComponentName';
 
@@ -88,6 +90,7 @@ import {
   REACT_SCOPE_TYPE,
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
+  REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
 
 export type {Fiber};
@@ -501,6 +504,11 @@ export function createFiberFromTypeAndProps(
           return createFiberFromScope(type, pendingProps, mode, lanes, key);
         }
       // eslint-disable-next-line no-fallthrough
+      case REACT_CACHE_TYPE:
+        if (enableCache) {
+          return createFiberFromCache(pendingProps, mode, lanes, key);
+        }
+      // eslint-disable-next-line no-fallthrough
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
@@ -745,6 +753,24 @@ export function createFiberFromLegacyHidden(
   return fiber;
 }
 
+export function createFiberFromCache(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: null | string,
+) {
+  const fiber = createFiber(CacheComponent, pendingProps, key, mode);
+  // TODO: The Cache fiber shouldn't have a type. It has a tag.
+  // This needs to be fixed in getComponentName so that it relies on the tag
+  // instead.
+  if (__DEV__) {
+    fiber.type = REACT_CACHE_TYPE;
+  }
+  fiber.elementType = REACT_CACHE_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
 export function createFiberFromText(
   content: string,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 056d9c8b1ca7..52e6216d442e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -23,6 +23,12 @@ import type {
   OffscreenProps,
   OffscreenState,
 } from './ReactFiberOffscreenComponent';
+import type {
+  Cache,
+  CacheComponentState,
+  SpawnedCachePool,
+} from './ReactFiberCacheComponent.new';
+import type {UpdateQueue} from './ReactUpdateQueue.new';
 
 import checkPropTypes from 'shared/checkPropTypes';
 
@@ -50,6 +56,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {
   NoFlags,
@@ -76,6 +83,7 @@ import {
   enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -129,6 +137,7 @@ import {
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
   supportsHydration,
+  isPrimaryRenderer,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldSuspend} from './ReactFiberReconciler';
@@ -201,6 +210,16 @@ import {
 } from './ReactFiberWorkLoop.new';
 import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
+import {
+  requestCacheFromPool,
+  pushCacheProvider,
+  pushRootCachePool,
+  CacheContext,
+  getSuspendedCachePool,
+  restoreSpawnedCachePool,
+  getOffscreenDeferredCachePool,
+} from './ReactFiberCacheComponent.new';
+import {MAX_SIGNED_31_BIT_INT} from './MaxInts';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
@@ -576,23 +595,39 @@ function updateOffscreenComponent(
   const prevState: OffscreenState | null =
     current !== null ? current.memoizedState : null;
 
+  // If this is not null, this is a cache pool that was carried over from the
+  // previous render. We will push this to the cache pool context so that we can
+  // resume in-flight requests.
+  let spawnedCachePool: SpawnedCachePool | null = null;
+
   if (
     nextProps.mode === 'hidden' ||
     nextProps.mode === 'unstable-defer-without-hiding'
   ) {
+    // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
       // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
+        cachePool: null,
       };
       workInProgress.memoizedState = nextState;
       pushRenderLanes(workInProgress, renderLanes);
     } 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.
       let nextBaseLanes;
       if (prevState !== null) {
         const prevBaseLanes = prevState.baseLanes;
         nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
+        if (enableCache) {
+          // Save the cache pool so we can resume later.
+          spawnedCachePool = getOffscreenDeferredCachePool();
+          // We don't need to push to the cache pool because we're about to
+          // bail out. There won't be a context mismatch because we only pop
+          // the cache pool if `updateQueue` is non-null.
+        }
       } else {
         nextBaseLanes = renderLanes;
       }
@@ -606,16 +641,35 @@ function updateOffscreenComponent(
       );
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
+        cachePool: spawnedCachePool,
       };
       workInProgress.memoizedState = nextState;
+      workInProgress.updateQueue = null;
       // We're about to bail out, but we need to push this to the stack anyway
       // to avoid a push/pop misalignment.
       pushRenderLanes(workInProgress, nextBaseLanes);
       return null;
     } else {
+      // This is the second render. The surrounding visible content has already
+      // committed. Now we resume rendering the hidden tree.
+
+      if (enableCache && prevState !== 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.cachePool;
+        if (prevCachePool !== null) {
+          spawnedCachePool = restoreSpawnedCachePool(
+            workInProgress,
+            prevCachePool,
+          );
+        }
+      }
+
       // Rendering at offscreen, so we can clear the base lanes.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
+        cachePool: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -624,9 +678,26 @@ function updateOffscreenComponent(
       pushRenderLanes(workInProgress, subtreeRenderLanes);
     }
   } else {
+    // Rendering a visible tree.
     let subtreeRenderLanes;
     if (prevState !== null) {
+      // We're going from hidden -> visible.
+
       subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
+
+      if (enableCache) {
+        // 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.cachePool;
+        if (prevCachePool !== null) {
+          spawnedCachePool = restoreSpawnedCachePool(
+            workInProgress,
+            prevCachePool,
+          );
+        }
+      }
+
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
     } else {
@@ -638,6 +709,12 @@ function updateOffscreenComponent(
     pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
+  if (enableCache) {
+    // If we have a cache pool from a previous render attempt, then this will be
+    // non-null. We use this to infer whether to push/pop the cache context.
+    workInProgress.updateQueue = spawnedCachePool;
+  }
+
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
 }
@@ -647,6 +724,79 @@ function updateOffscreenComponent(
 // fork the function.
 const updateLegacyHiddenComponent = updateOffscreenComponent;
 
+function updateCacheComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  updateLanes: Lanes,
+  renderLanes: Lanes,
+) {
+  if (!enableCache) {
+    return null;
+  }
+
+  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(renderLanes, updateLanes)) {
+      cloneUpdateQueue(current, workInProgress);
+      processUpdateQueue(workInProgress, null, null, renderLanes);
+    }
+    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,
+          MAX_SIGNED_31_BIT_INT,
+          renderLanes,
+        );
+      }
+    }
+  }
+
+  const nextChildren = workInProgress.pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateFragment(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -991,10 +1141,28 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   );
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
-  const prevChildren = prevState !== null ? prevState.element : null;
+  const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
   const nextState = workInProgress.memoizedState;
+
+  const root: FiberRoot = workInProgress.stateNode;
+
+  if (enableCache) {
+    const nextCache: Cache = nextState.cache;
+    pushRootCachePool(root);
+    pushCacheProvider(workInProgress, nextCache);
+    if (nextCache !== prevState.cache) {
+      // The root cache refreshed.
+      propagateContextChange(
+        workInProgress,
+        CacheContext,
+        MAX_SIGNED_31_BIT_INT,
+        renderLanes,
+      );
+    }
+  }
+
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
@@ -1002,7 +1170,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     resetHydrationState();
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
-  const root: FiberRoot = workInProgress.stateNode;
   if (root.hydrate && enterHydrationState(workInProgress)) {
     // If we don't have any current children this might be the first pass.
     // We always try to hydrate. If this isn't a hydration pass there won't
@@ -1562,6 +1729,7 @@ const SUSPENDED_MARKER: SuspenseState = {
 function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
+    cachePool: getSuspendedCachePool(),
   };
 }
 
@@ -1569,8 +1737,33 @@ function updateSuspenseOffscreenState(
   prevOffscreenState: OffscreenState,
   renderLanes: Lanes,
 ): OffscreenState {
+  let cachePool: SpawnedCachePool | null = null;
+  if (enableCache) {
+    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 = getSuspendedCachePool();
+    }
+  }
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
+    cachePool,
   };
 }
 
@@ -2801,7 +2994,7 @@ function updateContextProvider(
     }
   }
 
-  pushProvider(workInProgress, newValue);
+  pushProvider(workInProgress, context, newValue);
 
   if (oldProps !== null) {
     const oldValue = oldProps.value;
@@ -3068,6 +3261,12 @@ function beginWork(
       switch (workInProgress.tag) {
         case HostRoot:
           pushHostRootContext(workInProgress);
+          if (enableCache) {
+            const root: FiberRoot = workInProgress.stateNode;
+            const cache: Cache = current.memoizedState.cache;
+            pushCacheProvider(workInProgress, cache);
+            pushRootCachePool(root);
+          }
           resetHydrationState();
           break;
         case HostComponent:
@@ -3088,7 +3287,8 @@ function beginWork(
           break;
         case ContextProvider: {
           const newValue = workInProgress.memoizedProps.value;
-          pushProvider(workInProgress, newValue);
+          const context: ReactContext<any> = workInProgress.type._context;
+          pushProvider(workInProgress, context, newValue);
           break;
         }
         case Profiler:
@@ -3234,6 +3434,13 @@ function beginWork(
           workInProgress.lanes = NoLanes;
           return updateOffscreenComponent(current, workInProgress, renderLanes);
         }
+        case CacheComponent: {
+          if (enableCache) {
+            const cache: Cache = current.memoizedState.cache;
+            pushCacheProvider(workInProgress, cache);
+          }
+          break;
+        }
       }
       return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     } else {
@@ -3418,6 +3625,17 @@ function beginWork(
     case LegacyHiddenComponent: {
       return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
     }
+    case CacheComponent: {
+      if (enableCache) {
+        return updateCacheComponent(
+          current,
+          workInProgress,
+          updateLanes,
+          renderLanes,
+        );
+      }
+      break;
+    }
   }
   invariant(
     false,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 3f462e198aaf..5a25d0a9cd65 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -23,6 +23,12 @@ import type {
   OffscreenProps,
   OffscreenState,
 } from './ReactFiberOffscreenComponent';
+import type {
+  Cache,
+  CacheComponentState,
+  SpawnedCachePool,
+} from './ReactFiberCacheComponent.old';
+import type {UpdateQueue} from './ReactUpdateQueue.old';
 
 import checkPropTypes from 'shared/checkPropTypes';
 
@@ -50,6 +56,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {
   NoFlags,
@@ -76,6 +83,7 @@ import {
   enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -129,6 +137,7 @@ import {
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
   supportsHydration,
+  isPrimaryRenderer,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldSuspend} from './ReactFiberReconciler';
@@ -201,6 +210,16 @@ import {
 } from './ReactFiberWorkLoop.old';
 import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
+import {
+  requestCacheFromPool,
+  pushCacheProvider,
+  pushRootCachePool,
+  CacheContext,
+  getSuspendedCachePool,
+  restoreSpawnedCachePool,
+  getOffscreenDeferredCachePool,
+} from './ReactFiberCacheComponent.old';
+import {MAX_SIGNED_31_BIT_INT} from './MaxInts';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
@@ -576,23 +595,39 @@ function updateOffscreenComponent(
   const prevState: OffscreenState | null =
     current !== null ? current.memoizedState : null;
 
+  // If this is not null, this is a cache pool that was carried over from the
+  // previous render. We will push this to the cache pool context so that we can
+  // resume in-flight requests.
+  let spawnedCachePool: SpawnedCachePool | null = null;
+
   if (
     nextProps.mode === 'hidden' ||
     nextProps.mode === 'unstable-defer-without-hiding'
   ) {
+    // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
       // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
+        cachePool: null,
       };
       workInProgress.memoizedState = nextState;
       pushRenderLanes(workInProgress, renderLanes);
     } 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.
       let nextBaseLanes;
       if (prevState !== null) {
         const prevBaseLanes = prevState.baseLanes;
         nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
+        if (enableCache) {
+          // Save the cache pool so we can resume later.
+          spawnedCachePool = getOffscreenDeferredCachePool();
+          // We don't need to push to the cache pool because we're about to
+          // bail out. There won't be a context mismatch because we only pop
+          // the cache pool if `updateQueue` is non-null.
+        }
       } else {
         nextBaseLanes = renderLanes;
       }
@@ -606,16 +641,35 @@ function updateOffscreenComponent(
       );
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
+        cachePool: spawnedCachePool,
       };
       workInProgress.memoizedState = nextState;
+      workInProgress.updateQueue = null;
       // We're about to bail out, but we need to push this to the stack anyway
       // to avoid a push/pop misalignment.
       pushRenderLanes(workInProgress, nextBaseLanes);
       return null;
     } else {
+      // This is the second render. The surrounding visible content has already
+      // committed. Now we resume rendering the hidden tree.
+
+      if (enableCache && prevState !== 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.cachePool;
+        if (prevCachePool !== null) {
+          spawnedCachePool = restoreSpawnedCachePool(
+            workInProgress,
+            prevCachePool,
+          );
+        }
+      }
+
       // Rendering at offscreen, so we can clear the base lanes.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
+        cachePool: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -624,9 +678,26 @@ function updateOffscreenComponent(
       pushRenderLanes(workInProgress, subtreeRenderLanes);
     }
   } else {
+    // Rendering a visible tree.
     let subtreeRenderLanes;
     if (prevState !== null) {
+      // We're going from hidden -> visible.
+
       subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
+
+      if (enableCache) {
+        // 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.cachePool;
+        if (prevCachePool !== null) {
+          spawnedCachePool = restoreSpawnedCachePool(
+            workInProgress,
+            prevCachePool,
+          );
+        }
+      }
+
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
     } else {
@@ -638,6 +709,12 @@ function updateOffscreenComponent(
     pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
+  if (enableCache) {
+    // If we have a cache pool from a previous render attempt, then this will be
+    // non-null. We use this to infer whether to push/pop the cache context.
+    workInProgress.updateQueue = spawnedCachePool;
+  }
+
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
 }
@@ -647,6 +724,79 @@ function updateOffscreenComponent(
 // fork the function.
 const updateLegacyHiddenComponent = updateOffscreenComponent;
 
+function updateCacheComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  updateLanes: Lanes,
+  renderLanes: Lanes,
+) {
+  if (!enableCache) {
+    return null;
+  }
+
+  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(renderLanes, updateLanes)) {
+      cloneUpdateQueue(current, workInProgress);
+      processUpdateQueue(workInProgress, null, null, renderLanes);
+    }
+    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,
+          MAX_SIGNED_31_BIT_INT,
+          renderLanes,
+        );
+      }
+    }
+  }
+
+  const nextChildren = workInProgress.pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateFragment(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -991,10 +1141,28 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   );
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
-  const prevChildren = prevState !== null ? prevState.element : null;
+  const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
   const nextState = workInProgress.memoizedState;
+
+  const root: FiberRoot = workInProgress.stateNode;
+
+  if (enableCache) {
+    const nextCache: Cache = nextState.cache;
+    pushRootCachePool(root);
+    pushCacheProvider(workInProgress, nextCache);
+    if (nextCache !== prevState.cache) {
+      // The root cache refreshed.
+      propagateContextChange(
+        workInProgress,
+        CacheContext,
+        MAX_SIGNED_31_BIT_INT,
+        renderLanes,
+      );
+    }
+  }
+
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
@@ -1002,7 +1170,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     resetHydrationState();
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
-  const root: FiberRoot = workInProgress.stateNode;
   if (root.hydrate && enterHydrationState(workInProgress)) {
     // If we don't have any current children this might be the first pass.
     // We always try to hydrate. If this isn't a hydration pass there won't
@@ -1562,6 +1729,7 @@ const SUSPENDED_MARKER: SuspenseState = {
 function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
+    cachePool: getSuspendedCachePool(),
   };
 }
 
@@ -1569,8 +1737,33 @@ function updateSuspenseOffscreenState(
   prevOffscreenState: OffscreenState,
   renderLanes: Lanes,
 ): OffscreenState {
+  let cachePool: SpawnedCachePool | null = null;
+  if (enableCache) {
+    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 = getSuspendedCachePool();
+    }
+  }
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
+    cachePool,
   };
 }
 
@@ -2801,7 +2994,7 @@ function updateContextProvider(
     }
   }
 
-  pushProvider(workInProgress, newValue);
+  pushProvider(workInProgress, context, newValue);
 
   if (oldProps !== null) {
     const oldValue = oldProps.value;
@@ -3068,6 +3261,12 @@ function beginWork(
       switch (workInProgress.tag) {
         case HostRoot:
           pushHostRootContext(workInProgress);
+          if (enableCache) {
+            const root: FiberRoot = workInProgress.stateNode;
+            const cache: Cache = current.memoizedState.cache;
+            pushCacheProvider(workInProgress, cache);
+            pushRootCachePool(root);
+          }
           resetHydrationState();
           break;
         case HostComponent:
@@ -3088,7 +3287,8 @@ function beginWork(
           break;
         case ContextProvider: {
           const newValue = workInProgress.memoizedProps.value;
-          pushProvider(workInProgress, newValue);
+          const context: ReactContext<any> = workInProgress.type._context;
+          pushProvider(workInProgress, context, newValue);
           break;
         }
         case Profiler:
@@ -3234,6 +3434,13 @@ function beginWork(
           workInProgress.lanes = NoLanes;
           return updateOffscreenComponent(current, workInProgress, renderLanes);
         }
+        case CacheComponent: {
+          if (enableCache) {
+            const cache: Cache = current.memoizedState.cache;
+            pushCacheProvider(workInProgress, cache);
+          }
+          break;
+        }
       }
       return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     } else {
@@ -3418,6 +3625,17 @@ function beginWork(
     case LegacyHiddenComponent: {
       return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
     }
+    case CacheComponent: {
+      if (enableCache) {
+        return updateCacheComponent(
+          current,
+          workInProgress,
+          updateLanes,
+          renderLanes,
+        );
+      }
+      break;
+    }
   }
   invariant(
     false,
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
new file mode 100644
index 000000000000..b5ae3ccc611a
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactContext} from 'shared/ReactTypes';
+import type {FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane.new';
+import type {StackCursor} from './ReactFiberStack.new';
+
+import {enableCache} from 'shared/ReactFeatureFlags';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+
+import {isPrimaryRenderer} from './ReactFiberHostConfig';
+import {createCursor, push, pop} from './ReactFiberStack.new';
+import {pushProvider, popProvider} from './ReactFiberNewContext.new';
+
+export type Cache = Map<() => mixed, mixed>;
+
+export type CacheComponentState = {|
+  +parent: Cache,
+  +cache: Cache,
+|};
+
+export type SpawnedCachePool = {|
+  +parent: Cache,
+  +pool: Cache,
+|};
+
+export const CacheContext: ReactContext<Cache> = enableCache
+  ? {
+      $$typeof: REACT_CONTEXT_TYPE,
+      // We don't use Consumer/Provider for Cache components. So we'll cheat.
+      Consumer: (null: any),
+      Provider: (null: any),
+      _calculateChangedBits: null,
+      // We'll initialize these at the root.
+      _currentValue: (null: any),
+      _currentValue2: (null: any),
+      _threadCount: 0,
+    }
+  : (null: any);
+
+if (__DEV__ && enableCache) {
+  CacheContext._currentRenderer = null;
+  CacheContext._currentRenderer2 = null;
+}
+
+// The cache that newly mounted Cache boundaries should use. It's either
+// retrieved from the cache pool, or the result of a refresh.
+let pooledCache: Cache | null = null;
+
+// When retrying a Suspense/Offscreen boundary, we override pooledCache with the
+// cache from the render that suspended.
+const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(null);
+
+export function pushCacheProvider(workInProgress: Fiber, cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  pushProvider(workInProgress, CacheContext, cache);
+}
+
+export function popCacheProvider(workInProgress: Fiber, cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  popProvider(CacheContext, workInProgress);
+}
+
+export function requestCacheFromPool(renderLanes: Lanes): Cache {
+  if (!enableCache) {
+    return (null: any);
+  }
+  if (pooledCache !== null) {
+    return pooledCache;
+  }
+  // Create a fresh cache.
+  pooledCache = new Map();
+  return pooledCache;
+}
+
+export function pushRootCachePool(root: FiberRoot) {
+  if (!enableCache) {
+    return;
+  }
+  // When we start rendering a tree, read the pooled cache for this render
+  // from `root.pooledCache`. If it's currently `null`, we will lazily
+  // initialize it the first type it's requested. However, we only mutate
+  // the root itself during the complete/unwind phase of the HostRoot.
+  pooledCache = root.pooledCache;
+}
+
+export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
+  if (!enableCache) {
+    return;
+  }
+  // The `pooledCache` variable points to the cache that was used for new
+  // cache boundaries during this render, if any. Stash it on the root so that
+  // parallel transitions may share the same cache. We will clear this field
+  // once all the transitions that depend on it (which we track with
+  // `pooledCacheLanes`) have committed.
+  root.pooledCache = pooledCache;
+  if (pooledCache !== null) {
+    root.pooledCacheLanes |= renderLanes;
+  }
+}
+
+export function restoreSpawnedCachePool(
+  offscreenWorkInProgress: Fiber,
+  prevCachePool: SpawnedCachePool,
+): SpawnedCachePool | null {
+  if (!enableCache) {
+    return (null: any);
+  }
+  const nextParentCache = isPrimaryRenderer
+    ? CacheContext._currentValue
+    : CacheContext._currentValue2;
+  if (nextParentCache !== prevCachePool.parent) {
+    // There was a refresh. Don't bother restoring anything since the refresh
+    // will override it.
+    return null;
+  } else {
+    // No refresh. Resume with the previous cache. This will override the cache
+    // pool so that any new Cache boundaries in the subtree use this one instead
+    // of requesting a fresh one.
+    push(prevFreshCacheOnStack, pooledCache, offscreenWorkInProgress);
+    pooledCache = prevCachePool.pool;
+
+    // Return the cache pool to signal that we did in fact push it. We will
+    // assign this to the field on the fiber so we know to pop the context.
+    return prevCachePool;
+  }
+}
+
+// Note: Ideally, `popCachePool` would return this value, and then we would pass
+// it to `getSuspendedCachePool`. But factoring reasons, those two functions are
+// in different phases/files. They are always called in sequence, though, so we
+// can stash the value here temporarily.
+let _suspendedPooledCache: Cache | null = null;
+
+export function popCachePool(workInProgress: Fiber) {
+  if (!enableCache) {
+    return;
+  }
+  _suspendedPooledCache = pooledCache;
+  pooledCache = prevFreshCacheOnStack.current;
+  pop(prevFreshCacheOnStack, workInProgress);
+}
+
+export function getSuspendedCachePool(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return null;
+  }
+
+  // We check the cache on the stack first, since that's the one any new Caches
+  // would have accessed.
+  let pool = pooledCache;
+  if (pool === null) {
+    // There's no pooled cache above us in the stack. However, a child in the
+    // suspended tree may have requested a fresh cache pool. If so, we would
+    // have unwound it with `popCachePool`.
+    if (_suspendedPooledCache !== null) {
+      pool = _suspendedPooledCache;
+      _suspendedPooledCache = null;
+    } else {
+      // There's no suspended cache pool.
+      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,
+  };
+}
+
+export function getOffscreenDeferredCachePool(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return null;
+  }
+
+  if (pooledCache === null) {
+    // There's no deferred cache pool.
+    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: pooledCache,
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
new file mode 100644
index 000000000000..8882f7dbd2d4
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -0,0 +1,204 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactContext} from 'shared/ReactTypes';
+import type {FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane.old';
+import type {StackCursor} from './ReactFiberStack.old';
+
+import {enableCache} from 'shared/ReactFeatureFlags';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+
+import {isPrimaryRenderer} from './ReactFiberHostConfig';
+import {createCursor, push, pop} from './ReactFiberStack.old';
+import {pushProvider, popProvider} from './ReactFiberNewContext.old';
+
+export type Cache = Map<() => mixed, mixed>;
+
+export type CacheComponentState = {|
+  +parent: Cache,
+  +cache: Cache,
+|};
+
+export type SpawnedCachePool = {|
+  +parent: Cache,
+  +pool: Cache,
+|};
+
+export const CacheContext: ReactContext<Cache> = enableCache
+  ? {
+      $$typeof: REACT_CONTEXT_TYPE,
+      // We don't use Consumer/Provider for Cache components. So we'll cheat.
+      Consumer: (null: any),
+      Provider: (null: any),
+      _calculateChangedBits: null,
+      // We'll initialize these at the root.
+      _currentValue: (null: any),
+      _currentValue2: (null: any),
+      _threadCount: 0,
+    }
+  : (null: any);
+
+if (__DEV__ && enableCache) {
+  CacheContext._currentRenderer = null;
+  CacheContext._currentRenderer2 = null;
+}
+
+// The cache that newly mounted Cache boundaries should use. It's either
+// retrieved from the cache pool, or the result of a refresh.
+let pooledCache: Cache | null = null;
+
+// When retrying a Suspense/Offscreen boundary, we override pooledCache with the
+// cache from the render that suspended.
+const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(null);
+
+export function pushCacheProvider(workInProgress: Fiber, cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  pushProvider(workInProgress, CacheContext, cache);
+}
+
+export function popCacheProvider(workInProgress: Fiber, cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  popProvider(CacheContext, workInProgress);
+}
+
+export function requestCacheFromPool(renderLanes: Lanes): Cache {
+  if (!enableCache) {
+    return (null: any);
+  }
+  if (pooledCache !== null) {
+    return pooledCache;
+  }
+  // Create a fresh cache.
+  pooledCache = new Map();
+  return pooledCache;
+}
+
+export function pushRootCachePool(root: FiberRoot) {
+  if (!enableCache) {
+    return;
+  }
+  // When we start rendering a tree, read the pooled cache for this render
+  // from `root.pooledCache`. If it's currently `null`, we will lazily
+  // initialize it the first type it's requested. However, we only mutate
+  // the root itself during the complete/unwind phase of the HostRoot.
+  pooledCache = root.pooledCache;
+}
+
+export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
+  if (!enableCache) {
+    return;
+  }
+  // The `pooledCache` variable points to the cache that was used for new
+  // cache boundaries during this render, if any. Stash it on the root so that
+  // parallel transitions may share the same cache. We will clear this field
+  // once all the transitions that depend on it (which we track with
+  // `pooledCacheLanes`) have committed.
+  root.pooledCache = pooledCache;
+  if (pooledCache !== null) {
+    root.pooledCacheLanes |= renderLanes;
+  }
+}
+
+export function restoreSpawnedCachePool(
+  offscreenWorkInProgress: Fiber,
+  prevCachePool: SpawnedCachePool,
+): SpawnedCachePool | null {
+  if (!enableCache) {
+    return (null: any);
+  }
+  const nextParentCache = isPrimaryRenderer
+    ? CacheContext._currentValue
+    : CacheContext._currentValue2;
+  if (nextParentCache !== prevCachePool.parent) {
+    // There was a refresh. Don't bother restoring anything since the refresh
+    // will override it.
+    return null;
+  } else {
+    // No refresh. Resume with the previous cache. This will override the cache
+    // pool so that any new Cache boundaries in the subtree use this one instead
+    // of requesting a fresh one.
+    push(prevFreshCacheOnStack, pooledCache, offscreenWorkInProgress);
+    pooledCache = prevCachePool.pool;
+
+    // Return the cache pool to signal that we did in fact push it. We will
+    // assign this to the field on the fiber so we know to pop the context.
+    return prevCachePool;
+  }
+}
+
+// Note: Ideally, `popCachePool` would return this value, and then we would pass
+// it to `getSuspendedCachePool`. But factoring reasons, those two functions are
+// in different phases/files. They are always called in sequence, though, so we
+// can stash the value here temporarily.
+let _suspendedPooledCache: Cache | null = null;
+
+export function popCachePool(workInProgress: Fiber) {
+  if (!enableCache) {
+    return;
+  }
+  _suspendedPooledCache = pooledCache;
+  pooledCache = prevFreshCacheOnStack.current;
+  pop(prevFreshCacheOnStack, workInProgress);
+}
+
+export function getSuspendedCachePool(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return null;
+  }
+
+  // We check the cache on the stack first, since that's the one any new Caches
+  // would have accessed.
+  let pool = pooledCache;
+  if (pool === null) {
+    // There's no pooled cache above us in the stack. However, a child in the
+    // suspended tree may have requested a fresh cache pool. If so, we would
+    // have unwound it with `popCachePool`.
+    if (_suspendedPooledCache !== null) {
+      pool = _suspendedPooledCache;
+      _suspendedPooledCache = null;
+    } else {
+      // There's no suspended cache pool.
+      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,
+  };
+}
+
+export function getOffscreenDeferredCachePool(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return null;
+  }
+
+  if (pooledCache === null) {
+    // There's no deferred cache pool.
+    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: pooledCache,
+  };
+}
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 53a328121051..92fa3eeacb60 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -12,6 +12,7 @@ import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {
   ReactFundamentalComponentInstance,
   ReactScopeInstance,
+  ReactContext,
 } from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {
@@ -27,6 +28,7 @@ import type {
 } from './ReactFiberSuspenseComponent.new';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 
@@ -56,6 +58,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {
   NoMode,
@@ -132,6 +135,7 @@ import {
   enableFundamentalAPI,
   enableScopeAPI,
   enableProfilerTimer,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
   markSpawnedWork,
@@ -153,6 +157,11 @@ import {
 import {resetChildFibers} from './ReactChildFiber.new';
 import {createScopeInstance} from './ReactFiberScope.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
+import {
+  popCacheProvider,
+  popRootCachePool,
+  popCachePool,
+} from './ReactFiberCacheComponent.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -808,10 +817,16 @@ function completeWork(
       return null;
     }
     case HostRoot: {
+      const fiberRoot = (workInProgress.stateNode: FiberRoot);
+      if (enableCache) {
+        popRootCachePool(fiberRoot, renderLanes);
+
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+      }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
-      const fiberRoot = (workInProgress.stateNode: FiberRoot);
       if (fiberRoot.pendingContext) {
         fiberRoot.context = fiberRoot.pendingContext;
         fiberRoot.pendingContext = null;
@@ -1135,7 +1150,8 @@ function completeWork(
       return null;
     case ContextProvider:
       // Pop provider fiber
-      popProvider(workInProgress);
+      const context: ReactContext<any> = workInProgress.type._context;
+      popProvider(context, workInProgress);
       bubbleProperties(workInProgress);
       return null;
     case IncompleteClassComponent: {
@@ -1479,8 +1495,23 @@ function completeWork(
         bubbleProperties(workInProgress);
       }
 
+      if (enableCache) {
+        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
+        if (spawnedCachePool !== null) {
+          popCachePool(workInProgress);
+        }
+      }
+
       return null;
     }
+    case CacheComponent: {
+      if (enableCache) {
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+        bubbleProperties(workInProgress);
+        return null;
+      }
+    }
   }
   invariant(
     false,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 8f0e68353d90..a44029c8347c 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -12,6 +12,7 @@ import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {
   ReactFundamentalComponentInstance,
   ReactScopeInstance,
+  ReactContext,
 } from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {
@@ -27,6 +28,7 @@ import type {
 } from './ReactFiberSuspenseComponent.old';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 
@@ -56,6 +58,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {
   NoMode,
@@ -132,6 +135,7 @@ import {
   enableFundamentalAPI,
   enableScopeAPI,
   enableProfilerTimer,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
   markSpawnedWork,
@@ -153,6 +157,11 @@ import {
 import {resetChildFibers} from './ReactChildFiber.old';
 import {createScopeInstance} from './ReactFiberScope.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
+import {
+  popCacheProvider,
+  popRootCachePool,
+  popCachePool,
+} from './ReactFiberCacheComponent.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -808,10 +817,16 @@ function completeWork(
       return null;
     }
     case HostRoot: {
+      const fiberRoot = (workInProgress.stateNode: FiberRoot);
+      if (enableCache) {
+        popRootCachePool(fiberRoot, renderLanes);
+
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+      }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
-      const fiberRoot = (workInProgress.stateNode: FiberRoot);
       if (fiberRoot.pendingContext) {
         fiberRoot.context = fiberRoot.pendingContext;
         fiberRoot.pendingContext = null;
@@ -1135,7 +1150,8 @@ function completeWork(
       return null;
     case ContextProvider:
       // Pop provider fiber
-      popProvider(workInProgress);
+      const context: ReactContext<any> = workInProgress.type._context;
+      popProvider(context, workInProgress);
       bubbleProperties(workInProgress);
       return null;
     case IncompleteClassComponent: {
@@ -1479,8 +1495,23 @@ function completeWork(
         bubbleProperties(workInProgress);
       }
 
+      if (enableCache) {
+        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
+        if (spawnedCachePool !== null) {
+          popCachePool(workInProgress);
+        }
+      }
+
       return null;
     }
+    case CacheComponent: {
+      if (enableCache) {
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+        bubbleProperties(workInProgress);
+        return null;
+      }
+    }
   }
   invariant(
     false,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 66c85b274df0..d5ad5048926e 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -19,6 +19,7 @@ import type {HookFlags} from './ReactHookEffectTags';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {OpaqueIDType} from './ReactFiberHostConfig';
+import type {Cache} from './ReactFiberCacheComponent.new';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -46,6 +47,7 @@ import {
   DefaultLanePriority,
 } from './ReactFiberLane.new';
 import {readContext} from './ReactFiberNewContext.new';
+import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
@@ -92,6 +94,8 @@ import {
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
+import {CacheContext} from './ReactFiberCacheComponent.new';
+import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1707,6 +1711,55 @@ function rerenderOpaqueIdentifier(): OpaqueIDType | void {
   return id;
 }
 
+function mountRefresh() {
+  const hook = mountWorkInProgressHook();
+  const refresh = (hook.memoizedState = refreshCache.bind(
+    null,
+    currentlyRenderingFiber,
+  ));
+  return refresh;
+}
+
+function updateRefresh() {
+  const hook = updateWorkInProgressHook();
+  return hook.memoizedState;
+}
+
+function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
+  // 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: {
+        const lane = requestUpdateLane(provider);
+        const eventTime = requestEventTime();
+        const root = scheduleUpdateOnFiber(provider, lane, eventTime);
+
+        const seededCache = new Map();
+        if (seedKey !== null && seedKey !== undefined && root !== null) {
+          // 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.set(seedKey, seedValue);
+        }
+
+        // Schedule an update on the cache boundary to trigger a refresh.
+        const refreshUpdate = createUpdate(eventTime, lane);
+        const payload = {
+          cache: seededCache,
+        };
+        refreshUpdate.payload = payload;
+        enqueueUpdate(provider, refreshUpdate);
+        return;
+      }
+    }
+    provider = provider.return;
+  }
+  // TODO: Warn if unmounted?
+}
+
 function dispatchAction<S, A>(
   fiber: Fiber,
   queue: UpdateQueue<S, A>,
@@ -1818,7 +1871,16 @@ function dispatchAction<S, A>(
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  if (!enableCache) {
+    invariant(false, 'Not implemented.');
+  }
+  const cache: Cache = readContext(CacheContext);
+  let cacheForType: T | void = (cache.get(resourceType): any);
+  if (cacheForType === undefined) {
+    cacheForType = resourceType();
+    cache.set(resourceType, cacheForType);
+  }
+  return cacheForType;
 }
 
 export const ContextOnlyDispatcher: Dispatcher = {
@@ -1843,6 +1905,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
 };
 if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
+  (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
 
 const HooksDispatcherOnMount: Dispatcher = {
@@ -1865,6 +1928,10 @@ const HooksDispatcherOnMount: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
+  (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
+}
 
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
@@ -1888,6 +1955,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
 };
 if (enableCache) {
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
+  (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
 
 const HooksDispatcherOnRerender: Dispatcher = {
@@ -1912,6 +1980,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
 };
 if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
+  (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
@@ -2069,6 +2138,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      mountHookTypesDev();
+      return mountRefresh();
+    };
   }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
@@ -2194,6 +2268,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return mountRefresh();
+    };
   }
 
   HooksDispatcherOnUpdateInDEV = {
@@ -2319,6 +2398,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 
   HooksDispatcherOnRerenderInDEV = {
@@ -2445,6 +2529,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
@@ -2585,6 +2674,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return mountRefresh();
+    };
   }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
@@ -2725,6 +2819,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
@@ -2866,5 +2965,10 @@ if (__DEV__) {
   };
   if (enableCache) {
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 49e222fa6735..45ff2b50665c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -19,6 +19,7 @@ import type {HookFlags} from './ReactHookEffectTags';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {OpaqueIDType} from './ReactFiberHostConfig';
+import type {Cache} from './ReactFiberCacheComponent.old';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -46,6 +47,7 @@ import {
   DefaultLanePriority,
 } from './ReactFiberLane.old';
 import {readContext} from './ReactFiberNewContext.old';
+import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
@@ -92,6 +94,8 @@ import {
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
+import {CacheContext} from './ReactFiberCacheComponent.old';
+import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1707,6 +1711,55 @@ function rerenderOpaqueIdentifier(): OpaqueIDType | void {
   return id;
 }
 
+function mountRefresh() {
+  const hook = mountWorkInProgressHook();
+  const refresh = (hook.memoizedState = refreshCache.bind(
+    null,
+    currentlyRenderingFiber,
+  ));
+  return refresh;
+}
+
+function updateRefresh() {
+  const hook = updateWorkInProgressHook();
+  return hook.memoizedState;
+}
+
+function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
+  // 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: {
+        const lane = requestUpdateLane(provider);
+        const eventTime = requestEventTime();
+        const root = scheduleUpdateOnFiber(provider, lane, eventTime);
+
+        const seededCache = new Map();
+        if (seedKey !== null && seedKey !== undefined && root !== null) {
+          // 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.set(seedKey, seedValue);
+        }
+
+        // Schedule an update on the cache boundary to trigger a refresh.
+        const refreshUpdate = createUpdate(eventTime, lane);
+        const payload = {
+          cache: seededCache,
+        };
+        refreshUpdate.payload = payload;
+        enqueueUpdate(provider, refreshUpdate);
+        return;
+      }
+    }
+    provider = provider.return;
+  }
+  // TODO: Warn if unmounted?
+}
+
 function dispatchAction<S, A>(
   fiber: Fiber,
   queue: UpdateQueue<S, A>,
@@ -1818,7 +1871,16 @@ function dispatchAction<S, A>(
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  if (!enableCache) {
+    invariant(false, 'Not implemented.');
+  }
+  const cache: Cache = readContext(CacheContext);
+  let cacheForType: T | void = (cache.get(resourceType): any);
+  if (cacheForType === undefined) {
+    cacheForType = resourceType();
+    cache.set(resourceType, cacheForType);
+  }
+  return cacheForType;
 }
 
 export const ContextOnlyDispatcher: Dispatcher = {
@@ -1843,6 +1905,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
 };
 if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
+  (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
 
 const HooksDispatcherOnMount: Dispatcher = {
@@ -1865,6 +1928,10 @@ const HooksDispatcherOnMount: Dispatcher = {
 
   unstable_isNewReconciler: enableNewReconciler,
 };
+if (enableCache) {
+  (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
+  (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
+}
 
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
@@ -1888,6 +1955,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
 };
 if (enableCache) {
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
+  (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
 
 const HooksDispatcherOnRerender: Dispatcher = {
@@ -1912,6 +1980,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
 };
 if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
+  (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
@@ -2069,6 +2138,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      mountHookTypesDev();
+      return mountRefresh();
+    };
   }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
@@ -2194,6 +2268,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return mountRefresh();
+    };
   }
 
   HooksDispatcherOnUpdateInDEV = {
@@ -2319,6 +2398,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 
   HooksDispatcherOnRerenderInDEV = {
@@ -2445,6 +2529,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
@@ -2585,6 +2674,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return mountRefresh();
+    };
   }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
@@ -2725,6 +2819,11 @@ if (__DEV__) {
   };
   if (enableCache) {
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
@@ -2866,5 +2965,10 @@ if (__DEV__) {
   };
   if (enableCache) {
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
+      currentHookNameInDev = 'useCacheRefresh';
+      updateHookTypesDev();
+      return updateRefresh();
+    };
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index b5d8846ec200..351035d0c341 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -36,6 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
+import {enableCache} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -737,6 +738,15 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
+  if (enableCache) {
+    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.
+      root.pooledCache = null;
+    }
+  }
+
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index f58ab2053174..7a00fe095e6c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -36,6 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
+import {enableCache} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -737,6 +738,15 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
+  if (enableCache) {
+    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.
+      root.pooledCache = null;
+    }
+  }
+
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 8e387ee012ec..2a084390dcc7 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -72,9 +72,11 @@ export function exitDisallowedContextReadInDEV(): void {
   }
 }
 
-export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
-  const context: ReactContext<T> = providerFiber.type._context;
-
+export function pushProvider<T>(
+  providerFiber: Fiber,
+  context: ReactContext<T>,
+  nextValue: T,
+): void {
   if (isPrimaryRenderer) {
     push(valueCursor, context._currentValue, providerFiber);
 
@@ -112,12 +114,12 @@ export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
   }
 }
 
-export function popProvider(providerFiber: Fiber): void {
+export function popProvider(
+  context: ReactContext<any>,
+  providerFiber: Fiber,
+): void {
   const currentValue = valueCursor.current;
-
   pop(valueCursor, providerFiber);
-
-  const context: ReactContext<any> = providerFiber.type._context;
   if (isPrimaryRenderer) {
     context._currentValue = currentValue;
   } else {
@@ -179,9 +181,9 @@ export function scheduleWorkOnParentPath(
   }
 }
 
-export function propagateContextChange(
+export function propagateContextChange<T>(
   workInProgress: Fiber,
-  context: ReactContext<mixed>,
+  context: ReactContext<T>,
   changedBits: number,
   renderLanes: Lanes,
 ): void {
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index c7f03442d579..934bc6b3fcd5 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -72,9 +72,11 @@ export function exitDisallowedContextReadInDEV(): void {
   }
 }
 
-export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
-  const context: ReactContext<T> = providerFiber.type._context;
-
+export function pushProvider<T>(
+  providerFiber: Fiber,
+  context: ReactContext<T>,
+  nextValue: T,
+): void {
   if (isPrimaryRenderer) {
     push(valueCursor, context._currentValue, providerFiber);
 
@@ -112,12 +114,12 @@ export function pushProvider<T>(providerFiber: Fiber, nextValue: T): void {
   }
 }
 
-export function popProvider(providerFiber: Fiber): void {
+export function popProvider(
+  context: ReactContext<any>,
+  providerFiber: Fiber,
+): void {
   const currentValue = valueCursor.current;
-
   pop(valueCursor, providerFiber);
-
-  const context: ReactContext<any> = providerFiber.type._context;
   if (isPrimaryRenderer) {
     context._currentValue = currentValue;
   } else {
@@ -179,9 +181,9 @@ export function scheduleWorkOnParentPath(
   }
 }
 
-export function propagateContextChange(
+export function propagateContextChange<T>(
   workInProgress: Fiber,
-  context: ReactContext<mixed>,
+  context: ReactContext<T>,
   changedBits: number,
   renderLanes: Lanes,
 ): void {
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 4a013a9d7eaf..acae8d206194 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -9,6 +9,7 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Lanes} from './ReactFiberLane.old';
+import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
 export type OffscreenProps = {|
   // TODO: Pick an API before exposing the Offscreen type. I've chosen an enum
@@ -28,4 +29,5 @@ export type OffscreenState = {|
   // will represent the pending work that must be included in the render in
   // order to unhide the component.
   baseLanes: Lanes,
+  cachePool: SpawnedCachePool | null,
 |};
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 1b504a18fc32..9057137ec61a 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -21,6 +21,7 @@ import {
 import {
   enableSchedulerTracing,
   enableSuspenseCallback,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
@@ -52,6 +53,11 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  if (enableCache) {
+    this.pooledCache = null;
+    this.pooledCacheLanes = NoLanes;
+  }
+
   if (supportsHydration) {
     this.mutableSourceEagerHydrationData = null;
   }
@@ -97,6 +103,21 @@ export function createFiberRoot(
   root.current = uninitializedFiber;
   uninitializedFiber.stateNode = root;
 
+  if (enableCache) {
+    const initialCache = new Map();
+    root.pooledCache = initialCache;
+    const initialState = {
+      element: null,
+      cache: initialCache,
+    };
+    uninitializedFiber.memoizedState = initialState;
+  } else {
+    const initialState = {
+      element: null,
+    };
+    uninitializedFiber.memoizedState = initialState;
+  }
+
   initializeUpdateQueue(uninitializedFiber);
 
   return root;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 84509babdb51..92ec811dd558 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -21,6 +21,7 @@ import {
 import {
   enableSchedulerTracing,
   enableSuspenseCallback,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
@@ -52,6 +53,11 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  if (enableCache) {
+    this.pooledCache = null;
+    this.pooledCacheLanes = NoLanes;
+  }
+
   if (supportsHydration) {
     this.mutableSourceEagerHydrationData = null;
   }
@@ -97,6 +103,21 @@ export function createFiberRoot(
   root.current = uninitializedFiber;
   uninitializedFiber.stateNode = root;
 
+  if (enableCache) {
+    const initialCache = new Map();
+    root.pooledCache = initialCache;
+    const initialState = {
+      element: null,
+      cache: initialCache,
+    };
+    uninitializedFiber.memoizedState = initialState;
+  } else {
+    const initialState = {
+      element: null,
+    };
+    uninitializedFiber.memoizedState = initialState;
+  }
+
   initializeUpdateQueue(uninitializedFiber);
 
   return root;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 058b46be0040..ea670b69f070 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -21,6 +21,9 @@ import {
   HostRoot,
   SuspenseComponent,
   IncompleteClassComponent,
+  FunctionComponent,
+  ForwardRef,
+  SimpleMemoComponent,
 } from './ReactWorkTags';
 import {
   DidCapture,
@@ -209,9 +212,15 @@ function throwException(
       markComponentSuspended(sourceFiber, wakeable);
     }
 
-    if ((sourceFiber.mode & BlockingMode) === NoMode) {
-      // Reset the memoizedState to what it was before we attempted
-      // to render it.
+    // 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 (
+      (sourceFiber.mode & BlockingMode) === NoMode &&
+      (tag === FunctionComponent ||
+        tag === ForwardRef ||
+        tag === SimpleMemoComponent)
+    ) {
       const currentSource = sourceFiber.alternate;
       if (currentSource) {
         sourceFiber.updateQueue = currentSource.updateQueue;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index fbb9daa45262..781d523b4881 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -21,6 +21,9 @@ import {
   HostRoot,
   SuspenseComponent,
   IncompleteClassComponent,
+  FunctionComponent,
+  ForwardRef,
+  SimpleMemoComponent,
 } from './ReactWorkTags';
 import {
   DidCapture,
@@ -209,9 +212,15 @@ function throwException(
       markComponentSuspended(sourceFiber, wakeable);
     }
 
-    if ((sourceFiber.mode & BlockingMode) === NoMode) {
-      // Reset the memoizedState to what it was before we attempted
-      // to render it.
+    // 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 (
+      (sourceFiber.mode & BlockingMode) === NoMode &&
+      (tag === FunctionComponent ||
+        tag === ForwardRef ||
+        tag === SimpleMemoComponent)
+    ) {
       const currentSource = sourceFiber.alternate;
       if (currentSource) {
         sourceFiber.updateQueue = currentSource.updateQueue;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 8d445cedd44f..152837286f5d 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -7,9 +7,11 @@
  * @flow
  */
 
-import type {Fiber} from './ReactInternalTypes';
+import type {ReactContext} from 'shared/ReactTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
@@ -22,12 +24,14 @@ import {
   SuspenseListComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags';
 import {NoMode, ProfileMode} from './ReactTypeOfMode';
 import {
   enableSuspenseServerRenderer,
   enableProfilerTimer,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.new';
@@ -40,6 +44,11 @@ import {
 } from './ReactFiberContext.new';
 import {popProvider} from './ReactFiberNewContext.new';
 import {popRenderLanes} from './ReactFiberWorkLoop.new';
+import {
+  popCacheProvider,
+  popRootCachePool,
+  popCachePool,
+} from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 
 import invariant from 'shared/invariant';
@@ -65,6 +74,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       return null;
     }
     case HostRoot: {
+      if (enableCache) {
+        const root: FiberRoot = workInProgress.stateNode;
+        popRootCachePool(root, renderLanes);
+
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+      }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
@@ -120,18 +136,31 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popHostContainer(workInProgress);
       return null;
     case ContextProvider:
-      popProvider(workInProgress);
+      const context: ReactContext<any> = workInProgress.type._context;
+      popProvider(context, workInProgress);
       return null;
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(workInProgress);
+      if (enableCache) {
+        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
+        if (spawnedCachePool !== null) {
+          popCachePool(workInProgress);
+        }
+      }
+      return null;
+    case CacheComponent:
+      if (enableCache) {
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+      }
       return null;
     default:
       return null;
   }
 }
 
-function unwindInterruptedWork(interruptedWork: Fiber) {
+function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
   switch (interruptedWork.tag) {
     case ClassComponent: {
       const childContextTypes = interruptedWork.type.childContextTypes;
@@ -141,6 +170,13 @@ function unwindInterruptedWork(interruptedWork: Fiber) {
       break;
     }
     case HostRoot: {
+      if (enableCache) {
+        const root: FiberRoot = interruptedWork.stateNode;
+        popRootCachePool(root, renderLanes);
+
+        const cache: Cache = interruptedWork.memoizedState.cache;
+        popCacheProvider(interruptedWork, cache);
+      }
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
       resetMutableSourceWorkInProgressVersions();
@@ -160,11 +196,25 @@ function unwindInterruptedWork(interruptedWork: Fiber) {
       popSuspenseContext(interruptedWork);
       break;
     case ContextProvider:
-      popProvider(interruptedWork);
+      const context: ReactContext<any> = interruptedWork.type._context;
+      popProvider(context, interruptedWork);
       break;
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(interruptedWork);
+      if (enableCache) {
+        const spawnedCachePool: SpawnedCachePool | null = (interruptedWork.updateQueue: any);
+        if (spawnedCachePool !== null) {
+          popCachePool(interruptedWork);
+        }
+      }
+
+      break;
+    case CacheComponent:
+      if (enableCache) {
+        const cache: Cache = interruptedWork.memoizedState.cache;
+        popCacheProvider(interruptedWork, cache);
+      }
       break;
     default:
       break;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 3590f3ea4f1b..88861db778be 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -7,9 +7,11 @@
  * @flow
  */
 
-import type {Fiber} from './ReactInternalTypes';
+import type {ReactContext} from 'shared/ReactTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 import {
@@ -22,12 +24,14 @@ import {
   SuspenseListComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags';
 import {NoMode, ProfileMode} from './ReactTypeOfMode';
 import {
   enableSuspenseServerRenderer,
   enableProfilerTimer,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.old';
@@ -40,6 +44,11 @@ import {
 } from './ReactFiberContext.old';
 import {popProvider} from './ReactFiberNewContext.old';
 import {popRenderLanes} from './ReactFiberWorkLoop.old';
+import {
+  popCacheProvider,
+  popRootCachePool,
+  popCachePool,
+} from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 
 import invariant from 'shared/invariant';
@@ -65,6 +74,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       return null;
     }
     case HostRoot: {
+      if (enableCache) {
+        const root: FiberRoot = workInProgress.stateNode;
+        popRootCachePool(root, renderLanes);
+
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+      }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
@@ -120,18 +136,31 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popHostContainer(workInProgress);
       return null;
     case ContextProvider:
-      popProvider(workInProgress);
+      const context: ReactContext<any> = workInProgress.type._context;
+      popProvider(context, workInProgress);
       return null;
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(workInProgress);
+      if (enableCache) {
+        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
+        if (spawnedCachePool !== null) {
+          popCachePool(workInProgress);
+        }
+      }
+      return null;
+    case CacheComponent:
+      if (enableCache) {
+        const cache: Cache = workInProgress.memoizedState.cache;
+        popCacheProvider(workInProgress, cache);
+      }
       return null;
     default:
       return null;
   }
 }
 
-function unwindInterruptedWork(interruptedWork: Fiber) {
+function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
   switch (interruptedWork.tag) {
     case ClassComponent: {
       const childContextTypes = interruptedWork.type.childContextTypes;
@@ -141,6 +170,13 @@ function unwindInterruptedWork(interruptedWork: Fiber) {
       break;
     }
     case HostRoot: {
+      if (enableCache) {
+        const root: FiberRoot = interruptedWork.stateNode;
+        popRootCachePool(root, renderLanes);
+
+        const cache: Cache = interruptedWork.memoizedState.cache;
+        popCacheProvider(interruptedWork, cache);
+      }
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
       resetMutableSourceWorkInProgressVersions();
@@ -160,11 +196,25 @@ function unwindInterruptedWork(interruptedWork: Fiber) {
       popSuspenseContext(interruptedWork);
       break;
     case ContextProvider:
-      popProvider(interruptedWork);
+      const context: ReactContext<any> = interruptedWork.type._context;
+      popProvider(context, interruptedWork);
       break;
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(interruptedWork);
+      if (enableCache) {
+        const spawnedCachePool: SpawnedCachePool | null = (interruptedWork.updateQueue: any);
+        if (spawnedCachePool !== null) {
+          popCachePool(interruptedWork);
+        }
+      }
+
+      break;
+    case CacheComponent:
+      if (enableCache) {
+        const cache: Cache = interruptedWork.memoizedState.cache;
+        popCacheProvider(interruptedWork, cache);
+      }
       break;
     default:
       break;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 390feac65314..03831988e2b2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -531,7 +531,7 @@ export function scheduleUpdateOnFiber(
   fiber: Fiber,
   lane: Lane,
   eventTime: number,
-) {
+): FiberRoot | null {
   checkForNestedUpdates();
   warnAboutRenderPhaseUpdatesInDEV(fiber);
 
@@ -653,6 +653,8 @@ export function scheduleUpdateOnFiber(
   // the same root, then it's not a huge deal, we just might batch more stuff
   // together more than necessary.
   mostRecentlyUpdatedRoot = root;
+
+  return root;
 }
 
 // This is split into a separate function so we can mark a fiber with pending
@@ -1371,7 +1373,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (workInProgress !== null) {
     let interruptedWork = workInProgress.return;
     while (interruptedWork !== null) {
-      unwindInterruptedWork(interruptedWork);
+      unwindInterruptedWork(interruptedWork, workInProgressRootRenderLanes);
       interruptedWork = interruptedWork.return;
     }
   }
@@ -2303,7 +2305,10 @@ function commitBeforeMutationEffects() {
   }
 }
 
-function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
+function commitMutationEffects(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
   // TODO: Should probably move the bulk of this function to commitWork.
   while (nextEffect !== null) {
     setCurrentDebugFiberInDEV(nextEffect);
@@ -3047,7 +3052,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
       // same fiber again.
 
       // Unwind the failed stack frame
-      unwindInterruptedWork(unitOfWork);
+      unwindInterruptedWork(unitOfWork, workInProgressRootRenderLanes);
 
       // Restore the original properties of the fiber.
       assignFiberPropertiesInDEV(unitOfWork, originalWorkInProgressCopy);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 0aa21dbfa85b..6966472e0d16 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -531,7 +531,7 @@ export function scheduleUpdateOnFiber(
   fiber: Fiber,
   lane: Lane,
   eventTime: number,
-) {
+): FiberRoot | null {
   checkForNestedUpdates();
   warnAboutRenderPhaseUpdatesInDEV(fiber);
 
@@ -653,6 +653,8 @@ export function scheduleUpdateOnFiber(
   // the same root, then it's not a huge deal, we just might batch more stuff
   // together more than necessary.
   mostRecentlyUpdatedRoot = root;
+
+  return root;
 }
 
 // This is split into a separate function so we can mark a fiber with pending
@@ -1371,7 +1373,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (workInProgress !== null) {
     let interruptedWork = workInProgress.return;
     while (interruptedWork !== null) {
-      unwindInterruptedWork(interruptedWork);
+      unwindInterruptedWork(interruptedWork, workInProgressRootRenderLanes);
       interruptedWork = interruptedWork.return;
     }
   }
@@ -2303,7 +2305,10 @@ function commitBeforeMutationEffects() {
   }
 }
 
-function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {
+function commitMutationEffects(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
   // TODO: Should probably move the bulk of this function to commitWork.
   while (nextEffect !== null) {
     setCurrentDebugFiberInDEV(nextEffect);
@@ -3047,7 +3052,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
       // same fiber again.
 
       // Unwind the failed stack frame
-      unwindInterruptedWork(unitOfWork);
+      unwindInterruptedWork(unitOfWork, workInProgressRootRenderLanes);
 
       // Restore the original properties of the fiber.
       assignFiberPropertiesInDEV(unitOfWork, originalWorkInProgressCopy);
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index c48d53fbb919..cb34ac74948e 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -25,6 +25,7 @@ import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
+import type {Cache} from './ReactFiberCacheComponent.old';
 
 // Unwind Circular: moved from ReactFiberHooks.old
 export type HookType =
@@ -41,7 +42,8 @@ export type HookType =
   | 'useDeferredValue'
   | 'useTransition'
   | 'useMutableSource'
-  | 'useOpaqueIdentifier';
+  | 'useOpaqueIdentifier'
+  | 'useCacheRefresh';
 
 export type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
 
@@ -235,6 +237,9 @@ type BaseFiberRootProperties = {|
 
   entangledLanes: Lanes,
   entanglements: LaneMap<Lanes>,
+
+  pooledCache: Cache | null,
+  pooledCacheLanes: Lanes,
 |};
 
 // The following attributes are only used by interaction tracing builds.
@@ -314,6 +319,7 @@ export type Dispatcher = {|
     subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
   ): Snapshot,
   useOpaqueIdentifier(): any,
+  useCacheRefresh?: () => <T>(?() => T, ?T) => void,
 
   unstable_isNewReconciler?: boolean,
 |};
diff --git a/packages/react-reconciler/src/ReactWorkTags.js b/packages/react-reconciler/src/ReactWorkTags.js
index 84cd9ebd4ba5..65dba28b367a 100644
--- a/packages/react-reconciler/src/ReactWorkTags.js
+++ b/packages/react-reconciler/src/ReactWorkTags.js
@@ -31,7 +31,8 @@ export type WorkTag =
   | 20
   | 21
   | 22
-  | 23;
+  | 23
+  | 24;
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
@@ -57,3 +58,4 @@ export const FundamentalComponent = 20;
 export const ScopeComponent = 21;
 export const OffscreenComponent = 22;
 export const LegacyHiddenComponent = 23;
+export const CacheComponent = 24;
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 000000000000..1574fc222898
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -0,0 +1,916 @@
+let React;
+let ReactNoop;
+let Cache;
+let getCacheForType;
+let Scheduler;
+let Suspense;
+let useCacheRefresh;
+let startTransition;
+let useState;
+
+let textService;
+let textServiceVersion;
+
+describe('ReactCache', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Cache = React.unstable_Cache;
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+    getCacheForType = React.unstable_getCacheForType;
+    useCacheRefresh = React.unstable_useCacheRefresh;
+    startTransition = React.unstable_startTransition;
+    useState = React.useState;
+
+    // Represents some data service that returns text. It likely has additional
+    // caching layers, like a CDN or the local browser cache. It can be mutated
+    // or emptied independently of the React cache.
+    textService = new Map();
+    textServiceVersion = 1;
+  });
+
+  function createTextCache() {
+    return new Map();
+  }
+
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    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.unstable_yieldValue(`Cache miss! [${text}]`);
+
+      let request = textService.get(text);
+      if (request === undefined) {
+        let resolve;
+        let reject;
+        request = new Promise((res, rej) => {
+          resolve = res;
+          reject = rej;
+        });
+        request.resolve = resolve;
+        request.reject = reject;
+
+        // Add the request to a backing cache. This may outlive the lifetime
+        // of the component that is currently reading the data.
+        textService.set(text, request);
+      }
+
+      const thenable = request.then(
+        value => {
+          if (newRecord.status === 'pending') {
+            newRecord.status = 'resolved';
+            newRecord.value = value;
+          }
+        },
+        error => {
+          if (newRecord.status === 'pending') {
+            newRecord.status = 'rejected';
+            newRecord.value = error;
+          }
+        },
+      );
+
+      const newRecord = {
+        ping: null,
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function mutateRemoteTextService() {
+    textService = new Map();
+    textServiceVersion++;
+  }
+
+  function resolveText(text) {
+    const request = textService.get(text);
+    if (request !== undefined) {
+      request.resolve(textServiceVersion);
+      return request;
+    } else {
+      const newRequest = Promise.resolve(textServiceVersion);
+      newRequest.resolve = newRequest.reject = () => {};
+      textService.set(text, newRequest);
+      return newRequest;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  function AsyncText({text, showVersion}) {
+    const version = readText(text);
+    const fullText = showVersion ? `${text} [v${version}]` : text;
+    Scheduler.unstable_yieldValue(fullText);
+    return fullText;
+  }
+
+  // @gate experimental
+  test('render Cache component', async () => {
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<Cache>Hi</Cache>);
+    });
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  // @gate experimental
+  test('mount new data', async () => {
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <Cache>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="A" />
+          </Suspense>
+        </Cache>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A']);
+    expect(root).toMatchRenderedOutput('A');
+  });
+
+  // @gate experimental
+  test('root acts as implicit cache boundary', async () => {
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" />
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A']);
+    expect(root).toMatchRenderedOutput('A');
+  });
+
+  // @gate experimental
+  test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => {
+    function App({text}) {
+      return (
+        <>
+          <Cache>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="A" />
+            </Suspense>
+          </Cache>
+          <Cache>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="A" />
+            </Suspense>
+          </Cache>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App showMore={false} />);
+    });
+    // Even though there are two new <Cache /> trees, they should share the same
+    // data cache. So there should be only a single cache miss for A.
+    expect(Scheduler).toHaveYielded([
+      'Cache miss! [A]',
+      'Loading...',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...Loading...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+  });
+
+  // @gate experimental
+  test(
+    'nested cache boundaries share the same cache as the root during ' +
+      'the initial render',
+    async () => {
+      function App() {
+        return (
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="A" />
+            <Cache>
+              <AsyncText text="A" />
+            </Cache>
+          </Suspense>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await ReactNoop.act(async () => {
+        root.render(<App />);
+      });
+      // Even though there are two new <Cache /> trees, they should share the same
+      // data cache. So there should be only a single cache miss for A.
+      expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      await ReactNoop.act(async () => {
+        await resolveText('A');
+      });
+      expect(Scheduler).toHaveYielded(['A', 'A']);
+      expect(root).toMatchRenderedOutput('AA');
+    },
+  );
+
+  // @gate experimental
+  test('new content inside an existing Cache boundary should re-use already cached data', async () => {
+    function App({showMore}) {
+      return (
+        <Cache>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText showVersion={true} text="A" />
+          </Suspense>
+          {showMore ? (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText showVersion={true} text="A" />
+            </Suspense>
+          ) : null}
+        </Cache>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+      root.render(<App showMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache miss! [A]',
+      'Loading...',
+      'A [v1]',
+    ]);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Simulate a server mutation.
+    mutateRemoteTextService();
+
+    // Add a new cache boundary
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+      root.render(<App showMore={true} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'A [v1]',
+      // New tree should use already cached data
+      'A [v1]',
+    ]);
+    expect(root).toMatchRenderedOutput('A [v1]A [v1]');
+  });
+
+  // @gate experimental
+  test('a new Cache boundary uses fresh cache', async () => {
+    // The only difference from the previous test is that the "Show More"
+    // content is wrapped in a nested <Cache /> boundary
+    function App({showMore}) {
+      return (
+        <Cache>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText showVersion={true} text="A" />
+          </Suspense>
+          {showMore ? (
+            <Cache>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText showVersion={true} text="A" />
+              </Suspense>
+            </Cache>
+          ) : null}
+        </Cache>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+      root.render(<App showMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache miss! [A]',
+      'Loading...',
+      'A [v1]',
+    ]);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Simulate a server mutation.
+    mutateRemoteTextService();
+
+    // Add a new cache boundary
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+      root.render(<App showMore={true} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'A [v1]',
+      // New tree should load fresh data.
+      'Cache miss! [A]',
+      'Loading...',
+      'A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('A [v1]A [v2]');
+  });
+
+  // @gate experimental
+  test('inner content uses same cache as shell if spawned by the same transition', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App() {
+      return (
+        <Cache>
+          <Suspense fallback={<Text text="Loading shell..." />}>
+            {/* The shell reads A */}
+            <Shell>
+              {/* The inner content reads both A and B */}
+              <Suspense fallback={<Text text="Loading content..." />}>
+                <Cache>
+                  <Content />
+                </Cache>
+              </Suspense>
+            </Shell>
+          </Suspense>
+        </Cache>
+      );
+    }
+
+    function Shell({children}) {
+      readText('A');
+      return (
+        <>
+          <div>
+            <Text text="Shell" />
+          </div>
+          <div>{children}</div>
+        </>
+      );
+    }
+
+    function Content() {
+      readText('A');
+      readText('B');
+      return <Text text="Content" />;
+    }
+
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading shell...']);
+    expect(root).toMatchRenderedOutput('Loading shell...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Shell',
+      // There's a cache miss for B, because it hasn't been read yet. But not
+      // A, because it was cached when we rendered the shell.
+      'Cache miss! [B]',
+      'Loading content...',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Shell</div>
+        <div>Loading content...</div>
+      </>,
+    );
+
+    await ReactNoop.act(async () => {
+      await resolveText('B');
+    });
+    expect(Scheduler).toHaveYielded(['Content']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Shell</div>
+        <div>Content</div>
+      </>,
+    );
+  });
+
+  // @gate experimental
+  test('refresh a cache', async () => {
+    let refresh;
+    function App() {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text="A" />;
+    }
+
+    // Mount initial data
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <Cache>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <App />
+          </Suspense>
+        </Cache>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Mutate the text service, then refresh for new data.
+    mutateRemoteTextService();
+    await ReactNoop.act(async () => {
+      startTransition(() => refresh());
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    // Note that the version has updated
+    expect(Scheduler).toHaveYielded(['A [v2]']);
+    expect(root).toMatchRenderedOutput('A [v2]');
+  });
+
+  // @gate experimental
+  test('refresh the root cache', async () => {
+    let refresh;
+    function App() {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text="A" />;
+    }
+
+    // Mount initial data
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <App />
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Mutate the text service, then refresh for new data.
+    mutateRemoteTextService();
+    await ReactNoop.act(async () => {
+      startTransition(() => refresh());
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    // Note that the version has updated
+    expect(Scheduler).toHaveYielded(['A [v2]']);
+    expect(root).toMatchRenderedOutput('A [v2]');
+  });
+
+  // @gate experimental
+  test('refresh a cache with seed data', async () => {
+    let refresh;
+    function App() {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text="A" />;
+    }
+
+    // Mount initial data
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <Cache>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <App />
+          </Suspense>
+        </Cache>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Mutate the text service, then refresh for new data.
+    mutateRemoteTextService();
+    await ReactNoop.act(async () => {
+      // Refresh the cache with seeded data, like you would receive from a
+      // server mutation.
+      // TODO: Seeding multiple typed caches. Should work by calling `refresh`
+      // multiple times with different key/value pairs
+      const seededCache = new Map();
+      seededCache.set('A', {
+        ping: null,
+        status: 'resolved',
+        value: textServiceVersion,
+      });
+      startTransition(() => refresh(createTextCache, seededCache));
+    });
+    // The root should re-render without a cache miss.
+    expect(Scheduler).toHaveYielded(['A [v2]']);
+    expect(root).toMatchRenderedOutput('A [v2]');
+  });
+
+  // @gate experimental
+  test('refreshing a parent cache also refreshes its children', async () => {
+    let refreshShell;
+    function RefreshShell() {
+      refreshShell = useCacheRefresh();
+      return null;
+    }
+
+    function App({showMore}) {
+      return (
+        <Cache>
+          <RefreshShell />
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText showVersion={true} text="A" />
+          </Suspense>
+          {showMore ? (
+            <Cache>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText showVersion={true} text="A" />
+              </Suspense>
+            </Cache>
+          ) : null}
+        </Cache>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+      root.render(<App showMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache miss! [A]',
+      'Loading...',
+      'A [v1]',
+    ]);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Simulate a server mutation.
+    mutateRemoteTextService();
+
+    // Add a new cache boundary
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+      root.render(<App showMore={true} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'A [v1]',
+      // New tree should load fresh data.
+      'Cache miss! [A]',
+      'Loading...',
+      'A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('A [v1]A [v2]');
+
+    // Now refresh the shell. This should also cause the "Show More" contents to
+    // refresh, since its cache is nested inside the outer one.
+    mutateRemoteTextService();
+    await ReactNoop.act(async () => {
+      startTransition(() => refreshShell());
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache miss! [A]',
+      'Loading...',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('A [v1]A [v2]');
+
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v3]', 'A [v3]']);
+    expect(root).toMatchRenderedOutput('A [v3]A [v3]');
+  });
+
+  // @gate experimental
+  test(
+    'refreshing a cache boundary does not refresh the other boundaries ' +
+      'that mounted at the same time (i.e. the ones that share the same cache)',
+    async () => {
+      let refreshFirstBoundary;
+      function RefreshFirstBoundary() {
+        refreshFirstBoundary = useCacheRefresh();
+        return null;
+      }
+
+      function App({showMore}) {
+        return showMore ? (
+          <>
+            <Cache>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <RefreshFirstBoundary />
+                <AsyncText showVersion={true} text="A" />
+              </Suspense>
+            </Cache>
+            <Cache>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText showVersion={true} text="A" />
+              </Suspense>
+            </Cache>
+          </>
+        ) : null;
+      }
+
+      // First mount the initial shell without the nested boundaries. This is
+      // necessary for this test because we want the two inner boundaries to be
+      // treated like sibling providers that happen to share an underlying
+      // cache, as opposed to consumers of the root-level cache.
+      const root = ReactNoop.createRoot();
+      await ReactNoop.act(async () => {
+        root.render(<App showMore={false} />);
+      });
+
+      // Now reveal the boundaries. In a real app  this would be a navigation.
+      await ReactNoop.act(async () => {
+        root.render(<App showMore={true} />);
+      });
+
+      // Even though there are two new <Cache /> trees, they should share the same
+      // data cache. So there should be only a single cache miss for A.
+      expect(Scheduler).toHaveYielded([
+        'Cache miss! [A]',
+        'Loading...',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput('Loading...Loading...');
+
+      await ReactNoop.act(async () => {
+        await resolveText('A');
+      });
+      expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]']);
+      expect(root).toMatchRenderedOutput('A [v1]A [v1]');
+
+      // Refresh the first boundary. It should not refresh the second boundary,
+      // even though they previously shared the same underlying cache.
+      mutateRemoteTextService();
+      await ReactNoop.act(async () => {
+        await refreshFirstBoundary();
+      });
+      expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+
+      await ReactNoop.act(async () => {
+        await resolveText('A');
+      });
+      expect(Scheduler).toHaveYielded(['A [v2]']);
+      expect(root).toMatchRenderedOutput('A [v2]A [v1]');
+    },
+  );
+
+  // @gate experimental
+  test(
+    'mount a new Cache boundary in a sibling while simultaneously ' +
+      'resolving a Suspense boundary',
+    async () => {
+      function App({showMore}) {
+        return (
+          <>
+            {showMore ? (
+              <Suspense fallback={<Text text="Loading..." />}>
+                <Cache>
+                  <AsyncText showVersion={true} text="A" />
+                </Cache>
+              </Suspense>
+            ) : null}
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Cache>
+                {' '}
+                <AsyncText showVersion={true} text="A" />{' '}
+                <AsyncText showVersion={true} text="B" />
+              </Cache>
+            </Suspense>
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+      await ReactNoop.act(async () => {
+        root.render(<App showMore={false} />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Cache miss! [A]',
+        'Cache miss! [B]',
+        'Loading...',
+      ]);
+
+      await ReactNoop.act(async () => {
+        // This will resolve the content in the first cache
+        resolveText('A');
+        resolveText('B');
+        // Now let's simulate a mutation
+        mutateRemoteTextService();
+        // And mount the second tree, which includes new content
+        root.render(<App showMore={true} />);
+      });
+      expect(Scheduler).toHaveYielded([
+        // The new tree should use a fresh cache
+        'Cache miss! [A]',
+        'Loading...',
+        // The other tree uses the cached responses. This demonstrates that the
+        // requests are not dropped.
+        'A [v1]',
+        'B [v1]',
+      ]);
+
+      // Now resolve the second tree
+      await ReactNoop.act(async () => {
+        resolveText('A');
+      });
+      expect(Scheduler).toHaveYielded(['A [v2]']);
+      expect(root).toMatchRenderedOutput('A [v2] A [v1] B [v1]');
+    },
+  );
+
+  // @gate experimental
+  test('cache pool is cleared once transitions that depend on it commit their shell', async () => {
+    function Child({text}) {
+      return (
+        <Cache>
+          <AsyncText text={text} />
+        </Cache>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>(empty)</Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await ReactNoop.act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Child text="A" />
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await ReactNoop.act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Child text="A" />
+            <Child text="A" />
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      // No cache miss, because it uses the pooled cache
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    // Resolve the request
+    await ReactNoop.act(async () => {
+      await resolveText('A');
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    // Now do another transition
+    await ReactNoop.act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Child text="A" />
+            <Child text="A" />
+            <Child text="A" />
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      // First two children use the old cache because they already finished
+      'A',
+      'A',
+      // The new child uses a fresh cache
+      'Cache miss! [A]',
+      'Loading...',
+      'A',
+      'A',
+      'A',
+    ]);
+    expect(root).toMatchRenderedOutput('AAA');
+  });
+
+  // @gate experimental
+  test('cache pool is not cleared by arbitrary commits', async () => {
+    function App() {
+      return (
+        <>
+          <ShowMore />
+          <Unrelated />
+        </>
+      );
+    }
+
+    let showMore;
+    function ShowMore() {
+      const [shouldShow, _showMore] = useState(false);
+      showMore = () => _showMore(true);
+      return (
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {shouldShow ? (
+              <Cache>
+                <AsyncText text="A" />
+              </Cache>
+            ) : null}
+          </Suspense>
+        </>
+      );
+    }
+
+    let updateUnrelated;
+    function Unrelated() {
+      const [count, _updateUnrelated] = useState(0);
+      updateUnrelated = _updateUnrelated;
+      return <Text text={count + ''} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App showMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['0']);
+    expect(root).toMatchRenderedOutput('0');
+
+    await ReactNoop.act(async () => {
+      startTransition(() => {
+        showMore();
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('0');
+
+    await ReactNoop.act(async () => {
+      updateUnrelated(1);
+    });
+    expect(Scheduler).toHaveYielded([
+      '1',
+
+      // Happens to re-render the fallback. Doesn't need to, but not relevant
+      // to this test.
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('1');
+
+    await ReactNoop.act(async () => {
+      resolveText('A');
+      mutateRemoteTextService();
+    });
+    expect(Scheduler).toHaveYielded(['A']);
+    expect(root).toMatchRenderedOutput('A1');
+  });
+});
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index d6717a083076..ffbc13edaf60 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -758,6 +758,13 @@ function unsupportedHook(): void {
   invariant(false, 'This Hook is not supported in Server Components.');
 }
 
+function unsupportedRefresh(): void {
+  invariant(
+    currentCache,
+    'Refreshing the cache is not supported in Server Components.',
+  );
+}
+
 let currentCache: Map<Function, mixed> | null = null;
 
 const Dispatcher: DispatcherType = {
@@ -797,4 +804,7 @@ const Dispatcher: DispatcherType = {
   useEffect: (unsupportedHook: any),
   useOpaqueIdentifier: (unsupportedHook: any),
   useMutableSource: (unsupportedHook: any),
+  useCacheRefresh(): <T>(?() => T, ?T) => void {
+    return unsupportedRefresh;
+  },
 };
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index a58c6cae824c..43c6c5184d2b 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -44,6 +44,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useTransition: unsupported,
     useOpaqueIdentifier: unsupported,
     useMutableSource: unsupported,
+    useCacheRefresh: unsupported,
   };
   // Not using async/await because we don't compile it.
   return new Promise((resolve, reject) => {
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 04723075defa..366e86626fd1 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -51,6 +51,8 @@ export {
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
   unstable_getCacheForType,
+  unstable_Cache,
+  unstable_useCacheRefresh,
   // enableScopeAPI
   unstable_Scope,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 5de53908ae88..ba0d205f8129 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -46,6 +46,8 @@ export {
   SuspenseList as unstable_SuspenseList,
   unstable_useOpaqueIdentifier,
   unstable_getCacheForType,
+  unstable_Cache,
+  unstable_useCacheRefresh,
   // enableDebugTracing
   unstable_DebugTracingMode,
 } from './src/React';
diff --git a/packages/react/index.js b/packages/react/index.js
index 1553bdd9e9a8..80e6591171b5 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -83,4 +83,6 @@ export {
   unstable_Scope,
   unstable_useOpaqueIdentifier,
   unstable_getCacheForType,
+  unstable_Cache,
+  unstable_useCacheRefresh,
 } from './src/React';
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 9a3bb4384ca2..cf459c0bfb44 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -50,6 +50,8 @@ export {
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
   unstable_getCacheForType,
+  unstable_Cache,
+  unstable_useCacheRefresh,
   // enableScopeAPI
   unstable_Scope,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index aae52b2750db..84490ef902c9 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -17,6 +17,7 @@ import {
   REACT_SUSPENSE_LIST_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
   REACT_SCOPE_TYPE,
+  REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
 
 import {Component, PureComponent} from './ReactBaseClasses';
@@ -48,6 +49,7 @@ import {
   useTransition,
   useDeferredValue,
   useOpaqueIdentifier,
+  useCacheRefresh,
 } from './ReactHooks';
 import {
   createElementWithValidation,
@@ -112,6 +114,8 @@ export {
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
   getCacheForType as unstable_getCacheForType,
+  useCacheRefresh as unstable_useCacheRefresh,
+  REACT_CACHE_TYPE as unstable_Cache,
   // enableFundamentalAPI
   createFundamental as unstable_createFundamental,
   // enableScopeAPI
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 1020efa74cb9..c1602a9bb53e 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -180,3 +180,9 @@ export function useMutableSource<Source, Snapshot>(
   const dispatcher = resolveDispatcher();
   return dispatcher.useMutableSource(source, getSnapshot, subscribe);
 }
+
+export function useCacheRefresh(): <T>(?() => T, ?T) => void {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.useCacheRefresh();
+}
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 1870c8c00948..d490ab417c21 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -31,6 +31,7 @@ export let REACT_OPAQUE_ID_TYPE = 0xeae0;
 export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
 export let REACT_OFFSCREEN_TYPE = 0xeae2;
 export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+export let REACT_CACHE_TYPE = 0xeae4;
 
 if (typeof Symbol === 'function' && Symbol.for) {
   const symbolFor = Symbol.for;
@@ -52,6 +53,7 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
   REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
   REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+  REACT_CACHE_TYPE = symbolFor('react.cache');
 }
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentName.js
index ae74676ed361..a5594f6f64d7 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentName.js
@@ -21,6 +21,7 @@ import {
   REACT_SUSPENSE_TYPE,
   REACT_SUSPENSE_LIST_TYPE,
   REACT_LAZY_TYPE,
+  REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
 import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 
@@ -72,6 +73,8 @@ function getComponentName(type: mixed): string | null {
       return 'Suspense';
     case REACT_SUSPENSE_LIST_TYPE:
       return 'SuspenseList';
+    case REACT_CACHE_TYPE:
+      return 'Cache';
   }
   if (typeof type === 'object') {
     switch (type.$$typeof) {
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 35eeae2a308c..0a361c4a22de 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -22,8 +22,9 @@ import {
   REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
+  REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
-import {enableScopeAPI} from './ReactFeatureFlags';
+import {enableScopeAPI, enableCache} from './ReactFeatureFlags';
 
 let REACT_MODULE_REFERENCE: number | Symbol = 0;
 if (typeof Symbol === 'function') {
@@ -44,7 +45,8 @@ export default function isValidElementType(type: mixed) {
     type === REACT_SUSPENSE_TYPE ||
     type === REACT_SUSPENSE_LIST_TYPE ||
     type === REACT_LEGACY_HIDDEN_TYPE ||
-    (enableScopeAPI && type === REACT_SCOPE_TYPE)
+    (enableScopeAPI && type === REACT_SCOPE_TYPE) ||
+    (enableCache && type === REACT_CACHE_TYPE)
   ) {
     return true;
   }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 641901fcaba0..12a8db733b0c 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -371,5 +371,6 @@
   "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."
+  "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."
 }

From 1bda600378f08861f40e2ce2f146e52354b8ef13 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 18 Dec 2020 16:20:37 -0600
Subject: [PATCH 0160/1603] Hardcoded allowlist for publishing packages
 (#20485)

With separate lists for stable and experimental.
---
 .../add-build-info-json.js                    |  3 +-
 scripts/release/ci-add-build-info-json.js     |  3 +-
 .../release/download-experimental-build.js    |  2 +-
 scripts/release/prepare-release-from-ci.js    |  7 +-
 scripts/release/prepare-release-from-npm.js   | 15 ++--
 scripts/release/publish.js                    |  8 ++-
 scripts/release/utils.js                      | 70 +++++++++----------
 7 files changed, 62 insertions(+), 46 deletions(-)

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
index 10ff6df371fe..5bae29195351 100644
--- a/scripts/release/build-release-locally-commands/add-build-info-json.js
+++ b/scripts/release/build-release-locally-commands/add-build-info-json.js
@@ -12,7 +12,8 @@ const {getPublicPackages, logPromise} = require('../utils');
 const theme = require('../theme');
 
 const run = async ({branch, checksum, commit, reactVersion, tempDirectory}) => {
-  const packages = getPublicPackages(join(tempDirectory, 'packages'));
+  const isExperimental = reactVersion.includes('experimental');
+  const packages = getPublicPackages(isExperimental);
   const packagesDir = join(tempDirectory, 'packages');
 
   const buildInfoJSON = {
diff --git a/scripts/release/ci-add-build-info-json.js b/scripts/release/ci-add-build-info-json.js
index de20e6e2aaa3..92af86946af7 100755
--- a/scripts/release/ci-add-build-info-json.js
+++ b/scripts/release/ci-add-build-info-json.js
@@ -27,7 +27,8 @@ const run = async () => {
     reactVersion,
   } = await getBuildInfo();
 
-  const packages = getPublicPackages(join(cwd, 'packages'));
+  const isExperimental = process.env.RELEASE_CHANNEL === 'experimental';
+  const packages = getPublicPackages(isExperimental);
   const packagesDir = join(cwd, 'packages');
 
   const buildInfoJSON = {
diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
index 2df0459b0df7..97ba2d1bc32a 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -15,7 +15,7 @@ const run = async () => {
   try {
     const params = parseParams();
     params.cwd = join(__dirname, '..', '..');
-    params.packages = await getPublicPackages();
+    params.packages = await getPublicPackages(true);
 
     if (!params.build) {
       params.build = await getLatestMasterBuildNumber(true);
diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index 202054564bb5..f7222ba8ca8a 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -3,6 +3,7 @@
 'use strict';
 
 const {join} = require('path');
+const {readJsonSync} = require('fs-extra');
 const {getPublicPackages, handleError} = require('./utils');
 
 const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
@@ -17,7 +18,6 @@ const run = async () => {
   try {
     const params = parseParams();
     params.cwd = join(__dirname, '..', '..');
-    params.packages = await getPublicPackages();
 
     if (!params.build) {
       params.build = await getLatestMasterBuildNumber(false);
@@ -26,6 +26,11 @@ const run = async () => {
     await checkEnvironmentVariables(params);
     await downloadBuildArtifacts(params);
 
+    const version = readJsonSync('./build/node_modules/react/package.json')
+      .version;
+    const isExperimental = version.includes('experimental');
+    params.packages = await getPublicPackages(isExperimental);
+
     if (!params.skipTests) {
       await testPackagingFixture(params);
       await testTracingFixture(params);
diff --git a/scripts/release/prepare-release-from-npm.js b/scripts/release/prepare-release-from-npm.js
index 46a14d9b1069..0b0261b68551 100755
--- a/scripts/release/prepare-release-from-npm.js
+++ b/scripts/release/prepare-release-from-npm.js
@@ -20,18 +20,21 @@ const run = async () => {
   try {
     const params = parseParams();
     params.cwd = join(__dirname, '..', '..');
-    params.packages = await getPublicPackages();
 
-    // 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();
+    const isExperimental = params.version.includes('experimental');
 
     if (!params.version) {
       params.version = await getLatestNextVersion();
     }
 
-    if (params.version.includes('experimental')) {
+    params.packages = await getPublicPackages(isExperimental);
+
+    // 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.`
       );
diff --git a/scripts/release/publish.js b/scripts/release/publish.js
index 7df86c7b5019..e51df5c45f8a 100755
--- a/scripts/release/publish.js
+++ b/scripts/release/publish.js
@@ -3,6 +3,7 @@
 'use strict';
 
 const {join} = require('path');
+const {readJsonSync} = require('fs-extra');
 const {getPublicPackages, handleError} = require('./utils');
 const theme = require('./theme');
 
@@ -20,8 +21,13 @@ const validateSkipPackages = require('./publish-commands/validate-skip-packages'
 const run = async () => {
   try {
     const params = parseParams();
+
+    const version = readJsonSync('./build/node_modules/react/package.json')
+      .version;
+    const isExperimental = version.includes('experimental');
+
     params.cwd = join(__dirname, '..', '..');
-    params.packages = await getPublicPackages();
+    params.packages = await getPublicPackages(isExperimental);
 
     // 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.
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index cb0873d1c77f..c86f9c886a53 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -3,7 +3,7 @@
 const {exec} = require('child-process-promise');
 const {createPatch} = require('diff');
 const {hashElement} = require('folder-hash');
-const {readdirSync, readFileSync, statSync, writeFileSync} = require('fs');
+const {readFileSync, writeFileSync} = require('fs');
 const {readJson, writeJson} = require('fs-extra');
 const http = require('request-promise-json');
 const logUpdate = require('log-update');
@@ -12,14 +12,6 @@ const createLogger = require('progress-estimator');
 const prompt = require('prompt-promise');
 const theme = require('./theme');
 
-// The following packages are published to NPM but not by this script.
-// They are released through a separate process.
-const RELEASE_SCRIPT_PACKAGE_SKIPLIST = [
-  'react-devtools',
-  'react-devtools-core',
-  'react-devtools-inline',
-];
-
 // https://www.npmjs.com/package/progress-estimator#configuration
 const logger = createLogger({
   storagePath: join(__dirname, '.progress-estimator'),
@@ -112,31 +104,38 @@ const getChecksumForCurrentRevision = async cwd => {
   return hashedPackages.hash.slice(0, 7);
 };
 
-const getPublicPackages = () => {
-  const packagesRoot = join(__dirname, '..', '..', 'packages');
-
-  return readdirSync(packagesRoot).filter(dir => {
-    if (RELEASE_SCRIPT_PACKAGE_SKIPLIST.includes(dir)) {
-      return false;
-    }
-
-    const packagePath = join(packagesRoot, dir, 'package.json');
-
-    if (dir.charAt(0) !== '.') {
-      let stat;
-      try {
-        stat = statSync(packagePath);
-      } catch (err) {
-        return false;
-      }
-      if (stat.isFile()) {
-        const packageJSON = JSON.parse(readFileSync(packagePath));
-        return packageJSON.private !== true;
-      }
-    }
-
-    return false;
-  });
+const getPublicPackages = isExperimental => {
+  if (isExperimental) {
+    return [
+      'create-subscription',
+      'eslint-plugin-react-hooks',
+      'jest-react',
+      'react',
+      'react-art',
+      'react-dom',
+      'react-is',
+      'react-reconciler',
+      'react-refresh',
+      'react-test-renderer',
+      'use-subscription',
+      'scheduler',
+    ];
+  } else {
+    return [
+      'create-subscription',
+      'eslint-plugin-react-hooks',
+      'jest-react',
+      'react',
+      'react-art',
+      'react-dom',
+      'react-is',
+      'react-reconciler',
+      'react-refresh',
+      'react-test-renderer',
+      'use-subscription',
+      'scheduler',
+    ];
+  }
 };
 
 const handleError = error => {
@@ -199,7 +198,8 @@ const splitCommaParams = array => {
 // It is based on the version of React in the local package.json (e.g. 16.12.0-01974a867).
 // Both numbers will be replaced if the "next" release is promoted to a stable release.
 const updateVersionsForNext = async (cwd, reactVersion, version) => {
-  const packages = getPublicPackages(join(cwd, 'packages'));
+  const isExperimental = reactVersion.includes('experimental');
+  const packages = getPublicPackages(isExperimental);
   const packagesDir = join(cwd, 'packages');
 
   // Update the shared React version source file.

From 99554dc36fa9f5ef29b75dd59836dcc720d831b9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 18 Dec 2020 16:29:48 -0600
Subject: [PATCH 0161/1603] Add Flight packages to experimental allowlist
 (#20486)

- react-fetch
- react-fs
- react-pg
- react-server-dom-webpack
---
 packages/react-fetch/package.json              | 1 -
 packages/react-fs/package.json                 | 1 -
 packages/react-pg/package.json                 | 1 -
 packages/react-server-dom-webpack/package.json | 2 +-
 scripts/release/utils.js                       | 4 ++++
 5 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-fetch/package.json b/packages/react-fetch/package.json
index e229a44e35f5..4594c8d32b5b 100644
--- a/packages/react-fetch/package.json
+++ b/packages/react-fetch/package.json
@@ -1,5 +1,4 @@
 {
-  "private": true,
   "name": "react-fetch",
   "description": "Helpers for creating React data sources",
   "version": "0.0.0",
diff --git a/packages/react-fs/package.json b/packages/react-fs/package.json
index b83cebf3b25c..e1af0d2b90a9 100644
--- a/packages/react-fs/package.json
+++ b/packages/react-fs/package.json
@@ -1,5 +1,4 @@
 {
-  "private": true,
   "name": "react-fs",
   "description": "React bindings for the filesystem",
   "version": "0.0.0",
diff --git a/packages/react-pg/package.json b/packages/react-pg/package.json
index 83a8b31c256c..0930085452ce 100644
--- a/packages/react-pg/package.json
+++ b/packages/react-pg/package.json
@@ -1,5 +1,4 @@
 {
-  "private": true,
   "name": "react-pg",
   "description": "React bindings for PostgreSQL",
   "version": "0.0.0",
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index 8c7be6ca6682..f81ef0bac9bb 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -2,7 +2,6 @@
   "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": "0.1.0",
-  "private": true,
   "keywords": [
     "react"
   ],
@@ -12,6 +11,7 @@
   "files": [
     "LICENSE",
     "README.md",
+    "build-info.json",
     "index.js",
     "plugin.js",
     "writer.js",
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index c86f9c886a53..be191978df3f 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -119,6 +119,10 @@ const getPublicPackages = isExperimental => {
       'react-test-renderer',
       'use-subscription',
       'scheduler',
+      'react-fetch',
+      'react-fs',
+      'react-pg',
+      'react-server-dom-webpack',
     ];
   } else {
     return [

From 6cbb9394d1474e3a728b49dc7f3a11d61a421ce3 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 21 Dec 2020 03:48:36 +0100
Subject: [PATCH 0162/1603] devtools: Display shortcuts for prev/next search
 result (#20470)

---
 .../src/devtools/views/Button.js              |  4 +--
 .../devtools/views/Components/SearchInput.js  | 33 +++++++------------
 2 files changed, 13 insertions(+), 24 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index c6d2525c0b78..0d706fc2ebd6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -16,14 +16,14 @@ import tooltipStyles from './Tooltip.css';
 type Props = {
   children: React$Node,
   className?: string,
-  title?: string,
+  title: React$Node,
   ...
 };
 
 export default function Button({
   children,
   className = '',
-  title = '',
+  title,
   ...rest
 }: Props) {
   let button = (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
index 0c8c56530f74..0fe2ccaa78ea 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
@@ -34,25 +34,6 @@ export default function SearchInput(props: Props) {
     [dispatch],
   );
 
-  const handleKeyDown = useCallback(
-    event => {
-      // For convenience, let up/down arrow keys change Tree selection.
-      switch (event.key) {
-        case 'ArrowDown':
-          dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'});
-          event.preventDefault();
-          break;
-        case 'ArrowUp':
-          dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'});
-          event.preventDefault();
-          break;
-        default:
-          break;
-      }
-    },
-    [dispatch],
-  );
-
   const handleInputKeyPress = useCallback(
     ({key, shiftKey}) => {
       if (key === 'Enter') {
@@ -98,7 +79,6 @@ export default function SearchInput(props: Props) {
       <input
         className={styles.Input}
         onChange={handleTextChange}
-        onKeyDown={handleKeyDown}
         onKeyPress={handleInputKeyPress}
         placeholder="Search (text or /regex/)"
         ref={inputRef}
@@ -115,14 +95,23 @@ export default function SearchInput(props: Props) {
         className={styles.IconButton}
         disabled={!searchText}
         onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
-        title="Scroll to previous search result">
+        title={
+          <React.Fragment>
+            Scroll to previous search result (<kbd>Shift</kbd> +{' '}
+            <kbd>Enter</kbd>)
+          </React.Fragment>
+        }>
         <ButtonIcon type="up" />
       </Button>
       <Button
         className={styles.IconButton}
         disabled={!searchText}
         onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
-        title="Scroll to next search result">
+        title={
+          <React.Fragment>
+            Scroll to next search result (<kbd>Enter</kbd>)
+          </React.Fragment>
+        }>
         <ButtonIcon type="down" />
       </Button>
       <Button

From 09a2c363a5175291ecdcbf7f39b0d165bc7da8ec Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 22 Dec 2020 17:09:29 +0100
Subject: [PATCH 0163/1603] Expose DEV-mode warnings in devtools UI (#20463)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../react-devtools-core/src/standalone.js     |    4 +
 .../react-devtools-extensions/src/main.js     |   13 +-
 packages/react-devtools-inline/src/backend.js |    3 +
 .../react-devtools-inline/src/frontend.js     |    2 +
 .../ownersListContext-test.js.snap            |    8 +-
 .../storeComponentFilters-test.js.snap        |  140 --
 .../__snapshots__/treeContext-test.js.snap    | 1293 ----------
 .../__tests__/inspectedElementContext-test.js |  463 +++-
 .../src/__tests__/profilerStore-test.js       |   15 +
 .../src/__tests__/setupTests.js               |   31 +
 .../src/__tests__/store-test.js               |  314 +++
 .../__tests__/storeComponentFilters-test.js   |  261 +-
 .../src/__tests__/treeContext-test.js         | 2179 +++++++++++++++--
 .../__tests__/treeContextStateSerializer.js   |   24 +
 .../src/__tests__/utils.js                    |   34 +
 .../src/backend/agent.js                      |   38 +-
 .../src/backend/console.js                    |  102 +-
 .../src/backend/legacy/renderer.js            |   21 +
 .../src/backend/renderer.js                   |  204 +-
 .../src/backend/types.js                      |    5 +
 .../src/backend/utils.js                      |   49 +
 packages/react-devtools-shared/src/bridge.js  |    4 +
 .../react-devtools-shared/src/constants.js    |    5 +
 .../src/devtools/store.js                     |  152 ++
 .../src/devtools/utils.js                     |   99 +-
 .../src/devtools/views/Components/Element.css |   18 +
 .../src/devtools/views/Components/Element.js  |   52 +-
 .../Components/InspectedElementContext.js     |   18 +
 .../InspectedElementErrorsAndWarningsTree.css |   60 +
 .../InspectedElementErrorsAndWarningsTree.js  |  157 ++
 .../InspectedElementSharedStyles.css          |    2 +
 .../views/Components/InspectedElementView.js  |    8 +
 .../devtools/views/Components/SearchInput.js  |   72 +-
 .../src/devtools/views/Components/Tree.css    |   21 +
 .../src/devtools/views/Components/Tree.js     |   68 +-
 .../devtools/views/Components/TreeContext.js  |   87 +
 .../src/devtools/views/Components/types.js    |    2 +
 .../src/devtools/views/Icon.js                |   14 +-
 .../views/Profiler/CommitTreeBuilder.js       |   20 +
 .../views/Settings/DebuggingSettings.js       |   19 +
 .../views/Settings/SettingsContext.js         |   42 +-
 .../devtools/views/Settings/SettingsModal.css |    2 +-
 .../views/Settings/SettingsShared.css         |    3 +-
 .../src/devtools/views/root.css               |   20 +
 packages/react-devtools-shared/src/hook.js    |    3 +
 packages/react-devtools-shared/src/utils.js   |   39 +
 .../src/app/InlineWarnings/index.js           |  181 ++
 .../react-devtools-shell/src/app/index.js     |    2 +
 packages/react-devtools/OVERVIEW.md           |   31 +-
 scripts/jest/config.build-devtools.js         |    3 +
 50 files changed, 4613 insertions(+), 1794 deletions(-)
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
 create mode 100644 packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
 create mode 100644 packages/react-devtools-shell/src/app/InlineWarnings/index.js

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 817b34386c20..e31b43d724d1 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -20,6 +20,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {Server} from 'ws';
 import {join} from 'path';
@@ -303,6 +304,9 @@ function startServer(
       )};
       window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
         getSavedComponentFilters(),
+      )};
+      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
+        getShowInlineWarningsAndErrors(),
       )};`;
 
     response.end(
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 00e3735c72c1..d8789e1c69af 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -10,6 +10,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {
   localStorageGetItem,
@@ -29,18 +30,18 @@ let panelCreated = false;
 // because they are stored in localStorage within the context of the extension.
 // Instead it relies on the extension to pass filters through.
 function syncSavedPreferences() {
-  const appendComponentStack = getAppendComponentStack();
-  const breakOnConsoleErrors = getBreakOnConsoleErrors();
-  const componentFilters = getSavedComponentFilters();
   chrome.devtools.inspectedWindow.eval(
     `window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = ${JSON.stringify(
-      appendComponentStack,
+      getAppendComponentStack(),
     )};
     window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = ${JSON.stringify(
-      breakOnConsoleErrors,
+      getBreakOnConsoleErrors(),
     )};
     window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = ${JSON.stringify(
-      componentFilters,
+      getSavedComponentFilters(),
+    )};
+    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
+      getShowInlineWarningsAndErrors(),
     )};`,
   );
 }
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index fb4627692465..7a5bd57b928e 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -24,11 +24,13 @@ function startActivation(contentWindow: window) {
           appendComponentStack,
           breakOnConsoleErrors,
           componentFilters,
+          showInlineWarningsAndErrors,
         } = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
         contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+        contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
 
         // TRICKY
         // The backend entry point may be required in the context of an iframe or the parent window.
@@ -40,6 +42,7 @@ function startActivation(contentWindow: window) {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
         }
 
         finishActivation(contentWindow);
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 9a5c14547113..3972f1789ab7 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -9,6 +9,7 @@ import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
+  getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -41,6 +42,7 @@ export function initialize(
             appendComponentStack: getAppendComponentStack(),
             breakOnConsoleErrors: getBreakOnConsoleErrors(),
             componentFilters: getSavedComponentFilters(),
+            showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
           },
           '*',
         );
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
index 25e56daf6f44..d5e244adf062 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -12,19 +12,19 @@ Array [
   Object {
     "displayName": "Grandparent",
     "hocDisplayNames": null,
-    "id": 7,
+    "id": 2,
     "type": 5,
   },
   Object {
     "displayName": "Parent",
     "hocDisplayNames": null,
-    "id": 9,
+    "id": 3,
     "type": 5,
   },
   Object {
     "displayName": "Child",
     "hocDisplayNames": null,
-    "id": 8,
+    "id": 4,
     "type": 5,
   },
 ]
@@ -115,7 +115,7 @@ Array [
   Object {
     "displayName": "Grandparent",
     "hocDisplayNames": null,
-    "id": 5,
+    "id": 2,
     "type": 5,
   },
 ]
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
deleted file mode 100644
index 49035b992783..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeComponentFilters-test.js.snap
+++ /dev/null
@@ -1,140 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Store component filters should filter HOCs: 1: mount 1`] = `
-[root]
-  ▾ <Component> [Bar][Foo]
-    ▾ <Component> [Foo]
-      ▾ <Component>
-          <div>
-`;
-
-exports[`Store component filters should filter HOCs: 2: hide all HOCs 1`] = `
-[root]
-  ▾ <Component>
-      <div>
-`;
-
-exports[`Store component filters should filter HOCs: 3: disable HOC filter 1`] = `
-[root]
-  ▾ <Component> [Bar][Foo]
-    ▾ <Component> [Foo]
-      ▾ <Component>
-          <div>
-`;
-
-exports[`Store component filters should filter by display name: 1: mount 1`] = `
-[root]
-  ▾ <Foo>
-      <Text>
-  ▾ <Bar>
-      <Text>
-  ▾ <Baz>
-      <Text>
-`;
-
-exports[`Store component filters should filter by display name: 2: filter "Foo" 1`] = `
-[root]
-    <Text>
-  ▾ <Bar>
-      <Text>
-  ▾ <Baz>
-      <Text>
-`;
-
-exports[`Store component filters should filter by display name: 3: filter "Ba" 1`] = `
-[root]
-  ▾ <Foo>
-      <Text>
-    <Text>
-    <Text>
-`;
-
-exports[`Store component filters should filter by display name: 4: filter "B.z" 1`] = `
-[root]
-  ▾ <Foo>
-      <Text>
-  ▾ <Bar>
-      <Text>
-    <Text>
-`;
-
-exports[`Store component filters should filter by path: 1: mount 1`] = `
-[root]
-  ▾ <Component>
-      <div>
-`;
-
-exports[`Store component filters should filter by path: 2: hide all components declared within this test filed 1`] = `[root]`;
-
-exports[`Store component filters should filter by path: 3: hide components in a made up fake path 1`] = `
-[root]
-  ▾ <Component>
-      <div>
-`;
-
-exports[`Store component filters should ignore invalid ElementTypeRoot filter: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-      <div>
-`;
-
-exports[`Store component filters should ignore invalid ElementTypeRoot filter: 2: add invalid filter 1`] = `
-[root]
-  ▾ <Root>
-      <div>
-`;
-
-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 1: suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Loading>
-        <div>
-`;
-
-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 2: resolved 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component>
-`;
-
-exports[`Store component filters should not break when Suspense nodes are filtered from the tree: 3: suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Loading>
-        <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Component>
-          <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 2: hide host components 1`] = `
-[root]
-  ▾ <Root>
-      <Component>
-`;
-
-exports[`Store component filters should support filtering by element type: 3: hide class components 1`] = `
-[root]
-  ▾ <div>
-    ▾ <Component>
-        <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 4: hide class and function components 1`] = `
-[root]
-  ▾ <div>
-      <div>
-`;
-
-exports[`Store component filters should support filtering by element type: 5: disable all filters 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Component>
-          <div>
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
deleted file mode 100644
index 1e72710e4bd2..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/treeContext-test.js.snap
+++ /dev/null
@@ -1,1293 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 0: mount 1`] = `
-[root]
-  ▾ <Parent>
-    ▾ <Suspense>
-      ▾ <Child>
-        ▾ <Suspense>
-            <Grandchild>
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 5,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 2: child owners tree 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 3,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [
-        6,
-      ],
-      "depth": 1,
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 4,
-      "type": 12,
-      "weight": 2,
-    },
-    Object {
-      "children": Array [],
-      "depth": 2,
-      "displayName": "Grandchild",
-      "hocDisplayNames": null,
-      "id": 6,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 5,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 4,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 3: child owners tree 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 3,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [
-        6,
-      ],
-      "depth": 1,
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 4,
-      "type": 12,
-      "weight": 2,
-    },
-    Object {
-      "children": Array [],
-      "depth": 2,
-      "displayName": "Grandchild",
-      "hocDisplayNames": null,
-      "id": 6,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 4,
-      "parentID": 5,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 4,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if an element outside the list is selected: 4: main tree 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 5,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 0: mount 1`] = `
-[root]
-  ▾ <Parent>
-      <Child>
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 2: child owners tree 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 1,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [],
-      "depth": 0,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 0,
-      "parentID": 2,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 3: remove child 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 1,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 4: parent owners tree 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 1,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 0,
-      "parentID": 1,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 2,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should exit the owners list if the current owner is unmounted: 5: unmount root 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 0,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 2: parent owners tree 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        4,
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": "0",
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": "1",
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 3: remove second child 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 2,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        4,
-      ],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 2,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": "0",
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should remove an element from the owners list if it is unmounted: 4: remove first child 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 1,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": Array [
-    Object {
-      "children": Array [
-        4,
-        5,
-      ],
-      "depth": 0,
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 3,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 2,
-      "parentID": 2,
-      "type": 5,
-      "weight": 3,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-    Object {
-      "children": Array [],
-      "depth": 1,
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "isCollapsed": false,
-      "key": null,
-      "ownerID": 3,
-      "parentID": 3,
-      "type": 5,
-      "weight": 1,
-    },
-  ],
-  "ownerID": 3,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Bar>
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Bar>
-    <Baz>
-    <Qux> [withHOC]
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    2,
-  ],
-  "searchText": "f",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 4: search for "y" 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "y",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext search state should find elements matching search text: 5: search for "w" 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    5,
-  ],
-  "searchText": "w",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Bar>
-    <Baz>
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 3,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 1,
-  "searchResults": Array [
-    3,
-    4,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-  ],
-  "searchText": "ba",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `
-[root]
-    <Foo>
-    <Baz>
-    <Bar>
-    <Baz>
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for "ba" 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 1,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 2,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 1,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 2,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": 0,
-  "searchResults": Array [
-    3,
-    4,
-    5,
-  ],
-  "searchText": "ba",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 2: select second child 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 3: remove children (parent should now be selected) 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 2,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should clear selection if the selected element is unmounted: 4: unmount root (nothing should be selected) 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 0,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should navigate next/previous sibling and skip over children in between: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-        <Child key="2">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`TreeListContext tree state should navigate the owner hierarchy: 0: mount 1`] = `
-[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">
-`;
-
-exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `
-Object {
-  "inspectedElementID": 8,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 8,
-  "selectedElementIndex": 6,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `
-Object {
-  "inspectedElementID": 6,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 6,
-  "selectedElementIndex": 4,
-}
-`;
-
-exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 7,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `
-Object {
-  "inspectedElementID": null,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": null,
-  "selectedElementIndex": null,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `
-Object {
-  "inspectedElementID": 3,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 3,
-  "selectedElementIndex": 1,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `
-Object {
-  "inspectedElementID": 4,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 4,
-  "selectedElementIndex": 2,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `
-Object {
-  "inspectedElementID": 5,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 5,
-  "selectedElementIndex": 3,
-}
-`;
-
-exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `
-Object {
-  "inspectedElementID": 2,
-  "numElements": 4,
-  "ownerFlatTree": null,
-  "ownerID": null,
-  "ownerSubtreeLeafElementID": null,
-  "searchIndex": null,
-  "searchResults": Array [],
-  "searchText": "",
-  "selectedElementID": 2,
-  "selectedElementIndex": 0,
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
index f08a3d9d6807..153bb43801ba 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -15,6 +15,7 @@ import type {
 } from 'react-devtools-shared/src/devtools/views/Components/InspectedElementContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
+import {withErrorsOrWarningsIgnored} from 'react-devtools-shared/src/__tests__/utils';
 
 describe('InspectedElementContext', () => {
   let React;
@@ -66,6 +67,10 @@ describe('InspectedElementContext', () => {
       .TreeContextController;
   });
 
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
   const Contexts = ({
     children,
     defaultSelectedElementID = null,
@@ -386,10 +391,10 @@ describe('InspectedElementContext', () => {
   it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {
     let targetRenderCount = 0;
 
-    const errorSpy = ((console: any).error = jest.fn());
-    const infoSpy = ((console: any).info = jest.fn());
-    const logSpy = ((console: any).log = jest.fn());
-    const warnSpy = ((console: any).warn = jest.fn());
+    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++;
@@ -407,14 +412,14 @@ describe('InspectedElementContext', () => {
     );
 
     expect(targetRenderCount).toBe(1);
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-    expect(errorSpy).toHaveBeenCalledWith('error');
-    expect(infoSpy).toHaveBeenCalledTimes(1);
-    expect(infoSpy).toHaveBeenCalledWith('info');
-    expect(logSpy).toHaveBeenCalledTimes(1);
-    expect(logSpy).toHaveBeenCalledWith('log');
-    expect(warnSpy).toHaveBeenCalledTimes(1);
-    expect(warnSpy).toHaveBeenCalledWith('warn');
+    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 id = ((store.getElementIDAtIndex(0): any): number);
 
@@ -442,10 +447,10 @@ describe('InspectedElementContext', () => {
 
     expect(inspectedElement).not.toBe(null);
     expect(targetRenderCount).toBe(2);
-    expect(errorSpy).toHaveBeenCalledTimes(1);
-    expect(infoSpy).toHaveBeenCalledTimes(1);
-    expect(logSpy).toHaveBeenCalledTimes(1);
-    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.info).toHaveBeenCalledTimes(1);
+    expect(console.log).toHaveBeenCalledTimes(1);
+    expect(console.warn).toHaveBeenCalledTimes(1);
 
     done();
   });
@@ -1569,21 +1574,20 @@ describe('InspectedElementContext', () => {
     );
     expect(storeAsGlobal).not.toBeNull();
 
-    const logSpy = jest.fn();
-    spyOn(console, 'log').and.callFake(logSpy);
+    jest.spyOn(console, 'log').mockImplementation(() => {});
 
     // Should store the whole value (not just the hydrated parts)
     storeAsGlobal(id, ['props', 'nestedObject']);
     jest.runOnlyPendingTimers();
-    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(console.log).toHaveBeenCalledWith('$reactTemp1');
     expect(global.$reactTemp1).toBe(nestedObject);
 
-    logSpy.mockReset();
+    console.log.mockReset();
 
     // Should store the nested property specified (not just the outer value)
     storeAsGlobal(id, ['props', 'nestedObject', 'a', 'b']);
     jest.runOnlyPendingTimers();
-    expect(logSpy).toHaveBeenCalledWith('$reactTemp2');
+    expect(console.log).toHaveBeenCalledWith('$reactTemp2');
     expect(global.$reactTemp2).toBe(nestedObject.a.b);
 
     done();
@@ -1805,4 +1809,421 @@ describe('InspectedElementContext', () => {
 
     done();
   });
+
+  describe('inline errors and warnings', () => {
+    // Some actions require the Fiber id.
+    // In those instances you might want to make assertions based on the ID instead of the index.
+    function getErrorsAndWarningsForElement(id: number) {
+      const index = ((store.getIndexOfElementID(id): any): number);
+      return getErrorsAndWarningsForElementAtIndex(index);
+    }
+
+    async function getErrorsAndWarningsForElementAtIndex(index) {
+      const id = ((store.getElementIDAtIndex(index): any): number);
+
+      let errors = null;
+      let warnings = null;
+
+      function Suspender({target}) {
+        const {getInspectedElement} = React.useContext(InspectedElementContext);
+        const inspectedElement = getInspectedElement(id);
+        errors = inspectedElement.errors;
+        warnings = inspectedElement.warnings;
+        return null;
+      }
+
+      let root;
+      await utils.actAsync(() => {
+        root = TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={index}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        );
+      }, 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;
+      };
+
+      const container = document.createElement('div');
+
+      await withErrorsOrWarningsIgnored(['test-only: '], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: render error",
+              1,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "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;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: render error",
+              2,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "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;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: useLayoutEffect error",
+              1,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "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;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "test-only: useEffect error",
+              1,
+            ],
+          ],
+          "warnings": Array [
+            Array [
+              "test-only: useEffect warning",
+              1,
+            ],
+          ],
+        }
+      `);
+    });
+
+    it('from react get recorded without a component stack', async () => {
+      const Example = () => {
+        return [<div />];
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(
+        ['Warning: Each child in a list should have a unique "key" prop.'],
+        async () => {
+          await utils.actAsync(() =>
+            ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          );
+        },
+      );
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [
+            Array [
+              "Warning: Each child in a list should have a unique \\"key\\" prop. See https://reactjs.org/link/warning-keys for more information.",
+              1,
+            ],
+          ],
+          "warnings": Array [],
+        }
+      `);
+    });
+
+    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;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+        );
+      });
+
+      store.clearErrorsAndWarnings();
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      const data = await getErrorsAndWarningsForElementAtIndex(0);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "errors": Array [],
+          "warnings": Array [],
+        }
+      `);
+    });
+
+    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;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example id={1} />
+              <Example id={2} />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      store.clearWarningsForElement(2);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      let data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #2",
+                1,
+              ],
+            ],
+            "warnings": Array [],
+          },
+        ]
+      `);
+
+      store.clearWarningsForElement(1);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": Array [],
+          },
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #2",
+                1,
+              ],
+            ],
+            "warnings": Array [],
+          },
+        ]
+      `);
+    });
+
+    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;
+      };
+
+      const container = document.createElement('div');
+      await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
+        await utils.actAsync(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example id={1} />
+              <Example id={2} />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      store.clearErrorsForElement(2);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      let data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [
+              Array [
+                "test-only: render error #1",
+                1,
+              ],
+            ],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          Object {
+            "errors": Array [],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #2",
+                1,
+              ],
+            ],
+          },
+        ]
+      `);
+
+      store.clearErrorsForElement(1);
+      // Flush events to the renderer.
+      jest.runOnlyPendingTimers();
+
+      data = [
+        await getErrorsAndWarningsForElement(1),
+        await getErrorsAndWarningsForElement(2),
+      ];
+      expect(data).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "errors": Array [],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #1",
+                1,
+              ],
+            ],
+          },
+          Object {
+            "errors": Array [],
+            "warnings": Array [
+              Array [
+                "test-only: render warning #2",
+                1,
+              ],
+            ],
+          },
+        ]
+      `);
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index 3a6a78597935..dca154ad170c 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -120,4 +120,19 @@ describe('ProfilerStore', () => {
     expect(data.commitData).toHaveLength(1);
     expect(data.operations).toHaveLength(1);
   });
+
+  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/types');
+        store.componentFilters = [
+          utils.createElementTypeFilter(ElementTypeHostComponent),
+        ];
+      });
+    }).toThrow('Cannot modify filter preferences while profiling');
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index e1f7f13f76b2..b244c7e0cf17 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -33,11 +33,24 @@ env.beforeEach(() => {
   const {
     getDefaultComponentFilters,
     saveComponentFilters,
+    setShowInlineWarningsAndErrors,
   } = require('react-devtools-shared/src/utils');
 
   // Fake timers let us flush Bridge operations between setup and assertions.
   jest.useFakeTimers();
 
+  // Use utils.js#withErrorsOrWarningsIgnored instead of directly mutating this array.
+  global._ignoredErrorOrWarningMessages = [];
+  function shouldIgnoreConsoleErrorOrWarn(args) {
+    const firstArg = args[0];
+    if (typeof firstArg !== 'string') {
+      return false;
+    }
+    return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => {
+      return firstArg.indexOf(errorOrWarningMessage) !== -1;
+    });
+  }
+
   const originalConsoleError = console.error;
   // $FlowFixMe
   console.error = (...args) => {
@@ -54,14 +67,32 @@ env.beforeEach(() => {
       // 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;
     }
     originalConsoleError.apply(console, args);
   };
+  const originalConsoleWarn = console.warn;
+  // $FlowFixMe
+  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;
+    }
+    originalConsoleWarn.apply(console, args);
+  };
 
   // Initialize filters to a known good state.
   saveComponentFilters(getDefaultComponentFilters());
   global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
 
+  // Also initialize inline warnings so that we can test them.
+  setShowInlineWarningsAndErrors(true);
+  global.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = true;
+
   installHook(global);
 
   const bridgeListeners = [];
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 92face2f3765..33d3bc0a072a 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -14,6 +14,7 @@ describe('Store', () => {
   let act;
   let getRendererID;
   let store;
+  let withErrorsOrWarningsIgnored;
 
   beforeEach(() => {
     agent = global.agent;
@@ -25,6 +26,7 @@ describe('Store', () => {
     const utils = require('./utils');
     act = utils.act;
     getRendererID = utils.getRendererID;
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
   });
 
   it('should not allow a root node to be collapsed', () => {
@@ -1008,4 +1010,316 @@ describe('Store', () => {
       done();
     });
   });
+
+  describe('inline errors and warnings', () => {
+    it('during render are counted', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example rerender={1} />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+      `);
+    });
+
+    it('during layout get counted', () => {
+      function Example() {
+        React.useLayoutEffect(() => {
+          console.error('test-only: layout error');
+          console.warn('test-only: layout warning');
+        });
+        return null;
+      }
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example rerender={1} />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+      `);
+    });
+
+    // This is not great, but it seems safer than potentially flushing between commits.
+    // Our logic for determining how to handle e.g. suspended trees or error boundaries
+    // is built on the assumption that we're evaluating the results of a commit, not an in-progress render.
+    it('during passive get counted (but not until the next commit)', () => {
+      function Example() {
+        React.useEffect(() => {
+          console.error('test-only: passive error');
+          console.warn('test-only: passive warning');
+        });
+        return null;
+      }
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <Example>
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<Example rerender={1} />, container));
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 1
+        [root]
+            <Example> ✕⚠
+      `);
+
+      act(() => ReactDOM.unmountComponentAtNode(container));
+      expect(store).toMatchInlineSnapshot(``);
+    });
+
+    it('from react get counted', () => {
+      const container = document.createElement('div');
+      function Example() {
+        return [<Child />];
+      }
+      function Child() {
+        return null;
+      }
+
+      withErrorsOrWarningsIgnored(
+        ['Warning: Each child in a list should have a unique "key" prop'],
+        () => {
+          act(() => ReactDOM.render(<Example />, container));
+        },
+      );
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+          ▾ <Example> ✕
+              <Child>
+      `);
+    });
+
+    it('can be cleared for the whole app', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      store.clearErrorsAndWarnings();
+      // flush events to the renderer
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <Example>
+            <Example>
+      `);
+    });
+
+    it('can be cleared for particular Fiber (only warnings)', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      store.clearWarningsForElement(2);
+      // Flush events to the renderer.
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 1
+        [root]
+            <Example> ✕⚠
+            <Example> ✕
+      `);
+    });
+
+    it('can be cleared for a particular Fiber (only errors)', () => {
+      function Example() {
+        console.error('test-only: render error');
+        console.warn('test-only: render warning');
+        return null;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Example />
+              <Example />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ✕⚠
+      `);
+
+      store.clearErrorsForElement(2);
+      // Flush events to the renderer.
+      jest.runAllTimers();
+
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+            <Example> ✕⚠
+            <Example> ⚠
+      `);
+    });
+
+    it('are updated when fibers are removed from the tree', () => {
+      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;
+      }
+      const container = document.createElement('div');
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithError />
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 2
+        [root]
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithWarning />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+            <ComponentWithWarning> ⚠
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(() => ReactDOM.render(<React.Fragment />, container));
+      });
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.errorCount).toBe(0);
+      expect(store.warningCount).toBe(0);
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index a8a0e151ef74..4a365acb0ef3 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -48,22 +48,28 @@ describe('Store component filters', () => {
   });
 
   it('should support filtering by element type', () => {
-    class Root extends React.Component<{|children: React$Node|}> {
+    class ClassComponent extends React.Component<{|children: React$Node|}> {
       render() {
         return <div>{this.props.children}</div>;
       }
     }
-    const Component = () => <div>Hi</div>;
+    const FunctionComponent = () => <div>Hi</div>;
 
     act(() =>
       ReactDOM.render(
-        <Root>
-          <Component />
-        </Root>,
+        <ClassComponent>
+          <FunctionComponent />
+        </ClassComponent>,
         document.createElement('div'),
       ),
     );
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
 
     act(
       () =>
@@ -71,8 +77,11 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeHostComponent),
         ]),
     );
-
-    expect(store).toMatchSnapshot('2: hide host components');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+            <FunctionComponent>
+    `);
 
     act(
       () =>
@@ -80,8 +89,12 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeClass),
         ]),
     );
-
-    expect(store).toMatchSnapshot('3: hide class components');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <div>
+          ▾ <FunctionComponent>
+              <div>
+    `);
 
     act(
       () =>
@@ -90,8 +103,11 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeFunction),
         ]),
     );
-
-    expect(store).toMatchSnapshot('4: hide class and function components');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <div>
+            <div>
+    `);
 
     act(
       () =>
@@ -100,15 +116,33 @@ describe('Store component filters', () => {
           utils.createElementTypeFilter(Types.ElementTypeFunction, false),
         ]),
     );
-
-    expect(store).toMatchSnapshot('5: disable all filters');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
+
+    act(() => (store.componentFilters = []));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <ClassComponent>
+          ▾ <div>
+            ▾ <FunctionComponent>
+                <div>
+    `);
   });
 
   it('should ignore invalid ElementTypeRoot filter', () => {
-    const Root = () => <div>Hi</div>;
+    const Component = () => <div>Hi</div>;
 
-    act(() => ReactDOM.render(<Root />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
 
     act(
       () =>
@@ -117,7 +151,11 @@ describe('Store component filters', () => {
         ]),
     );
 
-    expect(store).toMatchSnapshot('2: add invalid filter');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
   });
 
   it('should filter by display name', () => {
@@ -136,27 +174,59 @@ describe('Store component filters', () => {
         document.createElement('div'),
       ),
     );
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+        ▾ <Bar>
+            <Text>
+        ▾ <Baz>
+            <Text>
+    `);
 
     act(
       () => (store.componentFilters = [utils.createDisplayNameFilter('Foo')]),
     );
-    expect(store).toMatchSnapshot('2: filter "Foo"');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Text>
+        ▾ <Bar>
+            <Text>
+        ▾ <Baz>
+            <Text>
+    `);
 
     act(() => (store.componentFilters = [utils.createDisplayNameFilter('Ba')]));
-    expect(store).toMatchSnapshot('3: filter "Ba"');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+          <Text>
+          <Text>
+    `);
 
     act(
       () => (store.componentFilters = [utils.createDisplayNameFilter('B.z')]),
     );
-    expect(store).toMatchSnapshot('4: filter "B.z"');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Foo>
+            <Text>
+        ▾ <Bar>
+            <Text>
+          <Text>
+    `);
   });
 
   it('should filter by path', () => {
     const Component = () => <div>Hi</div>;
 
     act(() => ReactDOM.render(<Component />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
 
     act(
       () =>
@@ -165,9 +235,7 @@ describe('Store component filters', () => {
         ]),
     );
 
-    expect(store).toMatchSnapshot(
-      '2: hide all components declared within this test filed',
-    );
+    expect(store).toMatchInlineSnapshot(`[root]`);
 
     act(
       () =>
@@ -176,7 +244,11 @@ describe('Store component filters', () => {
         ]),
     );
 
-    expect(store).toMatchSnapshot('3: hide components in a made up fake path');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
   });
 
   it('should filter HOCs', () => {
@@ -187,15 +259,29 @@ describe('Store component filters', () => {
     Bar.displayName = 'Bar(Foo(Component))';
 
     act(() => ReactDOM.render(<Bar />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component> [Bar][Foo]
+          ▾ <Component> [Foo]
+            ▾ <Component>
+                <div>
+    `);
 
     act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
-
-    expect(store).toMatchSnapshot('2: hide all HOCs');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
 
     act(() => (store.componentFilters = [utils.createHOCFilter(false)]));
-
-    expect(store).toMatchSnapshot('3: disable HOC filter');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component> [Bar][Foo]
+          ▾ <Component> [Foo]
+            ▾ <Component>
+                <div>
+    `);
   });
 
   it('should not send a bridge update if the set of enabled filters has not changed', () => {
@@ -252,12 +338,117 @@ describe('Store component filters', () => {
 
     const container = document.createElement('div');
     act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
-    expect(store).toMatchSnapshot('1: suspended');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+          ▾ <Loading>
+              <div>
+    `);
 
     act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
-    expect(store).toMatchSnapshot('2: resolved');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+            <Component>
+    `);
 
     act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
-    expect(store).toMatchSnapshot('3: suspended');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Wrapper>
+          ▾ <Loading>
+              <div>
+    `);
+  });
+
+  describe('inline errors and warnings', () => {
+    it('only counts for unfiltered components', () => {
+      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;
+      }
+      const container = document.createElement('div');
+      utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
+        act(
+          () =>
+            (store.componentFilters = [
+              utils.createDisplayNameFilter('Warning'),
+              utils.createDisplayNameFilter('Error'),
+            ]),
+        );
+        act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <ComponentWithError />
+              <ComponentWithWarning />
+              <ComponentWithWarningAndError />
+            </React.Fragment>,
+            container,
+          ),
+        );
+      });
+
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.errorCount).toBe(0);
+      expect(store.warningCount).toBe(0);
+
+      act(() => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+
+      act(
+        () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Warning')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+            <ComponentWithError> ✕
+      `);
+
+      act(
+        () =>
+          (store.componentFilters = [utils.createDisplayNameFilter('Error')]),
+      );
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 1
+        [root]
+            <ComponentWithWarning> ⚠
+      `);
+
+      act(
+        () =>
+          (store.componentFilters = [
+            utils.createDisplayNameFilter('Warning'),
+            utils.createDisplayNameFilter('Error'),
+          ]),
+      );
+      expect(store).toMatchInlineSnapshot(`[root]`);
+      expect(store.errorCount).toBe(0);
+      expect(store.warningCount).toBe(0);
+
+      act(() => (store.componentFilters = []));
+      expect(store).toMatchInlineSnapshot(`
+        ✕ 2, ⚠ 2
+        [root]
+            <ComponentWithError> ✕
+            <ComponentWithWarning> ⚠
+            <ComponentWithWarningAndError> ✕⚠
+      `);
+    });
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 0b672f91415f..8c057fb72080 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -22,6 +22,7 @@ describe('TreeListContext', () => {
   let bridge: FrontendBridge;
   let store: Store;
   let utils;
+  let withErrorsOrWarningsIgnored;
 
   let BridgeContext;
   let StoreContext;
@@ -34,6 +35,8 @@ describe('TreeListContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -88,43 +91,111 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      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).toMatchSnapshot('2: select first element');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
-      while (
-        state.selectedElementIndex !== null &&
-        state.selectedElementIndex < store.numElements - 1
-      ) {
-        const index = ((state.selectedElementIndex: any): number);
-        utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
-        utils.act(() => renderer.update(<Contexts />));
-        expect(state).toMatchSnapshot(`3: select element after (${index})`);
-      }
+      utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
+      utils.act(() => renderer.update(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
 
-      while (
-        state.selectedElementIndex !== null &&
-        state.selectedElementIndex > 0
-      ) {
-        const index = ((state.selectedElementIndex: any): number);
-        utils.act(() => dispatch({type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE'}));
-        utils.act(() => renderer.update(<Contexts />));
-        expect(state).toMatchSnapshot(`4: select element before (${index})`);
-      }
+      utils.act(() => dispatch({type: 'SELECT_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).toMatchSnapshot('5: select previous wraps around to last');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
 
       utils.act(() => dispatch({type: 'SELECT_NEXT_ELEMENT_IN_TREE'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('6: select next wraps around to first');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+        →  ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
     });
 
     it('should select child elements', () => {
@@ -146,30 +217,71 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      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).toMatchSnapshot('2: select first element');
+      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).toMatchSnapshot('3: select Parent');
+      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).toMatchSnapshot('4: select Child');
-
-      const previousState = state;
+      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).toEqual(previousState);
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+        →        <Child>
+                 <Child>
+             ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
     });
 
     it('should select parent elements and then collapse', () => {
@@ -191,27 +303,78 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      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).toMatchSnapshot('2: select last child');
-
+      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).toMatchSnapshot('3: select Parent');
-
+      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).toMatchSnapshot('4: select Grandparent');
+      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;
 
@@ -221,7 +384,7 @@ describe('TreeListContext', () => {
       expect(state).toEqual(previousState);
     });
 
-    it('should clear selection if the selected element is unmounted', async done => {
+    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;
@@ -239,16 +402,28 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
-
+      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).toMatchSnapshot('2: select second child');
-
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+             ▾ <Parent>
+                 <Child>
+        →        <Child>
+      `);
+
+      // Remove the child (which should auto-select the parent)
       await utils.actAsync(() =>
         ReactDOM.render(
           <Grandparent>
@@ -257,16 +432,15 @@ describe('TreeListContext', () => {
           container,
         ),
       );
-      expect(state).toMatchSnapshot(
-        '3: remove children (parent should now be selected)',
-      );
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →      <Parent>
+      `);
 
+      // Unmount the root (so that nothing is selected)
       await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
-      expect(state).toMatchSnapshot(
-        '4: unmount root (nothing should be selected)',
-      );
-
-      done();
+      expect(state).toMatchInlineSnapshot(``);
     });
 
     it('should navigate next/previous sibling and skip over children in between', () => {
@@ -287,21 +461,6 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      /*
-       * 0  ▾ <Grandparent>
-       * 1    ▾ <Parent>
-       * 2        <Child key="0">
-       * 3    ▾ <Parent>
-       * 4        <Child key="0">
-       * 5        <Child key="1">
-       * 6        <Child key="2">
-       * 7    ▾ <Parent>
-       * 8        <Child key="0">
-       * 9        <Child key="1">
-       */
-
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
 
@@ -311,31 +470,131 @@ describe('TreeListContext', () => {
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: firstParentID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.selectedElementIndex).toBe(1);
+      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.selectedElementIndex).toBe(3);
+      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.selectedElementIndex).toBe(7);
+      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.selectedElementIndex).toBe(1);
+      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.selectedElementIndex).toBe(7);
+      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.selectedElementIndex).toBe(3);
+      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.selectedElementIndex).toBe(1);
+      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', () => {
@@ -363,24 +622,6 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      /*
-       *  0  ▾ <Grandparent>
-       *  1    ▾ <Wrapper>
-       *  2      ▾ <Parent>
-       *  3          <Child key="0">
-       *  4    ▾ <Wrapper>
-       *  5      ▾ <Parent>
-       *  6          <Child key="0">
-       *  7          <Child key="1">
-       *  8          <Child key="2">
-       *  9    ▾ <Wrapper>
-       * 10      ▾ <Parent>
-       * 11          <Child key="0">
-       * 12          <Child key="1">
-       */
-
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
 
@@ -389,86 +630,281 @@ describe('TreeListContext', () => {
         dispatch({type: 'SELECT_ELEMENT_BY_ID', payload: childID}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.ownerSubtreeLeafElementID).toBeNull();
-      expect(state.selectedElementIndex).toBe(7);
+      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.ownerSubtreeLeafElementID).toBe(childID);
-      expect(state.selectedElementIndex).toBe(5);
+      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.selectedElementIndex).toBe(0);
-
+      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.selectedElementIndex).toBe(0); // noop since we're at the top
+      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.selectedElementIndex).toBe(5);
+      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.selectedElementIndex).toBe(7);
-
+      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.selectedElementIndex).toBe(7); // noop since we're at the leaf node
+      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.selectedElementIndex).toBe(6);
-      expect(state.ownerSubtreeLeafElementID).toBeNull();
-
+      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.ownerSubtreeLeafElementID).toBeNull();
-      expect(state.selectedElementIndex).toBe(5);
+      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">
+      `);
 
-      // It should not be possible to navigate beyond the owner chain leaf.
       utils.act(() =>
         dispatch({type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE'}),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state.ownerSubtreeLeafElementID).toBe(parentID);
-      expect(state.selectedElementIndex).toBe(0);
-
+      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.selectedElementIndex).toBe(0); // noop since we're at the top
+      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.selectedElementIndex).toBe(5);
-
+      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.selectedElementIndex).toBe(5); // noop since we're at the leaf node
+      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">
+      `);
     });
   });
 
@@ -493,31 +929,59 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      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).toMatchSnapshot('2: search for "ba"');
+      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).toMatchSnapshot('3: search for "f"');
+      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).toMatchSnapshot('4: search for "y"');
+      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).toMatchSnapshot('5: search for "w"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+        →    <Qux> [withHOC]
+      `);
     });
 
     it('should select the next and previous items within the search results', () => {
@@ -537,42 +1001,95 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
-
+      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).toMatchSnapshot('2: search for "ba"');
-
+      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).toMatchSnapshot('3: go to second result');
-
+      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).toMatchSnapshot('4: go to third result');
-
+      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).toMatchSnapshot('5: go to second result');
-
+      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).toMatchSnapshot('6: go to first result');
-
+      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).toMatchSnapshot('7: wrap to last result');
-
+      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).toMatchSnapshot('8: wrap to first result');
+      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 done => {
+    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;
@@ -589,15 +1106,21 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+      `);
 
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: search for "ba"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(
@@ -610,12 +1133,24 @@ describe('TreeListContext', () => {
         ),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: mount Baz');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+      `);
 
-      done();
+      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 done => {
+    it('should remove unmounted elements from the search results set', async () => {
       const Foo = () => null;
       const Bar = () => null;
       const Baz = () => null;
@@ -633,19 +1168,32 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+             <Baz>
+      `);
 
       utils.act(() => dispatch({type: 'SET_SEARCH_TEXT', payload: 'ba'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: search for "ba"');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+        →    <Bar>
+             <Baz>
+      `);
 
       utils.act(() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: go to second result');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+             <Foo>
+             <Bar>
+        →    <Baz>
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(
@@ -657,9 +1205,28 @@ describe('TreeListContext', () => {
         ),
       );
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('4: unmount Baz');
+      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>
+      `);
 
-      done();
+      // 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>
+      `);
     });
   });
 
@@ -678,23 +1245,38 @@ describe('TreeListContext', () => {
         ReactDOM.render(<Grandparent />, document.createElement('div')),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      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).toMatchSnapshot('2: parent owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child>
+               <Child>
+      `);
 
       utils.act(() => dispatch({type: 'RESET_OWNER_STACK'}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('3: final state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Grandparent>
+        →    ▾ <Parent>
+                 <Child>
+                 <Child>
+      `);
     });
 
-    it('should remove an element from the owners list if it is unmounted', async done => {
+    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} />);
@@ -703,31 +1285,45 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
       utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      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).toMatchSnapshot('2: parent owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child key="0">
+               <Child key="1">
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(<Grandparent count={1} />, container),
       );
-      expect(state).toMatchSnapshot('3: remove second child');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →  ▾ <Parent>
+               <Child key="0">
+      `);
 
       await utils.actAsync(() =>
         ReactDOM.render(<Grandparent count={0} />, container),
       );
-      expect(state).toMatchSnapshot('4: remove first child');
-
-      done();
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Parent>
+      `);
     });
 
-    it('should exit the owners list if the current owner is unmounted', async done => {
+    it('should exit the owners list if the current owner is unmounted', async () => {
       const Parent = props => props.children || null;
       const Child = () => null;
 
@@ -741,29 +1337,38 @@ describe('TreeListContext', () => {
         ),
       );
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      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).toMatchSnapshot('2: child owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Child>
+      `);
 
       await utils.actAsync(() => ReactDOM.render(<Parent />, container));
-      expect(state).toMatchSnapshot('3: remove child');
+      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).toMatchSnapshot('4: parent owners tree');
+      expect(state).toMatchInlineSnapshot(`
+        [owners]
+        →    <Parent>
+      `);
 
       await utils.actAsync(() => ReactDOM.unmountComponentAtNode(container));
-      expect(state).toMatchSnapshot('5: unmount root');
-
-      done();
+      expect(state).toMatchInlineSnapshot(``);
     });
 
     // This tests ensures support for toggling Suspense boundaries outside of the active owners list.
@@ -783,11 +1388,16 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
       utils.act(() => ReactDOM.render(<Parent />, container));
 
-      expect(store).toMatchSnapshot('0: mount');
-
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
-      expect(state).toMatchSnapshot('1: initial state');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+             ▾ <Suspense>
+               ▾ <Child>
+                 ▾ <Suspense>
+                     <Grandchild>
+      `);
 
       const outerSuspenseID = ((store.getElementIDAtIndex(1): any): number);
       const childID = ((store.getElementIDAtIndex(2): any): number);
@@ -795,21 +1405,1212 @@ describe('TreeListContext', () => {
 
       utils.act(() => dispatch({type: 'SELECT_OWNER', payload: childID}));
       utils.act(() => renderer.update(<Contexts />));
-      expect(state).toMatchSnapshot('2: child owners tree');
+      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).toMatchSnapshot('3: child owners tree');
+      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).toMatchSnapshot('4: main tree');
+      expect(state).toMatchInlineSnapshot(`
+        [root]
+           ▾ <Parent>
+        →    ▾ <Suspense>
+               ▾ <Child>
+                 ▾ <Suspense>
+                     <Grandchild>
+      `);
+    });
+  });
+
+  describe('inline errors/warnings state', () => {
+    function clearAllErrors() {
+      utils.act(() => store.clearErrorsAndWarnings());
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function clearErrorsForElement(id) {
+      utils.act(() => store.clearErrorsForElement(id));
+      // flush events to the renderer
+      jest.runAllTimers();
+    }
+
+    function clearWarningsForElement(id) {
+      utils.act(() => store.clearWarningsForElement(id));
+      // 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(() =>
+        ReactDOM.render(
+          <React.Fragment>
+            <Child />
+            <Child />
+            <Child />
+          </React.Fragment>,
+          document.createElement('div'),
+        ),
+      );
+
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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(() => {
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />,
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+        });
+      });
+
+      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(() => {
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />,
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          );
+        });
+      });
+
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child logError={true} />
+              <Child />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+              <Child logError={true} />
+              <Child logWarning={true} />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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', () => {
+      const container = document.createElement('div');
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child />
+              <Child />
+              <Child logError={true} />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child />
+              <Child logWarning={true} />
+              <Child />
+              <Child />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Child logWarning={true} />
+              <Child logError={true} />
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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 select and auto-expand parts components within hidden parts of the tree', () => {
+      const Wrapper = ({children}) => children;
+
+      store.collapseNodesByDefault = true;
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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 properly handle when components filters are updated', () => {
+      const Wrapper = ({children}) => children;
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      utils.act(() => TestRenderer.create(<Contexts />));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+        →      <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+                 <Child> ⚠
+      `);
+
+      utils.act(() => {
+        store.componentFilters = [utils.createDisplayNameFilter('Wrapper')];
+      });
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+        →    <Child> ⚠
+             <Child> ⚠
+      `);
+
+      selectNextErrorOrWarning();
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+             <Child> ⚠
+        →    <Child> ⚠
+      `);
+
+      utils.act(() => {
+        store.componentFilters = [];
+      });
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 0, ⚠ 2
+        [root]
+           ▾ <Wrapper>
+               <Child> ⚠
+           ▾ <Wrapper>
+             ▾ <Wrapper>
+        →        <Child> ⚠
+      `);
+
+      selectPreviousErrorOrWarning();
+      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(() =>
+          ReactDOM.render(
+            <React.Fragment>
+              <Wrapper>
+                <Child logWarning={true} />
+              </Wrapper>
+              <Wrapper>
+                <Wrapper>
+                  <Child logWarning={true} />
+                </Wrapper>
+              </Wrapper>
+            </React.Fragment>,
+            document.createElement('div'),
+          ),
+        ),
+      );
+
+      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(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <NeverResolves />
+              </React.Suspense>,
+              document.createElement('div'),
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        jest.runAllTimers();
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                       <Suspense>
+              `);
+
+        selectNextErrorOrWarning();
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                       <Suspense>
+              `);
+      });
+
+      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));
+
+        const container = document.createElement('div');
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                       <Suspense>
+              `);
+
+        await Promise.resolve();
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={null}>
+                <Child logWarning={true} />
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 0, ⚠ 1
+          [root]
+             ▾ <Suspense>
+                 <Child> ⚠
+                 <Child>
+        `);
+      });
+
+      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} />;
+
+        const container = document.createElement('div');
+
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={<Fallback />}>
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+             ▾ <Suspense>
+               ▾ <Fallback>
+                   <Child> ✕
+        `);
+
+        await Promise.resolve();
+        withErrorsOrWarningsIgnored(['test-only:'], () =>
+          utils.act(() =>
+            ReactDOM.render(
+              <React.Suspense fallback={<Fallback />}>
+                <LazyComponent />
+              </React.Suspense>,
+              container,
+            ),
+          ),
+        );
+
+        expect(state).toMatchInlineSnapshot(`
+                  [root]
+                     ▾ <Suspense>
+                         <Child>
+              `);
+      });
+    });
+
+    describe('error boundaries', () => {
+      it('should properly handle errors/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 BadRender extends React.Component {
+          render() {
+            console.error('test-only: I am about to throw!');
+            throw new Error('test-only: Oops!');
+          }
+        }
+
+        const container = document.createElement('div');
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              ReactDOM.render(
+                <ErrorBoundary>
+                  <BadRender />
+                </ErrorBoundary>,
+                container,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+              <ErrorBoundary> ✕
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+          →    <ErrorBoundary> ✕
+        `);
+
+        utils.act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(state).toMatchInlineSnapshot(``);
+
+        // Should be a noop
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(``);
+      });
+
+      it('should properly handle errors/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!');
+          }
+        }
+
+        const container = document.createElement('div');
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              ReactDOM.render(
+                <ErrorBoundary>
+                  <LogsWarning />
+                </ErrorBoundary>,
+                container,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+              <ErrorBoundary> ✕
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 0
+          [root]
+          →    <ErrorBoundary> ✕
+        `);
+
+        utils.act(() => ReactDOM.unmountComponentAtNode(container));
+        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!');
+          }
+        }
+
+        const container = document.createElement('div');
+        withErrorsOrWarningsIgnored(
+          ['test-only:', 'React will try to recreate this component tree'],
+          () => {
+            utils.act(() =>
+              ReactDOM.render(
+                <ErrorBoundary>
+                  <BadRender />
+                </ErrorBoundary>,
+                container,
+              ),
+            );
+          },
+        );
+
+        utils.act(() => TestRenderer.create(<Contexts />));
+
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 2, ⚠ 0
+          [root]
+            ▾ <ErrorBoundary> ✕
+                <Child> ✕
+        `);
+
+        selectNextErrorOrWarning();
+        expect(state).toMatchInlineSnapshot(`
+          ✕ 2, ⚠ 0
+          [root]
+          →  ▾ <ErrorBoundary> ✕
+                 <Child> ✕
+        `);
+      });
     });
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js b/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
new file mode 100644
index 000000000000..866d4ed4c366
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
@@ -0,0 +1,24 @@
+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;
+  }
+
+  // Duck typing at its finest.
+  return (
+    maybeState.hasOwnProperty('inspectedElementID') &&
+    maybeState.hasOwnProperty('ownerFlatTree') &&
+    maybeState.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__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 2f4325f8ca83..2fb0664a2485 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -213,3 +213,37 @@ export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
     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 {
+  let resetIgnoredErrorOrWarningMessages = true;
+  try {
+    global._ignoredErrorOrWarningMessages = errorOrWarningMessages;
+    const maybeThenable = fn();
+    if (
+      maybeThenable !== undefined &&
+      typeof maybeThenable.then === 'function'
+    ) {
+      resetIgnoredErrorOrWarningMessages = false;
+      return maybeThenable.then(
+        () => {
+          global._ignoredErrorOrWarningMessages = [];
+        },
+        () => {
+          global._ignoredErrorOrWarningMessages = [];
+        },
+      );
+    }
+  } finally {
+    if (resetIgnoredErrorOrWarningMessages) {
+      global._ignoredErrorOrWarningMessages = [];
+    }
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 1e0ffe336f68..326b0fb2e340 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -169,6 +169,9 @@ export default class Agent extends EventEmitter<{|
 
     this._bridge = bridge;
 
+    bridge.addListener('clearErrorsAndWarnings', this.clearErrorsAndWarnings);
+    bridge.addListener('clearErrorsForFiberID', this.clearErrorsForFiberID);
+    bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
     bridge.addListener('copyElementPath', this.copyElementPath);
     bridge.addListener('deletePath', this.deletePath);
     bridge.addListener('getProfilingData', this.getProfilingData);
@@ -226,6 +229,33 @@ export default class Agent extends EventEmitter<{|
     return this._rendererInterfaces;
   }
 
+  clearErrorsAndWarnings = ({rendererID}: {|rendererID: RendererID|}) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearErrorsAndWarnings();
+    }
+  };
+
+  clearErrorsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearErrorsForFiberID(id);
+    }
+  };
+
+  clearWarningsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}"`);
+    } else {
+      renderer.clearWarningsForFiberID(id);
+    }
+  };
+
   copyElementPath = ({id, path, rendererID}: CopyElementParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
@@ -571,16 +601,22 @@ export default class Agent extends EventEmitter<{|
   updateConsolePatchSettings = ({
     appendComponentStack,
     breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
   }: {|
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
+    showInlineWarningsAndErrors: boolean,
   |}) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
     // then install or uninstall the console overrides.
     // It's safe to call these methods multiple times, so we don't need to worry about that.
     if (appendComponentStack || breakOnConsoleErrors) {
-      patchConsole({appendComponentStack, breakOnConsoleErrors});
+      patchConsole({
+        appendComponentStack,
+        breakOnConsoleErrors,
+        showInlineWarningsAndErrors,
+      });
     } else {
       unpatchConsole();
     }
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 9a29d5cb0582..cc9eff11f684 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -22,11 +22,22 @@ const PREFIX_REGEX = /\s{4}(in|at)\s{1}/;
 // but we can fallback to looking for location info (e.g. "foo.js:12:345")
 const ROW_COLUMN_NUMBER_REGEX = /:\d+:\d+(\n|$)/;
 
+export function isStringComponentStack(text: string): boolean {
+  return PREFIX_REGEX.test(text) || ROW_COLUMN_NUMBER_REGEX.test(text);
+}
+
+type OnErrorOrWarning = (
+  fiber: Fiber,
+  type: 'error' | 'warn',
+  args: Array<any>,
+) => void;
+
 const injectedRenderers: Map<
   ReactRenderer,
   {|
     currentDispatcherRef: CurrentDispatcherRef,
     getCurrentFiber: () => Fiber | null,
+    onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
   |},
 > = new Map();
@@ -54,7 +65,10 @@ export function dangerous_setTargetConsoleForTesting(
 // v16 renderers should use this method to inject internals necessary to generate a component stack.
 // These internals will be used if the console is patched.
 // Injecting them separately allows the console to easily be patched or un-patched later (at runtime).
-export function registerRenderer(renderer: ReactRenderer): void {
+export function registerRenderer(
+  renderer: ReactRenderer,
+  onErrorOrWarning?: OnErrorOrWarning,
+): void {
   const {
     currentDispatcherRef,
     getCurrentFiber,
@@ -76,6 +90,7 @@ export function registerRenderer(renderer: ReactRenderer): void {
       currentDispatcherRef,
       getCurrentFiber,
       workTagMap: ReactTypeOfWork,
+      onErrorOrWarning,
     });
   }
 }
@@ -83,6 +98,7 @@ export function registerRenderer(renderer: ReactRenderer): void {
 const consoleSettingsRef = {
   appendComponentStack: false,
   breakOnConsoleErrors: false,
+  showInlineWarningsAndErrors: false,
 };
 
 // Patches console methods to append component stack for the current fiber.
@@ -90,14 +106,17 @@ const consoleSettingsRef = {
 export function patch({
   appendComponentStack,
   breakOnConsoleErrors,
+  showInlineWarningsAndErrors,
 }: {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
+  showInlineWarningsAndErrors: boolean,
 }): void {
   // Settings may change after we've patched the console.
   // Using a shared ref allows the patch function to read the latest values.
   consoleSettingsRef.appendComponentStack = appendComponentStack;
   consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
+  consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors;
 
   if (unpatchFn !== null) {
     // Don't patch twice.
@@ -121,32 +140,51 @@ export function patch({
         targetConsole[method]);
 
       const overrideMethod = (...args) => {
-        const latestAppendComponentStack =
-          consoleSettingsRef.appendComponentStack;
-        const latestBreakOnConsoleErrors =
-          consoleSettingsRef.breakOnConsoleErrors;
-
-        if (latestAppendComponentStack) {
-          try {
-            // If we are ever called with a string that already has a component stack, e.g. a React error/warning,
-            // don't append a second stack.
-            const lastArg = args.length > 0 ? args[args.length - 1] : null;
-            const alreadyHasComponentStack =
-              lastArg !== null &&
-              (PREFIX_REGEX.test(lastArg) ||
-                ROW_COLUMN_NUMBER_REGEX.test(lastArg));
-
-            if (!alreadyHasComponentStack) {
-              // If there's a component stack for at least one of the injected renderers, append it.
-              // We don't handle the edge case of stacks for more than one (e.g. interleaved renderers?)
-              // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-              for (const {
-                currentDispatcherRef,
-                getCurrentFiber,
-                workTagMap,
-              } of injectedRenderers.values()) {
-                const current: ?Fiber = getCurrentFiber();
-                if (current != null) {
+        const lastArg = args.length > 0 ? args[args.length - 1] : null;
+        const alreadyHasComponentStack =
+          lastArg !== null && isStringComponentStack(lastArg);
+
+        let shouldAppendWarningStack = false;
+        if (consoleSettingsRef.appendComponentStack) {
+          // If we are ever called with a string that already has a component stack,
+          // e.g. a React error/warning, don't append a second stack.
+          shouldAppendWarningStack = !alreadyHasComponentStack;
+        }
+
+        const shouldShowInlineWarningsAndErrors =
+          consoleSettingsRef.showInlineWarningsAndErrors &&
+          (method === 'error' || method === 'warn');
+
+        if (shouldAppendWarningStack || shouldShowInlineWarningsAndErrors) {
+          // 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 {
+            currentDispatcherRef,
+            getCurrentFiber,
+            onErrorOrWarning,
+            workTagMap,
+          } of injectedRenderers.values()) {
+            const current: ?Fiber = getCurrentFiber();
+            if (current != null) {
+              try {
+                if (shouldShowInlineWarningsAndErrors) {
+                  // patch() is called by two places: (1) the hook and (2) the renderer backend.
+                  // The backend is what impliments a message queue, so it's the only one that injects onErrorOrWarning.
+                  if (typeof onErrorOrWarning === 'function') {
+                    onErrorOrWarning(
+                      current,
+                      ((method: any): 'error' | 'warn'),
+                      // Copy args before we mutate them (e.g. adding the component stack)
+                      alreadyHasComponentStack
+                        ? // Replace component stack with an empty string in case there's a string placeholder for it.
+                          [...args.slice(0, -1), '']
+                        : args.slice(),
+                    );
+                  }
+                }
+
+                if (shouldAppendWarningStack) {
                   const componentStack = getStackByFiberInDevAndProd(
                     workTagMap,
                     current,
@@ -155,16 +193,17 @@ export function patch({
                   if (componentStack !== '') {
                     args.push(componentStack);
                   }
-                  break;
                 }
+              } catch (error) {
+                // Don't let a DevTools or React internal error interfere with logging.
+              } finally {
+                break;
               }
             }
-          } catch (error) {
-            // Don't let a DevTools or React internal error interfere with logging.
           }
         }
 
-        if (latestBreakOnConsoleErrors) {
+        if (consoleSettingsRef.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-
@@ -177,6 +216,7 @@ export function patch({
       };
 
       overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+      originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
 
       // $FlowFixMe property error|warn is not writable.
       targetConsole[method] = overrideMethod;
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 86d987c8f2e2..90f0f3ad12b4 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -779,6 +779,10 @@ export function attach(
       state = publicInstance.state || null;
     }
 
+    // Not implemented
+    const errors = [];
+    const warnings = [];
+
     return {
       id,
 
@@ -812,6 +816,8 @@ export function attach(
       hooks: null,
       props,
       state,
+      errors,
+      warnings,
 
       // List of owners
       owners,
@@ -1040,7 +1046,22 @@ export function attach(
     return null;
   }
 
+  function clearErrorsAndWarnings() {
+    // Not implemented
+  }
+
+  function clearErrorsForFiberID(id: number) {
+    // Not implemented
+  }
+
+  function clearWarningsForFiberID(id: number) {
+    // Not implemented
+  }
+
   return {
+    clearErrorsAndWarnings,
+    clearErrorsForFiberID,
+    clearWarningsForFiberID,
     cleanup,
     copyElementPath,
     deletePath,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 983a17f51dc9..11beef37f76d 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -49,7 +49,9 @@ import {
   SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import {inspectHooksOfFiber} from 'react-debug-tools';
@@ -76,6 +78,7 @@ import {
   MEMO_NUMBER,
   MEMO_SYMBOL_STRING,
 } from './ReactSymbols';
+import {format} from './utils';
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -117,6 +120,7 @@ type ReactTypeOfSideEffectType = {|
   NoFlags: number,
   PerformedWork: number,
   Placement: number,
+  Incomplete: number,
 |};
 
 function getFiberFlags(fiber: Fiber): number {
@@ -143,6 +147,7 @@ export function getInternalReactConstants(
     NoFlags: 0b00,
     PerformedWork: 0b01,
     Placement: 0b10,
+    Incomplete: 0b10000000000000,
   };
 
   // **********************************************************
@@ -479,7 +484,7 @@ export function attach(
     ReactTypeOfWork,
     ReactTypeOfSideEffect,
   } = getInternalReactConstants(renderer.version);
-  const {NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
+  const {Incomplete, NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
     FunctionComponent,
     ClassComponent,
@@ -522,13 +527,104 @@ export function attach(
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
+  // Set of Fibers (IDs) with recently changed number of error/warning messages.
+  const fibersWithChangedErrorOrWarningCounts: Set<number> = new Set();
+
+  // Mapping of fiber IDs to error/warning messages and counts.
+  const fiberToErrorsMap: Map<number, Map<string, number>> = new Map();
+  const fiberToWarningsMap: Map<number, Map<string, number>> = new Map();
+
+  function clearErrorsAndWarnings() {
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const id of fiberToErrorsMap.keys()) {
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      updateMostRecentlyInspectedElementIfNecessary(id);
+    }
+
+    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+    for (const id of fiberToWarningsMap.keys()) {
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      updateMostRecentlyInspectedElementIfNecessary(id);
+    }
+
+    fiberToErrorsMap.clear();
+    fiberToWarningsMap.clear();
+
+    flushPendingEvents();
+  }
+
+  function clearErrorsForFiberID(id: number) {
+    if (fiberToErrorsMap.has(id)) {
+      fiberToErrorsMap.delete(id);
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      flushPendingEvents();
+    }
+
+    updateMostRecentlyInspectedElementIfNecessary(id);
+  }
+
+  function clearWarningsForFiberID(id: number) {
+    if (fiberToWarningsMap.has(id)) {
+      fiberToWarningsMap.delete(id);
+      fibersWithChangedErrorOrWarningCounts.add(id);
+      flushPendingEvents();
+    }
+
+    updateMostRecentlyInspectedElementIfNecessary(id);
+  }
+
+  function updateMostRecentlyInspectedElementIfNecessary(
+    fiberID: number,
+  ): void {
+    if (
+      mostRecentlyInspectedElement !== null &&
+      mostRecentlyInspectedElement.id === fiberID
+    ) {
+      hasElementUpdatedSinceLastInspected = true;
+    }
+  }
+
+  // Called when an error or warning is logged during render, commit, or passive (including unmount functions).
+  function onErrorOrWarning(
+    fiber: Fiber,
+    type: 'error' | 'warn',
+    args: $ReadOnlyArray<any>,
+  ): void {
+    const message = format(...args);
+
+    // Note that by calling these functions we may be creating the ID for the first time.
+    // If the Fiber is then never mounted, we are responsible for cleaning up after ourselves.
+    // This is important because getPrimaryFiber() stores a Fiber in the primaryFibers Set.
+    // If a Fiber never mounts, and we don't clean up after this code, we could leak.
+    // Fortunately we would only leak Fibers that have errors/warnings associated with them,
+    // which is hopefully only a small set and only in DEV mode– but this is still not great.
+    // We should clean up Fibers like this when flushing; see recordPendingErrorsAndWarnings().
+    const fiberID = getFiberID(getPrimaryFiber(fiber));
+
+    // Mark this Fiber as needed its warning/error count updated during the next flush.
+    fibersWithChangedErrorOrWarningCounts.add(fiberID);
+
+    // Update the error/warning messages and counts for the Fiber.
+    const fiberMap = type === 'error' ? fiberToErrorsMap : fiberToWarningsMap;
+    const messageMap = fiberMap.get(fiberID);
+    if (messageMap != null) {
+      const count = messageMap.get(message) || 0;
+      messageMap.set(message, count + 1);
+    } else {
+      fiberMap.set(fiberID, new Map([[message, 1]]));
+    }
+
+    // If this Fiber is currently being inspected, mark it as needing an udpate as well.
+    updateMostRecentlyInspectedElementIfNecessary(fiberID);
+  }
+
   // Patching the console enables DevTools to do a few useful things:
   // * Append component stacks to warnings and error messages
   // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
   //
   // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
   if (process.env.NODE_ENV !== 'test') {
-    registerRendererWithConsole(renderer);
+    registerRendererWithConsole(renderer, onErrorOrWarning);
 
     // The renderer interface can't read these preferences directly,
     // because it is stored in localStorage within the context of the extension.
@@ -537,10 +633,13 @@ export function attach(
       window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
     const breakOnConsoleErrors =
       window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
+    const showInlineWarningsAndErrors =
+      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ === true;
     if (appendComponentStack || breakOnConsoleErrors) {
       patchConsole({
         appendComponentStack,
         breakOnConsoleErrors,
+        showInlineWarningsAndErrors,
       });
     }
   }
@@ -652,8 +751,11 @@ export function attach(
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getFiberID(getPrimaryFiber(root.current));
-      unmountFiberChildrenRecursively(root.current);
-      recordUnmount(root.current, false);
+      // The TREE_OPERATION_REMOVE_ROOT operation serves two purposes:
+      // 1. It avoids sending unnecessary bridge traffic to clear a root.
+      // 2. It preserves Fiber IDs when remounting (below) which in turn ID to error/warning mapping.
+      pushOperation(TREE_OPERATION_REMOVE_ROOT);
+      flushPendingEvents(root);
       currentRootID = -1;
     });
 
@@ -670,6 +772,10 @@ export function attach(
       flushPendingEvents(root);
       currentRootID = -1;
     });
+
+    // Also re-evaluate all error and warning counts given the new filters.
+    reevaluateErrorsAndWarnings();
+    flushPendingEvents();
   }
 
   // NOTICE Keep in sync with get*ForFiber methods
@@ -1055,7 +1161,64 @@ export function attach(
     pendingOperations.push(op);
   }
 
+  function reevaluateErrorsAndWarnings() {
+    fibersWithChangedErrorOrWarningCounts.clear();
+    fiberToErrorsMap.forEach((countMap, fiberID) => {
+      fibersWithChangedErrorOrWarningCounts.add(fiberID);
+    });
+    fiberToWarningsMap.forEach((countMap, fiberID) => {
+      fibersWithChangedErrorOrWarningCounts.add(fiberID);
+    });
+    recordPendingErrorsAndWarnings();
+  }
+
+  function recordPendingErrorsAndWarnings() {
+    fibersWithChangedErrorOrWarningCounts.forEach(fiberID => {
+      const fiber = idToFiberMap.get(fiberID);
+      if (fiber != null) {
+        // Don't send updates for Fibers that didn't mount due to e.g. Suspense or an error boundary.
+        // We may also need to clean up after ourselves to avoid leaks.
+        // See inline comments in onErrorOrWarning() for more info.
+        if (isFiberMountedImpl(fiber) !== MOUNTED) {
+          fiberToIDMap.delete(fiber);
+          idToFiberMap.delete(fiberID);
+          primaryFibers.delete(fiber);
+          return;
+        }
+
+        let errorCount = 0;
+        let warningCount = 0;
+
+        if (!shouldFilterFiber(fiber)) {
+          const errorCountsMap = fiberToErrorsMap.get(fiberID);
+          const warningCountsMap = fiberToWarningsMap.get(fiberID);
+
+          if (errorCountsMap != null) {
+            errorCountsMap.forEach(count => {
+              errorCount += count;
+            });
+          }
+          if (warningCountsMap != null) {
+            warningCountsMap.forEach(count => {
+              warningCount += count;
+            });
+          }
+        }
+
+        pushOperation(TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS);
+        pushOperation(fiberID);
+        pushOperation(errorCount);
+        pushOperation(warningCount);
+      }
+    });
+    fibersWithChangedErrorOrWarningCounts.clear();
+  }
+
   function flushPendingEvents(root: Object): void {
+    // Add any pending errors and warnings to the operations array.
+    // We do this just before flushing, so we can ignore errors for no-longer-mounted Fibers.
+    recordPendingErrorsAndWarnings();
+
     if (
       pendingOperations.length === 0 &&
       pendingRealUnmountedIDs.length === 0 &&
@@ -2028,17 +2191,42 @@ export function attach(
   // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
   function isFiberMountedImpl(fiber: Fiber): number {
     let node = fiber;
+    let prevNode = null;
     if (!fiber.alternate) {
       // If there is no alternate, this might be a new tree that isn't inserted
       // yet. If it is, then it will have a pending insertion effect on it.
       if ((getFiberFlags(node) & Placement) !== NoFlags) {
         return MOUNTING;
       }
+      // This indicates an error during render.
+      if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
+        return UNMOUNTED;
+      }
       while (node.return) {
+        prevNode = node;
         node = node.return;
+
         if ((getFiberFlags(node) & Placement) !== NoFlags) {
           return MOUNTING;
         }
+        // This indicates an error during render.
+        if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
+          return UNMOUNTED;
+        }
+
+        // If this node is inside of a timed out suspense subtree, we should also ignore errors/warnings.
+        const isTimedOutSuspense =
+          node.tag === SuspenseComponent && node.memoizedState !== null;
+        if (isTimedOutSuspense) {
+          // Note that this does not include errors/warnings in the Fallback tree though!
+          const primaryChildFragment = node.child;
+          const fallbackChildFragment = primaryChildFragment
+            ? primaryChildFragment.sibling
+            : null;
+          if (prevNode !== fallbackChildFragment) {
+            return UNMOUNTED;
+          }
+        }
       }
     } else {
       while (node.return) {
@@ -2455,6 +2643,9 @@ export function attach(
       rootType = fiberRoot._debugRootType;
     }
 
+    const errors = fiberToErrorsMap.get(id) || new Map();
+    const warnings = fiberToWarningsMap.get(id) || new Map();
+
     return {
       id,
 
@@ -2497,6 +2688,8 @@ export function attach(
       hooks,
       props: memoizedProps,
       state: usesHooks ? null : memoizedState,
+      errors: Array.from(errors.entries()),
+      warnings: Array.from(warnings.entries()),
 
       // List of owners
       owners,
@@ -3425,6 +3618,9 @@ export function attach(
 
   return {
     cleanup,
+    clearErrorsAndWarnings,
+    clearErrorsForFiberID,
+    clearWarningsForFiberID,
     copyElementPath,
     deletePath,
     findNativeNodesForFiberID,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index d87c2fdf97b2..93ac3c7827e8 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -234,6 +234,8 @@ export type InspectedElement = {|
   props: Object | null,
   state: Object | null,
   key: number | string | null,
+  errors: Array<[string, number]>,
+  warnings: Array<[string, number]>,
 
   // List of owners
   owners: Array<Owner> | null,
@@ -294,6 +296,9 @@ type Type = 'props' | 'hooks' | 'state' | 'context';
 
 export type RendererInterface = {
   cleanup: () => void,
+  clearErrorsAndWarnings: () => void,
+  clearErrorsForFiberID: (id: number) => void,
+  clearWarningsForFiberID: (id: number) => void,
   copyElementPath: (id: number, path: Array<string | number>) => void,
   deletePath: (
     type: Type,
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index d0ff4192d6ed..06329eff7215 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -134,3 +134,52 @@ export function serializeToString(data: any): string {
     return value;
   });
 }
+
+// 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 format(
+  maybeMessage: any,
+  ...inputArgs: $ReadOnlyArray<any>
+): string {
+  if (typeof maybeMessage !== 'string') {
+    return [maybeMessage, ...inputArgs].join(' ');
+  }
+
+  const re = /(%?)(%([jds]))/g;
+  const args = inputArgs.slice();
+  let formatted: string = maybeMessage;
+
+  if (args.length) {
+    formatted = formatted.replace(re, (match, escaped, ptn, flag) => {
+      let arg = args.shift();
+      switch (flag) {
+        case 's':
+          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 remain after formatting
+  if (args.length) {
+    formatted += ' ' + args.join(' ');
+  }
+
+  // update escaped %% values
+  formatted = formatted.replace(/%{2,2}/g, '%');
+
+  return '' + formatted;
+}
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 2bde2aed8b07..1da4d8eb3e54 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -114,6 +114,7 @@ type NativeStyleEditor_SetValueParams = {|
 type UpdateConsolePatchSettingsParams = {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
+  showInlineWarningsAndErrors: boolean,
 |};
 
 type BackendEvents = {|
@@ -141,7 +142,10 @@ type BackendEvents = {|
 |};
 
 type FrontendEvents = {|
+  clearErrorsAndWarnings: [{|rendererID: RendererID|}],
+  clearErrorsForFiberID: [ElementAndRendererID],
   clearNativeElementHighlight: [],
+  clearWarningsForFiberID: [ElementAndRendererID],
   copyElementPath: [CopyElementPathParams],
   deletePath: [DeletePath],
   getOwnersList: [ElementAndRendererID],
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index c5223f7cb43d..f8868111e095 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -14,6 +14,8 @@ 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 LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
@@ -33,6 +35,9 @@ export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
 export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
   'React::DevTools::appendComponentStack';
 
+export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
+  'React::DevTools::showInlineWarningsAndErrors';
+
 export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
   'React::DevTools::traceUpdatesEnabled';
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index cd829bb3bf3a..6b1b83e52483 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -12,7 +12,9 @@ import {inspect} from 'util';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from '../constants';
 import {ElementTypeRoot} from '../types';
@@ -78,11 +80,22 @@ export default class Store extends EventEmitter<{|
 |}> {
   _bridge: FrontendBridge;
 
+  // Computed whenever _errorsAndWarnings Map changes.
+  _cachedErrorCount: number = 0;
+  _cachedWarningCount: number = 0;
+  _cachedErrorAndWarningTuples: Array<{|id: number, index: number|}> = [];
+
   // 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<
+    number,
+    {|errorCount: number, warningCount: number|},
+  > = new Map();
+
   // At least one of the injected renderers contains (DEV only) owner metadata.
   _hasOwnerMetadata: boolean = false;
 
@@ -289,6 +302,10 @@ export default class Store extends EventEmitter<{|
     this.emit('componentFilters');
   }
 
+  get errorCount(): number {
+    return this._cachedErrorCount;
+  }
+
   get hasOwnerMetadata(): boolean {
     return this._hasOwnerMetadata;
   }
@@ -357,6 +374,46 @@ export default class Store extends EventEmitter<{|
     return this._unsupportedRendererVersionDetected;
   }
 
+  get warningCount(): number {
+    return this._cachedWarningCount;
+  }
+
+  clearErrorsAndWarnings(): void {
+    this._rootIDToRendererID.forEach(rendererID => {
+      this._bridge.send('clearErrorsAndWarnings', {
+        rendererID,
+      });
+    });
+  }
+
+  clearErrorsForElement(id: number): void {
+    const rendererID = this.getRendererIDForElement(id);
+    if (rendererID === null) {
+      console.warn(
+        `Unable to find rendererID for element ${id} when clearing errors.`,
+      );
+    } else {
+      this._bridge.send('clearErrorsForFiberID', {
+        rendererID,
+        id,
+      });
+    }
+  }
+
+  clearWarningsForElement(id: number): void {
+    const rendererID = this.getRendererIDForElement(id);
+    if (rendererID === null) {
+      console.warn(
+        `Unable to find rendererID for element ${id} when clearing warnings.`,
+      );
+    } else {
+      this._bridge.send('clearWarningsForFiberID', {
+        rendererID,
+        id,
+      });
+    }
+  }
+
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }
@@ -425,6 +482,17 @@ export default class Store extends EventEmitter<{|
     return element;
   }
 
+  // Returns a tuple of [id, index]
+  getElementsWithErrorsAndWarnings(): Array<{|id: number, index: number|}> {
+    return this._cachedErrorAndWarningTuples;
+  }
+
+  getErrorAndWarningCountForElementID(
+    id: number,
+  ): {|errorCount: number, warningCount: number|} {
+    return this._errorsAndWarnings.get(id) || {errorCount: 0, warningCount: 0};
+  }
+
   getIndexOfElementID(id: number): number | null {
     const element = this.getElementByID(id);
 
@@ -709,6 +777,7 @@ export default class Store extends EventEmitter<{|
     }
 
     let haveRootsChanged = false;
+    let haveErrorsOrWarningsChanged = false;
 
     // The first two values are always rendererID and rootID
     const rendererID = operations[0];
@@ -910,7 +979,41 @@ export default class Store extends EventEmitter<{|
                 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 => {
+            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): any): Element);
+          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: {
@@ -958,6 +1061,20 @@ export default class Store extends EventEmitter<{|
           // 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;
         default:
           throw Error(`Unsupported Bridge operation ${operation}`);
       }
@@ -965,6 +1082,41 @@ export default class Store extends EventEmitter<{|
 
     this._revision++;
 
+    if (haveErrorsOrWarningsChanged) {
+      let errorCount = 0;
+      let warningCount = 0;
+
+      this._errorsAndWarnings.forEach(entry => {
+        errorCount += entry.errorCount;
+        warningCount += entry.warningCount;
+      });
+
+      this._cachedErrorCount = errorCount;
+      this._cachedWarningCount = warningCount;
+
+      const errorAndWarningTuples: Array<{|id: number, index: number|}> = [];
+
+      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});
+        }
+      });
+
+      this._cachedErrorAndWarningTuples = errorAndWarningTuples;
+    }
+
     if (haveRootsChanged) {
       const prevSupportsProfiling = this._supportsProfiling;
 
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 46b15d18a115..4e71d70bd68f 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -10,6 +10,7 @@
 import JSON5 from 'json5';
 
 import type {Element} from './views/Components/types';
+import type {StateContext} from './views/Components/TreeContext';
 import type Store from './store';
 
 export function printElement(element: Element, includeWeight: boolean = false) {
@@ -49,40 +50,96 @@ export function printOwnersList(
     .join('\n');
 }
 
-export function printStore(store: Store, includeWeight: boolean = false) {
+export function printStore(
+  store: Store,
+  includeWeight: boolean = false,
+  state: StateContext | null = null,
+) {
   const snapshotLines = [];
 
   let rootWeight = 0;
 
-  store.roots.forEach(rootID => {
-    const {weight} = ((store.getElementByID(rootID): any): Element);
+  function printSelectedMarker(index: number): string {
+    if (state === null) {
+      return '';
+    }
+    return state.selectedElementIndex === 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}`);
 
-    snapshotLines.push('[root]' + (includeWeight ? ` (${weight})` : ''));
+      for (let i = rootWeight; i < rootWeight + weight; i++) {
+        const element = store.getElementAtIndex(i);
 
-    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}`);
+        }
 
-      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}`,
+        );
       }
 
-      snapshotLines.push(printElement(element, includeWeight));
-    }
+      rootWeight += weight;
+    });
 
-    rootWeight += weight;
-  });
+    // Make sure the pretty-printed test align with the Store's reported number of total rows.
+    if (rootWeight !== store.numElements) {
+      throw Error(
+        `Inconsistent Store state. Individual root weights (${rootWeight}) do not match total weight (${store.numElements})`,
+      );
+    }
 
-  // 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();
   }
 
-  // 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');
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
index cd92bd3937d3..a21b303a3504 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
@@ -73,3 +73,21 @@
 .Badge {
   margin-left: 0.25rem;
 }
+
+.ErrorIcon,
+.ErrorIconContrast,
+.WarningIcon,
+.WarningIconContrast {
+  height: 0.75rem !important;
+  width: 0.75rem !important;
+  margin-left: 0.25rem;
+}
+.ErrorIcon {
+  color: var(--color-console-error-icon);
+}
+.WarningIcon {
+  color: var(--color-console-warning-icon);
+}
+.ErrorIconContrast, .WarningIconContrast {
+  color: var(--color-component-name);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index a209a55ace78..73789a9bd62f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -14,12 +14,15 @@ import Badge from './Badge';
 import ButtonIcon from '../ButtonIcon';
 import {createRegExp} from '../utils';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+import {SettingsContext} from '../Settings/SettingsContext';
 import {StoreContext} from '../context';
+import {useSubscription} from '../hooks';
 
 import type {ItemData} from './Tree';
-import type {Element} from './types';
+import type {Element as ElementType} from './types';
 
 import styles from './Element.css';
+import Icon from '../Icon';
 
 type Props = {
   data: ItemData,
@@ -28,12 +31,13 @@ type Props = {
   ...
 };
 
-export default function ElementView({data, index, style}: Props) {
+export default function Element({data, index, style}: Props) {
   const store = useContext(StoreContext);
   const {ownerFlatTree, ownerID, selectedElementID} = useContext(
     TreeStateContext,
   );
   const dispatch = useContext(TreeDispatcherContext);
+  const {showInlineWarningsAndErrors} = React.useContext(SettingsContext);
 
   const element =
     ownerFlatTree !== null
@@ -46,6 +50,24 @@ export default function ElementView({data, index, style}: Props) {
   const id = element === null ? null : element.id;
   const isSelected = selectedElementID === id;
 
+  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 handleDoubleClick = () => {
     if (id !== null) {
       dispatch({type: 'SELECT_OWNER', payload: id});
@@ -81,7 +103,7 @@ export default function ElementView({data, index, style}: Props) {
 
   // Handle elements that are removed from the tree while an async render is in progress.
   if (element == null) {
-    console.warn(`<ElementView> Could not find element at index ${index}`);
+    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;
@@ -93,7 +115,7 @@ export default function ElementView({data, index, style}: Props) {
     hocDisplayNames,
     key,
     type,
-  } = ((element: any): Element);
+  } = ((element: any): ElementType);
 
   let className = styles.Element;
   if (isSelected) {
@@ -148,6 +170,26 @@ export default function ElementView({data, index, style}: Props) {
             />
           </Badge>
         ) : null}
+        {showInlineWarningsAndErrors && errorCount > 0 && (
+          <Icon
+            type="error"
+            className={
+              isSelected && treeFocused
+                ? styles.ErrorIconContrast
+                : styles.ErrorIcon
+            }
+          />
+        )}
+        {showInlineWarningsAndErrors && warningCount > 0 && (
+          <Icon
+            type="warning"
+            className={
+              isSelected && treeFocused
+                ? styles.WarningIconContrast
+                : styles.WarningIcon
+            }
+          />
+        )}
       </div>
     </div>
   );
@@ -160,7 +202,7 @@ const swallowDoubleClick = event => {
 };
 
 type ExpandCollapseToggleProps = {|
-  element: Element,
+  element: ElementType,
   store: Store,
 |};
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index f80f099f5247..01b05a9fa33a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -51,10 +51,13 @@ export type GetInspectedElement = (
   id: number,
 ) => InspectedElementFrontend | null;
 
+type RefreshInspectedElement = () => void;
+
 export type InspectedElementContextType = {|
   copyInspectedElementPath: CopyInspectedElementPath,
   getInspectedElementPath: GetInspectedElementPath,
   getInspectedElement: GetInspectedElement,
+  refreshInspectedElement: RefreshInspectedElement,
   storeAsGlobal: StoreAsGlobal,
 |};
 
@@ -159,6 +162,15 @@ function InspectedElementContextController({children}: Props) {
   // would itself be blocked by the same render that suspends (waiting for the data).
   const {selectedElementID} = useContext(TreeStateContext);
 
+  const refreshInspectedElement = useCallback<RefreshInspectedElement>(() => {
+    if (selectedElementID !== null) {
+      const rendererID = store.getRendererIDForElement(selectedElementID);
+      if (rendererID !== null) {
+        bridge.send('inspectElement', {id: selectedElementID, rendererID});
+      }
+    }
+  }, [bridge, selectedElementID]);
+
   const [
     currentlyInspectedElement,
     setCurrentlyInspectedElement,
@@ -217,6 +229,8 @@ function InspectedElementContextController({children}: Props) {
             rootType,
             state,
             key,
+            errors,
+            warnings,
           } = ((data.value: any): InspectedElementBackend);
 
           const inspectedElement: InspectedElementFrontend = {
@@ -257,6 +271,8 @@ function InspectedElementContextController({children}: Props) {
             hooks: hydrateHelper(hooks),
             props: hydrateHelper(props),
             state: hydrateHelper(state),
+            errors,
+            warnings,
           };
 
           element = store.getElementByID(id);
@@ -343,6 +359,7 @@ function InspectedElementContextController({children}: Props) {
       copyInspectedElementPath,
       getInspectedElement,
       getInspectedElementPath,
+      refreshInspectedElement,
       storeAsGlobal,
     }),
     // InspectedElement is used to invalidate the cache and schedule an update with React.
@@ -351,6 +368,7 @@ function InspectedElementContextController({children}: Props) {
       currentlyInspectedElement,
       getInspectedElement,
       getInspectedElementPath,
+      refreshInspectedElement,
       storeAsGlobal,
     ],
   );
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 000000000000..6ef5583b8957
--- /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 000000000000..1f161c98836b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -0,0 +1,157 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {useContext} 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 {SettingsContext} from '../Settings/SettingsContext';
+import {InspectedElementContext} from './InspectedElementContext';
+
+import type {InspectedElement} from './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) {
+  const {refreshInspectedElement} = useContext(InspectedElementContext);
+
+  const {showInlineWarningsAndErrors} = useContext(SettingsContext);
+  if (!showInlineWarningsAndErrors) {
+    return null;
+  }
+
+  const {errors, warnings} = inspectedElement;
+
+  const clearErrors = () => {
+    const {id} = inspectedElement;
+    store.clearErrorsForElement(id);
+
+    // Immediately poll for updated data.
+    // This avoids a delay between clicking the clear button and refreshing errors.
+    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
+    refreshInspectedElement();
+  };
+
+  const clearWarnings = () => {
+    const {id} = inspectedElement;
+    store.clearWarningsForElement(id);
+
+    // Immediately poll for updated data.
+    // This avoids a delay between clicking the clear button and refreshing warnings.
+    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
+    refreshInspectedElement();
+  };
+
+  return (
+    <React.Fragment>
+      {errors.length > 0 && (
+        <Tree
+          badgeClassName={styles.ErrorBadge}
+          bridge={bridge}
+          className={styles.ErrorTree}
+          clearMessages={clearErrors}
+          entries={errors}
+          label="errors"
+          messageClassName={styles.Error}
+        />
+      )}
+      {warnings.length > 0 && (
+        <Tree
+          badgeClassName={styles.WarningBadge}
+          bridge={bridge}
+          className={styles.WarningTree}
+          clearMessages={clearWarnings}
+          entries={warnings}
+          label="warnings"
+          messageClassName={styles.Warning}
+        />
+      )}
+    </React.Fragment>
+  );
+}
+
+type TreeProps = {|
+  badgeClassName: string,
+  actions: React$Node,
+  className: string,
+  clearMessages: () => {},
+  entries: Array<[string, number]>,
+  label: string,
+  messageClassName: string,
+|};
+
+function Tree({
+  badgeClassName,
+  actions,
+  className,
+  clearMessages,
+  entries,
+  label,
+  messageClassName,
+}: TreeProps) {
+  if (entries.length === 0) {
+    return null;
+  }
+  return (
+    <div className={`${sharedStyles.InspectedElementTree} ${className}`}>
+      <div className={`${sharedStyles.HeaderRow} ${styles.HeaderRow}`}>
+        <div className={sharedStyles.Header}>{label}</div>
+        <Button
+          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/InspectedElementSharedStyles.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
index 2da0a11286bf..0e76706bcf13 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSharedStyles.css
@@ -12,6 +12,8 @@
 }
 
 .Header {
+  display: flex;
+  align-items: center;
   flex: 1 1;
   font-family: var(--font-family-sans);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index fd2c514e5782..a1c77b9b37b1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -19,6 +19,7 @@ import ButtonIcon from '../ButtonIcon';
 import Icon from '../Icon';
 import HocBadges from './HocBadges';
 import InspectedElementContextTree from './InspectedElementContextTree';
+import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWarningsTree';
 import InspectedElementHooksTree from './InspectedElementHooksTree';
 import InspectedElementPropsTree from './InspectedElementPropsTree';
 import InspectedElementStateTree from './InspectedElementStateTree';
@@ -120,6 +121,13 @@ export default function InspectedElementView({
           store={store}
         />
 
+        <InspectedElementErrorsAndWarningsTree
+          bridge={bridge}
+          getInspectedElementPath={getInspectedElementPath}
+          inspectedElement={inspectedElement}
+          store={store}
+        />
+
         <NativeStyleEditor />
 
         {showRenderedBy && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
index 0fe2ccaa78ea..736d39fc7524 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
@@ -85,42 +85,44 @@ export default function SearchInput(props: Props) {
         value={searchText}
       />
       {!!searchText && (
-        <span className={styles.IndexLabel}>
-          {Math.min(searchIndex + 1, searchResults.length)} |{' '}
-          {searchResults.length}
-        </span>
+        <React.Fragment>
+          <span className={styles.IndexLabel}>
+            {Math.min(searchIndex + 1, searchResults.length)} |{' '}
+            {searchResults.length}
+          </span>
+          <div className={styles.LeftVRule} />
+          <Button
+            className={styles.IconButton}
+            disabled={!searchText}
+            onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
+            title={
+              <React.Fragment>
+                Scroll to previous search result (<kbd>Shift</kbd> +{' '}
+                <kbd>Enter</kbd>)
+              </React.Fragment>
+            }>
+            <ButtonIcon type="up" />
+          </Button>
+          <Button
+            className={styles.IconButton}
+            disabled={!searchText}
+            onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
+            title={
+              <React.Fragment>
+                Scroll to next search result (<kbd>Enter</kbd>)
+              </React.Fragment>
+            }>
+            <ButtonIcon type="down" />
+          </Button>
+          <Button
+            className={styles.IconButton}
+            disabled={!searchText}
+            onClick={resetSearch}
+            title="Reset search">
+            <ButtonIcon type="close" />
+          </Button>
+        </React.Fragment>
       )}
-      <div className={styles.LeftVRule} />
-      <Button
-        className={styles.IconButton}
-        disabled={!searchText}
-        onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
-        title={
-          <React.Fragment>
-            Scroll to previous search result (<kbd>Shift</kbd> +{' '}
-            <kbd>Enter</kbd>)
-          </React.Fragment>
-        }>
-        <ButtonIcon type="up" />
-      </Button>
-      <Button
-        className={styles.IconButton}
-        disabled={!searchText}
-        onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
-        title={
-          <React.Fragment>
-            Scroll to next search result (<kbd>Enter</kbd>)
-          </React.Fragment>
-        }>
-        <ButtonIcon type="down" />
-      </Button>
-      <Button
-        className={styles.IconButton}
-        disabled={!searchText}
-        onClick={resetSearch}
-        title="Reset search">
-        <ButtonIcon type="close" />
-      </Button>
     </div>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.css b/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
index 64a5983ee06d..2036695a50e3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.css
@@ -44,6 +44,7 @@
 .VRule {
   height: 20px;
   width: 1px;
+  flex: 0 0 1px;
   margin: 0 0.5rem;
   background-color: var(--color-border);
 }
@@ -58,3 +59,23 @@
   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);
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index fe5221a66f16..467af81b77f3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -21,18 +21,21 @@ import {
 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} from '../context';
-import ElementView from './Element';
+import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
 import SearchInput from './SearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightNativeElement, useSubscription} from '../hooks';
 
 import styles from './Tree.css';
+import ButtonIcon from '../ButtonIcon';
+import Button from '../Button';
 
 // Never indent more than this number of pixels (even if we have the room).
 const DEFAULT_INDENTATION_SIZE = 12;
@@ -71,7 +74,7 @@ export default function Tree(props: Props) {
 
   const [treeFocused, setTreeFocused] = useState<boolean>(false);
 
-  const {lineHeight} = useContext(SettingsContext);
+  const {lineHeight, showInlineWarningsAndErrors} = useContext(SettingsContext);
 
   // Make sure a newly selected element is visible in the list.
   // This is helpful for things like the owners list and search.
@@ -301,6 +304,29 @@ export default function Tree(props: Props) {
     [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.errorCount,
+        warnings: store.warningCount,
+      }),
+      subscribe: (callback: Function) => {
+        store.addListener('mutated', callback);
+        return () => store.removeListener('mutated', callback);
+      },
+    }),
+    [store],
+  );
+  const {errors, warnings} = useSubscription(errorsOrWarningsSubscription);
+
   return (
     <TreeFocusedContext.Provider value={treeFocused}>
       <div className={styles.Tree} ref={treeRef}>
@@ -315,6 +341,40 @@ export default function Tree(props: Props) {
             {ownerID !== null ? <OwnersStack /> : <SearchInput />}
           </Suspense>
           <div className={styles.VRule} />
+          {showInlineWarningsAndErrors &&
+            ownerID === null &&
+            (errors > 0 || warnings > 0) && (
+              <React.Fragment>
+                {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={() => store.clearErrorsAndWarnings()}
+                  title="Clear all errors and warnings">
+                  <ButtonIcon type="clear" />
+                </Button>
+                <div className={styles.VRule} />
+              </React.Fragment>
+            )}
           <SettingsModalContextToggle />
         </div>
         <div
@@ -339,7 +399,7 @@ export default function Tree(props: Props) {
                 itemSize={lineHeight}
                 ref={listCallbackRef}
                 width={width}>
-                {ElementView}
+                {Element}
               </FixedSizeList>
             )}
           </AutoSizer>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index f748a9f3548a..a824bd493ff8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -93,6 +93,9 @@ type ACTION_SELECT_ELEMENT_BY_ID = {|
 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',
 |};
@@ -106,6 +109,9 @@ type ACTION_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',
 |};
@@ -132,10 +138,12 @@ type Action =
   | 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
@@ -372,6 +380,83 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
           }
         }
         break;
+      case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
+        if (store.errorCount === 0 && store.warningCount === 0) {
+          return state;
+        }
+
+        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
+
+        let flatIndex = 0;
+        if (selectedElementIndex !== 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 >= selectedElementIndex) {
+              flatIndex = i;
+            } else {
+              break;
+            }
+          }
+        }
+
+        let prevEntry;
+        if (flatIndex === 0) {
+          prevEntry =
+            elementIndicesWithErrorsOrWarnings[
+              elementIndicesWithErrorsOrWarnings.length - 1
+            ];
+          selectedElementID = prevEntry.id;
+          selectedElementIndex = prevEntry.index;
+        } else {
+          prevEntry = elementIndicesWithErrorsOrWarnings[flatIndex - 1];
+          selectedElementID = prevEntry.id;
+          selectedElementIndex = prevEntry.index;
+        }
+
+        lookupIDForIndex = false;
+        break;
+      }
+      case 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
+        if (store.errorCount === 0 && store.warningCount === 0) {
+          return state;
+        }
+
+        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
+
+        let flatIndex = -1;
+        if (selectedElementIndex !== 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 <= selectedElementIndex) {
+              flatIndex = i;
+            } else {
+              break;
+            }
+          }
+        }
+
+        let nextEntry;
+        if (flatIndex >= elementIndicesWithErrorsOrWarnings.length - 1) {
+          nextEntry = elementIndicesWithErrorsOrWarnings[0];
+          selectedElementID = nextEntry.id;
+          selectedElementIndex = nextEntry.index;
+        } else {
+          nextEntry = elementIndicesWithErrorsOrWarnings[flatIndex + 1];
+          selectedElementID = nextEntry.id;
+          selectedElementIndex = nextEntry.index;
+        }
+
+        lookupIDForIndex = false;
+        break;
+      }
       default:
         // React can bailout of no-op updates.
         return state;
@@ -776,11 +861,13 @@ function TreeContextController({
         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 'UPDATE_INSPECTED_ELEMENT_ID':
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index cccaba1c9b15..efdb89463688 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -84,6 +84,8 @@ export type InspectedElement = {|
   props: Object | null,
   state: Object | null,
   key: number | string | null,
+  errors: Array<[string, number]>,
+  warnings: Array<[string, number]>,
 
   // List of owners
   owners: Array<Owner> | null,
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index db54b7091e42..ce02611127f3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -16,13 +16,15 @@ export type IconType =
   | 'code'
   | 'components'
   | 'copy'
+  | 'error'
   | 'flame-chart'
   | 'interactions'
   | 'profiler'
   | 'ranked-chart'
   | 'search'
   | 'settings'
-  | 'store-as-global-variable';
+  | 'store-as-global-variable'
+  | 'warning';
 
 type Props = {|
   className?: string,
@@ -47,6 +49,9 @@ export default function Icon({className = '', type}: Props) {
     case 'copy':
       pathData = PATH_COPY;
       break;
+    case 'error':
+      pathData = PATH_ERROR;
+      break;
     case 'flame-chart':
       pathData = PATH_FLAME_CHART;
       break;
@@ -68,6 +73,9 @@ export default function Icon({className = '', type}: Props) {
     case 'store-as-global-variable':
       pathData = PATH_STORE_AS_GLOBAL_VARIABLE;
       break;
+    case 'warning':
+      pathData = PATH_WARNING;
+      break;
     default:
       console.warn(`Unsupported type "${type}" specified for Icon`);
       break;
@@ -107,6 +115,8 @@ const PATH_COPY = `
   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_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,
@@ -154,3 +164,5 @@ const PATH_STORE_AS_GLOBAL_VARIABLE = `
   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_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/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 55779509bfd1..85b5c875e473 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -11,8 +11,10 @@ import {
   __DEBUG__,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
 } from 'react-devtools-shared/src/constants';
 import {utfDecodeString} from 'react-devtools-shared/src/utils';
 import {ElementTypeRoot} from 'react-devtools-shared/src/types';
@@ -294,6 +296,9 @@ function updateTree(
         }
         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);
@@ -329,6 +334,21 @@ function updateTree(
         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;
+
       default:
         throw Error(`Unsupported Bridge operation ${operation}`);
     }
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index bc26ead4fc15..8d5da190be45 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -19,6 +19,8 @@ export default function DebuggingSettings(_: {||}) {
     breakOnConsoleErrors,
     setAppendComponentStack,
     setBreakOnConsoleErrors,
+    setShowInlineWarningsAndErrors,
+    showInlineWarningsAndErrors,
   } = useContext(SettingsContext);
 
   return (
@@ -36,6 +38,19 @@ export default function DebuggingSettings(_: {||}) {
         </label>
       </div>
 
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={showInlineWarningsAndErrors}
+            onChange={({currentTarget}) =>
+              setShowInlineWarningsAndErrors(currentTarget.checked)
+            }
+          />{' '}
+          Show inline warnings and errors.
+        </label>
+      </div>
+
       <div className={styles.Setting}>
         <label>
           <input
@@ -48,6 +63,10 @@ export default function DebuggingSettings(_: {||}) {
           Break on warnings
         </label>
       </div>
+
+      <div className={styles.ConsoleAPIWarning}>
+        These settings require DevTools to override native console APIs.
+      </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
index 2a89a9fe679b..f63a901410fb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -21,6 +21,7 @@ import {
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+  LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
 } from 'react-devtools-shared/src/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
@@ -44,6 +45,9 @@ type Context = {|
   breakOnConsoleErrors: boolean,
   setBreakOnConsoleErrors: (value: boolean) => void,
 
+  showInlineWarningsAndErrors: boolean,
+  setShowInlineWarningsAndErrors: (value: boolean) => void,
+
   theme: Theme,
   setTheme(value: Theme): void,
 
@@ -90,6 +94,13 @@ function SettingsContextController({
     LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
     false,
   );
+  const [
+    showInlineWarningsAndErrors,
+    setShowInlineWarningsAndErrors,
+  ] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+    true,
+  );
   const [
     traceUpdatesEnabled,
     setTraceUpdatesEnabled,
@@ -147,8 +158,14 @@ function SettingsContextController({
     bridge.send('updateConsolePatchSettings', {
       appendComponentStack,
       breakOnConsoleErrors,
+      showInlineWarningsAndErrors,
     });
-  }, [bridge, appendComponentStack, breakOnConsoleErrors]);
+  }, [
+    bridge,
+    appendComponentStack,
+    breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
+  ]);
 
   useEffect(() => {
     bridge.send('setTraceUpdatesEnabled', traceUpdatesEnabled);
@@ -168,6 +185,8 @@ function SettingsContextController({
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,
+      setShowInlineWarningsAndErrors,
+      showInlineWarningsAndErrors,
       theme,
       traceUpdatesEnabled,
     }),
@@ -180,6 +199,8 @@ function SettingsContextController({
       setDisplayDensity,
       setTheme,
       setTraceUpdatesEnabled,
+      setShowInlineWarningsAndErrors,
+      showInlineWarningsAndErrors,
       theme,
       traceUpdatesEnabled,
     ],
@@ -324,6 +345,25 @@ export function updateThemeVariables(
     'color-component-badge-count-inverted',
     documentElements,
   );
+  updateStyleHelper(theme, 'color-console-error-badge-text', documentElements);
+  updateStyleHelper(theme, 'color-console-error-background', documentElements);
+  updateStyleHelper(theme, 'color-console-error-border', documentElements);
+  updateStyleHelper(theme, 'color-console-error-icon', documentElements);
+  updateStyleHelper(theme, 'color-console-error-text', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-console-warning-badge-text',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-console-warning-background',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-console-warning-border', documentElements);
+  updateStyleHelper(theme, 'color-console-warning-icon', documentElements);
+  updateStyleHelper(theme, 'color-console-warning-text', documentElements);
+  updateStyleHelper(theme, 'color-context-border', documentElements);
   updateStyleHelper(theme, 'color-context-background', documentElements);
   updateStyleHelper(theme, 'color-context-background-hover', documentElements);
   updateStyleHelper(
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
index af400ba9161d..7c1e6b55b449 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
@@ -42,4 +42,4 @@
   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/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index bcdc427668df..8bf8b3de1fdd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -128,7 +128,8 @@
   background-color: var(--color-toggle-text);
 }
 
-.ReleaseNotes {
+.ReleaseNotes,
+.ConsoleAPIWarning {
   width: 100%;
   background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index b49213ccdffe..1fc6d461a4da 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -44,6 +44,16 @@
   --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
   --light-color-component-badge-count: #777d88;
   --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+  --light-color-console-error-badge-text: #ffffff;
+  --light-color-console-error-background: #fff0f0;
+  --light-color-console-error-border: #ffd6d6;
+  --light-color-console-error-icon: #eb3941;
+  --light-color-console-error-text: #fe2e31;
+  --light-color-console-warning-badge-text: #000000;
+  --light-color-console-warning-background: #fffbe5;
+  --light-color-console-warning-border: #fff5c1;
+  --light-color-console-warning-icon: #f4bd00;
+  --light-color-console-warning-text: #64460c;
   --light-color-context-background: rgba(0,0,0,.9);
   --light-color-context-background-hover: rgba(255, 255, 255, 0.1);
   --light-color-context-background-selected: #178fb9;
@@ -121,6 +131,16 @@
   --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
   --dark-color-component-badge-count: #8f949d;
   --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
+  --dark-color-console-error-badge-text: #000000;
+  --dark-color-console-error-background: #290000;
+  --dark-color-console-error-border: #5c0000;
+  --dark-color-console-error-icon: #eb3941;
+  --dark-color-console-error-text: #fc7f7f;
+  --dark-color-console-warning-badge-text: #000000;
+  --dark-color-console-warning-background: #332b00;
+  --dark-color-console-warning-border: #665500;
+  --dark-color-console-warning-icon: #f4bd00;
+  --dark-color-console-warning-text: #f5f2ed;
   --dark-color-context-background: rgba(255,255,255,.9);
   --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
   --dark-color-context-background-selected: #0088fa;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 62234fdc4642..9bec6f40a153 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -182,6 +182,8 @@ export function installHook(target: any): DevToolsHook | null {
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
         const breakOnConsoleErrors =
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
+        const showInlineWarningsAndErrors =
+          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ === true;
 
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
@@ -195,6 +197,7 @@ export function installHook(target: any): DevToolsHook | null {
           patchConsole({
             appendComponentStack,
             breakOnConsoleErrors,
+            showInlineWarningsAndErrors,
           });
         }
       } catch (error) {}
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 2c796c2228b8..d84d5e67e98b 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -26,7 +26,9 @@ import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
+  TREE_OPERATION_REMOVE_ROOT,
   TREE_OPERATION_REORDER_CHILDREN,
+  TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
 } from './constants';
 import {ElementTypeRoot} from 'react-devtools-shared/src/types';
@@ -34,6 +36,7 @@ import {
   LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
 } from './constants';
 import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
@@ -204,6 +207,12 @@ export function printOperationsArray(operations: Array<number>) {
         }
         break;
       }
+      case TREE_OPERATION_REMOVE_ROOT: {
+        i += 1;
+
+        logs.push(`Remove root ${rootID}`);
+        break;
+      }
       case TREE_OPERATION_REORDER_CHILDREN: {
         const id = ((operations[i + 1]: any): number);
         const numChildren = ((operations[i + 2]: any): number);
@@ -220,6 +229,17 @@ export function printOperationsArray(operations: Array<number>) {
         // 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;
       default:
         throw Error(`Unsupported Bridge operation ${operation}`);
     }
@@ -293,6 +313,25 @@ export function setBreakOnConsoleErrors(value: boolean): void {
   );
 }
 
+export function getShowInlineWarningsAndErrors(): boolean {
+  try {
+    const raw = localStorageGetItem(
+      LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+    );
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return true;
+}
+
+export function setShowInlineWarningsAndErrors(value: boolean): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+    JSON.stringify(value),
+  );
+}
+
 export function separateDisplayNameAndHOCs(
   displayName: string | null,
   type: ElementType,
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 000000000000..9aa681b29381
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
@@ -0,0 +1,181 @@
+/** @flow */
+
+import * as React from 'react';
+import {Fragment, useEffect, useRef, useState} from 'react';
+
+function WarnDuringRender({children = null}) {
+  console.warn('This warning fires during every render');
+  return children;
+}
+
+function WarnOnMount({children = null}) {
+  useEffect(() => {
+    console.warn('This warning fires on initial mount only');
+  }, []);
+  return children;
+}
+
+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;
+}
+
+function WarnOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.warn('This warning fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+function ErrorDuringRender({children = null}) {
+  console.error('This error fires during every render');
+  return children;
+}
+
+function ErrorOnMount({children = null}) {
+  useEffect(() => {
+    console.error('This error fires on initial mount only');
+  }, []);
+  return children;
+}
+
+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;
+}
+
+function ErrorOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.error('This error fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+function ErrorAndWarningDuringRender({children = null}) {
+  console.warn('This warning fires during every render');
+  console.error('This error fires during every render');
+  return children;
+}
+
+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;
+}
+
+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;
+}
+
+function ErrorAndWarningOnUnmount({children = null}) {
+  useEffect(() => {
+    return () => {
+      console.warn('This warning fires on unmount');
+      console.error('This error fires on unmount');
+    };
+  }, []);
+  return children;
+}
+
+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;
+}
+
+function ErrorWithMultipleArgs({children = null}) {
+  console.error('This error', 'passes console', 4, 'arguments');
+  return children;
+}
+
+function ErrorWithStringSubstitutions({children = null}) {
+  console.error('This error uses "%s" substitutions', 'string');
+  return children;
+}
+
+function ReactErrorOnHostComponent({children = null}) {
+  return <div data-camelCasedAttribute="should-lower-case">{children}</div>;
+}
+
+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>;
+}
+
+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>;
+}
+
+function ComponentWithMissingKey({children}) {
+  return [<div />];
+}
+
+export default function ErrorsAndWarnings() {
+  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 />
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index 8483be6b050a..b3c7b9be228c 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -12,6 +12,7 @@ import Iframe from './Iframe';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import Hydration from './Hydration';
+import InlineWarnings from './InlineWarnings';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
 import PriorityLevels from './PriorityLevels';
@@ -53,6 +54,7 @@ function mountTestApp() {
   mountHelper(Hydration);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
+  mountHelper(InlineWarnings);
   mountHelper(PriorityLevels);
   mountHelper(ReactNativeWeb);
   mountHelper(Toggle);
diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index a59a9fcc3bfd..ee73da31c64a 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -141,12 +141,41 @@ While profiling is in progress, we send an extra operation any time a fiber is a
 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
+
+Special case of unmounting an entire root (include its decsendants). 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.
+
 ## Reconstructing the tree
 
 The frontend stores its information about the tree in a map of id to objects with the following keys:
@@ -268,4 +297,4 @@ Once profiling is finished, the frontend requests profiling data from the backen
 
 ### Importing/exporting data
 
-Because all of the data is merged in the frontend after a profiling session is completed, it can be exported and imported (as a single JSON object), enabling profiling sessions to be shared between users.
\ No newline at end of file
+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.
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 7f1cd8855929..39985e7416e1 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -59,6 +59,9 @@ module.exports = Object.assign({}, baseConfig, {
     require.resolve(
       '../../packages/react-devtools-shared/src/__tests__/storeSerializer.js'
     ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js'
+    ),
   ],
   setupFiles: [
     ...baseConfig.setupFiles,

From 50393dc3a0c59cfefd349d31992256efd6f8c261 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 22 Dec 2020 10:58:47 -0800
Subject: [PATCH 0164/1603] React Native fixes for new inline errors feature
 (#20502)

---
 .../src/__tests__/inspectedElementContext-test.js   |  3 ++-
 .../react-devtools-shared/src/backend/console.js    | 13 +++++--------
 .../react-devtools-shared/src/backend/renderer.js   |  2 +-
 packages/react-devtools-shared/src/hook.js          |  2 +-
 4 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
index 153bb43801ba..c60560302f55 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
@@ -2014,7 +2014,8 @@ describe('InspectedElementContext', () => {
         Object {
           "errors": Array [
             Array [
-              "Warning: Each child in a list should have a unique \\"key\\" prop. See https://reactjs.org/link/warning-keys for more information.",
+              "Warning: Each child in a list should have a unique \\"key\\" prop. See https://reactjs.org/link/warning-keys for more information.
+            at Example",
               1,
             ],
           ],
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index cc9eff11f684..ee06d2173eab 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -140,12 +140,12 @@ export function patch({
         targetConsole[method]);
 
       const overrideMethod = (...args) => {
-        const lastArg = args.length > 0 ? args[args.length - 1] : null;
-        const alreadyHasComponentStack =
-          lastArg !== null && isStringComponentStack(lastArg);
-
         let shouldAppendWarningStack = false;
         if (consoleSettingsRef.appendComponentStack) {
+          const lastArg = args.length > 0 ? args[args.length - 1] : null;
+          const alreadyHasComponentStack =
+            lastArg !== null && isStringComponentStack(lastArg);
+
           // If we are ever called with a string that already has a component stack,
           // e.g. a React error/warning, don't append a second stack.
           shouldAppendWarningStack = !alreadyHasComponentStack;
@@ -176,10 +176,7 @@ export function patch({
                       current,
                       ((method: any): 'error' | 'warn'),
                       // Copy args before we mutate them (e.g. adding the component stack)
-                      alreadyHasComponentStack
-                        ? // Replace component stack with an empty string in case there's a string placeholder for it.
-                          [...args.slice(0, -1), '']
-                        : args.slice(),
+                      args.slice(),
                     );
                   }
                 }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 11beef37f76d..e44b58f71009 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -634,7 +634,7 @@ export function attach(
     const breakOnConsoleErrors =
       window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
     const showInlineWarningsAndErrors =
-      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ === true;
+      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
     if (appendComponentStack || breakOnConsoleErrors) {
       patchConsole({
         appendComponentStack,
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 9bec6f40a153..3bb2eb23115a 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -183,7 +183,7 @@ export function installHook(target: any): DevToolsHook | null {
         const breakOnConsoleErrors =
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
         const showInlineWarningsAndErrors =
-          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ === true;
+          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
 
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.

From 6630c2de2a578aba0b61cb2e61e58a1466e80ca2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 4 Jan 2021 06:32:03 -0800
Subject: [PATCH 0165/1603] Add rudimentary support for Cache to DevTools
 (#20458)

---
 .../__snapshots__/store-test.js.snap          |  1 +
 .../src/__tests__/store-test.js               |  1 +
 .../src/backend/renderer.js                   | 19 ++++++++++++++---
 .../src/backend/types.js                      |  1 +
 .../src/app/ElementTypes/index.js             | 21 +++++++++++--------
 5 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
index cc3c9b6c3cc2..5ff48f317f47 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
@@ -685,4 +685,5 @@ exports[`Store should show the right display names for special component types 1
       <Baz> [withFoo][withBar]
       <Baz> [Memo][withFoo][withBar]
       <Baz> [ForwardRef][withFoo][withBar]
+      <Cache>
 `;
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 33d3bc0a072a..d219f3cba7de 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -888,6 +888,7 @@ describe('Store', () => {
         <FakeHigherOrderComponent />
         <MemoizedFakeHigherOrderComponent />
         <ForwardRefFakeHigherOrderComponent />
+        <React.unstable_Cache />
       </React.Fragment>
     );
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index e44b58f71009..b942b7561b7b 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -176,6 +176,7 @@ export function getInternalReactConstants(
   // 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,
@@ -205,6 +206,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '17.0.0-alpha')) {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doesn't exist yet
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -234,6 +236,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doens't exist yet
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -263,6 +266,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.4.3-alpha')) {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doens't exist yet
       ClassComponent: 2,
       ContextConsumer: 11,
       ContextProvider: 12,
@@ -292,6 +296,7 @@ export function getInternalReactConstants(
     };
   } else {
     ReactTypeOfWork = {
+      CacheComponent: -1, // Doens't exist yet
       ClassComponent: 2,
       ContextConsumer: 12,
       ContextProvider: 13,
@@ -335,6 +340,7 @@ export function getInternalReactConstants(
   }
 
   const {
+    CacheComponent,
     ClassComponent,
     IncompleteClassComponent,
     FunctionComponent,
@@ -382,6 +388,8 @@ export function getInternalReactConstants(
     let resolvedContext: any = null;
 
     switch (tag) {
+      case CacheComponent:
+        return 'Cache';
       case ClassComponent:
       case IncompleteClassComponent:
         return getDisplayName(resolvedType);
@@ -486,12 +494,13 @@ export function attach(
   } = getInternalReactConstants(renderer.version);
   const {Incomplete, NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
-    FunctionComponent,
+    CacheComponent,
     ClassComponent,
     ContextConsumer,
     DehydratedSuspenseComponent,
-    Fragment,
     ForwardRef,
+    Fragment,
+    FunctionComponent,
     HostRoot,
     HostPortal,
     HostComponent,
@@ -2518,6 +2527,10 @@ export function attach(
         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 = !usesHooks && tag !== CacheComponent;
+
     const typeSymbol = getTypeSymbol(type);
 
     let canViewSource = false;
@@ -2687,7 +2700,7 @@ export function attach(
       context,
       hooks,
       props: memoizedProps,
-      state: usesHooks ? null : memoizedState,
+      state: showState ? memoizedState : null,
       errors: Array.from(errors.entries()),
       warnings: Array.from(warnings.entries()),
 
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 93ac3c7827e8..4cecf59df298 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -26,6 +26,7 @@ export type WorkFlags = number;
 export type ExpirationTime = number;
 
 export type WorkTagMap = {|
+  CacheComponent: WorkTag,
   ClassComponent: WorkTag,
   ContextConsumer: WorkTag,
   ContextProvider: WorkTag,
diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js
index cc3905457a99..4b44a50a6653 100644
--- a/packages/react-devtools-shell/src/app/ElementTypes/index.js
+++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js
@@ -19,6 +19,7 @@ import {
   Profiler,
   StrictMode,
   Suspense,
+  unstable_Cache as Cache,
 } from 'react';
 
 const Context = createContext('abc');
@@ -61,15 +62,17 @@ export default function ElementTypes() {
           <Context.Consumer>{value => null}</Context.Consumer>
         </Context.Provider>
         <StrictMode>
-          <Suspense fallback={<div>Loading...</div>}>
-            <ClassComponent />
-            <FunctionComponent />
-            <MemoFunctionComponent />
-            <ForwardRefComponent />
-            <ForwardRefComponentWithAnonymousFunction />
-            <ForwardRefComponentWithCustomDisplayName />
-            <LazyComponent />
-          </Suspense>
+          <Cache>
+            <Suspense fallback={<div>Loading...</div>}>
+              <ClassComponent />
+              <FunctionComponent />
+              <MemoFunctionComponent />
+              <ForwardRefComponent />
+              <ForwardRefComponentWithAnonymousFunction />
+              <ForwardRefComponentWithCustomDisplayName />
+              <LazyComponent />
+            </Suspense>
+          </Cache>
         </StrictMode>
       </Fragment>
     </Profiler>

From beb38aba3e5617cb915a8e979245b2996e1764e8 Mon Sep 17 00:00:00 2001
From: Jaiwanth <jaiwanth.work@gmail.com>
Date: Mon, 4 Jan 2021 21:08:11 +0530
Subject: [PATCH 0166/1603] [devtools] Bump electron version from 9.1.0 to
 11.1.0 for darwin-arm64 builds (#20496)

---
 packages/react-devtools/package.json | 2 +-
 yarn.lock                            | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 3a22f5c622f2..ad5d429fd184 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "cross-spawn": "^5.0.1",
-    "electron": "^9.1.0",
+    "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
     "react-devtools-core": "4.10.1",
diff --git a/yarn.lock b/yarn.lock
index 7b6cb0890962..9daccaf78bb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5413,10 +5413,10 @@ electron-to-chromium@^1.3.523:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.538.tgz#15226638ee9db5d8e74f4c860cef6078d8e1e871"
   integrity sha512-rlyYXLlOoZkJuvY4AJXUpP7CHRVtwZz311HPVoEO1UHo/kqDCsP1pNas0A9paZuPEiYGdLwrjllF2hs69NEaTw==
 
-electron@^9.1.0:
-  version "9.1.0"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-9.1.0.tgz#ca77600c9e4cd591298c340e013384114d3d8d05"
-  integrity sha512-VRAF8KX1m0py9I9sf0kw1kWfeC87mlscfFcbcRdLBsNJ44/GrJhi3+E8rKbpHUeZNQxsPaVA5Zu5Lxb6dV/scQ==
+electron@^11.1.0:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-11.1.1.tgz#188f036f8282798398dca9513e9bb3b10213e3aa"
+  integrity sha512-tlbex3xosJgfileN6BAQRotevPRXB/wQIq48QeQ08tUJJrXwE72c8smsM/hbHx5eDgnbfJ2G3a60PmRjHU2NhA==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"

From 27659559ebfd6b7119bfc0ff02ecb851c135020c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 4 Jan 2021 07:46:20 -0800
Subject: [PATCH 0167/1603] Add useRefresh hook to react-debug-tools (#20460)

---
 packages/react-debug-tools/src/ReactDebugHooks.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index ce62b5ce8b9e..eb7a8f6d4ef1 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -73,6 +73,10 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
       Dispatcher.useState(null);
       Dispatcher.useReducer((s, a) => s, null);
       Dispatcher.useRef(null);
+      if (typeof Dispatcher.useCacheRefresh === 'function') {
+        // This type check is for Flow only.
+        Dispatcher.useCacheRefresh();
+      }
       Dispatcher.useLayoutEffect(() => {});
       Dispatcher.useEffect(() => {});
       Dispatcher.useImperativeHandle(undefined, () => null);
@@ -171,6 +175,16 @@ function useRef<T>(initialValue: T): {|current: T|} {
   return ref;
 }
 
+function useCacheRefresh(): () => void {
+  const hook = nextHook();
+  hookLog.push({
+    primitive: 'CacheRefresh',
+    stackError: new Error(),
+    value: hook !== null ? hook.memoizedState : function refresh() {},
+  });
+  return () => {};
+}
+
 function useLayoutEffect(
   create: () => (() => void) | void,
   inputs: Array<mixed> | void | null,
@@ -305,6 +319,7 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
 const Dispatcher: DispatcherType = {
   getCacheForType,
   readContext,
+  useCacheRefresh,
   useCallback,
   useContext,
   useEffect,

From e8eff119e036485b74b2acb6f57045390703f6fb Mon Sep 17 00:00:00 2001
From: Christian Ruigrok <christian@ruigrok.info>
Date: Mon, 11 Jan 2021 21:18:45 +0100
Subject: [PATCH 0168/1603] Fix ESLint crash on empty react effect hook
 (#20385)

* Fix ESLint crash on empty react effect hook

* Add layout effect to test

* Improve wording in comment

* Improve lint warning wording

* Reword missing effect callback message
---
 .../ESLintRuleExhaustiveDeps-test.js          | 36 +++++++++++++++++++
 .../src/ExhaustiveDeps.js                     | 13 +++++++
 2 files changed, 49 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index 0c782dc25ae0..2a2786dca885 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -1692,6 +1692,42 @@ const tests = {
         },
       ],
     },
+    {
+      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`
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 7c970f7c8f6a..ee259b2d37cd 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -1119,6 +1119,19 @@ export default {
       const declaredDependenciesNode = node.arguments[callbackIndex + 1];
       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;
+      }
+
       // 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.

From eb0fb382308f18460844d646dada2e564f82353d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jan 2021 11:32:32 -0600
Subject: [PATCH 0169/1603] Build stable and experimental with same command
 (#20573)

The goal is to simplify our CI pipeline so that all configurations
are built and tested in a single workflow.

As a first step, this adds a new build script entry point that builds
both the experimental and stable release channels into a single
artifacts directory.

The script works by wrapping the existing build script (which only
builds a single release channel at a time), then post-processing the
results to match the desired filesystem layout. A future version of the
build script would output the files directly without post-processing.

Because many parts of our infra depend on the existing layout of the
build artifacts directory, I have left the old workflows untouched.
We can incremental migrate to the new layout, then delete the old
workflows after we've finished.
---
 .circleci/config.yml                         |  50 ++++++++
 .gitignore                                   |   1 +
 package.json                                 |   1 +
 scripts/rollup/build-all-release-channels.js | 123 +++++++++++++++++++
 4 files changed, 175 insertions(+)
 create mode 100644 scripts/rollup/build-all-release-channels.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index f859b2c59a30..a532fb2e067a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -293,6 +293,45 @@ jobs:
             - dist
             - sizes/*.json
 
+  yarn_build_combined:
+    docker: *docker
+    environment: *environment
+    parallelism: 40
+    steps:
+      - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          command: |
+            ./scripts/circleci/add_build_info_json.sh
+            ./scripts/circleci/update_package_versions.sh
+            yarn build-combined
+      - persist_to_workspace:
+          root: build2
+          paths:
+            - facebook-www
+            - facebook-react-native
+            - facebook-relay
+            - oss-stable
+            - oss-experimental
+            - react-native
+            - dist
+            - sizes/*.json
+
+  process_artifacts_combined:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: build2
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+        # Compress build directory into a single tarball for easy download
+      - run: tar -zcvf ./build2.tgz ./build2
+      - store_artifacts:
+          path: ./build2.tgz
+
   build_devtools_and_process_artifacts:
     docker: *docker
     environment: *environment
@@ -611,6 +650,17 @@ workflows:
               only:
                 - master
 
+  # New workflow that will replace "stable" and "experimental"
+  combined:
+    jobs:
+      - setup
+      - yarn_build_combined:
+          requires:
+            - setup
+      - process_artifacts_combined:
+          requires:
+            - yarn_build_combined
+
   fuzz_tests:
     triggers:
       - schedule:
diff --git a/.gitignore b/.gitignore
index 5a913ac6e527..fed2a08aa5d9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,7 @@ scripts/flow/*/.flowconfig
 _SpecRunner.html
 __benchmarks__
 build/
+build2/
 remote-repo/
 coverage/
 .module-cache
diff --git a/package.json b/package.json
index bf225d9cdc81..deb7b24882da 100644
--- a/package.json
+++ b/package.json
@@ -106,6 +106,7 @@
   },
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
+    "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
     "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
new file mode 100644
index 000000000000..774f1011aa28
--- /dev/null
+++ b/scripts/rollup/build-all-release-channels.js
@@ -0,0 +1,123 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const fs = require('fs');
+const {spawnSync} = require('child_process');
+const tmp = require('tmp');
+
+// Runs the build script for both stable and experimental release channels,
+// by configuring an environment variable.
+
+if (process.env.CIRCLE_NODE_TOTAL) {
+  // In CI, we use multiple concurrent processes. Allocate half the processes to
+  // build the stable channel, and the other half for experimental. Override
+  // the environment variables to "trick" the underlying build script.
+  const total = parseInt(process.env.CIRCLE_NODE_TOTAL, 10);
+  const halfTotal = Math.floor(total / 2);
+  const index = parseInt(process.env.CIRCLE_NODE_INDEX, 10);
+  if (index < halfTotal) {
+    const nodeTotal = halfTotal;
+    const nodeIndex = index;
+    buildForChannel('stable', nodeTotal, nodeIndex);
+    processStable('./build');
+  } else {
+    const nodeTotal = total - halfTotal;
+    const nodeIndex = index - halfTotal;
+    buildForChannel('experimental', nodeTotal, nodeIndex);
+    processExperimental('./build');
+  }
+
+  // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
+  // with old build job. Remove once we migrate rest of build/test pipeline.
+  fs.renameSync('./build', './build2');
+} 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;
+  fs.renameSync('./build', stableDir);
+  processStable(stableDir);
+
+  buildForChannel('experimental', '', '');
+  const experimentalDir = tmp.dirSync().name;
+  fs.renameSync('./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 automatically by CircleCI's workspace feature.
+  spawnSync('rsync', ['-ar', experimentalDir + '/', stableDir + '/']);
+
+  // Now restore the combined directory back to its original name
+  // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
+  // with old build job. Remove once we migrate rest of build/test pipeline.
+  fs.renameSync(stableDir, './build2');
+}
+
+function buildForChannel(channel, nodeTotal, nodeIndex) {
+  spawnSync('node', ['./scripts/rollup/build.js', ...process.argv.slice(2)], {
+    stdio: ['pipe', process.stdout, process.stderr],
+    env: {
+      ...process.env,
+      RELEASE_CHANNEL: channel,
+      CIRCLE_NODE_TOTAL: nodeTotal,
+      CIRCLE_NODE_INDEX: nodeIndex,
+    },
+  });
+}
+
+function processStable(buildDir) {
+  if (fs.existsSync(buildDir + '/node_modules')) {
+    fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-stable');
+  }
+
+  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'));
+      }
+    }
+  }
+
+  if (fs.existsSync(buildDir + '/sizes')) {
+    fs.renameSync(buildDir + '/sizes', buildDir + '/sizes-stable');
+  }
+}
+
+function processExperimental(buildDir) {
+  if (fs.existsSync(buildDir + '/node_modules')) {
+    fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-experimental');
+  }
+
+  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'));
+      }
+    }
+  }
+
+  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]);
+    }
+  }
+}

From 9a6a41d108e1bb7c4babebebad7e72daa22a2374 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jan 2021 11:50:38 -0600
Subject: [PATCH 0170/1603] Migrate build tests to combined workflow (#20574)

---
 .circleci/config.yml                  | 94 ++++++++++-----------------
 scripts/jest/config.build-devtools.js | 11 +++-
 scripts/jest/config.build.js          | 11 +++-
 scripts/jest/jest-cli.js              |  4 +-
 4 files changed, 51 insertions(+), 69 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a532fb2e067a..75d8f945e991 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -1,4 +1,4 @@
-version: 2
+version: 2.1
 
 aliases:
   - &docker
@@ -455,37 +455,20 @@ jobs:
           command: yarn lint-build
       - run: scripts/circleci/check_minified_errors.sh
 
-  yarn_test-stable_build:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-stable --build --ci
-
   yarn_test_build:
     docker: *docker
     environment: *environment
     parallelism: *TEST_PARALLELISM
+    parameters:
+      args:
+        type: string
     steps:
       - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test --build --ci
-
-  yarn_test_build_devtools:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
+      - attach_workspace:
+          at: build2
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
-      - run: yarn test --project=devtools --build --ci
+      - run: yarn test --build <<parameters.args>> --ci
 
   RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
     docker: *docker
@@ -518,28 +501,6 @@ jobs:
             FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
             FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci
 
-  yarn_test-stable_build_prod:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-stable --build --prod --ci
-
-  yarn_test_build_prod:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test --build --prod --ci
-
 workflows:
   version: 2
   stable:
@@ -584,12 +545,6 @@ workflows:
       - RELEASE_CHANNEL_stable_yarn_lint_build:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
-      - yarn_test-stable_build:
-          requires:
-            - RELEASE_CHANNEL_stable_yarn_build
-      - yarn_test-stable_build_prod:
-          requires:
-            - RELEASE_CHANNEL_stable_yarn_build
       - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
@@ -624,18 +579,9 @@ workflows:
       - sizebot_experimental:
           requires:
             - yarn_build
-      - yarn_test_build:
-          requires:
-            - yarn_build
-      - yarn_test_build_prod:
-          requires:
-            - yarn_build
       - yarn_lint_build:
           requires:
             - yarn_build
-      - yarn_test_build_devtools:
-          requires:
-            - yarn_build
       - build_devtools_and_process_artifacts:
           requires:
             - yarn_build
@@ -660,6 +606,32 @@ workflows:
       - process_artifacts_combined:
           requires:
             - yarn_build_combined
+      - yarn_test_build:
+          requires:
+            - yarn_build_combined
+          matrix:
+            parameters:
+              args:
+                # 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"
+
+                # Dev Tools
+                - "--project=devtools -r=experimental"
+
+                # TODO: Update test config to support www build tests
+                # - "-r=www-classic --env=development"
+                # - "-r=www-classic --env=production"
+                # - "-r=www-classic --env=development --variant"
+                # - "-r=www-classic --env=production --variant"
+                # - "-r=www-modern --env=development"
+                # - "-r=www-modern --env=production"
+                # - "-r=www-modern --env=development --variant"
+                # - "-r=www-modern --env=production --variant"
 
   fuzz_tests:
     triggers:
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 39985e7416e1..0d5a6039e414 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -4,6 +4,9 @@ const {readdirSync, statSync} = require('fs');
 const {join} = require('path');
 const baseConfig = require('./config.base');
 
+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 => {
@@ -32,11 +35,13 @@ moduleNameMapper['react-devtools-feature-flags'] =
 // Map packages to bundles
 packages.forEach(name => {
   // Root entry point
-  moduleNameMapper[`^${name}$`] = `<rootDir>/build/node_modules/${name}`;
+  moduleNameMapper[
+    `^${name}$`
+  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}`;
   // Named entry points
   moduleNameMapper[
     `^${name}\/([^\/]+)$`
-  ] = `<rootDir>/build/node_modules/${name}/$1`;
+  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}/$1`;
 });
 
 // Allow tests to import shared code (e.g. feature flags, getStackByFiberInDevAndProd)
@@ -50,7 +55,7 @@ module.exports = Object.assign({}, baseConfig, {
   // 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/'],
+  transformIgnorePatterns: ['/node_modules/', '<rootDir>/build2/'],
   testRegex: 'packages/react-devtools-shared/src/__tests__/[^]+.test.js$',
   snapshotSerializers: [
     require.resolve(
diff --git a/scripts/jest/config.build.js b/scripts/jest/config.build.js
index fe83740fa4fe..95bc0e633ce5 100644
--- a/scripts/jest/config.build.js
+++ b/scripts/jest/config.build.js
@@ -6,6 +6,9 @@ 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 => {
@@ -35,11 +38,13 @@ moduleNameMapper[
 // Map packages to bundles
 packages.forEach(name => {
   // Root entry point
-  moduleNameMapper[`^${name}$`] = `<rootDir>/build/node_modules/${name}`;
+  moduleNameMapper[
+    `^${name}$`
+  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}`;
   // Named entry points
   moduleNameMapper[
     `^${name}\/([^\/]+)$`
-  ] = `<rootDir>/build/node_modules/${name}/$1`;
+  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}/$1`;
 });
 
 module.exports = Object.assign({}, baseConfig, {
@@ -52,7 +57,7 @@ module.exports = Object.assign({}, baseConfig, {
   // 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/'],
+  transformIgnorePatterns: ['/node_modules/', '<rootDir>/build2/'],
   setupFiles: [
     ...baseConfig.setupFiles,
     require.resolve('./setupTests.build.js'),
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 19e3879c776a..76fdd7e67581 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -212,10 +212,10 @@ function validateOptions() {
 
   if (argv.build) {
     // TODO: We could build this if it hasn't been built yet.
-    const buildDir = path.resolve('./build');
+    const buildDir = path.resolve('./build2');
     if (!fs.existsSync(buildDir)) {
       logError(
-        'Build directory does not exist, please run `yarn build` or remove the --build option.'
+        'Build directory does not exist, please run `yarn build-combined` or remove the --build option.'
       );
       success = false;
     } else if (Date.now() - fs.statSync(buildDir).mtimeMs > 1000 * 60 * 15) {

From b99ac3d6dffbe57f94d368cc4f4e0ddf089e4f53 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jan 2021 12:58:49 -0600
Subject: [PATCH 0171/1603] Migrate remaining tests to combined workflow
 (#20577)

---
 .circleci/config.yml | 212 ++++++++-----------------------------------
 1 file changed, 39 insertions(+), 173 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 75d8f945e991..c413bae823ce 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -104,139 +104,6 @@ jobs:
       - *restore_node_modules
       - run: node ./scripts/tasks/flow-ci
 
-  yarn_test-stable:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-stable --ci
-
-  yarn_test:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test --ci
-
-  yarn_test-classic:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-classic --ci
-
-  yarn_test-classic_variant:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-classic --variant --ci
-
-  yarn_test-classic_prod:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-classic --prod --ci
-
-  yarn_test-classic_prod_variant:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-classic --prod --variant --ci
-
-  yarn_test-www:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-www --ci
-
-  yarn_test-www_variant:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-www --variant --ci
-
-  yarn_test-www_prod:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-www --prod --ci
-
-  yarn_test-www_prod_variant:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-www --prod --variant --ci
-
-  yarn_test-stable_persistent:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-stable --persistent --ci
-
-  yarn_test-stable_prod:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test-stable --prod --ci
-
-  yarn_test_prod:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: yarn test --prod --ci
-
   RELEASE_CHANNEL_stable_yarn_build:
     docker: *docker
     environment: *environment
@@ -455,6 +322,19 @@ jobs:
           command: yarn lint-build
       - run: scripts/circleci/check_minified_errors.sh
 
+  yarn_test:
+    docker: *docker
+    environment: *environment
+    parallelism: *TEST_PARALLELISM
+    parameters:
+      args:
+        type: string
+    steps:
+      - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run: yarn test <<parameters.args>> --ci
+
   yarn_test_build:
     docker: *docker
     environment: *environment
@@ -512,27 +392,6 @@ workflows:
       - yarn_flow:
           requires:
             - setup
-      - yarn_test-stable:
-          requires:
-            - setup
-      - yarn_test-stable_prod:
-          requires:
-            - setup
-      - yarn_test-stable_persistent:
-          requires:
-            - setup
-      - yarn_test-classic:
-          requires:
-            - setup
-      - yarn_test-classic_variant:
-          requires:
-            - setup
-      - yarn_test-classic_prod:
-          requires:
-            - setup
-      - yarn_test-classic_prod_variant:
-          requires:
-            - setup
       - RELEASE_CHANNEL_stable_yarn_build:
           requires:
             - setup
@@ -552,24 +411,6 @@ workflows:
   experimental:
     jobs:
       - setup
-      - yarn_test:
-          requires:
-            - setup
-      - yarn_test_prod:
-          requires:
-            - setup
-      - yarn_test-www:
-          requires:
-            - setup
-      - yarn_test-www_variant:
-          requires:
-            - setup
-      - yarn_test-www_prod:
-          requires:
-            - setup
-      - yarn_test-www_prod_variant:
-          requires:
-            - setup
       - yarn_build:
           requires:
             - setup
@@ -597,9 +438,33 @@ workflows:
                 - master
 
   # New workflow that will replace "stable" and "experimental"
-  combined:
+  build_and_test:
     jobs:
       - setup
+      - yarn_test:
+          requires:
+            - setup
+          matrix:
+            parameters:
+              args:
+                # 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"
+                - "-r=www-classic --env=development"
+                - "-r=www-classic --env=production"
+                - "-r=www-classic --env=development --variant"
+                - "-r=www-classic --env=production --variant"
+                - "-r=www-modern --env=development"
+                - "-r=www-modern --env=production"
+                - "-r=www-modern --env=development --variant"
+                - "-r=www-modern --env=production --variant"
+
+                # TODO: Test more persistent configurations?
+                - '-r=stable --env=development --persistent'
       - yarn_build_combined:
           requires:
             - setup
@@ -633,6 +498,7 @@ workflows:
                 # - "-r=www-modern --env=development --variant"
                 # - "-r=www-modern --env=production --variant"
 
+                # TODO: Test more persistent configurations?
   fuzz_tests:
     triggers:
       - schedule:

From e6ed2bcf424d0a25a8f628f7bb9962a29ec7d88f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 13 Jan 2021 11:54:03 -0600
Subject: [PATCH 0172/1603] Update package.json versions as part of build step
 (#20579)

Fixes issue in the new build workflow where the experimental packages do
not include "experimental" in the version string. This was because the
previous approach relied on the RELEASE_CHANNEL environment variable,
which we are no longer setting in the outer CI job, since we use the
same job to build both channels. To solve, I moved the version
post-processing into the build script itself.

Only affects the new build workflow. Old workflow is unchanged.

Longer term, I would like to remove version numbers from the source
entirely, including the package.jsons. We should use a placeholder
instead; that's mostly how it already works, since the release script
swaps out the versions before we publish to stable.
---
 .circleci/config.yml                         |  6 +-
 scripts/rollup/build-all-release-channels.js | 72 ++++++++++++++++++--
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index c413bae823ce..b5f760405902 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -168,11 +168,7 @@ jobs:
       - checkout
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
-      - run:
-          command: |
-            ./scripts/circleci/add_build_info_json.sh
-            ./scripts/circleci/update_package_versions.sh
-            yarn build-combined
+      - run: yarn build-combined
       - persist_to_workspace:
           root: build2
           paths:
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 774f1011aa28..0b74e4c42d8e 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -4,11 +4,18 @@
 
 const fs = require('fs');
 const {spawnSync} = require('child_process');
+const path = require('path');
 const tmp = require('tmp');
 
 // Runs the build script for both stable and experimental release channels,
 // by configuring an environment variable.
 
+const sha = (
+  spawnSync('git', ['show', '-s', '--format=%h']).stdout + ''
+).trim();
+const ReactVersion = JSON.parse(fs.readFileSync('packages/react/package.json'))
+  .version;
+
 if (process.env.CIRCLE_NODE_TOTAL) {
   // In CI, we use multiple concurrent processes. Allocate half the processes to
   // build the stable channel, and the other half for experimental. Override
@@ -19,13 +26,19 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   if (index < halfTotal) {
     const nodeTotal = halfTotal;
     const nodeIndex = index;
+    const version = '0.0.0-' + sha;
+    updateTheReactVersionThatDevToolsReads(ReactVersion + '-' + sha);
     buildForChannel('stable', nodeTotal, nodeIndex);
-    processStable('./build');
+    processStable('./build', version);
   } else {
     const nodeTotal = total - halfTotal;
     const nodeIndex = index - halfTotal;
+    const version = '0.0.0-experimental-' + sha;
+    updateTheReactVersionThatDevToolsReads(
+      ReactVersion + '-experimental-' + sha
+    );
     buildForChannel('experimental', nodeTotal, nodeIndex);
-    processExperimental('./build');
+    processExperimental('./build', version);
   }
 
   // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
@@ -34,15 +47,17 @@ if (process.env.CIRCLE_NODE_TOTAL) {
 } else {
   // Running locally, no concurrency. Move each channel's build artifacts into
   // a temporary directory so that they don't conflict.
+  const stableVersion = '0.0.0-' + sha;
   buildForChannel('stable', '', '');
   const stableDir = tmp.dirSync().name;
   fs.renameSync('./build', stableDir);
-  processStable(stableDir);
+  processStable(stableDir, stableVersion);
 
+  const experimentalVersion = '0.0.0-experimental-' + sha;
   buildForChannel('experimental', '', '');
   const experimentalDir = tmp.dirSync().name;
   fs.renameSync('./build', experimentalDir);
-  processExperimental(experimentalDir);
+  processExperimental(experimentalDir, experimentalVersion);
 
   // Then merge the experimental folder into the stable one. processExperimental
   // will have already removed conflicting files.
@@ -68,8 +83,9 @@ function buildForChannel(channel, nodeTotal, nodeIndex) {
   });
 }
 
-function processStable(buildDir) {
+function processStable(buildDir, version) {
   if (fs.existsSync(buildDir + '/node_modules')) {
+    updatePackageVersions(buildDir + '/node_modules', version);
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-stable');
   }
 
@@ -88,8 +104,9 @@ function processStable(buildDir) {
   }
 }
 
-function processExperimental(buildDir) {
+function processExperimental(buildDir, version) {
   if (fs.existsSync(buildDir + '/node_modules')) {
+    updatePackageVersions(buildDir + '/node_modules', version);
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-experimental');
   }
 
@@ -121,3 +138,46 @@ function processExperimental(buildDir) {
     }
   }
 }
+
+function updatePackageVersions(modulesDir, version) {
+  const allReactModuleNames = fs.readdirSync('packages');
+  for (const moduleName of fs.readdirSync(modulesDir)) {
+    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;
+
+      // Update dependency versions
+      if (packageInfo.dependencies) {
+        for (const dep of Object.keys(packageInfo.dependencies)) {
+          if (allReactModuleNames.includes(dep)) {
+            packageInfo.dependencies[dep] = version;
+          }
+        }
+      }
+      if (packageInfo.peerDependencies) {
+        for (const dep of Object.keys(packageInfo.peerDependencies)) {
+          if (allReactModuleNames.includes(dep)) {
+            packageInfo.peerDependencies[dep] = version;
+          }
+        }
+      }
+
+      // Write out updated package.json
+      fs.writeFileSync(packageJSONPath, JSON.stringify(packageInfo, null, 2));
+    }
+  }
+}
+
+function updateTheReactVersionThatDevToolsReads(version) {
+  // Overwrite the ReactVersion module before the build script runs so that it
+  // is included in the final bundles. This only runs in CI, so it's fine to
+  // edit the source file.
+  fs.writeFileSync(
+    './packages/shared/ReactVersion.js',
+    `export default '${version}';\n`
+  );
+}

From fc07b070a09396e60126dd75641472f0c7504edf Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 13 Jan 2021 13:54:56 -0600
Subject: [PATCH 0173/1603] Retry with fresh otp if publish fails (#20582)

Currently, if publishing a package fails, the script crashes, and the
user must start it again from the beginning. Usually this happens
because the one-time password has timed out.

With this change, the user will be prompted for a fresh otp, and the
script will resume publishing.
---
 scripts/release/publish.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/scripts/release/publish.js b/scripts/release/publish.js
index e51df5c45f8a..9ec9330a0973 100755
--- a/scripts/release/publish.js
+++ b/scripts/release/publish.js
@@ -48,8 +48,22 @@ const run = async () => {
     await confirmVersionAndTags(params);
     await validateSkipPackages(params);
     await checkNPMPermissions(params);
-    const otp = await promptForOTP(params);
-    await publishToNPM(params, otp);
+
+    while (true) {
+      try {
+        const otp = await promptForOTP(params);
+        await publishToNPM(params, otp);
+        break;
+      } catch (error) {
+        console.error(error.message);
+        console.log();
+        console.log(
+          theme.error`Publish failed. Enter a fresh otp code to retry.`
+        );
+        continue;
+      }
+    }
+
     await updateStableVersionNumbers(params);
     await printFollowUpInstructions(params);
   } catch (error) {

From a656ace8da6d005e49a750da3d9a3fd0fdcac76c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 13 Jan 2021 18:18:55 -0600
Subject: [PATCH 0174/1603] Deletion effects should fire parent -> child
 (#20584)

* Test: Deletion effects should fire parent -> child

Regression in new effect implementation

* Fix passive deletion effect ordering
---
 .../src/ReactFiberCommitWork.new.js           | 12 +--
 .../src/ReactFiberCommitWork.old.js           | 12 +--
 .../src/__tests__/ReactEffectOrdering-test.js | 86 +++++++++++++++++++
 3 files changed, 100 insertions(+), 10 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index d3082d5f785b..a048500e9ddf 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2005,6 +2005,13 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
+
+    // Deletion effects fire in parent -> child order
+    // TODO: Check if fiber has a PassiveStatic flag
+    setCurrentDebugFiberInDEV(fiber);
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+    resetCurrentDebugFiberInDEV();
+
     const child = fiber.child;
     // TODO: Only traverse subtree if it has a PassiveStatic flag
     if (child !== null) {
@@ -2023,11 +2030,6 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    // TODO: Check if fiber has a PassiveStatic flag
-    setCurrentDebugFiberInDEV(fiber);
-    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
-    resetCurrentDebugFiberInDEV();
-
     if (fiber === deletedSubtreeRoot) {
       nextEffect = null;
       return;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 95e48b1e4ae4..72f801981d30 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2005,6 +2005,13 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
+
+    // Deletion effects fire in parent -> child order
+    // TODO: Check if fiber has a PassiveStatic flag
+    setCurrentDebugFiberInDEV(fiber);
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+    resetCurrentDebugFiberInDEV();
+
     const child = fiber.child;
     // TODO: Only traverse subtree if it has a PassiveStatic flag
     if (child !== null) {
@@ -2023,11 +2030,6 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    // TODO: Check if fiber has a PassiveStatic flag
-    setCurrentDebugFiberInDEV(fiber);
-    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
-    resetCurrentDebugFiberInDEV();
-
     if (fiber === deletedSubtreeRoot) {
       nextEffect = null;
       return;
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 000000000000..6e9ffcfb894f
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-func-assign */
+
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let useEffect;
+let useLayoutEffect;
+
+describe('ReactHooksWithNoopRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.useFakeTimers();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+  });
+
+  test('layout unmmouts on deletion are fired in parent -> child order', async () => {
+    const root = ReactNoop.createRoot();
+
+    function Parent() {
+      useLayoutEffect(() => {
+        return () => Scheduler.unstable_yieldValue('Unmount parent');
+      });
+      return <Child />;
+    }
+
+    function Child() {
+      useLayoutEffect(() => {
+        return () => Scheduler.unstable_yieldValue('Unmount child');
+      });
+      return 'Child';
+    }
+
+    await ReactNoop.act(async () => {
+      root.render(<Parent />);
+    });
+    expect(root).toMatchRenderedOutput('Child');
+    await ReactNoop.act(async () => {
+      root.render(null);
+    });
+    expect(Scheduler).toHaveYielded(['Unmount parent', 'Unmount child']);
+  });
+
+  test('passive unmmouts on deletion are fired in parent -> child order', async () => {
+    const root = ReactNoop.createRoot();
+
+    function Parent() {
+      useEffect(() => {
+        return () => Scheduler.unstable_yieldValue('Unmount parent');
+      });
+      return <Child />;
+    }
+
+    function Child() {
+      useEffect(() => {
+        return () => Scheduler.unstable_yieldValue('Unmount child');
+      });
+      return 'Child';
+    }
+
+    await ReactNoop.act(async () => {
+      root.render(<Parent />);
+    });
+    expect(root).toMatchRenderedOutput('Child');
+    await ReactNoop.act(async () => {
+      root.render(null);
+    });
+    expect(Scheduler).toHaveYielded(['Unmount parent', 'Unmount child']);
+  });
+});

From 42e04b46d19648968537a404f15cebc42b6fab54 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 14 Jan 2021 10:18:55 -0600
Subject: [PATCH 0175/1603] Fix: Detach deleted fiber's alternate, too (#20587)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We need to call `detachFiberAfterEffects` on the fiber's alternate to
clean it up. We're currently not, because the `alternate` field is
cleared during `detachFiberMutation`. So I deferred detaching the
`alternate` until the passive phase. Only the `return` pointer needs to
be detached for semantic purposes.

I don't think there's any good way to test this without using
reflection. It's not even observable using out our "supported"
reflection APIs (`findDOMNode`), or at least not that I can think of.
Which is a good thing, in a way.

It's not really a memory leak, either, because the only reference to the
alternate fiber is from the parent's alternate. Which will be
disconnected the next time the parent is updated or deleted.

It's really only observable if you mess around with internals in ways
you're not supposed to — I found it because a product test in www that
uses Enzyme was doing just that.

In lieu of a new unit test, I confirmed this patch fixes the broken
product test.
---
 .../src/ReactFiberCommitWork.new.js                | 14 +++++++++-----
 .../src/ReactFiberCommitWork.old.js                | 14 +++++++++-----
 .../react-reconciler/src/ReactFiberWorkLoop.new.js |  4 ++++
 .../react-reconciler/src/ReactFiberWorkLoop.old.js |  4 ++++
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index a048500e9ddf..32bb1028add8 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1084,17 +1084,17 @@ function detachFiberMutation(fiber: Fiber) {
   // 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).
-  const alternate = fiber.alternate;
-  if (alternate !== null) {
-    alternate.return = null;
-    fiber.alternate = null;
-  }
+  //
+  // 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.
   fiber.return = null;
 }
 
 export function detachFiberAfterEffects(fiber: Fiber): void {
   // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
   // Note that we already cleared the return pointer in detachFiberMutation().
+  fiber.alternate = null;
   fiber.child = null;
   fiber.deletions = null;
   fiber.dependencies = null;
@@ -1936,7 +1936,11 @@ function commitPassiveUnmountEffects_begin() {
           commitPassiveUnmountEffectsInsideOfDeletedTree_begin(fiberToDelete);
 
           // Now that passive effects have been processed, it's safe to detach lingering pointers.
+          const alternate = fiberToDelete.alternate;
           detachFiberAfterEffects(fiberToDelete);
+          if (alternate !== null) {
+            detachFiberAfterEffects(alternate);
+          }
         }
         nextEffect = fiber;
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 72f801981d30..d3bfe78e3947 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1084,17 +1084,17 @@ function detachFiberMutation(fiber: Fiber) {
   // 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).
-  const alternate = fiber.alternate;
-  if (alternate !== null) {
-    alternate.return = null;
-    fiber.alternate = null;
-  }
+  //
+  // 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.
   fiber.return = null;
 }
 
 export function detachFiberAfterEffects(fiber: Fiber): void {
   // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
   // Note that we already cleared the return pointer in detachFiberMutation().
+  fiber.alternate = null;
   fiber.child = null;
   fiber.deletions = null;
   fiber.dependencies = null;
@@ -1936,7 +1936,11 @@ function commitPassiveUnmountEffects_begin() {
           commitPassiveUnmountEffectsInsideOfDeletedTree_begin(fiberToDelete);
 
           // Now that passive effects have been processed, it's safe to detach lingering pointers.
+          const alternate = fiberToDelete.alternate;
           detachFiberAfterEffects(fiberToDelete);
+          if (alternate !== null) {
+            detachFiberAfterEffects(alternate);
+          }
         }
         nextEffect = fiber;
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 03831988e2b2..0c50c804da36 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2148,7 +2148,11 @@ function commitRootImpl(root, renderPriorityLevel) {
         if (deletions !== null) {
           for (let i = 0; i < deletions.length; i++) {
             const deletion = deletions[i];
+            const alternate = deletion.alternate;
             detachFiberAfterEffects(deletion);
+            if (alternate !== null) {
+              detachFiberAfterEffects(alternate);
+            }
           }
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 6966472e0d16..caeab7ce6733 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2148,7 +2148,11 @@ function commitRootImpl(root, renderPriorityLevel) {
         if (deletions !== null) {
           for (let i = 0; i < deletions.length; i++) {
             const deletion = deletions[i];
+            const alternate = deletion.alternate;
             detachFiberAfterEffects(deletion);
+            if (alternate !== null) {
+              detachFiberAfterEffects(alternate);
+            }
           }
         }
       }

From 98313aaa7ea58d49eb30ecffc0f9eb6fc1ef467a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 14 Jan 2021 11:20:20 -0600
Subject: [PATCH 0176/1603] Migrate prepare-release-from-ci to new workflow
 (#20581)

* Migrate prepare-release-from-ci to new workflow

I added a `--releaseChannel (-r)` argument to script. You must choose
either "stable" or "experimental", because every build job now includes
both channels.

The prepare-release-from-npm script is unchanged since those releases
are downloaded from npm, nt CI.

(As a side note, I think we should start preparing semver releases using
the prepare-release-from-ci script, too, and get rid of
prepare-release-from-npm. I think that was a neat idea originally but
because we already run `npm pack` before storing the artifacts in CI,
there's really not much additional safety; the only safeguard it adds is
the requirement that a "next" release must have already been published.)

* Move validation to parse-params module
---
 scripts/release/prepare-release-from-ci.js    |  8 +--
 .../download-build-artifacts.js               | 67 ++++++++-----------
 .../get-latest-master-build-number.js         |  8 +--
 .../release/shared-commands/parse-params.js   | 14 ++++
 scripts/release/utils.js                      |  6 +-
 5 files changed, 47 insertions(+), 56 deletions(-)

diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index f7222ba8ca8a..dd8e143453f7 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -3,8 +3,7 @@
 'use strict';
 
 const {join} = require('path');
-const {readJsonSync} = require('fs-extra');
-const {getPublicPackages, handleError} = require('./utils');
+const {handleError} = require('./utils');
 
 const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
 const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
@@ -26,11 +25,6 @@ const run = async () => {
     await checkEnvironmentVariables(params);
     await downloadBuildArtifacts(params);
 
-    const version = readJsonSync('./build/node_modules/react/package.json')
-      .version;
-    const isExperimental = version.includes('experimental');
-    params.packages = await getPublicPackages(isExperimental);
-
     if (!params.skipTests) {
       await testPackagingFixture(params);
       await testTracingFixture(params);
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index 715834193440..4d5259e24d1c 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -3,65 +3,56 @@
 'use strict';
 
 const {exec} = require('child-process-promise');
-const {existsSync, readdirSync} = require('fs');
-const {readJsonSync} = require('fs-extra');
+const {existsSync} = require('fs');
 const {join} = require('path');
 const {getArtifactsList, logPromise} = require('../utils');
 const theme = require('../theme');
 
-const run = async ({build, cwd}) => {
+const run = async ({build, cwd, releaseChannel}) => {
   const artifacts = await getArtifactsList(build);
-  const nodeModulesArtifact = artifacts.find(entry =>
-    entry.path.endsWith('node_modules.tgz')
+  const buildArtifacts = artifacts.find(entry =>
+    entry.path.endsWith('build2.tgz')
   );
 
-  if (!nodeModulesArtifact) {
+  if (!buildArtifacts) {
     console.log(
       theme`{error The specified build (${build}) does not contain any build artifacts.}`
     );
     process.exit(1);
   }
 
-  const nodeModulesURL = nodeModulesArtifact.url;
+  // Download and extract artifact
+  await exec(`rm -rf ./build2`, {cwd});
+  await exec(
+    `curl -L $(fwdproxy-config curl) ${buildArtifacts.url} | tar -xvz`,
+    {
+      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});
   }
-
-  // Download and extract artifact
-  await exec(`rm -rf ./build/node_modules*`, {cwd});
-  await exec(`curl -L ${nodeModulesURL} --output ./build/node_modules.tgz`, {
-    cwd,
-  });
-  await exec(`mkdir ./build/node_modules`, {cwd});
-  await exec(`tar zxvf ./build/node_modules.tgz -C ./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}
-    );
+  let sourceDir;
+  if (releaseChannel === 'stable') {
+    sourceDir = 'oss-stable';
+  } else if (releaseChannel === 'experimental') {
+    sourceDir = 'oss-experimental';
+  } else {
+    console.error('Internal error: Invalid release channel: ' + releaseChannel);
+    process.exit(releaseChannel);
   }
-
-  // Cleanup
-  await exec(`rm ./build/node_modules.tgz`, {cwd});
-  await exec(`rm ./build/node_modules/*.tgz`, {cwd});
+  await exec(`cp -r ./build2/${sourceDir} ./build/node_modules`, {cwd});
 };
 
-module.exports = async ({build, cwd}) => {
+module.exports = async ({build, cwd, releaseChannel}) => {
   return logPromise(
-    run({build, cwd}),
+    run({build, cwd, releaseChannel}),
     theme`Downloading artifacts from Circle CI for build {build ${build}}`
   );
 };
diff --git a/scripts/release/shared-commands/get-latest-master-build-number.js b/scripts/release/shared-commands/get-latest-master-build-number.js
index 1d1787fad8f0..d0bcd56e2e04 100644
--- a/scripts/release/shared-commands/get-latest-master-build-number.js
+++ b/scripts/release/shared-commands/get-latest-master-build-number.js
@@ -5,11 +5,7 @@
 const http = require('request-promise-json');
 const {logPromise} = require('../utils');
 
-const run = async useExperimentalBuild => {
-  const targetJobName = useExperimentalBuild
-    ? 'process_artifacts_experimental'
-    : 'process_artifacts';
-
+const run = async () => {
   // https://circleci.com/docs/api/#recent-builds-for-a-project-branch
   const metadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/tree/master`;
   const metadata = await http.get(metadataURL, true);
@@ -17,7 +13,7 @@ const run = async useExperimentalBuild => {
     entry =>
       entry.branch === 'master' &&
       entry.status === 'success' &&
-      entry.workflows.job_name === targetJobName
+      entry.workflows.job_name === 'process_artifacts_combined'
   ).build_num;
 
   return build;
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
index 703fc0fb11b4..2ec21020282f 100644
--- a/scripts/release/shared-commands/parse-params.js
+++ b/scripts/release/shared-commands/parse-params.js
@@ -17,10 +17,24 @@ const paramDefinitions = [
     description: 'Skip automated fixture tests.',
     defaultValue: false,
   },
+  {
+    name: 'releaseChannel',
+    alias: 'r',
+    type: String,
+    description: 'Release channel (stable or experimental)',
+  },
 ];
 
 module.exports = () => {
   const params = commandLineArgs(paramDefinitions);
 
+  const channel = params.releaseChannel;
+  if (channel !== 'experimental' && channel !== 'stable') {
+    console.error(
+      `Invalid release channel (-r) "${channel}". Must be "stable" or "experimental".`
+    );
+    process.exit(1);
+  }
+
   return params;
 };
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index be191978df3f..52731d4376e0 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -41,11 +41,7 @@ const getArtifactsList = async buildID => {
     );
     process.exit(1);
   }
-  const artifactsJobName = buildMetadata.workflows.job_name.endsWith(
-    '_experimental'
-  )
-    ? 'process_artifacts_experimental'
-    : 'process_artifacts';
+  const artifactsJobName = 'process_artifacts_combined';
   const workflowID = buildMetadata.workflows.workflow_id;
   const workflowMetadataURL = `https://circleci.com/api/v2/workflow/${workflowID}/job?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
   const workflowMetadata = await http.get(workflowMetadataURL, true);

From 6132919bf2b8851382547b34a442e7e0c09c5697 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 15 Jan 2021 14:22:23 -0600
Subject: [PATCH 0177/1603] Convert layout phase to depth-first traversal
 (#20595)

---
 .../src/ReactFiberCommitWork.new.js           | 591 ++++++++++--------
 .../src/ReactFiberWorkLoop.new.js             |  88 +--
 .../ReactDOMTracing-test.internal.js          |   4 +-
 .../__tests__/ReactProfiler-test.internal.js  |   6 +-
 scripts/jest/TestFlags.js                     |   7 +-
 5 files changed, 368 insertions(+), 328 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 32bb1028add8..4f77868463fc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -69,8 +69,11 @@ import {
   ChildDeletion,
   Snapshot,
   Update,
+  Callback,
+  Ref,
   Passive,
   PassiveMask,
+  LayoutMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
@@ -490,95 +493,154 @@ export function commitPassiveEffectDurations(
   }
 }
 
-function commitLifeCycles(
+function commitLayoutEffectOnFiber(
   finishedRoot: FiberRoot,
   current: Fiber | null,
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
-      // 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 (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
+  if ((finishedWork.flags & (Update | Callback)) !== NoFlags) {
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        // 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 (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          try {
+            startLayoutEffectTimer();
+            commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+          } finally {
+            recordLayoutEffectDuration(finishedWork);
+          }
+        } else {
           commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
         }
-      } else {
-        commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-      }
 
-      schedulePassiveEffects(finishedWork);
-      return;
-    }
-    case ClassComponent: {
-      const instance = finishedWork.stateNode;
-      if (finishedWork.flags & Update) {
-        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__) {
+        schedulePassiveEffects(finishedWork);
+        break;
+      }
+      case ClassComponent: {
+        const instance = finishedWork.stateNode;
+        if (finishedWork.flags & Update) {
+          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 === finishedWork.elementType &&
+                !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.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+                if (instance.state !== finishedWork.memoizedState) {
+                  console.error(
+                    'Expected %s state to match memoized state before ' +
+                      'componentDidMount. ' +
+                      'This might either be because of a bug in React, or because ' +
+                      'a component reassigns its own `this.state`. ' +
+                      'Please file an issue.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+              }
+            }
             if (
-              finishedWork.type === finishedWork.elementType &&
-              !didWarnAboutReassigningProps
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
             ) {
-              if (instance.props !== finishedWork.memoizedProps) {
-                console.error(
-                  'Expected %s props to match memoized props before ' +
-                    'componentDidMount. ' +
-                    'This might either be because of a bug in React, or because ' +
-                    'a component reassigns its own `this.props`. ' +
-                    'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
-                );
+              try {
+                startLayoutEffectTimer();
+                instance.componentDidMount();
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
               }
-              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.',
-                  getComponentName(finishedWork.type) || 'instance',
-                );
-              }
-            }
-          }
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            finishedWork.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
+            } else {
               instance.componentDidMount();
-            } finally {
-              recordLayoutEffectDuration(finishedWork);
             }
           } else {
-            instance.componentDidMount();
+            const prevProps =
+              finishedWork.elementType === finishedWork.type
+                ? current.memoizedProps
+                : resolveDefaultProps(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 === finishedWork.elementType &&
+                !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.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+                if (instance.state !== finishedWork.memoizedState) {
+                  console.error(
+                    'Expected %s state to match memoized state before ' +
+                      'componentDidUpdate. ' +
+                      'This might either be because of a bug in React, or because ' +
+                      'a component reassigns its own `this.state`. ' +
+                      'Please file an issue.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+              }
+            }
+            if (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
+                instance.componentDidUpdate(
+                  prevProps,
+                  prevState,
+                  instance.__reactInternalSnapshotBeforeUpdate,
+                );
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
+              }
+            } else {
+              instance.componentDidUpdate(
+                prevProps,
+                prevState,
+                instance.__reactInternalSnapshotBeforeUpdate,
+              );
+            }
           }
-        } else {
-          const prevProps =
-            finishedWork.elementType === finishedWork.type
-              ? current.memoizedProps
-              : resolveDefaultProps(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.
+        }
+
+        // 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<
+          *,
+        > | null = (finishedWork.updateQueue: any);
+        if (updateQueue !== null) {
           if (__DEV__) {
             if (
               finishedWork.type === finishedWork.elementType &&
@@ -587,7 +649,7 @@ function commitLifeCycles(
               if (instance.props !== finishedWork.memoizedProps) {
                 console.error(
                   'Expected %s props to match memoized props before ' +
-                    'componentDidUpdate. ' +
+                    '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.',
@@ -597,7 +659,7 @@ function commitLifeCycles(
               if (instance.state !== finishedWork.memoizedState) {
                 console.error(
                   'Expected %s state to match memoized state before ' +
-                    'componentDidUpdate. ' +
+                    '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.',
@@ -606,210 +668,166 @@ function commitLifeCycles(
               }
             }
           }
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            finishedWork.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              instance.componentDidUpdate(
-                prevProps,
-                prevState,
-                instance.__reactInternalSnapshotBeforeUpdate,
-              );
-            } finally {
-              recordLayoutEffectDuration(finishedWork);
-            }
-          } else {
-            instance.componentDidUpdate(
-              prevProps,
-              prevState,
-              instance.__reactInternalSnapshotBeforeUpdate,
-            );
-          }
+          // 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.
+          commitUpdateQueue(finishedWork, updateQueue, instance);
         }
+        break;
       }
-
-      // 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<
-        *,
-      > | null = (finishedWork.updateQueue: any);
-      if (updateQueue !== null) {
-        if (__DEV__) {
-          if (
-            finishedWork.type === finishedWork.elementType &&
-            !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.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
-            }
-            if (instance.state !== finishedWork.memoizedState) {
-              console.error(
-                'Expected %s state to match memoized state before ' +
-                  'processing the update queue. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.state`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
+      case HostRoot: {
+        // 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<
+          *,
+        > | null = (finishedWork.updateQueue: any);
+        if (updateQueue !== null) {
+          let instance = null;
+          if (finishedWork.child !== null) {
+            switch (finishedWork.child.tag) {
+              case HostComponent:
+                instance = getPublicInstance(finishedWork.child.stateNode);
+                break;
+              case ClassComponent:
+                instance = finishedWork.child.stateNode;
+                break;
             }
           }
+          commitUpdateQueue(finishedWork, updateQueue, 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.
-        commitUpdateQueue(finishedWork, updateQueue, instance);
+        break;
       }
-      return;
-    }
-    case HostRoot: {
-      // 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<
-        *,
-      > | null = (finishedWork.updateQueue: any);
-      if (updateQueue !== null) {
-        let instance = null;
-        if (finishedWork.child !== null) {
-          switch (finishedWork.child.tag) {
-            case HostComponent:
-              instance = getPublicInstance(finishedWork.child.stateNode);
-              break;
-            case ClassComponent:
-              instance = finishedWork.child.stateNode;
-              break;
-          }
+      case HostComponent: {
+        const instance: Instance = finishedWork.stateNode;
+
+        // 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 && finishedWork.flags & Update) {
+          const type = finishedWork.type;
+          const props = finishedWork.memoizedProps;
+          commitMount(instance, type, props, finishedWork);
         }
-        commitUpdateQueue(finishedWork, updateQueue, instance);
-      }
-      return;
-    }
-    case HostComponent: {
-      const instance: Instance = finishedWork.stateNode;
 
-      // 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 && finishedWork.flags & Update) {
-        const type = finishedWork.type;
-        const props = finishedWork.memoizedProps;
-        commitMount(instance, type, props, finishedWork);
+        break;
       }
+      case HostText: {
+        // We have no life-cycles associated with text.
+        break;
+      }
+      case HostPortal: {
+        // We have no life-cycles associated with portals.
+        break;
+      }
+      case Profiler: {
+        if (enableProfilerTimer) {
+          const {onCommit, onRender} = finishedWork.memoizedProps;
+          const {effectDuration} = finishedWork.stateNode;
 
-      return;
-    }
-    case HostText: {
-      // We have no life-cycles associated with text.
-      return;
-    }
-    case HostPortal: {
-      // We have no life-cycles associated with portals.
-      return;
-    }
-    case Profiler: {
-      if (enableProfilerTimer) {
-        const {onCommit, onRender} = finishedWork.memoizedProps;
-        const {effectDuration} = finishedWork.stateNode;
-
-        const commitTime = getCommitTime();
-
-        let phase = current === null ? 'mount' : 'update';
-        if (enableProfilerNestedUpdatePhase) {
-          if (isCurrentUpdateNested()) {
-            phase = 'nested-update';
-          }
-        }
+          const commitTime = getCommitTime();
 
-        if (typeof onRender === 'function') {
-          if (enableSchedulerTracing) {
-            onRender(
-              finishedWork.memoizedProps.id,
-              phase,
-              finishedWork.actualDuration,
-              finishedWork.treeBaseDuration,
-              finishedWork.actualStartTime,
-              commitTime,
-              finishedRoot.memoizedInteractions,
-            );
-          } else {
-            onRender(
-              finishedWork.memoizedProps.id,
-              phase,
-              finishedWork.actualDuration,
-              finishedWork.treeBaseDuration,
-              finishedWork.actualStartTime,
-              commitTime,
-            );
+          let phase = current === null ? 'mount' : 'update';
+          if (enableProfilerNestedUpdatePhase) {
+            if (isCurrentUpdateNested()) {
+              phase = 'nested-update';
+            }
           }
-        }
 
-        if (enableProfilerCommitHooks) {
-          if (typeof onCommit === 'function') {
+          if (typeof onRender === 'function') {
             if (enableSchedulerTracing) {
-              onCommit(
+              onRender(
                 finishedWork.memoizedProps.id,
                 phase,
-                effectDuration,
+                finishedWork.actualDuration,
+                finishedWork.treeBaseDuration,
+                finishedWork.actualStartTime,
                 commitTime,
                 finishedRoot.memoizedInteractions,
               );
             } else {
-              onCommit(
+              onRender(
                 finishedWork.memoizedProps.id,
                 phase,
-                effectDuration,
+                finishedWork.actualDuration,
+                finishedWork.treeBaseDuration,
+                finishedWork.actualStartTime,
                 commitTime,
               );
             }
           }
 
-          // 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.
-          enqueuePendingPassiveProfilerEffect(finishedWork);
+          if (enableProfilerCommitHooks) {
+            if (typeof onCommit === 'function') {
+              if (enableSchedulerTracing) {
+                onCommit(
+                  finishedWork.memoizedProps.id,
+                  phase,
+                  effectDuration,
+                  commitTime,
+                  finishedRoot.memoizedInteractions,
+                );
+              } else {
+                onCommit(
+                  finishedWork.memoizedProps.id,
+                  phase,
+                  effectDuration,
+                  commitTime,
+                );
+              }
+            }
 
-          // 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.
-          let parentFiber = finishedWork.return;
-          while (parentFiber !== null) {
-            if (parentFiber.tag === Profiler) {
-              const parentStateNode = parentFiber.stateNode;
-              parentStateNode.effectDuration += effectDuration;
-              break;
+            // 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.
+            enqueuePendingPassiveProfilerEffect(finishedWork);
+
+            // 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.
+            let parentFiber = finishedWork.return;
+            while (parentFiber !== null) {
+              if (parentFiber.tag === Profiler) {
+                const parentStateNode = parentFiber.stateNode;
+                parentStateNode.effectDuration += effectDuration;
+                break;
+              }
+              parentFiber = parentFiber.return;
             }
-            parentFiber = parentFiber.return;
           }
         }
+        break;
       }
-      return;
+      case SuspenseComponent: {
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+        break;
+      }
+      case SuspenseListComponent:
+      case IncompleteClassComponent:
+      case FundamentalComponent:
+      case ScopeComponent:
+      case OffscreenComponent:
+      case LegacyHiddenComponent:
+        break;
+      default:
+        invariant(
+          false,
+          'This unit of work tag should not have side-effects. This error is ' +
+            'likely caused by a bug in React. Please file an issue.',
+        );
     }
-    case SuspenseComponent: {
-      commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-      return;
+  }
+
+  if (enableScopeAPI) {
+    // TODO: This is a temporary solution that allowed us to transition away
+    // from React Flare on www.
+    if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
+      commitAttachRef(finishedWork);
+    }
+  } else {
+    if (finishedWork.flags & Ref) {
+      commitAttachRef(finishedWork);
     }
-    case SuspenseListComponent:
-    case IncompleteClassComponent:
-    case FundamentalComponent:
-    case ScopeComponent:
-    case OffscreenComponent:
-    case LegacyHiddenComponent:
-      return;
   }
-  invariant(
-    false,
-    'This unit of work tag should not have side-effects. This error is ' +
-      'likely caused by a bug in React. Please file an issue.',
-  );
 }
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
@@ -1823,12 +1841,88 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
+export function commitLayoutEffects(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+): void {
+  nextEffect = finishedWork;
+  commitLayoutEffects_begin(finishedWork, root, committedLanes);
+}
+
+function commitLayoutEffects_begin(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+    if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
+      ensureCorrectReturnPointer(firstChild, fiber);
+      nextEffect = firstChild;
+    } else {
+      commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+    }
+  }
+}
+
+function commitLayoutMountEffects_complete(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & LayoutMask) !== NoFlags) {
+      const current = fiber.alternate;
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        invokeGuardedCallback(
+          null,
+          commitLayoutEffectOnFiber,
+          null,
+          root,
+          current,
+          fiber,
+          committedLanes,
+        );
+        if (hasCaughtError()) {
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
+        } catch (error) {
+          captureCommitPhaseError(fiber, error);
+        }
+      }
+    }
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
 export function commitPassiveMountEffects(
   root: FiberRoot,
-  firstChild: Fiber,
+  finishedWork: Fiber,
 ): void {
-  nextEffect = firstChild;
-  commitPassiveMountEffects_begin(firstChild, root);
+  nextEffect = finishedWork;
+  commitPassiveMountEffects_begin(finishedWork, root);
 }
 
 function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
@@ -2094,7 +2188,6 @@ export {
   commitPlacement,
   commitDeletion,
   commitWork,
-  commitLifeCycles,
   commitAttachRef,
   commitDetachRef,
 };
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0c50c804da36..37f513f29d51 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -131,7 +131,6 @@ import {
   Ref,
   ContentReset,
   Snapshot,
-  Callback,
   Passive,
   PassiveStatic,
   Incomplete,
@@ -190,7 +189,7 @@ import {
 } from './ReactFiberThrow.new';
 import {
   commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
-  commitLifeCycles as commitLayoutEffectOnFiber,
+  commitLayoutEffects,
   commitPlacement,
   commitWork,
   commitDeletion,
@@ -2073,28 +2072,24 @@ function commitRootImpl(root, renderPriorityLevel) {
     // 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.
-    nextEffect = firstEffect;
-    do {
-      if (__DEV__) {
-        invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
-        if (hasCaughtError()) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      } else {
-        try {
-          commitLayoutEffects(root, lanes);
-        } catch (error) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        logLayoutEffectsStarted(lanes);
       }
-    } while (nextEffect !== null);
+    }
+    if (enableSchedulingProfiler) {
+      markLayoutEffectsStarted(lanes);
+    }
+    commitLayoutEffects(finishedWork, root, lanes);
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        logLayoutEffectsStopped();
+      }
+    }
 
-    nextEffect = null;
+    if (enableSchedulingProfiler) {
+      markLayoutEffectsStopped();
+    }
 
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       rootCommittingMutationOrLayoutEffects = null;
@@ -2420,55 +2415,6 @@ function commitMutationEffects(
   }
 }
 
-function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      logLayoutEffectsStarted(committedLanes);
-    }
-  }
-
-  if (enableSchedulingProfiler) {
-    markLayoutEffectsStarted(committedLanes);
-  }
-
-  // TODO: Should probably move the bulk of this function to commitWork.
-  while (nextEffect !== null) {
-    setCurrentDebugFiberInDEV(nextEffect);
-
-    const flags = nextEffect.flags;
-
-    if (flags & (Update | Callback)) {
-      const current = nextEffect.alternate;
-      commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
-    }
-
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (flags & Ref && nextEffect.tag !== ScopeComponent) {
-        commitAttachRef(nextEffect);
-      }
-    } else {
-      if (flags & Ref) {
-        commitAttachRef(nextEffect);
-      }
-    }
-
-    resetCurrentDebugFiberInDEV();
-    nextEffect = nextEffect.nextEffect;
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      logLayoutEffectsStopped();
-    }
-  }
-
-  if (enableSchedulingProfiler) {
-    markLayoutEffectsStopped();
-  }
-}
-
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
index 5026605672fc..bd097fea7654 100644
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -152,7 +152,7 @@ describe('ReactDOMTracing', () => {
           onInteractionScheduledWorkCompleted,
         ).toHaveBeenLastNotifiedOfInteraction(interaction);
 
-        if (gate(flags => flags.dfsEffectsRefactor)) {
+        if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
           expect(onRender).toHaveBeenCalledTimes(3);
         } else {
           // TODO: This is 4 instead of 3 because this update was scheduled at
@@ -310,7 +310,7 @@ describe('ReactDOMTracing', () => {
         expect(
           onInteractionScheduledWorkCompleted,
         ).toHaveBeenLastNotifiedOfInteraction(interaction);
-        if (gate(flags => flags.dfsEffectsRefactor)) {
+        if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
           expect(onRender).toHaveBeenCalledTimes(3);
         } else {
           // TODO: This is 4 instead of 3 because this update was scheduled at
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index eb0c69537df4..8387319511b5 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -368,7 +368,7 @@ describe('Profiler', () => {
 
         renderer.update(<App />);
 
-        if (gate(flags => flags.dfsEffectsRefactor)) {
+        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();
@@ -4383,7 +4383,7 @@ describe('Profiler', () => {
         // because the resolved suspended subtree doesn't contain any passive effects.
         // If <AsyncComponentWithCascadingWork> or its decendents had a passive effect,
         // onPostCommit would be called again.
-        if (gate(flags => flags.dfsEffectsRefactor)) {
+        if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
           expect(Scheduler).toFlushAndYield([]);
         } else {
           expect(Scheduler).toFlushAndYield(['onPostCommit']);
@@ -4874,7 +4874,7 @@ describe('Profiler', () => {
       });
 
       if (__DEV__) {
-        // @gate dfsEffectsRefactor
+        // @gate enableUseJSStackToTrackPassiveDurations
         // @gate enableDoubleInvokingEffects
         it('double invoking does not disconnect wrapped async work', () => {
           ReactFeatureFlags.enableDoubleInvokingEffects = true;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index f869620f0329..d7e82312dd2a 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -45,9 +45,10 @@ const environmentFlags = {
   // Use this for tests that are known to be broken.
   FIXME: false,
 
-  // Turn this flag back on (or delete) once the effect list is removed in favor
-  // of a depth-first traversal using `subtreeTags`.
-  dfsEffectsRefactor: false,
+  // Turn these flags back on (or delete) once the effect list is removed in
+  // favor of a depth-first traversal using `subtreeTags`.
+  dfsEffectsRefactor: __VARIANT__,
+  enableUseJSStackToTrackPassiveDurations: false,
 };
 
 function getTestFlags() {

From 95feb0e701a5ae20996e8cc6c4acd0f504d5985a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 15 Jan 2021 14:24:20 -0600
Subject: [PATCH 0178/1603] Convert mutation phase to depth-first traversal
 (#20596)

---
 .../src/ReactChildFiber.new.js                |  13 +-
 .../src/ReactFiberBeginWork.new.js            |  10 +-
 .../src/ReactFiberCommitWork.new.js           | 170 ++++++++++++++++++
 .../src/ReactFiberHydrationContext.new.js     |   5 +-
 .../src/ReactFiberWorkLoop.new.js             | 152 +---------------
 5 files changed, 180 insertions(+), 170 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 7163df34d856..83362b5e1541 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -282,22 +282,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     childToDelete.nextEffect = null;
     childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
-    let deletions = returnFiber.deletions;
+    const deletions = returnFiber.deletions;
     if (deletions === null) {
-      deletions = returnFiber.deletions = [childToDelete];
+      returnFiber.deletions = [childToDelete];
       returnFiber.flags |= ChildDeletion;
     } else {
       deletions.push(childToDelete);
     }
-    // Stash a reference to the return fiber's deletion array on each of the
-    // deleted children. This is really weird, but it's a temporary workaround
-    // while we're still using the effect list to traverse effect fibers. A
-    // better workaround would be to follow the `.return` pointer in the commit
-    // phase, but unfortunately we can't assume that `.return` points to the
-    // correct fiber, even in the commit phase, because `findDOMNode` might
-    // mutate it.
-    // TODO: Remove this line.
-    childToDelete.deletions = deletions;
   }
 
   function deleteRemainingChildren(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 52e6216d442e..9684efafc409 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2203,14 +2203,13 @@ function updateSuspensePrimaryChildren(
     currentFallbackChildFragment.flags =
       (currentFallbackChildFragment.flags & StaticMask) | Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
-    let deletions = workInProgress.deletions;
+    const deletions = workInProgress.deletions;
     if (deletions === null) {
-      deletions = workInProgress.deletions = [currentFallbackChildFragment];
+      workInProgress.deletions = [currentFallbackChildFragment];
       workInProgress.flags |= ChildDeletion;
     } else {
       deletions.push(currentFallbackChildFragment);
     }
-    currentFallbackChildFragment.deletions = deletions;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -3194,14 +3193,13 @@ function remountFiber(
     current.nextEffect = null;
     current.flags = (current.flags & StaticMask) | Deletion;
 
-    let deletions = returnFiber.deletions;
+    const deletions = returnFiber.deletions;
     if (deletions === null) {
-      deletions = returnFiber.deletions = [current];
+      returnFiber.deletions = [current];
       returnFiber.flags |= ChildDeletion;
     } else {
       deletions.push(current);
     }
-    current.deletions = deletions;
 
     newWorkInProgress.flags |= Placement;
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 4f77868463fc..35115140041c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -66,12 +66,16 @@ import {
   NoFlags,
   ContentReset,
   Placement,
+  PlacementAndUpdate,
   ChildDeletion,
   Snapshot,
   Update,
   Callback,
   Ref,
+  Hydrating,
+  HydratingAndUpdate,
   Passive,
+  MutationMask,
   PassiveMask,
   LayoutMask,
   PassiveUnmountPendingDev,
@@ -1841,6 +1845,172 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
+export function commitMutationEffects(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+  firstChild: Fiber,
+) {
+  nextEffect = firstChild;
+  commitMutationEffects_begin(root, renderPriorityLevel);
+}
+
+function commitMutationEffects_begin(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // 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 childToDelete = deletions[i];
+        if (__DEV__) {
+          invokeGuardedCallback(
+            null,
+            commitDeletion,
+            null,
+            root,
+            childToDelete,
+            renderPriorityLevel,
+          );
+          if (hasCaughtError()) {
+            const error = clearCaughtError();
+            captureCommitPhaseError(childToDelete, error);
+          }
+        } else {
+          try {
+            commitDeletion(root, childToDelete, renderPriorityLevel);
+          } catch (error) {
+            captureCommitPhaseError(childToDelete, error);
+          }
+        }
+      }
+    }
+
+    const child = fiber.child;
+    if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitMutationEffects_complete(root, renderPriorityLevel);
+    }
+  }
+}
+
+function commitMutationEffects_complete(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitMutationEffectsOnFiber,
+        null,
+        fiber,
+        root,
+        renderPriorityLevel,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
+      } catch (error) {
+        captureCommitPhaseError(fiber, error);
+      }
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  const flags = finishedWork.flags;
+
+  if (flags & ContentReset) {
+    commitResetTextContent(finishedWork);
+  }
+
+  if (flags & Ref) {
+    const current = finishedWork.alternate;
+    if (current !== null) {
+      commitDetachRef(current);
+    }
+    if (enableScopeAPI) {
+      // TODO: This is a temporary solution that allowed us to transition away
+      // from React Flare on www.
+      if (finishedWork.tag === ScopeComponent) {
+        commitAttachRef(finishedWork);
+      }
+    }
+  }
+
+  // The following switch statement is only concerned about placement,
+  // updates, and deletions. To avoid needing to add a case for every possible
+  // bitmap value, we remove the secondary effects from the effect tag and
+  // switch on that value.
+  const primaryFlags = flags & (Placement | Update | Hydrating);
+  outer: switch (primaryFlags) {
+    case Placement: {
+      commitPlacement(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;
+      break;
+    }
+    case PlacementAndUpdate: {
+      // Placement
+      commitPlacement(finishedWork);
+      // Clear the "placement" from effect tag so that we know that this is
+      // inserted, before any life-cycles like componentDidMount gets called.
+      finishedWork.flags &= ~Placement;
+
+      // Update
+      const current = finishedWork.alternate;
+      commitWork(current, finishedWork);
+      break;
+    }
+    case Hydrating: {
+      finishedWork.flags &= ~Hydrating;
+      break;
+    }
+    case HydratingAndUpdate: {
+      finishedWork.flags &= ~Hydrating;
+
+      // Update
+      const current = finishedWork.alternate;
+      commitWork(current, finishedWork);
+      break;
+    }
+    case Update: {
+      const current = finishedWork.alternate;
+      commitWork(current, finishedWork);
+      break;
+    }
+  }
+}
+
 export function commitLayoutEffects(
   finishedWork: Fiber,
   root: FiberRoot,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 37be28be6628..f416c33b21f1 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -144,14 +144,13 @@ function deleteHydratableInstance(
     returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
 
-  let deletions = returnFiber.deletions;
+  const deletions = returnFiber.deletions;
   if (deletions === null) {
-    deletions = returnFiber.deletions = [childToDelete];
+    returnFiber.deletions = [childToDelete];
     returnFiber.flags |= ChildDeletion;
   } else {
     deletions.push(childToDelete);
   }
-  childToDelete.deletions = deletions;
 }
 
 function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 37f513f29d51..4eafe4258504 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -31,7 +31,6 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   enableSchedulingProfiler,
-  enableScopeAPI,
   disableSchedulerTimeoutInWorkLoop,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -116,7 +115,6 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  ScopeComponent,
   Profiler,
 } from './ReactWorkTags';
 import {LegacyRoot} from './ReactRootTags';
@@ -124,19 +122,14 @@ import {
   NoFlags,
   PerformedWork,
   Placement,
-  Update,
-  PlacementAndUpdate,
   Deletion,
   ChildDeletion,
-  Ref,
-  ContentReset,
   Snapshot,
   Passive,
   PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
-  HydratingAndUpdate,
   StaticMask,
 } from './ReactFiberFlags';
 import {
@@ -190,13 +183,8 @@ import {
 import {
   commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
   commitLayoutEffects,
-  commitPlacement,
-  commitWork,
-  commitDeletion,
-  commitDetachRef,
-  commitAttachRef,
+  commitMutationEffects,
   commitPassiveEffectDurations,
-  commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
@@ -2031,32 +2019,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     // The next phase is the mutation phase, where we mutate the host tree.
-    nextEffect = firstEffect;
-    do {
-      if (__DEV__) {
-        invokeGuardedCallback(
-          null,
-          commitMutationEffects,
-          null,
-          root,
-          renderPriorityLevel,
-        );
-        if (hasCaughtError()) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      } else {
-        try {
-          commitMutationEffects(root, renderPriorityLevel);
-        } catch (error) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      }
-    } while (nextEffect !== null);
+    commitMutationEffects(root, renderPriorityLevel, finishedWork);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -2304,117 +2267,6 @@ function commitBeforeMutationEffects() {
   }
 }
 
-function commitMutationEffects(
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
-  // TODO: Should probably move the bulk of this function to commitWork.
-  while (nextEffect !== null) {
-    setCurrentDebugFiberInDEV(nextEffect);
-
-    const flags = nextEffect.flags;
-
-    if (flags & ContentReset) {
-      commitResetTextContent(nextEffect);
-    }
-
-    if (flags & Ref) {
-      const current = nextEffect.alternate;
-      if (current !== null) {
-        commitDetachRef(current);
-      }
-      if (enableScopeAPI) {
-        // TODO: This is a temporary solution that allowed us to transition away
-        // from React Flare on www.
-        if (nextEffect.tag === ScopeComponent) {
-          commitAttachRef(nextEffect);
-        }
-      }
-    }
-
-    // The following switch statement is only concerned about placement,
-    // updates, and deletions. To avoid needing to add a case for every possible
-    // bitmap value, we remove the secondary effects from the effect tag and
-    // switch on that value.
-    const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
-    outer: switch (primaryFlags) {
-      case Placement: {
-        commitPlacement(nextEffect);
-        // 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.
-        nextEffect.flags &= ~Placement;
-        break;
-      }
-      case PlacementAndUpdate: {
-        // Placement
-        commitPlacement(nextEffect);
-        // Clear the "placement" from effect tag so that we know that this is
-        // inserted, before any life-cycles like componentDidMount gets called.
-        nextEffect.flags &= ~Placement;
-
-        // Update
-        const current = nextEffect.alternate;
-        commitWork(current, nextEffect);
-        break;
-      }
-      case Hydrating: {
-        nextEffect.flags &= ~Hydrating;
-        break;
-      }
-      case HydratingAndUpdate: {
-        nextEffect.flags &= ~Hydrating;
-
-        // Update
-        const current = nextEffect.alternate;
-        commitWork(current, nextEffect);
-        break;
-      }
-      case Update: {
-        const current = nextEffect.alternate;
-        commitWork(current, nextEffect);
-        break;
-      }
-      case Deletion: {
-        // Reached a deletion effect. Instead of commit this effect like we
-        // normally do, we're going to use the `deletions` array of the parent.
-        // However, because the effect list is sorted in depth-first order, we
-        // can't wait until we reach the parent node, because the child effects
-        // will have run in the meantime.
-        //
-        // So instead, we use a trick where the first time we hit a deletion
-        // effect, we commit all the deletion effects that belong to that parent.
-        //
-        // This is an incremental step away from using the effect list and
-        // toward a DFS + subtreeFlags traversal.
-        //
-        // A reference to the deletion array of the parent is also stored on
-        // each of the deletions. This is really weird. It would be better to
-        // follow the `.return` pointer, but unfortunately we can't assume that
-        // `.return` points to the correct fiber, even in the commit phase,
-        // because `findDOMNode` might mutate it.
-        const deletedChild = nextEffect;
-        const deletions = deletedChild.deletions;
-        if (deletions !== null) {
-          for (let i = 0; i < deletions.length; i++) {
-            const deletion = deletions[i];
-            // Clear the deletion effect so that we don't delete this node more
-            // than once.
-            deletion.flags &= ~Deletion;
-            deletion.deletions = null;
-            commitDeletion(root, deletion, renderPriorityLevel);
-          }
-        }
-        break;
-      }
-    }
-
-    resetCurrentDebugFiberInDEV();
-    nextEffect = nextEffect.nextEffect;
-  }
-}
-
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {

From 9a2150719b971adf078eca5cecbb18c146545cbd Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 18 Jan 2021 20:56:17 +0100
Subject: [PATCH 0179/1603] Fix prod build in ci/codesandbox (#20606)

---
 .codesandbox/ci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 6b3a763cf083..6f276d052e4a 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/tracing",
+  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/unstable_no_dom,scheduler/tracing",
   "publishDirectory": {
     "react": "build/node_modules/react",
     "react-dom": "build/node_modules/react-dom",

From af16f755dc7e0d6e2b4bf79b86c434f4ce0497fe Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 19 Jan 2021 06:51:32 -0800
Subject: [PATCH 0180/1603] Update DevTools to use getCacheForType API (#20548)

DevTools was built with a fork of an early idea for how Suspense cache might work. This idea is incompatible with newer APIs like `useTransition` which unfortunately prevented me from making certain UX improvements. This PR swaps out the primary usage of this cache (there are a few) in favor of the newer `unstable_getCacheForType` and `unstable_useCacheRefresh` APIs. We can go back and update the others in follow up PRs.

### Messaging changes

I've refactored the way the frontend loads component props/state/etc to hopefully make it better match the Suspense+cache model. Doing this gave up some of the small optimizations I'd added but hopefully the actual performance impact of that is minor and the overall ergonomic improvements of working with the cache API make this worth it.

The backend no longer remembers inspected paths. Instead, the frontend sends them every time and the backend sends a response with those paths. I've also added a new "force" parameter that the frontend can use to tell the backend to send a response even if the component hasn't rendered since the last time it asked. (This is used to get data for newly inspected paths.)

_Initial inspection..._
```
front |                                                      | back
      | -- "inspect" (id:1, paths:[], force:true) ---------> |
      | <------------------------ "inspected" (full-data) -- |
```
_1 second passes with no updates..._
```
      | -- "inspect" (id:1, paths:[], force:false) --------> |
      | <------------------------ "inspected" (no-change) -- |
```
_User clicks to expand a path, aka hydrate..._
```
      | -- "inspect" (id:1, paths:['foo'], force:true) ----> |
      | <------------------------ "inspected" (full-data) -- |
```
_1 second passes during which there is an update..._
```
      | -- "inspect" (id:1, paths:['foo'], force:false) ---> |
      | <----------------- "inspectedElement" (full-data) -- |
```

### Clear errors/warnings transition
Previously this meant there would be a delay after clicking the "clear" button. The UX after this change is much improved.

### Hydrating paths transition
I also added a transition to hydration (expanding "dehyrated" paths).

### Better error boundaries
I also added a lower-level error boundary in case the new suspense operation ever failed. It provides a better "retry" mechanism (select a new element) so DevTools doesn't become entirely useful. Here I'm intentionally causing an error every time I select an element.

### Improved snapshot tests
I also migrated several of the existing snapshot tests to use inline snapshots and added a new serializer for dehydrated props. Inline snapshots are easier to verify and maintain and the new serializer means dehydrated props will be formatted in a way that makes sense rather than being empty (in external snapshots) or super verbose (default inline snapshot format).
---
 package.json                                  |   2 +-
 .../inspectedElementContext-test.js.snap      | 670 -------------
 .../__tests__/dehydratedValueSerializer.js    |  39 +
 ...ntext-test.js => inspectedElement-test.js} | 920 ++++++++++++------
 .../__tests__/inspectedElementSerializer.js   |  23 +-
 .../__snapshots__/inspectElement-test.js.snap | 303 ------
 .../__tests__/legacy/inspectElement-test.js   | 315 ++++--
 .../src/__tests__/store-test.js               |  26 +-
 .../src/__tests__/treeContext-test.js         |  14 +-
 .../src/backend/agent.js                      |  17 +-
 .../src/backend/legacy/renderer.js            |  33 +-
 .../src/backend/renderer.js                   | 148 +--
 .../src/backend/types.js                      |  16 +-
 .../react-devtools-shared/src/backendAPI.js   | 283 ++++++
 packages/react-devtools-shared/src/bridge.js  |   6 +-
 .../src/devtools/cache.js                     |   2 +
 .../src/devtools/store.js                     |  38 +-
 .../devtools/views/Components/Components.js   |  53 +-
 .../views/Components/ExpandCollapseToggle.js  |   3 +
 .../views/Components/InspectedElement.js      |  16 +-
 .../Components/InspectedElementContext.js     | 454 ++-------
 .../Components/InspectedElementContextTree.js |  10 +-
 .../InspectedElementErrorBoundary.css         |  21 +
 .../InspectedElementErrorBoundary.js          |  93 ++
 .../InspectedElementErrorsAndWarningsTree.js  |  80 +-
 .../Components/InspectedElementHooksTree.js   |  34 +-
 .../Components/InspectedElementPropsTree.js   |   8 +-
 .../Components/InspectedElementStateTree.js   |   8 +-
 .../views/Components/InspectedElementView.js  | 107 +-
 .../devtools/views/Components/KeyValue.css    |   4 +
 .../src/devtools/views/Components/KeyValue.js |  64 +-
 .../views/Components/LoadingAnimation.css     |   5 +
 .../views/Components/LoadingAnimation.js      |  55 ++
 .../src/devtools/views/Components/Tree.js     |   8 +-
 .../src/devtools/views/ErrorBoundary.js       |  19 +-
 .../src/inspectedElementCache.js              | 220 +++++
 .../forks/ReactFeatureFlags.test-renderer.js  |   2 +-
 scripts/jest/config.build-devtools.js         |   3 +
 scripts/jest/preprocessor.js                  |   4 +
 39 files changed, 2054 insertions(+), 2072 deletions(-)
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
 create mode 100644 packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
 rename packages/react-devtools-shared/src/__tests__/{inspectedElementContext-test.js => inspectedElement-test.js} (75%)
 delete mode 100644 packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
 create mode 100644 packages/react-devtools-shared/src/backendAPI.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
 create mode 100644 packages/react-devtools-shared/src/inspectedElementCache.js

diff --git a/package.json b/package.json
index deb7b24882da..bca998508f1d 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build-combined react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
deleted file mode 100644
index 8270d0c5b5f1..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/inspectedElementContext-test.js.snap
+++ /dev/null
@@ -1,670 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InspectedElementContext should dehydrate complex nested values when requested: 1: Initially inspect element 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "set_of_sets": {
-      "0": {},
-      "1": {}
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should dehydrate complex nested values when requested: 2: Inspect props.set_of_sets.0 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "set_of_sets": {
-      "0": {
-        "0": 1,
-        "1": 2,
-        "2": 3
-      },
-      "1": {}
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should display complex values of useDebugValue: DisplayedComplexValue 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": null,
-      "isStateEditable": false,
-      "name": "DebuggableHook",
-      "value": {
-        "foo": 2
-      },
-      "subHooks": [
-        {
-          "id": 0,
-          "isStateEditable": true,
-          "name": "State",
-          "value": 1,
-          "subHooks": []
-        }
-      ]
-    }
-  ],
-  "props": {},
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 1: Initially inspect element 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {},
-      "c": {}
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 2: Inspect props.nestedObject.a 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {
-        "value": 1,
-        "b": {
-          "value": 1
-        }
-      },
-      "c": {}
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 3: Inspect props.nestedObject.c 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {
-        "value": 1,
-        "b": {
-          "value": 1
-        }
-      },
-      "c": {
-        "value": 1,
-        "d": {
-          "value": 1,
-          "e": {}
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should include updates for nested values that were previously hydrated: 4: update inspected element 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {
-        "value": 2,
-        "b": {
-          "value": 2
-        }
-      },
-      "c": {
-        "value": 2,
-        "d": {
-          "value": 2,
-          "e": {}
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should inspect hooks for components that only use context: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": null,
-      "isStateEditable": false,
-      "name": "Context",
-      "value": true,
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "a": 1,
-    "b": "abc"
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should inspect the currently selected element: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": 1,
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "a": 1,
-    "b": "abc"
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not consume iterables while inspecting: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "prop": {}
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": {
-        "foo": {}
-      },
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "nestedObject": {
-      "a": {}
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": {
-        "foo": {}
-      },
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": {}
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": {
-        "foo": {}
-      },
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": [
-            {
-              "d": {}
-            }
-          ]
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": {
-        "foo": {}
-      },
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": [
-            {
-              "d": {
-                "e": {}
-              }
-            }
-          ]
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 5: Inspect hooks.0.value 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": {
-        "foo": {
-          "bar": {}
-        }
-      },
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": [
-            {
-              "d": {
-                "e": {}
-              }
-            }
-          ]
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 6: Inspect hooks.0.value.foo.bar 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": {
-        "foo": {
-          "bar": {
-            "baz": "hi"
-          }
-        }
-      },
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": [
-            {
-              "d": {
-                "e": {}
-              }
-            }
-          ]
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 1: initial render 1`] = `
-{
-  "id": 3,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": 0,
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "a": 1,
-    "b": "abc"
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not re-render a function with hooks if it did not update since it was last inspected: 2: updated state 1`] = `
-{
-  "id": 3,
-  "owners": null,
-  "context": null,
-  "hooks": [
-    {
-      "id": 0,
-      "isStateEditable": true,
-      "name": "State",
-      "value": 0,
-      "subHooks": []
-    }
-  ],
-  "props": {
-    "a": 2,
-    "b": "def"
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not tear if hydration is requested after an update: 1: Initially inspect element 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "value": 1,
-      "a": {}
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should not tear if hydration is requested after an update: 2: Inspect props.nestedObject.a 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "value": 2,
-      "a": {
-        "value": 2,
-        "b": {
-          "value": 2
-        }
-      }
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should poll for updates for the currently selected element: 1: initial render 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "a": 1,
-    "b": "abc"
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should poll for updates for the currently selected element: 2: updated state 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "a": 2,
-    "b": "def"
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should support complex data types: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "anonymous_fn": {},
-    "array_buffer": {},
-    "array_of_arrays": [
-      {}
-    ],
-    "big_int": {},
-    "bound_fn": {},
-    "data_view": {},
-    "date": {},
-    "fn": {},
-    "html_element": {},
-    "immutable": {
-      "0": {},
-      "1": {},
-      "2": {}
-    },
-    "map": {
-      "0": {},
-      "1": {}
-    },
-    "map_of_maps": {
-      "0": {},
-      "1": {}
-    },
-    "object_of_objects": {
-      "inner": {}
-    },
-    "object_with_symbol": {
-      "Symbol(name)": "hello"
-    },
-    "proxy": {},
-    "react_element": {},
-    "regexp": {},
-    "set": {
-      "0": "abc",
-      "1": 123
-    },
-    "set_of_sets": {
-      "0": {},
-      "1": {}
-    },
-    "symbol": {},
-    "typed_array": {
-      "0": 100,
-      "1": -100,
-      "2": 0
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "data": {
-      "_number": 42,
-      "number": 42
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should support objects with no prototype: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "object": {
-      "string": "abc",
-      "number": 123,
-      "boolean": true
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should support objects with overridden hasOwnProperty: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "object": {
-      "name": "blah",
-      "hasOwnProperty": true
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should support objects with with inherited keys: 1: Inspected element 2 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "object": {
-      "123": 3,
-      "enumerableString": 2,
-      "Symbol(enumerableSymbol)": 3,
-      "enumerableStringBase": 1,
-      "Symbol(enumerableSymbolBase)": 1
-    }
-  },
-  "state": null
-}
-`;
-
-exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
-{
-  "id": 2,
-  "owners": null,
-  "context": null,
-  "hooks": null,
-  "props": {
-    "boolean_false": false,
-    "boolean_true": true,
-    "infinity": null,
-    "integer_zero": 0,
-    "integer_one": 1,
-    "float": 1.23,
-    "string": "abc",
-    "string_empty": "",
-    "nan": null,
-    "value_null": null
-  },
-  "state": null
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js b/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
new file mode 100644
index 000000000000..d8eac57df035
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// test() is part of Jest's serializer API
+export function test(maybeDehydratedValue) {
+  const {meta} = require('react-devtools-shared/src/hydration');
+  return (
+    maybeDehydratedValue !== null &&
+    typeof maybeDehydratedValue === 'object' &&
+    maybeDehydratedValue.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__/inspectedElementContext-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
similarity index 75%
rename from packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
rename to packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index c60560302f55..6a596a8b4a62 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -8,16 +8,12 @@
  */
 
 import typeof ReactTestRenderer from 'react-test-renderer';
-import type {
-  CopyInspectedElementPath,
-  GetInspectedElementPath,
-  StoreAsGlobal,
-} from 'react-devtools-shared/src/devtools/views/Components/InspectedElementContext';
+import {withErrorsOrWarningsIgnored} 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';
-import {withErrorsOrWarningsIgnored} from 'react-devtools-shared/src/__tests__/utils';
 
-describe('InspectedElementContext', () => {
+describe('InspectedElement', () => {
   let React;
   let ReactDOM;
   let PropTypes;
@@ -81,14 +77,26 @@ describe('InspectedElementContext', () => {
         <TreeContextController
           defaultSelectedElementID={defaultSelectedElementID}
           defaultSelectedElementIndex={defaultSelectedElementIndex}>
-          <InspectedElementContextController>
-            {children}
-          </InspectedElementContextController>
+          <React.Suspense fallback="Loading...">
+            <InspectedElementContextController>
+              {children}
+            </InspectedElementContextController>
+          </React.Suspense>
         </TreeContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
 
+  function useInspectedElement(id: number) {
+    const {inspectedElement} = React.useContext(InspectedElementContext);
+    return inspectedElement;
+  }
+
+  function useInspectElementPath(id: number) {
+    const {inspectPaths} = React.useContext(InspectedElementContext);
+    return inspectPaths;
+  }
+
   it('should inspect the currently selected element', async done => {
     const Example = () => {
       const [count] = React.useState(1);
@@ -105,9 +113,29 @@ describe('InspectedElementContext', () => {
     let didFinish = false;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      const inspectedElement = getInspectedElement(id);
-      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+      const inspectedElement = useInspectedElement(id);
+      expect(inspectedElement).toMatchInlineSnapshot(`
+        Object {
+          "context": null,
+          "events": undefined,
+          "hooks": Array [
+            Object {
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": Array [],
+              "value": 1,
+            },
+          ],
+          "id": 2,
+          "owners": null,
+          "props": Object {
+            "a": 1,
+            "b": "abc",
+          },
+          "state": null,
+        }
+      `);
       didFinish = true;
       return null;
     }
@@ -211,8 +239,7 @@ describe('InspectedElementContext', () => {
     ];
 
     function Suspender({target, shouldHaveLegacyContext}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      const inspectedElement = getInspectedElement(target);
+      const inspectedElement = useInspectedElement(target);
 
       expect(inspectedElement.context).not.toBe(null);
       expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);
@@ -257,8 +284,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(id);
+      inspectedElement = useInspectedElement(id);
       return null;
     }
 
@@ -273,14 +299,28 @@ describe('InspectedElementContext', () => {
         </Contexts>,
       );
     }, false);
-    expect(inspectedElement).toMatchSnapshot('1: initial render');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "a": 1,
+        "b": "abc",
+      }
+    `);
 
     await utils.actAsync(
       () => ReactDOM.render(<Example a={2} b="def" />, container),
       false,
     );
 
-    inspectedElement = null;
+    // 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();
+
     await utils.actAsync(
       () =>
         renderer.update(
@@ -294,7 +334,12 @@ describe('InspectedElementContext', () => {
         ),
       false,
     );
-    expect(inspectedElement).toMatchSnapshot('2: updated state');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "a": 2,
+        "b": "def",
+      }
+    `);
 
     done();
   });
@@ -305,6 +350,7 @@ describe('InspectedElementContext', () => {
     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;
     });
@@ -324,8 +370,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(target);
+      inspectedElement = useInspectedElement(target);
       return null;
     }
 
@@ -346,7 +391,12 @@ describe('InspectedElementContext', () => {
       false,
     );
     expect(targetRenderCount).toBe(1);
-    expect(inspectedElement).toMatchSnapshot('1: initial render');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "a": 1,
+        "b": "abc",
+      }
+    `);
 
     const initialInspectedElement = inspectedElement;
 
@@ -369,6 +419,7 @@ describe('InspectedElementContext', () => {
     expect(inspectedElement).toEqual(initialInspectedElement);
 
     targetRenderCount = 0;
+    inspectedElement = null;
 
     await utils.actAsync(
       () =>
@@ -382,8 +433,26 @@ describe('InspectedElementContext', () => {
     );
 
     // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
+    await utils.actAsync(
+      () =>
+        renderer.update(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={1}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
     expect(targetRenderCount).toBe(2);
-    expect(inspectedElement).toMatchSnapshot('2: updated state');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "a": 2,
+        "b": "def",
+      }
+    `);
 
     done();
   });
@@ -426,8 +495,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(target);
+      inspectedElement = useInspectedElement(target);
       return null;
     }
 
@@ -482,8 +550,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(id);
+      inspectedElement = useInspectedElement(id);
       return null;
     }
 
@@ -501,9 +568,6 @@ describe('InspectedElementContext', () => {
       false,
     );
 
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
-
     const {props} = (inspectedElement: any);
     expect(props.boolean_false).toBe(false);
     expect(props.boolean_true).toBe(true);
@@ -606,8 +670,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(id);
+      inspectedElement = useInspectedElement(id);
       return null;
     }
 
@@ -625,9 +688,6 @@ describe('InspectedElementContext', () => {
       false,
     );
 
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
-
     const {
       anonymous_fn,
       array_buffer,
@@ -820,8 +880,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(id);
+      inspectedElement = useInspectedElement(id);
       return null;
     }
 
@@ -839,9 +898,6 @@ describe('InspectedElementContext', () => {
       false,
     );
 
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
-
     const {prop} = (inspectedElement: any).props;
     expect(prop[meta.inspectable]).toBe(false);
     expect(prop[meta.name]).toBe('Generator');
@@ -870,8 +926,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(id);
+      inspectedElement = useInspectedElement(id);
       return null;
     }
 
@@ -889,13 +944,15 @@ describe('InspectedElementContext', () => {
       false,
     );
 
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
-    expect(inspectedElement.props.object).toEqual({
-      boolean: true,
-      number: 123,
-      string: 'abc',
-    });
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "object": Object {
+          "boolean": true,
+          "number": 123,
+          "string": "abc",
+        },
+      }
+    `);
 
     done();
   });
@@ -918,8 +975,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(id);
+      inspectedElement = useInspectedElement(id);
       return null;
     }
 
@@ -937,12 +993,10 @@ describe('InspectedElementContext', () => {
       false,
     );
 
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
-    expect(inspectedElement.props.object).toEqual({
-      name: 'blah',
-      hasOwnProperty: true,
-    });
+    // 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);
 
     done();
   });
@@ -977,9 +1031,15 @@ describe('InspectedElementContext', () => {
     let didFinish = false;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      const inspectedElement = getInspectedElement(id);
-      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+      const inspectedElement = useInspectedElement(id);
+      expect(inspectedElement.props).toMatchInlineSnapshot(`
+        Object {
+          "data": Object {
+            "_number": 42,
+            "number": 42,
+          },
+        }
+      `);
       didFinish = true;
       return null;
     }
@@ -1075,8 +1135,7 @@ describe('InspectedElementContext', () => {
     let inspectedElement = null;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      inspectedElement = getInspectedElement(id);
+      inspectedElement = useInspectedElement(id);
       return null;
     }
 
@@ -1094,15 +1153,17 @@ describe('InspectedElementContext', () => {
       false,
     );
 
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
-    expect(inspectedElement.props.object).toEqual({
-      123: 3,
-      'Symbol(enumerableSymbol)': 3,
-      'Symbol(enumerableSymbolBase)': 1,
-      enumerableString: 2,
-      enumerableStringBase: 1,
-    });
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "object": Object {
+          "123": 3,
+          "Symbol(enumerableSymbol)": 3,
+          "Symbol(enumerableSymbolBase)": 1,
+          "enumerableString": 2,
+          "enumerableStringBase": 1,
+        },
+      }
+    `);
 
     done();
   });
@@ -1144,96 +1205,155 @@ describe('InspectedElementContext', () => {
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
-    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
+    let inspectElementPath = null;
 
-    function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      getInspectedElementPath = context.getInspectedElementPath;
-      inspectedElement = context.getInspectedElement(target);
+    function Suspender({path, target}) {
+      inspectedElement = useInspectedElement(id);
+      inspectElementPath = useInspectElementPath(id);
       return null;
     }
 
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(getInspectedElementPath).not.toBeNull();
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+    const renderer = TestRenderer.create(null);
 
-    inspectedElement = null;
-    TestUtilsAct(() => {
-      TestRendererAct(() => {
-        getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
-        jest.runOnlyPendingTimers();
-      });
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+    async function getInspectedElement() {
+      await utils.actAsync(
+        () =>
+          renderer.update(
+            <Contexts
+              defaultSelectedElementID={id}
+              defaultSelectedElementIndex={0}>
+              <React.Suspense fallback={null}>
+                <Suspender target={id} />
+              </React.Suspense>
+            </Contexts>,
+          ),
+        false,
+      );
+    }
 
-    inspectedElement = null;
-    TestUtilsAct(() => {
-      TestRendererAct(() => {
-        getInspectedElementPath(id, ['props', 'nestedObject', 'a', 'b', 'c']);
-        jest.runOnlyPendingTimers();
-      });
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(
-      '3: Inspect props.nestedObject.a.b.c',
-    );
+    // Render once to get a handle on inspectElementPath()
+    await getInspectedElement();
 
-    inspectedElement = null;
-    TestUtilsAct(() => {
-      TestRendererAct(() => {
-        getInspectedElementPath(id, [
-          'props',
-          'nestedObject',
-          'a',
-          'b',
-          'c',
-          0,
-          'd',
-        ]);
-        jest.runOnlyPendingTimers();
+    async function loadPath(path) {
+      TestUtilsAct(() => {
+        TestRendererAct(() => {
+          inspectElementPath(path);
+          jest.runOnlyPendingTimers();
+        });
       });
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(
-      '4: Inspect props.nestedObject.a.b.c.0.d',
-    );
+      await getInspectedElement();
+    }
 
-    inspectedElement = null;
-    TestUtilsAct(() => {
-      TestRendererAct(() => {
-        getInspectedElementPath(id, ['hooks', 0, 'value']);
-        jest.runOnlyPendingTimers();
-      });
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('5: Inspect hooks.0.value');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}},
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "c": Dehydrated {
+                "preview_short": Array(1),
+                "preview_long": [{…}],
+              },
+            },
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a', 'b', 'c']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "c": Array [
+                Object {
+                  "d": Dehydrated {
+                    "preview_short": {…},
+                    "preview_long": {e: {…}},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'a', 'b', 'c', 0, 'd']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "c": Array [
+                Object {
+                  "d": Object {
+                    "e": Object {},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
 
-    inspectedElement = null;
-    TestUtilsAct(() => {
-      TestRendererAct(() => {
-        getInspectedElementPath(id, ['hooks', 0, 'value', 'foo', 'bar']);
-        jest.runOnlyPendingTimers();
-      });
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot(
-      '6: Inspect hooks.0.value.foo.bar',
-    );
+    await loadPath(['hooks', 0, 'value']);
+
+    expect(inspectedElement.hooks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": Array [],
+          "value": Object {
+            "foo": Object {
+              "bar": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {baz: "hi"},
+              },
+            },
+          },
+        },
+      ]
+    `);
+
+    await loadPath(['hooks', 0, 'value', 'foo', 'bar']);
+
+    expect(inspectedElement.hooks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "id": 0,
+          "isStateEditable": true,
+          "name": "State",
+          "subHooks": Array [],
+          "value": Object {
+            "foo": Object {
+              "bar": Object {
+                "baz": "hi",
+              },
+            },
+          },
+        },
+      ]
+    `);
 
     done();
   });
@@ -1253,42 +1373,79 @@ describe('InspectedElementContext', () => {
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
-    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
+    let inspectElementPath = null;
 
-    function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      getInspectedElementPath = context.getInspectedElementPath;
-      inspectedElement = context.getInspectedElement(target);
+    function Suspender({path, target}) {
+      inspectedElement = useInspectedElement(id);
+      inspectElementPath = useInspectElementPath(id);
       return null;
     }
 
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(getInspectedElementPath).not.toBeNull();
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+    const renderer = TestRenderer.create(null);
 
-    inspectedElement = null;
-    TestUtilsAct(() => {
-      TestRendererAct(() => {
-        getInspectedElementPath(id, ['props', 'set_of_sets', 0]);
-        jest.runOnlyPendingTimers();
+    async function getInspectedElement() {
+      await utils.actAsync(
+        () =>
+          renderer.update(
+            <Contexts
+              defaultSelectedElementID={id}
+              defaultSelectedElementIndex={0}>
+              <React.Suspense fallback={null}>
+                <Suspender target={id} />
+              </React.Suspense>
+            </Contexts>,
+          ),
+        false,
+      );
+    }
+
+    // Render once to get a handle on inspectElementPath()
+    await getInspectedElement();
+
+    async function loadPath(path) {
+      TestUtilsAct(() => {
+        TestRendererAct(() => {
+          inspectElementPath(path);
+          jest.runOnlyPendingTimers();
+        });
       });
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('2: Inspect props.set_of_sets.0');
+      await getInspectedElement();
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "set_of_sets": Object {
+          "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(`
+      Object {
+        "set_of_sets": Object {
+          "0": Object {
+            "0": 1,
+            "1": 2,
+            "2": 3,
+          },
+          "1": Object {
+            "0": "a",
+            "1": "b",
+            "2": "c",
+          },
+        },
+      }
+    `);
 
     done();
   });
@@ -1324,48 +1481,107 @@ describe('InspectedElementContext', () => {
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
-    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
+    let inspectElementPath = null;
 
-    function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      getInspectedElementPath = context.getInspectedElementPath;
-      inspectedElement = context.getInspectedElement(id);
+    function Suspender({path, target}) {
+      inspectedElement = useInspectedElement(id);
+      inspectElementPath = useInspectElementPath(id);
       return null;
     }
 
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(getInspectedElementPath).not.toBeNull();
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+    const renderer = TestRenderer.create(null);
 
-    inspectedElement = null;
-    TestRendererAct(() => {
-      getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
-      jest.runOnlyPendingTimers();
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+    async function getInspectedElement() {
+      await utils.actAsync(
+        () =>
+          renderer.update(
+            <Contexts
+              defaultSelectedElementID={id}
+              defaultSelectedElementIndex={0}>
+              <React.Suspense fallback={null}>
+                <Suspender target={id} />
+              </React.Suspense>
+            </Contexts>,
+          ),
+        false,
+      );
+    }
 
-    inspectedElement = null;
-    TestRendererAct(() => {
-      getInspectedElementPath(id, ['props', 'nestedObject', 'c']);
-      jest.runOnlyPendingTimers();
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('3: Inspect props.nestedObject.c');
+    // Render once to get a handle on inspectElementPath()
+    await getInspectedElement();
+
+    async function loadPath(path) {
+      TestUtilsAct(() => {
+        TestRendererAct(() => {
+          inspectElementPath(path);
+          jest.runOnlyPendingTimers();
+        });
+      });
+      await getInspectedElement();
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "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(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "value": 1,
+            },
+            "value": 1,
+          },
+          "c": Object {
+            "d": Dehydrated {
+              "preview_short": {…},
+              "preview_long": {e: {…}, value: 1},
+            },
+            "value": 1,
+          },
+        },
+      }
+    `);
+
+    await loadPath(['props', 'nestedObject', 'c']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "value": 1,
+            },
+            "value": 1,
+          },
+          "c": Object {
+            "d": Object {
+              "e": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {value: 1},
+              },
+              "value": 1,
+            },
+            "value": 1,
+          },
+        },
+      }
+    `);
 
     TestRendererAct(() => {
       TestUtilsAct(() => {
@@ -1394,12 +1610,33 @@ describe('InspectedElementContext', () => {
       });
     });
 
-    TestRendererAct(() => {
-      inspectedElement = null;
-      jest.advanceTimersByTime(1000);
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('4: update inspected element');
+    // Wait for pending poll-for-update and then update inspected element data.
+    jest.runOnlyPendingTimers();
+    await Promise.resolve();
+    await getInspectedElement();
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "value": 2,
+            },
+            "value": 2,
+          },
+          "c": Object {
+            "d": Object {
+              "e": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {value: 2},
+              },
+              "value": 2,
+            },
+            "value": 2,
+          },
+        },
+      }
+    `);
 
     done();
   });
@@ -1427,32 +1664,57 @@ describe('InspectedElementContext', () => {
 
     const id = ((store.getElementIDAtIndex(0): any): number);
 
-    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
+    let inspectElementPath = null;
 
-    function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      getInspectedElementPath = context.getInspectedElementPath;
-      inspectedElement = context.getInspectedElement(id);
+    function Suspender({path, target}) {
+      inspectedElement = useInspectedElement(id);
+      inspectElementPath = useInspectElementPath(id);
       return null;
     }
 
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(getInspectedElementPath).not.toBeNull();
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
+    const renderer = TestRenderer.create(null);
+
+    async function getInspectedElement() {
+      await utils.actAsync(
+        () =>
+          renderer.update(
+            <Contexts
+              defaultSelectedElementID={id}
+              defaultSelectedElementIndex={0}>
+              <React.Suspense fallback={null}>
+                <Suspender target={id} />
+              </React.Suspense>
+            </Contexts>,
+          ),
+        false,
+      );
+    }
+
+    // Render once to get a handle on inspectElementPath()
+    await getInspectedElement();
+
+    async function loadPath(path) {
+      TestUtilsAct(() => {
+        TestRendererAct(() => {
+          inspectElementPath(path);
+          jest.runOnlyPendingTimers();
+        });
+      });
+      await getInspectedElement();
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}, value: 1},
+          },
+          "value": 1,
+        },
+      }
+    `);
 
     TestUtilsAct(() => {
       ReactDOM.render(
@@ -1471,16 +1733,21 @@ describe('InspectedElementContext', () => {
       );
     });
 
-    inspectedElement = null;
+    await loadPath(['props', 'nestedObject', 'a']);
 
-    TestRendererAct(() => {
-      TestUtilsAct(() => {
-        getInspectedElementPath(id, ['props', 'nestedObject', 'a']);
-        jest.runOnlyPendingTimers();
-      });
-    });
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "value": 2,
+            },
+            "value": 2,
+          },
+          "value": 2,
+        },
+      }
+    `);
 
     done();
   });
@@ -1502,9 +1769,29 @@ describe('InspectedElementContext', () => {
     let didFinish = false;
 
     function Suspender({target}) {
-      const {getInspectedElement} = React.useContext(InspectedElementContext);
-      const inspectedElement = getInspectedElement(id);
-      expect(inspectedElement).toMatchSnapshot(`1: Inspected element ${id}`);
+      const inspectedElement = useInspectedElement(id);
+      expect(inspectedElement).toMatchInlineSnapshot(`
+        Object {
+          "context": null,
+          "events": undefined,
+          "hooks": Array [
+            Object {
+              "id": null,
+              "isStateEditable": false,
+              "name": "Context",
+              "subHooks": Array [],
+              "value": true,
+            },
+          ],
+          "id": 2,
+          "owners": null,
+          "props": Object {
+            "a": 1,
+            "b": "abc",
+          },
+          "state": null,
+        }
+      `);
       didFinish = true;
       return null;
     }
@@ -1554,8 +1841,20 @@ describe('InspectedElementContext', () => {
     let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);
 
     function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      storeAsGlobal = context.storeAsGlobal;
+      storeAsGlobal = (elementID: number, path: Array<string | number>) => {
+        const rendererID = store.getRendererIDForElement(elementID);
+        if (rendererID !== null) {
+          const {
+            storeAsGlobal: storeAsGlobalAPI,
+          } = require('react-devtools-shared/src/backendAPI');
+          storeAsGlobalAPI({
+            bridge,
+            id: elementID,
+            path,
+            rendererID,
+          });
+        }
+      };
       return null;
     }
 
@@ -1572,23 +1871,22 @@ describe('InspectedElementContext', () => {
         ),
       false,
     );
-    expect(storeAsGlobal).not.toBeNull();
 
     jest.spyOn(console, 'log').mockImplementation(() => {});
 
     // Should store the whole value (not just the hydrated parts)
     storeAsGlobal(id, ['props', 'nestedObject']);
     jest.runOnlyPendingTimers();
-    expect(console.log).toHaveBeenCalledWith('$reactTemp1');
-    expect(global.$reactTemp1).toBe(nestedObject);
+    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(id, ['props', 'nestedObject', 'a', 'b']);
     jest.runOnlyPendingTimers();
-    expect(console.log).toHaveBeenCalledWith('$reactTemp2');
-    expect(global.$reactTemp2).toBe(nestedObject.a.b);
+    expect(console.log).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject.a.b);
 
     done();
   });
@@ -1620,8 +1918,20 @@ describe('InspectedElementContext', () => {
     let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
 
     function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      copyPath = context.copyInspectedElementPath;
+      copyPath = (elementID: number, path: Array<string | number>) => {
+        const rendererID = store.getRendererIDForElement(elementID);
+        if (rendererID !== null) {
+          const {
+            copyInspectedElementPath,
+          } = require('react-devtools-shared/src/backendAPI');
+          copyInspectedElementPath({
+            bridge,
+            id: elementID,
+            path,
+            rendererID,
+          });
+        }
+      };
       return null;
     }
 
@@ -1712,8 +2022,20 @@ describe('InspectedElementContext', () => {
     let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
 
     function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      copyPath = context.copyInspectedElementPath;
+      copyPath = (elementID: number, path: Array<string | number>) => {
+        const rendererID = store.getRendererIDForElement(elementID);
+        if (rendererID !== null) {
+          const {
+            copyInspectedElementPath,
+          } = require('react-devtools-shared/src/backendAPI');
+          copyInspectedElementPath({
+            bridge,
+            id: elementID,
+            path,
+            rendererID,
+          });
+        }
+      };
       return null;
     }
 
@@ -1761,12 +2083,9 @@ describe('InspectedElementContext', () => {
   });
 
   it('should display complex values of useDebugValue', async done => {
-    let getInspectedElementPath: GetInspectedElementPath = ((null: any): GetInspectedElementPath);
     let inspectedElement = null;
     function Suspender({target}) {
-      const context = React.useContext(InspectedElementContext);
-      getInspectedElementPath = context.getInspectedElementPath;
-      inspectedElement = context.getInspectedElement(target);
+      inspectedElement = useInspectedElement(target);
       return null;
     }
 
@@ -1803,9 +2122,27 @@ describe('InspectedElementContext', () => {
         ),
       false,
     );
-    expect(getInspectedElementPath).not.toBeNull();
-    expect(inspectedElement).not.toBeNull();
-    expect(inspectedElement).toMatchSnapshot('DisplayedComplexValue');
+    expect(inspectedElement.hooks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "id": null,
+          "isStateEditable": false,
+          "name": "DebuggableHook",
+          "subHooks": Array [
+            Object {
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": Array [],
+              "value": 1,
+            },
+          ],
+          "value": Object {
+            "foo": 2,
+          },
+        },
+      ]
+    `);
 
     done();
   });
@@ -1825,8 +2162,7 @@ describe('InspectedElementContext', () => {
       let warnings = null;
 
       function Suspender({target}) {
-        const {getInspectedElement} = React.useContext(InspectedElementContext);
-        const inspectedElement = getInspectedElement(id);
+        const inspectedElement = useInspectedElement(id);
         errors = inspectedElement.errors;
         warnings = inspectedElement.warnings;
         return null;
@@ -2038,7 +2374,11 @@ describe('InspectedElementContext', () => {
         );
       });
 
-      store.clearErrorsAndWarnings();
+      const {
+        clearErrorsAndWarnings,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearErrorsAndWarnings({bridge, store});
+
       // Flush events to the renderer.
       jest.runOnlyPendingTimers();
 
@@ -2051,7 +2391,7 @@ describe('InspectedElementContext', () => {
       `);
     });
 
-    it('can be cleared for a particular Fiber (only errors)', async () => {
+    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}`);
@@ -2071,7 +2411,14 @@ describe('InspectedElementContext', () => {
         );
       });
 
-      store.clearWarningsForElement(2);
+      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();
 
@@ -2107,7 +2454,9 @@ describe('InspectedElementContext', () => {
         ]
       `);
 
-      store.clearWarningsForElement(1);
+      id = ((store.getElementIDAtIndex(0): any): number);
+      clearWarningsForElement({bridge, id, rendererID});
+
       // Flush events to the renderer.
       jest.runOnlyPendingTimers();
 
@@ -2139,7 +2488,7 @@ describe('InspectedElementContext', () => {
       `);
     });
 
-    it('can be cleared for a particular Fiber (only warnings)', async () => {
+    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}`);
@@ -2159,7 +2508,14 @@ describe('InspectedElementContext', () => {
         );
       });
 
-      store.clearErrorsForElement(2);
+      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();
 
@@ -2195,7 +2551,9 @@ describe('InspectedElementContext', () => {
         ]
       `);
 
-      store.clearErrorsForElement(1);
+      id = ((store.getElementIDAtIndex(0): any): number);
+      clearErrorsForElement({bridge, id, rendererID});
+
       // Flush events to the renderer.
       jest.runOnlyPendingTimers();
 
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index b6290daf61a9..a615777421fe 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -12,17 +12,14 @@ export function test(maybeInspectedElement) {
 
 // print() is part of Jest's serializer API
 export function print(inspectedElement, serialize, indent) {
-  return JSON.stringify(
-    {
-      id: inspectedElement.id,
-      owners: inspectedElement.owners,
-      context: inspectedElement.context,
-      events: inspectedElement.events,
-      hooks: inspectedElement.hooks,
-      props: inspectedElement.props,
-      state: inspectedElement.state,
-    },
-    null,
-    2,
-  );
+  // 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,
+    state: inspectedElement.state,
+  });
 }
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
deleted file mode 100644
index 1ed17c109bb1..000000000000
--- a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/inspectElement-test.js.snap
+++ /dev/null
@@ -1,303 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InspectedElementContext should inspect the currently selected element: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "a": 1,
-    "b": "abc"
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should not consume iterables while inspecting: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "iteratable": {}
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 1: Initially inspect element 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {}
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 2: Inspect props.nestedObject.a 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": {}
-        }
-      }
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 3: Inspect props.nestedObject.a.b.c 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": [
-            {
-              "d": {}
-            }
-          ]
-        }
-      }
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should not dehydrate nested values until explicitly requested: 4: Inspect props.nestedObject.a.b.c.0.d 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "nestedObject": {
-      "a": {
-        "b": {
-          "c": [
-            {
-              "d": {
-                "e": {}
-              }
-            }
-          ]
-        }
-      }
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should support complex data types: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "anonymous_fn": {},
-    "array_buffer": {},
-    "array_of_arrays": [
-      {}
-    ],
-    "big_int": {},
-    "bound_fn": {},
-    "data_view": {},
-    "date": {},
-    "fn": {},
-    "html_element": {},
-    "immutable": {
-      "0": {},
-      "1": {},
-      "2": {}
-    },
-    "map": {
-      "0": {},
-      "1": {}
-    },
-    "map_of_maps": {
-      "0": {},
-      "1": {}
-    },
-    "object_of_objects": {
-      "inner": {}
-    },
-    "react_element": {},
-    "regexp": {},
-    "set": {
-      "0": "abc",
-      "1": 123
-    },
-    "set_of_sets": {
-      "0": {},
-      "1": {}
-    },
-    "symbol": {},
-    "typed_array": {
-      "0": 100,
-      "1": -100,
-      "2": 0
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should support custom objects with enumerable properties and getters: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "data": {
-      "_number": 42,
-      "number": 42
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should support objects with no prototype: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "object": {
-      "string": "abc",
-      "number": 123,
-      "boolean": true
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should support objects with overridden hasOwnProperty: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "object": {
-      "name": "blah",
-      "hasOwnProperty": true
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should support objects with with inherited keys: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "data": {
-      "123": 3,
-      "enumerableString": 2,
-      "Symbol(enumerableSymbol)": 3,
-      "enumerableStringBase": 1,
-      "Symbol(enumerableSymbolBase)": 1
-    }
-  },
-  "state": null
-},
-}
-`;
-
-exports[`InspectedElementContext should support simple data types: 1: Initial inspection 1`] = `
-Object {
-  "id": 2,
-  "type": "full-data",
-  "value": {
-  "id": 2,
-  "owners": null,
-  "context": {},
-  "hooks": null,
-  "props": {
-    "boolean_false": false,
-    "boolean_true": true,
-    "infinity": null,
-    "integer_zero": 0,
-    "integer_one": 1,
-    "float": 1.23,
-    "string": "abc",
-    "string_empty": "",
-    "nan": null,
-    "value_null": null
-  },
-  "state": null
-},
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 6ccff70c7777..05d2bdcbeb6e 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -7,71 +7,50 @@
  * @flow
  */
 
-import type {InspectedElementPayload} from 'react-devtools-shared/src/backend/types';
-import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('InspectedElementContext', () => {
   let React;
   let ReactDOM;
-  let hydrate;
-  let meta;
   let bridge: FrontendBridge;
   let store: Store;
 
+  let backendAPI;
+
   const act = (callback: Function) => {
     callback();
 
     jest.runAllTimers(); // Flush Bridge operations
   };
 
-  function dehydrateHelper(
-    dehydratedData: DehydratedData | null,
-  ): Object | null {
-    if (dehydratedData !== null) {
-      return hydrate(
-        dehydratedData.data,
-        dehydratedData.cleaned,
-        dehydratedData.unserializable,
-      );
-    } else {
-      return null;
-    }
-  }
-
   async function read(
     id: number,
-    path?: Array<string | number>,
+    inspectedPaths?: Object = {},
   ): Promise<Object> {
-    return new Promise((resolve, reject) => {
-      const rendererID = ((store.getRendererIDForElement(id): any): number);
-
-      const onInspectedElement = (payload: InspectedElementPayload) => {
-        bridge.removeListener('inspectedElement', onInspectedElement);
-
-        if (payload.type === 'full-data' && payload.value !== null) {
-          payload.value.context = dehydrateHelper(payload.value.context);
-          payload.value.props = dehydrateHelper(payload.value.props);
-          payload.value.state = dehydrateHelper(payload.value.state);
-        }
-
-        resolve(payload);
-      };
+    const rendererID = ((store.getRendererIDForElement(id): any): number);
+    const promise = backendAPI
+      .inspectElement({
+        bridge,
+        forceUpdate: true,
+        id,
+        inspectedPaths,
+        rendererID,
+      })
+      .then(data =>
+        backendAPI.convertInspectedElementBackendToFrontend(data.value),
+      );
 
-      bridge.addListener('inspectedElement', onInspectedElement);
-      bridge.send('inspectElement', {id, path, rendererID});
+    jest.runOnlyPendingTimers();
 
-      jest.runOnlyPendingTimers();
-    });
+    return promise;
   }
 
   beforeEach(() => {
     bridge = global.bridge;
     store = global.store;
 
-    hydrate = require('react-devtools-shared/src/hydration').hydrate;
-    meta = require('react-devtools-shared/src/hydration').meta;
+    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").
@@ -94,7 +73,20 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": Object {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": Object {
+          "a": 1,
+          "b": "abc",
+        },
+        "state": null,
+      }
+    `);
 
     done();
   });
@@ -124,20 +116,29 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
-
-    const {props} = inspectedElement.value;
-    expect(props.boolean_false).toBe(false);
-    expect(props.boolean_true).toBe(true);
-    expect(Number.isFinite(props.infinity)).toBe(false);
-    expect(props.integer_zero).toEqual(0);
-    expect(props.integer_one).toEqual(1);
-    expect(props.float).toEqual(1.23);
-    expect(props.string).toEqual('abc');
-    expect(props.string_empty).toEqual('');
-    expect(props.nan).toBeNaN();
-    expect(props.value_null).toBeNull();
-    expect(props.value_undefined).toBeUndefined();
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": Object {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": Object {
+          "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,
+        },
+        "state": null,
+      }
+    `);
 
     done();
   });
@@ -211,8 +212,6 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
-
     const {
       anonymous_fn,
       array_buffer,
@@ -233,7 +232,9 @@ describe('InspectedElementContext', () => {
       set_of_sets,
       symbol,
       typed_array,
-    } = inspectedElement.value.props;
+    } = inspectedElement.props;
+
+    const {meta} = require('react-devtools-shared/src/hydration');
 
     expect(anonymous_fn[meta.inspectable]).toBe(false);
     expect(anonymous_fn[meta.name]).toBe('function');
@@ -360,12 +361,15 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
-    expect(inspectedElement.value.props.object).toEqual({
-      boolean: true,
-      number: 123,
-      string: 'abc',
-    });
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "object": Object {
+          "boolean": true,
+          "number": 123,
+          "string": "abc",
+        },
+      }
+    `);
 
     done();
   });
@@ -388,11 +392,10 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
-    expect(inspectedElement.value.props.object).toEqual({
-      name: 'blah',
-      hasOwnProperty: true,
-    });
+    // 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);
 
     done();
   });
@@ -417,7 +420,22 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": Object {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": Object {
+          "iteratable": Dehydrated {
+            "preview_short": Generator,
+            "preview_long": Generator,
+          },
+        },
+        "state": null,
+      }
+    `);
 
     // Inspecting should not consume the iterable.
     expect(iteratable.next().value).toEqual(1);
@@ -457,7 +475,22 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": Object {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": Object {
+          "data": Object {
+            "_number": 42,
+            "number": 42,
+          },
+        },
+        "state": null,
+      }
+    `);
 
     done();
   });
@@ -532,7 +565,25 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    expect(inspectedElement).toMatchSnapshot('1: Initial inspection');
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": Object {},
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": Object {
+          "data": Object {
+            "123": 3,
+            "Symbol(enumerableSymbol)": 3,
+            "Symbol(enumerableSymbolBase)": 1,
+            "enumerableString": 2,
+            "enumerableStringBase": 1,
+          },
+        },
+        "state": null,
+      }
+    `);
 
     done();
   });
@@ -564,28 +615,75 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
 
     let inspectedElement = await read(id);
-    expect(inspectedElement).toMatchSnapshot('1: Initially inspect element');
-
-    inspectedElement = await read(id, ['props', 'nestedObject', 'a']);
-    expect(inspectedElement).toMatchSnapshot('2: Inspect props.nestedObject.a');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {b: {…}},
+          },
+        },
+      }
+    `);
+
+    inspectedElement = await read(id, {props: {nestedObject: {a: {}}}});
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "c": Dehydrated {
+                "preview_short": Array(1),
+                "preview_long": [{…}],
+              },
+            },
+          },
+        },
+      }
+    `);
 
-    inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);
-    expect(inspectedElement).toMatchSnapshot(
-      '3: Inspect props.nestedObject.a.b.c',
-    );
+    inspectedElement = await read(id, {
+      props: {nestedObject: {a: {b: {c: {}}}}},
+    });
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "c": Array [
+                Object {
+                  "d": Dehydrated {
+                    "preview_short": {…},
+                    "preview_long": {e: {…}},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
 
-    inspectedElement = await read(id, [
-      'props',
-      'nestedObject',
-      'a',
-      'b',
-      'c',
-      0,
-      'd',
-    ]);
-    expect(inspectedElement).toMatchSnapshot(
-      '4: Inspect props.nestedObject.a.b.c.0.d',
-    );
+    inspectedElement = await read(id, {
+      props: {nestedObject: {a: {b: {c: {0: {d: {}}}}}}},
+    });
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "c": Array [
+                Object {
+                  "d": Object {
+                    "e": Object {},
+                  },
+                },
+              ],
+            },
+          },
+        },
+      }
+    `);
 
     done();
   });
@@ -619,28 +717,30 @@ describe('InspectedElementContext', () => {
     spyOn(console, 'log').and.callFake(logSpy);
 
     // Should store the whole value (not just the hydrated parts)
-    bridge.send('storeAsGlobal', {
-      count: 1,
+    backendAPI.storeAsGlobal({
+      bridge,
       id,
       path: ['props', 'nestedObject'],
       rendererID,
     });
+
     jest.runOnlyPendingTimers();
-    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
-    expect(global.$reactTemp1).toBe(nestedObject);
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp0');
+    expect(global.$reactTemp0).toBe(nestedObject);
 
     logSpy.mockReset();
 
     // Should store the nested property specified (not just the outer value)
-    bridge.send('storeAsGlobal', {
-      count: 2,
+    backendAPI.storeAsGlobal({
+      bridge,
       id,
       path: ['props', 'nestedObject', 'a', 'b'],
       rendererID,
     });
+
     jest.runOnlyPendingTimers();
-    expect(logSpy).toHaveBeenCalledWith('$reactTemp2');
-    expect(global.$reactTemp2).toBe(nestedObject.a.b);
+    expect(logSpy).toHaveBeenCalledWith('$reactTemp1');
+    expect(global.$reactTemp1).toBe(nestedObject.a.b);
   });
 
   it('should enable inspected values to be copied to the clipboard', () => {
@@ -669,11 +769,13 @@ describe('InspectedElementContext', () => {
     const rendererID = ((store.getRendererIDForElement(id): any): number);
 
     // Should copy the whole value (not just the hydrated parts)
-    bridge.send('copyElementPath', {
+    backendAPI.copyInspectedElementPath({
+      bridge,
       id,
       path: ['props', 'nestedObject'],
       rendererID,
     });
+
     jest.runOnlyPendingTimers();
     expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
@@ -683,11 +785,13 @@ describe('InspectedElementContext', () => {
     global.mockClipboardCopy.mockReset();
 
     // Should copy the nested property specified (not just the outer value)
-    bridge.send('copyElementPath', {
+    backendAPI.copyInspectedElementPath({
+      bridge,
       id,
       path: ['props', 'nestedObject', 'a', 'b'],
       rendererID,
     });
+
     jest.runOnlyPendingTimers();
     expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
@@ -745,7 +849,8 @@ describe('InspectedElementContext', () => {
     const rendererID = ((store.getRendererIDForElement(id): any): number);
 
     // Should copy the whole value (not just the hydrated parts)
-    bridge.send('copyElementPath', {
+    backendAPI.copyInspectedElementPath({
+      bridge,
       id,
       path: ['props'],
       rendererID,
@@ -756,7 +861,8 @@ describe('InspectedElementContext', () => {
     global.mockClipboardCopy.mockReset();
 
     // Should copy the nested property specified (not just the outer value)
-    bridge.send('copyElementPath', {
+    backendAPI.copyInspectedElementPath({
+      bridge,
       id,
       path: ['props', 'bigInt'],
       rendererID,
@@ -770,7 +876,8 @@ describe('InspectedElementContext', () => {
     global.mockClipboardCopy.mockReset();
 
     // Should copy the nested property specified (not just the outer value)
-    bridge.send('copyElementPath', {
+    backendAPI.copyInspectedElementPath({
+      bridge,
       id,
       path: ['props', 'typedArray'],
       rendererID,
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index d219f3cba7de..d5b9c3cbc921 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -12,12 +12,14 @@ describe('Store', () => {
   let ReactDOM;
   let agent;
   let act;
+  let bridge;
   let getRendererID;
   let store;
   let withErrorsOrWarningsIgnored;
 
   beforeEach(() => {
     agent = global.agent;
+    bridge = global.bridge;
     store = global.store;
 
     React = require('react');
@@ -1159,7 +1161,11 @@ describe('Store', () => {
             <Example> ✕⚠
       `);
 
-      store.clearErrorsAndWarnings();
+      const {
+        clearErrorsAndWarnings,
+      } = require('react-devtools-shared/src/backendAPI');
+      clearErrorsAndWarnings({bridge, store});
+
       // flush events to the renderer
       jest.runAllTimers();
 
@@ -1196,7 +1202,14 @@ describe('Store', () => {
             <Example> ✕⚠
       `);
 
-      store.clearWarningsForElement(2);
+      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();
 
@@ -1234,7 +1247,14 @@ describe('Store', () => {
             <Example> ✕⚠
       `);
 
-      store.clearErrorsForElement(2);
+      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();
 
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 8c057fb72080..36f615c1155b 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -1441,20 +1441,28 @@ describe('TreeListContext', () => {
   });
 
   describe('inline errors/warnings state', () => {
+    const {
+      clearErrorsAndWarnings: clearErrorsAndWarningsAPI,
+      clearErrorsForElement: clearErrorsForElementAPI,
+      clearWarningsForElement: clearWarningsForElementAPI,
+    } = require('react-devtools-shared/src/backendAPI');
+
     function clearAllErrors() {
-      utils.act(() => store.clearErrorsAndWarnings());
+      utils.act(() => clearErrorsAndWarningsAPI({bridge, store}));
       // flush events to the renderer
       jest.runAllTimers();
     }
 
     function clearErrorsForElement(id) {
-      utils.act(() => store.clearErrorsForElement(id));
+      const rendererID = store.getRendererIDForElement(id);
+      utils.act(() => clearErrorsForElementAPI({bridge, id, rendererID}));
       // flush events to the renderer
       jest.runAllTimers();
     }
 
     function clearWarningsForElement(id) {
-      utils.act(() => store.clearWarningsForElement(id));
+      const rendererID = store.getRendererIDForElement(id);
+      utils.act(() => clearWarningsForElementAPI({bridge, id, rendererID}));
       // flush events to the renderer
       jest.runAllTimers();
     }
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 326b0fb2e340..e570febf5d67 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -70,8 +70,10 @@ type CopyElementParams = {|
 
 type InspectElementParams = {|
   id: number,
-  path?: Array<string | number>,
+  inspectedPaths: Object,
+  forceUpdate: boolean,
   rendererID: number,
+  requestID: number,
 |};
 
 type OverrideHookParams = {|
@@ -328,12 +330,21 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
-  inspectElement = ({id, path, rendererID}: InspectElementParams) => {
+  inspectElement = ({
+    id,
+    inspectedPaths,
+    forceUpdate,
+    rendererID,
+    requestID,
+  }: InspectElementParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      this._bridge.send('inspectedElement', renderer.inspectElement(id, path));
+      this._bridge.send(
+        'inspectedElement',
+        renderer.inspectElement(requestID, id, inspectedPaths, forceUpdate),
+      );
 
       // When user selects an element, stop trying to restore the selection,
       // and instead remember the current selection for the next reload.
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 90f0f3ad12b4..63c9b1660e75 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -584,25 +584,12 @@ export function attach(
   }
 
   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) {
+  function createIsPathAllowed(key: string, inspectedPaths: Object) {
     // 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];
+      let current = inspectedPaths[key];
       if (!current) {
         return false;
       }
@@ -691,26 +678,23 @@ export function attach(
   }
 
   function inspectElement(
+    requestID: number,
     id: number,
-    path?: Array<string | number>,
+    inspectedPaths: Object,
   ): InspectedElementPayload {
     if (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 dehyration (cleanForBridge).
@@ -718,19 +702,20 @@ export function attach(
 
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
-      createIsPathAllowed('context'),
+      createIsPathAllowed('context', inspectedPaths),
     );
     inspectedElement.props = cleanForBridge(
       inspectedElement.props,
-      createIsPathAllowed('props'),
+      createIsPathAllowed('props', inspectedPaths),
     );
     inspectedElement.state = cleanForBridge(
       inspectedElement.state,
-      createIsPathAllowed('state'),
+      createIsPathAllowed('state', inspectedPaths),
     );
 
     return {
       id,
+      responseID: requestID,
       type: 'full-data',
       value: inspectedElement,
     };
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index b942b7561b7b..ee90dfee688a 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2718,7 +2718,6 @@ export function attach(
 
   let mostRecentlyInspectedElement: InspectedElement | null = null;
   let hasElementUpdatedSinceLastInspected: boolean = false;
-  let currentlyInspectedPaths: Object = {};
 
   function isMostRecentlyInspectedElementCurrent(id: number): boolean {
     return (
@@ -2728,21 +2727,10 @@ export function attach(
     );
   }
 
-  // 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: 'hooks' | null,
+    inspectedPaths: Object,
   ) {
     // 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.
@@ -2767,8 +2755,7 @@ export function attach(
           break;
       }
 
-      let current =
-        key === null ? currentlyInspectedPaths : currentlyInspectedPaths[key];
+      let current = key === null ? inspectedPaths : inspectedPaths[key];
       if (!current) {
         return false;
       }
@@ -2863,97 +2850,66 @@ export function attach(
   }
 
   function inspectElement(
+    requestID: number,
     id: number,
-    path?: Array<string | number>,
+    inspectedPaths: Object,
+    forceUpdate: boolean,
   ): InspectedElementPayload {
-    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
+    const isCurrent = !forceUpdate && isMostRecentlyInspectedElementCurrent(id);
 
     if (isCurrent) {
-      if (path != null) {
-        mergeInspectedPaths(path);
-
-        let secondaryCategory = null;
-        if (path[0] === 'hooks') {
-          secondaryCategory = 'hooks';
-        }
-
-        // If this element has not been updated since it was last inspected,
-        // we can just return the subset of data in the newly-inspected path.
-        return {
-          id,
-          type: 'hydrated-path',
-          path,
-          value: cleanForBridge(
-            getInObject(
-              ((mostRecentlyInspectedElement: any): InspectedElement),
-              path,
-            ),
-            createIsPathAllowed(null, secondaryCategory),
-            path,
-          ),
-        };
-      } else {
-        // If this element has not been updated since it was last inspected, we don't need to re-run it.
-        // Instead we can just return the ID to indicate that it has not changed.
-        return {
-          id,
-          type: 'no-change',
-        };
-      }
-    } else {
-      hasElementUpdatedSinceLastInspected = false;
-
-      if (
-        mostRecentlyInspectedElement === null ||
-        mostRecentlyInspectedElement.id !== id
-      ) {
-        currentlyInspectedPaths = {};
-      }
-
-      mostRecentlyInspectedElement = inspectElementRaw(id);
-      if (mostRecentlyInspectedElement === null) {
-        return {
-          id,
-          type: 'not-found',
-        };
-      }
-
-      if (path != null) {
-        mergeInspectedPaths(path);
-      }
-
-      // Any time an inspected element has an update,
-      // we should update the selected $r value as wel.
-      // Do this before dehydration (cleanForBridge).
-      updateSelectedElement(mostRecentlyInspectedElement);
+      // 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',
+      };
+    }
 
-      // Clone before cleaning so that we preserve the full data.
-      // This will enable us to send patches without re-inspecting if hydrated paths are requested.
-      // (Reducing how often we shallow-render is a better DX for function components that use hooks.)
-      const cleanedInspectedElement = {...mostRecentlyInspectedElement};
-      cleanedInspectedElement.context = cleanForBridge(
-        cleanedInspectedElement.context,
-        createIsPathAllowed('context', null),
-      );
-      cleanedInspectedElement.hooks = cleanForBridge(
-        cleanedInspectedElement.hooks,
-        createIsPathAllowed('hooks', 'hooks'),
-      );
-      cleanedInspectedElement.props = cleanForBridge(
-        cleanedInspectedElement.props,
-        createIsPathAllowed('props', null),
-      );
-      cleanedInspectedElement.state = cleanForBridge(
-        cleanedInspectedElement.state,
-        createIsPathAllowed('state', null),
-      );
+    hasElementUpdatedSinceLastInspected = false;
 
+    mostRecentlyInspectedElement = inspectElementRaw(id);
+    if (mostRecentlyInspectedElement === null) {
       return {
         id,
-        type: 'full-data',
-        value: cleanedInspectedElement,
+        responseID: requestID,
+        type: 'not-found',
       };
     }
+
+    // Any time an inspected element has an update,
+    // we should update the selected $r value as wel.
+    // Do this before dehydration (cleanForBridge).
+    updateSelectedElement(mostRecentlyInspectedElement);
+
+    // Clone before cleaning so that we preserve the full data.
+    // This will enable us to send patches without re-inspecting if hydrated paths are requested.
+    // (Reducing how often we shallow-render is a better DX for function components that use hooks.)
+    const cleanedInspectedElement = {...mostRecentlyInspectedElement};
+    cleanedInspectedElement.context = cleanForBridge(
+      cleanedInspectedElement.context,
+      createIsPathAllowed('context', null, inspectedPaths),
+    );
+    cleanedInspectedElement.hooks = cleanForBridge(
+      cleanedInspectedElement.hooks,
+      createIsPathAllowed('hooks', 'hooks', inspectedPaths),
+    );
+    cleanedInspectedElement.props = cleanForBridge(
+      cleanedInspectedElement.props,
+      createIsPathAllowed('props', null, inspectedPaths),
+    );
+    cleanedInspectedElement.state = cleanForBridge(
+      cleanedInspectedElement.state,
+      createIsPathAllowed('state', null, inspectedPaths),
+    );
+
+    return {
+      id,
+      responseID: requestID,
+      type: 'full-data',
+      value: cleanedInspectedElement,
+    };
   }
 
   function logElementToConsole(id) {
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 4cecf59df298..09b32aa1ceef 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -257,34 +257,28 @@ export type InspectedElement = {|
 export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
-export const InspectElementHydratedPathType = 'hydrated-path';
 
 type InspectElementFullData = {|
   id: number,
+  responseID: number,
   type: 'full-data',
   value: InspectedElement,
 |};
 
-type InspectElementHydratedPath = {|
-  id: number,
-  type: 'hydrated-path',
-  path: Array<string | number>,
-  value: any,
-|};
-
 type InspectElementNoChange = {|
   id: number,
+  responseID: number,
   type: 'no-change',
 |};
 
 type InspectElementNotFound = {|
   id: number,
+  responseID: number,
   type: 'not-found',
 |};
 
 export type InspectedElementPayload =
   | InspectElementFullData
-  | InspectElementHydratedPath
   | InspectElementNoChange
   | InspectElementNotFound;
 
@@ -319,8 +313,10 @@ export type RendererInterface = {
   handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
   inspectElement: (
+    requestID: number,
     id: number,
-    path?: Array<string | number>,
+    inspectedPaths: Object,
+    forceUpdate: boolean,
   ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
new file mode 100644
index 000000000000..372fd247d3b5
--- /dev/null
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -0,0 +1,283 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
+import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
+import Store from 'react-devtools-shared/src/devtools/store';
+
+import type {
+  InspectedElement as InspectedElementBackend,
+  InspectedElementPayload,
+} from 'react-devtools-shared/src/backend/types';
+import type {
+  BackendEvents,
+  FrontendBridge,
+} from 'react-devtools-shared/src/bridge';
+import type {
+  DehydratedData,
+  InspectedElement as InspectedElementFrontend,
+} from 'react-devtools-shared/src/devtools/views/Components/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('clearErrorsForFiberID', {
+    rendererID,
+    id,
+  });
+}
+
+export function clearWarningsForElement({
+  bridge,
+  id,
+  rendererID,
+}: {|
+  bridge: FrontendBridge,
+  id: number,
+  rendererID: number,
+|}): void {
+  bridge.send('clearWarningsForFiberID', {
+    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,
+  forceUpdate,
+  id,
+  inspectedPaths,
+  rendererID,
+}: {|
+  bridge: FrontendBridge,
+  forceUpdate: boolean,
+  id: number,
+  inspectedPaths: Object,
+  rendererID: number,
+|}): Promise<InspectedElementPayload> {
+  const requestID = requestCounter++;
+  const promise = getPromiseForRequestID<InspectedElementPayload>(
+    requestID,
+    'inspectedElement',
+    bridge,
+  );
+
+  bridge.send('inspectElement', {
+    forceUpdate,
+    id,
+    inspectedPaths,
+    rendererID,
+    requestID,
+  });
+
+  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 = 5000;
+
+let requestCounter = 0;
+
+function getPromiseForRequestID<T>(
+  requestID: number,
+  eventType: $Keys<BackendEvents>,
+  bridge: FrontendBridge,
+): Promise<T> {
+  return new Promise((resolve, reject) => {
+    const cleanup = () => {
+      bridge.removeListener(eventType, onInspectedElement);
+
+      clearTimeout(timeoutID);
+    };
+
+    const onInspectedElement = (data: any) => {
+      if (data.responseID === requestID) {
+        cleanup();
+        resolve((data: T));
+      }
+    };
+
+    const onTimeout = () => {
+      cleanup();
+      reject();
+    };
+
+    bridge.addListener(eventType, onInspectedElement);
+
+    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;
+}
+
+export function convertInspectedElementBackendToFrontend(
+  inspectedElementBackend: InspectedElementBackend,
+): InspectedElementFrontend {
+  const {
+    canEditFunctionProps,
+    canEditFunctionPropsDeletePaths,
+    canEditFunctionPropsRenamePaths,
+    canEditHooks,
+    canEditHooksAndDeletePaths,
+    canEditHooksAndRenamePaths,
+    canToggleSuspense,
+    canViewSource,
+    hasLegacyContext,
+    id,
+    source,
+    type,
+    owners,
+    context,
+    hooks,
+    props,
+    rendererPackageName,
+    rendererVersion,
+    rootType,
+    state,
+    key,
+    errors,
+    warnings,
+  } = inspectedElementBackend;
+
+  const inspectedElement: InspectedElementFrontend = {
+    canEditFunctionProps,
+    canEditFunctionPropsDeletePaths,
+    canEditFunctionPropsRenamePaths,
+    canEditHooks,
+    canEditHooksAndDeletePaths,
+    canEditHooksAndRenamePaths,
+    canToggleSuspense,
+    canViewSource,
+    hasLegacyContext,
+    id,
+    key,
+    rendererPackageName,
+    rendererVersion,
+    rootType,
+    source,
+    type,
+    owners:
+      owners === null
+        ? null
+        : owners.map(owner => {
+            const [displayName, hocDisplayNames] = separateDisplayNameAndHOCs(
+              owner.displayName,
+              owner.type,
+            );
+            return {
+              ...owner,
+              displayName,
+              hocDisplayNames,
+            };
+          }),
+    context: hydrateHelper(context),
+    hooks: hydrateHelper(hooks),
+    props: hydrateHelper(props),
+    state: hydrateHelper(state),
+    errors,
+    warnings,
+  };
+
+  return inspectedElement;
+}
+
+function hydrateHelper(
+  dehydratedData: DehydratedData | null,
+  path?: Array<string | number>,
+): 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
index 1da4d8eb3e54..dad25e93258c 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -89,7 +89,9 @@ type ViewAttributeSourceParams = {|
 
 type InspectElementParams = {|
   ...ElementAndRendererID,
-  path?: Array<string | number>,
+  forceUpdate: boolean,
+  inspectedPaths: Object,
+  requestID: number,
 |};
 
 type StoreAsGlobalParams = {|
@@ -117,7 +119,7 @@ type UpdateConsolePatchSettingsParams = {|
   showInlineWarningsAndErrors: boolean,
 |};
 
-type BackendEvents = {|
+export type BackendEvents = {|
   extensionBackendInitialized: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js
index af6a02faa0cf..573f66640271 100644
--- a/packages/react-devtools-shared/src/devtools/cache.js
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -12,6 +12,8 @@ import type {Thenable} 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/master/packages/react-cache/src/ReactCache.js
 //
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 6b1b83e52483..e5a6ac15fbde 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -101,7 +101,7 @@ export default class Store extends EventEmitter<{|
 
   // Map of ID to (mutable) Element.
   // Elements are mutated to avoid excessive cloning during tree updates.
-  // The InspectedElementContext also relies on this mutability for its WeakMap usage.
+  // The InspectedElement Suspense cache also relies on this mutability for its WeakMap usage.
   _idToElement: Map<number, Element> = new Map();
 
   // Should the React Native style editor panel be shown?
@@ -378,42 +378,6 @@ export default class Store extends EventEmitter<{|
     return this._cachedWarningCount;
   }
 
-  clearErrorsAndWarnings(): void {
-    this._rootIDToRendererID.forEach(rendererID => {
-      this._bridge.send('clearErrorsAndWarnings', {
-        rendererID,
-      });
-    });
-  }
-
-  clearErrorsForElement(id: number): void {
-    const rendererID = this.getRendererIDForElement(id);
-    if (rendererID === null) {
-      console.warn(
-        `Unable to find rendererID for element ${id} when clearing errors.`,
-      );
-    } else {
-      this._bridge.send('clearErrorsForFiberID', {
-        rendererID,
-        id,
-      });
-    }
-  }
-
-  clearWarningsForElement(id: number): void {
-    const rendererID = this.getRendererIDForElement(id);
-    if (rendererID === null) {
-      console.warn(
-        `Unable to find rendererID for element ${id} when clearing warnings.`,
-      );
-    } else {
-      this._bridge.send('clearWarningsForFiberID', {
-        rendererID,
-        id,
-      });
-    }
-  }
-
   containsElement(id: number): boolean {
     return this._idToElement.get(id) != null;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 91e31d4bf029..712afdd98728 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -17,7 +17,6 @@ import {
   useRef,
 } from 'react';
 import Tree from './Tree';
-import {InspectedElementContextController} from './InspectedElementContext';
 import {OwnersListContextController} from './OwnersListContext';
 import portaledContent from '../portaledContent';
 import {SettingsModalContextController} from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContext';
@@ -25,7 +24,9 @@ import {
   localStorageGetItem,
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
+import InspectedElementErrorBoundary from './InspectedElementErrorBoundary';
 import InspectedElement from './InspectedElement';
+import {InspectedElementContextController} from './InspectedElementContext';
 import {ModalDialog} from '../ModalDialog';
 import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
 import {NativeStyleContextController} from './NativeStyleEditor/context';
@@ -151,32 +152,34 @@ function Components(_: {||}) {
   return (
     <SettingsModalContextController>
       <OwnersListContextController>
-        <InspectedElementContextController>
-          <div
-            ref={wrapperElementRef}
-            className={styles.Components}
-            onMouseMove={onResize}
-            onMouseLeave={onResizeEnd}
-            onMouseUp={onResizeEnd}>
-            <Fragment>
-              <div ref={resizeElementRef} className={styles.TreeWrapper}>
-                <Tree />
-              </div>
-              <div className={styles.ResizeBarWrapper}>
-                <div onMouseDown={onResizeStart} className={styles.ResizeBar} />
-              </div>
-              <div className={styles.InspectedElementWrapper}>
-                <NativeStyleContextController>
+        <div
+          ref={wrapperElementRef}
+          className={styles.Components}
+          onMouseMove={onResize}
+          onMouseLeave={onResizeEnd}
+          onMouseUp={onResizeEnd}>
+          <Fragment>
+            <div ref={resizeElementRef} className={styles.TreeWrapper}>
+              <Tree />
+            </div>
+            <div className={styles.ResizeBarWrapper}>
+              <div onMouseDown={onResizeStart} className={styles.ResizeBar} />
+            </div>
+            <div className={styles.InspectedElementWrapper}>
+              <NativeStyleContextController>
+                <InspectedElementErrorBoundary>
                   <Suspense fallback={<Loading />}>
-                    <InspectedElement />
+                    <InspectedElementContextController>
+                      <InspectedElement />
+                    </InspectedElementContextController>
                   </Suspense>
-                </NativeStyleContextController>
-              </div>
-              <ModalDialog />
-              <SettingsModal />
-            </Fragment>
-          </div>
-        </InspectedElementContextController>
+                </InspectedElementErrorBoundary>
+              </NativeStyleContextController>
+            </div>
+            <ModalDialog />
+            <SettingsModal />
+          </Fragment>
+        </div>
       </OwnersListContextController>
     </SettingsModalContextController>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
index 8950696b7e4f..1851c75e0391 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -14,17 +14,20 @@ 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) {
   return (
     <Button
       className={styles.ExpandCollapseToggle}
+      disabled={disabled}
       onClick={() => setIsOpen(prevIsOpen => !prevIsOpen)}
       title={`${isOpen ? 'Collapse' : 'Expand'} prop value`}>
       <ButtonIcon type={isOpen ? 'expanded' : 'collapsed'} />
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index f0ecc32be377..3645993d51b1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -14,16 +14,15 @@ import {BridgeContext, StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {ModalDialogContext} from '../ModalDialog';
-import {InspectedElementContext} from './InspectedElementContext';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import Toggle from '../Toggle';
 import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
 import CannotSuspendWarningMessage from './CannotSuspendWarningMessage';
 import InspectedElementView from './InspectedElementView';
+import {InspectedElementContext} from './InspectedElementContext';
 
 import styles from './InspectedElement.css';
 
-import type {InspectedElementContextType} from './InspectedElementContext';
 import type {InspectedElement} from './types';
 
 export type Props = {||};
@@ -38,21 +37,13 @@ export default function InspectedElementWrapper(_: Props) {
   const store = useContext(StoreContext);
   const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
-  const {
-    copyInspectedElementPath,
-    getInspectedElementPath,
-    getInspectedElement,
-    storeAsGlobal,
-  } = useContext<InspectedElementContextType>(InspectedElementContext);
+  const {inspectedElement} = useContext(InspectedElementContext);
 
   const element =
     inspectedElementID !== null
       ? store.getElementByID(inspectedElementID)
       : null;
 
-  const inspectedElement =
-    inspectedElementID != null ? getInspectedElement(inspectedElementID) : null;
-
   const highlightElement = useCallback(() => {
     if (element !== null && inspectedElementID !== null) {
       const rendererID = store.getRendererIDForElement(inspectedElementID);
@@ -228,11 +219,8 @@ export default function InspectedElementWrapper(_: Props) {
           key={
             inspectedElementID /* Force reset when selected Element changes */
           }
-          copyInspectedElementPath={copyInspectedElementPath}
           element={element}
-          getInspectedElementPath={getInspectedElementPath}
           inspectedElement={inspectedElement}
-          storeAsGlobal={storeAsGlobal}
         />
       )}
     </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
index 01b05a9fa33a..48768b57aaac 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -10,6 +10,8 @@
 import * as React from 'react';
 import {
   createContext,
+  unstable_startTransition as startTransition,
+  unstable_useCacheRefresh as useCacheRefresh,
   useCallback,
   useContext,
   useEffect,
@@ -17,360 +19,134 @@ import {
   useRef,
   useState,
 } from 'react';
-import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
-import {createResource} from '../../cache';
-import {BridgeContext, StoreContext} from '../context';
-import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
 import {TreeStateContext} from './TreeContext';
-import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
+import {BridgeContext, StoreContext} from '../context';
+import {
+  checkForUpdate,
+  inspectElement,
+} from 'react-devtools-shared/src/inspectedElementCache';
 
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
-  InspectedElement as InspectedElementBackend,
-  InspectedElementPayload,
-} from 'react-devtools-shared/src/backend/types';
-import type {
-  DehydratedData,
   Element,
-  InspectedElement as InspectedElementFrontend,
+  InspectedElement,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
-import type {Resource, Thenable} from '../../cache';
-
-export type StoreAsGlobal = (id: number, path: Array<string | number>) => void;
 
-export type CopyInspectedElementPath = (
-  id: number,
-  path: Array<string | number>,
-) => void;
+type Path = Array<string | number>;
+type InspectPathFunction = (path: Path) => void;
 
-export type GetInspectedElementPath = (
-  id: number,
-  path: Array<string | number>,
-) => void;
-
-export type GetInspectedElement = (
-  id: number,
-) => InspectedElementFrontend | null;
-
-type RefreshInspectedElement = () => void;
-
-export type InspectedElementContextType = {|
-  copyInspectedElementPath: CopyInspectedElementPath,
-  getInspectedElementPath: GetInspectedElementPath,
-  getInspectedElement: GetInspectedElement,
-  refreshInspectedElement: RefreshInspectedElement,
-  storeAsGlobal: StoreAsGlobal,
+type Context = {|
+  inspectedElement: InspectedElement | null,
+  inspectPaths: InspectPathFunction,
 |};
 
-const InspectedElementContext = createContext<InspectedElementContextType>(
-  ((null: any): InspectedElementContextType),
+export const InspectedElementContext = createContext<Context>(
+  ((null: any): Context),
 );
-InspectedElementContext.displayName = 'InspectedElementContext';
-
-type ResolveFn = (inspectedElement: InspectedElementFrontend) => void;
-type InProgressRequest = {|
-  promise: Thenable<InspectedElementFrontend>,
-  resolveFn: ResolveFn,
-|};
-
-const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
-const resource: Resource<
-  Element,
-  Element,
-  InspectedElementFrontend,
-> = createResource(
-  (element: Element) => {
-    const request = inProgressRequests.get(element);
-    if (request != null) {
-      return request.promise;
-    }
-
-    let resolveFn = ((null: any): ResolveFn);
-    const promise = new Promise(resolve => {
-      resolveFn = resolve;
-    });
-
-    inProgressRequests.set(element, {promise, resolveFn});
 
-    return promise;
-  },
-  (element: Element) => element,
-  {useWeakMap: true},
-);
+const POLL_INTERVAL = 1000;
 
-type Props = {|
-  children: React$Node,
+export type Props = {|
+  children: ReactNodeList,
 |};
 
-function InspectedElementContextController({children}: Props) {
+export function InspectedElementContextController({children}: Props) {
+  const {selectedElementID} = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const storeAsGlobalCount = useRef(1);
-
-  // Ask the backend to store the value at the specified path as a global variable.
-  const storeAsGlobal = useCallback<GetInspectedElementPath>(
-    (id: number, path: Array<string | number>) => {
-      const rendererID = store.getRendererIDForElement(id);
-      if (rendererID !== null) {
-        bridge.send('storeAsGlobal', {
-          count: storeAsGlobalCount.current++,
-          id,
-          path,
-          rendererID,
-        });
-      }
-    },
-    [bridge, store],
-  );
-
-  // Ask the backend to copy the specified path to the clipboard.
-  const copyInspectedElementPath = useCallback<GetInspectedElementPath>(
-    (id: number, path: Array<string | number>) => {
-      const rendererID = store.getRendererIDForElement(id);
-      if (rendererID !== null) {
-        bridge.send('copyElementPath', {id, path, rendererID});
-      }
-    },
-    [bridge, store],
-  );
-
-  // Ask the backend to fill in a "dehydrated" path; this will result in a "inspectedElement".
-  const getInspectedElementPath = useCallback<GetInspectedElementPath>(
-    (id: number, path: Array<string | number>) => {
-      const rendererID = store.getRendererIDForElement(id);
-      if (rendererID !== null) {
-        bridge.send('inspectElement', {id, path, rendererID});
-      }
-    },
-    [bridge, store],
-  );
-
-  const getInspectedElement = useCallback<GetInspectedElement>(
-    (id: number) => {
-      const element = store.getElementByID(id);
-      if (element !== null) {
-        return resource.read(element);
-      } else {
-        return null;
-      }
-    },
-    [store],
-  );
-
-  // It's very important that this context consumes selectedElementID and not inspectedElementID.
-  // Otherwise the effect that sends the "inspect" message across the bridge-
-  // would itself be blocked by the same render that suspends (waiting for the data).
-  const {selectedElementID} = useContext(TreeStateContext);
-
-  const refreshInspectedElement = useCallback<RefreshInspectedElement>(() => {
-    if (selectedElementID !== null) {
-      const rendererID = store.getRendererIDForElement(selectedElementID);
-      if (rendererID !== null) {
-        bridge.send('inspectElement', {id: selectedElementID, rendererID});
-      }
-    }
-  }, [bridge, selectedElementID]);
-
-  const [
-    currentlyInspectedElement,
-    setCurrentlyInspectedElement,
-  ] = useState<InspectedElementFrontend | null>(null);
-
-  // This effect handler invalidates the suspense cache and schedules rendering updates with React.
-  useEffect(() => {
-    const onInspectedElement = (data: InspectedElementPayload) => {
-      const {id} = data;
+  const refresh = useCacheRefresh();
 
-      let element;
+  // Track when insepected paths have changed; we need to force the backend to send an udpate then.
+  const forceUpdateRef = useRef<boolean>(true);
 
-      switch (data.type) {
-        case 'no-change':
-        case 'not-found':
-          // No-op
-          break;
-        case 'hydrated-path':
-          // Merge new data into previous object and invalidate cache
-          element = store.getElementByID(id);
-          if (element !== null) {
-            if (currentlyInspectedElement != null) {
-              const value = hydrateHelper(data.value, data.path);
-              const inspectedElement = {...currentlyInspectedElement};
+  // Track the paths insepected for the currently selected element.
+  const [state, setState] = useState<{|
+    element: Element | null,
+    inspectedPaths: Object,
+  |}>({
+    element: null,
+    inspectedPaths: {},
+  });
 
-              fillInPath(inspectedElement, data.value, data.path, value);
+  const element =
+    selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
-              resource.write(element, inspectedElement);
+  const elementHasChanged = element !== null && element !== state.element;
 
-              // Schedule update with React if the currently-selected element has been invalidated.
-              if (id === selectedElementID) {
-                setCurrentlyInspectedElement(inspectedElement);
-              }
-            }
-          }
-          break;
-        case 'full-data':
-          const {
-            canEditFunctionProps,
-            canEditFunctionPropsDeletePaths,
-            canEditFunctionPropsRenamePaths,
-            canEditHooks,
-            canEditHooksAndDeletePaths,
-            canEditHooksAndRenamePaths,
-            canToggleSuspense,
-            canViewSource,
-            hasLegacyContext,
-            source,
-            type,
-            owners,
-            context,
-            hooks,
-            props,
-            rendererPackageName,
-            rendererVersion,
-            rootType,
-            state,
-            key,
-            errors,
-            warnings,
-          } = ((data.value: any): InspectedElementBackend);
-
-          const inspectedElement: InspectedElementFrontend = {
-            canEditFunctionProps,
-            canEditFunctionPropsDeletePaths,
-            canEditFunctionPropsRenamePaths,
-            canEditHooks,
-            canEditHooksAndDeletePaths,
-            canEditHooksAndRenamePaths,
-            canToggleSuspense,
-            canViewSource,
-            hasLegacyContext,
-            id,
-            key,
-            rendererPackageName,
-            rendererVersion,
-            rootType,
-            source,
-            type,
-            owners:
-              owners === null
-                ? null
-                : owners.map(owner => {
-                    const [
-                      displayName,
-                      hocDisplayNames,
-                    ] = separateDisplayNameAndHOCs(
-                      owner.displayName,
-                      owner.type,
-                    );
-                    return {
-                      ...owner,
-                      displayName,
-                      hocDisplayNames,
-                    };
-                  }),
-            context: hydrateHelper(context),
-            hooks: hydrateHelper(hooks),
-            props: hydrateHelper(props),
-            state: hydrateHelper(state),
-            errors,
-            warnings,
-          };
-
-          element = store.getElementByID(id);
-          if (element !== null) {
-            const request = inProgressRequests.get(element);
-            if (request != null) {
-              inProgressRequests.delete(element);
-              batchedUpdates(() => {
-                request.resolveFn(inspectedElement);
-                setCurrentlyInspectedElement(inspectedElement);
-              });
-            } else {
-              resource.write(element, inspectedElement);
+  // Reset the cached inspected paths when a new element is selected.
+  if (elementHasChanged) {
+    setState({
+      element,
+      inspectedPaths: {},
+    });
+  }
 
-              // Schedule update with React if the currently-selected element has been invalidated.
-              if (id === selectedElementID) {
-                setCurrentlyInspectedElement(inspectedElement);
-              }
+  // Don't load a stale element from the backend; it wastes bridge bandwidth.
+  const inspectedElement =
+    !elementHasChanged && element !== null
+      ? inspectElement(
+          element,
+          state.inspectedPaths,
+          forceUpdateRef.current,
+          store,
+          bridge,
+        )
+      : null;
+
+  const inspectPaths: InspectPathFunction = useCallback<InspectPathFunction>(
+    (path: Path) => {
+      startTransition(() => {
+        forceUpdateRef.current = true;
+        setState(prevState => {
+          const cloned = {...prevState};
+          let current = cloned.inspectedPaths;
+          path.forEach(key => {
+            if (!current[key]) {
+              current[key] = {};
             }
-          }
-          break;
-        default:
-          break;
-      }
-    };
-
-    bridge.addListener('inspectedElement', onInspectedElement);
-    return () => bridge.removeListener('inspectedElement', onInspectedElement);
-  }, [bridge, currentlyInspectedElement, selectedElementID, store]);
+            current = current[key];
+          });
+          return cloned;
+        });
+        refresh();
+      });
+    },
+    [setState],
+  );
 
-  // This effect handler polls for updates on the currently selected element.
+  // Force backend update when inspected paths change.
   useEffect(() => {
-    if (selectedElementID === null) {
-      return () => {};
-    }
-
-    const rendererID = store.getRendererIDForElement(selectedElementID);
-
-    let timeoutID: TimeoutID | null = null;
+    forceUpdateRef.current = false;
+  }, [element, state]);
 
-    const sendRequest = () => {
-      timeoutID = null;
-
-      if (rendererID !== null) {
-        bridge.send('inspectElement', {id: selectedElementID, rendererID});
-      }
-    };
-
-    // Send the initial inspection request.
-    // We'll poll for an update in the response handler below.
-    sendRequest();
-
-    const onInspectedElement = (data: InspectedElementPayload) => {
-      // If this is the element we requested, wait a little bit and then ask for another update.
-      if (data.id === selectedElementID) {
-        switch (data.type) {
-          case 'no-change':
-          case 'full-data':
-          case 'hydrated-path':
-            if (timeoutID !== null) {
-              clearTimeout(timeoutID);
-            }
-            timeoutID = setTimeout(sendRequest, 1000);
-            break;
-          default:
-            break;
-        }
-      }
-    };
-
-    bridge.addListener('inspectedElement', onInspectedElement);
-
-    return () => {
-      bridge.removeListener('inspectedElement', onInspectedElement);
-
-      if (timeoutID !== null) {
+  // Periodically poll the selected element for updates.
+  useEffect(() => {
+    if (element !== null) {
+      const inspectedPaths = state.inspectedPaths;
+      const checkForUpdateWrapper = () => {
+        checkForUpdate({bridge, element, inspectedPaths, refresh, store});
+        timeoutID = setTimeout(checkForUpdateWrapper, POLL_INTERVAL);
+      };
+      let timeoutID = setTimeout(checkForUpdateWrapper, POLL_INTERVAL);
+      return () => {
         clearTimeout(timeoutID);
-      }
-    };
-  }, [bridge, selectedElementID, store]);
-
-  const value = useMemo(
+      };
+    }
+  }, [
+    element,
+    // 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,
+  ]);
+
+  const value = useMemo<Context>(
     () => ({
-      copyInspectedElementPath,
-      getInspectedElement,
-      getInspectedElementPath,
-      refreshInspectedElement,
-      storeAsGlobal,
+      inspectedElement,
+      inspectPaths,
     }),
-    // InspectedElement is used to invalidate the cache and schedule an update with React.
-    [
-      copyInspectedElementPath,
-      currentlyInspectedElement,
-      getInspectedElement,
-      getInspectedElementPath,
-      refreshInspectedElement,
-      storeAsGlobal,
-    ],
+    [inspectedElement, inspectPaths],
   );
 
   return (
@@ -379,33 +155,3 @@ function InspectedElementContextController({children}: Props) {
     </InspectedElementContext.Provider>
   );
 }
-
-function hydrateHelper(
-  dehydratedData: DehydratedData | null,
-  path?: Array<string | number>,
-): 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;
-  }
-}
-
-export {InspectedElementContext, InspectedElementContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
index 22347cef07f6..8dfe6310a360 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
@@ -20,20 +20,20 @@ import {
   ElementTypeFunction,
 } from 'react-devtools-shared/src/types';
 
-import type {GetInspectedElementPath} from './InspectedElementContext';
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 type Props = {|
   bridge: FrontendBridge,
-  getInspectedElementPath: GetInspectedElementPath,
+  element: Element,
   inspectedElement: InspectedElement,
   store: Store,
 |};
 
 export default function InspectedElementContextTree({
   bridge,
-  getInspectedElementPath,
+  element,
   inspectedElement,
   store,
 }: Props) {
@@ -81,15 +81,15 @@ export default function InspectedElementContextTree({
               canEditValues={!isReadOnly}
               canRenamePaths={!isReadOnly}
               canRenamePathsAtDepth={canRenamePathsAtDepth}
-              type="context"
               depth={1}
-              getInspectedElementPath={getInspectedElementPath}
+              element={element}
               hidden={false}
               inspectedElement={inspectedElement}
               name={name}
               path={[name]}
               pathRoot="context"
               store={store}
+              type="context"
               value={value}
             />
           ))}
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 000000000000..399f83cec45b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
@@ -0,0 +1,21 @@
+.Error {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+      flex-direction: column;
+  height: 100%;
+  font-size: var(--font-size-sans-large);
+    font-weight: bold;
+    text-align: center;
+  background-color: var(--color-error-background);
+  color: var(--color-error-text);
+  border: 1px solid var(--color-error-border);
+  padding: 1rem;
+}
+
+.Message {
+  margin-bottom: 1rem;
+}
+
+.RetryButton {
+}
\ 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 000000000000..09c11664dcf7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {Component, useContext} from 'react';
+import {TreeDispatcherContext} from './TreeContext';
+import Button from 'react-devtools-shared/src/devtools/views/Button';
+import styles from './InspectedElementErrorBoundary.css';
+
+import type {DispatcherContext} from './InspectedElementErrorBoundary.css';
+
+type WrapperProps = {|
+  children: React$Node,
+|};
+
+export default function InspectedElementErrorBoundaryWrapper({
+  children,
+}: WrapperProps) {
+  const dispatch = useContext(TreeDispatcherContext);
+
+  return (
+    <InspectedElementErrorBoundary children={children} dispatch={dispatch} />
+  );
+}
+
+type Props = {|
+  children: React$Node,
+  dispatch: DispatcherContext,
+|};
+
+type State = {|
+  errorMessage: string | null,
+  hasError: boolean,
+|};
+
+const InitialState: State = {
+  errorMessage: null,
+  hasError: false,
+};
+
+class InspectedElementErrorBoundary extends Component<Props, State> {
+  state: State = InitialState;
+
+  static getDerivedStateFromError(error: any) {
+    const errorMessage =
+      typeof error === 'object' &&
+      error !== null &&
+      error.hasOwnProperty('message')
+        ? error.message
+        : error;
+
+    return {
+      errorMessage,
+      hasError: true,
+    };
+  }
+
+  render() {
+    const {children} = this.props;
+    const {errorMessage, hasError} = this.state;
+
+    if (hasError) {
+      return (
+        <div className={styles.Error}>
+          <div className={styles.Message}>{errorMessage || 'Error'}</div>
+          <Button className={styles.RetryButton} onClick={this._retry}>
+            Dismiss
+          </Button>
+        </div>
+      );
+    }
+
+    return children;
+  }
+
+  _retry = () => {
+    const {dispatch} = this.props;
+    dispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: null,
+    });
+    this.setState({
+      errorMessage: null,
+      hasError: false,
+    });
+  };
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 1f161c98836b..3b7aaca3216d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -8,14 +8,21 @@
  */
 
 import * as React from 'react';
-import {useContext} from 'react';
+import {
+  useContext,
+  unstable_useCacheRefresh as useCacheRefresh,
+  unstable_useTransition as 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 {SettingsContext} from '../Settings/SettingsContext';
-import {InspectedElementContext} from './InspectedElementContext';
+import {
+  clearErrorsForElement as clearErrorsForElementAPI,
+  clearWarningsForElement as clearWarningsForElementAPI,
+} from 'react-devtools-shared/src/backendAPI';
 
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -31,7 +38,45 @@ export default function InspectedElementErrorsAndWarningsTree({
   inspectedElement,
   store,
 }: Props) {
-  const {refreshInspectedElement} = useContext(InspectedElementContext);
+  const refresh = useCacheRefresh();
+
+  const [
+    startClearErrorsTransition,
+    isErrorsTransitionPending,
+  ] = useTransition();
+  const clearErrorsForInspectedElement = () => {
+    const {id} = inspectedElement;
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      startClearErrorsTransition(() => {
+        clearErrorsForElementAPI({
+          bridge,
+          id,
+          rendererID,
+        });
+        refresh();
+      });
+    }
+  };
+
+  const [
+    startClearWarningsTransition,
+    isWarningsTransitionPending,
+  ] = useTransition();
+  const clearWarningsForInspectedElement = () => {
+    const {id} = inspectedElement;
+    const rendererID = store.getRendererIDForElement(id);
+    if (rendererID !== null) {
+      startClearWarningsTransition(() => {
+        clearWarningsForElementAPI({
+          bridge,
+          id,
+          rendererID,
+        });
+        refresh();
+      });
+    }
+  };
 
   const {showInlineWarningsAndErrors} = useContext(SettingsContext);
   if (!showInlineWarningsAndErrors) {
@@ -40,26 +85,6 @@ export default function InspectedElementErrorsAndWarningsTree({
 
   const {errors, warnings} = inspectedElement;
 
-  const clearErrors = () => {
-    const {id} = inspectedElement;
-    store.clearErrorsForElement(id);
-
-    // Immediately poll for updated data.
-    // This avoids a delay between clicking the clear button and refreshing errors.
-    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
-    refreshInspectedElement();
-  };
-
-  const clearWarnings = () => {
-    const {id} = inspectedElement;
-    store.clearWarningsForElement(id);
-
-    // Immediately poll for updated data.
-    // This avoids a delay between clicking the clear button and refreshing warnings.
-    // Ideally this would be done with useTranstion but that requires updating to a newer Cache strategy.
-    refreshInspectedElement();
-  };
-
   return (
     <React.Fragment>
       {errors.length > 0 && (
@@ -67,8 +92,9 @@ export default function InspectedElementErrorsAndWarningsTree({
           badgeClassName={styles.ErrorBadge}
           bridge={bridge}
           className={styles.ErrorTree}
-          clearMessages={clearErrors}
+          clearMessages={clearErrorsForInspectedElement}
           entries={errors}
+          isTransitionPending={isErrorsTransitionPending}
           label="errors"
           messageClassName={styles.Error}
         />
@@ -78,8 +104,9 @@ export default function InspectedElementErrorsAndWarningsTree({
           badgeClassName={styles.WarningBadge}
           bridge={bridge}
           className={styles.WarningTree}
-          clearMessages={clearWarnings}
+          clearMessages={clearWarningsForInspectedElement}
           entries={warnings}
+          isTransitionPending={isWarningsTransitionPending}
           label="warnings"
           messageClassName={styles.Warning}
         />
@@ -94,6 +121,7 @@ type TreeProps = {|
   className: string,
   clearMessages: () => {},
   entries: Array<[string, number]>,
+  isTransitionPending: boolean,
   label: string,
   messageClassName: string,
 |};
@@ -104,6 +132,7 @@ function Tree({
   className,
   clearMessages,
   entries,
+  isTransitionPending,
   label,
   messageClassName,
 }: TreeProps) {
@@ -115,6 +144,7 @@ function Tree({
       <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" />
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 3bb939b6d74e..4303f8e406ad 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -22,20 +22,20 @@ import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
 
 import type {InspectedElement} from './types';
-import type {GetInspectedElementPath} from './InspectedElementContext';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 type HooksTreeViewProps = {|
   bridge: FrontendBridge,
-  getInspectedElementPath: GetInspectedElementPath,
+  element: Element,
   inspectedElement: InspectedElement,
   store: Store,
 |};
 
 export function InspectedElementHooksTree({
   bridge,
-  getInspectedElementPath,
+  element,
   inspectedElement,
   store,
 }: HooksTreeViewProps) {
@@ -57,7 +57,7 @@ export function InspectedElementHooksTree({
         <InnerHooksTreeView
           hooks={hooks}
           id={id}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           inspectedElement={inspectedElement}
           path={[]}
         />
@@ -67,7 +67,7 @@ export function InspectedElementHooksTree({
 }
 
 type InnerHooksTreeViewProps = {|
-  getInspectedElementPath: GetInspectedElementPath,
+  element: Element,
   hooks: HooksTree,
   id: number,
   inspectedElement: InspectedElement,
@@ -75,7 +75,7 @@ type InnerHooksTreeViewProps = {|
 |};
 
 export function InnerHooksTreeView({
-  getInspectedElementPath,
+  element,
   hooks,
   id,
   inspectedElement,
@@ -85,7 +85,7 @@ export function InnerHooksTreeView({
   return hooks.map((hook, index) => (
     <HookView
       key={index}
-      getInspectedElementPath={getInspectedElementPath}
+      element={element}
       hook={hooks[index]}
       id={id}
       inspectedElement={inspectedElement}
@@ -95,20 +95,14 @@ export function InnerHooksTreeView({
 }
 
 type HookViewProps = {|
-  getInspectedElementPath: GetInspectedElementPath,
+  element: Element,
   hook: HooksNode,
   id: number,
   inspectedElement: InspectedElement,
   path: Array<string | number>,
 |};
 
-function HookView({
-  getInspectedElementPath,
-  hook,
-  id,
-  inspectedElement,
-  path,
-}: HookViewProps) {
+function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
   const {
     canEditHooks,
     canEditHooksAndDeletePaths,
@@ -195,7 +189,7 @@ function HookView({
   if (isCustomHook) {
     const subHooksView = Array.isArray(subHooks) ? (
       <InnerHooksTreeView
-        getInspectedElementPath={getInspectedElementPath}
+        element={element}
         hooks={subHooks}
         id={id}
         inspectedElement={inspectedElement}
@@ -210,7 +204,7 @@ function HookView({
         canRenamePaths={canRenamePaths}
         canRenamePathsAtDepth={canRenamePathsAtDepth}
         depth={1}
-        getInspectedElementPath={getInspectedElementPath}
+        element={element}
         hookID={hookID}
         inspectedElement={inspectedElement}
         name="subHooks"
@@ -244,7 +238,7 @@ function HookView({
               canRenamePaths={canRenamePaths}
               canRenamePathsAtDepth={canRenamePathsAtDepth}
               depth={1}
-              getInspectedElementPath={getInspectedElementPath}
+              element={element}
               hookID={hookID}
               inspectedElement={inspectedElement}
               name="DebugValue"
@@ -290,7 +284,7 @@ function HookView({
             canRenamePaths={canRenamePaths}
             canRenamePathsAtDepth={canRenamePathsAtDepth}
             depth={1}
-            getInspectedElementPath={getInspectedElementPath}
+            element={element}
             hookID={hookID}
             inspectedElement={inspectedElement}
             name={name}
@@ -311,7 +305,7 @@ function HookView({
             canEditValues={canEditValues}
             canRenamePaths={false}
             depth={1}
-            getInspectedElementPath={getInspectedElementPath}
+            element={element}
             hookID={hookID}
             inspectedElement={inspectedElement}
             name={name}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index a82389aa58d9..7b6569cd32ce 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -19,19 +19,19 @@ import styles from './InspectedElementSharedStyles.css';
 import {ElementTypeClass} from 'react-devtools-shared/src/types';
 
 import type {InspectedElement} from './types';
-import type {GetInspectedElementPath} from './InspectedElementContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 type Props = {|
   bridge: FrontendBridge,
-  getInspectedElementPath: GetInspectedElementPath,
+  element: Element,
   inspectedElement: InspectedElement,
   store: Store,
 |};
 
 export default function InspectedElementPropsTree({
   bridge,
-  getInspectedElementPath,
+  element,
   inspectedElement,
   store,
 }: Props) {
@@ -78,7 +78,7 @@ export default function InspectedElementPropsTree({
             canEditValues={canEditValues}
             canRenamePaths={canRenamePaths}
             depth={1}
-            getInspectedElementPath={getInspectedElementPath}
+            element={element}
             hidden={false}
             inspectedElement={inspectedElement}
             name={name}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
index 6d8e5ff740cf..a8658fa3df80 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -17,19 +17,19 @@ import Store from '../../store';
 import styles from './InspectedElementSharedStyles.css';
 
 import type {InspectedElement} from './types';
-import type {GetInspectedElementPath} from './InspectedElementContext';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 type Props = {|
   bridge: FrontendBridge,
-  getInspectedElementPath: GetInspectedElementPath,
+  element: Element,
   inspectedElement: InspectedElement,
   store: Store,
 |};
 
 export default function InspectedElementStateTree({
   bridge,
-  getInspectedElementPath,
+  element,
   inspectedElement,
   store,
 }: Props) {
@@ -68,7 +68,7 @@ export default function InspectedElementStateTree({
               canEditValues={true}
               canRenamePaths={true}
               depth={1}
-              getInspectedElementPath={getInspectedElementPath}
+              element={element}
               hidden={false}
               inspectedElement={inspectedElement}
               name={name}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index a1c77b9b37b1..4d8662d80dae 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -27,15 +27,14 @@ import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
 import NativeStyleEditor from './NativeStyleEditor';
 import Badge from './Badge';
 import {useHighlightNativeElement} from '../hooks';
+import {
+  copyInspectedElementPath as copyInspectedElementPathAPI,
+  storeAsGlobal as storeAsGlobalAPI,
+} from 'react-devtools-shared/src/backendAPI';
 
 import styles from './InspectedElementView.css';
 
 import type {ContextMenuContextType} from '../context';
-import type {
-  CopyInspectedElementPath,
-  GetInspectedElementPath,
-  StoreAsGlobal,
-} from './InspectedElementContext';
 import type {Element, InspectedElement, Owner} from './types';
 import type {ElementType} from 'react-devtools-shared/src/types';
 
@@ -43,19 +42,13 @@ export type CopyPath = (path: Array<string | number>) => void;
 export type InspectPath = (path: Array<string | number>) => void;
 
 type Props = {|
-  copyInspectedElementPath: CopyInspectedElementPath,
   element: Element,
-  getInspectedElementPath: GetInspectedElementPath,
   inspectedElement: InspectedElement,
-  storeAsGlobal: StoreAsGlobal,
 |};
 
 export default function InspectedElementView({
-  copyInspectedElementPath,
   element,
-  getInspectedElementPath,
   inspectedElement,
-  storeAsGlobal,
 }: Props) {
   const {id} = element;
   const {
@@ -89,7 +82,7 @@ export default function InspectedElementView({
 
         <InspectedElementPropsTree
           bridge={bridge}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           inspectedElement={inspectedElement}
           store={store}
         />
@@ -102,28 +95,28 @@ export default function InspectedElementView({
 
         <InspectedElementStateTree
           bridge={bridge}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           inspectedElement={inspectedElement}
           store={store}
         />
 
         <InspectedElementHooksTree
           bridge={bridge}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           inspectedElement={inspectedElement}
           store={store}
         />
 
         <InspectedElementContextTree
           bridge={bridge}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           inspectedElement={inspectedElement}
           store={store}
         />
 
         <InspectedElementErrorsAndWarningsTree
           bridge={bridge}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           inspectedElement={inspectedElement}
           store={store}
         />
@@ -160,34 +153,60 @@ export default function InspectedElementView({
 
       {isContextMenuEnabledForInspectedElement && (
         <ContextMenu id="InspectedElement">
-          {data => (
-            <Fragment>
-              <ContextMenuItem
-                onClick={() => copyInspectedElementPath(id, data.path)}
-                title="Copy value to clipboard">
-                <Icon className={styles.ContextMenuIcon} type="copy" /> Copy
-                value to clipboard
-              </ContextMenuItem>
-              <ContextMenuItem
-                onClick={() => storeAsGlobal(id, data.path)}
-                title="Store as global variable">
-                <Icon
-                  className={styles.ContextMenuIcon}
-                  type="store-as-global-variable"
-                />{' '}
-                Store as global variable
-              </ContextMenuItem>
-              {viewAttributeSourceFunction !== null &&
-                data.type === 'function' && (
-                  <ContextMenuItem
-                    onClick={() => viewAttributeSourceFunction(id, data.path)}
-                    title="Go to definition">
-                    <Icon className={styles.ContextMenuIcon} type="code" /> Go
-                    to definition
-                  </ContextMenuItem>
-                )}
-            </Fragment>
-          )}
+          {({path, type: pathType}) => {
+            const copyInspectedElementPath = () => {
+              const rendererID = store.getRendererIDForElement(id);
+              if (rendererID !== null) {
+                copyInspectedElementPathAPI({
+                  bridge,
+                  id,
+                  path,
+                  rendererID,
+                });
+              }
+            };
+
+            const storeAsGlobal = () => {
+              const rendererID = store.getRendererIDForElement(id);
+              if (rendererID !== null) {
+                storeAsGlobalAPI({
+                  bridge,
+                  id,
+                  path,
+                  rendererID,
+                });
+              }
+            };
+
+            return (
+              <Fragment>
+                <ContextMenuItem
+                  onClick={copyInspectedElementPath}
+                  title="Copy value to clipboard">
+                  <Icon className={styles.ContextMenuIcon} type="copy" /> Copy
+                  value to clipboard
+                </ContextMenuItem>
+                <ContextMenuItem
+                  onClick={storeAsGlobal}
+                  title="Store as global variable">
+                  <Icon
+                    className={styles.ContextMenuIcon}
+                    type="store-as-global-variable"
+                  />{' '}
+                  Store as global variable
+                </ContextMenuItem>
+                {viewAttributeSourceFunction !== null &&
+                  pathType === 'function' && (
+                    <ContextMenuItem
+                      onClick={() => viewAttributeSourceFunction(id, path)}
+                      title="Go to definition">
+                      <Icon className={styles.ContextMenuIcon} type="code" /> Go
+                      to definition
+                    </ContextMenuItem>
+                  )}
+              </Fragment>
+            );
+          }}
         </ContextMenu>
       )}
     </Fragment>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index 4add9729d833..dec3e2df9617 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -2,6 +2,10 @@
   display: flex;
 }
 
+.DisabledItem {
+  opacity: 0.5;
+}
+
 .Name {
   color: var(--color-attribute-name-not-editable);
   flex: 0 0 auto;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 539ba467cde8..aa5b1bc56eec 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -8,11 +8,17 @@
  */
 
 import * as React from 'react';
-import {useEffect, useRef, useState} from 'react';
+import {
+  unstable_useTransition as useTransition,
+  useContext,
+  useRef,
+  useState,
+} from 'react';
 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';
@@ -22,11 +28,12 @@ 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 {InspectedElementContext} from './InspectedElementContext';
 
 import type {InspectedElement} from './types';
-import type {Element} from 'react';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+import type {Element as ReactElement} from 'react';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
-import type {GetInspectedElementPath} from './InspectedElementContext';
 
 type Type = 'props' | 'state' | 'context' | 'hooks';
 
@@ -38,9 +45,9 @@ type KeyValueProps = {|
   canRenamePaths: boolean,
   canRenamePathsAtDepth?: (depth: number) => boolean,
   depth: number,
+  element: Element,
   hidden: boolean,
   hookID?: ?number,
-  getInspectedElementPath: GetInspectedElementPath,
   inspectedElement: InspectedElement,
   isDirectChildOfAnArray?: boolean,
   name: string,
@@ -58,7 +65,7 @@ export default function KeyValue({
   canRenamePaths,
   canRenamePathsAtDepth,
   depth,
-  getInspectedElementPath,
+  element,
   inspectedElement,
   isDirectChildOfAnArray,
   hidden,
@@ -72,9 +79,10 @@ export default function KeyValue({
   const {id} = inspectedElement;
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
-  const prevIsOpenRef = useRef(isOpen);
   const contextMenuTriggerRef = useRef(null);
 
+  const {inspectPaths} = useContext(InspectedElementContext);
+
   let isInspectable = false;
   let isReadOnly = false;
   if (value !== null && typeof value === 'object') {
@@ -82,14 +90,20 @@ export default function KeyValue({
     isReadOnly = value[meta.readonly];
   }
 
-  useEffect(() => {
-    if (isInspectable && isOpen && !prevIsOpenRef.current) {
-      getInspectedElementPath(id, [pathRoot, ...path]);
-    }
-    prevIsOpenRef.current = isOpen;
-  }, [getInspectedElementPath, isInspectable, isOpen, path, pathRoot]);
+  const [startInspectPathsTransition, isInspectPathsPending] = useTransition();
+  const toggleIsOpen = () => {
+    if (isOpen) {
+      setIsOpen(false);
+    } else {
+      setIsOpen(true);
 
-  const toggleIsOpen = () => setIsOpen(prevIsOpen => !prevIsOpen);
+      if (isInspectable) {
+        startInspectPathsTransition(() => {
+          inspectPaths([pathRoot, ...path]);
+        });
+      }
+    }
+  };
 
   useContextMenu({
     data: {
@@ -255,7 +269,7 @@ export default function KeyValue({
         ref={contextMenuTriggerRef}
         style={style}>
         {isInspectable ? (
-          <ExpandCollapseToggle isOpen={isOpen} setIsOpen={setIsOpen} />
+          <ExpandCollapseToggle isOpen={isOpen} setIsOpen={toggleIsOpen} />
         ) : (
           <div className={styles.ExpandCollapseToggleSpacer} />
         )}
@@ -268,6 +282,18 @@ export default function KeyValue({
         </span>
       </div>
     );
+
+    if (isInspectPathsPending) {
+      children = (
+        <>
+          {children}
+          <div className={styles.Item} style={style}>
+            <div className={styles.ExpandCollapseToggleSpacer} />
+            <LoadingAnimation />
+          </div>
+        </>
+      );
+    }
   } else {
     if (Array.isArray(value)) {
       const hasChildren = value.length > 0 || canEditValues;
@@ -283,7 +309,7 @@ export default function KeyValue({
           canRenamePaths={canRenamePaths && !isReadOnly}
           canRenamePathsAtDepth={canRenamePathsAtDepth}
           depth={depth + 1}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           hookID={hookID}
           inspectedElement={inspectedElement}
           isDirectChildOfAnArray={true}
@@ -305,7 +331,7 @@ export default function KeyValue({
             hidden={hidden || !isOpen}
             hookID={hookID}
             index={value.length}
-            getInspectedElementPath={getInspectedElementPath}
+            element={element}
             inspectedElement={inspectedElement}
             path={path}
             store={store}
@@ -347,7 +373,7 @@ export default function KeyValue({
       const hasChildren = entries.length > 0 || canEditValues;
       const displayName = getMetaValueLabel(value);
 
-      children = entries.map<Element<any>>(([key, keyValue]) => (
+      children = entries.map<ReactElement<any>>(([key, keyValue]) => (
         <KeyValue
           key={key}
           alphaSort={alphaSort}
@@ -357,7 +383,7 @@ export default function KeyValue({
           canRenamePaths={canRenamePaths && !isReadOnly}
           canRenamePathsAtDepth={canRenamePathsAtDepth}
           depth={depth + 1}
-          getInspectedElementPath={getInspectedElementPath}
+          element={element}
           hookID={hookID}
           inspectedElement={inspectedElement}
           hidden={hidden || !isOpen}
@@ -375,7 +401,7 @@ export default function KeyValue({
             key="NewKeyValue"
             bridge={bridge}
             depth={depth + 1}
-            getInspectedElementPath={getInspectedElementPath}
+            element={element}
             hidden={hidden || !isOpen}
             hookID={hookID}
             inspectedElement={inspectedElement}
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 000000000000..2141ede58bd7
--- /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 000000000000..eb3268cefcbb
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 styles from './LoadingAnimation.css';
+
+type Props = {|
+  className?: string,
+|};
+
+export default function LoadingAnimation({className = ''}: Props) {
+  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/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 467af81b77f3..629bc0f72113 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -32,7 +32,7 @@ import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
 import {useHighlightNativeElement, 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';
@@ -327,6 +327,10 @@ export default function Tree(props: Props) {
   );
   const {errors, warnings} = useSubscription(errorsOrWarningsSubscription);
 
+  const clearErrorsAndWarnings = () => {
+    clearErrorsAndWarningsAPI({bridge, store});
+  };
+
   return (
     <TreeFocusedContext.Provider value={treeFocused}>
       <div className={styles.Tree} ref={treeRef}>
@@ -368,7 +372,7 @@ export default function Tree(props: Props) {
                   <ButtonIcon type="down" />
                 </Button>
                 <Button
-                  onClick={() => store.clearErrorsAndWarnings()}
+                  onClick={clearErrorsAndWarnings}
                   title="Clear all errors and warnings">
                   <ButtonIcon type="clear" />
                 </Button>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
index bd932cff395f..7b777115d3b5 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
@@ -38,14 +38,25 @@ const InitialState: State = {
 export default class ErrorBoundary extends Component<Props, State> {
   state: State = InitialState;
 
-  componentDidCatch(error: any, {componentStack}: any) {
+  static getDerivedStateFromError(error: any) {
     const errorMessage =
-      typeof error === 'object' && error.hasOwnProperty('message')
+      typeof error === 'object' &&
+      error !== null &&
+      error.hasOwnProperty('message')
         ? error.message
         : error;
 
+    return {
+      errorMessage,
+      hasError: true,
+    };
+  }
+
+  componentDidCatch(error: any, {componentStack}: any) {
     const callStack =
-      typeof error === 'object' && error.hasOwnProperty('stack')
+      typeof error === 'object' &&
+      error !== null &&
+      error.hasOwnProperty('stack')
         ? error.stack
             .split('\n')
             .slice(1)
@@ -55,8 +66,6 @@ export default class ErrorBoundary extends Component<Props, State> {
     this.setState({
       callStack,
       componentStack,
-      errorMessage,
-      hasError: true,
     });
   }
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
new file mode 100644
index 000000000000..6169207df0db
--- /dev/null
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -0,0 +1,220 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {
+  unstable_getCacheForType,
+  unstable_startTransition as startTransition,
+} from 'react';
+import Store from './devtools/store';
+import {
+  convertInspectedElementBackendToFrontend,
+  inspectElement as inspectElementAPI,
+} from './backendAPI';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Wakeable} from 'shared/ReactTypes';
+import type {
+  InspectedElement as InspectedElementBackend,
+  InspectedElementPayload,
+} from 'react-devtools-shared/src/backend/types';
+import type {
+  Element,
+  InspectedElement as InspectedElementFrontend,
+} from 'react-devtools-shared/src/devtools/views/Components/types';
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingRecord = {|
+  status: 0,
+  value: Wakeable,
+|};
+
+type ResolvedRecord<T> = {|
+  status: 1,
+  value: T,
+|};
+
+type RejectedRecord = {|
+  status: 2,
+  value: string,
+|};
+
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
+
+function readRecord<T>(record: Record<T>): ResolvedRecord<T> {
+  if (record.status === Resolved) {
+    // This is just a type refinement.
+    return record;
+  } else {
+    throw record.value;
+  }
+}
+
+type InspectedElementMap = WeakMap<Element, Record<InspectedElementFrontend>>;
+type CacheSeedKey = () => InspectedElementMap;
+
+function createMap(): InspectedElementMap {
+  return new WeakMap();
+}
+
+function getRecordMap(): WeakMap<Element, Record<InspectedElementFrontend>> {
+  return unstable_getCacheForType(createMap);
+}
+
+function createCacheSeed(
+  element: Element,
+  inspectedElement: InspectedElementFrontend,
+): [CacheSeedKey, InspectedElementMap] {
+  const newRecord: Record<InspectedElementFrontend> = {
+    status: Resolved,
+    value: inspectedElement,
+  };
+  const map = createMap();
+  map.set(element, newRecord);
+  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,
+  inspectedPaths: Object,
+  forceUpdate: boolean,
+  store: Store,
+  bridge: FrontendBridge,
+): InspectedElementFrontend | null {
+  const map = getRecordMap();
+  let record = map.get(element);
+  if (!record) {
+    const callbacks = new Set();
+    const wakeable: Wakeable = {
+      then(callback) {
+        callbacks.add(callback);
+      },
+    };
+    const wake = () => {
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback());
+      callbacks.clear();
+    };
+    const newRecord: Record<InspectedElementFrontend> = (record = {
+      status: Pending,
+      value: wakeable,
+    });
+
+    const rendererID = store.getRendererIDForElement(element.id);
+    if (rendererID == null) {
+      const rejectedRecord = ((newRecord: any): RejectedRecord);
+      rejectedRecord.status = Rejected;
+      rejectedRecord.value = 'Inspected element not found.';
+      return null;
+    }
+
+    inspectElementAPI({
+      bridge,
+      forceUpdate: true,
+      id: element.id,
+      inspectedPaths,
+      rendererID: ((rendererID: any): number),
+    }).then(
+      (data: InspectedElementPayload) => {
+        if (newRecord.status === Pending) {
+          switch (data.type) {
+            case 'no-change':
+              // This response type should never be received.
+              // We always send forceUpdate:true when we have a cache miss.
+              break;
+
+            case 'not-found':
+              const notFoundRecord = ((newRecord: any): RejectedRecord);
+              notFoundRecord.status = Rejected;
+              notFoundRecord.value = 'Inspected element not found.';
+              wake();
+              break;
+
+            case 'full-data':
+              const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
+              resolvedRecord.status = Resolved;
+              resolvedRecord.value = convertInspectedElementBackendToFrontend(
+                ((data.value: any): InspectedElementBackend),
+              );
+              wake();
+              break;
+          }
+        }
+      },
+
+      () => {
+        // Timed out without receiving a response.
+        if (newRecord.status === Pending) {
+          const timedOutRecord = ((newRecord: any): RejectedRecord);
+          timedOutRecord.status = Rejected;
+          timedOutRecord.value = 'Inspected element timed out.';
+          wake();
+        }
+      },
+    );
+    map.set(element, record);
+  }
+
+  const response = readRecord(record).value;
+  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,
+  inspectedPaths,
+  refresh,
+  store,
+}: {
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedPaths: Object,
+  refresh: RefreshFunction,
+  store: Store,
+}): void {
+  const {id} = element;
+  const rendererID = store.getRendererIDForElement(id);
+  if (rendererID != null) {
+    inspectElementAPI({
+      bridge,
+      forceUpdate: false,
+      id,
+      inspectedPaths,
+      rendererID,
+    }).then((data: InspectedElementPayload) => {
+      switch (data.type) {
+        case 'full-data':
+          const inspectedElement = convertInspectedElementBackendToFrontend(
+            ((data.value: any): InspectedElementBackend),
+          );
+          startTransition(() => {
+            const [key, value] = createCacheSeed(element, inspectedElement);
+            refresh(key, value);
+          });
+          break;
+      }
+    });
+  }
+}
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 16e488409e0c..c6ffacb27bab 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -23,7 +23,7 @@ export const enableSchedulerTracing = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 0d5a6039e414..761479ce45c5 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -58,6 +58,9 @@ module.exports = Object.assign({}, baseConfig, {
   transformIgnorePatterns: ['/node_modules/', '<rootDir>/build2/'],
   testRegex: 'packages/react-devtools-shared/src/__tests__/[^]+.test.js$',
   snapshotSerializers: [
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js'
+    ),
     require.resolve(
       '../../packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js'
     ),
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
index f57005c9407f..072071be07fb 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -59,6 +59,10 @@ const babelOptions = {
 
 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 '';
+    }
     if (filePath.match(/\.coffee$/)) {
       return coffee.compile(src, {bare: true});
     }

From ba9582da27481677cdac2dd000a438147a5df88e Mon Sep 17 00:00:00 2001
From: ChenLei <2470828450@qq.com>
Date: Tue, 19 Jan 2021 23:26:52 +0800
Subject: [PATCH 0181/1603] [devtools] Fix can't expand prop value in some
 scenario (#20534)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../src/__tests__/inspectedElement-test.js    | 77 +++++++++++++++++++
 .../__tests__/legacy/inspectElement-test.js   | 60 +++++++++++++++
 .../react-devtools-shared/src/hydration.js    |  4 +-
 packages/react-devtools-shared/src/utils.js   |  8 +-
 4 files changed, 144 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 6a596a8b4a62..70a59b135e85 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -1168,6 +1168,83 @@ describe('InspectedElement', () => {
     done();
   });
 
+  it('should allow component prop value and value`s prototype has same name params.', async done => {
+    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;
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example data={testData} />, container),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+
+    let inspectedElement = null;
+
+    function Suspender({target}) {
+      inspectedElement = useInspectedElement(target);
+      return null;
+    }
+
+    await utils.actAsync(
+      () =>
+        TestRenderer.create(
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={0}>
+            <React.Suspense fallback={null}>
+              <Suspender target={id} />
+            </React.Suspense>
+          </Contexts>,
+        ),
+      false,
+    );
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "data": Object {
+          "a": undefined,
+          "b": Infinity,
+          "c": NaN,
+          "d": "normal",
+        },
+      }
+    `);
+
+    done();
+  });
+
   it('should not dehydrate nested values until explicitly requested', async done => {
     const Example = () => {
       const [state] = React.useState({
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 05d2bdcbeb6e..6d446ca481de 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -588,6 +588,66 @@ describe('InspectedElementContext', () => {
     done();
   });
 
+  it('should allow component prop value and value`s prototype has same name params.', async done => {
+    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(
+        <Example data={testData} />,
+        document.createElement('div'),
+      ),
+    );
+
+    const id = ((store.getElementIDAtIndex(0): any): number);
+    const inspectedElement = await read(id);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "data": Object {
+          "a": undefined,
+          "b": Infinity,
+          "c": NaN,
+          "d": "normal",
+        },
+      }
+    `);
+    done();
+  });
+
   it('should not dehydrate nested values until explicitly requested', async done => {
     const Example = () => null;
 
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 24379d675c4a..69909cb2f658 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -383,7 +383,9 @@ export function hydrate(
 
     const value = parent[last];
 
-    if (value.type === 'infinity') {
+    if (!value) {
+      return;
+    } else if (value.type === 'infinity') {
       parent[last] = Infinity;
     } else if (value.type === 'nan') {
       parent[last] = NaN;
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index d84d5e67e98b..be31af5c85ac 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -70,8 +70,8 @@ export function alphaSortKeys(
 
 export function getAllEnumerableKeys(
   obj: Object,
-): Array<string | number | Symbol> {
-  const keys = [];
+): Set<string | number | Symbol> {
+  const keys = new Set();
   let current = obj;
   while (current != null) {
     const currentKeys = [
@@ -82,7 +82,7 @@ export function getAllEnumerableKeys(
     currentKeys.forEach(key => {
       // $FlowFixMe: key can be a Symbol https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor
       if (descriptors[key].enumerable) {
-        keys.push(key);
+        keys.add(key);
       }
     });
     current = Object.getPrototypeOf(current);
@@ -767,7 +767,7 @@ export function formatDataForPreview(
       return data.toString();
     case 'object':
       if (showFormattedValue) {
-        const keys = getAllEnumerableKeys(data).sort(alphaSortKeys);
+        const keys = Array.from(getAllEnumerableKeys(data)).sort(alphaSortKeys);
 
         let formatted = '';
         for (let i = 0; i < keys.length; i++) {

From 2b6985114f660f3d0ad4c3eb8efece2cbdb44eb8 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 19 Jan 2021 17:14:06 +0100
Subject: [PATCH 0182/1603] build-combined: Fix failures  when renaming across
 devices (#20620)

---
 scripts/rollup/build-all-release-channels.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 0b74e4c42d8e..badd6f7c9ff0 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -3,6 +3,7 @@
 /* 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');
@@ -50,13 +51,13 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   const stableVersion = '0.0.0-' + sha;
   buildForChannel('stable', '', '');
   const stableDir = tmp.dirSync().name;
-  fs.renameSync('./build', stableDir);
+  crossDeviceRenameSync('./build', stableDir);
   processStable(stableDir, stableVersion);
 
   const experimentalVersion = '0.0.0-experimental-' + sha;
   buildForChannel('experimental', '', '');
   const experimentalDir = tmp.dirSync().name;
-  fs.renameSync('./build', experimentalDir);
+  crossDeviceRenameSync('./build', experimentalDir);
   processExperimental(experimentalDir, experimentalVersion);
 
   // Then merge the experimental folder into the stable one. processExperimental
@@ -68,7 +69,7 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   // Now restore the combined directory back to its original name
   // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
   // with old build job. Remove once we migrate rest of build/test pipeline.
-  fs.renameSync(stableDir, './build2');
+  crossDeviceRenameSync(stableDir, './build2');
 }
 
 function buildForChannel(channel, nodeTotal, nodeIndex) {
@@ -139,6 +140,10 @@ function processExperimental(buildDir, version) {
   }
 }
 
+function crossDeviceRenameSync(source, destination) {
+  return fse.moveSync(source, destination, {overwrite: true});
+}
+
 function updatePackageVersions(modulesDir, version) {
   const allReactModuleNames = fs.readdirSync('packages');
   for (const moduleName of fs.readdirSync(modulesDir)) {

From af0bb68e87476c0d72ceb5ffed7263924ee18c10 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Jan 2021 10:37:51 -0600
Subject: [PATCH 0183/1603] Land #20595 and #20596 in main fork (#20602)

---
 .../__tests__/ReactWrongReturnPointer-test.js |   1 -
 .../src/ReactChildFiber.old.js                |  13 +-
 .../src/ReactFiberBeginWork.old.js            |  10 +-
 .../src/ReactFiberCommitWork.old.js           | 761 ++++++++++++------
 .../src/ReactFiberHydrationContext.old.js     |   5 +-
 .../src/ReactFiberWorkLoop.old.js             | 240 +-----
 scripts/jest/TestFlags.js                     |   2 +-
 7 files changed, 540 insertions(+), 492 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index 72cb43d75386..9329a2aa34fc 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -17,7 +17,6 @@ beforeEach(() => {
 
 // Don't feel too guilty if you have to delete this test.
 // @gate dfsEffectsRefactor
-// @gate new
 // @gate __DEV__
 test('warns in DEV if return pointer is inconsistent', async () => {
   const {useRef, useLayoutEffect} = React;
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index f1a52dedeebb..1f774b26813b 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -282,22 +282,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     childToDelete.nextEffect = null;
     childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
-    let deletions = returnFiber.deletions;
+    const deletions = returnFiber.deletions;
     if (deletions === null) {
-      deletions = returnFiber.deletions = [childToDelete];
+      returnFiber.deletions = [childToDelete];
       returnFiber.flags |= ChildDeletion;
     } else {
       deletions.push(childToDelete);
     }
-    // Stash a reference to the return fiber's deletion array on each of the
-    // deleted children. This is really weird, but it's a temporary workaround
-    // while we're still using the effect list to traverse effect fibers. A
-    // better workaround would be to follow the `.return` pointer in the commit
-    // phase, but unfortunately we can't assume that `.return` points to the
-    // correct fiber, even in the commit phase, because `findDOMNode` might
-    // mutate it.
-    // TODO: Remove this line.
-    childToDelete.deletions = deletions;
   }
 
   function deleteRemainingChildren(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 5a25d0a9cd65..bf03aeb24012 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2203,14 +2203,13 @@ function updateSuspensePrimaryChildren(
     currentFallbackChildFragment.flags =
       (currentFallbackChildFragment.flags & StaticMask) | Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
-    let deletions = workInProgress.deletions;
+    const deletions = workInProgress.deletions;
     if (deletions === null) {
-      deletions = workInProgress.deletions = [currentFallbackChildFragment];
+      workInProgress.deletions = [currentFallbackChildFragment];
       workInProgress.flags |= ChildDeletion;
     } else {
       deletions.push(currentFallbackChildFragment);
     }
-    currentFallbackChildFragment.deletions = deletions;
   }
 
   workInProgress.child = primaryChildFragment;
@@ -3194,14 +3193,13 @@ function remountFiber(
     current.nextEffect = null;
     current.flags = (current.flags & StaticMask) | Deletion;
 
-    let deletions = returnFiber.deletions;
+    const deletions = returnFiber.deletions;
     if (deletions === null) {
-      deletions = returnFiber.deletions = [current];
+      returnFiber.deletions = [current];
       returnFiber.flags |= ChildDeletion;
     } else {
       deletions.push(current);
     }
-    current.deletions = deletions;
 
     newWorkInProgress.flags |= Placement;
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index d3bfe78e3947..fdc9868dbe9b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -66,11 +66,18 @@ import {
   NoFlags,
   ContentReset,
   Placement,
+  PlacementAndUpdate,
   ChildDeletion,
   Snapshot,
   Update,
+  Callback,
+  Ref,
+  Hydrating,
+  HydratingAndUpdate,
   Passive,
+  MutationMask,
   PassiveMask,
+  LayoutMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
@@ -490,95 +497,154 @@ export function commitPassiveEffectDurations(
   }
 }
 
-function commitLifeCycles(
+function commitLayoutEffectOnFiber(
   finishedRoot: FiberRoot,
   current: Fiber | null,
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
-      // 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 (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
+  if ((finishedWork.flags & (Update | Callback)) !== NoFlags) {
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        // 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 (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          try {
+            startLayoutEffectTimer();
+            commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+          } finally {
+            recordLayoutEffectDuration(finishedWork);
+          }
+        } else {
           commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
         }
-      } else {
-        commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-      }
 
-      schedulePassiveEffects(finishedWork);
-      return;
-    }
-    case ClassComponent: {
-      const instance = finishedWork.stateNode;
-      if (finishedWork.flags & Update) {
-        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__) {
+        schedulePassiveEffects(finishedWork);
+        break;
+      }
+      case ClassComponent: {
+        const instance = finishedWork.stateNode;
+        if (finishedWork.flags & Update) {
+          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 === finishedWork.elementType &&
+                !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.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+                if (instance.state !== finishedWork.memoizedState) {
+                  console.error(
+                    'Expected %s state to match memoized state before ' +
+                      'componentDidMount. ' +
+                      'This might either be because of a bug in React, or because ' +
+                      'a component reassigns its own `this.state`. ' +
+                      'Please file an issue.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+              }
+            }
             if (
-              finishedWork.type === finishedWork.elementType &&
-              !didWarnAboutReassigningProps
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
             ) {
-              if (instance.props !== finishedWork.memoizedProps) {
-                console.error(
-                  'Expected %s props to match memoized props before ' +
-                    'componentDidMount. ' +
-                    'This might either be because of a bug in React, or because ' +
-                    'a component reassigns its own `this.props`. ' +
-                    'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
-                );
+              try {
+                startLayoutEffectTimer();
+                instance.componentDidMount();
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
               }
-              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.',
-                  getComponentName(finishedWork.type) || 'instance',
-                );
-              }
-            }
-          }
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            finishedWork.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
+            } else {
               instance.componentDidMount();
-            } finally {
-              recordLayoutEffectDuration(finishedWork);
             }
           } else {
-            instance.componentDidMount();
+            const prevProps =
+              finishedWork.elementType === finishedWork.type
+                ? current.memoizedProps
+                : resolveDefaultProps(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 === finishedWork.elementType &&
+                !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.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+                if (instance.state !== finishedWork.memoizedState) {
+                  console.error(
+                    'Expected %s state to match memoized state before ' +
+                      'componentDidUpdate. ' +
+                      'This might either be because of a bug in React, or because ' +
+                      'a component reassigns its own `this.state`. ' +
+                      'Please file an issue.',
+                    getComponentName(finishedWork.type) || 'instance',
+                  );
+                }
+              }
+            }
+            if (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
+                instance.componentDidUpdate(
+                  prevProps,
+                  prevState,
+                  instance.__reactInternalSnapshotBeforeUpdate,
+                );
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
+              }
+            } else {
+              instance.componentDidUpdate(
+                prevProps,
+                prevState,
+                instance.__reactInternalSnapshotBeforeUpdate,
+              );
+            }
           }
-        } else {
-          const prevProps =
-            finishedWork.elementType === finishedWork.type
-              ? current.memoizedProps
-              : resolveDefaultProps(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.
+        }
+
+        // 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<
+          *,
+        > | null = (finishedWork.updateQueue: any);
+        if (updateQueue !== null) {
           if (__DEV__) {
             if (
               finishedWork.type === finishedWork.elementType &&
@@ -587,7 +653,7 @@ function commitLifeCycles(
               if (instance.props !== finishedWork.memoizedProps) {
                 console.error(
                   'Expected %s props to match memoized props before ' +
-                    'componentDidUpdate. ' +
+                    '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.',
@@ -597,7 +663,7 @@ function commitLifeCycles(
               if (instance.state !== finishedWork.memoizedState) {
                 console.error(
                   'Expected %s state to match memoized state before ' +
-                    'componentDidUpdate. ' +
+                    '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.',
@@ -606,210 +672,166 @@ function commitLifeCycles(
               }
             }
           }
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            finishedWork.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              instance.componentDidUpdate(
-                prevProps,
-                prevState,
-                instance.__reactInternalSnapshotBeforeUpdate,
-              );
-            } finally {
-              recordLayoutEffectDuration(finishedWork);
-            }
-          } else {
-            instance.componentDidUpdate(
-              prevProps,
-              prevState,
-              instance.__reactInternalSnapshotBeforeUpdate,
-            );
-          }
+          // 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.
+          commitUpdateQueue(finishedWork, updateQueue, instance);
         }
+        break;
       }
-
-      // 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<
-        *,
-      > | null = (finishedWork.updateQueue: any);
-      if (updateQueue !== null) {
-        if (__DEV__) {
-          if (
-            finishedWork.type === finishedWork.elementType &&
-            !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.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
-            }
-            if (instance.state !== finishedWork.memoizedState) {
-              console.error(
-                'Expected %s state to match memoized state before ' +
-                  'processing the update queue. ' +
-                  'This might either be because of a bug in React, or because ' +
-                  'a component reassigns its own `this.state`. ' +
-                  'Please file an issue.',
-                getComponentName(finishedWork.type) || 'instance',
-              );
+      case HostRoot: {
+        // 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<
+          *,
+        > | null = (finishedWork.updateQueue: any);
+        if (updateQueue !== null) {
+          let instance = null;
+          if (finishedWork.child !== null) {
+            switch (finishedWork.child.tag) {
+              case HostComponent:
+                instance = getPublicInstance(finishedWork.child.stateNode);
+                break;
+              case ClassComponent:
+                instance = finishedWork.child.stateNode;
+                break;
             }
           }
+          commitUpdateQueue(finishedWork, updateQueue, 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.
-        commitUpdateQueue(finishedWork, updateQueue, instance);
+        break;
       }
-      return;
-    }
-    case HostRoot: {
-      // 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<
-        *,
-      > | null = (finishedWork.updateQueue: any);
-      if (updateQueue !== null) {
-        let instance = null;
-        if (finishedWork.child !== null) {
-          switch (finishedWork.child.tag) {
-            case HostComponent:
-              instance = getPublicInstance(finishedWork.child.stateNode);
-              break;
-            case ClassComponent:
-              instance = finishedWork.child.stateNode;
-              break;
-          }
+      case HostComponent: {
+        const instance: Instance = finishedWork.stateNode;
+
+        // 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 && finishedWork.flags & Update) {
+          const type = finishedWork.type;
+          const props = finishedWork.memoizedProps;
+          commitMount(instance, type, props, finishedWork);
         }
-        commitUpdateQueue(finishedWork, updateQueue, instance);
-      }
-      return;
-    }
-    case HostComponent: {
-      const instance: Instance = finishedWork.stateNode;
 
-      // 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 && finishedWork.flags & Update) {
-        const type = finishedWork.type;
-        const props = finishedWork.memoizedProps;
-        commitMount(instance, type, props, finishedWork);
+        break;
       }
+      case HostText: {
+        // We have no life-cycles associated with text.
+        break;
+      }
+      case HostPortal: {
+        // We have no life-cycles associated with portals.
+        break;
+      }
+      case Profiler: {
+        if (enableProfilerTimer) {
+          const {onCommit, onRender} = finishedWork.memoizedProps;
+          const {effectDuration} = finishedWork.stateNode;
 
-      return;
-    }
-    case HostText: {
-      // We have no life-cycles associated with text.
-      return;
-    }
-    case HostPortal: {
-      // We have no life-cycles associated with portals.
-      return;
-    }
-    case Profiler: {
-      if (enableProfilerTimer) {
-        const {onCommit, onRender} = finishedWork.memoizedProps;
-        const {effectDuration} = finishedWork.stateNode;
-
-        const commitTime = getCommitTime();
-
-        let phase = current === null ? 'mount' : 'update';
-        if (enableProfilerNestedUpdatePhase) {
-          if (isCurrentUpdateNested()) {
-            phase = 'nested-update';
-          }
-        }
+          const commitTime = getCommitTime();
 
-        if (typeof onRender === 'function') {
-          if (enableSchedulerTracing) {
-            onRender(
-              finishedWork.memoizedProps.id,
-              phase,
-              finishedWork.actualDuration,
-              finishedWork.treeBaseDuration,
-              finishedWork.actualStartTime,
-              commitTime,
-              finishedRoot.memoizedInteractions,
-            );
-          } else {
-            onRender(
-              finishedWork.memoizedProps.id,
-              phase,
-              finishedWork.actualDuration,
-              finishedWork.treeBaseDuration,
-              finishedWork.actualStartTime,
-              commitTime,
-            );
+          let phase = current === null ? 'mount' : 'update';
+          if (enableProfilerNestedUpdatePhase) {
+            if (isCurrentUpdateNested()) {
+              phase = 'nested-update';
+            }
           }
-        }
 
-        if (enableProfilerCommitHooks) {
-          if (typeof onCommit === 'function') {
+          if (typeof onRender === 'function') {
             if (enableSchedulerTracing) {
-              onCommit(
+              onRender(
                 finishedWork.memoizedProps.id,
                 phase,
-                effectDuration,
+                finishedWork.actualDuration,
+                finishedWork.treeBaseDuration,
+                finishedWork.actualStartTime,
                 commitTime,
                 finishedRoot.memoizedInteractions,
               );
             } else {
-              onCommit(
+              onRender(
                 finishedWork.memoizedProps.id,
                 phase,
-                effectDuration,
+                finishedWork.actualDuration,
+                finishedWork.treeBaseDuration,
+                finishedWork.actualStartTime,
                 commitTime,
               );
             }
           }
 
-          // 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.
-          enqueuePendingPassiveProfilerEffect(finishedWork);
+          if (enableProfilerCommitHooks) {
+            if (typeof onCommit === 'function') {
+              if (enableSchedulerTracing) {
+                onCommit(
+                  finishedWork.memoizedProps.id,
+                  phase,
+                  effectDuration,
+                  commitTime,
+                  finishedRoot.memoizedInteractions,
+                );
+              } else {
+                onCommit(
+                  finishedWork.memoizedProps.id,
+                  phase,
+                  effectDuration,
+                  commitTime,
+                );
+              }
+            }
 
-          // 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.
-          let parentFiber = finishedWork.return;
-          while (parentFiber !== null) {
-            if (parentFiber.tag === Profiler) {
-              const parentStateNode = parentFiber.stateNode;
-              parentStateNode.effectDuration += effectDuration;
-              break;
+            // 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.
+            enqueuePendingPassiveProfilerEffect(finishedWork);
+
+            // 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.
+            let parentFiber = finishedWork.return;
+            while (parentFiber !== null) {
+              if (parentFiber.tag === Profiler) {
+                const parentStateNode = parentFiber.stateNode;
+                parentStateNode.effectDuration += effectDuration;
+                break;
+              }
+              parentFiber = parentFiber.return;
             }
-            parentFiber = parentFiber.return;
           }
         }
+        break;
       }
-      return;
+      case SuspenseComponent: {
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+        break;
+      }
+      case SuspenseListComponent:
+      case IncompleteClassComponent:
+      case FundamentalComponent:
+      case ScopeComponent:
+      case OffscreenComponent:
+      case LegacyHiddenComponent:
+        break;
+      default:
+        invariant(
+          false,
+          'This unit of work tag should not have side-effects. This error is ' +
+            'likely caused by a bug in React. Please file an issue.',
+        );
     }
-    case SuspenseComponent: {
-      commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-      return;
+  }
+
+  if (enableScopeAPI) {
+    // TODO: This is a temporary solution that allowed us to transition away
+    // from React Flare on www.
+    if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
+      commitAttachRef(finishedWork);
+    }
+  } else {
+    if (finishedWork.flags & Ref) {
+      commitAttachRef(finishedWork);
     }
-    case SuspenseListComponent:
-    case IncompleteClassComponent:
-    case FundamentalComponent:
-    case ScopeComponent:
-    case OffscreenComponent:
-    case LegacyHiddenComponent:
-      return;
   }
-  invariant(
-    false,
-    'This unit of work tag should not have side-effects. This error is ' +
-      'likely caused by a bug in React. Please file an issue.',
-  );
 }
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
@@ -1823,12 +1845,254 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-export function commitPassiveMountEffects(
+export function commitMutationEffects(
   root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
   firstChild: Fiber,
-): void {
+) {
   nextEffect = firstChild;
-  commitPassiveMountEffects_begin(firstChild, root);
+  commitMutationEffects_begin(root, renderPriorityLevel);
+}
+
+function commitMutationEffects_begin(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // 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 childToDelete = deletions[i];
+        if (__DEV__) {
+          invokeGuardedCallback(
+            null,
+            commitDeletion,
+            null,
+            root,
+            childToDelete,
+            renderPriorityLevel,
+          );
+          if (hasCaughtError()) {
+            const error = clearCaughtError();
+            captureCommitPhaseError(childToDelete, error);
+          }
+        } else {
+          try {
+            commitDeletion(root, childToDelete, renderPriorityLevel);
+          } catch (error) {
+            captureCommitPhaseError(childToDelete, error);
+          }
+        }
+      }
+    }
+
+    const child = fiber.child;
+    if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitMutationEffects_complete(root, renderPriorityLevel);
+    }
+  }
+}
+
+function commitMutationEffects_complete(
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitMutationEffectsOnFiber,
+        null,
+        fiber,
+        root,
+        renderPriorityLevel,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
+      } catch (error) {
+        captureCommitPhaseError(fiber, error);
+      }
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  renderPriorityLevel: ReactPriorityLevel,
+) {
+  const flags = finishedWork.flags;
+
+  if (flags & ContentReset) {
+    commitResetTextContent(finishedWork);
+  }
+
+  if (flags & Ref) {
+    const current = finishedWork.alternate;
+    if (current !== null) {
+      commitDetachRef(current);
+    }
+    if (enableScopeAPI) {
+      // TODO: This is a temporary solution that allowed us to transition away
+      // from React Flare on www.
+      if (finishedWork.tag === ScopeComponent) {
+        commitAttachRef(finishedWork);
+      }
+    }
+  }
+
+  // The following switch statement is only concerned about placement,
+  // updates, and deletions. To avoid needing to add a case for every possible
+  // bitmap value, we remove the secondary effects from the effect tag and
+  // switch on that value.
+  const primaryFlags = flags & (Placement | Update | Hydrating);
+  outer: switch (primaryFlags) {
+    case Placement: {
+      commitPlacement(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;
+      break;
+    }
+    case PlacementAndUpdate: {
+      // Placement
+      commitPlacement(finishedWork);
+      // Clear the "placement" from effect tag so that we know that this is
+      // inserted, before any life-cycles like componentDidMount gets called.
+      finishedWork.flags &= ~Placement;
+
+      // Update
+      const current = finishedWork.alternate;
+      commitWork(current, finishedWork);
+      break;
+    }
+    case Hydrating: {
+      finishedWork.flags &= ~Hydrating;
+      break;
+    }
+    case HydratingAndUpdate: {
+      finishedWork.flags &= ~Hydrating;
+
+      // Update
+      const current = finishedWork.alternate;
+      commitWork(current, finishedWork);
+      break;
+    }
+    case Update: {
+      const current = finishedWork.alternate;
+      commitWork(current, finishedWork);
+      break;
+    }
+  }
+}
+
+export function commitLayoutEffects(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+): void {
+  nextEffect = finishedWork;
+  commitLayoutEffects_begin(finishedWork, root, committedLanes);
+}
+
+function commitLayoutEffects_begin(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+    if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
+      ensureCorrectReturnPointer(firstChild, fiber);
+      nextEffect = firstChild;
+    } else {
+      commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+    }
+  }
+}
+
+function commitLayoutMountEffects_complete(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if ((fiber.flags & LayoutMask) !== NoFlags) {
+      const current = fiber.alternate;
+      if (__DEV__) {
+        setCurrentDebugFiberInDEV(fiber);
+        invokeGuardedCallback(
+          null,
+          commitLayoutEffectOnFiber,
+          null,
+          root,
+          current,
+          fiber,
+          committedLanes,
+        );
+        if (hasCaughtError()) {
+          const error = clearCaughtError();
+          captureCommitPhaseError(fiber, error);
+        }
+        resetCurrentDebugFiberInDEV();
+      } else {
+        try {
+          commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
+        } catch (error) {
+          captureCommitPhaseError(fiber, error);
+        }
+      }
+    }
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
+export function commitPassiveMountEffects(
+  root: FiberRoot,
+  finishedWork: Fiber,
+): void {
+  nextEffect = finishedWork;
+  commitPassiveMountEffects_begin(finishedWork, root);
 }
 
 function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
@@ -2094,7 +2358,6 @@ export {
   commitPlacement,
   commitDeletion,
   commitWork,
-  commitLifeCycles,
   commitAttachRef,
   commitDetachRef,
 };
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index a1ca81dc502d..e0ed2901c52d 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -144,14 +144,13 @@ function deleteHydratableInstance(
     returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
   }
 
-  let deletions = returnFiber.deletions;
+  const deletions = returnFiber.deletions;
   if (deletions === null) {
-    deletions = returnFiber.deletions = [childToDelete];
+    returnFiber.deletions = [childToDelete];
     returnFiber.flags |= ChildDeletion;
   } else {
     deletions.push(childToDelete);
   }
-  childToDelete.deletions = deletions;
 }
 
 function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index caeab7ce6733..7ed5b098982a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -31,7 +31,6 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   enableSchedulingProfiler,
-  enableScopeAPI,
   disableSchedulerTimeoutInWorkLoop,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -116,7 +115,6 @@ import {
   ForwardRef,
   MemoComponent,
   SimpleMemoComponent,
-  ScopeComponent,
   Profiler,
 } from './ReactWorkTags';
 import {LegacyRoot} from './ReactRootTags';
@@ -124,20 +122,14 @@ import {
   NoFlags,
   PerformedWork,
   Placement,
-  Update,
-  PlacementAndUpdate,
   Deletion,
   ChildDeletion,
-  Ref,
-  ContentReset,
   Snapshot,
-  Callback,
   Passive,
   PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
-  HydratingAndUpdate,
   StaticMask,
 } from './ReactFiberFlags';
 import {
@@ -190,14 +182,9 @@ import {
 } from './ReactFiberThrow.old';
 import {
   commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
-  commitLifeCycles as commitLayoutEffectOnFiber,
-  commitPlacement,
-  commitWork,
-  commitDeletion,
-  commitDetachRef,
-  commitAttachRef,
+  commitLayoutEffects,
+  commitMutationEffects,
   commitPassiveEffectDurations,
-  commitResetTextContent,
   isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
@@ -2032,32 +2019,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     // The next phase is the mutation phase, where we mutate the host tree.
-    nextEffect = firstEffect;
-    do {
-      if (__DEV__) {
-        invokeGuardedCallback(
-          null,
-          commitMutationEffects,
-          null,
-          root,
-          renderPriorityLevel,
-        );
-        if (hasCaughtError()) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      } else {
-        try {
-          commitMutationEffects(root, renderPriorityLevel);
-        } catch (error) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      }
-    } while (nextEffect !== null);
+    commitMutationEffects(root, renderPriorityLevel, finishedWork);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -2073,28 +2035,24 @@ function commitRootImpl(root, renderPriorityLevel) {
     // 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.
-    nextEffect = firstEffect;
-    do {
-      if (__DEV__) {
-        invokeGuardedCallback(null, commitLayoutEffects, null, root, lanes);
-        if (hasCaughtError()) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      } else {
-        try {
-          commitLayoutEffects(root, lanes);
-        } catch (error) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        logLayoutEffectsStarted(lanes);
       }
-    } while (nextEffect !== null);
+    }
+    if (enableSchedulingProfiler) {
+      markLayoutEffectsStarted(lanes);
+    }
+    commitLayoutEffects(finishedWork, root, lanes);
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        logLayoutEffectsStopped();
+      }
+    }
 
-    nextEffect = null;
+    if (enableSchedulingProfiler) {
+      markLayoutEffectsStopped();
+    }
 
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       rootCommittingMutationOrLayoutEffects = null;
@@ -2309,166 +2267,6 @@ function commitBeforeMutationEffects() {
   }
 }
 
-function commitMutationEffects(
-  root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
-) {
-  // TODO: Should probably move the bulk of this function to commitWork.
-  while (nextEffect !== null) {
-    setCurrentDebugFiberInDEV(nextEffect);
-
-    const flags = nextEffect.flags;
-
-    if (flags & ContentReset) {
-      commitResetTextContent(nextEffect);
-    }
-
-    if (flags & Ref) {
-      const current = nextEffect.alternate;
-      if (current !== null) {
-        commitDetachRef(current);
-      }
-      if (enableScopeAPI) {
-        // TODO: This is a temporary solution that allowed us to transition away
-        // from React Flare on www.
-        if (nextEffect.tag === ScopeComponent) {
-          commitAttachRef(nextEffect);
-        }
-      }
-    }
-
-    // The following switch statement is only concerned about placement,
-    // updates, and deletions. To avoid needing to add a case for every possible
-    // bitmap value, we remove the secondary effects from the effect tag and
-    // switch on that value.
-    const primaryFlags = flags & (Placement | Update | Deletion | Hydrating);
-    outer: switch (primaryFlags) {
-      case Placement: {
-        commitPlacement(nextEffect);
-        // 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.
-        nextEffect.flags &= ~Placement;
-        break;
-      }
-      case PlacementAndUpdate: {
-        // Placement
-        commitPlacement(nextEffect);
-        // Clear the "placement" from effect tag so that we know that this is
-        // inserted, before any life-cycles like componentDidMount gets called.
-        nextEffect.flags &= ~Placement;
-
-        // Update
-        const current = nextEffect.alternate;
-        commitWork(current, nextEffect);
-        break;
-      }
-      case Hydrating: {
-        nextEffect.flags &= ~Hydrating;
-        break;
-      }
-      case HydratingAndUpdate: {
-        nextEffect.flags &= ~Hydrating;
-
-        // Update
-        const current = nextEffect.alternate;
-        commitWork(current, nextEffect);
-        break;
-      }
-      case Update: {
-        const current = nextEffect.alternate;
-        commitWork(current, nextEffect);
-        break;
-      }
-      case Deletion: {
-        // Reached a deletion effect. Instead of commit this effect like we
-        // normally do, we're going to use the `deletions` array of the parent.
-        // However, because the effect list is sorted in depth-first order, we
-        // can't wait until we reach the parent node, because the child effects
-        // will have run in the meantime.
-        //
-        // So instead, we use a trick where the first time we hit a deletion
-        // effect, we commit all the deletion effects that belong to that parent.
-        //
-        // This is an incremental step away from using the effect list and
-        // toward a DFS + subtreeFlags traversal.
-        //
-        // A reference to the deletion array of the parent is also stored on
-        // each of the deletions. This is really weird. It would be better to
-        // follow the `.return` pointer, but unfortunately we can't assume that
-        // `.return` points to the correct fiber, even in the commit phase,
-        // because `findDOMNode` might mutate it.
-        const deletedChild = nextEffect;
-        const deletions = deletedChild.deletions;
-        if (deletions !== null) {
-          for (let i = 0; i < deletions.length; i++) {
-            const deletion = deletions[i];
-            // Clear the deletion effect so that we don't delete this node more
-            // than once.
-            deletion.flags &= ~Deletion;
-            deletion.deletions = null;
-            commitDeletion(root, deletion, renderPriorityLevel);
-          }
-        }
-        break;
-      }
-    }
-
-    resetCurrentDebugFiberInDEV();
-    nextEffect = nextEffect.nextEffect;
-  }
-}
-
-function commitLayoutEffects(root: FiberRoot, committedLanes: Lanes) {
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      logLayoutEffectsStarted(committedLanes);
-    }
-  }
-
-  if (enableSchedulingProfiler) {
-    markLayoutEffectsStarted(committedLanes);
-  }
-
-  // TODO: Should probably move the bulk of this function to commitWork.
-  while (nextEffect !== null) {
-    setCurrentDebugFiberInDEV(nextEffect);
-
-    const flags = nextEffect.flags;
-
-    if (flags & (Update | Callback)) {
-      const current = nextEffect.alternate;
-      commitLayoutEffectOnFiber(root, current, nextEffect, committedLanes);
-    }
-
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (flags & Ref && nextEffect.tag !== ScopeComponent) {
-        commitAttachRef(nextEffect);
-      }
-    } else {
-      if (flags & Ref) {
-        commitAttachRef(nextEffect);
-      }
-    }
-
-    resetCurrentDebugFiberInDEV();
-    nextEffect = nextEffect.nextEffect;
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      logLayoutEffectsStopped();
-    }
-  }
-
-  if (enableSchedulingProfiler) {
-    markLayoutEffectsStopped();
-  }
-}
-
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index d7e82312dd2a..d4323bde51f9 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -47,7 +47,7 @@ const environmentFlags = {
 
   // Turn these flags back on (or delete) once the effect list is removed in
   // favor of a depth-first traversal using `subtreeTags`.
-  dfsEffectsRefactor: __VARIANT__,
+  dfsEffectsRefactor: true,
   enableUseJSStackToTrackPassiveDurations: false,
 };
 

From 9043626f09c7d02a81b1ed89236e8f88d44fdc7e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Jan 2021 15:54:45 -0600
Subject: [PATCH 0184/1603] Cache tests: Make it easier to test many caches
 (#20600)

Some rearranging to make it easier to write tests that assert on the
output of multiple caches.
---
 .../src/__tests__/ReactCache-test.js          | 248 +++++++++---------
 1 file changed, 122 insertions(+), 126 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 1574fc222898..ef14b6588e4b 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -8,8 +8,8 @@ let useCacheRefresh;
 let startTransition;
 let useState;
 
-let textService;
-let textServiceVersion;
+let caches;
+let seededCache;
 
 describe('ReactCache', () => {
   beforeEach(() => {
@@ -25,20 +25,57 @@ describe('ReactCache', () => {
     startTransition = React.unstable_startTransition;
     useState = React.useState;
 
-    // Represents some data service that returns text. It likely has additional
-    // caching layers, like a CDN or the local browser cache. It can be mutated
-    // or emptied independently of the React cache.
-    textService = new Map();
-    textServiceVersion = 1;
+    caches = [];
+    seededCache = null;
   });
 
   function createTextCache() {
-    return new Map();
+    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') {
+          record.value.resolve();
+        }
+      },
+      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') {
+          record.value.reject();
+        }
+      },
+    };
+    caches.push(cache);
+    return cache;
   }
 
   function readText(text) {
     const textCache = getCacheForType(createTextCache);
-    const record = textCache.get(text);
+    const record = textCache.data.get(text);
     if (record !== undefined) {
       switch (record.status) {
         case 'pending':
@@ -46,28 +83,17 @@ describe('ReactCache', () => {
         case 'rejected':
           throw record.value;
         case 'resolved':
-          return record.value;
+          return textCache.version;
       }
     } else {
       Scheduler.unstable_yieldValue(`Cache miss! [${text}]`);
 
-      let request = textService.get(text);
-      if (request === undefined) {
-        let resolve;
-        let reject;
-        request = new Promise((res, rej) => {
-          resolve = res;
-          reject = rej;
-        });
-        request.resolve = resolve;
-        request.reject = reject;
-
-        // Add the request to a backing cache. This may outlive the lifetime
-        // of the component that is currently reading the data.
-        textService.set(text, request);
-      }
-
-      const thenable = request.then(
+      let resolve;
+      let reject;
+      const thenable = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+      }).then(
         value => {
           if (newRecord.status === 'pending') {
             newRecord.status = 'resolved';
@@ -81,36 +107,19 @@ describe('ReactCache', () => {
           }
         },
       );
+      thenable.resolve = resolve;
+      thenable.reject = reject;
 
       const newRecord = {
-        ping: null,
         status: 'pending',
         value: thenable,
       };
-      textCache.set(text, newRecord);
+      textCache.data.set(text, newRecord);
 
       throw thenable;
     }
   }
 
-  function mutateRemoteTextService() {
-    textService = new Map();
-    textServiceVersion++;
-  }
-
-  function resolveText(text) {
-    const request = textService.get(text);
-    if (request !== undefined) {
-      request.resolve(textServiceVersion);
-      return request;
-    } else {
-      const newRequest = Promise.resolve(textServiceVersion);
-      newRequest.resolve = newRequest.reject = () => {};
-      textService.set(text, newRequest);
-      return newRequest;
-    }
-  }
-
   function Text({text}) {
     Scheduler.unstable_yieldValue(text);
     return text;
@@ -123,6 +132,23 @@ describe('ReactCache', () => {
     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);
+    }
+  }
+
   // @gate experimental
   test('render Cache component', async () => {
     const root = ReactNoop.createRoot();
@@ -148,7 +174,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Loading...');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput('A');
@@ -168,7 +194,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Loading...');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput('A');
@@ -207,7 +233,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Loading...Loading...');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
@@ -239,7 +265,7 @@ describe('ReactCache', () => {
       expect(root).toMatchRenderedOutput('Loading...');
 
       await ReactNoop.act(async () => {
-        await resolveText('A');
+        resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A', 'A']);
       expect(root).toMatchRenderedOutput('AA');
@@ -265,22 +291,14 @@ describe('ReactCache', () => {
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      seedNextTextCache('A');
       root.render(<App showMore={false} />);
     });
-    expect(Scheduler).toHaveYielded([
-      'Cache miss! [A]',
-      'Loading...',
-      'A [v1]',
-    ]);
+    expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    // Simulate a server mutation.
-    mutateRemoteTextService();
-
     // Add a new cache boundary
     await ReactNoop.act(async () => {
-      await resolveText('A');
       root.render(<App showMore={true} />);
     });
     expect(Scheduler).toHaveYielded([
@@ -314,22 +332,14 @@ describe('ReactCache', () => {
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      seedNextTextCache('A');
       root.render(<App showMore={false} />);
     });
-    expect(Scheduler).toHaveYielded([
-      'Cache miss! [A]',
-      'Loading...',
-      'A [v1]',
-    ]);
+    expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    // Simulate a server mutation.
-    mutateRemoteTextService();
-
     // Add a new cache boundary
     await ReactNoop.act(async () => {
-      await resolveText('A');
       root.render(<App showMore={true} />);
     });
     expect(Scheduler).toHaveYielded([
@@ -337,8 +347,12 @@ describe('ReactCache', () => {
       // New tree should load fresh data.
       'Cache miss! [A]',
       'Loading...',
-      'A [v2]',
     ]);
+    expect(root).toMatchRenderedOutput('A [v1]Loading...');
+    await ReactNoop.act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v1]A [v2]');
   });
 
@@ -389,7 +403,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Loading shell...');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded([
       'Shell',
@@ -406,7 +420,7 @@ describe('ReactCache', () => {
     );
 
     await ReactNoop.act(async () => {
-      await resolveText('B');
+      resolveMostRecentTextCache('B');
     });
     expect(Scheduler).toHaveYielded(['Content']);
     expect(root).toMatchRenderedOutput(
@@ -440,13 +454,12 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Loading...');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    // Mutate the text service, then refresh for new data.
-    mutateRemoteTextService();
+    // Fefresh for new data.
     await ReactNoop.act(async () => {
       startTransition(() => refresh());
     });
@@ -454,7 +467,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     // Note that the version has updated
     expect(Scheduler).toHaveYielded(['A [v2]']);
@@ -482,13 +495,12 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Loading...');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    // Mutate the text service, then refresh for new data.
-    mutateRemoteTextService();
+    // Refresh for new data.
     await ReactNoop.act(async () => {
       startTransition(() => refresh());
     });
@@ -496,7 +508,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     // Note that the version has updated
     expect(Scheduler).toHaveYielded(['A [v2]']);
@@ -526,25 +538,20 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Loading...');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    // Mutate the text service, then refresh for new data.
-    mutateRemoteTextService();
+    // Refresh for new data.
     await ReactNoop.act(async () => {
       // Refresh the cache with seeded data, like you would receive from a
       // server mutation.
       // TODO: Seeding multiple typed caches. Should work by calling `refresh`
       // multiple times with different key/value pairs
-      const seededCache = new Map();
-      seededCache.set('A', {
-        ping: null,
-        status: 'resolved',
-        value: textServiceVersion,
-      });
-      startTransition(() => refresh(createTextCache, seededCache));
+      const cache = createTextCache();
+      cache.resolve('A');
+      startTransition(() => refresh(createTextCache, cache));
     });
     // The root should re-render without a cache miss.
     expect(Scheduler).toHaveYielded(['A [v2]']);
@@ -579,36 +586,26 @@ describe('ReactCache', () => {
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      seedNextTextCache('A');
       root.render(<App showMore={false} />);
     });
-    expect(Scheduler).toHaveYielded([
-      'Cache miss! [A]',
-      'Loading...',
-      'A [v1]',
-    ]);
+    expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    // Simulate a server mutation.
-    mutateRemoteTextService();
-
     // Add a new cache boundary
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      seedNextTextCache('A');
       root.render(<App showMore={true} />);
     });
     expect(Scheduler).toHaveYielded([
       'A [v1]',
       // New tree should load fresh data.
-      'Cache miss! [A]',
-      'Loading...',
       'A [v2]',
     ]);
     expect(root).toMatchRenderedOutput('A [v1]A [v2]');
 
     // Now refresh the shell. This should also cause the "Show More" contents to
     // refresh, since its cache is nested inside the outer one.
-    mutateRemoteTextService();
     await ReactNoop.act(async () => {
       startTransition(() => refreshShell());
     });
@@ -620,7 +617,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]A [v2]');
 
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v3]', 'A [v3]']);
     expect(root).toMatchRenderedOutput('A [v3]A [v3]');
@@ -679,21 +676,20 @@ describe('ReactCache', () => {
       expect(root).toMatchRenderedOutput('Loading...Loading...');
 
       await ReactNoop.act(async () => {
-        await resolveText('A');
+        resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]']);
       expect(root).toMatchRenderedOutput('A [v1]A [v1]');
 
       // Refresh the first boundary. It should not refresh the second boundary,
       // even though they previously shared the same underlying cache.
-      mutateRemoteTextService();
       await ReactNoop.act(async () => {
         await refreshFirstBoundary();
       });
       expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
 
       await ReactNoop.act(async () => {
-        await resolveText('A');
+        resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
       expect(root).toMatchRenderedOutput('A [v2]A [v1]');
@@ -738,10 +734,8 @@ describe('ReactCache', () => {
 
       await ReactNoop.act(async () => {
         // This will resolve the content in the first cache
-        resolveText('A');
-        resolveText('B');
-        // Now let's simulate a mutation
-        mutateRemoteTextService();
+        resolveMostRecentTextCache('A');
+        resolveMostRecentTextCache('B');
         // And mount the second tree, which includes new content
         root.render(<App showMore={true} />);
       });
@@ -757,7 +751,7 @@ describe('ReactCache', () => {
 
       // Now resolve the second tree
       await ReactNoop.act(async () => {
-        resolveText('A');
+        resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
       expect(root).toMatchRenderedOutput('A [v2] A [v1] B [v1]');
@@ -769,7 +763,7 @@ describe('ReactCache', () => {
     function Child({text}) {
       return (
         <Cache>
-          <AsyncText text={text} />
+          <AsyncText showVersion={true} text={text} />
         </Cache>
       );
     }
@@ -813,10 +807,10 @@ describe('ReactCache', () => {
 
     // Resolve the request
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      resolveMostRecentTextCache('A');
     });
-    expect(Scheduler).toHaveYielded(['A', 'A']);
-    expect(root).toMatchRenderedOutput('AA');
+    expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]A [v1]');
 
     // Now do another transition
     await ReactNoop.act(async () => {
@@ -832,16 +826,19 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded([
       // First two children use the old cache because they already finished
-      'A',
-      'A',
+      'A [v1]',
+      'A [v1]',
       // The new child uses a fresh cache
       'Cache miss! [A]',
       'Loading...',
-      'A',
-      'A',
-      'A',
     ]);
-    expect(root).toMatchRenderedOutput('AAA');
+    expect(root).toMatchRenderedOutput('A [v1]A [v1]');
+
+    await ReactNoop.act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]', 'A [v2]']);
+    expect(root).toMatchRenderedOutput('A [v1]A [v1]A [v2]');
   });
 
   // @gate experimental
@@ -907,8 +904,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('1');
 
     await ReactNoop.act(async () => {
-      resolveText('A');
-      mutateRemoteTextService();
+      resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput('A1');

From 58e8304483ebfadd02a295339b5e9a989ac98c6e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Jan 2021 16:20:22 -0600
Subject: [PATCH 0185/1603] Remove custom error message from hook access error
 (#20604)

It will still result in a null access error, so there's no change in
semantics. We will print a user-friendly error message in DEV.
---
 .../__tests__/ReactHooksInspection-test.js    |  7 +++--
 .../ReactHooksWithNoopRenderer-test.js        |  7 ++++-
 packages/react/src/ReactHooks.js              | 29 +++++++++++--------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
index 602fb613d417..50eadbedcbe4 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
@@ -277,14 +277,17 @@ describe('ReactHooksInspection', () => {
     };
 
     expect(() => {
-      ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
-    }).toThrow(
+      expect(() => {
+        ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
+      }).toThrow("Cannot read property 'useState' of null");
+    }).toErrorDev(
       '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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      {withoutStack: true},
     );
 
     expect(getterCalls).toBe(1);
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 8d006b2f300b..489928f27d20 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -249,13 +249,18 @@ describe('ReactHooksWithNoopRenderer', () => {
   }
 
   it('throws when called outside the render phase', () => {
-    expect(() => useState(0)).toThrow(
+    expect(() => {
+      expect(() => useState(0)).toThrow(
+        "Cannot read property 'useState' of null",
+      );
+    }).toErrorDev(
       '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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      {withoutStack: true},
     );
   });
 
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index c1602a9bb53e..d397d8f789f0 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   MutableSource,
   MutableSourceGetSnapshotFn,
@@ -15,8 +16,6 @@ import type {
 } from 'shared/ReactTypes';
 import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
-
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 
 type BasicStateAction<S> = (S => S) | S;
@@ -24,16 +23,22 @@ type Dispatch<A> = A => void;
 
 function resolveDispatcher() {
   const dispatcher = ReactCurrentDispatcher.current;
-  invariant(
-    dispatcher !== null,
-    '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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-  );
-  return dispatcher;
+  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://reactjs.org/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 {

From e0fd9e67fce5748990ff4a4d0802878ded230771 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 19 Jan 2021 17:34:08 -0500
Subject: [PATCH 0186/1603] Use update lane priority in work loop (#20621)

---
 .../src/ReactFiberWorkLoop.new.js             | 35 +++++--------------
 .../src/ReactFiberWorkLoop.old.js             | 35 +++++--------------
 2 files changed, 18 insertions(+), 52 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 4eafe4258504..a04b522e57ba 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -448,12 +448,9 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // To do that, we're replacing it with an update lane priority.
   const schedulerPriority = getCurrentPriorityLevel();
 
-  // The old behavior was using the priority level of the Scheduler.
-  // This couples React to the Scheduler internals, so we're replacing it
-  // with the currentUpdateLanePriority above. As an example of how this
-  // could be problematic, if we're not inside `Scheduler.runWithPriority`,
-  // then we'll get the priority of the current running Scheduler task,
-  // which is probably not what we want.
+  // Find the correct lane based on priorities. Ideally, this would just be
+  // the update lane priority, but for now we're also checking for discrete
+  // updates and falling back to the scheduler priority.
   let lane;
   if (
     // TODO: Temporary. We're removing the concept of discrete updates.
@@ -461,31 +458,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     schedulerPriority === UserBlockingSchedulerPriority
   ) {
     lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
+  } else if (
+    decoupleUpdatePriorityFromScheduler &&
+    getCurrentUpdateLanePriority() !== NoLanePriority
+  ) {
+    const currentLanePriority = getCurrentUpdateLanePriority();
+    lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
   } else {
     const schedulerLanePriority = schedulerPriorityToLanePriority(
       schedulerPriority,
     );
 
-    if (decoupleUpdatePriorityFromScheduler) {
-      // In the new strategy, we will track the current update lane priority
-      // inside React and use that priority to select a lane for this update.
-      // For now, we're just logging when they're different so we can assess.
-      const currentUpdateLanePriority = getCurrentUpdateLanePriority();
-
-      if (
-        schedulerLanePriority !== currentUpdateLanePriority &&
-        currentUpdateLanePriority !== NoLanePriority
-      ) {
-        if (__DEV__) {
-          console.error(
-            'Expected current scheduler lane priority %s to match current update lane priority %s',
-            schedulerLanePriority,
-            currentUpdateLanePriority,
-          );
-        }
-      }
-    }
-
     lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 7ed5b098982a..65c966d53110 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -448,12 +448,9 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // To do that, we're replacing it with an update lane priority.
   const schedulerPriority = getCurrentPriorityLevel();
 
-  // The old behavior was using the priority level of the Scheduler.
-  // This couples React to the Scheduler internals, so we're replacing it
-  // with the currentUpdateLanePriority above. As an example of how this
-  // could be problematic, if we're not inside `Scheduler.runWithPriority`,
-  // then we'll get the priority of the current running Scheduler task,
-  // which is probably not what we want.
+  // Find the correct lane based on priorities. Ideally, this would just be
+  // the update lane priority, but for now we're also checking for discrete
+  // updates and falling back to the scheduler priority.
   let lane;
   if (
     // TODO: Temporary. We're removing the concept of discrete updates.
@@ -461,31 +458,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     schedulerPriority === UserBlockingSchedulerPriority
   ) {
     lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
+  } else if (
+    decoupleUpdatePriorityFromScheduler &&
+    getCurrentUpdateLanePriority() !== NoLanePriority
+  ) {
+    const currentLanePriority = getCurrentUpdateLanePriority();
+    lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
   } else {
     const schedulerLanePriority = schedulerPriorityToLanePriority(
       schedulerPriority,
     );
 
-    if (decoupleUpdatePriorityFromScheduler) {
-      // In the new strategy, we will track the current update lane priority
-      // inside React and use that priority to select a lane for this update.
-      // For now, we're just logging when they're different so we can assess.
-      const currentUpdateLanePriority = getCurrentUpdateLanePriority();
-
-      if (
-        schedulerLanePriority !== currentUpdateLanePriority &&
-        currentUpdateLanePriority !== NoLanePriority
-      ) {
-        if (__DEV__) {
-          console.error(
-            'Expected current scheduler lane priority %s to match current update lane priority %s',
-            schedulerLanePriority,
-            currentUpdateLanePriority,
-          );
-        }
-      }
-    }
-
     lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
   }
 

From fb3e158a64dd9e0d777220ce0e4a3bdecff158dc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Jan 2021 16:38:54 -0600
Subject: [PATCH 0187/1603] Convert ReactSuspenseWithNoopRenderer tests to use
 built-in cache (#20601)

* Remove `ms` prop from SuspenseWithNoop tests

Use `resolveText` instead.

* Migrate SuspenseWithNoop tests to built-in cache
---
 .../ReactSuspenseWithNoopRenderer-test.js     | 660 +++++++++---------
 scripts/jest/TestFlags.js                     |   5 +
 2 files changed, 316 insertions(+), 349 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index cbcdf8b4f6f5..3fc2e8e573ba 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -3,11 +3,10 @@ let Fragment;
 let ReactNoop;
 let Scheduler;
 let Suspense;
-let textCache;
+let getCacheForType;
 
-let readText;
-let resolveText;
-let rejectText;
+let caches;
+let seededCache;
 
 describe('ReactSuspenseWithNoopRenderer', () => {
   beforeEach(() => {
@@ -19,80 +18,142 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
 
-    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;
-      }
-    };
+    getCacheForType = React.unstable_getCacheForType;
+
+    caches = [];
+    seededCache = null;
+  });
 
-    resolveText = text => {
-      const record = textCache.get(text);
-      if (record !== undefined) {
-        if (record.status === 'pending') {
-          Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
-          record.ping();
-          record.ping = 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';
-          clearTimeout(record.promise._timer);
-          record.promise = null;
+          record.value = text;
+          thenable.pings.forEach(t => t());
         }
-      } 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.unstable_yieldValue(`Promise rejected [${text}]`);
-          record.ping();
+      },
+      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';
-          clearTimeout(record.promise._timer);
-          record.promise = null;
+          record.value = error;
+          thenable.pings.forEach(t => t());
         }
-      } else {
-        const newRecord = {
-          ping: null,
-          status: 'rejected',
-          promise: null,
-        };
-        textCache.set(text, newRecord);
-      }
+      },
     };
-  });
+    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.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(text);
+    return <span prop={text} />;
+  }
+
+  function AsyncText({text, showVersion}) {
+    const version = readText(text);
+    const fullText = showVersion ? `${text} [v${version}]` : text;
+    Scheduler.unstable_yieldValue(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);
+    }
+  }
 
-  // function div(...children) {
-  //   children = children.map(
-  //     c => (typeof c === 'string' ? {text: c, hidden: false} : c),
-  //   );
-  //   return {type: 'div', children, prop: undefined, hidden: false};
-  // }
+  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 span(prop) {
     return {type: 'span', children: [], prop, hidden: false};
@@ -114,32 +175,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     return Promise.resolve().then(() => {});
   }
 
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return <span prop={props.text} ref={props.hostRef} />;
-  }
-
-  function AsyncText(props) {
-    const text = props.text;
-    try {
-      readText(text);
-      Scheduler.unstable_yieldValue(text);
-      return <span prop={text} />;
-    } catch (promise) {
-      if (typeof promise.then === 'function') {
-        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-        if (typeof props.ms === 'number' && promise._timer === undefined) {
-          promise._timer = setTimeout(() => {
-            resolveText(text);
-          }, props.ms);
-        }
-      } else {
-        Scheduler.unstable_yieldValue(`Error! [${text}]`);
-      }
-      throw promise;
-    }
-  }
-
   // 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}) {
@@ -153,6 +188,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   }
 
+  // @gate enableCache
   it('does not restart rendering for initial render', async () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -190,9 +226,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Flush the promise completely
-    Scheduler.unstable_advanceTime(100);
-    await advanceTimers(100);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    await resolveText('A');
 
     // Even though the promise has resolved, we should now flush
     // and commit the in progress render instead of restarting.
@@ -217,6 +251,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableCache
   it('suspends rendering and continues later', async () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -229,7 +264,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         <Suspense fallback={<Text text="Loading..." />}>
           {renderBar ? (
             <Bar>
-              <AsyncText text="A" ms={100} />
+              <AsyncText text="A" />
               <Text text="B" />
             </Bar>
           ) : null}
@@ -254,29 +289,23 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
     expect(ReactNoop.getChildren()).toEqual([]);
 
-    // Flush some of the time
-    await advanceTimers(50);
-    // Still nothing...
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Flush the promise completely
-    await advanceTimers(50);
+    // Resolve the data
+    await resolveText('A');
     // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'A', 'B']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
+  // @gate enableCache
   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" ms={5000} />
+          <AsyncText text="A" />
         </Suspense>
         <Suspense fallback={<Text text="Loading B..." />}>
-          <AsyncText text="B" ms={6000} />
+          <AsyncText text="B" />
         </Suspense>
       </Fragment>,
     );
@@ -291,26 +320,22 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       span('Loading B...'),
     ]);
 
-    // Advance time by enough that the first Suspense's promise resolves and
-    // switches back to the normal view. The second Suspense should still
-    // show the placeholder
-    ReactNoop.expire(5000);
-    await advanceTimers(5000);
+    // Resolve first Suspense's promise so that it switches switches back to the
+    // normal view. The second Suspense should still show the placeholder.
+    await resolveText('A');
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['A']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
 
-    // Advance time by enough that the second Suspense's promise resolves
-    // and switches back to the normal view
-    ReactNoop.expire(1000);
-    await advanceTimers(1000);
+    // Resolve the second Suspense's promise so that it switches back to the
+    // normal view.
+    await resolveText('B');
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushAndYield(['B']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
+  // @gate enableCache
   it('continues rendering siblings after suspending', async () => {
     // A shell is needed. The update cause it to suspend.
     ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
@@ -338,7 +363,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Wait for data to resolve
     await resolveText('B');
     // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushAndYield(['A', 'B', 'C', 'D']);
     expect(ReactNoop.getChildren()).toEqual([
       span('A'),
@@ -351,6 +375,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   // Second condition is redundant but guarantees that the test runs in prod.
   // TODO: Delete this feature flag.
   // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__
+  // @gate enableCache
   it('retries on error', async () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -389,9 +414,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
-    await rejectText('Result');
-
-    expect(Scheduler).toHaveYielded(['Promise rejected [Result]']);
+    await rejectText('Result', new Error('Failed to load: Result'));
 
     expect(Scheduler).toFlushAndYield([
       'Error! [Result]',
@@ -410,6 +433,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   // Second condition is redundant but guarantees that the test runs in prod.
   // TODO: Delete this feature flag.
   // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__
+  // @gate enableCache
   it('retries on error after falling back to a placeholder', async () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -442,9 +466,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-    await rejectText('Result');
+    await rejectText('Result', new Error('Failed to load: Result'));
 
-    expect(Scheduler).toHaveYielded(['Promise rejected [Result]']);
     expect(Scheduler).toFlushAndYield([
       'Error! [Result]',
 
@@ -460,6 +483,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableCache
   it('can update at a higher priority while in a suspended state', async () => {
     function App(props) {
       return (
@@ -474,7 +498,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(<App highPri="A" lowPri="1" />);
     expect(Scheduler).toFlushAndYield(['A', 'Suspend! [1]', 'Loading...']);
     await resolveText('1');
-    expect(Scheduler).toHaveYielded(['Promise resolved [1]']);
     expect(Scheduler).toFlushAndYield(['A', '1']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('1')]);
 
@@ -497,10 +520,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Unblock the low-pri text and finish
     await resolveText('2');
-    expect(Scheduler).toHaveYielded(['Promise resolved [2]']);
     expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
   });
 
+  // @gate enableCache
   it('keeps working on lower priority work after being pinged', async () => {
     // Advance the virtual time so that we're close to the edge of a bucket.
     ReactNoop.expire(149);
@@ -530,11 +553,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     await resolveText('A');
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['A', 'B']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
+  // @gate enableCache
   it('tries rendering a lower priority pending update even if a higher priority one suspends', async () => {
     function App(props) {
       if (props.hide) {
@@ -567,6 +590,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   // Note: This test was written to test a heuristic used in the expiration
   // times model. Might not make sense in the new model.
+  // @gate enableCache
   it('tries each subsequent level after suspending', async () => {
     const root = ReactNoop.createRoot();
 
@@ -638,6 +662,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableCache
   it('forces an expiration after an update times out', async () => {
     ReactNoop.render(
       <Fragment>
@@ -649,7 +674,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(
       <Fragment>
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Async" ms={20000} />
+          <AsyncText text="Async" />
         </Suspense>
         <Text text="Sync" />
       </Fragment>,
@@ -667,7 +692,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Advance both React's virtual time and Jest's timers by enough to expire
-    // the update, but not by enough to flush the suspending promise.
+    // the update.
     ReactNoop.expire(10000);
     await advanceTimers(10000);
     // No additional rendering work is required, since we already prepared
@@ -677,12 +702,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
 
     // Once the promise resolves, we render the suspended view
-    await advanceTimers(10000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+    await resolveText('Async');
     expect(Scheduler).toFlushAndYield(['Async']);
     expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
   });
 
+  // @gate enableCache
   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);
@@ -714,9 +739,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
 
     // Resolve the outer promise.
-    ReactNoop.expire(300);
-    await advanceTimers(300);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Outer content]']);
+    await resolveText('Outer content');
     expect(Scheduler).toFlushAndYield([
       'Outer content',
       'Suspend! [Inner content]',
@@ -740,9 +763,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
 
     // Finally, flush the inner promise. We should see the complete screen.
-    ReactNoop.expire(1000);
-    await advanceTimers(1000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Inner content]']);
+    await resolveText('Inner content');
     expect(Scheduler).toFlushAndYield(['Inner content']);
     expect(ReactNoop.getChildren()).toEqual([
       span('Sync'),
@@ -751,6 +772,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableCache
   it('renders an expiration boundary synchronously', async () => {
     spyOnDev(console, 'error');
     // Synchronously render a tree that suspends
@@ -777,11 +799,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Once the promise resolves, we render the suspended view
     await resolveText('Async');
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
     expect(Scheduler).toFlushAndYield(['Async']);
     expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
   });
 
+  // @gate enableCache
   it('suspending inside an expired expiration boundary will bubble to the next one', async () => {
     ReactNoop.flushSync(() =>
       ReactNoop.render(
@@ -805,6 +827,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]);
   });
 
+  // @gate enableCache
   it('expires early by default', async () => {
     ReactNoop.render(
       <Fragment>
@@ -816,7 +839,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(
       <Fragment>
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Async" ms={3000} />
+          <AsyncText text="Async" />
         </Suspense>
         <Text text="Sync" />
       </Fragment>,
@@ -841,12 +864,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
 
     // Once the promise resolves, we render the suspended view
-    await advanceTimers(1000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+    await resolveText('Async');
     expect(Scheduler).toFlushAndYield(['Async']);
     expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
   });
 
+  // @gate enableCache
   it('resolves successfully even if fallback render is pending', async () => {
     ReactNoop.render(
       <>
@@ -858,17 +881,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(
       <>
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Async" ms={3000} />
+          <AsyncText text="Async" />
         </Suspense>
       </>,
     );
     expect(ReactNoop.flushNextYield()).toEqual(['Suspend! [Async]']);
-    await advanceTimers(1500);
-    expect(Scheduler).toHaveYielded([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
-    // Before we have a chance to flush, the promise resolves.
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+
+    await resolveText('Async');
     expect(Scheduler).toFlushAndYield([
       // We've now pinged the boundary but we don't know if we should restart yet,
       // because we haven't completed the suspense boundary.
@@ -879,67 +898,58 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Async')]);
   });
 
+  // @gate enableCache
   it('throws a helpful error when an update is suspends without a placeholder', () => {
-    ReactNoop.render(<AsyncText ms={1000} text="Async" />);
+    ReactNoop.render(<AsyncText text="Async" />);
     expect(Scheduler).toFlushAndThrow(
       'AsyncText suspended while rendering, but no fallback UI was specified.',
     );
   });
 
+  // @gate enableCache
   it('a Suspense component correctly handles more than one suspended child', async () => {
     ReactNoop.render(
       <Suspense fallback={<Text text="Loading..." />}>
-        <AsyncText text="A" ms={100} />
-        <AsyncText text="B" ms={100} />
+        <AsyncText text="A" />
+        <AsyncText text="B" />
       </Suspense>,
     );
-    Scheduler.unstable_advanceTime(10000);
-    expect(Scheduler).toFlushExpired([
+    expect(Scheduler).toFlushAndYield([
       'Suspend! [A]',
       'Suspend! [B]',
       'Loading...',
     ]);
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-    await advanceTimers(100);
+    await resolveText('A');
+    await resolveText('B');
 
-    expect(Scheduler).toHaveYielded([
-      'Promise resolved [A]',
-      'Promise resolved [B]',
-    ]);
     expect(Scheduler).toFlushAndYield(['A', 'B']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
+  // @gate enableCache
   it('can resume rendering earlier than a timeout', async () => {
     ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
     expect(Scheduler).toFlushAndYield([]);
 
     ReactNoop.render(
       <Suspense fallback={<Text text="Loading..." />}>
-        <AsyncText text="Async" ms={100} />
+        <AsyncText text="Async" />
       </Suspense>,
     );
     expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
-    // Advance time by an amount slightly smaller than what's necessary to
-    // resolve the promise
-    await advanceTimers(99);
-
-    // Nothing has rendered yet
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-
     // Resolve the promise
-    await advanceTimers(1);
+    await resolveText('Async');
     // We can now resume rendering
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
     expect(Scheduler).toFlushAndYield(['Async']);
     expect(ReactNoop.getChildren()).toEqual([span('Async')]);
   });
 
   // @gate experimental
+  // @gate enableCache
   it('starts working on an update even if its priority falls between two suspended levels', async () => {
     function App(props) {
       return (
@@ -947,7 +957,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           {props.text === 'C' || props.text === 'S' ? (
             <Text text={props.text} />
           ) : (
-            <AsyncText text={props.text} ms={10000} />
+            <AsyncText text={props.text} />
           )}
         </Suspense>
       );
@@ -982,17 +992,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['C']);
     expect(ReactNoop.getChildren()).toEqual([span('C')]);
 
-    await advanceTimers(10000);
     // Flush the remaining work.
-    expect(Scheduler).toHaveYielded([
-      'Promise resolved [A]',
-      'Promise resolved [B]',
-    ]);
+    await resolveText('A');
+    await resolveText('B');
     // Nothing else to render.
     expect(Scheduler).toFlushWithoutYielding();
     expect(ReactNoop.getChildren()).toEqual([span('C')]);
   });
 
+  // @gate enableCache
   it('flushes all expired updates in a single batch', async () => {
     class Foo extends React.Component {
       componentDidUpdate() {
@@ -1004,7 +1012,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       render() {
         return (
           <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText ms={20000} text={this.props.text} />
+            <AsyncText text={this.props.text} />
           </Suspense>
         );
       }
@@ -1031,22 +1039,21 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-    Scheduler.unstable_advanceTime(20000);
-    await advanceTimers(20000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [goodbye]']);
+    await resolveText('goodbye');
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
     expect(Scheduler).toFlushAndYield(['goodbye']);
     expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
   });
 
+  // @gate enableCache
   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} ms={200000} />;
+      return <AsyncText text={text} />;
     }
 
     function App() {
@@ -1067,12 +1074,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
 
-    await advanceTimers(200000);
-    expect(Scheduler).toHaveYielded([
-      'Promise resolved [A]',
-      'Promise resolved [B]',
-      'Promise resolved [C]',
-    ]);
+    await resolveText('A');
+    await resolveText('B');
+    await resolveText('C');
 
     expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
     expect(ReactNoop).toMatchRenderedOutput(
@@ -1085,11 +1089,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   describe('legacy mode mode', () => {
+    // @gate enableCache
     it('times out immediately', async () => {
       function App() {
         return (
           <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText ms={100} text="Result" />
+            <AsyncText text="Result" />
           </Suspense>
         );
       }
@@ -1099,19 +1104,18 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toHaveYielded(['Suspend! [Result]', 'Loading...']);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-      ReactNoop.expire(100);
-      await advanceTimers(100);
+      await resolveText('Result');
 
-      expect(Scheduler).toHaveYielded(['Promise resolved [Result]']);
       expect(Scheduler).toFlushExpired(['Result']);
       expect(ReactNoop.getChildren()).toEqual([span('Result')]);
     });
 
+    // @gate enableCache
     it('times out immediately when Suspense is in legacy mode', async () => {
       class UpdatingText extends React.Component {
         state = {step: 1};
         render() {
-          return <AsyncText ms={100} text={`Step: ${this.state.step}`} />;
+          return <AsyncText text={`Step: ${this.state.step}`} />;
         }
       }
 
@@ -1136,17 +1140,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       // Initial mount.
+      await seedNextTextCache('Step: 1');
       ReactNoop.renderLegacySyncRoot(<App />);
-      await advanceTimers(100);
-      expect(Scheduler).toHaveYielded([
-        'Suspend! [Step: 1]',
-        'Sibling',
-        'Loading (1)',
-        'Loading (2)',
-        'Loading (3)',
-        'Promise resolved [Step: 1]',
-      ]);
-      expect(Scheduler).toFlushExpired(['Step: 1']);
+      expect(Scheduler).toHaveYielded(['Step: 1', 'Sibling']);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
           <span prop="Step: 1" />
@@ -1176,8 +1172,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </>,
       );
 
-      await advanceTimers(100);
-      expect(Scheduler).toHaveYielded(['Promise resolved [Step: 2]']);
+      await resolveText('Step: 2');
       expect(Scheduler).toFlushExpired(['Step: 2']);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
@@ -1187,6 +1182,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     });
 
+    // @gate enableCache
     it('does not re-render siblings in loose mode', async () => {
       class TextWithLifecycle extends React.Component {
         componentDidMount() {
@@ -1216,7 +1212,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         return (
           <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
             <TextWithLifecycle text="A" />
-            <AsyncTextWithLifecycle ms={100} text="B" />
+            <AsyncTextWithLifecycle text="B" />
             <TextWithLifecycle text="C" />
           </Suspense>
         );
@@ -1247,10 +1243,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </>,
       );
 
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
+      await resolveText('B');
 
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushExpired(['B']);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
@@ -1261,23 +1255,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     });
 
+    // @gate enableCache
     it('suspends inside constructor', async () => {
       class AsyncTextInConstructor extends React.Component {
         constructor(props) {
           super(props);
           const text = props.text;
           Scheduler.unstable_yieldValue('constructor');
-          try {
-            readText(text);
-            this.state = {text};
-          } catch (promise) {
-            if (typeof promise.then === 'function') {
-              Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-            } else {
-              Scheduler.unstable_yieldValue(`Error! [${text}]`);
-            }
-            throw promise;
-          }
+          readText(text);
+          this.state = {text};
         }
         componentDidMount() {
           Scheduler.unstable_yieldValue('componentDidMount');
@@ -1290,7 +1276,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       ReactNoop.renderLegacySyncRoot(
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncTextInConstructor ms={100} text="Hi" />
+          <AsyncTextInConstructor text="Hi" />
         </Suspense>,
       );
 
@@ -1303,7 +1289,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       await resolveText('Hi');
 
-      expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
       expect(Scheduler).toFlushExpired([
         'constructor',
         'Hi',
@@ -1312,6 +1297,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
     });
 
+    // @gate enableCache
     it('does not infinite loop if fallback contains lifecycle method', async () => {
       class Fallback extends React.Component {
         state = {
@@ -1331,7 +1317,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         render() {
           return (
             <Suspense fallback={<Fallback />}>
-              <AsyncText text="Hi" ms={100} />
+              <AsyncText text="Hi" />
             </Suspense>
           );
         }
@@ -1346,13 +1332,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Loading...',
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-      await advanceTimers(100);
-      expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
+      await resolveText('Hi');
       expect(Scheduler).toFlushExpired(['Hi']);
       expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
     });
 
     if (global.__PERSISTENT__) {
+      // @gate enableCache
       it('hides/unhides suspended children before layout effects fire (persistent)', async () => {
         const {useRef, useLayoutEffect} = React;
 
@@ -1365,7 +1351,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
           return (
             <span ref={child} hidden={false}>
-              <AsyncText ms={1000} text="Hi" />
+              <AsyncText text="Hi" />
             </span>
           );
         }
@@ -1390,12 +1376,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           </>,
         ]);
 
-        await advanceTimers(1000);
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
+        await resolveText('Hi');
         expect(Scheduler).toFlushExpired(['Hi']);
       });
     } else {
+      // @gate enableCache
       it('hides/unhides suspended children before layout effects fire (mutation)', async () => {
         const {useRef, useLayoutEffect} = React;
 
@@ -1410,7 +1395,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
           return (
             <span ref={child} hidden={false}>
-              <AsyncText ms={1000} text="Hi" />
+              <AsyncText text="Hi" />
             </span>
           );
         }
@@ -1432,13 +1417,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           'Child is hidden: true',
         ]);
 
-        await advanceTimers(1000);
+        await resolveText('Hi');
 
-        expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
         expect(Scheduler).toFlushExpired(['Hi']);
       });
     }
 
+    // @gate enableCache
     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.
@@ -1461,7 +1446,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         <ErrorBoundary>
           <Suspense fallback="Loading...">
             <errorInCompletePhase>
-              <AsyncText ms={1000} text="Async" />
+              <AsyncText text="Async" />
             </errorInCompletePhase>
           </Suspense>
         </ErrorBoundary>,
@@ -1523,6 +1508,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
   });
 
+  // @gate enableCache
   it('does not call lifecycles of a suspended component', async () => {
     class TextWithLifecycle extends React.Component {
       componentDidMount() {
@@ -1551,18 +1537,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
       render() {
         const text = this.props.text;
-        try {
-          readText(text);
-          Scheduler.unstable_yieldValue(text);
-          return <span prop={text} />;
-        } catch (promise) {
-          if (typeof promise.then === 'function') {
-            Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-          } else {
-            Scheduler.unstable_yieldValue(`Error! [${text}]`);
-          }
-          throw promise;
-        }
+        readText(text);
+        Scheduler.unstable_yieldValue(text);
+        return <span prop={text} />;
       }
     }
 
@@ -1570,7 +1547,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       return (
         <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
           <TextWithLifecycle text="A" />
-          <AsyncTextWithLifecycle ms={100} text="B" />
+          <AsyncTextWithLifecycle text="B" />
           <TextWithLifecycle text="C" />
         </Suspense>
       );
@@ -1601,6 +1578,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCache
   it('does not call lifecycles of a suspended component (hooks)', async () => {
     function TextWithLifecycle(props) {
       React.useLayoutEffect(() => {
@@ -1636,25 +1614,16 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         };
       }, [props.text]);
       const text = props.text;
-      try {
-        readText(text);
-        Scheduler.unstable_yieldValue(text);
-        return <span prop={text} />;
-      } catch (promise) {
-        if (typeof promise.then === 'function') {
-          Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-        } else {
-          Scheduler.unstable_yieldValue(`Error! [${text}]`);
-        }
-        throw promise;
-      }
+      readText(text);
+      Scheduler.unstable_yieldValue(text);
+      return <span prop={text} />;
     }
 
     function App({text}) {
       return (
         <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
           <TextWithLifecycle text="A" />
-          <AsyncTextWithLifecycle ms={100} text={text} />
+          <AsyncTextWithLifecycle text={text} />
           <TextWithLifecycle text="C" />
         </Suspense>
       );
@@ -1696,8 +1665,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     await resolveText('B');
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-
     expect(Scheduler).toFlushAndYield([
       'B',
       'Destroy Layout Effect [Loading...]',
@@ -1732,7 +1699,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     await resolveText('B2');
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [B2]']);
     expect(Scheduler).toFlushAndYield([
       'B2',
       'Destroy Layout Effect [Loading...]',
@@ -1744,12 +1710,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableCache
   it('suspends for longer if something took a long (CPU bound) time to render', async () => {
     function Foo({renderContent}) {
       Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          {renderContent ? <AsyncText text="A" ms={5000} /> : null}
+          {renderContent ? <AsyncText text="A" /> : null}
         </Suspense>
       );
     }
@@ -1789,22 +1756,21 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
     // Flush the promise completely
-    Scheduler.unstable_advanceTime(4500);
-    await advanceTimers(4500);
+    await resolveText('A');
     // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['A']);
     expect(ReactNoop.getChildren()).toEqual([span('A')]);
   });
 
+  // @gate enableCache
   it('does not suspends if a fallback has been shown for a long time', async () => {
     function Foo() {
       Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="A" ms={5000} />
+          <AsyncText text="A" />
           <Suspense fallback={<Text text="Loading more..." />}>
-            <AsyncText text="B" ms={10000} />
+            <AsyncText text="B" />
           </Suspense>
         </Suspense>
       );
@@ -1823,10 +1789,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
+    await resolveText('A');
     // Wait a long time.
     Scheduler.unstable_advanceTime(5000);
     await advanceTimers(5000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
 
     // Retry with the new content.
     expect(Scheduler).toFlushAndYield([
@@ -1843,22 +1809,21 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
 
     // Flush the last promise completely
-    Scheduler.unstable_advanceTime(5000);
-    await advanceTimers(5000);
+    await resolveText('B');
     // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushAndYield(['B']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
+  // @gate enableCache
   it('does suspend if a fallback has been shown for a short time', async () => {
     function Foo() {
       Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="A" ms={200} />
+          <AsyncText text="A" />
           <Suspense fallback={<Text text="Loading more..." />}>
-            <AsyncText text="B" ms={450} />
+            <AsyncText text="B" />
           </Suspense>
         </Suspense>
       );
@@ -1877,10 +1842,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-    // Wait a short time.
-    Scheduler.unstable_advanceTime(250);
-    await advanceTimers(250);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    await resolveText('A');
 
     // Retry with the new content.
     expect(Scheduler).toFlushAndYield([
@@ -1893,11 +1855,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // wait a bit longer. Still nothing...
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-    Scheduler.unstable_advanceTime(200);
-    await advanceTimers(200);
+    await resolveText('B');
 
     // Before we commit another Promise resolves.
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     // We're still showing the first loading state.
     expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
     // Restart and render the complete content.
@@ -1905,12 +1865,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
   });
 
+  // @gate enableCache
   it('does not suspend for very long after a higher priority update', async () => {
     function Foo({renderContent}) {
       Scheduler.unstable_yieldValue('Foo');
       return (
         <Suspense fallback={<Text text="Loading..." />}>
-          {renderContent ? <AsyncText text="A" ms={5000} /> : null}
+          {renderContent ? <AsyncText text="A" /> : null}
         </Suspense>
       );
     }
@@ -1949,6 +1910,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // TODO: flip to "warns" when this is implemented again.
+  // @gate enableCache
   it('does not warn when a low priority update suspends inside a high priority update for functional components', async () => {
     let _setShow;
     function App() {
@@ -1975,6 +1937,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // TODO: flip to "warns" when this is implemented again.
+  // @gate enableCache
   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 {
@@ -2003,6 +1966,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
   });
 
+  // @gate enableCache
   it('does not warn about wrong Suspense priority if no new fallbacks are shown', async () => {
     let showB;
     class App extends React.Component {
@@ -2037,6 +2001,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // TODO: flip to "warns" when this is implemented again.
+  // @gate enableCache
   it(
     'does not warn when component that triggered user-blocking update is between Suspense boundary ' +
       'and component that suspended',
@@ -2068,6 +2033,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  // @gate enableCache
   it('normal priority updates suspending do not warn for class components', async () => {
     let show;
     class App extends React.Component {
@@ -2093,9 +2059,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toHaveYielded(['Suspend! [A]']);
     await resolveText('A');
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
   });
 
+  // @gate enableCache
   it('normal priority updates suspending do not warn for functional components', async () => {
     let _setShow;
     function App() {
@@ -2118,9 +2085,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toHaveYielded(['Suspend! [A]']);
     await resolveText('A');
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
   });
 
+  // @gate enableCache
   it('shows the parent fallback if the inner fallback should be avoided', async () => {
     function Foo({showC}) {
       Scheduler.unstable_yieldValue('Foo');
@@ -2129,8 +2097,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           <Suspense
             unstable_avoidThisFallback={true}
             fallback={<Text text="Updating..." />}>
-            <AsyncText text="A" ms={5000} />
-            {showC ? <AsyncText text="C" ms={5000} /> : null}
+            <AsyncText text="A" />
+            {showC ? <AsyncText text="C" /> : null}
           </Suspense>
           <Text text="B" />
         </Suspense>
@@ -2147,9 +2115,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Initial load...')]);
 
     // Eventually we resolve and show the data.
-    Scheduler.unstable_advanceTime(5000);
-    await advanceTimers(5000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    await resolveText('A');
     expect(Scheduler).toFlushAndYield(['A', 'B']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
 
@@ -2174,13 +2140,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ]);
 
     // Later we load the data.
-    Scheduler.unstable_advanceTime(5000);
-    await advanceTimers(5000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [C]']);
+    await resolveText('C');
     expect(Scheduler).toFlushAndYield(['A', 'C']);
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
   });
 
+  // @gate enableCache
   it('favors showing the inner fallback for nested top level avoided fallback', async () => {
     function Foo({showB}) {
       Scheduler.unstable_yieldValue('Foo');
@@ -2192,7 +2157,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           <Suspense
             unstable_avoidThisFallback={true}
             fallback={<Text text="Loading B..." />}>
-            <AsyncText text="B" ms={5000} />
+            <AsyncText text="B" />
           </Suspense>
         </Suspense>
       );
@@ -2212,6 +2177,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
   });
 
+  // @gate enableCache
   it('keeps showing an avoided parent fallback if it is already showing', async () => {
     function Foo({showB}) {
       Scheduler.unstable_yieldValue('Foo');
@@ -2225,7 +2191,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
               <Suspense
                 unstable_avoidThisFallback={true}
                 fallback={<Text text="Loading B..." />}>
-                <AsyncText text="B" ms={5000} />
+                <AsyncText text="B" />
               </Suspense>
             ) : null}
           </Suspense>
@@ -2255,12 +2221,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
   });
 
+  // @gate enableCache
   it('commits a suspended idle pri render within a reasonable time', async () => {
     function Foo({renderContent}) {
       return (
         <Fragment>
           <Suspense fallback={<Text text="Loading A..." />}>
-            {renderContent ? <AsyncText text="A" ms={10000} /> : null}
+            {renderContent ? <AsyncText text="A" /> : null}
           </Suspense>
         </Fragment>
       );
@@ -2306,11 +2273,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   describe('startTransition', () => {
     // @gate experimental
+    // @gate enableCache
     it('top level render', async () => {
       function App({page}) {
         return (
           <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText text={page} ms={5000} />
+            <AsyncText text={page} />
           </Suspense>
         );
       }
@@ -2325,9 +2293,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
       // Later we load the data.
-      Scheduler.unstable_advanceTime(5000);
-      await advanceTimers(5000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+      await resolveText('A');
       expect(Scheduler).toFlushAndYield(['A']);
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
@@ -2341,14 +2307,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // loading state.
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
       // Later we load the data.
-      Scheduler.unstable_advanceTime(3000);
-      await advanceTimers(3000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+      await resolveText('B');
       expect(Scheduler).toFlushAndYield(['B']);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
     });
 
     // @gate experimental
+    // @gate enableCache
     it('hooks', async () => {
       let transitionToPage;
       function App() {
@@ -2380,7 +2345,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('A');
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
@@ -2397,12 +2361,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       });
       // Later we load the data.
       await resolveText('B');
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
     });
 
     // @gate experimental
+    // @gate enableCache
     it('classes', async () => {
       let transitionToPage;
       class App extends React.Component {
@@ -2437,7 +2401,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('A');
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
@@ -2454,7 +2417,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       });
       // Later we load the data.
       await resolveText('B');
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
     });
@@ -2462,6 +2424,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   describe('delays transitions when using React.startTranistion', () => {
     // @gate experimental
+    // @gate enableCache
     it('top level render', async () => {
       function App({page}) {
         return (
@@ -2482,7 +2445,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('A');
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
@@ -2498,7 +2460,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('B');
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
 
@@ -2514,6 +2475,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
 
     // @gate experimental
+    // @gate enableCache
     it('hooks', async () => {
       let transitionToPage;
       function App() {
@@ -2545,7 +2507,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('A');
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
@@ -2564,7 +2525,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('B');
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
 
@@ -2583,6 +2543,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
 
     // @gate experimental
+    // @gate enableCache
     it('classes', async () => {
       let transitionToPage;
       class App extends React.Component {
@@ -2617,7 +2578,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('A');
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
       expect(Scheduler).toFlushAndYield(['A']);
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
@@ -2635,7 +2595,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Later we load the data.
       await resolveText('B');
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
       expect(Scheduler).toFlushAndYield(['B']);
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
 
@@ -2655,6 +2614,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate experimental
+  // @gate enableCache
   it('do not show placeholder when updating an avoided boundary with startTransition', async () => {
     function App({page}) {
       return (
@@ -2673,7 +2633,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(<App page="A" />);
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [A]', 'Loading...']);
     await resolveText('A');
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
     expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
 
@@ -2690,7 +2649,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // We should still be suspended here because this loading state should be avoided.
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
     await resolveText('B');
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushAndYield(['Hi!', 'B']);
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -2701,6 +2659,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate experimental
+  // @gate enableCache
   it('do not show placeholder when mounting an avoided boundary with startTransition', async () => {
     function App({page}) {
       return (
@@ -2742,7 +2701,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       </>,
     );
     await resolveText('B');
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
     expect(Scheduler).toFlushAndYield(['Hi!', 'B']);
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -2754,6 +2712,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   // TODO: This test is specifically about avoided commits that suspend for a
   // JND. We may remove this behavior.
+  // @gate enableCache
   it("suspended commit remains suspended even if there's another update at same expiration", async () => {
     // Regression test
     function App({text}) {
@@ -2774,7 +2733,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await ReactNoop.act(async () => {
       await resolveText('Initial');
     });
-    expect(Scheduler).toHaveYielded(['Promise resolved [Initial]', 'Initial']);
+    expect(Scheduler).toHaveYielded(['Initial']);
     expect(root).toMatchRenderedOutput(<span prop="Initial" />);
 
     await ReactNoop.act(async () => {
@@ -2853,6 +2812,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate experimental
+  // @gate enableCache
   it('should not render hidden content while suspended on higher pri', async () => {
     function Offscreen() {
       Scheduler.unstable_yieldValue('Offscreen');
@@ -2885,9 +2845,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
 
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    Scheduler.unstable_advanceTime(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    await resolveText('A');
     expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -2905,6 +2863,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate experimental
+  // @gate enableCache
   it('should be able to unblock higher pri content before suspended hidden', async () => {
     function Offscreen() {
       Scheduler.unstable_yieldValue('Offscreen');
@@ -2917,10 +2876,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       return (
         <Suspense fallback={<Text text="Loading..." />}>
           <LegacyHiddenDiv mode="hidden">
-            <AsyncText text="A" ms={2000} />
+            <AsyncText text="A" />
             <Offscreen />
           </LegacyHiddenDiv>
-          {showContent ? <AsyncText text="A" ms={2000} /> : null}
+          {showContent ? <AsyncText text="A" /> : null}
         </Suspense>
       );
     }
@@ -2939,9 +2898,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
 
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    Scheduler.unstable_advanceTime(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    await resolveText('A');
     expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -2961,6 +2918,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCache
   it(
     'multiple updates originating inside a Suspense boundary at different ' +
       'priority levels are not dropped',
@@ -2985,7 +2943,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         return <AsyncText text={text} />;
       }
 
-      await resolveText('A');
+      await seedNextTextCache('A');
       await ReactNoop.act(async () => {
         root.render(<Parent />);
       });
@@ -3014,6 +2972,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  // @gate enableCache
   it(
     'multiple updates originating inside a Suspense boundary at different ' +
       'priority levels are not dropped, including Idle updates',
@@ -3038,7 +2997,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         return <AsyncText text={text} />;
       }
 
-      await resolveText('A');
+      await seedNextTextCache('A');
       await ReactNoop.act(async () => {
         root.render(<Parent />);
       });
@@ -3081,6 +3040,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  // @gate enableCache
   it(
     'fallback component can update itself even after a high pri update to ' +
       'the primary tree suspends',
@@ -3109,7 +3069,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       // Resolve the initial tree
-      await resolveText('A');
+      await seedNextTextCache('A');
       await ReactNoop.act(async () => {
         root.render(<App />);
       });
@@ -3165,6 +3125,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  // @gate enableCache
   it(
     'regression: primary fragment fiber is not always part of setState ' +
       'return path',
@@ -3193,7 +3154,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       // Mount an initial tree. Resolve A so that it doesn't suspend.
-      await resolveText('A');
+      await seedNextTextCache('A');
       await ReactNoop.act(async () => {
         root.render(<Parent />);
       });
@@ -3243,6 +3204,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  // @gate enableCache
   it(
     'regression: primary fragment fiber is not always part of setState ' +
       'return path (another case)',
@@ -3269,7 +3231,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       // Mount an initial tree. Resolve A so that it doesn't suspend.
-      await resolveText('A');
+      await seedNextTextCache('A');
       await ReactNoop.act(async () => {
         root.render(<Parent />);
       });
@@ -3327,6 +3289,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  // @gate enableCache
   it(
     'after showing fallback, should not flip back to primary content until ' +
       'the update that suspended finishes',
@@ -3380,7 +3343,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       // Mount an initial tree. Resolve A so that it doesn't suspend.
-      await resolveText('Inner text: A');
+      await seedNextTextCache('Inner text: A');
       await ReactNoop.act(async () => {
         root.render(<Parent step={0} />);
       });
@@ -3455,7 +3418,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         await resolveText('Inner text: B');
       });
       expect(Scheduler).toHaveYielded([
-        'Promise resolved [Inner text: B]',
         'Inner text: B',
         'Inner step: 1',
         'Commit Child',
@@ -3471,6 +3433,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     },
   );
 
+  // @gate enableCache
   it('a high pri update can unhide a boundary that suspended at a different level', async () => {
     const {useState, useEffect} = React;
     const root = ReactNoop.createRoot();
@@ -3519,7 +3482,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     // Mount an initial tree. Resolve A so that it doesn't suspend.
-    await resolveText('Inner: A0');
+    await seedNextTextCache('Inner: A0');
     await ReactNoop.act(async () => {
       root.render(<Parent step={0} />);
     });
@@ -3567,6 +3530,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCache
   it('regression: empty render at high priority causes update to be dropped', async () => {
     // Reproduces a bug where flushDiscreteUpdates starts a new (empty) render
     // pass which cancels a scheduled timeout and causes the fallback never to
@@ -3616,6 +3580,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate experimental
+  // @gate enableCache
   it('regression: ping at high priority causes update to be dropped', async () => {
     const {useState, unstable_useTransition: useTransition} = React;
 
@@ -3655,8 +3620,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      await resolveText('A');
-      await resolveText('B');
+      await seedNextTextCache('A');
+      await seedNextTextCache('B');
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'B']);
@@ -3698,7 +3663,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
 
       await resolveText('A1');
-      expect(Scheduler).toHaveYielded(['Promise resolved [A1]']);
       expect(Scheduler).toFlushAndYield([
         'A1',
         'Suspend! [A2]',
@@ -3716,12 +3680,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await resolveText('A2');
       await resolveText('B2');
     });
-    expect(Scheduler).toHaveYielded([
-      'Promise resolved [A2]',
-      'Promise resolved [B2]',
-      'A2',
-      'B2',
-    ]);
+    expect(Scheduler).toHaveYielded(['A2', 'B2']);
     expect(root).toMatchRenderedOutput(
       <>
         <span prop="A2" />
@@ -3732,6 +3691,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   // Regression: https://github.com/facebook/react/issues/18486
   // @gate experimental
+  // @gate enableCache
   it('does not get stuck in pending state with render phase updates', async () => {
     let setTextWithShortTransition;
     let setTextWithLongTransition;
@@ -3827,7 +3787,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await ReactNoop.act(async () => {
       await resolveText('a');
 
-      expect(Scheduler).toHaveYielded(['Promise resolved [a]']);
       expect(Scheduler).toFlushAndYield(['Suspend! [b]', 'Loading...']);
       expect(root).toMatchRenderedOutput(
         <>
@@ -3840,12 +3799,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       await ReactNoop.act(async () => {
         await resolveText('b');
       });
-      expect(Scheduler).toHaveYielded(['Promise resolved [b]', 'b']);
+      expect(Scheduler).toHaveYielded(['b']);
       // The bug was that the pending state got stuck forever.
       expect(root).toMatchRenderedOutput(<span prop="b" />);
     });
   });
 
+  // @gate enableCache
   it('regression: #18657', async () => {
     const {useState} = React;
 
@@ -3858,7 +3818,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      await resolveText('A');
+      await seedNextTextCache('A');
       root.render(
         <Suspense fallback={<Text text="Loading..." />}>
           <App />
@@ -3891,10 +3851,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       setText('B');
       await resolveText('B');
     });
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]', 'B']);
+    expect(Scheduler).toHaveYielded(['B']);
     expect(root).toMatchRenderedOutput(<span prop="B" />);
   });
 
+  // @gate enableCache
   it('retries have lower priority than normal updates', async () => {
     const {useState} = React;
 
@@ -3927,7 +3888,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await ReactNoop.act(async () => {
       // Resolve the promise. This will trigger a retry.
       await resolveText('Async');
-      expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
       // Before the retry happens, schedule a new update.
       setText('B');
 
@@ -3950,6 +3910,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCache
   it('should fire effect clean-up when deleting suspended tree', async () => {
     const {useEffect} = React;
 
@@ -3997,6 +3958,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toHaveYielded(['Unmount Child']);
   });
 
+  // @gate enableCache
   it('should fire effect clean-up when deleting suspended tree (legacy)', async () => {
     const {useEffect} = React;
 
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index d4323bde51f9..d46a26fb942e 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -84,6 +84,11 @@ function getTestFlags() {
 
       ...featureFlags,
       ...environmentFlags,
+
+      // FIXME: www-classic has enableCache on, but when running the source
+      // tests, Jest doesn't expose the API correctly. Fix then remove
+      // this override.
+      enableCache: __EXPERIMENTAL__,
     },
     {
       get(flags, flagName) {

From 2a646f73e4f64000fcd1a483cec1c08614f20e9c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Jan 2021 17:37:00 -0600
Subject: [PATCH 0188/1603] Convert snapshot phase to depth-first traversal
 (#20622)

---
 .../src/ReactFiberCommitWork.new.js           | 170 +++++++++++++++---
 .../react-reconciler/src/ReactFiberFlags.js   |   3 +
 .../src/ReactFiberWorkLoop.new.js             | 105 +++--------
 3 files changed, 167 insertions(+), 111 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 35115140041c..767ee05b39b0 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -75,9 +75,10 @@ import {
   Hydrating,
   HydratingAndUpdate,
   Passive,
+  BeforeMutationMask,
   MutationMask,
-  PassiveMask,
   LayoutMask,
+  PassiveMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
@@ -128,6 +129,8 @@ import {
   commitHydratedSuspenseInstance,
   clearContainer,
   prepareScopeUpdate,
+  prepareForCommit,
+  beforeActiveInstanceBlur,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
@@ -144,6 +147,7 @@ import {
   Passive as HookPassive,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
+import {doesFiberContain} from './ReactFiberTreeReflection';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -259,18 +263,114 @@ function safelyCallDestroy(current: Fiber, destroy: () => void) {
   }
 }
 
-function commitBeforeMutationLifeCycles(
-  current: Fiber | null,
-  finishedWork: Fiber,
-): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
+let focusedInstanceHandle: null | Fiber = null;
+let shouldFireAfterActiveInstanceBlur: boolean = false;
+
+export function commitBeforeMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+) {
+  focusedInstanceHandle = prepareForCommit(root.containerInfo);
+
+  nextEffect = firstChild;
+  commitBeforeMutationEffects_begin();
+
+  // We no longer need to track the active instance fiber
+  const shouldFire = shouldFireAfterActiveInstanceBlur;
+  shouldFireAfterActiveInstanceBlur = false;
+  focusedInstanceHandle = null;
+
+  return shouldFire;
+}
+
+function commitBeforeMutationEffects_begin() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // 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);
+      }
+    }
+
+    const child = fiber.child;
+    if (
+      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
+      child !== null
+    ) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitBeforeMutationEffects_complete();
+    }
+  }
+}
+
+function commitBeforeMutationEffects_complete() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitBeforeMutationEffectsOnFiber,
+        null,
+        fiber,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitBeforeMutationEffectsOnFiber(fiber);
+      } catch (error) {
+        captureCommitPhaseError(fiber, error);
+      }
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
       return;
     }
-    case ClassComponent: {
-      if (finishedWork.flags & Snapshot) {
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
+  const current = finishedWork.alternate;
+  const flags = finishedWork.flags;
+
+  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.
+    if (
+      finishedWork.tag === SuspenseComponent &&
+      isSuspenseBoundaryBeingHidden(current, finishedWork) &&
+      doesFiberContain(finishedWork, focusedInstanceHandle)
+    ) {
+      shouldFireAfterActiveInstanceBlur = true;
+      beforeActiveInstanceBlur(finishedWork);
+    }
+  }
+
+  if ((flags & Snapshot) !== NoFlags) {
+    setCurrentDebugFiberInDEV(finishedWork);
+
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        break;
+      }
+      case ClassComponent: {
         if (current !== null) {
           const prevProps = current.memoizedProps;
           const prevState = current.memoizedState;
@@ -324,30 +424,43 @@ function commitBeforeMutationLifeCycles(
           }
           instance.__reactInternalSnapshotBeforeUpdate = snapshot;
         }
+        break;
       }
-      return;
-    }
-    case HostRoot: {
-      if (supportsMutation) {
-        if (finishedWork.flags & Snapshot) {
+      case HostRoot: {
+        if (supportsMutation) {
           const root = finishedWork.stateNode;
           clearContainer(root.containerInfo);
         }
+        break;
+      }
+      case HostComponent:
+      case HostText:
+      case HostPortal:
+      case IncompleteClassComponent:
+        // Nothing to do for these component types
+        break;
+      default: {
+        invariant(
+          false,
+          'This unit of work tag should not have side-effects. This error is ' +
+            'likely caused by a bug in React. Please file an issue.',
+        );
       }
-      return;
     }
-    case HostComponent:
-    case HostText:
-    case HostPortal:
-    case IncompleteClassComponent:
-      // Nothing to do for these component types
-      return;
+
+    resetCurrentDebugFiberInDEV();
+  }
+}
+
+function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
+  // 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);
   }
-  invariant(
-    false,
-    'This unit of work tag should not have side-effects. This error is ' +
-      'likely caused by a bug in React. Please file an issue.',
-  );
 }
 
 function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
@@ -2353,7 +2466,6 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
 }
 
 export {
-  commitBeforeMutationLifeCycles,
   commitResetTextContent,
   commitPlacement,
   commitDeletion,
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 518abbee1105..f6778178d754 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -60,6 +60,9 @@ export const MountPassiveDev = /*              */ 0b10000000000000000000;
 // don't contain effects, by checking subtreeFlags.
 
 export const BeforeMutationMask =
+  // TODO: Remove Update flag from before mutation phase by re-landing Visiblity
+  // flag logic (see #20043)
+  Update |
   Snapshot |
   (enableCreateEventHandleAPI
     ? // createEventHandle needs to visit deleted and hidden trees to
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a04b522e57ba..e51542c9444d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -83,13 +83,11 @@ import * as Scheduler from 'scheduler';
 import {__interactionsRef, __subscriberRef} from 'scheduler/tracing';
 
 import {
-  prepareForCommit,
   resetAfterCommit,
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
   warnsIfNotActing,
-  beforeActiveInstanceBlur,
   afterActiveInstanceBlur,
   clearContainer,
 } from './ReactFiberHostConfig';
@@ -122,9 +120,7 @@ import {
   NoFlags,
   PerformedWork,
   Placement,
-  Deletion,
   ChildDeletion,
-  Snapshot,
   Passive,
   PassiveStatic,
   Incomplete,
@@ -181,11 +177,10 @@ import {
   createClassErrorUpdate,
 } from './ReactFiberThrow.new';
 import {
-  commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
+  commitBeforeMutationEffects,
   commitLayoutEffects,
   commitMutationEffects,
   commitPassiveEffectDurations,
-  isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
   detachFiberAfterEffects,
@@ -232,7 +227,6 @@ import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
 // Used by `act`
 import enqueueTask from 'shared/enqueueTask';
-import {doesFiberContain} from './ReactFiberTreeReflection';
 
 const ceil = Math.ceil;
 
@@ -363,9 +357,6 @@ let currentEventPendingLanes: Lanes = NoLanes;
 // We warn about state updates for unmounted components differently in this case.
 let isFlushingPassiveEffects = false;
 
-let focusedInstanceHandle: null | Fiber = null;
-let shouldFireAfterActiveInstanceBlur: boolean = false;
-
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -1941,6 +1932,24 @@ function commitRootImpl(root, renderPriorityLevel) {
     firstEffect = finishedWork.firstEffect;
   }
 
+  // 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.
+  if (
+    (finishedWork.subtreeFlags & Passive) !== NoFlags ||
+    (finishedWork.flags & Passive) !== NoFlags
+  ) {
+    if (!rootDoesHavePassiveEffects) {
+      rootDoesHavePassiveEffects = true;
+      scheduleCallback(NormalSchedulerPriority, () => {
+        flushPassiveEffects();
+        return null;
+      });
+    }
+  }
+
   if (firstEffect !== null) {
     let previousLanePriority;
     if (decoupleUpdatePriorityFromScheduler) {
@@ -1962,32 +1971,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     // 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.
-    focusedInstanceHandle = prepareForCommit(root.containerInfo);
-    shouldFireAfterActiveInstanceBlur = false;
-
-    nextEffect = firstEffect;
-    do {
-      if (__DEV__) {
-        invokeGuardedCallback(null, commitBeforeMutationEffects, null);
-        if (hasCaughtError()) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      } else {
-        try {
-          commitBeforeMutationEffects();
-        } catch (error) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      }
-    } while (nextEffect !== null);
-
-    // We no longer need to track the active instance fiber
-    focusedInstanceHandle = null;
+    const shouldFireAfterActiveInstanceBlur = commitBeforeMutationEffects(
+      root,
+      finishedWork,
+    );
 
     if (enableProfilerTimer) {
       // Mark the current commit time to be shared by all Profilers in this
@@ -2204,52 +2191,6 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
-function commitBeforeMutationEffects() {
-  while (nextEffect !== null) {
-    const current = nextEffect.alternate;
-
-    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
-      if ((nextEffect.flags & Deletion) !== NoFlags) {
-        if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
-          shouldFireAfterActiveInstanceBlur = true;
-          beforeActiveInstanceBlur(nextEffect);
-        }
-      } else {
-        // TODO: Move this out of the hot path using a dedicated effect tag.
-        if (
-          nextEffect.tag === SuspenseComponent &&
-          isSuspenseBoundaryBeingHidden(current, nextEffect) &&
-          doesFiberContain(nextEffect, focusedInstanceHandle)
-        ) {
-          shouldFireAfterActiveInstanceBlur = true;
-          beforeActiveInstanceBlur(nextEffect);
-        }
-      }
-    }
-
-    const flags = nextEffect.flags;
-    if ((flags & Snapshot) !== NoFlags) {
-      setCurrentDebugFiberInDEV(nextEffect);
-
-      commitBeforeMutationEffectOnFiber(current, nextEffect);
-
-      resetCurrentDebugFiberInDEV();
-    }
-    if ((flags & Passive) !== NoFlags) {
-      // If there are passive effects, schedule a callback to flush at
-      // the earliest opportunity.
-      if (!rootDoesHavePassiveEffects) {
-        rootDoesHavePassiveEffects = true;
-        scheduleCallback(NormalSchedulerPriority, () => {
-          flushPassiveEffects();
-          return null;
-        });
-      }
-    }
-    nextEffect = nextEffect.nextEffect;
-  }
-}
-
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {

From 2e948e0d91360e4763594854be84347737e4b1f6 Mon Sep 17 00:00:00 2001
From: Dima Tisnek <dimaqq@gmail.com>
Date: Wed, 20 Jan 2021 10:59:31 +0900
Subject: [PATCH 0189/1603] Avoid .valueOf to close #20594 (#20617)

---
 packages/react-reconciler/src/ReactChildFiber.new.js | 5 +++--
 packages/react-reconciler/src/ReactChildFiber.old.js | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 83362b5e1541..c5206e46c489 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -222,14 +222,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   if (returnFiber.type !== 'textarea') {
+    const childString = Object.prototype.toString.call(newChild);
     invariant(
       false,
       'Objects are not valid as a React child (found: %s). ' +
         'If you meant to render a collection of children, use an array ' +
         'instead.',
-      Object.prototype.toString.call(newChild) === '[object Object]'
+      childString === '[object Object]'
         ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-        : newChild,
+        : childString,
     );
   }
 }
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 1f774b26813b..036b84a5493a 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -222,14 +222,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   if (returnFiber.type !== 'textarea') {
+    const childString = Object.prototype.toString.call(newChild);
     invariant(
       false,
       'Objects are not valid as a React child (found: %s). ' +
         'If you meant to render a collection of children, use an array ' +
         'instead.',
-      Object.prototype.toString.call(newChild) === '[object Object]'
+      childString === '[object Object]'
         ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-        : newChild,
+        : childString,
     );
   }
 }

From 11a983fc76192037798d2f93dedf09af97f99884 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Jan 2021 12:18:19 -0600
Subject: [PATCH 0190/1603] Remove references to Deletion flag (#20623)

We no longer use the Deletion flag anywhere in the new fork, so we can
stop marking it.
---
 packages/react-reconciler/src/ReactChildFiber.new.js     | 8 +-------
 packages/react-reconciler/src/ReactFiberBeginWork.new.js | 4 ----
 .../src/ReactFiberHydrationContext.new.js                | 9 +--------
 3 files changed, 2 insertions(+), 19 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index c5206e46c489..a18f845d26ae 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -13,12 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 
 import getComponentName from 'shared/getComponentName';
-import {
-  Deletion,
-  ChildDeletion,
-  Placement,
-  StaticMask,
-} from './ReactFiberFlags';
+import {Placement, ChildDeletion} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -281,7 +276,6 @@ function ChildReconciler(shouldTrackSideEffects) {
       returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
     }
     childToDelete.nextEffect = null;
-    childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
     const deletions = returnFiber.deletions;
     if (deletions === null) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 9684efafc409..f447ee0e3545 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -67,7 +67,6 @@ import {
   DidCapture,
   Update,
   Ref,
-  Deletion,
   ChildDeletion,
   ForceUpdateForLegacySuspense,
   StaticMask,
@@ -2200,8 +2199,6 @@ function updateSuspensePrimaryChildren(
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
     currentFallbackChildFragment.nextEffect = null;
-    currentFallbackChildFragment.flags =
-      (currentFallbackChildFragment.flags & StaticMask) | Deletion;
     workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
     const deletions = workInProgress.deletions;
     if (deletions === null) {
@@ -3191,7 +3188,6 @@ function remountFiber(
       returnFiber.firstEffect = returnFiber.lastEffect = current;
     }
     current.nextEffect = null;
-    current.flags = (current.flags & StaticMask) | Deletion;
 
     const deletions = returnFiber.deletions;
     if (deletions === null) {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index f416c33b21f1..087dd818b9a9 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -24,13 +24,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {
-  Deletion,
-  ChildDeletion,
-  Placement,
-  Hydrating,
-  StaticMask,
-} from './ReactFiberFlags';
+import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -130,7 +124,6 @@ function deleteHydratableInstance(
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
 
   // This might seem like it belongs on progressedFirstDeletion. However,
   // these children are not part of the reconciliation list of children.

From 741dcbdbec52b088e33538cd93c679c05c146aa1 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Jan 2021 12:21:42 -0600
Subject: [PATCH 0191/1603] Schedule passive phase whenever there's a deletion
 (#20624)

We use the passive phase to detach the fibers.
---
 .../src/ReactFiberCommitWork.new.js           | 28 +--------
 .../react-reconciler/src/ReactFiberFlags.js   |  2 +
 .../src/ReactFiberHooks.new.js                | 13 ++--
 .../src/ReactFiberWorkLoop.new.js             | 61 +------------------
 4 files changed, 11 insertions(+), 93 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 767ee05b39b0..714c77e477ae 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -136,8 +136,6 @@ import {
   captureCommitPhaseError,
   resolveRetryWakeable,
   markCommitTimeOfFallback,
-  enqueuePendingPassiveHookEffectMount,
-  enqueuePendingPassiveHookEffectUnmount,
   enqueuePendingPassiveProfilerEffect,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -533,26 +531,6 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
   }
 }
 
-function schedulePassiveEffects(finishedWork: Fiber) {
-  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 {
-      const {next, tag} = effect;
-      if (
-        (tag & HookPassive) !== NoHookEffect &&
-        (tag & HookHasEffect) !== NoHookEffect
-      ) {
-        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
-        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
-      }
-      effect = next;
-    } while (effect !== firstEffect);
-  }
-}
-
 export function commitPassiveEffectDurations(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
@@ -639,8 +617,6 @@ function commitLayoutEffectOnFiber(
         } else {
           commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
         }
-
-        schedulePassiveEffects(finishedWork);
         break;
       }
       case ClassComponent: {
@@ -1091,9 +1067,7 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if ((tag & HookPassive) !== NoHookEffect) {
-                enqueuePendingPassiveHookEffectUnmount(current, effect);
-              } else {
+              if ((tag & HookLayout) !== NoHookEffect) {
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index f6778178d754..f29a1b645f15 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -81,6 +81,8 @@ export const MutationMask =
   Hydrating |
   Visibility;
 export const LayoutMask = Update | Callback | Ref;
+
+// TODO: Split into PassiveMountMask and PassiveUnmountMask
 export const PassiveMask = Passive | ChildDeletion;
 
 // Union of tags that don't get reset on clones.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d5ad5048926e..e21d10b9d706 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -472,6 +472,8 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
+  // TODO: Don't need to reset the flags here, because they're reset in the
+  // complete phase (bubbleProperties).
   workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
   current.lanes = removeLanes(current.lanes, lanes);
 }
@@ -1309,7 +1311,7 @@ function mountEffect(
     }
   }
   return mountEffectImpl(
-    UpdateEffect | PassiveEffect | PassiveStaticEffect,
+    PassiveEffect | PassiveStaticEffect,
     HookPassive,
     create,
     deps,
@@ -1326,12 +1328,7 @@ function updateEffect(
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-  return updateEffectImpl(
-    UpdateEffect | PassiveEffect,
-    HookPassive,
-    create,
-    deps,
-  );
+  return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
 function mountLayoutEffect(
@@ -1683,7 +1680,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
+      currentlyRenderingFiber.flags |= PassiveEffect;
       pushEffect(
         HookHasEffect | HookPassive,
         () => {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e51542c9444d..ed3c4ce8882c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -13,7 +13,6 @@ import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
-import type {Effect as HookEffect} from './ReactFiberHooks.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 
@@ -120,12 +119,11 @@ import {
   NoFlags,
   PerformedWork,
   Placement,
-  ChildDeletion,
-  Passive,
   PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
+  PassiveMask,
   StaticMask,
 } from './ReactFiberFlags';
 import {
@@ -183,7 +181,6 @@ import {
   commitPassiveEffectDurations,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
-  detachFiberAfterEffects,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
@@ -314,7 +311,6 @@ export function getRenderTargetTime(): number {
   return workInProgressRootRenderTargetTime;
 }
 
-let nextEffect: Fiber | null = null;
 let hasUncaughtError = false;
 let firstUncaughtError = null;
 let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;
@@ -1938,8 +1934,8 @@ function commitRootImpl(root, renderPriorityLevel) {
   // TODO: Delete all other places that schedule the passive effect callback
   // They're redundant.
   if (
-    (finishedWork.subtreeFlags & Passive) !== NoFlags ||
-    (finishedWork.flags & Passive) !== NoFlags
+    (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
+    (finishedWork.flags & PassiveMask) !== NoFlags
   ) {
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
@@ -2061,31 +2057,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
     pendingPassiveEffectsRenderPriority = renderPriorityLevel;
-  } else {
-    // We are done with the effect chain at this point so let's clear the
-    // nextEffect pointers to assist with GC. If we have passive effects, we'll
-    // clear this in flushPassiveEffects
-    // TODO: We should always do this in the passive phase, by scheduling
-    // a passive callback for every deletion.
-    nextEffect = firstEffect;
-    while (nextEffect !== null) {
-      const nextNextEffect = nextEffect.nextEffect;
-      nextEffect.nextEffect = null;
-      if (nextEffect.flags & ChildDeletion) {
-        const deletions = nextEffect.deletions;
-        if (deletions !== null) {
-          for (let i = 0; i < deletions.length; i++) {
-            const deletion = deletions[i];
-            const alternate = deletion.alternate;
-            detachFiberAfterEffects(deletion);
-            if (alternate !== null) {
-              detachFiberAfterEffects(alternate);
-            }
-          }
-        }
-      }
-      nextEffect = nextNextEffect;
-    }
   }
 
   // Read this again, since an effect might have updated it
@@ -2229,32 +2200,6 @@ export function enqueuePendingPassiveProfilerEffect(fiber: Fiber): void {
   }
 }
 
-export function enqueuePendingPassiveHookEffectMount(
-  fiber: Fiber,
-  effect: HookEffect,
-): void {
-  if (!rootDoesHavePassiveEffects) {
-    rootDoesHavePassiveEffects = true;
-    scheduleCallback(NormalSchedulerPriority, () => {
-      flushPassiveEffects();
-      return null;
-    });
-  }
-}
-
-export function enqueuePendingPassiveHookEffectUnmount(
-  fiber: Fiber,
-  effect: HookEffect,
-): void {
-  if (!rootDoesHavePassiveEffects) {
-    rootDoesHavePassiveEffects = true;
-    scheduleCallback(NormalSchedulerPriority, () => {
-      flushPassiveEffects();
-      return null;
-    });
-  }
-}
-
 function flushPassiveEffectsImpl() {
   if (rootWithPendingPassiveEffects === null) {
     return false;

From fceb75e8995eaa6eb5c996111dc2bf7d8679cd99 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Jan 2021 12:24:01 -0600
Subject: [PATCH 0192/1603] Delete remaining references to effect list (#20625)

I think that's it!
---
 .eslintrc.js                                  |  2 +-
 .../src/ReactChildFiber.new.js                | 14 ----
 .../react-reconciler/src/ReactFiber.new.js    | 20 ++---
 .../src/ReactFiberBeginWork.new.js            | 36 +--------
 .../src/ReactFiberCommitWork.new.js           |  3 -
 .../src/ReactFiberCompleteWork.new.js         | 57 ++++++++-----
 .../src/ReactFiberHydrationContext.new.js     | 12 ---
 .../src/ReactFiberSuspenseComponent.new.js    |  3 -
 .../src/ReactFiberThrow.new.js                |  2 -
 .../src/ReactFiberWorkLoop.new.js             | 81 +++++--------------
 10 files changed, 63 insertions(+), 167 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a456964bdbdb..bed7ff123afd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,7 +116,7 @@ module.exports = {
     'react-internal/no-cross-fork-types': [
       ERROR,
       {
-        old: [],
+        old: ['firstEffect', 'nextEffect'],
         new: [],
       },
     ],
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index a18f845d26ae..3435694b7ab0 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -263,20 +263,6 @@ function ChildReconciler(shouldTrackSideEffects) {
       // Noop.
       return;
     }
-    // Deletions are added in reversed order so we add it to the front.
-    // At this point, the return fiber's effect list is empty except for
-    // deletions, so we can just append the deletion to the list. The remaining
-    // effects aren't added until the complete phase. Once we implement
-    // resuming, this may not be true.
-    const last = returnFiber.lastEffect;
-    if (last !== null) {
-      last.nextEffect = childToDelete;
-      returnFiber.lastEffect = childToDelete;
-    } else {
-      returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
-    }
-    childToDelete.nextEffect = null;
-
     const deletions = returnFiber.deletions;
     if (deletions === null) {
       returnFiber.deletions = [childToDelete];
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 3b3d9d4bc2e7..d6c28749f26d 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -144,10 +144,6 @@ function FiberNode(
 
   // Effects
   this.flags = NoFlags;
-  this.nextEffect = null;
-
-  this.firstEffect = null;
-  this.lastEffect = null;
   this.subtreeFlags = NoFlags;
   this.deletions = null;
 
@@ -285,10 +281,7 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     // Reset the effect tag.
     workInProgress.flags = NoFlags;
 
-    // The effect list is no longer valid.
-    workInProgress.nextEffect = null;
-    workInProgress.firstEffect = null;
-    workInProgress.lastEffect = null;
+    // The effects are no longer valid.
     workInProgress.subtreeFlags = NoFlags;
     workInProgress.deletions = null;
 
@@ -370,10 +363,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
   // that child fiber is setting, not the reconciliation.
   workInProgress.flags &= StaticMask | Placement;
 
-  // The effect list is no longer valid.
-  workInProgress.nextEffect = null;
-  workInProgress.firstEffect = null;
-  workInProgress.lastEffect = null;
+  // The effects are no longer valid.
 
   const current = workInProgress.alternate;
   if (current === null) {
@@ -403,6 +393,9 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = current.lanes;
 
     workInProgress.child = current.child;
+    // TODO: `subtreeFlags` should be reset to NoFlags, like we do in
+    // `createWorkInProgress`. Nothing reads this until the complete phase,
+    // currently, but it might in the future, and we should be consistent.
     workInProgress.subtreeFlags = current.subtreeFlags;
     workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
@@ -847,9 +840,6 @@ export function assignFiberPropertiesInDEV(
   target.dependencies = source.dependencies;
   target.mode = source.mode;
   target.flags = source.flags;
-  target.nextEffect = source.nextEffect;
-  target.firstEffect = source.firstEffect;
-  target.lastEffect = source.lastEffect;
   target.subtreeFlags = source.subtreeFlags;
   target.deletions = source.deletions;
   target.lanes = source.lanes;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index f447ee0e3545..2239906d43e4 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2198,8 +2198,6 @@ function updateSuspensePrimaryChildren(
   primaryChildFragment.sibling = null;
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
-    currentFallbackChildFragment.nextEffect = null;
-    workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
     const deletions = workInProgress.deletions;
     if (deletions === null) {
       workInProgress.deletions = [currentFallbackChildFragment];
@@ -2261,22 +2259,9 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (currentFallbackChildFragment !== null) {
-      // The fallback fiber was added as a deletion effect during the first
-      // pass. However, since we're going to remain on the fallback, we no
-      // longer want to delete it. So we need to remove it from the list.
-      // Deletions are stored on the same list as effects, and are always added
-      // to the front. So we know that the first effect must be the fallback
-      // deletion effect, and everything after that is from the primary free.
-      const firstPrimaryTreeEffect = currentFallbackChildFragment.nextEffect;
-      if (firstPrimaryTreeEffect !== null) {
-        workInProgress.firstEffect = firstPrimaryTreeEffect;
-      } else {
-        // TODO: Reset this somewhere else? Lol legacy mode is so weird.
-        workInProgress.firstEffect = workInProgress.lastEffect = null;
-      }
-    }
-
+    // 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 = createWorkInProgressOffscreenFiber(
@@ -2773,7 +2758,6 @@ function initSuspenseListRenderState(
   tail: null | Fiber,
   lastContentRow: null | Fiber,
   tailMode: SuspenseListTailMode,
-  lastEffectBeforeRendering: null | Fiber,
 ): void {
   const renderState: null | SuspenseListRenderState =
     workInProgress.memoizedState;
@@ -2785,7 +2769,6 @@ function initSuspenseListRenderState(
       last: lastContentRow,
       tail: tail,
       tailMode: tailMode,
-      lastEffect: lastEffectBeforeRendering,
     }: SuspenseListRenderState);
   } else {
     // We can reuse the existing object from previous renders.
@@ -2795,7 +2778,6 @@ function initSuspenseListRenderState(
     renderState.last = lastContentRow;
     renderState.tail = tail;
     renderState.tailMode = tailMode;
-    renderState.lastEffect = lastEffectBeforeRendering;
   }
 }
 
@@ -2877,7 +2859,6 @@ function updateSuspenseListComponent(
           tail,
           lastContentRow,
           tailMode,
-          workInProgress.lastEffect,
         );
         break;
       }
@@ -2909,7 +2890,6 @@ function updateSuspenseListComponent(
           tail,
           null, // last
           tailMode,
-          workInProgress.lastEffect,
         );
         break;
       }
@@ -2920,7 +2900,6 @@ function updateSuspenseListComponent(
           null, // tail
           null, // last
           undefined,
-          workInProgress.lastEffect,
         );
         break;
       }
@@ -3180,15 +3159,6 @@ function remountFiber(
 
     // Delete the old fiber and place the new one.
     // Since the old fiber is disconnected, we have to schedule it manually.
-    const last = returnFiber.lastEffect;
-    if (last !== null) {
-      last.nextEffect = current;
-      returnFiber.lastEffect = current;
-    } else {
-      returnFiber.firstEffect = returnFiber.lastEffect = current;
-    }
-    current.nextEffect = null;
-
     const deletions = returnFiber.deletions;
     if (deletions === null) {
       returnFiber.deletions = [current];
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 714c77e477ae..371991abda35 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1213,9 +1213,6 @@ export function detachFiberAfterEffects(fiber: Fiber): void {
   fiber.sibling = null;
   fiber.stateNode = null;
   fiber.updateQueue = null;
-  fiber.nextEffect = null;
-  fiber.firstEffect = null;
-  fiber.lastEffect = null;
 
   if (__DEV__) {
     fiber._debugOwner = null;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 92fa3eeacb60..cd7ed4c4c180 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -72,7 +72,9 @@ import {
   NoFlags,
   DidCapture,
   Snapshot,
+  ChildDeletion,
   StaticMask,
+  MutationMask,
 } from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
@@ -173,6 +175,31 @@ function markRef(workInProgress: Fiber) {
   workInProgress.flags |= Ref;
 }
 
+function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
+  const didBailout = current !== null && current.child === completedWork.child;
+  if (didBailout) {
+    return true;
+  }
+
+  if ((completedWork.flags & ChildDeletion) !== NoFlags) {
+    return false;
+  }
+
+  // TODO: If we move the `hadNoMutationsEffects` call after `bubbleProperties`
+  // then we only have to check the `completedWork.subtreeFlags`.
+  let child = completedWork.child;
+  while (child !== null) {
+    if (
+      (child.flags & MutationMask) !== NoFlags ||
+      (child.subtreeFlags & MutationMask) !== NoFlags
+    ) {
+      return false;
+    }
+    child = child.sibling;
+  }
+  return true;
+}
+
 let appendAllChildren;
 let updateHostContainer;
 let updateHostComponent;
@@ -217,7 +244,7 @@ if (supportsMutation) {
     }
   };
 
-  updateHostContainer = function(workInProgress: Fiber) {
+  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
     // Noop
   };
   updateHostComponent = function(
@@ -461,13 +488,13 @@ if (supportsMutation) {
       node = node.sibling;
     }
   };
-  updateHostContainer = function(workInProgress: Fiber) {
+  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
     const portalOrRoot: {
       containerInfo: Container,
       pendingChildren: ChildSet,
       ...
     } = workInProgress.stateNode;
-    const childrenUnchanged = workInProgress.firstEffect === null;
+    const childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
     if (childrenUnchanged) {
       // No changes, just reuse the existing instance.
     } else {
@@ -492,7 +519,7 @@ if (supportsMutation) {
     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 childrenUnchanged = workInProgress.firstEffect === null;
+    const childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
     if (childrenUnchanged && oldProps === newProps) {
       // No changes, just reuse the existing instance.
       // Note that this might release a previous clone.
@@ -575,7 +602,7 @@ if (supportsMutation) {
   };
 } else {
   // No host operations
-  updateHostContainer = function(workInProgress: Fiber) {
+  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
     // Noop
   };
   updateHostComponent = function(
@@ -847,7 +874,7 @@ function completeWork(
           workInProgress.flags |= Snapshot;
         }
       }
-      updateHostContainer(workInProgress);
+      updateHostContainer(current, workInProgress);
       bubbleProperties(workInProgress);
       return null;
     }
@@ -1142,7 +1169,7 @@ function completeWork(
     }
     case HostPortal:
       popHostContainer(workInProgress);
-      updateHostContainer(workInProgress);
+      updateHostContainer(current, workInProgress);
       if (current === null) {
         preparePortalMount(workInProgress.stateNode.containerInfo);
       }
@@ -1226,11 +1253,7 @@ function completeWork(
 
                 // Rerender the whole list, but this time, we'll force fallbacks
                 // to stay in place.
-                // Reset the effect list before doing the second pass since that's now invalid.
-                if (renderState.lastEffect === null) {
-                  workInProgress.firstEffect = null;
-                }
-                workInProgress.lastEffect = renderState.lastEffect;
+                // Reset the 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);
@@ -1301,15 +1324,6 @@ function completeWork(
               !renderedTail.alternate &&
               !getIsHydrating() // We don't cut it if we're hydrating.
             ) {
-              // We need to delete the row we just rendered.
-              // Reset the effect list to what it was before we rendered this
-              // child. The nested children have already appended themselves.
-              const lastEffect = (workInProgress.lastEffect =
-                renderState.lastEffect);
-              // Remove any effects that were appended after this point.
-              if (lastEffect !== null) {
-                lastEffect.nextEffect = null;
-              }
               // We're done.
               bubbleProperties(workInProgress);
               return null;
@@ -1369,7 +1383,6 @@ function completeWork(
         const next = renderState.tail;
         renderState.rendering = next;
         renderState.tail = next.sibling;
-        renderState.lastEffect = workInProgress.lastEffect;
         renderState.renderingStartTime = now();
         next.sibling = null;
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 087dd818b9a9..d91901f51976 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -125,18 +125,6 @@ function deleteHydratableInstance(
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
 
-  // This might seem like it belongs on progressedFirstDeletion. However,
-  // these children are not part of the reconciliation list of children.
-  // Even if we abort and rereconcile the children, that will try to hydrate
-  // again and the nodes are still in the host tree so these will be
-  // recreated.
-  if (returnFiber.lastEffect !== null) {
-    returnFiber.lastEffect.nextEffect = childToDelete;
-    returnFiber.lastEffect = childToDelete;
-  } else {
-    returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
-  }
-
   const deletions = returnFiber.deletions;
   if (deletions === null) {
     returnFiber.deletions = [childToDelete];
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 9692c89a6591..b1077092d46a 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -60,9 +60,6 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
-  // Last Effect before we rendered the "rendering" item.
-  // Used to remove new effects added by the rendered item.
-  lastEffect: null | Fiber,
 |};
 
 export function shouldCaptureSuspense(
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index ea670b69f070..27baacda7dae 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -188,8 +188,6 @@ function throwException(
 ) {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
-  // Its effect list is no longer valid.
-  sourceFiber.firstEffect = sourceFiber.lastEffect = null;
 
   if (
     value !== null &&
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ed3c4ce8882c..cb4c4dd36667 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -117,14 +117,15 @@ import {
 import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
-  PerformedWork,
   Placement,
   PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
+  BeforeMutationMask,
+  MutationMask,
+  LayoutMask,
   PassiveMask,
-  StaticMask,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -1716,45 +1717,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         workInProgress = next;
         return;
       }
-
-      if (
-        returnFiber !== null &&
-        // Do not append effects to parents if a sibling failed to complete
-        (returnFiber.flags & Incomplete) === NoFlags
-      ) {
-        // Append all the effects of the subtree and this fiber onto the effect
-        // list of the parent. The completion order of the children affects the
-        // side-effect order.
-        if (returnFiber.firstEffect === null) {
-          returnFiber.firstEffect = completedWork.firstEffect;
-        }
-        if (completedWork.lastEffect !== null) {
-          if (returnFiber.lastEffect !== null) {
-            returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
-          }
-          returnFiber.lastEffect = completedWork.lastEffect;
-        }
-
-        // If this fiber had side-effects, we append it AFTER the children's
-        // side-effects. We can perform certain side-effects earlier if needed,
-        // by doing multiple passes over the effect list. We don't want to
-        // schedule our own side-effect on our own list because if end up
-        // reusing children we'll schedule this effect onto itself since we're
-        // at the end.
-        const flags = completedWork.flags;
-
-        // Skip both NoWork and PerformedWork tags when creating the effect
-        // list. PerformedWork effect is read by React DevTools but shouldn't be
-        // committed.
-        if ((flags & ~StaticMask) > PerformedWork) {
-          if (returnFiber.lastEffect !== null) {
-            returnFiber.lastEffect.nextEffect = completedWork;
-          } else {
-            returnFiber.firstEffect = completedWork;
-          }
-          returnFiber.lastEffect = completedWork;
-        }
-      }
     } else {
       // This fiber did not complete because something threw. Pop values off
       // the stack without entering the complete phase. If this is a boundary,
@@ -1791,8 +1753,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       }
 
       if (returnFiber !== null) {
-        // Mark the parent fiber as incomplete and clear its effect list.
-        returnFiber.firstEffect = returnFiber.lastEffect = null;
+        // Mark the parent fiber as incomplete and clear its subtree flags.
         returnFiber.flags |= Incomplete;
         returnFiber.subtreeFlags = NoFlags;
         returnFiber.deletions = null;
@@ -1910,24 +1871,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     // times out.
   }
 
-  // Get the list of effects.
-  let firstEffect;
-  if (finishedWork.flags > PerformedWork) {
-    // A fiber's effect list consists only of its children, not itself. So if
-    // the root has an effect, we need to add it to the end of the list. The
-    // resulting list is the set that would belong to the root's parent, if it
-    // had one; that is, all the effects in the tree including the root.
-    if (finishedWork.lastEffect !== null) {
-      finishedWork.lastEffect.nextEffect = finishedWork;
-      firstEffect = finishedWork.firstEffect;
-    } else {
-      firstEffect = finishedWork;
-    }
-  } else {
-    // There is no effect on the root.
-    firstEffect = finishedWork.firstEffect;
-  }
-
   // 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.)
@@ -1946,7 +1889,21 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  if (firstEffect !== null) {
+  // 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 satsify Flow. I think the
+  // only other reason this optimization exists is because it affects profiling.
+  // Reconsider whether this is necessary.
+  const subtreeHasEffects =
+    (finishedWork.subtreeFlags &
+      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
+    NoFlags;
+  const rootHasEffect =
+    (finishedWork.flags &
+      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
+    NoFlags;
+
+  if (subtreeHasEffects || rootHasEffect) {
     let previousLanePriority;
     if (decoupleUpdatePriorityFromScheduler) {
       previousLanePriority = getCurrentUpdateLanePriority();

From d4c05a1eadb0f94c930f5263f819587d14ab3ac9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Jan 2021 07:43:52 -0800
Subject: [PATCH 0193/1603] Flow ignore new build2 directory (#20635)

---
 scripts/flow/config/flowconfig | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index bb2d4db0b6f8..ada7f2207be5 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -1,6 +1,7 @@
 [ignore]
 .*/scripts/bench/.*
 .*/build/.*
+.*/build2/.*
 .*/fixtures/.*
 .*/.tempUserDataDir/.*
 

From 3957853ae5095a85bacf6d414ee200e8236e9ed4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 22 Jan 2021 05:58:11 -0800
Subject: [PATCH 0194/1603] Re-add "strict effects mode" for legacy roots only
 (#20639)

This combines changes originally made in #19523, #20028, and #20415 but with slightly different semantics: "strict effects" mode is enabled only for the experimental root APIs (never for legacy render, regardless of <StrictMode> usage). These semantics may change slightly in the future.
---
 .../src/ReactFiberClassComponent.new.js       |  55 ++++++-
 .../src/ReactFiberClassComponent.old.js       |  55 ++++++-
 .../src/ReactFiberCommitWork.new.js           | 134 ++++++++++++++++++
 .../src/ReactFiberCommitWork.old.js           | 134 ++++++++++++++++++
 .../src/ReactFiberHooks.new.js                |  96 ++++++++++---
 .../src/ReactFiberHooks.old.js                | 102 ++++++++++---
 .../src/ReactFiberWorkLoop.new.js             |  72 ++++++++++
 .../src/ReactFiberWorkLoop.old.js             |  70 +++++++++
 .../ReactDoubleInvokeEvents-test.internal.js  |  89 +++++-------
 .../__tests__/ReactProfiler-test.internal.js  |   2 -
 10 files changed, 707 insertions(+), 102 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index e807ae8222a2..83004c3f2063 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -12,13 +12,14 @@ import type {Lanes} from './ReactFiberLane.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 
 import * as React from 'react';
-import {Update, Snapshot} from './ReactFiberFlags';
+import {MountLayoutDev, Update, Snapshot} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -29,7 +30,13 @@ import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
-import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
+import {
+  BlockingMode,
+  ConcurrentMode,
+  DebugTracingMode,
+  NoMode,
+  StrictMode,
+} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -890,7 +897,16 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    workInProgress.flags |= Update;
+    if (
+      __DEV__ &&
+      enableDoubleInvokingEffects &&
+      (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    ) {
+      // Never double-invoke effects for legacy roots.
+      workInProgress.flags |= MountLayoutDev | Update;
+    } else {
+      workInProgress.flags |= Update;
+    }
   }
 }
 
@@ -960,7 +976,16 @@ function resumeMountClassInstance(
     // 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;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
+        // Never double-invoke effects for legacy roots.
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
     return false;
   }
@@ -1003,13 +1028,31 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.flags |= Update;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
+        // Never double-invoke effects for legacy roots.
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
   } 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;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
+        // Never double-invoke effects for legacy roots.
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
 
     // If shouldComponentUpdate returned false, we should still update the
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index f055bac71ca9..2b4496ca5c91 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -12,13 +12,14 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 
 import * as React from 'react';
-import {Update, Snapshot} from './ReactFiberFlags';
+import {MountLayoutDev, Update, Snapshot} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -29,7 +30,13 @@ import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
-import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
+import {
+  BlockingMode,
+  ConcurrentMode,
+  DebugTracingMode,
+  NoMode,
+  StrictMode,
+} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -890,7 +897,16 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    workInProgress.flags |= Update;
+    if (
+      __DEV__ &&
+      enableDoubleInvokingEffects &&
+      (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    ) {
+      // Never double-invoke effects for legacy roots.
+      workInProgress.flags |= MountLayoutDev | Update;
+    } else {
+      workInProgress.flags |= Update;
+    }
   }
 }
 
@@ -960,7 +976,16 @@ function resumeMountClassInstance(
     // 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;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
+        // Never double-invoke effects for legacy roots.
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
     return false;
   }
@@ -1003,13 +1028,31 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      workInProgress.flags |= Update;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
+        // Never double-invoke effects for legacy roots.
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
   } 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;
+      if (
+        __DEV__ &&
+        enableDoubleInvokingEffects &&
+        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      ) {
+        // Never double-invoke effects for legacy roots.
+        workInProgress.flags |= MountLayoutDev | Update;
+      } else {
+        workInProgress.flags |= Update;
+      }
     }
 
     // If shouldComponentUpdate returned false, we should still update the
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 371991abda35..2d50f255ee21 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -36,6 +36,7 @@ import {
   enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2436,6 +2437,135 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
   fiber.return = expectedReturnFiber;
 }
 
+function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListMount,
+          null,
+          HookLayout | HookHasEffect,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+      case ClassComponent: {
+        const instance = fiber.stateNode;
+        invokeGuardedCallback(null, instance.componentDidMount, instance);
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokePassiveEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListMount,
+          null,
+          HookPassive | HookHasEffect,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListUnmount,
+          null,
+          HookLayout | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+        if (hasCaughtError()) {
+          const unmountError = clearCaughtError();
+          captureCommitPhaseError(fiber, unmountError);
+        }
+        break;
+      }
+      case ClassComponent: {
+        const instance = fiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          invokeGuardedCallback(
+            null,
+            safelyCallComponentWillUnmount,
+            null,
+            fiber,
+            instance,
+            fiber.return,
+          );
+          if (hasCaughtError()) {
+            const unmountError = clearCaughtError();
+            captureCommitPhaseError(fiber, unmountError);
+          }
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListUnmount,
+          null,
+          HookPassive | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+        if (hasCaughtError()) {
+          const unmountError = clearCaughtError();
+          captureCommitPhaseError(fiber, unmountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
 export {
   commitResetTextContent,
   commitPlacement,
@@ -2443,4 +2573,8 @@ export {
   commitWork,
   commitAttachRef,
   commitDetachRef,
+  invokeLayoutEffectMountInDEV,
+  invokeLayoutEffectUnmountInDEV,
+  invokePassiveEffectMountInDEV,
+  invokePassiveEffectUnmountInDEV,
 };
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index fdc9868dbe9b..bc443576e05d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -36,6 +36,7 @@ import {
   enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2352,6 +2353,135 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
   fiber.return = expectedReturnFiber;
 }
 
+function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListMount,
+          null,
+          HookLayout | HookHasEffect,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+      case ClassComponent: {
+        const instance = fiber.stateNode;
+        invokeGuardedCallback(null, instance.componentDidMount, instance);
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokePassiveEffectMountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListMount,
+          null,
+          HookPassive | HookHasEffect,
+          fiber,
+        );
+        if (hasCaughtError()) {
+          const mountError = clearCaughtError();
+          captureCommitPhaseError(fiber, mountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListUnmount,
+          null,
+          HookLayout | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+        if (hasCaughtError()) {
+          const unmountError = clearCaughtError();
+          captureCommitPhaseError(fiber, unmountError);
+        }
+        break;
+      }
+      case ClassComponent: {
+        const instance = fiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          invokeGuardedCallback(
+            null,
+            safelyCallComponentWillUnmount,
+            null,
+            fiber,
+            instance,
+            fiber.return,
+          );
+          if (hasCaughtError()) {
+            const unmountError = clearCaughtError();
+            captureCommitPhaseError(fiber, unmountError);
+          }
+        }
+        break;
+      }
+    }
+  }
+}
+
+function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        invokeGuardedCallback(
+          null,
+          commitHookEffectListUnmount,
+          null,
+          HookPassive | HookHasEffect,
+          fiber,
+          fiber.return,
+        );
+        if (hasCaughtError()) {
+          const unmountError = clearCaughtError();
+          captureCommitPhaseError(fiber, unmountError);
+        }
+        break;
+      }
+    }
+  }
+}
+
 export {
   commitBeforeMutationLifeCycles,
   commitResetTextContent,
@@ -2360,4 +2490,8 @@ export {
   commitWork,
   commitAttachRef,
   commitDetachRef,
+  invokeLayoutEffectMountInDEV,
+  invokeLayoutEffectUnmountInDEV,
+  invokePassiveEffectMountInDEV,
+  invokePassiveEffectUnmountInDEV,
 };
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index e21d10b9d706..ff4b18672e0c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -29,9 +29,15 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  DebugTracingMode,
+} from './ReactTypeOfMode';
 import {
   NoLane,
   NoLanes,
@@ -52,6 +58,8 @@ import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
   PassiveStatic as PassiveStaticEffect,
+  MountLayoutDev as MountLayoutDevEffect,
+  MountPassiveDev as MountPassiveDevEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -474,7 +482,20 @@ export function bailoutHooks(
   workInProgress.updateQueue = current.updateQueue;
   // TODO: Don't need to reset the flags here, because they're reset in the
   // complete phase (bubbleProperties).
-  workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    workInProgress.flags &= ~(
+      MountPassiveDevEffect |
+      MountLayoutDevEffect |
+      PassiveEffect |
+      UpdateEffect
+    );
+  } else {
+    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
+  }
   current.lanes = removeLanes(current.lanes, lanes);
 }
 
@@ -1310,12 +1331,25 @@ function mountEffect(
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-  return mountEffectImpl(
-    PassiveEffect | PassiveStaticEffect,
-    HookPassive,
-    create,
-    deps,
-  );
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    return mountEffectImpl(
+      MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  } else {
+    return mountEffectImpl(
+      PassiveEffect | PassiveStaticEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  }
 }
 
 function updateEffect(
@@ -1335,7 +1369,20 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    return mountEffectImpl(
+      MountLayoutDevEffect | UpdateEffect,
+      HookLayout,
+      create,
+      deps,
+    );
+  } else {
+    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+  }
 }
 
 function updateLayoutEffect(
@@ -1394,12 +1441,25 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  return mountEffectImpl(
-    UpdateEffect,
-    HookLayout,
-    imperativeHandleEffect.bind(null, create, ref),
-    effectDeps,
-  );
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    return mountEffectImpl(
+      MountLayoutDevEffect | UpdateEffect,
+      HookLayout,
+      imperativeHandleEffect.bind(null, create, ref),
+      effectDeps,
+    );
+  } else {
+    return mountEffectImpl(
+      UpdateEffect,
+      HookLayout,
+      imperativeHandleEffect.bind(null, create, ref),
+      effectDeps,
+    );
+  }
 }
 
 function updateImperativeHandle<T>(
@@ -1680,7 +1740,11 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      currentlyRenderingFiber.flags |= PassiveEffect;
+      if (__DEV__ && enableDoubleInvokingEffects) {
+        currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
+      } else {
+        currentlyRenderingFiber.flags |= PassiveEffect;
+      }
       pushEffect(
         HookHasEffect | HookPassive,
         () => {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 45ff2b50665c..f8cd86cc7d73 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -29,9 +29,15 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  DebugTracingMode,
+} from './ReactTypeOfMode';
 import {
   NoLane,
   NoLanes,
@@ -52,6 +58,8 @@ import {
   Update as UpdateEffect,
   Passive as PassiveEffect,
   PassiveStatic as PassiveStaticEffect,
+  MountLayoutDev as MountLayoutDevEffect,
+  MountPassiveDev as MountPassiveDevEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -472,7 +480,22 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
-  workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
+  // TODO: Don't need to reset the flags here, because they're reset in the
+  // complete phase (bubbleProperties).
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    workInProgress.flags &= ~(
+      MountLayoutDevEffect |
+      MountPassiveDevEffect |
+      PassiveEffect |
+      UpdateEffect
+    );
+  } else {
+    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
+  }
   current.lanes = removeLanes(current.lanes, lanes);
 }
 
@@ -1308,12 +1331,28 @@ function mountEffect(
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-  return mountEffectImpl(
-    UpdateEffect | PassiveEffect | PassiveStaticEffect,
-    HookPassive,
-    create,
-    deps,
-  );
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    return mountEffectImpl(
+      MountPassiveDevEffect |
+        UpdateEffect |
+        PassiveEffect |
+        PassiveStaticEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  } else {
+    return mountEffectImpl(
+      UpdateEffect | PassiveEffect | PassiveStaticEffect,
+      HookPassive,
+      create,
+      deps,
+    );
+  }
 }
 
 function updateEffect(
@@ -1338,7 +1377,20 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    return mountEffectImpl(
+      MountLayoutDevEffect | UpdateEffect,
+      HookLayout,
+      create,
+      deps,
+    );
+  } else {
+    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+  }
 }
 
 function updateLayoutEffect(
@@ -1397,12 +1449,25 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  return mountEffectImpl(
-    UpdateEffect,
-    HookLayout,
-    imperativeHandleEffect.bind(null, create, ref),
-    effectDeps,
-  );
+  if (
+    __DEV__ &&
+    enableDoubleInvokingEffects &&
+    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+  ) {
+    return mountEffectImpl(
+      MountLayoutDevEffect | UpdateEffect,
+      HookLayout,
+      imperativeHandleEffect.bind(null, create, ref),
+      effectDeps,
+    );
+  } else {
+    return mountEffectImpl(
+      UpdateEffect,
+      HookLayout,
+      imperativeHandleEffect.bind(null, create, ref),
+      effectDeps,
+    );
+  }
 }
 
 function updateImperativeHandle<T>(
@@ -1683,7 +1748,12 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
+      if (__DEV__ && enableDoubleInvokingEffects) {
+        currentlyRenderingFiber.flags |=
+          MountPassiveDevEffect | UpdateEffect | PassiveEffect;
+      } else {
+        currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
+      }
       pushEffect(
         HookHasEffect | HookPassive,
         () => {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index cb4c4dd36667..4ceb164d94ba 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -15,6 +15,7 @@ import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
+import type {Flags} from './ReactFiberFlags';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -31,6 +32,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -126,6 +128,8 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
+  MountPassiveDev,
+  MountLayoutDev,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -182,6 +186,10 @@ import {
   commitPassiveEffectDurations,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
+  invokeLayoutEffectMountInDEV,
+  invokePassiveEffectMountInDEV,
+  invokeLayoutEffectUnmountInDEV,
+  invokePassiveEffectUnmountInDEV,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
@@ -2041,6 +2049,12 @@ function commitRootImpl(root, renderPriorityLevel) {
     legacyErrorBoundariesThatAlreadyFailed = null;
   }
 
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    if (!rootDidHavePassiveEffects) {
+      commitDoubleInvokeEffectsInDEV(root.current, false);
+    }
+  }
+
   if (enableSchedulerTracing) {
     if (!rootDidHavePassiveEffects) {
       // If there are no passive effects, then we can complete the pending interactions.
@@ -2222,6 +2236,10 @@ function flushPassiveEffectsImpl() {
     markPassiveEffectsStopped();
   }
 
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    commitDoubleInvokeEffectsInDEV(root.current, true);
+  }
+
   executionContext = prevExecutionContext;
 
   flushSyncCallbackQueue();
@@ -2505,6 +2523,60 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
   }
 }
 
+function commitDoubleInvokeEffectsInDEV(
+  fiber: Fiber,
+  hasPassiveEffects: boolean,
+) {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // Never double-invoke effects for legacy roots.
+    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
+      return;
+    }
+
+    setCurrentDebugFiberInDEV(fiber);
+    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(
+        fiber,
+        MountPassiveDev,
+        invokePassiveEffectUnmountInDEV,
+      );
+    }
+
+    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
+    }
+    resetCurrentDebugFiberInDEV();
+  }
+}
+
+// TODO (strict effects) Rewrite to be iterative
+function invokeEffectsInDev(
+  firstChild: Fiber,
+  fiberFlags: Flags,
+  invokeEffectFn: (fiber: Fiber) => void,
+): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+    let fiber = firstChild;
+    while (fiber !== null) {
+      if (fiber.child !== null) {
+        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
+        if (primarySubtreeFlag !== NoFlags) {
+          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
+        }
+      }
+
+      if ((fiber.flags & fiberFlags) !== NoFlags) {
+        invokeEffectFn(fiber);
+      }
+      fiber = fiber.sibling;
+    }
+  }
+}
+
 let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
 function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 65c966d53110..f292c7b36c1a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -16,6 +16,7 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Effect as HookEffect} from './ReactFiberHooks.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
+import type {Flags} from './ReactFiberFlags';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -32,6 +33,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
+  enableDoubleInvokingEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -131,6 +133,8 @@ import {
   HostEffectMask,
   Hydrating,
   StaticMask,
+  MountPassiveDev,
+  MountLayoutDev,
 } from './ReactFiberFlags';
 import {
   NoLanePriority,
@@ -189,6 +193,10 @@ import {
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
   detachFiberAfterEffects,
+  invokeLayoutEffectMountInDEV,
+  invokePassiveEffectMountInDEV,
+  invokeLayoutEffectUnmountInDEV,
+  invokePassiveEffectUnmountInDEV,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactUpdateQueue.old';
 import {resetContextDependencies} from './ReactFiberNewContext.old';
@@ -2126,6 +2134,12 @@ function commitRootImpl(root, renderPriorityLevel) {
     legacyErrorBoundariesThatAlreadyFailed = null;
   }
 
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    if (!rootDidHavePassiveEffects) {
+      commitDoubleInvokeEffectsInDEV(root.current, false);
+    }
+  }
+
   if (enableSchedulerTracing) {
     if (!rootDidHavePassiveEffects) {
       // If there are no passive effects, then we can complete the pending interactions.
@@ -2379,6 +2393,10 @@ function flushPassiveEffectsImpl() {
     markPassiveEffectsStopped();
   }
 
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    commitDoubleInvokeEffectsInDEV(root.current, true);
+  }
+
   executionContext = prevExecutionContext;
 
   flushSyncCallbackQueue();
@@ -2662,6 +2680,58 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
   }
 }
 
+function commitDoubleInvokeEffectsInDEV(
+  fiber: Fiber,
+  hasPassiveEffects: boolean,
+) {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    // Never double-invoke effects for legacy roots.
+    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
+      return;
+    }
+
+    setCurrentDebugFiberInDEV(fiber);
+    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(
+        fiber,
+        MountPassiveDev,
+        invokePassiveEffectUnmountInDEV,
+      );
+    }
+
+    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
+    if (hasPassiveEffects) {
+      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
+    }
+    resetCurrentDebugFiberInDEV();
+  }
+}
+
+// TODO (strict effects) Rewrite to be iterative
+function invokeEffectsInDev(
+  firstChild: Fiber,
+  fiberFlags: Flags,
+  invokeEffectFn: (fiber: Fiber) => void,
+): void {
+  if (__DEV__ && enableDoubleInvokingEffects) {
+    let fiber = firstChild;
+    while (fiber !== null) {
+      if (fiber.child !== null) {
+        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
+        if (primarySubtreeFlag !== NoFlags) {
+          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
+        }
+      }
+
+      if ((fiber.flags & fiberFlags) !== NoFlags) {
+        invokeEffectFn(fiber);
+      }
+      fiber = fiber.sibling;
+    }
+  }
+}
+
 let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
 function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
index 0a7ac0a50d9f..b53b7b719c6b 100644
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
@@ -15,8 +15,9 @@ let ReactNoop;
 let Scheduler;
 
 function shouldDoubleInvokingEffects() {
-  // Reverted temporarily. Need to re-land.
-  return false;
+  // For now, this feature only exists in the old fork (while the new fork is being bisected).
+  // Eventually we'll land it in both forks.
+  return __DEV__;
 }
 
 describe('ReactDoubleInvokeEvents', () => {
@@ -30,7 +31,7 @@ describe('ReactDoubleInvokeEvents', () => {
     ReactFeatureFlags.enableDoubleInvokingEffects = shouldDoubleInvokingEffects();
   });
 
-  it('should not double invoke effects outside of StrictMode', () => {
+  it('should not double invoke effects in legacy mode', () => {
     function App({text}) {
       React.useEffect(() => {
         Scheduler.unstable_yieldValue('useEffect mount');
@@ -55,54 +56,30 @@ describe('ReactDoubleInvokeEvents', () => {
     ]);
   });
 
-  it('should double invoke effects only within StrictMode subtrees', () => {
-    function ComponentWithEffects({label}) {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue(`useEffect mount "${label}"`);
-        return () =>
-          Scheduler.unstable_yieldValue(`useEffect unmount "${label}"`);
-      });
+  it('should not double invoke class lifecycles in legacy mode', () => {
+    class App extends React.PureComponent {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('componentDidMount');
+      }
 
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
-        return () =>
-          Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
-      });
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('componentDidUpdate');
+      }
 
-      return label;
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
     }
 
     ReactNoop.act(() => {
-      ReactNoop.renderLegacySyncRoot(
-        <>
-          <ComponentWithEffects label={'loose'} />
-          <React.StrictMode>
-            <ComponentWithEffects label={'strict'} />
-          </React.StrictMode>
-        </>,
-      );
+      ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
     });
 
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect mount "loose"',
-        'useLayoutEffect mount "strict"',
-        'useEffect mount "loose"',
-        'useEffect mount "strict"',
-
-        'useLayoutEffect unmount "strict"',
-        'useEffect unmount "strict"',
-        'useLayoutEffect mount "strict"',
-        'useEffect mount "strict"',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect mount "loose"',
-        'useLayoutEffect mount "strict"',
-        'useEffect mount "loose"',
-        'useEffect mount "strict"',
-      ]);
-    }
+    expect(Scheduler).toHaveYielded(['componentDidMount']);
   });
 
   it('should flush double-invoked effects within the same frame as layout effects if there are no passive effects', () => {
@@ -117,10 +94,10 @@ describe('ReactDoubleInvokeEvents', () => {
     }
 
     ReactNoop.act(() => {
-      ReactNoop.renderLegacySyncRoot(
-        <React.StrictMode>
+      ReactNoop.render(
+        <>
           <ComponentWithEffects label={'one'} />
-        </React.StrictMode>,
+        </>,
       );
 
       if (shouldDoubleInvokingEffects()) {
@@ -137,11 +114,11 @@ describe('ReactDoubleInvokeEvents', () => {
     });
 
     ReactNoop.act(() => {
-      ReactNoop.renderLegacySyncRoot(
-        <React.StrictMode>
+      ReactNoop.render(
+        <>
           <ComponentWithEffects label={'one'} />
           <ComponentWithEffects label={'two'} />
-        </React.StrictMode>,
+        </>,
       );
 
       if (shouldDoubleInvokingEffects()) {
@@ -185,10 +162,10 @@ describe('ReactDoubleInvokeEvents', () => {
     }
 
     ReactNoop.act(() => {
-      ReactNoop.renderLegacySyncRoot(
-        <React.StrictMode>
+      ReactNoop.render(
+        <>
           <ComponentWithEffects label={'one'} />
-        </React.StrictMode>,
+        </>,
       );
 
       if (shouldDoubleInvokingEffects()) {
@@ -211,11 +188,11 @@ describe('ReactDoubleInvokeEvents', () => {
     });
 
     ReactNoop.act(() => {
-      ReactNoop.renderLegacySyncRoot(
-        <React.StrictMode>
+      ReactNoop.render(
+        <>
           <ComponentWithEffects label={'one'} />
           <ComponentWithEffects label={'two'} />
-        </React.StrictMode>,
+        </>,
       );
 
       if (shouldDoubleInvokingEffects()) {
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 8387319511b5..4a1853c46c28 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -4874,8 +4874,6 @@ describe('Profiler', () => {
       });
 
       if (__DEV__) {
-        // @gate enableUseJSStackToTrackPassiveDurations
-        // @gate enableDoubleInvokingEffects
         it('double invoking does not disconnect wrapped async work', () => {
           ReactFeatureFlags.enableDoubleInvokingEffects = true;
 

From a6b5256a29b60620bdeb9266d4935cb59cc1258e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 22 Jan 2021 11:27:39 -0800
Subject: [PATCH 0195/1603] Refactored recursive strict effects method to be
 iterative (#20642)

---
 .../src/ReactFiberWorkLoop.new.js             | 30 ++++++++++-------
 .../src/ReactFiberWorkLoop.old.js             | 32 ++++++++++++-------
 2 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 4ceb164d94ba..dff64f9cae95 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2551,7 +2551,6 @@ function commitDoubleInvokeEffectsInDEV(
   }
 }
 
-// TODO (strict effects) Rewrite to be iterative
 function invokeEffectsInDev(
   firstChild: Fiber,
   fiberFlags: Flags,
@@ -2560,19 +2559,28 @@ function invokeEffectsInDev(
   if (__DEV__ && enableDoubleInvokingEffects) {
     // We don't need to re-check for legacy roots here.
     // This function will not be called within legacy roots.
-    let fiber = firstChild;
-    while (fiber !== null) {
-      if (fiber.child !== null) {
-        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
-        if (primarySubtreeFlag !== NoFlags) {
-          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
+
+    let current = 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 ((fiber.flags & fiberFlags) !== NoFlags) {
-        invokeEffectFn(fiber);
+        if (current.sibling !== null) {
+          current = current.sibling;
+        } else {
+          current = subtreeRoot = current.return;
+        }
       }
-      fiber = fiber.sibling;
     }
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index f292c7b36c1a..79386f5fff5c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2708,26 +2708,36 @@ function commitDoubleInvokeEffectsInDEV(
   }
 }
 
-// TODO (strict effects) Rewrite to be iterative
 function invokeEffectsInDev(
   firstChild: Fiber,
   fiberFlags: Flags,
   invokeEffectFn: (fiber: Fiber) => void,
 ): void {
   if (__DEV__ && enableDoubleInvokingEffects) {
-    let fiber = firstChild;
-    while (fiber !== null) {
-      if (fiber.child !== null) {
-        const primarySubtreeFlag = fiber.subtreeFlags & fiberFlags;
-        if (primarySubtreeFlag !== NoFlags) {
-          invokeEffectsInDev(fiber.child, fiberFlags, invokeEffectFn);
+    // We don't need to re-check for legacy roots here.
+    // This function will not be called within legacy roots.
+
+    let current = 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 ((fiber.flags & fiberFlags) !== NoFlags) {
-        invokeEffectFn(fiber);
+        if (current.sibling !== null) {
+          current = current.sibling;
+        } else {
+          current = subtreeRoot = current.return;
+        }
       }
-      fiber = fiber.sibling;
     }
   }
 }

From 0fd6805c6d0477be917d31949a73b3bbdccfe71c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 22 Jan 2021 13:49:33 -0600
Subject: [PATCH 0196/1603] Land rest of effects refactor in main fork (#20644)

---
 .eslintrc.js                                  |   2 +-
 .../src/ReactChildFiber.old.js                |  22 +-
 .../react-reconciler/src/ReactFiber.old.js    |  20 +-
 .../src/ReactFiberBeginWork.old.js            |  40 +--
 .../src/ReactFiberCommitWork.old.js           | 201 ++++++++++-----
 .../src/ReactFiberCompleteWork.old.js         |  57 +++--
 .../src/ReactFiberHooks.old.js                |  21 +-
 .../src/ReactFiberHydrationContext.old.js     |  21 +-
 .../src/ReactFiberSuspenseComponent.old.js    |   3 -
 .../src/ReactFiberThrow.old.js                |   2 -
 .../src/ReactFiberWorkLoop.old.js             | 237 +++---------------
 11 files changed, 234 insertions(+), 392 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index bed7ff123afd..a456964bdbdb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,7 +116,7 @@ module.exports = {
     'react-internal/no-cross-fork-types': [
       ERROR,
       {
-        old: ['firstEffect', 'nextEffect'],
+        old: [],
         new: [],
       },
     ],
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 036b84a5493a..7a4ab0b17208 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -13,12 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 
 import getComponentName from 'shared/getComponentName';
-import {
-  Deletion,
-  ChildDeletion,
-  Placement,
-  StaticMask,
-} from './ReactFiberFlags';
+import {Placement, ChildDeletion} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -268,21 +263,6 @@ function ChildReconciler(shouldTrackSideEffects) {
       // Noop.
       return;
     }
-    // Deletions are added in reversed order so we add it to the front.
-    // At this point, the return fiber's effect list is empty except for
-    // deletions, so we can just append the deletion to the list. The remaining
-    // effects aren't added until the complete phase. Once we implement
-    // resuming, this may not be true.
-    const last = returnFiber.lastEffect;
-    if (last !== null) {
-      last.nextEffect = childToDelete;
-      returnFiber.lastEffect = childToDelete;
-    } else {
-      returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
-    }
-    childToDelete.nextEffect = null;
-    childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
-
     const deletions = returnFiber.deletions;
     if (deletions === null) {
       returnFiber.deletions = [childToDelete];
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 1e20db285100..c9783c3b7137 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -144,10 +144,6 @@ function FiberNode(
 
   // Effects
   this.flags = NoFlags;
-  this.nextEffect = null;
-
-  this.firstEffect = null;
-  this.lastEffect = null;
   this.subtreeFlags = NoFlags;
   this.deletions = null;
 
@@ -285,10 +281,7 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
     // Reset the effect tag.
     workInProgress.flags = NoFlags;
 
-    // The effect list is no longer valid.
-    workInProgress.nextEffect = null;
-    workInProgress.firstEffect = null;
-    workInProgress.lastEffect = null;
+    // The effects are no longer valid.
     workInProgress.subtreeFlags = NoFlags;
     workInProgress.deletions = null;
 
@@ -370,10 +363,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
   // that child fiber is setting, not the reconciliation.
   workInProgress.flags &= StaticMask | Placement;
 
-  // The effect list is no longer valid.
-  workInProgress.nextEffect = null;
-  workInProgress.firstEffect = null;
-  workInProgress.lastEffect = null;
+  // The effects are no longer valid.
 
   const current = workInProgress.alternate;
   if (current === null) {
@@ -403,6 +393,9 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = current.lanes;
 
     workInProgress.child = current.child;
+    // TODO: `subtreeFlags` should be reset to NoFlags, like we do in
+    // `createWorkInProgress`. Nothing reads this until the complete phase,
+    // currently, but it might in the future, and we should be consistent.
     workInProgress.subtreeFlags = current.subtreeFlags;
     workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
@@ -847,9 +840,6 @@ export function assignFiberPropertiesInDEV(
   target.dependencies = source.dependencies;
   target.mode = source.mode;
   target.flags = source.flags;
-  target.nextEffect = source.nextEffect;
-  target.firstEffect = source.firstEffect;
-  target.lastEffect = source.lastEffect;
   target.subtreeFlags = source.subtreeFlags;
   target.deletions = source.deletions;
   target.lanes = source.lanes;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index bf03aeb24012..5f9ba706b422 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -67,7 +67,6 @@ import {
   DidCapture,
   Update,
   Ref,
-  Deletion,
   ChildDeletion,
   ForceUpdateForLegacySuspense,
   StaticMask,
@@ -2199,10 +2198,6 @@ function updateSuspensePrimaryChildren(
   primaryChildFragment.sibling = null;
   if (currentFallbackChildFragment !== null) {
     // Delete the fallback child fragment
-    currentFallbackChildFragment.nextEffect = null;
-    currentFallbackChildFragment.flags =
-      (currentFallbackChildFragment.flags & StaticMask) | Deletion;
-    workInProgress.firstEffect = workInProgress.lastEffect = currentFallbackChildFragment;
     const deletions = workInProgress.deletions;
     if (deletions === null) {
       workInProgress.deletions = [currentFallbackChildFragment];
@@ -2264,22 +2259,9 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (currentFallbackChildFragment !== null) {
-      // The fallback fiber was added as a deletion effect during the first
-      // pass. However, since we're going to remain on the fallback, we no
-      // longer want to delete it. So we need to remove it from the list.
-      // Deletions are stored on the same list as effects, and are always added
-      // to the front. So we know that the first effect must be the fallback
-      // deletion effect, and everything after that is from the primary free.
-      const firstPrimaryTreeEffect = currentFallbackChildFragment.nextEffect;
-      if (firstPrimaryTreeEffect !== null) {
-        workInProgress.firstEffect = firstPrimaryTreeEffect;
-      } else {
-        // TODO: Reset this somewhere else? Lol legacy mode is so weird.
-        workInProgress.firstEffect = workInProgress.lastEffect = null;
-      }
-    }
-
+    // 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 = createWorkInProgressOffscreenFiber(
@@ -2776,7 +2758,6 @@ function initSuspenseListRenderState(
   tail: null | Fiber,
   lastContentRow: null | Fiber,
   tailMode: SuspenseListTailMode,
-  lastEffectBeforeRendering: null | Fiber,
 ): void {
   const renderState: null | SuspenseListRenderState =
     workInProgress.memoizedState;
@@ -2788,7 +2769,6 @@ function initSuspenseListRenderState(
       last: lastContentRow,
       tail: tail,
       tailMode: tailMode,
-      lastEffect: lastEffectBeforeRendering,
     }: SuspenseListRenderState);
   } else {
     // We can reuse the existing object from previous renders.
@@ -2798,7 +2778,6 @@ function initSuspenseListRenderState(
     renderState.last = lastContentRow;
     renderState.tail = tail;
     renderState.tailMode = tailMode;
-    renderState.lastEffect = lastEffectBeforeRendering;
   }
 }
 
@@ -2880,7 +2859,6 @@ function updateSuspenseListComponent(
           tail,
           lastContentRow,
           tailMode,
-          workInProgress.lastEffect,
         );
         break;
       }
@@ -2912,7 +2890,6 @@ function updateSuspenseListComponent(
           tail,
           null, // last
           tailMode,
-          workInProgress.lastEffect,
         );
         break;
       }
@@ -2923,7 +2900,6 @@ function updateSuspenseListComponent(
           null, // tail
           null, // last
           undefined,
-          workInProgress.lastEffect,
         );
         break;
       }
@@ -3183,16 +3159,6 @@ function remountFiber(
 
     // Delete the old fiber and place the new one.
     // Since the old fiber is disconnected, we have to schedule it manually.
-    const last = returnFiber.lastEffect;
-    if (last !== null) {
-      last.nextEffect = current;
-      returnFiber.lastEffect = current;
-    } else {
-      returnFiber.firstEffect = returnFiber.lastEffect = current;
-    }
-    current.nextEffect = null;
-    current.flags = (current.flags & StaticMask) | Deletion;
-
     const deletions = returnFiber.deletions;
     if (deletions === null) {
       returnFiber.deletions = [current];
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index bc443576e05d..642f6dce02aa 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -76,9 +76,10 @@ import {
   Hydrating,
   HydratingAndUpdate,
   Passive,
+  BeforeMutationMask,
   MutationMask,
-  PassiveMask,
   LayoutMask,
+  PassiveMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentName from 'shared/getComponentName';
@@ -129,13 +130,13 @@ import {
   commitHydratedSuspenseInstance,
   clearContainer,
   prepareScopeUpdate,
+  prepareForCommit,
+  beforeActiveInstanceBlur,
 } from './ReactFiberHostConfig';
 import {
   captureCommitPhaseError,
   resolveRetryWakeable,
   markCommitTimeOfFallback,
-  enqueuePendingPassiveHookEffectMount,
-  enqueuePendingPassiveHookEffectUnmount,
   enqueuePendingPassiveProfilerEffect,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -145,6 +146,7 @@ import {
   Passive as HookPassive,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';
+import {doesFiberContain} from './ReactFiberTreeReflection';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -260,18 +262,114 @@ function safelyCallDestroy(current: Fiber, destroy: () => void) {
   }
 }
 
-function commitBeforeMutationLifeCycles(
-  current: Fiber | null,
-  finishedWork: Fiber,
-): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
+let focusedInstanceHandle: null | Fiber = null;
+let shouldFireAfterActiveInstanceBlur: boolean = false;
+
+export function commitBeforeMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+) {
+  focusedInstanceHandle = prepareForCommit(root.containerInfo);
+
+  nextEffect = firstChild;
+  commitBeforeMutationEffects_begin();
+
+  // We no longer need to track the active instance fiber
+  const shouldFire = shouldFireAfterActiveInstanceBlur;
+  shouldFireAfterActiveInstanceBlur = false;
+  focusedInstanceHandle = null;
+
+  return shouldFire;
+}
+
+function commitBeforeMutationEffects_begin() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // 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);
+      }
+    }
+
+    const child = fiber.child;
+    if (
+      (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
+      child !== null
+    ) {
+      ensureCorrectReturnPointer(child, fiber);
+      nextEffect = child;
+    } else {
+      commitBeforeMutationEffects_complete();
+    }
+  }
+}
+
+function commitBeforeMutationEffects_complete() {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    if (__DEV__) {
+      setCurrentDebugFiberInDEV(fiber);
+      invokeGuardedCallback(
+        null,
+        commitBeforeMutationEffectsOnFiber,
+        null,
+        fiber,
+      );
+      if (hasCaughtError()) {
+        const error = clearCaughtError();
+        captureCommitPhaseError(fiber, error);
+      }
+      resetCurrentDebugFiberInDEV();
+    } else {
+      try {
+        commitBeforeMutationEffectsOnFiber(fiber);
+      } catch (error) {
+        captureCommitPhaseError(fiber, error);
+      }
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
       return;
     }
-    case ClassComponent: {
-      if (finishedWork.flags & Snapshot) {
+
+    nextEffect = fiber.return;
+  }
+}
+
+function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
+  const current = finishedWork.alternate;
+  const flags = finishedWork.flags;
+
+  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.
+    if (
+      finishedWork.tag === SuspenseComponent &&
+      isSuspenseBoundaryBeingHidden(current, finishedWork) &&
+      doesFiberContain(finishedWork, focusedInstanceHandle)
+    ) {
+      shouldFireAfterActiveInstanceBlur = true;
+      beforeActiveInstanceBlur(finishedWork);
+    }
+  }
+
+  if ((flags & Snapshot) !== NoFlags) {
+    setCurrentDebugFiberInDEV(finishedWork);
+
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case SimpleMemoComponent: {
+        break;
+      }
+      case ClassComponent: {
         if (current !== null) {
           const prevProps = current.memoizedProps;
           const prevState = current.memoizedState;
@@ -325,30 +423,43 @@ function commitBeforeMutationLifeCycles(
           }
           instance.__reactInternalSnapshotBeforeUpdate = snapshot;
         }
+        break;
       }
-      return;
-    }
-    case HostRoot: {
-      if (supportsMutation) {
-        if (finishedWork.flags & Snapshot) {
+      case HostRoot: {
+        if (supportsMutation) {
           const root = finishedWork.stateNode;
           clearContainer(root.containerInfo);
         }
+        break;
+      }
+      case HostComponent:
+      case HostText:
+      case HostPortal:
+      case IncompleteClassComponent:
+        // Nothing to do for these component types
+        break;
+      default: {
+        invariant(
+          false,
+          'This unit of work tag should not have side-effects. This error is ' +
+            'likely caused by a bug in React. Please file an issue.',
+        );
       }
-      return;
     }
-    case HostComponent:
-    case HostText:
-    case HostPortal:
-    case IncompleteClassComponent:
-      // Nothing to do for these component types
-      return;
+
+    resetCurrentDebugFiberInDEV();
+  }
+}
+
+function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
+  // 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);
   }
-  invariant(
-    false,
-    'This unit of work tag should not have side-effects. This error is ' +
-      'likely caused by a bug in React. Please file an issue.',
-  );
 }
 
 function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
@@ -421,26 +532,6 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
   }
 }
 
-function schedulePassiveEffects(finishedWork: Fiber) {
-  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 {
-      const {next, tag} = effect;
-      if (
-        (tag & HookPassive) !== NoHookEffect &&
-        (tag & HookHasEffect) !== NoHookEffect
-      ) {
-        enqueuePendingPassiveHookEffectUnmount(finishedWork, effect);
-        enqueuePendingPassiveHookEffectMount(finishedWork, effect);
-      }
-      effect = next;
-    } while (effect !== firstEffect);
-  }
-}
-
 export function commitPassiveEffectDurations(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
@@ -527,8 +618,6 @@ function commitLayoutEffectOnFiber(
         } else {
           commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
         }
-
-        schedulePassiveEffects(finishedWork);
         break;
       }
       case ClassComponent: {
@@ -979,9 +1068,7 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if ((tag & HookPassive) !== NoHookEffect) {
-                enqueuePendingPassiveHookEffectUnmount(current, effect);
-              } else {
+              if ((tag & HookLayout) !== NoHookEffect) {
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -1127,9 +1214,6 @@ export function detachFiberAfterEffects(fiber: Fiber): void {
   fiber.sibling = null;
   fiber.stateNode = null;
   fiber.updateQueue = null;
-  fiber.nextEffect = null;
-  fiber.firstEffect = null;
-  fiber.lastEffect = null;
 
   if (__DEV__) {
     fiber._debugOwner = null;
@@ -2483,7 +2567,6 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
 }
 
 export {
-  commitBeforeMutationLifeCycles,
   commitResetTextContent,
   commitPlacement,
   commitDeletion,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index a44029c8347c..61c8a01bf27e 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -72,7 +72,9 @@ import {
   NoFlags,
   DidCapture,
   Snapshot,
+  ChildDeletion,
   StaticMask,
+  MutationMask,
 } from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
@@ -173,6 +175,31 @@ function markRef(workInProgress: Fiber) {
   workInProgress.flags |= Ref;
 }
 
+function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
+  const didBailout = current !== null && current.child === completedWork.child;
+  if (didBailout) {
+    return true;
+  }
+
+  if ((completedWork.flags & ChildDeletion) !== NoFlags) {
+    return false;
+  }
+
+  // TODO: If we move the `hadNoMutationsEffects` call after `bubbleProperties`
+  // then we only have to check the `completedWork.subtreeFlags`.
+  let child = completedWork.child;
+  while (child !== null) {
+    if (
+      (child.flags & MutationMask) !== NoFlags ||
+      (child.subtreeFlags & MutationMask) !== NoFlags
+    ) {
+      return false;
+    }
+    child = child.sibling;
+  }
+  return true;
+}
+
 let appendAllChildren;
 let updateHostContainer;
 let updateHostComponent;
@@ -217,7 +244,7 @@ if (supportsMutation) {
     }
   };
 
-  updateHostContainer = function(workInProgress: Fiber) {
+  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
     // Noop
   };
   updateHostComponent = function(
@@ -461,13 +488,13 @@ if (supportsMutation) {
       node = node.sibling;
     }
   };
-  updateHostContainer = function(workInProgress: Fiber) {
+  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
     const portalOrRoot: {
       containerInfo: Container,
       pendingChildren: ChildSet,
       ...
     } = workInProgress.stateNode;
-    const childrenUnchanged = workInProgress.firstEffect === null;
+    const childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
     if (childrenUnchanged) {
       // No changes, just reuse the existing instance.
     } else {
@@ -492,7 +519,7 @@ if (supportsMutation) {
     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 childrenUnchanged = workInProgress.firstEffect === null;
+    const childrenUnchanged = hadNoMutationsEffects(current, workInProgress);
     if (childrenUnchanged && oldProps === newProps) {
       // No changes, just reuse the existing instance.
       // Note that this might release a previous clone.
@@ -575,7 +602,7 @@ if (supportsMutation) {
   };
 } else {
   // No host operations
-  updateHostContainer = function(workInProgress: Fiber) {
+  updateHostContainer = function(current: null | Fiber, workInProgress: Fiber) {
     // Noop
   };
   updateHostComponent = function(
@@ -847,7 +874,7 @@ function completeWork(
           workInProgress.flags |= Snapshot;
         }
       }
-      updateHostContainer(workInProgress);
+      updateHostContainer(current, workInProgress);
       bubbleProperties(workInProgress);
       return null;
     }
@@ -1142,7 +1169,7 @@ function completeWork(
     }
     case HostPortal:
       popHostContainer(workInProgress);
-      updateHostContainer(workInProgress);
+      updateHostContainer(current, workInProgress);
       if (current === null) {
         preparePortalMount(workInProgress.stateNode.containerInfo);
       }
@@ -1226,11 +1253,7 @@ function completeWork(
 
                 // Rerender the whole list, but this time, we'll force fallbacks
                 // to stay in place.
-                // Reset the effect list before doing the second pass since that's now invalid.
-                if (renderState.lastEffect === null) {
-                  workInProgress.firstEffect = null;
-                }
-                workInProgress.lastEffect = renderState.lastEffect;
+                // Reset the 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);
@@ -1301,15 +1324,6 @@ function completeWork(
               !renderedTail.alternate &&
               !getIsHydrating() // We don't cut it if we're hydrating.
             ) {
-              // We need to delete the row we just rendered.
-              // Reset the effect list to what it was before we rendered this
-              // child. The nested children have already appended themselves.
-              const lastEffect = (workInProgress.lastEffect =
-                renderState.lastEffect);
-              // Remove any effects that were appended after this point.
-              if (lastEffect !== null) {
-                lastEffect.nextEffect = null;
-              }
               // We're done.
               bubbleProperties(workInProgress);
               return null;
@@ -1369,7 +1383,6 @@ function completeWork(
         const next = renderState.tail;
         renderState.rendering = next;
         renderState.tail = next.sibling;
-        renderState.lastEffect = workInProgress.lastEffect;
         renderState.renderingStartTime = now();
         next.sibling = null;
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index f8cd86cc7d73..26721dcd1126 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -488,8 +488,8 @@ export function bailoutHooks(
     (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
   ) {
     workInProgress.flags &= ~(
-      MountLayoutDevEffect |
       MountPassiveDevEffect |
+      MountLayoutDevEffect |
       PassiveEffect |
       UpdateEffect
     );
@@ -1337,17 +1337,14 @@ function mountEffect(
     (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
   ) {
     return mountEffectImpl(
-      MountPassiveDevEffect |
-        UpdateEffect |
-        PassiveEffect |
-        PassiveStaticEffect,
+      MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
       HookPassive,
       create,
       deps,
     );
   } else {
     return mountEffectImpl(
-      UpdateEffect | PassiveEffect | PassiveStaticEffect,
+      PassiveEffect | PassiveStaticEffect,
       HookPassive,
       create,
       deps,
@@ -1365,12 +1362,7 @@ function updateEffect(
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
-  return updateEffectImpl(
-    UpdateEffect | PassiveEffect,
-    HookPassive,
-    create,
-    deps,
-  );
+  return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
 function mountLayoutEffect(
@@ -1749,10 +1741,9 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
       if (__DEV__ && enableDoubleInvokingEffects) {
-        currentlyRenderingFiber.flags |=
-          MountPassiveDevEffect | UpdateEffect | PassiveEffect;
+        currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
       } else {
-        currentlyRenderingFiber.flags |= UpdateEffect | PassiveEffect;
+        currentlyRenderingFiber.flags |= PassiveEffect;
       }
       pushEffect(
         HookHasEffect | HookPassive,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index e0ed2901c52d..6f7c51e0a569 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -24,13 +24,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {
-  Deletion,
-  ChildDeletion,
-  Placement,
-  Hydrating,
-  StaticMask,
-} from './ReactFiberFlags';
+import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
 import invariant from 'shared/invariant';
 
 import {
@@ -130,19 +124,6 @@ function deleteHydratableInstance(
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
-  childToDelete.flags = (childToDelete.flags & StaticMask) | Deletion;
-
-  // This might seem like it belongs on progressedFirstDeletion. However,
-  // these children are not part of the reconciliation list of children.
-  // Even if we abort and rereconcile the children, that will try to hydrate
-  // again and the nodes are still in the host tree so these will be
-  // recreated.
-  if (returnFiber.lastEffect !== null) {
-    returnFiber.lastEffect.nextEffect = childToDelete;
-    returnFiber.lastEffect = childToDelete;
-  } else {
-    returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
-  }
 
   const deletions = returnFiber.deletions;
   if (deletions === null) {
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index e98826932f92..b97064696760 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -60,9 +60,6 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
-  // Last Effect before we rendered the "rendering" item.
-  // Used to remove new effects added by the rendered item.
-  lastEffect: null | Fiber,
 |};
 
 export function shouldCaptureSuspense(
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 781d523b4881..e7534497735c 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -188,8 +188,6 @@ function throwException(
 ) {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
-  // Its effect list is no longer valid.
-  sourceFiber.firstEffect = sourceFiber.lastEffect = null;
 
   if (
     value !== null &&
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 79386f5fff5c..699b47596d0c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -13,7 +13,6 @@ import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
-import type {Effect as HookEffect} from './ReactFiberHooks.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Flags} from './ReactFiberFlags';
@@ -85,13 +84,11 @@ import * as Scheduler from 'scheduler';
 import {__interactionsRef, __subscriberRef} from 'scheduler/tracing';
 
 import {
-  prepareForCommit,
   resetAfterCommit,
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
   warnsIfNotActing,
-  beforeActiveInstanceBlur,
   afterActiveInstanceBlur,
   clearContainer,
 } from './ReactFiberHostConfig';
@@ -122,17 +119,15 @@ import {
 import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
-  PerformedWork,
   Placement,
-  Deletion,
-  ChildDeletion,
-  Snapshot,
-  Passive,
   PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
-  StaticMask,
+  BeforeMutationMask,
+  MutationMask,
+  LayoutMask,
+  PassiveMask,
   MountPassiveDev,
   MountLayoutDev,
 } from './ReactFiberFlags';
@@ -185,14 +180,12 @@ import {
   createClassErrorUpdate,
 } from './ReactFiberThrow.old';
 import {
-  commitBeforeMutationLifeCycles as commitBeforeMutationEffectOnFiber,
+  commitBeforeMutationEffects,
   commitLayoutEffects,
   commitMutationEffects,
   commitPassiveEffectDurations,
-  isSuspenseBoundaryBeingHidden,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
-  detachFiberAfterEffects,
   invokeLayoutEffectMountInDEV,
   invokePassiveEffectMountInDEV,
   invokeLayoutEffectUnmountInDEV,
@@ -240,7 +233,6 @@ import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
 // Used by `act`
 import enqueueTask from 'shared/enqueueTask';
-import {doesFiberContain} from './ReactFiberTreeReflection';
 
 const ceil = Math.ceil;
 
@@ -328,7 +320,6 @@ export function getRenderTargetTime(): number {
   return workInProgressRootRenderTargetTime;
 }
 
-let nextEffect: Fiber | null = null;
 let hasUncaughtError = false;
 let firstUncaughtError = null;
 let legacyErrorBoundariesThatAlreadyFailed: Set<mixed> | null = null;
@@ -371,9 +362,6 @@ let currentEventPendingLanes: Lanes = NoLanes;
 // We warn about state updates for unmounted components differently in this case.
 let isFlushingPassiveEffects = false;
 
-let focusedInstanceHandle: null | Fiber = null;
-let shouldFireAfterActiveInstanceBlur: boolean = false;
-
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -1737,45 +1725,6 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         workInProgress = next;
         return;
       }
-
-      if (
-        returnFiber !== null &&
-        // Do not append effects to parents if a sibling failed to complete
-        (returnFiber.flags & Incomplete) === NoFlags
-      ) {
-        // Append all the effects of the subtree and this fiber onto the effect
-        // list of the parent. The completion order of the children affects the
-        // side-effect order.
-        if (returnFiber.firstEffect === null) {
-          returnFiber.firstEffect = completedWork.firstEffect;
-        }
-        if (completedWork.lastEffect !== null) {
-          if (returnFiber.lastEffect !== null) {
-            returnFiber.lastEffect.nextEffect = completedWork.firstEffect;
-          }
-          returnFiber.lastEffect = completedWork.lastEffect;
-        }
-
-        // If this fiber had side-effects, we append it AFTER the children's
-        // side-effects. We can perform certain side-effects earlier if needed,
-        // by doing multiple passes over the effect list. We don't want to
-        // schedule our own side-effect on our own list because if end up
-        // reusing children we'll schedule this effect onto itself since we're
-        // at the end.
-        const flags = completedWork.flags;
-
-        // Skip both NoWork and PerformedWork tags when creating the effect
-        // list. PerformedWork effect is read by React DevTools but shouldn't be
-        // committed.
-        if ((flags & ~StaticMask) > PerformedWork) {
-          if (returnFiber.lastEffect !== null) {
-            returnFiber.lastEffect.nextEffect = completedWork;
-          } else {
-            returnFiber.firstEffect = completedWork;
-          }
-          returnFiber.lastEffect = completedWork;
-        }
-      }
     } else {
       // This fiber did not complete because something threw. Pop values off
       // the stack without entering the complete phase. If this is a boundary,
@@ -1812,8 +1761,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       }
 
       if (returnFiber !== null) {
-        // Mark the parent fiber as incomplete and clear its effect list.
-        returnFiber.firstEffect = returnFiber.lastEffect = null;
+        // Mark the parent fiber as incomplete and clear its subtree flags.
         returnFiber.flags |= Incomplete;
         returnFiber.subtreeFlags = NoFlags;
         returnFiber.deletions = null;
@@ -1931,25 +1879,39 @@ function commitRootImpl(root, renderPriorityLevel) {
     // times out.
   }
 
-  // Get the list of effects.
-  let firstEffect;
-  if (finishedWork.flags > PerformedWork) {
-    // A fiber's effect list consists only of its children, not itself. So if
-    // the root has an effect, we need to add it to the end of the list. The
-    // resulting list is the set that would belong to the root's parent, if it
-    // had one; that is, all the effects in the tree including the root.
-    if (finishedWork.lastEffect !== null) {
-      finishedWork.lastEffect.nextEffect = finishedWork;
-      firstEffect = finishedWork.firstEffect;
-    } else {
-      firstEffect = finishedWork;
+  // 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.
+  if (
+    (finishedWork.subtreeFlags & PassiveMask) !== NoFlags ||
+    (finishedWork.flags & PassiveMask) !== NoFlags
+  ) {
+    if (!rootDoesHavePassiveEffects) {
+      rootDoesHavePassiveEffects = true;
+      scheduleCallback(NormalSchedulerPriority, () => {
+        flushPassiveEffects();
+        return null;
+      });
     }
-  } else {
-    // There is no effect on the root.
-    firstEffect = finishedWork.firstEffect;
   }
 
-  if (firstEffect !== null) {
+  // 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 satsify Flow. I think the
+  // only other reason this optimization exists is because it affects profiling.
+  // Reconsider whether this is necessary.
+  const subtreeHasEffects =
+    (finishedWork.subtreeFlags &
+      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
+    NoFlags;
+  const rootHasEffect =
+    (finishedWork.flags &
+      (BeforeMutationMask | MutationMask | LayoutMask | PassiveMask)) !==
+    NoFlags;
+
+  if (subtreeHasEffects || rootHasEffect) {
     let previousLanePriority;
     if (decoupleUpdatePriorityFromScheduler) {
       previousLanePriority = getCurrentUpdateLanePriority();
@@ -1970,32 +1932,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     // 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.
-    focusedInstanceHandle = prepareForCommit(root.containerInfo);
-    shouldFireAfterActiveInstanceBlur = false;
-
-    nextEffect = firstEffect;
-    do {
-      if (__DEV__) {
-        invokeGuardedCallback(null, commitBeforeMutationEffects, null);
-        if (hasCaughtError()) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          const error = clearCaughtError();
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      } else {
-        try {
-          commitBeforeMutationEffects();
-        } catch (error) {
-          invariant(nextEffect !== null, 'Should be working on an effect.');
-          captureCommitPhaseError(nextEffect, error);
-          nextEffect = nextEffect.nextEffect;
-        }
-      }
-    } while (nextEffect !== null);
-
-    // We no longer need to track the active instance fiber
-    focusedInstanceHandle = null;
+    const shouldFireAfterActiveInstanceBlur = commitBeforeMutationEffects(
+      root,
+      finishedWork,
+    );
 
     if (enableProfilerTimer) {
       // Mark the current commit time to be shared by all Profilers in this
@@ -2082,31 +2022,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
     pendingPassiveEffectsRenderPriority = renderPriorityLevel;
-  } else {
-    // We are done with the effect chain at this point so let's clear the
-    // nextEffect pointers to assist with GC. If we have passive effects, we'll
-    // clear this in flushPassiveEffects
-    // TODO: We should always do this in the passive phase, by scheduling
-    // a passive callback for every deletion.
-    nextEffect = firstEffect;
-    while (nextEffect !== null) {
-      const nextNextEffect = nextEffect.nextEffect;
-      nextEffect.nextEffect = null;
-      if (nextEffect.flags & ChildDeletion) {
-        const deletions = nextEffect.deletions;
-        if (deletions !== null) {
-          for (let i = 0; i < deletions.length; i++) {
-            const deletion = deletions[i];
-            const alternate = deletion.alternate;
-            detachFiberAfterEffects(deletion);
-            if (alternate !== null) {
-              detachFiberAfterEffects(alternate);
-            }
-          }
-        }
-      }
-      nextEffect = nextNextEffect;
-    }
   }
 
   // Read this again, since an effect might have updated it
@@ -2218,52 +2133,6 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
-function commitBeforeMutationEffects() {
-  while (nextEffect !== null) {
-    const current = nextEffect.alternate;
-
-    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {
-      if ((nextEffect.flags & Deletion) !== NoFlags) {
-        if (doesFiberContain(nextEffect, focusedInstanceHandle)) {
-          shouldFireAfterActiveInstanceBlur = true;
-          beforeActiveInstanceBlur(nextEffect);
-        }
-      } else {
-        // TODO: Move this out of the hot path using a dedicated effect tag.
-        if (
-          nextEffect.tag === SuspenseComponent &&
-          isSuspenseBoundaryBeingHidden(current, nextEffect) &&
-          doesFiberContain(nextEffect, focusedInstanceHandle)
-        ) {
-          shouldFireAfterActiveInstanceBlur = true;
-          beforeActiveInstanceBlur(nextEffect);
-        }
-      }
-    }
-
-    const flags = nextEffect.flags;
-    if ((flags & Snapshot) !== NoFlags) {
-      setCurrentDebugFiberInDEV(nextEffect);
-
-      commitBeforeMutationEffectOnFiber(current, nextEffect);
-
-      resetCurrentDebugFiberInDEV();
-    }
-    if ((flags & Passive) !== NoFlags) {
-      // If there are passive effects, schedule a callback to flush at
-      // the earliest opportunity.
-      if (!rootDoesHavePassiveEffects) {
-        rootDoesHavePassiveEffects = true;
-        scheduleCallback(NormalSchedulerPriority, () => {
-          flushPassiveEffects();
-          return null;
-        });
-      }
-    }
-    nextEffect = nextEffect.nextEffect;
-  }
-}
-
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
@@ -2302,32 +2171,6 @@ export function enqueuePendingPassiveProfilerEffect(fiber: Fiber): void {
   }
 }
 
-export function enqueuePendingPassiveHookEffectMount(
-  fiber: Fiber,
-  effect: HookEffect,
-): void {
-  if (!rootDoesHavePassiveEffects) {
-    rootDoesHavePassiveEffects = true;
-    scheduleCallback(NormalSchedulerPriority, () => {
-      flushPassiveEffects();
-      return null;
-    });
-  }
-}
-
-export function enqueuePendingPassiveHookEffectUnmount(
-  fiber: Fiber,
-  effect: HookEffect,
-): void {
-  if (!rootDoesHavePassiveEffects) {
-    rootDoesHavePassiveEffects = true;
-    scheduleCallback(NormalSchedulerPriority, () => {
-      flushPassiveEffects();
-      return null;
-    });
-  }
-}
-
 function flushPassiveEffectsImpl() {
   if (rootWithPendingPassiveEffects === null) {
     return false;

From f15f8f64bbc3e02911d1a112fa9bb8f7066a56ee Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 22 Jan 2021 16:01:54 -0600
Subject: [PATCH 0197/1603] Store interleaved updates on separate queue until
 end of render (#20615)

## Motivation

An *interleaved* update is one that is scheduled while a render is
already in progress, typically from a concurrent user input event.

We have to take care not to process these updates during the current
render, because a multiple interleaved updates may have been scheduled
across many components; to avoid tearing, we cannot render some of
those updates without rendering all of them.

## Old approach

What we currently do when we detect an interleaved update is assign a
lane that is not part of the current render.

This has some unfortunate drawbacks. For example, we will eventually run
out of lanes at a given priority level. When this happens, our last
resort is to interrupt the current render and start over from scratch.
If this happens enough, it can lead to starvation.

More concerning, there are a suprising number of places that must
separately account for this case, often in subtle ways. The maintenance
complexity has led to a number of tearing bugs.

## New approach

I added a new field to the update queue, `interleaved`. It's a linked
list, just like the `pending` field. When an interleaved update is
scheduled, we add it to the `interleaved` list instead of `pending`.

Then we push the entire queue object onto a global array. When the
current render exits, we iterate through the array of interleaved queues
and transfer the `interleaved` list to the `pending` list.

So, until the current render has exited (whether due to a commit or an
interruption), it's impossible to process an interleaved update, because
they have not yet been enqueued.

In this new approach, we don't need to resort to clever lanes tricks to
avoid inconsistencies. This should allow us to simplify a lot of the
logic that's currently in ReactFiberWorkLoop and ReactFiberLane,
especially `findUpdateLane` and `getNextLanes`. All the logic for
interleaved updates is isolated to one place.
---
 .../src/ReactFiberClassComponent.new.js       |   6 +-
 .../src/ReactFiberHooks.new.js                |  72 ++++++++--
 .../src/ReactFiberInterleavedUpdates.new.js   |  55 ++++++++
 .../src/ReactFiberNewContext.new.js           |  27 +++-
 .../src/ReactFiberReconciler.new.js           |   2 +-
 .../src/ReactFiberThrow.new.js                |   2 +-
 .../src/ReactFiberWorkLoop.new.js             |  24 +++-
 .../src/ReactUpdateQueue.new.js               |  58 ++++++--
 .../__tests__/ReactInterleavedUpdates-test.js | 129 ++++++++++++++++++
 9 files changed, 339 insertions(+), 36 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
 create mode 100644 packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 83004c3f2063..9ed6dc23c9f1 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -213,7 +213,7 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update);
+    enqueueUpdate(fiber, update, lane);
     scheduleUpdateOnFiber(fiber, lane, eventTime);
 
     if (__DEV__) {
@@ -245,7 +245,7 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update);
+    enqueueUpdate(fiber, update, lane);
     scheduleUpdateOnFiber(fiber, lane, eventTime);
 
     if (__DEV__) {
@@ -276,7 +276,7 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update);
+    enqueueUpdate(fiber, update, lane);
     scheduleUpdateOnFiber(fiber, lane, eventTime);
 
     if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index ff4b18672e0c..374d383030cd 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -75,6 +75,7 @@ import {
   warnIfNotCurrentlyActingUpdatesInDev,
   warnIfNotScopedWithMatchingAct,
   markSkippedUpdateLanes,
+  isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 
 import invariant from 'shared/invariant';
@@ -104,6 +105,7 @@ import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {CacheContext} from './ReactFiberCacheComponent.new';
 import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.new';
+import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -116,8 +118,9 @@ type Update<S, A> = {|
   priority?: ReactPriorityLevel,
 |};
 
-type UpdateQueue<S, A> = {|
+export type UpdateQueue<S, A> = {|
   pending: Update<S, A> | null,
+  interleaved: Update<S, A> | null,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
   lastRenderedState: S | null,
@@ -650,6 +653,7 @@ function mountReducer<S, I, A>(
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
     pending: null,
+    interleaved: null,
     dispatch: null,
     lastRenderedReducer: reducer,
     lastRenderedState: (initialState: any),
@@ -792,6 +796,23 @@ function updateReducer<S, I, A>(
     queue.lastRenderedState = newState;
   }
 
+  // Interleaved updates are stored on a separate queue. We aren't going to
+  // process them during this render, but we do need to track which lanes
+  // are remaining.
+  const lastInterleaved = queue.interleaved;
+  if (lastInterleaved !== null) {
+    let interleaved = lastInterleaved;
+    do {
+      const interleavedLane = interleaved.lane;
+      currentlyRenderingFiber.lanes = mergeLanes(
+        currentlyRenderingFiber.lanes,
+        interleavedLane,
+      );
+      markSkippedUpdateLanes(interleavedLane);
+      interleaved = ((interleaved: any).next: Update<S, A>);
+    } while (interleaved !== lastInterleaved);
+  }
+
   const dispatch: Dispatch<A> = (queue.dispatch: any);
   return [hook.memoizedState, dispatch];
 }
@@ -1080,6 +1101,7 @@ function useMutableSource<Source, Snapshot>(
     // including any interleaving updates that occur.
     const newQueue = {
       pending: null,
+      interleaved: null,
       dispatch: null,
       lastRenderedReducer: basicStateReducer,
       lastRenderedState: snapshot,
@@ -1135,6 +1157,7 @@ function mountState<S>(
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
     pending: null,
+    interleaved: null,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
     lastRenderedState: (initialState: any),
@@ -1812,7 +1835,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueUpdate(provider, refreshUpdate);
+        enqueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -1847,17 +1870,6 @@ function dispatchAction<S, A>(
     next: (null: any),
   };
 
-  // Append the update to the end of the list.
-  const pending = queue.pending;
-  if (pending === null) {
-    // This is the first update. Create a circular list.
-    update.next = update;
-  } else {
-    update.next = pending.next;
-    pending.next = update;
-  }
-  queue.pending = update;
-
   const alternate = fiber.alternate;
   if (
     fiber === currentlyRenderingFiber ||
@@ -1867,7 +1879,41 @@ function dispatchAction<S, A>(
     // queue -> linked list of updates. After this render pass, we'll restart
     // and apply the stashed updates on top of the work-in-progress hook.
     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;
   } else {
+    if (isInterleavedUpdate(fiber, lane)) {
+      const interleaved = queue.interleaved;
+      if (interleaved === null) {
+        // This is the first update. Create a circular list.
+        update.next = update;
+        // At the end of the current render, this queue's interleaved updates will
+        // be transfered to the pending queue.
+        pushInterleavedQueue(queue);
+      } else {
+        update.next = interleaved.next;
+        interleaved.next = update;
+      }
+      queue.interleaved = update;
+    } else {
+      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 (
       fiber.lanes === NoLanes &&
       (alternate === null || alternate.lanes === NoLanes)
diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
new file mode 100644
index 000000000000..2b8cf9529ddd
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {UpdateQueue as HookQueue} from './ReactFiberHooks.new';
+import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.new';
+
+// An array of all update queues that received updates during the current
+// render. When this render exits, either because it finishes or because it is
+// interrupted, the interleaved updates will be transfered onto the main part
+// of the queue.
+let interleavedQueues: Array<
+  HookQueue<any, any> | ClassQueue<any>,
+> | null = null;
+
+export function pushInterleavedQueue(
+  queue: HookQueue<any, any> | ClassQueue<any>,
+) {
+  if (interleavedQueues === null) {
+    interleavedQueues = [queue];
+  } else {
+    interleavedQueues.push(queue);
+  }
+}
+
+export function enqueueInterleavedUpdates() {
+  // Transfer the interleaved updates onto the main queue. Each queue has a
+  // `pending` field and an `interleaved` field. When they are not null, they
+  // point to the last node in a circular linked list. We need to append the
+  // interleaved list to the end of the pending list by joining them into a
+  // single, circular list.
+  if (interleavedQueues !== null) {
+    for (let i = 0; i < interleavedQueues.length; i++) {
+      const queue = interleavedQueues[i];
+      const lastInterleavedUpdate = queue.interleaved;
+      if (lastInterleavedUpdate !== null) {
+        queue.interleaved = null;
+        const firstInterleavedUpdate = lastInterleavedUpdate.next;
+        const lastPendingUpdate = queue.pending;
+        if (lastPendingUpdate !== null) {
+          const firstPendingUpdate = lastPendingUpdate.next;
+          lastPendingUpdate.next = (firstInterleavedUpdate: any);
+          lastInterleavedUpdate.next = (firstPendingUpdate: any);
+        }
+        queue.pending = (lastInterleavedUpdate: any);
+      }
+    }
+    interleavedQueues = null;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 2a084390dcc7..ad524da736d0 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -11,6 +11,7 @@ import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, ContextDependency} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Lanes} from './ReactFiberLane.new';
+import type {SharedQueue} from './ReactUpdateQueue.new';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
@@ -31,7 +32,7 @@ import {
 
 import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
-import {createUpdate, enqueueUpdate, ForceUpdate} from './ReactUpdateQueue.new';
+import {createUpdate, ForceUpdate} from './ReactUpdateQueue.new';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 
@@ -211,16 +212,30 @@ export function propagateContextChange<T>(
 
           if (fiber.tag === ClassComponent) {
             // Schedule a force update on the work-in-progress.
-            const update = createUpdate(
-              NoTimestamp,
-              pickArbitraryLane(renderLanes),
-            );
+            const lane = pickArbitraryLane(renderLanes);
+            const update = createUpdate(NoTimestamp, lane);
             update.tag = ForceUpdate;
             // TODO: Because we don't have a work-in-progress, this will add the
             // update to the current fiber, too, which means it will persist even if
             // this render is thrown away. Since it's a race condition, not sure it's
             // worth fixing.
-            enqueueUpdate(fiber, update);
+
+            // Inlined `enqueueUpdate` to remove interleaved update check
+            const updateQueue = fiber.updateQueue;
+            if (updateQueue === null) {
+              // Only occurs if the fiber has been unmounted.
+            } else {
+              const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
+              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;
+            }
           }
           fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
           const alternate = fiber.alternate;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 980b623343dc..08ec3c8eac87 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -314,7 +314,7 @@ export function updateContainer(
     update.callback = callback;
   }
 
-  enqueueUpdate(current, update);
+  enqueueUpdate(current, update, lane);
   scheduleUpdateOnFiber(current, lane, eventTime);
 
   return lane;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 27baacda7dae..af199f0aa8e8 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -293,7 +293,7 @@ function throwException(
               // prevent a bail out.
               const update = createUpdate(NoTimestamp, SyncLane);
               update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update);
+              enqueueUpdate(sourceFiber, update, SyncLane);
             }
           }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index dff64f9cae95..d83cf9db9389 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -204,6 +204,7 @@ import {
   pop as popFromStack,
   createCursor,
 } from './ReactFiberStack.new';
+import {enqueueInterleavedUpdates} from './ReactFiberInterleavedUpdates.new';
 
 import {
   markNestedUpdateScheduled,
@@ -534,6 +535,7 @@ export function scheduleUpdateOnFiber(
     }
   }
 
+  // TODO: Consolidate with `isInterleavedUpdate` check
   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. Unless the
@@ -671,6 +673,22 @@ function markUpdateLaneFromFiberToRoot(
   }
 }
 
+export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
+  return (
+    // TODO: Optimize slightly by comparing to root that fiber belongs to.
+    // Requires some refactoring. Not a big deal though since it's rare for
+    // concurrent apps to have more than a single root.
+    workInProgressRoot !== null &&
+    (fiber.mode & BlockingMode) !== NoMode &&
+    // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
+    // then don't treat this as an interleaved update. This pattern is
+    // accompanied by a warning but we haven't fully deprecated it yet. We can
+    // remove once the deferRenderPhaseUpdateToNextBatch flag is enabled.
+    (deferRenderPhaseUpdateToNextBatch ||
+      (executionContext & RenderContext) === NoContext)
+  );
+}
+
 // Use this function to schedule a task for a root. There's only one task per
 // root; if a task was already scheduled, we'll check to make sure the priority
 // of the existing task is the same as the priority of the next level that the
@@ -1352,6 +1370,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
 
+  enqueueInterleavedUpdates();
+
   if (enableSchedulerTracing) {
     spawnedWorkDuringRender = null;
   }
@@ -2282,7 +2302,7 @@ function captureCommitPhaseErrorOnRoot(
 ) {
   const errorInfo = createCapturedValue(error, sourceFiber);
   const update = createRootErrorUpdate(rootFiber, errorInfo, (SyncLane: Lane));
-  enqueueUpdate(rootFiber, update);
+  enqueueUpdate(rootFiber, update, (SyncLane: Lane));
   const eventTime = requestEventTime();
   const root = markUpdateLaneFromFiberToRoot(rootFiber, (SyncLane: Lane));
   if (root !== null) {
@@ -2319,7 +2339,7 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
           errorInfo,
           (SyncLane: Lane),
         );
-        enqueueUpdate(fiber, update);
+        enqueueUpdate(fiber, update, (SyncLane: Lane));
         const eventTime = requestEventTime();
         const root = markUpdateLaneFromFiberToRoot(fiber, (SyncLane: Lane));
         if (root !== null) {
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index 132f83ab22c3..84575950c346 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -102,7 +102,11 @@ import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags';
 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
 import {StrictMode} from './ReactTypeOfMode';
-import {markSkippedUpdateLanes} from './ReactFiberWorkLoop.new';
+import {
+  markSkippedUpdateLanes,
+  isInterleavedUpdate,
+} from './ReactFiberWorkLoop.new';
+import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 
 import invariant from 'shared/invariant';
 
@@ -121,8 +125,9 @@ export type Update<State> = {|
   next: Update<State> | null,
 |};
 
-type SharedQueue<State> = {|
+export type SharedQueue<State> = {|
   pending: Update<State> | null,
+  interleaved: Update<State> | null,
 |};
 
 export type UpdateQueue<State> = {|
@@ -161,6 +166,7 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     lastBaseUpdate: null,
     shared: {
       pending: null,
+      interleaved: null,
     },
     effects: null,
   };
@@ -200,7 +206,11 @@ export function createUpdate(eventTime: number, lane: Lane): Update<*> {
   return update;
 }
 
-export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
+export function enqueueUpdate<State>(
+  fiber: Fiber,
+  update: Update<State>,
+  lane: Lane,
+) {
   const updateQueue = fiber.updateQueue;
   if (updateQueue === null) {
     // Only occurs if the fiber has been unmounted.
@@ -208,15 +218,31 @@ export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
   }
 
   const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
-  const pending = sharedQueue.pending;
-  if (pending === null) {
-    // This is the first update. Create a circular list.
-    update.next = update;
+
+  if (isInterleavedUpdate(fiber, lane)) {
+    const interleaved = sharedQueue.interleaved;
+    if (interleaved === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+      // At the end of the current render, this queue's interleaved updates will
+      // be transfered to the pending queue.
+      pushInterleavedQueue(sharedQueue);
+    } else {
+      update.next = interleaved.next;
+      interleaved.next = update;
+    }
+    sharedQueue.interleaved = update;
   } else {
-    update.next = pending.next;
-    pending.next = update;
+    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;
   }
-  sharedQueue.pending = update;
 
   if (__DEV__) {
     if (
@@ -559,6 +585,18 @@ export function processUpdateQueue<State>(
     queue.firstBaseUpdate = newFirstBaseUpdate;
     queue.lastBaseUpdate = newLastBaseUpdate;
 
+    // Interleaved updates are stored on a separate queue. We aren't going to
+    // process them during this render, but we do need to track which lanes
+    // are remaining.
+    const lastInterleaved = queue.shared.interleaved;
+    if (lastInterleaved !== null) {
+      let interleaved = lastInterleaved;
+      do {
+        newLanes = mergeLanes(newLanes, interleaved.lane);
+        interleaved = ((interleaved: any).next: Update<State>);
+      } while (interleaved !== lastInterleaved);
+    }
+
     // 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
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 000000000000..d21d39aacf43
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
@@ -0,0 +1,129 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let startTransition;
+let useState;
+let useEffect;
+
+describe('ReactInterleavedUpdates', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    startTransition = React.unstable_startTransition;
+    useState = React.useState;
+    useEffect = React.useEffect;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  test('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 ReactNoop.act(async () => {
+      root.render(
+        <>
+          <Child />
+          <Child />
+          <Child />
+        </>,
+      );
+    });
+    expect(Scheduler).toHaveYielded([0, 0, 0]);
+    expect(root).toMatchRenderedOutput('000');
+
+    await ReactNoop.act(async () => {
+      updateChildren(1);
+      // Partially render the children. Only the first one.
+      expect(Scheduler).toFlushAndYieldThrough([1]);
+
+      // In an interleaved event, schedule an update on each of the children.
+      // Including the two that haven't rendered yet.
+      updateChildren(2);
+
+      // We should continue rendering without including the interleaved updates.
+      expect(Scheduler).toFlushUntilNextPaint([1, 1]);
+      expect(root).toMatchRenderedOutput('111');
+    });
+    // The interleaved updates flush in a separate render.
+    expect(Scheduler).toHaveYielded([2, 2, 2]);
+    expect(root).toMatchRenderedOutput('222');
+  });
+
+  // @gate experimental
+  test('low priority update during an interleaved event is not processed during the current render', async () => {
+    // Same as previous test, but the interleaved update is lower priority than
+    // the in-progress render.
+    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 ReactNoop.act(async () => {
+      root.render(
+        <>
+          <Child />
+          <Child />
+          <Child />
+        </>,
+      );
+    });
+    expect(Scheduler).toHaveYielded([0, 0, 0]);
+    expect(root).toMatchRenderedOutput('000');
+
+    await ReactNoop.act(async () => {
+      updateChildren(1);
+      // Partially render the children. Only the first one.
+      expect(Scheduler).toFlushAndYieldThrough([1]);
+
+      // In an interleaved event, schedule an update on each of the children.
+      // Including the two that haven't rendered yet.
+      startTransition(() => {
+        updateChildren(2);
+      });
+
+      // We should continue rendering without including the interleaved updates.
+      expect(Scheduler).toFlushUntilNextPaint([1, 1]);
+      expect(root).toMatchRenderedOutput('111');
+    });
+    // The interleaved updates flush in a separate render.
+    expect(Scheduler).toHaveYielded([2, 2, 2]);
+    expect(root).toMatchRenderedOutput('222');
+  });
+});

From 895ae67fd3cb16b23d66a8be2ad1c747188a811f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 25 Jan 2021 05:54:20 -0800
Subject: [PATCH 0198/1603] Improve error boundary handling for unmounted
 subtrees (#20645)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A passive effect's cleanup function may throw after an unmount. Prior to this commit, such an error would be ignored. (React would not notify any error boundaries.)

After this commit, React will skip any unmounted boundaries and look for a still-mounted boundary. If one is found, it will call getDerivedStateFromError and/or componentDidCatch (depending on the type of boundary). Unmounted boundaries will be ignored, but as they have been unmounted– this seems appropriate.
---
 .../ReactErrorBoundaries-test.internal.js     | 170 +++++++++++
 .../src/ReactFiberCommitWork.new.js           | 196 ++++++++----
 .../src/ReactFiberCommitWork.old.js           | 196 ++++++++----
 .../src/ReactFiberWorkLoop.new.js             |  15 +-
 .../src/ReactFiberWorkLoop.old.js             |  15 +-
 .../ReactHooksWithNoopRenderer-test.js        | 283 ++++++++++++++++++
 ...tIncrementalErrorHandling-test.internal.js |  18 +-
 packages/shared/ReactFeatureFlags.js          |   6 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 17 files changed, 794 insertions(+), 114 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
index 50eae32123b7..02e483368552 100644
--- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -42,6 +42,7 @@ describe('ReactErrorBoundaries', () => {
     PropTypes = require('prop-types');
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+    ReactFeatureFlags.skipUnmountedBoundaries = true;
     ReactDOM = require('react-dom');
     React = require('react');
     act = require('react-dom/test-utils').unstable_concurrentAct;
@@ -2473,4 +2474,173 @@ describe('ReactErrorBoundaries', () => {
       'Caught an error: gotta catch em all.',
     );
   });
+
+  it('catches errors thrown in componentWillUnmount', () => {
+    class LocalErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        Scheduler.unstable_yieldValue(
+          `ErrorBoundary static getDerivedStateFromError`,
+        );
+        return {error};
+      }
+      render() {
+        const {children, id, fallbackID} = this.props;
+        const {error} = this.state;
+        if (error) {
+          Scheduler.unstable_yieldValue(`${id} render error`);
+          return <Component id={fallbackID} />;
+        }
+        Scheduler.unstable_yieldValue(`${id} render success`);
+        return children || null;
+      }
+    }
+
+    class Component extends React.Component {
+      render() {
+        const {id} = this.props;
+        Scheduler.unstable_yieldValue('Component render ' + id);
+        return id;
+      }
+    }
+
+    class LocalBrokenComponentWillUnmount extends React.Component {
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue(
+          'BrokenComponentWillUnmount componentWillUnmount',
+        );
+        throw Error('Expected');
+      }
+
+      render() {
+        Scheduler.unstable_yieldValue('BrokenComponentWillUnmount render');
+        return 'broken';
+      }
+    }
+
+    const container = document.createElement('div');
+
+    ReactDOM.render(
+      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+        <Component id="sibling" />
+        <LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
+          <LocalBrokenComponentWillUnmount />
+        </LocalErrorBoundary>
+      </LocalErrorBoundary>,
+      container,
+    );
+
+    expect(container.firstChild.textContent).toBe('sibling');
+    expect(container.lastChild.textContent).toBe('broken');
+    expect(Scheduler).toHaveYielded([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'InnerBoundary render success',
+      'BrokenComponentWillUnmount render',
+    ]);
+
+    ReactDOM.render(
+      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+        <Component id="sibling" />
+      </LocalErrorBoundary>,
+      container,
+    );
+
+    // 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');
+    expect(Scheduler).toHaveYielded([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'BrokenComponentWillUnmount componentWillUnmount',
+      'ErrorBoundary static getDerivedStateFromError',
+      'OuterBoundary render error',
+      'Component render OuterFallback',
+    ]);
+  });
+
+  it('catches errors thrown while detaching refs', () => {
+    class LocalErrorBoundary extends React.Component {
+      state = {error: null};
+      static getDerivedStateFromError(error) {
+        Scheduler.unstable_yieldValue(
+          `ErrorBoundary static getDerivedStateFromError`,
+        );
+        return {error};
+      }
+      render() {
+        const {children, id, fallbackID} = this.props;
+        const {error} = this.state;
+        if (error) {
+          Scheduler.unstable_yieldValue(`${id} render error`);
+          return <Component id={fallbackID} />;
+        }
+        Scheduler.unstable_yieldValue(`${id} render success`);
+        return children || null;
+      }
+    }
+
+    class Component extends React.Component {
+      render() {
+        const {id} = this.props;
+        Scheduler.unstable_yieldValue('Component render ' + id);
+        return id;
+      }
+    }
+
+    class LocalBrokenCallbackRef extends React.Component {
+      _ref = ref => {
+        Scheduler.unstable_yieldValue('LocalBrokenCallbackRef ref ' + !!ref);
+        if (ref === null) {
+          throw Error('Expected');
+        }
+      };
+
+      render() {
+        Scheduler.unstable_yieldValue('LocalBrokenCallbackRef render');
+        return <div ref={this._ref}>ref</div>;
+      }
+    }
+
+    const container = document.createElement('div');
+
+    ReactDOM.render(
+      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+        <Component id="sibling" />
+        <LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
+          <LocalBrokenCallbackRef />
+        </LocalErrorBoundary>
+      </LocalErrorBoundary>,
+      container,
+    );
+
+    expect(container.firstChild.textContent).toBe('sibling');
+    expect(container.lastChild.textContent).toBe('ref');
+    expect(Scheduler).toHaveYielded([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'InnerBoundary render success',
+      'LocalBrokenCallbackRef render',
+      'LocalBrokenCallbackRef ref true',
+    ]);
+
+    ReactDOM.render(
+      <LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+        <Component id="sibling" />
+      </LocalErrorBoundary>,
+      container,
+    );
+
+    // 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');
+    expect(Scheduler).toHaveYielded([
+      'OuterBoundary render success',
+      'Component render sibling',
+      'LocalBrokenCallbackRef ref false',
+      'ErrorBoundary static getDerivedStateFromError',
+      'OuterBoundary render error',
+      'Component render OuterFallback',
+    ]);
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 2d50f255ee21..29fbd8772012 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -177,7 +177,11 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
 };
 
 // Capture errors so they don't interrupt unmounting.
-function safelyCallComponentWillUnmount(current: Fiber, instance: any) {
+function safelyCallComponentWillUnmount(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  instance: any,
+) {
   if (__DEV__) {
     invokeGuardedCallback(
       null,
@@ -188,18 +192,18 @@ function safelyCallComponentWillUnmount(current: Fiber, instance: any) {
     );
     if (hasCaughtError()) {
       const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, unmountError);
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
     }
   } else {
     try {
       callComponentWillUnmountWithTimer(current, instance);
     } catch (unmountError) {
-      captureCommitPhaseError(current, unmountError);
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
     }
   }
 }
 
-function safelyDetachRef(current: Fiber) {
+function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
     if (typeof ref === 'function') {
@@ -218,7 +222,7 @@ function safelyDetachRef(current: Fiber) {
 
         if (hasCaughtError()) {
           const refError = clearCaughtError();
-          captureCommitPhaseError(current, refError);
+          captureCommitPhaseError(current, nearestMountedAncestor, refError);
         }
       } else {
         try {
@@ -237,7 +241,7 @@ function safelyDetachRef(current: Fiber) {
             ref(null);
           }
         } catch (refError) {
-          captureCommitPhaseError(current, refError);
+          captureCommitPhaseError(current, nearestMountedAncestor, refError);
         }
       }
     } else {
@@ -246,18 +250,22 @@ function safelyDetachRef(current: Fiber) {
   }
 }
 
-function safelyCallDestroy(current: Fiber, destroy: () => void) {
+function safelyCallDestroy(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  destroy: () => void,
+) {
   if (__DEV__) {
     invokeGuardedCallback(null, destroy, null);
     if (hasCaughtError()) {
       const error = clearCaughtError();
-      captureCommitPhaseError(current, error);
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
     }
   } else {
     try {
       destroy();
     } catch (error) {
-      captureCommitPhaseError(current, error);
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
     }
   }
 }
@@ -321,14 +329,14 @@ function commitBeforeMutationEffects_complete() {
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitBeforeMutationEffectsOnFiber(fiber);
       } catch (error) {
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
     }
 
@@ -462,7 +470,11 @@ function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
   }
 }
 
-function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
+function commitHookEffectListUnmount(
+  flags: HookFlags,
+  finishedWork: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
@@ -474,7 +486,7 @@ function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
-          safelyCallDestroy(finishedWork, destroy);
+          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
         }
       }
       effect = effect.next;
@@ -1049,6 +1061,7 @@ function commitDetachRef(current: Fiber) {
 function commitUnmount(
   finishedRoot: FiberRoot,
   current: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   onCommitUnmount(current);
@@ -1075,10 +1088,10 @@ function commitUnmount(
                   current.mode & ProfileMode
                 ) {
                   startLayoutEffectTimer();
-                  safelyCallDestroy(current, destroy);
+                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
                   recordLayoutEffectDuration(current);
                 } else {
-                  safelyCallDestroy(current, destroy);
+                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
               }
             }
@@ -1089,15 +1102,19 @@ function commitUnmount(
       return;
     }
     case ClassComponent: {
-      safelyDetachRef(current);
+      safelyDetachRef(current, nearestMountedAncestor);
       const instance = current.stateNode;
       if (typeof instance.componentWillUnmount === 'function') {
-        safelyCallComponentWillUnmount(current, instance);
+        safelyCallComponentWillUnmount(
+          current,
+          nearestMountedAncestor,
+          instance,
+        );
       }
       return;
     }
     case HostComponent: {
-      safelyDetachRef(current);
+      safelyDetachRef(current, nearestMountedAncestor);
       return;
     }
     case HostPortal: {
@@ -1105,7 +1122,12 @@ function commitUnmount(
       // We are also not using this parent because
       // the portal will get pushed immediately.
       if (supportsMutation) {
-        unmountHostComponents(finishedRoot, current, renderPriorityLevel);
+        unmountHostComponents(
+          finishedRoot,
+          current,
+          nearestMountedAncestor,
+          renderPriorityLevel,
+        );
       } else if (supportsPersistence) {
         emptyPortalContainer(current);
       }
@@ -1135,7 +1157,7 @@ function commitUnmount(
     }
     case ScopeComponent: {
       if (enableScopeAPI) {
-        safelyDetachRef(current);
+        safelyDetachRef(current, nearestMountedAncestor);
       }
       return;
     }
@@ -1145,6 +1167,7 @@ function commitUnmount(
 function commitNestedUnmounts(
   finishedRoot: FiberRoot,
   root: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   // While we're inside a removed host node we don't want to call
@@ -1154,7 +1177,12 @@ function commitNestedUnmounts(
   // we do an inner loop while we're still inside the host node.
   let node: Fiber = root;
   while (true) {
-    commitUnmount(finishedRoot, node, renderPriorityLevel);
+    commitUnmount(
+      finishedRoot,
+      node,
+      nearestMountedAncestor,
+      renderPriorityLevel,
+    );
     // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
     if (
@@ -1455,6 +1483,7 @@ function insertOrAppendPlacementNode(
 function unmountHostComponents(
   finishedRoot: FiberRoot,
   current: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
@@ -1504,7 +1533,12 @@ function unmountHostComponents(
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
+      commitNestedUnmounts(
+        finishedRoot,
+        node,
+        nearestMountedAncestor,
+        renderPriorityLevel,
+      );
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -1521,7 +1555,12 @@ function unmountHostComponents(
       // Don't visit children because we already visited them.
     } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
       const fundamentalNode = node.stateNode.instance;
-      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
+      commitNestedUnmounts(
+        finishedRoot,
+        node,
+        nearestMountedAncestor,
+        renderPriorityLevel,
+      );
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -1573,7 +1612,12 @@ function unmountHostComponents(
         continue;
       }
     } else {
-      commitUnmount(finishedRoot, node, renderPriorityLevel);
+      commitUnmount(
+        finishedRoot,
+        node,
+        nearestMountedAncestor,
+        renderPriorityLevel,
+      );
       // Visit children because we may find more host components below.
       if (node.child !== null) {
         node.child.return = node;
@@ -1603,15 +1647,26 @@ function unmountHostComponents(
 function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(finishedRoot, current, renderPriorityLevel);
+    unmountHostComponents(
+      finishedRoot,
+      current,
+      nearestMountedAncestor,
+      renderPriorityLevel,
+    );
   } else {
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);
+    commitNestedUnmounts(
+      finishedRoot,
+      current,
+      nearestMountedAncestor,
+      renderPriorityLevel,
+    );
   }
   const alternate = current.alternate;
   detachFiberMutation(current);
@@ -1642,12 +1697,17 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
             commitHookEffectListUnmount(
               HookLayout | HookHasEffect,
               finishedWork,
+              finishedWork.return,
             );
           } finally {
             recordLayoutEffectDuration(finishedWork);
           }
         } else {
-          commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
         }
         return;
       }
@@ -1701,12 +1761,20 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       ) {
         try {
           startLayoutEffectTimer();
-          commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
         } finally {
           recordLayoutEffectDuration(finishedWork);
         }
       } else {
-        commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
+        commitHookEffectListUnmount(
+          HookLayout | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
       }
       return;
     }
@@ -1958,17 +2026,18 @@ function commitMutationEffects_begin(
             null,
             root,
             childToDelete,
+            fiber,
             renderPriorityLevel,
           );
           if (hasCaughtError()) {
             const error = clearCaughtError();
-            captureCommitPhaseError(childToDelete, error);
+            captureCommitPhaseError(childToDelete, fiber, error);
           }
         } else {
           try {
-            commitDeletion(root, childToDelete, renderPriorityLevel);
+            commitDeletion(root, childToDelete, fiber, renderPriorityLevel);
           } catch (error) {
-            captureCommitPhaseError(childToDelete, error);
+            captureCommitPhaseError(childToDelete, fiber, error);
           }
         }
       }
@@ -2002,14 +2071,14 @@ function commitMutationEffects_complete(
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
       } catch (error) {
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
     }
 
@@ -2144,14 +2213,14 @@ function commitLayoutMountEffects_complete(
         );
         if (hasCaughtError()) {
           const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         resetCurrentDebugFiberInDEV();
       } else {
         try {
           commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
         } catch (error) {
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
       }
     }
@@ -2211,14 +2280,14 @@ function commitPassiveMountEffects_complete(
         );
         if (hasCaughtError()) {
           const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         resetCurrentDebugFiberInDEV();
       } else {
         try {
           commitPassiveMountOnFiber(root, fiber);
         } catch (error) {
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
       }
     }
@@ -2282,7 +2351,10 @@ function commitPassiveUnmountEffects_begin() {
         for (let i = 0; i < deletions.length; i++) {
           const fiberToDelete = deletions[i];
           nextEffect = fiberToDelete;
-          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(fiberToDelete);
+          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+            fiberToDelete,
+            fiber,
+          );
 
           // Now that passive effects have been processed, it's safe to detach lingering pointers.
           const alternate = fiberToDelete.alternate;
@@ -2343,10 +2415,18 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
         finishedWork.mode & ProfileMode
       ) {
         startPassiveEffectTimer();
-        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+        commitHookEffectListUnmount(
+          HookPassive | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
         recordPassiveEffectDuration(finishedWork);
       } else {
-        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+        commitHookEffectListUnmount(
+          HookPassive | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
       }
       break;
     }
@@ -2355,6 +2435,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
 
 function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
   deletedSubtreeRoot: Fiber,
+  nearestMountedAncestor: Fiber | null,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2362,7 +2443,7 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     // Deletion effects fire in parent -> child order
     // TODO: Check if fiber has a PassiveStatic flag
     setCurrentDebugFiberInDEV(fiber);
-    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber, nearestMountedAncestor);
     resetCurrentDebugFiberInDEV();
 
     const child = fiber.child;
@@ -2399,7 +2480,10 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
   }
 }
 
-function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
+function commitPassiveUnmountInsideDeletedTreeOnFiber(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+): void {
   switch (current.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -2410,10 +2494,18 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
         current.mode & ProfileMode
       ) {
         startPassiveEffectTimer();
-        commitHookEffectListUnmount(HookPassive, current);
+        commitHookEffectListUnmount(
+          HookPassive,
+          current,
+          nearestMountedAncestor,
+        );
         recordPassiveEffectDuration(current);
       } else {
-        commitHookEffectListUnmount(HookPassive, current);
+        commitHookEffectListUnmount(
+          HookPassive,
+          current,
+          nearestMountedAncestor,
+        );
       }
       break;
     }
@@ -2454,7 +2546,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
+          captureCommitPhaseError(fiber, fiber.return, mountError);
         }
         break;
       }
@@ -2463,7 +2555,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         invokeGuardedCallback(null, instance.componentDidMount, instance);
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
+          captureCommitPhaseError(fiber, fiber.return, mountError);
         }
         break;
       }
@@ -2488,7 +2580,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
+          captureCommitPhaseError(fiber, fiber.return, mountError);
         }
         break;
       }
@@ -2514,7 +2606,7 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
+          captureCommitPhaseError(fiber, fiber.return, unmountError);
         }
         break;
       }
@@ -2526,12 +2618,12 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
             safelyCallComponentWillUnmount,
             null,
             fiber,
-            instance,
             fiber.return,
+            instance,
           );
           if (hasCaughtError()) {
             const unmountError = clearCaughtError();
-            captureCommitPhaseError(fiber, unmountError);
+            captureCommitPhaseError(fiber, fiber.return, unmountError);
           }
         }
         break;
@@ -2558,7 +2650,7 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
+          captureCommitPhaseError(fiber, fiber.return, unmountError);
         }
         break;
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 642f6dce02aa..d5ce4dd688d6 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -177,7 +177,11 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
 };
 
 // Capture errors so they don't interrupt unmounting.
-function safelyCallComponentWillUnmount(current: Fiber, instance: any) {
+function safelyCallComponentWillUnmount(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  instance: any,
+) {
   if (__DEV__) {
     invokeGuardedCallback(
       null,
@@ -188,18 +192,18 @@ function safelyCallComponentWillUnmount(current: Fiber, instance: any) {
     );
     if (hasCaughtError()) {
       const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, unmountError);
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
     }
   } else {
     try {
       callComponentWillUnmountWithTimer(current, instance);
     } catch (unmountError) {
-      captureCommitPhaseError(current, unmountError);
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
     }
   }
 }
 
-function safelyDetachRef(current: Fiber) {
+function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
     if (typeof ref === 'function') {
@@ -218,7 +222,7 @@ function safelyDetachRef(current: Fiber) {
 
         if (hasCaughtError()) {
           const refError = clearCaughtError();
-          captureCommitPhaseError(current, refError);
+          captureCommitPhaseError(current, nearestMountedAncestor, refError);
         }
       } else {
         try {
@@ -237,7 +241,7 @@ function safelyDetachRef(current: Fiber) {
             ref(null);
           }
         } catch (refError) {
-          captureCommitPhaseError(current, refError);
+          captureCommitPhaseError(current, nearestMountedAncestor, refError);
         }
       }
     } else {
@@ -246,18 +250,22 @@ function safelyDetachRef(current: Fiber) {
   }
 }
 
-function safelyCallDestroy(current: Fiber, destroy: () => void) {
+function safelyCallDestroy(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  destroy: () => void,
+) {
   if (__DEV__) {
     invokeGuardedCallback(null, destroy, null);
     if (hasCaughtError()) {
       const error = clearCaughtError();
-      captureCommitPhaseError(current, error);
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
     }
   } else {
     try {
       destroy();
     } catch (error) {
-      captureCommitPhaseError(current, error);
+      captureCommitPhaseError(current, nearestMountedAncestor, error);
     }
   }
 }
@@ -321,14 +329,14 @@ function commitBeforeMutationEffects_complete() {
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitBeforeMutationEffectsOnFiber(fiber);
       } catch (error) {
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
     }
 
@@ -462,7 +470,11 @@ function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
   }
 }
 
-function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
+function commitHookEffectListUnmount(
+  flags: HookFlags,
+  finishedWork: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
@@ -474,7 +486,7 @@ function commitHookEffectListUnmount(flags: HookFlags, finishedWork: Fiber) {
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
-          safelyCallDestroy(finishedWork, destroy);
+          safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
         }
       }
       effect = effect.next;
@@ -1049,6 +1061,7 @@ function commitDetachRef(current: Fiber) {
 function commitUnmount(
   finishedRoot: FiberRoot,
   current: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   onCommitUnmount(current);
@@ -1075,10 +1088,10 @@ function commitUnmount(
                   current.mode & ProfileMode
                 ) {
                   startLayoutEffectTimer();
-                  safelyCallDestroy(current, destroy);
+                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
                   recordLayoutEffectDuration(current);
                 } else {
-                  safelyCallDestroy(current, destroy);
+                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
               }
             }
@@ -1089,15 +1102,19 @@ function commitUnmount(
       return;
     }
     case ClassComponent: {
-      safelyDetachRef(current);
+      safelyDetachRef(current, nearestMountedAncestor);
       const instance = current.stateNode;
       if (typeof instance.componentWillUnmount === 'function') {
-        safelyCallComponentWillUnmount(current, instance);
+        safelyCallComponentWillUnmount(
+          current,
+          nearestMountedAncestor,
+          instance,
+        );
       }
       return;
     }
     case HostComponent: {
-      safelyDetachRef(current);
+      safelyDetachRef(current, nearestMountedAncestor);
       return;
     }
     case HostPortal: {
@@ -1105,7 +1122,12 @@ function commitUnmount(
       // We are also not using this parent because
       // the portal will get pushed immediately.
       if (supportsMutation) {
-        unmountHostComponents(finishedRoot, current, renderPriorityLevel);
+        unmountHostComponents(
+          finishedRoot,
+          current,
+          nearestMountedAncestor,
+          renderPriorityLevel,
+        );
       } else if (supportsPersistence) {
         emptyPortalContainer(current);
       }
@@ -1135,7 +1157,7 @@ function commitUnmount(
     }
     case ScopeComponent: {
       if (enableScopeAPI) {
-        safelyDetachRef(current);
+        safelyDetachRef(current, nearestMountedAncestor);
       }
       return;
     }
@@ -1145,6 +1167,7 @@ function commitUnmount(
 function commitNestedUnmounts(
   finishedRoot: FiberRoot,
   root: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   // While we're inside a removed host node we don't want to call
@@ -1154,7 +1177,12 @@ function commitNestedUnmounts(
   // we do an inner loop while we're still inside the host node.
   let node: Fiber = root;
   while (true) {
-    commitUnmount(finishedRoot, node, renderPriorityLevel);
+    commitUnmount(
+      finishedRoot,
+      node,
+      nearestMountedAncestor,
+      renderPriorityLevel,
+    );
     // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
     if (
@@ -1455,6 +1483,7 @@ function insertOrAppendPlacementNode(
 function unmountHostComponents(
   finishedRoot: FiberRoot,
   current: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
@@ -1504,7 +1533,12 @@ function unmountHostComponents(
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
+      commitNestedUnmounts(
+        finishedRoot,
+        node,
+        nearestMountedAncestor,
+        renderPriorityLevel,
+      );
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -1521,7 +1555,12 @@ function unmountHostComponents(
       // Don't visit children because we already visited them.
     } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
       const fundamentalNode = node.stateNode.instance;
-      commitNestedUnmounts(finishedRoot, node, renderPriorityLevel);
+      commitNestedUnmounts(
+        finishedRoot,
+        node,
+        nearestMountedAncestor,
+        renderPriorityLevel,
+      );
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -1573,7 +1612,12 @@ function unmountHostComponents(
         continue;
       }
     } else {
-      commitUnmount(finishedRoot, node, renderPriorityLevel);
+      commitUnmount(
+        finishedRoot,
+        node,
+        nearestMountedAncestor,
+        renderPriorityLevel,
+      );
       // Visit children because we may find more host components below.
       if (node.child !== null) {
         node.child.return = node;
@@ -1603,15 +1647,26 @@ function unmountHostComponents(
 function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
+  nearestMountedAncestor: Fiber,
   renderPriorityLevel: ReactPriorityLevel,
 ): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(finishedRoot, current, renderPriorityLevel);
+    unmountHostComponents(
+      finishedRoot,
+      current,
+      nearestMountedAncestor,
+      renderPriorityLevel,
+    );
   } else {
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(finishedRoot, current, renderPriorityLevel);
+    commitNestedUnmounts(
+      finishedRoot,
+      current,
+      nearestMountedAncestor,
+      renderPriorityLevel,
+    );
   }
   const alternate = current.alternate;
   detachFiberMutation(current);
@@ -1642,12 +1697,17 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
             commitHookEffectListUnmount(
               HookLayout | HookHasEffect,
               finishedWork,
+              finishedWork.return,
             );
           } finally {
             recordLayoutEffectDuration(finishedWork);
           }
         } else {
-          commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
         }
         return;
       }
@@ -1701,12 +1761,20 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       ) {
         try {
           startLayoutEffectTimer();
-          commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
         } finally {
           recordLayoutEffectDuration(finishedWork);
         }
       } else {
-        commitHookEffectListUnmount(HookLayout | HookHasEffect, finishedWork);
+        commitHookEffectListUnmount(
+          HookLayout | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
       }
       return;
     }
@@ -1958,17 +2026,18 @@ function commitMutationEffects_begin(
             null,
             root,
             childToDelete,
+            fiber,
             renderPriorityLevel,
           );
           if (hasCaughtError()) {
             const error = clearCaughtError();
-            captureCommitPhaseError(childToDelete, error);
+            captureCommitPhaseError(childToDelete, fiber, error);
           }
         } else {
           try {
-            commitDeletion(root, childToDelete, renderPriorityLevel);
+            commitDeletion(root, childToDelete, fiber, renderPriorityLevel);
           } catch (error) {
-            captureCommitPhaseError(childToDelete, error);
+            captureCommitPhaseError(childToDelete, fiber, error);
           }
         }
       }
@@ -2002,14 +2071,14 @@ function commitMutationEffects_complete(
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
     } else {
       try {
         commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
       } catch (error) {
-        captureCommitPhaseError(fiber, error);
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
     }
 
@@ -2144,14 +2213,14 @@ function commitLayoutMountEffects_complete(
         );
         if (hasCaughtError()) {
           const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         resetCurrentDebugFiberInDEV();
       } else {
         try {
           commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
         } catch (error) {
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
       }
     }
@@ -2211,14 +2280,14 @@ function commitPassiveMountEffects_complete(
         );
         if (hasCaughtError()) {
           const error = clearCaughtError();
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         resetCurrentDebugFiberInDEV();
       } else {
         try {
           commitPassiveMountOnFiber(root, fiber);
         } catch (error) {
-          captureCommitPhaseError(fiber, error);
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
       }
     }
@@ -2282,7 +2351,10 @@ function commitPassiveUnmountEffects_begin() {
         for (let i = 0; i < deletions.length; i++) {
           const fiberToDelete = deletions[i];
           nextEffect = fiberToDelete;
-          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(fiberToDelete);
+          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+            fiberToDelete,
+            fiber,
+          );
 
           // Now that passive effects have been processed, it's safe to detach lingering pointers.
           const alternate = fiberToDelete.alternate;
@@ -2343,10 +2415,18 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
         finishedWork.mode & ProfileMode
       ) {
         startPassiveEffectTimer();
-        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+        commitHookEffectListUnmount(
+          HookPassive | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
         recordPassiveEffectDuration(finishedWork);
       } else {
-        commitHookEffectListUnmount(HookPassive | HookHasEffect, finishedWork);
+        commitHookEffectListUnmount(
+          HookPassive | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
       }
       break;
     }
@@ -2355,6 +2435,7 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
 
 function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
   deletedSubtreeRoot: Fiber,
+  nearestMountedAncestor: Fiber | null,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2362,7 +2443,7 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     // Deletion effects fire in parent -> child order
     // TODO: Check if fiber has a PassiveStatic flag
     setCurrentDebugFiberInDEV(fiber);
-    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber);
+    commitPassiveUnmountInsideDeletedTreeOnFiber(fiber, nearestMountedAncestor);
     resetCurrentDebugFiberInDEV();
 
     const child = fiber.child;
@@ -2399,7 +2480,10 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
   }
 }
 
-function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
+function commitPassiveUnmountInsideDeletedTreeOnFiber(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+): void {
   switch (current.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -2410,10 +2494,18 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(current: Fiber): void {
         current.mode & ProfileMode
       ) {
         startPassiveEffectTimer();
-        commitHookEffectListUnmount(HookPassive, current);
+        commitHookEffectListUnmount(
+          HookPassive,
+          current,
+          nearestMountedAncestor,
+        );
         recordPassiveEffectDuration(current);
       } else {
-        commitHookEffectListUnmount(HookPassive, current);
+        commitHookEffectListUnmount(
+          HookPassive,
+          current,
+          nearestMountedAncestor,
+        );
       }
       break;
     }
@@ -2454,7 +2546,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
+          captureCommitPhaseError(fiber, fiber.return, mountError);
         }
         break;
       }
@@ -2463,7 +2555,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         invokeGuardedCallback(null, instance.componentDidMount, instance);
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
+          captureCommitPhaseError(fiber, fiber.return, mountError);
         }
         break;
       }
@@ -2488,7 +2580,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, mountError);
+          captureCommitPhaseError(fiber, fiber.return, mountError);
         }
         break;
       }
@@ -2514,7 +2606,7 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
+          captureCommitPhaseError(fiber, fiber.return, unmountError);
         }
         break;
       }
@@ -2526,12 +2618,12 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
             safelyCallComponentWillUnmount,
             null,
             fiber,
-            instance,
             fiber.return,
+            instance,
           );
           if (hasCaughtError()) {
             const unmountError = clearCaughtError();
-            captureCommitPhaseError(fiber, unmountError);
+            captureCommitPhaseError(fiber, fiber.return, unmountError);
           }
         }
         break;
@@ -2558,7 +2650,7 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
         );
         if (hasCaughtError()) {
           const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, unmountError);
+          captureCommitPhaseError(fiber, fiber.return, unmountError);
         }
         break;
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index d83cf9db9389..59fce3d254f0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -33,6 +33,7 @@ import {
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
+  skipUnmountedBoundaries,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -2312,7 +2313,11 @@ function captureCommitPhaseErrorOnRoot(
   }
 }
 
-export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
+export function captureCommitPhaseError(
+  sourceFiber: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  error: mixed,
+) {
   if (sourceFiber.tag === HostRoot) {
     // Error was thrown at the root. There is no parent, so the root
     // itself should capture it.
@@ -2320,7 +2325,13 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
     return;
   }
 
-  let fiber = sourceFiber.return;
+  let fiber = null;
+  if (skipUnmountedBoundaries) {
+    fiber = nearestMountedAncestor;
+  } else {
+    fiber = sourceFiber.return;
+  }
+
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 699b47596d0c..833fa0e98b4f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -33,6 +33,7 @@ import {
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
+  skipUnmountedBoundaries,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -2292,7 +2293,11 @@ function captureCommitPhaseErrorOnRoot(
   }
 }
 
-export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
+export function captureCommitPhaseError(
+  sourceFiber: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  error: mixed,
+) {
   if (sourceFiber.tag === HostRoot) {
     // Error was thrown at the root. There is no parent, so the root
     // itself should capture it.
@@ -2300,7 +2305,13 @@ export function captureCommitPhaseError(sourceFiber: Fiber, error: mixed) {
     return;
   }
 
-  let fiber = sourceFiber.return;
+  let fiber = null;
+  if (skipUnmountedBoundaries) {
+    fiber = nearestMountedAncestor;
+  } else {
+    fiber = sourceFiber.return;
+  }
+
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 489928f27d20..a792f8609be4 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2358,6 +2358,210 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
     });
 
+    describe('errors thrown in passive destroy function within unmounted trees', () => {
+      let BrokenUseEffectCleanup;
+      let ErrorBoundary;
+      let LogOnlyErrorBoundary;
+
+      beforeEach(() => {
+        BrokenUseEffectCleanup = function() {
+          useEffect(() => {
+            Scheduler.unstable_yieldValue('BrokenUseEffectCleanup useEffect');
+            return () => {
+              Scheduler.unstable_yieldValue(
+                'BrokenUseEffectCleanup useEffect destroy',
+              );
+              throw new Error('Expected error');
+            };
+          }, []);
+
+          return 'inner child';
+        };
+
+        ErrorBoundary = class extends React.Component {
+          state = {error: null};
+          static getDerivedStateFromError(error) {
+            Scheduler.unstable_yieldValue(
+              `ErrorBoundary static getDerivedStateFromError`,
+            );
+            return {error};
+          }
+          componentDidCatch(error, info) {
+            Scheduler.unstable_yieldValue(`ErrorBoundary componentDidCatch`);
+          }
+          render() {
+            if (this.state.error) {
+              Scheduler.unstable_yieldValue('ErrorBoundary render error');
+              return <span prop="ErrorBoundary fallback" />;
+            }
+            Scheduler.unstable_yieldValue('ErrorBoundary render success');
+            return this.props.children || null;
+          }
+        };
+
+        LogOnlyErrorBoundary = class extends React.Component {
+          componentDidCatch(error, info) {
+            Scheduler.unstable_yieldValue(
+              `LogOnlyErrorBoundary componentDidCatch`,
+            );
+          }
+          render() {
+            Scheduler.unstable_yieldValue(`LogOnlyErrorBoundary render`);
+            return this.props.children || null;
+          }
+        };
+      });
+
+      // @gate skipUnmountedBoundaries
+      it('should use the nearest still-mounted boundary if there are no unmounted boundaries', () => {
+        act(() => {
+          ReactNoop.render(
+            <LogOnlyErrorBoundary>
+              <BrokenUseEffectCleanup />
+            </LogOnlyErrorBoundary>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded([
+          'LogOnlyErrorBoundary render',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        act(() => {
+          ReactNoop.render(<LogOnlyErrorBoundary />);
+        });
+
+        expect(Scheduler).toHaveYielded([
+          'LogOnlyErrorBoundary render',
+          'BrokenUseEffectCleanup useEffect destroy',
+          'LogOnlyErrorBoundary componentDidCatch',
+        ]);
+      });
+
+      // @gate skipUnmountedBoundaries
+      it('should skip unmounted boundaries and use the nearest still-mounted boundary', () => {
+        function Conditional({showChildren}) {
+          if (showChildren) {
+            return (
+              <ErrorBoundary>
+                <BrokenUseEffectCleanup />
+              </ErrorBoundary>
+            );
+          } else {
+            return null;
+          }
+        }
+
+        act(() => {
+          ReactNoop.render(
+            <LogOnlyErrorBoundary>
+              <Conditional showChildren={true} />
+            </LogOnlyErrorBoundary>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded([
+          'LogOnlyErrorBoundary render',
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        act(() => {
+          ReactNoop.render(
+            <LogOnlyErrorBoundary>
+              <Conditional showChildren={false} />
+            </LogOnlyErrorBoundary>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded([
+          'LogOnlyErrorBoundary render',
+          'BrokenUseEffectCleanup useEffect destroy',
+          'LogOnlyErrorBoundary componentDidCatch',
+        ]);
+      });
+
+      // @gate skipUnmountedBoundaries
+      it('should call getDerivedStateFromError in the nearest still-mounted boundary', () => {
+        function Conditional({showChildren}) {
+          if (showChildren) {
+            return <BrokenUseEffectCleanup />;
+          } else {
+            return null;
+          }
+        }
+
+        act(() => {
+          ReactNoop.render(
+            <ErrorBoundary>
+              <Conditional showChildren={true} />
+            </ErrorBoundary>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        act(() => {
+          ReactNoop.render(
+            <ErrorBoundary>
+              <Conditional showChildren={false} />
+            </ErrorBoundary>,
+          );
+        });
+
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect destroy',
+          'ErrorBoundary static getDerivedStateFromError',
+          'ErrorBoundary render error',
+          'ErrorBoundary componentDidCatch',
+        ]);
+
+        expect(ReactNoop.getChildren()).toEqual([
+          span('ErrorBoundary fallback'),
+        ]);
+      });
+
+      // @gate skipUnmountedBoundaries
+      it('should rethrow error if there are no still-mounted boundaries', () => {
+        function Conditional({showChildren}) {
+          if (showChildren) {
+            return (
+              <ErrorBoundary>
+                <BrokenUseEffectCleanup />
+              </ErrorBoundary>
+            );
+          } else {
+            return null;
+          }
+        }
+
+        act(() => {
+          ReactNoop.render(<Conditional showChildren={true} />);
+        });
+
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render success',
+          'BrokenUseEffectCleanup useEffect',
+        ]);
+
+        expect(() => {
+          act(() => {
+            ReactNoop.render(<Conditional showChildren={false} />);
+          });
+        }).toThrow('Expected error');
+
+        expect(Scheduler).toHaveYielded([
+          'BrokenUseEffectCleanup useEffect destroy',
+        ]);
+
+        expect(ReactNoop.getChildren()).toEqual([]);
+      });
+    });
+
     it('calls passive effect destroy functions for memoized components', () => {
       const Wrapper = ({children}) => children;
       function Child() {
@@ -2594,6 +2798,85 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Mount normal [current: 1]',
       ]);
     });
+
+    // @gate skipUnmountedBoundaries
+    it('catches errors thrown in useLayoutEffect', () => {
+      class ErrorBoundary extends React.Component {
+        state = {error: null};
+        static getDerivedStateFromError(error) {
+          Scheduler.unstable_yieldValue(
+            `ErrorBoundary static getDerivedStateFromError`,
+          );
+          return {error};
+        }
+        render() {
+          const {children, id, fallbackID} = this.props;
+          const {error} = this.state;
+          if (error) {
+            Scheduler.unstable_yieldValue(`${id} render error`);
+            return <Component id={fallbackID} />;
+          }
+          Scheduler.unstable_yieldValue(`${id} render success`);
+          return children || null;
+        }
+      }
+
+      function Component({id}) {
+        Scheduler.unstable_yieldValue('Component render ' + id);
+        return <span prop={id} />;
+      }
+
+      function BrokenLayoutEffectDestroy() {
+        useLayoutEffect(() => {
+          return () => {
+            Scheduler.unstable_yieldValue(
+              'BrokenLayoutEffectDestroy useLayoutEffect destroy',
+            );
+            throw Error('Expected');
+          };
+        }, []);
+
+        Scheduler.unstable_yieldValue('BrokenLayoutEffectDestroy render');
+        return <span prop="broken" />;
+      }
+
+      ReactNoop.render(
+        <ErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
+          <Component id="sibling" />
+          <ErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
+            <BrokenLayoutEffectDestroy />
+          </ErrorBoundary>
+        </ErrorBoundary>,
+      );
+
+      expect(Scheduler).toFlushAndYield([
+        'OuterBoundary render success',
+        'Component render sibling',
+        'InnerBoundary render success',
+        'BrokenLayoutEffectDestroy render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('sibling'),
+        span('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.
+      expect(Scheduler).toFlushAndYield([
+        'OuterBoundary render success',
+        'Component render sibling',
+        'BrokenLayoutEffectDestroy useLayoutEffect destroy',
+        'ErrorBoundary static getDerivedStateFromError',
+        'OuterBoundary render error',
+        'Component render OuterFallback',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('OuterFallback')]);
+    });
   });
 
   describe('useCallback', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 503dc98f0de4..06668b4eb389 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -961,6 +961,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
   });
 
+  // @gate skipUnmountedBoundaries
   it('should not attempt to recover an unmounting error boundary', () => {
     class Parent extends React.Component {
       componentWillUnmount() {
@@ -992,12 +993,17 @@ describe('ReactIncrementalErrorHandling', () => {
 
     ReactNoop.render(<Parent />);
     expect(Scheduler).toFlushWithoutYielding();
-    ReactNoop.render(null);
-    expect(Scheduler).toFlushAndYield([
-      // Parent unmounts before the error is thrown.
-      'Parent componentWillUnmount',
-      'ThrowsOnUnmount componentWillUnmount',
-    ]);
+
+    // Because the error boundary is also unmounting,
+    // an error in ThrowsOnUnmount should be rethrown.
+    expect(() => {
+      ReactNoop.render(null);
+      expect(Scheduler).toFlushAndYield([
+        'Parent componentWillUnmount',
+        'ThrowsOnUnmount componentWillUnmount',
+      ]);
+    }).toThrow('unmount error');
+
     ReactNoop.render(<Parent />);
   });
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index c3ffb65e96ff..8611a9da06bc 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -101,6 +101,12 @@ export const enableNewReconciler = false;
 
 export const disableNativeComponentFrames = false;
 
+// Errors that are thrown while unmounting (or after in the case of passive effects)
+// should bypass any error boundaries that are also unmounting (or have unmounted)
+// and be handled by the nearest still-mounted boundary.
+// If there are no still-mounted boundaries, the errors should be rethrown.
+export const skipUnmountedBoundaries = false;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 23c926c65a3f..0fd02c2fd3f1 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -46,6 +46,7 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 3ed2d7701c93..c76048a8b2b4 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -45,6 +45,7 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c6ffacb27bab..447d77effbc4 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -45,6 +45,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 84ea8902f60c..6a6d8f39c59b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -45,6 +45,7 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index eb1630fc49bd..56e7dde89dfb 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -45,6 +45,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 87133385439f..537c3fbf1c09 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -45,6 +45,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 671f44be0295..24dd55704700 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -45,6 +45,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = true;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index cf0ca5ae5439..cf858b767cc3 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -18,6 +18,7 @@ export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const decoupleUpdatePriorityFromScheduler = __VARIANT__;
+export const skipUnmountedBoundaries = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 8b2bda551339..85ce6eca5728 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -26,6 +26,7 @@ export const {
   deferRenderPhaseUpdateToNextBatch,
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
+  skipUnmountedBoundaries,
   enableDoubleInvokingEffects,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,

From f0031dc6ed8801cc638c2f378911a93ceb8e2412 Mon Sep 17 00:00:00 2001
From: Berton Zhu <sairly@126.com>
Date: Mon, 25 Jan 2021 23:35:02 +0800
Subject: [PATCH 0199/1603] Devtool: `$r` should contain `hooks` property when
 it is forwardRef or memo component (#20626)

---
 packages/react-devtools-shared/src/backend/renderer.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index ee90dfee688a..cc82fda74cdb 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2795,6 +2795,7 @@ export function attach(
         break;
       case ForwardRef:
         global.$r = {
+          hooks,
           props,
           type: type.render,
         };
@@ -2802,6 +2803,7 @@ export function attach(
       case MemoComponent:
       case SimpleMemoComponent:
         global.$r = {
+          hooks,
           props,
           type:
             elementType != null && elementType.type != null

From 6d94017c4287195d8d6c5173ea663285820e9f61 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 25 Jan 2021 11:58:19 -0800
Subject: [PATCH 0200/1603] DevTools: Make it easier to write tests for
 inspected elements (#20655)

And also add a few tests for  which also cover a recent bugfix that just landed
---
 .../src/__tests__/inspectedElement-test.js    | 965 ++++++------------
 1 file changed, 323 insertions(+), 642 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 70a59b135e85..7cb7ebb77f5a 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -33,6 +33,8 @@ describe('InspectedElement', () => {
   let TestUtilsAct;
   let TestRendererAct;
 
+  let testRendererInstance;
+
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -61,6 +63,9 @@ describe('InspectedElement', () => {
       .StoreContext;
     TreeContextController = require('react-devtools-shared/src/devtools/views/Components/TreeContext')
       .TreeContextController;
+
+    // Used by inspectElementAtIndex() helper function
+    testRendererInstance = TestRenderer.create(null);
   });
 
   afterEach(() => {
@@ -87,16 +92,48 @@ describe('InspectedElement', () => {
     </BridgeContext.Provider>
   );
 
-  function useInspectedElement(id: number) {
+  function useInspectedElement() {
     const {inspectedElement} = React.useContext(InspectedElementContext);
     return inspectedElement;
   }
 
-  function useInspectElementPath(id: number) {
+  function useInspectElementPath() {
     const {inspectPaths} = React.useContext(InspectedElementContext);
     return inspectPaths;
   }
 
+  function noop() {}
+
+  async function inspectElementAtIndex(index, useCustomHook = noop) {
+    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(
+        <Contexts
+          defaultSelectedElementID={id}
+          defaultSelectedElementIndex={index}>
+          <React.Suspense fallback={null}>
+            <Suspender id={id} index={index} />
+          </React.Suspense>
+        </Contexts>,
+      );
+    }, false);
+
+    expect(didFinish).toBe(true);
+
+    return inspectedElement;
+  }
+
   it('should inspect the currently selected element', async done => {
     const Example = () => {
       const [count] = React.useState(1);
@@ -108,52 +145,29 @@ describe('InspectedElement', () => {
       ReactDOM.render(<Example a={1} b="abc" />, container),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let didFinish = false;
-
-    function Suspender({target}) {
-      const inspectedElement = useInspectedElement(id);
-      expect(inspectedElement).toMatchInlineSnapshot(`
-        Object {
-          "context": null,
-          "events": undefined,
-          "hooks": Array [
-            Object {
-              "id": 0,
-              "isStateEditable": true,
-              "name": "State",
-              "subHooks": Array [],
-              "value": 1,
-            },
-          ],
-          "id": 2,
-          "owners": null,
-          "props": Object {
-            "a": 1,
-            "b": "abc",
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": null,
+        "events": undefined,
+        "hooks": Array [
+          Object {
+            "id": 0,
+            "isStateEditable": true,
+            "name": "State",
+            "subHooks": Array [],
+            "value": 1,
           },
-          "state": null,
-        }
-      `);
-      didFinish = true;
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(didFinish).toBe(true);
+        ],
+        "id": 2,
+        "owners": null,
+        "props": Object {
+          "a": 1,
+          "b": "abc",
+        },
+        "state": null,
+      }
+    `);
 
     done();
   });
@@ -215,57 +229,42 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const ids = [
+    const cases = [
       {
         // <LegacyContextConsumer />
-        id: ((store.getElementIDAtIndex(1): any): number),
+        index: 1,
         shouldHaveLegacyContext: true,
       },
       {
         // <BoolContext.Consumer>
-        id: ((store.getElementIDAtIndex(2): any): number),
+        index: 2,
         shouldHaveLegacyContext: false,
       },
       {
         // <ModernContextType />
-        id: ((store.getElementIDAtIndex(3): any): number),
+        index: 3,
         shouldHaveLegacyContext: false,
       },
       {
         // <ModernContext.Consumer>
-        id: ((store.getElementIDAtIndex(5): any): number),
+        index: 5,
         shouldHaveLegacyContext: false,
       },
     ];
 
-    function Suspender({target, shouldHaveLegacyContext}) {
-      const inspectedElement = useInspectedElement(target);
+    for (let i = 0; i < cases.length; i++) {
+      const {index, shouldHaveLegacyContext} = cases[i];
 
-      expect(inspectedElement.context).not.toBe(null);
-      expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);
+      // HACK: Recreate TestRenderer instance because we rely on default state values
+      // from props like defaultSelectedElementID 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.
+      testRendererInstance = TestRenderer.create(null);
 
-      return null;
-    }
+      const inspectedElement = await inspectElementAtIndex(index);
 
-    for (let i = 0; i < ids.length; i++) {
-      const {id, shouldHaveLegacyContext} = ids[i];
-
-      await utils.actAsync(
-        () =>
-          TestRenderer.create(
-            <Contexts
-              defaultSelectedElementID={id}
-              defaultSelectedElementIndex={0}>
-              <React.Suspense fallback={null}>
-                <Suspender
-                  target={id}
-                  shouldHaveLegacyContext={shouldHaveLegacyContext}
-                />
-              </React.Suspense>
-            </Contexts>,
-          ),
-        false,
-      );
+      expect(inspectedElement.context).not.toBe(null);
+      expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);
     }
     done();
   });
@@ -279,26 +278,7 @@ describe('InspectedElement', () => {
       false,
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(id);
-      return null;
-    }
-
-    let renderer;
-
-    await utils.actAsync(() => {
-      renderer = TestRenderer.create(
-        <Contexts defaultSelectedElementID={id} defaultSelectedElementIndex={0}>
-          <React.Suspense fallback={null}>
-            <Suspender target={id} />
-          </React.Suspense>
-        </Contexts>,
-      );
-    }, false);
+    let inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "a": 1,
@@ -321,19 +301,7 @@ describe('InspectedElement', () => {
     jest.runOnlyPendingTimers();
     await Promise.resolve();
 
-    await utils.actAsync(
-      () =>
-        renderer.update(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "a": 2,
@@ -365,31 +333,9 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(1): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(target);
-      return null;
-    }
-
     targetRenderCount = 0;
 
-    let renderer;
-    await utils.actAsync(
-      () =>
-        (renderer = TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        )),
-      false,
-    );
+    let inspectedElement = await inspectElementAtIndex(1);
     expect(targetRenderCount).toBe(1);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
@@ -398,28 +344,14 @@ describe('InspectedElement', () => {
       }
     `);
 
-    const initialInspectedElement = inspectedElement;
+    const prevInspectedElement = inspectedElement;
 
     targetRenderCount = 0;
-    inspectedElement = null;
-    await utils.actAsync(
-      () =>
-        renderer.update(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    inspectedElement = await inspectElementAtIndex(1);
     expect(targetRenderCount).toBe(0);
-    expect(inspectedElement).toEqual(initialInspectedElement);
+    expect(inspectedElement).toEqual(prevInspectedElement);
 
     targetRenderCount = 0;
-    inspectedElement = null;
 
     await utils.actAsync(
       () =>
@@ -433,19 +365,7 @@ describe('InspectedElement', () => {
     );
 
     // Target should have been rendered once (by ReactDOM) and once by DevTools for inspection.
-    await utils.actAsync(
-      () =>
-        renderer.update(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    inspectedElement = await inspectElementAtIndex(1);
     expect(targetRenderCount).toBe(2);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
@@ -490,28 +410,7 @@ describe('InspectedElement', () => {
     expect(console.warn).toHaveBeenCalledTimes(1);
     expect(console.warn).toHaveBeenCalledWith('warn');
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(target);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={1}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    const inspectedElement = await inspectElementAtIndex(0);
 
     expect(inspectedElement).not.toBe(null);
     expect(targetRenderCount).toBe(2);
@@ -546,27 +445,7 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(id);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    const inspectedElement = await inspectElementAtIndex(0);
 
     const {props} = (inspectedElement: any);
     expect(props.boolean_false).toBe(false);
@@ -665,28 +544,7 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(id);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    const inspectedElement = await inspectElementAtIndex(0);
 
     const {
       anonymous_fn,
@@ -875,28 +733,7 @@ describe('InspectedElement', () => {
       ReactDOM.render(<Example prop={iterable} />, container),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(id);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    const inspectedElement = await inspectElementAtIndex(0);
 
     const {prop} = (inspectedElement: any).props;
     expect(prop[meta.inspectable]).toBe(false);
@@ -921,29 +758,7 @@ describe('InspectedElement', () => {
       ReactDOM.render(<Example object={object} />, container),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(id);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-
+    const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "object": Object {
@@ -970,28 +785,7 @@ describe('InspectedElement', () => {
       ReactDOM.render(<Example object={object} />, container),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(id);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    const inspectedElement = await inspectElementAtIndex(0);
 
     // TRICKY: Don't use toMatchInlineSnapshot() for this test!
     // Our snapshot serializer relies on hasOwnProperty() for feature detection.
@@ -1026,38 +820,15 @@ describe('InspectedElement', () => {
       ReactDOM.render(<Example data={new CustomData()} />, container),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let didFinish = false;
-
-    function Suspender({target}) {
-      const inspectedElement = useInspectedElement(id);
-      expect(inspectedElement.props).toMatchInlineSnapshot(`
-        Object {
-          "data": Object {
-            "_number": 42,
-            "number": 42,
-          },
-        }
-      `);
-      didFinish = true;
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(didFinish).toBe(true);
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "data": Object {
+          "_number": 42,
+          "number": 42,
+        },
+      }
+    `);
 
     done();
   });
@@ -1130,29 +901,7 @@ describe('InspectedElement', () => {
       ReactDOM.render(<Example object={object} />, container),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(id);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-
+    const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "object": Object {
@@ -1193,44 +942,23 @@ describe('InspectedElement', () => {
           value: NaN,
           writable: true,
           enumerable: true,
-          configurable: true,
-        },
-        d: {
-          value: 'normal',
-          writable: true,
-          enumerable: true,
-          configurable: true,
-        },
-      },
-    );
-    const Example = ({data}) => null;
-    const container = document.createElement('div');
-    await utils.actAsync(() =>
-      ReactDOM.render(<Example data={testData} />, container),
-    );
-
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let inspectedElement = null;
-
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(target);
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
+          configurable: true,
+        },
+        d: {
+          value: 'normal',
+          writable: true,
+          enumerable: true,
+          configurable: true,
+        },
+      },
+    );
+    const Example = ({data}) => null;
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example data={testData} />, container),
     );
+
+    const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "data": Object {
@@ -1280,37 +1008,13 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
     let inspectedElement = null;
     let inspectElementPath = null;
 
-    function Suspender({path, target}) {
-      inspectedElement = useInspectedElement(id);
-      inspectElementPath = useInspectElementPath(id);
-      return null;
-    }
-
-    const renderer = TestRenderer.create(null);
-
-    async function getInspectedElement() {
-      await utils.actAsync(
-        () =>
-          renderer.update(
-            <Contexts
-              defaultSelectedElementID={id}
-              defaultSelectedElementIndex={0}>
-              <React.Suspense fallback={null}>
-                <Suspender target={id} />
-              </React.Suspense>
-            </Contexts>,
-          ),
-        false,
-      );
-    }
-
     // Render once to get a handle on inspectElementPath()
-    await getInspectedElement();
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
 
     async function loadPath(path) {
       TestUtilsAct(() => {
@@ -1319,7 +1023,8 @@ describe('InspectedElement', () => {
           jest.runOnlyPendingTimers();
         });
       });
-      await getInspectedElement();
+
+      inspectedElement = await inspectElementAtIndex(0);
     }
 
     expect(inspectedElement.props).toMatchInlineSnapshot(`
@@ -1448,37 +1153,13 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
     let inspectedElement = null;
     let inspectElementPath = null;
 
-    function Suspender({path, target}) {
-      inspectedElement = useInspectedElement(id);
-      inspectElementPath = useInspectElementPath(id);
-      return null;
-    }
-
-    const renderer = TestRenderer.create(null);
-
-    async function getInspectedElement() {
-      await utils.actAsync(
-        () =>
-          renderer.update(
-            <Contexts
-              defaultSelectedElementID={id}
-              defaultSelectedElementIndex={0}>
-              <React.Suspense fallback={null}>
-                <Suspender target={id} />
-              </React.Suspense>
-            </Contexts>,
-          ),
-        false,
-      );
-    }
-
     // Render once to get a handle on inspectElementPath()
-    await getInspectedElement();
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
 
     async function loadPath(path) {
       TestUtilsAct(() => {
@@ -1487,7 +1168,8 @@ describe('InspectedElement', () => {
           jest.runOnlyPendingTimers();
         });
       });
-      await getInspectedElement();
+
+      inspectedElement = await inspectElementAtIndex(0);
     }
 
     expect(inspectedElement.props).toMatchInlineSnapshot(`
@@ -1556,37 +1238,13 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
     let inspectedElement = null;
     let inspectElementPath = null;
 
-    function Suspender({path, target}) {
-      inspectedElement = useInspectedElement(id);
-      inspectElementPath = useInspectElementPath(id);
-      return null;
-    }
-
-    const renderer = TestRenderer.create(null);
-
-    async function getInspectedElement() {
-      await utils.actAsync(
-        () =>
-          renderer.update(
-            <Contexts
-              defaultSelectedElementID={id}
-              defaultSelectedElementIndex={0}>
-              <React.Suspense fallback={null}>
-                <Suspender target={id} />
-              </React.Suspense>
-            </Contexts>,
-          ),
-        false,
-      );
-    }
-
     // Render once to get a handle on inspectElementPath()
-    await getInspectedElement();
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
 
     async function loadPath(path) {
       TestUtilsAct(() => {
@@ -1595,7 +1253,8 @@ describe('InspectedElement', () => {
           jest.runOnlyPendingTimers();
         });
       });
-      await getInspectedElement();
+
+      inspectedElement = await inspectElementAtIndex(0);
     }
 
     expect(inspectedElement.props).toMatchInlineSnapshot(`
@@ -1690,7 +1349,7 @@ describe('InspectedElement', () => {
     // Wait for pending poll-for-update and then update inspected element data.
     jest.runOnlyPendingTimers();
     await Promise.resolve();
-    await getInspectedElement();
+    inspectedElement = await inspectElementAtIndex(0);
 
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
@@ -1739,37 +1398,13 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
     let inspectedElement = null;
     let inspectElementPath = null;
 
-    function Suspender({path, target}) {
-      inspectedElement = useInspectedElement(id);
-      inspectElementPath = useInspectElementPath(id);
-      return null;
-    }
-
-    const renderer = TestRenderer.create(null);
-
-    async function getInspectedElement() {
-      await utils.actAsync(
-        () =>
-          renderer.update(
-            <Contexts
-              defaultSelectedElementID={id}
-              defaultSelectedElementIndex={0}>
-              <React.Suspense fallback={null}>
-                <Suspender target={id} />
-              </React.Suspense>
-            </Contexts>,
-          ),
-        false,
-      );
-    }
-
     // Render once to get a handle on inspectElementPath()
-    await getInspectedElement();
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
 
     async function loadPath(path) {
       TestUtilsAct(() => {
@@ -1778,7 +1413,8 @@ describe('InspectedElement', () => {
           jest.runOnlyPendingTimers();
         });
       });
-      await getInspectedElement();
+
+      inspectedElement = await inspectElementAtIndex(0);
     }
 
     expect(inspectedElement.props).toMatchInlineSnapshot(`
@@ -1841,52 +1477,29 @@ describe('InspectedElement', () => {
       ReactDOM.render(<Example a={1} b="abc" />, container),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
-    let didFinish = false;
-
-    function Suspender({target}) {
-      const inspectedElement = useInspectedElement(id);
-      expect(inspectedElement).toMatchInlineSnapshot(`
-        Object {
-          "context": null,
-          "events": undefined,
-          "hooks": Array [
-            Object {
-              "id": null,
-              "isStateEditable": false,
-              "name": "Context",
-              "subHooks": Array [],
-              "value": true,
-            },
-          ],
-          "id": 2,
-          "owners": null,
-          "props": Object {
-            "a": 1,
-            "b": "abc",
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": null,
+        "events": undefined,
+        "hooks": Array [
+          Object {
+            "id": null,
+            "isStateEditable": false,
+            "name": "Context",
+            "subHooks": Array [],
+            "value": true,
           },
-          "state": null,
-        }
-      `);
-      didFinish = true;
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(didFinish).toBe(true);
+        ],
+        "id": 2,
+        "owners": null,
+        "props": Object {
+          "a": 1,
+          "b": "abc",
+        },
+        "state": null,
+      }
+    `);
 
     done();
   });
@@ -1913,46 +1526,30 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
     let storeAsGlobal: StoreAsGlobal = ((null: any): StoreAsGlobal);
 
-    function Suspender({target}) {
-      storeAsGlobal = (elementID: number, path: Array<string | number>) => {
-        const rendererID = store.getRendererIDForElement(elementID);
+    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: elementID,
+            id,
             path,
             rendererID,
           });
         }
       };
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    });
 
     jest.spyOn(console, 'log').mockImplementation(() => {});
 
     // Should store the whole value (not just the hydrated parts)
-    storeAsGlobal(id, ['props', 'nestedObject']);
+    storeAsGlobal(['props', 'nestedObject']);
     jest.runOnlyPendingTimers();
     expect(console.log).toHaveBeenCalledWith('$reactTemp0');
     expect(global.$reactTemp0).toBe(nestedObject);
@@ -1960,7 +1557,7 @@ describe('InspectedElement', () => {
     console.log.mockReset();
 
     // Should store the nested property specified (not just the outer value)
-    storeAsGlobal(id, ['props', 'nestedObject', 'a', 'b']);
+    storeAsGlobal(['props', 'nestedObject', 'a', 'b']);
     jest.runOnlyPendingTimers();
     expect(console.log).toHaveBeenCalledWith('$reactTemp1');
     expect(global.$reactTemp1).toBe(nestedObject.a.b);
@@ -1990,45 +1587,28 @@ describe('InspectedElement', () => {
       ),
     );
 
-    const id = ((store.getElementIDAtIndex(0): any): number);
-
     let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
 
-    function Suspender({target}) {
-      copyPath = (elementID: number, path: Array<string | number>) => {
-        const rendererID = store.getRendererIDForElement(elementID);
+    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: elementID,
+            id,
             path,
             rendererID,
           });
         }
       };
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(copyPath).not.toBeNull();
+    });
 
     // Should copy the whole value (not just the hydrated parts)
-    copyPath(id, ['props', 'nestedObject']);
+    copyPath(['props', 'nestedObject']);
     jest.runOnlyPendingTimers();
     expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
@@ -2038,7 +1618,7 @@ describe('InspectedElement', () => {
     global.mockClipboardCopy.mockReset();
 
     // Should copy the nested property specified (not just the outer value)
-    copyPath(id, ['props', 'nestedObject', 'a', 'b']);
+    copyPath(['props', 'nestedObject', 'a', 'b']);
     jest.runOnlyPendingTimers();
     expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
@@ -2098,48 +1678,32 @@ describe('InspectedElement', () => {
 
     let copyPath: CopyInspectedElementPath = ((null: any): CopyInspectedElementPath);
 
-    function Suspender({target}) {
-      copyPath = (elementID: number, path: Array<string | number>) => {
-        const rendererID = store.getRendererIDForElement(elementID);
+    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: elementID,
+            id,
             path,
             rendererID,
           });
         }
       };
-      return null;
-    }
-
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={id}
-            defaultSelectedElementIndex={0}>
-            <React.Suspense fallback={null}>
-              <Suspender target={id} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
-    expect(copyPath).not.toBeNull();
+    });
 
     // Should copy the whole value (not just the hydrated parts)
-    copyPath(id, ['props']);
+    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(id, ['props', 'bigInt']);
+    copyPath(['props', 'bigInt']);
     jest.runOnlyPendingTimers();
     expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
@@ -2149,7 +1713,7 @@ describe('InspectedElement', () => {
     global.mockClipboardCopy.mockReset();
 
     // Should copy the nested property specified (not just the outer value)
-    copyPath(id, ['props', 'typedArray']);
+    copyPath(['props', 'typedArray']);
     jest.runOnlyPendingTimers();
     expect(global.mockClipboardCopy).toHaveBeenCalledTimes(1);
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
@@ -2160,12 +1724,6 @@ describe('InspectedElement', () => {
   });
 
   it('should display complex values of useDebugValue', async done => {
-    let inspectedElement = null;
-    function Suspender({target}) {
-      inspectedElement = useInspectedElement(target);
-      return null;
-    }
-
     const container = document.createElement('div');
 
     function useDebuggableHook() {
@@ -2182,23 +1740,7 @@ describe('InspectedElement', () => {
       ReactDOM.render(<DisplayedComplexValue />, container),
     );
 
-    const ignoredComplexValueIndex = 0;
-    const ignoredComplexValueId = ((store.getElementIDAtIndex(
-      ignoredComplexValueIndex,
-    ): any): number);
-    await utils.actAsync(
-      () =>
-        TestRenderer.create(
-          <Contexts
-            defaultSelectedElementID={ignoredComplexValueId}
-            defaultSelectedElementIndex={ignoredComplexValueIndex}>
-            <React.Suspense fallback={null}>
-              <Suspender target={ignoredComplexValueId} />
-            </React.Suspense>
-          </Contexts>,
-        ),
-      false,
-    );
+    const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.hooks).toMatchInlineSnapshot(`
       Array [
         Object {
@@ -2224,6 +1766,145 @@ describe('InspectedElement', () => {
     done();
   });
 
+  describe('$r', () => {
+    it('should support function components', async done => {
+      const Example = () => {
+        const [count] = React.useState(1);
+        return count;
+      };
+
+      const container = document.createElement('div');
+      await utils.actAsync(() =>
+        ReactDOM.render(<Example a={1} b="abc" />, container),
+      );
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r).toMatchInlineSnapshot(`
+        Object {
+          "hooks": Array [
+            Object {
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": Array [],
+              "value": 1,
+            },
+          ],
+          "props": Object {
+            "a": 1,
+            "b": "abc",
+          },
+          "type": [Function],
+        }
+      `);
+
+      done();
+    });
+
+    it('should support memoized function components', async done => {
+      const Example = React.memo(function Example(props) {
+        const [count] = React.useState(1);
+        return count;
+      });
+
+      const container = document.createElement('div');
+      await utils.actAsync(() =>
+        ReactDOM.render(<Example a={1} b="abc" />, container),
+      );
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r).toMatchInlineSnapshot(`
+        Object {
+          "hooks": Array [
+            Object {
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": Array [],
+              "value": 1,
+            },
+          ],
+          "props": Object {
+            "a": 1,
+            "b": "abc",
+          },
+          "type": [Function],
+        }
+      `);
+
+      done();
+    });
+
+    it('should support forward refs', async done => {
+      const Example = React.forwardRef(function Example(props, ref) {
+        const [count] = React.useState(1);
+        return count;
+      });
+
+      const container = document.createElement('div');
+      await utils.actAsync(() =>
+        ReactDOM.render(<Example a={1} b="abc" />, container),
+      );
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r).toMatchInlineSnapshot(`
+        Object {
+          "hooks": Array [
+            Object {
+              "id": 0,
+              "isStateEditable": true,
+              "name": "State",
+              "subHooks": Array [],
+              "value": 1,
+            },
+          ],
+          "props": Object {
+            "a": 1,
+            "b": "abc",
+          },
+          "type": [Function],
+        }
+      `);
+
+      done();
+    });
+
+    it('should support class components', async done => {
+      class Example extends React.Component {
+        state = {
+          count: 0,
+        };
+        render() {
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      await utils.actAsync(() =>
+        ReactDOM.render(<Example a={1} b="abc" />, container),
+      );
+
+      await inspectElementAtIndex(0);
+
+      expect(global.$r.props).toMatchInlineSnapshot(`
+      Object {
+        "a": 1,
+        "b": "abc",
+      }
+      `);
+      expect(global.$r.state).toMatchInlineSnapshot(`
+      Object {
+        "count": 0,
+      }
+      `);
+
+      done();
+    });
+  });
+
   describe('inline errors and warnings', () => {
     // Some actions require the Fiber id.
     // In those instances you might want to make assertions based on the ID instead of the index.
@@ -2239,7 +1920,7 @@ describe('InspectedElement', () => {
       let warnings = null;
 
       function Suspender({target}) {
-        const inspectedElement = useInspectedElement(id);
+        const inspectedElement = useInspectedElement();
         errors = inspectedElement.errors;
         warnings = inspectedElement.warnings;
         return null;

From fb3f63f1ab6e9ebf25ddce74a19d975ef410d4f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 25 Jan 2021 16:04:36 -0500
Subject: [PATCH 0201/1603] Remove lazy invokation of segments (#20656)

This is a remainder from Blocks when these were separate query functions.
---
 packages/react-server/src/ReactFlightServer.js | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index ffbc13edaf60..2e7d48ad7ca1 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -67,7 +67,7 @@ type ReactModelObject = {+[key: string]: ReactModel};
 
 type Segment = {
   id: number,
-  query: () => ReactModel,
+  model: ReactModel,
   ping: () => void,
 };
 
@@ -113,7 +113,7 @@ export function createRequest(
     },
   };
   request.pendingChunks++;
-  const rootSegment = createSegment(request, () => model);
+  const rootSegment = createSegment(request, model);
   pingedSegments.push(rootSegment);
   return request;
 }
@@ -180,11 +180,11 @@ function pingSegment(request: Request, segment: Segment): void {
   }
 }
 
-function createSegment(request: Request, query: () => ReactModel): Segment {
+function createSegment(request: Request, model: ReactModel): Segment {
   const id = request.nextChunkId++;
   const segment = {
     id,
-    query,
+    model,
     ping: () => pingSegment(request, segment),
   };
   return segment;
@@ -408,7 +408,7 @@ export function resolveModelToJSON(
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
         request.pendingChunks++;
-        const newSegment = createSegment(request, () => value);
+        const newSegment = createSegment(request, value);
         const ping = newSegment.ping;
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
@@ -625,10 +625,8 @@ function emitSymbolChunk(request: Request, id: number, name: string): void {
 }
 
 function retrySegment(request: Request, segment: Segment): void {
-  const query = segment.query;
-  let value;
   try {
-    value = query();
+    let value = segment.model;
     while (
       typeof value === 'object' &&
       value !== null &&
@@ -639,7 +637,7 @@ function retrySegment(request: Request, segment: Segment): void {
       // Attempt to render the server component.
       // Doing this here lets us reuse this same segment if the next component
       // also suspends.
-      segment.query = () => value;
+      segment.model = value;
       value = attemptResolveElement(
         element.type,
         element.key,

From a511dc7090523ee49ce21a08e55c41917d8af311 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 25 Jan 2021 16:58:47 -0500
Subject: [PATCH 0202/1603] Error for deferred value and transition in Server
 Components (#20657)

---
 packages/react-server/src/ReactFlightServer.js | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 2e7d48ad7ca1..b80798cd66f4 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -773,12 +773,8 @@ const Dispatcher: DispatcherType = {
     return callback;
   },
   useDebugValue(): void {},
-  useDeferredValue<T>(value: T): T {
-    return value;
-  },
-  useTransition(): [(callback: () => void) => void, boolean] {
-    return [() => {}, false];
-  },
+  useDeferredValue: (unsupportedHook: any),
+  useTransition: (unsupportedHook: any),
   getCacheForType<T>(resourceType: () => T): T {
     invariant(
       currentCache,

From db5945efee7cffae0a4d6c9fa4e08deec2f49e40 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 26 Jan 2021 12:17:56 -0800
Subject: [PATCH 0203/1603] Set default release channel for
 download-experimental-build script (#20663)

---
 scripts/release/download-experimental-build.js |  8 +++++++-
 scripts/release/utils.js                       | 16 ++++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
index 97ba2d1bc32a..75080554c9d9 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -3,7 +3,11 @@
 'use strict';
 
 const {join} = require('path');
-const {getPublicPackages, handleError} = require('./utils');
+const {
+  addDefaultParamValue,
+  getPublicPackages,
+  handleError,
+} = require('./utils');
 
 const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
 const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
@@ -13,6 +17,8 @@ const printSummary = require('./download-experimental-build-commands/print-summa
 
 const run = async () => {
   try {
+    addDefaultParamValue('-r', '--releaseChannel', 'experimental');
+
     const params = parseParams();
     params.cwd = join(__dirname, '..', '..');
     params.packages = await getPublicPackages(true);
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index 52731d4376e0..f49471ad76f5 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -17,6 +17,21 @@ const logger = createLogger({
   storagePath: join(__dirname, '.progress-estimator'),
 });
 
+const addDefaultParamValue = (shortName, longName, defaultValue) => {
+  let found = false;
+  for (let i = 0; i < process.argv.length; i++) {
+    const current = process.argv[i];
+    if (current === shortName || current.startsWith(`${longName}=`)) {
+      found = true;
+      break;
+    }
+  }
+
+  if (!found) {
+    process.argv.push(shortName, defaultValue);
+  }
+};
+
 const confirm = async message => {
   const confirmation = await prompt(theme`\n{caution ${message}} (y/N) `);
   prompt.done();
@@ -249,6 +264,7 @@ const updateVersionsForNext = async (cwd, reactVersion, version) => {
 };
 
 module.exports = {
+  addDefaultParamValue,
   confirm,
   execRead,
   getArtifactsList,

From d13f5b9538e48f74f7c571ef3cde652ca887cca0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 26 Jan 2021 14:23:34 -0600
Subject: [PATCH 0204/1603] Experiment: Unsuspend all lanes on update (#20660)

Adds a feature flag to tweak the internal heuristic used to "unsuspend"
lanes when a new update comes in.

A lane is "suspended" if we couldn't finish rendering it because it was
missing data, and we chose not to commit the fallback. (In this context,
"suspended" does not include updates that finished with a fallback.)

When we receive new data in the form of an update, we need to retry
rendering the suspended lanes, since the new data may have unblocked the
previously suspended work. For example, the new update could navigate
back to an already loaded route.

It's impractical to retry every combination of suspended lanes, so we
need some heuristic that decides which lanes to retry and in
which order.

The existing heuristic roughly approximates the old Expiration Times
model. It unsuspends all lower priority lanes, but leaves higher
priority lanes suspended.

Then when we start rendering, we choose the lanes that have the highest
LanePriority and render those -- and then we add to that all the lanes
that are highher priority.

If this sounds terribly confusing, it's because it barely makes sense.
(It made more sense in the Expiration Times world, I promise, but it
was still confusing.) I don't think it's worth me trying to explain the
old behavior too much because the point here is that we can replace it
with something simpler.

The new heurstic is to unsuspend all suspended lanes whenever there's
an update.

This is effectively what we already do except in a few very specific
edge cases, ever since we removed the delayed suspense feature from
everything that's not a refresh transition.

We can optimize this in the future to only unsuspend lanes that are
either 1) in the `lanes` or `subtreeLanes` of the node that was updated,
or 2) in the `lanes` of the return path of the node that was updated.
This would exclude lanes that are only located in unrelated sibling
trees. But, this optimization wouldn't be useful currently because we
assign the same transition lane to all transitions. It will become
relevant again once we start assigning arbitrary lanes to transitions
-- but that in turn requires us to implement entanglement of overlapping
transitions, one of our planned projects.

So to sum up: the goal here is to remove the weird edge cases and switch
to a simpler model, on top of which we can make more substantial
improvements.

I put it behind a flag so I can run an A/B test and confirm it doesn't
cause a regression.
---
 .../src/ReactFiberLane.new.js                 | 40 ++++++++++++++++---
 .../src/ReactFiberLane.old.js                 | 40 ++++++++++++++++---
 .../src/__tests__/ReactExpiration-test.js     | 20 ++++++----
 .../src/__tests__/ReactSuspenseList-test.js   | 37 ++++++-----------
 packages/shared/ReactFeatureFlags.js          |  3 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 14 files changed, 106 insertions(+), 43 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 351035d0c341..4570c10a62b4 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -36,7 +36,10 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableTransitionEntanglement,
+} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -306,9 +309,15 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     return NoLanes;
   }
 
-  // If there are higher priority lanes, we'll include them even if they
-  // are suspended.
-  nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes);
+  if (enableTransitionEntanglement) {
+    // We don't need to include higher priority lanes, because in this
+    // experiment we always unsuspend all transitions whenever we receive
+    // an update.
+  } else {
+    // If there are higher priority lanes, we'll include them even if they
+    // are suspended.
+    nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes);
+  }
 
   // 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
@@ -673,8 +682,27 @@ export function markRootUpdated(
   // Unsuspend any update at equal or lower priority.
   const higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
 
-  root.suspendedLanes &= higherPriorityLanes;
-  root.pingedLanes &= higherPriorityLanes;
+  if (enableTransitionEntanglement) {
+    // 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 & IdleLanes) === NoLanes) {
+      root.suspendedLanes = NoLanes;
+      root.pingedLanes = NoLanes;
+    }
+  } else {
+    root.suspendedLanes &= higherPriorityLanes;
+    root.pingedLanes &= higherPriorityLanes;
+  }
 
   const eventTimes = root.eventTimes;
   const index = laneToIndex(updateLane);
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 7a00fe095e6c..7be355d2c245 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -36,7 +36,10 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableTransitionEntanglement,
+} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -306,9 +309,15 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     return NoLanes;
   }
 
-  // If there are higher priority lanes, we'll include them even if they
-  // are suspended.
-  nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes);
+  if (enableTransitionEntanglement) {
+    // We don't need to include higher priority lanes, because in this
+    // experiment we always unsuspend all transitions whenever we receive
+    // an update.
+  } else {
+    // If there are higher priority lanes, we'll include them even if they
+    // are suspended.
+    nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes);
+  }
 
   // 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
@@ -673,8 +682,27 @@ export function markRootUpdated(
   // Unsuspend any update at equal or lower priority.
   const higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
 
-  root.suspendedLanes &= higherPriorityLanes;
-  root.pingedLanes &= higherPriorityLanes;
+  if (enableTransitionEntanglement) {
+    // 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 & IdleLanes) === NoLanes) {
+      root.suspendedLanes = NoLanes;
+      root.pingedLanes = NoLanes;
+    }
+  } else {
+    root.suspendedLanes &= higherPriorityLanes;
+    root.pingedLanes &= higherPriorityLanes;
+  }
 
   const eventTimes = root.eventTimes;
   const index = laneToIndex(updateLane);
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 1b4433670974..fd224b2a1f81 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -733,13 +733,19 @@ describe('ReactExpiration', () => {
       // Both normal pri updates should have expired.
       expect(Scheduler).toFlushExpired([
         'Sibling',
-        // Note: we also flushed the high pri update here, because in the
-        // current implementation, once we pick the next lanes to work on, we
-        // entangle it with all pending at equal or higher priority. We could
-        // feasibly change this heuristic so that the high pri update doesn't
-        // render until after the expired updates have finished. But the
-        // important thing in this test is that the normal updates expired.
-        'High pri: 1',
+        gate(flags => flags.enableTransitionEntanglement)
+          ? // Notice that the high pri update didn't flush yet. Expiring one lane
+            // doesn't affect other lanes. (Unless they are intentionally
+            // entangled, like we do for overlapping transitions that affect the
+            // same state.)
+            'High pri: 0'
+          : // In the current implementation, once we pick the next lanes to work
+            // on, we entangle it with all pending at equal or higher priority.
+            // We could feasibly change this heuristic so that the high pri
+            // update doesn't render until after the expired updates have
+            // finished. But the important thing in this test is that the normal
+            // updates expired.
+            'High pri: 1',
         'Normal pri: 2',
         'Sibling',
       ]);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index c45a10c99d6d..de74c18e5ca6 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -2443,7 +2443,7 @@ describe('ReactSuspenseList', () => {
 
     expect(ReactNoop).toMatchRenderedOutput(null);
 
-    ReactNoop.act(() => {
+    await ReactNoop.act(async () => {
       // Add a few items at the end.
       updateLowPri(true);
 
@@ -2451,33 +2451,22 @@ describe('ReactSuspenseList', () => {
       expect(Scheduler).toFlushAndYieldThrough(['B', 'C']);
 
       // Schedule another update at higher priority.
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => updateHighPri(true),
-      );
+      ReactNoop.flushSync(() => updateHighPri(true));
 
       // That will intercept the previous render.
-    });
+      expect(Scheduler).toHaveYielded([
+        'Suspend! [A]',
+        'Loading A',
+        // Re-render at forced.
+        'Suspend! [A]',
+        'Loading A',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span>Loading A</span>);
 
-    jest.runAllTimers();
-
-    expect(Scheduler).toHaveYielded([
-      // First attempt at high pri.
-      'Suspend! [A]',
-      'Loading A',
-      // Re-render at forced.
-      'Suspend! [A]',
-      'Loading A',
-      // We auto-commit this on DEV.
       // Try again on low-pri.
-      'Suspend! [A]',
-      'Loading A',
-      // Re-render at forced.
-      'Suspend! [A]',
-      'Loading A',
-    ]);
-
-    expect(ReactNoop).toMatchRenderedOutput(<span>Loading A</span>);
+      expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A']);
+      expect(ReactNoop).toMatchRenderedOutput(<span>Loading A</span>);
+    });
 
     await AsyncA.resolve();
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 8611a9da06bc..e09482a525ac 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -149,3 +149,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
+
+// Experiment to simplify/improve how transitions are scheduled
+export const enableTransitionEntanglement = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 0fd02c2fd3f1..494cae50c8b4 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableTransitionEntanglement = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index c76048a8b2b4..6c4616798eb3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableTransitionEntanglement = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 447d77effbc4..3971598060d5 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableTransitionEntanglement = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 6a6d8f39c59b..0d31d83b657f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableTransitionEntanglement = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 56e7dde89dfb..f0479741a570 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableTransitionEntanglement = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 537c3fbf1c09..3c2da8f5fc9d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableTransitionEntanglement = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 24dd55704700..26eda01b2a24 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
+export const enableTransitionEntanglement = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index cf858b767cc3..e6cbe5c387f5 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -55,3 +55,4 @@ export const enableUseRefAccessWarning = __VARIANT__;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
+export const enableTransitionEntanglement = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 85ce6eca5728..f39c8bee578e 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,6 +31,7 @@ export const {
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
+  enableTransitionEntanglement,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 9c32622cf04e70dd40463ece25e83b7cc311b0ed Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 26 Jan 2021 19:15:06 -0500
Subject: [PATCH 0205/1603] Improve tests that use discrete events (#20667)

---
 .../src/__tests__/ReactDOMHooks-test.js       | 17 ++--
 .../src/__tests__/ReactTestUtilsAct-test.js   |  8 +-
 .../__tests__/ChangeEventPlugin-test.js       |  2 +-
 .../__tests__/SimpleEventPlugin-test.js       | 20 ++--
 ...tIncrementalErrorHandling-test.internal.js | 51 ++++++-----
 .../ReactSuspenseWithNoopRenderer-test.js     | 91 +++++++++----------
 .../useMutableSource-test.internal.js         |  9 +-
 .../src/__tests__/ReactFresh-test.js          | 15 ++-
 8 files changed, 114 insertions(+), 99 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
index 59ec9dd4f7a9..faf182236f6a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -12,6 +12,7 @@
 let React;
 let ReactDOM;
 let Scheduler;
+let act;
 
 describe('ReactDOMHooks', () => {
   let container;
@@ -22,6 +23,7 @@ describe('ReactDOMHooks', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
+    act = require('react-dom/test-utils').unstable_concurrentAct;
 
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -106,7 +108,7 @@ describe('ReactDOMHooks', () => {
   });
 
   // @gate experimental
-  it('should not bail out when an update is scheduled from within an event handler in Concurrent Mode', () => {
+  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}) => {
@@ -132,11 +134,14 @@ describe('ReactDOMHooks', () => {
     Scheduler.unstable_flushAll();
 
     inputRef.current.value = 'abc';
-    inputRef.current.dispatchEvent(
-      new Event('input', {bubbles: true, cancelable: true}),
-    );
-
-    Scheduler.unstable_flushAll();
+    await act(async () => {
+      inputRef.current.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
 
     expect(labelRef.current.innerHTML).toBe('abc');
   });
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 4067df79f372..57807679e8eb 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -187,7 +187,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(Scheduler).toHaveYielded([100]);
       });
 
-      it('flushes effects on every call', () => {
+      it('flushes effects on every call', async () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
           React.useEffect(() => {
@@ -209,16 +209,16 @@ function runActTests(label, render, unmount, rerender) {
           button.dispatchEvent(new MouseEvent('click', {bubbles: true}));
         }
 
-        act(() => {
+        await act(async () => {
           click();
           click();
           click();
         });
         // it consolidates the 3 updates, then fires the effect
         expect(Scheduler).toHaveYielded([3]);
-        act(click);
+        await act(async () => click());
         expect(Scheduler).toHaveYielded([4]);
-        act(click);
+        await act(async () => click());
         expect(Scheduler).toHaveYielded([5]);
         expect(button.innerHTML).toBe('5');
       });
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 041231cac30c..2a806b2888c1 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -685,7 +685,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     // @gate experimental
-    it('is async for non-input events', () => {
+    it('is async for non-input events', async () => {
       const root = ReactDOM.unstable_createRoot(container);
       let input;
 
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 92ee2e369315..0579e9571cbc 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -13,6 +13,7 @@ describe('SimpleEventPlugin', function() {
   let React;
   let ReactDOM;
   let Scheduler;
+  let TestUtils;
 
   let onClick;
   let container;
@@ -39,6 +40,7 @@ describe('SimpleEventPlugin', function() {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
+    TestUtils = require('react-dom/test-utils');
 
     onClick = jest.fn();
   });
@@ -314,7 +316,7 @@ describe('SimpleEventPlugin', function() {
     });
 
     // @gate experimental
-    it('end result of many interactive updates is deterministic', () => {
+    it('end result of many interactive updates is deterministic', async () => {
       container = document.createElement('div');
       const root = ReactDOM.unstable_createRoot(container);
       document.body.appendChild(container);
@@ -361,12 +363,14 @@ describe('SimpleEventPlugin', function() {
       expect(button.textContent).toEqual('Count: 0');
 
       // Click the button many more times
-      click();
-      click();
-      click();
-      click();
-      click();
-      click();
+      await TestUtils.act(async () => {
+        click();
+        click();
+        click();
+        click();
+        click();
+        click();
+      });
 
       // Flush the remaining work
       Scheduler.unstable_flushAll();
@@ -375,7 +379,7 @@ describe('SimpleEventPlugin', function() {
     });
 
     // @gate experimental
-    it('flushes discrete updates in order', () => {
+    it('flushes discrete updates in order', async () => {
       container = document.createElement('div');
       document.body.appendChild(container);
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 06668b4eb389..4cdb4410ba59 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -232,7 +232,8 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
   });
 
-  it("retries at a lower priority if there's additional pending work", () => {
+  // @gate experimental
+  it("retries at a lower priority if there's additional pending work", async () => {
     function App(props) {
       if (props.isBroken) {
         Scheduler.unstable_yieldValue('error');
@@ -252,14 +253,14 @@ describe('ReactIncrementalErrorHandling', () => {
       });
     }
 
-    ReactNoop.discreteUpdates(() => {
-      ReactNoop.render(<App isBroken={true} />, onCommit);
-    });
+    ReactNoop.render(<App isBroken={true} />, onCommit);
     expect(Scheduler).toFlushAndYieldThrough(['error']);
     interrupt();
 
-    // This update is in a separate batch
-    ReactNoop.render(<App isBroken={false} />, onCommit);
+    React.unstable_startTransition(() => {
+      // This update is in a separate batch
+      ReactNoop.render(<App isBroken={false} />, onCommit);
+    });
 
     expect(Scheduler).toFlushAndYieldThrough([
       // The first render fails. But because there's a lower priority pending
@@ -311,16 +312,16 @@ describe('ReactIncrementalErrorHandling', () => {
       });
     }
 
-    ReactNoop.discreteUpdates(() => {
-      ReactNoop.render(<App isBroken={true} />, onCommit);
-    });
+    ReactNoop.render(<App isBroken={true} />, onCommit);
     expect(Scheduler).toFlushAndYieldThrough(['error']);
     interrupt();
 
     expect(ReactNoop).toMatchRenderedOutput(null);
 
-    // This update is in a separate batch
-    ReactNoop.render(<App isBroken={false} />, onCommit);
+    React.unstable_startTransition(() => {
+      // This update is in a separate batch
+      ReactNoop.render(<App isBroken={false} />, onCommit);
+    });
 
     expect(Scheduler).toFlushAndYieldThrough([
       // The first render fails. But because there's a lower priority pending
@@ -1786,6 +1787,7 @@ describe('ReactIncrementalErrorHandling', () => {
     });
   }
 
+  // @gate experimental
   it('uncaught errors should be discarded if the render is aborted', async () => {
     const root = ReactNoop.createRoot();
 
@@ -1795,22 +1797,24 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     await ReactNoop.act(async () => {
-      ReactNoop.discreteUpdates(() => {
-        root.render(<Oops />);
-      });
+      root.render(<Oops />);
+
       // Render past the component that throws, then yield.
       expect(Scheduler).toFlushAndYieldThrough(['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.
-      root.render('Everything is fine.');
+      React.unstable_startTransition(() => {
+        root.render('Everything is fine.');
+      });
     });
 
     // Should finish without throwing.
     expect(root).toMatchRenderedOutput('Everything is fine.');
   });
 
+  // @gate experimental
   it('uncaught errors are discarded if the render is aborted, case 2', async () => {
     const {useState} = React;
     const root = ReactNoop.createRoot();
@@ -1835,21 +1839,20 @@ describe('ReactIncrementalErrorHandling', () => {
     });
 
     await ReactNoop.act(async () => {
-      // Schedule a high pri and a low pri update on the root.
-      ReactNoop.discreteUpdates(() => {
-        root.render(<Oops />);
+      // Schedule a default pri and a low pri update on the root.
+      root.render(<Oops />);
+      React.unstable_startTransition(() => {
+        root.render(<AllGood />);
       });
-      root.render(<AllGood />);
-      // Render through just the high pri update. The low pri update remains on
+
+      // Render through just the default pri update. The low pri update remains on
       // the queue.
       expect(Scheduler).toFlushAndYieldThrough(['Everything is fine.']);
 
-      // Schedule a high pri update on a child that triggers an error.
+      // Schedule a default pri 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);
-      });
+      setShouldThrow(true);
     });
     // Should render the final state without throwing the error.
     expect(Scheduler).toHaveYielded(['Everything is fine.']);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 3fc2e8e573ba..5021c32c8b11 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -570,14 +570,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     }
 
-    // Schedule a high pri update and a low pri update, without rendering in
-    // between.
-    ReactNoop.discreteUpdates(() => {
-      // High pri
-      ReactNoop.render(<App />);
-    });
+    // Schedule a default pri update and a low pri update, without rendering in between.
+    // Default pri
+    ReactNoop.render(<App />);
     // Low pri
-    ReactNoop.render(<App hide={true} />);
+    React.unstable_startTransition(() => {
+      ReactNoop.render(<App hide={true} />);
+    });
 
     expect(Scheduler).toFlushAndYield([
       // The first update suspends
@@ -1879,9 +1878,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYield(['Foo']);
 
-    ReactNoop.discreteUpdates(() =>
-      ReactNoop.render(<Foo renderContent={true} />),
-    );
+    ReactNoop.render(<Foo renderContent={true} />);
     expect(Scheduler).toFlushAndYieldThrough(['Foo']);
 
     // Advance some time.
@@ -3080,48 +3077,48 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // Schedule an update inside the Suspense boundary that suspends.
         setAppText('B');
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
+      });
 
-        // Commit the placeholder
-        await advanceTimers(250);
-        expect(root).toMatchRenderedOutput(
-          <>
-            <span hidden={true} prop="A" />
-            <span prop="Loading..." />
-          </>,
-        );
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span prop="Loading..." />
+        </>,
+      );
 
-        // Schedule a high 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.{
-        ReactNoop.discreteUpdates(() => {
-          setAppText('C');
+      // 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 ReactNoop.act(async () => {
+        setAppText('C');
+        React.unstable_startTransition(() => {
+          setFallbackText('Still loading...');
         });
-        setFallbackText('Still loading...');
+      });
 
-        expect(Scheduler).toFlushAndYield([
-          // First try to render the high pri update. Still suspended.
-          'Suspend! [C]',
-          'Loading...',
+      expect(Scheduler).toHaveYielded([
+        // 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 *somehwere* 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...',
-        ]);
-        expect(root).toMatchRenderedOutput(
-          <>
-            <span hidden={true} prop="A" />
-            <span prop="Still 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 *somehwere* 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...',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span hidden={true} prop="A" />
+          <span prop="Still loading..." />
+        </>,
+      );
     },
   );
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index 9b0d868568e6..7ddaf5de7d19 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -1397,12 +1397,13 @@ describe('useMutableSource', () => {
       // Now mutate A. Both hooks should update.
       // This is at high priority so that it doesn't get batched with default
       // priority updates that might fire during the passive effect
-      ReactNoop.discreteUpdates(() => {
-        mutateA('a1');
+      await ReactNoop.act(async () => {
+        ReactNoop.discreteUpdates(() => {
+          mutateA('a1');
+        });
       });
-      expect(Scheduler).toFlushUntilNextPaint([]);
 
-      expect(root.getChildrenAsJSX()).toEqual('first: a1, second: a1');
+      expect(root).toMatchRenderedOutput('first: a1, second: a1');
     });
 
     expect(root.getChildrenAsJSX()).toEqual('first: a1, second: a1');
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 02295a8d98ec..3fa7a61442d7 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -2409,7 +2409,7 @@ describe('ReactFresh', () => {
     }
   });
 
-  it('can hot reload offscreen components', () => {
+  it('can hot reload offscreen components', async () => {
     if (__DEV__ && __EXPERIMENTAL__) {
       const AppV1 = prepare(() => {
         function Hello() {
@@ -2471,10 +2471,15 @@ describe('ReactFresh', () => {
       expect(el.firstChild.textContent).toBe('0');
       expect(el.firstChild.style.color).toBe('red');
 
-      el.firstChild.dispatchEvent(new MouseEvent('click', {bubbles: true}));
-      expect(el.firstChild.textContent).toBe('0');
-      expect(el.firstChild.style.color).toBe('red');
-      expect(Scheduler).toFlushAndYieldThrough(['Hello#layout']);
+      await act(async () => {
+        el.firstChild.dispatchEvent(
+          new MouseEvent('click', {
+            bubbles: true,
+          }),
+        );
+      });
+
+      expect(Scheduler).toHaveYielded(['Hello#layout']);
       expect(el.firstChild.textContent).toBe('1');
       expect(el.firstChild.style.color).toBe('red');
 

From e316f785526e503eceed1ae33b7a06440084b9c9 Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshua.gross@gmail.com>
Date: Tue, 26 Jan 2021 20:02:40 -0800
Subject: [PATCH 0206/1603] RN: Implement `sendAccessibilityEvent` in RN
 Renderer that proxies between Fabric/non-Fabric (#20554)

* RN: Implement `sendAccessibilityEvent` on HostComponent

Implement `sendAccessibilityEvent` on HostComponent for Fabric and non-Fabric RN.

Currently the Fabric version is a noop and non-Fabric uses
AccessibilityInfo directly. The Fabric version will be updated once
native Fabric Android/iOS support this method in the native UIManager.

* Move methods out of HostComponent

* Properly type dispatchCommand and sendAccessibilityEvent handle arg

* Implement Fabric side of sendAccessibilityEvent

* Add tests: 1. Fabric->Fabric, 2. Paper->Fabric, 3. Fabric->Paper, 4. Paper->Paper

* Fix typo: ReactFaricEventTouch -> ReactFabricEventTouch

* fix flow types

* prettier
---
 .../react-native-renderer/src/ReactFabric.js  | 29 ++++++++-
 .../src/ReactNativeRenderer.js                | 29 ++++++++-
 .../src/ReactNativeTypes.js                   | 30 +++++++--
 .../InitializeNativeFabricUIManager.js        |  2 +
 .../ReactNativePrivateInterface.js            |  3 +
 .../Libraries/ReactPrivate/UIManager.js       |  1 +
 .../legacySendAccessibilityEvent.js           | 10 +++
 .../__tests__/ReactFabric-test.internal.js    | 62 ++++++++++++++++++
 .../ReactFabricAndNative-test.internal.js     | 48 ++++++++++++++
 .../ReactNativeMount-test.internal.js         | 65 +++++++++++++++++++
 scripts/flow/react-native-host-hooks.js       |  5 ++
 11 files changed, 273 insertions(+), 11 deletions(-)
 create mode 100644 packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js

diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index b5567d035698..87fe4e8e2bf1 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -30,8 +30,11 @@ import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal
 import {setBatchingImplementation} from './legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
 
-// Module provided by RN:
-import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+// Modules provided by RN:
+import {
+  UIManager,
+  legacySendAccessibilityEvent,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {getClosestInstanceFromNode} from './ReactFabricComponentTree';
 import {
@@ -169,6 +172,27 @@ function dispatchCommand(handle: any, command: string, args: Array<any>) {
   }
 }
 
+function sendAccessibilityEvent(handle: any, eventType: string) {
+  if (handle._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;
+  }
+
+  if (handle._internalInstanceHandle) {
+    nativeFabricUIManager.sendAccessibilityEvent(
+      handle._internalInstanceHandle.stateNode.node,
+      eventType,
+    );
+  } else {
+    legacySendAccessibilityEvent(handle._nativeTag, eventType);
+  }
+}
+
 function render(
   element: React$Element<any>,
   containerTag: any,
@@ -224,6 +248,7 @@ export {
   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.
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 762fb55e4f86..fdf9ebf5ac59 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -32,8 +32,11 @@ import {
   batchedUpdates,
 } from './legacy-events/ReactGenericBatching';
 import ReactVersion from 'shared/ReactVersion';
-// Module provided by RN:
-import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+// Modules provided by RN:
+import {
+  UIManager,
+  legacySendAccessibilityEvent,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
 import {
@@ -168,6 +171,27 @@ function dispatchCommand(handle: any, command: string, args: Array<any>) {
   }
 }
 
+function sendAccessibilityEvent(handle: any, eventType: string) {
+  if (handle._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;
+  }
+
+  if (handle._internalInstanceHandle) {
+    nativeFabricUIManager.sendAccessibilityEvent(
+      handle._internalInstanceHandle.stateNode.node,
+      eventType,
+    );
+  } else {
+    legacySendAccessibilityEvent(handle._nativeTag, eventType);
+  }
+}
+
 function render(
   element: React$Element<any>,
   containerTag: any,
@@ -238,6 +262,7 @@ export {
   findHostInstance_DEPRECATED,
   findNodeHandle,
   dispatchCommand,
+  sendAccessibilityEvent,
   render,
   unmountComponentAtNode,
   unmountComponentAtNodeAndRemoveContainer,
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 2f9876384b83..8b4ab311bff7 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -149,7 +149,15 @@ export type ReactNativeType = {
     componentOrHandle: any,
   ): ?ElementRef<HostComponent<mixed>>,
   findNodeHandle(componentOrHandle: any): ?number,
-  dispatchCommand(handle: any, command: string, args: Array<any>): void,
+  dispatchCommand(
+    handle: ElementRef<HostComponent<mixed>>,
+    command: string,
+    args: Array<any>,
+  ): void,
+  sendAccessibilityEvent(
+    handle: ElementRef<HostComponent<mixed>>,
+    eventType: string,
+  ): void,
   render(
     element: React$Element<any>,
     containerTag: any,
@@ -168,7 +176,15 @@ export type ReactFabricType = {
     componentOrHandle: any,
   ): ?ElementRef<HostComponent<mixed>>,
   findNodeHandle(componentOrHandle: any): ?number,
-  dispatchCommand(handle: any, command: string, args: Array<any>): void,
+  dispatchCommand(
+    handle: ElementRef<HostComponent<mixed>>,
+    command: string,
+    args: Array<any>,
+  ): void,
+  sendAccessibilityEvent(
+    handle: ElementRef<HostComponent<mixed>>,
+    eventType: string,
+  ): void,
   render(
     element: React$Element<any>,
     containerTag: any,
@@ -190,7 +206,7 @@ export type ReactNativeEventTarget = {
   ...
 };
 
-export type ReactFaricEventTouch = {
+export type ReactFabricEventTouch = {
   identifier: number,
   locationX: number,
   locationY: number,
@@ -204,10 +220,10 @@ export type ReactFaricEventTouch = {
   ...
 };
 
-export type ReactFaricEvent = {
-  touches: Array<ReactFaricEventTouch>,
-  changedTouches: Array<ReactFaricEventTouch>,
-  targetTouches: Array<ReactFaricEventTouch>,
+export type ReactFabricEvent = {
+  touches: Array<ReactFabricEventTouch>,
+  changedTouches: Array<ReactFabricEventTouch>,
+  targetTouches: Array<ReactFabricEventTouch>,
   target: number,
   ...
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index 98b7e66ac661..686dc72702de 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -122,6 +122,8 @@ const RCTFabricUIManager = {
 
   dispatchCommand: jest.fn(),
 
+  sendAccessibilityEvent: jest.fn(),
+
   registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
 
   measure: jest.fn(function measure(node, callback) {
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
index 9d49212e0044..3def12a904f6 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -38,4 +38,7 @@ module.exports = {
   get flattenStyle() {
     return require('./flattenStyle');
   },
+  get legacySendAccessibilityEvent() {
+    return require('./legacySendAccessibilityEvent');
+  },
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
index f5245f74fa9c..245eecc4dc7e 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -88,6 +88,7 @@ const RCTUIManager = {
     });
   }),
   dispatchViewManagerCommand: jest.fn(),
+  sendAccessibilityEvent: jest.fn(),
   setJSResponder: jest.fn(),
   setChildren: jest.fn(function setChildren(parentTag, reactTags) {
     autoCreateRoot(parentTag);
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js
new file mode 100644
index 000000000000..326128fd0057
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/legacySendAccessibilityEvent.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+module.exports = jest.fn();
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index 026c3b4d38d8..a935da5e4df6 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -24,6 +24,10 @@ const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
   "Warning: dispatchCommand was called with a ref that isn't a " +
   'native component. Use React.forwardRef to get access to the underlying native component';
 
+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';
+
 jest.mock('shared/ReactFeatureFlags', () =>
   require('shared/forks/ReactFeatureFlags.native-oss'),
 );
@@ -289,6 +293,64 @@ describe('ReactFabric', () => {
     expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
   });
 
+  it('should call sendAccessibilityEvent for native refs', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.sendAccessibilityEvent.mockClear();
+
+    let viewRef;
+    ReactFabric.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    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', () => {
+    class BasicClass extends React.Component {
+      render() {
+        return <React.Fragment />;
+      }
+    }
+
+    nativeFabricUIManager.sendAccessibilityEvent.mockReset();
+
+    let viewRef;
+    ReactFabric.render(
+      <BasicClass
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+    expect(() => {
+      ReactFabric.sendAccessibilityEvent(viewRef, 'eventTypeName');
+    }).toErrorDev([SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT], {
+      withoutStack: true,
+    });
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+  });
+
   it('should call FabricUIManager.measure on ref.measure', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
index 50939f7170d3..c266dab6020c 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabricAndNative-test.internal.js
@@ -15,6 +15,7 @@ let ReactFabric;
 let ReactNative;
 let UIManager;
 let createReactNativeComponentClass;
+let ReactNativePrivateInterface;
 
 describe('created with ReactFabric called with ReactNative', () => {
   beforeEach(() => {
@@ -22,6 +23,7 @@ describe('created with ReactFabric called with ReactNative', () => {
     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', () =>
@@ -92,6 +94,28 @@ describe('created with ReactFabric called with ReactNative', () => {
     ).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', () => {
@@ -171,4 +195,28 @@ describe('created with ReactNative called with ReactFabric', () => {
 
     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__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
index 894d4c8aa134..9026bef79376 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -16,11 +16,16 @@ let ReactNative;
 let createReactNativeComponentClass;
 let UIManager;
 let TextInputState;
+let ReactNativePrivateInterface;
 
 const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
   "Warning: dispatchCommand was called with a ref that isn't a " +
   'native component. Use React.forwardRef to get access to the underlying native component';
 
+const SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT =
+  "Warning: 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();
@@ -28,6 +33,7 @@ describe('ReactNative', () => {
     React = require('react');
     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')
@@ -151,6 +157,65 @@ describe('ReactNative', () => {
     expect(UIManager.dispatchViewManagerCommand).not.toBeCalled();
   });
 
+  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');
+  });
+
+  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();
+    expect(() => {
+      ReactNative.sendAccessibilityEvent(viewRef, 'updateCommand', [10, 20]);
+    }).toErrorDev([SEND_ACCESSIBILITY_EVENT_REQUIRES_HOST_COMPONENT], {
+      withoutStack: true,
+    });
+
+    expect(UIManager.sendAccessibilityEvent).not.toBeCalled();
+  });
+
   it('should not call UIManager.updateView from ref.setNativeProps for properties that have not changed', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index c42159e0fc22..17cc6fe9c952 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -110,6 +110,10 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
     ) => void,
     ...
   };
+  declare export var legacySendAccessibilityEvent: (
+    reactTag: number,
+    eventTypeName: string,
+  ) => void;
   declare export var BatchedBridge: {
     registerCallableModule: (name: string, module: Object) => void,
     ...
@@ -156,6 +160,7 @@ declare var nativeFabricUIManager: {
   ) => void,
 
   dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
+  sendAccessibilityEvent: (node: Object, eventTypeName: string) => void,
 
   measure: (node: Node, callback: MeasureOnSuccessCallback) => void,
   measureInWindow: (

From deeeaf1d222ba29bcce6eda0a1c4423ce10e727a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 27 Jan 2021 13:55:27 -0600
Subject: [PATCH 0207/1603] Entangle overlapping transitions per queue (#20670)

When multiple transitions update the same queue, only the most recent
one should be allowed to finish. We shouldn't show intermediate states.

See #17418 for background on why this is important.

The way this currently works is that we always assign the same lane to
all transitions. It's impossible for one transition to finish without
also finishing all the others.

The downside of the current approach is that it's too aggressive. Not
all transitions are related to each other, so one should not block
the other.

The new approach is to only entangle transitions if they update one or
more of the same state hooks (or class components), because this
indicates that they are related. If they are unrelated, then they can
finish in any order, as long as they have different lanes.

However, this commit does not change anything about how the lanes are
assigned. All it does is add the mechanism to entangle per queue. So it
doesn't actually change any behavior, yet. But it's a requirement for my
next step, which is to assign different lanes to consecutive transitions
until we run out and cycle back to the beginning.
---
 .../src/ReactFiberClassComponent.new.js       | 16 ++++++--
 .../src/ReactFiberClassComponent.old.js       | 16 ++++++--
 .../src/ReactFiberHooks.new.js                | 39 +++++++++++++++++-
 .../src/ReactFiberHooks.old.js                | 41 ++++++++++++++++++-
 .../src/ReactFiberLane.new.js                 | 13 ++++--
 .../src/ReactFiberLane.old.js                 | 13 ++++--
 .../src/ReactFiberReconciler.new.js           | 11 ++++-
 .../src/ReactFiberReconciler.old.js           | 11 ++++-
 .../src/ReactUpdateQueue.new.js               | 38 ++++++++++++++++-
 .../src/ReactUpdateQueue.old.js               | 40 +++++++++++++++++-
 10 files changed, 216 insertions(+), 22 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 9ed6dc23c9f1..389b4877852d 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -40,6 +40,7 @@ import {
 
 import {
   enqueueUpdate,
+  entangleTransitions,
   processUpdateQueue,
   checkHasForceUpdateAfterProcessing,
   resetHasForceUpdateBeforeProcessing,
@@ -214,7 +215,10 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update, lane);
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitions(root, fiber, lane);
+    }
 
     if (__DEV__) {
       if (enableDebugTracing) {
@@ -246,7 +250,10 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update, lane);
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitions(root, fiber, lane);
+    }
 
     if (__DEV__) {
       if (enableDebugTracing) {
@@ -277,7 +284,10 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update, lane);
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitions(root, fiber, lane);
+    }
 
     if (__DEV__) {
       if (enableDebugTracing) {
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 2b4496ca5c91..36bf2d22f75f 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -40,6 +40,7 @@ import {
 
 import {
   enqueueUpdate,
+  entangleTransitions,
   processUpdateQueue,
   checkHasForceUpdateAfterProcessing,
   resetHasForceUpdateBeforeProcessing,
@@ -214,7 +215,10 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update);
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitions(root, fiber, lane);
+    }
 
     if (__DEV__) {
       if (enableDebugTracing) {
@@ -246,7 +250,10 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update);
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitions(root, fiber, lane);
+    }
 
     if (__DEV__) {
       if (enableDebugTracing) {
@@ -277,7 +284,10 @@ const classComponentUpdater = {
     }
 
     enqueueUpdate(fiber, update);
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitions(root, fiber, lane);
+    }
 
     if (__DEV__) {
       if (enableDebugTracing) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 374d383030cd..b615ae1e5e22 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -45,6 +45,8 @@ import {
   isSubsetOfLanes,
   mergeLanes,
   removeLanes,
+  intersectLanes,
+  isTransitionLane,
   markRootEntangled,
   markRootMutableRead,
   getCurrentUpdateLanePriority,
@@ -104,7 +106,11 @@ import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {CacheContext} from './ReactFiberCacheComponent.new';
-import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.new';
+import {
+  createUpdate,
+  enqueueUpdate,
+  entangleTransitions,
+} from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@@ -121,6 +127,7 @@ type Update<S, A> = {|
 export type UpdateQueue<S, A> = {|
   pending: Update<S, A> | null,
   interleaved: Update<S, A> | null,
+  lanes: Lanes,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
   lastRenderedState: S | null,
@@ -654,6 +661,7 @@ function mountReducer<S, I, A>(
   const queue = (hook.queue = {
     pending: null,
     interleaved: null,
+    lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: reducer,
     lastRenderedState: (initialState: any),
@@ -811,6 +819,10 @@ function updateReducer<S, I, A>(
       markSkippedUpdateLanes(interleavedLane);
       interleaved = ((interleaved: any).next: Update<S, A>);
     } while (interleaved !== lastInterleaved);
+  } else 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);
@@ -1102,6 +1114,7 @@ function useMutableSource<Source, Snapshot>(
     const newQueue = {
       pending: null,
       interleaved: null,
+      lanes: NoLanes,
       dispatch: null,
       lastRenderedReducer: basicStateReducer,
       lastRenderedState: snapshot,
@@ -1158,6 +1171,7 @@ function mountState<S>(
   const queue = (hook.queue = {
     pending: null,
     interleaved: null,
+    lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
     lastRenderedState: (initialState: any),
@@ -1821,6 +1835,9 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const lane = requestUpdateLane(provider);
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
+        if (root !== null) {
+          entangleTransitions(root, fiber, lane);
+        }
 
         const seededCache = new Map();
         if (seedKey !== null && seedKey !== undefined && root !== null) {
@@ -1960,7 +1977,25 @@ function dispatchAction<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    if (isTransitionLane(lane) && root !== null) {
+      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);
+      if (newQueueLanes !== queueLanes) {
+        queue.lanes = newQueueLanes;
+        markRootEntangled(root, newQueueLanes);
+      }
+    }
   }
 
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 26721dcd1126..dfde5f7aa116 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -45,6 +45,8 @@ import {
   isSubsetOfLanes,
   mergeLanes,
   removeLanes,
+  intersectLanes,
+  isTransitionLane,
   markRootEntangled,
   markRootMutableRead,
   getCurrentUpdateLanePriority,
@@ -103,7 +105,11 @@ import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {CacheContext} from './ReactFiberCacheComponent.old';
-import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.old';
+import {
+  createUpdate,
+  enqueueUpdate,
+  entangleTransitions,
+} from './ReactUpdateQueue.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -118,6 +124,7 @@ type Update<S, A> = {|
 
 type UpdateQueue<S, A> = {|
   pending: Update<S, A> | null,
+  lanes: Lanes,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
   lastRenderedState: S | null,
@@ -650,6 +657,7 @@ function mountReducer<S, I, A>(
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
     pending: null,
+    lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: reducer,
     lastRenderedState: (initialState: any),
@@ -792,6 +800,12 @@ function updateReducer<S, I, A>(
     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];
 }
@@ -1080,6 +1094,7 @@ function useMutableSource<Source, Snapshot>(
     // including any interleaving updates that occur.
     const newQueue = {
       pending: null,
+      lanes: NoLanes,
       dispatch: null,
       lastRenderedReducer: basicStateReducer,
       lastRenderedState: snapshot,
@@ -1135,6 +1150,7 @@ function mountState<S>(
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
     pending: null,
+    lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
     lastRenderedState: (initialState: any),
@@ -1798,6 +1814,9 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const lane = requestUpdateLane(provider);
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
+        if (root !== null) {
+          entangleTransitions(root, fiber, lane);
+        }
 
         const seededCache = new Map();
         if (seedKey !== null && seedKey !== undefined && root !== null) {
@@ -1914,7 +1933,25 @@ function dispatchAction<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
-    scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    if (isTransitionLane(lane) && root !== null) {
+      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);
+      if (newQueueLanes !== queueLanes) {
+        queue.lanes = newQueueLanes;
+        markRootEntangled(root, newQueueLanes);
+      }
+    }
   }
 
   if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 4570c10a62b4..88c4d1946cb6 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -310,9 +310,8 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   }
 
   if (enableTransitionEntanglement) {
-    // We don't need to include higher priority lanes, because in this
-    // experiment we always unsuspend all transitions whenever we receive
-    // an update.
+    // We don't need to do anything extra here, because we apply per-lane
+    // transition entanglement in the entanglement loop below.
   } else {
     // If there are higher priority lanes, we'll include them even if they
     // are suspended.
@@ -492,6 +491,10 @@ export function includesOnlyTransitions(lanes: Lanes) {
   return (lanes & TransitionLanes) === lanes;
 }
 
+export function isTransitionLane(lane: Lane) {
+  return (lane & TransitionLanes) !== 0;
+}
+
 // To ensure consistency across multiple updates in the same event, this should
 // be a pure function, so that it always returns the same lane for given inputs.
 export function findUpdateLane(
@@ -634,6 +637,10 @@ 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 {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 7be355d2c245..a083ae68d8a8 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -310,9 +310,8 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   }
 
   if (enableTransitionEntanglement) {
-    // We don't need to include higher priority lanes, because in this
-    // experiment we always unsuspend all transitions whenever we receive
-    // an update.
+    // We don't need to do anything extra here, because we apply per-lane
+    // transition entanglement in the entanglement loop below.
   } else {
     // If there are higher priority lanes, we'll include them even if they
     // are suspended.
@@ -492,6 +491,10 @@ export function includesOnlyTransitions(lanes: Lanes) {
   return (lanes & TransitionLanes) === lanes;
 }
 
+export function isTransitionLane(lane: Lane) {
+  return (lane & TransitionLanes) !== 0;
+}
+
 // To ensure consistency across multiple updates in the same event, this should
 // be a pure function, so that it always returns the same lane for given inputs.
 export function findUpdateLane(
@@ -634,6 +637,10 @@ 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 {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 08ec3c8eac87..70923424e887 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -65,7 +65,11 @@ import {
   IsThisRendererActing,
   act,
 } from './ReactFiberWorkLoop.new';
-import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.new';
+import {
+  createUpdate,
+  enqueueUpdate,
+  entangleTransitions,
+} from './ReactUpdateQueue.new';
 import {
   isRendering as ReactCurrentFiberIsRendering,
   current as ReactCurrentFiberCurrent,
@@ -315,7 +319,10 @@ export function updateContainer(
   }
 
   enqueueUpdate(current, update, lane);
-  scheduleUpdateOnFiber(current, lane, eventTime);
+  const root = scheduleUpdateOnFiber(current, lane, eventTime);
+  if (root !== null) {
+    entangleTransitions(root, current, lane);
+  }
 
   return lane;
 }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 0fc72c42a07e..1fc12435d64c 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -65,7 +65,11 @@ import {
   IsThisRendererActing,
   act,
 } from './ReactFiberWorkLoop.old';
-import {createUpdate, enqueueUpdate} from './ReactUpdateQueue.old';
+import {
+  createUpdate,
+  enqueueUpdate,
+  entangleTransitions,
+} from './ReactUpdateQueue.old';
 import {
   isRendering as ReactCurrentFiberIsRendering,
   current as ReactCurrentFiberCurrent,
@@ -315,7 +319,10 @@ export function updateContainer(
   }
 
   enqueueUpdate(current, update);
-  scheduleUpdateOnFiber(current, lane, eventTime);
+  const root = scheduleUpdateOnFiber(current, lane, eventTime);
+  if (root !== null) {
+    entangleTransitions(root, current, lane);
+  }
 
   return lane;
 }
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index 84575950c346..205d7d21d501 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -84,7 +84,7 @@
 // regardless of priority. Intermediate state may vary according to system
 // resources, but the final state is always the same.
 
-import type {Fiber} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 
 import {
@@ -92,6 +92,9 @@ import {
   NoLanes,
   isSubsetOfLanes,
   mergeLanes,
+  isTransitionLane,
+  intersectLanes,
+  markRootEntangled,
 } from './ReactFiberLane.new';
 import {
   enterDisallowedContextReadInDEV,
@@ -128,6 +131,7 @@ export type Update<State> = {|
 export type SharedQueue<State> = {|
   pending: Update<State> | null,
   interleaved: Update<State> | null,
+  lanes: Lanes,
 |};
 
 export type UpdateQueue<State> = {|
@@ -167,6 +171,7 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     shared: {
       pending: null,
       interleaved: null,
+      lanes: NoLanes,
     },
     effects: null,
   };
@@ -260,6 +265,33 @@ export function enqueueUpdate<State>(
   }
 }
 
+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);
+    if (newQueueLanes !== queueLanes) {
+      sharedQueue.lanes = newQueueLanes;
+      markRootEntangled(root, newQueueLanes);
+    }
+  }
+}
+
 export function enqueueCapturedUpdate<State>(
   workInProgress: Fiber,
   capturedUpdate: Update<State>,
@@ -595,6 +627,10 @@ export function processUpdateQueue<State>(
         newLanes = mergeLanes(newLanes, interleaved.lane);
         interleaved = ((interleaved: any).next: Update<State>);
       } while (interleaved !== lastInterleaved);
+    } else 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.
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index f1c14537a42d..1d71e14819d8 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -84,7 +84,7 @@
 // regardless of priority. Intermediate state may vary according to system
 // resources, but the final state is always the same.
 
-import type {Fiber} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 
 import {
@@ -92,6 +92,9 @@ import {
   NoLanes,
   isSubsetOfLanes,
   mergeLanes,
+  isTransitionLane,
+  intersectLanes,
+  markRootEntangled,
 } from './ReactFiberLane.old';
 import {
   enterDisallowedContextReadInDEV,
@@ -123,6 +126,7 @@ export type Update<State> = {|
 
 type SharedQueue<State> = {|
   pending: Update<State> | null,
+  lanes: Lanes,
 |};
 
 export type UpdateQueue<State> = {|
@@ -161,6 +165,7 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     lastBaseUpdate: null,
     shared: {
       pending: null,
+      lanes: NoLanes,
     },
     effects: null,
   };
@@ -234,6 +239,33 @@ export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
   }
 }
 
+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);
+    if (newQueueLanes !== queueLanes) {
+      sharedQueue.lanes = newQueueLanes;
+      markRootEntangled(root, newQueueLanes);
+    }
+  }
+}
+
 export function enqueueCapturedUpdate<State>(
   workInProgress: Fiber,
   capturedUpdate: Update<State>,
@@ -559,6 +591,12 @@ export function processUpdateQueue<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

From aa736a0fa6e22f902bd7a98dcb9b24d8c4310e35 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 27 Jan 2021 15:01:21 -0500
Subject: [PATCH 0208/1603] Add queue microtask to host configs (#20668)

* Queue discrete events in microtask

* Fix flow types

* Add to createReactNoop

* More flow types

* Remove import

* Add to custom HostConfig as well
---
 packages/react-art/src/ReactARTHostConfig.js      |  3 +++
 .../react-dom/src/client/ReactDOMHostConfig.js    | 15 +++++++++++++++
 .../src/ReactFabricHostConfig.js                  |  3 +++
 .../src/ReactNativeHostConfig.js                  |  3 +++
 .../react-noop-renderer/src/createReactNoop.js    | 13 +++++++++++++
 .../src/forks/ReactFiberHostConfig.custom.js      |  1 +
 .../src/ReactTestHostConfig.js                    | 15 +++++++++++++++
 7 files changed, 53 insertions(+)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 43a563e90aa2..703d2c21c679 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -330,6 +330,9 @@ export function getChildHostContext() {
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
+export function queueMicrotask(callback: Function) {
+  invariant(false, 'Not implemented.');
+}
 
 export function shouldSetTextContent(type, props) {
   return (
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 8de2f2c5c7ca..969f6f88b02a 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -384,6 +384,21 @@ export const scheduleTimeout: any =
 export const cancelTimeout: any =
   typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
 export const noTimeout = -1;
+export const queueMicrotask: any =
+  typeof global.queueMicrotask === 'function'
+    ? global.queueMicrotask
+    : typeof Promise !== 'undefined'
+    ? callback =>
+        Promise.resolve(null)
+          .then(callback)
+          .catch(handleErrorInNextTick)
+    : scheduleTimeout;
+
+function handleErrorInNextTick(error) {
+  setTimeout(() => {
+    throw error;
+  });
+}
 
 // -------------------
 //     Mutation
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 636542e8d426..7329a5f04a04 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -348,6 +348,9 @@ export const warnsIfNotActing = false;
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
+export function queueMicrotask(callback: Function) {
+  invariant(false, 'Not implemented.');
+}
 
 // -------------------
 //     Persistence
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index eba0a2b90462..5f64845f3142 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -247,6 +247,9 @@ export const warnsIfNotActing = true;
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
+export function queueMicrotask(callback: Function) {
+  invariant(false, 'Not implemented.');
+}
 
 export function shouldSetTextContent(type: string, props: Props): boolean {
   // TODO (bvaughn) Revisit this decision.
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index ec2a6d714b4f..15bb2e28fb83 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -371,6 +371,19 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     scheduleTimeout: setTimeout,
     cancelTimeout: clearTimeout,
     noTimeout: -1,
+    queueMicrotask:
+      typeof queueMicrotask === 'function'
+        ? queueMicrotask
+        : typeof Promise !== 'undefined'
+        ? callback =>
+            Promise.resolve(null)
+              .then(callback)
+              .catch(error => {
+                setTimeout(() => {
+                  throw error;
+                });
+              })
+        : setTimeout,
 
     prepareForCommit(): null | Object {
       return null;
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 60e06740ad76..e195b898749f 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -54,6 +54,7 @@ export const shouldSetTextContent = $$$hostConfig.shouldSetTextContent;
 export const createTextInstance = $$$hostConfig.createTextInstance;
 export const scheduleTimeout = $$$hostConfig.scheduleTimeout;
 export const cancelTimeout = $$$hostConfig.cancelTimeout;
+export const queueMicrotask = $$$hostConfig.queueMicrotask;
 export const noTimeout = $$$hostConfig.noTimeout;
 export const now = $$$hostConfig.now;
 export const isPrimaryRenderer = $$$hostConfig.isPrimaryRenderer;
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index a6d661d5fe9c..026c74bd9665 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -220,6 +220,21 @@ export const warnsIfNotActing = true;
 
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
+export const queueMicrotask =
+  typeof global.queueMicrotask === 'function'
+    ? global.queueMicrotask
+    : typeof Promise !== 'undefined'
+    ? (callback: Function) =>
+        Promise.resolve(null)
+          .then(callback)
+          .catch(handleErrorInNextTick)
+    : scheduleTimeout;
+
+function handleErrorInNextTick(error) {
+  setTimeout(() => {
+    throw error;
+  });
+}
 export const noTimeout = -1;
 
 // -------------------

From e51bd6c1fa2731c4fcd39300144e917aedfc989b Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 27 Jan 2021 18:24:58 -0500
Subject: [PATCH 0209/1603] Queue discrete events in microtask (#20669)

* Queue discrete events in microtask

* Use callback priority to determine cancellation

* Add queueMicrotask to react-reconciler README

* Fix invatiant conditon for InputDiscrete

* Switch invariant null check

* Convert invariant to warning

* Remove warning from codes.json
---
 .../src/client/ReactDOMHostConfig.js          |  2 +-
 .../__tests__/ChangeEventPlugin-test.js       | 11 ++++-
 .../__tests__/SimpleEventPlugin-test.js       | 23 +++++++---
 packages/react-reconciler/README.md           |  4 ++
 .../src/ReactFiberWorkLoop.new.js             | 42 +++++++++++++++----
 .../src/ReactFiberWorkLoop.old.js             | 42 +++++++++++++++----
 .../ReactSuspenseWithNoopRenderer-test.js     |  1 +
 .../src/ReactTestHostConfig.js                |  2 +-
 packages/shared/ReactFeatureFlags.js          |  2 +
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 18 files changed, 111 insertions(+), 27 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 969f6f88b02a..fedfe8698e1f 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -392,7 +392,7 @@ export const queueMicrotask: any =
         Promise.resolve(null)
           .then(callback)
           .catch(handleErrorInNextTick)
-    : scheduleTimeout;
+    : scheduleTimeout; // TODO: Determine the best fallback here.
 
 function handleErrorInNextTick(error) {
   setTimeout(() => {
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 2a806b2888c1..45828e2735ed 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -730,8 +730,15 @@ describe('ChangeEventPlugin', () => {
 
       // Flush callbacks.
       // Now the click update has flushed.
-      expect(Scheduler).toFlushAndYield(['render: ']);
-      expect(input.value).toBe('');
+      if (gate(flags => flags.enableDiscreteEventMicroTasks)) {
+        // Flush microtask queue.
+        await null;
+        expect(Scheduler).toHaveYielded(['render: ']);
+        expect(input.value).toBe('');
+      } else {
+        expect(Scheduler).toFlushAndYield(['render: ']);
+        expect(input.value).toBe('');
+      }
     });
 
     // @gate experimental
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 0579e9571cbc..377fa61e507d 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -470,11 +470,24 @@ describe('SimpleEventPlugin', function() {
         'High-pri count: 7, Low-pri count: 0',
       ]);
 
-      // At the end, both counters should equal the total number of clicks
-      expect(Scheduler).toFlushAndYield([
-        'High-pri count: 8, Low-pri count: 0',
-        'High-pri count: 8, Low-pri count: 8',
-      ]);
+      if (gate(flags => flags.enableDiscreteEventMicroTasks)) {
+        // Flush the microtask queue
+        await null;
+
+        // At the end, both counters should equal the total number of clicks
+        expect(Scheduler).toHaveYielded([
+          'High-pri count: 8, Low-pri count: 0',
+
+          // TODO: with cancellation, this required another flush?
+          'High-pri count: 8, Low-pri count: 8',
+        ]);
+      } else {
+        // At the end, both counters should equal the total number of clicks
+        expect(Scheduler).toFlushAndYield([
+          'High-pri count: 8, Low-pri count: 0',
+          'High-pri count: 8, Low-pri count: 8',
+        ]);
+      }
       expect(button.textContent).toEqual('High-pri count: 8, Low-pri count: 8');
     });
   });
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 5fb890f38165..217d5f4b8e55 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -203,6 +203,10 @@ You can proxy this to `clearTimeout` or its equivalent in your environment.
 
 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`.
 
+#### `queueMicrotask(fn)`
+
+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`.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 59fce3d254f0..23d8037b4ff2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -92,6 +92,7 @@ import {
   warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
+  queueMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -216,6 +217,7 @@ import {
   syncNestedUpdateFlag,
 } from './ReactProfilerTimer.new';
 
+import {enableDiscreteEventMicroTasks} from 'shared/ReactFeatureFlags';
 // DEV stuff
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
@@ -714,21 +716,34 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     // Special case: There's nothing to work on.
     if (existingCallbackNode !== null) {
       cancelCallback(existingCallbackNode);
-      root.callbackNode = null;
-      root.callbackPriority = NoLanePriority;
     }
+    root.callbackNode = null;
+    root.callbackPriority = NoLanePriority;
     return;
   }
 
   // Check if there's an existing task. We may be able to reuse it.
-  if (existingCallbackNode !== null) {
-    const existingCallbackPriority = root.callbackPriority;
-    if (existingCallbackPriority === newCallbackPriority) {
-      // The priority hasn't changed. We can reuse the existing task. Exit.
-      return;
+  const existingCallbackPriority = root.callbackPriority;
+  if (existingCallbackPriority === newCallbackPriority) {
+    if (__DEV__) {
+      // If we're going to re-use an existing task, it needs to exist.
+      // Assume that discrete update microtasks are non-cancellable and null.
+      // TODO: Temporary until we confirm this warning is not fired.
+      if (
+        existingCallbackNode == null &&
+        existingCallbackPriority !== InputDiscreteLanePriority
+      ) {
+        console.error(
+          'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
+        );
+      }
     }
-    // The priority changed. Cancel the existing callback. We'll schedule a new
-    // one below.
+    // The priority hasn't changed. We can reuse the existing task. Exit.
+    return;
+  }
+
+  if (existingCallbackNode != null) {
+    // Cancel the existing callback. We'll schedule a new one below.
     cancelCallback(existingCallbackNode);
   }
 
@@ -737,6 +752,8 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   if (newCallbackPriority === SyncLanePriority) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
+
+    // TODO: After enableDiscreteEventMicroTasks lands, we can remove the fake node.
     newCallbackNode = scheduleSyncCallback(
       performSyncWorkOnRoot.bind(null, root),
     );
@@ -745,6 +762,12 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       ImmediateSchedulerPriority,
       performSyncWorkOnRoot.bind(null, root),
     );
+  } else if (
+    enableDiscreteEventMicroTasks &&
+    newCallbackPriority === InputDiscreteLanePriority
+  ) {
+    queueMicrotask(performSyncWorkOnRoot.bind(null, root));
+    newCallbackNode = null;
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
       newCallbackPriority,
@@ -1871,6 +1894,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
   root.callbackNode = null;
+  root.callbackPriority = NoLanePriority;
 
   // Update the first and last pending times on this root. The new first
   // pending time is whatever is left on the root fiber.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 833fa0e98b4f..e1431de6431f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -34,6 +34,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
+  enableDiscreteEventMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -92,6 +93,7 @@ import {
   warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
+  queueMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -696,21 +698,34 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     // Special case: There's nothing to work on.
     if (existingCallbackNode !== null) {
       cancelCallback(existingCallbackNode);
-      root.callbackNode = null;
-      root.callbackPriority = NoLanePriority;
     }
+    root.callbackNode = null;
+    root.callbackPriority = NoLanePriority;
     return;
   }
 
   // Check if there's an existing task. We may be able to reuse it.
-  if (existingCallbackNode !== null) {
-    const existingCallbackPriority = root.callbackPriority;
-    if (existingCallbackPriority === newCallbackPriority) {
-      // The priority hasn't changed. We can reuse the existing task. Exit.
-      return;
+  const existingCallbackPriority = root.callbackPriority;
+  if (existingCallbackPriority === newCallbackPriority) {
+    if (__DEV__) {
+      // If we're going to re-use an existing task, it needs to exist.
+      // Assume that discrete update microtasks are non-cancellable and null.
+      // TODO: Temporary until we confirm this warning is not fired.
+      if (
+        existingCallbackNode == null &&
+        existingCallbackPriority !== InputDiscreteLanePriority
+      ) {
+        console.error(
+          'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
+        );
+      }
     }
-    // The priority changed. Cancel the existing callback. We'll schedule a new
-    // one below.
+    // The priority hasn't changed. We can reuse the existing task. Exit.
+    return;
+  }
+
+  if (existingCallbackNode != null) {
+    // Cancel the existing callback. We'll schedule a new one below.
     cancelCallback(existingCallbackNode);
   }
 
@@ -719,6 +734,8 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   if (newCallbackPriority === SyncLanePriority) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
+
+    // TODO: After enableDiscreteEventMicroTasks lands, we can remove the fake node.
     newCallbackNode = scheduleSyncCallback(
       performSyncWorkOnRoot.bind(null, root),
     );
@@ -727,6 +744,12 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       ImmediateSchedulerPriority,
       performSyncWorkOnRoot.bind(null, root),
     );
+  } else if (
+    enableDiscreteEventMicroTasks &&
+    newCallbackPriority === InputDiscreteLanePriority
+  ) {
+    queueMicrotask(performSyncWorkOnRoot.bind(null, root));
+    newCallbackNode = null;
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
       newCallbackPriority,
@@ -1851,6 +1874,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
   root.callbackNode = null;
+  root.callbackPriority = NoLanePriority;
 
   // Update the first and last pending times on this root. The new first
   // pending time is whatever is left on the root fiber.
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 5021c32c8b11..5a9c94d3a3ac 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -3528,6 +3528,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate enableCache
+  // @gate !enableDiscreteEventMicroTasks
   it('regression: empty render at high priority causes update to be dropped', async () => {
     // Reproduces a bug where flushDiscreteUpdates starts a new (empty) render
     // pass which cancels a scheduled timeout and causes the fallback never to
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 026c74bd9665..c9f9b2376ebb 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -228,7 +228,7 @@ export const queueMicrotask =
         Promise.resolve(null)
           .then(callback)
           .catch(handleErrorInNextTick)
-    : scheduleTimeout;
+    : scheduleTimeout; // TODO: Determine the best fallback here.
 
 function handleErrorInNextTick(error) {
   setTimeout(() => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index e09482a525ac..53f9b744cb9c 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -152,3 +152,5 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 
 // Experiment to simplify/improve how transitions are scheduled
 export const enableTransitionEntanglement = false;
+
+export const enableDiscreteEventMicroTasks = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 494cae50c8b4..a230930cb0a6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 6c4616798eb3..0dc9bed57584 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 3971598060d5..5652b66a0b83 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 0d31d83b657f..8962bcce36a4 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index f0479741a570..7905485bce68 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 3c2da8f5fc9d..c1a20dd91a32 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 26eda01b2a24..c274d6a37645 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableDiscreteEventMicroTasks = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index e6cbe5c387f5..47d8763d039b 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -56,3 +56,4 @@ export const enableUseRefAccessWarning = __VARIANT__;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableTransitionEntanglement = __VARIANT__;
+export const enableDiscreteEventMicroTasks = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index f39c8bee578e..2b1ba37ee848 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,6 +32,7 @@ export const {
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
   enableTransitionEntanglement,
+  enableDiscreteEventMicroTasks,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From a922f1c710f60f64c9013fb567ce8b9c15f252eb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 28 Jan 2021 15:07:00 -0600
Subject: [PATCH 0210/1603] Fix cache refresh bug that broke DevTools (#20687)

Will follow up with test
---
 packages/react-reconciler/src/ReactFiberHooks.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberHooks.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index b615ae1e5e22..311595f5d7b4 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1836,7 +1836,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
         if (root !== null) {
-          entangleTransitions(root, fiber, lane);
+          entangleTransitions(root, provider, lane);
         }
 
         const seededCache = new Map();
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index dfde5f7aa116..40e878014580 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1815,7 +1815,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
         if (root !== null) {
-          entangleTransitions(root, fiber, lane);
+          entangleTransitions(root, provider, lane);
         }
 
         const seededCache = new Map();

From 766a7a28a9a233b236a97166411a9242376df7a6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 29 Jan 2021 10:22:55 -0500
Subject: [PATCH 0211/1603] Improve React error message when mutable sources
 are mutated during render (#20665)

Changed previous error message from:
> Cannot read from mutable source during the current render without tearing. This is a bug in React. Please file an issue.

To:
> Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.

Also added a DEV only warning about the unsafe side effect:
> A mutable source was mutated while the %s component was rendering. This is not supported. Move any mutations into event handlers or effects.

I think this is the best we can do without adding production overhead that we'd probably prefer to avoid.
---
 .../src/ReactFiberHooks.new.js                | 25 +++++-
 .../src/ReactFiberHooks.old.js                | 25 +++++-
 .../useMutableSource-test.internal.js         | 80 ++++++++++++++++++-
 packages/react/src/ReactMutableSource.js      |  5 ++
 packages/shared/ReactTypes.js                 |  6 ++
 scripts/error-codes/codes.json                |  3 +-
 6 files changed, 140 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 311595f5d7b4..bac6749f6446 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -904,6 +904,18 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
 
+  let mutableSourceSideEffectDetected = false;
+  if (__DEV__) {
+    // Detect side effects that update a mutable source during render.
+    // See https://github.com/facebook/react/issues/19948
+    if (source._currentlyRenderingFiber !== currentlyRenderingFiber) {
+      source._currentlyRenderingFiber = currentlyRenderingFiber;
+      source._initialVersionAsOfFirstRender = version;
+    } else if (source._initialVersionAsOfFirstRender !== version) {
+      mutableSourceSideEffectDetected = true;
+    }
+  }
+
   // Is it safe for this component to read from this source during the current render?
   let isSafeToReadFromSource = false;
 
@@ -966,9 +978,20 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
     // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
     markSourceAsDirty(source);
 
+    if (__DEV__) {
+      if (mutableSourceSideEffectDetected) {
+        const componentName = getComponentName(currentlyRenderingFiber.type);
+        console.warn(
+          'A mutable source was mutated while the %s component was rendering. This is not supported. ' +
+            'Move any mutations into event handlers or effects.',
+          componentName,
+        );
+      }
+    }
+
     invariant(
       false,
-      'Cannot read from mutable source during the current render without tearing. This is a bug in React. Please file an issue.',
+      'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 40e878014580..6a42f73527f9 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -885,6 +885,18 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
 
+  let mutableSourceSideEffectDetected = false;
+  if (__DEV__) {
+    // Detect side effects that update a mutable source during render.
+    // See https://github.com/facebook/react/issues/19948
+    if (source._currentlyRenderingFiber !== currentlyRenderingFiber) {
+      source._currentlyRenderingFiber = currentlyRenderingFiber;
+      source._initialVersionAsOfFirstRender = version;
+    } else if (source._initialVersionAsOfFirstRender !== version) {
+      mutableSourceSideEffectDetected = true;
+    }
+  }
+
   // Is it safe for this component to read from this source during the current render?
   let isSafeToReadFromSource = false;
 
@@ -947,9 +959,20 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
     // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
     markSourceAsDirty(source);
 
+    if (__DEV__) {
+      if (mutableSourceSideEffectDetected) {
+        const componentName = getComponentName(currentlyRenderingFiber.type);
+        console.warn(
+          'A mutable source was mutated while the %s component was rendering. This is not supported. ' +
+            'Move any mutations into event handlers or effects.',
+          componentName,
+        );
+      }
+    }
+
     invariant(
       false,
-      'Cannot read from mutable source during the current render without tearing. This is a bug in React. Please file an issue.',
+      'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
 }
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index 7ddaf5de7d19..243232f1b83b 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -25,9 +25,9 @@ function loadModules() {
   jest.useFakeTimers();
 
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
-
   ReactFeatureFlags.enableSchedulerTracing = true;
   ReactFeatureFlags.enableProfilerTimer = true;
+
   React = require('react');
   ReactNoop = require('react-noop-renderer');
   Scheduler = require('scheduler');
@@ -1720,6 +1720,84 @@ describe('useMutableSource', () => {
   });
 
   if (__DEV__) {
+    // See https://github.com/facebook/react/issues/19948
+    describe('side effecte detection', () => {
+      // @gate experimental
+      it('should throw if a mutable source is mutated during render', () => {
+        const source = createSource('initial');
+        const mutableSource = createMutableSource(
+          source,
+          param => param.version,
+        );
+
+        function MutateDuringRead() {
+          const value = useMutableSource(
+            mutableSource,
+            defaultGetSnapshot,
+            defaultSubscribe,
+          );
+          Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
+          // Note that mutating an exeternal value during render is a side effect and is not supported.
+          if (value === 'initial') {
+            source.value = 'updated';
+          }
+          return null;
+        }
+
+        expect(() => {
+          expect(() => {
+            act(() => {
+              ReactNoop.renderLegacySyncRoot(
+                <React.StrictMode>
+                  <MutateDuringRead />
+                </React.StrictMode>,
+              );
+            });
+          }).toThrow(
+            'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
+          );
+        }).toWarnDev(
+          'A mutable source was mutated while the MutateDuringRead component was rendering. This is not supported. ' +
+            'Move any mutations into event handlers or effects.\n' +
+            '    in MutateDuringRead (at **)',
+        );
+
+        expect(Scheduler).toHaveYielded(['MutateDuringRead:initial']);
+      });
+
+      // @gate experimental
+      it('should not misidentify mutations after render as side effects', () => {
+        const source = createSource('initial');
+        const mutableSource = createMutableSource(
+          source,
+          param => param.version,
+        );
+
+        function MutateDuringRead() {
+          const value = useMutableSource(
+            mutableSource,
+            defaultGetSnapshot,
+            defaultSubscribe,
+          );
+          Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
+          return null;
+        }
+
+        act(() => {
+          ReactNoop.renderLegacySyncRoot(
+            <React.StrictMode>
+              <MutateDuringRead />
+            </React.StrictMode>,
+          );
+          expect(Scheduler).toFlushAndYieldThrough([
+            'MutateDuringRead:initial',
+          ]);
+          source.value = 'updated';
+        });
+        expect(Scheduler).toHaveYielded(['MutateDuringRead:updated']);
+      });
+    });
+
     describe('dev warnings', () => {
       // @gate experimental
       it('should warn if the subscribe function does not return an unsubscribe function', () => {
diff --git a/packages/react/src/ReactMutableSource.js b/packages/react/src/ReactMutableSource.js
index 684594829db3..f8e5d0b28303 100644
--- a/packages/react/src/ReactMutableSource.js
+++ b/packages/react/src/ReactMutableSource.js
@@ -23,6 +23,11 @@ export function createMutableSource<Source: $NonMaybeType<mixed>>(
   if (__DEV__) {
     mutableSource._currentPrimaryRenderer = null;
     mutableSource._currentSecondaryRenderer = null;
+
+    // Used to detect side effects that update a mutable source during render.
+    // See https://github.com/facebook/react/issues/19948
+    mutableSource._currentlyRenderingFiber = null;
+    mutableSource._initialVersionAsOfFirstRender = null;
   }
 
   return mutableSource;
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index c03ab5056f6f..99e1bbb9bcd4 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -197,6 +197,12 @@ export type MutableSource<Source: $NonMaybeType<mixed>> = {|
   // Used to detect multiple renderers using the same mutable source.
   _currentPrimaryRenderer?: Object | null,
   _currentSecondaryRenderer?: Object | null,
+
+  // DEV only
+  // Used to detect side effects that update a mutable source during render.
+  // See https://github.com/facebook/react/issues/19948
+  _currentlyRenderingFiber?: Fiber | null,
+  _initialVersionAsOfFirstRender?: MutableSourceVersion | null,
 |};
 
 // The subset of a Thenable required by things thrown by Suspense.
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 12a8db733b0c..61b6b33d02bc 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -372,5 +372,6 @@
   "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."
+  "384": "Refreshing the cache is not supported in Server Components.",
+  "385": "Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue."
 }

From bb1b7951d182d36345c83154f9d9bab218011b46 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 29 Jan 2021 16:51:11 +0100
Subject: [PATCH 0212/1603] fix: don't run effects if a render phase update
 results in unchanged deps (#20676)

The memoized state of effect hooks is only invalidated when deps change. Deps are compared between the previous effect and the current effect. This can be problematic if one commit consists of an update that has changed deps followed by an update that has equal deps. That commit will lead to memoizedState containing the changed deps even though we committed with unchanged deps.

The n+1 update will therefore run an effect because we compare the updated deps with the deps with which we never actually committed.

To prevent this we now invalidate memoizedState on every updateEffectImpl call so that memoizedStat.deps always points to the latest deps.
---
 .../src/backend/renderer.js                   | 46 ++++++++++++++++++-
 .../src/ReactFiberHooks.new.js                |  2 +-
 .../src/ReactFiberHooks.old.js                |  2 +-
 .../ReactHooksWithNoopRenderer-test.js        | 43 +++++++++++++++++
 4 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index cc82fda74cdb..a9e3b2aa0b41 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -103,6 +103,7 @@ import type {
   ComponentFilter,
   ElementType,
 } from 'react-devtools-shared/src/types';
+import is from 'shared/objectIs';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => Symbol | number;
@@ -1073,6 +1074,49 @@ export function attach(
     return null;
   }
 
+  function areHookInputsEqual(
+    nextDeps: Array<mixed>,
+    prevDeps: Array<mixed> | null,
+  ) {
+    if (prevDeps === null) {
+      return false;
+    }
+
+    for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
+      if (is(nextDeps[i], prevDeps[i])) {
+        continue;
+      }
+      return false;
+    }
+    return true;
+  }
+
+  function isEffect(memoizedState) {
+    return (
+      memoizedState !== null &&
+      typeof memoizedState === 'object' &&
+      memoizedState.hasOwnProperty('tag') &&
+      memoizedState.hasOwnProperty('create') &&
+      memoizedState.hasOwnProperty('destroy') &&
+      memoizedState.hasOwnProperty('deps') &&
+      (memoizedState.deps === null || Array.isArray(memoizedState.deps)) &&
+      memoizedState.hasOwnProperty('next')
+    );
+  }
+
+  function didHookChange(prev: any, next: any): boolean {
+    const prevMemoizedState = prev.memoizedState;
+    const nextMemoizedState = next.memoizedState;
+
+    if (isEffect(prevMemoizedState) && isEffect(nextMemoizedState)) {
+      return (
+        prevMemoizedState !== nextMemoizedState &&
+        !areHookInputsEqual(nextMemoizedState.deps, prevMemoizedState.deps)
+      );
+    }
+    return nextMemoizedState !== prevMemoizedState;
+  }
+
   function didHooksChange(prev: any, next: any): boolean {
     if (prev == null || next == null) {
       return false;
@@ -1086,7 +1130,7 @@ export function attach(
       next.hasOwnProperty('queue')
     ) {
       while (next !== null) {
-        if (next.memoizedState !== prev.memoizedState) {
+        if (didHookChange(prev, next)) {
           return true;
         } else {
           next = next.next;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index bac6749f6446..fe49e725fd7f 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1365,7 +1365,7 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
     if (nextDeps !== null) {
       const prevDeps = prevEffect.deps;
       if (areHookInputsEqual(nextDeps, prevDeps)) {
-        pushEffect(hookFlags, create, destroy, nextDeps);
+        hook.memoizedState = pushEffect(hookFlags, create, destroy, nextDeps);
         return;
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 6a42f73527f9..ccb719dc3d8a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1344,7 +1344,7 @@ function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
     if (nextDeps !== null) {
       const prevDeps = prevEffect.deps;
       if (areHookInputsEqual(nextDeps, prevDeps)) {
-        pushEffect(hookFlags, create, destroy, nextDeps);
+        hook.memoizedState = pushEffect(hookFlags, create, destroy, nextDeps);
         return;
       }
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index a792f8609be4..cc86edb13220 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -3760,4 +3760,47 @@ describe('ReactHooksWithNoopRenderer', () => {
     // effects would not fire.
     expect(Scheduler).toHaveYielded(['Unmount A', 'Unmount B']);
   });
+
+  it('effect dependencies are persisted after a render phase update', () => {
+    let handleClick;
+    function Test() {
+      const [count, setCount] = useState(0);
+
+      useEffect(() => {
+        Scheduler.unstable_yieldValue(`Effect: ${count}`);
+      }, [count]);
+
+      if (count > 0) {
+        setCount(0);
+      }
+
+      handleClick = () => setCount(2);
+
+      return <Text text={`Render: ${count}`} />;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.render(<Test />);
+    });
+
+    expect(Scheduler).toHaveYielded(['Render: 0', 'Effect: 0']);
+
+    ReactNoop.act(() => {
+      handleClick();
+    });
+
+    expect(Scheduler).toHaveYielded(['Render: 0']);
+
+    ReactNoop.act(() => {
+      handleClick();
+    });
+
+    expect(Scheduler).toHaveYielded(['Render: 0']);
+
+    ReactNoop.act(() => {
+      handleClick();
+    });
+
+    expect(Scheduler).toHaveYielded(['Render: 0']);
+  });
 });

From f8b6969da65457cd18b434616cb01ac1c7b0afcc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Feb 2021 10:27:59 -0600
Subject: [PATCH 0213/1603] Add `--commit` param to release scripts (#20703)

Alternative to `--build`. Uses same logic as sizebot and www
sync script.

Immediate motivation is I want sizebot to use the
`download-experimental-build` command in CI. Will do that next.
---
 .../release/download-experimental-build.js    |  2 +-
 scripts/release/get-build-id-for-commit.js    | 34 +++++++++++++++++++
 scripts/release/prepare-release-from-ci.js    |  2 +-
 .../release/shared-commands/parse-params.js   | 31 ++++++++++++++++-
 4 files changed, 66 insertions(+), 3 deletions(-)
 create mode 100644 scripts/release/get-build-id-for-commit.js

diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
index 75080554c9d9..ae5e69857990 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -19,7 +19,7 @@ const run = async () => {
   try {
     addDefaultParamValue('-r', '--releaseChannel', 'experimental');
 
-    const params = parseParams();
+    const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
     params.packages = await getPublicPackages(true);
 
diff --git a/scripts/release/get-build-id-for-commit.js b/scripts/release/get-build-id-for-commit.js
new file mode 100644
index 000000000000..88350e99d280
--- /dev/null
+++ b/scripts/release/get-build-id-for-commit.js
@@ -0,0 +1,34 @@
+'use strict';
+
+const fetch = require('node-fetch');
+
+async function getBuildIdForCommit(sha) {
+  let ciBuildId = null;
+  const statusesResponse = await fetch(
+    `https://api.github.com/repos/facebook/react/commits/${sha}/status`
+  );
+
+  if (!statusesResponse.ok) {
+    throw Error('Could not find commit for: ' + sha);
+  }
+
+  const {statuses, state} = await statusesResponse.json();
+  if (state === 'failure') {
+    throw new Error(`Base commit is broken: ${sha}`);
+  }
+  for (let i = 0; i < statuses.length; i++) {
+    const status = statuses[i];
+    if (status.context === `ci/circleci: process_artifacts_combined`) {
+      if (status.state === 'success') {
+        ciBuildId = /\/facebook\/react\/([0-9]+)/.exec(status.target_url)[1];
+        break;
+      }
+      if (status.state === 'pending') {
+        throw new Error(`Build job for base commit is still pending: ${sha}`);
+      }
+    }
+  }
+  return ciBuildId;
+}
+
+module.exports = getBuildIdForCommit;
diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index dd8e143453f7..12b0b76409a7 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -15,7 +15,7 @@ const testTracingFixture = require('./shared-commands/test-tracing-fixture');
 
 const run = async () => {
   try {
-    const params = parseParams();
+    const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
 
     if (!params.build) {
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
index 2ec21020282f..5755a8ee6587 100644
--- a/scripts/release/shared-commands/parse-params.js
+++ b/scripts/release/shared-commands/parse-params.js
@@ -3,6 +3,7 @@
 'use strict';
 
 const commandLineArgs = require('command-line-args');
+const getBuildIdForCommit = require('../get-build-id-for-commit');
 
 const paramDefinitions = [
   {
@@ -10,6 +11,14 @@ const paramDefinitions = [
     type: Number,
     description:
       'Circle CI build identifier (e.g. https://circleci.com/gh/facebook/react/<build>)',
+    defaultValue: null,
+  },
+  {
+    name: 'commit',
+    type: String,
+    description:
+      'GitHub commit SHA. When provided, automatically finds corresponding CI build.',
+    defaultValue: null,
   },
   {
     name: 'skipTests',
@@ -25,9 +34,29 @@ const paramDefinitions = [
   },
 ];
 
-module.exports = () => {
+module.exports = async () => {
   const params = commandLineArgs(paramDefinitions);
 
+  if (params.build !== null) {
+    if (params.commit !== null) {
+      console.error(
+        '`build` and `commmit` params are mutually exclusive. Choose one or the other.`'
+      );
+      process.exit(1);
+    }
+  } else {
+    if (params.commit === null) {
+      console.error('Must provide either `build` or `commit`.');
+      process.exit(1);
+    }
+    try {
+      params.build = await getBuildIdForCommit(params.commit);
+    } catch (error) {
+      console.error(error.message);
+      process.exit(1);
+    }
+  }
+
   const channel = params.releaseChannel;
   if (channel !== 'experimental' && channel !== 'stable') {
     console.error(

From f8545f6eb8b2041df5efffe8987a3fcb63321190 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Feb 2021 10:30:50 -0600
Subject: [PATCH 0214/1603] Add automatic retry to download script (#20704)

If build job is still pending, the script will continously poll until
it reaches the retry limit.

I've set the limit at 10 minutes, since our CI pipeline almost always
finishes before that.
---
 scripts/release/get-build-id-for-commit.js | 57 ++++++++++++++--------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/scripts/release/get-build-id-for-commit.js b/scripts/release/get-build-id-for-commit.js
index 88350e99d280..fca6d0280d3a 100644
--- a/scripts/release/get-build-id-for-commit.js
+++ b/scripts/release/get-build-id-for-commit.js
@@ -2,33 +2,48 @@
 
 const fetch = require('node-fetch');
 
+const POLLING_INTERVAL = 5 * 1000; // 5 seconds
+const RETRY_TIMEOUT = 10 * 60 * 1000; // 10 minutes
+
+function wait(ms) {
+  return new Promise(resolve => {
+    setTimeout(() => resolve(), ms);
+  });
+}
+
 async function getBuildIdForCommit(sha) {
-  let ciBuildId = null;
-  const statusesResponse = await fetch(
-    `https://api.github.com/repos/facebook/react/commits/${sha}/status`
-  );
+  const retryLimit = Date.now() + RETRY_TIMEOUT;
+  retry: while (true) {
+    const statusesResponse = await fetch(
+      `https://api.github.com/repos/facebook/react/commits/${sha}/status`
+    );
 
-  if (!statusesResponse.ok) {
-    throw Error('Could not find commit for: ' + sha);
-  }
+    if (!statusesResponse.ok) {
+      throw Error('Could not find commit for: ' + sha);
+    }
 
-  const {statuses, state} = await statusesResponse.json();
-  if (state === 'failure') {
-    throw new Error(`Base commit is broken: ${sha}`);
-  }
-  for (let i = 0; i < statuses.length; i++) {
-    const status = statuses[i];
-    if (status.context === `ci/circleci: process_artifacts_combined`) {
-      if (status.state === 'success') {
-        ciBuildId = /\/facebook\/react\/([0-9]+)/.exec(status.target_url)[1];
-        break;
-      }
-      if (status.state === 'pending') {
-        throw new Error(`Build job for base commit is still pending: ${sha}`);
+    const {statuses, state} = await statusesResponse.json();
+    if (state === 'failure') {
+      throw new Error(`Base commit is broken: ${sha}`);
+    }
+    for (let i = 0; i < statuses.length; i++) {
+      const status = statuses[i];
+      if (status.context === `ci/circleci: process_artifacts_combined`) {
+        if (status.state === 'success') {
+          return /\/facebook\/react\/([0-9]+)/.exec(status.target_url)[1];
+        }
+        if (status.state === 'failure') {
+          throw new Error(`Build job for commit failed: ${sha}`);
+        }
+        if (Date.now() < retryLimit) {
+          await wait(POLLING_INTERVAL);
+          continue retry;
+        }
+        throw new Error('Exceeded retry limit. Build job is still pending.');
       }
     }
+    throw new Error('Could not find build for commit: ' + sha);
   }
-  return ciBuildId;
 }
 
 module.exports = getBuildIdForCommit;

From dc27b5aaae5e1a028dc77412d5396466aaa87268 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Feb 2021 14:11:51 -0600
Subject: [PATCH 0215/1603] useMutableSource: Use StrictMode double render to
 detect render phase mutation (#20698)

* Concurrent Mode test for uMS render mutation

Same test as the one added in #20665, but for Concurrent Mode.

* Use double render to detect render phase mutation

PR #20665 added a mechanism to detect when a `useMutableSource` source
is mutated during the render phase. It relies on the fact that we double
invoke components that error during development using
`invokeGuardedCallback`. If the version in the double render doesn't
match the first, that indicates there must have been a mutation during
render.

At first I thought it worked by detecting inside the *other* double
render, the one we do for Strict Mode. It turns out that while it does
warn then, the warning is suppressed, because we suppress all console
methods that occur during the Strict Mode double render. So it's really
the `invokeGuardedCallback` one that makes it work.

Anyway, let's set that aside that issue for a second. I realized during
review that errors that occur during the Strict Mode double render
reveal a useful property: A pure component will never throw during the
double render, because if it were pure, it would have also thrown during
the first render... in which case it wouldn't have double rendered! This
is true of all such errors, not just the one thrown by
`useMutableSource`.

Given this, we can simplify the `useMutableSource` mutation detection
mechanism. Instead of tracking and comparing the source's version, we
can instead check if we're inside a double render when the error is
thrown.

To get around the console suppression issue, I changed the warning to an
error. It errors regardless, in both dev and prod, so it doesn't have
semantic implications.

However, because of the paradox I described above, we arguably
_shouldn't_ throw an error in development, since we know that error
won't happen in production, because prod doesn't double render. (It's
still a tearing bug, but that doesn't mean the component will actually
throw.) I considered that, but that requires a larger conversation about
how to handle errors that we know are only possible in development. I
think we should probably be suppressing *all* errors (with a warning)
that occur during a double render.
---
 .../src/ReactFiberHooks.new.js                | 47 ++++++++-----
 .../src/ReactFiberHooks.old.js                | 47 ++++++++-----
 .../useMutableSource-test.internal.js         | 66 ++++++++++++++-----
 scripts/error-codes/codes.json                |  4 +-
 4 files changed, 115 insertions(+), 49 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index fe49e725fd7f..46c6b5af0e96 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -904,18 +904,6 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
 
-  let mutableSourceSideEffectDetected = false;
-  if (__DEV__) {
-    // Detect side effects that update a mutable source during render.
-    // See https://github.com/facebook/react/issues/19948
-    if (source._currentlyRenderingFiber !== currentlyRenderingFiber) {
-      source._currentlyRenderingFiber = currentlyRenderingFiber;
-      source._initialVersionAsOfFirstRender = version;
-    } else if (source._initialVersionAsOfFirstRender !== version) {
-      mutableSourceSideEffectDetected = true;
-    }
-  }
-
   // Is it safe for this component to read from this source during the current render?
   let isSafeToReadFromSource = false;
 
@@ -978,17 +966,44 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
     // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
     markSourceAsDirty(source);
 
+    // Intentioally throw an error to force React to retry synchronously. During
+    // the synchronous retry, it will block interleaved mutations, so we should
+    // get a consistent read. Therefore, the following error should never be
+    // visible to the user.
+    //
+    // If it were to become visible to the user, it suggests one of two things:
+    // a bug in React, or (more likely), a mutation during the render phase that
+    // caused the second re-render attempt to be different from the first.
+    //
+    // We know it's the second case if the logs are currently disabled. So in
+    // dev, we can present a more accurate error message.
     if (__DEV__) {
-      if (mutableSourceSideEffectDetected) {
+      // eslint-disable-next-line react-internal/no-production-logging
+      if (console.log.__reactDisabledLog) {
+        // If the logs are disabled, this is the dev-only double render. This is
+        // only reachable if there was a mutation during render. Show a helpful
+        // error message.
+        //
+        // Something interesting to note: because we only double render in
+        // development, this error will never happen during production. This is
+        // actually true of all errors that occur during a double render,
+        // because if the first render had thrown, we would have exited the
+        // begin phase without double rendering. We should consider suppressing
+        // any error from a double render (with a warning) to more closely match
+        // the production behavior.
         const componentName = getComponentName(currentlyRenderingFiber.type);
-        console.warn(
-          'A mutable source was mutated while the %s component was rendering. This is not supported. ' +
-            'Move any mutations into event handlers or effects.',
+        invariant(
+          false,
+          'A mutable source was mutated while the %s component was rendering. ' +
+            'This is not supported. Move any mutations into event handlers ' +
+            'or effects.',
           componentName,
         );
       }
     }
 
+    // We expect this error not to be thrown during the synchronous retry,
+    // because we blocked interleaved mutations.
     invariant(
       false,
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index ccb719dc3d8a..35b0c2ca1548 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -885,18 +885,6 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
 
-  let mutableSourceSideEffectDetected = false;
-  if (__DEV__) {
-    // Detect side effects that update a mutable source during render.
-    // See https://github.com/facebook/react/issues/19948
-    if (source._currentlyRenderingFiber !== currentlyRenderingFiber) {
-      source._currentlyRenderingFiber = currentlyRenderingFiber;
-      source._initialVersionAsOfFirstRender = version;
-    } else if (source._initialVersionAsOfFirstRender !== version) {
-      mutableSourceSideEffectDetected = true;
-    }
-  }
-
   // Is it safe for this component to read from this source during the current render?
   let isSafeToReadFromSource = false;
 
@@ -959,17 +947,44 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
     // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
     markSourceAsDirty(source);
 
+    // Intentioally throw an error to force React to retry synchronously. During
+    // the synchronous retry, it will block interleaved mutations, so we should
+    // get a consistent read. Therefore, the following error should never be
+    // visible to the user.
+    //
+    // If it were to become visible to the user, it suggests one of two things:
+    // a bug in React, or (more likely), a mutation during the render phase that
+    // caused the second re-render attempt to be different from the first.
+    //
+    // We know it's the second case if the logs are currently disabled. So in
+    // dev, we can present a more accurate error message.
     if (__DEV__) {
-      if (mutableSourceSideEffectDetected) {
+      // eslint-disable-next-line react-internal/no-production-logging
+      if (console.log.__reactDisabledLog) {
+        // If the logs are disabled, this is the dev-only double render. This is
+        // only reachable if there was a mutation during render. Show a helpful
+        // error message.
+        //
+        // Something interesting to note: because we only double render in
+        // development, this error will never happen during production. This is
+        // actually true of all errors that occur during a double render,
+        // because if the first render had thrown, we would have exited the
+        // begin phase without double rendering. We should consider suppressing
+        // any error from a double render (with a warning) to more closely match
+        // the production behavior.
         const componentName = getComponentName(currentlyRenderingFiber.type);
-        console.warn(
-          'A mutable source was mutated while the %s component was rendering. This is not supported. ' +
-            'Move any mutations into event handlers or effects.',
+        invariant(
+          false,
+          'A mutable source was mutated while the %s component was rendering. ' +
+            'This is not supported. Move any mutations into event handlers ' +
+            'or effects.',
           componentName,
         );
       }
     }
 
+    // We expect this error not to be thrown during the synchronous retry,
+    // because we blocked interleaved mutations.
     invariant(
       false,
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index 243232f1b83b..1969c2f7adce 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -1724,6 +1724,46 @@ describe('useMutableSource', () => {
     describe('side effecte detection', () => {
       // @gate experimental
       it('should throw if a mutable source is mutated during render', () => {
+        const source = createSource(0);
+        const mutableSource = createMutableSource(
+          source,
+          param => param.version,
+        );
+
+        let mutatedValueInRender = 1;
+        function MutateDuringRead() {
+          const value = useMutableSource(
+            mutableSource,
+            defaultGetSnapshot,
+            defaultSubscribe,
+          );
+          Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
+          // Note that mutating an exeternal value during render is a side effect and is not supported.
+          source.value = mutatedValueInRender++;
+          return null;
+        }
+
+        expect(() => {
+          act(() => {
+            ReactNoop.render(<MutateDuringRead />);
+          });
+        }).toThrow(
+          'A mutable source was mutated while the MutateDuringRead component ' +
+            'was rendering. This is not supported. Move any mutations into ' +
+            'event handlers or effects.',
+        );
+
+        expect(Scheduler).toHaveYielded([
+          // First attempt
+          'MutateDuringRead:0',
+
+          // Synchronous retry
+          'MutateDuringRead:1',
+        ]);
+      });
+
+      // @gate experimental
+      it('should throw if a mutable source is mutated during render (legacy mode)', () => {
         const source = createSource('initial');
         const mutableSource = createMutableSource(
           source,
@@ -1745,21 +1785,17 @@ describe('useMutableSource', () => {
         }
 
         expect(() => {
-          expect(() => {
-            act(() => {
-              ReactNoop.renderLegacySyncRoot(
-                <React.StrictMode>
-                  <MutateDuringRead />
-                </React.StrictMode>,
-              );
-            });
-          }).toThrow(
-            'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
-          );
-        }).toWarnDev(
-          'A mutable source was mutated while the MutateDuringRead component was rendering. This is not supported. ' +
-            'Move any mutations into event handlers or effects.\n' +
-            '    in MutateDuringRead (at **)',
+          act(() => {
+            ReactNoop.renderLegacySyncRoot(
+              <React.StrictMode>
+                <MutateDuringRead />
+              </React.StrictMode>,
+            );
+          });
+        }).toThrow(
+          'A mutable source was mutated while the MutateDuringRead component ' +
+            'was rendering. This is not supported. Move any mutations into ' +
+            'event handlers or effects.',
         );
 
         expect(Scheduler).toHaveYielded(['MutateDuringRead:initial']);
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 61b6b33d02bc..e758c79be2e5 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -339,7 +339,7 @@
   "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 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.",
@@ -373,5 +373,5 @@
   "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": "Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue."
+  "385": "A mutable source was mutated while the %s component was rendering. This is not supported. Move any mutations into event handlers or effects."
 }

From 7cb9fd7ef822436aef13c8cbf648af1e21a5309a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Feb 2021 18:05:42 -0600
Subject: [PATCH 0216/1603] Land interleaved updates change in main fork
 (#20710)

* Land #20615 in main fork

Includes change to interleaved updates.

```
yarn replace-fork
```

* Check deferRenderPhaseUpdateToNextBatch in test
---
 .../src/ReactFiberClassComponent.old.js       |  6 +-
 .../src/ReactFiberHooks.old.js                | 72 +++++++++++++++----
 .../src/ReactFiberInterleavedUpdates.old.js   | 55 ++++++++++++++
 .../src/ReactFiberNewContext.old.js           | 27 +++++--
 .../src/ReactFiberReconciler.old.js           |  2 +-
 .../src/ReactFiberThrow.old.js                |  2 +-
 .../src/ReactFiberWorkLoop.old.js             | 26 ++++++-
 .../src/ReactUpdateQueue.old.js               | 58 ++++++++++++---
 .../__tests__/ReactIncrementalUpdates-test.js | 11 ++-
 9 files changed, 219 insertions(+), 40 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 36bf2d22f75f..5f366e7c253a 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -214,7 +214,7 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update);
+    enqueueUpdate(fiber, update, lane);
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
@@ -249,7 +249,7 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update);
+    enqueueUpdate(fiber, update, lane);
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
@@ -283,7 +283,7 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update);
+    enqueueUpdate(fiber, update, lane);
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
       entangleTransitions(root, fiber, lane);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 35b0c2ca1548..17038f14b090 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -77,6 +77,7 @@ import {
   warnIfNotCurrentlyActingUpdatesInDev,
   warnIfNotScopedWithMatchingAct,
   markSkippedUpdateLanes,
+  isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 
 import invariant from 'shared/invariant';
@@ -110,6 +111,7 @@ import {
   enqueueUpdate,
   entangleTransitions,
 } from './ReactUpdateQueue.old';
+import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -122,8 +124,9 @@ type Update<S, A> = {|
   priority?: ReactPriorityLevel,
 |};
 
-type UpdateQueue<S, A> = {|
+export type UpdateQueue<S, A> = {|
   pending: Update<S, A> | null,
+  interleaved: Update<S, A> | null,
   lanes: Lanes,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
@@ -657,6 +660,7 @@ function mountReducer<S, I, A>(
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
     pending: null,
+    interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: reducer,
@@ -800,7 +804,22 @@ function updateReducer<S, I, A>(
     queue.lastRenderedState = newState;
   }
 
-  if (baseQueue === null) {
+  // Interleaved updates are stored on a separate queue. We aren't going to
+  // process them during this render, but we do need to track which lanes
+  // are remaining.
+  const lastInterleaved = queue.interleaved;
+  if (lastInterleaved !== null) {
+    let interleaved = lastInterleaved;
+    do {
+      const interleavedLane = interleaved.lane;
+      currentlyRenderingFiber.lanes = mergeLanes(
+        currentlyRenderingFiber.lanes,
+        interleavedLane,
+      );
+      markSkippedUpdateLanes(interleavedLane);
+      interleaved = ((interleaved: any).next: Update<S, A>);
+    } while (interleaved !== lastInterleaved);
+  } else 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;
@@ -1132,6 +1151,7 @@ function useMutableSource<Source, Snapshot>(
     // including any interleaving updates that occur.
     const newQueue = {
       pending: null,
+      interleaved: null,
       lanes: NoLanes,
       dispatch: null,
       lastRenderedReducer: basicStateReducer,
@@ -1188,6 +1208,7 @@ function mountState<S>(
   hook.memoizedState = hook.baseState = initialState;
   const queue = (hook.queue = {
     pending: null,
+    interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
@@ -1869,7 +1890,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueUpdate(provider, refreshUpdate);
+        enqueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -1904,17 +1925,6 @@ function dispatchAction<S, A>(
     next: (null: any),
   };
 
-  // Append the update to the end of the list.
-  const pending = queue.pending;
-  if (pending === null) {
-    // This is the first update. Create a circular list.
-    update.next = update;
-  } else {
-    update.next = pending.next;
-    pending.next = update;
-  }
-  queue.pending = update;
-
   const alternate = fiber.alternate;
   if (
     fiber === currentlyRenderingFiber ||
@@ -1924,7 +1934,41 @@ function dispatchAction<S, A>(
     // queue -> linked list of updates. After this render pass, we'll restart
     // and apply the stashed updates on top of the work-in-progress hook.
     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;
   } else {
+    if (isInterleavedUpdate(fiber, lane)) {
+      const interleaved = queue.interleaved;
+      if (interleaved === null) {
+        // This is the first update. Create a circular list.
+        update.next = update;
+        // At the end of the current render, this queue's interleaved updates will
+        // be transfered to the pending queue.
+        pushInterleavedQueue(queue);
+      } else {
+        update.next = interleaved.next;
+        interleaved.next = update;
+      }
+      queue.interleaved = update;
+    } else {
+      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 (
       fiber.lanes === NoLanes &&
       (alternate === null || alternate.lanes === NoLanes)
diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
new file mode 100644
index 000000000000..20096794461f
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {UpdateQueue as HookQueue} from './ReactFiberHooks.old';
+import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.old';
+
+// An array of all update queues that received updates during the current
+// render. When this render exits, either because it finishes or because it is
+// interrupted, the interleaved updates will be transfered onto the main part
+// of the queue.
+let interleavedQueues: Array<
+  HookQueue<any, any> | ClassQueue<any>,
+> | null = null;
+
+export function pushInterleavedQueue(
+  queue: HookQueue<any, any> | ClassQueue<any>,
+) {
+  if (interleavedQueues === null) {
+    interleavedQueues = [queue];
+  } else {
+    interleavedQueues.push(queue);
+  }
+}
+
+export function enqueueInterleavedUpdates() {
+  // Transfer the interleaved updates onto the main queue. Each queue has a
+  // `pending` field and an `interleaved` field. When they are not null, they
+  // point to the last node in a circular linked list. We need to append the
+  // interleaved list to the end of the pending list by joining them into a
+  // single, circular list.
+  if (interleavedQueues !== null) {
+    for (let i = 0; i < interleavedQueues.length; i++) {
+      const queue = interleavedQueues[i];
+      const lastInterleavedUpdate = queue.interleaved;
+      if (lastInterleavedUpdate !== null) {
+        queue.interleaved = null;
+        const firstInterleavedUpdate = lastInterleavedUpdate.next;
+        const lastPendingUpdate = queue.pending;
+        if (lastPendingUpdate !== null) {
+          const firstPendingUpdate = lastPendingUpdate.next;
+          lastPendingUpdate.next = (firstInterleavedUpdate: any);
+          lastInterleavedUpdate.next = (firstPendingUpdate: any);
+        }
+        queue.pending = (lastInterleavedUpdate: any);
+      }
+    }
+    interleavedQueues = null;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 934bc6b3fcd5..c1102b89f93f 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -11,6 +11,7 @@ import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, ContextDependency} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Lanes} from './ReactFiberLane.old';
+import type {SharedQueue} from './ReactUpdateQueue.old';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
@@ -31,7 +32,7 @@ import {
 
 import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
-import {createUpdate, enqueueUpdate, ForceUpdate} from './ReactUpdateQueue.old';
+import {createUpdate, ForceUpdate} from './ReactUpdateQueue.old';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 
@@ -211,16 +212,30 @@ export function propagateContextChange<T>(
 
           if (fiber.tag === ClassComponent) {
             // Schedule a force update on the work-in-progress.
-            const update = createUpdate(
-              NoTimestamp,
-              pickArbitraryLane(renderLanes),
-            );
+            const lane = pickArbitraryLane(renderLanes);
+            const update = createUpdate(NoTimestamp, lane);
             update.tag = ForceUpdate;
             // TODO: Because we don't have a work-in-progress, this will add the
             // update to the current fiber, too, which means it will persist even if
             // this render is thrown away. Since it's a race condition, not sure it's
             // worth fixing.
-            enqueueUpdate(fiber, update);
+
+            // Inlined `enqueueUpdate` to remove interleaved update check
+            const updateQueue = fiber.updateQueue;
+            if (updateQueue === null) {
+              // Only occurs if the fiber has been unmounted.
+            } else {
+              const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
+              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;
+            }
           }
           fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
           const alternate = fiber.alternate;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 1fc12435d64c..64bbea2c4070 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -318,7 +318,7 @@ export function updateContainer(
     update.callback = callback;
   }
 
-  enqueueUpdate(current, update);
+  enqueueUpdate(current, update, lane);
   const root = scheduleUpdateOnFiber(current, lane, eventTime);
   if (root !== null) {
     entangleTransitions(root, current, lane);
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index e7534497735c..6ae53d02fc5c 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -293,7 +293,7 @@ function throwException(
               // prevent a bail out.
               const update = createUpdate(NoTimestamp, SyncLane);
               update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update);
+              enqueueUpdate(sourceFiber, update, SyncLane);
             }
           }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index e1431de6431f..0f99452a4c63 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -34,7 +34,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
-  enableDiscreteEventMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -207,6 +206,7 @@ import {
   pop as popFromStack,
   createCursor,
 } from './ReactFiberStack.old';
+import {enqueueInterleavedUpdates} from './ReactFiberInterleavedUpdates.old';
 
 import {
   markNestedUpdateScheduled,
@@ -217,6 +217,7 @@ import {
   syncNestedUpdateFlag,
 } from './ReactProfilerTimer.old';
 
+import {enableDiscreteEventMicroTasks} from 'shared/ReactFeatureFlags';
 // DEV stuff
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -537,6 +538,7 @@ export function scheduleUpdateOnFiber(
     }
   }
 
+  // TODO: Consolidate with `isInterleavedUpdate` check
   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. Unless the
@@ -674,6 +676,22 @@ function markUpdateLaneFromFiberToRoot(
   }
 }
 
+export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
+  return (
+    // TODO: Optimize slightly by comparing to root that fiber belongs to.
+    // Requires some refactoring. Not a big deal though since it's rare for
+    // concurrent apps to have more than a single root.
+    workInProgressRoot !== null &&
+    (fiber.mode & BlockingMode) !== NoMode &&
+    // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
+    // then don't treat this as an interleaved update. This pattern is
+    // accompanied by a warning but we haven't fully deprecated it yet. We can
+    // remove once the deferRenderPhaseUpdateToNextBatch flag is enabled.
+    (deferRenderPhaseUpdateToNextBatch ||
+      (executionContext & RenderContext) === NoContext)
+  );
+}
+
 // Use this function to schedule a task for a root. There's only one task per
 // root; if a task was already scheduled, we'll check to make sure the priority
 // of the existing task is the same as the priority of the next level that the
@@ -1376,6 +1394,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
 
+  enqueueInterleavedUpdates();
+
   if (enableSchedulerTracing) {
     spawnedWorkDuringRender = null;
   }
@@ -2307,7 +2327,7 @@ function captureCommitPhaseErrorOnRoot(
 ) {
   const errorInfo = createCapturedValue(error, sourceFiber);
   const update = createRootErrorUpdate(rootFiber, errorInfo, (SyncLane: Lane));
-  enqueueUpdate(rootFiber, update);
+  enqueueUpdate(rootFiber, update, (SyncLane: Lane));
   const eventTime = requestEventTime();
   const root = markUpdateLaneFromFiberToRoot(rootFiber, (SyncLane: Lane));
   if (root !== null) {
@@ -2354,7 +2374,7 @@ export function captureCommitPhaseError(
           errorInfo,
           (SyncLane: Lane),
         );
-        enqueueUpdate(fiber, update);
+        enqueueUpdate(fiber, update, (SyncLane: Lane));
         const eventTime = requestEventTime();
         const root = markUpdateLaneFromFiberToRoot(fiber, (SyncLane: Lane));
         if (root !== null) {
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 1d71e14819d8..d1e82e10d7c3 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -105,7 +105,11 @@ import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags';
 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
 import {StrictMode} from './ReactTypeOfMode';
-import {markSkippedUpdateLanes} from './ReactFiberWorkLoop.old';
+import {
+  markSkippedUpdateLanes,
+  isInterleavedUpdate,
+} from './ReactFiberWorkLoop.old';
+import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 
 import invariant from 'shared/invariant';
 
@@ -124,8 +128,9 @@ export type Update<State> = {|
   next: Update<State> | null,
 |};
 
-type SharedQueue<State> = {|
+export type SharedQueue<State> = {|
   pending: Update<State> | null,
+  interleaved: Update<State> | null,
   lanes: Lanes,
 |};
 
@@ -165,6 +170,7 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     lastBaseUpdate: null,
     shared: {
       pending: null,
+      interleaved: null,
       lanes: NoLanes,
     },
     effects: null,
@@ -205,7 +211,11 @@ export function createUpdate(eventTime: number, lane: Lane): Update<*> {
   return update;
 }
 
-export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
+export function enqueueUpdate<State>(
+  fiber: Fiber,
+  update: Update<State>,
+  lane: Lane,
+) {
   const updateQueue = fiber.updateQueue;
   if (updateQueue === null) {
     // Only occurs if the fiber has been unmounted.
@@ -213,15 +223,31 @@ export function enqueueUpdate<State>(fiber: Fiber, update: Update<State>) {
   }
 
   const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
-  const pending = sharedQueue.pending;
-  if (pending === null) {
-    // This is the first update. Create a circular list.
-    update.next = update;
+
+  if (isInterleavedUpdate(fiber, lane)) {
+    const interleaved = sharedQueue.interleaved;
+    if (interleaved === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+      // At the end of the current render, this queue's interleaved updates will
+      // be transfered to the pending queue.
+      pushInterleavedQueue(sharedQueue);
+    } else {
+      update.next = interleaved.next;
+      interleaved.next = update;
+    }
+    sharedQueue.interleaved = update;
   } else {
-    update.next = pending.next;
-    pending.next = update;
+    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;
   }
-  sharedQueue.pending = update;
 
   if (__DEV__) {
     if (
@@ -591,7 +617,17 @@ export function processUpdateQueue<State>(
     queue.firstBaseUpdate = newFirstBaseUpdate;
     queue.lastBaseUpdate = newLastBaseUpdate;
 
-    if (firstBaseUpdate === null) {
+    // Interleaved updates are stored on a separate queue. We aren't going to
+    // process them during this render, but we do need to track which lanes
+    // are remaining.
+    const lastInterleaved = queue.shared.interleaved;
+    if (lastInterleaved !== null) {
+      let interleaved = lastInterleaved;
+      do {
+        newLanes = mergeLanes(newLanes, interleaved.lane);
+        interleaved = ((interleaved: any).next: Update<State>);
+      } while (interleaved !== lastInterleaved);
+    } else 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;
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index 2dd1cd18e7c5..e24e2576dde2 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -320,7 +320,16 @@ describe('ReactIncrementalUpdates', () => {
     });
 
     expect(instance.state).toEqual({a: 'a', b: 'b'});
-    expect(Scheduler).toHaveYielded(['componentWillReceiveProps', 'render']);
+
+    if (gate(flags => flags.deferRenderPhaseUpdateToNextBatch)) {
+      expect(Scheduler).toHaveYielded([
+        'componentWillReceiveProps',
+        'render',
+        'render',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded(['componentWillReceiveProps', 'render']);
+    }
   });
 
   it('updates triggered from inside a class setState updater', () => {

From 3e0bdbefa3cb78c5534b808772ed6afad7c34827 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 2 Feb 2021 10:19:53 -0500
Subject: [PATCH 0217/1603] DevTools: Patch console methods even when only
 show-inline-warnings/errors enabled (#20688)

---
 .../src/__tests__/console-test.js             | 51 +++++++++++++++++++
 .../src/backend/agent.js                      |  6 ++-
 .../src/backend/renderer.js                   |  6 ++-
 packages/react-devtools-shared/src/hook.js    |  6 ++-
 4 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index f5e2ff65eaea..e7588dc12986 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -47,6 +47,7 @@ describe('console', () => {
     patchConsole({
       appendComponentStack: true,
       breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
     });
 
     const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
@@ -79,12 +80,61 @@ describe('console', () => {
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
+  it('should patch the console when appendComponentStack is enabled', () => {
+    unpatchConsole();
+
+    expect(fakeConsole.error).toBe(mockError);
+    expect(fakeConsole.warn).toBe(mockWarn);
+
+    patchConsole({
+      appendComponentStack: true,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
+    });
+
+    expect(fakeConsole.error).not.toBe(mockError);
+    expect(fakeConsole.warn).not.toBe(mockWarn);
+  });
+
+  it('should patch the console when breakOnWarn is enabled', () => {
+    unpatchConsole();
+
+    expect(fakeConsole.error).toBe(mockError);
+    expect(fakeConsole.warn).toBe(mockWarn);
+
+    patchConsole({
+      appendComponentStack: false,
+      breakOnWarn: true,
+      showInlineWarningsAndErrors: false,
+    });
+
+    expect(fakeConsole.error).not.toBe(mockError);
+    expect(fakeConsole.warn).not.toBe(mockWarn);
+  });
+
+  it('should patch the console when showInlineWarningsAndErrors is enabled', () => {
+    unpatchConsole();
+
+    expect(fakeConsole.error).toBe(mockError);
+    expect(fakeConsole.warn).toBe(mockWarn);
+
+    patchConsole({
+      appendComponentStack: false,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: true,
+    });
+
+    expect(fakeConsole.error).not.toBe(mockError);
+    expect(fakeConsole.warn).not.toBe(mockWarn);
+  });
+
   it('should only patch the console once', () => {
     const {error, warn} = fakeConsole;
 
     patchConsole({
       appendComponentStack: true,
       breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
     });
 
     expect(fakeConsole.error).toBe(error);
@@ -339,6 +389,7 @@ describe('console', () => {
     patchConsole({
       appendComponentStack: true,
       breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
     });
     act(() => ReactDOM.render(<Child />, document.createElement('div')));
 
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index e570febf5d67..68c1fa70ba40 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -622,7 +622,11 @@ export default class Agent extends EventEmitter<{|
     // or in the case of React Native- if the backend is just finding out the preference-
     // then install or uninstall the console overrides.
     // It's safe to call these methods multiple times, so we don't need to worry about that.
-    if (appendComponentStack || breakOnConsoleErrors) {
+    if (
+      appendComponentStack ||
+      breakOnConsoleErrors ||
+      showInlineWarningsAndErrors
+    ) {
       patchConsole({
         appendComponentStack,
         breakOnConsoleErrors,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index a9e3b2aa0b41..a15af2d8bdbc 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -645,7 +645,11 @@ export function attach(
       window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
     const showInlineWarningsAndErrors =
       window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-    if (appendComponentStack || breakOnConsoleErrors) {
+    if (
+      appendComponentStack ||
+      breakOnConsoleErrors ||
+      showInlineWarningsAndErrors
+    ) {
       patchConsole({
         appendComponentStack,
         breakOnConsoleErrors,
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 3bb2eb23115a..e29ad7abe956 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -192,7 +192,11 @@ export function installHook(target: any): DevToolsHook | null {
         // but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)
         // and the object itself will be undefined as well for the reasons mentioned above,
         // so we use try/catch instead.
-        if (appendComponentStack || breakOnConsoleErrors) {
+        if (
+          appendComponentStack ||
+          breakOnConsoleErrors ||
+          showInlineWarningsAndErrors
+        ) {
           registerRendererWithConsole(renderer);
           patchConsole({
             appendComponentStack,

From c47f3cfa1743ffb3b9c7f94ef94731e89a9d261a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 2 Feb 2021 16:40:31 -0500
Subject: [PATCH 0218/1603] Restore experimental build script's ability to auto
 download latest build (#20717)

---
 scripts/release/download-experimental-build.js | 9 +++++----
 scripts/release/utils.js                       | 6 +++---
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
index ae5e69857990..2de19359559a 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -18,15 +18,16 @@ const printSummary = require('./download-experimental-build-commands/print-summa
 const run = async () => {
   try {
     addDefaultParamValue('-r', '--releaseChannel', 'experimental');
+    addDefaultParamValue(
+      null,
+      '--build',
+      await getLatestMasterBuildNumber(true)
+    );
 
     const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
     params.packages = await getPublicPackages(true);
 
-    if (!params.build) {
-      params.build = await getLatestMasterBuildNumber(true);
-    }
-
     await checkEnvironmentVariables(params);
     await downloadBuildArtifacts(params);
 
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index f49471ad76f5..08ffdeb7c8c9 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -17,18 +17,18 @@ const logger = createLogger({
   storagePath: join(__dirname, '.progress-estimator'),
 });
 
-const addDefaultParamValue = (shortName, longName, defaultValue) => {
+const addDefaultParamValue = (optionalShortName, longName, defaultValue) => {
   let found = false;
   for (let i = 0; i < process.argv.length; i++) {
     const current = process.argv[i];
-    if (current === shortName || current.startsWith(`${longName}=`)) {
+    if (current === optionalShortName || current.startsWith(`${longName}=`)) {
       found = true;
       break;
     }
   }
 
   if (!found) {
-    process.argv.push(shortName, defaultValue);
+    process.argv.push(`${longName}=${defaultValue}`);
   }
 };
 

From 7e36d8beba53102e11c523f317976b311666e449 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 2 Feb 2021 16:48:02 -0600
Subject: [PATCH 0219/1603] Some release script fixes (#20718)

* Retry loop should not start over from beginning

When the otp times out, we should not retry the packages that were
already successfully published. We should pick up where we left off.

* Don't crash if build-info.json doesn't exist

The "print follow up instructions" step crashes if build-info.json is
not found. The new build workflow doesn't include those yet (might not
need to) and since the instructions that depend on it only affect
semver (latest) releases, I've moved the code to that branch. Will
follow up with a proper fix, either by adding back a build-info.json
file or removing that dependency and reading the commit some other way.
---
 .../print-follow-up-instructions.js           | 126 ++++++++++--------
 .../publish-commands/publish-to-npm.js        |  92 ++++++-------
 scripts/release/publish.js                    |  14 +-
 3 files changed, 121 insertions(+), 111 deletions(-)

diff --git a/scripts/release/publish-commands/print-follow-up-instructions.js b/scripts/release/publish-commands/print-follow-up-instructions.js
index 614b5875ec4f..92eac820e26b 100644
--- a/scripts/release/publish-commands/print-follow-up-instructions.js
+++ b/scripts/release/publish-commands/print-follow-up-instructions.js
@@ -10,13 +10,6 @@ const theme = require('../theme');
 const {execRead} = require('../utils');
 
 const run = async ({cwd, packages, tags}) => {
-  // All packages are built from a single source revision,
-  // so it is safe to read build info from any one of them.
-  const arbitraryPackageName = packages[0];
-  const {commit} = readJsonSync(
-    join(cwd, 'build', 'node_modules', arbitraryPackageName, 'build-info.json')
-  );
-
   // Tags are named after the react version.
   const {version} = readJsonSync(
     `${cwd}/build/node_modules/react/package.json`
@@ -28,6 +21,10 @@ const run = async ({cwd, packages, tags}) => {
     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');
 
@@ -36,6 +33,23 @@ const run = async ({cwd, packages, tags}) => {
     );
 
     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.`
@@ -54,61 +68,61 @@ const run = async ({cwd, packages, tags}) => {
       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}`
-    );
+      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`);
+      // 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
-        );
+      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.'
-    );
+      // 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();
+      console.log();
+    }
   }
 };
 
diff --git a/scripts/release/publish-commands/publish-to-npm.js b/scripts/release/publish-commands/publish-to-npm.js
index 2edd8d267efb..71c347e4cc47 100644
--- a/scripts/release/publish-commands/publish-to-npm.js
+++ b/scripts/release/publish-commands/publish-to-npm.js
@@ -3,70 +3,60 @@
 'use strict';
 
 const {exec} = require('child-process-promise');
-const clear = require('clear');
 const {readJsonSync} = require('fs-extra');
 const {join} = require('path');
 const {confirm, execRead} = require('../utils');
 const theme = require('../theme');
 
-const run = async ({cwd, dry, packages, tags}, otp) => {
-  clear();
+const run = async ({cwd, dry, tags}, packageName, otp) => {
+  const packagePath = join(cwd, 'build/node_modules', packageName);
+  const {version} = readJsonSync(join(packagePath, 'package.json'));
 
-  for (let i = 0; i < packages.length; i++) {
-    const packageName = packages[i];
-    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 info = await execRead(`npm view ${packageName}@${version}`);
+  if (info) {
+    console.log(
+      theme`{package ${packageName}} {version ${version}} has already been published.`
+    );
+    await confirm('Is this expected?');
+  } else {
+    console.log(theme`{spinnerSuccess ✓} Publishing {package ${packageName}}`);
 
-    // 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 info = await execRead(`npm view ${packageName}@${version}`);
-    if (info) {
-      console.log(
-        theme`{package ${packageName}} {version ${version}} has already been published.`
-      );
-      await confirm('Is this expected?');
-    } else {
-      console.log(
-        theme`{spinnerSuccess ✓} Publishing {package ${packageName}}`
-      );
+    // Publish the package and tag it.
+    if (!dry) {
+      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}`));
 
-      // Publish the package and tag it.
+    for (let j = 1; j < tags.length; j++) {
       if (!dry) {
-        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}`));
-
-      for (let j = 1; j < tags.length; j++) {
-        if (!dry) {
-          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}`
-          )
+        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}`
+        )
+      );
+    }
 
-      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) {
-          await exec(`npm dist-tag rm ${packageName} untagged --otp=${otp}`);
-        }
-        console.log(
-          theme.command(
-            `  npm dist-tag rm ${packageName} untagged --otp=${otp}`
-          )
-        );
+    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) {
+        await exec(`npm dist-tag rm ${packageName} untagged --otp=${otp}`);
       }
+      console.log(
+        theme.command(`  npm dist-tag rm ${packageName} untagged --otp=${otp}`)
+      );
     }
   }
 };
diff --git a/scripts/release/publish.js b/scripts/release/publish.js
index 9ec9330a0973..f0d2fd76228a 100755
--- a/scripts/release/publish.js
+++ b/scripts/release/publish.js
@@ -4,6 +4,7 @@
 
 const {join} = require('path');
 const {readJsonSync} = require('fs-extra');
+const clear = require('clear');
 const {getPublicPackages, handleError} = require('./utils');
 const theme = require('./theme');
 
@@ -49,17 +50,22 @@ const run = async () => {
     await validateSkipPackages(params);
     await checkNPMPermissions(params);
 
-    while (true) {
+    clear();
+    let otp = await promptForOTP(params);
+    const packageNames = params.packages;
+    for (let i = 0; i < packageNames.length; ) {
+      const packageName = packageNames[i];
       try {
-        const otp = await promptForOTP(params);
-        await publishToNPM(params, otp);
-        break;
+        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;
       }
     }

From 0e526bcec2a2940eb2cea6204efab76a2e4d7c0d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 2 Feb 2021 21:30:37 -0600
Subject: [PATCH 0220/1603] Fix release script --commit param (#20720)

PR #20717 accidentally broke the `--commit` parameter because the
script errors if you provide both a `--build` and a `--commit`.

I solved by removing the validation error. When there's a conflict, it
will choose the --`build`.

(Although maybe we should `--build` entirely and always uses `--commit`.
I think `--commit` is a sufficient replacement.)
---
 scripts/release/download-experimental-build.js  | 7 +------
 scripts/release/shared-commands/parse-params.js | 8 ++------
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
index 2de19359559a..2bd77a67d122 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -11,18 +11,13 @@ const {
 
 const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
 const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
-const getLatestMasterBuildNumber = require('./shared-commands/get-latest-master-build-number');
 const parseParams = require('./shared-commands/parse-params');
 const printSummary = require('./download-experimental-build-commands/print-summary');
 
 const run = async () => {
   try {
     addDefaultParamValue('-r', '--releaseChannel', 'experimental');
-    addDefaultParamValue(
-      null,
-      '--build',
-      await getLatestMasterBuildNumber(true)
-    );
+    addDefaultParamValue(null, '--commit', 'master');
 
     const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
index 5755a8ee6587..9af398cbc852 100644
--- a/scripts/release/shared-commands/parse-params.js
+++ b/scripts/release/shared-commands/parse-params.js
@@ -38,12 +38,8 @@ module.exports = async () => {
   const params = commandLineArgs(paramDefinitions);
 
   if (params.build !== null) {
-    if (params.commit !== null) {
-      console.error(
-        '`build` and `commmit` params are mutually exclusive. Choose one or the other.`'
-      );
-      process.exit(1);
-    }
+    // TODO: Should we just remove the `build` param? Seems like `commit` is a
+    // sufficient replacement.
   } else {
     if (params.commit === null) {
       console.error('Must provide either `build` or `commit`.');

From 2d025753e2bc490959188e72e3bf50008408430d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Feb 2021 11:11:56 -0500
Subject: [PATCH 0221/1603] Remove --build flag from release scripts (#20723)

Also update instructions to match recent script changes.

Also add reproducible commit SHA to post download instructions to support publishing the Firefox DevTools extension.
---
 scripts/release/README.md                     | 30 ++++---------
 .../print-summary.js                          |  7 +++-
 .../release/download-experimental-build.js    |  3 ++
 scripts/release/prepare-release-from-ci.js    |  9 ++--
 .../download-build-artifacts.js               |  4 +-
 .../get-latest-master-build-number.js         | 27 ------------
 .../release/shared-commands/parse-params.js   | 38 +++++++----------
 scripts/release/theme.js                      |  1 +
 scripts/release/utils.js                      | 42 ++++++++++++++++++-
 9 files changed, 77 insertions(+), 84 deletions(-)
 delete mode 100644 scripts/release/shared-commands/get-latest-master-build-number.js

diff --git a/scripts/release/README.md b/scripts/release/README.md
index 5e7dfda30909..7d7ab15a389c 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -30,14 +30,10 @@ The sections below include meaningful `--tags` in the instructions. However, kee
 
 To prepare a build for a particular commit:
 1. Choose a commit from [the commit log](https://github.com/facebook/react/commits/master).
-2. Click the "“✓" icon and click the Circle CI "Details" link.
-3. Select the `process_artifacts ` job (**not** the `process_artifacts_experimental`job; see the next section)
-   * If it's still pending, you'll need to wait for it to finish. <sup>1</sup>
-4. Copy the build ID from the URL
-   * e.g. the build ID for commit [e5d06e34b](https://github.com/facebook/react/commit/e5d06e34b) is [**124756**](https://circleci.com/gh/facebook/react/124756)
-5. Run the [`prepare-release-from-ci`](#prepare-release-from-ci) script with the build ID <sup>2</sup> you found:
+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 --build=124756
+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:
@@ -45,20 +41,16 @@ Once the build has been checked out and tested locally, you're ready to publish
 scripts/release/publish.js --tags next
 ```
 
-If the OTP code expires while publishing, re-run this command and answer "y" to the questions about whether it was expected for already published packages.
-
-<sup>1: This is the most awkward part of cutting a release right now. We have plans to improve it.</sup><br/>
-<sup>2: You can omit the `build` param if you just want to release the latest commit as to "next".</sup>
+<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 in step 3 you should choose the `process_artifacts_experimental ` job (instead of `process_artifacts`) <sup>1</sup>
+The steps for publishing an experimental release are almost the same as for publishing a "next" release except for the release channel (`-r`) flag.
 
-For example, the experimental build ID for commit [e5d06e34b](https://github.com/facebook/react/commit/e5d06e34b) is [**124763**](https://circleci.com/gh/facebook/react/124763):
 ```sh
-scripts/release/prepare-release-from-ci.js --build=124763
+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:
@@ -67,10 +59,6 @@ Once the build has been checked out and tested locally, you're ready to publish
 scripts/release/publish.js --tags experimental
 ```
 
-If the OTP code expires while publishing, re-run this command and answer "y" to the questions about whether it was expected for already published packages.
-
-<sup>1: We have plans to make this less awkward. Ideally these releases will be published by a cron job.</sup>
-
 ## 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.
@@ -92,8 +80,6 @@ scripts/release/publish.js --tags latest
 scripts/release/publish.js --tags latest next
 ```
 
-If the OTP code expires while publishing, re-run this command and answer "y" to the questions about whether it was expected for already published packages.
-
 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>
@@ -145,9 +131,9 @@ Downloads build artifacts from Circle CI in preparation to be published to NPM a
 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 build 124756](https://circleci.com/gh/facebook/react/124756#artifacts/containers/0) you would run:
+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 --build=124756
+scripts/release/prepare-release-from-ci.js --commit=0e526bc -r stable
 ```
 
 ## `prepare-release-from-npm`
diff --git a/scripts/release/download-experimental-build-commands/print-summary.js b/scripts/release/download-experimental-build-commands/print-summary.js
index 2edf35f96fa1..21e97c0dd504 100644
--- a/scripts/release/download-experimental-build-commands/print-summary.js
+++ b/scripts/release/download-experimental-build-commands/print-summary.js
@@ -5,8 +5,9 @@
 const clear = require('clear');
 const {join, relative} = require('path');
 const theme = require('../theme');
+const {getCommitFromCurrentBuild} = require('../utils');
 
-module.exports = ({build}) => {
+module.exports = async () => {
   const commandPath = relative(
     process.env.PWD,
     join(__dirname, '../download-experimental-build.js')
@@ -14,11 +15,13 @@ module.exports = ({build}) => {
 
   clear();
 
+  const commit = await getCommitFromCurrentBuild();
+
   const message = theme`
     {caution An experimental build has been downloaded!}
 
     You can download this build again by running:
-    {path   ${commandPath}} --build={build ${build}}
+    {path   ${commandPath}} --commit={commit ${commit}}
   `;
 
   console.log(message.replace(/\n +/g, '\n').trim());
diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
index 2bd77a67d122..e722306d6039 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -17,6 +17,9 @@ const printSummary = require('./download-experimental-build-commands/print-summa
 const run = async () => {
   try {
     addDefaultParamValue('-r', '--releaseChannel', 'experimental');
+
+    // Default to the latest commit in master.
+    // If this is a reproducible build (e.g. Firefox tester) a --commit will be specified.
     addDefaultParamValue(null, '--commit', 'master');
 
     const params = await parseParams();
diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index 12b0b76409a7..76885ff7af9a 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -3,11 +3,10 @@
 'use strict';
 
 const {join} = require('path');
-const {handleError} = require('./utils');
+const {addDefaultParamValue, handleError} = require('./utils');
 
 const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
 const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
-const getLatestMasterBuildNumber = require('./shared-commands/get-latest-master-build-number');
 const parseParams = require('./shared-commands/parse-params');
 const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
 const testPackagingFixture = require('./shared-commands/test-packaging-fixture');
@@ -15,13 +14,11 @@ const testTracingFixture = require('./shared-commands/test-tracing-fixture');
 
 const run = async () => {
   try {
+    addDefaultParamValue(null, '--commit', 'master');
+
     const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
 
-    if (!params.build) {
-      params.build = await getLatestMasterBuildNumber(false);
-    }
-
     await checkEnvironmentVariables(params);
     await downloadBuildArtifacts(params);
 
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index 4d5259e24d1c..cca62baabdef 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -50,9 +50,9 @@ const run = async ({build, cwd, releaseChannel}) => {
   await exec(`cp -r ./build2/${sourceDir} ./build/node_modules`, {cwd});
 };
 
-module.exports = async ({build, cwd, releaseChannel}) => {
+module.exports = async ({build, commit, cwd, releaseChannel}) => {
   return logPromise(
     run({build, cwd, releaseChannel}),
-    theme`Downloading artifacts from Circle CI for build {build ${build}}`
+    theme`Downloading artifacts from Circle CI for commit {commit ${commit}} (build {build ${build}})`
   );
 };
diff --git a/scripts/release/shared-commands/get-latest-master-build-number.js b/scripts/release/shared-commands/get-latest-master-build-number.js
deleted file mode 100644
index d0bcd56e2e04..000000000000
--- a/scripts/release/shared-commands/get-latest-master-build-number.js
+++ /dev/null
@@ -1,27 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-const http = require('request-promise-json');
-const {logPromise} = require('../utils');
-
-const run = async () => {
-  // https://circleci.com/docs/api/#recent-builds-for-a-project-branch
-  const metadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/tree/master`;
-  const metadata = await http.get(metadataURL, true);
-  const build = metadata.find(
-    entry =>
-      entry.branch === 'master' &&
-      entry.status === 'success' &&
-      entry.workflows.job_name === 'process_artifacts_combined'
-  ).build_num;
-
-  return build;
-};
-
-module.exports = async params => {
-  return logPromise(
-    run(params),
-    'Determining latest Circle CI for the master branch'
-  );
-};
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
index 9af398cbc852..5baec235b661 100644
--- a/scripts/release/shared-commands/parse-params.js
+++ b/scripts/release/shared-commands/parse-params.js
@@ -4,15 +4,9 @@
 
 const commandLineArgs = require('command-line-args');
 const getBuildIdForCommit = require('../get-build-id-for-commit');
+const theme = require('../theme');
 
 const paramDefinitions = [
-  {
-    name: 'build',
-    type: Number,
-    description:
-      'Circle CI build identifier (e.g. https://circleci.com/gh/facebook/react/<build>)',
-    defaultValue: null,
-  },
   {
     name: 'commit',
     type: String,
@@ -37,29 +31,25 @@ const paramDefinitions = [
 module.exports = async () => {
   const params = commandLineArgs(paramDefinitions);
 
-  if (params.build !== null) {
-    // TODO: Should we just remove the `build` param? Seems like `commit` is a
-    // sufficient replacement.
-  } else {
-    if (params.commit === null) {
-      console.error('Must provide either `build` or `commit`.');
-      process.exit(1);
-    }
-    try {
-      params.build = await getBuildIdForCommit(params.commit);
-    } catch (error) {
-      console.error(error.message);
-      process.exit(1);
-    }
-  }
-
   const channel = params.releaseChannel;
   if (channel !== 'experimental' && channel !== 'stable') {
     console.error(
-      `Invalid release channel (-r) "${channel}". Must be "stable" or "experimental".`
+      theme.error`Invalid release channel (-r) "${channel}". Must be "stable" or "experimental".`
     );
     process.exit(1);
   }
 
+  if (params.commit === null) {
+    console.error(theme.error`No --commit param specified.`);
+    process.exit(1);
+  }
+
+  try {
+    params.build = await getBuildIdForCommit(params.commit);
+  } catch (error) {
+    console.error(theme.error(error));
+    process.exit(1);
+  }
+
   return params;
 };
diff --git a/scripts/release/theme.js b/scripts/release/theme.js
index 5c23185cba8c..5e3ef374f962 100644
--- a/scripts/release/theme.js
+++ b/scripts/release/theme.js
@@ -15,6 +15,7 @@ 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;
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index 08ffdeb7c8c9..3aa81329c166 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -3,7 +3,7 @@
 const {exec} = require('child-process-promise');
 const {createPatch} = require('diff');
 const {hashElement} = require('folder-hash');
-const {readFileSync, writeFileSync} = require('fs');
+const {existsSync, readFileSync, writeFileSync} = require('fs');
 const {readJson, writeJson} = require('fs-extra');
 const http = require('request-promise-json');
 const logUpdate = require('log-update');
@@ -47,6 +47,16 @@ const execRead = async (command, options) => {
   return stdout.trim();
 };
 
+const extractCommitFromVersionNumber = version => {
+  // Support stable version format e.g. "0.0.0-0e526bcec"
+  // and experimental version format e.g. "0.0.0-experimental-0e526bcec"
+  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 getArtifactsList = async buildID => {
   const buildMetadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${buildID}?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
   const buildMetadata = await http.get(buildMetadataURL, true);
@@ -115,6 +125,35 @@ const getChecksumForCurrentRevision = async cwd => {
   return hashedPackages.hash.slice(0, 7);
 };
 
+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,
+    'build2',
+    'oss-experimental',
+    'react',
+    'build-info.json'
+  );
+  if (existsSync(buildInfoJSON)) {
+    const buildInfo = await readJson(buildInfoJSON);
+    return buildInfo.commit;
+  } else {
+    const packageJSON = join(
+      cwd,
+      'build2',
+      'oss-experimental',
+      'react',
+      'package.json'
+    );
+    const {version} = await readJson(packageJSON);
+    return extractCommitFromVersionNumber(version);
+  }
+};
+
 const getPublicPackages = isExperimental => {
   if (isExperimental) {
     return [
@@ -270,6 +309,7 @@ module.exports = {
   getArtifactsList,
   getBuildInfo,
   getChecksumForCurrentRevision,
+  getCommitFromCurrentBuild,
   getPublicPackages,
   handleError,
   logPromise,

From b936ab660a82a936450f7742b2119cc30f54f97d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 10:29:51 -0600
Subject: [PATCH 0222/1603] Update sizebot to new workflow (#20719)

* build-combined: Fix bundle sizes path

* Output COMMIT_SHA in build directory

Alternative to parsing an arbitrary package's version number, or
its `build-info.json`.

* Remove CircleCI environment variable requirement

I think this only reason we needed this was to support passing any
job id to `--build`, instead of requiring the `process_artifacts` job.
And to do that you needed to use the workflows API endpoint, which
requires an API token.

But now that the `--commit` argument exists and automatically finds the
correct job id, we can just use that.

* Add CI job that gets base artifacts

Uses download-experimental script and places the base artifacts into
a top-level folder.

* Migrate sizebot to combined workflow

Replaces the two separate sizebot jobs (one for each channel, stable and
experimental) with a single combined job that outputs size information
for all bundles in a single GitHub comment.

I didn't attempt to simplify the output at all, but we should. I think
what I would do is remove our custom Rollup sizes plugin, and read the
sizes from the filesystem instead. We would lose some information about
the build configuration used to generate each artifact, but that can be
inferred from the filepath. For example, the filepath
`fb-www/ReactDOM-dev.classic.js` already tells us everything we need to
know about the artifact. Leaving this for a follow up.

* Move GitHub status check inside retry loop

The download script will poll the CircleCI endpoint until the build job
is complete; it should also poll the GitHub status endpoint if the
build job hasn't been spawned yet.

* Only run get_base_build on main branch
---
 .circleci/config.yml                          | 101 +++++-----
 dangerfile.js                                 | 185 +++++++-----------
 .../release/download-experimental-build.js    |   2 -
 scripts/release/get-build-id-for-commit.js    |  12 +-
 scripts/release/prepare-release-from-ci.js    |   2 -
 .../check-environment-variables.js            |  30 ---
 scripts/release/utils.js                      |  25 +--
 7 files changed, 126 insertions(+), 231 deletions(-)
 delete mode 100644 scripts/release/shared-commands/check-environment-variables.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index b5f760405902..bc1db679ec7d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -170,16 +170,28 @@ jobs:
       - *restore_node_modules
       - run: yarn build-combined
       - persist_to_workspace:
-          root: build2
+          root: .
           paths:
-            - facebook-www
-            - facebook-react-native
-            - facebook-relay
-            - oss-stable
-            - oss-experimental
-            - react-native
-            - dist
-            - sizes/*.json
+            - build2
+
+  get_base_build:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Download artifacts for base revision
+          command: |
+              git fetch origin master
+              cd ./scripts/release && yarn && cd ../../
+              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/master)
+              mv ./build2 ./base-build
+      - persist_to_workspace:
+          root: .
+          paths:
+            - base-build
 
   process_artifacts_combined:
     docker: *docker
@@ -187,14 +199,28 @@ jobs:
     steps:
       - checkout
       - attach_workspace:
-          at: build2
+          at: .
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
+      - run: echo "<< pipeline.git.revision	>>" >> build2/COMMIT_SHA
         # Compress build directory into a single tarball for easy download
       - run: tar -zcvf ./build2.tgz ./build2
       - store_artifacts:
           path: ./build2.tgz
 
+  sizebot:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: echo "<< pipeline.git.revision	>>" >> build2/COMMIT_SHA
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          command: node ./scripts/tasks/danger
+
   build_devtools_and_process_artifacts:
     docker: *docker
     environment: *environment
@@ -261,38 +287,6 @@ jobs:
   process_artifacts: *process_artifacts
   process_artifacts_experimental: *process_artifacts
 
-  sizebot_stable:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      # This runs in the process_artifacts job, too, but it's faster to run
-      # this step in both jobs instead of running the jobs sequentially
-      - run: node ./scripts/rollup/consolidateBundleSizes.js
-      - run:
-          environment:
-            RELEASE_CHANNEL: stable
-          command: node ./scripts/tasks/danger
-
-  sizebot_experimental:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      # This runs in the process_artifacts job, too, but it's faster to run
-      # this step in both jobs instead of running the jobs sequentially
-      - run: node ./scripts/rollup/consolidateBundleSizes.js
-      - run:
-          environment:
-            RELEASE_CHANNEL: experimental
-          command: node ./scripts/tasks/danger
-
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -341,7 +335,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace:
-          at: build2
+          at: .
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn test --build <<parameters.args>> --ci
@@ -394,9 +388,6 @@ workflows:
       - process_artifacts:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
-      - sizebot_stable:
-          requires:
-            - RELEASE_CHANNEL_stable_yarn_build
       - RELEASE_CHANNEL_stable_yarn_lint_build:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
@@ -413,9 +404,6 @@ workflows:
       - process_artifacts_experimental:
           requires:
             - yarn_build
-      - sizebot_experimental:
-          requires:
-            - yarn_build
       - yarn_lint_build:
           requires:
             - yarn_build
@@ -495,6 +483,21 @@ workflows:
                 # - "-r=www-modern --env=production --variant"
 
                 # TODO: Test more persistent configurations?
+      - get_base_build:
+          filters:
+            branches:
+              ignore:
+                - master
+          requires:
+            - setup
+      - sizebot:
+          filters:
+            branches:
+              ignore:
+                - master
+          requires:
+            - get_base_build
+            - yarn_build_combined
   fuzz_tests:
     triggers:
       - schedule:
diff --git a/dangerfile.js b/dangerfile.js
index 86e7e422a5b4..209d7a284926 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -26,34 +26,10 @@
 // `DANGER_GITHUB_API_TOKEN=[ENV_ABOVE] yarn danger pr https://github.com/facebook/react/pull/11865
 
 const {markdown, danger, warn} = require('danger');
-const fetch = require('node-fetch');
 
 const {generateResultsArray} = require('./scripts/rollup/stats');
-const {existsSync, readFileSync} = require('fs');
-const {exec} = require('child_process');
-
-// This must match the name of the CI job that creates the build artifacts
-const RELEASE_CHANNEL =
-  process.env.RELEASE_CHANNEL === 'experimental' ? 'experimental' : 'stable';
-const artifactsJobName =
-  process.env.RELEASE_CHANNEL === 'experimental'
-    ? 'process_artifacts_experimental'
-    : 'process_artifacts';
-
-if (!existsSync('./build/bundle-sizes.json')) {
-  // This indicates the build failed previously.
-  // In that case, there's nothing for the Dangerfile to do.
-  // Exit early to avoid leaving a redundant (and potentially confusing) PR comment.
-  warn(
-    'No bundle size information found. This indicates the build ' +
-      'job failed.'
-  );
-  process.exit(0);
-}
-
-const currentBuildResults = JSON.parse(
-  readFileSync('./build/bundle-sizes.json')
-);
+const {readFileSync, readdirSync} = require('fs');
+const path = require('path');
 
 /**
  * Generates a Markdown table
@@ -100,99 +76,23 @@ function setBoldness(row, isBold) {
   }
 }
 
-/**
- * Gets the commit that represents the merge between the current branch
- * and master.
- */
-function git(args) {
-  return new Promise(res => {
-    exec('git ' + args, (err, stdout, stderr) => {
-      if (err) {
-        throw err;
-      } else {
-        res(stdout.trim());
-      }
-    });
-  });
-}
-
-(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;
-  }
-
-  markdown(`## Size changes (${RELEASE_CHANNEL})`);
-
-  const upstreamRef = danger.github.pr.base.ref;
-  await git(`remote add upstream https://github.com/facebook/react.git`);
-  await git('fetch upstream');
-  const baseCommit = await git(`merge-base HEAD upstream/${upstreamRef}`);
-
-  let previousBuildResults = null;
-  try {
-    let baseCIBuildId = null;
-    const statusesResponse = await fetch(
-      `https://api.github.com/repos/facebook/react/commits/${baseCommit}/status`
-    );
-    const {statuses, state} = await statusesResponse.json();
-    if (state === 'failure') {
-      warn(`Base commit is broken: ${baseCommit}`);
-      return;
-    }
-    for (let i = 0; i < statuses.length; i++) {
-      const status = statuses[i];
-      if (status.context === `ci/circleci: ${artifactsJobName}`) {
-        if (status.state === 'success') {
-          baseCIBuildId = /\/facebook\/react\/([0-9]+)/.exec(
-            status.target_url
-          )[1];
-          break;
-        }
-        if (status.state === 'pending') {
-          warn(`Build job for base commit is still pending: ${baseCommit}`);
-          return;
-        }
-      }
+function getBundleSizes(pathToSizesDir) {
+  const filenames = readdirSync(pathToSizesDir);
+  let bundleSizes = [];
+  for (let i = 0; i < filenames.length; i++) {
+    const filename = filenames[i];
+    if (filename.endsWith('.json')) {
+      const json = readFileSync(path.join(pathToSizesDir, filename));
+      bundleSizes.push(...JSON.parse(json).bundleSizes);
     }
-
-    if (baseCIBuildId === null) {
-      warn(`Could not find build artifacts for base commit: ${baseCommit}`);
-      return;
-    }
-
-    const baseArtifactsInfoResponse = await fetch(
-      `https://circleci.com/api/v1.1/project/github/facebook/react/${baseCIBuildId}/artifacts`
-    );
-    const baseArtifactsInfo = await baseArtifactsInfoResponse.json();
-
-    for (let i = 0; i < baseArtifactsInfo.length; i++) {
-      const info = baseArtifactsInfo[i];
-      if (info.path.endsWith('bundle-sizes.json')) {
-        const resultsResponse = await fetch(info.url);
-        previousBuildResults = await resultsResponse.json();
-        break;
-      }
-    }
-  } catch (error) {
-    warn(`Failed to fetch build artifacts for base commit: ${baseCommit}`);
-    return;
-  }
-
-  if (previousBuildResults === null) {
-    warn(`Could not find build artifacts for base commit: ${baseCommit}`);
-    return;
   }
+  return {bundleSizes};
+}
 
+async function printResultsForChannel(baseResults, headResults) {
   // Take the JSON of the build response and
   // make an array comparing the results for printing
-  const results = generateResultsArray(
-    currentBuildResults,
-    previousBuildResults
-  );
+  const results = generateResultsArray(baseResults, headResults);
 
   const packagesToShow = results
     .filter(
@@ -281,15 +181,62 @@ function git(args) {
   <details>
   <summary>Details of bundled changes.</summary>
 
-  <p>Comparing: ${baseCommit}...${danger.github.pr.head.sha}</p>
-
-
   ${allTables.join('\n')}
 
   </details>
   `;
-    markdown(summary);
+    return summary;
   } else {
-    markdown('No significant bundle size changes to report.');
+    return 'No significant bundle size changes to report.';
   }
+}
+
+(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 headSizesStable;
+  let headSizesExperimental;
+
+  let baseSha;
+  let baseSizesStable;
+  let baseSizesExperimental;
+
+  try {
+    headSha = (readFileSync('./build2/COMMIT_SHA') + '').trim();
+    headSizesStable = getBundleSizes('./build2/sizes-stable');
+    headSizesExperimental = getBundleSizes('./build2/sizes-experimental');
+
+    baseSha = (readFileSync('./base-build/COMMIT_SHA') + '').trim();
+    baseSizesStable = getBundleSizes('./base-build/sizes-stable');
+    baseSizesExperimental = getBundleSizes('./base-build/sizes-experimental');
+  } 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;
+  }
+
+  markdown(`
+## Size changes
+
+<p>Comparing: ${baseSha}...${headSha}</p>
+
+### Stable channel
+
+${await printResultsForChannel(baseSizesStable, headSizesStable)}
+
+### Experimental channel
+
+${await printResultsForChannel(baseSizesExperimental, headSizesExperimental)}
+`);
 })();
diff --git a/scripts/release/download-experimental-build.js b/scripts/release/download-experimental-build.js
index e722306d6039..7f8b11dba122 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -9,7 +9,6 @@ const {
   handleError,
 } = require('./utils');
 
-const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
 const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
 const parseParams = require('./shared-commands/parse-params');
 const printSummary = require('./download-experimental-build-commands/print-summary');
@@ -26,7 +25,6 @@ const run = async () => {
     params.cwd = join(__dirname, '..', '..');
     params.packages = await getPublicPackages(true);
 
-    await checkEnvironmentVariables(params);
     await downloadBuildArtifacts(params);
 
     printSummary(params);
diff --git a/scripts/release/get-build-id-for-commit.js b/scripts/release/get-build-id-for-commit.js
index fca6d0280d3a..15cbe7de52c4 100644
--- a/scripts/release/get-build-id-for-commit.js
+++ b/scripts/release/get-build-id-for-commit.js
@@ -35,13 +35,15 @@ async function getBuildIdForCommit(sha) {
         if (status.state === 'failure') {
           throw new Error(`Build job for commit failed: ${sha}`);
         }
-        if (Date.now() < retryLimit) {
-          await wait(POLLING_INTERVAL);
-          continue retry;
-        }
-        throw new Error('Exceeded retry limit. Build job is still pending.');
       }
     }
+    if (state === 'pending') {
+      if (Date.now() < retryLimit) {
+        await wait(POLLING_INTERVAL);
+        continue retry;
+      }
+      throw new Error('Exceeded retry limit. Build job is still pending.');
+    }
     throw new Error('Could not find build for commit: ' + sha);
   }
 }
diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index 76885ff7af9a..3ec76a6a7a46 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -5,7 +5,6 @@
 const {join} = require('path');
 const {addDefaultParamValue, handleError} = require('./utils');
 
-const checkEnvironmentVariables = require('./shared-commands/check-environment-variables');
 const downloadBuildArtifacts = require('./shared-commands/download-build-artifacts');
 const parseParams = require('./shared-commands/parse-params');
 const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
@@ -19,7 +18,6 @@ const run = async () => {
     const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
 
-    await checkEnvironmentVariables(params);
     await downloadBuildArtifacts(params);
 
     if (!params.skipTests) {
diff --git a/scripts/release/shared-commands/check-environment-variables.js b/scripts/release/shared-commands/check-environment-variables.js
deleted file mode 100644
index a041d399678d..000000000000
--- a/scripts/release/shared-commands/check-environment-variables.js
+++ /dev/null
@@ -1,30 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-const theme = require('../theme');
-
-module.exports = () => {
-  if (!process.env.CIRCLE_CI_API_TOKEN) {
-    console.error(
-      theme`
-      {error Missing CircleCI API token}
-
-      The CircleCI API is used to download build artifacts.
-      This API requires a token which must be exposed via a {underline CIRCLE_CI_API_TOKEN} environment var.
-      In order to run this script you will need to create your own API token.
-      Instructions can be found at:
-
-      {link https://app.circleci.com/settings/user/tokens}
-
-      To make this token available to the release script, add it to your {path .bash_profile} like so:
-
-      {dimmed # React release script}
-      export CIRCLE_CI_API_TOKEN=<your-token-here>
-    `
-        .replace(/\n +/g, '\n')
-        .trim()
-    );
-    process.exit(1);
-  }
-};
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index 3aa81329c166..ca9803b3b369 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -58,31 +58,8 @@ const extractCommitFromVersionNumber = version => {
 };
 
 const getArtifactsList = async buildID => {
-  const buildMetadataURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${buildID}?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
-  const buildMetadata = await http.get(buildMetadataURL, true);
-  if (!buildMetadata.workflows || !buildMetadata.workflows.workflow_id) {
-    console.log(
-      theme`{error Could not find workflow info for build ${buildID}.}`
-    );
-    process.exit(1);
-  }
-  const artifactsJobName = 'process_artifacts_combined';
-  const workflowID = buildMetadata.workflows.workflow_id;
-  const workflowMetadataURL = `https://circleci.com/api/v2/workflow/${workflowID}/job?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
-  const workflowMetadata = await http.get(workflowMetadataURL, true);
-  const job = workflowMetadata.items.find(
-    ({name}) => name === artifactsJobName
-  );
-  if (!job || !job.job_number) {
-    console.log(
-      theme`{error Could not find "${artifactsJobName}" job for workflow ${workflowID}.}`
-    );
-    process.exit(1);
-  }
-
-  const jobArtifactsURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${job.job_number}/artifacts?circle-token=${process.env.CIRCLE_CI_API_TOKEN}`;
+  const jobArtifactsURL = `https://circleci.com/api/v1.1/project/github/facebook/react/${buildID}/artifacts`;
   const jobArtifacts = await http.get(jobArtifactsURL, true);
-
   return jobArtifacts;
 };
 

From 0935a1db3d2c1b9c2b09ea348d0db929757f9de0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 10:45:29 -0600
Subject: [PATCH 0223/1603] Delete consolidateBundleSizes script (#20724)

This was ported to the new workflow by #20720
---
 .circleci/config.yml                     | 36 ------------------------
 scripts/rollup/consolidateBundleSizes.js | 25 ----------------
 2 files changed, 61 deletions(-)
 delete mode 100644 scripts/rollup/consolidateBundleSizes.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index bc1db679ec7d..0605a0a0f4b9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -23,31 +23,6 @@ aliases:
   - &attach_workspace
     at: build
 
-  - &process_artifacts
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run: node ./scripts/rollup/consolidateBundleSizes.js
-      - run: ./scripts/circleci/pack_and_store_artifact.sh
-      - store_artifacts:
-          path: ./node_modules.tgz
-      - store_artifacts:
-          path: ./build.tgz
-      - store_artifacts:
-          path: ./build/bundle-sizes.json
-      - store_artifacts:
-          # TODO: Update release script to use local file instead of pulling
-          # from artifacts.
-          path: ./scripts/error-codes/codes.json
-      - persist_to_workspace:
-          root: build
-          paths:
-            - bundle-sizes.json
-
 jobs:
   setup:
     docker: *docker
@@ -282,11 +257,6 @@ jobs:
             cd packages/react-devtools-scheduling-profiler
             yarn vercel deploy dist --prod --confirm --token $SCHEDULING_PROFILER_DEPLOY_VERCEL_TOKEN
 
-  # These jobs are named differently so we can distinguish the stable and
-  # and experimental artifacts
-  process_artifacts: *process_artifacts
-  process_artifacts_experimental: *process_artifacts
-
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -385,9 +355,6 @@ workflows:
       - RELEASE_CHANNEL_stable_yarn_build:
           requires:
             - setup
-      - process_artifacts:
-          requires:
-            - RELEASE_CHANNEL_stable_yarn_build
       - RELEASE_CHANNEL_stable_yarn_lint_build:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
@@ -401,9 +368,6 @@ workflows:
       - yarn_build:
           requires:
             - setup
-      - process_artifacts_experimental:
-          requires:
-            - yarn_build
       - yarn_lint_build:
           requires:
             - yarn_build
diff --git a/scripts/rollup/consolidateBundleSizes.js b/scripts/rollup/consolidateBundleSizes.js
deleted file mode 100644
index eb245099ba0f..000000000000
--- a/scripts/rollup/consolidateBundleSizes.js
+++ /dev/null
@@ -1,25 +0,0 @@
-'use strict';
-
-// Script that combines bundle size information for each build into a single
-// JSON file for easier storage and processing.
-
-const fs = require('fs');
-const path = require('path');
-
-const BUILD_DIR = path.join(__dirname, '../../build');
-
-const filenames = fs.readdirSync(path.join(BUILD_DIR, 'sizes'));
-
-let bundleSizes = [];
-for (let i = 0; i < filenames.length; i++) {
-  const filename = filenames[i];
-  if (filename.endsWith('.json')) {
-    const json = fs.readFileSync(path.join(BUILD_DIR, 'sizes', filename));
-    bundleSizes.push(...JSON.parse(json).bundleSizes);
-  }
-}
-
-const outputFilename = path.join(BUILD_DIR, 'bundle-sizes.json');
-const outputContents = JSON.stringify({bundleSizes}, null, 2);
-
-fs.writeFileSync(outputFilename, outputContents);

From 85f489a12963edf44a0892ad12cbf7fb4dfbe9ea Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 14:17:29 -0600
Subject: [PATCH 0224/1603] Add publish workflow, triggerable via API request
 (#20726)

Adds a new CircleCI workflow, which I will use to publish prereleases
(`next` and `experimental`) for a given commit.

The CircleCI API doesn't yet support triggering a specific workflow, but
it does support triggering a pipeline. So as a workaround you can
triggger the entire pipeline and use parameters to disable everything
except the workflow you want. CircleCI recommends this workaround here:
https://support.circleci.com/hc/en-us/articles/360050351292-How-to-trigger-a-workflow-via-CircleCI-API-v2-

Eventually we can set this workflow to trigger on a cron schedule (once
per week, for example).
---
 .circleci/config.yml | 49 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 0605a0a0f4b9..0b1eebb1b66d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -23,6 +23,17 @@ aliases:
   - &attach_workspace
     at: build
 
+# The CircleCI API doesn't yet support triggering a specific workflow, but it
+# does support triggering a pipeline. So as a workaround you can triggger the
+# entire pipeline and use parameters to disable everything except the workflow
+# you want. CircleCI recommends this workaround here:
+# https://support.circleci.com/hc/en-us/articles/360050351292-How-to-trigger-a-workflow-via-CircleCI-API-v2-
+parameters:
+  # This is only set when triggering the CI pipeline via an API request.
+  prerelease_commit_sha:
+    type: string
+    default: ''
+
 jobs:
   setup:
     docker: *docker
@@ -341,9 +352,27 @@ jobs:
             FUZZ_TEST_SEED=$RANDOM yarn test fuzz --ci
             FUZZ_TEST_SEED=$RANDOM yarn test --prod fuzz --ci
 
+  publish_prerelease:
+    parameters:
+      commit_sha:
+        type: string
+      release_channel:
+        type: string
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      # TODO: This doesn't actually publish anything yet. Just logs the inputs.
+      - run: |
+          echo "<< parameters.commit_sha >>"
+          echo "<< parameters.release_channel >>"
+
 workflows:
   version: 2
   stable:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
     jobs:
       - setup
       - yarn_lint:
@@ -363,6 +392,7 @@ workflows:
             - RELEASE_CHANNEL_stable_yarn_build
 
   experimental:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
     jobs:
       - setup
       - yarn_build:
@@ -387,6 +417,7 @@ workflows:
 
   # New workflow that will replace "stable" and "experimental"
   build_and_test:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
     jobs:
       - setup
       - yarn_test:
@@ -463,6 +494,7 @@ workflows:
             - get_base_build
             - yarn_build_combined
   fuzz_tests:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
     triggers:
       - schedule:
           # Fuzz tests run hourly
@@ -476,3 +508,20 @@ workflows:
       - test_fuzz:
           requires:
             - setup
+
+  # TODO: This workflow doesn't do anything yet, but you should be able to
+  # trigger it using the CircleCI API
+  publish_preleases:
+    when: << pipeline.parameters.prerelease_commit_sha >>
+    jobs:
+      - setup
+      - publish_prerelease:
+          requires:
+            - setup
+          matrix:
+            parameters:
+              commit_sha:
+                - << pipeline.parameters.prerelease_commit_sha >>
+              release_channel:
+                - stable
+                - experimental

From 3be750eee9cda6c20fc3e69eb454215125609d37 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 14:17:40 -0600
Subject: [PATCH 0225/1603] Add --ci option to publish script (#20727)

When running in CI, the publish script will skip interactive prompts,
including the prompt for a one-time password.

Instead, CI will need to use an automation access token:
https://docs.npmjs.com/using-private-packages-in-a-ci-cd-workflow
---
 .../confirm-version-and-tags.js               |  6 +-
 .../release/publish-commands/parse-params.js  |  8 ++-
 .../publish-commands/publish-to-npm.js        | 72 +++++++++++++------
 scripts/release/publish.js                    | 45 +++++++-----
 4 files changed, 89 insertions(+), 42 deletions(-)

diff --git a/scripts/release/publish-commands/confirm-version-and-tags.js b/scripts/release/publish-commands/confirm-version-and-tags.js
index bea395fba85c..6900878da02f 100644
--- a/scripts/release/publish-commands/confirm-version-and-tags.js
+++ b/scripts/release/publish-commands/confirm-version-and-tags.js
@@ -8,7 +8,7 @@ const {join} = require('path');
 const {confirm} = require('../utils');
 const theme = require('../theme');
 
-const run = async ({cwd, packages, tags}) => {
+const run = async ({cwd, packages, tags, ci}) => {
   clear();
 
   if (tags.length === 0) {
@@ -40,7 +40,9 @@ const run = async ({cwd, packages, tags}) => {
     );
   }
 
-  await confirm('Do you want to proceed?');
+  if (!ci) {
+    await confirm('Do you want to proceed?');
+  }
 
   clear();
 };
diff --git a/scripts/release/publish-commands/parse-params.js b/scripts/release/publish-commands/parse-params.js
index 05194fbe2c07..03b8be209d54 100644
--- a/scripts/release/publish-commands/parse-params.js
+++ b/scripts/release/publish-commands/parse-params.js
@@ -26,6 +26,12 @@ const paramDefinitions = [
     description: 'Packages to exclude from publishing',
     defaultValue: [],
   },
+  {
+    name: 'ci',
+    type: Boolean,
+    description: 'Run in automated environment, without interactive prompts.',
+    defaultValue: false,
+  },
 ];
 
 module.exports = () => {
@@ -40,7 +46,7 @@ module.exports = () => {
       case 'untagged':
         break;
       default:
-        console.error('Unknown tag: "' + params.tag + '"');
+        console.error('Unsupported tag: "' + tag + '"');
         process.exit(1);
         break;
     }
diff --git a/scripts/release/publish-commands/publish-to-npm.js b/scripts/release/publish-commands/publish-to-npm.js
index 71c347e4cc47..28035b052107 100644
--- a/scripts/release/publish-commands/publish-to-npm.js
+++ b/scripts/release/publish-commands/publish-to-npm.js
@@ -8,7 +8,7 @@ const {join} = require('path');
 const {confirm, execRead} = require('../utils');
 const theme = require('../theme');
 
-const run = async ({cwd, dry, tags}, packageName, otp) => {
+const run = async ({cwd, dry, tags, ci}, packageName, otp) => {
   const packagePath = join(cwd, 'build/node_modules', packageName);
   const {version} = readJsonSync(join(packagePath, 'package.json'));
 
@@ -21,42 +21,74 @@ const run = async ({cwd, dry, tags}, packageName, otp) => {
     console.log(
       theme`{package ${packageName}} {version ${version}} has already been published.`
     );
-    await confirm('Is this expected?');
+    if (!ci) {
+      await confirm('Is this expected?');
+    }
   } else {
     console.log(theme`{spinnerSuccess ✓} Publishing {package ${packageName}}`);
 
     // Publish the package and tag it.
     if (!dry) {
-      await exec(`npm publish --tag=${tags[0]} --otp=${otp}`, {
-        cwd: packagePath,
-      });
+      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]}`));
+      }
     }
-    console.log(theme.command(`  cd ${packagePath}`));
-    console.log(theme.command(`  npm publish --tag=${tags[0]} --otp=${otp}`));
 
     for (let j = 1; j < tags.length; j++) {
       if (!dry) {
-        await exec(
-          `npm dist-tag add ${packageName}@${version} ${tags[j]} --otp=${otp}`,
-          {cwd: packagePath}
-        );
+        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]}`
+            )
+          );
+        }
       }
-      console.log(
-        theme.command(
-          `  npm dist-tag add ${packageName}@${version} ${tags[j]} --otp=${otp}`
-        )
-      );
     }
 
     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) {
-        await exec(`npm dist-tag rm ${packageName} untagged --otp=${otp}`);
+        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`)
+          );
+        }
       }
-      console.log(
-        theme.command(`  npm dist-tag rm ${packageName} untagged --otp=${otp}`)
-      );
     }
   }
 };
diff --git a/scripts/release/publish.js b/scripts/release/publish.js
index f0d2fd76228a..e1e0e11cbde6 100755
--- a/scripts/release/publish.js
+++ b/scripts/release/publish.js
@@ -50,28 +50,35 @@ const run = async () => {
     await validateSkipPackages(params);
     await checkNPMPermissions(params);
 
-    clear();
-    let otp = await promptForOTP(params);
     const packageNames = params.packages;
-    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;
+
+    if (params.ci) {
+      for (let i = 0; i < packageNames.length; i++) {
+        const packageName = packageNames[i];
+        await publishToNPM(params, packageName, null);
       }
+    } 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);
     }
-
-    await updateStableVersionNumbers(params);
-    await printFollowUpInstructions(params);
   } catch (error) {
     handleError(error);
   }

From 00e38c80b28fd9b5e99b890d85e080edc2fcc49f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 17:33:46 -0600
Subject: [PATCH 0226/1603] Fallback if GitHub status is stuck as "pending"
 (#20729)

GitHub's status API is super flaky. Sometimes it reports a job as
"pending" even after it completes in CircleCI. If it's still pending
when we time out, return the build ID anyway. TODO: The location of the
retry loop is a bit weird. We should probably combine this function with
the one that downloads the artifacts, and wrap the retry loop around the
whole thing.
---
 scripts/release/get-build-id-for-commit.js | 23 +++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/scripts/release/get-build-id-for-commit.js b/scripts/release/get-build-id-for-commit.js
index 15cbe7de52c4..a5c6d96b02c8 100644
--- a/scripts/release/get-build-id-for-commit.js
+++ b/scripts/release/get-build-id-for-commit.js
@@ -2,8 +2,8 @@
 
 const fetch = require('node-fetch');
 
-const POLLING_INTERVAL = 5 * 1000; // 5 seconds
-const RETRY_TIMEOUT = 10 * 60 * 1000; // 10 minutes
+const POLLING_INTERVAL = 10 * 1000; // 10 seconds
+const RETRY_TIMEOUT = 4 * 60 * 1000; // 4 minutes
 
 function wait(ms) {
   return new Promise(resolve => {
@@ -11,6 +11,10 @@ function wait(ms) {
   });
 }
 
+function scrapeBuildIDFromStatus(status) {
+  return /\/facebook\/react\/([0-9]+)/.exec(status.target_url)[1];
+}
+
 async function getBuildIdForCommit(sha) {
   const retryLimit = Date.now() + RETRY_TIMEOUT;
   retry: while (true) {
@@ -30,11 +34,24 @@ async function getBuildIdForCommit(sha) {
       const status = statuses[i];
       if (status.context === `ci/circleci: process_artifacts_combined`) {
         if (status.state === 'success') {
-          return /\/facebook\/react\/([0-9]+)/.exec(status.target_url)[1];
+          return scrapeBuildIDFromStatus(status);
         }
         if (status.state === 'failure') {
           throw new Error(`Build job for commit failed: ${sha}`);
         }
+        if (status.state === 'pending') {
+          if (Date.now() < retryLimit) {
+            await wait(POLLING_INTERVAL);
+            continue retry;
+          }
+          // GitHub's status API is super flaky. Sometimes it reports a job
+          // as "pending" even after it completes in CircleCI. If it's still
+          // pending when we time out, return the build ID anyway.
+          // TODO: The location of the retry loop is a bit weird. We should
+          // probably combine this function with the one that downloads the
+          // artifacts, and wrap the retry loop around the whole thing.
+          return scrapeBuildIDFromStatus(status);
+        }
       }
     }
     if (state === 'pending') {

From c1cfa734fd4e72850a9d583d03d4244dabcee585 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 17:42:34 -0600
Subject: [PATCH 0227/1603] Add command to publish preleases via CI (#20728)

```
yarn publish-prereleases
```

Script to trigger a CircleCI workflow that publishes preleases.

**The CI workflow doesn't actually publish yet; it just runs and logs
its inputs.**
---
 package.json                                 |   3 +-
 scripts/release/publish-using-ci-workflow.js | 117 +++++++++++++++++++
 2 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 scripts/release/publish-using-ci-workflow.js

diff --git a/package.json b/package.json
index bca998508f1d..ab63cd182a61 100644
--- a/package.json
+++ b/package.json
@@ -139,6 +139,7 @@
     "prettier-all": "node ./scripts/prettier/index.js write",
     "version-check": "node ./scripts/tasks/version-check.js",
     "merge-fork": "node ./scripts/merge-fork/merge-fork.js",
-    "replace-fork": "node ./scripts/merge-fork/replace-fork.js"
+    "replace-fork": "node ./scripts/merge-fork/replace-fork.js",
+    "publish-prereleases": "node ./scripts/release/publish-using-ci-workflow.js"
   }
 }
diff --git a/scripts/release/publish-using-ci-workflow.js b/scripts/release/publish-using-ci-workflow.js
new file mode 100644
index 000000000000..c9202baa2d7b
--- /dev/null
+++ b/scripts/release/publish-using-ci-workflow.js
@@ -0,0 +1,117 @@
+'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')
+  );
+  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 up to three times before giving up.
+  for (let i = 0; i < 3; 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);
+  }
+  throw new Error('Failed to create CircleCI workflow.');
+}
+
+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 pipelineResponse = await fetch(
+    'https://circleci.com/api/v2/project/github/facebook/react/pipeline',
+    {
+      method: 'post',
+      body: JSON.stringify({
+        parameters: {
+          // TODO: Make commit SHA configurable
+          prerelease_commit_sha: 'master',
+        },
+      }),
+      headers: {
+        'Circle-Token': CIRCLE_TOKEN,
+        'Content-Type': 'application/json',
+      },
+    }
+  );
+
+  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,
+  );
+
+  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);
+});

From 3b02ae5cc6192815b5936affa8ed68abd00866c7 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 3 Feb 2021 18:53:07 -0500
Subject: [PATCH 0228/1603] Add silent to codesandbox config (#20730)

---
 .codesandbox/ci.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 6f276d052e4a..aec1a3726ea0 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -6,5 +6,6 @@
     "react-dom": "build/node_modules/react-dom",
     "scheduler": "build/node_modules/scheduler"
   },
-  "sandboxes": ["new"]
+  "sandboxes": ["new"],
+  "silent": true
 }

From 4c019585e875b4197519052604764652a1ccb06a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 20:30:33 -0600
Subject: [PATCH 0229/1603] Empty commit to replace "broken" head of main

Head commit had a "broken" (but not really) CircleCI job and CircleCI
doesn't give me a way to clear/restart it. So I'm doing this.

From c64d6d21be19e179bd6a2d659fa78180051b577f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 22:57:31 -0600
Subject: [PATCH 0230/1603] Implement CI job that publishes prereleases
 (#20732)

PR #20728 added a command to initiate a prerelease using CI, but it left
the publish job unimplemented. This fills in the publish job.

Uses an npm automation token for authorization, which bypasses the need
for a one-time password. The token is configured via CircleCI's
environment variable panel.

Currently, it will always publish the head of the main branch. If the
head has already been published, it will exit gracefully.

It does not yet support publishing arbitrary commits, though we could
easily add that. I don't know how important that use case is, because
for PR branches, you can use CodeSandbox CI instead. Or as a last
resort, run the publish script locally.

Always publishing from main is nice because it further incentivizes us
to keep main in a releasable state. It also takes the guesswork out of
publishing a prerelease that's in a broken state: as long as we don't
merge broken PRs, we're fine.
---
 .circleci/config.yml       | 32 +++++++++++++++++++++-----------
 scripts/release/ci-npmrc   |  1 +
 scripts/release/publish.js | 18 ++++++++++++++++--
 3 files changed, 38 insertions(+), 13 deletions(-)
 create mode 100644 scripts/release/ci-npmrc

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 0b1eebb1b66d..858119399605 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -358,16 +358,22 @@ jobs:
         type: string
       release_channel:
         type: string
+      dist_tag:
+        type: string
     docker: *docker
     environment: *environment
     steps:
       - checkout
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
-      # TODO: This doesn't actually publish anything yet. Just logs the inputs.
-      - run: |
-          echo "<< parameters.commit_sha >>"
-          echo "<< parameters.release_channel >>"
+      - run:
+          name: Run publish script
+          command: |
+            git fetch origin master
+            cd ./scripts/release && yarn && cd ../../
+            scripts/release/prepare-release-from-ci.js --skipTests -r << parameters.release_channel >> --commit=<< parameters.commit_sha >>
+            cp ./scripts/release/ci-npmrc ~/.npmrc
+            scripts/release/publish.js --ci --tags << parameters.dist_tag >>
 
 workflows:
   version: 2
@@ -516,12 +522,16 @@ workflows:
     jobs:
       - setup
       - publish_prerelease:
+          name: Publish to Next channel
           requires:
             - setup
-          matrix:
-            parameters:
-              commit_sha:
-                - << pipeline.parameters.prerelease_commit_sha >>
-              release_channel:
-                - stable
-                - experimental
+          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          release_channel: stable
+          dist_tag: next
+      - publish_prerelease:
+          name: Publish to Experimental channel
+          requires:
+            - setup
+          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          release_channel: experimental
+          dist_tag: experimental
diff --git a/scripts/release/ci-npmrc b/scripts/release/ci-npmrc
new file mode 100644
index 000000000000..ae643592e765
--- /dev/null
+++ b/scripts/release/ci-npmrc
@@ -0,0 +1 @@
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
diff --git a/scripts/release/publish.js b/scripts/release/publish.js
index e1e0e11cbde6..79990cdbdc44 100755
--- a/scripts/release/publish.js
+++ b/scripts/release/publish.js
@@ -53,9 +53,23 @@ const run = async () => {
     const packageNames = params.packages;
 
     if (params.ci) {
+      let failed = false;
       for (let i = 0; i < packageNames.length; i++) {
-        const packageName = packageNames[i];
-        await publishToNPM(params, packageName, null);
+        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();

From f58ad2ad8ed2c38a111e1ab89d9f74fc925640ca Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Feb 2021 23:08:34 -0600
Subject: [PATCH 0231/1603] Auto-publish prereleases every weekday (#20733)

Sets up a cron trigger to publish prereleases at 16:00 UTC (11 am
Eastern, 8 am Pacific) on every weekday (Monday through Friday).
---
 .circleci/config.yml | 33 +++++++++++++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 858119399605..27e60d9a94f9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -515,8 +515,7 @@ workflows:
           requires:
             - setup
 
-  # TODO: This workflow doesn't do anything yet, but you should be able to
-  # trigger it using the CircleCI API
+  # Used to publish a prerelease manually via the command line
   publish_preleases:
     when: << pipeline.parameters.prerelease_commit_sha >>
     jobs:
@@ -535,3 +534,33 @@ workflows:
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: experimental
           dist_tag: experimental
+
+  # Publishes on a cron schedule
+  publish_preleases_nightly:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
+    triggers:
+      - schedule:
+          # At 16:00 UTC (11 am Eastern, 8 am Pacific) on every weekday (Monday
+          # through Friday)
+          cron: "0 16 * * 1-5"
+          filters:
+            branches:
+              only:
+                - master
+    jobs:
+      - setup
+      - publish_prerelease:
+          name: Publish to Next channel
+          requires:
+            - setup
+          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          release_channel: stable
+          dist_tag: next
+      - publish_prerelease:
+          name: Publish to Experimental channel
+          requires:
+            - setup
+          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          release_channel: experimental
+          dist_tag: experimental
+

From 365080f4f592c813f8ebd8bc4118802cd5d3b254 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 4 Feb 2021 09:34:12 -0600
Subject: [PATCH 0232/1603] Autopublish prereleases using head of main branch

Instead of using pipeline parameter. Fixes copypasta from the other
workflow, which accepts the SHA parameter via an API call.
---
 .circleci/config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 27e60d9a94f9..2e4a924d170f 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -553,14 +553,14 @@ workflows:
           name: Publish to Next channel
           requires:
             - setup
-          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          commit_sha: master
           release_channel: stable
           dist_tag: next
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
             - setup
-          commit_sha: << pipeline.parameters.prerelease_commit_sha >>
+          commit_sha: master
           release_channel: experimental
           dist_tag: experimental
 

From a703c3f7e85ea5d06c707f329872ed0b039f68f2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 4 Feb 2021 10:07:39 -0600
Subject: [PATCH 0233/1603] Fix cron syntax

Let's try this again?
---
 .circleci/config.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2e4a924d170f..f04d05b77b65 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -540,9 +540,8 @@ workflows:
     unless: << pipeline.parameters.prerelease_commit_sha >>
     triggers:
       - schedule:
-          # At 16:00 UTC (11 am Eastern, 8 am Pacific) on every weekday (Monday
-          # through Friday)
-          cron: "0 16 * * 1-5"
+          # At 10 minutes past 16:00 on Mon, Tue, Wed, Thu, and Fri
+          cron: "10 16 * * 1,2,3,4,5"
           filters:
             branches:
               only:

From b12d0078a4503a2e4397e65c9060df56193d7b27 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 4 Feb 2021 11:24:07 -0500
Subject: [PATCH 0234/1603] Fix codesandbox build command (#20731)

---
 .codesandbox/ci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index aec1a3726ea0..b57dd8fb5438 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/unstable_no_dom,scheduler/tracing",
+  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/unstable_no_dom,scheduler/tracing,react/jsx-runtime,react/jsx-dev-runtime",
   "publishDirectory": {
     "react": "build/node_modules/react",
     "react-dom": "build/node_modules/react-dom",

From 4e08fb10c999c21d301d1cda3c3aefeab893d0e9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 4 Feb 2021 15:20:49 -0600
Subject: [PATCH 0235/1603] Update release documentation (#20736)

Added information about automated prereleases
---
 scripts/release/README.md | 31 ++++++++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/scripts/release/README.md b/scripts/release/README.md
index 7d7ab15a389c..9fdde592927b 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -1,11 +1,27 @@
 # 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 goes like this:
+A typical release cycle goes like this:
 1. When a commit is pushed to the React repo, [Circle CI](https://circleci.com/gh/facebook/react/) will build all release bundles and run unit tests against both the source code and the built bundles.
-2. The release is then [**published to the `next` channel**](#publishing-release) using the [`prepare-release-from-ci`](#prepare-release-from-ci) and [`publish`](#publish) scripts. (Currently this process is manual but might be automated in the future using [GitHub "actions"](https://github.com/features/actions).)
-   1. The release may also be [**published to the `experimental` channel**](#publishing-an-experimental-release) using the the same scripts (but different build artifacts).
+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 command line](#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 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:
@@ -16,10 +32,15 @@ The high level process of creating releases is [documented below](#process). Ind
 
 <sup>1. [**Creating a patch release**](#creating-a-patch-release) has a slightly different process than a major/minor release.</sup>
 
-# Process
+## Trigger an Automated Prerelease
 
-If this is your first time running the release scripts, go to the `scripts/release` directory and run `yarn` to install the dependencies.
+If your code lands in the main branch, it will be automaticaly 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:
+
+```sh
+yarn publish-prereleases
+```
 
+This will grab the most recent 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.

From eeb1325b03388184f61796ccf57835d33739249a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 5 Feb 2021 17:13:42 +0000
Subject: [PATCH 0236/1603] Fix UMD bundles by removing usage of global
 (#20743)

---
 packages/react-art/src/ReactARTHostConfig.js                | 2 +-
 packages/react-dom/src/client/ReactDOMHostConfig.js         | 6 +++---
 packages/react-native-renderer/src/ReactFabricHostConfig.js | 2 +-
 packages/react-native-renderer/src/ReactNativeHostConfig.js | 2 +-
 packages/react-noop-renderer/src/createReactNoop.js         | 2 +-
 packages/react-reconciler/README.md                         | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js     | 4 ++--
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js     | 4 ++--
 .../src/forks/ReactFiberHostConfig.custom.js                | 2 +-
 packages/react-test-renderer/src/ReactTestHostConfig.js     | 6 +++---
 scripts/flow/environment.js                                 | 2 ++
 11 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 703d2c21c679..d31b611ddb34 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -330,7 +330,7 @@ export function getChildHostContext() {
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
-export function queueMicrotask(callback: Function) {
+export function scheduleMicrotask(callback: Function) {
   invariant(false, 'Not implemented.');
 }
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index fedfe8698e1f..561ebc4476e3 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -384,9 +384,9 @@ export const scheduleTimeout: any =
 export const cancelTimeout: any =
   typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
 export const noTimeout = -1;
-export const queueMicrotask: any =
-  typeof global.queueMicrotask === 'function'
-    ? global.queueMicrotask
+export const scheduleMicrotask: any =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
     : typeof Promise !== 'undefined'
     ? callback =>
         Promise.resolve(null)
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 7329a5f04a04..b8e18a01ebce 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -348,7 +348,7 @@ export const warnsIfNotActing = false;
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
-export function queueMicrotask(callback: Function) {
+export function scheduleMicrotask(callback: Function) {
   invariant(false, 'Not implemented.');
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 5f64845f3142..8331979199e7 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -247,7 +247,7 @@ export const warnsIfNotActing = true;
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
-export function queueMicrotask(callback: Function) {
+export function scheduleMicrotask(callback: Function) {
   invariant(false, 'Not implemented.');
 }
 
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 15bb2e28fb83..fab721c7bca2 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -371,7 +371,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     scheduleTimeout: setTimeout,
     cancelTimeout: clearTimeout,
     noTimeout: -1,
-    queueMicrotask:
+    scheduleMicrotask:
       typeof queueMicrotask === 'function'
         ? queueMicrotask
         : typeof Promise !== 'undefined'
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 217d5f4b8e55..33bbdcfc7fd9 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -203,7 +203,7 @@ You can proxy this to `clearTimeout` or its equivalent in your environment.
 
 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`.
 
-#### `queueMicrotask(fn)`
+#### `scheduleMicrotask(fn)`
 
 You can proxy this to `queueMicrotask` or its equivalent in your environment.
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 23d8037b4ff2..7513d21e27b1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -92,7 +92,7 @@ import {
   warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
-  queueMicrotask,
+  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -766,7 +766,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     enableDiscreteEventMicroTasks &&
     newCallbackPriority === InputDiscreteLanePriority
   ) {
-    queueMicrotask(performSyncWorkOnRoot.bind(null, root));
+    scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
     newCallbackNode = null;
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 0f99452a4c63..5f372831d741 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -92,7 +92,7 @@ import {
   warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
-  queueMicrotask,
+  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -766,7 +766,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     enableDiscreteEventMicroTasks &&
     newCallbackPriority === InputDiscreteLanePriority
   ) {
-    queueMicrotask(performSyncWorkOnRoot.bind(null, root));
+    scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
     newCallbackNode = null;
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index e195b898749f..b9ffc0572521 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -54,7 +54,7 @@ export const shouldSetTextContent = $$$hostConfig.shouldSetTextContent;
 export const createTextInstance = $$$hostConfig.createTextInstance;
 export const scheduleTimeout = $$$hostConfig.scheduleTimeout;
 export const cancelTimeout = $$$hostConfig.cancelTimeout;
-export const queueMicrotask = $$$hostConfig.queueMicrotask;
+export const scheduleMicrotask = $$$hostConfig.scheduleMicrotask;
 export const noTimeout = $$$hostConfig.noTimeout;
 export const now = $$$hostConfig.now;
 export const isPrimaryRenderer = $$$hostConfig.isPrimaryRenderer;
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index c9f9b2376ebb..5adf1ac406e9 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -220,9 +220,9 @@ export const warnsIfNotActing = true;
 
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
-export const queueMicrotask =
-  typeof global.queueMicrotask === 'function'
-    ? global.queueMicrotask
+export const scheduleMicrotask =
+  typeof queueMicrotask === 'function'
+    ? queueMicrotask
     : typeof Promise !== 'undefined'
     ? (callback: Function) =>
         Promise.resolve(null)
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 86b19777cd31..f44d4ed7fcd1 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -18,6 +18,8 @@ declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: any; /*?{
   inject: ?((stuff: Object) => void)
 };*/
 
+declare var queueMicrotask: (fn: Function) => void;
+
 declare module 'create-react-class' {
   declare var exports: React$CreateClass;
 }

From 4ecf11977c46966d3deedcdc71f1280a34607d1d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 5 Feb 2021 20:36:55 +0000
Subject: [PATCH 0237/1603] Remove the Fundamental internals (#20745)

---
 packages/react-art/src/ReactARTHostConfig.js  |  20 --
 .../src/backend/ReactSymbols.js               |   3 -
 .../src/client/ReactDOMHostConfig.js          |  64 -----
 .../src/server/ReactPartialRenderer.js        |  39 ---
 .../react-dom/src/shared/ReactDOMTypes.js     |  10 +-
 .../src/ReactFabricHostConfig.js              |  24 --
 .../src/ReactNativeHostConfig.js              |  20 --
 .../src/createReactNoop.js                    |  51 ----
 .../react-reconciler/src/ReactFiber.new.js    |  35 +--
 .../react-reconciler/src/ReactFiber.old.js    |  35 +--
 .../src/ReactFiberBeginWork.new.js            |  20 --
 .../src/ReactFiberBeginWork.old.js            |  20 --
 .../src/ReactFiberCommitWork.new.js           |  61 +----
 .../src/ReactFiberCommitWork.old.js           |  61 +----
 .../src/ReactFiberCompleteWork.new.js         |  86 +------
 .../src/ReactFiberCompleteWork.old.js         |  86 +------
 .../src/ReactFiberFundamental.new.js          |  30 ---
 .../src/ReactFiberFundamental.old.js          |  30 ---
 .../ReactFiberHostConfigWithNoPersistence.js  |   1 -
 .../src/ReactFiberReconciler.new.js           |   4 -
 .../src/ReactFiberReconciler.old.js           |   4 -
 .../src/ReactFiberTreeReflection.js           |   8 +-
 .../react-reconciler/src/ReactWorkTags.js     |   1 -
 .../ReactFiberFundamental-test.internal.js    | 231 ------------------
 .../src/forks/ReactFiberHostConfig.custom.js  |  11 -
 .../src/ReactTestHostConfig.js                |  50 ----
 packages/react/index.js                       |   1 -
 packages/react/src/React.js                   |   3 -
 packages/react/src/ReactFundamental.js        |  33 ---
 packages/shared/ReactFeatureFlags.js          |   3 -
 packages/shared/ReactSymbols.js               |   2 -
 packages/shared/ReactTypes.js                 |  46 ----
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   2 -
 packages/shared/isValidElementType.js         |   2 -
 41 files changed, 12 insertions(+), 1092 deletions(-)
 delete mode 100644 packages/react-reconciler/src/ReactFiberFundamental.new.js
 delete mode 100644 packages/react-reconciler/src/ReactFiberFundamental.old.js
 delete mode 100644 packages/react-reconciler/src/__tests__/ReactFiberFundamental-test.internal.js
 delete mode 100644 packages/react/src/ReactFundamental.js

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index d31b611ddb34..80b4a39f396b 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -428,26 +428,6 @@ export function clearContainer(container) {
   // TODO Implement this
 }
 
-export function getFundamentalComponentInstance(fundamentalInstance) {
-  throw new Error('Not yet implemented.');
-}
-
-export function mountFundamentalComponent(fundamentalInstance) {
-  throw new Error('Not yet implemented.');
-}
-
-export function shouldUpdateFundamentalComponent(fundamentalInstance) {
-  throw new Error('Not yet implemented.');
-}
-
-export function updateFundamentalComponent(fundamentalInstance) {
-  throw new Error('Not yet implemented.');
-}
-
-export function unmountFundamentalComponent(fundamentalInstance) {
-  throw new Error('Not yet implemented.');
-}
-
 export function getInstanceFromNode(node) {
   throw new Error('Not yet implemented.');
 }
diff --git a/packages/react-devtools-shared/src/backend/ReactSymbols.js b/packages/react-devtools-shared/src/backend/ReactSymbols.js
index 88e2ec29416d..c6515f02edc5 100644
--- a/packages/react-devtools-shared/src/backend/ReactSymbols.js
+++ b/packages/react-devtools-shared/src/backend/ReactSymbols.js
@@ -34,9 +34,6 @@ 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 FUNDAMENTAL_NUMBER = 0xead5;
-export const FUNDAMENTAL_SYMBOL_STRING = 'Symbol(react.fundamental)';
-
 export const LAZY_NUMBER = 0xead4;
 export const LAZY_SYMBOL_STRING = 'Symbol(react.lazy)';
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 561ebc4476e3..9576b602fcc9 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -16,7 +16,6 @@ import type {
 } from 'react-reconciler/src/ReactTestSelectors';
 import type {RootType} from './ReactDOMRoot';
 import type {ReactScopeInstance} from 'shared/ReactTypes';
-import type {ReactDOMFundamentalComponentInstance} from '../shared/ReactDOMTypes';
 
 import {
   precacheFiberNode,
@@ -64,7 +63,6 @@ import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   enableCreateEventHandleAPI,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
@@ -988,68 +986,6 @@ export function didNotFindHydratableSuspenseInstance(
   }
 }
 
-export function getFundamentalComponentInstance(
-  fundamentalInstance: ReactDOMFundamentalComponentInstance,
-): Instance {
-  if (enableFundamentalAPI) {
-    const {currentFiber, impl, props, state} = fundamentalInstance;
-    const instance = impl.getInstance(null, props, state);
-    precacheFiberNode(currentFiber, instance);
-    return instance;
-  }
-  // Because of the flag above, this gets around the Flow error;
-  return (null: any);
-}
-
-export function mountFundamentalComponent(
-  fundamentalInstance: ReactDOMFundamentalComponentInstance,
-): void {
-  if (enableFundamentalAPI) {
-    const {impl, instance, props, state} = fundamentalInstance;
-    const onMount = impl.onMount;
-    if (onMount !== undefined) {
-      onMount(null, instance, props, state);
-    }
-  }
-}
-
-export function shouldUpdateFundamentalComponent(
-  fundamentalInstance: ReactDOMFundamentalComponentInstance,
-): boolean {
-  if (enableFundamentalAPI) {
-    const {impl, prevProps, props, state} = fundamentalInstance;
-    const shouldUpdate = impl.shouldUpdate;
-    if (shouldUpdate !== undefined) {
-      return shouldUpdate(null, prevProps, props, state);
-    }
-  }
-  return true;
-}
-
-export function updateFundamentalComponent(
-  fundamentalInstance: ReactDOMFundamentalComponentInstance,
-): void {
-  if (enableFundamentalAPI) {
-    const {impl, instance, prevProps, props, state} = fundamentalInstance;
-    const onUpdate = impl.onUpdate;
-    if (onUpdate !== undefined) {
-      onUpdate(null, instance, prevProps, props, state);
-    }
-  }
-}
-
-export function unmountFundamentalComponent(
-  fundamentalInstance: ReactDOMFundamentalComponentInstance,
-): void {
-  if (enableFundamentalAPI) {
-    const {impl, instance, props, state} = fundamentalInstance;
-    const onUnmount = impl.onUnmount;
-    if (onUnmount !== undefined) {
-      onUnmount(null, instance, props, state);
-    }
-  }
-}
-
 export function getInstanceFromNode(node: HTMLElement): null | Object {
   return getClosestInstanceFromNode(node) || null;
 }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 3ef313787166..a8528ed946dc 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -22,7 +22,6 @@ import {
   disableLegacyContext,
   disableModulePatternComponents,
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 
@@ -39,7 +38,6 @@ import {
   REACT_CONTEXT_TYPE,
   REACT_LAZY_TYPE,
   REACT_MEMO_TYPE,
-  REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
 } from 'shared/ReactSymbols';
@@ -1253,43 +1251,6 @@ class ReactDOMServerRenderer {
             return '';
           }
           // eslint-disable-next-line-no-fallthrough
-          case REACT_FUNDAMENTAL_TYPE: {
-            if (enableFundamentalAPI) {
-              const fundamentalImpl = elementType.impl;
-              const open = fundamentalImpl.getServerSideString(
-                null,
-                nextElement.props,
-              );
-              const getServerSideStringClose =
-                fundamentalImpl.getServerSideStringClose;
-              const close =
-                getServerSideStringClose !== undefined
-                  ? getServerSideStringClose(null, nextElement.props)
-                  : '';
-              const nextChildren =
-                fundamentalImpl.reconcileChildren !== false
-                  ? toArray(((nextChild: any): ReactElement).props.children)
-                  : [];
-              const frame: Frame = {
-                type: null,
-                domNamespace: parentNamespace,
-                children: nextChildren,
-                childIndex: 0,
-                context: context,
-                footer: close,
-              };
-              if (__DEV__) {
-                ((frame: any): FrameDev).debugElementStack = [];
-              }
-              this.stack.push(frame);
-              return open;
-            }
-            invariant(
-              false,
-              'ReactDOMServer does not yet support the fundamental API.',
-            );
-          }
-          // eslint-disable-next-line-no-fallthrough
           case REACT_LAZY_TYPE: {
             const element: ReactElement = (nextChild: any);
             const lazyComponent: LazyComponent<any, any> = (nextChild: any)
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index 774e776b1ad8..4e2eddb9a0d7 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -7,17 +7,9 @@
  * @flow
  */
 
-import type {
-  ReactFundamentalComponentInstance,
-  ReactScopeInstance,
-} from 'shared/ReactTypes';
+import type {ReactScopeInstance} from 'shared/ReactTypes';
 import type {DOMEventName} from '../events/DOMEventNames';
 
-export type ReactDOMFundamentalComponentInstance = ReactFundamentalComponentInstance<
-  any,
-  any,
->;
-
 export type ReactDOMEventHandle = (
   target: EventTarget | ReactScopeInstance,
   callback: (SyntheticEvent<EventTarget>) => void,
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index b8e18a01ebce..912f33633380 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -438,30 +438,6 @@ export function replaceContainerChildren(
   newChildren: ChildSet,
 ): void {}
 
-export function getFundamentalComponentInstance(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function mountFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function shouldUpdateFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function updateFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function unmountFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function cloneFundamentalInstance(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
 export function getInstanceFromNode(node: any) {
   throw new Error('Not yet implemented.');
 }
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 8331979199e7..86217bdc4d03 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -495,26 +495,6 @@ export function unhideTextInstance(
   throw new Error('Not yet implemented.');
 }
 
-export function getFundamentalComponentInstance(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function mountFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function shouldUpdateFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function updateFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
-export function unmountFundamentalComponent(fundamentalInstance: any) {
-  throw new Error('Not yet implemented.');
-}
-
 export function getInstanceFromNode(node: any) {
   throw new Error('Not yet implemented.');
 }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index fab721c7bca2..5a71567ab62f 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -397,57 +397,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     warnsIfNotActing: true,
     supportsHydration: false,
 
-    getFundamentalComponentInstance(fundamentalInstance): Instance {
-      const {impl, props, state} = fundamentalInstance;
-      return impl.getInstance(null, props, state);
-    },
-
-    mountFundamentalComponent(fundamentalInstance): void {
-      const {impl, instance, props, state} = fundamentalInstance;
-      const onMount = impl.onUpdate;
-      if (onMount !== undefined) {
-        onMount(null, instance, props, state);
-      }
-    },
-
-    shouldUpdateFundamentalComponent(fundamentalInstance): boolean {
-      const {impl, instance, prevProps, props, state} = fundamentalInstance;
-      const shouldUpdate = impl.shouldUpdate;
-      if (shouldUpdate !== undefined) {
-        return shouldUpdate(null, instance, prevProps, props, state);
-      }
-      return true;
-    },
-
-    updateFundamentalComponent(fundamentalInstance): void {
-      const {impl, instance, prevProps, props, state} = fundamentalInstance;
-      const onUpdate = impl.onUpdate;
-      if (onUpdate !== undefined) {
-        onUpdate(null, instance, prevProps, props, state);
-      }
-    },
-
-    unmountFundamentalComponent(fundamentalInstance): void {
-      const {impl, instance, props, state} = fundamentalInstance;
-      const onUnmount = impl.onUnmount;
-      if (onUnmount !== undefined) {
-        onUnmount(null, instance, props, state);
-      }
-    },
-
-    cloneFundamentalInstance(fundamentalInstance): Instance {
-      const instance = fundamentalInstance.instance;
-      return {
-        children: [],
-        text: instance.text,
-        type: instance.type,
-        prop: instance.prop,
-        id: instance.id,
-        context: instance.context,
-        hidden: instance.hidden,
-      };
-    },
-
     getInstanceFromNode() {
       throw new Error('Not yet implemented.');
     },
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index d6c28749f26d..983855ced568 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -8,12 +8,7 @@
  */
 
 import type {ReactElement} from 'shared/ReactElementType';
-import type {
-  ReactFragment,
-  ReactPortal,
-  ReactFundamentalComponent,
-  ReactScope,
-} from 'shared/ReactTypes';
+import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {WorkTag} from './ReactWorkTags';
@@ -25,7 +20,6 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 import invariant from 'shared/invariant';
 import {
   enableProfilerTimer,
-  enableFundamentalAPI,
   enableScopeAPI,
   enableCache,
 } from 'shared/ReactFeatureFlags';
@@ -51,7 +45,6 @@ import {
   MemoComponent,
   SimpleMemoComponent,
   LazyComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -86,7 +79,6 @@ import {
   REACT_SUSPENSE_LIST_TYPE,
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
-  REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
@@ -525,17 +517,6 @@ export function createFiberFromTypeAndProps(
               fiberTag = LazyComponent;
               resolvedType = null;
               break getTag;
-            case REACT_FUNDAMENTAL_TYPE:
-              if (enableFundamentalAPI) {
-                return createFiberFromFundamental(
-                  type,
-                  pendingProps,
-                  mode,
-                  lanes,
-                  key,
-                );
-              }
-              break;
           }
         }
         let info = '';
@@ -618,20 +599,6 @@ export function createFiberFromFragment(
   return fiber;
 }
 
-export function createFiberFromFundamental(
-  fundamentalComponent: ReactFundamentalComponent<any, any>,
-  pendingProps: any,
-  mode: TypeOfMode,
-  lanes: Lanes,
-  key: null | string,
-): Fiber {
-  const fiber = createFiber(FundamentalComponent, pendingProps, key, mode);
-  fiber.elementType = fundamentalComponent;
-  fiber.type = fundamentalComponent;
-  fiber.lanes = lanes;
-  return fiber;
-}
-
 function createFiberFromScope(
   scope: ReactScope,
   pendingProps: any,
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index c9783c3b7137..ed2ae45f4ec1 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -8,12 +8,7 @@
  */
 
 import type {ReactElement} from 'shared/ReactElementType';
-import type {
-  ReactFragment,
-  ReactPortal,
-  ReactFundamentalComponent,
-  ReactScope,
-} from 'shared/ReactTypes';
+import type {ReactFragment, ReactPortal, ReactScope} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {WorkTag} from './ReactWorkTags';
@@ -25,7 +20,6 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 import invariant from 'shared/invariant';
 import {
   enableProfilerTimer,
-  enableFundamentalAPI,
   enableScopeAPI,
   enableCache,
 } from 'shared/ReactFeatureFlags';
@@ -51,7 +45,6 @@ import {
   MemoComponent,
   SimpleMemoComponent,
   LazyComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -86,7 +79,6 @@ import {
   REACT_SUSPENSE_LIST_TYPE,
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
-  REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
@@ -525,17 +517,6 @@ export function createFiberFromTypeAndProps(
               fiberTag = LazyComponent;
               resolvedType = null;
               break getTag;
-            case REACT_FUNDAMENTAL_TYPE:
-              if (enableFundamentalAPI) {
-                return createFiberFromFundamental(
-                  type,
-                  pendingProps,
-                  mode,
-                  lanes,
-                  key,
-                );
-              }
-              break;
           }
         }
         let info = '';
@@ -618,20 +599,6 @@ export function createFiberFromFragment(
   return fiber;
 }
 
-export function createFiberFromFundamental(
-  fundamentalComponent: ReactFundamentalComponent<any, any>,
-  pendingProps: any,
-  mode: TypeOfMode,
-  lanes: Lanes,
-  key: null | string,
-): Fiber {
-  const fiber = createFiber(FundamentalComponent, pendingProps, key, mode);
-  fiber.elementType = fundamentalComponent;
-  fiber.type = fundamentalComponent;
-  fiber.lanes = lanes;
-  return fiber;
-}
-
 function createFiberFromScope(
   scope: ReactScope,
   pendingProps: any,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 2239906d43e4..6537d103e232 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -52,7 +52,6 @@ import {
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -79,7 +78,6 @@ import {
   enableProfilerTimer,
   enableSchedulerTracing,
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableCache,
@@ -3063,18 +3061,6 @@ function updateContextConsumer(
   return workInProgress.child;
 }
 
-function updateFundamentalComponent(current, workInProgress, renderLanes) {
-  const fundamentalImpl = workInProgress.type.impl;
-  if (fundamentalImpl.reconcileChildren === false) {
-    return null;
-  }
-  const nextProps = workInProgress.pendingProps;
-  const nextChildren = nextProps.children;
-
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
-}
-
 function updateScopeComponent(current, workInProgress, renderLanes) {
   const nextProps = workInProgress.pendingProps;
   const nextChildren = nextProps.children;
@@ -3571,12 +3557,6 @@ function beginWork(
     case SuspenseListComponent: {
       return updateSuspenseListComponent(current, workInProgress, renderLanes);
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        return updateFundamentalComponent(current, workInProgress, renderLanes);
-      }
-      break;
-    }
     case ScopeComponent: {
       if (enableScopeAPI) {
         return updateScopeComponent(current, workInProgress, renderLanes);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 5f9ba706b422..4c0594329d94 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -52,7 +52,6 @@ import {
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -79,7 +78,6 @@ import {
   enableProfilerTimer,
   enableSchedulerTracing,
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableCache,
@@ -3063,18 +3061,6 @@ function updateContextConsumer(
   return workInProgress.child;
 }
 
-function updateFundamentalComponent(current, workInProgress, renderLanes) {
-  const fundamentalImpl = workInProgress.type.impl;
-  if (fundamentalImpl.reconcileChildren === false) {
-    return null;
-  }
-  const nextProps = workInProgress.pendingProps;
-  const nextChildren = nextProps.children;
-
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
-}
-
 function updateScopeComponent(current, workInProgress, renderLanes) {
   const nextProps = workInProgress.pendingProps;
   const nextChildren = nextProps.children;
@@ -3571,12 +3557,6 @@ function beginWork(
     case SuspenseListComponent: {
       return updateSuspenseListComponent(current, workInProgress, renderLanes);
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        return updateFundamentalComponent(current, workInProgress, renderLanes);
-      }
-      break;
-    }
     case ScopeComponent: {
       if (enableScopeAPI) {
         return updateScopeComponent(current, workInProgress, renderLanes);
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 29fbd8772012..e170114848cc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -33,7 +33,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
   enableDoubleInvokingEffects,
@@ -53,7 +52,6 @@ import {
   MemoComponent,
   SimpleMemoComponent,
   SuspenseListComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -124,8 +122,6 @@ import {
   hideTextInstance,
   unhideInstance,
   unhideTextInstance,
-  unmountFundamentalComponent,
-  updateFundamentalComponent,
   commitHydratedContainer,
   commitHydratedSuspenseInstance,
   clearContainer,
@@ -909,7 +905,6 @@ function commitLayoutEffectOnFiber(
       }
       case SuspenseListComponent:
       case IncompleteClassComponent:
-      case FundamentalComponent:
       case ScopeComponent:
       case OffscreenComponent:
       case LegacyHiddenComponent:
@@ -1133,16 +1128,6 @@ function commitUnmount(
       }
       return;
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        const fundamentalInstance = current.stateNode;
-        if (fundamentalInstance !== null) {
-          unmountFundamentalComponent(fundamentalInstance);
-          current.stateNode = null;
-        }
-      }
-      return;
-    }
     case DehydratedFragment: {
       if (enableSuspenseCallback) {
         const hydrationCallbacks = finishedRoot.hydrationCallbacks;
@@ -1271,8 +1256,7 @@ function commitContainer(finishedWork: Fiber) {
   switch (finishedWork.tag) {
     case ClassComponent:
     case HostComponent:
-    case HostText:
-    case FundamentalComponent: {
+    case HostText: {
       return;
     }
     case HostRoot:
@@ -1388,11 +1372,6 @@ function commitPlacement(finishedWork: Fiber): void {
       parent = parentStateNode.containerInfo;
       isContainer = true;
       break;
-    case FundamentalComponent:
-      if (enableFundamentalAPI) {
-        parent = parentStateNode.instance;
-        isContainer = false;
-      }
     // eslint-disable-next-line-no-fallthrough
     default:
       invariant(
@@ -1425,7 +1404,7 @@ function insertOrAppendPlacementNodeIntoContainer(
 ): void {
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
-  if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {
+  if (isHost) {
     const stateNode = isHost ? node.stateNode : node.stateNode.instance;
     if (before) {
       insertInContainerBefore(parent, stateNode, before);
@@ -1456,7 +1435,7 @@ function insertOrAppendPlacementNode(
 ): void {
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
-  if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {
+  if (isHost) {
     const stateNode = isHost ? node.stateNode : node.stateNode.instance;
     if (before) {
       insertBefore(parent, stateNode, before);
@@ -1521,11 +1500,6 @@ function unmountHostComponents(
             currentParent = parentStateNode.containerInfo;
             currentParentIsContainer = true;
             break findParent;
-          case FundamentalComponent:
-            if (enableFundamentalAPI) {
-              currentParent = parentStateNode.instance;
-              currentParentIsContainer = false;
-            }
         }
         parent = parent.return;
       }
@@ -1553,27 +1527,6 @@ function unmountHostComponents(
         );
       }
       // Don't visit children because we already visited them.
-    } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-      const fundamentalNode = node.stateNode.instance;
-      commitNestedUnmounts(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
-      // After all the children have unmounted, it is now safe to remove the
-      // node from the tree.
-      if (currentParentIsContainer) {
-        removeChildFromContainer(
-          ((currentParent: any): Container),
-          (fundamentalNode: Instance),
-        );
-      } else {
-        removeChild(
-          ((currentParent: any): Instance),
-          (fundamentalNode: Instance),
-        );
-      }
     } else if (
       enableSuspenseServerRenderer &&
       node.tag === DehydratedFragment
@@ -1849,14 +1802,6 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case IncompleteClassComponent: {
       return;
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        const fundamentalInstance = finishedWork.stateNode;
-        updateFundamentalComponent(fundamentalInstance);
-        return;
-      }
-      break;
-    }
     case ScopeComponent: {
       if (enableScopeAPI) {
         const scopeInstance = finishedWork.stateNode;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index d5ce4dd688d6..7a27bbc48f87 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -33,7 +33,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
   enableDoubleInvokingEffects,
@@ -53,7 +52,6 @@ import {
   MemoComponent,
   SimpleMemoComponent,
   SuspenseListComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -124,8 +122,6 @@ import {
   hideTextInstance,
   unhideInstance,
   unhideTextInstance,
-  unmountFundamentalComponent,
-  updateFundamentalComponent,
   commitHydratedContainer,
   commitHydratedSuspenseInstance,
   clearContainer,
@@ -909,7 +905,6 @@ function commitLayoutEffectOnFiber(
       }
       case SuspenseListComponent:
       case IncompleteClassComponent:
-      case FundamentalComponent:
       case ScopeComponent:
       case OffscreenComponent:
       case LegacyHiddenComponent:
@@ -1133,16 +1128,6 @@ function commitUnmount(
       }
       return;
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        const fundamentalInstance = current.stateNode;
-        if (fundamentalInstance !== null) {
-          unmountFundamentalComponent(fundamentalInstance);
-          current.stateNode = null;
-        }
-      }
-      return;
-    }
     case DehydratedFragment: {
       if (enableSuspenseCallback) {
         const hydrationCallbacks = finishedRoot.hydrationCallbacks;
@@ -1271,8 +1256,7 @@ function commitContainer(finishedWork: Fiber) {
   switch (finishedWork.tag) {
     case ClassComponent:
     case HostComponent:
-    case HostText:
-    case FundamentalComponent: {
+    case HostText: {
       return;
     }
     case HostRoot:
@@ -1388,11 +1372,6 @@ function commitPlacement(finishedWork: Fiber): void {
       parent = parentStateNode.containerInfo;
       isContainer = true;
       break;
-    case FundamentalComponent:
-      if (enableFundamentalAPI) {
-        parent = parentStateNode.instance;
-        isContainer = false;
-      }
     // eslint-disable-next-line-no-fallthrough
     default:
       invariant(
@@ -1425,7 +1404,7 @@ function insertOrAppendPlacementNodeIntoContainer(
 ): void {
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
-  if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {
+  if (isHost) {
     const stateNode = isHost ? node.stateNode : node.stateNode.instance;
     if (before) {
       insertInContainerBefore(parent, stateNode, before);
@@ -1456,7 +1435,7 @@ function insertOrAppendPlacementNode(
 ): void {
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
-  if (isHost || (enableFundamentalAPI && tag === FundamentalComponent)) {
+  if (isHost) {
     const stateNode = isHost ? node.stateNode : node.stateNode.instance;
     if (before) {
       insertBefore(parent, stateNode, before);
@@ -1521,11 +1500,6 @@ function unmountHostComponents(
             currentParent = parentStateNode.containerInfo;
             currentParentIsContainer = true;
             break findParent;
-          case FundamentalComponent:
-            if (enableFundamentalAPI) {
-              currentParent = parentStateNode.instance;
-              currentParentIsContainer = false;
-            }
         }
         parent = parent.return;
       }
@@ -1553,27 +1527,6 @@ function unmountHostComponents(
         );
       }
       // Don't visit children because we already visited them.
-    } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-      const fundamentalNode = node.stateNode.instance;
-      commitNestedUnmounts(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
-      // After all the children have unmounted, it is now safe to remove the
-      // node from the tree.
-      if (currentParentIsContainer) {
-        removeChildFromContainer(
-          ((currentParent: any): Container),
-          (fundamentalNode: Instance),
-        );
-      } else {
-        removeChild(
-          ((currentParent: any): Instance),
-          (fundamentalNode: Instance),
-        );
-      }
     } else if (
       enableSuspenseServerRenderer &&
       node.tag === DehydratedFragment
@@ -1849,14 +1802,6 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case IncompleteClassComponent: {
       return;
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        const fundamentalInstance = finishedWork.stateNode;
-        updateFundamentalComponent(fundamentalInstance);
-        return;
-      }
-      break;
-    }
     case ScopeComponent: {
       if (enableScopeAPI) {
         const scopeInstance = finishedWork.stateNode;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index cd7ed4c4c180..378c0006c33b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -9,11 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
-import type {
-  ReactFundamentalComponentInstance,
-  ReactScopeInstance,
-  ReactContext,
-} from 'shared/ReactTypes';
+import type {ReactScopeInstance, ReactContext} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {
   Instance,
@@ -54,7 +50,6 @@ import {
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -92,10 +87,6 @@ import {
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
-  getFundamentalComponentInstance,
-  mountFundamentalComponent,
-  cloneFundamentalInstance,
-  shouldUpdateFundamentalComponent,
   preparePortalMount,
   prepareScopeUpdate,
 } from './ReactFiberHostConfig';
@@ -134,7 +125,6 @@ import {
   enableSchedulerTracing,
   enableSuspenseCallback,
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
@@ -148,7 +138,6 @@ import {
   getRenderTargetTime,
   subtreeRenderLanes,
 } from './ReactFiberWorkLoop.new';
-import {createFundamentalStateInstance} from './ReactFiberFundamental.new';
 import {
   OffscreenLane,
   SomeRetryLane,
@@ -219,8 +208,6 @@ if (supportsMutation) {
     while (node !== null) {
       if (node.tag === HostComponent || node.tag === HostText) {
         appendInitialChild(parent, node.stateNode);
-      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-        appendInitialChild(parent, node.stateNode.instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -330,15 +317,6 @@ if (supportsMutation) {
           instance = cloneHiddenTextInstance(instance, text, node);
         }
         appendInitialChild(parent, instance);
-      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-        let instance = node.stateNode.instance;
-        if (needsVisibilityToggle && isHidden) {
-          // This child is inside a timed out tree. Hide it.
-          const props = node.memoizedProps;
-          const type = node.type;
-          instance = cloneHiddenInstance(instance, type, props, node);
-        }
-        appendInitialChild(parent, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -424,15 +402,6 @@ if (supportsMutation) {
           instance = cloneHiddenTextInstance(instance, text, node);
         }
         appendChildToContainerChildSet(containerChildSet, instance);
-      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-        let instance = node.stateNode.instance;
-        if (needsVisibilityToggle && isHidden) {
-          // This child is inside a timed out tree. Hide it.
-          const props = node.memoizedProps;
-          const type = node.type;
-          instance = cloneHiddenInstance(instance, type, props, node);
-        }
-        appendChildToContainerChildSet(containerChildSet, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -1406,59 +1375,6 @@ function completeWork(
       bubbleProperties(workInProgress);
       return null;
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        const fundamentalImpl = workInProgress.type.impl;
-        let fundamentalInstance: ReactFundamentalComponentInstance<
-          any,
-          any,
-        > | null = workInProgress.stateNode;
-
-        if (fundamentalInstance === null) {
-          const getInitialState = fundamentalImpl.getInitialState;
-          let fundamentalState;
-          if (getInitialState !== undefined) {
-            fundamentalState = getInitialState(newProps);
-          }
-          fundamentalInstance = workInProgress.stateNode = createFundamentalStateInstance(
-            workInProgress,
-            newProps,
-            fundamentalImpl,
-            fundamentalState || {},
-          );
-          const instance = ((getFundamentalComponentInstance(
-            fundamentalInstance,
-          ): any): Instance);
-          fundamentalInstance.instance = instance;
-          if (fundamentalImpl.reconcileChildren === false) {
-            bubbleProperties(workInProgress);
-            return null;
-          }
-          appendAllChildren(instance, workInProgress, false, false);
-          mountFundamentalComponent(fundamentalInstance);
-        } else {
-          // We fire update in commit phase
-          const prevProps = fundamentalInstance.props;
-          fundamentalInstance.prevProps = prevProps;
-          fundamentalInstance.props = newProps;
-          fundamentalInstance.currentFiber = workInProgress;
-          if (supportsPersistence) {
-            const instance = cloneFundamentalInstance(fundamentalInstance);
-            fundamentalInstance.instance = instance;
-            appendAllChildren(instance, workInProgress, false, false);
-          }
-          const shouldUpdate = shouldUpdateFundamentalComponent(
-            fundamentalInstance,
-          );
-          if (shouldUpdate) {
-            markUpdate(workInProgress);
-          }
-        }
-        bubbleProperties(workInProgress);
-        return null;
-      }
-      break;
-    }
     case ScopeComponent: {
       if (enableScopeAPI) {
         if (current === null) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 61c8a01bf27e..55c576491036 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -9,11 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
-import type {
-  ReactFundamentalComponentInstance,
-  ReactScopeInstance,
-  ReactContext,
-} from 'shared/ReactTypes';
+import type {ReactScopeInstance, ReactContext} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {
   Instance,
@@ -54,7 +50,6 @@ import {
   SimpleMemoComponent,
   LazyComponent,
   IncompleteClassComponent,
-  FundamentalComponent,
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
@@ -92,10 +87,6 @@ import {
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
-  getFundamentalComponentInstance,
-  mountFundamentalComponent,
-  cloneFundamentalInstance,
-  shouldUpdateFundamentalComponent,
   preparePortalMount,
   prepareScopeUpdate,
 } from './ReactFiberHostConfig';
@@ -134,7 +125,6 @@ import {
   enableSchedulerTracing,
   enableSuspenseCallback,
   enableSuspenseServerRenderer,
-  enableFundamentalAPI,
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
@@ -148,7 +138,6 @@ import {
   getRenderTargetTime,
   subtreeRenderLanes,
 } from './ReactFiberWorkLoop.old';
-import {createFundamentalStateInstance} from './ReactFiberFundamental.old';
 import {
   OffscreenLane,
   SomeRetryLane,
@@ -219,8 +208,6 @@ if (supportsMutation) {
     while (node !== null) {
       if (node.tag === HostComponent || node.tag === HostText) {
         appendInitialChild(parent, node.stateNode);
-      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-        appendInitialChild(parent, node.stateNode.instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -330,15 +317,6 @@ if (supportsMutation) {
           instance = cloneHiddenTextInstance(instance, text, node);
         }
         appendInitialChild(parent, instance);
-      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-        let instance = node.stateNode.instance;
-        if (needsVisibilityToggle && isHidden) {
-          // This child is inside a timed out tree. Hide it.
-          const props = node.memoizedProps;
-          const type = node.type;
-          instance = cloneHiddenInstance(instance, type, props, node);
-        }
-        appendInitialChild(parent, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -424,15 +402,6 @@ if (supportsMutation) {
           instance = cloneHiddenTextInstance(instance, text, node);
         }
         appendChildToContainerChildSet(containerChildSet, instance);
-      } else if (enableFundamentalAPI && node.tag === FundamentalComponent) {
-        let instance = node.stateNode.instance;
-        if (needsVisibilityToggle && isHidden) {
-          // This child is inside a timed out tree. Hide it.
-          const props = node.memoizedProps;
-          const type = node.type;
-          instance = cloneHiddenInstance(instance, type, props, node);
-        }
-        appendChildToContainerChildSet(containerChildSet, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
@@ -1406,59 +1375,6 @@ function completeWork(
       bubbleProperties(workInProgress);
       return null;
     }
-    case FundamentalComponent: {
-      if (enableFundamentalAPI) {
-        const fundamentalImpl = workInProgress.type.impl;
-        let fundamentalInstance: ReactFundamentalComponentInstance<
-          any,
-          any,
-        > | null = workInProgress.stateNode;
-
-        if (fundamentalInstance === null) {
-          const getInitialState = fundamentalImpl.getInitialState;
-          let fundamentalState;
-          if (getInitialState !== undefined) {
-            fundamentalState = getInitialState(newProps);
-          }
-          fundamentalInstance = workInProgress.stateNode = createFundamentalStateInstance(
-            workInProgress,
-            newProps,
-            fundamentalImpl,
-            fundamentalState || {},
-          );
-          const instance = ((getFundamentalComponentInstance(
-            fundamentalInstance,
-          ): any): Instance);
-          fundamentalInstance.instance = instance;
-          if (fundamentalImpl.reconcileChildren === false) {
-            bubbleProperties(workInProgress);
-            return null;
-          }
-          appendAllChildren(instance, workInProgress, false, false);
-          mountFundamentalComponent(fundamentalInstance);
-        } else {
-          // We fire update in commit phase
-          const prevProps = fundamentalInstance.props;
-          fundamentalInstance.prevProps = prevProps;
-          fundamentalInstance.props = newProps;
-          fundamentalInstance.currentFiber = workInProgress;
-          if (supportsPersistence) {
-            const instance = cloneFundamentalInstance(fundamentalInstance);
-            fundamentalInstance.instance = instance;
-            appendAllChildren(instance, workInProgress, false, false);
-          }
-          const shouldUpdate = shouldUpdateFundamentalComponent(
-            fundamentalInstance,
-          );
-          if (shouldUpdate) {
-            markUpdate(workInProgress);
-          }
-        }
-        bubbleProperties(workInProgress);
-        return null;
-      }
-      break;
-    }
     case ScopeComponent: {
       if (enableScopeAPI) {
         if (current === null) {
diff --git a/packages/react-reconciler/src/ReactFiberFundamental.new.js b/packages/react-reconciler/src/ReactFiberFundamental.new.js
deleted file mode 100644
index 0107a92ae468..000000000000
--- a/packages/react-reconciler/src/ReactFiberFundamental.new.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {Fiber} from './ReactInternalTypes';
-import type {
-  ReactFundamentalImpl,
-  ReactFundamentalComponentInstance,
-} from 'shared/ReactTypes';
-
-export function createFundamentalStateInstance<C, H>(
-  currentFiber: Fiber,
-  props: Object,
-  impl: ReactFundamentalImpl<C, H>,
-  state: Object,
-): ReactFundamentalComponentInstance<C, H> {
-  return {
-    currentFiber,
-    impl,
-    instance: null,
-    prevProps: null,
-    props,
-    state,
-  };
-}
diff --git a/packages/react-reconciler/src/ReactFiberFundamental.old.js b/packages/react-reconciler/src/ReactFiberFundamental.old.js
deleted file mode 100644
index 0107a92ae468..000000000000
--- a/packages/react-reconciler/src/ReactFiberFundamental.old.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {Fiber} from './ReactInternalTypes';
-import type {
-  ReactFundamentalImpl,
-  ReactFundamentalComponentInstance,
-} from 'shared/ReactTypes';
-
-export function createFundamentalStateInstance<C, H>(
-  currentFiber: Fiber,
-  props: Object,
-  impl: ReactFundamentalImpl<C, H>,
-  state: Object,
-): ReactFundamentalComponentInstance<C, H> {
-  return {
-    currentFiber,
-    impl,
-    instance: null,
-    prevProps: null,
-    props,
-    state,
-  };
-}
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
index 2b58a0db4d7b..d5f84cf43fd6 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
@@ -24,7 +24,6 @@ function shim(...args: any) {
 // Persistence (when unsupported)
 export const supportsPersistence = false;
 export const cloneInstance = shim;
-export const cloneFundamentalInstance = shim;
 export const createContainerChildSet = shim;
 export const appendChildToContainerChildSet = shim;
 export const finalizeContainerChildren = shim;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 70923424e887..57107e964245 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -17,7 +17,6 @@ import type {
   PublicInstance,
 } from './ReactFiberHostConfig';
 import type {RendererInspectionConfig} from './ReactFiberHostConfig';
-import {FundamentalComponent} from './ReactWorkTags';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Lane, LanePriority} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
@@ -460,9 +459,6 @@ export function findHostInstanceWithNoPortals(
   if (hostFiber === null) {
     return null;
   }
-  if (hostFiber.tag === FundamentalComponent) {
-    return hostFiber.stateNode.instance;
-  }
   return hostFiber.stateNode;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 64bbea2c4070..ba9a796f6300 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -17,7 +17,6 @@ import type {
   PublicInstance,
 } from './ReactFiberHostConfig';
 import type {RendererInspectionConfig} from './ReactFiberHostConfig';
-import {FundamentalComponent} from './ReactWorkTags';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Lane, LanePriority} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
@@ -460,9 +459,6 @@ export function findHostInstanceWithNoPortals(
   if (hostFiber === null) {
     return null;
   }
-  if (hostFiber.tag === FundamentalComponent) {
-    return hostFiber.stateNode.instance;
-  }
   return hostFiber.stateNode;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index 0b3448fec2b0..06356aa709fd 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -22,11 +22,9 @@ import {
   HostRoot,
   HostPortal,
   HostText,
-  FundamentalComponent,
   SuspenseComponent,
 } from './ReactWorkTags';
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
-import {enableFundamentalAPI} from 'shared/ReactFeatureFlags';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -297,11 +295,7 @@ export function findCurrentHostFiberWithNoPortals(parent: Fiber): Fiber | null {
 
 function findCurrentHostFiberWithNoPortalsImpl(node: Fiber) {
   // Next we'll drill down this component to find the first HostComponent/Text.
-  if (
-    node.tag === HostComponent ||
-    node.tag === HostText ||
-    (enableFundamentalAPI && node.tag === FundamentalComponent)
-  ) {
+  if (node.tag === HostComponent || node.tag === HostText) {
     return node;
   }
 
diff --git a/packages/react-reconciler/src/ReactWorkTags.js b/packages/react-reconciler/src/ReactWorkTags.js
index 65dba28b367a..fca4ffdce78b 100644
--- a/packages/react-reconciler/src/ReactWorkTags.js
+++ b/packages/react-reconciler/src/ReactWorkTags.js
@@ -54,7 +54,6 @@ export const LazyComponent = 16;
 export const IncompleteClassComponent = 17;
 export const DehydratedFragment = 18;
 export const SuspenseListComponent = 19;
-export const FundamentalComponent = 20;
 export const ScopeComponent = 21;
 export const OffscreenComponent = 22;
 export const LegacyHiddenComponent = 23;
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberFundamental-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberFundamental-test.internal.js
deleted file mode 100644
index f465226d20e5..000000000000
--- a/packages/react-reconciler/src/__tests__/ReactFiberFundamental-test.internal.js
+++ /dev/null
@@ -1,231 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactNoop;
-let Scheduler;
-let ReactFeatureFlags;
-let ReactTestRenderer;
-let ReactDOM;
-let ReactDOMServer;
-
-function createReactFundamentalComponent(fundamentalImpl) {
-  return React.unstable_createFundamental(fundamentalImpl);
-}
-
-function init() {
-  jest.resetModules();
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableFundamentalAPI = true;
-  React = require('react');
-  Scheduler = require('scheduler');
-}
-
-function initNoopRenderer() {
-  init();
-  ReactNoop = require('react-noop-renderer');
-}
-
-function initTestRenderer() {
-  init();
-  ReactTestRenderer = require('react-test-renderer');
-}
-
-function initReactDOM() {
-  init();
-  ReactDOM = require('react-dom');
-}
-
-function initReactDOMServer() {
-  init();
-  ReactDOMServer = require('react-dom/server');
-}
-
-describe('ReactFiberFundamental', () => {
-  describe('NoopRenderer', () => {
-    beforeEach(() => {
-      initNoopRenderer();
-    });
-
-    // @gate experimental
-    it('should render a simple fundamental component with a single child', () => {
-      const FundamentalComponent = createReactFundamentalComponent({
-        reconcileChildren: true,
-        getInstance(context, props, state) {
-          const instance = {
-            children: [],
-            text: null,
-            type: 'test',
-          };
-          return instance;
-        },
-      });
-
-      const Test = ({children}) => (
-        <FundamentalComponent>{children}</FundamentalComponent>
-      );
-
-      ReactNoop.render(<Test>Hello world</Test>);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(<test>Hello world</test>);
-      ReactNoop.render(<Test>Hello world again</Test>);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(<test>Hello world again</test>);
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(ReactNoop).toMatchRenderedOutput(null);
-    });
-  });
-
-  describe('NoopTestRenderer', () => {
-    beforeEach(() => {
-      initTestRenderer();
-    });
-
-    // @gate experimental
-    it('should render a simple fundamental component with a single child', () => {
-      const FundamentalComponent = createReactFundamentalComponent({
-        reconcileChildren: true,
-        getInstance(context, props, state) {
-          const instance = {
-            children: [],
-            props,
-            type: 'test',
-            tag: 'INSTANCE',
-          };
-          return instance;
-        },
-      });
-
-      const Test = ({children}) => (
-        <FundamentalComponent>{children}</FundamentalComponent>
-      );
-
-      const root = ReactTestRenderer.create(null);
-      root.update(<Test>Hello world</Test>);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(<test>Hello world</test>);
-      root.update(<Test>Hello world again</Test>);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(<test>Hello world again</test>);
-      root.update(null);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(root).toMatchRenderedOutput(null);
-    });
-  });
-
-  describe('ReactDOM', () => {
-    beforeEach(() => {
-      initReactDOM();
-    });
-
-    // @gate experimental
-    it('should render a simple fundamental component with a single child', () => {
-      const FundamentalComponent = createReactFundamentalComponent({
-        reconcileChildren: true,
-        getInstance(context, props, state) {
-          const instance = document.createElement('div');
-          return instance;
-        },
-      });
-
-      const Test = ({children}) => (
-        <FundamentalComponent>{children}</FundamentalComponent>
-      );
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test>Hello world</Test>, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div>Hello world</div>');
-      ReactDOM.render(<Test>Hello world again</Test>, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div>Hello world again</div>');
-      ReactDOM.render(null, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('');
-    });
-
-    // @gate experimental
-    it('should render a simple fundamental component without reconcileChildren', () => {
-      const FundamentalComponent = createReactFundamentalComponent({
-        reconcileChildren: false,
-        getInstance(context, props, state) {
-          const instance = document.createElement('div');
-          instance.textContent = 'Hello world';
-          return instance;
-        },
-      });
-
-      const Test = () => <FundamentalComponent />;
-
-      const container = document.createElement('div');
-      ReactDOM.render(<Test />, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div>Hello world</div>');
-      // Children should be ignored
-      ReactDOM.render(<Test>Hello world again</Test>, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('<div>Hello world</div>');
-      ReactDOM.render(null, container);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(container.innerHTML).toBe('');
-    });
-  });
-
-  describe('ReactDOMServer', () => {
-    beforeEach(() => {
-      initReactDOMServer();
-    });
-
-    // @gate experimental
-    it('should render a simple fundamental component with a single child', () => {
-      const getInstance = jest.fn();
-      const FundamentalComponent = createReactFundamentalComponent({
-        reconcileChildren: true,
-        getInstance,
-        getServerSideString(context, props) {
-          return `<div>`;
-        },
-        getServerSideStringClose(context, props) {
-          return `</div>`;
-        },
-      });
-
-      const Test = ({children}) => (
-        <FundamentalComponent>{children}</FundamentalComponent>
-      );
-
-      expect(getInstance).not.toBeCalled();
-      let output = ReactDOMServer.renderToString(<Test>Hello world</Test>);
-      expect(output).toBe('<div>Hello world</div>');
-      output = ReactDOMServer.renderToString(<Test>Hello world again</Test>);
-      expect(output).toBe('<div>Hello world again</div>');
-    });
-
-    // @gate experimental
-    it('should render a simple fundamental component without reconcileChildren', () => {
-      const FundamentalComponent = createReactFundamentalComponent({
-        reconcileChildren: false,
-        getServerSideString(context, props) {
-          return `<div>Hello world</div>`;
-        },
-      });
-
-      const Test = () => <FundamentalComponent />;
-
-      let output = ReactDOMServer.renderToString(<Test />);
-      expect(output).toBe('<div>Hello world</div>');
-      // Children should be ignored
-      output = ReactDOMServer.renderToString(<Test>Hello world again</Test>);
-      expect(output).toBe('<div>Hello world</div>');
-    });
-  });
-});
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index b9ffc0572521..14e43a822298 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -62,12 +62,6 @@ export const warnsIfNotActing = $$$hostConfig.warnsIfNotActing;
 export const supportsMutation = $$$hostConfig.supportsMutation;
 export const supportsPersistence = $$$hostConfig.supportsPersistence;
 export const supportsHydration = $$$hostConfig.supportsHydration;
-export const getFundamentalComponentInstance =
-  $$$hostConfig.getFundamentalComponentInstance;
-export const mountFundamentalComponent =
-  $$$hostConfig.mountFundamentalComponent;
-export const shouldUpdateFundamentalComponent =
-  $$$hostConfig.shouldUpdateFundamentalComponent;
 export const getInstanceFromNode = $$$hostConfig.getInstanceFromNode;
 export const isOpaqueHydratingObject = $$$hostConfig.isOpaqueHydratingObject;
 export const makeOpaqueHydratingObject =
@@ -112,10 +106,6 @@ export const hideInstance = $$$hostConfig.hideInstance;
 export const hideTextInstance = $$$hostConfig.hideTextInstance;
 export const unhideInstance = $$$hostConfig.unhideInstance;
 export const unhideTextInstance = $$$hostConfig.unhideTextInstance;
-export const updateFundamentalComponent =
-  $$$hostConfig.updateFundamentalComponent;
-export const unmountFundamentalComponent =
-  $$$hostConfig.unmountFundamentalComponent;
 export const clearContainer = $$$hostConfig.clearContainer;
 
 // -------------------
@@ -131,7 +121,6 @@ export const finalizeContainerChildren =
 export const replaceContainerChildren = $$$hostConfig.replaceContainerChildren;
 export const cloneHiddenInstance = $$$hostConfig.cloneHiddenInstance;
 export const cloneHiddenTextInstance = $$$hostConfig.cloneHiddenTextInstance;
-export const cloneFundamentalInstance = $$$hostConfig.cloneInstance;
 
 // -------------------
 //     Hydration
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 5adf1ac406e9..6110a0de8c58 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import type {ReactFundamentalComponentInstance} from 'shared/ReactTypes';
-
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 
 export type Type = string;
@@ -299,54 +297,6 @@ export function unhideTextInstance(
   textInstance.isHidden = false;
 }
 
-export function getFundamentalComponentInstance(
-  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
-): Instance {
-  const {impl, props, state} = fundamentalInstance;
-  return impl.getInstance(null, props, state);
-}
-
-export function mountFundamentalComponent(
-  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
-): void {
-  const {impl, instance, props, state} = fundamentalInstance;
-  const onMount = impl.onMount;
-  if (onMount !== undefined) {
-    onMount(null, instance, props, state);
-  }
-}
-
-export function shouldUpdateFundamentalComponent(
-  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
-): boolean {
-  const {impl, prevProps, props, state} = fundamentalInstance;
-  const shouldUpdate = impl.shouldUpdate;
-  if (shouldUpdate !== undefined) {
-    return shouldUpdate(null, prevProps, props, state);
-  }
-  return true;
-}
-
-export function updateFundamentalComponent(
-  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
-): void {
-  const {impl, instance, prevProps, props, state} = fundamentalInstance;
-  const onUpdate = impl.onUpdate;
-  if (onUpdate !== undefined) {
-    onUpdate(null, instance, prevProps, props, state);
-  }
-}
-
-export function unmountFundamentalComponent(
-  fundamentalInstance: ReactFundamentalComponentInstance<any, any>,
-): void {
-  const {impl, instance, props, state} = fundamentalInstance;
-  const onUnmount = impl.onUnmount;
-  if (onUnmount !== undefined) {
-    onUnmount(null, instance, props, state);
-  }
-}
-
 export function getInstanceFromNode(mockNode: Object) {
   const instance = nodeToInstanceMap.get(mockNode);
   if (instance !== undefined) {
diff --git a/packages/react/index.js b/packages/react/index.js
index 80e6591171b5..5319bb80be75 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -79,7 +79,6 @@ export {
   SuspenseList,
   SuspenseList as unstable_SuspenseList,
   unstable_LegacyHidden,
-  unstable_createFundamental,
   unstable_Scope,
   unstable_useOpaqueIdentifier,
   unstable_getCacheForType,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 84490ef902c9..70c92ff86820 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -58,7 +58,6 @@ import {
 } from './ReactElementValidator';
 import {createMutableSource} from './ReactMutableSource';
 import ReactSharedInternals from './ReactSharedInternals';
-import {createFundamental} from './ReactFundamental';
 import {startTransition} from './ReactStartTransition';
 
 // TODO: Move this branching into the other module instead and just re-export.
@@ -116,8 +115,6 @@ export {
   getCacheForType as unstable_getCacheForType,
   useCacheRefresh as unstable_useCacheRefresh,
   REACT_CACHE_TYPE as unstable_Cache,
-  // enableFundamentalAPI
-  createFundamental as unstable_createFundamental,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
   useOpaqueIdentifier as unstable_useOpaqueIdentifier,
diff --git a/packages/react/src/ReactFundamental.js b/packages/react/src/ReactFundamental.js
deleted file mode 100644
index ba5b220bc764..000000000000
--- a/packages/react/src/ReactFundamental.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @flow
- */
-
-import type {
-  ReactFundamentalImpl,
-  ReactFundamentalComponent,
-} from 'shared/ReactTypes';
-import {REACT_FUNDAMENTAL_TYPE} from 'shared/ReactSymbols';
-import {hasBadMapPolyfill} from './BadMapPolyfill';
-
-export function createFundamental<C, H>(
-  impl: ReactFundamentalImpl<C, H>,
-): ReactFundamentalComponent<C, H> {
-  // We use responder as a Map key later on. When we have a bad
-  // polyfill, then we can't use it as a key as the polyfill tries
-  // to add a property to the object.
-  if (__DEV__ && !hasBadMapPolyfill) {
-    Object.freeze(impl);
-  }
-  const fundamentalComponent = {
-    $$typeof: REACT_FUNDAMENTAL_TYPE,
-    impl,
-  };
-  if (__DEV__) {
-    Object.freeze(fundamentalComponent);
-  }
-  return fundamentalComponent;
-}
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 53f9b744cb9c..842bbe4dfa61 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -60,9 +60,6 @@ export const enableSchedulerDebugging = false;
 // Disable javascript: URL strings in href for XSS protection.
 export const disableJavaScriptURLs = false;
 
-// Experimental Host Component support.
-export const enableFundamentalAPI = false;
-
 // Experimental Scope support.
 export const enableScopeAPI = false;
 
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index d490ab417c21..c2fcba632441 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -25,7 +25,6 @@ export let REACT_SUSPENSE_TYPE = 0xead1;
 export let REACT_SUSPENSE_LIST_TYPE = 0xead8;
 export let REACT_MEMO_TYPE = 0xead3;
 export let REACT_LAZY_TYPE = 0xead4;
-export let REACT_FUNDAMENTAL_TYPE = 0xead5;
 export let REACT_SCOPE_TYPE = 0xead7;
 export let REACT_OPAQUE_ID_TYPE = 0xeae0;
 export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
@@ -47,7 +46,6 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
   REACT_MEMO_TYPE = symbolFor('react.memo');
   REACT_LAZY_TYPE = symbolFor('react.lazy');
-  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');
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 99e1bbb9bcd4..01708f731e9a 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -92,52 +92,6 @@ export const DiscreteEvent: EventPriority = 0;
 export const UserBlockingEvent: EventPriority = 1;
 export const ContinuousEvent: EventPriority = 2;
 
-export type ReactFundamentalComponentInstance<C, H> = {|
-  currentFiber: Object,
-  instance: mixed,
-  prevProps: null | Object,
-  props: Object,
-  impl: ReactFundamentalImpl<C, H>,
-  state: Object,
-|};
-
-export type ReactFundamentalImpl<C, H> = {
-  displayName: string,
-  reconcileChildren: boolean,
-  getInitialState?: (props: Object) => Object,
-  getInstance: (context: C, props: Object, state: Object) => H,
-  getServerSideString?: (context: C, props: Object) => string,
-  getServerSideStringClose?: (context: C, props: Object) => string,
-  onMount: (context: C, instance: mixed, props: Object, state: Object) => void,
-  shouldUpdate?: (
-    context: C,
-    prevProps: null | Object,
-    nextProps: Object,
-    state: Object,
-  ) => boolean,
-  onUpdate?: (
-    context: C,
-    instance: mixed,
-    prevProps: null | Object,
-    nextProps: Object,
-    state: Object,
-  ) => void,
-  onUnmount?: (
-    context: C,
-    instance: mixed,
-    props: Object,
-    state: Object,
-  ) => void,
-  onHydrate?: (context: C, props: Object, state: Object) => boolean,
-  onFocus?: (context: C, props: Object, state: Object) => boolean,
-  ...
-};
-
-export type ReactFundamentalComponent<C, H> = {|
-  $$typeof: Symbol | number,
-  impl: ReactFundamentalImpl<C, H>,
-|};
-
 export type ReactScope = {|
   $$typeof: Symbol | number,
 |};
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index a230930cb0a6..1200892cee3f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -28,7 +28,6 @@ export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
-export const enableFundamentalAPI = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
 export const warnAboutUnmockedScheduler = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 0dc9bed57584..3eb2d5e718f9 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -27,7 +27,6 @@ export const enableCache = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
-export const enableFundamentalAPI = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
 export const warnAboutUnmockedScheduler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 5652b66a0b83..0e95ccae4109 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -27,7 +27,6 @@ export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
-export const enableFundamentalAPI = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
 export const warnAboutUnmockedScheduler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 8962bcce36a4..ef7e948b2e18 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -27,7 +27,6 @@ export const enableCache = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
-export const enableFundamentalAPI = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
 export const warnAboutUnmockedScheduler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7905485bce68..756c38694ec7 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -27,7 +27,6 @@ export const enableCache = false;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
-export const enableFundamentalAPI = false;
 export const enableScopeAPI = true;
 export const enableCreateEventHandleAPI = false;
 export const warnAboutUnmockedScheduler = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index c1a20dd91a32..d2240049e0a4 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -27,7 +27,6 @@ export const enableCache = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
-export const enableFundamentalAPI = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
 export const warnAboutUnmockedScheduler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index c274d6a37645..e80dfde724d2 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -27,7 +27,6 @@ export const enableCache = false;
 export const disableJavaScriptURLs = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
-export const enableFundamentalAPI = false;
 export const enableScopeAPI = true;
 export const enableCreateEventHandleAPI = true;
 export const warnAboutUnmockedScheduler = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 2b1ba37ee848..640b0d6f3e30 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -71,8 +71,6 @@ export const disableModulePatternComponents = true;
 
 export const enableCreateEventHandleAPI = true;
 
-export const enableFundamentalAPI = false;
-
 export const enableScopeAPI = true;
 
 export const warnAboutUnmockedScheduler = true;
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 0a361c4a22de..7ad6b0766a66 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -19,7 +19,6 @@ import {
   REACT_SUSPENSE_LIST_TYPE,
   REACT_MEMO_TYPE,
   REACT_LAZY_TYPE,
-  REACT_FUNDAMENTAL_TYPE,
   REACT_SCOPE_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
   REACT_CACHE_TYPE,
@@ -58,7 +57,6 @@ export default function isValidElementType(type: mixed) {
       type.$$typeof === REACT_PROVIDER_TYPE ||
       type.$$typeof === REACT_CONTEXT_TYPE ||
       type.$$typeof === REACT_FORWARD_REF_TYPE ||
-      type.$$typeof === REACT_FUNDAMENTAL_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

From 903384ab0ccd57efd56225dbc82ba6ad56021380 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 5 Feb 2021 17:45:25 -0600
Subject: [PATCH 0238/1603] sizebot: Fix wrong order of base, head arguments
 (#20751)

The base and head arguments were flipped, so an n% decrease in bundle
size was instead reported as an n% increase.
---
 dangerfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dangerfile.js b/dangerfile.js
index 209d7a284926..cb7f9a190cbc 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -92,7 +92,7 @@ function getBundleSizes(pathToSizesDir) {
 async function printResultsForChannel(baseResults, headResults) {
   // Take the JSON of the build response and
   // make an array comparing the results for printing
-  const results = generateResultsArray(baseResults, headResults);
+  const results = generateResultsArray(headResults, baseResults);
 
   const packagesToShow = results
     .filter(

From bbb2ba8c8db747d70f5ef4114051e69aa5950b60 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 6 Feb 2021 14:57:11 -0600
Subject: [PATCH 0239/1603] sizebot: Combine stable and experimental results
 (#20753)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Because we have access to the artifacts in CI, we can read bundle sizes
directly from the filesystem, instead of the JSON files emitted by our
custom Rollup plugin.

This gives us some flexibility if we ever have artifacts that aren't
generated by Rollup, or if we rewrite our build script.

Personally, I also prefer to see the whole file path, instead of just
the name, because some of our names are repeated.

My immediate motivation, though, is because it gives us a way to merge
the separate "experimental" and "stable" size results. Instead
everything is reported in a single table and disambiguated by path.

I also added a section at the top that always displays the size impact
to certain critical bundles — right now, that's the React DOM production
bundles for each release channel. This section will also include any
size changes larger than 2%.

Below that is a section that is collapsed by default and includes all
size changes larger than 0.2%.
---
 dangerfile.js | 353 +++++++++++++++++++++++++-------------------------
 1 file changed, 179 insertions(+), 174 deletions(-)

diff --git a/dangerfile.js b/dangerfile.js
index cb7f9a190cbc..515e09536e23 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -7,6 +7,8 @@
 
 '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.
 //
@@ -26,169 +28,65 @@
 // `DANGER_GITHUB_API_TOKEN=[ENV_ABOVE] yarn danger pr https://github.com/facebook/react/pull/11865
 
 const {markdown, danger, warn} = require('danger');
-
-const {generateResultsArray} = require('./scripts/rollup/stats');
-const {readFileSync, readdirSync} = require('fs');
-const path = require('path');
-
-/**
- * Generates a Markdown table
- * @param {string[]} headers
- * @param {string[][]} body
- */
-function generateMDTable(headers, body) {
-  const tableHeaders = [
-    headers.join(' | '),
-    headers.map(() => ' --- ').join(' | '),
-  ];
-
-  const tablebody = body.map(r => r.join(' | '));
-  return tableHeaders.join('\n') + '\n' + tablebody.join('\n');
+const {promisify} = require('util');
+const glob = promisify(require('glob'));
+const gzipSize = require('gzip-size');
+
+const {readFileSync, statSync} = require('fs');
+
+const BASE_DIR = 'base-build';
+const HEAD_DIR = 'build2';
+
+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
+  // insiginificant or non-existent.
+  'oss-stable/react-dom/cjs/react-dom.production.min.js',
+  'oss-experimental/react-dom/cjs/react-dom.production.min.js',
+  'facebook-www/ReactDOM-prod.classic.js',
+  'facebook-www/ReactDOM-prod.modern.js',
+  'facebook-www/ReactDOMForked-prod.classic.js',
+]);
+
+const kilobyteFormatter = new Intl.NumberFormat('en', {
+  style: 'unit',
+  unit: 'kilobyte',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+function kbs(bytes) {
+  return kilobyteFormatter.format(bytes / 1000);
 }
 
-/**
- * Generates a user-readable string from a percentage change
- * @param {number} change
- * @param {boolean} includeEmoji
- */
-function addPercent(change, includeEmoji) {
-  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 {
-    if (includeEmoji) {
-      return `:small_red_triangle:+${formatted}%`;
-    } else {
-      return `+${formatted}%`;
-    }
-  }
-}
+const percentFormatter = new Intl.NumberFormat('en', {
+  style: 'percent',
+  signDisplay: 'exceptZero',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
 
-function setBoldness(row, isBold) {
-  if (isBold) {
-    return row.map(element => `**${element}**`);
-  } else {
-    return row;
+function change(decimal) {
+  if (Number === Infinity) {
+    return 'New file';
   }
-}
-
-function getBundleSizes(pathToSizesDir) {
-  const filenames = readdirSync(pathToSizesDir);
-  let bundleSizes = [];
-  for (let i = 0; i < filenames.length; i++) {
-    const filename = filenames[i];
-    if (filename.endsWith('.json')) {
-      const json = readFileSync(path.join(pathToSizesDir, filename));
-      bundleSizes.push(...JSON.parse(json).bundleSizes);
-    }
+  if (decimal === -1) {
+    return 'Deleted';
+  }
+  if (decimal < 0.0001) {
+    return '=';
   }
-  return {bundleSizes};
+  return percentFormatter.format(decimal);
 }
 
-async function printResultsForChannel(baseResults, headResults) {
-  // Take the JSON of the build response and
-  // make an array comparing the results for printing
-  const results = generateResultsArray(headResults, baseResults);
-
-  const packagesToShow = results
-    .filter(
-      r =>
-        Math.abs(r.prevFileSizeAbsoluteChange) >= 300 || // bytes
-        Math.abs(r.prevGzipSizeAbsoluteChange) >= 100 // bytes
-    )
-    .map(r => r.packageName);
-
-  if (packagesToShow.length) {
-    let allTables = [];
-
-    // Highlight React and React DOM changes inline
-    // e.g. react: `react.production.min.js`: -3%, `react.development.js`: +4%
-
-    if (packagesToShow.includes('react')) {
-      const reactProd = results.find(
-        r => r.bundleType === 'UMD_PROD' && r.packageName === 'react'
-      );
-      if (
-        reactProd.prevFileSizeChange !== 0 ||
-        reactProd.prevGzipSizeChange !== 0
-      ) {
-        const changeSize = addPercent(reactProd.prevFileSizeChange, true);
-        const changeGzip = addPercent(reactProd.prevGzipSizeChange, true);
-        markdown(`React: size: ${changeSize}, gzip: ${changeGzip}`);
-      }
-    }
-
-    if (packagesToShow.includes('react-dom')) {
-      const reactDOMProd = results.find(
-        r => r.bundleType === 'UMD_PROD' && r.packageName === 'react-dom'
-      );
-      if (
-        reactDOMProd.prevFileSizeChange !== 0 ||
-        reactDOMProd.prevGzipSizeChange !== 0
-      ) {
-        const changeSize = addPercent(reactDOMProd.prevFileSizeChange, true);
-        const changeGzip = addPercent(reactDOMProd.prevGzipSizeChange, true);
-        markdown(`ReactDOM: size: ${changeSize}, gzip: ${changeGzip}`);
-      }
-    }
-
-    // Show a hidden summary table for all diffs
-
-    // eslint-disable-next-line no-var,no-for-of-loops/no-for-of-loops
-    for (var name of new Set(packagesToShow)) {
-      const thisBundleResults = results.filter(r => r.packageName === name);
-      const changedFiles = thisBundleResults.filter(
-        r => r.prevFileSizeChange !== 0 || r.prevGzipSizeChange !== 0
-      );
-
-      const mdHeaders = [
-        'File',
-        'Filesize Diff',
-        'Gzip Diff',
-        'Prev Size',
-        'Current Size',
-        'Prev Gzip',
-        'Current Gzip',
-        'ENV',
-      ];
-
-      const mdRows = changedFiles.map(r => {
-        const isProd = r.bundleType.includes('PROD');
-        return setBoldness(
-          [
-            r.filename,
-            addPercent(r.prevFileSizeChange, isProd),
-            addPercent(r.prevGzipSizeChange, isProd),
-            r.prevSize,
-            r.prevFileSize,
-            r.prevGzip,
-            r.prevGzipSize,
-            r.bundleType,
-          ],
-          isProd
-        );
-      });
+const header = `
+  | Name | +/- | Base | Current | +/- gzip | Base gzip | Current gzip |
+  | ---- | --- | ---- | ------- | -------- | --------- | ------------ |`;
 
-      allTables.push(`\n## ${name}`);
-      allTables.push(generateMDTable(mdHeaders, mdRows));
-    }
-
-    const summary = `
-  <details>
-  <summary>Details of bundled changes.</summary>
-
-  ${allTables.join('\n')}
-
-  </details>
-  `;
-    return summary;
-  } else {
-    return 'No significant bundle size changes to report.';
-  }
+function row(result) {
+  // prettier-ignore
+  return `| ${result.path} | **${change(result.change)}** | ${kbs(result.baseSize)} | ${kbs(result.headSize)} | ${change(result.changeGzip)} | ${kbs(result.baseSizeGzip)} | ${kbs(result.headSizeGzip)}`;
 }
 
 (async function() {
@@ -202,21 +100,10 @@ async function printResultsForChannel(baseResults, headResults) {
   }
 
   let headSha;
-  let headSizesStable;
-  let headSizesExperimental;
-
   let baseSha;
-  let baseSizesStable;
-  let baseSizesExperimental;
-
   try {
-    headSha = (readFileSync('./build2/COMMIT_SHA') + '').trim();
-    headSizesStable = getBundleSizes('./build2/sizes-stable');
-    headSizesExperimental = getBundleSizes('./build2/sizes-experimental');
-
-    baseSha = (readFileSync('./base-build/COMMIT_SHA') + '').trim();
-    baseSizesStable = getBundleSizes('./base-build/sizes-stable');
-    baseSizesExperimental = getBundleSizes('./base-build/sizes-experimental');
+    headSha = (readFileSync(HEAD_DIR + '/COMMIT_SHA') + '').trim();
+    baseSha = (readFileSync(BASE_DIR + '/COMMIT_SHA') + '').trim();
   } catch {
     warn(
       "Failed to read build artifacts. It's possible a build configuration " +
@@ -226,17 +113,135 @@ async function printResultsForChannel(baseResults, headResults) {
     return;
   }
 
+  const resultsMap = new Map();
+
+  // Find all the head (current) artifacts paths.
+  const headArtifactPaths = await glob('**/*.js', {cwd: 'build2'});
+  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));
+  }
+
+  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));
+    }
+
+    // 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));
+    }
+  }
+
   markdown(`
-## Size changes
+Comparing: ${baseSha}...${headSha}
+
+## Critical size changes
 
-<p>Comparing: ${baseSha}...${headSha}</p>
+Includes critical production bundles, as well as any change greater than ${CRITICAL_THRESHOLD *
+    100}%:
 
-### Stable channel
+${header}
+${criticalResults.join('\n')}
 
-${await printResultsForChannel(baseSizesStable, headSizesStable)}
+## Significant size changes
 
-### Experimental channel
+Includes any change greater than ${SIGNIFICANCE_THRESHOLD * 100}%:
 
-${await printResultsForChannel(baseSizesExperimental, headSizesExperimental)}
+${
+  significantResults.length > 0
+    ? `
+<details>
+<summary>Expand to show</summary>
+${header}
+${significantResults.join('\n')}
+</details>
+`
+    : '(No significant changes)'
+}
 `);
 })();

From b5bac18219636112a450d392c02102ec56262c74 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Feb 2021 17:48:31 +0000
Subject: [PATCH 0240/1603] Align event group constant naming with lane naming
 (#20744)

* Rename ContinuousEvent to DefaultEvent

* Rename UserBlockingEvent to ContinuousEvent
---
 packages/react-dom/src/client/ReactDOM.js     |  6 ++---
 .../src/events/DOMEventProperties.js          | 24 ++++++++-----------
 .../src/events/ReactDOMEventListener.js       | 14 ++++-------
 .../src/events/ReactDOMEventReplaying.js      |  8 +++----
 .../src/ReactFiberReconciler.js               | 10 ++++----
 .../src/ReactFiberReconciler.new.js           |  2 +-
 .../src/ReactFiberReconciler.old.js           |  2 +-
 packages/shared/ReactTypes.js                 |  4 ++--
 8 files changed, 31 insertions(+), 39 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index fcd54a58ede5..66ae001c3b27 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -32,7 +32,7 @@ import {
   flushPassiveEffects,
   IsThisRendererActing,
   attemptSynchronousHydration,
-  attemptUserBlockingHydration,
+  attemptDiscreteHydration,
   attemptContinuousHydration,
   attemptHydrationAtCurrentPriority,
   runWithPriority,
@@ -56,7 +56,7 @@ import {
 import {restoreControlledState} from './ReactDOMComponent';
 import {
   setAttemptSynchronousHydration,
-  setAttemptUserBlockingHydration,
+  setAttemptDiscreteHydration,
   setAttemptContinuousHydration,
   setAttemptHydrationAtCurrentPriority,
   queueExplicitHydrationTarget,
@@ -71,7 +71,7 @@ import {
 } from '../events/ReactDOMControlledComponent';
 
 setAttemptSynchronousHydration(attemptSynchronousHydration);
-setAttemptUserBlockingHydration(attemptUserBlockingHydration);
+setAttemptDiscreteHydration(attemptDiscreteHydration);
 setAttemptContinuousHydration(attemptContinuousHydration);
 setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
 setGetCurrentUpdatePriority(getCurrentUpdateLanePriority);
diff --git a/packages/react-dom/src/events/DOMEventProperties.js b/packages/react-dom/src/events/DOMEventProperties.js
index abdd3a256e34..9fe967737e93 100644
--- a/packages/react-dom/src/events/DOMEventProperties.js
+++ b/packages/react-dom/src/events/DOMEventProperties.js
@@ -17,11 +17,7 @@ import {
   ANIMATION_START,
   TRANSITION_END,
 } from './DOMEventNames';
-import {
-  DiscreteEvent,
-  UserBlockingEvent,
-  ContinuousEvent,
-} from 'shared/ReactTypes';
+import {DiscreteEvent, ContinuousEvent, DefaultEvent} from 'shared/ReactTypes';
 
 import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 
@@ -97,7 +93,7 @@ if (enableCreateEventHandleAPI) {
 }
 
 // prettier-ignore
-const userBlockingPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
+const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('drag': DOMEventName), 'drag',
   ('dragenter': DOMEventName), 'dragEnter',
   ('dragexit': DOMEventName), 'dragExit',
@@ -116,7 +112,7 @@ const userBlockingPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
 ];
 
 // prettier-ignore
-const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
+const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('abort': DOMEventName), 'abort',
   (ANIMATION_END: DOMEventName), 'animationEnd',
   (ANIMATION_ITERATION: DOMEventName), 'animationIteration',
@@ -190,10 +186,10 @@ export function getEventPriorityForPluginSystem(
   domEventName: DOMEventName,
 ): EventPriority {
   const priority = eventPriorities.get(domEventName);
-  // Default to a ContinuousEvent. Note: we might
+  // Default to a DefaultEvent. Note: we might
   // want to warn if we can't detect the priority
   // for the event.
-  return priority === undefined ? ContinuousEvent : priority;
+  return priority === undefined ? DefaultEvent : priority;
 }
 
 export function getEventPriorityForListenerSystem(
@@ -210,7 +206,7 @@ export function getEventPriorityForListenerSystem(
       type,
     );
   }
-  return ContinuousEvent;
+  return DefaultEvent;
 }
 
 export function registerSimpleEvents() {
@@ -218,13 +214,13 @@ export function registerSimpleEvents() {
     discreteEventPairsForSimpleEventPlugin,
     DiscreteEvent,
   );
-  registerSimplePluginEventsAndSetTheirPriorities(
-    userBlockingPairsForSimpleEventPlugin,
-    UserBlockingEvent,
-  );
   registerSimplePluginEventsAndSetTheirPriorities(
     continuousPairsForSimpleEventPlugin,
     ContinuousEvent,
   );
+  registerSimplePluginEventsAndSetTheirPriorities(
+    defaultPairsForSimpleEventPlugin,
+    DefaultEvent,
+  );
   setEventPriorities(otherDiscreteEvents, DiscreteEvent);
 }
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index dcb2cfb9fd70..4b87da2c320d 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -43,11 +43,7 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
-import {
-  UserBlockingEvent,
-  ContinuousEvent,
-  DiscreteEvent,
-} from 'shared/ReactTypes';
+import {ContinuousEvent, DefaultEvent, DiscreteEvent} from 'shared/ReactTypes';
 import {getEventPriorityForPluginSystem} from './DOMEventProperties';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
@@ -118,10 +114,10 @@ export function createEventListenerWrapperWithPriority(
     case DiscreteEvent:
       listenerWrapper = dispatchDiscreteEvent;
       break;
-    case UserBlockingEvent:
-      listenerWrapper = dispatchUserBlockingUpdate;
-      break;
     case ContinuousEvent:
+      listenerWrapper = dispatchContinuousEvent;
+      break;
+    case DefaultEvent:
     default:
       listenerWrapper = dispatchEvent;
       break;
@@ -157,7 +153,7 @@ function dispatchDiscreteEvent(
   );
 }
 
-function dispatchUserBlockingUpdate(
+function dispatchContinuousEvent(
   domEventName,
   eventSystemFlags,
   container,
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index a56487c0928d..8cfacce3e0e9 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -39,10 +39,10 @@ export function setAttemptSynchronousHydration(fn: (fiber: Object) => void) {
   attemptSynchronousHydration = fn;
 }
 
-let attemptUserBlockingHydration: (fiber: Object) => void;
+let attemptDiscreteHydration: (fiber: Object) => void;
 
-export function setAttemptUserBlockingHydration(fn: (fiber: Object) => void) {
-  attemptUserBlockingHydration = fn;
+export function setAttemptDiscreteHydration(fn: (fiber: Object) => void) {
+  attemptDiscreteHydration = fn;
 }
 
 let attemptContinuousHydration: (fiber: Object) => void;
@@ -489,7 +489,7 @@ function replayUnblockedEvents() {
       // the next discrete event.
       const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
       if (fiber !== null) {
-        attemptUserBlockingHydration(fiber);
+        attemptDiscreteHydration(fiber);
       }
       break;
     }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index a0b7661d4c98..292d3aaf2a32 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -29,7 +29,7 @@ import {
   IsThisRendererActing as IsThisRendererActing_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
-  attemptUserBlockingHydration as attemptUserBlockingHydration_old,
+  attemptDiscreteHydration as attemptDiscreteHydration_old,
   attemptContinuousHydration as attemptContinuousHydration_old,
   attemptHydrationAtCurrentPriority as attemptHydrationAtCurrentPriority_old,
   findHostInstance as findHostInstance_old,
@@ -69,7 +69,7 @@ import {
   IsThisRendererActing as IsThisRendererActing_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
-  attemptUserBlockingHydration as attemptUserBlockingHydration_new,
+  attemptDiscreteHydration as attemptDiscreteHydration_new,
   attemptContinuousHydration as attemptContinuousHydration_new,
   attemptHydrationAtCurrentPriority as attemptHydrationAtCurrentPriority_new,
   findHostInstance as findHostInstance_new,
@@ -134,9 +134,9 @@ export const getPublicRootInstance = enableNewReconciler
 export const attemptSynchronousHydration = enableNewReconciler
   ? attemptSynchronousHydration_new
   : attemptSynchronousHydration_old;
-export const attemptUserBlockingHydration = enableNewReconciler
-  ? attemptUserBlockingHydration_new
-  : attemptUserBlockingHydration_old;
+export const attemptDiscreteHydration = enableNewReconciler
+  ? attemptDiscreteHydration_new
+  : attemptDiscreteHydration_old;
 export const attemptContinuousHydration = enableNewReconciler
   ? attemptContinuousHydration_new
   : attemptContinuousHydration_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 57107e964245..439f69634e9b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -396,7 +396,7 @@ function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   }
 }
 
-export function attemptUserBlockingHydration(fiber: Fiber): void {
+export function attemptDiscreteHydration(fiber: Fiber): void {
   if (fiber.tag !== SuspenseComponent) {
     // We ignore HostRoots here because we can't increase
     // their priority and they should not suspend on I/O,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index ba9a796f6300..f9e4a7cdf0d7 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -396,7 +396,7 @@ function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   }
 }
 
-export function attemptUserBlockingHydration(fiber: Fiber): void {
+export function attemptDiscreteHydration(fiber: Fiber): void {
   if (fiber.tag !== SuspenseComponent) {
     // We ignore HostRoots here because we can't increase
     // their priority and they should not suspend on I/O,
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 01708f731e9a..ae428508d1b2 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -89,8 +89,8 @@ export type RefObject = {|
 export type EventPriority = 0 | 1 | 2;
 
 export const DiscreteEvent: EventPriority = 0;
-export const UserBlockingEvent: EventPriority = 1;
-export const ContinuousEvent: EventPriority = 2;
+export const ContinuousEvent: EventPriority = 1;
+export const DefaultEvent: EventPriority = 2;
 
 export type ReactScope = {|
   $$typeof: Symbol | number,

From 77754ae6183197a63716202f71be5d396f0f2b9a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Feb 2021 20:48:47 +0000
Subject: [PATCH 0241/1603] Decouple event priority list from event name list
 (#20760)

* Remove some dead code

* Decouple event priority list from event name list

* Fix lint
---
 .../src/events/DOMEventProperties.js          | 109 ++----------------
 .../src/events/ReactDOMEventListener.js       |  75 +++++++++++-
 .../src/events/ReactSyntheticEventType.js     |   2 -
 .../legacy-events/ReactSyntheticEventType.js  |   2 -
 4 files changed, 86 insertions(+), 102 deletions(-)

diff --git a/packages/react-dom/src/events/DOMEventProperties.js b/packages/react-dom/src/events/DOMEventProperties.js
index 9fe967737e93..ab13027b05ce 100644
--- a/packages/react-dom/src/events/DOMEventProperties.js
+++ b/packages/react-dom/src/events/DOMEventProperties.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {EventPriority} from 'shared/ReactTypes';
 import type {DOMEventName} from './DOMEventNames';
 
 import {registerTwoPhaseEvent} from './EventRegistry';
@@ -17,7 +16,6 @@ import {
   ANIMATION_START,
   TRANSITION_END,
 } from './DOMEventNames';
-import {DiscreteEvent, ContinuousEvent, DefaultEvent} from 'shared/ReactTypes';
 
 import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 
@@ -26,19 +24,8 @@ export const topLevelEventsToReactNames: Map<
   string | null,
 > = new Map();
 
-const eventPriorities = new Map();
-
-// We store most of the events in this module in pairs of two strings so we can re-use
-// the code required to apply the same logic for event prioritization and that of the
-// SimpleEventPlugin. This complicates things slightly, but the aim is to reduce code
-// duplication (for which there would be quite a bit). For the events that are not needed
-// for the SimpleEventPlugin (otherDiscreteEvents) we process them separately as an
-// array of top level events.
-
-// Lastly, we ignore prettier so we can keep the formatting sane.
-
 // prettier-ignore
-const discreteEventPairsForSimpleEventPlugin = [
+const simpleEventPluginNames = [
   ('cancel': DOMEventName), 'cancel',
   ('click': DOMEventName), 'click',
   ('close': DOMEventName), 'close',
@@ -73,27 +60,7 @@ const discreteEventPairsForSimpleEventPlugin = [
   ('touchend': DOMEventName), 'touchEnd',
   ('touchstart': DOMEventName), 'touchStart',
   ('volumechange': DOMEventName), 'volumeChange',
-];
-
-const otherDiscreteEvents: Array<DOMEventName> = [
-  'change',
-  'selectionchange',
-  'textInput',
-  'compositionstart',
-  'compositionend',
-  'compositionupdate',
-];
-
-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);
-  otherDiscreteEvents.push('beforeblur', 'afterblur');
-}
 
-// prettier-ignore
-const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('drag': DOMEventName), 'drag',
   ('dragenter': DOMEventName), 'dragEnter',
   ('dragexit': DOMEventName), 'dragExit',
@@ -109,10 +76,7 @@ const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('toggle': DOMEventName), 'toggle',
   ('touchmove': DOMEventName), 'touchMove',
   ('wheel': DOMEventName), 'wheel',
-];
 
-// prettier-ignore
-const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('abort': DOMEventName), 'abort',
   (ANIMATION_END: DOMEventName), 'animationEnd',
   (ANIMATION_ITERATION: DOMEventName), 'animationIteration',
@@ -140,6 +104,13 @@ const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('waiting': DOMEventName), 'waiting',
 ];
 
+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);
+}
+
 /**
  * Turns
  * ['abort', ...]
@@ -152,75 +123,19 @@ const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
  *
  * and registers them.
  */
-function registerSimplePluginEventsAndSetTheirPriorities(
-  eventTypes: Array<DOMEventName | string>,
-  priority: EventPriority,
-): void {
+export function registerSimpleEvents() {
   // As the event types are in pairs of two, we need to iterate
   // through in twos. The events are in pairs of two to save code
   // and improve init perf of processing this array, as it will
   // result in far fewer object allocations and property accesses
   // if we only use three arrays to process all the categories of
   // instead of tuples.
-  for (let i = 0; i < eventTypes.length; i += 2) {
-    const topEvent = ((eventTypes[i]: any): DOMEventName);
-    const event = ((eventTypes[i + 1]: any): string);
+  for (let i = 0; i < simpleEventPluginNames.length; i += 2) {
+    const topEvent = ((simpleEventPluginNames[i]: any): DOMEventName);
+    const event = ((simpleEventPluginNames[i + 1]: any): string);
     const capitalizedEvent = event[0].toUpperCase() + event.slice(1);
     const reactName = 'on' + capitalizedEvent;
-    eventPriorities.set(topEvent, priority);
     topLevelEventsToReactNames.set(topEvent, reactName);
     registerTwoPhaseEvent(reactName, [topEvent]);
   }
 }
-
-function setEventPriorities(
-  eventTypes: Array<DOMEventName>,
-  priority: EventPriority,
-): void {
-  for (let i = 0; i < eventTypes.length; i++) {
-    eventPriorities.set(eventTypes[i], priority);
-  }
-}
-
-export function getEventPriorityForPluginSystem(
-  domEventName: DOMEventName,
-): EventPriority {
-  const priority = eventPriorities.get(domEventName);
-  // Default to a DefaultEvent. Note: we might
-  // want to warn if we can't detect the priority
-  // for the event.
-  return priority === undefined ? DefaultEvent : priority;
-}
-
-export function getEventPriorityForListenerSystem(
-  type: DOMEventName,
-): EventPriority {
-  const priority = eventPriorities.get(type);
-  if (priority !== undefined) {
-    return priority;
-  }
-  if (__DEV__) {
-    console.warn(
-      'The event "%s" provided to createEventHandle() does not have a known priority type.' +
-        ' This is likely a bug in React.',
-      type,
-    );
-  }
-  return DefaultEvent;
-}
-
-export function registerSimpleEvents() {
-  registerSimplePluginEventsAndSetTheirPriorities(
-    discreteEventPairsForSimpleEventPlugin,
-    DiscreteEvent,
-  );
-  registerSimplePluginEventsAndSetTheirPriorities(
-    continuousPairsForSimpleEventPlugin,
-    ContinuousEvent,
-  );
-  registerSimplePluginEventsAndSetTheirPriorities(
-    defaultPairsForSimpleEventPlugin,
-    DefaultEvent,
-  );
-  setEventPriorities(otherDiscreteEvents, DiscreteEvent);
-}
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 4b87da2c320d..7790bf70a168 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,6 +11,7 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
+import type {EventPriority} from 'shared/ReactTypes';
 
 // Intentionally not named imports because Rollup would use dynamic dispatch for
 // CommonJS interop named imports.
@@ -44,7 +45,6 @@ import {
   enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 import {ContinuousEvent, DefaultEvent, DiscreteEvent} from 'shared/ReactTypes';
-import {getEventPriorityForPluginSystem} from './DOMEventProperties';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   flushDiscreteUpdatesIfNeeded,
@@ -339,3 +339,76 @@ export function attemptToDispatchEvent(
   // We're not blocked on anything.
   return null;
 }
+
+function getEventPriorityForPluginSystem(
+  domEventName: DOMEventName,
+): EventPriority {
+  switch (domEventName) {
+    // Used by SimpleEventPlugin:
+    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 'touchcancel':
+    case 'touchend':
+    case 'touchstart':
+    case 'volumechange':
+    // Used by polyfills:
+    // eslint-disable-next-line no-fallthrough
+    case 'change':
+    case 'selectionchange':
+    case 'textInput':
+    case 'compositionstart':
+    case 'compositionend':
+    case 'compositionupdate':
+    // Only enableCreateEventHandleAPI:
+    // eslint-disable-next-line no-fallthrough
+    case 'beforeblur':
+    case 'afterblur':
+      return DiscreteEvent;
+    case 'drag':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'mousemove':
+    case 'mouseout':
+    case 'mouseover':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'scroll':
+    case 'toggle':
+    case 'touchmove':
+    case 'wheel':
+      return ContinuousEvent;
+    default:
+      return DefaultEvent;
+  }
+}
diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js
index 853aa3a6aefa..d92777a75cce 100644
--- a/packages/react-dom/src/events/ReactSyntheticEventType.js
+++ b/packages/react-dom/src/events/ReactSyntheticEventType.js
@@ -9,7 +9,6 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {EventPriority} from 'shared/ReactTypes';
 import type {DOMEventName} from './DOMEventNames';
 
 export type DispatchConfig = {|
@@ -19,7 +18,6 @@ export type DispatchConfig = {|
     captured: null | string,
   |},
   registrationName?: string,
-  eventPriority?: EventPriority,
 |};
 
 type BaseSyntheticEvent = {
diff --git a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
index 1bc167afe006..57d019e2a398 100644
--- a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
+++ b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
@@ -9,7 +9,6 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {EventPriority} from 'shared/ReactTypes';
 import type {TopLevelType} from './TopLevelEventTypes';
 
 export type DispatchConfig = {|
@@ -19,7 +18,6 @@ export type DispatchConfig = {|
     captured: null | string,
   |},
   registrationName?: string,
-  eventPriority: EventPriority,
 |};
 
 export type CustomDispatchConfig = {|

From a014c915c77f908ba3be3de9e6a06d05c71d5b62 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 8 Feb 2021 15:26:48 -0600
Subject: [PATCH 0242/1603] Parallel transitions: Assign different lanes to
 consecutive transitions (#20672)

* Land enableTransitionEntanglement changes

Leaving the flag though because I plan to reuse it for additional,
similar changes.

* Assign different lanes to consecutive transitions

Currently we always assign the same lane to all transitions. This means
if there are two pending transitions at the same time, neither
transition can finish until both can finish, even if they affect
completely separate parts of the UI.

The new approach is to assign a different lane to each consecutive
transition, by shifting the bit to the right each time. When we reach
the end of the bit range, we cycle back to the first bit. In practice,
this should mean that all transitions get their own dedicated lane,
unless we have more pending transitions than lanes, which should
be rare.

We retain our existing behavior of assigning the same lane to all
transitions within the same event. This is achieved by caching the first
lane assigned to a transition, then re-using that one until the next
React task, by which point the event must have finished. This preserves
the guarantee that all transition updates that result from a single
event will be consistent.
---
 .../src/ReactFiberLane.new.js                 | 146 +++--
 .../src/ReactFiberLane.old.js                 | 146 +++--
 .../src/ReactFiberWorkLoop.new.js             |  33 +-
 .../src/ReactFiberWorkLoop.old.js             |  33 +-
 .../src/__tests__/ReactExpiration-test.js     |  17 +-
 .../src/__tests__/ReactTransition-test.js     | 500 +++++++++++++++++-
 6 files changed, 625 insertions(+), 250 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 88c4d1946cb6..afa54b7b7b11 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -36,10 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {
-  enableCache,
-  enableTransitionEntanglement,
-} from 'shared/ReactFeatureFlags';
+import {enableCache} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -95,6 +92,7 @@ export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
+const SomeTransitionLane: Lane = /*                     */ 0b0000000000000000010000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
 
@@ -113,6 +111,9 @@ export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
 
+let nextTransitionLane: Lane = SomeTransitionLane;
+let nextRetryLane: Lane = SomeRetryLane;
+
 export function getCurrentUpdateLanePriority(): LanePriority {
   return currentUpdateLanePriority;
 }
@@ -309,15 +310,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     return NoLanes;
   }
 
-  if (enableTransitionEntanglement) {
-    // We don't need to do anything extra here, because we apply per-lane
-    // transition entanglement in the entanglement loop below.
-  } else {
-    // If there are higher priority lanes, we'll include them even if they
-    // are suspended.
-    nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes);
-  }
-
   // 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.
@@ -350,6 +342,11 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // 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, like
   // useMutableSource, we should ensure that there is no partial work at the
@@ -559,34 +556,23 @@ export function findUpdateLane(
   );
 }
 
-// To ensure consistency across multiple updates in the same event, this should
-// be pure function, so that it always returns the same lane for given inputs.
-export function findTransitionLane(wipLanes: Lanes, pendingLanes: Lanes): Lane {
-  // First look for lanes that are completely unclaimed, i.e. have no
-  // pending work.
-  let lane = pickArbitraryLane(TransitionLanes & ~pendingLanes);
-  if (lane === NoLane) {
-    // If all lanes have pending work, look for a lane that isn't currently
-    // being worked on.
-    lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
-    if (lane === NoLane) {
-      // If everything is being worked on, pick any lane. This has the
-      // effect of interrupting the current work-in-progress.
-      lane = pickArbitraryLane(TransitionLanes);
-    }
+export function claimNextTransitionLane(): 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 = nextTransitionLane;
+  nextTransitionLane <<= 1;
+  if ((nextTransitionLane & TransitionLanes) === 0) {
+    nextTransitionLane = SomeTransitionLane;
   }
   return lane;
 }
 
-// To ensure consistency across multiple updates in the same event, this should
-// be pure function, so that it always returns the same lane for given inputs.
-export function findRetryLane(wipLanes: Lanes): Lane {
-  // This is a fork of `findUpdateLane` designed specifically for Suspense
-  // "retries" — a special update that attempts to flip a Suspense boundary
-  // from its placeholder state to its primary/resolved state.
-  let lane = pickArbitraryLane(RetryLanes & ~wipLanes);
-  if (lane === NoLane) {
-    lane = pickArbitraryLane(RetryLanes);
+export function claimNextRetryLane(): Lane {
+  const lane = nextRetryLane;
+  nextRetryLane <<= 1;
+  if ((nextRetryLane & RetryLanes) === 0) {
+    nextRetryLane = SomeRetryLane;
   }
   return lane;
 }
@@ -595,16 +581,6 @@ function getHighestPriorityLane(lanes: Lanes) {
   return lanes & -lanes;
 }
 
-function getLowestPriorityLane(lanes: Lanes): Lane {
-  // This finds the most significant non-zero bit.
-  const index = 31 - clz32(lanes);
-  return index < 0 ? NoLanes : 1 << index;
-}
-
-function getEqualOrHigherPriorityLanes(lanes: Lanes | Lane): Lanes {
-  return (getLowestPriorityLane(lanes) << 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
@@ -676,39 +652,21 @@ export function markRootUpdated(
 ) {
   root.pendingLanes |= updateLane;
 
-  // TODO: Theoretically, any update to any lane can unblock any other lane. But
-  // it's not practical to try every single possible combination. We need a
-  // heuristic to decide which lanes to attempt to render, and in which batches.
-  // For now, we use the same heuristic as in the old ExpirationTimes model:
-  // retry any lane at equal or lower priority, but don't try updates at higher
-  // priority without also including the lower priority updates. This works well
-  // when considering updates across different priority levels, but isn't
-  // sufficient for updates within the same priority, since we want to treat
-  // those updates as parallel.
-
-  // Unsuspend any update at equal or lower priority.
-  const higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
-
-  if (enableTransitionEntanglement) {
-    // 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 & IdleLanes) === NoLanes) {
-      root.suspendedLanes = NoLanes;
-      root.pingedLanes = NoLanes;
-    }
-  } else {
-    root.suspendedLanes &= higherPriorityLanes;
-    root.pingedLanes &= higherPriorityLanes;
+  // 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 & IdleLanes) === NoLanes) {
+    root.suspendedLanes = NoLanes;
+    root.pingedLanes = NoLanes;
   }
 
   const eventTimes = root.eventTimes;
@@ -801,16 +759,32 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 }
 
 export function markRootEntangled(root: FiberRoot, entangledLanes: Lanes) {
-  root.entangledLanes |= entangledLanes;
+  // 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 = entangledLanes;
-  while (lanes > 0) {
+  let lanes = rootEntangledLanes;
+  while (lanes) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
-
-    entanglements[index] |= entangledLanes;
-
+    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;
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index a083ae68d8a8..3a0cdc3af2b6 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -36,10 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {
-  enableCache,
-  enableTransitionEntanglement,
-} from 'shared/ReactFeatureFlags';
+import {enableCache} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -95,6 +92,7 @@ export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
+const SomeTransitionLane: Lane = /*                     */ 0b0000000000000000010000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
 
@@ -113,6 +111,9 @@ export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
 
+let nextTransitionLane: Lane = SomeTransitionLane;
+let nextRetryLane: Lane = SomeRetryLane;
+
 export function getCurrentUpdateLanePriority(): LanePriority {
   return currentUpdateLanePriority;
 }
@@ -309,15 +310,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     return NoLanes;
   }
 
-  if (enableTransitionEntanglement) {
-    // We don't need to do anything extra here, because we apply per-lane
-    // transition entanglement in the entanglement loop below.
-  } else {
-    // If there are higher priority lanes, we'll include them even if they
-    // are suspended.
-    nextLanes = pendingLanes & getEqualOrHigherPriorityLanes(nextLanes);
-  }
-
   // 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.
@@ -350,6 +342,11 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // 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, like
   // useMutableSource, we should ensure that there is no partial work at the
@@ -559,34 +556,23 @@ export function findUpdateLane(
   );
 }
 
-// To ensure consistency across multiple updates in the same event, this should
-// be pure function, so that it always returns the same lane for given inputs.
-export function findTransitionLane(wipLanes: Lanes, pendingLanes: Lanes): Lane {
-  // First look for lanes that are completely unclaimed, i.e. have no
-  // pending work.
-  let lane = pickArbitraryLane(TransitionLanes & ~pendingLanes);
-  if (lane === NoLane) {
-    // If all lanes have pending work, look for a lane that isn't currently
-    // being worked on.
-    lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
-    if (lane === NoLane) {
-      // If everything is being worked on, pick any lane. This has the
-      // effect of interrupting the current work-in-progress.
-      lane = pickArbitraryLane(TransitionLanes);
-    }
+export function claimNextTransitionLane(): 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 = nextTransitionLane;
+  nextTransitionLane <<= 1;
+  if ((nextTransitionLane & TransitionLanes) === 0) {
+    nextTransitionLane = SomeTransitionLane;
   }
   return lane;
 }
 
-// To ensure consistency across multiple updates in the same event, this should
-// be pure function, so that it always returns the same lane for given inputs.
-export function findRetryLane(wipLanes: Lanes): Lane {
-  // This is a fork of `findUpdateLane` designed specifically for Suspense
-  // "retries" — a special update that attempts to flip a Suspense boundary
-  // from its placeholder state to its primary/resolved state.
-  let lane = pickArbitraryLane(RetryLanes & ~wipLanes);
-  if (lane === NoLane) {
-    lane = pickArbitraryLane(RetryLanes);
+export function claimNextRetryLane(): Lane {
+  const lane = nextRetryLane;
+  nextRetryLane <<= 1;
+  if ((nextRetryLane & RetryLanes) === 0) {
+    nextRetryLane = SomeRetryLane;
   }
   return lane;
 }
@@ -595,16 +581,6 @@ function getHighestPriorityLane(lanes: Lanes) {
   return lanes & -lanes;
 }
 
-function getLowestPriorityLane(lanes: Lanes): Lane {
-  // This finds the most significant non-zero bit.
-  const index = 31 - clz32(lanes);
-  return index < 0 ? NoLanes : 1 << index;
-}
-
-function getEqualOrHigherPriorityLanes(lanes: Lanes | Lane): Lanes {
-  return (getLowestPriorityLane(lanes) << 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
@@ -676,39 +652,21 @@ export function markRootUpdated(
 ) {
   root.pendingLanes |= updateLane;
 
-  // TODO: Theoretically, any update to any lane can unblock any other lane. But
-  // it's not practical to try every single possible combination. We need a
-  // heuristic to decide which lanes to attempt to render, and in which batches.
-  // For now, we use the same heuristic as in the old ExpirationTimes model:
-  // retry any lane at equal or lower priority, but don't try updates at higher
-  // priority without also including the lower priority updates. This works well
-  // when considering updates across different priority levels, but isn't
-  // sufficient for updates within the same priority, since we want to treat
-  // those updates as parallel.
-
-  // Unsuspend any update at equal or lower priority.
-  const higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
-
-  if (enableTransitionEntanglement) {
-    // 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 & IdleLanes) === NoLanes) {
-      root.suspendedLanes = NoLanes;
-      root.pingedLanes = NoLanes;
-    }
-  } else {
-    root.suspendedLanes &= higherPriorityLanes;
-    root.pingedLanes &= higherPriorityLanes;
+  // 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 & IdleLanes) === NoLanes) {
+    root.suspendedLanes = NoLanes;
+    root.pingedLanes = NoLanes;
   }
 
   const eventTimes = root.eventTimes;
@@ -801,16 +759,32 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 }
 
 export function markRootEntangled(root: FiberRoot, entangledLanes: Lanes) {
-  root.entangledLanes |= entangledLanes;
+  // 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 = entangledLanes;
-  while (lanes > 0) {
+  let lanes = rootEntangledLanes;
+  while (lanes) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
-
-    entanglements[index] |= entangledLanes;
-
+    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;
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7513d21e27b1..f148e2bd46b9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -145,8 +145,8 @@ import {
   SyncBatchedLane,
   NoTimestamp,
   findUpdateLane,
-  findTransitionLane,
-  findRetryLane,
+  claimNextTransitionLane,
+  claimNextRetryLane,
   includesSomeLane,
   isSubsetOfLanes,
   mergeLanes,
@@ -302,8 +302,6 @@ let workInProgressRootUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
 
-let mostRecentlyUpdatedRoot: FiberRoot | null = null;
-
 // The most recent time we committed a fallback. This lets us ensure a train
 // model where we don't commit new loading states in too quick succession.
 let globalMostRecentFallbackTime: number = 0;
@@ -360,7 +358,7 @@ let spawnedWorkDuringRender: null | Array<Lane | Lanes> = null;
 // between the first and second call.
 let currentEventTime: number = NoTimestamp;
 let currentEventWipLanes: Lanes = NoLanes;
-let currentEventPendingLanes: Lanes = NoLanes;
+let currentEventTransitionLane: Lanes = NoLanes;
 
 // Dev only flag that tracks if passive effects are currently being flushed.
 // We warn about state updates for unmounted components differently in this case.
@@ -428,20 +426,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // 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.
   //
-  // We'll do the same for `currentEventPendingLanes` below.
+  // We'll do the same for `currentEventTransitionLane` below.
   if (currentEventWipLanes === NoLanes) {
     currentEventWipLanes = workInProgressRootIncludedLanes;
   }
 
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
-    if (currentEventPendingLanes !== NoLanes) {
-      currentEventPendingLanes =
-        mostRecentlyUpdatedRoot !== null
-          ? mostRecentlyUpdatedRoot.pendingLanes
-          : NoLanes;
+    if (currentEventTransitionLane === NoLane) {
+      currentEventTransitionLane = claimNextTransitionLane();
     }
-    return findTransitionLane(currentEventWipLanes, currentEventPendingLanes);
+    return currentEventTransitionLane;
   }
 
   // TODO: Remove this dependency on the Scheduler priority.
@@ -494,7 +489,8 @@ function requestRetryLane(fiber: Fiber) {
   if (currentEventWipLanes === NoLanes) {
     currentEventWipLanes = workInProgressRootIncludedLanes;
   }
-  return findRetryLane(currentEventWipLanes);
+
+  return claimNextRetryLane();
 }
 
 export function scheduleUpdateOnFiber(
@@ -618,13 +614,6 @@ export function scheduleUpdateOnFiber(
     schedulePendingInteractions(root, lane);
   }
 
-  // We use this when assigning a lane for a transition inside
-  // `requestUpdateLane`. We assume it's the same as the root being updated,
-  // since in the common case of a single root app it probably is. If it's not
-  // the same root, then it's not a huge deal, we just might batch more stuff
-  // together more than necessary.
-  mostRecentlyUpdatedRoot = root;
-
   return root;
 }
 
@@ -793,7 +782,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
   currentEventWipLanes = NoLanes;
-  currentEventPendingLanes = NoLanes;
+  currentEventTransitionLane = NoLanes;
 
   invariant(
     (executionContext & (RenderContext | CommitContext)) === NoContext,
@@ -2461,6 +2450,8 @@ function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
   // suspended it has resolved, which means at least part of the tree was
   // likely unblocked. Try rendering again, at a new expiration time.
   if (retryLane === NoLane) {
+    // TODO: Assign this to `suspenseState.retryLane`? to avoid
+    // unnecessary entanglement?
     retryLane = requestRetryLane(boundaryFiber);
   }
   // TODO: Special case idle priority?
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 5f372831d741..3589bff2c6be 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -145,8 +145,8 @@ import {
   SyncBatchedLane,
   NoTimestamp,
   findUpdateLane,
-  findTransitionLane,
-  findRetryLane,
+  claimNextTransitionLane,
+  claimNextRetryLane,
   includesSomeLane,
   isSubsetOfLanes,
   mergeLanes,
@@ -302,8 +302,6 @@ let workInProgressRootUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
 
-let mostRecentlyUpdatedRoot: FiberRoot | null = null;
-
 // The most recent time we committed a fallback. This lets us ensure a train
 // model where we don't commit new loading states in too quick succession.
 let globalMostRecentFallbackTime: number = 0;
@@ -360,7 +358,7 @@ let spawnedWorkDuringRender: null | Array<Lane | Lanes> = null;
 // between the first and second call.
 let currentEventTime: number = NoTimestamp;
 let currentEventWipLanes: Lanes = NoLanes;
-let currentEventPendingLanes: Lanes = NoLanes;
+let currentEventTransitionLane: Lanes = NoLanes;
 
 // Dev only flag that tracks if passive effects are currently being flushed.
 // We warn about state updates for unmounted components differently in this case.
@@ -428,20 +426,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // 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.
   //
-  // We'll do the same for `currentEventPendingLanes` below.
+  // We'll do the same for `currentEventTransitionLane` below.
   if (currentEventWipLanes === NoLanes) {
     currentEventWipLanes = workInProgressRootIncludedLanes;
   }
 
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
-    if (currentEventPendingLanes !== NoLanes) {
-      currentEventPendingLanes =
-        mostRecentlyUpdatedRoot !== null
-          ? mostRecentlyUpdatedRoot.pendingLanes
-          : NoLanes;
+    if (currentEventTransitionLane === NoLane) {
+      currentEventTransitionLane = claimNextTransitionLane();
     }
-    return findTransitionLane(currentEventWipLanes, currentEventPendingLanes);
+    return currentEventTransitionLane;
   }
 
   // TODO: Remove this dependency on the Scheduler priority.
@@ -494,7 +489,8 @@ function requestRetryLane(fiber: Fiber) {
   if (currentEventWipLanes === NoLanes) {
     currentEventWipLanes = workInProgressRootIncludedLanes;
   }
-  return findRetryLane(currentEventWipLanes);
+
+  return claimNextRetryLane();
 }
 
 export function scheduleUpdateOnFiber(
@@ -618,13 +614,6 @@ export function scheduleUpdateOnFiber(
     schedulePendingInteractions(root, lane);
   }
 
-  // We use this when assigning a lane for a transition inside
-  // `requestUpdateLane`. We assume it's the same as the root being updated,
-  // since in the common case of a single root app it probably is. If it's not
-  // the same root, then it's not a huge deal, we just might batch more stuff
-  // together more than necessary.
-  mostRecentlyUpdatedRoot = root;
-
   return root;
 }
 
@@ -793,7 +782,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
   currentEventWipLanes = NoLanes;
-  currentEventPendingLanes = NoLanes;
+  currentEventTransitionLane = NoLanes;
 
   invariant(
     (executionContext & (RenderContext | CommitContext)) === NoContext,
@@ -2461,6 +2450,8 @@ function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
   // suspended it has resolved, which means at least part of the tree was
   // likely unblocked. Try rendering again, at a new expiration time.
   if (retryLane === NoLane) {
+    // TODO: Assign this to `suspenseState.retryLane`? to avoid
+    // unnecessary entanglement?
     retryLane = requestRetryLane(boundaryFiber);
   }
   // TODO: Special case idle priority?
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index fd224b2a1f81..c416d2404856 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -733,19 +733,10 @@ describe('ReactExpiration', () => {
       // Both normal pri updates should have expired.
       expect(Scheduler).toFlushExpired([
         'Sibling',
-        gate(flags => flags.enableTransitionEntanglement)
-          ? // Notice that the high pri update didn't flush yet. Expiring one lane
-            // doesn't affect other lanes. (Unless they are intentionally
-            // entangled, like we do for overlapping transitions that affect the
-            // same state.)
-            'High pri: 0'
-          : // In the current implementation, once we pick the next lanes to work
-            // on, we entangle it with all pending at equal or higher priority.
-            // We could feasibly change this heuristic so that the high pri
-            // update doesn't render until after the expired updates have
-            // finished. But the important thing in this test is that the normal
-            // updates expired.
-            'High pri: 1',
+        // Notice that the high pri update didn't flush yet. Expiring one lane
+        // doesn't affect other lanes. (Unless they are intentionally entangled,
+        // like we do for overlapping transitions that affect the same state.)
+        'High pri: 0',
         'Normal pri: 2',
         'Sibling',
       ]);
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index 1b25cf7dd187..0b9084356c71 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -16,7 +16,12 @@ let Scheduler;
 let Suspense;
 let useState;
 let useTransition;
+let startTransition;
 let act;
+let getCacheForType;
+
+let caches;
+let seededCache;
 
 describe('ReactTransition', () => {
   beforeEach(() => {
@@ -27,44 +32,142 @@ describe('ReactTransition', () => {
     useState = React.useState;
     useTransition = React.unstable_useTransition;
     Suspense = React.Suspense;
+    startTransition = React.unstable_startTransition;
+    getCacheForType = React.unstable_getCacheForType;
     act = ReactNoop.act;
+
+    caches = [];
+    seededCache = null;
   });
 
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return props.text;
+  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 createAsyncText(text) {
-    let resolved = false;
-    const Component = function() {
-      if (!resolved) {
-        Scheduler.unstable_yieldValue('Suspend! [' + text + ']');
-        throw promise;
+  function readText(text) {
+    const textCache = getCacheForType(createTextCache);
+    const record = textCache.data.get(text);
+    if (record !== undefined) {
+      switch (record.status) {
+        case 'pending':
+          Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
       }
-      return <Text text={text} />;
-    };
-    const promise = new Promise(resolve => {
-      Component.resolve = function() {
-        resolved = true;
-        return resolve();
+    } else {
+      Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+
+      const thenable = {
+        pings: [],
+        then(resolve) {
+          if (newRecord.status === 'pending') {
+            thenable.pings.push(resolve);
+          } else {
+            Promise.resolve().then(() => resolve(newRecord.value));
+          }
+        },
       };
-    });
-    return Component;
+
+      const newRecord = {
+        status: 'pending',
+        value: thenable,
+      };
+      textCache.data.set(text, newRecord);
+
+      throw thenable;
+    }
+  }
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.unstable_yieldValue(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 experimental
-  it('isPending works even if called from outside an input event', async () => {
-    const Async = createAsyncText('Async');
+  // @gate enableCache
+  test('isPending works even if called from outside an input event', async () => {
     let start;
     function App() {
       const [show, setShow] = useState(false);
-      const [startTransition, isPending] = useTransition();
-      start = () => startTransition(() => setShow(true));
+      const [_start, isPending] = useTransition();
+      start = () => _start(() => setShow(true));
       return (
         <Suspense fallback={<Text text="Loading..." />}>
           {isPending ? <Text text="Pending..." /> : null}
-          {show ? <Async /> : <Text text="(empty)" />}
+          {show ? <AsyncText text="Async" /> : <Text text="(empty)" />}
         </Suspense>
       );
     }
@@ -89,9 +192,360 @@ describe('ReactTransition', () => {
 
       expect(root).toMatchRenderedOutput('Pending...(empty)');
 
-      await Async.resolve();
+      await resolveText('Async');
     });
     expect(Scheduler).toHaveYielded(['Async']);
     expect(root).toMatchRenderedOutput('Async');
   });
+
+  // @gate experimental
+  // @gate enableCache
+  test(
+    '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 [startContentChange, isContentPending] = 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(async () => {
+        seedNextTextCache('A content');
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded(['A label', 'A content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          A label<div>A content</div>
+        </>,
+      );
+
+      // Switch to B
+      await act(async () => {
+        update('B');
+      });
+      expect(Scheduler).toHaveYielded([
+        // 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(async () => {
+        update('C');
+      });
+      expect(Scheduler).toHaveYielded([
+        // 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(async () => {
+        resolveText('B content');
+      });
+      expect(Scheduler).toHaveYielded([
+        // 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(async () => {
+        resolveText('C content');
+      });
+      expect(Scheduler).toHaveYielded(['C label', 'C content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label<div>C content</div>
+        </>,
+      );
+    },
+  );
+
+  // Same as previous test, but for class update queue.
+  // @gate experimental
+  // @gate enableCache
+  test(
+    '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(async () => {
+        seedNextTextCache('A content');
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded(['A label', 'A content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          A label<div>A content</div>
+        </>,
+      );
+
+      // Switch to B
+      await act(async () => {
+        update('B');
+      });
+      expect(Scheduler).toHaveYielded([
+        // 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(async () => {
+        update('C');
+      });
+      expect(Scheduler).toHaveYielded([
+        // 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(async () => {
+        resolveText('B content');
+      });
+      expect(Scheduler).toHaveYielded([
+        // 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(async () => {
+        resolveText('C content');
+      });
+      expect(Scheduler).toHaveYielded(['C label', 'C content']);
+      expect(root).toMatchRenderedOutput(
+        <>
+          C label<div>C content</div>
+        </>,
+      );
+    },
+  );
+
+  // @gate experimental
+  // @gate enableCache
+  test(
+    '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(async () => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([]);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Switch to A.
+      await act(async () => {
+        startTransition(() => {
+          setShowA(true);
+        });
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [A]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Before A loads, switch to B. This should entangle A with B.
+      await act(async () => {
+        startTransition(() => {
+          setShowA(false);
+          setShowB(true);
+        });
+      });
+      expect(Scheduler).toHaveYielded(['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(async () => {
+        startTransition(() => {
+          setShowB(false);
+          setShowC(true);
+        });
+      });
+      expect(Scheduler).toHaveYielded(['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(async () => {
+        startTransition(() => {
+          resolveText('B');
+        });
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [C]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Now resolve A. Again, this will attempt to render C, since everything
+      // is entangled.
+      await act(async () => {
+        startTransition(() => {
+          resolveText('A');
+        });
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [C]', 'Loading...']);
+      expect(root).toMatchRenderedOutput(null);
+
+      // Finally, resolve C. This time we can finish.
+      await act(async () => {
+        startTransition(() => {
+          resolveText('C');
+        });
+      });
+      expect(Scheduler).toHaveYielded(['C']);
+      expect(root).toMatchRenderedOutput('C');
+    },
+  );
 });

From b4658f2daa4990ef8057335cd7202b479bd8d41a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Feb 2021 22:30:12 +0000
Subject: [PATCH 0243/1603] Reduce some constant duplication (#20761)

* Reduce some constant duplication

* Alphabetize
---
 .../src/events/DOMEventProperties.js          | 196 +++++++++---------
 1 file changed, 94 insertions(+), 102 deletions(-)

diff --git a/packages/react-dom/src/events/DOMEventProperties.js b/packages/react-dom/src/events/DOMEventProperties.js
index ab13027b05ce..a9b22ae8a3e2 100644
--- a/packages/react-dom/src/events/DOMEventProperties.js
+++ b/packages/react-dom/src/events/DOMEventProperties.js
@@ -24,84 +24,83 @@ export const topLevelEventsToReactNames: Map<
   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 simpleEventPluginNames = [
-  ('cancel': DOMEventName), 'cancel',
-  ('click': DOMEventName), 'click',
-  ('close': DOMEventName), 'close',
-  ('contextmenu': DOMEventName), 'contextMenu',
-  ('copy': DOMEventName), 'copy',
-  ('cut': DOMEventName), 'cut',
-  ('auxclick': DOMEventName), 'auxClick',
-  ('dblclick': DOMEventName), 'doubleClick', // Careful!
-  ('dragend': DOMEventName), 'dragEnd',
-  ('dragstart': DOMEventName), 'dragStart',
-  ('drop': DOMEventName), 'drop',
-  ('focusin': DOMEventName), 'focus', // Careful!
-  ('focusout': DOMEventName), 'blur', // Careful!
-  ('input': DOMEventName), 'input',
-  ('invalid': DOMEventName), 'invalid',
-  ('keydown': DOMEventName), 'keyDown',
-  ('keypress': DOMEventName), 'keyPress',
-  ('keyup': DOMEventName), 'keyUp',
-  ('mousedown': DOMEventName), 'mouseDown',
-  ('mouseup': DOMEventName), 'mouseUp',
-  ('paste': DOMEventName), 'paste',
-  ('pause': DOMEventName), 'pause',
-  ('play': DOMEventName), 'play',
-  ('pointercancel': DOMEventName), 'pointerCancel',
-  ('pointerdown': DOMEventName), 'pointerDown',
-  ('pointerup': DOMEventName), 'pointerUp',
-  ('ratechange': DOMEventName), 'rateChange',
-  ('reset': DOMEventName), 'reset',
-  ('seeked': DOMEventName), 'seeked',
-  ('submit': DOMEventName), 'submit',
-  ('touchcancel': DOMEventName), 'touchCancel',
-  ('touchend': DOMEventName), 'touchEnd',
-  ('touchstart': DOMEventName), 'touchStart',
-  ('volumechange': DOMEventName), 'volumeChange',
-
-  ('drag': DOMEventName), 'drag',
-  ('dragenter': DOMEventName), 'dragEnter',
-  ('dragexit': DOMEventName), 'dragExit',
-  ('dragleave': DOMEventName), 'dragLeave',
-  ('dragover': DOMEventName), 'dragOver',
-  ('mousemove': DOMEventName), 'mouseMove',
-  ('mouseout': DOMEventName), 'mouseOut',
-  ('mouseover': DOMEventName), 'mouseOver',
-  ('pointermove': DOMEventName), 'pointerMove',
-  ('pointerout': DOMEventName), 'pointerOut',
-  ('pointerover': DOMEventName), 'pointerOver',
-  ('scroll': DOMEventName), 'scroll',
-  ('toggle': DOMEventName), 'toggle',
-  ('touchmove': DOMEventName), 'touchMove',
-  ('wheel': DOMEventName), 'wheel',
-
-  ('abort': DOMEventName), 'abort',
-  (ANIMATION_END: DOMEventName), 'animationEnd',
-  (ANIMATION_ITERATION: DOMEventName), 'animationIteration',
-  (ANIMATION_START: DOMEventName), 'animationStart',
-  ('canplay': DOMEventName), 'canPlay',
-  ('canplaythrough': DOMEventName), 'canPlayThrough',
-  ('durationchange': DOMEventName), 'durationChange',
-  ('emptied': DOMEventName), 'emptied',
-  ('encrypted': DOMEventName), 'encrypted',
-  ('ended': DOMEventName), 'ended',
-  ('error': DOMEventName), 'error',
-  ('gotpointercapture': DOMEventName), 'gotPointerCapture',
-  ('load': DOMEventName), 'load',
-  ('loadeddata': DOMEventName), 'loadedData',
-  ('loadedmetadata': DOMEventName), 'loadedMetadata',
-  ('loadstart': DOMEventName), 'loadStart',
-  ('lostpointercapture': DOMEventName), 'lostPointerCapture',
-  ('playing': DOMEventName), 'playing',
-  ('progress': DOMEventName), 'progress',
-  ('seeking': DOMEventName), 'seeking',
-  ('stalled': DOMEventName), 'stalled',
-  ('suspend': DOMEventName), 'suspend',
-  ('timeupdate': DOMEventName), 'timeUpdate',
-  (TRANSITION_END: DOMEventName), 'transitionEnd',
-  ('waiting': DOMEventName), 'waiting',
+const simpleEventPluginEvents = [
+  'abort',
+  'auxClick',
+  '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',
+  'seeked',
+  'seeking',
+  'stalled',
+  'submit',
+  'suspend',
+  'timeUpdate',
+  'touchCancel',
+  'touchEnd',
+  'touchStart',
+  'volumeChange',
+  'scroll',
+  'toggle',
+  'touchMove',
+  'waiting',
+  'wheel',
 ];
 
 if (enableCreateEventHandleAPI) {
@@ -111,31 +110,24 @@ if (enableCreateEventHandleAPI) {
   topLevelEventsToReactNames.set('afterblur', null);
 }
 
-/**
- * Turns
- * ['abort', ...]
- *
- * into
- *
- * topLevelEventsToReactNames = new Map([
- *   ['abort', 'onAbort'],
- * ]);
- *
- * and registers them.
- */
+function registerSimpleEvent(domEventName, reactName) {
+  topLevelEventsToReactNames.set(domEventName, reactName);
+  registerTwoPhaseEvent(reactName, [domEventName]);
+}
+
 export function registerSimpleEvents() {
-  // As the event types are in pairs of two, we need to iterate
-  // through in twos. The events are in pairs of two to save code
-  // and improve init perf of processing this array, as it will
-  // result in far fewer object allocations and property accesses
-  // if we only use three arrays to process all the categories of
-  // instead of tuples.
-  for (let i = 0; i < simpleEventPluginNames.length; i += 2) {
-    const topEvent = ((simpleEventPluginNames[i]: any): DOMEventName);
-    const event = ((simpleEventPluginNames[i + 1]: any): string);
-    const capitalizedEvent = event[0].toUpperCase() + event.slice(1);
-    const reactName = 'on' + capitalizedEvent;
-    topLevelEventsToReactNames.set(topEvent, reactName);
-    registerTwoPhaseEvent(reactName, [topEvent]);
+  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_END, 'onTransitionEnd');
 }

From 35f7441d374bfa7be8e3e9576fd1388333df49cb Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 8 Feb 2021 22:30:23 +0000
Subject: [PATCH 0244/1603] Use Lanes instead of priority event constants
 (#20762)

---
 .../src/events/ReactDOMEventListener.js       | 30 +++++++++++--------
 packages/shared/ReactTypes.js                 |  6 ----
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 7790bf70a168..74955b0c88eb 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,7 +11,6 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
-import type {EventPriority} from 'shared/ReactTypes';
 
 // Intentionally not named imports because Rollup would use dynamic dispatch for
 // CommonJS interop named imports.
@@ -44,7 +43,6 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
-import {ContinuousEvent, DefaultEvent, DiscreteEvent} from 'shared/ReactTypes';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   flushDiscreteUpdatesIfNeeded,
@@ -52,19 +50,29 @@ import {
 } from './ReactDOMUpdateBatching';
 
 import {
+  InputDiscreteLanePriority as InputDiscreteLanePriority_old,
   InputContinuousLanePriority as InputContinuousLanePriority_old,
+  DefaultLanePriority as DefaultLanePriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_old,
 } from 'react-reconciler/src/ReactFiberLane.old';
 import {
+  InputDiscreteLanePriority as InputDiscreteLanePriority_new,
   InputContinuousLanePriority as InputContinuousLanePriority_new,
+  DefaultLanePriority as DefaultLanePriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_new,
 } from 'react-reconciler/src/ReactFiberLane.new';
 
+const InputDiscreteLanePriority = enableNewReconciler
+  ? InputDiscreteLanePriority_new
+  : InputDiscreteLanePriority_old;
 const InputContinuousLanePriority = enableNewReconciler
   ? InputContinuousLanePriority_new
   : InputContinuousLanePriority_old;
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
 const getCurrentUpdateLanePriority = enableNewReconciler
   ? getCurrentUpdateLanePriority_new
   : getCurrentUpdateLanePriority_old;
@@ -108,16 +116,16 @@ export function createEventListenerWrapperWithPriority(
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
 ): Function {
-  const eventPriority = getEventPriorityForPluginSystem(domEventName);
+  const eventPriority = getEventPriority(domEventName);
   let listenerWrapper;
   switch (eventPriority) {
-    case DiscreteEvent:
+    case InputDiscreteLanePriority:
       listenerWrapper = dispatchDiscreteEvent;
       break;
-    case ContinuousEvent:
+    case InputContinuousLanePriority:
       listenerWrapper = dispatchContinuousEvent;
       break;
-    case DefaultEvent:
+    case DefaultLanePriority:
     default:
       listenerWrapper = dispatchEvent;
       break;
@@ -340,9 +348,7 @@ export function attemptToDispatchEvent(
   return null;
 }
 
-function getEventPriorityForPluginSystem(
-  domEventName: DOMEventName,
-): EventPriority {
+function getEventPriority(domEventName: DOMEventName) {
   switch (domEventName) {
     // Used by SimpleEventPlugin:
     case 'cancel':
@@ -391,7 +397,7 @@ function getEventPriorityForPluginSystem(
     // eslint-disable-next-line no-fallthrough
     case 'beforeblur':
     case 'afterblur':
-      return DiscreteEvent;
+      return InputDiscreteLanePriority;
     case 'drag':
     case 'dragenter':
     case 'dragexit':
@@ -407,8 +413,8 @@ function getEventPriorityForPluginSystem(
     case 'toggle':
     case 'touchmove':
     case 'wheel':
-      return ContinuousEvent;
+      return InputContinuousLanePriority;
     default:
-      return DefaultEvent;
+      return DefaultLanePriority;
   }
 }
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index ae428508d1b2..dc31b998ea31 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -86,12 +86,6 @@ export type RefObject = {|
   current: any,
 |};
 
-export type EventPriority = 0 | 1 | 2;
-
-export const DiscreteEvent: EventPriority = 0;
-export const ContinuousEvent: EventPriority = 1;
-export const DefaultEvent: EventPriority = 2;
-
 export type ReactScope = {|
   $$typeof: Symbol | number,
 |};

From 6c526c5153bc350d2a62c7dcbc698be77d3f2439 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 9 Feb 2021 02:03:07 -0600
Subject: [PATCH 0245/1603] Don't shift interleaved updates to separate lane
 (#20681)

Now that interleaved updates are added to a special queue, we no longer
need to shift them into their own lane. We can add to a lane that's
already in the middle of rendering without risk of tearing.

See #20615 for more background.

I've only changed this in the new fork, and only behind the
enableTransitionEntanglements flag.

Most of this commit involves updating tests. The "shift-to-a-new" lane
trick was intentionally used in a handful of tests where two or more
updates need to be scheduled in different lanes. Most of these tests
were written before `startTransition` existed, and all of them were
written before transitions were assigned arbitrary lanes.

So I ported these tests to use `startTransition` instead, which is the
idiomatic way to mark an update as parallel.

I didn't change the old fork at all. Writing these tests in such a way
that they also pass in the old fork actually revealed a few flaws in the
current implementation regarding interrupting a suspended refresh
transition early, which is a good reminder that we should be writing our
tests using idiomatic patterns as much as we possibly can.
---
 .../src/ReactFiberHooks.new.js                |   9 +-
 .../src/ReactFiberHooks.old.js                |   9 +-
 .../src/ReactFiberLane.new.js                 | 136 +++++++----
 .../src/ReactFiberLane.old.js                 | 136 +++++++----
 .../src/ReactFiberWorkLoop.new.js             |   3 +
 .../src/ReactFiberWorkLoop.old.js             |   3 +
 .../src/ReactUpdateQueue.new.js               |   9 +-
 .../src/ReactUpdateQueue.old.js               |   9 +-
 .../__tests__/DebugTracing-test.internal.js   |  11 +-
 .../src/__tests__/ReactExpiration-test.js     |  39 +--
 .../ReactSchedulerIntegration-test.js         |  12 +-
 .../__tests__/ReactSuspense-test.internal.js  | 203 ----------------
 .../ReactSuspenseWithNoopRenderer-test.js     |  62 +++--
 .../src/__tests__/ReactTransition-test.js     | 225 ++++++++++++++++++
 .../SchedulingProfiler-test.internal.js       |   3 +
 15 files changed, 503 insertions(+), 366 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 46c6b5af0e96..cc5a8b00563b 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2029,10 +2029,11 @@ function dispatchAction<S, A>(
 
       // Entangle the new transition lane with the other transition lanes.
       const newQueueLanes = mergeLanes(queueLanes, lane);
-      if (newQueueLanes !== queueLanes) {
-        queue.lanes = newQueueLanes;
-        markRootEntangled(root, newQueueLanes);
-      }
+      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);
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 17038f14b090..b5eefde63f71 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2029,10 +2029,11 @@ function dispatchAction<S, A>(
 
       // Entangle the new transition lane with the other transition lanes.
       const newQueueLanes = mergeLanes(queueLanes, lane);
-      if (newQueueLanes !== queueLanes) {
-        queue.lanes = newQueueLanes;
-        markRootEntangled(root, newQueueLanes);
-      }
+      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);
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index afa54b7b7b11..315541115c37 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -36,7 +36,10 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableTransitionEntanglement,
+} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -92,11 +95,12 @@ export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
-const SomeTransitionLane: Lane = /*                     */ 0b0000000000000000010000000000000;
+const FirstTransitionLane: Lane = /*                    */ 0b0000000000000000010000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
 
-export const SomeRetryLane: Lanes = /*                  */ 0b0000010000000000000000000000000;
+const FirstRetryLane: Lanes = /*                        */ 0b0000000010000000000000000000000;
+export const SomeRetryLane: Lane = FirstRetryLane;
 
 export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
 
@@ -111,8 +115,8 @@ export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
 
-let nextTransitionLane: Lane = SomeTransitionLane;
-let nextRetryLane: Lane = SomeRetryLane;
+let nextTransitionLane: Lane = FirstTransitionLane;
+let nextRetryLane: Lane = FirstRetryLane;
 
 export function getCurrentUpdateLanePriority(): LanePriority {
   return currentUpdateLanePriority;
@@ -498,56 +502,88 @@ export function findUpdateLane(
   lanePriority: LanePriority,
   wipLanes: Lanes,
 ): Lane {
-  switch (lanePriority) {
-    case NoLanePriority:
-      break;
-    case SyncLanePriority:
-      return SyncLane;
-    case SyncBatchedLanePriority:
-      return SyncBatchedLane;
-    case InputDiscreteLanePriority: {
-      const lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
-      if (lane === NoLane) {
-        // Shift to the next priority level
-        return findUpdateLane(InputContinuousLanePriority, wipLanes);
+  if (enableTransitionEntanglement) {
+    // Ignore wipLanes. Always assign to the same bit per priority.
+    switch (lanePriority) {
+      case NoLanePriority:
+        break;
+      case SyncLanePriority:
+        return SyncLane;
+      case SyncBatchedLanePriority:
+        return SyncBatchedLane;
+      case InputDiscreteLanePriority: {
+        return pickArbitraryLane(InputDiscreteLanes);
       }
-      return lane;
-    }
-    case InputContinuousLanePriority: {
-      const lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
-      if (lane === NoLane) {
-        // Shift to the next priority level
-        return findUpdateLane(DefaultLanePriority, wipLanes);
+      case InputContinuousLanePriority: {
+        return pickArbitraryLane(InputContinuousLanes);
+      }
+      case DefaultLanePriority: {
+        return pickArbitraryLane(DefaultLanes);
       }
-      return lane;
+      case TransitionPriority: // Should be handled by findTransitionLane instead
+      case RetryLanePriority: // Should be handled by findRetryLane instead
+        break;
+      case IdleLanePriority:
+        return pickArbitraryLane(IdleLanes);
+      default:
+        // The remaining priorities are not valid for updates
+        break;
     }
-    case DefaultLanePriority: {
-      let lane = pickArbitraryLane(DefaultLanes & ~wipLanes);
-      if (lane === NoLane) {
-        // If all the default lanes are already being worked on, look for a
-        // lane in the transition range.
-        lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
+  } else {
+    // Old behavior that uses wipLanes to shift interleaved updates into a
+    // separate lane. This is no longer needed because we put interleaved
+    // updates on a special queue.
+    switch (lanePriority) {
+      case NoLanePriority:
+        break;
+      case SyncLanePriority:
+        return SyncLane;
+      case SyncBatchedLanePriority:
+        return SyncBatchedLane;
+      case InputDiscreteLanePriority: {
+        const lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
         if (lane === NoLane) {
-          // All the transition lanes are taken, too. This should be very
-          // rare, but as a last resort, pick a default lane. This will have
-          // the effect of interrupting the current work-in-progress render.
-          lane = pickArbitraryLane(DefaultLanes);
+          // Shift to the next priority level
+          return findUpdateLane(InputContinuousLanePriority, wipLanes);
         }
+        return lane;
       }
-      return lane;
-    }
-    case TransitionPriority: // Should be handled by findTransitionLane instead
-    case RetryLanePriority: // Should be handled by findRetryLane instead
-      break;
-    case IdleLanePriority:
-      let lane = pickArbitraryLane(IdleLanes & ~wipLanes);
-      if (lane === NoLane) {
-        lane = pickArbitraryLane(IdleLanes);
+      case InputContinuousLanePriority: {
+        const lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
+        if (lane === NoLane) {
+          // Shift to the next priority level
+          return findUpdateLane(DefaultLanePriority, wipLanes);
+        }
+        return lane;
       }
-      return lane;
-    default:
-      // The remaining priorities are not valid for updates
-      break;
+      case DefaultLanePriority: {
+        let lane = pickArbitraryLane(DefaultLanes & ~wipLanes);
+        if (lane === NoLane) {
+          // If all the default lanes are already being worked on, look for a
+          // lane in the transition range.
+          lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
+          if (lane === NoLane) {
+            // All the transition lanes are taken, too. This should be very
+            // rare, but as a last resort, pick a default lane. This will have
+            // the effect of interrupting the current work-in-progress render.
+            lane = pickArbitraryLane(DefaultLanes);
+          }
+        }
+        return lane;
+      }
+      case TransitionPriority: // Should be handled by findTransitionLane instead
+      case RetryLanePriority: // Should be handled by findRetryLane instead
+        break;
+      case IdleLanePriority:
+        let lane = pickArbitraryLane(IdleLanes & ~wipLanes);
+        if (lane === NoLane) {
+          lane = pickArbitraryLane(IdleLanes);
+        }
+        return lane;
+      default:
+        // The remaining priorities are not valid for updates
+        break;
+    }
   }
   invariant(
     false,
@@ -563,7 +599,7 @@ export function claimNextTransitionLane(): Lane {
   const lane = nextTransitionLane;
   nextTransitionLane <<= 1;
   if ((nextTransitionLane & TransitionLanes) === 0) {
-    nextTransitionLane = SomeTransitionLane;
+    nextTransitionLane = FirstTransitionLane;
   }
   return lane;
 }
@@ -572,7 +608,7 @@ export function claimNextRetryLane(): Lane {
   const lane = nextRetryLane;
   nextRetryLane <<= 1;
   if ((nextRetryLane & RetryLanes) === 0) {
-    nextRetryLane = SomeRetryLane;
+    nextRetryLane = FirstRetryLane;
   }
   return lane;
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 3a0cdc3af2b6..e34c8ac0514f 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -36,7 +36,10 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableTransitionEntanglement,
+} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -92,11 +95,12 @@ export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
-const SomeTransitionLane: Lane = /*                     */ 0b0000000000000000010000000000000;
+const FirstTransitionLane: Lane = /*                    */ 0b0000000000000000010000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
 
-export const SomeRetryLane: Lanes = /*                  */ 0b0000010000000000000000000000000;
+const FirstRetryLane: Lanes = /*                        */ 0b0000000010000000000000000000000;
+export const SomeRetryLane: Lane = FirstRetryLane;
 
 export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
 
@@ -111,8 +115,8 @@ export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
 
-let nextTransitionLane: Lane = SomeTransitionLane;
-let nextRetryLane: Lane = SomeRetryLane;
+let nextTransitionLane: Lane = FirstTransitionLane;
+let nextRetryLane: Lane = FirstRetryLane;
 
 export function getCurrentUpdateLanePriority(): LanePriority {
   return currentUpdateLanePriority;
@@ -498,56 +502,88 @@ export function findUpdateLane(
   lanePriority: LanePriority,
   wipLanes: Lanes,
 ): Lane {
-  switch (lanePriority) {
-    case NoLanePriority:
-      break;
-    case SyncLanePriority:
-      return SyncLane;
-    case SyncBatchedLanePriority:
-      return SyncBatchedLane;
-    case InputDiscreteLanePriority: {
-      const lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
-      if (lane === NoLane) {
-        // Shift to the next priority level
-        return findUpdateLane(InputContinuousLanePriority, wipLanes);
+  if (enableTransitionEntanglement) {
+    // Ignore wipLanes. Always assign to the same bit per priority.
+    switch (lanePriority) {
+      case NoLanePriority:
+        break;
+      case SyncLanePriority:
+        return SyncLane;
+      case SyncBatchedLanePriority:
+        return SyncBatchedLane;
+      case InputDiscreteLanePriority: {
+        return pickArbitraryLane(InputDiscreteLanes);
       }
-      return lane;
-    }
-    case InputContinuousLanePriority: {
-      const lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
-      if (lane === NoLane) {
-        // Shift to the next priority level
-        return findUpdateLane(DefaultLanePriority, wipLanes);
+      case InputContinuousLanePriority: {
+        return pickArbitraryLane(InputContinuousLanes);
+      }
+      case DefaultLanePriority: {
+        return pickArbitraryLane(DefaultLanes);
       }
-      return lane;
+      case TransitionPriority: // Should be handled by findTransitionLane instead
+      case RetryLanePriority: // Should be handled by findRetryLane instead
+        break;
+      case IdleLanePriority:
+        return pickArbitraryLane(IdleLanes);
+      default:
+        // The remaining priorities are not valid for updates
+        break;
     }
-    case DefaultLanePriority: {
-      let lane = pickArbitraryLane(DefaultLanes & ~wipLanes);
-      if (lane === NoLane) {
-        // If all the default lanes are already being worked on, look for a
-        // lane in the transition range.
-        lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
+  } else {
+    // Old behavior that uses wipLanes to shift interleaved updates into a
+    // separate lane. This is no longer needed because we put interleaved
+    // updates on a special queue.
+    switch (lanePriority) {
+      case NoLanePriority:
+        break;
+      case SyncLanePriority:
+        return SyncLane;
+      case SyncBatchedLanePriority:
+        return SyncBatchedLane;
+      case InputDiscreteLanePriority: {
+        const lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
         if (lane === NoLane) {
-          // All the transition lanes are taken, too. This should be very
-          // rare, but as a last resort, pick a default lane. This will have
-          // the effect of interrupting the current work-in-progress render.
-          lane = pickArbitraryLane(DefaultLanes);
+          // Shift to the next priority level
+          return findUpdateLane(InputContinuousLanePriority, wipLanes);
         }
+        return lane;
       }
-      return lane;
-    }
-    case TransitionPriority: // Should be handled by findTransitionLane instead
-    case RetryLanePriority: // Should be handled by findRetryLane instead
-      break;
-    case IdleLanePriority:
-      let lane = pickArbitraryLane(IdleLanes & ~wipLanes);
-      if (lane === NoLane) {
-        lane = pickArbitraryLane(IdleLanes);
+      case InputContinuousLanePriority: {
+        const lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
+        if (lane === NoLane) {
+          // Shift to the next priority level
+          return findUpdateLane(DefaultLanePriority, wipLanes);
+        }
+        return lane;
       }
-      return lane;
-    default:
-      // The remaining priorities are not valid for updates
-      break;
+      case DefaultLanePriority: {
+        let lane = pickArbitraryLane(DefaultLanes & ~wipLanes);
+        if (lane === NoLane) {
+          // If all the default lanes are already being worked on, look for a
+          // lane in the transition range.
+          lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
+          if (lane === NoLane) {
+            // All the transition lanes are taken, too. This should be very
+            // rare, but as a last resort, pick a default lane. This will have
+            // the effect of interrupting the current work-in-progress render.
+            lane = pickArbitraryLane(DefaultLanes);
+          }
+        }
+        return lane;
+      }
+      case TransitionPriority: // Should be handled by findTransitionLane instead
+      case RetryLanePriority: // Should be handled by findRetryLane instead
+        break;
+      case IdleLanePriority:
+        let lane = pickArbitraryLane(IdleLanes & ~wipLanes);
+        if (lane === NoLane) {
+          lane = pickArbitraryLane(IdleLanes);
+        }
+        return lane;
+      default:
+        // The remaining priorities are not valid for updates
+        break;
+    }
   }
   invariant(
     false,
@@ -563,7 +599,7 @@ export function claimNextTransitionLane(): Lane {
   const lane = nextTransitionLane;
   nextTransitionLane <<= 1;
   if ((nextTransitionLane & TransitionLanes) === 0) {
-    nextTransitionLane = SomeTransitionLane;
+    nextTransitionLane = FirstTransitionLane;
   }
   return lane;
 }
@@ -572,7 +608,7 @@ export function claimNextRetryLane(): Lane {
   const lane = nextRetryLane;
   nextRetryLane <<= 1;
   if ((nextRetryLane & RetryLanes) === 0) {
-    nextRetryLane = SomeRetryLane;
+    nextRetryLane = FirstRetryLane;
   }
   return lane;
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f148e2bd46b9..f2bcc19557ea 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -34,6 +34,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
+  enableTransitionEntanglement,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -832,6 +833,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   let exitStatus = renderRootConcurrent(root, lanes);
 
   if (
+    !enableTransitionEntanglement &&
     includesSomeLane(
       workInProgressRootIncludedLanes,
       workInProgressRootUpdatedLanes,
@@ -1037,6 +1039,7 @@ function performSyncWorkOnRoot(root) {
     lanes = workInProgressRootRenderLanes;
     exitStatus = renderRootSync(root, lanes);
     if (
+      !enableTransitionEntanglement &&
       includesSomeLane(
         workInProgressRootIncludedLanes,
         workInProgressRootUpdatedLanes,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 3589bff2c6be..7ca3f9032f00 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -34,6 +34,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
+  enableTransitionEntanglement,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -832,6 +833,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   let exitStatus = renderRootConcurrent(root, lanes);
 
   if (
+    !enableTransitionEntanglement &&
     includesSomeLane(
       workInProgressRootIncludedLanes,
       workInProgressRootUpdatedLanes,
@@ -1037,6 +1039,7 @@ function performSyncWorkOnRoot(root) {
     lanes = workInProgressRootRenderLanes;
     exitStatus = renderRootSync(root, lanes);
     if (
+      !enableTransitionEntanglement &&
       includesSomeLane(
         workInProgressRootIncludedLanes,
         workInProgressRootUpdatedLanes,
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index 205d7d21d501..bb4e9e1bc52d 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -285,10 +285,11 @@ export function entangleTransitions(root: FiberRoot, fiber: Fiber, lane: Lane) {
 
     // Entangle the new transition lane with the other transition lanes.
     const newQueueLanes = mergeLanes(queueLanes, lane);
-    if (newQueueLanes !== queueLanes) {
-      sharedQueue.lanes = newQueueLanes;
-      markRootEntangled(root, newQueueLanes);
-    }
+    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);
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index d1e82e10d7c3..6b578ef9c80d 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -285,10 +285,11 @@ export function entangleTransitions(root: FiberRoot, fiber: Fiber, lane: Lane) {
 
     // Entangle the new transition lane with the other transition lanes.
     const newQueueLanes = mergeLanes(queueLanes, lane);
-    if (newQueueLanes !== queueLanes) {
-      sharedQueue.lanes = newQueueLanes;
-      markRootEntangled(root, newQueueLanes);
-    }
+    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);
   }
 }
 
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 2df04c8c8854..2cf0837cfef6 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -129,9 +129,9 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000010000000000000000000000000)',
+      'group: ⚛️ render (0b0000000010000000000000000000000)',
       'log: <Example/>',
-      'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
+      'groupEnd: ⚛️ render (0b0000000010000000000000000000000)',
     ]);
   });
 
@@ -209,9 +209,9 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000010000000000000000000000000)',
+      'group: ⚛️ render (0b0000000010000000000000000000000)',
       'log: <Example/>',
-      'groupEnd: ⚛️ render (0b0000010000000000000000000000000)',
+      'groupEnd: ⚛️ render (0b0000000010000000000000000000000)',
     ]);
   });
 
@@ -327,6 +327,9 @@ describe('DebugTracing', () => {
     ]);
   });
 
+  // This test is coupled to lane implementation details, so I'm disabling it
+  // until it stabilizes so we don't have to repeatedly update it.
+  // @gate !enableTransitionEntanglement
   // @gate experimental && build === 'development' && enableDebugTracing
   it('should log cascading passive updates', () => {
     function Example() {
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index c416d2404856..590761dbc8cd 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -14,6 +14,7 @@ let ReactNoop;
 let Scheduler;
 let readText;
 let resolveText;
+let startTransition;
 
 describe('ReactExpiration', () => {
   beforeEach(() => {
@@ -22,6 +23,7 @@ describe('ReactExpiration', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    startTransition = React.unstable_startTransition;
 
     const textCache = new Map();
 
@@ -610,6 +612,7 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('Sync pri: 2, Idle pri: 2');
   });
 
+  // @gate experimental
   it('a single update can expire without forcing all other updates to expire', async () => {
     const {useState} = React;
 
@@ -648,12 +651,18 @@ describe('ReactExpiration', () => {
 
     await ReactNoop.act(async () => {
       // Partially render an update
-      updateNormalPri();
+      startTransition(() => {
+        updateNormalPri();
+      });
       expect(Scheduler).toFlushAndYieldThrough(['High pri: 0']);
-      // Some time goes by. In an interleaved event, schedule another update.
+
+      // Some time goes by. Schedule another update.
       // This will be placed into a separate batch.
       Scheduler.unstable_advanceTime(4000);
-      updateNormalPri();
+
+      startTransition(() => {
+        updateNormalPri();
+      });
       // Keep rendering the first update
       expect(Scheduler).toFlushAndYieldThrough(['Normal pri: 1']);
       // More time goes by. Enough to expire the first batch, but not the
@@ -662,20 +671,20 @@ describe('ReactExpiration', () => {
       // Attempt to interrupt with a high pri update.
       updateHighPri();
 
-      // The first update expired, so first will finish it without interrupting.
-      // But not the second update, which hasn't expired yet.
+      // The first update expired, so first will finish it without
+      // interrupting. But not the second update, which hasn't expired yet.
       expect(Scheduler).toFlushExpired(['Sibling']);
+      expect(Scheduler).toFlushAndYield([
+        // Then render the high pri update
+        'High pri: 1',
+        'Normal pri: 1',
+        'Sibling',
+        // Then the second normal pri update
+        'High pri: 1',
+        'Normal pri: 2',
+        'Sibling',
+      ]);
     });
-    expect(Scheduler).toHaveYielded([
-      // Then render the high pri update
-      'High pri: 1',
-      'Normal pri: 1',
-      'Sibling',
-      // Then the second normal pri update
-      'High pri: 1',
-      'Normal pri: 2',
-      'Sibling',
-    ]);
   });
 
   it('detects starvation in multiple batches', async () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index aca8679b7cf3..95c721b87a7c 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -19,6 +19,7 @@ let NormalPriority;
 let LowPriority;
 let IdlePriority;
 let runWithPriority;
+let startTransition;
 
 describe('ReactSchedulerIntegration', () => {
   beforeEach(() => {
@@ -33,6 +34,7 @@ describe('ReactSchedulerIntegration', () => {
     LowPriority = Scheduler.unstable_LowPriority;
     IdlePriority = Scheduler.unstable_IdlePriority;
     runWithPriority = Scheduler.unstable_runWithPriority;
+    startTransition = React.unstable_startTransition;
   });
 
   function getCurrentPriorityAsString() {
@@ -446,6 +448,7 @@ describe(
       React = require('react');
       ReactNoop = require('react-noop-renderer');
       Scheduler = require('scheduler');
+      startTransition = React.unstable_startTransition;
     });
 
     afterEach(() => {
@@ -494,6 +497,7 @@ describe(
       });
     });
 
+    // @gate experimental
     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
@@ -518,7 +522,9 @@ describe(
 
       await ReactNoop.act(async () => {
         // Partially render the tree, then yield
-        ReactNoop.render(<App />);
+        startTransition(() => {
+          ReactNoop.render(<App />);
+        });
         expect(Scheduler).toFlushAndYieldThrough(['A']);
 
         // Start logging whenever shouldYield is called
@@ -535,7 +541,9 @@ describe(
         // 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).
-        ReactNoop.render(<App />);
+        startTransition(() => {
+          ReactNoop.render(<App />);
+        });
 
         // Because the render expired, React should finish the tree without
         // consulting `shouldYield` again
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 54806dba475e..6e724fd0a567 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -270,58 +270,6 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('AsyncAfter SuspenseSibling');
   });
 
-  it(
-    'interrupts current render if something already suspended with a ' +
-      "delay, and then subsequently there's a lower priority update",
-    () => {
-      const root = ReactTestRenderer.create(
-        <>
-          <Suspense fallback={<Text text="Loading..." />} />
-          <Text text="Initial" />
-        </>,
-        {
-          unstable_isConcurrent: true,
-        },
-      );
-      expect(Scheduler).toFlushAndYield(['Initial']);
-      expect(root).toMatchRenderedOutput('Initial');
-
-      // The update will suspend.
-      root.update(
-        <>
-          <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText text="Async" ms={2000} />
-          </Suspense>
-          <Text text="After Suspense" />
-          <Text text="Sibling" />
-        </>,
-      );
-
-      // Yield past the Suspense boundary but don't complete the last sibling.
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Suspend! [Async]',
-        'Loading...',
-        'After Suspense',
-      ]);
-
-      // Receives a lower priority update before the current render phase
-      // has completed.
-      Scheduler.unstable_advanceTime(1000);
-      root.update(
-        <>
-          <Suspense fallback={<Text text="Loading..." />} />
-          <Text text="Updated" />
-        </>,
-      );
-      expect(Scheduler).toHaveYielded([]);
-      expect(root).toMatchRenderedOutput('Initial');
-
-      // Render the update, instead of continuing
-      expect(Scheduler).toFlushAndYield(['Updated']);
-      expect(root).toMatchRenderedOutput('Updated');
-    },
-  );
-
   // @gate experimental
   it(
     'interrupts current render when something suspends with a ' +
@@ -392,157 +340,6 @@ describe('ReactSuspense', () => {
     },
   );
 
-  // @gate experimental
-  it(
-    'interrupts current render when something suspends with a ' +
-      "delay and we've already bailed out lower priority update in " +
-      'a parent',
-    async () => {
-      // This is similar to the previous test case, except this covers when
-      // React completely bails out on the parent component, without processing
-      // the update queue.
-
-      const {useState} = React;
-
-      function interrupt() {
-        // React has a heuristic to batch all updates that occur within the same
-        // event. This is a trick to circumvent that heuristic.
-        ReactTestRenderer.create('whatever');
-      }
-
-      let setShouldSuspend;
-      function Async() {
-        const [shouldSuspend, _setShouldSuspend] = useState(false);
-        setShouldSuspend = _setShouldSuspend;
-        return (
-          <>
-            <Text text="A" />
-            <Suspense fallback={<Text text="Loading..." />}>
-              {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}
-            </Suspense>
-            <Text text="B" />
-            <Text text="C" />
-          </>
-        );
-      }
-
-      let setShouldHideInParent;
-      function App() {
-        const [shouldHideInParent, _setShouldHideInParent] = useState(false);
-        setShouldHideInParent = _setShouldHideInParent;
-        Scheduler.unstable_yieldValue(
-          'shouldHideInParent: ' + shouldHideInParent,
-        );
-        return shouldHideInParent ? <Text text="(empty)" /> : <Async />;
-      }
-
-      const root = ReactTestRenderer.create(null, {
-        unstable_isConcurrent: true,
-      });
-
-      await act(async () => {
-        root.update(<App />);
-        expect(Scheduler).toFlushAndYield([
-          'shouldHideInParent: false',
-          'A',
-          'B',
-          'C',
-        ]);
-        expect(root).toMatchRenderedOutput('ABC');
-
-        // This update will suspend.
-        setShouldSuspend(true);
-
-        // Need to move into the next async bucket.
-        // Do a bit of work, then interrupt to trigger a restart.
-        expect(Scheduler).toFlushAndYieldThrough(['A']);
-        interrupt();
-        // Should not have committed loading state
-        expect(root).toMatchRenderedOutput('ABC');
-
-        // Schedule another update. This will have lower priority because it's
-        // a transition.
-        React.unstable_startTransition(() => {
-          setShouldHideInParent(true);
-        });
-
-        expect(Scheduler).toFlushAndYieldThrough([
-          // Should have restarted the first update, because of the interruption
-          'A',
-          'Suspend! [Async]',
-          'Loading...',
-          'B',
-        ]);
-
-        // Should not have committed loading state
-        expect(root).toMatchRenderedOutput('ABC');
-
-        // After suspending, should abort the first update and switch to the
-        // second update.
-        expect(Scheduler).toFlushAndYield([
-          'shouldHideInParent: true',
-          '(empty)',
-        ]);
-
-        expect(root).toMatchRenderedOutput('(empty)');
-      });
-    },
-  );
-
-  it(
-    'interrupts current render when something suspends with a ' +
-      'delay, and a parent received an update after it completed',
-    () => {
-      function App({shouldSuspend, step}) {
-        return (
-          <>
-            <Text text={`A${step}`} />
-            <Suspense fallback={<Text text="Loading..." />}>
-              {shouldSuspend ? <AsyncText text="Async" ms={2000} /> : null}
-            </Suspense>
-            <Text text={`B${step}`} />
-            <Text text={`C${step}`} />
-          </>
-        );
-      }
-
-      const root = ReactTestRenderer.create(null, {
-        unstable_isConcurrent: true,
-      });
-
-      root.update(<App shouldSuspend={false} step={0} />);
-      expect(Scheduler).toFlushAndYield(['A0', 'B0', 'C0']);
-      expect(root).toMatchRenderedOutput('A0B0C0');
-
-      // This update will suspend.
-      root.update(<App shouldSuspend={true} step={1} />);
-      // Flush past the root, but stop before the async component.
-      expect(Scheduler).toFlushAndYieldThrough(['A1']);
-
-      // Schedule an update on the root, which already completed.
-      root.update(<App shouldSuspend={false} step={2} />);
-      // We'll keep working on the existing update.
-      expect(Scheduler).toFlushAndYieldThrough([
-        // Now the async component suspends
-        'Suspend! [Async]',
-        'Loading...',
-        'B1',
-      ]);
-
-      // Should not have committed loading state
-      expect(root).toMatchRenderedOutput('A0B0C0');
-
-      // After suspending, should abort the first update and switch to the
-      // second update. So, C1 should not appear in the log.
-      // TODO: This should work even if React does not yield to the main
-      // thread. Should use same mechanism as selective hydration to interrupt
-      // the render before the end of the current slice of work.
-      expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);
-
-      expect(root).toMatchRenderedOutput('A2B2C2');
-    },
-  );
-
   it('mounts a lazy class component in non-concurrent mode', async () => {
     class Class extends React.Component {
       componentDidMount() {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 5a9c94d3a3ac..18042bb4bfb5 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -589,7 +589,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   // Note: This test was written to test a heuristic used in the expiration
   // times model. Might not make sense in the new model.
-  // @gate enableCache
+  // @gate enableCache || enableTransitionEntanglement
   it('tries each subsequent level after suspending', async () => {
     const root = ReactNoop.createRoot();
 
@@ -642,23 +642,26 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       root.render(<App step={4} shouldSuspend={false} />);
     });
 
-    expect(Scheduler).toHaveYielded([
-      // The new reconciler batches everything together, so it finishes without
-      // suspending again.
-      'Sibling',
-
-      // NOTE: The final of the update got pushed into a lower priority range of
-      // lanes, leading to the extra intermediate render. This is because when
-      // we schedule the fourth update, we're already in the middle of rendering
-      // the three others. Since there are only three lanes in the default
-      // range, the fourth lane is shifted to slightly lower priority. This
-      // could easily change when we tweak our batching heuristics. Ideally,
-      // they'd all have default priority and render in a single batch.
-      'Suspend! [Step 3]',
-      'Sibling',
-
-      'Step 4',
-    ]);
+    if (gate(flags => flags.enableTransitionEntanglement)) {
+      expect(Scheduler).toHaveYielded(['Sibling', 'Step 4']);
+    } else {
+      // Old implementation
+      expect(Scheduler).toHaveYielded([
+        'Sibling',
+
+        // NOTE: The final of the update got pushed into a lower priority range of
+        // lanes, leading to the extra intermediate render. This is because when
+        // we schedule the fourth update, we're already in the middle of rendering
+        // the three others. Since there are only three lanes in the default
+        // range, the fourth lane is shifted to slightly lower priority. This
+        // could easily change when we tweak our batching heuristics. Ideally,
+        // they'd all have default priority and render in a single batch.
+        'Suspend! [Step 3]',
+        'Sibling',
+
+        'Step 4',
+      ]);
+    }
   });
 
   // @gate enableCache
@@ -2797,14 +2800,21 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       foo.setState({suspend: false});
     });
 
-    expect(Scheduler).toHaveYielded([
-      // First setState
-      'Foo',
-      // Second setState. This update was scheduled while we were in the
-      // middle of rendering the previous update, so it was pushed to a separate
-      // batch to avoid invalidating the work-in-progress tree.
-      'Foo',
-    ]);
+    if (gate(flags => flags.enableTransitionEntanglement)) {
+      expect(Scheduler).toHaveYielded([
+        // First setState
+        'Foo',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        // First setState
+        'Foo',
+        // Second setState. This update was scheduled while we were in the
+        // middle of rendering the previous update, so it was pushed to a separate
+        // batch to avoid invalidating the work-in-progress tree.
+        'Foo',
+      ]);
+    }
     expect(root).toMatchRenderedOutput(<span prop="Foo" />);
   });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index 0b9084356c71..ffd2c9e19ebc 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -548,4 +548,229 @@ describe('ReactTransition', () => {
       expect(root).toMatchRenderedOutput('C');
     },
   );
+
+  // @gate experimental
+  // @gate enableCache
+  test('interrupt a refresh transition if a new transition is scheduled', async () => {
+    const root = ReactNoop.createRoot();
+
+    await ReactNoop.act(async () => {
+      root.render(
+        <>
+          <Suspense fallback={<Text text="Loading..." />} />
+          <Text text="Initial" />
+        </>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Initial']);
+    expect(root).toMatchRenderedOutput('Initial');
+
+    await ReactNoop.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.
+      expect(Scheduler).toFlushAndYieldThrough([
+        // 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.
+    expect(Scheduler).toHaveYielded(['Updated']);
+    expect(root).toMatchRenderedOutput('Updated');
+  });
+
+  // @gate experimental
+  // @gate enableCache
+  test(
+    "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.unstable_yieldValue(
+          '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 />);
+        expect(Scheduler).toFlushAndYield([
+          '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.
+        expect(Scheduler).toFlushAndYieldThrough(['A']);
+
+        // Now schedule a second transition. We won't interrupt the first one.
+        React.unstable_startTransition(() => {
+          setShouldHideInParent(true);
+        });
+        // Continue rendering the first transition.
+        expect(Scheduler).toFlushAndYieldThrough([
+          '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.
+        expect(Scheduler).toFlushUntilNextPaint([
+          '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.
+        expect(Scheduler).toFlushAndYield([
+          'A',
+          'shouldHideInParent: true',
+          '(empty)',
+          'B',
+          'C',
+        ]);
+        expect(root).toMatchRenderedOutput('A(empty)BC');
+      });
+    },
+  );
+
+  // @gate experimental
+  // @gate enableCache
+  test(
+    '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" ms={2000} /> : null}
+            </Suspense>
+            <Text text={`B${step}`} />
+            <Text text={`C${step}`} />
+          </>
+        );
+      }
+
+      const root = ReactNoop.createRoot();
+
+      await ReactNoop.act(async () => {
+        root.render(<App shouldSuspend={false} step={0} />);
+      });
+      expect(Scheduler).toHaveYielded(['A0', 'B0', 'C0']);
+      expect(root).toMatchRenderedOutput('A0B0C0');
+
+      await ReactNoop.act(async () => {
+        // This update will suspend.
+        startTransition(() => {
+          root.render(<App shouldSuspend={true} step={1} />);
+        });
+        // Flush past the root, but stop before the async component.
+        expect(Scheduler).toFlushAndYieldThrough(['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.
+        expect(Scheduler).toFlushAndYieldThrough([
+          // Now the async component suspends
+          'Suspend! [Async]',
+          'Loading...',
+          'B1',
+        ]);
+        // Should not have committed loading state
+        expect(root).toMatchRenderedOutput('A0B0C0');
+
+        // After suspending, should abort the first update and switch to the
+        // second update. So, C1 should not appear in the log.
+        // TODO: This should work even if React does not yield to the main
+        // thread. Should use same mechanism as selective hydration to interrupt
+        // the render before the end of the current slice of work.
+        expect(Scheduler).toFlushAndYield(['A2', 'B2', 'C2']);
+
+        expect(root).toMatchRenderedOutput('A2B2C2');
+      });
+    },
+  );
 });
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 35c854e4b2e7..65459ecd3368 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -474,6 +474,9 @@ describe('SchedulingProfiler', () => {
     ]);
   });
 
+  // This test is coupled to lane implementation details, so I'm disabling it in
+  // the new fork until it stabilizes so we don't have to repeatedly update it.
+  // @gate !enableTransitionEntanglement
   // @gate enableSchedulingProfiler
   it('should mark cascading passive updates', () => {
     function Example() {

From 97fce318a6618bc883a8578f58b9083484c9e6d7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 9 Feb 2021 18:32:20 +0000
Subject: [PATCH 0246/1603] Experiment: Infer the current event priority from
 the native event (#20748)

* Add the feature flag

* Add a host config method

* Wire it up to the work loop

* Export constants for third-party renderers

* Document for third-party renderers
---
 packages/react-art/src/ReactARTHostConfig.js  | 12 +++++++++
 .../src/client/ReactDOMHostConfig.js          | 17 ++++++++++++
 .../src/events/ReactDOMEventListener.js       |  2 +-
 .../src/ReactFabricHostConfig.js              | 12 +++++++++
 .../src/ReactNativeHostConfig.js              | 12 +++++++++
 .../src/createReactNoop.js                    |  4 +++
 packages/react-reconciler/README.md           | 26 +++++++++++++++++++
 .../src/ReactFiberReconciler.js               | 15 +++++++++++
 .../src/ReactFiberReconciler.new.js           |  9 +++++++
 .../src/ReactFiberReconciler.old.js           |  9 +++++++
 .../src/ReactFiberWorkLoop.new.js             | 24 +++++++++++++----
 .../src/ReactFiberWorkLoop.old.js             | 24 +++++++++++++----
 .../src/forks/ReactFiberHostConfig.custom.js  |  1 +
 .../src/ReactTestHostConfig.js                | 12 +++++++++
 packages/shared/ReactFeatureFlags.js          |  2 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 24 files changed, 179 insertions(+), 11 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 80b4a39f396b..de20fe5182c6 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -7,10 +7,18 @@
 
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 const pooledTransform = new Transform();
 
 const NO_CONTEXT = {};
@@ -340,6 +348,10 @@ export function shouldSetTextContent(type, props) {
   );
 }
 
+export function getCurrentEventPriority() {
+  return DefaultLanePriority;
+}
+
 // The ART renderer is secondary to the React DOM renderer.
 export const isPrimaryRenderer = false;
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 9576b602fcc9..aca426ce08ec 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -47,6 +47,7 @@ import {validateDOMNesting, updatedAncestorInfo} from './validateDOMNesting';
 import {
   isEnabled as ReactBrowserEventEmitterIsEnabled,
   setEnabled as ReactBrowserEventEmitterSetEnabled,
+  getEventPriority,
 } from '../events/ReactDOMEventListener';
 import {getChildNamespace} from '../shared/DOMNamespaces';
 import {
@@ -65,10 +66,18 @@ import {
   enableSuspenseServerRenderer,
   enableCreateEventHandleAPI,
   enableScopeAPI,
+  enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -372,6 +381,14 @@ export function createTextInstance(
   return textNode;
 }
 
+export function getCurrentEventPriority(): * {
+  const currentEvent = window.event;
+  if (currentEvent === undefined) {
+    return DefaultLanePriority;
+  }
+  return getEventPriority(currentEvent.type);
+}
+
 export const isPrimaryRenderer = true;
 export const warnsIfNotActing = true;
 // This initialization code may run even on server environments
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 74955b0c88eb..358c303b7918 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -348,7 +348,7 @@ export function attemptToDispatchEvent(
   return null;
 }
 
-function getEventPriority(domEventName: DOMEventName) {
+export function getEventPriority(domEventName: DOMEventName): * {
   switch (domEventName) {
     // Used by SimpleEventPlugin:
     case 'cancel':
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 912f33633380..27b7076377fc 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -21,10 +21,18 @@ import type {
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 // Modules provided by RN:
 import {
   ReactNativeViewConfigRegistry,
@@ -339,6 +347,10 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
   return false;
 }
 
+export function getCurrentEventPriority(): * {
+  return DefaultLanePriority;
+}
+
 // The Fabric renderer is secondary to the existing React Native renderer.
 export const isPrimaryRenderer = false;
 
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 86217bdc4d03..7f1135855628 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -10,6 +10,7 @@
 import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
 
 import invariant from 'shared/invariant';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
 // Modules provided by RN:
 import {
@@ -26,6 +27,13 @@ import {
 } from './ReactNativeComponentTree';
 import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
+
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
 export type Type = string;
@@ -261,6 +269,10 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
   return false;
 }
 
+export function getCurrentEventPriority(): * {
+  return DefaultLanePriority;
+}
+
 // -------------------
 //     Mutation
 // -------------------
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 5a71567ab62f..34967ca3625e 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -391,6 +391,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     resetAfterCommit(): void {},
 
+    getCurrentEventPriority() {
+      return NoopRenderer.DefaultEventPriority;
+    },
+
     now: Scheduler.unstable_now,
 
     isPrimaryRenderer: true,
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 33bbdcfc7fd9..ce5fddb0eea9 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -211,6 +211,32 @@ You can proxy this to `queueMicrotask` or its equivalent in your environment.
 
 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 _returned_ `Renderer` object:
+
+```js
+const HostConfig = {
+  // ...
+  getCurrentEventPriority() {
+    return MyRenderer.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 `MyRenderer.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 `MyRenderer.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 `MyRenderer.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 `ReactDOMHostConfig.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.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 292d3aaf2a32..7493b73636a3 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -52,6 +52,9 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
+  DefaultEventPriority as DefaultEventPriority_old,
+  DiscreteEventPriority as DiscreteEventPriority_old,
+  ContinuousEventPriority as ContinuousEventPriority_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -92,6 +95,9 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
+  DefaultEventPriority as DefaultEventPriority_new,
+  DiscreteEventPriority as DiscreteEventPriority_new,
+  ContinuousEventPriority as ContinuousEventPriority_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -168,6 +174,15 @@ export const createPortal = enableNewReconciler
 export const createComponentSelector = enableNewReconciler
   ? createComponentSelector_new
   : createComponentSelector_old;
+export const DefaultEventPriority = enableNewReconciler
+  ? DefaultEventPriority_new
+  : DefaultEventPriority_old;
+export const DiscreteEventPriority = enableNewReconciler
+  ? DiscreteEventPriority_new
+  : DiscreteEventPriority_old;
+export const ContinuousEventPriority = enableNewReconciler
+  ? ContinuousEventPriority_new
+  : ContinuousEventPriority_old;
 
 //TODO: "psuedo" is spelled "pseudo"
 export const createHasPsuedoClassSelector = enableNewReconciler
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 439f69634e9b..039bb159fd7a 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -94,6 +94,15 @@ import {
 } from './ReactFiberHotReloading.new';
 import {markRenderScheduled} from './SchedulingProfiler';
 
+// Ideally host configs would import these constants from the reconciler
+// entry point, but we can't do this because of a circular dependency.
+// They are used by third-party renderers so they need to stay up to date.
+export {
+  InputDiscreteLanePriority as DiscreteEventPriority,
+  InputContinuousLanePriority as ContinuousEventPriority,
+  DefaultLanePriority as DefaultEventPriority,
+} from './ReactFiberLane.new';
+
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index f9e4a7cdf0d7..012b4c705735 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -94,6 +94,15 @@ import {
 } from './ReactFiberHotReloading.old';
 import {markRenderScheduled} from './SchedulingProfiler';
 
+// Ideally host configs would import these constants from the reconciler
+// entry point, but we can't do this because of a circular dependency.
+// They are used by third-party renderers so they need to stay up to date.
+export {
+  InputDiscreteLanePriority as DiscreteEventPriority,
+  InputContinuousLanePriority as ContinuousEventPriority,
+  DefaultLanePriority as DefaultEventPriority,
+} from './ReactFiberLane.old';
+
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f2bcc19557ea..e65e1dad45d6 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -35,6 +35,7 @@ import {
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
   enableTransitionEntanglement,
+  enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -94,6 +95,7 @@ import {
   afterActiveInstanceBlur,
   clearContainer,
   scheduleMicrotask,
+  getCurrentEventPriority,
 } from './ReactFiberHostConfig';
 
 import {
@@ -461,11 +463,23 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
   } else {
-    const schedulerLanePriority = schedulerPriorityToLanePriority(
-      schedulerPriority,
-    );
-
-    lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    if (enableNativeEventPriorityInference) {
+      const eventLanePriority = getCurrentEventPriority();
+      if (eventLanePriority === DefaultLanePriority) {
+        // TODO: move this case into the ReactDOM host config.
+        const schedulerLanePriority = schedulerPriorityToLanePriority(
+          schedulerPriority,
+        );
+        lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+      } else {
+        lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
+      }
+    } else {
+      const schedulerLanePriority = schedulerPriorityToLanePriority(
+        schedulerPriority,
+      );
+      lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    }
   }
 
   return lane;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 7ca3f9032f00..58a957261a82 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -35,6 +35,7 @@ import {
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
   enableTransitionEntanglement,
+  enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -94,6 +95,7 @@ import {
   afterActiveInstanceBlur,
   clearContainer,
   scheduleMicrotask,
+  getCurrentEventPriority,
 } from './ReactFiberHostConfig';
 
 import {
@@ -461,11 +463,23 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
   } else {
-    const schedulerLanePriority = schedulerPriorityToLanePriority(
-      schedulerPriority,
-    );
-
-    lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    if (enableNativeEventPriorityInference) {
+      const eventLanePriority = getCurrentEventPriority();
+      if (eventLanePriority === DefaultLanePriority) {
+        // TODO: move this case into the ReactDOM host config.
+        const schedulerLanePriority = schedulerPriorityToLanePriority(
+          schedulerPriority,
+        );
+        lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+      } else {
+        lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
+      }
+    } else {
+      const schedulerLanePriority = schedulerPriorityToLanePriority(
+        schedulerPriority,
+      );
+      lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+    }
   }
 
   return lane;
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 14e43a822298..0e19b6b70414 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -73,6 +73,7 @@ export const afterActiveInstanceBlur = $$$hostConfig.afterActiveInstanceBlur;
 export const preparePortalMount = $$$hostConfig.preparePortalMount;
 export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
+export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 
 // -------------------
 //      Test selectors
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 6110a0de8c58..60de8a05a17e 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -8,6 +8,14 @@
  */
 
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
+
+import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const DefaultLanePriority = enableNewReconciler
+  ? DefaultLanePriority_new
+  : DefaultLanePriority_old;
 
 export type Type = string;
 export type Props = Object;
@@ -213,6 +221,10 @@ export function createTextInstance(
   };
 }
 
+export function getCurrentEventPriority(): * {
+  return DefaultLanePriority;
+}
+
 export const isPrimaryRenderer = false;
 export const warnsIfNotActing = true;
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 842bbe4dfa61..ebd12c335f84 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -151,3 +151,5 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 
 export const enableDiscreteEventMicroTasks = false;
+
+export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 1200892cee3f..3cf047f78eaf 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 3eb2d5e718f9..56582bc85f8c 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -58,6 +58,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 0e95ccae4109..64a7493b11ea 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -58,6 +58,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index ef7e948b2e18..e10accde9068 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -58,6 +58,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 756c38694ec7..3a7336db3bfa 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -58,6 +58,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d2240049e0a4..4adeafbf3017 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -58,6 +58,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e80dfde724d2..88ce477eea3e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -58,6 +58,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 47d8763d039b..f0cb3c5eb1ca 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -57,3 +57,4 @@ export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableTransitionEntanglement = __VARIANT__;
 export const enableDiscreteEventMicroTasks = __VARIANT__;
+export const enableNativeEventPriorityInference = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 640b0d6f3e30..a2970b0a166d 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,6 +33,7 @@ export const {
   disableSchedulerTimeoutInWorkLoop,
   enableTransitionEntanglement,
   enableDiscreteEventMicroTasks,
+  enableNativeEventPriorityInference,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From d919e2c41c71fc7bc4ae037b3a3c60a4600d0a54 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 9 Feb 2021 19:56:15 +0000
Subject: [PATCH 0247/1603] Add tests for non-React discrete events flushing in
 a microtask (#20772)

* Convert some old discrete tests to Hooks

I'm planning to copy paste so why not update them anyway.

* Copy paste discrete tests into another file

These are still using React events. I'll change that next.

* Convert the test to use native events
---
 .../src/__tests__/ReactDOMFiberAsync-test.js  | 128 +++++-----
 .../ReactDOMNativeEventHeuristic-test.js      | 228 ++++++++++++++++++
 2 files changed, 283 insertions(+), 73 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index 5e783489bb93..ee609d7c2e0c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -148,13 +148,6 @@ describe('ReactDOMFiberAsync', () => {
   });
 
   describe('concurrent mode', () => {
-    beforeEach(() => {
-      jest.resetModules();
-
-      ReactDOM = require('react-dom');
-      Scheduler = require('scheduler');
-    });
-
     // @gate experimental
     it('does not perform deferred updates synchronously', () => {
       const inputRef = React.createRef();
@@ -399,28 +392,26 @@ describe('ReactDOMFiberAsync', () => {
 
       let formSubmitted = false;
 
-      class Form extends React.Component {
-        state = {active: true};
-        disableForm = () => {
-          this.setState({active: false});
-        };
-        submitForm = () => {
+      function Form() {
+        const [active, setActive] = React.useState(true);
+        function disableForm() {
+          setActive(false);
+        }
+        function submitForm() {
           formSubmitted = true; // This should not get invoked
-        };
-        render() {
-          return (
-            <div>
-              <button onClick={this.disableForm} ref={disableButtonRef}>
-                Disable
-              </button>
-              {this.state.active ? (
-                <button onClick={this.submitForm} ref={submitButtonRef}>
-                  Submit
-                </button>
-              ) : null}
-            </div>
-          );
         }
+        return (
+          <div>
+            <button onClick={disableForm} ref={disableButtonRef}>
+              Disable
+            </button>
+            {active ? (
+              <button onClick={submitForm} ref={submitButtonRef}>
+                Submit
+              </button>
+            ) : null}
+          </div>
+        );
       }
 
       const root = ReactDOM.unstable_createRoot(container);
@@ -461,33 +452,29 @@ describe('ReactDOMFiberAsync', () => {
 
       let formSubmitted = false;
 
-      class Form extends React.Component {
-        state = {active: true};
-        disableForm = () => {
-          this.setState({active: false});
-        };
-        submitForm = () => {
+      function Form() {
+        const [active, setActive] = React.useState(true);
+        function disableForm() {
+          setActive(false);
+        }
+        function submitForm() {
           formSubmitted = true; // This should not get invoked
-        };
-        disabledSubmitForm = () => {
+        }
+        function disabledSubmitForm() {
           // The form is disabled.
-        };
-        render() {
-          return (
-            <div>
-              <button onClick={this.disableForm} ref={disableButtonRef}>
-                Disable
-              </button>
-              <button
-                onClick={
-                  this.state.active ? this.submitForm : this.disabledSubmitForm
-                }
-                ref={submitButtonRef}>
-                Submit
-              </button>
-            </div>
-          );
         }
+        return (
+          <div>
+            <button onClick={disableForm} ref={disableButtonRef}>
+              Disable
+            </button>
+            <button
+              onClick={active ? submitForm : disabledSubmitForm}
+              ref={submitButtonRef}>
+              Submit
+            </button>
+          </div>
+        );
       }
 
       const root = ReactDOM.unstable_createRoot(container);
@@ -526,29 +513,24 @@ describe('ReactDOMFiberAsync', () => {
 
       let formSubmitted = false;
 
-      class Form extends React.Component {
-        state = {active: false};
-        enableForm = () => {
-          this.setState({active: true});
-        };
-        submitForm = () => {
-          formSubmitted = true; // This should happen
-        };
-        render() {
-          return (
-            <div>
-              <button onClick={this.enableForm} ref={enableButtonRef}>
-                Enable
-              </button>
-              <button
-                onClick={this.state.active ? this.submitForm : null}
-                ref={submitButtonRef}>
-                Submit
-              </button>{' '}
-              : null}
-            </div>
-          );
+      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 = ReactDOM.unstable_createRoot(container);
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 000000000000..9a9c3786b771
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -0,0 +1,228 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+
+let ReactDOM;
+let Scheduler;
+
+describe('ReactDOMNativeEventHeuristic-test', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  function dispatchAndSetCurrentEvent(el, event) {
+    try {
+      window.event = event;
+      el.dispatchEvent(event);
+    } finally {
+      window.event = undefined;
+    }
+  }
+
+  // @gate experimental
+  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  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 = ReactDOM.unstable_createRoot(container);
+    root.render(<Form />);
+    // Flush
+    Scheduler.unstable_flushAll();
+
+    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);
+    expect(() =>
+      dispatchAndSetCurrentEvent(disableButton, firstEvent),
+    ).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+
+    // 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');
+
+    // Discrete events should be flushed in a microtask.
+    // Verify that the second button was removed.
+    await null;
+    expect(submitButtonRef.current).toBe(null);
+    // We'll assume that the browser won't let the user click it.
+  });
+
+  // @gate experimental
+  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  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 = ReactDOM.unstable_createRoot(container);
+    root.render(<Form />);
+    // Flush
+    Scheduler.unstable_flushAll();
+
+    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);
+    expect(() => {
+      dispatchAndSetCurrentEvent(disableButton, firstEvent);
+    }).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+
+    // 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');
+
+    // Discrete events should be flushed in a microtask.
+    await null;
+
+    // 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);
+  });
+
+  // @gate experimental
+  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  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 = ReactDOM.unstable_createRoot(container);
+    root.render(<Form />);
+    // Flush
+    Scheduler.unstable_flushAll();
+
+    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);
+    expect(() => {
+      dispatchAndSetCurrentEvent(enableButton, firstEvent);
+    }).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+
+    // 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');
+
+    // Discrete events should be flushed in a microtask.
+    await null;
+
+    // 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);
+  });
+});

From ad8211d96a7990a91d4f6c9915b8b30566c3c0af Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 9 Feb 2021 22:04:23 +0000
Subject: [PATCH 0248/1603] Add more non-React events to the priority list
 (#20774)

* Add a test for mouseover being continuous

* Add more non-React events to the priority list
---
 .../ReactDOMNativeEventHeuristic-test.js      | 66 +++++++++++++++++++
 .../react-dom/src/events/DOMEventNames.js     | 10 +++
 .../src/events/ReactDOMEventListener.js       | 14 ++++
 3 files changed, 90 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 9a9c3786b771..7310a9c49b95 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -13,6 +13,7 @@ let React;
 
 let ReactDOM;
 let Scheduler;
+let act;
 
 describe('ReactDOMNativeEventHeuristic-test', () => {
   let container;
@@ -23,6 +24,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
+    act = require('react-dom/test-utils').unstable_concurrentAct;
 
     document.body.appendChild(container);
   });
@@ -225,4 +227,68 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // Therefore the form should have been submitted.
     expect(formSubmitted).toBe(true);
   });
+
+  // @gate experimental
+  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  it('mouse over should be user-blocking but not discrete', async () => {
+    const root = ReactDOM.unstable_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(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('not hovered');
+
+    await act(async () => {
+      const mouseOverEvent = document.createEvent('MouseEvents');
+      mouseOverEvent.initEvent('mouseover', true, true);
+      dispatchAndSetCurrentEvent(target.current, mouseOverEvent);
+
+      // 3s should be enough to expire the updates
+      Scheduler.unstable_advanceTime(3000);
+      expect(Scheduler).toFlushExpired([]);
+      expect(container.textContent).toEqual('hovered');
+    });
+  });
+
+  // @gate experimental
+  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  it('mouse enter should be user-blocking but not discrete', async () => {
+    const root = ReactDOM.unstable_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(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('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('mouseenter', true, true);
+      dispatchAndSetCurrentEvent(target.current, mouseEnterEvent);
+
+      // 3s should be enough to expire the updates
+      Scheduler.unstable_advanceTime(3000);
+      expect(Scheduler).toFlushExpired([]);
+      expect(container.textContent).toEqual('hovered');
+    });
+  });
 });
diff --git a/packages/react-dom/src/events/DOMEventNames.js b/packages/react-dom/src/events/DOMEventNames.js
index 42d72bc61ac2..5c8b5916f386 100644
--- a/packages/react-dom/src/events/DOMEventNames.js
+++ b/packages/react-dom/src/events/DOMEventNames.js
@@ -17,6 +17,8 @@ export type DOMEventName =
   // 'animationend |
   // 'animationstart' |
   | 'beforeblur' // Not a real event. This is used by event experiments.
+  | 'beforeinput'
+  | 'blur'
   | 'canplay'
   | 'canplaythrough'
   | 'cancel'
@@ -44,9 +46,12 @@ export type DOMEventName =
   | 'encrypted'
   | 'ended'
   | 'error'
+  | 'focus'
   | 'focusin'
   | 'focusout'
+  | 'fullscreenchange'
   | 'gotpointercapture'
+  | 'hashchange'
   | 'input'
   | 'invalid'
   | 'keydown'
@@ -58,6 +63,8 @@ export type DOMEventName =
   | 'loadedmetadata'
   | 'lostpointercapture'
   | 'mousedown'
+  | 'mouseenter'
+  | 'mouseleave'
   | 'mousemove'
   | 'mouseout'
   | 'mouseover'
@@ -74,12 +81,15 @@ export type DOMEventName =
   | 'pointerout'
   | 'pointerover'
   | 'pointerup'
+  | 'popstate'
   | 'progress'
   | 'ratechange'
   | 'reset'
   | 'scroll'
   | 'seeked'
   | 'seeking'
+  | 'select'
+  | 'selectstart'
   | 'selectionchange'
   | 'stalled'
   | 'submit'
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 358c303b7918..0a89d2cb70a7 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -397,6 +397,16 @@ export function getEventPriority(domEventName: DOMEventName): * {
     // eslint-disable-next-line no-fallthrough
     case 'beforeblur':
     case 'afterblur':
+    // Not used by React but could be by user code:
+    // eslint-disable-next-line no-fallthrough
+    case 'beforeinput':
+    case 'blur':
+    case 'fullscreenchange':
+    case 'focus':
+    case 'hashchange':
+    case 'popstate':
+    case 'select':
+    case 'selectstart':
       return InputDiscreteLanePriority;
     case 'drag':
     case 'dragenter':
@@ -413,6 +423,10 @@ export function getEventPriority(domEventName: DOMEventName): * {
     case 'toggle':
     case 'touchmove':
     case 'wheel':
+    // Not used by React but could be by user code:
+    // eslint-disable-next-line no-fallthrough
+    case 'mouseenter':
+    case 'mouseleave':
       return InputContinuousLanePriority;
     default:
       return DefaultLanePriority;

From 3d10eca241be7b51cd4d74cf69eb1f429818b71a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 9 Feb 2021 22:54:57 +0000
Subject: [PATCH 0249/1603] Move scheduler priority check into ReactDOM
 (#20778)

* Move scheduler priority check into ReactDOM

* TODO
---
 .../react-dom/src/events/DOMEventNames.js     |  1 +
 .../src/events/ReactDOMEventListener.js       | 19 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.old.js             | 10 +---------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/events/DOMEventNames.js b/packages/react-dom/src/events/DOMEventNames.js
index 5c8b5916f386..2e14ddf7822b 100644
--- a/packages/react-dom/src/events/DOMEventNames.js
+++ b/packages/react-dom/src/events/DOMEventNames.js
@@ -62,6 +62,7 @@ export type DOMEventName =
   | 'loadeddata'
   | 'loadedmetadata'
   | 'lostpointercapture'
+  | 'message'
   | 'mousedown'
   | 'mouseenter'
   | 'mouseleave'
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 0a89d2cb70a7..dd7fda27f0a9 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -55,6 +55,7 @@ import {
   DefaultLanePriority as DefaultLanePriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_old,
+  schedulerPriorityToLanePriority as schedulerPriorityToLanePriority_old,
 } from 'react-reconciler/src/ReactFiberLane.old';
 import {
   InputDiscreteLanePriority as InputDiscreteLanePriority_new,
@@ -62,7 +63,10 @@ import {
   DefaultLanePriority as DefaultLanePriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_new,
+  schedulerPriorityToLanePriority as schedulerPriorityToLanePriority_new,
 } from 'react-reconciler/src/ReactFiberLane.new';
+import {getCurrentPriorityLevel as getCurrentPriorityLevel_old} from 'react-reconciler/src/SchedulerWithReactIntegration.old';
+import {getCurrentPriorityLevel as getCurrentPriorityLevel_new} from 'react-reconciler/src/SchedulerWithReactIntegration.new';
 
 const InputDiscreteLanePriority = enableNewReconciler
   ? InputDiscreteLanePriority_new
@@ -79,6 +83,12 @@ const getCurrentUpdateLanePriority = enableNewReconciler
 const setCurrentUpdateLanePriority = enableNewReconciler
   ? setCurrentUpdateLanePriority_new
   : setCurrentUpdateLanePriority_old;
+const schedulerPriorityToLanePriority = enableNewReconciler
+  ? schedulerPriorityToLanePriority_new
+  : schedulerPriorityToLanePriority_old;
+const getCurrentPriorityLevel = enableNewReconciler
+  ? getCurrentPriorityLevel_new
+  : getCurrentPriorityLevel_old;
 
 const {
   unstable_UserBlockingPriority: UserBlockingPriority,
@@ -428,6 +438,15 @@ export function getEventPriority(domEventName: DOMEventName): * {
     case 'mouseenter':
     case 'mouseleave':
       return InputContinuousLanePriority;
+    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 = getCurrentPriorityLevel();
+      // TODO: Inline schedulerPriorityToLanePriority into this file
+      // when we delete the enableNativeEventPriorityInference flag.
+      return schedulerPriorityToLanePriority(schedulerPriority);
+    }
     default:
       return DefaultLanePriority;
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 58a957261a82..242744acadd4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -465,15 +465,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   } else {
     if (enableNativeEventPriorityInference) {
       const eventLanePriority = getCurrentEventPriority();
-      if (eventLanePriority === DefaultLanePriority) {
-        // TODO: move this case into the ReactDOM host config.
-        const schedulerLanePriority = schedulerPriorityToLanePriority(
-          schedulerPriority,
-        );
-        lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
-      } else {
-        lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
-      }
+      lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
     } else {
       const schedulerLanePriority = schedulerPriorityToLanePriority(
         schedulerPriority,

From 3499c343ab48968192aaefe295dcf4185b3a4f99 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 01:21:46 -0600
Subject: [PATCH 0250/1603] Apply #20778 to new fork, too (#20782)

* Apply #20778 to new fork, too

* Fix tests that use runWithPriority

Where possible, I tried to rewrite in terms of an idiomatic API.

For DOM tests, we should be dispatching an event with the desired
priority level.

For Idle updates (very unstable feature), probably need an unstable
API like ReactDOM.unstable_IdleUpdates.

Some of these fixes are not great, but we can replace them once we've
landed the more of our planned changes to the layering between
Scheduler, the reconciler, and the renderer.
---
 ...MServerSelectiveHydration-test.internal.js |  25 ++-
 packages/react-noop-renderer/src/ReactNoop.js |   1 +
 .../src/ReactNoopPersistent.js                |   1 +
 .../src/createReactNoop.js                    |  22 ++-
 .../src/ReactFiberLane.new.js                 |   3 +-
 .../src/ReactFiberLane.old.js                 |   3 +-
 .../src/ReactFiberReconciler.js               |   5 +
 .../src/ReactFiberReconciler.new.js           |   1 +
 .../src/ReactFiberReconciler.old.js           |   1 +
 .../src/ReactFiberWorkLoop.new.js             |  10 +-
 .../src/__tests__/ReactExpiration-test.js     | 157 ++++++------------
 .../ReactHooksWithNoopRenderer-test.js        |   9 +-
 .../ReactSchedulerIntegration-test.js         |  24 +++
 .../ReactSuspenseWithNoopRenderer-test.js     |  31 ++--
 .../useMutableSource-test.internal.js         |  62 +++----
 .../useMutableSourceHydration-test.js         |  24 ++-
 .../ReactDOMTracing-test.internal.js          |  15 +-
 17 files changed, 197 insertions(+), 197 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 6b543805ea10..19cf6065e6b9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -92,6 +92,21 @@ function dispatchClickEvent(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) {
+  Scheduler.unstable_runWithPriority(Scheduler.unstable_IdlePriority, () => {
+    const prevEvent = window.event;
+    window.event = {type: 'message'};
+    try {
+      fn();
+    } finally {
+      window.event = prevEvent;
+    }
+  });
+}
+
 describe('ReactDOMServerSelectiveHydration', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
@@ -889,12 +904,10 @@ describe('ReactDOMServerSelectiveHydration', () => {
       expect(Scheduler).toFlushAndYieldThrough(['App', 'Commit']);
 
       // Render an update at Idle priority that needs to update A.
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_IdlePriority,
-        () => {
-          root.render(<App a="AA" />);
-        },
-      );
+
+      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.
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index 071501e576b6..8305dd6d8641 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -41,6 +41,7 @@ export const {
   deferredUpdates,
   unbatchedUpdates,
   discreteUpdates,
+  idleUpdates,
   flushDiscreteUpdates,
   flushSync,
   flushPassiveEffects,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index 845c8d3acc1a..c4a73cdfb81b 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -41,6 +41,7 @@ export const {
   deferredUpdates,
   unbatchedUpdates,
   discreteUpdates,
+  idleUpdates,
   flushDiscreteUpdates,
   flushSync,
   flushPassiveEffects,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 34967ca3625e..2aa0043d9e24 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -27,6 +27,7 @@ import {
   LegacyRoot,
 } from 'react-reconciler/src/ReactRootTags';
 
+import {enableNativeEventPriorityInference} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 const {IsSomeRendererActing} = ReactSharedInternals;
@@ -392,7 +393,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     resetAfterCommit(): void {},
 
     getCurrentEventPriority() {
-      return NoopRenderer.DefaultEventPriority;
+      return currentEventPriority;
     },
 
     now: Scheduler.unstable_now,
@@ -587,6 +588,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   const roots = new Map();
   const DEFAULT_ROOT_ID = '<default>';
 
+  let currentEventPriority = NoopRenderer.DefaultEventPriority;
+
   function childToJSX(child, text) {
     if (text !== null) {
       return text;
@@ -925,6 +928,23 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     discreteUpdates: NoopRenderer.discreteUpdates,
 
+    idleUpdates<T>(fn: () => T): T {
+      if (enableNativeEventPriorityInference) {
+        const prevEventPriority = currentEventPriority;
+        currentEventPriority = NoopRenderer.IdleEventPriority;
+        try {
+          fn();
+        } finally {
+          currentEventPriority = prevEventPriority;
+        }
+      } else {
+        return Scheduler.unstable_runWithPriority(
+          Scheduler.unstable_IdlePriority,
+          fn,
+        );
+      }
+    },
+
     flushDiscreteUpdates: NoopRenderer.flushDiscreteUpdates,
 
     flushSync(fn: () => mixed) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 315541115c37..adb67b6e77df 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -70,7 +70,7 @@ const RetryLanePriority: LanePriority = 5;
 const SelectiveHydrationLanePriority: LanePriority = 4;
 
 const IdleHydrationLanePriority: LanePriority = 3;
-const IdleLanePriority: LanePriority = 2;
+export const IdleLanePriority: LanePriority = 2;
 
 const OffscreenLanePriority: LanePriority = 1;
 
@@ -275,6 +275,7 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
 
   // Check if any work has expired.
   if (expiredLanes !== NoLanes) {
+    // TODO: Should entangle with SyncLane
     nextLanes = expiredLanes;
     nextLanePriority = return_highestLanePriority = SyncLanePriority;
   } else {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index e34c8ac0514f..ea02f3102c90 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -70,7 +70,7 @@ const RetryLanePriority: LanePriority = 5;
 const SelectiveHydrationLanePriority: LanePriority = 4;
 
 const IdleHydrationLanePriority: LanePriority = 3;
-const IdleLanePriority: LanePriority = 2;
+export const IdleLanePriority: LanePriority = 2;
 
 const OffscreenLanePriority: LanePriority = 1;
 
@@ -275,6 +275,7 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
 
   // Check if any work has expired.
   if (expiredLanes !== NoLanes) {
+    // TODO: Should entangle with SyncLane
     nextLanes = expiredLanes;
     nextLanePriority = return_highestLanePriority = SyncLanePriority;
   } else {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 7493b73636a3..29b52c5a0009 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -55,6 +55,7 @@ import {
   DefaultEventPriority as DefaultEventPriority_old,
   DiscreteEventPriority as DiscreteEventPriority_old,
   ContinuousEventPriority as ContinuousEventPriority_old,
+  IdleEventPriority as IdleEventPriority_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -98,6 +99,7 @@ import {
   DefaultEventPriority as DefaultEventPriority_new,
   DiscreteEventPriority as DiscreteEventPriority_new,
   ContinuousEventPriority as ContinuousEventPriority_new,
+  IdleEventPriority as IdleEventPriority_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -183,6 +185,9 @@ export const DiscreteEventPriority = enableNewReconciler
 export const ContinuousEventPriority = enableNewReconciler
   ? ContinuousEventPriority_new
   : ContinuousEventPriority_old;
+export const IdleEventPriority = enableNewReconciler
+  ? IdleEventPriority_new
+  : IdleEventPriority_old;
 
 //TODO: "psuedo" is spelled "pseudo"
 export const createHasPsuedoClassSelector = enableNewReconciler
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 039bb159fd7a..be5ee15970dc 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -101,6 +101,7 @@ export {
   InputDiscreteLanePriority as DiscreteEventPriority,
   InputContinuousLanePriority as ContinuousEventPriority,
   DefaultLanePriority as DefaultEventPriority,
+  IdleLanePriority as IdleEventPriority,
 } from './ReactFiberLane.new';
 
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 012b4c705735..9edb4e503120 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -101,6 +101,7 @@ export {
   InputDiscreteLanePriority as DiscreteEventPriority,
   InputContinuousLanePriority as ContinuousEventPriority,
   DefaultLanePriority as DefaultEventPriority,
+  IdleLanePriority as IdleEventPriority,
 } from './ReactFiberLane.old';
 
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e65e1dad45d6..234ca61fe93f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -465,15 +465,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   } else {
     if (enableNativeEventPriorityInference) {
       const eventLanePriority = getCurrentEventPriority();
-      if (eventLanePriority === DefaultLanePriority) {
-        // TODO: move this case into the ReactDOM host config.
-        const schedulerLanePriority = schedulerPriorityToLanePriority(
-          schedulerPriority,
-        );
-        lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
-      } else {
-        lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
-      }
+      lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
     } else {
       const schedulerLanePriority = schedulerPriorityToLanePriority(
         schedulerPriority,
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 590761dbc8cd..017c712bd814 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -403,23 +403,23 @@ describe('ReactExpiration', () => {
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
 
-  it('prevents starvation by high priority updates', async () => {
+  it('prevents starvation by sync updates', async () => {
     const {useState} = React;
 
-    let updateHighPri;
+    let updateSyncPri;
     let updateNormalPri;
     function App() {
       const [highPri, setHighPri] = useState(0);
       const [normalPri, setNormalPri] = useState(0);
-      updateHighPri = () =>
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => setHighPri(n => n + 1),
-        );
+      updateSyncPri = () => {
+        ReactNoop.flushSync(() => {
+          setHighPri(n => n + 1);
+        });
+      };
       updateNormalPri = () => setNormalPri(n => n + 1);
       return (
         <>
-          <Text text={'High pri: ' + highPri} />
+          <Text text={'Sync pri: ' + highPri} />
           {', '}
           <Text text={'Normal pri: ' + normalPri} />
         </>
@@ -430,29 +430,29 @@ describe('ReactExpiration', () => {
     await ReactNoop.act(async () => {
       root.render(<App />);
     });
-    expect(Scheduler).toHaveYielded(['High pri: 0', 'Normal pri: 0']);
-    expect(root).toMatchRenderedOutput('High pri: 0, Normal pri: 0');
+    expect(Scheduler).toHaveYielded(['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 ReactNoop.act(async () => {
       updateNormalPri();
-      expect(Scheduler).toFlushAndYieldThrough(['High pri: 0']);
-      updateHighPri();
+      expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 0']);
+      updateSyncPri();
     });
     expect(Scheduler).toHaveYielded([
       // Interrupt high pri update to render sync update
-      'High pri: 1',
+      'Sync pri: 1',
       'Normal pri: 0',
       // Now render normal pri
-      'High pri: 1',
+      'Sync pri: 1',
       'Normal pri: 1',
     ]);
-    expect(root).toMatchRenderedOutput('High pri: 1, Normal pri: 1');
+    expect(root).toMatchRenderedOutput('Sync pri: 1, Normal pri: 1');
 
     // Do the same thing, but starve the first update
     await ReactNoop.act(async () => {
       updateNormalPri();
-      expect(Scheduler).toFlushAndYieldThrough(['High pri: 1']);
+      expect(Scheduler).toFlushAndYieldThrough(['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
@@ -461,86 +461,16 @@ describe('ReactExpiration', () => {
       Scheduler.unstable_advanceTime(10000);
 
       // So when we get a high pri update, we shouldn't interrupt
-      updateHighPri();
+      updateSyncPri();
     });
     expect(Scheduler).toHaveYielded([
       // Finish normal pri update
       'Normal pri: 2',
       // Then do high pri update
-      'High pri: 2',
-      'Normal pri: 2',
-    ]);
-    expect(root).toMatchRenderedOutput('High pri: 2, Normal pri: 2');
-  });
-
-  it('prevents starvation by sync updates', async () => {
-    const {useState} = React;
-
-    let updateSyncPri;
-    let updateHighPri;
-    function App() {
-      const [syncPri, setSyncPri] = useState(0);
-      const [highPri, setHighPri] = useState(0);
-      updateSyncPri = () => ReactNoop.flushSync(() => setSyncPri(n => n + 1));
-      updateHighPri = () =>
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => setHighPri(n => n + 1),
-        );
-      return (
-        <>
-          <Text text={'Sync pri: ' + syncPri} />
-          {', '}
-          <Text text={'High pri: ' + highPri} />
-        </>
-      );
-    }
-
-    const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
-      root.render(<App />);
-    });
-    expect(Scheduler).toHaveYielded(['Sync pri: 0', 'High pri: 0']);
-    expect(root).toMatchRenderedOutput('Sync pri: 0, High pri: 0');
-
-    // First demonstrate what happens when there's no starvation
-    await ReactNoop.act(async () => {
-      updateHighPri();
-      expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 0']);
-      updateSyncPri();
-    });
-    expect(Scheduler).toHaveYielded([
-      // Interrupt high pri update to render sync update
-      'Sync pri: 1',
-      'High pri: 0',
-      // Now render high pri
-      'Sync pri: 1',
-      'High pri: 1',
-    ]);
-    expect(root).toMatchRenderedOutput('Sync pri: 1, High pri: 1');
-
-    // Do the same thing, but starve the first update
-    await ReactNoop.act(async () => {
-      updateHighPri();
-      expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 1']);
-
-      // This time, a lot of time has elapsed since the high 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 user
-      // interactions, but not as high as the onse used for normal pri updates.)
-      Scheduler.unstable_advanceTime(1500);
-
-      // So when we get a sync update, we shouldn't interrupt
-      updateSyncPri();
-    });
-    expect(Scheduler).toHaveYielded([
-      // Finish high pri update
-      'High pri: 2',
-      // Then do sync update
       'Sync pri: 2',
-      'High pri: 2',
+      'Normal pri: 2',
     ]);
-    expect(root).toMatchRenderedOutput('Sync pri: 2, High pri: 2');
+    expect(root).toMatchRenderedOutput('Sync pri: 2, Normal pri: 2');
   });
 
   it('idle work never expires', async () => {
@@ -553,10 +483,9 @@ describe('ReactExpiration', () => {
       const [highPri, setIdlePri] = useState(0);
       updateSyncPri = () => ReactNoop.flushSync(() => setSyncPri(n => n + 1));
       updateIdlePri = () =>
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_IdlePriority,
-          () => setIdlePri(n => n + 1),
-        );
+        ReactNoop.idleUpdates(() => {
+          setIdlePri(n => n + 1);
+        });
       return (
         <>
           <Text text={'Sync pri: ' + syncPri} />
@@ -695,11 +624,11 @@ describe('ReactExpiration', () => {
     function App() {
       const [highPri, setHighPri] = useState(0);
       const [normalPri, setNormalPri] = useState(0);
-      updateHighPri = () =>
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => setHighPri(n => n + 1),
-        );
+      updateHighPri = () => {
+        ReactNoop.flushSync(() => {
+          setHighPri(n => n + 1);
+        });
+      };
       updateNormalPri = () => setNormalPri(n => n + 1);
       return (
         <>
@@ -735,20 +664,34 @@ describe('ReactExpiration', () => {
       expect(Scheduler).toFlushAndYieldThrough(['Normal pri: 1']);
       // More time goes by. This expires both of the updates just scheduled.
       Scheduler.unstable_advanceTime(10000);
+      expect(Scheduler).toHaveYielded([]);
 
       // Attempt to interrupt with a high pri update.
       updateHighPri();
 
       // Both normal pri updates should have expired.
-      expect(Scheduler).toFlushExpired([
-        'Sibling',
-        // Notice that the high pri update didn't flush yet. Expiring one lane
-        // doesn't affect other lanes. (Unless they are intentionally entangled,
-        // like we do for overlapping transitions that affect the same state.)
-        'High pri: 0',
-        'Normal pri: 2',
-        'Sibling',
-      ]);
+      if (gate(flags => flags.FIXME)) {
+        // The sync update and the expired normal pri updates render in a
+        // single batch.
+        expect(Scheduler).toHaveYielded([
+          'Sibling',
+          'High pri: 1',
+          'Normal pri: 2',
+          'Sibling',
+        ]);
+      } else {
+        expect(Scheduler).toHaveYielded([
+          'Sibling',
+          'High pri: 0',
+          'Normal pri: 2',
+          'Sibling',
+          // TODO: This is the sync update. We should have rendered it in the same
+          // batch as the expired update.
+          'High pri: 1',
+          'Normal pri: 2',
+          'Sibling',
+        ]);
+      }
     });
   });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index cc86edb13220..bf5503feb490 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1351,11 +1351,10 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(Scheduler).toFlushAndYieldThrough(['Child one render']);
 
         // Schedule unmount for the parent that unmounts children with pending update.
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => setParentState(false),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
+        ReactNoop.flushSync(() => {
+          setParentState(false);
+        });
+        expect(Scheduler).toHaveYielded([
           'Parent false render',
           'Parent false commit',
         ]);
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index 95c721b87a7c..4292333293e8 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -79,6 +79,10 @@ describe('ReactSchedulerIntegration', () => {
     expect(Scheduler).toHaveYielded(['Priority: Immediate']);
   });
 
+  // TODO: Figure out what to do with these tests. I don't think most of them
+  // make sense once we decouple Scheduler from React. Perhaps need similar
+  // tests for React DOM.
+  // @gate !enableNativeEventPriorityInference
   it('has correct priority during rendering', () => {
     function ReadPriority() {
       Scheduler.unstable_yieldValue(
@@ -100,6 +104,10 @@ describe('ReactSchedulerIntegration', () => {
     expect(Scheduler).toFlushAndYield(['Priority: Idle']);
   });
 
+  // TODO: Figure out what to do with these tests. I don't think most of them
+  // make sense once we decouple Scheduler from React. Perhaps need similar
+  // tests for React DOM.
+  // @gate !enableNativeEventPriorityInference
   it('has correct priority when continuing a render after yielding', () => {
     function ReadPriority() {
       Scheduler.unstable_yieldValue(
@@ -152,6 +160,10 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
+  // TODO: Figure out what to do with these tests. I don't think most of them
+  // make sense once we decouple Scheduler from React. Perhaps need similar
+  // tests for React DOM.
+  // @gate !enableNativeEventPriorityInference
   it('passive effects never have higher than normal priority', async () => {
     const {useEffect} = React;
     function ReadPriority({step}) {
@@ -205,6 +217,10 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
+  // TODO: Figure out what to do with these tests. I don't think most of them
+  // make sense once we decouple Scheduler from React. Perhaps need similar
+  // tests for React DOM.
+  // @gate !enableNativeEventPriorityInference
   it('passive effects have correct priority even if they are flushed early', async () => {
     const {useEffect} = React;
     function ReadPriority({step}) {
@@ -233,6 +249,10 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
+  // TODO: Figure out what to do with these tests. I don't think most of them
+  // make sense once we decouple Scheduler from React. Perhaps need similar
+  // tests for React DOM.
+  // @gate !enableNativeEventPriorityInference
   it('passive effect clean-up functions have correct priority even when component is deleted', async () => {
     const {useEffect} = React;
     function ReadPriority({step}) {
@@ -322,6 +342,10 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
+  // TODO: Figure out what to do with these tests. I don't think most of them
+  // make sense once we decouple Scheduler from React. Perhaps need similar
+  // tests for React DOM.
+  // @gate !enableNativeEventPriorityInference
   it('after completing a level of work, infers priority of the next batch based on its expiration time', () => {
     function App({label}) {
       Scheduler.unstable_yieldValue(
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 18042bb4bfb5..901be8f1a6ad 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -2248,9 +2248,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Schedule an update at idle pri.
-    Scheduler.unstable_runWithPriority(Scheduler.unstable_IdlePriority, () =>
-      ReactNoop.render(<Foo renderContent={2} />),
-    );
+    ReactNoop.idleUpdates(() => ReactNoop.render(<Foo renderContent={2} />));
     // We won't even work on Idle priority.
     expect(Scheduler).toFlushAndYield([]);
 
@@ -3018,12 +3016,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         setText('B');
 
         await resolveText('C');
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_IdlePriority,
-          () => {
-            setText('C');
-          },
-        );
+        ReactNoop.idleUpdates(() => {
+          setText('C');
+        });
 
         expect(Scheduler).toFlushAndYield([
           // First we attempt the high pri update. It suspends.
@@ -3282,12 +3277,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
         // And another update at lower priority. This will unblock.
         await resolveText('E');
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_IdlePriority,
-          () => {
-            setText('E');
-          },
-        );
+        ReactNoop.idleUpdates(() => {
+          setText('E');
+        });
       });
       // Even though the fragment fiber is not part of the return path, we should
       // be able to finish rendering.
@@ -3838,12 +3830,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     await ReactNoop.act(async () => {
       setText('B');
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_IdlePriority,
-        () => {
-          setText('B');
-        },
-      );
+      ReactNoop.idleUpdates(() => {
+        setText('B');
+      });
       // Suspend the first update. The second update doesn't run because it has
       // Idle priority.
       expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index 1969c2f7adce..db4214bfd065 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -529,7 +529,7 @@ describe('useMutableSource', () => {
 
       // Changing values should schedule an update with React.
       // Start working on this update but don't finish it.
-      Scheduler.unstable_runWithPriority(Scheduler.unstable_LowPriority, () => {
+      ReactNoop.idleUpdates(() => {
         source.value = 'two';
         expect(Scheduler).toFlushAndYieldThrough(['a:two']);
       });
@@ -538,29 +538,26 @@ describe('useMutableSource', () => {
 
       // Force a higher priority render with a new config.
       // This should signal that the snapshot is not safe and trigger a full re-render.
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => {
-          ReactNoop.render(
-            <>
-              <Component
-                label="a"
-                getSnapshot={newGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-              <Component
-                label="b"
-                getSnapshot={newGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-            </>,
-            () => Scheduler.unstable_yieldValue('Sync effect'),
-          );
-        },
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={newGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={newGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      });
+      expect(Scheduler).toHaveYielded([
         'a:new:two',
         'b:new:two',
         'Sync effect',
@@ -596,7 +593,7 @@ describe('useMutableSource', () => {
 
       // Changing values should schedule an update with React.
       // Start working on this update but don't finish it.
-      Scheduler.unstable_runWithPriority(Scheduler.unstable_LowPriority, () => {
+      ReactNoop.idleUpdates(() => {
         source.value = 'two';
         expect(Scheduler).toFlushAndYieldThrough(['a:two']);
       });
@@ -793,19 +790,14 @@ describe('useMutableSource', () => {
       ReactNoop.flushPassiveEffects();
 
       // Change the source (and schedule an update).
-      Scheduler.unstable_runWithPriority(Scheduler.unstable_LowPriority, () => {
-        source.value = 'two';
-      });
+      source.value = 'two';
 
       // Schedule a higher priority update that changes getSnapshot.
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => {
-          updateGetSnapshot(() => newGetSnapshot);
-        },
-      );
+      ReactNoop.flushSync(() => {
+        updateGetSnapshot(() => newGetSnapshot);
+      });
 
-      expect(Scheduler).toFlushAndYield(['only:new:two']);
+      expect(Scheduler).toHaveYielded(['only:new:two']);
     });
   });
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 2cd6881c94f7..6afa7588bbfb 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -31,6 +31,15 @@ describe('useMutableSourceHydration', () => {
     useMutableSource = React.unstable_useMutableSource;
   });
 
+  function dispatchAndSetCurrentEvent(el, event) {
+    try {
+      window.event = event;
+      el.dispatchEvent(event);
+    } finally {
+      window.event = undefined;
+    }
+  }
+
   const defaultGetSnapshot = source => source.value;
   const defaultSubscribe = (source, callback) => source.subscribe(callback);
 
@@ -332,6 +341,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate experimental
+  // @gate enableNativeEventPriorityInference
   it('should detect a tear during a higher priority interruption', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -371,16 +381,22 @@ describe('useMutableSourceHydration', () => {
         mutableSources: [mutableSource],
       },
     });
+
     expect(() => {
       act(() => {
         root.render(<TestComponent flag={1} />);
         expect(Scheduler).toFlushAndYieldThrough([1]);
 
         // Render an update which will be higher priority than the hydration.
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => root.render(<TestComponent flag={2} />),
-        );
+        // We can do this by scheduling the update inside a mouseover event.
+        const arbitraryElement = document.createElement('div');
+        const mouseOverEvent = document.createEvent('MouseEvents');
+        mouseOverEvent.initEvent('mouseover', true, true);
+        arbitraryElement.addEventListener('mouseover', () => {
+          root.render(<TestComponent flag={2} />);
+        });
+        dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);
+
         expect(Scheduler).toFlushAndYieldThrough([2]);
 
         source.value = 'two';
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
index bd097fea7654..e2a76513f721 100644
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -28,6 +28,7 @@ let onWorkStopped;
 // This is hard coded directly to avoid needing to import, and
 // we'll remove this as we replace runWithPriority with React APIs.
 const IdleLanePriority = 2;
+const InputContinuousPriority = 10;
 
 function loadModules() {
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -427,6 +428,7 @@ describe('ReactDOMTracing', () => {
       });
 
       // @gate experimental
+      // @gate enableNativeEventPriorityInference
       it('should properly trace interactions when there is work of interleaved priorities', () => {
         const Child = () => {
           Scheduler.unstable_yieldValue('Child');
@@ -502,9 +504,8 @@ describe('ReactDOMTracing', () => {
           let interaction = null;
           SchedulerTracing.unstable_trace('update', 0, () => {
             interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-            Scheduler.unstable_runWithPriority(
-              Scheduler.unstable_UserBlockingPriority,
-              () => scheduleUpdateWithHidden(),
+            ReactDOM.unstable_runWithPriority(InputContinuousPriority, () =>
+              scheduleUpdateWithHidden(),
             );
           });
           scheduleUpdate();
@@ -549,6 +550,7 @@ describe('ReactDOMTracing', () => {
       });
 
       // @gate experimental
+      // @gate enableNativeEventPriorityInference
       it('should properly trace interactions through a multi-pass SuspenseList render', () => {
         const SuspenseList = React.SuspenseList;
         const Suspense = React.Suspense;
@@ -610,10 +612,9 @@ describe('ReactDOMTracing', () => {
           // Schedule an unrelated low priority update that shouldn't be included
           // in the previous interaction. This is meant to ensure that we don't
           // rely on the whole tree completing to cover up bugs.
-          Scheduler.unstable_runWithPriority(
-            Scheduler.unstable_IdlePriority,
-            () => root.render(<App />),
-          );
+          ReactDOM.unstable_runWithPriority(IdleLanePriority, () => {
+            root.render(<App />);
+          });
 
           expect(onInteractionTraced).toHaveBeenCalledTimes(1);
           expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(

From d1845ad0ff6c69ea377d710d4053d9bd65e0d0ff Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 02:00:24 -0600
Subject: [PATCH 0251/1603] Default updates should not interrupt transitions
 (#20771)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The only difference between default updates and transition updates is
that default updates do not support suspended refreshes — they will
instantly display a fallback.

Co-authored-by: Rick Hanlon <rickhanlonii@gmail.com>
---
 .../src/ReactFiberLane.new.js                 |  12 +-
 .../src/ReactFiberLane.old.js                 |  12 +-
 ...tIncrementalErrorHandling-test.internal.js |   6 +-
 .../src/__tests__/ReactTransition-test.js     | 202 ++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 14 files changed, 239 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index adb67b6e77df..309a5335b14e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -39,6 +39,7 @@ import invariant from 'shared/invariant';
 import {
   enableCache,
   enableTransitionEntanglement,
+  enableNonInterruptingNormalPri,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -327,7 +328,16 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   ) {
     getHighestPriorityLanes(wipLanes);
     const wipLanePriority = return_highestLanePriority;
-    if (nextLanePriority <= wipLanePriority) {
+    if (
+      nextLanePriority <= wipLanePriority ||
+      // 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.
+      (enableNonInterruptingNormalPri &&
+        nextLanePriority === DefaultLanePriority &&
+        wipLanePriority === TransitionPriority)
+    ) {
+      // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
     } else {
       return_highestLanePriority = nextLanePriority;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index ea02f3102c90..c62fa08c6c30 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -39,6 +39,7 @@ import invariant from 'shared/invariant';
 import {
   enableCache,
   enableTransitionEntanglement,
+  enableNonInterruptingNormalPri,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -327,7 +328,16 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   ) {
     getHighestPriorityLanes(wipLanes);
     const wipLanePriority = return_highestLanePriority;
-    if (nextLanePriority <= wipLanePriority) {
+    if (
+      nextLanePriority <= wipLanePriority ||
+      // 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.
+      (enableNonInterruptingNormalPri &&
+        nextLanePriority === DefaultLanePriority &&
+        wipLanePriority === TransitionPriority)
+    ) {
+      // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
     } else {
       return_highestLanePriority = nextLanePriority;
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 4cdb4410ba59..f568191681b6 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1849,10 +1849,12 @@ describe('ReactIncrementalErrorHandling', () => {
       // the queue.
       expect(Scheduler).toFlushAndYieldThrough(['Everything is fine.']);
 
-      // Schedule a default pri update on a child that triggers an error.
+      // 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.
-      setShouldThrow(true);
+      ReactNoop.discreteUpdates(() => {
+        setShouldThrow(true);
+      });
     });
     // Should render the final state without throwing the error.
     expect(Scheduler).toHaveYielded(['Everything is fine.']);
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index ffd2c9e19ebc..25072eb465ad 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -15,6 +15,7 @@ let ReactNoop;
 let Scheduler;
 let Suspense;
 let useState;
+let useLayoutEffect;
 let useTransition;
 let startTransition;
 let act;
@@ -30,6 +31,7 @@ describe('ReactTransition', () => {
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     useState = React.useState;
+    useLayoutEffect = React.useLayoutEffect;
     useTransition = React.unstable_useTransition;
     Suspense = React.Suspense;
     startTransition = React.unstable_startTransition;
@@ -773,4 +775,204 @@ describe('ReactTransition', () => {
       });
     },
   );
+
+  // @gate experimental
+  // @gate enableCache
+  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.unstable_yieldValue('Commit');
+      });
+
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text={'Transition pri: ' + transitionPri} />
+          {', '}
+          <Text text={'Normal pri: ' + normalPri} />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+    });
+
+    // Initial render.
+    expect(Scheduler).toHaveYielded([
+      'Transition pri: 0',
+      'Normal pri: 0',
+      'Commit',
+    ]);
+    expect(root).toMatchRenderedOutput('Transition pri: 0, Normal pri: 0');
+
+    await act(async () => {
+      updateTransitionPri();
+      updateNormalPri();
+    });
+
+    expect(Scheduler).toHaveYielded([
+      // 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 experimental
+  // @gate enableCache
+  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.unstable_yieldValue('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(async () => {
+      root.render(<App />);
+    });
+
+    // Initial render.
+    expect(Scheduler).toHaveYielded(['(empty)', 'Normal pri: 0', 'Commit']);
+    expect(root).toMatchRenderedOutput('(empty), Normal pri: 0');
+
+    await act(async () => {
+      updateTransitionPri();
+    });
+
+    expect(Scheduler).toHaveYielded([
+      // Suspend.
+      'Suspend! [Async]',
+      'Normal pri: 0',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('(empty), Normal pri: 0');
+
+    await act(async () => {
+      await resolveText('Async');
+      updateNormalPri();
+    });
+
+    expect(Scheduler).toHaveYielded([
+      // Normal pri update.
+      '(empty)',
+      'Normal pri: 1',
+      'Commit',
+
+      // Promise resolved, retry flushed.
+      'Async',
+      'Normal pri: 1',
+      'Commit',
+    ]);
+    expect(root).toMatchRenderedOutput('Async, Normal pri: 1');
+  });
+
+  // @gate experimental
+  // @gate enableCache
+  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.unstable_yieldValue('Commit');
+      });
+      return (
+        <>
+          <Text text={'Transition pri: ' + transitionPri} />
+          {', '}
+          <Text text={'Normal pri: ' + normalPri} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Transition pri: 0',
+      'Normal pri: 0',
+      'Commit',
+    ]);
+    expect(root).toMatchRenderedOutput('Transition pri: 0, Normal pri: 0');
+
+    await ReactNoop.act(async () => {
+      updateTransitionPri();
+
+      expect(Scheduler).toFlushAndYieldThrough([
+        // Start transition update.
+        'Transition pri: 1',
+      ]);
+
+      // Schedule normal pri update during transition update.
+      // This should not interrupt.
+      updateNormalPri();
+    });
+
+    if (gate(flags => flags.enableNonInterruptingNormalPri)) {
+      expect(Scheduler).toHaveYielded([
+        // Finish transition update.
+        'Normal pri: 0',
+        'Commit',
+
+        // Normal pri update.
+        'Transition pri: 1',
+        'Normal pri: 1',
+        'Commit',
+      ]);
+
+      expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
+    } else {
+      expect(Scheduler).toHaveYielded([
+        // Interrupt! Render normal pri update.
+        'Transition pri: 0',
+        'Normal pri: 1',
+        'Commit',
+
+        // Restart transition update.
+        'Transition pri: 1',
+        'Normal pri: 1',
+        'Commit',
+      ]);
+
+      expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
+    }
+  });
 });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index ebd12c335f84..7cdc95842f31 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -150,6 +150,8 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 // Experiment to simplify/improve how transitions are scheduled
 export const enableTransitionEntanglement = false;
 
+export const enableNonInterruptingNormalPri = false;
+
 export const enableDiscreteEventMicroTasks = false;
 
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 3cf047f78eaf..f79ea1e94881 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 56582bc85f8c..cdb661749bf2 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 64a7493b11ea..c1d46ee7cb5b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e10accde9068..e7a7b260a573 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 3a7336db3bfa..df8da1a9f50d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 4adeafbf3017..48f85d5c689d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 88ce477eea3e..db706abb2e8f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -57,6 +57,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableTransitionEntanglement = false;
+export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index f0cb3c5eb1ca..0d1adfc4d41d 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -56,5 +56,6 @@ export const enableUseRefAccessWarning = __VARIANT__;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableTransitionEntanglement = __VARIANT__;
+export const enableNonInterruptingNormalPri = __VARIANT__;
 export const enableDiscreteEventMicroTasks = __VARIANT__;
 export const enableNativeEventPriorityInference = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a2970b0a166d..760d8ca725c1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,6 +32,7 @@ export const {
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
   enableTransitionEntanglement,
+  enableNonInterruptingNormalPri,
   enableDiscreteEventMicroTasks,
   enableNativeEventPriorityInference,
 } = dynamicFeatureFlags;

From 3b870b1e0912c076c450bee261d8dbb181de673c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 02:25:39 -0600
Subject: [PATCH 0252/1603] Lane enableTransitionEntanglement flag (#20775)

---
 .../src/ReactFiberLane.new.js                 | 109 ++++--------------
 .../src/ReactFiberLane.old.js                 | 109 ++++--------------
 .../src/ReactFiberWorkLoop.new.js             |  44 +------
 .../src/ReactFiberWorkLoop.old.js             |  44 +------
 .../__tests__/DebugTracing-test.internal.js   |  51 +++-----
 .../ReactSuspenseWithNoopRenderer-test.js     |  43 ++-----
 .../SchedulingProfiler-test.internal.js       |  25 +---
 packages/shared/ReactFeatureFlags.js          |   3 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 17 files changed, 84 insertions(+), 353 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 309a5335b14e..01714838b0a9 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -38,7 +38,6 @@ export type LaneMap<T> = Array<T>;
 import invariant from 'shared/invariant';
 import {
   enableCache,
-  enableTransitionEntanglement,
   enableNonInterruptingNormalPri,
 } from 'shared/ReactFeatureFlags';
 
@@ -509,93 +508,33 @@ export function isTransitionLane(lane: Lane) {
 
 // To ensure consistency across multiple updates in the same event, this should
 // be a pure function, so that it always returns the same lane for given inputs.
-export function findUpdateLane(
-  lanePriority: LanePriority,
-  wipLanes: Lanes,
-): Lane {
-  if (enableTransitionEntanglement) {
-    // Ignore wipLanes. Always assign to the same bit per priority.
-    switch (lanePriority) {
-      case NoLanePriority:
-        break;
-      case SyncLanePriority:
-        return SyncLane;
-      case SyncBatchedLanePriority:
-        return SyncBatchedLane;
-      case InputDiscreteLanePriority: {
-        return pickArbitraryLane(InputDiscreteLanes);
-      }
-      case InputContinuousLanePriority: {
-        return pickArbitraryLane(InputContinuousLanes);
-      }
-      case DefaultLanePriority: {
-        return pickArbitraryLane(DefaultLanes);
-      }
-      case TransitionPriority: // Should be handled by findTransitionLane instead
-      case RetryLanePriority: // Should be handled by findRetryLane instead
-        break;
-      case IdleLanePriority:
-        return pickArbitraryLane(IdleLanes);
-      default:
-        // The remaining priorities are not valid for updates
-        break;
+export function findUpdateLane(lanePriority: LanePriority): Lane {
+  switch (lanePriority) {
+    case NoLanePriority:
+      break;
+    case SyncLanePriority:
+      return SyncLane;
+    case SyncBatchedLanePriority:
+      return SyncBatchedLane;
+    case InputDiscreteLanePriority: {
+      return pickArbitraryLane(InputDiscreteLanes);
     }
-  } else {
-    // Old behavior that uses wipLanes to shift interleaved updates into a
-    // separate lane. This is no longer needed because we put interleaved
-    // updates on a special queue.
-    switch (lanePriority) {
-      case NoLanePriority:
-        break;
-      case SyncLanePriority:
-        return SyncLane;
-      case SyncBatchedLanePriority:
-        return SyncBatchedLane;
-      case InputDiscreteLanePriority: {
-        const lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
-        if (lane === NoLane) {
-          // Shift to the next priority level
-          return findUpdateLane(InputContinuousLanePriority, wipLanes);
-        }
-        return lane;
-      }
-      case InputContinuousLanePriority: {
-        const lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
-        if (lane === NoLane) {
-          // Shift to the next priority level
-          return findUpdateLane(DefaultLanePriority, wipLanes);
-        }
-        return lane;
-      }
-      case DefaultLanePriority: {
-        let lane = pickArbitraryLane(DefaultLanes & ~wipLanes);
-        if (lane === NoLane) {
-          // If all the default lanes are already being worked on, look for a
-          // lane in the transition range.
-          lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
-          if (lane === NoLane) {
-            // All the transition lanes are taken, too. This should be very
-            // rare, but as a last resort, pick a default lane. This will have
-            // the effect of interrupting the current work-in-progress render.
-            lane = pickArbitraryLane(DefaultLanes);
-          }
-        }
-        return lane;
-      }
-      case TransitionPriority: // Should be handled by findTransitionLane instead
-      case RetryLanePriority: // Should be handled by findRetryLane instead
-        break;
-      case IdleLanePriority:
-        let lane = pickArbitraryLane(IdleLanes & ~wipLanes);
-        if (lane === NoLane) {
-          lane = pickArbitraryLane(IdleLanes);
-        }
-        return lane;
-      default:
-        // The remaining priorities are not valid for updates
-        break;
+    case InputContinuousLanePriority: {
+      return pickArbitraryLane(InputContinuousLanes);
     }
+    case DefaultLanePriority: {
+      return pickArbitraryLane(DefaultLanes);
+    }
+    case TransitionPriority: // Should be handled by findTransitionLane instead
+    case RetryLanePriority: // Should be handled by findRetryLane instead
+      break;
+    case IdleLanePriority:
+      return pickArbitraryLane(IdleLanes);
+    default:
+      // The remaining priorities are not valid for updates
+      break;
   }
+
   invariant(
     false,
     'Invalid update priority: %s. This is a bug in React.',
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index c62fa08c6c30..f46ba4389454 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -38,7 +38,6 @@ export type LaneMap<T> = Array<T>;
 import invariant from 'shared/invariant';
 import {
   enableCache,
-  enableTransitionEntanglement,
   enableNonInterruptingNormalPri,
 } from 'shared/ReactFeatureFlags';
 
@@ -509,93 +508,33 @@ export function isTransitionLane(lane: Lane) {
 
 // To ensure consistency across multiple updates in the same event, this should
 // be a pure function, so that it always returns the same lane for given inputs.
-export function findUpdateLane(
-  lanePriority: LanePriority,
-  wipLanes: Lanes,
-): Lane {
-  if (enableTransitionEntanglement) {
-    // Ignore wipLanes. Always assign to the same bit per priority.
-    switch (lanePriority) {
-      case NoLanePriority:
-        break;
-      case SyncLanePriority:
-        return SyncLane;
-      case SyncBatchedLanePriority:
-        return SyncBatchedLane;
-      case InputDiscreteLanePriority: {
-        return pickArbitraryLane(InputDiscreteLanes);
-      }
-      case InputContinuousLanePriority: {
-        return pickArbitraryLane(InputContinuousLanes);
-      }
-      case DefaultLanePriority: {
-        return pickArbitraryLane(DefaultLanes);
-      }
-      case TransitionPriority: // Should be handled by findTransitionLane instead
-      case RetryLanePriority: // Should be handled by findRetryLane instead
-        break;
-      case IdleLanePriority:
-        return pickArbitraryLane(IdleLanes);
-      default:
-        // The remaining priorities are not valid for updates
-        break;
+export function findUpdateLane(lanePriority: LanePriority): Lane {
+  switch (lanePriority) {
+    case NoLanePriority:
+      break;
+    case SyncLanePriority:
+      return SyncLane;
+    case SyncBatchedLanePriority:
+      return SyncBatchedLane;
+    case InputDiscreteLanePriority: {
+      return pickArbitraryLane(InputDiscreteLanes);
     }
-  } else {
-    // Old behavior that uses wipLanes to shift interleaved updates into a
-    // separate lane. This is no longer needed because we put interleaved
-    // updates on a special queue.
-    switch (lanePriority) {
-      case NoLanePriority:
-        break;
-      case SyncLanePriority:
-        return SyncLane;
-      case SyncBatchedLanePriority:
-        return SyncBatchedLane;
-      case InputDiscreteLanePriority: {
-        const lane = pickArbitraryLane(InputDiscreteLanes & ~wipLanes);
-        if (lane === NoLane) {
-          // Shift to the next priority level
-          return findUpdateLane(InputContinuousLanePriority, wipLanes);
-        }
-        return lane;
-      }
-      case InputContinuousLanePriority: {
-        const lane = pickArbitraryLane(InputContinuousLanes & ~wipLanes);
-        if (lane === NoLane) {
-          // Shift to the next priority level
-          return findUpdateLane(DefaultLanePriority, wipLanes);
-        }
-        return lane;
-      }
-      case DefaultLanePriority: {
-        let lane = pickArbitraryLane(DefaultLanes & ~wipLanes);
-        if (lane === NoLane) {
-          // If all the default lanes are already being worked on, look for a
-          // lane in the transition range.
-          lane = pickArbitraryLane(TransitionLanes & ~wipLanes);
-          if (lane === NoLane) {
-            // All the transition lanes are taken, too. This should be very
-            // rare, but as a last resort, pick a default lane. This will have
-            // the effect of interrupting the current work-in-progress render.
-            lane = pickArbitraryLane(DefaultLanes);
-          }
-        }
-        return lane;
-      }
-      case TransitionPriority: // Should be handled by findTransitionLane instead
-      case RetryLanePriority: // Should be handled by findRetryLane instead
-        break;
-      case IdleLanePriority:
-        let lane = pickArbitraryLane(IdleLanes & ~wipLanes);
-        if (lane === NoLane) {
-          lane = pickArbitraryLane(IdleLanes);
-        }
-        return lane;
-      default:
-        // The remaining priorities are not valid for updates
-        break;
+    case InputContinuousLanePriority: {
+      return pickArbitraryLane(InputContinuousLanes);
     }
+    case DefaultLanePriority: {
+      return pickArbitraryLane(DefaultLanes);
+    }
+    case TransitionPriority: // Should be handled by findTransitionLane instead
+    case RetryLanePriority: // Should be handled by findRetryLane instead
+      break;
+    case IdleLanePriority:
+      return pickArbitraryLane(IdleLanes);
+    default:
+      // The remaining priorities are not valid for updates
+      break;
   }
+
   invariant(
     false,
     'Invalid update priority: %s. This is a bug in React.',
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 234ca61fe93f..490a195e1b78 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -34,7 +34,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
-  enableTransitionEntanglement,
   enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -455,22 +454,22 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     (executionContext & DiscreteEventContext) !== NoContext &&
     schedulerPriority === UserBlockingSchedulerPriority
   ) {
-    lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
+    lane = findUpdateLane(InputDiscreteLanePriority);
   } else if (
     decoupleUpdatePriorityFromScheduler &&
     getCurrentUpdateLanePriority() !== NoLanePriority
   ) {
     const currentLanePriority = getCurrentUpdateLanePriority();
-    lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
+    lane = findUpdateLane(currentLanePriority);
   } else {
     if (enableNativeEventPriorityInference) {
       const eventLanePriority = getCurrentEventPriority();
-      lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
+      lane = findUpdateLane(eventLanePriority);
     } else {
       const schedulerLanePriority = schedulerPriorityToLanePriority(
         schedulerPriority,
       );
-      lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+      lane = findUpdateLane(schedulerLanePriority);
     }
   }
 
@@ -837,22 +836,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   }
 
   let exitStatus = renderRootConcurrent(root, lanes);
-
-  if (
-    !enableTransitionEntanglement &&
-    includesSomeLane(
-      workInProgressRootIncludedLanes,
-      workInProgressRootUpdatedLanes,
-    )
-  ) {
-    // The render included lanes that were updated during the render phase.
-    // For example, when unhiding a hidden tree, we include all the lanes
-    // that were previously skipped when the tree was hidden. That set of
-    // lanes is a superset of the lanes we started rendering with.
-    //
-    // So we'll throw out the current work and restart.
-    prepareFreshStack(root, NoLanes);
-  } else if (exitStatus !== RootIncomplete) {
+  if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
 
@@ -1044,24 +1028,6 @@ function performSyncWorkOnRoot(root) {
     // rendering it before rendering the rest of the expired work.
     lanes = workInProgressRootRenderLanes;
     exitStatus = renderRootSync(root, lanes);
-    if (
-      !enableTransitionEntanglement &&
-      includesSomeLane(
-        workInProgressRootIncludedLanes,
-        workInProgressRootUpdatedLanes,
-      )
-    ) {
-      // The render included lanes that were updated during the render phase.
-      // For example, when unhiding a hidden tree, we include all the lanes
-      // that were previously skipped when the tree was hidden. That set of
-      // lanes is a superset of the lanes we started rendering with.
-      //
-      // Note that this only happens when part of the tree is rendered
-      // concurrently. If the whole tree is rendered synchronously, then there
-      // are no interleaved events.
-      lanes = getNextLanes(root, lanes);
-      exitStatus = renderRootSync(root, lanes);
-    }
   } else {
     lanes = getNextLanes(root, NoLanes);
     exitStatus = renderRootSync(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 242744acadd4..f7ae0f9a9401 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -34,7 +34,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableDoubleInvokingEffects,
   skipUnmountedBoundaries,
-  enableTransitionEntanglement,
   enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -455,22 +454,22 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     (executionContext & DiscreteEventContext) !== NoContext &&
     schedulerPriority === UserBlockingSchedulerPriority
   ) {
-    lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes);
+    lane = findUpdateLane(InputDiscreteLanePriority);
   } else if (
     decoupleUpdatePriorityFromScheduler &&
     getCurrentUpdateLanePriority() !== NoLanePriority
   ) {
     const currentLanePriority = getCurrentUpdateLanePriority();
-    lane = findUpdateLane(currentLanePriority, currentEventWipLanes);
+    lane = findUpdateLane(currentLanePriority);
   } else {
     if (enableNativeEventPriorityInference) {
       const eventLanePriority = getCurrentEventPriority();
-      lane = findUpdateLane(eventLanePriority, currentEventWipLanes);
+      lane = findUpdateLane(eventLanePriority);
     } else {
       const schedulerLanePriority = schedulerPriorityToLanePriority(
         schedulerPriority,
       );
-      lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes);
+      lane = findUpdateLane(schedulerLanePriority);
     }
   }
 
@@ -837,22 +836,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   }
 
   let exitStatus = renderRootConcurrent(root, lanes);
-
-  if (
-    !enableTransitionEntanglement &&
-    includesSomeLane(
-      workInProgressRootIncludedLanes,
-      workInProgressRootUpdatedLanes,
-    )
-  ) {
-    // The render included lanes that were updated during the render phase.
-    // For example, when unhiding a hidden tree, we include all the lanes
-    // that were previously skipped when the tree was hidden. That set of
-    // lanes is a superset of the lanes we started rendering with.
-    //
-    // So we'll throw out the current work and restart.
-    prepareFreshStack(root, NoLanes);
-  } else if (exitStatus !== RootIncomplete) {
+  if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
 
@@ -1044,24 +1028,6 @@ function performSyncWorkOnRoot(root) {
     // rendering it before rendering the rest of the expired work.
     lanes = workInProgressRootRenderLanes;
     exitStatus = renderRootSync(root, lanes);
-    if (
-      !enableTransitionEntanglement &&
-      includesSomeLane(
-        workInProgressRootIncludedLanes,
-        workInProgressRootUpdatedLanes,
-      )
-    ) {
-      // The render included lanes that were updated during the render phase.
-      // For example, when unhiding a hidden tree, we include all the lanes
-      // that were previously skipped when the tree was hidden. That set of
-      // lanes is a superset of the lanes we started rendering with.
-      //
-      // Note that this only happens when part of the tree is rendered
-      // concurrently. If the whole tree is rendered synchronously, then there
-      // are no interleaved events.
-      lanes = getNextLanes(root, lanes);
-      exitStatus = renderRootSync(root, lanes);
-    }
   } else {
     lanes = getNextLanes(root, NoLanes);
     exitStatus = renderRootSync(root, lanes);
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 2cf0837cfef6..0fd0a6722d51 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -276,23 +276,12 @@ describe('DebugTracing', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    gate(flags => {
-      if (flags.new) {
-        expect(logs).toEqual([
-          'group: ⚛️ render (0b0000000000000000000001000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
-          'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
-        ]);
-      } else {
-        expect(logs).toEqual([
-          'group: ⚛️ render (0b0000000000000000000001000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
-          'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
-        ]);
-      }
-    });
+    expect(logs).toEqual([
+      'group: ⚛️ render (0b0000000000000000000001000000000)',
+      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
+      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
+      'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
+    ]);
   });
 
   // @gate experimental && build === 'development' && enableDebugTracing
@@ -327,9 +316,6 @@ describe('DebugTracing', () => {
     ]);
   });
 
-  // This test is coupled to lane implementation details, so I'm disabling it
-  // until it stabilizes so we don't have to repeatedly update it.
-  // @gate !enableTransitionEntanglement
   // @gate experimental && build === 'development' && enableDebugTracing
   it('should log cascading passive updates', () => {
     function Example() {
@@ -350,7 +336,7 @@ describe('DebugTracing', () => {
     });
     expect(logs).toEqual([
       'group: ⚛️ passive effects (0b0000000000000000000001000000000)',
-      'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
+      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
       'groupEnd: ⚛️ passive effects (0b0000000000000000000001000000000)',
     ]);
   });
@@ -374,23 +360,12 @@ describe('DebugTracing', () => {
       );
     });
 
-    gate(flags => {
-      if (flags.new) {
-        expect(logs).toEqual([
-          'group: ⚛️ render (0b0000000000000000000001000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000001000000000)', // debugRenderPhaseSideEffectsForStrictMode
-          'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
-        ]);
-      } else {
-        expect(logs).toEqual([
-          'group: ⚛️ render (0b0000000000000000000001000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000010000000000)',
-          'log: ⚛️ Example updated state (0b0000000000000000000010000000000)', // debugRenderPhaseSideEffectsForStrictMode
-          'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
-        ]);
-      }
-    });
+    expect(logs).toEqual([
+      'group: ⚛️ render (0b0000000000000000000001000000000)',
+      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
+      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)', // debugRenderPhaseSideEffectsForStrictMode
+      'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
+    ]);
   });
 
   // @gate experimental && build === 'development' && enableDebugTracing
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 901be8f1a6ad..20971e9f58e9 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -589,7 +589,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   // Note: This test was written to test a heuristic used in the expiration
   // times model. Might not make sense in the new model.
-  // @gate enableCache || enableTransitionEntanglement
+  // 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();
 
@@ -642,26 +643,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       root.render(<App step={4} shouldSuspend={false} />);
     });
 
-    if (gate(flags => flags.enableTransitionEntanglement)) {
-      expect(Scheduler).toHaveYielded(['Sibling', 'Step 4']);
-    } else {
-      // Old implementation
-      expect(Scheduler).toHaveYielded([
-        'Sibling',
-
-        // NOTE: The final of the update got pushed into a lower priority range of
-        // lanes, leading to the extra intermediate render. This is because when
-        // we schedule the fourth update, we're already in the middle of rendering
-        // the three others. Since there are only three lanes in the default
-        // range, the fourth lane is shifted to slightly lower priority. This
-        // could easily change when we tweak our batching heuristics. Ideally,
-        // they'd all have default priority and render in a single batch.
-        'Suspend! [Step 3]',
-        'Sibling',
-
-        'Step 4',
-      ]);
-    }
+    expect(Scheduler).toHaveYielded(['Sibling', 'Step 4']);
   });
 
   // @gate enableCache
@@ -2798,21 +2780,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       foo.setState({suspend: false});
     });
 
-    if (gate(flags => flags.enableTransitionEntanglement)) {
-      expect(Scheduler).toHaveYielded([
-        // First setState
-        'Foo',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        // First setState
-        'Foo',
-        // Second setState. This update was scheduled while we were in the
-        // middle of rendering the previous update, so it was pushed to a separate
-        // batch to avoid invalidating the work-in-progress tree.
-        'Foo',
-      ]);
-    }
+    expect(Scheduler).toHaveYielded([
+      // First setState
+      'Foo',
+    ]);
     expect(root).toMatchRenderedOutput(<span prop="Foo" />);
   });
 
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 65459ecd3368..433f312fc709 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -399,11 +399,7 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    gate(({old}) =>
-      old
-        ? expectMarksToContain('--schedule-state-update-1024-Example')
-        : expectMarksToContain('--schedule-state-update-512-Example'),
-    );
+    expectMarksToContain('--schedule-state-update-512-Example');
   });
 
   // @gate enableSchedulingProfiler
@@ -431,11 +427,7 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    gate(({old}) =>
-      old
-        ? expectMarksToContain('--schedule-forced-update-1024-Example')
-        : expectMarksToContain('--schedule-forced-update-512-Example'),
-    );
+    expectMarksToContain('--schedule-forced-update-512-Example');
   });
 
   // @gate enableSchedulingProfiler
@@ -476,7 +468,6 @@ describe('SchedulingProfiler', () => {
 
   // This test is coupled to lane implementation details, so I'm disabling it in
   // the new fork until it stabilizes so we don't have to repeatedly update it.
-  // @gate !enableTransitionEntanglement
   // @gate enableSchedulingProfiler
   it('should mark cascading passive updates', () => {
     function Example() {
@@ -501,11 +492,11 @@ describe('SchedulingProfiler', () => {
       '--layout-effects-stop',
       '--commit-stop',
       '--passive-effects-start-512',
-      '--schedule-state-update-1024-Example',
+      '--schedule-state-update-512-Example',
       '--passive-effects-stop',
-      '--render-start-1024',
+      '--render-start-512',
       '--render-stop',
-      '--commit-start-1024',
+      '--commit-start-512',
       '--commit-stop',
     ]);
   });
@@ -524,10 +515,6 @@ describe('SchedulingProfiler', () => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
-    gate(({old}) =>
-      old
-        ? expectMarksToContain('--schedule-state-update-1024-Example')
-        : expectMarksToContain('--schedule-state-update-512-Example'),
-    );
+    expectMarksToContain('--schedule-state-update-512-Example');
   });
 });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 7cdc95842f31..3d0362f4b3fc 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -147,9 +147,6 @@ export const enableRecursiveCommitTraversal = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 
-// Experiment to simplify/improve how transitions are scheduled
-export const enableTransitionEntanglement = false;
-
 export const enableNonInterruptingNormalPri = false;
 
 export const enableDiscreteEventMicroTasks = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f79ea1e94881..f97f4f428c18 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableTransitionEntanglement = false;
 export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index cdb661749bf2..9d160790b3fe 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableTransitionEntanglement = false;
 export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c1d46ee7cb5b..52990e5ec7b7 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableTransitionEntanglement = false;
 export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e7a7b260a573..3c739b7bccb3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableTransitionEntanglement = false;
 export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index df8da1a9f50d..fb2211763c03 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableTransitionEntanglement = false;
 export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 48f85d5c689d..34e6d5315742 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableTransitionEntanglement = false;
 export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index db706abb2e8f..4f0c56733eaf 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableTransitionEntanglement = false;
 export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 0d1adfc4d41d..b6e1d4260cc4 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -55,7 +55,6 @@ export const enableUseRefAccessWarning = __VARIANT__;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
-export const enableTransitionEntanglement = __VARIANT__;
 export const enableNonInterruptingNormalPri = __VARIANT__;
 export const enableDiscreteEventMicroTasks = __VARIANT__;
 export const enableNativeEventPriorityInference = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 760d8ca725c1..924fd6ea9e5b 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,7 +31,6 @@ export const {
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
-  enableTransitionEntanglement,
   enableNonInterruptingNormalPri,
   enableDiscreteEventMicroTasks,
   enableNativeEventPriorityInference,

From eee874ce6efed53a02f875385b23a53e10dc2c4e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 13:01:52 -0600
Subject: [PATCH 0253/1603] Cross-fork lint: Support named export declaration
 (#20784)

Noticed this didn't work when I ran `replace-fork` and a named export
declaration in ReactFiberReconciler was not properly fixed.
---
 .../src/ReactFiberReconciler.old.js           |  2 +-
 .../no-cross-fork-imports-test.internal.js    | 24 ++++++
 scripts/eslint-rules/no-cross-fork-imports.js | 83 +++++++++++--------
 3 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 9edb4e503120..77032eb24b10 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -104,7 +104,7 @@ export {
   IdleLanePriority as IdleEventPriority,
 } from './ReactFiberLane.old';
 
-export {registerMutableSourceForHydration} from './ReactMutableSource.new';
+export {registerMutableSourceForHydration} from './ReactMutableSource.old';
 export {createPortal} from './ReactPortal';
 export {
   createComponentSelector,
diff --git a/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js b/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js
index 453df47bdd8b..2adfc9a9f9cd 100644
--- a/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js
@@ -94,5 +94,29 @@ ruleTester.run('eslint-rules/no-cross-fork-imports', rule, {
       ],
       output: "import {scheduleUpdateOnFiber} from './ReactFiberWorkLoop.new';",
     },
+    {
+      code: "export {DiscreteEventPriority} from './ReactFiberLane.old.js';",
+      filename: 'ReactFiberReconciler.new.js',
+      errors: [
+        {
+          message:
+            'A module that belongs to the new fork cannot import a module ' +
+            'from the old fork.',
+        },
+      ],
+      output: "export {DiscreteEventPriority} from './ReactFiberLane.new';",
+    },
+    {
+      code: "export {DiscreteEventPriority} from './ReactFiberLane.new.js';",
+      filename: 'ReactFiberReconciler.old.js',
+      errors: [
+        {
+          message:
+            'A module that belongs to the old fork cannot import a module ' +
+            'from the new fork.',
+        },
+      ],
+      output: "export {DiscreteEventPriority} from './ReactFiberLane.old';",
+    },
   ],
 });
diff --git a/scripts/eslint-rules/no-cross-fork-imports.js b/scripts/eslint-rules/no-cross-fork-imports.js
index c2d27960d77d..76df033c282a 100644
--- a/scripts/eslint-rules/no-cross-fork-imports.js
+++ b/scripts/eslint-rules/no-cross-fork-imports.js
@@ -26,48 +26,59 @@ module.exports = {
     const sourceFilename = context.getFilename();
 
     if (isOldFork(sourceFilename)) {
+      const visitor = node => {
+        const sourceNode = node.source;
+        if (sourceNode === null) {
+          return;
+        }
+        const filename = sourceNode.value;
+        if (isNewFork(filename)) {
+          context.report({
+            node: sourceNode,
+            message:
+              'A module that belongs to the old fork cannot import a module ' +
+              'from the new fork.',
+            fix(fixer) {
+              return fixer.replaceText(
+                sourceNode,
+                `'${filename.replace(/\.new(\.js)?$/, '.old')}'`
+              );
+            },
+          });
+        }
+      };
       return {
-        ImportDeclaration(node) {
-          const importSourceNode = node.source;
-          const filename = importSourceNode.value;
-          if (isNewFork(filename)) {
-            context.report({
-              node: importSourceNode,
-              message:
-                'A module that belongs to the old fork cannot import a module ' +
-                'from the new fork.',
-              fix(fixer) {
-                return fixer.replaceText(
-                  importSourceNode,
-                  `'${filename.replace(/\.new(\.js)?$/, '.old')}'`
-                );
-              },
-            });
-          }
-        },
+        ImportDeclaration: visitor,
+        ExportNamedDeclaration: visitor,
       };
     }
 
     if (isNewFork(sourceFilename)) {
+      const visitor = node => {
+        const sourceNode = node.source;
+        if (sourceNode === null) {
+          return;
+        }
+        const filename = sourceNode.value;
+        if (isOldFork(filename)) {
+          context.report({
+            node: sourceNode,
+            message:
+              'A module that belongs to the new fork cannot import a module ' +
+              'from the old fork.',
+            fix(fixer) {
+              return fixer.replaceText(
+                sourceNode,
+                `'${filename.replace(/\.old(\.js)?$/, '.new')}'`
+              );
+            },
+          });
+        }
+      };
+
       return {
-        ImportDeclaration(node) {
-          const importSourceNode = node.source;
-          const filename = importSourceNode.value;
-          if (isOldFork(filename)) {
-            context.report({
-              node: importSourceNode,
-              message:
-                'A module that belongs to the new fork cannot import a module ' +
-                'from the old fork.',
-              fix(fixer) {
-                return fixer.replaceText(
-                  importSourceNode,
-                  `'${filename.replace(/\.old(\.js)?$/, '.new')}'`
-                );
-              },
-            });
-          }
-        },
+        ImportDeclaration: visitor,
+        ExportNamedDeclaration: visitor,
       };
     }
 

From 9e9be6c6b34452a327d5f34d3120f4c93edcfcd9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 17:54:58 -0600
Subject: [PATCH 0254/1603] Parallelize Flow in CI (#20794)

* Parallelize Flow in CI

We added more host configs recently, and we run all the checks in
sequence, so sometimes Flow ends up being the slowest CI job.

This splits the job across multiple processes.

* Fix environment variable typo

Co-authored-by: Ricky <rickhanlonii@gmail.com>

Co-authored-by: Ricky <rickhanlonii@gmail.com>
---
 .circleci/config.yml     |  7 ++++---
 scripts/tasks/flow-ci.js | 20 +++++++++++++++-----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index f04d05b77b65..fe4e616ef083 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -83,6 +83,7 @@ jobs:
   yarn_flow:
     docker: *docker
     environment: *environment
+    parallelism: 5
 
     steps:
       - checkout
@@ -384,9 +385,6 @@ workflows:
       - yarn_lint:
           requires:
             - setup
-      - yarn_flow:
-          requires:
-            - setup
       - RELEASE_CHANNEL_stable_yarn_build:
           requires:
             - setup
@@ -426,6 +424,9 @@ workflows:
     unless: << pipeline.parameters.prerelease_commit_sha >>
     jobs:
       - setup
+      - yarn_flow:
+          requires:
+            - setup
       - yarn_test:
           requires:
             - setup
diff --git a/scripts/tasks/flow-ci.js b/scripts/tasks/flow-ci.js
index 60abe3be1599..99099270cf48 100644
--- a/scripts/tasks/flow-ci.js
+++ b/scripts/tasks/flow-ci.js
@@ -14,12 +14,22 @@ process.on('unhandledRejection', err => {
 const runFlow = require('../flow/runFlow');
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
+// Parallelize tests across multiple tasks.
+const nodeTotal = process.env.CIRCLE_NODE_TOTAL
+  ? parseInt(process.env.CIRCLE_NODE_TOTAL, 10)
+  : 1;
+const nodeIndex = process.env.CIRCLE_NODE_INDEX
+  ? parseInt(process.env.CIRCLE_NODE_INDEX, 10)
+  : 0;
+
 async function checkAll() {
-  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-  for (let rendererInfo of inlinedHostConfigs) {
-    if (rendererInfo.isFlowTyped) {
-      await runFlow(rendererInfo.shortName, ['check']);
-      console.log();
+  for (let i = 0; i < inlinedHostConfigs.length; i++) {
+    if (i % nodeTotal === nodeIndex) {
+      const rendererInfo = inlinedHostConfigs[i];
+      if (rendererInfo.isFlowTyped) {
+        await runFlow(rendererInfo.shortName, ['check']);
+        console.log();
+      }
     }
   }
 }

From b593a6f778e3042e57d71f98d2e0dca716e8ebb2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 18:09:20 -0600
Subject: [PATCH 0255/1603] CI job to check that forks are in sync (#20795)

We don't always keep the reconciler forks in sync (otherwise it we
wouldn't have forked it) but during periods when they are meant to be in
sync, we use this job to confirm there are no differences.
---
 .circleci/config.yml | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index fe4e616ef083..250a0d684962 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -376,6 +376,23 @@ jobs:
             cp ./scripts/release/ci-npmrc ~/.npmrc
             scripts/release/publish.js --ci --tags << parameters.dist_tag >>
 
+  # We don't always keep the reconciler forks in sync (otherwise it we wouldn't
+  # have forked it) but during periods when they are meant to be in sync, we
+  # use this job to confirm there are no differences.
+  sync_reconciler_forks:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Confirm reconciler forks are the same
+          command: |
+            yarn replace-fork
+            git diff --quiet || (echo "Reconciler forks are not the same! Run yarn replace-fork. Or, if this was intentional, disable this CI check." && false)
+
+
 workflows:
   version: 2
   stable:
@@ -427,6 +444,11 @@ workflows:
       - yarn_flow:
           requires:
             - setup
+      # NOTE: This job is only enabled when we want the forks to be in sync.
+      # When the forks intentionally diverge, comment out the job to disable it.
+      - sync_reconciler_forks:
+          requires:
+            - setup
       - yarn_test:
           requires:
             - setup

From d3d2451a08c9afcc561f66383211ce2274d864e6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 18:09:35 -0600
Subject: [PATCH 0256/1603] Use a single lane per priority level (#20791)

(Except transitions and retries.)

The idea is that the only priorities that benefit from multiple parallel
updates are the ones that might suspend: transitions and retries. All
other priorities, including the ones that are interruptible like
Continuous and Idle, don't need multiple lanes because it's better to
batch everything together.
---
 .../src/ReactFiberLane.new.js                 | 195 +++++++++---------
 .../src/ReactFiberLane.old.js                 | 195 +++++++++---------
 2 files changed, 200 insertions(+), 190 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 01714838b0a9..20f89cc8dfe0 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -85,29 +85,40 @@ export const SyncLane: Lane = /*                        */ 0b0000000000000000000
 export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
 
 export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
-const InputDiscreteLanes: Lanes = /*                    */ 0b0000000000000000000000000011000;
+const InputDiscreteLane: Lanes = /*                     */ 0b0000000000000000000000000001000;
 
 const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000;
-const InputContinuousLanes: Lanes = /*                  */ 0b0000000000000000000000011000000;
+const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000001000000;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000;
-export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000111000000000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000001000000000;
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
-const FirstTransitionLane: Lane = /*                    */ 0b0000000000000000010000000000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000001000000000000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000010000000000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000100000000000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000001000000000000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000010000000000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000100000000000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000001000000000000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
+const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
+const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
+const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
+const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
 
-const FirstRetryLane: Lanes = /*                        */ 0b0000000010000000000000000000000;
-export const SomeRetryLane: Lane = FirstRetryLane;
+export const SomeRetryLane: Lane = RetryLane1;
 
 export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
 
 const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111;
 
 export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
-const IdleLanes: Lanes = /*                             */ 0b0110000000000000000000000000000;
+const IdleLane: Lanes = /*                              */ 0b0010000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
@@ -115,8 +126,8 @@ export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
 
-let nextTransitionLane: Lane = FirstTransitionLane;
-let nextRetryLane: Lane = FirstRetryLane;
+let nextTransitionLane: Lane = TransitionLane1;
+let nextRetryLane: Lane = RetryLane1;
 
 export function getCurrentUpdateLanePriority(): LanePriority {
   return currentUpdateLanePriority;
@@ -131,78 +142,73 @@ export function setCurrentUpdateLanePriority(newLanePriority: LanePriority) {
 let return_highestLanePriority: LanePriority = DefaultLanePriority;
 
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
-  if ((SyncLane & lanes) !== NoLanes) {
-    return_highestLanePriority = SyncLanePriority;
-    return SyncLane;
-  }
-  if ((SyncBatchedLane & lanes) !== NoLanes) {
-    return_highestLanePriority = SyncBatchedLanePriority;
-    return SyncBatchedLane;
-  }
-  if ((InputDiscreteHydrationLane & lanes) !== NoLanes) {
-    return_highestLanePriority = InputDiscreteHydrationLanePriority;
-    return InputDiscreteHydrationLane;
-  }
-  const inputDiscreteLanes = InputDiscreteLanes & lanes;
-  if (inputDiscreteLanes !== NoLanes) {
-    return_highestLanePriority = InputDiscreteLanePriority;
-    return inputDiscreteLanes;
-  }
-  if ((lanes & InputContinuousHydrationLane) !== NoLanes) {
-    return_highestLanePriority = InputContinuousHydrationLanePriority;
-    return InputContinuousHydrationLane;
-  }
-  const inputContinuousLanes = InputContinuousLanes & lanes;
-  if (inputContinuousLanes !== NoLanes) {
-    return_highestLanePriority = InputContinuousLanePriority;
-    return inputContinuousLanes;
-  }
-  if ((lanes & DefaultHydrationLane) !== NoLanes) {
-    return_highestLanePriority = DefaultHydrationLanePriority;
-    return DefaultHydrationLane;
-  }
-  const defaultLanes = DefaultLanes & lanes;
-  if (defaultLanes !== NoLanes) {
-    return_highestLanePriority = DefaultLanePriority;
-    return defaultLanes;
-  }
-  if ((lanes & TransitionHydrationLane) !== NoLanes) {
-    return_highestLanePriority = TransitionHydrationPriority;
-    return TransitionHydrationLane;
-  }
-  const transitionLanes = TransitionLanes & lanes;
-  if (transitionLanes !== NoLanes) {
-    return_highestLanePriority = TransitionPriority;
-    return transitionLanes;
-  }
-  const retryLanes = RetryLanes & lanes;
-  if (retryLanes !== NoLanes) {
-    return_highestLanePriority = RetryLanePriority;
-    return retryLanes;
-  }
-  if (lanes & SelectiveHydrationLane) {
-    return_highestLanePriority = SelectiveHydrationLanePriority;
-    return SelectiveHydrationLane;
-  }
-  if ((lanes & IdleHydrationLane) !== NoLanes) {
-    return_highestLanePriority = IdleHydrationLanePriority;
-    return IdleHydrationLane;
-  }
-  const idleLanes = IdleLanes & lanes;
-  if (idleLanes !== NoLanes) {
-    return_highestLanePriority = IdleLanePriority;
-    return idleLanes;
-  }
-  if ((OffscreenLane & lanes) !== NoLanes) {
-    return_highestLanePriority = OffscreenLanePriority;
-    return OffscreenLane;
-  }
-  if (__DEV__) {
-    console.error('Should have found matching lanes. This is a bug in React.');
+  switch (getHighestPriorityLane(lanes)) {
+    case SyncLane:
+      return_highestLanePriority = SyncLanePriority;
+      return SyncLane;
+    case SyncBatchedLane:
+      return_highestLanePriority = SyncBatchedLanePriority;
+      return SyncBatchedLane;
+    case InputDiscreteHydrationLane:
+      return_highestLanePriority = InputDiscreteHydrationLanePriority;
+      return InputDiscreteHydrationLane;
+    case InputDiscreteLane:
+      return_highestLanePriority = InputDiscreteLanePriority;
+      return InputDiscreteLane;
+    case InputContinuousHydrationLane:
+      return_highestLanePriority = InputContinuousHydrationLanePriority;
+      return InputContinuousHydrationLane;
+    case InputContinuousLane:
+      return_highestLanePriority = InputContinuousLanePriority;
+      return InputContinuousLane;
+    case DefaultHydrationLane:
+      return_highestLanePriority = DefaultHydrationLanePriority;
+      return DefaultHydrationLane;
+    case DefaultLane:
+      return_highestLanePriority = DefaultLanePriority;
+      return DefaultLane;
+    case TransitionHydrationLane:
+      return_highestLanePriority = TransitionHydrationPriority;
+      return TransitionHydrationLane;
+    case TransitionLane1:
+    case TransitionLane2:
+    case TransitionLane3:
+    case TransitionLane4:
+    case TransitionLane5:
+    case TransitionLane6:
+    case TransitionLane7:
+    case TransitionLane8:
+    case TransitionLane9:
+      return_highestLanePriority = TransitionPriority;
+      return lanes & TransitionLanes;
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+      return_highestLanePriority = RetryLanePriority;
+      return lanes & RetryLanes;
+    case SelectiveHydrationLane:
+      return_highestLanePriority = SelectiveHydrationLanePriority;
+      return SelectiveHydrationLane;
+    case IdleHydrationLane:
+      return_highestLanePriority = IdleHydrationLanePriority;
+      return IdleHydrationLane;
+    case IdleLane:
+      return_highestLanePriority = IdleLanePriority;
+      return IdleLane;
+    case OffscreenLane:
+      return_highestLanePriority = OffscreenLanePriority;
+      return OffscreenLane;
+    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_highestLanePriority = DefaultLanePriority;
+      return lanes;
   }
-  // This shouldn't be reachable, but as a fallback, return the entire bitmask.
-  return_highestLanePriority = DefaultLanePriority;
-  return lanes;
 }
 
 export function schedulerPriorityToLanePriority(
@@ -516,20 +522,17 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
       return SyncLane;
     case SyncBatchedLanePriority:
       return SyncBatchedLane;
-    case InputDiscreteLanePriority: {
-      return pickArbitraryLane(InputDiscreteLanes);
-    }
-    case InputContinuousLanePriority: {
-      return pickArbitraryLane(InputContinuousLanes);
-    }
-    case DefaultLanePriority: {
-      return pickArbitraryLane(DefaultLanes);
-    }
+    case InputDiscreteLanePriority:
+      return InputDiscreteLane;
+    case InputContinuousLanePriority:
+      return InputContinuousLane;
+    case DefaultLanePriority:
+      return DefaultLane;
     case TransitionPriority: // Should be handled by findTransitionLane instead
     case RetryLanePriority: // Should be handled by findRetryLane instead
       break;
     case IdleLanePriority:
-      return pickArbitraryLane(IdleLanes);
+      return IdleLane;
     default:
       // The remaining priorities are not valid for updates
       break;
@@ -549,7 +552,7 @@ export function claimNextTransitionLane(): Lane {
   const lane = nextTransitionLane;
   nextTransitionLane <<= 1;
   if ((nextTransitionLane & TransitionLanes) === 0) {
-    nextTransitionLane = FirstTransitionLane;
+    nextTransitionLane = TransitionLane1;
   }
   return lane;
 }
@@ -558,7 +561,7 @@ export function claimNextRetryLane(): Lane {
   const lane = nextRetryLane;
   nextRetryLane <<= 1;
   if ((nextRetryLane & RetryLanes) === 0) {
-    nextRetryLane = FirstRetryLane;
+    nextRetryLane = RetryLane1;
   }
   return lane;
 }
@@ -650,7 +653,7 @@ export function markRootUpdated(
   // 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 & IdleLanes) === NoLanes) {
+  if (updateLane !== IdleLane) {
     root.suspendedLanes = NoLanes;
     root.pingedLanes = NoLanes;
   }
@@ -692,11 +695,13 @@ export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
 }
 
 export function markDiscreteUpdatesExpired(root: FiberRoot) {
-  root.expiredLanes |= InputDiscreteLanes & root.pendingLanes;
+  if (root.pendingLanes & InputDiscreteLane) {
+    root.expiredLanes |= InputDiscreteLane;
+  }
 }
 
 export function hasDiscreteLanes(lanes: Lanes) {
-  return (lanes & InputDiscreteLanes) !== NoLanes;
+  return (lanes & InputDiscreteLane) !== NoLanes;
 }
 
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index f46ba4389454..6d452ab67b9c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -85,29 +85,40 @@ export const SyncLane: Lane = /*                        */ 0b0000000000000000000
 export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
 
 export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
-const InputDiscreteLanes: Lanes = /*                    */ 0b0000000000000000000000000011000;
+const InputDiscreteLane: Lanes = /*                     */ 0b0000000000000000000000000001000;
 
 const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000;
-const InputContinuousLanes: Lanes = /*                  */ 0b0000000000000000000000011000000;
+const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000001000000;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000;
-export const DefaultLanes: Lanes = /*                   */ 0b0000000000000000000111000000000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000001000000000;
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
-const FirstTransitionLane: Lane = /*                    */ 0b0000000000000000010000000000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000001000000000000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000010000000000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000100000000000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000001000000000000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000010000000000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000100000000000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000001000000000000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
+const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
+const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
+const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
+const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
 
-const FirstRetryLane: Lanes = /*                        */ 0b0000000010000000000000000000000;
-export const SomeRetryLane: Lane = FirstRetryLane;
+export const SomeRetryLane: Lane = RetryLane1;
 
 export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
 
 const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111;
 
 export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
-const IdleLanes: Lanes = /*                             */ 0b0110000000000000000000000000000;
+const IdleLane: Lanes = /*                              */ 0b0010000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
@@ -115,8 +126,8 @@ export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
 
-let nextTransitionLane: Lane = FirstTransitionLane;
-let nextRetryLane: Lane = FirstRetryLane;
+let nextTransitionLane: Lane = TransitionLane1;
+let nextRetryLane: Lane = RetryLane1;
 
 export function getCurrentUpdateLanePriority(): LanePriority {
   return currentUpdateLanePriority;
@@ -131,78 +142,73 @@ export function setCurrentUpdateLanePriority(newLanePriority: LanePriority) {
 let return_highestLanePriority: LanePriority = DefaultLanePriority;
 
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
-  if ((SyncLane & lanes) !== NoLanes) {
-    return_highestLanePriority = SyncLanePriority;
-    return SyncLane;
-  }
-  if ((SyncBatchedLane & lanes) !== NoLanes) {
-    return_highestLanePriority = SyncBatchedLanePriority;
-    return SyncBatchedLane;
-  }
-  if ((InputDiscreteHydrationLane & lanes) !== NoLanes) {
-    return_highestLanePriority = InputDiscreteHydrationLanePriority;
-    return InputDiscreteHydrationLane;
-  }
-  const inputDiscreteLanes = InputDiscreteLanes & lanes;
-  if (inputDiscreteLanes !== NoLanes) {
-    return_highestLanePriority = InputDiscreteLanePriority;
-    return inputDiscreteLanes;
-  }
-  if ((lanes & InputContinuousHydrationLane) !== NoLanes) {
-    return_highestLanePriority = InputContinuousHydrationLanePriority;
-    return InputContinuousHydrationLane;
-  }
-  const inputContinuousLanes = InputContinuousLanes & lanes;
-  if (inputContinuousLanes !== NoLanes) {
-    return_highestLanePriority = InputContinuousLanePriority;
-    return inputContinuousLanes;
-  }
-  if ((lanes & DefaultHydrationLane) !== NoLanes) {
-    return_highestLanePriority = DefaultHydrationLanePriority;
-    return DefaultHydrationLane;
-  }
-  const defaultLanes = DefaultLanes & lanes;
-  if (defaultLanes !== NoLanes) {
-    return_highestLanePriority = DefaultLanePriority;
-    return defaultLanes;
-  }
-  if ((lanes & TransitionHydrationLane) !== NoLanes) {
-    return_highestLanePriority = TransitionHydrationPriority;
-    return TransitionHydrationLane;
-  }
-  const transitionLanes = TransitionLanes & lanes;
-  if (transitionLanes !== NoLanes) {
-    return_highestLanePriority = TransitionPriority;
-    return transitionLanes;
-  }
-  const retryLanes = RetryLanes & lanes;
-  if (retryLanes !== NoLanes) {
-    return_highestLanePriority = RetryLanePriority;
-    return retryLanes;
-  }
-  if (lanes & SelectiveHydrationLane) {
-    return_highestLanePriority = SelectiveHydrationLanePriority;
-    return SelectiveHydrationLane;
-  }
-  if ((lanes & IdleHydrationLane) !== NoLanes) {
-    return_highestLanePriority = IdleHydrationLanePriority;
-    return IdleHydrationLane;
-  }
-  const idleLanes = IdleLanes & lanes;
-  if (idleLanes !== NoLanes) {
-    return_highestLanePriority = IdleLanePriority;
-    return idleLanes;
-  }
-  if ((OffscreenLane & lanes) !== NoLanes) {
-    return_highestLanePriority = OffscreenLanePriority;
-    return OffscreenLane;
-  }
-  if (__DEV__) {
-    console.error('Should have found matching lanes. This is a bug in React.');
+  switch (getHighestPriorityLane(lanes)) {
+    case SyncLane:
+      return_highestLanePriority = SyncLanePriority;
+      return SyncLane;
+    case SyncBatchedLane:
+      return_highestLanePriority = SyncBatchedLanePriority;
+      return SyncBatchedLane;
+    case InputDiscreteHydrationLane:
+      return_highestLanePriority = InputDiscreteHydrationLanePriority;
+      return InputDiscreteHydrationLane;
+    case InputDiscreteLane:
+      return_highestLanePriority = InputDiscreteLanePriority;
+      return InputDiscreteLane;
+    case InputContinuousHydrationLane:
+      return_highestLanePriority = InputContinuousHydrationLanePriority;
+      return InputContinuousHydrationLane;
+    case InputContinuousLane:
+      return_highestLanePriority = InputContinuousLanePriority;
+      return InputContinuousLane;
+    case DefaultHydrationLane:
+      return_highestLanePriority = DefaultHydrationLanePriority;
+      return DefaultHydrationLane;
+    case DefaultLane:
+      return_highestLanePriority = DefaultLanePriority;
+      return DefaultLane;
+    case TransitionHydrationLane:
+      return_highestLanePriority = TransitionHydrationPriority;
+      return TransitionHydrationLane;
+    case TransitionLane1:
+    case TransitionLane2:
+    case TransitionLane3:
+    case TransitionLane4:
+    case TransitionLane5:
+    case TransitionLane6:
+    case TransitionLane7:
+    case TransitionLane8:
+    case TransitionLane9:
+      return_highestLanePriority = TransitionPriority;
+      return lanes & TransitionLanes;
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+      return_highestLanePriority = RetryLanePriority;
+      return lanes & RetryLanes;
+    case SelectiveHydrationLane:
+      return_highestLanePriority = SelectiveHydrationLanePriority;
+      return SelectiveHydrationLane;
+    case IdleHydrationLane:
+      return_highestLanePriority = IdleHydrationLanePriority;
+      return IdleHydrationLane;
+    case IdleLane:
+      return_highestLanePriority = IdleLanePriority;
+      return IdleLane;
+    case OffscreenLane:
+      return_highestLanePriority = OffscreenLanePriority;
+      return OffscreenLane;
+    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_highestLanePriority = DefaultLanePriority;
+      return lanes;
   }
-  // This shouldn't be reachable, but as a fallback, return the entire bitmask.
-  return_highestLanePriority = DefaultLanePriority;
-  return lanes;
 }
 
 export function schedulerPriorityToLanePriority(
@@ -516,20 +522,17 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
       return SyncLane;
     case SyncBatchedLanePriority:
       return SyncBatchedLane;
-    case InputDiscreteLanePriority: {
-      return pickArbitraryLane(InputDiscreteLanes);
-    }
-    case InputContinuousLanePriority: {
-      return pickArbitraryLane(InputContinuousLanes);
-    }
-    case DefaultLanePriority: {
-      return pickArbitraryLane(DefaultLanes);
-    }
+    case InputDiscreteLanePriority:
+      return InputDiscreteLane;
+    case InputContinuousLanePriority:
+      return InputContinuousLane;
+    case DefaultLanePriority:
+      return DefaultLane;
     case TransitionPriority: // Should be handled by findTransitionLane instead
     case RetryLanePriority: // Should be handled by findRetryLane instead
       break;
     case IdleLanePriority:
-      return pickArbitraryLane(IdleLanes);
+      return IdleLane;
     default:
       // The remaining priorities are not valid for updates
       break;
@@ -549,7 +552,7 @@ export function claimNextTransitionLane(): Lane {
   const lane = nextTransitionLane;
   nextTransitionLane <<= 1;
   if ((nextTransitionLane & TransitionLanes) === 0) {
-    nextTransitionLane = FirstTransitionLane;
+    nextTransitionLane = TransitionLane1;
   }
   return lane;
 }
@@ -558,7 +561,7 @@ export function claimNextRetryLane(): Lane {
   const lane = nextRetryLane;
   nextRetryLane <<= 1;
   if ((nextRetryLane & RetryLanes) === 0) {
-    nextRetryLane = FirstRetryLane;
+    nextRetryLane = RetryLane1;
   }
   return lane;
 }
@@ -650,7 +653,7 @@ export function markRootUpdated(
   // 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 & IdleLanes) === NoLanes) {
+  if (updateLane !== IdleLane) {
     root.suspendedLanes = NoLanes;
     root.pingedLanes = NoLanes;
   }
@@ -692,11 +695,13 @@ export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
 }
 
 export function markDiscreteUpdatesExpired(root: FiberRoot) {
-  root.expiredLanes |= InputDiscreteLanes & root.pendingLanes;
+  if (root.pendingLanes & InputDiscreteLane) {
+    root.expiredLanes |= InputDiscreteLane;
+  }
 }
 
 export function hasDiscreteLanes(lanes: Lanes) {
-  return (lanes & InputDiscreteLanes) !== NoLanes;
+  return (lanes & InputDiscreteLane) !== NoLanes;
 }
 
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {

From 114ab52953bea3d78785e25300e70cce56f307e9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 18:25:33 -0600
Subject: [PATCH 0257/1603] Make remaining empty lanes Transition lanes
 (#20793)

Doesn't really have any effect now because we batch everything together
anyway but will allow for more parallelism once we support that.
---
 .../src/ReactFiberLane.new.js                 | 64 ++++++++-------
 .../src/ReactFiberLane.old.js                 | 64 ++++++++-------
 .../__tests__/DebugTracing-test.internal.js   | 61 +++++++-------
 .../SchedulingProfiler-test.internal.js       | 81 ++++++++++---------
 4 files changed, 148 insertions(+), 122 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 20f89cc8dfe0..518db911ad82 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -87,38 +87,43 @@ export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000
 export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
 const InputDiscreteLane: Lanes = /*                     */ 0b0000000000000000000000000001000;
 
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000;
-const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000001000000;
-
-export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000001000000000;
-
-const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
-const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
-const TransitionLane1: Lane = /*                        */ 0b0000000000000000010000000000000;
-const TransitionLane2: Lane = /*                        */ 0b0000000000000000100000000000000;
-const TransitionLane3: Lane = /*                        */ 0b0000000000000001000000000000000;
-const TransitionLane4: Lane = /*                        */ 0b0000000000000010000000000000000;
-const TransitionLane5: Lane = /*                        */ 0b0000000000000100000000000000000;
-const TransitionLane6: Lane = /*                        */ 0b0000000000001000000000000000000;
-const TransitionLane7: Lane = /*                        */ 0b0000000000010000000000000000000;
-const TransitionLane8: Lane = /*                        */ 0b0000000000100000000000000000000;
-const TransitionLane9: Lane = /*                        */ 0b0000000001000000000000000000000;
-
-const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
-const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
-const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
-const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
-const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
+const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000010000;
+const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000000100000;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
+
+const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111100000000;
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000100000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000000001000000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000000010000000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000000000100000000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000000001000000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000000001000000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000000010000000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000000000100000000000000000;
+const TransitionLane10: Lane = /*                       */ 0b0000000000001000000000000000000;
+const TransitionLane11: Lane = /*                       */ 0b0000000000010000000000000000000;
+const TransitionLane12: Lane = /*                       */ 0b0000000000100000000000000000000;
+const TransitionLane13: Lane = /*                       */ 0b0000000001000000000000000000000;
+const TransitionLane14: Lane = /*                       */ 0b0000000010000000000000000000000;
+
+const RetryLanes: Lanes = /*                            */ 0b0000111100000000000000000000000;
+const RetryLane1: Lane = /*                             */ 0b0000000100000000000000000000000;
+const RetryLane2: Lane = /*                             */ 0b0000001000000000000000000000000;
+const RetryLane3: Lane = /*                             */ 0b0000010000000000000000000000000;
+const RetryLane4: Lane = /*                             */ 0b0000100000000000000000000000000;
 
 export const SomeRetryLane: Lane = RetryLane1;
 
-export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
+export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000000000000000;
 
-const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111;
+const NonIdleLanes = /*                                 */ 0b0001111111111111111111111111111;
 
-export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
-const IdleLane: Lanes = /*                              */ 0b0010000000000000000000000000000;
+export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
+const IdleLane: Lanes = /*                              */ 0b0100000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
@@ -179,6 +184,11 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane7:
     case TransitionLane8:
     case TransitionLane9:
+    case TransitionLane10:
+    case TransitionLane11:
+    case TransitionLane12:
+    case TransitionLane13:
+    case TransitionLane14:
       return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 6d452ab67b9c..1b1f12c14861 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -87,38 +87,43 @@ export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000
 export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
 const InputDiscreteLane: Lanes = /*                     */ 0b0000000000000000000000000001000;
 
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000100000;
-const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000001000000;
-
-export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000100000000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000001000000000;
-
-const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000001000000000000;
-const TransitionLanes: Lanes = /*                       */ 0b0000000001111111110000000000000;
-const TransitionLane1: Lane = /*                        */ 0b0000000000000000010000000000000;
-const TransitionLane2: Lane = /*                        */ 0b0000000000000000100000000000000;
-const TransitionLane3: Lane = /*                        */ 0b0000000000000001000000000000000;
-const TransitionLane4: Lane = /*                        */ 0b0000000000000010000000000000000;
-const TransitionLane5: Lane = /*                        */ 0b0000000000000100000000000000000;
-const TransitionLane6: Lane = /*                        */ 0b0000000000001000000000000000000;
-const TransitionLane7: Lane = /*                        */ 0b0000000000010000000000000000000;
-const TransitionLane8: Lane = /*                        */ 0b0000000000100000000000000000000;
-const TransitionLane9: Lane = /*                        */ 0b0000000001000000000000000000000;
-
-const RetryLanes: Lanes = /*                            */ 0b0000011110000000000000000000000;
-const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
-const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
-const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
-const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
+const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000010000;
+const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000000100000;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
+
+const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111100000000;
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000100000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000000001000000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000000010000000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000000000100000000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000000001000000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000000001000000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000000010000000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000000000100000000000000000;
+const TransitionLane10: Lane = /*                       */ 0b0000000000001000000000000000000;
+const TransitionLane11: Lane = /*                       */ 0b0000000000010000000000000000000;
+const TransitionLane12: Lane = /*                       */ 0b0000000000100000000000000000000;
+const TransitionLane13: Lane = /*                       */ 0b0000000001000000000000000000000;
+const TransitionLane14: Lane = /*                       */ 0b0000000010000000000000000000000;
+
+const RetryLanes: Lanes = /*                            */ 0b0000111100000000000000000000000;
+const RetryLane1: Lane = /*                             */ 0b0000000100000000000000000000000;
+const RetryLane2: Lane = /*                             */ 0b0000001000000000000000000000000;
+const RetryLane3: Lane = /*                             */ 0b0000010000000000000000000000000;
+const RetryLane4: Lane = /*                             */ 0b0000100000000000000000000000000;
 
 export const SomeRetryLane: Lane = RetryLane1;
 
-export const SelectiveHydrationLane: Lane = /*          */ 0b0000100000000000000000000000000;
+export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000000000000000;
 
-const NonIdleLanes = /*                                 */ 0b0000111111111111111111111111111;
+const NonIdleLanes = /*                                 */ 0b0001111111111111111111111111111;
 
-export const IdleHydrationLane: Lane = /*               */ 0b0001000000000000000000000000000;
-const IdleLane: Lanes = /*                              */ 0b0010000000000000000000000000000;
+export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
+const IdleLane: Lanes = /*                              */ 0b0100000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
@@ -179,6 +184,11 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane7:
     case TransitionLane8:
     case TransitionLane9:
+    case TransitionLane10:
+    case TransitionLane11:
+    case TransitionLane12:
+    case TransitionLane13:
+    case TransitionLane14:
       return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 0fd0a6722d51..963660e39ca4 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -16,6 +16,9 @@ describe('DebugTracing', () => {
 
   let logs;
 
+  const DEFAULT_LANE_STRING = '0b0000000000000000000000010000000';
+  const RETRY_LANE_STRING = '0b0000000100000000000000000000000';
+
   beforeEach(() => {
     jest.resetModules();
 
@@ -129,9 +132,9 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000000010000000000000000000000)',
+      `group: ⚛️ render (${RETRY_LANE_STRING})`,
       'log: <Example/>',
-      'groupEnd: ⚛️ render (0b0000000010000000000000000000000)',
+      `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
     ]);
   });
 
@@ -158,9 +161,9 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000000000000000000001000000000)',
+      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: ⚛️ Example suspended',
-      'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
+      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
     ]);
 
     logs.splice(0);
@@ -199,9 +202,9 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000000000000000000001000000000)',
+      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: <Wrapper/>',
-      'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
+      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
     ]);
 
     logs.splice(0);
@@ -209,9 +212,9 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000000010000000000000000000000)',
+      `group: ⚛️ render (${RETRY_LANE_STRING})`,
       'log: <Example/>',
-      'groupEnd: ⚛️ render (0b0000000010000000000000000000000)',
+      `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
     ]);
   });
 
@@ -241,11 +244,11 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ commit (0b0000000000000000000001000000000)',
-      'group: ⚛️ layout effects (0b0000000000000000000001000000000)',
+      `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
+      `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
       'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
-      'groupEnd: ⚛️ layout effects (0b0000000000000000000001000000000)',
-      'groupEnd: ⚛️ commit (0b0000000000000000000001000000000)',
+      `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -277,10 +280,10 @@ describe('DebugTracing', () => {
     }).toErrorDev('Cannot update during an existing state transition');
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000000000000000000001000000000)',
-      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
-      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
-      'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
+      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
+      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -308,11 +311,11 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ commit (0b0000000000000000000001000000000)',
-      'group: ⚛️ layout effects (0b0000000000000000000001000000000)',
+      `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
+      `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
       'log: ⚛️ Example updated state (0b0000000000000000000000000000001)',
-      'groupEnd: ⚛️ layout effects (0b0000000000000000000001000000000)',
-      'groupEnd: ⚛️ commit (0b0000000000000000000001000000000)',
+      `groupEnd: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛️ commit (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -335,9 +338,9 @@ describe('DebugTracing', () => {
       );
     });
     expect(logs).toEqual([
-      'group: ⚛️ passive effects (0b0000000000000000000001000000000)',
-      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
-      'groupEnd: ⚛️ passive effects (0b0000000000000000000001000000000)',
+      `group: ⚛️ passive effects (${DEFAULT_LANE_STRING})`,
+      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
+      `groupEnd: ⚛️ passive effects (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -361,10 +364,10 @@ describe('DebugTracing', () => {
     });
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000000000000000000001000000000)',
-      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)',
-      'log: ⚛️ Example updated state (0b0000000000000000000001000000000)', // debugRenderPhaseSideEffectsForStrictMode
-      'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
+      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
+      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
+      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`, // debugRenderPhaseSideEffectsForStrictMode
+      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
@@ -389,9 +392,9 @@ describe('DebugTracing', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expect(logs).toEqual([
-      'group: ⚛️ render (0b0000000000000000000001000000000)',
+      `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: Hello from user code',
-      'groupEnd: ⚛️ render (0b0000000000000000000001000000000)',
+      `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
     ]);
   });
 
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 433f312fc709..dd3528da50fe 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -85,6 +85,9 @@ describe('SchedulingProfiler', () => {
     delete global.performance;
   });
 
+  // This is coupled to implementation
+  const DEFAULT_LANE = 128;
+
   // @gate !enableSchedulingProfiler
   it('should not mark if enableSchedulingProfiler is false', () => {
     ReactTestRenderer.create(<div />);
@@ -118,7 +121,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -126,10 +129,10 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      '--render-start-512',
+      `--render-start-${DEFAULT_LANE}`,
       '--render-stop',
-      '--commit-start-512',
-      '--layout-effects-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
+      `--layout-effects-start-${DEFAULT_LANE}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -153,8 +156,8 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
-      '--render-start-512',
+      `--schedule-render-${DEFAULT_LANE}`,
+      `--render-start-${DEFAULT_LANE}`,
       '--render-yield',
     ]);
   });
@@ -237,7 +240,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -245,11 +248,11 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      '--render-start-512',
+      `--render-start-${DEFAULT_LANE}`,
       '--suspense-suspend-0-Example',
       '--render-stop',
-      '--commit-start-512',
-      '--layout-effects-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
+      `--layout-effects-start-${DEFAULT_LANE}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -276,7 +279,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -284,11 +287,11 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      '--render-start-512',
+      `--render-start-${DEFAULT_LANE}`,
       '--suspense-suspend-0-Example',
       '--render-stop',
-      '--commit-start-512',
-      '--layout-effects-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
+      `--layout-effects-start-${DEFAULT_LANE}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -315,7 +318,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -323,10 +326,10 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      '--render-start-512',
+      `--render-start-${DEFAULT_LANE}`,
       '--render-stop',
-      '--commit-start-512',
-      '--layout-effects-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
+      `--layout-effects-start-${DEFAULT_LANE}`,
       '--schedule-state-update-1-Example',
       '--layout-effects-stop',
       '--render-start-1',
@@ -352,7 +355,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -360,10 +363,10 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      '--render-start-512',
+      `--render-start-${DEFAULT_LANE}`,
       '--render-stop',
-      '--commit-start-512',
-      '--layout-effects-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
+      `--layout-effects-start-${DEFAULT_LANE}`,
       '--schedule-forced-update-1-Example',
       '--layout-effects-stop',
       '--render-start-1',
@@ -390,7 +393,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -399,7 +402,7 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    expectMarksToContain('--schedule-state-update-512-Example');
+    expectMarksToContain(`--schedule-state-update-${DEFAULT_LANE}-Example`);
   });
 
   // @gate enableSchedulingProfiler
@@ -418,7 +421,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -427,7 +430,7 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    expectMarksToContain('--schedule-forced-update-512-Example');
+    expectMarksToContain(`--schedule-forced-update-${DEFAULT_LANE}-Example`);
   });
 
   // @gate enableSchedulingProfiler
@@ -444,7 +447,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
+      `--schedule-render-${DEFAULT_LANE}`,
     ]);
 
     clearPendingMarks();
@@ -452,10 +455,10 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      '--render-start-512',
+      `--render-start-${DEFAULT_LANE}`,
       '--render-stop',
-      '--commit-start-512',
-      '--layout-effects-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
+      `--layout-effects-start-${DEFAULT_LANE}`,
       '--schedule-state-update-1-Example',
       '--layout-effects-stop',
       '--render-start-1',
@@ -484,19 +487,19 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-512',
-      '--render-start-512',
+      `--schedule-render-${DEFAULT_LANE}`,
+      `--render-start-${DEFAULT_LANE}`,
       '--render-stop',
-      '--commit-start-512',
-      '--layout-effects-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
+      `--layout-effects-start-${DEFAULT_LANE}`,
       '--layout-effects-stop',
       '--commit-stop',
-      '--passive-effects-start-512',
-      '--schedule-state-update-512-Example',
+      `--passive-effects-start-${DEFAULT_LANE}`,
+      `--schedule-state-update-${DEFAULT_LANE}-Example`,
       '--passive-effects-stop',
-      '--render-start-512',
+      `--render-start-${DEFAULT_LANE}`,
       '--render-stop',
-      '--commit-start-512',
+      `--commit-start-${DEFAULT_LANE}`,
       '--commit-stop',
     ]);
   });
@@ -515,6 +518,6 @@ describe('SchedulingProfiler', () => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
-    expectMarksToContain('--schedule-state-update-512-Example');
+    expectMarksToContain(`--schedule-state-update-${DEFAULT_LANE}-Example`);
   });
 });

From 47dd9f44133845febfcb4f04c76cf9961131b2d2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 10 Feb 2021 22:03:50 -0600
Subject: [PATCH 0258/1603] Remove fakeCallbackNode (#20799)

Don't need this, because sync tasks are never cancelled. We can do the
same thing we do for microtask callbacks.
---
 .../react-reconciler/src/ReactFiberWorkLoop.new.js     | 10 ++++------
 .../react-reconciler/src/ReactFiberWorkLoop.old.js     | 10 ++++------
 .../src/SchedulerWithReactIntegration.new.js           |  9 +++------
 .../src/SchedulerWithReactIntegration.old.js           |  9 +++------
 4 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 490a195e1b78..715e9bd6abcb 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -726,7 +726,8 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       // TODO: Temporary until we confirm this warning is not fired.
       if (
         existingCallbackNode == null &&
-        existingCallbackPriority !== InputDiscreteLanePriority
+        existingCallbackPriority !== InputDiscreteLanePriority &&
+        existingCallbackPriority !== SyncLanePriority
       ) {
         console.error(
           'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -747,11 +748,8 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   if (newCallbackPriority === SyncLanePriority) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
-
-    // TODO: After enableDiscreteEventMicroTasks lands, we can remove the fake node.
-    newCallbackNode = scheduleSyncCallback(
-      performSyncWorkOnRoot.bind(null, root),
-    );
+    scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    newCallbackNode = null;
   } else if (newCallbackPriority === SyncBatchedLanePriority) {
     newCallbackNode = scheduleCallback(
       ImmediateSchedulerPriority,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index f7ae0f9a9401..c8eb6a08eeba 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -726,7 +726,8 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       // TODO: Temporary until we confirm this warning is not fired.
       if (
         existingCallbackNode == null &&
-        existingCallbackPriority !== InputDiscreteLanePriority
+        existingCallbackPriority !== InputDiscreteLanePriority &&
+        existingCallbackPriority !== SyncLanePriority
       ) {
         console.error(
           'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -747,11 +748,8 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   if (newCallbackPriority === SyncLanePriority) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
-
-    // TODO: After enableDiscreteEventMicroTasks lands, we can remove the fake node.
-    newCallbackNode = scheduleSyncCallback(
-      performSyncWorkOnRoot.bind(null, root),
-    );
+    scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    newCallbackNode = null;
   } else if (newCallbackPriority === SyncBatchedLanePriority) {
     newCallbackNode = scheduleCallback(
       ImmediateSchedulerPriority,
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 36fdf3938128..36dbc704fc7c 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -57,8 +57,6 @@ export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
 
 type SchedulerCallbackOptions = {timeout?: number, ...};
 
-const fakeCallbackNode = {};
-
 // Except for NoPriority, these correspond to Scheduler priorities. We use
 // ascending numbers so we can compare them like numbers. They start at 90 to
 // avoid clashing with Scheduler's priorities.
@@ -147,6 +145,8 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   if (syncQueue === null) {
     syncQueue = [callback];
     // Flush the queue in the next tick, at the earliest.
+    // TODO: Figure out how to remove this It's only here as a last resort if we
+    // forget to explicitly flush.
     immediateQueueCallbackNode = Scheduler_scheduleCallback(
       Scheduler_ImmediatePriority,
       flushSyncCallbackQueueImpl,
@@ -156,13 +156,10 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
     // we already scheduled one when we created the queue.
     syncQueue.push(callback);
   }
-  return fakeCallbackNode;
 }
 
 export function cancelCallback(callbackNode: mixed) {
-  if (callbackNode !== fakeCallbackNode) {
-    Scheduler_cancelCallback(callbackNode);
-  }
+  Scheduler_cancelCallback(callbackNode);
 }
 
 export function flushSyncCallbackQueue() {
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 4a44229ac524..1d309df4020f 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -57,8 +57,6 @@ export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
 
 type SchedulerCallbackOptions = {timeout?: number, ...};
 
-const fakeCallbackNode = {};
-
 // Except for NoPriority, these correspond to Scheduler priorities. We use
 // ascending numbers so we can compare them like numbers. They start at 90 to
 // avoid clashing with Scheduler's priorities.
@@ -147,6 +145,8 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   if (syncQueue === null) {
     syncQueue = [callback];
     // Flush the queue in the next tick, at the earliest.
+    // TODO: Figure out how to remove this It's only here as a last resort if we
+    // forget to explicitly flush.
     immediateQueueCallbackNode = Scheduler_scheduleCallback(
       Scheduler_ImmediatePriority,
       flushSyncCallbackQueueImpl,
@@ -156,13 +156,10 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
     // we already scheduled one when we created the queue.
     syncQueue.push(callback);
   }
-  return fakeCallbackNode;
 }
 
 export function cancelCallback(callbackNode: mixed) {
-  if (callbackNode !== fakeCallbackNode) {
-    Scheduler_cancelCallback(callbackNode);
-  }
+  Scheduler_cancelCallback(callbackNode);
 }
 
 export function flushSyncCallbackQueue() {

From 6cdc35972d59d08451a529f1ee29787851f0e583 Mon Sep 17 00:00:00 2001
From: neroneroffy <haitaocapslock@outlook.com>
Date: Thu, 11 Feb 2021 12:26:26 +0800
Subject: [PATCH 0259/1603] fix comments of markUpdateLaneFromFiberToRoot
 (#20546)

---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 715e9bd6abcb..b21e951cbc85 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -645,7 +645,7 @@ function markUpdateLaneFromFiberToRoot(
       warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
     }
   }
-  // Walk the parent path to the root and update the child expiration time.
+  // Walk the parent path to the root and update the child lanes.
   let node = sourceFiber;
   let parent = sourceFiber.return;
   while (parent !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c8eb6a08eeba..c700acc4efe5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -645,7 +645,7 @@ function markUpdateLaneFromFiberToRoot(
       warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
     }
   }
-  // Walk the parent path to the root and update the child expiration time.
+  // Walk the parent path to the root and update the child lanes.
   let node = sourceFiber;
   let parent = sourceFiber.return;
   while (parent !== null) {

From 67e84198239c3734784c9604d23c93af37b3cb27 Mon Sep 17 00:00:00 2001
From: Max Donchenko <wereya2@yandex.ru>
Date: Thu, 11 Feb 2021 06:34:07 +0200
Subject: [PATCH 0260/1603] Request to update email (#20533)

---
 AUTHORS | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/AUTHORS b/AUTHORS
index f70e33a4226d..a243f681bede 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -671,7 +671,7 @@ Matthew Shotton <matthew.shotton@bbc.co.uk>
 Matthias Le Brun <mlbli@me.com>
 Matti Nelimarkka <matti.nelimarkka@hiit.fi>
 Mattijs Kneppers <mattijs@arttech.nl>
-Max Donchenko <wereya2@yandex.ru>
+Max Donchenko <maxx.donchenko@gmail.com>
 Max F. Albrecht <1@178.is>
 Max Heiber <max.heiber@gmail.com>
 Max Stoiber <contact@mstoiber.com>

From 4c5275fec75a95e38a77f5fcfbca7c68043d178e Mon Sep 17 00:00:00 2001
From: Matt Wood <m.wood0904@gmail.com>
Date: Wed, 10 Feb 2021 22:35:24 -0600
Subject: [PATCH 0261/1603] Fix typo in comment for react-devtools-shared
 (#20459)

---
 .../src/backend/views/Highlighter/index.js                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
index 1278619c5b07..1f3b8974b657 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -15,7 +15,7 @@ import {hideOverlay, showOverlay} from './Highlighter';
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 
 // This plug-in provides in-page highlighting of the selected element.
-// It is used by the browser extension nad the standalone DevTools shell (when connected to a browser).
+// It is 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.
 

From 78ec97d34aebce8a9970c5ee0df76cd3399d6e60 Mon Sep 17 00:00:00 2001
From: inokawa <48897392+inokawa@users.noreply.github.com>
Date: Thu, 11 Feb 2021 13:35:41 +0900
Subject: [PATCH 0262/1603] Fix typo (#20466)

---
 packages/react-reconciler/src/ReactFiberCompleteWork.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberCompleteWork.old.js | 2 +-
 packages/react/src/__tests__/ReactProfiler-test.internal.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 378c0006c33b..47f65d2da6ef 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1059,7 +1059,7 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtreee is running in blocking mode we can suspend,
+        // If this subtree is running in blocking mode we can suspend,
         // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 55c576491036..df878d24e76a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1059,7 +1059,7 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtreee is running in blocking mode we can suspend,
+        // If this subtree is running in blocking mode we can suspend,
         // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 4a1853c46c28..a2e27073a3f7 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -778,7 +778,7 @@ describe('Profiler', () => {
           },
         );
 
-        // Flush sync work with a nested upate
+        // Flush sync work with a nested update
         ReactNoop.flushSync(() => {
           ReactNoop.render(
             <React.Profiler id="root" onRender={onRender}>

From 483358c38f8623358dd44a3e57476bc02e6357bc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 11 Feb 2021 00:07:19 -0600
Subject: [PATCH 0263/1603] Omit TransitionHydrationLane from TransitionLanes
 (#20802)

Follow up to #20793

I don't this makes any observable difference, but this is how it was
before so might as well be consistent just in case.
---
 packages/react-reconciler/src/ReactFiberLane.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberLane.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 518db911ad82..e4280582e80c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -93,8 +93,8 @@ const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
 export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
 
-const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111100000000;
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000100000000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111000000000;
 const TransitionLane1: Lane = /*                        */ 0b0000000000000000000001000000000;
 const TransitionLane2: Lane = /*                        */ 0b0000000000000000000010000000000;
 const TransitionLane3: Lane = /*                        */ 0b0000000000000000000100000000000;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 1b1f12c14861..fe7d6eb7508c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -93,8 +93,8 @@ const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
 export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
 
-const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111100000000;
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000100000000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111000000000;
 const TransitionLane1: Lane = /*                        */ 0b0000000000000000000001000000000;
 const TransitionLane2: Lane = /*                        */ 0b0000000000000000000010000000000;
 const TransitionLane3: Lane = /*                        */ 0b0000000000000000000100000000000;

From 696e736be11b22e8d4fa40438d235b63db7fddde Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 11 Feb 2021 16:20:46 -0600
Subject: [PATCH 0264/1603] Warn if static flag is accidentally cleared
 (#20807)

* Warn if static flag is accidentally cleared

"Static" fiber flags are flags that are meant to exist for the lifetime
of a component. It's really important not to accidentally reset these,
because we use them to decide whether or not to perform some operation
on a tree (which we can do because they get bubbled via `subtreeFlags)`.

We've had several bugs that were caused by this mistake, so we actually
don't rely on static flags anywhere, yet. But we'd like to.

So let's roll out this warning and see if it fires anywhere. Once we
can confirm that there are no warnings, we can assume that it's safe
to start using static flags.

I did not wrap it behind a feature flag, because it's dev-only, and we
can use our internal warning filter to hide this from the console.

* Intentionally clear static flag to test warning

* ...and fix it again
---
 .../react-reconciler/src/ReactFiberHooks.new.js   | 15 +++++++++++++++
 .../react-reconciler/src/ReactFiberHooks.old.js   | 15 +++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index cc5a8b00563b..32144cc1b050 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -471,6 +471,21 @@ export function renderWithHooks<Props, SecondArg>(
     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 & PassiveStaticEffect) !==
+        (workInProgress.flags & PassiveStaticEffect)
+    ) {
+      console.error(
+        'Internal React error: Expected static flag was missing. Please ' +
+          'notify the React team.',
+      );
+    }
   }
 
   didScheduleRenderPhaseUpdate = false;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index b5eefde63f71..ce0ac3663656 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -471,6 +471,21 @@ export function renderWithHooks<Props, SecondArg>(
     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 & PassiveStaticEffect) !==
+        (workInProgress.flags & PassiveStaticEffect)
+    ) {
+      console.error(
+        'Internal React error: Expected static flag was missing. Please ' +
+          'notify the React team.',
+      );
+    }
   }
 
   didScheduleRenderPhaseUpdate = false;

From 1a7472624661270008011fd77f097d71e6249de9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 12 Feb 2021 15:13:49 -0600
Subject: [PATCH 0265/1603] Add `supportsMicrotasks` to the host config
 (#20809)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add `supportsMicrotasks` to the host config

Only certain renderers support scheduling a microtask, so we need a
renderer specific flag that we can toggle. That way it's off for some
renderers and on for others.

I copied the approach we use for the other optional parts of the host
config, like persistent mode and test selectors.

Why isn't the feature flag sufficient?

The feature flag modules, confusingly, are not renderer-specific, at
least when running the our tests against the source files. They are
meant to correspond to a release channel, not a renderer, but we got
confused at some point and haven't cleaned it up.

For example, when we run `yarn test`, Jest loads the flags from the
default `ReactFeatureFlags.js` module, even when we import the React
Native renderer — but in the actual builds, we load a different feature
flag module, `ReactFeatureFlags.native-oss.js.` There's no way in our
current Jest load a different host config for each renderer, because
they all just import the same module. We should solve this by creating
separate Jest project for each renderer, so that the flags loaded when
running against source are the same ones that we use in the
compiled bundles.

The feature flag (`enableDiscreteMicrotasks`) still exists — it's used
to set the React DOM host config's `supportsMicrotasks` flag to `true`.
(Same for React Noop) The important part is that turning on the feature
flag does *not* affect the other renderers, like React Native.

The host config will likely outlive the feature flag, too, since the
feature flag only exists so we can gradually roll it out and measure the
impact in production; once we do, we'll remove it. Whereas the host
config flag may continue to be used to disable the discrete microtask
behavior for RN, because RN will likely use a native (non-JavaScript)
API to schedule its tasks.

* Add `supportsMicrotask` to react-reconciler README
---
 packages/react-art/src/ReactARTHostConfig.js  |  4 +--
 .../src/client/ReactDOMHostConfig.js          |  6 +++++
 .../src/ReactFabricHostConfig.js              |  4 +--
 .../src/ReactNativeHostConfig.js              |  4 +--
 .../src/createReactNoop.js                    |  7 ++++-
 packages/react-reconciler/README.md           |  5 +++-
 .../ReactFiberHostConfigWithNoMicrotasks.js   | 26 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.new.js             |  6 ++---
 .../src/ReactFiberWorkLoop.old.js             |  6 ++---
 .../src/forks/ReactFiberHostConfig.custom.js  |  8 +++++-
 .../src/ReactTestHostConfig.js                | 17 ++----------
 scripts/error-codes/codes.json                |  3 ++-
 12 files changed, 62 insertions(+), 34 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index de20fe5182c6..cadf311d54ff 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -249,6 +249,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 
 export function appendInitialChild(parentInstance, child) {
   if (typeof child === 'string') {
@@ -338,9 +339,6 @@ export function getChildHostContext() {
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
-export function scheduleMicrotask(callback: Function) {
-  invariant(false, 'Not implemented.');
-}
 
 export function shouldSetTextContent(type, props) {
   return (
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index aca426ce08ec..0f27a15db3d7 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -67,6 +67,7 @@ import {
   enableCreateEventHandleAPI,
   enableScopeAPI,
   enableNewReconciler,
+  enableDiscreteEventMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
@@ -399,6 +400,11 @@ export const scheduleTimeout: any =
 export const cancelTimeout: any =
   typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
 export const noTimeout = -1;
+
+// -------------------
+//     Microtasks
+// -------------------
+export const supportsMicrotasks = enableDiscreteEventMicroTasks;
 export const scheduleMicrotask: any =
   typeof queueMicrotask === 'function'
     ? queueMicrotask
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 27b7076377fc..e06652048e3d 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -193,6 +193,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMutation';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 
 export function appendInitialChild(
   parentInstance: Instance,
@@ -360,9 +361,6 @@ export const warnsIfNotActing = false;
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
-export function scheduleMicrotask(callback: Function) {
-  invariant(false, 'Not implemented.');
-}
 
 // -------------------
 //     Persistence
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 7f1135855628..d626a175d934 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -97,6 +97,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 
 export function appendInitialChild(
   parentInstance: Instance,
@@ -255,9 +256,6 @@ export const warnsIfNotActing = true;
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
 export const noTimeout = -1;
-export function scheduleMicrotask(callback: Function) {
-  invariant(false, 'Not implemented.');
-}
 
 export function shouldSetTextContent(type: string, props: Props): boolean {
   // TODO (bvaughn) Revisit this decision.
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 2aa0043d9e24..26c58ffd8445 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -27,7 +27,10 @@ import {
   LegacyRoot,
 } from 'react-reconciler/src/ReactRootTags';
 
-import {enableNativeEventPriorityInference} from 'shared/ReactFeatureFlags';
+import {
+  enableNativeEventPriorityInference,
+  enableDiscreteEventMicroTasks,
+} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 const {IsSomeRendererActing} = ReactSharedInternals;
@@ -372,6 +375,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     scheduleTimeout: setTimeout,
     cancelTimeout: clearTimeout,
     noTimeout: -1,
+
+    supportsMicrotasks: enableDiscreteEventMicroTasks,
     scheduleMicrotask:
       typeof queueMicrotask === 'function'
         ? queueMicrotask
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index ce5fddb0eea9..fd87321f27f4 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -203,9 +203,12 @@ You can proxy this to `clearTimeout` or its equivalent in your environment.
 
 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`.
 
+#### `supportsMicrotask`
+
+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)`
 
-You can proxy this to `queueMicrotask` or its equivalent in your environment.
+Optional. You can proxy this to `queueMicrotask` or its equivalent in your environment.
 
 #### `isPrimaryRenderer`
 
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
new file mode 100644
index 000000000000..4d8849486201
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import invariant from 'shared/invariant';
+
+// Renderers that don't support microtasks
+// can re-export everything from this module.
+
+function shim(...args: any) {
+  invariant(
+    false,
+    '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/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b21e951cbc85..6935bb4b1f18 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -93,8 +93,9 @@ import {
   warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
-  scheduleMicrotask,
   getCurrentEventPriority,
+  supportsMicrotasks,
+  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -219,7 +220,6 @@ import {
   syncNestedUpdateFlag,
 } from './ReactProfilerTimer.new';
 
-import {enableDiscreteEventMicroTasks} from 'shared/ReactFeatureFlags';
 // DEV stuff
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
@@ -756,7 +756,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       performSyncWorkOnRoot.bind(null, root),
     );
   } else if (
-    enableDiscreteEventMicroTasks &&
+    supportsMicrotasks &&
     newCallbackPriority === InputDiscreteLanePriority
   ) {
     scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c700acc4efe5..2b57becf8bd7 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -93,8 +93,9 @@ import {
   warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
-  scheduleMicrotask,
   getCurrentEventPriority,
+  supportsMicrotasks,
+  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -219,7 +220,6 @@ import {
   syncNestedUpdateFlag,
 } from './ReactProfilerTimer.old';
 
-import {enableDiscreteEventMicroTasks} from 'shared/ReactFeatureFlags';
 // DEV stuff
 import getComponentName from 'shared/getComponentName';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -756,7 +756,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       performSyncWorkOnRoot.bind(null, root),
     );
   } else if (
-    enableDiscreteEventMicroTasks &&
+    supportsMicrotasks &&
     newCallbackPriority === InputDiscreteLanePriority
   ) {
     scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 0e19b6b70414..a2f065102d05 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -54,7 +54,6 @@ export const shouldSetTextContent = $$$hostConfig.shouldSetTextContent;
 export const createTextInstance = $$$hostConfig.createTextInstance;
 export const scheduleTimeout = $$$hostConfig.scheduleTimeout;
 export const cancelTimeout = $$$hostConfig.cancelTimeout;
-export const scheduleMicrotask = $$$hostConfig.scheduleMicrotask;
 export const noTimeout = $$$hostConfig.noTimeout;
 export const now = $$$hostConfig.now;
 export const isPrimaryRenderer = $$$hostConfig.isPrimaryRenderer;
@@ -75,6 +74,13 @@ export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 
+// -------------------
+//      Microtasks
+//     (optional)
+// -------------------
+export const supportsMicrotasks = $$$hostConfig.supportsMicrotasks;
+export const scheduleMicrotask = $$$hostConfig.scheduleMicrotask;
+
 // -------------------
 //      Test selectors
 //     (optional)
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 60de8a05a17e..a787d31840af 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -58,6 +58,7 @@ export type RendererInspectionConfig = $ReadOnly<{||}>;
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
+export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 
 const NO_CONTEXT = {};
 const UPDATE_SIGNAL = {};
@@ -230,21 +231,7 @@ export const warnsIfNotActing = true;
 
 export const scheduleTimeout = setTimeout;
 export const cancelTimeout = clearTimeout;
-export const scheduleMicrotask =
-  typeof queueMicrotask === 'function'
-    ? queueMicrotask
-    : typeof Promise !== 'undefined'
-    ? (callback: Function) =>
-        Promise.resolve(null)
-          .then(callback)
-          .catch(handleErrorInNextTick)
-    : scheduleTimeout; // TODO: Determine the best fallback here.
-
-function handleErrorInNextTick(error) {
-  setTimeout(() => {
-    throw error;
-  });
-}
+
 export const noTimeout = -1;
 
 // -------------------
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index e758c79be2e5..c29a136a1e1e 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -373,5 +373,6 @@
   "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."
+  "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."
 }

From 6f8843837c4aec94d362560a021c3722d260f49f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 16 Feb 2021 00:04:13 -0600
Subject: [PATCH 0266/1603] [CI] Publish to release channels sequentially
 (#20827)

npm will sometimes fail if you try to concurrently publish two different
versions of the same package, even if they use different dist tags.

So instead of publishing to the Next and Experimental channels
simultaneously, we'll do them one after the other.

If we did want to speed up these publish workflows, we could paralellize
by package instead of by release channel.
---
 .circleci/config.yml | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 250a0d684962..1fc0990c6d5c 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -553,7 +553,11 @@ workflows:
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
-            - setup
+            # 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.
+            - Publish to Next channel
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: experimental
           dist_tag: experimental
@@ -581,7 +585,11 @@ workflows:
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
-            - setup
+            # 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.
+            - Publish to Next channel
           commit_sha: master
           release_channel: experimental
           dist_tag: experimental

From 9e8f3c89555e4a2a1877c27d710b4d4c1e069014 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 16 Feb 2021 10:31:24 -0600
Subject: [PATCH 0267/1603] [CI] Use constant commit sha (#20828)

When running the publish workflow, either via the command line or
via the daily cron job, we should use a constant SHA instead of
whatever happens to be at the head of the main branch at the time the
workflow is run.

The difference is subtle: currently, the SHA is read at runtime,
each time the workflow is run. With this change, the SHA is read right
before the workflow is created and passed in as a constant parameter.

In practical terms, this means if a workflow is re-run via the CircleCI
web UI, it will always re-run using the same commit SHA as the original
workflow, instead of fetching the latest SHA from GitHub, which may
have changed.

Also avoids a race condition where the head SHA changes in between the
Next publish job and the Experimental publish job.
---
 .circleci/config.yml                         | 4 ++--
 scripts/release/publish-using-ci-workflow.js | 9 +++++++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 1fc0990c6d5c..2cf2a93a8f06 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -579,7 +579,7 @@ workflows:
           name: Publish to Next channel
           requires:
             - setup
-          commit_sha: master
+          commit_sha: << pipeline.git.revision >>
           release_channel: stable
           dist_tag: next
       - publish_prerelease:
@@ -590,7 +590,7 @@ workflows:
             # different versions of the same package, even if they use different
             # dist tags.
             - Publish to Next channel
-          commit_sha: master
+          commit_sha: << pipeline.git.revision >>
           release_channel: experimental
           dist_tag: experimental
 
diff --git a/scripts/release/publish-using-ci-workflow.js b/scripts/release/publish-using-ci-workflow.js
index c9202baa2d7b..0bb6c7d0d6c2 100644
--- a/scripts/release/publish-using-ci-workflow.js
+++ b/scripts/release/publish-using-ci-workflow.js
@@ -77,14 +77,19 @@ async function pollUntilWorkflowFinishes(workflowID) {
 }
 
 async function main() {
+  const headCommitResponse = await fetch(
+    'https://api.github.com/repos/facebook/react/commits/master'
+  );
+  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: {
-          // TODO: Make commit SHA configurable
-          prerelease_commit_sha: 'master',
+          prerelease_commit_sha: headCommitSha,
         },
       }),
       headers: {

From e2fd460cca3b11fa0f5505f324043a9b2d9db894 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 16 Feb 2021 14:38:11 -0600
Subject: [PATCH 0268/1603] Bailout in sync task if work is not sync (#20813)

Because we don't cancel synchronous tasks, sometimes more than one
synchronous task ends up being scheduled. This is an artifact of the
fact that we have two different lanes that schedule sync tasks: discrete
and sync. So what can happen is that a discrete update gets scheduled,
then a sync update right after that. Because sync is encoded as higher
priority than discrete, we schedule a second sync task. And since we
don't cancel the first one, there are now two separate sync tasks.

As a next step, what we should do is merge InputDiscreteLane with
SyncLane, then (I believe) this extra bailout wouldn't be necessary,
because there's nothing higher priority than sync that would cause us to
cancel it. Though we may want to add logging to be sure.
---
 .../plugins/__tests__/SimpleEventPlugin-test.js    |  4 ++--
 .../react-reconciler/src/ReactFiberWorkLoop.new.js | 14 ++++++++++++++
 .../react-reconciler/src/ReactFiberWorkLoop.old.js | 14 ++++++++++++++
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 377fa61e507d..795eda90c83c 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -477,8 +477,8 @@ describe('SimpleEventPlugin', function() {
         // At the end, both counters should equal the total number of clicks
         expect(Scheduler).toHaveYielded([
           'High-pri count: 8, Low-pri count: 0',
-
-          // TODO: with cancellation, this required another flush?
+        ]);
+        expect(Scheduler).toFlushAndYield([
           'High-pri count: 8, Low-pri count: 8',
         ]);
       } else {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 6935bb4b1f18..918261a2e356 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1028,6 +1028,20 @@ function performSyncWorkOnRoot(root) {
     exitStatus = renderRootSync(root, lanes);
   } else {
     lanes = getNextLanes(root, NoLanes);
+    // Because we don't cancel synchronous tasks, sometimes more than one
+    // synchronous task ends up being scheduled. This is an artifact of the fact
+    // that we have two different lanes that schedule sync tasks: discrete and
+    // sync. If we had only one, then (I believe) this extra check wouldn't be
+    // necessary, because there's nothing higher priority than sync that would
+    // cause us to cancel it.
+    // TODO: Merge InputDiscreteLanePriority with SyncLanePriority, then delete
+    // this bailout.
+    if (supportsMicrotasks) {
+      const nextLanesPriority = returnNextLanesPriority();
+      if (nextLanesPriority < InputDiscreteLanePriority) {
+        return null;
+      }
+    }
     exitStatus = renderRootSync(root, lanes);
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 2b57becf8bd7..12ef384a4752 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1028,6 +1028,20 @@ function performSyncWorkOnRoot(root) {
     exitStatus = renderRootSync(root, lanes);
   } else {
     lanes = getNextLanes(root, NoLanes);
+    // Because we don't cancel synchronous tasks, sometimes more than one
+    // synchronous task ends up being scheduled. This is an artifact of the fact
+    // that we have two different lanes that schedule sync tasks: discrete and
+    // sync. If we had only one, then (I believe) this extra check wouldn't be
+    // necessary, because there's nothing higher priority than sync that would
+    // cause us to cancel it.
+    // TODO: Merge InputDiscreteLanePriority with SyncLanePriority, then delete
+    // this bailout.
+    if (supportsMicrotasks) {
+      const nextLanesPriority = returnNextLanesPriority();
+      if (nextLanesPriority < InputDiscreteLanePriority) {
+        return null;
+      }
+    }
     exitStatus = renderRootSync(root, lanes);
   }
 

From 09916479219a61ae86d2ec8ce159a161337b9007 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 17 Feb 2021 21:00:42 +0000
Subject: [PATCH 0269/1603] Use setImmediate when available over MessageChannel
 (#20834)

* Move direct port access into a function

* Fork based on presence of setImmediate

* Copy SchedulerDOM-test into another file

* Change the new test to use shimmed setImmediate

* Clarify comment

* Fix test to work with existing feature detection

* Add flags

* Disable OSS flag and skip tests

* Use VARIANT to reenable tests

* lol
---
 .../scheduler/src/SchedulerFeatureFlags.js    |   3 +
 .../SchedulerDOMSetImmediate-test.js          | 281 ++++++++++++++++++
 packages/scheduler/src/forks/SchedulerDOM.js  |  33 +-
 .../src/forks/SchedulerFeatureFlags.www.js    |   1 +
 scripts/jest/TestFlags.js                     |   5 +
 5 files changed, 318 insertions(+), 5 deletions(-)
 create mode 100644 packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js

diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index 848c299dd6df..bd47c158313c 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -9,3 +9,6 @@
 export const enableSchedulerDebugging = false;
 export const enableIsInputPending = false;
 export const enableProfiling = __PROFILE__;
+
+// TODO: enable to fix https://github.com/facebook/react/issues/20756.
+export const enableSetImmediate = __VARIANT__;
diff --git a/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js b/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js
new file mode 100644
index 000000000000..504fde846329
--- /dev/null
+++ b/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js
@@ -0,0 +1,281 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+'use strict';
+
+let Scheduler;
+let runtime;
+let performance;
+let cancelCallback;
+let scheduleCallback;
+let NormalPriority;
+
+// The Scheduler implementation uses browser APIs like `MessageChannel` and
+// `setTimeout` to schedule work on the main thread. Most of our tests treat
+// these as implementation details; however, the sequence and timing of these
+// APIs are not precisely specified, and can vary across browsers.
+//
+// To prevent regressions, we need the ability to simulate specific edge cases
+// that we may encounter in various browsers.
+//
+// This test suite mocks all browser methods used in our implementation. It
+// assumes as little as possible about the order and timing of events.
+describe('SchedulerDOMSetImmediate', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    // Un-mock scheduler
+    jest.mock('scheduler', () => require.requireActual('scheduler'));
+
+    runtime = installMockBrowserRuntime();
+    performance = global.performance;
+    Scheduler = require('scheduler');
+    cancelCallback = Scheduler.unstable_cancelCallback;
+    scheduleCallback = Scheduler.unstable_scheduleCallback;
+    NormalPriority = Scheduler.unstable_NormalPriority;
+  });
+
+  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;
+      },
+    };
+
+    const window = {};
+    global.window = window;
+
+    // TODO: Scheduler no longer requires these methods to be polyfilled. But
+    // maybe we want to continue warning if they don't exist, to preserve the
+    // option to rely on it in the future?
+    window.requestAnimationFrame = window.cancelAnimationFrame = () => {};
+
+    window.setTimeout = (cb, delay) => {
+      const id = timerIDCounter++;
+      log(`Set Timer`);
+      // TODO
+      return id;
+    };
+    window.clearTimeout = id => {
+      // TODO
+    };
+
+    // Unused: we expect setImmediate to be preferred.
+    global.MessageChannel = function() {
+      return {
+        port1: {},
+        port2: {
+          postMessage() {
+            throw Error('Should be unused');
+          },
+        },
+      };
+    };
+
+    let pendingSetImmediateCallback = null;
+    window.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,
+    };
+  }
+
+  // @gate enableSchedulerSetImmediate
+  it('task that finishes before deadline', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'Task']);
+  });
+
+  // @gate enableSchedulerSetImmediate
+  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',
+      'Yield at 5ms',
+      'Set Immediate',
+    ]);
+
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'Continuation']);
+  });
+
+  // @gate enableSchedulerSetImmediate
+  it('multiple tasks', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('A');
+    });
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('B');
+    });
+    runtime.assertLog(['Set Immediate']);
+    runtime.fireSetImmediate();
+    runtime.assertLog(['setImmediate Callback', 'A', 'B']);
+  });
+
+  // @gate enableSchedulerSetImmediate
+  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']);
+  });
+
+  // @gate enableSchedulerSetImmediate
+  it('cancels tasks', () => {
+    const task = scheduleCallback(NormalPriority, () => {
+      runtime.log('Task');
+    });
+    runtime.assertLog(['Set Immediate']);
+    cancelCallback(task);
+    runtime.assertLog([]);
+  });
+
+  // @gate enableSchedulerSetImmediate
+  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();
+    runtime.assertLog(['setImmediate Callback', 'Yay']);
+  });
+
+  // @gate enableSchedulerSetImmediate
+  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']);
+  });
+
+  // @gate enableSchedulerSetImmediate
+  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']);
+  });
+});
diff --git a/packages/scheduler/src/forks/SchedulerDOM.js b/packages/scheduler/src/forks/SchedulerDOM.js
index e872b3ae6590..6c7dc446c9a6 100644
--- a/packages/scheduler/src/forks/SchedulerDOM.js
+++ b/packages/scheduler/src/forks/SchedulerDOM.js
@@ -11,6 +11,7 @@
 import {
   enableSchedulerDebugging,
   enableProfiling,
+  enableSetImmediate,
 } from '../SchedulerFeatureFlags';
 
 import {push, pop, peek} from '../SchedulerMinHeap';
@@ -88,6 +89,7 @@ var isHostTimeoutScheduled = false;
 // Capture local references to native APIs, in case a polyfill overrides them.
 const setTimeout = window.setTimeout;
 const clearTimeout = window.clearTimeout;
+const setImmediate = window.setImmediate; // IE and Node.js + jsdom
 
 if (typeof console !== 'undefined') {
   // TODO: Scheduler no longer requires these methods to be polyfilled. But
@@ -533,7 +535,7 @@ const performWorkUntilDeadline = () => {
       if (hasMoreWork) {
         // If there's more work, schedule the next message event at the end
         // of the preceding one.
-        port.postMessage(null);
+        schedulePerformWorkUntilDeadline();
       } else {
         isMessageLoopRunning = false;
         scheduledHostCallback = null;
@@ -547,15 +549,36 @@ const performWorkUntilDeadline = () => {
   needsPaint = false;
 };
 
-const channel = new MessageChannel();
-const port = channel.port2;
-channel.port1.onmessage = performWorkUntilDeadline;
+let schedulePerformWorkUntilDeadline;
+if (enableSetImmediate && typeof setImmediate === '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 = () => {
+    setImmediate(performWorkUntilDeadline);
+  };
+} else {
+  const channel = new MessageChannel();
+  const port = channel.port2;
+  channel.port1.onmessage = performWorkUntilDeadline;
+  schedulePerformWorkUntilDeadline = () => {
+    port.postMessage(null);
+  };
+}
 
 function requestHostCallback(callback) {
   scheduledHostCallback = callback;
   if (!isMessageLoopRunning) {
     isMessageLoopRunning = true;
-    port.postMessage(null);
+    schedulePerformWorkUntilDeadline();
   }
 }
 
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index 9fd86c7f94b2..b6daf1420643 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -10,6 +10,7 @@ export const {
   enableIsInputPending,
   enableSchedulerDebugging,
   enableProfiling: enableProfilingFeatureFlag,
+  enableSetImmediate,
 } = require('SchedulerFeatureFlags');
 
 export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index d46a26fb942e..533d3703de01 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -55,6 +55,7 @@ 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');
 
   // TODO: This is a heuristic to detect the release channel by checking a flag
   // that is known to only be enabled in www. What we should do instead is set
@@ -89,6 +90,10 @@ function getTestFlags() {
       // tests, Jest doesn't expose the API correctly. Fix then remove
       // this override.
       enableCache: __EXPERIMENTAL__,
+
+      // This is from SchedulerFeatureFlags. Needed because there's no equivalent
+      // of ReactFeatureFlags-www.dynamic for it. Remove when enableSetImmediate is gone.
+      enableSchedulerSetImmediate: schedulerFeatureFlags.enableSetImmediate,
     },
     {
       get(flags, flagName) {

From 8fa0ccca0090acbf2d4717a19bc37e9443ba0bf8 Mon Sep 17 00:00:00 2001
From: Toru Kobayashi <koba0004@gmail.com>
Date: Thu, 18 Feb 2021 06:43:25 +0900
Subject: [PATCH 0270/1603] fix: use SharedArrayBuffer only when cross-origin
 isolation is enabled (#20831)

* fix: check cross-origin isolation for SharedArrayBuffer

* chore: remove unused a $FlowFixMe comment

* prettier
---
 packages/scheduler/src/SchedulerProfiling.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/scheduler/src/SchedulerProfiling.js b/packages/scheduler/src/SchedulerProfiling.js
index 810a5be22327..3036476afeeb 100644
--- a/packages/scheduler/src/SchedulerProfiling.js
+++ b/packages/scheduler/src/SchedulerProfiling.js
@@ -15,13 +15,18 @@ import {NoPriority} from './SchedulerPriorities';
 let runIdCounter: number = 0;
 let mainThreadIdCounter: number = 0;
 
+const isEnabledSharedArrayBuffer =
+  // $FlowFixMe Flow doesn't know about SharedArrayBuffer
+  typeof SharedArrayBuffer === 'function' &&
+  // We only use SharedArrayBuffer when cross origin isolation is enabled.
+  typeof window !== 'undefined' &&
+  window.crossOriginIsolated === true;
+
 const profilingStateSize = 4;
 export const sharedProfilingBuffer = enableProfiling
-  ? // $FlowFixMe Flow doesn't know about SharedArrayBuffer
-    typeof SharedArrayBuffer === 'function'
+  ? isEnabledSharedArrayBuffer
     ? new SharedArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT)
-    : // $FlowFixMe Flow doesn't know about ArrayBuffer
-    typeof ArrayBuffer === 'function'
+    : typeof ArrayBuffer === 'function'
     ? new ArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT)
     : null // Don't crash the init path on IE9
   : null;

From af3d52611da03ed0a99e4ed93d9e5dbfff7b9825 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Feb 2021 11:06:53 -0500
Subject: [PATCH 0271/1603] Disable (unstable) scheduler sampling profiler for
 OSS builds (#20832)

* Disabled Scheduler sampling profiler for OSS builds
* Added missing conditional feature flag around profiling calls
---
 packages/scheduler/src/SchedulerFeatureFlags.js           | 2 +-
 .../scheduler/src/__tests__/SchedulerProfiling-test.js    | 3 ++-
 packages/scheduler/src/forks/SchedulerDOM.js              | 8 ++++++--
 packages/scheduler/src/forks/SchedulerMock.js             | 8 ++++++--
 packages/scheduler/src/forks/SchedulerNoDOM.js            | 8 ++++++--
 packages/scheduler/src/forks/SchedulerPostTaskOnly.js     | 8 ++++++--
 6 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index bd47c158313c..e18c34d5a029 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -8,7 +8,7 @@
 
 export const enableSchedulerDebugging = false;
 export const enableIsInputPending = false;
-export const enableProfiling = __PROFILE__;
+export const enableProfiling = false;
 
 // TODO: enable to fix https://github.com/facebook/react/issues/20756.
 export const enableSetImmediate = __VARIANT__;
diff --git a/packages/scheduler/src/__tests__/SchedulerProfiling-test.js b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
index cf9f9c5ea8cd..b7828b14487f 100644
--- a/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
@@ -44,7 +44,8 @@ function priorityLevelToString(priorityLevel) {
 }
 
 describe('Scheduler', () => {
-  if (!__PROFILE__) {
+  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');
diff --git a/packages/scheduler/src/forks/SchedulerDOM.js b/packages/scheduler/src/forks/SchedulerDOM.js
index 6c7dc446c9a6..eb70af64d7d6 100644
--- a/packages/scheduler/src/forks/SchedulerDOM.js
+++ b/packages/scheduler/src/forks/SchedulerDOM.js
@@ -219,12 +219,16 @@ function workLoop(hasTimeRemaining, initialTime) {
       currentTask.callback = null;
       currentPriorityLevel = currentTask.priorityLevel;
       const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
-      markTaskRun(currentTask, currentTime);
+      if (enableProfiling) {
+        markTaskRun(currentTask, currentTime);
+      }
       const continuationCallback = callback(didUserCallbackTimeout);
       currentTime = getCurrentTime();
       if (typeof continuationCallback === 'function') {
         currentTask.callback = continuationCallback;
-        markTaskYield(currentTask, currentTime);
+        if (enableProfiling) {
+          markTaskYield(currentTask, currentTime);
+        }
       } else {
         if (enableProfiling) {
           markTaskCompleted(currentTask, currentTime);
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 9ec5504b243f..5d7b8c945bb6 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -183,12 +183,16 @@ function workLoop(hasTimeRemaining, initialTime) {
       currentTask.callback = null;
       currentPriorityLevel = currentTask.priorityLevel;
       const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
-      markTaskRun(currentTask, currentTime);
+      if (enableProfiling) {
+        markTaskRun(currentTask, currentTime);
+      }
       const continuationCallback = callback(didUserCallbackTimeout);
       currentTime = getCurrentTime();
       if (typeof continuationCallback === 'function') {
         currentTask.callback = continuationCallback;
-        markTaskYield(currentTask, currentTime);
+        if (enableProfiling) {
+          markTaskYield(currentTask, currentTime);
+        }
       } else {
         if (enableProfiling) {
           markTaskCompleted(currentTask, currentTime);
diff --git a/packages/scheduler/src/forks/SchedulerNoDOM.js b/packages/scheduler/src/forks/SchedulerNoDOM.js
index e1a4a5e946d3..35bf3bfbc940 100644
--- a/packages/scheduler/src/forks/SchedulerNoDOM.js
+++ b/packages/scheduler/src/forks/SchedulerNoDOM.js
@@ -185,12 +185,16 @@ function workLoop(hasTimeRemaining, initialTime) {
       currentTask.callback = null;
       currentPriorityLevel = currentTask.priorityLevel;
       const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
-      markTaskRun(currentTask, currentTime);
+      if (enableProfiling) {
+        markTaskRun(currentTask, currentTime);
+      }
       const continuationCallback = callback(didUserCallbackTimeout);
       currentTime = getCurrentTime();
       if (typeof continuationCallback === 'function') {
         currentTask.callback = continuationCallback;
-        markTaskYield(currentTask, currentTime);
+        if (enableProfiling) {
+          markTaskYield(currentTask, currentTime);
+        }
       } else {
         if (enableProfiling) {
           markTaskCompleted(currentTask, currentTime);
diff --git a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
index 8ee96e2d16e5..9f5674e24b2d 100644
--- a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
+++ b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
@@ -210,12 +210,16 @@ function workLoop(hasTimeRemaining, initialTime) {
       currentTask.callback = null;
       currentPriorityLevel = currentTask.priorityLevel;
       const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
-      markTaskRun(currentTask, currentTime);
+      if (enableProfiling) {
+        markTaskRun(currentTask, currentTime);
+      }
       const continuationCallback = callback(didUserCallbackTimeout);
       currentTime = getCurrentTime();
       if (typeof continuationCallback === 'function') {
         currentTask.callback = continuationCallback;
-        markTaskYield(currentTask, currentTime);
+        if (enableProfiling) {
+          markTaskYield(currentTask, currentTime);
+        }
       } else {
         if (enableProfiling) {
           markTaskCompleted(currentTask, currentTime);

From 8af27aeedbc6b00bc2ef49729fc84f116c70a27c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 18 Feb 2021 11:21:52 -0500
Subject: [PATCH 0272/1603] Remove scheduler sampling profiler shared array
 buffer (#20840)

No one has been using this data so there's no reason to collect it. Event log has been maintained and tests have been updated.
---
 .../scheduler/src/SchedulerFeatureFlags.js    |  2 +-
 packages/scheduler/src/SchedulerProfiling.js  | 56 -------------
 .../src/__tests__/SchedulerProfiling-test.js  | 78 ++++---------------
 packages/scheduler/src/forks/SchedulerDOM.js  |  2 -
 packages/scheduler/src/forks/SchedulerMock.js |  2 -
 .../scheduler/src/forks/SchedulerNoDOM.js     |  2 -
 .../src/forks/SchedulerPostTaskOnly.js        |  2 -
 7 files changed, 15 insertions(+), 129 deletions(-)

diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index e18c34d5a029..de51b058b168 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -8,7 +8,7 @@
 
 export const enableSchedulerDebugging = false;
 export const enableIsInputPending = false;
-export const enableProfiling = false;
+export const enableProfiling = __VARIANT__;
 
 // TODO: enable to fix https://github.com/facebook/react/issues/20756.
 export const enableSetImmediate = __VARIANT__;
diff --git a/packages/scheduler/src/SchedulerProfiling.js b/packages/scheduler/src/SchedulerProfiling.js
index 3036476afeeb..b31e27bbebf4 100644
--- a/packages/scheduler/src/SchedulerProfiling.js
+++ b/packages/scheduler/src/SchedulerProfiling.js
@@ -10,45 +10,9 @@
 import type {PriorityLevel} from './SchedulerPriorities';
 import {enableProfiling} from './SchedulerFeatureFlags';
 
-import {NoPriority} from './SchedulerPriorities';
-
 let runIdCounter: number = 0;
 let mainThreadIdCounter: number = 0;
 
-const isEnabledSharedArrayBuffer =
-  // $FlowFixMe Flow doesn't know about SharedArrayBuffer
-  typeof SharedArrayBuffer === 'function' &&
-  // We only use SharedArrayBuffer when cross origin isolation is enabled.
-  typeof window !== 'undefined' &&
-  window.crossOriginIsolated === true;
-
-const profilingStateSize = 4;
-export const sharedProfilingBuffer = enableProfiling
-  ? isEnabledSharedArrayBuffer
-    ? new SharedArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT)
-    : typeof ArrayBuffer === 'function'
-    ? new ArrayBuffer(profilingStateSize * Int32Array.BYTES_PER_ELEMENT)
-    : null // Don't crash the init path on IE9
-  : null;
-
-const profilingState =
-  enableProfiling && sharedProfilingBuffer !== null
-    ? new Int32Array(sharedProfilingBuffer)
-    : []; // We can't read this but it helps save bytes for null checks
-
-const PRIORITY = 0;
-const CURRENT_TASK_ID = 1;
-const CURRENT_RUN_ID = 2;
-const QUEUE_SIZE = 3;
-
-if (enableProfiling) {
-  profilingState[PRIORITY] = NoPriority;
-  // This is maintained with a counter, because the size of the priority queue
-  // array might include canceled tasks.
-  profilingState[QUEUE_SIZE] = 0;
-  profilingState[CURRENT_TASK_ID] = 0;
-}
-
 // Bytes per element is 4
 const INITIAL_EVENT_LOG_SIZE = 131072;
 const MAX_EVENT_LOG_SIZE = 524288; // Equivalent to 2 megabytes
@@ -116,8 +80,6 @@ export function markTaskStart(
   ms: number,
 ) {
   if (enableProfiling) {
-    profilingState[QUEUE_SIZE]++;
-
     if (eventLog !== null) {
       // performance.now returns a float, representing milliseconds. When the
       // event is logged, it's coerced to an int. Convert to microseconds to
@@ -136,10 +98,6 @@ export function markTaskCompleted(
   ms: number,
 ) {
   if (enableProfiling) {
-    profilingState[PRIORITY] = NoPriority;
-    profilingState[CURRENT_TASK_ID] = 0;
-    profilingState[QUEUE_SIZE]--;
-
     if (eventLog !== null) {
       logEvent([TaskCompleteEvent, ms * 1000, task.id]);
     }
@@ -155,8 +113,6 @@ export function markTaskCanceled(
   ms: number,
 ) {
   if (enableProfiling) {
-    profilingState[QUEUE_SIZE]--;
-
     if (eventLog !== null) {
       logEvent([TaskCancelEvent, ms * 1000, task.id]);
     }
@@ -172,10 +128,6 @@ export function markTaskErrored(
   ms: number,
 ) {
   if (enableProfiling) {
-    profilingState[PRIORITY] = NoPriority;
-    profilingState[CURRENT_TASK_ID] = 0;
-    profilingState[QUEUE_SIZE]--;
-
     if (eventLog !== null) {
       logEvent([TaskErrorEvent, ms * 1000, task.id]);
     }
@@ -193,10 +145,6 @@ export function markTaskRun(
   if (enableProfiling) {
     runIdCounter++;
 
-    profilingState[PRIORITY] = task.priorityLevel;
-    profilingState[CURRENT_TASK_ID] = task.id;
-    profilingState[CURRENT_RUN_ID] = runIdCounter;
-
     if (eventLog !== null) {
       logEvent([TaskRunEvent, ms * 1000, task.id, runIdCounter]);
     }
@@ -205,10 +153,6 @@ export function markTaskRun(
 
 export function markTaskYield(task: {id: number, ...}, ms: number) {
   if (enableProfiling) {
-    profilingState[PRIORITY] = NoPriority;
-    profilingState[CURRENT_TASK_ID] = 0;
-    profilingState[CURRENT_RUN_ID] = 0;
-
     if (eventLog !== null) {
       logEvent([TaskYieldEvent, ms * 1000, task.id, runIdCounter]);
     }
diff --git a/packages/scheduler/src/__tests__/SchedulerProfiling-test.js b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
index b7828b14487f..8f96a328d27e 100644
--- a/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerProfiling-test.js
@@ -13,7 +13,6 @@
 'use strict';
 
 let Scheduler;
-let sharedProfilingArray;
 // let runWithPriority;
 let ImmediatePriority;
 let UserBlockingPriority;
@@ -59,10 +58,6 @@ describe('Scheduler', () => {
     jest.mock('scheduler', () => require('scheduler/unstable_mock'));
     Scheduler = require('scheduler');
 
-    sharedProfilingArray = new Int32Array(
-      Scheduler.unstable_Profiling.sharedProfilingBuffer,
-    );
-
     // runWithPriority = Scheduler.unstable_runWithPriority;
     ImmediatePriority = Scheduler.unstable_ImmediatePriority;
     UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
@@ -76,20 +71,6 @@ describe('Scheduler', () => {
     // shouldYield = Scheduler.unstable_shouldYield;
   });
 
-  const PRIORITY = 0;
-  const CURRENT_TASK_ID = 1;
-  const CURRENT_RUN_ID = 2;
-  const QUEUE_SIZE = 3;
-
-  afterEach(() => {
-    if (sharedProfilingArray[QUEUE_SIZE] !== 0) {
-      throw Error(
-        'Test exited, but the shared profiling buffer indicates that a task ' +
-          'is still running',
-      );
-    }
-  });
-
   const TaskStartEvent = 1;
   const TaskCompleteEvent = 2;
   const TaskErrorEvent = 3;
@@ -272,23 +253,6 @@ describe('Scheduler', () => {
     return '\n' + result;
   }
 
-  function getProfilingInfo() {
-    const queueSize = sharedProfilingArray[QUEUE_SIZE];
-    if (queueSize === 0) {
-      return 'Empty Queue';
-    }
-    const priorityLevel = sharedProfilingArray[PRIORITY];
-    if (priorityLevel === 0) {
-      return 'Suspended, Queue Size: ' + queueSize;
-    }
-    return (
-      `Task: ${sharedProfilingArray[CURRENT_TASK_ID]}, ` +
-      `Run: ${sharedProfilingArray[CURRENT_RUN_ID]}, ` +
-      `Priority: ${priorityLevelToString(priorityLevel)}, ` +
-      `Queue Size: ${sharedProfilingArray[QUEUE_SIZE]}`
-    );
-  }
-
   it('creates a basic flamegraph', () => {
     Scheduler.unstable_Profiling.startLoggingProfilingEvents();
 
@@ -297,35 +261,27 @@ describe('Scheduler', () => {
       NormalPriority,
       () => {
         Scheduler.unstable_advanceTime(300);
-        Scheduler.unstable_yieldValue(getProfilingInfo());
+        Scheduler.unstable_yieldValue('Yield 1');
         scheduleCallback(
           UserBlockingPriority,
           () => {
-            Scheduler.unstable_yieldValue(getProfilingInfo());
+            Scheduler.unstable_yieldValue('Yield 2');
             Scheduler.unstable_advanceTime(300);
           },
           {label: 'Bar'},
         );
         Scheduler.unstable_advanceTime(100);
-        Scheduler.unstable_yieldValue('Yield');
+        Scheduler.unstable_yieldValue('Yield 3');
         return () => {
-          Scheduler.unstable_yieldValue(getProfilingInfo());
+          Scheduler.unstable_yieldValue('Yield 4');
           Scheduler.unstable_advanceTime(300);
         };
       },
       {label: 'Foo'},
     );
-    expect(Scheduler).toFlushAndYieldThrough([
-      'Task: 1, Run: 1, Priority: Normal, Queue Size: 1',
-      'Yield',
-    ]);
+    expect(Scheduler).toFlushAndYieldThrough(['Yield 1', 'Yield 3']);
     Scheduler.unstable_advanceTime(100);
-    expect(Scheduler).toFlushAndYield([
-      'Task: 2, Run: 2, Priority: User-blocking, Queue Size: 2',
-      'Task: 1, Run: 3, Priority: Normal, Queue Size: 1',
-    ]);
-
-    expect(getProfilingInfo()).toEqual('Empty Queue');
+    expect(Scheduler).toFlushAndYield(['Yield 2', 'Yield 4']);
 
     expect(stopProfilingAndPrintFlamegraph()).toEqual(
       `
@@ -340,19 +296,16 @@ Task 1 [Normal]              │  ████████░░░░░░░
     Scheduler.unstable_Profiling.startLoggingProfilingEvents();
 
     const task = scheduleCallback(NormalPriority, () => {
-      Scheduler.unstable_yieldValue(getProfilingInfo());
+      Scheduler.unstable_yieldValue('Yield 1');
       Scheduler.unstable_advanceTime(300);
-      Scheduler.unstable_yieldValue('Yield');
+      Scheduler.unstable_yieldValue('Yield 2');
       return () => {
         Scheduler.unstable_yieldValue('Continuation');
         Scheduler.unstable_advanceTime(200);
       };
     });
 
-    expect(Scheduler).toFlushAndYieldThrough([
-      'Task: 1, Run: 1, Priority: Normal, Queue Size: 1',
-      'Yield',
-    ]);
+    expect(Scheduler).toFlushAndYieldThrough(['Yield 1', 'Yield 2']);
     Scheduler.unstable_advanceTime(100);
 
     cancelCallback(task);
@@ -392,28 +345,25 @@ Task 1 [Normal]              │██████🡐 errored
     Scheduler.unstable_Profiling.startLoggingProfilingEvents();
 
     const task1 = scheduleCallback(NormalPriority, () => {
-      Scheduler.unstable_yieldValue(getProfilingInfo());
+      Scheduler.unstable_yieldValue('Yield 1');
       Scheduler.unstable_advanceTime(300);
-      Scheduler.unstable_yieldValue('Yield');
+      Scheduler.unstable_yieldValue('Yield 2');
       return () => {
         Scheduler.unstable_yieldValue('Continuation');
         Scheduler.unstable_advanceTime(200);
       };
     });
     const task2 = scheduleCallback(NormalPriority, () => {
-      Scheduler.unstable_yieldValue(getProfilingInfo());
+      Scheduler.unstable_yieldValue('Yield 3');
       Scheduler.unstable_advanceTime(300);
-      Scheduler.unstable_yieldValue('Yield');
+      Scheduler.unstable_yieldValue('Yield 4');
       return () => {
         Scheduler.unstable_yieldValue('Continuation');
         Scheduler.unstable_advanceTime(200);
       };
     });
 
-    expect(Scheduler).toFlushAndYieldThrough([
-      'Task: 1, Run: 1, Priority: Normal, Queue Size: 2',
-      'Yield',
-    ]);
+    expect(Scheduler).toFlushAndYieldThrough(['Yield 1', 'Yield 2']);
     Scheduler.unstable_advanceTime(100);
 
     cancelCallback(task1);
diff --git a/packages/scheduler/src/forks/SchedulerDOM.js b/packages/scheduler/src/forks/SchedulerDOM.js
index eb70af64d7d6..90cbc6b2b08c 100644
--- a/packages/scheduler/src/forks/SchedulerDOM.js
+++ b/packages/scheduler/src/forks/SchedulerDOM.js
@@ -25,7 +25,6 @@ import {
   IdlePriority,
 } from '../SchedulerPriorities';
 import {
-  sharedProfilingBuffer,
   markTaskRun,
   markTaskYield,
   markTaskCompleted,
@@ -624,6 +623,5 @@ export const unstable_Profiling = enableProfiling
   ? {
       startLoggingProfilingEvents,
       stopLoggingProfilingEvents,
-      sharedProfilingBuffer,
     }
   : null;
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 5d7b8c945bb6..ef72933db563 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -23,7 +23,6 @@ import {
   IdlePriority,
 } from '../SchedulerPriorities';
 import {
-  sharedProfilingBuffer,
   markTaskRun,
   markTaskYield,
   markTaskCompleted,
@@ -635,6 +634,5 @@ export const unstable_Profiling = enableProfiling
   ? {
       startLoggingProfilingEvents,
       stopLoggingProfilingEvents,
-      sharedProfilingBuffer,
     }
   : null;
diff --git a/packages/scheduler/src/forks/SchedulerNoDOM.js b/packages/scheduler/src/forks/SchedulerNoDOM.js
index 35bf3bfbc940..ed6d7891fd24 100644
--- a/packages/scheduler/src/forks/SchedulerNoDOM.js
+++ b/packages/scheduler/src/forks/SchedulerNoDOM.js
@@ -23,7 +23,6 @@ import {
   IdlePriority,
 } from '../SchedulerPriorities';
 import {
-  sharedProfilingBuffer,
   markTaskRun,
   markTaskYield,
   markTaskCompleted,
@@ -470,6 +469,5 @@ export const unstable_Profiling = enableProfiling
   ? {
       startLoggingProfilingEvents,
       stopLoggingProfilingEvents,
-      sharedProfilingBuffer,
     }
   : null;
diff --git a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
index 9f5674e24b2d..0f7e1b99e252 100644
--- a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
+++ b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
@@ -24,7 +24,6 @@ import {
   IdlePriority,
 } from '../SchedulerPriorities';
 import {
-  sharedProfilingBuffer,
   markTaskRun,
   markTaskYield,
   markTaskCompleted,
@@ -595,6 +594,5 @@ export const unstable_Profiling = enableProfiling
   ? {
       startLoggingProfilingEvents,
       stopLoggingProfilingEvents,
-      sharedProfilingBuffer,
     }
   : null;

From 4d28eca97e469ae6515fa369ed380e3c82fb7acc Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 22 Feb 2021 12:56:54 -0500
Subject: [PATCH 0273/1603] Land enableNonInterruptingNormalPri (#20859)

---
 .../src/ReactFiberLane.new.js                 |  8 ++---
 .../src/ReactFiberLane.old.js                 |  8 ++---
 .../src/__tests__/ReactTransition-test.js     | 36 ++++++-------------
 packages/shared/ReactFeatureFlags.js          |  2 --
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 13 files changed, 14 insertions(+), 49 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index e4280582e80c..5f14a3140e30 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -36,10 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {
-  enableCache,
-  enableNonInterruptingNormalPri,
-} from 'shared/ReactFeatureFlags';
+import {enableCache} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -348,8 +345,7 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
       // 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.
-      (enableNonInterruptingNormalPri &&
-        nextLanePriority === DefaultLanePriority &&
+      (nextLanePriority === DefaultLanePriority &&
         wipLanePriority === TransitionPriority)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index fe7d6eb7508c..3c3eab4c8612 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -36,10 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {
-  enableCache,
-  enableNonInterruptingNormalPri,
-} from 'shared/ReactFeatureFlags';
+import {enableCache} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -348,8 +345,7 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
       // 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.
-      (enableNonInterruptingNormalPri &&
-        nextLanePriority === DefaultLanePriority &&
+      (nextLanePriority === DefaultLanePriority &&
         wipLanePriority === TransitionPriority)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index 25072eb465ad..09ba5dded730 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -946,33 +946,17 @@ describe('ReactTransition', () => {
       updateNormalPri();
     });
 
-    if (gate(flags => flags.enableNonInterruptingNormalPri)) {
-      expect(Scheduler).toHaveYielded([
-        // Finish transition update.
-        'Normal pri: 0',
-        'Commit',
-
-        // Normal pri update.
-        'Transition pri: 1',
-        'Normal pri: 1',
-        'Commit',
-      ]);
-
-      expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
-    } else {
-      expect(Scheduler).toHaveYielded([
-        // Interrupt! Render normal pri update.
-        'Transition pri: 0',
-        'Normal pri: 1',
-        'Commit',
+    expect(Scheduler).toHaveYielded([
+      // Finish transition update.
+      'Normal pri: 0',
+      'Commit',
 
-        // Restart transition update.
-        'Transition pri: 1',
-        'Normal pri: 1',
-        'Commit',
-      ]);
+      // Normal pri update.
+      'Transition pri: 1',
+      'Normal pri: 1',
+      'Commit',
+    ]);
 
-      expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
-    }
+    expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
   });
 });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 3d0362f4b3fc..778881bc5837 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -147,8 +147,6 @@ export const enableRecursiveCommitTraversal = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 
-export const enableNonInterruptingNormalPri = false;
-
 export const enableDiscreteEventMicroTasks = false;
 
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f97f4f428c18..6544be4cbe04 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 9d160790b3fe..a6482da52d52 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 52990e5ec7b7..343bb609b4d2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 3c739b7bccb3..e9ad4240a6fc 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index fb2211763c03..2afc959952ac 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 34e6d5315742..d79a63c57789 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 4f0c56733eaf..732360618f6b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableNonInterruptingNormalPri = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index b6e1d4260cc4..daf49b2ab225 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -55,6 +55,5 @@ export const enableUseRefAccessWarning = __VARIANT__;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
-export const enableNonInterruptingNormalPri = __VARIANT__;
 export const enableDiscreteEventMicroTasks = __VARIANT__;
 export const enableNativeEventPriorityInference = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 924fd6ea9e5b..2d983a3e8f81 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,7 +31,6 @@ export const {
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
-  enableNonInterruptingNormalPri,
   enableDiscreteEventMicroTasks,
   enableNativeEventPriorityInference,
 } = dynamicFeatureFlags;

From cfd8c1bd43fc4fcf708a584924f27a6c79803eae Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 22 Feb 2021 14:04:20 -0500
Subject: [PATCH 0274/1603] DevTools: Restore inspect-element bridge
 optimizations (#20789)

* Restore inspect-element bridge optimizations

When the new Suspense cache was integrated (so that startTransition could be used) I removed a couple of optimizations between the backend and frontend that reduced bridge traffic when e.g. dehydrated paths were inspected for elements that had not rendered since previously inspected. This commit re-adds those optimizations as well as an additional test with a bug fix that I noticed while reading the backend code.

There are two remaining TODO items as of this commit:
- Make inspected element edits and deletes also use transition API
- Don't over-eagerly refresh the cache in our ping-for-updates handler

I will addres both in subsequent commits.

* Poll for update only refreshes cache when there's an update

* Added inline comment
---
 .../src/__tests__/inspectedElement-test.js    | 162 ++++++++++++++++--
 .../__tests__/legacy/inspectElement-test.js   |  23 +--
 .../src/backend/agent.js                      |   8 +-
 .../src/backend/legacy/renderer.js            |  30 +++-
 .../src/backend/renderer.js                   |  98 ++++++++---
 .../src/backend/types.js                      |  16 +-
 .../react-devtools-shared/src/backendAPI.js   |  11 +-
 packages/react-devtools-shared/src/bridge.js  |   3 +-
 .../views/Components/InspectedElement.js      |   2 +
 .../Components/InspectedElementContext.js     |  60 +++----
 .../src/devtools/views/Components/types.js    |   6 +
 .../src/inspectedElementCache.js              |  94 ++++------
 .../src/inspectedElementMutableSource.js      | 132 ++++++++++++++
 13 files changed, 475 insertions(+), 170 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/inspectedElementMutableSource.js

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 7cb7ebb77f5a..193f4670d378 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -65,7 +65,9 @@ describe('InspectedElement', () => {
       .TreeContextController;
 
     // Used by inspectElementAtIndex() helper function
-    testRendererInstance = TestRenderer.create(null);
+    testRendererInstance = TestRenderer.create(null, {
+      unstable_isConcurrent: true,
+    });
   });
 
   afterEach(() => {
@@ -259,7 +261,9 @@ describe('InspectedElement', () => {
       // from props like defaultSelectedElementID 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.
-      testRendererInstance = TestRenderer.create(null);
+      testRendererInstance = TestRenderer.create(null, {
+        unstable_isConcurrent: true,
+      });
 
       const inspectedElement = await inspectElementAtIndex(index);
 
@@ -1197,10 +1201,9 @@ describe('InspectedElement', () => {
             "1": 2,
             "2": 3,
           },
-          "1": Object {
-            "0": "a",
-            "1": "b",
-            "2": "c",
+          "1": Dehydrated {
+            "preview_short": Set(3),
+            "preview_long": Set(3) {"a", "b", "c"},
           },
         },
       }
@@ -1283,12 +1286,9 @@ describe('InspectedElement', () => {
             },
             "value": 1,
           },
-          "c": Object {
-            "d": Dehydrated {
-              "preview_short": {…},
-              "preview_long": {e: {…}, value: 1},
-            },
-            "value": 1,
+          "c": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {d: {…}, value: 1},
           },
         },
       }
@@ -1377,6 +1377,143 @@ describe('InspectedElement', () => {
     done();
   });
 
+  it('should return a full update if a path is inspected for an object that has other pending changes', async done => {
+    const Example = () => null;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(
+        <Example
+          nestedObject={{
+            a: {
+              value: 1,
+              b: {
+                value: 1,
+              },
+            },
+            c: {
+              value: 1,
+              d: {
+                value: 1,
+                e: {
+                  value: 1,
+                },
+              },
+            },
+          }}
+        />,
+        container,
+      ),
+    );
+
+    let inspectedElement = null;
+    let inspectElementPath = null;
+
+    // Render once to get a handle on inspectElementPath()
+    inspectedElement = await inspectElementAtIndex(0, () => {
+      inspectElementPath = useInspectElementPath();
+    });
+
+    async function loadPath(path) {
+      TestUtilsAct(() => {
+        TestRendererAct(() => {
+          inspectElementPath(path);
+          jest.runOnlyPendingTimers();
+        });
+      });
+
+      inspectedElement = await inspectElementAtIndex(0);
+    }
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "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(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "value": 1,
+            },
+            "value": 1,
+          },
+          "c": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {d: {…}, value: 1},
+          },
+        },
+      }
+    `);
+
+    TestRendererAct(() => {
+      TestUtilsAct(() => {
+        ReactDOM.render(
+          <Example
+            nestedObject={{
+              a: {
+                value: 2,
+                b: {
+                  value: 2,
+                },
+              },
+              c: {
+                value: 2,
+                d: {
+                  value: 2,
+                  e: {
+                    value: 2,
+                  },
+                },
+              },
+            }}
+          />,
+          container,
+        );
+      });
+    });
+
+    await loadPath(['props', 'nestedObject', 'c']);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "nestedObject": Object {
+          "a": Object {
+            "b": Object {
+              "value": 2,
+            },
+            "value": 2,
+          },
+          "c": Object {
+            "d": Object {
+              "e": Dehydrated {
+                "preview_short": {…},
+                "preview_long": {value: 2},
+              },
+              "value": 2,
+            },
+            "value": 2,
+          },
+        },
+      }
+    `);
+
+    done();
+  });
+
   it('should not tear if hydration is requested after an update', async done => {
     const Example = () => null;
 
@@ -1936,6 +2073,7 @@ describe('InspectedElement', () => {
               <Suspender target={id} />
             </React.Suspense>
           </Contexts>,
+          {unstable_isConcurrent: true},
         );
       }, false);
       await utils.actAsync(() => {
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 6d446ca481de..5718c782a9ae 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -26,15 +26,14 @@ describe('InspectedElementContext', () => {
 
   async function read(
     id: number,
-    inspectedPaths?: Object = {},
+    path?: Array<string | number> = null,
   ): Promise<Object> {
     const rendererID = ((store.getRendererIDForElement(id): any): number);
     const promise = backendAPI
       .inspectElement({
         bridge,
-        forceUpdate: true,
         id,
-        inspectedPaths,
+        path,
         rendererID,
       })
       .then(data =>
@@ -686,7 +685,7 @@ describe('InspectedElementContext', () => {
       }
     `);
 
-    inspectedElement = await read(id, {props: {nestedObject: {a: {}}}});
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a']);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "nestedObject": Object {
@@ -702,9 +701,7 @@ describe('InspectedElementContext', () => {
       }
     `);
 
-    inspectedElement = await read(id, {
-      props: {nestedObject: {a: {b: {c: {}}}}},
-    });
+    inspectedElement = await read(id, ['props', 'nestedObject', 'a', 'b', 'c']);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "nestedObject": Object {
@@ -724,9 +721,15 @@ describe('InspectedElementContext', () => {
       }
     `);
 
-    inspectedElement = await read(id, {
-      props: {nestedObject: {a: {b: {c: {0: {d: {}}}}}}},
-    });
+    inspectedElement = await read(id, [
+      'props',
+      'nestedObject',
+      'a',
+      'b',
+      'c',
+      0,
+      'd',
+    ]);
     expect(inspectedElement.props).toMatchInlineSnapshot(`
       Object {
         "nestedObject": Object {
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 68c1fa70ba40..41993700252c 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -70,8 +70,7 @@ type CopyElementParams = {|
 
 type InspectElementParams = {|
   id: number,
-  inspectedPaths: Object,
-  forceUpdate: boolean,
+  path: Array<string | number> | null,
   rendererID: number,
   requestID: number,
 |};
@@ -332,8 +331,7 @@ export default class Agent extends EventEmitter<{|
 
   inspectElement = ({
     id,
-    inspectedPaths,
-    forceUpdate,
+    path,
     rendererID,
     requestID,
   }: InspectElementParams) => {
@@ -343,7 +341,7 @@ export default class Agent extends EventEmitter<{|
     } else {
       this._bridge.send(
         'inspectedElement',
-        renderer.inspectElement(requestID, id, inspectedPaths, forceUpdate),
+        renderer.inspectElement(requestID, id, path),
       );
 
       // When user selects an element, stop trying to restore the selection,
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 63c9b1660e75..08cbfe340fb6 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -584,12 +584,25 @@ export function attach(
   }
 
   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, inspectedPaths: Object) {
+  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 = inspectedPaths[key];
+      let current = currentlyInspectedPaths[key];
       if (!current) {
         return false;
       }
@@ -680,10 +693,11 @@ export function attach(
   function inspectElement(
     requestID: number,
     id: number,
-    inspectedPaths: Object,
+    path: Array<string | number> | null,
   ): InspectedElementPayload {
     if (currentlyInspectedElementID !== id) {
       currentlyInspectedElementID = id;
+      currentlyInspectedPaths = {};
     }
 
     const inspectedElement = inspectElementRaw(id);
@@ -695,6 +709,10 @@ export function attach(
       };
     }
 
+    if (path !== null) {
+      mergeInspectedPaths(path);
+    }
+
     // Any time an inspected element has an update,
     // we should update the selected $r value as wel.
     // Do this before dehyration (cleanForBridge).
@@ -702,15 +720,15 @@ export function attach(
 
     inspectedElement.context = cleanForBridge(
       inspectedElement.context,
-      createIsPathAllowed('context', inspectedPaths),
+      createIsPathAllowed('context'),
     );
     inspectedElement.props = cleanForBridge(
       inspectedElement.props,
-      createIsPathAllowed('props', inspectedPaths),
+      createIsPathAllowed('props'),
     );
     inspectedElement.state = cleanForBridge(
       inspectedElement.state,
-      createIsPathAllowed('state', inspectedPaths),
+      createIsPathAllowed('state'),
     );
 
     return {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index a15af2d8bdbc..c5f6932234a8 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2458,8 +2458,7 @@ export function attach(
     id: number,
     path: Array<string | number>,
   ): void {
-    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
-    if (isCurrent) {
+    if (isMostRecentlyInspectedElement(id)) {
       window.$attribute = getInObject(
         ((mostRecentlyInspectedElement: any): InspectedElement),
         path,
@@ -2766,19 +2765,36 @@ export function attach(
 
   let mostRecentlyInspectedElement: InspectedElement | null = null;
   let hasElementUpdatedSinceLastInspected: boolean = false;
+  let currentlyInspectedPaths: Object = {};
 
-  function isMostRecentlyInspectedElementCurrent(id: number): boolean {
+  function isMostRecentlyInspectedElement(id: number): boolean {
     return (
       mostRecentlyInspectedElement !== null &&
-      mostRecentlyInspectedElement.id === id &&
-      !hasElementUpdatedSinceLastInspected
+      mostRecentlyInspectedElement.id === id
     );
   }
 
+  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: 'hooks' | null,
-    inspectedPaths: Object,
   ) {
     // 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.
@@ -2803,7 +2819,8 @@ export function attach(
           break;
       }
 
-      let current = key === null ? inspectedPaths : inspectedPaths[key];
+      let current =
+        key === null ? currentlyInspectedPaths : currentlyInspectedPaths[key];
       if (!current) {
         return false;
       }
@@ -2870,9 +2887,7 @@ export function attach(
     path: Array<string | number>,
     count: number,
   ): void {
-    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
-
-    if (isCurrent) {
+    if (isMostRecentlyInspectedElement(id)) {
       const value = getInObject(
         ((mostRecentlyInspectedElement: any): InspectedElement),
         path,
@@ -2887,9 +2902,7 @@ export function attach(
   }
 
   function copyElementPath(id: number, path: Array<string | number>): void {
-    const isCurrent = isMostRecentlyInspectedElementCurrent(id);
-
-    if (isCurrent) {
+    if (isMostRecentlyInspectedElement(id)) {
       copyToClipboard(
         getInObject(
           ((mostRecentlyInspectedElement: any): InspectedElement),
@@ -2902,19 +2915,48 @@ export function attach(
   function inspectElement(
     requestID: number,
     id: number,
-    inspectedPaths: Object,
-    forceUpdate: boolean,
+    path: Array<string | number> | null,
   ): InspectedElementPayload {
-    const isCurrent = !forceUpdate && isMostRecentlyInspectedElementCurrent(id);
+    if (path !== null) {
+      mergeInspectedPaths(path);
+    }
 
-    if (isCurrent) {
-      // 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',
-      };
+    if (isMostRecentlyInspectedElement(id)) {
+      if (!hasElementUpdatedSinceLastInspected) {
+        if (path !== null) {
+          let secondaryCategory = null;
+          if (path[0] === 'hooks') {
+            secondaryCategory = 'hooks';
+          }
+
+          // If this element has not been updated since it was last inspected,
+          // we can just return the subset of data in the newly-inspected path.
+          return {
+            id,
+            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;
@@ -2939,19 +2981,19 @@ export function attach(
     const cleanedInspectedElement = {...mostRecentlyInspectedElement};
     cleanedInspectedElement.context = cleanForBridge(
       cleanedInspectedElement.context,
-      createIsPathAllowed('context', null, inspectedPaths),
+      createIsPathAllowed('context', null),
     );
     cleanedInspectedElement.hooks = cleanForBridge(
       cleanedInspectedElement.hooks,
-      createIsPathAllowed('hooks', 'hooks', inspectedPaths),
+      createIsPathAllowed('hooks', 'hooks'),
     );
     cleanedInspectedElement.props = cleanForBridge(
       cleanedInspectedElement.props,
-      createIsPathAllowed('props', null, inspectedPaths),
+      createIsPathAllowed('props', null),
     );
     cleanedInspectedElement.state = cleanForBridge(
       cleanedInspectedElement.state,
-      createIsPathAllowed('state', null, inspectedPaths),
+      createIsPathAllowed('state', null),
     );
 
     return {
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 09b32aa1ceef..3c42d2f9cc28 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -258,20 +258,28 @@ export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
 
-type InspectElementFullData = {|
+export type InspectElementFullData = {|
   id: number,
   responseID: number,
   type: 'full-data',
   value: InspectedElement,
 |};
 
-type InspectElementNoChange = {|
+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',
 |};
 
-type InspectElementNotFound = {|
+export type InspectElementNotFound = {|
   id: number,
   responseID: number,
   type: 'not-found',
@@ -279,6 +287,7 @@ type InspectElementNotFound = {|
 
 export type InspectedElementPayload =
   | InspectElementFullData
+  | InspectElementHydratedPath
   | InspectElementNoChange
   | InspectElementNotFound;
 
@@ -316,7 +325,6 @@ export type RendererInterface = {
     requestID: number,
     id: number,
     inspectedPaths: Object,
-    forceUpdate: boolean,
   ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 372fd247d3b5..a4b870ea8f9b 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -86,15 +86,13 @@ export function copyInspectedElementPath({
 
 export function inspectElement({
   bridge,
-  forceUpdate,
   id,
-  inspectedPaths,
+  path,
   rendererID,
 }: {|
   bridge: FrontendBridge,
-  forceUpdate: boolean,
   id: number,
-  inspectedPaths: Object,
+  path: Array<string | number> | null,
   rendererID: number,
 |}): Promise<InspectedElementPayload> {
   const requestID = requestCounter++;
@@ -105,9 +103,8 @@ export function inspectElement({
   );
 
   bridge.send('inspectElement', {
-    forceUpdate,
     id,
-    inspectedPaths,
+    path,
     rendererID,
     requestID,
   });
@@ -254,7 +251,7 @@ export function convertInspectedElementBackendToFrontend(
   return inspectedElement;
 }
 
-function hydrateHelper(
+export function hydrateHelper(
   dehydratedData: DehydratedData | null,
   path?: Array<string | number>,
 ): Object | null {
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index dad25e93258c..f69414ad4708 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -89,8 +89,7 @@ type ViewAttributeSourceParams = {|
 
 type InspectElementParams = {|
   ...ElementAndRendererID,
-  forceUpdate: boolean,
-  inspectedPaths: Object,
+  path: Array<number | string> | null,
   requestID: number,
 |};
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 3645993d51b1..2c4b0698c77e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -27,6 +27,8 @@ import type {InspectedElement} from './types';
 
 export type Props = {||};
 
+// TODO Make edits and deletes also use transition API!
+
 export default function InspectedElementWrapper(_: Props) {
   const {inspectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 48768b57aaac..35e87c6ffb4a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -16,7 +16,6 @@ import {
   useContext,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import {TreeStateContext} from './TreeContext';
@@ -57,16 +56,16 @@ export function InspectedElementContextController({children}: Props) {
 
   const refresh = useCacheRefresh();
 
-  // Track when insepected paths have changed; we need to force the backend to send an udpate then.
-  const forceUpdateRef = useRef<boolean>(true);
-
-  // Track the paths insepected for the currently selected element.
+  // 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,
-    inspectedPaths: Object,
+    path: Array<number | string> | null,
   |}>({
     element: null,
-    inspectedPaths: {},
+    path: null,
   });
 
   const element =
@@ -78,54 +77,45 @@ export function InspectedElementContextController({children}: Props) {
   if (elementHasChanged) {
     setState({
       element,
-      inspectedPaths: {},
+      path: null,
     });
   }
 
   // Don't load a stale element from the backend; it wastes bridge bandwidth.
-  const inspectedElement =
-    !elementHasChanged && element !== null
-      ? inspectElement(
-          element,
-          state.inspectedPaths,
-          forceUpdateRef.current,
-          store,
-          bridge,
-        )
-      : null;
+  let inspectedElement = null;
+  if (!elementHasChanged && element !== null) {
+    inspectedElement = inspectElement(element, state.path, store, bridge);
+  }
 
   const inspectPaths: InspectPathFunction = useCallback<InspectPathFunction>(
     (path: Path) => {
       startTransition(() => {
-        forceUpdateRef.current = true;
-        setState(prevState => {
-          const cloned = {...prevState};
-          let current = cloned.inspectedPaths;
-          path.forEach(key => {
-            if (!current[key]) {
-              current[key] = {};
-            }
-            current = current[key];
-          });
-          return cloned;
+        setState({
+          element: state.element,
+          path,
         });
         refresh();
       });
     },
-    [setState],
+    [setState, state],
   );
 
-  // Force backend update when inspected paths change.
+  // 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(() => {
-    forceUpdateRef.current = false;
-  }, [element, state]);
+    if (state.path !== null) {
+      setState({
+        element: state.element,
+        path: null,
+      });
+    }
+  }, [state]);
 
   // Periodically poll the selected element for updates.
   useEffect(() => {
     if (element !== null) {
-      const inspectedPaths = state.inspectedPaths;
       const checkForUpdateWrapper = () => {
-        checkForUpdate({bridge, element, inspectedPaths, refresh, store});
+        checkForUpdate({bridge, element, refresh, store});
         timeoutID = setTimeout(checkForUpdateWrapper, POLL_INTERVAL);
       };
       let timeoutID = setTimeout(checkForUpdateWrapper, POLL_INTERVAL);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index efdb89463688..11eb544c3f78 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -56,6 +56,12 @@ export type OwnersList = {|
   owners: Array<Owner> | null,
 |};
 
+export type InspectedElementResponseType =
+  | 'full-data'
+  | 'hydrated-path'
+  | 'no-change'
+  | 'not-found';
+
 export type InspectedElement = {|
   id: number,
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 6169207df0db..9d0fcd9d7371 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -12,20 +12,14 @@ import {
   unstable_startTransition as startTransition,
 } from 'react';
 import Store from './devtools/store';
-import {
-  convertInspectedElementBackendToFrontend,
-  inspectElement as inspectElementAPI,
-} from './backendAPI';
+import {inspectElement as inspectElementMutableSource} from './inspectedElementMutableSource';
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {
-  InspectedElement as InspectedElementBackend,
-  InspectedElementPayload,
-} from 'react-devtools-shared/src/backend/types';
 import type {
   Element,
   InspectedElement as InspectedElementFrontend,
+  InspectedElementResponseType,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
 
 const Pending = 0;
@@ -88,13 +82,13 @@ function createCacheSeed(
  */
 export function inspectElement(
   element: Element,
-  inspectedPaths: Object,
-  forceUpdate: boolean,
+  path: Array<string | number> | null,
   store: Store,
   bridge: FrontendBridge,
 ): InspectedElementFrontend | null {
   const map = getRecordMap();
   let record = map.get(element);
+
   if (!record) {
     const callbacks = new Set();
     const wakeable: Wakeable = {
@@ -116,50 +110,31 @@ export function inspectElement(
     if (rendererID == null) {
       const rejectedRecord = ((newRecord: any): RejectedRecord);
       rejectedRecord.status = Rejected;
-      rejectedRecord.value = 'Inspected element not found.';
+      rejectedRecord.value = `Could not inspect element with id ${element.id}`;
+
+      map.set(element, record);
+
       return null;
     }
 
-    inspectElementAPI({
+    inspectElementMutableSource({
       bridge,
-      forceUpdate: true,
-      id: element.id,
-      inspectedPaths,
+      element,
+      path,
       rendererID: ((rendererID: any): number),
     }).then(
-      (data: InspectedElementPayload) => {
-        if (newRecord.status === Pending) {
-          switch (data.type) {
-            case 'no-change':
-              // This response type should never be received.
-              // We always send forceUpdate:true when we have a cache miss.
-              break;
-
-            case 'not-found':
-              const notFoundRecord = ((newRecord: any): RejectedRecord);
-              notFoundRecord.status = Rejected;
-              notFoundRecord.value = 'Inspected element not found.';
-              wake();
-              break;
-
-            case 'full-data':
-              const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
-              resolvedRecord.status = Resolved;
-              resolvedRecord.value = convertInspectedElementBackendToFrontend(
-                ((data.value: any): InspectedElementBackend),
-              );
-              wake();
-              break;
-          }
-        }
+      ([inspectedElement: InspectedElementFrontend]) => {
+        const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = inspectedElement;
+        wake();
       },
 
-      () => {
-        // Timed out without receiving a response.
+      error => {
         if (newRecord.status === Pending) {
-          const timedOutRecord = ((newRecord: any): RejectedRecord);
-          timedOutRecord.status = Rejected;
-          timedOutRecord.value = 'Inspected element timed out.';
+          const rejectedRecord = ((newRecord: any): RejectedRecord);
+          rejectedRecord.status = Rejected;
+          rejectedRecord.value = `Could not inspect element with id ${element.id}`;
           wake();
         }
       },
@@ -184,37 +159,34 @@ type RefreshFunction = (
 export function checkForUpdate({
   bridge,
   element,
-  inspectedPaths,
   refresh,
   store,
 }: {
   bridge: FrontendBridge,
   element: Element,
-  inspectedPaths: Object,
   refresh: RefreshFunction,
   store: Store,
 }): void {
   const {id} = element;
   const rendererID = store.getRendererIDForElement(id);
   if (rendererID != null) {
-    inspectElementAPI({
+    inspectElementMutableSource({
       bridge,
-      forceUpdate: false,
-      id,
-      inspectedPaths,
-      rendererID,
-    }).then((data: InspectedElementPayload) => {
-      switch (data.type) {
-        case 'full-data':
-          const inspectedElement = convertInspectedElementBackendToFrontend(
-            ((data.value: any): InspectedElementBackend),
-          );
+      element,
+      path: null,
+      rendererID: ((rendererID: any): number),
+    }).then(
+      ([
+        inspectedElement: InspectedElementFrontend,
+        responseType: InspectedElementResponseType,
+      ]) => {
+        if (responseType === 'full-data') {
           startTransition(() => {
             const [key, value] = createCacheSeed(element, inspectedElement);
             refresh(key, value);
           });
-          break;
-      }
-    });
+        }
+      },
+    );
   }
 }
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
new file mode 100644
index 000000000000..2504b7932300
--- /dev/null
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {
+  convertInspectedElementBackendToFrontend,
+  hydrateHelper,
+  inspectElement as inspectElementAPI,
+} from 'react-devtools-shared/src/backendAPI';
+import {fillInPath} from 'react-devtools-shared/src/hydration';
+
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  InspectElementFullData,
+  InspectElementHydratedPath,
+} from 'react-devtools-shared/src/backend/types';
+import type {
+  Element,
+  InspectedElement as InspectedElementFrontend,
+  InspectedElementResponseType,
+} from 'react-devtools-shared/src/devtools/views/Components/types';
+
+// Map an Element in the Store to the most recent copy of its inspected data.
+// As updates comes from the backend, inspected data is updated.
+// Both this map and the inspected objects in it are mutable.
+// They should never be read from directly during render;
+// Use a Suspense cache to ensure that transitions work correctly and there is no tearing.
+const inspectedElementMap: WeakMap<
+  Element,
+  InspectedElementFrontend,
+> = new WeakMap();
+
+type Path = Array<string | number>;
+
+type InspectElementReturnType = [
+  InspectedElementFrontend,
+  InspectedElementResponseType,
+];
+
+export function inspectElement({
+  bridge,
+  element,
+  path,
+  rendererID,
+}: {|
+  bridge: FrontendBridge,
+  element: Element,
+  path: Path | null,
+  rendererID: number,
+|}): Promise<InspectElementReturnType> {
+  const {id} = element;
+  return inspectElementAPI({
+    bridge,
+    id,
+    path,
+    rendererID,
+  }).then((data: any) => {
+    const {type} = data;
+
+    let inspectedElement;
+    switch (type) {
+      case 'no-change':
+        // This is a no-op for the purposes of our cache.
+        inspectedElement = inspectedElementMap.get(element);
+        if (inspectedElement != null) {
+          return [inspectedElement, type];
+        }
+        break;
+
+      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.
+        inspectedElementMap.delete(element);
+
+        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,
+        );
+
+        inspectedElementMap.set(element, 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 = inspectedElementMap.get(element) || null;
+        if (inspectedElement !== null) {
+          // Clone element
+          inspectedElement = {...inspectedElement};
+
+          // Merge hydrated data
+          fillInPath(
+            inspectedElement,
+            value,
+            ((path: any): Path),
+            hydrateHelper(value, ((path: any): Path)),
+          );
+
+          inspectedElementMap.set(element, 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}`);
+  });
+}

From 78d2f2d3015e7b4b3f0f7d8ddd07204952c5f8a9 Mon Sep 17 00:00:00 2001
From: Valentin Shergin <shergin@fb.com>
Date: Mon, 22 Feb 2021 15:50:03 -0600
Subject: [PATCH 0275/1603] Fabric-compatible implementation of `JSReponder`
 feature (#20768)

With this change, if a node is a Fabric node, we route the setJSResponder call to FabricUIManager. Native counterpart is already landed. Tested internally as D26241364.
---
 .../src/ReactFabricGlobalResponderHandler.js  | 21 +++++++++++++++----
 .../InitializeNativeFabricUIManager.js        |  1 +
 scripts/flow/react-native-host-hooks.js       |  1 +
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
index 69d0b8ae529c..12b6d1e92fce 100644
--- a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
+++ b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
@@ -12,11 +12,24 @@ import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateI
 
 const ReactFabricGlobalResponderHandler = {
   onChange: function(from: any, to: any, blockNativeResponder: boolean) {
-    if (to !== null) {
-      const tag = to.stateNode.canonical._nativeTag;
-      UIManager.setJSResponder(tag, blockNativeResponder);
+    const fromOrTo = from || to;
+    const isFabric = !!fromOrTo.stateNode.canonical._internalInstanceHandle;
+
+    if (isFabric) {
+      if (from) {
+        nativeFabricUIManager.setIsJSResponder(from.stateNode.node, false);
+      }
+
+      if (to) {
+        nativeFabricUIManager.setIsJSResponder(to.stateNode.node, true);
+      }
     } else {
-      UIManager.clearJSResponder();
+      if (to !== null) {
+        const tag = to.stateNode.canonical._nativeTag;
+        UIManager.setJSResponder(tag, blockNativeResponder);
+      } else {
+        UIManager.clearJSResponder();
+      }
     }
   },
 };
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index 686dc72702de..ee3c7df98508 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -176,6 +176,7 @@ const RCTFabricUIManager = {
     );
     success(1, 1, 100, 100);
   }),
+  setIsJSResponder: jest.fn(),
 };
 
 global.nativeFabricUIManager = RCTFabricUIManager;
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 17cc6fe9c952..29fed27e52c6 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -179,6 +179,7 @@ declare var nativeFabricUIManager: {
     locationY: number,
     callback: (Fiber) => void,
   ) => void,
+  setIsJSResponder: (node: Node, isJsResponder: boolean) => void,
   ...
 };
 

From c62986cfd8cbf994348407c8ece06b04ec1c86f4 Mon Sep 17 00:00:00 2001
From: Anthony Garritano <anthony@bigbigmoose.com>
Date: Mon, 22 Feb 2021 19:17:13 -0500
Subject: [PATCH 0276/1603] Add additional messaging for RulesOfHooks lint
 error (#20692)

* Add additional messaging for RulesOfHooks lint error

* Fix tests and spacing issue

* Prettify ESLintRulesOfHooks-test
---
 .../__tests__/ESLintRulesOfHooks-test.js                       | 3 ++-
 packages/eslint-plugin-react-hooks/src/RulesOfHooks.js         | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
index 5b8ff6f3e1de..b6b0c8d4a967 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -915,7 +915,8 @@ function functionError(hook, fn) {
     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 component names must start with an uppercase letter.' +
+      ' React Hook names must start with the word "use".',
   };
 }
 
diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
index bc747e0094f0..66e2d8edba56 100644
--- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -482,7 +482,8 @@ export default {
                 `function "${context.getSource(codePathFunctionName)}" ` +
                 'that is neither a React function component nor a custom ' +
                 'React Hook function.' +
-                ' React component names must start with an uppercase letter.';
+                ' 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.

From e5f6b91d294d0c1260ce5079ed0192b43ccd3e82 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Feb 2021 11:31:29 -0500
Subject: [PATCH 0277/1603] Add Lane labels to scheduling profiler marks
 (#20808)

This commit changes scheduling profiler marks from a format like '--schedule-render-1' to '--schedule-render-1-Sync' (where 1 is the numeric value of the Sync lane). This will enable the profiler itself to show more meaningful labels for updates and render work.

The commit also refactors and adds additional tests for the scheduling profiler package.

It also updates the preprocessor to 'support' instant events. These are no-ops for us, but adding recognition of the event type will prevent profiles imported from e.g. Chrome Canary from throwing with an 'unrecognized event' error. (This will resolve issue #20767.)
---
 .../src/EventTooltip.js                       |    8 +-
 .../src/constants.js                          |    3 +-
 .../__snapshots__/preprocessData-test.js.snap | 1380 -----------------
 .../__tests__/preprocessData-test.internal.js |  602 +++++++
 .../__tests__/preprocessData-test.js          |  352 -----
 .../src/import-worker/preprocessData.js       |   41 +-
 .../src/types.js                              |    2 +
 .../webpack.config.js                         |    3 +-
 .../src/ReactFiberLane.new.js                 |   65 +-
 .../src/ReactFiberLane.old.js                 |   65 +-
 .../src/SchedulingProfiler.js                 |   22 +-
 .../SchedulingProfiler-test.internal.js       |  150 +-
 .../SchedulingProfilerLabels-test.internal.js |  179 +++
 13 files changed, 1055 insertions(+), 1817 deletions(-)
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/__snapshots__/preprocessData-test.js.snap
 create mode 100644 packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.js
 create mode 100644 packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js

diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 52fb66d981c4..608309c4a3ca 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -249,7 +249,7 @@ const TooltipReactMeasure = ({
     return null;
   }
 
-  const {batchUID, duration, timestamp, lanes} = measure;
+  const {batchUID, duration, timestamp, lanes, laneLabels} = measure;
   const [startTime, stopTime] = getBatchRange(batchUID, data);
 
   return (
@@ -265,7 +265,11 @@ const TooltipReactMeasure = ({
         <div className={styles.DetailsGridLabel}>
           Lane{lanes.length === 1 ? '' : 's'}:
         </div>
-        <div>{lanes.join(', ')}</div>
+        <div>
+          {laneLabels.length > 0
+            ? `${laneLabels.join(', ')} (${lanes.join(', ')})`
+            : lanes.join(', ')}
+        </div>
       </div>
     </div>
   );
diff --git a/packages/react-devtools-scheduling-profiler/src/constants.js b/packages/react-devtools-scheduling-profiler/src/constants.js
index 2e463ae632d9..e5f9336d73e7 100644
--- a/packages/react-devtools-scheduling-profiler/src/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/constants.js
@@ -11,5 +11,6 @@ export {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
 } from 'react-devtools-shared/src/constants.js';
+import {TotalLanes} from 'react-reconciler/src/ReactFiberLane.new';
 
-export const REACT_TOTAL_NUM_LANES = 31;
+export const REACT_TOTAL_NUM_LANES = TotalLanes;
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/__snapshots__/preprocessData-test.js.snap b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/__snapshots__/preprocessData-test.js.snap
deleted file mode 100644
index 4055b6d45e23..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/__snapshots__/preprocessData-test.js.snap
+++ /dev/null
@@ -1,1380 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`preprocessData should process complete set of events (page load sample data) 1`] = `
-Object {
-  "duration": 2586.895,
-  "events": Array [
-    Object {
-      "componentStack": "",
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 278.073,
-      "type": "schedule-render",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 658.345,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "1",
-      "timestamp": 660.739,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "2",
-      "timestamp": 662.554,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 663.455,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 664.202,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 666.68,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "1",
-      "timestamp": 667.201,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "2",
-      "timestamp": 667.74,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 668.282,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 668.848,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at SuspenseList
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 671.335,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ForceUpdateDemo_ForceUpdateDemo",
-      "componentStack": "
-    at ForceUpdateDemo_ForceUpdateDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:18:98)
-    at App",
-      "isCascading": true,
-      "lanes": Array [
-        0,
-      ],
-      "timestamp": 679.438,
-      "type": "schedule-state-update",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "1",
-      "timestamp": 1794.922,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "1",
-      "timestamp": 1795.374,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 1797.166,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "2",
-      "timestamp": 1797.811,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 1798.163,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 1798.505,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "2",
-      "timestamp": 1866.249,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "2",
-      "timestamp": 1866.542,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "2",
-      "timestamp": 1866.858,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 1867.816,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 1868.638,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 1868.966,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 1980.273,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 1980.522,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 1980.946,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "3",
-      "timestamp": 1981.164,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 1982.079,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 1983.17,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 2379.587,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 2379.895,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 2380.242,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 2380.487,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "4",
-      "timestamp": 2380.735,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2381.772,
-      "type": "suspense-suspend",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2579.186,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2579.487,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at SuspenseList
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2579.735,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2580.042,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2580.29,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2580.546,
-      "type": "suspense-resolved",
-    },
-    Object {
-      "componentName": "ResourceButton",
-      "componentStack": "
-    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)
-    at Suspense
-    at div
-    at div
-    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)
-    at App",
-      "id": "0",
-      "timestamp": 2580.8,
-      "type": "suspense-resolved",
-    },
-  ],
-  "flamechart": Array [],
-  "measures": Array [
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 402.58299999999997,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 285.293,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 5.235000000000014,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 285.293,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 8.16799999999995,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 297.708,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 4.989000000000033,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 310.457,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 6.470000000000027,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 357.767,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 6.633000000000038,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 371.486,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 9.889999999999986,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 385.05,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.8589999999999804,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 398.06,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.261000000000024,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 406.666,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.700999999999965,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 414.218,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.793000000000006,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 422.141,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.706999999999994,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 430.185,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.406999999999982,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 439.552,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.649000000000001,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 447.294,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.736000000000047,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 455.215,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.6959999999999695,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 463.259,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.700999999999965,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 471.247,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.55499999999995,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 479.362,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.7900000000000205,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 487.195,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.617000000000019,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 495.354,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.241999999999962,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 503.706,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.81899999999996,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 513.106,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 9.269999999999982,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 521.667,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.758000000000038,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 531.185,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.735000000000014,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 539.213,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.730000000000018,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 547.223,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.697000000000003,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 555.234,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.715000000000032,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 563.232,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.760999999999967,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 571.212,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.618000000000052,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 579.324,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.737999999999943,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 587.201,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.739000000000033,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 595.209,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.732000000000085,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 603.194,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.712999999999965,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 611.212,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.3700000000000045,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 619.574,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.73599999999999,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 627.188,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.729000000000042,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 635.193,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.908999999999992,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 643.206,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 7.6159999999999854,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 651.339,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 5.334999999999923,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 659.445,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 5.5890000000000555,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 664.952,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 1.58400000000006,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 670.784,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 14.552000000000021,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 673.324,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 1,
-      "duration": 2.6889999999999645,
-      "lanes": Array [
-        9,
-      ],
-      "timestamp": 677.236,
-      "type": "layout-effects",
-    },
-    Object {
-      "batchUID": 1,
-      "depth": 1,
-      "duration": 3.5559999999999263,
-      "lanes": Array [
-        0,
-      ],
-      "timestamp": 684.104,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 1,
-      "depth": 1,
-      "duration": 2.2169999999999845,
-      "lanes": Array [
-        0,
-      ],
-      "timestamp": 684.104,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 1,
-      "depth": 1,
-      "duration": 1.3120000000000118,
-      "lanes": Array [
-        0,
-      ],
-      "timestamp": 686.348,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 1,
-      "depth": 2,
-      "duration": 0.020999999999958163,
-      "lanes": Array [
-        0,
-      ],
-      "timestamp": 687.267,
-      "type": "layout-effects",
-    },
-    Object {
-      "batchUID": 2,
-      "depth": 0,
-      "duration": 6.119000000000142,
-      "lanes": Array [
-        10,
-      ],
-      "timestamp": 1796.042,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 2,
-      "depth": 0,
-      "duration": 3.4329999999999927,
-      "lanes": Array [
-        10,
-      ],
-      "timestamp": 1796.042,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 2,
-      "depth": 0,
-      "duration": 2.589000000000169,
-      "lanes": Array [
-        10,
-      ],
-      "timestamp": 1799.572,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 2,
-      "depth": 1,
-      "duration": 0.020999999999958163,
-      "lanes": Array [
-        10,
-      ],
-      "timestamp": 1801.605,
-      "type": "layout-effects",
-    },
-    Object {
-      "batchUID": 3,
-      "depth": 0,
-      "duration": 4.116999999999962,
-      "lanes": Array [
-        11,
-      ],
-      "timestamp": 1866.998,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 3,
-      "depth": 0,
-      "duration": 2.6679999999998927,
-      "lanes": Array [
-        11,
-      ],
-      "timestamp": 1866.998,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 3,
-      "depth": 0,
-      "duration": 1.4200000000000728,
-      "lanes": Array [
-        11,
-      ],
-      "timestamp": 1869.695,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 3,
-      "depth": 1,
-      "duration": 0.020000000000209184,
-      "lanes": Array [
-        11,
-      ],
-      "timestamp": 1870.764,
-      "type": "layout-effects",
-    },
-    Object {
-      "batchUID": 4,
-      "depth": 0,
-      "duration": 3.7679999999998017,
-      "lanes": Array [
-        12,
-      ],
-      "timestamp": 1981.361,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 4,
-      "depth": 0,
-      "duration": 2.438999999999851,
-      "lanes": Array [
-        12,
-      ],
-      "timestamp": 1981.361,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 4,
-      "depth": 0,
-      "duration": 1.2579999999998108,
-      "lanes": Array [
-        12,
-      ],
-      "timestamp": 1983.871,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 4,
-      "depth": 1,
-      "duration": 0.027000000000043656,
-      "lanes": Array [
-        12,
-      ],
-      "timestamp": 1984.931,
-      "type": "layout-effects",
-    },
-    Object {
-      "batchUID": 5,
-      "depth": 0,
-      "duration": 3.8899999999998727,
-      "lanes": Array [
-        13,
-      ],
-      "timestamp": 2380.969,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 5,
-      "depth": 0,
-      "duration": 2.3099999999999454,
-      "lanes": Array [
-        13,
-      ],
-      "timestamp": 2380.969,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 5,
-      "depth": 0,
-      "duration": 1.5209999999997308,
-      "lanes": Array [
-        13,
-      ],
-      "timestamp": 2383.338,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 5,
-      "depth": 1,
-      "duration": 0.01999999999998181,
-      "lanes": Array [
-        13,
-      ],
-      "timestamp": 2384.535,
-      "type": "layout-effects",
-    },
-    Object {
-      "batchUID": 6,
-      "depth": 0,
-      "duration": 5.942999999999756,
-      "lanes": Array [
-        14,
-      ],
-      "timestamp": 2580.952,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 6,
-      "depth": 0,
-      "duration": 3.424999999999727,
-      "lanes": Array [
-        14,
-      ],
-      "timestamp": 2580.952,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 6,
-      "depth": 0,
-      "duration": 2.4470000000001164,
-      "lanes": Array [
-        14,
-      ],
-      "timestamp": 2584.448,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 6,
-      "depth": 1,
-      "duration": 0.027000000000043656,
-      "lanes": Array [
-        14,
-      ],
-      "timestamp": 2586.122,
-      "type": "layout-effects",
-    },
-  ],
-  "otherUserTimingMarks": Array [
-    Object {
-      "name": "navigationStart",
-      "timestamp": -29.357,
-    },
-    Object {
-      "name": "fetchStart",
-      "timestamp": -26.92,
-    },
-    Object {
-      "name": "requestStart",
-      "timestamp": -21.171,
-    },
-    Object {
-      "name": "responseEnd",
-      "timestamp": -15.655,
-    },
-    Object {
-      "name": "unloadEventStart",
-      "timestamp": -0.74,
-    },
-    Object {
-      "name": "unloadEventEnd",
-      "timestamp": 39.608,
-    },
-    Object {
-      "name": "requestStart",
-      "timestamp": 107.649,
-    },
-    Object {
-      "name": "requestStart",
-      "timestamp": 108.385,
-    },
-    Object {
-      "name": "loadEventStart",
-      "timestamp": 307.056,
-    },
-    Object {
-      "name": "loadEventEnd",
-      "timestamp": 308.242,
-    },
-    Object {
-      "name": "requestStart",
-      "timestamp": 341.329,
-    },
-    Object {
-      "name": "requestStart",
-      "timestamp": 344.02,
-    },
-    Object {
-      "name": "requestStart",
-      "timestamp": 387.585,
-    },
-  ],
-  "startTime": 8993778496,
-}
-`;
-
-exports[`preprocessData should process forced update event 1`] = `
-Object {
-  "duration": 67.461,
-  "events": Array [
-    Object {
-      "componentName": "ForceUpdateDemo_ForceUpdateDemo",
-      "componentStack": "
-    at ForceUpdateDemo_ForceUpdateDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:18:98)
-    at App",
-      "isCascading": false,
-      "lanes": Array [
-        4,
-      ],
-      "timestamp": 63.355,
-      "type": "schedule-force-update",
-    },
-  ],
-  "flamechart": Array [],
-  "measures": Array [
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 2.1910000000000025,
-      "lanes": Array [
-        4,
-      ],
-      "timestamp": 65.27,
-      "type": "render-idle",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 0.9770000000000039,
-      "lanes": Array [
-        4,
-      ],
-      "timestamp": 65.27,
-      "type": "render",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 0,
-      "duration": 1.1670000000000016,
-      "lanes": Array [
-        4,
-      ],
-      "timestamp": 66.294,
-      "type": "commit",
-    },
-    Object {
-      "batchUID": 0,
-      "depth": 1,
-      "duration": 0.018000000000000682,
-      "lanes": Array [
-        4,
-      ],
-      "timestamp": 67.325,
-      "type": "layout-effects",
-    },
-  ],
-  "otherUserTimingMarks": Array [],
-  "startTime": 40806924876,
-}
-`;
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
new file mode 100644
index 000000000000..df81af097ba5
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -0,0 +1,602 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+import preprocessData, {
+  getLanesFromTransportDecimalBitmask,
+} from '../preprocessData';
+import {REACT_TOTAL_NUM_LANES} from '../../constants';
+
+describe(getLanesFromTransportDecimalBitmask, () => {
+  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()));
+  });
+
+  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([]);
+  });
+
+  it('should ignore lanes outside 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 React;
+  let ReactDOM;
+
+  let act;
+  let clearedMarks;
+  let featureDetectionMarkName = null;
+  let marks;
+
+  function polyfillJSDomUserTiming() {
+    featureDetectionMarkName = null;
+
+    clearedMarks = [];
+    marks = [];
+
+    // 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
+
+    // JSDom already implements global.performance and it can't be overridden.
+    // However it only supports now() and timeOrigin() so we need to "upgrade it" in place.
+
+    if (!global.performance) {
+      global.performance = {};
+    }
+
+    global.performance.clearMarks = function clearMarks(markName) {
+      clearedMarks.push(markName);
+      marks = marks.filter(mark => mark !== markName);
+    };
+
+    global.performance.mark = function mark(markName, markOptions) {
+      if (featureDetectionMarkName === null) {
+        featureDetectionMarkName = markName;
+      }
+      marks.push(markName);
+      if (markOptions != null) {
+        // This is triggers the feature detection.
+        markOptions.startTime++;
+      }
+    };
+  }
+
+  // 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 createUserTimingData(sampleMarks) {
+    const cpuProfilerSample = createUserTimingEntry({
+      args: {data: {startTime: ++startTime}},
+      cat: 'disabled-by-default-v8.cpu_profiler',
+      id: '0x1',
+      name: 'Profile',
+      ph: 'P',
+    });
+
+    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: {navigationId: 'fake-navigation-id'}},
+        cat: 'blink.user_timing',
+        name: markName,
+        ph: 'R',
+      });
+    });
+
+    return userTimingData;
+  }
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    polyfillJSDomUserTiming();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const TestUtils = require('react-dom/test-utils');
+    act = TestUtils.act;
+
+    tid = 0;
+    pid = 0;
+    startTime = 0;
+  });
+
+  afterEach(() => {
+    // Verify all logged marks also get cleared.
+    expect(marks).toHaveLength(0);
+
+    delete global.performance;
+  });
+
+  it('should throw given an empty timeline', () => {
+    expect(() => preprocessData([])).toThrow();
+  });
+
+  it('should throw given a timeline with no Profile event', () => {
+    const randomSample = createUserTimingEntry({
+      dur: 100,
+      tdur: 200,
+      ph: 'X',
+      cat: 'disabled-by-default-devtools.timeline',
+      name: 'RunTask',
+      args: {},
+    });
+
+    expect(() => preprocessData([randomSample])).toThrow();
+  });
+
+  it('should return empty data given a timeline with no React scheduling profiling marks', () => {
+    const cpuProfilerSample = createUserTimingEntry({
+      args: {data: {startTime: ++startTime}},
+      cat: 'disabled-by-default-v8.cpu_profiler',
+      id: '0x1',
+      name: 'Profile',
+      ph: 'P',
+    });
+
+    const randomSample = createUserTimingEntry({
+      dur: 100,
+      tdur: 200,
+      ph: 'X',
+      cat: 'disabled-by-default-devtools.timeline',
+      name: 'RunTask',
+      args: {},
+    });
+
+    expect(preprocessData([cpuProfilerSample, randomSample])).toStrictEqual({
+      duration: 0.002,
+      events: [],
+      flamechart: [],
+      measures: [],
+      otherUserTimingMarks: [],
+      startTime: 1,
+    });
+  });
+
+  // NOTE This test doesn't have to be gated because it has hard-coded profiler samples.
+  it('should process legacy data format (before lane labels were added)', () => {
+    const cpuProfilerSample = createUserTimingEntry({
+      args: {data: {startTime: ++startTime}},
+      cat: 'disabled-by-default-v8.cpu_profiler',
+      id: '0x1',
+      name: 'Profile',
+      ph: 'P',
+    });
+
+    expect(
+      // Data below is hard-coded based on an older profile sample.
+      // Should be fine since this is explicitly a legacy-format test.
+      preprocessData([
+        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',
+        }),
+      ]),
+    ).toStrictEqual({
+      duration: 0.008,
+      events: [
+        {
+          componentStack: '',
+          laneLabels: [],
+          lanes: [9],
+          timestamp: 0.002,
+          type: 'schedule-render',
+        },
+      ],
+      flamechart: [],
+      measures: [
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.005,
+          laneLabels: [],
+          lanes: [9],
+          timestamp: 0.003,
+          type: 'render-idle',
+        },
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.001,
+          laneLabels: [],
+          lanes: [9],
+          timestamp: 0.003,
+          type: 'render',
+        },
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.003,
+          laneLabels: [],
+          lanes: [9],
+          timestamp: 0.005,
+          type: 'commit',
+        },
+        {
+          batchUID: 0,
+          depth: 1,
+          duration: 0.001,
+          laneLabels: [],
+          lanes: [9],
+          timestamp: 0.006,
+          type: 'layout-effects',
+        },
+      ],
+      otherUserTimingMarks: [],
+      startTime: 1,
+    });
+  });
+
+  // @gate enableSchedulingProfiler
+  it('should process a sample legacy render sequence', () => {
+    ReactDOM.render(<div />, document.createElement('div'));
+
+    const reactVersion = require('shared/ReactVersion').default;
+
+    const userTimingData = createUserTimingData(clearedMarks);
+    expect(preprocessData(userTimingData)).toStrictEqual({
+      duration: 0.011,
+      events: [
+        {
+          componentStack: '',
+          laneLabels: ['Sync'],
+          lanes: [0],
+          timestamp: 0.005,
+          type: 'schedule-render',
+        },
+      ],
+      flamechart: [],
+      measures: [
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.004999999999999999,
+          laneLabels: ['Sync'],
+          lanes: [0],
+          timestamp: 0.006,
+          type: 'render-idle',
+        },
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.001,
+          laneLabels: ['Sync'],
+          lanes: [0],
+          timestamp: 0.006,
+          type: 'render',
+        },
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.002999999999999999,
+          laneLabels: ['Sync'],
+          lanes: [0],
+          timestamp: 0.008,
+          type: 'commit',
+        },
+        {
+          batchUID: 0,
+          depth: 1,
+          duration: 0.0010000000000000009,
+          laneLabels: ['Sync'],
+          lanes: [0],
+          timestamp: 0.009,
+          type: 'layout-effects',
+        },
+      ],
+      otherUserTimingMarks: [
+        {
+          name: '__v3',
+          timestamp: 0.003,
+        },
+        {
+          name: `--react-init-${reactVersion}`,
+          timestamp: 0.004,
+        },
+      ],
+      startTime: 1,
+    });
+  });
+
+  // @gate experimental && enableSchedulingProfiler
+  it('should process a sample createRoot render sequence', () => {
+    function App() {
+      const [didMount, setDidMount] = React.useState(false);
+      React.useEffect(() => {
+        if (!didMount) {
+          setDidMount(true);
+        }
+      });
+      return true;
+    }
+
+    const root = ReactDOM.createRoot(document.createElement('div'));
+    act(() => root.render(<App />));
+
+    const userTimingData = createUserTimingData(clearedMarks);
+    expect(preprocessData(userTimingData)).toStrictEqual({
+      duration: 0.022,
+      events: [
+        {
+          componentStack: '',
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.005,
+          type: 'schedule-render',
+        },
+        {
+          componentName: 'App',
+          componentStack: '',
+          isCascading: false,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.013,
+          type: 'schedule-state-update',
+        },
+      ],
+      flamechart: [],
+      measures: [
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.004999999999999999,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.006,
+          type: 'render-idle',
+        },
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.001,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.006,
+          type: 'render',
+        },
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.002999999999999999,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.008,
+          type: 'commit',
+        },
+        {
+          batchUID: 0,
+          depth: 1,
+          duration: 0.0010000000000000009,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.009,
+          type: 'layout-effects',
+        },
+        {
+          batchUID: 0,
+          depth: 0,
+          duration: 0.002,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.012,
+          type: 'passive-effects',
+        },
+        {
+          batchUID: 1,
+          depth: 0,
+          duration: 0.005000000000000001,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.015,
+          type: 'render-idle',
+        },
+        {
+          batchUID: 1,
+          depth: 0,
+          duration: 0.0010000000000000009,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.015,
+          type: 'render',
+        },
+        {
+          batchUID: 1,
+          depth: 0,
+          duration: 0.002999999999999999,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.017,
+          type: 'commit',
+        },
+        {
+          batchUID: 1,
+          depth: 1,
+          duration: 0.0010000000000000009,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.018,
+          type: 'layout-effects',
+        },
+        {
+          batchUID: 1,
+          depth: 0,
+          duration: 0.0009999999999999974,
+          laneLabels: ['Default'],
+          lanes: [7],
+          timestamp: 0.021,
+          type: 'passive-effects',
+        },
+      ],
+      otherUserTimingMarks: [
+        {
+          name: '__v3',
+          timestamp: 0.003,
+        },
+        {
+          name: '--react-init-17.0.2',
+          timestamp: 0.004,
+        },
+      ],
+      startTime: 1,
+    });
+  });
+
+  // @gate enableSchedulingProfiler
+  it('should error if events and measures are incomplete', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(<div />, container);
+
+    const invalidMarks = clearedMarks.filter(
+      mark => !mark.includes('render-stop'),
+    );
+    const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+    const error = spyOnDevAndProd(console, 'error');
+    preprocessData(invalidUserTimingData);
+    expect(error).toHaveBeenCalled();
+  });
+
+  // @gate enableSchedulingProfiler
+  it('should error if work is completed without being started', () => {
+    const container = document.createElement('div');
+    ReactDOM.render(<div />, container);
+
+    const invalidMarks = clearedMarks.filter(
+      mark => !mark.includes('render-start'),
+    );
+    const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+    const error = spyOnDevAndProd(console, 'error');
+    preprocessData(invalidUserTimingData);
+    expect(error).toHaveBeenCalled();
+  });
+
+  it('should populate other user timing marks', () => {
+    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',
+      }),
+    );
+
+    expect(preprocessData(userTimingData).otherUserTimingMarks).toStrictEqual([
+      {
+        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,
+      },
+    ]);
+  });
+
+  // TODO: Add test for flamechart parsing
+});
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.js
deleted file mode 100644
index 8626252cee19..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.js
+++ /dev/null
@@ -1,352 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-import preprocessData, {
-  getLanesFromTransportDecimalBitmask,
-} from '../preprocessData';
-import {REACT_TOTAL_NUM_LANES} from '../../constants';
-
-// Disable quotes rule in the whole file as we paste raw JSON as test inputs and
-// Prettier will already format the remaining quotes.
-/* eslint-disable quotes */
-
-describe(getLanesFromTransportDecimalBitmask, () => {
-  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()));
-  });
-
-  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([]);
-  });
-
-  it('should ignore lanes outside 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, () => {
-  it('should throw given an empty timeline', () => {
-    expect(() => preprocessData([])).toThrow();
-  });
-
-  it('should throw given a timeline with no Profile event', () => {
-    expect(() =>
-      // prettier-ignore
-      preprocessData([
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--schedule-render-512-","ph":"R","pid":9312,"tid":10252,"ts":8994056569,"tts":1816966},
-      ]),
-    ).toThrow();
-  });
-
-  it('should return empty data given a timeline with no React scheduling profiling marks', () => {
-    expect(
-      // prettier-ignore
-      preprocessData([
-        {"args":{"data":{"startTime":8993778496}},"cat":"disabled-by-default-v8.cpu_profiler","id":"0x1","name":"Profile","ph":"P","pid":9312,"tid":10252,"ts":8993778520,"tts":1614266},
-        {"pid":57632,"tid":38659,"ts":874860756135,"ph":"X","cat":"disabled-by-default-devtools.timeline","name":"RunTask","dur":18,"tdur":19,"tts":8700284918,"args":{}},
-        {"pid":57632,"tid":38659,"ts":874860756158,"ph":"X","cat":"disabled-by-default-devtools.timeline","name":"RunTask","dur":30,"tdur":30,"tts":8700284941,"args":{}},
-        {"pid":57632,"tid":38659,"ts":874860756192,"ph":"X","cat":"disabled-by-default-devtools.timeline","name":"RunTask","dur":21,"tdur":20,"tts":8700284976,"args":{}},
-        {"pid":57632,"tid":38659,"ts":874860756216,"ph":"X","cat":"disabled-by-default-devtools.timeline","name":"RunTask","dur":6,"tdur":5,"tts":8700285000,"args":{}},
-        {"pid":57632,"tid":38659,"ts":874860756224,"ph":"X","cat":"disabled-by-default-devtools.timeline","name":"RunTask","dur":7,"tdur":6,"tts":8700285008,"args":{}},
-        {"pid":57632,"tid":38659,"ts":874860756233,"ph":"X","cat":"disabled-by-default-devtools.timeline","name":"RunTask","dur":5,"tdur":4,"tts":8700285017,"args":{}},
-      ]),
-    ).toEqual({
-      startTime: 8993778496,
-      duration: 865866977.737,
-      events: [],
-      measures: [],
-      flamechart: [],
-      otherUserTimingMarks: [],
-    });
-  });
-
-  it('should error if events and measures are incomplete', () => {
-    const error = spyOnDevAndProd(console, 'error');
-    // prettier-ignore
-    preprocessData([
-      {"args":{"data":{"startTime":8993778496}},"cat":"disabled-by-default-v8.cpu_profiler","id":"0x1","name":"Profile","ph":"P","pid":9312,"tid":10252,"ts":8993778520,"tts":1614266},
-      {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--render-start-8","ph":"R","pid":1852,"tid":12484,"ts":42351664678,"tts":1512475},
-    ]);
-    expect(error).toHaveBeenCalled();
-  });
-
-  it('should error if work is completed without being started', () => {
-    const error = spyOnDevAndProd(console, 'error');
-    // prettier-ignore
-    preprocessData([
-      {"args":{"data":{"startTime":8993778496}},"cat":"disabled-by-default-v8.cpu_profiler","id":"0x1","name":"Profile","ph":"P","pid":9312,"tid":10252,"ts":8993778520,"tts":1614266},
-      {"args":{"data":{"navigationId":"E082C30FBDA3ACEE0E7B5FD75F8B7F0D"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":17232,"tid":13628,"ts":264686513020,"tts":4082554},
-    ]);
-    expect(error).toHaveBeenCalled();
-  });
-
-  it('should process complete set of events (page load sample data)', () => {
-    expect(
-      // prettier-ignore
-      preprocessData([
-        {"args":{"data":{"documentLoaderURL":"https://concurrent-demo.now.sh/","isLoadingMainFrame":true,"navigationId":"43BC238A4FB7548146D3CD739C9C9434"},"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing","name":"navigationStart","ph":"R","pid":9312,"tid":10252,"ts":8993749139,"tts":1646191},
-        {"args":{"data":{"startTime":8993778496}},"cat":"disabled-by-default-v8.cpu_profiler","id":"0x1","name":"Profile","ph":"P","pid":9312,"tid":10252,"ts":8993778520,"tts":1614266},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing","name":"fetchStart","ph":"R","pid":9312,"tid":10252,"ts":8993751576,"tts":1646197},
-        {"args":{},"cat":"blink.user_timing","name":"requestStart","ph":"R","pid":9312,"tid":10252,"ts":8993757325,"tts":1612760},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing","name":"responseEnd","ph":"R","pid":9312,"tid":10252,"ts":8993762841,"tts":1652151},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing","name":"unloadEventStart","ph":"R","pid":9312,"tid":10252,"ts":8993777756,"tts":1646416},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing","name":"unloadEventEnd","ph":"R","pid":9312,"tid":10252,"ts":8993818104,"tts":1646419},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing,rail","name":"domLoading","ph":"R","pid":9312,"tid":10252,"ts":8993820215,"tts":1647488},
-        {"args":{},"cat":"blink.user_timing","name":"requestStart","ph":"R","pid":9312,"tid":10252,"ts":8993886145,"tts":1771277},
-        {"args":{},"cat":"blink.user_timing","name":"requestStart","ph":"R","pid":9312,"tid":10252,"ts":8993886881,"tts":1778953},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--schedule-render-512-","ph":"R","pid":9312,"tid":10252,"ts":8994056569,"tts":1816966},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing,rail","name":"domInteractive","ph":"R","pid":9312,"tid":10252,"ts":8994058638,"tts":1818851},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing,rail","name":"domContentLoadedEventStart","ph":"R","pid":9312,"tid":10252,"ts":8994058898,"tts":1819078},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing,rail","name":"domContentLoadedEventEnd","ph":"R","pid":9312,"tid":10252,"ts":8994060045,"tts":1820100},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994063789,"tts":1823183},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994069024,"tts":1826507},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994076204,"tts":1830657},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994084372,"tts":1837590},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing,rail","name":"domComplete","ph":"R","pid":9312,"tid":10252,"ts":8994085517,"tts":1838615},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing","name":"loadEventStart","ph":"R","pid":9312,"tid":10252,"ts":8994085552,"tts":1838649},
-        {"args":{"frame":"FD65D9AFD04B1295CEA36B883F0FA82F"},"cat":"blink.user_timing","name":"loadEventEnd","ph":"R","pid":9312,"tid":10252,"ts":8994086738,"tts":1839690},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994088953,"tts":1840749},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994093942,"tts":1844455},
-        {"args":{},"cat":"blink.user_timing","name":"requestStart","ph":"R","pid":9312,"tid":10252,"ts":8994119825,"tts":1877483},
-        {"args":{},"cat":"blink.user_timing","name":"requestStart","ph":"R","pid":9312,"tid":10252,"ts":8994122516,"tts":1886344},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994136263,"tts":1871212},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994142733,"tts":1875838},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994149982,"tts":1880208},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994156615,"tts":1885309},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994163546,"tts":1887453},
-        {"args":{},"cat":"blink.user_timing","name":"requestStart","ph":"R","pid":9312,"tid":10252,"ts":8994166081,"tts":1895751},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994173436,"tts":1894442},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994176556,"tts":1897176},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994184415,"tts":1904263},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994185162,"tts":1904938},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994192423,"tts":1910624},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994192714,"tts":1910872},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994200415,"tts":1917859},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994200637,"tts":1918062},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994208430,"tts":1924894},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994208681,"tts":1925124},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994216388,"tts":1932117},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994218048,"tts":1933622},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994225455,"tts":1940076},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994225790,"tts":1940391},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994233439,"tts":1947224},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994233711,"tts":1947473},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994241447,"tts":1954160},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994241755,"tts":1954426},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994249451,"tts":1961213},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994249743,"tts":1961494},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994257444,"tts":1968141},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994257858,"tts":1968525},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994265413,"tts":1975172},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994265691,"tts":1975416},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994273481,"tts":1981826},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994273850,"tts":1982112},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994281467,"tts":1988537},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994282202,"tts":1988894},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994289444,"tts":1994103},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994291602,"tts":1995165},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994299421,"tts":2000342},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994300163,"tts":2001009},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994309433,"tts":2005662},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994309681,"tts":2005897},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994317439,"tts":2012641},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994317709,"tts":2012890},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994325444,"tts":2019235},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994325719,"tts":2019477},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994333449,"tts":2026367},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994333730,"tts":2026617},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994341427,"tts":2033147},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994341728,"tts":2033411},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994349443,"tts":2040163},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994349708,"tts":2040409},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994357469,"tts":2047136},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994357820,"tts":2047465},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994365438,"tts":2054203},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994365697,"tts":2054434},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994373435,"tts":2061259},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994373705,"tts":2061502},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994381444,"tts":2068300},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994381690,"tts":2068529},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994389422,"tts":2075272},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994389708,"tts":2075518},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994397421,"tts":2082156},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994398070,"tts":2082726},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994405440,"tts":2088860},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994405684,"tts":2089091},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994413420,"tts":2095780},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994413689,"tts":2096021},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994421418,"tts":2102791},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994421702,"tts":2103047},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994429611,"tts":2110142},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994429835,"tts":2110349},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994436841,"tts":2115594},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994437451,"tts":2116087},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994437941,"tts":2116287},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-1-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994439235,"tts":2117153},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-2-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994441050,"tts":2118088},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994441951,"tts":2118783},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994442698,"tts":2119371},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994443276,"tts":2119875},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994443448,"tts":2120040},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994445176,"tts":2121499},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-1-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994445697,"tts":2121968},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-2-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994446236,"tts":2122460},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994446778,"tts":2122951},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994447344,"tts":2123444},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-yield","ph":"R","pid":9312,"tid":10252,"ts":8994449037,"tts":2124925},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994449280,"tts":2125142},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at SuspenseList\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994449831,"tts":2125639},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":9312,"tid":10252,"ts":8994450864,"tts":2126555},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994451820,"tts":2127417},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-start-512","ph":"R","pid":9312,"tid":10252,"ts":8994455732,"tts":2130777},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--schedule-state-update-1-ForceUpdateDemo_ForceUpdateDemo-\n    at ForceUpdateDemo_ForceUpdateDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:18:98)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8994457934,"tts":2132671},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":9312,"tid":10252,"ts":8994458421,"tts":2133089},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-1","ph":"R","pid":9312,"tid":10252,"ts":8994462600,"tts":2136847},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":9312,"tid":10252,"ts":8994464817,"tts":2138817},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-start-1","ph":"R","pid":9312,"tid":10252,"ts":8994464844,"tts":2138843},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-start-1","ph":"R","pid":9312,"tid":10252,"ts":8994465763,"tts":2139664},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":9312,"tid":10252,"ts":8994465784,"tts":2139686},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":9312,"tid":10252,"ts":8994466156,"tts":2140023},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":9312,"tid":10252,"ts":8994466372,"tts":2140208},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-1-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995573418,"tts":2205582},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-1-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995573870,"tts":2205980},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-1024","ph":"R","pid":9312,"tid":10252,"ts":8995574538,"tts":2206568},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995575662,"tts":2207534},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-2-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995576307,"tts":2208142},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995576659,"tts":2208445},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995577001,"tts":2208736},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":9312,"tid":10252,"ts":8995577971,"tts":2209602},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-start-1024","ph":"R","pid":9312,"tid":10252,"ts":8995578068,"tts":2209689},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-start-1024","ph":"R","pid":9312,"tid":10252,"ts":8995580101,"tts":2211495},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":9312,"tid":10252,"ts":8995580122,"tts":2211515},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":9312,"tid":10252,"ts":8995580657,"tts":2211995},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-2-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995644745,"tts":2217336},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-2-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995645038,"tts":2217571},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-2-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995645354,"tts":2217861},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-2048","ph":"R","pid":9312,"tid":10252,"ts":8995645494,"tts":2217999},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995646312,"tts":2218721},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995647134,"tts":2219450},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995647462,"tts":2219740},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":9312,"tid":10252,"ts":8995648162,"tts":2220335},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-start-2048","ph":"R","pid":9312,"tid":10252,"ts":8995648191,"tts":2220363},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-start-2048","ph":"R","pid":9312,"tid":10252,"ts":8995649260,"tts":2221320},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":9312,"tid":10252,"ts":8995649280,"tts":2221340},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":9312,"tid":10252,"ts":8995649611,"tts":2221636},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995758769,"tts":2228839},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995759018,"tts":2229064},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995759442,"tts":2229424},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-3-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995759660,"tts":2229627},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-4096","ph":"R","pid":9312,"tid":10252,"ts":8995759857,"tts":2229803},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995760575,"tts":2230456},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8995761666,"tts":2231399},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":9312,"tid":10252,"ts":8995762296,"tts":2231965},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-start-4096","ph":"R","pid":9312,"tid":10252,"ts":8995762367,"tts":2232017},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-start-4096","ph":"R","pid":9312,"tid":10252,"ts":8995763427,"tts":2232966},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":9312,"tid":10252,"ts":8995763454,"tts":2232993},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":9312,"tid":10252,"ts":8995763625,"tts":2233154},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996158083,"tts":2252466},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996158391,"tts":2252730},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996158738,"tts":2253038},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996158983,"tts":2253239},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-4-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996159231,"tts":2253447},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-8192","ph":"R","pid":9312,"tid":10252,"ts":8996159465,"tts":2253624},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-suspend-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996160268,"tts":2254312},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":9312,"tid":10252,"ts":8996161775,"tts":2255670},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-start-8192","ph":"R","pid":9312,"tid":10252,"ts":8996161834,"tts":2255716},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-start-8192","ph":"R","pid":9312,"tid":10252,"ts":8996163031,"tts":2256754},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":9312,"tid":10252,"ts":8996163051,"tts":2256773},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":9312,"tid":10252,"ts":8996163355,"tts":2257045},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996357682,"tts":2267920},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996357983,"tts":2268179},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at SuspenseList\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996358231,"tts":2268389},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996358538,"tts":2268679},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996358786,"tts":2268867},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996359042,"tts":2269066},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--suspense-resolved-0-ResourceButton-\n    at ResourceButton (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:295)\n    at Suspense\n    at div\n    at div\n    at SuspenseDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:36:713)\n    at App","ph":"R","pid":9312,"tid":10252,"ts":8996359296,"tts":2269264},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-start-16384","ph":"R","pid":9312,"tid":10252,"ts":8996359448,"tts":2269412},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":9312,"tid":10252,"ts":8996362873,"tts":2272363},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-start-16384","ph":"R","pid":9312,"tid":10252,"ts":8996362944,"tts":2272420},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-start-16384","ph":"R","pid":9312,"tid":10252,"ts":8996364618,"tts":2273869},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":9312,"tid":10252,"ts":8996364645,"tts":2273895},
-        {"args":{"data":{"navigationId":"43BC238A4FB7548146D3CD739C9C9434"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":9312,"tid":10252,"ts":8996365391,"tts":2274547},
-      ]),
-    ).toMatchSnapshot();
-  });
-
-  it('should process forced update event', () => {
-    expect(
-      // prettier-ignore
-      preprocessData([
-        {"args":{"data":{"startTime":40806924876}},"cat":"disabled-by-default-v8.cpu_profiler","id":"0x2","name":"Profile","ph":"P","pid":1852,"tid":12484,"ts":40806924880,"tts":996658},
-        {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--schedule-forced-update-16-ForceUpdateDemo_ForceUpdateDemo-\n    at ForceUpdateDemo_ForceUpdateDemo (https://concurrent-demo.now.sh/static/js/main.c9f122eb.chunk.js:18:98)\n    at App","ph":"R","pid":1852,"tid":12484,"ts":40806988231,"tts":1037762},
-        {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--render-start-16","ph":"R","pid":1852,"tid":12484,"ts":40806990146,"tts":1038890},
-        {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--render-stop","ph":"R","pid":1852,"tid":12484,"ts":40806991123,"tts":1039401},
-        {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--commit-start-16","ph":"R","pid":1852,"tid":12484,"ts":40806991170,"tts":1039447},
-        {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--layout-effects-start-16","ph":"R","pid":1852,"tid":12484,"ts":40806992201,"tts":1040023},
-        {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--layout-effects-stop","ph":"R","pid":1852,"tid":12484,"ts":40806992219,"tts":1040041},
-        {"args":{"data":{"navigationId":"1065756F5FDAD64BE45CA86B0BBC1F8B"}},"cat":"blink.user_timing","name":"--commit-stop","ph":"R","pid":1852,"tid":12484,"ts":40806992337,"tts":1040149},
-      ]),
-    ).toMatchSnapshot();
-  });
-
-  it('should populate other user timing marks', () => {
-    expect(
-      // prettier-ignore
-      preprocessData([
-        {"args":{},"cat":"blink.user_timing","id":"0xcdf75f7c","name":"VCWithoutImage: root","ph":"n","pid":55132,"scope":"blink.user_timing","tid":775,"ts":458734963394},
-        {"args":{"data":{"startTime":458738069897}},"cat":"disabled-by-default-v8.cpu_profiler","id":"0x4","name":"Profile","ph":"P","pid":55132,"tid":775,"ts":458738069898,"tts":27896428},
-        {"args":{"data":{"navigationId":"B8774C733A75946C099FE21F8A0E8D38"}},"cat":"blink.user_timing","name":"--a-mark-that-looks-like-one-of-ours","ph":"R","pid":55132,"tid":775,"ts":458738256356,"tts":28082555},
-        {"args":{"data":{"navigationId":"B8774C733A75946C099FE21F8A0E8D38"}},"cat":"blink.user_timing","name":"Some other mark","ph":"R","pid":55132,"tid":775,"ts":458738261491,"tts":28087691},
-      ]).otherUserTimingMarks,
-    ).toMatchInlineSnapshot(`
-      Array [
-        Object {
-          "name": "VCWithoutImage: root",
-          "timestamp": -3106.503,
-        },
-        Object {
-          "name": "--a-mark-that-looks-like-one-of-ours",
-          "timestamp": 186.459,
-        },
-        Object {
-          "name": "Some other mark",
-          "timestamp": 191.594,
-        },
-      ]
-    `);
-  });
-
-  // TODO: Add test for flamechart parsing
-});
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index e5239fd78d1f..da4153f677de 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -82,6 +82,7 @@ function markWorkStarted(
   type: ReactMeasureType,
   startTime: Milliseconds,
   lanes: ReactLane[],
+  laneLabels: Array<string>,
   currentProfilerData: ReactProfilerData,
   state: ProcessorState,
 ) {
@@ -96,6 +97,7 @@ function markWorkStarted(
     batchUID,
     depth,
     lanes,
+    laneLabels,
     timestamp: startTime,
     duration: 0,
   });
@@ -168,18 +170,20 @@ function processTimelineEvent(
 
   // React Events - schedule
   if (name.startsWith('--schedule-render-')) {
-    const [laneBitmaskString, ...splitComponentStack] = name
+    const [laneBitmaskString, laneLabels, ...splitComponentStack] = name
       .substr(18)
       .split('-');
     currentProfilerData.events.push({
       type: 'schedule-render',
       lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+      laneLabels: laneLabels ? laneLabels.split(',') : [],
       componentStack: splitComponentStack.join('-'),
       timestamp: startTime,
     });
   } else if (name.startsWith('--schedule-forced-update-')) {
     const [
       laneBitmaskString,
+      laneLabels,
       componentName,
       ...splitComponentStack
     ] = name.substr(25).split('-');
@@ -189,6 +193,7 @@ function processTimelineEvent(
     currentProfilerData.events.push({
       type: 'schedule-force-update',
       lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+      laneLabels: laneLabels ? laneLabels.split(',') : [],
       componentName,
       componentStack: splitComponentStack.join('-'),
       timestamp: startTime,
@@ -197,6 +202,7 @@ function processTimelineEvent(
   } else if (name.startsWith('--schedule-state-update-')) {
     const [
       laneBitmaskString,
+      laneLabels,
       componentName,
       ...splitComponentStack
     ] = name.substr(24).split('-');
@@ -206,6 +212,7 @@ function processTimelineEvent(
     currentProfilerData.events.push({
       type: 'schedule-state-update',
       lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+      laneLabels: laneLabels ? laneLabels.split(',') : [],
       componentName,
       componentStack: splitComponentStack.join('-'),
       timestamp: startTime,
@@ -255,7 +262,7 @@ function processTimelineEvent(
       state.nextRenderShouldGenerateNewBatchID = false;
       state.batchUID = ((state.uidCounter++: any): BatchUID);
     }
-    const laneBitmaskString = name.substr(15);
+    const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
     const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
     throwIfIncomplete('render', state.measureStack);
     if (getLastType(state.measureStack) !== 'render-idle') {
@@ -263,11 +270,19 @@ function processTimelineEvent(
         'render-idle',
         startTime,
         lanes,
+        laneLabels ? laneLabels.split(',') : [],
         currentProfilerData,
         state,
       );
     }
-    markWorkStarted('render', startTime, lanes, currentProfilerData, state);
+    markWorkStarted(
+      'render',
+      startTime,
+      lanes,
+      laneLabels ? laneLabels.split(',') : [],
+      currentProfilerData,
+      state,
+    );
   } else if (
     name.startsWith('--render-stop') ||
     name.startsWith('--render-yield')
@@ -297,9 +312,16 @@ function processTimelineEvent(
   // React Measures - commits
   else if (name.startsWith('--commit-start-')) {
     state.nextRenderShouldGenerateNewBatchID = true;
-    const laneBitmaskString = name.substr(15);
+    const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
     const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
-    markWorkStarted('commit', startTime, lanes, currentProfilerData, state);
+    markWorkStarted(
+      'commit',
+      startTime,
+      lanes,
+      laneLabels ? laneLabels.split(',') : [],
+      currentProfilerData,
+      state,
+    );
   } else if (name.startsWith('--commit-stop')) {
     markWorkCompleted(
       'commit',
@@ -317,12 +339,13 @@ function processTimelineEvent(
 
   // React Measures - layout effects
   else if (name.startsWith('--layout-effects-start-')) {
-    const laneBitmaskString = name.substr(23);
+    const [laneBitmaskString, laneLabels] = name.substr(23).split('-');
     const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
     markWorkStarted(
       'layout-effects',
       startTime,
       lanes,
+      laneLabels ? laneLabels.split(',') : [],
       currentProfilerData,
       state,
     );
@@ -337,12 +360,13 @@ function processTimelineEvent(
 
   // React Measures - passive effects
   else if (name.startsWith('--passive-effects-start-')) {
-    const laneBitmaskString = name.substr(24);
+    const [laneBitmaskString, laneLabels] = name.substr(24).split('-');
     const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
     markWorkStarted(
       'passive-effects',
       startTime,
       lanes,
+      laneLabels ? laneLabels.split(',') : [],
       currentProfilerData,
       state,
     );
@@ -366,6 +390,9 @@ function processTimelineEvent(
     // 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.
   } // eslint-disable-line brace-style
 
   // Unrecognized event
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index a5a1c0d43b22..833df582a529 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -30,6 +30,7 @@ type BaseReactEvent = {|
 type BaseReactScheduleEvent = {|
   ...BaseReactEvent,
   +lanes: ReactLane[],
+  +laneLabels: string[],
 |};
 export type ReactScheduleRenderEvent = {|
   ...BaseReactScheduleEvent,
@@ -86,6 +87,7 @@ export type BatchUID = number;
 export type ReactMeasure = {|
   +type: ReactMeasureType,
   +lanes: ReactLane[],
+  +laneLabels: string[],
   +timestamp: Milliseconds,
   +duration: Milliseconds,
   +batchUID: BatchUID,
diff --git a/packages/react-devtools-scheduling-profiler/webpack.config.js b/packages/react-devtools-scheduling-profiler/webpack.config.js
index b69a5d1b411e..9a167dda3f7e 100644
--- a/packages/react-devtools-scheduling-profiler/webpack.config.js
+++ b/packages/react-devtools-scheduling-profiler/webpack.config.js
@@ -56,6 +56,7 @@ const config = {
       __DEV__,
       __PROFILE__: false,
       __EXPERIMENTAL__: true,
+      __VARIANT__: false,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),
     new HtmlWebpackPlugin({
@@ -112,7 +113,7 @@ const config = {
 if (shouldUseDevServer) {
   config.devServer = {
     hot: true,
-    port: 8080,
+    port: 8081,
     clientLogLevel: 'warning',
     stats: 'errors-only',
   };
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 5f14a3140e30..7e577abb228e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -36,7 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -73,7 +73,10 @@ const OffscreenLanePriority: LanePriority = 1;
 
 export const NoLanePriority: LanePriority = 0;
 
-const TotalLanes = 31;
+// Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
+// 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;
@@ -82,10 +85,10 @@ export const SyncLane: Lane = /*                        */ 0b0000000000000000000
 export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
 
 export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
-const InputDiscreteLane: Lanes = /*                     */ 0b0000000000000000000000000001000;
+export const InputDiscreteLane: Lanes = /*              */ 0b0000000000000000000000000001000;
 
 const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000010000;
-const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000000100000;
+export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000100000;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
 export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
@@ -124,6 +127,60 @@ const IdleLane: Lanes = /*                              */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
+// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// It should be kept in sync with the Lanes values above.
+export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
+  if (enableSchedulingProfiler) {
+    const labels = [];
+    if (lanes & SyncLane) {
+      labels.push('Sync');
+    }
+    if (lanes & SyncBatchedLane) {
+      labels.push('SyncBatched');
+    }
+    if (lanes & InputDiscreteHydrationLane) {
+      labels.push('InputDiscreteHydration');
+    }
+    if (lanes & InputDiscreteLane) {
+      labels.push('InputDiscrete');
+    }
+    if (lanes & InputContinuousHydrationLane) {
+      labels.push('InputContinuousHydration');
+    }
+    if (lanes & InputContinuousLane) {
+      labels.push('InputContinuous');
+    }
+    if (lanes & DefaultHydrationLane) {
+      labels.push('DefaultHydration');
+    }
+    if (lanes & DefaultLane) {
+      labels.push('Default');
+    }
+    if (lanes & TransitionHydrationLane) {
+      labels.push('TransitionHydration');
+    }
+    if (lanes & TransitionLanes) {
+      labels.push('Transition(s)');
+    }
+    if (lanes & RetryLanes) {
+      labels.push('Retry(s)');
+    }
+    if (lanes & SelectiveHydrationLane) {
+      labels.push('SelectiveHydration');
+    }
+    if (lanes & IdleHydrationLane) {
+      labels.push('IdleHydration');
+    }
+    if (lanes & IdleLane) {
+      labels.push('Idle');
+    }
+    if (lanes & OffscreenLane) {
+      labels.push('Offscreen');
+    }
+    return labels;
+  }
+}
+
 export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 3c3eab4c8612..af73a5e56587 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -36,7 +36,7 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import invariant from 'shared/invariant';
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 
 import {
   ImmediatePriority as ImmediateSchedulerPriority,
@@ -73,7 +73,10 @@ const OffscreenLanePriority: LanePriority = 1;
 
 export const NoLanePriority: LanePriority = 0;
 
-const TotalLanes = 31;
+// Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
+// 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;
@@ -82,10 +85,10 @@ export const SyncLane: Lane = /*                        */ 0b0000000000000000000
 export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
 
 export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
-const InputDiscreteLane: Lanes = /*                     */ 0b0000000000000000000000000001000;
+export const InputDiscreteLane: Lanes = /*              */ 0b0000000000000000000000000001000;
 
 const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000010000;
-const InputContinuousLane: Lanes = /*                   */ 0b0000000000000000000000000100000;
+export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000100000;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
 export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
@@ -124,6 +127,60 @@ const IdleLane: Lanes = /*                              */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
+// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// It should be kept in sync with the Lanes values above.
+export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
+  if (enableSchedulingProfiler) {
+    const labels = [];
+    if (lanes & SyncLane) {
+      labels.push('Sync');
+    }
+    if (lanes & SyncBatchedLane) {
+      labels.push('SyncBatched');
+    }
+    if (lanes & InputDiscreteHydrationLane) {
+      labels.push('InputDiscreteHydration');
+    }
+    if (lanes & InputDiscreteLane) {
+      labels.push('InputDiscrete');
+    }
+    if (lanes & InputContinuousHydrationLane) {
+      labels.push('InputContinuousHydration');
+    }
+    if (lanes & InputContinuousLane) {
+      labels.push('InputContinuous');
+    }
+    if (lanes & DefaultHydrationLane) {
+      labels.push('DefaultHydration');
+    }
+    if (lanes & DefaultLane) {
+      labels.push('Default');
+    }
+    if (lanes & TransitionHydrationLane) {
+      labels.push('TransitionHydration');
+    }
+    if (lanes & TransitionLanes) {
+      labels.push('Transition(s)');
+    }
+    if (lanes & RetryLanes) {
+      labels.push('Retry(s)');
+    }
+    if (lanes & SelectiveHydrationLane) {
+      labels.push('SelectiveHydration');
+    }
+    if (lanes & IdleHydrationLane) {
+      labels.push('IdleHydration');
+    }
+    if (lanes & IdleLane) {
+      labels.push('Idle');
+    }
+    if (lanes & OffscreenLane) {
+      labels.push('Offscreen');
+    }
+    return labels;
+  }
+}
+
 export const NoTimestamp = -1;
 
 let currentUpdateLanePriority: LanePriority = NoLanePriority;
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 0779b870a274..ccc41f985487 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -11,10 +11,20 @@ import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {Fiber} from './ReactInternalTypes';
 import type {Wakeable} from 'shared/ReactTypes';
 
-import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
+import {
+  enableNewReconciler,
+  enableSchedulingProfiler,
+} from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
 import getComponentName from 'shared/getComponentName';
 
+import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler/src/ReactFiberLane.old';
+import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler/src/ReactFiberLane.new';
+
+const getLabelsForLanes = enableNewReconciler
+  ? getLabelsForLanes_new
+  : getLabelsForLanes_old;
+
 /**
  * If performance exists and supports the subset of the User Timing API that we
  * require.
@@ -49,8 +59,14 @@ if (enableSchedulingProfiler) {
   }
 }
 
-function formatLanes(laneOrLanes: Lane | Lanes): string {
-  return ((laneOrLanes: any): number).toString();
+export function formatLanes(laneOrLanes: Lane | Lanes): string {
+  let labels = getLabelsForLanes(laneOrLanes);
+  if (labels != null) {
+    labels = labels.sort().join(',');
+  } else {
+    labels = '';
+  }
+  return `${laneOrLanes}-${labels}`;
 }
 
 function markAndClear(name) {
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index dd3528da50fe..14f7f0412c9d 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -10,6 +10,7 @@
 
 'use strict';
 
+// This test is *.internal so that it can import this shared file.
 import ReactVersion from 'shared/ReactVersion';
 
 describe('SchedulingProfiler', () => {
@@ -17,9 +18,11 @@ describe('SchedulingProfiler', () => {
   let ReactTestRenderer;
   let ReactNoop;
   let Scheduler;
+  let ReactFiberLane;
 
   let clearedMarks;
   let featureDetectionMarkName = null;
+  let formatLanes;
   let marks;
 
   function createUserTimingPolyfill() {
@@ -76,6 +79,14 @@ describe('SchedulingProfiler', () => {
     ReactNoop = require('react-noop-renderer');
 
     Scheduler = require('scheduler');
+
+    const SchedulingProfiler = require('react-reconciler/src/SchedulingProfiler');
+    formatLanes = SchedulingProfiler.formatLanes;
+
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFiberLane = ReactFeatureFlags.enableNewReconciler
+      ? require('react-reconciler/src/ReactFiberLane.new')
+      : require('react-reconciler/src/ReactFiberLane.old');
   });
 
   afterEach(() => {
@@ -85,9 +96,6 @@ describe('SchedulingProfiler', () => {
     delete global.performance;
   });
 
-  // This is coupled to implementation
-  const DEFAULT_LANE = 128;
-
   // @gate !enableSchedulingProfiler
   it('should not mark if enableSchedulingProfiler is false', () => {
     ReactTestRenderer.create(<div />);
@@ -105,11 +113,11 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-1',
-      '--render-start-1',
+      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
+      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--render-stop',
-      '--commit-start-1',
-      '--layout-effects-start-1',
+      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -121,7 +129,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -129,10 +137,10 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      `--render-start-${DEFAULT_LANE}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
-      `--layout-effects-start-${DEFAULT_LANE}`,
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -156,8 +164,8 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
-      `--render-start-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--render-yield',
     ]);
   });
@@ -177,12 +185,12 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-1',
-      '--render-start-1',
+      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
+      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--suspense-suspend-0-Example',
       '--render-stop',
-      '--commit-start-1',
-      '--layout-effects-start-1',
+      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -208,12 +216,12 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      '--schedule-render-1',
-      '--render-start-1',
+      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
+      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--suspense-suspend-0-Example',
       '--render-stop',
-      '--commit-start-1',
-      '--layout-effects-start-1',
+      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -240,7 +248,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -248,11 +256,11 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      `--render-start-${DEFAULT_LANE}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--suspense-suspend-0-Example',
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
-      `--layout-effects-start-${DEFAULT_LANE}`,
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -279,7 +287,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -287,11 +295,11 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      `--render-start-${DEFAULT_LANE}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--suspense-suspend-0-Example',
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
-      `--layout-effects-start-${DEFAULT_LANE}`,
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--layout-effects-stop',
       '--commit-stop',
     ]);
@@ -318,7 +326,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -326,15 +334,15 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      `--render-start-${DEFAULT_LANE}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
-      `--layout-effects-start-${DEFAULT_LANE}`,
-      '--schedule-state-update-1-Example',
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,
       '--layout-effects-stop',
-      '--render-start-1',
+      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--render-stop',
-      '--commit-start-1',
+      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--commit-stop',
       '--commit-stop',
     ]);
@@ -355,7 +363,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -363,15 +371,17 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      `--render-start-${DEFAULT_LANE}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
-      `--layout-effects-start-${DEFAULT_LANE}`,
-      '--schedule-forced-update-1-Example',
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--schedule-forced-update-${formatLanes(
+        ReactFiberLane.SyncLane,
+      )}-Example`,
       '--layout-effects-stop',
-      '--render-start-1',
+      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--render-stop',
-      '--commit-start-1',
+      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--commit-stop',
       '--commit-stop',
     ]);
@@ -393,7 +403,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -402,7 +412,11 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    expectMarksToContain(`--schedule-state-update-${DEFAULT_LANE}-Example`);
+    expectMarksToContain(
+      `--schedule-state-update-${formatLanes(
+        ReactFiberLane.DefaultLane,
+      )}-Example`,
+    );
   });
 
   // @gate enableSchedulingProfiler
@@ -421,7 +435,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -430,7 +444,11 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    expectMarksToContain(`--schedule-forced-update-${DEFAULT_LANE}-Example`);
+    expectMarksToContain(
+      `--schedule-forced-update-${formatLanes(
+        ReactFiberLane.DefaultLane,
+      )}-Example`,
+    );
   });
 
   // @gate enableSchedulingProfiler
@@ -447,7 +465,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
     ]);
 
     clearPendingMarks();
@@ -455,15 +473,15 @@ describe('SchedulingProfiler', () => {
     expect(Scheduler).toFlushUntilNextPaint([]);
 
     expectMarksToEqual([
-      `--render-start-${DEFAULT_LANE}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
-      `--layout-effects-start-${DEFAULT_LANE}`,
-      '--schedule-state-update-1-Example',
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,
       '--layout-effects-stop',
-      '--render-start-1',
+      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--render-stop',
-      '--commit-start-1',
+      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--commit-stop',
       '--commit-stop',
     ]);
@@ -487,19 +505,21 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--react-init-${ReactVersion}`,
-      `--schedule-render-${DEFAULT_LANE}`,
-      `--render-start-${DEFAULT_LANE}`,
+      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
-      `--layout-effects-start-${DEFAULT_LANE}`,
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--layout-effects-stop',
       '--commit-stop',
-      `--passive-effects-start-${DEFAULT_LANE}`,
-      `--schedule-state-update-${DEFAULT_LANE}-Example`,
+      `--passive-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      `--schedule-state-update-${formatLanes(
+        ReactFiberLane.DefaultLane,
+      )}-Example`,
       '--passive-effects-stop',
-      `--render-start-${DEFAULT_LANE}`,
+      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--render-stop',
-      `--commit-start-${DEFAULT_LANE}`,
+      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--commit-stop',
     ]);
   });
@@ -518,6 +538,10 @@ describe('SchedulingProfiler', () => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
-    expectMarksToContain(`--schedule-state-update-${DEFAULT_LANE}-Example`);
+    expectMarksToContain(
+      `--schedule-state-update-${formatLanes(
+        ReactFiberLane.DefaultLane,
+      )}-Example`,
+    );
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
new file mode 100644
index 000000000000..d06371940b47
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -0,0 +1,179 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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';
+
+// This test schedules work for as many lanes as we can (easily) using public APIs.
+// It will hopefully serve as a reminder to update getLabelsForLanes() when we update Lanes.
+// It's okay to delete any individual test in this file if the public API changes.
+describe('SchedulingProfiler labels', () => {
+  let React;
+  let ReactDOM;
+  let ReactFiberLane;
+
+  let act;
+  let clearedMarks;
+  let featureDetectionMarkName = null;
+  let formatLanes;
+  let marks;
+
+  function polyfillJSDomUserTiming() {
+    featureDetectionMarkName = null;
+
+    clearedMarks = [];
+    marks = [];
+
+    // 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
+
+    // JSDom already implements global.performance and it can't be overridden.
+    // However it only supports now() and timeOrigin() so we need to "upgrade it" in place.
+
+    if (!global.performance) {
+      global.performance = {};
+    }
+
+    global.performance.clearMarks = function clearMarks(markName) {
+      clearedMarks.push(markName);
+      marks = marks.filter(mark => mark !== markName);
+    };
+
+    global.performance.mark = function mark(markName, markOptions) {
+      if (featureDetectionMarkName === null) {
+        featureDetectionMarkName = markName;
+      }
+      marks.push(markName);
+      if (markOptions != null) {
+        // This is triggers the feature detection.
+        markOptions.startTime++;
+      }
+    };
+  }
+
+  function dispatchAndSetCurrentEvent(element, event) {
+    try {
+      window.event = event;
+      element.dispatchEvent(event);
+    } finally {
+      window.event = undefined;
+    }
+  }
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    polyfillJSDomUserTiming();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const TestUtils = require('react-dom/test-utils');
+    act = TestUtils.act;
+
+    const SchedulingProfiler = require('react-reconciler/src/SchedulingProfiler');
+    formatLanes = SchedulingProfiler.formatLanes;
+
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFiberLane = ReactFeatureFlags.enableNewReconciler
+      ? require('react-reconciler/src/ReactFiberLane.new')
+      : require('react-reconciler/src/ReactFiberLane.old');
+  });
+
+  afterEach(() => {
+    // Verify all logged marks also get cleared.
+    expect(marks).toHaveLength(0);
+
+    delete global.performance;
+  });
+
+  // @gate enableSchedulingProfiler
+  it('regression test SyncLane', () => {
+    ReactDOM.render(<div />, document.createElement('div'));
+    expect(clearedMarks).toContain(
+      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
+    );
+  });
+
+  // @gate experimental
+  // @gate enableSchedulingProfiler
+  it('regression test DefaultLane', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    act(() => {
+      root.render(<div />);
+      expect(clearedMarks).toContain(
+        `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      );
+    });
+  });
+
+  // @gate experimental
+  // @gate enableSchedulingProfiler
+  // @gate !enableLegacyFBSupport
+  it('regression test InputDiscreteLane', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    const targetRef = React.createRef(null);
+
+    function App() {
+      const [count, setCount] = React.useState(0);
+      const handleClick = () => {
+        setCount(count + 1);
+      };
+      return <button ref={targetRef} onClick={handleClick} />;
+    }
+
+    act(() => {
+      root.render(<App />);
+    });
+
+    clearedMarks.splice(0);
+
+    act(() => {
+      targetRef.current.click();
+    });
+    expect(clearedMarks).toContain(
+      `--schedule-state-update-${formatLanes(
+        ReactFiberLane.InputDiscreteLane,
+      )}-App`,
+    );
+  });
+
+  // @gate experimental
+  // @gate enableSchedulingProfiler
+  it('regression test InputContinuousLane', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    const targetRef = React.createRef(null);
+
+    function App() {
+      const [count, setCount] = React.useState(0);
+      const handleMouseOver = () => setCount(count + 1);
+      return <div ref={targetRef} onMouseOver={handleMouseOver} />;
+    }
+
+    act(() => {
+      root.render(<App />);
+    });
+
+    clearedMarks.splice(0);
+
+    act(() => {
+      const event = document.createEvent('MouseEvents');
+      event.initEvent('mouseover', true, true);
+      dispatchAndSetCurrentEvent(targetRef.current, event);
+    });
+    expect(clearedMarks).toContain(
+      `--schedule-state-update-${formatLanes(
+        ReactFiberLane.InputContinuousLane,
+      )}-App`,
+    );
+  });
+});

From 4190a34588ec0b05aac6f050ec656ec4b3f005d7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 23 Feb 2021 12:15:36 -0500
Subject: [PATCH 0278/1603] Update scheduling profiler Webpack config (#20867)

Use the pre-built scheduler (which includes a check for 'window' being defined in order to load the right scheduler implementation) rather than just directly importing a version of the scheduler that relies on window. Since the scheduling profiler's code runs partially in a web worker, it can't rely on window.
---
 packages/react-devtools-scheduling-profiler/webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-scheduling-profiler/webpack.config.js b/packages/react-devtools-scheduling-profiler/webpack.config.js
index 9a167dda3f7e..e30d4fda13db 100644
--- a/packages/react-devtools-scheduling-profiler/webpack.config.js
+++ b/packages/react-devtools-scheduling-profiler/webpack.config.js
@@ -49,6 +49,7 @@ const config = {
       react: resolve(builtModulesDir, 'react'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-refresh': resolve(builtModulesDir, 'react-refresh'),
+      scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
   plugins: [

From 9209c30ff98528cfbbe9df0774fda0b117975a25 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 24 Feb 2021 16:14:14 -0500
Subject: [PATCH 0279/1603] Add StrictMode level prop and createRoot
 unstable_strictModeLevel option (#20849)

* The exported '<React.StrictMode>' tag remains the same and opts legacy subtrees into strict mode level one ('mode == StrictModeL1'). This mode enables DEV-only double rendering, double component lifecycles, string ref warnings, legacy context warnings, etc. The primary purpose of this mode is to help detected render phase side effects. No new behavior. Roots created with experimental 'createRoot' and 'createBlockingRoot' APIs will also (for now) continue to default to strict mode level 1.

In a subsequent commit I will add support for a 'level' attribute on the '<React.StrictMode>' tag (as well as a new option supported by ). This will be the way to opt into strict mode level 2 ('mode == StrictModeL2'). This mode will enable DEV-only double invoking of effects on initial mount. This will simulate future Offscreen API semantics for trees being mounted, then hidden, and then shown again. The primary purpose of this mode is to enable applications to prepare for compatibility with the new Offscreen API (more information to follow shortly).

For now, this commit changes no public facing behavior. The only mechanism for opting into strict mode level 2 is the pre-existing 'enableDoubleInvokingEffects' feature flag (only enabled within Facebook for now).

* Renamed strict mode constants

StrictModeL1 -> StrictLegacyMode and StrictModeL2 -> StrictEffectsMode

* Renamed tests

* Split strict effects mode into two flags

One flag ('enableStrictEffects') enables strict mode level 2. It is similar to 'debugRenderPhaseSideEffectsForStrictMode' which enables srtict mode level 1.

The second flag ('createRootStrictEffectsByDefault') controls the default strict mode level for 'createRoot' trees. For now, all 'createRoot' trees remain level 1 by default. We will experiment with level 2 within Facebook.

This is a prerequisite for adding a configurable option to 'createRoot' that enables choosing a different StrictMode level than the default.

* Add StrictMode 'unstable_level' prop and createRoot 'unstable_strictModeLevel' option

New StrictMode 'unstable_level' prop allows specifying which level of strict mode to use. If no level attribute is specified, StrictLegacyMode will be used to maintain backwards compatibility. Otherwise the following is true:
* Level 0 does nothing
* Level 1 selects StrictLegacyMode
* Level 2 selects StrictEffectsMode (which includes StrictLegacyMode)

Levels can be increased with nesting (0 -> 1 -> 2) but not decreased.

This commit also adds a new 'unstable_strictModeLevel' option to the createRoot and createBatchedRoot APIs. This option can be used to override default behavior to increase or decrease the StrictMode level of the root.

A subsequent commit will add additional DEV warnings:
* If a nested StrictMode tag attempts to explicitly decrease the level
* If a level attribute changes in an update
---
 packages/react-dom/src/client/ReactDOMRoot.js |  14 +-
 .../react-native-renderer/src/ReactFabric.js  |   2 +-
 .../src/ReactNativeRenderer.js                |   2 +-
 .../src/createReactNoop.js                    |   5 +-
 .../src/ReactChildFiber.new.js                |   4 +-
 .../src/ReactChildFiber.old.js                |   4 +-
 .../react-reconciler/src/ReactFiber.new.js    |  64 +-
 .../react-reconciler/src/ReactFiber.old.js    |  64 +-
 .../src/ReactFiberBeginWork.new.js            |  12 +-
 .../src/ReactFiberBeginWork.old.js            |  12 +-
 .../src/ReactFiberClassComponent.new.js       |  31 +-
 .../src/ReactFiberClassComponent.old.js       |  31 +-
 .../src/ReactFiberCommitWork.new.js           |  26 +-
 .../src/ReactFiberCommitWork.old.js           |  26 +-
 .../src/ReactFiberHooks.new.js                |  26 +-
 .../src/ReactFiberHooks.old.js                |  26 +-
 .../src/ReactFiberReconciler.new.js           |  15 +-
 .../src/ReactFiberReconciler.old.js           |  15 +-
 .../src/ReactFiberRoot.new.js                 |   3 +-
 .../src/ReactFiberRoot.old.js                 |   3 +-
 .../src/ReactFiberWorkLoop.new.js             |  25 +-
 .../src/ReactFiberWorkLoop.old.js             |  25 +-
 .../src/ReactStrictModeWarnings.new.js        |  10 +-
 .../src/ReactStrictModeWarnings.old.js        |  10 +-
 .../react-reconciler/src/ReactTypeOfMode.js   |  16 +-
 .../src/ReactUpdateQueue.new.js               |   6 +-
 .../src/ReactUpdateQueue.old.js               |   6 +-
 .../ReactDoubleInvokeEvents-test.internal.js  | 747 ------------------
 ...ents-test.js => StrictEffectsMode-test.js} |   5 +-
 ...StrictEffectsModeDefaults-test.internal.js | 635 +++++++++++++++
 .../src/ReactTestRenderer.js                  |   1 +
 .../__tests__/ReactProfiler-test.internal.js  |   3 +-
 .../ReactStrictMode-test.internal.js          | 264 +++++++
 packages/shared/ReactFeatureFlags.js          |  12 +-
 .../forks/ReactFeatureFlags.native-fb.js      |   3 +-
 .../forks/ReactFeatureFlags.native-oss.js     |   3 +-
 .../forks/ReactFeatureFlags.test-renderer.js  |   3 +-
 .../ReactFeatureFlags.test-renderer.native.js |   3 +-
 .../ReactFeatureFlags.test-renderer.www.js    |   3 +-
 .../shared/forks/ReactFeatureFlags.testing.js |   3 +-
 .../forks/ReactFeatureFlags.testing.www.js    |   3 +-
 .../forks/ReactFeatureFlags.www-dynamic.js    |   3 +-
 .../shared/forks/ReactFeatureFlags.www.js     |   3 +-
 43 files changed, 1243 insertions(+), 934 deletions(-)
 delete mode 100644 packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
 rename packages/react-reconciler/src/__tests__/{ReactDoubleInvokeEvents-test.js => StrictEffectsMode-test.js} (99%)
 create mode 100644 packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
 create mode 100644 packages/react/src/__tests__/ReactStrictMode-test.internal.js

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 66a31328540e..62a72dc22961 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -27,6 +27,7 @@ export type RootOptions = {
     mutableSources?: Array<MutableSource<any>>,
     ...
   },
+  unstable_strictModeLevel?: number,
   ...
 };
 
@@ -128,7 +129,18 @@ function createRootImpl(
       options.hydrationOptions != null &&
       options.hydrationOptions.mutableSources) ||
     null;
-  const root = createContainer(container, tag, hydrate, hydrationCallbacks);
+  const strictModeLevelOverride =
+    options != null && options.unstable_strictModeLevel != null
+      ? options.unstable_strictModeLevel
+      : null;
+
+  const root = createContainer(
+    container,
+    tag,
+    hydrate,
+    hydrationCallbacks,
+    strictModeLevelOverride,
+  );
   markContainerAsRoot(root.current, container);
 
   const rootContainerElement =
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 87fe4e8e2bf1..03ad183c37df 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -203,7 +203,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index fdf9ebf5ac59..673482d0175c 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -202,7 +202,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 26c58ffd8445..743470966b3f 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -722,7 +722,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (!root) {
         const container = {rootID: rootID, pendingChildren: [], children: []};
         rootContainers.set(rootID, container);
-        root = NoopRenderer.createContainer(container, tag, false, null);
+        root = NoopRenderer.createContainer(container, tag, false, null, null);
         roots.set(rootID, root);
       }
       return root.current.stateNode.containerInfo;
@@ -740,6 +740,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         ConcurrentRoot,
         false,
         null,
+        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -766,6 +767,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         BlockingRoot,
         false,
         null,
+        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -792,6 +794,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         LegacyRoot,
         false,
         null,
+        null,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 3435694b7ab0..222a8730c4fa 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -46,7 +46,7 @@ import {
 } from './ReactFiber.new';
 import {emptyRefsObject} from './ReactFiberClassComponent.new';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.new';
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
@@ -114,7 +114,7 @@ function coerceRef(
       // TODO: Clean this up once we turn on the string ref warning for
       // everyone, because the strict mode case will no longer be relevant
       if (
-        (returnFiber.mode & StrictMode || warnAboutStringRefs) &&
+        (returnFiber.mode & StrictLegacyMode || warnAboutStringRefs) &&
         // We warn in ReactElement.js if owner and self are equal for string refs
         // because these cannot be automatically converted to an arrow function
         // using a codemod. Therefore, we don't have to warn about string refs again.
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 7a4ab0b17208..036fa65503c0 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -46,7 +46,7 @@ import {
 } from './ReactFiber.old';
 import {emptyRefsObject} from './ReactFiberClassComponent.old';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.old';
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
@@ -114,7 +114,7 @@ function coerceRef(
       // TODO: Clean this up once we turn on the string ref warning for
       // everyone, because the strict mode case will no longer be relevant
       if (
-        (returnFiber.mode & StrictMode || warnAboutStringRefs) &&
+        (returnFiber.mode & StrictLegacyMode || warnAboutStringRefs) &&
         // We warn in ReactElement.js if owner and self are equal for string refs
         // because these cannot be automatically converted to an arrow function
         // using a codemod. Therefore, we don't have to warn about string refs again.
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 983855ced568..f1a0f56b2340 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -19,9 +19,11 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
 import invariant from 'shared/invariant';
 import {
+  createRootStrictEffectsByDefault,
+  enableCache,
+  enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
-  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -64,7 +66,8 @@ import {
   ConcurrentMode,
   DebugTracingMode,
   ProfileMode,
-  StrictMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
   BlockingMode,
 } from './ReactTypeOfMode';
 import {
@@ -418,12 +421,47 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
   return workInProgress;
 }
 
-export function createHostRootFiber(tag: RootTag): Fiber {
+export function createHostRootFiber(
+  tag: RootTag,
+  strictModeLevelOverride: null | number,
+): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode | BlockingMode | StrictMode;
+    mode = ConcurrentMode | BlockingMode;
+    if (strictModeLevelOverride !== null) {
+      if (strictModeLevelOverride >= 1) {
+        mode |= StrictLegacyMode;
+      }
+      if (enableStrictEffects) {
+        if (strictModeLevelOverride >= 2) {
+          mode |= StrictEffectsMode;
+        }
+      }
+    } else {
+      if (enableStrictEffects && createRootStrictEffectsByDefault) {
+        mode |= StrictLegacyMode | StrictEffectsMode;
+      } else {
+        mode |= StrictLegacyMode;
+      }
+    }
   } else if (tag === BlockingRoot) {
-    mode = BlockingMode | StrictMode;
+    mode = BlockingMode;
+    if (strictModeLevelOverride !== null) {
+      if (strictModeLevelOverride >= 1) {
+        mode |= StrictLegacyMode;
+      }
+      if (enableStrictEffects) {
+        if (strictModeLevelOverride >= 2) {
+          mode |= StrictEffectsMode;
+        }
+      }
+    } else {
+      if (enableStrictEffects && createRootStrictEffectsByDefault) {
+        mode |= StrictLegacyMode | StrictEffectsMode;
+      } else {
+        mode |= StrictLegacyMode;
+      }
+    }
   } else {
     mode = NoMode;
   }
@@ -472,7 +510,21 @@ export function createFiberFromTypeAndProps(
         break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
-        mode |= StrictMode;
+
+        // Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
+        const level =
+          pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;
+
+        // Levels cascade; higher levels inherit all lower level modes.
+        // It is explicitly not supported to lower a mode with nesting, only to increase it.
+        if (level >= 1) {
+          mode |= StrictLegacyMode;
+        }
+        if (enableStrictEffects) {
+          if (level >= 2) {
+            mode |= StrictEffectsMode;
+          }
+        }
         break;
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, lanes, key);
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index ed2ae45f4ec1..6419fd6b261b 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -19,9 +19,11 @@ import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
 import invariant from 'shared/invariant';
 import {
+  createRootStrictEffectsByDefault,
+  enableCache,
+  enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
-  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
@@ -64,7 +66,8 @@ import {
   ConcurrentMode,
   DebugTracingMode,
   ProfileMode,
-  StrictMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
   BlockingMode,
 } from './ReactTypeOfMode';
 import {
@@ -418,12 +421,47 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
   return workInProgress;
 }
 
-export function createHostRootFiber(tag: RootTag): Fiber {
+export function createHostRootFiber(
+  tag: RootTag,
+  strictModeLevelOverride: null | number,
+): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode | BlockingMode | StrictMode;
+    mode = ConcurrentMode | BlockingMode;
+    if (strictModeLevelOverride !== null) {
+      if (strictModeLevelOverride >= 1) {
+        mode |= StrictLegacyMode;
+      }
+      if (enableStrictEffects) {
+        if (strictModeLevelOverride >= 2) {
+          mode |= StrictEffectsMode;
+        }
+      }
+    } else {
+      if (enableStrictEffects && createRootStrictEffectsByDefault) {
+        mode |= StrictLegacyMode | StrictEffectsMode;
+      } else {
+        mode |= StrictLegacyMode;
+      }
+    }
   } else if (tag === BlockingRoot) {
-    mode = BlockingMode | StrictMode;
+    mode = BlockingMode;
+    if (strictModeLevelOverride !== null) {
+      if (strictModeLevelOverride >= 1) {
+        mode |= StrictLegacyMode;
+      }
+      if (enableStrictEffects) {
+        if (strictModeLevelOverride >= 2) {
+          mode |= StrictEffectsMode;
+        }
+      }
+    } else {
+      if (enableStrictEffects && createRootStrictEffectsByDefault) {
+        mode |= StrictLegacyMode | StrictEffectsMode;
+      } else {
+        mode |= StrictLegacyMode;
+      }
+    }
   } else {
     mode = NoMode;
   }
@@ -472,7 +510,21 @@ export function createFiberFromTypeAndProps(
         break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
-        mode |= StrictMode;
+
+        // Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
+        const level =
+          pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;
+
+        // Levels cascade; higher levels inherit all lower level modes.
+        // It is explicitly not supported to lower a mode with nesting, only to increase it.
+        if (level >= 1) {
+          mode |= StrictLegacyMode;
+        }
+        if (enableStrictEffects) {
+          if (level >= 2) {
+            mode |= StrictEffectsMode;
+          }
+        }
         break;
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, lanes, key);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6537d103e232..6dffcc328927 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -125,7 +125,7 @@ import {
   ConcurrentMode,
   NoMode,
   ProfileMode,
-  StrictMode,
+  StrictLegacyMode,
   BlockingMode,
 } from './ReactTypeOfMode';
 import {
@@ -357,7 +357,7 @@ function updateForwardRef(
     );
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -889,7 +889,7 @@ function updateFunctionComponent(
     );
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -1068,7 +1068,7 @@ function finishClassComponent(
       nextChildren = instance.render();
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode
+        workInProgress.mode & StrictLegacyMode
       ) {
         disableLogs();
         try {
@@ -1478,7 +1478,7 @@ function mountIndeterminateComponent(
       }
     }
 
-    if (workInProgress.mode & StrictMode) {
+    if (workInProgress.mode & StrictLegacyMode) {
       ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);
     }
 
@@ -1615,7 +1615,7 @@ function mountIndeterminateComponent(
 
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode
+        workInProgress.mode & StrictLegacyMode
       ) {
         disableLogs();
         try {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 4c0594329d94..7801afe9fa23 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -125,7 +125,7 @@ import {
   ConcurrentMode,
   NoMode,
   ProfileMode,
-  StrictMode,
+  StrictLegacyMode,
   BlockingMode,
 } from './ReactTypeOfMode';
 import {
@@ -357,7 +357,7 @@ function updateForwardRef(
     );
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -889,7 +889,7 @@ function updateFunctionComponent(
     );
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -1068,7 +1068,7 @@ function finishClassComponent(
       nextChildren = instance.render();
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode
+        workInProgress.mode & StrictLegacyMode
       ) {
         disableLogs();
         try {
@@ -1478,7 +1478,7 @@ function mountIndeterminateComponent(
       }
     }
 
-    if (workInProgress.mode & StrictMode) {
+    if (workInProgress.mode & StrictLegacyMode) {
       ReactStrictModeWarnings.recordLegacyContextWarning(workInProgress, null);
     }
 
@@ -1615,7 +1615,7 @@ function mountIndeterminateComponent(
 
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode
+        workInProgress.mode & StrictLegacyMode
       ) {
         disableLogs();
         try {
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 389b4877852d..8259e59a70bd 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -19,7 +19,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -31,11 +31,10 @@ import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
-  BlockingMode,
-  ConcurrentMode,
   DebugTracingMode,
   NoMode,
-  StrictMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
 } from './ReactTypeOfMode';
 
 import {
@@ -165,7 +164,7 @@ export function applyDerivedStateFromProps(
   if (__DEV__) {
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -318,7 +317,7 @@ function checkShouldComponentUpdate(
     if (__DEV__) {
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode
+        workInProgress.mode & StrictLegacyMode
       ) {
         disableLogs();
         try {
@@ -655,7 +654,7 @@ function constructClassInstance(
   if (__DEV__) {
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -862,7 +861,7 @@ function mountClassInstance(
       }
     }
 
-    if (workInProgress.mode & StrictMode) {
+    if (workInProgress.mode & StrictLegacyMode) {
       ReactStrictModeWarnings.recordLegacyContextWarning(
         workInProgress,
         instance,
@@ -909,8 +908,8 @@ function mountClassInstance(
   if (typeof instance.componentDidMount === 'function') {
     if (
       __DEV__ &&
-      enableDoubleInvokingEffects &&
-      (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      enableStrictEffects &&
+      (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
       // Never double-invoke effects for legacy roots.
       workInProgress.flags |= MountLayoutDev | Update;
@@ -988,8 +987,8 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+        enableStrictEffects &&
+        (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
         workInProgress.flags |= MountLayoutDev | Update;
@@ -1040,8 +1039,8 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+        enableStrictEffects &&
+        (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
         workInProgress.flags |= MountLayoutDev | Update;
@@ -1055,8 +1054,8 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+        enableStrictEffects &&
+        (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
         workInProgress.flags |= MountLayoutDev | Update;
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 5f366e7c253a..fe20322bb15a 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -19,7 +19,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -31,11 +31,10 @@ import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
-  BlockingMode,
-  ConcurrentMode,
   DebugTracingMode,
   NoMode,
-  StrictMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
 } from './ReactTypeOfMode';
 
 import {
@@ -165,7 +164,7 @@ export function applyDerivedStateFromProps(
   if (__DEV__) {
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -318,7 +317,7 @@ function checkShouldComponentUpdate(
     if (__DEV__) {
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
-        workInProgress.mode & StrictMode
+        workInProgress.mode & StrictLegacyMode
       ) {
         disableLogs();
         try {
@@ -655,7 +654,7 @@ function constructClassInstance(
   if (__DEV__) {
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
-      workInProgress.mode & StrictMode
+      workInProgress.mode & StrictLegacyMode
     ) {
       disableLogs();
       try {
@@ -862,7 +861,7 @@ function mountClassInstance(
       }
     }
 
-    if (workInProgress.mode & StrictMode) {
+    if (workInProgress.mode & StrictLegacyMode) {
       ReactStrictModeWarnings.recordLegacyContextWarning(
         workInProgress,
         instance,
@@ -909,8 +908,8 @@ function mountClassInstance(
   if (typeof instance.componentDidMount === 'function') {
     if (
       __DEV__ &&
-      enableDoubleInvokingEffects &&
-      (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+      enableStrictEffects &&
+      (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
       // Never double-invoke effects for legacy roots.
       workInProgress.flags |= MountLayoutDev | Update;
@@ -988,8 +987,8 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+        enableStrictEffects &&
+        (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
         workInProgress.flags |= MountLayoutDev | Update;
@@ -1040,8 +1039,8 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+        enableStrictEffects &&
+        (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
         workInProgress.flags |= MountLayoutDev | Update;
@@ -1055,8 +1054,8 @@ function resumeMountClassInstance(
     if (typeof instance.componentDidMount === 'function') {
       if (
         __DEV__ &&
-        enableDoubleInvokingEffects &&
-        (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+        enableStrictEffects &&
+        (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
         workInProgress.flags |= MountLayoutDev | Update;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e170114848cc..33ed1b5c95ce 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -35,7 +35,7 @@ import {
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2475,9 +2475,9 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
 }
 
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
@@ -2509,9 +2509,9 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
@@ -2534,9 +2534,9 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
@@ -2578,9 +2578,9 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7a27bbc48f87..7574eb4fd3d3 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -35,7 +35,7 @@ import {
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2475,9 +2475,9 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
 }
 
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
@@ -2509,9 +2509,9 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
@@ -2534,9 +2534,9 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
 }
 
 function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
@@ -2578,9 +2578,9 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
 }
 
 function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // 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:
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 32144cc1b050..9d1fa5f82ed8 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -29,14 +29,14 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 
 import {
   NoMode,
   BlockingMode,
-  ConcurrentMode,
   DebugTracingMode,
+  StrictEffectsMode,
 } from './ReactTypeOfMode';
 import {
   NoLane,
@@ -509,8 +509,8 @@ export function bailoutHooks(
   // complete phase (bubbleProperties).
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (workInProgress.mode & StrictEffectsMode) !== NoMode
   ) {
     workInProgress.flags &= ~(
       MountPassiveDevEffect |
@@ -1423,8 +1423,8 @@ function mountEffect(
   }
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
       MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
@@ -1461,8 +1461,8 @@ function mountLayoutEffect(
 ): void {
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
       MountLayoutDevEffect | UpdateEffect,
@@ -1533,8 +1533,8 @@ function mountImperativeHandle<T>(
 
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
       MountLayoutDevEffect | UpdateEffect,
@@ -1830,7 +1830,11 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      if (__DEV__ && enableDoubleInvokingEffects) {
+      if (
+        __DEV__ &&
+        enableStrictEffects &&
+        (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
+      ) {
         currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
       } else {
         currentlyRenderingFiber.flags |= PassiveEffect;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index ce0ac3663656..61f1a17452e4 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -29,14 +29,14 @@ import {
   enableCache,
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
 } from 'shared/ReactFeatureFlags';
 
 import {
   NoMode,
   BlockingMode,
-  ConcurrentMode,
   DebugTracingMode,
+  StrictEffectsMode,
 } from './ReactTypeOfMode';
 import {
   NoLane,
@@ -509,8 +509,8 @@ export function bailoutHooks(
   // complete phase (bubbleProperties).
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (workInProgress.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (workInProgress.mode & StrictEffectsMode) !== NoMode
   ) {
     workInProgress.flags &= ~(
       MountPassiveDevEffect |
@@ -1423,8 +1423,8 @@ function mountEffect(
   }
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
       MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
@@ -1461,8 +1461,8 @@ function mountLayoutEffect(
 ): void {
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
       MountLayoutDevEffect | UpdateEffect,
@@ -1533,8 +1533,8 @@ function mountImperativeHandle<T>(
 
   if (
     __DEV__ &&
-    enableDoubleInvokingEffects &&
-    (currentlyRenderingFiber.mode & (BlockingMode | ConcurrentMode)) !== NoMode
+    enableStrictEffects &&
+    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
     return mountEffectImpl(
       MountLayoutDevEffect | UpdateEffect,
@@ -1830,7 +1830,11 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
     const setId = mountState(id)[1];
 
     if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
-      if (__DEV__ && enableDoubleInvokingEffects) {
+      if (
+        __DEV__ &&
+        enableStrictEffects &&
+        (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
+      ) {
         currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
       } else {
         currentlyRenderingFiber.flags |= PassiveEffect;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index be5ee15970dc..cc639fa0865f 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -75,7 +75,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   SyncLane,
   InputDiscreteHydrationLane,
@@ -204,7 +204,7 @@ function findHostInstanceWithWarning(
     if (hostFiber === null) {
       return null;
     }
-    if (hostFiber.mode & StrictMode) {
+    if (hostFiber.mode & StrictLegacyMode) {
       const componentName = getComponentName(fiber.type) || 'Component';
       if (!didWarnAboutFindNodeInStrictMode[componentName]) {
         didWarnAboutFindNodeInStrictMode[componentName] = true;
@@ -212,7 +212,7 @@ function findHostInstanceWithWarning(
         const previousFiber = ReactCurrentFiberCurrent;
         try {
           setCurrentDebugFiberInDEV(hostFiber);
-          if (fiber.mode & StrictMode) {
+          if (fiber.mode & StrictLegacyMode) {
             console.error(
               '%s is deprecated in StrictMode. ' +
                 '%s was passed an instance of %s which is inside StrictMode. ' +
@@ -256,8 +256,15 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  strictModeLevelOverride: null | number,
 ): OpaqueRoot {
-  return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
+  return createFiberRoot(
+    containerInfo,
+    tag,
+    hydrate,
+    hydrationCallbacks,
+    strictModeLevelOverride,
+  );
 }
 
 export function updateContainer(
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 77032eb24b10..3044bf934daf 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -75,7 +75,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   SyncLane,
   InputDiscreteHydrationLane,
@@ -204,7 +204,7 @@ function findHostInstanceWithWarning(
     if (hostFiber === null) {
       return null;
     }
-    if (hostFiber.mode & StrictMode) {
+    if (hostFiber.mode & StrictLegacyMode) {
       const componentName = getComponentName(fiber.type) || 'Component';
       if (!didWarnAboutFindNodeInStrictMode[componentName]) {
         didWarnAboutFindNodeInStrictMode[componentName] = true;
@@ -212,7 +212,7 @@ function findHostInstanceWithWarning(
         const previousFiber = ReactCurrentFiberCurrent;
         try {
           setCurrentDebugFiberInDEV(hostFiber);
-          if (fiber.mode & StrictMode) {
+          if (fiber.mode & StrictLegacyMode) {
             console.error(
               '%s is deprecated in StrictMode. ' +
                 '%s was passed an instance of %s which is inside StrictMode. ' +
@@ -256,8 +256,15 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  strictModeLevelOverride: null | number,
 ): OpaqueRoot {
-  return createFiberRoot(containerInfo, tag, hydrate, hydrationCallbacks);
+  return createFiberRoot(
+    containerInfo,
+    tag,
+    hydrate,
+    hydrationCallbacks,
+    strictModeLevelOverride,
+  );
 }
 
 export function updateContainer(
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 9057137ec61a..ae6a5bdb596f 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -91,6 +91,7 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  strictModeLevelOverride: null | number,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
   if (enableSuspenseCallback) {
@@ -99,7 +100,7 @@ export function createFiberRoot(
 
   // Cyclic construction. This cheats the type system right now because
   // stateNode is any.
-  const uninitializedFiber = createHostRootFiber(tag);
+  const uninitializedFiber = createHostRootFiber(tag, strictModeLevelOverride);
   root.current = uninitializedFiber;
   uninitializedFiber.stateNode = root;
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 92ec811dd558..0c0d45c09872 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -91,6 +91,7 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  strictModeLevelOverride: null | number,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
   if (enableSuspenseCallback) {
@@ -99,7 +100,7 @@ export function createFiberRoot(
 
   // Cyclic construction. This cheats the type system right now because
   // stateNode is any.
-  const uninitializedFiber = createHostRootFiber(tag);
+  const uninitializedFiber = createHostRootFiber(tag, strictModeLevelOverride);
   root.current = uninitializedFiber;
   uninitializedFiber.stateNode = root;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 918261a2e356..7caee0787251 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,7 +32,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
   skipUnmountedBoundaries,
   enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
@@ -104,7 +104,7 @@ import {
 } from './ReactFiber.new';
 import {
   NoMode,
-  StrictMode,
+  StrictLegacyMode,
   ProfileMode,
   BlockingMode,
   ConcurrentMode,
@@ -2070,7 +2070,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     legacyErrorBoundariesThatAlreadyFailed = null;
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     if (!rootDidHavePassiveEffects) {
       commitDoubleInvokeEffectsInDEV(root.current, false);
     }
@@ -2257,7 +2257,7 @@ function flushPassiveEffectsImpl() {
     markPassiveEffectsStopped();
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     commitDoubleInvokeEffectsInDEV(root.current, true);
   }
 
@@ -2560,11 +2560,10 @@ function commitDoubleInvokeEffectsInDEV(
   fiber: Fiber,
   hasPassiveEffects: boolean,
 ) {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // Never double-invoke effects for legacy roots.
-    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
-      return;
-    }
+  if (__DEV__ && enableStrictEffects) {
+    // 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.
 
     setCurrentDebugFiberInDEV(fiber);
     invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
@@ -2589,9 +2588,9 @@ function invokeEffectsInDev(
   fiberFlags: Flags,
   invokeEffectFn: (fiber: Fiber) => void,
 ): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // We don't need to re-check StrictEffectsMode here.
+    // This function is only called if that check has already passed.
 
     let current = firstChild;
     let subtreeRoot = null;
@@ -2934,7 +2933,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
       warnsIfNotActing === true &&
-      (fiber.mode & StrictMode) !== NoMode &&
+      (fiber.mode & StrictLegacyMode) !== NoMode &&
       IsSomeRendererActing.current === false &&
       IsThisRendererActing.current === false
     ) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 12ef384a4752..1467929ce459 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,7 +32,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
   skipUnmountedBoundaries,
   enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
@@ -104,7 +104,7 @@ import {
 } from './ReactFiber.old';
 import {
   NoMode,
-  StrictMode,
+  StrictLegacyMode,
   ProfileMode,
   BlockingMode,
   ConcurrentMode,
@@ -2070,7 +2070,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     legacyErrorBoundariesThatAlreadyFailed = null;
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     if (!rootDidHavePassiveEffects) {
       commitDoubleInvokeEffectsInDEV(root.current, false);
     }
@@ -2257,7 +2257,7 @@ function flushPassiveEffectsImpl() {
     markPassiveEffectsStopped();
   }
 
-  if (__DEV__ && enableDoubleInvokingEffects) {
+  if (__DEV__ && enableStrictEffects) {
     commitDoubleInvokeEffectsInDEV(root.current, true);
   }
 
@@ -2560,11 +2560,10 @@ function commitDoubleInvokeEffectsInDEV(
   fiber: Fiber,
   hasPassiveEffects: boolean,
 ) {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // Never double-invoke effects for legacy roots.
-    if ((fiber.mode & (BlockingMode | ConcurrentMode)) === NoMode) {
-      return;
-    }
+  if (__DEV__ && enableStrictEffects) {
+    // 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.
 
     setCurrentDebugFiberInDEV(fiber);
     invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
@@ -2589,9 +2588,9 @@ function invokeEffectsInDev(
   fiberFlags: Flags,
   invokeEffectFn: (fiber: Fiber) => void,
 ): void {
-  if (__DEV__ && enableDoubleInvokingEffects) {
-    // We don't need to re-check for legacy roots here.
-    // This function will not be called within legacy roots.
+  if (__DEV__ && enableStrictEffects) {
+    // We don't need to re-check StrictEffectsMode here.
+    // This function is only called if that check has already passed.
 
     let current = firstChild;
     let subtreeRoot = null;
@@ -2934,7 +2933,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
       warnsIfNotActing === true &&
-      (fiber.mode & StrictMode) !== NoMode &&
+      (fiber.mode & StrictLegacyMode) !== NoMode &&
       IsSomeRendererActing.current === false &&
       IsThisRendererActing.current === false
     ) {
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js
index 5dd09a8cc80d..972c106c632c 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js
@@ -14,7 +14,7 @@ import {
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
 import getComponentName from 'shared/getComponentName';
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 
 type FiberArray = Array<Fiber>;
 type FiberToFiberComponentsMap = Map<Fiber, FiberArray>;
@@ -33,7 +33,7 @@ if (__DEV__) {
 
     let node = fiber;
     while (node !== null) {
-      if (node.mode & StrictMode) {
+      if (node.mode & StrictLegacyMode) {
         maybeStrictRoot = node;
       }
       node = node.return;
@@ -78,7 +78,7 @@ if (__DEV__) {
     }
 
     if (
-      fiber.mode & StrictMode &&
+      fiber.mode & StrictLegacyMode &&
       typeof instance.UNSAFE_componentWillMount === 'function'
     ) {
       pendingUNSAFE_ComponentWillMountWarnings.push(fiber);
@@ -92,7 +92,7 @@ if (__DEV__) {
     }
 
     if (
-      fiber.mode & StrictMode &&
+      fiber.mode & StrictLegacyMode &&
       typeof instance.UNSAFE_componentWillReceiveProps === 'function'
     ) {
       pendingUNSAFE_ComponentWillReceivePropsWarnings.push(fiber);
@@ -106,7 +106,7 @@ if (__DEV__) {
     }
 
     if (
-      fiber.mode & StrictMode &&
+      fiber.mode & StrictLegacyMode &&
       typeof instance.UNSAFE_componentWillUpdate === 'function'
     ) {
       pendingUNSAFE_ComponentWillUpdateWarnings.push(fiber);
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
index 5dd09a8cc80d..972c106c632c 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
@@ -14,7 +14,7 @@ import {
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
 import getComponentName from 'shared/getComponentName';
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 
 type FiberArray = Array<Fiber>;
 type FiberToFiberComponentsMap = Map<Fiber, FiberArray>;
@@ -33,7 +33,7 @@ if (__DEV__) {
 
     let node = fiber;
     while (node !== null) {
-      if (node.mode & StrictMode) {
+      if (node.mode & StrictLegacyMode) {
         maybeStrictRoot = node;
       }
       node = node.return;
@@ -78,7 +78,7 @@ if (__DEV__) {
     }
 
     if (
-      fiber.mode & StrictMode &&
+      fiber.mode & StrictLegacyMode &&
       typeof instance.UNSAFE_componentWillMount === 'function'
     ) {
       pendingUNSAFE_ComponentWillMountWarnings.push(fiber);
@@ -92,7 +92,7 @@ if (__DEV__) {
     }
 
     if (
-      fiber.mode & StrictMode &&
+      fiber.mode & StrictLegacyMode &&
       typeof instance.UNSAFE_componentWillReceiveProps === 'function'
     ) {
       pendingUNSAFE_ComponentWillReceivePropsWarnings.push(fiber);
@@ -106,7 +106,7 @@ if (__DEV__) {
     }
 
     if (
-      fiber.mode & StrictMode &&
+      fiber.mode & StrictLegacyMode &&
       typeof instance.UNSAFE_componentWillUpdate === 'function'
     ) {
       pendingUNSAFE_ComponentWillUpdateWarnings.push(fiber);
diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js
index f6092058d2ba..a6499be7aca1 100644
--- a/packages/react-reconciler/src/ReactTypeOfMode.js
+++ b/packages/react-reconciler/src/ReactTypeOfMode.js
@@ -9,11 +9,11 @@
 
 export type TypeOfMode = number;
 
-export const NoMode = 0b00000;
-export const StrictMode = 0b00001;
-// TODO: Remove BlockingMode and ConcurrentMode by reading from the root
-// tag instead
-export const BlockingMode = 0b00010;
-export const ConcurrentMode = 0b00100;
-export const ProfileMode = 0b01000;
-export const DebugTracingMode = 0b10000;
+export const NoMode = /*            */ 0b000000;
+// TODO: Remove BlockingMode and ConcurrentMode by reading from the root tag instead
+export const BlockingMode = /*      */ 0b000001;
+export const ConcurrentMode = /*    */ 0b000010;
+export const ProfileMode = /*       */ 0b000100;
+export const DebugTracingMode = /*  */ 0b001000;
+export const StrictLegacyMode = /*  */ 0b010000;
+export const StrictEffectsMode = /* */ 0b100000;
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index bb4e9e1bc52d..0bdcbf580764 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -104,7 +104,7 @@ import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags';
 
 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   markSkippedUpdateLanes,
   isInterleavedUpdate,
@@ -392,7 +392,7 @@ function getStateFromUpdate<State>(
         if (__DEV__) {
           if (
             debugRenderPhaseSideEffectsForStrictMode &&
-            workInProgress.mode & StrictMode
+            workInProgress.mode & StrictLegacyMode
           ) {
             disableLogs();
             try {
@@ -425,7 +425,7 @@ function getStateFromUpdate<State>(
         if (__DEV__) {
           if (
             debugRenderPhaseSideEffectsForStrictMode &&
-            workInProgress.mode & StrictMode
+            workInProgress.mode & StrictLegacyMode
           ) {
             disableLogs();
             try {
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 6b578ef9c80d..209abfb32e74 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -104,7 +104,7 @@ import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags';
 
 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
-import {StrictMode} from './ReactTypeOfMode';
+import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   markSkippedUpdateLanes,
   isInterleavedUpdate,
@@ -392,7 +392,7 @@ function getStateFromUpdate<State>(
         if (__DEV__) {
           if (
             debugRenderPhaseSideEffectsForStrictMode &&
-            workInProgress.mode & StrictMode
+            workInProgress.mode & StrictLegacyMode
           ) {
             disableLogs();
             try {
@@ -425,7 +425,7 @@ function getStateFromUpdate<State>(
         if (__DEV__) {
           if (
             debugRenderPhaseSideEffectsForStrictMode &&
-            workInProgress.mode & StrictMode
+            workInProgress.mode & StrictLegacyMode
           ) {
             disableLogs();
             try {
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
deleted file mode 100644
index b53b7b719c6b..000000000000
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.internal.js
+++ /dev/null
@@ -1,747 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactNoop;
-let Scheduler;
-
-function shouldDoubleInvokingEffects() {
-  // For now, this feature only exists in the old fork (while the new fork is being bisected).
-  // Eventually we'll land it in both forks.
-  return __DEV__;
-}
-
-describe('ReactDoubleInvokeEvents', () => {
-  beforeEach(() => {
-    jest.resetModules();
-    React = require('react');
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactNoop = require('react-noop-renderer');
-    Scheduler = require('scheduler');
-
-    ReactFeatureFlags.enableDoubleInvokingEffects = shouldDoubleInvokingEffects();
-  });
-
-  it('should not double invoke effects in legacy mode', () => {
-    function App({text}) {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('useEffect mount');
-        return () => Scheduler.unstable_yieldValue('useEffect unmount');
-      });
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('useLayoutEffect mount');
-        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
-      });
-
-      return text;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useLayoutEffect mount',
-      'useEffect mount',
-    ]);
-  });
-
-  it('should not double invoke class lifecycles in legacy mode', () => {
-    class App extends React.PureComponent {
-      componentDidMount() {
-        Scheduler.unstable_yieldValue('componentDidMount');
-      }
-
-      componentDidUpdate() {
-        Scheduler.unstable_yieldValue('componentDidUpdate');
-      }
-
-      componentWillUnmount() {
-        Scheduler.unstable_yieldValue('componentWillUnmount');
-      }
-
-      render() {
-        return this.props.text;
-      }
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
-    });
-
-    expect(Scheduler).toHaveYielded(['componentDidMount']);
-  });
-
-  it('should flush double-invoked effects within the same frame as layout effects if there are no passive effects', () => {
-    function ComponentWithEffects({label}) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
-        return () =>
-          Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
-      });
-
-      return label;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(
-        <>
-          <ComponentWithEffects label={'one'} />
-        </>,
-      );
-
-      if (shouldDoubleInvokingEffects()) {
-        expect(Scheduler).toFlushUntilNextPaint([
-          'useLayoutEffect mount "one"',
-          'useLayoutEffect unmount "one"',
-          'useLayoutEffect mount "one"',
-        ]);
-      } else {
-        expect(Scheduler).toFlushUntilNextPaint([
-          'useLayoutEffect mount "one"',
-        ]);
-      }
-    });
-
-    ReactNoop.act(() => {
-      ReactNoop.render(
-        <>
-          <ComponentWithEffects label={'one'} />
-          <ComponentWithEffects label={'two'} />
-        </>,
-      );
-
-      if (shouldDoubleInvokingEffects()) {
-        expect(Scheduler).toFlushUntilNextPaint([
-          // 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"',
-        ]);
-      } else {
-        expect(Scheduler).toFlushUntilNextPaint([
-          'useLayoutEffect unmount "one"',
-          'useLayoutEffect mount "one"',
-          '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', () => {
-    function ComponentWithEffects({label}) {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue(`useEffect mount "${label}"`);
-        return () =>
-          Scheduler.unstable_yieldValue(`useEffect unmount "${label}"`);
-      });
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
-        return () =>
-          Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
-      });
-
-      return label;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(
-        <>
-          <ComponentWithEffects label={'one'} />
-        </>,
-      );
-
-      if (shouldDoubleInvokingEffects()) {
-        expect(Scheduler).toFlushAndYieldThrough([
-          'useLayoutEffect mount "one"',
-        ]);
-        expect(Scheduler).toFlushAndYield([
-          'useEffect mount "one"',
-          'useLayoutEffect unmount "one"',
-          'useEffect unmount "one"',
-          'useLayoutEffect mount "one"',
-          'useEffect mount "one"',
-        ]);
-      } else {
-        expect(Scheduler).toFlushAndYieldThrough([
-          'useLayoutEffect mount "one"',
-        ]);
-        expect(Scheduler).toFlushAndYield(['useEffect mount "one"']);
-      }
-    });
-
-    ReactNoop.act(() => {
-      ReactNoop.render(
-        <>
-          <ComponentWithEffects label={'one'} />
-          <ComponentWithEffects label={'two'} />
-        </>,
-      );
-
-      if (shouldDoubleInvokingEffects()) {
-        expect(Scheduler).toFlushAndYieldThrough([
-          // Cleanup and re-run "one" (and "two") since there is no dependencies array.
-          'useLayoutEffect unmount "one"',
-          'useLayoutEffect mount "one"',
-          'useLayoutEffect mount "two"',
-        ]);
-        expect(Scheduler).toFlushAndYield([
-          '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"',
-        ]);
-      } else {
-        expect(Scheduler).toFlushAndYieldThrough([
-          'useLayoutEffect unmount "one"',
-          'useLayoutEffect mount "one"',
-          'useLayoutEffect mount "two"',
-        ]);
-        expect(Scheduler).toFlushAndYield([
-          'useEffect unmount "one"',
-          'useEffect mount "one"',
-          'useEffect mount "two"',
-        ]);
-      }
-    });
-  });
-
-  it('double invoking for effects for modern roots', () => {
-    function App({text}) {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('useEffect mount');
-        return () => Scheduler.unstable_yieldValue('useEffect unmount');
-      });
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('useLayoutEffect mount');
-        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
-      });
-
-      return text;
-    }
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect mount',
-        'useEffect mount',
-        'useLayoutEffect unmount',
-        'useEffect unmount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect mount',
-        'useEffect mount',
-      ]);
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useLayoutEffect unmount',
-      'useLayoutEffect mount',
-      'useEffect unmount',
-      'useEffect mount',
-    ]);
-
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useLayoutEffect unmount',
-      'useEffect unmount',
-    ]);
-  });
-
-  it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
-    function App({text}) {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('useEffect One mount');
-        return () => Scheduler.unstable_yieldValue('useEffect One unmount');
-      });
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('useEffect Two mount');
-        return () => Scheduler.unstable_yieldValue('useEffect Two unmount');
-      });
-
-      return text;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'useEffect One mount',
-        'useEffect Two mount',
-        'useEffect One unmount',
-        'useEffect Two unmount',
-        'useEffect One mount',
-        'useEffect Two mount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'useEffect One mount',
-        'useEffect Two mount',
-      ]);
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useEffect One unmount',
-      'useEffect Two unmount',
-      'useEffect One mount',
-      'useEffect Two mount',
-    ]);
-
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useEffect One unmount',
-      'useEffect Two unmount',
-    ]);
-  });
-
-  it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
-    function App({text}) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('useLayoutEffect One mount');
-        return () =>
-          Scheduler.unstable_yieldValue('useLayoutEffect One unmount');
-      });
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('useLayoutEffect Two mount');
-        return () =>
-          Scheduler.unstable_yieldValue('useLayoutEffect Two unmount');
-      });
-
-      return text;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect One mount',
-        'useLayoutEffect Two mount',
-        'useLayoutEffect One unmount',
-        'useLayoutEffect Two unmount',
-        'useLayoutEffect One mount',
-        'useLayoutEffect Two mount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect One mount',
-        'useLayoutEffect Two mount',
-      ]);
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useLayoutEffect One unmount',
-      'useLayoutEffect Two unmount',
-      'useLayoutEffect One mount',
-      'useLayoutEffect Two mount',
-    ]);
-
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useLayoutEffect One unmount',
-      'useLayoutEffect Two unmount',
-    ]);
-  });
-
-  it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {
-    function App({text}) {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('useEffect mount');
-      });
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('useLayoutEffect mount');
-      });
-
-      return text;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect mount',
-        'useEffect mount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'useLayoutEffect mount',
-        'useEffect mount',
-      ]);
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useLayoutEffect mount',
-      'useEffect mount',
-    ]);
-
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
-    });
-
-    expect(Scheduler).toHaveYielded([]);
-  });
-
-  it('passes the right context to class component lifecycles', () => {
-    class App extends React.PureComponent {
-      test() {}
-
-      componentDidMount() {
-        this.test();
-        Scheduler.unstable_yieldValue('componentDidMount');
-      }
-
-      componentDidUpdate() {
-        this.test();
-        Scheduler.unstable_yieldValue('componentDidUpdate');
-      }
-
-      componentWillUnmount() {
-        this.test();
-        Scheduler.unstable_yieldValue('componentWillUnmount');
-      }
-
-      render() {
-        return null;
-      }
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'componentDidMount',
-        'componentWillUnmount',
-        'componentDidMount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded(['componentDidMount']);
-    }
-  });
-
-  it('double invoking works for class components', () => {
-    class App extends React.PureComponent {
-      componentDidMount() {
-        Scheduler.unstable_yieldValue('componentDidMount');
-      }
-
-      componentDidUpdate() {
-        Scheduler.unstable_yieldValue('componentDidUpdate');
-      }
-
-      componentWillUnmount() {
-        Scheduler.unstable_yieldValue('componentWillUnmount');
-      }
-
-      render() {
-        return this.props.text;
-      }
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'componentDidMount',
-        'componentWillUnmount',
-        'componentDidMount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded(['componentDidMount']);
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'update'} />);
-    });
-
-    expect(Scheduler).toHaveYielded(['componentDidUpdate']);
-
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
-    });
-
-    expect(Scheduler).toHaveYielded(['componentWillUnmount']);
-  });
-
-  it('double flushing passive effects only results in one double invoke', () => {
-    function App({text}) {
-      const [state, setState] = React.useState(0);
-      React.useEffect(() => {
-        if (state !== 1) {
-          setState(1);
-        }
-        Scheduler.unstable_yieldValue('useEffect mount');
-        return () => Scheduler.unstable_yieldValue('useEffect unmount');
-      });
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('useLayoutEffect mount');
-        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
-      });
-
-      Scheduler.unstable_yieldValue(text);
-      return text;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'mount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-        'useLayoutEffect unmount',
-        'useEffect unmount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-        'mount',
-        'useLayoutEffect unmount',
-        'useLayoutEffect mount',
-        'useEffect unmount',
-        'useEffect mount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'mount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-        'mount',
-        'useLayoutEffect unmount',
-        'useLayoutEffect mount',
-        'useEffect unmount',
-        'useEffect mount',
-      ]);
-    }
-  });
-
-  it('newly mounted components after initial mount get double invoked', () => {
-    let _setShowChild;
-    function Child() {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('Child useEffect mount');
-        return () => Scheduler.unstable_yieldValue('Child useEffect unmount');
-      });
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('Child useLayoutEffect mount');
-        return () =>
-          Scheduler.unstable_yieldValue('Child useLayoutEffect unmount');
-      });
-
-      return null;
-    }
-
-    function App() {
-      const [showChild, setShowChild] = React.useState(false);
-      _setShowChild = setShowChild;
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('App useEffect mount');
-        return () => Scheduler.unstable_yieldValue('App useEffect unmount');
-      });
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('App useLayoutEffect mount');
-        return () =>
-          Scheduler.unstable_yieldValue('App useLayoutEffect unmount');
-      });
-
-      return showChild && <Child />;
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'App useLayoutEffect mount',
-        'App useEffect mount',
-        'App useLayoutEffect unmount',
-        'App useEffect unmount',
-        'App useLayoutEffect mount',
-        'App useEffect mount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'App useLayoutEffect mount',
-        'App useEffect mount',
-      ]);
-    }
-
-    ReactNoop.act(() => {
-      _setShowChild(true);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        '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(Scheduler).toHaveYielded([
-        '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', () => {
-    class ClassChild extends React.PureComponent {
-      componentDidMount() {
-        Scheduler.unstable_yieldValue('componentDidMount');
-      }
-
-      componentWillUnmount() {
-        Scheduler.unstable_yieldValue('componentWillUnmount');
-      }
-
-      render() {
-        return this.props.text;
-      }
-    }
-
-    function FunctionChild({text}) {
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('useEffect mount');
-        return () => Scheduler.unstable_yieldValue('useEffect unmount');
-      });
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('useLayoutEffect mount');
-        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
-      });
-      return text;
-    }
-
-    function App({text}) {
-      return (
-        <>
-          <ClassChild text={text} />
-          <FunctionChild text={text} />
-        </>
-      );
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    if (shouldDoubleInvokingEffects()) {
-      expect(Scheduler).toHaveYielded([
-        'componentDidMount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-        'componentWillUnmount',
-        'useLayoutEffect unmount',
-        'useEffect unmount',
-        'componentDidMount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-      ]);
-    } else {
-      expect(Scheduler).toHaveYielded([
-        'componentDidMount',
-        'useLayoutEffect mount',
-        'useEffect mount',
-      ]);
-    }
-
-    ReactNoop.act(() => {
-      ReactNoop.render(<App text={'mount'} />);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'useLayoutEffect unmount',
-      'useLayoutEffect mount',
-      'useEffect unmount',
-      'useEffect mount',
-    ]);
-
-    ReactNoop.act(() => {
-      ReactNoop.render(null);
-    });
-
-    expect(Scheduler).toHaveYielded([
-      'componentWillUnmount',
-      'useLayoutEffect unmount',
-      'useEffect unmount',
-    ]);
-  });
-});
diff --git a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js b/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
similarity index 99%
rename from packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
rename to packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
index 5b6abbc4f659..13f7a9ac543c 100644
--- a/packages/react-reconciler/src/__tests__/ReactDoubleInvokeEvents-test.js
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
@@ -14,7 +14,7 @@ let ReactTestRenderer;
 let Scheduler;
 let act;
 
-describe('ReactDoubleInvokeEvents', () => {
+describe('StrictEffectsMode', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
@@ -27,7 +27,8 @@ describe('ReactDoubleInvokeEvents', () => {
     return gate(
       flags =>
         flags.build === 'development' &&
-        flags.enableDoubleInvokingEffects &&
+        flags.enableStrictEffects &&
+        flags.createRootStrictEffectsByDefault &&
         flags.dfsEffectsRefactor,
     );
   }
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 000000000000..469f43348bea
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
@@ -0,0 +1,635 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+
+describe('StrictEffectsMode defaults', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableStrictEffects = __DEV__;
+    ReactFeatureFlags.createRootStrictEffectsByDefault = __DEV__;
+  });
+
+  it('should not double invoke effects in legacy mode', () => {
+    function App({text}) {
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('useEffect mount');
+        return () => Scheduler.unstable_yieldValue('useEffect unmount');
+      });
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('useLayoutEffect mount');
+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+      });
+
+      return text;
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'useLayoutEffect mount',
+      'useEffect mount',
+    ]);
+  });
+
+  it('should not double invoke class lifecycles in legacy mode', () => {
+    class App extends React.PureComponent {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('componentDidMount');
+      }
+
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('componentDidUpdate');
+      }
+
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('componentWillUnmount');
+      }
+
+      render() {
+        return this.props.text;
+      }
+    }
+
+    ReactNoop.act(() => {
+      ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
+    });
+
+    expect(Scheduler).toHaveYielded(['componentDidMount']);
+  });
+
+  if (__DEV__) {
+    it('should flush double-invoked effects within the same frame as layout effects if there are no passive effects', () => {
+      function ComponentWithEffects({label}) {
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
+          return () =>
+            Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
+        });
+
+        return label;
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <>
+            <ComponentWithEffects label={'one'} />
+          </>,
+        );
+
+        expect(Scheduler).toFlushUntilNextPaint([
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+        ]);
+      });
+
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <>
+            <ComponentWithEffects label={'one'} />
+            <ComponentWithEffects label={'two'} />
+          </>,
+        );
+
+        expect(Scheduler).toFlushUntilNextPaint([
+          // 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', () => {
+      function ComponentWithEffects({label}) {
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue(`useEffect mount "${label}"`);
+          return () =>
+            Scheduler.unstable_yieldValue(`useEffect unmount "${label}"`);
+        });
+
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(`useLayoutEffect mount "${label}"`);
+          return () =>
+            Scheduler.unstable_yieldValue(`useLayoutEffect unmount "${label}"`);
+        });
+
+        return label;
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <>
+            <ComponentWithEffects label={'one'} />
+          </>,
+        );
+
+        expect(Scheduler).toFlushAndYieldThrough([
+          'useLayoutEffect mount "one"',
+        ]);
+        expect(Scheduler).toFlushAndYield([
+          'useEffect mount "one"',
+          'useLayoutEffect unmount "one"',
+          'useEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useEffect mount "one"',
+        ]);
+      });
+
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <>
+            <ComponentWithEffects label={'one'} />
+            <ComponentWithEffects label={'two'} />
+          </>,
+        );
+
+        expect(Scheduler).toFlushAndYieldThrough([
+          // Cleanup and re-run "one" (and "two") since there is no dependencies array.
+          'useLayoutEffect unmount "one"',
+          'useLayoutEffect mount "one"',
+          'useLayoutEffect mount "two"',
+        ]);
+        expect(Scheduler).toFlushAndYield([
+          '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', () => {
+      function App({text}) {
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('useEffect mount');
+          return () => Scheduler.unstable_yieldValue('useEffect unmount');
+        });
+
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('useLayoutEffect mount');
+          return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+        });
+
+        return text;
+      }
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'update'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+      ]);
+    });
+
+    it('multiple effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
+      function App({text}) {
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('useEffect One mount');
+          return () => Scheduler.unstable_yieldValue('useEffect One unmount');
+        });
+
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('useEffect Two mount');
+          return () => Scheduler.unstable_yieldValue('useEffect Two unmount');
+        });
+
+        return text;
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useEffect One mount',
+        'useEffect Two mount',
+        'useEffect One unmount',
+        'useEffect Two unmount',
+        'useEffect One mount',
+        'useEffect Two mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'update'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useEffect One unmount',
+        'useEffect Two unmount',
+        'useEffect One mount',
+        'useEffect Two mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useEffect One unmount',
+        'useEffect Two unmount',
+      ]);
+    });
+
+    it('multiple layout effects are double invoked in the right order (all mounted, all unmounted, all remounted)', () => {
+      function App({text}) {
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('useLayoutEffect One mount');
+          return () =>
+            Scheduler.unstable_yieldValue('useLayoutEffect One unmount');
+        });
+
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('useLayoutEffect Two mount');
+          return () =>
+            Scheduler.unstable_yieldValue('useLayoutEffect Two unmount');
+        });
+
+        return text;
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'update'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+        'useLayoutEffect One mount',
+        'useLayoutEffect Two mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect One unmount',
+        'useLayoutEffect Two unmount',
+      ]);
+    });
+
+    it('useEffect and useLayoutEffect is called twice when there is no unmount', () => {
+      function App({text}) {
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('useEffect mount');
+        });
+
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('useLayoutEffect mount');
+        });
+
+        return text;
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'update'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(Scheduler).toHaveYielded([]);
+    });
+
+    it('passes the right context to class component lifecycles', () => {
+      class App extends React.PureComponent {
+        test() {}
+
+        componentDidMount() {
+          this.test();
+          Scheduler.unstable_yieldValue('componentDidMount');
+        }
+
+        componentDidUpdate() {
+          this.test();
+          Scheduler.unstable_yieldValue('componentDidUpdate');
+        }
+
+        componentWillUnmount() {
+          this.test();
+          Scheduler.unstable_yieldValue('componentWillUnmount');
+        }
+
+        render() {
+          return null;
+        }
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+    });
+
+    it('double invoking works for class components', () => {
+      class App extends React.PureComponent {
+        componentDidMount() {
+          Scheduler.unstable_yieldValue('componentDidMount');
+        }
+
+        componentDidUpdate() {
+          Scheduler.unstable_yieldValue('componentDidUpdate');
+        }
+
+        componentWillUnmount() {
+          Scheduler.unstable_yieldValue('componentWillUnmount');
+        }
+
+        render() {
+          return this.props.text;
+        }
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'componentDidMount',
+        'componentWillUnmount',
+        'componentDidMount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'update'} />);
+      });
+
+      expect(Scheduler).toHaveYielded(['componentDidUpdate']);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(Scheduler).toHaveYielded(['componentWillUnmount']);
+    });
+
+    it('double flushing passive effects only results in one double invoke', () => {
+      function App({text}) {
+        const [state, setState] = React.useState(0);
+        React.useEffect(() => {
+          if (state !== 1) {
+            setState(1);
+          }
+          Scheduler.unstable_yieldValue('useEffect mount');
+          return () => Scheduler.unstable_yieldValue('useEffect unmount');
+        });
+
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('useLayoutEffect mount');
+          return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+        });
+
+        Scheduler.unstable_yieldValue(text);
+        return text;
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'mount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'mount',
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+    });
+
+    it('newly mounted components after initial mount get double invoked', () => {
+      let _setShowChild;
+      function Child() {
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('Child useEffect mount');
+          return () => Scheduler.unstable_yieldValue('Child useEffect unmount');
+        });
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('Child useLayoutEffect mount');
+          return () =>
+            Scheduler.unstable_yieldValue('Child useLayoutEffect unmount');
+        });
+
+        return null;
+      }
+
+      function App() {
+        const [showChild, setShowChild] = React.useState(false);
+        _setShowChild = setShowChild;
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App useEffect mount');
+          return () => Scheduler.unstable_yieldValue('App useEffect unmount');
+        });
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App useLayoutEffect mount');
+          return () =>
+            Scheduler.unstable_yieldValue('App useLayoutEffect unmount');
+        });
+
+        return showChild && <Child />;
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+        'App useLayoutEffect unmount',
+        'App useEffect unmount',
+        'App useLayoutEffect mount',
+        'App useEffect mount',
+      ]);
+
+      ReactNoop.act(() => {
+        _setShowChild(true);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        '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', () => {
+      class ClassChild extends React.PureComponent {
+        componentDidMount() {
+          Scheduler.unstable_yieldValue('componentDidMount');
+        }
+
+        componentWillUnmount() {
+          Scheduler.unstable_yieldValue('componentWillUnmount');
+        }
+
+        render() {
+          return this.props.text;
+        }
+      }
+
+      function FunctionChild({text}) {
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('useEffect mount');
+          return () => Scheduler.unstable_yieldValue('useEffect unmount');
+        });
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('useLayoutEffect mount');
+          return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');
+        });
+        return text;
+      }
+
+      function App({text}) {
+        return (
+          <>
+            <ClassChild text={text} />
+            <FunctionChild text={text} />
+          </>
+        );
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+        'componentWillUnmount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+        'componentDidMount',
+        'useLayoutEffect mount',
+        'useEffect mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'useLayoutEffect unmount',
+        'useLayoutEffect mount',
+        'useEffect unmount',
+        'useEffect mount',
+      ]);
+
+      ReactNoop.act(() => {
+        ReactNoop.render(null);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'componentWillUnmount',
+        'useLayoutEffect unmount',
+        'useEffect unmount',
+      ]);
+    });
+  }
+});
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index c4eea12e8a55..ff80440379f1 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -451,6 +451,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isConcurrent ? ConcurrentRoot : LegacyRoot,
     false,
     null,
+    null,
   );
   invariant(root != null, 'something went wrong');
   updateContainer(element, root, null, null);
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index a2e27073a3f7..d6e44ab82096 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -4875,7 +4875,8 @@ describe('Profiler', () => {
 
       if (__DEV__) {
         it('double invoking does not disconnect wrapped async work', () => {
-          ReactFeatureFlags.enableDoubleInvokingEffects = true;
+          ReactFeatureFlags.enableStrictEffects = true;
+          ReactFeatureFlags.createRootStrictEffectsByDefault = true;
 
           const callback = jest.fn(() => {
             const wrappedInteractions = SchedulerTracing.unstable_getCurrent();
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 000000000000..cb567340d398
--- /dev/null
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+describe('ReactStrictMode', () => {
+  let React;
+  let ReactDOM;
+  let act;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const TestUtils = require('react-dom/test-utils');
+    act = TestUtils.unstable_concurrentAct;
+
+    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableStrictEffects = __DEV__;
+  });
+
+  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;
+    }
+
+    // @gate experimental
+    it('should support overriding default via createRoot option', () => {
+      act(() => {
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container, {
+          unstable_strictModeLevel: 0,
+        });
+        root.render(<Component label="A" />);
+      });
+
+      expect(log).toEqual([
+        'A: render',
+        'A: useLayoutEffect mount',
+        'A: useEffect mount',
+      ]);
+    });
+
+    // @gate experimental
+    it('should support overriding default via createBlockingRoot option', () => {
+      act(() => {
+        const container = document.createElement('div');
+        const root = ReactDOM.createBlockingRoot(container, {
+          unstable_strictModeLevel: 0,
+        });
+        root.render(<Component label="A" />);
+      });
+
+      expect(log).toEqual([
+        'A: render',
+        'A: useLayoutEffect mount',
+        'A: useEffect mount',
+      ]);
+    });
+
+    // @gate experimental
+    it('should disable strict mode if level 0 is specified', () => {
+      act(() => {
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container, {
+          unstable_strictModeLevel: 0,
+        });
+        root.render(
+          <React.StrictMode unstable_level={0}>
+            <Component label="A" />
+          </React.StrictMode>,
+        );
+      });
+
+      expect(log).toEqual([
+        'A: render',
+        'A: useLayoutEffect mount',
+        'A: useEffect mount',
+      ]);
+    });
+
+    if (__DEV__) {
+      // @gate experimental
+      it('should default to level 1 (legacy mode)', () => {
+        act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOM.createRoot(container);
+          root.render(
+            <React.StrictMode>
+              <Component label="A" />
+            </React.StrictMode>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+        ]);
+      });
+
+      // @gate experimental
+      it('should support level 1 (legacy mode)', () => {
+        act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOM.createRoot(container);
+          root.render(
+            <React.StrictMode unstable_level={1}>
+              <Component label="A" />
+            </React.StrictMode>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'A: useLayoutEffect mount',
+          'A: useEffect mount',
+        ]);
+      });
+
+      // @gate experimental
+      it('should support level 2 (legacy + strict effects mode)', () => {
+        act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOM.createRoot(container);
+          root.render(
+            <React.StrictMode unstable_level={2}>
+              <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',
+        ]);
+      });
+
+      // @gate experimental
+      it('should allow level to be increased with nesting', () => {
+        act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOM.createRoot(container, {
+            unstable_strictModeLevel: 0,
+          });
+          root.render(
+            <>
+              <Component label="A" />
+              <React.StrictMode unstable_level={1}>
+                <Component label="B" />
+                <React.StrictMode unstable_level={2}>
+                  <Component label="C" />
+                </React.StrictMode>
+                ,
+              </React.StrictMode>
+              ,
+            </>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'B: render',
+          'B: render',
+          'C: render',
+          'C: render',
+          'A: useLayoutEffect mount',
+          'B: useLayoutEffect mount',
+          'C: useLayoutEffect mount',
+          'A: useEffect mount',
+          'B: useEffect mount',
+          'C: useEffect mount',
+          'C: useLayoutEffect unmount',
+          'C: useEffect unmount',
+          'C: useLayoutEffect mount',
+          'C: useEffect mount',
+        ]);
+      });
+
+      // @gate experimental
+      it('should not allow level to be decreased with nesting', () => {
+        act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOM.createRoot(container, {
+            unstable_strictModeLevel: 2,
+          });
+          root.render(
+            <>
+              <Component label="A" />
+              <React.StrictMode unstable_level={1}>
+                <Component label="B" />
+                <React.StrictMode unstable_level={0}>
+                  <Component label="C" />
+                </React.StrictMode>
+                ,
+              </React.StrictMode>
+              ,
+            </>,
+          );
+        });
+
+        expect(log).toEqual([
+          'A: render',
+          'A: render',
+          'B: render',
+          'B: render',
+          'C: render',
+          'C: render',
+          'A: useLayoutEffect mount',
+          'B: useLayoutEffect mount',
+          'C: useLayoutEffect mount',
+          'A: useEffect mount',
+          'B: useEffect mount',
+          'C: useEffect mount',
+          'A: useLayoutEffect unmount',
+          'B: useLayoutEffect unmount',
+          'C: useLayoutEffect unmount',
+          'A: useEffect unmount',
+          'B: useEffect unmount',
+          'C: useEffect unmount',
+          'A: useLayoutEffect mount',
+          'B: useLayoutEffect mount',
+          'C: useLayoutEffect mount',
+          'A: useEffect mount',
+          'B: useEffect mount',
+          'C: useEffect mount',
+        ]);
+      });
+    }
+  });
+});
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 778881bc5837..953eb7cd5661 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -20,9 +20,17 @@ export const enableDebugTracing = false;
 export const enableSchedulingProfiler = __PROFILE__ && __EXPERIMENTAL__;
 
 // Helps identify side effects in render-phase lifecycle hooks and setState
-// reducers by double invoking them in Strict Mode.
+// reducers by double invoking them in StrictLegacyMode.
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 
+// Helps identify code that is not safe for planned Offscreen API and Suspense semantics;
+// this feature flag only impacts StrictEffectsMode.
+export const enableStrictEffects = false;
+
+// If TRUE, trees rendered with createRoot (and createBlockingRoot) APIs will be StrictEffectsMode.
+// If FALSE, these trees will be StrictLegacyMode.
+export const createRootStrictEffectsByDefault = false;
+
 // To preserve the "Pause on caught exceptions" behavior of the debugger, we
 // replay the begin phase of a failed component inside invokeGuardedCallback.
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
@@ -139,8 +147,6 @@ export const decoupleUpdatePriorityFromScheduler = false;
 
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = false;
-
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 6544be4cbe04..2f4406b2ceaf 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -52,7 +52,8 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = false;
+export const enableStrictEffects = false;
+export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a6482da52d52..35e1067646d9 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -51,7 +51,8 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = false;
+export const enableStrictEffects = false;
+export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 343bb609b4d2..67ecdb72983c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -51,7 +51,8 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = false;
+export const enableStrictEffects = false;
+export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e9ad4240a6fc..9ed0be59689e 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,7 +51,8 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = false;
+export const enableStrictEffects = false;
+export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 2afc959952ac..2e7513a8ddf1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -51,7 +51,8 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = true;
+export const enableStrictEffects = true;
+export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d79a63c57789..5a362e8a3141 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -51,7 +51,8 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
-export const enableDoubleInvokingEffects = false;
+export const enableStrictEffects = false;
+export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 732360618f6b..54942f0c7cd2 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -51,7 +51,8 @@ export const deferRenderPhaseUpdateToNextBatch = true;
 export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = true;
 
-export const enableDoubleInvokingEffects = false;
+export const enableStrictEffects = false;
+export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index daf49b2ab225..1d9f89699f31 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -50,7 +50,8 @@ export const enableTrustedTypesIntegration = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const disableNativeComponentFrames = false;
 
-export const enableDoubleInvokingEffects = false;
+export const createRootStrictEffectsByDefault = false;
+export const enableStrictEffects = false;
 export const enableUseRefAccessWarning = __VARIANT__;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 2d983a3e8f81..5e5cd2105b38 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -27,7 +27,8 @@ export const {
   decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   skipUnmountedBoundaries,
-  enableDoubleInvokingEffects,
+  enableStrictEffects,
+  createRootStrictEffectsByDefault,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,

From 8336f19aa80c6646d6969fa61e34420776d884be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rub=C3=A9n=20Norte?= <rubennorte@gmail.com>
Date: Thu, 25 Feb 2021 21:10:17 +0000
Subject: [PATCH 0280/1603] Update React Native types (#20883)

---
 .../react-native-renderer/src/ReactFabric.js  |  19 ++-
 .../src/ReactFabricHostConfig.js              |   6 +-
 .../src/ReactNativeAttributePayload.js        |  26 ++--
 .../src/ReactNativeFiberHostComponent.js      |   6 +-
 .../src/ReactNativeRenderer.js                |  10 +-
 .../src/ReactNativeTypes.js                   | 132 ++++++++++--------
 6 files changed, 114 insertions(+), 85 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 03ad183c37df..9761124e7da6 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -9,7 +9,7 @@
 
 import type {HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {ElementRef} from 'react';
+import type {ElementRef, Element, ElementType} from 'react';
 
 import './ReactFabricInjection';
 
@@ -47,8 +47,8 @@ import getComponentName from 'shared/getComponentName';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
-function findHostInstance_DEPRECATED(
-  componentOrHandle: any,
+function findHostInstance_DEPRECATED<TElementType: ElementType>(
+  componentOrHandle: ?(ElementRef<TElementType> | number),
 ): ?ElementRef<HostComponent<mixed>> {
   if (__DEV__) {
     const owner = ReactCurrentOwner.current;
@@ -70,10 +70,14 @@ function findHostInstance_DEPRECATED(
   if (componentOrHandle == null) {
     return null;
   }
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle._nativeTag) {
+    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle;
   }
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
+    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle.canonical;
   }
   let hostInstance;
@@ -194,10 +198,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
 }
 
 function render(
-  element: React$Element<any>,
-  containerTag: any,
-  callback: ?Function,
-) {
+  element: Element<ElementType>,
+  containerTag: number,
+  callback: ?() => void,
+): ?ElementRef<ElementType> {
   let root = roots.get(containerTag);
 
   if (!root) {
@@ -208,6 +212,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index e06652048e3d..85eb2a741ffa 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -14,7 +14,7 @@ import type {
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
   NativeMethods,
-  ReactNativeBaseComponentViewConfig,
+  ViewConfig,
   TouchedViewDataAtPoint,
 } from './ReactNativeTypes';
 
@@ -111,13 +111,13 @@ if (registerEventHandler) {
  */
 class ReactFabricHostComponent {
   _nativeTag: number;
-  viewConfig: ReactNativeBaseComponentViewConfig<>;
+  viewConfig: ViewConfig;
   currentProps: Props;
   _internalInstanceHandle: Object;
 
   constructor(
     tag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig<>,
+    viewConfig: ViewConfig,
     props: Props,
     internalInstanceHandle: Object,
   ) {
diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
index 5804d83b5dc5..fa1187bc339b 100644
--- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js
+++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
@@ -49,7 +49,7 @@ function defaultDiffer(prevProp: mixed, nextProp: mixed): boolean {
 function restoreDeletedValuesInNestedArray(
   updatePayload: Object,
   node: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ) {
   if (Array.isArray(node)) {
     let i = node.length;
@@ -107,7 +107,7 @@ function diffNestedArrayProperty(
   updatePayload: null | Object,
   prevArray: Array<NestedNode>,
   nextArray: Array<NestedNode>,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   const minLength =
     prevArray.length < nextArray.length ? prevArray.length : nextArray.length;
@@ -145,7 +145,7 @@ function diffNestedProperty(
   updatePayload: null | Object,
   prevProp: NestedNode,
   nextProp: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   if (!updatePayload && prevProp === nextProp) {
     // If no properties have been added, then we can bail out quickly on object
@@ -206,7 +206,7 @@ function diffNestedProperty(
 function addNestedProperty(
   updatePayload: null | Object,
   nextProp: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ) {
   if (!nextProp) {
     return updatePayload;
@@ -236,7 +236,7 @@ function addNestedProperty(
 function clearNestedProperty(
   updatePayload: null | Object,
   prevProp: NestedNode,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   if (!prevProp) {
     return updatePayload;
@@ -268,7 +268,7 @@ function diffProperties(
   updatePayload: null | Object,
   prevProps: Object,
   nextProps: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   let attributeConfig;
   let nextProp;
@@ -369,13 +369,13 @@ function diffProperties(
         updatePayload,
         prevProp,
         nextProp,
-        ((attributeConfig: any): AttributeConfiguration<>),
+        ((attributeConfig: any): AttributeConfiguration),
       );
       if (removedKeyCount > 0 && updatePayload) {
         restoreDeletedValuesInNestedArray(
           updatePayload,
           nextProp,
-          ((attributeConfig: any): AttributeConfiguration<>),
+          ((attributeConfig: any): AttributeConfiguration),
         );
         removedKeys = null;
       }
@@ -426,7 +426,7 @@ function diffProperties(
       updatePayload = clearNestedProperty(
         updatePayload,
         prevProp,
-        ((attributeConfig: any): AttributeConfiguration<>),
+        ((attributeConfig: any): AttributeConfiguration),
       );
     }
   }
@@ -439,7 +439,7 @@ function diffProperties(
 function addProperties(
   updatePayload: null | Object,
   props: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   // TODO: Fast path
   return diffProperties(updatePayload, emptyObject, props, validAttributes);
@@ -452,7 +452,7 @@ function addProperties(
 function clearProperties(
   updatePayload: null | Object,
   prevProps: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   // TODO: Fast path
   return diffProperties(updatePayload, prevProps, emptyObject, validAttributes);
@@ -460,7 +460,7 @@ function clearProperties(
 
 export function create(
   props: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   return addProperties(
     null, // updatePayload
@@ -472,7 +472,7 @@ export function create(
 export function diff(
   prevProps: Object,
   nextProps: Object,
-  validAttributes: AttributeConfiguration<>,
+  validAttributes: AttributeConfiguration,
 ): null | Object {
   return diffProperties(
     null, // updatePayload
diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
index a4c90fa3f7be..804814443182 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
@@ -14,7 +14,7 @@ import type {
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
   NativeMethods,
-  ReactNativeBaseComponentViewConfig,
+  ViewConfig,
 } from './ReactNativeTypes';
 import type {Instance} from './ReactNativeHostConfig';
 
@@ -34,11 +34,11 @@ class ReactNativeFiberHostComponent {
   _children: Array<Instance | number>;
   _nativeTag: number;
   _internalFiberInstanceHandleDEV: Object;
-  viewConfig: ReactNativeBaseComponentViewConfig<>;
+  viewConfig: ViewConfig;
 
   constructor(
     tag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig<>,
+    viewConfig: ViewConfig,
     internalInstanceHandleDEV: Object,
   ) {
     this._nativeTag = tag;
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 673482d0175c..547fdd2de5c5 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -9,6 +9,7 @@
 
 import type {HostComponent} from './ReactNativeTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ElementRef, Element, ElementType} from 'react';
 
 import './ReactNativeInjection';
 
@@ -193,10 +194,10 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
 }
 
 function render(
-  element: React$Element<any>,
-  containerTag: any,
-  callback: ?Function,
-) {
+  element: Element<ElementType>,
+  containerTag: number,
+  callback: ?() => void,
+): ?ElementRef<ElementType> {
   let root = roots.get(containerTag);
 
   if (!root) {
@@ -207,6 +208,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
+  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 8b4ab311bff7..462abeac94be 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @flow strict
  */
 
-import type {ElementRef, AbstractComponent} from 'react';
+import type {ElementRef, ElementType, Element, AbstractComponent} from 'react';
 
 export type MeasureOnSuccessCallback = (
   x: number,
@@ -33,49 +33,66 @@ export type MeasureLayoutOnSuccessCallback = (
   height: number,
 ) => void;
 
-type AttributeType =
+type AttributeType<T, V> =
   | true
   | $ReadOnly<{|
-      diff?: <T>(arg1: T, arg2: T) => boolean,
-      process?: (arg1: any) => any,
+      diff?: (arg1: T, arg2: T) => boolean,
+      process?: (arg1: V) => T,
     |}>;
 
-export type AttributeConfiguration<
-  TProps = string,
-  TStyleProps = string,
-> = $ReadOnly<{
-  [propName: TProps]: AttributeType,
-  style: $ReadOnly<{[propName: TStyleProps]: AttributeType, ...}>,
+// We either force that `diff` and `process` always use mixed,
+// or we allow them to define specific types and use this hack
+type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>;
+
+export type AttributeConfiguration = $ReadOnly<{
+  [propName: string]: AnyAttributeType,
+  style: $ReadOnly<{
+    [propName: string]: AnyAttributeType,
+    ...,
+  }>,
+  ...
+}>;
+
+type PartialAttributeConfiguration = $ReadOnly<{
+  [propName: string]: AnyAttributeType,
+  style?: $ReadOnly<{
+    [propName: string]: AnyAttributeType,
+    ...,
+  }>,
   ...
 }>;
 
-export type ReactNativeBaseComponentViewConfig<
-  TProps = string,
-  TStyleProps = string,
-> = $ReadOnly<{|
-  baseModuleName?: string,
+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<{|
+    [eventName: string]: $ReadOnly<{
+      phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
-      |}>,
-    |}>,
+      }>,
+    }>,
     ...,
   }>,
-  Commands?: $ReadOnly<{[commandName: string]: number, ...}>,
   directEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
+    [eventName: string]: $ReadOnly<{
       registrationName: string,
-    |}>,
+    }>,
     ...,
   }>,
-  NativeProps?: $ReadOnly<{[propName: string]: string, ...}>,
   uiViewClassName: string,
-  validAttributes: AttributeConfiguration<TProps, TStyleProps>,
-|}>;
+  validAttributes: AttributeConfiguration,
+}>;
 
-export type ViewConfigGetter = () => ReactNativeBaseComponentViewConfig<>;
+export type PartialViewConfig = $ReadOnly<{
+  bubblingEventTypes?: $PropertyType<ViewConfig, 'bubblingEventTypes'>,
+  directEventTypes?: $PropertyType<ViewConfig, 'directEventTypes'>,
+  uiViewClassName: string,
+  validAttributes?: PartialAttributeConfiguration,
+}>;
 
 export type NativeMethods = {
   blur(): void,
@@ -87,7 +104,7 @@ export type NativeMethods = {
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void,
   ): void,
-  setNativeProps(nativeProps: Object): void,
+  setNativeProps(nativeProps: {...}): void,
   ...
 };
 
@@ -111,9 +128,11 @@ type InspectorDataSource = $ReadOnly<{|
 |}>;
 
 type InspectorDataGetter = (
-  (componentOrHandle: any) => ?number,
+  <TElementType: ElementType>(
+    componentOrHandle: ElementRef<TElementType> | number,
+  ) => ?number,
 ) => $ReadOnly<{|
-  measure: Function,
+  measure: (callback: MeasureOnSuccessCallback) => void,
   props: InspectorDataProps,
   source: InspectorDataSource,
 |}>;
@@ -145,62 +164,65 @@ export type TouchedViewDataAtPoint = $ReadOnly<{|
  * Provide minimal Flow typing for the high-level RN API and call it a day.
  */
 export type ReactNativeType = {
-  findHostInstance_DEPRECATED(
-    componentOrHandle: any,
+  findHostInstance_DEPRECATED<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?ElementRef<HostComponent<mixed>>,
-  findNodeHandle(componentOrHandle: any): ?number,
+  findNodeHandle<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
+  ): ?number,
   dispatchCommand(
     handle: ElementRef<HostComponent<mixed>>,
     command: string,
-    args: Array<any>,
+    args: Array<mixed>,
   ): void,
   sendAccessibilityEvent(
     handle: ElementRef<HostComponent<mixed>>,
     eventType: string,
   ): void,
   render(
-    element: React$Element<any>,
-    containerTag: any,
-    callback: ?Function,
-  ): any,
-  unmountComponentAtNode(containerTag: number): any,
-  unmountComponentAtNodeAndRemoveContainer(containerTag: number): any,
-  // TODO (bvaughn) Add types
-  unstable_batchedUpdates: any,
+    element: Element<ElementType>,
+    containerTag: number,
+    callback: ?() => void,
+  ): ?ElementRef<ElementType>,
+  unmountComponentAtNode(containerTag: number): void,
+  unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
+  unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
   ...
 };
 
 export type ReactFabricType = {
-  findHostInstance_DEPRECATED(
-    componentOrHandle: any,
+  findHostInstance_DEPRECATED<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
   ): ?ElementRef<HostComponent<mixed>>,
-  findNodeHandle(componentOrHandle: any): ?number,
+  findNodeHandle<TElementType: ElementType>(
+    componentOrHandle: ?(ElementRef<TElementType> | number),
+  ): ?number,
   dispatchCommand(
     handle: ElementRef<HostComponent<mixed>>,
     command: string,
-    args: Array<any>,
+    args: Array<mixed>,
   ): void,
   sendAccessibilityEvent(
     handle: ElementRef<HostComponent<mixed>>,
     eventType: string,
   ): void,
   render(
-    element: React$Element<any>,
-    containerTag: any,
-    callback: ?Function,
-  ): any,
-  unmountComponentAtNode(containerTag: number): any,
+    element: Element<ElementType>,
+    containerTag: number,
+    callback: ?() => void,
+  ): ?ElementRef<ElementType>,
+  unmountComponentAtNode(containerTag: number): void,
   ...
 };
 
 export type ReactNativeEventTarget = {
-  node: Object,
+  node: {...},
   canonical: {
     _nativeTag: number,
-    viewConfig: ReactNativeBaseComponentViewConfig<>,
-    currentProps: Object,
-    _internalInstanceHandle: Object,
+    viewConfig: ViewConfig,
+    currentProps: {...},
+    _internalInstanceHandle: {...},
     ...
   },
   ...

From 90bde6505e43434596ff6398c2c8acb67ced815b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 25 Feb 2021 16:22:33 -0500
Subject: [PATCH 0281/1603] Add SuspenseList to react-is (#20874)

This commit also adds explicit index.stable and index.experimental forks to the react-is package so that we can avoid exporting references to SuspenseList in a stable release.
---
 packages/react-is/index.experimental.js       | 41 +++++++++++++++++++
 packages/react-is/index.stable.js             | 39 ++++++++++++++++++
 packages/react-is/src/ReactIs.js              |  4 ++
 .../react-is/src/__tests__/ReactIs-test.js    | 18 ++++++++
 4 files changed, 102 insertions(+)
 create mode 100644 packages/react-is/index.experimental.js
 create mode 100644 packages/react-is/index.stable.js

diff --git a/packages/react-is/index.experimental.js b/packages/react-is/index.experimental.js
new file mode 100644
index 000000000000..560283842b59
--- /dev/null
+++ b/packages/react-is/index.experimental.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export {
+  isValidElementType,
+  typeOf,
+  ContextConsumer,
+  ContextProvider,
+  Element,
+  ForwardRef,
+  Fragment,
+  Lazy,
+  Memo,
+  Portal,
+  Profiler,
+  StrictMode,
+  Suspense,
+  unstable_SuspenseList,
+  isAsyncMode,
+  isConcurrentMode,
+  isContextConsumer,
+  isContextProvider,
+  isElement,
+  isForwardRef,
+  isFragment,
+  isLazy,
+  isMemo,
+  isPortal,
+  isProfiler,
+  isStrictMode,
+  isSuspense,
+  unstable_isSuspenseList,
+} from './src/ReactIs';
diff --git a/packages/react-is/index.stable.js b/packages/react-is/index.stable.js
new file mode 100644
index 000000000000..ad64178a1c53
--- /dev/null
+++ b/packages/react-is/index.stable.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export {
+  isValidElementType,
+  typeOf,
+  ContextConsumer,
+  ContextProvider,
+  Element,
+  ForwardRef,
+  Fragment,
+  Lazy,
+  Memo,
+  Portal,
+  Profiler,
+  StrictMode,
+  Suspense,
+  isAsyncMode,
+  isConcurrentMode,
+  isContextConsumer,
+  isContextProvider,
+  isElement,
+  isForwardRef,
+  isFragment,
+  isLazy,
+  isMemo,
+  isPortal,
+  isProfiler,
+  isStrictMode,
+  isSuspense,
+} from './src/ReactIs';
diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js
index 2f132ba5de9a..1958043bb224 100644
--- a/packages/react-is/src/ReactIs.js
+++ b/packages/react-is/src/ReactIs.js
@@ -72,6 +72,7 @@ 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 unstable_SuspenseList = REACT_SUSPENSE_LIST_TYPE;
 
 export {isValidElementType};
 
@@ -142,3 +143,6 @@ export function isStrictMode(object: any) {
 export function isSuspense(object: any) {
   return typeOf(object) === REACT_SUSPENSE_TYPE;
 }
+export function unstable_isSuspenseList(object: any) {
+  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
index cddd479c4344..e054cdbc4d48 100644
--- a/packages/react-is/src/__tests__/ReactIs-test.js
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -186,6 +186,24 @@ describe('ReactIs', () => {
     expect(ReactIs.isSuspense(<div />)).toBe(false);
   });
 
+  // @gate experimental
+  it('should identify suspense list', () => {
+    expect(ReactIs.isValidElementType(React.unstable_SuspenseList)).toBe(true);
+    expect(ReactIs.typeOf(<React.unstable_SuspenseList />)).toBe(
+      ReactIs.unstable_SuspenseList,
+    );
+    expect(
+      ReactIs.unstable_isSuspenseList(<React.unstable_SuspenseList />),
+    ).toBe(true);
+    expect(
+      ReactIs.unstable_isSuspenseList({type: ReactIs.unstable_SuspenseList}),
+    ).toBe(false);
+    expect(ReactIs.unstable_isSuspenseList('React.unstable_SuspenseList')).toBe(
+      false,
+    );
+    expect(ReactIs.unstable_isSuspenseList(<div />)).toBe(false);
+  });
+
   it('should identify profile root', () => {
     expect(ReactIs.isValidElementType(React.Profiler)).toBe(true);
     expect(

From c581cdd480f71af6ee87168c72ecabb87b6984c3 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 25 Feb 2021 17:25:25 -0500
Subject: [PATCH 0282/1603] Schedule sync updates in microtask (#20872)

* Schedule sync updates in microtask

* Updates from review

* Fix comment
---
 ...DOMServerPartialHydration-test.internal.js |  1 +
 .../ReactServerRenderingHydration-test.js     |  1 +
 .../src/SchedulerWithReactIntegration.new.js  | 18 +++++--
 .../src/SchedulerWithReactIntegration.old.js  | 18 +++++--
 .../src/__tests__/ReactExpiration-test.js     | 11 ++--
 .../ReactHooksWithNoopRenderer-test.js        |  8 +--
 ...tIncrementalErrorHandling-test.internal.js |  4 ++
 .../src/__tests__/ReactOffscreen-test.js      |  5 +-
 .../ReactSchedulerIntegration-test.js         |  4 +-
 .../src/__tests__/ReactSuspenseList-test.js   | 12 +++--
 .../ReactSuspensePlaceholder-test.internal.js | 14 +++--
 .../ReactSuspenseWithNoopRenderer-test.js     | 54 ++++++++++++-------
 .../useMutableSource-test.internal.js         | 11 ++--
 packages/shared/ReactFeatureFlags.js          |  2 +
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 23 files changed, 121 insertions(+), 51 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 67d1a29f0ab0..2ad221d5fbcb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -380,6 +380,7 @@ describe('ReactDOMServerPartialHydration', () => {
     resolve();
     await promise;
     Scheduler.unstable_flushAll();
+    await null;
     jest.runAllTimers();
 
     // We should now have hydrated with a ref on the existing span.
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index fea9d79b4735..a361e55a7f8f 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -488,6 +488,7 @@ describe('ReactDOMServerHydration', () => {
     jest.runAllTimers();
     await Promise.resolve();
     Scheduler.unstable_flushAll();
+    await null;
     expect(element.textContent).toBe('Hello world');
   });
 
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 36dbc704fc7c..1c13e3a8fda9 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -16,6 +16,7 @@ import {__interactionsRef} from 'scheduler/tracing';
 import {
   enableSchedulerTracing,
   decoupleUpdatePriorityFromScheduler,
+  enableSyncMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import {
@@ -23,6 +24,7 @@ import {
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
 } from './ReactFiberLane.new';
+import {scheduleMicrotask, supportsMicrotasks} from './ReactFiberHostConfig';
 
 const {
   unstable_runWithPriority: Scheduler_runWithPriority,
@@ -144,13 +146,19 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   // the next tick, or earlier if something calls `flushSyncCallbackQueue`.
   if (syncQueue === null) {
     syncQueue = [callback];
-    // Flush the queue in the next tick, at the earliest.
+
     // TODO: Figure out how to remove this It's only here as a last resort if we
     // forget to explicitly flush.
-    immediateQueueCallbackNode = Scheduler_scheduleCallback(
-      Scheduler_ImmediatePriority,
-      flushSyncCallbackQueueImpl,
-    );
+    if (enableSyncMicroTasks && supportsMicrotasks) {
+      // Flush the queue in a microtask.
+      scheduleMicrotask(flushSyncCallbackQueueImpl);
+    } else {
+      // Flush the queue in the next tick.
+      immediateQueueCallbackNode = Scheduler_scheduleCallback(
+        Scheduler_ImmediatePriority,
+        flushSyncCallbackQueueImpl,
+      );
+    }
   } else {
     // Push onto existing queue. Don't need to schedule a callback because
     // we already scheduled one when we created the queue.
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 1d309df4020f..5c4451499ca5 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -16,6 +16,7 @@ import {__interactionsRef} from 'scheduler/tracing';
 import {
   enableSchedulerTracing,
   decoupleUpdatePriorityFromScheduler,
+  enableSyncMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import {
@@ -23,6 +24,7 @@ import {
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
 } from './ReactFiberLane.old';
+import {scheduleMicrotask, supportsMicrotasks} from './ReactFiberHostConfig';
 
 const {
   unstable_runWithPriority: Scheduler_runWithPriority,
@@ -144,13 +146,19 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   // the next tick, or earlier if something calls `flushSyncCallbackQueue`.
   if (syncQueue === null) {
     syncQueue = [callback];
-    // Flush the queue in the next tick, at the earliest.
+
     // TODO: Figure out how to remove this It's only here as a last resort if we
     // forget to explicitly flush.
-    immediateQueueCallbackNode = Scheduler_scheduleCallback(
-      Scheduler_ImmediatePriority,
-      flushSyncCallbackQueueImpl,
-    );
+    if (enableSyncMicroTasks && supportsMicrotasks) {
+      // Flush the queue in a microtask.
+      scheduleMicrotask(flushSyncCallbackQueueImpl);
+    } else {
+      // Flush the queue in the next tick.
+      immediateQueueCallbackNode = Scheduler_scheduleCallback(
+        Scheduler_ImmediatePriority,
+        flushSyncCallbackQueueImpl,
+      );
+    }
   } else {
     // Push onto existing queue. Don't need to schedule a callback because
     // we already scheduled one when we created the queue.
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 017c712bd814..48ff50880f94 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -598,12 +598,13 @@ describe('ReactExpiration', () => {
       // second one.
       Scheduler.unstable_advanceTime(1000);
       // Attempt to interrupt with a high pri update.
-      updateHighPri();
+      await ReactNoop.act(async () => {
+        updateHighPri();
+      });
 
-      // The first update expired, so first will finish it without
-      // interrupting. But not the second update, which hasn't expired yet.
-      expect(Scheduler).toFlushExpired(['Sibling']);
-      expect(Scheduler).toFlushAndYield([
+      expect(Scheduler).toHaveYielded([
+        // The first update expired
+        'Sibling',
         // Then render the high pri update
         'High pri: 1',
         'Normal pri: 1',
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index bf5503feb490..4c7d308a9c90 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1792,7 +1792,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     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(() => {
@@ -1807,10 +1807,12 @@ describe('ReactHooksWithNoopRenderer', () => {
           }, [props.count]);
           return <Text text={'Count: ' + count} />;
         }
-        act(() => {
+        await act(async () => {
           ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
+
           // Even in legacy mode, effects are deferred until after paint
-          expect(Scheduler).toFlushAndYieldThrough(['Count: (empty)']);
+          ReactNoop.flushSync();
+          expect(Scheduler).toHaveYielded(['Count: (empty)']);
           expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
         });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index f568191681b6..613fe89d6327 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1400,6 +1400,10 @@ describe('ReactIncrementalErrorHandling', () => {
       'BrokenRenderAndUnmount componentWillUnmount',
     ]);
     expect(ReactNoop.getChildren()).toEqual([]);
+
+    expect(() => {
+      ReactNoop.flushSync();
+    }).toThrow('One does not simply unmount me.');
   });
 
   it('does not interrupt unmounting if detaching a ref throws', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index e830fa2b24dd..b3f14e6ad1ef 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -98,8 +98,11 @@ describe('ReactOffscreen', () => {
           <Text text="Outside" />
         </>,
       );
+
+      ReactNoop.flushSync();
+
       // Should not defer the hidden tree
-      expect(Scheduler).toFlushUntilNextPaint(['A', 'Outside']);
+      expect(Scheduler).toHaveYielded(['A', 'Outside']);
     });
     expect(root).toMatchRenderedOutput(
       <>
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index 4292333293e8..ab9995d01cb5 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -569,9 +569,11 @@ describe(
           ReactNoop.render(<App />);
         });
 
+        ReactNoop.flushSync();
+
         // Because the render expired, React should finish the tree without
         // consulting `shouldYield` again
-        expect(Scheduler).toFlushExpired(['B', 'C']);
+        expect(Scheduler).toHaveYielded(['B', 'C']);
       });
     });
   },
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index de74c18e5ca6..2cdc2621fbe9 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -292,9 +292,11 @@ describe('ReactSuspenseList', () => {
       </>,
     );
 
-    await C.resolve();
+    await ReactNoop.act(async () => {
+      C.resolve();
+    });
 
-    expect(Scheduler).toFlushAndYield(['C']);
+    expect(Scheduler).toHaveYielded(['C']);
 
     expect(ReactNoop).toMatchRenderedOutput(
       <>
@@ -304,9 +306,11 @@ describe('ReactSuspenseList', () => {
       </>,
     );
 
-    await B.resolve();
+    await ReactNoop.act(async () => {
+      B.resolve();
+    });
 
-    expect(Scheduler).toFlushAndYield(['B']);
+    expect(Scheduler).toHaveYielded(['B']);
 
     expect(ReactNoop).toMatchRenderedOutput(
       <>
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
index d40f56380b7e..b6e34104ad61 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
@@ -310,7 +310,7 @@ describe('ReactSuspensePlaceholder', () => {
     });
 
     describe('when suspending during mount', () => {
-      it('properly accounts for base durations when a suspended times out in a legacy tree', () => {
+      it('properly accounts for base durations when a suspended times out in a legacy tree', async () => {
         ReactNoop.renderLegacySyncRoot(<App shouldSuspend={true} />);
         expect(Scheduler).toHaveYielded([
           'App',
@@ -331,7 +331,10 @@ describe('ReactSuspensePlaceholder', () => {
         jest.advanceTimersByTime(1000);
 
         expect(Scheduler).toHaveYielded(['Promise resolved [Loaded]']);
-        expect(Scheduler).toFlushExpired(['Loaded']);
+
+        ReactNoop.flushSync();
+
+        expect(Scheduler).toHaveYielded(['Loaded']);
         expect(ReactNoop).toMatchRenderedOutput('LoadedText');
         expect(onRender).toHaveBeenCalledTimes(2);
 
@@ -378,7 +381,7 @@ describe('ReactSuspensePlaceholder', () => {
     });
 
     describe('when suspending during update', () => {
-      it('properly accounts for base durations when a suspended times out in a legacy tree', () => {
+      it('properly accounts for base durations when a suspended times out in a legacy tree', async () => {
         ReactNoop.renderLegacySyncRoot(
           <App shouldSuspend={false} textRenderDuration={5} />,
         );
@@ -427,7 +430,10 @@ describe('ReactSuspensePlaceholder', () => {
         jest.advanceTimersByTime(1000);
 
         expect(Scheduler).toHaveYielded(['Promise resolved [Loaded]']);
-        expect(Scheduler).toFlushExpired(['Loaded']);
+
+        ReactNoop.flushSync();
+
+        expect(Scheduler).toHaveYielded(['Loaded']);
         expect(ReactNoop).toMatchRenderedOutput('LoadedNew');
         expect(onRender).toHaveBeenCalledTimes(4);
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 20971e9f58e9..8e8a512dacf4 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -1088,9 +1088,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toHaveYielded(['Suspend! [Result]', 'Loading...']);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-      await resolveText('Result');
+      await ReactNoop.act(async () => {
+        resolveText('Result');
+      });
 
-      expect(Scheduler).toFlushExpired(['Result']);
+      expect(Scheduler).toHaveYielded(['Result']);
       expect(ReactNoop.getChildren()).toEqual([span('Result')]);
     });
 
@@ -1156,8 +1158,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </>,
       );
 
-      await resolveText('Step: 2');
-      expect(Scheduler).toFlushExpired(['Step: 2']);
+      await ReactNoop.act(async () => {
+        resolveText('Step: 2');
+      });
+      expect(Scheduler).toHaveYielded(['Step: 2']);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
           <span prop="Step: 2" />
@@ -1227,9 +1231,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </>,
       );
 
-      await resolveText('B');
+      await ReactNoop.act(async () => {
+        resolveText('B');
+      });
 
-      expect(Scheduler).toFlushExpired(['B']);
+      expect(Scheduler).toHaveYielded(['B']);
       expect(ReactNoop).toMatchRenderedOutput(
         <>
           <span prop="A" />
@@ -1271,9 +1277,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-      await resolveText('Hi');
+      await ReactNoop.act(async () => {
+        resolveText('Hi');
+      });
 
-      expect(Scheduler).toFlushExpired([
+      expect(Scheduler).toHaveYielded([
         'constructor',
         'Hi',
         'componentDidMount',
@@ -1316,8 +1324,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Loading...',
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-      await resolveText('Hi');
-      expect(Scheduler).toFlushExpired(['Hi']);
+      await ReactNoop.act(async () => {
+        resolveText('Hi');
+      });
+      expect(Scheduler).toHaveYielded(['Hi']);
       expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
     });
 
@@ -1360,8 +1370,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           </>,
         ]);
 
-        await resolveText('Hi');
-        expect(Scheduler).toFlushExpired(['Hi']);
+        await ReactNoop.act(async () => {
+          resolveText('Hi');
+        });
+        expect(Scheduler).toHaveYielded(['Hi']);
       });
     } else {
       // @gate enableCache
@@ -1401,9 +1413,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           'Child is hidden: true',
         ]);
 
-        await resolveText('Hi');
+        await ReactNoop.act(async () => {
+          resolveText('Hi');
+        });
 
-        expect(Scheduler).toFlushExpired(['Hi']);
+        expect(Scheduler).toHaveYielded(['Hi']);
       });
     }
 
@@ -1647,9 +1661,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       </>,
     );
 
-    await resolveText('B');
+    await ReactNoop.act(async () => {
+      resolveText('B');
+    });
 
-    expect(Scheduler).toFlushAndYield([
+    expect(Scheduler).toHaveYielded([
       'B',
       'Destroy Layout Effect [Loading...]',
       'Layout Effect [B]',
@@ -1681,9 +1697,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Effect [Loading...]',
     ]);
 
-    await resolveText('B2');
+    await ReactNoop.act(async () => {
+      resolveText('B2');
+    });
 
-    expect(Scheduler).toFlushAndYield([
+    expect(Scheduler).toHaveYielded([
       'B2',
       'Destroy Layout Effect [Loading...]',
       'Destroy Layout Effect [B]',
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index db4214bfd065..cf1db2891e11 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -1794,7 +1794,7 @@ describe('useMutableSource', () => {
       });
 
       // @gate experimental
-      it('should not misidentify mutations after render as side effects', () => {
+      it('should not misidentify mutations after render as side effects', async () => {
         const source = createSource('initial');
         const mutableSource = createMutableSource(
           source,
@@ -1811,15 +1811,16 @@ describe('useMutableSource', () => {
           return null;
         }
 
-        act(() => {
+        await act(async () => {
           ReactNoop.renderLegacySyncRoot(
             <React.StrictMode>
               <MutateDuringRead />
             </React.StrictMode>,
           );
-          expect(Scheduler).toFlushAndYieldThrough([
-            'MutateDuringRead:initial',
-          ]);
+        });
+        expect(Scheduler).toHaveYielded(['MutateDuringRead:initial']);
+
+        await act(async () => {
           source.value = 'updated';
         });
         expect(Scheduler).toHaveYielded(['MutateDuringRead:updated']);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 953eb7cd5661..201546e822b2 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -155,4 +155,6 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 
 export const enableDiscreteEventMicroTasks = false;
 
+export const enableSyncMicroTasks = false;
+
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 2f4406b2ceaf..e0bff4b32f63 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 35e1067646d9..a40b6e293c24 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 67ecdb72983c..97a26ddd8681 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 9ed0be59689e..1417670d7915 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 2e7513a8ddf1..17848a59376c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 5a362e8a3141..ce73c8a870cf 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 54942f0c7cd2..02dba8551fb1 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -58,6 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
+export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 1d9f89699f31..b75b80dbde65 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -57,4 +57,5 @@ export const enableUseRefAccessWarning = __VARIANT__;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableDiscreteEventMicroTasks = __VARIANT__;
+export const enableSyncMicroTasks = __VARIANT__;
 export const enableNativeEventPriorityInference = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 5e5cd2105b38..0612eacf80d0 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,6 +33,7 @@ export const {
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
   enableDiscreteEventMicroTasks,
+  enableSyncMicroTasks,
   enableNativeEventPriorityInference,
 } = dynamicFeatureFlags;
 

From 2e8bbcb54e04a5d57f61377a9de3946fabf2914e Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 25 Feb 2021 19:10:25 -0500
Subject: [PATCH 0283/1603] Fix react-devtools-scheduling-profiler tests on
 main (#20885)

---
 packages/react-devtools-scheduling-profiler/src/constants.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/constants.js b/packages/react-devtools-scheduling-profiler/src/constants.js
index e5f9336d73e7..2e463ae632d9 100644
--- a/packages/react-devtools-scheduling-profiler/src/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/constants.js
@@ -11,6 +11,5 @@ export {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
 } from 'react-devtools-shared/src/constants.js';
-import {TotalLanes} from 'react-reconciler/src/ReactFiberLane.new';
 
-export const REACT_TOTAL_NUM_LANES = TotalLanes;
+export const REACT_TOTAL_NUM_LANES = 31;

From 0cf9fc10ba9d47099f3507080dd736054d877a20 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 26 Feb 2021 00:00:32 -0500
Subject: [PATCH 0284/1603] Fix React Native flow types (#20889)

---
 .../ReactNativeViewConfigRegistry.js             | 16 +++++-----------
 .../createReactNativeComponentClass.js           |  5 ++---
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
index 2c09ddf3caab..5f219fea6520 100644
--- a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -12,12 +12,8 @@
 
 'use strict';
 
-import type {
-  ReactNativeBaseComponentViewConfig,
-  ViewConfigGetter,
-} from './ReactNativeTypes';
-
-const invariant = require('invariant');
+import {type ViewConfig} from './ReactNativeTypes';
+import invariant from 'invariant';
 
 // Event configs
 const customBubblingEventTypes: {
@@ -42,9 +38,7 @@ exports.customDirectEventTypes = customDirectEventTypes;
 const viewConfigCallbacks = new Map();
 const viewConfigs = new Map();
 
-function processEventTypes(
-  viewConfig: ReactNativeBaseComponentViewConfig<>,
-): void {
+function processEventTypes(viewConfig: ViewConfig): void {
   const {bubblingEventTypes, directEventTypes} = viewConfig;
 
   if (__DEV__) {
@@ -82,7 +76,7 @@ function processEventTypes(
  * A callback is provided to load the view config from UIManager.
  * The callback is deferred until the view is actually rendered.
  */
-exports.register = function(name: string, callback: ViewConfigGetter): string {
+exports.register = function(name: string, callback: () => ViewConfig): string {
   invariant(
     !viewConfigCallbacks.has(name),
     'Tried to register two views with the same name %s',
@@ -103,7 +97,7 @@ exports.register = function(name: string, callback: ViewConfigGetter): string {
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
+exports.get = function(name: string): ViewConfig {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);
diff --git a/scripts/rollup/shims/react-native/createReactNativeComponentClass.js b/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
index 86a758d918b4..f8f4c9284e4c 100644
--- a/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
+++ b/scripts/rollup/shims/react-native/createReactNativeComponentClass.js
@@ -11,8 +11,7 @@
 'use strict';
 
 import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
-
-import type {ViewConfigGetter} from './ReactNativeTypes';
+import {type ViewConfig} from './ReactNativeTypes';
 
 const {register} = ReactNativeViewConfigRegistry;
 
@@ -26,7 +25,7 @@ const {register} = ReactNativeViewConfigRegistry;
  */
 const createReactNativeComponentClass = function(
   name: string,
-  callback: ViewConfigGetter,
+  callback: () => ViewConfig,
 ): string {
   return register(name, callback);
 };

From 38f392ceda9a3eb0520261a595fd7009c98579c8 Mon Sep 17 00:00:00 2001
From: Bowen <bowen31337@users.noreply.github.com>
Date: Sat, 27 Feb 2021 08:11:28 +1100
Subject: [PATCH 0285/1603] typo fix for the word 'Psuedo' (#20894)

Co-authored-by: Bowen Li <bowen31337@gmail.com>
---
 .../__tests__/ReactDOMTestSelectors-test.internal.js   |  6 +++---
 packages/react-dom/testing.classic.fb.js               |  2 +-
 packages/react-dom/testing.js                          |  2 +-
 packages/react-dom/testing.modern.fb.js                |  2 +-
 packages/react-reconciler/src/ReactFiberReconciler.js  | 10 +++++-----
 .../react-reconciler/src/ReactFiberReconciler.new.js   |  2 +-
 .../react-reconciler/src/ReactFiberReconciler.old.js   |  2 +-
 packages/react-reconciler/src/ReactTestSelectors.js    | 10 +++++-----
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
index 901b1bb2a9ce..20fe21a73b4c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
@@ -14,7 +14,7 @@ describe('ReactDOMTestSelectors', () => {
 
   let act;
   let createComponentSelector;
-  let createHasPsuedoClassSelector;
+  let createHasPseudoClassSelector;
   let createRoleSelector;
   let createTextSelector;
   let createTestNameSelector;
@@ -35,7 +35,7 @@ describe('ReactDOMTestSelectors', () => {
     const ReactDOM = require('react-dom/testing');
     act = ReactDOM.act;
     createComponentSelector = ReactDOM.createComponentSelector;
-    createHasPsuedoClassSelector = ReactDOM.createHasPsuedoClassSelector;
+    createHasPseudoClassSelector = ReactDOM.createHasPseudoClassSelector;
     createRoleSelector = ReactDOM.createRoleSelector;
     createTextSelector = ReactDOM.createTextSelector;
     createTestNameSelector = ReactDOM.createTestNameSelector;
@@ -454,7 +454,7 @@ describe('ReactDOMTestSelectors', () => {
       const matches = findAllNodes(document.body, [
         createComponentSelector(Example),
         createRoleSelector('article'),
-        createHasPsuedoClassSelector([
+        createHasPseudoClassSelector([
           createRoleSelector('heading'),
           createTextSelector('Should match'),
         ]),
diff --git a/packages/react-dom/testing.classic.fb.js b/packages/react-dom/testing.classic.fb.js
index 3efdba40b78a..923ba78f09d1 100644
--- a/packages/react-dom/testing.classic.fb.js
+++ b/packages/react-dom/testing.classic.fb.js
@@ -11,7 +11,7 @@ export * from './index.classic.fb.js';
 export {
   act,
   createComponentSelector,
-  createHasPsuedoClassSelector,
+  createHasPseudoClassSelector,
   createRoleSelector,
   createTestNameSelector,
   createTextSelector,
diff --git a/packages/react-dom/testing.js b/packages/react-dom/testing.js
index b791e98369cc..d66124f67d83 100644
--- a/packages/react-dom/testing.js
+++ b/packages/react-dom/testing.js
@@ -11,7 +11,7 @@ export * from './index.js';
 export {
   act,
   createComponentSelector,
-  createHasPsuedoClassSelector,
+  createHasPseudoClassSelector,
   createRoleSelector,
   createTestNameSelector,
   createTextSelector,
diff --git a/packages/react-dom/testing.modern.fb.js b/packages/react-dom/testing.modern.fb.js
index 661e6db076d1..7f22bb849e7c 100644
--- a/packages/react-dom/testing.modern.fb.js
+++ b/packages/react-dom/testing.modern.fb.js
@@ -11,7 +11,7 @@ export * from './index.modern.fb.js';
 export {
   act,
   createComponentSelector,
-  createHasPsuedoClassSelector,
+  createHasPseudoClassSelector,
   createRoleSelector,
   createTestNameSelector,
   createTextSelector,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 29b52c5a0009..f1e1ac64645c 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -40,7 +40,7 @@ import {
   act as act_old,
   createPortal as createPortal_old,
   createComponentSelector as createComponentSelector_old,
-  createHasPsuedoClassSelector as createHasPsuedoClassSelector_old,
+  createHasPseudoClassSelector as createHasPseudoClassSelector_old,
   createRoleSelector as createRoleSelector_old,
   createTestNameSelector as createTestNameSelector_old,
   createTextSelector as createTextSelector_old,
@@ -84,7 +84,7 @@ import {
   act as act_new,
   createPortal as createPortal_new,
   createComponentSelector as createComponentSelector_new,
-  createHasPsuedoClassSelector as createHasPsuedoClassSelector_new,
+  createHasPseudoClassSelector as createHasPseudoClassSelector_new,
   createRoleSelector as createRoleSelector_new,
   createTestNameSelector as createTestNameSelector_new,
   createTextSelector as createTextSelector_new,
@@ -190,9 +190,9 @@ export const IdleEventPriority = enableNewReconciler
   : IdleEventPriority_old;
 
 //TODO: "psuedo" is spelled "pseudo"
-export const createHasPsuedoClassSelector = enableNewReconciler
-  ? createHasPsuedoClassSelector_new
-  : createHasPsuedoClassSelector_old;
+export const createHasPseudoClassSelector = enableNewReconciler
+  ? createHasPseudoClassSelector_new
+  : createHasPseudoClassSelector_old;
 export const createRoleSelector = enableNewReconciler
   ? createRoleSelector_new
   : createRoleSelector_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index cc639fa0865f..2c5c183163c5 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -108,7 +108,7 @@ export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {
   createComponentSelector,
-  createHasPsuedoClassSelector,
+  createHasPseudoClassSelector,
   createRoleSelector,
   createTestNameSelector,
   createTextSelector,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 3044bf934daf..430db15494e0 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -108,7 +108,7 @@ export {registerMutableSourceForHydration} from './ReactMutableSource.old';
 export {createPortal} from './ReactPortal';
 export {
   createComponentSelector,
-  createHasPsuedoClassSelector,
+  createHasPseudoClassSelector,
   createRoleSelector,
   createTestNameSelector,
   createTextSelector,
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index d225a6c94a38..ebe50a94ed3f 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -47,7 +47,7 @@ type ComponentSelector = {|
   value: React$AbstractComponent<empty, mixed>,
 |};
 
-type HasPsuedoClassSelector = {|
+type HasPseudoClassSelector = {|
   $$typeof: Type,
   value: Array<Selector>,
 |};
@@ -69,7 +69,7 @@ type TestNameSelector = {|
 
 type Selector =
   | ComponentSelector
-  | HasPsuedoClassSelector
+  | HasPseudoClassSelector
   | RoleSelector
   | TextSelector
   | TestNameSelector;
@@ -83,9 +83,9 @@ export function createComponentSelector(
   };
 }
 
-export function createHasPsuedoClassSelector(
+export function createHasPseudoClassSelector(
   selectors: Array<Selector>,
-): HasPsuedoClassSelector {
+): HasPseudoClassSelector {
   return {
     $$typeof: HAS_PSEUDO_CLASS_TYPE,
     value: selectors,
@@ -143,7 +143,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
     case HAS_PSEUDO_CLASS_TYPE:
       return hasMatchingPaths(
         fiber,
-        ((selector: any): HasPsuedoClassSelector).value,
+        ((selector: any): HasPseudoClassSelector).value,
       );
     case ROLE_TYPE:
       if (fiber.tag === HostComponent) {

From 553440bd1578ef71982c4a10e2cc8c462f33d9be Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Sun, 28 Feb 2021 01:14:54 -0500
Subject: [PATCH 0286/1603] Remove blocking mode and blocking root (#20888)

* Remove blocking mode and blocking root

* Add back SuspenseList test

* Clean up ReactDOMLegacyRoot

* Remove dupe ConcurrentRoot

* Update comment
---
 packages/react-dom/index.classic.fb.js        |   2 -
 packages/react-dom/index.experimental.js      |   1 -
 packages/react-dom/index.js                   |   2 -
 packages/react-dom/index.modern.fb.js         |   2 -
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  27 ---
 ...DOMServerPartialHydration-test.internal.js |   2 +-
 .../ReactDOMServerSuspense-test.internal.js   |   2 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |  58 +-----
 .../ReactUnmockedSchedulerWarning-test.js     |  19 --
 packages/react-dom/src/client/ReactDOM.js     |   3 +-
 packages/react-dom/src/client/ReactDOMRoot.js |  32 +---
 packages/react-noop-renderer/src/ReactNoop.js |   1 -
 .../src/ReactNoopPersistent.js                |   1 -
 .../src/createReactNoop.js                    |  33 +---
 .../react-reconciler/src/ReactFiber.new.js    |  23 +--
 .../react-reconciler/src/ReactFiber.old.js    |  23 +--
 .../src/ReactFiberBeginWork.new.js            |  21 +--
 .../src/ReactFiberBeginWork.old.js            |  21 +--
 .../src/ReactFiberCompleteWork.new.js         |  11 +-
 .../src/ReactFiberCompleteWork.old.js         |  11 +-
 .../src/ReactFiberHooks.new.js                |   4 +-
 .../src/ReactFiberHooks.old.js                |   4 +-
 .../src/ReactFiberRoot.new.js                 |   5 +-
 .../src/ReactFiberRoot.old.js                 |   5 +-
 .../src/ReactFiberThrow.new.js                |  10 +-
 .../src/ReactFiberThrow.old.js                |  10 +-
 .../src/ReactFiberWorkLoop.new.js             |  11 +-
 .../src/ReactFiberWorkLoop.old.js             |  11 +-
 .../react-reconciler/src/ReactRootTags.js     |   5 +-
 .../react-reconciler/src/ReactTypeOfMode.js   |  13 +-
 .../ReactBatchedMode-test.internal.js         | 167 ------------------
 ...tIncrementalErrorHandling-test.internal.js |   4 -
 .../src/__tests__/ReactOffscreen-test.js      |  42 -----
 .../ReactSuspenseFuzz-test.internal.js        |   7 -
 .../ReactStrictMode-test.internal.js          |  17 --
 packages/shared/ReactFeatureFlags.js          |   2 +-
 36 files changed, 81 insertions(+), 531 deletions(-)
 delete mode 100644 packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js

diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index ea9dd9aba257..0b16c0808368 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -30,8 +30,6 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index 9ed70f3959ec..e685ec6e8a1f 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -20,7 +20,6 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot as unstable_createRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   // DO NOT USE: Temporarily exposing this to migrate off of Scheduler.runWithPriority.
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 59825272c3a8..7adfaa4ad218 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -21,8 +21,6 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index addcce97749c..f91cc3cb8955 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -15,8 +15,6 @@ export {
   version,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index ee609d7c2e0c..ec3f19950a99 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -593,33 +593,6 @@ describe('ReactDOMFiberAsync', () => {
     expect(containerC.textContent).toEqual('Finished');
   });
 
-  describe('createBlockingRoot', () => {
-    // @gate experimental
-    it('updates flush without yielding in the next event', () => {
-      const root = ReactDOM.unstable_createBlockingRoot(container);
-
-      function Text(props) {
-        Scheduler.unstable_yieldValue(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
-      expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
-      expect(container.textContent).toEqual('ABC');
-    });
-  });
-
   // @gate experimental
   it('unmounted roots should never clear newer root content from a container', () => {
     const ref = React.createRef();
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 2ad221d5fbcb..ec13c315157f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -352,7 +352,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+        'ReactDOM.createRoot(container, { hydrate: true })' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 6c48b36bd107..7b28d572ccce 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -127,7 +127,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});
+      const root = ReactDOM.createRoot(parent, {hydrate: true});
       root.render(example);
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 57807679e8eb..0496e26692da 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -72,33 +72,6 @@ describe('ReactTestUtils.act()', () => {
 
   runActTests('legacy mode', renderLegacy, unmountLegacy, rerenderLegacy);
 
-  // and then in blocking mode
-  if (__EXPERIMENTAL__) {
-    let blockingRoot = null;
-    const renderBatched = (el, dom) => {
-      blockingRoot = ReactDOM.unstable_createBlockingRoot(dom);
-      blockingRoot.render(el);
-    };
-
-    const unmountBatched = dom => {
-      if (blockingRoot !== null) {
-        blockingRoot.unmount();
-        blockingRoot = null;
-      }
-    };
-
-    const rerenderBatched = el => {
-      blockingRoot.render(el);
-    };
-
-    runActTests(
-      'blocking mode',
-      renderBatched,
-      unmountBatched,
-      rerenderBatched,
-    );
-  }
-
   describe('unacted effects', () => {
     function App() {
       React.useEffect(() => {}, []);
@@ -124,19 +97,6 @@ describe('ReactTestUtils.act()', () => {
       ]);
     });
 
-    // @gate experimental
-    it('warns in blocking mode', () => {
-      expect(() => {
-        const root = ReactDOM.unstable_createBlockingRoot(
-          document.createElement('div'),
-        );
-        root.render(<App />);
-        Scheduler.unstable_flushAll();
-      }).toErrorDev([
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
-    });
-
     // @gate experimental
     it('warns in concurrent mode', () => {
       expect(() => {
@@ -731,14 +691,10 @@ function runActTests(label, render, unmount, rerender) {
 
         it('triggers fallbacks if available', async () => {
           if (label !== 'legacy mode') {
-            // FIXME: Support for Blocking* and Concurrent Mode were
-            // intentionally removed from the public version of `act`. It will
-            // be added back in a future major version, before Blocking and and
-            // Concurrent Mode are officially released. Consider disabling all
-            // non-Legacy tests in this suite until then.
-            //
-            // *Blocking Mode actually does happen to work, though
-            // not "officially" since it's an unreleased feature.
+            // FIXME: Support for Concurrent Root intentionally removed
+            // from the public version of `act`. It will be added back in
+            // a future major version, Concurrent Root officially released.
+            // Consider skipping all non-Legacy tests in this suite until then.
             return;
           }
 
@@ -794,10 +750,8 @@ function runActTests(label, render, unmount, rerender) {
             // In Concurrent Mode, refresh transitions delay indefinitely.
             expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
           } else {
-            // In Legacy Mode and Blocking Mode, all fallbacks are forced to
-            // display, even during a refresh transition.
-            // TODO: Consider delaying indefinitely in Blocking Mode, to match
-            // Concurrent Mode semantics.
+            // In Legacy Mode, all fallbacks are forced to display,
+            // even during a refresh transition.
             expect(
               document.querySelector('[data-test-id=spinner]'),
             ).not.toBeNull();
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
index 435b4989c115..79437e7f5c76 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -43,22 +43,3 @@ it('should warn when rendering in concurrent mode', () => {
     ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
   }).toErrorDev([]);
 });
-
-// @gate experimental
-it('should warn when rendering in blocking mode', () => {
-  expect(() => {
-    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
-      <App />,
-    );
-  }).toErrorDev(
-    'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
-      'to guarantee consistent behaviour across tests and browsers.',
-    {withoutStack: true},
-  );
-  // does not warn twice
-  expect(() => {
-    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
-      <App />,
-    );
-  }).toErrorDev([]);
-});
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 66ae001c3b27..7cff285a938d 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -18,7 +18,7 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
+import {createRoot, isValidContainer} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -201,7 +201,6 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot,
-  createBlockingRoot,
   flushControlled as unstable_flushControlled,
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 62a72dc22961..56532d5d6748 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -51,25 +51,17 @@ import {
   registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
-import {
-  BlockingRoot,
-  ConcurrentRoot,
-  LegacyRoot,
-} from 'react-reconciler/src/ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 
 function ReactDOMRoot(container: Container, options: void | RootOptions) {
   this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
 }
 
-function ReactDOMBlockingRoot(
-  container: Container,
-  tag: RootTag,
-  options: void | RootOptions,
-) {
-  this._internalRoot = createRootImpl(container, tag, options);
+function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) {
+  this._internalRoot = createRootImpl(container, LegacyRoot, options);
 }
 
-ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function(
+ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
   children: ReactNodeList,
 ): void {
   const root = this._internalRoot;
@@ -99,7 +91,7 @@ ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function
   updateContainer(children, root, null, null);
 };
 
-ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function(): void {
+ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function(): void {
   if (__DEV__) {
     if (typeof arguments[0] === 'function') {
       console.error(
@@ -169,23 +161,11 @@ export function createRoot(
   return new ReactDOMRoot(container, options);
 }
 
-export function createBlockingRoot(
-  container: Container,
-  options?: RootOptions,
-): RootType {
-  invariant(
-    isValidContainer(container),
-    'createRoot(...): Target container is not a DOM element.',
-  );
-  warnIfReactDOMContainerInDEV(container);
-  return new ReactDOMBlockingRoot(container, BlockingRoot, options);
-}
-
 export function createLegacyRoot(
   container: Container,
   options?: RootOptions,
 ): RootType {
-  return new ReactDOMBlockingRoot(container, LegacyRoot, options);
+  return new ReactDOMLegacyRoot(container, options);
 }
 
 export function isValidContainer(node: mixed): boolean {
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index 8305dd6d8641..c09fa2d8000f 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -23,7 +23,6 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
-  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index c4a73cdfb81b..97876990a9b5 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -23,7 +23,6 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
-  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 743470966b3f..9eef962f1339 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,11 +21,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
-import {
-  ConcurrentRoot,
-  BlockingRoot,
-  LegacyRoot,
-} from 'react-reconciler/src/ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 
 import {
   enableNativeEventPriorityInference,
@@ -756,33 +752,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
     },
 
-    createBlockingRoot() {
-      const container = {
-        rootID: '' + idCounter++,
-        pendingChildren: [],
-        children: [],
-      };
-      const fiberRoot = NoopRenderer.createContainer(
-        container,
-        BlockingRoot,
-        false,
-        null,
-        null,
-      );
-      return {
-        _Scheduler: Scheduler,
-        render(children: ReactNodeList) {
-          NoopRenderer.updateContainer(children, fiberRoot, null, null);
-        },
-        getChildren() {
-          return getChildren(container);
-        },
-        getChildrenAsJSX() {
-          return getChildrenAsJSX(container);
-        },
-      };
-    },
-
     createLegacyRoot() {
       const container = {
         rootID: '' + idCounter++,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index f1a0f56b2340..b386eac09f81 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -26,7 +26,7 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
-import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
+import {ConcurrentRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
   ClassComponent,
@@ -68,7 +68,6 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -427,25 +426,7 @@ export function createHostRootFiber(
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode | BlockingMode;
-    if (strictModeLevelOverride !== null) {
-      if (strictModeLevelOverride >= 1) {
-        mode |= StrictLegacyMode;
-      }
-      if (enableStrictEffects) {
-        if (strictModeLevelOverride >= 2) {
-          mode |= StrictEffectsMode;
-        }
-      }
-    } else {
-      if (enableStrictEffects && createRootStrictEffectsByDefault) {
-        mode |= StrictLegacyMode | StrictEffectsMode;
-      } else {
-        mode |= StrictLegacyMode;
-      }
-    }
-  } else if (tag === BlockingRoot) {
-    mode = BlockingMode;
+    mode = ConcurrentMode;
     if (strictModeLevelOverride !== null) {
       if (strictModeLevelOverride >= 1) {
         mode |= StrictLegacyMode;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 6419fd6b261b..603feb345ff9 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -26,7 +26,7 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
-import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
+import {ConcurrentRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
   ClassComponent,
@@ -68,7 +68,6 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -427,25 +426,7 @@ export function createHostRootFiber(
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode | BlockingMode;
-    if (strictModeLevelOverride !== null) {
-      if (strictModeLevelOverride >= 1) {
-        mode |= StrictLegacyMode;
-      }
-      if (enableStrictEffects) {
-        if (strictModeLevelOverride >= 2) {
-          mode |= StrictEffectsMode;
-        }
-      }
-    } else {
-      if (enableStrictEffects && createRootStrictEffectsByDefault) {
-        mode |= StrictLegacyMode | StrictEffectsMode;
-      } else {
-        mode |= StrictLegacyMode;
-      }
-    }
-  } else if (tag === BlockingRoot) {
-    mode = BlockingMode;
+    mode = ConcurrentMode;
     if (strictModeLevelOverride !== null) {
       if (strictModeLevelOverride >= 1) {
         mode |= StrictLegacyMode;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6dffcc328927..a4868edfd643 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -126,7 +126,6 @@ import {
   NoMode,
   ProfileMode,
   StrictLegacyMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
@@ -604,7 +603,6 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
-      // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
@@ -2117,7 +2115,10 @@ function mountSuspenseFallbackChildren(
 
   let primaryChildFragment;
   let fallbackChildFragment;
-  if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {
+  if (
+    (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;
@@ -2189,7 +2190,7 @@ function updateSuspensePrimaryChildren(
       children: primaryChildren,
     },
   );
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     primaryChildFragment.lanes = renderLanes;
   }
   primaryChildFragment.return = workInProgress;
@@ -2230,7 +2231,7 @@ function updateSuspenseFallbackChildren(
   if (
     // In legacy mode, we commit the primary tree as if it successfully
     // completed, even though it's in an inconsistent state.
-    (mode & BlockingMode) === NoMode &&
+    (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
@@ -2352,7 +2353,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   primaryChildFragment.sibling = fallbackChildFragment;
   workInProgress.child = primaryChildFragment;
 
-  if ((workInProgress.mode & BlockingMode) !== NoMode) {
+  if ((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);
@@ -2368,12 +2369,12 @@ function mountDehydratedSuspenseComponent(
 ): null | Fiber {
   // During the first pass, we'll bail out and not drill into the children.
   // Instead, we'll leave the content in place and try to hydrate it later.
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     if (__DEV__) {
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+          'ReactDOM.createRoot(container, { hydrate: true })' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
@@ -2426,7 +2427,7 @@ function updateDehydratedSuspenseComponent(
     );
   }
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -2831,7 +2832,7 @@ function updateSuspenseListComponent(
   }
   pushSuspenseContext(workInProgress, suspenseContext);
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((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;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 7801afe9fa23..c706200815d7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -126,7 +126,6 @@ import {
   NoMode,
   ProfileMode,
   StrictLegacyMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
@@ -604,7 +603,6 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
-      // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
@@ -2117,7 +2115,10 @@ function mountSuspenseFallbackChildren(
 
   let primaryChildFragment;
   let fallbackChildFragment;
-  if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {
+  if (
+    (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;
@@ -2189,7 +2190,7 @@ function updateSuspensePrimaryChildren(
       children: primaryChildren,
     },
   );
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     primaryChildFragment.lanes = renderLanes;
   }
   primaryChildFragment.return = workInProgress;
@@ -2230,7 +2231,7 @@ function updateSuspenseFallbackChildren(
   if (
     // In legacy mode, we commit the primary tree as if it successfully
     // completed, even though it's in an inconsistent state.
-    (mode & BlockingMode) === NoMode &&
+    (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
@@ -2352,7 +2353,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   primaryChildFragment.sibling = fallbackChildFragment;
   workInProgress.child = primaryChildFragment;
 
-  if ((workInProgress.mode & BlockingMode) !== NoMode) {
+  if ((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);
@@ -2368,12 +2369,12 @@ function mountDehydratedSuspenseComponent(
 ): null | Fiber {
   // During the first pass, we'll bail out and not drill into the children.
   // Instead, we'll leave the content in place and try to hydrate it later.
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     if (__DEV__) {
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+          'ReactDOM.createRoot(container, { hydrate: true })' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
@@ -2426,7 +2427,7 @@ function updateDehydratedSuspenseComponent(
     );
   }
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -2831,7 +2832,7 @@ function updateSuspenseListComponent(
   }
   pushSuspenseContext(workInProgress, suspenseContext);
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((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;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 47f65d2da6ef..1dcc0ec9c87d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -55,12 +55,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import {
-  NoMode,
-  BlockingMode,
-  ConcurrentMode,
-  ProfileMode,
-} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
   Update,
@@ -1059,12 +1054,10 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in blocking mode we can suspend,
-        // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
-        if ((workInProgress.mode & BlockingMode) !== NoMode) {
+        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
           // TODO: Move this back to throwException because this is too late
           // if this is a large tree which is common for initial loads. We
           // don't know if we should restart a render or not until we get
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index df878d24e76a..dc1112d3b88f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -55,12 +55,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import {
-  NoMode,
-  BlockingMode,
-  ConcurrentMode,
-  ProfileMode,
-} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
   Update,
@@ -1059,12 +1054,10 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in blocking mode we can suspend,
-        // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
-        if ((workInProgress.mode & BlockingMode) !== NoMode) {
+        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
           // TODO: Move this back to throwException because this is too late
           // if this is a large tree which is common for initial loads. We
           // don't know if we should restart a render or not until we get
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 9d1fa5f82ed8..80d62f25967e 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -34,7 +34,7 @@ import {
 
 import {
   NoMode,
-  BlockingMode,
+  ConcurrentMode,
   DebugTracingMode,
   StrictEffectsMode,
 } from './ReactTypeOfMode';
@@ -1829,7 +1829,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
 
     const setId = mountState(id)[1];
 
-    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 61f1a17452e4..2bdead48f33b 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -34,7 +34,7 @@ import {
 
 import {
   NoMode,
-  BlockingMode,
+  ConcurrentMode,
   DebugTracingMode,
   StrictEffectsMode,
 } from './ReactTypeOfMode';
@@ -1829,7 +1829,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
 
     const setId = mountState(id)[1];
 
-    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index ae6a5bdb596f..f06925e10fbe 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -25,7 +25,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
-import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
+import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -73,9 +73,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
 
   if (__DEV__) {
     switch (tag) {
-      case BlockingRoot:
-        this._debugRootType = 'createBlockingRoot()';
-        break;
       case ConcurrentRoot:
         this._debugRootType = 'createRoot()';
         break;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 0c0d45c09872..712803920ebb 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -25,7 +25,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
-import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
+import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -73,9 +73,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
 
   if (__DEV__) {
     switch (tag) {
-      case BlockingRoot:
-        this._debugRootType = 'createBlockingRoot()';
-        break;
       case ConcurrentRoot:
         this._debugRootType = 'createRoot()';
         break;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index af199f0aa8e8..0f7dd89263d1 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -34,7 +34,7 @@ import {
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -214,7 +214,7 @@ function throwException(
     // A legacy mode Suspense quirk, only relevant to hook components.
     const tag = sourceFiber.tag;
     if (
-      (sourceFiber.mode & BlockingMode) === NoMode &&
+      (sourceFiber.mode & ConcurrentMode) === NoMode &&
       (tag === FunctionComponent ||
         tag === ForwardRef ||
         tag === SimpleMemoComponent)
@@ -255,13 +255,13 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is outside of blocking mode, we should *not*
+        // If the boundary is in legacy mode, we should *not*
         // suspend the commit. Pretend as if the suspended component rendered
         // null and keep rendering. In the commit phase, we'll schedule a
         // subsequent synchronous update to re-render the Suspense.
         //
         // Note: It doesn't matter whether the component that suspended was
-        // inside a blocking mode tree. If the Suspense is outside of it, we
+        // inside a concurrent mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
         //
         // If the suspense boundary suspended itself suspended, we don't have to
@@ -269,7 +269,7 @@ function throwException(
         // directly do a second pass over the fallback in this render and
         // pretend we meant to render that directly.
         if (
-          (workInProgress.mode & BlockingMode) === NoMode &&
+          (workInProgress.mode & ConcurrentMode) === NoMode &&
           workInProgress !== returnFiber
         ) {
           workInProgress.flags |= DidCapture;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 6ae53d02fc5c..f7ceb05202cb 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -34,7 +34,7 @@ import {
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -214,7 +214,7 @@ function throwException(
     // A legacy mode Suspense quirk, only relevant to hook components.
     const tag = sourceFiber.tag;
     if (
-      (sourceFiber.mode & BlockingMode) === NoMode &&
+      (sourceFiber.mode & ConcurrentMode) === NoMode &&
       (tag === FunctionComponent ||
         tag === ForwardRef ||
         tag === SimpleMemoComponent)
@@ -255,13 +255,13 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is outside of blocking mode, we should *not*
+        // If the boundary is in legacy mode, we should *not*
         // suspend the commit. Pretend as if the suspended component rendered
         // null and keep rendering. In the commit phase, we'll schedule a
         // subsequent synchronous update to re-render the Suspense.
         //
         // Note: It doesn't matter whether the component that suspended was
-        // inside a blocking mode tree. If the Suspense is outside of it, we
+        // inside a concurrent mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
         //
         // If the suspense boundary suspended itself suspended, we don't have to
@@ -269,7 +269,7 @@ function throwException(
         // directly do a second pass over the fallback in this render and
         // pretend we meant to render that directly.
         if (
-          (workInProgress.mode & BlockingMode) === NoMode &&
+          (workInProgress.mode & ConcurrentMode) === NoMode &&
           workInProgress !== returnFiber
         ) {
           workInProgress.flags |= DidCapture;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7caee0787251..b404837cb25d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -106,7 +106,6 @@ import {
   NoMode,
   StrictLegacyMode,
   ProfileMode,
-  BlockingMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
 import {
@@ -392,7 +391,7 @@ export function getCurrentTime() {
 export function requestUpdateLane(fiber: Fiber): Lane {
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -483,7 +482,7 @@ function requestRetryLane(fiber: Fiber) {
 
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -677,7 +676,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
     workInProgressRoot !== null &&
-    (fiber.mode & BlockingMode) !== NoMode &&
+    (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
     // accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2625,7 +2624,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       return;
     }
 
-    if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
+    if (!(fiber.mode & ConcurrentMode)) {
       return;
     }
 
@@ -3004,7 +3003,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
       didWarnAboutUnmockedScheduler === false &&
       Scheduler.unstable_flushAllWithoutAsserting === undefined
     ) {
-      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
+      if (fiber.mode & ConcurrentMode) {
         didWarnAboutUnmockedScheduler = true;
         console.error(
           'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 1467929ce459..0a366eece732 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -106,7 +106,6 @@ import {
   NoMode,
   StrictLegacyMode,
   ProfileMode,
-  BlockingMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
 import {
@@ -392,7 +391,7 @@ export function getCurrentTime() {
 export function requestUpdateLane(fiber: Fiber): Lane {
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -483,7 +482,7 @@ function requestRetryLane(fiber: Fiber) {
 
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -677,7 +676,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
     workInProgressRoot !== null &&
-    (fiber.mode & BlockingMode) !== NoMode &&
+    (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
     // accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2625,7 +2624,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       return;
     }
 
-    if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
+    if (!(fiber.mode & ConcurrentMode)) {
       return;
     }
 
@@ -3004,7 +3003,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
       didWarnAboutUnmockedScheduler === false &&
       Scheduler.unstable_flushAllWithoutAsserting === undefined
     ) {
-      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
+      if (fiber.mode & ConcurrentMode) {
         didWarnAboutUnmockedScheduler = true;
         console.error(
           'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
diff --git a/packages/react-reconciler/src/ReactRootTags.js b/packages/react-reconciler/src/ReactRootTags.js
index 409f4bd931a7..cda44d6e1ed5 100644
--- a/packages/react-reconciler/src/ReactRootTags.js
+++ b/packages/react-reconciler/src/ReactRootTags.js
@@ -7,8 +7,7 @@
  * @flow
  */
 
-export type RootTag = 0 | 1 | 2;
+export type RootTag = 0 | 1;
 
 export const LegacyRoot = 0;
-export const BlockingRoot = 1;
-export const ConcurrentRoot = 2;
+export const ConcurrentRoot = 1;
diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js
index a6499be7aca1..466363fabd4e 100644
--- a/packages/react-reconciler/src/ReactTypeOfMode.js
+++ b/packages/react-reconciler/src/ReactTypeOfMode.js
@@ -10,10 +10,9 @@
 export type TypeOfMode = number;
 
 export const NoMode = /*            */ 0b000000;
-// TODO: Remove BlockingMode and ConcurrentMode by reading from the root tag instead
-export const BlockingMode = /*      */ 0b000001;
-export const ConcurrentMode = /*    */ 0b000010;
-export const ProfileMode = /*       */ 0b000100;
-export const DebugTracingMode = /*  */ 0b001000;
-export const StrictLegacyMode = /*  */ 0b010000;
-export const StrictEffectsMode = /* */ 0b100000;
+// TODO: Remove ConcurrentMode by reading from the root tag instead
+export const ConcurrentMode = /*    */ 0b000001;
+export const ProfileMode = /*       */ 0b000010;
+export const DebugTracingMode = /*  */ 0b000100;
+export const StrictLegacyMode = /*  */ 0b001000;
+export const StrictEffectsMode = /* */ 0b010000;
diff --git a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js b/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
deleted file mode 100644
index c6af59fbd915..000000000000
--- a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
+++ /dev/null
@@ -1,167 +0,0 @@
-let React;
-let ReactFeatureFlags;
-let ReactNoop;
-let Scheduler;
-let ReactCache;
-let Suspense;
-let TextResource;
-
-describe('ReactBlockingMode', () => {
-  beforeEach(() => {
-    jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-
-    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
-    React = require('react');
-    ReactNoop = require('react-noop-renderer');
-    Scheduler = require('scheduler');
-    ReactCache = require('react-cache');
-    Suspense = React.Suspense;
-
-    TextResource = ReactCache.unstable_createResource(
-      ([text, ms = 0]) => {
-        return new Promise((resolve, reject) =>
-          setTimeout(() => {
-            Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
-            resolve(text);
-          }, ms),
-        );
-      },
-      ([text, ms]) => text,
-    );
-  });
-
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return props.text;
-  }
-
-  function AsyncText(props) {
-    const text = props.text;
-    try {
-      TextResource.read([props.text, props.ms]);
-      Scheduler.unstable_yieldValue(text);
-      return props.text;
-    } catch (promise) {
-      if (typeof promise.then === 'function') {
-        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-      } else {
-        Scheduler.unstable_yieldValue(`Error! [${text}]`);
-      }
-      throw promise;
-    }
-  }
-
-  it('updates flush without yielding in the next event', () => {
-    const root = ReactNoop.createBlockingRoot();
-
-    root.render(
-      <>
-        <Text text="A" />
-        <Text text="B" />
-        <Text text="C" />
-      </>,
-    );
-
-    // Nothing should have rendered yet
-    expect(root).toMatchRenderedOutput(null);
-
-    // Everything should render immediately in the next event
-    expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
-    expect(root).toMatchRenderedOutput('ABC');
-  });
-
-  it('layout updates flush synchronously in same event', () => {
-    const {useLayoutEffect} = React;
-
-    function App() {
-      useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('Layout effect');
-      });
-      return <Text text="Hi" />;
-    }
-
-    const root = ReactNoop.createBlockingRoot();
-    root.render(<App />);
-    expect(root).toMatchRenderedOutput(null);
-
-    expect(Scheduler).toFlushExpired(['Hi', 'Layout effect']);
-    expect(root).toMatchRenderedOutput('Hi');
-  });
-
-  it('uses proper Suspense semantics, not legacy ones', async () => {
-    const root = ReactNoop.createBlockingRoot();
-    root.render(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <span>
-          <Text text="A" />
-        </span>
-        <span>
-          <AsyncText text="B" />
-        </span>
-        <span>
-          <Text text="C" />
-        </span>
-      </Suspense>,
-    );
-
-    expect(Scheduler).toFlushExpired(['A', 'Suspend! [B]', 'C', 'Loading...']);
-    // In Legacy Mode, A and B would mount in a hidden primary tree. In Batched
-    // and Concurrent Mode, nothing in the primary tree should mount. But the
-    // fallback should mount immediately.
-    expect(root).toMatchRenderedOutput('Loading...');
-
-    await jest.advanceTimersByTime(1000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
-    expect(root).toMatchRenderedOutput(
-      <>
-        <span>A</span>
-        <span>B</span>
-        <span>C</span>
-      </>,
-    );
-  });
-
-  it('flushSync does not flush batched work', () => {
-    const {useState, forwardRef, useImperativeHandle} = React;
-    const root = ReactNoop.createBlockingRoot();
-
-    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} />
-      </>,
-    );
-
-    // Mount
-    expect(Scheduler).toFlushExpired(['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);
-      }),
-    );
-
-    // Only the second update should have flushed synchronously
-    expect(Scheduler).toHaveYielded(['B1']);
-    expect(root).toMatchRenderedOutput('A0B1');
-
-    // Now flush the first update
-    expect(Scheduler).toFlushExpired(['A1']);
-    expect(root).toMatchRenderedOutput('A1B1');
-  });
-});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 613fe89d6327..a14c36bfce2b 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1870,10 +1870,6 @@ describe('ReactIncrementalErrorHandling', () => {
       const root = ReactNoop.createRoot();
       root.render('Error when completing root');
       expect(Scheduler).toFlushAndThrow('Error when completing root');
-
-      const blockingRoot = ReactNoop.createBlockingRoot();
-      blockingRoot.render('Error when completing root');
-      expect(Scheduler).toFlushAndThrow('Error when completing root');
     });
   }
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index b3f14e6ad1ef..2c6914fbfc0e 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -123,46 +123,4 @@ describe('ReactOffscreen', () => {
       </>,
     );
   });
-
-  // @gate experimental
-  it('does not defer in blocking mode', async () => {
-    let setState;
-    function Foo() {
-      const [state, _setState] = useState('A');
-      setState = _setState;
-      return <Text text={state} />;
-    }
-
-    const root = ReactNoop.createBlockingRoot();
-    await ReactNoop.act(async () => {
-      root.render(
-        <>
-          <LegacyHidden mode="hidden">
-            <Foo />
-          </LegacyHidden>
-          <Text text="Outside" />
-        </>,
-      );
-      // Should not defer the hidden tree
-      expect(Scheduler).toFlushUntilNextPaint(['A', 'Outside']);
-    });
-    expect(root).toMatchRenderedOutput(
-      <>
-        <span prop="A" />
-        <span prop="Outside" />
-      </>,
-    );
-
-    // Test that the children can be updated
-    await ReactNoop.act(async () => {
-      setState('B');
-    });
-    expect(Scheduler).toHaveYielded(['B']);
-    expect(root).toMatchRenderedOutput(
-      <>
-        <span prop="B" />
-        <span prop="Outside" />
-      </>,
-    );
-  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
index eabcb41be0e6..c67edf8a1563 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -170,13 +170,6 @@ describe('ReactSuspenseFuzz', () => {
       expect(legacyOutput).toEqual(expectedOutput);
       ReactNoop.renderLegacySyncRoot(null);
 
-      resetCache();
-      const batchedBlockingRoot = ReactNoop.createBlockingRoot();
-      batchedBlockingRoot.render(children);
-      resolveAllTasks();
-      const batchedSyncOutput = batchedBlockingRoot.getChildrenAsJSX();
-      expect(batchedSyncOutput).toEqual(expectedOutput);
-
       resetCache();
       const concurrentRoot = ReactNoop.createRoot();
       concurrentRoot.render(children);
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index cb567340d398..20c83a46dfaa 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -66,23 +66,6 @@ describe('ReactStrictMode', () => {
       ]);
     });
 
-    // @gate experimental
-    it('should support overriding default via createBlockingRoot option', () => {
-      act(() => {
-        const container = document.createElement('div');
-        const root = ReactDOM.createBlockingRoot(container, {
-          unstable_strictModeLevel: 0,
-        });
-        root.render(<Component label="A" />);
-      });
-
-      expect(log).toEqual([
-        'A: render',
-        'A: useLayoutEffect mount',
-        'A: useEffect mount',
-      ]);
-    });
-
     // @gate experimental
     it('should disable strict mode if level 0 is specified', () => {
       act(() => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 201546e822b2..b6c7a2b93d0f 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -27,7 +27,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 // this feature flag only impacts StrictEffectsMode.
 export const enableStrictEffects = false;
 
-// If TRUE, trees rendered with createRoot (and createBlockingRoot) APIs will be StrictEffectsMode.
+// If TRUE, trees rendered with createRoot will be StrictEffectsMode.
 // If FALSE, these trees will be StrictLegacyMode.
 export const createRootStrictEffectsByDefault = false;
 

From d857f9e4d057a3e039c0804c6ae087d348f97a06 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 1 Mar 2021 18:34:12 +0000
Subject: [PATCH 0287/1603] Land enableSetImmediate feature flag (#20906)

---
 packages/scheduler/src/SchedulerFeatureFlags.js           | 3 ---
 .../src/__tests__/SchedulerDOMSetImmediate-test.js        | 8 --------
 packages/scheduler/src/forks/SchedulerDOM.js              | 3 +--
 packages/scheduler/src/forks/SchedulerFeatureFlags.www.js | 1 -
 scripts/jest/TestFlags.js                                 | 5 -----
 5 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index de51b058b168..57c9d151879c 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -9,6 +9,3 @@
 export const enableSchedulerDebugging = false;
 export const enableIsInputPending = false;
 export const enableProfiling = __VARIANT__;
-
-// TODO: enable to fix https://github.com/facebook/react/issues/20756.
-export const enableSetImmediate = __VARIANT__;
diff --git a/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js b/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js
index 504fde846329..04fecab12951 100644
--- a/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js
@@ -143,7 +143,6 @@ describe('SchedulerDOMSetImmediate', () => {
     };
   }
 
-  // @gate enableSchedulerSetImmediate
   it('task that finishes before deadline', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('Task');
@@ -153,7 +152,6 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog(['setImmediate Callback', 'Task']);
   });
 
-  // @gate enableSchedulerSetImmediate
   it('task with continuation', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('Task');
@@ -179,7 +177,6 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog(['setImmediate Callback', 'Continuation']);
   });
 
-  // @gate enableSchedulerSetImmediate
   it('multiple tasks', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('A');
@@ -192,7 +189,6 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog(['setImmediate Callback', 'A', 'B']);
   });
 
-  // @gate enableSchedulerSetImmediate
   it('multiple tasks with a yield in between', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('A');
@@ -213,7 +209,6 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog(['setImmediate Callback', 'B']);
   });
 
-  // @gate enableSchedulerSetImmediate
   it('cancels tasks', () => {
     const task = scheduleCallback(NormalPriority, () => {
       runtime.log('Task');
@@ -223,7 +218,6 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog([]);
   });
 
-  // @gate enableSchedulerSetImmediate
   it('throws when a task errors then continues in a new event', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('Oops!');
@@ -241,7 +235,6 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog(['setImmediate Callback', 'Yay']);
   });
 
-  // @gate enableSchedulerSetImmediate
   it('schedule new task after queue has emptied', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('A');
@@ -259,7 +252,6 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog(['setImmediate Callback', 'B']);
   });
 
-  // @gate enableSchedulerSetImmediate
   it('schedule new task after a cancellation', () => {
     const handle = scheduleCallback(NormalPriority, () => {
       runtime.log('A');
diff --git a/packages/scheduler/src/forks/SchedulerDOM.js b/packages/scheduler/src/forks/SchedulerDOM.js
index 90cbc6b2b08c..aa72972296b7 100644
--- a/packages/scheduler/src/forks/SchedulerDOM.js
+++ b/packages/scheduler/src/forks/SchedulerDOM.js
@@ -11,7 +11,6 @@
 import {
   enableSchedulerDebugging,
   enableProfiling,
-  enableSetImmediate,
 } from '../SchedulerFeatureFlags';
 
 import {push, pop, peek} from '../SchedulerMinHeap';
@@ -553,7 +552,7 @@ const performWorkUntilDeadline = () => {
 };
 
 let schedulePerformWorkUntilDeadline;
-if (enableSetImmediate && typeof setImmediate === 'function') {
+if (typeof setImmediate === 'function') {
   // Node.js and old IE.
   // There's a few reasons for why we prefer setImmediate.
   //
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index b6daf1420643..9fd86c7f94b2 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -10,7 +10,6 @@ export const {
   enableIsInputPending,
   enableSchedulerDebugging,
   enableProfiling: enableProfilingFeatureFlag,
-  enableSetImmediate,
 } = require('SchedulerFeatureFlags');
 
 export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 533d3703de01..d46a26fb942e 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -55,7 +55,6 @@ 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');
 
   // TODO: This is a heuristic to detect the release channel by checking a flag
   // that is known to only be enabled in www. What we should do instead is set
@@ -90,10 +89,6 @@ function getTestFlags() {
       // tests, Jest doesn't expose the API correctly. Fix then remove
       // this override.
       enableCache: __EXPERIMENTAL__,
-
-      // This is from SchedulerFeatureFlags. Needed because there's no equivalent
-      // of ReactFeatureFlags-www.dynamic for it. Remove when enableSetImmediate is gone.
-      enableSchedulerSetImmediate: schedulerFeatureFlags.enableSetImmediate,
     },
     {
       get(flags, flagName) {

From de0ee76dbde0a5ec507cf4a62c9690f67b56d7b6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 2 Mar 2021 12:41:57 -0600
Subject: [PATCH 0288/1603] Add unstable_strictModeLevel to test renderer
 (#20914)

Matches what we do for React DOM
---
 packages/react-test-renderer/src/ReactTestRenderer.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index ff80440379f1..65da95aad5bf 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -56,6 +56,7 @@ const {IsSomeRendererActing} = ReactSharedInternals;
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isConcurrent: boolean,
+  unstable_strictModeLevel: number,
   ...
 };
 
@@ -433,6 +434,7 @@ function propsMatch(props: Object, filter: Object): boolean {
 function create(element: React$Element<any>, options: TestRendererOptions) {
   let createNodeMock = defaultTestOptions.createNodeMock;
   let isConcurrent = false;
+  let strictModeLevel = null;
   if (typeof options === 'object' && options !== null) {
     if (typeof options.createNodeMock === 'function') {
       createNodeMock = options.createNodeMock;
@@ -440,6 +442,9 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     if (options.unstable_isConcurrent === true) {
       isConcurrent = true;
     }
+    if (options.unstable_strictModeLevel !== undefined) {
+      strictModeLevel = options.unstable_strictModeLevel;
+    }
   }
   let container = {
     children: [],
@@ -451,7 +456,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isConcurrent ? ConcurrentRoot : LegacyRoot,
     false,
     null,
-    null,
+    strictModeLevel,
   );
   invariant(root != null, 'something went wrong');
   updateContainer(element, root, null, null);

From ee432635724d5a50301448016caa137ac3c0a7a2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 2 Mar 2021 14:51:18 -0600
Subject: [PATCH 0289/1603] Revert "Remove blocking mode and blocking root
 (#20888)" (#20916)

This reverts commit 553440bd1578ef71982c4a10e2cc8c462f33d9be.
---
 packages/react-dom/index.classic.fb.js        |   2 +
 packages/react-dom/index.experimental.js      |   1 +
 packages/react-dom/index.js                   |   2 +
 packages/react-dom/index.modern.fb.js         |   2 +
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  27 +++
 ...DOMServerPartialHydration-test.internal.js |   2 +-
 .../ReactDOMServerSuspense-test.internal.js   |   2 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |  58 +++++-
 .../ReactUnmockedSchedulerWarning-test.js     |  19 ++
 packages/react-dom/src/client/ReactDOM.js     |   3 +-
 packages/react-dom/src/client/ReactDOMRoot.js |  32 +++-
 packages/react-noop-renderer/src/ReactNoop.js |   1 +
 .../src/ReactNoopPersistent.js                |   1 +
 .../src/createReactNoop.js                    |  33 +++-
 .../react-reconciler/src/ReactFiber.new.js    |  23 ++-
 .../react-reconciler/src/ReactFiber.old.js    |  23 ++-
 .../src/ReactFiberBeginWork.new.js            |  21 ++-
 .../src/ReactFiberBeginWork.old.js            |  21 ++-
 .../src/ReactFiberCompleteWork.new.js         |  11 +-
 .../src/ReactFiberCompleteWork.old.js         |  11 +-
 .../src/ReactFiberHooks.new.js                |   4 +-
 .../src/ReactFiberHooks.old.js                |   4 +-
 .../src/ReactFiberRoot.new.js                 |   5 +-
 .../src/ReactFiberRoot.old.js                 |   5 +-
 .../src/ReactFiberThrow.new.js                |  10 +-
 .../src/ReactFiberThrow.old.js                |  10 +-
 .../src/ReactFiberWorkLoop.new.js             |  11 +-
 .../src/ReactFiberWorkLoop.old.js             |  11 +-
 .../react-reconciler/src/ReactRootTags.js     |   5 +-
 .../react-reconciler/src/ReactTypeOfMode.js   |  13 +-
 .../ReactBatchedMode-test.internal.js         | 167 ++++++++++++++++++
 ...tIncrementalErrorHandling-test.internal.js |   4 +
 .../src/__tests__/ReactOffscreen-test.js      |  42 +++++
 .../ReactSuspenseFuzz-test.internal.js        |   7 +
 .../ReactStrictMode-test.internal.js          |  17 ++
 packages/shared/ReactFeatureFlags.js          |   2 +-
 36 files changed, 531 insertions(+), 81 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js

diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index 0b16c0808368..ea9dd9aba257 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -30,6 +30,8 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
+  createBlockingRoot,
+  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index e685ec6e8a1f..9ed70f3959ec 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -20,6 +20,7 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot as unstable_createRoot,
+  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   // DO NOT USE: Temporarily exposing this to migrate off of Scheduler.runWithPriority.
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 7adfaa4ad218..59825272c3a8 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -21,6 +21,8 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
+  createBlockingRoot,
+  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index f91cc3cb8955..addcce97749c 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -15,6 +15,8 @@ export {
   version,
   createRoot,
   createRoot as unstable_createRoot,
+  createBlockingRoot,
+  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index ec3f19950a99..ee609d7c2e0c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -593,6 +593,33 @@ describe('ReactDOMFiberAsync', () => {
     expect(containerC.textContent).toEqual('Finished');
   });
 
+  describe('createBlockingRoot', () => {
+    // @gate experimental
+    it('updates flush without yielding in the next event', () => {
+      const root = ReactDOM.unstable_createBlockingRoot(container);
+
+      function Text(props) {
+        Scheduler.unstable_yieldValue(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
+      expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
+      expect(container.textContent).toEqual('ABC');
+    });
+  });
+
   // @gate experimental
   it('unmounted roots should never clear newer root content from a container', () => {
     const ref = React.createRef();
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index ec13c315157f..2ad221d5fbcb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -352,7 +352,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.createRoot(container, { hydrate: true })' +
+        'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 7b28d572ccce..6c48b36bd107 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -127,7 +127,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      const root = ReactDOM.createRoot(parent, {hydrate: true});
+      const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});
       root.render(example);
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 0496e26692da..57807679e8eb 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -72,6 +72,33 @@ describe('ReactTestUtils.act()', () => {
 
   runActTests('legacy mode', renderLegacy, unmountLegacy, rerenderLegacy);
 
+  // and then in blocking mode
+  if (__EXPERIMENTAL__) {
+    let blockingRoot = null;
+    const renderBatched = (el, dom) => {
+      blockingRoot = ReactDOM.unstable_createBlockingRoot(dom);
+      blockingRoot.render(el);
+    };
+
+    const unmountBatched = dom => {
+      if (blockingRoot !== null) {
+        blockingRoot.unmount();
+        blockingRoot = null;
+      }
+    };
+
+    const rerenderBatched = el => {
+      blockingRoot.render(el);
+    };
+
+    runActTests(
+      'blocking mode',
+      renderBatched,
+      unmountBatched,
+      rerenderBatched,
+    );
+  }
+
   describe('unacted effects', () => {
     function App() {
       React.useEffect(() => {}, []);
@@ -97,6 +124,19 @@ describe('ReactTestUtils.act()', () => {
       ]);
     });
 
+    // @gate experimental
+    it('warns in blocking mode', () => {
+      expect(() => {
+        const root = ReactDOM.unstable_createBlockingRoot(
+          document.createElement('div'),
+        );
+        root.render(<App />);
+        Scheduler.unstable_flushAll();
+      }).toErrorDev([
+        'An update to App ran an effect, but was not wrapped in act(...)',
+      ]);
+    });
+
     // @gate experimental
     it('warns in concurrent mode', () => {
       expect(() => {
@@ -691,10 +731,14 @@ function runActTests(label, render, unmount, rerender) {
 
         it('triggers fallbacks if available', async () => {
           if (label !== 'legacy mode') {
-            // FIXME: Support for Concurrent Root intentionally removed
-            // from the public version of `act`. It will be added back in
-            // a future major version, Concurrent Root officially released.
-            // Consider skipping all non-Legacy tests in this suite until then.
+            // FIXME: Support for Blocking* and Concurrent Mode were
+            // intentionally removed from the public version of `act`. It will
+            // be added back in a future major version, before Blocking and and
+            // Concurrent Mode are officially released. Consider disabling all
+            // non-Legacy tests in this suite until then.
+            //
+            // *Blocking Mode actually does happen to work, though
+            // not "officially" since it's an unreleased feature.
             return;
           }
 
@@ -750,8 +794,10 @@ function runActTests(label, render, unmount, rerender) {
             // In Concurrent Mode, refresh transitions delay indefinitely.
             expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
           } else {
-            // In Legacy Mode, all fallbacks are forced to display,
-            // even during a refresh transition.
+            // In Legacy Mode and Blocking Mode, all fallbacks are forced to
+            // display, even during a refresh transition.
+            // TODO: Consider delaying indefinitely in Blocking Mode, to match
+            // Concurrent Mode semantics.
             expect(
               document.querySelector('[data-test-id=spinner]'),
             ).not.toBeNull();
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
index 79437e7f5c76..435b4989c115 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -43,3 +43,22 @@ it('should warn when rendering in concurrent mode', () => {
     ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
   }).toErrorDev([]);
 });
+
+// @gate experimental
+it('should warn when rendering in blocking mode', () => {
+  expect(() => {
+    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
+      <App />,
+    );
+  }).toErrorDev(
+    'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
+      'to guarantee consistent behaviour across tests and browsers.',
+    {withoutStack: true},
+  );
+  // does not warn twice
+  expect(() => {
+    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
+      <App />,
+    );
+  }).toErrorDev([]);
+});
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 7cff285a938d..66ae001c3b27 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -18,7 +18,7 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, isValidContainer} from './ReactDOMRoot';
+import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -201,6 +201,7 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot,
+  createBlockingRoot,
   flushControlled as unstable_flushControlled,
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 56532d5d6748..62a72dc22961 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -51,17 +51,25 @@ import {
   registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
-import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {
+  BlockingRoot,
+  ConcurrentRoot,
+  LegacyRoot,
+} from 'react-reconciler/src/ReactRootTags';
 
 function ReactDOMRoot(container: Container, options: void | RootOptions) {
   this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
 }
 
-function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) {
-  this._internalRoot = createRootImpl(container, LegacyRoot, options);
+function ReactDOMBlockingRoot(
+  container: Container,
+  tag: RootTag,
+  options: void | RootOptions,
+) {
+  this._internalRoot = createRootImpl(container, tag, options);
 }
 
-ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
+ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function(
   children: ReactNodeList,
 ): void {
   const root = this._internalRoot;
@@ -91,7 +99,7 @@ ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
   updateContainer(children, root, null, null);
 };
 
-ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function(): void {
+ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function(): void {
   if (__DEV__) {
     if (typeof arguments[0] === 'function') {
       console.error(
@@ -161,11 +169,23 @@ export function createRoot(
   return new ReactDOMRoot(container, options);
 }
 
+export function createBlockingRoot(
+  container: Container,
+  options?: RootOptions,
+): RootType {
+  invariant(
+    isValidContainer(container),
+    'createRoot(...): Target container is not a DOM element.',
+  );
+  warnIfReactDOMContainerInDEV(container);
+  return new ReactDOMBlockingRoot(container, BlockingRoot, options);
+}
+
 export function createLegacyRoot(
   container: Container,
   options?: RootOptions,
 ): RootType {
-  return new ReactDOMLegacyRoot(container, options);
+  return new ReactDOMBlockingRoot(container, LegacyRoot, options);
 }
 
 export function isValidContainer(node: mixed): boolean {
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index c09fa2d8000f..8305dd6d8641 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -23,6 +23,7 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
+  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index 97876990a9b5..c4a73cdfb81b 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -23,6 +23,7 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
+  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 9eef962f1339..743470966b3f 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,7 +21,11 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
-import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {
+  ConcurrentRoot,
+  BlockingRoot,
+  LegacyRoot,
+} from 'react-reconciler/src/ReactRootTags';
 
 import {
   enableNativeEventPriorityInference,
@@ -752,6 +756,33 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
     },
 
+    createBlockingRoot() {
+      const container = {
+        rootID: '' + idCounter++,
+        pendingChildren: [],
+        children: [],
+      };
+      const fiberRoot = NoopRenderer.createContainer(
+        container,
+        BlockingRoot,
+        false,
+        null,
+        null,
+      );
+      return {
+        _Scheduler: Scheduler,
+        render(children: ReactNodeList) {
+          NoopRenderer.updateContainer(children, fiberRoot, null, null);
+        },
+        getChildren() {
+          return getChildren(container);
+        },
+        getChildrenAsJSX() {
+          return getChildrenAsJSX(container);
+        },
+      };
+    },
+
     createLegacyRoot() {
       const container = {
         rootID: '' + idCounter++,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index b386eac09f81..f1a0f56b2340 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -26,7 +26,7 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
-import {ConcurrentRoot} from './ReactRootTags';
+import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
   ClassComponent,
@@ -68,6 +68,7 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
+  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -426,7 +427,25 @@ export function createHostRootFiber(
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode;
+    mode = ConcurrentMode | BlockingMode;
+    if (strictModeLevelOverride !== null) {
+      if (strictModeLevelOverride >= 1) {
+        mode |= StrictLegacyMode;
+      }
+      if (enableStrictEffects) {
+        if (strictModeLevelOverride >= 2) {
+          mode |= StrictEffectsMode;
+        }
+      }
+    } else {
+      if (enableStrictEffects && createRootStrictEffectsByDefault) {
+        mode |= StrictLegacyMode | StrictEffectsMode;
+      } else {
+        mode |= StrictLegacyMode;
+      }
+    }
+  } else if (tag === BlockingRoot) {
+    mode = BlockingMode;
     if (strictModeLevelOverride !== null) {
       if (strictModeLevelOverride >= 1) {
         mode |= StrictLegacyMode;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 603feb345ff9..6419fd6b261b 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -26,7 +26,7 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
-import {ConcurrentRoot} from './ReactRootTags';
+import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
   ClassComponent,
@@ -68,6 +68,7 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
+  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -426,7 +427,25 @@ export function createHostRootFiber(
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode;
+    mode = ConcurrentMode | BlockingMode;
+    if (strictModeLevelOverride !== null) {
+      if (strictModeLevelOverride >= 1) {
+        mode |= StrictLegacyMode;
+      }
+      if (enableStrictEffects) {
+        if (strictModeLevelOverride >= 2) {
+          mode |= StrictEffectsMode;
+        }
+      }
+    } else {
+      if (enableStrictEffects && createRootStrictEffectsByDefault) {
+        mode |= StrictLegacyMode | StrictEffectsMode;
+      } else {
+        mode |= StrictLegacyMode;
+      }
+    }
+  } else if (tag === BlockingRoot) {
+    mode = BlockingMode;
     if (strictModeLevelOverride !== null) {
       if (strictModeLevelOverride >= 1) {
         mode |= StrictLegacyMode;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index a4868edfd643..6dffcc328927 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -126,6 +126,7 @@ import {
   NoMode,
   ProfileMode,
   StrictLegacyMode,
+  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
@@ -603,6 +604,7 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
+      // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
@@ -2115,10 +2117,7 @@ function mountSuspenseFallbackChildren(
 
   let primaryChildFragment;
   let fallbackChildFragment;
-  if (
-    (mode & ConcurrentMode) === NoMode &&
-    progressedPrimaryFragment !== null
-  ) {
+  if ((mode & BlockingMode) === 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;
@@ -2190,7 +2189,7 @@ function updateSuspensePrimaryChildren(
       children: primaryChildren,
     },
   );
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
     primaryChildFragment.lanes = renderLanes;
   }
   primaryChildFragment.return = workInProgress;
@@ -2231,7 +2230,7 @@ function updateSuspenseFallbackChildren(
   if (
     // In legacy mode, we commit the primary tree as if it successfully
     // completed, even though it's in an inconsistent state.
-    (mode & ConcurrentMode) === NoMode &&
+    (mode & BlockingMode) === 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
@@ -2353,7 +2352,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   primaryChildFragment.sibling = fallbackChildFragment;
   workInProgress.child = primaryChildFragment;
 
-  if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
+  if ((workInProgress.mode & BlockingMode) !== 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);
@@ -2369,12 +2368,12 @@ function mountDehydratedSuspenseComponent(
 ): null | Fiber {
   // During the first pass, we'll bail out and not drill into the children.
   // Instead, we'll leave the content in place and try to hydrate it later.
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
     if (__DEV__) {
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createRoot(container, { hydrate: true })' +
+          'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
@@ -2427,7 +2426,7 @@ function updateDehydratedSuspenseComponent(
     );
   }
 
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -2832,7 +2831,7 @@ function updateSuspenseListComponent(
   }
   pushSuspenseContext(workInProgress, suspenseContext);
 
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === 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;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index c706200815d7..7801afe9fa23 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -126,6 +126,7 @@ import {
   NoMode,
   ProfileMode,
   StrictLegacyMode,
+  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
@@ -603,6 +604,7 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
+      // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
@@ -2115,10 +2117,7 @@ function mountSuspenseFallbackChildren(
 
   let primaryChildFragment;
   let fallbackChildFragment;
-  if (
-    (mode & ConcurrentMode) === NoMode &&
-    progressedPrimaryFragment !== null
-  ) {
+  if ((mode & BlockingMode) === 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;
@@ -2190,7 +2189,7 @@ function updateSuspensePrimaryChildren(
       children: primaryChildren,
     },
   );
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
     primaryChildFragment.lanes = renderLanes;
   }
   primaryChildFragment.return = workInProgress;
@@ -2231,7 +2230,7 @@ function updateSuspenseFallbackChildren(
   if (
     // In legacy mode, we commit the primary tree as if it successfully
     // completed, even though it's in an inconsistent state.
-    (mode & ConcurrentMode) === NoMode &&
+    (mode & BlockingMode) === 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
@@ -2353,7 +2352,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   primaryChildFragment.sibling = fallbackChildFragment;
   workInProgress.child = primaryChildFragment;
 
-  if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
+  if ((workInProgress.mode & BlockingMode) !== 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);
@@ -2369,12 +2368,12 @@ function mountDehydratedSuspenseComponent(
 ): null | Fiber {
   // During the first pass, we'll bail out and not drill into the children.
   // Instead, we'll leave the content in place and try to hydrate it later.
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
     if (__DEV__) {
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createRoot(container, { hydrate: true })' +
+          'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
@@ -2427,7 +2426,7 @@ function updateDehydratedSuspenseComponent(
     );
   }
 
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -2832,7 +2831,7 @@ function updateSuspenseListComponent(
   }
   pushSuspenseContext(workInProgress, suspenseContext);
 
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+  if ((workInProgress.mode & BlockingMode) === 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;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 1dcc0ec9c87d..47f65d2da6ef 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -55,7 +55,12 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  ProfileMode,
+} from './ReactTypeOfMode';
 import {
   Ref,
   Update,
@@ -1054,10 +1059,12 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
+        // If this subtree is running in blocking mode we can suspend,
+        // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
-        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
+        if ((workInProgress.mode & BlockingMode) !== NoMode) {
           // TODO: Move this back to throwException because this is too late
           // if this is a large tree which is common for initial loads. We
           // don't know if we should restart a render or not until we get
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index dc1112d3b88f..df878d24e76a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -55,7 +55,12 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  BlockingMode,
+  ConcurrentMode,
+  ProfileMode,
+} from './ReactTypeOfMode';
 import {
   Ref,
   Update,
@@ -1054,10 +1059,12 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
+        // If this subtree is running in blocking mode we can suspend,
+        // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
-        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
+        if ((workInProgress.mode & BlockingMode) !== NoMode) {
           // TODO: Move this back to throwException because this is too late
           // if this is a large tree which is common for initial loads. We
           // don't know if we should restart a render or not until we get
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 80d62f25967e..9d1fa5f82ed8 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -34,7 +34,7 @@ import {
 
 import {
   NoMode,
-  ConcurrentMode,
+  BlockingMode,
   DebugTracingMode,
   StrictEffectsMode,
 } from './ReactTypeOfMode';
@@ -1829,7 +1829,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
 
     const setId = mountState(id)[1];
 
-    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
+    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 2bdead48f33b..61f1a17452e4 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -34,7 +34,7 @@ import {
 
 import {
   NoMode,
-  ConcurrentMode,
+  BlockingMode,
   DebugTracingMode,
   StrictEffectsMode,
 } from './ReactTypeOfMode';
@@ -1829,7 +1829,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
 
     const setId = mountState(id)[1];
 
-    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
+    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index f06925e10fbe..ae6a5bdb596f 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -25,7 +25,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
-import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
+import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -73,6 +73,9 @@ function FiberRootNode(containerInfo, tag, hydrate) {
 
   if (__DEV__) {
     switch (tag) {
+      case BlockingRoot:
+        this._debugRootType = 'createBlockingRoot()';
+        break;
       case ConcurrentRoot:
         this._debugRootType = 'createRoot()';
         break;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 712803920ebb..0c0d45c09872 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -25,7 +25,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
-import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
+import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -73,6 +73,9 @@ function FiberRootNode(containerInfo, tag, hydrate) {
 
   if (__DEV__) {
     switch (tag) {
+      case BlockingRoot:
+        this._debugRootType = 'createBlockingRoot()';
+        break;
       case ConcurrentRoot:
         this._debugRootType = 'createRoot()';
         break;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 0f7dd89263d1..af199f0aa8e8 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -34,7 +34,7 @@ import {
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
-import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
+import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -214,7 +214,7 @@ function throwException(
     // A legacy mode Suspense quirk, only relevant to hook components.
     const tag = sourceFiber.tag;
     if (
-      (sourceFiber.mode & ConcurrentMode) === NoMode &&
+      (sourceFiber.mode & BlockingMode) === NoMode &&
       (tag === FunctionComponent ||
         tag === ForwardRef ||
         tag === SimpleMemoComponent)
@@ -255,13 +255,13 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is in legacy mode, we should *not*
+        // If the boundary is outside of blocking mode, we should *not*
         // suspend the commit. Pretend as if the suspended component rendered
         // null and keep rendering. In the commit phase, we'll schedule a
         // subsequent synchronous update to re-render the Suspense.
         //
         // Note: It doesn't matter whether the component that suspended was
-        // inside a concurrent mode tree. If the Suspense is outside of it, we
+        // inside a blocking mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
         //
         // If the suspense boundary suspended itself suspended, we don't have to
@@ -269,7 +269,7 @@ function throwException(
         // directly do a second pass over the fallback in this render and
         // pretend we meant to render that directly.
         if (
-          (workInProgress.mode & ConcurrentMode) === NoMode &&
+          (workInProgress.mode & BlockingMode) === NoMode &&
           workInProgress !== returnFiber
         ) {
           workInProgress.flags |= DidCapture;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index f7ceb05202cb..6ae53d02fc5c 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -34,7 +34,7 @@ import {
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
-import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
+import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -214,7 +214,7 @@ function throwException(
     // A legacy mode Suspense quirk, only relevant to hook components.
     const tag = sourceFiber.tag;
     if (
-      (sourceFiber.mode & ConcurrentMode) === NoMode &&
+      (sourceFiber.mode & BlockingMode) === NoMode &&
       (tag === FunctionComponent ||
         tag === ForwardRef ||
         tag === SimpleMemoComponent)
@@ -255,13 +255,13 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is in legacy mode, we should *not*
+        // If the boundary is outside of blocking mode, we should *not*
         // suspend the commit. Pretend as if the suspended component rendered
         // null and keep rendering. In the commit phase, we'll schedule a
         // subsequent synchronous update to re-render the Suspense.
         //
         // Note: It doesn't matter whether the component that suspended was
-        // inside a concurrent mode tree. If the Suspense is outside of it, we
+        // inside a blocking mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
         //
         // If the suspense boundary suspended itself suspended, we don't have to
@@ -269,7 +269,7 @@ function throwException(
         // directly do a second pass over the fallback in this render and
         // pretend we meant to render that directly.
         if (
-          (workInProgress.mode & ConcurrentMode) === NoMode &&
+          (workInProgress.mode & BlockingMode) === NoMode &&
           workInProgress !== returnFiber
         ) {
           workInProgress.flags |= DidCapture;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b404837cb25d..7caee0787251 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -106,6 +106,7 @@ import {
   NoMode,
   StrictLegacyMode,
   ProfileMode,
+  BlockingMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
 import {
@@ -391,7 +392,7 @@ export function getCurrentTime() {
 export function requestUpdateLane(fiber: Fiber): Lane {
   // Special cases
   const mode = fiber.mode;
-  if ((mode & ConcurrentMode) === NoMode) {
+  if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -482,7 +483,7 @@ function requestRetryLane(fiber: Fiber) {
 
   // Special cases
   const mode = fiber.mode;
-  if ((mode & ConcurrentMode) === NoMode) {
+  if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -676,7 +677,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
     workInProgressRoot !== null &&
-    (fiber.mode & ConcurrentMode) !== NoMode &&
+    (fiber.mode & BlockingMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
     // accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2624,7 +2625,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       return;
     }
 
-    if (!(fiber.mode & ConcurrentMode)) {
+    if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
       return;
     }
 
@@ -3003,7 +3004,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
       didWarnAboutUnmockedScheduler === false &&
       Scheduler.unstable_flushAllWithoutAsserting === undefined
     ) {
-      if (fiber.mode & ConcurrentMode) {
+      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
         didWarnAboutUnmockedScheduler = true;
         console.error(
           'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 0a366eece732..1467929ce459 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -106,6 +106,7 @@ import {
   NoMode,
   StrictLegacyMode,
   ProfileMode,
+  BlockingMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
 import {
@@ -391,7 +392,7 @@ export function getCurrentTime() {
 export function requestUpdateLane(fiber: Fiber): Lane {
   // Special cases
   const mode = fiber.mode;
-  if ((mode & ConcurrentMode) === NoMode) {
+  if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -482,7 +483,7 @@ function requestRetryLane(fiber: Fiber) {
 
   // Special cases
   const mode = fiber.mode;
-  if ((mode & ConcurrentMode) === NoMode) {
+  if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentPriorityLevel() === ImmediateSchedulerPriority
@@ -676,7 +677,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
     workInProgressRoot !== null &&
-    (fiber.mode & ConcurrentMode) !== NoMode &&
+    (fiber.mode & BlockingMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
     // accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2624,7 +2625,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       return;
     }
 
-    if (!(fiber.mode & ConcurrentMode)) {
+    if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
       return;
     }
 
@@ -3003,7 +3004,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
       didWarnAboutUnmockedScheduler === false &&
       Scheduler.unstable_flushAllWithoutAsserting === undefined
     ) {
-      if (fiber.mode & ConcurrentMode) {
+      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
         didWarnAboutUnmockedScheduler = true;
         console.error(
           'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
diff --git a/packages/react-reconciler/src/ReactRootTags.js b/packages/react-reconciler/src/ReactRootTags.js
index cda44d6e1ed5..409f4bd931a7 100644
--- a/packages/react-reconciler/src/ReactRootTags.js
+++ b/packages/react-reconciler/src/ReactRootTags.js
@@ -7,7 +7,8 @@
  * @flow
  */
 
-export type RootTag = 0 | 1;
+export type RootTag = 0 | 1 | 2;
 
 export const LegacyRoot = 0;
-export const ConcurrentRoot = 1;
+export const BlockingRoot = 1;
+export const ConcurrentRoot = 2;
diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js
index 466363fabd4e..a6499be7aca1 100644
--- a/packages/react-reconciler/src/ReactTypeOfMode.js
+++ b/packages/react-reconciler/src/ReactTypeOfMode.js
@@ -10,9 +10,10 @@
 export type TypeOfMode = number;
 
 export const NoMode = /*            */ 0b000000;
-// TODO: Remove ConcurrentMode by reading from the root tag instead
-export const ConcurrentMode = /*    */ 0b000001;
-export const ProfileMode = /*       */ 0b000010;
-export const DebugTracingMode = /*  */ 0b000100;
-export const StrictLegacyMode = /*  */ 0b001000;
-export const StrictEffectsMode = /* */ 0b010000;
+// TODO: Remove BlockingMode and ConcurrentMode by reading from the root tag instead
+export const BlockingMode = /*      */ 0b000001;
+export const ConcurrentMode = /*    */ 0b000010;
+export const ProfileMode = /*       */ 0b000100;
+export const DebugTracingMode = /*  */ 0b001000;
+export const StrictLegacyMode = /*  */ 0b010000;
+export const StrictEffectsMode = /* */ 0b100000;
diff --git a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js b/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
new file mode 100644
index 000000000000..c6af59fbd915
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
@@ -0,0 +1,167 @@
+let React;
+let ReactFeatureFlags;
+let ReactNoop;
+let Scheduler;
+let ReactCache;
+let Suspense;
+let TextResource;
+
+describe('ReactBlockingMode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
+    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    ReactCache = require('react-cache');
+    Suspense = React.Suspense;
+
+    TextResource = ReactCache.unstable_createResource(
+      ([text, ms = 0]) => {
+        return new Promise((resolve, reject) =>
+          setTimeout(() => {
+            Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
+            resolve(text);
+          }, ms),
+        );
+      },
+      ([text, ms]) => text,
+    );
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
+  function AsyncText(props) {
+    const text = props.text;
+    try {
+      TextResource.read([props.text, props.ms]);
+      Scheduler.unstable_yieldValue(text);
+      return props.text;
+    } catch (promise) {
+      if (typeof promise.then === 'function') {
+        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+      } else {
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
+      }
+      throw promise;
+    }
+  }
+
+  it('updates flush without yielding in the next event', () => {
+    const root = ReactNoop.createBlockingRoot();
+
+    root.render(
+      <>
+        <Text text="A" />
+        <Text text="B" />
+        <Text text="C" />
+      </>,
+    );
+
+    // Nothing should have rendered yet
+    expect(root).toMatchRenderedOutput(null);
+
+    // Everything should render immediately in the next event
+    expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  it('layout updates flush synchronously in same event', () => {
+    const {useLayoutEffect} = React;
+
+    function App() {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Layout effect');
+      });
+      return <Text text="Hi" />;
+    }
+
+    const root = ReactNoop.createBlockingRoot();
+    root.render(<App />);
+    expect(root).toMatchRenderedOutput(null);
+
+    expect(Scheduler).toFlushExpired(['Hi', 'Layout effect']);
+    expect(root).toMatchRenderedOutput('Hi');
+  });
+
+  it('uses proper Suspense semantics, not legacy ones', async () => {
+    const root = ReactNoop.createBlockingRoot();
+    root.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <span>
+          <Text text="A" />
+        </span>
+        <span>
+          <AsyncText text="B" />
+        </span>
+        <span>
+          <Text text="C" />
+        </span>
+      </Suspense>,
+    );
+
+    expect(Scheduler).toFlushExpired(['A', 'Suspend! [B]', 'C', 'Loading...']);
+    // In Legacy Mode, A and B would mount in a hidden primary tree. In Batched
+    // and Concurrent Mode, nothing in the primary tree should mount. But the
+    // fallback should mount immediately.
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await jest.advanceTimersByTime(1000);
+    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+    expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
+  it('flushSync does not flush batched work', () => {
+    const {useState, forwardRef, useImperativeHandle} = React;
+    const root = ReactNoop.createBlockingRoot();
+
+    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} />
+      </>,
+    );
+
+    // Mount
+    expect(Scheduler).toFlushExpired(['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);
+      }),
+    );
+
+    // Only the second update should have flushed synchronously
+    expect(Scheduler).toHaveYielded(['B1']);
+    expect(root).toMatchRenderedOutput('A0B1');
+
+    // Now flush the first update
+    expect(Scheduler).toFlushExpired(['A1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index a14c36bfce2b..613fe89d6327 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1870,6 +1870,10 @@ describe('ReactIncrementalErrorHandling', () => {
       const root = ReactNoop.createRoot();
       root.render('Error when completing root');
       expect(Scheduler).toFlushAndThrow('Error when completing root');
+
+      const blockingRoot = ReactNoop.createBlockingRoot();
+      blockingRoot.render('Error when completing root');
+      expect(Scheduler).toFlushAndThrow('Error when completing root');
     });
   }
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 2c6914fbfc0e..b3f14e6ad1ef 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -123,4 +123,46 @@ describe('ReactOffscreen', () => {
       </>,
     );
   });
+
+  // @gate experimental
+  it('does not defer in blocking mode', async () => {
+    let setState;
+    function Foo() {
+      const [state, _setState] = useState('A');
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createBlockingRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <>
+          <LegacyHidden mode="hidden">
+            <Foo />
+          </LegacyHidden>
+          <Text text="Outside" />
+        </>,
+      );
+      // Should not defer the hidden tree
+      expect(Scheduler).toFlushUntilNextPaint(['A', 'Outside']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="A" />
+        <span prop="Outside" />
+      </>,
+    );
+
+    // Test that the children can be updated
+    await ReactNoop.act(async () => {
+      setState('B');
+    });
+    expect(Scheduler).toHaveYielded(['B']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="B" />
+        <span prop="Outside" />
+      </>,
+    );
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
index c67edf8a1563..eabcb41be0e6 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -170,6 +170,13 @@ describe('ReactSuspenseFuzz', () => {
       expect(legacyOutput).toEqual(expectedOutput);
       ReactNoop.renderLegacySyncRoot(null);
 
+      resetCache();
+      const batchedBlockingRoot = ReactNoop.createBlockingRoot();
+      batchedBlockingRoot.render(children);
+      resolveAllTasks();
+      const batchedSyncOutput = batchedBlockingRoot.getChildrenAsJSX();
+      expect(batchedSyncOutput).toEqual(expectedOutput);
+
       resetCache();
       const concurrentRoot = ReactNoop.createRoot();
       concurrentRoot.render(children);
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 20c83a46dfaa..cb567340d398 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -66,6 +66,23 @@ describe('ReactStrictMode', () => {
       ]);
     });
 
+    // @gate experimental
+    it('should support overriding default via createBlockingRoot option', () => {
+      act(() => {
+        const container = document.createElement('div');
+        const root = ReactDOM.createBlockingRoot(container, {
+          unstable_strictModeLevel: 0,
+        });
+        root.render(<Component label="A" />);
+      });
+
+      expect(log).toEqual([
+        'A: render',
+        'A: useLayoutEffect mount',
+        'A: useEffect mount',
+      ]);
+    });
+
     // @gate experimental
     it('should disable strict mode if level 0 is specified', () => {
       act(() => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index b6c7a2b93d0f..201546e822b2 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -27,7 +27,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 // this feature flag only impacts StrictEffectsMode.
 export const enableStrictEffects = false;
 
-// If TRUE, trees rendered with createRoot will be StrictEffectsMode.
+// If TRUE, trees rendered with createRoot (and createBlockingRoot) APIs will be StrictEffectsMode.
 // If FALSE, these trees will be StrictLegacyMode.
 export const createRootStrictEffectsByDefault = false;
 

From 7df65725ba7826508e0f3c0f1c6f088efdbecfca Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 5 Mar 2021 16:02:02 -0500
Subject: [PATCH 0290/1603] Split getComponentName into
 getComponentNameFromFiber and getComponentNameFromType (#20940)

Split getComponentName into getComponentNameFromFiber and getComponentNameFromType
---
 .../react-dom/src/client/ReactDOMLegacy.js    |   4 +-
 .../src/server/ReactPartialRenderer.js        |  29 ++--
 .../src/server/ReactPartialRendererContext.js |   8 +-
 .../react-native-renderer/src/ReactFabric.js  |   6 +-
 .../src/ReactNativeFiberInspector.js          |   4 +-
 .../src/ReactNativeRenderer.js                |   6 +-
 .../src/ReactChildFiber.new.js                |  11 +-
 .../src/ReactChildFiber.old.js                |  11 +-
 .../react-reconciler/src/ReactCurrentFiber.js |   4 +-
 .../react-reconciler/src/ReactFiber.new.js    |  38 +-----
 .../react-reconciler/src/ReactFiber.old.js    |  38 +-----
 .../src/ReactFiberBeginWork.new.js            |  35 ++---
 .../src/ReactFiberBeginWork.old.js            |  35 ++---
 .../src/ReactFiberClassComponent.new.js       |  31 ++---
 .../src/ReactFiberClassComponent.old.js       |  31 ++---
 .../src/ReactFiberCommitWork.new.js           |  22 ++--
 .../src/ReactFiberCommitWork.old.js           |  22 ++--
 .../src/ReactFiberContext.new.js              |  10 +-
 .../src/ReactFiberContext.old.js              |  10 +-
 .../src/ReactFiberErrorLogger.js              |  18 +--
 .../src/ReactFiberHooks.new.js                |  16 ++-
 .../src/ReactFiberHooks.old.js                |  16 ++-
 .../src/ReactFiberReconciler.new.js           |   6 +-
 .../src/ReactFiberReconciler.old.js           |   6 +-
 .../src/ReactFiberThrow.new.js                |   8 +-
 .../src/ReactFiberThrow.old.js                |   8 +-
 .../src/ReactFiberTreeReflection.js           |   4 +-
 .../src/ReactFiberWorkLoop.new.js             |  14 +-
 .../src/ReactFiberWorkLoop.old.js             |  14 +-
 .../src/ReactStrictModeWarnings.new.js        |  16 +--
 .../src/ReactStrictModeWarnings.old.js        |  16 +--
 .../src/ReactTestSelectors.js                 |   4 +-
 .../src/SchedulingProfiler.js                 |   8 +-
 .../src/getComponentNameFromFiber.js          | 124 ++++++++++++++++++
 .../src/ReactTestRenderer.js                  |   4 +-
 packages/react/src/ReactElement.js            |   6 +-
 packages/react/src/ReactElementValidator.js   |  16 +--
 packages/react/src/jsx/ReactJSXElement.js     |   8 +-
 .../react/src/jsx/ReactJSXElementValidator.js |  14 +-
 ...entName.js => getComponentNameFromType.js} |  13 +-
 40 files changed, 386 insertions(+), 308 deletions(-)
 create mode 100644 packages/react-reconciler/src/getComponentNameFromFiber.js
 rename packages/shared/{getComponentName.js => getComponentNameFromType.js} (86%)

diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 6ca009233b0e..7a3608a493a2 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -32,7 +32,7 @@ import {
   findHostInstance,
   findHostInstanceWithWarning,
 } from 'react-reconciler/src/ReactFiberReconciler';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {has as hasInstance} from 'shared/ReactInstanceMap';
@@ -235,7 +235,7 @@ export function findDOMNode(
             'never access something that requires stale data from the previous ' +
             'render, such as refs. Move this logic to componentDidMount and ' +
             'componentDidUpdate instead.',
-          getComponentName(owner.type) || 'A component',
+          getComponentNameFromType(owner.type) || 'A component',
         );
       }
       owner.stateNode._warnedAboutRefsInRender = true;
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index a8528ed946dc..d01c431e7318 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -14,7 +14,7 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
 import invariant from 'shared/invariant';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -259,7 +259,7 @@ function warnNoop(
   if (__DEV__) {
     const constructor = publicInstance.constructor;
     const componentName =
-      (constructor && getComponentName(constructor)) || 'ReactClass';
+      (constructor && getComponentNameFromType(constructor)) || 'ReactClass';
     const warningKey = componentName + '.' + callerName;
     if (didWarnAboutNoopUpdateForComponent[warningKey]) {
       return;
@@ -404,7 +404,7 @@ function validateRenderResult(child, type) {
       '%s(...): Nothing was returned from render. This usually means a ' +
         'return statement is missing. Or, to render nothing, ' +
         'return null.',
-      getComponentName(type) || 'Component',
+      getComponentNameFromType(type) || 'Component',
     );
   }
 }
@@ -467,7 +467,8 @@ function resolve(
       if (typeof Component.getDerivedStateFromProps === 'function') {
         if (__DEV__) {
           if (inst.state === null || inst.state === undefined) {
-            const componentName = getComponentName(Component) || 'Unknown';
+            const componentName =
+              getComponentNameFromType(Component) || 'Unknown';
             if (!didWarnAboutUninitializedState[componentName]) {
               console.error(
                 '`%s` uses `getDerivedStateFromProps` but its initial state is ' +
@@ -491,7 +492,8 @@ function resolve(
 
         if (__DEV__) {
           if (partialState === undefined) {
-            const componentName = getComponentName(Component) || 'Unknown';
+            const componentName =
+              getComponentNameFromType(Component) || 'Unknown';
             if (!didWarnAboutUndefinedDerivedState[componentName]) {
               console.error(
                 '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
@@ -513,7 +515,8 @@ function resolve(
           Component.prototype &&
           typeof Component.prototype.render === 'function'
         ) {
-          const componentName = getComponentName(Component) || 'Unknown';
+          const componentName =
+            getComponentNameFromType(Component) || 'Unknown';
 
           if (!didWarnAboutBadClass[componentName]) {
             console.error(
@@ -535,7 +538,8 @@ function resolve(
         // Support for module components is deprecated and is removed behind a flag.
         // Whether or not it would crash later, we want to show a good message in DEV first.
         if (inst != null && inst.render != null) {
-          const componentName = getComponentName(Component) || 'Unknown';
+          const componentName =
+            getComponentNameFromType(Component) || 'Unknown';
           if (!didWarnAboutModulePatternComponent[componentName]) {
             console.error(
               'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -583,7 +587,8 @@ function resolve(
             warnAboutDeprecatedLifecycles &&
             inst.componentWillMount.__suppressDeprecationWarning !== true
           ) {
-            const componentName = getComponentName(Component) || 'Unknown';
+            const componentName =
+              getComponentNameFromType(Component) || 'Unknown';
 
             if (!didWarnAboutDeprecatedWillMount[componentName]) {
               console.warn(
@@ -665,7 +670,7 @@ function resolve(
           console.error(
             '%s uses the legacy childContextTypes API which is no longer supported. ' +
               'Use React.createContext() instead.',
-            getComponentName(Component) || 'Unknown',
+            getComponentNameFromType(Component) || 'Unknown',
           );
         }
       }
@@ -678,7 +683,7 @@ function resolve(
             invariant(
               contextKey in childContextTypes,
               '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-              getComponentName(Component) || 'Unknown',
+              getComponentNameFromType(Component) || 'Unknown',
               contextKey,
             );
           }
@@ -687,7 +692,7 @@ function resolve(
             console.error(
               '%s.getChildContext(): childContextTypes must be defined in order to ' +
                 'use getChildContext().',
-              getComponentName(Component) || 'Unknown',
+              getComponentNameFromType(Component) || 'Unknown',
             );
           }
         }
@@ -1298,7 +1303,7 @@ class ReactDOMServerRenderer {
             "it's defined in, or you might have mixed up default and " +
             'named imports.';
         }
-        const ownerName = owner ? getComponentName(owner) : null;
+        const ownerName = owner ? getComponentNameFromType(owner) : null;
         if (ownerName) {
           info += '\n\nCheck the render method of `' + ownerName + '`.';
         }
diff --git a/packages/react-dom/src/server/ReactPartialRendererContext.js b/packages/react-dom/src/server/ReactPartialRendererContext.js
index 87b9be06b07f..65af591e3651 100644
--- a/packages/react-dom/src/server/ReactPartialRendererContext.js
+++ b/packages/react-dom/src/server/ReactPartialRendererContext.js
@@ -12,7 +12,7 @@ import type {ReactContext} from 'shared/ReactTypes';
 
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import checkPropTypes from 'shared/checkPropTypes';
 
 let didWarnAboutInvalidateContextType;
@@ -105,7 +105,7 @@ export function processContext(
           console.error(
             '%s defines an invalid contextType. ' +
               'contextType should point to the Context object returned by React.createContext().%s',
-            getComponentName(type) || 'Component',
+            getComponentNameFromType(type) || 'Component',
             addendum,
           );
         }
@@ -121,7 +121,7 @@ export function processContext(
           console.error(
             '%s uses the legacy contextTypes API which is no longer supported. ' +
               'Use React.createContext() with static contextType instead.',
-            getComponentName(type) || 'Unknown',
+            getComponentNameFromType(type) || 'Unknown',
           );
         }
       }
@@ -142,7 +142,7 @@ export function processContext(
           console.error(
             '%s uses the legacy contextTypes API which is no longer supported. ' +
               'Use React.createContext() with React.useContext() instead.',
-            getComponentName(type) || 'Unknown',
+            getComponentNameFromType(type) || 'Unknown',
           );
         }
       }
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 9761124e7da6..82a6cb7e6ba6 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -43,7 +43,7 @@ import {
 } from './ReactNativeFiberInspector';
 import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -60,7 +60,7 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
             'never access something that requires stale data from the previous ' +
             'render, such as refs. Move this logic to componentDidMount and ' +
             'componentDidUpdate instead.',
-          getComponentName(owner.type) || 'A component',
+          getComponentNameFromType(owner.type) || 'A component',
         );
       }
 
@@ -111,7 +111,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
             'never access something that requires stale data from the previous ' +
             'render, such as refs. Move this logic to componentDidMount and ' +
             'componentDidUpdate instead.',
-          getComponentName(owner.type) || 'A component',
+          getComponentNameFromType(owner.type) || 'A component',
         );
       }
 
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
index d008e86204e5..04ddc968d7e8 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -14,7 +14,7 @@ import {
   findCurrentHostFiber,
   findCurrentFiberUsingSlowPath,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
 import invariant from 'shared/invariant';
 // Module provided by RN:
@@ -81,7 +81,7 @@ if (__DEV__) {
 
   const createHierarchy = function(fiberHierarchy) {
     return fiberHierarchy.map(fiber => ({
-      name: getComponentName(fiber.type),
+      name: getComponentNameFromType(fiber.type),
       getInspectorData: findNodeHandle => {
         return {
           props: getHostProps(fiber),
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 547fdd2de5c5..36b9e2b1e284 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -46,7 +46,7 @@ import {
 } from './ReactNativeFiberInspector';
 import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -63,7 +63,7 @@ function findHostInstance_DEPRECATED(
             'never access something that requires stale data from the previous ' +
             'render, such as refs. Move this logic to componentDidMount and ' +
             'componentDidUpdate instead.',
-          getComponentName(owner.type) || 'A component',
+          getComponentNameFromType(owner.type) || 'A component',
         );
       }
 
@@ -110,7 +110,7 @@ function findNodeHandle(componentOrHandle: any): ?number {
             'never access something that requires stale data from the previous ' +
             'render, such as refs. Move this logic to componentDidMount and ' +
             'componentDidUpdate instead.',
-          getComponentName(owner.type) || 'A component',
+          getComponentNameFromType(owner.type) || 'A component',
         );
       }
 
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 222a8730c4fa..f9041ce6590b 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {Placement, ChildDeletion} from './ReactFiberFlags';
 import {
   getIteratorFn,
@@ -82,7 +82,7 @@ if (__DEV__) {
     );
     child._store.validated = true;
 
-    const componentName = getComponentName(returnFiber.type) || 'Component';
+    const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
 
     if (ownerHasKeyUseWarning[componentName]) {
       return;
@@ -124,7 +124,8 @@ function coerceRef(
           element._owner.stateNode !== element._self
         )
       ) {
-        const componentName = getComponentName(returnFiber.type) || 'Component';
+        const componentName =
+          getComponentNameFromFiber(returnFiber) || 'Component';
         if (!didWarnAboutStringRefs[componentName]) {
           if (warnAboutStringRefs) {
             console.error(
@@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
 
 function warnOnFunctionType(returnFiber: Fiber) {
   if (__DEV__) {
-    const componentName = getComponentName(returnFiber.type) || 'Component';
+    const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
 
     if (ownerHasFunctionTypeWarning[componentName]) {
       return;
@@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) {
             '%s(...): Nothing was returned from render. This usually means a ' +
               'return statement is missing. Or, to render nothing, ' +
               'return null.',
-            getComponentName(returnFiber.type) || 'Component',
+            getComponentNameFromFiber(returnFiber) || 'Component',
           );
         }
       }
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 036fa65503c0..10c4ccb4dc5b 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -12,7 +12,7 @@ import type {ReactPortal} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {Placement, ChildDeletion} from './ReactFiberFlags';
 import {
   getIteratorFn,
@@ -82,7 +82,7 @@ if (__DEV__) {
     );
     child._store.validated = true;
 
-    const componentName = getComponentName(returnFiber.type) || 'Component';
+    const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
 
     if (ownerHasKeyUseWarning[componentName]) {
       return;
@@ -124,7 +124,8 @@ function coerceRef(
           element._owner.stateNode !== element._self
         )
       ) {
-        const componentName = getComponentName(returnFiber.type) || 'Component';
+        const componentName =
+          getComponentNameFromFiber(returnFiber) || 'Component';
         if (!didWarnAboutStringRefs[componentName]) {
           if (warnAboutStringRefs) {
             console.error(
@@ -232,7 +233,7 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
 
 function warnOnFunctionType(returnFiber: Fiber) {
   if (__DEV__) {
-    const componentName = getComponentName(returnFiber.type) || 'Component';
+    const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
 
     if (ownerHasFunctionTypeWarning[componentName]) {
       return;
@@ -1333,7 +1334,7 @@ function ChildReconciler(shouldTrackSideEffects) {
             '%s(...): Nothing was returned from render. This usually means a ' +
               'return statement is missing. Or, to render nothing, ' +
               'return null.',
-            getComponentName(returnFiber.type) || 'Component',
+            getComponentNameFromFiber(returnFiber) || 'Component',
           );
         }
       }
diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js
index 5a6a648eb7ff..b2186131a98a 100644
--- a/packages/react-reconciler/src/ReactCurrentFiber.js
+++ b/packages/react-reconciler/src/ReactCurrentFiber.js
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactInternalTypes';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
@@ -25,7 +25,7 @@ export function getCurrentFiberOwnerNameInDevOrNull(): string | null {
     }
     const owner = current._debugOwner;
     if (owner !== null && typeof owner !== 'undefined') {
-      return getComponentName(owner.type);
+      return getComponentNameFromFiber(owner);
     }
   }
   return null;
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index f1a0f56b2340..5a56fb0592c4 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -52,7 +52,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {
@@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps(
               "it's defined in, or you might have mixed up default and " +
               'named imports.';
           }
-          const ownerName = owner ? getComponentName(owner.type) : null;
+          const ownerName = owner ? getComponentNameFromFiber(owner) : null;
           if (ownerName) {
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
@@ -678,9 +678,7 @@ function createFiberFromProfiler(
   }
 
   const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
-  // TODO: The Profiler fiber shouldn't have a type. It has a tag.
   fiber.elementType = REACT_PROFILER_TYPE;
-  fiber.type = REACT_PROFILER_TYPE;
   fiber.lanes = lanes;
 
   if (enableProfilerTimer) {
@@ -700,13 +698,7 @@ export function createFiberFromSuspense(
   key: null | string,
 ) {
   const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
-
-  // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  fiber.type = REACT_SUSPENSE_TYPE;
   fiber.elementType = REACT_SUSPENSE_TYPE;
-
   fiber.lanes = lanes;
   return fiber;
 }
@@ -718,12 +710,6 @@ export function createFiberFromSuspenseList(
   key: null | string,
 ) {
   const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);
-  if (__DEV__) {
-    // TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag.
-    // This needs to be fixed in getComponentName so that it relies on the tag
-    // instead.
-    fiber.type = REACT_SUSPENSE_LIST_TYPE;
-  }
   fiber.elementType = REACT_SUSPENSE_LIST_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -736,12 +722,6 @@ export function createFiberFromOffscreen(
   key: null | string,
 ) {
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
-  // TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  if (__DEV__) {
-    fiber.type = REACT_OFFSCREEN_TYPE;
-  }
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden(
   key: null | string,
 ) {
   const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
-  // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  if (__DEV__) {
-    fiber.type = REACT_LEGACY_HIDDEN_TYPE;
-  }
   fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -772,12 +746,6 @@ export function createFiberFromCache(
   key: null | string,
 ) {
   const fiber = createFiber(CacheComponent, pendingProps, key, mode);
-  // TODO: The Cache fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  if (__DEV__) {
-    fiber.type = REACT_CACHE_TYPE;
-  }
   fiber.elementType = REACT_CACHE_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -795,9 +763,7 @@ export function createFiberFromText(
 
 export function createFiberFromHostInstanceForDeletion(): Fiber {
   const fiber = createFiber(HostComponent, null, null, NoMode);
-  // TODO: These should not need a type.
   fiber.elementType = 'DELETED';
-  fiber.type = 'DELETED';
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 6419fd6b261b..8536c024d66e 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -52,7 +52,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {
@@ -584,7 +584,7 @@ export function createFiberFromTypeAndProps(
               "it's defined in, or you might have mixed up default and " +
               'named imports.';
           }
-          const ownerName = owner ? getComponentName(owner.type) : null;
+          const ownerName = owner ? getComponentNameFromFiber(owner) : null;
           if (ownerName) {
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
@@ -678,9 +678,7 @@ function createFiberFromProfiler(
   }
 
   const fiber = createFiber(Profiler, pendingProps, key, mode | ProfileMode);
-  // TODO: The Profiler fiber shouldn't have a type. It has a tag.
   fiber.elementType = REACT_PROFILER_TYPE;
-  fiber.type = REACT_PROFILER_TYPE;
   fiber.lanes = lanes;
 
   if (enableProfilerTimer) {
@@ -700,13 +698,7 @@ export function createFiberFromSuspense(
   key: null | string,
 ) {
   const fiber = createFiber(SuspenseComponent, pendingProps, key, mode);
-
-  // TODO: The SuspenseComponent fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  fiber.type = REACT_SUSPENSE_TYPE;
   fiber.elementType = REACT_SUSPENSE_TYPE;
-
   fiber.lanes = lanes;
   return fiber;
 }
@@ -718,12 +710,6 @@ export function createFiberFromSuspenseList(
   key: null | string,
 ) {
   const fiber = createFiber(SuspenseListComponent, pendingProps, key, mode);
-  if (__DEV__) {
-    // TODO: The SuspenseListComponent fiber shouldn't have a type. It has a tag.
-    // This needs to be fixed in getComponentName so that it relies on the tag
-    // instead.
-    fiber.type = REACT_SUSPENSE_LIST_TYPE;
-  }
   fiber.elementType = REACT_SUSPENSE_LIST_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -736,12 +722,6 @@ export function createFiberFromOffscreen(
   key: null | string,
 ) {
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
-  // TODO: The OffscreenComponent fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  if (__DEV__) {
-    fiber.type = REACT_OFFSCREEN_TYPE;
-  }
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -754,12 +734,6 @@ export function createFiberFromLegacyHidden(
   key: null | string,
 ) {
   const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
-  // TODO: The LegacyHidden fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  if (__DEV__) {
-    fiber.type = REACT_LEGACY_HIDDEN_TYPE;
-  }
   fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -772,12 +746,6 @@ export function createFiberFromCache(
   key: null | string,
 ) {
   const fiber = createFiber(CacheComponent, pendingProps, key, mode);
-  // TODO: The Cache fiber shouldn't have a type. It has a tag.
-  // This needs to be fixed in getComponentName so that it relies on the tag
-  // instead.
-  if (__DEV__) {
-    fiber.type = REACT_CACHE_TYPE;
-  }
   fiber.elementType = REACT_CACHE_TYPE;
   fiber.lanes = lanes;
   return fiber;
@@ -795,9 +763,7 @@ export function createFiberFromText(
 
 export function createFiberFromHostInstanceForDeletion(): Fiber {
   const fiber = createFiber(HostComponent, null, null, NoMode);
-  // TODO: These should not need a type.
   fiber.elementType = 'DELETED';
-  fiber.type = 'DELETED';
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6dffcc328927..69149016f5ec 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -84,7 +84,8 @@ import {
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
 import {
@@ -332,7 +333,7 @@ function updateForwardRef(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(Component),
+          getComponentNameFromType(Component),
         );
       }
     }
@@ -442,7 +443,7 @@ function updateMemoComponent(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(type),
+          getComponentNameFromType(type),
         );
       }
     }
@@ -469,7 +470,7 @@ function updateMemoComponent(
         innerPropTypes,
         nextProps, // Resolved props
         'prop',
-        getComponentName(type),
+        getComponentNameFromType(type),
       );
     }
   }
@@ -530,7 +531,7 @@ function updateSimpleMemoComponent(
             outerPropTypes,
             nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
             'prop',
-            getComponentName(outerMemoType),
+            getComponentNameFromType(outerMemoType),
           );
         }
       }
@@ -862,7 +863,7 @@ function updateFunctionComponent(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(Component),
+          getComponentNameFromType(Component),
         );
       }
     }
@@ -945,7 +946,7 @@ function updateClassComponent(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(Component),
+          getComponentNameFromType(Component),
         );
       }
     }
@@ -1012,7 +1013,7 @@ function updateClassComponent(
         console.error(
           'It looks like %s is reassigning its own `this.props` while rendering. ' +
             'This is not supported and can lead to confusing bugs.',
-          getComponentName(workInProgress.type) || 'a component',
+          getComponentNameFromFiber(workInProgress) || 'a component',
         );
       }
       didWarnAboutReassigningProps = true;
@@ -1343,7 +1344,7 @@ function mountLazyComponent(
               outerPropTypes,
               resolvedProps, // Resolved for outer only
               'prop',
-              getComponentName(Component),
+              getComponentNameFromType(Component),
             );
           }
         }
@@ -1465,7 +1466,7 @@ function mountIndeterminateComponent(
       Component.prototype &&
       typeof Component.prototype.render === 'function'
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutBadClass[componentName]) {
         console.error(
@@ -1515,7 +1516,7 @@ function mountIndeterminateComponent(
       typeof value.render === 'function' &&
       value.$$typeof === undefined
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
       if (!didWarnAboutModulePatternComponent[componentName]) {
         console.error(
           'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1542,7 +1543,7 @@ function mountIndeterminateComponent(
     value.$$typeof === undefined
   ) {
     if (__DEV__) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
       if (!didWarnAboutModulePatternComponent[componentName]) {
         console.error(
           'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1609,7 +1610,7 @@ function mountIndeterminateComponent(
         console.error(
           '%s uses the legacy contextTypes API which is no longer supported. ' +
             'Use React.createContext() with React.useContext() instead.',
-          getComponentName(Component) || 'Unknown',
+          getComponentNameFromType(Component) || 'Unknown',
         );
       }
 
@@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
       warnAboutDefaultPropsOnFunctionComponents &&
       Component.defaultProps !== undefined
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
         console.error(
@@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
     }
 
     if (typeof Component.getDerivedStateFromProps === 'function') {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
         console.error(
@@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
       typeof Component.contextType === 'object' &&
       Component.contextType !== null
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
         console.error(
@@ -3514,7 +3515,7 @@ function beginWork(
               outerPropTypes,
               resolvedProps, // Resolved for outer only
               'prop',
-              getComponentName(type),
+              getComponentNameFromType(type),
             );
           }
         }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 7801afe9fa23..b8bacadcfe03 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -84,7 +84,8 @@ import {
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {REACT_LAZY_TYPE, getIteratorFn} from 'shared/ReactSymbols';
 import {
@@ -332,7 +333,7 @@ function updateForwardRef(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(Component),
+          getComponentNameFromType(Component),
         );
       }
     }
@@ -442,7 +443,7 @@ function updateMemoComponent(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(type),
+          getComponentNameFromType(type),
         );
       }
     }
@@ -469,7 +470,7 @@ function updateMemoComponent(
         innerPropTypes,
         nextProps, // Resolved props
         'prop',
-        getComponentName(type),
+        getComponentNameFromType(type),
       );
     }
   }
@@ -530,7 +531,7 @@ function updateSimpleMemoComponent(
             outerPropTypes,
             nextProps, // Resolved (SimpleMemoComponent has no defaultProps)
             'prop',
-            getComponentName(outerMemoType),
+            getComponentNameFromType(outerMemoType),
           );
         }
       }
@@ -862,7 +863,7 @@ function updateFunctionComponent(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(Component),
+          getComponentNameFromType(Component),
         );
       }
     }
@@ -945,7 +946,7 @@ function updateClassComponent(
           innerPropTypes,
           nextProps, // Resolved props
           'prop',
-          getComponentName(Component),
+          getComponentNameFromType(Component),
         );
       }
     }
@@ -1012,7 +1013,7 @@ function updateClassComponent(
         console.error(
           'It looks like %s is reassigning its own `this.props` while rendering. ' +
             'This is not supported and can lead to confusing bugs.',
-          getComponentName(workInProgress.type) || 'a component',
+          getComponentNameFromFiber(workInProgress) || 'a component',
         );
       }
       didWarnAboutReassigningProps = true;
@@ -1343,7 +1344,7 @@ function mountLazyComponent(
               outerPropTypes,
               resolvedProps, // Resolved for outer only
               'prop',
-              getComponentName(Component),
+              getComponentNameFromType(Component),
             );
           }
         }
@@ -1465,7 +1466,7 @@ function mountIndeterminateComponent(
       Component.prototype &&
       typeof Component.prototype.render === 'function'
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutBadClass[componentName]) {
         console.error(
@@ -1515,7 +1516,7 @@ function mountIndeterminateComponent(
       typeof value.render === 'function' &&
       value.$$typeof === undefined
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
       if (!didWarnAboutModulePatternComponent[componentName]) {
         console.error(
           'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1542,7 +1543,7 @@ function mountIndeterminateComponent(
     value.$$typeof === undefined
   ) {
     if (__DEV__) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
       if (!didWarnAboutModulePatternComponent[componentName]) {
         console.error(
           'The <%s /> component appears to be a function component that returns a class instance. ' +
@@ -1609,7 +1610,7 @@ function mountIndeterminateComponent(
         console.error(
           '%s uses the legacy contextTypes API which is no longer supported. ' +
             'Use React.createContext() with React.useContext() instead.',
-          getComponentName(Component) || 'Unknown',
+          getComponentNameFromType(Component) || 'Unknown',
         );
       }
 
@@ -1677,7 +1678,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
       warnAboutDefaultPropsOnFunctionComponents &&
       Component.defaultProps !== undefined
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
         console.error(
@@ -1690,7 +1691,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
     }
 
     if (typeof Component.getDerivedStateFromProps === 'function') {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutGetDerivedStateOnFunctionComponent[componentName]) {
         console.error(
@@ -1705,7 +1706,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
       typeof Component.contextType === 'object' &&
       Component.contextType !== null
     ) {
-      const componentName = getComponentName(Component) || 'Unknown';
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
 
       if (!didWarnAboutContextTypeOnFunctionComponent[componentName]) {
         console.error(
@@ -3514,7 +3515,7 @@ function beginWork(
               outerPropTypes,
               resolvedProps, // Resolved for outer only
               'prop',
-              getComponentName(type),
+              getComponentNameFromType(type),
             );
           }
         }
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 8259e59a70bd..0042bf2f9374 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -25,7 +25,8 @@ import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
 import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import shallowEqual from 'shared/shallowEqual';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
@@ -119,7 +120,7 @@ if (__DEV__) {
 
   warnOnUndefinedDerivedState = function(type, partialState) {
     if (partialState === undefined) {
-      const componentName = getComponentName(type) || 'Component';
+      const componentName = getComponentNameFromType(type) || 'Component';
       if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
         didWarnAboutUndefinedDerivedState.add(componentName);
         console.error(
@@ -222,7 +223,7 @@ const classComponentUpdater = {
     if (__DEV__) {
       if (enableDebugTracing) {
         if (fiber.mode & DebugTracingMode) {
-          const name = getComponentName(fiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(fiber) || 'Unknown';
           logStateUpdateScheduled(name, lane, payload);
         }
       }
@@ -257,7 +258,7 @@ const classComponentUpdater = {
     if (__DEV__) {
       if (enableDebugTracing) {
         if (fiber.mode & DebugTracingMode) {
-          const name = getComponentName(fiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(fiber) || 'Unknown';
           logStateUpdateScheduled(name, lane, payload);
         }
       }
@@ -291,7 +292,7 @@ const classComponentUpdater = {
     if (__DEV__) {
       if (enableDebugTracing) {
         if (fiber.mode & DebugTracingMode) {
-          const name = getComponentName(fiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(fiber) || 'Unknown';
           logForceUpdateScheduled(name, lane);
         }
       }
@@ -339,7 +340,7 @@ function checkShouldComponentUpdate(
         console.error(
           '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
             'boolean value. Make sure to return true or false.',
-          getComponentName(ctor) || 'Component',
+          getComponentNameFromType(ctor) || 'Component',
         );
       }
     }
@@ -359,7 +360,7 @@ function checkShouldComponentUpdate(
 function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
   const instance = workInProgress.stateNode;
   if (__DEV__) {
-    const name = getComponentName(ctor) || 'Component';
+    const name = getComponentNameFromType(ctor) || 'Component';
     const renderPresent = instance.render;
 
     if (!renderPresent) {
@@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
         '%s has a method called shouldComponentUpdate(). ' +
           'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
           'Please extend React.Component if shouldComponentUpdate is used.',
-        getComponentName(ctor) || 'A pure component',
+        getComponentNameFromType(ctor) || 'A pure component',
       );
     }
     if (typeof instance.componentDidUnmount === 'function') {
@@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
       console.error(
         '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
           'This component defines getSnapshotBeforeUpdate() only.',
-        getComponentName(ctor),
+        getComponentNameFromType(ctor),
       );
     }
 
@@ -631,7 +632,7 @@ function constructClassInstance(
         console.error(
           '%s defines an invalid contextType. ' +
             'contextType should point to the Context object returned by React.createContext().%s',
-          getComponentName(ctor) || 'Component',
+          getComponentNameFromType(ctor) || 'Component',
           addendum,
         );
       }
@@ -674,7 +675,7 @@ function constructClassInstance(
 
   if (__DEV__) {
     if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
-      const componentName = getComponentName(ctor) || 'Component';
+      const componentName = getComponentNameFromType(ctor) || 'Component';
       if (!didWarnAboutUninitializedState.has(componentName)) {
         didWarnAboutUninitializedState.add(componentName);
         console.error(
@@ -730,7 +731,7 @@ function constructClassInstance(
         foundWillReceivePropsName !== null ||
         foundWillUpdateName !== null
       ) {
-        const componentName = getComponentName(ctor) || 'Component';
+        const componentName = getComponentNameFromType(ctor) || 'Component';
         const newApiName =
           typeof ctor.getDerivedStateFromProps === 'function'
             ? 'getDerivedStateFromProps()'
@@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) {
         '%s.componentWillMount(): Assigning directly to this.state is ' +
           "deprecated (except inside a component's " +
           'constructor). Use setState instead.',
-        getComponentName(workInProgress.type) || 'Component',
+        getComponentNameFromFiber(workInProgress) || 'Component',
       );
     }
     classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
@@ -804,7 +805,7 @@ function callComponentWillReceiveProps(
   if (instance.state !== oldState) {
     if (__DEV__) {
       const componentName =
-        getComponentName(workInProgress.type) || 'Component';
+        getComponentNameFromFiber(workInProgress) || 'Component';
       if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
         didWarnAboutStateAssignmentForComponent.add(componentName);
         console.error(
@@ -849,7 +850,7 @@ function mountClassInstance(
 
   if (__DEV__) {
     if (instance.state === newProps) {
-      const componentName = getComponentName(ctor) || 'Component';
+      const componentName = getComponentNameFromType(ctor) || 'Component';
       if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
         didWarnAboutDirectlyAssigningPropsToState.add(componentName);
         console.error(
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index fe20322bb15a..984960438672 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -25,7 +25,8 @@ import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
 import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import shallowEqual from 'shared/shallowEqual';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
@@ -119,7 +120,7 @@ if (__DEV__) {
 
   warnOnUndefinedDerivedState = function(type, partialState) {
     if (partialState === undefined) {
-      const componentName = getComponentName(type) || 'Component';
+      const componentName = getComponentNameFromType(type) || 'Component';
       if (!didWarnAboutUndefinedDerivedState.has(componentName)) {
         didWarnAboutUndefinedDerivedState.add(componentName);
         console.error(
@@ -222,7 +223,7 @@ const classComponentUpdater = {
     if (__DEV__) {
       if (enableDebugTracing) {
         if (fiber.mode & DebugTracingMode) {
-          const name = getComponentName(fiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(fiber) || 'Unknown';
           logStateUpdateScheduled(name, lane, payload);
         }
       }
@@ -257,7 +258,7 @@ const classComponentUpdater = {
     if (__DEV__) {
       if (enableDebugTracing) {
         if (fiber.mode & DebugTracingMode) {
-          const name = getComponentName(fiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(fiber) || 'Unknown';
           logStateUpdateScheduled(name, lane, payload);
         }
       }
@@ -291,7 +292,7 @@ const classComponentUpdater = {
     if (__DEV__) {
       if (enableDebugTracing) {
         if (fiber.mode & DebugTracingMode) {
-          const name = getComponentName(fiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(fiber) || 'Unknown';
           logForceUpdateScheduled(name, lane);
         }
       }
@@ -339,7 +340,7 @@ function checkShouldComponentUpdate(
         console.error(
           '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
             'boolean value. Make sure to return true or false.',
-          getComponentName(ctor) || 'Component',
+          getComponentNameFromType(ctor) || 'Component',
         );
       }
     }
@@ -359,7 +360,7 @@ function checkShouldComponentUpdate(
 function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
   const instance = workInProgress.stateNode;
   if (__DEV__) {
-    const name = getComponentName(ctor) || 'Component';
+    const name = getComponentNameFromType(ctor) || 'Component';
     const renderPresent = instance.render;
 
     if (!renderPresent) {
@@ -472,7 +473,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
         '%s has a method called shouldComponentUpdate(). ' +
           'shouldComponentUpdate should not be used when extending React.PureComponent. ' +
           'Please extend React.Component if shouldComponentUpdate is used.',
-        getComponentName(ctor) || 'A pure component',
+        getComponentNameFromType(ctor) || 'A pure component',
       );
     }
     if (typeof instance.componentDidUnmount === 'function') {
@@ -534,7 +535,7 @@ function checkClassInstance(workInProgress: Fiber, ctor: any, newProps: any) {
       console.error(
         '%s: getSnapshotBeforeUpdate() should be used with componentDidUpdate(). ' +
           'This component defines getSnapshotBeforeUpdate() only.',
-        getComponentName(ctor),
+        getComponentNameFromType(ctor),
       );
     }
 
@@ -631,7 +632,7 @@ function constructClassInstance(
         console.error(
           '%s defines an invalid contextType. ' +
             'contextType should point to the Context object returned by React.createContext().%s',
-          getComponentName(ctor) || 'Component',
+          getComponentNameFromType(ctor) || 'Component',
           addendum,
         );
       }
@@ -674,7 +675,7 @@ function constructClassInstance(
 
   if (__DEV__) {
     if (typeof ctor.getDerivedStateFromProps === 'function' && state === null) {
-      const componentName = getComponentName(ctor) || 'Component';
+      const componentName = getComponentNameFromType(ctor) || 'Component';
       if (!didWarnAboutUninitializedState.has(componentName)) {
         didWarnAboutUninitializedState.add(componentName);
         console.error(
@@ -730,7 +731,7 @@ function constructClassInstance(
         foundWillReceivePropsName !== null ||
         foundWillUpdateName !== null
       ) {
-        const componentName = getComponentName(ctor) || 'Component';
+        const componentName = getComponentNameFromType(ctor) || 'Component';
         const newApiName =
           typeof ctor.getDerivedStateFromProps === 'function'
             ? 'getDerivedStateFromProps()'
@@ -780,7 +781,7 @@ function callComponentWillMount(workInProgress, instance) {
         '%s.componentWillMount(): Assigning directly to this.state is ' +
           "deprecated (except inside a component's " +
           'constructor). Use setState instead.',
-        getComponentName(workInProgress.type) || 'Component',
+        getComponentNameFromFiber(workInProgress) || 'Component',
       );
     }
     classComponentUpdater.enqueueReplaceState(instance, instance.state, null);
@@ -804,7 +805,7 @@ function callComponentWillReceiveProps(
   if (instance.state !== oldState) {
     if (__DEV__) {
       const componentName =
-        getComponentName(workInProgress.type) || 'Component';
+        getComponentNameFromFiber(workInProgress) || 'Component';
       if (!didWarnAboutStateAssignmentForComponent.has(componentName)) {
         didWarnAboutStateAssignmentForComponent.add(componentName);
         console.error(
@@ -849,7 +850,7 @@ function mountClassInstance(
 
   if (__DEV__) {
     if (instance.state === newProps) {
-      const componentName = getComponentName(ctor) || 'Component';
+      const componentName = getComponentNameFromType(ctor) || 'Component';
       if (!didWarnAboutDirectlyAssigningPropsToState.has(componentName)) {
         didWarnAboutDirectlyAssigningPropsToState.add(componentName);
         console.error(
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 33ed1b5c95ce..e8acf1f31d71 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -80,7 +80,7 @@ import {
   PassiveMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
@@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.props`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
               if (instance.state !== finishedWork.memoizedState) {
@@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.state`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
             }
@@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
               console.error(
                 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
                   'must be returned. You have returned undefined.',
-                getComponentName(finishedWork.type),
+                getComponentNameFromFiber(finishedWork),
               );
             }
           }
@@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.props`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
                 if (instance.state !== finishedWork.memoizedState) {
@@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.state`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
               }
@@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.props`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
                 if (instance.state !== finishedWork.memoizedState) {
@@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.state`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
               }
@@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber(
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.props`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
               if (instance.state !== finishedWork.memoizedState) {
@@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber(
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.state`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
             }
@@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) {
           console.error(
             'Unexpected ref object provided for %s. ' +
               'Use either a ref-setter function or React.createRef().',
-            getComponentName(finishedWork.type),
+            getComponentNameFromFiber(finishedWork),
           );
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7574eb4fd3d3..7759080a0978 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -80,7 +80,7 @@ import {
   PassiveMask,
   PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
@@ -393,7 +393,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.props`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
               if (instance.state !== finishedWork.memoizedState) {
@@ -403,7 +403,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.state`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
             }
@@ -421,7 +421,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
               console.error(
                 '%s.getSnapshotBeforeUpdate(): A snapshot value (or null) ' +
                   'must be returned. You have returned undefined.',
-                getComponentName(finishedWork.type),
+                getComponentNameFromFiber(finishedWork),
               );
             }
           }
@@ -647,7 +647,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.props`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
                 if (instance.state !== finishedWork.memoizedState) {
@@ -657,7 +657,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.state`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
               }
@@ -697,7 +697,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.props`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
                 if (instance.state !== finishedWork.memoizedState) {
@@ -707,7 +707,7 @@ function commitLayoutEffectOnFiber(
                       'This might either be because of a bug in React, or because ' +
                       'a component reassigns its own `this.state`. ' +
                       'Please file an issue.',
-                    getComponentName(finishedWork.type) || 'instance',
+                    getComponentNameFromFiber(finishedWork) || 'instance',
                   );
                 }
               }
@@ -755,7 +755,7 @@ function commitLayoutEffectOnFiber(
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.props`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
               if (instance.state !== finishedWork.memoizedState) {
@@ -765,7 +765,7 @@ function commitLayoutEffectOnFiber(
                     'This might either be because of a bug in React, or because ' +
                     'a component reassigns its own `this.state`. ' +
                     'Please file an issue.',
-                  getComponentName(finishedWork.type) || 'instance',
+                  getComponentNameFromFiber(finishedWork) || 'instance',
                 );
               }
             }
@@ -1016,7 +1016,7 @@ function commitAttachRef(finishedWork: Fiber) {
           console.error(
             'Unexpected ref object provided for %s. ' +
               'Use either a ref-setter function or React.createRef().',
-            getComponentName(finishedWork.type),
+            getComponentNameFromFiber(finishedWork),
           );
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberContext.new.js b/packages/react-reconciler/src/ReactFiberContext.new.js
index e96295be857a..a7735f7b56e1 100644
--- a/packages/react-reconciler/src/ReactFiberContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberContext.new.js
@@ -13,7 +13,7 @@ import type {StackCursor} from './ReactFiberStack.new';
 import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
@@ -104,7 +104,7 @@ function getMaskedContext(
     }
 
     if (__DEV__) {
-      const name = getComponentName(type) || 'Unknown';
+      const name = getComponentNameFromFiber(workInProgress) || 'Unknown';
       checkPropTypes(contextTypes, context, 'context', name);
     }
 
@@ -187,7 +187,7 @@ function processChildContext(
     // It has only been added in Fiber to match the (unintentional) behavior in Stack.
     if (typeof instance.getChildContext !== 'function') {
       if (__DEV__) {
-        const componentName = getComponentName(type) || 'Unknown';
+        const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 
         if (!warnedAboutMissingGetChildContext[componentName]) {
           warnedAboutMissingGetChildContext[componentName] = true;
@@ -208,12 +208,12 @@ function processChildContext(
       invariant(
         contextKey in childContextTypes,
         '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentName(type) || 'Unknown',
+        getComponentNameFromFiber(fiber) || 'Unknown',
         contextKey,
       );
     }
     if (__DEV__) {
-      const name = getComponentName(type) || 'Unknown';
+      const name = getComponentNameFromFiber(fiber) || 'Unknown';
       checkPropTypes(childContextTypes, childContext, 'child context', name);
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberContext.old.js b/packages/react-reconciler/src/ReactFiberContext.old.js
index 9207fcb55e8d..c4736bcbd310 100644
--- a/packages/react-reconciler/src/ReactFiberContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberContext.old.js
@@ -13,7 +13,7 @@ import type {StackCursor} from './ReactFiberStack.old';
 import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
@@ -104,7 +104,7 @@ function getMaskedContext(
     }
 
     if (__DEV__) {
-      const name = getComponentName(type) || 'Unknown';
+      const name = getComponentNameFromFiber(workInProgress) || 'Unknown';
       checkPropTypes(contextTypes, context, 'context', name);
     }
 
@@ -187,7 +187,7 @@ function processChildContext(
     // It has only been added in Fiber to match the (unintentional) behavior in Stack.
     if (typeof instance.getChildContext !== 'function') {
       if (__DEV__) {
-        const componentName = getComponentName(type) || 'Unknown';
+        const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
 
         if (!warnedAboutMissingGetChildContext[componentName]) {
           warnedAboutMissingGetChildContext[componentName] = true;
@@ -208,12 +208,12 @@ function processChildContext(
       invariant(
         contextKey in childContextTypes,
         '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentName(type) || 'Unknown',
+        getComponentNameFromFiber(fiber) || 'Unknown',
         contextKey,
       );
     }
     if (__DEV__) {
-      const name = getComponentName(type) || 'Unknown';
+      const name = getComponentNameFromFiber(fiber) || 'Unknown';
       checkPropTypes(childContextTypes, childContext, 'child context', name);
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberErrorLogger.js b/packages/react-reconciler/src/ReactFiberErrorLogger.js
index a76c65e4d3b4..81688a4d2324 100644
--- a/packages/react-reconciler/src/ReactFiberErrorLogger.js
+++ b/packages/react-reconciler/src/ReactFiberErrorLogger.js
@@ -12,7 +12,8 @@ import type {CapturedValue} from './ReactCapturedValue';
 
 import {showErrorDialog} from './ReactFiberErrorDialog';
 import {ClassComponent} from './ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {HostRoot} from 'react-reconciler/src/ReactWorkTags';
 
 export function logCapturedError(
   boundary: Fiber,
@@ -51,21 +52,22 @@ export function logCapturedError(
         // https://github.com/facebook/react/pull/13384
       }
 
-      const componentName = source ? getComponentName(source.type) : null;
+      const componentName = source ? getComponentNameFromFiber(source) : null;
       const componentNameMessage = componentName
         ? `The above error occurred in the <${componentName}> component:`
         : 'The above error occurred in one of your React components:';
 
       let errorBoundaryMessage;
-      const errorBoundaryName = getComponentName(boundary.type);
-      if (errorBoundaryName) {
-        errorBoundaryMessage =
-          `React will try to recreate this component tree from scratch ` +
-          `using the error boundary you provided, ${errorBoundaryName}.`;
-      } else {
+      if (boundary.tag === HostRoot) {
         errorBoundaryMessage =
           '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.';
+      } else {
+        const errorBoundaryName =
+          getComponentNameFromFiber(boundary) || 'Anonymous';
+        errorBoundaryMessage =
+          `React will try to recreate this component tree from scratch ` +
+          `using the error boundary you provided, ${errorBoundaryName}.`;
       }
       const combinedMessage =
         `${componentNameMessage}\n${componentStack}\n\n` +
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 9d1fa5f82ed8..bfea1ddda134 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -81,7 +81,7 @@ import {
 } from './ReactFiberWorkLoop.new';
 
 import invariant from 'shared/invariant';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
 import {
@@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) {
 
 function warnOnHookMismatchInDev(currentHookName: HookType) {
   if (__DEV__) {
-    const componentName = getComponentName(currentlyRenderingFiber.type);
+    const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
     if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
       didWarnAboutMismatchedHooksForComponent.add(componentName);
 
@@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
         // begin phase without double rendering. We should consider suppressing
         // any error from a double render (with a warning) to more closely match
         // the production behavior.
-        const componentName = getComponentName(currentlyRenderingFiber.type);
+        const componentName = getComponentNameFromFiber(
+          currentlyRenderingFiber,
+        );
         invariant(
           false,
           'A mutable source was mutated while the %s component was rendering. ' +
@@ -1326,7 +1328,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
                   'Reading from a ref during render is only safe if:\n' +
                   '1. The ref value has not been updated, or\n' +
                   '2. The ref holds a lazily-initialized value that is only set once.\n',
-                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+                getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
               );
             }
           }
@@ -1343,7 +1345,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
                 '%s: Unsafe write of a mutable value during render.\n\n' +
                   'Writing to a ref during render is only safe if the ref holds ' +
                   'a lazily-initialized value that is only set once.\n',
-                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+                getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
               );
             }
           }
@@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
 function warnOnOpaqueIdentifierAccessInDEV(fiber) {
   if (__DEV__) {
     // TODO: Should warn in effects and callbacks, too
-    const name = getComponentName(fiber.type) || 'Unknown';
+    const name = getComponentNameFromFiber(fiber) || 'Unknown';
     if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
       console.error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
@@ -2059,7 +2061,7 @@ function dispatchAction<S, A>(
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {
-        const name = getComponentName(fiber.type) || 'Unknown';
+        const name = getComponentNameFromFiber(fiber) || 'Unknown';
         logStateUpdateScheduled(name, lane, action);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 61f1a17452e4..fea9afd815fc 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -81,7 +81,7 @@ import {
 } from './ReactFiberWorkLoop.old';
 
 import invariant from 'shared/invariant';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
 import {
@@ -244,7 +244,7 @@ function checkDepsAreArrayDev(deps: mixed) {
 
 function warnOnHookMismatchInDev(currentHookName: HookType) {
   if (__DEV__) {
-    const componentName = getComponentName(currentlyRenderingFiber.type);
+    const componentName = getComponentNameFromFiber(currentlyRenderingFiber);
     if (!didWarnAboutMismatchedHooksForComponent.has(componentName)) {
       didWarnAboutMismatchedHooksForComponent.add(componentName);
 
@@ -1006,7 +1006,9 @@ function readFromUnsubcribedMutableSource<Source, Snapshot>(
         // begin phase without double rendering. We should consider suppressing
         // any error from a double render (with a warning) to more closely match
         // the production behavior.
-        const componentName = getComponentName(currentlyRenderingFiber.type);
+        const componentName = getComponentNameFromFiber(
+          currentlyRenderingFiber,
+        );
         invariant(
           false,
           'A mutable source was mutated while the %s component was rendering. ' +
@@ -1326,7 +1328,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
                   'Reading from a ref during render is only safe if:\n' +
                   '1. The ref value has not been updated, or\n' +
                   '2. The ref holds a lazily-initialized value that is only set once.\n',
-                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+                getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
               );
             }
           }
@@ -1343,7 +1345,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
                 '%s: Unsafe write of a mutable value during render.\n\n' +
                   'Writing to a ref during render is only safe if the ref holds ' +
                   'a lazily-initialized value that is only set once.\n',
-                getComponentName(currentlyRenderingFiber.type) || 'Unknown',
+                getComponentNameFromFiber(currentlyRenderingFiber) || 'Unknown',
               );
             }
           }
@@ -1781,7 +1783,7 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
 function warnOnOpaqueIdentifierAccessInDEV(fiber) {
   if (__DEV__) {
     // TODO: Should warn in effects and callbacks, too
-    const name = getComponentName(fiber.type) || 'Unknown';
+    const name = getComponentNameFromFiber(fiber) || 'Unknown';
     if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
       console.error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
@@ -2059,7 +2061,7 @@ function dispatchAction<S, A>(
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {
-        const name = getComponentName(fiber.type) || 'Unknown';
+        const name = getComponentNameFromFiber(fiber) || 'Unknown';
         logStateUpdateScheduled(name, lane, action);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 2c5c183163c5..063b70926b19 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -32,7 +32,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -205,7 +205,7 @@ function findHostInstanceWithWarning(
       return null;
     }
     if (hostFiber.mode & StrictLegacyMode) {
-      const componentName = getComponentName(fiber.type) || 'Component';
+      const componentName = getComponentNameFromFiber(fiber) || 'Component';
       if (!didWarnAboutFindNodeInStrictMode[componentName]) {
         didWarnAboutFindNodeInStrictMode[componentName] = true;
 
@@ -310,7 +310,7 @@ export function updateContainer(
           'triggering nested component updates from render is not allowed. ' +
           'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
           'Check the render method of %s.',
-        getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',
+        getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown',
       );
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 430db15494e0..8aac687d3e38 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -32,7 +32,7 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -205,7 +205,7 @@ function findHostInstanceWithWarning(
       return null;
     }
     if (hostFiber.mode & StrictLegacyMode) {
-      const componentName = getComponentName(fiber.type) || 'Component';
+      const componentName = getComponentNameFromFiber(fiber) || 'Component';
       if (!didWarnAboutFindNodeInStrictMode[componentName]) {
         didWarnAboutFindNodeInStrictMode[componentName] = true;
 
@@ -310,7 +310,7 @@ export function updateContainer(
           'triggering nested component updates from render is not allowed. ' +
           'If necessary, trigger nested updates in componentDidUpdate.\n\n' +
           'Check the render method of %s.',
-        getComponentName(ReactCurrentFiberCurrent.type) || 'Unknown',
+        getComponentNameFromFiber(ReactCurrentFiberCurrent) || 'Unknown',
       );
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index af199f0aa8e8..9ff0715f1621 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -15,7 +15,7 @@ import type {Update} from './ReactUpdateQueue.new';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {
   ClassComponent,
   HostRoot,
@@ -140,7 +140,7 @@ function createClassErrorUpdate(
             console.error(
               '%s: Error boundaries should implement getDerivedStateFromError(). ' +
                 'In that method, return a state update to display an error message or fallback UI.',
-              getComponentName(fiber.type) || 'Unknown',
+              getComponentNameFromFiber(fiber) || 'Unknown',
             );
           }
         }
@@ -200,7 +200,7 @@ function throwException(
     if (__DEV__) {
       if (enableDebugTracing) {
         if (sourceFiber.mode & DebugTracingMode) {
-          const name = getComponentName(sourceFiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';
           logComponentSuspended(name, wakeable);
         }
       }
@@ -361,7 +361,7 @@ function throwException(
     // No boundary was found. Fallthrough to error mode.
     // TODO: Use invariant so the message is stripped in prod?
     value = new Error(
-      (getComponentName(sourceFiber.type) || 'A React component') +
+      (getComponentNameFromFiber(sourceFiber) || 'A React component') +
         ' suspended while rendering, but no fallback UI was specified.\n' +
         '\n' +
         'Add a <Suspense fallback=...> component higher in the tree to ' +
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 6ae53d02fc5c..da0d90f057f6 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -15,7 +15,7 @@ import type {Update} from './ReactUpdateQueue.old';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {
   ClassComponent,
   HostRoot,
@@ -140,7 +140,7 @@ function createClassErrorUpdate(
             console.error(
               '%s: Error boundaries should implement getDerivedStateFromError(). ' +
                 'In that method, return a state update to display an error message or fallback UI.',
-              getComponentName(fiber.type) || 'Unknown',
+              getComponentNameFromFiber(fiber) || 'Unknown',
             );
           }
         }
@@ -200,7 +200,7 @@ function throwException(
     if (__DEV__) {
       if (enableDebugTracing) {
         if (sourceFiber.mode & DebugTracingMode) {
-          const name = getComponentName(sourceFiber.type) || 'Unknown';
+          const name = getComponentNameFromFiber(sourceFiber) || 'Unknown';
           logComponentSuspended(name, wakeable);
         }
       }
@@ -361,7 +361,7 @@ function throwException(
     // No boundary was found. Fallthrough to error mode.
     // TODO: Use invariant so the message is stripped in prod?
     value = new Error(
-      (getComponentName(sourceFiber.type) || 'A React component') +
+      (getComponentNameFromFiber(sourceFiber) || 'A React component') +
         ' suspended while rendering, but no fallback UI was specified.\n' +
         '\n' +
         'Add a <Suspense fallback=...> component higher in the tree to ' +
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index 06356aa709fd..510c58eaf2b3 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -15,7 +15,7 @@ import invariant from 'shared/invariant';
 
 import {get as getInstance} from 'shared/ReactInstanceMap';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {
   ClassComponent,
   HostComponent,
@@ -101,7 +101,7 @@ export function isMounted(component: React$Component<any, any>): boolean {
             'never access something that requires stale data from the previous ' +
             'render, such as refs. Move this logic to componentDidMount and ' +
             'componentDidUpdate instead.',
-          getComponentName(ownerFiber.type) || 'A component',
+          getComponentNameFromFiber(ownerFiber) || 'A component',
         );
       }
       instance._warnedAboutRefsInRender = true;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7caee0787251..03cb122aca47 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -221,7 +221,7 @@ import {
 } from './ReactProfilerTimer.new';
 
 // DEV stuff
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {
   isRendering as ReactCurrentDebugFiberIsRenderingInDEV,
@@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
 
     // 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 = getComponentName(fiber.type) || 'ReactComponent';
+    const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
     if (didWarnStateUpdateForNotYetMountedComponent !== null) {
       if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {
         return;
@@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
     }
     // 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 = getComponentName(fiber.type) || 'ReactComponent';
+    const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
     if (didWarnStateUpdateForUnmountedComponent !== null) {
       if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {
         return;
@@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
         case ForwardRef:
         case SimpleMemoComponent: {
           const renderingComponentName =
-            (workInProgress && getComponentName(workInProgress.type)) ||
+            (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 =
-              getComponentName(fiber.type) || 'Unknown';
+              getComponentNameFromFiber(fiber) || 'Unknown';
             console.error(
               'Cannot update a component (`%s`) while rendering a ' +
                 'different component (`%s`). To locate the bad setState() call inside `%s`, ' +
@@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
           "This ensures that you're testing the behavior the user would see " +
           'in the browser.' +
           ' Learn more at https://reactjs.org/link/wrap-tests-with-act',
-        getComponentName(fiber.type),
+        getComponentNameFromFiber(fiber),
       );
     }
   }
@@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
             "This ensures that you're testing the behavior the user would see " +
             'in the browser.' +
             ' Learn more at https://reactjs.org/link/wrap-tests-with-act',
-          getComponentName(fiber.type),
+          getComponentNameFromFiber(fiber),
         );
       } finally {
         if (previousFiber) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 1467929ce459..d3eeb26d11cb 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -221,7 +221,7 @@ import {
 } from './ReactProfilerTimer.old';
 
 // DEV stuff
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {
   isRendering as ReactCurrentDebugFiberIsRenderingInDEV,
@@ -2645,7 +2645,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
 
     // 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 = getComponentName(fiber.type) || 'ReactComponent';
+    const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
     if (didWarnStateUpdateForNotYetMountedComponent !== null) {
       if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) {
         return;
@@ -2711,7 +2711,7 @@ function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
     }
     // 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 = getComponentName(fiber.type) || 'ReactComponent';
+    const componentName = getComponentNameFromFiber(fiber) || 'ReactComponent';
     if (didWarnStateUpdateForUnmountedComponent !== null) {
       if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {
         return;
@@ -2853,14 +2853,14 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
         case ForwardRef:
         case SimpleMemoComponent: {
           const renderingComponentName =
-            (workInProgress && getComponentName(workInProgress.type)) ||
+            (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 =
-              getComponentName(fiber.type) || 'Unknown';
+              getComponentNameFromFiber(fiber) || 'Unknown';
             console.error(
               'Cannot update a component (`%s`) while rendering a ' +
                 'different component (`%s`). To locate the bad setState() call inside `%s`, ' +
@@ -2948,7 +2948,7 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
           "This ensures that you're testing the behavior the user would see " +
           'in the browser.' +
           ' Learn more at https://reactjs.org/link/wrap-tests-with-act',
-        getComponentName(fiber.type),
+        getComponentNameFromFiber(fiber),
       );
     }
   }
@@ -2976,7 +2976,7 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
             "This ensures that you're testing the behavior the user would see " +
             'in the browser.' +
             ' Learn more at https://reactjs.org/link/wrap-tests-with-act',
-          getComponentName(fiber.type),
+          getComponentNameFromFiber(fiber),
         );
       } finally {
         if (previousFiber) {
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js
index 972c106c632c..4de90a15869a 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js
@@ -13,7 +13,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {StrictLegacyMode} from './ReactTypeOfMode';
 
 type FiberArray = Array<Fiber>;
@@ -119,7 +119,7 @@ if (__DEV__) {
     if (pendingComponentWillMountWarnings.length > 0) {
       pendingComponentWillMountWarnings.forEach(fiber => {
         componentWillMountUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -130,7 +130,7 @@ if (__DEV__) {
     if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {
       pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {
         UNSAFE_componentWillMountUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -141,7 +141,7 @@ if (__DEV__) {
     if (pendingComponentWillReceivePropsWarnings.length > 0) {
       pendingComponentWillReceivePropsWarnings.forEach(fiber => {
         componentWillReceivePropsUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -153,7 +153,7 @@ if (__DEV__) {
     if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {
       pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {
         UNSAFE_componentWillReceivePropsUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -165,7 +165,7 @@ if (__DEV__) {
     if (pendingComponentWillUpdateWarnings.length > 0) {
       pendingComponentWillUpdateWarnings.forEach(fiber => {
         componentWillUpdateUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -177,7 +177,7 @@ if (__DEV__) {
     if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {
       pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {
         UNSAFE_componentWillUpdateUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -333,7 +333,7 @@ if (__DEV__) {
 
         const uniqueNames = new Set();
         fiberArray.forEach(fiber => {
-          uniqueNames.add(getComponentName(fiber.type) || 'Component');
+          uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');
           didWarnAboutLegacyContext.add(fiber.type);
         });
 
diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
index 972c106c632c..4de90a15869a 100644
--- a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
+++ b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js
@@ -13,7 +13,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {StrictLegacyMode} from './ReactTypeOfMode';
 
 type FiberArray = Array<Fiber>;
@@ -119,7 +119,7 @@ if (__DEV__) {
     if (pendingComponentWillMountWarnings.length > 0) {
       pendingComponentWillMountWarnings.forEach(fiber => {
         componentWillMountUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -130,7 +130,7 @@ if (__DEV__) {
     if (pendingUNSAFE_ComponentWillMountWarnings.length > 0) {
       pendingUNSAFE_ComponentWillMountWarnings.forEach(fiber => {
         UNSAFE_componentWillMountUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -141,7 +141,7 @@ if (__DEV__) {
     if (pendingComponentWillReceivePropsWarnings.length > 0) {
       pendingComponentWillReceivePropsWarnings.forEach(fiber => {
         componentWillReceivePropsUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -153,7 +153,7 @@ if (__DEV__) {
     if (pendingUNSAFE_ComponentWillReceivePropsWarnings.length > 0) {
       pendingUNSAFE_ComponentWillReceivePropsWarnings.forEach(fiber => {
         UNSAFE_componentWillReceivePropsUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -165,7 +165,7 @@ if (__DEV__) {
     if (pendingComponentWillUpdateWarnings.length > 0) {
       pendingComponentWillUpdateWarnings.forEach(fiber => {
         componentWillUpdateUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -177,7 +177,7 @@ if (__DEV__) {
     if (pendingUNSAFE_ComponentWillUpdateWarnings.length > 0) {
       pendingUNSAFE_ComponentWillUpdateWarnings.forEach(fiber => {
         UNSAFE_componentWillUpdateUniqueNames.add(
-          getComponentName(fiber.type) || 'Component',
+          getComponentNameFromFiber(fiber) || 'Component',
         );
         didWarnAboutUnsafeLifecycles.add(fiber.type);
       });
@@ -333,7 +333,7 @@ if (__DEV__) {
 
         const uniqueNames = new Set();
         fiberArray.forEach(fiber => {
-          uniqueNames.add(getComponentName(fiber.type) || 'Component');
+          uniqueNames.add(getComponentNameFromFiber(fiber) || 'Component');
           didWarnAboutLegacyContext.add(fiber.type);
         });
 
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index ebe50a94ed3f..58e888c16858 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -12,7 +12,7 @@ import type {Instance} from './ReactFiberHostConfig';
 
 import invariant from 'shared/invariant';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {
   findFiberRoot,
   getBoundingRect,
@@ -189,7 +189,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
 function selectorToString(selector: Selector): string | null {
   switch (selector.$$typeof) {
     case COMPONENT_TYPE:
-      const displayName = getComponentName(selector.value) || 'Unknown';
+      const displayName = getComponentNameFromType(selector.value) || 'Unknown';
       return `<${displayName}>`;
     case HAS_PSEUDO_CLASS_TYPE:
       return `:has(${selectorToString(selector) || ''})`;
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index ccc41f985487..67baa02ea2e4 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -16,7 +16,7 @@ import {
   enableSchedulingProfiler,
 } from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
 import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler/src/ReactFiberLane.old';
 import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler/src/ReactFiberLane.new';
@@ -113,7 +113,7 @@ export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const id = getWakeableID(wakeable);
-      const componentName = getComponentName(fiber.type) || 'Unknown';
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
       // TODO Add component stack id
       markAndClear(`--suspense-suspend-${id}-${componentName}`);
       wakeable.then(
@@ -191,7 +191,7 @@ export function markRenderScheduled(lane: Lane): void {
 export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
-      const componentName = getComponentName(fiber.type) || 'Unknown';
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
       // TODO Add component stack id
       markAndClear(
         `--schedule-forced-update-${formatLanes(lane)}-${componentName}`,
@@ -203,7 +203,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
 export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
-      const componentName = getComponentName(fiber.type) || 'Unknown';
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
       // TODO Add component stack id
       markAndClear(
         `--schedule-state-update-${formatLanes(lane)}-${componentName}`,
diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js
new file mode 100644
index 000000000000..4ae33c2ed594
--- /dev/null
+++ b/packages/react-reconciler/src/getComponentNameFromFiber.js
@@ -0,0 +1,124 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+
+import {
+  FunctionComponent,
+  ClassComponent,
+  IndeterminateComponent,
+  HostRoot,
+  HostPortal,
+  HostComponent,
+  HostText,
+  Fragment,
+  Mode,
+  ContextConsumer,
+  ContextProvider,
+  ForwardRef,
+  Profiler,
+  SuspenseComponent,
+  MemoComponent,
+  SimpleMemoComponent,
+  LazyComponent,
+  IncompleteClassComponent,
+  DehydratedFragment,
+  SuspenseListComponent,
+  ScopeComponent,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+  CacheComponent,
+} from 'react-reconciler/src/ReactWorkTags';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
+
+// 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 default function getComponentNameFromFiber(fiber: Fiber): string | null {
+  const {tag, type} = fiber;
+  switch (tag) {
+    case CacheComponent:
+      return 'Cache';
+    case ContextConsumer:
+      const context: ReactContext<any> = (type: any);
+      return getContextName(context) + '.Consumer';
+    case ContextProvider:
+      const provider: ReactProviderType<any> = (type: any);
+      return getContextName(provider._context) + '.Provider';
+    case DehydratedFragment:
+      return 'DehydratedFragment';
+    case ForwardRef:
+      return getWrappedName(type, type.render, 'ForwardRef');
+    case Fragment:
+      return 'Fragment';
+    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 LegacyHiddenComponent:
+      return 'LegacyHidden';
+    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';
+
+    // The display name for this tags come from the user-provided type:
+    case ClassComponent:
+    case FunctionComponent:
+    case IncompleteClassComponent:
+    case IndeterminateComponent:
+    case MemoComponent:
+    case SimpleMemoComponent:
+      if (typeof type === 'function') {
+        return (type: any).displayName || type.name || null;
+      }
+      if (typeof type === 'string') {
+        return type;
+      }
+      break;
+  }
+
+  return null;
+}
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 65da95aad5bf..f058af3e8758 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -43,7 +43,7 @@ import {
   ScopeComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 import invariant from 'shared/invariant';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
@@ -344,7 +344,7 @@ class ReactTestInstance {
   findByType(type: any): ReactTestInstance {
     return expectOne(
       this.findAllByType(type, {deep: false}),
-      `with node type: "${getComponentName(type) || 'Unknown'}"`,
+      `with node type: "${getComponentNameFromType(type) || 'Unknown'}"`,
     );
   }
 
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index d157a428dad8..9747e0da1a12 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
@@ -104,7 +104,9 @@ function warnIfStringRefCannotBeAutoConverted(config) {
       config.__self &&
       ReactCurrentOwner.current.stateNode !== config.__self
     ) {
-      const componentName = getComponentName(ReactCurrentOwner.current.type);
+      const componentName = getComponentNameFromType(
+        ReactCurrentOwner.current.type,
+      );
 
       if (!didWarnAboutStringRefs[componentName]) {
         console.error(
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index eee8ca26fe25..1ee89ef14217 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -13,7 +13,7 @@
  */
 
 import isValidElementType from 'shared/isValidElementType';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {
   getIteratorFn,
   REACT_FORWARD_REF_TYPE,
@@ -60,7 +60,7 @@ const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 function getDeclarationErrorAddendum() {
   if (ReactCurrentOwner.current) {
-    const name = getComponentName(ReactCurrentOwner.current.type);
+    const name = getComponentNameFromType(ReactCurrentOwner.current.type);
     if (name) {
       return '\n\nCheck the render method of `' + name + '`.';
     }
@@ -139,7 +139,7 @@ function validateExplicitKey(element, parentType) {
     element._owner !== ReactCurrentOwner.current
   ) {
     // Give the component that originally created this child.
-    childOwner = ` It was passed a child from ${getComponentName(
+    childOwner = ` It was passed a child from ${getComponentNameFromType(
       element._owner.type,
     )}.`;
   }
@@ -227,12 +227,12 @@ function validatePropTypes(element) {
     }
     if (propTypes) {
       // Intentionally inside to avoid triggering lazy initializers:
-      const name = getComponentName(type);
+      const name = getComponentNameFromType(type);
       checkPropTypes(propTypes, element.props, 'prop', name, element);
     } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
       propTypesMisspellWarningShown = true;
       // Intentionally inside to avoid triggering lazy initializers:
-      const name = getComponentName(type);
+      const name = getComponentNameFromType(type);
       console.error(
         'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
         name || 'Unknown',
@@ -317,7 +317,7 @@ export function jsxWithValidation(
     } else if (Array.isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
-      typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
+      typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
       info =
         ' Did you accidentally export a JSX literal instead of a component?';
     } else {
@@ -383,7 +383,7 @@ export function jsxWithValidation(
           'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
             'Explicitly pass a key after spreading props in your JSX call. ' +
             'E.g. <%s {...props} key={key} />',
-          getComponentName(type) || 'ComponentName',
+          getComponentNameFromType(type) || 'ComponentName',
         );
       }
     }
@@ -441,7 +441,7 @@ export function createElementWithValidation(type, props, children) {
     } else if (Array.isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
-      typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
+      typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
       info =
         ' Did you accidentally export a JSX literal instead of a component?';
     } else {
diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js
index c4c02c7418ab..ccf2c6e2a400 100644
--- a/packages/react/src/jsx/ReactJSXElement.js
+++ b/packages/react/src/jsx/ReactJSXElement.js
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
@@ -61,7 +61,9 @@ function warnIfStringRefCannotBeAutoConverted(config, self) {
       self &&
       ReactCurrentOwner.current.stateNode !== self
     ) {
-      const componentName = getComponentName(ReactCurrentOwner.current.type);
+      const componentName = getComponentNameFromType(
+        ReactCurrentOwner.current.type,
+      );
 
       if (!didWarnAboutStringRefs[componentName]) {
         console.error(
@@ -71,7 +73,7 @@ function warnIfStringRefCannotBeAutoConverted(config, self) {
             '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),
+          getComponentNameFromType(ReactCurrentOwner.current.type),
           config.ref,
         );
         didWarnAboutStringRefs[componentName] = true;
diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js
index b76baa1e353a..6ee1c7176f49 100644
--- a/packages/react/src/jsx/ReactJSXElementValidator.js
+++ b/packages/react/src/jsx/ReactJSXElementValidator.js
@@ -12,7 +12,7 @@
  * that support it.
  */
 import isValidElementType from 'shared/isValidElementType';
-import getComponentName from 'shared/getComponentName';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import checkPropTypes from 'shared/checkPropTypes';
 import {
   getIteratorFn,
@@ -76,7 +76,7 @@ export function isValidElement(object) {
 function getDeclarationErrorAddendum() {
   if (__DEV__) {
     if (ReactCurrentOwner.current) {
-      const name = getComponentName(ReactCurrentOwner.current.type);
+      const name = getComponentNameFromType(ReactCurrentOwner.current.type);
       if (name) {
         return '\n\nCheck the render method of `' + name + '`.';
       }
@@ -154,7 +154,7 @@ function validateExplicitKey(element, parentType) {
       element._owner !== ReactCurrentOwner.current
     ) {
       // Give the component that originally created this child.
-      childOwner = ` It was passed a child from ${getComponentName(
+      childOwner = ` It was passed a child from ${getComponentNameFromType(
         element._owner.type,
       )}.`;
     }
@@ -243,12 +243,12 @@ function validatePropTypes(element) {
     }
     if (propTypes) {
       // Intentionally inside to avoid triggering lazy initializers:
-      const name = getComponentName(type);
+      const name = getComponentNameFromType(type);
       checkPropTypes(propTypes, element.props, 'prop', name, element);
     } else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
       propTypesMisspellWarningShown = true;
       // Intentionally inside to avoid triggering lazy initializers:
-      const name = getComponentName(type);
+      const name = getComponentNameFromType(type);
       console.error(
         'Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?',
         name || 'Unknown',
@@ -334,7 +334,7 @@ export function jsxWithValidation(
       } else if (Array.isArray(type)) {
         typeString = 'array';
       } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
-        typeString = `<${getComponentName(type.type) || 'Unknown'} />`;
+        typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
         info =
           ' Did you accidentally export a JSX literal instead of a component?';
       } else {
@@ -395,7 +395,7 @@ export function jsxWithValidation(
           'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
             'Explicitly pass a key after spreading props in your JSX call. ' +
             'E.g. <%s {...props} key={key} />',
-          getComponentName(type) || 'ComponentName',
+          getComponentNameFromType(type) || 'ComponentName',
         );
       }
     }
diff --git a/packages/shared/getComponentName.js b/packages/shared/getComponentNameFromType.js
similarity index 86%
rename from packages/shared/getComponentName.js
rename to packages/shared/getComponentNameFromType.js
index a5594f6f64d7..f0f51d852f8d 100644
--- a/packages/shared/getComponentName.js
+++ b/packages/shared/getComponentNameFromType.js
@@ -8,6 +8,7 @@
  */
 
 import type {LazyComponent} from 'react/src/ReactLazy';
+import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 
 import {
   REACT_CONTEXT_TYPE,
@@ -23,8 +24,8 @@ import {
   REACT_LAZY_TYPE,
   REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 
+// Keep in sync with react-reconciler/getComponentNameFromFiber
 function getWrappedName(
   outerType: mixed,
   innerType: any,
@@ -37,11 +38,13 @@ function getWrappedName(
   );
 }
 
+// Keep in sync with react-reconciler/getComponentNameFromFiber
 function getContextName(type: ReactContext<any>) {
   return type.displayName || 'Context';
 }
 
-function getComponentName(type: mixed): string | null {
+// 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;
@@ -87,13 +90,13 @@ function getComponentName(type: mixed): string | null {
       case REACT_FORWARD_REF_TYPE:
         return getWrappedName(type, type.render, 'ForwardRef');
       case REACT_MEMO_TYPE:
-        return getComponentName(type.type);
+        return getComponentNameFromType(type.type);
       case REACT_LAZY_TYPE: {
         const lazyComponent: LazyComponent<any, any> = (type: any);
         const payload = lazyComponent._payload;
         const init = lazyComponent._init;
         try {
-          return getComponentName(init(payload));
+          return getComponentNameFromType(init(payload));
         } catch (x) {
           return null;
         }
@@ -102,5 +105,3 @@ function getComponentName(type: mixed): string | null {
   }
   return null;
 }
-
-export default getComponentName;

From 258b375a419098a5b6c3568e8d35046d142ea912 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Feb 2021 16:42:11 -0600
Subject: [PATCH 0291/1603] Move context comparison to consumer

In the lazy context implementation, not all context changes are
propagated from the provider, so we can't rely on the propagation alone
to mark the consumer as dirty. The consumer needs to compare to the
previous value, like we do for state and context.

I added a `memoizedValue` field to the context dependency type. Then in
the consumer, we iterate over the current dependencies to see if
something changed. We only do this iteration after 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.
---
 ...eactLegacyContextDisabled-test.internal.js |  10 +-
 .../src/ReactFiberBeginWork.new.js            |   4 +
 .../src/ReactFiberBeginWork.old.js            |   4 +
 .../src/ReactFiberClassComponent.new.js       |  21 +-
 .../src/ReactFiberClassComponent.old.js       |  21 +-
 .../src/ReactFiberHooks.new.js                |  29 ++-
 .../src/ReactFiberHooks.old.js                |  29 ++-
 .../src/ReactFiberNewContext.new.js           | 123 ++++++++---
 .../src/ReactFiberNewContext.old.js           | 123 ++++++++---
 .../src/ReactInternalTypes.js                 |   1 +
 .../__tests__/ReactContextPropagation-test.js | 206 ++++++++++++++++++
 .../__tests__/ReactContextValidator-test.js   |   8 +-
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 22 files changed, 507 insertions(+), 83 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js

diff --git a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
index c34268924ffb..c6a2d1fbb5aa 100644
--- a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
@@ -226,7 +226,15 @@ describe('ReactLegacyContextDisabled', () => {
       container,
     );
     expect(container.textContent).toBe('bbb');
-    expect(lifecycleContextLog).toEqual(['b', 'b']); // sCU skipped due to changed context value.
+    if (gate(flags => flags.enableLazyContextPropagation)) {
+      // In the lazy propagation implementation, we don't check if context
+      // changed until after shouldComponentUpdate is run.
+      expect(lifecycleContextLog).toEqual(['b', 'b', 'b']);
+    } else {
+      // In the eager implementation, a dirty flag was set when the parent
+      // changed, so we skipped sCU.
+      expect(lifecycleContextLog).toEqual(['b', 'b']);
+    }
     ReactDOM.unmountComponentAtNode(container);
   });
 });
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 69149016f5ec..66584784ee37 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -3074,6 +3074,10 @@ export function markWorkInProgressReceivedUpdate() {
   didReceiveUpdate = true;
 }
 
+export function checkIfWorkInProgressReceivedUpdate() {
+  return didReceiveUpdate;
+}
+
 function bailoutOnAlreadyFinishedWork(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index b8bacadcfe03..8faa4d859b7e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -3074,6 +3074,10 @@ export function markWorkInProgressReceivedUpdate() {
   didReceiveUpdate = true;
 }
 
+export function checkIfWorkInProgressReceivedUpdate() {
+  return didReceiveUpdate;
+}
+
 function bailoutOnAlreadyFinishedWork(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 0042bf2f9374..ea1b4cb5e3c8 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -20,6 +20,7 @@ import {
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
   enableStrictEffects,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -58,7 +59,7 @@ import {
   hasContextChanged,
   emptyContextObject,
 } from './ReactFiberContext.new';
-import {readContext} from './ReactFiberNewContext.new';
+import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new';
 import {
   requestEventTime,
   requestUpdateLane,
@@ -1150,7 +1151,13 @@ function updateClassInstance(
     unresolvedOldProps === unresolvedNewProps &&
     oldState === newState &&
     !hasContextChanged() &&
-    !checkHasForceUpdateAfterProcessing()
+    !checkHasForceUpdateAfterProcessing() &&
+    !(
+      enableLazyContextPropagation &&
+      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.
@@ -1193,7 +1200,15 @@ function updateClassInstance(
       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.
+    (enableLazyContextPropagation &&
+      current !== null &&
+      current.dependencies !== null &&
+      checkIfContextChanged(current.dependencies));
 
   if (shouldUpdate) {
     // In order to support react-lifecycles-compat polyfilled components,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 984960438672..b952c24cd041 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -20,6 +20,7 @@ import {
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
   enableStrictEffects,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -58,7 +59,7 @@ import {
   hasContextChanged,
   emptyContextObject,
 } from './ReactFiberContext.old';
-import {readContext} from './ReactFiberNewContext.old';
+import {readContext, checkIfContextChanged} from './ReactFiberNewContext.old';
 import {
   requestEventTime,
   requestUpdateLane,
@@ -1150,7 +1151,13 @@ function updateClassInstance(
     unresolvedOldProps === unresolvedNewProps &&
     oldState === newState &&
     !hasContextChanged() &&
-    !checkHasForceUpdateAfterProcessing()
+    !checkHasForceUpdateAfterProcessing() &&
+    !(
+      enableLazyContextPropagation &&
+      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.
@@ -1193,7 +1200,15 @@ function updateClassInstance(
       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.
+    (enableLazyContextPropagation &&
+      current !== null &&
+      current.dependencies !== null &&
+      checkIfContextChanged(current.dependencies));
 
   if (shouldUpdate) {
     // In order to support react-lifecycles-compat polyfilled components,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index bfea1ddda134..e7e5c3128bea 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -30,6 +30,7 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
   enableStrictEffects,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -54,7 +55,7 @@ import {
   higherLanePriority,
   DefaultLanePriority,
 } from './ReactFiberLane.new';
-import {readContext} from './ReactFiberNewContext.new';
+import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
   Update as UpdateEffect,
@@ -83,7 +84,10 @@ import {
 import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
-import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
+import {
+  markWorkInProgressReceivedUpdate,
+  checkIfWorkInProgressReceivedUpdate,
+} from './ReactFiberBeginWork.new';
 import {
   UserBlockingPriority,
   NormalPriority,
@@ -496,6 +500,27 @@ export function renderWithHooks<Props, SecondArg>(
       'early return statement.',
   );
 
+  if (enableLazyContextPropagation) {
+    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();
+        }
+      }
+    }
+  }
+
   return children;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index fea9afd815fc..55dca75656c3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -30,6 +30,7 @@ import {
   decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
   enableStrictEffects,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -54,7 +55,7 @@ import {
   higherLanePriority,
   DefaultLanePriority,
 } from './ReactFiberLane.old';
-import {readContext} from './ReactFiberNewContext.old';
+import {readContext, checkIfContextChanged} from './ReactFiberNewContext.old';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
   Update as UpdateEffect,
@@ -83,7 +84,10 @@ import {
 import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
-import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
+import {
+  markWorkInProgressReceivedUpdate,
+  checkIfWorkInProgressReceivedUpdate,
+} from './ReactFiberBeginWork.old';
 import {
   UserBlockingPriority,
   NormalPriority,
@@ -496,6 +500,27 @@ export function renderWithHooks<Props, SecondArg>(
       'early return statement.',
   );
 
+  if (enableLazyContextPropagation) {
+    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();
+        }
+      }
+    }
+  }
+
   return children;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index ad524da736d0..91ba7c9ff651 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -8,7 +8,11 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
-import type {Fiber, ContextDependency} from './ReactInternalTypes';
+import type {
+  Fiber,
+  ContextDependency,
+  Dependencies,
+} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SharedQueue} from './ReactUpdateQueue.new';
@@ -34,7 +38,10 @@ import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.new';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseServerRenderer,
+  enableLazyContextPropagation,
+} from 'shared/ReactFeatureFlags';
 
 const valueCursor: StackCursor<mixed> = createCursor(null);
 
@@ -210,33 +217,46 @@ export function propagateContextChange<T>(
         ) {
           // Match! Schedule an update on this fiber.
 
-          if (fiber.tag === ClassComponent) {
-            // Schedule a force update on the work-in-progress.
-            const lane = pickArbitraryLane(renderLanes);
-            const update = createUpdate(NoTimestamp, lane);
-            update.tag = ForceUpdate;
-            // TODO: Because we don't have a work-in-progress, this will add the
-            // update to the current fiber, too, which means it will persist even if
-            // this render is thrown away. Since it's a race condition, not sure it's
-            // worth fixing.
-
-            // Inlined `enqueueUpdate` to remove interleaved update check
-            const updateQueue = fiber.updateQueue;
-            if (updateQueue === null) {
-              // Only occurs if the fiber has been unmounted.
-            } else {
-              const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
-              const pending = sharedQueue.pending;
-              if (pending === null) {
-                // This is the first update. Create a circular list.
-                update.next = update;
+          if (enableLazyContextPropagation) {
+            // In the lazy implemenation, 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.
+          } else {
+            if (fiber.tag === ClassComponent) {
+              // Schedule a force update on the work-in-progress.
+              const lane = pickArbitraryLane(renderLanes);
+              const update = createUpdate(NoTimestamp, lane);
+              update.tag = ForceUpdate;
+              // TODO: Because we don't have a work-in-progress, this will add the
+              // update to the current fiber, too, which means it will persist even if
+              // this render is thrown away. Since it's a race condition, not sure it's
+              // worth fixing.
+
+              // Inlined `enqueueUpdate` to remove interleaved update check
+              const updateQueue = fiber.updateQueue;
+              if (updateQueue === null) {
+                // Only occurs if the fiber has been unmounted.
               } else {
-                update.next = pending.next;
-                pending.next = update;
+                const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
+                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;
               }
-              sharedQueue.pending = update;
             }
+            // Mark the updated lanes on the list, too.
+            list.lanes = mergeLanes(list.lanes, renderLanes);
           }
+
           fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
           const alternate = fiber.alternate;
           if (alternate !== null) {
@@ -244,9 +264,6 @@ export function propagateContextChange<T>(
           }
           scheduleWorkOnParentPath(fiber.return, renderLanes);
 
-          // Mark the updated lanes on the list, too.
-          list.lanes = mergeLanes(list.lanes, renderLanes);
-
           // Since we already found a match, we can stop traversing the
           // dependency list.
           break;
@@ -311,6 +328,30 @@ export function propagateContextChange<T>(
   }
 }
 
+export function checkIfContextChanged(currentDependencies: Dependencies) {
+  if (!enableLazyContextPropagation) {
+    return false;
+  }
+  // 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,
@@ -321,14 +362,19 @@ export function prepareToReadContext(
 
   const dependencies = workInProgress.dependencies;
   if (dependencies !== null) {
-    const firstContext = dependencies.firstContext;
-    if (firstContext !== null) {
-      if (includesSomeLane(dependencies.lanes, renderLanes)) {
-        // Context list has a pending update. Mark that this fiber performed work.
-        markWorkInProgressReceivedUpdate();
-      }
+    if (enableLazyContextPropagation) {
       // Reset the work-in-progress list
       dependencies.firstContext = null;
+    } else {
+      const firstContext = dependencies.firstContext;
+      if (firstContext !== null) {
+        if (includesSomeLane(dependencies.lanes, renderLanes)) {
+          // Context list has a pending update. Mark that this fiber performed work.
+          markWorkInProgressReceivedUpdate();
+        }
+        // Reset the work-in-progress list
+        dependencies.firstContext = null;
+      }
     }
   }
 }
@@ -350,6 +396,10 @@ export function readContext<T>(
     }
   }
 
+  const value = isPrimaryRenderer
+    ? context._currentValue
+    : context._currentValue2;
+
   if (lastContextWithAllBitsObserved === context) {
     // Nothing to do. We already observe everything in this context.
   } else if (observedBits === false || observedBits === 0) {
@@ -370,6 +420,7 @@ export function readContext<T>(
     const contextItem = {
       context: ((context: any): ReactContext<mixed>),
       observedBits: resolvedObservedBits,
+      memoizedValue: value,
       next: null,
     };
 
@@ -387,6 +438,8 @@ export function readContext<T>(
       currentlyRenderingFiber.dependencies = {
         lanes: NoLanes,
         firstContext: contextItem,
+
+        // TODO: This is an old field. Delete it.
         responders: null,
       };
     } else {
@@ -394,5 +447,5 @@ export function readContext<T>(
       lastContextDependency = lastContextDependency.next = contextItem;
     }
   }
-  return isPrimaryRenderer ? context._currentValue : context._currentValue2;
+  return value;
 }
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index c1102b89f93f..602eadd6b010 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -8,7 +8,11 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
-import type {Fiber, ContextDependency} from './ReactInternalTypes';
+import type {
+  Fiber,
+  ContextDependency,
+  Dependencies,
+} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SharedQueue} from './ReactUpdateQueue.old';
@@ -34,7 +38,10 @@ import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.old';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseServerRenderer,
+  enableLazyContextPropagation,
+} from 'shared/ReactFeatureFlags';
 
 const valueCursor: StackCursor<mixed> = createCursor(null);
 
@@ -210,33 +217,46 @@ export function propagateContextChange<T>(
         ) {
           // Match! Schedule an update on this fiber.
 
-          if (fiber.tag === ClassComponent) {
-            // Schedule a force update on the work-in-progress.
-            const lane = pickArbitraryLane(renderLanes);
-            const update = createUpdate(NoTimestamp, lane);
-            update.tag = ForceUpdate;
-            // TODO: Because we don't have a work-in-progress, this will add the
-            // update to the current fiber, too, which means it will persist even if
-            // this render is thrown away. Since it's a race condition, not sure it's
-            // worth fixing.
-
-            // Inlined `enqueueUpdate` to remove interleaved update check
-            const updateQueue = fiber.updateQueue;
-            if (updateQueue === null) {
-              // Only occurs if the fiber has been unmounted.
-            } else {
-              const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
-              const pending = sharedQueue.pending;
-              if (pending === null) {
-                // This is the first update. Create a circular list.
-                update.next = update;
+          if (enableLazyContextPropagation) {
+            // In the lazy implemenation, 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.
+          } else {
+            if (fiber.tag === ClassComponent) {
+              // Schedule a force update on the work-in-progress.
+              const lane = pickArbitraryLane(renderLanes);
+              const update = createUpdate(NoTimestamp, lane);
+              update.tag = ForceUpdate;
+              // TODO: Because we don't have a work-in-progress, this will add the
+              // update to the current fiber, too, which means it will persist even if
+              // this render is thrown away. Since it's a race condition, not sure it's
+              // worth fixing.
+
+              // Inlined `enqueueUpdate` to remove interleaved update check
+              const updateQueue = fiber.updateQueue;
+              if (updateQueue === null) {
+                // Only occurs if the fiber has been unmounted.
               } else {
-                update.next = pending.next;
-                pending.next = update;
+                const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
+                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;
               }
-              sharedQueue.pending = update;
             }
+            // Mark the updated lanes on the list, too.
+            list.lanes = mergeLanes(list.lanes, renderLanes);
           }
+
           fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
           const alternate = fiber.alternate;
           if (alternate !== null) {
@@ -244,9 +264,6 @@ export function propagateContextChange<T>(
           }
           scheduleWorkOnParentPath(fiber.return, renderLanes);
 
-          // Mark the updated lanes on the list, too.
-          list.lanes = mergeLanes(list.lanes, renderLanes);
-
           // Since we already found a match, we can stop traversing the
           // dependency list.
           break;
@@ -311,6 +328,30 @@ export function propagateContextChange<T>(
   }
 }
 
+export function checkIfContextChanged(currentDependencies: Dependencies) {
+  if (!enableLazyContextPropagation) {
+    return false;
+  }
+  // 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,
@@ -321,14 +362,19 @@ export function prepareToReadContext(
 
   const dependencies = workInProgress.dependencies;
   if (dependencies !== null) {
-    const firstContext = dependencies.firstContext;
-    if (firstContext !== null) {
-      if (includesSomeLane(dependencies.lanes, renderLanes)) {
-        // Context list has a pending update. Mark that this fiber performed work.
-        markWorkInProgressReceivedUpdate();
-      }
+    if (enableLazyContextPropagation) {
       // Reset the work-in-progress list
       dependencies.firstContext = null;
+    } else {
+      const firstContext = dependencies.firstContext;
+      if (firstContext !== null) {
+        if (includesSomeLane(dependencies.lanes, renderLanes)) {
+          // Context list has a pending update. Mark that this fiber performed work.
+          markWorkInProgressReceivedUpdate();
+        }
+        // Reset the work-in-progress list
+        dependencies.firstContext = null;
+      }
     }
   }
 }
@@ -350,6 +396,10 @@ export function readContext<T>(
     }
   }
 
+  const value = isPrimaryRenderer
+    ? context._currentValue
+    : context._currentValue2;
+
   if (lastContextWithAllBitsObserved === context) {
     // Nothing to do. We already observe everything in this context.
   } else if (observedBits === false || observedBits === 0) {
@@ -370,6 +420,7 @@ export function readContext<T>(
     const contextItem = {
       context: ((context: any): ReactContext<mixed>),
       observedBits: resolvedObservedBits,
+      memoizedValue: value,
       next: null,
     };
 
@@ -387,6 +438,8 @@ export function readContext<T>(
       currentlyRenderingFiber.dependencies = {
         lanes: NoLanes,
         firstContext: contextItem,
+
+        // TODO: This is an old field. Delete it.
         responders: null,
       };
     } else {
@@ -394,5 +447,5 @@ export function readContext<T>(
       lastContextDependency = lastContextDependency.next = contextItem;
     }
   }
-  return isPrimaryRenderer ? context._currentValue : context._currentValue2;
+  return value;
 }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index cb34ac74948e..b1764bed5ac3 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -51,6 +51,7 @@ export type ContextDependency<T> = {
   context: ReactContext<T>,
   observedBits: number,
   next: ContextDependency<mixed> | null,
+  memoizedValue: T,
   ...
 };
 
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 000000000000..bdc89014ad64
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -0,0 +1,206 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let useState;
+let useContext;
+
+describe('ReactLazyContextPropagation', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useContext = React.useContext;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  // NOTE: These tests are not specific to the lazy propagation (as opposed to
+  // eager propagation). The behavior should be the same in both
+  // implementations. These are tests that are more relevant to the lazy
+  // propagation implementation, though.
+
+  test(
+    '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 ReactNoop.act(async () => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([0]);
+      expect(root).toMatchRenderedOutput('0');
+
+      await ReactNoop.act(async () => {
+        setValue(1);
+      });
+      expect(Scheduler).toHaveYielded([1]);
+      expect(root).toMatchRenderedOutput('1');
+    },
+  );
+
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await ReactNoop.act(async () => {
+      setValue(1);
+    });
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await ReactNoop.act(async () => {
+      setValue(1);
+    });
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  test("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.unstable_yieldValue('Consumer');
+
+      return <Text text={value} />;
+    });
+
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['Consumer', 0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    await ReactNoop.act(async () => {
+      // 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.
+    expect(Scheduler).toHaveYielded(['Consumer']);
+    expect(root).toMatchRenderedOutput('0');
+  });
+});
diff --git a/packages/react/src/__tests__/ReactContextValidator-test.js b/packages/react/src/__tests__/ReactContextValidator-test.js
index f3fc8875c79b..ae1a9a0da7fe 100644
--- a/packages/react/src/__tests__/ReactContextValidator-test.js
+++ b/packages/react/src/__tests__/ReactContextValidator-test.js
@@ -431,8 +431,12 @@ describe('ReactContextValidator', () => {
     expect(renderContext).toBe(secondContext);
     expect(componentDidUpdateContext).toBe(secondContext);
 
-    // sCU is not called in this case because React force updates when a provider re-renders
-    expect(shouldComponentUpdateWasCalled).toBe(false);
+    if (gate(flags => flags.enableLazyContextPropagation)) {
+      expect(shouldComponentUpdateWasCalled).toBe(true);
+    } else {
+      // sCU is not called in this case because React force updates when a provider re-renders
+      expect(shouldComponentUpdateWasCalled).toBe(false);
+    }
   });
 
   it('should re-render PureComponents when context Provider updates', () => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 201546e822b2..484717599557 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -158,3 +158,5 @@ export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 
 export const enableNativeEventPriorityInference = false;
+
+export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index e0bff4b32f63..b664dc00632a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -61,6 +61,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
+export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a40b6e293c24..f5d44fff1308 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -60,6 +60,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
+export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 97a26ddd8681..e05226fd5d01 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -60,6 +60,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
+export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 1417670d7915..41a368f659ec 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -60,6 +60,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
+export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 17848a59376c..577e77f18df9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -60,6 +60,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
+export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index ce73c8a870cf..0d7c78e39e29 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -60,6 +60,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
+export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 02dba8551fb1..1dfa34662cd7 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -60,6 +60,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
+export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index b75b80dbde65..416dfb619144 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -59,3 +59,4 @@ export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableDiscreteEventMicroTasks = __VARIANT__;
 export const enableSyncMicroTasks = __VARIANT__;
 export const enableNativeEventPriorityInference = __VARIANT__;
+export const enableLazyContextPropagation = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 0612eacf80d0..f1fb6d499b5f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -35,6 +35,7 @@ export const {
   enableDiscreteEventMicroTasks,
   enableSyncMicroTasks,
   enableNativeEventPriorityInference,
+  enableLazyContextPropagation,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From c7b4497988e81606f1c7686434f55a49342c9efc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 7 Mar 2021 00:56:53 -0600
Subject: [PATCH 0292/1603] [Experiment] Lazily propagate context changes
 (#20890)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Move context comparison to consumer

In the lazy context implementation, not all context changes are
propagated from the provider, so we can't rely on the propagation alone
to mark the consumer as dirty. The consumer needs to compare to the
previous value, like we do for state and context.

I added a `memoizedValue` field to the context dependency type. Then in
the consumer, we iterate over the current dependencies to see if
something changed. We only do this iteration after 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.

* [Experiment] Lazily propagate context changes

When a context provider changes, we scan the tree for matching consumers
and mark them as dirty so that we know they have pending work. This
prevents us from bailing out if, say, an intermediate wrapper is
memoized.

Currently, we propagate these changes eagerly, at the provider.

However, in many cases, we would have ended up visiting the consumer
nodes anyway, as part of the normal render traversal, because there's no
memoized node in between that bails out.

We can save CPU cycles by propagating changes only when we hit a
memoized component — so, instead of propagating eagerly at the provider,
we propagate lazily if or when something bails out.

Most of our bailout logic is centralized in
`bailoutOnAlreadyFinishedWork`, so this ended up being not that
difficult to implement correctly.

There are some exceptions: Suspense and Offscreen. Those are special
because they sometimes defer the rendering of their children to a
completely separate render cycle. In those cases, we must take extra
care to propagate *all* the context changes, not just the first one.

I'm pleasantly surprised at how little I needed to change in this
initial implementation. I was worried I'd have to use the reconciler
fork, but I ended up being able to wrap all my changes in a regular
feature flag. So, we could run an experiment in parallel to our other
ones.

I do consider this a risky rollout overall because of the potential for
subtle semantic deviations. However, the model is simple enough that I
don't expect us to have trouble fixing regressions if or when they arise
during internal dogfooding.

---

This is largely based on [RFC#118](https://github.com/reactjs/rfcs/pull/118),
by @gnoff. I did deviate in some of the implementation details, though.

The main one is how I chose to track context changes. Instead of storing
a dirty flag on the stack, I added a `memoizedValue` field to the
context dependency object. Then, to check if something has changed, the
consumer compares the new context value to the old (memoized) one.

This is necessary because of Suspense and Offscreen — those components
defer work from one render into a later one. When the subtree continues
rendering, the stack from the previous render is no longer available.
But the memoized values on the dependencies list are. This requires a
bit more work when a consumer bails out, but nothing considerable, and
there are ways we could optimize it even further. Conceptually, this
model is really appealing, since it matches how our other features
"reactively" detect changes — `useMemo`, `useEffect`,
`getDerivedStateFromProps`, the built-in cache, and so on.

I also intentionally dropped support for
`unstable_calculateChangedBits`. We're planning to remove this API
anyway before the next major release, in favor of context selectors.
It's an unstable feature that we never advertised; I don't think it's
seen much adoption.

Co-Authored-By: Josh Story <jcs.gnoff@gmail.com>

* Propagate all contexts in single pass

Instead of propagating the tree once per changed context, we can check
all the contexts in a single propagation. This inverts the two loops so
that the faster loop (O(numberOfContexts)) is inside the more expensive
loop (O(numberOfFibers * avgContextDepsPerFiber)).

This adds a bit of overhead to the case where only a single context
changes because you have to unwrap the context from the array. I'm also
unsure if this will hurt cache locality.

Co-Authored-By: Josh Story <jcs.gnoff@gmail.com>

* Stop propagating at nearest dependency match

Because we now propagate all context providers in a single traversal, we
can defer context propagation to a subtree without losing information
about which context providers we're deferring — it's all of them.

Theoretically, this is a big optimization because it means we'll never
propagate to any tree that has work scheduled on it, nor will we ever
propagate the same tree twice.

There's an awkward case related to bailing out of the siblings of a
context consumer. Because those siblings don't bail out until after
they've already entered the begin phase, we have to do extra work to
make sure they don't unecessarily propagate context again. We could
avoid this by adding an earlier bailout for sibling nodes, something
we've discussed in the past. We should consider this during the next
refactor of the fiber tree structure.

Co-Authored-By: Josh Story <jcs.gnoff@gmail.com>

* Mark trees that need propagation in readContext

Instead of storing matched context consumers in a Set, we can mark
when a consumer receives an update inside `readContext`.

I hesistated to put anything in this function because it's such a hot
path, but so are bail outs. Fortunately, we only need to set this flag
once, the first time a context is read. So I think it's a reasonable
trade off.

In exchange, propagation is faster because we no longer need to
accumulate a Set of matched consumers, and fiber bailouts are faster
because we don't need to consult that Set. And the code is simpler.

Co-authored-by: Josh Story <jcs.gnoff@gmail.com>
---
 .../src/ReactFiberBeginWork.new.js            | 130 +++-
 .../src/ReactFiberBeginWork.old.js            | 130 +++-
 .../react-reconciler/src/ReactFiberFlags.js   |  46 +-
 .../src/ReactFiberNewContext.new.js           | 344 ++++++++-
 .../src/ReactFiberNewContext.old.js           | 344 ++++++++-
 .../src/ReactFiberThrow.new.js                |  19 +
 .../src/ReactFiberThrow.old.js                |  19 +
 .../__tests__/ReactContextPropagation-test.js | 724 +++++++++++++++++-
 .../src/__tests__/ReactNewContext-test.js     |  12 +-
 scripts/error-codes/codes.json                |   4 +-
 10 files changed, 1621 insertions(+), 151 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 66584784ee37..345f668fc62e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -81,6 +81,7 @@ import {
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableCache,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -154,6 +155,9 @@ import {findFirstSuspended} from './ReactFiberSuspenseComponent.new';
 import {
   pushProvider,
   propagateContextChange,
+  lazilyPropagateParentContextChanges,
+  propagateParentContextChangesToDeferredTree,
+  checkIfContextChanged,
   readContext,
   prepareToReadContext,
   calculateChangedBits,
@@ -646,6 +650,18 @@ function updateOffscreenComponent(
       // We're about to bail out, but we need to push this to the stack anyway
       // to avoid a push/pop misalignment.
       pushRenderLanes(workInProgress, nextBaseLanes);
+
+      if (enableLazyContextPropagation && 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,
+        );
+      }
+
       return null;
     } else {
       // This is the second render. The surrounding visible content has already
@@ -2445,6 +2461,19 @@ function updateDehydratedSuspenseComponent(
       renderLanes,
     );
   }
+
+  if (
+    enableLazyContextPropagation &&
+    // TODO: Factoring is a little weird, since we check this right below, too.
+    // But don't want to re-arrange the if-else chain until/unless this
+    // feature lands.
+    !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);
@@ -2970,25 +2999,37 @@ function updateContextProvider(
 
   pushProvider(workInProgress, context, newValue);
 
-  if (oldProps !== null) {
-    const oldValue = oldProps.value;
-    const changedBits = calculateChangedBits(context, newValue, oldValue);
-    if (changedBits === 0) {
-      // No change. Bailout early if children are the same.
-      if (
-        oldProps.children === newProps.children &&
-        !hasLegacyContextChanged()
-      ) {
-        return bailoutOnAlreadyFinishedWork(
-          current,
+  if (enableLazyContextPropagation) {
+    // In the lazy propagation implementation, we don't scan for matching
+    // consumers until something bails out, because until something bails out
+    // we're going to visit those nodes, anyway. The trade-off is that it shifts
+    // responsibility to the consumer to track whether something has changed.
+  } else {
+    if (oldProps !== null) {
+      const oldValue = oldProps.value;
+      const changedBits = calculateChangedBits(context, newValue, oldValue);
+      if (changedBits === 0) {
+        // No change. Bailout early if children are the same.
+        if (
+          oldProps.children === newProps.children &&
+          !hasLegacyContextChanged()
+        ) {
+          return bailoutOnAlreadyFinishedWork(
+            current,
+            workInProgress,
+            renderLanes,
+          );
+        }
+      } else {
+        // The context value changed. Search for matching consumers and schedule
+        // them to update.
+        propagateContextChange(
           workInProgress,
+          context,
+          changedBits,
           renderLanes,
         );
       }
-    } else {
-      // The context value changed. Search for matching consumers and schedule
-      // them to update.
-      propagateContextChange(workInProgress, context, changedBits, renderLanes);
     }
   }
 
@@ -3100,13 +3141,23 @@ function bailoutOnAlreadyFinishedWork(
     // 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.
-    return null;
-  } else {
-    // This fiber doesn't have work, but its subtree does. Clone the child
-    // fibers and continue.
-    cloneChildFibers(current, workInProgress);
-    return workInProgress.child;
+
+    if (enableLazyContextPropagation && 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(
@@ -3175,7 +3226,7 @@ function beginWork(
   workInProgress: Fiber,
   renderLanes: Lanes,
 ): Fiber | null {
-  const updateLanes = workInProgress.lanes;
+  let updateLanes = workInProgress.lanes;
 
   if (__DEV__) {
     if (workInProgress._debugNeedsRemount && current !== null) {
@@ -3196,6 +3247,17 @@ function beginWork(
   }
 
   if (current !== null) {
+    // TODO: The factoring of this block is weird.
+    if (
+      enableLazyContextPropagation &&
+      !includesSomeLane(renderLanes, updateLanes)
+    ) {
+      const dependencies = current.dependencies;
+      if (dependencies !== null && checkIfContextChanged(dependencies)) {
+        updateLanes = mergeLanes(updateLanes, renderLanes);
+      }
+    }
+
     const oldProps = current.memoizedProps;
     const newProps = workInProgress.pendingProps;
 
@@ -3316,6 +3378,9 @@ function beginWork(
                 // 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;
               }
             }
@@ -3330,11 +3395,30 @@ function beginWork(
         case SuspenseListComponent: {
           const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
 
-          const hasChildWork = includesSomeLane(
+          let hasChildWork = includesSomeLane(
             renderLanes,
             workInProgress.childLanes,
           );
 
+          if (enableLazyContextPropagation && !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
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 8faa4d859b7e..72b4e33431b0 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -81,6 +81,7 @@ import {
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableCache,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -154,6 +155,9 @@ import {findFirstSuspended} from './ReactFiberSuspenseComponent.old';
 import {
   pushProvider,
   propagateContextChange,
+  lazilyPropagateParentContextChanges,
+  propagateParentContextChangesToDeferredTree,
+  checkIfContextChanged,
   readContext,
   prepareToReadContext,
   calculateChangedBits,
@@ -646,6 +650,18 @@ function updateOffscreenComponent(
       // We're about to bail out, but we need to push this to the stack anyway
       // to avoid a push/pop misalignment.
       pushRenderLanes(workInProgress, nextBaseLanes);
+
+      if (enableLazyContextPropagation && 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,
+        );
+      }
+
       return null;
     } else {
       // This is the second render. The surrounding visible content has already
@@ -2445,6 +2461,19 @@ function updateDehydratedSuspenseComponent(
       renderLanes,
     );
   }
+
+  if (
+    enableLazyContextPropagation &&
+    // TODO: Factoring is a little weird, since we check this right below, too.
+    // But don't want to re-arrange the if-else chain until/unless this
+    // feature lands.
+    !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);
@@ -2970,25 +2999,37 @@ function updateContextProvider(
 
   pushProvider(workInProgress, context, newValue);
 
-  if (oldProps !== null) {
-    const oldValue = oldProps.value;
-    const changedBits = calculateChangedBits(context, newValue, oldValue);
-    if (changedBits === 0) {
-      // No change. Bailout early if children are the same.
-      if (
-        oldProps.children === newProps.children &&
-        !hasLegacyContextChanged()
-      ) {
-        return bailoutOnAlreadyFinishedWork(
-          current,
+  if (enableLazyContextPropagation) {
+    // In the lazy propagation implementation, we don't scan for matching
+    // consumers until something bails out, because until something bails out
+    // we're going to visit those nodes, anyway. The trade-off is that it shifts
+    // responsibility to the consumer to track whether something has changed.
+  } else {
+    if (oldProps !== null) {
+      const oldValue = oldProps.value;
+      const changedBits = calculateChangedBits(context, newValue, oldValue);
+      if (changedBits === 0) {
+        // No change. Bailout early if children are the same.
+        if (
+          oldProps.children === newProps.children &&
+          !hasLegacyContextChanged()
+        ) {
+          return bailoutOnAlreadyFinishedWork(
+            current,
+            workInProgress,
+            renderLanes,
+          );
+        }
+      } else {
+        // The context value changed. Search for matching consumers and schedule
+        // them to update.
+        propagateContextChange(
           workInProgress,
+          context,
+          changedBits,
           renderLanes,
         );
       }
-    } else {
-      // The context value changed. Search for matching consumers and schedule
-      // them to update.
-      propagateContextChange(workInProgress, context, changedBits, renderLanes);
     }
   }
 
@@ -3100,13 +3141,23 @@ function bailoutOnAlreadyFinishedWork(
     // 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.
-    return null;
-  } else {
-    // This fiber doesn't have work, but its subtree does. Clone the child
-    // fibers and continue.
-    cloneChildFibers(current, workInProgress);
-    return workInProgress.child;
+
+    if (enableLazyContextPropagation && 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(
@@ -3175,7 +3226,7 @@ function beginWork(
   workInProgress: Fiber,
   renderLanes: Lanes,
 ): Fiber | null {
-  const updateLanes = workInProgress.lanes;
+  let updateLanes = workInProgress.lanes;
 
   if (__DEV__) {
     if (workInProgress._debugNeedsRemount && current !== null) {
@@ -3196,6 +3247,17 @@ function beginWork(
   }
 
   if (current !== null) {
+    // TODO: The factoring of this block is weird.
+    if (
+      enableLazyContextPropagation &&
+      !includesSomeLane(renderLanes, updateLanes)
+    ) {
+      const dependencies = current.dependencies;
+      if (dependencies !== null && checkIfContextChanged(dependencies)) {
+        updateLanes = mergeLanes(updateLanes, renderLanes);
+      }
+    }
+
     const oldProps = current.memoizedProps;
     const newProps = workInProgress.pendingProps;
 
@@ -3316,6 +3378,9 @@ function beginWork(
                 // 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;
               }
             }
@@ -3330,11 +3395,30 @@ function beginWork(
         case SuspenseListComponent: {
           const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
 
-          const hasChildWork = includesSomeLane(
+          let hasChildWork = includesSomeLane(
             renderLanes,
             workInProgress.childLanes,
           );
 
+          if (enableLazyContextPropagation && !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
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index f29a1b645f15..61abbb6122ed 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,49 +12,51 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b00000000000000000000;
-export const PerformedWork = /*                */ 0b00000000000000000001;
+export const NoFlags = /*                      */ 0b0000000000000000000000;
+export const PerformedWork = /*                */ 0b0000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b00000000000000000010;
-export const Update = /*                       */ 0b00000000000000000100;
+export const Placement = /*                    */ 0b0000000000000000000010;
+export const Update = /*                       */ 0b0000000000000000000100;
 export const PlacementAndUpdate = /*           */ Placement | Update;
-export const Deletion = /*                     */ 0b00000000000000001000;
-export const ChildDeletion = /*                */ 0b00000000000000010000;
-export const ContentReset = /*                 */ 0b00000000000000100000;
-export const Callback = /*                     */ 0b00000000000001000000;
-export const DidCapture = /*                   */ 0b00000000000010000000;
-export const Ref = /*                          */ 0b00000000000100000000;
-export const Snapshot = /*                     */ 0b00000000001000000000;
-export const Passive = /*                      */ 0b00000000010000000000;
-export const Hydrating = /*                    */ 0b00000000100000000000;
+export const Deletion = /*                     */ 0b0000000000000000001000;
+export const ChildDeletion = /*                */ 0b0000000000000000010000;
+export const ContentReset = /*                 */ 0b0000000000000000100000;
+export const Callback = /*                     */ 0b0000000000000001000000;
+export const DidCapture = /*                   */ 0b0000000000000010000000;
+export const Ref = /*                          */ 0b0000000000000100000000;
+export const Snapshot = /*                     */ 0b0000000000001000000000;
+export const Passive = /*                      */ 0b0000000000010000000000;
+export const Hydrating = /*                    */ 0b0000000000100000000000;
 export const HydratingAndUpdate = /*           */ Hydrating | Update;
-export const Visibility = /*                   */ 0b00000001000000000000;
+export const Visibility = /*                   */ 0b0000000001000000000000;
 
 export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
 
 // Union of all commit flags (flags with the lifetime of a particular commit)
-export const HostEffectMask = /*               */ 0b00000001111111111111;
+export const HostEffectMask = /*               */ 0b0000000001111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b00000010000000000000;
-export const ShouldCapture = /*                */ 0b00000100000000000000;
+export const Incomplete = /*                   */ 0b0000000010000000000000;
+export const ShouldCapture = /*                */ 0b0000000100000000000000;
 // TODO (effects) Remove this bit once the new reconciler is synced to the old.
-export const PassiveUnmountPendingDev = /*     */ 0b00001000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b00010000000000000000;
+export const PassiveUnmountPendingDev = /*     */ 0b0000001000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b0000010000000000000000;
+export const DidPropagateContext = /*          */ 0b0000100000000000000000;
+export const NeedsPropagation = /*             */ 0b0001000000000000000000;
 
 // 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 PassiveStatic = /*                */ 0b00100000000000000000;
+export const PassiveStatic = /*                */ 0b0010000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b01000000000000000000;
-export const MountPassiveDev = /*              */ 0b10000000000000000000;
+export const MountLayoutDev = /*               */ 0b0100000000000000000000;
+export const MountPassiveDev = /*              */ 0b1000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 91ba7c9ff651..29a1eeef8cdd 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 import type {
   Fiber,
   ContextDependency,
@@ -33,6 +33,11 @@ import {
   mergeLanes,
   pickArbitraryLane,
 } from './ReactFiberLane.new';
+import {
+  NoFlags,
+  DidPropagateContext,
+  NeedsPropagation,
+} from './ReactFiberFlags';
 
 import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
@@ -195,6 +200,37 @@ export function propagateContextChange<T>(
   changedBits: number,
   renderLanes: Lanes,
 ): void {
+  if (enableLazyContextPropagation) {
+    // 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, changedBits],
+      renderLanes,
+      forcePropagateEntireTree,
+    );
+  } else {
+    propagateContextChange_eager(
+      workInProgress,
+      context,
+      changedBits,
+      renderLanes,
+    );
+  }
+}
+
+function propagateContextChange_eager<T>(
+  workInProgress: Fiber,
+  context: ReactContext<T>,
+  changedBits: number,
+  renderLanes: Lanes,
+): void {
+  // Only used by eager implemenation
+  if (enableLazyContextPropagation) {
+    return;
+  }
   let fiber = workInProgress.child;
   if (fiber !== null) {
     // Set the return pointer of the child to the work-in-progress fiber.
@@ -216,45 +252,32 @@ export function propagateContextChange<T>(
           (dependency.observedBits & changedBits) !== 0
         ) {
           // Match! Schedule an update on this fiber.
-
-          if (enableLazyContextPropagation) {
-            // In the lazy implemenation, 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.
-          } else {
-            if (fiber.tag === ClassComponent) {
-              // Schedule a force update on the work-in-progress.
-              const lane = pickArbitraryLane(renderLanes);
-              const update = createUpdate(NoTimestamp, lane);
-              update.tag = ForceUpdate;
-              // TODO: Because we don't have a work-in-progress, this will add the
-              // update to the current fiber, too, which means it will persist even if
-              // this render is thrown away. Since it's a race condition, not sure it's
-              // worth fixing.
-
-              // Inlined `enqueueUpdate` to remove interleaved update check
-              const updateQueue = fiber.updateQueue;
-              if (updateQueue === null) {
-                // Only occurs if the fiber has been unmounted.
+          if (fiber.tag === ClassComponent) {
+            // Schedule a force update on the work-in-progress.
+            const lane = pickArbitraryLane(renderLanes);
+            const update = createUpdate(NoTimestamp, lane);
+            update.tag = ForceUpdate;
+            // TODO: Because we don't have a work-in-progress, this will add the
+            // update to the current fiber, too, which means it will persist even if
+            // this render is thrown away. Since it's a race condition, not sure it's
+            // worth fixing.
+
+            // Inlined `enqueueUpdate` to remove interleaved update check
+            const updateQueue = fiber.updateQueue;
+            if (updateQueue === null) {
+              // Only occurs if the fiber has been unmounted.
+            } else {
+              const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
+              const pending = sharedQueue.pending;
+              if (pending === null) {
+                // This is the first update. Create a circular list.
+                update.next = update;
               } else {
-                const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
-                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.next = pending.next;
+                pending.next = update;
               }
+              sharedQueue.pending = update;
             }
-            // Mark the updated lanes on the list, too.
-            list.lanes = mergeLanes(list.lanes, renderLanes);
           }
 
           fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
@@ -264,6 +287,9 @@ export function propagateContextChange<T>(
           }
           scheduleWorkOnParentPath(fiber.return, renderLanes);
 
+          // Mark the updated lanes on the list, too.
+          list.lanes = mergeLanes(list.lanes, renderLanes);
+
           // Since we already found a match, we can stop traversing the
           // dependency list.
           break;
@@ -328,6 +354,247 @@ export function propagateContextChange<T>(
   }
 }
 
+function propagateContextChanges<T>(
+  workInProgress: Fiber,
+  contexts: Array<any>,
+  renderLanes: Lanes,
+  forcePropagateEntireTree: boolean,
+): void {
+  // Only used by lazy implemenation
+  if (!enableLazyContextPropagation) {
+    return;
+  }
+  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 += 2) {
+          const context: ReactContext<T> = contexts[i];
+          const changedBits: number = contexts[i + 1];
+          // Check if the context matches.
+          // TODO: Compare selected values to bail out early.
+          if (
+            dependency.context === context &&
+            (dependency.observedBits & changedBits) !== 0
+          ) {
+            // Match! Schedule an update on this fiber.
+
+            // In the lazy implemenation, 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);
+            }
+            scheduleWorkOnParentPath(consumer.return, renderLanes);
+
+            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 (
+      enableSuspenseServerRenderer &&
+      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;
+      invariant(
+        parentSuspense !== null,
+        '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.
+      scheduleWorkOnParentPath(parentSuspense, renderLanes);
+      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,
+) {
+  if (!enableLazyContextPropagation) {
+    return;
+  }
+
+  // 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 = 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;
+      invariant(
+        currentParent !== null,
+        'Should have a current fiber. This is a bug in React.',
+      );
+      const oldProps = currentParent.memoizedProps;
+      if (oldProps !== null) {
+        const providerType: ReactProviderType<any> = parent.type;
+        const context: ReactContext<any> = providerType._context;
+
+        const newProps = parent.pendingProps;
+        const newValue = newProps.value;
+
+        const oldValue = oldProps.value;
+
+        const changedBits = calculateChangedBits(context, newValue, oldValue);
+        if (changedBits !== 0) {
+          if (contexts !== null) {
+            contexts.push(context, changedBits);
+          } else {
+            contexts = [context, changedBits];
+          }
+        }
+      }
+    }
+    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) {
   if (!enableLazyContextPropagation) {
     return false;
@@ -442,6 +709,9 @@ export function readContext<T>(
         // TODO: This is an old field. Delete it.
         responders: null,
       };
+      if (enableLazyContextPropagation) {
+        currentlyRenderingFiber.flags |= NeedsPropagation;
+      }
     } else {
       // Append a new context item.
       lastContextDependency = lastContextDependency.next = contextItem;
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 602eadd6b010..0e6ed587b8dd 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 import type {
   Fiber,
   ContextDependency,
@@ -33,6 +33,11 @@ import {
   mergeLanes,
   pickArbitraryLane,
 } from './ReactFiberLane.old';
+import {
+  NoFlags,
+  DidPropagateContext,
+  NeedsPropagation,
+} from './ReactFiberFlags';
 
 import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
@@ -195,6 +200,37 @@ export function propagateContextChange<T>(
   changedBits: number,
   renderLanes: Lanes,
 ): void {
+  if (enableLazyContextPropagation) {
+    // 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, changedBits],
+      renderLanes,
+      forcePropagateEntireTree,
+    );
+  } else {
+    propagateContextChange_eager(
+      workInProgress,
+      context,
+      changedBits,
+      renderLanes,
+    );
+  }
+}
+
+function propagateContextChange_eager<T>(
+  workInProgress: Fiber,
+  context: ReactContext<T>,
+  changedBits: number,
+  renderLanes: Lanes,
+): void {
+  // Only used by eager implemenation
+  if (enableLazyContextPropagation) {
+    return;
+  }
   let fiber = workInProgress.child;
   if (fiber !== null) {
     // Set the return pointer of the child to the work-in-progress fiber.
@@ -216,45 +252,32 @@ export function propagateContextChange<T>(
           (dependency.observedBits & changedBits) !== 0
         ) {
           // Match! Schedule an update on this fiber.
-
-          if (enableLazyContextPropagation) {
-            // In the lazy implemenation, 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.
-          } else {
-            if (fiber.tag === ClassComponent) {
-              // Schedule a force update on the work-in-progress.
-              const lane = pickArbitraryLane(renderLanes);
-              const update = createUpdate(NoTimestamp, lane);
-              update.tag = ForceUpdate;
-              // TODO: Because we don't have a work-in-progress, this will add the
-              // update to the current fiber, too, which means it will persist even if
-              // this render is thrown away. Since it's a race condition, not sure it's
-              // worth fixing.
-
-              // Inlined `enqueueUpdate` to remove interleaved update check
-              const updateQueue = fiber.updateQueue;
-              if (updateQueue === null) {
-                // Only occurs if the fiber has been unmounted.
+          if (fiber.tag === ClassComponent) {
+            // Schedule a force update on the work-in-progress.
+            const lane = pickArbitraryLane(renderLanes);
+            const update = createUpdate(NoTimestamp, lane);
+            update.tag = ForceUpdate;
+            // TODO: Because we don't have a work-in-progress, this will add the
+            // update to the current fiber, too, which means it will persist even if
+            // this render is thrown away. Since it's a race condition, not sure it's
+            // worth fixing.
+
+            // Inlined `enqueueUpdate` to remove interleaved update check
+            const updateQueue = fiber.updateQueue;
+            if (updateQueue === null) {
+              // Only occurs if the fiber has been unmounted.
+            } else {
+              const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
+              const pending = sharedQueue.pending;
+              if (pending === null) {
+                // This is the first update. Create a circular list.
+                update.next = update;
               } else {
-                const sharedQueue: SharedQueue<any> = (updateQueue: any).shared;
-                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.next = pending.next;
+                pending.next = update;
               }
+              sharedQueue.pending = update;
             }
-            // Mark the updated lanes on the list, too.
-            list.lanes = mergeLanes(list.lanes, renderLanes);
           }
 
           fiber.lanes = mergeLanes(fiber.lanes, renderLanes);
@@ -264,6 +287,9 @@ export function propagateContextChange<T>(
           }
           scheduleWorkOnParentPath(fiber.return, renderLanes);
 
+          // Mark the updated lanes on the list, too.
+          list.lanes = mergeLanes(list.lanes, renderLanes);
+
           // Since we already found a match, we can stop traversing the
           // dependency list.
           break;
@@ -328,6 +354,247 @@ export function propagateContextChange<T>(
   }
 }
 
+function propagateContextChanges<T>(
+  workInProgress: Fiber,
+  contexts: Array<any>,
+  renderLanes: Lanes,
+  forcePropagateEntireTree: boolean,
+): void {
+  // Only used by lazy implemenation
+  if (!enableLazyContextPropagation) {
+    return;
+  }
+  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 += 2) {
+          const context: ReactContext<T> = contexts[i];
+          const changedBits: number = contexts[i + 1];
+          // Check if the context matches.
+          // TODO: Compare selected values to bail out early.
+          if (
+            dependency.context === context &&
+            (dependency.observedBits & changedBits) !== 0
+          ) {
+            // Match! Schedule an update on this fiber.
+
+            // In the lazy implemenation, 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);
+            }
+            scheduleWorkOnParentPath(consumer.return, renderLanes);
+
+            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 (
+      enableSuspenseServerRenderer &&
+      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;
+      invariant(
+        parentSuspense !== null,
+        '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.
+      scheduleWorkOnParentPath(parentSuspense, renderLanes);
+      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,
+) {
+  if (!enableLazyContextPropagation) {
+    return;
+  }
+
+  // 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 = 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;
+      invariant(
+        currentParent !== null,
+        'Should have a current fiber. This is a bug in React.',
+      );
+      const oldProps = currentParent.memoizedProps;
+      if (oldProps !== null) {
+        const providerType: ReactProviderType<any> = parent.type;
+        const context: ReactContext<any> = providerType._context;
+
+        const newProps = parent.pendingProps;
+        const newValue = newProps.value;
+
+        const oldValue = oldProps.value;
+
+        const changedBits = calculateChangedBits(context, newValue, oldValue);
+        if (changedBits !== 0) {
+          if (contexts !== null) {
+            contexts.push(context, changedBits);
+          } else {
+            contexts = [context, changedBits];
+          }
+        }
+      }
+    }
+    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) {
   if (!enableLazyContextPropagation) {
     return false;
@@ -442,6 +709,9 @@ export function readContext<T>(
         // TODO: This is an old field. Delete it.
         responders: null,
       };
+      if (enableLazyContextPropagation) {
+        currentlyRenderingFiber.flags |= NeedsPropagation;
+      }
     } else {
       // Append a new context item.
       lastContextDependency = lastContextDependency.next = contextItem;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 9ff0715f1621..ba5a81ecccbf 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -38,6 +38,7 @@ import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -60,6 +61,7 @@ import {
   isAlreadyFailedLegacyErrorBoundary,
   pingSuspendedRoot,
 } from './ReactFiberWorkLoop.new';
+import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.new';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
 import {markComponentSuspended} from './SchedulingProfiler';
@@ -194,6 +196,23 @@ function throwException(
     typeof value === 'object' &&
     typeof value.then === 'function'
   ) {
+    if (enableLazyContextPropagation) {
+      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,
+        );
+      }
+    }
+
     // This is a wakeable.
     const wakeable: Wakeable = (value: any);
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index da0d90f057f6..baa807e180dd 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -38,6 +38,7 @@ import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
+  enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -60,6 +61,7 @@ import {
   isAlreadyFailedLegacyErrorBoundary,
   pingSuspendedRoot,
 } from './ReactFiberWorkLoop.old';
+import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.old';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
 import {markComponentSuspended} from './SchedulingProfiler';
@@ -194,6 +196,23 @@ function throwException(
     typeof value === 'object' &&
     typeof value.then === 'function'
   ) {
+    if (enableLazyContextPropagation) {
+      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,
+        );
+      }
+    }
+
     // This is a wakeable.
     const wakeable: Wakeable = (value: any);
 
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index bdc89014ad64..7d72ea717d76 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -3,6 +3,11 @@ let ReactNoop;
 let Scheduler;
 let useState;
 let useContext;
+let Suspense;
+let SuspenseList;
+let getCacheForType;
+let caches;
+let seededCache;
 
 describe('ReactLazyContextPropagation', () => {
   beforeEach(() => {
@@ -13,17 +18,148 @@ describe('ReactLazyContextPropagation', () => {
     Scheduler = require('scheduler');
     useState = React.useState;
     useContext = React.useContext;
+    Suspense = React.Suspense;
+    SuspenseList = React.unstable_SuspenseList;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    caches = [];
+    seededCache = null;
   });
 
+  // NOTE: These tests are not specific to the lazy propagation (as opposed to
+  // eager propagation). The behavior should be the same in both
+  // implementations. These are tests that are more relevant to the lazy
+  // propagation implementation, though.
+
+  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.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(text);
     return text;
   }
 
-  // NOTE: These tests are not specific to the lazy propagation (as opposed to
-  // eager propagation). The behavior should be the same in both
-  // implementations. These are tests that are more relevant to the lazy
-  // propagation implementation, though.
+  // function AsyncText({text, showVersion}) {
+  //   const version = readText(text);
+  //   const fullText = showVersion ? `${text} [v${version}]` : text;
+  //   Scheduler.unstable_yieldValue(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);
+  //   }
+  // }
 
   test(
     'context change should prevent bailout of memoized component (useMemo -> ' +
@@ -203,4 +339,584 @@ describe('ReactLazyContextPropagation', () => {
     expect(Scheduler).toHaveYielded(['Consumer']);
     expect(root).toMatchRenderedOutput('0');
   });
+
+  // @gate enableCache
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      // Intentionally not wrapping in startTransition, so that the fallback
+      // the fallback displays despite this being a refresh.
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
+    expect(root).toMatchRenderedOutput('Loading...B');
+
+    await ReactNoop.act(async () => {
+      await resolveText('B');
+    });
+    expect(Scheduler).toHaveYielded(['B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate enableCache
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A', 'A']);
+    expect(root).toMatchRenderedOutput('AAA');
+
+    await ReactNoop.act(async () => {
+      // Intentionally not wrapping in startTransition, so that the fallback
+      // the fallback displays despite this being a refresh.
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
+    expect(root).toMatchRenderedOutput('Loading...B');
+
+    await ReactNoop.act(async () => {
+      await resolveText('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BBB');
+  });
+
+  // @gate enableCache
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      // Intentionally not wrapping in startTransition, so that the fallback
+      // the fallback displays despite this being a refresh.
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
+    expect(root).toMatchRenderedOutput('Loading...B');
+
+    await ReactNoop.act(async () => {
+      await resolveText('B');
+    });
+    expect(Scheduler).toHaveYielded(['B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate experimental
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate experimental
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A', 'A']);
+    expect(root).toMatchRenderedOutput('AAA');
+
+    await ReactNoop.act(async () => {
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B', 'B']);
+    expect(root).toMatchRenderedOutput('BBB');
+  });
+
+  // @gate enableCache
+  // @gate experimental
+  test('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">
+            <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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate experimental
+  // @gate enableCache
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await ReactNoop.act(async () => {
+      await resolveText('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  // @gate experimental
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
+
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await ReactNoop.act(async () => {
+      setContext('B');
+    });
+    expect(Scheduler).toHaveYielded(['B', 'B']);
+    expect(root).toMatchRenderedOutput('BB');
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index 3f7f4f992955..43c1e0033c2f 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -689,6 +689,7 @@ describe('ReactNewContext', () => {
         ]);
       });
 
+      // @gate !enableLazyContextPropagation
       it('can skip parents with bitmask bailout while updating their children', () => {
         const Context = React.createContext({foo: 0, bar: 0}, (a, b) => {
           let result = 0;
@@ -1077,10 +1078,13 @@ describe('ReactNewContext', () => {
 
       // Update
       ReactNoop.render(<App value={2} />);
-      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
-        'calculateChangedBits: Expected the return value to be a 31-bit ' +
-          'integer. Instead received: 4294967295',
-      );
+
+      if (gate(flags => !flags.enableLazyContextPropagation)) {
+        expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
+          'calculateChangedBits: Expected the return value to be a 31-bit ' +
+            'integer. Instead received: 4294967295',
+        );
+      }
     });
 
     it('warns if no value prop provided', () => {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index c29a136a1e1e..fc89fb5ca39b 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -374,5 +374,7 @@
   "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."
+  "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."
 }

From f04bcb8139cfa341640ea875c2eae15523ae9cd9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 7 Mar 2021 11:20:01 -0600
Subject: [PATCH 0293/1603] [Bugfix] Reset `subtreeFlags` in
 `resetWorkInProgress` (#20948)

* Add failing regression test

Based on #20932

Co-Authored-By: Dan Abramov <dan.abramov@gmail.com>

* Reset `subtreeFlags` in `resetWorkInProgress`

Alternate fix to #20942

There was already a TODO to make this change, but at the time I left it,
I couldn't think of a way that it would actually cause a bug, and I was
hesistant to change something without fully understanding the
ramifications. This was during a time when we were hunting down a
different bug, so we were especially risk averse.

What I should have done in retrospect is put the change behind a flag
and tried rolling it out once the other bug had been flushed out.

OTOH, now we have a regression test, which wouldn't have otherwise, and
the bug it caused rarely fired in production.

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 .../__tests__/ReactWrongReturnPointer-test.js | 189 ++++++++++++++++++
 .../react-reconciler/src/ReactFiber.new.js    |   5 +-
 .../react-reconciler/src/ReactFiber.old.js    |   5 +-
 3 files changed, 191 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index 9329a2aa34fc..bb3e040cbeb6 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -9,12 +9,146 @@
 
 let React;
 let ReactNoop;
+let Scheduler;
+let Suspense;
+let SuspenseList;
+let getCacheForType;
+let caches;
+let seededCache;
 
 beforeEach(() => {
   React = require('react');
   ReactNoop = require('react-noop-renderer');
+  Scheduler = require('scheduler');
+
+  Suspense = React.Suspense;
+  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.unstable_yieldValue(`Suspend! [${text}]`);
+        throw record.value;
+      case 'rejected':
+        Scheduler.unstable_yieldValue(`Error! [${text}]`);
+        throw record.value;
+      case 'resolved':
+        return textCache.version;
+    }
+  } else {
+    Scheduler.unstable_yieldValue(`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.unstable_yieldValue(text);
+  return <span prop={text} />;
+}
+
+function AsyncText({text, showVersion}) {
+  const version = readText(text);
+  const fullText = showVersion ? `${text} [v${version}]` : text;
+  Scheduler.unstable_yieldValue(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;
+
 // Don't feel too guilty if you have to delete this test.
 // @gate dfsEffectsRefactor
 // @gate __DEV__
@@ -59,3 +193,58 @@ test('warns in DEV if return pointer is inconsistent', async () => {
     'Internal React error: Return pointer is inconsistent with parent.',
   );
 });
+
+// @gate experimental
+// @gate enableCache
+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">
+        <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 ReactNoop.act(async () => {
+    root.render(<App />);
+  });
+  expect(Scheduler).toHaveYielded([
+    'Suspend! [0]',
+    'Loading Async...',
+    'Loading Tail...',
+  ]);
+  await ReactNoop.act(async () => {
+    resolveText(0);
+  });
+  expect(Scheduler).toHaveYielded([0, 'Tail']);
+  await ReactNoop.act(async () => {
+    setAsyncText(x => x + 1);
+  });
+  expect(Scheduler).toHaveYielded([
+    'Suspend! [1]',
+    'Loading Async...',
+    'Suspend! [1]',
+    'Loading Async...',
+  ]);
+});
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 5a56fb0592c4..3c49e56431c3 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -388,10 +388,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = current.lanes;
 
     workInProgress.child = current.child;
-    // TODO: `subtreeFlags` should be reset to NoFlags, like we do in
-    // `createWorkInProgress`. Nothing reads this until the complete phase,
-    // currently, but it might in the future, and we should be consistent.
-    workInProgress.subtreeFlags = current.subtreeFlags;
+    workInProgress.subtreeFlags = NoFlags;
     workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
     workInProgress.memoizedState = current.memoizedState;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 8536c024d66e..e98634b37cfd 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -388,10 +388,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
     workInProgress.lanes = current.lanes;
 
     workInProgress.child = current.child;
-    // TODO: `subtreeFlags` should be reset to NoFlags, like we do in
-    // `createWorkInProgress`. Nothing reads this until the complete phase,
-    // currently, but it might in the future, and we should be consistent.
-    workInProgress.subtreeFlags = current.subtreeFlags;
+    workInProgress.subtreeFlags = NoFlags;
     workInProgress.deletions = null;
     workInProgress.memoizedProps = current.memoizedProps;
     workInProgress.memoizedState = current.memoizedState;

From d74559746c03d9f620e4fd338c70ce319070e0be Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Sun, 7 Mar 2021 18:43:29 -0500
Subject: [PATCH 0294/1603] Use update lane priority to set pending updates on
 roots (#20918)

---
 .../src/ReactFiberWorkLoop.new.js             | 21 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.old.js             | 21 +++++++++++++++++++
 2 files changed, 42 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 03cb122aca47..0e4a3aad8d71 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -598,6 +598,27 @@ export function scheduleUpdateOnFiber(
         flushSyncCallbackQueue();
       }
     }
+  } else if (decoupleUpdatePriorityFromScheduler) {
+    const updateLanePriority = getCurrentUpdateLanePriority();
+
+    // Schedule a discrete update but only if it's not Sync.
+    if (
+      (executionContext & DiscreteEventContext) !== NoContext &&
+      // Only updates at user-blocking priority or greater are considered
+      // discrete, even inside a discrete event.
+      updateLanePriority === InputDiscreteLanePriority
+    ) {
+      // This is the result of a discrete event. Track the lowest priority
+      // discrete update per root so we can flush them early, if needed.
+      if (rootsWithPendingDiscreteUpdates === null) {
+        rootsWithPendingDiscreteUpdates = new Set([root]);
+      } else {
+        rootsWithPendingDiscreteUpdates.add(root);
+      }
+    }
+    // Schedule other updates after in case the callback is sync.
+    ensureRootIsScheduled(root, eventTime);
+    schedulePendingInteractions(root, lane);
   } else {
     // Schedule a discrete update but only if it's not Sync.
     if (
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d3eeb26d11cb..77bd914eaa5f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -598,6 +598,27 @@ export function scheduleUpdateOnFiber(
         flushSyncCallbackQueue();
       }
     }
+  } else if (decoupleUpdatePriorityFromScheduler) {
+    const updateLanePriority = getCurrentUpdateLanePriority();
+
+    // Schedule a discrete update but only if it's not Sync.
+    if (
+      (executionContext & DiscreteEventContext) !== NoContext &&
+      // Only updates at user-blocking priority or greater are considered
+      // discrete, even inside a discrete event.
+      updateLanePriority === InputDiscreteLanePriority
+    ) {
+      // This is the result of a discrete event. Track the lowest priority
+      // discrete update per root so we can flush them early, if needed.
+      if (rootsWithPendingDiscreteUpdates === null) {
+        rootsWithPendingDiscreteUpdates = new Set([root]);
+      } else {
+        rootsWithPendingDiscreteUpdates.add(root);
+      }
+    }
+    // Schedule other updates after in case the callback is sync.
+    ensureRootIsScheduled(root, eventTime);
+    schedulePendingInteractions(root, lane);
   } else {
     // Schedule a discrete update but only if it's not Sync.
     if (

From cb8857222789136f99b56c8109863fdee7cab691 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Mar 2021 11:09:55 -0500
Subject: [PATCH 0295/1603] Improve DevTools Profiler commit-selector UX
 (#20943)

* Improve DevTools Profiler commit-selector UX

1. Use natural log of durations (rather than linear) when calculating bar height. This reduces the impact of one (or few) outlier times on more common smaller durations. (Continue to use linear for bar color though.)
2. Decrease the minimum bar height to make the differences in height more noticeable.
3. Add a background hover highlight to increase contrast.
4. Add hover tooltip with commit duration and timestamp.
---
 .../views/Profiler/SnapshotCommitList.js      | 49 ++++++++++++++-----
 .../views/Profiler/SnapshotCommitListItem.css |  5 +-
 .../views/Profiler/SnapshotCommitListItem.js  | 22 +++++++--
 .../views/Profiler/SnapshotSelector.css       |  2 +-
 .../src/devtools/views/Profiler/Tooltip.css   |  1 +
 5 files changed, 60 insertions(+), 19 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 0d309f700644..b4b42ddc8221 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -13,6 +13,8 @@ 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';
 
@@ -24,6 +26,7 @@ export type ItemData = {|
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
   selectCommitIndex: (index: number) => void,
+  setHoveredCommitIndex: (index: number) => void,
   startCommitDrag: (newDragState: DragState) => void,
 |};
 
@@ -166,6 +169,10 @@ function List({
     }
   }, [dragState]);
 
+  const [hoveredCommitIndex, setHoveredCommitIndex] = useState<number | null>(
+    null,
+  );
+
   // Pass required contextual data down to the ListItem renderer.
   const itemData = useMemo<ItemData>(
     () => ({
@@ -176,6 +183,7 @@ function List({
       selectedCommitIndex,
       selectedFilteredCommitIndex,
       selectCommitIndex,
+      setHoveredCommitIndex,
       startCommitDrag: setDragState,
     }),
     [
@@ -186,22 +194,37 @@ function List({
       selectedCommitIndex,
       selectedFilteredCommitIndex,
       selectCommitIndex,
+      setHoveredCommitIndex,
     ],
   );
 
+  let tooltipLabel = null;
+  if (hoveredCommitIndex !== null) {
+    const commitDuration = commitDurations[hoveredCommitIndex];
+    const commitTime = commitTimes[hoveredCommitIndex];
+    tooltipLabel = `${formatDuration(commitDuration)}ms at ${formatTime(
+      commitTime,
+    )}s`;
+  }
+
   return (
-    <div ref={divRef} style={{height, width}}>
-      <FixedSizeList
-        className={styles.List}
-        layout="horizontal"
-        height={height}
-        itemCount={filteredCommitIndices.length}
-        itemData={itemData}
-        itemSize={itemSize}
-        ref={(listRef: any) /* Flow bug? */}
-        width={width}>
-        {SnapshotCommitListItem}
-      </FixedSizeList>
-    </div>
+    <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
index dc6592a93170..cfcc6b7a64ed 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
@@ -7,10 +7,13 @@
   display: flex;
   align-items: flex-end;
 }
+.Outer:hover {
+  background-color: var(--color-background);
+}
 
 .Inner {
   width: 100%;
-  min-height: 5px;
+  min-height: 2px;
   background-color: var(--color-commit-did-not-render-fill);
   color: var(--color-commit-did-not-render-fill-text);
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
index e8399a09bb37..5dccf356212c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -31,6 +31,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     maxDuration,
     selectedCommitIndex,
     selectCommitIndex,
+    setHoveredCommitIndex,
     startCommitDrag,
   } = itemData;
 
@@ -39,9 +40,21 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
-  // Guard against commits with duration 0
-  const percentage =
+  // Use natural log 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.log(commitDuration) / Math.log(maxDuration)),
+    ) || 0;
+
+  // Use a linear scale for color.
+  // This gives some visual contrast between cheaper and more expensive commits
+  // and somewhat compensates for the log scale height.
+  const colorScale =
     Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
+
   const isSelected = selectedCommitIndex === index;
 
   // Leave a 1px gap between snapshots
@@ -62,6 +75,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     <div
       className={styles.Outer}
       onMouseDown={handleMouseDown}
+      onMouseEnter={() => setHoveredCommitIndex(index)}
       style={{
         ...style,
         width,
@@ -75,9 +89,9 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
       <div
         className={styles.Inner}
         style={{
-          height: `${Math.round(percentage * 100)}%`,
+          height: `${Math.round(heightScale * 100)}%`,
           backgroundColor:
-            percentage > 0 ? getGradientColor(percentage) : undefined,
+            commitDuration > 0 ? getGradientColor(colorScale) : undefined,
         }}
       />
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
index e4f8aec57d4e..c708adcffdbc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
@@ -7,7 +7,7 @@
   height: 100%;
   min-width: 30px;
   margin-left: 0.25rem;
-  overflow: hidden;
+  overflow: visible;
 }
 .Commits:focus {
   outline: none;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
index 2d2bbaf34ea3..cbefd4e8598a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
@@ -9,6 +9,7 @@
   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;
 }

From e7d2a558ad8e664df36a70b0a86a85f925d1418f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Mar 2021 11:33:14 -0500
Subject: [PATCH 0296/1603] DevTools flushes updated passive warning/error info
 after delay (#20931)

* DevTools flushes updated passive warning/error info after delay
Previously this information was not flushed until the next commit, but this provides a worse user experience if the next commit is really delayed. Instead, the backend now flushes only the warning/error counts after a delay. As a safety, if there are already any pending operations in the queue, we bail.

Co-authored-by: eps1lon <silbermann.sebastian@gmail.com>
---
 .../src/__tests__/store-test.js               | 126 ++++++++++++++----
 .../src/__tests__/utils.js                    |  19 ++-
 .../src/backend/renderer.js                   |  86 ++++++++++--
 3 files changed, 182 insertions(+), 49 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index d5b9c3cbc921..1a283fe120ef 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -1075,40 +1075,110 @@ describe('Store', () => {
       `);
     });
 
-    // This is not great, but it seems safer than potentially flushing between commits.
-    // Our logic for determining how to handle e.g. suspended trees or error boundaries
-    // is built on the assumption that we're evaluating the results of a commit, not an in-progress render.
-    it('during passive get counted (but not until the next commit)', () => {
-      function Example() {
-        React.useEffect(() => {
-          console.error('test-only: passive error');
-          console.warn('test-only: passive warning');
-        });
-        return null;
+    describe('during passive effects', () => {
+      function flushPendingBridgeOperations() {
+        jest.runOnlyPendingTimers();
       }
-      const container = document.createElement('div');
-
-      withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example />, container));
-      });
 
-      expect(store).toMatchInlineSnapshot(`
-        [root]
-            <Example>
-      `);
+      // Gross abstraction around pending passive warning/error delay.
+      function flushPendingPassiveErrorAndWarningCounts() {
+        jest.advanceTimersByTime(1000);
+      }
 
-      withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example rerender={1} />, container));
+      it('are counted (after a delay)', () => {
+        function Example() {
+          React.useEffect(() => {
+            console.error('test-only: passive error');
+            console.warn('test-only: passive warning');
+          });
+          return null;
+        }
+        const container = document.createElement('div');
+
+        withErrorsOrWarningsIgnored(['test-only:'], () => {
+          act(() => {
+            ReactDOM.render(<Example />, container);
+          }, false);
+        });
+        flushPendingBridgeOperations();
+        expect(store).toMatchInlineSnapshot(`
+          [root]
+              <Example>
+        `);
+
+        // After a delay, passive effects should be committed as well
+        act(flushPendingPassiveErrorAndWarningCounts, false);
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 1, ⚠ 1
+          [root]
+              <Example> ✕⚠
+        `);
+
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(store).toMatchInlineSnapshot(``);
       });
 
-      expect(store).toMatchInlineSnapshot(`
-        ✕ 1, ⚠ 1
-        [root]
-            <Example> ✕⚠
-      `);
+      it('are flushed early when there is a new commit', () => {
+        function Example() {
+          React.useEffect(() => {
+            console.error('test-only: passive error');
+            console.warn('test-only: passive warning');
+          });
+          return null;
+        }
+
+        function Noop() {
+          return null;
+        }
+
+        const container = document.createElement('div');
+
+        withErrorsOrWarningsIgnored(['test-only:'], () => {
+          act(() => {
+            ReactDOM.render(
+              <>
+                <Example />
+              </>,
+              container,
+            );
+          }, false);
+          flushPendingBridgeOperations();
+          expect(store).toMatchInlineSnapshot(`
+            [root]
+                <Example>
+          `);
+
+          // Before warnings and errors have flushed, flush another commit.
+          act(() => {
+            ReactDOM.render(
+              <>
+                <Example />
+                <Noop />
+              </>,
+              container,
+            );
+          }, false);
+          flushPendingBridgeOperations();
+          expect(store).toMatchInlineSnapshot(`
+            ✕ 1, ⚠ 1
+            [root]
+                <Example> ✕⚠
+                <Noop>
+          `);
+        });
 
-      act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(store).toMatchInlineSnapshot(``);
+        // After a delay, passive effects should be committed as well
+        act(flushPendingPassiveErrorAndWarningCounts, false);
+        expect(store).toMatchInlineSnapshot(`
+          ✕ 2, ⚠ 2
+          [root]
+              <Example> ✕⚠
+              <Noop>
+        `);
+
+        act(() => ReactDOM.unmountComponentAtNode(container));
+        expect(store).toMatchInlineSnapshot(``);
+      });
     });
 
     it('from react get counted', () => {
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 2fb0664a2485..61a6acc604a7 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -14,7 +14,10 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 import type {ProfilingDataFrontend} from 'react-devtools-shared/src/devtools/views/Profiler/types';
 import type {ElementType} from 'react-devtools-shared/src/types';
 
-export function act(callback: Function): void {
+export function act(
+  callback: Function,
+  recursivelyFlush: boolean = true,
+): void {
   const {act: actTestRenderer} = require('react-test-renderer');
   const {act: actDOM} = require('react-dom/test-utils');
 
@@ -24,13 +27,15 @@ export function act(callback: Function): void {
     });
   });
 
-  // Flush Bridge operations
-  while (jest.getTimerCount() > 0) {
-    actDOM(() => {
-      actTestRenderer(() => {
-        jest.runAllTimers();
+  if (recursivelyFlush) {
+    // Flush Bridge operations
+    while (jest.getTimerCount() > 0) {
+      actDOM(() => {
+        actTestRenderer(() => {
+          jest.runAllTimers();
+        });
       });
-    });
+    }
   }
 }
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c5f6932234a8..b23b59f73d84 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -626,6 +626,14 @@ export function attach(
 
     // If this Fiber is currently being inspected, mark it as needing an udpate as well.
     updateMostRecentlyInspectedElementIfNecessary(fiberID);
+
+    // Passive effects may trigger errors or warnings too;
+    // In this case, we should wait until the rest of the passive effects have run,
+    // but we shouldn't wait until the next commit because that might be a long time.
+    // This would also cause "tearing" between an inspected Component and the tree view.
+    // Then again we don't want to flush too soon because this could be an error during async rendering.
+    // Use a debounce technique to ensure that we'll eventually flush.
+    flushPendingErrorsAndWarningsAfterDelay();
   }
 
   // Patching the console enables DevTools to do a few useful things:
@@ -1198,10 +1206,12 @@ export function attach(
     }
   }
 
-  const pendingOperations: Array<number> = [];
+  type OperationsArray = Array<number>;
+
+  const pendingOperations: OperationsArray = [];
   const pendingRealUnmountedIDs: Array<number> = [];
   const pendingSimulatedUnmountedIDs: Array<number> = [];
-  let pendingOperationsQueue: Array<Array<number>> | null = [];
+  let pendingOperationsQueue: Array<OperationsArray> | null = [];
   const pendingStringTable: Map<string, number> = new Map();
   let pendingStringTableLength: number = 0;
   let pendingUnmountedRootID: number | null = null;
@@ -1218,6 +1228,61 @@ export function attach(
     pendingOperations.push(op);
   }
 
+  function flushOrQueueOperations(operations: OperationsArray): void {
+    if (pendingOperationsQueue !== null) {
+      pendingOperationsQueue.push(operations);
+    } else {
+      hook.emit('operations', operations);
+    }
+  }
+
+  let flushPendingErrorsAndWarningsAfterDelayTimeoutID = null;
+
+  function clearPendingErrorsAndWarningsAfterDelay() {
+    if (flushPendingErrorsAndWarningsAfterDelayTimeoutID !== null) {
+      clearTimeout(flushPendingErrorsAndWarningsAfterDelayTimeoutID);
+      flushPendingErrorsAndWarningsAfterDelayTimeoutID = null;
+    }
+  }
+
+  function flushPendingErrorsAndWarningsAfterDelay() {
+    clearPendingErrorsAndWarningsAfterDelay();
+
+    flushPendingErrorsAndWarningsAfterDelayTimeoutID = setTimeout(() => {
+      flushPendingErrorsAndWarningsAfterDelayTimeoutID = null;
+
+      if (pendingOperations.length > 0) {
+        // On the off chance that something else has pushed pending operations,
+        // we should bail on warnings; it's probably not safe to push midway.
+        return;
+      }
+
+      recordPendingErrorsAndWarnings();
+
+      if (pendingOperations.length === 0) {
+        // No warnings or errors to flush; we can bail out early here too.
+        return;
+      }
+
+      // We can create a smaller operations array than flushPendingEvents()
+      // because we only need to flush warning and error counts.
+      // Only a few pieces of fixed information are required up front.
+      const operations: OperationsArray = new Array(
+        3 + pendingOperations.length,
+      );
+      operations[0] = rendererID;
+      operations[1] = currentRootID;
+      operations[2] = 0; // String table size
+      for (let j = 0; j < pendingOperations.length; j++) {
+        operations[3 + j] = pendingOperations[j];
+      }
+
+      flushOrQueueOperations(operations);
+
+      pendingOperations.length = 0;
+    }, 1000);
+  }
+
   function reevaluateErrorsAndWarnings() {
     fibersWithChangedErrorOrWarningCounts.clear();
     fiberToErrorsMap.forEach((countMap, fiberID) => {
@@ -1230,6 +1295,8 @@ export function attach(
   }
 
   function recordPendingErrorsAndWarnings() {
+    clearPendingErrorsAndWarningsAfterDelay();
+
     fibersWithChangedErrorOrWarningCounts.forEach(fiberID => {
       const fiber = idToFiberMap.get(fiberID);
       if (fiber != null) {
@@ -1319,7 +1386,7 @@ export function attach(
     // Which in turn enables fiber props, states, and hooks to be inspected.
     let i = 0;
     operations[i++] = rendererID;
-    operations[i++] = currentRootID; // Use this ID in case the root was unmounted!
+    operations[i++] = currentRootID;
 
     // Now fill in the string table.
     // [stringTableLength, str1Length, ...str1, str2Length, ...str2, ...]
@@ -1366,18 +1433,9 @@ export function attach(
     i += pendingOperations.length;
 
     // Let the frontend know about tree operations.
-    // The first value in this array will identify which root it corresponds to,
-    // so we do no longer need to dispatch a separate root-committed event.
-    if (pendingOperationsQueue !== null) {
-      // Until the frontend has been connected, store the tree operations.
-      // This will let us avoid walking the tree later when the frontend connects,
-      // and it enables the Profiler's reload-and-profile functionality to work as well.
-      pendingOperationsQueue.push(operations);
-    } else {
-      // If we've already connected to the frontend, just pass the operations through.
-      hook.emit('operations', operations);
-    }
+    flushOrQueueOperations(operations);
 
+    // Reset all of the pending state now that we've told the frontend about it.
     pendingOperations.length = 0;
     pendingRealUnmountedIDs.length = 0;
     pendingSimulatedUnmountedIDs.length = 0;

From ca15606d81374d85424e7dd4a48a8372d6c46701 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 8 Mar 2021 18:35:27 +0100
Subject: [PATCH 0297/1603] chore(build):  Ensure experimental builds exists on
 windows (#20933)

* chore(build): Throw if `rsync` fails

* did not get cwrsync to work
---
 scripts/rollup/build-all-release-channels.js | 22 +++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index badd6f7c9ff0..279d95747593 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -64,7 +64,7 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   // will have already removed conflicting files.
   //
   // In CI, merging is handled automatically by CircleCI's workspace feature.
-  spawnSync('rsync', ['-ar', experimentalDir + '/', stableDir + '/']);
+  mergeDirsSync(experimentalDir + '/', stableDir + '/');
 
   // Now restore the combined directory back to its original name
   // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
@@ -186,3 +186,23 @@ function updateTheReactVersionThatDevToolsReads(version) {
     `export default '${version}';\n`
   );
 }
+
+/**
+ * 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);
+    }
+  }
+}

From 5fe091c778f61fd81d226e65c0bc094c6380c88a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Mar 2021 14:02:09 -0500
Subject: [PATCH 0298/1603] Swap log with cbrt for commit bar height (#20952)

---
 .../src/devtools/views/Profiler/SnapshotCommitListItem.js   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
index 5dccf356212c..6dca200696d9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -40,18 +40,18 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const commitDuration = commitDurations[index];
   const commitTime = commitTimes[index];
 
-  // Use natural log for bar height.
+  // 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.log(commitDuration) / Math.log(maxDuration)),
+      Math.max(0, Math.cbrt(commitDuration) / 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 log scale height.
+  // and somewhat compensates for the cbrt scale height.
   const colorScale =
     Math.min(1, Math.max(0, commitDuration / maxDuration)) || 0;
 

From e89d74ee679bafe09213ef66394dd530d2168787 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Mon, 8 Mar 2021 09:16:30 -0700
Subject: [PATCH 0299/1603] Remove decoupleUpdatePriorityFromScheduler

---
 .../src/events/ReactDOMEventListener.js       |  26 +--
 .../src/ReactFiberHooks.new.js                |  86 +++-----
 .../src/ReactFiberHooks.old.js                |  86 +++-----
 .../src/ReactFiberWorkLoop.new.js             | 196 +++++-------------
 .../src/ReactFiberWorkLoop.old.js             | 196 +++++-------------
 .../src/SchedulerWithReactIntegration.new.js  |  82 +++-----
 .../src/SchedulerWithReactIntegration.old.js  |  82 +++-----
 .../ReactDOMTracing-test.internal.js          |   2 -
 packages/shared/ReactFeatureFlags.js          |   3 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 18 files changed, 226 insertions(+), 542 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index dd7fda27f0a9..e456f88c1e50 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -40,7 +40,6 @@ import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 
 import {
   enableLegacyFBSupport,
-  decoupleUpdatePriorityFromScheduler,
   enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
@@ -177,25 +176,10 @@ function dispatchContinuousEvent(
   container,
   nativeEvent,
 ) {
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousPriority = getCurrentUpdateLanePriority();
-    try {
-      // TODO: Double wrapping is necessary while we decouple Scheduler priority.
-      setCurrentUpdateLanePriority(InputContinuousLanePriority);
-      runWithPriority(
-        UserBlockingPriority,
-        dispatchEvent.bind(
-          null,
-          domEventName,
-          eventSystemFlags,
-          container,
-          nativeEvent,
-        ),
-      );
-    } finally {
-      setCurrentUpdateLanePriority(previousPriority);
-    }
-  } else {
+  const previousPriority = getCurrentUpdateLanePriority();
+  try {
+    // TODO: Double wrapping is necessary while we decouple Scheduler priority.
+    setCurrentUpdateLanePriority(InputContinuousLanePriority);
     runWithPriority(
       UserBlockingPriority,
       dispatchEvent.bind(
@@ -206,6 +190,8 @@ function dispatchContinuousEvent(
         nativeEvent,
       ),
     );
+  } finally {
+    setCurrentUpdateLanePriority(previousPriority);
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index e7e5c3128bea..80fb17d78a67 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -27,7 +27,6 @@ import {
   enableSchedulingProfiler,
   enableNewReconciler,
   enableCache,
-  decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
   enableStrictEffects,
   enableLazyContextPropagation,
@@ -1713,66 +1712,37 @@ function rerenderDeferredValue<T>(value: T): T {
 
 function startTransition(setPending, callback) {
   const priorityLevel = getCurrentPriorityLevel();
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    setCurrentUpdateLanePriority(
-      higherLanePriority(previousLanePriority, InputContinuousLanePriority),
-    );
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  setCurrentUpdateLanePriority(
+    higherLanePriority(previousLanePriority, InputContinuousLanePriority),
+  );
 
-    runWithPriority(
-      priorityLevel < UserBlockingPriority
-        ? UserBlockingPriority
-        : priorityLevel,
-      () => {
-        setPending(true);
-      },
-    );
+  runWithPriority(
+    priorityLevel < UserBlockingPriority ? UserBlockingPriority : priorityLevel,
+    () => {
+      setPending(true);
+    },
+  );
 
-    // TODO: Can remove this. Was only necessary because we used to give
-    // different behavior to transitions without a config object. Now they are
-    // all treated the same.
-    setCurrentUpdateLanePriority(DefaultLanePriority);
+  // TODO: Can remove this. Was only necessary because we used to give
+  // different behavior to transitions without a config object. Now they are
+  // all treated the same.
+  setCurrentUpdateLanePriority(DefaultLanePriority);
 
-    runWithPriority(
-      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
-      () => {
-        const prevTransition = ReactCurrentBatchConfig.transition;
-        ReactCurrentBatchConfig.transition = 1;
-        try {
-          setPending(false);
-          callback();
-        } finally {
-          if (decoupleUpdatePriorityFromScheduler) {
-            setCurrentUpdateLanePriority(previousLanePriority);
-          }
-          ReactCurrentBatchConfig.transition = prevTransition;
-        }
-      },
-    );
-  } else {
-    runWithPriority(
-      priorityLevel < UserBlockingPriority
-        ? UserBlockingPriority
-        : priorityLevel,
-      () => {
-        setPending(true);
-      },
-    );
-
-    runWithPriority(
-      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
-      () => {
-        const prevTransition = ReactCurrentBatchConfig.transition;
-        ReactCurrentBatchConfig.transition = 1;
-        try {
-          setPending(false);
-          callback();
-        } finally {
-          ReactCurrentBatchConfig.transition = prevTransition;
-        }
-      },
-    );
-  }
+  runWithPriority(
+    priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
+    () => {
+      const prevTransition = ReactCurrentBatchConfig.transition;
+      ReactCurrentBatchConfig.transition = 1;
+      try {
+        setPending(false);
+        callback();
+      } finally {
+        setCurrentUpdateLanePriority(previousLanePriority);
+        ReactCurrentBatchConfig.transition = prevTransition;
+      }
+    },
+  );
 }
 
 function mountTransition(): [(() => void) => void, boolean] {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 55dca75656c3..4436ce16707d 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -27,7 +27,6 @@ import {
   enableSchedulingProfiler,
   enableNewReconciler,
   enableCache,
-  decoupleUpdatePriorityFromScheduler,
   enableUseRefAccessWarning,
   enableStrictEffects,
   enableLazyContextPropagation,
@@ -1713,66 +1712,37 @@ function rerenderDeferredValue<T>(value: T): T {
 
 function startTransition(setPending, callback) {
   const priorityLevel = getCurrentPriorityLevel();
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    setCurrentUpdateLanePriority(
-      higherLanePriority(previousLanePriority, InputContinuousLanePriority),
-    );
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  setCurrentUpdateLanePriority(
+    higherLanePriority(previousLanePriority, InputContinuousLanePriority),
+  );
 
-    runWithPriority(
-      priorityLevel < UserBlockingPriority
-        ? UserBlockingPriority
-        : priorityLevel,
-      () => {
-        setPending(true);
-      },
-    );
+  runWithPriority(
+    priorityLevel < UserBlockingPriority ? UserBlockingPriority : priorityLevel,
+    () => {
+      setPending(true);
+    },
+  );
 
-    // TODO: Can remove this. Was only necessary because we used to give
-    // different behavior to transitions without a config object. Now they are
-    // all treated the same.
-    setCurrentUpdateLanePriority(DefaultLanePriority);
+  // TODO: Can remove this. Was only necessary because we used to give
+  // different behavior to transitions without a config object. Now they are
+  // all treated the same.
+  setCurrentUpdateLanePriority(DefaultLanePriority);
 
-    runWithPriority(
-      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
-      () => {
-        const prevTransition = ReactCurrentBatchConfig.transition;
-        ReactCurrentBatchConfig.transition = 1;
-        try {
-          setPending(false);
-          callback();
-        } finally {
-          if (decoupleUpdatePriorityFromScheduler) {
-            setCurrentUpdateLanePriority(previousLanePriority);
-          }
-          ReactCurrentBatchConfig.transition = prevTransition;
-        }
-      },
-    );
-  } else {
-    runWithPriority(
-      priorityLevel < UserBlockingPriority
-        ? UserBlockingPriority
-        : priorityLevel,
-      () => {
-        setPending(true);
-      },
-    );
-
-    runWithPriority(
-      priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
-      () => {
-        const prevTransition = ReactCurrentBatchConfig.transition;
-        ReactCurrentBatchConfig.transition = 1;
-        try {
-          setPending(false);
-          callback();
-        } finally {
-          ReactCurrentBatchConfig.transition = prevTransition;
-        }
-      },
-    );
-  }
+  runWithPriority(
+    priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
+    () => {
+      const prevTransition = ReactCurrentBatchConfig.transition;
+      ReactCurrentBatchConfig.transition = 1;
+      try {
+        setPending(false);
+        callback();
+      } finally {
+        setCurrentUpdateLanePriority(previousLanePriority);
+        ReactCurrentBatchConfig.transition = prevTransition;
+      }
+    },
+  );
 }
 
 function mountTransition(): [(() => void) => void, boolean] {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0e4a3aad8d71..caf3bf579337 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -28,7 +28,6 @@ import {
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
-  decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
@@ -455,10 +454,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     schedulerPriority === UserBlockingSchedulerPriority
   ) {
     lane = findUpdateLane(InputDiscreteLanePriority);
-  } else if (
-    decoupleUpdatePriorityFromScheduler &&
-    getCurrentUpdateLanePriority() !== NoLanePriority
-  ) {
+  } else if (getCurrentUpdateLanePriority() !== NoLanePriority) {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority);
   } else {
@@ -567,10 +563,6 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  // TODO: requestUpdateLanePriority also reads the priority. Pass the
-  // priority as an argument to that function and this one.
-  const priorityLevel = getCurrentPriorityLevel();
-
   if (lane === SyncLane) {
     if (
       // Check if we're inside unbatchedUpdates
@@ -598,7 +590,7 @@ export function scheduleUpdateOnFiber(
         flushSyncCallbackQueue();
       }
     }
-  } else if (decoupleUpdatePriorityFromScheduler) {
+  } else {
     const updateLanePriority = getCurrentUpdateLanePriority();
 
     // Schedule a discrete update but only if it's not Sync.
@@ -619,26 +611,6 @@ export function scheduleUpdateOnFiber(
     // Schedule other updates after in case the callback is sync.
     ensureRootIsScheduled(root, eventTime);
     schedulePendingInteractions(root, lane);
-  } else {
-    // Schedule a discrete update but only if it's not Sync.
-    if (
-      (executionContext & DiscreteEventContext) !== NoContext &&
-      // Only updates at user-blocking priority or greater are considered
-      // discrete, even inside a discrete event.
-      (priorityLevel === UserBlockingSchedulerPriority ||
-        priorityLevel === ImmediateSchedulerPriority)
-    ) {
-      // This is the result of a discrete event. Track the lowest priority
-      // discrete update per root so we can flush them early, if needed.
-      if (rootsWithPendingDiscreteUpdates === null) {
-        rootsWithPendingDiscreteUpdates = new Set([root]);
-      } else {
-        rootsWithPendingDiscreteUpdates.add(root);
-      }
-    }
-    // Schedule other updates after in case the callback is sync.
-    ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, lane);
   }
 
   return root;
@@ -1150,16 +1122,12 @@ export function flushDiscreteUpdates() {
 }
 
 export function deferredUpdates<A>(fn: () => A): A {
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(DefaultLanePriority);
-      return runWithPriority(NormalSchedulerPriority, fn);
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
-    }
-  } else {
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(DefaultLanePriority);
     return runWithPriority(NormalSchedulerPriority, fn);
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
   }
 }
 
@@ -1218,36 +1186,20 @@ export function discreteUpdates<A, B, C, D, R>(
   const prevExecutionContext = executionContext;
   executionContext |= DiscreteEventContext;
 
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(InputDiscreteLanePriority);
-      return runWithPriority(
-        UserBlockingSchedulerPriority,
-        fn.bind(null, a, b, c, d),
-      );
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
-    }
-  } else {
-    try {
-      return runWithPriority(
-        UserBlockingSchedulerPriority,
-        fn.bind(null, a, b, c, d),
-      );
-    } finally {
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(InputDiscreteLanePriority);
+    return runWithPriority(
+      UserBlockingSchedulerPriority,
+      fn.bind(null, a, b, c, d),
+    );
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      resetRenderTimer();
+      flushSyncCallbackQueue();
     }
   }
 }
@@ -1282,68 +1234,39 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   }
   executionContext |= BatchedContext;
 
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(SyncLanePriority);
-      if (fn) {
-        return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
-      } else {
-        return (undefined: $FlowFixMe);
-      }
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
-      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.
-      flushSyncCallbackQueue();
-    }
-  } else {
-    try {
-      if (fn) {
-        return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
-      } else {
-        return (undefined: $FlowFixMe);
-      }
-    } finally {
-      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.
-      flushSyncCallbackQueue();
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(SyncLanePriority);
+    if (fn) {
+      return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
+    } else {
+      return (undefined: $FlowFixMe);
     }
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
+    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.
+    flushSyncCallbackQueue();
   }
 }
 
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(SyncLanePriority);
-      runWithPriority(ImmediateSchedulerPriority, fn);
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(SyncLanePriority);
+    runWithPriority(ImmediateSchedulerPriority, fn);
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
 
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
-    }
-  } else {
-    try {
-      runWithPriority(ImmediateSchedulerPriority, fn);
-    } finally {
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      resetRenderTimer();
+      flushSyncCallbackQueue();
     }
   }
 }
@@ -1954,11 +1877,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
-    let previousLanePriority;
-    if (decoupleUpdatePriorityFromScheduler) {
-      previousLanePriority = getCurrentUpdateLanePriority();
-      setCurrentUpdateLanePriority(SyncLanePriority);
-    }
+    const previousLanePriority = getCurrentUpdateLanePriority();
+    setCurrentUpdateLanePriority(SyncLanePriority);
 
     const prevExecutionContext = executionContext;
     executionContext |= CommitContext;
@@ -2040,7 +1960,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
     executionContext = prevExecutionContext;
 
-    if (decoupleUpdatePriorityFromScheduler && previousLanePriority != null) {
+    if (previousLanePriority != null) {
       // Reset the priority to the previous non-sync value.
       setCurrentUpdateLanePriority(previousLanePriority);
     }
@@ -2183,18 +2103,14 @@ export function flushPassiveEffects(): boolean {
         ? NormalSchedulerPriority
         : pendingPassiveEffectsRenderPriority;
     pendingPassiveEffectsRenderPriority = NoSchedulerPriority;
-    if (decoupleUpdatePriorityFromScheduler) {
-      const previousLanePriority = getCurrentUpdateLanePriority();
-      try {
-        setCurrentUpdateLanePriority(
-          schedulerPriorityToLanePriority(priorityLevel),
-        );
-        return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
-      } finally {
-        setCurrentUpdateLanePriority(previousLanePriority);
-      }
-    } else {
+    const previousLanePriority = getCurrentUpdateLanePriority();
+    try {
+      setCurrentUpdateLanePriority(
+        schedulerPriorityToLanePriority(priorityLevel),
+      );
       return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+    } finally {
+      setCurrentUpdateLanePriority(previousLanePriority);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 77bd914eaa5f..4365b2b83ac4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -28,7 +28,6 @@ import {
   enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
-  decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
@@ -455,10 +454,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     schedulerPriority === UserBlockingSchedulerPriority
   ) {
     lane = findUpdateLane(InputDiscreteLanePriority);
-  } else if (
-    decoupleUpdatePriorityFromScheduler &&
-    getCurrentUpdateLanePriority() !== NoLanePriority
-  ) {
+  } else if (getCurrentUpdateLanePriority() !== NoLanePriority) {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority);
   } else {
@@ -567,10 +563,6 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  // TODO: requestUpdateLanePriority also reads the priority. Pass the
-  // priority as an argument to that function and this one.
-  const priorityLevel = getCurrentPriorityLevel();
-
   if (lane === SyncLane) {
     if (
       // Check if we're inside unbatchedUpdates
@@ -598,7 +590,7 @@ export function scheduleUpdateOnFiber(
         flushSyncCallbackQueue();
       }
     }
-  } else if (decoupleUpdatePriorityFromScheduler) {
+  } else {
     const updateLanePriority = getCurrentUpdateLanePriority();
 
     // Schedule a discrete update but only if it's not Sync.
@@ -619,26 +611,6 @@ export function scheduleUpdateOnFiber(
     // Schedule other updates after in case the callback is sync.
     ensureRootIsScheduled(root, eventTime);
     schedulePendingInteractions(root, lane);
-  } else {
-    // Schedule a discrete update but only if it's not Sync.
-    if (
-      (executionContext & DiscreteEventContext) !== NoContext &&
-      // Only updates at user-blocking priority or greater are considered
-      // discrete, even inside a discrete event.
-      (priorityLevel === UserBlockingSchedulerPriority ||
-        priorityLevel === ImmediateSchedulerPriority)
-    ) {
-      // This is the result of a discrete event. Track the lowest priority
-      // discrete update per root so we can flush them early, if needed.
-      if (rootsWithPendingDiscreteUpdates === null) {
-        rootsWithPendingDiscreteUpdates = new Set([root]);
-      } else {
-        rootsWithPendingDiscreteUpdates.add(root);
-      }
-    }
-    // Schedule other updates after in case the callback is sync.
-    ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, lane);
   }
 
   return root;
@@ -1150,16 +1122,12 @@ export function flushDiscreteUpdates() {
 }
 
 export function deferredUpdates<A>(fn: () => A): A {
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(DefaultLanePriority);
-      return runWithPriority(NormalSchedulerPriority, fn);
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
-    }
-  } else {
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(DefaultLanePriority);
     return runWithPriority(NormalSchedulerPriority, fn);
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
   }
 }
 
@@ -1218,36 +1186,20 @@ export function discreteUpdates<A, B, C, D, R>(
   const prevExecutionContext = executionContext;
   executionContext |= DiscreteEventContext;
 
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(InputDiscreteLanePriority);
-      return runWithPriority(
-        UserBlockingSchedulerPriority,
-        fn.bind(null, a, b, c, d),
-      );
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
-    }
-  } else {
-    try {
-      return runWithPriority(
-        UserBlockingSchedulerPriority,
-        fn.bind(null, a, b, c, d),
-      );
-    } finally {
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(InputDiscreteLanePriority);
+    return runWithPriority(
+      UserBlockingSchedulerPriority,
+      fn.bind(null, a, b, c, d),
+    );
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      resetRenderTimer();
+      flushSyncCallbackQueue();
     }
   }
 }
@@ -1282,68 +1234,39 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   }
   executionContext |= BatchedContext;
 
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(SyncLanePriority);
-      if (fn) {
-        return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
-      } else {
-        return (undefined: $FlowFixMe);
-      }
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
-      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.
-      flushSyncCallbackQueue();
-    }
-  } else {
-    try {
-      if (fn) {
-        return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
-      } else {
-        return (undefined: $FlowFixMe);
-      }
-    } finally {
-      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.
-      flushSyncCallbackQueue();
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(SyncLanePriority);
+    if (fn) {
+      return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
+    } else {
+      return (undefined: $FlowFixMe);
     }
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
+    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.
+    flushSyncCallbackQueue();
   }
 }
 
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
-  if (decoupleUpdatePriorityFromScheduler) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    try {
-      setCurrentUpdateLanePriority(SyncLanePriority);
-      runWithPriority(ImmediateSchedulerPriority, fn);
-    } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
+  const previousLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(SyncLanePriority);
+    runWithPriority(ImmediateSchedulerPriority, fn);
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
 
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
-    }
-  } else {
-    try {
-      runWithPriority(ImmediateSchedulerPriority, fn);
-    } finally {
-      executionContext = prevExecutionContext;
-      if (executionContext === NoContext) {
-        // Flush the immediate callbacks that were scheduled during this batch
-        resetRenderTimer();
-        flushSyncCallbackQueue();
-      }
+    executionContext = prevExecutionContext;
+    if (executionContext === NoContext) {
+      // Flush the immediate callbacks that were scheduled during this batch
+      resetRenderTimer();
+      flushSyncCallbackQueue();
     }
   }
 }
@@ -1954,11 +1877,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
-    let previousLanePriority;
-    if (decoupleUpdatePriorityFromScheduler) {
-      previousLanePriority = getCurrentUpdateLanePriority();
-      setCurrentUpdateLanePriority(SyncLanePriority);
-    }
+    const previousLanePriority = getCurrentUpdateLanePriority();
+    setCurrentUpdateLanePriority(SyncLanePriority);
 
     const prevExecutionContext = executionContext;
     executionContext |= CommitContext;
@@ -2040,7 +1960,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
     executionContext = prevExecutionContext;
 
-    if (decoupleUpdatePriorityFromScheduler && previousLanePriority != null) {
+    if (previousLanePriority != null) {
       // Reset the priority to the previous non-sync value.
       setCurrentUpdateLanePriority(previousLanePriority);
     }
@@ -2183,18 +2103,14 @@ export function flushPassiveEffects(): boolean {
         ? NormalSchedulerPriority
         : pendingPassiveEffectsRenderPriority;
     pendingPassiveEffectsRenderPriority = NoSchedulerPriority;
-    if (decoupleUpdatePriorityFromScheduler) {
-      const previousLanePriority = getCurrentUpdateLanePriority();
-      try {
-        setCurrentUpdateLanePriority(
-          schedulerPriorityToLanePriority(priorityLevel),
-        );
-        return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
-      } finally {
-        setCurrentUpdateLanePriority(previousLanePriority);
-      }
-    } else {
+    const previousLanePriority = getCurrentUpdateLanePriority();
+    try {
+      setCurrentUpdateLanePriority(
+        schedulerPriorityToLanePriority(priorityLevel),
+      );
       return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+    } finally {
+      setCurrentUpdateLanePriority(previousLanePriority);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 1c13e3a8fda9..4813dfc907f7 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -15,7 +15,6 @@ import * as Scheduler from 'scheduler';
 import {__interactionsRef} from 'scheduler/tracing';
 import {
   enableSchedulerTracing,
-  decoupleUpdatePriorityFromScheduler,
   enableSyncMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
@@ -184,63 +183,34 @@ function flushSyncCallbackQueueImpl() {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
     let i = 0;
-    if (decoupleUpdatePriorityFromScheduler) {
-      const previousLanePriority = getCurrentUpdateLanePriority();
-      try {
-        const isSync = true;
-        const queue = syncQueue;
-        setCurrentUpdateLanePriority(SyncLanePriority);
-        runWithPriority(ImmediatePriority, () => {
-          for (; i < queue.length; i++) {
-            let callback = queue[i];
-            do {
-              callback = callback(isSync);
-            } while (callback !== null);
-          }
-        });
-        syncQueue = null;
-      } catch (error) {
-        // If something throws, leave the remaining callbacks on the queue.
-        if (syncQueue !== null) {
-          syncQueue = syncQueue.slice(i + 1);
+    const previousLanePriority = getCurrentUpdateLanePriority();
+    try {
+      const isSync = true;
+      const queue = syncQueue;
+      setCurrentUpdateLanePriority(SyncLanePriority);
+      runWithPriority(ImmediatePriority, () => {
+        for (; i < queue.length; i++) {
+          let callback = queue[i];
+          do {
+            callback = callback(isSync);
+          } while (callback !== null);
         }
-        // Resume flushing in the next tick
-        Scheduler_scheduleCallback(
-          Scheduler_ImmediatePriority,
-          flushSyncCallbackQueue,
-        );
-        throw error;
-      } finally {
-        setCurrentUpdateLanePriority(previousLanePriority);
-        isFlushingSyncQueue = false;
-      }
-    } else {
-      try {
-        const isSync = true;
-        const queue = syncQueue;
-        runWithPriority(ImmediatePriority, () => {
-          for (; i < queue.length; i++) {
-            let callback = queue[i];
-            do {
-              callback = callback(isSync);
-            } while (callback !== null);
-          }
-        });
-        syncQueue = null;
-      } catch (error) {
-        // If something throws, leave the remaining callbacks on the queue.
-        if (syncQueue !== null) {
-          syncQueue = syncQueue.slice(i + 1);
-        }
-        // Resume flushing in the next tick
-        Scheduler_scheduleCallback(
-          Scheduler_ImmediatePriority,
-          flushSyncCallbackQueue,
-        );
-        throw error;
-      } finally {
-        isFlushingSyncQueue = false;
+      });
+      syncQueue = null;
+    } catch (error) {
+      // If something throws, leave the remaining callbacks on the queue.
+      if (syncQueue !== null) {
+        syncQueue = syncQueue.slice(i + 1);
       }
+      // Resume flushing in the next tick
+      Scheduler_scheduleCallback(
+        Scheduler_ImmediatePriority,
+        flushSyncCallbackQueue,
+      );
+      throw error;
+    } finally {
+      setCurrentUpdateLanePriority(previousLanePriority);
+      isFlushingSyncQueue = false;
     }
   }
 }
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 5c4451499ca5..1d1d8fb946ab 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -15,7 +15,6 @@ import * as Scheduler from 'scheduler';
 import {__interactionsRef} from 'scheduler/tracing';
 import {
   enableSchedulerTracing,
-  decoupleUpdatePriorityFromScheduler,
   enableSyncMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
@@ -184,63 +183,34 @@ function flushSyncCallbackQueueImpl() {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
     let i = 0;
-    if (decoupleUpdatePriorityFromScheduler) {
-      const previousLanePriority = getCurrentUpdateLanePriority();
-      try {
-        const isSync = true;
-        const queue = syncQueue;
-        setCurrentUpdateLanePriority(SyncLanePriority);
-        runWithPriority(ImmediatePriority, () => {
-          for (; i < queue.length; i++) {
-            let callback = queue[i];
-            do {
-              callback = callback(isSync);
-            } while (callback !== null);
-          }
-        });
-        syncQueue = null;
-      } catch (error) {
-        // If something throws, leave the remaining callbacks on the queue.
-        if (syncQueue !== null) {
-          syncQueue = syncQueue.slice(i + 1);
+    const previousLanePriority = getCurrentUpdateLanePriority();
+    try {
+      const isSync = true;
+      const queue = syncQueue;
+      setCurrentUpdateLanePriority(SyncLanePriority);
+      runWithPriority(ImmediatePriority, () => {
+        for (; i < queue.length; i++) {
+          let callback = queue[i];
+          do {
+            callback = callback(isSync);
+          } while (callback !== null);
         }
-        // Resume flushing in the next tick
-        Scheduler_scheduleCallback(
-          Scheduler_ImmediatePriority,
-          flushSyncCallbackQueue,
-        );
-        throw error;
-      } finally {
-        setCurrentUpdateLanePriority(previousLanePriority);
-        isFlushingSyncQueue = false;
-      }
-    } else {
-      try {
-        const isSync = true;
-        const queue = syncQueue;
-        runWithPriority(ImmediatePriority, () => {
-          for (; i < queue.length; i++) {
-            let callback = queue[i];
-            do {
-              callback = callback(isSync);
-            } while (callback !== null);
-          }
-        });
-        syncQueue = null;
-      } catch (error) {
-        // If something throws, leave the remaining callbacks on the queue.
-        if (syncQueue !== null) {
-          syncQueue = syncQueue.slice(i + 1);
-        }
-        // Resume flushing in the next tick
-        Scheduler_scheduleCallback(
-          Scheduler_ImmediatePriority,
-          flushSyncCallbackQueue,
-        );
-        throw error;
-      } finally {
-        isFlushingSyncQueue = false;
+      });
+      syncQueue = null;
+    } catch (error) {
+      // If something throws, leave the remaining callbacks on the queue.
+      if (syncQueue !== null) {
+        syncQueue = syncQueue.slice(i + 1);
       }
+      // Resume flushing in the next tick
+      Scheduler_scheduleCallback(
+        Scheduler_ImmediatePriority,
+        flushSyncCallbackQueue,
+      );
+      throw error;
+    } finally {
+      setCurrentUpdateLanePriority(previousLanePriority);
+      isFlushingSyncQueue = false;
     }
   }
 }
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
index e2a76513f721..114b0cfffee5 100644
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -428,7 +428,6 @@ describe('ReactDOMTracing', () => {
       });
 
       // @gate experimental
-      // @gate enableNativeEventPriorityInference
       it('should properly trace interactions when there is work of interleaved priorities', () => {
         const Child = () => {
           Scheduler.unstable_yieldValue('Child');
@@ -550,7 +549,6 @@ describe('ReactDOMTracing', () => {
       });
 
       // @gate experimental
-      // @gate enableNativeEventPriorityInference
       it('should properly trace interactions through a multi-pass SuspenseList render', () => {
         const SuspenseList = React.SuspenseList;
         const Suspense = React.Suspense;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 484717599557..0d83efe10332 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -142,9 +142,6 @@ export const enableLegacyFBSupport = false;
 // new behavior.
 export const deferRenderPhaseUpdateToNextBatch = true;
 
-// Replacement for runWithPriority in React internals.
-export const decoupleUpdatePriorityFromScheduler = false;
-
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index b664dc00632a..b0dad1851fac 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -49,7 +49,6 @@ export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index f5d44fff1308..7a34c7623cfd 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -48,7 +48,6 @@ export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index e05226fd5d01..adb63e0a8df5 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -48,7 +48,6 @@ export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 41a368f659ec..5c18737ebec6 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -48,7 +48,6 @@ export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 577e77f18df9..9ef9ee181b60 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -48,7 +48,6 @@ export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 0d7c78e39e29..b3240c62dad3 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -48,7 +48,6 @@ export const skipUnmountedBoundaries = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 1dfa34662cd7..65eeaee98082 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -48,7 +48,6 @@ export const skipUnmountedBoundaries = true;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const decoupleUpdatePriorityFromScheduler = false;
 export const enableDiscreteEventFlushingChange = true;
 
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 416dfb619144..a550d45be2d1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -17,7 +17,6 @@ export const warnAboutSpreadingKeyToJSX = __VARIANT__;
 export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
-export const decoupleUpdatePriorityFromScheduler = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index f1fb6d499b5f..e4d0b079166b 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -24,7 +24,6 @@ export const {
   enableFilterEmptyStringAttributesDOM,
   enableLegacyFBSupport,
   deferRenderPhaseUpdateToNextBatch,
-  decoupleUpdatePriorityFromScheduler,
   enableDebugTracing,
   skipUnmountedBoundaries,
   enableStrictEffects,

From 431e76e2db39e74e25965027d67d69debdb7384a Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Mon, 8 Mar 2021 10:46:45 -0700
Subject: [PATCH 0300/1603] Switch callsites over to update lane priority

---
 .../src/ReactFiberCommitWork.new.js           |  19 ++-
 .../src/ReactFiberCommitWork.old.js           |  19 ++-
 .../src/ReactFiberDevToolsHook.new.js         |  19 ++-
 .../src/ReactFiberDevToolsHook.old.js         |  19 ++-
 .../src/ReactFiberWorkLoop.new.js             |  52 ++++---
 .../src/ReactFiberWorkLoop.old.js             |  52 ++++---
 .../ReactSchedulerIntegration-test.js         | 138 ------------------
 7 files changed, 102 insertions(+), 216 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e8acf1f31d71..2f68850ffa8c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -17,12 +17,11 @@ import type {
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane.new';
+import type {LanePriority, Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 
@@ -1057,7 +1056,7 @@ function commitUnmount(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   onCommitUnmount(current);
 
@@ -1153,7 +1152,7 @@ function commitNestedUnmounts(
   finishedRoot: FiberRoot,
   root: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   // While we're inside a removed host node we don't want to call
   // removeChild on the inner nodes because they're removed by the top
@@ -1463,7 +1462,7 @@ function unmountHostComponents(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
@@ -1601,7 +1600,7 @@ function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
@@ -1945,7 +1944,7 @@ function commitResetTextContent(current: Fiber) {
 
 export function commitMutationEffects(
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
   firstChild: Fiber,
 ) {
   nextEffect = firstChild;
@@ -1954,7 +1953,7 @@ export function commitMutationEffects(
 
 function commitMutationEffects_begin(
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2000,7 +1999,7 @@ function commitMutationEffects_begin(
 
 function commitMutationEffects_complete(
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2041,7 +2040,7 @@ function commitMutationEffects_complete(
 function commitMutationEffectsOnFiber(
   finishedWork: Fiber,
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ) {
   const flags = finishedWork.flags;
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7759080a0978..fe6916bf4c85 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -17,12 +17,11 @@ import type {
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane.old';
+import type {LanePriority, Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 
@@ -1057,7 +1056,7 @@ function commitUnmount(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   onCommitUnmount(current);
 
@@ -1153,7 +1152,7 @@ function commitNestedUnmounts(
   finishedRoot: FiberRoot,
   root: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   // While we're inside a removed host node we don't want to call
   // removeChild on the inner nodes because they're removed by the top
@@ -1463,7 +1462,7 @@ function unmountHostComponents(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
@@ -1601,7 +1600,7 @@ function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
@@ -1945,7 +1944,7 @@ function commitResetTextContent(current: Fiber) {
 
 export function commitMutationEffects(
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
   firstChild: Fiber,
 ) {
   nextEffect = firstChild;
@@ -1954,7 +1953,7 @@ export function commitMutationEffects(
 
 function commitMutationEffects_begin(
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2000,7 +1999,7 @@ function commitMutationEffects_begin(
 
 function commitMutationEffects_complete(
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2041,7 +2040,7 @@ function commitMutationEffects_complete(
 function commitMutationEffectsOnFiber(
   finishedWork: Fiber,
   root: FiberRoot,
-  renderPriorityLevel: ReactPriorityLevel,
+  renderPriorityLevel: LanePriority,
 ) {
   const flags = finishedWork.flags;
 
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index 7df87ffbf764..6ac250743ad9 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -9,10 +9,16 @@
 
 import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
 
-import type {Fiber, FiberRoot, ReactPriorityLevel} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {LanePriority} from './ReactFiberLane.new';
 
 import {DidCapture} from './ReactFiberFlags';
+import {
+  lanePriorityToSchedulerPriority,
+  NoLanePriority,
+} from './ReactFiberLane.new';
+import {NormalPriority} from './SchedulerWithReactIntegration.new';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
@@ -78,18 +84,19 @@ export function onScheduleRoot(root: FiberRoot, children: ReactNodeList) {
   }
 }
 
-export function onCommitRoot(
-  root: FiberRoot,
-  priorityLevel: ReactPriorityLevel,
-) {
+export function onCommitRoot(root: FiberRoot, priorityLevel: LanePriority) {
   if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
     try {
       const didError = (root.current.flags & DidCapture) === DidCapture;
       if (enableProfilerTimer) {
+        const schedulerPriority =
+          priorityLevel === NoLanePriority
+            ? NormalPriority
+            : lanePriorityToSchedulerPriority(priorityLevel);
         injectedHook.onCommitFiberRoot(
           rendererID,
           root,
-          priorityLevel,
+          schedulerPriority,
           didError,
         );
       } else {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index 7df87ffbf764..04aa1c09eb43 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -9,10 +9,16 @@
 
 import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
 
-import type {Fiber, FiberRoot, ReactPriorityLevel} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {LanePriority} from './ReactFiberLane.old';
 
 import {DidCapture} from './ReactFiberFlags';
+import {
+  lanePriorityToSchedulerPriority,
+  NoLanePriority,
+} from './ReactFiberLane.old';
+import {NormalPriority} from './SchedulerWithReactIntegration.old';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
@@ -78,18 +84,19 @@ export function onScheduleRoot(root: FiberRoot, children: ReactNodeList) {
   }
 }
 
-export function onCommitRoot(
-  root: FiberRoot,
-  priorityLevel: ReactPriorityLevel,
-) {
+export function onCommitRoot(root: FiberRoot, priorityLevel: LanePriority) {
   if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
     try {
       const didError = (root.current.flags & DidCapture) === DidCapture;
       if (enableProfilerTimer) {
+        const schedulerPriority =
+          priorityLevel === NoLanePriority
+            ? NormalPriority
+            : lanePriorityToSchedulerPriority(priorityLevel);
         injectedHook.onCommitFiberRoot(
           rendererID,
           root,
-          priorityLevel,
+          schedulerPriority,
           didError,
         );
       } else {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index caf3bf579337..f593cc8f8628 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -9,8 +9,7 @@
 
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane.new';
-import type {ReactPriorityLevel} from './ReactInternalTypes';
+import type {Lanes, Lane, LanePriority} from './ReactFiberLane.new';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
@@ -46,7 +45,6 @@ import {
   shouldYield,
   requestPaint,
   now,
-  NoPriority as NoSchedulerPriority,
   ImmediatePriority as ImmediateSchedulerPriority,
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
@@ -173,6 +171,7 @@ import {
   markRootFinished,
   schedulerPriorityToLanePriority,
   lanePriorityToSchedulerPriority,
+  higherLanePriority,
 } from './ReactFiberLane.new';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.new';
@@ -333,7 +332,7 @@ let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
 
 let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
-let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
+let pendingPassiveEffectsRenderPriority: LanePriority = NoLanePriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
@@ -394,7 +393,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentPriorityLevel() === ImmediateSchedulerPriority
+    return getCurrentUpdateLanePriority() === SyncLanePriority
       ? (SyncLane: Lane)
       : (SyncBatchedLane: Lane);
   } else if (
@@ -482,7 +481,7 @@ function requestRetryLane(fiber: Fiber) {
   if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentPriorityLevel() === ImmediateSchedulerPriority
+    return getCurrentUpdateLanePriority() === SyncLanePriority
       ? (SyncLane: Lane)
       : (SyncBatchedLane: Lane);
   }
@@ -596,9 +595,9 @@ export function scheduleUpdateOnFiber(
     // Schedule a discrete update but only if it's not Sync.
     if (
       (executionContext & DiscreteEventContext) !== NoContext &&
-      // Only updates at user-blocking priority or greater are considered
-      // discrete, even inside a discrete event.
-      updateLanePriority === InputDiscreteLanePriority
+      // Only updates greater than default considered discrete, even inside a discrete event.
+      higherLanePriority(updateLanePriority, DefaultLanePriority) !==
+        DefaultLanePriority
     ) {
       // This is the result of a discrete event. Track the lowest priority
       // discrete update per root so we can flush them early, if needed.
@@ -1751,11 +1750,17 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
 }
 
 function commitRoot(root) {
-  const renderPriorityLevel = getCurrentPriorityLevel();
-  runWithPriority(
-    ImmediateSchedulerPriority,
-    commitRootImpl.bind(null, root, renderPriorityLevel),
-  );
+  const previousUpdateLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(SyncLanePriority);
+    runWithPriority(
+      ImmediateSchedulerPriority,
+      commitRootImpl.bind(null, root, previousUpdateLanePriority),
+    );
+  } finally {
+    setCurrentUpdateLanePriority(previousUpdateLanePriority);
+  }
+
   return null;
 }
 
@@ -1983,7 +1988,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
-    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
+    pendingPassiveEffectsRenderPriority =
+      renderPriorityLevel === NoLanePriority
+        ? DefaultLanePriority
+        : renderPriorityLevel;
   }
 
   // Read this again, since an effect might have updated it
@@ -2097,18 +2105,16 @@ function commitRootImpl(root, renderPriorityLevel) {
 
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
-  if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
+  if (pendingPassiveEffectsRenderPriority !== NoLanePriority) {
     const priorityLevel =
-      pendingPassiveEffectsRenderPriority > NormalSchedulerPriority
-        ? NormalSchedulerPriority
+      pendingPassiveEffectsRenderPriority > DefaultLanePriority
+        ? DefaultLanePriority
         : pendingPassiveEffectsRenderPriority;
-    pendingPassiveEffectsRenderPriority = NoSchedulerPriority;
+    pendingPassiveEffectsRenderPriority = NoLanePriority;
     const previousLanePriority = getCurrentUpdateLanePriority();
     try {
-      setCurrentUpdateLanePriority(
-        schedulerPriorityToLanePriority(priorityLevel),
-      );
-      return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+      setCurrentUpdateLanePriority(priorityLevel);
+      return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdateLanePriority(previousLanePriority);
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 4365b2b83ac4..78849f965487 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -9,8 +9,7 @@
 
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane} from './ReactFiberLane.old';
-import type {ReactPriorityLevel} from './ReactInternalTypes';
+import type {Lanes, Lane, LanePriority} from './ReactFiberLane.old';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {StackCursor} from './ReactFiberStack.old';
@@ -46,7 +45,6 @@ import {
   shouldYield,
   requestPaint,
   now,
-  NoPriority as NoSchedulerPriority,
   ImmediatePriority as ImmediateSchedulerPriority,
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
@@ -173,6 +171,7 @@ import {
   markRootFinished,
   schedulerPriorityToLanePriority,
   lanePriorityToSchedulerPriority,
+  higherLanePriority,
 } from './ReactFiberLane.old';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.old';
@@ -333,7 +332,7 @@ let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
 
 let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
-let pendingPassiveEffectsRenderPriority: ReactPriorityLevel = NoSchedulerPriority;
+let pendingPassiveEffectsRenderPriority: LanePriority = NoLanePriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
@@ -394,7 +393,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentPriorityLevel() === ImmediateSchedulerPriority
+    return getCurrentUpdateLanePriority() === SyncLanePriority
       ? (SyncLane: Lane)
       : (SyncBatchedLane: Lane);
   } else if (
@@ -482,7 +481,7 @@ function requestRetryLane(fiber: Fiber) {
   if ((mode & BlockingMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentPriorityLevel() === ImmediateSchedulerPriority
+    return getCurrentUpdateLanePriority() === SyncLanePriority
       ? (SyncLane: Lane)
       : (SyncBatchedLane: Lane);
   }
@@ -596,9 +595,9 @@ export function scheduleUpdateOnFiber(
     // Schedule a discrete update but only if it's not Sync.
     if (
       (executionContext & DiscreteEventContext) !== NoContext &&
-      // Only updates at user-blocking priority or greater are considered
-      // discrete, even inside a discrete event.
-      updateLanePriority === InputDiscreteLanePriority
+      // Only updates greater than default considered discrete, even inside a discrete event.
+      higherLanePriority(updateLanePriority, DefaultLanePriority) !==
+        DefaultLanePriority
     ) {
       // This is the result of a discrete event. Track the lowest priority
       // discrete update per root so we can flush them early, if needed.
@@ -1751,11 +1750,17 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
 }
 
 function commitRoot(root) {
-  const renderPriorityLevel = getCurrentPriorityLevel();
-  runWithPriority(
-    ImmediateSchedulerPriority,
-    commitRootImpl.bind(null, root, renderPriorityLevel),
-  );
+  const previousUpdateLanePriority = getCurrentUpdateLanePriority();
+  try {
+    setCurrentUpdateLanePriority(SyncLanePriority);
+    runWithPriority(
+      ImmediateSchedulerPriority,
+      commitRootImpl.bind(null, root, previousUpdateLanePriority),
+    );
+  } finally {
+    setCurrentUpdateLanePriority(previousUpdateLanePriority);
+  }
+
   return null;
 }
 
@@ -1983,7 +1988,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
-    pendingPassiveEffectsRenderPriority = renderPriorityLevel;
+    pendingPassiveEffectsRenderPriority =
+      renderPriorityLevel === NoLanePriority
+        ? DefaultLanePriority
+        : renderPriorityLevel;
   }
 
   // Read this again, since an effect might have updated it
@@ -2097,18 +2105,16 @@ function commitRootImpl(root, renderPriorityLevel) {
 
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
-  if (pendingPassiveEffectsRenderPriority !== NoSchedulerPriority) {
+  if (pendingPassiveEffectsRenderPriority !== NoLanePriority) {
     const priorityLevel =
-      pendingPassiveEffectsRenderPriority > NormalSchedulerPriority
-        ? NormalSchedulerPriority
+      pendingPassiveEffectsRenderPriority > DefaultLanePriority
+        ? DefaultLanePriority
         : pendingPassiveEffectsRenderPriority;
-    pendingPassiveEffectsRenderPriority = NoSchedulerPriority;
+    pendingPassiveEffectsRenderPriority = NoLanePriority;
     const previousLanePriority = getCurrentUpdateLanePriority();
     try {
-      setCurrentUpdateLanePriority(
-        schedulerPriorityToLanePriority(priorityLevel),
-      );
-      return runWithPriority(priorityLevel, flushPassiveEffectsImpl);
+      setCurrentUpdateLanePriority(priorityLevel);
+      return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdateLanePriority(previousLanePriority);
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index ab9995d01cb5..93ea812fb817 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -160,144 +160,6 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
-  // TODO: Figure out what to do with these tests. I don't think most of them
-  // make sense once we decouple Scheduler from React. Perhaps need similar
-  // tests for React DOM.
-  // @gate !enableNativeEventPriorityInference
-  it('passive effects never have higher than normal priority', async () => {
-    const {useEffect} = React;
-    function ReadPriority({step}) {
-      Scheduler.unstable_yieldValue(
-        `Render priority: ${getCurrentPriorityAsString()}`,
-      );
-      useEffect(() => {
-        Scheduler.unstable_yieldValue(
-          `Effect priority: ${getCurrentPriorityAsString()}`,
-        );
-        return () => {
-          Scheduler.unstable_yieldValue(
-            `Effect clean-up priority: ${getCurrentPriorityAsString()}`,
-          );
-        };
-      });
-      return null;
-    }
-
-    // High priority renders spawn effects at normal priority
-    await ReactNoop.act(async () => {
-      Scheduler.unstable_runWithPriority(ImmediatePriority, () => {
-        ReactNoop.render(<ReadPriority />);
-      });
-    });
-    expect(Scheduler).toHaveYielded([
-      'Render priority: Immediate',
-      'Effect priority: Normal',
-    ]);
-    await ReactNoop.act(async () => {
-      Scheduler.unstable_runWithPriority(UserBlockingPriority, () => {
-        ReactNoop.render(<ReadPriority />);
-      });
-    });
-    expect(Scheduler).toHaveYielded([
-      'Render priority: UserBlocking',
-      'Effect clean-up priority: Normal',
-      'Effect priority: Normal',
-    ]);
-
-    // Renders lower than normal priority spawn effects at the same priority
-    await ReactNoop.act(async () => {
-      Scheduler.unstable_runWithPriority(IdlePriority, () => {
-        ReactNoop.render(<ReadPriority />);
-      });
-    });
-    expect(Scheduler).toHaveYielded([
-      'Render priority: Idle',
-      'Effect clean-up priority: Idle',
-      'Effect priority: Idle',
-    ]);
-  });
-
-  // TODO: Figure out what to do with these tests. I don't think most of them
-  // make sense once we decouple Scheduler from React. Perhaps need similar
-  // tests for React DOM.
-  // @gate !enableNativeEventPriorityInference
-  it('passive effects have correct priority even if they are flushed early', async () => {
-    const {useEffect} = React;
-    function ReadPriority({step}) {
-      Scheduler.unstable_yieldValue(
-        `Render priority [step ${step}]: ${getCurrentPriorityAsString()}`,
-      );
-      useEffect(() => {
-        Scheduler.unstable_yieldValue(
-          `Effect priority [step ${step}]: ${getCurrentPriorityAsString()}`,
-        );
-      });
-      return null;
-    }
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<ReadPriority step={1} />);
-      Scheduler.unstable_flushUntilNextPaint();
-      expect(Scheduler).toHaveYielded(['Render priority [step 1]: Normal']);
-      Scheduler.unstable_runWithPriority(UserBlockingPriority, () => {
-        ReactNoop.render(<ReadPriority step={2} />);
-      });
-    });
-    expect(Scheduler).toHaveYielded([
-      'Effect priority [step 1]: Normal',
-      'Render priority [step 2]: UserBlocking',
-      'Effect priority [step 2]: Normal',
-    ]);
-  });
-
-  // TODO: Figure out what to do with these tests. I don't think most of them
-  // make sense once we decouple Scheduler from React. Perhaps need similar
-  // tests for React DOM.
-  // @gate !enableNativeEventPriorityInference
-  it('passive effect clean-up functions have correct priority even when component is deleted', async () => {
-    const {useEffect} = React;
-    function ReadPriority({step}) {
-      useEffect(() => {
-        return () => {
-          Scheduler.unstable_yieldValue(
-            `Effect clean-up priority: ${getCurrentPriorityAsString()}`,
-          );
-        };
-      });
-      return null;
-    }
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<ReadPriority />);
-    });
-    await ReactNoop.act(async () => {
-      Scheduler.unstable_runWithPriority(ImmediatePriority, () => {
-        ReactNoop.render(null);
-      });
-    });
-    expect(Scheduler).toHaveYielded(['Effect clean-up priority: Normal']);
-
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<ReadPriority />);
-    });
-    await ReactNoop.act(async () => {
-      Scheduler.unstable_runWithPriority(UserBlockingPriority, () => {
-        ReactNoop.render(null);
-      });
-    });
-    expect(Scheduler).toHaveYielded(['Effect clean-up priority: Normal']);
-
-    // Renders lower than normal priority spawn effects at the same priority
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<ReadPriority />);
-    });
-    await ReactNoop.act(async () => {
-      Scheduler.unstable_runWithPriority(IdlePriority, () => {
-        ReactNoop.render(null);
-      });
-    });
-    expect(Scheduler).toHaveYielded(['Effect clean-up priority: Idle']);
-  });
-
   it('passive effects are called before Normal-pri scheduled in layout effects', async () => {
     const {useEffect, useLayoutEffect} = React;
     function Effects({step}) {

From 41e62e77191e112a7be38448e53470a6b8220611 Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Mon, 8 Mar 2021 11:05:12 -0700
Subject: [PATCH 0301/1603] Remove runWithPriority internally

---
 .../src/events/ReactDOMEventListener.js       | 21 +----------
 .../src/ReactFiberHooks.new.js                | 37 +++++--------------
 .../src/ReactFiberHooks.old.js                | 37 +++++--------------
 .../src/ReactFiberWorkLoop.new.js             | 19 +++-------
 .../src/ReactFiberWorkLoop.old.js             | 19 +++-------
 .../src/SchedulerWithReactIntegration.new.js  | 23 +++---------
 .../src/SchedulerWithReactIntegration.old.js  | 23 +++---------
 .../ReactSchedulerIntegration-test.js         | 32 ----------------
 8 files changed, 45 insertions(+), 166 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index e456f88c1e50..28dc3a8c713c 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -12,10 +12,6 @@ import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
 
-// Intentionally not named imports because Rollup would use dynamic dispatch for
-// CommonJS interop named imports.
-import * as Scheduler from 'scheduler';
-
 import {
   isReplayableDiscreteEvent,
   queueDiscreteEvent,
@@ -89,11 +85,6 @@ const getCurrentPriorityLevel = enableNewReconciler
   ? getCurrentPriorityLevel_new
   : getCurrentPriorityLevel_old;
 
-const {
-  unstable_UserBlockingPriority: UserBlockingPriority,
-  unstable_runWithPriority: runWithPriority,
-} = Scheduler;
-
 // TODO: can we stop exporting these?
 export let _enabled = true;
 
@@ -178,18 +169,8 @@ function dispatchContinuousEvent(
 ) {
   const previousPriority = getCurrentUpdateLanePriority();
   try {
-    // TODO: Double wrapping is necessary while we decouple Scheduler priority.
     setCurrentUpdateLanePriority(InputContinuousLanePriority);
-    runWithPriority(
-      UserBlockingPriority,
-      dispatchEvent.bind(
-        null,
-        domEventName,
-        eventSystemFlags,
-        container,
-        nativeEvent,
-      ),
-    );
+    dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
   } finally {
     setCurrentUpdateLanePriority(previousPriority);
   }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 80fb17d78a67..9eb089d07d7a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -87,12 +87,6 @@ import {
   markWorkInProgressReceivedUpdate,
   checkIfWorkInProgressReceivedUpdate,
 } from './ReactFiberBeginWork.new';
-import {
-  UserBlockingPriority,
-  NormalPriority,
-  runWithPriority,
-  getCurrentPriorityLevel,
-} from './SchedulerWithReactIntegration.new';
 import {getIsHydrating} from './ReactFiberHydrationContext.new';
 import {
   makeClientId,
@@ -1711,38 +1705,27 @@ function rerenderDeferredValue<T>(value: T): T {
 }
 
 function startTransition(setPending, callback) {
-  const priorityLevel = getCurrentPriorityLevel();
   const previousLanePriority = getCurrentUpdateLanePriority();
   setCurrentUpdateLanePriority(
     higherLanePriority(previousLanePriority, InputContinuousLanePriority),
   );
 
-  runWithPriority(
-    priorityLevel < UserBlockingPriority ? UserBlockingPriority : priorityLevel,
-    () => {
-      setPending(true);
-    },
-  );
+  setPending(true);
 
   // TODO: Can remove this. Was only necessary because we used to give
   // different behavior to transitions without a config object. Now they are
   // all treated the same.
   setCurrentUpdateLanePriority(DefaultLanePriority);
 
-  runWithPriority(
-    priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
-    () => {
-      const prevTransition = ReactCurrentBatchConfig.transition;
-      ReactCurrentBatchConfig.transition = 1;
-      try {
-        setPending(false);
-        callback();
-      } finally {
-        setCurrentUpdateLanePriority(previousLanePriority);
-        ReactCurrentBatchConfig.transition = prevTransition;
-      }
-    },
-  );
+  const prevTransition = ReactCurrentBatchConfig.transition;
+  ReactCurrentBatchConfig.transition = 1;
+  try {
+    setPending(false);
+    callback();
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
+  }
 }
 
 function mountTransition(): [(() => void) => void, boolean] {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 4436ce16707d..b51d2020a8fa 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -87,12 +87,6 @@ import {
   markWorkInProgressReceivedUpdate,
   checkIfWorkInProgressReceivedUpdate,
 } from './ReactFiberBeginWork.old';
-import {
-  UserBlockingPriority,
-  NormalPriority,
-  runWithPriority,
-  getCurrentPriorityLevel,
-} from './SchedulerWithReactIntegration.old';
 import {getIsHydrating} from './ReactFiberHydrationContext.old';
 import {
   makeClientId,
@@ -1711,38 +1705,27 @@ function rerenderDeferredValue<T>(value: T): T {
 }
 
 function startTransition(setPending, callback) {
-  const priorityLevel = getCurrentPriorityLevel();
   const previousLanePriority = getCurrentUpdateLanePriority();
   setCurrentUpdateLanePriority(
     higherLanePriority(previousLanePriority, InputContinuousLanePriority),
   );
 
-  runWithPriority(
-    priorityLevel < UserBlockingPriority ? UserBlockingPriority : priorityLevel,
-    () => {
-      setPending(true);
-    },
-  );
+  setPending(true);
 
   // TODO: Can remove this. Was only necessary because we used to give
   // different behavior to transitions without a config object. Now they are
   // all treated the same.
   setCurrentUpdateLanePriority(DefaultLanePriority);
 
-  runWithPriority(
-    priorityLevel > NormalPriority ? NormalPriority : priorityLevel,
-    () => {
-      const prevTransition = ReactCurrentBatchConfig.transition;
-      ReactCurrentBatchConfig.transition = 1;
-      try {
-        setPending(false);
-        callback();
-      } finally {
-        setCurrentUpdateLanePriority(previousLanePriority);
-        ReactCurrentBatchConfig.transition = prevTransition;
-      }
-    },
-  );
+  const prevTransition = ReactCurrentBatchConfig.transition;
+  ReactCurrentBatchConfig.transition = 1;
+  try {
+    setPending(false);
+    callback();
+  } finally {
+    setCurrentUpdateLanePriority(previousLanePriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
+  }
 }
 
 function mountTransition(): [(() => void) => void, boolean] {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f593cc8f8628..65dc3f59181f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -41,7 +41,6 @@ import {
   scheduleCallback,
   cancelCallback,
   getCurrentPriorityLevel,
-  runWithPriority,
   shouldYield,
   requestPaint,
   now,
@@ -1124,7 +1123,7 @@ export function deferredUpdates<A>(fn: () => A): A {
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(DefaultLanePriority);
-    return runWithPriority(NormalSchedulerPriority, fn);
+    return fn();
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
   }
@@ -1176,7 +1175,7 @@ export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
 }
 
 export function discreteUpdates<A, B, C, D, R>(
-  fn: (A, B, C) => R,
+  fn: (A, B, C, D) => R,
   a: A,
   b: B,
   c: C,
@@ -1188,10 +1187,7 @@ export function discreteUpdates<A, B, C, D, R>(
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(InputDiscreteLanePriority);
-    return runWithPriority(
-      UserBlockingSchedulerPriority,
-      fn.bind(null, a, b, c, d),
-    );
+    return fn(a, b, c, d);
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
     executionContext = prevExecutionContext;
@@ -1237,7 +1233,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   try {
     setCurrentUpdateLanePriority(SyncLanePriority);
     if (fn) {
-      return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
+      return fn(a);
     } else {
       return (undefined: $FlowFixMe);
     }
@@ -1257,7 +1253,7 @@ export function flushControlled(fn: () => mixed): void {
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(SyncLanePriority);
-    runWithPriority(ImmediateSchedulerPriority, fn);
+    fn();
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
 
@@ -1753,10 +1749,7 @@ function commitRoot(root) {
   const previousUpdateLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(SyncLanePriority);
-    runWithPriority(
-      ImmediateSchedulerPriority,
-      commitRootImpl.bind(null, root, previousUpdateLanePriority),
-    );
+    commitRootImpl(root, previousUpdateLanePriority);
   } finally {
     setCurrentUpdateLanePriority(previousUpdateLanePriority);
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 78849f965487..a265ec896b77 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -41,7 +41,6 @@ import {
   scheduleCallback,
   cancelCallback,
   getCurrentPriorityLevel,
-  runWithPriority,
   shouldYield,
   requestPaint,
   now,
@@ -1124,7 +1123,7 @@ export function deferredUpdates<A>(fn: () => A): A {
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(DefaultLanePriority);
-    return runWithPriority(NormalSchedulerPriority, fn);
+    return fn();
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
   }
@@ -1176,7 +1175,7 @@ export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
 }
 
 export function discreteUpdates<A, B, C, D, R>(
-  fn: (A, B, C) => R,
+  fn: (A, B, C, D) => R,
   a: A,
   b: B,
   c: C,
@@ -1188,10 +1187,7 @@ export function discreteUpdates<A, B, C, D, R>(
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(InputDiscreteLanePriority);
-    return runWithPriority(
-      UserBlockingSchedulerPriority,
-      fn.bind(null, a, b, c, d),
-    );
+    return fn(a, b, c, d);
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
     executionContext = prevExecutionContext;
@@ -1237,7 +1233,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   try {
     setCurrentUpdateLanePriority(SyncLanePriority);
     if (fn) {
-      return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));
+      return fn(a);
     } else {
       return (undefined: $FlowFixMe);
     }
@@ -1257,7 +1253,7 @@ export function flushControlled(fn: () => mixed): void {
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(SyncLanePriority);
-    runWithPriority(ImmediateSchedulerPriority, fn);
+    fn();
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
 
@@ -1753,10 +1749,7 @@ function commitRoot(root) {
   const previousUpdateLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(SyncLanePriority);
-    runWithPriority(
-      ImmediateSchedulerPriority,
-      commitRootImpl.bind(null, root, previousUpdateLanePriority),
-    );
+    commitRootImpl(root, previousUpdateLanePriority);
   } finally {
     setCurrentUpdateLanePriority(previousUpdateLanePriority);
   }
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 4813dfc907f7..cd8cb58c6ced 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -26,7 +26,6 @@ import {
 import {scheduleMicrotask, supportsMicrotasks} from './ReactFiberHostConfig';
 
 const {
-  unstable_runWithPriority: Scheduler_runWithPriority,
   unstable_scheduleCallback: Scheduler_scheduleCallback,
   unstable_cancelCallback: Scheduler_cancelCallback,
   unstable_shouldYield: Scheduler_shouldYield,
@@ -123,14 +122,6 @@ function reactPriorityToSchedulerPriority(reactPriorityLevel) {
   }
 }
 
-export function runWithPriority<T>(
-  reactPriorityLevel: ReactPriorityLevel,
-  fn: () => T,
-): T {
-  const priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
-  return Scheduler_runWithPriority(priorityLevel, fn);
-}
-
 export function scheduleCallback(
   reactPriorityLevel: ReactPriorityLevel,
   callback: SchedulerCallback,
@@ -188,14 +179,12 @@ function flushSyncCallbackQueueImpl() {
       const isSync = true;
       const queue = syncQueue;
       setCurrentUpdateLanePriority(SyncLanePriority);
-      runWithPriority(ImmediatePriority, () => {
-        for (; i < queue.length; i++) {
-          let callback = queue[i];
-          do {
-            callback = callback(isSync);
-          } while (callback !== null);
-        }
-      });
+      for (; i < queue.length; i++) {
+        let callback = queue[i];
+        do {
+          callback = callback(isSync);
+        } while (callback !== null);
+      }
       syncQueue = null;
     } catch (error) {
       // If something throws, leave the remaining callbacks on the queue.
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 1d1d8fb946ab..738ef2ea1afb 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -26,7 +26,6 @@ import {
 import {scheduleMicrotask, supportsMicrotasks} from './ReactFiberHostConfig';
 
 const {
-  unstable_runWithPriority: Scheduler_runWithPriority,
   unstable_scheduleCallback: Scheduler_scheduleCallback,
   unstable_cancelCallback: Scheduler_cancelCallback,
   unstable_shouldYield: Scheduler_shouldYield,
@@ -123,14 +122,6 @@ function reactPriorityToSchedulerPriority(reactPriorityLevel) {
   }
 }
 
-export function runWithPriority<T>(
-  reactPriorityLevel: ReactPriorityLevel,
-  fn: () => T,
-): T {
-  const priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
-  return Scheduler_runWithPriority(priorityLevel, fn);
-}
-
 export function scheduleCallback(
   reactPriorityLevel: ReactPriorityLevel,
   callback: SchedulerCallback,
@@ -188,14 +179,12 @@ function flushSyncCallbackQueueImpl() {
       const isSync = true;
       const queue = syncQueue;
       setCurrentUpdateLanePriority(SyncLanePriority);
-      runWithPriority(ImmediatePriority, () => {
-        for (; i < queue.length; i++) {
-          let callback = queue[i];
-          do {
-            callback = callback(isSync);
-          } while (callback !== null);
-        }
-      });
+      for (; i < queue.length; i++) {
+        let callback = queue[i];
+        do {
+          callback = callback(isSync);
+        } while (callback !== null);
+      }
       syncQueue = null;
     } catch (error) {
       // If something throws, leave the remaining callbacks on the queue.
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index 93ea812fb817..bc05d1ab13d0 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -68,17 +68,6 @@ describe('ReactSchedulerIntegration', () => {
     );
   }
 
-  it('flush sync has correct priority', () => {
-    function ReadPriority() {
-      Scheduler.unstable_yieldValue(
-        'Priority: ' + getCurrentPriorityAsString(),
-      );
-      return null;
-    }
-    ReactNoop.flushSync(() => ReactNoop.render(<ReadPriority />));
-    expect(Scheduler).toHaveYielded(['Priority: Immediate']);
-  });
-
   // TODO: Figure out what to do with these tests. I don't think most of them
   // make sense once we decouple Scheduler from React. Perhaps need similar
   // tests for React DOM.
@@ -139,27 +128,6 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
-  it('layout effects have immediate priority', () => {
-    const {useLayoutEffect} = React;
-    function ReadPriority() {
-      Scheduler.unstable_yieldValue(
-        'Render priority: ' + getCurrentPriorityAsString(),
-      );
-      useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue(
-          'Layout priority: ' + getCurrentPriorityAsString(),
-        );
-      });
-      return null;
-    }
-
-    ReactNoop.render(<ReadPriority />);
-    expect(Scheduler).toFlushAndYield([
-      'Render priority: Normal',
-      'Layout priority: Immediate',
-    ]);
-  });
-
   it('passive effects are called before Normal-pri scheduled in layout effects', async () => {
     const {useEffect, useLayoutEffect} = React;
     function Effects({step}) {

From a3f30fed298b9ce1964c551dde9b1bcbd6fda08f Mon Sep 17 00:00:00 2001
From: Rick Hanlon <rickhanlonii@gmail.com>
Date: Mon, 8 Mar 2021 14:28:58 -0700
Subject: [PATCH 0302/1603] Trigger Build


From 73e900b0e78c752d1e045a42ddea8175679ea8f7 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 8 Mar 2021 16:43:44 -0500
Subject: [PATCH 0303/1603] Land enableDiscreteEventMicroTasks (#20954)

---
 .../ReactDOMNativeEventHeuristic-test.js      | 10 ++--
 .../src/client/ReactDOMHostConfig.js          |  3 +-
 .../__tests__/ChangeEventPlugin-test.js       | 15 ++----
 .../__tests__/SimpleEventPlugin-test.js       | 27 ++++------
 .../src/createReactNoop.js                    |  7 +--
 .../ReactSuspenseWithNoopRenderer-test.js     | 50 -------------------
 packages/shared/ReactFeatureFlags.js          |  2 -
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 16 files changed, 21 insertions(+), 102 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 7310a9c49b95..1a37b74f71bf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -43,7 +43,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   }
 
   // @gate experimental
-  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  // @gate enableNativeEventPriorityInference
   it('ignores discrete events on a pending removed element', async () => {
     const disableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -95,7 +95,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  // @gate enableNativeEventPriorityInference
   it('ignores discrete events on a pending removed event listener', async () => {
     const disableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -165,7 +165,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  // @gate enableNativeEventPriorityInference
   it('uses the newest discrete events on a pending changed event listener', async () => {
     const enableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -229,7 +229,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  // @gate enableNativeEventPriorityInference
   it('mouse over should be user-blocking but not discrete', async () => {
     const root = ReactDOM.unstable_createRoot(container);
 
@@ -260,7 +260,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableDiscreteEventMicroTasks && enableNativeEventPriorityInference
+  // @gate enableNativeEventPriorityInference
   it('mouse enter should be user-blocking but not discrete', async () => {
     const root = ReactDOM.unstable_createRoot(container);
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 0f27a15db3d7..dfd29b375a41 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -67,7 +67,6 @@ import {
   enableCreateEventHandleAPI,
   enableScopeAPI,
   enableNewReconciler,
-  enableDiscreteEventMicroTasks,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
@@ -404,7 +403,7 @@ export const noTimeout = -1;
 // -------------------
 //     Microtasks
 // -------------------
-export const supportsMicrotasks = enableDiscreteEventMicroTasks;
+export const supportsMicrotasks = true;
 export const scheduleMicrotask: any =
   typeof queueMicrotask === 'function'
     ? queueMicrotask
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 45828e2735ed..26630b68b11f 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -728,17 +728,10 @@ describe('ChangeEventPlugin', () => {
       expect(Scheduler).toHaveYielded([]);
       expect(input.value).toBe('initial');
 
-      // Flush callbacks.
-      // Now the click update has flushed.
-      if (gate(flags => flags.enableDiscreteEventMicroTasks)) {
-        // Flush microtask queue.
-        await null;
-        expect(Scheduler).toHaveYielded(['render: ']);
-        expect(input.value).toBe('');
-      } else {
-        expect(Scheduler).toFlushAndYield(['render: ']);
-        expect(input.value).toBe('');
-      }
+      // Flush microtask queue.
+      await null;
+      expect(Scheduler).toHaveYielded(['render: ']);
+      expect(input.value).toBe('');
     });
 
     // @gate experimental
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 795eda90c83c..9af14ccd8680 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -470,24 +470,15 @@ describe('SimpleEventPlugin', function() {
         'High-pri count: 7, Low-pri count: 0',
       ]);
 
-      if (gate(flags => flags.enableDiscreteEventMicroTasks)) {
-        // Flush the microtask queue
-        await null;
-
-        // At the end, both counters should equal the total number of clicks
-        expect(Scheduler).toHaveYielded([
-          'High-pri count: 8, Low-pri count: 0',
-        ]);
-        expect(Scheduler).toFlushAndYield([
-          'High-pri count: 8, Low-pri count: 8',
-        ]);
-      } else {
-        // At the end, both counters should equal the total number of clicks
-        expect(Scheduler).toFlushAndYield([
-          'High-pri count: 8, Low-pri count: 0',
-          'High-pri count: 8, Low-pri count: 8',
-        ]);
-      }
+      // Flush the microtask queue
+      await null;
+
+      // At the end, both counters should equal the total number of clicks
+      expect(Scheduler).toHaveYielded(['High-pri count: 8, Low-pri count: 0']);
+      expect(Scheduler).toFlushAndYield([
+        'High-pri count: 8, Low-pri count: 8',
+      ]);
+
       expect(button.textContent).toEqual('High-pri count: 8, Low-pri count: 8');
     });
   });
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 743470966b3f..1a7ccbd07fbc 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -27,10 +27,7 @@ import {
   LegacyRoot,
 } from 'react-reconciler/src/ReactRootTags';
 
-import {
-  enableNativeEventPriorityInference,
-  enableDiscreteEventMicroTasks,
-} from 'shared/ReactFeatureFlags';
+import {enableNativeEventPriorityInference} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 const {IsSomeRendererActing} = ReactSharedInternals;
@@ -376,7 +373,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     cancelTimeout: clearTimeout,
     noTimeout: -1,
 
-    supportsMicrotasks: enableDiscreteEventMicroTasks,
+    supportsMicrotasks: true,
     scheduleMicrotask:
       typeof queueMicrotask === 'function'
         ? queueMicrotask
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 8e8a512dacf4..8ec621be0d01 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -3518,56 +3518,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
-  // @gate enableCache
-  // @gate !enableDiscreteEventMicroTasks
-  it('regression: empty render at high priority causes update to be dropped', async () => {
-    // Reproduces a bug where flushDiscreteUpdates starts a new (empty) render
-    // pass which cancels a scheduled timeout and causes the fallback never to
-    // be committed.
-    function App({text, shouldSuspend}) {
-      return (
-        <>
-          <Text text={text} />
-          <Suspense fallback={<Text text="Loading..." />}>
-            {shouldSuspend && <AsyncText text="B" />}
-          </Suspense>
-        </>
-      );
-    }
-
-    const root = ReactNoop.createRoot();
-    ReactNoop.discreteUpdates(() => {
-      // High pri
-      root.render(<App text="A" />);
-    });
-    // Low pri
-    root.render(<App text="A" shouldSuspend={true} />);
-
-    expect(Scheduler).toFlushAndYield([
-      // Render the high pri update
-      'A',
-      // Render the low pri update
-      'A',
-      'Suspend! [B]',
-      'Loading...',
-    ]);
-    expect(root).toMatchRenderedOutput(<span prop="A" />);
-
-    // Triggers erstwhile bug where flushDiscreteUpdates caused an empty render
-    // at a previously committed level
-    ReactNoop.flushDiscreteUpdates();
-
-    // Commit the placeholder
-    Scheduler.unstable_advanceTime(2000);
-    await advanceTimers(2000);
-    expect(root).toMatchRenderedOutput(
-      <>
-        <span prop="A" />
-        <span prop="Loading..." />
-      </>,
-    );
-  });
-
   // @gate experimental
   // @gate enableCache
   it('regression: ping at high priority causes update to be dropped', async () => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 0d83efe10332..4adc7ac9b4dd 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -150,8 +150,6 @@ export const enableRecursiveCommitTraversal = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 
-export const enableDiscreteEventMicroTasks = false;
-
 export const enableSyncMicroTasks = false;
 
 export const enableNativeEventPriorityInference = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index b0dad1851fac..6c891df1b3ea 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 7a34c7623cfd..4e12e63a4fa0 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index adb63e0a8df5..27dd0cdc9bda 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 5c18737ebec6..8d3f3a92ea23 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 9ef9ee181b60..5d14b1de5fc5 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index b3240c62dad3..12fcc75be187 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 65eeaee98082..c89caeffcf06 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableDiscreteEventMicroTasks = false;
 export const enableSyncMicroTasks = false;
 export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index a550d45be2d1..46dc190a6127 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -55,7 +55,6 @@ export const enableUseRefAccessWarning = __VARIANT__;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
-export const enableDiscreteEventMicroTasks = __VARIANT__;
 export const enableSyncMicroTasks = __VARIANT__;
 export const enableNativeEventPriorityInference = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index e4d0b079166b..35bbe2cb1fbe 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,7 +31,6 @@ export const {
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
-  enableDiscreteEventMicroTasks,
   enableSyncMicroTasks,
   enableNativeEventPriorityInference,
   enableLazyContextPropagation,

From 5d1d1679bf435bf222500f17f5c409daa3f3214a Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 9 Mar 2021 17:25:23 -0500
Subject: [PATCH 0304/1603] Remove scheduler priority from hydration (#20957)

---
 .../react-dom/src/events/ReactDOMEventReplaying.js  | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 8cfacce3e0e9..3a084605e575 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -16,10 +16,8 @@ import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.old';
 
 import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
 import {
-  unstable_runWithPriority as runWithPriority,
   unstable_scheduleCallback as scheduleCallback,
   unstable_NormalPriority as NormalPriority,
-  unstable_getCurrentPriorityLevel as getCurrentPriorityLevel,
 } from 'scheduler';
 import {
   getNearestMountedFiber,
@@ -111,7 +109,6 @@ const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
 type QueuedHydrationTarget = {|
   blockedOn: null | Container | SuspenseInstance,
   target: Node,
-  priority: number,
   lanePriority: LanePriority,
 |};
 const queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
@@ -394,9 +391,7 @@ function attemptExplicitHydrationTarget(
           // Increase its priority.
           queuedTarget.blockedOn = instance;
           attemptHydrationAtPriority(queuedTarget.lanePriority, () => {
-            runWithPriority(queuedTarget.priority, () => {
-              attemptHydrationAtCurrentPriority(nearestMounted);
-            });
+            attemptHydrationAtCurrentPriority(nearestMounted);
           });
 
           return;
@@ -417,17 +412,17 @@ function attemptExplicitHydrationTarget(
 
 export function queueExplicitHydrationTarget(target: Node): void {
   if (enableSelectiveHydration) {
-    const schedulerPriority = getCurrentPriorityLevel();
     const updateLanePriority = getCurrentUpdatePriority();
     const queuedTarget: QueuedHydrationTarget = {
       blockedOn: null,
       target: target,
-      priority: schedulerPriority,
       lanePriority: updateLanePriority,
     };
     let i = 0;
     for (; i < queuedExplicitHydrationTargets.length; i++) {
-      if (schedulerPriority <= queuedExplicitHydrationTargets[i].priority) {
+      if (
+        updateLanePriority <= queuedExplicitHydrationTargets[i].lanePriority
+      ) {
         break;
       }
     }

From e4d4b7074d89a9a94f352ef9336ba0fdc620d8b4 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 9 Mar 2021 23:59:02 -0500
Subject: [PATCH 0305/1603] Land enableNativeEventPriorityInference (#20955)

* Land enableNativeEventPriorityInference

* Move schedulerPriorityToLanePriority

* Remove obsolete comment
---
 .../ReactDOMNativeEventHeuristic-test.js      |   5 -
 .../src/events/ReactDOMEventListener.js       |  44 ++++++--
 .../src/createReactNoop.js                    |  20 +---
 .../src/ReactFiberLane.new.js                 |  20 ----
 .../src/ReactFiberLane.old.js                 |  20 ----
 .../src/ReactFiberWorkLoop.new.js             |  13 +--
 .../src/ReactFiberWorkLoop.old.js             |  13 +--
 .../ReactSchedulerIntegration-test.js         | 106 ------------------
 .../useMutableSourceHydration-test.js         |   1 -
 packages/shared/ReactFeatureFlags.js          |   2 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 19 files changed, 45 insertions(+), 208 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 1a37b74f71bf..7c87698b1a35 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -43,7 +43,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   }
 
   // @gate experimental
-  // @gate enableNativeEventPriorityInference
   it('ignores discrete events on a pending removed element', async () => {
     const disableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -95,7 +94,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableNativeEventPriorityInference
   it('ignores discrete events on a pending removed event listener', async () => {
     const disableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -165,7 +163,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableNativeEventPriorityInference
   it('uses the newest discrete events on a pending changed event listener', async () => {
     const enableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -229,7 +226,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableNativeEventPriorityInference
   it('mouse over should be user-blocking but not discrete', async () => {
     const root = ReactDOM.unstable_createRoot(container);
 
@@ -260,7 +256,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   // @gate experimental
-  // @gate enableNativeEventPriorityInference
   it('mouse enter should be user-blocking but not discrete', async () => {
     const root = ReactDOM.unstable_createRoot(container);
 
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 28dc3a8c713c..0869bebe330b 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -8,7 +8,10 @@
  */
 
 import type {AnyNativeEvent} from '../events/PluginModuleType';
-import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  FiberRoot,
+  ReactPriorityLevel,
+} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
 
@@ -50,7 +53,6 @@ import {
   DefaultLanePriority as DefaultLanePriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_old,
-  schedulerPriorityToLanePriority as schedulerPriorityToLanePriority_old,
 } from 'react-reconciler/src/ReactFiberLane.old';
 import {
   InputDiscreteLanePriority as InputDiscreteLanePriority_new,
@@ -58,10 +60,20 @@ import {
   DefaultLanePriority as DefaultLanePriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_new,
-  schedulerPriorityToLanePriority as schedulerPriorityToLanePriority_new,
+  SyncLanePriority,
+  IdleLanePriority,
+  NoLanePriority,
 } from 'react-reconciler/src/ReactFiberLane.new';
 import {getCurrentPriorityLevel as getCurrentPriorityLevel_old} from 'react-reconciler/src/SchedulerWithReactIntegration.old';
-import {getCurrentPriorityLevel as getCurrentPriorityLevel_new} from 'react-reconciler/src/SchedulerWithReactIntegration.new';
+import {
+  getCurrentPriorityLevel as getCurrentPriorityLevel_new,
+  IdlePriority as IdleSchedulerPriority,
+  ImmediatePriority as ImmediateSchedulerPriority,
+  LowPriority as LowSchedulerPriority,
+  NormalPriority as NormalSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
+} from 'react-reconciler/src/SchedulerWithReactIntegration.new';
+import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.new';
 
 const InputDiscreteLanePriority = enableNewReconciler
   ? InputDiscreteLanePriority_new
@@ -78,13 +90,29 @@ const getCurrentUpdateLanePriority = enableNewReconciler
 const setCurrentUpdateLanePriority = enableNewReconciler
   ? setCurrentUpdateLanePriority_new
   : setCurrentUpdateLanePriority_old;
-const schedulerPriorityToLanePriority = enableNewReconciler
-  ? schedulerPriorityToLanePriority_new
-  : schedulerPriorityToLanePriority_old;
 const getCurrentPriorityLevel = enableNewReconciler
   ? getCurrentPriorityLevel_new
   : getCurrentPriorityLevel_old;
 
+function schedulerPriorityToLanePriority(
+  schedulerPriorityLevel: ReactPriorityLevel,
+): LanePriority {
+  switch (schedulerPriorityLevel) {
+    case ImmediateSchedulerPriority:
+      return SyncLanePriority;
+    case UserBlockingSchedulerPriority:
+      return InputContinuousLanePriority;
+    case NormalSchedulerPriority:
+    case LowSchedulerPriority:
+      // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
+      return DefaultLanePriority;
+    case IdleSchedulerPriority:
+      return IdleLanePriority;
+    default:
+      return NoLanePriority;
+  }
+}
+
 // TODO: can we stop exporting these?
 export let _enabled = true;
 
@@ -410,8 +438,6 @@ export function getEventPriority(domEventName: DOMEventName): * {
       // Eventually this mechanism will be replaced by a check
       // of the current priority on the native scheduler.
       const schedulerPriority = getCurrentPriorityLevel();
-      // TODO: Inline schedulerPriorityToLanePriority into this file
-      // when we delete the enableNativeEventPriorityInference flag.
       return schedulerPriorityToLanePriority(schedulerPriority);
     }
     default:
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 1a7ccbd07fbc..f7663b059358 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -27,7 +27,6 @@ import {
   LegacyRoot,
 } from 'react-reconciler/src/ReactRootTags';
 
-import {enableNativeEventPriorityInference} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 const {IsSomeRendererActing} = ReactSharedInternals;
@@ -934,19 +933,12 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     discreteUpdates: NoopRenderer.discreteUpdates,
 
     idleUpdates<T>(fn: () => T): T {
-      if (enableNativeEventPriorityInference) {
-        const prevEventPriority = currentEventPriority;
-        currentEventPriority = NoopRenderer.IdleEventPriority;
-        try {
-          fn();
-        } finally {
-          currentEventPriority = prevEventPriority;
-        }
-      } else {
-        return Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_IdlePriority,
-          fn,
-        );
+      const prevEventPriority = currentEventPriority;
+      currentEventPriority = NoopRenderer.IdleEventPriority;
+      try {
+        fn();
+      } finally {
+        currentEventPriority = prevEventPriority;
       }
     },
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 7e577abb228e..ef74b355ebfa 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -42,7 +42,6 @@ import {
   ImmediatePriority as ImmediateSchedulerPriority,
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
-  LowPriority as LowSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
   NoPriority as NoSchedulerPriority,
 } from './SchedulerWithReactIntegration.new';
@@ -275,25 +274,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   }
 }
 
-export function schedulerPriorityToLanePriority(
-  schedulerPriorityLevel: ReactPriorityLevel,
-): LanePriority {
-  switch (schedulerPriorityLevel) {
-    case ImmediateSchedulerPriority:
-      return SyncLanePriority;
-    case UserBlockingSchedulerPriority:
-      return InputContinuousLanePriority;
-    case NormalSchedulerPriority:
-    case LowSchedulerPriority:
-      // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
-      return DefaultLanePriority;
-    case IdleSchedulerPriority:
-      return IdleLanePriority;
-    default:
-      return NoLanePriority;
-  }
-}
-
 export function lanePriorityToSchedulerPriority(
   lanePriority: LanePriority,
 ): ReactPriorityLevel {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index af73a5e56587..4e2ce8942f08 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -42,7 +42,6 @@ import {
   ImmediatePriority as ImmediateSchedulerPriority,
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
-  LowPriority as LowSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
   NoPriority as NoSchedulerPriority,
 } from './SchedulerWithReactIntegration.old';
@@ -275,25 +274,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   }
 }
 
-export function schedulerPriorityToLanePriority(
-  schedulerPriorityLevel: ReactPriorityLevel,
-): LanePriority {
-  switch (schedulerPriorityLevel) {
-    case ImmediateSchedulerPriority:
-      return SyncLanePriority;
-    case UserBlockingSchedulerPriority:
-      return InputContinuousLanePriority;
-    case NormalSchedulerPriority:
-    case LowSchedulerPriority:
-      // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
-      return DefaultLanePriority;
-    case IdleSchedulerPriority:
-      return IdleLanePriority;
-    default:
-      return NoLanePriority;
-  }
-}
-
 export function lanePriorityToSchedulerPriority(
   lanePriority: LanePriority,
 ): ReactPriorityLevel {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 65dc3f59181f..5b6d17431643 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,7 +32,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
-  enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -168,7 +167,6 @@ import {
   markRootExpired,
   markDiscreteUpdatesExpired,
   markRootFinished,
-  schedulerPriorityToLanePriority,
   lanePriorityToSchedulerPriority,
   higherLanePriority,
 } from './ReactFiberLane.new';
@@ -456,15 +454,8 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority);
   } else {
-    if (enableNativeEventPriorityInference) {
-      const eventLanePriority = getCurrentEventPriority();
-      lane = findUpdateLane(eventLanePriority);
-    } else {
-      const schedulerLanePriority = schedulerPriorityToLanePriority(
-        schedulerPriority,
-      );
-      lane = findUpdateLane(schedulerLanePriority);
-    }
+    const eventLanePriority = getCurrentEventPriority();
+    lane = findUpdateLane(eventLanePriority);
   }
 
   return lane;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index a265ec896b77..a41d723dfe1a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,7 +32,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
-  enableNativeEventPriorityInference,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -168,7 +167,6 @@ import {
   markRootExpired,
   markDiscreteUpdatesExpired,
   markRootFinished,
-  schedulerPriorityToLanePriority,
   lanePriorityToSchedulerPriority,
   higherLanePriority,
 } from './ReactFiberLane.old';
@@ -456,15 +454,8 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     const currentLanePriority = getCurrentUpdateLanePriority();
     lane = findUpdateLane(currentLanePriority);
   } else {
-    if (enableNativeEventPriorityInference) {
-      const eventLanePriority = getCurrentEventPriority();
-      lane = findUpdateLane(eventLanePriority);
-    } else {
-      const schedulerLanePriority = schedulerPriorityToLanePriority(
-        schedulerPriority,
-      );
-      lane = findUpdateLane(schedulerLanePriority);
-    }
+    const eventLanePriority = getCurrentEventPriority();
+    lane = findUpdateLane(eventLanePriority);
   }
 
   return lane;
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index bc05d1ab13d0..c0ab53a40dc0 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -13,10 +13,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
-let ImmediatePriority;
-let UserBlockingPriority;
 let NormalPriority;
-let LowPriority;
 let IdlePriority;
 let runWithPriority;
 let startTransition;
@@ -28,33 +25,12 @@ describe('ReactSchedulerIntegration', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
-    ImmediatePriority = Scheduler.unstable_ImmediatePriority;
-    UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
     NormalPriority = Scheduler.unstable_NormalPriority;
-    LowPriority = Scheduler.unstable_LowPriority;
     IdlePriority = Scheduler.unstable_IdlePriority;
     runWithPriority = Scheduler.unstable_runWithPriority;
     startTransition = React.unstable_startTransition;
   });
 
-  function getCurrentPriorityAsString() {
-    const priorityLevel = Scheduler.unstable_getCurrentPriorityLevel();
-    switch (priorityLevel) {
-      case ImmediatePriority:
-        return 'Immediate';
-      case UserBlockingPriority:
-        return 'UserBlocking';
-      case NormalPriority:
-        return 'Normal';
-      case LowPriority:
-        return 'Low';
-      case IdlePriority:
-        return 'Idle';
-      default:
-        throw Error('Unknown priority level: ' + priorityLevel);
-    }
-  }
-
   // 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}) {
@@ -68,66 +44,6 @@ describe('ReactSchedulerIntegration', () => {
     );
   }
 
-  // TODO: Figure out what to do with these tests. I don't think most of them
-  // make sense once we decouple Scheduler from React. Perhaps need similar
-  // tests for React DOM.
-  // @gate !enableNativeEventPriorityInference
-  it('has correct priority during rendering', () => {
-    function ReadPriority() {
-      Scheduler.unstable_yieldValue(
-        'Priority: ' + getCurrentPriorityAsString(),
-      );
-      return null;
-    }
-    ReactNoop.render(<ReadPriority />);
-    expect(Scheduler).toFlushAndYield(['Priority: Normal']);
-
-    runWithPriority(UserBlockingPriority, () => {
-      ReactNoop.render(<ReadPriority />);
-    });
-    expect(Scheduler).toFlushAndYield(['Priority: UserBlocking']);
-
-    runWithPriority(IdlePriority, () => {
-      ReactNoop.render(<ReadPriority />);
-    });
-    expect(Scheduler).toFlushAndYield(['Priority: Idle']);
-  });
-
-  // TODO: Figure out what to do with these tests. I don't think most of them
-  // make sense once we decouple Scheduler from React. Perhaps need similar
-  // tests for React DOM.
-  // @gate !enableNativeEventPriorityInference
-  it('has correct priority when continuing a render after yielding', () => {
-    function ReadPriority() {
-      Scheduler.unstable_yieldValue(
-        'Priority: ' + getCurrentPriorityAsString(),
-      );
-      return null;
-    }
-
-    runWithPriority(UserBlockingPriority, () => {
-      ReactNoop.render(
-        <>
-          <ReadPriority />
-          <ReadPriority />
-          <ReadPriority />
-        </>,
-      );
-    });
-
-    // Render part of the tree
-    expect(Scheduler).toFlushAndYieldThrough(['Priority: UserBlocking']);
-
-    // Priority is set back to normal when yielding
-    expect(getCurrentPriorityAsString()).toEqual('Normal');
-
-    // Priority is restored to user-blocking when continuing
-    expect(Scheduler).toFlushAndYield([
-      'Priority: UserBlocking',
-      'Priority: UserBlocking',
-    ]);
-  });
-
   it('passive effects are called before Normal-pri scheduled in layout effects', async () => {
     const {useEffect, useLayoutEffect} = React;
     function Effects({step}) {
@@ -172,28 +88,6 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
-  // TODO: Figure out what to do with these tests. I don't think most of them
-  // make sense once we decouple Scheduler from React. Perhaps need similar
-  // tests for React DOM.
-  // @gate !enableNativeEventPriorityInference
-  it('after completing a level of work, infers priority of the next batch based on its expiration time', () => {
-    function App({label}) {
-      Scheduler.unstable_yieldValue(
-        `${label} [${getCurrentPriorityAsString()}]`,
-      );
-      return label;
-    }
-
-    // Schedule two separate updates at different priorities
-    runWithPriority(UserBlockingPriority, () => {
-      ReactNoop.render(<App label="A" />);
-    });
-    ReactNoop.render(<App label="B" />);
-
-    // The second update should run at normal priority
-    expect(Scheduler).toFlushAndYield(['A [UserBlocking]', 'B [Normal]']);
-  });
-
   it('requests a paint after committing', () => {
     const scheduleCallback = Scheduler.unstable_scheduleCallback;
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 6afa7588bbfb..c322a0a48ed4 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -341,7 +341,6 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate experimental
-  // @gate enableNativeEventPriorityInference
   it('should detect a tear during a higher priority interruption', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 4adc7ac9b4dd..5029a6f4900b 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -152,6 +152,4 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 
 export const enableSyncMicroTasks = false;
 
-export const enableNativeEventPriorityInference = false;
-
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 6c891df1b3ea..b6a8016ec8b7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -58,7 +58,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableSyncMicroTasks = false;
-export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 4e12e63a4fa0..cb8721af25fe 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableSyncMicroTasks = false;
-export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 27dd0cdc9bda..b504491d98de 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableSyncMicroTasks = false;
-export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 8d3f3a92ea23..ddab49284e43 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableSyncMicroTasks = false;
-export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 5d14b1de5fc5..7098bfed2aa5 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableSyncMicroTasks = false;
-export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 12fcc75be187..a321f5ea12f9 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableSyncMicroTasks = false;
-export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index c89caeffcf06..bb6a95235565 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableSyncMicroTasks = false;
-export const enableNativeEventPriorityInference = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 46dc190a6127..df9801263497 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -56,5 +56,4 @@ export const enableUseRefAccessWarning = __VARIANT__;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableSyncMicroTasks = __VARIANT__;
-export const enableNativeEventPriorityInference = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 35bbe2cb1fbe..893c2699b0d0 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,7 +32,6 @@ export const {
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
   enableSyncMicroTasks,
-  enableNativeEventPriorityInference,
   enableLazyContextPropagation,
 } = dynamicFeatureFlags;
 

From ec372faefedd1932f45b2135122ad4bb306f2c7c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Mar 2021 08:52:19 -0500
Subject: [PATCH 0306/1603] Remove DevTools dependency on Scheduler
 runWithPriority (#20967)

---
 .../devtools/views/Components/TreeContext.js  | 15 ++----
 .../src/app/PriorityLevels/index.js           | 54 -------------------
 .../react-devtools-shell/src/app/index.js     |  2 -
 3 files changed, 5 insertions(+), 66 deletions(-)
 delete mode 100644 packages/react-devtools-shell/src/app/PriorityLevels/index.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index a824bd493ff8..0ab6e57c4b41 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -34,12 +34,8 @@ import {
   useMemo,
   useReducer,
   useRef,
+  unstable_startTransition as startTransition,
 } from 'react';
-import {
-  unstable_next as next,
-  unstable_runWithPriority as runWithPriority,
-  unstable_UserBlockingPriority as UserBlockingPriority,
-} from 'scheduler';
 import {createRegExp} from '../utils';
 import {BridgeContext, StoreContext} from '../context';
 import Store from '../../store';
@@ -923,11 +919,10 @@ function TreeContextController({
 
   const dispatchWrapper = useCallback(
     (action: Action) => {
-      // Run the first update at "user-blocking" priority in case dispatch is called from a non-React event.
-      // In this case, the current (and "next") priorities would both be "normal",
-      // and suspense would potentially block both updates.
-      runWithPriority(UserBlockingPriority, () => dispatch(action));
-      next(() => dispatch({type: 'UPDATE_INSPECTED_ELEMENT_ID'}));
+      dispatch(action);
+      startTransition(() => {
+        dispatch({type: 'UPDATE_INSPECTED_ELEMENT_ID'});
+      });
     },
     [dispatch],
   );
diff --git a/packages/react-devtools-shell/src/app/PriorityLevels/index.js b/packages/react-devtools-shell/src/app/PriorityLevels/index.js
deleted file mode 100644
index 32858eb08a04..000000000000
--- a/packages/react-devtools-shell/src/app/PriorityLevels/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {Fragment, useCallback, useState} from 'react';
-import {
-  unstable_IdlePriority as IdlePriority,
-  unstable_LowPriority as LowPriority,
-  unstable_runWithPriority as runWithPriority,
-} from 'scheduler';
-
-export default function PriorityLevels() {
-  const [defaultPriority, setDefaultPriority] = useState<boolean>(false);
-  const [idlePriority, setIdlePriority] = useState<boolean>(false);
-  const [normalPriority, setLowPriority] = useState<boolean>(false);
-
-  const resetSequence = useCallback(() => {
-    setDefaultPriority(false);
-    setLowPriority(false);
-    setIdlePriority(false);
-  }, []);
-
-  const startSequence = useCallback(() => {
-    setDefaultPriority(true);
-    runWithPriority(LowPriority, () => setLowPriority(true));
-    runWithPriority(IdlePriority, () => setIdlePriority(true));
-  }, []);
-
-  const labels = [];
-  if (defaultPriority) {
-    labels.push('(default priority)');
-  }
-  if (normalPriority) {
-    labels.push('Low Priority');
-  }
-  if (idlePriority) {
-    labels.push('Idle Priority');
-  }
-
-  return (
-    <Fragment>
-      <h1>Priority Levels</h1>
-      <button onClick={resetSequence}>Reset</button>
-      <button onClick={startSequence}>Start sequence</button>
-      <span>{labels.join(', ')}</span>
-    </Fragment>
-  );
-}
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index b3c7b9be228c..f5683b69a82f 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -15,7 +15,6 @@ import Hydration from './Hydration';
 import InlineWarnings from './InlineWarnings';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
-import PriorityLevels from './PriorityLevels';
 import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
@@ -55,7 +54,6 @@ function mountTestApp() {
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
   mountHelper(InlineWarnings);
-  mountHelper(PriorityLevels);
   mountHelper(ReactNativeWeb);
   mountHelper(Toggle);
   mountHelper(SuspenseTree);

From 60182d64ca030ef28782c7e67be373eac81ae4c2 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 10 Mar 2021 12:44:25 -0500
Subject: [PATCH 0307/1603] Cleanup tests using runWithPriority. (#20958)

* Remove Scheduler.runWithPriority from some tests

* Mark experimental test experimental
---
 ...DOMServerPartialHydration-test.internal.js |  7 +++-
 ...MServerSelectiveHydration-test.internal.js |  7 +++-
 .../src/__tests__/ReactExpiration-test.js     |  6 +---
 .../ReactHooksWithNoopRenderer-test.js        |  5 +--
 .../__tests__/ReactIncrementalUpdates-test.js | 32 +++----------------
 .../ReactSuspenseWithNoopRenderer-test.js     | 20 +++---------
 .../useMutableSource-test.internal.js         | 29 ++++++-----------
 .../ReactDOMTracing-test.internal.js          |  6 +---
 .../__tests__/ReactProfiler-test.internal.js  | 16 ++++------
 9 files changed, 40 insertions(+), 88 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 2ad221d5fbcb..91f6e8f02272 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -18,6 +18,11 @@ let Suspense;
 let SuspenseList;
 let act;
 
+// Copied from ReactFiberLanes. Don't do this!
+// This is hard coded directly to avoid needing to import, and
+// we'll remove this as we replace runWithPriority with React APIs.
+export const IdleLanePriority = 2;
+
 function dispatchMouseEvent(to, from) {
   if (!to) {
     to = null;
@@ -623,7 +628,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.textContent).toBe('Hello');
 
     // Schedule an update at idle priority
-    Scheduler.unstable_runWithPriority(Scheduler.unstable_IdlePriority, () => {
+    ReactDOM.unstable_runWithPriority(IdleLanePriority, () => {
       root.render(<App text="Hi" className="hi" />);
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 19cf6065e6b9..96adf85ba35a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -19,6 +19,11 @@ let Scheduler;
 let Suspense;
 let act;
 
+// Copied from ReactFiberLanes. Don't do this!
+// This is hard coded directly to avoid needing to import, and
+// we'll remove this as we replace runWithPriority with React APIs.
+export const IdleLanePriority = 2;
+
 function dispatchMouseHoverEvent(to, from) {
   if (!to) {
     to = null;
@@ -96,7 +101,7 @@ function dispatchClickEvent(target) {
 // 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) {
-  Scheduler.unstable_runWithPriority(Scheduler.unstable_IdlePriority, () => {
+  ReactDOM.unstable_runWithPriority(IdleLanePriority, () => {
     const prevEvent = window.event;
     window.event = {type: 'message'};
     try {
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 48ff50880f94..ed4996531821 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -550,11 +550,7 @@ describe('ReactExpiration', () => {
     function App() {
       const [highPri, setHighPri] = useState(0);
       const [normalPri, setNormalPri] = useState(0);
-      updateHighPri = () =>
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => setHighPri(n => n + 1),
-        );
+      updateHighPri = () => ReactNoop.flushSync(() => setHighPri(n => n + 1));
       updateNormalPri = () => setNormalPri(n => n + 1);
       return (
         <>
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 4c7d308a9c90..cf4e4a3f3b61 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -3166,10 +3166,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
 
       await act(async () => {
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          transition,
-        );
+        transition();
 
         expect(Scheduler).toFlushAndYield([
           'Before... Pending: true',
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index e24e2576dde2..95acb7d8fc77 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -530,14 +530,8 @@ describe('ReactIncrementalUpdates', () => {
         Scheduler.unstable_yieldValue('Committed: ' + log);
         if (log === 'B') {
           // Right after B commits, schedule additional updates.
-          // TODO: Double wrapping is temporary while we remove Scheduler runWithPriority.
           ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
-            Scheduler.unstable_runWithPriority(
-              Scheduler.unstable_UserBlockingPriority,
-              () => {
-                pushToLog('C');
-              },
-            ),
+            pushToLog('C'),
           );
           setLog(prevLog => prevLog + 'D');
         }
@@ -556,14 +550,8 @@ describe('ReactIncrementalUpdates', () => {
     await ReactNoop.act(async () => {
       pushToLog('A');
 
-      // TODO: Double wrapping is temporary while we remove Scheduler runWithPriority.
       ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => {
-            pushToLog('B');
-          },
-        ),
+        pushToLog('B'),
       );
     });
     expect(Scheduler).toHaveYielded([
@@ -595,14 +583,8 @@ describe('ReactIncrementalUpdates', () => {
         Scheduler.unstable_yieldValue('Committed: ' + this.state.log);
         if (this.state.log === 'B') {
           // Right after B commits, schedule additional updates.
-          // TODO: Double wrapping is temporary while we remove Scheduler runWithPriority.
           ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
-            Scheduler.unstable_runWithPriority(
-              Scheduler.unstable_UserBlockingPriority,
-              () => {
-                this.pushToLog('C');
-              },
-            ),
+            this.pushToLog('C'),
           );
           this.pushToLog('D');
         }
@@ -622,14 +604,8 @@ describe('ReactIncrementalUpdates', () => {
 
     await ReactNoop.act(async () => {
       pushToLog('A');
-      // TODO: Double wrapping is temporary while we remove Scheduler runWithPriority.
       ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => {
-            pushToLog('B');
-          },
-        ),
+        pushToLog('B'),
       );
     });
     expect(Scheduler).toHaveYielded([
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 8ec621be0d01..d7da84e67b75 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -1929,10 +1929,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // TODO: assert toErrorDev() when the warning is implemented again.
     ReactNoop.act(() => {
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => _setShow(true),
-      );
+      ReactNoop.flushSync(() => _setShow(true));
     });
   });
 
@@ -1959,10 +1956,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // TODO: assert toErrorDev() when the warning is implemented again.
     ReactNoop.act(() => {
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => show(),
-      );
+      ReactNoop.flushSync(() => show());
     });
   });
 
@@ -1991,10 +1985,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
 
     ReactNoop.act(() => {
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => showB(),
-      );
+      ReactNoop.flushSync(() => showB());
     });
 
     expect(Scheduler).toHaveYielded(['Suspend! [A]', 'Suspend! [B]']);
@@ -2025,10 +2016,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // TODO: assert toErrorDev() when the warning is implemented again.
       ReactNoop.act(() => {
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => _setShow(true),
-        );
+        ReactNoop.flushSync(() => _setShow(true));
       });
     },
   );
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index cf1db2891e11..e9fc68985023 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -1476,13 +1476,10 @@ describe('useMutableSource', () => {
         // read during render will happen to match the latest value. But it should
         // still entangle the updates to prevent the previous update (a1) from
         // rendering by itself.
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_IdlePriority,
-          () => {
-            mutateA('a0');
-            mutateB('b0');
-          },
-        );
+        React.unstable_startTransition(() => {
+          mutateA('a0');
+          mutateB('b0');
+        });
         // Finish the current render
         expect(Scheduler).toFlushUntilNextPaint(['c']);
         // a0 will re-render because of the mutation update. But it should show
@@ -1601,12 +1598,9 @@ describe('useMutableSource', () => {
       // Mutate the config. This is at lower priority so that 1) to make sure
       // it doesn't happen to get batched with the in-progress render, and 2)
       // so it doesn't interrupt the in-progress render.
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_IdlePriority,
-        () => {
-          source.valueB = '3';
-        },
-      );
+      React.unstable_startTransition(() => {
+        source.valueB = '3';
+      });
 
       expect(Scheduler).toFlushAndYieldThrough([
         // The partial render completes
@@ -1698,12 +1692,9 @@ describe('useMutableSource', () => {
       expect(source.listenerCount).toBe(1);
 
       // Mutate -> schedule update for ComponentA
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_IdlePriority,
-        () => {
-          source.value = 'two';
-        },
-      );
+      React.unstable_startTransition(() => {
+        source.value = 'two';
+      });
 
       // Commit ComponentB -> notice the change and schedule an update for ComponentB
       expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
index 114b0cfffee5..479e229d9115 100644
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -246,12 +246,8 @@ describe('ReactDOMTracing', () => {
               Scheduler.unstable_yieldValue('Child:update');
             } else {
               Scheduler.unstable_yieldValue('Child:mount');
-              // TODO: Double wrapping is temporary while we remove Scheduler runWithPriority.
               ReactDOM.unstable_runWithPriority(IdleLanePriority, () =>
-                Scheduler.unstable_runWithPriority(
-                  Scheduler.unstable_IdlePriority,
-                  () => setDidMount(true),
-                ),
+                setDidMount(true),
               );
             }
           }, [didMount]);
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index d6e44ab82096..93347b1ac2f9 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -748,6 +748,7 @@ describe('Profiler', () => {
         expect(onRender.mock.calls[2][1]).toBe('update');
       });
 
+      // @gate experimental
       it('is properly distinguish updates and nested-updates when there is more than sync remaining work', () => {
         loadModules({
           enableSchedulerTracing,
@@ -767,15 +768,12 @@ describe('Profiler', () => {
         const onRender = jest.fn();
 
         // Schedule low-priority work.
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_LowPriority,
-          () => {
-            ReactNoop.render(
-              <React.Profiler id="root" onRender={onRender}>
-                <Component />
-              </React.Profiler>,
-            );
-          },
+        React.unstable_startTransition(() =>
+          ReactNoop.render(
+            <React.Profiler id="root" onRender={onRender}>
+              <Component />
+            </React.Profiler>,
+          ),
         );
 
         // Flush sync work with a nested update

From 6556e2a8748d87c210c4840c3abc7c2e50917514 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 10 Mar 2021 17:09:24 -0500
Subject: [PATCH 0308/1603] Cleaned up unused PassiveUnmountPendingDev DEV flag
 (#20973)

---
 .../src/ReactFiberCommitWork.new.js           |  9 ----
 .../src/ReactFiberCommitWork.old.js           |  9 ----
 .../react-reconciler/src/ReactFiberFlags.js   | 48 +++++++++----------
 3 files changed, 23 insertions(+), 43 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 2f68850ffa8c..7985366d3f67 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -77,7 +77,6 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
-  PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -2341,14 +2340,6 @@ function commitPassiveUnmountEffects_complete() {
 }
 
 function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
-  if (__DEV__) {
-    finishedWork.flags &= ~PassiveUnmountPendingDev;
-    const alternate = finishedWork.alternate;
-    if (alternate !== null) {
-      alternate.flags &= ~PassiveUnmountPendingDev;
-    }
-  }
-
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index fe6916bf4c85..d50095b3bebb 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -77,7 +77,6 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
-  PassiveUnmountPendingDev,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -2341,14 +2340,6 @@ function commitPassiveUnmountEffects_complete() {
 }
 
 function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
-  if (__DEV__) {
-    finishedWork.flags &= ~PassiveUnmountPendingDev;
-    const alternate = finishedWork.alternate;
-    if (alternate !== null) {
-      alternate.flags &= ~PassiveUnmountPendingDev;
-    }
-  }
-
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 61abbb6122ed..5906af7f492d 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,51 +12,49 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b0000000000000000000000;
-export const PerformedWork = /*                */ 0b0000000000000000000001;
+export const NoFlags = /*                      */ 0b000000000000000000000;
+export const PerformedWork = /*                */ 0b000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b0000000000000000000010;
-export const Update = /*                       */ 0b0000000000000000000100;
+export const Placement = /*                    */ 0b000000000000000000010;
+export const Update = /*                       */ 0b000000000000000000100;
 export const PlacementAndUpdate = /*           */ Placement | Update;
-export const Deletion = /*                     */ 0b0000000000000000001000;
-export const ChildDeletion = /*                */ 0b0000000000000000010000;
-export const ContentReset = /*                 */ 0b0000000000000000100000;
-export const Callback = /*                     */ 0b0000000000000001000000;
-export const DidCapture = /*                   */ 0b0000000000000010000000;
-export const Ref = /*                          */ 0b0000000000000100000000;
-export const Snapshot = /*                     */ 0b0000000000001000000000;
-export const Passive = /*                      */ 0b0000000000010000000000;
-export const Hydrating = /*                    */ 0b0000000000100000000000;
+export const Deletion = /*                     */ 0b000000000000000001000;
+export const ChildDeletion = /*                */ 0b000000000000000010000;
+export const ContentReset = /*                 */ 0b000000000000000100000;
+export const Callback = /*                     */ 0b000000000000001000000;
+export const DidCapture = /*                   */ 0b000000000000010000000;
+export const Ref = /*                          */ 0b000000000000100000000;
+export const Snapshot = /*                     */ 0b000000000001000000000;
+export const Passive = /*                      */ 0b000000000010000000000;
+export const Hydrating = /*                    */ 0b000000000100000000000;
 export const HydratingAndUpdate = /*           */ Hydrating | Update;
-export const Visibility = /*                   */ 0b0000000001000000000000;
+export const Visibility = /*                   */ 0b000000001000000000000;
 
 export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
 
 // Union of all commit flags (flags with the lifetime of a particular commit)
-export const HostEffectMask = /*               */ 0b0000000001111111111111;
+export const HostEffectMask = /*               */ 0b000000001111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b0000000010000000000000;
-export const ShouldCapture = /*                */ 0b0000000100000000000000;
-// TODO (effects) Remove this bit once the new reconciler is synced to the old.
-export const PassiveUnmountPendingDev = /*     */ 0b0000001000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b0000010000000000000000;
-export const DidPropagateContext = /*          */ 0b0000100000000000000000;
-export const NeedsPropagation = /*             */ 0b0001000000000000000000;
+export const Incomplete = /*                   */ 0b000000010000000000000;
+export const ShouldCapture = /*                */ 0b000000100000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b000001000000000000000;
+export const DidPropagateContext = /*          */ 0b000010000000000000000;
+export const NeedsPropagation = /*             */ 0b000100000000000000000;
 
 // 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 PassiveStatic = /*                */ 0b0010000000000000000000;
+export const PassiveStatic = /*                */ 0b001000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b0100000000000000000000;
-export const MountPassiveDev = /*              */ 0b1000000000000000000000;
+export const MountLayoutDev = /*               */ 0b010000000000000000000;
+export const MountPassiveDev = /*              */ 0b100000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.

From acde654698659326af0ac4eded4a3ae7cb780a55 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 10 Mar 2021 17:36:13 -0500
Subject: [PATCH 0309/1603] Unify InputDiscreteLane with SyncLane (#20968)

* Unify sync priority and input discrete

* Fix lint

* Use update lane instead

* Update sync lane labels
---
 .../src/__tests__/ReactDOMFiberAsync-test.js  | 41 +++++--------------
 .../ReactDOMNativeEventHeuristic-test.js      | 11 ++---
 .../__tests__/ChangeEventPlugin-test.js       |  5 +--
 .../__tests__/SimpleEventPlugin-test.js       | 37 ++++++-----------
 .../src/ReactFiberLane.new.js                 |  2 +-
 .../src/ReactFiberLane.old.js                 |  2 +-
 .../src/ReactFiberWorkLoop.new.js             |  7 ----
 .../src/ReactFiberWorkLoop.old.js             |  7 ----
 .../SchedulingProfilerLabels-test.internal.js |  4 +-
 9 files changed, 31 insertions(+), 85 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index ee609d7c2e0c..7fde6e5ddeb6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -386,63 +386,44 @@ describe('ReactDOMFiberAsync', () => {
     });
 
     // @gate experimental
-    it('ignores discrete events on a pending removed element', () => {
+    it('ignores discrete events on a pending removed element', 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
-        }
+
         return (
           <div>
             <button onClick={disableForm} ref={disableButtonRef}>
               Disable
             </button>
-            {active ? (
-              <button onClick={submitForm} ref={submitButtonRef}>
-                Submit
-              </button>
-            ) : null}
+            {active ? <button ref={submitButtonRef}>Submit</button> : null}
           </div>
         );
       }
 
       const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Form />);
-      // Flush
-      Scheduler.unstable_flushAll();
+      await act(async () => {
+        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);
 
-      // 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.
-      submitButton.dispatchEvent(secondEvent);
-
-      // Therefore the form should never have been submitted.
-      expect(formSubmitted).toBe(false);
-
-      expect(submitButtonRef.current).toBe(null);
+      // The click event is flushed synchronously, even in concurrent mode.
+      expect(submitButton.current).toBe(undefined);
     });
 
     // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 7c87698b1a35..dd682d2def59 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -67,9 +67,9 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     }
 
     const root = ReactDOM.unstable_createRoot(container);
-    root.render(<Form />);
-    // Flush
-    Scheduler.unstable_flushAll();
+    await act(() => {
+      root.render(<Form />);
+    });
 
     const disableButton = disableButtonRef.current;
     expect(disableButton.tagName).toBe('BUTTON');
@@ -81,11 +81,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       dispatchAndSetCurrentEvent(disableButton, firstEvent),
     ).toErrorDev(['An update to Form inside a test was not wrapped in act']);
 
-    // 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');
-
     // Discrete events should be flushed in a microtask.
     // Verify that the second button was removed.
     await null;
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 26630b68b11f..9b7fed146847 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -685,7 +685,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     // @gate experimental
-    it('is async for non-input events', async () => {
+    it('is sync for non-input events', async () => {
       const root = ReactDOM.unstable_createRoot(container);
       let input;
 
@@ -724,9 +724,6 @@ describe('ChangeEventPlugin', () => {
       input.dispatchEvent(
         new Event('click', {bubbles: true, cancelable: true}),
       );
-      // Nothing should have changed
-      expect(Scheduler).toHaveYielded([]);
-      expect(input.value).toBe('initial');
 
       // Flush microtask queue.
       await null;
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 9af14ccd8680..95ea1cc598a5 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -240,7 +240,7 @@ describe('SimpleEventPlugin', function() {
     });
 
     // @gate experimental
-    it('flushes pending interactive work before extracting event handler', () => {
+    it('flushes pending interactive work before exiting event handler', () => {
       container = document.createElement('div');
       const root = ReactDOM.unstable_createRoot(container);
       document.body.appendChild(container);
@@ -292,17 +292,14 @@ describe('SimpleEventPlugin', function() {
       expect(Scheduler).toHaveYielded([
         // The handler fired
         'Side-effect',
-        // but the component did not re-render yet, because it's async
+        // The component re-rendered synchronously, even in concurrent mode.
+        'render button: disabled',
       ]);
 
       // Click the button again
       click();
       expect(Scheduler).toHaveYielded([
-        // Before handling this second click event, the previous interactive
-        // update is flushed
-        'render button: disabled',
-        // The event handler was removed from the button, so there's no second
-        // side-effect
+        // 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
@@ -359,8 +356,8 @@ describe('SimpleEventPlugin', function() {
 
       // Click the button a single time
       click();
-      // The counter should not have updated yet because it's async
-      expect(button.textContent).toEqual('Count: 0');
+      // The counter should update synchronously, even in concurrent mode.
+      expect(button.textContent).toEqual('Count: 1');
 
       // Click the button many more times
       await TestUtils.act(async () => {
@@ -442,15 +439,10 @@ describe('SimpleEventPlugin', function() {
         button.dispatchEvent(event);
       }
 
-      // Click the button a single time
-      click();
-      // Nothing should flush on the first click.
-      expect(Scheduler).toHaveYielded([]);
-      // Click again. This will force the previous discrete update to flush. But
-      // only the high-pri count will increase.
+      // Click the button a single time.
+      // This will flush at the end of the event, even in concurrent mode.
       click();
       expect(Scheduler).toHaveYielded(['High-pri count: 1, Low-pri count: 0']);
-      expect(button.textContent).toEqual('High-pri count: 1, Low-pri count: 0');
 
       // Click the button many more times
       click();
@@ -460,7 +452,7 @@ describe('SimpleEventPlugin', function() {
       click();
       click();
 
-      // Flush the remaining work.
+      // Each update should synchronously flush, even in concurrent mode.
       expect(Scheduler).toHaveYielded([
         'High-pri count: 2, Low-pri count: 0',
         'High-pri count: 3, Low-pri count: 0',
@@ -470,16 +462,13 @@ describe('SimpleEventPlugin', function() {
         'High-pri count: 7, Low-pri count: 0',
       ]);
 
-      // Flush the microtask queue
-      await null;
-
-      // At the end, both counters should equal the total number of clicks
-      expect(Scheduler).toHaveYielded(['High-pri count: 8, Low-pri count: 0']);
+      // Now flush the scheduler to apply the transition updates.
+      // At the end, both counters should equal the total number of clicks.
       expect(Scheduler).toFlushAndYield([
-        'High-pri count: 8, Low-pri count: 8',
+        'High-pri count: 7, Low-pri count: 7',
       ]);
 
-      expect(button.textContent).toEqual('High-pri count: 8, Low-pri count: 8');
+      expect(button.textContent).toEqual('High-pri count: 7, Low-pri count: 7');
     });
   });
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index ef74b355ebfa..4a0e2a151bcc 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -566,7 +566,7 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
     case SyncBatchedLanePriority:
       return SyncBatchedLane;
     case InputDiscreteLanePriority:
-      return InputDiscreteLane;
+      return SyncLane;
     case InputContinuousLanePriority:
       return InputContinuousLane;
     case DefaultLanePriority:
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4e2ce8942f08..28a5e2e54221 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -566,7 +566,7 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
     case SyncBatchedLanePriority:
       return SyncBatchedLane;
     case InputDiscreteLanePriority:
-      return InputDiscreteLane;
+      return SyncLane;
     case InputContinuousLanePriority:
       return InputContinuousLane;
     case DefaultLanePriority:
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 5b6d17431643..8f83cf88fea9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -90,7 +90,6 @@ import {
   clearContainer,
   getCurrentEventPriority,
   supportsMicrotasks,
-  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -737,12 +736,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       ImmediateSchedulerPriority,
       performSyncWorkOnRoot.bind(null, root),
     );
-  } else if (
-    supportsMicrotasks &&
-    newCallbackPriority === InputDiscreteLanePriority
-  ) {
-    scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
-    newCallbackNode = null;
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
       newCallbackPriority,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index a41d723dfe1a..4b59de6b0d5d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -90,7 +90,6 @@ import {
   clearContainer,
   getCurrentEventPriority,
   supportsMicrotasks,
-  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -737,12 +736,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       ImmediateSchedulerPriority,
       performSyncWorkOnRoot.bind(null, root),
     );
-  } else if (
-    supportsMicrotasks &&
-    newCallbackPriority === InputDiscreteLanePriority
-  ) {
-    scheduleMicrotask(performSyncWorkOnRoot.bind(null, root));
-    newCallbackNode = null;
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
       newCallbackPriority,
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index d06371940b47..6474be855b38 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -140,9 +140,7 @@ describe('SchedulingProfiler labels', () => {
       targetRef.current.click();
     });
     expect(clearedMarks).toContain(
-      `--schedule-state-update-${formatLanes(
-        ReactFiberLane.InputDiscreteLane,
-      )}-App`,
+      `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-App`,
     );
   });
 

From 860f673a7a6bf826010d41de2f66de62171ab676 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 10 Mar 2021 18:34:35 -0500
Subject: [PATCH 0310/1603] Remove Blocking Mode (again) (#20974)

* Remove Blocking Mode (again)

* Rename batchingmode file and comment
---
 packages/react-dom/index.classic.fb.js        |  2 -
 packages/react-dom/index.experimental.js      |  1 -
 packages/react-dom/index.js                   |  2 -
 packages/react-dom/index.modern.fb.js         |  2 -
 .../src/__tests__/ReactDOMFiberAsync-test.js  | 40 ++++++-------
 ...DOMServerPartialHydration-test.internal.js |  2 +-
 .../ReactDOMServerSuspense-test.internal.js   |  2 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   | 58 ++-----------------
 .../ReactUnmockedSchedulerWarning-test.js     | 19 ------
 packages/react-dom/src/client/ReactDOM.js     |  3 +-
 packages/react-dom/src/client/ReactDOMRoot.js | 32 ++--------
 packages/react-noop-renderer/src/ReactNoop.js |  1 -
 .../src/ReactNoopPersistent.js                |  1 -
 .../src/createReactNoop.js                    | 33 +----------
 .../react-reconciler/src/ReactFiber.new.js    | 23 +-------
 .../react-reconciler/src/ReactFiber.old.js    | 23 +-------
 .../src/ReactFiberBeginWork.new.js            | 21 +++----
 .../src/ReactFiberBeginWork.old.js            | 21 +++----
 .../src/ReactFiberCompleteWork.new.js         | 11 +---
 .../src/ReactFiberCompleteWork.old.js         | 11 +---
 .../src/ReactFiberHooks.new.js                |  4 +-
 .../src/ReactFiberHooks.old.js                |  4 +-
 .../src/ReactFiberRoot.new.js                 |  5 +-
 .../src/ReactFiberRoot.old.js                 |  5 +-
 .../src/ReactFiberThrow.new.js                | 10 ++--
 .../src/ReactFiberThrow.old.js                | 10 ++--
 .../src/ReactFiberWorkLoop.new.js             | 11 ++--
 .../src/ReactFiberWorkLoop.old.js             | 11 ++--
 .../react-reconciler/src/ReactRootTags.js     |  5 +-
 .../react-reconciler/src/ReactTypeOfMode.js   | 13 ++---
 ...rnal.js => ReactBatching-test.internal.js} | 25 ++++----
 ...tIncrementalErrorHandling-test.internal.js |  4 --
 .../src/__tests__/ReactOffscreen-test.js      | 12 ++--
 .../ReactSuspenseFuzz-test.internal.js        |  7 ---
 .../ReactStrictMode-test.internal.js          | 17 ------
 packages/shared/ReactFeatureFlags.js          |  2 +-
 36 files changed, 121 insertions(+), 332 deletions(-)
 rename packages/react-reconciler/src/__tests__/{ReactBatchedMode-test.internal.js => ReactBatching-test.internal.js} (86%)

diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index ea9dd9aba257..0b16c0808368 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -30,8 +30,6 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index 9ed70f3959ec..e685ec6e8a1f 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -20,7 +20,6 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot as unstable_createRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   // DO NOT USE: Temporarily exposing this to migrate off of Scheduler.runWithPriority.
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 59825272c3a8..7adfaa4ad218 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -21,8 +21,6 @@ export {
   unmountComponentAtNode,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index addcce97749c..f91cc3cb8955 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -15,8 +15,6 @@ export {
   version,
   createRoot,
   createRoot as unstable_createRoot,
-  createBlockingRoot,
-  createBlockingRoot as unstable_createBlockingRoot,
   unstable_flushControlled,
   unstable_scheduleHydration,
   unstable_runWithPriority,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index 7fde6e5ddeb6..ff4e1b5aeeb5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -574,31 +574,29 @@ describe('ReactDOMFiberAsync', () => {
     expect(containerC.textContent).toEqual('Finished');
   });
 
-  describe('createBlockingRoot', () => {
-    // @gate experimental
-    it('updates flush without yielding in the next event', () => {
-      const root = ReactDOM.unstable_createBlockingRoot(container);
+  // @gate experimental
+  it('updates flush without yielding in the next event', () => {
+    const root = ReactDOM.unstable_createRoot(container);
 
-      function Text(props) {
-        Scheduler.unstable_yieldValue(props.text);
-        return props.text;
-      }
+    function Text(props) {
+      Scheduler.unstable_yieldValue(props.text);
+      return props.text;
+    }
 
-      root.render(
-        <>
-          <Text text="A" />
-          <Text text="B" />
-          <Text text="C" />
-        </>,
-      );
+    root.render(
+      <>
+        <Text text="A" />
+        <Text text="B" />
+        <Text text="C" />
+      </>,
+    );
 
-      // Nothing should have rendered yet
-      expect(container.textContent).toEqual('');
+    // Nothing should have rendered yet
+    expect(container.textContent).toEqual('');
 
-      // Everything should render immediately in the next event
-      expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
-      expect(container.textContent).toEqual('ABC');
-    });
+    // Everything should render immediately in the next event
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+    expect(container.textContent).toEqual('ABC');
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 91f6e8f02272..00ed4050d6a9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -357,7 +357,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+        'ReactDOM.createRoot(container, { hydrate: true })' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 6c48b36bd107..7b28d572ccce 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -127,7 +127,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      const root = ReactDOM.createBlockingRoot(parent, {hydrate: true});
+      const root = ReactDOM.createRoot(parent, {hydrate: true});
       root.render(example);
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 57807679e8eb..242743d2f373 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -72,33 +72,6 @@ describe('ReactTestUtils.act()', () => {
 
   runActTests('legacy mode', renderLegacy, unmountLegacy, rerenderLegacy);
 
-  // and then in blocking mode
-  if (__EXPERIMENTAL__) {
-    let blockingRoot = null;
-    const renderBatched = (el, dom) => {
-      blockingRoot = ReactDOM.unstable_createBlockingRoot(dom);
-      blockingRoot.render(el);
-    };
-
-    const unmountBatched = dom => {
-      if (blockingRoot !== null) {
-        blockingRoot.unmount();
-        blockingRoot = null;
-      }
-    };
-
-    const rerenderBatched = el => {
-      blockingRoot.render(el);
-    };
-
-    runActTests(
-      'blocking mode',
-      renderBatched,
-      unmountBatched,
-      rerenderBatched,
-    );
-  }
-
   describe('unacted effects', () => {
     function App() {
       React.useEffect(() => {}, []);
@@ -124,19 +97,6 @@ describe('ReactTestUtils.act()', () => {
       ]);
     });
 
-    // @gate experimental
-    it('warns in blocking mode', () => {
-      expect(() => {
-        const root = ReactDOM.unstable_createBlockingRoot(
-          document.createElement('div'),
-        );
-        root.render(<App />);
-        Scheduler.unstable_flushAll();
-      }).toErrorDev([
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
-    });
-
     // @gate experimental
     it('warns in concurrent mode', () => {
       expect(() => {
@@ -731,14 +691,10 @@ function runActTests(label, render, unmount, rerender) {
 
         it('triggers fallbacks if available', async () => {
           if (label !== 'legacy mode') {
-            // FIXME: Support for Blocking* and Concurrent Mode were
-            // intentionally removed from the public version of `act`. It will
-            // be added back in a future major version, before Blocking and and
-            // Concurrent Mode are officially released. Consider disabling all
-            // non-Legacy tests in this suite until then.
-            //
-            // *Blocking Mode actually does happen to work, though
-            // not "officially" since it's an unreleased feature.
+            // FIXME: Support for Concurrent Root intentionally removed
+            // from the public version of `act`. It will be added back in
+            // a future major version, before the Concurrent Root is released.
+            // Consider skipping all non-Legacy tests in this suite until then.
             return;
           }
 
@@ -794,10 +750,8 @@ function runActTests(label, render, unmount, rerender) {
             // In Concurrent Mode, refresh transitions delay indefinitely.
             expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
           } else {
-            // In Legacy Mode and Blocking Mode, all fallbacks are forced to
-            // display, even during a refresh transition.
-            // TODO: Consider delaying indefinitely in Blocking Mode, to match
-            // Concurrent Mode semantics.
+            // In Legacy Mode, all fallbacks are forced to display,
+            // even during a refresh transition.
             expect(
               document.querySelector('[data-test-id=spinner]'),
             ).not.toBeNull();
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
index 435b4989c115..79437e7f5c76 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -43,22 +43,3 @@ it('should warn when rendering in concurrent mode', () => {
     ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
   }).toErrorDev([]);
 });
-
-// @gate experimental
-it('should warn when rendering in blocking mode', () => {
-  expect(() => {
-    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
-      <App />,
-    );
-  }).toErrorDev(
-    'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
-      'to guarantee consistent behaviour across tests and browsers.',
-    {withoutStack: true},
-  );
-  // does not warn twice
-  expect(() => {
-    ReactDOM.unstable_createBlockingRoot(document.createElement('div')).render(
-      <App />,
-    );
-  }).toErrorDev([]);
-});
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 66ae001c3b27..7cff285a938d 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -18,7 +18,7 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, createBlockingRoot, isValidContainer} from './ReactDOMRoot';
+import {createRoot, isValidContainer} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -201,7 +201,6 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot,
-  createBlockingRoot,
   flushControlled as unstable_flushControlled,
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 62a72dc22961..56532d5d6748 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -51,25 +51,17 @@ import {
   registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
-import {
-  BlockingRoot,
-  ConcurrentRoot,
-  LegacyRoot,
-} from 'react-reconciler/src/ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 
 function ReactDOMRoot(container: Container, options: void | RootOptions) {
   this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
 }
 
-function ReactDOMBlockingRoot(
-  container: Container,
-  tag: RootTag,
-  options: void | RootOptions,
-) {
-  this._internalRoot = createRootImpl(container, tag, options);
+function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) {
+  this._internalRoot = createRootImpl(container, LegacyRoot, options);
 }
 
-ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function(
+ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
   children: ReactNodeList,
 ): void {
   const root = this._internalRoot;
@@ -99,7 +91,7 @@ ReactDOMRoot.prototype.render = ReactDOMBlockingRoot.prototype.render = function
   updateContainer(children, root, null, null);
 };
 
-ReactDOMRoot.prototype.unmount = ReactDOMBlockingRoot.prototype.unmount = function(): void {
+ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function(): void {
   if (__DEV__) {
     if (typeof arguments[0] === 'function') {
       console.error(
@@ -169,23 +161,11 @@ export function createRoot(
   return new ReactDOMRoot(container, options);
 }
 
-export function createBlockingRoot(
-  container: Container,
-  options?: RootOptions,
-): RootType {
-  invariant(
-    isValidContainer(container),
-    'createRoot(...): Target container is not a DOM element.',
-  );
-  warnIfReactDOMContainerInDEV(container);
-  return new ReactDOMBlockingRoot(container, BlockingRoot, options);
-}
-
 export function createLegacyRoot(
   container: Container,
   options?: RootOptions,
 ): RootType {
-  return new ReactDOMBlockingRoot(container, LegacyRoot, options);
+  return new ReactDOMLegacyRoot(container, options);
 }
 
 export function isValidContainer(node: mixed): boolean {
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index 8305dd6d8641..c09fa2d8000f 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -23,7 +23,6 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
-  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index c4a73cdfb81b..97876990a9b5 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -23,7 +23,6 @@ export const {
   getPendingChildren,
   getOrCreateRootContainer,
   createRoot,
-  createBlockingRoot,
   createLegacyRoot,
   getChildrenAsJSX,
   getPendingChildrenAsJSX,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index f7663b059358..80c888a88e53 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,11 +21,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
-import {
-  ConcurrentRoot,
-  BlockingRoot,
-  LegacyRoot,
-} from 'react-reconciler/src/ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
@@ -752,33 +748,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
     },
 
-    createBlockingRoot() {
-      const container = {
-        rootID: '' + idCounter++,
-        pendingChildren: [],
-        children: [],
-      };
-      const fiberRoot = NoopRenderer.createContainer(
-        container,
-        BlockingRoot,
-        false,
-        null,
-        null,
-      );
-      return {
-        _Scheduler: Scheduler,
-        render(children: ReactNodeList) {
-          NoopRenderer.updateContainer(children, fiberRoot, null, null);
-        },
-        getChildren() {
-          return getChildren(container);
-        },
-        getChildrenAsJSX() {
-          return getChildrenAsJSX(container);
-        },
-      };
-    },
-
     createLegacyRoot() {
       const container = {
         rootID: '' + idCounter++,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 3c49e56431c3..de9c83e3a35d 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -26,7 +26,7 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
-import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
+import {ConcurrentRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
   ClassComponent,
@@ -68,7 +68,6 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -424,25 +423,7 @@ export function createHostRootFiber(
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode | BlockingMode;
-    if (strictModeLevelOverride !== null) {
-      if (strictModeLevelOverride >= 1) {
-        mode |= StrictLegacyMode;
-      }
-      if (enableStrictEffects) {
-        if (strictModeLevelOverride >= 2) {
-          mode |= StrictEffectsMode;
-        }
-      }
-    } else {
-      if (enableStrictEffects && createRootStrictEffectsByDefault) {
-        mode |= StrictLegacyMode | StrictEffectsMode;
-      } else {
-        mode |= StrictLegacyMode;
-      }
-    }
-  } else if (tag === BlockingRoot) {
-    mode = BlockingMode;
+    mode = ConcurrentMode;
     if (strictModeLevelOverride !== null) {
       if (strictModeLevelOverride >= 1) {
         mode |= StrictLegacyMode;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index e98634b37cfd..f399ab359314 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -26,7 +26,7 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
-import {ConcurrentRoot, BlockingRoot} from './ReactRootTags';
+import {ConcurrentRoot} from './ReactRootTags';
 import {
   IndeterminateComponent,
   ClassComponent,
@@ -68,7 +68,6 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -424,25 +423,7 @@ export function createHostRootFiber(
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
-    mode = ConcurrentMode | BlockingMode;
-    if (strictModeLevelOverride !== null) {
-      if (strictModeLevelOverride >= 1) {
-        mode |= StrictLegacyMode;
-      }
-      if (enableStrictEffects) {
-        if (strictModeLevelOverride >= 2) {
-          mode |= StrictEffectsMode;
-        }
-      }
-    } else {
-      if (enableStrictEffects && createRootStrictEffectsByDefault) {
-        mode |= StrictLegacyMode | StrictEffectsMode;
-      } else {
-        mode |= StrictLegacyMode;
-      }
-    }
-  } else if (tag === BlockingRoot) {
-    mode = BlockingMode;
+    mode = ConcurrentMode;
     if (strictModeLevelOverride !== null) {
       if (strictModeLevelOverride >= 1) {
         mode |= StrictLegacyMode;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 345f668fc62e..a014ef574789 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -128,7 +128,6 @@ import {
   NoMode,
   ProfileMode,
   StrictLegacyMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
@@ -609,7 +608,6 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
-      // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
@@ -2134,7 +2132,10 @@ function mountSuspenseFallbackChildren(
 
   let primaryChildFragment;
   let fallbackChildFragment;
-  if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {
+  if (
+    (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;
@@ -2206,7 +2207,7 @@ function updateSuspensePrimaryChildren(
       children: primaryChildren,
     },
   );
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     primaryChildFragment.lanes = renderLanes;
   }
   primaryChildFragment.return = workInProgress;
@@ -2247,7 +2248,7 @@ function updateSuspenseFallbackChildren(
   if (
     // In legacy mode, we commit the primary tree as if it successfully
     // completed, even though it's in an inconsistent state.
-    (mode & BlockingMode) === NoMode &&
+    (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
@@ -2369,7 +2370,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   primaryChildFragment.sibling = fallbackChildFragment;
   workInProgress.child = primaryChildFragment;
 
-  if ((workInProgress.mode & BlockingMode) !== NoMode) {
+  if ((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);
@@ -2385,12 +2386,12 @@ function mountDehydratedSuspenseComponent(
 ): null | Fiber {
   // During the first pass, we'll bail out and not drill into the children.
   // Instead, we'll leave the content in place and try to hydrate it later.
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     if (__DEV__) {
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+          'ReactDOM.createRoot(container, { hydrate: true })' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
@@ -2443,7 +2444,7 @@ function updateDehydratedSuspenseComponent(
     );
   }
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -2861,7 +2862,7 @@ function updateSuspenseListComponent(
   }
   pushSuspenseContext(workInProgress, suspenseContext);
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((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;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 72b4e33431b0..2c355abdf95b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -128,7 +128,6 @@ import {
   NoMode,
   ProfileMode,
   StrictLegacyMode,
-  BlockingMode,
 } from './ReactTypeOfMode';
 import {
   shouldSetTextContent,
@@ -609,7 +608,6 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
       // In legacy sync mode, don't defer the subtree. Render it now.
-      // TODO: Figure out what we should do in Blocking mode.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
@@ -2134,7 +2132,10 @@ function mountSuspenseFallbackChildren(
 
   let primaryChildFragment;
   let fallbackChildFragment;
-  if ((mode & BlockingMode) === NoMode && progressedPrimaryFragment !== null) {
+  if (
+    (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;
@@ -2206,7 +2207,7 @@ function updateSuspensePrimaryChildren(
       children: primaryChildren,
     },
   );
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     primaryChildFragment.lanes = renderLanes;
   }
   primaryChildFragment.return = workInProgress;
@@ -2247,7 +2248,7 @@ function updateSuspenseFallbackChildren(
   if (
     // In legacy mode, we commit the primary tree as if it successfully
     // completed, even though it's in an inconsistent state.
-    (mode & BlockingMode) === NoMode &&
+    (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
@@ -2369,7 +2370,7 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   primaryChildFragment.sibling = fallbackChildFragment;
   workInProgress.child = primaryChildFragment;
 
-  if ((workInProgress.mode & BlockingMode) !== NoMode) {
+  if ((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);
@@ -2385,12 +2386,12 @@ function mountDehydratedSuspenseComponent(
 ): null | Fiber {
   // During the first pass, we'll bail out and not drill into the children.
   // Instead, we'll leave the content in place and try to hydrate it later.
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     if (__DEV__) {
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createBlockingRoot(container, { hydrate: true })' +
+          'ReactDOM.createRoot(container, { hydrate: true })' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
@@ -2443,7 +2444,7 @@ function updateDehydratedSuspenseComponent(
     );
   }
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
       workInProgress,
@@ -2861,7 +2862,7 @@ function updateSuspenseListComponent(
   }
   pushSuspenseContext(workInProgress, suspenseContext);
 
-  if ((workInProgress.mode & BlockingMode) === NoMode) {
+  if ((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;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 47f65d2da6ef..1dcc0ec9c87d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -55,12 +55,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import {
-  NoMode,
-  BlockingMode,
-  ConcurrentMode,
-  ProfileMode,
-} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
   Update,
@@ -1059,12 +1054,10 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in blocking mode we can suspend,
-        // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
-        if ((workInProgress.mode & BlockingMode) !== NoMode) {
+        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
           // TODO: Move this back to throwException because this is too late
           // if this is a large tree which is common for initial loads. We
           // don't know if we should restart a render or not until we get
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index df878d24e76a..dc1112d3b88f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -55,12 +55,7 @@ import {
   LegacyHiddenComponent,
   CacheComponent,
 } from './ReactWorkTags';
-import {
-  NoMode,
-  BlockingMode,
-  ConcurrentMode,
-  ProfileMode,
-} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
   Update,
@@ -1059,12 +1054,10 @@ function completeWork(
       }
 
       if (nextDidTimeout && !prevDidTimeout) {
-        // If this subtree is running in blocking mode we can suspend,
-        // otherwise we won't suspend.
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
-        if ((workInProgress.mode & BlockingMode) !== NoMode) {
+        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
           // TODO: Move this back to throwException because this is too late
           // if this is a large tree which is common for initial loads. We
           // don't know if we should restart a render or not until we get
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 9eb089d07d7a..00afb7daefdd 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -34,7 +34,7 @@ import {
 
 import {
   NoMode,
-  BlockingMode,
+  ConcurrentMode,
   DebugTracingMode,
   StrictEffectsMode,
 } from './ReactTypeOfMode';
@@ -1809,7 +1809,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
 
     const setId = mountState(id)[1];
 
-    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index b51d2020a8fa..3f60972dcd51 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -34,7 +34,7 @@ import {
 
 import {
   NoMode,
-  BlockingMode,
+  ConcurrentMode,
   DebugTracingMode,
   StrictEffectsMode,
 } from './ReactTypeOfMode';
@@ -1809,7 +1809,7 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
 
     const setId = mountState(id)[1];
 
-    if ((currentlyRenderingFiber.mode & BlockingMode) === NoMode) {
+    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index ae6a5bdb596f..f06925e10fbe 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -25,7 +25,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
-import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
+import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -73,9 +73,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
 
   if (__DEV__) {
     switch (tag) {
-      case BlockingRoot:
-        this._debugRootType = 'createBlockingRoot()';
-        break;
       case ConcurrentRoot:
         this._debugRootType = 'createRoot()';
         break;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 0c0d45c09872..712803920ebb 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -25,7 +25,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
-import {LegacyRoot, BlockingRoot, ConcurrentRoot} from './ReactRootTags';
+import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -73,9 +73,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
 
   if (__DEV__) {
     switch (tag) {
-      case BlockingRoot:
-        this._debugRootType = 'createBlockingRoot()';
-        break;
       case ConcurrentRoot:
         this._debugRootType = 'createRoot()';
         break;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index ba5a81ecccbf..2641bdd3b345 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -34,7 +34,7 @@ import {
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -233,7 +233,7 @@ function throwException(
     // A legacy mode Suspense quirk, only relevant to hook components.
     const tag = sourceFiber.tag;
     if (
-      (sourceFiber.mode & BlockingMode) === NoMode &&
+      (sourceFiber.mode & ConcurrentMode) === NoMode &&
       (tag === FunctionComponent ||
         tag === ForwardRef ||
         tag === SimpleMemoComponent)
@@ -274,13 +274,13 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is outside of blocking mode, we should *not*
+        // If the boundary is in legacy mode, we should *not*
         // suspend the commit. Pretend as if the suspended component rendered
         // null and keep rendering. In the commit phase, we'll schedule a
         // subsequent synchronous update to re-render the Suspense.
         //
         // Note: It doesn't matter whether the component that suspended was
-        // inside a blocking mode tree. If the Suspense is outside of it, we
+        // inside a concurrent mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
         //
         // If the suspense boundary suspended itself suspended, we don't have to
@@ -288,7 +288,7 @@ function throwException(
         // directly do a second pass over the fallback in this render and
         // pretend we meant to render that directly.
         if (
-          (workInProgress.mode & BlockingMode) === NoMode &&
+          (workInProgress.mode & ConcurrentMode) === NoMode &&
           workInProgress !== returnFiber
         ) {
           workInProgress.flags |= DidCapture;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index baa807e180dd..294b807ebcb1 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -34,7 +34,7 @@ import {
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
-import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -233,7 +233,7 @@ function throwException(
     // A legacy mode Suspense quirk, only relevant to hook components.
     const tag = sourceFiber.tag;
     if (
-      (sourceFiber.mode & BlockingMode) === NoMode &&
+      (sourceFiber.mode & ConcurrentMode) === NoMode &&
       (tag === FunctionComponent ||
         tag === ForwardRef ||
         tag === SimpleMemoComponent)
@@ -274,13 +274,13 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is outside of blocking mode, we should *not*
+        // If the boundary is in legacy mode, we should *not*
         // suspend the commit. Pretend as if the suspended component rendered
         // null and keep rendering. In the commit phase, we'll schedule a
         // subsequent synchronous update to re-render the Suspense.
         //
         // Note: It doesn't matter whether the component that suspended was
-        // inside a blocking mode tree. If the Suspense is outside of it, we
+        // inside a concurrent mode tree. If the Suspense is outside of it, we
         // should *not* suspend the commit.
         //
         // If the suspense boundary suspended itself suspended, we don't have to
@@ -288,7 +288,7 @@ function throwException(
         // directly do a second pass over the fallback in this render and
         // pretend we meant to render that directly.
         if (
-          (workInProgress.mode & BlockingMode) === NoMode &&
+          (workInProgress.mode & ConcurrentMode) === NoMode &&
           workInProgress !== returnFiber
         ) {
           workInProgress.flags |= DidCapture;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 8f83cf88fea9..5bd865cc4d15 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -100,7 +100,6 @@ import {
   NoMode,
   StrictLegacyMode,
   ProfileMode,
-  BlockingMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
 import {
@@ -386,7 +385,7 @@ export function getCurrentTime() {
 export function requestUpdateLane(fiber: Fiber): Lane {
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -467,7 +466,7 @@ function requestRetryLane(fiber: Fiber) {
 
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -658,7 +657,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
     workInProgressRoot !== null &&
-    (fiber.mode & BlockingMode) !== NoMode &&
+    (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
     // accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2545,7 +2544,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       return;
     }
 
-    if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
+    if (!(fiber.mode & ConcurrentMode)) {
       return;
     }
 
@@ -2924,7 +2923,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
       didWarnAboutUnmockedScheduler === false &&
       Scheduler.unstable_flushAllWithoutAsserting === undefined
     ) {
-      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
+      if (fiber.mode & ConcurrentMode) {
         didWarnAboutUnmockedScheduler = true;
         console.error(
           'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 4b59de6b0d5d..fef8f4e56d69 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -100,7 +100,6 @@ import {
   NoMode,
   StrictLegacyMode,
   ProfileMode,
-  BlockingMode,
   ConcurrentMode,
 } from './ReactTypeOfMode';
 import {
@@ -386,7 +385,7 @@ export function getCurrentTime() {
 export function requestUpdateLane(fiber: Fiber): Lane {
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -467,7 +466,7 @@ function requestRetryLane(fiber: Fiber) {
 
   // Special cases
   const mode = fiber.mode;
-  if ((mode & BlockingMode) === NoMode) {
+  if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
   } else if ((mode & ConcurrentMode) === NoMode) {
     return getCurrentUpdateLanePriority() === SyncLanePriority
@@ -658,7 +657,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
     workInProgressRoot !== null &&
-    (fiber.mode & BlockingMode) !== NoMode &&
+    (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
     // accompanied by a warning but we haven't fully deprecated it yet. We can
@@ -2545,7 +2544,7 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
       return;
     }
 
-    if (!(fiber.mode & (BlockingMode | ConcurrentMode))) {
+    if (!(fiber.mode & ConcurrentMode)) {
       return;
     }
 
@@ -2924,7 +2923,7 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
       didWarnAboutUnmockedScheduler === false &&
       Scheduler.unstable_flushAllWithoutAsserting === undefined
     ) {
-      if (fiber.mode & BlockingMode || fiber.mode & ConcurrentMode) {
+      if (fiber.mode & ConcurrentMode) {
         didWarnAboutUnmockedScheduler = true;
         console.error(
           'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
diff --git a/packages/react-reconciler/src/ReactRootTags.js b/packages/react-reconciler/src/ReactRootTags.js
index 409f4bd931a7..cda44d6e1ed5 100644
--- a/packages/react-reconciler/src/ReactRootTags.js
+++ b/packages/react-reconciler/src/ReactRootTags.js
@@ -7,8 +7,7 @@
  * @flow
  */
 
-export type RootTag = 0 | 1 | 2;
+export type RootTag = 0 | 1;
 
 export const LegacyRoot = 0;
-export const BlockingRoot = 1;
-export const ConcurrentRoot = 2;
+export const ConcurrentRoot = 1;
diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js
index a6499be7aca1..466363fabd4e 100644
--- a/packages/react-reconciler/src/ReactTypeOfMode.js
+++ b/packages/react-reconciler/src/ReactTypeOfMode.js
@@ -10,10 +10,9 @@
 export type TypeOfMode = number;
 
 export const NoMode = /*            */ 0b000000;
-// TODO: Remove BlockingMode and ConcurrentMode by reading from the root tag instead
-export const BlockingMode = /*      */ 0b000001;
-export const ConcurrentMode = /*    */ 0b000010;
-export const ProfileMode = /*       */ 0b000100;
-export const DebugTracingMode = /*  */ 0b001000;
-export const StrictLegacyMode = /*  */ 0b010000;
-export const StrictEffectsMode = /* */ 0b100000;
+// TODO: Remove ConcurrentMode by reading from the root tag instead
+export const ConcurrentMode = /*    */ 0b000001;
+export const ProfileMode = /*       */ 0b000010;
+export const DebugTracingMode = /*  */ 0b000100;
+export const StrictLegacyMode = /*  */ 0b001000;
+export const StrictEffectsMode = /* */ 0b010000;
diff --git a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js b/packages/react-reconciler/src/__tests__/ReactBatching-test.internal.js
similarity index 86%
rename from packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
rename to packages/react-reconciler/src/__tests__/ReactBatching-test.internal.js
index c6af59fbd915..7998d2a23177 100644
--- a/packages/react-reconciler/src/__tests__/ReactBatchedMode-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactBatching-test.internal.js
@@ -53,7 +53,7 @@ describe('ReactBlockingMode', () => {
   }
 
   it('updates flush without yielding in the next event', () => {
-    const root = ReactNoop.createBlockingRoot();
+    const root = ReactNoop.createRoot();
 
     root.render(
       <>
@@ -67,7 +67,7 @@ describe('ReactBlockingMode', () => {
     expect(root).toMatchRenderedOutput(null);
 
     // Everything should render immediately in the next event
-    expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
     expect(root).toMatchRenderedOutput('ABC');
   });
 
@@ -81,16 +81,17 @@ describe('ReactBlockingMode', () => {
       return <Text text="Hi" />;
     }
 
-    const root = ReactNoop.createBlockingRoot();
+    const root = ReactNoop.createRoot();
     root.render(<App />);
     expect(root).toMatchRenderedOutput(null);
+    expect(Scheduler).toHaveYielded([]);
 
-    expect(Scheduler).toFlushExpired(['Hi', 'Layout effect']);
+    expect(Scheduler).toFlushAndYield(['Hi', 'Layout effect']);
     expect(root).toMatchRenderedOutput('Hi');
   });
 
   it('uses proper Suspense semantics, not legacy ones', async () => {
-    const root = ReactNoop.createBlockingRoot();
+    const root = ReactNoop.createRoot();
     root.render(
       <Suspense fallback={<Text text="Loading..." />}>
         <span>
@@ -105,15 +106,15 @@ describe('ReactBlockingMode', () => {
       </Suspense>,
     );
 
-    expect(Scheduler).toFlushExpired(['A', 'Suspend! [B]', 'C', 'Loading...']);
-    // In Legacy Mode, A and B would mount in a hidden primary tree. In Batched
-    // and Concurrent Mode, nothing in the primary tree should mount. But the
+    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]', 'C', 'Loading...']);
+    // 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 jest.advanceTimersByTime(1000);
     expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(Scheduler).toFlushExpired(['A', 'B', 'C']);
+    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
     expect(root).toMatchRenderedOutput(
       <>
         <span>A</span>
@@ -125,7 +126,7 @@ describe('ReactBlockingMode', () => {
 
   it('flushSync does not flush batched work', () => {
     const {useState, forwardRef, useImperativeHandle} = React;
-    const root = ReactNoop.createBlockingRoot();
+    const root = ReactNoop.createRoot();
 
     const Foo = forwardRef(({label}, ref) => {
       const [step, setStep] = useState(0);
@@ -143,7 +144,7 @@ describe('ReactBlockingMode', () => {
     );
 
     // Mount
-    expect(Scheduler).toFlushExpired(['A0', 'B0']);
+    expect(Scheduler).toFlushAndYield(['A0', 'B0']);
     expect(root).toMatchRenderedOutput('A0B0');
 
     // Schedule a batched update to the first sibling
@@ -161,7 +162,7 @@ describe('ReactBlockingMode', () => {
     expect(root).toMatchRenderedOutput('A0B1');
 
     // Now flush the first update
-    expect(Scheduler).toFlushExpired(['A1']);
+    expect(Scheduler).toFlushAndYield(['A1']);
     expect(root).toMatchRenderedOutput('A1B1');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 613fe89d6327..a14c36bfce2b 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1870,10 +1870,6 @@ describe('ReactIncrementalErrorHandling', () => {
       const root = ReactNoop.createRoot();
       root.render('Error when completing root');
       expect(Scheduler).toFlushAndThrow('Error when completing root');
-
-      const blockingRoot = ReactNoop.createBlockingRoot();
-      blockingRoot.render('Error when completing root');
-      expect(Scheduler).toFlushAndThrow('Error when completing root');
     });
   }
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index b3f14e6ad1ef..d04203089c22 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -125,7 +125,7 @@ describe('ReactOffscreen', () => {
   });
 
   // @gate experimental
-  it('does not defer in blocking mode', async () => {
+  it('does defer in concurrent mode', async () => {
     let setState;
     function Foo() {
       const [state, _setState] = useState('A');
@@ -133,7 +133,7 @@ describe('ReactOffscreen', () => {
       return <Text text={state} />;
     }
 
-    const root = ReactNoop.createBlockingRoot();
+    const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
       root.render(
         <>
@@ -143,9 +143,13 @@ describe('ReactOffscreen', () => {
           <Text text="Outside" />
         </>,
       );
-      // Should not defer the hidden tree
-      expect(Scheduler).toFlushUntilNextPaint(['A', 'Outside']);
+      // Should defer the hidden tree.
+      expect(Scheduler).toFlushUntilNextPaint(['Outside']);
     });
+
+    // The hidden tree was rendered at lower priority.
+    expect(Scheduler).toHaveYielded(['A']);
+
     expect(root).toMatchRenderedOutput(
       <>
         <span prop="A" />
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
index eabcb41be0e6..c67edf8a1563 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -170,13 +170,6 @@ describe('ReactSuspenseFuzz', () => {
       expect(legacyOutput).toEqual(expectedOutput);
       ReactNoop.renderLegacySyncRoot(null);
 
-      resetCache();
-      const batchedBlockingRoot = ReactNoop.createBlockingRoot();
-      batchedBlockingRoot.render(children);
-      resolveAllTasks();
-      const batchedSyncOutput = batchedBlockingRoot.getChildrenAsJSX();
-      expect(batchedSyncOutput).toEqual(expectedOutput);
-
       resetCache();
       const concurrentRoot = ReactNoop.createRoot();
       concurrentRoot.render(children);
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index cb567340d398..20c83a46dfaa 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -66,23 +66,6 @@ describe('ReactStrictMode', () => {
       ]);
     });
 
-    // @gate experimental
-    it('should support overriding default via createBlockingRoot option', () => {
-      act(() => {
-        const container = document.createElement('div');
-        const root = ReactDOM.createBlockingRoot(container, {
-          unstable_strictModeLevel: 0,
-        });
-        root.render(<Component label="A" />);
-      });
-
-      expect(log).toEqual([
-        'A: render',
-        'A: useLayoutEffect mount',
-        'A: useEffect mount',
-      ]);
-    });
-
     // @gate experimental
     it('should disable strict mode if level 0 is specified', () => {
       act(() => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 5029a6f4900b..75ab4b6842d9 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -27,7 +27,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 // this feature flag only impacts StrictEffectsMode.
 export const enableStrictEffects = false;
 
-// If TRUE, trees rendered with createRoot (and createBlockingRoot) APIs will be StrictEffectsMode.
+// If TRUE, trees rendered with createRoot will be StrictEffectsMode.
 // If FALSE, these trees will be StrictLegacyMode.
 export const createRootStrictEffectsByDefault = false;
 

From b7e6310669ed7948d3d8729cc6c0d7904945f05b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 11 Mar 2021 01:29:29 -0600
Subject: [PATCH 0311/1603] Stop tracking roots with pending discrete updates
 (#20978)

Now that discrete updates are flushed synchronously in a microtask,
there's no need to track them in their on queue. They're already in
the queue we use for all sync work. So we can call that directly.
---
 .../src/ReactFiberLane.new.js                 |  10 --
 .../src/ReactFiberLane.old.js                 |  10 --
 .../src/ReactFiberWorkLoop.new.js             | 102 +++---------------
 .../src/ReactFiberWorkLoop.old.js             | 102 +++---------------
 4 files changed, 34 insertions(+), 190 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 4a0e2a151bcc..bf5086acb943 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -737,16 +737,6 @@ export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
   root.expiredLanes |= expiredLanes & root.pendingLanes;
 }
 
-export function markDiscreteUpdatesExpired(root: FiberRoot) {
-  if (root.pendingLanes & InputDiscreteLane) {
-    root.expiredLanes |= InputDiscreteLane;
-  }
-}
-
-export function hasDiscreteLanes(lanes: Lanes) {
-  return (lanes & InputDiscreteLane) !== NoLanes;
-}
-
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
   root.mutableReadLanes |= updateLane & root.pendingLanes;
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 28a5e2e54221..fae8239afdb6 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -737,16 +737,6 @@ export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
   root.expiredLanes |= expiredLanes & root.pendingLanes;
 }
 
-export function markDiscreteUpdatesExpired(root: FiberRoot) {
-  if (root.pendingLanes & InputDiscreteLane) {
-    root.expiredLanes |= InputDiscreteLane;
-  }
-}
-
-export function hasDiscreteLanes(lanes: Lanes) {
-  return (lanes & InputDiscreteLane) !== NoLanes;
-}
-
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
   root.mutableReadLanes |= updateLane & root.pendingLanes;
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 5bd865cc4d15..926c1d0b28ac 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -39,12 +39,10 @@ import invariant from 'shared/invariant';
 import {
   scheduleCallback,
   cancelCallback,
-  getCurrentPriorityLevel,
   shouldYield,
   requestPaint,
   now,
   ImmediatePriority as ImmediateSchedulerPriority,
-  UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   flushSyncCallbackQueue,
   scheduleSyncCallback,
@@ -148,7 +146,6 @@ import {
   mergeLanes,
   removeLanes,
   pickArbitraryLane,
-  hasDiscreteLanes,
   includesNonIdleWork,
   includesOnlyRetries,
   includesOnlyTransitions,
@@ -163,10 +160,8 @@ import {
   markRootSuspended as markRootSuspended_dontCallThisOneDirectly,
   markRootPinged,
   markRootExpired,
-  markDiscreteUpdatesExpired,
   markRootFinished,
   lanePriorityToSchedulerPriority,
-  higherLanePriority,
 } from './ReactFiberLane.new';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.new';
@@ -243,14 +238,13 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b0000000;
-const BatchedContext = /*               */ 0b0000001;
-const EventContext = /*                 */ 0b0000010;
-const DiscreteEventContext = /*         */ 0b0000100;
-const LegacyUnbatchedContext = /*       */ 0b0001000;
-const RenderContext = /*                */ 0b0010000;
-const CommitContext = /*                */ 0b0100000;
-export const RetryAfterError = /*       */ 0b1000000;
+export const NoContext = /*             */ 0b000000;
+const BatchedContext = /*               */ 0b000001;
+const EventContext = /*                 */ 0b000010;
+const LegacyUnbatchedContext = /*       */ 0b000100;
+const RenderContext = /*                */ 0b001000;
+const CommitContext = /*                */ 0b010000;
+export const RetryAfterError = /*       */ 0b100000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -331,8 +325,6 @@ let pendingPassiveEffectsRenderPriority: LanePriority = NoLanePriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
-let rootsWithPendingDiscreteUpdates: Set<FiberRoot> | null = null;
-
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
 let nestedUpdateCount: number = 0;
@@ -434,29 +426,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     return currentEventTransitionLane;
   }
 
-  // TODO: Remove this dependency on the Scheduler priority.
-  // To do that, we're replacing it with an update lane priority.
-  const schedulerPriority = getCurrentPriorityLevel();
-
-  // Find the correct lane based on priorities. Ideally, this would just be
-  // the update lane priority, but for now we're also checking for discrete
-  // updates and falling back to the scheduler priority.
-  let lane;
-  if (
-    // TODO: Temporary. We're removing the concept of discrete updates.
-    (executionContext & DiscreteEventContext) !== NoContext &&
-    schedulerPriority === UserBlockingSchedulerPriority
-  ) {
-    lane = findUpdateLane(InputDiscreteLanePriority);
-  } else if (getCurrentUpdateLanePriority() !== NoLanePriority) {
-    const currentLanePriority = getCurrentUpdateLanePriority();
-    lane = findUpdateLane(currentLanePriority);
-  } else {
-    const eventLanePriority = getCurrentEventPriority();
-    lane = findUpdateLane(eventLanePriority);
+  // Updates originating inside certain React methods, like flushSync, have
+  // their priority set by tracking it with a context variable.
+  const updateLanePriority = getCurrentUpdateLanePriority();
+  if (updateLanePriority !== NoLanePriority) {
+    return findUpdateLane(updateLanePriority);
   }
 
-  return lane;
+  // This update originated outside React. Ask the host environement for an
+  // appropriate priority, based on the type of event.
+  const eventLanePriority = getCurrentEventPriority();
+  return findUpdateLane(eventLanePriority);
 }
 
 function requestRetryLane(fiber: Fiber) {
@@ -578,23 +558,6 @@ export function scheduleUpdateOnFiber(
       }
     }
   } else {
-    const updateLanePriority = getCurrentUpdateLanePriority();
-
-    // Schedule a discrete update but only if it's not Sync.
-    if (
-      (executionContext & DiscreteEventContext) !== NoContext &&
-      // Only updates greater than default considered discrete, even inside a discrete event.
-      higherLanePriority(updateLanePriority, DefaultLanePriority) !==
-        DefaultLanePriority
-    ) {
-      // This is the result of a discrete event. Track the lowest priority
-      // discrete update per root so we can flush them early, if needed.
-      if (rootsWithPendingDiscreteUpdates === null) {
-        rootsWithPendingDiscreteUpdates = new Set([root]);
-      } else {
-        rootsWithPendingDiscreteUpdates.add(root);
-      }
-    }
     // Schedule other updates after in case the callback is sync.
     ensureRootIsScheduled(root, eventTime);
     schedulePendingInteractions(root, lane);
@@ -1096,7 +1059,7 @@ export function flushDiscreteUpdates() {
     // like `el.focus()`. Exit.
     return;
   }
-  flushPendingDiscreteUpdates();
+  flushSyncCallbackQueue();
   // If the discrete updates scheduled passive effects, flush them now so that
   // they fire before the next serial event.
   flushPassiveEffects();
@@ -1112,21 +1075,6 @@ export function deferredUpdates<A>(fn: () => A): A {
   }
 }
 
-function flushPendingDiscreteUpdates() {
-  if (rootsWithPendingDiscreteUpdates !== null) {
-    // For each root with pending discrete updates, schedule a callback to
-    // immediately flush them.
-    const roots = rootsWithPendingDiscreteUpdates;
-    rootsWithPendingDiscreteUpdates = null;
-    roots.forEach(root => {
-      markDiscreteUpdatesExpired(root);
-      ensureRootIsScheduled(root, now());
-    });
-  }
-  // Now flush the immediate queue.
-  flushSyncCallbackQueue();
-}
-
 export function batchedUpdates<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
@@ -1164,16 +1112,12 @@ export function discreteUpdates<A, B, C, D, R>(
   c: C,
   d: D,
 ): R {
-  const prevExecutionContext = executionContext;
-  executionContext |= DiscreteEventContext;
-
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(InputDiscreteLanePriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
-    executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
@@ -1802,18 +1746,6 @@ function commitRootImpl(root, renderPriorityLevel) {
   let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
   markRootFinished(root, remainingLanes);
 
-  // Clear already finished discrete updates in case that a later call of
-  // `flushDiscreteUpdates` starts a useless render pass which may cancels
-  // a scheduled timeout.
-  if (rootsWithPendingDiscreteUpdates !== null) {
-    if (
-      !hasDiscreteLanes(remainingLanes) &&
-      rootsWithPendingDiscreteUpdates.has(root)
-    ) {
-      rootsWithPendingDiscreteUpdates.delete(root);
-    }
-  }
-
   if (root === workInProgressRoot) {
     // We can reset these now that they are finished.
     workInProgressRoot = null;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index fef8f4e56d69..6450ac710d7e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -39,12 +39,10 @@ import invariant from 'shared/invariant';
 import {
   scheduleCallback,
   cancelCallback,
-  getCurrentPriorityLevel,
   shouldYield,
   requestPaint,
   now,
   ImmediatePriority as ImmediateSchedulerPriority,
-  UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   flushSyncCallbackQueue,
   scheduleSyncCallback,
@@ -148,7 +146,6 @@ import {
   mergeLanes,
   removeLanes,
   pickArbitraryLane,
-  hasDiscreteLanes,
   includesNonIdleWork,
   includesOnlyRetries,
   includesOnlyTransitions,
@@ -163,10 +160,8 @@ import {
   markRootSuspended as markRootSuspended_dontCallThisOneDirectly,
   markRootPinged,
   markRootExpired,
-  markDiscreteUpdatesExpired,
   markRootFinished,
   lanePriorityToSchedulerPriority,
-  higherLanePriority,
 } from './ReactFiberLane.old';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.old';
@@ -243,14 +238,13 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b0000000;
-const BatchedContext = /*               */ 0b0000001;
-const EventContext = /*                 */ 0b0000010;
-const DiscreteEventContext = /*         */ 0b0000100;
-const LegacyUnbatchedContext = /*       */ 0b0001000;
-const RenderContext = /*                */ 0b0010000;
-const CommitContext = /*                */ 0b0100000;
-export const RetryAfterError = /*       */ 0b1000000;
+export const NoContext = /*             */ 0b000000;
+const BatchedContext = /*               */ 0b000001;
+const EventContext = /*                 */ 0b000010;
+const LegacyUnbatchedContext = /*       */ 0b000100;
+const RenderContext = /*                */ 0b001000;
+const CommitContext = /*                */ 0b010000;
+export const RetryAfterError = /*       */ 0b100000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -331,8 +325,6 @@ let pendingPassiveEffectsRenderPriority: LanePriority = NoLanePriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
-let rootsWithPendingDiscreteUpdates: Set<FiberRoot> | null = null;
-
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
 let nestedUpdateCount: number = 0;
@@ -434,29 +426,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     return currentEventTransitionLane;
   }
 
-  // TODO: Remove this dependency on the Scheduler priority.
-  // To do that, we're replacing it with an update lane priority.
-  const schedulerPriority = getCurrentPriorityLevel();
-
-  // Find the correct lane based on priorities. Ideally, this would just be
-  // the update lane priority, but for now we're also checking for discrete
-  // updates and falling back to the scheduler priority.
-  let lane;
-  if (
-    // TODO: Temporary. We're removing the concept of discrete updates.
-    (executionContext & DiscreteEventContext) !== NoContext &&
-    schedulerPriority === UserBlockingSchedulerPriority
-  ) {
-    lane = findUpdateLane(InputDiscreteLanePriority);
-  } else if (getCurrentUpdateLanePriority() !== NoLanePriority) {
-    const currentLanePriority = getCurrentUpdateLanePriority();
-    lane = findUpdateLane(currentLanePriority);
-  } else {
-    const eventLanePriority = getCurrentEventPriority();
-    lane = findUpdateLane(eventLanePriority);
+  // Updates originating inside certain React methods, like flushSync, have
+  // their priority set by tracking it with a context variable.
+  const updateLanePriority = getCurrentUpdateLanePriority();
+  if (updateLanePriority !== NoLanePriority) {
+    return findUpdateLane(updateLanePriority);
   }
 
-  return lane;
+  // This update originated outside React. Ask the host environement for an
+  // appropriate priority, based on the type of event.
+  const eventLanePriority = getCurrentEventPriority();
+  return findUpdateLane(eventLanePriority);
 }
 
 function requestRetryLane(fiber: Fiber) {
@@ -578,23 +558,6 @@ export function scheduleUpdateOnFiber(
       }
     }
   } else {
-    const updateLanePriority = getCurrentUpdateLanePriority();
-
-    // Schedule a discrete update but only if it's not Sync.
-    if (
-      (executionContext & DiscreteEventContext) !== NoContext &&
-      // Only updates greater than default considered discrete, even inside a discrete event.
-      higherLanePriority(updateLanePriority, DefaultLanePriority) !==
-        DefaultLanePriority
-    ) {
-      // This is the result of a discrete event. Track the lowest priority
-      // discrete update per root so we can flush them early, if needed.
-      if (rootsWithPendingDiscreteUpdates === null) {
-        rootsWithPendingDiscreteUpdates = new Set([root]);
-      } else {
-        rootsWithPendingDiscreteUpdates.add(root);
-      }
-    }
     // Schedule other updates after in case the callback is sync.
     ensureRootIsScheduled(root, eventTime);
     schedulePendingInteractions(root, lane);
@@ -1096,7 +1059,7 @@ export function flushDiscreteUpdates() {
     // like `el.focus()`. Exit.
     return;
   }
-  flushPendingDiscreteUpdates();
+  flushSyncCallbackQueue();
   // If the discrete updates scheduled passive effects, flush them now so that
   // they fire before the next serial event.
   flushPassiveEffects();
@@ -1112,21 +1075,6 @@ export function deferredUpdates<A>(fn: () => A): A {
   }
 }
 
-function flushPendingDiscreteUpdates() {
-  if (rootsWithPendingDiscreteUpdates !== null) {
-    // For each root with pending discrete updates, schedule a callback to
-    // immediately flush them.
-    const roots = rootsWithPendingDiscreteUpdates;
-    rootsWithPendingDiscreteUpdates = null;
-    roots.forEach(root => {
-      markDiscreteUpdatesExpired(root);
-      ensureRootIsScheduled(root, now());
-    });
-  }
-  // Now flush the immediate queue.
-  flushSyncCallbackQueue();
-}
-
 export function batchedUpdates<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
@@ -1164,16 +1112,12 @@ export function discreteUpdates<A, B, C, D, R>(
   c: C,
   d: D,
 ): R {
-  const prevExecutionContext = executionContext;
-  executionContext |= DiscreteEventContext;
-
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
     setCurrentUpdateLanePriority(InputDiscreteLanePriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
-    executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
@@ -1802,18 +1746,6 @@ function commitRootImpl(root, renderPriorityLevel) {
   let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
   markRootFinished(root, remainingLanes);
 
-  // Clear already finished discrete updates in case that a later call of
-  // `flushDiscreteUpdates` starts a useless render pass which may cancels
-  // a scheduled timeout.
-  if (rootsWithPendingDiscreteUpdates !== null) {
-    if (
-      !hasDiscreteLanes(remainingLanes) &&
-      rootsWithPendingDiscreteUpdates.has(root)
-    ) {
-      rootsWithPendingDiscreteUpdates.delete(root);
-    }
-  }
-
   if (root === workInProgressRoot) {
     // We can reset these now that they are finished.
     workInProgressRoot = null;

From bd245c1bab1a1f965cb51f5d01406a2770244930 Mon Sep 17 00:00:00 2001
From: Chris Dobson <chrisdobby.dev@gmail.com>
Date: Thu, 11 Mar 2021 15:31:57 +0000
Subject: [PATCH 0312/1603] Ensure sync-xhr is allowed before reload and
 profile (#20879)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
---
 .../src/backend/agent.js                      |  2 +
 .../src/backend/utils.js                      |  8 +++
 packages/react-devtools-shared/src/bridge.js  |  1 +
 .../src/devtools/store.js                     | 56 ++++++++++++++++---
 4 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 41993700252c..86c35ae1b49b 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -38,6 +38,7 @@ import type {
   RendererInterface,
 } from './types';
 import type {ComponentFilter} from '../types';
+import {isSynchronousXHRSupported} from './utils';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -221,6 +222,7 @@ export default class Agent extends EventEmitter<{|
       isBackendStorageAPISupported = true;
     } catch (error) {}
     bridge.send('isBackendStorageAPISupported', isBackendStorageAPISupported);
+    bridge.send('isSynchronousXHRSupported', isSynchronousXHRSupported());
 
     setupHighlighter(bridge, this);
     setupTraceUpdates(this);
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 06329eff7215..7a4ff6295ab9 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -183,3 +183,11 @@ export function format(
 
   return '' + formatted;
 }
+
+export function isSynchronousXHRSupported(): boolean {
+  return !!(
+    window.document &&
+    window.document.featurePolicy &&
+    window.document.featurePolicy.allowsFeature('sync-xhr')
+  );
+}
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index f69414ad4708..d3b669bd4287 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -122,6 +122,7 @@ export type BackendEvents = {|
   extensionBackendInitialized: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
+  isSynchronousXHRSupported: [boolean],
   operations: [Array<number>],
   ownersList: [OwnersList],
   overrideComponentFilters: [Array<ComponentFilter>],
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index e5a6ac15fbde..c0083f90a16e 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -111,6 +111,12 @@ export default class Store extends EventEmitter<{|
   // If not, features like reload-and-profile will not work correctly and must be disabled.
   _isBackendStorageAPISupported: boolean = false;
 
+  // Can DevTools use sync XHR requests?
+  // If not, features like reload-and-profile will not work correctly and must be disabled.
+  // This current limitation applies only to web extension builds
+  // and will need to be reconsidered in the future if we add support for reload to React Native.
+  _isSynchronousXHRSupported: boolean = false;
+
   _nativeStyleEditorValidAttributes: $ReadOnlyArray<string> | null = null;
 
   // Map of element (id) to the set of elements (ids) it owns.
@@ -195,12 +201,16 @@ export default class Store extends EventEmitter<{|
     bridge.addListener('shutdown', this.onBridgeShutdown);
     bridge.addListener(
       'isBackendStorageAPISupported',
-      this.onBridgeStorageSupported,
+      this.onBackendStorageAPISupported,
     );
     bridge.addListener(
       'isNativeStyleEditorSupported',
       this.onBridgeNativeStyleEditorSupported,
     );
+    bridge.addListener(
+      'isSynchronousXHRSupported',
+      this.onBridgeSynchronousXHRSupported,
+    );
     bridge.addListener(
       'unsupportedRendererVersion',
       this.onBridgeUnsupportedRendererVersion,
@@ -359,11 +369,16 @@ export default class Store extends EventEmitter<{|
   get supportsProfiling(): boolean {
     return this._supportsProfiling;
   }
+
   get supportsReloadAndProfile(): boolean {
     // Does the DevTools shell support reloading and eagerly injecting the renderer interface?
-    // And if so, can the backend use the localStorage API?
-    // Both of these are required for the reload-and-profile feature to work.
-    return this._supportsReloadAndProfile && this._isBackendStorageAPISupported;
+    // And if so, can the backend use the localStorage API and sync XHR?
+    // All of these are currently required for the reload-and-profile feature to work.
+    return (
+      this._supportsReloadAndProfile &&
+      this._isBackendStorageAPISupported &&
+      this._isSynchronousXHRSupported
+    );
   }
 
   get supportsTraceUpdates(): boolean {
@@ -1130,20 +1145,43 @@ export default class Store extends EventEmitter<{|
       debug('onBridgeShutdown', 'unsubscribing from Bridge');
     }
 
-    this._bridge.removeListener('operations', this.onBridgeOperations);
-    this._bridge.removeListener('shutdown', this.onBridgeShutdown);
-    this._bridge.removeListener(
+    const bridge = this._bridge;
+    bridge.removeListener('operations', this.onBridgeOperations);
+    bridge.removeListener(
+      'overrideComponentFilters',
+      this.onBridgeOverrideComponentFilters,
+    );
+    bridge.removeListener('shutdown', this.onBridgeShutdown);
+    bridge.removeListener(
       'isBackendStorageAPISupported',
-      this.onBridgeStorageSupported,
+      this.onBackendStorageAPISupported,
+    );
+    bridge.removeListener(
+      'isNativeStyleEditorSupported',
+      this.onBridgeNativeStyleEditorSupported,
+    );
+    bridge.removeListener(
+      'isSynchronousXHRSupported',
+      this.onBridgeSynchronousXHRSupported,
+    );
+    bridge.removeListener(
+      'unsupportedRendererVersion',
+      this.onBridgeUnsupportedRendererVersion,
     );
   };
 
-  onBridgeStorageSupported = (isBackendStorageAPISupported: boolean) => {
+  onBackendStorageAPISupported = (isBackendStorageAPISupported: boolean) => {
     this._isBackendStorageAPISupported = isBackendStorageAPISupported;
 
     this.emit('supportsReloadAndProfile');
   };
 
+  onBridgeSynchronousXHRSupported = (isSynchronousXHRSupported: boolean) => {
+    this._isSynchronousXHRSupported = isSynchronousXHRSupported;
+
+    this.emit('supportsReloadAndProfile');
+  };
+
   onBridgeUnsupportedRendererVersion = () => {
     this._unsupportedRendererVersionDetected = true;
 

From 10cc400184dfa3d5d3eb8b2e10903b87b9489cb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 11 Mar 2021 15:01:41 -0500
Subject: [PATCH 0313/1603] Basic Fizz Architecture (#20970)

* Copy some infra structure patterns from Flight

* Basic data structures

* Move structural nodes and instruction commands to host config

* Move instruction command to host config

In the DOM this is implemented as script tags. The first time it's emitted
it includes the function. Future calls invoke the same function.

The side of the complete boundary function in particular is unfortunately
large.

* Implement Fizz Noop host configs

This is implemented not as a serialized protocol but by-passing the
serialization when possible and instead it's like a live tree being
built.

* Implement React Native host config

This is not wired up. I just need something for the flow types since
Flight and Fizz are both handled by the isServerSupported flag.

Might as well add something though.

The principle of this format is the same structure as for HTML but a
simpler binary format.

Each entry is a tag followed by some data and terminated by null.

* Check in error codes

* Comment
---
 .../src/ReactNoopFlightServer.js              |   6 -
 .../src/ReactNoopServer.js                    | 192 +++-
 .../src/ReactDOMServerFormatConfig.js         | 369 +++++++-
 packages/react-server/src/ReactFizzServer.js  | 822 +++++++++++++++++-
 .../src/ReactNativeServerFormatConfig.js      | 198 ++++-
 .../src/__tests__/ReactServer-test.js         |   9 +-
 .../forks/ReactServerFormatConfig.custom.js   |  25 +-
 scripts/error-codes/codes.json                |  10 +-
 8 files changed, 1562 insertions(+), 69 deletions(-)

diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index f080f27addfd..bbace47e2eb4 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -36,12 +36,6 @@ const ReactNoopFlightServer = ReactFlightServer({
   convertStringToBuffer(content: string): Uint8Array {
     return Buffer.from(content, 'utf8');
   },
-  formatChunkAsString(type: string, props: Object): string {
-    return JSON.stringify({type, props});
-  },
-  formatChunk(type: string, props: Object): Uint8Array {
-    return Buffer.from(JSON.stringify({type, props}), 'utf8');
-  },
   isModuleReference(reference: Object): boolean {
     return reference.$$typeof === Symbol.for('react.module.reference');
   },
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 0f21bbd6dc62..3be95ab05169 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -16,7 +16,40 @@
 
 import ReactFizzServer from 'react-server';
 
-type Destination = Array<string>;
+type Instance = {|
+  type: string,
+  children: Array<Instance | TextInstance | SuspenseInstance>,
+  prop: any,
+  hidden: boolean,
+|};
+
+type TextInstance = {|
+  text: string,
+  hidden: boolean,
+|};
+
+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>,
+};
+
+const POP = Buffer.from('/', 'utf8');
 
 const ReactNoopServer = ReactFizzServer({
   scheduleWork(callback: () => void) {
@@ -24,24 +57,165 @@ const ReactNoopServer = ReactFizzServer({
   },
   beginWriting(destination: Destination): void {},
   writeChunk(destination: Destination, buffer: Uint8Array): void {
-    destination.push(JSON.parse(Buffer.from((buffer: any)).toString('utf8')));
+    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);
   },
   completeWriting(destination: Destination): void {},
   close(destination: Destination): void {},
   flushBuffered(destination: Destination): void {},
-  convertStringToBuffer(content: string): Uint8Array {
-    return Buffer.from(content, 'utf8');
+
+  createResponseState(): null {
+    return null;
   },
-  formatChunkAsString(type: string, props: Object): string {
-    return JSON.stringify({type, props});
+  createSuspenseBoundaryID(): SuspenseInstance {
+    // The ID is a pointer to the boundary itself.
+    return {state: 'pending', children: []};
+  },
+
+  pushTextInstance(target: Array<Uint8Array>, text: string): void {
+    const textInstance: TextInstance = {
+      text,
+      hidden: false,
+    };
+    target.push(Buffer.from(JSON.stringify(textInstance), 'utf8'), POP);
+  },
+  pushStartInstance(
+    target: Array<Uint8Array>,
+    type: string,
+    props: Object,
+  ): void {
+    const instance: Instance = {
+      type: type,
+      children: [],
+      prop: props.prop,
+      hidden: false,
+    };
+    target.push(Buffer.from(JSON.stringify(instance), 'utf8'));
+  },
+
+  pushEndInstance(
+    target: Array<Uint8Array>,
+    type: string,
+    props: Object,
+  ): void {
+    target.push(POP);
+  },
+
+  writePlaceholder(destination: Destination, id: number): boolean {
+    const parent = destination.stack[destination.stack.length - 1];
+    destination.placeholders.set(id, {
+      parent: parent,
+      index: parent.children.length,
+    });
   },
-  formatChunk(type: string, props: Object): Uint8Array {
-    return Buffer.from(JSON.stringify({type, props}), 'utf8');
+
+  writeStartCompletedSuspenseBoundary(
+    destination: Destination,
+    suspenseInstance: SuspenseInstance,
+  ): boolean {
+    suspenseInstance.state = 'complete';
+    const parent = destination.stack[destination.stack.length - 1];
+    parent.children.push(suspenseInstance);
+    destination.stack.push(suspenseInstance);
+  },
+  writeStartPendingSuspenseBoundary(
+    destination: Destination,
+    suspenseInstance: SuspenseInstance,
+  ): boolean {
+    suspenseInstance.state = 'pending';
+    const parent = destination.stack[destination.stack.length - 1];
+    parent.children.push(suspenseInstance);
+    destination.stack.push(suspenseInstance);
+  },
+  writeStartClientRenderedSuspenseBoundary(
+    destination: Destination,
+    suspenseInstance: SuspenseInstance,
+  ): boolean {
+    suspenseInstance.state = 'client-render';
+    const parent = destination.stack[destination.stack.length - 1];
+    parent.children.push(suspenseInstance);
+    destination.stack.push(suspenseInstance);
+  },
+  writeEndSuspenseBoundary(destination: Destination): boolean {
+    destination.stack.pop();
+  },
+
+  writeStartSegment(destination: Destination, 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);
+  },
+  writeEndSegment(destination: Destination): boolean {
+    destination.stack.pop();
+  },
+
+  writeCompletedSegmentInstruction(
+    destination: Destination,
+    responseState: ResponseState,
+    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,
+    );
+  },
+
+  writeCompletedBoundaryInstruction(
+    destination: Destination,
+    responseState: ResponseState,
+    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';
+  },
+
+  writeClientRenderBoundaryInstruction(
+    destination: Destination,
+    responseState: ResponseState,
+    boundary: SuspenseInstance,
+  ): boolean {
+    boundary.status = 'client-render';
   },
 });
 
 function render(children: React$Element<any>): Destination {
-  const destination: Destination = [];
+  const destination: Destination = {
+    root: null,
+    placeholders: new Map(),
+    segments: new Map(),
+    stack: [],
+  };
   const request = ReactNoopServer.createRequest(children, destination);
   ReactNoopServer.startWork(request);
   return destination;
diff --git a/packages/react-server/src/ReactDOMServerFormatConfig.js b/packages/react-server/src/ReactDOMServerFormatConfig.js
index 1e36890e995d..104834ca88ec 100644
--- a/packages/react-server/src/ReactDOMServerFormatConfig.js
+++ b/packages/react-server/src/ReactDOMServerFormatConfig.js
@@ -7,17 +7,368 @@
  * @flow
  */
 
-import {convertStringToBuffer} from 'react-server/src/ReactServerStreamConfig';
+import type {Destination} from 'react-server/src/ReactServerStreamConfig';
 
-export function formatChunkAsString(type: string, props: Object): string {
-  let str = '<' + type + '>';
-  if (typeof props.children === 'string') {
-    str += props.children;
+import {
+  writeChunk,
+  convertStringToBuffer,
+} from 'react-server/src/ReactServerStreamConfig';
+
+import invariant from 'shared/invariant';
+
+// Per response,
+export type ResponseState = {
+  sentCompleteSegmentFunction: boolean,
+  sentCompleteBoundaryFunction: boolean,
+  sentClientRenderFunction: boolean,
+};
+
+// Allows us to keep track of what we've already written so we can refer back to it.
+export function createResponseState(): ResponseState {
+  return {
+    sentCompleteSegmentFunction: false,
+    sentCompleteBoundaryFunction: false,
+    sentClientRenderFunction: false,
+  };
+}
+
+// This object is used to lazily reuse the ID of the first generated node, or assign one.
+// We can't assign an ID up front because the node we're attaching it to might already
+// have one. So we need to lazily use that if it's available.
+export type SuspenseBoundaryID = {
+  id: null | string,
+};
+
+export function createSuspenseBoundaryID(
+  responseState: ResponseState,
+): SuspenseBoundaryID {
+  return {id: null};
+}
+
+function encodeHTMLIDAttribute(value: string): string {
+  // TODO: This needs to be encoded for security purposes.
+  return value;
+}
+
+function encodeHTMLTextNode(text: string): string {
+  // TOOD: This needs to be encoded for security purposes.
+  return text;
+}
+
+export function pushTextInstance(
+  target: Array<Uint8Array>,
+  text: string,
+): void {
+  target.push(convertStringToBuffer(encodeHTMLTextNode(text)));
+}
+
+const startTag1 = convertStringToBuffer('<');
+const startTag2 = convertStringToBuffer('>');
+
+export function pushStartInstance(
+  target: Array<Uint8Array>,
+  type: string,
+  props: Object,
+): void {
+  // TODO: Figure out if it's self closing and everything else.
+  target.push(startTag1, convertStringToBuffer(type), startTag2);
+}
+
+const endTag1 = convertStringToBuffer('</');
+const endTag2 = convertStringToBuffer('>');
+
+export function pushEndInstance(
+  target: Array<Uint8Array>,
+  type: string,
+  props: Object,
+): void {
+  // TODO: Figure out if it was self closing.
+  target.push(endTag1, convertStringToBuffer(type), endTag2);
+}
+
+// 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.
+const placeholder1 = convertStringToBuffer('<span id="');
+const placeholder2 = convertStringToBuffer('P:');
+const placeholder3 = convertStringToBuffer('"></span>');
+export function writePlaceholder(
+  destination: Destination,
+  id: number,
+): boolean {
+  // TODO: This needs to be contextually aware and switch tag since not all parents allow for spans like
+  // <select> or <tbody>. E.g. suspending a component that renders a table row.
+  writeChunk(destination, placeholder1);
+  // TODO: Use the identifierPrefix option to make the prefix configurable.
+  writeChunk(destination, placeholder2);
+  const formattedID = convertStringToBuffer(id.toString(16));
+  writeChunk(destination, formattedID);
+  return writeChunk(destination, placeholder3);
+}
+
+// Suspense boundaries are encoded as comments.
+const startCompletedSuspenseBoundary = convertStringToBuffer('<!--$-->');
+const startPendingSuspenseBoundary = convertStringToBuffer('<!--$?-->');
+const startClientRenderedSuspenseBoundary = convertStringToBuffer('<!--$!-->');
+const endSuspenseBoundary = convertStringToBuffer('<!--/$-->');
+
+export function writeStartCompletedSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  return writeChunk(destination, startCompletedSuspenseBoundary);
+}
+export function writeStartPendingSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  return writeChunk(destination, startPendingSuspenseBoundary);
+}
+export function writeStartClientRenderedSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  return writeChunk(destination, startClientRenderedSuspenseBoundary);
+}
+export function writeEndSuspenseBoundary(destination: Destination): boolean {
+  return writeChunk(destination, endSuspenseBoundary);
+}
+
+const startSegment = convertStringToBuffer('<div hidden id="');
+const startSegment2 = convertStringToBuffer('S:');
+const startSegment3 = convertStringToBuffer('">');
+const endSegment = convertStringToBuffer('"></div>');
+export function writeStartSegment(
+  destination: Destination,
+  id: number,
+): boolean {
+  // TODO: What happens with special children like <tr> if they're inserted in a div? Maybe needs contextually aware containers.
+  writeChunk(destination, startSegment);
+  // TODO: Use the identifierPrefix option to make the prefix configurable.
+  writeChunk(destination, startSegment2);
+  const formattedID = convertStringToBuffer(id.toString(16));
+  writeChunk(destination, formattedID);
+  return writeChunk(destination, startSegment3);
+}
+export function writeEndSegment(destination: Destination): boolean {
+  return writeChunk(destination, endSegment);
+}
+
+// Instruction Set
+
+// The following code is the source scripts that we then minify and inline below,
+// with renamed function names that we hope don't collide:
+
+// const COMMENT_NODE = 8;
+// const SUSPENSE_START_DATA = '$';
+// const SUSPENSE_END_DATA = '/$';
+// const SUSPENSE_PENDING_START_DATA = '$?';
+// const SUSPENSE_FALLBACK_START_DATA = '$!';
+//
+// function clientRenderBoundary(suspenseBoundaryID) {
+//   // Find the fallback's first element.
+//   let suspenseNode = document.getElementById(suspenseBoundaryID);
+//   if (!suspenseNode) {
+//     // 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 might include text nodes.
+//   do {
+//     suspenseNode = suspenseNode.previousSibling;
+//   } while (
+//     suspenseNode.nodeType !== COMMENT_NODE ||
+//     suspenseNode.data !== SUSPENSE_PENDING_START_DATA
+//   );
+//   // Tag it to be client rendered.
+//   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+//   // Tell React to retry it if the parent already hydrated.
+//   if (suspenseNode._reactRetry) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// function completeBoundary(suspenseBoundaryID, contentID) {
+//   // Find the fallback's first element.
+//   let suspenseNode = document.getElementById(suspenseBoundaryID);
+//   const contentNode = document.getElementById(contentID);
+//   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
+//   // This might also help by not causing recalcing each time we move a child from here to the target.
+//   contentNode.parentNode.removeChild(contentNode);
+//   if (!suspenseNode) {
+//     // 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;
+//   }
+//   // Find the boundary around the fallback. This might include text nodes.
+//   do {
+//     suspenseNode = suspenseNode.previousSibling;
+//   } while (
+//     suspenseNode.nodeType !== COMMENT_NODE ||
+//     suspenseNode.data !== SUSPENSE_PENDING_START_DATA
+//   );
+//
+//   // Clear all the existing children. This is complicated because
+//   // there can be embedded Suspense boundaries in the fallback.
+//   // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
+//   // TOOD: 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 = suspenseNode.parentNode;
+//   let node = suspenseNode.nextSibling;
+//   let depth = 0;
+//   do {
+//     if (node && 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_FALLBACK_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) {
+//     suspenseNode._reactRetry();
+//   }
+// }
+//
+// 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);
+// }
+
+const completeSegmentFunction =
+  'function $RS(b,f){var a=document.getElementById(b),c=document.getElementById(f);for(a.parentNode.removeChild(a);a.firstChild;)c.parentNode.insertBefore(a.firstChild,c);c.parentNode.removeChild(c)}';
+const completeBoundaryFunction =
+  'function $RC(b,f){var a=document.getElementById(b),c=document.getElementById(f);c.parentNode.removeChild(c);if(a){do a=a.previousSibling;while(8!==a.nodeType||"$?"!==a.data);var h=a.parentNode,d=a.nextSibling,g=0;do{if(d&&8===d.nodeType){var e=d.data;if("/$"===e)if(0===g)break;else g--;else"$"!==e&&"$?"!==e&&"$!"!==e||g++}e=d.nextSibling;h.removeChild(d);d=e}while(d);for(;c.firstChild;)h.insertBefore(c.firstChild,d);a.data="$";a._reactRetry&&a._reactRetry()}}';
+const clientRenderFunction =
+  'function $RX(b){if(b=document.getElementById(b)){do b=b.previousSibling;while(8!==b.nodeType||"$?"!==b.data);b.data="$!";b._reactRetry&&b._reactRetry()}}';
+
+const completeSegmentScript1Full = convertStringToBuffer(
+  '<script>' + completeSegmentFunction + ';$RS("S:',
+);
+const completeSegmentScript1Partial = convertStringToBuffer('<script>$RS("S:');
+const completeSegmentScript2 = convertStringToBuffer('","P:');
+const completeSegmentScript3 = convertStringToBuffer('")</script>');
+
+export function writeCompletedSegmentInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  contentSegmentID: number,
+): boolean {
+  if (responseState.sentCompleteSegmentFunction) {
+    // The first time we write this, we'll need to include the full implementation.
+    responseState.sentCompleteSegmentFunction = true;
+    writeChunk(destination, completeSegmentScript1Full);
+  } else {
+    // Future calls can just reuse the same function.
+    writeChunk(destination, completeSegmentScript1Partial);
   }
-  str += '</' + type + '>';
-  return str;
+  // TODO: Use the identifierPrefix option to make the prefix configurable.
+  const formattedID = convertStringToBuffer(contentSegmentID.toString(16));
+  writeChunk(destination, formattedID);
+  writeChunk(destination, completeSegmentScript2);
+  writeChunk(destination, formattedID);
+  return writeChunk(destination, completeSegmentScript3);
 }
 
-export function formatChunk(type: string, props: Object): Uint8Array {
-  return convertStringToBuffer(formatChunkAsString(type, props));
+const completeBoundaryScript1Full = convertStringToBuffer(
+  '<script>' + completeBoundaryFunction + ';$RC("',
+);
+const completeBoundaryScript1Partial = convertStringToBuffer('<script>$RC("');
+const completeBoundaryScript2 = convertStringToBuffer('","S:');
+const completeBoundaryScript3 = convertStringToBuffer('")</script>');
+
+export function writeCompletedBoundaryInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  boundaryID: SuspenseBoundaryID,
+  contentSegmentID: number,
+): boolean {
+  if (responseState.sentCompleteBoundaryFunction) {
+    // The first time we write this, we'll need to include the full implementation.
+    responseState.sentCompleteBoundaryFunction = true;
+    writeChunk(destination, completeBoundaryScript1Full);
+  } else {
+    // Future calls can just reuse the same function.
+    writeChunk(destination, completeBoundaryScript1Partial);
+  }
+  // TODO: Use the identifierPrefix option to make the prefix configurable.
+  invariant(
+    boundaryID.id !== null,
+    'An ID must have been assigned before we can complete the boundary.',
+  );
+  const formattedBoundaryID = convertStringToBuffer(
+    encodeHTMLIDAttribute(boundaryID.id),
+  );
+  const formattedContentID = convertStringToBuffer(
+    contentSegmentID.toString(16),
+  );
+  writeChunk(destination, formattedBoundaryID);
+  writeChunk(destination, completeBoundaryScript2);
+  writeChunk(destination, formattedContentID);
+  return writeChunk(destination, completeBoundaryScript3);
+}
+
+const clientRenderScript1Full = convertStringToBuffer(
+  '<script>' + clientRenderFunction + ';$RX("',
+);
+const clientRenderScript1Partial = convertStringToBuffer('<script>$RX("');
+const clientRenderScript2 = convertStringToBuffer('")</script>');
+
+export function writeClientRenderBoundaryInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  boundaryID: SuspenseBoundaryID,
+): boolean {
+  if (responseState.sentClientRenderFunction) {
+    // The first time we write this, we'll need to include the full implementation.
+    responseState.sentClientRenderFunction = true;
+    writeChunk(destination, clientRenderScript1Full);
+  } else {
+    // Future calls can just reuse the same function.
+    writeChunk(destination, clientRenderScript1Partial);
+  }
+  invariant(
+    boundaryID.id !== null,
+    'An ID must have been assigned before we can complete the boundary.',
+  );
+  const formattedBoundaryID = convertStringToBuffer(
+    encodeHTMLIDAttribute(boundaryID.id),
+  );
+  writeChunk(destination, formattedBoundaryID);
+  return writeChunk(destination, clientRenderScript2);
 }
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index b8a2e6427ec4..26bc6b2f4d6a 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -7,8 +7,13 @@
  * @flow
  */
 
+import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 import type {Destination} from './ReactServerStreamConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  SuspenseBoundaryID,
+  ResponseState,
+} from './ReactServerFormatConfig';
 
 import {
   scheduleWork,
@@ -18,66 +23,819 @@ import {
   flushBuffered,
   close,
 } from './ReactServerStreamConfig';
-import {formatChunk} from './ReactServerFormatConfig';
-import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import {
+  writePlaceholder,
+  writeStartCompletedSuspenseBoundary,
+  writeStartPendingSuspenseBoundary,
+  writeStartClientRenderedSuspenseBoundary,
+  writeEndSuspenseBoundary,
+  writeStartSegment,
+  writeEndSegment,
+  writeClientRenderBoundaryInstruction,
+  writeCompletedBoundaryInstruction,
+  writeCompletedSegmentInstruction,
+  pushTextInstance,
+  pushStartInstance,
+  pushEndInstance,
+  createSuspenseBoundaryID,
+  createResponseState,
+} from './ReactServerFormatConfig';
+import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
 
-type OpaqueRequest = {
-  destination: Destination,
-  children: ReactNodeList,
-  completedChunks: Array<Uint8Array>,
-  flowing: boolean,
-  ...
+import invariant from 'shared/invariant';
+
+const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+
+type SuspenseBoundary = {
+  +id: SuspenseBoundaryID,
+  rootSegmentID: number,
+  forceClientRender: boolean, // if it errors or infinitely suspends
+  parentFlushed: boolean,
+  pendingWork: number, // when it reaches zero we can show this boundary's content
+  completedSegments: Array<Segment>, // completed but not yet flushed segments.
+  byteSize: number, // used to determine whether to inline children boundaries.
+};
+
+type SuspendedWork = {
+  node: ReactNodeList,
+  ping: () => void,
+  blockedBoundary: Root | SuspenseBoundary,
+  blockedSegment: Segment, // the segment we'll write to
+  assignID: null | SuspenseBoundaryID, // id to assign to the content
+};
+
+const PENDING = 0;
+const COMPLETED = 1;
+const FLUSHED = 2;
+const ERRORED = 3;
+
+type Root = null;
+
+type Segment = {
+  status: 0 | 1 | 2 | 3,
+  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<Uint8Array>,
+  +children: Array<Segment>,
+  // If this segment represents a fallback, this is the content that will replace that fallback.
+  +boundary: null | SuspenseBoundary,
+};
+
+const BUFFERING = 0;
+const FLOWING = 1;
+const CLOSED = 2;
+
+type Request = {
+  +destination: Destination,
+  +responseState: ResponseState,
+  +maxBoundarySize: number,
+  status: 0 | 1 | 2,
+  nextSegmentId: number,
+  allPendingWork: number, // when it reaches zero, we can close the connection.
+  pendingRootWork: number, // when this reaches zero, we've finished at least the root boundary.
+  completedRootSegment: null | Segment, // Completed but not yet flushed root segments.
+  pingedWork: Array<SuspendedWork>,
+  // 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.
 };
 
 export function createRequest(
   children: ReactNodeList,
   destination: Destination,
-): OpaqueRequest {
-  return {destination, children, completedChunks: [], flowing: false};
+): Request {
+  const pingedWork = [];
+  const request = {
+    destination,
+    responseState: createResponseState(),
+    maxBoundarySize: 1024,
+    status: BUFFERING,
+    nextSegmentId: 0,
+    allPendingWork: 0,
+    pendingRootWork: 0,
+    completedRootSegment: null,
+    pingedWork: pingedWork,
+    clientRenderedBoundaries: [],
+    completedBoundaries: [],
+    partialBoundaries: [],
+  };
+  // This segment represents the root fallback.
+  const rootSegment = createPendingSegment(request, 0, null);
+  // There is no parent so conceptually, we're unblocked to flush this segment.
+  rootSegment.parentFlushed = true;
+  const rootWork = createSuspendedWork(
+    request,
+    children,
+    null,
+    rootSegment,
+    null,
+  );
+  pingedWork.push(rootWork);
+  return request;
+}
+
+function pingSuspendedWork(request: Request, work: SuspendedWork): void {
+  const pingedWork = request.pingedWork;
+  pingedWork.push(work);
+  if (pingedWork.length === 1) {
+    scheduleWork(() => performWork(request));
+  }
+}
+
+function createSuspenseBoundary(request: Request): SuspenseBoundary {
+  return {
+    id: createSuspenseBoundaryID(request.responseState),
+    rootSegmentID: -1,
+    parentFlushed: false,
+    pendingWork: 0,
+    forceClientRender: false,
+    completedSegments: [],
+    byteSize: 0,
+  };
 }
 
-function performWork(request: OpaqueRequest): void {
-  const element = (request.children: any);
-  request.children = null;
-  if (element && element.$$typeof !== REACT_ELEMENT_TYPE) {
+function createSuspendedWork(
+  request: Request,
+  node: ReactNodeList,
+  blockedBoundary: Root | SuspenseBoundary,
+  blockedSegment: Segment,
+  assignID: null | SuspenseBoundaryID,
+): SuspendedWork {
+  request.allPendingWork++;
+  if (blockedBoundary === null) {
+    request.pendingRootWork++;
+  } else {
+    blockedBoundary.pendingWork++;
+  }
+  const work = {
+    node,
+    ping: () => pingSuspendedWork(request, work),
+    blockedBoundary,
+    blockedSegment,
+    assignID,
+  };
+  return work;
+}
+
+function createPendingSegment(
+  request: Request,
+  index: number,
+  boundary: null | SuspenseBoundary,
+): Segment {
+  return {
+    status: PENDING,
+    id: -1, // lazily assigned later
+    index,
+    parentFlushed: false,
+    chunks: [],
+    children: [],
+    boundary,
+  };
+}
+
+function reportError(request: Request, error: mixed): void {
+  // TODO: Report errors on the server.
+}
+
+function fatalError(request: Request, error: mixed): 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.
+  request.status = CLOSED;
+  // TODO: Destroy the stream with an error. We weren't able to complete the root.
+}
+
+function renderNode(
+  request: Request,
+  parentBoundary: Root | SuspenseBoundary,
+  segment: Segment,
+  node: ReactNodeList,
+): void {
+  if (typeof node === 'string') {
+    pushTextInstance(segment.chunks, node);
     return;
   }
+  if (
+    typeof node !== 'object' ||
+    !node ||
+    (node: any).$$typeof !== REACT_ELEMENT_TYPE
+  ) {
+    throw new Error('Not yet implemented node type.');
+  }
+  const element: React$Element<any> = (node: any);
   const type = element.type;
   const props = element.props;
-  if (typeof type !== 'string') {
+  if (typeof type === 'function') {
+    try {
+      const result = type(props);
+      renderNode(request, parentBoundary, segment, result);
+    } catch (x) {
+      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+        // Something suspended, we'll need to create a new segment and resolve it later.
+        const insertionIndex = segment.chunks.length;
+        const newSegment = createPendingSegment(request, insertionIndex, null);
+        const suspendedWork = createSuspendedWork(
+          request,
+          node,
+          parentBoundary,
+          newSegment,
+          null,
+        );
+        const ping = suspendedWork.ping;
+        x.then(ping, ping);
+        // TODO: Emit place holder
+      } else {
+        // We can rethrow to terminate the rest of this tree.
+        throw x;
+      }
+    }
+  } else if (typeof type === 'string') {
+    pushStartInstance(segment.chunks, type, props);
+    renderNode(request, parentBoundary, segment, props.children);
+    pushEndInstance(segment.chunks, type, props);
+  } else if (type === REACT_SUSPENSE_TYPE) {
+    // 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 newBoundary = createSuspenseBoundary(request);
+
+    const insertionIndex = segment.chunks.length;
+    // The children of the boundary segment is actually the fallback.
+    const boundarySegment = createPendingSegment(
+      request,
+      insertionIndex,
+      newBoundary,
+    );
+    // We create suspended work 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 suspendedFallbackWork = createSuspendedWork(
+      request,
+      fallback,
+      parentBoundary,
+      boundarySegment,
+      newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
+    );
+    // 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 work on.
+    request.pingedWork.push(suspendedFallbackWork);
+
+    // This segment is the actual child content. We can start rendering that immediately.
+    const contentRootSegment = createPendingSegment(request, 0, null);
+    // 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;
+    // TODO: Currently this is running synchronously. We could instead schedule this to pingedWork.
+    // I suspect that there might be some efficiency benefits from not creating the suspended work
+    // and instead just using the stack if possible. Particularly when we add contexts.
+    const contentWork = createSuspendedWork(
+      request,
+      content,
+      newBoundary,
+      contentRootSegment,
+      null,
+    );
+    retryWork(request, contentWork);
+  } else {
+    throw new Error('Not yet implemented element type.');
+  }
+}
+
+function errorWork(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  segment: Segment,
+  error: mixed,
+) {
+  segment.status = ERRORED;
+
+  request.allPendingWork--;
+  if (boundary !== null) {
+    boundary.pendingWork--;
+  }
+
+  // Report the error to a global handler.
+  reportError(request, error);
+  if (boundary === null) {
+    fatalError(request, error);
+  } else if (!boundary.forceClientRender) {
+    boundary.forceClientRender = true;
+    // 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);
+    }
+  }
+}
+
+function completeWork(
+  request: Request,
+  boundary: Root | SuspenseBoundary,
+  segment: Segment,
+) {
+  segment.status = COMPLETED;
+  request.allPendingWork--;
+
+  if (boundary === null) {
+    request.pendingRootWork--;
+    if (segment.parentFlushed) {
+      invariant(
+        request.completedRootSegment === null,
+        'There can only be one root segment. This is a bug in React.',
+      );
+      request.completedRootSegment = segment;
+    }
     return;
   }
-  request.completedChunks.push(formatChunk(type, props));
-  if (request.flowing) {
-    flushCompletedChunks(request);
+
+  boundary.pendingWork--;
+  if (boundary.forceClientRender) {
+    // This already errored.
+    return;
   }
+  if (boundary.pendingWork === 0) {
+    // This must have been the last segment we were waiting on. This boundary is now complete.
+    if (segment.parentFlushed) {
+      // Our parent segment already flushed, so we need to schedule this segment to be emitted.
+      boundary.completedSegments.push(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);
+    }
+  } else {
+    if (segment.parentFlushed) {
+      // Our parent already flushed, so we need to schedule this segment to be emitted.
+      const completedSegments = boundary.completedSegments;
+      completedSegments.push(segment);
+      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);
+        }
+      }
+    }
+  }
+}
+
+function retryWork(request: Request, work: SuspendedWork): void {
+  const segment = work.blockedSegment;
+  const boundary = work.blockedBoundary;
+  try {
+    let node = work.node;
+    while (
+      typeof node === 'object' &&
+      node !== null &&
+      (node: any).$$typeof === REACT_ELEMENT_TYPE &&
+      typeof node.type === 'function'
+    ) {
+      // Doing this here lets us reuse this same Segment if the next component
+      // also suspends.
+      const element: React$Element<any> = (node: any);
+      work.node = node;
+      // TODO: Classes and legacy context etc.
+      node = element.type(element.props);
+    }
+
+    renderNode(request, boundary, segment, node);
 
-  flushBuffered(request.destination);
+    completeWork(request, boundary, segment);
+  } catch (x) {
+    if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+      // Something suspended again, let's pick it back up later.
+      const ping = work.ping;
+      x.then(ping, ping);
+    } else {
+      errorWork(request, boundary, segment, x);
+    }
+  }
 }
 
-function flushCompletedChunks(request: OpaqueRequest) {
-  const destination = request.destination;
-  const chunks = request.completedChunks;
-  request.completedChunks = [];
+function performWork(request: Request): void {
+  if (request.status === CLOSED) {
+    return;
+  }
+  const prevDispatcher = ReactCurrentDispatcher.current;
+  ReactCurrentDispatcher.current = Dispatcher;
+
+  try {
+    const pingedWork = request.pingedWork;
+    let i;
+    for (i = 0; i < pingedWork.length; i++) {
+      const work = pingedWork[i];
+      retryWork(request, work);
+    }
+    pingedWork.splice(0, i);
+    if (request.status === FLOWING) {
+      flushCompletedQueues(request);
+    }
+  } catch (error) {
+    fatalError(request, error);
+  } finally {
+    ReactCurrentDispatcher.current = prevDispatcher;
+  }
+}
+
+function flushSubtree(
+  request: Request,
+  destination: Destination,
+  segment: Segment,
+): 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.
+      const segmentID = (segment.id = request.nextSegmentId++);
+      return writePlaceholder(destination, 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);
+      }
+      // Finally just write all the remaining chunks
+      for (; chunkIdx < chunks.length; chunkIdx++) {
+        r = writeChunk(destination, chunks[chunkIdx]);
+      }
+      return r;
+    }
+    default: {
+      invariant(
+        false,
+        'Errored or already flushed boundaries should not be flushed again. This is a bug in React.',
+      );
+    }
+  }
+}
+
+function flushSegment(
+  request: Request,
+  destination,
+  segment: Segment,
+): boolean {
+  const boundary = segment.boundary;
+  if (boundary === null) {
+    // Not a suspense boundary.
+    return flushSubtree(request, destination, segment);
+  }
+  boundary.parentFlushed = true;
+  // This segment is a Suspense boundary. We need to decide whether to
+  // emit the content or the fallback now.
+  if (boundary.forceClientRender) {
+    // Emit a client rendered suspense boundary wrapper.
+    // We never queue the inner boundary so we'll never emit its content or partial segments.
+
+    writeStartClientRenderedSuspenseBoundary(destination, boundary.id);
+
+    // Flush the fallback.
+    flushSubtree(request, destination, segment);
+
+    return writeEndSuspenseBoundary(destination);
+  } else if (boundary.pendingWork > 0) {
+    // This boundary is still loading. Emit a pending suspense boundary wrapper.
+
+    // Assign an ID to refer to the future content by.
+    boundary.rootSegmentID = request.nextSegmentId++;
+    if (boundary.completedSegments.length > 0) {
+      // If this is at least partially complete, we can queue it to be partially emmitted early.
+      request.partialBoundaries.push(boundary);
+    }
+
+    writeStartPendingSuspenseBoundary(destination, boundary.id);
+
+    // Flush the fallback.
+    flushSubtree(request, destination, segment);
+
+    return writeEndSuspenseBoundary(destination);
+  } else if (boundary.byteSize > request.maxBoundarySize) {
+    // This boundary is large and 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, boundary.id);
+
+    // Flush the fallback.
+    flushSubtree(request, destination, segment);
+
+    return writeEndSuspenseBoundary(destination);
+  } else {
+    // We can inline this boundary's content as a complete boundary.
+
+    writeStartCompletedSuspenseBoundary(destination, boundary.id);
+
+    const completedSegments = boundary.completedSegments;
+    invariant(
+      completedSegments.length === 1,
+      'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
+    );
+    const contentSegment = completedSegments[0];
+    flushSegment(request, destination, contentSegment);
+
+    return writeEndSuspenseBoundary(destination);
+  }
+}
+
+function flushClientRenderedBoundary(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+): boolean {
+  return writeClientRenderBoundaryInstruction(
+    destination,
+    request.responseState,
+    boundary.id,
+  );
+}
+
+function flushSegmentContainer(
+  request: Request,
+  destination: Destination,
+  segment: Segment,
+): boolean {
+  writeStartSegment(destination, segment.id);
+  flushSegment(request, destination, segment);
+  return writeEndSegment(destination);
+}
+
+function flushCompletedBoundary(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+): boolean {
+  const completedSegments = boundary.completedSegments;
+  let i = 0;
+  for (; i < completedSegments.length; i++) {
+    const segment = completedSegments[i];
+    flushPartiallyCompletedSegment(request, destination, boundary, segment);
+  }
+  completedSegments.length = 0;
+
+  return writeCompletedBoundaryInstruction(
+    destination,
+    request.responseState,
+    boundary.id,
+    boundary.rootSegmentID,
+  );
+}
+
+function flushPartialBoundary(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+): boolean {
+  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);
+  return true;
+}
+
+function flushPartiallyCompletedSegment(
+  request: Request,
+  destination: Destination,
+  boundary: SuspenseBoundary,
+  segment: Segment,
+): boolean {
+  if (segment.status === FLUSHED) {
+    // We've already flushed this inline.
+    return true;
+  }
+
+  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);
+    invariant(
+      rootSegmentID !== -1,
+      'A root segment ID must have been assigned by now. This is a bug in React.',
+    );
+    return flushSegmentContainer(request, destination, segment);
+  } else {
+    flushSegmentContainer(request, destination, segment);
+    return writeCompletedSegmentInstruction(
+      destination,
+      request.responseState,
+      segmentID,
+    );
+  }
+}
 
+let reentrant = false;
+function flushCompletedQueues(request: Request): void {
+  if (reentrant) {
+    return;
+  }
+  reentrant = true;
+
+  const destination = request.destination;
   beginWriting(destination);
   try {
-    for (let i = 0; i < chunks.length; i++) {
-      const chunk = chunks[i];
-      writeChunk(destination, chunk);
+    // 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.
+
+    // TODO: Emit preloading.
+
+    // TODO: It's kind of unfortunate to keep checking this array after we've already
+    // emitted the root.
+    const completedRootSegment = request.completedRootSegment;
+    if (completedRootSegment !== null && request.pendingRootWork === 0) {
+      flushSegment(request, destination, completedRootSegment);
+      request.completedRootSegment = null;
+    }
+
+    // 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;
+    let i;
+    for (i = 0; i < clientRenderedBoundaries.length; i++) {
+      const boundary = clientRenderedBoundaries[i];
+      if (!flushClientRenderedBoundary(request, destination, boundary)) {
+        request.status = BUFFERING;
+        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.status = BUFFERING;
+        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.
+    const partialBoundaries = request.partialBoundaries;
+    for (i = 0; i < partialBoundaries.length; i++) {
+      const boundary = partialBoundaries[i];
+      if (!flushPartialBoundary(request, destination, boundary)) {
+        request.status = BUFFERING;
+        i++;
+        partialBoundaries.splice(0, i);
+        return;
+      }
+    }
+    partialBoundaries.splice(0, i);
+
+    // Next we check the completed boundaries again. This may have had
+    // boundaries added to it in case they were too larged to be inlined.
+    // 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.status = BUFFERING;
+        i++;
+        largeBoundaries.splice(0, i);
+        return;
+      }
+    }
+    largeBoundaries.splice(0, i);
   } finally {
+    reentrant = false;
     completeWriting(destination);
+    flushBuffered(destination);
+    if (
+      request.allPendingWork === 0 &&
+      request.pingedWork.length === 0 &&
+      request.clientRenderedBoundaries.length === 0 &&
+      request.completedBoundaries.length === 0
+      // We don't need to check any partially completed segments because
+      // either they have pending work or they're complete.
+    ) {
+      // We're done.
+      close(destination);
+    }
   }
-  close(destination);
 }
 
-export function startWork(request: OpaqueRequest): void {
-  request.flowing = true;
+// TODO: Expose a way to abort further processing, without closing the connection from the outside.
+// This would put all waiting boundaries into client-only mode.
+
+export function startWork(request: Request): void {
+  // TODO: Don't automatically start flowing. Expose an explicit signal. Auto-start once everything is done.
+  request.status = FLOWING;
   scheduleWork(() => performWork(request));
 }
 
-export function startFlowing(request: OpaqueRequest): void {
-  request.flowing = false;
-  flushCompletedChunks(request);
+export function startFlowing(request: Request): void {
+  if (request.status === CLOSED) {
+    return;
+  }
+  request.status = FLOWING;
+  try {
+    flushCompletedQueues(request);
+  } catch (error) {
+    fatalError(request, error);
+  }
+}
+
+function notYetImplemented(): void {
+  throw new Error('Not yet implemented.');
 }
+
+function unsupportedRefresh() {
+  invariant(false, 'Cache cannot be refreshed during server rendering.');
+}
+
+function unsupportedStartTransition() {
+  invariant(false, 'startTransition cannot be called during server rendering.');
+}
+
+function noop(): void {}
+
+const Dispatcher: DispatcherType = {
+  useMemo<T>(nextCreate: () => T): T {
+    return nextCreate();
+  },
+  useCallback<T>(callback: T): T {
+    return callback;
+  },
+  useDebugValue(): void {},
+  useDeferredValue<T>(value: T): T {
+    return value;
+  },
+  useTransition(): [(callback: () => void) => void, boolean] {
+    return [unsupportedStartTransition, false];
+  },
+  getCacheForType<T>(resourceType: () => T): T {
+    throw new Error('Not yet implemented. Should mark as client rendered.');
+  },
+  readContext: (notYetImplemented: any),
+  useContext: (notYetImplemented: any),
+  useReducer: (notYetImplemented: any),
+  useRef: (notYetImplemented: any),
+  useState: (notYetImplemented: any),
+  useLayoutEffect: noop,
+  // useImperativeHandle is not run in the server environment
+  useImperativeHandle: noop,
+  // Effects are not run in the server environment.
+  useEffect: noop,
+  useOpaqueIdentifier: (notYetImplemented: any),
+  useMutableSource: (notYetImplemented: any),
+  useCacheRefresh(): <T>(?() => T, ?T) => void {
+    return unsupportedRefresh;
+  },
+};
diff --git a/packages/react-server/src/ReactNativeServerFormatConfig.js b/packages/react-server/src/ReactNativeServerFormatConfig.js
index 1e36890e995d..f4e58a03c7ef 100644
--- a/packages/react-server/src/ReactNativeServerFormatConfig.js
+++ b/packages/react-server/src/ReactNativeServerFormatConfig.js
@@ -7,17 +7,197 @@
  * @flow
  */
 
-import {convertStringToBuffer} from 'react-server/src/ReactServerStreamConfig';
+import type {Destination} from 'react-server/src/ReactServerStreamConfig';
 
-export function formatChunkAsString(type: string, props: Object): string {
-  let str = '<' + type + '>';
-  if (typeof props.children === 'string') {
-    str += props.children;
+import {
+  writeChunk,
+  convertStringToBuffer,
+} from 'react-server/src/ReactServerStreamConfig';
+
+import invariant from 'shared/invariant';
+
+// Every list of children or string is null terminated.
+const END_TAG = 0;
+// Tree node tags.
+const INSTANCE_TAG = 1;
+const PLACEHOLDER_TAG = 2;
+const SUSPENSE_PENDING_TAG = 3;
+const SUSPENSE_COMPLETE_TAG = 4;
+const SUSPENSE_CLIENT_RENDER_TAG = 5;
+// Command tags.
+const SEGMENT_TAG = 1;
+const SUSPENSE_UPDATE_TO_COMPLETE_TAG = 2;
+const SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG = 3;
+
+const END = new Uint8Array(1);
+END[0] = END_TAG;
+const PLACEHOLDER = new Uint8Array(1);
+PLACEHOLDER[0] = PLACEHOLDER_TAG;
+const INSTANCE = new Uint8Array(1);
+INSTANCE[0] = INSTANCE_TAG;
+const SUSPENSE_PENDING = new Uint8Array(1);
+SUSPENSE_PENDING[0] = SUSPENSE_PENDING_TAG;
+const SUSPENSE_COMPLETE = new Uint8Array(1);
+SUSPENSE_COMPLETE[0] = SUSPENSE_COMPLETE_TAG;
+const SUSPENSE_CLIENT_RENDER = new Uint8Array(1);
+SUSPENSE_CLIENT_RENDER[0] = SUSPENSE_CLIENT_RENDER_TAG;
+
+const SEGMENT = new Uint8Array(1);
+SEGMENT[0] = SEGMENT_TAG;
+const SUSPENSE_UPDATE_TO_COMPLETE = new Uint8Array(1);
+SUSPENSE_UPDATE_TO_COMPLETE[0] = SUSPENSE_UPDATE_TO_COMPLETE_TAG;
+const SUSPENSE_UPDATE_TO_CLIENT_RENDER = new Uint8Array(1);
+SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
+
+// Per response,
+export type ResponseState = {
+  nextSuspenseID: number,
+};
+
+// Allows us to keep track of what we've already written so we can refer back to it.
+export function createResponseState(): ResponseState {
+  return {
+    nextSuspenseID: 0,
+  };
+}
+
+// This object is used to lazily reuse the ID of the first generated node, or assign one.
+// This is very specific to DOM where we can't assign an ID to.
+export type SuspenseBoundaryID = number;
+
+export function createSuspenseBoundaryID(
+  responseState: ResponseState,
+): SuspenseBoundaryID {
+  return responseState.nextSuspenseID++;
+}
+
+const RAW_TEXT = convertStringToBuffer('RCTRawText');
+
+export function pushTextInstance(
+  target: Array<Uint8Array>,
+  text: string,
+): void {
+  target.push(
+    INSTANCE,
+    RAW_TEXT, // Type
+    END, // Null terminated type string
+    // TODO: props { text: text }
+    END, // End of children
+  );
+}
+
+export function pushStartInstance(
+  target: Array<Uint8Array>,
+  type: string,
+  props: Object,
+): void {
+  target.push(
+    INSTANCE,
+    convertStringToBuffer(type),
+    END, // Null terminated type string
+    // TODO: props
+  );
+}
+
+export function pushEndInstance(
+  target: Array<Uint8Array>,
+  type: string,
+  props: Object,
+): void {
+  target.push(END);
+}
+
+// IDs are formatted as little endian Uint16
+function formatID(id: number): Uint8Array {
+  if (id > 0xffff) {
+    invariant(
+      false,
+      'More boundaries or placeholders than we expected to ever emit.',
+    );
   }
-  str += '</' + type + '>';
-  return str;
+  const buffer = new Uint8Array(2);
+  buffer[0] = (id >>> 8) & 0xff;
+  buffer[1] = id & 0xff;
+  return buffer;
+}
+
+// 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.
+export function writePlaceholder(
+  destination: Destination,
+  id: number,
+): boolean {
+  writeChunk(destination, PLACEHOLDER);
+  return writeChunk(destination, formatID(id));
+}
+
+// Suspense boundaries are encoded as comments.
+export function writeStartCompletedSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_COMPLETE);
+  return writeChunk(destination, formatID(id));
+}
+export function writeStartPendingSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_PENDING);
+  return writeChunk(destination, formatID(id));
+}
+export function writeStartClientRenderedSuspenseBoundary(
+  destination: Destination,
+  id: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_CLIENT_RENDER);
+  return writeChunk(destination, formatID(id));
+}
+export function writeEndSuspenseBoundary(destination: Destination): boolean {
+  return writeChunk(destination, END);
+}
+
+export function writeStartSegment(
+  destination: Destination,
+  id: number,
+): boolean {
+  writeChunk(destination, SEGMENT);
+  return writeChunk(destination, formatID(id));
+}
+export function writeEndSegment(destination: Destination): boolean {
+  return writeChunk(destination, END);
+}
+
+// Instruction Set
+
+export function writeCompletedSegmentInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  contentSegmentID: number,
+): boolean {
+  // We don't need to emit this. Instead the client will keep track of pending placeholders.
+  // TODO: Returning true here is not correct. Avoid having to call this function at all.
+  return true;
+}
+
+export function writeCompletedBoundaryInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  boundaryID: SuspenseBoundaryID,
+  contentSegmentID: number,
+): boolean {
+  writeChunk(destination, SUSPENSE_UPDATE_TO_COMPLETE);
+  writeChunk(destination, formatID(boundaryID));
+  return writeChunk(destination, formatID(contentSegmentID));
 }
 
-export function formatChunk(type: string, props: Object): Uint8Array {
-  return convertStringToBuffer(formatChunkAsString(type, props));
+export function writeClientRenderBoundaryInstruction(
+  destination: Destination,
+  responseState: ResponseState,
+  boundaryID: SuspenseBoundaryID,
+): boolean {
+  writeChunk(destination, SUSPENSE_UPDATE_TO_CLIENT_RENDER);
+  return writeChunk(destination, formatID(boundaryID));
 }
diff --git a/packages/react-server/src/__tests__/ReactServer-test.js b/packages/react-server/src/__tests__/ReactServer-test.js
index 758dac5a5085..e6dc78ff61a3 100644
--- a/packages/react-server/src/__tests__/ReactServer-test.js
+++ b/packages/react-server/src/__tests__/ReactServer-test.js
@@ -21,8 +21,15 @@ describe('ReactServer', () => {
     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).toEqual([{type: 'div', props: {children: 'hello world'}}]);
+    expect(result.root).toEqual(div('hello world'));
   });
 });
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index f00ecbf2529a..eb81d61a47b3 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -25,6 +25,27 @@
 
 declare var $$$hostConfig: any;
 export opaque type Destination = mixed; // eslint-disable-line no-undef
+export opaque type ResponseState = mixed;
+export opaque type SuspenseBoundaryID = mixed;
 
-export const formatChunkAsString = $$$hostConfig.formatChunkAsString;
-export const formatChunk = $$$hostConfig.formatChunk;
+export const createResponseState = $$$hostConfig.createResponseState;
+export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
+export const pushTextInstance = $$$hostConfig.pushTextInstance;
+export const pushStartInstance = $$$hostConfig.pushStartInstance;
+export const pushEndInstance = $$$hostConfig.pushEndInstance;
+export const writePlaceholder = $$$hostConfig.writePlaceholder;
+export const writeStartCompletedSuspenseBoundary =
+  $$$hostConfig.writeStartCompletedSuspenseBoundary;
+export const writeStartPendingSuspenseBoundary =
+  $$$hostConfig.writeStartPendingSuspenseBoundary;
+export const writeStartClientRenderedSuspenseBoundary =
+  $$$hostConfig.writeStartClientRenderedSuspenseBoundary;
+export const writeEndSuspenseBoundary = $$$hostConfig.writeEndSuspenseBoundary;
+export const writeStartSegment = $$$hostConfig.writeStartSegment;
+export const writeEndSegment = $$$hostConfig.writeEndSegment;
+export const writeCompletedSegmentInstruction =
+  $$$hostConfig.writeCompletedSegmentInstruction;
+export const writeCompletedBoundaryInstruction =
+  $$$hostConfig.writeCompletedBoundaryInstruction;
+export const writeClientRenderBoundaryInstruction =
+  $$$hostConfig.writeClientRenderBoundaryInstruction;
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index fc89fb5ca39b..180106a9831c 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -376,5 +376,13 @@
   "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."
+  "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": "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."
 }

From f2b6bf7c86f01ca194914e0e4305d8f430024a8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 12 Mar 2021 18:21:02 -0500
Subject: [PATCH 0314/1603] [Fizz] Destroy the stream with an error if the root
 throws (#20992)

* Destroy the stream with an error if the root throws

But not if the error happens inside a suspense boundary.

* Try rewriting the test to see if it works in other Node envs
---
 .../ReactDOMFizzServerBrowser-test.js         | 65 ++++++++++++++
 .../__tests__/ReactDOMFizzServerNode-test.js  | 86 +++++++++++++++++--
 .../src/ReactNoopFlightServer.js              |  1 +
 .../src/ReactNoopServer.js                    |  1 +
 packages/react-server/src/ReactFizzServer.js  |  6 +-
 .../src/ReactServerStreamConfigBrowser.js     | 15 ++++
 .../src/ReactServerStreamConfigNode.js        |  5 ++
 .../forks/ReactServerStreamConfig.custom.js   |  1 +
 8 files changed, 174 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index b100f1b5a68d..69a6e705ee6f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -15,6 +15,7 @@ global.TextEncoder = require('util').TextEncoder;
 
 let React;
 let ReactDOMFizzServer;
+let Suspense;
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
@@ -23,8 +24,18 @@ describe('ReactDOMFizzServer', () => {
     if (__EXPERIMENTAL__) {
       ReactDOMFizzServer = require('react-dom/unstable-fizz.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 = '';
@@ -45,4 +56,58 @@ describe('ReactDOMFizzServer', () => {
     const result = await readResult(stream);
     expect(result).toBe('<div>hello world</div>');
   });
+
+  // @gate experimental
+  it('should error the stream when an error is thrown at the root', async () => {
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Throw />
+      </div>,
+    );
+
+    let caughtError = null;
+    let result = '';
+    try {
+      result = await readResult(stream);
+    } catch (x) {
+      caughtError = x;
+    }
+    expect(caughtError).toBe(theError);
+    expect(result).toBe('');
+  });
+
+  // @gate experimental
+  it('should error the stream when an error is thrown inside a fallback', async () => {
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<Throw />}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+    );
+
+    let caughtError = null;
+    let result = '';
+    try {
+      result = await readResult(stream);
+    } catch (x) {
+      caughtError = x;
+    }
+    expect(caughtError).toBe(theError);
+    expect(result).toBe('');
+  });
+
+  // @gate experimental
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Throw />
+        </Suspense>
+      </div>,
+    );
+
+    const result = await readResult(stream);
+    expect(result).toContain('Loading');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index ff09f6454029..1b1c5c4a314a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -13,6 +13,7 @@
 let Stream;
 let React;
 let ReactDOMFizzServer;
+let Suspense;
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
@@ -22,21 +23,96 @@ describe('ReactDOMFizzServer', () => {
       ReactDOMFizzServer = require('react-dom/unstable-fizz');
     }
     Stream = require('stream');
+    Suspense = React.Suspense;
   });
 
   function getTestWritable() {
     const writable = new Stream.PassThrough();
     writable.setEncoding('utf8');
-    writable.result = '';
-    writable.on('data', chunk => (writable.result += chunk));
-    return writable;
+    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;
   }
 
   // @gate experimental
   it('should call pipeToNodeWritable', () => {
-    const writable = getTestWritable();
+    const {writable, output} = getTestWritable();
     ReactDOMFizzServer.pipeToNodeWritable(<div>hello world</div>, writable);
     jest.runAllTimers();
-    expect(writable.result).toBe('<div>hello world</div>');
+    expect(output.result).toBe('<div>hello world</div>');
+  });
+
+  // @gate experimental
+  it('should error the stream when an error is thrown at the root', async () => {
+    const {writable, output, completed} = getTestWritable();
+    ReactDOMFizzServer.pipeToNodeWritable(
+      <div>
+        <Throw />
+      </div>,
+      writable,
+    );
+
+    await completed;
+
+    expect(output.error).toBe(theError);
+    expect(output.result).toBe('');
+  });
+
+  // @gate experimental
+  it('should error the stream when an error is thrown inside a fallback', async () => {
+    const {writable, output, completed} = getTestWritable();
+    ReactDOMFizzServer.pipeToNodeWritable(
+      <div>
+        <Suspense fallback={<Throw />}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      writable,
+    );
+
+    await completed;
+
+    expect(output.error).toBe(theError);
+    expect(output.result).toBe('');
+  });
+
+  // @gate experimental
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const {writable, output, completed} = getTestWritable();
+    ReactDOMFizzServer.pipeToNodeWritable(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Throw />
+        </Suspense>
+      </div>,
+      writable,
+    );
+
+    await completed;
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('Loading');
   });
 });
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index bbace47e2eb4..411e6094164c 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -32,6 +32,7 @@ const ReactNoopFlightServer = ReactFlightServer({
   },
   completeWriting(destination: Destination): void {},
   close(destination: Destination): void {},
+  closeWithError(destination: Destination, error: mixed): void {},
   flushBuffered(destination: Destination): void {},
   convertStringToBuffer(content: string): Uint8Array {
     return Buffer.from(content, 'utf8');
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 3be95ab05169..d4b60739c619 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -74,6 +74,7 @@ const ReactNoopServer = ReactFizzServer({
   },
   completeWriting(destination: Destination): void {},
   close(destination: Destination): void {},
+  closeWithError(destination: Destination, error: mixed): void {},
   flushBuffered(destination: Destination): void {},
 
   createResponseState(): null {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 26bc6b2f4d6a..4f5879b86bff 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -22,6 +22,7 @@ import {
   completeWriting,
   flushBuffered,
   close,
+  closeWithError,
 } from './ReactServerStreamConfig';
 import {
   writePlaceholder,
@@ -205,7 +206,7 @@ function fatalError(request: Request, error: mixed): void {
   // a suspense boundary or if the root suspense boundary's fallback errors.
   // It's also called if React itself or its host configs errors.
   request.status = CLOSED;
-  // TODO: Destroy the stream with an error. We weren't able to complete the root.
+  closeWithError(request.destination, error);
 }
 
 function renderNode(
@@ -237,6 +238,7 @@ function renderNode(
         // Something suspended, we'll need to create a new segment and resolve it later.
         const insertionIndex = segment.chunks.length;
         const newSegment = createPendingSegment(request, insertionIndex, null);
+        segment.children.push(newSegment);
         const suspendedWork = createSuspendedWork(
           request,
           node,
@@ -273,6 +275,7 @@ function renderNode(
       insertionIndex,
       newBoundary,
     );
+    segment.children.push(boundarySegment);
     // We create suspended work 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 suspendedFallbackWork = createSuspendedWork(
@@ -326,6 +329,7 @@ function errorWork(
     fatalError(request, error);
   } else if (!boundary.forceClientRender) {
     boundary.forceClientRender = true;
+
     // Regardless of what happens next, this boundary won't be displayed,
     // so we can flush it, if the parent already flushed.
     if (boundary.parentFlushed) {
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index aa17656ceebe..efcef78509cb 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -39,3 +39,18 @@ const textEncoder = new TextEncoder();
 export function convertStringToBuffer(content: string): Uint8Array {
   return textEncoder.encode(content);
 }
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  if (typeof destination.error === 'function') {
+    // $FlowFixMe: 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();
+  }
+}
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index 87c37ffab677..00e3364fc93a 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -64,3 +64,8 @@ export function close(destination: Destination) {
 export function convertStringToBuffer(content: string): Uint8Array {
   return Buffer.from(content, 'utf8');
 }
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe: This is an Error object or the destination accepts other types.
+  destination.destroy(error);
+}
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
index c3dc6d83d64b..276659596737 100644
--- a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
@@ -32,4 +32,5 @@ export const writeChunk = $$$hostConfig.writeChunk;
 export const completeWriting = $$$hostConfig.completeWriting;
 export const flushBuffered = $$$hostConfig.flushBuffered;
 export const close = $$$hostConfig.close;
+export const closeWithError = $$$hostConfig.closeWithError;
 export const convertStringToBuffer = $$$hostConfig.convertStringToBuffer;

From 14e4fd1ff2462e8989cb64418be742d7dcfe1549 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Sat, 13 Mar 2021 09:54:59 -0500
Subject: [PATCH 0315/1603] [Fizz] Move DOM/Native format configs to their
 respective packages (#20994)

* Move DOM/Native format configs to their respective packages

The streaming configs (Node/Browser) are different because they operate at
another dimension that exists in each package.

* Use escapeTextForBrowser to encode dynamic strings

We can now use local dependencies
---
 .../src/server}/ReactDOMServerFormatConfig.js              | 7 +++----
 .../src/server}/ReactNativeServerFormatConfig.js           | 0
 .../src/forks/ReactServerFormatConfig.dom-browser.js       | 2 +-
 .../src/forks/ReactServerFormatConfig.dom-relay.js         | 2 +-
 .../react-server/src/forks/ReactServerFormatConfig.dom.js  | 2 +-
 .../src/forks/ReactServerFormatConfig.native-relay.js      | 2 +-
 6 files changed, 7 insertions(+), 8 deletions(-)
 rename packages/{react-server/src => react-dom/src/server}/ReactDOMServerFormatConfig.js (98%)
 rename packages/{react-server/src => react-native-renderer/src/server}/ReactNativeServerFormatConfig.js (100%)

diff --git a/packages/react-server/src/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
similarity index 98%
rename from packages/react-server/src/ReactDOMServerFormatConfig.js
rename to packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 104834ca88ec..b06196c452a6 100644
--- a/packages/react-server/src/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -14,6 +14,7 @@ import {
   convertStringToBuffer,
 } from 'react-server/src/ReactServerStreamConfig';
 
+import escapeTextForBrowser from './escapeTextForBrowser';
 import invariant from 'shared/invariant';
 
 // Per response,
@@ -46,13 +47,11 @@ export function createSuspenseBoundaryID(
 }
 
 function encodeHTMLIDAttribute(value: string): string {
-  // TODO: This needs to be encoded for security purposes.
-  return value;
+  return escapeTextForBrowser(value);
 }
 
 function encodeHTMLTextNode(text: string): string {
-  // TOOD: This needs to be encoded for security purposes.
-  return text;
+  return escapeTextForBrowser(text);
 }
 
 export function pushTextInstance(
diff --git a/packages/react-server/src/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
similarity index 100%
rename from packages/react-server/src/ReactNativeServerFormatConfig.js
rename to packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
index e06662579e5a..c6e482efeb60 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom-browser.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactDOMServerFormatConfig';
+export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-relay.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-relay.js
index e06662579e5a..c6e482efeb60 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.dom-relay.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom-relay.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactDOMServerFormatConfig';
+export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom.js
index e06662579e5a..c6e482efeb60 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.dom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactDOMServerFormatConfig';
+export * from 'react-dom/src/server/ReactDOMServerFormatConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js b/packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js
index 2cfdaeeb3768..96c71b77141a 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.native-relay.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactNativeServerFormatConfig';
+export * from 'react-native-renderer/src/server/ReactNativeServerFormatConfig';

From f227e7f26b81cb1eba0c837ab2acd7fa7f91404f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Sat, 13 Mar 2021 10:23:06 -0500
Subject: [PATCH 0316/1603] Clean up unused functions from SSR (#20995)

---
 packages/react-dom/src/server/DOMMarkupOperations.js | 11 -----------
 packages/react-dom/src/shared/DOMProperty.js         |  1 -
 2 files changed, 12 deletions(-)

diff --git a/packages/react-dom/src/server/DOMMarkupOperations.js b/packages/react-dom/src/server/DOMMarkupOperations.js
index 7792bbcb0d5a..7306d9393be5 100644
--- a/packages/react-dom/src/server/DOMMarkupOperations.js
+++ b/packages/react-dom/src/server/DOMMarkupOperations.js
@@ -8,7 +8,6 @@
  */
 
 import {
-  ID_ATTRIBUTE_NAME,
   ROOT_ATTRIBUTE_NAME,
   BOOLEAN,
   OVERLOADED_BOOLEAN,
@@ -24,16 +23,6 @@ import quoteAttributeValueForBrowser from './quoteAttributeValueForBrowser';
  * Operations for dealing with DOM properties.
  */
 
-/**
- * Creates markup for the ID property.
- *
- * @param {string} id Unescaped ID.
- * @return {string} Markup string.
- */
-export function createMarkupForID(id: string): string {
-  return ID_ATTRIBUTE_NAME + '=' + quoteAttributeValueForBrowser(id);
-}
-
 export function createMarkupForRoot(): string {
   return ROOT_ATTRIBUTE_NAME + '=""';
 }
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 2d9a7914f91e..3bf0fb5de2c0 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -62,7 +62,6 @@ export const ATTRIBUTE_NAME_START_CHAR =
 export const ATTRIBUTE_NAME_CHAR =
   ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
 
-export const ID_ATTRIBUTE_NAME = 'data-reactid';
 export const ROOT_ATTRIBUTE_NAME = 'data-reactroot';
 export const VALID_ATTRIBUTE_NAME_REGEX = new RegExp(
   '^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$',

From c06d245fc7325612347ed19232d92385cae2e0a7 Mon Sep 17 00:00:00 2001
From: Hector Rincon <hecerinc@users.noreply.github.com>
Date: Mon, 15 Mar 2021 06:46:46 -0700
Subject: [PATCH 0317/1603] =?UTF-8?q?Update=20devtools-extensions=20build?=
 =?UTF-8?q?=20script=20to=20reflect=20changes=20in=20local=20b=E2=80=A6=20?=
 =?UTF-8?q?(#21004)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 packages/react-devtools-extensions/build.js   | 44 ++++++++++++++++---
 .../firefox/README.md                         |  2 +-
 .../react-devtools-extensions/firefox/test.js | 25 +++++++++--
 scripts/rollup/build-all-release-channels.js  | 10 ++++-
 4 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
index a38e909dd463..76b7aee68cb3 100644
--- a/packages/react-devtools-extensions/build.js
+++ b/packages/react-devtools-extensions/build.js
@@ -5,14 +5,47 @@
 const archiver = require('archiver');
 const {execSync} = require('child_process');
 const {readFileSync, writeFileSync, createWriteStream} = require('fs');
-const {copy, ensureDir, move, remove} = require('fs-extra');
-const {join} = require('path');
+const {copy, ensureDir, move, remove, pathExistsSync} = require('fs-extra');
+const {join, resolve} = 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,
+    '..',
+    '..',
+    'build2',
+    '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
@@ -74,13 +107,13 @@ const build = async (tempPath, manifestPath) => {
   // Pack the extension
   const archive = archiver('zip', {zlib: {level: 9}});
   const zipStream = createWriteStream(join(tempPath, 'ReactDevTools.zip'));
-  await new Promise((resolve, reject) => {
+  await new Promise((resolvePromise, rejectPromise) => {
     archive
       .directory(zipPath, false)
-      .on('error', err => reject(err))
+      .on('error', err => rejectPromise(err))
       .pipe(zipStream);
     archive.finalize();
-    zipStream.on('close', () => resolve());
+    zipStream.on('close', () => resolvePromise());
   });
 };
 
@@ -102,6 +135,7 @@ const main = async buildId => {
 
   try {
     const tempPath = join(__dirname, 'build', buildId);
+    await ensureLocalBuild();
     await preProcess(destinationPath, tempPath);
     await build(tempPath, manifestPath);
 
diff --git a/packages/react-devtools-extensions/firefox/README.md b/packages/react-devtools-extensions/firefox/README.md
index c4bbc8d2de6c..92c763c8bc8e 100644
--- a/packages/react-devtools-extensions/firefox/README.md
+++ b/packages/react-devtools-extensions/firefox/README.md
@@ -2,7 +2,7 @@
 
 The source code for this extension has moved to `shells/webextension`.
 
-Modify the source code there and then rebuild this extension by running `node build` from this directory or `yarn run build:extension:firefox` from the root directory.
+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
 
diff --git a/packages/react-devtools-extensions/firefox/test.js b/packages/react-devtools-extensions/firefox/test.js
index 4b0f5f04c7fb..b2e9e86e6ec0 100644
--- a/packages/react-devtools-extensions/firefox/test.js
+++ b/packages/react-devtools-extensions/firefox/test.js
@@ -10,13 +10,32 @@ const {argv} = require('yargs');
 const EXTENSION_PATH = resolve('./firefox/build/unpacked');
 const START_URL = argv.url || 'https://reactjs.org/';
 
+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();
 
-  // Use default Firefox profile for testing purposes.
-  // This prevents users from having to re-login-to sites before testing.
   const findPathPromise = new Promise((resolvePromise, rejectPromise) => {
-    finder.getPath('default', (error, profile) => {
+    finder.getPath(getFirefoxProfileName(), (error, profile) => {
       if (error) {
         rejectPromise(error);
       } else {
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 279d95747593..19eec730706b 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -144,6 +144,13 @@ 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-${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, version) {
   const allReactModuleNames = fs.readdirSync('packages');
   for (const moduleName of fs.readdirSync(modulesDir)) {
@@ -155,9 +162,10 @@ function updatePackageVersions(modulesDir, version) {
       // Update version
       packageInfo.version = version;
 
-      // Update dependency versions
       if (packageInfo.dependencies) {
         for (const dep of Object.keys(packageInfo.dependencies)) {
+          // if it's a react package (available in the current repo), update the version
+          // TODO: is this too broad? Assumes all of the packages were built.
           if (allReactModuleNames.includes(dep)) {
             packageInfo.dependencies[dep] = version;
           }

From 00d4f95c2ad000f40ea0c774cc1ced3a0ceb6f23 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 15 Mar 2021 14:48:44 +0100
Subject: [PATCH 0318/1603] Document prerequisites for
 download-experimental-build (#21005)

---
 packages/react-devtools-extensions/README.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md
index cef2bc9c6db3..8117ffaad03f 100644
--- a/packages/react-devtools-extensions/README.md
+++ b/packages/react-devtools-extensions/README.md
@@ -20,9 +20,11 @@ To build dependencies from source, run the following command from the root of th
 yarn build-for-devtools
 ```
 #### Download from CI
-To use the latest build from CI, run the following command from the root of the repository:
+To use the latest build from CI, run the following commands starting from the root of the repository:
 ```sh
-./scripts/release/download-experimental-build.js
+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:

From b9c4a01f71f59dc1ddf5944b0b11ec86b8218c73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 15 Mar 2021 13:36:23 -0400
Subject: [PATCH 0319/1603] Allow the streaming config to decide how to
 precompute or compute chunks (#21008)

Some legacy environments can not encode non-strings. Those would specify
both as strings. They'll throw for binary data.

Some environments have to encode strings (like web streams). Those would
encode both as uint8array.

Some environments (like Node) can do either. It can be beneficial to leave
things as strings in case the native stream can do something smart with it.
---
 .../src/server/ReactDOMServerFormatConfig.js  | 93 ++++++++++---------
 .../server/ReactNativeServerFormatConfig.js   | 19 ++--
 .../src/ReactNoopFlightServer.js              | 11 ++-
 packages/react-server/src/ReactFizzServer.js  |  8 +-
 .../src/ReactFlightServerConfigStream.js      | 14 +--
 .../src/ReactServerStreamConfigBrowser.js     | 13 ++-
 .../src/ReactServerStreamConfigNode.js        | 13 ++-
 .../forks/ReactServerStreamConfig.custom.js   |  6 +-
 scripts/shared/inlinedHostConfigs.js          |  8 +-
 9 files changed, 115 insertions(+), 70 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index b06196c452a6..37ee8feae309 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -7,11 +7,16 @@
  * @flow
  */
 
-import type {Destination} from 'react-server/src/ReactServerStreamConfig';
+import type {
+  Destination,
+  Chunk,
+  PrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
 
 import {
   writeChunk,
-  convertStringToBuffer,
+  stringToChunk,
+  stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
 import escapeTextForBrowser from './escapeTextForBrowser';
@@ -55,43 +60,43 @@ function encodeHTMLTextNode(text: string): string {
 }
 
 export function pushTextInstance(
-  target: Array<Uint8Array>,
+  target: Array<Chunk | PrecomputedChunk>,
   text: string,
 ): void {
-  target.push(convertStringToBuffer(encodeHTMLTextNode(text)));
+  target.push(stringToChunk(encodeHTMLTextNode(text)));
 }
 
-const startTag1 = convertStringToBuffer('<');
-const startTag2 = convertStringToBuffer('>');
+const startTag1 = stringToPrecomputedChunk('<');
+const startTag2 = stringToPrecomputedChunk('>');
 
 export function pushStartInstance(
-  target: Array<Uint8Array>,
+  target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
   // TODO: Figure out if it's self closing and everything else.
-  target.push(startTag1, convertStringToBuffer(type), startTag2);
+  target.push(startTag1, stringToChunk(type), startTag2);
 }
 
-const endTag1 = convertStringToBuffer('</');
-const endTag2 = convertStringToBuffer('>');
+const endTag1 = stringToPrecomputedChunk('</');
+const endTag2 = stringToPrecomputedChunk('>');
 
 export function pushEndInstance(
-  target: Array<Uint8Array>,
+  target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
   // TODO: Figure out if it was self closing.
-  target.push(endTag1, convertStringToBuffer(type), endTag2);
+  target.push(endTag1, stringToChunk(type), endTag2);
 }
 
 // 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.
-const placeholder1 = convertStringToBuffer('<span id="');
-const placeholder2 = convertStringToBuffer('P:');
-const placeholder3 = convertStringToBuffer('"></span>');
+const placeholder1 = stringToPrecomputedChunk('<span id="');
+const placeholder2 = stringToPrecomputedChunk('P:');
+const placeholder3 = stringToPrecomputedChunk('"></span>');
 export function writePlaceholder(
   destination: Destination,
   id: number,
@@ -101,16 +106,18 @@ export function writePlaceholder(
   writeChunk(destination, placeholder1);
   // TODO: Use the identifierPrefix option to make the prefix configurable.
   writeChunk(destination, placeholder2);
-  const formattedID = convertStringToBuffer(id.toString(16));
+  const formattedID = stringToChunk(id.toString(16));
   writeChunk(destination, formattedID);
   return writeChunk(destination, placeholder3);
 }
 
 // Suspense boundaries are encoded as comments.
-const startCompletedSuspenseBoundary = convertStringToBuffer('<!--$-->');
-const startPendingSuspenseBoundary = convertStringToBuffer('<!--$?-->');
-const startClientRenderedSuspenseBoundary = convertStringToBuffer('<!--$!-->');
-const endSuspenseBoundary = convertStringToBuffer('<!--/$-->');
+const startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
+const startPendingSuspenseBoundary = stringToPrecomputedChunk('<!--$?-->');
+const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(
+  '<!--$!-->',
+);
+const endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
 
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
@@ -134,10 +141,10 @@ export function writeEndSuspenseBoundary(destination: Destination): boolean {
   return writeChunk(destination, endSuspenseBoundary);
 }
 
-const startSegment = convertStringToBuffer('<div hidden id="');
-const startSegment2 = convertStringToBuffer('S:');
-const startSegment3 = convertStringToBuffer('">');
-const endSegment = convertStringToBuffer('"></div>');
+const startSegment = stringToPrecomputedChunk('<div hidden id="');
+const startSegment2 = stringToPrecomputedChunk('S:');
+const startSegment3 = stringToPrecomputedChunk('">');
+const endSegment = stringToPrecomputedChunk('"></div>');
 export function writeStartSegment(
   destination: Destination,
   id: number,
@@ -146,7 +153,7 @@ export function writeStartSegment(
   writeChunk(destination, startSegment);
   // TODO: Use the identifierPrefix option to make the prefix configurable.
   writeChunk(destination, startSegment2);
-  const formattedID = convertStringToBuffer(id.toString(16));
+  const formattedID = stringToChunk(id.toString(16));
   writeChunk(destination, formattedID);
   return writeChunk(destination, startSegment3);
 }
@@ -276,12 +283,14 @@ const completeBoundaryFunction =
 const clientRenderFunction =
   'function $RX(b){if(b=document.getElementById(b)){do b=b.previousSibling;while(8!==b.nodeType||"$?"!==b.data);b.data="$!";b._reactRetry&&b._reactRetry()}}';
 
-const completeSegmentScript1Full = convertStringToBuffer(
+const completeSegmentScript1Full = stringToPrecomputedChunk(
   '<script>' + completeSegmentFunction + ';$RS("S:',
 );
-const completeSegmentScript1Partial = convertStringToBuffer('<script>$RS("S:');
-const completeSegmentScript2 = convertStringToBuffer('","P:');
-const completeSegmentScript3 = convertStringToBuffer('")</script>');
+const completeSegmentScript1Partial = stringToPrecomputedChunk(
+  '<script>$RS("S:',
+);
+const completeSegmentScript2 = stringToPrecomputedChunk('","P:');
+const completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
 
 export function writeCompletedSegmentInstruction(
   destination: Destination,
@@ -297,19 +306,21 @@ export function writeCompletedSegmentInstruction(
     writeChunk(destination, completeSegmentScript1Partial);
   }
   // TODO: Use the identifierPrefix option to make the prefix configurable.
-  const formattedID = convertStringToBuffer(contentSegmentID.toString(16));
+  const formattedID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedID);
   writeChunk(destination, completeSegmentScript2);
   writeChunk(destination, formattedID);
   return writeChunk(destination, completeSegmentScript3);
 }
 
-const completeBoundaryScript1Full = convertStringToBuffer(
+const completeBoundaryScript1Full = stringToPrecomputedChunk(
   '<script>' + completeBoundaryFunction + ';$RC("',
 );
-const completeBoundaryScript1Partial = convertStringToBuffer('<script>$RC("');
-const completeBoundaryScript2 = convertStringToBuffer('","S:');
-const completeBoundaryScript3 = convertStringToBuffer('")</script>');
+const completeBoundaryScript1Partial = stringToPrecomputedChunk(
+  '<script>$RC("',
+);
+const completeBoundaryScript2 = stringToPrecomputedChunk('","S:');
+const completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
 
 export function writeCompletedBoundaryInstruction(
   destination: Destination,
@@ -330,23 +341,21 @@ export function writeCompletedBoundaryInstruction(
     boundaryID.id !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
-  const formattedBoundaryID = convertStringToBuffer(
+  const formattedBoundaryID = stringToChunk(
     encodeHTMLIDAttribute(boundaryID.id),
   );
-  const formattedContentID = convertStringToBuffer(
-    contentSegmentID.toString(16),
-  );
+  const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedBoundaryID);
   writeChunk(destination, completeBoundaryScript2);
   writeChunk(destination, formattedContentID);
   return writeChunk(destination, completeBoundaryScript3);
 }
 
-const clientRenderScript1Full = convertStringToBuffer(
+const clientRenderScript1Full = stringToPrecomputedChunk(
   '<script>' + clientRenderFunction + ';$RX("',
 );
-const clientRenderScript1Partial = convertStringToBuffer('<script>$RX("');
-const clientRenderScript2 = convertStringToBuffer('")</script>');
+const clientRenderScript1Partial = stringToPrecomputedChunk('<script>$RX("');
+const clientRenderScript2 = stringToPrecomputedChunk('")</script>');
 
 export function writeClientRenderBoundaryInstruction(
   destination: Destination,
@@ -365,7 +374,7 @@ export function writeClientRenderBoundaryInstruction(
     boundaryID.id !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
-  const formattedBoundaryID = convertStringToBuffer(
+  const formattedBoundaryID = stringToPrecomputedChunk(
     encodeHTMLIDAttribute(boundaryID.id),
   );
   writeChunk(destination, formattedBoundaryID);
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index f4e58a03c7ef..224f28e4fa94 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -7,11 +7,16 @@
  * @flow
  */
 
-import type {Destination} from 'react-server/src/ReactServerStreamConfig';
+import type {
+  Destination,
+  Chunk,
+  PrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
 
 import {
   writeChunk,
-  convertStringToBuffer,
+  stringToChunk,
+  stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
 import invariant from 'shared/invariant';
@@ -71,10 +76,10 @@ export function createSuspenseBoundaryID(
   return responseState.nextSuspenseID++;
 }
 
-const RAW_TEXT = convertStringToBuffer('RCTRawText');
+const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
 export function pushTextInstance(
-  target: Array<Uint8Array>,
+  target: Array<Chunk | PrecomputedChunk>,
   text: string,
 ): void {
   target.push(
@@ -87,20 +92,20 @@ export function pushTextInstance(
 }
 
 export function pushStartInstance(
-  target: Array<Uint8Array>,
+  target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
   target.push(
     INSTANCE,
-    convertStringToBuffer(type),
+    stringToChunk(type),
     END, // Null terminated type string
     // TODO: props
   );
 }
 
 export function pushEndInstance(
-  target: Array<Uint8Array>,
+  target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 411e6094164c..7614ba3e8dfb 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -27,15 +27,18 @@ const ReactNoopFlightServer = ReactFlightServer({
     callback();
   },
   beginWriting(destination: Destination): void {},
-  writeChunk(destination: Destination, buffer: Uint8Array): void {
-    destination.push(Buffer.from((buffer: any)).toString('utf8'));
+  writeChunk(destination: Destination, chunk: string): void {
+    destination.push(chunk);
   },
   completeWriting(destination: Destination): void {},
   close(destination: Destination): void {},
   closeWithError(destination: Destination, error: mixed): void {},
   flushBuffered(destination: Destination): void {},
-  convertStringToBuffer(content: string): Uint8Array {
-    return Buffer.from(content, 'utf8');
+  stringToChunk(content: string): string {
+    return content;
+  },
+  stringToPrecomputedChunk(content: string): string {
+    return content;
   },
   isModuleReference(reference: Object): boolean {
     return reference.$$typeof === Symbol.for('react.module.reference');
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4f5879b86bff..4731e965dab2 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -8,7 +8,11 @@
  */
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
-import type {Destination} from './ReactServerStreamConfig';
+import type {
+  Destination,
+  Chunk,
+  PrecomputedChunk,
+} from './ReactServerStreamConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   SuspenseBoundaryID,
@@ -78,7 +82,7 @@ type Segment = {
   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<Uint8Array>,
+  +chunks: Array<Chunk | PrecomputedChunk>,
   +children: Array<Segment>,
   // If this segment represents a fallback, this is the content that will replace that fallback.
   +boundary: null | SuspenseBoundary,
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index 12241493e57f..b9a57c16eb27 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -66,11 +66,11 @@ ByteSize
 
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 
-import {convertStringToBuffer} from './ReactServerStreamConfig';
+import {stringToChunk} from './ReactServerStreamConfig';
 
-export type {Destination} from './ReactServerStreamConfig';
+import type {Chunk} from './ReactServerStreamConfig';
 
-export type Chunk = Uint8Array;
+export type {Destination, Chunk} from './ReactServerStreamConfig';
 
 const stringify = JSON.stringify;
 
@@ -86,7 +86,7 @@ export function processErrorChunk(
 ): Chunk {
   const errorInfo = {message, stack};
   const row = serializeRowHeader('E', id) + stringify(errorInfo) + '\n';
-  return convertStringToBuffer(row);
+  return stringToChunk(row);
 }
 
 export function processModelChunk(
@@ -96,7 +96,7 @@ export function processModelChunk(
 ): Chunk {
   const json = stringify(model, request.toJSON);
   const row = serializeRowHeader('J', id) + json + '\n';
-  return convertStringToBuffer(row);
+  return stringToChunk(row);
 }
 
 export function processModuleChunk(
@@ -106,7 +106,7 @@ export function processModuleChunk(
 ): Chunk {
   const json = stringify(moduleMetaData);
   const row = serializeRowHeader('M', id) + json + '\n';
-  return convertStringToBuffer(row);
+  return stringToChunk(row);
 }
 
 export function processSymbolChunk(
@@ -116,7 +116,7 @@ export function processSymbolChunk(
 ): Chunk {
   const json = stringify(name);
   const row = serializeRowHeader('S', id) + json + '\n';
-  return convertStringToBuffer(row);
+  return stringToChunk(row);
 }
 
 export {
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index efcef78509cb..3714be430276 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -9,6 +9,9 @@
 
 export type Destination = ReadableStreamController;
 
+export type PrecomputedChunk = Uint8Array;
+export type Chunk = Uint8Array;
+
 export function scheduleWork(callback: () => void) {
   callback();
 }
@@ -22,9 +25,9 @@ export function beginWriting(destination: Destination) {}
 
 export function writeChunk(
   destination: Destination,
-  buffer: Uint8Array,
+  chunk: PrecomputedChunk | Chunk,
 ): boolean {
-  destination.enqueue(buffer);
+  destination.enqueue(chunk);
   return destination.desiredSize > 0;
 }
 
@@ -36,7 +39,11 @@ export function close(destination: Destination) {
 
 const textEncoder = new TextEncoder();
 
-export function convertStringToBuffer(content: string): Uint8Array {
+export function stringToChunk(content: string): Chunk {
+  return textEncoder.encode(content);
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
   return textEncoder.encode(content);
 }
 
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index 00e3364fc93a..4329554b7f05 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -18,6 +18,9 @@ type MightBeFlushable = {
 
 export type Destination = Writable & MightBeFlushable;
 
+export type PrecomputedChunk = Uint8Array;
+export type Chunk = string;
+
 export function scheduleWork(callback: () => void) {
   setImmediate(callback);
 }
@@ -44,9 +47,9 @@ export function beginWriting(destination: Destination) {
 
 export function writeChunk(
   destination: Destination,
-  buffer: Uint8Array,
+  chunk: Chunk | PrecomputedChunk,
 ): boolean {
-  const nodeBuffer = ((buffer: any): Buffer); // close enough
+  const nodeBuffer = ((chunk: any): Buffer | string); // close enough
   return destination.write(nodeBuffer);
 }
 
@@ -61,7 +64,11 @@ export function close(destination: Destination) {
   destination.end();
 }
 
-export function convertStringToBuffer(content: string): Uint8Array {
+export function stringToChunk(content: string): Chunk {
+  return content;
+}
+
+export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
   return Buffer.from(content, 'utf8');
 }
 
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
index 276659596737..e832f19430a2 100644
--- a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
@@ -26,6 +26,9 @@
 declare var $$$hostConfig: any;
 export opaque type Destination = mixed; // eslint-disable-line no-undef
 
+export opaque type PrecomputedChunk = mixed; // eslint-disable-line no-undef
+export opaque type Chunk = mixed; // eslint-disable-line no-undef
+
 export const scheduleWork = $$$hostConfig.scheduleWork;
 export const beginWriting = $$$hostConfig.beginWriting;
 export const writeChunk = $$$hostConfig.writeChunk;
@@ -33,4 +36,5 @@ export const completeWriting = $$$hostConfig.completeWriting;
 export const flushBuffered = $$$hostConfig.flushBuffered;
 export const close = $$$hostConfig.close;
 export const closeWithError = $$$hostConfig.closeWithError;
-export const convertStringToBuffer = $$$hostConfig.convertStringToBuffer;
+export const stringToChunk = $$$hostConfig.stringToChunk;
+export const stringToPrecomputedChunk = $$$hostConfig.stringToPrecomputedChunk;
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 98fc13e4f120..7f96ae163ad6 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -94,7 +94,13 @@ module.exports = [
       'react-server-native-relay',
       'react-server-native-relay/server',
     ],
-    paths: ['react-native-renderer', 'react-server-native-relay'],
+    paths: [
+      'react-native-renderer',
+      'react-server-native-relay',
+      // this is included here so that it's not included in the main native check
+      // remove this when it's added to the main native renderer.
+      'react-native-renderer/src/server',
+    ],
     isFlowTyped: true,
     isServerSupported: true,
   },

From f8979e0e28398d98dab921f17d14a5a9b5fb1b71 Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshua.gross@gmail.com>
Date: Mon, 15 Mar 2021 12:22:26 -0700
Subject: [PATCH 0320/1603] Revert 'Fabric-compatible implementation of 
 feature' and have Fabric noop when setJSResponder is called for now (#21009)

---
 .../src/ReactFabricGlobalResponderHandler.js              | 8 +-------
 .../ReactPrivate/InitializeNativeFabricUIManager.js       | 1 -
 scripts/flow/react-native-host-hooks.js                   | 1 -
 3 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
index 12b6d1e92fce..68a0b424ba34 100644
--- a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
+++ b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
@@ -16,13 +16,7 @@ const ReactFabricGlobalResponderHandler = {
     const isFabric = !!fromOrTo.stateNode.canonical._internalInstanceHandle;
 
     if (isFabric) {
-      if (from) {
-        nativeFabricUIManager.setIsJSResponder(from.stateNode.node, false);
-      }
-
-      if (to) {
-        nativeFabricUIManager.setIsJSResponder(to.stateNode.node, true);
-      }
+      // Noop for now until setJSResponder/clearJSResponder are supported in Fabric
     } else {
       if (to !== null) {
         const tag = to.stateNode.canonical._nativeTag;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index ee3c7df98508..686dc72702de 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -176,7 +176,6 @@ const RCTFabricUIManager = {
     );
     success(1, 1, 100, 100);
   }),
-  setIsJSResponder: jest.fn(),
 };
 
 global.nativeFabricUIManager = RCTFabricUIManager;
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 29fed27e52c6..17cc6fe9c952 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -179,7 +179,6 @@ declare var nativeFabricUIManager: {
     locationY: number,
     callback: (Fiber) => void,
   ) => void,
-  setIsJSResponder: (node: Node, isJsResponder: boolean) => void,
   ...
 };
 

From c9f6d0a3a8ef267fa3499782028fb1c74fae94e9 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Mon, 15 Mar 2021 23:48:59 -0700
Subject: [PATCH 0321/1603] Sync `ReactNativeTypes` from React Native (#21015)

---
 packages/react-native-renderer/src/ReactFabric.js            | 1 +
 packages/react-native-renderer/src/ReactFabricHostConfig.js  | 2 +-
 .../src/ReactNativeFiberHostComponent.js                     | 2 +-
 packages/react-native-renderer/src/ReactNativeRenderer.js    | 1 +
 packages/react-native-renderer/src/ReactNativeTypes.js       | 5 ++---
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 82a6cb7e6ba6..5f797c0dcfa3 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -97,6 +97,7 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
     // Fabric
     return (hostInstance: any).canonical;
   }
+  // $FlowFixMe[incompatible-return]
   return hostInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 85eb2a741ffa..736001a853e6 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -187,7 +187,7 @@ class ReactFabricHostComponent {
 }
 
 // eslint-disable-next-line no-unused-expressions
-(ReactFabricHostComponent.prototype: NativeMethods);
+(ReactFabricHostComponent.prototype: $ReadOnly<{...NativeMethods, ...}>);
 
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMutation';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
index 804814443182..b4d91806cf56 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
@@ -127,6 +127,6 @@ class ReactNativeFiberHostComponent {
 }
 
 // eslint-disable-next-line no-unused-expressions
-(ReactNativeFiberHostComponent.prototype: NativeMethods);
+(ReactNativeFiberHostComponent.prototype: $ReadOnly<{...NativeMethods, ...}>);
 
 export default ReactNativeFiberHostComponent;
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 36b9e2b1e284..1e7b390f9ff3 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -96,6 +96,7 @@ function findHostInstance_DEPRECATED(
     // Fabric
     return (hostInstance: any).canonical;
   }
+  // $FlowFixMe[incompatible-return]
   return hostInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 462abeac94be..8192371af827 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -94,7 +94,7 @@ export type PartialViewConfig = $ReadOnly<{
   validAttributes?: PartialAttributeConfiguration,
 }>;
 
-export type NativeMethods = {
+export type NativeMethods = $ReadOnly<{|
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
@@ -105,8 +105,7 @@ export type NativeMethods = {
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
-  ...
-};
+|}>;
 
 export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
 

From 0203b6567c6fd6274866c853ef938241d24551ec Mon Sep 17 00:00:00 2001
From: susiwen8 <susiwen8@gmail.com>
Date: Tue, 16 Mar 2021 19:37:34 +0800
Subject: [PATCH 0322/1603] chore: update react-reconciler README (#21016)

---
 packages/react-reconciler/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index fd87321f27f4..60c515610c21 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -312,11 +312,11 @@ This method should make the `instance` invisible without removing it from the tr
 
 Same as `hideInstance`, but for nodes created by `createTextInstance`.
 
-#### `unhideInstance(instance)`
+#### `unhideInstance(instance, props)`
 
 This method should make the `instance` visible, undoing what `hideInstance` did.
 
-#### `unhideTextInstance(textInstance)`
+#### `unhideTextInstance(textInstance, text)`
 
 Same as `unhideInstance`, but for nodes created by `createTextInstance`.
 

From 89acfa639bcecebdb18276ba2c0f4d5beee2de19 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 16 Mar 2021 13:15:00 -0400
Subject: [PATCH 0323/1603] Fix native event batching in concurrent mode
 (#21010)

* Fix native event batching in concurrent mode

* Wrap DevTools test updates with act

These tests expect the `scheduleUpdate` DevTools hook to trigger a
synchronous re-render with legacy semantics, but flushing in a microtask
is fine. Wrapping the updates with `act` fixes it.

* Testing nits

* Nit: Check executionContext === NoContext first

In the common case it will be false and the binary expression will
short circuit.

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 .../ReactDevToolsHooksIntegration-test.js     | 28 +++++------
 .../ReactDOMNativeEventHeuristic-test.js      | 48 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.new.js             |  5 +-
 .../src/ReactFiberWorkLoop.old.js             |  5 +-
 4 files changed, 70 insertions(+), 16 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
index 6f9cf52787e1..3eea121d65b3 100644
--- a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
@@ -201,32 +201,32 @@ describe('React hooks DevTools integration', () => {
     if (__DEV__) {
       // First render was locked
       expect(renderer.toJSON().children).toEqual(['Loading']);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Loading']);
 
       // Release the lock
       setSuspenseHandler(() => false);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Done']);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Done']);
 
       // Lock again
       setSuspenseHandler(() => true);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Loading']);
 
       // Release the lock again
       setSuspenseHandler(() => false);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Done']);
 
       // Ensure it checks specific fibers.
       setSuspenseHandler(f => f === fiber || f === fiber.alternate);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Loading']);
       setSuspenseHandler(f => f !== fiber && f !== fiber.alternate);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Done']);
     } else {
       expect(renderer.toJSON().children).toEqual(['Done']);
@@ -259,33 +259,33 @@ describe('React hooks DevTools integration', () => {
     if (__DEV__) {
       // First render was locked
       expect(renderer.toJSON().children).toEqual(['Loading']);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Loading']);
 
       // Release the lock
       setSuspenseHandler(() => false);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       Scheduler.unstable_flushAll();
       expect(renderer.toJSON().children).toEqual(['Done']);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Done']);
 
       // Lock again
       setSuspenseHandler(() => true);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Loading']);
 
       // Release the lock again
       setSuspenseHandler(() => false);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Done']);
 
       // Ensure it checks specific fibers.
       setSuspenseHandler(f => f === fiber || f === fiber.alternate);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Loading']);
       setSuspenseHandler(f => f !== fiber && f !== fiber.alternate);
-      scheduleUpdate(fiber); // Re-render
+      act(() => scheduleUpdate(fiber)); // Re-render
       expect(renderer.toJSON().children).toEqual(['Done']);
     } else {
       expect(renderer.toJSON().children).toEqual(['Done']);
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index dd682d2def59..c0617f9b5678 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -281,4 +281,52 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       expect(container.textContent).toEqual('hovered');
     });
   });
+
+  // @gate experimental
+  it('should batch inside native events', async () => {
+    const root = ReactDOM.unstable_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(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('Count: 0');
+
+    // Ignore act warning. We can't use act because it forces batched updates.
+    spyOnDev(console, 'error');
+
+    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');
+
+    // Assert that the `act` warnings were the only ones that fired.
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'was not wrapped in act',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toContain(
+        'was not wrapped in act',
+      );
+    }
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 926c1d0b28ac..19d53553f43d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -547,7 +547,10 @@ export function scheduleUpdateOnFiber(
     } else {
       ensureRootIsScheduled(root, eventTime);
       schedulePendingInteractions(root, lane);
-      if (executionContext === NoContext) {
+      if (
+        executionContext === NoContext &&
+        (fiber.mode & ConcurrentMode) === NoMode
+      ) {
         // 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
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 6450ac710d7e..da22638e7575 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -547,7 +547,10 @@ export function scheduleUpdateOnFiber(
     } else {
       ensureRootIsScheduled(root, eventTime);
       schedulePendingInteractions(root, lane);
-      if (executionContext === NoContext) {
+      if (
+        executionContext === NoContext &&
+        (fiber.mode & ConcurrentMode) === NoMode
+      ) {
         // 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

From 466b26c926a2de92231f7cc2e75745563a91003d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 16 Mar 2021 13:53:15 -0400
Subject: [PATCH 0324/1603] Store commit durations on HostRoot for DevTools
 access (#20983)

Also add missing feature flag wrappers around effect duration attributes.
---
 .../src/ReactFiberBeginWork.new.js            | 25 ++++++----
 .../src/ReactFiberBeginWork.old.js            | 25 ++++++----
 .../src/ReactFiberCommitWork.new.js           | 30 ++++++++----
 .../src/ReactFiberCommitWork.old.js           | 30 ++++++++----
 .../src/ReactFiberRoot.new.js                 |  7 +++
 .../src/ReactFiberRoot.old.js                 |  7 +++
 .../src/ReactProfilerTimer.new.js             | 46 ++++++++++++-------
 .../src/ReactProfilerTimer.old.js             | 46 ++++++++++++-------
 8 files changed, 144 insertions(+), 72 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index a014ef574789..9ba666bd548e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -75,6 +75,7 @@ import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   disableModulePatternComponents,
+  enableProfilerCommitHooks,
   enableProfilerTimer,
   enableSchedulerTracing,
   enableSuspenseServerRenderer,
@@ -837,11 +838,13 @@ function updateProfiler(
   if (enableProfilerTimer) {
     workInProgress.flags |= Update;
 
-    // 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;
+    if (enableProfilerCommitHooks) {
+      // 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 = workInProgress.pendingProps;
   const nextChildren = nextProps.children;
@@ -3320,11 +3323,13 @@ function beginWork(
               workInProgress.flags |= Update;
             }
 
-            // 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;
+            if (enableProfilerCommitHooks) {
+              // 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 SuspenseComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 2c355abdf95b..822b299d06ca 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -75,6 +75,7 @@ import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   disableModulePatternComponents,
+  enableProfilerCommitHooks,
   enableProfilerTimer,
   enableSchedulerTracing,
   enableSuspenseServerRenderer,
@@ -837,11 +838,13 @@ function updateProfiler(
   if (enableProfilerTimer) {
     workInProgress.flags |= Update;
 
-    // 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;
+    if (enableProfilerCommitHooks) {
+      // 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 = workInProgress.pendingProps;
   const nextChildren = nextProps.children;
@@ -3320,11 +3323,13 @@ function beginWork(
               workInProgress.flags |= Update;
             }
 
-            // 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;
+            if (enableProfilerCommitHooks) {
+              // 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 SuspenseComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 7985366d3f67..c20719d8bfd9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -578,11 +578,16 @@ export function commitPassiveEffectDurations(
           // Bubble times to the next nearest ancestor Profiler.
           // After we process that Profiler, we'll bubble further up.
           let parentFiber = finishedWork.return;
-          while (parentFiber !== null) {
-            if (parentFiber.tag === Profiler) {
-              const parentStateNode = parentFiber.stateNode;
-              parentStateNode.passiveEffectDuration += passiveEffectDuration;
-              break;
+          outer: while (parentFiber !== null) {
+            switch (parentFiber.tag) {
+              case HostRoot:
+                const root = parentFiber.stateNode;
+                root.passiveEffectDuration += passiveEffectDuration;
+                break outer;
+              case Profiler:
+                const parentStateNode = parentFiber.stateNode;
+                parentStateNode.passiveEffectDuration += passiveEffectDuration;
+                break outer;
             }
             parentFiber = parentFiber.return;
           }
@@ -885,11 +890,16 @@ function commitLayoutEffectOnFiber(
             // 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.
             let parentFiber = finishedWork.return;
-            while (parentFiber !== null) {
-              if (parentFiber.tag === Profiler) {
-                const parentStateNode = parentFiber.stateNode;
-                parentStateNode.effectDuration += effectDuration;
-                break;
+            outer: while (parentFiber !== null) {
+              switch (parentFiber.tag) {
+                case HostRoot:
+                  const root = parentFiber.stateNode;
+                  root.effectDuration += effectDuration;
+                  break outer;
+                case Profiler:
+                  const parentStateNode = parentFiber.stateNode;
+                  parentStateNode.effectDuration += effectDuration;
+                  break outer;
               }
               parentFiber = parentFiber.return;
             }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index d50095b3bebb..efdbc39abfdf 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -578,11 +578,16 @@ export function commitPassiveEffectDurations(
           // Bubble times to the next nearest ancestor Profiler.
           // After we process that Profiler, we'll bubble further up.
           let parentFiber = finishedWork.return;
-          while (parentFiber !== null) {
-            if (parentFiber.tag === Profiler) {
-              const parentStateNode = parentFiber.stateNode;
-              parentStateNode.passiveEffectDuration += passiveEffectDuration;
-              break;
+          outer: while (parentFiber !== null) {
+            switch (parentFiber.tag) {
+              case HostRoot:
+                const root = parentFiber.stateNode;
+                root.passiveEffectDuration += passiveEffectDuration;
+                break outer;
+              case Profiler:
+                const parentStateNode = parentFiber.stateNode;
+                parentStateNode.passiveEffectDuration += passiveEffectDuration;
+                break outer;
             }
             parentFiber = parentFiber.return;
           }
@@ -885,11 +890,16 @@ function commitLayoutEffectOnFiber(
             // 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.
             let parentFiber = finishedWork.return;
-            while (parentFiber !== null) {
-              if (parentFiber.tag === Profiler) {
-                const parentStateNode = parentFiber.stateNode;
-                parentStateNode.effectDuration += effectDuration;
-                break;
+            outer: while (parentFiber !== null) {
+              switch (parentFiber.tag) {
+                case HostRoot:
+                  const root = parentFiber.stateNode;
+                  root.effectDuration += effectDuration;
+                  break outer;
+                case Profiler:
+                  const parentStateNode = parentFiber.stateNode;
+                  parentStateNode.effectDuration += effectDuration;
+                  break outer;
               }
               parentFiber = parentFiber.return;
             }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index f06925e10fbe..14c20e1f7ede 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -22,6 +22,8 @@ import {
   enableSchedulerTracing,
   enableSuspenseCallback,
   enableCache,
+  enableProfilerCommitHooks,
+  enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
@@ -71,6 +73,11 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.hydrationCallbacks = null;
   }
 
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    this.effectDuration = 0;
+    this.passiveEffectDuration = 0;
+  }
+
   if (__DEV__) {
     switch (tag) {
       case ConcurrentRoot:
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 712803920ebb..3bad9a026be0 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -22,6 +22,8 @@ import {
   enableSchedulerTracing,
   enableSuspenseCallback,
   enableCache,
+  enableProfilerCommitHooks,
+  enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
@@ -71,6 +73,11 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.hydrationCallbacks = null;
   }
 
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    this.effectDuration = 0;
+    this.passiveEffectDuration = 0;
+  }
+
   if (__DEV__) {
     switch (tag) {
       case ConcurrentRoot:
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.new.js b/packages/react-reconciler/src/ReactProfilerTimer.new.js
index 235074b78ad8..a5a14eae1c24 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.new.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.new.js
@@ -14,7 +14,7 @@ import {
   enableProfilerNestedUpdatePhase,
   enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
-import {Profiler} from './ReactWorkTags';
+import {HostRoot, Profiler} from './ReactWorkTags';
 
 // Intentionally not named imports because Rollup would use dynamic dispatch for
 // CommonJS interop named imports.
@@ -140,13 +140,19 @@ function recordLayoutEffectDuration(fiber: Fiber): void {
 
     layoutEffectStartTime = -1;
 
-    // Store duration on the next nearest Profiler ancestor.
+    // Store duration on the next nearest Profiler ancestor
+    // Or the root (for the DevTools Profiler to read)
     let parentFiber = fiber.return;
     while (parentFiber !== null) {
-      if (parentFiber.tag === Profiler) {
-        const parentStateNode = parentFiber.stateNode;
-        parentStateNode.effectDuration += elapsedTime;
-        break;
+      switch (parentFiber.tag) {
+        case HostRoot:
+          const root = parentFiber.stateNode;
+          root.effectDuration += elapsedTime;
+          return;
+        case Profiler:
+          const parentStateNode = parentFiber.stateNode;
+          parentStateNode.effectDuration += elapsedTime;
+          return;
       }
       parentFiber = parentFiber.return;
     }
@@ -163,18 +169,26 @@ function recordPassiveEffectDuration(fiber: Fiber): void {
 
     passiveEffectStartTime = -1;
 
-    // Store duration on the next nearest Profiler ancestor.
+    // Store duration on the next nearest Profiler ancestor
+    // Or the root (for the DevTools Profiler to read)
     let parentFiber = fiber.return;
     while (parentFiber !== null) {
-      if (parentFiber.tag === Profiler) {
-        const parentStateNode = parentFiber.stateNode;
-        if (parentStateNode !== null) {
-          // Detached fibers have their state node cleared out.
-          // In this case, the return pointer is also cleared out,
-          // so we won't be able to report the time spent in this Profiler's subtree.
-          parentStateNode.passiveEffectDuration += elapsedTime;
-        }
-        break;
+      switch (parentFiber.tag) {
+        case HostRoot:
+          const root = parentFiber.stateNode;
+          if (root !== null) {
+            root.passiveEffectDuration += elapsedTime;
+          }
+          return;
+        case Profiler:
+          const parentStateNode = parentFiber.stateNode;
+          if (parentStateNode !== null) {
+            // Detached fibers have their state node cleared out.
+            // In this case, the return pointer is also cleared out,
+            // so we won't be able to report the time spent in this Profiler's subtree.
+            parentStateNode.passiveEffectDuration += elapsedTime;
+          }
+          return;
       }
       parentFiber = parentFiber.return;
     }
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.old.js b/packages/react-reconciler/src/ReactProfilerTimer.old.js
index 235074b78ad8..a5a14eae1c24 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.old.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.old.js
@@ -14,7 +14,7 @@ import {
   enableProfilerNestedUpdatePhase,
   enableProfilerTimer,
 } from 'shared/ReactFeatureFlags';
-import {Profiler} from './ReactWorkTags';
+import {HostRoot, Profiler} from './ReactWorkTags';
 
 // Intentionally not named imports because Rollup would use dynamic dispatch for
 // CommonJS interop named imports.
@@ -140,13 +140,19 @@ function recordLayoutEffectDuration(fiber: Fiber): void {
 
     layoutEffectStartTime = -1;
 
-    // Store duration on the next nearest Profiler ancestor.
+    // Store duration on the next nearest Profiler ancestor
+    // Or the root (for the DevTools Profiler to read)
     let parentFiber = fiber.return;
     while (parentFiber !== null) {
-      if (parentFiber.tag === Profiler) {
-        const parentStateNode = parentFiber.stateNode;
-        parentStateNode.effectDuration += elapsedTime;
-        break;
+      switch (parentFiber.tag) {
+        case HostRoot:
+          const root = parentFiber.stateNode;
+          root.effectDuration += elapsedTime;
+          return;
+        case Profiler:
+          const parentStateNode = parentFiber.stateNode;
+          parentStateNode.effectDuration += elapsedTime;
+          return;
       }
       parentFiber = parentFiber.return;
     }
@@ -163,18 +169,26 @@ function recordPassiveEffectDuration(fiber: Fiber): void {
 
     passiveEffectStartTime = -1;
 
-    // Store duration on the next nearest Profiler ancestor.
+    // Store duration on the next nearest Profiler ancestor
+    // Or the root (for the DevTools Profiler to read)
     let parentFiber = fiber.return;
     while (parentFiber !== null) {
-      if (parentFiber.tag === Profiler) {
-        const parentStateNode = parentFiber.stateNode;
-        if (parentStateNode !== null) {
-          // Detached fibers have their state node cleared out.
-          // In this case, the return pointer is also cleared out,
-          // so we won't be able to report the time spent in this Profiler's subtree.
-          parentStateNode.passiveEffectDuration += elapsedTime;
-        }
-        break;
+      switch (parentFiber.tag) {
+        case HostRoot:
+          const root = parentFiber.stateNode;
+          if (root !== null) {
+            root.passiveEffectDuration += elapsedTime;
+          }
+          return;
+        case Profiler:
+          const parentStateNode = parentFiber.stateNode;
+          if (parentStateNode !== null) {
+            // Detached fibers have their state node cleared out.
+            // In this case, the return pointer is also cleared out,
+            // so we won't be able to report the time spent in this Profiler's subtree.
+            parentStateNode.passiveEffectDuration += elapsedTime;
+          }
+          return;
       }
       parentFiber = parentFiber.return;
     }

From 533aed8de6e6cac1fcadda15222cdcb195e9cc66 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 16 Mar 2021 14:02:24 -0400
Subject: [PATCH 0325/1603] Speed up DevTools local build script (#21018)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ab63cd182a61..2ae67506ef8c 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build-combined react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

From 1d1e49cfa453b58769e87c3c8d321024d58c948f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 16 Mar 2021 17:05:52 -0400
Subject: [PATCH 0326/1603] [Fizz] Assign an ID to the first DOM element in a
 fallback or insert a dummy (and testing infra) (#21020)

* Patches

* Add Fizz testing infra structure

* Assign an ID to the first DOM node in a fallback or insert a dummy

* unstable_createRoot
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 269 ++++++++++++++++++
 .../src/server/ReactDOMServerFormatConfig.js  |  91 +++++-
 .../server/ReactNativeServerFormatConfig.js   |  13 +
 packages/react-server/src/ReactFizzServer.js  |  36 ++-
 .../forks/ReactServerFormatConfig.custom.js   |   1 +
 5 files changed, 389 insertions(+), 21 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

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 000000000000..d90ea7689254
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -0,0 +1,269 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let JSDOM;
+let Stream;
+let Scheduler;
+let React;
+let ReactDOM;
+let ReactDOMFizzServer;
+let Suspense;
+let textCache;
+let document;
+let writable;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+
+describe('ReactDOMFizzServer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    Scheduler = require('scheduler');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    if (__EXPERIMENTAL__) {
+      ReactDOMFizzServer = require('react-dom/unstable-fizz');
+    }
+    Stream = require('stream');
+    Suspense = React.Suspense;
+    textCache = new Map();
+
+    // Test Environment
+    const jsdom = new JSDOM('<!DOCTYPE html><html><head></head><body>', {
+      runScripts: 'dangerously',
+    });
+    document = jsdom.window.document;
+
+    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);
+        document.body.appendChild(script);
+      } else {
+        document.body.appendChild(node);
+      }
+    }
+  }
+
+  function getVisibleChildren(element) {
+    const children = [];
+    let node = element.firstChild;
+    while (node) {
+      if (node.nodeType === 1) {
+        if (node.tagName !== 'SCRIPT' && !node.hasAttribute('hidden')) {
+          const props = {};
+          const attributes = node.attributes;
+          for (let i = 0; i < attributes.length; i++) {
+            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
+      ? null
+      : 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);
+  }
+
+  // @gate experimental
+  it('should asynchronously load the suspense boundary', async () => {
+    await act(async () => {
+      ReactDOMFizzServer.pipeToNodeWritable(
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Hello World" />
+          </Suspense>
+        </div>,
+        writable,
+      );
+    });
+    expect(getVisibleChildren(document.body)).toEqual(<div>Loading...</div>);
+    await act(async () => {
+      resolveText('Hello World');
+    });
+    expect(getVisibleChildren(document.body)).toEqual(<div>Hello World</div>);
+  });
+
+  // @gate experimental
+  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>
+      );
+    }
+
+    await act(async () => {
+      ReactDOMFizzServer.pipeToNodeWritable(
+        // We currently have to wrap the server node in a container because
+        // otherwise the Fizz nodes get deleted during hydration.
+        <div id="container">
+          <App />
+        </div>,
+        writable,
+      );
+    });
+
+    // We're still showing a fallback.
+
+    // Attempt to hydrate the content.
+    const container = document.body.firstChild;
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+
+    // 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(async () => {
+      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);
+
+    Scheduler.unstable_flushAll();
+
+    // Now it's hydrated.
+    expect(ref.current).toBe(h1);
+  });
+});
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 37ee8feae309..250892b31d4a 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -24,6 +24,7 @@ import invariant from 'shared/invariant';
 
 // Per response,
 export type ResponseState = {
+  nextSuspenseID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
@@ -32,6 +33,7 @@ export type ResponseState = {
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(): ResponseState {
   return {
+    nextSuspenseID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
@@ -42,13 +44,13 @@ export function createResponseState(): ResponseState {
 // We can't assign an ID up front because the node we're attaching it to might already
 // have one. So we need to lazily use that if it's available.
 export type SuspenseBoundaryID = {
-  id: null | string,
+  formattedID: null | PrecomputedChunk,
 };
 
 export function createSuspenseBoundaryID(
   responseState: ResponseState,
 ): SuspenseBoundaryID {
-  return {id: null};
+  return {formattedID: null};
 }
 
 function encodeHTMLIDAttribute(value: string): string {
@@ -59,23 +61,86 @@ function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
 
+function assignAnID(
+  responseState: ResponseState,
+  id: SuspenseBoundaryID,
+): PrecomputedChunk {
+  // TODO: This approach doesn't yield deterministic results since this is assigned during render.
+  const generatedID = responseState.nextSuspenseID++;
+  return (id.formattedID = stringToPrecomputedChunk(
+    'B:' + generatedID.toString(16),
+  ));
+}
+
+const dummyNode1 = stringToPrecomputedChunk('<span hidden id="');
+const dummyNode2 = stringToPrecomputedChunk('"></span>');
+
+function pushDummyNodeWithID(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  assignID: SuspenseBoundaryID,
+): void {
+  const id = assignAnID(responseState, assignID);
+  target.push(dummyNode1, id, dummyNode2);
+}
+
+export function pushEmpty(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): void {
+  if (assignID !== null) {
+    pushDummyNodeWithID(target, responseState, assignID);
+  }
+}
+
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
 ): void {
+  if (assignID !== null) {
+    pushDummyNodeWithID(target, responseState, assignID);
+  }
   target.push(stringToChunk(encodeHTMLTextNode(text)));
 }
 
 const startTag1 = stringToPrecomputedChunk('<');
 const startTag2 = stringToPrecomputedChunk('>');
 
+const idAttr = stringToPrecomputedChunk(' id="');
+const attrEnd = stringToPrecomputedChunk('"');
+
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
 ): void {
   // TODO: Figure out if it's self closing and everything else.
-  target.push(startTag1, stringToChunk(type), startTag2);
+  if (assignID !== null) {
+    let encodedID;
+    if (typeof props.id === 'string') {
+      // We can reuse the existing ID for our purposes.
+      encodedID = assignID.formattedID = stringToPrecomputedChunk(
+        encodeHTMLIDAttribute(props.id),
+      );
+    } else {
+      encodedID = assignAnID(responseState, assignID);
+    }
+    target.push(
+      startTag1,
+      stringToChunk(type),
+      idAttr,
+      encodedID,
+      attrEnd,
+      startTag2,
+    );
+  } else {
+    target.push(startTag1, stringToChunk(type), startTag2);
+  }
 }
 
 const endTag1 = stringToPrecomputedChunk('</');
@@ -144,7 +209,7 @@ export function writeEndSuspenseBoundary(destination: Destination): boolean {
 const startSegment = stringToPrecomputedChunk('<div hidden id="');
 const startSegment2 = stringToPrecomputedChunk('S:');
 const startSegment3 = stringToPrecomputedChunk('">');
-const endSegment = stringToPrecomputedChunk('"></div>');
+const endSegment = stringToPrecomputedChunk('</div>');
 export function writeStartSegment(
   destination: Destination,
   id: number,
@@ -297,7 +362,7 @@ export function writeCompletedSegmentInstruction(
   responseState: ResponseState,
   contentSegmentID: number,
 ): boolean {
-  if (responseState.sentCompleteSegmentFunction) {
+  if (!responseState.sentCompleteSegmentFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentCompleteSegmentFunction = true;
     writeChunk(destination, completeSegmentScript1Full);
@@ -328,7 +393,7 @@ export function writeCompletedBoundaryInstruction(
   boundaryID: SuspenseBoundaryID,
   contentSegmentID: number,
 ): boolean {
-  if (responseState.sentCompleteBoundaryFunction) {
+  if (!responseState.sentCompleteBoundaryFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentCompleteBoundaryFunction = true;
     writeChunk(destination, completeBoundaryScript1Full);
@@ -337,13 +402,11 @@ export function writeCompletedBoundaryInstruction(
     writeChunk(destination, completeBoundaryScript1Partial);
   }
   // TODO: Use the identifierPrefix option to make the prefix configurable.
+  const formattedBoundaryID = boundaryID.formattedID;
   invariant(
-    boundaryID.id !== null,
+    formattedBoundaryID !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
-  const formattedBoundaryID = stringToChunk(
-    encodeHTMLIDAttribute(boundaryID.id),
-  );
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedBoundaryID);
   writeChunk(destination, completeBoundaryScript2);
@@ -362,7 +425,7 @@ export function writeClientRenderBoundaryInstruction(
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
 ): boolean {
-  if (responseState.sentClientRenderFunction) {
+  if (!responseState.sentClientRenderFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentClientRenderFunction = true;
     writeChunk(destination, clientRenderScript1Full);
@@ -370,13 +433,11 @@ export function writeClientRenderBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, clientRenderScript1Partial);
   }
+  const formattedBoundaryID = boundaryID.formattedID;
   invariant(
-    boundaryID.id !== null,
+    formattedBoundaryID !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
-  const formattedBoundaryID = stringToPrecomputedChunk(
-    encodeHTMLIDAttribute(boundaryID.id),
-  );
   writeChunk(destination, formattedBoundaryID);
   return writeChunk(destination, clientRenderScript2);
 }
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 224f28e4fa94..e8f6b9e14aff 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -73,14 +73,25 @@ export type SuspenseBoundaryID = number;
 export function createSuspenseBoundaryID(
   responseState: ResponseState,
 ): SuspenseBoundaryID {
+  // TODO: This is not deterministic since it's created during render.
   return responseState.nextSuspenseID++;
 }
 
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
+export function pushEmpty(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): void {
+  // This is not used since we don't need to assign any IDs.
+}
+
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
 ): void {
   target.push(
     INSTANCE,
@@ -95,6 +106,8 @@ export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
 ): void {
   target.push(
     INSTANCE,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4731e965dab2..5eff77a57a29 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -39,6 +39,7 @@ import {
   writeClientRenderBoundaryInstruction,
   writeCompletedBoundaryInstruction,
   writeCompletedSegmentInstruction,
+  pushEmpty,
   pushTextInstance,
   pushStartInstance,
   pushEndInstance,
@@ -218,11 +219,26 @@ function renderNode(
   parentBoundary: Root | SuspenseBoundary,
   segment: Segment,
   node: ReactNodeList,
+  assignID: null | SuspenseBoundaryID,
 ): void {
   if (typeof node === 'string') {
-    pushTextInstance(segment.chunks, node);
+    pushTextInstance(segment.chunks, node, request.responseState, assignID);
+    return;
+  }
+
+  if (Array.isArray(node)) {
+    if (node.length > 0) {
+      // Only the first node gets assigned an ID.
+      renderNode(request, parentBoundary, segment, node[0], assignID);
+      for (let i = 1; i < node.length; i++) {
+        renderNode(request, parentBoundary, segment, node[i], null);
+      }
+    } else {
+      pushEmpty(segment.chunks, request.responseState, assignID);
+    }
     return;
   }
+
   if (
     typeof node !== 'object' ||
     !node ||
@@ -236,7 +252,7 @@ function renderNode(
   if (typeof type === 'function') {
     try {
       const result = type(props);
-      renderNode(request, parentBoundary, segment, result);
+      renderNode(request, parentBoundary, segment, result, assignID);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
@@ -248,7 +264,7 @@ function renderNode(
           node,
           parentBoundary,
           newSegment,
-          null,
+          assignID,
         );
         const ping = suspendedWork.ping;
         x.then(ping, ping);
@@ -259,10 +275,18 @@ function renderNode(
       }
     }
   } else if (typeof type === 'string') {
-    pushStartInstance(segment.chunks, type, props);
-    renderNode(request, parentBoundary, segment, props.children);
+    pushStartInstance(
+      segment.chunks,
+      type,
+      props,
+      request.responseState,
+      assignID,
+    );
+    renderNode(request, parentBoundary, segment, props.children, null);
     pushEndInstance(segment.chunks, type, props);
   } else if (type === REACT_SUSPENSE_TYPE) {
+    // We need to push an "empty" thing here to identify the parent suspense boundary.
+    pushEmpty(segment.chunks, request.responseState, assignID);
     // 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,
@@ -418,7 +442,7 @@ function retryWork(request: Request, work: SuspendedWork): void {
       node = element.type(element.props);
     }
 
-    renderNode(request, boundary, segment, node);
+    renderNode(request, boundary, segment, node, work.assignID);
 
     completeWork(request, boundary, segment);
   } catch (x) {
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index eb81d61a47b3..3f3688ad4fb8 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -30,6 +30,7 @@ export opaque type SuspenseBoundaryID = mixed;
 
 export const createResponseState = $$$hostConfig.createResponseState;
 export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
+export const pushEmpty = $$$hostConfig.pushEmpty;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;

From 825c3021f0477bf8bd4b57693f3303078e7c77db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 17 Mar 2021 11:18:42 -0400
Subject: [PATCH 0327/1603] Don't delete trailing mismatches during hydration
 at the root (#21021)

* Don't delete any trailing nodes in the container during hydration error

* Warn when an error during hydration causes us to clear the container

* Encode unfortunate case in test

* Wrap the root for tests that are applicable to nested cases

* Now we can pipe Fizz into a container

* Grammatical fix
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 29 +++++++--------
 .../ReactDOMServerIntegrationFragment-test.js | 10 +++++-
 .../ReactDOMServerIntegrationHooks-test.js    | 28 +++++++++------
 .../ReactDOMServerIntegrationModes-test.js    | 10 +++++-
 .../src/__tests__/ReactMount-test.js          | 10 ++----
 .../src/__tests__/ReactRenderDocument-test.js | 21 ++++++++++-
 .../ReactServerRenderingHydration-test.js     | 35 +++++++++++++++----
 .../src/client/ReactDOMHostConfig.js          | 15 ++++++++
 .../ReactFiberHostConfigWithNoHydration.js    |  2 ++
 .../src/ReactFiberHydrationContext.new.js     | 14 ++++----
 .../src/ReactFiberHydrationContext.old.js     | 14 ++++----
 .../src/ReactFiberWorkLoop.new.js             |  7 ++++
 .../src/ReactFiberWorkLoop.old.js             |  7 ++++
 .../useMutableSourceHydration-test.js         | 17 ++++++---
 .../src/forks/ReactFiberHostConfig.custom.js  |  3 ++
 15 files changed, 159 insertions(+), 63 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d90ea7689254..d22c1d87cb42 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -19,6 +19,7 @@ let Suspense;
 let textCache;
 let document;
 let writable;
+let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
@@ -38,10 +39,14 @@ describe('ReactDOMFizzServer', () => {
     textCache = new Map();
 
     // Test Environment
-    const jsdom = new JSDOM('<!DOCTYPE html><html><head></head><body>', {
-      runScripts: 'dangerously',
-    });
+    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;
@@ -80,9 +85,9 @@ describe('ReactDOMFizzServer', () => {
         const script = document.createElement('script');
         script.textContent = node.textContent;
         fakeBody.removeChild(node);
-        document.body.appendChild(script);
+        container.appendChild(script);
       } else {
-        document.body.appendChild(node);
+        container.appendChild(node);
       }
     }
   }
@@ -200,11 +205,11 @@ describe('ReactDOMFizzServer', () => {
         writable,
       );
     });
-    expect(getVisibleChildren(document.body)).toEqual(<div>Loading...</div>);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
     await act(async () => {
       resolveText('Hello World');
     });
-    expect(getVisibleChildren(document.body)).toEqual(<div>Hello World</div>);
+    expect(getVisibleChildren(container)).toEqual(<div>Hello World</div>);
   });
 
   // @gate experimental
@@ -224,20 +229,12 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      ReactDOMFizzServer.pipeToNodeWritable(
-        // We currently have to wrap the server node in a container because
-        // otherwise the Fizz nodes get deleted during hydration.
-        <div id="container">
-          <App />
-        </div>,
-        writable,
-      );
+      ReactDOMFizzServer.pipeToNodeWritable(<App />, writable);
     });
 
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const container = document.body.firstChild;
     const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
     root.render(<App />);
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
index cd0ea2c45d44..b729176f413e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationFragment-test.js
@@ -103,7 +103,15 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('an empty fragment', async render => {
-      expect(await render(<React.Fragment />)).toBe(null);
+      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
index 397b739546dc..3014ecd810d2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -1654,9 +1654,13 @@ describe('ReactDOMServerHooks', () => {
       // This is the wrong HTML string
       container.innerHTML = '<span></span>';
       ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-        'Warning: Expected server HTML to contain a matching <div> in <div>.',
-      ]);
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
+        [
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+          'Warning: Expected server HTML to contain a matching <div> in <div>.',
+        ],
+        {withoutStack: 1},
+      );
     });
 
     // @gate experimental
@@ -1740,9 +1744,13 @@ describe('ReactDOMServerHooks', () => {
       // This is the wrong HTML string
       container.innerHTML = '<span></span>';
       ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-        'Warning: Expected server HTML to contain a matching <div> in <div>.',
-      ]);
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
+        [
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+          'Warning: Expected server HTML to contain a matching <div> in <div>.',
+        ],
+        {withoutStack: 1},
+      );
     });
 
     // @gate experimental
@@ -1764,7 +1772,7 @@ describe('ReactDOMServerHooks', () => {
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: Did not expect server HTML to contain a <span> in <div>.',
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
         {withoutStack: 1},
       );
@@ -1789,7 +1797,7 @@ describe('ReactDOMServerHooks', () => {
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: Did not expect server HTML to contain a <span> in <div>.',
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
         {withoutStack: 1},
       );
@@ -1813,7 +1821,7 @@ describe('ReactDOMServerHooks', () => {
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: Did not expect server HTML to contain a <div> in <div>.',
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
         {withoutStack: 1},
       );
@@ -1834,7 +1842,7 @@ describe('ReactDOMServerHooks', () => {
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: Did not expect server HTML to contain a <div> in <div>.',
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
         {withoutStack: 1},
       );
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
index 8086ff441460..1a387fc7cb03 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationModes-test.js
@@ -153,7 +153,15 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('an empty strict mode', async render => {
-      expect(await render(<React.StrictMode />)).toBe(null);
+      expect(
+        (
+          await render(
+            <div>
+              <React.StrictMode />
+            </div>,
+          )
+        ).firstChild,
+      ).toBe(null);
     });
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
index 8d1b03cb4b4f..a214c32f58d0 100644
--- a/packages/react-dom/src/__tests__/ReactMount-test.js
+++ b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -123,16 +123,12 @@ describe('ReactMount', () => {
     expect(instance1 === instance2).toBe(true);
   });
 
-  it('should warn if mounting into left padded rendered markup', () => {
+  it('does not warn if mounting into left padded rendered markup', () => {
     const container = document.createElement('container');
     container.innerHTML = ReactDOMServer.renderToString(<div />) + ' ';
 
-    expect(() =>
-      ReactDOM.hydrate(<div />, container),
-    ).toErrorDev(
-      'Did not expect server HTML to contain the text node " " in <container>.',
-      {withoutStack: true},
-    );
+    // This should probably ideally warn but we ignore extra markup at the root.
+    ReactDOM.hydrate(<div />, container);
   });
 
   it('should warn if mounting into right padded rendered markup', () => {
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
index 2e7a60c9975f..def1c35bc64e 100644
--- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -368,12 +368,31 @@ describe('rendering React components at document', () => {
       expect(testDocument.body.innerHTML).toBe('Hello world');
     });
 
-    it('renders over an existing text child without throwing', () => {
+    it('cannot render over an existing text child at the root', () => {
       const container = document.createElement('div');
       container.textContent = 'potato';
       expect(() => ReactDOM.hydrate(<div>parsnip</div>, container)).toErrorDev(
         'Expected server HTML to contain a matching <div> in <div>.',
       );
+      // This creates an unfortunate double text case.
+      expect(container.textContent).toBe('potatoparsnip');
+    });
+
+    it('renders over an existing nested text child without throwing', () => {
+      const container = document.createElement('div');
+      const wrapper = document.createElement('div');
+      wrapper.textContent = 'potato';
+      container.appendChild(wrapper);
+      expect(() =>
+        ReactDOM.hydrate(
+          <div>
+            <div>parsnip</div>
+          </div>,
+          container,
+        ),
+      ).toErrorDev(
+        'Expected server HTML to contain a matching <div> in <div>.',
+      );
       expect(container.textContent).toBe('parsnip');
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index a361e55a7f8f..0ea7972f5d65 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -510,26 +510,47 @@ describe('ReactDOMServerHydration', () => {
 
   it('Suspense + hydration in legacy mode', () => {
     const element = document.createElement('div');
-    element.innerHTML = '<div>Hello World</div>';
-    const div = element.firstChild;
+    element.innerHTML = '<div><div>Hello World</div></div>';
+    const div = element.firstChild.firstChild;
     const ref = React.createRef();
     expect(() =>
       ReactDOM.hydrate(
-        <React.Suspense fallback={null}>
-          <div ref={ref}>Hello World</div>
-        </React.Suspense>,
+        <div>
+          <React.Suspense fallback={null}>
+            <div ref={ref}>Hello World</div>
+          </React.Suspense>
+        </div>,
         element,
       ),
     ).toErrorDev(
       'Warning: Did not expect server HTML to contain a <div> in <div>.',
-      {withoutStack: true},
     );
 
     // The content should've been client rendered and replaced the
     // existing div.
     expect(ref.current).not.toBe(div);
     // The HTML should be the same though.
-    expect(element.innerHTML).toBe('<div>Hello World</div>');
+    expect(element.innerHTML).toBe('<div><div>Hello World</div></div>');
+  });
+
+  it('Suspense + hydration in legacy mode (at root)', () => {
+    const element = document.createElement('div');
+    element.innerHTML = '<div>Hello World</div>';
+    const div = element.firstChild;
+    const ref = React.createRef();
+    ReactDOM.hydrate(
+      <React.Suspense fallback={null}>
+        <div ref={ref}>Hello World</div>
+      </React.Suspense>,
+      element,
+    );
+
+    // The content should've been client rendered.
+    expect(ref.current).not.toBe(div);
+    // Unfortunately, since we don't delete the tail at the root, a duplicate will remain.
+    expect(element.innerHTML).toBe(
+      '<div>Hello World</div><div>Hello World</div>',
+    );
   });
 
   it('Suspense + hydration in legacy mode with no fallback', () => {
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index dfd29b375a41..156951ac748b 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -894,6 +894,12 @@ export function commitHydratedSuspenseInstance(
   retryIfBlockedOn(suspenseInstance);
 }
 
+export function shouldDeleteUnhydratedTailInstances(
+  parentType: string,
+): boolean {
+  return parentType !== 'head' || parentType !== 'body';
+}
+
 export function didNotMatchHydratedContainerTextInstance(
   parentContainer: Container,
   textInstance: TextInstance,
@@ -1008,6 +1014,15 @@ export function didNotFindHydratableSuspenseInstance(
   }
 }
 
+export function errorHydratingContainer(parentContainer: Container): void {
+  if (__DEV__) {
+    console.error(
+      'An error occurred during hydration. The server HTML was replaced with client content in <%s>.',
+      parentContainer.nodeName.toLowerCase(),
+    );
+  }
+}
+
 export function getInstanceFromNode(node: HTMLElement): null | Object {
   return getClosestInstanceFromNode(node) || null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index b432a1d40073..c57b313fd90f 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -40,6 +40,7 @@ export const commitHydratedContainer = shim;
 export const commitHydratedSuspenseInstance = shim;
 export const clearSuspenseBoundary = shim;
 export const clearSuspenseBoundaryFromContainer = shim;
+export const shouldDeleteUnhydratedTailInstances = shim;
 export const didNotMatchHydratedContainerTextInstance = shim;
 export const didNotMatchHydratedTextInstance = shim;
 export const didNotHydrateContainerInstance = shim;
@@ -50,3 +51,4 @@ export const didNotFindHydratableContainerSuspenseInstance = shim;
 export const didNotFindHydratableInstance = shim;
 export const didNotFindHydratableTextInstance = shim;
 export const didNotFindHydratableSuspenseInstance = shim;
+export const errorHydratingContainer = shim;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index d91901f51976..2ebb1386a568 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -43,6 +43,7 @@ import {
   hydrateTextInstance,
   hydrateSuspenseInstance,
   getNextHydratableInstanceAfterSuspenseInstance,
+  shouldDeleteUnhydratedTailInstances,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
   didNotHydrateContainerInstance,
@@ -438,18 +439,15 @@ function popHydrationState(fiber: Fiber): boolean {
     return false;
   }
 
-  const type = fiber.type;
-
   // 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.
-  // TODO: Better heuristic.
+  // side of them. We also don't delete anything inside the root container.
   if (
-    fiber.tag !== HostComponent ||
-    (type !== 'head' &&
-      type !== 'body' &&
-      !shouldSetTextContent(type, fiber.memoizedProps))
+    fiber.tag !== HostRoot &&
+    (fiber.tag !== HostComponent ||
+      (shouldDeleteUnhydratedTailInstances(fiber.type) &&
+        !shouldSetTextContent(fiber.type, fiber.memoizedProps)))
   ) {
     let nextInstance = nextHydratableInstance;
     while (nextInstance) {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 6f7c51e0a569..c8e17e0b6374 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -43,6 +43,7 @@ import {
   hydrateTextInstance,
   hydrateSuspenseInstance,
   getNextHydratableInstanceAfterSuspenseInstance,
+  shouldDeleteUnhydratedTailInstances,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
   didNotHydrateContainerInstance,
@@ -438,18 +439,15 @@ function popHydrationState(fiber: Fiber): boolean {
     return false;
   }
 
-  const type = fiber.type;
-
   // 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.
-  // TODO: Better heuristic.
+  // side of them. We also don't delete anything inside the root container.
   if (
-    fiber.tag !== HostComponent ||
-    (type !== 'head' &&
-      type !== 'body' &&
-      !shouldSetTextContent(type, fiber.memoizedProps))
+    fiber.tag !== HostRoot &&
+    (fiber.tag !== HostComponent ||
+      (shouldDeleteUnhydratedTailInstances(fiber.type) &&
+        !shouldSetTextContent(fiber.type, fiber.memoizedProps)))
   ) {
     let nextInstance = nextHydratableInstance;
     while (nextInstance) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 19d53553f43d..ea425725250e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -88,6 +88,7 @@ import {
   clearContainer,
   getCurrentEventPriority,
   supportsMicrotasks,
+  errorHydratingContainer,
 } from './ReactFiberHostConfig';
 
 import {
@@ -782,6 +783,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       // discard server response and fall back to client side render.
       if (root.hydrate) {
         root.hydrate = false;
+        if (__DEV__) {
+          errorHydratingContainer(root.containerInfo);
+        }
         clearContainer(root.containerInfo);
       }
 
@@ -992,6 +996,9 @@ function performSyncWorkOnRoot(root) {
     // discard server response and fall back to client side render.
     if (root.hydrate) {
       root.hydrate = false;
+      if (__DEV__) {
+        errorHydratingContainer(root.containerInfo);
+      }
       clearContainer(root.containerInfo);
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index da22638e7575..c29c9353b173 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -88,6 +88,7 @@ import {
   clearContainer,
   getCurrentEventPriority,
   supportsMicrotasks,
+  errorHydratingContainer,
 } from './ReactFiberHostConfig';
 
 import {
@@ -782,6 +783,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       // discard server response and fall back to client side render.
       if (root.hydrate) {
         root.hydrate = false;
+        if (__DEV__) {
+          errorHydratingContainer(root.containerInfo);
+        }
         clearContainer(root.containerInfo);
       }
 
@@ -992,6 +996,9 @@ function performSyncWorkOnRoot(root) {
     // discard server response and fall back to client side render.
     if (root.hydrate) {
       root.hydrate = false;
+      if (__DEV__) {
+        errorHydratingContainer(root.containerInfo);
+      }
       clearContainer(root.containerInfo);
     }
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index c322a0a48ed4..f737994ad7e7 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -214,7 +214,8 @@ describe('useMutableSourceHydration', () => {
         source.value = 'two';
       });
     }).toErrorDev(
-      'Warning: Did not expect server HTML to contain a <div> in <div>.',
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
     expect(Scheduler).toHaveYielded(['only:two']);
@@ -266,7 +267,8 @@ describe('useMutableSourceHydration', () => {
         source.value = 'two';
       });
     }).toErrorDev(
-      'Warning: Did not expect server HTML to contain a <div> in <div>.',
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
     expect(Scheduler).toHaveYielded(['a:two', 'b:two']);
@@ -334,7 +336,8 @@ describe('useMutableSourceHydration', () => {
         source.valueB = 'b:two';
       });
     }).toErrorDev(
-      'Warning: Did not expect server HTML to contain a <div> in <div>.',
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
     expect(Scheduler).toHaveYielded(['0:a:one', '1:b:two']);
@@ -401,7 +404,13 @@ describe('useMutableSourceHydration', () => {
         source.value = 'two';
       });
     }).toErrorDev(
-      'Warning: Text content did not match. Server: "1" Client: "2"',
+      [
+        'Warning: An error occurred during hydration. ' +
+          'The server HTML was replaced with client content in <div>.',
+
+        'Warning: Text content did not match. Server: "1" Client: "2"',
+      ],
+      {withoutStack: 1},
     );
     expect(Scheduler).toHaveYielded([2, 'a:two']);
     expect(source.listenerCount).toBe(1);
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index a2f065102d05..5bfdf3a305f3 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -156,6 +156,8 @@ export const commitHydratedSuspenseInstance =
 export const clearSuspenseBoundary = $$$hostConfig.clearSuspenseBoundary;
 export const clearSuspenseBoundaryFromContainer =
   $$$hostConfig.clearSuspenseBoundaryFromContainer;
+export const shouldDeleteUnhydratedTailInstances =
+  $$$hostConfig.shouldDeleteUnhydratedTailInstances;
 export const didNotMatchHydratedContainerTextInstance =
   $$$hostConfig.didNotMatchHydratedContainerTextInstance;
 export const didNotMatchHydratedTextInstance =
@@ -175,3 +177,4 @@ export const didNotFindHydratableTextInstance =
   $$$hostConfig.didNotFindHydratableTextInstance;
 export const didNotFindHydratableSuspenseInstance =
   $$$hostConfig.didNotFindHydratableSuspenseInstance;
+export const errorHydratingContainer = $$$hostConfig.errorHydratingContainer;

From bf11788bf0c2e861dc6378ac9ab59d37e7c3e812 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Mar 2021 12:27:37 -0400
Subject: [PATCH 0328/1603] DevTools Profiler: Add commit and post-commit
 durations to UI (#20984)

---
 .../__snapshots__/profilingCache-test.js.snap | 94 ++++++++++++++++++
 .../src/backend/renderer.js                   | 46 +++++++++
 .../src/backend/types.js                      |  4 +
 .../views/Profiler/SidebarCommitInfo.css      | 16 +++
 .../views/Profiler/SidebarCommitInfo.js       | 47 ++++++++-
 .../views/Profiler/SnapshotCommitList.css     | 53 ++++++++++
 .../views/Profiler/SnapshotCommitList.js      | 99 ++++++++++++++++---
 .../views/Profiler/SnapshotCommitListItem.css |  7 +-
 .../views/Profiler/SnapshotCommitListItem.js  | 28 +++---
 .../views/Profiler/SnapshotSelector.js        | 11 ++-
 .../src/devtools/views/Profiler/Tooltip.js    |  7 +-
 .../src/devtools/views/Profiler/types.js      | 12 ++-
 .../src/devtools/views/Profiler/utils.js      | 10 ++
 .../src/app/InteractionTracing/index.js       | 12 ++-
 14 files changed, 403 insertions(+), 43 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index a47598e92d52..c9e7f9770159 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -26,6 +26,7 @@ Object {
     },
   },
   "duration": 16,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     1 => 16,
     2 => 16,
@@ -39,6 +40,7 @@ Object {
     5 => 1,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 16,
 }
@@ -63,6 +65,7 @@ Object {
     },
   },
   "duration": 15,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     1 => 15,
     2 => 15,
@@ -76,6 +79,7 @@ Object {
     4 => 2,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 15,
 }
@@ -93,6 +97,7 @@ Object {
     },
   },
   "duration": 3,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     5 => 3,
     3 => 3,
@@ -102,6 +107,7 @@ Object {
     3 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 18,
 }
@@ -140,6 +146,7 @@ Object {
     },
   },
   "duration": 12,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     1 => 12,
     2 => 12,
@@ -155,6 +162,7 @@ Object {
     5 => 1,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 12,
 }
@@ -195,6 +203,7 @@ Object {
     },
   },
   "duration": 13,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     3 => 0,
     4 => 1,
@@ -210,6 +219,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 25,
 }
@@ -236,6 +246,7 @@ Object {
     },
   },
   "duration": 10,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     3 => 0,
     2 => 10,
@@ -247,6 +258,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 35,
 }
@@ -266,6 +278,7 @@ Object {
     },
   },
   "duration": 10,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     2 => 10,
     1 => 10,
@@ -275,6 +288,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 45,
 }
@@ -329,6 +343,7 @@ Object {
             ],
           ],
           "duration": 12,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               1,
@@ -374,6 +389,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 12,
         },
@@ -423,6 +439,7 @@ Object {
             ],
           ],
           "duration": 13,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -468,6 +485,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 25,
         },
@@ -497,6 +515,7 @@ Object {
             ],
           ],
           "duration": 10,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -526,6 +545,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 35,
         },
@@ -545,6 +565,7 @@ Object {
             ],
           ],
           "duration": 10,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               2,
@@ -566,6 +587,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 45,
         },
@@ -792,6 +814,7 @@ Object {
             ],
           ],
           "duration": 11,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               1,
@@ -829,6 +852,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 11,
         },
@@ -868,6 +892,7 @@ Object {
             ],
           ],
           "duration": 11,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -905,6 +930,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 22,
         },
@@ -954,6 +980,7 @@ Object {
             ],
           ],
           "duration": 13,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -999,6 +1026,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 35,
         },
@@ -1183,6 +1211,7 @@ Object {
         },
       },
       "duration": 13,
+      "effectDuration": null,
       "fiberActualDurations": Map {
         3 => 0,
         4 => 1,
@@ -1198,6 +1227,7 @@ Object {
         1 => 0,
       },
       "interactionIDs": Array [],
+      "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 13,
     },
@@ -1221,6 +1251,7 @@ Object {
         },
       },
       "duration": 10,
+      "effectDuration": null,
       "fiberActualDurations": Map {
         3 => 0,
         2 => 10,
@@ -1232,6 +1263,7 @@ Object {
         1 => 0,
       },
       "interactionIDs": Array [],
+      "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 34,
     },
@@ -1248,6 +1280,7 @@ Object {
         },
       },
       "duration": 10,
+      "effectDuration": null,
       "fiberActualDurations": Map {
         2 => 10,
         1 => 10,
@@ -1257,6 +1290,7 @@ Object {
         1 => 0,
       },
       "interactionIDs": Array [],
+      "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 44,
     },
@@ -1419,6 +1453,7 @@ Object {
         },
       },
       "duration": 11,
+      "effectDuration": null,
       "fiberActualDurations": Map {
         11 => 11,
         12 => 11,
@@ -1432,6 +1467,7 @@ Object {
         14 => 1,
       },
       "interactionIDs": Array [],
+      "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 24,
     },
@@ -1511,9 +1547,11 @@ Object {
     Object {
       "changeDescriptions": Map {},
       "duration": 0,
+      "effectDuration": null,
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
       "interactionIDs": Array [],
+      "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 34,
     },
@@ -1636,6 +1674,7 @@ Object {
             ],
           ],
           "duration": 13,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -1681,6 +1720,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 13,
         },
@@ -1710,6 +1750,7 @@ Object {
             ],
           ],
           "duration": 10,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -1739,6 +1780,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 34,
         },
@@ -1758,6 +1800,7 @@ Object {
             ],
           ],
           "duration": 10,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               2,
@@ -1779,6 +1822,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 44,
         },
@@ -1977,6 +2021,7 @@ Object {
             ],
           ],
           "duration": 11,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               11,
@@ -2014,6 +2059,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 24,
         },
@@ -2090,9 +2136,11 @@ Object {
         Object {
           "changeDescriptions": Array [],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 34,
         },
@@ -2197,6 +2245,7 @@ Object {
     Object {
       "changeDescriptions": Map {},
       "duration": 0,
+      "effectDuration": null,
       "fiberActualDurations": Map {
         1 => 0,
         2 => 0,
@@ -2206,6 +2255,7 @@ Object {
         2 => 0,
       },
       "interactionIDs": Array [],
+      "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 0,
     },
@@ -2262,6 +2312,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     1 => 0,
     2 => 0,
@@ -2273,6 +2324,7 @@ Object {
     3 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 0,
 }
@@ -2292,6 +2344,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     3 => 0,
     2 => 0,
@@ -2303,6 +2356,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -2320,6 +2374,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     3 => 0,
   },
@@ -2327,6 +2382,7 @@ Object {
     3 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -2344,6 +2400,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     3 => 0,
   },
@@ -2351,6 +2408,7 @@ Object {
     3 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -2368,6 +2426,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     3 => 0,
     2 => 0,
@@ -2379,6 +2438,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -2403,6 +2463,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               1,
@@ -2432,6 +2493,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 0,
         },
@@ -2451,6 +2513,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -2480,6 +2543,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -2497,6 +2561,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -2510,6 +2575,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -2527,6 +2593,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -2540,6 +2607,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -2557,6 +2625,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -2586,6 +2655,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -2721,6 +2791,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     1 => 0,
     2 => 0,
@@ -2740,6 +2811,7 @@ Object {
     7 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 0,
 }
@@ -2793,6 +2865,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     5 => 0,
     4 => 0,
@@ -2810,6 +2883,7 @@ Object {
     2 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -2857,6 +2931,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     5 => 0,
     4 => 0,
@@ -2876,6 +2951,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -2924,6 +3000,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     5 => 0,
     4 => 0,
@@ -2943,6 +3020,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -2990,6 +3068,7 @@ Object {
     },
   },
   "duration": 0,
+  "effectDuration": null,
   "fiberActualDurations": Map {
     5 => 0,
     4 => 0,
@@ -3009,6 +3088,7 @@ Object {
     1 => 0,
   },
   "interactionIDs": Array [],
+  "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
 }
@@ -3073,6 +3153,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               1,
@@ -3134,6 +3215,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 0,
         },
@@ -3199,6 +3281,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               5,
@@ -3252,6 +3335,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -3311,6 +3395,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               5,
@@ -3372,6 +3457,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -3432,6 +3518,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               5,
@@ -3493,6 +3580,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -3552,6 +3640,7 @@ Object {
             ],
           ],
           "duration": 0,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               5,
@@ -3613,6 +3702,7 @@ Object {
             ],
           ],
           "interactionIDs": Array [],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
         },
@@ -3887,6 +3977,7 @@ Object {
             ],
           ],
           "duration": 11,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               1,
@@ -3926,6 +4017,7 @@ Object {
           "interactionIDs": Array [
             0,
           ],
+          "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 11,
         },
@@ -3965,6 +4057,7 @@ Object {
             ],
           ],
           "duration": 11,
+          "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
               3,
@@ -4004,6 +4097,7 @@ Object {
           "interactionIDs": Array [
             1,
           ],
+          "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 22,
         },
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index b23b59f73d84..c2de357a1b5f 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2097,6 +2097,25 @@ export function attach(
         // Checking root.memoizedInteractions handles multi-renderer edge-case-
         // where some v16 renderers support profiling and others don't.
         if (isProfiling && root.memoizedInteractions != 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;
+            }
+          }
+
           // If profiling is active, store commit time and duration, and the current interactions.
           // The frontend may request this information after profiling has stopped.
           currentCommitProfilingMetadata = {
@@ -2111,6 +2130,8 @@ export function attach(
             ),
             maxActualDuration: 0,
             priorityLevel: null,
+            effectDuration,
+            passiveEffectDuration,
           };
         }
 
@@ -2149,6 +2170,23 @@ export function attach(
     const isProfilingSupported = root.memoizedInteractions != null;
 
     if (isProfiling && isProfilingSupported) {
+      // 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;
+        }
+      }
+
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
       currentCommitProfilingMetadata = {
@@ -2164,6 +2202,8 @@ export function attach(
         maxActualDuration: 0,
         priorityLevel:
           priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
+        effectDuration,
+        passiveEffectDuration,
       };
     }
 
@@ -3294,8 +3334,10 @@ export function attach(
     changeDescriptions: Map<number, ChangeDescription> | null,
     commitTime: number,
     durations: Array<number>,
+    effectDuration: number | null,
     interactions: Array<Interaction>,
     maxActualDuration: number,
+    passiveEffectDuration: number | null,
     priorityLevel: string | null,
   |};
 
@@ -3349,8 +3391,10 @@ export function attach(
           const {
             changeDescriptions,
             durations,
+            effectDuration,
             interactions,
             maxActualDuration,
+            passiveEffectDuration,
             priorityLevel,
             commitTime,
           } = commitProfilingData;
@@ -3386,9 +3430,11 @@ export function attach(
                 ? Array.from(changeDescriptions.entries())
                 : null,
             duration: maxActualDuration,
+            effectDuration,
             fiberActualDurations,
             fiberSelfDurations,
             interactionIDs,
+            passiveEffectDuration,
             priorityLevel,
             timestamp: commitTime,
           });
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 3c42d2f9cc28..627e9a45045a 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -156,11 +156,15 @@ 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]>,
   interactionIDs: Array<number>,
+  // Only available in certain (newer) React builds,
+  passiveEffectDuration: number | null,
   priorityLevel: string | null,
   timestamp: number,
 |};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
index c0564e0d8c52..34917846eb32 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -63,3 +63,19 @@
   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
index 6cff0e209fa9..ed913984cc7a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -34,7 +34,9 @@ export default function SidebarCommitInfo(_: Props) {
   const {interactions} = profilerStore.getDataForRoot(rootID);
   const {
     duration,
+    effectDuration,
     interactionIDs,
+    passiveEffectDuration,
     priorityLevel,
     timestamp,
   } = profilerStore.getCommitData(rootID, selectedCommitIndex);
@@ -44,6 +46,9 @@ export default function SidebarCommitInfo(_: Props) {
     selectInteraction(interactionID);
   };
 
+  const hasCommitPhaseDurations =
+    effectDuration !== null || passiveEffectDuration !== null;
+
   return (
     <Fragment>
       <div className={styles.Toolbar}>Commit information</div>
@@ -59,10 +64,44 @@ export default function SidebarCommitInfo(_: Props) {
             <label className={styles.Label}>Committed at</label>:{' '}
             <span className={styles.Value}>{formatTime(timestamp)}s</span>
           </li>
-          <li className={styles.ListItem}>
-            <label className={styles.Label}>Render duration</label>:{' '}
-            <span className={styles.Value}>{formatDuration(duration)}ms</span>
-          </li>
+
+          {!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>
+          )}
+
           <li className={styles.Interactions}>
             <label className={styles.Label}>Interactions</label>:
             <div className={styles.InteractionList}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css
index 53faae5c3812..ddcb7d9e08c5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.css
@@ -7,3 +7,56 @@
    */
   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
index b4b42ddc8221..4fda4177706a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -7,6 +7,8 @@
  * @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';
@@ -19,7 +21,6 @@ import Tooltip from './Tooltip';
 import styles from './SnapshotCommitList.css';
 
 export type ItemData = {|
-  commitDurations: Array<number>,
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
   maxDuration: number,
@@ -28,36 +29,40 @@ export type ItemData = {|
   selectCommitIndex: (index: number) => void,
   setHoveredCommitIndex: (index: number) => void,
   startCommitDrag: (newDragState: DragState) => void,
+  totalDurations: Array<number>,
 |};
 
 type Props = {|
-  commitDurations: Array<number>,
+  commitData: CommitDataFrontend,
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
   selectCommitIndex: (index: number) => void,
+  totalDurations: Array<number>,
 |};
 
 export default function SnapshotCommitList({
-  commitDurations,
+  commitData,
   commitTimes,
   filteredCommitIndices,
   selectedCommitIndex,
   selectedFilteredCommitIndex,
   selectCommitIndex,
+  totalDurations,
 }: Props) {
   return (
     <AutoSizer>
       {({height, width}) => (
         <List
-          commitDurations={commitDurations}
+          commitData={commitData}
           commitTimes={commitTimes}
           height={height}
           filteredCommitIndices={filteredCommitIndices}
           selectedCommitIndex={selectedCommitIndex}
           selectedFilteredCommitIndex={selectedFilteredCommitIndex}
           selectCommitIndex={selectCommitIndex}
+          totalDurations={totalDurations}
           width={width}
         />
       )}
@@ -66,13 +71,14 @@ export default function SnapshotCommitList({
 }
 
 type ListProps = {|
-  commitDurations: Array<number>,
+  commitData: CommitDataFrontend,
   commitTimes: Array<number>,
   height: number,
   filteredCommitIndices: Array<number>,
   selectedCommitIndex: number | null,
   selectedFilteredCommitIndex: number | null,
   selectCommitIndex: (index: number) => void,
+  totalDurations: Array<number>,
   width: number,
 |};
 
@@ -83,13 +89,14 @@ type DragState = {
 };
 
 function List({
-  commitDurations,
+  commitData,
   selectedCommitIndex,
   commitTimes,
   height,
   filteredCommitIndices,
   selectedFilteredCommitIndex,
   selectCommitIndex,
+  totalDurations,
   width,
 }: ListProps) {
   const listRef = useRef<FixedSizeList<ItemData> | null>(null);
@@ -111,8 +118,8 @@ function List({
     [filteredCommitIndices, width],
   );
   const maxDuration = useMemo(
-    () => commitDurations.reduce((max, duration) => Math.max(max, duration), 0),
-    [commitDurations],
+    () => totalDurations.reduce((max, duration) => Math.max(max, duration), 0),
+    [totalDurations],
   );
 
   const maxCommitIndex = filteredCommitIndices.length - 1;
@@ -176,7 +183,6 @@ function List({
   // Pass required contextual data down to the ListItem renderer.
   const itemData = useMemo<ItemData>(
     () => ({
-      commitDurations,
       commitTimes,
       filteredCommitIndices,
       maxDuration,
@@ -185,9 +191,9 @@ function List({
       selectCommitIndex,
       setHoveredCommitIndex,
       startCommitDrag: setDragState,
+      totalDurations,
     }),
     [
-      commitDurations,
       commitTimes,
       filteredCommitIndices,
       maxDuration,
@@ -195,20 +201,81 @@ function List({
       selectedFilteredCommitIndex,
       selectCommitIndex,
       setHoveredCommitIndex,
+      totalDurations,
     ],
   );
 
   let tooltipLabel = null;
   if (hoveredCommitIndex !== null) {
-    const commitDuration = commitDurations[hoveredCommitIndex];
-    const commitTime = commitTimes[hoveredCommitIndex];
-    tooltipLabel = `${formatDuration(commitDuration)}ms at ${formatTime(
-      commitTime,
-    )}s`;
+    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) {
+      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 label={tooltipLabel}>
+    <Tooltip className={styles.Tooltip} label={tooltipLabel}>
       <div
         ref={divRef}
         style={{height, width}}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
index cfcc6b7a64ed..3bf73adaebe3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.css
@@ -11,9 +11,14 @@
   background-color: var(--color-background);
 }
 
-.Inner {
+.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
index 6dca200696d9..02e753bb8199 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {memo} from 'react';
 import {areEqual} from 'react-window';
-import {getGradientColor, formatDuration, formatTime} from './utils';
+import {getGradientColor} from './utils';
 
 import styles from './SnapshotCommitListItem.css';
 
@@ -25,20 +25,18 @@ type Props = {
 
 function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const {
-    commitDurations,
-    commitTimes,
     filteredCommitIndices,
     maxDuration,
     selectedCommitIndex,
     selectCommitIndex,
     setHoveredCommitIndex,
     startCommitDrag,
+    totalDurations,
   } = itemData;
 
   index = filteredCommitIndices[index];
 
-  const commitDuration = commitDurations[index];
-  const commitTime = commitTimes[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.
@@ -46,14 +44,13 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   const heightScale =
     Math.min(
       1,
-      Math.max(0, Math.cbrt(commitDuration) / Math.cbrt(maxDuration)),
+      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, commitDuration / maxDuration)) || 0;
+  const colorScale = Math.min(1, Math.max(0, totalDuration / maxDuration)) || 0;
 
   const isSelected = selectedCommitIndex === index;
 
@@ -71,6 +68,11 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
     }
   };
 
+  let backgroundColor;
+  if (!isSelected && totalDuration > 0) {
+    backgroundColor = getGradientColor(colorScale);
+  }
+
   return (
     <div
       className={styles.Outer}
@@ -82,16 +84,12 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
         borderBottom: isSelected
           ? '3px solid var(--color-tab-selected-border)'
           : undefined,
-      }}
-      title={`Duration ${formatDuration(commitDuration)}ms at ${formatTime(
-        commitTime,
-      )}s`}>
+      }}>
       <div
-        className={styles.Inner}
+        className={isSelected ? styles.InnerSelected : styles.Inner}
         style={{
           height: `${Math.round(heightScale * 100)}%`,
-          backgroundColor:
-            commitDuration > 0 ? getGradientColor(colorScale) : undefined,
+          backgroundColor,
         }}
       />
     </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
index c67b895edf46..b79569df1e48 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -32,10 +32,14 @@ export default function SnapshotSelector(_: Props) {
   const {profilerStore} = useContext(StoreContext);
   const {commitData} = profilerStore.getDataForRoot(((rootID: any): number));
 
-  const commitDurations: Array<number> = [];
+  const totalDurations: Array<number> = [];
   const commitTimes: Array<number> = [];
   commitData.forEach(commitDatum => {
-    commitDurations.push(commitDatum.duration);
+    totalDurations.push(
+      commitDatum.duration +
+        (commitDatum.effectDuration || 0) +
+        (commitDatum.passiveEffectDuration || 0),
+    );
     commitTimes.push(commitDatum.timestamp);
   });
 
@@ -151,12 +155,13 @@ export default function SnapshotSelector(_: Props) {
         tabIndex={0}>
         {numFilteredCommits > 0 && (
           <SnapshotCommitList
-            commitDurations={commitDurations}
+            commitData={commitData}
             commitTimes={commitTimes}
             filteredCommitIndices={filteredCommitIndices}
             selectedCommitIndex={selectedCommitIndex}
             selectedFilteredCommitIndex={selectedFilteredCommitIndex}
             selectCommitIndex={selectCommitIndex}
+            totalDurations={totalDurations}
           />
         )}
         {numFilteredCommits === 0 && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
index 93955ab0d215..8e759485a64a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
@@ -7,7 +7,7 @@ import styles from './Tooltip.css';
 
 const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};
 
-export default function Tooltip({children, label}: any) {
+export default function Tooltip({children, className, label, style}: any) {
   const containerRef = useRef(null);
   const tooltipRef = useRef(null);
 
@@ -36,7 +36,10 @@ export default function Tooltip({children, label}: any) {
       className={styles.Container}
       onMouseMove={onMouseMove}
       ref={containerRef}>
-      <div ref={tooltipRef} className={`${styles.Tooltip} ${tooltipClassName}`}>
+      <div
+        className={`${styles.Tooltip} ${tooltipClassName} ${className || ''}`}
+        ref={tooltipRef}
+        style={style}>
         {label}
       </div>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index 2ca28cefd3cf..803aeac6a0f0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -52,9 +52,13 @@ export type CommitDataFrontend = {|
   // Map of Fiber (ID) to a description of what changed in this commit.
   changeDescriptions: Map<number, ChangeDescription> | null,
 
-  // How long was this commit?
+  // 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>,
@@ -66,6 +70,10 @@ export type CommitDataFrontend = {|
   // Which interactions (IDs) were associated with this commit.
   interactionIDs: Array<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,
 
@@ -113,11 +121,13 @@ export type ProfilingDataFrontend = {|
 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]>,
   interactionIDs: Array<number>,
+  passiveEffectDuration: number | null,
   priorityLevel: string | null,
   timestamp: number,
 |};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index 9691af89a588..c667276cfafa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -75,11 +75,13 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
                 ? new Map(commitDataBackend.changeDescriptions)
                 : null,
             duration: commitDataBackend.duration,
+            effectDuration: commitDataBackend.effectDuration,
             fiberActualDurations: new Map(
               commitDataBackend.fiberActualDurations,
             ),
             fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
             interactionIDs: commitDataBackend.interactionIDs,
+            passiveEffectDuration: commitDataBackend.passiveEffectDuration,
             priorityLevel: commitDataBackend.priorityLevel,
             timestamp: commitDataBackend.timestamp,
           }),
@@ -129,18 +131,22 @@ export function prepareProfilingDataFrontendFromExport(
           ({
             changeDescriptions,
             duration,
+            effectDuration,
             fiberActualDurations,
             fiberSelfDurations,
             interactionIDs,
+            passiveEffectDuration,
             priorityLevel,
             timestamp,
           }) => ({
             changeDescriptions:
               changeDescriptions != null ? new Map(changeDescriptions) : null,
             duration,
+            effectDuration,
             fiberActualDurations: new Map(fiberActualDurations),
             fiberSelfDurations: new Map(fiberSelfDurations),
             interactionIDs,
+            passiveEffectDuration,
             priorityLevel,
             timestamp,
           }),
@@ -180,9 +186,11 @@ export function prepareProfilingDataExport(
           ({
             changeDescriptions,
             duration,
+            effectDuration,
             fiberActualDurations,
             fiberSelfDurations,
             interactionIDs,
+            passiveEffectDuration,
             priorityLevel,
             timestamp,
           }) => ({
@@ -191,9 +199,11 @@ export function prepareProfilingDataExport(
                 ? Array.from(changeDescriptions.entries())
                 : null,
             duration,
+            effectDuration,
             fiberActualDurations: Array.from(fiberActualDurations.entries()),
             fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
             interactionIDs,
+            passiveEffectDuration,
             priorityLevel,
             timestamp,
           }),
diff --git a/packages/react-devtools-shell/src/app/InteractionTracing/index.js b/packages/react-devtools-shell/src/app/InteractionTracing/index.js
index fd9bb891e0e6..544b335d0b36 100644
--- a/packages/react-devtools-shell/src/app/InteractionTracing/index.js
+++ b/packages/react-devtools-shell/src/app/InteractionTracing/index.js
@@ -8,7 +8,13 @@
  */
 
 import * as React from 'react';
-import {Fragment, useCallback, useEffect, useState} from 'react';
+import {
+  Fragment,
+  useCallback,
+  useLayoutEffect,
+  useEffect,
+  useState,
+} from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
 import {
   unstable_trace as trace,
@@ -68,6 +74,10 @@ export default function InteractionTracing() {
     }
   }, [count, shouldCascade]);
 
+  useLayoutEffect(() => {
+    Math.sqrt(100 * 100 * 100 * 100 * 100);
+  });
+
   return (
     <Fragment>
       <h1>Interaction Tracing</h1>

From 119736b1c2ea0d404ad466e39138462453392008 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 Mar 2021 12:28:21 -0400
Subject: [PATCH 0329/1603] [FB-only] Show which hooks (indices) changed when
 profiling (#20998)

---
 .../react-devtools-extensions/package.json    |  2 +-
 .../webpack.backend.js                        |  4 +
 .../webpack.config.js                         |  4 +-
 packages/react-devtools-shared/buildUtils.js  |  7 +-
 .../src/backend/renderer.js                   | 55 ++++++++++++--
 .../src/backend/types.js                      |  1 +
 .../config/DevToolsFeatureFlags.default.js    |  2 +-
 ...s => DevToolsFeatureFlags.extension-fb.js} |  4 +-
 .../DevToolsFeatureFlags.extension-oss.js     | 29 ++++++++
 .../Components/InspectedElementHooksTree.css  |  9 +++
 .../Components/InspectedElementHooksTree.js   | 15 +++-
 .../devtools/views/Profiler/WhatChanged.js    | 74 +++++++++++++------
 .../src/devtools/views/Profiler/types.js      |  1 +
 13 files changed, 172 insertions(+), 35 deletions(-)
 rename packages/react-devtools-shared/src/config/{DevToolsFeatureFlags.extension.js => DevToolsFeatureFlags.extension-fb.js} (94%)
 create mode 100644 packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 218e9aa79939..2771c31c5a3d 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -6,7 +6,7 @@
     "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
     "build:dev": "cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev",
     "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
-    "build:chrome:crx": "cross-env NODE_ENV=production node ./chrome/build --crx",
+    "build:chrome:crx": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
     "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
     "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index 2399c10892e3..885d9aa03b50 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -3,6 +3,7 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {GITHUB_URL, getVersionString} = require('./utils');
+const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
@@ -16,6 +17,8 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -34,6 +37,7 @@ module.exports = {
     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'),
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 4d6d00c52ac1..f754a99b86a5 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -17,6 +17,8 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -40,7 +42,7 @@ module.exports = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
-      'react-devtools-feature-flags': resolveFeatureFlags('extension'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
diff --git a/packages/react-devtools-shared/buildUtils.js b/packages/react-devtools-shared/buildUtils.js
index d5f48d63421b..036c94386a14 100644
--- a/packages/react-devtools-shared/buildUtils.js
+++ b/packages/react-devtools-shared/buildUtils.js
@@ -17,8 +17,11 @@ function resolveFeatureFlags(target) {
     case 'shell':
       flagsPath = 'DevToolsFeatureFlags.default';
       break;
-    case 'extension':
-      flagsPath = 'DevToolsFeatureFlags.extension';
+    case 'extension-oss':
+      flagsPath = 'DevToolsFeatureFlags.extension-oss';
+      break;
+    case 'extension-fb':
+      flagsPath = 'DevToolsFeatureFlags.extension-fb';
       break;
     default:
       console.error(`Invalid target "${target}"`);
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c2de357a1b5f..3bc2abe46a91 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -79,6 +79,7 @@ import {
   MEMO_SYMBOL_STRING,
 } from './ReactSymbols';
 import {format} from './utils';
+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -978,12 +979,9 @@ export function attach(
             state: null,
           };
         } else {
-          return {
+          const data: ChangeDescription = {
             context: getContextChangedKeys(nextFiber),
-            didHooksChange: didHooksChange(
-              prevFiber.memoizedState,
-              nextFiber.memoizedState,
-            ),
+            didHooksChange: false,
             isFirstMount: false,
             props: getChangedKeys(
               prevFiber.memoizedProps,
@@ -994,6 +992,23 @@ export function attach(
               nextFiber.memoizedState,
             ),
           };
+
+          // Only traverse the hooks list once, depending on what info we're returning.
+          if (enableProfilerChangedHookIndices) {
+            const indices = getChangedHooksIndices(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState,
+            );
+            data.hooks = indices;
+            data.didHooksChange = indices !== null && indices.length > 0;
+          } else {
+            data.didHooksChange = didHooksChange(
+              prevFiber.memoizedState,
+              nextFiber.memoizedState,
+            );
+          }
+
+          return data;
         }
       default:
         return null;
@@ -1154,6 +1169,36 @@ export function attach(
     return false;
   }
 
+  function getChangedHooksIndices(prev: any, next: any): null | Array<number> {
+    if (enableProfilerChangedHookIndices) {
+      if (prev == null || next == null) {
+        return null;
+      }
+
+      const indices = [];
+      let index = 0;
+      if (
+        next.hasOwnProperty('baseState') &&
+        next.hasOwnProperty('memoizedState') &&
+        next.hasOwnProperty('next') &&
+        next.hasOwnProperty('queue')
+      ) {
+        while (next !== null) {
+          if (didHookChange(prev, next)) {
+            indices.push(index);
+          }
+          next = next.next;
+          prev = prev.next;
+          index++;
+        }
+      }
+
+      return indices;
+    }
+
+    return null;
+  }
+
   function getChangedKeys(prev: any, next: any): null | Array<string> {
     if (prev == null || next == null) {
       return null;
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 627e9a45045a..c0ef91021f07 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -150,6 +150,7 @@ export type ChangeDescription = {|
   isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
+  hooks?: Array<number> | null,
 |};
 
 export type CommitDataBackend = {|
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index 9e2d09d6304f..da7784c75937 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -13,4 +13,4 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-// TODO Add feature flags here...
+export const enableProfilerChangedHookIndices = false;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
similarity index 94%
rename from packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js
rename to packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
index a224621bb79b..08fb7178c75b 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -13,7 +13,7 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-// TODO Add feature flags here...
+export const enableProfilerChangedHookIndices = true;
 
 /************************************************************************
  * Do not edit the code below.
@@ -21,7 +21,7 @@
  ************************************************************************/
 
 import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default';
-import typeof * as ExportsType from './DevToolsFeatureFlags.extension';
+import typeof * as ExportsType from './DevToolsFeatureFlags.extension-fb';
 
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
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 000000000000..6ad795840d58
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/************************************************************************
+ * This file is forked between different DevTools implementations.
+ * It should never be imported directly!
+ * It should always be imported from "react-devtools-feature-flags".
+ ************************************************************************/
+
+export const enableProfilerChangedHookIndices = 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';
+
+// eslint-disable-next-line no-unused-vars
+type Check<_X, Y: _X, X: Y = _X> = null;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<ExportsType, FeatureFlagsType>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
index 7b381faa9fa0..a70859355385 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -69,3 +69,12 @@
   flex: 0 0 1rem;
   width: 1rem;
 }
+
+.PrimitiveHookNumber {
+  color: var(--color-component-badge-count-inverted);
+  background-color: var(--color-component-badge-background-inverted);
+  font-size: var(--font-size-monospace-small);
+  margin-right: 0.25rem;
+  border-radius: 0.125rem;
+  padding: 0.125rem 0.25rem;
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 4303f8e406ad..7ed52905691b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -20,6 +20,7 @@ import Store from '../../store';
 import styles from './InspectedElementHooksTree.css';
 import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
 
 import type {InspectedElement} from './types';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -108,7 +109,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
     canEditHooksAndDeletePaths,
     canEditHooksAndRenamePaths,
   } = inspectedElement;
-  const {name, id: hookID, isStateEditable, subHooks, value} = hook;
+  const {id: hookID, isStateEditable, subHooks, value} = hook;
 
   const isReadOnly = hookID == null || !isStateEditable;
 
@@ -162,6 +163,18 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
 
   const isCustomHook = subHooks.length > 0;
 
+  let name = hook.name;
+  if (enableProfilerChangedHookIndices) {
+    if (!isCustomHook) {
+      name = (
+        <>
+          <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
+          {name}
+        </>
+      );
+    }
+  }
+
   const type = typeof value;
 
   let displayValue;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
index 00bdedddc9c3..7a2f9e5bf4f0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
@@ -9,11 +9,30 @@
 
 import * as React from 'react';
 import {useContext} from 'react';
+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
 import {ProfilerContext} from '../Profiler/ProfilerContext';
 import {StoreContext} from '../context';
 
 import styles from './WhatChanged.css';
 
+function hookIndicesToString(indices: Array<number>): string {
+  // This is debatable but I think 1-based might ake for a nicer UX.
+  const numbers = indices.map(value => value + 1);
+
+  switch (numbers.length) {
+    case 0:
+      return 'No hooks changed';
+    case 1:
+      return `Hook ${numbers[0]} changed`;
+    case 2:
+      return `Hooks ${numbers[0]} and ${numbers[1]} changed`;
+    default:
+      return `Hooks ${numbers.slice(0, numbers.length - 1).join(', ')} and ${
+        numbers[numbers.length - 1]
+      } changed`;
+  }
+}
+
 type Props = {|
   fiberID: number,
 |};
@@ -44,7 +63,16 @@ export default function WhatChanged({fiberID}: Props) {
     return null;
   }
 
-  if (changeDescription.isFirstMount) {
+  const {
+    context,
+    didHooksChange,
+    hooks,
+    isFirstMount,
+    props,
+    state,
+  } = changeDescription;
+
+  if (isFirstMount) {
     return (
       <div className={styles.Component}>
         <label className={styles.Label}>Why did this render?</label>
@@ -57,21 +85,21 @@ export default function WhatChanged({fiberID}: Props) {
 
   const changes = [];
 
-  if (changeDescription.context === true) {
+  if (context === true) {
     changes.push(
       <div key="context" className={styles.Item}>
         • Context changed
       </div>,
     );
   } else if (
-    typeof changeDescription.context === 'object' &&
-    changeDescription.context !== null &&
-    changeDescription.context.length !== 0
+    typeof context === 'object' &&
+    context !== null &&
+    context.length !== 0
   ) {
     changes.push(
       <div key="context" className={styles.Item}>
         • Context changed:
-        {changeDescription.context.map(key => (
+        {context.map(key => (
           <span key={key} className={styles.Key}>
             {key}
           </span>
@@ -80,22 +108,27 @@ export default function WhatChanged({fiberID}: Props) {
     );
   }
 
-  if (changeDescription.didHooksChange) {
-    changes.push(
-      <div key="hooks" className={styles.Item}>
-        • Hooks changed
-      </div>,
-    );
+  if (didHooksChange) {
+    if (enableProfilerChangedHookIndices && Array.isArray(hooks)) {
+      changes.push(
+        <div key="hooks" className={styles.Item}>
+          • {hookIndicesToString(hooks)}
+        </div>,
+      );
+    } else {
+      changes.push(
+        <div key="hooks" className={styles.Item}>
+          • Hooks changed
+        </div>,
+      );
+    }
   }
 
-  if (
-    changeDescription.props !== null &&
-    changeDescription.props.length !== 0
-  ) {
+  if (props !== null && props.length !== 0) {
     changes.push(
       <div key="props" className={styles.Item}>
         • Props changed:
-        {changeDescription.props.map(key => (
+        {props.map(key => (
           <span key={key} className={styles.Key}>
             {key}
           </span>
@@ -104,14 +137,11 @@ export default function WhatChanged({fiberID}: Props) {
     );
   }
 
-  if (
-    changeDescription.state !== null &&
-    changeDescription.state.length !== 0
-  ) {
+  if (state !== null && state.length !== 0) {
     changes.push(
       <div key="state" className={styles.Item}>
         • State changed:
-        {changeDescription.state.map(key => (
+        {state.map(key => (
           <span key={key} className={styles.Key}>
             {key}
           </span>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index 803aeac6a0f0..11e99c05b1be 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -46,6 +46,7 @@ export type ChangeDescription = {|
   isFirstMount: boolean,
   props: Array<string> | null,
   state: Array<string> | null,
+  hooks?: Array<number> | null,
 |};
 
 export type CommitDataFrontend = {|

From 3fb11eed9a166ebab23b778662f54c449fcffad0 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Wed, 17 Mar 2021 13:46:43 -0700
Subject: [PATCH 0330/1603] React Native: Touch Instrumentation Interface
 (#21024)

---
 .../src/legacy-events/ResponderTouchHistoryStore.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
index 643e2c130a4e..24d35b52a45d 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
@@ -184,8 +184,21 @@ function printTouchBank(): string {
   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)) {

From cf485e6f6b4d6a6e2ccfe7a12537941925316e86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 18 Mar 2021 12:46:15 -0400
Subject: [PATCH 0331/1603] [Fizz] Expose a method to abort a pending request
 (#21027)

* Track all suspended work while it's still pending

This allows us to abort work and put everything into client rendered mode
if we don't want to wait for further I/O.

It also allows us to cancel fallbacks if we complete the main content
before the fallback.

* Expose abort API to the browser streams

Since this API already returns a value, we need to use destructuring to
expose more options.

* Add a test including the client actually client rendering it

* Use AbortSignal option for W3C streams instead of external control

* Clean up listener after it's used once
---
 fixtures/fizz-ssr-browser/index.html          |   5 +-
 package.json                                  |   1 +
 .../src/__tests__/ReactDOMFizzServer-test.js  |  51 +++++++
 .../ReactDOMFizzServerBrowser-test.js         |  19 +++
 .../__tests__/ReactDOMFizzServerNode-test.js  |  50 +++++++
 .../src/server/ReactDOMFizzServerBrowser.js   |  18 ++-
 .../src/server/ReactDOMFizzServerNode.js      |  14 +-
 .../src/ReactNoopServer.js                    |   3 +
 packages/react-server/src/ReactFizzServer.js  | 133 +++++++++++++++---
 9 files changed, 275 insertions(+), 19 deletions(-)

diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
index 75d3f87b57ab..fa7943506745 100644
--- a/fixtures/fizz-ssr-browser/index.html
+++ b/fixtures/fizz-ssr-browser/index.html
@@ -20,7 +20,10 @@ <h1>Fizz Example</h1>
     <script src="../../build/node_modules/react-dom/umd/react-dom-unstable-fizz.browser.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
-      let stream = ReactDOMFizzServer.renderToReadableStream(<body>Success</body>);
+      let controller = new AbortController();
+      let stream = ReactDOMFizzServer.renderToReadableStream(<body>Success</body>, {
+        signal: controller.signal,
+      });
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });
diff --git a/package.json b/package.json
index 2ae67506ef8c..f498fad2a74d 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/traverse": "^7.11.0",
     "@mattiasbuelens/web-streams-polyfill": "^0.3.2",
+    "abort-controller": "^3.0.0",
     "art": "0.10.1",
     "babel-eslint": "^10.0.3",
     "babel-plugin-syntax-trailing-function-commas": "^6.5.0",
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d22c1d87cb42..b971874d62dc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -263,4 +263,55 @@ describe('ReactDOMFizzServer', () => {
     // Now it's hydrated.
     expect(ref.current).toBe(h1);
   });
+
+  // @gate experimental
+  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>
+        </div>
+      );
+    }
+
+    let controls;
+    await act(async () => {
+      controls = ReactDOMFizzServer.pipeToNodeWritable(<App />, writable);
+    });
+
+    // We're still showing a fallback.
+
+    // Attempt to hydrate the content.
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // We abort the server response.
+    await act(async () => {
+      controls.abort();
+    });
+
+    // We still can't render it on the client.
+    Scheduler.unstable_flushAll();
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // We now resolve it on the client.
+    resolveText('Hello');
+
+    Scheduler.unstable_flushAll();
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>Hello</h1>
+      </div>,
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 69a6e705ee6f..0167103db57c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -12,6 +12,7 @@
 // Polyfills for test environment
 global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
+global.AbortController = require('abort-controller');
 
 let React;
 let ReactDOMFizzServer;
@@ -110,4 +111,22 @@ describe('ReactDOMFizzServer', () => {
     const result = await readResult(stream);
     expect(result).toContain('Loading');
   });
+
+  // @gate experimental
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const controller = new AbortController();
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {signal: controller.signal},
+    );
+
+    controller.abort();
+
+    const result = await readResult(stream);
+    expect(result).toContain('Loading');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 1b1c5c4a314a..b5f6d0bfa83a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -115,4 +115,54 @@ describe('ReactDOMFizzServer', () => {
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
   });
+
+  // @gate experimental
+  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';
+    }
+    ReactDOMFizzServer.pipeToNodeWritable(
+      <Suspense fallback={<Fallback />}>
+        <Content />
+      </Suspense>,
+      writable,
+    );
+
+    await completed;
+
+    expect(output.result).toContain('Hi');
+    expect(output.result).not.toContain('Loading');
+    expect(renderedFallback).toBe(false);
+  });
+
+  // @gate experimental
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const {writable, output, completed} = getTestWritable();
+    const {abort} = ReactDOMFizzServer.pipeToNodeWritable(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      writable,
+    );
+
+    jest.runAllTimers();
+
+    expect(output.result).toContain('Loading');
+
+    abort();
+
+    await completed;
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('Loading');
+  });
 });
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 769b052fdd99..8b9db25f4a80 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -13,10 +13,26 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  abort,
 } from 'react-server/src/ReactFizzServer';
 
-function renderToReadableStream(children: ReactNodeList): ReadableStream {
+type Options = {
+  signal?: AbortSignal,
+};
+
+function renderToReadableStream(
+  children: ReactNodeList,
+  options?: Options,
+): ReadableStream {
   let request;
+  if (options && options.signal) {
+    const signal = options.signal;
+    const listener = () => {
+      abort(request);
+      signal.removeEventListener('abort', listener);
+    };
+    signal.addEventListener('abort', listener);
+  }
   return new ReadableStream({
     start(controller) {
       request = createRequest(children, controller);
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 38489f996c09..cb15bd197300 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -14,19 +14,31 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  abort,
 } from 'react-server/src/ReactFizzServer';
 
 function createDrainHandler(destination, request) {
   return () => startFlowing(request);
 }
 
+type Controls = {
+  // Cancel any pending I/O and put anything remaining into
+  // client rendered mode.
+  abort(): void,
+};
+
 function pipeToNodeWritable(
   children: ReactNodeList,
   destination: Writable,
-): void {
+): Controls {
   const request = createRequest(children, destination);
   destination.on('drain', createDrainHandler(destination, request));
   startWork(request);
+  return {
+    abort() {
+      abort(request);
+    },
+  };
 }
 
 export {pipeToNodeWritable};
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index d4b60739c619..4553fa43cd4f 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -216,6 +216,9 @@ function render(children: React$Element<any>): Destination {
     placeholders: new Map(),
     segments: new Map(),
     stack: [],
+    abort() {
+      ReactNoopServer.abort(request);
+    },
   };
   const request = ReactNoopServer.createRequest(children, destination);
   ReactNoopServer.startWork(request);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 5eff77a57a29..aff4c5037461 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -61,6 +61,7 @@ type SuspenseBoundary = {
   pendingWork: number, // when it reaches zero we can show this boundary's content
   completedSegments: Array<Segment>, // completed but not yet flushed segments.
   byteSize: number, // used to determine whether to inline children boundaries.
+  fallbackAbortableWork: Set<SuspendedWork>, // used to cancel work on the fallback if the boundary completes or gets canceled.
 };
 
 type SuspendedWork = {
@@ -68,18 +69,20 @@ type SuspendedWork = {
   ping: () => void,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment, // the segment we'll write to
+  abortSet: Set<SuspendedWork>, // the abortable set that this work belongs to
   assignID: null | SuspenseBoundaryID, // id to assign to the content
 };
 
 const PENDING = 0;
 const COMPLETED = 1;
 const FLUSHED = 2;
-const ERRORED = 3;
+const ABORTED = 3;
+const ERRORED = 4;
 
 type Root = null;
 
 type Segment = {
-  status: 0 | 1 | 2 | 3,
+  status: 0 | 1 | 2 | 3 | 4,
   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
@@ -102,6 +105,7 @@ type Request = {
   allPendingWork: number, // when it reaches zero, we can close the connection.
   pendingRootWork: number, // when this reaches zero, we've finished at least the root boundary.
   completedRootSegment: null | Segment, // Completed but not yet flushed root segments.
+  abortableWork: Set<SuspendedWork>,
   pingedWork: Array<SuspendedWork>,
   // Queues to flush in order of priority
   clientRenderedBoundaries: Array<SuspenseBoundary>, // Errored or client rendered but not yet flushed.
@@ -114,6 +118,7 @@ export function createRequest(
   destination: Destination,
 ): Request {
   const pingedWork = [];
+  const abortSet: Set<SuspendedWork> = new Set();
   const request = {
     destination,
     responseState: createResponseState(),
@@ -123,6 +128,7 @@ export function createRequest(
     allPendingWork: 0,
     pendingRootWork: 0,
     completedRootSegment: null,
+    abortableWork: abortSet,
     pingedWork: pingedWork,
     clientRenderedBoundaries: [],
     completedBoundaries: [],
@@ -137,6 +143,7 @@ export function createRequest(
     children,
     null,
     rootSegment,
+    abortSet,
     null,
   );
   pingedWork.push(rootWork);
@@ -151,7 +158,10 @@ function pingSuspendedWork(request: Request, work: SuspendedWork): void {
   }
 }
 
-function createSuspenseBoundary(request: Request): SuspenseBoundary {
+function createSuspenseBoundary(
+  request: Request,
+  fallbackAbortableWork: Set<SuspendedWork>,
+): SuspenseBoundary {
   return {
     id: createSuspenseBoundaryID(request.responseState),
     rootSegmentID: -1,
@@ -160,6 +170,7 @@ function createSuspenseBoundary(request: Request): SuspenseBoundary {
     forceClientRender: false,
     completedSegments: [],
     byteSize: 0,
+    fallbackAbortableWork,
   };
 }
 
@@ -168,6 +179,7 @@ function createSuspendedWork(
   node: ReactNodeList,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
+  abortSet: Set<SuspendedWork>,
   assignID: null | SuspenseBoundaryID,
 ): SuspendedWork {
   request.allPendingWork++;
@@ -181,8 +193,10 @@ function createSuspendedWork(
     ping: () => pingSuspendedWork(request, work),
     blockedBoundary,
     blockedSegment,
+    abortSet,
     assignID,
   };
+  abortSet.add(work);
   return work;
 }
 
@@ -219,6 +233,7 @@ function renderNode(
   parentBoundary: Root | SuspenseBoundary,
   segment: Segment,
   node: ReactNodeList,
+  abortSet: Set<SuspendedWork>,
   assignID: null | SuspenseBoundaryID,
 ): void {
   if (typeof node === 'string') {
@@ -229,9 +244,9 @@ function renderNode(
   if (Array.isArray(node)) {
     if (node.length > 0) {
       // Only the first node gets assigned an ID.
-      renderNode(request, parentBoundary, segment, node[0], assignID);
+      renderNode(request, parentBoundary, segment, node[0], abortSet, assignID);
       for (let i = 1; i < node.length; i++) {
-        renderNode(request, parentBoundary, segment, node[i], null);
+        renderNode(request, parentBoundary, segment, node[i], abortSet, null);
       }
     } else {
       pushEmpty(segment.chunks, request.responseState, assignID);
@@ -252,7 +267,7 @@ function renderNode(
   if (typeof type === 'function') {
     try {
       const result = type(props);
-      renderNode(request, parentBoundary, segment, result, assignID);
+      renderNode(request, parentBoundary, segment, result, abortSet, assignID);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
@@ -264,6 +279,7 @@ function renderNode(
           node,
           parentBoundary,
           newSegment,
+          abortSet,
           assignID,
         );
         const ping = suspendedWork.ping;
@@ -282,7 +298,14 @@ function renderNode(
       request.responseState,
       assignID,
     );
-    renderNode(request, parentBoundary, segment, props.children, null);
+    renderNode(
+      request,
+      parentBoundary,
+      segment,
+      props.children,
+      abortSet,
+      null,
+    );
     pushEndInstance(segment.chunks, type, props);
   } else if (type === REACT_SUSPENSE_TYPE) {
     // We need to push an "empty" thing here to identify the parent suspense boundary.
@@ -294,7 +317,8 @@ function renderNode(
     const fallback: ReactNodeList = props.fallback;
     const content: ReactNodeList = props.children;
 
-    const newBoundary = createSuspenseBoundary(request);
+    const fallbackAbortSet: Set<SuspendedWork> = new Set();
+    const newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
 
     const insertionIndex = segment.chunks.length;
     // The children of the boundary segment is actually the fallback.
@@ -304,6 +328,7 @@ function renderNode(
       newBoundary,
     );
     segment.children.push(boundarySegment);
+
     // We create suspended work 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 suspendedFallbackWork = createSuspendedWork(
@@ -311,6 +336,7 @@ function renderNode(
       fallback,
       parentBoundary,
       boundarySegment,
+      fallbackAbortSet,
       newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
     );
     // TODO: This should be queued at a separate lower priority queue so that we only work
@@ -330,6 +356,7 @@ function renderNode(
       content,
       newBoundary,
       contentRootSegment,
+      abortSet,
       null,
     );
     retryWork(request, contentWork);
@@ -338,14 +365,12 @@ function renderNode(
   }
 }
 
-function errorWork(
+function erroredWork(
   request: Request,
   boundary: Root | SuspenseBoundary,
   segment: Segment,
   error: mixed,
 ) {
-  segment.status = ERRORED;
-
   request.allPendingWork--;
   if (boundary !== null) {
     boundary.pendingWork--;
@@ -370,12 +395,55 @@ function errorWork(
   }
 }
 
-function completeWork(
+function abortWorkSoft(suspendedWork: SuspendedWork): void {
+  // This aborts work without aborting the parent boundary that it blocks.
+  // It's used for when we didn't need this work to complete the tree.
+  // If work was needed, then it should use abortWork instead.
+  const request: Request = this;
+  const boundary = suspendedWork.blockedBoundary;
+  const segment = suspendedWork.blockedSegment;
+  segment.status = ABORTED;
+  finishedWork(request, boundary, segment);
+}
+
+function abortWork(suspendedWork: SuspendedWork): void {
+  // This aborts the work and aborts the parent that it blocks, putting it into
+  // client rendered mode.
+  const request: Request = this;
+  const boundary = suspendedWork.blockedBoundary;
+  const segment = suspendedWork.blockedSegment;
+  segment.status = ABORTED;
+
+  request.allPendingWork--;
+  if (boundary === null) {
+    // We didn't complete the root so we have nothing to show. We can close
+    // the request;
+    if (request.status !== CLOSED) {
+      request.status = CLOSED;
+      close(request.destination);
+    }
+  } else {
+    boundary.pendingWork--;
+
+    // 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.fallbackAbortableWork.forEach(abortWork, request);
+    boundary.fallbackAbortableWork.clear();
+
+    if (!boundary.forceClientRender) {
+      boundary.forceClientRender = true;
+      if (boundary.parentFlushed) {
+        request.clientRenderedBoundaries.push(boundary);
+      }
+    }
+  }
+}
+
+function finishedWork(
   request: Request,
   boundary: Root | SuspenseBoundary,
   segment: Segment,
 ) {
-  segment.status = COMPLETED;
   request.allPendingWork--;
 
   if (boundary === null) {
@@ -397,6 +465,9 @@ function completeWork(
   }
   if (boundary.pendingWork === 0) {
     // This must have been the last segment we were waiting on. This boundary is now complete.
+    // We can now cancel any pending work on the fallback since we won't need to show it anymore.
+    boundary.fallbackAbortableWork.forEach(abortWorkSoft, request);
+    boundary.fallbackAbortableWork.clear();
     if (segment.parentFlushed) {
       // Our parent segment already flushed, so we need to schedule this segment to be emitted.
       boundary.completedSegments.push(segment);
@@ -425,7 +496,12 @@ function completeWork(
 
 function retryWork(request: Request, work: SuspendedWork): void {
   const segment = work.blockedSegment;
+  if (segment.status !== PENDING) {
+    // We completed this by other means before we had a chance to retry it.
+    return;
+  }
   const boundary = work.blockedBoundary;
+  const abortSet = work.abortSet;
   try {
     let node = work.node;
     while (
@@ -442,16 +518,20 @@ function retryWork(request: Request, work: SuspendedWork): void {
       node = element.type(element.props);
     }
 
-    renderNode(request, boundary, segment, node, work.assignID);
+    renderNode(request, boundary, segment, node, abortSet, work.assignID);
 
-    completeWork(request, boundary, segment);
+    abortSet.delete(work);
+    segment.status = COMPLETED;
+    finishedWork(request, boundary, segment);
   } catch (x) {
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       // Something suspended again, let's pick it back up later.
       const ping = work.ping;
       x.then(ping, ping);
     } else {
-      errorWork(request, boundary, segment, x);
+      abortSet.delete(work);
+      segment.status = ERRORED;
+      erroredWork(request, boundary, segment, x);
     }
   }
 }
@@ -797,6 +877,13 @@ function flushCompletedQueues(request: Request): void {
       // We don't need to check any partially completed segments because
       // either they have pending work or they're complete.
     ) {
+      if (__DEV__) {
+        if (request.abortableWork.size !== 0) {
+          console.error(
+            'There was still abortable work at the root when we closed. This is a bug in React.',
+          );
+        }
+      }
       // We're done.
       close(destination);
     }
@@ -824,6 +911,20 @@ export function startFlowing(request: Request): void {
   }
 }
 
+// This is called to early terminate a request. It puts all pending boundaries in client rendered state.
+export function abort(request: Request): void {
+  try {
+    const abortableWork = request.abortableWork;
+    abortableWork.forEach(abortWork, request);
+    abortableWork.clear();
+    if (request.status === FLOWING) {
+      flushCompletedQueues(request);
+    }
+  } catch (error) {
+    fatalError(request, error);
+  }
+}
+
 function notYetImplemented(): void {
   throw new Error('Not yet implemented.');
 }

From 154b85213a65377a67ac4f7a4a39116024bc3028 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 18 Mar 2021 15:43:40 -0400
Subject: [PATCH 0332/1603] [Fizz] Expose a method to explicitly start writing
 to a Node stream (#21028)

* Expose an explicit point when to start writing in the Node API

* Add a previously failing test
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 10 ++++-
 .../__tests__/ReactDOMFizzServerNode-test.js  | 38 ++++++++++++++++---
 .../src/server/ReactDOMFizzServerNode.js      | 10 ++++-
 .../src/ReactNoopServer.js                    |  1 +
 packages/react-server/src/ReactFizzServer.js  |  2 -
 5 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index b971874d62dc..9f139dd3baf1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -196,7 +196,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should asynchronously load the suspense boundary', async () => {
     await act(async () => {
-      ReactDOMFizzServer.pipeToNodeWritable(
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
         <div>
           <Suspense fallback={<Text text="Loading..." />}>
             <AsyncText text="Hello World" />
@@ -204,6 +204,7 @@ describe('ReactDOMFizzServer', () => {
         </div>,
         writable,
       );
+      startWriting();
     });
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
     await act(async () => {
@@ -229,7 +230,11 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      ReactDOMFizzServer.pipeToNodeWritable(<App />, writable);
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App />,
+        writable,
+      );
+      startWriting();
     });
 
     // We're still showing a fallback.
@@ -281,6 +286,7 @@ describe('ReactDOMFizzServer', () => {
     let controls;
     await act(async () => {
       controls = ReactDOMFizzServer.pipeToNodeWritable(<App />, writable);
+      controls.startWriting();
     });
 
     // We're still showing a fallback.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index b5f6d0bfa83a..a7ea970bece5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -59,11 +59,33 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should call pipeToNodeWritable', () => {
     const {writable, output} = getTestWritable();
-    ReactDOMFizzServer.pipeToNodeWritable(<div>hello world</div>, writable);
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      <div>hello world</div>,
+      writable,
+    );
+    startWriting();
     jest.runAllTimers();
     expect(output.result).toBe('<div>hello world</div>');
   });
 
+  // @gate experimental
+  it('should start writing after startWriting', () => {
+    const {writable, output} = getTestWritable();
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      <div>hello world</div>,
+      writable,
+    );
+    jest.runAllTimers();
+    // First we write our header.
+    output.result +=
+      '<!doctype html><html><head><title>test</title><head><body>';
+    // Then React starts writing.
+    startWriting();
+    expect(output.result).toBe(
+      '<!doctype html><html><head><title>test</title><head><body><div>hello world</div>',
+    );
+  });
+
   // @gate experimental
   it('should error the stream when an error is thrown at the root', async () => {
     const {writable, output, completed} = getTestWritable();
@@ -74,6 +96,8 @@ describe('ReactDOMFizzServer', () => {
       writable,
     );
 
+    // The stream is errored even if we haven't started writing.
+
     await completed;
 
     expect(output.error).toBe(theError);
@@ -83,7 +107,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should error the stream when an error is thrown inside a fallback', async () => {
     const {writable, output, completed} = getTestWritable();
-    ReactDOMFizzServer.pipeToNodeWritable(
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
         <Suspense fallback={<Throw />}>
           <InfiniteSuspend />
@@ -91,6 +115,7 @@ describe('ReactDOMFizzServer', () => {
       </div>,
       writable,
     );
+    startWriting();
 
     await completed;
 
@@ -101,7 +126,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
     const {writable, output, completed} = getTestWritable();
-    ReactDOMFizzServer.pipeToNodeWritable(
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Throw />
@@ -109,6 +134,7 @@ describe('ReactDOMFizzServer', () => {
       </div>,
       writable,
     );
+    startWriting();
 
     await completed;
 
@@ -128,12 +154,13 @@ describe('ReactDOMFizzServer', () => {
     function Content() {
       return 'Hi';
     }
-    ReactDOMFizzServer.pipeToNodeWritable(
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <Suspense fallback={<Fallback />}>
         <Content />
       </Suspense>,
       writable,
     );
+    startWriting();
 
     await completed;
 
@@ -145,7 +172,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     const {writable, output, completed} = getTestWritable();
-    const {abort} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {startWriting, abort} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <InfiniteSuspend />
@@ -153,6 +180,7 @@ describe('ReactDOMFizzServer', () => {
       </div>,
       writable,
     );
+    startWriting();
 
     jest.runAllTimers();
 
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index cb15bd197300..e79cbf098691 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -32,9 +32,17 @@ function pipeToNodeWritable(
   destination: Writable,
 ): Controls {
   const request = createRequest(children, destination);
-  destination.on('drain', createDrainHandler(destination, request));
+  let hasStartedFlowing = false;
   startWork(request);
   return {
+    startWriting() {
+      if (hasStartedFlowing) {
+        return;
+      }
+      hasStartedFlowing = true;
+      startFlowing(request);
+      destination.on('drain', createDrainHandler(destination, request));
+    },
     abort() {
       abort(request);
     },
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 4553fa43cd4f..9e0c71266114 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -222,6 +222,7 @@ function render(children: React$Element<any>): Destination {
   };
   const request = ReactNoopServer.createRequest(children, destination);
   ReactNoopServer.startWork(request);
+  ReactNoopServer.startFlowing(request);
   return destination;
 }
 
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index aff4c5037461..f03da08ab3e3 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -894,8 +894,6 @@ function flushCompletedQueues(request: Request): void {
 // This would put all waiting boundaries into client-only mode.
 
 export function startWork(request: Request): void {
-  // TODO: Don't automatically start flowing. Expose an explicit signal. Auto-start once everything is done.
-  request.status = FLOWING;
   scheduleWork(() => performWork(request));
 }
 

From 7d06b80af64d0121d373d8c6e8750a952c3897be Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 19 Mar 2021 09:52:59 -0400
Subject: [PATCH 0333/1603] Fixed primitive hook badge colors for light theme
 (#21034)

---
 .../devtools/views/Components/InspectedElementHooksTree.css | 4 ++--
 .../src/devtools/views/Settings/SettingsContext.js          | 6 ++++++
 packages/react-devtools-shared/src/devtools/views/root.css  | 4 ++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
index a70859355385..e5099abb348e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -71,8 +71,8 @@
 }
 
 .PrimitiveHookNumber {
-  color: var(--color-component-badge-count-inverted);
-  background-color: var(--color-component-badge-background-inverted);
+  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;
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index f63a901410fb..b6cd278df59d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -383,6 +383,12 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
   updateStyleHelper(theme, 'color-link', documentElements);
   updateStyleHelper(theme, 'color-modal-background', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-primitive-hook-badge-background',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-primitive-hook-badge-text', documentElements);
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 1fc6d461a4da..e703e011843e 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -69,6 +69,8 @@
   --light-color-expand-collapse-toggle: #777d88;
   --light-color-link: #0000ff;
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
+  --light-color-primitive-hook-badge-background: #e5e5e5;
+  --light-color-primitive-hook-badge-text: #5f6673;
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
@@ -156,6 +158,8 @@
   --dark-color-expand-collapse-toggle: #8f949d;
   --dark-color-link: #61dafb;
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
+  --dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
+  --dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;

From f6bc9c8243a02fc7a3a399845dabac3dc15dd7e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 19 Mar 2021 12:41:25 -0400
Subject: [PATCH 0334/1603] [Fizz] Expose maxBoundarySize as an option (#21029)

* Expose maxBoundarySize as an option

* Adjust the heuristic

* Rename to progressiveChunkSize
---
 .../src/server/ReactDOMFizzServerBrowser.js   |  7 +++++-
 .../src/server/ReactDOMFizzServerNode.js      | 11 ++++++++-
 .../src/ReactNoopServer.js                    | 12 ++++++++--
 packages/react-server/src/ReactFizzServer.js  | 24 ++++++++++++++++---
 4 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 8b9db25f4a80..b310271291e2 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -18,6 +18,7 @@ import {
 
 type Options = {
   signal?: AbortSignal,
+  progressiveChunkSize?: number,
 };
 
 function renderToReadableStream(
@@ -35,7 +36,11 @@ function renderToReadableStream(
   }
   return new ReadableStream({
     start(controller) {
-      request = createRequest(children, controller);
+      request = createRequest(
+        children,
+        controller,
+        options ? options.progressiveChunkSize : undefined,
+      );
       startWork(request);
     },
     pull(controller) {
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index e79cbf098691..1bc2506927db 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -21,6 +21,10 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request);
 }
 
+type Options = {
+  progressiveChunkSize?: number,
+};
+
 type Controls = {
   // Cancel any pending I/O and put anything remaining into
   // client rendered mode.
@@ -30,8 +34,13 @@ type Controls = {
 function pipeToNodeWritable(
   children: ReactNodeList,
   destination: Writable,
+  options?: Options,
 ): Controls {
-  const request = createRequest(children, destination);
+  const request = createRequest(
+    children,
+    destination,
+    options ? options.progressiveChunkSize : undefined,
+  );
   let hasStartedFlowing = false;
   startWork(request);
   return {
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 9e0c71266114..99392ebed6db 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -210,7 +210,11 @@ const ReactNoopServer = ReactFizzServer({
   },
 });
 
-function render(children: React$Element<any>): Destination {
+type Options = {
+  progressiveChunkSize?: number,
+};
+
+function render(children: React$Element<any>, options?: Options): Destination {
   const destination: Destination = {
     root: null,
     placeholders: new Map(),
@@ -220,7 +224,11 @@ function render(children: React$Element<any>): Destination {
       ReactNoopServer.abort(request);
     },
   };
-  const request = ReactNoopServer.createRequest(children, destination);
+  const request = ReactNoopServer.createRequest(
+    children,
+    destination,
+    options ? options.progressiveChunkSize : undefined,
+  );
   ReactNoopServer.startWork(request);
   ReactNoopServer.startFlowing(request);
   return destination;
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f03da08ab3e3..54049da40b39 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -99,7 +99,7 @@ const CLOSED = 2;
 type Request = {
   +destination: Destination,
   +responseState: ResponseState,
-  +maxBoundarySize: number,
+  +progressiveChunkSize: number,
   status: 0 | 1 | 2,
   nextSegmentId: number,
   allPendingWork: number, // when it reaches zero, we can close the connection.
@@ -113,16 +113,34 @@ type Request = {
   partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
 };
 
+// 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;
+
 export function createRequest(
   children: ReactNodeList,
   destination: Destination,
+  progressiveChunkSize: number = DEFAULT_PROGRESSIVE_CHUNK_SIZE,
 ): Request {
   const pingedWork = [];
   const abortSet: Set<SuspendedWork> = new Set();
   const request = {
     destination,
     responseState: createResponseState(),
-    maxBoundarySize: 1024,
+    progressiveChunkSize,
     status: BUFFERING,
     nextSegmentId: 0,
     allPendingWork: 0,
@@ -642,7 +660,7 @@ function flushSegment(
     flushSubtree(request, destination, segment);
 
     return writeEndSuspenseBoundary(destination);
-  } else if (boundary.byteSize > request.maxBoundarySize) {
+  } else if (boundary.byteSize > request.progressiveChunkSize) {
     // This boundary is large and 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.

From be5a2e231ae27b2c64806c026a5b9921be5e7560 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 19 Mar 2021 17:28:41 -0500
Subject: [PATCH 0335/1603] Land enableSyncMicrotasks (#20979)

---
 .../ReactDOMNativeEventHeuristic-test.js      | 18 ++++----
 .../__tests__/ChangeEventPlugin-test.js       |  9 ++--
 .../src/SchedulerWithReactIntegration.new.js  |  7 +---
 .../src/SchedulerWithReactIntegration.old.js  |  7 +---
 .../src/__tests__/ReactExpiration-test.js     | 35 +++++++++++-----
 ...tIncrementalErrorHandling-test.internal.js |  8 +++-
 .../__tests__/ReactIncrementalUpdates-test.js | 24 ++++++++---
 .../ReactSuspenseWithNoopRenderer-test.js     | 41 ++++++++++++++-----
 packages/shared/ReactFeatureFlags.js          |  2 -
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 18 files changed, 100 insertions(+), 60 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index c0617f9b5678..6c8d677cdbb9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -243,11 +243,12 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       mouseOverEvent.initEvent('mouseover', true, true);
       dispatchAndSetCurrentEvent(target.current, mouseOverEvent);
 
-      // 3s should be enough to expire the updates
-      Scheduler.unstable_advanceTime(3000);
-      expect(Scheduler).toFlushExpired([]);
-      expect(container.textContent).toEqual('hovered');
+      // 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');
   });
 
   // @gate experimental
@@ -275,11 +276,12 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       mouseEnterEvent.initEvent('mouseenter', true, true);
       dispatchAndSetCurrentEvent(target.current, mouseEnterEvent);
 
-      // 3s should be enough to expire the updates
-      Scheduler.unstable_advanceTime(3000);
-      expect(Scheduler).toFlushExpired([]);
-      expect(container.textContent).toEqual('hovered');
+      // 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');
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 9b7fed146847..3eb9edd2fecb 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -761,11 +761,12 @@ describe('ChangeEventPlugin', () => {
         mouseOverEvent.initEvent('mouseover', true, true);
         target.current.dispatchEvent(mouseOverEvent);
 
-        // 3s should be enough to expire the updates
-        Scheduler.unstable_advanceTime(3000);
-        expect(Scheduler).toFlushExpired([]);
-        expect(container.textContent).toEqual('hovered');
+        // 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-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index cd8cb58c6ced..70f26e5fc416 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -13,10 +13,7 @@ import type {ReactPriorityLevel} from './ReactInternalTypes';
 // CommonJS interop named imports.
 import * as Scheduler from 'scheduler';
 import {__interactionsRef} from 'scheduler/tracing';
-import {
-  enableSchedulerTracing,
-  enableSyncMicroTasks,
-} from 'shared/ReactFeatureFlags';
+import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import {
   SyncLanePriority,
@@ -139,7 +136,7 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
 
     // TODO: Figure out how to remove this It's only here as a last resort if we
     // forget to explicitly flush.
-    if (enableSyncMicroTasks && supportsMicrotasks) {
+    if (supportsMicrotasks) {
       // Flush the queue in a microtask.
       scheduleMicrotask(flushSyncCallbackQueueImpl);
     } else {
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 738ef2ea1afb..3d0d0920fd22 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -13,10 +13,7 @@ import type {ReactPriorityLevel} from './ReactInternalTypes';
 // CommonJS interop named imports.
 import * as Scheduler from 'scheduler';
 import {__interactionsRef} from 'scheduler/tracing';
-import {
-  enableSchedulerTracing,
-  enableSyncMicroTasks,
-} from 'shared/ReactFeatureFlags';
+import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import {
   SyncLanePriority,
@@ -139,7 +136,7 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
 
     // TODO: Figure out how to remove this It's only here as a last resort if we
     // forget to explicitly flush.
-    if (enableSyncMicroTasks && supportsMicrotasks) {
+    if (supportsMicrotasks) {
       // Flush the queue in a microtask.
       scheduleMicrotask(flushSyncCallbackQueueImpl);
     } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index ed4996531821..cf8b539433e4 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -103,23 +103,32 @@ describe('ReactExpiration', () => {
     return {type: 'span', children: [], prop, hidden: false};
   }
 
+  function flushNextRenderIfExpired() {
+    // This will start rendering the next level of work. If the work hasn't
+    // expired yet, React will exit without doing anything. If it has expired,
+    // it will schedule a sync task.
+    Scheduler.unstable_flushExpired();
+    // Flush the sync task.
+    ReactNoop.flushSync();
+  }
+
   it('increases priority of updates as time progresses', () => {
     ReactNoop.render(<span prop="done" />);
 
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Nothing has expired yet because time hasn't advanced.
-    ReactNoop.flushExpired();
+    flushNextRenderIfExpired();
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Advance time a bit, but not enough to expire the low pri update.
     ReactNoop.expire(4500);
-    ReactNoop.flushExpired();
+    flushNextRenderIfExpired();
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Advance by another second. Now the update should expire and flush.
-    ReactNoop.expire(1000);
-    ReactNoop.flushExpired();
+    ReactNoop.expire(500);
+    flushNextRenderIfExpired();
     expect(ReactNoop.getChildren()).toEqual([span('done')]);
   });
 
@@ -323,7 +332,8 @@ describe('ReactExpiration', () => {
 
     Scheduler.unstable_advanceTime(10000);
 
-    expect(Scheduler).toFlushExpired(['D', 'E']);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded(['D', 'E']);
     expect(root).toMatchRenderedOutput('ABCDE');
   });
 
@@ -351,7 +361,8 @@ describe('ReactExpiration', () => {
 
     Scheduler.unstable_advanceTime(10000);
 
-    expect(Scheduler).toFlushExpired(['D', 'E']);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded(['D', 'E']);
     expect(root).toMatchRenderedOutput('ABCDE');
   });
 
@@ -373,12 +384,14 @@ describe('ReactExpiration', () => {
     ReactNoop.render('Hi');
 
     // The update should not have expired yet.
-    expect(Scheduler).toFlushExpired([]);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded([]);
     expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance the time some more to expire the update.
     Scheduler.unstable_advanceTime(10000);
-    expect(Scheduler).toFlushExpired([]);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded([]);
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
 
@@ -391,7 +404,8 @@ describe('ReactExpiration', () => {
     Scheduler.unstable_advanceTime(10000);
 
     ReactNoop.render('Hi');
-    expect(Scheduler).toFlushExpired([]);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded([]);
     expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advancing by ~5 seconds should be sufficient to expire the update. (I
@@ -399,7 +413,8 @@ describe('ReactExpiration', () => {
     Scheduler.unstable_advanceTime(6000);
 
     ReactNoop.render('Hi');
-    expect(Scheduler).toFlushExpired([]);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded([]);
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index a14c36bfce2b..df691e074b2a 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -402,7 +402,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
-  it('retries one more time if an error occurs during a render that expires midway through the tree', () => {
+  it('retries one more time if an error occurs during a render that expires midway through the tree', async () => {
     function Oops({unused}) {
       Scheduler.unstable_yieldValue('Oops');
       throw new Error('Oops');
@@ -432,7 +432,11 @@ describe('ReactIncrementalErrorHandling', () => {
 
     // Expire the render midway through
     Scheduler.unstable_advanceTime(10000);
-    expect(() => Scheduler.unstable_flushExpired()).toThrow('Oops');
+
+    expect(() => {
+      Scheduler.unstable_flushExpired();
+      ReactNoop.flushSync();
+    }).toThrow('Oops');
 
     expect(Scheduler).toHaveYielded([
       // The render expired, but we shouldn't throw out the partial work.
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index 95acb7d8fc77..ec587d7231c7 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -32,6 +32,15 @@ describe('ReactIncrementalUpdates', () => {
     return {type: 'span', children: [], prop, hidden: false};
   }
 
+  function flushNextRenderIfExpired() {
+    // This will start rendering the next level of work. If the work hasn't
+    // expired yet, React will exit without doing anything. If it has expired,
+    // it will schedule a sync task.
+    Scheduler.unstable_flushExpired();
+    // Flush the sync task.
+    ReactNoop.flushSync();
+  }
+
   it('applies updates in order of priority', () => {
     let state;
     class Foo extends React.Component {
@@ -469,7 +478,8 @@ describe('ReactIncrementalUpdates', () => {
 
     ReactNoop.act(() => {
       ReactNoop.render(<App />);
-      expect(Scheduler).toFlushExpired([]);
+      flushNextRenderIfExpired();
+      expect(Scheduler).toHaveYielded([]);
       expect(Scheduler).toFlushAndYield([
         'Render: 0',
         'Commit: 0',
@@ -479,7 +489,8 @@ describe('ReactIncrementalUpdates', () => {
       Scheduler.unstable_advanceTime(10000);
 
       setCount(2);
-      expect(Scheduler).toFlushExpired([]);
+      flushNextRenderIfExpired();
+      expect(Scheduler).toHaveYielded([]);
     });
   });
 
@@ -497,7 +508,8 @@ describe('ReactIncrementalUpdates', () => {
     Scheduler.unstable_advanceTime(10000);
 
     ReactNoop.render(<Text text="B" />);
-    expect(Scheduler).toFlushExpired([]);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded([]);
   });
 
   it('regression: does not expire soon due to previous expired work', () => {
@@ -508,12 +520,14 @@ describe('ReactIncrementalUpdates', () => {
 
     ReactNoop.render(<Text text="A" />);
     Scheduler.unstable_advanceTime(10000);
-    expect(Scheduler).toFlushExpired(['A']);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded(['A']);
 
     Scheduler.unstable_advanceTime(10000);
 
     ReactNoop.render(<Text text="B" />);
-    expect(Scheduler).toFlushExpired([]);
+    flushNextRenderIfExpired();
+    expect(Scheduler).toHaveYielded([]);
   });
 
   it('when rebasing, does not exclude updates that were already committed, regardless of priority', async () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index d7da84e67b75..692b745f9708 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -984,6 +984,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('C')]);
   });
 
+  // TODO: This test was written against the old Expiration Times
+  // implementation. It doesn't really test what it was intended to test
+  // anymore, because all updates to the same queue get entangled together.
+  // Even if they haven't expired. Consider either deleting or rewriting.
   // @gate enableCache
   it('flushes all expired updates in a single batch', async () => {
     class Foo extends React.Component {
@@ -1013,10 +1017,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     jest.advanceTimersByTime(1000);
     ReactNoop.render(<Foo text="goodbye" />);
 
-    Scheduler.unstable_advanceTime(10000);
-    jest.advanceTimersByTime(10000);
-
-    expect(Scheduler).toFlushExpired([
+    expect(Scheduler).toFlushAndYield([
       'Suspend! [goodbye]',
       'Loading...',
       'Commit: goodbye',
@@ -1797,12 +1798,32 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await advanceTimers(5000);
 
     // Retry with the new content.
-    expect(Scheduler).toFlushAndYield([
-      'A',
-      // B still suspends
-      'Suspend! [B]',
-      'Loading more...',
-    ]);
+    if (gate(flags => flags.disableSchedulerTimeoutInWorkLoop)) {
+      expect(Scheduler).toFlushAndYield([
+        'A',
+        // B still suspends
+        'Suspend! [B]',
+        'Loading more...',
+      ]);
+    } else {
+      // In this branch, right as we start rendering, we detect that the work
+      // has expired (via Scheduler's didTimeout argument) and re-schedule the
+      // work as synchronous. Since sync work does not flow through Scheduler,
+      // we need to use `flushSync`.
+      //
+      // Usually we would use `act`, which fluses both sync work and Scheduler
+      // work, but that would also force the fallback to display, and this test
+      // is specifically about whether we delay or show the fallback.
+      expect(Scheduler).toFlushAndYield([]);
+      // This will flush the synchronous callback we just scheduled.
+      ReactNoop.flushSync();
+      expect(Scheduler).toHaveYielded([
+        'A',
+        // B still suspends
+        'Suspend! [B]',
+        'Loading more...',
+      ]);
+    }
     // Because we've already been waiting for so long we've exceeded
     // our threshold and we show the next level immediately.
     expect(ReactNoop.getChildren()).toEqual([
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 75ab4b6842d9..77079bba3a6a 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -150,6 +150,4 @@ export const enableRecursiveCommitTraversal = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 
-export const enableSyncMicroTasks = false;
-
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index b6a8016ec8b7..2e2f64e4bc5d 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -57,7 +57,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableSyncMicroTasks = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index cb8721af25fe..34ee7d2b7a84 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableSyncMicroTasks = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b504491d98de..bd5e91885ca4 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableSyncMicroTasks = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index ddab49284e43..70c5dc4144ee 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableSyncMicroTasks = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7098bfed2aa5..df6bbdf03fbe 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableSyncMicroTasks = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index a321f5ea12f9..42003be9a388 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableSyncMicroTasks = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index bb6a95235565..5ab680976a9e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -56,7 +56,6 @@ export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
-export const enableSyncMicroTasks = false;
 export const enableLazyContextPropagation = false;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index df9801263497..e2496510ef24 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -55,5 +55,4 @@ export const enableUseRefAccessWarning = __VARIANT__;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
-export const enableSyncMicroTasks = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 893c2699b0d0..c29856558751 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,7 +31,6 @@ export const {
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
-  enableSyncMicroTasks,
   enableLazyContextPropagation,
 } = dynamicFeatureFlags;
 

From 754e307284d5b4de32da1bd64c179885f6d9f253 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 19 Mar 2021 17:36:23 -0500
Subject: [PATCH 0336/1603] Delete immediateQueueCallbackNode (#20980)

We don't need this anymore. It only existed so we could cancel the
callback later. But canceling isn't necessary, was only an
"optimization" for something that almost never happens in practice.
---
 .../src/ReactFiberWorkLoop.new.js             |  8 ++++++
 .../src/ReactFiberWorkLoop.old.js             |  8 ++++++
 .../src/SchedulerWithReactIntegration.new.js  | 25 +------------------
 .../src/SchedulerWithReactIntegration.old.js  | 25 +------------------
 4 files changed, 18 insertions(+), 48 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ea425725250e..b7c92ae72d70 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -89,6 +89,7 @@ import {
   getCurrentEventPriority,
   supportsMicrotasks,
   errorHydratingContainer,
+  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -696,6 +697,13 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    if (supportsMicrotasks) {
+      // Flush the queue in a microtask.
+      scheduleMicrotask(flushSyncCallbackQueue);
+    } else {
+      // Flush the queue in an Immediate task.
+      scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbackQueue);
+    }
     newCallbackNode = null;
   } else if (newCallbackPriority === SyncBatchedLanePriority) {
     newCallbackNode = scheduleCallback(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c29c9353b173..f84e5b2eed56 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -89,6 +89,7 @@ import {
   getCurrentEventPriority,
   supportsMicrotasks,
   errorHydratingContainer,
+  scheduleMicrotask,
 } from './ReactFiberHostConfig';
 
 import {
@@ -696,6 +697,13 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    if (supportsMicrotasks) {
+      // Flush the queue in a microtask.
+      scheduleMicrotask(flushSyncCallbackQueue);
+    } else {
+      // Flush the queue in an Immediate task.
+      scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbackQueue);
+    }
     newCallbackNode = null;
   } else if (newCallbackPriority === SyncBatchedLanePriority) {
     newCallbackNode = scheduleCallback(
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 70f26e5fc416..9efa57d327ef 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -20,7 +20,6 @@ import {
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
 } from './ReactFiberLane.new';
-import {scheduleMicrotask, supportsMicrotasks} from './ReactFiberHostConfig';
 
 const {
   unstable_scheduleCallback: Scheduler_scheduleCallback,
@@ -71,7 +70,6 @@ export const requestPaint =
   Scheduler_requestPaint !== undefined ? Scheduler_requestPaint : () => {};
 
 let syncQueue: Array<SchedulerCallback> | null = null;
-let immediateQueueCallbackNode: mixed | null = null;
 let isFlushingSyncQueue: boolean = false;
 const initialTimeMs: number = Scheduler_now();
 
@@ -133,19 +131,6 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   // the next tick, or earlier if something calls `flushSyncCallbackQueue`.
   if (syncQueue === null) {
     syncQueue = [callback];
-
-    // TODO: Figure out how to remove this It's only here as a last resort if we
-    // forget to explicitly flush.
-    if (supportsMicrotasks) {
-      // Flush the queue in a microtask.
-      scheduleMicrotask(flushSyncCallbackQueueImpl);
-    } else {
-      // Flush the queue in the next tick.
-      immediateQueueCallbackNode = Scheduler_scheduleCallback(
-        Scheduler_ImmediatePriority,
-        flushSyncCallbackQueueImpl,
-      );
-    }
   } else {
     // Push onto existing queue. Don't need to schedule a callback because
     // we already scheduled one when we created the queue.
@@ -158,15 +143,6 @@ export function cancelCallback(callbackNode: mixed) {
 }
 
 export function flushSyncCallbackQueue() {
-  if (immediateQueueCallbackNode !== null) {
-    const node = immediateQueueCallbackNode;
-    immediateQueueCallbackNode = null;
-    Scheduler_cancelCallback(node);
-  }
-  flushSyncCallbackQueueImpl();
-}
-
-function flushSyncCallbackQueueImpl() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
@@ -199,4 +175,5 @@ function flushSyncCallbackQueueImpl() {
       isFlushingSyncQueue = false;
     }
   }
+  return null;
 }
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 3d0d0920fd22..bde9672f329e 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -20,7 +20,6 @@ import {
   getCurrentUpdateLanePriority,
   setCurrentUpdateLanePriority,
 } from './ReactFiberLane.old';
-import {scheduleMicrotask, supportsMicrotasks} from './ReactFiberHostConfig';
 
 const {
   unstable_scheduleCallback: Scheduler_scheduleCallback,
@@ -71,7 +70,6 @@ export const requestPaint =
   Scheduler_requestPaint !== undefined ? Scheduler_requestPaint : () => {};
 
 let syncQueue: Array<SchedulerCallback> | null = null;
-let immediateQueueCallbackNode: mixed | null = null;
 let isFlushingSyncQueue: boolean = false;
 const initialTimeMs: number = Scheduler_now();
 
@@ -133,19 +131,6 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   // the next tick, or earlier if something calls `flushSyncCallbackQueue`.
   if (syncQueue === null) {
     syncQueue = [callback];
-
-    // TODO: Figure out how to remove this It's only here as a last resort if we
-    // forget to explicitly flush.
-    if (supportsMicrotasks) {
-      // Flush the queue in a microtask.
-      scheduleMicrotask(flushSyncCallbackQueueImpl);
-    } else {
-      // Flush the queue in the next tick.
-      immediateQueueCallbackNode = Scheduler_scheduleCallback(
-        Scheduler_ImmediatePriority,
-        flushSyncCallbackQueueImpl,
-      );
-    }
   } else {
     // Push onto existing queue. Don't need to schedule a callback because
     // we already scheduled one when we created the queue.
@@ -158,15 +143,6 @@ export function cancelCallback(callbackNode: mixed) {
 }
 
 export function flushSyncCallbackQueue() {
-  if (immediateQueueCallbackNode !== null) {
-    const node = immediateQueueCallbackNode;
-    immediateQueueCallbackNode = null;
-    Scheduler_cancelCallback(node);
-  }
-  flushSyncCallbackQueueImpl();
-}
-
-function flushSyncCallbackQueueImpl() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
@@ -199,4 +175,5 @@ function flushSyncCallbackQueueImpl() {
       isFlushingSyncQueue = false;
     }
   }
+  return null;
 }

From 6d3ecb70dceb225af0cd990b46d6c44b852c1d82 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 19 Mar 2021 17:36:51 -0500
Subject: [PATCH 0337/1603] Remove unstable_changedBits (#20953)

We added this unstable feature a few years ago, as a way to opt out of
context updates, but it didn't prove useful in practice.

We have other proposals for how to address the same problem, like
context selectors.

Since it was prefixed with `unstable_`, we should be able to remove it
without consequence. The hook API already warned if you used it.

Even if someone is using it somewhere, it's meant to be an optimization
only, so if they are using the API properly, it should not have any
semantic impact.
---
 packages/react-cache/src/ReactCacheOld.js     |   4 +-
 .../react-debug-tools/src/ReactDebugHooks.js  |  10 +-
 .../src/devtools/cache.js                     |   4 +-
 .../ReactDOMServerIntegrationHooks-test.js    |  15 +-
 ...eactDOMServerIntegrationNewContext-test.js |   4 +-
 .../src/server/ReactPartialRendererHooks.js   |  10 +-
 .../src/ReactFiberBeginWork.new.js            |  29 +-
 .../src/ReactFiberBeginWork.old.js            |  29 +-
 .../src/ReactFiberCacheComponent.new.js       |   1 -
 .../src/ReactFiberCacheComponent.old.js       |   1 -
 .../src/ReactFiberHooks.new.js                |  98 ++----
 .../src/ReactFiberHooks.old.js                |  98 ++----
 .../src/ReactFiberNewContext.new.js           |  87 +----
 .../src/ReactFiberNewContext.old.js           |  87 +----
 .../src/ReactInternalTypes.js                 |  11 +-
 .../src/__tests__/ReactNewContext-test.js     | 307 +-----------------
 packages/react/src/ReactContext.js            |  25 +-
 packages/react/src/ReactHooks.js              |  21 +-
 packages/shared/ReactTypes.js                 |   2 -
 19 files changed, 123 insertions(+), 720 deletions(-)

diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
index 577ec6bb1a40..77768dfcf216 100644
--- a/packages/react-cache/src/ReactCacheOld.js
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -46,7 +46,7 @@ const ReactCurrentDispatcher =
   React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
     .ReactCurrentDispatcher;
 
-function readContext(Context, observedBits) {
+function readContext(Context) {
   const dispatcher = ReactCurrentDispatcher.current;
   if (dispatcher === null) {
     throw new Error(
@@ -55,7 +55,7 @@ function readContext(Context, observedBits) {
         'lifecycle methods.',
     );
   }
-  return dispatcher.readContext(Context, observedBits);
+  return dispatcher.readContext(Context);
 }
 
 function identityHashFn(input) {
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index eb7a8f6d4ef1..d78f62937484 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -109,18 +109,12 @@ function getCacheForType<T>(resourceType: () => T): T {
   invariant(false, 'Not implemented.');
 }
 
-function readContext<T>(
-  context: ReactContext<T>,
-  observedBits: void | number | boolean,
-): T {
+function readContext<T>(context: ReactContext<T>): T {
   // For now we don't expose readContext usage in the hooks debugging info.
   return context._currentValue;
 }
 
-function useContext<T>(
-  context: ReactContext<T>,
-  observedBits: void | number | boolean,
-): T {
+function useContext<T>(context: ReactContext<T>): T {
   hookLog.push({
     primitive: 'Context',
     stackError: new Error(),
diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js
index 573f66640271..cc51b31861c1 100644
--- a/packages/react-devtools-shared/src/devtools/cache.js
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -61,7 +61,7 @@ const Rejected = 2;
 const ReactCurrentDispatcher = (React: any)
   .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
 
-function readContext(Context, observedBits) {
+function readContext(Context) {
   const dispatcher = ReactCurrentDispatcher.current;
   if (dispatcher === null) {
     throw new Error(
@@ -70,7 +70,7 @@ function readContext(Context, observedBits) {
         'lifecycle methods.',
     );
   }
-  return dispatcher.readContext(Context, observedBits);
+  return dispatcher.readContext(Context);
 }
 
 const CacheContext = createContext(null);
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index 3014ecd810d2..659a408e6750 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -736,17 +736,6 @@ describe('ReactDOMServerHooks', () => {
     },
   );
 
-  itRenders('warns when bitmask is passed to useContext', async render => {
-    const Context = React.createContext('Hi');
-
-    function Foo() {
-      return <span>{useContext(Context, 1)}</span>;
-    }
-
-    const domNode = await render(<Foo />, 1);
-    expect(domNode.textContent).toBe('Hi');
-  });
-
   describe('useDebugValue', () => {
     itRenders('is a noop', async render => {
       function Counter(props) {
@@ -760,11 +749,11 @@ describe('ReactDOMServerHooks', () => {
   });
 
   describe('readContext', () => {
-    function readContext(Context, observedBits) {
+    function readContext(Context) {
       const dispatcher =
         React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
           .ReactCurrentDispatcher.current;
-      return dispatcher.readContext(Context, observedBits);
+      return dispatcher.readContext(Context);
     }
 
     itRenders(
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
index 338014e66a7c..cbba19591045 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -161,11 +161,11 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('readContext() in different components', async render => {
-      function readContext(Ctx, observedBits) {
+      function readContext(Ctx) {
         const dispatcher =
           React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
             .ReactCurrentDispatcher.current;
-        return dispatcher.readContext(Ctx, observedBits);
+        return dispatcher.readContext(Ctx);
       }
 
       class Cls extends React.Component {
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 50edb72c2844..aeda6e72136f 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -219,10 +219,7 @@ function getCacheForType<T>(resourceType: () => T): T {
   invariant(false, 'Not implemented.');
 }
 
-function readContext<T>(
-  context: ReactContext<T>,
-  observedBits: void | number | boolean,
-): T {
+function readContext<T>(context: ReactContext<T>): T {
   const threadID = currentPartialRenderer.threadID;
   validateContextBounds(context, threadID);
   if (__DEV__) {
@@ -238,10 +235,7 @@ function readContext<T>(
   return context[threadID];
 }
 
-function useContext<T>(
-  context: ReactContext<T>,
-  observedBits: void | number | boolean,
-): T {
+function useContext<T>(context: ReactContext<T>): T {
   if (__DEV__) {
     currentHookNameInDev = 'useContext';
   }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 9ba666bd548e..2f4bfe98fb0f 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -160,7 +160,6 @@ import {
   checkIfContextChanged,
   readContext,
   prepareToReadContext,
-  calculateChangedBits,
   scheduleWorkOnParentPath,
 } from './ReactFiberNewContext.new';
 import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.new';
@@ -221,7 +220,7 @@ import {
   restoreSpawnedCachePool,
   getOffscreenDeferredCachePool,
 } from './ReactFiberCacheComponent.new';
-import {MAX_SIGNED_31_BIT_INT} from './MaxInts';
+import is from 'shared/objectIs';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
@@ -795,12 +794,7 @@ function updateCacheComponent(
       pushCacheProvider(workInProgress, nextCache);
       if (nextCache !== prevState.cache) {
         // This cache refreshed. Propagate a context change.
-        propagateContextChange(
-          workInProgress,
-          CacheContext,
-          MAX_SIGNED_31_BIT_INT,
-          renderLanes,
-        );
+        propagateContextChange(workInProgress, CacheContext, renderLanes);
       }
     }
   }
@@ -1169,12 +1163,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
-      propagateContextChange(
-        workInProgress,
-        CacheContext,
-        MAX_SIGNED_31_BIT_INT,
-        renderLanes,
-      );
+      propagateContextChange(workInProgress, CacheContext, renderLanes);
     }
   }
 
@@ -3011,8 +3000,7 @@ function updateContextProvider(
   } else {
     if (oldProps !== null) {
       const oldValue = oldProps.value;
-      const changedBits = calculateChangedBits(context, newValue, oldValue);
-      if (changedBits === 0) {
+      if (is(oldValue, newValue)) {
         // No change. Bailout early if children are the same.
         if (
           oldProps.children === newProps.children &&
@@ -3027,12 +3015,7 @@ function updateContextProvider(
       } else {
         // The context value changed. Search for matching consumers and schedule
         // them to update.
-        propagateContextChange(
-          workInProgress,
-          context,
-          changedBits,
-          renderLanes,
-        );
+        propagateContextChange(workInProgress, context, renderLanes);
       }
     }
   }
@@ -3090,7 +3073,7 @@ function updateContextConsumer(
   }
 
   prepareToReadContext(workInProgress, renderLanes);
-  const newValue = readContext(context, newProps.unstable_observedBits);
+  const newValue = readContext(context);
   let newChildren;
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 822b299d06ca..9ca4e4afad44 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -160,7 +160,6 @@ import {
   checkIfContextChanged,
   readContext,
   prepareToReadContext,
-  calculateChangedBits,
   scheduleWorkOnParentPath,
 } from './ReactFiberNewContext.old';
 import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.old';
@@ -221,7 +220,7 @@ import {
   restoreSpawnedCachePool,
   getOffscreenDeferredCachePool,
 } from './ReactFiberCacheComponent.old';
-import {MAX_SIGNED_31_BIT_INT} from './MaxInts';
+import is from 'shared/objectIs';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
@@ -795,12 +794,7 @@ function updateCacheComponent(
       pushCacheProvider(workInProgress, nextCache);
       if (nextCache !== prevState.cache) {
         // This cache refreshed. Propagate a context change.
-        propagateContextChange(
-          workInProgress,
-          CacheContext,
-          MAX_SIGNED_31_BIT_INT,
-          renderLanes,
-        );
+        propagateContextChange(workInProgress, CacheContext, renderLanes);
       }
     }
   }
@@ -1169,12 +1163,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
-      propagateContextChange(
-        workInProgress,
-        CacheContext,
-        MAX_SIGNED_31_BIT_INT,
-        renderLanes,
-      );
+      propagateContextChange(workInProgress, CacheContext, renderLanes);
     }
   }
 
@@ -3011,8 +3000,7 @@ function updateContextProvider(
   } else {
     if (oldProps !== null) {
       const oldValue = oldProps.value;
-      const changedBits = calculateChangedBits(context, newValue, oldValue);
-      if (changedBits === 0) {
+      if (is(oldValue, newValue)) {
         // No change. Bailout early if children are the same.
         if (
           oldProps.children === newProps.children &&
@@ -3027,12 +3015,7 @@ function updateContextProvider(
       } else {
         // The context value changed. Search for matching consumers and schedule
         // them to update.
-        propagateContextChange(
-          workInProgress,
-          context,
-          changedBits,
-          renderLanes,
-        );
+        propagateContextChange(workInProgress, context, renderLanes);
       }
     }
   }
@@ -3090,7 +3073,7 @@ function updateContextConsumer(
   }
 
   prepareToReadContext(workInProgress, renderLanes);
-  const newValue = readContext(context, newProps.unstable_observedBits);
+  const newValue = readContext(context);
   let newChildren;
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index b5ae3ccc611a..042a8b2efc09 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -37,7 +37,6 @@ export const CacheContext: ReactContext<Cache> = enableCache
       // We don't use Consumer/Provider for Cache components. So we'll cheat.
       Consumer: (null: any),
       Provider: (null: any),
-      _calculateChangedBits: null,
       // We'll initialize these at the root.
       _currentValue: (null: any),
       _currentValue2: (null: any),
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index 8882f7dbd2d4..2bc64254d309 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -37,7 +37,6 @@ export const CacheContext: ReactContext<Cache> = enableCache
       // We don't use Consumer/Provider for Cache components. So we'll cheat.
       Consumer: (null: any),
       Provider: (null: any),
-      _calculateChangedBits: null,
       // We'll initialize these at the root.
       _currentValue: (null: any),
       _currentValue2: (null: any),
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 00afb7daefdd..9a94ed1536d3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2191,11 +2191,8 @@ if (__DEV__) {
   };
 
   HooksDispatcherOnMountInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
@@ -2203,13 +2200,10 @@ if (__DEV__) {
       checkDepsAreArrayDev(deps);
       return mountCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       mountHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2326,24 +2320,18 @@ if (__DEV__) {
   }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       updateHookTypesDev();
       return mountCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2456,24 +2444,18 @@ if (__DEV__) {
   }
 
   HooksDispatcherOnUpdateInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2586,11 +2568,8 @@ if (__DEV__) {
   }
 
   HooksDispatcherOnRerenderInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
 
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
@@ -2598,13 +2577,10 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2717,12 +2693,9 @@ if (__DEV__) {
   }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    readContext<T>(context: ReactContext<T>): T {
       warnInvalidContextAccess();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
@@ -2730,14 +2703,11 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       warnInvalidHookAccess();
       mountHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2862,12 +2832,9 @@ if (__DEV__) {
   }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    readContext<T>(context: ReactContext<T>): T {
       warnInvalidContextAccess();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
@@ -2875,14 +2842,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -3007,12 +2971,9 @@ if (__DEV__) {
   }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    readContext<T>(context: ReactContext<T>): T {
       warnInvalidContextAccess();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
 
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
@@ -3021,14 +2982,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 3f60972dcd51..d705a58658d1 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2191,11 +2191,8 @@ if (__DEV__) {
   };
 
   HooksDispatcherOnMountInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
@@ -2203,13 +2200,10 @@ if (__DEV__) {
       checkDepsAreArrayDev(deps);
       return mountCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       mountHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2326,24 +2320,18 @@ if (__DEV__) {
   }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       updateHookTypesDev();
       return mountCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2456,24 +2444,18 @@ if (__DEV__) {
   }
 
   HooksDispatcherOnUpdateInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2586,11 +2568,8 @@ if (__DEV__) {
   }
 
   HooksDispatcherOnRerenderInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
-      return readContext(context, observedBits);
+    readContext<T>(context: ReactContext<T>): T {
+      return readContext(context);
     },
 
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
@@ -2598,13 +2577,10 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2717,12 +2693,9 @@ if (__DEV__) {
   }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    readContext<T>(context: ReactContext<T>): T {
       warnInvalidContextAccess();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
@@ -2730,14 +2703,11 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       warnInvalidHookAccess();
       mountHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -2862,12 +2832,9 @@ if (__DEV__) {
   }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    readContext<T>(context: ReactContext<T>): T {
       warnInvalidContextAccess();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
       currentHookNameInDev = 'useCallback';
@@ -2875,14 +2842,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
@@ -3007,12 +2971,9 @@ if (__DEV__) {
   }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
-    readContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    readContext<T>(context: ReactContext<T>): T {
       warnInvalidContextAccess();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
 
     useCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
@@ -3021,14 +2982,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateCallback(callback, deps);
     },
-    useContext<T>(
-      context: ReactContext<T>,
-      observedBits: void | number | boolean,
-    ): T {
+    useContext<T>(context: ReactContext<T>): T {
       currentHookNameInDev = 'useContext';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return readContext(context, observedBits);
+      return readContext(context);
     },
     useEffect(
       create: () => (() => void) | void,
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 29a1eeef8cdd..9d2484a78397 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -19,7 +19,6 @@ import type {SharedQueue} from './ReactUpdateQueue.new';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
-import {MAX_SIGNED_31_BIT_INT} from './MaxInts';
 import {
   ContextProvider,
   ClassComponent,
@@ -58,7 +57,7 @@ if (__DEV__) {
 
 let currentlyRenderingFiber: Fiber | null = null;
 let lastContextDependency: ContextDependency<mixed> | null = null;
-let lastContextWithAllBitsObserved: ReactContext<any> | null = null;
+let lastFullyObservedContext: ReactContext<any> | null = null;
 
 let isDisallowedContextReadInDEV: boolean = false;
 
@@ -67,7 +66,7 @@ export function resetContextDependencies(): void {
   // cannot be called outside the render phase.
   currentlyRenderingFiber = null;
   lastContextDependency = null;
-  lastContextWithAllBitsObserved = null;
+  lastFullyObservedContext = null;
   if (__DEV__) {
     isDisallowedContextReadInDEV = false;
   }
@@ -140,33 +139,6 @@ export function popProvider(
   }
 }
 
-export function calculateChangedBits<T>(
-  context: ReactContext<T>,
-  newValue: T,
-  oldValue: T,
-) {
-  if (is(oldValue, newValue)) {
-    // No change
-    return 0;
-  } else {
-    const changedBits =
-      typeof context._calculateChangedBits === 'function'
-        ? context._calculateChangedBits(oldValue, newValue)
-        : MAX_SIGNED_31_BIT_INT;
-
-    if (__DEV__) {
-      if ((changedBits & MAX_SIGNED_31_BIT_INT) !== changedBits) {
-        console.error(
-          'calculateChangedBits: Expected the return value to be a ' +
-            '31-bit integer. Instead received: %s',
-          changedBits,
-        );
-      }
-    }
-    return changedBits | 0;
-  }
-}
-
 export function scheduleWorkOnParentPath(
   parent: Fiber | null,
   renderLanes: Lanes,
@@ -197,7 +169,6 @@ export function scheduleWorkOnParentPath(
 export function propagateContextChange<T>(
   workInProgress: Fiber,
   context: ReactContext<T>,
-  changedBits: number,
   renderLanes: Lanes,
 ): void {
   if (enableLazyContextPropagation) {
@@ -207,24 +178,18 @@ export function propagateContextChange<T>(
     const forcePropagateEntireTree = true;
     propagateContextChanges(
       workInProgress,
-      [context, changedBits],
+      [context],
       renderLanes,
       forcePropagateEntireTree,
     );
   } else {
-    propagateContextChange_eager(
-      workInProgress,
-      context,
-      changedBits,
-      renderLanes,
-    );
+    propagateContextChange_eager(workInProgress, context, renderLanes);
   }
 }
 
 function propagateContextChange_eager<T>(
   workInProgress: Fiber,
   context: ReactContext<T>,
-  changedBits: number,
   renderLanes: Lanes,
 ): void {
   // Only used by eager implemenation
@@ -247,10 +212,7 @@ function propagateContextChange_eager<T>(
       let dependency = list.firstContext;
       while (dependency !== null) {
         // Check if the context matches.
-        if (
-          dependency.context === context &&
-          (dependency.observedBits & changedBits) !== 0
-        ) {
+        if (dependency.context === context) {
           // Match! Schedule an update on this fiber.
           if (fiber.tag === ClassComponent) {
             // Schedule a force update on the work-in-progress.
@@ -382,15 +344,11 @@ function propagateContextChanges<T>(
         // Assigning these to constants to help Flow
         const dependency = dep;
         const consumer = fiber;
-        findContext: for (let i = 0; i < contexts.length; i += 2) {
+        findContext: for (let i = 0; i < contexts.length; i++) {
           const context: ReactContext<T> = contexts[i];
-          const changedBits: number = contexts[i + 1];
           // Check if the context matches.
           // TODO: Compare selected values to bail out early.
-          if (
-            dependency.context === context &&
-            (dependency.observedBits & changedBits) !== 0
-          ) {
+          if (dependency.context === context) {
             // Match! Schedule an update on this fiber.
 
             // In the lazy implemenation, don't mark a dirty flag on the
@@ -549,12 +507,11 @@ function propagateParentContextChanges(
 
         const oldValue = oldProps.value;
 
-        const changedBits = calculateChangedBits(context, newValue, oldValue);
-        if (changedBits !== 0) {
+        if (!is(newValue, oldValue)) {
           if (contexts !== null) {
-            contexts.push(context, changedBits);
+            contexts.push(context);
           } else {
-            contexts = [context, changedBits];
+            contexts = [context];
           }
         }
       }
@@ -625,7 +582,7 @@ export function prepareToReadContext(
 ): void {
   currentlyRenderingFiber = workInProgress;
   lastContextDependency = null;
-  lastContextWithAllBitsObserved = null;
+  lastFullyObservedContext = null;
 
   const dependencies = workInProgress.dependencies;
   if (dependencies !== null) {
@@ -646,10 +603,7 @@ export function prepareToReadContext(
   }
 }
 
-export function readContext<T>(
-  context: ReactContext<T>,
-  observedBits: void | number | boolean,
-): T {
+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.
@@ -667,26 +621,11 @@ export function readContext<T>(
     ? context._currentValue
     : context._currentValue2;
 
-  if (lastContextWithAllBitsObserved === context) {
+  if (lastFullyObservedContext === context) {
     // Nothing to do. We already observe everything in this context.
-  } else if (observedBits === false || observedBits === 0) {
-    // Do not observe any updates.
   } else {
-    let resolvedObservedBits; // Avoid deopting on observable arguments or heterogeneous types.
-    if (
-      typeof observedBits !== 'number' ||
-      observedBits === MAX_SIGNED_31_BIT_INT
-    ) {
-      // Observe all updates.
-      lastContextWithAllBitsObserved = ((context: any): ReactContext<mixed>);
-      resolvedObservedBits = MAX_SIGNED_31_BIT_INT;
-    } else {
-      resolvedObservedBits = observedBits;
-    }
-
     const contextItem = {
       context: ((context: any): ReactContext<mixed>),
-      observedBits: resolvedObservedBits,
       memoizedValue: value,
       next: null,
     };
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 0e6ed587b8dd..c2a160065011 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -19,7 +19,6 @@ import type {SharedQueue} from './ReactUpdateQueue.old';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
-import {MAX_SIGNED_31_BIT_INT} from './MaxInts';
 import {
   ContextProvider,
   ClassComponent,
@@ -58,7 +57,7 @@ if (__DEV__) {
 
 let currentlyRenderingFiber: Fiber | null = null;
 let lastContextDependency: ContextDependency<mixed> | null = null;
-let lastContextWithAllBitsObserved: ReactContext<any> | null = null;
+let lastFullyObservedContext: ReactContext<any> | null = null;
 
 let isDisallowedContextReadInDEV: boolean = false;
 
@@ -67,7 +66,7 @@ export function resetContextDependencies(): void {
   // cannot be called outside the render phase.
   currentlyRenderingFiber = null;
   lastContextDependency = null;
-  lastContextWithAllBitsObserved = null;
+  lastFullyObservedContext = null;
   if (__DEV__) {
     isDisallowedContextReadInDEV = false;
   }
@@ -140,33 +139,6 @@ export function popProvider(
   }
 }
 
-export function calculateChangedBits<T>(
-  context: ReactContext<T>,
-  newValue: T,
-  oldValue: T,
-) {
-  if (is(oldValue, newValue)) {
-    // No change
-    return 0;
-  } else {
-    const changedBits =
-      typeof context._calculateChangedBits === 'function'
-        ? context._calculateChangedBits(oldValue, newValue)
-        : MAX_SIGNED_31_BIT_INT;
-
-    if (__DEV__) {
-      if ((changedBits & MAX_SIGNED_31_BIT_INT) !== changedBits) {
-        console.error(
-          'calculateChangedBits: Expected the return value to be a ' +
-            '31-bit integer. Instead received: %s',
-          changedBits,
-        );
-      }
-    }
-    return changedBits | 0;
-  }
-}
-
 export function scheduleWorkOnParentPath(
   parent: Fiber | null,
   renderLanes: Lanes,
@@ -197,7 +169,6 @@ export function scheduleWorkOnParentPath(
 export function propagateContextChange<T>(
   workInProgress: Fiber,
   context: ReactContext<T>,
-  changedBits: number,
   renderLanes: Lanes,
 ): void {
   if (enableLazyContextPropagation) {
@@ -207,24 +178,18 @@ export function propagateContextChange<T>(
     const forcePropagateEntireTree = true;
     propagateContextChanges(
       workInProgress,
-      [context, changedBits],
+      [context],
       renderLanes,
       forcePropagateEntireTree,
     );
   } else {
-    propagateContextChange_eager(
-      workInProgress,
-      context,
-      changedBits,
-      renderLanes,
-    );
+    propagateContextChange_eager(workInProgress, context, renderLanes);
   }
 }
 
 function propagateContextChange_eager<T>(
   workInProgress: Fiber,
   context: ReactContext<T>,
-  changedBits: number,
   renderLanes: Lanes,
 ): void {
   // Only used by eager implemenation
@@ -247,10 +212,7 @@ function propagateContextChange_eager<T>(
       let dependency = list.firstContext;
       while (dependency !== null) {
         // Check if the context matches.
-        if (
-          dependency.context === context &&
-          (dependency.observedBits & changedBits) !== 0
-        ) {
+        if (dependency.context === context) {
           // Match! Schedule an update on this fiber.
           if (fiber.tag === ClassComponent) {
             // Schedule a force update on the work-in-progress.
@@ -382,15 +344,11 @@ function propagateContextChanges<T>(
         // Assigning these to constants to help Flow
         const dependency = dep;
         const consumer = fiber;
-        findContext: for (let i = 0; i < contexts.length; i += 2) {
+        findContext: for (let i = 0; i < contexts.length; i++) {
           const context: ReactContext<T> = contexts[i];
-          const changedBits: number = contexts[i + 1];
           // Check if the context matches.
           // TODO: Compare selected values to bail out early.
-          if (
-            dependency.context === context &&
-            (dependency.observedBits & changedBits) !== 0
-          ) {
+          if (dependency.context === context) {
             // Match! Schedule an update on this fiber.
 
             // In the lazy implemenation, don't mark a dirty flag on the
@@ -549,12 +507,11 @@ function propagateParentContextChanges(
 
         const oldValue = oldProps.value;
 
-        const changedBits = calculateChangedBits(context, newValue, oldValue);
-        if (changedBits !== 0) {
+        if (!is(newValue, oldValue)) {
           if (contexts !== null) {
-            contexts.push(context, changedBits);
+            contexts.push(context);
           } else {
-            contexts = [context, changedBits];
+            contexts = [context];
           }
         }
       }
@@ -625,7 +582,7 @@ export function prepareToReadContext(
 ): void {
   currentlyRenderingFiber = workInProgress;
   lastContextDependency = null;
-  lastContextWithAllBitsObserved = null;
+  lastFullyObservedContext = null;
 
   const dependencies = workInProgress.dependencies;
   if (dependencies !== null) {
@@ -646,10 +603,7 @@ export function prepareToReadContext(
   }
 }
 
-export function readContext<T>(
-  context: ReactContext<T>,
-  observedBits: void | number | boolean,
-): T {
+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.
@@ -667,26 +621,11 @@ export function readContext<T>(
     ? context._currentValue
     : context._currentValue2;
 
-  if (lastContextWithAllBitsObserved === context) {
+  if (lastFullyObservedContext === context) {
     // Nothing to do. We already observe everything in this context.
-  } else if (observedBits === false || observedBits === 0) {
-    // Do not observe any updates.
   } else {
-    let resolvedObservedBits; // Avoid deopting on observable arguments or heterogeneous types.
-    if (
-      typeof observedBits !== 'number' ||
-      observedBits === MAX_SIGNED_31_BIT_INT
-    ) {
-      // Observe all updates.
-      lastContextWithAllBitsObserved = ((context: any): ReactContext<mixed>);
-      resolvedObservedBits = MAX_SIGNED_31_BIT_INT;
-    } else {
-      resolvedObservedBits = observedBits;
-    }
-
     const contextItem = {
       context: ((context: any): ReactContext<mixed>),
-      observedBits: resolvedObservedBits,
       memoizedValue: value,
       next: null,
     };
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index b1764bed5ac3..e5fd43e6f416 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -49,7 +49,6 @@ export type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
 
 export type ContextDependency<T> = {
   context: ReactContext<T>,
-  observedBits: number,
   next: ContextDependency<mixed> | null,
   memoizedValue: T,
   ...
@@ -281,20 +280,14 @@ type Dispatch<A> = A => void;
 
 export type Dispatcher = {|
   getCacheForType?: <T>(resourceType: () => T) => T,
-  readContext<T>(
-    context: ReactContext<T>,
-    observedBits: void | number | boolean,
-  ): 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>,
-    observedBits: void | number | boolean,
-  ): T,
+  useContext<T>(context: ReactContext<T>): T,
   useRef<T>(initialValue: T): {|current: T|},
   useEffect(
     create: () => (() => void) | void,
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index 43c1e0033c2f..4f64972715ac 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -35,11 +35,11 @@ describe('ReactNewContext', () => {
     return {type: 'span', children: [], prop, hidden: false};
   }
 
-  function readContext(Context, observedBits) {
+  function readContext(Context) {
     const dispatcher =
       React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .ReactCurrentDispatcher.current;
-    return dispatcher.readContext(Context, observedBits);
+    return dispatcher.readContext(Context);
   }
 
   // Note: This is based on a similar component we use in www. We can delete
@@ -62,48 +62,21 @@ describe('ReactNewContext', () => {
     'useContext inside function component',
     Context =>
       function Consumer(props) {
-        const observedBits = props.unstable_observedBits;
-        let contextValue;
-        expect(() => {
-          contextValue = useContext(Context, observedBits);
-        }).toErrorDev(
-          observedBits !== undefined
-            ? 'useContext() second argument is reserved for future use in React. ' +
-                `Passing it is not supported. You passed: ${observedBits}.`
-            : [],
-        );
+        const contextValue = useContext(Context);
         const render = props.children;
         return render(contextValue);
       },
   );
   sharedContextTests('useContext inside forwardRef component', Context =>
     React.forwardRef(function Consumer(props, ref) {
-      const observedBits = props.unstable_observedBits;
-      let contextValue;
-      expect(() => {
-        contextValue = useContext(Context, observedBits);
-      }).toErrorDev(
-        observedBits !== undefined
-          ? 'useContext() second argument is reserved for future use in React. ' +
-              `Passing it is not supported. You passed: ${observedBits}.`
-          : [],
-      );
+      const contextValue = useContext(Context);
       const render = props.children;
       return render(contextValue);
     }),
   );
   sharedContextTests('useContext inside memoized function component', Context =>
     React.memo(function Consumer(props) {
-      const observedBits = props.unstable_observedBits;
-      let contextValue;
-      expect(() => {
-        contextValue = useContext(Context, observedBits);
-      }).toErrorDev(
-        observedBits !== undefined
-          ? 'useContext() second argument is reserved for future use in React. ' +
-              `Passing it is not supported. You passed: ${observedBits}.`
-          : [],
-      );
+      const contextValue = useContext(Context);
       const render = props.children;
       return render(contextValue);
     }),
@@ -113,8 +86,7 @@ describe('ReactNewContext', () => {
     Context =>
       class Consumer extends React.Component {
         render() {
-          const observedBits = this.props.unstable_observedBits;
-          const contextValue = readContext(Context, observedBits);
+          const contextValue = readContext(Context);
           const render = this.props.children;
           return render(contextValue);
         }
@@ -125,8 +97,7 @@ describe('ReactNewContext', () => {
     Context =>
       class Consumer extends React.PureComponent {
         render() {
-          const observedBits = this.props.unstable_observedBits;
-          const contextValue = readContext(Context, observedBits);
+          const contextValue = readContext(Context);
           const render = this.props.children;
           return render(contextValue);
         }
@@ -590,227 +561,6 @@ describe('ReactNewContext', () => {
         ]);
       });
 
-      it('can skip consumers with bitmask', () => {
-        const Context = React.createContext({foo: 0, bar: 0}, (a, b) => {
-          let result = 0;
-          if (a.foo !== b.foo) {
-            result |= 0b01;
-          }
-          if (a.bar !== b.bar) {
-            result |= 0b10;
-          }
-          return result;
-        });
-        const Consumer = getConsumer(Context);
-
-        function Provider(props) {
-          return (
-            <Context.Provider value={{foo: props.foo, bar: props.bar}}>
-              {props.children}
-            </Context.Provider>
-          );
-        }
-
-        function Foo() {
-          return (
-            <Consumer unstable_observedBits={0b01}>
-              {value => {
-                Scheduler.unstable_yieldValue('Foo');
-                return <span prop={'Foo: ' + value.foo} />;
-              }}
-            </Consumer>
-          );
-        }
-
-        function Bar() {
-          return (
-            <Consumer unstable_observedBits={0b10}>
-              {value => {
-                Scheduler.unstable_yieldValue('Bar');
-                return <span prop={'Bar: ' + value.bar} />;
-              }}
-            </Consumer>
-          );
-        }
-
-        class Indirection extends React.Component {
-          shouldComponentUpdate() {
-            return false;
-          }
-          render() {
-            return this.props.children;
-          }
-        }
-
-        function App(props) {
-          return (
-            <Provider foo={props.foo} bar={props.bar}>
-              <Indirection>
-                <Indirection>
-                  <Foo />
-                </Indirection>
-                <Indirection>
-                  <Bar />
-                </Indirection>
-              </Indirection>
-            </Provider>
-          );
-        }
-
-        ReactNoop.render(<App foo={1} bar={1} />);
-        expect(Scheduler).toFlushAndYield(['Foo', 'Bar']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 1'),
-          span('Bar: 1'),
-        ]);
-
-        // Update only foo
-        ReactNoop.render(<App foo={2} bar={1} />);
-        expect(Scheduler).toFlushAndYield(['Foo']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 2'),
-          span('Bar: 1'),
-        ]);
-
-        // Update only bar
-        ReactNoop.render(<App foo={2} bar={2} />);
-        expect(Scheduler).toFlushAndYield(['Bar']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 2'),
-          span('Bar: 2'),
-        ]);
-
-        // Update both
-        ReactNoop.render(<App foo={3} bar={3} />);
-        expect(Scheduler).toFlushAndYield(['Foo', 'Bar']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 3'),
-          span('Bar: 3'),
-        ]);
-      });
-
-      // @gate !enableLazyContextPropagation
-      it('can skip parents with bitmask bailout while updating their children', () => {
-        const Context = React.createContext({foo: 0, bar: 0}, (a, b) => {
-          let result = 0;
-          if (a.foo !== b.foo) {
-            result |= 0b01;
-          }
-          if (a.bar !== b.bar) {
-            result |= 0b10;
-          }
-          return result;
-        });
-        const Consumer = getConsumer(Context);
-
-        function Provider(props) {
-          return (
-            <Context.Provider value={{foo: props.foo, bar: props.bar}}>
-              {props.children}
-            </Context.Provider>
-          );
-        }
-
-        function Foo(props) {
-          return (
-            <Consumer unstable_observedBits={0b01}>
-              {value => {
-                Scheduler.unstable_yieldValue('Foo');
-                return (
-                  <>
-                    <span prop={'Foo: ' + value.foo} />
-                    {props.children && props.children()}
-                  </>
-                );
-              }}
-            </Consumer>
-          );
-        }
-
-        function Bar(props) {
-          return (
-            <Consumer unstable_observedBits={0b10}>
-              {value => {
-                Scheduler.unstable_yieldValue('Bar');
-                return (
-                  <>
-                    <span prop={'Bar: ' + value.bar} />
-                    {props.children && props.children()}
-                  </>
-                );
-              }}
-            </Consumer>
-          );
-        }
-
-        class Indirection extends React.Component {
-          shouldComponentUpdate() {
-            return false;
-          }
-          render() {
-            return this.props.children;
-          }
-        }
-
-        function App(props) {
-          return (
-            <Provider foo={props.foo} bar={props.bar}>
-              <Indirection>
-                <Foo>
-                  {/* Use a render prop so we don't test constant elements. */}
-                  {() => (
-                    <Indirection>
-                      <Bar>
-                        {() => (
-                          <Indirection>
-                            <Foo />
-                          </Indirection>
-                        )}
-                      </Bar>
-                    </Indirection>
-                  )}
-                </Foo>
-              </Indirection>
-            </Provider>
-          );
-        }
-
-        ReactNoop.render(<App foo={1} bar={1} />);
-        expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'Foo']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 1'),
-          span('Bar: 1'),
-          span('Foo: 1'),
-        ]);
-
-        // Update only foo
-        ReactNoop.render(<App foo={2} bar={1} />);
-        expect(Scheduler).toFlushAndYield(['Foo', 'Foo']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 2'),
-          span('Bar: 1'),
-          span('Foo: 2'),
-        ]);
-
-        // Update only bar
-        ReactNoop.render(<App foo={2} bar={2} />);
-        expect(Scheduler).toFlushAndYield(['Bar']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 2'),
-          span('Bar: 2'),
-          span('Foo: 2'),
-        ]);
-
-        // Update both
-        ReactNoop.render(<App foo={3} bar={3} />);
-        expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'Foo']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Foo: 3'),
-          span('Bar: 3'),
-          span('Foo: 3'),
-        ]);
-      });
-
       it("does not re-render if there's an update in a child", () => {
         const Context = React.createContext(0);
         const Consumer = getConsumer(Context);
@@ -1063,30 +813,6 @@ describe('ReactNewContext', () => {
   }
 
   describe('Context.Provider', () => {
-    it('warns if calculateChangedBits returns larger than a 31-bit integer', () => {
-      const Context = React.createContext(
-        0,
-        (a, b) => Math.pow(2, 32) - 1, // Return 32 bit int
-      );
-
-      function App(props) {
-        return <Context.Provider value={props.value} />;
-      }
-
-      ReactNoop.render(<App value={1} />);
-      expect(Scheduler).toFlushWithoutYielding();
-
-      // Update
-      ReactNoop.render(<App value={2} />);
-
-      if (gate(flags => !flags.enableLazyContextPropagation)) {
-        expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
-          'calculateChangedBits: Expected the return value to be a 31-bit ' +
-            'integer. Instead received: 4294967295',
-        );
-      }
-    });
-
     it('warns if no value prop provided', () => {
       const Context = React.createContext();
 
@@ -1355,6 +1081,9 @@ describe('ReactNewContext', () => {
   });
 
   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', () => {
       const Context = React.createContext({foo: 0, bar: 0, baz: 0}, (a, b) => {
         let result = 0;
@@ -1517,22 +1246,6 @@ describe('ReactNewContext', () => {
   });
 
   describe('useContext', () => {
-    it('warns on array.map(useContext)', () => {
-      const Context = React.createContext(0);
-      function Foo() {
-        return [Context].map(useContext);
-      }
-      ReactNoop.render(<Foo />);
-      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
-        'useContext() second argument is reserved for future ' +
-          'use in React. Passing it is not supported. ' +
-          'You passed: 0.\n\n' +
-          'Did you call array.map(useContext)? ' +
-          'Calling Hooks inside a loop is not supported. ' +
-          'Learn more at https://reactjs.org/link/rules-of-hooks',
-      );
-    });
-
     it('throws when used in a class component', () => {
       const Context = React.createContext(0);
       class Foo extends React.Component {
diff --git a/packages/react/src/ReactContext.js b/packages/react/src/ReactContext.js
index a3c4243dd011..41065c13ef06 100644
--- a/packages/react/src/ReactContext.js
+++ b/packages/react/src/ReactContext.js
@@ -11,30 +11,12 @@ import {REACT_PROVIDER_TYPE, REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 import type {ReactContext} from 'shared/ReactTypes';
 
-export function createContext<T>(
-  defaultValue: T,
-  calculateChangedBits: ?(a: T, b: T) => number,
-): ReactContext<T> {
-  if (calculateChangedBits === undefined) {
-    calculateChangedBits = null;
-  } else {
-    if (__DEV__) {
-      if (
-        calculateChangedBits !== null &&
-        typeof calculateChangedBits !== 'function'
-      ) {
-        console.error(
-          'createContext: Expected the optional second argument to be a ' +
-            'function. Instead received: %s',
-          calculateChangedBits,
-        );
-      }
-    }
-  }
+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,
-    _calculateChangedBits: calculateChangedBits,
     // 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
@@ -66,7 +48,6 @@ export function createContext<T>(
     const Consumer = {
       $$typeof: REACT_CONTEXT_TYPE,
       _context: context,
-      _calculateChangedBits: context._calculateChangedBits,
     };
     // $FlowFixMe: Flow complains about not setting a value, which is intentional here
     Object.defineProperties(Consumer, {
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index d397d8f789f0..18920be2c8df 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -47,26 +47,9 @@ export function getCacheForType<T>(resourceType: () => T): T {
   return dispatcher.getCacheForType(resourceType);
 }
 
-export function useContext<T>(
-  Context: ReactContext<T>,
-  unstable_observedBits: number | boolean | void,
-): T {
+export function useContext<T>(Context: ReactContext<T>): T {
   const dispatcher = resolveDispatcher();
   if (__DEV__) {
-    if (unstable_observedBits !== undefined) {
-      console.error(
-        'useContext() second argument is reserved for future ' +
-          'use in React. Passing it is not supported. ' +
-          'You passed: %s.%s',
-        unstable_observedBits,
-        typeof unstable_observedBits === 'number' && Array.isArray(arguments[2])
-          ? '\n\nDid you call array.map(useContext)? ' +
-              'Calling Hooks inside a loop is not supported. ' +
-              'Learn more at https://reactjs.org/link/rules-of-hooks'
-          : '',
-      );
-    }
-
     // TODO: add a more generic warning for invalid values.
     if ((Context: any)._context !== undefined) {
       const realContext = (Context: any)._context;
@@ -85,7 +68,7 @@ export function useContext<T>(
       }
     }
   }
-  return dispatcher.useContext(Context, unstable_observedBits);
+  return dispatcher.useContext(Context);
 }
 
 export function useState<S>(
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index dc31b998ea31..19c89f77f9f1 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -49,7 +49,6 @@ export type ReactConsumer<T> = {
   ref: null,
   props: {
     children: (value: T) => ReactNodeList,
-    unstable_observedBits?: number,
     ...
   },
   ...
@@ -59,7 +58,6 @@ export type ReactContext<T> = {
   $$typeof: Symbol | number,
   Consumer: ReactContext<T>,
   Provider: ReactProviderType<T>,
-  _calculateChangedBits: ((a: T, b: T) => number) | null,
   _currentValue: T,
   _currentValue2: T,
   _threadCount: number,

From 1fafac002838ad2d75ee9eca527c356b040285ff Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 22 Mar 2021 11:05:43 -0500
Subject: [PATCH 0338/1603] Use SyncLane for discrete event hydration (#21038)

Discrete event hydration doesn't need to be interruptible, since
there's nothing higher priority than discrete events. So we can use
SyncLane instead of a special hydration lane.
---
 ...DOMServerPartialHydration-test.internal.js | 119 +++++++++---------
 ...MServerSelectiveHydration-test.internal.js |  81 ++++++------
 .../DOMPluginEventSystem-test.internal.js     |  16 +--
 .../src/ReactFiberReconciler.new.js           |   5 +-
 .../src/ReactFiberReconciler.old.js           |   5 +-
 5 files changed, 121 insertions(+), 105 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 00ed4050d6a9..5f127d37fcdd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2187,17 +2187,17 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Click meHello');
 
     // We're now partially hydrated.
-    a.click();
+    await act(async () => {
+      a.click();
+    });
     expect(clicks).toBe(0);
 
     // Resolving the promise so that rendering can complete.
-    suspend = false;
-    resolve();
-    await promise;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
     expect(clicks).toBe(1);
 
     expect(container.textContent).toBe('Hello');
@@ -2270,18 +2270,19 @@ describe('ReactDOMServerPartialHydration', () => {
     jest.runAllTimers();
 
     // We're now partially hydrated.
-    a.click();
+    await act(async () => {
+      a.click();
+    });
     // We should not have invoked the event yet because we're not
     // yet hydrated.
     expect(onEvent).toHaveBeenCalledTimes(0);
 
     // Resolving the promise so that rendering can complete.
-    suspend = false;
-    resolve();
-    await promise;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
 
     expect(onEvent).toHaveBeenCalledTimes(2);
 
@@ -2344,7 +2345,9 @@ describe('ReactDOMServerPartialHydration', () => {
     root.render(<App />);
 
     // We'll do one click before hydrating.
-    a.click();
+    await act(async () => {
+      a.click();
+    });
     // This should be delayed.
     expect(clicks).toBe(0);
 
@@ -2352,17 +2355,17 @@ describe('ReactDOMServerPartialHydration', () => {
     jest.runAllTimers();
 
     // We're now partially hydrated.
-    a.click();
+    await act(async () => {
+      a.click();
+    });
     expect(clicks).toBe(0);
 
     // Resolving the promise so that rendering can complete.
-    suspend = false;
-    resolve();
-    await promise;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
     expect(clicks).toBe(2);
 
     document.body.removeChild(container);
@@ -2436,19 +2439,19 @@ describe('ReactDOMServerPartialHydration', () => {
     jest.runAllTimers();
 
     // We're now partially hydrated.
-    a.click();
+    await act(async () => {
+      a.click();
+    });
     // We should not have invoked the event yet because we're not
     // yet hydrated.
     expect(onEvent).toHaveBeenCalledTimes(0);
 
     // Resolving the promise so that rendering can complete.
-    suspend = false;
-    resolve();
-    await promise;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
     expect(onEvent).toHaveBeenCalledTimes(2);
 
     document.body.removeChild(container);
@@ -2510,17 +2513,18 @@ describe('ReactDOMServerPartialHydration', () => {
     jest.runAllTimers();
 
     // We're now partially hydrated.
-    span.click();
+    await act(async () => {
+      span.click();
+    });
     expect(clicksOnChild).toBe(0);
     expect(clicksOnParent).toBe(0);
 
     // Resolving the promise so that rendering can complete.
-    suspend = false;
-    resolve();
-    await promise;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
 
     expect(clicksOnChild).toBe(1);
     // This will be zero due to the stopPropagation.
@@ -2589,16 +2593,17 @@ describe('ReactDOMServerPartialHydration', () => {
     Scheduler.unstable_flushAll();
 
     // The Suspense boundary is not yet hydrated.
-    a.click();
+    await act(async () => {
+      a.click();
+    });
     expect(clicks).toBe(0);
 
     // Resolving the promise so that rendering can complete.
-    suspend = false;
-    resolve();
-    await promise;
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
 
     // We're now full hydrated.
 
@@ -2858,20 +2863,22 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Click meHello');
 
     // We're now partially hydrated.
-    form.dispatchEvent(
-      new Event('submit', {
-        bubbles: true,
-      }),
-    );
+    await act(async () => {
+      form.dispatchEvent(
+        new Event('submit', {
+          bubbles: true,
+        }),
+      );
+    });
     expect(submits).toBe(0);
 
     // Resolving the promise so that rendering can complete.
-    suspend = false;
-    resolve();
-    await promise;
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
 
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
     expect(submits).toBe(1);
     expect(container.textContent).toBe('Hello');
     document.body.removeChild(container);
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 96adf85ba35a..cadc00e886fa 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -255,22 +255,25 @@ describe('ReactDOMServerSelectiveHydration', () => {
     expect(Scheduler).toHaveYielded([]);
 
     // This click target cannot be hydrated yet because it's suspended.
-    const result = dispatchClickEvent(spanD);
-
-    expect(Scheduler).toHaveYielded(['App']);
-
-    expect(result).toBe(true);
-
-    // Continuing rendering will render B next.
-    expect(Scheduler).toFlushAndYield(['B', 'C']);
-
-    suspend = false;
-    resolve();
-    await promise;
+    await act(async () => {
+      const result = dispatchClickEvent(spanD);
+      expect(result).toBe(true);
+    });
+    expect(Scheduler).toHaveYielded([
+      'App',
+      // Continuing rendering will render B next.
+      'B',
+      'C',
+    ]);
 
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
     // After the click, we should prioritize D and the Click first,
     // and only after that render A and C.
-    expect(Scheduler).toFlushAndYield(['D', 'Clicked D', 'A']);
+    expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
 
     document.body.removeChild(container);
   });
@@ -348,13 +351,15 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     expect(Scheduler).toHaveYielded(['App']);
 
-    suspend = false;
-    resolve();
-    await promise;
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
 
     // We should prioritize hydrating A, C and D first since we clicked in
     // them. Only after they're done will we hydrate B.
-    expect(Scheduler).toFlushAndYield([
+    expect(Scheduler).toHaveYielded([
       'A',
       'Clicked A',
       'C',
@@ -506,21 +511,21 @@ describe('ReactDOMServerSelectiveHydration', () => {
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
-    const target = createEventTarget(spanD);
-    target.virtualclick();
-
-    expect(Scheduler).toHaveYielded(['App']);
-
     // Continuing rendering will render B next.
-    expect(Scheduler).toFlushAndYield(['B', 'C']);
-
-    suspend = false;
-    resolve();
-    await promise;
+    await act(async () => {
+      const target = createEventTarget(spanD);
+      target.virtualclick();
+    });
+    expect(Scheduler).toHaveYielded(['App', 'B', 'C']);
 
     // After the click, we should prioritize D and the Click first,
     // and only after that render A and C.
-    expect(Scheduler).toFlushAndYield(['D', 'Clicked D', 'A']);
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+    expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
 
     document.body.removeChild(container);
   });
@@ -602,13 +607,15 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     expect(Scheduler).toHaveYielded(['App']);
 
-    suspend = false;
-    resolve();
-    await promise;
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
 
     // We should prioritize hydrating A, C and D first since we clicked in
     // them. Only after they're done will we hydrate B.
-    expect(Scheduler).toFlushAndYield([
+    expect(Scheduler).toHaveYielded([
       'A',
       'Clicked A',
       'C',
@@ -701,9 +708,11 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     expect(Scheduler).toHaveYielded(['App']);
 
-    suspend = false;
-    resolve();
-    await promise;
+    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.
@@ -711,7 +720,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     // the same time since B was already scheduled.
     // This is ok because it will at least not continue for nested
     // boundary. See the next test below.
-    expect(Scheduler).toFlushAndYield([
+    expect(Scheduler).toHaveYielded([
       'D',
       'Clicked D',
       'B', // Ideally this should be later.
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 004f0bb631f3..3491aa7b94f1 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -67,6 +67,7 @@ describe('DOMPluginEventSystem', () => {
           ReactDOM = require('react-dom');
           Scheduler = require('scheduler');
           ReactDOMServer = require('react-dom/server');
+          act = require('react-dom/test-utils').unstable_concurrentAct;
           container = document.createElement('div');
           document.body.appendChild(container);
           startNativeEventListenerClearDown();
@@ -636,16 +637,17 @@ describe('DOMPluginEventSystem', () => {
           Scheduler.unstable_flushAll();
 
           // The Suspense boundary is not yet hydrated.
-          a.click();
+          await act(async () => {
+            a.click();
+          });
           expect(clicks).toBe(0);
 
           // Resolving the promise so that rendering can complete.
-          suspend = false;
-          resolve();
-          await promise;
-
-          Scheduler.unstable_flushAll();
-          jest.runAllTimers();
+          await act(async () => {
+            suspend = false;
+            resolve();
+            await promise;
+          });
 
           // We're now full hydrated.
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 063b70926b19..bd1f90117793 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -78,7 +78,6 @@ import {
 import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   SyncLane,
-  InputDiscreteHydrationLane,
   SelectiveHydrationLane,
   NoTimestamp,
   getHighestPriorityPendingLanes,
@@ -388,7 +387,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
       // 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 = InputDiscreteHydrationLane;
+      const retryLane = SyncLane;
       markRetryLaneIfNotHydrated(fiber, retryLane);
       break;
   }
@@ -422,7 +421,7 @@ export function attemptDiscreteHydration(fiber: Fiber): void {
     return;
   }
   const eventTime = requestEventTime();
-  const lane = InputDiscreteHydrationLane;
+  const lane = SyncLane;
   scheduleUpdateOnFiber(fiber, lane, eventTime);
   markRetryLaneIfNotHydrated(fiber, lane);
 }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 8aac687d3e38..0f0520eb7120 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -78,7 +78,6 @@ import {
 import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   SyncLane,
-  InputDiscreteHydrationLane,
   SelectiveHydrationLane,
   NoTimestamp,
   getHighestPriorityPendingLanes,
@@ -388,7 +387,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
       // 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 = InputDiscreteHydrationLane;
+      const retryLane = SyncLane;
       markRetryLaneIfNotHydrated(fiber, retryLane);
       break;
   }
@@ -422,7 +421,7 @@ export function attemptDiscreteHydration(fiber: Fiber): void {
     return;
   }
   const eventTime = requestEventTime();
-  const lane = InputDiscreteHydrationLane;
+  const lane = SyncLane;
   scheduleUpdateOnFiber(fiber, lane, eventTime);
   markRetryLaneIfNotHydrated(fiber, lane);
 }

From ca99ae97b485963249c81a933c08cb092d6ca14b Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 22 Mar 2021 12:44:19 -0400
Subject: [PATCH 0339/1603] Replace some flushExpired callsites (#20975)

---
 .../__tests__/ReactSuspense-test.internal.js  | 59 ++++++++++---------
 .../__tests__/ReactProfiler-test.internal.js  |  6 +-
 ...ofilerDevToolsIntegration-test.internal.js |  2 +-
 .../src/__tests__/SchedulerMock-test.js       |  4 +-
 packages/scheduler/src/forks/SchedulerMock.js |  1 +
 5 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 6e724fd0a567..9a9f57ccd20b 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -370,7 +370,7 @@ describe('ReactSuspense', () => {
 
     await LazyClass;
 
-    expect(Scheduler).toFlushExpired(['Hi', 'Did mount: Hi']);
+    expect(Scheduler).toFlushUntilNextPaint(['Hi', 'Did mount: Hi']);
     expect(root).toMatchRenderedOutput('Hi');
   });
 
@@ -729,7 +729,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(100);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [B:1]']);
-      expect(Scheduler).toFlushExpired([
+      expect(Scheduler).toFlushUntilNextPaint([
         'B:1',
         'Unmount [Loading...]',
         // Should be a mount, not an update
@@ -748,7 +748,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(100);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [B:2]']);
-      expect(Scheduler).toFlushExpired([
+      expect(Scheduler).toFlushUntilNextPaint([
         'B:2',
         'Unmount [Loading...]',
         'Update [B:2]',
@@ -786,7 +786,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushExpired(['A']);
+      expect(Scheduler).toFlushUntilNextPaint(['A']);
       expect(root).toMatchRenderedOutput('Stateful: 1A');
 
       root.update(<App text="B" />);
@@ -804,7 +804,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-      expect(Scheduler).toFlushExpired(['B']);
+      expect(Scheduler).toFlushUntilNextPaint(['B']);
       expect(root).toMatchRenderedOutput('Stateful: 2B');
     });
 
@@ -846,7 +846,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushExpired(['A']);
+      expect(Scheduler).toFlushUntilNextPaint(['A']);
       expect(root).toMatchRenderedOutput('Stateful: 1A');
 
       root.update(<App text="B" />);
@@ -871,7 +871,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-      expect(Scheduler).toFlushExpired(['B']);
+      expect(Scheduler).toFlushUntilNextPaint(['B']);
       expect(root).toMatchRenderedOutput('Stateful: 2B');
     });
 
@@ -951,7 +951,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(500);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushExpired(['A', 'Did commit: A']);
+      expect(Scheduler).toFlushUntilNextPaint(['A', 'Did commit: A']);
     });
 
     it('retries when an update is scheduled on a timed out tree', () => {
@@ -1038,7 +1038,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [Child 1]']);
-      expect(Scheduler).toFlushExpired([
+      expect(Scheduler).toFlushUntilNextPaint([
         'Child 1',
         'Suspend! [Child 2]',
         'Suspend! [Child 3]',
@@ -1047,12 +1047,15 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [Child 2]']);
-      expect(Scheduler).toFlushExpired(['Child 2', 'Suspend! [Child 3]']);
+      expect(Scheduler).toFlushUntilNextPaint([
+        'Child 2',
+        'Suspend! [Child 3]',
+      ]);
 
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [Child 3]']);
-      expect(Scheduler).toFlushExpired(['Child 3']);
+      expect(Scheduler).toFlushUntilNextPaint(['Child 3']);
       expect(root).toMatchRenderedOutput(
         ['Child 1', 'Child 2', 'Child 3'].join(''),
       );
@@ -1113,7 +1116,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [Tab: 0]']);
-      expect(Scheduler).toFlushExpired(['Tab: 0']);
+      expect(Scheduler).toFlushUntilNextPaint(['Tab: 0']);
       expect(root).toMatchRenderedOutput('Tab: 0 + sibling');
 
       act(() => setTab(1));
@@ -1126,7 +1129,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [Tab: 1]']);
-      expect(Scheduler).toFlushExpired(['Tab: 1']);
+      expect(Scheduler).toFlushUntilNextPaint(['Tab: 1']);
       expect(root).toMatchRenderedOutput('Tab: 1 + sibling');
 
       act(() => setTab(2));
@@ -1139,7 +1142,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [Tab: 2]']);
-      expect(Scheduler).toFlushExpired(['Tab: 2']);
+      expect(Scheduler).toFlushUntilNextPaint(['Tab: 2']);
       expect(root).toMatchRenderedOutput('Tab: 2 + sibling');
     });
 
@@ -1177,7 +1180,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [A:0]']);
-      expect(Scheduler).toFlushExpired(['A:0']);
+      expect(Scheduler).toFlushUntilNextPaint(['A:0']);
       expect(root).toMatchRenderedOutput('A:0');
 
       act(() => setStep(1));
@@ -1215,7 +1218,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushExpired([
+      expect(Scheduler).toFlushUntilNextPaint([
         'A',
         // The promises for B and C have now been thrown twice
         'Suspend! [B]',
@@ -1226,7 +1229,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-      expect(Scheduler).toFlushExpired([
+      expect(Scheduler).toFlushUntilNextPaint([
         // Even though the promise for B was thrown twice, we should only
         // re-render once.
         'B',
@@ -1238,7 +1241,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [C]']);
-      expect(Scheduler).toFlushExpired([
+      expect(Scheduler).toFlushUntilNextPaint([
         // Even though the promise for C was thrown three times, we should only
         // re-render once.
         'C',
@@ -1280,7 +1283,7 @@ describe('ReactSuspense', () => {
         jest.advanceTimersByTime(1000);
 
         expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-        expect(Scheduler).toFlushExpired([
+        expect(Scheduler).toFlushUntilNextPaint([
           'A',
           // The promises for B and C have now been thrown twice
           'Suspend! [B]',
@@ -1291,7 +1294,7 @@ describe('ReactSuspense', () => {
         jest.advanceTimersByTime(1000);
 
         expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-        expect(Scheduler).toFlushExpired([
+        expect(Scheduler).toFlushUntilNextPaint([
           // Even though the promise for B was thrown twice, we should only
           // re-render once.
           'B',
@@ -1393,7 +1396,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [default]']);
-      expect(Scheduler).toFlushExpired(['default']);
+      expect(Scheduler).toFlushUntilNextPaint(['default']);
       expect(root).toMatchRenderedOutput('default');
 
       act(() => setValue('new value'));
@@ -1401,7 +1404,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [new value]']);
-      expect(Scheduler).toFlushExpired(['new value']);
+      expect(Scheduler).toFlushUntilNextPaint(['new value']);
       expect(root).toMatchRenderedOutput('new value');
     });
 
@@ -1450,7 +1453,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [default]']);
-      expect(Scheduler).toFlushExpired(['default']);
+      expect(Scheduler).toFlushUntilNextPaint(['default']);
       expect(root).toMatchRenderedOutput('default');
 
       act(() => setValue('new value'));
@@ -1458,7 +1461,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [new value]']);
-      expect(Scheduler).toFlushExpired(['new value']);
+      expect(Scheduler).toFlushUntilNextPaint(['new value']);
       expect(root).toMatchRenderedOutput('new value');
     });
 
@@ -1506,7 +1509,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [default]']);
-      expect(Scheduler).toFlushExpired(['default']);
+      expect(Scheduler).toFlushUntilNextPaint(['default']);
       expect(root).toMatchRenderedOutput('default');
 
       act(() => setValue('new value'));
@@ -1514,7 +1517,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [new value]']);
-      expect(Scheduler).toFlushExpired(['new value']);
+      expect(Scheduler).toFlushUntilNextPaint(['new value']);
       expect(root).toMatchRenderedOutput('new value');
     });
 
@@ -1558,7 +1561,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [default]']);
-      expect(Scheduler).toFlushExpired(['default']);
+      expect(Scheduler).toFlushUntilNextPaint(['default']);
       expect(root).toMatchRenderedOutput('default');
 
       act(() => setValue('new value'));
@@ -1566,7 +1569,7 @@ describe('ReactSuspense', () => {
       jest.advanceTimersByTime(1000);
 
       expect(Scheduler).toHaveYielded(['Promise resolved [new value]']);
-      expect(Scheduler).toFlushExpired(['new value']);
+      expect(Scheduler).toFlushUntilNextPaint(['new value']);
       expect(root).toMatchRenderedOutput('new value');
     });
   });
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 93347b1ac2f9..ff2897141b57 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -4306,7 +4306,7 @@ describe('Profiler', () => {
         await resourcePromise;
 
         expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushExpired([
+        expect(Scheduler).toFlushUntilNextPaint([
           'onPostCommit',
           'AsyncText [loaded]',
         ]);
@@ -4370,7 +4370,7 @@ describe('Profiler', () => {
         await resourcePromise;
 
         expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushExpired(['onPostCommit', 'render']);
+        expect(Scheduler).toFlushUntilNextPaint(['onPostCommit', 'render']);
 
         expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
 
@@ -4575,7 +4575,7 @@ describe('Profiler', () => {
         await originalPromise;
 
         expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushExpired(['AsyncText [loaded]']);
+        expect(Scheduler).toFlushUntilNextPaint(['AsyncText [loaded]']);
         expect(renderer.toJSON()).toEqual(['loaded', 'updated']);
         expect(Scheduler).toFlushAndYield(['onPostCommit']);
 
diff --git a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
index d2f52dea1b11..33454da6649d 100644
--- a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
@@ -198,7 +198,7 @@ describe('ReactProfiler DevTools integration', () => {
     root.update(<Text text="B" />);
 
     // Update B should not instantly expire.
-    expect(Scheduler).toFlushExpired([]);
+    expect(Scheduler).toFlushAndYieldThrough([]);
 
     expect(Scheduler).toFlushAndYield(['B']);
     expect(root).toMatchRenderedOutput('B');
diff --git a/packages/scheduler/src/__tests__/SchedulerMock-test.js b/packages/scheduler/src/__tests__/SchedulerMock-test.js
index e8da8ee53d69..c4bcee206181 100644
--- a/packages/scheduler/src/__tests__/SchedulerMock-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerMock-test.js
@@ -117,14 +117,14 @@ describe('Scheduler', () => {
 
     // Advance by just a bit more to expire the user blocking callbacks
     Scheduler.unstable_advanceTime(1);
-    expect(Scheduler).toFlushExpired([
+    expect(Scheduler).toFlushAndYieldThrough([
       'B (did timeout: true)',
       'C (did timeout: true)',
     ]);
 
     // Expire A
     Scheduler.unstable_advanceTime(4600);
-    expect(Scheduler).toFlushExpired(['A (did timeout: true)']);
+    expect(Scheduler).toFlushAndYieldThrough(['A (did timeout: true)']);
 
     // Flush the rest without expiring
     expect(Scheduler).toFlushAndYield([
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index ef72933db563..9d97c425308e 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -414,6 +414,7 @@ function cancelHostTimeout(): void {
 
 function shouldYieldToHost(): boolean {
   if (
+    (expectedNumberOfYields === 0 && yieldedValues === null) ||
     (expectedNumberOfYields !== -1 &&
       yieldedValues !== null &&
       yieldedValues.length >= expectedNumberOfYields) ||

From dcdf8de7e1489fda5cee70acbd1310ee1bb0d312 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 22 Mar 2021 11:51:40 -0500
Subject: [PATCH 0340/1603] Remove discrete lanes and priorities (#21040)

We use SyncLane everywhere we used to use InputDiscreteLane or
InputDiscreteHydrationLane. So we can delete them now, along with their
associated lane priority levels.
---
 .../__tests__/preprocessData-test.internal.js | 24 +++---
 .../src/events/ReactDOMEventListener.js       |  9 +--
 .../src/ReactFiberLane.new.js                 | 79 +++++++------------
 .../src/ReactFiberLane.old.js                 | 79 +++++++------------
 .../src/ReactFiberReconciler.new.js           |  2 +-
 .../src/ReactFiberReconciler.old.js           |  2 +-
 .../src/ReactFiberWorkLoop.new.js             | 18 +----
 .../src/ReactFiberWorkLoop.old.js             | 18 +----
 .../__tests__/DebugTracing-test.internal.js   |  2 +-
 9 files changed, 75 insertions(+), 158 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index df81af097ba5..b5b3a4561e8f 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -404,7 +404,7 @@ describe(preprocessData, () => {
         {
           componentStack: '',
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.005,
           type: 'schedule-render',
         },
@@ -413,7 +413,7 @@ describe(preprocessData, () => {
           componentStack: '',
           isCascading: false,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.013,
           type: 'schedule-state-update',
         },
@@ -425,7 +425,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.004999999999999999,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.006,
           type: 'render-idle',
         },
@@ -434,7 +434,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.001,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.006,
           type: 'render',
         },
@@ -443,7 +443,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.002999999999999999,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.008,
           type: 'commit',
         },
@@ -452,7 +452,7 @@ describe(preprocessData, () => {
           depth: 1,
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.009,
           type: 'layout-effects',
         },
@@ -461,7 +461,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.002,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.012,
           type: 'passive-effects',
         },
@@ -470,7 +470,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.005000000000000001,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.015,
           type: 'render-idle',
         },
@@ -479,7 +479,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.015,
           type: 'render',
         },
@@ -488,7 +488,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.002999999999999999,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.017,
           type: 'commit',
         },
@@ -497,7 +497,7 @@ describe(preprocessData, () => {
           depth: 1,
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.018,
           type: 'layout-effects',
         },
@@ -506,7 +506,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.0009999999999999974,
           laneLabels: ['Default'],
-          lanes: [7],
+          lanes: [5],
           timestamp: 0.021,
           type: 'passive-effects',
         },
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 0869bebe330b..1c0bc724b706 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -48,14 +48,12 @@ import {
 } from './ReactDOMUpdateBatching';
 
 import {
-  InputDiscreteLanePriority as InputDiscreteLanePriority_old,
   InputContinuousLanePriority as InputContinuousLanePriority_old,
   DefaultLanePriority as DefaultLanePriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_old,
 } from 'react-reconciler/src/ReactFiberLane.old';
 import {
-  InputDiscreteLanePriority as InputDiscreteLanePriority_new,
   InputContinuousLanePriority as InputContinuousLanePriority_new,
   DefaultLanePriority as DefaultLanePriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
@@ -75,9 +73,6 @@ import {
 } from 'react-reconciler/src/SchedulerWithReactIntegration.new';
 import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.new';
 
-const InputDiscreteLanePriority = enableNewReconciler
-  ? InputDiscreteLanePriority_new
-  : InputDiscreteLanePriority_old;
 const InputContinuousLanePriority = enableNewReconciler
   ? InputContinuousLanePriority_new
   : InputContinuousLanePriority_old;
@@ -147,7 +142,7 @@ export function createEventListenerWrapperWithPriority(
   const eventPriority = getEventPriority(domEventName);
   let listenerWrapper;
   switch (eventPriority) {
-    case InputDiscreteLanePriority:
+    case SyncLanePriority:
       listenerWrapper = dispatchDiscreteEvent;
       break;
     case InputContinuousLanePriority:
@@ -412,7 +407,7 @@ export function getEventPriority(domEventName: DOMEventName): * {
     case 'popstate':
     case 'select':
     case 'selectstart':
-      return InputDiscreteLanePriority;
+      return SyncLanePriority;
     case 'drag':
     case 'dragenter':
     case 'dragexit':
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index bf5086acb943..692f799bce85 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -46,11 +46,8 @@ import {
   NoPriority as NoSchedulerPriority,
 } from './SchedulerWithReactIntegration.new';
 
-export const SyncLanePriority: LanePriority = 15;
-export const SyncBatchedLanePriority: LanePriority = 14;
-
-const InputDiscreteHydrationLanePriority: LanePriority = 13;
-export const InputDiscreteLanePriority: LanePriority = 12;
+export const SyncLanePriority: LanePriority = 13;
+export const SyncBatchedLanePriority: LanePriority = 12;
 
 const InputContinuousHydrationLanePriority: LanePriority = 11;
 export const InputContinuousLanePriority: LanePriority = 10;
@@ -83,31 +80,30 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
 
-export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
-export const InputDiscreteLane: Lanes = /*              */ 0b0000000000000000000000000001000;
-
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000010000;
-export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000100000;
-
-export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
-
-const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000100000000;
-const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111000000000;
-const TransitionLane1: Lane = /*                        */ 0b0000000000000000000001000000000;
-const TransitionLane2: Lane = /*                        */ 0b0000000000000000000010000000000;
-const TransitionLane3: Lane = /*                        */ 0b0000000000000000000100000000000;
-const TransitionLane4: Lane = /*                        */ 0b0000000000000000001000000000000;
-const TransitionLane5: Lane = /*                        */ 0b0000000000000000010000000000000;
-const TransitionLane6: Lane = /*                        */ 0b0000000000000000100000000000000;
-const TransitionLane7: Lane = /*                        */ 0b0000000000000001000000000000000;
-const TransitionLane8: Lane = /*                        */ 0b0000000000000010000000000000000;
-const TransitionLane9: Lane = /*                        */ 0b0000000000000100000000000000000;
-const TransitionLane10: Lane = /*                       */ 0b0000000000001000000000000000000;
-const TransitionLane11: Lane = /*                       */ 0b0000000000010000000000000000000;
-const TransitionLane12: Lane = /*                       */ 0b0000000000100000000000000000000;
-const TransitionLane13: Lane = /*                       */ 0b0000000001000000000000000000000;
-const TransitionLane14: Lane = /*                       */ 0b0000000010000000000000000000000;
+const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000100;
+export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000001000;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000010000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000100000;
+
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000001000000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111110000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000010000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000100000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000000000001000000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000000000010000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000000000100000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000000000001000000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000000000001000000000000000;
+const TransitionLane10: Lane = /*                       */ 0b0000000000000010000000000000000;
+const TransitionLane11: Lane = /*                       */ 0b0000000000000100000000000000000;
+const TransitionLane12: Lane = /*                       */ 0b0000000000001000000000000000000;
+const TransitionLane13: Lane = /*                       */ 0b0000000000010000000000000000000;
+const TransitionLane14: Lane = /*                       */ 0b0000000000100000000000000000000;
+const TransitionLane15: Lane = /*                       */ 0b0000000001000000000000000000000;
+const TransitionLane16: Lane = /*                       */ 0b0000000010000000000000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000111100000000000000000000000;
 const RetryLane1: Lane = /*                             */ 0b0000000100000000000000000000000;
@@ -137,12 +133,6 @@ export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
     if (lanes & SyncBatchedLane) {
       labels.push('SyncBatched');
     }
-    if (lanes & InputDiscreteHydrationLane) {
-      labels.push('InputDiscreteHydration');
-    }
-    if (lanes & InputDiscreteLane) {
-      labels.push('InputDiscrete');
-    }
     if (lanes & InputContinuousHydrationLane) {
       labels.push('InputContinuousHydration');
     }
@@ -207,12 +197,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case SyncBatchedLane:
       return_highestLanePriority = SyncBatchedLanePriority;
       return SyncBatchedLane;
-    case InputDiscreteHydrationLane:
-      return_highestLanePriority = InputDiscreteHydrationLanePriority;
-      return InputDiscreteHydrationLane;
-    case InputDiscreteLane:
-      return_highestLanePriority = InputDiscreteLanePriority;
-      return InputDiscreteLane;
     case InputContinuousHydrationLane:
       return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
@@ -242,6 +226,8 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane12:
     case TransitionLane13:
     case TransitionLane14:
+    case TransitionLane15:
+    case TransitionLane16:
       return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
@@ -281,8 +267,6 @@ export function lanePriorityToSchedulerPriority(
     case SyncLanePriority:
     case SyncBatchedLanePriority:
       return ImmediateSchedulerPriority;
-    case InputDiscreteHydrationLanePriority:
-    case InputDiscreteLanePriority:
     case InputContinuousHydrationLanePriority:
     case InputContinuousLanePriority:
       return UserBlockingSchedulerPriority;
@@ -565,8 +549,6 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
       return SyncLane;
     case SyncBatchedLanePriority:
       return SyncBatchedLane;
-    case InputDiscreteLanePriority:
-      return SyncLane;
     case InputContinuousLanePriority:
       return InputContinuousLane;
     case DefaultLanePriority:
@@ -826,11 +808,6 @@ export function getBumpedLaneForHydration(
     case SyncBatchedLanePriority:
       lane = NoLane;
       break;
-    case InputDiscreteHydrationLanePriority:
-    case InputDiscreteLanePriority:
-      lane = InputDiscreteHydrationLane;
-      break;
-    case InputContinuousHydrationLanePriority:
     case InputContinuousLanePriority:
       lane = InputContinuousHydrationLane;
       break;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index fae8239afdb6..aaf63a66403b 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -46,11 +46,8 @@ import {
   NoPriority as NoSchedulerPriority,
 } from './SchedulerWithReactIntegration.old';
 
-export const SyncLanePriority: LanePriority = 15;
-export const SyncBatchedLanePriority: LanePriority = 14;
-
-const InputDiscreteHydrationLanePriority: LanePriority = 13;
-export const InputDiscreteLanePriority: LanePriority = 12;
+export const SyncLanePriority: LanePriority = 13;
+export const SyncBatchedLanePriority: LanePriority = 12;
 
 const InputContinuousHydrationLanePriority: LanePriority = 11;
 export const InputContinuousLanePriority: LanePriority = 10;
@@ -83,31 +80,30 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
 
-export const InputDiscreteHydrationLane: Lane = /*      */ 0b0000000000000000000000000000100;
-export const InputDiscreteLane: Lanes = /*              */ 0b0000000000000000000000000001000;
-
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000010000;
-export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000100000;
-
-export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000001000000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000010000000;
-
-const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000100000000;
-const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111000000000;
-const TransitionLane1: Lane = /*                        */ 0b0000000000000000000001000000000;
-const TransitionLane2: Lane = /*                        */ 0b0000000000000000000010000000000;
-const TransitionLane3: Lane = /*                        */ 0b0000000000000000000100000000000;
-const TransitionLane4: Lane = /*                        */ 0b0000000000000000001000000000000;
-const TransitionLane5: Lane = /*                        */ 0b0000000000000000010000000000000;
-const TransitionLane6: Lane = /*                        */ 0b0000000000000000100000000000000;
-const TransitionLane7: Lane = /*                        */ 0b0000000000000001000000000000000;
-const TransitionLane8: Lane = /*                        */ 0b0000000000000010000000000000000;
-const TransitionLane9: Lane = /*                        */ 0b0000000000000100000000000000000;
-const TransitionLane10: Lane = /*                       */ 0b0000000000001000000000000000000;
-const TransitionLane11: Lane = /*                       */ 0b0000000000010000000000000000000;
-const TransitionLane12: Lane = /*                       */ 0b0000000000100000000000000000000;
-const TransitionLane13: Lane = /*                       */ 0b0000000001000000000000000000000;
-const TransitionLane14: Lane = /*                       */ 0b0000000010000000000000000000000;
+const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000100;
+export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000001000;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000010000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000100000;
+
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000001000000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111110000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000010000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000100000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000000000001000000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000000000010000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000000000100000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000000000001000000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000000000001000000000000000;
+const TransitionLane10: Lane = /*                       */ 0b0000000000000010000000000000000;
+const TransitionLane11: Lane = /*                       */ 0b0000000000000100000000000000000;
+const TransitionLane12: Lane = /*                       */ 0b0000000000001000000000000000000;
+const TransitionLane13: Lane = /*                       */ 0b0000000000010000000000000000000;
+const TransitionLane14: Lane = /*                       */ 0b0000000000100000000000000000000;
+const TransitionLane15: Lane = /*                       */ 0b0000000001000000000000000000000;
+const TransitionLane16: Lane = /*                       */ 0b0000000010000000000000000000000;
 
 const RetryLanes: Lanes = /*                            */ 0b0000111100000000000000000000000;
 const RetryLane1: Lane = /*                             */ 0b0000000100000000000000000000000;
@@ -137,12 +133,6 @@ export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
     if (lanes & SyncBatchedLane) {
       labels.push('SyncBatched');
     }
-    if (lanes & InputDiscreteHydrationLane) {
-      labels.push('InputDiscreteHydration');
-    }
-    if (lanes & InputDiscreteLane) {
-      labels.push('InputDiscrete');
-    }
     if (lanes & InputContinuousHydrationLane) {
       labels.push('InputContinuousHydration');
     }
@@ -207,12 +197,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case SyncBatchedLane:
       return_highestLanePriority = SyncBatchedLanePriority;
       return SyncBatchedLane;
-    case InputDiscreteHydrationLane:
-      return_highestLanePriority = InputDiscreteHydrationLanePriority;
-      return InputDiscreteHydrationLane;
-    case InputDiscreteLane:
-      return_highestLanePriority = InputDiscreteLanePriority;
-      return InputDiscreteLane;
     case InputContinuousHydrationLane:
       return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
@@ -242,6 +226,8 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane12:
     case TransitionLane13:
     case TransitionLane14:
+    case TransitionLane15:
+    case TransitionLane16:
       return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
@@ -281,8 +267,6 @@ export function lanePriorityToSchedulerPriority(
     case SyncLanePriority:
     case SyncBatchedLanePriority:
       return ImmediateSchedulerPriority;
-    case InputDiscreteHydrationLanePriority:
-    case InputDiscreteLanePriority:
     case InputContinuousHydrationLanePriority:
     case InputContinuousLanePriority:
       return UserBlockingSchedulerPriority;
@@ -565,8 +549,6 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
       return SyncLane;
     case SyncBatchedLanePriority:
       return SyncBatchedLane;
-    case InputDiscreteLanePriority:
-      return SyncLane;
     case InputContinuousLanePriority:
       return InputContinuousLane;
     case DefaultLanePriority:
@@ -826,11 +808,6 @@ export function getBumpedLaneForHydration(
     case SyncBatchedLanePriority:
       lane = NoLane;
       break;
-    case InputDiscreteHydrationLanePriority:
-    case InputDiscreteLanePriority:
-      lane = InputDiscreteHydrationLane;
-      break;
-    case InputContinuousHydrationLanePriority:
     case InputContinuousLanePriority:
       lane = InputContinuousHydrationLane;
       break;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index bd1f90117793..5538b131fd92 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -97,7 +97,7 @@ import {markRenderScheduled} from './SchedulingProfiler';
 // entry point, but we can't do this because of a circular dependency.
 // They are used by third-party renderers so they need to stay up to date.
 export {
-  InputDiscreteLanePriority as DiscreteEventPriority,
+  SyncLanePriority as DiscreteEventPriority,
   InputContinuousLanePriority as ContinuousEventPriority,
   DefaultLanePriority as DefaultEventPriority,
   IdleLanePriority as IdleEventPriority,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 0f0520eb7120..1e63a9999de2 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -97,7 +97,7 @@ import {markRenderScheduled} from './SchedulingProfiler';
 // entry point, but we can't do this because of a circular dependency.
 // They are used by third-party renderers so they need to stay up to date.
 export {
-  InputDiscreteLanePriority as DiscreteEventPriority,
+  SyncLanePriority as DiscreteEventPriority,
   InputContinuousLanePriority as ContinuousEventPriority,
   DefaultLanePriority as DefaultEventPriority,
   IdleLanePriority as IdleEventPriority,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b7c92ae72d70..186381b9b5cf 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -133,7 +133,6 @@ import {
   NoLanePriority,
   SyncLanePriority,
   SyncBatchedLanePriority,
-  InputDiscreteLanePriority,
   DefaultLanePriority,
   NoLanes,
   NoLane,
@@ -674,7 +673,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       // TODO: Temporary until we confirm this warning is not fired.
       if (
         existingCallbackNode == null &&
-        existingCallbackPriority !== InputDiscreteLanePriority &&
         existingCallbackPriority !== SyncLanePriority
       ) {
         console.error(
@@ -980,20 +978,6 @@ function performSyncWorkOnRoot(root) {
     exitStatus = renderRootSync(root, lanes);
   } else {
     lanes = getNextLanes(root, NoLanes);
-    // Because we don't cancel synchronous tasks, sometimes more than one
-    // synchronous task ends up being scheduled. This is an artifact of the fact
-    // that we have two different lanes that schedule sync tasks: discrete and
-    // sync. If we had only one, then (I believe) this extra check wouldn't be
-    // necessary, because there's nothing higher priority than sync that would
-    // cause us to cancel it.
-    // TODO: Merge InputDiscreteLanePriority with SyncLanePriority, then delete
-    // this bailout.
-    if (supportsMicrotasks) {
-      const nextLanesPriority = returnNextLanesPriority();
-      if (nextLanesPriority < InputDiscreteLanePriority) {
-        return null;
-      }
-    }
     exitStatus = renderRootSync(root, lanes);
   }
 
@@ -1132,7 +1116,7 @@ export function discreteUpdates<A, B, C, D, R>(
 ): R {
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
-    setCurrentUpdateLanePriority(InputDiscreteLanePriority);
+    setCurrentUpdateLanePriority(SyncLanePriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index f84e5b2eed56..ba328d5fdb44 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -133,7 +133,6 @@ import {
   NoLanePriority,
   SyncLanePriority,
   SyncBatchedLanePriority,
-  InputDiscreteLanePriority,
   DefaultLanePriority,
   NoLanes,
   NoLane,
@@ -674,7 +673,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       // TODO: Temporary until we confirm this warning is not fired.
       if (
         existingCallbackNode == null &&
-        existingCallbackPriority !== InputDiscreteLanePriority &&
         existingCallbackPriority !== SyncLanePriority
       ) {
         console.error(
@@ -980,20 +978,6 @@ function performSyncWorkOnRoot(root) {
     exitStatus = renderRootSync(root, lanes);
   } else {
     lanes = getNextLanes(root, NoLanes);
-    // Because we don't cancel synchronous tasks, sometimes more than one
-    // synchronous task ends up being scheduled. This is an artifact of the fact
-    // that we have two different lanes that schedule sync tasks: discrete and
-    // sync. If we had only one, then (I believe) this extra check wouldn't be
-    // necessary, because there's nothing higher priority than sync that would
-    // cause us to cancel it.
-    // TODO: Merge InputDiscreteLanePriority with SyncLanePriority, then delete
-    // this bailout.
-    if (supportsMicrotasks) {
-      const nextLanesPriority = returnNextLanesPriority();
-      if (nextLanesPriority < InputDiscreteLanePriority) {
-        return null;
-      }
-    }
     exitStatus = renderRootSync(root, lanes);
   }
 
@@ -1132,7 +1116,7 @@ export function discreteUpdates<A, B, C, D, R>(
 ): R {
   const previousLanePriority = getCurrentUpdateLanePriority();
   try {
-    setCurrentUpdateLanePriority(InputDiscreteLanePriority);
+    setCurrentUpdateLanePriority(SyncLanePriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdateLanePriority(previousLanePriority);
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 963660e39ca4..3191158b67d1 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -16,7 +16,7 @@ describe('DebugTracing', () => {
 
   let logs;
 
-  const DEFAULT_LANE_STRING = '0b0000000000000000000000010000000';
+  const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000';
   const RETRY_LANE_STRING = '0b0000000100000000000000000000000';
 
   beforeEach(() => {

From 6c3202b1e1a4382b91de4fdc3b9bc9ed7a77619b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 22 Mar 2021 16:10:57 -0400
Subject: [PATCH 0341/1603] [Fizz] Use identifierPrefix to avoid conflicts
 within the same response (#21037)

* Use identifierPrefix to avoid conflicts within the same response

identifierPrefix as an option exists to avoid useOpaqueIdentifier conflicting
when different renders are used within one HTML response.

This lets this be configured for the DOM renderer specifically since it's DOM
specific whether they will conflict across trees or not.

* Add test for using multiple containers in one HTML document
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 80 +++++++++++++++++++
 .../src/server/ReactDOMFizzServerBrowser.js   |  6 +-
 .../src/server/ReactDOMFizzServerNode.js      |  4 +
 .../src/server/ReactDOMServerFormatConfig.js  | 47 ++++++-----
 .../server/ReactNativeServerFormatConfig.js   |  2 +
 .../src/ReactNoopServer.js                    | 16 ++--
 packages/react-server/src/ReactFizzServer.js  |  8 +-
 .../forks/ReactServerFormatConfig.custom.js   |  1 -
 8 files changed, 133 insertions(+), 31 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 9f139dd3baf1..3a7d7205dcb2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -320,4 +320,84 @@ describe('ReactDOMFizzServer', () => {
       </div>,
     );
   });
+
+  // @gate experimental
+  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);
+    };
+
+    writable.write('<div id="container-A">');
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <Suspense fallback={<Text text="Loading A..." />}>
+          <Text text="This will show A: " />
+          <div>
+            <AsyncText text="A" />
+          </div>
+        </Suspense>,
+        writableA,
+        {identifierPrefix: 'A_'},
+      );
+      startWriting();
+    });
+    writable.write('</div>');
+
+    writable.write('<div id="container-B">');
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <Suspense fallback={<Text text="Loading B..." />}>
+          <Text text="This will show B: " />
+          <div>
+            <AsyncText text="B" />
+          </div>
+        </Suspense>,
+        writableB,
+        {identifierPrefix: 'B_'},
+      );
+      startWriting();
+    });
+    writable.write('</div>');
+
+    expect(getVisibleChildren(container)).toEqual([
+      <div id="container-A">Loading A...</div>,
+      <div id="container-B">Loading B...</div>,
+    ]);
+
+    await act(async () => {
+      resolveText('B');
+    });
+
+    expect(getVisibleChildren(container)).toEqual([
+      <div id="container-A">Loading A...</div>,
+      <div id="container-B">
+        This will show B: <div>B</div>
+      </div>,
+    ]);
+
+    await act(async () => {
+      resolveText('A');
+    });
+
+    // We're done writing both streams now.
+    writable.end();
+
+    expect(getVisibleChildren(container)).toEqual([
+      <div id="container-A">
+        This will show A: <div>A</div>
+      </div>,
+      <div id="container-B">
+        This will show B: <div>B</div>
+      </div>,
+    ]);
+  });
 });
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index b310271291e2..902989fefca0 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -16,9 +16,12 @@ import {
   abort,
 } from 'react-server/src/ReactFizzServer';
 
+import {createResponseState} from './ReactDOMServerFormatConfig';
+
 type Options = {
-  signal?: AbortSignal,
+  identifierPrefix?: string,
   progressiveChunkSize?: number,
+  signal?: AbortSignal,
 };
 
 function renderToReadableStream(
@@ -39,6 +42,7 @@ function renderToReadableStream(
       request = createRequest(
         children,
         controller,
+        createResponseState(options ? options.identifierPrefix : undefined),
         options ? options.progressiveChunkSize : undefined,
       );
       startWork(request);
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 1bc2506927db..8de76f7095f9 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -17,11 +17,14 @@ import {
   abort,
 } from 'react-server/src/ReactFizzServer';
 
+import {createResponseState} from './ReactDOMServerFormatConfig';
+
 function createDrainHandler(destination, request) {
   return () => startFlowing(request);
 }
 
 type Options = {
+  identifierPrefix?: string,
   progressiveChunkSize?: number,
 };
 
@@ -39,6 +42,7 @@ function pipeToNodeWritable(
   const request = createRequest(
     children,
     destination,
+    createResponseState(options ? options.identifierPrefix : undefined),
     options ? options.progressiveChunkSize : undefined,
   );
   let hasStartedFlowing = false;
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 250892b31d4a..e9d337724e19 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -24,6 +24,10 @@ import invariant from 'shared/invariant';
 
 // Per response,
 export type ResponseState = {
+  placeholderPrefix: PrecomputedChunk,
+  segmentPrefix: PrecomputedChunk,
+  boundaryPrefix: string,
+  opaqueIdentifierPrefix: PrecomputedChunk,
   nextSuspenseID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
@@ -31,8 +35,14 @@ export type ResponseState = {
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
-export function createResponseState(): ResponseState {
+export function createResponseState(
+  identifierPrefix: string = '',
+): ResponseState {
   return {
+    placeholderPrefix: stringToPrecomputedChunk(identifierPrefix + 'P:'),
+    segmentPrefix: stringToPrecomputedChunk(identifierPrefix + 'S:'),
+    boundaryPrefix: identifierPrefix + 'B:',
+    opaqueIdentifierPrefix: stringToPrecomputedChunk(identifierPrefix + 'R:'),
     nextSuspenseID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
@@ -68,7 +78,7 @@ function assignAnID(
   // TODO: This approach doesn't yield deterministic results since this is assigned during render.
   const generatedID = responseState.nextSuspenseID++;
   return (id.formattedID = stringToPrecomputedChunk(
-    'B:' + generatedID.toString(16),
+    responseState.boundaryPrefix + generatedID.toString(16),
   ));
 }
 
@@ -160,20 +170,19 @@ export function pushEndInstance(
 // 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.
 const placeholder1 = stringToPrecomputedChunk('<span id="');
-const placeholder2 = stringToPrecomputedChunk('P:');
-const placeholder3 = stringToPrecomputedChunk('"></span>');
+const placeholder2 = stringToPrecomputedChunk('"></span>');
 export function writePlaceholder(
   destination: Destination,
+  responseState: ResponseState,
   id: number,
 ): boolean {
   // TODO: This needs to be contextually aware and switch tag since not all parents allow for spans like
   // <select> or <tbody>. E.g. suspending a component that renders a table row.
   writeChunk(destination, placeholder1);
-  // TODO: Use the identifierPrefix option to make the prefix configurable.
-  writeChunk(destination, placeholder2);
+  writeChunk(destination, responseState.placeholderPrefix);
   const formattedID = stringToChunk(id.toString(16));
   writeChunk(destination, formattedID);
-  return writeChunk(destination, placeholder3);
+  return writeChunk(destination, placeholder2);
 }
 
 // Suspense boundaries are encoded as comments.
@@ -207,20 +216,19 @@ export function writeEndSuspenseBoundary(destination: Destination): boolean {
 }
 
 const startSegment = stringToPrecomputedChunk('<div hidden id="');
-const startSegment2 = stringToPrecomputedChunk('S:');
-const startSegment3 = stringToPrecomputedChunk('">');
+const startSegment2 = stringToPrecomputedChunk('">');
 const endSegment = stringToPrecomputedChunk('</div>');
 export function writeStartSegment(
   destination: Destination,
+  responseState: ResponseState,
   id: number,
 ): boolean {
   // TODO: What happens with special children like <tr> if they're inserted in a div? Maybe needs contextually aware containers.
   writeChunk(destination, startSegment);
-  // TODO: Use the identifierPrefix option to make the prefix configurable.
-  writeChunk(destination, startSegment2);
+  writeChunk(destination, responseState.segmentPrefix);
   const formattedID = stringToChunk(id.toString(16));
   writeChunk(destination, formattedID);
-  return writeChunk(destination, startSegment3);
+  return writeChunk(destination, startSegment2);
 }
 export function writeEndSegment(destination: Destination): boolean {
   return writeChunk(destination, endSegment);
@@ -349,12 +357,10 @@ const clientRenderFunction =
   'function $RX(b){if(b=document.getElementById(b)){do b=b.previousSibling;while(8!==b.nodeType||"$?"!==b.data);b.data="$!";b._reactRetry&&b._reactRetry()}}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
-  '<script>' + completeSegmentFunction + ';$RS("S:',
-);
-const completeSegmentScript1Partial = stringToPrecomputedChunk(
-  '<script>$RS("S:',
+  '<script>' + completeSegmentFunction + ';$RS("',
 );
-const completeSegmentScript2 = stringToPrecomputedChunk('","P:');
+const completeSegmentScript1Partial = stringToPrecomputedChunk('<script>$RS("');
+const completeSegmentScript2 = stringToPrecomputedChunk('","');
 const completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
 
 export function writeCompletedSegmentInstruction(
@@ -370,10 +376,11 @@ export function writeCompletedSegmentInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeSegmentScript1Partial);
   }
-  // TODO: Use the identifierPrefix option to make the prefix configurable.
+  writeChunk(destination, responseState.segmentPrefix);
   const formattedID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedID);
   writeChunk(destination, completeSegmentScript2);
+  writeChunk(destination, responseState.placeholderPrefix);
   writeChunk(destination, formattedID);
   return writeChunk(destination, completeSegmentScript3);
 }
@@ -384,7 +391,7 @@ const completeBoundaryScript1Full = stringToPrecomputedChunk(
 const completeBoundaryScript1Partial = stringToPrecomputedChunk(
   '<script>$RC("',
 );
-const completeBoundaryScript2 = stringToPrecomputedChunk('","S:');
+const completeBoundaryScript2 = stringToPrecomputedChunk('","');
 const completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
 
 export function writeCompletedBoundaryInstruction(
@@ -401,7 +408,6 @@ export function writeCompletedBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeBoundaryScript1Partial);
   }
-  // TODO: Use the identifierPrefix option to make the prefix configurable.
   const formattedBoundaryID = boundaryID.formattedID;
   invariant(
     formattedBoundaryID !== null,
@@ -410,6 +416,7 @@ export function writeCompletedBoundaryInstruction(
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, formattedBoundaryID);
   writeChunk(destination, completeBoundaryScript2);
+  writeChunk(destination, responseState.segmentPrefix);
   writeChunk(destination, formattedContentID);
   return writeChunk(destination, completeBoundaryScript3);
 }
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index e8f6b9e14aff..d89fafea818e 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -145,6 +145,7 @@ function formatID(id: number): Uint8Array {
 // display. It's never visible to users.
 export function writePlaceholder(
   destination: Destination,
+  responseState: ResponseState,
   id: number,
 ): boolean {
   writeChunk(destination, PLACEHOLDER);
@@ -179,6 +180,7 @@ export function writeEndSuspenseBoundary(destination: Destination): boolean {
 
 export function writeStartSegment(
   destination: Destination,
+  responseState: ResponseState,
   id: number,
 ): boolean {
   writeChunk(destination, SEGMENT);
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 99392ebed6db..d2a4bf032933 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -77,9 +77,6 @@ const ReactNoopServer = ReactFizzServer({
   closeWithError(destination: Destination, error: mixed): void {},
   flushBuffered(destination: Destination): void {},
 
-  createResponseState(): null {
-    return null;
-  },
   createSuspenseBoundaryID(): SuspenseInstance {
     // The ID is a pointer to the boundary itself.
     return {state: 'pending', children: []};
@@ -114,7 +111,11 @@ const ReactNoopServer = ReactFizzServer({
     target.push(POP);
   },
 
-  writePlaceholder(destination: Destination, id: number): boolean {
+  writePlaceholder(
+    destination: Destination,
+    responseState: ResponseState,
+    id: number,
+  ): boolean {
     const parent = destination.stack[destination.stack.length - 1];
     destination.placeholders.set(id, {
       parent: parent,
@@ -153,7 +154,11 @@ const ReactNoopServer = ReactFizzServer({
     destination.stack.pop();
   },
 
-  writeStartSegment(destination: Destination, id: number): boolean {
+  writeStartSegment(
+    destination: Destination,
+    responseState: ResponseState,
+    id: number,
+  ): boolean {
     const segment = {
       children: [],
     };
@@ -227,6 +232,7 @@ function render(children: React$Element<any>, options?: Options): Destination {
   const request = ReactNoopServer.createRequest(
     children,
     destination,
+    null,
     options ? options.progressiveChunkSize : undefined,
   );
   ReactNoopServer.startWork(request);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 54049da40b39..265bfb89c24f 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -44,7 +44,6 @@ import {
   pushStartInstance,
   pushEndInstance,
   createSuspenseBoundaryID,
-  createResponseState,
 } from './ReactServerFormatConfig';
 import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -133,13 +132,14 @@ const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
 export function createRequest(
   children: ReactNodeList,
   destination: Destination,
+  responseState: ResponseState,
   progressiveChunkSize: number = DEFAULT_PROGRESSIVE_CHUNK_SIZE,
 ): Request {
   const pingedWork = [];
   const abortSet: Set<SuspendedWork> = new Set();
   const request = {
     destination,
-    responseState: createResponseState(),
+    responseState,
     progressiveChunkSize,
     status: BUFFERING,
     nextSegmentId: 0,
@@ -590,7 +590,7 @@ function flushSubtree(
       // 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.
       const segmentID = (segment.id = request.nextSegmentId++);
-      return writePlaceholder(destination, segmentID);
+      return writePlaceholder(destination, request.responseState, segmentID);
     }
     case COMPLETED: {
       segment.status = FLUSHED;
@@ -712,7 +712,7 @@ function flushSegmentContainer(
   destination: Destination,
   segment: Segment,
 ): boolean {
-  writeStartSegment(destination, segment.id);
+  writeStartSegment(destination, request.responseState, segment.id);
   flushSegment(request, destination, segment);
   return writeEndSegment(destination);
 }
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 3f3688ad4fb8..76219e1a0748 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -28,7 +28,6 @@ export opaque type Destination = mixed; // eslint-disable-line no-undef
 export opaque type ResponseState = mixed;
 export opaque type SuspenseBoundaryID = mixed;
 
-export const createResponseState = $$$hostConfig.createResponseState;
 export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
 export const pushEmpty = $$$hostConfig.pushEmpty;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;

From a5c3baeecda9468ae7b6d4d32a541026c15bc6de Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 22 Mar 2021 21:04:13 +0000
Subject: [PATCH 0342/1603] Fix a broken link

---
 scripts/release/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/release/README.md b/scripts/release/README.md
index 9fdde592927b..befc605b9be2 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -8,7 +8,7 @@ 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 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

From cc1a46dfd220edf2e5f001cbd5ba5fa049dc09b2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 22 Mar 2021 21:57:59 +0000
Subject: [PATCH 0343/1603] React 17.0.2 Changelog (#21052)

## 17.0.2 (March 22, 2020)

### 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))
---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b84fad6adbfa..21afaccd778e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 17.0.2 (March 22, 2020)
+
+### 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

From 8fe7810e70b00d6616c345954740045e4ad17cdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 22 Mar 2021 18:41:22 -0400
Subject: [PATCH 0344/1603] Remove already completed comment (#21054)

---
 packages/react-server/src/ReactFizzServer.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 265bfb89c24f..a52079c1587c 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -908,9 +908,6 @@ function flushCompletedQueues(request: Request): void {
   }
 }
 
-// TODO: Expose a way to abort further processing, without closing the connection from the outside.
-// This would put all waiting boundaries into client-only mode.
-
 export function startWork(request: Request): void {
   scheduleWork(() => performWork(request));
 }

From 7c4e6aae3ef4e77596125f30b801c84800e949a9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 22 Mar 2021 22:50:37 +0000
Subject: [PATCH 0345/1603] Oops, it's 2021 already

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21afaccd778e..2ed8f56c51da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## 17.0.2 (March 22, 2020)
+## 17.0.2 (March 22, 2021)
 
 ### React DOM
 

From 25bfa287f6c49950d8ea16f542716835683442d6 Mon Sep 17 00:00:00 2001
From: Benoit Girard <b56girard@gmail.com>
Date: Mon, 22 Mar 2021 21:54:53 -0700
Subject: [PATCH 0346/1603] [Experiment] Add feature flag for more aggressive
 memory clean-up of deleted fiber trees (#21039)

* Add feature flag: enableStrongMemoryCleanup

Add a feature flag that will test doing a recursive clean of an unmount
node. This will disconnect the fiber graph making leaks less severe.

* Detach sibling pointers in old child list

When a fiber is deleted, 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.

Will use this feature flag to test the memory impact.

* Combine into single enum flag

I combined `enableStrongMemoryCleanup` and `enableDetachOldChildList`
into a single enum flag. The flag has three possible values. Each level
is a superset of the previous one and performs more aggressive clean up.

We will use this to compare the memory impact of each level.

* Add Flow type to new host config method

* Re-use existing recursive clean up path

We already have a recursive loop that visits every deleted fiber. We
can re-use that one for clean up instead of adding another one.

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 packages/react-art/src/ReactARTHostConfig.js  |   4 +
 .../src/client/ReactDOMComponentTree.js       |  10 ++
 .../src/client/ReactDOMHostConfig.js          |   1 +
 .../src/ReactFabricHostConfig.js              |   4 +
 .../src/ReactNativeHostConfig.js              |   4 +
 .../src/createReactNoop.js                    |   2 +
 .../src/ReactFiberCommitWork.new.js           | 157 ++++++++++++++----
 .../src/ReactFiberCommitWork.old.js           | 157 ++++++++++++++----
 .../src/forks/ReactFiberHostConfig.custom.js  |   1 +
 .../src/ReactTestHostConfig.js                |   4 +
 packages/shared/ReactFeatureFlags.js          |  13 ++
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 20 files changed, 304 insertions(+), 62 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index cadf311d54ff..7ae3941c9253 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -471,3 +471,7 @@ export function afterActiveInstanceBlur() {
 export function preparePortalMount(portalInstance: any): void {
   // noop
 }
+
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js
index fbf0a81e2906..2afe66035f36 100644
--- a/packages/react-dom/src/client/ReactDOMComponentTree.js
+++ b/packages/react-dom/src/client/ReactDOMComponentTree.js
@@ -43,6 +43,16 @@ const internalEventHandlersKey = '__reactEvents$' + randomKey;
 const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
 const internalEventHandlesSetKey = '__reactHandles$' + randomKey;
 
+export function detachDeletedInstance(node: Instance): void {
+  // 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 | ReactScopeInstance,
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 156951ac748b..695242ca50db 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -25,6 +25,7 @@ import {
   getInstanceFromNode as getInstanceFromNodeDOMTree,
   isContainerMarkedAsRoot,
 } from './ReactDOMComponentTree';
+export {detachDeletedInstance} from './ReactDOMComponentTree';
 import {hasRole} from './DOMAccessibilityRoles';
 import {
   createElement,
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 736001a853e6..347ace3b7919 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -481,3 +481,7 @@ export function afterActiveInstanceBlur() {
 export function preparePortalMount(portalInstance: Instance): void {
   // noop
 }
+
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index d626a175d934..84538532979e 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -538,3 +538,7 @@ export function afterActiveInstanceBlur() {
 export function preparePortalMount(portalInstance: Instance): void {
   // noop
 }
+
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 80c888a88e53..dd304fce6d87 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -420,6 +420,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     getInstanceFromScope() {
       throw new Error('Not yet implemented.');
     },
+
+    detachDeletedInstance() {},
   };
 
   const hostConfig = useMutation
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index c20719d8bfd9..3bf394007422 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -35,6 +35,7 @@ import {
   enableSuspenseCallback,
   enableScopeAPI,
   enableStrictEffects,
+  deletedTreeCleanUpLevel,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -60,6 +61,7 @@ import {
   hasCaughtError,
   clearCaughtError,
 } from 'shared/ReactErrorUtils';
+import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
   NoFlags,
   ContentReset,
@@ -1219,25 +1221,84 @@ function detachFiberMutation(fiber: Fiber) {
   // 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;
 }
 
-export function detachFiberAfterEffects(fiber: Fiber): void {
-  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
-  // Note that we already cleared the return pointer in detachFiberMutation().
-  fiber.alternate = null;
-  fiber.child = null;
-  fiber.deletions = null;
-  fiber.dependencies = null;
-  fiber.memoizedProps = null;
-  fiber.memoizedState = null;
-  fiber.pendingProps = null;
-  fiber.sibling = null;
-  fiber.stateNode = null;
-  fiber.updateQueue = null;
+function detachFiberAfterEffects(fiber: Fiber) {
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    fiber.alternate = null;
+    detachFiberAfterEffects(alternate);
+  }
+
+  // Note: Defensively using negation instead of < in case
+  // `deletedTreeCleanUpLevel` is undefined.
+  if (!(deletedTreeCleanUpLevel >= 2)) {
+    // This is the default branch (level 0).
+    fiber.child = null;
+    fiber.deletions = null;
+    fiber.dependencies = null;
+    fiber.memoizedProps = null;
+    fiber.memoizedState = null;
+    fiber.pendingProps = null;
+    fiber.sibling = null;
+    fiber.stateNode = null;
+    fiber.updateQueue = null;
 
-  if (__DEV__) {
-    fiber._debugOwner = null;
+    if (__DEV__) {
+      fiber._debugOwner = null;
+    }
+  } else {
+    // 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;
+
+    // I'm intentionally not clearing the `return` field in this level. We
+    // already disconnect the `return` pointer at the root of the deleted
+    // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
+    // cyclical — it's only cyclical when combined with `child`, `sibling`, and
+    // `alternate`. But we'll clear it in the next level anyway, just in case.
+
+    if (__DEV__) {
+      fiber._debugOwner = null;
+    }
+
+    if (deletedTreeCleanUpLevel >= 3) {
+      // 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
+      //
+      // The purpose of this branch is to be super aggressive so we can measure
+      // if there's any difference in memory impact. If there is, that could
+      // indicate a React leak we don't know about.
+
+      // For host components, disconnect host instance -> fiber pointer.
+      if (fiber.tag === HostComponent) {
+        const hostInstance: Instance = fiber.stateNode;
+        if (hostInstance !== null) {
+          detachDeletedInstance(hostInstance);
+        }
+      }
+
+      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;
+    }
   }
 }
 
@@ -1629,11 +1690,8 @@ function commitDeletion(
       renderPriorityLevel,
     );
   }
-  const alternate = current.alternate;
+
   detachFiberMutation(current);
-  if (alternate !== null) {
-    detachFiberMutation(alternate);
-  }
 }
 
 function commitWork(current: Fiber | null, finishedWork: Fiber): void {
@@ -2308,14 +2366,34 @@ function commitPassiveUnmountEffects_begin() {
             fiberToDelete,
             fiber,
           );
+        }
 
-          // Now that passive effects have been processed, it's safe to detach lingering pointers.
-          const alternate = fiberToDelete.alternate;
-          detachFiberAfterEffects(fiberToDelete);
-          if (alternate !== null) {
-            detachFiberAfterEffects(alternate);
+        if (deletedTreeCleanUpLevel >= 1) {
+          // 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 = fiber.alternate;
+          if (previousFiber !== null) {
+            let detachedChild = previousFiber.child;
+            if (detachedChild !== null) {
+              previousFiber.child = null;
+              do {
+                const detachedSibling = detachedChild.sibling;
+                detachedChild.sibling = null;
+                detachedChild = detachedSibling;
+              } while (detachedChild !== null);
+            }
           }
         }
+
         nextEffect = fiber;
       }
     }
@@ -2392,7 +2470,8 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     resetCurrentDebugFiberInDEV();
 
     const child = fiber.child;
-    // TODO: Only traverse subtree if it has a PassiveStatic flag
+    // TODO: Only traverse subtree if it has a PassiveStatic flag. (But, if we
+    // do this, still need to handle `deletedTreeCleanUpLevel` correctly.)
     if (child !== null) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
@@ -2409,19 +2488,35 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if (fiber === deletedSubtreeRoot) {
-      nextEffect = null;
-      return;
+    const sibling = fiber.sibling;
+    const returnFiber = fiber.return;
+
+    if (deletedTreeCleanUpLevel >= 2) {
+      // 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;
+      }
+    } else {
+      // This is the default branch (level 0). We do not recursively clear all
+      // the fiber fields. Only the root of the deleted subtree.
+      if (fiber === deletedSubtreeRoot) {
+        detachFiberAfterEffects(fiber);
+        nextEffect = null;
+        return;
+      }
     }
 
-    const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      ensureCorrectReturnPointer(sibling, returnFiber);
       nextEffect = sibling;
       return;
     }
 
-    nextEffect = fiber.return;
+    nextEffect = returnFiber;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index efdbc39abfdf..7f4da55e76e2 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -35,6 +35,7 @@ import {
   enableSuspenseCallback,
   enableScopeAPI,
   enableStrictEffects,
+  deletedTreeCleanUpLevel,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -60,6 +61,7 @@ import {
   hasCaughtError,
   clearCaughtError,
 } from 'shared/ReactErrorUtils';
+import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
   NoFlags,
   ContentReset,
@@ -1219,25 +1221,84 @@ function detachFiberMutation(fiber: Fiber) {
   // 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;
 }
 
-export function detachFiberAfterEffects(fiber: Fiber): void {
-  // Null out fields to improve GC for references that may be lingering (e.g. DevTools).
-  // Note that we already cleared the return pointer in detachFiberMutation().
-  fiber.alternate = null;
-  fiber.child = null;
-  fiber.deletions = null;
-  fiber.dependencies = null;
-  fiber.memoizedProps = null;
-  fiber.memoizedState = null;
-  fiber.pendingProps = null;
-  fiber.sibling = null;
-  fiber.stateNode = null;
-  fiber.updateQueue = null;
+function detachFiberAfterEffects(fiber: Fiber) {
+  const alternate = fiber.alternate;
+  if (alternate !== null) {
+    fiber.alternate = null;
+    detachFiberAfterEffects(alternate);
+  }
+
+  // Note: Defensively using negation instead of < in case
+  // `deletedTreeCleanUpLevel` is undefined.
+  if (!(deletedTreeCleanUpLevel >= 2)) {
+    // This is the default branch (level 0).
+    fiber.child = null;
+    fiber.deletions = null;
+    fiber.dependencies = null;
+    fiber.memoizedProps = null;
+    fiber.memoizedState = null;
+    fiber.pendingProps = null;
+    fiber.sibling = null;
+    fiber.stateNode = null;
+    fiber.updateQueue = null;
 
-  if (__DEV__) {
-    fiber._debugOwner = null;
+    if (__DEV__) {
+      fiber._debugOwner = null;
+    }
+  } else {
+    // 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;
+
+    // I'm intentionally not clearing the `return` field in this level. We
+    // already disconnect the `return` pointer at the root of the deleted
+    // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
+    // cyclical — it's only cyclical when combined with `child`, `sibling`, and
+    // `alternate`. But we'll clear it in the next level anyway, just in case.
+
+    if (__DEV__) {
+      fiber._debugOwner = null;
+    }
+
+    if (deletedTreeCleanUpLevel >= 3) {
+      // 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
+      //
+      // The purpose of this branch is to be super aggressive so we can measure
+      // if there's any difference in memory impact. If there is, that could
+      // indicate a React leak we don't know about.
+
+      // For host components, disconnect host instance -> fiber pointer.
+      if (fiber.tag === HostComponent) {
+        const hostInstance: Instance = fiber.stateNode;
+        if (hostInstance !== null) {
+          detachDeletedInstance(hostInstance);
+        }
+      }
+
+      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;
+    }
   }
 }
 
@@ -1629,11 +1690,8 @@ function commitDeletion(
       renderPriorityLevel,
     );
   }
-  const alternate = current.alternate;
+
   detachFiberMutation(current);
-  if (alternate !== null) {
-    detachFiberMutation(alternate);
-  }
 }
 
 function commitWork(current: Fiber | null, finishedWork: Fiber): void {
@@ -2308,14 +2366,34 @@ function commitPassiveUnmountEffects_begin() {
             fiberToDelete,
             fiber,
           );
+        }
 
-          // Now that passive effects have been processed, it's safe to detach lingering pointers.
-          const alternate = fiberToDelete.alternate;
-          detachFiberAfterEffects(fiberToDelete);
-          if (alternate !== null) {
-            detachFiberAfterEffects(alternate);
+        if (deletedTreeCleanUpLevel >= 1) {
+          // 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 = fiber.alternate;
+          if (previousFiber !== null) {
+            let detachedChild = previousFiber.child;
+            if (detachedChild !== null) {
+              previousFiber.child = null;
+              do {
+                const detachedSibling = detachedChild.sibling;
+                detachedChild.sibling = null;
+                detachedChild = detachedSibling;
+              } while (detachedChild !== null);
+            }
           }
         }
+
         nextEffect = fiber;
       }
     }
@@ -2392,7 +2470,8 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     resetCurrentDebugFiberInDEV();
 
     const child = fiber.child;
-    // TODO: Only traverse subtree if it has a PassiveStatic flag
+    // TODO: Only traverse subtree if it has a PassiveStatic flag. (But, if we
+    // do this, still need to handle `deletedTreeCleanUpLevel` correctly.)
     if (child !== null) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
@@ -2409,19 +2488,35 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if (fiber === deletedSubtreeRoot) {
-      nextEffect = null;
-      return;
+    const sibling = fiber.sibling;
+    const returnFiber = fiber.return;
+
+    if (deletedTreeCleanUpLevel >= 2) {
+      // 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;
+      }
+    } else {
+      // This is the default branch (level 0). We do not recursively clear all
+      // the fiber fields. Only the root of the deleted subtree.
+      if (fiber === deletedSubtreeRoot) {
+        detachFiberAfterEffects(fiber);
+        nextEffect = null;
+        return;
+      }
     }
 
-    const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      ensureCorrectReturnPointer(sibling, returnFiber);
       nextEffect = sibling;
       return;
     }
 
-    nextEffect = fiber.return;
+    nextEffect = returnFiber;
   }
 }
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 5bfdf3a305f3..6a6e9c5e040c 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -73,6 +73,7 @@ export const preparePortalMount = $$$hostConfig.preparePortalMount;
 export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
+export const detachDeletedInstance = $$$hostConfig.detachDeletedInstance;
 
 // -------------------
 //      Microtasks
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index a787d31840af..bac900c469fa 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -360,3 +360,7 @@ export function prepareScopeUpdate(scopeInstance: Object, inst: Object): void {
 export function getInstanceFromScope(scopeInstance: Object): null | Object {
   return nodeToInstanceMap.get(scopeInstance) || null;
 }
+
+export function detachDeletedInstance(node: Instance): void {
+  // noop
+}
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 77079bba3a6a..a1e9c42d3d1c 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -112,6 +112,19 @@ export const disableNativeComponentFrames = false;
 // If there are no still-mounted boundaries, the errors should be rethrown.
 export const skipUnmountedBoundaries = false;
 
+// When a node is unmounted, recurse into the Fiber subtree and clean out
+// references. Each level cleans up more fiber fields than the previous level.
+// As far as we know, React itself doesn't leak, but because the Fiber contains
+// cycles, even a single leak in product code can cause us to retain large
+// amounts of memory.
+//
+// The long term plan is to remove the cycles, but in the meantime, we clear
+// additional fields to mitigate.
+//
+// It's an enum so that we can experiment with different levels of
+// aggressiveness.
+export const deletedTreeCleanUpLevel = 1;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 2e2f64e4bc5d..7d5c5a6c40cc 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -46,6 +46,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
+export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 34ee7d2b7a84..cd2979fc400f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -45,6 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
+export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index bd5e91885ca4..c7f1f1a4739d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -45,6 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
+export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 70c5dc4144ee..895ebad1d809 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -45,6 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
+export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index df6bbdf03fbe..832f56e6fa09 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -45,6 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
+export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 42003be9a388..351b0934c792 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -45,6 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
+export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 5ab680976a9e..b25ac0073e94 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -45,6 +45,7 @@ export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = true;
+export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index e2496510ef24..503d263fc9be 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -52,6 +52,7 @@ export const disableNativeComponentFrames = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableStrictEffects = false;
 export const enableUseRefAccessWarning = __VARIANT__;
+export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
 
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c29856558751..dab1a37bc5c6 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,6 +32,7 @@ export const {
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
   enableLazyContextPropagation,
+  deletedTreeCleanUpLevel,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 435cff9866d38d137aafe6396c776437710a8481 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 23 Mar 2021 14:39:38 -0400
Subject: [PATCH 0347/1603] [Fizz] Expose callbacks in options for when various
 stages of the content is done (#21056)

* Report errors to a global handler

This allows you to log errors or set things like status codes.

* Add complete callback

* onReadyToStream callback

This is typically not needed because if you want to stream when the
root is ready you can just start writing immediately.

* Rename onComplete -> onCompleteAll
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  24 ++--
 .../ReactDOMFizzServerBrowser-test.js         |  59 ++++++++
 .../__tests__/ReactDOMFizzServerNode-test.js  |  71 ++++++++++
 .../src/server/ReactDOMFizzServerBrowser.js   |  17 ++-
 .../src/server/ReactDOMFizzServerNode.js      |   6 +
 .../src/ReactNoopServer.js                    |   6 +
 packages/react-server/src/ReactFizzServer.js  | 134 +++++++++++-------
 7 files changed, 256 insertions(+), 61 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 3a7d7205dcb2..9021c23c6ce7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -336,7 +336,6 @@ describe('ReactDOMFizzServer', () => {
       writable.write(chunk, encoding, next);
     };
 
-    writable.write('<div id="container-A">');
     await act(async () => {
       const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
         <Suspense fallback={<Text text="Loading A..." />}>
@@ -346,13 +345,17 @@ describe('ReactDOMFizzServer', () => {
           </div>
         </Suspense>,
         writableA,
-        {identifierPrefix: 'A_'},
+        {
+          identifierPrefix: 'A_',
+          onReadyToStream() {
+            writableA.write('<div id="container-A">');
+            startWriting();
+            writableA.write('</div>');
+          },
+        },
       );
-      startWriting();
     });
-    writable.write('</div>');
 
-    writable.write('<div id="container-B">');
     await act(async () => {
       const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
         <Suspense fallback={<Text text="Loading B..." />}>
@@ -362,11 +365,16 @@ describe('ReactDOMFizzServer', () => {
           </div>
         </Suspense>,
         writableB,
-        {identifierPrefix: 'B_'},
+        {
+          identifierPrefix: 'B_',
+          onReadyToStream() {
+            writableB.write('<div id="container-B">');
+            startWriting();
+            writableB.write('</div>');
+          },
+        },
       );
-      startWriting();
     });
-    writable.write('</div>');
 
     expect(getVisibleChildren(container)).toEqual([
       <div id="container-A">Loading A...</div>,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 0167103db57c..b55bb446f6fc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -58,12 +58,56 @@ describe('ReactDOMFizzServer', () => {
     expect(result).toBe('<div>hello world</div>');
   });
 
+  // @gate experimental
+  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 = ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback="Loading">
+          <Wait />
+        </Suspense>
+      </div>,
+      {
+        onCompleteAll() {
+          isComplete = true;
+        },
+      },
+    );
+    await jest.runAllTimers();
+    expect(isComplete).toBe(false);
+    // Resolve the loading.
+    hasLoaded = true;
+    await resolve();
+
+    await jest.runAllTimers();
+
+    expect(isComplete).toBe(true);
+
+    const result = await readResult(stream);
+    expect(result).toBe('<div><!--$-->Done<!--/$--></div>');
+  });
+
   // @gate experimental
   it('should error the stream when an error is thrown at the root', async () => {
+    const reportedErrors = [];
     const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Throw />
       </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
     );
 
     let caughtError = null;
@@ -75,16 +119,23 @@ describe('ReactDOMFizzServer', () => {
     }
     expect(caughtError).toBe(theError);
     expect(result).toBe('');
+    expect(reportedErrors).toEqual([theError]);
   });
 
   // @gate experimental
   it('should error the stream when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
     const stream = ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<Throw />}>
           <InfiniteSuspend />
         </Suspense>
       </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
     );
 
     let caughtError = null;
@@ -96,20 +147,28 @@ describe('ReactDOMFizzServer', () => {
     }
     expect(caughtError).toBe(theError);
     expect(result).toBe('');
+    expect(reportedErrors).toEqual([theError]);
   });
 
   // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
     const stream = 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]);
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index a7ea970bece5..5377607a5795 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -86,14 +86,68 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  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 {writable, output} = getTestWritable();
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      <div>
+        <Suspense fallback="Loading">
+          <Wait />
+        </Suspense>
+      </div>,
+      writable,
+      {
+        onCompleteAll() {
+          isComplete = true;
+        },
+      },
+    );
+    await jest.runAllTimers();
+    expect(output.result).toBe('');
+    expect(isComplete).toBe(false);
+    // Resolve the loading.
+    hasLoaded = true;
+    await resolve();
+
+    await jest.runAllTimers();
+
+    expect(output.result).toBe('');
+    expect(isComplete).toBe(true);
+
+    // First we write our header.
+    output.result +=
+      '<!doctype html><html><head><title>test</title><head><body>';
+    // Then React starts writing.
+    startWriting();
+    expect(output.result).toBe(
+      '<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!--/$--></div>',
+    );
+  });
+
   // @gate experimental
   it('should error the stream when an error is thrown at the root', async () => {
+    const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
     ReactDOMFizzServer.pipeToNodeWritable(
       <div>
         <Throw />
       </div>,
       writable,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
     );
 
     // The stream is errored even if we haven't started writing.
@@ -102,10 +156,13 @@ describe('ReactDOMFizzServer', () => {
 
     expect(output.error).toBe(theError);
     expect(output.result).toBe('');
+    // This type of error is reported to the error callback too.
+    expect(reportedErrors).toEqual([theError]);
   });
 
   // @gate experimental
   it('should error the stream when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
     const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
@@ -114,6 +171,11 @@ describe('ReactDOMFizzServer', () => {
         </Suspense>
       </div>,
       writable,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
     );
     startWriting();
 
@@ -121,10 +183,12 @@ describe('ReactDOMFizzServer', () => {
 
     expect(output.error).toBe(theError);
     expect(output.result).toBe('');
+    expect(reportedErrors).toEqual([theError]);
   });
 
   // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
     const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
@@ -133,6 +197,11 @@ describe('ReactDOMFizzServer', () => {
         </Suspense>
       </div>,
       writable,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
     );
     startWriting();
 
@@ -140,6 +209,8 @@ describe('ReactDOMFizzServer', () => {
 
     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]);
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 902989fefca0..95a58f0688dd 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -22,6 +22,9 @@ type Options = {
   identifierPrefix?: string,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
+  onReadyToStream?: () => void,
+  onCompleteAll?: () => void,
+  onError?: (error: mixed) => void,
 };
 
 function renderToReadableStream(
@@ -37,21 +40,31 @@ function renderToReadableStream(
     };
     signal.addEventListener('abort', listener);
   }
-  return new ReadableStream({
+  const stream = new ReadableStream({
     start(controller) {
       request = createRequest(
         children,
         controller,
         createResponseState(options ? options.identifierPrefix : undefined),
         options ? options.progressiveChunkSize : undefined,
+        options ? options.onError : undefined,
+        options ? options.onCompleteAll : undefined,
+        options ? options.onReadyToStream : undefined,
       );
       startWork(request);
     },
     pull(controller) {
-      startFlowing(request);
+      // Pull is called immediately even if the stream is not passed to anything.
+      // That's buffering too early. We want to start buffering once the stream
+      // is actually used by something so we can give it the best result possible
+      // at that point.
+      if (stream.locked) {
+        startFlowing(request);
+      }
     },
     cancel(reason) {},
   });
+  return stream;
 }
 
 export {renderToReadableStream};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 8de76f7095f9..51a091948d4b 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -26,6 +26,9 @@ function createDrainHandler(destination, request) {
 type Options = {
   identifierPrefix?: string,
   progressiveChunkSize?: number,
+  onReadyToStream?: () => void,
+  onCompleteAll?: () => void,
+  onError?: (error: mixed) => void,
 };
 
 type Controls = {
@@ -44,6 +47,9 @@ function pipeToNodeWritable(
     destination,
     createResponseState(options ? options.identifierPrefix : undefined),
     options ? options.progressiveChunkSize : undefined,
+    options ? options.onError : undefined,
+    options ? options.onCompleteAll : undefined,
+    options ? options.onReadyToStream : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index d2a4bf032933..feec884743ef 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -217,6 +217,9 @@ const ReactNoopServer = ReactFizzServer({
 
 type Options = {
   progressiveChunkSize?: number,
+  onReadyToStream?: () => void,
+  onCompleteAll?: () => void,
+  onError?: (error: mixed) => void,
 };
 
 function render(children: React$Element<any>, options?: Options): Destination {
@@ -234,6 +237,9 @@ function render(children: React$Element<any>, options?: Options): Destination {
     destination,
     null,
     options ? options.progressiveChunkSize : undefined,
+    options ? options.onError : undefined,
+    options ? options.onCompleteAll : undefined,
+    options ? options.onReadyToStream : undefined,
   );
   ReactNoopServer.startWork(request);
   ReactNoopServer.startFlowing(request);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index a52079c1587c..b936376e85ea 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -110,6 +110,15 @@ type Request = {
   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.
+  // onError is called when an error happens anywhere in the tree. It might recover.
+  onError: (error: mixed) => void,
+  // onCompleteAll is called when all pending work 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.
+  onCompleteAll: () => void,
+  // onReadyToStream 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.
+  onReadyToStream: () => void,
 };
 
 // This is a default heuristic for how to split up the HTML content into progressive
@@ -134,6 +143,9 @@ export function createRequest(
   destination: Destination,
   responseState: ResponseState,
   progressiveChunkSize: number = DEFAULT_PROGRESSIVE_CHUNK_SIZE,
+  onError: (error: mixed) => void = noop,
+  onCompleteAll: () => void = noop,
+  onReadyToStream: () => void = noop,
 ): Request {
   const pingedWork = [];
   const abortSet: Set<SuspendedWork> = new Set();
@@ -151,6 +163,9 @@ export function createRequest(
     clientRenderedBoundaries: [],
     completedBoundaries: [],
     partialBoundaries: [],
+    onError,
+    onCompleteAll,
+    onReadyToStream,
   };
   // This segment represents the root fallback.
   const rootSegment = createPendingSegment(request, 0, null);
@@ -235,7 +250,9 @@ function createPendingSegment(
 }
 
 function reportError(request: Request, error: mixed): void {
-  // TODO: Report errors on the server.
+  // 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.
+  request.onError(error);
 }
 
 function fatalError(request: Request, error: mixed): void {
@@ -389,28 +406,31 @@ function erroredWork(
   segment: Segment,
   error: mixed,
 ) {
-  request.allPendingWork--;
-  if (boundary !== null) {
-    boundary.pendingWork--;
-  }
-
   // Report the error to a global handler.
   reportError(request, error);
   if (boundary === null) {
     fatalError(request, error);
-  } else if (!boundary.forceClientRender) {
-    boundary.forceClientRender = true;
-
-    // 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);
+  } else {
+    boundary.pendingWork--;
+    if (!boundary.forceClientRender) {
+      boundary.forceClientRender = true;
+
+      // 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);
+      }
     }
   }
+
+  request.allPendingWork--;
+  if (request.allPendingWork === 0) {
+    request.onCompleteAll();
+  }
 }
 
 function abortWorkSoft(suspendedWork: SuspendedWork): void {
@@ -454,6 +474,10 @@ function abortWork(suspendedWork: SuspendedWork): void {
         request.clientRenderedBoundaries.push(boundary);
       }
     }
+
+    if (request.allPendingWork === 0) {
+      request.onCompleteAll();
+    }
   }
 }
 
@@ -462,10 +486,7 @@ function finishedWork(
   boundary: Root | SuspenseBoundary,
   segment: Segment,
 ) {
-  request.allPendingWork--;
-
   if (boundary === null) {
-    request.pendingRootWork--;
     if (segment.parentFlushed) {
       invariant(
         request.completedRootSegment === null,
@@ -473,43 +494,51 @@ function finishedWork(
       );
       request.completedRootSegment = segment;
     }
-    return;
-  }
-
-  boundary.pendingWork--;
-  if (boundary.forceClientRender) {
-    // This already errored.
-    return;
-  }
-  if (boundary.pendingWork === 0) {
-    // This must have been the last segment we were waiting on. This boundary is now complete.
-    // We can now cancel any pending work on the fallback since we won't need to show it anymore.
-    boundary.fallbackAbortableWork.forEach(abortWorkSoft, request);
-    boundary.fallbackAbortableWork.clear();
-    if (segment.parentFlushed) {
-      // Our parent segment already flushed, so we need to schedule this segment to be emitted.
-      boundary.completedSegments.push(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);
+    request.pendingRootWork--;
+    if (request.pendingRootWork === 0) {
+      request.onReadyToStream();
     }
   } else {
-    if (segment.parentFlushed) {
-      // Our parent already flushed, so we need to schedule this segment to be emitted.
-      const completedSegments = boundary.completedSegments;
-      completedSegments.push(segment);
-      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);
+    boundary.pendingWork--;
+    if (boundary.forceClientRender) {
+      // This already errored.
+    } else if (boundary.pendingWork === 0) {
+      // This must have been the last segment we were waiting on. This boundary is now complete.
+      // We can now cancel any pending work on the fallback since we won't need to show it anymore.
+      boundary.fallbackAbortableWork.forEach(abortWorkSoft, request);
+      boundary.fallbackAbortableWork.clear();
+      if (segment.parentFlushed) {
+        // Our parent segment already flushed, so we need to schedule this segment to be emitted.
+        boundary.completedSegments.push(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);
+      }
+    } else {
+      if (segment.parentFlushed) {
+        // Our parent already flushed, so we need to schedule this segment to be emitted.
+        const completedSegments = boundary.completedSegments;
+        completedSegments.push(segment);
+        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);
+          }
         }
       }
     }
   }
+
+  request.allPendingWork--;
+  if (request.allPendingWork === 0) {
+    // This needs to be called at the very end so that we can synchronously write the result
+    // in the callback if needed.
+    request.onCompleteAll();
+  }
 }
 
 function retryWork(request: Request, work: SuspendedWork): void {
@@ -573,6 +602,7 @@ function performWork(request: Request): void {
       flushCompletedQueues(request);
     }
   } catch (error) {
+    reportError(request, error);
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
@@ -920,6 +950,7 @@ export function startFlowing(request: Request): void {
   try {
     flushCompletedQueues(request);
   } catch (error) {
+    reportError(request, error);
     fatalError(request, error);
   }
 }
@@ -934,6 +965,7 @@ export function abort(request: Request): void {
       flushCompletedQueues(request);
     }
   } catch (error) {
+    reportError(request, error);
     fatalError(request, error);
   }
 }

From d0eaf782930b6e6c575f50bf688e667b9f6795b7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 23 Mar 2021 15:57:28 -0500
Subject: [PATCH 0348/1603] Move priorities to separate import to break cycle
 (#21060)

The event priority constants exports by the reconciler package are
meant to be used by the reconciler (host config) itself. So it doesn't
make sense to export them from a module that requires them.

To break the cycle, we can move them to a separate module and import
that. This looks like a "deep import" of an internal module, which we
try to avoid, but conceptually these are part of the public interface
of the reconciler module. So, no different than importing from the main
`react-reconciler`.

We do need to be careful about not mixing these types of imports with
implementation details. Those are the ones to really avoid.

An unintended benefit of the reconciler fork infra is that it makes
deep imports harder. Any module that we treat as "public", like this
one, needs to account for the `enableNewReconciler` flag and forward
to the correct implementation.
---
 packages/react-art/src/ReactARTHostConfig.js  | 10 +----
 .../src/client/ReactDOMHostConfig.js          | 10 +----
 .../src/events/ReactDOMEventListener.js       | 38 +++++++++----------
 .../src/ReactFabricHostConfig.js              | 10 +----
 .../src/ReactNativeHostConfig.js              | 10 +----
 .../src/createReactNoop.js                    |  5 ++-
 packages/react-reconciler/README.md           | 14 +++++--
 .../src/ReactEventPriorities.js               | 37 ++++++++++++++++++
 .../src/ReactEventPriorities.new.js           | 15 ++++++++
 .../src/ReactEventPriorities.old.js           | 15 ++++++++
 .../src/ReactFiberReconciler.js               | 20 ----------
 .../src/ReactTestHostConfig.js                | 11 +-----
 scripts/rollup/forks.js                       | 20 ++++++++++
 13 files changed, 129 insertions(+), 86 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactEventPriorities.js
 create mode 100644 packages/react-reconciler/src/ReactEventPriorities.new.js
 create mode 100644 packages/react-reconciler/src/ReactEventPriorities.old.js

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 7ae3941c9253..f9971b5bb036 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -7,17 +7,11 @@
 
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
-import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
-import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
-import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
-
-const DefaultLanePriority = enableNewReconciler
-  ? DefaultLanePriority_new
-  : DefaultLanePriority_old;
+import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 const pooledTransform = new Transform();
 
@@ -347,7 +341,7 @@ export function shouldSetTextContent(type, props) {
 }
 
 export function getCurrentEventPriority() {
-  return DefaultLanePriority;
+  return DefaultEventPriority;
 }
 
 // The ART renderer is secondary to the React DOM renderer.
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 695242ca50db..5d5d9393c4bf 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -67,17 +67,11 @@ import {
   enableSuspenseServerRenderer,
   enableCreateEventHandleAPI,
   enableScopeAPI,
-  enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
 
-import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
-import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
-
-const DefaultLanePriority = enableNewReconciler
-  ? DefaultLanePriority_new
-  : DefaultLanePriority_old;
+import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 export type Type = string;
 export type Props = {
@@ -385,7 +379,7 @@ export function createTextInstance(
 export function getCurrentEventPriority(): * {
   const currentEvent = window.event;
   if (currentEvent === undefined) {
-    return DefaultLanePriority;
+    return DefaultEventPriority;
   }
   return getEventPriority(currentEvent.type);
 }
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 1c0bc724b706..57ec840e61b2 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -14,6 +14,7 @@ import type {
 } from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
+import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.new';
 
 import {
   isReplayableDiscreteEvent,
@@ -49,18 +50,13 @@ import {
 
 import {
   InputContinuousLanePriority as InputContinuousLanePriority_old,
-  DefaultLanePriority as DefaultLanePriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_old,
 } from 'react-reconciler/src/ReactFiberLane.old';
 import {
   InputContinuousLanePriority as InputContinuousLanePriority_new,
-  DefaultLanePriority as DefaultLanePriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
   setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_new,
-  SyncLanePriority,
-  IdleLanePriority,
-  NoLanePriority,
 } from 'react-reconciler/src/ReactFiberLane.new';
 import {getCurrentPriorityLevel as getCurrentPriorityLevel_old} from 'react-reconciler/src/SchedulerWithReactIntegration.old';
 import {
@@ -71,14 +67,16 @@ import {
   NormalPriority as NormalSchedulerPriority,
   UserBlockingPriority as UserBlockingSchedulerPriority,
 } from 'react-reconciler/src/SchedulerWithReactIntegration.new';
-import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.new';
+import {
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
 
 const InputContinuousLanePriority = enableNewReconciler
   ? InputContinuousLanePriority_new
   : InputContinuousLanePriority_old;
-const DefaultLanePriority = enableNewReconciler
-  ? DefaultLanePriority_new
-  : DefaultLanePriority_old;
 const getCurrentUpdateLanePriority = enableNewReconciler
   ? getCurrentUpdateLanePriority_new
   : getCurrentUpdateLanePriority_old;
@@ -94,17 +92,17 @@ function schedulerPriorityToLanePriority(
 ): LanePriority {
   switch (schedulerPriorityLevel) {
     case ImmediateSchedulerPriority:
-      return SyncLanePriority;
+      return DiscreteEventPriority;
     case UserBlockingSchedulerPriority:
-      return InputContinuousLanePriority;
+      return ContinuousEventPriority;
     case NormalSchedulerPriority:
     case LowSchedulerPriority:
       // TODO: Handle LowSchedulerPriority, somehow. Maybe the same lane as hydration.
-      return DefaultLanePriority;
+      return DefaultEventPriority;
     case IdleSchedulerPriority:
-      return IdleLanePriority;
+      return IdleEventPriority;
     default:
-      return NoLanePriority;
+      return DefaultEventPriority;
   }
 }
 
@@ -142,13 +140,13 @@ export function createEventListenerWrapperWithPriority(
   const eventPriority = getEventPriority(domEventName);
   let listenerWrapper;
   switch (eventPriority) {
-    case SyncLanePriority:
+    case DiscreteEventPriority:
       listenerWrapper = dispatchDiscreteEvent;
       break;
-    case InputContinuousLanePriority:
+    case ContinuousEventPriority:
       listenerWrapper = dispatchContinuousEvent;
       break;
-    case DefaultLanePriority:
+    case DefaultEventPriority:
     default:
       listenerWrapper = dispatchEvent;
       break;
@@ -407,7 +405,7 @@ export function getEventPriority(domEventName: DOMEventName): * {
     case 'popstate':
     case 'select':
     case 'selectstart':
-      return SyncLanePriority;
+      return DiscreteEventPriority;
     case 'drag':
     case 'dragenter':
     case 'dragexit':
@@ -427,7 +425,7 @@ export function getEventPriority(domEventName: DOMEventName): * {
     // eslint-disable-next-line no-fallthrough
     case 'mouseenter':
     case 'mouseleave':
-      return InputContinuousLanePriority;
+      return ContinuousEventPriority;
     case 'message': {
       // We might be in the Scheduler callback.
       // Eventually this mechanism will be replaced by a check
@@ -436,6 +434,6 @@ export function getEventPriority(domEventName: DOMEventName): * {
       return schedulerPriorityToLanePriority(schedulerPriority);
     }
     default:
-      return DefaultLanePriority;
+      return DefaultEventPriority;
   }
 }
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 347ace3b7919..ac4a97bb4609 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -21,17 +21,11 @@ import type {
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
-import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
-import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
-import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
-
-const DefaultLanePriority = enableNewReconciler
-  ? DefaultLanePriority_new
-  : DefaultLanePriority_old;
+import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 // Modules provided by RN:
 import {
@@ -349,7 +343,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
 }
 
 export function getCurrentEventPriority(): * {
-  return DefaultLanePriority;
+  return DefaultEventPriority;
 }
 
 // The Fabric renderer is secondary to the existing React Native renderer.
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 84538532979e..205f8189b7a7 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -10,7 +10,6 @@
 import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
 
 import invariant from 'shared/invariant';
-import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
 // Modules provided by RN:
 import {
@@ -27,12 +26,7 @@ import {
 } from './ReactNativeComponentTree';
 import ReactNativeFiberHostComponent from './ReactNativeFiberHostComponent';
 
-import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
-import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
-
-const DefaultLanePriority = enableNewReconciler
-  ? DefaultLanePriority_new
-  : DefaultLanePriority_old;
+import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
 
@@ -268,7 +262,7 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
 }
 
 export function getCurrentEventPriority(): * {
-  return DefaultLanePriority;
+  return DefaultEventPriority;
 }
 
 // -------------------
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index dd304fce6d87..6cef4f7ade49 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -27,6 +27,9 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 const {IsSomeRendererActing} = ReactSharedInternals;
 
+// TODO: Publish public entry point that exports the event priority constants
+const DefaultEventPriority = 8;
+
 type Container = {
   rootID: string,
   children: Array<Instance | TextInstance>,
@@ -587,7 +590,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   const roots = new Map();
   const DEFAULT_ROOT_ID = '<default>';
 
-  let currentEventPriority = NoopRenderer.DefaultEventPriority;
+  let currentEventPriority = DefaultEventPriority;
 
   function childToJSX(child, text) {
     if (text !== null) {
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 60c515610c21..4a0ce2aa427d 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -219,10 +219,16 @@ This is a property (not a function) that should be set to `true` if your rendere
 To implement this method, you'll need some constants available on the _returned_ `Renderer` object:
 
 ```js
+import {
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+} from './ReactFiberReconciler/src/ReactEventPriorities';
+
 const HostConfig = {
   // ...
   getCurrentEventPriority() {
-    return MyRenderer.DefaultEventPriority;
+    return DefaultEventPriority;
   },
   // ...
 }
@@ -232,11 +238,11 @@ 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 `MyRenderer.DiscreteEventPriority`. This tells React that they should interrupt any background work and cannot be batched across time.
+* **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 `MyRenderer.ContinuousEventPriority`. This tells React they should interrupt any background work but can 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 `MyRenderer.DefaultEventPriority`. This tells React that this event is considered background work, and interactive events will be prioritized over it.
+* **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 `ReactDOMHostConfig.js` for a reference implementation.
 
diff --git a/packages/react-reconciler/src/ReactEventPriorities.js b/packages/react-reconciler/src/ReactEventPriorities.js
new file mode 100644
index 000000000000..76385f612afe
--- /dev/null
+++ b/packages/react-reconciler/src/ReactEventPriorities.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
+
+import {
+  DiscreteEventPriority as DiscreteEventPriority_old,
+  ContinuousEventPriority as ContinuousEventPriority_old,
+  DefaultEventPriority as DefaultEventPriority_old,
+  IdleEventPriority as IdleEventPriority_old,
+} from './ReactEventPriorities.old';
+
+import {
+  DiscreteEventPriority as DiscreteEventPriority_new,
+  ContinuousEventPriority as ContinuousEventPriority_new,
+  DefaultEventPriority as DefaultEventPriority_new,
+  IdleEventPriority as IdleEventPriority_new,
+} from './ReactEventPriorities.new';
+
+export const DiscreteEventPriority = enableNewReconciler
+  ? DiscreteEventPriority_new
+  : DiscreteEventPriority_old;
+export const ContinuousEventPriority = enableNewReconciler
+  ? ContinuousEventPriority_new
+  : ContinuousEventPriority_old;
+export const DefaultEventPriority = enableNewReconciler
+  ? DefaultEventPriority_new
+  : DefaultEventPriority_old;
+export const IdleEventPriority = enableNewReconciler
+  ? IdleEventPriority_new
+  : IdleEventPriority_old;
diff --git a/packages/react-reconciler/src/ReactEventPriorities.new.js b/packages/react-reconciler/src/ReactEventPriorities.new.js
new file mode 100644
index 000000000000..4f127a522783
--- /dev/null
+++ b/packages/react-reconciler/src/ReactEventPriorities.new.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {
+  SyncLanePriority as DiscreteEventPriority,
+  InputContinuousLanePriority as ContinuousEventPriority,
+  DefaultLanePriority as DefaultEventPriority,
+  IdleLanePriority as IdleEventPriority,
+} from './ReactFiberLane.new';
diff --git a/packages/react-reconciler/src/ReactEventPriorities.old.js b/packages/react-reconciler/src/ReactEventPriorities.old.js
new file mode 100644
index 000000000000..2d6a60eb8817
--- /dev/null
+++ b/packages/react-reconciler/src/ReactEventPriorities.old.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {
+  SyncLanePriority as DiscreteEventPriority,
+  InputContinuousLanePriority as ContinuousEventPriority,
+  DefaultLanePriority as DefaultEventPriority,
+  IdleLanePriority as IdleEventPriority,
+} from './ReactFiberLane.old';
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index f1e1ac64645c..56e517f9f53d 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -52,10 +52,6 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
-  DefaultEventPriority as DefaultEventPriority_old,
-  DiscreteEventPriority as DiscreteEventPriority_old,
-  ContinuousEventPriority as ContinuousEventPriority_old,
-  IdleEventPriority as IdleEventPriority_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -96,10 +92,6 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
-  DefaultEventPriority as DefaultEventPriority_new,
-  DiscreteEventPriority as DiscreteEventPriority_new,
-  ContinuousEventPriority as ContinuousEventPriority_new,
-  IdleEventPriority as IdleEventPriority_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -176,18 +168,6 @@ export const createPortal = enableNewReconciler
 export const createComponentSelector = enableNewReconciler
   ? createComponentSelector_new
   : createComponentSelector_old;
-export const DefaultEventPriority = enableNewReconciler
-  ? DefaultEventPriority_new
-  : DefaultEventPriority_old;
-export const DiscreteEventPriority = enableNewReconciler
-  ? DiscreteEventPriority_new
-  : DiscreteEventPriority_old;
-export const ContinuousEventPriority = enableNewReconciler
-  ? ContinuousEventPriority_new
-  : ContinuousEventPriority_old;
-export const IdleEventPriority = enableNewReconciler
-  ? IdleEventPriority_new
-  : IdleEventPriority_old;
 
 //TODO: "psuedo" is spelled "pseudo"
 export const createHasPseudoClassSelector = enableNewReconciler
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index bac900c469fa..596615ea0570 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -8,14 +8,7 @@
  */
 
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
-import {enableNewReconciler} from 'shared/ReactFeatureFlags';
-
-import {DefaultLanePriority as DefaultLanePriority_old} from 'react-reconciler/src/ReactFiberLane.old';
-import {DefaultLanePriority as DefaultLanePriority_new} from 'react-reconciler/src/ReactFiberLane.new';
-
-const DefaultLanePriority = enableNewReconciler
-  ? DefaultLanePriority_new
-  : DefaultLanePriority_old;
+import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 export type Type = string;
 export type Props = Object;
@@ -223,7 +216,7 @@ export function createTextInstance(
 }
 
 export function getCurrentEventPriority(): * {
-  return DefaultLanePriority;
+  return DefaultEventPriority;
 }
 
 export const isPrimaryRenderer = false;
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index af295ad53c3b..2c64c6219e35 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -279,6 +279,26 @@ const forks = Object.freeze({
     return 'react-reconciler/src/ReactFiberReconciler.old.js';
   },
 
+  'react-reconciler/src/ReactEventPriorities': (
+    bundleType,
+    entry,
+    dependencies,
+    moduleType,
+    bundle
+  ) => {
+    if (bundle.enableNewReconciler) {
+      switch (bundleType) {
+        case FB_WWW_DEV:
+        case FB_WWW_PROD:
+        case FB_WWW_PROFILING:
+          // Use the forked version of the reconciler
+          return 'react-reconciler/src/ReactEventPriorities.new.js';
+      }
+    }
+    // Otherwise, use the non-forked version.
+    return 'react-reconciler/src/ReactEventPriorities.old.js';
+  },
+
   'react-reconciler/src/ReactFiberHotReloading': (
     bundleType,
     entry,

From 2c9d8efc8e8202929d3c737459050205f2848d79 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Mar 2021 02:13:43 +0000
Subject: [PATCH 0349/1603] Add react-reconciler/constants entry point (#21062)

* Add react-reconciler/constants entry point

* Move root tags to /constants
---
 .../react-noop-renderer/src/createReactNoop.js |  9 +++++----
 packages/react-reconciler/README.md            |  4 ++--
 packages/react-reconciler/constants.js         | 12 ++++++++++++
 packages/react-reconciler/npm/constants.js     |  7 +++++++
 packages/react-reconciler/package.json         |  1 +
 .../src/ReactReconcilerConstants.js            | 18 ++++++++++++++++++
 scripts/rollup/bundles.js                      | 11 ++++++++++-
 scripts/rollup/modules.js                      |  1 +
 8 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 packages/react-reconciler/constants.js
 create mode 100644 packages/react-reconciler/npm/constants.js
 create mode 100644 packages/react-reconciler/src/ReactReconcilerConstants.js

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 6cef4f7ade49..1f90af7bac00 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,15 +21,16 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
-import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {
+  DefaultEventPriority,
+  ConcurrentRoot,
+  LegacyRoot,
+} from 'react-reconciler/constants';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 const {IsSomeRendererActing} = ReactSharedInternals;
 
-// TODO: Publish public entry point that exports the event priority constants
-const DefaultEventPriority = 8;
-
 type Container = {
   rootID: string,
   children: Array<Instance | TextInstance>,
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 4a0ce2aa427d..ec15ffd27436 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -216,14 +216,14 @@ This is a property (not a function) that should be set to `true` if your rendere
 
 #### `getCurrentEventPriority`
 
-To implement this method, you'll need some constants available on the _returned_ `Renderer` object:
+To implement this method, you'll need some constants available on the special `react-reconciler/constants` entry point:
 
 ```js
 import {
   DiscreteEventPriority,
   ContinuousEventPriority,
   DefaultEventPriority,
-} from './ReactFiberReconciler/src/ReactEventPriorities';
+} from 'react-reconciler/constants';
 
 const HostConfig = {
   // ...
diff --git a/packages/react-reconciler/constants.js b/packages/react-reconciler/constants.js
new file mode 100644
index 000000000000..c98f17cf9cc0
--- /dev/null
+++ b/packages/react-reconciler/constants.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './src/ReactReconcilerConstants';
diff --git a/packages/react-reconciler/npm/constants.js b/packages/react-reconciler/npm/constants.js
new file mode 100644
index 000000000000..df4f2b61987c
--- /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.min.js');
+} else {
+  module.exports = require('./cjs/react-reconciler-constants.development.js');
+}
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index a6fd3a05a962..7a681953eeb2 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -12,6 +12,7 @@
     "LICENSE",
     "README.md",
     "build-info.json",
+    "constants.js",
     "index.js",
     "reflection.js",
     "cjs/"
diff --git a/packages/react-reconciler/src/ReactReconcilerConstants.js b/packages/react-reconciler/src/ReactReconcilerConstants.js
new file mode 100644
index 000000000000..ce41e42dc0b2
--- /dev/null
+++ b/packages/react-reconciler/src/ReactReconcilerConstants.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// These are semi-public constants exposed to any third-party renderers.
+// Only expose the minimal subset necessary to implement a host config.
+
+export {
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+} from './ReactEventPriorities';
+export {ConcurrentRoot, LegacyRoot} from './ReactRootTags';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 9c6a8c8a95d8..e37e7bbfe644 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -604,7 +604,7 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* Reflection *******/
+  /******* Reconciler Reflection *******/
   {
     moduleType: RENDERER_UTILS,
     bundleTypes: [NODE_DEV, NODE_PROD],
@@ -613,6 +613,15 @@ const bundles = [
     externals: [],
   },
 
+  /******* Reconciler Constants *******/
+  {
+    moduleType: RENDERER_UTILS,
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    entry: 'react-reconciler/constants',
+    global: 'ReactReconcilerConstants',
+    externals: [],
+  },
+
   /******* React Is *******/
   {
     bundleTypes: [
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
index 80c0a6c2cddb..1585e307aa7b 100644
--- a/scripts/rollup/modules.js
+++ b/scripts/rollup/modules.js
@@ -16,6 +16,7 @@ const importSideEffects = Object.freeze({
   'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   scheduler: HAS_NO_SIDE_EFFECTS_ON_IMPORT,
   'scheduler/tracing': HAS_NO_SIDE_EFFECTS_ON_IMPORT,
+  react: 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-fetch/node': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

From 7b84dbd1697609d4df5931422c9591fe62022cb9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Mar 2021 02:43:55 +0000
Subject: [PATCH 0350/1603] Fail build on deep requires in npm packages
 (#21063)

---
 scripts/rollup/build.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index d25110eed892..41b0685098fa 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -582,6 +582,17 @@ async function createBundle(bundle, bundleType) {
       const containsThisModule = pkg => id === pkg || id.startsWith(pkg + '/');
       const isProvidedByDependency = externals.some(containsThisModule);
       if (!shouldBundleDependencies && 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];

From eb58c3909aa19fb6ffbed27b9c9dba4aada3cb8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ari=20Perkki=C3=B6?= <ari.perkkio@gmail.com>
Date: Wed, 24 Mar 2021 18:45:27 +0200
Subject: [PATCH 0351/1603] react-hooks/exhaustive-deps: Handle optional
 chained methods as dependency (#20204) (#20247)

---
 .../ESLintRuleExhaustiveDeps-test.js          | 30 +++++++++++++++++++
 .../src/ExhaustiveDeps.js                     |  5 ++++
 2 files changed, 35 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index 2a2786dca885..430e78562491 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -3629,6 +3629,36 @@ const tests = {
         },
       ],
     },
+    {
+      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() {
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index ee259b2d37cd..2c76ca5991f7 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -1656,6 +1656,11 @@ function analyzePropertyChain(node, optionalChains) {
     return result;
   } else if (node.type === 'ChainExpression' && !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}`;

From fa868d6be7d7c387887cb4f7c391fbe2d4f987ea Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 24 Mar 2021 11:55:24 -0500
Subject: [PATCH 0352/1603] Make opaque EventPriority type a Lane internally
 (#21065)

Instead of LanePriority, we can use a Lane and skip the extra
conversion. Eventually I want to get rid of LanePriority completely.
---
 .../src/events/ReactDOMEventListener.js       | 42 ++++++++-----------
 .../src/createReactNoop.js                    |  3 +-
 .../src/ReactEventPriorities.new.js           |  8 ++--
 .../src/ReactEventPriorities.old.js           |  8 ++--
 .../src/ReactFiberLane.new.js                 |  2 +-
 .../src/ReactFiberLane.old.js                 |  2 +-
 .../src/ReactFiberReconciler.new.js           | 10 -----
 .../src/ReactFiberReconciler.old.js           | 10 -----
 .../src/ReactFiberWorkLoop.new.js             |  7 +++-
 .../src/ReactFiberWorkLoop.old.js             |  7 +++-
 .../src/ReactReconcilerConstants.js           |  1 +
 11 files changed, 40 insertions(+), 60 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 57ec840e61b2..7b2dd4c5538f 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -8,13 +8,9 @@
  */
 
 import type {AnyNativeEvent} from '../events/PluginModuleType';
-import type {
-  FiberRoot,
-  ReactPriorityLevel,
-} from 'react-reconciler/src/ReactInternalTypes';
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
-import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.new';
 
 import {
   isReplayableDiscreteEvent,
@@ -74,6 +70,8 @@ import {
   IdleEventPriority,
 } from 'react-reconciler/src/ReactEventPriorities';
 
+// TODO: These should use the opaque EventPriority type instead of LanePriority.
+// Then internally we can use a Lane.
 const InputContinuousLanePriority = enableNewReconciler
   ? InputContinuousLanePriority_new
   : InputContinuousLanePriority_old;
@@ -87,25 +85,6 @@ const getCurrentPriorityLevel = enableNewReconciler
   ? getCurrentPriorityLevel_new
   : getCurrentPriorityLevel_old;
 
-function schedulerPriorityToLanePriority(
-  schedulerPriorityLevel: ReactPriorityLevel,
-): LanePriority {
-  switch (schedulerPriorityLevel) {
-    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;
-  }
-}
-
 // TODO: can we stop exporting these?
 export let _enabled = true;
 
@@ -431,7 +410,20 @@ export function getEventPriority(domEventName: DOMEventName): * {
       // Eventually this mechanism will be replaced by a check
       // of the current priority on the native scheduler.
       const schedulerPriority = getCurrentPriorityLevel();
-      return schedulerPriorityToLanePriority(schedulerPriority);
+      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-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 1f90af7bac00..ce80ca337437 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -23,6 +23,7 @@ import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import {
   DefaultEventPriority,
+  IdleEventPriority,
   ConcurrentRoot,
   LegacyRoot,
 } from 'react-reconciler/constants';
@@ -909,7 +910,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     idleUpdates<T>(fn: () => T): T {
       const prevEventPriority = currentEventPriority;
-      currentEventPriority = NoopRenderer.IdleEventPriority;
+      currentEventPriority = IdleEventPriority;
       try {
         fn();
       } finally {
diff --git a/packages/react-reconciler/src/ReactEventPriorities.new.js b/packages/react-reconciler/src/ReactEventPriorities.new.js
index 4f127a522783..d8eb817db1c5 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.new.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.new.js
@@ -8,8 +8,8 @@
  */
 
 export {
-  SyncLanePriority as DiscreteEventPriority,
-  InputContinuousLanePriority as ContinuousEventPriority,
-  DefaultLanePriority as DefaultEventPriority,
-  IdleLanePriority as IdleEventPriority,
+  SyncLane as DiscreteEventPriority,
+  InputContinuousLane as ContinuousEventPriority,
+  DefaultLane as DefaultEventPriority,
+  IdleLane as IdleEventPriority,
 } from './ReactFiberLane.new';
diff --git a/packages/react-reconciler/src/ReactEventPriorities.old.js b/packages/react-reconciler/src/ReactEventPriorities.old.js
index 2d6a60eb8817..8db438ed25e4 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.old.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.old.js
@@ -8,8 +8,8 @@
  */
 
 export {
-  SyncLanePriority as DiscreteEventPriority,
-  InputContinuousLanePriority as ContinuousEventPriority,
-  DefaultLanePriority as DefaultEventPriority,
-  IdleLanePriority as IdleEventPriority,
+  SyncLane as DiscreteEventPriority,
+  InputContinuousLane as ContinuousEventPriority,
+  DefaultLane as DefaultEventPriority,
+  IdleLane as IdleEventPriority,
 } from './ReactFiberLane.old';
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 692f799bce85..fc594743fe53 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -118,7 +118,7 @@ export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000
 const NonIdleLanes = /*                                 */ 0b0001111111111111111111111111111;
 
 export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
-const IdleLane: Lanes = /*                              */ 0b0100000000000000000000000000000;
+export const IdleLane: Lanes = /*                       */ 0b0100000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index aaf63a66403b..4c7ac9ffd3c3 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -118,7 +118,7 @@ export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000
 const NonIdleLanes = /*                                 */ 0b0001111111111111111111111111111;
 
 export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
-const IdleLane: Lanes = /*                              */ 0b0100000000000000000000000000000;
+export const IdleLane: Lanes = /*                       */ 0b0100000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 5538b131fd92..95b8f5b38977 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -93,16 +93,6 @@ import {
 } from './ReactFiberHotReloading.new';
 import {markRenderScheduled} from './SchedulingProfiler';
 
-// Ideally host configs would import these constants from the reconciler
-// entry point, but we can't do this because of a circular dependency.
-// They are used by third-party renderers so they need to stay up to date.
-export {
-  SyncLanePriority as DiscreteEventPriority,
-  InputContinuousLanePriority as ContinuousEventPriority,
-  DefaultLanePriority as DefaultEventPriority,
-  IdleLanePriority as IdleEventPriority,
-} from './ReactFiberLane.new';
-
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 1e63a9999de2..d72c8f2c2b88 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -93,16 +93,6 @@ import {
 } from './ReactFiberHotReloading.old';
 import {markRenderScheduled} from './SchedulingProfiler';
 
-// Ideally host configs would import these constants from the reconciler
-// entry point, but we can't do this because of a circular dependency.
-// They are used by third-party renderers so they need to stay up to date.
-export {
-  SyncLanePriority as DiscreteEventPriority,
-  InputContinuousLanePriority as ContinuousEventPriority,
-  DefaultLanePriority as DefaultEventPriority,
-  IdleLanePriority as IdleEventPriority,
-} from './ReactFiberLane.old';
-
 export {registerMutableSourceForHydration} from './ReactMutableSource.old';
 export {createPortal} from './ReactPortal';
 export {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 186381b9b5cf..f669ef12fdf6 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -436,8 +436,11 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   // This update originated outside React. Ask the host environement for an
   // appropriate priority, based on the type of event.
-  const eventLanePriority = getCurrentEventPriority();
-  return findUpdateLane(eventLanePriority);
+  //
+  // The opaque type returned by the host config is internally a lane, so we can
+  // use that directly.
+  const eventLane = getCurrentEventPriority();
+  return eventLane;
 }
 
 function requestRetryLane(fiber: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index ba328d5fdb44..24ae5fdd638f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -436,8 +436,11 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   // This update originated outside React. Ask the host environement for an
   // appropriate priority, based on the type of event.
-  const eventLanePriority = getCurrentEventPriority();
-  return findUpdateLane(eventLanePriority);
+  //
+  // The opaque type returned by the host config is internally a lane, so we can
+  // use that directly.
+  const eventLane = getCurrentEventPriority();
+  return eventLane;
 }
 
 function requestRetryLane(fiber: Fiber) {
diff --git a/packages/react-reconciler/src/ReactReconcilerConstants.js b/packages/react-reconciler/src/ReactReconcilerConstants.js
index ce41e42dc0b2..7c0bdfc5ca1f 100644
--- a/packages/react-reconciler/src/ReactReconcilerConstants.js
+++ b/packages/react-reconciler/src/ReactReconcilerConstants.js
@@ -14,5 +14,6 @@ export {
   DiscreteEventPriority,
   ContinuousEventPriority,
   DefaultEventPriority,
+  IdleEventPriority,
 } from './ReactEventPriorities';
 export {ConcurrentRoot, LegacyRoot} from './ReactRootTags';

From fb8c1917e9985f83032f642e5db8b9abf089653e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 24 Mar 2021 12:58:23 -0400
Subject: [PATCH 0353/1603] Don't use nested objects to "namespace" namespace
 constants (#21073)

---
 packages/react-dom/src/client/ReactDOMComponent.js   |  4 +---
 packages/react-dom/src/client/setInnerHTML.js        |  4 ++--
 .../react-dom/src/server/ReactPartialRenderer.js     |  8 ++++----
 packages/react-dom/src/shared/DOMNamespaces.js       | 12 +++---------
 4 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 86789230ca0f..71da034466c8 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -54,7 +54,7 @@ import {
   setValueForStyles,
   validateShorthandPropertyCollisionInDev,
 } from '../shared/CSSPropertyOperations';
-import {Namespaces, getIntrinsicNamespace} from '../shared/DOMNamespaces';
+import {HTML_NAMESPACE, getIntrinsicNamespace} from '../shared/DOMNamespaces';
 import {
   getPropertyInfo,
   shouldIgnoreAttribute,
@@ -86,8 +86,6 @@ const CHILDREN = 'children';
 const STYLE = 'style';
 const HTML = '__html';
 
-const {html: HTML_NAMESPACE} = Namespaces;
-
 let warnedUnknownTags;
 let suppressHydrationWarning;
 
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 7afcd9a6306b..43319acd2bf0 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {Namespaces} from '../shared/DOMNamespaces';
+import {SVG_NAMESPACE} from '../shared/DOMNamespaces';
 import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
 import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 
@@ -25,7 +25,7 @@ const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
   node: Element,
   html: {valueOf(): {toString(): string, ...}, ...},
 ): void {
-  if (node.namespaceURI === Namespaces.svg) {
+  if (node.namespaceURI === SVG_NAMESPACE) {
     if (__DEV__) {
       if (enableTrustedTypesIntegration) {
         // TODO: reconsider the text of this warning and when it should show
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index d01c431e7318..1e536e5cdd49 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -63,7 +63,7 @@ import {
   setCurrentPartialRenderer,
 } from './ReactPartialRendererHooks';
 import {
-  Namespaces,
+  HTML_NAMESPACE,
   getIntrinsicNamespace,
   getChildNamespace,
 } from '../shared/DOMNamespaces';
@@ -747,7 +747,7 @@ class ReactDOMServerRenderer {
       type: null,
       // Assume all trees start in the HTML namespace (not totally true, but
       // this is what we did historically)
-      domNamespace: Namespaces.html,
+      domNamespace: HTML_NAMESPACE,
       children: flatChildren,
       childIndex: 0,
       context: emptyObject,
@@ -1327,12 +1327,12 @@ class ReactDOMServerRenderer {
     const tag = element.type.toLowerCase();
 
     let namespace = parentNamespace;
-    if (parentNamespace === Namespaces.html) {
+    if (parentNamespace === HTML_NAMESPACE) {
       namespace = getIntrinsicNamespace(tag);
     }
 
     if (__DEV__) {
-      if (namespace === Namespaces.html) {
+      if (namespace === HTML_NAMESPACE) {
         // Should this check be gated by parent namespace? Not sure we want to
         // allow <SVG> or <mATH>.
         if (tag !== element.type) {
diff --git a/packages/react-dom/src/shared/DOMNamespaces.js b/packages/react-dom/src/shared/DOMNamespaces.js
index ca0e8fb37702..0ce6aef355fe 100644
--- a/packages/react-dom/src/shared/DOMNamespaces.js
+++ b/packages/react-dom/src/shared/DOMNamespaces.js
@@ -5,15 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
-const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
-const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
-
-export const Namespaces = {
-  html: HTML_NAMESPACE,
-  mathml: MATH_NAMESPACE,
-  svg: SVG_NAMESPACE,
-};
+export const HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';
+export const MATH_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';
+export const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 
 // Assumes there is no parent namespace.
 export function getIntrinsicNamespace(type: string): string {

From a63f0953be9550ab18bcd48725f77a073549ec69 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 24 Mar 2021 15:04:19 -0400
Subject: [PATCH 0354/1603] Delete SyncBatchedLane (#21061)

* Delete SyncBatchedLane

* Go back to 31 lanes
---
 .../__tests__/preprocessData-test.internal.js | 24 +++---
 .../src/ReactFiberLane.new.js                 | 82 ++++++++-----------
 .../src/ReactFiberLane.old.js                 | 82 ++++++++-----------
 .../src/ReactFiberWorkLoop.new.js             | 15 ----
 .../src/ReactFiberWorkLoop.old.js             | 15 ----
 .../__tests__/DebugTracing-test.internal.js   |  4 +-
 6 files changed, 86 insertions(+), 136 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index b5b3a4561e8f..4945b5fdb4d5 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -404,7 +404,7 @@ describe(preprocessData, () => {
         {
           componentStack: '',
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.005,
           type: 'schedule-render',
         },
@@ -413,7 +413,7 @@ describe(preprocessData, () => {
           componentStack: '',
           isCascading: false,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.013,
           type: 'schedule-state-update',
         },
@@ -425,7 +425,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.004999999999999999,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.006,
           type: 'render-idle',
         },
@@ -434,7 +434,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.001,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.006,
           type: 'render',
         },
@@ -443,7 +443,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.002999999999999999,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.008,
           type: 'commit',
         },
@@ -452,7 +452,7 @@ describe(preprocessData, () => {
           depth: 1,
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.009,
           type: 'layout-effects',
         },
@@ -461,7 +461,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.002,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.012,
           type: 'passive-effects',
         },
@@ -470,7 +470,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.005000000000000001,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.015,
           type: 'render-idle',
         },
@@ -479,7 +479,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.015,
           type: 'render',
         },
@@ -488,7 +488,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.002999999999999999,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.017,
           type: 'commit',
         },
@@ -497,7 +497,7 @@ describe(preprocessData, () => {
           depth: 1,
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.018,
           type: 'layout-effects',
         },
@@ -506,7 +506,7 @@ describe(preprocessData, () => {
           depth: 0,
           duration: 0.0009999999999999974,
           laneLabels: ['Default'],
-          lanes: [5],
+          lanes: [4],
           timestamp: 0.021,
           type: 'passive-effects',
         },
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index fc594743fe53..01bcf19c91d8 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -46,8 +46,7 @@ import {
   NoPriority as NoSchedulerPriority,
 } from './SchedulerWithReactIntegration.new';
 
-export const SyncLanePriority: LanePriority = 13;
-export const SyncBatchedLanePriority: LanePriority = 12;
+export const SyncLanePriority: LanePriority = 12;
 
 const InputContinuousHydrationLanePriority: LanePriority = 11;
 export const InputContinuousLanePriority: LanePriority = 10;
@@ -74,42 +73,42 @@ export const NoLanePriority: LanePriority = 0;
 
 export const TotalLanes = 31;
 
-export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
-export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;
+export const NoLanes: Lanes = /*                        */ 0b000000000000000000000000000000;
+export const NoLane: Lane = /*                          */ 0b000000000000000000000000000000;
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
-export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
-
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000100;
-export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000001000;
-
-export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000010000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000100000;
-
-const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000001000000;
-const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111110000000;
-const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000010000000;
-const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000100000000;
-const TransitionLane3: Lane = /*                        */ 0b0000000000000000000001000000000;
-const TransitionLane4: Lane = /*                        */ 0b0000000000000000000010000000000;
-const TransitionLane5: Lane = /*                        */ 0b0000000000000000000100000000000;
-const TransitionLane6: Lane = /*                        */ 0b0000000000000000001000000000000;
-const TransitionLane7: Lane = /*                        */ 0b0000000000000000010000000000000;
-const TransitionLane8: Lane = /*                        */ 0b0000000000000000100000000000000;
-const TransitionLane9: Lane = /*                        */ 0b0000000000000001000000000000000;
-const TransitionLane10: Lane = /*                       */ 0b0000000000000010000000000000000;
-const TransitionLane11: Lane = /*                       */ 0b0000000000000100000000000000000;
-const TransitionLane12: Lane = /*                       */ 0b0000000000001000000000000000000;
-const TransitionLane13: Lane = /*                       */ 0b0000000000010000000000000000000;
-const TransitionLane14: Lane = /*                       */ 0b0000000000100000000000000000000;
-const TransitionLane15: Lane = /*                       */ 0b0000000001000000000000000000000;
-const TransitionLane16: Lane = /*                       */ 0b0000000010000000000000000000000;
-
-const RetryLanes: Lanes = /*                            */ 0b0000111100000000000000000000000;
-const RetryLane1: Lane = /*                             */ 0b0000000100000000000000000000000;
-const RetryLane2: Lane = /*                             */ 0b0000001000000000000000000000000;
-const RetryLane3: Lane = /*                             */ 0b0000010000000000000000000000000;
-const RetryLane4: Lane = /*                             */ 0b0000100000000000000000000000000;
+
+const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000010;
+export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000010000;
+
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000000100000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000001111111111111111000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000001000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000010000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000000000000100000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000000000001000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000000000010000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000000000000100000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000000000001000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane10: Lane = /*                       */ 0b0000000000000001000000000000000;
+const TransitionLane11: Lane = /*                       */ 0b0000000000000010000000000000000;
+const TransitionLane12: Lane = /*                       */ 0b0000000000000100000000000000000;
+const TransitionLane13: Lane = /*                       */ 0b0000000000001000000000000000000;
+const TransitionLane14: Lane = /*                       */ 0b0000000000010000000000000000000;
+const TransitionLane15: Lane = /*                       */ 0b0000000000100000000000000000000;
+const TransitionLane16: Lane = /*                       */ 0b0000000001000000000000000000000;
+
+const RetryLanes: Lanes = /*                            */ 0b0000111110000000000000000000000;
+const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
+const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
+const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
+const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
+const RetryLane5: Lane = /*                             */ 0b0000100000000000000000000000000;
 
 export const SomeRetryLane: Lane = RetryLane1;
 
@@ -130,9 +129,6 @@ export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
     if (lanes & SyncLane) {
       labels.push('Sync');
     }
-    if (lanes & SyncBatchedLane) {
-      labels.push('SyncBatched');
-    }
     if (lanes & InputContinuousHydrationLane) {
       labels.push('InputContinuousHydration');
     }
@@ -194,9 +190,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case SyncLane:
       return_highestLanePriority = SyncLanePriority;
       return SyncLane;
-    case SyncBatchedLane:
-      return_highestLanePriority = SyncBatchedLanePriority;
-      return SyncBatchedLane;
     case InputContinuousHydrationLane:
       return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
@@ -234,6 +227,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
+    case RetryLane5:
       return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
@@ -265,7 +259,6 @@ export function lanePriorityToSchedulerPriority(
 ): ReactPriorityLevel {
   switch (lanePriority) {
     case SyncLanePriority:
-    case SyncBatchedLanePriority:
       return ImmediateSchedulerPriority;
     case InputContinuousHydrationLanePriority:
     case InputContinuousLanePriority:
@@ -547,8 +540,6 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
       break;
     case SyncLanePriority:
       return SyncLane;
-    case SyncBatchedLanePriority:
-      return SyncBatchedLane;
     case InputContinuousLanePriority:
       return InputContinuousLane;
     case DefaultLanePriority:
@@ -805,7 +796,6 @@ export function getBumpedLaneForHydration(
   let lane;
   switch (highestLanePriority) {
     case SyncLanePriority:
-    case SyncBatchedLanePriority:
       lane = NoLane;
       break;
     case InputContinuousLanePriority:
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4c7ac9ffd3c3..90ffc0535968 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -46,8 +46,7 @@ import {
   NoPriority as NoSchedulerPriority,
 } from './SchedulerWithReactIntegration.old';
 
-export const SyncLanePriority: LanePriority = 13;
-export const SyncBatchedLanePriority: LanePriority = 12;
+export const SyncLanePriority: LanePriority = 12;
 
 const InputContinuousHydrationLanePriority: LanePriority = 11;
 export const InputContinuousLanePriority: LanePriority = 10;
@@ -74,42 +73,42 @@ export const NoLanePriority: LanePriority = 0;
 
 export const TotalLanes = 31;
 
-export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
-export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;
+export const NoLanes: Lanes = /*                        */ 0b000000000000000000000000000000;
+export const NoLane: Lane = /*                          */ 0b000000000000000000000000000000;
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
-export const SyncBatchedLane: Lane = /*                 */ 0b0000000000000000000000000000010;
-
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000100;
-export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000001000;
-
-export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000010000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000100000;
-
-const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000001000000;
-const TransitionLanes: Lanes = /*                       */ 0b0000000011111111111111110000000;
-const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000010000000;
-const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000100000000;
-const TransitionLane3: Lane = /*                        */ 0b0000000000000000000001000000000;
-const TransitionLane4: Lane = /*                        */ 0b0000000000000000000010000000000;
-const TransitionLane5: Lane = /*                        */ 0b0000000000000000000100000000000;
-const TransitionLane6: Lane = /*                        */ 0b0000000000000000001000000000000;
-const TransitionLane7: Lane = /*                        */ 0b0000000000000000010000000000000;
-const TransitionLane8: Lane = /*                        */ 0b0000000000000000100000000000000;
-const TransitionLane9: Lane = /*                        */ 0b0000000000000001000000000000000;
-const TransitionLane10: Lane = /*                       */ 0b0000000000000010000000000000000;
-const TransitionLane11: Lane = /*                       */ 0b0000000000000100000000000000000;
-const TransitionLane12: Lane = /*                       */ 0b0000000000001000000000000000000;
-const TransitionLane13: Lane = /*                       */ 0b0000000000010000000000000000000;
-const TransitionLane14: Lane = /*                       */ 0b0000000000100000000000000000000;
-const TransitionLane15: Lane = /*                       */ 0b0000000001000000000000000000000;
-const TransitionLane16: Lane = /*                       */ 0b0000000010000000000000000000000;
-
-const RetryLanes: Lanes = /*                            */ 0b0000111100000000000000000000000;
-const RetryLane1: Lane = /*                             */ 0b0000000100000000000000000000000;
-const RetryLane2: Lane = /*                             */ 0b0000001000000000000000000000000;
-const RetryLane3: Lane = /*                             */ 0b0000010000000000000000000000000;
-const RetryLane4: Lane = /*                             */ 0b0000100000000000000000000000000;
+
+const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000010;
+export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
+
+export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
+export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000010000;
+
+const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000000100000;
+const TransitionLanes: Lanes = /*                       */ 0b0000000001111111111111111000000;
+const TransitionLane1: Lane = /*                        */ 0b0000000000000000000000001000000;
+const TransitionLane2: Lane = /*                        */ 0b0000000000000000000000010000000;
+const TransitionLane3: Lane = /*                        */ 0b0000000000000000000000100000000;
+const TransitionLane4: Lane = /*                        */ 0b0000000000000000000001000000000;
+const TransitionLane5: Lane = /*                        */ 0b0000000000000000000010000000000;
+const TransitionLane6: Lane = /*                        */ 0b0000000000000000000100000000000;
+const TransitionLane7: Lane = /*                        */ 0b0000000000000000001000000000000;
+const TransitionLane8: Lane = /*                        */ 0b0000000000000000010000000000000;
+const TransitionLane9: Lane = /*                        */ 0b0000000000000000100000000000000;
+const TransitionLane10: Lane = /*                       */ 0b0000000000000001000000000000000;
+const TransitionLane11: Lane = /*                       */ 0b0000000000000010000000000000000;
+const TransitionLane12: Lane = /*                       */ 0b0000000000000100000000000000000;
+const TransitionLane13: Lane = /*                       */ 0b0000000000001000000000000000000;
+const TransitionLane14: Lane = /*                       */ 0b0000000000010000000000000000000;
+const TransitionLane15: Lane = /*                       */ 0b0000000000100000000000000000000;
+const TransitionLane16: Lane = /*                       */ 0b0000000001000000000000000000000;
+
+const RetryLanes: Lanes = /*                            */ 0b0000111110000000000000000000000;
+const RetryLane1: Lane = /*                             */ 0b0000000010000000000000000000000;
+const RetryLane2: Lane = /*                             */ 0b0000000100000000000000000000000;
+const RetryLane3: Lane = /*                             */ 0b0000001000000000000000000000000;
+const RetryLane4: Lane = /*                             */ 0b0000010000000000000000000000000;
+const RetryLane5: Lane = /*                             */ 0b0000100000000000000000000000000;
 
 export const SomeRetryLane: Lane = RetryLane1;
 
@@ -130,9 +129,6 @@ export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
     if (lanes & SyncLane) {
       labels.push('Sync');
     }
-    if (lanes & SyncBatchedLane) {
-      labels.push('SyncBatched');
-    }
     if (lanes & InputContinuousHydrationLane) {
       labels.push('InputContinuousHydration');
     }
@@ -194,9 +190,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case SyncLane:
       return_highestLanePriority = SyncLanePriority;
       return SyncLane;
-    case SyncBatchedLane:
-      return_highestLanePriority = SyncBatchedLanePriority;
-      return SyncBatchedLane;
     case InputContinuousHydrationLane:
       return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
@@ -234,6 +227,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
+    case RetryLane5:
       return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
@@ -265,7 +259,6 @@ export function lanePriorityToSchedulerPriority(
 ): ReactPriorityLevel {
   switch (lanePriority) {
     case SyncLanePriority:
-    case SyncBatchedLanePriority:
       return ImmediateSchedulerPriority;
     case InputContinuousHydrationLanePriority:
     case InputContinuousLanePriority:
@@ -547,8 +540,6 @@ export function findUpdateLane(lanePriority: LanePriority): Lane {
       break;
     case SyncLanePriority:
       return SyncLane;
-    case SyncBatchedLanePriority:
-      return SyncBatchedLane;
     case InputContinuousLanePriority:
       return InputContinuousLane;
     case DefaultLanePriority:
@@ -805,7 +796,6 @@ export function getBumpedLaneForHydration(
   let lane;
   switch (highestLanePriority) {
     case SyncLanePriority:
-    case SyncBatchedLanePriority:
       lane = NoLane;
       break;
     case InputContinuousLanePriority:
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f669ef12fdf6..0e57b678d570 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -132,12 +132,10 @@ import {
 import {
   NoLanePriority,
   SyncLanePriority,
-  SyncBatchedLanePriority,
   DefaultLanePriority,
   NoLanes,
   NoLane,
   SyncLane,
-  SyncBatchedLane,
   NoTimestamp,
   findUpdateLane,
   claimNextTransitionLane,
@@ -380,10 +378,6 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   const mode = fiber.mode;
   if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
-  } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentUpdateLanePriority() === SyncLanePriority
-      ? (SyncLane: Lane)
-      : (SyncBatchedLane: Lane);
   } else if (
     !deferRenderPhaseUpdateToNextBatch &&
     (executionContext & RenderContext) !== NoContext &&
@@ -452,10 +446,6 @@ function requestRetryLane(fiber: Fiber) {
   const mode = fiber.mode;
   if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
-  } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentUpdateLanePriority() === SyncLanePriority
-      ? (SyncLane: Lane)
-      : (SyncBatchedLane: Lane);
   }
 
   // See `requestUpdateLane` for explanation of `currentEventWipLanes`
@@ -706,11 +696,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbackQueue);
     }
     newCallbackNode = null;
-  } else if (newCallbackPriority === SyncBatchedLanePriority) {
-    newCallbackNode = scheduleCallback(
-      ImmediateSchedulerPriority,
-      performSyncWorkOnRoot.bind(null, root),
-    );
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
       newCallbackPriority,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 24ae5fdd638f..8a77e6546766 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -132,12 +132,10 @@ import {
 import {
   NoLanePriority,
   SyncLanePriority,
-  SyncBatchedLanePriority,
   DefaultLanePriority,
   NoLanes,
   NoLane,
   SyncLane,
-  SyncBatchedLane,
   NoTimestamp,
   findUpdateLane,
   claimNextTransitionLane,
@@ -380,10 +378,6 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   const mode = fiber.mode;
   if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
-  } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentUpdateLanePriority() === SyncLanePriority
-      ? (SyncLane: Lane)
-      : (SyncBatchedLane: Lane);
   } else if (
     !deferRenderPhaseUpdateToNextBatch &&
     (executionContext & RenderContext) !== NoContext &&
@@ -452,10 +446,6 @@ function requestRetryLane(fiber: Fiber) {
   const mode = fiber.mode;
   if ((mode & ConcurrentMode) === NoMode) {
     return (SyncLane: Lane);
-  } else if ((mode & ConcurrentMode) === NoMode) {
-    return getCurrentUpdateLanePriority() === SyncLanePriority
-      ? (SyncLane: Lane)
-      : (SyncBatchedLane: Lane);
   }
 
   // See `requestUpdateLane` for explanation of `currentEventWipLanes`
@@ -706,11 +696,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbackQueue);
     }
     newCallbackNode = null;
-  } else if (newCallbackPriority === SyncBatchedLanePriority) {
-    newCallbackNode = scheduleCallback(
-      ImmediateSchedulerPriority,
-      performSyncWorkOnRoot.bind(null, root),
-    );
   } else {
     const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
       newCallbackPriority,
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 3191158b67d1..83fc6b2eba89 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -16,8 +16,8 @@ describe('DebugTracing', () => {
 
   let logs;
 
-  const DEFAULT_LANE_STRING = '0b0000000000000000000000000100000';
-  const RETRY_LANE_STRING = '0b0000000100000000000000000000000';
+  const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000';
+  const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
 
   beforeEach(() => {
     jest.resetModules();

From 148f8e497c7d37a3c7ab99f01dec2692427272b1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 24 Mar 2021 19:57:17 +0000
Subject: [PATCH 0355/1603] Add pointerenter/leave priorities (#21077)

---
 packages/react-dom/src/events/ReactDOMEventListener.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 7b2dd4c5538f..d1d8646d6087 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -404,6 +404,8 @@ export function getEventPriority(domEventName: DOMEventName): * {
     // eslint-disable-next-line no-fallthrough
     case 'mouseenter':
     case 'mouseleave':
+    case 'pointerenter':
+    case 'pointerleave':
       return ContinuousEventPriority;
     case 'message': {
       // We might be in the Scheduler callback.

From 6a589ad711db330c68a371321450ee2f0087e22f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 25 Mar 2021 11:48:39 -0400
Subject: [PATCH 0356/1603] Add separator comment between text nodes (#21099)

This is needed to avoid mutating the DOM during hydration. This *always*
adds it even when it's just text children.

We need to avoid this overhead but it's a somewhat tricky problem to solve
so we defer the optimization to later.
---
 .../src/__tests__/ReactDOMFizzServerBrowser-test.js  |  6 ++++--
 .../src/__tests__/ReactDOMFizzServerNode-test.js     | 12 +++++++-----
 .../src/server/ReactDOMServerFormatConfig.js         |  9 ++++++++-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index b55bb446f6fc..a61727d7fdf0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -55,7 +55,7 @@ describe('ReactDOMFizzServer', () => {
       <div>hello world</div>,
     );
     const result = await readResult(stream);
-    expect(result).toBe('<div>hello world</div>');
+    expect(result).toMatchInlineSnapshot(`"<div>hello world<!-- --></div>"`);
   });
 
   // @gate experimental
@@ -93,7 +93,9 @@ describe('ReactDOMFizzServer', () => {
     expect(isComplete).toBe(true);
 
     const result = await readResult(stream);
-    expect(result).toBe('<div><!--$-->Done<!--/$--></div>');
+    expect(result).toMatchInlineSnapshot(
+      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
+    );
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 5377607a5795..c6a774fcf322 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -65,7 +65,9 @@ describe('ReactDOMFizzServer', () => {
     );
     startWriting();
     jest.runAllTimers();
-    expect(output.result).toBe('<div>hello world</div>');
+    expect(output.result).toMatchInlineSnapshot(
+      `"<div>hello world<!-- --></div>"`,
+    );
   });
 
   // @gate experimental
@@ -81,8 +83,8 @@ describe('ReactDOMFizzServer', () => {
       '<!doctype html><html><head><title>test</title><head><body>';
     // Then React starts writing.
     startWriting();
-    expect(output.result).toBe(
-      '<!doctype html><html><head><title>test</title><head><body><div>hello world</div>',
+    expect(output.result).toMatchInlineSnapshot(
+      `"<!doctype html><html><head><title>test</title><head><body><div>hello world<!-- --></div>"`,
     );
   });
 
@@ -129,8 +131,8 @@ describe('ReactDOMFizzServer', () => {
       '<!doctype html><html><head><title>test</title><head><body>';
     // Then React starts writing.
     startWriting();
-    expect(output.result).toBe(
-      '<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!--/$--></div>',
+    expect(output.result).toMatchInlineSnapshot(
+      `"<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!-- --><!--/$--></div>"`,
     );
   });
 
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index e9d337724e19..c0e55b0a4601 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -104,6 +104,8 @@ export function pushEmpty(
   }
 }
 
+const textSeparator = stringToPrecomputedChunk('<!-- -->');
+
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
@@ -113,7 +115,12 @@ export function pushTextInstance(
   if (assignID !== null) {
     pushDummyNodeWithID(target, responseState, assignID);
   }
-  target.push(stringToChunk(encodeHTMLTextNode(text)));
+  if (text === '') {
+    // Empty text doesn't have a DOM node representation and the hydration is aware of this.
+    return;
+  }
+  // TODO: Avoid adding a text separator in common cases.
+  target.push(stringToChunk(encodeHTMLTextNode(text)), textSeparator);
 }
 
 const startTag1 = stringToPrecomputedChunk('<');

From 03ede83d2ea1878e5cb82c3c17844621989caf66 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Mar 2021 11:21:41 -0500
Subject: [PATCH 0357/1603] Use EventPriority to track update priority (#21082)

Instead of LanePriority. Internally, EventPriority is just a lane, so
this skips an extra conversion. Since EventPriority is a "public" (to
the host config) type, I was also able to remove some deep imports
of the Lane module.

This gets us most of the way to deleting the LanePriority entirely.
---
 ...DOMServerPartialHydration-test.internal.js | 10 +-
 ...MServerSelectiveHydration-test.internal.js |  9 +-
 packages/react-dom/src/client/ReactDOM.js     |  8 +-
 .../src/events/ReactDOMEventListener.js       | 29 +-----
 .../src/events/ReactDOMEventReplaying.js      | 28 ++++--
 .../src/ReactEventPriorities.js               | 61 +++++++++---
 .../src/ReactEventPriorities.new.js           | 70 +++++++++++++-
 .../src/ReactEventPriorities.old.js           | 70 +++++++++++++-
 .../src/ReactFiberCommitWork.new.js           | 80 +++-------------
 .../src/ReactFiberCommitWork.old.js           | 80 +++-------------
 .../src/ReactFiberDevToolsHook.new.js         | 41 ++++++--
 .../src/ReactFiberDevToolsHook.old.js         | 41 ++++++--
 .../src/ReactFiberHooks.new.js                | 22 +++--
 .../src/ReactFiberHooks.old.js                | 22 +++--
 .../src/ReactFiberLane.new.js                 | 45 +--------
 .../src/ReactFiberLane.old.js                 | 45 +--------
 .../src/ReactFiberReconciler.js               | 10 +-
 .../src/ReactFiberReconciler.new.js           | 20 ++--
 .../src/ReactFiberReconciler.old.js           | 20 ++--
 .../src/ReactFiberWorkLoop.new.js             | 93 ++++++++++---------
 .../src/ReactFiberWorkLoop.old.js             | 93 ++++++++++---------
 .../src/SchedulerWithReactIntegration.new.js  | 16 ++--
 .../src/SchedulerWithReactIntegration.old.js  | 16 ++--
 .../__tests__/ReactIncrementalUpdates-test.js | 16 ++--
 .../ReactDOMTracing-test.internal.js          | 18 ++--
 25 files changed, 484 insertions(+), 479 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 5f127d37fcdd..d37845c01b38 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -17,11 +17,7 @@ let ReactFeatureFlags;
 let Suspense;
 let SuspenseList;
 let act;
-
-// Copied from ReactFiberLanes. Don't do this!
-// This is hard coded directly to avoid needing to import, and
-// we'll remove this as we replace runWithPriority with React APIs.
-export const IdleLanePriority = 2;
+let IdleEventPriority;
 
 function dispatchMouseEvent(to, from) {
   if (!to) {
@@ -89,6 +85,8 @@ describe('ReactDOMServerPartialHydration', () => {
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
     SuspenseList = React.SuspenseList;
+
+    IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
 
   // Note: This is based on a similar component we use in www. We can delete
@@ -628,7 +626,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.textContent).toBe('Hello');
 
     // Schedule an update at idle priority
-    ReactDOM.unstable_runWithPriority(IdleLanePriority, () => {
+    ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
       root.render(<App text="Hi" className="hi" />);
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index cadc00e886fa..4e3192fdce76 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -19,10 +19,7 @@ let Scheduler;
 let Suspense;
 let act;
 
-// Copied from ReactFiberLanes. Don't do this!
-// This is hard coded directly to avoid needing to import, and
-// we'll remove this as we replace runWithPriority with React APIs.
-export const IdleLanePriority = 2;
+let IdleEventPriority;
 
 function dispatchMouseHoverEvent(to, from) {
   if (!to) {
@@ -101,7 +98,7 @@ function dispatchClickEvent(target) {
 // 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(IdleLanePriority, () => {
+  ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
     const prevEvent = window.event;
     window.event = {type: 'message'};
     try {
@@ -125,6 +122,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
     act = ReactTestUtils.unstable_concurrentAct;
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
+
+    IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 7cff285a938d..aeeb5b307063 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -35,9 +35,11 @@ import {
   attemptDiscreteHydration,
   attemptContinuousHydration,
   attemptHydrationAtCurrentPriority,
-  runWithPriority,
-  getCurrentUpdateLanePriority,
 } from 'react-reconciler/src/ReactFiberReconciler';
+import {
+  runWithPriority,
+  getCurrentUpdatePriority,
+} from 'react-reconciler/src/ReactEventPriorities';
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
@@ -74,7 +76,7 @@ setAttemptSynchronousHydration(attemptSynchronousHydration);
 setAttemptDiscreteHydration(attemptDiscreteHydration);
 setAttemptContinuousHydration(attemptContinuousHydration);
 setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
-setGetCurrentUpdatePriority(getCurrentUpdateLanePriority);
+setGetCurrentUpdatePriority(getCurrentUpdatePriority);
 setAttemptHydrationAtPriority(runWithPriority);
 
 let didWarnAboutUnstableCreatePortal = false;
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index d1d8646d6087..8197a2da242a 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -44,16 +44,6 @@ import {
   discreteUpdates,
 } from './ReactDOMUpdateBatching';
 
-import {
-  InputContinuousLanePriority as InputContinuousLanePriority_old,
-  getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
-  setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_old,
-} from 'react-reconciler/src/ReactFiberLane.old';
-import {
-  InputContinuousLanePriority as InputContinuousLanePriority_new,
-  getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
-  setCurrentUpdateLanePriority as setCurrentUpdateLanePriority_new,
-} from 'react-reconciler/src/ReactFiberLane.new';
 import {getCurrentPriorityLevel as getCurrentPriorityLevel_old} from 'react-reconciler/src/SchedulerWithReactIntegration.old';
 import {
   getCurrentPriorityLevel as getCurrentPriorityLevel_new,
@@ -68,19 +58,10 @@ import {
   ContinuousEventPriority,
   DefaultEventPriority,
   IdleEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
 
-// TODO: These should use the opaque EventPriority type instead of LanePriority.
-// Then internally we can use a Lane.
-const InputContinuousLanePriority = enableNewReconciler
-  ? InputContinuousLanePriority_new
-  : InputContinuousLanePriority_old;
-const getCurrentUpdateLanePriority = enableNewReconciler
-  ? getCurrentUpdateLanePriority_new
-  : getCurrentUpdateLanePriority_old;
-const setCurrentUpdateLanePriority = enableNewReconciler
-  ? setCurrentUpdateLanePriority_new
-  : setCurrentUpdateLanePriority_old;
 const getCurrentPriorityLevel = enableNewReconciler
   ? getCurrentPriorityLevel_new
   : getCurrentPriorityLevel_old;
@@ -167,12 +148,12 @@ function dispatchContinuousEvent(
   container,
   nativeEvent,
 ) {
-  const previousPriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(InputContinuousLanePriority);
+    setCurrentUpdatePriority(ContinuousEventPriority);
     dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
   } finally {
-    setCurrentUpdateLanePriority(previousPriority);
+    setCurrentUpdatePriority(previousPriority);
   }
 }
 
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 3a084605e575..0587899fd8bd 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -12,7 +12,7 @@ import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
 import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
-import type {LanePriority} from 'react-reconciler/src/ReactFiberLane.old';
+import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
 import {
@@ -30,6 +30,7 @@ import {
   getClosestInstanceFromNode,
 } from '../client/ReactDOMComponentTree';
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
+import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 let attemptSynchronousHydration: (fiber: Object) => void;
 
@@ -57,16 +58,16 @@ export function setAttemptHydrationAtCurrentPriority(
   attemptHydrationAtCurrentPriority = fn;
 }
 
-let getCurrentUpdatePriority: () => LanePriority;
+let getCurrentUpdatePriority: () => EventPriority;
 
-export function setGetCurrentUpdatePriority(fn: () => LanePriority) {
+export function setGetCurrentUpdatePriority(fn: () => EventPriority) {
   getCurrentUpdatePriority = fn;
 }
 
-let attemptHydrationAtPriority: <T>(priority: LanePriority, fn: () => T) => T;
+let attemptHydrationAtPriority: <T>(priority: EventPriority, fn: () => T) => T;
 
 export function setAttemptHydrationAtPriority(
-  fn: <T>(priority: LanePriority, fn: () => T) => T,
+  fn: <T>(priority: EventPriority, fn: () => T) => T,
 ) {
   attemptHydrationAtPriority = fn;
 }
@@ -109,7 +110,7 @@ const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
 type QueuedHydrationTarget = {|
   blockedOn: null | Container | SuspenseInstance,
   target: Node,
-  lanePriority: LanePriority,
+  priority: EventPriority,
 |};
 const queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
 
@@ -390,7 +391,7 @@ function attemptExplicitHydrationTarget(
           // We're blocked on hydrating this boundary.
           // Increase its priority.
           queuedTarget.blockedOn = instance;
-          attemptHydrationAtPriority(queuedTarget.lanePriority, () => {
+          attemptHydrationAtPriority(queuedTarget.priority, () => {
             attemptHydrationAtCurrentPriority(nearestMounted);
           });
 
@@ -412,16 +413,23 @@ function attemptExplicitHydrationTarget(
 
 export function queueExplicitHydrationTarget(target: Node): void {
   if (enableSelectiveHydration) {
-    const updateLanePriority = getCurrentUpdatePriority();
+    // TODO: This will read the priority if it's dispatched by the React
+    // event system but not native events. Should read window.event.type, like
+    // we do for updates (getCurrentEventPriority).
+    const updatePriority = getCurrentUpdatePriority();
     const queuedTarget: QueuedHydrationTarget = {
       blockedOn: null,
       target: target,
-      lanePriority: updateLanePriority,
+      priority: updatePriority,
     };
     let i = 0;
     for (; i < queuedExplicitHydrationTargets.length; i++) {
+      // Stop once we hit the first target with lower priority than
       if (
-        updateLanePriority <= queuedExplicitHydrationTargets[i].lanePriority
+        !isHigherEventPriority(
+          updatePriority,
+          queuedExplicitHydrationTargets[i].priority,
+        )
       ) {
         break;
       }
diff --git a/packages/react-reconciler/src/ReactEventPriorities.js b/packages/react-reconciler/src/ReactEventPriorities.js
index 76385f612afe..46223aa70df5 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.js
@@ -14,6 +14,10 @@ import {
   ContinuousEventPriority as ContinuousEventPriority_old,
   DefaultEventPriority as DefaultEventPriority_old,
   IdleEventPriority as IdleEventPriority_old,
+  getCurrentUpdatePriority as getCurrentUpdatePriority_old,
+  setCurrentUpdatePriority as setCurrentUpdatePriority_old,
+  runWithPriority as runWithPriority_old,
+  isHigherEventPriority as isHigherEventPriority_old,
 } from './ReactEventPriorities.old';
 
 import {
@@ -21,17 +25,50 @@ import {
   ContinuousEventPriority as ContinuousEventPriority_new,
   DefaultEventPriority as DefaultEventPriority_new,
   IdleEventPriority as IdleEventPriority_new,
+  getCurrentUpdatePriority as getCurrentUpdatePriority_new,
+  setCurrentUpdatePriority as setCurrentUpdatePriority_new,
+  runWithPriority as runWithPriority_new,
+  isHigherEventPriority as isHigherEventPriority_new,
 } from './ReactEventPriorities.new';
 
-export const DiscreteEventPriority = enableNewReconciler
-  ? DiscreteEventPriority_new
-  : DiscreteEventPriority_old;
-export const ContinuousEventPriority = enableNewReconciler
-  ? ContinuousEventPriority_new
-  : ContinuousEventPriority_old;
-export const DefaultEventPriority = enableNewReconciler
-  ? DefaultEventPriority_new
-  : DefaultEventPriority_old;
-export const IdleEventPriority = enableNewReconciler
-  ? IdleEventPriority_new
-  : IdleEventPriority_old;
+export opaque type EventPriority = number;
+
+export const DiscreteEventPriority: EventPriority = enableNewReconciler
+  ? (DiscreteEventPriority_new: any)
+  : (DiscreteEventPriority_old: any);
+export const ContinuousEventPriority: EventPriority = enableNewReconciler
+  ? (ContinuousEventPriority_new: any)
+  : (ContinuousEventPriority_old: any);
+export const DefaultEventPriority: EventPriority = enableNewReconciler
+  ? (DefaultEventPriority_new: any)
+  : (DefaultEventPriority_old: any);
+export const IdleEventPriority: EventPriority = enableNewReconciler
+  ? (IdleEventPriority_new: any)
+  : (IdleEventPriority_old: any);
+
+export function runWithPriority<T>(priority: EventPriority, fn: () => T): T {
+  return enableNewReconciler
+    ? runWithPriority_new((priority: any), fn)
+    : runWithPriority_old((priority: any), fn);
+}
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return enableNewReconciler
+    ? (getCurrentUpdatePriority_new(): any)
+    : (getCurrentUpdatePriority_old(): any);
+}
+
+export function setCurrentUpdatePriority(priority: EventPriority) {
+  return enableNewReconciler
+    ? setCurrentUpdatePriority_new((priority: any))
+    : setCurrentUpdatePriority_old((priority: any));
+}
+
+export function isHigherEventPriority(
+  a: EventPriority,
+  b: EventPriority,
+): boolean {
+  return enableNewReconciler
+    ? isHigherEventPriority_new((a: any), (b: any))
+    : isHigherEventPriority_old((a: any), (b: any));
+}
diff --git a/packages/react-reconciler/src/ReactEventPriorities.new.js b/packages/react-reconciler/src/ReactEventPriorities.new.js
index d8eb817db1c5..2c1b9c249fa9 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.new.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.new.js
@@ -7,9 +7,69 @@
  * @flow
  */
 
-export {
-  SyncLane as DiscreteEventPriority,
-  InputContinuousLane as ContinuousEventPriority,
-  DefaultLane as DefaultEventPriority,
-  IdleLane as IdleEventPriority,
+import type {Lane, Lanes} from './ReactFiberLane.new';
+
+import {
+  NoLane,
+  SyncLane,
+  InputContinuousLane,
+  DefaultLane,
+  IdleLane,
+  getHighestPriorityLane,
+  includesNonIdleWork,
 } from './ReactFiberLane.new';
+
+export opaque type EventPriority = Lane;
+
+export const DiscreteEventPriority: EventPriority = SyncLane;
+export const ContinuousEventPriority: EventPriority = InputContinuousLane;
+export const DefaultEventPriority: EventPriority = DefaultLane;
+export const IdleEventPriority: EventPriority = IdleLane;
+
+let currentUpdatePriority: EventPriority = NoLane;
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return currentUpdatePriority;
+}
+
+export function setCurrentUpdatePriority(newPriority: EventPriority) {
+  currentUpdatePriority = newPriority;
+}
+
+export function runWithPriority<T>(priority: EventPriority, fn: () => T): T {
+  const previousPriority = currentUpdatePriority;
+  try {
+    currentUpdatePriority = priority;
+    return fn();
+  } finally {
+    currentUpdatePriority = previousPriority;
+  }
+}
+
+export function higherEventPriority(
+  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 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/ReactEventPriorities.old.js b/packages/react-reconciler/src/ReactEventPriorities.old.js
index 8db438ed25e4..7e1b0acb7a9a 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.old.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.old.js
@@ -7,9 +7,69 @@
  * @flow
  */
 
-export {
-  SyncLane as DiscreteEventPriority,
-  InputContinuousLane as ContinuousEventPriority,
-  DefaultLane as DefaultEventPriority,
-  IdleLane as IdleEventPriority,
+import type {Lane, Lanes} from './ReactFiberLane.old';
+
+import {
+  NoLane,
+  SyncLane,
+  InputContinuousLane,
+  DefaultLane,
+  IdleLane,
+  getHighestPriorityLane,
+  includesNonIdleWork,
 } from './ReactFiberLane.old';
+
+export opaque type EventPriority = Lane;
+
+export const DiscreteEventPriority: EventPriority = SyncLane;
+export const ContinuousEventPriority: EventPriority = InputContinuousLane;
+export const DefaultEventPriority: EventPriority = DefaultLane;
+export const IdleEventPriority: EventPriority = IdleLane;
+
+let currentUpdatePriority: EventPriority = NoLane;
+
+export function getCurrentUpdatePriority(): EventPriority {
+  return currentUpdatePriority;
+}
+
+export function setCurrentUpdatePriority(newPriority: EventPriority) {
+  currentUpdatePriority = newPriority;
+}
+
+export function runWithPriority<T>(priority: EventPriority, fn: () => T): T {
+  const previousPriority = currentUpdatePriority;
+  try {
+    currentUpdatePriority = priority;
+    return fn();
+  } finally {
+    currentUpdatePriority = previousPriority;
+  }
+}
+
+export function higherEventPriority(
+  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 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/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 3bf394007422..9bcaa5a4d753 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -17,7 +17,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {LanePriority, Lanes} from './ReactFiberLane.new';
+import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
@@ -1067,7 +1067,6 @@ function commitUnmount(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   onCommitUnmount(current);
 
@@ -1127,12 +1126,7 @@ function commitUnmount(
       // We are also not using this parent because
       // the portal will get pushed immediately.
       if (supportsMutation) {
-        unmountHostComponents(
-          finishedRoot,
-          current,
-          nearestMountedAncestor,
-          renderPriorityLevel,
-        );
+        unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
       } else if (supportsPersistence) {
         emptyPortalContainer(current);
       }
@@ -1163,7 +1157,6 @@ function commitNestedUnmounts(
   finishedRoot: FiberRoot,
   root: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   // While we're inside a removed host node we don't want to call
   // removeChild on the inner nodes because they're removed by the top
@@ -1172,12 +1165,7 @@ function commitNestedUnmounts(
   // we do an inner loop while we're still inside the host node.
   let node: Fiber = root;
   while (true) {
-    commitUnmount(
-      finishedRoot,
-      node,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    commitUnmount(finishedRoot, node, nearestMountedAncestor);
     // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
     if (
@@ -1532,7 +1520,6 @@ function unmountHostComponents(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
@@ -1576,12 +1563,7 @@ function unmountHostComponents(
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
+      commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor);
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -1634,12 +1616,7 @@ function unmountHostComponents(
         continue;
       }
     } else {
-      commitUnmount(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
+      commitUnmount(finishedRoot, node, nearestMountedAncestor);
       // Visit children because we may find more host components below.
       if (node.child !== null) {
         node.child.return = node;
@@ -1670,25 +1647,14 @@ function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(
-      finishedRoot,
-      current,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
   } else {
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(
-      finishedRoot,
-      current,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    commitNestedUnmounts(finishedRoot, current, nearestMountedAncestor);
   }
 
   detachFiberMutation(current);
@@ -2009,19 +1975,12 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-export function commitMutationEffects(
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-  firstChild: Fiber,
-) {
+export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
   nextEffect = firstChild;
-  commitMutationEffects_begin(root, renderPriorityLevel);
+  commitMutationEffects_begin(root);
 }
 
-function commitMutationEffects_begin(
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-) {
+function commitMutationEffects_begin(root: FiberRoot) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
@@ -2038,7 +1997,6 @@ function commitMutationEffects_begin(
             root,
             childToDelete,
             fiber,
-            renderPriorityLevel,
           );
           if (hasCaughtError()) {
             const error = clearCaughtError();
@@ -2046,7 +2004,7 @@ function commitMutationEffects_begin(
           }
         } else {
           try {
-            commitDeletion(root, childToDelete, fiber, renderPriorityLevel);
+            commitDeletion(root, childToDelete, fiber);
           } catch (error) {
             captureCommitPhaseError(childToDelete, fiber, error);
           }
@@ -2059,15 +2017,12 @@ function commitMutationEffects_begin(
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
-      commitMutationEffects_complete(root, renderPriorityLevel);
+      commitMutationEffects_complete(root);
     }
   }
 }
 
-function commitMutationEffects_complete(
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-) {
+function commitMutationEffects_complete(root: FiberRoot) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     if (__DEV__) {
@@ -2078,7 +2033,6 @@ function commitMutationEffects_complete(
         null,
         fiber,
         root,
-        renderPriorityLevel,
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
@@ -2087,7 +2041,7 @@ function commitMutationEffects_complete(
       resetCurrentDebugFiberInDEV();
     } else {
       try {
-        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
+        commitMutationEffectsOnFiber(fiber, root);
       } catch (error) {
         captureCommitPhaseError(fiber, fiber.return, error);
       }
@@ -2104,11 +2058,7 @@ function commitMutationEffects_complete(
   }
 }
 
-function commitMutationEffectsOnFiber(
-  finishedWork: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-) {
+function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7f4da55e76e2..6b184f30d3d9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -17,7 +17,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {LanePriority, Lanes} from './ReactFiberLane.old';
+import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
@@ -1067,7 +1067,6 @@ function commitUnmount(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   onCommitUnmount(current);
 
@@ -1127,12 +1126,7 @@ function commitUnmount(
       // We are also not using this parent because
       // the portal will get pushed immediately.
       if (supportsMutation) {
-        unmountHostComponents(
-          finishedRoot,
-          current,
-          nearestMountedAncestor,
-          renderPriorityLevel,
-        );
+        unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
       } else if (supportsPersistence) {
         emptyPortalContainer(current);
       }
@@ -1163,7 +1157,6 @@ function commitNestedUnmounts(
   finishedRoot: FiberRoot,
   root: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   // While we're inside a removed host node we don't want to call
   // removeChild on the inner nodes because they're removed by the top
@@ -1172,12 +1165,7 @@ function commitNestedUnmounts(
   // we do an inner loop while we're still inside the host node.
   let node: Fiber = root;
   while (true) {
-    commitUnmount(
-      finishedRoot,
-      node,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    commitUnmount(finishedRoot, node, nearestMountedAncestor);
     // Visit children because they may contain more composite or host nodes.
     // Skip portals because commitUnmount() currently visits them recursively.
     if (
@@ -1532,7 +1520,6 @@ function unmountHostComponents(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   // We only have the top Fiber that was deleted but we need to recurse down its
   // children to find all the terminal nodes.
@@ -1576,12 +1563,7 @@ function unmountHostComponents(
     }
 
     if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
+      commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor);
       // After all the children have unmounted, it is now safe to remove the
       // node from the tree.
       if (currentParentIsContainer) {
@@ -1634,12 +1616,7 @@ function unmountHostComponents(
         continue;
       }
     } else {
-      commitUnmount(
-        finishedRoot,
-        node,
-        nearestMountedAncestor,
-        renderPriorityLevel,
-      );
+      commitUnmount(finishedRoot, node, nearestMountedAncestor);
       // Visit children because we may find more host components below.
       if (node.child !== null) {
         node.child.return = node;
@@ -1670,25 +1647,14 @@ function commitDeletion(
   finishedRoot: FiberRoot,
   current: Fiber,
   nearestMountedAncestor: Fiber,
-  renderPriorityLevel: LanePriority,
 ): void {
   if (supportsMutation) {
     // Recursively delete all host nodes from the parent.
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(
-      finishedRoot,
-      current,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
   } else {
     // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(
-      finishedRoot,
-      current,
-      nearestMountedAncestor,
-      renderPriorityLevel,
-    );
+    commitNestedUnmounts(finishedRoot, current, nearestMountedAncestor);
   }
 
   detachFiberMutation(current);
@@ -2009,19 +1975,12 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-export function commitMutationEffects(
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-  firstChild: Fiber,
-) {
+export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
   nextEffect = firstChild;
-  commitMutationEffects_begin(root, renderPriorityLevel);
+  commitMutationEffects_begin(root);
 }
 
-function commitMutationEffects_begin(
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-) {
+function commitMutationEffects_begin(root: FiberRoot) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
@@ -2038,7 +1997,6 @@ function commitMutationEffects_begin(
             root,
             childToDelete,
             fiber,
-            renderPriorityLevel,
           );
           if (hasCaughtError()) {
             const error = clearCaughtError();
@@ -2046,7 +2004,7 @@ function commitMutationEffects_begin(
           }
         } else {
           try {
-            commitDeletion(root, childToDelete, fiber, renderPriorityLevel);
+            commitDeletion(root, childToDelete, fiber);
           } catch (error) {
             captureCommitPhaseError(childToDelete, fiber, error);
           }
@@ -2059,15 +2017,12 @@ function commitMutationEffects_begin(
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
-      commitMutationEffects_complete(root, renderPriorityLevel);
+      commitMutationEffects_complete(root);
     }
   }
 }
 
-function commitMutationEffects_complete(
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-) {
+function commitMutationEffects_complete(root: FiberRoot) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     if (__DEV__) {
@@ -2078,7 +2033,6 @@ function commitMutationEffects_complete(
         null,
         fiber,
         root,
-        renderPriorityLevel,
       );
       if (hasCaughtError()) {
         const error = clearCaughtError();
@@ -2087,7 +2041,7 @@ function commitMutationEffects_complete(
       resetCurrentDebugFiberInDEV();
     } else {
       try {
-        commitMutationEffectsOnFiber(fiber, root, renderPriorityLevel);
+        commitMutationEffectsOnFiber(fiber, root);
       } catch (error) {
         captureCommitPhaseError(fiber, fiber.return, error);
       }
@@ -2104,11 +2058,7 @@ function commitMutationEffects_complete(
   }
 }
 
-function commitMutationEffectsOnFiber(
-  finishedWork: Fiber,
-  root: FiberRoot,
-  renderPriorityLevel: LanePriority,
-) {
+function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index 6ac250743ad9..afcbad36f155 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -11,14 +11,21 @@ import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
 
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {LanePriority} from './ReactFiberLane.new';
+import type {EventPriority} from './ReactEventPriorities.new';
 
 import {DidCapture} from './ReactFiberFlags';
 import {
-  lanePriorityToSchedulerPriority,
-  NoLanePriority,
-} from './ReactFiberLane.new';
-import {NormalPriority} from './SchedulerWithReactIntegration.new';
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+} from './ReactEventPriorities.new';
+import {
+  ImmediatePriority as ImmediateSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
+  NormalPriority as NormalSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
+} from './SchedulerWithReactIntegration.new';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
@@ -84,15 +91,29 @@ export function onScheduleRoot(root: FiberRoot, children: ReactNodeList) {
   }
 }
 
-export function onCommitRoot(root: FiberRoot, priorityLevel: LanePriority) {
+export function onCommitRoot(root: FiberRoot, eventPriority: EventPriority) {
   if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
     try {
       const didError = (root.current.flags & DidCapture) === DidCapture;
       if (enableProfilerTimer) {
-        const schedulerPriority =
-          priorityLevel === NoLanePriority
-            ? NormalPriority
-            : lanePriorityToSchedulerPriority(priorityLevel);
+        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,
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index 04aa1c09eb43..39cd1f02cf99 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -11,14 +11,21 @@ import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
 
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {LanePriority} from './ReactFiberLane.old';
+import type {EventPriority} from './ReactEventPriorities.old';
 
 import {DidCapture} from './ReactFiberFlags';
 import {
-  lanePriorityToSchedulerPriority,
-  NoLanePriority,
-} from './ReactFiberLane.old';
-import {NormalPriority} from './SchedulerWithReactIntegration.old';
+  DiscreteEventPriority,
+  ContinuousEventPriority,
+  DefaultEventPriority,
+  IdleEventPriority,
+} from './ReactEventPriorities.old';
+import {
+  ImmediatePriority as ImmediateSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
+  NormalPriority as NormalSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
+} from './SchedulerWithReactIntegration.old';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
@@ -84,15 +91,29 @@ export function onScheduleRoot(root: FiberRoot, children: ReactNodeList) {
   }
 }
 
-export function onCommitRoot(root: FiberRoot, priorityLevel: LanePriority) {
+export function onCommitRoot(root: FiberRoot, eventPriority: EventPriority) {
   if (injectedHook && typeof injectedHook.onCommitFiberRoot === 'function') {
     try {
       const didError = (root.current.flags & DidCapture) === DidCapture;
       if (enableProfilerTimer) {
-        const schedulerPriority =
-          priorityLevel === NoLanePriority
-            ? NormalPriority
-            : lanePriorityToSchedulerPriority(priorityLevel);
+        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,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 9a94ed1536d3..f47627053fc9 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -41,7 +41,6 @@ import {
 import {
   NoLane,
   NoLanes,
-  InputContinuousLanePriority,
   isSubsetOfLanes,
   mergeLanes,
   removeLanes,
@@ -49,11 +48,14 @@ import {
   isTransitionLane,
   markRootEntangled,
   markRootMutableRead,
-  getCurrentUpdateLanePriority,
-  setCurrentUpdateLanePriority,
-  higherLanePriority,
-  DefaultLanePriority,
 } from './ReactFiberLane.new';
+import {
+  DefaultEventPriority,
+  ContinuousEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+  higherEventPriority,
+} from './ReactEventPriorities.new';
 import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
@@ -1705,9 +1707,9 @@ function rerenderDeferredValue<T>(value: T): T {
 }
 
 function startTransition(setPending, callback) {
-  const previousLanePriority = getCurrentUpdateLanePriority();
-  setCurrentUpdateLanePriority(
-    higherLanePriority(previousLanePriority, InputContinuousLanePriority),
+  const previousPriority = getCurrentUpdatePriority();
+  setCurrentUpdatePriority(
+    higherEventPriority(previousPriority, ContinuousEventPriority),
   );
 
   setPending(true);
@@ -1715,7 +1717,7 @@ function startTransition(setPending, callback) {
   // TODO: Can remove this. Was only necessary because we used to give
   // different behavior to transitions without a config object. Now they are
   // all treated the same.
-  setCurrentUpdateLanePriority(DefaultLanePriority);
+  setCurrentUpdatePriority(DefaultEventPriority);
 
   const prevTransition = ReactCurrentBatchConfig.transition;
   ReactCurrentBatchConfig.transition = 1;
@@ -1723,7 +1725,7 @@ function startTransition(setPending, callback) {
     setPending(false);
     callback();
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index d705a58658d1..7673d88caecd 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -41,7 +41,6 @@ import {
 import {
   NoLane,
   NoLanes,
-  InputContinuousLanePriority,
   isSubsetOfLanes,
   mergeLanes,
   removeLanes,
@@ -49,11 +48,14 @@ import {
   isTransitionLane,
   markRootEntangled,
   markRootMutableRead,
-  getCurrentUpdateLanePriority,
-  setCurrentUpdateLanePriority,
-  higherLanePriority,
-  DefaultLanePriority,
 } from './ReactFiberLane.old';
+import {
+  DefaultEventPriority,
+  ContinuousEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+  higherEventPriority,
+} from './ReactEventPriorities.old';
 import {readContext, checkIfContextChanged} from './ReactFiberNewContext.old';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
@@ -1705,9 +1707,9 @@ function rerenderDeferredValue<T>(value: T): T {
 }
 
 function startTransition(setPending, callback) {
-  const previousLanePriority = getCurrentUpdateLanePriority();
-  setCurrentUpdateLanePriority(
-    higherLanePriority(previousLanePriority, InputContinuousLanePriority),
+  const previousPriority = getCurrentUpdatePriority();
+  setCurrentUpdatePriority(
+    higherEventPriority(previousPriority, ContinuousEventPriority),
   );
 
   setPending(true);
@@ -1715,7 +1717,7 @@ function startTransition(setPending, callback) {
   // TODO: Can remove this. Was only necessary because we used to give
   // different behavior to transitions without a config object. Now they are
   // all treated the same.
-  setCurrentUpdateLanePriority(DefaultLanePriority);
+  setCurrentUpdatePriority(DefaultEventPriority);
 
   const prevTransition = ReactCurrentBatchConfig.transition;
   ReactCurrentBatchConfig.transition = 1;
@@ -1723,7 +1725,7 @@ function startTransition(setPending, callback) {
     setPending(false);
     callback();
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 01bcf19c91d8..5bca8d747b0c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -73,8 +73,8 @@ export const NoLanePriority: LanePriority = 0;
 
 export const TotalLanes = 31;
 
-export const NoLanes: Lanes = /*                        */ 0b000000000000000000000000000000;
-export const NoLane: Lane = /*                          */ 0b000000000000000000000000000000;
+export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
+export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
@@ -168,19 +168,9 @@ export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
 
 export const NoTimestamp = -1;
 
-let currentUpdateLanePriority: LanePriority = NoLanePriority;
-
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
-export function getCurrentUpdateLanePriority(): LanePriority {
-  return currentUpdateLanePriority;
-}
-
-export function setCurrentUpdateLanePriority(newLanePriority: LanePriority) {
-  currentUpdateLanePriority = newLanePriority;
-}
-
 // "Registers" used to "return" multiple values
 // Used by getHighestPriorityLanes and getNextLanes:
 let return_highestLanePriority: LanePriority = DefaultLanePriority;
@@ -532,35 +522,6 @@ export function isTransitionLane(lane: Lane) {
   return (lane & TransitionLanes) !== 0;
 }
 
-// To ensure consistency across multiple updates in the same event, this should
-// be a pure function, so that it always returns the same lane for given inputs.
-export function findUpdateLane(lanePriority: LanePriority): Lane {
-  switch (lanePriority) {
-    case NoLanePriority:
-      break;
-    case SyncLanePriority:
-      return SyncLane;
-    case InputContinuousLanePriority:
-      return InputContinuousLane;
-    case DefaultLanePriority:
-      return DefaultLane;
-    case TransitionPriority: // Should be handled by findTransitionLane instead
-    case RetryLanePriority: // Should be handled by findRetryLane instead
-      break;
-    case IdleLanePriority:
-      return IdleLane;
-    default:
-      // The remaining priorities are not valid for updates
-      break;
-  }
-
-  invariant(
-    false,
-    'Invalid update priority: %s. This is a bug in React.',
-    lanePriority,
-  );
-}
-
 export function claimNextTransitionLane(): 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
@@ -582,7 +543,7 @@ export function claimNextRetryLane(): Lane {
   return lane;
 }
 
-function getHighestPriorityLane(lanes: Lanes) {
+export function getHighestPriorityLane(lanes: Lanes): Lane {
   return lanes & -lanes;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 90ffc0535968..6b9612034856 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -73,8 +73,8 @@ export const NoLanePriority: LanePriority = 0;
 
 export const TotalLanes = 31;
 
-export const NoLanes: Lanes = /*                        */ 0b000000000000000000000000000000;
-export const NoLane: Lane = /*                          */ 0b000000000000000000000000000000;
+export const NoLanes: Lanes = /*                        */ 0b0000000000000000000000000000000;
+export const NoLane: Lane = /*                          */ 0b0000000000000000000000000000000;
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
@@ -168,19 +168,9 @@ export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
 
 export const NoTimestamp = -1;
 
-let currentUpdateLanePriority: LanePriority = NoLanePriority;
-
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
-export function getCurrentUpdateLanePriority(): LanePriority {
-  return currentUpdateLanePriority;
-}
-
-export function setCurrentUpdateLanePriority(newLanePriority: LanePriority) {
-  currentUpdateLanePriority = newLanePriority;
-}
-
 // "Registers" used to "return" multiple values
 // Used by getHighestPriorityLanes and getNextLanes:
 let return_highestLanePriority: LanePriority = DefaultLanePriority;
@@ -532,35 +522,6 @@ export function isTransitionLane(lane: Lane) {
   return (lane & TransitionLanes) !== 0;
 }
 
-// To ensure consistency across multiple updates in the same event, this should
-// be a pure function, so that it always returns the same lane for given inputs.
-export function findUpdateLane(lanePriority: LanePriority): Lane {
-  switch (lanePriority) {
-    case NoLanePriority:
-      break;
-    case SyncLanePriority:
-      return SyncLane;
-    case InputContinuousLanePriority:
-      return InputContinuousLane;
-    case DefaultLanePriority:
-      return DefaultLane;
-    case TransitionPriority: // Should be handled by findTransitionLane instead
-    case RetryLanePriority: // Should be handled by findRetryLane instead
-      break;
-    case IdleLanePriority:
-      return IdleLane;
-    default:
-      // The remaining priorities are not valid for updates
-      break;
-  }
-
-  invariant(
-    false,
-    'Invalid update priority: %s. This is a bug in React.',
-    lanePriority,
-  );
-}
-
 export function claimNextTransitionLane(): 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
@@ -582,7 +543,7 @@ export function claimNextRetryLane(): Lane {
   return lane;
 }
 
-function getHighestPriorityLane(lanes: Lanes) {
+export function getHighestPriorityLane(lanes: Lanes): Lane {
   return lanes & -lanes;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 56e517f9f53d..e789b58b61c1 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -51,7 +51,7 @@ import {
   observeVisibleRects as observeVisibleRects_old,
   registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
-  getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_old,
+  getCurrentUpdatePriority as getCurrentUpdatePriority_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -91,7 +91,7 @@ import {
   observeVisibleRects as observeVisibleRects_new,
   registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
-  getCurrentUpdateLanePriority as getCurrentUpdateLanePriority_new,
+  getCurrentUpdatePriority as getCurrentUpdatePriority_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -143,9 +143,9 @@ export const attemptContinuousHydration = enableNewReconciler
 export const attemptHydrationAtCurrentPriority = enableNewReconciler
   ? attemptHydrationAtCurrentPriority_new
   : attemptHydrationAtCurrentPriority_old;
-export const getCurrentUpdateLanePriority = enableNewReconciler
-  ? getCurrentUpdateLanePriority_new
-  : getCurrentUpdateLanePriority_old;
+export const getCurrentUpdatePriority = enableNewReconciler
+  ? getCurrentUpdatePriority_new
+  : getCurrentUpdatePriority_old;
 export const findHostInstance = enableNewReconciler
   ? findHostInstance_new
   : findHostInstance_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 95b8f5b38977..bbe8810ff52d 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -18,7 +18,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {RendererInspectionConfig} from './ReactFiberHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {Lane, LanePriority} from './ReactFiberLane.new';
+import type {Lane} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 
 import {
@@ -82,9 +82,11 @@ import {
   NoTimestamp,
   getHighestPriorityPendingLanes,
   higherPriorityLane,
-  getCurrentUpdateLanePriority,
-  setCurrentUpdateLanePriority,
 } from './ReactFiberLane.new';
+import {
+  getCurrentUpdatePriority,
+  runWithPriority,
+} from './ReactEventPriorities.new';
 import {
   scheduleRefresh,
   scheduleRoot,
@@ -442,17 +444,7 @@ export function attemptHydrationAtCurrentPriority(fiber: Fiber): void {
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
-export function runWithPriority<T>(priority: LanePriority, fn: () => T) {
-  const previousPriority = getCurrentUpdateLanePriority();
-  try {
-    setCurrentUpdateLanePriority(priority);
-    return fn();
-  } finally {
-    setCurrentUpdateLanePriority(previousPriority);
-  }
-}
-
-export {getCurrentUpdateLanePriority};
+export {getCurrentUpdatePriority, runWithPriority};
 
 export {findHostInstance};
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index d72c8f2c2b88..c6ced2f5be5b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -18,7 +18,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {RendererInspectionConfig} from './ReactFiberHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
-import type {Lane, LanePriority} from './ReactFiberLane.old';
+import type {Lane} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 
 import {
@@ -82,9 +82,11 @@ import {
   NoTimestamp,
   getHighestPriorityPendingLanes,
   higherPriorityLane,
-  getCurrentUpdateLanePriority,
-  setCurrentUpdateLanePriority,
 } from './ReactFiberLane.old';
+import {
+  getCurrentUpdatePriority,
+  runWithPriority,
+} from './ReactEventPriorities.old';
 import {
   scheduleRefresh,
   scheduleRoot,
@@ -442,17 +444,7 @@ export function attemptHydrationAtCurrentPriority(fiber: Fiber): void {
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
-export function runWithPriority<T>(priority: LanePriority, fn: () => T) {
-  const previousPriority = getCurrentUpdateLanePriority();
-  try {
-    setCurrentUpdateLanePriority(priority);
-    return fn();
-  } finally {
-    setCurrentUpdateLanePriority(previousPriority);
-  }
-}
-
-export {getCurrentUpdateLanePriority};
+export {getCurrentUpdatePriority, runWithPriority};
 
 export {findHostInstance};
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0e57b678d570..e86cb6777c28 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -9,7 +9,7 @@
 
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane, LanePriority} from './ReactFiberLane.new';
+import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
@@ -132,12 +132,10 @@ import {
 import {
   NoLanePriority,
   SyncLanePriority,
-  DefaultLanePriority,
   NoLanes,
   NoLane,
   SyncLane,
   NoTimestamp,
-  findUpdateLane,
   claimNextTransitionLane,
   claimNextRetryLane,
   includesSomeLane,
@@ -150,8 +148,6 @@ import {
   includesOnlyTransitions,
   getNextLanes,
   returnNextLanesPriority,
-  setCurrentUpdateLanePriority,
-  getCurrentUpdateLanePriority,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
   getMostRecentEventTime,
@@ -162,6 +158,14 @@ import {
   markRootFinished,
   lanePriorityToSchedulerPriority,
 } from './ReactFiberLane.new';
+import {
+  DiscreteEventPriority,
+  DefaultEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+  higherEventPriority,
+  lanesToEventPriority,
+} from './ReactEventPriorities.new';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.new';
 import {completeWork} from './ReactFiberCompleteWork.new';
@@ -320,7 +324,6 @@ let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
 
 let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
-let pendingPassiveEffectsRenderPriority: LanePriority = NoLanePriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
@@ -423,9 +426,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   // Updates originating inside certain React methods, like flushSync, have
   // their priority set by tracking it with a context variable.
-  const updateLanePriority = getCurrentUpdateLanePriority();
-  if (updateLanePriority !== NoLanePriority) {
-    return findUpdateLane(updateLanePriority);
+  //
+  // The opaque type returned by the host config is internally a lane, so we can
+  // use that directly.
+  // TODO: Move this type conversion to the event priority module.
+  const updateLane: Lane = (getCurrentUpdatePriority(): any);
+  if (updateLane !== NoLane) {
+    return updateLane;
   }
 
   // This update originated outside React. Ask the host environement for an
@@ -433,7 +440,8 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   //
   // The opaque type returned by the host config is internally a lane, so we can
   // use that directly.
-  const eventLane = getCurrentEventPriority();
+  // TODO: Move this type conversion to the event priority module.
+  const eventLane: Lane = (getCurrentEventPriority(): any);
   return eventLane;
 }
 
@@ -1056,12 +1064,12 @@ export function flushDiscreteUpdates() {
 }
 
 export function deferredUpdates<A>(fn: () => A): A {
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(DefaultLanePriority);
+    setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
   }
 }
 
@@ -1102,12 +1110,12 @@ export function discreteUpdates<A, B, C, D, R>(
   c: C,
   d: D,
 ): R {
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
@@ -1146,16 +1154,16 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   }
   executionContext |= BatchedContext;
 
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
     } else {
       return (undefined: $FlowFixMe);
     }
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1167,12 +1175,12 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1663,12 +1671,14 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
 }
 
 function commitRoot(root) {
-  const previousUpdateLanePriority = getCurrentUpdateLanePriority();
+  // TODO: This no longer makes any sense. We already wrap the mutation and
+  // layout phases. Should be able to remove.
+  const previousUpdateLanePriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
-    setCurrentUpdateLanePriority(previousUpdateLanePriority);
+    setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
   return null;
@@ -1780,8 +1790,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    const previousPriority = getCurrentUpdatePriority();
+    setCurrentUpdatePriority(DiscreteEventPriority);
 
     const prevExecutionContext = executionContext;
     executionContext |= CommitContext;
@@ -1815,7 +1825,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     // The next phase is the mutation phase, where we mutate the host tree.
-    commitMutationEffects(root, renderPriorityLevel, finishedWork);
+    commitMutationEffects(root, finishedWork);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -1863,10 +1873,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
     executionContext = prevExecutionContext;
 
-    if (previousLanePriority != null) {
-      // Reset the priority to the previous non-sync value.
-      setCurrentUpdateLanePriority(previousLanePriority);
-    }
+    // Reset the priority to the previous non-sync value.
+    setCurrentUpdatePriority(previousPriority);
   } else {
     // No effects.
     root.current = finishedWork;
@@ -1886,10 +1894,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
-    pendingPassiveEffectsRenderPriority =
-      renderPriorityLevel === NoLanePriority
-        ? DefaultLanePriority
-        : renderPriorityLevel;
   }
 
   // Read this again, since an effect might have updated it
@@ -2003,18 +2007,17 @@ function commitRootImpl(root, renderPriorityLevel) {
 
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
-  if (pendingPassiveEffectsRenderPriority !== NoLanePriority) {
-    const priorityLevel =
-      pendingPassiveEffectsRenderPriority > DefaultLanePriority
-        ? DefaultLanePriority
-        : pendingPassiveEffectsRenderPriority;
-    pendingPassiveEffectsRenderPriority = NoLanePriority;
-    const previousLanePriority = getCurrentUpdateLanePriority();
+  if (pendingPassiveEffectsLanes !== NoLanes) {
+    const priority = higherEventPriority(
+      DefaultEventPriority,
+      lanesToEventPriority(pendingPassiveEffectsLanes),
+    );
+    const previousPriority = getCurrentUpdatePriority();
     try {
-      setCurrentUpdateLanePriority(priorityLevel);
+      setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
+      setCurrentUpdatePriority(previousPriority);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8a77e6546766..7d452fe2699f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -9,7 +9,7 @@
 
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {Lanes, Lane, LanePriority} from './ReactFiberLane.old';
+import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {StackCursor} from './ReactFiberStack.old';
@@ -132,12 +132,10 @@ import {
 import {
   NoLanePriority,
   SyncLanePriority,
-  DefaultLanePriority,
   NoLanes,
   NoLane,
   SyncLane,
   NoTimestamp,
-  findUpdateLane,
   claimNextTransitionLane,
   claimNextRetryLane,
   includesSomeLane,
@@ -150,8 +148,6 @@ import {
   includesOnlyTransitions,
   getNextLanes,
   returnNextLanesPriority,
-  setCurrentUpdateLanePriority,
-  getCurrentUpdateLanePriority,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
   getMostRecentEventTime,
@@ -162,6 +158,14 @@ import {
   markRootFinished,
   lanePriorityToSchedulerPriority,
 } from './ReactFiberLane.old';
+import {
+  DiscreteEventPriority,
+  DefaultEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+  higherEventPriority,
+  lanesToEventPriority,
+} from './ReactEventPriorities.old';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
 import {beginWork as originalBeginWork} from './ReactFiberBeginWork.old';
 import {completeWork} from './ReactFiberCompleteWork.old';
@@ -320,7 +324,6 @@ let rootCommittingMutationOrLayoutEffects: FiberRoot | null = null;
 
 let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
-let pendingPassiveEffectsRenderPriority: LanePriority = NoLanePriority;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 
@@ -423,9 +426,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   // Updates originating inside certain React methods, like flushSync, have
   // their priority set by tracking it with a context variable.
-  const updateLanePriority = getCurrentUpdateLanePriority();
-  if (updateLanePriority !== NoLanePriority) {
-    return findUpdateLane(updateLanePriority);
+  //
+  // The opaque type returned by the host config is internally a lane, so we can
+  // use that directly.
+  // TODO: Move this type conversion to the event priority module.
+  const updateLane: Lane = (getCurrentUpdatePriority(): any);
+  if (updateLane !== NoLane) {
+    return updateLane;
   }
 
   // This update originated outside React. Ask the host environement for an
@@ -433,7 +440,8 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   //
   // The opaque type returned by the host config is internally a lane, so we can
   // use that directly.
-  const eventLane = getCurrentEventPriority();
+  // TODO: Move this type conversion to the event priority module.
+  const eventLane: Lane = (getCurrentEventPriority(): any);
   return eventLane;
 }
 
@@ -1056,12 +1064,12 @@ export function flushDiscreteUpdates() {
 }
 
 export function deferredUpdates<A>(fn: () => A): A {
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(DefaultLanePriority);
+    setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
   }
 }
 
@@ -1102,12 +1110,12 @@ export function discreteUpdates<A, B, C, D, R>(
   c: C,
   d: D,
 ): R {
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
@@ -1146,16 +1154,16 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   }
   executionContext |= BatchedContext;
 
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
     } else {
       return (undefined: $FlowFixMe);
     }
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1167,12 +1175,12 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
-  const previousLanePriority = getCurrentUpdateLanePriority();
+  const previousPriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
-    setCurrentUpdateLanePriority(previousLanePriority);
+    setCurrentUpdatePriority(previousPriority);
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1663,12 +1671,14 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
 }
 
 function commitRoot(root) {
-  const previousUpdateLanePriority = getCurrentUpdateLanePriority();
+  // TODO: This no longer makes any sense. We already wrap the mutation and
+  // layout phases. Should be able to remove.
+  const previousUpdateLanePriority = getCurrentUpdatePriority();
   try {
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
-    setCurrentUpdateLanePriority(previousUpdateLanePriority);
+    setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
   return null;
@@ -1780,8 +1790,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
-    const previousLanePriority = getCurrentUpdateLanePriority();
-    setCurrentUpdateLanePriority(SyncLanePriority);
+    const previousPriority = getCurrentUpdatePriority();
+    setCurrentUpdatePriority(DiscreteEventPriority);
 
     const prevExecutionContext = executionContext;
     executionContext |= CommitContext;
@@ -1815,7 +1825,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     // The next phase is the mutation phase, where we mutate the host tree.
-    commitMutationEffects(root, renderPriorityLevel, finishedWork);
+    commitMutationEffects(root, finishedWork);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -1863,10 +1873,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
     executionContext = prevExecutionContext;
 
-    if (previousLanePriority != null) {
-      // Reset the priority to the previous non-sync value.
-      setCurrentUpdateLanePriority(previousLanePriority);
-    }
+    // Reset the priority to the previous non-sync value.
+    setCurrentUpdatePriority(previousPriority);
   } else {
     // No effects.
     root.current = finishedWork;
@@ -1886,10 +1894,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
-    pendingPassiveEffectsRenderPriority =
-      renderPriorityLevel === NoLanePriority
-        ? DefaultLanePriority
-        : renderPriorityLevel;
   }
 
   // Read this again, since an effect might have updated it
@@ -2003,18 +2007,17 @@ function commitRootImpl(root, renderPriorityLevel) {
 
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
-  if (pendingPassiveEffectsRenderPriority !== NoLanePriority) {
-    const priorityLevel =
-      pendingPassiveEffectsRenderPriority > DefaultLanePriority
-        ? DefaultLanePriority
-        : pendingPassiveEffectsRenderPriority;
-    pendingPassiveEffectsRenderPriority = NoLanePriority;
-    const previousLanePriority = getCurrentUpdateLanePriority();
+  if (pendingPassiveEffectsLanes !== NoLanes) {
+    const priority = higherEventPriority(
+      DefaultEventPriority,
+      lanesToEventPriority(pendingPassiveEffectsLanes),
+    );
+    const previousPriority = getCurrentUpdatePriority();
     try {
-      setCurrentUpdateLanePriority(priorityLevel);
+      setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
+      setCurrentUpdatePriority(previousPriority);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 9efa57d327ef..685285dffd80 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -16,10 +16,10 @@ import {__interactionsRef} from 'scheduler/tracing';
 import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import {
-  SyncLanePriority,
-  getCurrentUpdateLanePriority,
-  setCurrentUpdateLanePriority,
-} from './ReactFiberLane.new';
+  DiscreteEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+} from './ReactEventPriorities.new';
 
 const {
   unstable_scheduleCallback: Scheduler_scheduleCallback,
@@ -147,11 +147,13 @@ export function flushSyncCallbackQueue() {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
     let i = 0;
-    const previousLanePriority = getCurrentUpdateLanePriority();
+    const previousUpdatePriority = getCurrentUpdatePriority();
     try {
       const isSync = true;
       const queue = syncQueue;
-      setCurrentUpdateLanePriority(SyncLanePriority);
+      // TODO: Is this necessary anymore? The only user code that runs in this
+      // queue is in the render or commit phases.
+      setCurrentUpdatePriority(DiscreteEventPriority);
       for (; i < queue.length; i++) {
         let callback = queue[i];
         do {
@@ -171,7 +173,7 @@ export function flushSyncCallbackQueue() {
       );
       throw error;
     } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
+      setCurrentUpdatePriority(previousUpdatePriority);
       isFlushingSyncQueue = false;
     }
   }
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index bde9672f329e..142b04333adb 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -16,10 +16,10 @@ import {__interactionsRef} from 'scheduler/tracing';
 import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import {
-  SyncLanePriority,
-  getCurrentUpdateLanePriority,
-  setCurrentUpdateLanePriority,
-} from './ReactFiberLane.old';
+  DiscreteEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+} from './ReactEventPriorities.old';
 
 const {
   unstable_scheduleCallback: Scheduler_scheduleCallback,
@@ -147,11 +147,13 @@ export function flushSyncCallbackQueue() {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
     let i = 0;
-    const previousLanePriority = getCurrentUpdateLanePriority();
+    const previousUpdatePriority = getCurrentUpdatePriority();
     try {
       const isSync = true;
       const queue = syncQueue;
-      setCurrentUpdateLanePriority(SyncLanePriority);
+      // TODO: Is this necessary anymore? The only user code that runs in this
+      // queue is in the render or commit phases.
+      setCurrentUpdatePriority(DiscreteEventPriority);
       for (; i < queue.length; i++) {
         let callback = queue[i];
         do {
@@ -171,7 +173,7 @@ export function flushSyncCallbackQueue() {
       );
       throw error;
     } finally {
-      setCurrentUpdateLanePriority(previousLanePriority);
+      setCurrentUpdatePriority(previousUpdatePriority);
       isFlushingSyncQueue = false;
     }
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index ec587d7231c7..98092cf33ffa 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -13,11 +13,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
-
-// Copied from ReactFiberLanes. Don't do this!
-// This is hard coded directly to avoid needing to import, and
-// we'll remove this as we replace runWithPriority with React APIs.
-const InputContinuousLanePriority = 10;
+let ContinuousEventPriority;
 
 describe('ReactIncrementalUpdates', () => {
   beforeEach(() => {
@@ -26,6 +22,8 @@ describe('ReactIncrementalUpdates', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    ContinuousEventPriority = require('react-reconciler/constants')
+      .ContinuousEventPriority;
   });
 
   function span(prop) {
@@ -544,7 +542,7 @@ describe('ReactIncrementalUpdates', () => {
         Scheduler.unstable_yieldValue('Committed: ' + log);
         if (log === 'B') {
           // Right after B commits, schedule additional updates.
-          ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
+          ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
             pushToLog('C'),
           );
           setLog(prevLog => prevLog + 'D');
@@ -564,7 +562,7 @@ describe('ReactIncrementalUpdates', () => {
     await ReactNoop.act(async () => {
       pushToLog('A');
 
-      ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
+      ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
         pushToLog('B'),
       );
     });
@@ -597,7 +595,7 @@ describe('ReactIncrementalUpdates', () => {
         Scheduler.unstable_yieldValue('Committed: ' + this.state.log);
         if (this.state.log === 'B') {
           // Right after B commits, schedule additional updates.
-          ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
+          ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
             this.pushToLog('C'),
           );
           this.pushToLog('D');
@@ -618,7 +616,7 @@ describe('ReactIncrementalUpdates', () => {
 
     await ReactNoop.act(async () => {
       pushToLog('A');
-      ReactNoop.unstable_runWithPriority(InputContinuousLanePriority, () =>
+      ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
         pushToLog('B'),
       );
     });
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
index 479e229d9115..249aeab17334 100644
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -23,12 +23,8 @@ let onWorkCanceled;
 let onWorkScheduled;
 let onWorkStarted;
 let onWorkStopped;
-
-// Copied from ReactFiberLanes. Don't do this!
-// This is hard coded directly to avoid needing to import, and
-// we'll remove this as we replace runWithPriority with React APIs.
-const IdleLanePriority = 2;
-const InputContinuousPriority = 10;
+let IdleEventPriority;
+let ContinuousEventPriority;
 
 function loadModules() {
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
@@ -44,6 +40,10 @@ function loadModules() {
   SchedulerTracing = require('scheduler/tracing');
   TestUtils = require('react-dom/test-utils');
 
+  IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
+  ContinuousEventPriority = require('react-reconciler/constants')
+    .ContinuousEventPriority;
+
   act = TestUtils.unstable_concurrentAct;
 
   onInteractionScheduledWorkCompleted = jest.fn();
@@ -246,7 +246,7 @@ describe('ReactDOMTracing', () => {
               Scheduler.unstable_yieldValue('Child:update');
             } else {
               Scheduler.unstable_yieldValue('Child:mount');
-              ReactDOM.unstable_runWithPriority(IdleLanePriority, () =>
+              ReactDOM.unstable_runWithPriority(IdleEventPriority, () =>
                 setDidMount(true),
               );
             }
@@ -499,7 +499,7 @@ describe('ReactDOMTracing', () => {
           let interaction = null;
           SchedulerTracing.unstable_trace('update', 0, () => {
             interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-            ReactDOM.unstable_runWithPriority(InputContinuousPriority, () =>
+            ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () =>
               scheduleUpdateWithHidden(),
             );
           });
@@ -606,7 +606,7 @@ describe('ReactDOMTracing', () => {
           // Schedule an unrelated low priority update that shouldn't be included
           // in the previous interaction. This is meant to ensure that we don't
           // rely on the whole tree completing to cover up bugs.
-          ReactDOM.unstable_runWithPriority(IdleLanePriority, () => {
+          ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
             root.render(<App />);
           });
 

From 05ec0d7646b463dcbd64f3a2575f4bb992f7e423 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Mar 2021 11:24:49 -0500
Subject: [PATCH 0358/1603] Entangled expired lanes with SyncLane (#21083)

Makes the implementation simpler. Expiration is now a special case of
entanglement.

Also fixes an issue where expired lanes weren't batched with normal
sync updates. (See deleted TODO comment in test.)
---
 .../src/ReactFiberLane.new.js                 | 70 ++++++++++---------
 .../src/ReactFiberLane.old.js                 | 70 ++++++++++---------
 .../src/ReactFiberRoot.new.js                 |  1 -
 .../src/ReactFiberRoot.old.js                 |  1 -
 .../src/ReactFiberWorkLoop.new.js             | 17 +++--
 .../src/ReactFiberWorkLoop.old.js             | 17 +++--
 .../src/ReactInternalTypes.js                 |  1 -
 .../src/__tests__/ReactExpiration-test.js     | 30 +++-----
 8 files changed, 106 insertions(+), 101 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 5bca8d747b0c..794f599b2db5 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -286,42 +286,34 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   let nextLanes = NoLanes;
   let nextLanePriority = NoLanePriority;
 
-  const expiredLanes = root.expiredLanes;
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
 
-  // Check if any work has expired.
-  if (expiredLanes !== NoLanes) {
-    // TODO: Should entangle with SyncLane
-    nextLanes = expiredLanes;
-    nextLanePriority = return_highestLanePriority = SyncLanePriority;
-  } else {
-    // 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) {
-      const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
-      if (nonIdleUnblockedLanes !== NoLanes) {
-        nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+  // 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) {
+    const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
+    if (nonIdleUnblockedLanes !== NoLanes) {
+      nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+      nextLanePriority = return_highestLanePriority;
+    } else {
+      const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
+      if (nonIdlePingedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
         nextLanePriority = return_highestLanePriority;
-      } else {
-        const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
-        if (nonIdlePingedLanes !== NoLanes) {
-          nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
-          nextLanePriority = return_highestLanePriority;
-        }
       }
+    }
+  } else {
+    // The only remaining work is Idle.
+    const unblockedLanes = pendingLanes & ~suspendedLanes;
+    if (unblockedLanes !== NoLanes) {
+      nextLanes = getHighestPriorityLanes(unblockedLanes);
+      nextLanePriority = return_highestLanePriority;
     } else {
-      // The only remaining work is Idle.
-      const unblockedLanes = pendingLanes & ~suspendedLanes;
-      if (unblockedLanes !== NoLanes) {
-        nextLanes = getHighestPriorityLanes(unblockedLanes);
+      if (pingedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(pingedLanes);
         nextLanePriority = return_highestLanePriority;
-      } else {
-        if (pingedLanes !== NoLanes) {
-          nextLanes = getHighestPriorityLanes(pingedLanes);
-          nextLanePriority = return_highestLanePriority;
-        }
       }
     }
   }
@@ -463,6 +455,7 @@ export function markStarvedLanesAsExpired(
   // expiration time. If so, we'll assume the update is being starved and mark
   // it as expired to force it to finish.
   let lanes = pendingLanes;
+  let expiredLanes = 0;
   while (lanes > 0) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
@@ -481,11 +474,15 @@ export function markStarvedLanesAsExpired(
       }
     } else if (expirationTime <= currentTime) {
       // This lane expired
-      root.expiredLanes |= lane;
+      expiredLanes |= lane;
     }
 
     lanes &= ~lane;
   }
+
+  if (expiredLanes !== 0) {
+    markRootExpired(root, expiredLanes);
+  }
 }
 
 // This returns the highest priority pending lanes regardless of whether they
@@ -668,7 +665,17 @@ export function markRootPinged(
 }
 
 export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
-  root.expiredLanes |= expiredLanes & root.pendingLanes;
+  const entanglements = root.entanglements;
+  const SyncLaneIndex = 0;
+  entanglements[SyncLaneIndex] |= expiredLanes;
+  root.entangledLanes |= SyncLane;
+  root.pendingLanes |= SyncLane;
+}
+
+export function areLanesExpired(root: FiberRoot, lanes: Lanes) {
+  const SyncLaneIndex = 0;
+  const entanglements = root.entanglements;
+  return (entanglements[SyncLaneIndex] & lanes) !== NoLanes;
 }
 
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
@@ -684,7 +691,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.suspendedLanes = 0;
   root.pingedLanes = 0;
 
-  root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 6b9612034856..0bb480d274a6 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -286,42 +286,34 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   let nextLanes = NoLanes;
   let nextLanePriority = NoLanePriority;
 
-  const expiredLanes = root.expiredLanes;
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
 
-  // Check if any work has expired.
-  if (expiredLanes !== NoLanes) {
-    // TODO: Should entangle with SyncLane
-    nextLanes = expiredLanes;
-    nextLanePriority = return_highestLanePriority = SyncLanePriority;
-  } else {
-    // 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) {
-      const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
-      if (nonIdleUnblockedLanes !== NoLanes) {
-        nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+  // 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) {
+    const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
+    if (nonIdleUnblockedLanes !== NoLanes) {
+      nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+      nextLanePriority = return_highestLanePriority;
+    } else {
+      const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
+      if (nonIdlePingedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
         nextLanePriority = return_highestLanePriority;
-      } else {
-        const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
-        if (nonIdlePingedLanes !== NoLanes) {
-          nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
-          nextLanePriority = return_highestLanePriority;
-        }
       }
+    }
+  } else {
+    // The only remaining work is Idle.
+    const unblockedLanes = pendingLanes & ~suspendedLanes;
+    if (unblockedLanes !== NoLanes) {
+      nextLanes = getHighestPriorityLanes(unblockedLanes);
+      nextLanePriority = return_highestLanePriority;
     } else {
-      // The only remaining work is Idle.
-      const unblockedLanes = pendingLanes & ~suspendedLanes;
-      if (unblockedLanes !== NoLanes) {
-        nextLanes = getHighestPriorityLanes(unblockedLanes);
+      if (pingedLanes !== NoLanes) {
+        nextLanes = getHighestPriorityLanes(pingedLanes);
         nextLanePriority = return_highestLanePriority;
-      } else {
-        if (pingedLanes !== NoLanes) {
-          nextLanes = getHighestPriorityLanes(pingedLanes);
-          nextLanePriority = return_highestLanePriority;
-        }
       }
     }
   }
@@ -463,6 +455,7 @@ export function markStarvedLanesAsExpired(
   // expiration time. If so, we'll assume the update is being starved and mark
   // it as expired to force it to finish.
   let lanes = pendingLanes;
+  let expiredLanes = 0;
   while (lanes > 0) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
@@ -481,11 +474,15 @@ export function markStarvedLanesAsExpired(
       }
     } else if (expirationTime <= currentTime) {
       // This lane expired
-      root.expiredLanes |= lane;
+      expiredLanes |= lane;
     }
 
     lanes &= ~lane;
   }
+
+  if (expiredLanes !== 0) {
+    markRootExpired(root, expiredLanes);
+  }
 }
 
 // This returns the highest priority pending lanes regardless of whether they
@@ -668,7 +665,17 @@ export function markRootPinged(
 }
 
 export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
-  root.expiredLanes |= expiredLanes & root.pendingLanes;
+  const entanglements = root.entanglements;
+  const SyncLaneIndex = 0;
+  entanglements[SyncLaneIndex] |= expiredLanes;
+  root.entangledLanes |= SyncLane;
+  root.pendingLanes |= SyncLane;
+}
+
+export function areLanesExpired(root: FiberRoot, lanes: Lanes) {
+  const SyncLaneIndex = 0;
+  const entanglements = root.entanglements;
+  return (entanglements[SyncLaneIndex] & lanes) !== NoLanes;
 }
 
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
@@ -684,7 +691,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.suspendedLanes = 0;
   root.pingedLanes = 0;
 
-  root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 14c20e1f7ede..dfc859a46521 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -48,7 +48,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.pendingLanes = NoLanes;
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
-  this.expiredLanes = NoLanes;
   this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 3bad9a026be0..138fb9c38a1a 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -48,7 +48,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.pendingLanes = NoLanes;
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
-  this.expiredLanes = NoLanes;
   this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e86cb6777c28..edfc46cece75 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -157,6 +157,7 @@ import {
   markRootExpired,
   markRootFinished,
   lanePriorityToSchedulerPriority,
+  areLanesExpired,
 } from './ReactFiberLane.new';
 import {
   DiscreteEventPriority,
@@ -966,7 +967,7 @@ function performSyncWorkOnRoot(root) {
   let exitStatus;
   if (
     root === workInProgressRoot &&
-    includesSomeLane(root.expiredLanes, workInProgressRootRenderLanes)
+    areLanesExpired(root, workInProgressRootRenderLanes)
   ) {
     // There's a partial tree, and at least one of its lanes has expired. Finish
     // rendering it before rendering the rest of the expired work.
@@ -1022,12 +1023,16 @@ function performSyncWorkOnRoot(root) {
   return null;
 }
 
+// TODO: Do we still need this API? I think we can delete it. Was only used
+// internally.
 export function flushRoot(root: FiberRoot, lanes: Lanes) {
-  markRootExpired(root, lanes);
-  ensureRootIsScheduled(root, now());
-  if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
-    resetRenderTimer();
-    flushSyncCallbackQueue();
+  if (lanes !== NoLanes) {
+    markRootExpired(root, lanes);
+    ensureRootIsScheduled(root, now());
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      resetRenderTimer();
+      flushSyncCallbackQueue();
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 7d452fe2699f..542567182c4c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -157,6 +157,7 @@ import {
   markRootExpired,
   markRootFinished,
   lanePriorityToSchedulerPriority,
+  areLanesExpired,
 } from './ReactFiberLane.old';
 import {
   DiscreteEventPriority,
@@ -966,7 +967,7 @@ function performSyncWorkOnRoot(root) {
   let exitStatus;
   if (
     root === workInProgressRoot &&
-    includesSomeLane(root.expiredLanes, workInProgressRootRenderLanes)
+    areLanesExpired(root, workInProgressRootRenderLanes)
   ) {
     // There's a partial tree, and at least one of its lanes has expired. Finish
     // rendering it before rendering the rest of the expired work.
@@ -1022,12 +1023,16 @@ function performSyncWorkOnRoot(root) {
   return null;
 }
 
+// TODO: Do we still need this API? I think we can delete it. Was only used
+// internally.
 export function flushRoot(root: FiberRoot, lanes: Lanes) {
-  markRootExpired(root, lanes);
-  ensureRootIsScheduled(root, now());
-  if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
-    resetRenderTimer();
-    flushSyncCallbackQueue();
+  if (lanes !== NoLanes) {
+    markRootExpired(root, lanes);
+    ensureRootIsScheduled(root, now());
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      resetRenderTimer();
+      flushSyncCallbackQueue();
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index e5fd43e6f416..4e5a415f165f 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -230,7 +230,6 @@ type BaseFiberRootProperties = {|
   pendingLanes: Lanes,
   suspendedLanes: Lanes,
   pingedLanes: Lanes,
-  expiredLanes: Lanes,
   mutableReadLanes: Lanes,
 
   finishedLanes: Lanes,
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index cf8b539433e4..5fc98d980e29 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -682,28 +682,14 @@ describe('ReactExpiration', () => {
       updateHighPri();
 
       // Both normal pri updates should have expired.
-      if (gate(flags => flags.FIXME)) {
-        // The sync update and the expired normal pri updates render in a
-        // single batch.
-        expect(Scheduler).toHaveYielded([
-          'Sibling',
-          'High pri: 1',
-          'Normal pri: 2',
-          'Sibling',
-        ]);
-      } else {
-        expect(Scheduler).toHaveYielded([
-          'Sibling',
-          'High pri: 0',
-          'Normal pri: 2',
-          'Sibling',
-          // TODO: This is the sync update. We should have rendered it in the same
-          // batch as the expired update.
-          'High pri: 1',
-          'Normal pri: 2',
-          'Sibling',
-        ]);
-      }
+      // The sync update and the expired normal pri updates render in a
+      // single batch.
+      expect(Scheduler).toHaveYielded([
+        'Sibling',
+        'High pri: 1',
+        'Normal pri: 2',
+        'Sibling',
+      ]);
     });
   });
 

From 3221e8fba4cc96cf6c7723bab9485223a266d796 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Mar 2021 11:27:36 -0500
Subject: [PATCH 0359/1603] Remove LanePriority from getBumpedLaneForHydration
 (#21086)

I'm removing all uses of LanePriority so I can delete it.
---
 .../src/ReactFiberLane.new.js                 | 54 ++++++++++---------
 .../src/ReactFiberLane.old.js                 | 54 ++++++++++---------
 2 files changed, 58 insertions(+), 50 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 794f599b2db5..d248bc4218f7 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -757,43 +757,47 @@ export function getBumpedLaneForHydration(
   root: FiberRoot,
   renderLanes: Lanes,
 ): Lane {
-  getHighestPriorityLanes(renderLanes);
-  const highestLanePriority = return_highestLanePriority;
+  const renderLane = getHighestPriorityLane(renderLanes);
 
   let lane;
-  switch (highestLanePriority) {
-    case SyncLanePriority:
-      lane = NoLane;
-      break;
-    case InputContinuousLanePriority:
+  switch (renderLane) {
+    case InputContinuousLane:
       lane = InputContinuousHydrationLane;
       break;
-    case DefaultHydrationLanePriority:
-    case DefaultLanePriority:
+    case DefaultLane:
       lane = DefaultHydrationLane;
       break;
-    case TransitionHydrationPriority:
-    case TransitionPriority:
-      lane = TransitionHydrationLane;
-      break;
-    case RetryLanePriority:
-      // Shouldn't be reachable under normal circumstances, so there's no
-      // dedicated lane for retry priority. Use the one for long transitions.
+    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 TransitionLane15:
+    case TransitionLane16:
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+    case RetryLane5:
       lane = TransitionHydrationLane;
       break;
-    case SelectiveHydrationLanePriority:
-      lane = SelectiveHydrationLane;
-      break;
-    case IdleHydrationLanePriority:
-    case IdleLanePriority:
+    case IdleLane:
       lane = IdleHydrationLane;
       break;
-    case OffscreenLanePriority:
-    case NoLanePriority:
+    default:
+      // Everything else is already either a hydration lane, or shouldn't
+      // be retried at a hydration lane.
       lane = NoLane;
       break;
-    default:
-      invariant(false, 'Invalid lane: %s. This is a bug in React.', lane);
   }
 
   // Check if the lane we chose is suspended. If so, that indicates that we
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 0bb480d274a6..6acf2656cac2 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -757,43 +757,47 @@ export function getBumpedLaneForHydration(
   root: FiberRoot,
   renderLanes: Lanes,
 ): Lane {
-  getHighestPriorityLanes(renderLanes);
-  const highestLanePriority = return_highestLanePriority;
+  const renderLane = getHighestPriorityLane(renderLanes);
 
   let lane;
-  switch (highestLanePriority) {
-    case SyncLanePriority:
-      lane = NoLane;
-      break;
-    case InputContinuousLanePriority:
+  switch (renderLane) {
+    case InputContinuousLane:
       lane = InputContinuousHydrationLane;
       break;
-    case DefaultHydrationLanePriority:
-    case DefaultLanePriority:
+    case DefaultLane:
       lane = DefaultHydrationLane;
       break;
-    case TransitionHydrationPriority:
-    case TransitionPriority:
-      lane = TransitionHydrationLane;
-      break;
-    case RetryLanePriority:
-      // Shouldn't be reachable under normal circumstances, so there's no
-      // dedicated lane for retry priority. Use the one for long transitions.
+    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 TransitionLane15:
+    case TransitionLane16:
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+    case RetryLane5:
       lane = TransitionHydrationLane;
       break;
-    case SelectiveHydrationLanePriority:
-      lane = SelectiveHydrationLane;
-      break;
-    case IdleHydrationLanePriority:
-    case IdleLanePriority:
+    case IdleLane:
       lane = IdleHydrationLane;
       break;
-    case OffscreenLanePriority:
-    case NoLanePriority:
+    default:
+      // Everything else is already either a hydration lane, or shouldn't
+      // be retried at a hydration lane.
       lane = NoLane;
       break;
-    default:
-      invariant(false, 'Invalid lane: %s. This is a bug in React.', lane);
   }
 
   // Check if the lane we chose is suspended. If so, that indicates that we

From 77be527297402a11523cb6321bcb2a0ae2b4be6c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Mar 2021 11:32:14 -0500
Subject: [PATCH 0360/1603] Remove LanePriority from computeExpirationTime
 (#21087)

I'm removing all uses of LanePriority so I can delete it.
---
 .../src/ReactFiberLane.new.js                 | 77 +++++++++++++------
 .../src/ReactFiberLane.old.js                 | 77 +++++++++++++------
 2 files changed, 104 insertions(+), 50 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index d248bc4218f7..9791ac07d469 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -410,31 +410,58 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
 }
 
 function computeExpirationTime(lane: Lane, currentTime: number) {
-  // TODO: Expiration heuristic is constant per lane, so could use a map.
-  getHighestPriorityLanes(lane);
-  const priority = return_highestLanePriority;
-  if (priority >= InputContinuousLanePriority) {
-    // 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.
-    //
-    // Also note that, in the case of user input specifically, this will soon no
-    // longer be an issue because we plan to make user input synchronous by
-    // default (until you enter `startTransition`, of course.)
-    //
-    // If weren't planning to make these updates synchronous soon anyway, I
-    // would probably make this number a configurable parameter.
-    return currentTime + 250;
-  } else if (priority >= TransitionPriority) {
-    return currentTime + 5000;
-  } else {
-    // Anything idle priority or lower should never expire.
-    return NoTimestamp;
+  switch (lane) {
+    case SyncLane:
+    case InputContinuousHydrationLane:
+    case InputContinuousLane:
+      // 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 + 250;
+    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:
+    case TransitionLane15:
+    case TransitionLane16:
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+    case RetryLane5:
+      return currentTime + 5000;
+    case SelectiveHydrationLane:
+    case IdleHydrationLane:
+    case IdleLane:
+    case OffscreenLane:
+      // 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;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 6acf2656cac2..9e578d27163e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -410,31 +410,58 @@ export function getMostRecentEventTime(root: FiberRoot, lanes: Lanes): number {
 }
 
 function computeExpirationTime(lane: Lane, currentTime: number) {
-  // TODO: Expiration heuristic is constant per lane, so could use a map.
-  getHighestPriorityLanes(lane);
-  const priority = return_highestLanePriority;
-  if (priority >= InputContinuousLanePriority) {
-    // 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.
-    //
-    // Also note that, in the case of user input specifically, this will soon no
-    // longer be an issue because we plan to make user input synchronous by
-    // default (until you enter `startTransition`, of course.)
-    //
-    // If weren't planning to make these updates synchronous soon anyway, I
-    // would probably make this number a configurable parameter.
-    return currentTime + 250;
-  } else if (priority >= TransitionPriority) {
-    return currentTime + 5000;
-  } else {
-    // Anything idle priority or lower should never expire.
-    return NoTimestamp;
+  switch (lane) {
+    case SyncLane:
+    case InputContinuousHydrationLane:
+    case InputContinuousLane:
+      // 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 + 250;
+    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:
+    case TransitionLane15:
+    case TransitionLane16:
+    case RetryLane1:
+    case RetryLane2:
+    case RetryLane3:
+    case RetryLane4:
+    case RetryLane5:
+      return currentTime + 5000;
+    case SelectiveHydrationLane:
+    case IdleHydrationLane:
+    case IdleLane:
+    case OffscreenLane:
+      // 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;
   }
 }
 

From 4a99c5c3a780d8178d9278c29d0b7f44be6a0dce Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Mar 2021 11:36:17 -0500
Subject: [PATCH 0361/1603] Use highest priority lane to detect interruptions
 (#21088)

Instead of LanePriority.

I'm removing all uses of LanePriority so I can delete it.
---
 packages/react-reconciler/src/ReactFiberLane.new.js | 11 ++++++-----
 packages/react-reconciler/src/ReactFiberLane.old.js | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 9791ac07d469..227526858b22 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -334,15 +334,16 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     // bother waiting until the root is complete.
     (wipLanes & suspendedLanes) === NoLanes
   ) {
-    getHighestPriorityLanes(wipLanes);
-    const wipLanePriority = return_highestLanePriority;
+    const nextLane = getHighestPriorityLane(nextLanes);
+    const wipLane = getHighestPriorityLane(wipLanes);
     if (
-      nextLanePriority <= wipLanePriority ||
+      // 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.
-      (nextLanePriority === DefaultLanePriority &&
-        wipLanePriority === TransitionPriority)
+      (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 9e578d27163e..2380acd634f1 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -334,15 +334,16 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     // bother waiting until the root is complete.
     (wipLanes & suspendedLanes) === NoLanes
   ) {
-    getHighestPriorityLanes(wipLanes);
-    const wipLanePriority = return_highestLanePriority;
+    const nextLane = getHighestPriorityLane(nextLanes);
+    const wipLane = getHighestPriorityLane(wipLanes);
     if (
-      nextLanePriority <= wipLanePriority ||
+      // 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.
-      (nextLanePriority === DefaultLanePriority &&
-        wipLanePriority === TransitionPriority)
+      (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;

From a7c57268fb71163e4abb5e386c0d0e63290baaae Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 25 Mar 2021 17:01:36 +0000
Subject: [PATCH 0362/1603] Add aspectRatio to the unitless list (#21100)

---
 packages/react-dom/src/shared/CSSProperty.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-dom/src/shared/CSSProperty.js b/packages/react-dom/src/shared/CSSProperty.js
index 7b1e4aba8b54..446965fc182e 100644
--- a/packages/react-dom/src/shared/CSSProperty.js
+++ b/packages/react-dom/src/shared/CSSProperty.js
@@ -10,6 +10,7 @@
  */
 export const isUnitlessNumber = {
   animationIterationCount: true,
+  aspectRatio: true,
   borderImageOutset: true,
   borderImageSlice: true,
   borderImageWidth: true,

From 1b7e471b9131dc810f434a5e7201189d936da4fe Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshua.gross@gmail.com>
Date: Thu, 25 Mar 2021 16:23:39 -0700
Subject: [PATCH 0363/1603] React Fabric: Support passing nativeViewTag to
 getInspectorDataForViewAtPoint callback, for React DevTools compat (#21080)

React Fabric: Support passing nativeViewTag to getInspectorDataForViewAtPoint callback, for React DevTools compat
---
 .../src/ReactNativeFiberInspector.js                  | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
index 04ddc968d7e8..ba8474fef23e 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -190,13 +190,22 @@ if (__DEV__) {
 
           closestInstance =
             internalInstanceHandle.stateNode.canonical._internalInstanceHandle;
+
+          // 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(
             internalInstanceHandle.stateNode.node,
             (x, y, width, height, pageX, pageY) => {
+              const inspectorData = getInspectorDataForInstance(
+                closestInstance,
+              );
               callback({
+                ...inspectorData,
                 pointerY: locationY,
                 frame: {left: pageX, top: pageY, width, height},
-                ...getInspectorDataForInstance(closestInstance),
+                touchedViewTag: nativeViewTag,
               });
             },
           );

From 38a1aedb4987142ff2cfca57593b91571a39d394 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 25 Mar 2021 21:38:43 -0400
Subject: [PATCH 0364/1603] [Fizz] Add FormatContext and Refactor Work (#21103)

* Add format context

* Let the Work node hold all working state for the recursive loop

Stacks are nice and all but there's a cost to maintaining each frame
both in terms of stack size usage and writing to it.

* Move current format context into work

* Synchronously render children of a Suspense boundary

We don't have to spawn work and snapshot the context. Instead we can try
to render the boundary immediately in case it works.

* Lazily create the fallback work

Instead of eagerly create the fallback work and then immediately abort it.
We can just avoid creating it if we finish synchronously.
---
 .../src/server/ReactDOMFizzServerBrowser.js   |   6 +-
 .../src/server/ReactDOMFizzServerNode.js      |   6 +-
 .../src/server/ReactDOMServerFormatConfig.js  |  52 +++++-
 .../server/ReactNativeServerFormatConfig.js   |  27 ++++
 .../src/ReactNoopServer.js                    |   5 +
 packages/react-server/src/ReactFizzServer.js  | 148 +++++++++++-------
 .../forks/ReactServerFormatConfig.custom.js   |   2 +
 7 files changed, 188 insertions(+), 58 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 95a58f0688dd..254d2380d5ab 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -16,7 +16,10 @@ import {
   abort,
 } from 'react-server/src/ReactFizzServer';
 
-import {createResponseState} from './ReactDOMServerFormatConfig';
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerFormatConfig';
 
 type Options = {
   identifierPrefix?: string,
@@ -46,6 +49,7 @@ function renderToReadableStream(
         children,
         controller,
         createResponseState(options ? options.identifierPrefix : undefined),
+        createRootFormatContext(), // We call this here in case we need options to initialize it.
         options ? options.progressiveChunkSize : undefined,
         options ? options.onError : undefined,
         options ? options.onCompleteAll : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 51a091948d4b..c9d0cbc30314 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -17,7 +17,10 @@ import {
   abort,
 } from 'react-server/src/ReactFizzServer';
 
-import {createResponseState} from './ReactDOMServerFormatConfig';
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerFormatConfig';
 
 function createDrainHandler(destination, request) {
   return () => startFlowing(request);
@@ -46,6 +49,7 @@ function pipeToNodeWritable(
     children,
     destination,
     createResponseState(options ? options.identifierPrefix : undefined),
+    createRootFormatContext(), // We call this here in case we need options to initialize it.
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
     options ? options.onCompleteAll : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index c0e55b0a4601..f7ed7ccf9397 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -22,7 +22,7 @@ import {
 import escapeTextForBrowser from './escapeTextForBrowser';
 import invariant from 'shared/invariant';
 
-// Per response,
+// Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
@@ -50,6 +50,56 @@ export function createResponseState(
   };
 }
 
+// Constants for the namespace we use. We don't actually provide the namespace but conditionally
+// use different segment parents based on namespace. Therefore we use constants instead of the string.
+const ROOT_NAMESPACE = 0; // At the root we don't need to know which namespace it is. We just need to know that it's already the right one.
+const HTML_NAMESPACE = 1;
+const SVG_NAMESPACE = 2;
+const MATHML_NAMESPACE = 3;
+
+type NamespaceFlag = 0 | 1 | 2 | 3;
+
+// Lets us keep track of contextual state and pick it back up after suspending.
+export type FormatContext = {
+  namespace: NamespaceFlag, // root/svg/html/mathml
+  selectedValue: null | string, // the selected value(s) inside a <select>, or null outside <select>
+};
+
+function createFormatContext(
+  namespace: NamespaceFlag,
+  selectedValue: null | string,
+): FormatContext {
+  return {
+    namespace,
+    selectedValue,
+  };
+}
+
+export function createRootFormatContext(): FormatContext {
+  return createFormatContext(ROOT_NAMESPACE, null);
+}
+
+export function getChildFormatContext(
+  parentContext: FormatContext,
+  type: string,
+  props: Object,
+): FormatContext {
+  switch (type) {
+    case 'select':
+      return createFormatContext(
+        parentContext.namespace,
+        props.value != null ? props.value : props.defaultValue,
+      );
+    case 'svg':
+      return createFormatContext(SVG_NAMESPACE, null);
+    case 'math':
+      return createFormatContext(MATHML_NAMESPACE, null);
+    case 'foreignObject':
+      return createFormatContext(HTML_NAMESPACE, null);
+  }
+  return parentContext;
+}
+
 // This object is used to lazily reuse the ID of the first generated node, or assign one.
 // We can't assign an ID up front because the node we're attaching it to might already
 // have one. So we need to lazily use that if it's available.
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index d89fafea818e..3e6b37e76c18 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -66,6 +66,33 @@ export function createResponseState(): ResponseState {
   };
 }
 
+// isInAParentText
+export type FormatContext = boolean;
+
+export function createRootFormatContext(): FormatContext {
+  return false;
+}
+
+export function getChildFormatContext(
+  parentContext: FormatContext,
+  type: string,
+  props: Object,
+): FormatContext {
+  const prevIsInAParentText = parentContext;
+  const isInAParentText =
+    type === 'AndroidTextInput' || // Android
+    type === 'RCTMultilineTextInputView' || // iOS
+    type === 'RCTSinglelineTextInputView' || // iOS
+    type === 'RCTText' ||
+    type === 'RCTVirtualText';
+
+  if (prevIsInAParentText !== isInAParentText) {
+    return isInAParentText;
+  } else {
+    return parentContext;
+  }
+}
+
 // This object is used to lazily reuse the ID of the first generated node, or assign one.
 // This is very specific to DOM where we can't assign an ID to.
 export type SuspenseBoundaryID = number;
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index feec884743ef..f384baa8d9f9 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -82,6 +82,10 @@ const ReactNoopServer = ReactFizzServer({
     return {state: 'pending', children: []};
   },
 
+  getChildFormatContext(): null {
+    return null;
+  },
+
   pushTextInstance(target: Array<Uint8Array>, text: string): void {
     const textInstance: TextInstance = {
       text,
@@ -236,6 +240,7 @@ function render(children: React$Element<any>, options?: Options): Destination {
     children,
     destination,
     null,
+    null,
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
     options ? options.onCompleteAll : undefined,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index b936376e85ea..92ff01c99a7a 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -17,6 +17,7 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   SuspenseBoundaryID,
   ResponseState,
+  FormatContext,
 } from './ReactServerFormatConfig';
 
 import {
@@ -44,6 +45,7 @@ import {
   pushStartInstance,
   pushEndInstance,
   createSuspenseBoundaryID,
+  getChildFormatContext,
 } from './ReactServerFormatConfig';
 import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -69,6 +71,7 @@ type SuspendedWork = {
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment, // the segment we'll write to
   abortSet: Set<SuspendedWork>, // the abortable set that this work belongs to
+  formatContext: FormatContext,
   assignID: null | SuspenseBoundaryID, // id to assign to the content
 };
 
@@ -142,6 +145,7 @@ export function createRequest(
   children: ReactNodeList,
   destination: Destination,
   responseState: ResponseState,
+  rootContext: FormatContext,
   progressiveChunkSize: number = DEFAULT_PROGRESSIVE_CHUNK_SIZE,
   onError: (error: mixed) => void = noop,
   onCompleteAll: () => void = noop,
@@ -177,6 +181,7 @@ export function createRequest(
     null,
     rootSegment,
     abortSet,
+    rootContext,
     null,
   );
   pingedWork.push(rootWork);
@@ -213,6 +218,7 @@ function createSuspendedWork(
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
   abortSet: Set<SuspendedWork>,
+  formatContext: FormatContext,
   assignID: null | SuspenseBoundaryID,
 ): SuspendedWork {
   request.allPendingWork++;
@@ -227,6 +233,7 @@ function createSuspendedWork(
     blockedBoundary,
     blockedSegment,
     abortSet,
+    formatContext,
     assignID,
   };
   abortSet.add(work);
@@ -265,26 +272,32 @@ function fatalError(request: Request, error: mixed): void {
 
 function renderNode(
   request: Request,
-  parentBoundary: Root | SuspenseBoundary,
-  segment: Segment,
+  work: SuspendedWork,
   node: ReactNodeList,
-  abortSet: Set<SuspendedWork>,
-  assignID: null | SuspenseBoundaryID,
 ): void {
   if (typeof node === 'string') {
-    pushTextInstance(segment.chunks, node, request.responseState, assignID);
+    pushTextInstance(
+      work.blockedSegment.chunks,
+      node,
+      request.responseState,
+      work.assignID,
+    );
+    work.assignID = null;
     return;
   }
 
   if (Array.isArray(node)) {
     if (node.length > 0) {
-      // Only the first node gets assigned an ID.
-      renderNode(request, parentBoundary, segment, node[0], abortSet, assignID);
-      for (let i = 1; i < node.length; i++) {
-        renderNode(request, parentBoundary, segment, node[i], abortSet, null);
+      for (let i = 0; i < node.length; i++) {
+        renderNode(request, work, node[i]);
       }
     } else {
-      pushEmpty(segment.chunks, request.responseState, assignID);
+      pushEmpty(
+        work.blockedSegment.chunks,
+        request.responseState,
+        work.assignID,
+      );
+      work.assignID = null;
     }
     return;
   }
@@ -302,24 +315,27 @@ function renderNode(
   if (typeof type === 'function') {
     try {
       const result = type(props);
-      renderNode(request, parentBoundary, segment, result, abortSet, assignID);
+      renderNode(request, work, result);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
+        const segment = work.blockedSegment;
         const insertionIndex = segment.chunks.length;
         const newSegment = createPendingSegment(request, insertionIndex, null);
         segment.children.push(newSegment);
         const suspendedWork = createSuspendedWork(
           request,
           node,
-          parentBoundary,
+          work.blockedBoundary,
           newSegment,
-          abortSet,
-          assignID,
+          work.abortSet,
+          work.formatContext,
+          work.assignID,
         );
+        // We've delegated the assignment.
+        work.assignID = null;
         const ping = suspendedWork.ping;
         x.then(ping, ping);
-        // TODO: Emit place holder
       } else {
         // We can rethrow to terminate the rest of this tree.
         throw x;
@@ -327,24 +343,28 @@ function renderNode(
     }
   } else if (typeof type === 'string') {
     pushStartInstance(
-      segment.chunks,
+      work.blockedSegment.chunks,
       type,
       props,
       request.responseState,
-      assignID,
-    );
-    renderNode(
-      request,
-      parentBoundary,
-      segment,
-      props.children,
-      abortSet,
-      null,
+      work.assignID,
     );
-    pushEndInstance(segment.chunks, type, props);
+    // We must have assigned it already above so we don't need this anymore.
+    work.assignID = null;
+    const prevContext = work.formatContext;
+    work.formatContext = getChildFormatContext(prevContext, type, props);
+    renderNode(request, work, props.children);
+    // We expect that errors will fatal the whole work and that we don't need
+    // the correct context. Therefore this is not in a finally.
+    work.formatContext = prevContext;
+    pushEndInstance(work.blockedSegment.chunks, type, props);
   } else if (type === REACT_SUSPENSE_TYPE) {
+    const parentBoundary = work.blockedBoundary;
+    const parentSegment = work.blockedSegment;
+
     // We need to push an "empty" thing here to identify the parent suspense boundary.
-    pushEmpty(segment.chunks, request.responseState, assignID);
+    pushEmpty(parentSegment.chunks, request.responseState, work.assignID);
+    work.assignID = null;
     // 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,
@@ -354,15 +374,52 @@ function renderNode(
 
     const fallbackAbortSet: Set<SuspendedWork> = new Set();
     const newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
-
-    const insertionIndex = segment.chunks.length;
+    const insertionIndex = parentSegment.chunks.length;
     // The children of the boundary segment is actually the fallback.
     const boundarySegment = createPendingSegment(
       request,
       insertionIndex,
       newBoundary,
     );
-    segment.children.push(boundarySegment);
+    parentSegment.children.push(boundarySegment);
+
+    // This segment is the actual child content. We can start rendering that immediately.
+    const contentRootSegment = createPendingSegment(request, 0, null);
+    // 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;
+
+    // Currently this is running synchronously. We could instead schedule this to pingedWork.
+    // I suspect that there might be some efficiency benefits from not creating the suspended work
+    // 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 work 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 work with that context.
+    work.blockedBoundary = newBoundary;
+    work.blockedSegment = contentRootSegment;
+    try {
+      renderNode(request, work, content);
+      contentRootSegment.status = COMPLETED;
+      newBoundary.completedSegments.push(contentRootSegment);
+      if (newBoundary.pendingWork === 0) {
+        // 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.
+        return;
+      }
+    } catch (error) {
+      contentRootSegment.status = ERRORED;
+      reportError(request, error);
+      newBoundary.forceClientRender = true;
+      // We don't need to decrement any work numbers because we didn't spawn any new work.
+      // We don't need to schedule any work because we know the parent has written yet.
+      // We do need to fallthrough to create the fallback though.
+    } finally {
+      work.blockedBoundary = parentBoundary;
+      work.blockedSegment = parentSegment;
+    }
 
     // We create suspended work 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.
@@ -372,29 +429,12 @@ function renderNode(
       parentBoundary,
       boundarySegment,
       fallbackAbortSet,
+      work.formatContext,
       newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
     );
     // 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 work on.
     request.pingedWork.push(suspendedFallbackWork);
-
-    // This segment is the actual child content. We can start rendering that immediately.
-    const contentRootSegment = createPendingSegment(request, 0, null);
-    // 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;
-    // TODO: Currently this is running synchronously. We could instead schedule this to pingedWork.
-    // I suspect that there might be some efficiency benefits from not creating the suspended work
-    // and instead just using the stack if possible. Particularly when we add contexts.
-    const contentWork = createSuspendedWork(
-      request,
-      content,
-      newBoundary,
-      contentRootSegment,
-      abortSet,
-      null,
-    );
-    retryWork(request, contentWork);
   } else {
     throw new Error('Not yet implemented element type.');
   }
@@ -547,8 +587,6 @@ function retryWork(request: Request, work: SuspendedWork): void {
     // We completed this by other means before we had a chance to retry it.
     return;
   }
-  const boundary = work.blockedBoundary;
-  const abortSet = work.abortSet;
   try {
     let node = work.node;
     while (
@@ -565,20 +603,20 @@ function retryWork(request: Request, work: SuspendedWork): void {
       node = element.type(element.props);
     }
 
-    renderNode(request, boundary, segment, node, abortSet, work.assignID);
+    renderNode(request, work, node);
 
-    abortSet.delete(work);
+    work.abortSet.delete(work);
     segment.status = COMPLETED;
-    finishedWork(request, boundary, segment);
+    finishedWork(request, work.blockedBoundary, segment);
   } catch (x) {
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       // Something suspended again, let's pick it back up later.
       const ping = work.ping;
       x.then(ping, ping);
     } else {
-      abortSet.delete(work);
+      work.abortSet.delete(work);
       segment.status = ERRORED;
-      erroredWork(request, boundary, segment, x);
+      erroredWork(request, work.blockedBoundary, segment, x);
     }
   }
 }
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 76219e1a0748..58f2d504b46b 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -26,8 +26,10 @@
 declare var $$$hostConfig: any;
 export opaque type Destination = mixed; // eslint-disable-line no-undef
 export opaque type ResponseState = mixed;
+export opaque type FormatContext = mixed;
 export opaque type SuspenseBoundaryID = mixed;
 
+export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
 export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
 export const pushEmpty = $$$hostConfig.pushEmpty;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;

From 8b741437b12a3faad1b742274af8fcc456e71958 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 25 Mar 2021 21:39:59 -0400
Subject: [PATCH 0365/1603] Rename SuspendedWork to Task (#21105)

---
 packages/react-server/src/ReactFizzServer.js | 280 +++++++++----------
 1 file changed, 138 insertions(+), 142 deletions(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 92ff01c99a7a..71821638f0e2 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -59,18 +59,18 @@ type SuspenseBoundary = {
   rootSegmentID: number,
   forceClientRender: boolean, // if it errors or infinitely suspends
   parentFlushed: boolean,
-  pendingWork: number, // when it reaches zero we can show this boundary's content
+  pendingTasks: number, // when it reaches zero we can show this boundary's content
   completedSegments: Array<Segment>, // completed but not yet flushed segments.
   byteSize: number, // used to determine whether to inline children boundaries.
-  fallbackAbortableWork: Set<SuspendedWork>, // used to cancel work on the fallback if the boundary completes or gets canceled.
+  fallbackAbortableTask: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
 };
 
-type SuspendedWork = {
+type Task = {
   node: ReactNodeList,
   ping: () => void,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment, // the segment we'll write to
-  abortSet: Set<SuspendedWork>, // the abortable set that this work belongs to
+  abortSet: Set<Task>, // the abortable set that this task belongs to
   formatContext: FormatContext,
   assignID: null | SuspenseBoundaryID, // id to assign to the content
 };
@@ -104,18 +104,18 @@ type Request = {
   +progressiveChunkSize: number,
   status: 0 | 1 | 2,
   nextSegmentId: number,
-  allPendingWork: number, // when it reaches zero, we can close the connection.
-  pendingRootWork: number, // when this reaches zero, we've finished at least the root boundary.
+  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.
-  abortableWork: Set<SuspendedWork>,
-  pingedWork: Array<SuspendedWork>,
+  abortableTask: Set<Task>,
+  pingedTask: Array<Task>,
   // 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.
   // onError is called when an error happens anywhere in the tree. It might recover.
   onError: (error: mixed) => void,
-  // onCompleteAll is called when all pending work is done but it may not have flushed yet.
+  // onCompleteAll 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.
   onCompleteAll: () => void,
   // onReadyToStream is called when there is at least a root fallback ready to show.
@@ -151,19 +151,19 @@ export function createRequest(
   onCompleteAll: () => void = noop,
   onReadyToStream: () => void = noop,
 ): Request {
-  const pingedWork = [];
-  const abortSet: Set<SuspendedWork> = new Set();
+  const pingedTask = [];
+  const abortSet: Set<Task> = new Set();
   const request = {
     destination,
     responseState,
     progressiveChunkSize,
     status: BUFFERING,
     nextSegmentId: 0,
-    allPendingWork: 0,
-    pendingRootWork: 0,
+    allPendingTasks: 0,
+    pendingRootTasks: 0,
     completedRootSegment: null,
-    abortableWork: abortSet,
-    pingedWork: pingedWork,
+    abortableTask: abortSet,
+    pingedTask: pingedTask,
     clientRenderedBoundaries: [],
     completedBoundaries: [],
     partialBoundaries: [],
@@ -175,7 +175,7 @@ export function createRequest(
   const rootSegment = createPendingSegment(request, 0, null);
   // There is no parent so conceptually, we're unblocked to flush this segment.
   rootSegment.parentFlushed = true;
-  const rootWork = createSuspendedWork(
+  const rootTask = createTask(
     request,
     children,
     null,
@@ -184,60 +184,60 @@ export function createRequest(
     rootContext,
     null,
   );
-  pingedWork.push(rootWork);
+  pingedTask.push(rootTask);
   return request;
 }
 
-function pingSuspendedWork(request: Request, work: SuspendedWork): void {
-  const pingedWork = request.pingedWork;
-  pingedWork.push(work);
-  if (pingedWork.length === 1) {
+function pingTask(request: Request, task: Task): void {
+  const pingedTask = request.pingedTask;
+  pingedTask.push(task);
+  if (pingedTask.length === 1) {
     scheduleWork(() => performWork(request));
   }
 }
 
 function createSuspenseBoundary(
   request: Request,
-  fallbackAbortableWork: Set<SuspendedWork>,
+  fallbackAbortableTask: Set<Task>,
 ): SuspenseBoundary {
   return {
     id: createSuspenseBoundaryID(request.responseState),
     rootSegmentID: -1,
     parentFlushed: false,
-    pendingWork: 0,
+    pendingTasks: 0,
     forceClientRender: false,
     completedSegments: [],
     byteSize: 0,
-    fallbackAbortableWork,
+    fallbackAbortableTask,
   };
 }
 
-function createSuspendedWork(
+function createTask(
   request: Request,
   node: ReactNodeList,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
-  abortSet: Set<SuspendedWork>,
+  abortSet: Set<Task>,
   formatContext: FormatContext,
   assignID: null | SuspenseBoundaryID,
-): SuspendedWork {
-  request.allPendingWork++;
+): Task {
+  request.allPendingTasks++;
   if (blockedBoundary === null) {
-    request.pendingRootWork++;
+    request.pendingRootTasks++;
   } else {
-    blockedBoundary.pendingWork++;
+    blockedBoundary.pendingTasks++;
   }
-  const work = {
+  const task = {
     node,
-    ping: () => pingSuspendedWork(request, work),
+    ping: () => pingTask(request, task),
     blockedBoundary,
     blockedSegment,
     abortSet,
     formatContext,
     assignID,
   };
-  abortSet.add(work);
-  return work;
+  abortSet.add(task);
+  return task;
 }
 
 function createPendingSegment(
@@ -270,34 +270,30 @@ function fatalError(request: Request, error: mixed): void {
   closeWithError(request.destination, error);
 }
 
-function renderNode(
-  request: Request,
-  work: SuspendedWork,
-  node: ReactNodeList,
-): void {
+function renderNode(request: Request, task: Task, node: ReactNodeList): void {
   if (typeof node === 'string') {
     pushTextInstance(
-      work.blockedSegment.chunks,
+      task.blockedSegment.chunks,
       node,
       request.responseState,
-      work.assignID,
+      task.assignID,
     );
-    work.assignID = null;
+    task.assignID = null;
     return;
   }
 
   if (Array.isArray(node)) {
     if (node.length > 0) {
       for (let i = 0; i < node.length; i++) {
-        renderNode(request, work, node[i]);
+        renderNode(request, task, node[i]);
       }
     } else {
       pushEmpty(
-        work.blockedSegment.chunks,
+        task.blockedSegment.chunks,
         request.responseState,
-        work.assignID,
+        task.assignID,
       );
-      work.assignID = null;
+      task.assignID = null;
     }
     return;
   }
@@ -315,26 +311,26 @@ function renderNode(
   if (typeof type === 'function') {
     try {
       const result = type(props);
-      renderNode(request, work, result);
+      renderNode(request, task, result);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
-        const segment = work.blockedSegment;
+        const segment = task.blockedSegment;
         const insertionIndex = segment.chunks.length;
         const newSegment = createPendingSegment(request, insertionIndex, null);
         segment.children.push(newSegment);
-        const suspendedWork = createSuspendedWork(
+        const newTask = createTask(
           request,
           node,
-          work.blockedBoundary,
+          task.blockedBoundary,
           newSegment,
-          work.abortSet,
-          work.formatContext,
-          work.assignID,
+          task.abortSet,
+          task.formatContext,
+          task.assignID,
         );
         // We've delegated the assignment.
-        work.assignID = null;
-        const ping = suspendedWork.ping;
+        task.assignID = null;
+        const ping = newTask.ping;
         x.then(ping, ping);
       } else {
         // We can rethrow to terminate the rest of this tree.
@@ -343,28 +339,28 @@ function renderNode(
     }
   } else if (typeof type === 'string') {
     pushStartInstance(
-      work.blockedSegment.chunks,
+      task.blockedSegment.chunks,
       type,
       props,
       request.responseState,
-      work.assignID,
+      task.assignID,
     );
     // We must have assigned it already above so we don't need this anymore.
-    work.assignID = null;
-    const prevContext = work.formatContext;
-    work.formatContext = getChildFormatContext(prevContext, type, props);
-    renderNode(request, work, props.children);
-    // We expect that errors will fatal the whole work and that we don't need
+    task.assignID = null;
+    const prevContext = task.formatContext;
+    task.formatContext = getChildFormatContext(prevContext, type, props);
+    renderNode(request, task, props.children);
+    // 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.
-    work.formatContext = prevContext;
-    pushEndInstance(work.blockedSegment.chunks, type, props);
+    task.formatContext = prevContext;
+    pushEndInstance(task.blockedSegment.chunks, type, props);
   } else if (type === REACT_SUSPENSE_TYPE) {
-    const parentBoundary = work.blockedBoundary;
-    const parentSegment = work.blockedSegment;
+    const parentBoundary = task.blockedBoundary;
+    const parentSegment = task.blockedSegment;
 
     // We need to push an "empty" thing here to identify the parent suspense boundary.
-    pushEmpty(parentSegment.chunks, request.responseState, work.assignID);
-    work.assignID = null;
+    pushEmpty(parentSegment.chunks, request.responseState, task.assignID);
+    task.assignID = null;
     // 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,
@@ -372,7 +368,7 @@ function renderNode(
     const fallback: ReactNodeList = props.fallback;
     const content: ReactNodeList = props.children;
 
-    const fallbackAbortSet: Set<SuspendedWork> = new Set();
+    const fallbackAbortSet: Set<Task> = new Set();
     const newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
     const insertionIndex = parentSegment.chunks.length;
     // The children of the boundary segment is actually the fallback.
@@ -389,21 +385,21 @@ function renderNode(
     // no parent segment so there's nothing to wait on.
     contentRootSegment.parentFlushed = true;
 
-    // Currently this is running synchronously. We could instead schedule this to pingedWork.
-    // I suspect that there might be some efficiency benefits from not creating the suspended work
+    // Currently this is running synchronously. We could instead schedule this to pingedTask.
+    // 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 work to render the content immediately without
+    // 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 work with that context.
-    work.blockedBoundary = newBoundary;
-    work.blockedSegment = contentRootSegment;
+    // we're writing to. If something suspends, it'll spawn new suspended task with that context.
+    task.blockedBoundary = newBoundary;
+    task.blockedSegment = contentRootSegment;
     try {
-      renderNode(request, work, content);
+      renderNode(request, task, content);
       contentRootSegment.status = COMPLETED;
       newBoundary.completedSegments.push(contentRootSegment);
-      if (newBoundary.pendingWork === 0) {
+      if (newBoundary.pendingTasks === 0) {
         // 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.
@@ -413,34 +409,34 @@ function renderNode(
       contentRootSegment.status = ERRORED;
       reportError(request, error);
       newBoundary.forceClientRender = true;
-      // We don't need to decrement any work numbers because we didn't spawn any new work.
-      // We don't need to schedule any work because we know the parent has written yet.
+      // 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 {
-      work.blockedBoundary = parentBoundary;
-      work.blockedSegment = parentSegment;
+      task.blockedBoundary = parentBoundary;
+      task.blockedSegment = parentSegment;
     }
 
-    // We create suspended work for the fallback because we don't want to actually work
+    // We create suspended task for the fallback because we don't want to actually task
     // on it yet in case we finish the main content, so we queue for later.
-    const suspendedFallbackWork = createSuspendedWork(
+    const suspendedFallbackTask = createTask(
       request,
       fallback,
       parentBoundary,
       boundarySegment,
       fallbackAbortSet,
-      work.formatContext,
+      task.formatContext,
       newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
     );
-    // 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 work on.
-    request.pingedWork.push(suspendedFallbackWork);
+    // TODO: This should be queued at a separate lower priority queue so that we only task
+    // on preparing fallbacks if we don't have any more main content to task on.
+    request.pingedTask.push(suspendedFallbackTask);
   } else {
     throw new Error('Not yet implemented element type.');
   }
 }
 
-function erroredWork(
+function erroredTask(
   request: Request,
   boundary: Root | SuspenseBoundary,
   segment: Segment,
@@ -451,7 +447,7 @@ function erroredWork(
   if (boundary === null) {
     fatalError(request, error);
   } else {
-    boundary.pendingWork--;
+    boundary.pendingTasks--;
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
 
@@ -467,32 +463,32 @@ function erroredWork(
     }
   }
 
-  request.allPendingWork--;
-  if (request.allPendingWork === 0) {
+  request.allPendingTasks--;
+  if (request.allPendingTasks === 0) {
     request.onCompleteAll();
   }
 }
 
-function abortWorkSoft(suspendedWork: SuspendedWork): void {
-  // This aborts work without aborting the parent boundary that it blocks.
-  // It's used for when we didn't need this work to complete the tree.
-  // If work was needed, then it should use abortWork instead.
+function abortTaskSoft(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 = suspendedWork.blockedBoundary;
-  const segment = suspendedWork.blockedSegment;
+  const boundary = task.blockedBoundary;
+  const segment = task.blockedSegment;
   segment.status = ABORTED;
-  finishedWork(request, boundary, segment);
+  finishedTask(request, boundary, segment);
 }
 
-function abortWork(suspendedWork: SuspendedWork): void {
-  // This aborts the work and aborts the parent that it blocks, putting it into
+function abortTask(task: Task): void {
+  // This aborts the task and aborts the parent that it blocks, putting it into
   // client rendered mode.
   const request: Request = this;
-  const boundary = suspendedWork.blockedBoundary;
-  const segment = suspendedWork.blockedSegment;
+  const boundary = task.blockedBoundary;
+  const segment = task.blockedSegment;
   segment.status = ABORTED;
 
-  request.allPendingWork--;
+  request.allPendingTasks--;
   if (boundary === null) {
     // We didn't complete the root so we have nothing to show. We can close
     // the request;
@@ -501,12 +497,12 @@ function abortWork(suspendedWork: SuspendedWork): void {
       close(request.destination);
     }
   } else {
-    boundary.pendingWork--;
+    boundary.pendingTasks--;
 
     // 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.fallbackAbortableWork.forEach(abortWork, request);
-    boundary.fallbackAbortableWork.clear();
+    boundary.fallbackAbortableTask.forEach(abortTask, request);
+    boundary.fallbackAbortableTask.clear();
 
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
@@ -515,13 +511,13 @@ function abortWork(suspendedWork: SuspendedWork): void {
       }
     }
 
-    if (request.allPendingWork === 0) {
+    if (request.allPendingTasks === 0) {
       request.onCompleteAll();
     }
   }
 }
 
-function finishedWork(
+function finishedTask(
   request: Request,
   boundary: Root | SuspenseBoundary,
   segment: Segment,
@@ -534,19 +530,19 @@ function finishedWork(
       );
       request.completedRootSegment = segment;
     }
-    request.pendingRootWork--;
-    if (request.pendingRootWork === 0) {
+    request.pendingRootTasks--;
+    if (request.pendingRootTasks === 0) {
       request.onReadyToStream();
     }
   } else {
-    boundary.pendingWork--;
+    boundary.pendingTasks--;
     if (boundary.forceClientRender) {
       // This already errored.
-    } else if (boundary.pendingWork === 0) {
+    } else if (boundary.pendingTasks === 0) {
       // This must have been the last segment we were waiting on. This boundary is now complete.
-      // We can now cancel any pending work on the fallback since we won't need to show it anymore.
-      boundary.fallbackAbortableWork.forEach(abortWorkSoft, request);
-      boundary.fallbackAbortableWork.clear();
+      // We can now cancel any pending task on the fallback since we won't need to show it anymore.
+      boundary.fallbackAbortableTask.forEach(abortTaskSoft, request);
+      boundary.fallbackAbortableTask.clear();
       if (segment.parentFlushed) {
         // Our parent segment already flushed, so we need to schedule this segment to be emitted.
         boundary.completedSegments.push(segment);
@@ -573,22 +569,22 @@ function finishedWork(
     }
   }
 
-  request.allPendingWork--;
-  if (request.allPendingWork === 0) {
+  request.allPendingTasks--;
+  if (request.allPendingTasks === 0) {
     // This needs to be called at the very end so that we can synchronously write the result
     // in the callback if needed.
     request.onCompleteAll();
   }
 }
 
-function retryWork(request: Request, work: SuspendedWork): void {
-  const segment = work.blockedSegment;
+function retryTask(request: Request, task: Task): void {
+  const segment = task.blockedSegment;
   if (segment.status !== PENDING) {
     // We completed this by other means before we had a chance to retry it.
     return;
   }
   try {
-    let node = work.node;
+    let node = task.node;
     while (
       typeof node === 'object' &&
       node !== null &&
@@ -598,25 +594,25 @@ function retryWork(request: Request, work: SuspendedWork): void {
       // Doing this here lets us reuse this same Segment if the next component
       // also suspends.
       const element: React$Element<any> = (node: any);
-      work.node = node;
+      task.node = node;
       // TODO: Classes and legacy context etc.
       node = element.type(element.props);
     }
 
-    renderNode(request, work, node);
+    renderNode(request, task, node);
 
-    work.abortSet.delete(work);
+    task.abortSet.delete(task);
     segment.status = COMPLETED;
-    finishedWork(request, work.blockedBoundary, segment);
+    finishedTask(request, task.blockedBoundary, segment);
   } catch (x) {
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       // Something suspended again, let's pick it back up later.
-      const ping = work.ping;
+      const ping = task.ping;
       x.then(ping, ping);
     } else {
-      work.abortSet.delete(work);
+      task.abortSet.delete(task);
       segment.status = ERRORED;
-      erroredWork(request, work.blockedBoundary, segment, x);
+      erroredTask(request, task.blockedBoundary, segment, x);
     }
   }
 }
@@ -629,13 +625,13 @@ function performWork(request: Request): void {
   ReactCurrentDispatcher.current = Dispatcher;
 
   try {
-    const pingedWork = request.pingedWork;
+    const pingedTask = request.pingedTask;
     let i;
-    for (i = 0; i < pingedWork.length; i++) {
-      const work = pingedWork[i];
-      retryWork(request, work);
+    for (i = 0; i < pingedTask.length; i++) {
+      const task = pingedTask[i];
+      retryTask(request, task);
     }
-    pingedWork.splice(0, i);
+    pingedTask.splice(0, i);
     if (request.status === FLOWING) {
       flushCompletedQueues(request);
     }
@@ -712,7 +708,7 @@ function flushSegment(
     flushSubtree(request, destination, segment);
 
     return writeEndSuspenseBoundary(destination);
-  } else if (boundary.pendingWork > 0) {
+  } else if (boundary.pendingTasks > 0) {
     // This boundary is still loading. Emit a pending suspense boundary wrapper.
 
     // Assign an ID to refer to the future content by.
@@ -880,7 +876,7 @@ function flushCompletedQueues(request: Request): void {
     // TODO: It's kind of unfortunate to keep checking this array after we've already
     // emitted the root.
     const completedRootSegment = request.completedRootSegment;
-    if (completedRootSegment !== null && request.pendingRootWork === 0) {
+    if (completedRootSegment !== null && request.pendingRootTasks === 0) {
       flushSegment(request, destination, completedRootSegment);
       request.completedRootSegment = null;
     }
@@ -956,17 +952,17 @@ function flushCompletedQueues(request: Request): void {
     completeWriting(destination);
     flushBuffered(destination);
     if (
-      request.allPendingWork === 0 &&
-      request.pingedWork.length === 0 &&
+      request.allPendingTasks === 0 &&
+      request.pingedTask.length === 0 &&
       request.clientRenderedBoundaries.length === 0 &&
       request.completedBoundaries.length === 0
       // We don't need to check any partially completed segments because
-      // either they have pending work or they're complete.
+      // either they have pending task or they're complete.
     ) {
       if (__DEV__) {
-        if (request.abortableWork.size !== 0) {
+        if (request.abortableTask.size !== 0) {
           console.error(
-            'There was still abortable work at the root when we closed. This is a bug in React.',
+            'There was still abortable task at the root when we closed. This is a bug in React.',
           );
         }
       }
@@ -996,9 +992,9 @@ export function startFlowing(request: Request): void {
 // This is called to early terminate a request. It puts all pending boundaries in client rendered state.
 export function abort(request: Request): void {
   try {
-    const abortableWork = request.abortableWork;
-    abortableWork.forEach(abortWork, request);
-    abortableWork.clear();
+    const abortableTask = request.abortableTask;
+    abortableTask.forEach(abortTask, request);
+    abortableTask.clear();
     if (request.status === FLOWING) {
       flushCompletedQueues(request);
     }

From 556644e2372bf275a498006fc17dff14d324d6be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 25 Mar 2021 22:21:41 -0400
Subject: [PATCH 0366/1603] Fix plurals (#21106)

---
 packages/react-server/src/ReactFizzServer.js | 54 ++++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 71821638f0e2..c4b795d24ff1 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -62,7 +62,7 @@ type SuspenseBoundary = {
   pendingTasks: number, // when it reaches zero we can show this boundary's content
   completedSegments: Array<Segment>, // completed but not yet flushed segments.
   byteSize: number, // used to determine whether to inline children boundaries.
-  fallbackAbortableTask: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
+  fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
 };
 
 type Task = {
@@ -107,8 +107,8 @@ type Request = {
   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.
-  abortableTask: Set<Task>,
-  pingedTask: Array<Task>,
+  abortableTasks: Set<Task>,
+  pingedTasks: Array<Task>,
   // 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.
@@ -151,7 +151,7 @@ export function createRequest(
   onCompleteAll: () => void = noop,
   onReadyToStream: () => void = noop,
 ): Request {
-  const pingedTask = [];
+  const pingedTasks = [];
   const abortSet: Set<Task> = new Set();
   const request = {
     destination,
@@ -162,8 +162,8 @@ export function createRequest(
     allPendingTasks: 0,
     pendingRootTasks: 0,
     completedRootSegment: null,
-    abortableTask: abortSet,
-    pingedTask: pingedTask,
+    abortableTasks: abortSet,
+    pingedTasks: pingedTasks,
     clientRenderedBoundaries: [],
     completedBoundaries: [],
     partialBoundaries: [],
@@ -184,21 +184,21 @@ export function createRequest(
     rootContext,
     null,
   );
-  pingedTask.push(rootTask);
+  pingedTasks.push(rootTask);
   return request;
 }
 
 function pingTask(request: Request, task: Task): void {
-  const pingedTask = request.pingedTask;
-  pingedTask.push(task);
-  if (pingedTask.length === 1) {
+  const pingedTasks = request.pingedTasks;
+  pingedTasks.push(task);
+  if (pingedTasks.length === 1) {
     scheduleWork(() => performWork(request));
   }
 }
 
 function createSuspenseBoundary(
   request: Request,
-  fallbackAbortableTask: Set<Task>,
+  fallbackAbortableTasks: Set<Task>,
 ): SuspenseBoundary {
   return {
     id: createSuspenseBoundaryID(request.responseState),
@@ -208,7 +208,7 @@ function createSuspenseBoundary(
     forceClientRender: false,
     completedSegments: [],
     byteSize: 0,
-    fallbackAbortableTask,
+    fallbackAbortableTasks,
   };
 }
 
@@ -385,7 +385,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     // no parent segment so there's nothing to wait on.
     contentRootSegment.parentFlushed = true;
 
-    // Currently this is running synchronously. We could instead schedule this to pingedTask.
+    // 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.
@@ -430,7 +430,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     );
     // TODO: This should be queued at a separate lower priority queue so that we only task
     // on preparing fallbacks if we don't have any more main content to task on.
-    request.pingedTask.push(suspendedFallbackTask);
+    request.pingedTasks.push(suspendedFallbackTask);
   } else {
     throw new Error('Not yet implemented element type.');
   }
@@ -501,8 +501,8 @@ function abortTask(task: Task): void {
 
     // 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.fallbackAbortableTask.forEach(abortTask, request);
-    boundary.fallbackAbortableTask.clear();
+    boundary.fallbackAbortableTasks.forEach(abortTask, request);
+    boundary.fallbackAbortableTasks.clear();
 
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
@@ -541,8 +541,8 @@ function finishedTask(
     } else if (boundary.pendingTasks === 0) {
       // This must have been the last segment we were waiting on. This boundary is now complete.
       // We can now cancel any pending task on the fallback since we won't need to show it anymore.
-      boundary.fallbackAbortableTask.forEach(abortTaskSoft, request);
-      boundary.fallbackAbortableTask.clear();
+      boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
+      boundary.fallbackAbortableTasks.clear();
       if (segment.parentFlushed) {
         // Our parent segment already flushed, so we need to schedule this segment to be emitted.
         boundary.completedSegments.push(segment);
@@ -625,13 +625,13 @@ function performWork(request: Request): void {
   ReactCurrentDispatcher.current = Dispatcher;
 
   try {
-    const pingedTask = request.pingedTask;
+    const pingedTasks = request.pingedTasks;
     let i;
-    for (i = 0; i < pingedTask.length; i++) {
-      const task = pingedTask[i];
+    for (i = 0; i < pingedTasks.length; i++) {
+      const task = pingedTasks[i];
       retryTask(request, task);
     }
-    pingedTask.splice(0, i);
+    pingedTasks.splice(0, i);
     if (request.status === FLOWING) {
       flushCompletedQueues(request);
     }
@@ -953,14 +953,14 @@ function flushCompletedQueues(request: Request): void {
     flushBuffered(destination);
     if (
       request.allPendingTasks === 0 &&
-      request.pingedTask.length === 0 &&
+      request.pingedTasks.length === 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.
     ) {
       if (__DEV__) {
-        if (request.abortableTask.size !== 0) {
+        if (request.abortableTasks.size !== 0) {
           console.error(
             'There was still abortable task at the root when we closed. This is a bug in React.',
           );
@@ -992,9 +992,9 @@ export function startFlowing(request: Request): void {
 // This is called to early terminate a request. It puts all pending boundaries in client rendered state.
 export function abort(request: Request): void {
   try {
-    const abortableTask = request.abortableTask;
-    abortableTask.forEach(abortTask, request);
-    abortableTask.clear();
+    const abortableTasks = request.abortableTasks;
+    abortableTasks.forEach(abortTask, request);
+    abortableTasks.clear();
     if (request.status === FLOWING) {
       flushCompletedQueues(request);
     }

From 048ee4c0cd3ee766d041c86029ca7cf2b874bfe0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Mar 2021 22:08:53 -0500
Subject: [PATCH 0367/1603] Use `act` in fuzz tester to flush expired work
 (#21108)

* Add failing hard-coded fuzz test

Caught in CI by the fuzz tester.

Related to expired updates.

* Use `act` in fuzz tester to flush expired work

Expired work gets scheduled in a microtask now, so we need to use `act`
to flush it.
---
 .../src/__tests__/ReactIncrementalTriangle-test.js     | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
index fdf7d37e8250..275a3feb8c82 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
@@ -432,7 +432,9 @@ describe('ReactIncrementalTriangle', () => {
         assertConsistentTree(activeLeafIndices);
       }
       // Flush remaining work
-      Scheduler.unstable_flushAllWithoutAsserting();
+      ReactNoop.act(() => {
+        Scheduler.unstable_flushAllWithoutAsserting();
+      });
       assertConsistentTree(activeLeafIndices, expectedCounterAtEnd);
     }
 
@@ -562,6 +564,12 @@ ${formatActions(actions)}
         ['b', flush(7)],
         ['c', toggle(0)],
       );
+
+      simulateMultipleRoots(
+        ['c', step(1)],
+        ['c', expire(5000)],
+        ['b', toggle(1)],
+      );
     });
 
     it('generative tests', () => {

From a77dd13ede337175e94a7a1d4198ff440a5cd87b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 26 Mar 2021 00:05:59 -0500
Subject: [PATCH 0368/1603] Delete enableDiscreteEventFlushingChange (#21110)

This flag was meant to avoid flushing discrete updates unnecessarily,
if multiple discrete events were dispatched in response to the same
platform event.

But since we now flush all discrete events at the end of the task, in
a microtask, it no longer has any effect.
---
 .../src/events/ReactDOMUpdateBatching.js      | 30 +++----------------
 packages/shared/ReactFeatureFlags.js          |  2 --
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  2 --
 10 files changed, 4 insertions(+), 37 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index 01625f45d265..283afb5b84d6 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -9,7 +9,6 @@ import {
   needsStateRestore,
   restoreStateIfNeeded,
 } from './ReactDOMControlledComponent';
-import {enableDiscreteEventFlushingChange} from 'shared/ReactFeatureFlags';
 
 // 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
@@ -75,6 +74,7 @@ export function batchedEventUpdates(fn, a, b) {
   }
 }
 
+// TODO: Replace with flushSync
 export function discreteUpdates(fn, a, b, c, d) {
   const prevIsInsideEventHandler = isInsideEventHandler;
   isInsideEventHandler = true;
@@ -88,32 +88,10 @@ export function discreteUpdates(fn, a, b, c, d) {
   }
 }
 
-let lastFlushedEventTimeStamp = 0;
+// TODO: Replace with flushSync
 export function flushDiscreteUpdatesIfNeeded(timeStamp: number) {
-  if (enableDiscreteEventFlushingChange) {
-    // event.timeStamp isn't overly reliable due to inconsistencies in
-    // how different browsers have historically provided the time stamp.
-    // Some browsers provide high-resolution time stamps for all events,
-    // some provide low-resolution time stamps for all events. FF < 52
-    // even mixes both time stamps together. Some browsers even report
-    // negative time stamps or time stamps that are 0 (iOS9) in some cases.
-    // Given we are only comparing two time stamps with equality (!==),
-    // we are safe from the resolution differences. If the time stamp is 0
-    // we bail-out of preventing the flush, which can affect semantics,
-    // such as if an earlier flush removes or adds event listeners that
-    // are fired in the subsequent flush. However, this is the same
-    // behaviour as we had before this change, so the risks are low.
-    if (
-      !isInsideEventHandler &&
-      (timeStamp === 0 || lastFlushedEventTimeStamp !== timeStamp)
-    ) {
-      lastFlushedEventTimeStamp = timeStamp;
-      flushDiscreteUpdatesImpl();
-    }
-  } else {
-    if (!isInsideEventHandler) {
-      flushDiscreteUpdatesImpl();
-    }
+  if (!isInsideEventHandler) {
+    flushDiscreteUpdatesImpl();
   }
 }
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index a1e9c42d3d1c..dc77e5482abb 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -155,8 +155,6 @@ export const enableLegacyFBSupport = false;
 // new behavior.
 export const deferRenderPhaseUpdateToNextBatch = true;
 
-export const enableDiscreteEventFlushingChange = false;
-
 export const enableUseRefAccessWarning = false;
 
 export const enableRecursiveCommitTraversal = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 7d5c5a6c40cc..34d521a50834 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,7 +50,6 @@ export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index cd2979fc400f..c7d533110837 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -49,7 +49,6 @@ export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c7f1f1a4739d..100ddb697dbb 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -49,7 +49,6 @@ export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 895ebad1d809..ceea27b19c59 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -49,7 +49,6 @@ export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 832f56e6fa09..61ec5b6564dc 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -49,7 +49,6 @@ export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = true;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 351b0934c792..26b2b9a27921 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -49,7 +49,6 @@ export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const enableDiscreteEventFlushingChange = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index b25ac0073e94..12da19a71c6b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -49,7 +49,6 @@ export const deletedTreeCleanUpLevel = 1;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
-export const enableDiscreteEventFlushingChange = true;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index dab1a37bc5c6..f14533535394 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -83,8 +83,6 @@ export const disableTextareaChildren = __EXPERIMENTAL__;
 
 export const warnUnstableRenderSubtreeIntoContainer = false;
 
-export const enableDiscreteEventFlushingChange = true;
-
 // Enable forked reconciler. Piggy-backing on the "variant" global so that we
 // don't have to add another test dimension. The build system will compile this
 // to the correct value.

From a5aa9d525345ca3281e027a6f62f212f5feee0cd Mon Sep 17 00:00:00 2001
From: Erik <erik.aho24@gmail.com>
Date: Fri, 26 Mar 2021 17:50:58 +0000
Subject: [PATCH 0369/1603] Remove redundant if statement (#21101)

---
 .../react-devtools-shared/src/hydration.js    | 32 +++++++++----------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 69909cb2f658..2c2d69608937 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -243,23 +243,21 @@ export function dehydrate(
               : data.constructor.name,
         };
 
-        if (typeof data[Symbol.iterator]) {
-          // TRICKY
-          // Don't use [...spread] syntax for this purpose.
-          // This project uses @babel/plugin-transform-spread in "loose" mode which only works with Array values.
-          // Other types (e.g. typed arrays, Sets) will not spread correctly.
-          Array.from(data).forEach(
-            (item, i) =>
-              (unserializableValue[i] = dehydrate(
-                item,
-                cleaned,
-                unserializable,
-                path.concat([i]),
-                isPathAllowed,
-                isPathAllowedCheck ? 1 : level + 1,
-              )),
-          );
-        }
+        // 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);
 

From 32d6f39eddd6d6b32b6c68068e96c66109ae8425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Sat, 27 Mar 2021 13:50:38 -0400
Subject: [PATCH 0370/1603] [Fizz] Support special HTML/SVG/MathML tags to
 suspend (#21113)

* Encode tables as a special insertion mode

The table modes are special in that its children can't be created outside
a table context so we need the segment container to be wrapped in a table.

* Move formatContext from Task to Segment

It works the same otherwise. It's just that this context needs to outlive
the task so that I can use it when writing the segment.

* Use template tag for placeholders and inserted dummy nodes with IDs

These can be used in any parent. At least outside IE11. Not sure yet what
happens in IE11 to these.

Not sure if these are bad for perf since they're special nodes.

* Add special wrappers around inserted segments depending on their insertion mode

* Allow the root namespace to be configured

This allows us to insert the correct wrappers when streaming into an
existing non-HTML tree.

* Add comment
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 249 +++++++++++++++++-
 .../src/server/ReactDOMFizzServerBrowser.js   |   3 +-
 .../src/server/ReactDOMFizzServerNode.js      |   3 +-
 .../src/server/ReactDOMServerFormatConfig.js  | 220 +++++++++++++---
 .../server/ReactNativeServerFormatConfig.js   |   6 +-
 .../src/ReactNoopServer.js                    |   3 +-
 packages/react-server/src/ReactFizzServer.js  |  47 ++--
 scripts/error-codes/codes.json                |   3 +-
 8 files changed, 475 insertions(+), 59 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 9021c23c6ce7..31b1f437c987 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -97,10 +97,22 @@ describe('ReactDOMFizzServer', () => {
     let node = element.firstChild;
     while (node) {
       if (node.nodeType === 1) {
-        if (node.tagName !== 'SCRIPT' && !node.hasAttribute('hidden')) {
+        if (
+          node.tagName !== 'SCRIPT' &&
+          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);
@@ -112,7 +124,7 @@ describe('ReactDOMFizzServer', () => {
       node = node.nextSibling;
     }
     return children.length === 0
-      ? null
+      ? undefined
       : children.length === 1
       ? children[0]
       : children;
@@ -408,4 +420,237 @@ describe('ReactDOMFizzServer', () => {
       </div>,
     ]);
   });
+
+  // @gate experimental
+  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)}>{[]}</col>;
+    }
+
+    function AsyncPath({id}) {
+      return <path id={readText(id)}>{[]}</path>;
+    }
+
+    function AsyncMi({id}) {
+      return <mi id={readText(id)}>{[]}</mi>;
+    }
+
+    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(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App />,
+        writable,
+      );
+      startWriting();
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <select>Loading...</select>Loading...
+      </div>,
+    );
+
+    await act(async () => {
+      resolveText('Hello');
+    });
+
+    await act(async () => {
+      resolveText('World');
+    });
+
+    await act(async () => {
+      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',
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App />,
+        writable,
+      );
+      startWriting();
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <table>
+        <tbody>
+          <tr>
+            <td>Loading...</td>
+          </tr>
+        </tbody>
+      </table>,
+    );
+
+    await act(async () => {
+      resolveText('A');
+    });
+
+    await act(async () => {
+      resolveText('B');
+    });
+
+    await act(async () => {
+      resolveText('C');
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <table>
+        <tbody class="A">
+          <tr class="B">
+            <td>C</td>
+          </tr>
+        </tbody>
+      </table>,
+    );
+  });
+
+  // @gate experimental
+  it('can stream into an SVG container', async () => {
+    function AsyncPath({id}) {
+      return <path id={readText(id)}>{[]}</path>;
+    }
+
+    function App() {
+      return (
+        <g>
+          <Suspense fallback={<text>Loading...</text>}>
+            <AsyncPath id="my-path" />
+          </Suspense>
+        </g>
+      );
+    }
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App />,
+        writable,
+        {
+          namespaceURI: 'http://www.w3.org/2000/svg',
+          onReadyToStream() {
+            writable.write('<svg>');
+            startWriting();
+            writable.write('</svg>');
+          },
+        },
+      );
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <svg>
+        <g>
+          <text>Loading...</text>
+        </g>
+      </svg>,
+    );
+
+    await act(async () => {
+      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',
+    );
+  });
 });
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 254d2380d5ab..8d5c59a2d686 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -23,6 +23,7 @@ import {
 
 type Options = {
   identifierPrefix?: string,
+  namespaceURI?: string,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onReadyToStream?: () => void,
@@ -49,7 +50,7 @@ function renderToReadableStream(
         children,
         controller,
         createResponseState(options ? options.identifierPrefix : undefined),
-        createRootFormatContext(), // We call this here in case we need options to initialize it.
+        createRootFormatContext(options ? options.namespaceURI : undefined),
         options ? options.progressiveChunkSize : undefined,
         options ? options.onError : undefined,
         options ? options.onCompleteAll : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index c9d0cbc30314..1d53e6fda472 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -28,6 +28,7 @@ function createDrainHandler(destination, request) {
 
 type Options = {
   identifierPrefix?: string,
+  namespaceURI?: string,
   progressiveChunkSize?: number,
   onReadyToStream?: () => void,
   onCompleteAll?: () => void,
@@ -49,7 +50,7 @@ function pipeToNodeWritable(
     children,
     destination,
     createResponseState(options ? options.identifierPrefix : undefined),
-    createRootFormatContext(), // We call this here in case we need options to initialize it.
+    createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
     options ? options.onCompleteAll : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index f7ed7ccf9397..d42e92aa1e2b 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -50,33 +50,45 @@ export function createResponseState(
   };
 }
 
-// Constants for the namespace we use. We don't actually provide the namespace but conditionally
-// use different segment parents based on namespace. Therefore we use constants instead of the string.
-const ROOT_NAMESPACE = 0; // At the root we don't need to know which namespace it is. We just need to know that it's already the right one.
-const HTML_NAMESPACE = 1;
-const SVG_NAMESPACE = 2;
-const MATHML_NAMESPACE = 3;
-
-type NamespaceFlag = 0 | 1 | 2 | 3;
+// 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.
+const HTML_MODE = 0;
+const SVG_MODE = 1;
+const MATHML_MODE = 2;
+const HTML_TABLE_MODE = 4;
+const HTML_TABLE_BODY_MODE = 5;
+const HTML_TABLE_ROW_MODE = 6;
+const HTML_COLGROUP_MODE = 7;
+// 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;
 
 // Lets us keep track of contextual state and pick it back up after suspending.
 export type FormatContext = {
-  namespace: NamespaceFlag, // root/svg/html/mathml
+  insertionMode: InsertionMode, // root/svg/html/mathml/table
   selectedValue: null | string, // the selected value(s) inside a <select>, or null outside <select>
 };
 
 function createFormatContext(
-  namespace: NamespaceFlag,
+  insertionMode: InsertionMode,
   selectedValue: null | string,
 ): FormatContext {
   return {
-    namespace,
+    insertionMode,
     selectedValue,
   };
 }
 
-export function createRootFormatContext(): FormatContext {
-  return createFormatContext(ROOT_NAMESPACE, null);
+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
+      : HTML_MODE;
+  return createFormatContext(insertionMode, null);
 }
 
 export function getChildFormatContext(
@@ -87,15 +99,32 @@ export function getChildFormatContext(
   switch (type) {
     case 'select':
       return createFormatContext(
-        parentContext.namespace,
+        HTML_MODE,
         props.value != null ? props.value : props.defaultValue,
       );
     case 'svg':
-      return createFormatContext(SVG_NAMESPACE, null);
+      return createFormatContext(SVG_MODE, null);
     case 'math':
-      return createFormatContext(MATHML_NAMESPACE, null);
+      return createFormatContext(MATHML_MODE, null);
     case 'foreignObject':
-      return createFormatContext(HTML_NAMESPACE, null);
+      return createFormatContext(HTML_MODE, 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);
+    case 'thead':
+    case 'tbody':
+    case 'tfoot':
+      return createFormatContext(HTML_TABLE_BODY_MODE, null);
+    case 'colgroup':
+      return createFormatContext(HTML_COLGROUP_MODE, null);
+    case 'tr':
+      return createFormatContext(HTML_TABLE_ROW_MODE, null);
+  }
+  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);
   }
   return parentContext;
 }
@@ -132,8 +161,8 @@ function assignAnID(
   ));
 }
 
-const dummyNode1 = stringToPrecomputedChunk('<span hidden id="');
-const dummyNode2 = stringToPrecomputedChunk('"></span>');
+const dummyNode1 = stringToPrecomputedChunk('<template id="');
+const dummyNode2 = stringToPrecomputedChunk('"></template>');
 
 function pushDummyNodeWithID(
   target: Array<Chunk | PrecomputedChunk>,
@@ -206,7 +235,20 @@ export function pushStartInstance(
       startTag2,
     );
   } else {
-    target.push(startTag1, stringToChunk(type), startTag2);
+    target.push(startTag1, stringToChunk(type));
+    if (props.className) {
+      target.push(
+        stringToChunk(
+          ' class="' + encodeHTMLIDAttribute(props.className) + '"',
+        ),
+      );
+    }
+    if (props.id) {
+      target.push(
+        stringToChunk(' id="' + encodeHTMLIDAttribute(props.id) + '"'),
+      );
+    }
+    target.push(startTag2);
   }
 }
 
@@ -225,16 +267,15 @@ export function pushEndInstance(
 // 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.
-const placeholder1 = stringToPrecomputedChunk('<span id="');
-const placeholder2 = stringToPrecomputedChunk('"></span>');
+// 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,
   responseState: ResponseState,
   id: number,
 ): boolean {
-  // TODO: This needs to be contextually aware and switch tag since not all parents allow for spans like
-  // <select> or <tbody>. E.g. suspending a component that renders a table row.
   writeChunk(destination, placeholder1);
   writeChunk(destination, responseState.placeholderPrefix);
   const formattedID = stringToChunk(id.toString(16));
@@ -272,23 +313,130 @@ export function writeEndSuspenseBoundary(destination: Destination): boolean {
   return writeChunk(destination, endSuspenseBoundary);
 }
 
-const startSegment = stringToPrecomputedChunk('<div hidden id="');
-const startSegment2 = stringToPrecomputedChunk('">');
-const endSegment = stringToPrecomputedChunk('</div>');
+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,
   responseState: ResponseState,
+  formatContext: FormatContext,
   id: number,
 ): boolean {
-  // TODO: What happens with special children like <tr> if they're inserted in a div? Maybe needs contextually aware containers.
-  writeChunk(destination, startSegment);
-  writeChunk(destination, responseState.segmentPrefix);
-  const formattedID = stringToChunk(id.toString(16));
-  writeChunk(destination, formattedID);
-  return writeChunk(destination, startSegment2);
+  switch (formatContext.insertionMode) {
+    case HTML_MODE: {
+      writeChunk(destination, startSegmentHTML);
+      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunk(destination, startSegmentHTML2);
+    }
+    case SVG_MODE: {
+      writeChunk(destination, startSegmentSVG);
+      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunk(destination, startSegmentSVG2);
+    }
+    case MATHML_MODE: {
+      writeChunk(destination, startSegmentMathML);
+      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunk(destination, startSegmentMathML2);
+    }
+    case HTML_TABLE_MODE: {
+      writeChunk(destination, startSegmentTable);
+      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunk(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, responseState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunk(destination, startSegmentTableBody2);
+    }
+    case HTML_TABLE_ROW_MODE: {
+      writeChunk(destination, startSegmentTableRow);
+      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunk(destination, startSegmentTableRow2);
+    }
+    case HTML_COLGROUP_MODE: {
+      writeChunk(destination, startSegmentColGroup);
+      writeChunk(destination, responseState.segmentPrefix);
+      writeChunk(destination, stringToChunk(id.toString(16)));
+      return writeChunk(destination, startSegmentColGroup2);
+    }
+    default: {
+      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+    }
+  }
 }
-export function writeEndSegment(destination: Destination): boolean {
-  return writeChunk(destination, endSegment);
+export function writeEndSegment(
+  destination: Destination,
+  formatContext: FormatContext,
+): boolean {
+  switch (formatContext.insertionMode) {
+    case HTML_MODE: {
+      return writeChunk(destination, endSegmentHTML);
+    }
+    case SVG_MODE: {
+      return writeChunk(destination, endSegmentSVG);
+    }
+    case MATHML_MODE: {
+      return writeChunk(destination, endSegmentMathML);
+    }
+    case HTML_TABLE_MODE: {
+      return writeChunk(destination, endSegmentTable);
+    }
+    case HTML_TABLE_BODY_MODE: {
+      return writeChunk(destination, endSegmentTableBody);
+    }
+    case HTML_TABLE_ROW_MODE: {
+      return writeChunk(destination, endSegmentTableRow);
+    }
+    case HTML_COLGROUP_MODE: {
+      return writeChunk(destination, endSegmentColGroup);
+    }
+    default: {
+      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+    }
+  }
 }
 
 // Instruction Set
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 3e6b37e76c18..102ee87f05d5 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -208,12 +208,16 @@ export function writeEndSuspenseBoundary(destination: Destination): boolean {
 export function writeStartSegment(
   destination: Destination,
   responseState: ResponseState,
+  formatContext: FormatContext,
   id: number,
 ): boolean {
   writeChunk(destination, SEGMENT);
   return writeChunk(destination, formatID(id));
 }
-export function writeEndSegment(destination: Destination): boolean {
+export function writeEndSegment(
+  destination: Destination,
+  formatContext: FormatContext,
+): boolean {
   return writeChunk(destination, END);
 }
 
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index f384baa8d9f9..548a004bd7ae 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -161,6 +161,7 @@ const ReactNoopServer = ReactFizzServer({
   writeStartSegment(
     destination: Destination,
     responseState: ResponseState,
+    formatContext: null,
     id: number,
   ): boolean {
     const segment = {
@@ -172,7 +173,7 @@ const ReactNoopServer = ReactFizzServer({
     }
     destination.stack.push(segment);
   },
-  writeEndSegment(destination: Destination): boolean {
+  writeEndSegment(destination: Destination, formatContext: null): boolean {
     destination.stack.pop();
   },
 
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index c4b795d24ff1..739ba0c436aa 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -71,7 +71,6 @@ type Task = {
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment, // the segment we'll write to
   abortSet: Set<Task>, // the abortable set that this task belongs to
-  formatContext: FormatContext,
   assignID: null | SuspenseBoundaryID, // id to assign to the content
 };
 
@@ -90,6 +89,8 @@ type Segment = {
   +index: number, // the index within the parent's chunks or 0 at the root
   +chunks: Array<Chunk | PrecomputedChunk>,
   +children: Array<Segment>,
+  // The context that this segment was created in.
+  formatContext: FormatContext,
   // If this segment represents a fallback, this is the content that will replace that fallback.
   +boundary: null | SuspenseBoundary,
 };
@@ -172,7 +173,7 @@ export function createRequest(
     onReadyToStream,
   };
   // This segment represents the root fallback.
-  const rootSegment = createPendingSegment(request, 0, null);
+  const rootSegment = createPendingSegment(request, 0, null, rootContext);
   // There is no parent so conceptually, we're unblocked to flush this segment.
   rootSegment.parentFlushed = true;
   const rootTask = createTask(
@@ -181,7 +182,6 @@ export function createRequest(
     null,
     rootSegment,
     abortSet,
-    rootContext,
     null,
   );
   pingedTasks.push(rootTask);
@@ -218,7 +218,6 @@ function createTask(
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
   abortSet: Set<Task>,
-  formatContext: FormatContext,
   assignID: null | SuspenseBoundaryID,
 ): Task {
   request.allPendingTasks++;
@@ -233,7 +232,6 @@ function createTask(
     blockedBoundary,
     blockedSegment,
     abortSet,
-    formatContext,
     assignID,
   };
   abortSet.add(task);
@@ -244,6 +242,7 @@ function createPendingSegment(
   request: Request,
   index: number,
   boundary: null | SuspenseBoundary,
+  formatContext: FormatContext,
 ): Segment {
   return {
     status: PENDING,
@@ -252,6 +251,7 @@ function createPendingSegment(
     parentFlushed: false,
     chunks: [],
     children: [],
+    formatContext,
     boundary,
   };
 }
@@ -317,7 +317,12 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
         // 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);
+        const newSegment = createPendingSegment(
+          request,
+          insertionIndex,
+          null,
+          segment.formatContext,
+        );
         segment.children.push(newSegment);
         const newTask = createTask(
           request,
@@ -325,7 +330,6 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
           task.blockedBoundary,
           newSegment,
           task.abortSet,
-          task.formatContext,
           task.assignID,
         );
         // We've delegated the assignment.
@@ -338,8 +342,9 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       }
     }
   } else if (typeof type === 'string') {
+    const segment = task.blockedSegment;
     pushStartInstance(
-      task.blockedSegment.chunks,
+      segment.chunks,
       type,
       props,
       request.responseState,
@@ -347,13 +352,13 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     );
     // We must have assigned it already above so we don't need this anymore.
     task.assignID = null;
-    const prevContext = task.formatContext;
-    task.formatContext = getChildFormatContext(prevContext, type, props);
+    const prevContext = segment.formatContext;
+    segment.formatContext = getChildFormatContext(prevContext, type, props);
     renderNode(request, task, props.children);
     // 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;
-    pushEndInstance(task.blockedSegment.chunks, type, props);
+    segment.formatContext = prevContext;
+    pushEndInstance(segment.chunks, type, props);
   } else if (type === REACT_SUSPENSE_TYPE) {
     const parentBoundary = task.blockedBoundary;
     const parentSegment = task.blockedSegment;
@@ -376,11 +381,17 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       request,
       insertionIndex,
       newBoundary,
+      parentSegment.formatContext,
     );
     parentSegment.children.push(boundarySegment);
 
     // This segment is the actual child content. We can start rendering that immediately.
-    const contentRootSegment = createPendingSegment(request, 0, null);
+    const contentRootSegment = createPendingSegment(
+      request,
+      0,
+      null,
+      parentSegment.formatContext,
+    );
     // 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;
@@ -425,7 +436,6 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       parentBoundary,
       boundarySegment,
       fallbackAbortSet,
-      task.formatContext,
       newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
     );
     // TODO: This should be queued at a separate lower priority queue so that we only task
@@ -776,9 +786,14 @@ function flushSegmentContainer(
   destination: Destination,
   segment: Segment,
 ): boolean {
-  writeStartSegment(destination, request.responseState, segment.id);
+  writeStartSegment(
+    destination,
+    request.responseState,
+    segment.formatContext,
+    segment.id,
+  );
   flushSegment(request, destination, segment);
-  return writeEndSegment(destination);
+  return writeEndSegment(destination, segment.formatContext);
 }
 
 function flushCompletedBoundary(
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 180106a9831c..3c5fd25853f7 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -384,5 +384,6 @@
   "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."
+  "396": "More boundaries or placeholders than we expected to ever emit.",
+  "397": "Unknown insertion mode. This is a bug in React."
 }

From 5f21a9fca455069bc1e986e1528963a5055a8f21 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 27 Mar 2021 15:26:17 -0500
Subject: [PATCH 0371/1603] Clean up host pointers in level 2 of clean-up flag
 (#21112)

The host tree is a cyclical structure. Leaking a single DOM node can
retain a large amount of memory. React-managed DOM nodes also point
back to a fiber tree.

Perf testing suggests that disconnecting these fields has a big memory
impact. That suggests leaks in non-React code but since it's hard to
completely eliminate those, it may still be worth the extra work to
clear these fields.

I'm moving this to level 2 to confirm whether this alone is responsible
for the memory savings, or if there are other fields that are retaining
large amounts of memory.

In our plan for removing the alternate model, DOM nodes would not be
connected to fibers, except at the root of the whole tree, which is
easy to disconnect on deletion. So in that world, we likely won't have
to do any additional work.
---
 .../src/ReactFiberCommitWork.new.js           | 21 +++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 21 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 9bcaa5a4d753..e9845e1e65dc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1251,6 +1251,18 @@ function detachFiberAfterEffects(fiber: Fiber) {
     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;
+
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1269,15 +1281,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
-
-      // For host components, disconnect host instance -> fiber pointer.
-      if (fiber.tag === HostComponent) {
-        const hostInstance: Instance = fiber.stateNode;
-        if (hostInstance !== null) {
-          detachDeletedInstance(hostInstance);
-        }
-      }
-
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 6b184f30d3d9..6ed8560bd764 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1251,6 +1251,18 @@ function detachFiberAfterEffects(fiber: Fiber) {
     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;
+
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1269,15 +1281,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
-
-      // For host components, disconnect host instance -> fiber pointer.
-      if (fiber.tag === HostComponent) {
-        const hostInstance: Instance = fiber.stateNode;
-        if (hostInstance !== null) {
-          detachDeletedInstance(hostInstance);
-        }
-      }
-
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;

From dcd13045ef5d4e42bbda6ec2a493ac2ea507c018 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 28 Mar 2021 15:58:46 -0500
Subject: [PATCH 0372/1603] Use Lane to track root callback priority (#21089)

Instead of LanePriority.

I'm removing all uses of LanePriority so I can delete it.
---
 .../src/ReactFiberLane.new.js                 | 42 +-----------------
 .../src/ReactFiberLane.old.js                 | 42 +-----------------
 .../src/ReactFiberRoot.new.js                 |  4 +-
 .../src/ReactFiberRoot.old.js                 |  4 +-
 .../src/ReactFiberWorkLoop.new.js             | 43 +++++++++++++------
 .../src/ReactFiberWorkLoop.old.js             | 43 +++++++++++++------
 .../src/ReactInternalTypes.js                 |  4 +-
 7 files changed, 68 insertions(+), 114 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 227526858b22..badfe48b0a2c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot, ReactPriorityLevel} from './ReactInternalTypes';
+import type {FiberRoot} from './ReactInternalTypes';
 
 // 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.
@@ -35,17 +35,8 @@ export type Lanes = number;
 export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
-import invariant from 'shared/invariant';
 import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 
-import {
-  ImmediatePriority as ImmediateSchedulerPriority,
-  UserBlockingPriority as UserBlockingSchedulerPriority,
-  NormalPriority as NormalSchedulerPriority,
-  IdlePriority as IdleSchedulerPriority,
-  NoPriority as NoSchedulerPriority,
-} from './SchedulerWithReactIntegration.new';
-
 export const SyncLanePriority: LanePriority = 12;
 
 const InputContinuousHydrationLanePriority: LanePriority = 11;
@@ -244,37 +235,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   }
 }
 
-export function lanePriorityToSchedulerPriority(
-  lanePriority: LanePriority,
-): ReactPriorityLevel {
-  switch (lanePriority) {
-    case SyncLanePriority:
-      return ImmediateSchedulerPriority;
-    case InputContinuousHydrationLanePriority:
-    case InputContinuousLanePriority:
-      return UserBlockingSchedulerPriority;
-    case DefaultHydrationLanePriority:
-    case DefaultLanePriority:
-    case TransitionHydrationPriority:
-    case TransitionPriority:
-    case SelectiveHydrationLanePriority:
-    case RetryLanePriority:
-      return NormalSchedulerPriority;
-    case IdleHydrationLanePriority:
-    case IdleLanePriority:
-    case OffscreenLanePriority:
-      return IdleSchedulerPriority;
-    case NoLanePriority:
-      return NoSchedulerPriority;
-    default:
-      invariant(
-        false,
-        'Invalid update priority: %s. This is a bug in React.',
-        lanePriority,
-      );
-  }
-}
-
 export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 2380acd634f1..badfe48b0a2c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot, ReactPriorityLevel} from './ReactInternalTypes';
+import type {FiberRoot} from './ReactInternalTypes';
 
 // 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.
@@ -35,17 +35,8 @@ export type Lanes = number;
 export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
-import invariant from 'shared/invariant';
 import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 
-import {
-  ImmediatePriority as ImmediateSchedulerPriority,
-  UserBlockingPriority as UserBlockingSchedulerPriority,
-  NormalPriority as NormalSchedulerPriority,
-  IdlePriority as IdleSchedulerPriority,
-  NoPriority as NoSchedulerPriority,
-} from './SchedulerWithReactIntegration.old';
-
 export const SyncLanePriority: LanePriority = 12;
 
 const InputContinuousHydrationLanePriority: LanePriority = 11;
@@ -244,37 +235,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   }
 }
 
-export function lanePriorityToSchedulerPriority(
-  lanePriority: LanePriority,
-): ReactPriorityLevel {
-  switch (lanePriority) {
-    case SyncLanePriority:
-      return ImmediateSchedulerPriority;
-    case InputContinuousHydrationLanePriority:
-    case InputContinuousLanePriority:
-      return UserBlockingSchedulerPriority;
-    case DefaultHydrationLanePriority:
-    case DefaultLanePriority:
-    case TransitionHydrationPriority:
-    case TransitionPriority:
-    case SelectiveHydrationLanePriority:
-    case RetryLanePriority:
-      return NormalSchedulerPriority;
-    case IdleHydrationLanePriority:
-    case IdleLanePriority:
-    case OffscreenLanePriority:
-      return IdleSchedulerPriority;
-    case NoLanePriority:
-      return NoSchedulerPriority;
-    default:
-      invariant(
-        false,
-        'Invalid update priority: %s. This is a bug in React.',
-        lanePriority,
-      );
-  }
-}
-
 export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index dfc859a46521..1eb637891ebe 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -13,8 +13,8 @@ import type {RootTag} from './ReactRootTags';
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
 import {
+  NoLane,
   NoLanes,
-  NoLanePriority,
   NoTimestamp,
   createLaneMap,
 } from './ReactFiberLane.new';
@@ -41,7 +41,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.pendingContext = null;
   this.hydrate = hydrate;
   this.callbackNode = null;
-  this.callbackPriority = NoLanePriority;
+  this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
   this.expirationTimes = createLaneMap(NoTimestamp);
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 138fb9c38a1a..e44757248b42 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -13,8 +13,8 @@ import type {RootTag} from './ReactRootTags';
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
 import {
+  NoLane,
   NoLanes,
-  NoLanePriority,
   NoTimestamp,
   createLaneMap,
 } from './ReactFiberLane.old';
@@ -41,7 +41,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.pendingContext = null;
   this.hydrate = hydrate;
   this.callbackNode = null;
-  this.callbackPriority = NoLanePriority;
+  this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
   this.expirationTimes = createLaneMap(NoTimestamp);
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index edfc46cece75..b7ed519ea55d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -43,7 +43,9 @@ import {
   requestPaint,
   now,
   ImmediatePriority as ImmediateSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
   flushSyncCallbackQueue,
   scheduleSyncCallback,
 } from './SchedulerWithReactIntegration.new';
@@ -130,8 +132,6 @@ import {
   MountLayoutDev,
 } from './ReactFiberFlags';
 import {
-  NoLanePriority,
-  SyncLanePriority,
   NoLanes,
   NoLane,
   SyncLane,
@@ -147,7 +147,6 @@ import {
   includesOnlyRetries,
   includesOnlyTransitions,
   getNextLanes,
-  returnNextLanesPriority,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
   getMostRecentEventTime,
@@ -156,12 +155,14 @@ import {
   markRootPinged,
   markRootExpired,
   markRootFinished,
-  lanePriorityToSchedulerPriority,
   areLanesExpired,
+  getHighestPriorityLane,
 } from './ReactFiberLane.new';
 import {
   DiscreteEventPriority,
+  ContinuousEventPriority,
   DefaultEventPriority,
+  IdleEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
   higherEventPriority,
@@ -653,8 +654,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     root,
     root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
   );
-  // This returns the priority level computed during the `getNextLanes` call.
-  const newCallbackPriority = returnNextLanesPriority();
 
   if (nextLanes === NoLanes) {
     // Special case: There's nothing to work on.
@@ -662,10 +661,13 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       cancelCallback(existingCallbackNode);
     }
     root.callbackNode = null;
-    root.callbackPriority = NoLanePriority;
+    root.callbackPriority = NoLane;
     return;
   }
 
+  // We use the highest priority lane to represent the priority of the callback.
+  const newCallbackPriority = getHighestPriorityLane(nextLanes);
+
   // Check if there's an existing task. We may be able to reuse it.
   const existingCallbackPriority = root.callbackPriority;
   if (existingCallbackPriority === newCallbackPriority) {
@@ -675,7 +677,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       // TODO: Temporary until we confirm this warning is not fired.
       if (
         existingCallbackNode == null &&
-        existingCallbackPriority !== SyncLanePriority
+        existingCallbackPriority !== SyncLane
       ) {
         console.error(
           'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -693,7 +695,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (newCallbackPriority === SyncLanePriority) {
+  if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -706,9 +708,24 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     }
     newCallbackNode = null;
   } else {
-    const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
-      newCallbackPriority,
-    );
+    let schedulerPriorityLevel;
+    switch (lanesToEventPriority(nextLanes)) {
+      case DiscreteEventPriority:
+        schedulerPriorityLevel = ImmediateSchedulerPriority;
+        break;
+      case ContinuousEventPriority:
+        schedulerPriorityLevel = UserBlockingSchedulerPriority;
+        break;
+      case DefaultEventPriority:
+        schedulerPriorityLevel = NormalSchedulerPriority;
+        break;
+      case IdleEventPriority:
+        schedulerPriorityLevel = IdleSchedulerPriority;
+        break;
+      default:
+        schedulerPriorityLevel = NormalSchedulerPriority;
+        break;
+    }
     newCallbackNode = scheduleCallback(
       schedulerPriorityLevel,
       performConcurrentWorkOnRoot.bind(null, root),
@@ -1744,7 +1761,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
   root.callbackNode = null;
-  root.callbackPriority = NoLanePriority;
+  root.callbackPriority = NoLane;
 
   // Update the first and last pending times on this root. The new first
   // pending time is whatever is left on the root fiber.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 542567182c4c..d29bbdefba4c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -43,7 +43,9 @@ import {
   requestPaint,
   now,
   ImmediatePriority as ImmediateSchedulerPriority,
+  UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
+  IdlePriority as IdleSchedulerPriority,
   flushSyncCallbackQueue,
   scheduleSyncCallback,
 } from './SchedulerWithReactIntegration.old';
@@ -130,8 +132,6 @@ import {
   MountLayoutDev,
 } from './ReactFiberFlags';
 import {
-  NoLanePriority,
-  SyncLanePriority,
   NoLanes,
   NoLane,
   SyncLane,
@@ -147,7 +147,6 @@ import {
   includesOnlyRetries,
   includesOnlyTransitions,
   getNextLanes,
-  returnNextLanesPriority,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
   getMostRecentEventTime,
@@ -156,12 +155,14 @@ import {
   markRootPinged,
   markRootExpired,
   markRootFinished,
-  lanePriorityToSchedulerPriority,
   areLanesExpired,
+  getHighestPriorityLane,
 } from './ReactFiberLane.old';
 import {
   DiscreteEventPriority,
+  ContinuousEventPriority,
   DefaultEventPriority,
+  IdleEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
   higherEventPriority,
@@ -653,8 +654,6 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     root,
     root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes,
   );
-  // This returns the priority level computed during the `getNextLanes` call.
-  const newCallbackPriority = returnNextLanesPriority();
 
   if (nextLanes === NoLanes) {
     // Special case: There's nothing to work on.
@@ -662,10 +661,13 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       cancelCallback(existingCallbackNode);
     }
     root.callbackNode = null;
-    root.callbackPriority = NoLanePriority;
+    root.callbackPriority = NoLane;
     return;
   }
 
+  // We use the highest priority lane to represent the priority of the callback.
+  const newCallbackPriority = getHighestPriorityLane(nextLanes);
+
   // Check if there's an existing task. We may be able to reuse it.
   const existingCallbackPriority = root.callbackPriority;
   if (existingCallbackPriority === newCallbackPriority) {
@@ -675,7 +677,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
       // TODO: Temporary until we confirm this warning is not fired.
       if (
         existingCallbackNode == null &&
-        existingCallbackPriority !== SyncLanePriority
+        existingCallbackPriority !== SyncLane
       ) {
         console.error(
           'Expected scheduled callback to exist. This error is likely caused by a bug in React. Please file an issue.',
@@ -693,7 +695,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (newCallbackPriority === SyncLanePriority) {
+  if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -706,9 +708,24 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     }
     newCallbackNode = null;
   } else {
-    const schedulerPriorityLevel = lanePriorityToSchedulerPriority(
-      newCallbackPriority,
-    );
+    let schedulerPriorityLevel;
+    switch (lanesToEventPriority(nextLanes)) {
+      case DiscreteEventPriority:
+        schedulerPriorityLevel = ImmediateSchedulerPriority;
+        break;
+      case ContinuousEventPriority:
+        schedulerPriorityLevel = UserBlockingSchedulerPriority;
+        break;
+      case DefaultEventPriority:
+        schedulerPriorityLevel = NormalSchedulerPriority;
+        break;
+      case IdleEventPriority:
+        schedulerPriorityLevel = IdleSchedulerPriority;
+        break;
+      default:
+        schedulerPriorityLevel = NormalSchedulerPriority;
+        break;
+    }
     newCallbackNode = scheduleCallback(
       schedulerPriorityLevel,
       performConcurrentWorkOnRoot.bind(null, root),
@@ -1744,7 +1761,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
   root.callbackNode = null;
-  root.callbackPriority = NoLanePriority;
+  root.callbackPriority = NoLane;
 
   // Update the first and last pending times on this root. The new first
   // pending time is whatever is left on the root fiber.
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 4e5a415f165f..95aa2483eeec 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -20,7 +20,7 @@ import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Flags} from './ReactFiberFlags';
-import type {Lane, LanePriority, Lanes, LaneMap} from './ReactFiberLane.old';
+import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Wakeable} from 'shared/ReactTypes';
@@ -223,7 +223,7 @@ type BaseFiberRootProperties = {|
   // Node returned by Scheduler.scheduleCallback. Represents the next rendering
   // task that the root will work on.
   callbackNode: *,
-  callbackPriority: LanePriority,
+  callbackPriority: Lane,
   eventTimes: LaneMap<number>,
   expirationTimes: LaneMap<number>,
 

From 46b68eaf626f924093952125bd75ba16df0fe204 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 28 Mar 2021 16:07:32 -0500
Subject: [PATCH 0373/1603] Delete LanePriority type (#21090)

No longer using LanePriority anywhere, so this deletes the
remaining references.
---
 .../src/ReactFiberLane.new.js                 | 57 -------------------
 .../src/ReactFiberLane.old.js                 | 57 -------------------
 2 files changed, 114 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index badfe48b0a2c..2a9571ece689 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -37,28 +37,6 @@ export type LaneMap<T> = Array<T>;
 
 import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 
-export const SyncLanePriority: LanePriority = 12;
-
-const InputContinuousHydrationLanePriority: LanePriority = 11;
-export const InputContinuousLanePriority: LanePriority = 10;
-
-const DefaultHydrationLanePriority: LanePriority = 9;
-export const DefaultLanePriority: LanePriority = 8;
-
-const TransitionHydrationPriority: LanePriority = 7;
-export const TransitionPriority: LanePriority = 6;
-
-const RetryLanePriority: LanePriority = 5;
-
-const SelectiveHydrationLanePriority: LanePriority = 4;
-
-const IdleHydrationLanePriority: LanePriority = 3;
-export const IdleLanePriority: LanePriority = 2;
-
-const OffscreenLanePriority: LanePriority = 1;
-
-export const NoLanePriority: LanePriority = 0;
-
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
@@ -162,29 +140,19 @@ export const NoTimestamp = -1;
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
-// "Registers" used to "return" multiple values
-// Used by getHighestPriorityLanes and getNextLanes:
-let return_highestLanePriority: LanePriority = DefaultLanePriority;
-
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   switch (getHighestPriorityLane(lanes)) {
     case SyncLane:
-      return_highestLanePriority = SyncLanePriority;
       return SyncLane;
     case InputContinuousHydrationLane:
-      return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
     case InputContinuousLane:
-      return_highestLanePriority = InputContinuousLanePriority;
       return InputContinuousLane;
     case DefaultHydrationLane:
-      return_highestLanePriority = DefaultHydrationLanePriority;
       return DefaultHydrationLane;
     case DefaultLane:
-      return_highestLanePriority = DefaultLanePriority;
       return DefaultLane;
     case TransitionHydrationLane:
-      return_highestLanePriority = TransitionHydrationPriority;
       return TransitionHydrationLane;
     case TransitionLane1:
     case TransitionLane2:
@@ -202,26 +170,20 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
-      return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
-      return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
-      return_highestLanePriority = SelectiveHydrationLanePriority;
       return SelectiveHydrationLane;
     case IdleHydrationLane:
-      return_highestLanePriority = IdleHydrationLanePriority;
       return IdleHydrationLane;
     case IdleLane:
-      return_highestLanePriority = IdleLanePriority;
       return IdleLane;
     case OffscreenLane:
-      return_highestLanePriority = OffscreenLanePriority;
       return OffscreenLane;
     default:
       if (__DEV__) {
@@ -230,7 +192,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
         );
       }
       // This shouldn't be reachable, but as a fallback, return the entire bitmask.
-      return_highestLanePriority = DefaultLanePriority;
       return lanes;
   }
 }
@@ -239,12 +200,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
   if (pendingLanes === NoLanes) {
-    return_highestLanePriority = NoLanePriority;
     return NoLanes;
   }
 
   let nextLanes = NoLanes;
-  let nextLanePriority = NoLanePriority;
 
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
@@ -256,12 +215,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
     if (nonIdleUnblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
       if (nonIdlePingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   } else {
@@ -269,11 +226,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const unblockedLanes = pendingLanes & ~suspendedLanes;
     if (unblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(unblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       if (pingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(pingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   }
@@ -307,8 +262,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
-    } else {
-      return_highestLanePriority = nextLanePriority;
     }
   }
 
@@ -490,9 +443,6 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
-export function returnNextLanesPriority() {
-  return return_highestLanePriority;
-}
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
@@ -579,13 +529,6 @@ export function higherPriorityLane(a: Lane, b: Lane) {
   return a !== NoLane && a < b ? a : b;
 }
 
-export function higherLanePriority(
-  a: LanePriority,
-  b: LanePriority,
-): LanePriority {
-  return a !== NoLanePriority && 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
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index badfe48b0a2c..2a9571ece689 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -37,28 +37,6 @@ export type LaneMap<T> = Array<T>;
 
 import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 
-export const SyncLanePriority: LanePriority = 12;
-
-const InputContinuousHydrationLanePriority: LanePriority = 11;
-export const InputContinuousLanePriority: LanePriority = 10;
-
-const DefaultHydrationLanePriority: LanePriority = 9;
-export const DefaultLanePriority: LanePriority = 8;
-
-const TransitionHydrationPriority: LanePriority = 7;
-export const TransitionPriority: LanePriority = 6;
-
-const RetryLanePriority: LanePriority = 5;
-
-const SelectiveHydrationLanePriority: LanePriority = 4;
-
-const IdleHydrationLanePriority: LanePriority = 3;
-export const IdleLanePriority: LanePriority = 2;
-
-const OffscreenLanePriority: LanePriority = 1;
-
-export const NoLanePriority: LanePriority = 0;
-
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
@@ -162,29 +140,19 @@ export const NoTimestamp = -1;
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
-// "Registers" used to "return" multiple values
-// Used by getHighestPriorityLanes and getNextLanes:
-let return_highestLanePriority: LanePriority = DefaultLanePriority;
-
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   switch (getHighestPriorityLane(lanes)) {
     case SyncLane:
-      return_highestLanePriority = SyncLanePriority;
       return SyncLane;
     case InputContinuousHydrationLane:
-      return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
     case InputContinuousLane:
-      return_highestLanePriority = InputContinuousLanePriority;
       return InputContinuousLane;
     case DefaultHydrationLane:
-      return_highestLanePriority = DefaultHydrationLanePriority;
       return DefaultHydrationLane;
     case DefaultLane:
-      return_highestLanePriority = DefaultLanePriority;
       return DefaultLane;
     case TransitionHydrationLane:
-      return_highestLanePriority = TransitionHydrationPriority;
       return TransitionHydrationLane;
     case TransitionLane1:
     case TransitionLane2:
@@ -202,26 +170,20 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
-      return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
-      return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
-      return_highestLanePriority = SelectiveHydrationLanePriority;
       return SelectiveHydrationLane;
     case IdleHydrationLane:
-      return_highestLanePriority = IdleHydrationLanePriority;
       return IdleHydrationLane;
     case IdleLane:
-      return_highestLanePriority = IdleLanePriority;
       return IdleLane;
     case OffscreenLane:
-      return_highestLanePriority = OffscreenLanePriority;
       return OffscreenLane;
     default:
       if (__DEV__) {
@@ -230,7 +192,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
         );
       }
       // This shouldn't be reachable, but as a fallback, return the entire bitmask.
-      return_highestLanePriority = DefaultLanePriority;
       return lanes;
   }
 }
@@ -239,12 +200,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
   if (pendingLanes === NoLanes) {
-    return_highestLanePriority = NoLanePriority;
     return NoLanes;
   }
 
   let nextLanes = NoLanes;
-  let nextLanePriority = NoLanePriority;
 
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
@@ -256,12 +215,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
     if (nonIdleUnblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
       if (nonIdlePingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   } else {
@@ -269,11 +226,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const unblockedLanes = pendingLanes & ~suspendedLanes;
     if (unblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(unblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       if (pingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(pingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   }
@@ -307,8 +262,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
-    } else {
-      return_highestLanePriority = nextLanePriority;
     }
   }
 
@@ -490,9 +443,6 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
-export function returnNextLanesPriority() {
-  return return_highestLanePriority;
-}
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
@@ -579,13 +529,6 @@ export function higherPriorityLane(a: Lane, b: Lane) {
   return a !== NoLane && a < b ? a : b;
 }
 
-export function higherLanePriority(
-  a: LanePriority,
-  b: LanePriority,
-): LanePriority {
-  return a !== NoLanePriority && 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

From 3ba5c87377710e154351aebc818df3d33ee6a718 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 28 Mar 2021 16:13:38 -0500
Subject: [PATCH 0374/1603] Remove Scheduler indirection (#21107)

* Bump version number

* Remove Scheduler indirection

I originally kept the React PriorityLevel and Scheduler PriorityLevel
types separate in case there was a versioning mismatch between the two
modules. However, it looks like we're going to keep the Scheduler module
private in the short to medium term, and longer term the public
interface will match postTask. So, I've removed the extra indirection
(the switch statements that convert between the two types).
---
 packages/react-art/package.json               |   4 +-
 .../__tests__/preprocessData-test.internal.js |   2 +-
 .../src/backend/renderer.js                   |  13 +-
 packages/react-dom/package.json               |   4 +-
 packages/react-is/package.json                |   2 +-
 packages/react-reconciler/package.json        |   2 +-
 .../src/ReactFiberHooks.new.js                |   2 -
 .../src/ReactFiberHooks.old.js                |   2 -
 .../src/ReactInternalTypes.js                 |   2 -
 .../src/SchedulerWithReactIntegration.new.js  | 115 +++---------------
 .../src/SchedulerWithReactIntegration.old.js  | 115 +++---------------
 packages/react-test-renderer/package.json     |   6 +-
 packages/react/package.json                   |   2 +-
 packages/shared/ReactVersion.js               |   6 +-
 14 files changed, 62 insertions(+), 215 deletions(-)

diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index ae977717034e..00b1c30d982f 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "17.0.2",
+  "version": "17.0.3",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.2"
+    "react": "17.0.3"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 4945b5fdb4d5..59933cf6900b 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -517,7 +517,7 @@ describe(preprocessData, () => {
           timestamp: 0.003,
         },
         {
-          name: '--react-init-17.0.2',
+          name: '--react-init-17.0.3',
           timestamp: 0.004,
         },
       ],
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 3bc2abe46a91..050a4e709ab3 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -159,7 +159,7 @@ export function getInternalReactConstants(
   // Technically these priority levels are invalid for versions before 16.9,
   // but 16.9 is the first version to report priority level to DevTools,
   // so we can avoid checking for earlier versions and support pre-16.9 canary releases in the process.
-  const ReactPriorityLevels: ReactPriorityLevelsType = {
+  let ReactPriorityLevels: ReactPriorityLevelsType = {
     ImmediatePriority: 99,
     UserBlockingPriority: 98,
     NormalPriority: 97,
@@ -168,6 +168,17 @@ export function getInternalReactConstants(
     NoPriority: 90,
   };
 
+  if (gt(version, '17.0.2')) {
+    ReactPriorityLevels = {
+      ImmediatePriority: 1,
+      UserBlockingPriority: 2,
+      NormalPriority: 3,
+      LowPriority: 4,
+      IdlePriority: 5,
+      NoPriority: 0,
+    };
+  }
+
   let ReactTypeOfWork: WorkTagMap = ((null: any): WorkTagMap);
 
   // **********************************************************
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 5e8991e89877..b5fdf2c991ac 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "17.0.2",
+  "version": "17.0.3",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -22,7 +22,7 @@
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.2"
+    "react": "17.0.3"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index 1a6567dcff5e..0637792729f1 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "17.0.2",
+  "version": "17.0.3",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 7a681953eeb2..14ca5c03670e 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -27,7 +27,7 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.2"
+    "react": "^17.0.3"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index f47627053fc9..0c7e2e4846d8 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -16,7 +16,6 @@ import type {
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {HookFlags} from './ReactHookEffectTags';
-import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.new';
@@ -120,7 +119,6 @@ type Update<S, A> = {|
   eagerReducer: ((S, A) => S) | null,
   eagerState: S | null,
   next: Update<S, A>,
-  priority?: ReactPriorityLevel,
 |};
 
 export type UpdateQueue<S, A> = {|
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 7673d88caecd..6d5d355f0d71 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -16,7 +16,6 @@ import type {
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {HookFlags} from './ReactHookEffectTags';
-import type {ReactPriorityLevel} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
@@ -120,7 +119,6 @@ type Update<S, A> = {|
   eagerReducer: ((S, A) => S) | null,
   eagerState: S | null,
   next: Update<S, A>,
-  priority?: ReactPriorityLevel,
 |};
 
 export type UpdateQueue<S, A> = {|
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 95aa2483eeec..4ad4cb122b5c 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -45,8 +45,6 @@ export type HookType =
   | 'useOpaqueIdentifier'
   | 'useCacheRefresh';
 
-export type ReactPriorityLevel = 99 | 98 | 97 | 96 | 95 | 90;
-
 export type ContextDependency<T> = {
   context: ReactContext<T>,
   next: ContextDependency<mixed> | null,
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
index 685285dffd80..c686cfe12aac 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
@@ -7,10 +7,10 @@
  * @flow
  */
 
-import type {ReactPriorityLevel} from './ReactInternalTypes';
-
-// Intentionally not named imports because Rollup would use dynamic dispatch for
-// CommonJS interop named imports.
+// 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';
 import {__interactionsRef} from 'scheduler/tracing';
 import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
@@ -21,19 +21,18 @@ import {
   setCurrentUpdatePriority,
 } from './ReactEventPriorities.new';
 
-const {
-  unstable_scheduleCallback: Scheduler_scheduleCallback,
-  unstable_cancelCallback: Scheduler_cancelCallback,
-  unstable_shouldYield: Scheduler_shouldYield,
-  unstable_requestPaint: Scheduler_requestPaint,
-  unstable_now: Scheduler_now,
-  unstable_getCurrentPriorityLevel: Scheduler_getCurrentPriorityLevel,
-  unstable_ImmediatePriority: Scheduler_ImmediatePriority,
-  unstable_UserBlockingPriority: Scheduler_UserBlockingPriority,
-  unstable_NormalPriority: Scheduler_NormalPriority,
-  unstable_LowPriority: Scheduler_LowPriority,
-  unstable_IdlePriority: Scheduler_IdlePriority,
-} = 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;
 
 if (enableSchedulerTracing) {
   // Provide explicit error message when production+profiling bundle of e.g.
@@ -51,80 +50,9 @@ if (enableSchedulerTracing) {
 
 export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
 
-type SchedulerCallbackOptions = {timeout?: number, ...};
-
-// Except for NoPriority, these correspond to Scheduler priorities. We use
-// ascending numbers so we can compare them like numbers. They start at 90 to
-// avoid clashing with Scheduler's priorities.
-export const ImmediatePriority: ReactPriorityLevel = 99;
-export const UserBlockingPriority: ReactPriorityLevel = 98;
-export const NormalPriority: ReactPriorityLevel = 97;
-export const LowPriority: ReactPriorityLevel = 96;
-export const IdlePriority: ReactPriorityLevel = 95;
-// NoPriority is the absence of priority. Also React-only.
-export const NoPriority: ReactPriorityLevel = 90;
-
-export const shouldYield = Scheduler_shouldYield;
-export const requestPaint =
-  // Fall back gracefully if we're running an older version of Scheduler.
-  Scheduler_requestPaint !== undefined ? Scheduler_requestPaint : () => {};
-
+// TODO: Move sync task queue to its own module.
 let syncQueue: Array<SchedulerCallback> | null = null;
 let isFlushingSyncQueue: boolean = false;
-const initialTimeMs: number = Scheduler_now();
-
-// If the initial timestamp is reasonably small, use Scheduler's `now` directly.
-// This will be the case for modern browsers that support `performance.now`. In
-// older browsers, Scheduler falls back to `Date.now`, which returns a Unix
-// timestamp. In that case, subtract the module initialization time to simulate
-// the behavior of performance.now and keep our times small enough to fit
-// within 32 bits.
-// TODO: Consider lifting this into Scheduler.
-export const now =
-  initialTimeMs < 10000 ? Scheduler_now : () => Scheduler_now() - initialTimeMs;
-
-export function getCurrentPriorityLevel(): ReactPriorityLevel {
-  switch (Scheduler_getCurrentPriorityLevel()) {
-    case Scheduler_ImmediatePriority:
-      return ImmediatePriority;
-    case Scheduler_UserBlockingPriority:
-      return UserBlockingPriority;
-    case Scheduler_NormalPriority:
-      return NormalPriority;
-    case Scheduler_LowPriority:
-      return LowPriority;
-    case Scheduler_IdlePriority:
-      return IdlePriority;
-    default:
-      invariant(false, 'Unknown priority level.');
-  }
-}
-
-function reactPriorityToSchedulerPriority(reactPriorityLevel) {
-  switch (reactPriorityLevel) {
-    case ImmediatePriority:
-      return Scheduler_ImmediatePriority;
-    case UserBlockingPriority:
-      return Scheduler_UserBlockingPriority;
-    case NormalPriority:
-      return Scheduler_NormalPriority;
-    case LowPriority:
-      return Scheduler_LowPriority;
-    case IdlePriority:
-      return Scheduler_IdlePriority;
-    default:
-      invariant(false, 'Unknown priority level.');
-  }
-}
-
-export function scheduleCallback(
-  reactPriorityLevel: ReactPriorityLevel,
-  callback: SchedulerCallback,
-  options: SchedulerCallbackOptions | void | null,
-) {
-  const priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
-  return Scheduler_scheduleCallback(priorityLevel, callback, options);
-}
 
 export function scheduleSyncCallback(callback: SchedulerCallback) {
   // Push this callback into an internal queue. We'll flush these either in
@@ -138,10 +66,6 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   }
 }
 
-export function cancelCallback(callbackNode: mixed) {
-  Scheduler_cancelCallback(callbackNode);
-}
-
 export function flushSyncCallbackQueue() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrancy.
@@ -167,10 +91,7 @@ export function flushSyncCallbackQueue() {
         syncQueue = syncQueue.slice(i + 1);
       }
       // Resume flushing in the next tick
-      Scheduler_scheduleCallback(
-        Scheduler_ImmediatePriority,
-        flushSyncCallbackQueue,
-      );
+      scheduleCallback(ImmediatePriority, flushSyncCallbackQueue);
       throw error;
     } finally {
       setCurrentUpdatePriority(previousUpdatePriority);
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
index 142b04333adb..9a57e77cb89f 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
@@ -7,10 +7,10 @@
  * @flow
  */
 
-import type {ReactPriorityLevel} from './ReactInternalTypes';
-
-// Intentionally not named imports because Rollup would use dynamic dispatch for
-// CommonJS interop named imports.
+// 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';
 import {__interactionsRef} from 'scheduler/tracing';
 import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
@@ -21,19 +21,18 @@ import {
   setCurrentUpdatePriority,
 } from './ReactEventPriorities.old';
 
-const {
-  unstable_scheduleCallback: Scheduler_scheduleCallback,
-  unstable_cancelCallback: Scheduler_cancelCallback,
-  unstable_shouldYield: Scheduler_shouldYield,
-  unstable_requestPaint: Scheduler_requestPaint,
-  unstable_now: Scheduler_now,
-  unstable_getCurrentPriorityLevel: Scheduler_getCurrentPriorityLevel,
-  unstable_ImmediatePriority: Scheduler_ImmediatePriority,
-  unstable_UserBlockingPriority: Scheduler_UserBlockingPriority,
-  unstable_NormalPriority: Scheduler_NormalPriority,
-  unstable_LowPriority: Scheduler_LowPriority,
-  unstable_IdlePriority: Scheduler_IdlePriority,
-} = 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;
 
 if (enableSchedulerTracing) {
   // Provide explicit error message when production+profiling bundle of e.g.
@@ -51,80 +50,9 @@ if (enableSchedulerTracing) {
 
 export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
 
-type SchedulerCallbackOptions = {timeout?: number, ...};
-
-// Except for NoPriority, these correspond to Scheduler priorities. We use
-// ascending numbers so we can compare them like numbers. They start at 90 to
-// avoid clashing with Scheduler's priorities.
-export const ImmediatePriority: ReactPriorityLevel = 99;
-export const UserBlockingPriority: ReactPriorityLevel = 98;
-export const NormalPriority: ReactPriorityLevel = 97;
-export const LowPriority: ReactPriorityLevel = 96;
-export const IdlePriority: ReactPriorityLevel = 95;
-// NoPriority is the absence of priority. Also React-only.
-export const NoPriority: ReactPriorityLevel = 90;
-
-export const shouldYield = Scheduler_shouldYield;
-export const requestPaint =
-  // Fall back gracefully if we're running an older version of Scheduler.
-  Scheduler_requestPaint !== undefined ? Scheduler_requestPaint : () => {};
-
+// TODO: Move sync task queue to its own module.
 let syncQueue: Array<SchedulerCallback> | null = null;
 let isFlushingSyncQueue: boolean = false;
-const initialTimeMs: number = Scheduler_now();
-
-// If the initial timestamp is reasonably small, use Scheduler's `now` directly.
-// This will be the case for modern browsers that support `performance.now`. In
-// older browsers, Scheduler falls back to `Date.now`, which returns a Unix
-// timestamp. In that case, subtract the module initialization time to simulate
-// the behavior of performance.now and keep our times small enough to fit
-// within 32 bits.
-// TODO: Consider lifting this into Scheduler.
-export const now =
-  initialTimeMs < 10000 ? Scheduler_now : () => Scheduler_now() - initialTimeMs;
-
-export function getCurrentPriorityLevel(): ReactPriorityLevel {
-  switch (Scheduler_getCurrentPriorityLevel()) {
-    case Scheduler_ImmediatePriority:
-      return ImmediatePriority;
-    case Scheduler_UserBlockingPriority:
-      return UserBlockingPriority;
-    case Scheduler_NormalPriority:
-      return NormalPriority;
-    case Scheduler_LowPriority:
-      return LowPriority;
-    case Scheduler_IdlePriority:
-      return IdlePriority;
-    default:
-      invariant(false, 'Unknown priority level.');
-  }
-}
-
-function reactPriorityToSchedulerPriority(reactPriorityLevel) {
-  switch (reactPriorityLevel) {
-    case ImmediatePriority:
-      return Scheduler_ImmediatePriority;
-    case UserBlockingPriority:
-      return Scheduler_UserBlockingPriority;
-    case NormalPriority:
-      return Scheduler_NormalPriority;
-    case LowPriority:
-      return Scheduler_LowPriority;
-    case IdlePriority:
-      return Scheduler_IdlePriority;
-    default:
-      invariant(false, 'Unknown priority level.');
-  }
-}
-
-export function scheduleCallback(
-  reactPriorityLevel: ReactPriorityLevel,
-  callback: SchedulerCallback,
-  options: SchedulerCallbackOptions | void | null,
-) {
-  const priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);
-  return Scheduler_scheduleCallback(priorityLevel, callback, options);
-}
 
 export function scheduleSyncCallback(callback: SchedulerCallback) {
   // Push this callback into an internal queue. We'll flush these either in
@@ -138,10 +66,6 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   }
 }
 
-export function cancelCallback(callbackNode: mixed) {
-  Scheduler_cancelCallback(callbackNode);
-}
-
 export function flushSyncCallbackQueue() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrancy.
@@ -167,10 +91,7 @@ export function flushSyncCallbackQueue() {
         syncQueue = syncQueue.slice(i + 1);
       }
       // Resume flushing in the next tick
-      Scheduler_scheduleCallback(
-        Scheduler_ImmediatePriority,
-        flushSyncCallbackQueue,
-      );
+      scheduleCallback(ImmediatePriority, flushSyncCallbackQueue);
       throw error;
     } finally {
       setCurrentUpdatePriority(previousUpdatePriority);
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index ea62201e24b1..1daa2c54308f 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "17.0.2",
+  "version": "17.0.3",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -20,12 +20,12 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "object-assign": "^4.1.1",
-    "react-is": "^17.0.2",
+    "react-is": "^17.0.3",
     "react-shallow-renderer": "^16.13.1",
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
-    "react": "17.0.2"
+    "react": "17.0.3"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react/package.json b/packages/react/package.json
index 311982f5c354..0ab41de16ca5 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "17.0.2",
+  "version": "17.0.3",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index 0404e3972272..69b37a19f037 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -7,7 +7,7 @@
 
 // TODO: this is special because it gets imported during build.
 //
-// TODO: 17.0.2 has not been released to NPM;
+// TODO: 17.0.3 has not been released to NPM;
 // It exists as a placeholder so that DevTools can support work tag changes between releases.
-// When we next publish a release (either 17.0.2 or 17.1.0), update the matching TODO in backend/renderer.js
-export default '17.0.2';
+// When we next publish a release (either 17.0.3 or 17.1.0), update the matching TODO in backend/renderer.js
+export default '17.0.3';

From dbe98a5aae79efce4de3eea95171d1ef70537fdb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 28 Mar 2021 16:15:53 -0500
Subject: [PATCH 0375/1603] Move sync task queue to its own module (#21109)

The sync task queue is React-specific and doesn't really have anything
to do with Scheduler. We'd keep using it even once `postTask` exists.

By separating that part out, `SchedulerWithReactIntegration` is now
just a module that re-exports the Scheduler API. So I unforked it.
When we switch to ES Modules, we can remove this re-exporting module.
---
 .../src/events/ReactDOMEventListener.js       | 16 ++---
 .../src/ReactFiberCompleteWork.new.js         |  2 +-
 .../src/ReactFiberCompleteWork.old.js         |  2 +-
 .../src/ReactFiberDevToolsHook.new.js         |  2 +-
 .../src/ReactFiberDevToolsHook.old.js         |  2 +-
 .../src/ReactFiberSyncTaskQueue.new.js        | 67 +++++++++++++++++++
 ....old.js => ReactFiberSyncTaskQueue.old.js} | 41 +-----------
 .../src/ReactFiberWorkLoop.new.js             |  4 +-
 .../src/ReactFiberWorkLoop.old.js             |  4 +-
 ...thReactIntegration.new.js => Scheduler.js} | 56 ----------------
 10 files changed, 84 insertions(+), 112 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
 rename packages/react-reconciler/src/{SchedulerWithReactIntegration.old.js => ReactFiberSyncTaskQueue.old.js} (50%)
 rename packages/react-reconciler/src/{SchedulerWithReactIntegration.new.js => Scheduler.js} (53%)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 8197a2da242a..3f00dcf305b3 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -34,25 +34,21 @@ import {
 import getEventTarget from './getEventTarget';
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 
-import {
-  enableLegacyFBSupport,
-  enableNewReconciler,
-} from 'shared/ReactFeatureFlags';
+import {enableLegacyFBSupport} from 'shared/ReactFeatureFlags';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   flushDiscreteUpdatesIfNeeded,
   discreteUpdates,
 } from './ReactDOMUpdateBatching';
 
-import {getCurrentPriorityLevel as getCurrentPriorityLevel_old} from 'react-reconciler/src/SchedulerWithReactIntegration.old';
 import {
-  getCurrentPriorityLevel as getCurrentPriorityLevel_new,
+  getCurrentPriorityLevel as getCurrentSchedulerPriorityLevel,
   IdlePriority as IdleSchedulerPriority,
   ImmediatePriority as ImmediateSchedulerPriority,
   LowPriority as LowSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   UserBlockingPriority as UserBlockingSchedulerPriority,
-} from 'react-reconciler/src/SchedulerWithReactIntegration.new';
+} from 'react-reconciler/src/Scheduler';
 import {
   DiscreteEventPriority,
   ContinuousEventPriority,
@@ -62,10 +58,6 @@ import {
   setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
 
-const getCurrentPriorityLevel = enableNewReconciler
-  ? getCurrentPriorityLevel_new
-  : getCurrentPriorityLevel_old;
-
 // TODO: can we stop exporting these?
 export let _enabled = true;
 
@@ -392,7 +384,7 @@ export function getEventPriority(domEventName: DOMEventName): * {
       // 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 = getCurrentPriorityLevel();
+      const schedulerPriority = getCurrentSchedulerPriorityLevel();
       switch (schedulerPriority) {
         case ImmediateSchedulerPriority:
           return DiscreteEventPriority;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 1dcc0ec9c87d..0924738f1e95 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -28,7 +28,7 @@ import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 
-import {now} from './SchedulerWithReactIntegration.new';
+import {now} from './Scheduler';
 
 import {
   IndeterminateComponent,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index dc1112d3b88f..017db23b66e4 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -28,7 +28,7 @@ import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 
-import {now} from './SchedulerWithReactIntegration.old';
+import {now} from './Scheduler';
 
 import {
   IndeterminateComponent,
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index afcbad36f155..a98e569b095b 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -25,7 +25,7 @@ import {
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
-} from './SchedulerWithReactIntegration.new';
+} from './Scheduler';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index 39cd1f02cf99..43b9f360faa3 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -25,7 +25,7 @@ import {
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
-} from './SchedulerWithReactIntegration.old';
+} from './Scheduler';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
new file mode 100644
index 000000000000..1d3e3daa47ae
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {SchedulerCallback} from './Scheduler';
+
+import {
+  DiscreteEventPriority,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+} from './ReactEventPriorities.new';
+import {ImmediatePriority, scheduleCallback} from './Scheduler';
+
+let syncQueue: Array<SchedulerCallback> | null = null;
+let isFlushingSyncQueue: boolean = false;
+
+export function scheduleSyncCallback(callback: SchedulerCallback) {
+  // Push this callback into an internal queue. We'll flush these either in
+  // the next tick, or earlier if something calls `flushSyncCallbackQueue`.
+  if (syncQueue === null) {
+    syncQueue = [callback];
+  } else {
+    // Push onto existing queue. Don't need to schedule a callback because
+    // we already scheduled one when we created the queue.
+    syncQueue.push(callback);
+  }
+}
+
+export function flushSyncCallbackQueue() {
+  if (!isFlushingSyncQueue && syncQueue !== null) {
+    // Prevent re-entrancy.
+    isFlushingSyncQueue = true;
+    let i = 0;
+    const previousUpdatePriority = getCurrentUpdatePriority();
+    try {
+      const isSync = true;
+      const queue = syncQueue;
+      // TODO: Is this necessary anymore? The only user code that runs in this
+      // queue is in the render or commit phases.
+      setCurrentUpdatePriority(DiscreteEventPriority);
+      for (; i < queue.length; i++) {
+        let callback = queue[i];
+        do {
+          callback = callback(isSync);
+        } while (callback !== null);
+      }
+      syncQueue = null;
+    } catch (error) {
+      // If something throws, leave the remaining callbacks on the queue.
+      if (syncQueue !== null) {
+        syncQueue = syncQueue.slice(i + 1);
+      }
+      // Resume flushing in the next tick
+      scheduleCallback(ImmediatePriority, flushSyncCallbackQueue);
+      throw error;
+    } finally {
+      setCurrentUpdatePriority(previousUpdatePriority);
+      isFlushingSyncQueue = false;
+    }
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
similarity index 50%
rename from packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
rename to packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
index 9a57e77cb89f..48a6f352feca 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.old.js
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
@@ -7,50 +7,15 @@
  * @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';
-import {__interactionsRef} from 'scheduler/tracing';
-import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
+import type {SchedulerCallback} from './Scheduler';
+
 import {
   DiscreteEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
 } from './ReactEventPriorities.old';
+import {ImmediatePriority, scheduleCallback} 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;
-
-if (enableSchedulerTracing) {
-  // Provide explicit error message when production+profiling bundle of e.g.
-  // react-dom is used with production (non-profiling) bundle of
-  // scheduler/tracing
-  invariant(
-    __interactionsRef != null && __interactionsRef.current != null,
-    '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://reactjs.org/link/profiling',
-  );
-}
-
-export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
-
-// TODO: Move sync task queue to its own module.
 let syncQueue: Array<SchedulerCallback> | null = null;
 let isFlushingSyncQueue: boolean = false;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b7ed519ea55d..8b5a924f02cd 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -46,9 +46,11 @@ import {
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
+} from './Scheduler';
+import {
   flushSyncCallbackQueue,
   scheduleSyncCallback,
-} from './SchedulerWithReactIntegration.new';
+} from './ReactFiberSyncTaskQueue.new';
 import {
   NoFlags as NoHookEffect,
   Passive as HookPassive,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d29bbdefba4c..3ee88a2feaf1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -46,9 +46,11 @@ import {
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
+} from './Scheduler';
+import {
   flushSyncCallbackQueue,
   scheduleSyncCallback,
-} from './SchedulerWithReactIntegration.old';
+} from './ReactFiberSyncTaskQueue.old';
 import {
   NoFlags as NoHookEffect,
   Passive as HookPassive,
diff --git a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js b/packages/react-reconciler/src/Scheduler.js
similarity index 53%
rename from packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
rename to packages/react-reconciler/src/Scheduler.js
index c686cfe12aac..f590f284a9ed 100644
--- a/packages/react-reconciler/src/SchedulerWithReactIntegration.new.js
+++ b/packages/react-reconciler/src/Scheduler.js
@@ -15,11 +15,6 @@ import * as Scheduler from 'scheduler';
 import {__interactionsRef} from 'scheduler/tracing';
 import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
-import {
-  DiscreteEventPriority,
-  getCurrentUpdatePriority,
-  setCurrentUpdatePriority,
-} from './ReactEventPriorities.new';
 
 export const scheduleCallback = Scheduler.unstable_scheduleCallback;
 export const cancelCallback = Scheduler.unstable_cancelCallback;
@@ -49,54 +44,3 @@ if (enableSchedulerTracing) {
 }
 
 export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
-
-// TODO: Move sync task queue to its own module.
-let syncQueue: Array<SchedulerCallback> | null = null;
-let isFlushingSyncQueue: boolean = false;
-
-export function scheduleSyncCallback(callback: SchedulerCallback) {
-  // Push this callback into an internal queue. We'll flush these either in
-  // the next tick, or earlier if something calls `flushSyncCallbackQueue`.
-  if (syncQueue === null) {
-    syncQueue = [callback];
-  } else {
-    // Push onto existing queue. Don't need to schedule a callback because
-    // we already scheduled one when we created the queue.
-    syncQueue.push(callback);
-  }
-}
-
-export function flushSyncCallbackQueue() {
-  if (!isFlushingSyncQueue && syncQueue !== null) {
-    // Prevent re-entrancy.
-    isFlushingSyncQueue = true;
-    let i = 0;
-    const previousUpdatePriority = getCurrentUpdatePriority();
-    try {
-      const isSync = true;
-      const queue = syncQueue;
-      // TODO: Is this necessary anymore? The only user code that runs in this
-      // queue is in the render or commit phases.
-      setCurrentUpdatePriority(DiscreteEventPriority);
-      for (; i < queue.length; i++) {
-        let callback = queue[i];
-        do {
-          callback = callback(isSync);
-        } while (callback !== null);
-      }
-      syncQueue = null;
-    } catch (error) {
-      // If something throws, leave the remaining callbacks on the queue.
-      if (syncQueue !== null) {
-        syncQueue = syncQueue.slice(i + 1);
-      }
-      // Resume flushing in the next tick
-      scheduleCallback(ImmediatePriority, flushSyncCallbackQueue);
-      throw error;
-    } finally {
-      setCurrentUpdatePriority(previousUpdatePriority);
-      isFlushingSyncQueue = false;
-    }
-  }
-  return null;
-}

From 1102224bbbfd587ec6088620c66f048d10856c59 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 28 Mar 2021 18:50:30 -0500
Subject: [PATCH 0376/1603] Fix: flushSync changes priority inside effect
 (#21122)

When called from inside an effect, flushSync cannot synchronously flush
its updates because React is already working. So we fire a warning.

However, we should still change the priority of the updates to sync so
that they flush at the end of the current task.

This only affects useEffect because updates inside useLayoutEffect (and
the rest of the commit phase, like ref callbacks) are already sync.
---
 .../src/ReactFiberWorkLoop.new.js             | 22 +++----
 .../src/ReactFiberWorkLoop.old.js             | 22 +++----
 .../src/__tests__/ReactFlushSync-test.js      | 57 +++++++++++++++++++
 3 files changed, 79 insertions(+), 22 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactFlushSync-test.js

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 8b5a924f02cd..e16a1405b871 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1166,16 +1166,6 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
 
 export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
-  if ((prevExecutionContext & (RenderContext | CommitContext)) !== NoContext) {
-    if (__DEV__) {
-      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.',
-      );
-    }
-    return fn(a);
-  }
   executionContext |= BatchedContext;
 
   const previousPriority = getCurrentUpdatePriority();
@@ -1192,7 +1182,17 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
     // the stack.
-    flushSyncCallbackQueue();
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      flushSyncCallbackQueue();
+    } else {
+      if (__DEV__) {
+        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.',
+        );
+      }
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 3ee88a2feaf1..9446db83ca08 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1166,16 +1166,6 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
 
 export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
-  if ((prevExecutionContext & (RenderContext | CommitContext)) !== NoContext) {
-    if (__DEV__) {
-      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.',
-      );
-    }
-    return fn(a);
-  }
   executionContext |= BatchedContext;
 
   const previousPriority = getCurrentUpdatePriority();
@@ -1192,7 +1182,17 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
     // the stack.
-    flushSyncCallbackQueue();
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      flushSyncCallbackQueue();
+    } else {
+      if (__DEV__) {
+        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.',
+        );
+      }
+    }
   }
 }
 
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 000000000000..3c96f5ee6591
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -0,0 +1,57 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let useState;
+let useEffect;
+
+describe('ReactFlushSync', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useEffect = React.useEffect;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  test('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);
+          ReactNoop.flushSync(() => setSyncState(1));
+        }
+      }, [syncState, state]);
+      return <Text text={`${syncState}, ${state}`} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+      // This will yield right before the passive effect fires
+      expect(Scheduler).toFlushUntilNextPaint(['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.
+      expect(() =>
+        expect(Scheduler).toFlushUntilNextPaint(['1, 0']),
+      ).toErrorDev('flushSync was called from inside a lifecycle method');
+
+      // The remaining update is not sync
+      ReactNoop.flushSync();
+      expect(Scheduler).toHaveYielded([]);
+
+      // Now flush it.
+      expect(Scheduler).toFlushUntilNextPaint(['1, 1']);
+    });
+    expect(root).toMatchRenderedOutput('1, 1');
+  });
+});

From 634cc52e6174b506dee79d908f50ce1ee19f4fbf Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 28 Mar 2021 18:51:11 -0500
Subject: [PATCH 0377/1603] Delete dead variable: currentEventWipLanes (#21123)

No longer used anywhere.
---
 .../src/ReactFiberWorkLoop.new.js             | 33 +++++--------------
 .../src/ReactFiberWorkLoop.old.js             | 33 +++++--------------
 2 files changed, 16 insertions(+), 50 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e16a1405b871..1cff8db1fe65 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -350,7 +350,6 @@ let spawnedWorkDuringRender: null | Array<Lane | Lanes> = null;
 // event times as simultaneous, even if the actual clock time has advanced
 // between the first and second call.
 let currentEventTime: number = NoTimestamp;
-let currentEventWipLanes: Lanes = NoLanes;
 let currentEventTransitionLane: Lanes = NoLanes;
 
 // Dev only flag that tracks if passive effects are currently being flushed.
@@ -402,27 +401,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     return pickArbitraryLane(workInProgressRootRenderLanes);
   }
 
-  // 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. For example, we use the `renderLanes`
-  // to avoid choosing a lane that is already in the middle of rendering.
-  //
-  // However, the "included" lanes could be mutated in between updates in the
-  // same event, like if you perform an update inside `flushSync`. Or any other
-  // code path that might call `prepareFreshStack`.
-  //
-  // 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.
-  //
-  // We'll do the same for `currentEventTransitionLane` below.
-  if (currentEventWipLanes === NoLanes) {
-    currentEventWipLanes = workInProgressRootIncludedLanes;
-  }
-
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
+    // 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.
       currentEventTransitionLane = claimNextTransitionLane();
     }
     return currentEventTransitionLane;
@@ -460,11 +449,6 @@ function requestRetryLane(fiber: Fiber) {
     return (SyncLane: Lane);
   }
 
-  // See `requestUpdateLane` for explanation of `currentEventWipLanes`
-  if (currentEventWipLanes === NoLanes) {
-    currentEventWipLanes = workInProgressRootIncludedLanes;
-  }
-
   return claimNextRetryLane();
 }
 
@@ -748,7 +732,6 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   // Since we know we're in a React event, we can clear the current
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
-  currentEventWipLanes = NoLanes;
   currentEventTransitionLane = NoLanes;
 
   invariant(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 9446db83ca08..98f4d119e408 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -350,7 +350,6 @@ let spawnedWorkDuringRender: null | Array<Lane | Lanes> = null;
 // event times as simultaneous, even if the actual clock time has advanced
 // between the first and second call.
 let currentEventTime: number = NoTimestamp;
-let currentEventWipLanes: Lanes = NoLanes;
 let currentEventTransitionLane: Lanes = NoLanes;
 
 // Dev only flag that tracks if passive effects are currently being flushed.
@@ -402,27 +401,17 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     return pickArbitraryLane(workInProgressRootRenderLanes);
   }
 
-  // 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. For example, we use the `renderLanes`
-  // to avoid choosing a lane that is already in the middle of rendering.
-  //
-  // However, the "included" lanes could be mutated in between updates in the
-  // same event, like if you perform an update inside `flushSync`. Or any other
-  // code path that might call `prepareFreshStack`.
-  //
-  // 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.
-  //
-  // We'll do the same for `currentEventTransitionLane` below.
-  if (currentEventWipLanes === NoLanes) {
-    currentEventWipLanes = workInProgressRootIncludedLanes;
-  }
-
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
+    // 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.
       currentEventTransitionLane = claimNextTransitionLane();
     }
     return currentEventTransitionLane;
@@ -460,11 +449,6 @@ function requestRetryLane(fiber: Fiber) {
     return (SyncLane: Lane);
   }
 
-  // See `requestUpdateLane` for explanation of `currentEventWipLanes`
-  if (currentEventWipLanes === NoLanes) {
-    currentEventWipLanes = workInProgressRootIncludedLanes;
-  }
-
   return claimNextRetryLane();
 }
 
@@ -748,7 +732,6 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   // Since we know we're in a React event, we can clear the current
   // event time. The next update will compute a new event time.
   currentEventTime = NoTimestamp;
-  currentEventWipLanes = NoLanes;
   currentEventTransitionLane = NoLanes;
 
   invariant(

From 64983aab5d4dbd99ca06bb85e69bb193928ea0c7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 29 Mar 2021 13:20:40 -0500
Subject: [PATCH 0378/1603] Remove redundant setUpdatePriority call (#21127)

See removed TODO comment. This call is no longer necessary because we
use the dispatcher to track whether we're inside a transition, not the
event priority.
---
 packages/react-reconciler/src/ReactFiberHooks.new.js | 6 ------
 packages/react-reconciler/src/ReactFiberHooks.old.js | 6 ------
 2 files changed, 12 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 0c7e2e4846d8..cbb755540e28 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -49,7 +49,6 @@ import {
   markRootMutableRead,
 } from './ReactFiberLane.new';
 import {
-  DefaultEventPriority,
   ContinuousEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
@@ -1712,11 +1711,6 @@ function startTransition(setPending, callback) {
 
   setPending(true);
 
-  // TODO: Can remove this. Was only necessary because we used to give
-  // different behavior to transitions without a config object. Now they are
-  // all treated the same.
-  setCurrentUpdatePriority(DefaultEventPriority);
-
   const prevTransition = ReactCurrentBatchConfig.transition;
   ReactCurrentBatchConfig.transition = 1;
   try {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 6d5d355f0d71..3c7e87d02dc6 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -49,7 +49,6 @@ import {
   markRootMutableRead,
 } from './ReactFiberLane.old';
 import {
-  DefaultEventPriority,
   ContinuousEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
@@ -1712,11 +1711,6 @@ function startTransition(setPending, callback) {
 
   setPending(true);
 
-  // TODO: Can remove this. Was only necessary because we used to give
-  // different behavior to transitions without a config object. Now they are
-  // all treated the same.
-  setCurrentUpdatePriority(DefaultEventPriority);
-
   const prevTransition = ReactCurrentBatchConfig.transition;
   ReactCurrentBatchConfig.transition = 1;
   try {

From 8e76371241646038a4c98426d8da59fe263538d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 29 Mar 2021 22:35:34 -0400
Subject: [PATCH 0379/1603] Move not shared to client (#21135)

---
 .../src/{shared => client}/CSSPropertyOperations.js         | 6 +++---
 .../src/{shared => client}/CSSShorthandProperty.js          | 0
 packages/react-dom/src/client/ReactDOMComponent.js          | 2 +-
 .../createMicrosoftUnsafeLocalFunction.js                   | 0
 packages/react-dom/src/client/setInnerHTML.js               | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)
 rename packages/react-dom/src/{shared => client}/CSSPropertyOperations.js (96%)
 rename packages/react-dom/src/{shared => client}/CSSShorthandProperty.js (100%)
 rename packages/react-dom/src/{shared => client}/createMicrosoftUnsafeLocalFunction.js (100%)

diff --git a/packages/react-dom/src/shared/CSSPropertyOperations.js b/packages/react-dom/src/client/CSSPropertyOperations.js
similarity index 96%
rename from packages/react-dom/src/shared/CSSPropertyOperations.js
rename to packages/react-dom/src/client/CSSPropertyOperations.js
index 8aaa78fe6872..12c85b492929 100644
--- a/packages/react-dom/src/shared/CSSPropertyOperations.js
+++ b/packages/react-dom/src/client/CSSPropertyOperations.js
@@ -7,9 +7,9 @@
 
 import {shorthandToLonghand} from './CSSShorthandProperty';
 
-import dangerousStyleValue from './dangerousStyleValue';
-import hyphenateStyleName from './hyphenateStyleName';
-import warnValidStyle from './warnValidStyle';
+import dangerousStyleValue from '../shared/dangerousStyleValue';
+import hyphenateStyleName from '../shared/hyphenateStyleName';
+import warnValidStyle from '../shared/warnValidStyle';
 
 /**
  * Operations for dealing with CSS properties.
diff --git a/packages/react-dom/src/shared/CSSShorthandProperty.js b/packages/react-dom/src/client/CSSShorthandProperty.js
similarity index 100%
rename from packages/react-dom/src/shared/CSSShorthandProperty.js
rename to packages/react-dom/src/client/CSSShorthandProperty.js
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 71da034466c8..0356f6dc8ff4 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -53,7 +53,7 @@ import {
   createDangerousStringForStyles,
   setValueForStyles,
   validateShorthandPropertyCollisionInDev,
-} from '../shared/CSSPropertyOperations';
+} from './CSSPropertyOperations';
 import {HTML_NAMESPACE, getIntrinsicNamespace} from '../shared/DOMNamespaces';
 import {
   getPropertyInfo,
diff --git a/packages/react-dom/src/shared/createMicrosoftUnsafeLocalFunction.js b/packages/react-dom/src/client/createMicrosoftUnsafeLocalFunction.js
similarity index 100%
rename from packages/react-dom/src/shared/createMicrosoftUnsafeLocalFunction.js
rename to packages/react-dom/src/client/createMicrosoftUnsafeLocalFunction.js
diff --git a/packages/react-dom/src/client/setInnerHTML.js b/packages/react-dom/src/client/setInnerHTML.js
index 43319acd2bf0..e283efb27077 100644
--- a/packages/react-dom/src/client/setInnerHTML.js
+++ b/packages/react-dom/src/client/setInnerHTML.js
@@ -8,7 +8,7 @@
  */
 
 import {SVG_NAMESPACE} from '../shared/DOMNamespaces';
-import createMicrosoftUnsafeLocalFunction from '../shared/createMicrosoftUnsafeLocalFunction';
+import createMicrosoftUnsafeLocalFunction from './createMicrosoftUnsafeLocalFunction';
 import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 
 // SVG temp container for IE lacking innerHTML

From cecfde51b63ff33afde0d63ed32de53782c6e14c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 29 Mar 2021 22:35:47 -0400
Subject: [PATCH 0380/1603] Don't import star from ReactDOM (#21133)

---
 packages/react-dom/src/client/ReactDOMOption.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMOption.js b/packages/react-dom/src/client/ReactDOMOption.js
index 4dfe661b23f1..56a4efe63151 100644
--- a/packages/react-dom/src/client/ReactDOMOption.js
+++ b/packages/react-dom/src/client/ReactDOMOption.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import * as React from 'react';
+import {Children} from 'react';
 import {getToStringValue, toString} from './ToStringValue';
 
 let didWarnSelectedSetOnOption = false;
@@ -21,7 +21,7 @@ function flattenChildren(children) {
   // Note that this would throw on non-element objects.
   // Elements are stringified (which is normally irrelevant
   // but matters for <fbt>).
-  React.Children.forEach(children, function(child) {
+  Children.forEach(children, function(child) {
     if (child == null) {
       return;
     }
@@ -45,7 +45,7 @@ export function validateProps(element: Element, props: Object) {
     // TODO: this seems like it could cause a DEV-only throw for hydration
     // if children contains a non-element object. We should try to avoid that.
     if (typeof props.children === 'object' && props.children !== null) {
-      React.Children.forEach(props.children, function(child) {
+      Children.forEach(props.children, function(child) {
         if (child == null) {
           return;
         }

From e40f0b260303441710d762a83afc8c41aefe1daa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 29 Mar 2021 22:35:58 -0400
Subject: [PATCH 0381/1603] Remove checkReact (#21132)

I don't know what this is useful for but I suspect it was only useful at
FB and is not applicable to ES modules at FB nor elsewhere.
---
 packages/react-dom/src/client/ReactDOM.js   |  1 -
 packages/react-dom/src/shared/checkReact.js | 17 -----------------
 2 files changed, 18 deletions(-)
 delete mode 100644 packages/react-dom/src/shared/checkReact.js

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index aeeb5b307063..9223c52fb027 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -10,7 +10,6 @@
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Container} from './ReactDOMHostConfig';
 
-import '../shared/checkReact';
 import {
   findDOMNode,
   render,
diff --git a/packages/react-dom/src/shared/checkReact.js b/packages/react-dom/src/shared/checkReact.js
deleted file mode 100644
index 860628b81fb7..000000000000
--- a/packages/react-dom/src/shared/checkReact.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import invariant from 'shared/invariant';
-
-invariant(
-  React,
-  'ReactDOM was loaded before React. Make sure you load ' +
-    'the React package before loading ReactDOM.',
-);

From d1294c9d404de748b49dd6543144367f90a5e6b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 29 Mar 2021 22:36:16 -0400
Subject: [PATCH 0382/1603] [Flight] Add global onError handler (#21129)

* Add onError option to Flight Server

The callback is called any time an error is generated in a server component.

This allows it to be logged on a server if needed. It'll still be rethrown
on the client so it can be logged there too but in case it never reaches
the client, here's a way to make sure it doesn't get lost.

* Add fatal error handling
---
 .../src/ReactNoopFlightServer.js              |  7 ++-
 .../src/ReactFlightDOMRelayServer.js          | 12 ++++-
 .../ReactFlightDOMRelayServerHostConfig.js    |  7 ++-
 .../src/ReactFlightDOMServerBrowser.js        | 12 ++++-
 .../src/ReactFlightDOMServerNode.js           | 12 ++++-
 .../src/__tests__/ReactFlightDOM-test.js      | 17 ++++++-
 .../ReactFlightNativeRelayServerHostConfig.js |  7 ++-
 .../react-server/src/ReactFlightServer.js     | 51 ++++++++++++++-----
 .../src/ReactFlightServerConfigStream.js      |  1 +
 9 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 7614ba3e8dfb..51a5604bd555 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -54,13 +54,18 @@ const ReactNoopFlightServer = ReactFlightServer({
   },
 });
 
-function render(model: ReactModel): Destination {
+type Options = {
+  onError?: (error: mixed) => void,
+};
+
+function render(model: ReactModel, options?: Options): Destination {
   const destination: Destination = [];
   const bundlerConfig = undefined;
   const request = ReactNoopFlightServer.createRequest(
     model,
     destination,
     bundlerConfig,
+    options ? options.onError : undefined,
   );
   ReactNoopFlightServer.startWork(request);
   return destination;
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
index 3334d34d453d..56769e425539 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
@@ -15,12 +15,22 @@ import type {
 
 import {createRequest, startWork} from 'react-server/src/ReactFlightServer';
 
+type Options = {
+  onError?: (error: mixed) => void,
+};
+
 function render(
   model: ReactModel,
   destination: Destination,
   config: BundlerConfig,
+  options?: Options,
 ): void {
-  const request = createRequest(model, destination, config);
+  const request = createRequest(
+    model,
+    destination,
+    config,
+    options ? options.onError : undefined,
+  );
   startWork(request);
 }
 
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 1aa02e00d54b..7ebcaf6b1e8d 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -26,6 +26,7 @@ import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
 import {
   emitRow,
   resolveModuleMetaData as resolveModuleMetaDataImpl,
+  close,
 } from 'ReactFlightDOMRelayServerIntegration';
 
 export type {
@@ -146,4 +147,8 @@ export function writeChunk(destination: Destination, chunk: Chunk): boolean {
 
 export function completeWriting(destination: Destination) {}
 
-export {close} from 'ReactFlightDOMRelayServerIntegration';
+export {close};
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  close(destination);
+}
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index bbbf5f18ea86..accd749a56d5 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -16,14 +16,24 @@ import {
   startFlowing,
 } from 'react-server/src/ReactFlightServer';
 
+type Options = {
+  onError?: (error: mixed) => void,
+};
+
 function renderToReadableStream(
   model: ReactModel,
   webpackMap: BundlerConfig,
+  options?: Options,
 ): ReadableStream {
   let request;
   return new ReadableStream({
     start(controller) {
-      request = createRequest(model, controller, webpackMap);
+      request = createRequest(
+        model,
+        controller,
+        webpackMap,
+        options ? options.onError : undefined,
+      );
       startWork(request);
     },
     pull(controller) {
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 312c18b09484..dc78c503aaf3 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -21,12 +21,22 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request);
 }
 
+type Options = {
+  onError?: (error: mixed) => void,
+};
+
 function pipeToNodeWritable(
   model: ReactModel,
   destination: Writable,
   webpackMap: BundlerConfig,
+  options?: Options,
 ): void {
-  const request = createRequest(model, destination, webpackMap);
+  const request = createRequest(
+    model,
+    destination,
+    webpackMap,
+    options ? options.onError : undefined,
+  );
   destination.on('drain', createDrainHandler(destination, request));
   startWork(request);
 }
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index a481d6ebbcd6..a768b0cf0bb6 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -256,6 +256,7 @@ describe('ReactFlightDOM', () => {
 
   // @gate experimental
   it('should progressively reveal server components', async () => {
+    let reportedErrors = [];
     const {Suspense} = React;
 
     // Client Components
@@ -374,7 +375,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(model, writable, webpackMap);
+    ReactServerDOMWriter.pipeToNodeWritable(model, writable, webpackMap, {
+      onError(x) {
+        reportedErrors.push(x);
+      },
+    });
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -407,9 +412,12 @@ describe('ReactFlightDOM', () => {
         '<p>(loading games)</p>',
     );
 
+    expect(reportedErrors).toEqual([]);
+
+    const theError = new Error('Game over');
     // Let's *fail* loading games.
     await act(async () => {
-      rejectGames(new Error('Game over'));
+      rejectGames(theError);
     });
     expect(container.innerHTML).toBe(
       '<div>:name::avatar:</div>' +
@@ -418,6 +426,9 @@ describe('ReactFlightDOM', () => {
         '<p>Game over</p>', // TODO: should not have message in prod.
     );
 
+    expect(reportedErrors).toEqual([theError]);
+    reportedErrors = [];
+
     // We can now show the sidebar.
     await act(async () => {
       resolvePhotos();
@@ -439,6 +450,8 @@ describe('ReactFlightDOM', () => {
         '<div>:posts:</div>' +
         '<p>Game over</p>', // TODO: should not have message in prod.
     );
+
+    expect(reportedErrors).toEqual([]);
   });
 
   // @gate experimental
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index ecea013654f3..8bf0cdf8b41e 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -25,6 +25,7 @@ import {resolveModelToJSON} from 'react-server/src/ReactFlightServer';
 
 import {
   emitRow,
+  close,
   resolveModuleMetaData as resolveModuleMetaDataImpl,
 } from 'ReactFlightNativeRelayServerIntegration';
 
@@ -146,4 +147,8 @@ export function writeChunk(destination: Destination, chunk: Chunk): boolean {
 
 export function completeWriting(destination: Destination) {}
 
-export {close} from 'ReactFlightNativeRelayServerIntegration';
+export {close};
+
+export function closeWithError(destination: Destination, error: mixed): void {
+  close(destination);
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index b80798cd66f4..2a09e21c89a0 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -24,6 +24,7 @@ import {
   completeWriting,
   flushBuffered,
   close,
+  closeWithError,
   processModelChunk,
   processModuleChunk,
   processSymbolChunk,
@@ -83,16 +84,20 @@ export type Request = {
   completedErrorChunks: Array<Chunk>,
   writtenSymbols: Map<Symbol, number>,
   writtenModules: Map<ModuleKey, number>,
+  onError: (error: mixed) => void,
   flowing: boolean,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
+function defaultErrorHandler() {}
+
 export function createRequest(
   model: ReactModel,
   destination: Destination,
   bundlerConfig: BundlerConfig,
+  onError: (error: mixed) => void = defaultErrorHandler,
 ): Request {
   const pingedSegments = [];
   const request = {
@@ -107,6 +112,7 @@ export function createRequest(
     completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenModules: new Map(),
+    onError,
     flowing: false,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
@@ -413,6 +419,7 @@ export function resolveModelToJSON(
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
       } else {
+        reportError(request, x);
         // Something errored. We'll still send everything we have up until this point.
         // We'll replace this element with a lazy reference that throws on the client
         // once it gets rendered.
@@ -589,6 +596,15 @@ export function resolveModelToJSON(
   );
 }
 
+function reportError(request: Request, error: mixed): void {
+  request.onError(error);
+}
+
+function fatalError(request: Request, error: mixed): void {
+  // This is called outside error handling code such as if an error happens in React internals.
+  closeWithError(request.destination, error);
+}
+
 function emitErrorChunk(request: Request, id: number, error: mixed): void {
   // TODO: We should not leak error messages to the client in prod.
   // Give this an error code instead and log on the server.
@@ -654,6 +670,7 @@ function retrySegment(request: Request, segment: Segment): void {
       x.then(ping, ping);
       return;
     } else {
+      reportError(request, x);
       // This errored, we need to serialize this error to the
       emitErrorChunk(request, segment.id, x);
     }
@@ -666,18 +683,23 @@ function performWork(request: Request): void {
   ReactCurrentDispatcher.current = Dispatcher;
   currentCache = request.cache;
 
-  const pingedSegments = request.pingedSegments;
-  request.pingedSegments = [];
-  for (let i = 0; i < pingedSegments.length; i++) {
-    const segment = pingedSegments[i];
-    retrySegment(request, segment);
-  }
-  if (request.flowing) {
-    flushCompletedChunks(request);
+  try {
+    const pingedSegments = request.pingedSegments;
+    request.pingedSegments = [];
+    for (let i = 0; i < pingedSegments.length; i++) {
+      const segment = pingedSegments[i];
+      retrySegment(request, segment);
+    }
+    if (request.flowing) {
+      flushCompletedChunks(request);
+    }
+  } catch (error) {
+    reportError(request, error);
+    fatalError(request, error);
+  } finally {
+    ReactCurrentDispatcher.current = prevDispatcher;
+    currentCache = prevCache;
   }
-
-  ReactCurrentDispatcher.current = prevDispatcher;
-  currentCache = prevCache;
 }
 
 let reentrant = false;
@@ -749,7 +771,12 @@ export function startWork(request: Request): void {
 
 export function startFlowing(request: Request): void {
   request.flowing = true;
-  flushCompletedChunks(request);
+  try {
+    flushCompletedChunks(request);
+  } catch (error) {
+    reportError(request, error);
+    fatalError(request, error);
+  }
 }
 
 function unsupportedHook(): void {
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index b9a57c16eb27..4ff841bfc11b 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -126,4 +126,5 @@ export {
   writeChunk,
   completeWriting,
   close,
+  closeWithError,
 } from './ReactServerStreamConfig';

From 0853aab74dc8285401e62d1e490551ba3c96fd64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 29 Mar 2021 22:39:55 -0400
Subject: [PATCH 0383/1603] Log all errors to console.error by default (#21130)

---
 .../src/__tests__/ReactFlight-test.js         | 19 ++++++++++++++-----
 packages/react-server/src/ReactFizzServer.js  |  6 +++++-
 .../react-server/src/ReactFlightServer.js     |  4 +++-
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index e0947c68811d..4961cbcff72a 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -156,10 +156,15 @@ describe('ReactFlight', () => {
       return <div ref={ref} />;
     }
 
-    const event = ReactNoopFlightServer.render(<EventHandlerProp />);
-    const fn = ReactNoopFlightServer.render(<FunctionProp />);
-    const symbol = ReactNoopFlightServer.render(<SymbolProp />);
-    const refs = ReactNoopFlightServer.render(<RefProp />);
+    const options = {
+      onError() {
+        // ignore
+      },
+    };
+    const event = ReactNoopFlightServer.render(<EventHandlerProp />, options);
+    const fn = ReactNoopFlightServer.render(<FunctionProp />, options);
+    const symbol = ReactNoopFlightServer.render(<SymbolProp />, options);
+    const refs = ReactNoopFlightServer.render(<RefProp />, options);
 
     function Client({transport}) {
       return ReactNoopFlightClient.read(transport);
@@ -213,7 +218,11 @@ describe('ReactFlight', () => {
       );
     }
 
-    const data = ReactNoopFlightServer.render(<Server />);
+    const data = ReactNoopFlightServer.render(<Server />, {
+      onError(x) {
+        // ignore
+      },
+    });
 
     function Client({transport}) {
       return ReactNoopFlightClient.read(transport);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 739ba0c436aa..27ff2814ac10 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -142,13 +142,17 @@ type Request = {
 // 500 * 1024 / 8 * .8 * 0.5 / 2
 const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
 
+function defaultErrorHandler(error: mixed) {
+  console['error'](error); // Don't transform to our wrapper
+}
+
 export function createRequest(
   children: ReactNodeList,
   destination: Destination,
   responseState: ResponseState,
   rootContext: FormatContext,
   progressiveChunkSize: number = DEFAULT_PROGRESSIVE_CHUNK_SIZE,
-  onError: (error: mixed) => void = noop,
+  onError: (error: mixed) => void = defaultErrorHandler,
   onCompleteAll: () => void = noop,
   onReadyToStream: () => void = noop,
 ): Request {
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 2a09e21c89a0..d4fa3bd0623c 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -91,7 +91,9 @@ export type Request = {
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
-function defaultErrorHandler() {}
+function defaultErrorHandler(error: mixed) {
+  console['error'](error); // Don't transform to our wrapper
+}
 
 export function createRequest(
   model: ReactModel,

From 516b76b9ae177ecc38cc64ba33ddfc7cfe5f5a99 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 30 Mar 2021 16:08:50 +0100
Subject: [PATCH 0384/1603] [Fast Refresh] Support callthrough HOCs (#21104)

* [Fast Refresh] Support callthrough HOCs

* Add a newly failing testing to demonstrate the flaw

This shows why my initial approach doesn't make sense.

* Attach signatures at every nesting level

* Sign nested memo/forwardRef too

* Add an IIFE test

This is not a case that is important for Fast Refresh, but we shouldn't change the code semantics. This case shows the transform isn't quite correct. It's wrapping the call at the wrong place.

* Find HOCs above more precisely

This fixes a false positive that was causing an IIFE to be wrapped in the wrong place, which made the wrapping unsafe.

* Be defensive against non-components being passed to setSignature

* Fix lint
---
 .../src/ReactFreshBabelPlugin.js              |  49 +++-
 .../react-refresh/src/ReactFreshRuntime.js    |  86 ++++---
 .../__tests__/ReactFreshBabelPlugin-test.js   |  12 +
 .../__tests__/ReactFreshIntegration-test.js   | 221 ++++++++++++++++++
 .../ReactFreshBabelPlugin-test.js.snap        |  26 ++-
 5 files changed, 345 insertions(+), 49 deletions(-)

diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
index 4171893e41dd..64013db181a3 100644
--- a/packages/react-refresh/src/ReactFreshBabelPlugin.js
+++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -333,6 +333,38 @@ export default function(babel, opts = {}) {
     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();
@@ -630,13 +662,16 @@ export default function(babel, opts = {}) {
             // Result: let Foo = () => {}; __signature(Foo, ...);
           } else {
             // let Foo = hoc(() => {})
-            path.replaceWith(
-              t.callExpression(
-                sigCallID,
-                createArgumentsForSignature(node, signature, path.scope),
-              ),
-            );
-            // Result: let Foo = hoc(__signature(() => {}, ...))
+            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(() => {}, ...)), ...)
           }
         },
       },
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index 669eb7c1520f..a09222a07630 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -355,12 +355,25 @@ export function setSignature(
   getCustomHooks?: () => Array<Function>,
 ): void {
   if (__DEV__) {
-    allSignaturesByType.set(type, {
-      forceReset,
-      ownKey: key,
-      fullKey: null,
-      getCustomHooks: getCustomHooks || (() => []),
-    });
+    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.',
@@ -609,57 +622,58 @@ export function _getMountedRootCount() {
 // function Hello() {
 //   const [foo, setFoo] = useState(0);
 //   const value = useCustomHook();
-//   _s(); /* Second call triggers collecting the custom Hook list.
+//   _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>;
 // }
 //
-// /* First call specifies the signature: */
+// /* Call with arguments attaches the signature to the type: */
 // _s(
 //   Hello,
 //   'useState{[foo, setFoo]}(0)',
 //   () => [useCustomHook], /* Lazy to avoid triggering inline requires */
 // );
-type SignatureStatus = 'needsSignature' | 'needsCustomHooks' | 'resolved';
 export function createSignatureFunctionForTransform() {
   if (__DEV__) {
-    // We'll fill in the signature in two steps.
-    // First, we'll know the signature itself. This happens outside the component.
-    // Then, we'll know the references to custom Hooks. This happens inside the component.
-    // After that, the returned function will be a fast path no-op.
-    let status: SignatureStatus = 'needsSignature';
     let savedType;
     let hasCustomHooks;
+    let didCollectHooks = false;
     return function<T>(
       type: T,
       key: string,
       forceReset?: boolean,
       getCustomHooks?: () => Array<Function>,
-    ): T {
-      switch (status) {
-        case 'needsSignature':
-          if (type !== undefined) {
-            // If we received an argument, this is the initial registration call.
-            savedType = type;
-            hasCustomHooks = typeof getCustomHooks === 'function';
-            setSignature(type, key, forceReset, getCustomHooks);
-            // The next call we expect is from inside a function, to fill in the custom Hooks.
-            status = 'needsCustomHooks';
-          }
-          break;
-        case 'needsCustomHooks':
-          if (hasCustomHooks) {
-            collectCustomHooksForSignature(savedType);
-          }
-          status = 'resolved';
-          break;
-        case 'resolved':
-          // Do nothing. Fast path for all future renders.
-          break;
+    ): 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);
+        }
       }
-      return type;
     };
   } else {
     throw new Error(
diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
index 320cfe17041a..f56f16069dd7 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -524,4 +524,16 @@ describe('ReactFreshBabelPlugin', () => {
         '". 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();
+  });
 });
diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
index f3538670e371..231dd6b04219 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -469,6 +469,227 @@ describe('ReactFreshIntegration', () => {
       }
     });
 
+    it('resets state when renaming a state variable inside a HOC with direct call', () => {
+      if (__DEV__) {
+        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');
+
+        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');
+
+        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', () => {
+      if (__DEV__) {
+        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');
+
+        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', () => {
+      if (__DEV__) {
+        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');
+
+        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', () => {
+      if (__DEV__) {
+        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');
+
+        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', () => {
+      if (__DEV__) {
+        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');
+
+        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', () => {
       if (__DEV__) {
         render(`
diff --git a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
index 729996f49ea3..7c1276f81788 100644
--- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -37,11 +37,13 @@ const Bar = () => {
 _s4(Bar, "useContext{}");
 
 _c2 = Bar;
-const Baz = memo(_c3 = _s5(() => {
+
+const Baz = _s5(memo(_c3 = _s5(() => {
   _s5();
 
   return useContext(X);
-}, "useContext{}"));
+}, "useContext{}")), "useContext{}");
+
 _c4 = Baz;
 
 const Qux = () => {
@@ -84,6 +86,18 @@ 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$();
 
@@ -108,21 +122,21 @@ exports[`ReactFreshBabelPlugin generates signatures for function expressions cal
 var _s = $RefreshSig$(),
     _s2 = $RefreshSig$();
 
-export const A = React.memo(_c2 = React.forwardRef(_c = _s((props, ref) => {
+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{}")), "useState{[foo, setFoo](0)}\\nuseEffect{}");
 _c3 = A;
-export const B = React.memo(_c5 = React.forwardRef(_c4 = _s2(function (props, ref) {
+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{}")), "useState{[foo, setFoo](0)}\\nuseEffect{}");
 _c6 = B;
 
 function hoc() {

From c9aab1c9d00ce407b1c61c385b356d49cd147f60 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 30 Mar 2021 16:19:57 +0100
Subject: [PATCH 0385/1603] react-refresh@0.10.0

---
 packages/react-refresh/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 84b3d704ee9d..590bb19dea99 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "0.9.0",
+  "version": "0.10.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",

From b48b38af68c27fd401fe4b923a8fa0b229693cd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 31 Mar 2021 11:22:49 -0400
Subject: [PATCH 0386/1603] Support nesting of startTransition and flushSync
 (alt) (#21149)

* Support nesting of startTransition and flushSync

* Unset transition before entering any special execution contexts

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 .../src/events/ReactDOMEventListener.js       |  6 +++
 .../src/ReactFiberWorkLoop.new.js             | 22 ++++++++++
 .../src/ReactFiberWorkLoop.old.js             | 22 ++++++++++
 .../src/__tests__/ReactFlushSync-test.js      | 43 +++++++++++++++++++
 4 files changed, 93 insertions(+)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 3f00dcf305b3..f09d6ee86448 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -57,6 +57,9 @@ import {
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
 // TODO: can we stop exporting these?
 export let _enabled = true;
@@ -141,11 +144,14 @@ function dispatchContinuousEvent(
   nativeEvent,
 ) {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
+  ReactCurrentBatchConfig.transition = 0;
   try {
     setCurrentUpdatePriority(ContinuousEventPriority);
     dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 1cff8db1fe65..37fa324f5a1a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -240,6 +240,7 @@ const ceil = Math.ceil;
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
+  ReactCurrentBatchConfig,
   IsSomeRendererActing,
 } = ReactSharedInternals;
 
@@ -1072,11 +1073,14 @@ export function flushDiscreteUpdates() {
 
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
@@ -1118,11 +1122,14 @@ export function discreteUpdates<A, B, C, D, R>(
   d: D,
 ): R {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
@@ -1151,8 +1158,10 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
@@ -1161,6 +1170,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1182,12 +1192,15 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1681,10 +1694,13 @@ function commitRoot(root) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
+    ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
@@ -1797,6 +1813,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
+    const prevTransition = ReactCurrentBatchConfig.transition;
+    ReactCurrentBatchConfig.transition = 0;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -1882,6 +1900,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     // Reset the priority to the previous non-sync value.
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   } else {
     // No effects.
     root.current = finishedWork;
@@ -2019,12 +2038,15 @@ export function flushPassiveEffects(): boolean {
       DefaultEventPriority,
       lanesToEventPriority(pendingPassiveEffectsLanes),
     );
+    const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
+      ReactCurrentBatchConfig.transition = 0;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdatePriority(previousPriority);
+      ReactCurrentBatchConfig.transition = prevTransition;
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 98f4d119e408..f5102b96fe8b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -240,6 +240,7 @@ const ceil = Math.ceil;
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
+  ReactCurrentBatchConfig,
   IsSomeRendererActing,
 } = ReactSharedInternals;
 
@@ -1072,11 +1073,14 @@ export function flushDiscreteUpdates() {
 
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
@@ -1118,11 +1122,14 @@ export function discreteUpdates<A, B, C, D, R>(
   d: D,
 ): R {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
@@ -1151,8 +1158,10 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
@@ -1161,6 +1170,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1182,12 +1192,15 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1681,10 +1694,13 @@ function commitRoot(root) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
+    ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
@@ -1797,6 +1813,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
+    const prevTransition = ReactCurrentBatchConfig.transition;
+    ReactCurrentBatchConfig.transition = 0;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -1882,6 +1900,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     // Reset the priority to the previous non-sync value.
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   } else {
     // No effects.
     root.current = finishedWork;
@@ -2019,12 +2038,15 @@ export function flushPassiveEffects(): boolean {
       DefaultEventPriority,
       lanesToEventPriority(pendingPassiveEffectsLanes),
     );
+    const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
+      ReactCurrentBatchConfig.transition = 0;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdatePriority(previousPriority);
+      ReactCurrentBatchConfig.transition = prevTransition;
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index 3c96f5ee6591..bc7499a3d43a 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -3,6 +3,7 @@ let ReactNoop;
 let Scheduler;
 let useState;
 let useEffect;
+let startTransition;
 
 describe('ReactFlushSync', () => {
   beforeEach(() => {
@@ -13,6 +14,7 @@ describe('ReactFlushSync', () => {
     Scheduler = require('scheduler');
     useState = React.useState;
     useEffect = React.useEffect;
+    startTransition = React.unstable_startTransition;
   });
 
   function Text({text}) {
@@ -54,4 +56,45 @@ describe('ReactFlushSync', () => {
     });
     expect(root).toMatchRenderedOutput('1, 1');
   });
+
+  // @gate experimental
+  test('nested 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 root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['0, 0']);
+    expect(root).toMatchRenderedOutput('0, 0');
+
+    await ReactNoop.act(async () => {
+      ReactNoop.flushSync(() => {
+        startTransition(() => {
+          // This should be async even though flushSync is on the stack, because
+          // startTransition is closer.
+          setState(1);
+          ReactNoop.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
+      expect(Scheduler).toHaveYielded(['1, 0']);
+      expect(root).toMatchRenderedOutput('1, 0');
+    });
+    // Now the async update has flushed, too.
+    expect(Scheduler).toHaveYielded(['1, 1']);
+    expect(root).toMatchRenderedOutput('1, 1');
+  });
 });

From f8ef4ff571db3de73b0bfab566c1ce9d69c6582f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 31 Mar 2021 12:39:19 -0500
Subject: [PATCH 0387/1603] Flush discrete passive effects before paint
 (#21150)

If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
---
 .../src/ReactFiberWorkLoop.new.js             | 15 ++++
 .../src/ReactFiberWorkLoop.old.js             | 15 ++++
 .../src/__tests__/ReactFlushSync-test.js      | 69 +++++++++++++++++++
 .../ReactHooksWithNoopRenderer-test.js        |  7 +-
 .../__tests__/ReactProfiler-test.internal.js  | 11 ++-
 5 files changed, 108 insertions(+), 9 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 37fa324f5a1a..455067e47e26 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2015,6 +2015,21 @@ function commitRootImpl(root, renderPriorityLevel) {
     return null;
   }
 
+  // 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 (
+    includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
+    root.tag !== LegacyRoot
+  ) {
+    flushPassiveEffects();
+  }
+
   // If layout work was scheduled, flush it now.
   flushSyncCallbackQueue();
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index f5102b96fe8b..9d056a46402c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2015,6 +2015,21 @@ function commitRootImpl(root, renderPriorityLevel) {
     return null;
   }
 
+  // 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 (
+    includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
+    root.tag !== LegacyRoot
+  ) {
+    flushPassiveEffects();
+  }
+
   // If layout work was scheduled, flush it now.
   flushSyncCallbackQueue();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index bc7499a3d43a..6326aaa2aeab 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -97,4 +97,73 @@ describe('ReactFlushSync', () => {
     expect(Scheduler).toHaveYielded(['1, 1']);
     expect(root).toMatchRenderedOutput('1, 1');
   });
+
+  test('flushes passive effects synchronously when they are the result of a sync render', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Child',
+        // Because the pending effect was the result of a sync update, calling
+        // flushSync should flush it.
+        'Effect',
+      ]);
+      expect(root).toMatchRenderedOutput('Child');
+    });
+  });
+
+  test('do not flush passive effects synchronously in legacy mode', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createLegacyRoot();
+    await ReactNoop.act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Child',
+        // Because we're in legacy mode, we shouldn't have flushed the passive
+        // effects yet.
+      ]);
+      expect(root).toMatchRenderedOutput('Child');
+    });
+    // Effect flushes after paint.
+    expect(Scheduler).toHaveYielded(['Effect']);
+  });
+
+  test("do not flush passive effects synchronously when they aren't the result of a sync render", async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+      expect(Scheduler).toFlushUntilNextPaint([
+        'Child',
+        // Because the passive effect was not the result of a sync update, it
+        // should not flush before paint.
+      ]);
+      expect(root).toMatchRenderedOutput('Child');
+    });
+    // Effect flushes after paint.
+    expect(Scheduler).toHaveYielded(['Effect']);
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index cf4e4a3f3b61..973a0cbea81d 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -33,6 +33,7 @@ let useDeferredValue;
 let forwardRef;
 let memo;
 let act;
+let ContinuousEventPriority;
 
 describe('ReactHooksWithNoopRenderer', () => {
   beforeEach(() => {
@@ -57,6 +58,8 @@ describe('ReactHooksWithNoopRenderer', () => {
     useDeferredValue = React.unstable_useDeferredValue;
     Suspense = React.Suspense;
     act = ReactNoop.act;
+    ContinuousEventPriority = require('react-reconciler/constants')
+      .ContinuousEventPriority;
 
     textCache = new Map();
 
@@ -1351,10 +1354,10 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(Scheduler).toFlushAndYieldThrough(['Child one render']);
 
         // Schedule unmount for the parent that unmounts children with pending update.
-        ReactNoop.flushSync(() => {
+        ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
           setParentState(false);
         });
-        expect(Scheduler).toHaveYielded([
+        expect(Scheduler).toFlushUntilNextPaint([
           'Parent false render',
           'Parent false commit',
         ]);
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index ff2897141b57..ab7fbb73f025 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -3764,13 +3764,10 @@ describe('Profiler', () => {
               );
             });
 
-            // Profiler tag causes passive effects to be scheduled,
-            // so the interactions are still not completed.
-            expect(Scheduler).toHaveYielded(['SecondComponent']);
-            expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-            expect(Scheduler).toFlushAndYieldThrough(['onPostCommit']);
-
+            expect(Scheduler).toHaveYielded([
+              'SecondComponent',
+              'onPostCommit',
+            ]);
             expect(onInteractionTraced).toHaveBeenCalledTimes(2);
             expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(
               1,

From 0e96bdd4eefa0771fe1e7747bb79fd3c0e612b9c Mon Sep 17 00:00:00 2001
From: Lea Rosema <terabaud@gmail.com>
Date: Thu, 1 Apr 2021 00:13:13 +0200
Subject: [PATCH 0388/1603] Remove my deadname from AUTHORS (#21152)

---
 AUTHORS | 1 -
 1 file changed, 1 deletion(-)

diff --git a/AUTHORS b/AUTHORS
index a243f681bede..146796383fbe 100644
--- a/AUTHORS
+++ b/AUTHORS
@@ -608,7 +608,6 @@ Ludovico Fischer <livrerie@gmail.com>
 Luigy Leon <luichi.19@gmail.com>
 Luke Belliveau <luke.belliveau@gmail.com>
 Luke Horvat <lukehorvat@gmail.com>
-Lutz Rosema <terabaud@gmail.com>
 MICHAEL JACKSON <mjijackson@gmail.com>
 MIKAMI Yoshiyuki <yoshuki@saikyoline.jp>
 Maciej Kasprzyk <kapustka.maciek@gmail.com>

From b9e4c10e99940ceaff77e1f6f4cb0c747e91acff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 31 Mar 2021 20:39:38 -0400
Subject: [PATCH 0389/1603] [Fizz] Implement all the DOM attributes and special
 cases (#21153)

* Implement DOM format config structure

* Styles

* Input warnings

* Textarea special cases

* Select special cases

* Option special cases

We read the currently selected value from the FormatContext.

* Warning for non-lower case HTML

We don't change to lower case at runtime anymore but keep the warning.

* Pre tags innerHTML needs to be prefixed

This is because if you do the equivalent on the client using innerHTML,
this is the effect you'd get.

* Extract errors
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |    2 +-
 .../src/server/ReactDOMServerFormatConfig.js  | 1158 ++++++++++++++++-
 .../server/ReactNativeServerFormatConfig.js   |    6 +-
 .../src/ReactNoopServer.js                    |    5 +-
 packages/react-server/src/ReactFizzServer.js  |   10 +-
 scripts/error-codes/codes.json                |    5 +-
 6 files changed, 1142 insertions(+), 44 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 31b1f437c987..0b69bf72231a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -428,7 +428,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     function AsyncCol({className}) {
-      return <col className={readText(className)}>{[]}</col>;
+      return <col className={readText(className)} />;
     }
 
     function AsyncPath({id}) {
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index d42e92aa1e2b..ae7f80f045fe 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -7,6 +7,12 @@
  * @flow
  */
 
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {Children} from 'react';
+
+import {enableFilterEmptyStringAttributesDOM} from 'shared/ReactFeatureFlags';
+
 import type {
   Destination,
   Chunk,
@@ -19,8 +25,29 @@ import {
   stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
+import {
+  getPropertyInfo,
+  isAttributeNameSafe,
+  BOOLEAN,
+  OVERLOADED_BOOLEAN,
+  NUMERIC,
+  POSITIVE_NUMERIC,
+} from '../shared/DOMProperty';
+import {isUnitlessNumber} from '../shared/CSSProperty';
+
+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 escapeTextForBrowser from './escapeTextForBrowser';
+import hyphenateStyleName from '../shared/hyphenateStyleName';
 import invariant from 'shared/invariant';
+import sanitizeURL from '../shared/sanitizeURL';
+
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+const isArray = Array.isArray;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
@@ -68,7 +95,7 @@ type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 // 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, // the selected value(s) inside a <select>, or null outside <select>
+  selectedValue: null | string | Array<string>, // the selected value(s) inside a <select>, or null outside <select>
 };
 
 function createFormatContext(
@@ -142,10 +169,6 @@ export function createSuspenseBoundaryID(
   return {formattedID: null};
 }
 
-function encodeHTMLIDAttribute(value: string): string {
-  return escapeTextForBrowser(value);
-}
-
 function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
@@ -202,53 +225,1088 @@ export function pushTextInstance(
   target.push(stringToChunk(encodeHTMLTextNode(text)), textSeparator);
 }
 
-const startTag1 = stringToPrecomputedChunk('<');
-const startTag2 = stringToPrecomputedChunk('>');
+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 pushStyle(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  style: Object,
+): void {
+  invariant(
+    typeof style === 'object',
+    '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));
+      valueChunk = stringToChunk(
+        escapeTextForBrowser(('' + styleValue).trim()),
+      );
+    } else {
+      if (__DEV__) {
+        warnValidStyle(styleName, styleValue);
+      }
+
+      nameChunk = processStyleName(styleName);
+      if (typeof styleValue === 'number') {
+        if (
+          styleValue !== 0 &&
+          !hasOwnProperty.call(isUnitlessNumber, styleName)
+        ) {
+          valueChunk = stringToChunk(styleValue + 'px'); // Presumes implicit 'px' suffix for unitless numbers
+        } else {
+          valueChunk = stringToChunk('' + styleValue);
+        }
+      } else {
+        valueChunk = stringToChunk(('' + 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 pushAttribute(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  name: string,
+  value: string | boolean | number | Function | Object, // not null or undefined
+): void {
+  switch (name) {
+    case 'style': {
+      pushStyle(target, responseState, value);
+      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':
+      // Ignored. These are built-in to React on the client.
+      return;
+  }
+  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 propertyInfo = getPropertyInfo(name);
+  if (propertyInfo !== null) {
+    // shouldRemoveAttribute
+    switch (typeof value) {
+      case 'function':
+      // $FlowIssue symbol is perfectly valid here
+      case 'symbol': // eslint-disable-line
+        return;
+      case 'boolean': {
+        if (!propertyInfo.acceptsBooleans) {
+          return;
+        }
+      }
+    }
+    if (enableFilterEmptyStringAttributesDOM) {
+      if (propertyInfo.removeEmptyString && 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;
+      }
+    }
+
+    const attributeName = propertyInfo.attributeName;
+    const attributeNameChunk = stringToChunk(attributeName); // TODO: If it's known we can cache the chunk.
+
+    switch (propertyInfo.type) {
+      case BOOLEAN:
+        if (value) {
+          target.push(
+            attributeSeparator,
+            attributeNameChunk,
+            attributeEmptyString,
+          );
+        }
+        return;
+      case OVERLOADED_BOOLEAN:
+        if (value === true) {
+          target.push(
+            attributeSeparator,
+            attributeNameChunk,
+            attributeEmptyString,
+          );
+        } else if (value === false) {
+          // Ignored
+        } else {
+          target.push(
+            attributeSeparator,
+            attributeNameChunk,
+            attributeAssign,
+            escapeTextForBrowser(value),
+            attributeEnd,
+          );
+        }
+        return;
+      case NUMERIC:
+        if (!isNaN(value)) {
+          target.push(
+            attributeSeparator,
+            attributeNameChunk,
+            attributeAssign,
+            escapeTextForBrowser(value),
+            attributeEnd,
+          );
+        }
+        break;
+      case POSITIVE_NUMERIC:
+        if (!isNaN(value) && (value: any) >= 1) {
+          target.push(
+            attributeSeparator,
+            attributeNameChunk,
+            attributeAssign,
+            escapeTextForBrowser(value),
+            attributeEnd,
+          );
+        }
+        break;
+      default:
+        if (propertyInfo.sanitizeURL) {
+          value = '' + (value: any);
+          sanitizeURL(value);
+        }
+        target.push(
+          attributeSeparator,
+          attributeNameChunk,
+          attributeAssign,
+          escapeTextForBrowser(value),
+          attributeEnd,
+        );
+    }
+  } else if (isAttributeNameSafe(name)) {
+    // shouldRemoveAttribute
+    switch (typeof value) {
+      case 'function':
+      // $FlowIssue symbol is perfectly valid here
+      case 'symbol': // eslint-disable-line
+        return;
+      case 'boolean': {
+        const prefix = name.toLowerCase().slice(0, 5);
+        if (prefix !== 'data-' && prefix !== 'aria-') {
+          return;
+        }
+      }
+    }
+    target.push(
+      attributeSeparator,
+      stringToChunk(name),
+      attributeAssign,
+      escapeTextForBrowser(value),
+      attributeEnd,
+    );
+  }
+}
+
+const endOfStartTag = stringToPrecomputedChunk('>');
+const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
 
 const idAttr = stringToPrecomputedChunk(' id="');
 const attrEnd = stringToPrecomputedChunk('"');
 
-export function pushStartInstance(
+function pushID(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  assignID: SuspenseBoundaryID,
+  existingID: mixed,
+): void {
+  if (
+    existingID !== null &&
+    existingID !== undefined &&
+    (typeof existingID === 'string' || typeof existingID === 'object')
+  ) {
+    // We can reuse the existing ID for our purposes.
+    assignID.formattedID = stringToPrecomputedChunk(
+      escapeTextForBrowser(existingID),
+    );
+  } else {
+    const encodedID = assignAnID(responseState, assignID);
+    target.push(idAttr, encodedID, attrEnd);
+  }
+}
+
+function pushInnerHTML(
+  target: Array<Chunk | PrecomputedChunk>,
+  innerHTML,
+  children,
+) {
+  if (innerHTML != null) {
+    invariant(
+      children == null,
+      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+    );
+
+    invariant(
+      typeof innerHTML === 'object' && '__html' in innerHTML,
+      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+        'for more information.',
+    );
+    const html = innerHTML.__html;
+    target.push(stringToChunk(html));
+  }
+}
+
+// TODO: Move these to ResponseState 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 didWarnSelectedSetOnOption = false;
+
+function checkSelectProp(props, propName) {
+  if (__DEV__) {
+    const array = isArray(props[propName]);
+    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 pushStartSelect(
   target: Array<Chunk | PrecomputedChunk>,
-  type: string,
   props: Object,
   responseState: ResponseState,
   assignID: null | SuspenseBoundaryID,
-): void {
-  // TODO: Figure out if it's self closing and everything else.
-  if (assignID !== null) {
-    let encodedID;
-    if (typeof props.id === 'string') {
-      // We can reuse the existing ID for our purposes.
-      encodedID = assignID.formattedID = stringToPrecomputedChunk(
-        encodeHTMLIDAttribute(props.id),
+): 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://reactjs.org/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, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  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'
+      ) {
+        didWarnInvalidOptionChildren = true;
+        console.error(
+          'Only strings and numbers are supported as <option> children.',
+        );
+      }
+    }
+  });
+  return content;
+}
+
+const selectedMarkerAttribute = stringToPrecomputedChunk(' selected=""');
+
+function pushStartOption(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  responseState: ResponseState,
+  formatContext: FormatContext,
+  assignID: null | SuspenseBoundaryID,
+): ReactNodeList {
+  const selectedValue = formatContext.selectedValue;
+
+  target.push(startChunkForTag('option'));
+
+  let children = null;
+  let value = null;
+  let selected = 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 'value':
+          value = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          invariant(
+            false,
+            '`dangerouslySetInnerHTML` does not work on <option>.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          pushAttribute(target, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  if (selectedValue !== null) {
+    let stringValue;
+    if (value !== null) {
+      stringValue = '' + value;
     } else {
-      encodedID = assignAnID(responseState, assignID);
+      stringValue = children = flattenOptionChildren(children);
     }
-    target.push(
-      startTag1,
-      stringToChunk(type),
-      idAttr,
-      encodedID,
-      attrEnd,
-      startTag2,
+    if (isArray(selectedValue)) {
+      // multiple
+      for (let i = 0; i < selectedValue.length; i++) {
+        const v = '' + selectedValue[i];
+        if (v === stringValue) {
+          target.push(selectedMarkerAttribute);
+          break;
+        }
+      }
+    } else if (selectedValue === stringValue) {
+      target.push(selectedMarkerAttribute);
+    }
+  } else if (selected) {
+    target.push(selectedMarkerAttribute);
+  }
+
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  target.push(endOfStartTag);
+  return children;
+}
+
+function pushInput(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): ReactNodeList {
+  if (__DEV__) {
+    checkControlledValueProps('input', props);
+
+    if (
+      props.checked !== undefined &&
+      props.defaultChecked !== undefined &&
+      !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://reactjs.org/link/controlled-components',
+        'A component',
+        props.type,
+      );
+      didWarnDefaultChecked = true;
+    }
+    if (
+      props.value !== undefined &&
+      props.defaultValue !== undefined &&
+      !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://reactjs.org/link/controlled-components',
+        'A component',
+        props.type,
+      );
+      didWarnDefaultInputValue = true;
+    }
+  }
+
+  target.push(startChunkForTag('input'));
+
+  for (const propKey in props) {
+    if (hasOwnProperty.call(props, propKey)) {
+      const propValue = props[propKey];
+      if (propValue == null) {
+        continue;
+      }
+      switch (propKey) {
+        case 'children':
+        case 'dangerouslySetInnerHTML':
+          invariant(
+            false,
+            '%s is a self-closing tag and must neither have `children` nor ' +
+              'use `dangerouslySetInnerHTML`.',
+            'input',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        case 'defaultChecked':
+          // Previously "checked" would win but now it's enumeration order dependent.
+          // There's a warning in either case.
+          pushAttribute(target, responseState, 'checked', propValue);
+          break;
+        case 'defaultValue':
+          // Previously "value" would win but now it's enumeration order dependent.
+          // There's a warning in either case.
+          pushAttribute(target, responseState, 'value', propValue);
+          break;
+        default:
+          pushAttribute(target, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  target.push(endOfStartTagSelfClosing);
+  return null;
+}
+
+function pushStartTextArea(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): 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://reactjs.org/link/controlled-components',
+      );
+      didWarnDefaultTextareaValue = true;
+    }
+  }
+
+  target.push(startChunkForTag('textarea'));
+
+  let value = 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':
+        case 'defaultValue':
+          // Previously "checked" would win but now it's enumeration order dependent.
+          // There's a warning in either case.
+          value = propValue;
+          break;
+        case 'dangerouslySetInnerHTML':
+          invariant(
+            false,
+            '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          pushAttribute(target, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  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>.',
+      );
+    }
+    invariant(
+      value == null,
+      'If you supply `defaultValue` on a <textarea>, do not pass children.',
     );
-  } else {
-    target.push(startTag1, stringToChunk(type));
-    if (props.className) {
-      target.push(
-        stringToChunk(
-          ' class="' + encodeHTMLIDAttribute(props.className) + '"',
-        ),
+    if (isArray(children)) {
+      invariant(
+        children.length <= 1,
+        '<textarea> can only have at most one child.',
       );
+      value = '' + children[0];
     }
-    if (props.id) {
-      target.push(
-        stringToChunk(' id="' + encodeHTMLIDAttribute(props.id) + '"'),
+    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);
+  }
+
+  return value;
+}
+
+function pushSelfClosing(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): ReactNodeList {
+  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':
+          invariant(
+            false,
+            '%s is a self-closing tag and must neither have `children` nor ' +
+              'use `dangerouslySetInnerHTML`.',
+            tag,
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          pushAttribute(target, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  target.push(endOfStartTagSelfClosing);
+  return null;
+}
+
+function pushStartMenuItem(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): 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':
+          invariant(
+            false,
+            'menuitems cannot have `children` nor `dangerouslySetInnerHTML`.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          pushAttribute(target, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  target.push(endOfStartTag);
+  return null;
+}
+
+function pushStartGenericElement(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): 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, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  return children;
+}
+
+function pushStartCustomElement(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): 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;
+        case 'style':
+          pushStyle(target, responseState, propValue);
+          break;
+        case 'suppressContentEditableWarning':
+        case 'suppressHydrationWarning':
+          // Ignored. These are built-in to React on the client.
+          break;
+        default:
+          if (isAttributeNameSafe(propKey)) {
+            target.push(
+              attributeSeparator,
+              stringToChunk(propKey),
+              attributeAssign,
+              escapeTextForBrowser(propValue),
+              attributeEnd,
+            );
+          }
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
+  return children;
+}
+
+const leadingNewline = stringToPrecomputedChunk('\n');
+
+function pushStartPreformattedElement(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): 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, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  if (assignID !== null) {
+    pushID(target, responseState, assignID, props.id);
+  }
+
+  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) {
+    invariant(
+      children == null,
+      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+    );
+
+    invariant(
+      typeof innerHTML === 'object' && '__html' in innerHTML,
+      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+        'for more information.',
+    );
+    const html = innerHTML.__html;
+    if (typeof html === 'string' && html[0] === '\n') {
+      target.push(leadingNewline);
+    }
+    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();
+function startChunkForTag(tag: string): PrecomputedChunk {
+  let tagStartChunk = validatedTagCache.get(tag);
+  if (tagStartChunk === undefined) {
+    invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);
+    tagStartChunk = stringToPrecomputedChunk('<' + tag);
+    validatedTagCache.set(tag, tagStartChunk);
+  }
+  return tagStartChunk;
+}
+
+export function pushStartInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  type: string,
+  props: Object,
+  responseState: ResponseState,
+  formatContext: FormatContext,
+  assignID: null | SuspenseBoundaryID,
+): 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.toLowerCase() !== type) {
+        console.error(
+          '<%s /> is using incorrect casing. ' +
+            'Use PascalCase for React components, ' +
+            'or lowercase for HTML elements.',
+          type,
+        );
+      }
+    }
+  }
+
+  switch (type) {
+    // Special tags
+    case 'select':
+      return pushStartSelect(target, props, responseState, assignID);
+    case 'option':
+      return pushStartOption(
+        target,
+        props,
+        responseState,
+        formatContext,
+        assignID,
+      );
+    case 'textarea':
+      return pushStartTextArea(target, props, responseState, assignID);
+    case 'input':
+      return pushInput(target, props, responseState, assignID);
+    case 'menuitem':
+      return pushStartMenuItem(target, props, responseState, assignID);
+    // Newline eating tags
+    case 'listing':
+    case 'pre': {
+      return pushStartPreformattedElement(
+        target,
+        props,
+        type,
+        responseState,
+        assignID,
+      );
+    }
+    // Omitted close tags
+    case 'area':
+    case 'base':
+    case 'br':
+    case 'col':
+    case 'embed':
+    case 'hr':
+    case 'img':
+    case 'keygen':
+    case 'link':
+    case 'meta':
+    case 'param':
+    case 'source':
+    case 'track':
+    case 'wbr': {
+      return pushSelfClosing(target, props, type, responseState, assignID);
+    }
+    // These are reserved SVG and MathML elements, that are never custom elements.
+    // https://w3c.github.io/webcomponents/spec/custom/#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 pushStartGenericElement(
+        target,
+        props,
+        type,
+        responseState,
+        assignID,
       );
     }
-    target.push(startTag2);
+    default: {
+      if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
+        // Generic element
+        return pushStartGenericElement(
+          target,
+          props,
+          type,
+          responseState,
+          assignID,
+        );
+      } else {
+        // Custom element
+        return pushStartCustomElement(
+          target,
+          props,
+          type,
+          responseState,
+          assignID,
+        );
+      }
+    }
   }
 }
 
@@ -260,8 +1318,32 @@ export function pushEndInstance(
   type: string,
   props: Object,
 ): void {
-  // TODO: Figure out if it was self closing.
-  target.push(endTag1, stringToChunk(type), endTag2);
+  switch (type) {
+    // 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.
+    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.
+      break;
+    }
+    default: {
+      target.push(endTag1, stringToChunk(type), endTag2);
+    }
+  }
 }
 
 // Structural Nodes
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 102ee87f05d5..40ab6b84b26a 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactNodeList} from 'shared/ReactTypes';
+
 import type {
   Destination,
   Chunk,
@@ -134,14 +136,16 @@ export function pushStartInstance(
   type: string,
   props: Object,
   responseState: ResponseState,
+  formatContext: FormatContext,
   assignID: null | SuspenseBoundaryID,
-): void {
+): ReactNodeList {
   target.push(
     INSTANCE,
     stringToChunk(type),
     END, // Null terminated type string
     // TODO: props
   );
+  return props.children;
 }
 
 export function pushEndInstance(
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 548a004bd7ae..1f10b6aedd4f 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -14,6 +14,8 @@
  * environment.
  */
 
+import type {ReactNodeList} from 'shared/ReactTypes';
+
 import ReactFizzServer from 'react-server';
 
 type Instance = {|
@@ -97,7 +99,7 @@ const ReactNoopServer = ReactFizzServer({
     target: Array<Uint8Array>,
     type: string,
     props: Object,
-  ): void {
+  ): ReactNodeList {
     const instance: Instance = {
       type: type,
       children: [],
@@ -105,6 +107,7 @@ const ReactNoopServer = ReactFizzServer({
       hidden: false,
     };
     target.push(Buffer.from(JSON.stringify(instance), 'utf8'));
+    return props.children;
   },
 
   pushEndInstance(
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 27ff2814ac10..df5d4858bc6f 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -302,6 +302,11 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     return;
   }
 
+  if (node === null) {
+    pushEmpty(task.blockedSegment.chunks, request.responseState, task.assignID);
+    return;
+  }
+
   if (
     typeof node !== 'object' ||
     !node ||
@@ -347,18 +352,19 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     }
   } else if (typeof type === 'string') {
     const segment = task.blockedSegment;
-    pushStartInstance(
+    const children = pushStartInstance(
       segment.chunks,
       type,
       props,
       request.responseState,
+      segment.formatContext,
       task.assignID,
     );
     // We must have assigned it already above so we don't need this anymore.
     task.assignID = null;
     const prevContext = segment.formatContext;
     segment.formatContext = getChildFormatContext(prevContext, type, props);
-    renderNode(request, task, props.children);
+    renderNode(request, task, children);
     // 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.
     segment.formatContext = prevContext;
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 3c5fd25853f7..17c28c3bc701 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -385,5 +385,8 @@
   "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."
+  "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`."
 }

From 9ed01679453c7cb3c65e57f78d32c63e30a984f7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 31 Mar 2021 21:00:22 -0400
Subject: [PATCH 0390/1603] Don't lower case HTML tags in comparison for
 built-ins (#21155)

---
 packages/react-dom/src/__tests__/ReactDOMComponent-test.js | 5 +++--
 packages/react-dom/src/server/ReactPartialRenderer.js      | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index b064540a8ddf..2911099e8e93 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -1221,7 +1221,7 @@ describe('ReactDOMComponent', () => {
       }
     });
 
-    it('should not duplicate uppercased selfclosing tags', () => {
+    it('should warn for uppercased selfclosing tags', () => {
       class Container extends React.Component {
         render() {
           return React.createElement('BR', null);
@@ -1237,7 +1237,8 @@ describe('ReactDOMComponent', () => {
           'Use PascalCase for React components, ' +
           'or lowercase for HTML elements.',
       );
-      expect(returnedValue).not.toContain('</BR>');
+      // 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', () => {
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 1e536e5cdd49..92cd79fde30c 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1324,7 +1324,7 @@ class ReactDOMServerRenderer {
     context: Object,
     parentNamespace: string,
   ): string {
-    const tag = element.type.toLowerCase();
+    const tag = element.type;
 
     let namespace = parentNamespace;
     if (parentNamespace === HTML_NAMESPACE) {
@@ -1335,7 +1335,7 @@ class ReactDOMServerRenderer {
       if (namespace === HTML_NAMESPACE) {
         // Should this check be gated by parent namespace? Not sure we want to
         // allow <SVG> or <mATH>.
-        if (tag !== element.type) {
+        if (tag.toLowerCase() !== element.type) {
           console.error(
             '<%s /> is using incorrect casing. ' +
               'Use PascalCase for React components, ' +

From 588db2e1fc1355cbd0c587a5c4ada331486fcd7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 31 Mar 2021 21:10:27 -0400
Subject: [PATCH 0391/1603] Don't warn for casing if it's a custom element
 (#21156)

This replicates what we do on the client.
---
 packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 6 +++++-
 packages/react-dom/src/server/ReactPartialRenderer.js       | 6 ++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index ae7f80f045fe..2a034963f48a 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1211,7 +1211,11 @@ export function pushStartInstance(
       formatContext.insertionMode !== SVG_MODE &&
       formatContext.insertionMode !== MATHML_MODE
     ) {
-      if (type.toLowerCase() !== type) {
+      if (
+        type.indexOf('-') === -1 &&
+        typeof props.is !== 'string' &&
+        type.toLowerCase() !== type
+      ) {
         console.error(
           '<%s /> is using incorrect casing. ' +
             'Use PascalCase for React components, ' +
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 92cd79fde30c..82296a933775 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1331,11 +1331,14 @@ class ReactDOMServerRenderer {
       namespace = getIntrinsicNamespace(tag);
     }
 
+    let props = element.props;
+
     if (__DEV__) {
       if (namespace === HTML_NAMESPACE) {
+        const isCustomComponent = isCustomComponentFn(tag, props);
         // Should this check be gated by parent namespace? Not sure we want to
         // allow <SVG> or <mATH>.
-        if (tag.toLowerCase() !== element.type) {
+        if (!isCustomComponent && tag.toLowerCase() !== element.type) {
           console.error(
             '<%s /> is using incorrect casing. ' +
               'Use PascalCase for React components, ' +
@@ -1348,7 +1351,6 @@ class ReactDOMServerRenderer {
 
     validateDangerousTag(tag);
 
-    let props = element.props;
     if (tag === 'input') {
       if (__DEV__) {
         checkControlledValueProps('input', props);

From a423a01223785a8bc4dcd55f2a0288200b033eee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 31 Mar 2021 21:17:42 -0400
Subject: [PATCH 0392/1603] Ignore function and symbol values on
 custom-elements on the server (#21157)

---
 packages/react-dom/src/server/DOMMarkupOperations.js       | 7 ++++++-
 .../react-dom/src/server/ReactDOMServerFormatConfig.js     | 6 +++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/server/DOMMarkupOperations.js b/packages/react-dom/src/server/DOMMarkupOperations.js
index 7306d9393be5..3cddbb493e07 100644
--- a/packages/react-dom/src/server/DOMMarkupOperations.js
+++ b/packages/react-dom/src/server/DOMMarkupOperations.js
@@ -71,7 +71,12 @@ export function createMarkupForCustomAttribute(
   name: string,
   value: mixed,
 ): string {
-  if (!isAttributeNameSafe(name) || value == null) {
+  if (
+    !isAttributeNameSafe(name) ||
+    value == null ||
+    typeof value === 'function' ||
+    typeof value === 'symbol'
+  ) {
     return '';
   }
   return name + '=' + quoteAttributeValueForBrowser(value);
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 2a034963f48a..62f6d3ca5655 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1070,7 +1070,11 @@ function pushStartCustomElement(
           // Ignored. These are built-in to React on the client.
           break;
         default:
-          if (isAttributeNameSafe(propKey)) {
+          if (
+            isAttributeNameSafe(propKey) &&
+            typeof propValue !== 'function' &&
+            typeof propValue !== 'symbol'
+          ) {
             target.push(
               attributeSeparator,
               stringToChunk(propKey),

From 1cf9978d897334d09edac0782ebfb4eca4f3f406 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 1 Apr 2021 11:43:12 -0400
Subject: [PATCH 0393/1603] Don't pass internals to callbacks (#21161)

I noticed that I accidentally pass the request object to public API callbacks
as "this".
---
 packages/react-server/src/ReactFizzServer.js   | 15 ++++++++++-----
 packages/react-server/src/ReactFlightServer.js |  3 ++-
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index df5d4858bc6f..66a6c9238ab3 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -263,7 +263,8 @@ function createPendingSegment(
 function reportError(request: Request, error: mixed): void {
   // 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.
-  request.onError(error);
+  const onError = request.onError;
+  onError(error);
 }
 
 function fatalError(request: Request, error: mixed): void {
@@ -485,7 +486,8 @@ function erroredTask(
 
   request.allPendingTasks--;
   if (request.allPendingTasks === 0) {
-    request.onCompleteAll();
+    const onCompleteAll = request.onCompleteAll;
+    onCompleteAll();
   }
 }
 
@@ -532,7 +534,8 @@ function abortTask(task: Task): void {
     }
 
     if (request.allPendingTasks === 0) {
-      request.onCompleteAll();
+      const onCompleteAll = request.onCompleteAll;
+      onCompleteAll();
     }
   }
 }
@@ -552,7 +555,8 @@ function finishedTask(
     }
     request.pendingRootTasks--;
     if (request.pendingRootTasks === 0) {
-      request.onReadyToStream();
+      const onReadyToStream = request.onReadyToStream;
+      onReadyToStream();
     }
   } else {
     boundary.pendingTasks--;
@@ -593,7 +597,8 @@ function finishedTask(
   if (request.allPendingTasks === 0) {
     // This needs to be called at the very end so that we can synchronously write the result
     // in the callback if needed.
-    request.onCompleteAll();
+    const onCompleteAll = request.onCompleteAll;
+    onCompleteAll();
   }
 }
 
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index d4fa3bd0623c..dfbe3c55f9b6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -599,7 +599,8 @@ export function resolveModelToJSON(
 }
 
 function reportError(request: Request, error: mixed): void {
-  request.onError(error);
+  const onError = request.onError;
+  onError(error);
 }
 
 function fatalError(request: Request, error: mixed): void {

From 2c9fef32db5c9a342a1a60c34217ffc9ae087fbb Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Thu, 1 Apr 2021 20:35:10 +0430
Subject: [PATCH 0394/1603] Remove redundant initial of hasOwnProperty (#21134)

* remove redundant initial of hasOwnProperty

* remove redundant initial of hasOwnProperty part 2

* remove redundant initial of hasOwnProperty part 3
---
 packages/react-dom/src/client/ReactDOMComponent.js   |  3 ++-
 .../src/server/ReactDOMServerFormatConfig.js         |  2 +-
 .../react-dom/src/server/ReactPartialRenderer.js     |  2 +-
 packages/react-dom/src/shared/DOMProperty.js         |  2 +-
 .../react-dom/src/shared/ReactDOMInvalidARIAHook.js  |  3 +--
 .../src/shared/ReactDOMUnknownPropertyHook.js        |  2 +-
 .../src/ReactFlightDOMRelayServerHostConfig.js       |  4 ++--
 .../src/ReactFlightNativeRelayServerHostConfig.js    |  4 +---
 packages/react/src/ReactElement.js                   |  3 +--
 packages/react/src/ReactElementValidator.js          |  3 +--
 packages/react/src/jsx/ReactJSXElement.js            |  4 +---
 packages/react/src/jsx/ReactJSXElementValidator.js   |  4 +---
 packages/shared/checkPropTypes.js                    |  3 ++-
 packages/shared/hasOwnProperty.js                    | 12 ++++++++++++
 packages/shared/shallowEqual.js                      |  3 +--
 15 files changed, 29 insertions(+), 25 deletions(-)
 create mode 100644 packages/shared/hasOwnProperty.js

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 0356f6dc8ff4..095512b75b75 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -13,6 +13,7 @@ import {
 } from '../events/EventRegistry';
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 import {
   getValueForAttribute,
@@ -443,7 +444,7 @@ export function createElement(
         !isCustomComponentTag &&
         Object.prototype.toString.call(domElement) ===
           '[object HTMLUnknownElement]' &&
-        !Object.prototype.hasOwnProperty.call(warnedUnknownTags, type)
+        !hasOwnProperty.call(warnedUnknownTags, type)
       ) {
         warnedUnknownTags[type] = true;
         console.error(
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 62f6d3ca5655..2988e9a58833 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -44,9 +44,9 @@ import warnValidStyle from '../shared/warnValidStyle';
 import escapeTextForBrowser from './escapeTextForBrowser';
 import hyphenateStyleName from '../shared/hyphenateStyleName';
 import invariant from 'shared/invariant';
+import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
 const isArray = Array.isArray;
 
 // Per response, global state that is not contextual to the rendering subtree.
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 82296a933775..4d2aeb5b38f8 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -77,6 +77,7 @@ import warnValidStyle from '../shared/warnValidStyle';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 export type ServerOptions = {
   identifierPrefix?: string,
@@ -340,7 +341,6 @@ function flattenOptionChildren(children: mixed): ?string {
   return content;
 }
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
 const STYLE = 'style';
 const RESERVED_PROPS = {
   children: null,
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 3bf0fb5de2c0..92adf041d196 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -8,6 +8,7 @@
  */
 
 import {enableFilterEmptyStringAttributesDOM} from 'shared/ReactFeatureFlags';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
@@ -67,7 +68,6 @@ export const VALID_ATTRIBUTE_NAME_REGEX = new RegExp(
   '^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$',
 );
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
 const illegalAttributeNameCache = {};
 const validatedAttributeNameCache = {};
 
diff --git a/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js b/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js
index 89cc3f271fbb..f665b275ba5b 100644
--- a/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js
+++ b/packages/react-dom/src/shared/ReactDOMInvalidARIAHook.js
@@ -8,13 +8,12 @@
 import {ATTRIBUTE_NAME_CHAR} from './DOMProperty';
 import isCustomComponent from './isCustomComponent';
 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 + ']*$');
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 function validateProperty(tagName, name) {
   if (__DEV__) {
     if (hasOwnProperty.call(warnedProperties, name) && warnedProperties[name]) {
diff --git a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
index ad4be4b5fdea..5070b844eb81 100644
--- a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
@@ -14,12 +14,12 @@ import {
 } from './DOMProperty';
 import isCustomComponent from './isCustomComponent';
 import possibleStandardNames from './possibleStandardNames';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 let validateProperty = () => {};
 
 if (__DEV__) {
   const warnedProperties = {};
-  const hasOwnProperty = Object.prototype.hasOwnProperty;
   const EVENT_NAME_REGEX = /^on./;
   const INVALID_EVENT_NAME_REGEX = /^on[^A-Z]/;
   const rARIA = new RegExp('^(aria)-[' + ATTRIBUTE_NAME_CHAR + ']*$');
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 7ebcaf6b1e8d..a4d0d26fcce1 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -13,6 +13,8 @@ import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 
 import JSResourceReference from 'JSResourceReference';
 
+import hasOwnProperty from 'shared/hasOwnProperty';
+
 export type ModuleReference<T> = JSResourceReference<T>;
 
 import type {
@@ -72,8 +74,6 @@ export function processErrorChunk(
   ];
 }
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 function convertModelToJSON(
   request: Request,
   parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 8bf0cdf8b41e..4fa871b0c4e8 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -10,7 +10,7 @@
 import type {RowEncoding, JSONValue} from './ReactFlightNativeRelayProtocol';
 
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
-
+import hasOwnProperty from 'shared/hasOwnProperty';
 import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 export type ModuleReference<T> = JSResourceReferenceImpl<T>;
@@ -72,8 +72,6 @@ export function processErrorChunk(
   ];
 }
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 function convertModelToJSON(
   request: Request,
   parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 9747e0da1a12..75017cba37ae 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -8,11 +8,10 @@
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 const RESERVED_PROPS = {
   key: true,
   ref: true,
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index 1ee89ef14217..2c14bef6c020 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -33,6 +33,7 @@ import {
 } from './ReactElement';
 import {setExtraStackFrame} from './ReactDebugCurrentFrame';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 function setCurrentlyValidatingElement(element) {
   if (__DEV__) {
@@ -56,8 +57,6 @@ if (__DEV__) {
   propTypesMisspellWarningShown = false;
 }
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 function getDeclarationErrorAddendum() {
   if (ReactCurrentOwner.current) {
     const name = getComponentNameFromType(ReactCurrentOwner.current.type);
diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js
index ccf2c6e2a400..e87a969712e1 100644
--- a/packages/react/src/jsx/ReactJSXElement.js
+++ b/packages/react/src/jsx/ReactJSXElement.js
@@ -7,13 +7,11 @@
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-
+import hasOwnProperty from 'shared/hasOwnProperty';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 const RESERVED_PROPS = {
   key: true,
   ref: true,
diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js
index 6ee1c7176f49..c77b5ef6e9a6 100644
--- a/packages/react/src/jsx/ReactJSXElementValidator.js
+++ b/packages/react/src/jsx/ReactJSXElementValidator.js
@@ -22,7 +22,7 @@ import {
   REACT_ELEMENT_TYPE,
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
-
+import hasOwnProperty from 'shared/hasOwnProperty';
 import {jsxDEV} from './ReactJSXElement';
 
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
@@ -54,8 +54,6 @@ if (__DEV__) {
   propTypesMisspellWarningShown = false;
 }
 
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
 /**
  * Verifies the object is a ReactElement.
  * See https://reactjs.org/docs/react-api.html#isvalidelement
diff --git a/packages/shared/checkPropTypes.js b/packages/shared/checkPropTypes.js
index eb067fb4c087..1558a407c388 100644
--- a/packages/shared/checkPropTypes.js
+++ b/packages/shared/checkPropTypes.js
@@ -12,6 +12,7 @@ const loggedTypeFailures = {};
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
@@ -40,7 +41,7 @@ export default function checkPropTypes(
 ): void {
   if (__DEV__) {
     // $FlowFixMe This is okay but Flow doesn't know it.
-    const has = Function.call.bind(Object.prototype.hasOwnProperty);
+    const has = Function.call.bind(hasOwnProperty);
     for (const typeSpecName in typeSpecs) {
       if (has(typeSpecs, typeSpecName)) {
         let error;
diff --git a/packages/shared/hasOwnProperty.js b/packages/shared/hasOwnProperty.js
new file mode 100644
index 000000000000..2751eda737b2
--- /dev/null
+++ b/packages/shared/hasOwnProperty.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const hasOwnProperty = Object.prototype.hasOwnProperty;
+
+export default hasOwnProperty;
diff --git a/packages/shared/shallowEqual.js b/packages/shared/shallowEqual.js
index 8ff87431e0a9..92c66e5a1ece 100644
--- a/packages/shared/shallowEqual.js
+++ b/packages/shared/shallowEqual.js
@@ -8,8 +8,7 @@
  */
 
 import is from './objectIs';
-
-const hasOwnProperty = Object.prototype.hasOwnProperty;
+import hasOwnProperty from './hasOwnProperty';
 
 /**
  * Performs equality by iterating through keys on an object and returning false

From b130a0f5cd4f29a1c3147f66e10914c42847678a Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Thu, 1 Apr 2021 22:20:48 +0430
Subject: [PATCH 0395/1603] Remove redundant initial of isArray (#21163)

---
 .../eslint-plugin-react-hooks/src/ExhaustiveDeps.js | 10 ++++++----
 packages/jest-react/src/JestReact.js                |  3 ++-
 .../react-devtools-shared/src/backend/renderer.js   |  3 ++-
 packages/react-devtools-shared/src/backend/utils.js | 11 ++++++-----
 packages/react-dom/src/client/ReactDOMSelect.js     |  7 ++++---
 packages/react-dom/src/client/ReactDOMTextarea.js   |  4 ++--
 .../src/server/ReactDOMServerFormatConfig.js        |  3 +--
 .../react-dom/src/server/ReactPartialRenderer.js    | 11 ++++++-----
 packages/react-dom/src/test-utils/ReactTestUtils.js |  7 ++++---
 .../src/ReactNativeAttributePayload.js              | 13 +++++++------
 .../src/legacy-events/EventPluginUtils.js           | 11 ++++++-----
 .../src/legacy-events/accumulate.js                 |  5 +++--
 .../src/legacy-events/accumulateInto.js             |  7 ++++---
 packages/react-noop-renderer/src/createReactNoop.js |  9 +++++----
 .../react-reconciler/src/ReactChildFiber.new.js     |  3 +--
 .../react-reconciler/src/ReactChildFiber.old.js     |  3 +--
 .../src/ReactFiberClassComponent.new.js             |  2 +-
 .../src/ReactFiberClassComponent.old.js             |  2 +-
 .../src/ReactFiberReconciler.new.js                 | 11 ++++++-----
 .../src/ReactFiberReconciler.old.js                 | 11 ++++++-----
 .../src/ReactFlightDOMRelayServerHostConfig.js      |  3 ++-
 .../src/ReactFlightNativeRelayServerHostConfig.js   |  4 ++--
 packages/react-server/src/ReactFizzServer.js        |  3 ++-
 packages/react-server/src/ReactFlightServer.js      |  3 +--
 packages/react/src/ReactChildren.js                 |  5 +++--
 packages/react/src/ReactElementValidator.js         |  9 +++++----
 packages/react/src/jsx/ReactJSXElementValidator.js  |  7 ++++---
 packages/shared/isArray.js                          | 12 ++++++++++++
 28 files changed, 105 insertions(+), 77 deletions(-)
 create mode 100644 packages/shared/isArray.js

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 2c76ca5991f7..268b6873bd58 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -145,6 +145,8 @@ export default {
         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.
 
@@ -157,7 +159,7 @@ export default {
       //       ^^^ true for this reference
       // False for everything else.
       function isStableKnownHookValue(resolved) {
-        if (!Array.isArray(resolved.defs)) {
+        if (!isArray(resolved.defs)) {
           return false;
         }
         const def = resolved.defs[0];
@@ -226,7 +228,7 @@ export default {
           if (
             id.type === 'ArrayPattern' &&
             id.elements.length === 2 &&
-            Array.isArray(resolved.identifiers)
+            isArray(resolved.identifiers)
           ) {
             // Is second tuple value the same reference we're checking?
             if (id.elements[1] === resolved.identifiers[0]) {
@@ -255,7 +257,7 @@ export default {
         } else if (name === 'useTransition') {
           if (
             id.type === 'ArrayPattern' &&
-            Array.isArray(resolved.identifiers)
+            isArray(resolved.identifiers)
           ) {
             // Is first tuple value the same reference we're checking?
             if (id.elements[0] === resolved.identifiers[0]) {
@@ -270,7 +272,7 @@ export default {
 
       // Some are just functions that don't reference anything dynamic.
       function isFunctionWithoutCapturedValues(resolved) {
-        if (!Array.isArray(resolved.defs)) {
+        if (!isArray(resolved.defs)) {
           return false;
         }
         const def = resolved.defs[0];
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
index 57790797b966..1f26cbee3a32 100644
--- a/packages/jest-react/src/JestReact.js
+++ b/packages/jest-react/src/JestReact.js
@@ -8,6 +8,7 @@
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 function captureAssertion(fn) {
   // Trick to use a Jest matcher inside another Jest matcher. `fn` contains an
@@ -42,7 +43,7 @@ export function unstable_toMatchRenderedOutput(root, expectedJSX) {
   let actualJSX;
   if (actualJSON === null || typeof actualJSON === 'string') {
     actualJSX = actualJSON;
-  } else if (Array.isArray(actualJSON)) {
+  } else if (isArray(actualJSON)) {
     if (actualJSON.length === 0) {
       actualJSX = null;
     } else if (actualJSON.length === 1) {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 050a4e709ab3..c61edb45daa6 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -105,6 +105,7 @@ import type {
   ElementType,
 } from 'react-devtools-shared/src/types';
 import is from 'shared/objectIs';
+import isArray from 'shared/isArray';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => Symbol | number;
@@ -1137,7 +1138,7 @@ export function attach(
       memoizedState.hasOwnProperty('create') &&
       memoizedState.hasOwnProperty('destroy') &&
       memoizedState.hasOwnProperty('deps') &&
-      (memoizedState.deps === null || Array.isArray(memoizedState.deps)) &&
+      (memoizedState.deps === null || isArray(memoizedState.deps)) &&
       memoizedState.hasOwnProperty('next')
     );
   }
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 7a4ff6295ab9..593459d78f64 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -9,6 +9,7 @@
 
 import {copy} from 'clipboard-js';
 import {dehydrate} from '../hydration';
+import isArray from 'shared/isArray';
 
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
@@ -61,9 +62,9 @@ export function copyWithDelete(
   index: number = 0,
 ): Object | Array<any> {
   const key = path[index];
-  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  const updated = isArray(obj) ? obj.slice() : {...obj};
   if (index + 1 === path.length) {
-    if (Array.isArray(updated)) {
+    if (isArray(updated)) {
       updated.splice(((key: any): number), 1);
     } else {
       delete updated[key];
@@ -84,12 +85,12 @@ export function copyWithRename(
   index: number = 0,
 ): Object | Array<any> {
   const oldKey = oldPath[index];
-  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  const updated = isArray(obj) ? obj.slice() : {...obj};
   if (index + 1 === oldPath.length) {
     const newKey = newPath[index];
     // $FlowFixMe number or string is fine here
     updated[newKey] = updated[oldKey];
-    if (Array.isArray(updated)) {
+    if (isArray(updated)) {
       updated.splice(((oldKey: any): number), 1);
     } else {
       delete updated[oldKey];
@@ -111,7 +112,7 @@ export function copyWithSet(
     return value;
   }
   const key = path[index];
-  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  const updated = isArray(obj) ? obj.slice() : {...obj};
   // $FlowFixMe number or string is fine here
   updated[key] = copyWithSet(obj[key], path, value, index + 1);
   return updated;
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index 1efca61905b4..df336d4b9225 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -12,6 +12,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getToStringValue, toString} from './ToStringValue';
+import isArray from 'shared/isArray';
 
 let didWarnValueDefaultValue;
 
@@ -45,15 +46,15 @@ function checkSelectPropTypes(props) {
       if (props[propName] == null) {
         continue;
       }
-      const isArray = Array.isArray(props[propName]);
-      if (props.multiple && !isArray) {
+      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 && isArray) {
+      } else if (!props.multiple && propNameIsArray) {
         console.error(
           'The `%s` prop supplied to <select> must be a scalar ' +
             'value if `multiple` is false.%s',
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 24fb591fcd8a..6e8aed5cc43c 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -8,12 +8,12 @@
  */
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 import {getToStringValue, toString} from './ToStringValue';
 import type {ToStringValue} from './ToStringValue';
-
 import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 let didWarnValDefaultVal = false;
@@ -100,7 +100,7 @@ export function initWrapperState(element: Element, props: Object) {
           defaultValue == null,
           'If you supply `defaultValue` on a <textarea>, do not pass children.',
         );
-        if (Array.isArray(children)) {
+        if (isArray(children)) {
           invariant(
             children.length <= 1,
             '<textarea> can only have at most one child.',
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 2988e9a58833..45cd0fecb5e9 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -46,8 +46,7 @@ import hyphenateStyleName from '../shared/hyphenateStyleName';
 import invariant from 'shared/invariant';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
-
-const isArray = Array.isArray;
+import isArray from 'shared/isArray';
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 4d2aeb5b38f8..90fbfd6ad439 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -14,6 +14,7 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -1438,7 +1439,7 @@ class ReactDOMServerRenderer {
             defaultValue == null,
             'If you supply `defaultValue` on a <textarea>, do not pass children.',
           );
-          if (Array.isArray(textareaChildren)) {
+          if (isArray(textareaChildren)) {
             invariant(
               textareaChildren.length <= 1,
               '<textarea> can only have at most one child.',
@@ -1467,14 +1468,14 @@ class ReactDOMServerRenderer {
           if (props[propName] == null) {
             continue;
           }
-          const isArray = Array.isArray(props[propName]);
-          if (props.multiple && !isArray) {
+          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.',
               propName,
             );
-          } else if (!props.multiple && isArray) {
+          } else if (!props.multiple && propNameIsArray) {
             console.error(
               'The `%s` prop supplied to <select> must be a scalar ' +
                 'value if `multiple` is false.',
@@ -1515,7 +1516,7 @@ class ReactDOMServerRenderer {
           value = optionChildren;
         }
         selected = false;
-        if (Array.isArray(selectValue)) {
+        if (isArray(selectValue)) {
           // multiple
           for (let j = 0; j < selectValue.length; j++) {
             if ('' + selectValue[j] === value) {
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index dc59d2a64420..492ab02d1192 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -24,6 +24,7 @@ import {
   rethrowCaughtError,
   invokeGuardedCallbackAndCatchFirstError,
 } from 'shared/ReactErrorUtils';
+import isArray from 'shared/isArray';
 
 // Keep in sync with ReactDOM.js, and ReactTestUtilsAct.js:
 const EventInternals =
@@ -97,7 +98,7 @@ function validateClassInstance(inst, methodName) {
   }
   let received;
   const stringified = '' + inst;
-  if (Array.isArray(inst)) {
+  if (isArray(inst)) {
     received = 'an array';
   } else if (inst && inst.nodeType === ELEMENT_NODE && inst.tagName) {
     received = 'a DOM node';
@@ -197,7 +198,7 @@ function scryRenderedDOMComponentsWithClass(root, classNames) {
       }
       const classList = className.split(/\s+/);
 
-      if (!Array.isArray(classNames)) {
+      if (!isArray(classNames)) {
         invariant(
           classNames !== undefined,
           'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
@@ -365,7 +366,7 @@ function executeDispatch(event, listener, inst) {
 function executeDispatchesInOrder(event) {
   const dispatchListeners = event._dispatchListeners;
   const dispatchInstances = event._dispatchInstances;
-  if (Array.isArray(dispatchListeners)) {
+  if (isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
index fa1187bc339b..d388f4046a01 100644
--- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js
+++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
@@ -12,6 +12,7 @@ import {
   deepDiffer,
   flattenStyle,
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import isArray from 'shared/isArray';
 
 import type {AttributeConfiguration} from './ReactNativeTypes';
 
@@ -51,7 +52,7 @@ function restoreDeletedValuesInNestedArray(
   node: NestedNode,
   validAttributes: AttributeConfiguration,
 ) {
-  if (Array.isArray(node)) {
+  if (isArray(node)) {
     let i = node.length;
     while (i-- && removedKeyCount > 0) {
       restoreDeletedValuesInNestedArray(
@@ -163,12 +164,12 @@ function diffNestedProperty(
     return updatePayload;
   }
 
-  if (!Array.isArray(prevProp) && !Array.isArray(nextProp)) {
+  if (!isArray(prevProp) && !isArray(nextProp)) {
     // Both are leaves, we can diff the leaves.
     return diffProperties(updatePayload, prevProp, nextProp, validAttributes);
   }
 
-  if (Array.isArray(prevProp) && Array.isArray(nextProp)) {
+  if (isArray(prevProp) && isArray(nextProp)) {
     // Both are arrays, we can diff the arrays.
     return diffNestedArrayProperty(
       updatePayload,
@@ -178,7 +179,7 @@ function diffNestedProperty(
     );
   }
 
-  if (Array.isArray(prevProp)) {
+  if (isArray(prevProp)) {
     return diffProperties(
       updatePayload,
       // $FlowFixMe - We know that this is always an object when the input is.
@@ -212,7 +213,7 @@ function addNestedProperty(
     return updatePayload;
   }
 
-  if (!Array.isArray(nextProp)) {
+  if (!isArray(nextProp)) {
     // Add each property of the leaf.
     return addProperties(updatePayload, nextProp, validAttributes);
   }
@@ -242,7 +243,7 @@ function clearNestedProperty(
     return updatePayload;
   }
 
-  if (!Array.isArray(prevProp)) {
+  if (!isArray(prevProp)) {
     // Add each property of the leaf.
     return clearProperties(updatePayload, prevProp, validAttributes);
   }
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
index abba8e9a3dab..381ebafc59bb 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
@@ -7,6 +7,7 @@
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 export let getFiberCurrentPropsFromNode = null;
 export let getInstanceFromNode = null;
@@ -36,14 +37,14 @@ if (__DEV__) {
     const dispatchListeners = event._dispatchListeners;
     const dispatchInstances = event._dispatchInstances;
 
-    const listenersIsArr = Array.isArray(dispatchListeners);
+    const listenersIsArr = isArray(dispatchListeners);
     const listenersLen = listenersIsArr
       ? dispatchListeners.length
       : dispatchListeners
       ? 1
       : 0;
 
-    const instancesIsArr = Array.isArray(dispatchInstances);
+    const instancesIsArr = isArray(dispatchInstances);
     const instancesLen = instancesIsArr
       ? dispatchInstances.length
       : dispatchInstances
@@ -78,7 +79,7 @@ export function executeDispatchesInOrder(event) {
   if (__DEV__) {
     validateEventDispatches(event);
   }
-  if (Array.isArray(dispatchListeners)) {
+  if (isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
@@ -106,7 +107,7 @@ function executeDispatchesInOrderStopAtTrueImpl(event) {
   if (__DEV__) {
     validateEventDispatches(event);
   }
-  if (Array.isArray(dispatchListeners)) {
+  if (isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
@@ -150,7 +151,7 @@ export function executeDirectDispatch(event) {
   const dispatchListener = event._dispatchListeners;
   const dispatchInstance = event._dispatchInstances;
   invariant(
-    !Array.isArray(dispatchListener),
+    !isArray(dispatchListener),
     'executeDirectDispatch(...): Invalid `event`.',
   );
   event.currentTarget = dispatchListener
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
index 6fcf9f1fd80c..af4da853934b 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulate.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -8,6 +8,7 @@
  */
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 /**
  * Accumulates items that must not be null or undefined.
@@ -31,11 +32,11 @@ function accumulate<T>(
 
   // 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 (Array.isArray(current)) {
+  if (isArray(current)) {
     return current.concat(next);
   }
 
-  if (Array.isArray(next)) {
+  if (isArray(next)) {
     return [current].concat(next);
   }
 
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index 35625311da88..d704733d9d45 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -8,6 +8,7 @@
  */
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 /**
  * Accumulates items that must not be null or undefined into the first one. This
@@ -37,8 +38,8 @@ function accumulateInto<T>(
 
   // 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 (Array.isArray(current)) {
-    if (Array.isArray(next)) {
+  if (isArray(current)) {
+    if (isArray(next)) {
       current.push.apply(current, next);
       return current;
     }
@@ -46,7 +47,7 @@ function accumulateInto<T>(
     return current;
   }
 
-  if (Array.isArray(next)) {
+  if (isArray(next)) {
     // A bit too dangerous to mutate `next`.
     return [current].concat(next);
   }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index ce80ca337437..9d2c87621bce 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,6 +21,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import isArray from 'shared/isArray';
 import {
   DefaultEventPriority,
   IdleEventPriority,
@@ -604,7 +605,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (typeof child === 'string') {
       return child;
     }
-    if (Array.isArray(child)) {
+    if (isArray(child)) {
       if (child.length === 0) {
         return null;
       }
@@ -618,7 +619,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
       return children;
     }
-    if (Array.isArray(child.children)) {
+    if (isArray(child.children)) {
       // This is an instance.
       const instance: Instance = (child: any);
       const children = childToJSX(instance.children, instance.text);
@@ -668,7 +669,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (children === null) {
       return null;
     }
-    if (Array.isArray(children)) {
+    if (isArray(children)) {
       return {
         $$typeof: REACT_ELEMENT_TYPE,
         type: REACT_FRAGMENT_TYPE,
@@ -687,7 +688,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (children === null) {
       return null;
     }
-    if (Array.isArray(children)) {
+    if (isArray(children)) {
       return {
         $$typeof: REACT_ELEMENT_TYPE,
         type: REACT_FRAGMENT_TYPE,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index f9041ce6590b..12a693c2d2d7 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -31,6 +31,7 @@ import {
   SimpleMemoComponent,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
   enableLazyElements,
@@ -97,8 +98,6 @@ if (__DEV__) {
   };
 }
 
-const isArray = Array.isArray;
-
 function coerceRef(
   returnFiber: Fiber,
   current: Fiber | null,
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 10c4ccb4dc5b..ad3bcdead7de 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -11,6 +11,7 @@ import type {ReactElement} from 'shared/ReactElementType';
 import type {ReactPortal} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
+import isArray from 'shared/isArray';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {Placement, ChildDeletion} from './ReactFiberFlags';
@@ -97,8 +98,6 @@ if (__DEV__) {
   };
 }
 
-const isArray = Array.isArray;
-
 function coerceRef(
   returnFiber: Fiber,
   current: Fiber | null,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index ea1b4cb5e3c8..efdd40b04318 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -29,6 +29,7 @@ import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
@@ -74,7 +75,6 @@ import {
 } from './SchedulingProfiler';
 
 const fakeInternalInstance = {};
-const isArray = Array.isArray;
 
 // React.Component uses a shared frozen object by default.
 // We'll use it to determine whether we need to initialize legacy refs.
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index b952c24cd041..a34fe1d56495 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -29,6 +29,7 @@ import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
@@ -74,7 +75,6 @@ import {
 } from './SchedulingProfiler';
 
 const fakeInternalInstance = {};
-const isArray = Array.isArray;
 
 // React.Component uses a shared frozen object by default.
 // We'll use it to determine whether we need to initialize legacy refs.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index bbe8810ff52d..4572e4d9de4b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -34,6 +34,7 @@ import {
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
@@ -482,9 +483,9 @@ if (__DEV__) {
     index: number,
   ) => {
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === path.length) {
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((key: any): number), 1);
       } else {
         delete updated[key];
@@ -510,12 +511,12 @@ if (__DEV__) {
     index: number,
   ) => {
     const oldKey = oldPath[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === oldPath.length) {
       const newKey = newPath[index];
       // $FlowFixMe number or string is fine here
       updated[newKey] = updated[oldKey];
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((oldKey: any): number), 1);
       } else {
         delete updated[oldKey];
@@ -564,7 +565,7 @@ if (__DEV__) {
       return value;
     }
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     // $FlowFixMe number or string is fine here
     updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
     return updated;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index c6ced2f5be5b..abd5b9094c59 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -34,6 +34,7 @@ import {
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
@@ -482,9 +483,9 @@ if (__DEV__) {
     index: number,
   ) => {
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === path.length) {
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((key: any): number), 1);
       } else {
         delete updated[key];
@@ -510,12 +511,12 @@ if (__DEV__) {
     index: number,
   ) => {
     const oldKey = oldPath[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === oldPath.length) {
       const newKey = newPath[index];
       // $FlowFixMe number or string is fine here
       updated[newKey] = updated[oldKey];
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((oldKey: any): number), 1);
       } else {
         delete updated[oldKey];
@@ -564,7 +565,7 @@ if (__DEV__) {
       return value;
     }
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     // $FlowFixMe number or string is fine here
     updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
     return updated;
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index a4d0d26fcce1..85eace536ac4 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -14,6 +14,7 @@ import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import JSResourceReference from 'JSResourceReference';
 
 import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
 
 export type ModuleReference<T> = JSResourceReference<T>;
 
@@ -82,7 +83,7 @@ function convertModelToJSON(
 ): JSONValue {
   const json = resolveModelToJSON(request, parent, key, model);
   if (typeof json === 'object' && json !== null) {
-    if (Array.isArray(json)) {
+    if (isArray(json)) {
       const jsonArray: Array<JSONValue> = [];
       for (let i = 0; i < json.length; i++) {
         jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]);
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 4fa871b0c4e8..0624e693cfe1 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -8,9 +8,9 @@
  */
 
 import type {RowEncoding, JSONValue} from './ReactFlightNativeRelayProtocol';
-
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
 import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 export type ModuleReference<T> = JSResourceReferenceImpl<T>;
@@ -80,7 +80,7 @@ function convertModelToJSON(
 ): JSONValue {
   const json = resolveModelToJSON(request, parent, key, model);
   if (typeof json === 'object' && json !== null) {
-    if (Array.isArray(json)) {
+    if (isArray(json)) {
       const jsonArray: Array<JSONValue> = [];
       for (let i = 0; i < json.length; i++) {
         jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 66a6c9238ab3..75beaf0f219b 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -51,6 +51,7 @@ import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
@@ -287,7 +288,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     return;
   }
 
-  if (Array.isArray(node)) {
+  if (isArray(node)) {
     if (node.length > 0) {
       for (let i = 0; i < node.length; i++) {
         renderNode(request, task, node[i]);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index dfbe3c55f9b6..58c3a9219f64 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -44,8 +44,7 @@ import {
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
-
-const isArray = Array.isArray;
+import isArray from 'shared/isArray';
 
 type ReactJSONValue =
   | string
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index eb9ef5aca9ca..9acdc068e8ea 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -10,6 +10,7 @@
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -110,7 +111,7 @@ function mapIntoArray(
     // so that it's consistent if the number of children grows:
     const childKey =
       nameSoFar === '' ? SEPARATOR + getElementKey(child, 0) : nameSoFar;
-    if (Array.isArray(mappedChild)) {
+    if (isArray(mappedChild)) {
       let escapedChildKey = '';
       if (childKey != null) {
         escapedChildKey = escapeUserProvidedKey(childKey) + '/';
@@ -142,7 +143,7 @@ function mapIntoArray(
   const nextNamePrefix =
     nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
 
-  if (Array.isArray(children)) {
+  if (isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       child = children[i];
       nextName = nextNamePrefix + getElementKey(child, i);
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index 2c14bef6c020..f9d2cbb95af1 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import checkPropTypes from 'shared/checkPropTypes';
+import isArray from 'shared/isArray';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 import {
@@ -168,7 +169,7 @@ function validateChildKeys(node, parentType) {
   if (typeof node !== 'object') {
     return;
   }
-  if (Array.isArray(node)) {
+  if (isArray(node)) {
     for (let i = 0; i < node.length; i++) {
       const child = node[i];
       if (isValidElement(child)) {
@@ -313,7 +314,7 @@ export function jsxWithValidation(
     let typeString;
     if (type === null) {
       typeString = 'null';
-    } else if (Array.isArray(type)) {
+    } else if (isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
       typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
@@ -352,7 +353,7 @@ export function jsxWithValidation(
     const children = props.children;
     if (children !== undefined) {
       if (isStaticChildren) {
-        if (Array.isArray(children)) {
+        if (isArray(children)) {
           for (let i = 0; i < children.length; i++) {
             validateChildKeys(children[i], type);
           }
@@ -437,7 +438,7 @@ export function createElementWithValidation(type, props, children) {
     let typeString;
     if (type === null) {
       typeString = 'null';
-    } else if (Array.isArray(type)) {
+    } else if (isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
       typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js
index c77b5ef6e9a6..84cf3eb2caa3 100644
--- a/packages/react/src/jsx/ReactJSXElementValidator.js
+++ b/packages/react/src/jsx/ReactJSXElementValidator.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
 import {jsxDEV} from './ReactJSXElement';
 
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
@@ -182,7 +183,7 @@ function validateChildKeys(node, parentType) {
     if (typeof node !== 'object') {
       return;
     }
-    if (Array.isArray(node)) {
+    if (isArray(node)) {
       for (let i = 0; i < node.length; i++) {
         const child = node[i];
         if (isValidElement(child)) {
@@ -329,7 +330,7 @@ export function jsxWithValidation(
       let typeString;
       if (type === null) {
         typeString = 'null';
-      } else if (Array.isArray(type)) {
+      } else if (isArray(type)) {
         typeString = 'array';
       } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
         typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
@@ -366,7 +367,7 @@ export function jsxWithValidation(
       const children = props.children;
       if (children !== undefined) {
         if (isStaticChildren) {
-          if (Array.isArray(children)) {
+          if (isArray(children)) {
             for (let i = 0; i < children.length; i++) {
               validateChildKeys(children[i], type);
             }
diff --git a/packages/shared/isArray.js b/packages/shared/isArray.js
new file mode 100644
index 000000000000..6dc19d89b21e
--- /dev/null
+++ b/packages/shared/isArray.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const isArray = Array.isArray;
+
+export default isArray;

From 94fd1214d2054799485cdcca87a37d956a4240eb Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Thu, 1 Apr 2021 23:39:16 +0430
Subject: [PATCH 0396/1603] apply prettier (#21165)

---
 packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 268b6873bd58..f4c36fcf2202 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -255,10 +255,7 @@ export default {
             }
           }
         } else if (name === 'useTransition') {
-          if (
-            id.type === 'ArrayPattern' &&
-            isArray(resolved.identifiers)
-          ) {
+          if (id.type === 'ArrayPattern' && isArray(resolved.identifiers)) {
             // Is first tuple value the same reference we're checking?
             if (id.elements[0] === resolved.identifiers[0]) {
               // Setter is stable.

From c03197063d57c6b61d83d7fe9202f07f5c766fbd Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Thu, 1 Apr 2021 15:18:56 -0400
Subject: [PATCH 0397/1603] Revert "apply prettier (#21165)"

This reverts commit 94fd1214d2054799485cdcca87a37d956a4240eb.
---
 packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index f4c36fcf2202..268b6873bd58 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -255,7 +255,10 @@ export default {
             }
           }
         } else if (name === 'useTransition') {
-          if (id.type === 'ArrayPattern' && isArray(resolved.identifiers)) {
+          if (
+            id.type === 'ArrayPattern' &&
+            isArray(resolved.identifiers)
+          ) {
             // Is first tuple value the same reference we're checking?
             if (id.elements[0] === resolved.identifiers[0]) {
               // Setter is stable.

From b4f119cdf1defe2437e00022f670c6ef818cd43f Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Thu, 1 Apr 2021 15:19:00 -0400
Subject: [PATCH 0398/1603] Revert "Remove redundant initial of isArray
 (#21163)"

This reverts commit b130a0f5cd4f29a1c3147f66e10914c42847678a.
---
 .../eslint-plugin-react-hooks/src/ExhaustiveDeps.js | 10 ++++------
 packages/jest-react/src/JestReact.js                |  3 +--
 .../react-devtools-shared/src/backend/renderer.js   |  3 +--
 packages/react-devtools-shared/src/backend/utils.js | 11 +++++------
 packages/react-dom/src/client/ReactDOMSelect.js     |  7 +++----
 packages/react-dom/src/client/ReactDOMTextarea.js   |  4 ++--
 .../src/server/ReactDOMServerFormatConfig.js        |  3 ++-
 .../react-dom/src/server/ReactPartialRenderer.js    | 11 +++++------
 packages/react-dom/src/test-utils/ReactTestUtils.js |  7 +++----
 .../src/ReactNativeAttributePayload.js              | 13 ++++++-------
 .../src/legacy-events/EventPluginUtils.js           | 11 +++++------
 .../src/legacy-events/accumulate.js                 |  5 ++---
 .../src/legacy-events/accumulateInto.js             |  7 +++----
 packages/react-noop-renderer/src/createReactNoop.js |  9 ++++-----
 .../react-reconciler/src/ReactChildFiber.new.js     |  3 ++-
 .../react-reconciler/src/ReactChildFiber.old.js     |  3 ++-
 .../src/ReactFiberClassComponent.new.js             |  2 +-
 .../src/ReactFiberClassComponent.old.js             |  2 +-
 .../src/ReactFiberReconciler.new.js                 | 11 +++++------
 .../src/ReactFiberReconciler.old.js                 | 11 +++++------
 .../src/ReactFlightDOMRelayServerHostConfig.js      |  3 +--
 .../src/ReactFlightNativeRelayServerHostConfig.js   |  4 ++--
 packages/react-server/src/ReactFizzServer.js        |  3 +--
 packages/react-server/src/ReactFlightServer.js      |  3 ++-
 packages/react/src/ReactChildren.js                 |  5 ++---
 packages/react/src/ReactElementValidator.js         |  9 ++++-----
 packages/react/src/jsx/ReactJSXElementValidator.js  |  7 +++----
 packages/shared/isArray.js                          | 12 ------------
 28 files changed, 77 insertions(+), 105 deletions(-)
 delete mode 100644 packages/shared/isArray.js

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 268b6873bd58..2c76ca5991f7 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -145,8 +145,6 @@ export default {
         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.
 
@@ -159,7 +157,7 @@ export default {
       //       ^^^ true for this reference
       // False for everything else.
       function isStableKnownHookValue(resolved) {
-        if (!isArray(resolved.defs)) {
+        if (!Array.isArray(resolved.defs)) {
           return false;
         }
         const def = resolved.defs[0];
@@ -228,7 +226,7 @@ export default {
           if (
             id.type === 'ArrayPattern' &&
             id.elements.length === 2 &&
-            isArray(resolved.identifiers)
+            Array.isArray(resolved.identifiers)
           ) {
             // Is second tuple value the same reference we're checking?
             if (id.elements[1] === resolved.identifiers[0]) {
@@ -257,7 +255,7 @@ export default {
         } else if (name === 'useTransition') {
           if (
             id.type === 'ArrayPattern' &&
-            isArray(resolved.identifiers)
+            Array.isArray(resolved.identifiers)
           ) {
             // Is first tuple value the same reference we're checking?
             if (id.elements[0] === resolved.identifiers[0]) {
@@ -272,7 +270,7 @@ export default {
 
       // Some are just functions that don't reference anything dynamic.
       function isFunctionWithoutCapturedValues(resolved) {
-        if (!isArray(resolved.defs)) {
+        if (!Array.isArray(resolved.defs)) {
           return false;
         }
         const def = resolved.defs[0];
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
index 1f26cbee3a32..57790797b966 100644
--- a/packages/jest-react/src/JestReact.js
+++ b/packages/jest-react/src/JestReact.js
@@ -8,7 +8,6 @@
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 
 function captureAssertion(fn) {
   // Trick to use a Jest matcher inside another Jest matcher. `fn` contains an
@@ -43,7 +42,7 @@ export function unstable_toMatchRenderedOutput(root, expectedJSX) {
   let actualJSX;
   if (actualJSON === null || typeof actualJSON === 'string') {
     actualJSX = actualJSON;
-  } else if (isArray(actualJSON)) {
+  } else if (Array.isArray(actualJSON)) {
     if (actualJSON.length === 0) {
       actualJSX = null;
     } else if (actualJSON.length === 1) {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c61edb45daa6..050a4e709ab3 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -105,7 +105,6 @@ import type {
   ElementType,
 } from 'react-devtools-shared/src/types';
 import is from 'shared/objectIs';
-import isArray from 'shared/isArray';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => Symbol | number;
@@ -1138,7 +1137,7 @@ export function attach(
       memoizedState.hasOwnProperty('create') &&
       memoizedState.hasOwnProperty('destroy') &&
       memoizedState.hasOwnProperty('deps') &&
-      (memoizedState.deps === null || isArray(memoizedState.deps)) &&
+      (memoizedState.deps === null || Array.isArray(memoizedState.deps)) &&
       memoizedState.hasOwnProperty('next')
     );
   }
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 593459d78f64..7a4ff6295ab9 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -9,7 +9,6 @@
 
 import {copy} from 'clipboard-js';
 import {dehydrate} from '../hydration';
-import isArray from 'shared/isArray';
 
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
@@ -62,9 +61,9 @@ export function copyWithDelete(
   index: number = 0,
 ): Object | Array<any> {
   const key = path[index];
-  const updated = isArray(obj) ? obj.slice() : {...obj};
+  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
   if (index + 1 === path.length) {
-    if (isArray(updated)) {
+    if (Array.isArray(updated)) {
       updated.splice(((key: any): number), 1);
     } else {
       delete updated[key];
@@ -85,12 +84,12 @@ export function copyWithRename(
   index: number = 0,
 ): Object | Array<any> {
   const oldKey = oldPath[index];
-  const updated = isArray(obj) ? obj.slice() : {...obj};
+  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
   if (index + 1 === oldPath.length) {
     const newKey = newPath[index];
     // $FlowFixMe number or string is fine here
     updated[newKey] = updated[oldKey];
-    if (isArray(updated)) {
+    if (Array.isArray(updated)) {
       updated.splice(((oldKey: any): number), 1);
     } else {
       delete updated[oldKey];
@@ -112,7 +111,7 @@ export function copyWithSet(
     return value;
   }
   const key = path[index];
-  const updated = isArray(obj) ? obj.slice() : {...obj};
+  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
   // $FlowFixMe number or string is fine here
   updated[key] = copyWithSet(obj[key], path, value, index + 1);
   return updated;
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index df336d4b9225..1efca61905b4 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -12,7 +12,6 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getToStringValue, toString} from './ToStringValue';
-import isArray from 'shared/isArray';
 
 let didWarnValueDefaultValue;
 
@@ -46,15 +45,15 @@ function checkSelectPropTypes(props) {
       if (props[propName] == null) {
         continue;
       }
-      const propNameIsArray = isArray(props[propName]);
-      if (props.multiple && !propNameIsArray) {
+      const isArray = Array.isArray(props[propName]);
+      if (props.multiple && !isArray) {
         console.error(
           'The `%s` prop supplied to <select> must be an array if ' +
             '`multiple` is true.%s',
           propName,
           getDeclarationErrorAddendum(),
         );
-      } else if (!props.multiple && propNameIsArray) {
+      } else if (!props.multiple && isArray) {
         console.error(
           'The `%s` prop supplied to <select> must be a scalar ' +
             'value if `multiple` is false.%s',
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 6e8aed5cc43c..24fb591fcd8a 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -8,12 +8,12 @@
  */
 
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 import {getToStringValue, toString} from './ToStringValue';
 import type {ToStringValue} from './ToStringValue';
+
 import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 let didWarnValDefaultVal = false;
@@ -100,7 +100,7 @@ export function initWrapperState(element: Element, props: Object) {
           defaultValue == null,
           'If you supply `defaultValue` on a <textarea>, do not pass children.',
         );
-        if (isArray(children)) {
+        if (Array.isArray(children)) {
           invariant(
             children.length <= 1,
             '<textarea> can only have at most one child.',
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 45cd0fecb5e9..2988e9a58833 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -46,7 +46,8 @@ import hyphenateStyleName from '../shared/hyphenateStyleName';
 import invariant from 'shared/invariant';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
-import isArray from 'shared/isArray';
+
+const isArray = Array.isArray;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 90fbfd6ad439..4d2aeb5b38f8 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -14,7 +14,6 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -1439,7 +1438,7 @@ class ReactDOMServerRenderer {
             defaultValue == null,
             'If you supply `defaultValue` on a <textarea>, do not pass children.',
           );
-          if (isArray(textareaChildren)) {
+          if (Array.isArray(textareaChildren)) {
             invariant(
               textareaChildren.length <= 1,
               '<textarea> can only have at most one child.',
@@ -1468,14 +1467,14 @@ class ReactDOMServerRenderer {
           if (props[propName] == null) {
             continue;
           }
-          const propNameIsArray = isArray(props[propName]);
-          if (props.multiple && !propNameIsArray) {
+          const isArray = Array.isArray(props[propName]);
+          if (props.multiple && !isArray) {
             console.error(
               'The `%s` prop supplied to <select> must be an array if ' +
                 '`multiple` is true.',
               propName,
             );
-          } else if (!props.multiple && propNameIsArray) {
+          } else if (!props.multiple && isArray) {
             console.error(
               'The `%s` prop supplied to <select> must be a scalar ' +
                 'value if `multiple` is false.',
@@ -1516,7 +1515,7 @@ class ReactDOMServerRenderer {
           value = optionChildren;
         }
         selected = false;
-        if (isArray(selectValue)) {
+        if (Array.isArray(selectValue)) {
           // multiple
           for (let j = 0; j < selectValue.length; j++) {
             if ('' + selectValue[j] === value) {
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 492ab02d1192..dc59d2a64420 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -24,7 +24,6 @@ import {
   rethrowCaughtError,
   invokeGuardedCallbackAndCatchFirstError,
 } from 'shared/ReactErrorUtils';
-import isArray from 'shared/isArray';
 
 // Keep in sync with ReactDOM.js, and ReactTestUtilsAct.js:
 const EventInternals =
@@ -98,7 +97,7 @@ function validateClassInstance(inst, methodName) {
   }
   let received;
   const stringified = '' + inst;
-  if (isArray(inst)) {
+  if (Array.isArray(inst)) {
     received = 'an array';
   } else if (inst && inst.nodeType === ELEMENT_NODE && inst.tagName) {
     received = 'a DOM node';
@@ -198,7 +197,7 @@ function scryRenderedDOMComponentsWithClass(root, classNames) {
       }
       const classList = className.split(/\s+/);
 
-      if (!isArray(classNames)) {
+      if (!Array.isArray(classNames)) {
         invariant(
           classNames !== undefined,
           'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
@@ -366,7 +365,7 @@ function executeDispatch(event, listener, inst) {
 function executeDispatchesInOrder(event) {
   const dispatchListeners = event._dispatchListeners;
   const dispatchInstances = event._dispatchInstances;
-  if (isArray(dispatchListeners)) {
+  if (Array.isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
index d388f4046a01..fa1187bc339b 100644
--- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js
+++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
@@ -12,7 +12,6 @@ import {
   deepDiffer,
   flattenStyle,
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
-import isArray from 'shared/isArray';
 
 import type {AttributeConfiguration} from './ReactNativeTypes';
 
@@ -52,7 +51,7 @@ function restoreDeletedValuesInNestedArray(
   node: NestedNode,
   validAttributes: AttributeConfiguration,
 ) {
-  if (isArray(node)) {
+  if (Array.isArray(node)) {
     let i = node.length;
     while (i-- && removedKeyCount > 0) {
       restoreDeletedValuesInNestedArray(
@@ -164,12 +163,12 @@ function diffNestedProperty(
     return updatePayload;
   }
 
-  if (!isArray(prevProp) && !isArray(nextProp)) {
+  if (!Array.isArray(prevProp) && !Array.isArray(nextProp)) {
     // Both are leaves, we can diff the leaves.
     return diffProperties(updatePayload, prevProp, nextProp, validAttributes);
   }
 
-  if (isArray(prevProp) && isArray(nextProp)) {
+  if (Array.isArray(prevProp) && Array.isArray(nextProp)) {
     // Both are arrays, we can diff the arrays.
     return diffNestedArrayProperty(
       updatePayload,
@@ -179,7 +178,7 @@ function diffNestedProperty(
     );
   }
 
-  if (isArray(prevProp)) {
+  if (Array.isArray(prevProp)) {
     return diffProperties(
       updatePayload,
       // $FlowFixMe - We know that this is always an object when the input is.
@@ -213,7 +212,7 @@ function addNestedProperty(
     return updatePayload;
   }
 
-  if (!isArray(nextProp)) {
+  if (!Array.isArray(nextProp)) {
     // Add each property of the leaf.
     return addProperties(updatePayload, nextProp, validAttributes);
   }
@@ -243,7 +242,7 @@ function clearNestedProperty(
     return updatePayload;
   }
 
-  if (!isArray(prevProp)) {
+  if (!Array.isArray(prevProp)) {
     // Add each property of the leaf.
     return clearProperties(updatePayload, prevProp, validAttributes);
   }
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
index 381ebafc59bb..abba8e9a3dab 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
@@ -7,7 +7,6 @@
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 
 export let getFiberCurrentPropsFromNode = null;
 export let getInstanceFromNode = null;
@@ -37,14 +36,14 @@ if (__DEV__) {
     const dispatchListeners = event._dispatchListeners;
     const dispatchInstances = event._dispatchInstances;
 
-    const listenersIsArr = isArray(dispatchListeners);
+    const listenersIsArr = Array.isArray(dispatchListeners);
     const listenersLen = listenersIsArr
       ? dispatchListeners.length
       : dispatchListeners
       ? 1
       : 0;
 
-    const instancesIsArr = isArray(dispatchInstances);
+    const instancesIsArr = Array.isArray(dispatchInstances);
     const instancesLen = instancesIsArr
       ? dispatchInstances.length
       : dispatchInstances
@@ -79,7 +78,7 @@ export function executeDispatchesInOrder(event) {
   if (__DEV__) {
     validateEventDispatches(event);
   }
-  if (isArray(dispatchListeners)) {
+  if (Array.isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
@@ -107,7 +106,7 @@ function executeDispatchesInOrderStopAtTrueImpl(event) {
   if (__DEV__) {
     validateEventDispatches(event);
   }
-  if (isArray(dispatchListeners)) {
+  if (Array.isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
@@ -151,7 +150,7 @@ export function executeDirectDispatch(event) {
   const dispatchListener = event._dispatchListeners;
   const dispatchInstance = event._dispatchInstances;
   invariant(
-    !isArray(dispatchListener),
+    !Array.isArray(dispatchListener),
     'executeDirectDispatch(...): Invalid `event`.',
   );
   event.currentTarget = dispatchListener
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
index af4da853934b..6fcf9f1fd80c 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulate.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -8,7 +8,6 @@
  */
 
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 
 /**
  * Accumulates items that must not be null or undefined.
@@ -32,11 +31,11 @@ function accumulate<T>(
 
   // 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 (Array.isArray(current)) {
     return current.concat(next);
   }
 
-  if (isArray(next)) {
+  if (Array.isArray(next)) {
     return [current].concat(next);
   }
 
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index d704733d9d45..35625311da88 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -8,7 +8,6 @@
  */
 
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 
 /**
  * Accumulates items that must not be null or undefined into the first one. This
@@ -38,8 +37,8 @@ function accumulateInto<T>(
 
   // 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)) {
+  if (Array.isArray(current)) {
+    if (Array.isArray(next)) {
       current.push.apply(current, next);
       return current;
     }
@@ -47,7 +46,7 @@ function accumulateInto<T>(
     return current;
   }
 
-  if (isArray(next)) {
+  if (Array.isArray(next)) {
     // A bit too dangerous to mutate `next`.
     return [current].concat(next);
   }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 9d2c87621bce..ce80ca337437 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,7 +21,6 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
-import isArray from 'shared/isArray';
 import {
   DefaultEventPriority,
   IdleEventPriority,
@@ -605,7 +604,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (typeof child === 'string') {
       return child;
     }
-    if (isArray(child)) {
+    if (Array.isArray(child)) {
       if (child.length === 0) {
         return null;
       }
@@ -619,7 +618,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
       return children;
     }
-    if (isArray(child.children)) {
+    if (Array.isArray(child.children)) {
       // This is an instance.
       const instance: Instance = (child: any);
       const children = childToJSX(instance.children, instance.text);
@@ -669,7 +668,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (children === null) {
       return null;
     }
-    if (isArray(children)) {
+    if (Array.isArray(children)) {
       return {
         $$typeof: REACT_ELEMENT_TYPE,
         type: REACT_FRAGMENT_TYPE,
@@ -688,7 +687,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (children === null) {
       return null;
     }
-    if (isArray(children)) {
+    if (Array.isArray(children)) {
       return {
         $$typeof: REACT_ELEMENT_TYPE,
         type: REACT_FRAGMENT_TYPE,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 12a693c2d2d7..f9041ce6590b 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -31,7 +31,6 @@ import {
   SimpleMemoComponent,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
   enableLazyElements,
@@ -98,6 +97,8 @@ if (__DEV__) {
   };
 }
 
+const isArray = Array.isArray;
+
 function coerceRef(
   returnFiber: Fiber,
   current: Fiber | null,
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index ad3bcdead7de..10c4ccb4dc5b 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -11,7 +11,6 @@ import type {ReactElement} from 'shared/ReactElementType';
 import type {ReactPortal} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
-import isArray from 'shared/isArray';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {Placement, ChildDeletion} from './ReactFiberFlags';
@@ -98,6 +97,8 @@ if (__DEV__) {
   };
 }
 
+const isArray = Array.isArray;
+
 function coerceRef(
   returnFiber: Fiber,
   current: Fiber | null,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index efdd40b04318..ea1b4cb5e3c8 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -29,7 +29,6 @@ import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
@@ -75,6 +74,7 @@ import {
 } from './SchedulingProfiler';
 
 const fakeInternalInstance = {};
+const isArray = Array.isArray;
 
 // React.Component uses a shared frozen object by default.
 // We'll use it to determine whether we need to initialize legacy refs.
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index a34fe1d56495..b952c24cd041 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -29,7 +29,6 @@ import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
@@ -75,6 +74,7 @@ import {
 } from './SchedulingProfiler';
 
 const fakeInternalInstance = {};
+const isArray = Array.isArray;
 
 // React.Component uses a shared frozen object by default.
 // We'll use it to determine whether we need to initialize legacy refs.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 4572e4d9de4b..bbe8810ff52d 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -34,7 +34,6 @@ import {
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
@@ -483,9 +482,9 @@ if (__DEV__) {
     index: number,
   ) => {
     const key = path[index];
-    const updated = isArray(obj) ? obj.slice() : {...obj};
+    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === path.length) {
-      if (isArray(updated)) {
+      if (Array.isArray(updated)) {
         updated.splice(((key: any): number), 1);
       } else {
         delete updated[key];
@@ -511,12 +510,12 @@ if (__DEV__) {
     index: number,
   ) => {
     const oldKey = oldPath[index];
-    const updated = isArray(obj) ? obj.slice() : {...obj};
+    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === oldPath.length) {
       const newKey = newPath[index];
       // $FlowFixMe number or string is fine here
       updated[newKey] = updated[oldKey];
-      if (isArray(updated)) {
+      if (Array.isArray(updated)) {
         updated.splice(((oldKey: any): number), 1);
       } else {
         delete updated[oldKey];
@@ -565,7 +564,7 @@ if (__DEV__) {
       return value;
     }
     const key = path[index];
-    const updated = isArray(obj) ? obj.slice() : {...obj};
+    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
     // $FlowFixMe number or string is fine here
     updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
     return updated;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index abd5b9094c59..c6ced2f5be5b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -34,7 +34,6 @@ import {
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
@@ -483,9 +482,9 @@ if (__DEV__) {
     index: number,
   ) => {
     const key = path[index];
-    const updated = isArray(obj) ? obj.slice() : {...obj};
+    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === path.length) {
-      if (isArray(updated)) {
+      if (Array.isArray(updated)) {
         updated.splice(((key: any): number), 1);
       } else {
         delete updated[key];
@@ -511,12 +510,12 @@ if (__DEV__) {
     index: number,
   ) => {
     const oldKey = oldPath[index];
-    const updated = isArray(obj) ? obj.slice() : {...obj};
+    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === oldPath.length) {
       const newKey = newPath[index];
       // $FlowFixMe number or string is fine here
       updated[newKey] = updated[oldKey];
-      if (isArray(updated)) {
+      if (Array.isArray(updated)) {
         updated.splice(((oldKey: any): number), 1);
       } else {
         delete updated[oldKey];
@@ -565,7 +564,7 @@ if (__DEV__) {
       return value;
     }
     const key = path[index];
-    const updated = isArray(obj) ? obj.slice() : {...obj};
+    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
     // $FlowFixMe number or string is fine here
     updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
     return updated;
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 85eace536ac4..a4d0d26fcce1 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -14,7 +14,6 @@ import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import JSResourceReference from 'JSResourceReference';
 
 import hasOwnProperty from 'shared/hasOwnProperty';
-import isArray from 'shared/isArray';
 
 export type ModuleReference<T> = JSResourceReference<T>;
 
@@ -83,7 +82,7 @@ function convertModelToJSON(
 ): JSONValue {
   const json = resolveModelToJSON(request, parent, key, model);
   if (typeof json === 'object' && json !== null) {
-    if (isArray(json)) {
+    if (Array.isArray(json)) {
       const jsonArray: Array<JSONValue> = [];
       for (let i = 0; i < json.length; i++) {
         jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]);
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 0624e693cfe1..4fa871b0c4e8 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -8,9 +8,9 @@
  */
 
 import type {RowEncoding, JSONValue} from './ReactFlightNativeRelayProtocol';
+
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import hasOwnProperty from 'shared/hasOwnProperty';
-import isArray from 'shared/isArray';
 import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 export type ModuleReference<T> = JSResourceReferenceImpl<T>;
@@ -80,7 +80,7 @@ function convertModelToJSON(
 ): JSONValue {
   const json = resolveModelToJSON(request, parent, key, model);
   if (typeof json === 'object' && json !== null) {
-    if (isArray(json)) {
+    if (Array.isArray(json)) {
       const jsonArray: Array<JSONValue> = [];
       for (let i = 0; i < json.length; i++) {
         jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 75beaf0f219b..66a6c9238ab3 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -51,7 +51,6 @@ import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
@@ -288,7 +287,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     return;
   }
 
-  if (isArray(node)) {
+  if (Array.isArray(node)) {
     if (node.length > 0) {
       for (let i = 0; i < node.length; i++) {
         renderNode(request, task, node[i]);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 58c3a9219f64..dfbe3c55f9b6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -44,7 +44,8 @@ import {
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
+
+const isArray = Array.isArray;
 
 type ReactJSONValue =
   | string
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index 9acdc068e8ea..eb9ef5aca9ca 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -10,7 +10,6 @@
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import invariant from 'shared/invariant';
-import isArray from 'shared/isArray';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -111,7 +110,7 @@ function mapIntoArray(
     // so that it's consistent if the number of children grows:
     const childKey =
       nameSoFar === '' ? SEPARATOR + getElementKey(child, 0) : nameSoFar;
-    if (isArray(mappedChild)) {
+    if (Array.isArray(mappedChild)) {
       let escapedChildKey = '';
       if (childKey != null) {
         escapedChildKey = escapeUserProvidedKey(childKey) + '/';
@@ -143,7 +142,7 @@ function mapIntoArray(
   const nextNamePrefix =
     nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
 
-  if (isArray(children)) {
+  if (Array.isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       child = children[i];
       nextName = nextNamePrefix + getElementKey(child, i);
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index f9d2cbb95af1..2c14bef6c020 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -23,7 +23,6 @@ import {
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import checkPropTypes from 'shared/checkPropTypes';
-import isArray from 'shared/isArray';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 import {
@@ -169,7 +168,7 @@ function validateChildKeys(node, parentType) {
   if (typeof node !== 'object') {
     return;
   }
-  if (isArray(node)) {
+  if (Array.isArray(node)) {
     for (let i = 0; i < node.length; i++) {
       const child = node[i];
       if (isValidElement(child)) {
@@ -314,7 +313,7 @@ export function jsxWithValidation(
     let typeString;
     if (type === null) {
       typeString = 'null';
-    } else if (isArray(type)) {
+    } else if (Array.isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
       typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
@@ -353,7 +352,7 @@ export function jsxWithValidation(
     const children = props.children;
     if (children !== undefined) {
       if (isStaticChildren) {
-        if (isArray(children)) {
+        if (Array.isArray(children)) {
           for (let i = 0; i < children.length; i++) {
             validateChildKeys(children[i], type);
           }
@@ -438,7 +437,7 @@ export function createElementWithValidation(type, props, children) {
     let typeString;
     if (type === null) {
       typeString = 'null';
-    } else if (isArray(type)) {
+    } else if (Array.isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
       typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js
index 84cf3eb2caa3..c77b5ef6e9a6 100644
--- a/packages/react/src/jsx/ReactJSXElementValidator.js
+++ b/packages/react/src/jsx/ReactJSXElementValidator.js
@@ -23,7 +23,6 @@ import {
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import hasOwnProperty from 'shared/hasOwnProperty';
-import isArray from 'shared/isArray';
 import {jsxDEV} from './ReactJSXElement';
 
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
@@ -183,7 +182,7 @@ function validateChildKeys(node, parentType) {
     if (typeof node !== 'object') {
       return;
     }
-    if (isArray(node)) {
+    if (Array.isArray(node)) {
       for (let i = 0; i < node.length; i++) {
         const child = node[i];
         if (isValidElement(child)) {
@@ -330,7 +329,7 @@ export function jsxWithValidation(
       let typeString;
       if (type === null) {
         typeString = 'null';
-      } else if (isArray(type)) {
+      } else if (Array.isArray(type)) {
         typeString = 'array';
       } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
         typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
@@ -367,7 +366,7 @@ export function jsxWithValidation(
       const children = props.children;
       if (children !== undefined) {
         if (isStaticChildren) {
-          if (isArray(children)) {
+          if (Array.isArray(children)) {
             for (let i = 0; i < children.length; i++) {
               validateChildKeys(children[i], type);
             }
diff --git a/packages/shared/isArray.js b/packages/shared/isArray.js
deleted file mode 100644
index 6dc19d89b21e..000000000000
--- a/packages/shared/isArray.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-const isArray = Array.isArray;
-
-export default isArray;

From a817840ea7d3818c0590cccb9159b13220f4fdb4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 5 Apr 2021 11:09:43 -0400
Subject: [PATCH 0399/1603] DevTools: useModalDismissSignal bugfix (#21173)

* DevTools: useModalDismissSignal bugfix

Make useModalDismissSignal's manually added click/keyboard events more robust to sync flushed passive effects. (Don't let the same click event that shows a modal dialog also dismiss it.)

* Replaced event.timeStamp check with setTimeout
---
 .../src/devtools/views/hooks.js               | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 3af0ceaeb29a..54b1d7d20ce8 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -207,14 +207,13 @@ export function useModalDismissSignal(
       return () => {};
     }
 
-    const handleDocumentKeyDown = ({key}: any) => {
-      if (key === 'Escape') {
+    const handleDocumentKeyDown = (event: any) => {
+      if (event.key === 'Escape') {
         dismissCallback();
       }
     };
 
     const handleDocumentClick = (event: any) => {
-      // $FlowFixMe
       if (
         modalRef.current !== null &&
         !modalRef.current.contains(event.target)
@@ -226,18 +225,33 @@ export function useModalDismissSignal(
       }
     };
 
-    // It's important to listen to the ownerDocument to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerDocument = modalRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
-    if (dismissOnClickOutside) {
-      ownerDocument.addEventListener('click', handleDocumentClick);
-    }
+    let ownerDocument = 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 = 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.
+      ownerDocument = ((modalRef.current: any): HTMLDivElement).ownerDocument;
+      ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
+      if (dismissOnClickOutside) {
+        ownerDocument.addEventListener('click', handleDocumentClick);
+      }
+    }, 0);
 
     return () => {
-      ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
-      ownerDocument.removeEventListener('click', handleDocumentClick);
+      if (timeoutID !== null) {
+        clearTimeout(timeoutID);
+      }
+
+      if (ownerDocument !== null) {
+        ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
+        ownerDocument.removeEventListener('click', handleDocumentClick);
+      }
     };
   }, [modalRef, dismissCallback, dismissOnClickOutside]);
 }

From 316aa368654427270a53543cd3f4952746374596 Mon Sep 17 00:00:00 2001
From: Andrey Marchenko <tom910ru@gmail.com>
Date: Tue, 6 Apr 2021 07:05:02 +0300
Subject: [PATCH 0400/1603] [Scheduler] Fix de-opt caused by out-of-bounds
 access (#21147)

Scheduler's heap implementation sometimes accesses indices that are out
of bounds (larger than the size of the array). This causes a VM de-opt.

This change fixes the de-opt by always checking the index before
accessing the array. In exchange, we can remove the typecheck on the
returned element.

Background: https://v8.dev/blog/elements-kinds#avoid-reading-beyond-the-length-of-the-array

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 packages/scheduler/src/SchedulerMinHeap.js | 33 +++++++++++-----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/packages/scheduler/src/SchedulerMinHeap.js b/packages/scheduler/src/SchedulerMinHeap.js
index 03d82f4df65c..3a562b44cdb3 100644
--- a/packages/scheduler/src/SchedulerMinHeap.js
+++ b/packages/scheduler/src/SchedulerMinHeap.js
@@ -20,30 +20,28 @@ export function push(heap: Heap, node: Node): void {
 }
 
 export function peek(heap: Heap): Node | null {
-  const first = heap[0];
-  return first === undefined ? null : first;
+  return heap.length === 0 ? null : heap[0];
 }
 
 export function pop(heap: Heap): Node | null {
-  const first = heap[0];
-  if (first !== undefined) {
-    const last = heap.pop();
-    if (last !== first) {
-      heap[0] = last;
-      siftDown(heap, last, 0);
-    }
-    return first;
-  } else {
+  if (heap.length === 0) {
     return null;
   }
+  const first = heap[0];
+  const last = heap.pop();
+  if (last !== first) {
+    heap[0] = last;
+    siftDown(heap, last, 0);
+  }
+  return first;
 }
 
 function siftUp(heap, node, i) {
   let index = i;
-  while (true) {
+  while (index > 0) {
     const parentIndex = (index - 1) >>> 1;
     const parent = heap[parentIndex];
-    if (parent !== undefined && compare(parent, node) > 0) {
+    if (compare(parent, node) > 0) {
       // The parent is larger. Swap positions.
       heap[parentIndex] = node;
       heap[index] = parent;
@@ -58,15 +56,16 @@ function siftUp(heap, node, i) {
 function siftDown(heap, node, i) {
   let index = i;
   const length = heap.length;
-  while (index < 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 (left !== undefined && compare(left, node) < 0) {
-      if (right !== undefined && compare(right, left) < 0) {
+    if (compare(left, node) < 0) {
+      if (rightIndex < length && compare(right, left) < 0) {
         heap[index] = right;
         heap[rightIndex] = node;
         index = rightIndex;
@@ -75,7 +74,7 @@ function siftDown(heap, node, i) {
         heap[leftIndex] = node;
         index = leftIndex;
       }
-    } else if (right !== undefined && compare(right, node) < 0) {
+    } else if (rightIndex < length && compare(right, node) < 0) {
       heap[index] = right;
       heap[rightIndex] = node;
       index = rightIndex;

From 7c1ba2b57d37df165da0f19c65ccc174866b5af7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 6 Apr 2021 09:21:02 -0400
Subject: [PATCH 0401/1603] Proposed new Suspense layout effect semantics
 (#21079)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit contains a proposed change to layout effect semantics within Suspense subtrees: If a component mounts within a Suspense boundary and is later hidden (because of something else suspending) React will cleanup that component’s layout effects (including React-managed refs).

This change will hopefully fix existing bugs that occur because of things like reading layout in a hidden tree and will also enable a point at which to e.g. pause videos and hide user-managed portals. After the suspended boundary resolves, React will setup the component’s layout effects again (including React-managed refs).

The scenario described above is not common. The useTransition API should ensure that Suspense does not revert to its fallback state after being mounted.

Note that these changes are primarily written in terms of the (as of yet internal) Offscreen API as we intend to provide similar effects semantics within recently shown/hidden Offscreen trees in the future. (More to follow.)

(Note that all changes in this PR are behind a new feature flag, enableSuspenseLayoutEffectSemantics, which is disabled for now.)
---
 .../src/ReactFiberBeginWork.new.js            |    5 +
 .../src/ReactFiberBeginWork.old.js            |    5 +
 .../src/ReactFiberClassComponent.new.js       |   45 +-
 .../src/ReactFiberClassComponent.old.js       |   45 +-
 .../src/ReactFiberCommitWork.new.js           |  259 +-
 .../src/ReactFiberCommitWork.old.js           |  259 +-
 .../src/ReactFiberCompleteWork.new.js         |    5 +
 .../src/ReactFiberCompleteWork.old.js         |    5 +
 .../react-reconciler/src/ReactFiberFlags.js   |   50 +-
 .../src/ReactFiberHooks.new.js                |   52 +-
 .../src/ReactFiberHooks.old.js                |   52 +-
 .../src/__tests__/ReactLazy-test.internal.js  |   32 +-
 .../ReactSuspenseEffectsSemantics-test.js     | 3097 +++++++++++++++++
 .../ReactSuspenseFuzz-test.internal.js        |   62 +-
 .../ReactSuspenseWithNoopRenderer-test.js     |   31 +-
 packages/shared/ReactFeatureFlags.js          |    5 +
 .../forks/ReactFeatureFlags.native-fb.js      |    1 +
 .../forks/ReactFeatureFlags.native-oss.js     |    1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |    1 +
 .../ReactFeatureFlags.test-renderer.native.js |    1 +
 .../ReactFeatureFlags.test-renderer.www.js    |    1 +
 .../shared/forks/ReactFeatureFlags.testing.js |    1 +
 .../forks/ReactFeatureFlags.testing.www.js    |    1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |    1 +
 .../shared/forks/ReactFeatureFlags.www.js     |    1 +
 25 files changed, 3878 insertions(+), 140 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 2f4bfe98fb0f..e707ddf69dfb 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -66,6 +66,7 @@ import {
   DidCapture,
   Update,
   Ref,
+  RefStatic,
   ChildDeletion,
   ForceUpdateForLegacySuspense,
   StaticMask,
@@ -83,6 +84,7 @@ import {
   enableScopeAPI,
   enableCache,
   enableLazyContextPropagation,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -854,6 +856,9 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
   ) {
     // Schedule a Ref effect
     workInProgress.flags |= Ref;
+    if (enableSuspenseLayoutEffectSemantics) {
+      workInProgress.flags |= RefStatic;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 9ca4e4afad44..10771e018fdb 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -66,6 +66,7 @@ import {
   DidCapture,
   Update,
   Ref,
+  RefStatic,
   ChildDeletion,
   ForceUpdateForLegacySuspense,
   StaticMask,
@@ -83,6 +84,7 @@ import {
   enableScopeAPI,
   enableCache,
   enableLazyContextPropagation,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import shallowEqual from 'shared/shallowEqual';
@@ -854,6 +856,9 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
   ) {
     // Schedule a Ref effect
     workInProgress.flags |= Ref;
+    if (enableSuspenseLayoutEffectSemantics) {
+      workInProgress.flags |= RefStatic;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index ea1b4cb5e3c8..d64527d58ab6 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -10,9 +10,15 @@
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
+import type {Flags} from './ReactFiberFlags';
 
 import * as React from 'react';
-import {MountLayoutDev, Update, Snapshot} from './ReactFiberFlags';
+import {
+  LayoutStatic,
+  MountLayoutDev,
+  Update,
+  Snapshot,
+} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
@@ -21,6 +27,7 @@ import {
   warnAboutDeprecatedLifecycles,
   enableStrictEffects,
   enableLazyContextPropagation,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,16 +915,19 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
+    let fiberFlags: Flags = Update;
+    if (enableSuspenseLayoutEffectSemantics) {
+      fiberFlags |= LayoutStatic;
+    }
     if (
       __DEV__ &&
       enableStrictEffects &&
       (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
       // Never double-invoke effects for legacy roots.
-      workInProgress.flags |= MountLayoutDev | Update;
-    } else {
-      workInProgress.flags |= Update;
+      fiberFlags |= MountLayoutDev;
     }
+    workInProgress.flags |= fiberFlags;
   }
 }
 
@@ -987,16 +997,19 @@ function resumeMountClassInstance(
     // 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') {
+      let fiberFlags: Flags = Update;
+      if (enableSuspenseLayoutEffectSemantics) {
+        fiberFlags |= LayoutStatic;
+      }
       if (
         __DEV__ &&
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
+        fiberFlags |= MountLayoutDev;
       }
+      workInProgress.flags |= fiberFlags;
     }
     return false;
   }
@@ -1039,31 +1052,37 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
+      let fiberFlags: Flags = Update;
+      if (enableSuspenseLayoutEffectSemantics) {
+        fiberFlags |= LayoutStatic;
+      }
       if (
         __DEV__ &&
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
+        fiberFlags |= MountLayoutDev;
       }
+      workInProgress.flags |= fiberFlags;
     }
   } 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') {
+      let fiberFlags: Flags = Update;
+      if (enableSuspenseLayoutEffectSemantics) {
+        fiberFlags |= LayoutStatic;
+      }
       if (
         __DEV__ &&
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
+        fiberFlags |= MountLayoutDev;
       }
+      workInProgress.flags |= fiberFlags;
     }
 
     // If shouldComponentUpdate returned false, we should still update the
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index b952c24cd041..f9b4128b72f7 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -10,9 +10,15 @@
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
+import type {Flags} from './ReactFiberFlags';
 
 import * as React from 'react';
-import {MountLayoutDev, Update, Snapshot} from './ReactFiberFlags';
+import {
+  LayoutStatic,
+  MountLayoutDev,
+  Update,
+  Snapshot,
+} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
@@ -21,6 +27,7 @@ import {
   warnAboutDeprecatedLifecycles,
   enableStrictEffects,
   enableLazyContextPropagation,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,16 +915,19 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
+    let fiberFlags: Flags = Update;
+    if (enableSuspenseLayoutEffectSemantics) {
+      fiberFlags |= LayoutStatic;
+    }
     if (
       __DEV__ &&
       enableStrictEffects &&
       (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
       // Never double-invoke effects for legacy roots.
-      workInProgress.flags |= MountLayoutDev | Update;
-    } else {
-      workInProgress.flags |= Update;
+      fiberFlags |= MountLayoutDev;
     }
+    workInProgress.flags |= fiberFlags;
   }
 }
 
@@ -987,16 +997,19 @@ function resumeMountClassInstance(
     // 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') {
+      let fiberFlags: Flags = Update;
+      if (enableSuspenseLayoutEffectSemantics) {
+        fiberFlags |= LayoutStatic;
+      }
       if (
         __DEV__ &&
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
+        fiberFlags |= MountLayoutDev;
       }
+      workInProgress.flags |= fiberFlags;
     }
     return false;
   }
@@ -1039,31 +1052,37 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
+      let fiberFlags: Flags = Update;
+      if (enableSuspenseLayoutEffectSemantics) {
+        fiberFlags |= LayoutStatic;
+      }
       if (
         __DEV__ &&
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
+        fiberFlags |= MountLayoutDev;
       }
+      workInProgress.flags |= fiberFlags;
     }
   } 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') {
+      let fiberFlags: Flags = Update;
+      if (enableSuspenseLayoutEffectSemantics) {
+        fiberFlags |= LayoutStatic;
+      }
       if (
         __DEV__ &&
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
         // Never double-invoke effects for legacy roots.
-        workInProgress.flags |= MountLayoutDev | Update;
-      } else {
-        workInProgress.flags |= Update;
+        fiberFlags |= MountLayoutDev;
       }
+      workInProgress.flags |= fiberFlags;
     }
 
     // If shouldComponentUpdate returned false, we should still update the
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e9845e1e65dc..48150f021a32 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -36,6 +36,7 @@ import {
   enableScopeAPI,
   enableStrictEffects,
   deletedTreeCleanUpLevel,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -79,6 +80,8 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
+  LayoutStatic,
+  RefStatic,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -97,7 +100,7 @@ import {
   recordPassiveEffectDuration,
   startPassiveEffectTimer,
 } from './ReactProfilerTimer.new';
-import {ProfileMode} from './ReactTypeOfMode';
+import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
 import {commitUpdateQueue} from './ReactUpdateQueue.new';
 import {
   getPublicInstance,
@@ -149,6 +152,14 @@ if (__DEV__) {
   didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();
 }
 
+// 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.
+// Only used when enableSuspenseLayoutEffectSemantics is enabled.
+let offscreenSubtreeIsHidden: boolean = false;
+const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
+let offscreenSubtreeWasHidden: boolean = false;
+const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
+
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
 let nextEffect: Fiber | null = null;
@@ -172,6 +183,32 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
   }
 };
 
+// Capture errors so they don't interrupt mounting.
+function safelyCallCommitHookLayoutEffectListMount(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
+  if (__DEV__) {
+    invokeGuardedCallback(
+      null,
+      commitHookEffectListMount,
+      null,
+      HookLayout,
+      current,
+    );
+    if (hasCaughtError()) {
+      const unmountError = clearCaughtError();
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  } else {
+    try {
+      commitHookEffectListMount(HookLayout, current);
+    } catch (unmountError) {
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  }
+}
+
 // Capture errors so they don't interrupt unmounting.
 function safelyCallComponentWillUnmount(
   current: Fiber,
@@ -199,6 +236,44 @@ function safelyCallComponentWillUnmount(
   }
 }
 
+// Capture errors so they don't interrupt mounting.
+function safelyCallComponentDidMount(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  instance: any,
+) {
+  if (__DEV__) {
+    invokeGuardedCallback(null, instance.componentDidMount, instance);
+    if (hasCaughtError()) {
+      const unmountError = clearCaughtError();
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  } else {
+    try {
+      instance.componentDidMount();
+    } catch (unmountError) {
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  }
+}
+
+// Capture errors so they don't interrupt mounting.
+function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
+  if (__DEV__) {
+    invokeGuardedCallback(null, commitAttachRef, null, current);
+    if (hasCaughtError()) {
+      const unmountError = clearCaughtError();
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  } else {
+    try {
+      commitAttachRef(current);
+    } catch (unmountError) {
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  }
+}
+
 function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
@@ -942,6 +1017,12 @@ function commitLayoutEffectOnFiber(
 }
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
+  // Suspense layout effects semantics don't change for legacy roots.
+  const isModernRoot = (finishedWork.mode & ConcurrentMode) !== NoMode;
+
+  const current = finishedWork.alternate;
+  const wasHidden = current !== null && current.memoizedState !== null;
+
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
     // children to find all the terminal nodes.
@@ -954,6 +1035,25 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         } else {
           unhideInstance(node.stateNode, node.memoizedProps);
         }
+
+        if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+          // This method is called during mutation; it should detach refs within a hidden subtree.
+          // Attaching refs should be done elsewhere though (during layout).
+          if ((node.flags & RefStatic) !== NoFlags) {
+            if (isHidden) {
+              safelyDetachRef(node, finishedWork);
+            }
+          }
+
+          if (
+            (node.subtreeFlags & (RefStatic | LayoutStatic)) !== NoFlags &&
+            node.child !== null
+          ) {
+            node.child.return = node;
+            node = node.child;
+            continue;
+          }
+        }
       } else if (node.tag === HostText) {
         const instance = node.stateNode;
         if (isHidden) {
@@ -967,13 +1067,61 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         (node.memoizedState: OffscreenState) !== null &&
         node !== finishedWork
       ) {
-        // Found a nested Offscreen component that is hidden. Don't search
-        // any deeper. This tree should remain hidden.
+        // Found a nested Offscreen component that is hidden.
+        // Don't search any deeper. This tree should remain hidden.
+      } else if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+        // When a mounted Suspense subtree gets hidden again, destroy any nested layout effects.
+        if ((node.flags & (RefStatic | LayoutStatic)) !== NoFlags) {
+          switch (node.tag) {
+            case FunctionComponent:
+            case ForwardRef:
+            case MemoComponent:
+            case SimpleMemoComponent: {
+              // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
+              if (isHidden && !wasHidden) {
+                if (
+                  enableProfilerTimer &&
+                  enableProfilerCommitHooks &&
+                  node.mode & ProfileMode
+                ) {
+                  try {
+                    startLayoutEffectTimer();
+                    commitHookEffectListUnmount(HookLayout, node, finishedWork);
+                  } finally {
+                    recordLayoutEffectDuration(node);
+                  }
+                } else {
+                  commitHookEffectListUnmount(HookLayout, node, finishedWork);
+                }
+              }
+              break;
+            }
+            case ClassComponent: {
+              if (isHidden && !wasHidden) {
+                if ((node.flags & RefStatic) !== NoFlags) {
+                  safelyDetachRef(node, finishedWork);
+                }
+                const instance = node.stateNode;
+                if (typeof instance.componentWillUnmount === 'function') {
+                  safelyCallComponentWillUnmount(node, finishedWork, instance);
+                }
+              }
+              break;
+            }
+          }
+        }
+
+        if (node.child !== null) {
+          node.child.return = node;
+          node = node.child;
+          continue;
+        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
         continue;
       }
+
       if (node === finishedWork) {
         return;
       }
@@ -2143,13 +2291,49 @@ function commitLayoutEffects_begin(
   root: FiberRoot,
   committedLanes: Lanes,
 ) {
+  // Suspense layout effects semantics don't change for legacy roots.
+  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
+
   while (nextEffect !== null) {
     const fiber = nextEffect;
     const firstChild = fiber.child;
+
+    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+      // Keep track of the current Offscreen stack's state.
+      if (fiber.tag === OffscreenComponent) {
+        const current = fiber.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const isHidden = fiber.memoizedState !== null;
+
+        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
+        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+
+        offscreenSubtreeWasHiddenStack.push(wasHidden);
+        offscreenSubtreeIsHiddenStack.push(isHidden);
+      }
+    }
+
     if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
       ensureCorrectReturnPointer(firstChild, fiber);
       nextEffect = firstChild;
     } else {
+      if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+        const visibilityChanged =
+          !offscreenSubtreeIsHidden && offscreenSubtreeWasHidden;
+        if (
+          visibilityChanged &&
+          (fiber.subtreeFlags & LayoutStatic) !== NoFlags &&
+          firstChild !== null
+        ) {
+          // We've just shown or hidden a Offscreen tree that contains layout effects.
+          // We only enter this code path for subtrees that are updated,
+          // because newly mounted ones would pass the LayoutMask check above.
+          ensureCorrectReturnPointer(firstChild, fiber);
+          nextEffect = firstChild;
+          continue;
+        }
+      }
+
       commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
     }
   }
@@ -2160,9 +2344,76 @@ function commitLayoutMountEffects_complete(
   root: FiberRoot,
   committedLanes: Lanes,
 ) {
+  // Suspense layout effects semantics don't change for legacy roots.
+  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
+
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if ((fiber.flags & LayoutMask) !== NoFlags) {
+
+    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+      if (fiber.tag === OffscreenComponent) {
+        offscreenSubtreeWasHiddenStack.pop();
+        offscreenSubtreeIsHiddenStack.pop();
+        offscreenSubtreeWasHidden =
+          offscreenSubtreeWasHiddenStack.length > 0 &&
+          offscreenSubtreeWasHiddenStack[
+            offscreenSubtreeWasHiddenStack.length - 1
+          ];
+        offscreenSubtreeIsHidden =
+          offscreenSubtreeIsHiddenStack.length > 0 &&
+          offscreenSubtreeIsHiddenStack[
+            offscreenSubtreeIsHiddenStack.length - 1
+          ];
+      }
+    }
+
+    if (
+      enableSuspenseLayoutEffectSemantics &&
+      isModernRoot &&
+      offscreenSubtreeWasHidden &&
+      !offscreenSubtreeIsHidden
+    ) {
+      // Inside of an Offscreen subtree that changed visibility during this commit.
+      // If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
+      // but if it was just shown, we need to (re)create the effects now.
+      if ((fiber.flags & LayoutStatic) !== NoFlags) {
+        switch (fiber.tag) {
+          case FunctionComponent:
+          case ForwardRef:
+          case SimpleMemoComponent: {
+            if (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              fiber.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
+                safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
+              } finally {
+                recordLayoutEffectDuration(fiber);
+              }
+            } else {
+              safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
+            }
+            break;
+          }
+          case ClassComponent: {
+            const instance = fiber.stateNode;
+            safelyCallComponentDidMount(fiber, fiber.return, instance);
+            break;
+          }
+        }
+      }
+
+      if ((fiber.flags & RefStatic) !== NoFlags) {
+        switch (fiber.tag) {
+          case ClassComponent:
+          case HostComponent:
+            safelyAttachRef(fiber, fiber.return);
+            break;
+        }
+      }
+    } else if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
       if (__DEV__) {
         setCurrentDebugFiberInDEV(fiber);
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 6ed8560bd764..ca3dbe363f07 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -36,6 +36,7 @@ import {
   enableScopeAPI,
   enableStrictEffects,
   deletedTreeCleanUpLevel,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -79,6 +80,8 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
+  LayoutStatic,
+  RefStatic,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -97,7 +100,7 @@ import {
   recordPassiveEffectDuration,
   startPassiveEffectTimer,
 } from './ReactProfilerTimer.old';
-import {ProfileMode} from './ReactTypeOfMode';
+import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
 import {commitUpdateQueue} from './ReactUpdateQueue.old';
 import {
   getPublicInstance,
@@ -149,6 +152,14 @@ if (__DEV__) {
   didWarnAboutUndefinedSnapshotBeforeUpdate = new Set();
 }
 
+// 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.
+// Only used when enableSuspenseLayoutEffectSemantics is enabled.
+let offscreenSubtreeIsHidden: boolean = false;
+const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
+let offscreenSubtreeWasHidden: boolean = false;
+const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
+
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
 let nextEffect: Fiber | null = null;
@@ -172,6 +183,32 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
   }
 };
 
+// Capture errors so they don't interrupt mounting.
+function safelyCallCommitHookLayoutEffectListMount(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+) {
+  if (__DEV__) {
+    invokeGuardedCallback(
+      null,
+      commitHookEffectListMount,
+      null,
+      HookLayout,
+      current,
+    );
+    if (hasCaughtError()) {
+      const unmountError = clearCaughtError();
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  } else {
+    try {
+      commitHookEffectListMount(HookLayout, current);
+    } catch (unmountError) {
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  }
+}
+
 // Capture errors so they don't interrupt unmounting.
 function safelyCallComponentWillUnmount(
   current: Fiber,
@@ -199,6 +236,44 @@ function safelyCallComponentWillUnmount(
   }
 }
 
+// Capture errors so they don't interrupt mounting.
+function safelyCallComponentDidMount(
+  current: Fiber,
+  nearestMountedAncestor: Fiber | null,
+  instance: any,
+) {
+  if (__DEV__) {
+    invokeGuardedCallback(null, instance.componentDidMount, instance);
+    if (hasCaughtError()) {
+      const unmountError = clearCaughtError();
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  } else {
+    try {
+      instance.componentDidMount();
+    } catch (unmountError) {
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  }
+}
+
+// Capture errors so they don't interrupt mounting.
+function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
+  if (__DEV__) {
+    invokeGuardedCallback(null, commitAttachRef, null, current);
+    if (hasCaughtError()) {
+      const unmountError = clearCaughtError();
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  } else {
+    try {
+      commitAttachRef(current);
+    } catch (unmountError) {
+      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+    }
+  }
+}
+
 function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
@@ -942,6 +1017,12 @@ function commitLayoutEffectOnFiber(
 }
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
+  // Suspense layout effects semantics don't change for legacy roots.
+  const isModernRoot = (finishedWork.mode & ConcurrentMode) !== NoMode;
+
+  const current = finishedWork.alternate;
+  const wasHidden = current !== null && current.memoizedState !== null;
+
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
     // children to find all the terminal nodes.
@@ -954,6 +1035,25 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         } else {
           unhideInstance(node.stateNode, node.memoizedProps);
         }
+
+        if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+          // This method is called during mutation; it should detach refs within a hidden subtree.
+          // Attaching refs should be done elsewhere though (during layout).
+          if ((node.flags & RefStatic) !== NoFlags) {
+            if (isHidden) {
+              safelyDetachRef(node, finishedWork);
+            }
+          }
+
+          if (
+            (node.subtreeFlags & (RefStatic | LayoutStatic)) !== NoFlags &&
+            node.child !== null
+          ) {
+            node.child.return = node;
+            node = node.child;
+            continue;
+          }
+        }
       } else if (node.tag === HostText) {
         const instance = node.stateNode;
         if (isHidden) {
@@ -967,13 +1067,61 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         (node.memoizedState: OffscreenState) !== null &&
         node !== finishedWork
       ) {
-        // Found a nested Offscreen component that is hidden. Don't search
-        // any deeper. This tree should remain hidden.
+        // Found a nested Offscreen component that is hidden.
+        // Don't search any deeper. This tree should remain hidden.
+      } else if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+        // When a mounted Suspense subtree gets hidden again, destroy any nested layout effects.
+        if ((node.flags & (RefStatic | LayoutStatic)) !== NoFlags) {
+          switch (node.tag) {
+            case FunctionComponent:
+            case ForwardRef:
+            case MemoComponent:
+            case SimpleMemoComponent: {
+              // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
+              if (isHidden && !wasHidden) {
+                if (
+                  enableProfilerTimer &&
+                  enableProfilerCommitHooks &&
+                  node.mode & ProfileMode
+                ) {
+                  try {
+                    startLayoutEffectTimer();
+                    commitHookEffectListUnmount(HookLayout, node, finishedWork);
+                  } finally {
+                    recordLayoutEffectDuration(node);
+                  }
+                } else {
+                  commitHookEffectListUnmount(HookLayout, node, finishedWork);
+                }
+              }
+              break;
+            }
+            case ClassComponent: {
+              if (isHidden && !wasHidden) {
+                if ((node.flags & RefStatic) !== NoFlags) {
+                  safelyDetachRef(node, finishedWork);
+                }
+                const instance = node.stateNode;
+                if (typeof instance.componentWillUnmount === 'function') {
+                  safelyCallComponentWillUnmount(node, finishedWork, instance);
+                }
+              }
+              break;
+            }
+          }
+        }
+
+        if (node.child !== null) {
+          node.child.return = node;
+          node = node.child;
+          continue;
+        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
         continue;
       }
+
       if (node === finishedWork) {
         return;
       }
@@ -2143,13 +2291,49 @@ function commitLayoutEffects_begin(
   root: FiberRoot,
   committedLanes: Lanes,
 ) {
+  // Suspense layout effects semantics don't change for legacy roots.
+  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
+
   while (nextEffect !== null) {
     const fiber = nextEffect;
     const firstChild = fiber.child;
+
+    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+      // Keep track of the current Offscreen stack's state.
+      if (fiber.tag === OffscreenComponent) {
+        const current = fiber.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const isHidden = fiber.memoizedState !== null;
+
+        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
+        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+
+        offscreenSubtreeWasHiddenStack.push(wasHidden);
+        offscreenSubtreeIsHiddenStack.push(isHidden);
+      }
+    }
+
     if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
       ensureCorrectReturnPointer(firstChild, fiber);
       nextEffect = firstChild;
     } else {
+      if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+        const visibilityChanged =
+          !offscreenSubtreeIsHidden && offscreenSubtreeWasHidden;
+        if (
+          visibilityChanged &&
+          (fiber.subtreeFlags & LayoutStatic) !== NoFlags &&
+          firstChild !== null
+        ) {
+          // We've just shown or hidden a Offscreen tree that contains layout effects.
+          // We only enter this code path for subtrees that are updated,
+          // because newly mounted ones would pass the LayoutMask check above.
+          ensureCorrectReturnPointer(firstChild, fiber);
+          nextEffect = firstChild;
+          continue;
+        }
+      }
+
       commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
     }
   }
@@ -2160,9 +2344,76 @@ function commitLayoutMountEffects_complete(
   root: FiberRoot,
   committedLanes: Lanes,
 ) {
+  // Suspense layout effects semantics don't change for legacy roots.
+  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
+
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if ((fiber.flags & LayoutMask) !== NoFlags) {
+
+    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+      if (fiber.tag === OffscreenComponent) {
+        offscreenSubtreeWasHiddenStack.pop();
+        offscreenSubtreeIsHiddenStack.pop();
+        offscreenSubtreeWasHidden =
+          offscreenSubtreeWasHiddenStack.length > 0 &&
+          offscreenSubtreeWasHiddenStack[
+            offscreenSubtreeWasHiddenStack.length - 1
+          ];
+        offscreenSubtreeIsHidden =
+          offscreenSubtreeIsHiddenStack.length > 0 &&
+          offscreenSubtreeIsHiddenStack[
+            offscreenSubtreeIsHiddenStack.length - 1
+          ];
+      }
+    }
+
+    if (
+      enableSuspenseLayoutEffectSemantics &&
+      isModernRoot &&
+      offscreenSubtreeWasHidden &&
+      !offscreenSubtreeIsHidden
+    ) {
+      // Inside of an Offscreen subtree that changed visibility during this commit.
+      // If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
+      // but if it was just shown, we need to (re)create the effects now.
+      if ((fiber.flags & LayoutStatic) !== NoFlags) {
+        switch (fiber.tag) {
+          case FunctionComponent:
+          case ForwardRef:
+          case SimpleMemoComponent: {
+            if (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              fiber.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
+                safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
+              } finally {
+                recordLayoutEffectDuration(fiber);
+              }
+            } else {
+              safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
+            }
+            break;
+          }
+          case ClassComponent: {
+            const instance = fiber.stateNode;
+            safelyCallComponentDidMount(fiber, fiber.return, instance);
+            break;
+          }
+        }
+      }
+
+      if ((fiber.flags & RefStatic) !== NoFlags) {
+        switch (fiber.tag) {
+          case ClassComponent:
+          case HostComponent:
+            safelyAttachRef(fiber, fiber.return);
+            break;
+        }
+      }
+    } else if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
       if (__DEV__) {
         setCurrentDebugFiberInDEV(fiber);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 0924738f1e95..d27498638ce6 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -58,6 +58,7 @@ import {
 import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
+  RefStatic,
   Update,
   NoFlags,
   DidCapture,
@@ -123,6 +124,7 @@ import {
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import {
   markSpawnedWork,
@@ -157,6 +159,9 @@ function markUpdate(workInProgress: Fiber) {
 
 function markRef(workInProgress: Fiber) {
   workInProgress.flags |= Ref;
+  if (enableSuspenseLayoutEffectSemantics) {
+    workInProgress.flags |= RefStatic;
+  }
 }
 
 function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 017db23b66e4..da962bfdefee 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -58,6 +58,7 @@ import {
 import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
+  RefStatic,
   Update,
   NoFlags,
   DidCapture,
@@ -123,6 +124,7 @@ import {
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import {
   markSpawnedWork,
@@ -157,6 +159,9 @@ function markUpdate(workInProgress: Fiber) {
 
 function markRef(workInProgress: Fiber) {
   workInProgress.flags |= Ref;
+  if (enableSuspenseLayoutEffectSemantics) {
+    workInProgress.flags |= RefStatic;
+  }
 }
 
 function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 5906af7f492d..b711d730c3b2 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,49 +12,51 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b000000000000000000000;
-export const PerformedWork = /*                */ 0b000000000000000000001;
+export const NoFlags = /*                      */ 0b00000000000000000000000;
+export const PerformedWork = /*                */ 0b00000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b000000000000000000010;
-export const Update = /*                       */ 0b000000000000000000100;
+export const Placement = /*                    */ 0b00000000000000000000010;
+export const Update = /*                       */ 0b00000000000000000000100;
 export const PlacementAndUpdate = /*           */ Placement | Update;
-export const Deletion = /*                     */ 0b000000000000000001000;
-export const ChildDeletion = /*                */ 0b000000000000000010000;
-export const ContentReset = /*                 */ 0b000000000000000100000;
-export const Callback = /*                     */ 0b000000000000001000000;
-export const DidCapture = /*                   */ 0b000000000000010000000;
-export const Ref = /*                          */ 0b000000000000100000000;
-export const Snapshot = /*                     */ 0b000000000001000000000;
-export const Passive = /*                      */ 0b000000000010000000000;
-export const Hydrating = /*                    */ 0b000000000100000000000;
+export const Deletion = /*                     */ 0b00000000000000000001000;
+export const ChildDeletion = /*                */ 0b00000000000000000010000;
+export const ContentReset = /*                 */ 0b00000000000000000100000;
+export const Callback = /*                     */ 0b00000000000000001000000;
+export const DidCapture = /*                   */ 0b00000000000000010000000;
+export const Ref = /*                          */ 0b00000000000000100000000;
+export const Snapshot = /*                     */ 0b00000000000001000000000;
+export const Passive = /*                      */ 0b00000000000010000000000;
+export const Hydrating = /*                    */ 0b00000000000100000000000;
 export const HydratingAndUpdate = /*           */ Hydrating | Update;
-export const Visibility = /*                   */ 0b000000001000000000000;
+export const Visibility = /*                   */ 0b00000000001000000000000;
 
 export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
 
 // Union of all commit flags (flags with the lifetime of a particular commit)
-export const HostEffectMask = /*               */ 0b000000001111111111111;
+export const HostEffectMask = /*               */ 0b00000000001111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b000000010000000000000;
-export const ShouldCapture = /*                */ 0b000000100000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b000001000000000000000;
-export const DidPropagateContext = /*          */ 0b000010000000000000000;
-export const NeedsPropagation = /*             */ 0b000100000000000000000;
+export const Incomplete = /*                   */ 0b00000000010000000000000;
+export const ShouldCapture = /*                */ 0b00000000100000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b00000001000000000000000;
+export const DidPropagateContext = /*          */ 0b00000010000000000000000;
+export const NeedsPropagation = /*             */ 0b00000100000000000000000;
 
 // 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 PassiveStatic = /*                */ 0b001000000000000000000;
+export const RefStatic = /*                    */ 0b00001000000000000000000;
+export const LayoutStatic = /*                 */ 0b00010000000000000000000;
+export const PassiveStatic = /*                */ 0b00100000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b010000000000000000000;
-export const MountPassiveDev = /*              */ 0b100000000000000000000;
+export const MountLayoutDev = /*               */ 0b01000000000000000000000;
+export const MountPassiveDev = /*              */ 0b10000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
@@ -88,4 +90,4 @@ export const PassiveMask = Passive | ChildDeletion;
 // Union of tags that don't get reset on clones.
 // This allows certain concepts to persist without recalculting them,
 // e.g. whether a subtree contains passive effects or portals.
-export const StaticMask = PassiveStatic;
+export const StaticMask = LayoutStatic | PassiveStatic | RefStatic;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index cbb755540e28..d5116d1579ec 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -19,6 +19,7 @@ import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {Flags} from './ReactFiberFlags';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -29,6 +30,7 @@ import {
   enableUseRefAccessWarning,
   enableStrictEffects,
   enableLazyContextPropagation,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -57,11 +59,13 @@ import {
 import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
-  Update as UpdateEffect,
-  Passive as PassiveEffect,
-  PassiveStatic as PassiveStaticEffect,
+  LayoutStatic as LayoutStaticEffect,
   MountLayoutDev as MountLayoutDevEffect,
   MountPassiveDev as MountPassiveDevEffect,
+  Passive as PassiveEffect,
+  PassiveStatic as PassiveStaticEffect,
+  StaticMask as StaticMaskEffect,
+  Update as UpdateEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -474,8 +478,8 @@ export function renderWithHooks<Props, SecondArg>(
     // example, in the SuspenseList implementation.
     if (
       current !== null &&
-      (current.flags & PassiveStaticEffect) !==
-        (workInProgress.flags & PassiveStaticEffect)
+      (current.flags & StaticMaskEffect) !==
+        (workInProgress.flags & StaticMaskEffect)
     ) {
       console.error(
         'Internal React error: Expected static flag was missing. Please ' +
@@ -1478,20 +1482,18 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
+  let fiberFlags: Flags = UpdateEffect;
+  if (enableSuspenseLayoutEffectSemantics) {
+    fiberFlags |= LayoutStaticEffect;
+  }
   if (
     __DEV__ &&
     enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
-    return mountEffectImpl(
-      MountLayoutDevEffect | UpdateEffect,
-      HookLayout,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+    fiberFlags |= MountLayoutDevEffect;
   }
+  return mountEffectImpl(fiberFlags, HookLayout, create, deps);
 }
 
 function updateLayoutEffect(
@@ -1550,25 +1552,23 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
+  let fiberFlags: Flags = UpdateEffect;
+  if (enableSuspenseLayoutEffectSemantics) {
+    fiberFlags |= LayoutStaticEffect;
+  }
   if (
     __DEV__ &&
     enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
-    return mountEffectImpl(
-      MountLayoutDevEffect | UpdateEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
-  } else {
-    return mountEffectImpl(
-      UpdateEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
+    fiberFlags |= MountLayoutDevEffect;
   }
+  return mountEffectImpl(
+    fiberFlags,
+    HookLayout,
+    imperativeHandleEffect.bind(null, create, ref),
+    effectDeps,
+  );
 }
 
 function updateImperativeHandle<T>(
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 3c7e87d02dc6..77d82bf13c86 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -19,6 +19,7 @@ import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {Flags} from './ReactFiberFlags';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -29,6 +30,7 @@ import {
   enableUseRefAccessWarning,
   enableStrictEffects,
   enableLazyContextPropagation,
+  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -57,11 +59,13 @@ import {
 import {readContext, checkIfContextChanged} from './ReactFiberNewContext.old';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
-  Update as UpdateEffect,
-  Passive as PassiveEffect,
-  PassiveStatic as PassiveStaticEffect,
+  LayoutStatic as LayoutStaticEffect,
   MountLayoutDev as MountLayoutDevEffect,
   MountPassiveDev as MountPassiveDevEffect,
+  Passive as PassiveEffect,
+  PassiveStatic as PassiveStaticEffect,
+  StaticMask as StaticMaskEffect,
+  Update as UpdateEffect,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -474,8 +478,8 @@ export function renderWithHooks<Props, SecondArg>(
     // example, in the SuspenseList implementation.
     if (
       current !== null &&
-      (current.flags & PassiveStaticEffect) !==
-        (workInProgress.flags & PassiveStaticEffect)
+      (current.flags & StaticMaskEffect) !==
+        (workInProgress.flags & StaticMaskEffect)
     ) {
       console.error(
         'Internal React error: Expected static flag was missing. Please ' +
@@ -1478,20 +1482,18 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
+  let fiberFlags: Flags = UpdateEffect;
+  if (enableSuspenseLayoutEffectSemantics) {
+    fiberFlags |= LayoutStaticEffect;
+  }
   if (
     __DEV__ &&
     enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
-    return mountEffectImpl(
-      MountLayoutDevEffect | UpdateEffect,
-      HookLayout,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(UpdateEffect, HookLayout, create, deps);
+    fiberFlags |= MountLayoutDevEffect;
   }
+  return mountEffectImpl(fiberFlags, HookLayout, create, deps);
 }
 
 function updateLayoutEffect(
@@ -1550,25 +1552,23 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
+  let fiberFlags: Flags = UpdateEffect;
+  if (enableSuspenseLayoutEffectSemantics) {
+    fiberFlags |= LayoutStaticEffect;
+  }
   if (
     __DEV__ &&
     enableStrictEffects &&
     (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
   ) {
-    return mountEffectImpl(
-      MountLayoutDevEffect | UpdateEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
-  } else {
-    return mountEffectImpl(
-      UpdateEffect,
-      HookLayout,
-      imperativeHandleEffect.bind(null, create, ref),
-      effectDeps,
-    );
+    fiberFlags |= MountLayoutDevEffect;
   }
+  return mountEffectImpl(
+    fiberFlags,
+    HookLayout,
+    imperativeHandleEffect.bind(null, create, ref),
+    effectDeps,
+  );
 }
 
 function updateImperativeHandle<T>(
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index b7f1570823c1..b9e6b0c26806 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -1271,6 +1271,9 @@ describe('ReactLazy', () => {
   // @gate enableLazyElements
   it('mount and reorder lazy types', async () => {
     class Child extends React.Component {
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('Did unmount: ' + this.props.label);
+      }
       componentDidMount() {
         Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
       }
@@ -1348,6 +1351,12 @@ describe('ReactLazy', () => {
     expect(Scheduler).toFlushAndYield(['Init B2', 'Loading...']);
     jest.runAllTimers();
 
+    gate(flags => {
+      if (flags.enableSuspenseLayoutEffectSemantics) {
+        expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']);
+      }
+    });
+
     // The suspense boundary should've triggered now.
     expect(root).toMatchRenderedOutput('Loading...');
     await resolveB2({default: ChildB});
@@ -1356,12 +1365,23 @@ describe('ReactLazy', () => {
     expect(Scheduler).toFlushAndYield(['Init A2']);
     await LazyChildA2;
 
-    expect(Scheduler).toFlushAndYield([
-      'b',
-      'a',
-      'Did update: b',
-      'Did update: a',
-    ]);
+    gate(flags => {
+      if (flags.enableSuspenseLayoutEffectSemantics) {
+        expect(Scheduler).toFlushAndYield([
+          'b',
+          'a',
+          'Did mount: b',
+          'Did mount: a',
+        ]);
+      } else {
+        expect(Scheduler).toFlushAndYield([
+          'b',
+          'a',
+          'Did update: b',
+          'Did update: a',
+        ]);
+      }
+    });
     expect(root).toMatchRenderedOutput('ba');
   });
 
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 000000000000..1dbc4404040f
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -0,0 +1,3097 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+let React;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let getCacheForType;
+let caches;
+let seededCache;
+let ErrorBoundary;
+
+describe('ReactSuspenseEffectsSemantics', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+
+    getCacheForType = React.unstable_getCacheForType;
+
+    caches = [];
+    seededCache = null;
+
+    ErrorBoundary = class extends React.Component {
+      state = {error: null};
+      componentDidCatch(error) {
+        this.setState({error});
+      }
+      render() {
+        if (this.state.error) {
+          Scheduler.unstable_yieldValue('ErrorBoundary render: catch');
+          return this.props.fallback;
+        }
+        Scheduler.unstable_yieldValue('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.unstable_yieldValue(`Suspend:${text}`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error:${text}`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(`Text:${text} render`);
+    React.useLayoutEffect(() => {
+      Scheduler.unstable_yieldValue(`Text:${text} create layout`);
+      return () => {
+        Scheduler.unstable_yieldValue(`Text:${text} destroy layout`);
+      };
+    }, []);
+    React.useEffect(() => {
+      Scheduler.unstable_yieldValue(`Text:${text} create passive`);
+      return () => {
+        Scheduler.unstable_yieldValue(`Text:${text} destroy passive`);
+      };
+    }, []);
+    return <span prop={text}>{children}</span>;
+  }
+
+  function AsyncText({children = null, text}) {
+    readText(text);
+    Scheduler.unstable_yieldValue(`AsyncText:${text} render`);
+    React.useLayoutEffect(() => {
+      Scheduler.unstable_yieldValue(`AsyncText:${text} create layout`);
+      return () => {
+        Scheduler.unstable_yieldValue(`AsyncText:${text} destroy layout`);
+      };
+    }, []);
+    React.useEffect(() => {
+      Scheduler.unstable_yieldValue(`AsyncText:${text} create passive`);
+      return () => {
+        Scheduler.unstable_yieldValue(`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 span(prop, children = []) {
+    return {type: 'span', children, prop, hidden: false};
+  }
+
+  function spanHidden(prop, children = []) {
+    return {type: 'span', children, prop, hidden: true};
+  }
+
+  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 enableCache
+    it('should not change behavior in concurrent mode', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(
+            `ClassText:${text} componentWillUnmount`,
+          );
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      function App({children = null}) {
+        Scheduler.unstable_yieldValue('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App create layout');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App create passive');
+          return () => {
+            Scheduler.unstable_yieldValue('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 ReactNoop.act(async () => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" ms={1000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'ClassText:Inside:After render',
+        'Text:Fallback render',
+        'Text:Outside render',
+        'Text:Fallback create layout',
+        'Text:Outside create layout',
+        'App create layout',
+        'Text:Fallback create passive',
+        'Text:Outside create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Fallback'),
+        span('Outside'),
+      ]);
+
+      // Resolving the suspended resource should
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside:Before render',
+        'AsyncText:Async render',
+        'ClassText:Inside:After render',
+        'Text:Fallback destroy layout',
+        '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.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Async'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App destroy layout',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'ClassText:Inside:After componentWillUnmount',
+        'Text:Outside destroy layout',
+        'App destroy passive',
+        'Text:Inside:Before destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outside destroy passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([]);
+    });
+
+    // @gate enableCache
+    it('should not change behavior in sync', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(
+            `ClassText:${text} componentWillUnmount`,
+          );
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      function App({children = null}) {
+        Scheduler.unstable_yieldValue('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App create layout');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App create passive');
+          return () => {
+            Scheduler.unstable_yieldValue('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.
+      ReactNoop.act(() => {
+        ReactNoop.renderLegacySyncRoot(
+          <App>
+            <AsyncText text="Async" ms={1000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'ClassText:Inside:After render',
+        'Text:Fallback render',
+        'Text:Outside render',
+        '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.getChildren()).toEqual([
+        spanHidden('Inside:Before'),
+        spanHidden('Inside:After'),
+        span('Fallback'),
+        span('Outside'),
+      ]);
+
+      // Resolving the suspended resource should
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'AsyncText:Async render',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Async'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.renderLegacySyncRoot(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App destroy layout',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'ClassText:Inside:After componentWillUnmount',
+        'Text:Outside destroy layout',
+        'App destroy passive',
+        'Text:Inside:Before destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outside destroy passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([]);
+    });
+  });
+
+  describe('layout effects within a tree that re-suspends in an update', () => {
+    // @gate enableCache
+    it('should not be destroyed or recreated in legacy roots', async () => {
+      function App({children = null}) {
+        Scheduler.unstable_yieldValue('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App create layout');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App create passive');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<Text text="Fallback" />}>
+              <Text text="Inside:Before" />
+              {children}
+              <Text text="Inside:After" />
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      // Mount
+      ReactNoop.act(() => {
+        ReactNoop.renderLegacySyncRoot(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Inside:Before render',
+        'Text:Inside:After render',
+        'Text:Outside render',
+        '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.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      // Schedule an update that causes React to suspend.
+      ReactNoop.act(() => {
+        ReactNoop.renderLegacySyncRoot(
+          <App>
+            <AsyncText text="Async" ms={1000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'Text:Inside:After render',
+        'Text:Fallback render',
+        'Text:Outside render',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside:Before'),
+        spanHidden('Inside:After'),
+        span('Fallback'),
+        span('Outside'),
+      ]);
+
+      await advanceTimers(1000);
+
+      // Noop since sync root has already committed
+      expect(Scheduler).toHaveYielded([]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside:Before'),
+        spanHidden('Inside:After'),
+        span('Fallback'),
+        span('Outside'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'AsyncText:Async render',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Async'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.renderLegacySyncRoot(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App destroy layout',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Inside:After destroy layout',
+        '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 enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    it('should be destroyed and recreated for function components', async () => {
+      function App({children = null}) {
+        Scheduler.unstable_yieldValue('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App create layout');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App create passive');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<Text text="Fallback" />}>
+              <Text text="Inside:Before" />
+              {children}
+              <Text text="Inside:After" />
+            </Suspense>
+            <Text text="Outside" />
+          </>
+        );
+      }
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Inside:Before render',
+        'Text:Inside:After render',
+        'Text:Outside render',
+        '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.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      // Schedule an update that causes React to suspend.
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" ms={1000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Inside:Before render',
+        'Suspend:Async',
+        'Text:Inside:After render',
+        'Text:Fallback render',
+        'Text:Outside render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      await advanceTimers(1000);
+
+      // Timing out should commit the fallback and destroy inner layout effects.
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside:Before destroy layout',
+        'Text:Inside:After destroy layout',
+        'Text:Fallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside:Before'),
+        spanHidden('Inside:After'),
+        span('Fallback'),
+        span('Outside'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside:Before render',
+        'AsyncText:Async render',
+        'Text:Inside:After render',
+        '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.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Async'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App destroy layout',
+        'Text:Inside:Before destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Inside:After destroy layout',
+        '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 enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    it('should be destroyed and recreated for class components', async () => {
+      class ClassText extends React.Component {
+        componentDidMount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(
+            `ClassText:${text} componentWillUnmount`,
+          );
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      function App({children = null}) {
+        Scheduler.unstable_yieldValue('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App create layout');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App create passive');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy passive');
+          };
+        }, []);
+        return (
+          <>
+            <Suspense fallback={<ClassText text="Fallback" />}>
+              <ClassText text="Inside:Before" />
+              {children}
+              <ClassText text="Inside:After" />
+            </Suspense>
+            <ClassText text="Outside" />
+          </>
+        );
+      }
+
+      // Mount
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      // Schedule an update that causes React to suspend.
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" ms={1000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'ClassText:Inside:Before render',
+        'Suspend:Async',
+        'ClassText:Inside:After render',
+        'ClassText:Fallback render',
+        'ClassText:Outside render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      await advanceTimers(1000);
+
+      // Timing out should commit the fallback and destroy inner layout effects.
+      expect(Scheduler).toHaveYielded([
+        'ClassText:Inside:Before componentWillUnmount',
+        'ClassText:Inside:After componentWillUnmount',
+        'ClassText:Fallback componentDidMount',
+        'ClassText:Outside componentDidUpdate',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside:Before'),
+        spanHidden('Inside:After'),
+        span('Fallback'),
+        span('Outside'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([
+        span('Inside:Before'),
+        span('Async'),
+        span('Inside:After'),
+        span('Outside'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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 enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    it('should be destroyed and recreated when nested below host components', async () => {
+      function App({children = null}) {
+        Scheduler.unstable_yieldValue('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App create layout');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App create passive');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy passive');
+          };
+        }, []);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <Text text="Outer">
+              <Text text="Inner" />
+            </Text>
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Inner create layout',
+        'Text:Outer create layout',
+        'App create layout',
+        'Text:Inner create passive',
+        'Text:Outer create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Outer', [span('Inner')])]);
+
+      // Schedule an update that causes React to suspend.
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" ms={1000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Suspend:Async',
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Fallback render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Outer', [span('Inner')])]);
+
+      await advanceTimers(1000);
+
+      // Timing out should commit the fallback and destroy inner layout effects.
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer destroy layout',
+        'Text:Inner destroy layout',
+        'Text:Fallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Outer', [spanHidden('Inner')]),
+        span('Fallback'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'AsyncText:Async render',
+        'Text:Outer render',
+        'Text:Inner render',
+        '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.getChildren()).toEqual([
+        span('Async'),
+        span('Outer', [span('Inner')]),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Outer destroy layout',
+        'Text:Inner destroy layout',
+        'App destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outer destroy passive',
+        'Text:Inner destroy passive',
+      ]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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.unstable_yieldValue('App render');
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App create layout');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy layout');
+          };
+        }, []);
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('App create passive');
+          return () => {
+            Scheduler.unstable_yieldValue('App destroy passive');
+          };
+        }, []);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <Text text="Outer">
+              <MemoizedText text="MemoizedInner" />
+            </Text>
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Text:Outer render',
+        'Text:MemoizedInner render',
+        'Text:MemoizedInner create layout',
+        'Text:Outer create layout',
+        'App create layout',
+        'Text:MemoizedInner create passive',
+        'Text:Outer create passive',
+        'App create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Outer', [span('MemoizedInner')]),
+      ]);
+
+      // Schedule an update that causes React to suspend.
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async" ms={1000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Suspend:Async',
+        'Text:Outer render',
+        // Text:MemoizedInner is memoized
+        'Text:Fallback render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Outer', [span('MemoizedInner')]),
+      ]);
+
+      await advanceTimers(1000);
+
+      // Timing out should commit the fallback and destroy inner layout effects.
+      // Even though the innermost layout effects are beneat a hidden HostComponent.
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer destroy layout',
+        'Text:MemoizedInner destroy layout',
+        'Text:Fallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Outer', [spanHidden('MemoizedInner')]),
+        span('Fallback'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'AsyncText:Async render',
+        'Text:Outer render',
+        '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.getChildren()).toEqual([
+        span('Async'),
+        span('Outer', [span('MemoizedInner')]),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App destroy layout',
+        'AsyncText:Async destroy layout',
+        'Text:Outer destroy layout',
+        'Text:MemoizedInner destroy layout',
+        'App destroy passive',
+        'AsyncText:Async destroy passive',
+        'Text:Outer destroy passive',
+        'Text:MemoizedInner destroy passive',
+      ]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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 ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Outer create layout',
+        'Text:Inner create layout',
+        'Text:Outer create passive',
+        'Text:Inner create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Outer'), span('Inner')]);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App innerChildren={<AsyncText text="InnerAsync_1" ms={1000} />} />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+        'Text:Inner destroy layout',
+        'Text:InnerFallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:InnerFallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Outer'),
+        spanHidden('Inner'),
+        span('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.)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_1" ms={1000} />}
+            innerChildren={<AsyncText text="InnerAsync_1" ms={1000} />}
+          />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+        'Text:OuterFallback render',
+        'Text:Outer destroy layout',
+        'Text:InnerFallback destroy layout',
+        'Text:OuterFallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:OuterFallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Outer'),
+        spanHidden('Inner'),
+        spanHidden('InnerFallback'),
+        span('OuterFallback'),
+      ]);
+
+      // Show the inner Susepnse subtree (no effects should be recreated)
+      await ReactNoop.act(async () => {
+        await resolveText('InnerAsync_1');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_1 render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Outer'),
+        spanHidden('Inner'),
+        spanHidden('InnerFallback'),
+        span('OuterFallback'),
+      ]);
+
+      // Suspend the inner Suspense subtree (no effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_1" ms={1000} />}
+            innerChildren={<AsyncText text="InnerAsync_2" ms={1000} />}
+          />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'Suspend:InnerAsync_2',
+        'Text:InnerFallback render',
+        'Text:OuterFallback render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Outer'),
+        spanHidden('Inner'),
+        spanHidden('InnerFallback'),
+        span('OuterFallback'),
+      ]);
+
+      // Show the outer Susepnse subtree (only outer effects should be recreated)
+      await ReactNoop.act(async () => {
+        await resolveText('OuterAsync_1');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'AsyncText:OuterAsync_1 render',
+        'Text:Inner render',
+        'Suspend:InnerAsync_2',
+        'Text:InnerFallback render',
+        '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',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Outer'),
+        span('OuterAsync_1'),
+        spanHidden('Inner'),
+        span('InnerFallback'),
+      ]);
+
+      // Show the inner Susepnse subtree (only inner effects should be recreated)
+      await ReactNoop.act(async () => {
+        await resolveText('InnerAsync_2');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inner render',
+        'AsyncText:InnerAsync_2 render',
+        'Text:InnerFallback destroy layout',
+        'Text:Inner create layout',
+        'AsyncText:InnerAsync_2 create layout',
+        'Text:InnerFallback destroy passive',
+        'AsyncText:InnerAsync_2 create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Outer'),
+        span('OuterAsync_1'),
+        span('Inner'),
+        span('InnerAsync_2'),
+      ]);
+
+      // Suspend the outer Suspense subtree (all effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_2" ms={1000} />}
+            innerChildren={<AsyncText text="InnerAsync_2" ms={1000} />}
+          />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Suspend:OuterAsync_2',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_2 render',
+        'Text:OuterFallback render',
+        'Text:Outer destroy layout',
+        'AsyncText:OuterAsync_1 destroy layout',
+        'Text:Inner destroy layout',
+        'AsyncText:InnerAsync_2 destroy layout',
+        'Text:OuterFallback create layout',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Outer'),
+        spanHidden('OuterAsync_1'),
+        spanHidden('Inner'),
+        spanHidden('InnerAsync_2'),
+        span('OuterFallback'),
+      ]);
+
+      // Show the outer Suspense subtree (all effects should be recreated)
+      await ReactNoop.act(async () => {
+        await resolveText('OuterAsync_2');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:OuterFallback create passive',
+        'Text:Outer render',
+        'AsyncText:OuterAsync_2 render',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_2 render',
+        '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.getChildren()).toEqual([
+        span('Outer'),
+        span('OuterAsync_2'),
+        span('Inner'),
+        span('InnerAsync_2'),
+      ]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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 ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'Text:Outside render',
+        'Text:Inside create layout',
+        'Text:Outside create layout',
+        'Text:Inside create passive',
+        'Text:Outside create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside'),
+        span('Outside'),
+      ]);
+
+      // Suspend the outer shell
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App outerChildren={<AsyncText text="OutsideAsync" ms={1000} />} />,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'Suspend:OutsideAsync',
+        'Text:Fallback:Inside render',
+        'Text:Fallback:Outside render',
+        'Text:Outside render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside'),
+        span('Outside'),
+      ]);
+
+      // Timing out should commit the fallback and destroy inner layout effects.
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside destroy layout',
+        'Text:Fallback:Inside create layout',
+        'Text:Fallback:Outside create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield([
+        'Text:Fallback:Inside create passive',
+        'Text:Fallback:Outside create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside'),
+        span('Fallback:Inside'),
+        span('Fallback:Outside'),
+        span('Outside'),
+      ]);
+
+      // Suspend the fallback and verify that it's effects get cleaned up as well
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App
+            fallbackChildren={<AsyncText text="FallbackAsync" ms={1000} />}
+            outerChildren={<AsyncText text="OutsideAsync" ms={1000} />}
+          />,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'Suspend:OutsideAsync',
+        'Text:Fallback:Inside render',
+        'Suspend:FallbackAsync',
+        'Text:Fallback:Fallback render',
+        'Text:Fallback:Outside render',
+        'Text:Outside render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside'),
+        span('Fallback:Inside'),
+        span('Fallback:Outside'),
+        span('Outside'),
+      ]);
+
+      // Timing out should commit the inner fallback and destroy outer fallback layout effects.
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Fallback:Inside destroy layout',
+        'Text:Fallback:Fallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield([
+        'Text:Fallback:Fallback create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside'),
+        spanHidden('Fallback:Inside'),
+        span('Fallback:Fallback'),
+        span('Fallback:Outside'),
+        span('Outside'),
+      ]);
+
+      // Resolving both resources should cleanup fallabck effects and recreate main effects
+      await ReactNoop.act(async () => {
+        await resolveText('FallbackAsync');
+        await resolveText('OutsideAsync');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'AsyncText:OutsideAsync render',
+        'Text:Fallback:Fallback destroy layout',
+        '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.getChildren()).toEqual([
+        span('Inside'),
+        span('OutsideAsync'),
+        span('Outside'),
+      ]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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 ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'Text:Outside render',
+        'Text:Inside create layout',
+        'Text:Outside create layout',
+        'Text:Inside create passive',
+        'Text:Outside create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside'),
+        span('Outside'),
+      ]);
+
+      // Suspend both the outer boundary and the fallback
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OutsideAsync" ms={1000} />}
+            fallbackChildren={<AsyncText text="FallbackAsync" ms={1000} />}
+          />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        '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 layout',
+        'Text:Fallback:Outside create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield([
+        'Text:Fallback:Fallback create passive',
+        'Text:Fallback:Outside create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside'),
+        span('Fallback:Fallback'),
+        span('Fallback:Outside'),
+        span('Outside'),
+      ]);
+
+      // Resolving the inside fallback
+      await ReactNoop.act(async () => {
+        await resolveText('FallbackAsync');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Fallback:Inside render',
+        'AsyncText:FallbackAsync render',
+        'Text:Fallback:Fallback destroy layout',
+        '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.getChildren()).toEqual([
+        spanHidden('Inside'),
+        span('Fallback:Inside'),
+        span('FallbackAsync'),
+        span('Fallback:Outside'),
+        span('Outside'),
+      ]);
+
+      // Resolving the outer fallback only
+      await ReactNoop.act(async () => {
+        await resolveText('OutsideAsync');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'AsyncText:OutsideAsync render',
+        'Text:Fallback:Inside destroy layout',
+        'AsyncText:FallbackAsync destroy layout',
+        '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.getChildren()).toEqual([
+        span('Inside'),
+        span('OutsideAsync'),
+        span('Outside'),
+      ]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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 ReactNoop.act(async () => {
+        ReactNoop.render(<App shouldSuspend={false} />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'Text:Outside render',
+        'Text:Inside create layout',
+        'Text:Outside create layout',
+        'Text:Inside create passive',
+        'Text:Outside create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside'),
+        span('Outside'),
+      ]);
+
+      // Suspending a component in the middle of the tree
+      // should still properly cleanup effects deeper in the tree
+      ReactNoop.act(() => {
+        ReactNoop.render(<App shouldSuspend={true} />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Suspend:Suspend',
+        'Text:Fallback render',
+        'Text:Outside render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside'),
+        span('Outside'),
+      ]);
+
+      // Timing out should commit the inner fallback and destroy outer fallback layout effects.
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside destroy layout',
+        'Text:Fallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Inside'),
+        span('Fallback'),
+        span('Outside'),
+      ]);
+
+      // Resolving should cleanup.
+      await ReactNoop.act(async () => {
+        await resolveText('Suspend');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Inside render',
+        'Text:Fallback destroy layout',
+        'Text:Inside create layout',
+        'Text:Fallback destroy passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Inside'),
+        span('Outside'),
+      ]);
+    });
+
+    describe('that throw errors', () => {
+      // @gate enableSuspenseLayoutEffectSemantics
+      // @gate enableCache
+      it('are properly handled for componentDidMount', async () => {
+        let componentDidMountShouldThrow = false;
+
+        class ThrowsInDidMount extends React.Component {
+          componentWillUnmount() {
+            Scheduler.unstable_yieldValue(
+              'ThrowsInDidMount componentWillUnmount',
+            );
+          }
+          componentDidMount() {
+            Scheduler.unstable_yieldValue('ThrowsInDidMount componentDidMount');
+            if (componentDidMountShouldThrow) {
+              throw Error('expected');
+            }
+          }
+          render() {
+            Scheduler.unstable_yieldValue('ThrowsInDidMount render');
+            return <span prop="ThrowsInDidMount" />;
+          }
+        }
+
+        function App({children = null}) {
+          Scheduler.unstable_yieldValue('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('App create layout');
+            return () => {
+              Scheduler.unstable_yieldValue('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInDidMount />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInDidMount render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'ThrowsInDidMount componentDidMount',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('ThrowsInDidMount'),
+          span('Inside'),
+          span('Outside'),
+        ]);
+
+        // Schedule an update that causes React to suspend.
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" ms={1000} />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'ThrowsInDidMount render',
+          'Text:Inside render',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'ThrowsInDidMount componentWillUnmount',
+          'Text:Inside destroy layout',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          spanHidden('ThrowsInDidMount'),
+          spanHidden('Inside'),
+          span('Fallback'),
+          span('Outside'),
+        ]);
+
+        // Resolve the pending suspense and throw
+        componentDidMountShouldThrow = true;
+        await ReactNoop.act(async () => {
+          await resolveText('Async');
+        });
+        expect(Scheduler).toHaveYielded([
+          'AsyncText:Async render',
+          'ThrowsInDidMount render',
+          'Text:Inside render',
+          '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 layout and passive effects in the errored tree.
+          'App destroy layout',
+          'AsyncText:Async destroy layout',
+          'ThrowsInDidMount componentWillUnmount',
+          'Text:Inside destroy layout',
+          '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 layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+      });
+
+      // @gate enableSuspenseLayoutEffectSemantics
+      // @gate enableCache
+      it('are properly handled for componentWillUnmount', async () => {
+        class ThrowsInWillUnmount extends React.Component {
+          componentDidMount() {
+            Scheduler.unstable_yieldValue(
+              'ThrowsInWillUnmount componentDidMount',
+            );
+          }
+          componentWillUnmount() {
+            Scheduler.unstable_yieldValue(
+              'ThrowsInWillUnmount componentWillUnmount',
+            );
+            throw Error('expected');
+          }
+          render() {
+            Scheduler.unstable_yieldValue('ThrowsInWillUnmount render');
+            return <span prop="ThrowsInWillUnmount" />;
+          }
+        }
+
+        function App({children = null}) {
+          Scheduler.unstable_yieldValue('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('App create layout');
+            return () => {
+              Scheduler.unstable_yieldValue('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInWillUnmount />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInWillUnmount render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'ThrowsInWillUnmount componentDidMount',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('ThrowsInWillUnmount'),
+          span('Inside'),
+          span('Outside'),
+        ]);
+
+        // Schedule an update that suspends and triggers our error code.
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" ms={1000} />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'ThrowsInWillUnmount render',
+          'Text:Inside render',
+          '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-progess commit
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+
+          // Destroy layout and passive effects in the errored tree.
+          'App destroy layout',
+          'ThrowsInWillUnmount componentWillUnmount',
+          'Text:Fallback destroy layout',
+          '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 layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+      });
+
+      // @gate enableSuspenseLayoutEffectSemantics
+      // @gate enableCache
+      // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
+      it('are properly handled for layout effect creation', async () => {
+        let useLayoutEffectShouldThrow = false;
+
+        function ThrowsInLayoutEffect() {
+          Scheduler.unstable_yieldValue('ThrowsInLayoutEffect render');
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue(
+              'ThrowsInLayoutEffect useLayoutEffect create',
+            );
+            if (useLayoutEffectShouldThrow) {
+              throw Error('expected');
+            }
+            return () => {
+              Scheduler.unstable_yieldValue(
+                'ThrowsInLayoutEffect useLayoutEffect destroy',
+              );
+            };
+          }, []);
+          return <span prop="ThrowsInLayoutEffect" />;
+        }
+
+        function App({children = null}) {
+          Scheduler.unstable_yieldValue('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('App create layout');
+            return () => {
+              Scheduler.unstable_yieldValue('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInLayoutEffect />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInLayoutEffect render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'ThrowsInLayoutEffect useLayoutEffect create',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('ThrowsInLayoutEffect'),
+          span('Inside'),
+          span('Outside'),
+        ]);
+
+        // Schedule an update that causes React to suspend.
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" ms={1000} />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'ThrowsInLayoutEffect render',
+          'Text:Inside render',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'ThrowsInLayoutEffect useLayoutEffect destroy',
+          'Text:Inside destroy layout',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          spanHidden('ThrowsInLayoutEffect'),
+          spanHidden('Inside'),
+          span('Fallback'),
+          span('Outside'),
+        ]);
+
+        // Resolve the pending suspense and throw
+        useLayoutEffectShouldThrow = true;
+        await ReactNoop.act(async () => {
+          await resolveText('Async');
+        });
+        expect(Scheduler).toHaveYielded([
+          'AsyncText:Async render',
+          'ThrowsInLayoutEffect render',
+          'Text:Inside render',
+
+          '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-progess 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 layout',
+          '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 layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+      });
+
+      // @gate enableSuspenseLayoutEffectSemantics
+      // @gate enableCache
+      // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
+      it('are properly handled for layout effect descruction', async () => {
+        function ThrowsInLayoutEffectDestroy() {
+          Scheduler.unstable_yieldValue('ThrowsInLayoutEffectDestroy render');
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue(
+              'ThrowsInLayoutEffectDestroy useLayoutEffect create',
+            );
+            return () => {
+              Scheduler.unstable_yieldValue(
+                'ThrowsInLayoutEffectDestroy useLayoutEffect destroy',
+              );
+              throw Error('expected');
+            };
+          }, []);
+          return <span prop="ThrowsInLayoutEffectDestroy" />;
+        }
+
+        function App({children = null}) {
+          Scheduler.unstable_yieldValue('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('App create layout');
+            return () => {
+              Scheduler.unstable_yieldValue('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInLayoutEffectDestroy />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInLayoutEffectDestroy render',
+          'Text:Inside render',
+          'Text:Outside render',
+          'ThrowsInLayoutEffectDestroy useLayoutEffect create',
+          'Text:Inside create layout',
+          'Text:Outside create layout',
+          'App create layout',
+          'Text:Inside create passive',
+          'Text:Outside create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('ThrowsInLayoutEffectDestroy'),
+          span('Inside'),
+          span('Outside'),
+        ]);
+
+        // Schedule an update that suspends and triggers our error code.
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" ms={1000} />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'ThrowsInLayoutEffectDestroy render',
+          'Text:Inside render',
+          '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-progess commit
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+
+          // Destroy layout and passive effects in the errored tree.
+          'App destroy layout',
+          'Text:Fallback destroy layout',
+          '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 layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+      });
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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.unstable_yieldValue(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(
+            `ClassText:${text} componentWillUnmount`,
+          );
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.unstable_yieldValue(`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 ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Function render',
+        'ClassText:Class render',
+        'Text:Function create layout',
+        'ClassText:Class componentDidMount',
+        'Text:Function create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Function'),
+        span('Class'),
+      ]);
+
+      // Schedule an update that causes React to suspend.
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App>
+            <AsyncText text="Async_1" ms={1000} />
+            <AsyncText text="Async_2" ms={2000} />
+          </App>,
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Function render',
+        'Suspend:Async_1',
+        'Suspend:Async_2',
+        'ClassText:Class render',
+        'ClassText:Fallback render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Function'),
+        span('Class'),
+      ]);
+
+      await advanceTimers(1000);
+
+      // Timing out should commit the fallback and destroy inner layout effects.
+      expect(Scheduler).toHaveYielded([
+        'Text:Function destroy layout',
+        'ClassText:Class componentWillUnmount',
+        'ClassText:Fallback componentDidMount',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Function'),
+        spanHidden('Class'),
+        span('Fallback'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async_1');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Function render',
+        'AsyncText:Async_1 render',
+        'Suspend:Async_2',
+        'ClassText:Class render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Function'),
+        spanHidden('Class'),
+        span('Fallback'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async_2');
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([
+        span('Function'),
+        span('Async_1'),
+        span('Async_2'),
+        span('Class'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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 enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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.unstable_yieldValue(`ClassText:${text} componentDidMount`);
+        }
+        componentDidUpdate() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} componentDidUpdate`);
+        }
+        componentWillUnmount() {
+          const {text} = this.props;
+          Scheduler.unstable_yieldValue(
+            `ClassText:${text} componentWillUnmount`,
+          );
+        }
+        render() {
+          const {children, text} = this.props;
+          Scheduler.unstable_yieldValue(`ClassText:${text} render`);
+          return <span prop={text}>{children}</span>;
+        }
+      }
+
+      let textToRead = null;
+
+      function Suspender() {
+        Scheduler.unstable_yieldValue(`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 ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Function render',
+        'Suspender "null" render',
+        'ClassText:Class render',
+        'Text:Function create layout',
+        'ClassText:Class componentDidMount',
+        'Text:Function create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Function'),
+        span('Suspender'),
+        span('Class'),
+      ]);
+
+      // Schedule an update that causes React to suspend.
+      textToRead = 'A';
+      ReactNoop.act(() => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Function render',
+        'Suspender "A" render',
+        'Suspend:A',
+        'ClassText:Class render',
+        'ClassText:Fallback render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Function'),
+        span('Suspender'),
+        span('Class'),
+      ]);
+
+      await advanceTimers(1000);
+
+      // Timing out should commit the fallback and destroy inner layout effects.
+      expect(Scheduler).toHaveYielded([
+        'Text:Function destroy layout',
+        'ClassText:Class componentWillUnmount',
+        'ClassText:Fallback componentDidMount',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Function'),
+        spanHidden('Suspender'),
+        spanHidden('Class'),
+        span('Fallback'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      textToRead = 'B';
+      await ReactNoop.act(async () => {
+        await resolveText('A');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Function render',
+        'Suspender "B" render',
+        'Suspend:B',
+        'ClassText:Class render',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Function'),
+        spanHidden('Suspender'),
+        spanHidden('Class'),
+        span('Fallback'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('B');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Function render',
+        'Suspender "B" render',
+        'ClassText:Class render',
+        'ClassText:Fallback componentWillUnmount',
+        'Text:Function create layout',
+        'ClassText:Class componentDidMount',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Function'),
+        span('Suspender'),
+        span('Class'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.unstable_yieldValue(
+          `RefCheckerOuter refCallback value? ${value != null}`,
+        );
+        manualRef.current = value;
+      }, []);
+
+      Scheduler.unstable_yieldValue(`RefCheckerOuter render`);
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue(
+          `RefCheckerOuter create layout refObject? ${refObject.current !=
+            null} refCallback? ${manualRef.current != null}`,
+        );
+        return () => {
+          Scheduler.unstable_yieldValue(
+            `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.unstable_yieldValue(`RefCheckerInner:${text} render`);
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue(
+          `RefCheckerInner:${text} create layout ref? ${forwardedRef.current !=
+            null}`,
+        );
+        return () => {
+          Scheduler.unstable_yieldValue(
+            `RefCheckerInner:${text} destroy layout ref? ${forwardedRef.current !=
+              null}`,
+          );
+        };
+      }, []);
+      return null;
+    }
+
+    // @gate enableCache
+    it('should not be cleared within legacy roots', async () => {
+      class ClassComponent extends React.Component {
+        render() {
+          Scheduler.unstable_yieldValue(
+            `ClassComponent:${this.props.prop} render`,
+          );
+          return this.props.children;
+        }
+      }
+
+      function App({children}) {
+        Scheduler.unstable_yieldValue(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component={ClassComponent} />
+          </Suspense>
+        );
+      }
+
+      ReactNoop.act(() => {
+        ReactNoop.renderLegacySyncRoot(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([]);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.renderLegacySyncRoot(
+          <App children={<AsyncText text="Async" ms={1000} />} />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+        'Text:Fallback render',
+        'Text:Fallback create layout',
+        'Text:Fallback create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'AsyncText:Async render',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.renderLegacySyncRoot(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    it('should be cleared and reset for host components', async () => {
+      function App({children}) {
+        Scheduler.unstable_yieldValue(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component="span" />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([
+        span('refObject'),
+        span('refCallback'),
+      ]);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App children={<AsyncText text="Async" ms={1000} />} />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'RefCheckerInner:refObject render',
+        'RefCheckerInner:refCallback render',
+        '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 layout',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('refObject'),
+        spanHidden('refCallback'),
+        span('Fallback'),
+      ]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Fallback create passive',
+        'AsyncText:Async render',
+        'RefCheckerOuter render',
+        'RefCheckerInner:refObject render',
+        'RefCheckerInner:refCallback render',
+        '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.getChildren()).toEqual([
+        span('Async'),
+        span('refObject'),
+        span('refCallback'),
+      ]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    it('should be cleared and reset for class components', async () => {
+      class ClassComponent extends React.Component {
+        render() {
+          Scheduler.unstable_yieldValue(
+            `ClassComponent:${this.props.prop} render`,
+          );
+          return this.props.children;
+        }
+      }
+
+      function App({children}) {
+        Scheduler.unstable_yieldValue(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component={ClassComponent} />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([]);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App children={<AsyncText text="Async" ms={1000} />} />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+        '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 layout',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Fallback create passive',
+        'AsyncText:Async render',
+        'RefCheckerOuter render',
+        'ClassComponent:refObject render',
+        'RefCheckerInner:refObject render',
+        'ClassComponent:refCallback render',
+        'RefCheckerInner:refCallback render',
+        '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.getChildren()).toEqual([span('Async')]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    it('should be cleared and reset for function components with useImperativeHandle', async () => {
+      const FunctionComponent = React.forwardRef((props, ref) => {
+        Scheduler.unstable_yieldValue('FunctionComponent render');
+        React.useImperativeHandle(
+          ref,
+          () => ({
+            // Noop
+          }),
+          [],
+        );
+        return props.children;
+      });
+      FunctionComponent.displayName = 'FunctionComponent';
+
+      function App({children}) {
+        Scheduler.unstable_yieldValue(`App render`);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefCheckerOuter Component={FunctionComponent} />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([]);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App children={<AsyncText text="Async" ms={1000} />} />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Suspend:Async',
+        'RefCheckerOuter render',
+        'FunctionComponent render',
+        'RefCheckerInner:refObject render',
+        'FunctionComponent render',
+        'RefCheckerInner:refCallback render',
+        '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 layout',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Fallback create passive',
+        'AsyncText:Async render',
+        'RefCheckerOuter render',
+        'FunctionComponent render',
+        'RefCheckerInner:refObject render',
+        'FunctionComponent render',
+        'RefCheckerInner:refCallback render',
+        '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.getChildren()).toEqual([span('Async')]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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.getChildren()).toEqual([]);
+    });
+
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    it('should not reset for user-managed values', async () => {
+      function RefChecker({forwardedRef}) {
+        Scheduler.unstable_yieldValue(`RefChecker render`);
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `RefChecker create layout ref? ${forwardedRef.current === 'test'}`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `RefChecker destroy layout ref? ${forwardedRef.current ===
+                'test'}`,
+            );
+          };
+        }, []);
+        return null;
+      }
+
+      function App({children = null}) {
+        const ref = React.useRef('test');
+        Scheduler.unstable_yieldValue(`App render`);
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `App create layout ref? ${ref.current === 'test'}`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `App destroy layout ref? ${ref.current === 'test'}`,
+            );
+          };
+        }, []);
+        return (
+          <Suspense fallback={<Text text="Fallback" />}>
+            {children}
+            <RefChecker forwardedRef={ref} />
+          </Suspense>
+        );
+      }
+
+      // Mount
+      await ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'RefChecker render',
+        'RefChecker create layout ref? true',
+        'App create layout ref? true',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([]);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App children={<AsyncText text="Async" ms={1000} />} />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'App render',
+        'Suspend:Async',
+        'RefChecker render',
+        'Text:Fallback render',
+        'RefChecker destroy layout ref? true',
+        'Text:Fallback create layout',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
+
+      // Resolving the suspended resource should re-create inner layout effects.
+      await ReactNoop.act(async () => {
+        await resolveText('Async');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Fallback create passive',
+        'AsyncText:Async render',
+        'RefChecker render',
+        'Text:Fallback destroy layout',
+        'AsyncText:Async create layout',
+        'RefChecker create layout ref? true',
+        'Text:Fallback destroy passive',
+        'AsyncText:Async create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+
+      await ReactNoop.act(async () => {
+        ReactNoop.render(null);
+      });
+      expect(Scheduler).toHaveYielded([
+        'App destroy layout ref? true',
+        'AsyncText:Async destroy layout',
+        'RefChecker destroy layout ref? true',
+        'AsyncText:Async destroy passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([]);
+    });
+
+    describe('that throw errors', () => {
+      // @gate enableSuspenseLayoutEffectSemantics
+      // @gate enableCache
+      // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
+      it('are properly handled in ref callbacks', async () => {
+        let useRefCallbackShouldThrow = false;
+
+        function ThrowsInRefCallback() {
+          Scheduler.unstable_yieldValue('ThrowsInRefCallback render');
+          const refCallback = React.useCallback(value => {
+            Scheduler.unstable_yieldValue(
+              'ThrowsInRefCallback refCallback ref? ' + !!value,
+            );
+            if (useRefCallbackShouldThrow) {
+              throw Error('expected');
+            }
+          }, []);
+          return <span ref={refCallback} prop="ThrowsInRefCallback" />;
+        }
+
+        function App({children = null}) {
+          Scheduler.unstable_yieldValue('App render');
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('App create layout');
+            return () => {
+              Scheduler.unstable_yieldValue('App destroy layout');
+            };
+          }, []);
+          return (
+            <>
+              <Suspense fallback={<Text text="Fallback" />}>
+                {children}
+                <ThrowsInRefCallback />
+                <Text text="Inside" />
+              </Suspense>
+              <Text text="Outside" />
+            </>
+          );
+        }
+
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App />
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'ThrowsInRefCallback render',
+          'Text:Inside render',
+          'Text:Outside render',
+          '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.getChildren()).toEqual([
+          span('ThrowsInRefCallback'),
+          span('Inside'),
+          span('Outside'),
+        ]);
+
+        // Schedule an update that causes React to suspend.
+        await ReactNoop.act(async () => {
+          ReactNoop.render(
+            <ErrorBoundary fallback={<Text text="Error" />}>
+              <App>
+                <AsyncText text="Async" ms={1000} />
+              </App>
+            </ErrorBoundary>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render: try',
+          'App render',
+          'Suspend:Async',
+          'ThrowsInRefCallback render',
+          'Text:Inside render',
+          'Text:Fallback render',
+          'Text:Outside render',
+          'ThrowsInRefCallback refCallback ref? false',
+          'Text:Inside destroy layout',
+          'Text:Fallback create layout',
+          'Text:Fallback create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          spanHidden('ThrowsInRefCallback'),
+          spanHidden('Inside'),
+          span('Fallback'),
+          span('Outside'),
+        ]);
+
+        // Resolve the pending suspense and throw
+        useRefCallbackShouldThrow = true;
+        await ReactNoop.act(async () => {
+          await resolveText('Async');
+        });
+        expect(Scheduler).toHaveYielded([
+          '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 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 layout and passive effects in the errored tree.
+          'App destroy layout',
+          'AsyncText:Async destroy layout',
+          'ThrowsInRefCallback refCallback ref? false',
+          'Text:Inside destroy layout',
+          '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 layout',
+          'Text:Error create passive',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Error')]);
+      });
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
index c67edf8a1563..a0a0d08a2c42 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -100,7 +100,7 @@ describe('ReactSuspenseFuzz', () => {
         }
       }, [updates]);
 
-      const fullText = `${text}:${step}`;
+      const fullText = `[${text}:${step}]`;
 
       const shouldSuspend = useContext(ShouldSuspendContext);
 
@@ -163,19 +163,26 @@ describe('ReactSuspenseFuzz', () => {
       resolveAllTasks();
       const expectedOutput = expectedRoot.getChildrenAsJSX();
 
-      resetCache();
-      ReactNoop.renderLegacySyncRoot(children);
-      resolveAllTasks();
-      const legacyOutput = ReactNoop.getChildrenAsJSX();
-      expect(legacyOutput).toEqual(expectedOutput);
-      ReactNoop.renderLegacySyncRoot(null);
-
-      resetCache();
-      const concurrentRoot = ReactNoop.createRoot();
-      concurrentRoot.render(children);
-      resolveAllTasks();
-      const concurrentOutput = concurrentRoot.getChildrenAsJSX();
-      expect(concurrentOutput).toEqual(expectedOutput);
+      gate(flags => {
+        resetCache();
+        ReactNoop.renderLegacySyncRoot(children);
+        resolveAllTasks();
+        const legacyOutput = ReactNoop.getChildrenAsJSX();
+        expect(legacyOutput).toEqual(expectedOutput);
+        ReactNoop.renderLegacySyncRoot(null);
+
+        // Observable behavior differs here in a way that's expected:
+        // If enableSuspenseLayoutEffectSemantics is enabled, layout effects are destroyed on re-suspend
+        // before larger 'beginAfter' timers have a chance to fire.
+        if (!flags.enableSuspenseLayoutEffectSemantics) {
+          resetCache();
+          const concurrentRoot = ReactNoop.createRoot();
+          concurrentRoot.render(children);
+          resolveAllTasks();
+          const concurrentOutput = concurrentRoot.getChildrenAsJSX();
+          expect(concurrentOutput).toEqual(expectedOutput);
+        }
+      });
     }
 
     function pickRandomWeighted(rand, options) {
@@ -410,5 +417,32 @@ Random seed is ${SEED}
         </>,
       );
     });
+
+    it('4', () => {
+      const {Text, testResolvedOutput} = createFuzzer();
+      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__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 692b745f9708..9d6056e25d3d 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -468,19 +468,30 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     await rejectText('Result', new Error('Failed to load: Result'));
 
-    expect(Scheduler).toFlushAndYield([
-      'Error! [Result]',
+    gate(flags => {
+      if (flags.enableSuspenseLayoutEffectSemantics) {
+        expect(Scheduler).toFlushAndYield([
+          'Error! [Result]',
 
-      // React retries one more time
-      'Error! [Result]',
+          // React retries one more time
+          'Error! [Result]',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([]);
+      } else {
+        expect(Scheduler).toFlushAndYield([
+          'Error! [Result]',
 
-      // Errored again on retry. Now handle it.
+          // React retries one more time
+          'Error! [Result]',
 
-      'Caught error: Failed to load: Result',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Caught error: Failed to load: Result'),
-    ]);
+          // Errored again on retry. Now handle it.
+          'Caught error: Failed to load: Result',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Caught error: Failed to load: Result'),
+        ]);
+      }
+    });
   });
 
   // @gate enableCache
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index dc77e5482abb..538a64e193dc 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -125,6 +125,11 @@ export const skipUnmountedBoundaries = false;
 // aggressiveness.
 export const deletedTreeCleanUpLevel = 1;
 
+// Destroy layout effects for components that are hidden because something suspended in an update
+// and recreate them when they are shown again (after the suspended boundary has resolved).
+// Note that this should be an uncommon use case and can be avoided by using the transition API.
+export const enableSuspenseLayoutEffectSemantics = false;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 34d521a50834..0b1659d1625b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -47,6 +47,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 1;
+export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index c7d533110837..80e113c8e5bf 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -46,6 +46,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 1;
+export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 100ddb697dbb..f5440f7a25f2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -46,6 +46,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 1;
+export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index ceea27b19c59..8f31c4e7f84b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -46,6 +46,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 1;
+export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 61ec5b6564dc..2e04322a32ce 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -46,6 +46,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 1;
+export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 26b2b9a27921..bb1c40537287 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -46,6 +46,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 1;
+export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 12da19a71c6b..7a12f6041d93 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -46,6 +46,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = true;
 export const deletedTreeCleanUpLevel = 1;
+export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 503d263fc9be..01937c7b125b 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -18,6 +18,7 @@ export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
+export const enableSuspenseLayoutEffectSemantics = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index f14533535394..1e8908ea4cde 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -28,6 +28,7 @@ export const {
   skipUnmountedBoundaries,
   enableStrictEffects,
   createRootStrictEffectsByDefault,
+  enableSuspenseLayoutEffectSemantics,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,

From d778518998b290abfd21647dbd027118a9b5b88e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 6 Apr 2021 09:24:33 -0400
Subject: [PATCH 0402/1603] Update build-for-devtools script to prepare unit
 tests too (#21182)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f498fad2a74d..aecd84fd7120 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build2 && mkdir build2 && cp -r ./build/node_modules build2/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

From ee6a05c2bff30e423a98bc083209a5dca6965ec5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 6 Apr 2021 11:18:46 -0400
Subject: [PATCH 0403/1603] Bumped DevTools Chrome and Firefox versions in
 Babel config (#21185)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We have been building DevTools to target Chrome 49 and Firefox 54. These are super old browser versions and they did not have full ES6 support, so the generated build is more bloated than it needs to be.

DevTools uses most modern language features. Off the top of my head, we it uses basically everything but async and generator functions.

Based on CanIUse charts– I believe that in order to avoid unnecessary polyfill/wrapper code being generated, we'd need to target Chrome 60+ (released 2017-07-25) and Firefox 55+ (released 2017-04-18). This seems like a reasonable set of browsers to target.

Note that we can't remove the IE 11 target from the react-devtools-core backend yet due to Hermes (React Native) ES6 support but that should be doable by the end of the year given current engineering targets. But we could update the frontend target, as well as the targets for the extensions and the react-devtools-inline package.

This commit increases the browser targets then for Chrome (from 49 to 60) and Firefox (from 54 to 55)
---
 packages/react-devtools-extensions/chrome/manifest.json  | 2 +-
 packages/react-devtools-extensions/edge/manifest.json    | 2 +-
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 8e631995c6b4..75c607f476b2 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -5,7 +5,7 @@
   "version": "4.10.1",
   "version_name": "4.10.1",
 
-  "minimum_chrome_version": "49",
+  "minimum_chrome_version": "60",
 
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 06b0d892391c..eda8fea3795b 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -5,7 +5,7 @@
   "version": "4.10.1",
   "version_name": "4.10.1",
 
-  "minimum_chrome_version": "49",
+  "minimum_chrome_version": "60",
 
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 0a4631baf579..9fd9a7b614bb 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -7,7 +7,7 @@
   "applications": {
     "gecko": {
       "id": "@react-devtools",
-      "strict_min_version": "54.0"
+      "strict_min_version": "55.0"
     }
   },
 

From 172e89b4bf0ec5ee5738af0156d90b0deef4d494 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 7 Apr 2021 10:57:43 -0400
Subject: [PATCH 0404/1603] Reland Remove redundant initial of isArray (#21188)

* Remove redundant initial of isArray (#21163)

* Reapply prettier

* Type the isArray function with refinement support

This ensures that an argument gets refined just like it does if isArray is
used directly.

I'm not sure how to express with just a direct reference so I added a
function wrapper and confirmed that this does get inlined properly by
closure compiler.

* A few more

* Rename unit test to internal

This is not testing a bundle.

Co-authored-by: Behnam Mohammadi <itten@live.com>
---
 .../src/ExhaustiveDeps.js                     | 13 ++++++-------
 packages/jest-react/src/JestReact.js          |  3 ++-
 .../src/backend/renderer.js                   |  3 ++-
 .../src/backend/utils.js                      | 11 ++++++-----
 .../react-dom/src/client/ReactDOMSelect.js    |  7 ++++---
 .../react-dom/src/client/ReactDOMTextarea.js  |  4 ++--
 .../src/server/ReactDOMServerFormatConfig.js  |  3 +--
 .../src/server/ReactPartialRenderer.js        | 11 ++++++-----
 .../src/test-utils/ReactTestUtils.js          |  7 ++++---
 .../src/ReactNativeAttributePayload.js        | 13 +++++++------
 ...ctNativeAttributePayload-test.internal.js} |  0
 .../src/legacy-events/EventPluginUtils.js     | 11 ++++++-----
 .../src/legacy-events/accumulate.js           |  5 +++--
 .../src/legacy-events/accumulateInto.js       |  7 ++++---
 .../src/createReactNoop.js                    |  9 +++++----
 .../src/ReactChildFiber.new.js                |  3 +--
 .../src/ReactChildFiber.old.js                |  3 +--
 .../src/ReactFiberBeginWork.new.js            | 11 ++++++-----
 .../src/ReactFiberBeginWork.old.js            | 11 ++++++-----
 .../src/ReactFiberClassComponent.new.js       |  2 +-
 .../src/ReactFiberClassComponent.old.js       |  2 +-
 .../src/ReactFiberHooks.new.js                |  3 ++-
 .../src/ReactFiberHooks.old.js                |  3 ++-
 .../src/ReactFiberReconciler.new.js           | 11 ++++++-----
 .../src/ReactFiberReconciler.old.js           | 11 ++++++-----
 .../ReactFlightDOMRelayClientHostConfig.js    |  4 +++-
 .../ReactFlightDOMRelayServerHostConfig.js    |  3 ++-
 .../src/ReactFlightWebpackPlugin.js           |  4 +++-
 .../ReactFlightNativeRelayClientHostConfig.js |  4 +++-
 .../ReactFlightNativeRelayServerHostConfig.js |  4 ++--
 packages/react-server/src/ReactFizzServer.js  |  3 ++-
 .../react-server/src/ReactFlightServer.js     |  3 +--
 .../src/ReactTestHostConfig.js                |  3 ++-
 .../src/ReactTestRenderer.js                  |  3 ++-
 packages/react/src/ReactChildren.js           |  5 +++--
 packages/react/src/ReactElementValidator.js   |  9 +++++----
 .../react/src/jsx/ReactJSXElementValidator.js |  7 ++++---
 packages/shared/isArray.js                    | 19 +++++++++++++++++++
 38 files changed, 141 insertions(+), 97 deletions(-)
 rename packages/react-native-renderer/src/__tests__/{ReactNativeAttributePayload-test.js => ReactNativeAttributePayload-test.internal.js} (100%)
 create mode 100644 packages/shared/isArray.js

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 2c76ca5991f7..f4c36fcf2202 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -145,6 +145,8 @@ export default {
         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.
 
@@ -157,7 +159,7 @@ export default {
       //       ^^^ true for this reference
       // False for everything else.
       function isStableKnownHookValue(resolved) {
-        if (!Array.isArray(resolved.defs)) {
+        if (!isArray(resolved.defs)) {
           return false;
         }
         const def = resolved.defs[0];
@@ -226,7 +228,7 @@ export default {
           if (
             id.type === 'ArrayPattern' &&
             id.elements.length === 2 &&
-            Array.isArray(resolved.identifiers)
+            isArray(resolved.identifiers)
           ) {
             // Is second tuple value the same reference we're checking?
             if (id.elements[1] === resolved.identifiers[0]) {
@@ -253,10 +255,7 @@ export default {
             }
           }
         } else if (name === 'useTransition') {
-          if (
-            id.type === 'ArrayPattern' &&
-            Array.isArray(resolved.identifiers)
-          ) {
+          if (id.type === 'ArrayPattern' && isArray(resolved.identifiers)) {
             // Is first tuple value the same reference we're checking?
             if (id.elements[0] === resolved.identifiers[0]) {
               // Setter is stable.
@@ -270,7 +269,7 @@ export default {
 
       // Some are just functions that don't reference anything dynamic.
       function isFunctionWithoutCapturedValues(resolved) {
-        if (!Array.isArray(resolved.defs)) {
+        if (!isArray(resolved.defs)) {
           return false;
         }
         const def = resolved.defs[0];
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
index 57790797b966..1f26cbee3a32 100644
--- a/packages/jest-react/src/JestReact.js
+++ b/packages/jest-react/src/JestReact.js
@@ -8,6 +8,7 @@
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 function captureAssertion(fn) {
   // Trick to use a Jest matcher inside another Jest matcher. `fn` contains an
@@ -42,7 +43,7 @@ export function unstable_toMatchRenderedOutput(root, expectedJSX) {
   let actualJSX;
   if (actualJSON === null || typeof actualJSON === 'string') {
     actualJSX = actualJSON;
-  } else if (Array.isArray(actualJSON)) {
+  } else if (isArray(actualJSON)) {
     if (actualJSON.length === 0) {
       actualJSX = null;
     } else if (actualJSON.length === 1) {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 050a4e709ab3..c61edb45daa6 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -105,6 +105,7 @@ import type {
   ElementType,
 } from 'react-devtools-shared/src/types';
 import is from 'shared/objectIs';
+import isArray from 'shared/isArray';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => Symbol | number;
@@ -1137,7 +1138,7 @@ export function attach(
       memoizedState.hasOwnProperty('create') &&
       memoizedState.hasOwnProperty('destroy') &&
       memoizedState.hasOwnProperty('deps') &&
-      (memoizedState.deps === null || Array.isArray(memoizedState.deps)) &&
+      (memoizedState.deps === null || isArray(memoizedState.deps)) &&
       memoizedState.hasOwnProperty('next')
     );
   }
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 7a4ff6295ab9..593459d78f64 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -9,6 +9,7 @@
 
 import {copy} from 'clipboard-js';
 import {dehydrate} from '../hydration';
+import isArray from 'shared/isArray';
 
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
@@ -61,9 +62,9 @@ export function copyWithDelete(
   index: number = 0,
 ): Object | Array<any> {
   const key = path[index];
-  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  const updated = isArray(obj) ? obj.slice() : {...obj};
   if (index + 1 === path.length) {
-    if (Array.isArray(updated)) {
+    if (isArray(updated)) {
       updated.splice(((key: any): number), 1);
     } else {
       delete updated[key];
@@ -84,12 +85,12 @@ export function copyWithRename(
   index: number = 0,
 ): Object | Array<any> {
   const oldKey = oldPath[index];
-  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  const updated = isArray(obj) ? obj.slice() : {...obj};
   if (index + 1 === oldPath.length) {
     const newKey = newPath[index];
     // $FlowFixMe number or string is fine here
     updated[newKey] = updated[oldKey];
-    if (Array.isArray(updated)) {
+    if (isArray(updated)) {
       updated.splice(((oldKey: any): number), 1);
     } else {
       delete updated[oldKey];
@@ -111,7 +112,7 @@ export function copyWithSet(
     return value;
   }
   const key = path[index];
-  const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+  const updated = isArray(obj) ? obj.slice() : {...obj};
   // $FlowFixMe number or string is fine here
   updated[key] = copyWithSet(obj[key], path, value, index + 1);
   return updated;
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index 1efca61905b4..df336d4b9225 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -12,6 +12,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getToStringValue, toString} from './ToStringValue';
+import isArray from 'shared/isArray';
 
 let didWarnValueDefaultValue;
 
@@ -45,15 +46,15 @@ function checkSelectPropTypes(props) {
       if (props[propName] == null) {
         continue;
       }
-      const isArray = Array.isArray(props[propName]);
-      if (props.multiple && !isArray) {
+      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 && isArray) {
+      } else if (!props.multiple && propNameIsArray) {
         console.error(
           'The `%s` prop supplied to <select> must be a scalar ' +
             'value if `multiple` is false.%s',
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 24fb591fcd8a..6e8aed5cc43c 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -8,12 +8,12 @@
  */
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
 import {getToStringValue, toString} from './ToStringValue';
 import type {ToStringValue} from './ToStringValue';
-
 import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 let didWarnValDefaultVal = false;
@@ -100,7 +100,7 @@ export function initWrapperState(element: Element, props: Object) {
           defaultValue == null,
           'If you supply `defaultValue` on a <textarea>, do not pass children.',
         );
-        if (Array.isArray(children)) {
+        if (isArray(children)) {
           invariant(
             children.length <= 1,
             '<textarea> can only have at most one child.',
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 2988e9a58833..45cd0fecb5e9 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -46,8 +46,7 @@ import hyphenateStyleName from '../shared/hyphenateStyleName';
 import invariant from 'shared/invariant';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
-
-const isArray = Array.isArray;
+import isArray from 'shared/isArray';
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 4d2aeb5b38f8..90fbfd6ad439 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -14,6 +14,7 @@ import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -1438,7 +1439,7 @@ class ReactDOMServerRenderer {
             defaultValue == null,
             'If you supply `defaultValue` on a <textarea>, do not pass children.',
           );
-          if (Array.isArray(textareaChildren)) {
+          if (isArray(textareaChildren)) {
             invariant(
               textareaChildren.length <= 1,
               '<textarea> can only have at most one child.',
@@ -1467,14 +1468,14 @@ class ReactDOMServerRenderer {
           if (props[propName] == null) {
             continue;
           }
-          const isArray = Array.isArray(props[propName]);
-          if (props.multiple && !isArray) {
+          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.',
               propName,
             );
-          } else if (!props.multiple && isArray) {
+          } else if (!props.multiple && propNameIsArray) {
             console.error(
               'The `%s` prop supplied to <select> must be a scalar ' +
                 'value if `multiple` is false.',
@@ -1515,7 +1516,7 @@ class ReactDOMServerRenderer {
           value = optionChildren;
         }
         selected = false;
-        if (Array.isArray(selectValue)) {
+        if (isArray(selectValue)) {
           // multiple
           for (let j = 0; j < selectValue.length; j++) {
             if ('' + selectValue[j] === value) {
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index dc59d2a64420..492ab02d1192 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -24,6 +24,7 @@ import {
   rethrowCaughtError,
   invokeGuardedCallbackAndCatchFirstError,
 } from 'shared/ReactErrorUtils';
+import isArray from 'shared/isArray';
 
 // Keep in sync with ReactDOM.js, and ReactTestUtilsAct.js:
 const EventInternals =
@@ -97,7 +98,7 @@ function validateClassInstance(inst, methodName) {
   }
   let received;
   const stringified = '' + inst;
-  if (Array.isArray(inst)) {
+  if (isArray(inst)) {
     received = 'an array';
   } else if (inst && inst.nodeType === ELEMENT_NODE && inst.tagName) {
     received = 'a DOM node';
@@ -197,7 +198,7 @@ function scryRenderedDOMComponentsWithClass(root, classNames) {
       }
       const classList = className.split(/\s+/);
 
-      if (!Array.isArray(classNames)) {
+      if (!isArray(classNames)) {
         invariant(
           classNames !== undefined,
           'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
@@ -365,7 +366,7 @@ function executeDispatch(event, listener, inst) {
 function executeDispatchesInOrder(event) {
   const dispatchListeners = event._dispatchListeners;
   const dispatchInstances = event._dispatchInstances;
-  if (Array.isArray(dispatchListeners)) {
+  if (isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
index fa1187bc339b..d388f4046a01 100644
--- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js
+++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js
@@ -12,6 +12,7 @@ import {
   deepDiffer,
   flattenStyle,
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import isArray from 'shared/isArray';
 
 import type {AttributeConfiguration} from './ReactNativeTypes';
 
@@ -51,7 +52,7 @@ function restoreDeletedValuesInNestedArray(
   node: NestedNode,
   validAttributes: AttributeConfiguration,
 ) {
-  if (Array.isArray(node)) {
+  if (isArray(node)) {
     let i = node.length;
     while (i-- && removedKeyCount > 0) {
       restoreDeletedValuesInNestedArray(
@@ -163,12 +164,12 @@ function diffNestedProperty(
     return updatePayload;
   }
 
-  if (!Array.isArray(prevProp) && !Array.isArray(nextProp)) {
+  if (!isArray(prevProp) && !isArray(nextProp)) {
     // Both are leaves, we can diff the leaves.
     return diffProperties(updatePayload, prevProp, nextProp, validAttributes);
   }
 
-  if (Array.isArray(prevProp) && Array.isArray(nextProp)) {
+  if (isArray(prevProp) && isArray(nextProp)) {
     // Both are arrays, we can diff the arrays.
     return diffNestedArrayProperty(
       updatePayload,
@@ -178,7 +179,7 @@ function diffNestedProperty(
     );
   }
 
-  if (Array.isArray(prevProp)) {
+  if (isArray(prevProp)) {
     return diffProperties(
       updatePayload,
       // $FlowFixMe - We know that this is always an object when the input is.
@@ -212,7 +213,7 @@ function addNestedProperty(
     return updatePayload;
   }
 
-  if (!Array.isArray(nextProp)) {
+  if (!isArray(nextProp)) {
     // Add each property of the leaf.
     return addProperties(updatePayload, nextProp, validAttributes);
   }
@@ -242,7 +243,7 @@ function clearNestedProperty(
     return updatePayload;
   }
 
-  if (!Array.isArray(prevProp)) {
+  if (!isArray(prevProp)) {
     // Add each property of the leaf.
     return clearProperties(updatePayload, prevProp, validAttributes);
   }
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.js b/packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.internal.js
similarity index 100%
rename from packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.js
rename to packages/react-native-renderer/src/__tests__/ReactNativeAttributePayload-test.internal.js
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
index abba8e9a3dab..381ebafc59bb 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
@@ -7,6 +7,7 @@
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 export let getFiberCurrentPropsFromNode = null;
 export let getInstanceFromNode = null;
@@ -36,14 +37,14 @@ if (__DEV__) {
     const dispatchListeners = event._dispatchListeners;
     const dispatchInstances = event._dispatchInstances;
 
-    const listenersIsArr = Array.isArray(dispatchListeners);
+    const listenersIsArr = isArray(dispatchListeners);
     const listenersLen = listenersIsArr
       ? dispatchListeners.length
       : dispatchListeners
       ? 1
       : 0;
 
-    const instancesIsArr = Array.isArray(dispatchInstances);
+    const instancesIsArr = isArray(dispatchInstances);
     const instancesLen = instancesIsArr
       ? dispatchInstances.length
       : dispatchInstances
@@ -78,7 +79,7 @@ export function executeDispatchesInOrder(event) {
   if (__DEV__) {
     validateEventDispatches(event);
   }
-  if (Array.isArray(dispatchListeners)) {
+  if (isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
@@ -106,7 +107,7 @@ function executeDispatchesInOrderStopAtTrueImpl(event) {
   if (__DEV__) {
     validateEventDispatches(event);
   }
-  if (Array.isArray(dispatchListeners)) {
+  if (isArray(dispatchListeners)) {
     for (let i = 0; i < dispatchListeners.length; i++) {
       if (event.isPropagationStopped()) {
         break;
@@ -150,7 +151,7 @@ export function executeDirectDispatch(event) {
   const dispatchListener = event._dispatchListeners;
   const dispatchInstance = event._dispatchInstances;
   invariant(
-    !Array.isArray(dispatchListener),
+    !isArray(dispatchListener),
     'executeDirectDispatch(...): Invalid `event`.',
   );
   event.currentTarget = dispatchListener
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
index 6fcf9f1fd80c..af4da853934b 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulate.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -8,6 +8,7 @@
  */
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 /**
  * Accumulates items that must not be null or undefined.
@@ -31,11 +32,11 @@ function accumulate<T>(
 
   // 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 (Array.isArray(current)) {
+  if (isArray(current)) {
     return current.concat(next);
   }
 
-  if (Array.isArray(next)) {
+  if (isArray(next)) {
     return [current].concat(next);
   }
 
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index 35625311da88..d704733d9d45 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -8,6 +8,7 @@
  */
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 /**
  * Accumulates items that must not be null or undefined into the first one. This
@@ -37,8 +38,8 @@ function accumulateInto<T>(
 
   // 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 (Array.isArray(current)) {
-    if (Array.isArray(next)) {
+  if (isArray(current)) {
+    if (isArray(next)) {
       current.push.apply(current, next);
       return current;
     }
@@ -46,7 +47,7 @@ function accumulateInto<T>(
     return current;
   }
 
-  if (Array.isArray(next)) {
+  if (isArray(next)) {
     // A bit too dangerous to mutate `next`.
     return [current].concat(next);
   }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index ce80ca337437..9d2c87621bce 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -21,6 +21,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 import {REACT_FRAGMENT_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import isArray from 'shared/isArray';
 import {
   DefaultEventPriority,
   IdleEventPriority,
@@ -604,7 +605,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (typeof child === 'string') {
       return child;
     }
-    if (Array.isArray(child)) {
+    if (isArray(child)) {
       if (child.length === 0) {
         return null;
       }
@@ -618,7 +619,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
       return children;
     }
-    if (Array.isArray(child.children)) {
+    if (isArray(child.children)) {
       // This is an instance.
       const instance: Instance = (child: any);
       const children = childToJSX(instance.children, instance.text);
@@ -668,7 +669,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (children === null) {
       return null;
     }
-    if (Array.isArray(children)) {
+    if (isArray(children)) {
       return {
         $$typeof: REACT_ELEMENT_TYPE,
         type: REACT_FRAGMENT_TYPE,
@@ -687,7 +688,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     if (children === null) {
       return null;
     }
-    if (Array.isArray(children)) {
+    if (isArray(children)) {
       return {
         $$typeof: REACT_ELEMENT_TYPE,
         type: REACT_FRAGMENT_TYPE,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index f9041ce6590b..12a693c2d2d7 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -31,6 +31,7 @@ import {
   SimpleMemoComponent,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
   enableLazyElements,
@@ -97,8 +98,6 @@ if (__DEV__) {
   };
 }
 
-const isArray = Array.isArray;
-
 function coerceRef(
   returnFiber: Fiber,
   current: Fiber | null,
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 10c4ccb4dc5b..52d941d19514 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -31,6 +31,7 @@ import {
   SimpleMemoComponent,
 } from './ReactWorkTags';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
   enableLazyElements,
@@ -97,8 +98,6 @@ if (__DEV__) {
   };
 }
 
-const isArray = Array.isArray;
-
 function coerceRef(
   returnFiber: Fiber,
   current: Fiber | null,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index e707ddf69dfb..657546a09cdb 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -87,6 +87,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -2713,11 +2714,11 @@ function validateTailOptions(
 
 function validateSuspenseListNestedChild(childSlot: mixed, index: number) {
   if (__DEV__) {
-    const isArray = Array.isArray(childSlot);
+    const isAnArray = isArray(childSlot);
     const isIterable =
-      !isArray && typeof getIteratorFn(childSlot) === 'function';
-    if (isArray || isIterable) {
-      const type = isArray ? 'array' : 'iterable';
+      !isAnArray && typeof getIteratorFn(childSlot) === 'function';
+    if (isAnArray || isIterable) {
+      const type = isAnArray ? 'array' : 'iterable';
       console.error(
         'A nested %s was passed to row #%s in <SuspenseList />. Wrap it in ' +
           'an additional SuspenseList to configure its revealOrder: ' +
@@ -2745,7 +2746,7 @@ function validateSuspenseListChildren(
       children !== null &&
       children !== false
     ) {
-      if (Array.isArray(children)) {
+      if (isArray(children)) {
         for (let i = 0; i < children.length; i++) {
           if (!validateSuspenseListNestedChild(children[i], i)) {
             return;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 10771e018fdb..f7f8d312803c 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -87,6 +87,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -2713,11 +2714,11 @@ function validateTailOptions(
 
 function validateSuspenseListNestedChild(childSlot: mixed, index: number) {
   if (__DEV__) {
-    const isArray = Array.isArray(childSlot);
+    const isAnArray = isArray(childSlot);
     const isIterable =
-      !isArray && typeof getIteratorFn(childSlot) === 'function';
-    if (isArray || isIterable) {
-      const type = isArray ? 'array' : 'iterable';
+      !isAnArray && typeof getIteratorFn(childSlot) === 'function';
+    if (isAnArray || isIterable) {
+      const type = isAnArray ? 'array' : 'iterable';
       console.error(
         'A nested %s was passed to row #%s in <SuspenseList />. Wrap it in ' +
           'an additional SuspenseList to configure its revealOrder: ' +
@@ -2745,7 +2746,7 @@ function validateSuspenseListChildren(
       children !== null &&
       children !== false
     ) {
-      if (Array.isArray(children)) {
+      if (isArray(children)) {
         for (let i = 0; i < children.length; i++) {
           if (!validateSuspenseListNestedChild(children[i], i)) {
             return;
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index d64527d58ab6..5aa176a10609 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -36,6 +36,7 @@ import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
@@ -81,7 +82,6 @@ import {
 } from './SchedulingProfiler';
 
 const fakeInternalInstance = {};
-const isArray = Array.isArray;
 
 // React.Component uses a shared frozen object by default.
 // We'll use it to determine whether we need to initialize legacy refs.
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index f9b4128b72f7..c4764059baf4 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -36,6 +36,7 @@ import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
@@ -81,7 +82,6 @@ import {
 } from './SchedulingProfiler';
 
 const fakeInternalInstance = {};
-const isArray = Array.isArray;
 
 // React.Component uses a shared frozen object by default.
 // We'll use it to determine whether we need to initialize legacy refs.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d5116d1579ec..5192c6d2740c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -87,6 +87,7 @@ import {
 import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
+import isArray from 'shared/isArray';
 import {
   markWorkInProgressReceivedUpdate,
   checkIfWorkInProgressReceivedUpdate,
@@ -229,7 +230,7 @@ function updateHookTypesDev() {
 
 function checkDepsAreArrayDev(deps: mixed) {
   if (__DEV__) {
-    if (deps !== undefined && deps !== null && !Array.isArray(deps)) {
+    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(
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 77d82bf13c86..a319cdf75b67 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -87,6 +87,7 @@ import {
 import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
+import isArray from 'shared/isArray';
 import {
   markWorkInProgressReceivedUpdate,
   checkIfWorkInProgressReceivedUpdate,
@@ -229,7 +230,7 @@ function updateHookTypesDev() {
 
 function checkDepsAreArrayDev(deps: mixed) {
   if (__DEV__) {
-    if (deps !== undefined && deps !== null && !Array.isArray(deps)) {
+    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(
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index bbe8810ff52d..4572e4d9de4b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -34,6 +34,7 @@ import {
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
@@ -482,9 +483,9 @@ if (__DEV__) {
     index: number,
   ) => {
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === path.length) {
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((key: any): number), 1);
       } else {
         delete updated[key];
@@ -510,12 +511,12 @@ if (__DEV__) {
     index: number,
   ) => {
     const oldKey = oldPath[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === oldPath.length) {
       const newKey = newPath[index];
       // $FlowFixMe number or string is fine here
       updated[newKey] = updated[oldKey];
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((oldKey: any): number), 1);
       } else {
         delete updated[oldKey];
@@ -564,7 +565,7 @@ if (__DEV__) {
       return value;
     }
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     // $FlowFixMe number or string is fine here
     updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
     return updated;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index c6ced2f5be5b..abd5b9094c59 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -34,6 +34,7 @@ import {
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
@@ -482,9 +483,9 @@ if (__DEV__) {
     index: number,
   ) => {
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === path.length) {
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((key: any): number), 1);
       } else {
         delete updated[key];
@@ -510,12 +511,12 @@ if (__DEV__) {
     index: number,
   ) => {
     const oldKey = oldPath[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     if (index + 1 === oldPath.length) {
       const newKey = newPath[index];
       // $FlowFixMe number or string is fine here
       updated[newKey] = updated[oldKey];
-      if (Array.isArray(updated)) {
+      if (isArray(updated)) {
         updated.splice(((oldKey: any): number), 1);
       } else {
         delete updated[oldKey];
@@ -564,7 +565,7 @@ if (__DEV__) {
       return value;
     }
     const key = path[index];
-    const updated = Array.isArray(obj) ? obj.slice() : {...obj};
+    const updated = isArray(obj) ? obj.slice() : {...obj};
     // $FlowFixMe number or string is fine here
     updated[key] = copyWithSetImpl(obj[key], path, index + 1, value);
     return updated;
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
index 09dd7df1d553..35203ee92c5c 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -24,6 +24,8 @@ export {
   requireModule,
 } from 'ReactFlightDOMRelayClientIntegration';
 
+import isArray from 'shared/isArray';
+
 export type {ModuleMetaData} from 'ReactFlightDOMRelayClientIntegration';
 
 export type UninitializedModel = JSONValue;
@@ -35,7 +37,7 @@ function parseModelRecursively(response: Response, parentObj, value) {
     return parseModelString(response, parentObj, value);
   }
   if (typeof value === 'object' && value !== null) {
-    if (Array.isArray(value)) {
+    if (isArray(value)) {
       const parsedValue = [];
       for (let i = 0; i < value.length; i++) {
         (parsedValue: any)[i] = parseModelRecursively(
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index a4d0d26fcce1..85eace536ac4 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -14,6 +14,7 @@ import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import JSResourceReference from 'JSResourceReference';
 
 import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
 
 export type ModuleReference<T> = JSResourceReference<T>;
 
@@ -82,7 +83,7 @@ function convertModelToJSON(
 ): JSONValue {
   const json = resolveModelToJSON(request, parent, key, model);
   if (typeof json === 'object' && json !== null) {
-    if (Array.isArray(json)) {
+    if (isArray(json)) {
       const jsonArray: Array<JSONValue> = [];
       for (let i = 0; i < json.length; i++) {
         jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]);
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index ecdd66ed82c6..a81aec2c1738 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -17,6 +17,8 @@ import NullDependency from 'webpack/lib/dependencies/NullDependency';
 import AsyncDependenciesBlock from 'webpack/lib/AsyncDependenciesBlock';
 import Template from 'webpack/lib/Template';
 
+import isArray from 'shared/isArray';
+
 class ClientReferenceDependency extends ModuleDependency {
   constructor(request) {
     super(request);
@@ -76,7 +78,7 @@ export default class ReactFlightWebpackPlugin {
       ];
     } else if (
       typeof options.clientReferences === 'string' ||
-      !Array.isArray(options.clientReferences)
+      !isArray(options.clientReferences)
     ) {
       this.clientReferences = [(options.clientReferences: $FlowFixMe)];
     } else {
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
index 7ff02159bb7e..d8e27657b292 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
@@ -24,6 +24,8 @@ export {
   requireModule,
 } from 'ReactFlightNativeRelayClientIntegration';
 
+import isArray from 'shared/isArray';
+
 export type {ModuleMetaData} from 'ReactFlightNativeRelayClientIntegration';
 
 export type UninitializedModel = JSONValue;
@@ -35,7 +37,7 @@ function parseModelRecursively(response: Response, parentObj, value) {
     return parseModelString(response, parentObj, value);
   }
   if (typeof value === 'object' && value !== null) {
-    if (Array.isArray(value)) {
+    if (isArray(value)) {
       const parsedValue = [];
       for (let i = 0; i < value.length; i++) {
         (parsedValue: any)[i] = parseModelRecursively(
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 4fa871b0c4e8..0624e693cfe1 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -8,9 +8,9 @@
  */
 
 import type {RowEncoding, JSONValue} from './ReactFlightNativeRelayProtocol';
-
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
 import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 export type ModuleReference<T> = JSResourceReferenceImpl<T>;
@@ -80,7 +80,7 @@ function convertModelToJSON(
 ): JSONValue {
   const json = resolveModelToJSON(request, parent, key, model);
   if (typeof json === 'object' && json !== null) {
-    if (Array.isArray(json)) {
+    if (isArray(json)) {
       const jsonArray: Array<JSONValue> = [];
       for (let i = 0; i < json.length; i++) {
         jsonArray[i] = convertModelToJSON(request, json, '' + i, json[i]);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 66a6c9238ab3..75beaf0f219b 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -51,6 +51,7 @@ import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
@@ -287,7 +288,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     return;
   }
 
-  if (Array.isArray(node)) {
+  if (isArray(node)) {
     if (node.length > 0) {
       for (let i = 0; i < node.length; i++) {
         renderNode(request, task, node[i]);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index dfbe3c55f9b6..58c3a9219f64 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -44,8 +44,7 @@ import {
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
-
-const isArray = Array.isArray;
+import isArray from 'shared/isArray';
 
 type ReactJSONValue =
   | string
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 596615ea0570..6cdadabe281a 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -8,6 +8,7 @@
  */
 
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
+import isArray from 'shared/isArray';
 import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 export type Type = string;
@@ -84,7 +85,7 @@ export function appendChild(
   child: Instance | TextInstance,
 ): void {
   if (__DEV__) {
-    if (!Array.isArray(parentInstance.children)) {
+    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. ' +
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index f058af3e8758..5c74c6e9e310 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -43,6 +43,7 @@ import {
   ScopeComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -158,7 +159,7 @@ function flatten(arr) {
     while (n.i < n.array.length) {
       const el = n.array[n.i];
       n.i += 1;
-      if (Array.isArray(el)) {
+      if (isArray(el)) {
         stack.push(n);
         stack.push({i: 0, array: el});
         break;
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index eb9ef5aca9ca..9acdc068e8ea 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -10,6 +10,7 @@
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import invariant from 'shared/invariant';
+import isArray from 'shared/isArray';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -110,7 +111,7 @@ function mapIntoArray(
     // so that it's consistent if the number of children grows:
     const childKey =
       nameSoFar === '' ? SEPARATOR + getElementKey(child, 0) : nameSoFar;
-    if (Array.isArray(mappedChild)) {
+    if (isArray(mappedChild)) {
       let escapedChildKey = '';
       if (childKey != null) {
         escapedChildKey = escapeUserProvidedKey(childKey) + '/';
@@ -142,7 +143,7 @@ function mapIntoArray(
   const nextNamePrefix =
     nameSoFar === '' ? SEPARATOR : nameSoFar + SUBSEPARATOR;
 
-  if (Array.isArray(children)) {
+  if (isArray(children)) {
     for (let i = 0; i < children.length; i++) {
       child = children[i];
       nextName = nextNamePrefix + getElementKey(child, i);
diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index 2c14bef6c020..f9d2cbb95af1 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import checkPropTypes from 'shared/checkPropTypes';
+import isArray from 'shared/isArray';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 import {
@@ -168,7 +169,7 @@ function validateChildKeys(node, parentType) {
   if (typeof node !== 'object') {
     return;
   }
-  if (Array.isArray(node)) {
+  if (isArray(node)) {
     for (let i = 0; i < node.length; i++) {
       const child = node[i];
       if (isValidElement(child)) {
@@ -313,7 +314,7 @@ export function jsxWithValidation(
     let typeString;
     if (type === null) {
       typeString = 'null';
-    } else if (Array.isArray(type)) {
+    } else if (isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
       typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
@@ -352,7 +353,7 @@ export function jsxWithValidation(
     const children = props.children;
     if (children !== undefined) {
       if (isStaticChildren) {
-        if (Array.isArray(children)) {
+        if (isArray(children)) {
           for (let i = 0; i < children.length; i++) {
             validateChildKeys(children[i], type);
           }
@@ -437,7 +438,7 @@ export function createElementWithValidation(type, props, children) {
     let typeString;
     if (type === null) {
       typeString = 'null';
-    } else if (Array.isArray(type)) {
+    } else if (isArray(type)) {
       typeString = 'array';
     } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
       typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
diff --git a/packages/react/src/jsx/ReactJSXElementValidator.js b/packages/react/src/jsx/ReactJSXElementValidator.js
index c77b5ef6e9a6..84cf3eb2caa3 100644
--- a/packages/react/src/jsx/ReactJSXElementValidator.js
+++ b/packages/react/src/jsx/ReactJSXElementValidator.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactSymbols';
 import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import isArray from 'shared/isArray';
 import {jsxDEV} from './ReactJSXElement';
 
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
@@ -182,7 +183,7 @@ function validateChildKeys(node, parentType) {
     if (typeof node !== 'object') {
       return;
     }
-    if (Array.isArray(node)) {
+    if (isArray(node)) {
       for (let i = 0; i < node.length; i++) {
         const child = node[i];
         if (isValidElement(child)) {
@@ -329,7 +330,7 @@ export function jsxWithValidation(
       let typeString;
       if (type === null) {
         typeString = 'null';
-      } else if (Array.isArray(type)) {
+      } else if (isArray(type)) {
         typeString = 'array';
       } else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
         typeString = `<${getComponentNameFromType(type.type) || 'Unknown'} />`;
@@ -366,7 +367,7 @@ export function jsxWithValidation(
       const children = props.children;
       if (children !== undefined) {
         if (isStaticChildren) {
-          if (Array.isArray(children)) {
+          if (isArray(children)) {
             for (let i = 0; i < children.length; i++) {
               validateChildKeys(children[i], type);
             }
diff --git a/packages/shared/isArray.js b/packages/shared/isArray.js
new file mode 100644
index 000000000000..53fb7710bb3c
--- /dev/null
+++ b/packages/shared/isArray.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+declare function isArray(a: mixed): boolean %checks(Array.isArray(a));
+
+const isArrayImpl = Array.isArray;
+
+// eslint-disable-next-line no-redeclare
+function isArray(a: mixed): boolean {
+  return isArrayImpl(a);
+}
+
+export default isArray;

From ad6e6ec7bbf7c37c668db57570b296b2eff69d0a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 7 Apr 2021 14:29:06 -0400
Subject: [PATCH 0405/1603] [Fizz] Prepare Recursive Loop for More Types
 (#21186)

* Split out into helper functions

This is similar to the structure of beginWork in Fiber.

* Split the rendering of a node from recursively rendering a node

This lets us reuse render node at the root which doesn't spawn new work.
---
 packages/react-server/src/ReactFizzServer.js | 383 +++++++++++--------
 1 file changed, 225 insertions(+), 158 deletions(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 75beaf0f219b..c1293c8ba4b4 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -276,7 +276,164 @@ function fatalError(request: Request, error: mixed): void {
   closeWithError(request.destination, error);
 }
 
-function renderNode(request: Request, task: Task, node: ReactNodeList): void {
+function renderSuspenseBoundary(
+  request: Request,
+  task: Task,
+  props: Object,
+): void {
+  const parentBoundary = task.blockedBoundary;
+  const parentSegment = task.blockedSegment;
+
+  // We need to push an "empty" thing here to identify the parent suspense boundary.
+  pushEmpty(parentSegment.chunks, request.responseState, task.assignID);
+  task.assignID = null;
+  // 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 fallbackAbortSet: Set<Task> = new Set();
+  const newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
+  const insertionIndex = parentSegment.chunks.length;
+  // The children of the boundary segment is actually the fallback.
+  const boundarySegment = createPendingSegment(
+    request,
+    insertionIndex,
+    newBoundary,
+    parentSegment.formatContext,
+  );
+  parentSegment.children.push(boundarySegment);
+
+  // This segment is the actual child content. We can start rendering that immediately.
+  const contentRootSegment = createPendingSegment(
+    request,
+    0,
+    null,
+    parentSegment.formatContext,
+  );
+  // 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;
+
+  // 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.blockedSegment = contentRootSegment;
+  try {
+    // We use the safe form because we don't handle suspending here. Only error handling.
+    renderNode(request, task, content);
+    contentRootSegment.status = COMPLETED;
+    newBoundary.completedSegments.push(contentRootSegment);
+    if (newBoundary.pendingTasks === 0) {
+      // 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.
+      return;
+    }
+  } catch (error) {
+    contentRootSegment.status = ERRORED;
+    reportError(request, error);
+    newBoundary.forceClientRender = true;
+    // 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.blockedSegment = parentSegment;
+  }
+
+  // We create suspended task for the fallback because we don't want to actually task
+  // on it yet in case we finish the main content, so we queue for later.
+  const suspendedFallbackTask = createTask(
+    request,
+    fallback,
+    parentBoundary,
+    boundarySegment,
+    fallbackAbortSet,
+    newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
+  );
+  // TODO: This should be queued at a separate lower priority queue so that we only task
+  // on preparing fallbacks if we don't have any more main content to task on.
+  request.pingedTasks.push(suspendedFallbackTask);
+}
+
+function renderHostElement(
+  request: Request,
+  task: Task,
+  type: string,
+  props: Object,
+): void {
+  const segment = task.blockedSegment;
+  const children = pushStartInstance(
+    segment.chunks,
+    type,
+    props,
+    request.responseState,
+    segment.formatContext,
+    task.assignID,
+  );
+  // We must have assigned it already above so we don't need this anymore.
+  task.assignID = null;
+  const prevContext = segment.formatContext;
+  segment.formatContext = getChildFormatContext(prevContext, type, props);
+  // 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);
+  // 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.
+  segment.formatContext = prevContext;
+  pushEndInstance(segment.chunks, type, props);
+}
+
+function renderFunctionComponent(
+  request: Request,
+  task: Task,
+  type: (props: any) => ReactNodeList,
+  props: any,
+): void {
+  const result = type(props);
+  // We're now successfully past this task, and we don't have to pop back to
+  // the previous task every again, so we can use the destructive recursive form.
+  renderNodeDestructive(request, task, result);
+}
+
+function renderElement(
+  request: Request,
+  task: Task,
+  type: any,
+  props: Object,
+  node: ReactNodeList,
+): void {
+  if (typeof type === 'function') {
+    renderFunctionComponent(request, task, type, props);
+  } else if (typeof type === 'string') {
+    renderHostElement(request, task, type, props);
+  } else if (type === REACT_SUSPENSE_TYPE) {
+    renderSuspenseBoundary(request, task, props);
+  } else {
+    throw new Error('Not yet implemented element type.');
+  }
+}
+
+// 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,
+): void {
+  // Stash the node we're working on. We'll pick up from this task in case
+  // something suspends.
+  task.node = node;
+
   if (typeof node === 'string') {
     pushTextInstance(
       task.blockedSegment.chunks,
@@ -291,6 +448,9 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
   if (isArray(node)) {
     if (node.length > 0) {
       for (let i = 0; i < node.length; i++) {
+        // Recursively render the rest. 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]);
       }
     } else {
@@ -310,151 +470,71 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
   }
 
   if (
-    typeof node !== 'object' ||
-    !node ||
-    (node: any).$$typeof !== REACT_ELEMENT_TYPE
+    typeof node === 'object' &&
+    node &&
+    (node: any).$$typeof === REACT_ELEMENT_TYPE
   ) {
-    throw new Error('Not yet implemented node type.');
+    const element: React$Element<any> = (node: any);
+    const type = element.type;
+    const props = element.props;
+    renderElement(request, task, type, props, node);
+    return;
   }
-  const element: React$Element<any> = (node: any);
-  const type = element.type;
-  const props = element.props;
-  if (typeof type === 'function') {
-    try {
-      const result = type(props);
-      renderNode(request, task, result);
-    } catch (x) {
-      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-        // Something suspended, we'll need to create a new segment and resolve it later.
-        const segment = task.blockedSegment;
-        const insertionIndex = segment.chunks.length;
-        const newSegment = createPendingSegment(
-          request,
-          insertionIndex,
-          null,
-          segment.formatContext,
-        );
-        segment.children.push(newSegment);
-        const newTask = createTask(
-          request,
-          node,
-          task.blockedBoundary,
-          newSegment,
-          task.abortSet,
-          task.assignID,
-        );
-        // We've delegated the assignment.
-        task.assignID = null;
-        const ping = newTask.ping;
-        x.then(ping, ping);
-      } else {
-        // We can rethrow to terminate the rest of this tree.
-        throw x;
-      }
-    }
-  } else if (typeof type === 'string') {
-    const segment = task.blockedSegment;
-    const children = pushStartInstance(
-      segment.chunks,
-      type,
-      props,
-      request.responseState,
-      segment.formatContext,
-      task.assignID,
-    );
-    // We must have assigned it already above so we don't need this anymore.
-    task.assignID = null;
-    const prevContext = segment.formatContext;
-    segment.formatContext = getChildFormatContext(prevContext, type, props);
-    renderNode(request, task, children);
-    // 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.
-    segment.formatContext = prevContext;
-    pushEndInstance(segment.chunks, type, props);
-  } else if (type === REACT_SUSPENSE_TYPE) {
-    const parentBoundary = task.blockedBoundary;
-    const parentSegment = task.blockedSegment;
 
-    // We need to push an "empty" thing here to identify the parent suspense boundary.
-    pushEmpty(parentSegment.chunks, request.responseState, task.assignID);
-    task.assignID = null;
-    // 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 fallbackAbortSet: Set<Task> = new Set();
-    const newBoundary = createSuspenseBoundary(request, fallbackAbortSet);
-    const insertionIndex = parentSegment.chunks.length;
-    // The children of the boundary segment is actually the fallback.
-    const boundarySegment = createPendingSegment(
-      request,
-      insertionIndex,
-      newBoundary,
-      parentSegment.formatContext,
-    );
-    parentSegment.children.push(boundarySegment);
-
-    // This segment is the actual child content. We can start rendering that immediately.
-    const contentRootSegment = createPendingSegment(
-      request,
-      0,
-      null,
-      parentSegment.formatContext,
-    );
-    // 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;
-
-    // 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.blockedSegment = contentRootSegment;
-    try {
-      renderNode(request, task, content);
-      contentRootSegment.status = COMPLETED;
-      newBoundary.completedSegments.push(contentRootSegment);
-      if (newBoundary.pendingTasks === 0) {
-        // 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.
-        return;
-      }
-    } catch (error) {
-      contentRootSegment.status = ERRORED;
-      reportError(request, error);
-      newBoundary.forceClientRender = true;
-      // 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.blockedSegment = parentSegment;
-    }
+  throw new Error('Not yet implemented node type.');
+}
 
-    // We create suspended task for the fallback because we don't want to actually task
-    // on it yet in case we finish the main content, so we queue for later.
-    const suspendedFallbackTask = createTask(
-      request,
-      fallback,
-      parentBoundary,
-      boundarySegment,
-      fallbackAbortSet,
-      newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
-    );
-    // TODO: This should be queued at a separate lower priority queue so that we only task
-    // on preparing fallbacks if we don't have any more main content to task on.
-    request.pingedTasks.push(suspendedFallbackTask);
-  } else {
-    throw new Error('Not yet implemented element type.');
+function spawnNewSuspendedTask(
+  request: Request,
+  task: Task,
+  x: Promise<any>,
+): void {
+  // 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,
+    segment.formatContext,
+  );
+  segment.children.push(newSegment);
+  const newTask = createTask(
+    request,
+    task.node,
+    task.blockedBoundary,
+    newSegment,
+    task.abortSet,
+    task.assignID,
+  );
+  // We've delegated the assignment.
+  task.assignID = null;
+  const ping = newTask.ping;
+  x.then(ping, ping);
+}
+
+// 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): void {
+  // TODO: Store segment.children.length here and reset it in case something
+  // suspended partially through writing something.
+
+  // Snapshot the current context in case something throws to interrupt the
+  // process.
+  const previousContext = task.blockedSegment.formatContext;
+  try {
+    return renderNodeDestructive(request, task, node);
+  } catch (x) {
+    if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+      spawnNewSuspendedTask(request, task, x);
+      // 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.blockedSegment.formatContext = previousContext;
+    } else {
+      // We assume that we don't need the correct context.
+      // Let's terminate the rest of the tree and don't render any siblings.
+      throw x;
+    }
   }
 }
 
@@ -610,22 +690,9 @@ function retryTask(request: Request, task: Task): void {
     return;
   }
   try {
-    let node = task.node;
-    while (
-      typeof node === 'object' &&
-      node !== null &&
-      (node: any).$$typeof === REACT_ELEMENT_TYPE &&
-      typeof node.type === 'function'
-    ) {
-      // Doing this here lets us reuse this same Segment if the next component
-      // also suspends.
-      const element: React$Element<any> = (node: any);
-      task.node = node;
-      // TODO: Classes and legacy context etc.
-      node = element.type(element.props);
-    }
-
-    renderNode(request, task, node);
+    // 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.
+    renderNodeDestructive(request, task, task.node);
 
     task.abortSet.delete(task);
     segment.status = COMPLETED;

From 1f8583de8c5e69f27a871a2069dcb5aecac02f40 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 7 Apr 2021 17:45:19 -0400
Subject: [PATCH 0406/1603] Offscreen: Use JS stack to track hidden/unhidden
 subtree state (#21192)

---
 .../src/ReactFiberCommitWork.new.js           | 51 ++++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 51 ++++++++++---------
 2 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 48150f021a32..5f3870ac95f3 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -156,9 +156,7 @@ if (__DEV__) {
 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
 // Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
-const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
 let offscreenSubtreeWasHidden: boolean = false;
-const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
@@ -2305,11 +2303,35 @@ function commitLayoutEffects_begin(
         const wasHidden = current !== null && current.memoizedState !== null;
         const isHidden = fiber.memoizedState !== null;
 
-        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
-        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeIsHidden =
+          isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeWasHidden =
+          wasHidden || offscreenSubtreeWasHidden;
 
-        offscreenSubtreeWasHiddenStack.push(wasHidden);
-        offscreenSubtreeIsHiddenStack.push(isHidden);
+        if (
+          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
+          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
+        ) {
+          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+
+          nextEffect = fiber;
+          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+
+          // Traverse the Offscreen subtree with the current Offscreen as the root.
+          commitLayoutEffects_begin(
+            fiber, // New root; bubble back up to here and stop.
+            root,
+            committedLanes,
+          );
+
+          nextEffect = fiber.sibling;
+          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+
+          continue;
+        }
       }
     }
 
@@ -2350,23 +2372,6 @@ function commitLayoutMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-      if (fiber.tag === OffscreenComponent) {
-        offscreenSubtreeWasHiddenStack.pop();
-        offscreenSubtreeIsHiddenStack.pop();
-        offscreenSubtreeWasHidden =
-          offscreenSubtreeWasHiddenStack.length > 0 &&
-          offscreenSubtreeWasHiddenStack[
-            offscreenSubtreeWasHiddenStack.length - 1
-          ];
-        offscreenSubtreeIsHidden =
-          offscreenSubtreeIsHiddenStack.length > 0 &&
-          offscreenSubtreeIsHiddenStack[
-            offscreenSubtreeIsHiddenStack.length - 1
-          ];
-      }
-    }
-
     if (
       enableSuspenseLayoutEffectSemantics &&
       isModernRoot &&
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index ca3dbe363f07..10fa7d1c206f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -156,9 +156,7 @@ if (__DEV__) {
 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
 // Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
-const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
 let offscreenSubtreeWasHidden: boolean = false;
-const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
@@ -2305,11 +2303,35 @@ function commitLayoutEffects_begin(
         const wasHidden = current !== null && current.memoizedState !== null;
         const isHidden = fiber.memoizedState !== null;
 
-        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
-        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeIsHidden =
+          isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeWasHidden =
+          wasHidden || offscreenSubtreeWasHidden;
 
-        offscreenSubtreeWasHiddenStack.push(wasHidden);
-        offscreenSubtreeIsHiddenStack.push(isHidden);
+        if (
+          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
+          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
+        ) {
+          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+
+          nextEffect = fiber;
+          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+
+          // Traverse the Offscreen subtree with the current Offscreen as the root.
+          commitLayoutEffects_begin(
+            fiber, // New root; bubble back up to here and stop.
+            root,
+            committedLanes,
+          );
+
+          nextEffect = fiber.sibling;
+          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+
+          continue;
+        }
       }
     }
 
@@ -2350,23 +2372,6 @@ function commitLayoutMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-      if (fiber.tag === OffscreenComponent) {
-        offscreenSubtreeWasHiddenStack.pop();
-        offscreenSubtreeIsHiddenStack.pop();
-        offscreenSubtreeWasHidden =
-          offscreenSubtreeWasHiddenStack.length > 0 &&
-          offscreenSubtreeWasHiddenStack[
-            offscreenSubtreeWasHiddenStack.length - 1
-          ];
-        offscreenSubtreeIsHidden =
-          offscreenSubtreeIsHiddenStack.length > 0 &&
-          offscreenSubtreeIsHiddenStack[
-            offscreenSubtreeIsHiddenStack.length - 1
-          ];
-      }
-    }
-
     if (
       enableSuspenseLayoutEffectSemantics &&
       isModernRoot &&

From e90c76a651a9889830f32256e2c2e2a408b713c5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 7 Apr 2021 17:51:48 -0400
Subject: [PATCH 0407/1603] Revert "Offscreen: Use JS stack to track
 hidden/unhidden subtree state" (#21194)

This reverts commit 1f8583de8c5e69f27a871a2069dcb5aecac02f40.
---
 .../src/ReactFiberCommitWork.new.js           | 51 +++++++++----------
 .../src/ReactFiberCommitWork.old.js           | 51 +++++++++----------
 2 files changed, 46 insertions(+), 56 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 5f3870ac95f3..48150f021a32 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -156,7 +156,9 @@ if (__DEV__) {
 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
 // Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
+const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
 let offscreenSubtreeWasHidden: boolean = false;
+const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
@@ -2303,35 +2305,11 @@ function commitLayoutEffects_begin(
         const wasHidden = current !== null && current.memoizedState !== null;
         const isHidden = fiber.memoizedState !== null;
 
-        const newOffscreenSubtreeIsHidden =
-          isHidden || offscreenSubtreeIsHidden;
-        const newOffscreenSubtreeWasHidden =
-          wasHidden || offscreenSubtreeWasHidden;
+        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
+        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
 
-        if (
-          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
-          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
-        ) {
-          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
-          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-
-          nextEffect = fiber;
-          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-
-          // Traverse the Offscreen subtree with the current Offscreen as the root.
-          commitLayoutEffects_begin(
-            fiber, // New root; bubble back up to here and stop.
-            root,
-            committedLanes,
-          );
-
-          nextEffect = fiber.sibling;
-          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
-
-          continue;
-        }
+        offscreenSubtreeWasHiddenStack.push(wasHidden);
+        offscreenSubtreeIsHiddenStack.push(isHidden);
       }
     }
 
@@ -2372,6 +2350,23 @@ function commitLayoutMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
+    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+      if (fiber.tag === OffscreenComponent) {
+        offscreenSubtreeWasHiddenStack.pop();
+        offscreenSubtreeIsHiddenStack.pop();
+        offscreenSubtreeWasHidden =
+          offscreenSubtreeWasHiddenStack.length > 0 &&
+          offscreenSubtreeWasHiddenStack[
+            offscreenSubtreeWasHiddenStack.length - 1
+          ];
+        offscreenSubtreeIsHidden =
+          offscreenSubtreeIsHiddenStack.length > 0 &&
+          offscreenSubtreeIsHiddenStack[
+            offscreenSubtreeIsHiddenStack.length - 1
+          ];
+      }
+    }
+
     if (
       enableSuspenseLayoutEffectSemantics &&
       isModernRoot &&
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 10fa7d1c206f..ca3dbe363f07 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -156,7 +156,9 @@ if (__DEV__) {
 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
 // Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
+const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
 let offscreenSubtreeWasHidden: boolean = false;
+const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
@@ -2303,35 +2305,11 @@ function commitLayoutEffects_begin(
         const wasHidden = current !== null && current.memoizedState !== null;
         const isHidden = fiber.memoizedState !== null;
 
-        const newOffscreenSubtreeIsHidden =
-          isHidden || offscreenSubtreeIsHidden;
-        const newOffscreenSubtreeWasHidden =
-          wasHidden || offscreenSubtreeWasHidden;
+        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
+        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
 
-        if (
-          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
-          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
-        ) {
-          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
-          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-
-          nextEffect = fiber;
-          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-
-          // Traverse the Offscreen subtree with the current Offscreen as the root.
-          commitLayoutEffects_begin(
-            fiber, // New root; bubble back up to here and stop.
-            root,
-            committedLanes,
-          );
-
-          nextEffect = fiber.sibling;
-          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
-
-          continue;
-        }
+        offscreenSubtreeWasHiddenStack.push(wasHidden);
+        offscreenSubtreeIsHiddenStack.push(isHidden);
       }
     }
 
@@ -2372,6 +2350,23 @@ function commitLayoutMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
+    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+      if (fiber.tag === OffscreenComponent) {
+        offscreenSubtreeWasHiddenStack.pop();
+        offscreenSubtreeIsHiddenStack.pop();
+        offscreenSubtreeWasHidden =
+          offscreenSubtreeWasHiddenStack.length > 0 &&
+          offscreenSubtreeWasHiddenStack[
+            offscreenSubtreeWasHiddenStack.length - 1
+          ];
+        offscreenSubtreeIsHidden =
+          offscreenSubtreeIsHiddenStack.length > 0 &&
+          offscreenSubtreeIsHiddenStack[
+            offscreenSubtreeIsHiddenStack.length - 1
+          ];
+      }
+    }
+
     if (
       enableSuspenseLayoutEffectSemantics &&
       isModernRoot &&

From 782f689ca8380a715ab0c24e326fc293e5d25647 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 7 Apr 2021 19:20:25 -0400
Subject: [PATCH 0408/1603] Don't double invoke getDerivedStateFromProps for
 module pattern (#21193)

---
 .../react-reconciler/src/ReactFiberBeginWork.new.js   | 11 -----------
 .../react-reconciler/src/ReactFiberBeginWork.old.js   | 11 -----------
 .../src/ReactFiberClassComponent.new.js               |  2 +-
 .../src/ReactFiberClassComponent.old.js               |  2 +-
 4 files changed, 2 insertions(+), 24 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 657546a09cdb..325fbac1f28d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -185,7 +185,6 @@ import {
 } from './ReactFiberHydrationContext.new';
 import {
   adoptClassInstance,
-  applyDerivedStateFromProps,
   constructClassInstance,
   mountClassInstance,
   resumeMountClassInstance,
@@ -1594,16 +1593,6 @@ function mountIndeterminateComponent(
 
     initializeUpdateQueue(workInProgress);
 
-    const getDerivedStateFromProps = Component.getDerivedStateFromProps;
-    if (typeof getDerivedStateFromProps === 'function') {
-      applyDerivedStateFromProps(
-        workInProgress,
-        Component,
-        getDerivedStateFromProps,
-        props,
-      );
-    }
-
     adoptClassInstance(workInProgress, value);
     mountClassInstance(workInProgress, Component, props, renderLanes);
     return finishClassComponent(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index f7f8d312803c..9cac49a046bd 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -185,7 +185,6 @@ import {
 } from './ReactFiberHydrationContext.old';
 import {
   adoptClassInstance,
-  applyDerivedStateFromProps,
   constructClassInstance,
   mountClassInstance,
   resumeMountClassInstance,
@@ -1594,16 +1593,6 @@ function mountIndeterminateComponent(
 
     initializeUpdateQueue(workInProgress);
 
-    const getDerivedStateFromProps = Component.getDerivedStateFromProps;
-    if (typeof getDerivedStateFromProps === 'function') {
-      applyDerivedStateFromProps(
-        workInProgress,
-        Component,
-        getDerivedStateFromProps,
-        props,
-      );
-    }
-
     adoptClassInstance(workInProgress, value);
     mountClassInstance(workInProgress, Component, props, renderLanes);
     return finishClassComponent(
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 5aa176a10609..127f6e694786 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -162,7 +162,7 @@ if (__DEV__) {
   Object.freeze(fakeInternalInstance);
 }
 
-export function applyDerivedStateFromProps(
+function applyDerivedStateFromProps(
   workInProgress: Fiber,
   ctor: any,
   getDerivedStateFromProps: (props: any, state: any) => any,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index c4764059baf4..8e92d0d84407 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -162,7 +162,7 @@ if (__DEV__) {
   Object.freeze(fakeInternalInstance);
 }
 
-export function applyDerivedStateFromProps(
+function applyDerivedStateFromProps(
   workInProgress: Fiber,
   ctor: any,
   getDerivedStateFromProps: (props: any, state: any) => any,

From 1a02d2792e470d28dfbd0ea0723ca439856ba197 Mon Sep 17 00:00:00 2001
From: wangao <wa17@mails.tsinghua.edu.cn>
Date: Thu, 8 Apr 2021 20:58:24 +0800
Subject: [PATCH 0409/1603] style: delete unused isHost check (#21203)

---
 packages/react-reconciler/src/ReactFiberCommitWork.new.js | 4 ++--
 packages/react-reconciler/src/ReactFiberCommitWork.old.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 48150f021a32..68d7a9c7cf7f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1613,7 +1613,7 @@ function insertOrAppendPlacementNodeIntoContainer(
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
   if (isHost) {
-    const stateNode = isHost ? node.stateNode : node.stateNode.instance;
+    const stateNode = node.stateNode;
     if (before) {
       insertInContainerBefore(parent, stateNode, before);
     } else {
@@ -1644,7 +1644,7 @@ function insertOrAppendPlacementNode(
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
   if (isHost) {
-    const stateNode = isHost ? node.stateNode : node.stateNode.instance;
+    const stateNode = node.stateNode;
     if (before) {
       insertBefore(parent, stateNode, before);
     } else {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index ca3dbe363f07..6179bd12a7be 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1613,7 +1613,7 @@ function insertOrAppendPlacementNodeIntoContainer(
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
   if (isHost) {
-    const stateNode = isHost ? node.stateNode : node.stateNode.instance;
+    const stateNode = node.stateNode;
     if (before) {
       insertInContainerBefore(parent, stateNode, before);
     } else {
@@ -1644,7 +1644,7 @@ function insertOrAppendPlacementNode(
   const {tag} = node;
   const isHost = tag === HostComponent || tag === HostText;
   if (isHost) {
-    const stateNode = isHost ? node.stateNode : node.stateNode.instance;
+    const stateNode = node.stateNode;
     if (before) {
       insertBefore(parent, stateNode, before);
     } else {

From 1214b302e11b06f5fd11f2af20c20b2f26386827 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 8 Apr 2021 17:18:13 +0200
Subject: [PATCH 0410/1603] test: Fix "couldn't locate all inline snapshots"
 (#21205)

---
 .../src/__tests__/inspectedElement-test.js    | 125 +++++-------------
 .../__tests__/legacy/inspectElement-test.js   |  39 ++----
 .../src/__tests__/ownersListContext-test.js   |  15 +--
 .../src/__tests__/profilerContext-test.js     |  24 +---
 .../src/__tests__/profilingCache-test.js      |   4 +-
 .../profilingCommitTreeBuilder-test.js        |  16 +--
 .../src/__tests__/store-test.js               |  20 +--
 .../src/__tests__/ReactTestRenderer-test.js   |   8 +-
 8 files changed, 68 insertions(+), 183 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 193f4670d378..60119df3a972 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -136,7 +136,7 @@ describe('InspectedElement', () => {
     return inspectedElement;
   }
 
-  it('should inspect the currently selected element', async done => {
+  it('should inspect the currently selected element', async () => {
     const Example = () => {
       const [count] = React.useState(1);
       return count;
@@ -170,11 +170,9 @@ describe('InspectedElement', () => {
         "state": null,
       }
     `);
-
-    done();
   });
 
-  it('should have hasLegacyContext flag set to either "true" or "false" depending on which context API is used.', async done => {
+  it('should have hasLegacyContext flag set to either "true" or "false" depending on which context API is used.', async () => {
     const contextData = {
       bool: true,
     };
@@ -270,10 +268,9 @@ describe('InspectedElement', () => {
       expect(inspectedElement.context).not.toBe(null);
       expect(inspectedElement.hasLegacyContext).toBe(shouldHaveLegacyContext);
     }
-    done();
   });
 
-  it('should poll for updates for the currently selected element', async done => {
+  it('should poll for updates for the currently selected element', async () => {
     const Example = () => null;
 
     const container = document.createElement('div');
@@ -312,11 +309,9 @@ describe('InspectedElement', () => {
         "b": "def",
       }
     `);
-
-    done();
   });
 
-  it('should not re-render a function with hooks if it did not update since it was last inspected', async done => {
+  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;
@@ -377,11 +372,9 @@ describe('InspectedElement', () => {
         "b": "def",
       }
     `);
-
-    done();
   });
 
-  it('should temporarily disable console logging when re-running a component to inspect its hooks', async done => {
+  it('should temporarily disable console logging when re-running a component to inspect its hooks', async () => {
     let targetRenderCount = 0;
 
     jest.spyOn(console, 'error').mockImplementation(() => {});
@@ -422,11 +415,9 @@ describe('InspectedElement', () => {
     expect(console.info).toHaveBeenCalledTimes(1);
     expect(console.log).toHaveBeenCalledTimes(1);
     expect(console.warn).toHaveBeenCalledTimes(1);
-
-    done();
   });
 
-  it('should support simple data types', async done => {
+  it('should support simple data types', async () => {
     const Example = () => null;
 
     const container = document.createElement('div');
@@ -463,11 +454,9 @@ describe('InspectedElement', () => {
     expect(props.nan).toBeNaN();
     expect(props.value_null).toBeNull();
     expect(props.value_undefined).toBeUndefined();
-
-    done();
   });
 
-  it('should support complex data types', async done => {
+  it('should support complex data types', async () => {
     const Immutable = require('immutable');
 
     const Example = () => null;
@@ -719,11 +708,9 @@ describe('InspectedElement', () => {
     expect(typed_array[2]).toBe(0);
     expect(typed_array[meta.preview_long]).toBe('Int8Array(3) [100, -100, 0]');
     expect(typed_array[meta.preview_short]).toBe('Int8Array(3)');
-
-    done();
   });
 
-  it('should not consume iterables while inspecting', async done => {
+  it('should not consume iterables while inspecting', async () => {
     const Example = () => null;
 
     function* generator() {
@@ -745,11 +732,9 @@ describe('InspectedElement', () => {
     expect(prop[meta.type]).toBe('opaque_iterator');
     expect(prop[meta.preview_long]).toBe('Generator');
     expect(prop[meta.preview_short]).toBe('Generator');
-
-    done();
   });
 
-  it('should support objects with no prototype', async done => {
+  it('should support objects with no prototype', async () => {
     const Example = () => null;
 
     const object = Object.create(null);
@@ -772,11 +757,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should support objects with overridden hasOwnProperty', async done => {
+  it('should support objects with overridden hasOwnProperty', async () => {
     const Example = () => null;
 
     const object = {
@@ -795,11 +778,9 @@ describe('InspectedElement', () => {
     // Our snapshot serializer relies on hasOwnProperty() for feature detection.
     expect(inspectedElement.props.object.name).toBe('blah');
     expect(inspectedElement.props.object.hasOwnProperty).toBe(true);
-
-    done();
   });
 
-  it('should support custom objects with enumerable properties and getters', async done => {
+  it('should support custom objects with enumerable properties and getters', async () => {
     class CustomData {
       _number = 42;
       get number() {
@@ -833,11 +814,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should support objects with with inherited keys', async done => {
+  it('should support objects with with inherited keys', async () => {
     const Example = () => null;
 
     const base = Object.create(Object.prototype, {
@@ -917,11 +896,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should allow component prop value and value`s prototype has same name params.', async done => {
+  it('should allow component prop value and value`s prototype has same name params.', async () => {
     const testData = Object.create(
       {
         a: undefined,
@@ -973,11 +950,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should not dehydrate nested values until explicitly requested', async done => {
+  it('should not dehydrate nested values until explicitly requested', async () => {
     const Example = () => {
       const [state] = React.useState({
         foo: {
@@ -1140,11 +1115,9 @@ describe('InspectedElement', () => {
         },
       ]
     `);
-
-    done();
   });
 
-  it('should dehydrate complex nested values when requested', async done => {
+  it('should dehydrate complex nested values when requested', async () => {
     const Example = () => null;
 
     const container = document.createElement('div');
@@ -1208,11 +1181,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should include updates for nested values that were previously hydrated', async done => {
+  it('should include updates for nested values that were previously hydrated', async () => {
     const Example = () => null;
 
     const container = document.createElement('div');
@@ -1373,11 +1344,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should return a full update if a path is inspected for an object that has other pending changes', async done => {
+  it('should return a full update if a path is inspected for an object that has other pending changes', async () => {
     const Example = () => null;
 
     const container = document.createElement('div');
@@ -1510,11 +1479,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should not tear if hydration is requested after an update', async done => {
+  it('should not tear if hydration is requested after an update', async () => {
     const Example = () => null;
 
     const container = document.createElement('div');
@@ -1598,11 +1565,9 @@ describe('InspectedElement', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should inspect hooks for components that only use context', async done => {
+  it('should inspect hooks for components that only use context', async () => {
     const Context = React.createContext(true);
     const Example = () => {
       const value = React.useContext(Context);
@@ -1637,11 +1602,9 @@ describe('InspectedElement', () => {
         "state": null,
       }
     `);
-
-    done();
   });
 
-  it('should enable inspected values to be stored as global variables', async done => {
+  it('should enable inspected values to be stored as global variables', async () => {
     const Example = () => null;
 
     const nestedObject = {
@@ -1698,11 +1661,9 @@ describe('InspectedElement', () => {
     jest.runOnlyPendingTimers();
     expect(console.log).toHaveBeenCalledWith('$reactTemp1');
     expect(global.$reactTemp1).toBe(nestedObject.a.b);
-
-    done();
   });
 
-  it('should enable inspected values to be copied to the clipboard', async done => {
+  it('should enable inspected values to be copied to the clipboard', async () => {
     const Example = () => null;
 
     const nestedObject = {
@@ -1761,11 +1722,9 @@ describe('InspectedElement', () => {
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
       JSON.stringify(nestedObject.a.b),
     );
-
-    done();
   });
 
-  it('should enable complex values to be copied to the clipboard', async done => {
+  it('should enable complex values to be copied to the clipboard', async () => {
     const Immutable = require('immutable');
 
     const Example = () => null;
@@ -1856,11 +1815,9 @@ describe('InspectedElement', () => {
     expect(global.mockClipboardCopy).toHaveBeenCalledWith(
       JSON.stringify({0: 100, 1: -100, 2: 0}),
     );
-
-    done();
   });
 
-  it('should display complex values of useDebugValue', async done => {
+  it('should display complex values of useDebugValue', async () => {
     const container = document.createElement('div');
 
     function useDebuggableHook() {
@@ -1899,12 +1856,10 @@ describe('InspectedElement', () => {
         },
       ]
     `);
-
-    done();
   });
 
   describe('$r', () => {
-    it('should support function components', async done => {
+    it('should support function components', async () => {
       const Example = () => {
         const [count] = React.useState(1);
         return count;
@@ -1935,11 +1890,9 @@ describe('InspectedElement', () => {
           "type": [Function],
         }
       `);
-
-      done();
     });
 
-    it('should support memoized function components', async done => {
+    it('should support memoized function components', async () => {
       const Example = React.memo(function Example(props) {
         const [count] = React.useState(1);
         return count;
@@ -1970,11 +1923,9 @@ describe('InspectedElement', () => {
           "type": [Function],
         }
       `);
-
-      done();
     });
 
-    it('should support forward refs', async done => {
+    it('should support forward refs', async () => {
       const Example = React.forwardRef(function Example(props, ref) {
         const [count] = React.useState(1);
         return count;
@@ -2005,11 +1956,9 @@ describe('InspectedElement', () => {
           "type": [Function],
         }
       `);
-
-      done();
     });
 
-    it('should support class components', async done => {
+    it('should support class components', async () => {
       class Example extends React.Component {
         state = {
           count: 0,
@@ -2027,18 +1976,16 @@ describe('InspectedElement', () => {
       await inspectElementAtIndex(0);
 
       expect(global.$r.props).toMatchInlineSnapshot(`
-      Object {
-        "a": 1,
-        "b": "abc",
-      }
-      `);
+              Object {
+                "a": 1,
+                "b": "abc",
+              }
+            `);
       expect(global.$r.state).toMatchInlineSnapshot(`
-      Object {
-        "count": 0,
-      }
-      `);
-
-      done();
+              Object {
+                "count": 0,
+              }
+            `);
     });
   });
 
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 5718c782a9ae..b01d9c0fe9c5 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -62,7 +62,7 @@ describe('InspectedElementContext', () => {
     ReactDOM = require('react-dom');
   });
 
-  it('should inspect the currently selected element', async done => {
+  it('should inspect the currently selected element', async () => {
     const Example = () => null;
 
     act(() =>
@@ -86,11 +86,9 @@ describe('InspectedElementContext', () => {
         "state": null,
       }
     `);
-
-    done();
   });
 
-  it('should support simple data types', async done => {
+  it('should support simple data types', async () => {
     const Example = () => null;
 
     act(() =>
@@ -138,11 +136,9 @@ describe('InspectedElementContext', () => {
         "state": null,
       }
     `);
-
-    done();
   });
 
-  it('should support complex data types', async done => {
+  it('should support complex data types', async () => {
     const Immutable = require('immutable');
 
     const Example = () => null;
@@ -338,11 +334,9 @@ describe('InspectedElementContext', () => {
     expect(typed_array[0]).toBe(100);
     expect(typed_array[1]).toBe(-100);
     expect(typed_array[2]).toBe(0);
-
-    done();
   });
 
-  it('should support objects with no prototype', async done => {
+  it('should support objects with no prototype', async () => {
     const Example = () => null;
 
     const object = Object.create(null);
@@ -369,11 +363,9 @@ describe('InspectedElementContext', () => {
         },
       }
     `);
-
-    done();
   });
 
-  it('should support objects with overridden hasOwnProperty', async done => {
+  it('should support objects with overridden hasOwnProperty', async () => {
     const Example = () => null;
 
     const object = {
@@ -395,11 +387,9 @@ describe('InspectedElementContext', () => {
     // Our snapshot serializer relies on hasOwnProperty() for feature detection.
     expect(inspectedElement.props.object.name).toBe('blah');
     expect(inspectedElement.props.object.hasOwnProperty).toBe(true);
-
-    done();
   });
 
-  it('should not consume iterables while inspecting', async done => {
+  it('should not consume iterables while inspecting', async () => {
     const Example = () => null;
 
     function* generator() {
@@ -440,11 +430,9 @@ describe('InspectedElementContext', () => {
     expect(iteratable.next().value).toEqual(1);
     expect(iteratable.next().value).toEqual(2);
     expect(iteratable.next().value).toBeUndefined();
-
-    done();
   });
 
-  it('should support custom objects with enumerable properties and getters', async done => {
+  it('should support custom objects with enumerable properties and getters', async () => {
     class CustomData {
       _number = 42;
       get number() {
@@ -490,11 +478,9 @@ describe('InspectedElementContext', () => {
         "state": null,
       }
     `);
-
-    done();
   });
 
-  it('should support objects with with inherited keys', async done => {
+  it('should support objects with with inherited keys', async () => {
     const Example = () => null;
 
     const base = Object.create(Object.prototype, {
@@ -583,11 +569,9 @@ describe('InspectedElementContext', () => {
         "state": null,
       }
     `);
-
-    done();
   });
 
-  it('should allow component prop value and value`s prototype has same name params.', async done => {
+  it('should allow component prop value and value`s prototype has same name params.', async () => {
     const testData = Object.create(
       {
         a: undefined,
@@ -644,10 +628,9 @@ describe('InspectedElementContext', () => {
         },
       }
     `);
-    done();
   });
 
-  it('should not dehydrate nested values until explicitly requested', async done => {
+  it('should not dehydrate nested values until explicitly requested', async () => {
     const Example = () => null;
 
     act(() =>
@@ -747,8 +730,6 @@ describe('InspectedElementContext', () => {
         },
       }
     `);
-
-    done();
   });
 
   it('should enable inspected values to be stored as global variables', () => {
diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
index 4e60bd6a5502..27b75afdd333 100644
--- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -60,7 +60,7 @@ describe('OwnersListContext', () => {
     </BridgeContext.Provider>
   );
 
-  it('should fetch the owners list for the selected element', async done => {
+  it('should fetch the owners list for the selected element', async () => {
     const Grandparent = () => <Parent />;
     const Parent = () => {
       return (
@@ -115,11 +115,9 @@ describe('OwnersListContext', () => {
       ),
     );
     expect(didFinish).toBe(true);
-
-    done();
   });
 
-  it('should fetch the owners list for the selected element that includes filtered components', async done => {
+  it('should fetch the owners list for the selected element that includes filtered components', async () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
     const Grandparent = () => <Parent />;
@@ -163,11 +161,9 @@ describe('OwnersListContext', () => {
       ),
     );
     expect(didFinish).toBe(true);
-
-    done();
   });
 
-  it('should include the current element even if there are no other owners', async done => {
+  it('should include the current element even if there are no other owners', async () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
     const Grandparent = () => <Parent />;
@@ -203,11 +199,9 @@ describe('OwnersListContext', () => {
       ),
     );
     expect(didFinish).toBe(true);
-
-    done();
   });
 
-  it('should include all owners for a component wrapped in react memo', async done => {
+  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);
@@ -243,6 +237,5 @@ describe('OwnersListContext', () => {
       ),
     );
     expect(didFinish).toBe(true);
-    done();
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
index a65b65e5b7cf..21c2b2427b4f 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
@@ -74,7 +74,7 @@ describe('ProfilerContext', () => {
     </BridgeContext.Provider>
   );
 
-  it('updates updates profiling support based on the attached roots', async done => {
+  it('updates updates profiling support based on the attached roots', async () => {
     const Component = () => null;
 
     let context: Context = ((null: any): Context);
@@ -105,11 +105,9 @@ describe('ProfilerContext', () => {
 
     await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerB));
     expect(context.supportsProfiling).toBe(false);
-
-    done();
   });
 
-  it('should gracefully handle an empty profiling session (with no recorded commits)', async done => {
+  it('should gracefully handle an empty profiling session (with no recorded commits)', async () => {
     const Example = () => null;
 
     utils.act(() =>
@@ -144,11 +142,9 @@ describe('ProfilerContext', () => {
     expect(context.isProcessingData).toBe(false);
     expect(context.isProfiling).toBe(false);
     expect(context.profilingData).toBe(null);
-
-    done();
   });
 
-  it('should auto-select the root ID matching the Components tab selection if it has profiling data', async done => {
+  it('should auto-select the root ID matching the Components tab selection if it has profiling data', async () => {
     const Parent = () => <Child />;
     const Child = () => null;
 
@@ -185,11 +181,9 @@ describe('ProfilerContext', () => {
     expect(context.rootID).toBe(
       store.getRootIDForElement(((store.getElementIDAtIndex(3): any): number)),
     );
-
-    done();
   });
 
-  it('should not select the root ID matching the Components tab selection if it has no profiling data', async done => {
+  it('should not select the root ID matching the Components tab selection if it has no profiling data', async () => {
     const Parent = () => <Child />;
     const Child = () => null;
 
@@ -226,11 +220,9 @@ describe('ProfilerContext', () => {
     expect(context.rootID).toBe(
       store.getRootIDForElement(((store.getElementIDAtIndex(0): any): number)),
     );
-
-    done();
   });
 
-  it('should maintain root selection between profiling sessions so long as there is data for that root', async done => {
+  it('should maintain root selection between profiling sessions so long as there is data for that root', async () => {
     const Parent = () => <Child />;
     const Child = () => null;
 
@@ -284,11 +276,9 @@ describe('ProfilerContext', () => {
     expect(selectedElementID).toBe(otherID);
     expect(context).not.toBeNull();
     expect(context.rootID).toBe(store.getRootIDForElement(id));
-
-    done();
   });
 
-  it('should sync selected element in the Components tab too, provided the element is a match', async done => {
+  it('should sync selected element in the Components tab too, provided the element is a match', async () => {
     const GrandParent = ({includeChild}) => (
       <Parent includeChild={includeChild} />
     );
@@ -340,7 +330,5 @@ describe('ProfilerContext', () => {
     // Select an unmounted element and verify no Components tab selection doesn't change.
     await utils.actAsync(() => context.selectFiber(childID, 'Child'));
     expect(selectedElementID).toBe(parentID);
-
-    done();
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 476b073843e0..84311c0d8797 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -478,7 +478,7 @@ describe('ProfilingCache', () => {
     expect(commitData).not.toBeNull();
   });
 
-  it('should calculate self duration correctly for suspended views', async done => {
+  it('should calculate self duration correctly for suspended views', async () => {
     let data;
     const getData = () => {
       if (data) {
@@ -536,8 +536,6 @@ describe('ProfilingCache', () => {
     }
 
     expect(allCommitData).toHaveLength(2);
-
-    done();
   });
 
   it('should collect data for each rendered fiber', () => {
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index 544f4d1614d8..e597c775d076 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -104,7 +104,7 @@ describe('commit tree', () => {
       LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent));
     });
 
-    it('should support Lazy components (legacy render)', async done => {
+    it('should support Lazy components (legacy render)', async () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
@@ -145,11 +145,9 @@ describe('commit tree', () => {
 
         expect(renderFinished).toBe(true);
       }
-
-      done();
     });
 
-    it('should support Lazy components (createRoot)', async done => {
+    it('should support Lazy components (createRoot)', async () => {
       const container = document.createElement('div');
       const root = ReactDOM.unstable_createRoot(container);
 
@@ -185,11 +183,9 @@ describe('commit tree', () => {
 
         expect(renderFinished).toBe(true);
       }
-
-      done();
     });
 
-    it('should support Lazy components that are unmounted before resolving (legacy render)', async done => {
+    it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
@@ -226,11 +222,9 @@ describe('commit tree', () => {
 
         expect(renderFinished).toBe(true);
       }
-
-      done();
     });
 
-    it('should support Lazy components that are unmounted before resolving (createRoot)', async done => {
+    it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
       const container = document.createElement('div');
       const root = ReactDOM.unstable_createRoot(container);
 
@@ -264,8 +258,6 @@ describe('commit tree', () => {
 
         expect(renderFinished).toBe(true);
       }
-
-      done();
     });
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 1a283fe120ef..f971946b686a 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -853,7 +853,7 @@ describe('Store', () => {
     expect(store).toMatchSnapshot('1: mount');
   });
 
-  it('should show the right display names for special component types', async done => {
+  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;
@@ -905,8 +905,6 @@ describe('Store', () => {
     act(() => ReactDOM.render(<App />, container));
 
     expect(store).toMatchSnapshot();
-
-    done();
   });
 
   describe('Lazy', () => {
@@ -933,7 +931,7 @@ describe('Store', () => {
       LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent));
     });
 
-    it('should support Lazy components (legacy render)', async done => {
+    it('should support Lazy components (legacy render)', async () => {
       const container = document.createElement('div');
 
       // Render once to start fetching the lazy component
@@ -952,11 +950,9 @@ describe('Store', () => {
       act(() => ReactDOM.render(<App renderChildren={false} />, container));
 
       expect(store).toMatchSnapshot('3: unmounted');
-
-      done();
     });
 
-    it('should support Lazy components in (createRoot)', async done => {
+    it('should support Lazy components in (createRoot)', async () => {
       const container = document.createElement('div');
       const root = ReactDOM.unstable_createRoot(container);
 
@@ -976,11 +972,9 @@ describe('Store', () => {
       act(() => root.render(<App renderChildren={false} />));
 
       expect(store).toMatchSnapshot('3: unmounted');
-
-      done();
     });
 
-    it('should support Lazy components that are unmounted before they finish loading (legacy render)', async done => {
+    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
@@ -992,11 +986,9 @@ describe('Store', () => {
       act(() => ReactDOM.render(<App renderChildren={false} />, container));
 
       expect(store).toMatchSnapshot('2: unmounted');
-
-      done();
     });
 
-    it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async done => {
+    it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
       const container = document.createElement('div');
       const root = ReactDOM.unstable_createRoot(container);
 
@@ -1009,8 +1001,6 @@ describe('Store', () => {
       act(() => root.render(<App renderChildren={false} />));
 
       expect(store).toMatchSnapshot('2: unmounted');
-
-      done();
     });
   });
 
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
index 6f1536d7de13..19231b914287 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.js
@@ -60,7 +60,7 @@ describe('ReactTestRenderer', () => {
       };
     });
 
-    it('for root Suspense components', async done => {
+    it('for root Suspense components', async () => {
       const App = ({text}) => {
         return (
           <React.Suspense fallback="fallback">
@@ -82,11 +82,9 @@ describe('ReactTestRenderer', () => {
       await Promise.resolve();
       Scheduler.unstable_flushAll();
       expect(root.toJSON()).toEqual('dynamic');
-
-      done();
     });
 
-    it('for nested Suspense components', async done => {
+    it('for nested Suspense components', async () => {
       const App = ({text}) => {
         return (
           <div>
@@ -110,8 +108,6 @@ describe('ReactTestRenderer', () => {
       await Promise.resolve();
       Scheduler.unstable_flushAll();
       expect(root.toJSON().children).toEqual(['dynamic']);
-
-      done();
     });
   });
 });

From 75c616554d06bfd2c82108ad0c0196d674c72ba9 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 8 Apr 2021 19:36:42 +0200
Subject: [PATCH 0411/1603] Include actual type of `Profiler#id` on type
 mismatch (#20306)

---
 packages/react-reconciler/src/ReactFiber.new.js          | 5 ++++-
 packages/react-reconciler/src/ReactFiber.old.js          | 5 ++++-
 .../react/src/__tests__/ReactProfiler-test.internal.js   | 9 ++++++---
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index de9c83e3a35d..95a5340b1873 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -651,7 +651,10 @@ function createFiberFromProfiler(
 ): Fiber {
   if (__DEV__) {
     if (typeof pendingProps.id !== 'string') {
-      console.error('Profiler must specify an "id" as a prop');
+      console.error(
+        'Profiler must specify an "id" of type `string` as a prop. Received the type `%s` instead.',
+        typeof pendingProps.id,
+      );
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index f399ab359314..159557e86a16 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -651,7 +651,10 @@ function createFiberFromProfiler(
 ): Fiber {
   if (__DEV__) {
     if (typeof pendingProps.id !== 'string') {
-      console.error('Profiler must specify an "id" as a prop');
+      console.error(
+        'Profiler must specify an "id" of type `string` as a prop. Received the type `%s` instead.',
+        typeof pendingProps.id,
+      );
     }
   }
 
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index ab7fbb73f025..6b0c02432544 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -136,9 +136,12 @@ describe('Profiler', () => {
             it('should warn if required params are missing', () => {
               expect(() => {
                 ReactTestRenderer.create(<React.Profiler />);
-              }).toErrorDev('Profiler must specify an "id" as a prop', {
-                withoutStack: true,
-              });
+              }).toErrorDev(
+                'Profiler must specify an "id" of type `string` as a prop. Received the type `undefined` instead.',
+                {
+                  withoutStack: true,
+                },
+              );
             });
           }
 

From cf45a623a1787cf57094eb7d2f66903d358647fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 8 Apr 2021 13:42:37 -0400
Subject: [PATCH 0412/1603] [Fizz] Implement Classes (#21200)

* Legacy context

* Port Classes from Fiber to Fizz
---
 .../src/ReactFizzClassComponent.js            | 673 ++++++++++++++++++
 packages/react-server/src/ReactFizzContext.js |  94 +++
 packages/react-server/src/ReactFizzServer.js  | 288 +++++++-
 3 files changed, 1042 insertions(+), 13 deletions(-)
 create mode 100644 packages/react-server/src/ReactFizzClassComponent.js
 create mode 100644 packages/react-server/src/ReactFizzContext.js

diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
new file mode 100644
index 000000000000..d56bc633b849
--- /dev/null
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -0,0 +1,673 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {emptyContextObject} from './ReactFizzContext';
+
+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_PROVIDER_TYPE} from 'shared/ReactSymbols';
+import isArray from 'shared/isArray';
+
+const didWarnAboutNoopUpdateForComponent = {};
+
+let didWarnAboutUninitializedState;
+let didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
+let didWarnAboutLegacyLifecyclesAndDerivedState;
+let didWarnAboutUndefinedDerivedState;
+let warnOnUndefinedDerivedState;
+let warnOnInvalidCallback;
+let didWarnAboutDirectlyAssigningPropsToState;
+let didWarnAboutContextTypeAndContextTypes;
+let didWarnAboutInvalidateContextType;
+
+if (__DEV__) {
+  didWarnAboutUninitializedState = new Set();
+  didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate = new Set();
+  didWarnAboutLegacyLifecyclesAndDerivedState = new Set();
+  didWarnAboutDirectlyAssigningPropsToState = new Set();
+  didWarnAboutUndefinedDerivedState = new Set();
+  didWarnAboutContextTypeAndContextTypes = new Set();
+  didWarnAboutInvalidateContextType = new Set();
+
+  const didWarnOnInvalidCallback = new Set();
+
+  warnOnInvalidCallback = function(callback: mixed, callerName: string) {
+    if (callback === null || typeof callback === 'function') {
+      return;
+    }
+    const key = callerName + '_' + (callback: any);
+    if (!didWarnOnInvalidCallback.has(key)) {
+      didWarnOnInvalidCallback.add(key);
+      console.error(
+        '%s(...): Expected the last optional `callback` argument to be a ' +
+          'function. Instead received: %s.',
+        callerName,
+        callback,
+      );
+    }
+  };
+
+  warnOnUndefinedDerivedState = function(type, partialState) {
+    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: React$Component<any, 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(
+      '%s(...): Can only update a mounting component. ' +
+        'This usually means you called %s() outside componentWillMount() on the server. ' +
+        'This is a no-op.\n\nPlease check the code for the %s component.',
+      callerName,
+      callerName,
+      componentName,
+    );
+    didWarnAboutNoopUpdateForComponent[warningKey] = true;
+  }
+}
+
+type InternalInstance = {
+  queue: null | Array<Object>,
+  replace: boolean,
+};
+
+const classComponentUpdater = {
+  isMounted(inst) {
+    return false;
+  },
+  enqueueSetState(inst, payload, 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, 'setState');
+        }
+      }
+    }
+  },
+  enqueueReplaceState(inst, payload, callback) {
+    const internals: InternalInstance = getInstance(inst);
+    internals.replace = true;
+    internals.queue = [payload];
+    if (__DEV__) {
+      if (callback !== undefined && callback !== null) {
+        warnOnInvalidCallback(callback, 'setState');
+      }
+    }
+  },
+  enqueueForceUpdate(inst, callback) {
+    const internals: InternalInstance = getInstance(inst);
+    if (internals.queue === null) {
+      warnNoop(inst, 'forceUpdate');
+    } else {
+      if (__DEV__) {
+        if (callback !== undefined && callback !== null) {
+          warnOnInvalidCallback(callback, 'setState');
+        }
+      }
+    }
+  },
+};
+
+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
+      : Object.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 &&
+          contextType._context === undefined); // Not a <Context.Consumer>
+
+      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_PROVIDER_TYPE) {
+          addendum = ' Did you accidentally pass the Context.Provider instead?';
+        } else if (contextType._context !== undefined) {
+          // <Context.Consumer>
+          addendum = ' Did you accidentally pass the Context.Consumer instead?';
+        } else {
+          addendum =
+            ' However, it is set to an object with keys {' +
+            Object.keys(contextType).join(', ') +
+            '}.';
+        }
+        console.error(
+          '%s defines an invalid contextType. ' +
+            'contextType should point to the Context object returned by React.createContext().%s',
+          getComponentNameFromType(ctor) || 'Component',
+          addendum,
+        );
+      }
+    }
+  }
+
+  if (typeof contextType === 'object' && contextType !== null) {
+    // TODO: Implement Context.
+    // context = readContext((contextType: any));
+    throw new Error('Context is not yet implemented.');
+  } 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://reactjs.org/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(
+          '%s(...): No `render` method found on the returned component ' +
+            'instance: did you accidentally return an object from the constructor?',
+          name,
+        );
+      } else {
+        console.error(
+          '%s(...): No `render` method found on the returned component ' +
+            '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.propTypes) {
+      console.error(
+        'propTypes was defined as an instance property on %s. Use a static ' +
+          'property to define propTypes instead.',
+        name,
+      );
+    }
+    if (instance.contextType) {
+      console.error(
+        'contextType was defined as an instance property on %s. Use a static ' +
+          'property to define contextType instead.',
+        name,
+      );
+    }
+
+    if (disableLegacyContext) {
+      if (ctor.childContextTypes) {
+        console.error(
+          '%s uses the legacy childContextTypes API which is no longer supported. ' +
+            'Use React.createContext() instead.',
+          name,
+        );
+      }
+      if (ctor.contextTypes) {
+        console.error(
+          '%s uses the legacy contextTypes API which is no longer supported. ' +
+            'Use React.createContext() with static contextType instead.',
+          name,
+        );
+      }
+    } else {
+      if (instance.contextTypes) {
+        console.error(
+          'contextTypes was defined as an instance property on %s. Use a static ' +
+            'property to define contextTypes instead.',
+          name,
+        );
+      }
+
+      if (
+        ctor.contextType &&
+        ctor.contextTypes &&
+        !didWarnAboutContextTypeAndContextTypes.has(ctor)
+      ) {
+        didWarnAboutContextTypeAndContextTypes.add(ctor);
+        console.error(
+          '%s declares both contextTypes and contextType static properties. ' +
+            'The legacy contextTypes property will be ignored.',
+          name,
+        );
+      }
+    }
+
+    if (typeof instance.componentShouldUpdate === 'function') {
+      console.error(
+        '%s has a method called ' +
+          'componentShouldUpdate(). Did you mean shouldComponentUpdate()? ' +
+          'The name is phrased as a question because the function is ' +
+          'expected to return a value.',
+        name,
+      );
+    }
+    if (
+      ctor.prototype &&
+      ctor.prototype.isPureReactComponent &&
+      typeof instance.shouldComponentUpdate !== 'undefined'
+    ) {
+      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(
+        '%s(...): When calling super() in `%s`, make sure to pass ' +
+          "up the same props that your component's constructor was passed.",
+        name,
+        name,
+      );
+    }
+    if (instance.defaultProps) {
+      console.error(
+        'Setting defaultProps as an instance property on %s is not supported and will be ignored.' +
+          ' Instead, define defaultProps as a static property on %s.',
+        name,
+        name,
+      );
+    }
+
+    if (
+      typeof instance.getSnapshotBeforeUpdate === 'function' &&
+      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, instance) {
+  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.',
+        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 = Object.assign({}, nextState, partialState);
+          } else {
+            Object.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: null,
+    replace: false,
+  };
+  setInstance(instance, internalInstance);
+
+  const contextType = ctor.contextType;
+  if (typeof contextType === 'object' && contextType !== null) {
+    // TODO: Implement Context.
+    // instance.context = readContext(contextType);
+    throw new Error('Context is not yet implemented.');
+  } 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/ReactFizzContext.js b/packages/react-server/src/ReactFizzContext.js
new file mode 100644
index 000000000000..85751e779d11
--- /dev/null
+++ b/packages/react-server/src/ReactFizzContext.js
@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {disableLegacyContext} from 'shared/ReactFeatureFlags';
+import getComponentNameFromType from 'shared/getComponentNameFromType';
+import invariant from 'shared/invariant';
+import checkPropTypes from 'shared/checkPropTypes';
+
+let warnedAboutMissingGetChildContext;
+
+if (__DEV__) {
+  warnedAboutMissingGetChildContext = {};
+}
+
+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 = {};
+    for (const key in contextTypes) {
+      context[key] = unmaskedContext[key];
+    }
+
+    if (__DEV__) {
+      const name = getComponentNameFromType(type) || 'Unknown';
+      checkPropTypes(contextTypes, context, 'context', name);
+    }
+
+    return context;
+  }
+}
+
+export function processChildContext(
+  type: any,
+  instance: 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) {
+      invariant(
+        contextKey in childContextTypes,
+        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
+        getComponentNameFromType(type) || 'Unknown',
+        contextKey,
+      );
+    }
+    if (__DEV__) {
+      const name = getComponentNameFromType(type) || 'Unknown';
+      checkPropTypes(childContextTypes, childContext, 'child context', name);
+    }
+
+    return {...parentContext, ...childContext};
+  }
+}
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index c1293c8ba4b4..4d94aa5945fb 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -47,14 +47,33 @@ import {
   createSuspenseBoundaryID,
   getChildFormatContext,
 } from './ReactServerFormatConfig';
+import {
+  constructClassInstance,
+  mountClassInstance,
+} from './ReactFizzClassComponent';
+import {
+  getMaskedContext,
+  processChildContext,
+  emptyContextObject,
+} from './ReactFizzContext';
 import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {
+  disableLegacyContext,
+  disableModulePatternComponents,
+  warnAboutDefaultPropsOnFunctionComponents,
+} from 'shared/ReactFeatureFlags';
 
+import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
+type LegacyContext = {
+  [key: string]: any,
+};
+
 type SuspenseBoundary = {
   +id: SuspenseBoundaryID,
   rootSegmentID: number,
@@ -72,6 +91,7 @@ type Task = {
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment, // the segment we'll write to
   abortSet: Set<Task>, // the abortable set that this task belongs to
+  legacyContext: LegacyContext, // the current legacy context that this task is executing in
   assignID: null | SuspenseBoundaryID, // id to assign to the content
 };
 
@@ -151,7 +171,7 @@ export function createRequest(
   children: ReactNodeList,
   destination: Destination,
   responseState: ResponseState,
-  rootContext: FormatContext,
+  rootFormatContext: FormatContext,
   progressiveChunkSize: number = DEFAULT_PROGRESSIVE_CHUNK_SIZE,
   onError: (error: mixed) => void = defaultErrorHandler,
   onCompleteAll: () => void = noop,
@@ -178,7 +198,7 @@ export function createRequest(
     onReadyToStream,
   };
   // This segment represents the root fallback.
-  const rootSegment = createPendingSegment(request, 0, null, rootContext);
+  const rootSegment = createPendingSegment(request, 0, null, rootFormatContext);
   // There is no parent so conceptually, we're unblocked to flush this segment.
   rootSegment.parentFlushed = true;
   const rootTask = createTask(
@@ -187,6 +207,7 @@ export function createRequest(
     null,
     rootSegment,
     abortSet,
+    emptyContextObject,
     null,
   );
   pingedTasks.push(rootTask);
@@ -223,6 +244,7 @@ function createTask(
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
   abortSet: Set<Task>,
+  legacyContext: LegacyContext,
   assignID: null | SuspenseBoundaryID,
 ): Task {
   request.allPendingTasks++;
@@ -237,6 +259,7 @@ function createTask(
     blockedBoundary,
     blockedSegment,
     abortSet,
+    legacyContext,
     assignID,
   };
   abortSet.add(task);
@@ -350,7 +373,7 @@ function renderSuspenseBoundary(
     task.blockedSegment = parentSegment;
   }
 
-  // We create suspended task for the fallback because we don't want to actually task
+  // 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 = createTask(
     request,
@@ -358,9 +381,10 @@ function renderSuspenseBoundary(
     parentBoundary,
     boundarySegment,
     fallbackAbortSet,
+    task.legacyContext,
     newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
   );
-  // TODO: This should be queued at a separate lower priority queue so that we only task
+  // 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);
 }
@@ -393,16 +417,247 @@ function renderHostElement(
   pushEndInstance(segment.chunks, type, props);
 }
 
-function renderFunctionComponent(
+function shouldConstruct(Component) {
+  return Component.prototype && Component.prototype.isReactComponent;
+}
+
+function renderWithHooks<Props, SecondArg>(
+  request: Request,
+  task: Task,
+  Component: (p: Props, arg: SecondArg) => any,
+  props: Props,
+  secondArg: SecondArg,
+): any {
+  // TODO: Set up Hooks etc.
+  const children = Component(props, secondArg);
+  return children;
+}
+
+function finishClassComponent(
   request: Request,
   task: Task,
-  type: (props: any) => ReactNodeList,
+  instance: Object,
+  Component: any,
+  props: any,
+): ReactNodeList {
+  const nextChildren = instance.render();
+
+  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);
+      task.legacyContext = previousContext;
+      return;
+    }
+  }
+
+  renderNodeDestructive(request, task, nextChildren);
+}
+
+function renderClassComponent(
+  request: Request,
+  task: Task,
+  Component: any,
   props: any,
 ): void {
-  const result = type(props);
-  // We're now successfully past this task, and we don't have to pop back to
-  // the previous task every again, so we can use the destructive recursive form.
-  renderNodeDestructive(request, task, result);
+  const unmaskedContext = !disableLegacyContext
+    ? task.legacyContext
+    : undefined;
+  const instance = constructClassInstance(Component, props, unmaskedContext);
+  mountClassInstance(instance, Component, props, unmaskedContext);
+  finishClassComponent(request, task, Component);
+}
+
+const didWarnAboutBadClass = {};
+const didWarnAboutModulePatternComponent = {};
+const didWarnAboutContextTypeOnFunctionComponent = {};
+const didWarnAboutGetDerivedStateOnFunctionComponent = {};
+let didWarnAboutReassigningProps = false;
+const didWarnAboutDefaultPropsOnFunctionComponent = {};
+
+// This would typically be a function component but we still support module pattern
+// components for some reason.
+function renderIndeterminateComponent(
+  request: Request,
+  task: Task,
+  Component: any,
+  props: any,
+): void {
+  let legacyContext;
+  if (!disableLegacyContext) {
+    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, Component, props, legacyContext);
+
+  if (__DEV__) {
+    // Support for module components is deprecated and is removed behind a flag.
+    // Whether or not it would crash later, we want to show a good message in DEV first.
+    if (
+      typeof value === 'object' &&
+      value !== null &&
+      typeof value.render === 'function' &&
+      value.$$typeof === undefined
+    ) {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+      if (!didWarnAboutModulePatternComponent[componentName]) {
+        console.error(
+          'The <%s /> component appears to be a function component that returns a class instance. ' +
+            'Change %s to a class that extends React.Component instead. ' +
+            "If you can't use a class try assigning the prototype on the function as a workaround. " +
+            "`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " +
+            'cannot be called with `new` by React.',
+          componentName,
+          componentName,
+          componentName,
+        );
+        didWarnAboutModulePatternComponent[componentName] = true;
+      }
+    }
+  }
+
+  if (
+    // Run these checks in production only if the flag is off.
+    // Eventually we'll delete this branch altogether.
+    !disableModulePatternComponents &&
+    typeof value === 'object' &&
+    value !== null &&
+    typeof value.render === 'function' &&
+    value.$$typeof === undefined
+  ) {
+    if (__DEV__) {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+      if (!didWarnAboutModulePatternComponent[componentName]) {
+        console.error(
+          'The <%s /> component appears to be a function component that returns a class instance. ' +
+            'Change %s to a class that extends React.Component instead. ' +
+            "If you can't use a class try assigning the prototype on the function as a workaround. " +
+            "`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " +
+            'cannot be called with `new` by React.',
+          componentName,
+          componentName,
+          componentName,
+        );
+        didWarnAboutModulePatternComponent[componentName] = true;
+      }
+    }
+
+    mountClassInstance(value, Component, props, legacyContext);
+    finishClassComponent(request, task, value, Component);
+  } else {
+    // Proceed under the assumption that this is a function component
+    if (__DEV__) {
+      if (disableLegacyContext && Component.contextTypes) {
+        console.error(
+          '%s uses the legacy contextTypes API which is no longer supported. ' +
+            'Use React.createContext() with React.useContext() instead.',
+          getComponentNameFromType(Component) || 'Unknown',
+        );
+      }
+    }
+    if (__DEV__) {
+      validateFunctionComponentInDev(Component);
+    }
+    // We're now successfully past this task, and we don't have to pop back to
+    // the previous task every again, so we can use the destructive recursive form.
+    renderNodeDestructive(request, task, value);
+  }
+}
+
+function validateFunctionComponentInDev(Component: any): void {
+  if (__DEV__) {
+    if (Component) {
+      if (Component.childContextTypes) {
+        console.error(
+          '%s(...): childContextTypes cannot be defined on a function component.',
+          Component.displayName || Component.name || 'Component',
+        );
+      }
+    }
+
+    if (
+      warnAboutDefaultPropsOnFunctionComponents &&
+      Component.defaultProps !== undefined
+    ) {
+      const componentName = getComponentNameFromType(Component) || 'Unknown';
+
+      if (!didWarnAboutDefaultPropsOnFunctionComponent[componentName]) {
+        console.error(
+          '%s: Support for defaultProps will be removed from function components ' +
+            'in a future major release. Use JavaScript default parameters instead.',
+          componentName,
+        );
+        didWarnAboutDefaultPropsOnFunctionComponent[componentName] = true;
+      }
+    }
+
+    if (typeof Component.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 renderElement(
@@ -413,7 +668,11 @@ function renderElement(
   node: ReactNodeList,
 ): void {
   if (typeof type === 'function') {
-    renderFunctionComponent(request, task, type, props);
+    if (shouldConstruct(type)) {
+      renderClassComponent(request, task, type, props);
+    } else {
+      renderIndeterminateComponent(request, task, type, props);
+    }
   } else if (typeof type === 'string') {
     renderHostElement(request, task, type, props);
   } else if (type === REACT_SUSPENSE_TYPE) {
@@ -505,6 +764,7 @@ function spawnNewSuspendedTask(
     task.blockedBoundary,
     newSegment,
     task.abortSet,
+    task.legacyContext,
     task.assignID,
   );
   // We've delegated the assignment.
@@ -521,7 +781,8 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
 
   // Snapshot the current context in case something throws to interrupt the
   // process.
-  const previousContext = task.blockedSegment.formatContext;
+  const previousFormatContext = task.blockedSegment.formatContext;
+  const previousLegacyContext = task.legacyContext;
   try {
     return renderNodeDestructive(request, task, node);
   } catch (x) {
@@ -529,7 +790,8 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       spawnNewSuspendedTask(request, task, x);
       // 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.blockedSegment.formatContext = previousContext;
+      task.blockedSegment.formatContext = previousFormatContext;
+      task.legacyContext = previousLegacyContext;
     } else {
       // We assume that we don't need the correct context.
       // Let's terminate the rest of the tree and don't render any siblings.

From c486dc1a46c47ad276140a51b1155eb1f8900dd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 8 Apr 2021 14:14:51 -0400
Subject: [PATCH 0413/1603] Remove unnecessary processUpdateQueue (#21199)

We've just initialized the update queue above this and there's no user
code that executes between.

The general API that prevents this from mattering is that you can't
call setState in the constructor.
---
 packages/react-reconciler/src/ReactFiberClassComponent.new.js | 1 -
 packages/react-reconciler/src/ReactFiberClassComponent.old.js | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 127f6e694786..44b9db7aacb2 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -885,7 +885,6 @@ function mountClassInstance(
     }
   }
 
-  processUpdateQueue(workInProgress, newProps, instance, renderLanes);
   instance.state = workInProgress.memoizedState;
 
   const getDerivedStateFromProps = ctor.getDerivedStateFromProps;
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 8e92d0d84407..ab2bb4379678 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -885,7 +885,6 @@ function mountClassInstance(
     }
   }
 
-  processUpdateQueue(workInProgress, newProps, instance, renderLanes);
   instance.state = workInProgress.memoizedState;
 
   const getDerivedStateFromProps = ctor.getDerivedStateFromProps;

From d389c54d179f8228d11b058141be4ddd02608abe Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Apr 2021 17:27:18 -0400
Subject: [PATCH 0414/1603] Offscreen: Use JS stack to track hidden/unhidden
 subtree state (#21211)

---
 .../src/ReactFiberCommitWork.new.js           | 51 ++++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 51 ++++++++++---------
 2 files changed, 56 insertions(+), 46 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 68d7a9c7cf7f..8f890f4dfd9c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -156,9 +156,7 @@ if (__DEV__) {
 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
 // Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
-const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
 let offscreenSubtreeWasHidden: boolean = false;
-const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
@@ -2305,11 +2303,35 @@ function commitLayoutEffects_begin(
         const wasHidden = current !== null && current.memoizedState !== null;
         const isHidden = fiber.memoizedState !== null;
 
-        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
-        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeIsHidden =
+          isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeWasHidden =
+          wasHidden || offscreenSubtreeWasHidden;
 
-        offscreenSubtreeWasHiddenStack.push(wasHidden);
-        offscreenSubtreeIsHiddenStack.push(isHidden);
+        if (
+          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
+          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
+        ) {
+          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+
+          // Traverse the Offscreen subtree with the current Offscreen as the root.
+          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+          commitLayoutEffects_begin(
+            fiber, // New root; bubble back up to here and stop.
+            root,
+            committedLanes,
+          );
+
+          // Restore Offscreen state and resume in our-progress traversal.
+          nextEffect = fiber;
+          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+          commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+
+          continue;
+        }
       }
     }
 
@@ -2350,23 +2372,6 @@ function commitLayoutMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-      if (fiber.tag === OffscreenComponent) {
-        offscreenSubtreeWasHiddenStack.pop();
-        offscreenSubtreeIsHiddenStack.pop();
-        offscreenSubtreeWasHidden =
-          offscreenSubtreeWasHiddenStack.length > 0 &&
-          offscreenSubtreeWasHiddenStack[
-            offscreenSubtreeWasHiddenStack.length - 1
-          ];
-        offscreenSubtreeIsHidden =
-          offscreenSubtreeIsHiddenStack.length > 0 &&
-          offscreenSubtreeIsHiddenStack[
-            offscreenSubtreeIsHiddenStack.length - 1
-          ];
-      }
-    }
-
     if (
       enableSuspenseLayoutEffectSemantics &&
       isModernRoot &&
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 6179bd12a7be..0c68fdaf0b3d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -156,9 +156,7 @@ if (__DEV__) {
 // Allows us to avoid traversing the return path to find the nearest Offscreen ancestor.
 // Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
-const offscreenSubtreeIsHiddenStack: Array<boolean> = [];
 let offscreenSubtreeWasHidden: boolean = false;
-const offscreenSubtreeWasHiddenStack: Array<boolean> = [];
 
 const PossiblyWeakSet = typeof WeakSet === 'function' ? WeakSet : Set;
 
@@ -2305,11 +2303,35 @@ function commitLayoutEffects_begin(
         const wasHidden = current !== null && current.memoizedState !== null;
         const isHidden = fiber.memoizedState !== null;
 
-        offscreenSubtreeWasHidden = wasHidden || offscreenSubtreeWasHidden;
-        offscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeIsHidden =
+          isHidden || offscreenSubtreeIsHidden;
+        const newOffscreenSubtreeWasHidden =
+          wasHidden || offscreenSubtreeWasHidden;
 
-        offscreenSubtreeWasHiddenStack.push(wasHidden);
-        offscreenSubtreeIsHiddenStack.push(isHidden);
+        if (
+          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
+          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
+        ) {
+          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+
+          // Traverse the Offscreen subtree with the current Offscreen as the root.
+          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+          commitLayoutEffects_begin(
+            fiber, // New root; bubble back up to here and stop.
+            root,
+            committedLanes,
+          );
+
+          // Restore Offscreen state and resume in our-progress traversal.
+          nextEffect = fiber;
+          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+          commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+
+          continue;
+        }
       }
     }
 
@@ -2350,23 +2372,6 @@ function commitLayoutMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-      if (fiber.tag === OffscreenComponent) {
-        offscreenSubtreeWasHiddenStack.pop();
-        offscreenSubtreeIsHiddenStack.pop();
-        offscreenSubtreeWasHidden =
-          offscreenSubtreeWasHiddenStack.length > 0 &&
-          offscreenSubtreeWasHiddenStack[
-            offscreenSubtreeWasHiddenStack.length - 1
-          ];
-        offscreenSubtreeIsHidden =
-          offscreenSubtreeIsHiddenStack.length > 0 &&
-          offscreenSubtreeIsHiddenStack[
-            offscreenSubtreeIsHiddenStack.length - 1
-          ];
-      }
-    }
-
     if (
       enableSuspenseLayoutEffectSemantics &&
       isModernRoot &&

From b943aeba88237265523ec8cdaf40d24a171681fc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 8 Apr 2021 20:45:35 -0500
Subject: [PATCH 0415/1603] Fix: Passive effect updates are never sync (#21215)

I screwed this up in #21082. Got confused by the < versus > thing again.

The helper functions are annoying, too, because I always forget the
intended order of the arguments. But they're still helpful because when
we refactor the type we only have the change the logic in one place.

Added a regression test.
---
 .../src/ReactEventPriorities.new.js           |  7 ++
 .../src/ReactEventPriorities.old.js           |  7 ++
 .../src/ReactFiberWorkLoop.new.js             |  8 +-
 .../src/ReactFiberWorkLoop.old.js             |  8 +-
 .../src/__tests__/ReactUpdatePriority-test.js | 81 +++++++++++++++++++
 5 files changed, 101 insertions(+), 10 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js

diff --git a/packages/react-reconciler/src/ReactEventPriorities.new.js b/packages/react-reconciler/src/ReactEventPriorities.new.js
index 2c1b9c249fa9..96225c19b3f1 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.new.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.new.js
@@ -53,6 +53,13 @@ export function higherEventPriority(
   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,
diff --git a/packages/react-reconciler/src/ReactEventPriorities.old.js b/packages/react-reconciler/src/ReactEventPriorities.old.js
index 7e1b0acb7a9a..8db74b9397a8 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.old.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.old.js
@@ -53,6 +53,13 @@ export function higherEventPriority(
   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,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 455067e47e26..425c46851aab 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -167,7 +167,7 @@ import {
   IdleEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
-  higherEventPriority,
+  lowerEventPriority,
   lanesToEventPriority,
 } from './ReactEventPriorities.new';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
@@ -2049,10 +2049,8 @@ function commitRootImpl(root, renderPriorityLevel) {
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsLanes !== NoLanes) {
-    const priority = higherEventPriority(
-      DefaultEventPriority,
-      lanesToEventPriority(pendingPassiveEffectsLanes),
-    );
+    const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
+    const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 9d056a46402c..b22901ff84ec 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -167,7 +167,7 @@ import {
   IdleEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
-  higherEventPriority,
+  lowerEventPriority,
   lanesToEventPriority,
 } from './ReactEventPriorities.old';
 import {requestCurrentTransition, NoTransition} from './ReactFiberTransition';
@@ -2049,10 +2049,8 @@ function commitRootImpl(root, renderPriorityLevel) {
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   if (pendingPassiveEffectsLanes !== NoLanes) {
-    const priority = higherEventPriority(
-      DefaultEventPriority,
-      lanesToEventPriority(pendingPassiveEffectsLanes),
-    );
+    const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
+    const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
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 000000000000..0aee7df66df4
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
@@ -0,0 +1,81 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let useState;
+let useEffect;
+
+describe('ReactUpdatePriority', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useEffect = React.useEffect;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  test('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 ReactNoop.act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<App />);
+      });
+      // Should not have flushed the effect update yet
+      expect(Scheduler).toHaveYielded([1]);
+    });
+    expect(Scheduler).toHaveYielded([2]);
+  });
+
+  test('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, _setDetaultState] = useState(1);
+      setDefaultState = _setDetaultState;
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Idle update');
+        setIdleState(2);
+      }, []);
+      return <Text text={`Idle: ${idleState}, Default: ${defaultState}`} />;
+    }
+
+    await ReactNoop.act(async () => {
+      ReactNoop.idleUpdates(() => {
+        root.render(<App />);
+      });
+      // Should not have flushed the effect update yet
+      expect(Scheduler).toFlushUntilNextPaint(['Idle: 1, Default: 1']);
+
+      // Schedule another update at default priority
+      setDefaultState(2);
+
+      // The default update flushes first, because
+      expect(Scheduler).toFlushUntilNextPaint([
+        // 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
+    expect(Scheduler).toHaveYielded(['Idle: 2, Default: 2']);
+  });
+});

From b38ac13f946ad305ead05a6a83511549db27322e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Apr 2021 22:04:51 -0400
Subject: [PATCH 0416/1603] DevTools: Add post-commit hook (#21183)

I recently added UI for the Profiler's commit and post-commit durations to the DevTools, but I made two pretty silly oversights:

    1. I used the commit hook (called after mutation+layout effects) to read both the layout and passive effect durations. This is silly because passive effects may not have flushed yet git at this point.
    2. I didn't reset the values on the HostRoot node, so they accumulated with each commit.

    This commitR addresses both issues:

    1. First it adds a new DevTools hook, onPostCommitRoot*, to be called after passive effects get flushed. This gives DevTools the opportunity to read passive effect durations (if the build of React being profiled supports it).
    2. Second the work loop resets these durations (on the HostRoot) after calling the post-commit hook so address the accumulation problem.
    I've also added a unit test to guard against this regressing in the future.

    * Doing this in flushPassiveEffectsImpl seemed simplest, since there are so many places we flush passive effects. Is there any potential problem with this though?
---
 .../src/__tests__/profilingHostRoot-test.js   | 144 ++++++++++++++++++
 .../src/backend/legacy/renderer.js            |   4 +
 .../src/backend/renderer.js                   |  65 +++-----
 .../src/backend/types.js                      |   1 +
 .../src/backend/utils.js                      |  20 +++
 packages/react-devtools-shared/src/hook.js    |   8 +
 .../src/app/InteractionTracing/index.js       |  14 +-
 .../src/ReactFiberDevToolsHook.new.js         |  18 +++
 .../src/ReactFiberDevToolsHook.old.js         |  18 +++
 .../src/ReactFiberWorkLoop.new.js             |  13 +-
 .../src/ReactFiberWorkLoop.old.js             |  13 +-
 11 files changed, 275 insertions(+), 43 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js

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 000000000000..a37401eb4a06
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -0,0 +1,144 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+describe('profiling HostRoot', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let store: 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');
+    ReactDOM = require('react-dom');
+    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);
+    };
+  });
+
+  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(() => {
+      const container = document.createElement('div');
+      ReactDOM.render(<App />, container);
+    });
+    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,
+    );
+  });
+
+  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(() => {
+      const container = document.createElement('div');
+      const root = ReactDOM.unstable_createRoot(container);
+      root.render(<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,
+    );
+  });
+
+  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;
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOM.unstable_createRoot(container);
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => root.render(<App />));
+    utils.act(() => root.render(<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/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 08cbfe340fb6..fcc7895356aa 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -1012,6 +1012,9 @@ export function attach(
   const handleCommitFiberUnmount = () => {
     throw new Error('handleCommitFiberUnmount not supported by this renderer');
   };
+  const handlePostCommitFiberRoot = () => {
+    throw new Error('handlePostCommitFiberRoot not supported by this renderer');
+  };
   const overrideSuspense = () => {
     throw new Error('overrideSuspense not supported by this renderer');
   };
@@ -1082,6 +1085,7 @@ export function attach(
     getProfilingData,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
+    handlePostCommitFiberRoot,
     inspectElement,
     logElementToConsole,
     overrideSuspense,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c61edb45daa6..09042d0446b2 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -42,6 +42,7 @@ import {
   copyWithDelete,
   copyWithRename,
   copyWithSet,
+  getEffectDurations,
 } from './utils';
 import {
   __DEBUG__,
@@ -369,6 +370,7 @@ export function getInternalReactConstants(
     LegacyHiddenComponent,
     MemoComponent,
     OffscreenComponent,
+    Profiler,
     ScopeComponent,
     SimpleMemoComponent,
     SuspenseComponent,
@@ -442,6 +444,8 @@ export function getInternalReactConstants(
         return 'Scope';
       case SuspenseListComponent:
         return 'SuspenseList';
+      case Profiler:
+        return 'Profiler';
       default:
         const typeSymbol = getTypeSymbol(type);
 
@@ -2154,25 +2158,6 @@ export function attach(
         // Checking root.memoizedInteractions handles multi-renderer edge-case-
         // where some v16 renderers support profiling and others don't.
         if (isProfiling && root.memoizedInteractions != 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;
-            }
-          }
-
           // If profiling is active, store commit time and duration, and the current interactions.
           // The frontend may request this information after profiling has stopped.
           currentCommitProfilingMetadata = {
@@ -2187,8 +2172,8 @@ export function attach(
             ),
             maxActualDuration: 0,
             priorityLevel: null,
-            effectDuration,
-            passiveEffectDuration,
+            effectDuration: null,
+            passiveEffectDuration: null,
           };
         }
 
@@ -2206,6 +2191,19 @@ export function attach(
     recordUnmount(fiber, false);
   }
 
+  function handlePostCommitFiberRoot(root) {
+    const isProfilingSupported = root.memoizedInteractions != null;
+    if (isProfiling && isProfilingSupported) {
+      if (currentCommitProfilingMetadata !== null) {
+        const {effectDuration, passiveEffectDuration} = getEffectDurations(
+          root,
+        );
+        currentCommitProfilingMetadata.effectDuration = effectDuration;
+        currentCommitProfilingMetadata.passiveEffectDuration = passiveEffectDuration;
+      }
+    }
+  }
+
   function handleCommitFiberRoot(root, priorityLevel) {
     const current = root.current;
     const alternate = current.alternate;
@@ -2227,23 +2225,6 @@ export function attach(
     const isProfilingSupported = root.memoizedInteractions != null;
 
     if (isProfiling && isProfilingSupported) {
-      // 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;
-        }
-      }
-
       // If profiling is active, store commit time and duration, and the current interactions.
       // The frontend may request this information after profiling has stopped.
       currentCommitProfilingMetadata = {
@@ -2259,8 +2240,11 @@ export function attach(
         maxActualDuration: 0,
         priorityLevel:
           priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
-        effectDuration,
-        passiveEffectDuration,
+
+        // Initialize to null; if new enough React version is running,
+        // these values will be read during separate handlePostCommitFiberRoot() call.
+        effectDuration: null,
+        passiveEffectDuration: null,
       };
     }
 
@@ -3856,6 +3840,7 @@ export function attach(
     getProfilingData,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
+    handlePostCommitFiberRoot,
     inspectElement,
     logElementToConsole,
     prepareViewAttributeSource,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index c0ef91021f07..ea83d7766617 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -326,6 +326,7 @@ export type RendererInterface = {
   getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
+  handlePostCommitFiberRoot: (fiber: Object) => void,
   inspectElement: (
     requestID: number,
     id: number,
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 593459d78f64..22f70e32e7d0 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -118,6 +118,26 @@ export function copyWithSet(
   return updated;
 }
 
+export function getEffectDurations(root: Object) {
+  // 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 {
   const cache = new Set();
   // Use a custom replacer function to protect against circular references.
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index e29ad7abe956..a4724f6f6b92 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -287,6 +287,13 @@ export function installHook(target: any): DevToolsHook | null {
     }
   }
 
+  function onPostCommitFiberRoot(rendererID, root) {
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      rendererInterface.handlePostCommitFiberRoot(root);
+    }
+  }
+
   // TODO: More meaningful names for "rendererInterfaces" and "renderers".
   const fiberRoots = {};
   const rendererInterfaces = new Map();
@@ -315,6 +322,7 @@ export function installHook(target: any): DevToolsHook | null {
     checkDCE,
     onCommitFiberUnmount,
     onCommitFiberRoot,
+    onPostCommitFiberRoot,
   };
 
   Object.defineProperty(
diff --git a/packages/react-devtools-shell/src/app/InteractionTracing/index.js b/packages/react-devtools-shell/src/app/InteractionTracing/index.js
index 544b335d0b36..aab8e77e9091 100644
--- a/packages/react-devtools-shell/src/app/InteractionTracing/index.js
+++ b/packages/react-devtools-shell/src/app/InteractionTracing/index.js
@@ -21,6 +21,14 @@ import {
   unstable_wrap as wrap,
 } from 'scheduler/tracing';
 
+function sleep(ms) {
+  const start = performance.now();
+  let now;
+  do {
+    now = performance.now();
+  } while (now - ms < start);
+}
+
 export default function InteractionTracing() {
   const [count, setCount] = useState(0);
   const [shouldCascade, setShouldCascade] = useState(false);
@@ -75,7 +83,11 @@ export default function InteractionTracing() {
   }, [count, shouldCascade]);
 
   useLayoutEffect(() => {
-    Math.sqrt(100 * 100 * 100 * 100 * 100);
+    sleep(150);
+  });
+
+  useEffect(() => {
+    sleep(300);
   });
 
   return (
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index a98e569b095b..e7bde59e20cb 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -134,6 +134,24 @@ export function onCommitRoot(root: FiberRoot, eventPriority: EventPriority) {
   }
 }
 
+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: %s', err);
+        }
+      }
+    }
+  }
+}
+
 export function onCommitUnmount(fiber: Fiber) {
   if (injectedHook && typeof injectedHook.onCommitFiberUnmount === 'function') {
     try {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index 43b9f360faa3..494138685e10 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -134,6 +134,24 @@ export function onCommitRoot(root: FiberRoot, eventPriority: EventPriority) {
   }
 }
 
+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: %s', err);
+        }
+      }
+    }
+  }
+}
+
 export function onCommitUnmount(fiber: Fiber) {
   if (injectedHook && typeof injectedHook.onCommitFiberUnmount === 'function') {
     try {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 425c46851aab..3344361075e6 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -229,7 +229,10 @@ import {
   hasCaughtError,
   clearCaughtError,
 } from 'shared/ReactErrorUtils';
-import {onCommitRoot as onCommitRootDevTools} from './ReactFiberDevToolsHook.new';
+import {
+  onCommitRoot as onCommitRootDevTools,
+  onPostCommitRoot as onPostCommitRootDevTools,
+} from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
 // Used by `act`
@@ -2156,6 +2159,14 @@ function flushPassiveEffectsImpl() {
   nestedPassiveUpdateCount =
     rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;
 
+  // TODO: Move to commitPassiveMountEffects
+  onPostCommitRootDevTools(root);
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    const stateNode = root.current.stateNode;
+    stateNode.effectDuration = 0;
+    stateNode.passiveEffectDuration = 0;
+  }
+
   return true;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b22901ff84ec..73230f578777 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -229,7 +229,10 @@ import {
   hasCaughtError,
   clearCaughtError,
 } from 'shared/ReactErrorUtils';
-import {onCommitRoot as onCommitRootDevTools} from './ReactFiberDevToolsHook.old';
+import {
+  onCommitRoot as onCommitRootDevTools,
+  onPostCommitRoot as onPostCommitRootDevTools,
+} from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
 // Used by `act`
@@ -2156,6 +2159,14 @@ function flushPassiveEffectsImpl() {
   nestedPassiveUpdateCount =
     rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;
 
+  // TODO: Move to commitPassiveMountEffects
+  onPostCommitRootDevTools(root);
+  if (enableProfilerTimer && enableProfilerCommitHooks) {
+    const stateNode = root.current.stateNode;
+    stateNode.effectDuration = 0;
+    stateNode.passiveEffectDuration = 0;
+  }
+
   return true;
 }
 

From 6ea749170b6d59b8dfb8bbbb8d05d986099e7830 Mon Sep 17 00:00:00 2001
From: inokawa <48897392+inokawa@users.noreply.github.com>
Date: Fri, 9 Apr 2021 12:20:01 +0900
Subject: [PATCH 0417/1603] Fix typo in comment (#21214)

---
 packages/react-reconciler/src/ReactFiberCompleteWork.new.js | 6 +++---
 packages/react-reconciler/src/ReactFiberCompleteWork.old.js | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index d27498638ce6..f366ccdf8839 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -992,7 +992,7 @@ function completeWork(
                   // 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 Flow doens't support type casting in combiation with the -= operator
+                    // $FlowFixMe Flow doesn't support type casting in combination with the -= operator
                     workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                   }
                 }
@@ -1022,7 +1022,7 @@ function completeWork(
                   // 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 Flow doens't support type casting in combiation with the -= operator
+                    // $FlowFixMe Flow doesn't support type casting in combination with the -= operator
                     workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                   }
                 }
@@ -1126,7 +1126,7 @@ function completeWork(
             // 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 Flow doens't support type casting in combiation with the -= operator
+              // $FlowFixMe Flow doesn't support type casting in combination with the -= operator
               workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
             }
           }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index da962bfdefee..8bfd7d3fe999 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -992,7 +992,7 @@ function completeWork(
                   // 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 Flow doens't support type casting in combiation with the -= operator
+                    // $FlowFixMe Flow doesn't support type casting in combination with the -= operator
                     workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                   }
                 }
@@ -1022,7 +1022,7 @@ function completeWork(
                   // 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 Flow doens't support type casting in combiation with the -= operator
+                    // $FlowFixMe Flow doesn't support type casting in combination with the -= operator
                     workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                   }
                 }
@@ -1126,7 +1126,7 @@ function completeWork(
             // 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 Flow doens't support type casting in combiation with the -= operator
+              // $FlowFixMe Flow doesn't support type casting in combination with the -= operator
               workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
             }
           }

From dc108b0f55387c811899aeb92e583294b0707b1c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 9 Apr 2021 10:34:33 -0400
Subject: [PATCH 0418/1603] Track which fibers scheduled the current render
 work (#15658)

Tracked Fibers are called "updaters" and are exposed to DevTools via a 'memoizedUpdaters' property on the ReactFiberRoot. The implementation of this feature follows a vaguely similar approach as interaction tracing, but does not require reference counting since there is no subscriptions API.

This change is in support of a new DevTools Profiler feature that shows which Fiber(s) scheduled the selected commit in the Profiler.

All changes have been gated behind a new feature flag, 'enableUpdaterTracking', which is enabled for Profiling builds by default. We also only track updaters when DevTools has been detected, to avoid doing unnecessary work.
---
 .../src/ReactFiberCommitWork.new.js           |  40 +-
 .../src/ReactFiberCommitWork.old.js           |  40 +-
 .../src/ReactFiberLane.new.js                 |  58 +-
 .../src/ReactFiberLane.old.js                 |  58 +-
 .../src/ReactFiberRoot.new.js                 |  10 +
 .../src/ReactFiberRoot.old.js                 |  10 +
 .../src/ReactFiberThrow.new.js                |  17 +-
 .../src/ReactFiberThrow.old.js                |  17 +-
 .../src/ReactFiberWorkLoop.new.js             |  65 ++-
 .../src/ReactFiberWorkLoop.old.js             |  65 ++-
 .../src/ReactInternalTypes.js                 |   8 +
 .../__tests__/ReactUpdaters-test.internal.js  | 521 ++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |   3 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   2 +
 22 files changed, 912 insertions(+), 10 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 8f890f4dfd9c..1006a867f39d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -37,6 +37,7 @@ import {
   enableStrictEffects,
   deletedTreeCleanUpLevel,
   enableSuspenseLayoutEffectSemantics,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -89,7 +90,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
@@ -137,6 +138,7 @@ import {
   resolveRetryWakeable,
   markCommitTimeOfFallback,
   enqueuePendingPassiveProfilerEffect,
+  restorePendingUpdaters,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -162,6 +164,10 @@ 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;
+
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
@@ -2094,6 +2100,20 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
           }
         }
         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.',
+              );
+            }
+          }
+        }
+
         wakeable.then(retry, retry);
       }
     });
@@ -2124,9 +2144,19 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
+export function commitMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+  committedLanes: Lanes,
+) {
+  inProgressLanes = committedLanes;
+  inProgressRoot = root;
   nextEffect = firstChild;
+
   commitMutationEffects_begin(root);
+
+  inProgressLanes = null;
+  inProgressRoot = null;
 }
 
 function commitMutationEffects_begin(root: FiberRoot) {
@@ -2280,8 +2310,14 @@ export function commitLayoutEffects(
   root: FiberRoot,
   committedLanes: Lanes,
 ): void {
+  inProgressLanes = committedLanes;
+  inProgressRoot = root;
   nextEffect = finishedWork;
+
   commitLayoutEffects_begin(finishedWork, root, committedLanes);
+
+  inProgressLanes = null;
+  inProgressRoot = null;
 }
 
 function commitLayoutEffects_begin(
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 0c68fdaf0b3d..05a373c86868 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -37,6 +37,7 @@ import {
   enableStrictEffects,
   deletedTreeCleanUpLevel,
   enableSuspenseLayoutEffectSemantics,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -89,7 +90,7 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {onCommitUnmount} from './ReactFiberDevToolsHook.old';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
@@ -137,6 +138,7 @@ import {
   resolveRetryWakeable,
   markCommitTimeOfFallback,
   enqueuePendingPassiveProfilerEffect,
+  restorePendingUpdaters,
 } from './ReactFiberWorkLoop.old';
 import {
   NoFlags as NoHookEffect,
@@ -162,6 +164,10 @@ 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;
+
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
@@ -2094,6 +2100,20 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
           }
         }
         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.',
+              );
+            }
+          }
+        }
+
         wakeable.then(retry, retry);
       }
     });
@@ -2124,9 +2144,19 @@ function commitResetTextContent(current: Fiber) {
   resetTextContent(current.stateNode);
 }
 
-export function commitMutationEffects(root: FiberRoot, firstChild: Fiber) {
+export function commitMutationEffects(
+  root: FiberRoot,
+  firstChild: Fiber,
+  committedLanes: Lanes,
+) {
+  inProgressLanes = committedLanes;
+  inProgressRoot = root;
   nextEffect = firstChild;
+
   commitMutationEffects_begin(root);
+
+  inProgressLanes = null;
+  inProgressRoot = null;
 }
 
 function commitMutationEffects_begin(root: FiberRoot) {
@@ -2280,8 +2310,14 @@ export function commitLayoutEffects(
   root: FiberRoot,
   committedLanes: Lanes,
 ): void {
+  inProgressLanes = committedLanes;
+  inProgressRoot = root;
   nextEffect = finishedWork;
+
   commitLayoutEffects_begin(finishedWork, root, committedLanes);
+
+  inProgressLanes = null;
+  inProgressRoot = null;
 }
 
 function commitLayoutEffects_begin(
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 2a9571ece689..32bb8139c765 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -35,7 +35,12 @@ export type Lanes = number;
 export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
-import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableSchedulingProfiler,
+  enableUpdaterTracking,
+} from 'shared/ReactFeatureFlags';
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
@@ -742,6 +747,57 @@ export function getBumpedLaneForHydration(
   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;
+  }
+}
+
 const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
 
 // Count leading zeros. Only used on lanes, so assume input is an integer.
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 2a9571ece689..b577a67aa213 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -35,7 +35,12 @@ export type Lanes = number;
 export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
-import {enableCache, enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableSchedulingProfiler,
+  enableUpdaterTracking,
+} from 'shared/ReactFeatureFlags';
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
@@ -742,6 +747,57 @@ export function getBumpedLaneForHydration(
   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;
+  }
+}
+
 const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
 
 // Count leading zeros. Only used on lanes, so assume input is an integer.
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 1eb637891ebe..9201a3598075 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -16,6 +16,7 @@ import {
   NoLane,
   NoLanes,
   NoTimestamp,
+  TotalLanes,
   createLaneMap,
 } from './ReactFiberLane.new';
 import {
@@ -24,6 +25,7 @@ import {
   enableCache,
   enableProfilerCommitHooks,
   enableProfilerTimer,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
@@ -77,6 +79,14 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     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__) {
     switch (tag) {
       case ConcurrentRoot:
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index e44757248b42..f2968b314eca 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -16,6 +16,7 @@ import {
   NoLane,
   NoLanes,
   NoTimestamp,
+  TotalLanes,
   createLaneMap,
 } from './ReactFiberLane.old';
 import {
@@ -24,6 +25,7 @@ import {
   enableCache,
   enableProfilerCommitHooks,
   enableProfilerTimer,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
@@ -77,6 +79,14 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     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__) {
     switch (tag) {
       case ConcurrentRoot:
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 2641bdd3b345..e100561ed86e 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -39,6 +39,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableLazyContextPropagation,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -60,12 +61,13 @@ import {
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
   pingSuspendedRoot,
+  restorePendingUpdaters,
 } from './ReactFiberWorkLoop.new';
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.new';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
 import {markComponentSuspended} from './SchedulingProfiler';
-
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {
   SyncLane,
   NoTimestamp,
@@ -177,6 +179,12 @@ function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {
     // 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);
   }
 }
@@ -191,6 +199,13 @@ function throwException(
   // 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' &&
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 294b807ebcb1..cdb02cb8f188 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -39,6 +39,7 @@ import {
   enableDebugTracing,
   enableSchedulingProfiler,
   enableLazyContextPropagation,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -60,12 +61,13 @@ import {
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
   pingSuspendedRoot,
+  restorePendingUpdaters,
 } from './ReactFiberWorkLoop.old';
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.old';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
 import {markComponentSuspended} from './SchedulingProfiler';
-
+import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {
   SyncLane,
   NoTimestamp,
@@ -177,6 +179,12 @@ function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {
     // 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);
   }
 }
@@ -191,6 +199,13 @@ function throwException(
   // 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' &&
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 3344361075e6..b52680c91119 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,6 +32,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -159,6 +160,8 @@ import {
   markRootFinished,
   areLanesExpired,
   getHighestPriorityLane,
+  addFiberToLanesMap,
+  movePendingFibersToMemoized,
 } from './ReactFiberLane.new';
 import {
   DiscreteEventPriority,
@@ -232,6 +235,7 @@ import {
 import {
   onCommitRoot as onCommitRootDevTools,
   onPostCommitRoot as onPostCommitRootDevTools,
+  isDevToolsPresent,
 } from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
@@ -470,6 +474,12 @@ export function scheduleUpdateOnFiber(
     return null;
   }
 
+  if (enableUpdaterTracking) {
+    if (isDevToolsPresent) {
+      addFiberToLanesMap(root, fiber, lane);
+    }
+  }
+
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
@@ -1427,6 +1437,22 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
   // 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);
+      }
+    }
+
     prepareFreshStack(root, lanes);
     startWorkOnPendingInteractions(root, lanes);
   }
@@ -1502,6 +1528,22 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
   // 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);
+      }
+    }
+
     resetRenderTimer();
     prepareFreshStack(root, lanes);
     startWorkOnPendingInteractions(root, lanes);
@@ -1853,7 +1895,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     // The next phase is the mutation phase, where we mutate the host tree.
-    commitMutationEffects(root, finishedWork);
+    commitMutationEffects(root, finishedWork, lanes);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -1985,6 +2027,12 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   onCommitRootDevTools(finishedWork.stateNode, renderPriorityLevel);
 
+  if (enableUpdaterTracking) {
+    if (isDevToolsPresent) {
+      root.memoizedUpdaters.clear();
+    }
+  }
+
   if (__DEV__) {
     onCommitRootTestSelector();
   }
@@ -2788,6 +2836,21 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
 // a 'shared' variable that changes when act() opens/closes in tests.
 export const IsThisRendererActing = {current: (false: boolean)};
 
+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).
+    }
+  }
+}
+
 export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
   if (__DEV__) {
     if (
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 73230f578777..08553e392818 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,6 +32,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
+  enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -159,6 +160,8 @@ import {
   markRootFinished,
   areLanesExpired,
   getHighestPriorityLane,
+  addFiberToLanesMap,
+  movePendingFibersToMemoized,
 } from './ReactFiberLane.old';
 import {
   DiscreteEventPriority,
@@ -232,6 +235,7 @@ import {
 import {
   onCommitRoot as onCommitRootDevTools,
   onPostCommitRoot as onPostCommitRootDevTools,
+  isDevToolsPresent,
 } from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
@@ -470,6 +474,12 @@ export function scheduleUpdateOnFiber(
     return null;
   }
 
+  if (enableUpdaterTracking) {
+    if (isDevToolsPresent) {
+      addFiberToLanesMap(root, fiber, lane);
+    }
+  }
+
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
@@ -1427,6 +1437,22 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
   // 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);
+      }
+    }
+
     prepareFreshStack(root, lanes);
     startWorkOnPendingInteractions(root, lanes);
   }
@@ -1502,6 +1528,22 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
   // 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);
+      }
+    }
+
     resetRenderTimer();
     prepareFreshStack(root, lanes);
     startWorkOnPendingInteractions(root, lanes);
@@ -1853,7 +1895,7 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     // The next phase is the mutation phase, where we mutate the host tree.
-    commitMutationEffects(root, finishedWork);
+    commitMutationEffects(root, finishedWork, lanes);
 
     if (shouldFireAfterActiveInstanceBlur) {
       afterActiveInstanceBlur();
@@ -1985,6 +2027,12 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   onCommitRootDevTools(finishedWork.stateNode, renderPriorityLevel);
 
+  if (enableUpdaterTracking) {
+    if (isDevToolsPresent) {
+      root.memoizedUpdaters.clear();
+    }
+  }
+
   if (__DEV__) {
     onCommitRootTestSelector();
   }
@@ -2788,6 +2836,21 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
 // a 'shared' variable that changes when act() opens/closes in tests.
 export const IsThisRendererActing = {current: (false: boolean)};
 
+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).
+    }
+  }
+}
+
 export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
   if (__DEV__) {
     if (
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 4ad4cb122b5c..0c34eeda8ed6 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -249,6 +249,13 @@ type ProfilingOnlyFiberRootProperties = {|
   pendingInteractionMap: Map<Lane | Lanes, Set<Interaction>>,
 |};
 
+// 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?: (suspenseInstance: SuspenseInstance) => void,
   onDeleted?: (suspenseInstance: SuspenseInstance) => void,
@@ -269,6 +276,7 @@ export type FiberRoot = {
   ...BaseFiberRootProperties,
   ...ProfilingOnlyFiberRootProperties,
   ...SuspenseCallbackOnlyFiberRootProperties,
+  ...UpdaterTrackingOnlyFiberRootProperties,
   ...
 };
 
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 000000000000..a2f6ed4bd04c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -0,0 +1,521 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactDOM;
+let ReactTestUtils;
+let Scheduler;
+let mockDevToolsHook;
+let allSchedulerTags;
+let allSchedulerTypes;
+let onCommitRootShouldYield;
+
+describe('updaters', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    allSchedulerTags = [];
+    allSchedulerTypes = [];
+
+    onCommitRootShouldYield = true;
+
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags.enableUpdaterTracking = true;
+    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+
+    mockDevToolsHook = {
+      injectInternals: jest.fn(() => {}),
+      isDevToolsPresent: true,
+      onCommitRoot: jest.fn(fiberRoot => {
+        if (onCommitRootShouldYield) {
+          Scheduler.unstable_yieldValue('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(() => {}),
+    };
+
+    jest.mock(
+      'react-reconciler/src/ReactFiberDevToolsHook.old',
+      () => mockDevToolsHook,
+    );
+    jest.mock(
+      'react-reconciler/src/ReactFiberDevToolsHook.new',
+      () => mockDevToolsHook,
+    );
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactTestUtils = require('react-dom/test-utils');
+    Scheduler = require('scheduler');
+  });
+
+  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 container = document.createElement('div');
+
+    await ReactTestUtils.act(async () => {
+      ReactDOM.render(<Parent />, container);
+    });
+    expect(allSchedulerTags).toEqual([[HostRoot]]);
+
+    await ReactTestUtils.act(async () => {
+      ReactDOM.render(<Parent />, container);
+    });
+    expect(allSchedulerTags).toEqual([[HostRoot], [HostRoot]]);
+  });
+
+  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;
+
+    await ReactTestUtils.act(async () => {
+      ReactDOM.render(<Parent />, document.createElement('div'));
+    });
+    expect(scheduleForA).not.toBeNull();
+    expect(scheduleForB).not.toBeNull();
+    expect(allSchedulerTypes).toEqual([[null]]);
+
+    await ReactTestUtils.act(async () => {
+      scheduleForA();
+    });
+    expect(allSchedulerTypes).toEqual([[null], [SchedulingComponentA]]);
+
+    await ReactTestUtils.act(async () => {
+      scheduleForB();
+    });
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SchedulingComponentA],
+      [SchedulingComponentB],
+    ]);
+  });
+
+  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;
+    await ReactTestUtils.act(async () => {
+      ReactDOM.render(<Parent />, document.createElement('div'));
+    });
+    expect(allSchedulerTypes).toEqual([[null]]);
+
+    expect(instance).not.toBeNull();
+    await ReactTestUtils.act(async () => {
+      instance.setState({});
+    });
+    expect(allSchedulerTypes).toEqual([[null], [SchedulingComponent]]);
+  });
+
+  // @gate experimental
+  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.unstable_yieldValue(`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 = ReactDOM.unstable_createRoot(document.createElement('div'));
+    await ReactTestUtils.act(async () => {
+      root.render(<Parent />);
+      expect(Scheduler).toFlushAndYieldThrough([
+        'CascadingChild 0',
+        'onCommitRoot',
+      ]);
+    });
+    expect(triggerActiveCascade).not.toBeNull();
+    expect(triggerPassiveCascade).not.toBeNull();
+    expect(allSchedulerTypes).toEqual([[null]]);
+
+    await ReactTestUtils.act(async () => {
+      triggerActiveCascade();
+      expect(Scheduler).toFlushAndYieldThrough([
+        'CascadingChild 0',
+        'onCommitRoot',
+        'CascadingChild 1',
+        'onCommitRoot',
+      ]);
+    });
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SchedulingComponent],
+      [CascadingChild],
+    ]);
+
+    await ReactTestUtils.act(async () => {
+      triggerPassiveCascade();
+      expect(Scheduler).toFlushAndYieldThrough([
+        'CascadingChild 1',
+        'onCommitRoot',
+        'CascadingChild 2',
+        'onCommitRoot',
+      ]);
+    });
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SchedulingComponent],
+      [CascadingChild],
+      [SchedulingComponent],
+      [CascadingChild],
+    ]);
+
+    // Verify no outstanding flushes
+    Scheduler.unstable_flushAll();
+  });
+
+  it('should cover suspense pings', async done => {
+    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 ReactTestUtils.act(async () => {
+      ReactDOM.render(<Parent />, document.createElement('div'));
+      expect(Scheduler).toHaveYielded(['onCommitRoot']);
+    });
+    expect(setShouldSuspend).not.toBeNull();
+    expect(allSchedulerTypes).toEqual([[null]]);
+
+    await ReactTestUtils.act(async () => {
+      setShouldSuspend(true);
+    });
+    expect(Scheduler).toHaveYielded(['onCommitRoot']);
+    expect(allSchedulerTypes).toEqual([[null], [Suspender]]);
+
+    expect(resolver).not.toBeNull();
+    await ReactTestUtils.act(() => {
+      resolver('abc');
+      return promise;
+    });
+    expect(Scheduler).toHaveYielded(['onCommitRoot']);
+    expect(allSchedulerTypes).toEqual([[null], [Suspender], [Suspender]]);
+
+    // Verify no outstanding flushes
+    Scheduler.unstable_flushAll();
+
+    done();
+  });
+
+  // @gate experimental
+  it('traces interaction through hidden subtree', async () => {
+    const {
+      FunctionComponent,
+      HostRoot,
+    } = require('react-reconciler/src/ReactWorkTags');
+
+    // 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>
+      );
+    }
+
+    const Child = () => {
+      const [didMount, setDidMount] = React.useState(false);
+      Scheduler.unstable_yieldValue('Child');
+      React.useEffect(() => {
+        if (didMount) {
+          Scheduler.unstable_yieldValue('Child:update');
+        } else {
+          Scheduler.unstable_yieldValue('Child:mount');
+          setDidMount(true);
+        }
+      }, [didMount]);
+      return <div />;
+    };
+
+    const App = () => {
+      Scheduler.unstable_yieldValue('App');
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('App:mount');
+      }, []);
+      return (
+        <LegacyHiddenDiv mode="hidden">
+          <Child />
+        </LegacyHiddenDiv>
+      );
+    };
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    await ReactTestUtils.act(async () => {
+      root.render(<App />);
+    });
+
+    // TODO: There are 4 commits here instead of 3
+    // because this update was scheduled at idle priority,
+    // and idle updates are slightly higher priority than offscreen work.
+    // So it takes two render passes to finish it.
+    // The onCommit hook is called even after the no-op bailout update.
+    expect(Scheduler).toHaveYielded([
+      'App',
+      'onCommitRoot',
+      'App:mount',
+
+      'Child',
+      'onCommitRoot',
+      'Child:mount',
+
+      'onCommitRoot',
+
+      'Child',
+      'onCommitRoot',
+      'Child:update',
+    ]);
+    expect(allSchedulerTypes).toEqual([
+      // Initial render
+      [null],
+      // Offscreen update
+      [],
+      // Child passive effect
+      [Child],
+      // Offscreen update
+      [],
+    ]);
+    expect(allSchedulerTags).toEqual([[HostRoot], [], [FunctionComponent], []]);
+  });
+
+  // @gate experimental
+  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.unstable_yieldValue(value);
+      return null;
+    };
+    const BrokenRender = () => {
+      throw new Error('Hello');
+    };
+
+    const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+    await ReactTestUtils.act(async () => {
+      root.render(<Parent shouldError={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['initial', 'onCommitRoot']);
+    expect(triggerError).not.toBeNull();
+
+    allSchedulerTypes.splice(0);
+    onCommitRootShouldYield = true;
+
+    await ReactTestUtils.act(async () => {
+      triggerError();
+    });
+    expect(Scheduler).toHaveYielded(['onCommitRoot', 'error', 'onCommitRoot']);
+    expect(allSchedulerTypes).toEqual([[Parent], [ErrorBoundary]]);
+
+    // Verify no outstanding flushes
+    Scheduler.unstable_flushAll();
+  });
+
+  // @gate experimental
+  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.unstable_yieldValue(`SyncPriorityUpdater ${count}`);
+      return <Yield value={`HighPriority ${count}`} />;
+    };
+    const LowPriorityUpdater = () => {
+      const [count, setCount] = React.useState(0);
+      triggerLowPriorityUpdate = () => setCount(prevCount => prevCount + 1);
+      Scheduler.unstable_yieldValue(`LowPriorityUpdater ${count}`);
+      return <Yield value={`LowPriority ${count}`} />;
+    };
+    const Yield = ({value}) => {
+      Scheduler.unstable_yieldValue(`Yield ${value}`);
+      return null;
+    };
+
+    const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+    root.render(
+      <React.Fragment>
+        <SyncPriorityUpdater />
+        <LowPriorityUpdater />
+      </React.Fragment>,
+    );
+
+    // Render everything initially.
+    expect(Scheduler).toFlushAndYield([
+      '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.
+    ReactTestUtils.act(() => {
+      triggerLowPriorityUpdate();
+      expect(Scheduler).toFlushAndYieldThrough(['LowPriorityUpdater 1']);
+      expect(allSchedulerTags).toEqual([[HostRoot]]);
+
+      // Interrupt with higher priority work.
+      ReactDOM.flushSync(triggerSyncPriorityUpdate);
+      expect(Scheduler).toHaveYielded([
+        'SyncPriorityUpdater 1',
+        'Yield HighPriority 1',
+        'onCommitRoot',
+      ]);
+      expect(allSchedulerTypes).toEqual([[null], [SyncPriorityUpdater]]);
+
+      // Finish the initial partial update
+      triggerLowPriorityUpdate();
+      expect(Scheduler).toFlushAndYield([
+        'LowPriorityUpdater 2',
+        'Yield LowPriority 2',
+        'onCommitRoot',
+      ]);
+    });
+    expect(allSchedulerTags).toEqual([
+      [HostRoot],
+      [FunctionComponent],
+      [FunctionComponent],
+    ]);
+    expect(allSchedulerTypes).toEqual([
+      [null],
+      [SyncPriorityUpdater],
+      [LowPriorityUpdater],
+    ]);
+
+    // Verify no outstanding flushes
+    Scheduler.unstable_flushAll();
+  });
+});
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 538a64e193dc..0729d53d7f3d 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -54,6 +54,9 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 // Trace which interactions trigger each commit.
 export const enableSchedulerTracing = __PROFILE__;
 
+// Track which Fiber(s) schedule render work.
+export const enableUpdaterTracking = __PROFILE__;
+
 // SSR experiments
 export const enableSuspenseServerRenderer = __EXPERIMENTAL__;
 export const enableSelectiveHydration = __EXPERIMENTAL__;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 0b1659d1625b..826afbc1c9e1 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -18,6 +18,7 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
+export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 80e113c8e5bf..99fbcd61b5be 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -20,6 +20,7 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
+export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index f5440f7a25f2..72a390ca9cd7 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -20,6 +20,7 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
+export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 8f31c4e7f84b..16243e404611 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -20,6 +20,7 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
+export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 2e04322a32ce..190d006b27fa 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -20,6 +20,7 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
+export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index bb1c40537287..61a48fbbd5bc 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -20,6 +20,7 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = __PROFILE__;
+export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 7a12f6041d93..71e77cf6971a 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -20,6 +20,7 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableSchedulerTracing = false;
+export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 01937c7b125b..9b9ec4310c9c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,6 +25,7 @@ export const enableSuspenseLayoutEffectSemantics = __VARIANT__;
 //
 // NOTE: This feature will only work in DEV mode; all callsights are wrapped with __DEV__.
 export const enableDebugTracing = __EXPERIMENTAL__;
+export const enableUpdaterTracking = false;
 
 export const enableSchedulingProfiler = __VARIANT__;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 1e8908ea4cde..eed614e4ae7e 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -44,6 +44,8 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook =
   __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
+export const enableUpdaterTracking =
+  __PROFILE__ && dynamicFeatureFlags.enableUpdaterTracking;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =

From bdc23c3dba86eaa03c7accecc16e8fd997e9185e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 9 Apr 2021 10:35:06 -0400
Subject: [PATCH 0419/1603] DevTools shows which fibers scheduled the current
 update (#21171)

---
 .../ownersListContext-test.js.snap            |  12 +
 .../__snapshots__/profilingCache-test.js.snap | 435 +++++++++++++++++-
 .../src/__tests__/profilingUtils-test.js      |   2 +-
 .../src/backend/legacy/renderer.js            |   5 +-
 .../src/backend/renderer.js                   |  49 +-
 .../src/backend/types.js                      |  10 +-
 .../react-devtools-shared/src/constants.js    |   2 +-
 .../views/Components/InspectedElementView.js  |   4 +-
 .../views/Components/OwnersListContext.js     |  14 +-
 .../devtools/views/Components/OwnersStack.js  |  16 +-
 .../src/devtools/views/Components/types.js    |   7 +-
 .../views/Profiler/SidebarCommitInfo.css      |   5 +
 .../views/Profiler/SidebarCommitInfo.js       |  21 +-
 .../src/devtools/views/Profiler/Updaters.css  |  25 +
 .../src/devtools/views/Profiler/Updaters.js   |  55 +++
 .../src/devtools/views/Profiler/types.js      |   7 +-
 .../src/devtools/views/Profiler/utils.js      |  26 +-
 17 files changed, 639 insertions(+), 56 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
index d5e244adf062..a92d85a6e624 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
@@ -13,18 +13,21 @@ Array [
     "displayName": "Grandparent",
     "hocDisplayNames": null,
     "id": 2,
+    "key": null,
     "type": 5,
   },
   Object {
     "displayName": "Parent",
     "hocDisplayNames": null,
     "id": 3,
+    "key": null,
     "type": 5,
   },
   Object {
     "displayName": "Child",
     "hocDisplayNames": null,
     "id": 4,
+    "key": null,
     "type": 5,
   },
 ]
@@ -44,18 +47,21 @@ Array [
     "displayName": "Grandparent",
     "hocDisplayNames": null,
     "id": 2,
+    "key": null,
     "type": 5,
   },
   Object {
     "displayName": "Parent",
     "hocDisplayNames": null,
     "id": 3,
+    "key": null,
     "type": 5,
   },
   Object {
     "displayName": "Child",
     "hocDisplayNames": null,
     "id": 4,
+    "key": null,
     "type": 5,
   },
 ]
@@ -67,12 +73,14 @@ Array [
     "displayName": "Grandparent",
     "hocDisplayNames": null,
     "id": 2,
+    "key": null,
     "type": 5,
   },
   Object {
     "displayName": "Parent",
     "hocDisplayNames": null,
     "id": 3,
+    "key": null,
     "type": 5,
   },
 ]
@@ -84,6 +92,7 @@ Array [
     "displayName": "Grandparent",
     "hocDisplayNames": null,
     "id": 2,
+    "key": null,
     "type": 5,
   },
   Object {
@@ -92,6 +101,7 @@ Array [
       "Memo",
     ],
     "id": 3,
+    "key": null,
     "type": 8,
   },
   Object {
@@ -100,6 +110,7 @@ Array [
       "ForwardRef",
     ],
     "id": 4,
+    "key": null,
     "type": 6,
   },
 ]
@@ -116,6 +127,7 @@ Array [
     "displayName": "Grandparent",
     "hocDisplayNames": null,
     "id": 2,
+    "key": null,
     "type": 5,
   },
 ]
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index c9e7f9770159..9b94c71e6ed1 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -43,6 +43,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 16,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -82,6 +91,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 15,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -110,6 +128,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 18,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -165,6 +192,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 12,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -222,6 +258,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 25,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -261,6 +306,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 35,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -291,6 +345,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 45,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -392,6 +455,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 12,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -488,6 +560,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 25,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -548,6 +629,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 35,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -590,6 +680,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 45,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "Parent",
@@ -736,7 +835,7 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 4,
+  "version": 5,
 }
 `;
 
@@ -855,6 +954,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 11,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -933,6 +1041,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 22,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -1029,6 +1146,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 35,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "Parent",
@@ -1170,7 +1296,7 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 4,
+  "version": 5,
 }
 `;
 
@@ -1230,6 +1356,15 @@ Object {
       "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 13,
+      "updaters": Array [
+        Object {
+          "displayName": "Anonymous",
+          "hocDisplayNames": null,
+          "id": 1,
+          "key": null,
+          "type": 11,
+        },
+      ],
     },
     Object {
       "changeDescriptions": Map {
@@ -1266,6 +1401,15 @@ Object {
       "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 34,
+      "updaters": Array [
+        Object {
+          "displayName": "Anonymous",
+          "hocDisplayNames": null,
+          "id": 1,
+          "key": null,
+          "type": 11,
+        },
+      ],
     },
     Object {
       "changeDescriptions": Map {
@@ -1293,6 +1437,15 @@ Object {
       "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 44,
+      "updaters": Array [
+        Object {
+          "displayName": "Anonymous",
+          "hocDisplayNames": null,
+          "id": 1,
+          "key": null,
+          "type": 11,
+        },
+      ],
     },
   ],
   "displayName": "Parent",
@@ -1470,6 +1623,15 @@ Object {
       "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 24,
+      "updaters": Array [
+        Object {
+          "displayName": "Anonymous",
+          "hocDisplayNames": null,
+          "id": 11,
+          "key": null,
+          "type": 11,
+        },
+      ],
     },
   ],
   "displayName": "Parent",
@@ -1554,6 +1716,15 @@ Object {
       "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 34,
+      "updaters": Array [
+        Object {
+          "displayName": "Anonymous",
+          "hocDisplayNames": null,
+          "id": 6,
+          "key": null,
+          "type": 11,
+        },
+      ],
     },
   ],
   "displayName": "Parent",
@@ -1723,6 +1894,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 13,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -1783,6 +1963,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 34,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -1825,6 +2014,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 44,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "Parent",
@@ -2062,6 +2260,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 24,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 11,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "Parent",
@@ -2143,6 +2350,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 34,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 6,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "Parent",
@@ -2235,7 +2451,7 @@ Object {
       ],
     },
   ],
-  "version": 4,
+  "version": 5,
 }
 `;
 
@@ -2258,6 +2474,15 @@ Object {
       "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 0,
+      "updaters": Array [
+        Object {
+          "displayName": "Anonymous",
+          "hocDisplayNames": null,
+          "id": 1,
+          "key": null,
+          "type": 11,
+        },
+      ],
     },
   ],
   "displayName": "Suspense",
@@ -2327,6 +2552,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -2359,6 +2593,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -2385,6 +2628,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Component",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "type": 5,
+    },
+  ],
 }
 `;
 
@@ -2411,6 +2663,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Component",
+      "hocDisplayNames": null,
+      "id": 3,
+      "key": null,
+      "type": 5,
+    },
+  ],
 }
 `;
 
@@ -2441,6 +2702,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -2496,6 +2766,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -2546,6 +2825,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -2578,6 +2866,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Component",
+              "hocDisplayNames": null,
+              "id": 3,
+              "key": null,
+              "type": 5,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -2610,6 +2907,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Component",
+              "hocDisplayNames": null,
+              "id": 3,
+              "key": null,
+              "type": 5,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -2658,6 +2964,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "Component",
@@ -2747,7 +3062,7 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 4,
+  "version": 5,
 }
 `;
 
@@ -2814,6 +3129,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -2886,6 +3210,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "LegacyContextProvider",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "type": 1,
+    },
+  ],
 }
 `;
 
@@ -2954,6 +3287,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -3023,6 +3365,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -3091,6 +3442,15 @@ Object {
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
 }
 `;
 
@@ -3218,6 +3578,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -3338,6 +3707,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "LegacyContextProvider",
+              "hocDisplayNames": null,
+              "id": 2,
+              "key": null,
+              "type": 1,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -3460,6 +3838,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -3583,6 +3970,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -3705,6 +4101,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "LegacyContextProvider",
@@ -3917,7 +4322,7 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 4,
+  "version": 5,
 }
 `;
 
@@ -4020,6 +4425,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 11,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
         Object {
           "changeDescriptions": Array [
@@ -4100,6 +4514,15 @@ Object {
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 22,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
       "displayName": "Parent",
@@ -4237,6 +4660,6 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 4,
+  "version": 5,
 }
 `;
diff --git a/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js b/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
index 5cf07cf472ee..2c9268da2adb 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingUtils-test.js
@@ -22,6 +22,6 @@ describe('profiling utils', () => {
           dataForRoots: [],
         }: any),
       ),
-    ).toThrow('Unsupported profiler export version "0"');
+    ).toThrow('Unsupported profile export version');
   });
 });
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index fcc7895356aa..091d755009b4 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -51,7 +51,7 @@ import type {
   ComponentFilter,
   ElementType,
 } from 'react-devtools-shared/src/types';
-import type {Owner, InspectedElement} from '../types';
+import type {InspectedElement, SerializedElement} from '../types';
 
 export type InternalInstance = Object;
 type LegacyRenderer = Object;
@@ -767,6 +767,7 @@ export function attach(
           owners.push({
             displayName: getData(owner).displayName || 'Unknown',
             id: getID(owner),
+            key: element.key,
             type: getElementType(owner),
           });
           if (owner._currentElement) {
@@ -1047,7 +1048,7 @@ export function attach(
     // Not implemented.
   }
 
-  function getOwnersList(id: number): Array<Owner> | null {
+  function getOwnersList(id: number): Array<SerializedElement> | null {
     // Not implemented.
     return null;
   }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 09042d0446b2..b006c9166f53 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -81,6 +81,8 @@ import {
 } from './ReactSymbols';
 import {format} from './utils';
 import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
+import is from 'shared/objectIs';
+import isArray from 'shared/isArray';
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -91,13 +93,13 @@ import type {
   InspectedElementPayload,
   InstanceAndStyle,
   NativeType,
-  Owner,
   PathFrame,
   PathMatch,
   ProfilingDataBackend,
   ProfilingDataForRootBackend,
   ReactRenderer,
   RendererInterface,
+  SerializedElement,
   WorkTagMap,
 } from './types';
 import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
@@ -105,8 +107,6 @@ import type {
   ComponentFilter,
   ElementType,
 } from 'react-devtools-shared/src/types';
-import is from 'shared/objectIs';
-import isArray from 'shared/isArray';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => Symbol | number;
@@ -2172,6 +2172,7 @@ export function attach(
             ),
             maxActualDuration: 0,
             priorityLevel: null,
+            updaters: getUpdatersList(root),
             effectDuration: null,
             passiveEffectDuration: null,
           };
@@ -2184,6 +2185,12 @@ export function attach(
     }
   }
 
+  function getUpdatersList(root): Array<SerializedElement> | null {
+    return root.memoizedUpdaters != null
+      ? Array.from(root.memoizedUpdaters).map(fiberToSerializedElement)
+      : null;
+  }
+
   function handleCommitFiberUnmount(fiber) {
     // This is not recursive.
     // We can't traverse fibers after unmounting so instead
@@ -2241,6 +2248,8 @@ export function attach(
         priorityLevel:
           priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
 
+        updaters: getUpdatersList(root),
+
         // Initialize to null; if new enough React version is running,
         // these values will be read during separate handlePostCommitFiberRoot() call.
         effectDuration: null,
@@ -2637,7 +2646,16 @@ export function attach(
     }
   }
 
-  function getOwnersList(id: number): Array<Owner> | null {
+  function fiberToSerializedElement(fiber: Fiber): SerializedElement {
+    return {
+      displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
+      id: getFiberID(getPrimaryFiber(fiber)),
+      key: fiber.key,
+      type: getElementTypeForFiber(fiber),
+    };
+  }
+
+  function getOwnersList(id: number): Array<SerializedElement> | null {
     const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber == null) {
       return null;
@@ -2645,22 +2663,12 @@ export function attach(
 
     const {_debugOwner} = fiber;
 
-    const owners = [
-      {
-        displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
-        id,
-        type: getElementTypeForFiber(fiber),
-      },
-    ];
+    const owners: Array<SerializedElement> = [fiberToSerializedElement(fiber)];
 
     if (_debugOwner) {
       let owner = _debugOwner;
       while (owner !== null) {
-        owners.unshift({
-          displayName: getDisplayNameForFiber(owner) || 'Anonymous',
-          id: getFiberID(getPrimaryFiber(owner)),
-          type: getElementTypeForFiber(owner),
-        });
+        owners.unshift(fiberToSerializedElement(owner));
         owner = owner._debugOwner || null;
       }
     }
@@ -2791,11 +2799,7 @@ export function attach(
       owners = [];
       let owner = _debugOwner;
       while (owner !== null) {
-        owners.push({
-          displayName: getDisplayNameForFiber(owner) || 'Anonymous',
-          id: getFiberID(getPrimaryFiber(owner)),
-          type: getElementTypeForFiber(owner),
-        });
+        owners.push(fiberToSerializedElement(owner));
         owner = owner._debugOwner || null;
       }
     }
@@ -3380,6 +3384,7 @@ export function attach(
     maxActualDuration: number,
     passiveEffectDuration: number | null,
     priorityLevel: string | null,
+    updaters: Array<SerializedElement> | null,
   |};
 
   type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
@@ -3438,6 +3443,7 @@ export function attach(
             passiveEffectDuration,
             priorityLevel,
             commitTime,
+            updaters,
           } = commitProfilingData;
 
           const interactionIDs: Array<number> = [];
@@ -3478,6 +3484,7 @@ export function attach(
             passiveEffectDuration,
             priorityLevel,
             timestamp: commitTime,
+            updaters,
           });
         });
 
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index ea83d7766617..f80211168c63 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -168,6 +168,7 @@ export type CommitDataBackend = {|
   passiveEffectDuration: number | null,
   priorityLevel: string | null,
   timestamp: number,
+  updaters: Array<SerializedElement> | null,
 |};
 
 export type ProfilingDataForRootBackend = {|
@@ -199,15 +200,16 @@ export type PathMatch = {|
   isFullMatch: boolean,
 |};
 
-export type Owner = {|
+export type SerializedElement = {|
   displayName: string | null,
   id: number,
+  key: number | string | null,
   type: ElementType,
 |};
 
 export type OwnersList = {|
   id: number,
-  owners: Array<Owner> | null,
+  owners: Array<SerializedElement> | null,
 |};
 
 export type InspectedElement = {|
@@ -244,7 +246,7 @@ export type InspectedElement = {|
   warnings: Array<[string, number]>,
 
   // List of owners
-  owners: Array<Owner> | null,
+  owners: Array<SerializedElement> | null,
 
   // Location of component in source code.
   source: Source | null,
@@ -322,7 +324,7 @@ export type RendererInterface = {
   getDisplayNameForFiberID: GetDisplayNameForFiberID,
   getInstanceAndStyle(id: number): InstanceAndStyle,
   getProfilingData(): ProfilingDataBackend,
-  getOwnersList: (id: number) => Array<Owner> | null,
+  getOwnersList: (id: number) => Array<SerializedElement> | null,
   getPathForElement: (id: number) => Array<PathFrame> | null,
   handleCommitFiberRoot: (fiber: Object, commitPriority?: number) => void,
   handleCommitFiberUnmount: (fiber: Object) => void,
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index f8868111e095..bae23abc0122 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -41,7 +41,7 @@ export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
 export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
   'React::DevTools::traceUpdatesEnabled';
 
-export const PROFILER_EXPORT_VERSION = 4;
+export const PROFILER_EXPORT_VERSION = 5;
 
 export const CHANGE_LOG_URL =
   'https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md';
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index 4d8662d80dae..e7b416591092 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -35,7 +35,7 @@ import {
 import styles from './InspectedElementView.css';
 
 import type {ContextMenuContextType} from '../context';
-import type {Element, InspectedElement, Owner} from './types';
+import type {Element, InspectedElement, SerializedElement} from './types';
 import type {ElementType} from 'react-devtools-shared/src/types';
 
 export type CopyPath = (path: Array<string | number>) => void;
@@ -127,7 +127,7 @@ export default function InspectedElementView({
           <div className={styles.Owners}>
             <div className={styles.OwnersHeader}>rendered by</div>
             {showOwnersList &&
-              ((owners: any): Array<Owner>).map(owner => (
+              ((owners: any): Array<SerializedElement>).map(owner => (
                 <OwnerView
                   key={owner.id}
                   displayName={owner.displayName || 'Anonymous'}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
index a979d0fa3d30..83e9b37708b0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
@@ -17,23 +17,27 @@ import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 import type {OwnersList} from 'react-devtools-shared/src/backend/types';
 import type {
   Element,
-  Owner,
+  SerializedElement,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
 import type {Resource, Thenable} from '../../cache';
 
-type Context = (id: number) => Array<Owner> | null;
+type Context = (id: number) => Array<SerializedElement> | null;
 
 const OwnersListContext = createContext<Context>(((null: any): Context));
 OwnersListContext.displayName = 'OwnersListContext';
 
-type ResolveFn = (ownersList: Array<Owner> | null) => void;
+type ResolveFn = (ownersList: Array<SerializedElement> | null) => void;
 type InProgressRequest = {|
-  promise: Thenable<Array<Owner>>,
+  promise: Thenable<Array<SerializedElement>>,
   resolveFn: ResolveFn,
 |};
 
 const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
-const resource: Resource<Element, Element, Array<Owner>> = createResource(
+const resource: Resource<
+  Element,
+  Element,
+  Array<SerializedElement>,
+> = createResource(
   (element: Element) => {
     const request = inProgressRequests.get(element);
     if (request != null) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index 8e106e8f044f..d7efafee6c52 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -27,16 +27,16 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {useIsOverflowing} from '../hooks';
 import {StoreContext} from '../context';
 
-import type {Owner} from './types';
+import type {SerializedElement} from './types';
 
 import styles from './OwnersStack.css';
 
-type SelectOwner = (owner: Owner | null) => void;
+type SelectOwner = (owner: SerializedElement | null) => void;
 
 type ACTION_UPDATE_OWNER_ID = {|
   type: 'UPDATE_OWNER_ID',
   ownerID: number | null,
-  owners: Array<Owner>,
+  owners: Array<SerializedElement>,
 |};
 type ACTION_UPDATE_SELECTED_INDEX = {|
   type: 'UPDATE_SELECTED_INDEX',
@@ -47,7 +47,7 @@ type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;
 
 type State = {|
   ownerID: number | null,
-  owners: Array<Owner>,
+  owners: Array<SerializedElement>,
   selectedIndex: number,
 |};
 
@@ -104,7 +104,7 @@ export default function OwnerStack() {
   const {owners, selectedIndex} = state;
 
   const selectOwner = useCallback<SelectOwner>(
-    (owner: Owner | null) => {
+    (owner: SerializedElement | null) => {
       if (owner !== null) {
         const index = owners.indexOf(owner);
         dispatch({
@@ -197,7 +197,7 @@ export default function OwnerStack() {
 }
 
 type ElementsDropdownProps = {
-  owners: Array<Owner>,
+  owners: Array<SerializedElement>,
   selectedIndex: number,
   selectOwner: SelectOwner,
   ...
@@ -245,7 +245,7 @@ function ElementsDropdown({
 
 type ElementViewProps = {
   isSelected: boolean,
-  owner: Owner,
+  owner: SerializedElement,
   selectOwner: SelectOwner,
   ...
 };
@@ -278,7 +278,7 @@ function ElementView({isSelected, owner, selectOwner}: ElementViewProps) {
 }
 
 type BackToOwnerButtonProps = {|
-  owners: Array<Owner>,
+  owners: Array<SerializedElement>,
   selectedIndex: number,
   selectOwner: SelectOwner,
 |};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index 11eb544c3f78..e09a251392bf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -44,16 +44,17 @@ export type Element = {|
   weight: number,
 |};
 
-export type Owner = {|
+export type SerializedElement = {|
   displayName: string | null,
   id: number,
+  key: number | string | null,
   hocDisplayNames: Array<string> | null,
   type: ElementType,
 |};
 
 export type OwnersList = {|
   id: number,
-  owners: Array<Owner> | null,
+  owners: Array<SerializedElement> | null,
 |};
 
 export type InspectedElementResponseType =
@@ -94,7 +95,7 @@ export type InspectedElement = {|
   warnings: Array<[string, number]>,
 
   // List of owners
-  owners: Array<Owner> | null,
+  owners: Array<SerializedElement> | null,
 
   // Location of component in source code.
   source: Source | null,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
index 34917846eb32..d82f10b3d73a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -30,6 +30,7 @@
 .Interactions {
   margin: 0 0 0.5rem;
 }
+.NoInteractions,
 .Interaction {
   display: block;
   width: 100%;
@@ -45,6 +46,10 @@
   background-color: var(--color-background-hover);
 }
 
+.NoInteractions {
+  color: var(--color-dim);
+}
+
 .Label {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
index ed913984cc7a..dcfaf7d68b3b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -10,8 +10,10 @@
 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';
 
@@ -39,6 +41,7 @@ export default function SidebarCommitInfo(_: Props) {
     passiveEffectDuration,
     priorityLevel,
     timestamp,
+    updaters,
   } = profilerStore.getCommitData(rootID, selectedCommitIndex);
 
   const viewInteraction = interactionID => {
@@ -49,6 +52,15 @@ export default function SidebarCommitInfo(_: Props) {
   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>
@@ -102,11 +114,18 @@ export default function SidebarCommitInfo(_: Props) {
             </li>
           )}
 
+          {updaters !== null && commitTree !== null && (
+            <li className={styles.ListItem}>
+              <label className={styles.Label}>What caused this update</label>?
+              <Updaters commitTree={commitTree} updaters={updaters} />
+            </li>
+          )}
+
           <li className={styles.Interactions}>
             <label className={styles.Label}>Interactions</label>:
             <div className={styles.InteractionList}>
               {interactionIDs.length === 0 ? (
-                <div className={styles.NoInteractions}>None</div>
+                <div className={styles.NoInteractions}>(none)</div>
               ) : null}
               {interactionIDs.map(interactionID => {
                 const interaction = interactions.get(interactionID);
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 000000000000..18d7f7f8fad0
--- /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 000000000000..9e2518612e45
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {CommitTree} from './types';
+import type {SerializedElement} from '../Components/types';
+
+import * as React from 'react';
+import {useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import styles from './Updaters.css';
+
+export type Props = {|
+  commitTree: CommitTree,
+  updaters: Array<SerializedElement>,
+|};
+
+export default function Updaters({commitTree, updaters}: Props) {
+  const {selectFiber} = useContext(ProfilerContext);
+
+  const children =
+    updaters.length > 0 ? (
+      updaters.map<React$Node>((serializedElement: SerializedElement) => {
+        const {displayName, id, key} = serializedElement;
+        const isVisibleInTree = commitTree.nodes.has(id);
+        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/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index 11e99c05b1be..90c56b3529be 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -8,6 +8,7 @@
  */
 
 import type {ElementType} from 'react-devtools-shared/src/types';
+import type {SerializedElement} from '../Components/types';
 
 export type CommitTreeNode = {|
   id: number,
@@ -80,6 +81,9 @@ export type CommitDataFrontend = {|
 
   // 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 = {|
@@ -131,6 +135,7 @@ export type CommitDataExport = {|
   passiveEffectDuration: number | null,
   priorityLevel: string | null,
   timestamp: number,
+  updaters: Array<SerializedElement> | null,
 |};
 
 export type ProfilingDataForRootExport = {|
@@ -148,6 +153,6 @@ export type ProfilingDataForRootExport = {|
 
 // Serializable version of ProfilingDataFrontend data.
 export type ProfilingDataExport = {|
-  version: 4,
+  version: 5,
   dataForRoots: Array<ProfilingDataForRootExport>,
 |};
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index c667276cfafa..55f7ecb5c145 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -8,6 +8,7 @@
  */
 
 import {PROFILER_EXPORT_VERSION} from 'react-devtools-shared/src/constants';
+import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 
 import type {ProfilingDataBackend} from 'react-devtools-shared/src/backend/types';
 import type {
@@ -84,6 +85,23 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
             passiveEffectDuration: commitDataBackend.passiveEffectDuration,
             priorityLevel: commitDataBackend.priorityLevel,
             timestamp: commitDataBackend.timestamp,
+            updaters:
+              commitDataBackend.updaters !== null
+                ? commitDataBackend.updaters.map(serializedElement => {
+                    const [
+                      serializedElementDisplayName,
+                      serializedElementHocDisplayNames,
+                    ] = separateDisplayNameAndHOCs(
+                      serializedElement.displayName,
+                      serializedElement.type,
+                    );
+                    return {
+                      ...serializedElement,
+                      displayName: serializedElementDisplayName,
+                      hocDisplayNames: serializedElementHocDisplayNames,
+                    };
+                  })
+                : null,
           }),
         );
 
@@ -111,7 +129,9 @@ export function prepareProfilingDataFrontendFromExport(
   const {version} = profilingDataExport;
 
   if (version !== PROFILER_EXPORT_VERSION) {
-    throw Error(`Unsupported profiler export version "${version}"`);
+    throw Error(
+      `Unsupported profile export version "${version}". Supported version is "${PROFILER_EXPORT_VERSION}".`,
+    );
   }
 
   const dataForRoots: Map<number, ProfilingDataForRootFrontend> = new Map();
@@ -138,6 +158,7 @@ export function prepareProfilingDataFrontendFromExport(
             passiveEffectDuration,
             priorityLevel,
             timestamp,
+            updaters,
           }) => ({
             changeDescriptions:
               changeDescriptions != null ? new Map(changeDescriptions) : null,
@@ -149,6 +170,7 @@ export function prepareProfilingDataFrontendFromExport(
             passiveEffectDuration,
             priorityLevel,
             timestamp,
+            updaters,
           }),
         ),
         displayName,
@@ -193,6 +215,7 @@ export function prepareProfilingDataExport(
             passiveEffectDuration,
             priorityLevel,
             timestamp,
+            updaters,
           }) => ({
             changeDescriptions:
               changeDescriptions != null
@@ -206,6 +229,7 @@ export function prepareProfilingDataExport(
             passiveEffectDuration,
             priorityLevel,
             timestamp,
+            updaters,
           }),
         ),
         displayName,

From 8a4a59c725a9cc2defafd7ea4d2ae46dadd1daec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 9 Apr 2021 17:02:13 -0400
Subject: [PATCH 0420/1603] Remove textarea special case from child fiber
 (#21222)

---
 .../src/ReactChildFiber.new.js                | 22 +++++++++----------
 .../src/ReactChildFiber.old.js                | 22 +++++++++----------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 12a693c2d2d7..e9fdf0b654b5 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -216,18 +216,16 @@ function coerceRef(
 }
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
-  if (returnFiber.type !== 'textarea') {
-    const childString = Object.prototype.toString.call(newChild);
-    invariant(
-      false,
-      'Objects are not valid as a React child (found: %s). ' +
-        'If you meant to render a collection of children, use an array ' +
-        'instead.',
-      childString === '[object Object]'
-        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-        : childString,
-    );
-  }
+  const childString = Object.prototype.toString.call(newChild);
+  invariant(
+    false,
+    'Objects are not valid as a React child (found: %s). ' +
+      'If you meant to render a collection of children, use an array ' +
+      'instead.',
+    childString === '[object Object]'
+      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
+      : childString,
+  );
 }
 
 function warnOnFunctionType(returnFiber: Fiber) {
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 52d941d19514..34120a641ba3 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -216,18 +216,16 @@ function coerceRef(
 }
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
-  if (returnFiber.type !== 'textarea') {
-    const childString = Object.prototype.toString.call(newChild);
-    invariant(
-      false,
-      'Objects are not valid as a React child (found: %s). ' +
-        'If you meant to render a collection of children, use an array ' +
-        'instead.',
-      childString === '[object Object]'
-        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-        : childString,
-    );
-  }
+  const childString = Object.prototype.toString.call(newChild);
+  invariant(
+    false,
+    'Objects are not valid as a React child (found: %s). ' +
+      'If you meant to render a collection of children, use an array ' +
+      'instead.',
+    childString === '[object Object]'
+      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
+      : childString,
+  );
 }
 
 function warnOnFunctionType(returnFiber: Fiber) {

From d4cae99f2a59e0380871134960d29ec5ce2c4fd9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 9 Apr 2021 19:12:13 -0400
Subject: [PATCH 0421/1603] Prepare DevTools CHANGELOG and versions for 4.11.0
 release (#21221)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 +-
 .../edge/manifest.json                        |  4 +-
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 packages/react-devtools/CHANGELOG.md          | 46 +++++++++++++++++++
 packages/react-devtools/package.json          |  4 +-
 7 files changed, 55 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 19090533447c..9a8fff2e8e2c 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.10.1",
+  "version": "4.11.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 75c607f476b2..0ce9f5470ded 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.10.1",
-  "version_name": "4.10.1",
+  "version": "4.11.0",
+  "version_name": "4.11.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index eda8fea3795b..be01541b8159 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.10.1",
-  "version_name": "4.10.1",
+  "version": "4.11.0",
+  "version_name": "4.11.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 9fd9a7b614bb..9cb050fa8556 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.10.1",
+  "version": "4.11.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index e1234341353c..6ad9bf82976d 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.10.1",
+  "version": "4.11.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index f4f20116e292..d32bff0dec21 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,52 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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.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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index ad5d429fd184..15e71cf7c38c 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.10.1",
+  "version": "4.11.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.10.1",
+    "react-devtools-core": "4.11.0",
     "update-notifier": "^2.1.0"
   }
 }

From 39713716aa09c025bb4c3c8c0c9d7979946250c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 9 Apr 2021 19:19:13 -0400
Subject: [PATCH 0422/1603] Merge isObject branches (#21226)

We assume that isArray and getIteratorFn are only called on objects.

So we shouldn't have to check that again and again, and then check a flag.

We can just stay in this branch.

There is a slight semantic breakage here because you could have an
iterator on a function, such as if it's a generator function. But that's
not supported and that currently only works at the root. The inner slots
don't support this.

So this just makes it consistent.
---
 .../src/ReactChildFiber.new.js                | 46 +++++++++----------
 .../src/ReactChildFiber.old.js                | 46 +++++++++----------
 2 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index e9fdf0b654b5..024a903dbd91 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -1231,9 +1231,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     // Handle object types
-    const isObject = typeof newChild === 'object' && newChild !== null;
-
-    if (isObject) {
+    if (typeof newChild === 'object' && newChild !== null) {
       switch (newChild.$$typeof) {
         case REACT_ELEMENT_TYPE:
           return placeSingleChild(
@@ -1266,6 +1264,26 @@ function ChildReconciler(shouldTrackSideEffects) {
             );
           }
       }
+
+      if (isArray(newChild)) {
+        return reconcileChildrenArray(
+          returnFiber,
+          currentFirstChild,
+          newChild,
+          lanes,
+        );
+      }
+
+      if (getIteratorFn(newChild)) {
+        return reconcileChildrenIterator(
+          returnFiber,
+          currentFirstChild,
+          newChild,
+          lanes,
+        );
+      }
+
+      throwOnInvalidObjectType(returnFiber, newChild);
     }
 
     if (typeof newChild === 'string' || typeof newChild === 'number') {
@@ -1279,28 +1297,6 @@ function ChildReconciler(shouldTrackSideEffects) {
       );
     }
 
-    if (isArray(newChild)) {
-      return reconcileChildrenArray(
-        returnFiber,
-        currentFirstChild,
-        newChild,
-        lanes,
-      );
-    }
-
-    if (getIteratorFn(newChild)) {
-      return reconcileChildrenIterator(
-        returnFiber,
-        currentFirstChild,
-        newChild,
-        lanes,
-      );
-    }
-
-    if (isObject) {
-      throwOnInvalidObjectType(returnFiber, newChild);
-    }
-
     if (__DEV__) {
       if (typeof newChild === 'function') {
         warnOnFunctionType(returnFiber);
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 34120a641ba3..80b4fc35512d 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -1231,9 +1231,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     // Handle object types
-    const isObject = typeof newChild === 'object' && newChild !== null;
-
-    if (isObject) {
+    if (typeof newChild === 'object' && newChild !== null) {
       switch (newChild.$$typeof) {
         case REACT_ELEMENT_TYPE:
           return placeSingleChild(
@@ -1266,6 +1264,26 @@ function ChildReconciler(shouldTrackSideEffects) {
             );
           }
       }
+
+      if (isArray(newChild)) {
+        return reconcileChildrenArray(
+          returnFiber,
+          currentFirstChild,
+          newChild,
+          lanes,
+        );
+      }
+
+      if (getIteratorFn(newChild)) {
+        return reconcileChildrenIterator(
+          returnFiber,
+          currentFirstChild,
+          newChild,
+          lanes,
+        );
+      }
+
+      throwOnInvalidObjectType(returnFiber, newChild);
     }
 
     if (typeof newChild === 'string' || typeof newChild === 'number') {
@@ -1279,28 +1297,6 @@ function ChildReconciler(shouldTrackSideEffects) {
       );
     }
 
-    if (isArray(newChild)) {
-      return reconcileChildrenArray(
-        returnFiber,
-        currentFirstChild,
-        newChild,
-        lanes,
-      );
-    }
-
-    if (getIteratorFn(newChild)) {
-      return reconcileChildrenIterator(
-        returnFiber,
-        currentFirstChild,
-        newChild,
-        lanes,
-      );
-    }
-
-    if (isObject) {
-      throwOnInvalidObjectType(returnFiber, newChild);
-    }
-
     if (__DEV__) {
       if (typeof newChild === 'function') {
         warnOnFunctionType(returnFiber);

From b0407b55ff59c60530c85a1ed14b55950d94cb9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 9 Apr 2021 19:23:37 -0400
Subject: [PATCH 0423/1603] Support more empty types (#21225)

Undefined errors as a direct return value.

This changes semantics for "true" and functions to mirror the client.
---
 packages/react-server/src/ReactFizzServer.js | 130 ++++++++++++++-----
 1 file changed, 97 insertions(+), 33 deletions(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4d94aa5945fb..90053ceb0251 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -56,7 +56,13 @@ import {
   processChildContext,
   emptyContextObject,
 } from './ReactFizzContext';
-import {REACT_ELEMENT_TYPE, REACT_SUSPENSE_TYPE} from 'shared/ReactSymbols';
+import {
+  getIteratorFn,
+  REACT_ELEMENT_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_SUSPENSE_TYPE,
+} from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   disableLegacyContext,
@@ -421,6 +427,16 @@ function shouldConstruct(Component) {
   return Component.prototype && Component.prototype.isReactComponent;
 }
 
+function invalidRenderResult(type: any): void {
+  invariant(
+    false,
+    '%s(...): Nothing was returned from render. This usually means a ' +
+      'return statement is missing. Or, to render nothing, ' +
+      'return null.',
+    getComponentNameFromType(type) || 'Component',
+  );
+}
+
 function renderWithHooks<Props, SecondArg>(
   request: Request,
   task: Task,
@@ -430,6 +446,9 @@ function renderWithHooks<Props, SecondArg>(
 ): any {
   // TODO: Set up Hooks etc.
   const children = Component(props, secondArg);
+  if (children === undefined) {
+    invalidRenderResult(Component);
+  }
   return children;
 }
 
@@ -441,6 +460,13 @@ function finishClassComponent(
   props: any,
 ): ReactNodeList {
   const nextChildren = instance.render();
+  if (nextChildren === undefined) {
+    if (__DEV__ && instance.render._isMockFunction) {
+      // We allow auto-mocks to proceed as if they're returning null.
+    } else {
+      invalidRenderResult(Component);
+    }
+  }
 
   if (__DEV__) {
     if (instance.props !== props) {
@@ -693,6 +719,58 @@ function renderNodeDestructive(
   // something suspends.
   task.node = node;
 
+  // Handle object types
+  if (typeof node === 'object' && node !== null) {
+    switch ((node: any).$$typeof) {
+      case REACT_ELEMENT_TYPE: {
+        const element: React$Element<any> = (node: any);
+        const type = element.type;
+        const props = element.props;
+        renderElement(request, task, type, props, node);
+        return;
+      }
+      case REACT_PORTAL_TYPE:
+        throw new Error('Not yet implemented node type.');
+      case REACT_LAZY_TYPE:
+        throw new Error('Not yet implemented node type.');
+    }
+
+    if (isArray(node)) {
+      if (node.length > 0) {
+        for (let i = 0; i < node.length; i++) {
+          // Recursively render the rest. 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]);
+        }
+      } else {
+        pushEmpty(
+          task.blockedSegment.chunks,
+          request.responseState,
+          task.assignID,
+        );
+        task.assignID = null;
+      }
+      return;
+    }
+
+    const iteratorFn = getIteratorFn(node);
+    if (iteratorFn) {
+      throw new Error('Not yet implemented node type.');
+    }
+
+    const childString = Object.prototype.toString.call(node);
+    invariant(
+      false,
+      'Objects are not valid as a React child (found: %s). ' +
+        'If you meant to render a collection of children, use an array ' +
+        'instead.',
+      childString === '[object Object]'
+        ? 'object with keys {' + Object.keys(node).join(', ') + '}'
+        : childString,
+    );
+  }
+
   if (typeof node === 'string') {
     pushTextInstance(
       task.blockedSegment.chunks,
@@ -704,43 +782,29 @@ function renderNodeDestructive(
     return;
   }
 
-  if (isArray(node)) {
-    if (node.length > 0) {
-      for (let i = 0; i < node.length; i++) {
-        // Recursively render the rest. 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]);
-      }
-    } else {
-      pushEmpty(
-        task.blockedSegment.chunks,
-        request.responseState,
-        task.assignID,
-      );
-      task.assignID = null;
-    }
-    return;
-  }
-
-  if (node === null) {
-    pushEmpty(task.blockedSegment.chunks, request.responseState, task.assignID);
+  if (typeof node === 'number') {
+    pushTextInstance(
+      task.blockedSegment.chunks,
+      '' + node,
+      request.responseState,
+      task.assignID,
+    );
+    task.assignID = null;
     return;
   }
 
-  if (
-    typeof node === 'object' &&
-    node &&
-    (node: any).$$typeof === REACT_ELEMENT_TYPE
-  ) {
-    const element: React$Element<any> = (node: any);
-    const type = element.type;
-    const props = element.props;
-    renderElement(request, task, type, props, node);
-    return;
+  if (__DEV__) {
+    if (typeof node === 'function') {
+      console.error(
+        'Functions are not valid as a React child. This may happen if ' +
+          'you return a Component instead of <Component /> from render. ' +
+          'Or maybe you meant to call this function rather than return it.',
+      );
+    }
   }
 
-  throw new Error('Not yet implemented node type.');
+  // Any other type is assumed to be empty.
+  pushEmpty(task.blockedSegment.chunks, request.responseState, task.assignID);
 }
 
 function spawnNewSuspendedTask(

From 933880b4544a83ce54c8a47f348effe725a58843 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 9 Apr 2021 19:50:09 -0400
Subject: [PATCH 0424/1603] Make time-slicing opt-in (#21072)

* Add enableSyncDefaultUpdates feature flag

* Add enableSyncDefaultUpdates implementation

* Fix tests

* Switch feature flag to true by default

* Finish concurrent render whenever for non-sync lanes

* Also return DefaultLane with eventLane

* Gate interruption test

* Add continuout native event test

* Fix tests from rebasing main

* Hardcode lanes, remove added export

* Sync forks
---
 .../src/__tests__/createSubscription-test.js  |  18 +-
 .../react-art/src/__tests__/ReactART-test.js  |   1 +
 .../ReactDOMNativeEventHeuristic-test.js      |  40 ++
 ...DOMServerPartialHydration-test.internal.js |  20 +-
 .../DOMPluginEventSystem-test.internal.js     |   8 +-
 .../src/ReactFiberLane.new.js                 |   2 +-
 .../src/ReactFiberLane.old.js                 |   2 +-
 .../src/ReactFiberWorkLoop.new.js             |  36 +-
 .../src/ReactFiberWorkLoop.old.js             |  36 +-
 ...asedOnReactExpirationTime-test.internal.js |   9 +-
 .../src/__tests__/ReactExpiration-test.js     | 125 +++++-
 .../src/__tests__/ReactFlushSync-test.js      |  26 +-
 .../ReactHooksWithNoopRenderer-test.js        | 132 ++++--
 .../src/__tests__/ReactIncremental-test.js    | 179 ++++++--
 ...tIncrementalErrorHandling-test.internal.js | 180 +++++---
 .../ReactIncrementalReflection-test.js        |  43 +-
 .../ReactIncrementalScheduling-test.js        |  88 +++-
 .../ReactIncrementalSideEffects-test.js       |  35 +-
 .../__tests__/ReactIncrementalUpdates-test.js | 243 ++++++++---
 .../__tests__/ReactInterleavedUpdates-test.js |  18 +-
 .../src/__tests__/ReactLazy-test.internal.js  |   9 +-
 .../src/__tests__/ReactNewContext-test.js     |   9 +-
 .../ReactSchedulerIntegration-test.js         |   9 +-
 .../__tests__/ReactSuspense-test.internal.js  |  43 +-
 .../src/__tests__/ReactSuspenseList-test.js   |  40 +-
 .../ReactSuspenseWithNoopRenderer-test.js     | 261 ++++++++++--
 .../__tests__/ReactUpdaters-test.internal.js  |   6 +-
 .../SchedulingProfiler-test.internal.js       |  52 ++-
 .../SchedulingProfilerLabels-test.internal.js |  18 +-
 .../useMutableSource-test.internal.js         | 398 ++++++++++++------
 .../useMutableSourceHydration-test.js         |  70 ++-
 .../__tests__/ReactTestRendererAsync-test.js  |  33 +-
 .../ReactDOMTracing-test.internal.js          |  74 +++-
 .../__tests__/ReactProfiler-test.internal.js  | 215 +++++++---
 ...ofilerDevToolsIntegration-test.internal.js |   9 +-
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 .../src/__tests__/useSubscription-test.js     |  36 +-
 46 files changed, 1996 insertions(+), 538 deletions(-)

diff --git a/packages/create-subscription/src/__tests__/createSubscription-test.js b/packages/create-subscription/src/__tests__/createSubscription-test.js
index 66a8a652a831..27075d7d7dee 100644
--- a/packages/create-subscription/src/__tests__/createSubscription-test.js
+++ b/packages/create-subscription/src/__tests__/createSubscription-test.js
@@ -268,6 +268,7 @@ describe('createSubscription', () => {
     expect(Scheduler).toFlushAndYield(['b-1']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should ignore values emitted by a new subscribable until the commit phase', () => {
     const log = [];
 
@@ -325,7 +326,13 @@ describe('createSubscription', () => {
     expect(log).toEqual(['Parent.componentDidMount']);
 
     // Start React update, but don't finish
-    ReactNoop.render(<Parent observed={observableB} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent observed={observableB} />);
+      });
+    } else {
+      ReactNoop.render(<Parent observed={observableB} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Subscriber: b-0']);
     expect(log).toEqual(['Parent.componentDidMount']);
 
@@ -355,6 +362,7 @@ describe('createSubscription', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should not drop values emitted between updates', () => {
     const log = [];
 
@@ -412,7 +420,13 @@ describe('createSubscription', () => {
     expect(log).toEqual(['Parent.componentDidMount']);
 
     // Start React update, but don't finish
-    ReactNoop.render(<Parent observed={observableB} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent observed={observableB} />);
+      });
+    } else {
+      ReactNoop.render(<Parent observed={observableB} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Subscriber: b-0']);
     expect(log).toEqual(['Parent.componentDidMount']);
 
diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js
index 1613360ce636..950ec77bb1a6 100644
--- a/packages/react-art/src/__tests__/ReactART-test.js
+++ b/packages/react-art/src/__tests__/ReactART-test.js
@@ -360,6 +360,7 @@ describe('ReactART', () => {
     expect(onClick2).toBeCalled();
   });
 
+  // @gate !enableSyncDefaultUpdates
   it('can concurrently render with a "primary" renderer while sharing context', () => {
     const CurrentRendererContext = React.createContext(null);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 6c8d677cdbb9..03bac9c657bd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -284,6 +284,46 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     expect(container.textContent).toEqual('hovered');
   });
 
+  // @gate experimental
+  it('continuous native events flush as expected', async () => {
+    const root = ReactDOM.unstable_createRoot(container);
+
+    const target = React.createRef(null);
+    function Foo({hovered}) {
+      const hoverString = hovered ? 'hovered' : 'not hovered';
+      Scheduler.unstable_yieldValue(hoverString);
+      return <div ref={target}>{hoverString}</div>;
+    }
+
+    await act(async () => {
+      root.render(<Foo hovered={false} />);
+    });
+    expect(container.textContent).toEqual('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
+      expect(Scheduler).toHaveYielded(['not hovered']);
+      expect(container.textContent).toEqual('not hovered');
+
+      expect(Scheduler).toFlushAndYieldThrough(['hovered']);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        expect(container.textContent).toEqual('hovered');
+      } else {
+        expect(container.textContent).toEqual('not hovered');
+      }
+    });
+    expect(container.textContent).toEqual('hovered');
+  });
+
   // @gate experimental
   it('should batch inside native events', async () => {
     const root = ReactDOM.unstable_createRoot(container);
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index d37845c01b38..bc0df9fa6c3f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1865,11 +1865,21 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     await act(async () => {
-      root.render(<App />);
-      expect(Scheduler).toFlushAndYieldThrough(['Before']);
-      // This took a long time to render.
-      Scheduler.unstable_advanceTime(1000);
-      expect(Scheduler).toFlushAndYield(['After']);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App />);
+        });
+
+        expect(Scheduler).toFlushAndYieldThrough(['Before', 'After']);
+      } else {
+        root.render(<App />);
+
+        expect(Scheduler).toFlushAndYieldThrough(['Before']);
+        // This took a long time to render.
+        Scheduler.unstable_advanceTime(1000);
+        expect(Scheduler).toFlushAndYield(['After']);
+      }
+
       // This will cause us to skip the second row completely.
     });
 
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 3491aa7b94f1..7d37d5b61e86 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -1934,7 +1934,13 @@ describe('DOMPluginEventSystem', () => {
             log.length = 0;
 
             // Increase counter
-            root.render(<Test counter={1} />);
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                root.render(<Test counter={1} />);
+              });
+            } else {
+              root.render(<Test counter={1} />);
+            }
             // Yield before committing
             expect(Scheduler).toFlushAndYieldThrough(['Test']);
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 32bb8139c765..219c8cadb7f9 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -52,7 +52,7 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000010;
+export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
 export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index b577a67aa213..4672d5a92c91 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -52,7 +52,7 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
-const InputContinuousHydrationLane: Lane = /*           */ 0b0000000000000000000000000000010;
+export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
 export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b52680c91119..df1b2653e204 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,6 +32,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
+  enableSyncDefaultUpdates,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -138,6 +139,10 @@ import {
   NoLanes,
   NoLane,
   SyncLane,
+  DefaultLane,
+  DefaultHydrationLane,
+  InputContinuousLane,
+  InputContinuousHydrationLane,
   NoTimestamp,
   claimNextTransitionLane,
   claimNextRetryLane,
@@ -433,6 +438,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // TODO: Move this type conversion to the event priority module.
   const updateLane: Lane = (getCurrentUpdatePriority(): any);
   if (updateLane !== NoLane) {
+    if (
+      enableSyncDefaultUpdates &&
+      (updateLane === InputContinuousLane ||
+        updateLane === InputContinuousHydrationLane)
+    ) {
+      return DefaultLane;
+    }
     return updateLane;
   }
 
@@ -443,6 +455,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // use that directly.
   // TODO: Move this type conversion to the event priority module.
   const eventLane: Lane = (getCurrentEventPriority(): any);
+  if (
+    enableSyncDefaultUpdates &&
+    (eventLane === InputContinuousLane ||
+      eventLane === InputContinuousHydrationLane)
+  ) {
+    return DefaultLane;
+  }
   return eventLane;
 }
 
@@ -695,7 +714,16 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (newCallbackPriority === SyncLane) {
+  if (
+    enableSyncDefaultUpdates &&
+    (newCallbackPriority === DefaultLane ||
+      newCallbackPriority === DefaultHydrationLane)
+  ) {
+    newCallbackNode = scheduleCallback(
+      ImmediateSchedulerPriority,
+      performSyncWorkOnRoot.bind(null, root),
+    );
+  } else if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -1030,7 +1058,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root);
+  if (enableSyncDefaultUpdates && !includesSomeLane(lanes, SyncLane)) {
+    finishConcurrentRender(root, exitStatus, lanes);
+  } else {
+    commitRoot(root);
+  }
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 08553e392818..07f8a38b8bc0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,6 +32,7 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
+  enableSyncDefaultUpdates,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -138,6 +139,10 @@ import {
   NoLanes,
   NoLane,
   SyncLane,
+  DefaultLane,
+  DefaultHydrationLane,
+  InputContinuousLane,
+  InputContinuousHydrationLane,
   NoTimestamp,
   claimNextTransitionLane,
   claimNextRetryLane,
@@ -433,6 +438,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // TODO: Move this type conversion to the event priority module.
   const updateLane: Lane = (getCurrentUpdatePriority(): any);
   if (updateLane !== NoLane) {
+    if (
+      enableSyncDefaultUpdates &&
+      (updateLane === InputContinuousLane ||
+        updateLane === InputContinuousHydrationLane)
+    ) {
+      return DefaultLane;
+    }
     return updateLane;
   }
 
@@ -443,6 +455,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // use that directly.
   // TODO: Move this type conversion to the event priority module.
   const eventLane: Lane = (getCurrentEventPriority(): any);
+  if (
+    enableSyncDefaultUpdates &&
+    (eventLane === InputContinuousLane ||
+      eventLane === InputContinuousHydrationLane)
+  ) {
+    return DefaultLane;
+  }
   return eventLane;
 }
 
@@ -695,7 +714,16 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (newCallbackPriority === SyncLane) {
+  if (
+    enableSyncDefaultUpdates &&
+    (newCallbackPriority === DefaultLane ||
+      newCallbackPriority === DefaultHydrationLane)
+  ) {
+    newCallbackNode = scheduleCallback(
+      ImmediateSchedulerPriority,
+      performSyncWorkOnRoot.bind(null, root),
+    );
+  } else if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -1030,7 +1058,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root);
+  if (enableSyncDefaultUpdates && !includesSomeLane(lanes, SyncLane)) {
+    finishConcurrentRender(root, exitStatus, lanes);
+  } else {
+    commitRoot(root);
+  }
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
diff --git a/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
index 1a46bed43730..599aabda7235 100644
--- a/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
@@ -45,6 +45,7 @@ describe('ReactSuspenseList', () => {
     return Component;
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('appends rendering tasks to the end of the priority queue', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -63,7 +64,13 @@ describe('ReactSuspenseList', () => {
     root.render(<App show={false} />);
     expect(Scheduler).toFlushAndYield([]);
 
-    root.render(<App show={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.render(<App show={true} />);
+      });
+    } else {
+      root.render(<App show={true} />);
+    }
     expect(Scheduler).toFlushAndYield([
       'Suspend! [A]',
       'Suspend! [B]',
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 5fc98d980e29..d251bb04f111 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -111,9 +111,15 @@ describe('ReactExpiration', () => {
     // Flush the sync task.
     ReactNoop.flushSync();
   }
-
+  // @gate experimental || !enableSyncDefaultUpdates
   it('increases priority of updates as time progresses', () => {
-    ReactNoop.render(<span prop="done" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<span prop="done" />);
+      });
+    } else {
+      ReactNoop.render(<span prop="done" />);
+    }
 
     expect(ReactNoop.getChildren()).toEqual([]);
 
@@ -132,6 +138,7 @@ describe('ReactExpiration', () => {
     expect(ReactNoop.getChildren()).toEqual([span('done')]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('two updates of like priority in the same event always flush within the same batch', () => {
     class TextClass extends React.Component {
       componentDidMount() {
@@ -154,7 +161,13 @@ describe('ReactExpiration', () => {
 
     // First, show what happens for updates in two separate events.
     // Schedule an update.
-    ReactNoop.render(<TextClass text="A" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<TextClass text="A" />);
+      });
+    } else {
+      ReactNoop.render(<TextClass text="A" />);
+    }
     // Advance the timer.
     Scheduler.unstable_advanceTime(2000);
     // Partially flush the first update, then interrupt it.
@@ -184,6 +197,7 @@ describe('ReactExpiration', () => {
     expect(Scheduler).toFlushAndYield(['B [render]', 'B [commit]']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   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",
@@ -209,7 +223,13 @@ describe('ReactExpiration', () => {
 
       // First, show what happens for updates in two separate events.
       // Schedule an update.
-      ReactNoop.render(<TextClass text="A" />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.render(<TextClass text="A" />);
+        });
+      } else {
+        ReactNoop.render(<TextClass text="A" />);
+      }
       // Advance the timer.
       Scheduler.unstable_advanceTime(2000);
       // Partially flush the first update, then interrupt it.
@@ -245,6 +265,7 @@ describe('ReactExpiration', () => {
     },
   );
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('cannot update at the same expiration time that is already rendering', () => {
     const store = {text: 'initial'};
     const subscribers = [];
@@ -281,7 +302,13 @@ describe('ReactExpiration', () => {
     }
 
     // Initial mount
-    ReactNoop.render(<App />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<App />);
+      });
+    } else {
+      ReactNoop.render(<App />);
+    }
     expect(Scheduler).toFlushAndYield([
       'initial [A] [render]',
       'initial [B] [render]',
@@ -294,7 +321,13 @@ describe('ReactExpiration', () => {
     ]);
 
     // Partial update
-    subscribers.forEach(s => s.setState({text: '1'}));
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        subscribers.forEach(s => s.setState({text: '1'}));
+      });
+    } else {
+      subscribers.forEach(s => s.setState({text: '1'}));
+    }
     expect(Scheduler).toFlushAndYieldThrough([
       '1 [A] [render]',
       '1 [B] [render]',
@@ -310,6 +343,7 @@ describe('ReactExpiration', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('stops yielding if CPU-bound update takes too long to finish', () => {
     const root = ReactNoop.createRoot();
     function App() {
@@ -324,7 +358,13 @@ describe('ReactExpiration', () => {
       );
     }
 
-    root.render(<App />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.render(<App />);
+      });
+    } else {
+      root.render(<App />);
+    }
 
     expect(Scheduler).toFlushAndYieldThrough(['A']);
     expect(Scheduler).toFlushAndYieldThrough(['B']);
@@ -337,6 +377,7 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('ABCDE');
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('root expiration is measured from the time of the first update', () => {
     Scheduler.unstable_advanceTime(10000);
 
@@ -352,8 +393,13 @@ describe('ReactExpiration', () => {
         </>
       );
     }
-
-    root.render(<App />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.render(<App />);
+      });
+    } else {
+      root.render(<App />);
+    }
 
     expect(Scheduler).toFlushAndYieldThrough(['A']);
     expect(Scheduler).toFlushAndYieldThrough(['B']);
@@ -366,6 +412,7 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('ABCDE');
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should measure expiration times relative to module initialization', () => {
     // Tests an implementation detail where expiration times are computed using
     // bitwise operations.
@@ -381,12 +428,24 @@ describe('ReactExpiration', () => {
     // current time.
     ReactNoop = require('react-noop-renderer');
 
-    ReactNoop.render('Hi');
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render('Hi');
+      });
+    } else {
+      ReactNoop.render('Hi');
+    }
 
     // The update should not have expired yet.
     flushNextRenderIfExpired();
     expect(Scheduler).toHaveYielded([]);
-    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      // TODO: Why is this flushed?
+      expect(ReactNoop).toMatchRenderedOutput('Hi');
+    } else {
+      expect(ReactNoop).toMatchRenderedOutput(null);
+    }
 
     // Advance the time some more to expire the update.
     Scheduler.unstable_advanceTime(10000);
@@ -395,6 +454,7 @@ describe('ReactExpiration', () => {
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should measure callback timeout relative to current time, not start-up time', () => {
     // 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
@@ -403,7 +463,13 @@ describe('ReactExpiration', () => {
     // Before scheduling an update, advance the current time.
     Scheduler.unstable_advanceTime(10000);
 
-    ReactNoop.render('Hi');
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render('Hi');
+      });
+    } else {
+      ReactNoop.render('Hi');
+    }
     flushNextRenderIfExpired();
     expect(Scheduler).toHaveYielded([]);
     expect(ReactNoop).toMatchRenderedOutput(null);
@@ -418,6 +484,7 @@ describe('ReactExpiration', () => {
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('prevents starvation by sync updates', async () => {
     const {useState} = React;
 
@@ -450,7 +517,13 @@ describe('ReactExpiration', () => {
 
     // First demonstrate what happens when there's no starvation
     await ReactNoop.act(async () => {
-      updateNormalPri();
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          updateNormalPri();
+        });
+      } else {
+        updateNormalPri();
+      }
       expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 0']);
       updateSyncPri();
     });
@@ -466,7 +539,13 @@ describe('ReactExpiration', () => {
 
     // Do the same thing, but starve the first update
     await ReactNoop.act(async () => {
-      updateNormalPri();
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          updateNormalPri();
+        });
+      } else {
+        updateNormalPri();
+      }
       expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 1']);
 
       // This time, a lot of time has elapsed since the normal pri update
@@ -628,6 +707,7 @@ describe('ReactExpiration', () => {
     });
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('detects starvation in multiple batches', async () => {
     const {useState} = React;
 
@@ -666,7 +746,13 @@ describe('ReactExpiration', () => {
 
     await ReactNoop.act(async () => {
       // Partially render an update
-      updateNormalPri();
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          updateNormalPri();
+        });
+      } else {
+        updateNormalPri();
+      }
       expect(Scheduler).toFlushAndYieldThrough(['High pri: 0']);
       // Some time goes by. In an interleaved event, schedule another update.
       // This will be placed into a separate batch.
@@ -693,6 +779,7 @@ describe('ReactExpiration', () => {
     });
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('updates do not expire while they are IO-bound', async () => {
     const {Suspense} = React;
 
@@ -715,7 +802,13 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('A, Sibling');
 
     await ReactNoop.act(async () => {
-      root.render(<App text="B" />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App text="B" />);
+        });
+      } else {
+        root.render(<App text="B" />);
+      }
       expect(Scheduler).toFlushAndYield([
         'Suspend! [B]',
         'Sibling',
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index 6326aaa2aeab..a4c9fef93779 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -22,6 +22,7 @@ describe('ReactFlushSync', () => {
     return text;
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   test('changes priority of updates in useEffect', async () => {
     function App() {
       const [syncState, setSyncState] = useState(0);
@@ -37,22 +38,37 @@ describe('ReactFlushSync', () => {
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      root.render(<App />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App />);
+        });
+      } else {
+        root.render(<App />);
+      }
       // This will yield right before the passive effect fires
       expect(Scheduler).toFlushUntilNextPaint(['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.
-      expect(() =>
-        expect(Scheduler).toFlushUntilNextPaint(['1, 0']),
-      ).toErrorDev('flushSync was called from inside a lifecycle method');
+      expect(() => {
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          expect(Scheduler).toFlushUntilNextPaint(['1, 0', '1, 1']);
+        } else {
+          expect(Scheduler).toFlushUntilNextPaint(['1, 0']);
+        }
+      }).toErrorDev('flushSync was called from inside a lifecycle method');
 
       // The remaining update is not sync
       ReactNoop.flushSync();
       expect(Scheduler).toHaveYielded([]);
 
       // Now flush it.
-      expect(Scheduler).toFlushUntilNextPaint(['1, 1']);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        // With sync default updates, passive effects are synchronously flushed.
+        expect(Scheduler).toHaveYielded([]);
+      } else {
+        expect(Scheduler).toFlushUntilNextPaint(['1, 1']);
+      }
     });
     expect(root).toMatchRenderedOutput('1, 1');
   });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 973a0cbea81d..d01cd2a06537 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -151,6 +151,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     return Promise.resolve().then(() => {});
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('resumes after an interruption', () => {
     function Counter(props, ref) {
       const [count, updateCount] = useState(0);
@@ -166,10 +167,20 @@ describe('ReactHooksWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
     // Schedule some updates
-    ReactNoop.batchedUpdates(() => {
-      counter.current.updateCount(1);
-      counter.current.updateCount(count => count + 10);
-    });
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        // TODO: Batched updates need to be inside startTransition?
+        ReactNoop.batchedUpdates(() => {
+          counter.current.updateCount(1);
+          counter.current.updateCount(count => count + 10);
+        });
+      });
+    } else {
+      ReactNoop.batchedUpdates(() => {
+        counter.current.updateCount(1);
+        counter.current.updateCount(count => count + 10);
+      });
+    }
 
     // Partially flush without committing
     expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
@@ -690,6 +701,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span(22)]);
     });
 
+    // @gate experimental || !enableSyncDefaultUpdates
     it('discards render phase updates if something suspends', async () => {
       const thenable = {then() {}};
       function Foo({signal}) {
@@ -725,15 +737,28 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield([0]);
       expect(root).toMatchRenderedOutput(<span prop={0} />);
 
-      root.render(<Foo signal={false} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<Foo signal={false} />);
+        });
+      } else {
+        root.render(<Foo signal={false} />);
+      }
       expect(Scheduler).toFlushAndYield(['Suspend!']);
       expect(root).toMatchRenderedOutput(<span prop={0} />);
 
       // Rendering again should suspend again.
-      root.render(<Foo signal={false} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<Foo signal={false} />);
+        });
+      } else {
+        root.render(<Foo signal={false} />);
+      }
       expect(Scheduler).toFlushAndYield(['Suspend!']);
     });
 
+    // @gate experimental || !enableSyncDefaultUpdates
     it('discards render phase updates if something suspends, but not other updates in the same component', async () => {
       const thenable = {then() {}};
       function Foo({signal}) {
@@ -776,19 +801,38 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(root).toMatchRenderedOutput(<span prop="A:0" />);
 
       await ReactNoop.act(async () => {
-        root.render(<Foo signal={false} />);
-        setLabel('B');
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            root.render(<Foo signal={false} />);
+            setLabel('B');
+          });
+        } else {
+          root.render(<Foo signal={false} />);
+          setLabel('B');
+        }
 
         expect(Scheduler).toFlushAndYield(['Suspend!']);
         expect(root).toMatchRenderedOutput(<span prop="A:0" />);
 
         // Rendering again should suspend again.
-        root.render(<Foo signal={false} />);
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            root.render(<Foo signal={false} />);
+          });
+        } else {
+          root.render(<Foo signal={false} />);
+        }
         expect(Scheduler).toFlushAndYield(['Suspend!']);
 
         // Flip the signal back to "cancel" the update. However, the update to
         // label should still proceed. It shouldn't have been dropped.
-        root.render(<Foo signal={true} />);
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            root.render(<Foo signal={true} />);
+          });
+        } else {
+          root.render(<Foo signal={true} />);
+        }
         expect(Scheduler).toFlushAndYield(['B:0']);
         expect(root).toMatchRenderedOutput(<span prop="B:0" />);
       });
@@ -1284,6 +1328,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
+    // @gate experimental || !enableSyncDefaultUpdates
     it('does not warn about state updates for unmounted components with pending passive unmounts for alternates', () => {
       let setParentState = null;
       const setChildStates = [];
@@ -1350,17 +1395,34 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
 
         // Schedule another update for children, and partially process it.
-        setChildStates.forEach(setChildState => setChildState(2));
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            setChildStates.forEach(setChildState => setChildState(2));
+          });
+        } else {
+          setChildStates.forEach(setChildState => setChildState(2));
+        }
         expect(Scheduler).toFlushAndYieldThrough(['Child one render']);
 
         // Schedule unmount for the parent that unmounts children with pending update.
         ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
           setParentState(false);
         });
-        expect(Scheduler).toFlushUntilNextPaint([
-          'Parent false render',
-          'Parent false commit',
-        ]);
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          expect(Scheduler).toFlushUntilNextPaint([
+            // TODO: why do the children render and fire effects?
+            'Child two render',
+            'Child one commit',
+            'Child two commit',
+            'Parent false render',
+            'Parent false commit',
+          ]);
+        } else {
+          expect(Scheduler).toFlushUntilNextPaint([
+            'Parent false render',
+            'Parent false commit',
+          ]);
+        }
 
         // Schedule updates for children too (which should be ignored)
         setChildStates.forEach(setChildState => setChildState(2));
@@ -1647,6 +1709,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
+    // @gate experimental || !enableSyncDefaultUpdates
     it('updates have async priority even if effects are flushed early', () => {
       function Counter(props) {
         const [count, updateCount] = useState('(empty)');
@@ -1667,20 +1730,41 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
 
         // Rendering again should flush the previous commit's effects
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+          });
+        } else {
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.unstable_yieldValue('Sync effect'),
+          );
+        }
+
         expect(Scheduler).toFlushAndYieldThrough([
           'Schedule update [0]',
           'Count: 0',
         ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
 
-        expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-        ReactNoop.flushPassiveEffects();
-        expect(Scheduler).toHaveYielded(['Schedule update [1]']);
-        expect(Scheduler).toFlushAndYield(['Count: 1']);
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Count: 0',
+            'Sync effect',
+            'Schedule update [1]',
+            'Count: 1',
+          ]);
+        } else {
+          expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+          expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+
+          ReactNoop.flushPassiveEffects();
+          expect(Scheduler).toHaveYielded(['Schedule update [1]']);
+          expect(Scheduler).toFlushAndYield(['Count: 1']);
+        }
+
         expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
       });
     });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
index fa7674d43770..e505d1e243fa 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -50,6 +50,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushWithoutYielding();
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should render a simple component, in steps if needed', () => {
     function Bar() {
       Scheduler.unstable_yieldValue('Bar');
@@ -65,7 +66,17 @@ describe('ReactIncremental', () => {
       return [<Bar key="a" isBar={true} />, <Bar key="b" isBar={true} />];
     }
 
-    ReactNoop.render(<Foo />, () => Scheduler.unstable_yieldValue('callback'));
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />, () =>
+          Scheduler.unstable_yieldValue('callback'),
+        );
+      });
+    } else {
+      ReactNoop.render(<Foo />, () =>
+        Scheduler.unstable_yieldValue('callback'),
+      );
+    }
     // Do one step of work.
     expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
 
@@ -132,6 +143,7 @@ describe('ReactIncremental', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('can cancel partially rendered work and restart', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -152,13 +164,26 @@ describe('ReactIncremental', () => {
     ReactNoop.render(<Foo text="foo" />);
     expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'Bar']);
 
-    ReactNoop.render(<Foo text="bar" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo text="bar" />);
+      });
+    } else {
+      ReactNoop.render(<Foo text="bar" />);
+    }
     // Flush part of the work
     expect(Scheduler).toFlushAndYieldThrough(['Foo', 'Bar']);
 
     // This will abort the previous work and restart
     ReactNoop.flushSync(() => ReactNoop.render(null));
-    ReactNoop.render(<Foo text="baz" />);
+
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo text="baz" />);
+      });
+    } else {
+      ReactNoop.render(<Foo text="baz" />);
+    }
 
     // Flush part of the new work
     expect(Scheduler).toFlushAndYieldThrough(['Foo', 'Bar']);
@@ -167,6 +192,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Bar']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should call callbacks even if updates are aborted', () => {
     let inst;
 
@@ -192,26 +218,50 @@ describe('ReactIncremental', () => {
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushWithoutYielding();
 
-    inst.setState(
-      () => {
-        Scheduler.unstable_yieldValue('setState1');
-        return {text: 'bar'};
-      },
-      () => Scheduler.unstable_yieldValue('callback1'),
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        inst.setState(
+          () => {
+            Scheduler.unstable_yieldValue('setState1');
+            return {text: 'bar'};
+          },
+          () => Scheduler.unstable_yieldValue('callback1'),
+        );
+      });
+    } else {
+      inst.setState(
+        () => {
+          Scheduler.unstable_yieldValue('setState1');
+          return {text: 'bar'};
+        },
+        () => Scheduler.unstable_yieldValue('callback1'),
+      );
+    }
 
     // Flush part of the work
     expect(Scheduler).toFlushAndYieldThrough(['setState1']);
 
     // This will abort the previous work and restart
     ReactNoop.flushSync(() => ReactNoop.render(<Foo />));
-    inst.setState(
-      () => {
-        Scheduler.unstable_yieldValue('setState2');
-        return {text2: 'baz'};
-      },
-      () => Scheduler.unstable_yieldValue('callback2'),
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        inst.setState(
+          () => {
+            Scheduler.unstable_yieldValue('setState2');
+            return {text2: 'baz'};
+          },
+          () => Scheduler.unstable_yieldValue('callback2'),
+        );
+      });
+    } else {
+      inst.setState(
+        () => {
+          Scheduler.unstable_yieldValue('setState2');
+          return {text2: 'baz'};
+        },
+        () => Scheduler.unstable_yieldValue('callback2'),
+      );
+    }
 
     // Flush the rest of the work which now includes the low priority
     expect(Scheduler).toFlushAndYield([
@@ -1714,6 +1764,7 @@ describe('ReactIncremental', () => {
     expect(instance.state.n).toEqual(3);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('merges and masks context', () => {
     class Intl extends React.Component {
       static childContextTypes = {
@@ -1838,15 +1889,27 @@ describe('ReactIncremental', () => {
       'ShowLocale {"locale":"de"}',
       'ShowBoth {"locale":"de"}',
     ]);
-
-    ReactNoop.render(
-      <Intl locale="sv">
-        <ShowLocale />
-        <div>
-          <ShowBoth />
-        </div>
-      </Intl>,
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <Intl locale="sv">
+            <ShowLocale />
+            <div>
+              <ShowBoth />
+            </div>
+          </Intl>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <Intl locale="sv">
+          <ShowLocale />
+          <div>
+            <ShowBoth />
+          </div>
+        </Intl>,
+      );
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Intl {}']);
 
     ReactNoop.render(
@@ -1994,18 +2057,35 @@ describe('ReactIncremental', () => {
       }
     }
 
-    ReactNoop.render(
-      <Intl locale="fr">
-        <ShowLocale />
-        <LegacyHiddenDiv mode="hidden">
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <Intl locale="fr">
+            <ShowLocale />
+            <LegacyHiddenDiv mode="hidden">
+              <ShowLocale />
+              <Intl locale="ru">
+                <ShowLocale />
+              </Intl>
+            </LegacyHiddenDiv>
+            <ShowLocale />
+          </Intl>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <Intl locale="fr">
           <ShowLocale />
-          <Intl locale="ru">
+          <LegacyHiddenDiv mode="hidden">
             <ShowLocale />
-          </Intl>
-        </LegacyHiddenDiv>
-        <ShowLocale />
-      </Intl>,
-    );
+            <Intl locale="ru">
+              <ShowLocale />
+            </Intl>
+          </LegacyHiddenDiv>
+          <ShowLocale />
+        </Intl>,
+      );
+    }
     expect(Scheduler).toFlushAndYieldThrough([
       'Intl {}',
       'ShowLocale {"locale":"fr"}',
@@ -2748,6 +2828,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['count:1, name:not brian']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('does not interrupt for update at same priority', () => {
     function Parent(props) {
       Scheduler.unstable_yieldValue('Parent: ' + props.step);
@@ -2759,7 +2840,13 @@ describe('ReactIncremental', () => {
       return null;
     }
 
-    ReactNoop.render(<Parent step={1} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent step={1} />);
+      });
+    } else {
+      ReactNoop.render(<Parent step={1} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Parent: 1']);
 
     // Interrupt at same priority
@@ -2768,6 +2855,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Child: 1', 'Parent: 2', 'Child: 2']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('does not interrupt for update at lower priority', () => {
     function Parent(props) {
       Scheduler.unstable_yieldValue('Parent: ' + props.step);
@@ -2779,7 +2867,13 @@ describe('ReactIncremental', () => {
       return null;
     }
 
-    ReactNoop.render(<Parent step={1} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent step={1} />);
+      });
+    } else {
+      ReactNoop.render(<Parent step={1} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Parent: 1']);
 
     // Interrupt at lower priority
@@ -2789,6 +2883,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Child: 1', 'Parent: 2', 'Child: 2']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('does interrupt for update at higher priority', () => {
     function Parent(props) {
       Scheduler.unstable_yieldValue('Parent: ' + props.step);
@@ -2800,7 +2895,13 @@ describe('ReactIncremental', () => {
       return null;
     }
 
-    ReactNoop.render(<Parent step={1} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent step={1} />);
+      });
+    } else {
+      ReactNoop.render(<Parent step={1} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Parent: 1']);
 
     // Interrupt at higher priority
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index df691e074b2a..186085c84302 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -58,6 +58,7 @@ describe('ReactIncrementalErrorHandling', () => {
     );
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('recovers from errors asynchronously', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -90,19 +91,37 @@ describe('ReactIncrementalErrorHandling', () => {
       throw new Error('oops!');
     }
 
-    ReactNoop.render(
-      <ErrorBoundary>
-        <Indirection>
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <ErrorBoundary>
+            <Indirection>
+              <Indirection>
+                <Indirection>
+                  <BadRender />
+                  <Indirection />
+                  <Indirection />
+                </Indirection>
+              </Indirection>
+            </Indirection>
+          </ErrorBoundary>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <ErrorBoundary>
           <Indirection>
             <Indirection>
-              <BadRender />
-              <Indirection />
-              <Indirection />
+              <Indirection>
+                <BadRender />
+                <Indirection />
+                <Indirection />
+              </Indirection>
             </Indirection>
           </Indirection>
-        </Indirection>
-      </ErrorBoundary>,
-    );
+        </ErrorBoundary>,
+      );
+    }
 
     // Start rendering asynchronously
     expect(Scheduler).toFlushAndYieldThrough([
@@ -152,6 +171,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('recovers from errors asynchronously (legacy, no getDerivedStateFromError)', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -184,19 +204,37 @@ describe('ReactIncrementalErrorHandling', () => {
       throw new Error('oops!');
     }
 
-    ReactNoop.render(
-      <ErrorBoundary>
-        <Indirection>
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <ErrorBoundary>
+            <Indirection>
+              <Indirection>
+                <Indirection>
+                  <BadRender />
+                  <Indirection />
+                  <Indirection />
+                </Indirection>
+              </Indirection>
+            </Indirection>
+          </ErrorBoundary>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <ErrorBoundary>
           <Indirection>
             <Indirection>
-              <BadRender />
-              <Indirection />
-              <Indirection />
+              <Indirection>
+                <BadRender />
+                <Indirection />
+                <Indirection />
+              </Indirection>
             </Indirection>
           </Indirection>
-        </Indirection>
-      </ErrorBoundary>,
-    );
+        </ErrorBoundary>,
+      );
+    }
 
     // Start rendering asynchronously
     expect(Scheduler).toFlushAndYieldThrough([
@@ -247,27 +285,16 @@ describe('ReactIncrementalErrorHandling', () => {
       Scheduler.unstable_yieldValue('commit');
     }
 
-    function interrupt() {
-      ReactNoop.flushSync(() => {
-        ReactNoop.renderToRootWithID(null, 'other-root');
-      });
-    }
-
-    ReactNoop.render(<App isBroken={true} />, onCommit);
+    React.unstable_startTransition(() => {
+      ReactNoop.render(<App isBroken={true} />, onCommit);
+    });
     expect(Scheduler).toFlushAndYieldThrough(['error']);
-    interrupt();
 
     React.unstable_startTransition(() => {
       // This update is in a separate batch
       ReactNoop.render(<App isBroken={false} />, onCommit);
     });
 
-    expect(Scheduler).toFlushAndYieldThrough([
-      // The first render fails. But because there's a lower priority pending
-      // update, it doesn't throw.
-      'error',
-    ]);
-
     // React will try to recover by rendering all the pending updates in a
     // single batch, synchronously. This time it succeeds.
     //
@@ -306,15 +333,10 @@ describe('ReactIncrementalErrorHandling', () => {
       Scheduler.unstable_yieldValue('commit');
     }
 
-    function interrupt() {
-      ReactNoop.flushSync(() => {
-        ReactNoop.renderToRootWithID(null, 'other-root');
-      });
-    }
-
-    ReactNoop.render(<App isBroken={true} />, onCommit);
+    React.unstable_startTransition(() => {
+      ReactNoop.render(<App isBroken={true} />, onCommit);
+    });
     expect(Scheduler).toFlushAndYieldThrough(['error']);
-    interrupt();
 
     expect(ReactNoop).toMatchRenderedOutput(null);
 
@@ -323,12 +345,6 @@ describe('ReactIncrementalErrorHandling', () => {
       ReactNoop.render(<App isBroken={false} />, onCommit);
     });
 
-    expect(Scheduler).toFlushAndYieldThrough([
-      // The first render fails. But because there's a lower priority pending
-      // update, it doesn't throw.
-      'error',
-    ]);
-
     // React will try to recover by rendering all the pending updates in a
     // single batch, synchronously. This time it succeeds.
     //
@@ -362,6 +378,7 @@ describe('ReactIncrementalErrorHandling', () => {
     );
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('retries one more time before handling error', () => {
     function BadRender({unused}) {
       Scheduler.unstable_yieldValue('BadRender');
@@ -383,7 +400,17 @@ describe('ReactIncrementalErrorHandling', () => {
       );
     }
 
-    ReactNoop.render(<Parent />, () => Scheduler.unstable_yieldValue('commit'));
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Parent />, () =>
+          Scheduler.unstable_yieldValue('commit'),
+        );
+      });
+    } else {
+      ReactNoop.render(<Parent />, () =>
+        Scheduler.unstable_yieldValue('commit'),
+      );
+    }
 
     // Render the bad component asynchronously
     expect(Scheduler).toFlushAndYieldThrough(['Parent', 'BadRender']);
@@ -402,6 +429,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('retries one more time if an error occurs during a render that expires midway through the tree', async () => {
     function Oops({unused}) {
       Scheduler.unstable_yieldValue('Oops');
@@ -425,7 +453,13 @@ describe('ReactIncrementalErrorHandling', () => {
       );
     }
 
-    ReactNoop.render(<App />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<App />);
+      });
+    } else {
+      ReactNoop.render(<App />);
+    }
 
     // Render part of the tree
     expect(Scheduler).toFlushAndYieldThrough(['A', 'B']);
@@ -532,6 +566,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('catches render error in a boundary during partial deferred mounting', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -556,11 +591,21 @@ describe('ReactIncrementalErrorHandling', () => {
       throw new Error('Hello');
     }
 
-    ReactNoop.render(
-      <ErrorBoundary>
-        <BrokenRender />
-      </ErrorBoundary>,
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <ErrorBoundary>
+            <BrokenRender />
+          </ErrorBoundary>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <ErrorBoundary>
+          <BrokenRender />
+        </ErrorBoundary>,
+      );
+    }
 
     expect(Scheduler).toFlushAndYieldThrough(['ErrorBoundary render success']);
     expect(ReactNoop.getChildren()).toEqual([]);
@@ -712,6 +757,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('propagates an error from a noop error boundary during partial deferred mounting', () => {
     class RethrowErrorBoundary extends React.Component {
       componentDidCatch(error) {
@@ -729,11 +775,21 @@ describe('ReactIncrementalErrorHandling', () => {
       throw new Error('Hello');
     }
 
-    ReactNoop.render(
-      <RethrowErrorBoundary>
-        <BrokenRender />
-      </RethrowErrorBoundary>,
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <RethrowErrorBoundary>
+            <BrokenRender />
+          </RethrowErrorBoundary>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <RethrowErrorBoundary>
+          <BrokenRender />
+        </RethrowErrorBoundary>,
+      );
+    }
 
     expect(Scheduler).toFlushAndYieldThrough(['RethrowErrorBoundary render']);
 
@@ -1805,7 +1861,13 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     await ReactNoop.act(async () => {
-      root.render(<Oops />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<Oops />);
+        });
+      } else {
+        root.render(<Oops />);
+      }
 
       // Render past the component that throws, then yield.
       expect(Scheduler).toFlushAndYieldThrough(['Oops']);
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
index 0f41be8d5686..b372bc8fce25 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
@@ -34,6 +34,7 @@ describe('ReactIncrementalReflection', () => {
     return {type: 'span', children: [], prop, hidden: false};
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('handles isMounted even when the initial render is deferred', () => {
     const instances = [];
 
@@ -63,7 +64,13 @@ describe('ReactIncrementalReflection', () => {
       return <Component />;
     }
 
-    ReactNoop.render(<Foo />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    } else {
+      ReactNoop.render(<Foo />);
+    }
 
     // Render part way through but don't yet commit the updates.
     expect(Scheduler).toFlushAndYieldThrough(['componentWillMount: false']);
@@ -81,6 +88,7 @@ describe('ReactIncrementalReflection', () => {
     expect(instances[0]._isMounted()).toBe(true);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('handles isMounted when an unmount is deferred', () => {
     const instances = [];
 
@@ -121,7 +129,13 @@ describe('ReactIncrementalReflection', () => {
 
     expect(instances[0]._isMounted()).toBe(true);
 
-    ReactNoop.render(<Foo mount={false} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo mount={false} />);
+      });
+    } else {
+      ReactNoop.render(<Foo mount={false} />);
+    }
     // Render part way through but don't yet commit the updates so it is not
     // fully unmounted yet.
     expect(Scheduler).toFlushAndYieldThrough(['Other']);
@@ -134,6 +148,7 @@ describe('ReactIncrementalReflection', () => {
     expect(instances[0]._isMounted()).toBe(false);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('finds no node before insertion and correct node before deletion', () => {
     let classInstance = null;
 
@@ -204,7 +219,13 @@ describe('ReactIncrementalReflection', () => {
       return [<Component key="a" step={props.step} />, <Sibling key="b" />];
     }
 
-    ReactNoop.render(<Foo step={0} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo step={0} />);
+      });
+    } else {
+      ReactNoop.render(<Foo step={0} />);
+    }
     // Flush past Component but don't complete rendering everything yet.
     expect(Scheduler).toFlushAndYieldThrough([
       ['componentWillMount', null],
@@ -246,7 +267,13 @@ describe('ReactIncrementalReflection', () => {
 
     // The next step will render a new host node but won't get committed yet.
     // We expect this to mutate the original Fiber.
-    ReactNoop.render(<Foo step={2} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo step={2} />);
+      });
+    } else {
+      ReactNoop.render(<Foo step={2} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough([
       ['componentWillUpdate', hostSpan],
       'render',
@@ -267,7 +294,13 @@ describe('ReactIncrementalReflection', () => {
     expect(ReactNoop.findInstance(classInstance)).toBe(hostDiv);
 
     // Render to null but don't commit it yet.
-    ReactNoop.render(<Foo step={3} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo step={3} />);
+      });
+    } else {
+      ReactNoop.render(<Foo step={3} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough([
       ['componentWillUpdate', hostDiv],
       'render',
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index 0fda09f04f08..3126957b2318 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -85,6 +85,7 @@ describe('ReactIncrementalScheduling', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span prop={5} />);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('works on deferred roots in the order they were scheduled', () => {
     const {useEffect} = React;
     function Text({text}) {
@@ -107,8 +108,15 @@ describe('ReactIncrementalScheduling', () => {
 
     // Schedule deferred work in the reverse order
     ReactNoop.act(() => {
-      ReactNoop.renderToRootWithID(<Text text="c:2" />, 'c');
-      ReactNoop.renderToRootWithID(<Text text="b:2" />, 'b');
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.renderToRootWithID(<Text text="c:2" />, 'c');
+          ReactNoop.renderToRootWithID(<Text text="b:2" />, 'b');
+        });
+      } else {
+        ReactNoop.renderToRootWithID(<Text text="c:2" />, 'c');
+        ReactNoop.renderToRootWithID(<Text text="b:2" />, 'b');
+      }
       // Ensure it starts in the order it was scheduled
       expect(Scheduler).toFlushAndYieldThrough(['c:2']);
 
@@ -117,7 +125,13 @@ describe('ReactIncrementalScheduling', () => {
       expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:2');
       // Schedule last bit of work, it will get processed the last
 
-      ReactNoop.renderToRootWithID(<Text text="a:2" />, 'a');
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.renderToRootWithID(<Text text="a:2" />, 'a');
+        });
+      } else {
+        ReactNoop.renderToRootWithID(<Text text="a:2" />, 'a');
+      }
 
       // Keep performing work in the order it was scheduled
       expect(Scheduler).toFlushAndYieldThrough(['b:2']);
@@ -132,6 +146,7 @@ describe('ReactIncrementalScheduling', () => {
     });
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('schedules sync updates when inside componentDidMount/Update', () => {
     let instance;
 
@@ -170,7 +185,13 @@ describe('ReactIncrementalScheduling', () => {
       }
     }
 
-    ReactNoop.render(<Foo />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    } else {
+      ReactNoop.render(<Foo />);
+    }
     // Render without committing
     expect(Scheduler).toFlushAndYieldThrough(['render: 0']);
 
@@ -184,7 +205,13 @@ describe('ReactIncrementalScheduling', () => {
       'componentDidUpdate: 1',
     ]);
 
-    instance.setState({tick: 2});
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        instance.setState({tick: 2});
+      });
+    } else {
+      instance.setState({tick: 2});
+    }
     expect(Scheduler).toFlushAndYieldThrough(['render: 2']);
     expect(ReactNoop.flushNextYield()).toEqual([
       'componentDidUpdate: 2',
@@ -197,6 +224,7 @@ describe('ReactIncrementalScheduling', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('can opt-in to async scheduling inside componentDidMount/Update', () => {
     let instance;
     class Foo extends React.Component {
@@ -255,20 +283,39 @@ describe('ReactIncrementalScheduling', () => {
 
     // Increment the tick to 2. This will trigger an update inside cDU. Flush
     // the first update without flushing the second one.
-    instance.setState({tick: 2});
-    expect(Scheduler).toFlushAndYieldThrough([
-      'render: 2',
-      'componentDidUpdate: 2',
-      'componentDidUpdate (before setState): 2',
-      'componentDidUpdate (after setState): 2',
-    ]);
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        instance.setState({tick: 2});
+      });
 
-    // Now flush the cDU update.
-    expect(Scheduler).toFlushAndYield(['render: 3', 'componentDidUpdate: 3']);
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
+      // TODO: why does this flush sync?
+      expect(Scheduler).toFlushAndYieldThrough([
+        'render: 2',
+        'componentDidUpdate: 2',
+        'componentDidUpdate (before setState): 2',
+        'componentDidUpdate (after setState): 2',
+        'render: 3',
+        'componentDidUpdate: 3',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
+    } else {
+      instance.setState({tick: 2});
+
+      expect(Scheduler).toFlushAndYieldThrough([
+        'render: 2',
+        'componentDidUpdate: 2',
+        'componentDidUpdate (before setState): 2',
+        'componentDidUpdate (after setState): 2',
+      ]);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
+
+      // Now flush the cDU update.
+      expect(Scheduler).toFlushAndYield(['render: 3', 'componentDidUpdate: 3']);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
+    }
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('performs Task work even after time runs out', () => {
     class Foo extends React.Component {
       state = {step: 1};
@@ -286,7 +333,14 @@ describe('ReactIncrementalScheduling', () => {
         return <span prop={this.state.step} />;
       }
     }
-    ReactNoop.render(<Foo />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    } else {
+      ReactNoop.render(<Foo />);
+    }
+
     // This should be just enough to complete all the work, but not enough to
     // commit it.
     expect(Scheduler).toFlushAndYieldThrough(['Foo']);
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
index 3939aa7e7003..32d4699318a1 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -384,6 +384,7 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('does not update child nodes if a flush is aborted', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -409,7 +410,13 @@ describe('ReactIncrementalSideEffects', () => {
       div(div(span('Hello'), span('Hello')), span('Yo')),
     ]);
 
-    ReactNoop.render(<Foo text="World" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo text="World" />);
+      });
+    } else {
+      ReactNoop.render(<Foo text="World" />);
+    }
 
     // Flush some of the work without committing
     expect(Scheduler).toFlushAndYieldThrough(['Foo', 'Bar']);
@@ -633,12 +640,19 @@ describe('ReactIncrementalSideEffects', () => {
     );
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('can update a completed tree before it has a chance to commit', () => {
     function Foo(props) {
       Scheduler.unstable_yieldValue('Foo');
       return <span prop={props.step} />;
     }
-    ReactNoop.render(<Foo step={1} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo step={1} />);
+      });
+    } else {
+      ReactNoop.render(<Foo step={1} />);
+    }
     // This should be just enough to complete the tree without committing it
     expect(Scheduler).toFlushAndYieldThrough(['Foo']);
     expect(ReactNoop.getChildrenAsJSX()).toEqual(null);
@@ -647,13 +661,26 @@ describe('ReactIncrementalSideEffects', () => {
     ReactNoop.flushNextYield();
     expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={1} />);
 
-    ReactNoop.render(<Foo step={2} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo step={2} />);
+      });
+    } else {
+      ReactNoop.render(<Foo step={2} />);
+    }
     // This should be just enough to complete the tree without committing it
     expect(Scheduler).toFlushAndYieldThrough(['Foo']);
     expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={1} />);
     // This time, before we commit the tree, we update the root component with
     // new props
-    ReactNoop.render(<Foo step={3} />);
+
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo step={3} />);
+      });
+    } else {
+      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.
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index 98092cf33ffa..9eaa95f93edf 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -61,9 +61,16 @@ describe('ReactIncrementalUpdates', () => {
 
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYieldThrough(['commit']);
-    expect(state).toEqual({a: 'a'});
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
+
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      // TODO: should deferredUpdates flush sync with the default update?
+      expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
+      expect(Scheduler).toFlushWithoutYielding();
+    } else {
+      expect(state).toEqual({a: 'a'});
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
+    }
   });
 
   it('applies updates with equal priority in insertion order', () => {
@@ -130,6 +137,7 @@ describe('ReactIncrementalUpdates', () => {
     expect(instance.state).toEqual({c: 'c', d: 'd'});
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('can abort an update, schedule additional updates, and resume', () => {
     let instance;
     class Foo extends React.Component {
@@ -159,33 +167,75 @@ describe('ReactIncrementalUpdates', () => {
     }
 
     // Schedule some async updates
-    instance.setState(createUpdate('a'));
-    instance.setState(createUpdate('b'));
-    instance.setState(createUpdate('c'));
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        instance.setState(createUpdate('a'));
+        instance.setState(createUpdate('b'));
+        instance.setState(createUpdate('c'));
+      });
+    } else {
+      instance.setState(createUpdate('a'));
+      instance.setState(createUpdate('b'));
+      instance.setState(createUpdate('c'));
+    }
 
     // Begin the updates but don't flush them yet
     expect(Scheduler).toFlushAndYieldThrough(['a', 'b', 'c']);
     expect(ReactNoop.getChildren()).toEqual([span('')]);
 
     // Schedule some more updates at different priorities
-    instance.setState(createUpdate('d'));
-    ReactNoop.flushSync(() => {
-      instance.setState(createUpdate('e'));
-      instance.setState(createUpdate('f'));
-    });
-    instance.setState(createUpdate('g'));
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      instance.setState(createUpdate('d'));
+      ReactNoop.flushSync(() => {
+        instance.setState(createUpdate('e'));
+        instance.setState(createUpdate('f'));
+      });
+      React.unstable_startTransition(() => {
+        instance.setState(createUpdate('g'));
+      });
 
-    // The sync updates should have flushed, but not the async ones
-    expect(Scheduler).toHaveYielded(['e', 'f']);
-    expect(ReactNoop.getChildren()).toEqual([span('ef')]);
+      // The sync updates should have flushed, but not the async ones
+      expect(Scheduler).toHaveYielded(['e', 'f']);
+      expect(ReactNoop.getChildren()).toEqual([span('ef')]);
 
-    // 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.
-    expect(Scheduler).toFlushAndYield(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
-    expect(ReactNoop.getChildren()).toEqual([span('abcdefg')]);
+      // 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.
+      // TODO: should d, e, f be flushed again first?
+      expect(Scheduler).toFlushAndYield([
+        'd',
+        'e',
+        'f',
+        'a',
+        'b',
+        'c',
+        'd',
+        'e',
+        'f',
+        'g',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('abcdefg')]);
+    } else {
+      instance.setState(createUpdate('d'));
+      ReactNoop.flushSync(() => {
+        instance.setState(createUpdate('e'));
+        instance.setState(createUpdate('f'));
+      });
+      instance.setState(createUpdate('g'));
+
+      // The sync updates should have flushed, but not the async ones
+      expect(Scheduler).toHaveYielded(['e', 'f']);
+      expect(ReactNoop.getChildren()).toEqual([span('ef')]);
+
+      // 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.
+      expect(Scheduler).toFlushAndYield(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
+      expect(ReactNoop.getChildren()).toEqual([span('abcdefg')]);
+    }
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('can abort an update, schedule a replaceState, and resume', () => {
     let instance;
     class Foo extends React.Component {
@@ -215,34 +265,79 @@ describe('ReactIncrementalUpdates', () => {
     }
 
     // Schedule some async updates
-    instance.setState(createUpdate('a'));
-    instance.setState(createUpdate('b'));
-    instance.setState(createUpdate('c'));
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        instance.setState(createUpdate('a'));
+        instance.setState(createUpdate('b'));
+        instance.setState(createUpdate('c'));
+      });
+    } else {
+      instance.setState(createUpdate('a'));
+      instance.setState(createUpdate('b'));
+      instance.setState(createUpdate('c'));
+    }
 
     // Begin the updates but don't flush them yet
     expect(Scheduler).toFlushAndYieldThrough(['a', 'b', 'c']);
     expect(ReactNoop.getChildren()).toEqual([span('')]);
 
-    // 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'));
-    });
-    instance.setState(createUpdate('g'));
-
-    // The sync updates should have flushed, but not the async ones. Update d
-    // was dropped and replaced by e.
-    expect(Scheduler).toHaveYielded(['e', 'f']);
-    expect(ReactNoop.getChildren()).toEqual([span('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.
-    expect(Scheduler).toFlushAndYield(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
-    expect(ReactNoop.getChildren()).toEqual([span('fg')]);
+    // Schedule some more updates at different priorities
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      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.unstable_startTransition(() => {
+        instance.setState(createUpdate('g'));
+      });
+
+      // The sync updates should have flushed, but not the async ones.
+      // TODO: should 'd' have flushed?
+      // TODO: should 'f' have flushed? I don't know what enqueueReplaceState is.
+      expect(Scheduler).toHaveYielded(['e', 'f']);
+      expect(ReactNoop.getChildren()).toEqual([span('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.
+      expect(Scheduler).toFlushAndYield([
+        'd',
+        'e',
+        'f',
+        'a',
+        'b',
+        'c',
+        'd',
+        'e',
+        'f',
+        'g',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('fg')]);
+    } else {
+      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'));
+      });
+      instance.setState(createUpdate('g'));
+
+      // The sync updates should have flushed, but not the async ones. Update d
+      // was dropped and replaced by e.
+      expect(Scheduler).toHaveYielded(['e', 'f']);
+      expect(ReactNoop.getChildren()).toEqual([span('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.
+      expect(Scheduler).toFlushAndYield(['a', 'b', 'c', 'd', 'e', 'f', 'g']);
+      expect(ReactNoop.getChildren()).toEqual([span('fg')]);
+    }
   });
 
   it('passes accumulation of previous updates to replaceState updater function', () => {
@@ -459,6 +554,7 @@ describe('ReactIncrementalUpdates', () => {
     expect(ReactNoop.getChildren()).toEqual([span('derived state')]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('regression: does not expire soon due to layout effects in the last batch', () => {
     const {useState, useLayoutEffect} = React;
 
@@ -475,7 +571,13 @@ describe('ReactIncrementalUpdates', () => {
     }
 
     ReactNoop.act(() => {
-      ReactNoop.render(<App />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.render(<App />);
+        });
+      } else {
+        ReactNoop.render(<App />);
+      }
       flushNextRenderIfExpired();
       expect(Scheduler).toHaveYielded([]);
       expect(Scheduler).toFlushAndYield([
@@ -485,13 +587,19 @@ describe('ReactIncrementalUpdates', () => {
       ]);
 
       Scheduler.unstable_advanceTime(10000);
-
-      setCount(2);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          setCount(2);
+        });
+      } else {
+        setCount(2);
+      }
       flushNextRenderIfExpired();
       expect(Scheduler).toHaveYielded([]);
     });
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('regression: does not expire soon due to previous flushSync', () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -505,29 +613,49 @@ describe('ReactIncrementalUpdates', () => {
 
     Scheduler.unstable_advanceTime(10000);
 
-    ReactNoop.render(<Text text="B" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Text text="B" />);
+      });
+    } else {
+      ReactNoop.render(<Text text="B" />);
+    }
     flushNextRenderIfExpired();
     expect(Scheduler).toHaveYielded([]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('regression: does not expire soon due to previous expired work', () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
       return text;
     }
 
-    ReactNoop.render(<Text text="A" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Text text="A" />);
+      });
+    } else {
+      ReactNoop.render(<Text text="A" />);
+    }
     Scheduler.unstable_advanceTime(10000);
     flushNextRenderIfExpired();
     expect(Scheduler).toHaveYielded(['A']);
 
     Scheduler.unstable_advanceTime(10000);
 
-    ReactNoop.render(<Text text="B" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Text text="B" />);
+      });
+    } else {
+      ReactNoop.render(<Text text="B" />);
+    }
     flushNextRenderIfExpired();
     expect(Scheduler).toHaveYielded([]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('when rebasing, does not exclude updates that were already committed, regardless of priority', async () => {
     const {useState, useLayoutEffect} = React;
 
@@ -560,7 +688,13 @@ describe('ReactIncrementalUpdates', () => {
     expect(root).toMatchRenderedOutput('');
 
     await ReactNoop.act(async () => {
-      pushToLog('A');
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          pushToLog('A');
+        });
+      } else {
+        pushToLog('A');
+      }
 
       ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
         pushToLog('B'),
@@ -584,6 +718,7 @@ describe('ReactIncrementalUpdates', () => {
     expect(root).toMatchRenderedOutput('ABCD');
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('when rebasing, does not exclude updates that were already committed, regardless of priority (classes)', async () => {
     let pushToLog;
     class App extends React.Component {
@@ -615,7 +750,13 @@ describe('ReactIncrementalUpdates', () => {
     expect(root).toMatchRenderedOutput('');
 
     await ReactNoop.act(async () => {
-      pushToLog('A');
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          pushToLog('A');
+        });
+      } else {
+        pushToLog('A');
+      }
       ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () =>
         pushToLog('B'),
       );
diff --git a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
index d21d39aacf43..271fe1ffb7c3 100644
--- a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
@@ -22,6 +22,7 @@ describe('ReactInterleavedUpdates', () => {
     return text;
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   test('update during an interleaved event is not processed during the current render', async () => {
     const updaters = [];
 
@@ -55,13 +56,25 @@ describe('ReactInterleavedUpdates', () => {
     expect(root).toMatchRenderedOutput('000');
 
     await ReactNoop.act(async () => {
-      updateChildren(1);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          updateChildren(1);
+        });
+      } else {
+        updateChildren(1);
+      }
       // Partially render the children. Only the first one.
       expect(Scheduler).toFlushAndYieldThrough([1]);
 
       // In an interleaved event, schedule an update on each of the children.
       // Including the two that haven't rendered yet.
-      updateChildren(2);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          updateChildren(2);
+        });
+      } else {
+        updateChildren(2);
+      }
 
       // We should continue rendering without including the interleaved updates.
       expect(Scheduler).toFlushUntilNextPaint([1, 1]);
@@ -73,6 +86,7 @@ describe('ReactInterleavedUpdates', () => {
   });
 
   // @gate experimental
+  // @gate !enableSyncDefaultUpdates
   test('low priority update during an interleaved event is not processed during the current render', async () => {
     // Same as previous test, but the interleaved update is lower priority than
     // the in-progress render.
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index b9e6b0c26806..215c83db2e25 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -1475,6 +1475,7 @@ describe('ReactLazy', () => {
   });
 
   // @gate enableLazyElements
+  // @gate experimental || !enableSyncDefaultUpdates
   it('mount and reorder lazy elements', async () => {
     class Child extends React.Component {
       componentDidMount() {
@@ -1534,7 +1535,13 @@ describe('ReactLazy', () => {
     expect(root).toMatchRenderedOutput('AB');
 
     // Swap the position of A and B
-    root.update(<Parent swap={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.update(<Parent swap={true} />);
+      });
+    } else {
+      root.update(<Parent swap={true} />);
+    }
     expect(Scheduler).toFlushAndYield(['Init B2', 'Loading...']);
     await lazyChildB2;
     // We need to flush to trigger the second one to load.
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index 4f64972715ac..5c338f01db8e 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -828,6 +828,7 @@ describe('ReactNewContext', () => {
       );
     });
 
+    // @gate experimental || !enableSyncDefaultUpdates
     it('warns if multiple renderers concurrently render the same context', () => {
       spyOnDev(console, 'error');
       const Context = React.createContext(0);
@@ -846,7 +847,13 @@ describe('ReactNewContext', () => {
         );
       }
 
-      ReactNoop.render(<App value={1} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.render(<App value={1} />);
+        });
+      } else {
+        ReactNoop.render(<App value={1} />);
+      }
       // Render past the Provider, but don't commit yet
       expect(Scheduler).toFlushAndYieldThrough(['Foo']);
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index c0ab53a40dc0..d0fb1fec858c 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -88,6 +88,7 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('requests a paint after committing', () => {
     const scheduleCallback = Scheduler.unstable_scheduleCallback;
 
@@ -100,7 +101,13 @@ describe('ReactSchedulerIntegration', () => {
     scheduleCallback(NormalPriority, () => Scheduler.unstable_yieldValue('C'));
 
     // Schedule a React render. React will request a paint after committing it.
-    root.render('Update');
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.render('Update');
+      });
+    } else {
+      root.render('Update');
+    }
 
     // Advance time just to be sure the next tasks have lower priority
     Scheduler.unstable_advanceTime(2000);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 9a9f57ccd20b..ae3f286f542b 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -99,6 +99,7 @@ describe('ReactSuspense', () => {
     }
   }
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('suspends rendering and continues later', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -129,7 +130,13 @@ describe('ReactSuspense', () => {
 
     // Navigate the shell to now render the child content.
     // This should suspend.
-    root.update(<Foo renderBar={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.update(<Foo renderBar={true} />);
+      });
+    } else {
+      root.update(<Foo renderBar={true} />);
+    }
 
     expect(Scheduler).toFlushAndYield([
       'Foo',
@@ -197,6 +204,7 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('AB');
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('interrupts current render if promise resolves before current render phase', () => {
     let didResolve = false;
     const listeners = [];
@@ -238,15 +246,29 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('Initial');
 
     // The update will suspend.
-    root.update(
-      <>
-        <Suspense fallback={<Text text="Loading..." />}>
-          <Async />
-        </Suspense>
-        <Text text="After Suspense" />
-        <Text text="Sibling" />
-      </>,
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.update(
+          <>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Async />
+            </Suspense>
+            <Text text="After Suspense" />
+            <Text text="Sibling" />
+          </>,
+        );
+      });
+    } else {
+      root.update(
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Async />
+          </Suspense>
+          <Text text="After Suspense" />
+          <Text text="Sibling" />
+        </>,
+      );
+    }
 
     // Yield past the Suspense boundary but don't complete the last sibling.
     expect(Scheduler).toFlushAndYieldThrough([
@@ -271,6 +293,7 @@ describe('ReactSuspense', () => {
   });
 
   // @gate experimental
+  // @gate !enableSyncDefaultUpdates
   it(
     'interrupts current render when something suspends with a ' +
       "delay and we've already skipped over a lower priority update in " +
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index 2cdc2621fbe9..dfac720d4b25 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -1274,7 +1274,13 @@ describe('ReactSuspenseList', () => {
     }
 
     // This render is only CPU bound. Nothing suspends.
-    ReactNoop.render(<Foo />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    } else {
+      ReactNoop.render(<Foo />);
+    }
 
     expect(Scheduler).toFlushAndYieldThrough(['A']);
 
@@ -1452,7 +1458,13 @@ describe('ReactSuspenseList', () => {
     }
 
     // This render is only CPU bound. Nothing suspends.
-    ReactNoop.render(<Foo />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    } else {
+      ReactNoop.render(<Foo />);
+    }
 
     expect(Scheduler).toFlushAndYieldThrough(['A']);
 
@@ -2449,7 +2461,13 @@ describe('ReactSuspenseList', () => {
 
     await ReactNoop.act(async () => {
       // Add a few items at the end.
-      updateLowPri(true);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          updateLowPri(true);
+        });
+      } else {
+        updateLowPri(true);
+      }
 
       // Flush partially through.
       expect(Scheduler).toFlushAndYieldThrough(['B', 'C']);
@@ -2586,7 +2604,13 @@ describe('ReactSuspenseList', () => {
       );
     }
 
-    ReactNoop.render(<App />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<App />);
+      });
+    } else {
+      ReactNoop.render(<App />);
+    }
 
     expect(Scheduler).toFlushAndYieldThrough([
       'App',
@@ -2653,7 +2677,13 @@ describe('ReactSuspenseList', () => {
       );
     }
 
-    ReactNoop.render(<App />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<App />);
+      });
+    } else {
+      ReactNoop.render(<App />);
+    }
 
     expect(Scheduler).toFlushAndYieldThrough([
       'App',
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 9d6056e25d3d..bb4e0f6892a6 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -211,7 +211,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     }
 
-    ReactNoop.render(<Foo />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+    } else {
+      ReactNoop.render(<Foo />);
+    }
     expect(Scheduler).toFlushAndYieldThrough([
       'Foo',
       'Bar',
@@ -277,7 +283,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
 
     // The update will suspend.
-    ReactNoop.render(<Foo renderBar={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo renderBar={true} />);
+      });
+    } else {
+      ReactNoop.render(<Foo renderBar={true} />);
+    }
     expect(Scheduler).toFlushAndYield([
       'Foo',
       'Bar',
@@ -341,14 +353,27 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
     expect(Scheduler).toFlushAndYield([]);
     // B suspends. Continue rendering the remaining siblings.
-    ReactNoop.render(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <Text text="A" />
-        <AsyncText text="B" />
-        <Text text="C" />
-        <Text text="D" />
-      </Suspense>,
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Text text="A" />
+            <AsyncText text="B" />
+            <Text text="C" />
+            <Text text="D" />
+          </Suspense>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Text text="A" />
+          <AsyncText text="B" />
+          <Text text="C" />
+          <Text text="D" />
+        </Suspense>,
+      );
+    }
     // B suspends. Continue rendering the remaining siblings.
     expect(Scheduler).toFlushAndYield([
       'A',
@@ -376,6 +401,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   // TODO: Delete this feature flag.
   // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__
   // @gate enableCache
+  // @gate experimental || !enableSyncDefaultUpdates
   it('retries on error', async () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -410,7 +436,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expect(ReactNoop.getChildren()).toEqual([]);
 
-    ReactNoop.render(<App renderContent={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<App renderContent={true} />);
+      });
+    } else {
+      ReactNoop.render(<App renderContent={true} />);
+    }
     expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
@@ -535,6 +567,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate enableCache
+  // @gate experimental || !enableSyncDefaultUpdates
   it('keeps working on lower priority work after being pinged', async () => {
     // Advance the virtual time so that we're close to the edge of a bucket.
     ReactNoop.expire(149);
@@ -552,14 +585,26 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expect(ReactNoop.getChildren()).toEqual([]);
 
-    ReactNoop.render(<App showA={true} showB={false} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<App showA={true} showB={false} />);
+      });
+    } else {
+      ReactNoop.render(<App showA={true} showB={false} />);
+    }
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
     // Advance React's virtual time by enough to fall into a new async bucket,
     // but not enough to expire the suspense timeout.
     ReactNoop.expire(120);
-    ReactNoop.render(<App showA={true} showB={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<App showA={true} showB={true} />);
+      });
+    } else {
+      ReactNoop.render(<App showA={true} showB={true} />);
+    }
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'B', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
@@ -602,6 +647,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   // 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.
+  // @gate experimental || !enableSyncDefaultUpdates
   it('tries each subsequent level after suspending', async () => {
     const root = ReactNoop.createRoot();
 
@@ -636,17 +682,35 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Schedule an update at several distinct expiration times
     await ReactNoop.act(async () => {
-      root.render(<App step={1} shouldSuspend={true} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App step={1} shouldSuspend={true} />);
+        });
+      } else {
+        root.render(<App step={1} shouldSuspend={true} />);
+      }
       Scheduler.unstable_advanceTime(1000);
       expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
       interrupt();
 
-      root.render(<App step={2} shouldSuspend={true} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App step={2} shouldSuspend={true} />);
+        });
+      } else {
+        root.render(<App step={2} shouldSuspend={true} />);
+      }
       Scheduler.unstable_advanceTime(1000);
       expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
       interrupt();
 
-      root.render(<App step={3} shouldSuspend={true} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App step={3} shouldSuspend={true} />);
+        });
+      } else {
+        root.render(<App step={3} shouldSuspend={true} />);
+      }
       Scheduler.unstable_advanceTime(1000);
       expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
       interrupt();
@@ -864,22 +928,80 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
   });
 
-  // @gate enableCache
-  it('resolves successfully even if fallback render is pending', async () => {
+  // @gate experimental
+  it('does not expire for transitions', async () => {
     ReactNoop.render(
-      <>
+      <Fragment>
         <Suspense fallback={<Text text="Loading..." />} />
-      </>,
+      </Fragment>,
     );
     expect(Scheduler).toFlushAndYield([]);
+
+    React.unstable_startTransition(() => {
+      ReactNoop.render(
+        <Fragment>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" />
+          </Suspense>
+          <Text text="Sync" />
+        </Fragment>,
+      );
+    });
+
+    expect(Scheduler).toFlushAndYield([
+      // The async child suspends
+      'Suspend! [Async]',
+      'Loading...',
+      // Continue on the sibling
+      'Sync',
+    ]);
+    // The update hasn't expired yet, so we commit nothing.
+    expect(ReactNoop.getChildren()).toEqual([]);
+
+    // Advance both React's virtual time and Jest's timers,
+    // but not by enough to flush the promise or reach the true expiration time.
+    ReactNoop.expire(2000);
+    await advanceTimers(2000);
     expect(ReactNoop.getChildren()).toEqual([]);
+
+    // Even flushing won't yield a fallback in a transition.
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(ReactNoop.getChildren()).toEqual([]);
+
+    // Once the promise resolves, we render the suspended view
+    await resolveText('Async');
+    expect(Scheduler).toFlushAndYield(['Async', 'Sync']);
+    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+  });
+
+  // @gate enableCache
+  it('resolves successfully even if fallback render is pending', async () => {
     ReactNoop.render(
       <>
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Async" />
-        </Suspense>
+        <Suspense fallback={<Text text="Loading..." />} />
       </>,
     );
+    expect(Scheduler).toFlushAndYield([]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="Async" />
+            </Suspense>
+          </>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" />
+          </Suspense>
+        </>,
+      );
+    }
     expect(ReactNoop.flushNextYield()).toEqual(['Suspend! [Async]']);
 
     await resolveText('Async');
@@ -928,11 +1050,21 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
     expect(Scheduler).toFlushAndYield([]);
 
-    ReactNoop.render(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <AsyncText text="Async" />
-      </Suspense>,
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Async" />
+          </Suspense>,
+        );
+      });
+    } else {
+      ReactNoop.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="Async" />
+        </Suspense>,
+      );
+    }
     expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([]);
 
@@ -1725,6 +1857,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate enableCache
+  // @gate experimental || !enableSyncDefaultUpdates
   it('suspends for longer if something took a long (CPU bound) time to render', async () => {
     function Foo({renderContent}) {
       Scheduler.unstable_yieldValue('Foo');
@@ -1738,7 +1871,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYield(['Foo']);
 
-    ReactNoop.render(<Foo renderContent={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo renderContent={true} />);
+      });
+    } else {
+      ReactNoop.render(<Foo renderContent={true} />);
+    }
     Scheduler.unstable_advanceTime(100);
     await advanceTimers(100);
     // Start rendering
@@ -1767,12 +1906,22 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await advanceTimers(500);
     // No need to rerender.
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      // Since this is a transition, we never fallback.
+      expect(ReactNoop.getChildren()).toEqual([]);
+    } else {
+      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    }
 
     // Flush the promise completely
     await resolveText('A');
     // Renders successfully
-    expect(Scheduler).toFlushAndYield(['A']);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      // TODO: Why does this render Foo
+      expect(Scheduler).toFlushAndYield(['Foo', 'A']);
+    } else {
+      expect(Scheduler).toFlushAndYield(['A']);
+    }
     expect(ReactNoop.getChildren()).toEqual([span('A')]);
   });
 
@@ -1913,7 +2062,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYield(['Foo']);
 
-    ReactNoop.render(<Foo renderContent={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo renderContent={true} />);
+      });
+    } else {
+      ReactNoop.render(<Foo renderContent={true} />);
+    }
     expect(Scheduler).toFlushAndYieldThrough(['Foo']);
 
     // Advance some time.
@@ -1938,7 +2093,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // updates as way earlier in the past. This test ensures that we don't
     // use this assumption to add a very long JND.
     expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      // Transitions never fallback.
+      expect(ReactNoop.getChildren()).toEqual([]);
+    } else {
+      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+    }
   });
 
   // TODO: flip to "warns" when this is implemented again.
@@ -2223,7 +2383,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Foo', 'A']);
     expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
-    ReactNoop.render(<Foo showB={true} />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo showB={true} />);
+      });
+    } else {
+      ReactNoop.render(<Foo showB={true} />);
+    }
 
     expect(Scheduler).toFlushAndYield([
       'Foo',
@@ -2238,7 +2404,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     Scheduler.unstable_advanceTime(600);
     await advanceTimers(600);
 
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      // Transitions never fall back.
+      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    } else {
+      expect(ReactNoop.getChildren()).toEqual([
+        span('A'),
+        span('Loading B...'),
+      ]);
+    }
   });
 
   // @gate enableCache
@@ -2757,14 +2931,26 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await ReactNoop.act(async () => {
       // Update. Since showing a fallback would hide content that's already
       // visible, it should suspend for a JND without committing.
-      root.render(<App text="First update" />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App text="First update" />);
+        });
+      } else {
+        root.render(<App text="First update" />);
+      }
       expect(Scheduler).toFlushAndYield(['Suspend! [First update]']);
 
       // Should not display a fallback
       expect(root).toMatchRenderedOutput(<span prop="Initial" />);
 
       // Update again. This should also suspend for a JND.
-      root.render(<App text="Second update" />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App text="Second update" />);
+        });
+      } else {
+        root.render(<App text="Second update" />);
+      }
       expect(Scheduler).toFlushAndYield(['Suspend! [Second update]']);
 
       // Should not display a fallback
@@ -3540,6 +3726,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   // @gate experimental
   // @gate enableCache
+  // @gate !enableSyncDefaultUpdates
   it('regression: ping at high priority causes update to be dropped', async () => {
     const {useState, unstable_useTransition: useTransition} = React;
 
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index a2f6ed4bd04c..8d762f87b8fe 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -452,7 +452,11 @@ describe('updaters', () => {
     };
     const LowPriorityUpdater = () => {
       const [count, setCount] = React.useState(0);
-      triggerLowPriorityUpdate = () => setCount(prevCount => prevCount + 1);
+      triggerLowPriorityUpdate = () => {
+        React.unstable_startTransition(() => {
+          setCount(prevCount => prevCount + 1);
+        });
+      };
       Scheduler.unstable_yieldValue(`LowPriorityUpdater ${count}`);
       return <Yield value={`LowPriority ${count}`} />;
     };
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 14f7f0412c9d..4240b363330c 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -13,12 +13,19 @@
 // This test is *.internal so that it can import this shared file.
 import ReactVersion from 'shared/ReactVersion';
 
+// Hard-coding because importing will not work with bundle tests and to
+// avoid leaking exports for lanes that are only imported in this test.
+const ReactFiberLane = {
+  SyncLane: /*        */ 0b0000000000000000000000000000001,
+  DefaultLane: /*     */ 0b0000000000000000000000000010000,
+  TransitionLane1: /* */ 0b0000000000000000000000001000000,
+};
+
 describe('SchedulingProfiler', () => {
   let React;
   let ReactTestRenderer;
   let ReactNoop;
   let Scheduler;
-  let ReactFiberLane;
 
   let clearedMarks;
   let featureDetectionMarkName = null;
@@ -82,11 +89,6 @@ describe('SchedulingProfiler', () => {
 
     const SchedulingProfiler = require('react-reconciler/src/SchedulingProfiler');
     formatLanes = SchedulingProfiler.formatLanes;
-
-    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFiberLane = ReactFeatureFlags.enableNewReconciler
-      ? require('react-reconciler/src/ReactFiberLane.new')
-      : require('react-reconciler/src/ReactFiberLane.old');
   });
 
   afterEach(() => {
@@ -147,6 +149,7 @@ describe('SchedulingProfiler', () => {
   });
 
   // @gate enableSchedulingProfiler
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should mark render yields', async () => {
     function Bar() {
       Scheduler.unstable_yieldValue('Bar');
@@ -158,16 +161,33 @@ describe('SchedulingProfiler', () => {
       return <Bar />;
     }
 
-    ReactNoop.render(<Foo />);
-    // Do one step of work.
-    expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
-
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--render-yield',
-    ]);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactNoop.render(<Foo />);
+      });
+
+      // Do one step of work.
+      expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
+
+      expectMarksToEqual([
+        `--react-init-${ReactVersion}`,
+        `--schedule-render-${formatLanes(ReactFiberLane.TransitionLane1)}`,
+        `--render-start-${formatLanes(ReactFiberLane.TransitionLane1)}`,
+        '--render-yield',
+      ]);
+    } else {
+      ReactNoop.render(<Foo />);
+
+      // Do one step of work.
+      expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
+
+      expectMarksToEqual([
+        `--react-init-${ReactVersion}`,
+        `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
+        `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+        '--render-yield',
+      ]);
+    }
   });
 
   // @gate enableSchedulingProfiler
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index 6474be855b38..da59c153f43d 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -168,10 +168,18 @@ describe('SchedulingProfiler labels', () => {
       event.initEvent('mouseover', true, true);
       dispatchAndSetCurrentEvent(targetRef.current, event);
     });
-    expect(clearedMarks).toContain(
-      `--schedule-state-update-${formatLanes(
-        ReactFiberLane.InputContinuousLane,
-      )}-App`,
-    );
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      expect(clearedMarks).toContain(
+        `--schedule-state-update-${formatLanes(
+          ReactFiberLane.DefaultLane,
+        )}-App`,
+      );
+    } else {
+      expect(clearedMarks).toContain(
+        `--schedule-state-update-${formatLanes(
+          ReactFiberLane.InputContinuousLane,
+        )}-App`,
+      );
+    }
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index e9fc68985023..fd7ebbeb72c7 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -213,24 +213,45 @@ describe('useMutableSource', () => {
     const mutableSource = createMutableSource(source, param => param.version);
 
     act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.render(
+            <>
+              <Component
+                label="a"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+              <Component
+                label="b"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+            </>,
+            () => Scheduler.unstable_yieldValue('Sync effect'),
+          );
+        });
+      } else {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      }
       // Do enough work to read from one component
       expect(Scheduler).toFlushAndYieldThrough(['a:one']);
 
@@ -431,7 +452,13 @@ describe('useMutableSource', () => {
 
       // Changing values should schedule an update with React.
       // Start working on this update but don't finish it.
-      source.value = 'two';
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          source.value = 'two';
+        });
+      } else {
+        source.value = 'two';
+      }
       expect(Scheduler).toFlushAndYieldThrough(['a:two']);
 
       // Re-renders that occur before the update is processed
@@ -695,29 +722,57 @@ describe('useMutableSource', () => {
 
       // Because the store has not changed yet, there are no pending updates,
       // so it is considered safe to read from when we start this render.
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={getSnapshotA}
-            mutableSource={mutableSource}
-            subscribe={subscribeA}
-          />
-          <Component
-            label="b"
-            getSnapshot={getSnapshotB}
-            mutableSource={mutableSource}
-            subscribe={subscribeB}
-          />
-          <Component
-            label="c"
-            getSnapshot={getSnapshotB}
-            mutableSource={mutableSource}
-            subscribe={subscribeB}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.render(
+            <>
+              <Component
+                label="a"
+                getSnapshot={getSnapshotA}
+                mutableSource={mutableSource}
+                subscribe={subscribeA}
+              />
+              <Component
+                label="b"
+                getSnapshot={getSnapshotB}
+                mutableSource={mutableSource}
+                subscribe={subscribeB}
+              />
+              <Component
+                label="c"
+                getSnapshot={getSnapshotB}
+                mutableSource={mutableSource}
+                subscribe={subscribeB}
+              />
+            </>,
+            () => Scheduler.unstable_yieldValue('Sync effect'),
+          );
+        });
+      } else {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={getSnapshotA}
+              mutableSource={mutableSource}
+              subscribe={subscribeA}
+            />
+            <Component
+              label="b"
+              getSnapshot={getSnapshotB}
+              mutableSource={mutableSource}
+              subscribe={subscribeB}
+            />
+            <Component
+              label="c"
+              getSnapshot={getSnapshotB}
+              mutableSource={mutableSource}
+              subscribe={subscribeB}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      }
       expect(Scheduler).toFlushAndYieldThrough(['a:a:one', 'b:b:one']);
 
       // Mutating the source should trigger a tear detection on the next read,
@@ -808,22 +863,43 @@ describe('useMutableSource', () => {
 
     act(() => {
       // Start a render that uses the mutable source.
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-      );
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactNoop.render(
+            <>
+              <Component
+                label="a"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+              <Component
+                label="b"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+            </>,
+          );
+        });
+      } else {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+        );
+      }
       expect(Scheduler).toFlushAndYieldThrough(['a:one']);
 
       // Mutate source
@@ -1457,13 +1533,25 @@ describe('useMutableSource', () => {
       expect(root).toMatchRenderedOutput('a0');
 
       await act(async () => {
-        root.render(
-          <>
-            <Read getSnapshot={getSnapshotA} />
-            <Read getSnapshot={getSnapshotB} />
-            <Text text="c" />
-          </>,
-        );
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            root.render(
+              <>
+                <Read getSnapshot={getSnapshotA} />
+                <Read getSnapshot={getSnapshotB} />
+                <Text text="c" />
+              </>,
+            );
+          });
+        } else {
+          root.render(
+            <>
+              <Read getSnapshot={getSnapshotA} />
+              <Read getSnapshot={getSnapshotB} />
+              <Text text="c" />
+            </>,
+          );
+        }
 
         expect(Scheduler).toFlushAndYieldThrough(['a0', 'b0']);
         // Mutate in an event. This schedules a subscription update on a, which
@@ -1481,10 +1569,16 @@ describe('useMutableSource', () => {
           mutateB('b0');
         });
         // Finish the current render
-        expect(Scheduler).toFlushUntilNextPaint(['c']);
-        // a0 will re-render because of the mutation update. But it should show
-        // the latest value, not the intermediate one, to avoid tearing with b.
-        expect(Scheduler).toFlushUntilNextPaint(['a0']);
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          // Default sync will flush both without yielding
+          expect(Scheduler).toFlushUntilNextPaint(['c', 'a0']);
+        } else {
+          expect(Scheduler).toFlushUntilNextPaint(['c']);
+          // a0 will re-render because of the mutation update. But it should show
+          // the latest value, not the intermediate one, to avoid tearing with b.
+          expect(Scheduler).toFlushUntilNextPaint(['a0']);
+        }
+
         expect(root).toMatchRenderedOutput('a0b0c');
         // We should be done.
         expect(Scheduler).toFlushAndYield([]);
@@ -1591,7 +1685,13 @@ describe('useMutableSource', () => {
 
     await act(async () => {
       // Switch the parent and the child to read using the same config
-      root.render(<App parentConfig={configB} childConfig={configB} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App parentConfig={configB} childConfig={configB} />);
+        });
+      } else {
+        root.render(<App parentConfig={configB} childConfig={configB} />);
+      }
       // Start rendering the parent, but yield before rendering the child
       expect(Scheduler).toFlushAndYieldThrough(['Parent: 2']);
 
@@ -1602,25 +1702,41 @@ describe('useMutableSource', () => {
         source.valueB = '3';
       });
 
-      expect(Scheduler).toFlushAndYieldThrough([
-        // The partial render completes
-        'Child: 2',
-        'Commit: 2, 2',
-      ]);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        // In default sync mode, all of the updates flush sync.
+        expect(Scheduler).toFlushAndYieldThrough([
+          // The partial render completes
+          'Child: 2',
+          'Commit: 2, 2',
+          'Parent: 3',
+          'Child: 3',
+        ]);
 
-      // Now there are two pending mutations at different priorities. But they
-      // both read the same version of the mutable source, so we must render
-      // them simultaneously.
-      //
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Parent: 3',
-        // Demonstrates that we can yield here
-      ]);
-      expect(Scheduler).toFlushAndYield([
-        // Now finish the rest of the update
-        'Child: 3',
-        'Commit: 3, 3',
-      ]);
+        expect(Scheduler).toFlushAndYield([
+          // Now finish the rest of the update
+          'Commit: 3, 3',
+        ]);
+      } else {
+        expect(Scheduler).toFlushAndYieldThrough([
+          // The partial render completes
+          'Child: 2',
+          'Commit: 2, 2',
+        ]);
+
+        // Now there are two pending mutations at different priorities. But they
+        // both read the same version of the mutable source, so we must render
+        // them simultaneously.
+        //
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Parent: 3',
+          // Demonstrates that we can yield here
+        ]);
+        expect(Scheduler).toFlushAndYield([
+          // Now finish the rest of the update
+          'Child: 3',
+          'Commit: 3, 3',
+        ]);
+      }
     });
   });
 
@@ -1855,22 +1971,43 @@ describe('useMutableSource', () => {
 
         act(() => {
           // Start a render that uses the mutable source.
-          ReactNoop.render(
-            <>
-              <Component
-                label="a"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-              <Component
-                label="b"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-            </>,
-          );
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              ReactNoop.render(
+                <>
+                  <Component
+                    label="a"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                  <Component
+                    label="b"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                </>,
+              );
+            });
+          } else {
+            ReactNoop.render(
+              <>
+                <Component
+                  label="a"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+                <Component
+                  label="b"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+              </>,
+            );
+          }
           expect(Scheduler).toFlushAndYieldThrough(['a:one']);
 
           const PrevScheduler = Scheduler;
@@ -1915,22 +2052,43 @@ describe('useMutableSource', () => {
 
         act(() => {
           // Start a render that uses the mutable source.
-          ReactNoop.render(
-            <>
-              <Component
-                label="a"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-              <Component
-                label="b"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-            </>,
-          );
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              ReactNoop.render(
+                <>
+                  <Component
+                    label="a"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                  <Component
+                    label="b"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                </>,
+              );
+            });
+          } else {
+            ReactNoop.render(
+              <>
+                <Component
+                  label="a"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+                <Component
+                  label="b"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+              </>,
+            );
+          }
           expect(Scheduler).toFlushAndYieldThrough(['a:one']);
 
           const PrevScheduler = Scheduler;
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index f737994ad7e7..c26ab9deba11 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -262,7 +262,13 @@ describe('useMutableSourceHydration', () => {
     });
     expect(() => {
       act(() => {
-        root.render(<TestComponent />);
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            root.render(<TestComponent />);
+          });
+        } else {
+          root.render(<TestComponent />);
+        }
         expect(Scheduler).toFlushAndYieldThrough(['a:one']);
         source.value = 'two';
       });
@@ -316,22 +322,43 @@ describe('useMutableSourceHydration', () => {
     });
     expect(() => {
       act(() => {
-        root.render(
-          <>
-            <Component
-              label="0"
-              getSnapshot={getSnapshotA}
-              mutableSource={mutableSource}
-              subscribe={subscribeA}
-            />
-            <Component
-              label="1"
-              getSnapshot={getSnapshotB}
-              mutableSource={mutableSource}
-              subscribe={subscribeB}
-            />
-          </>,
-        );
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            root.render(
+              <>
+                <Component
+                  label="0"
+                  getSnapshot={getSnapshotA}
+                  mutableSource={mutableSource}
+                  subscribe={subscribeA}
+                />
+                <Component
+                  label="1"
+                  getSnapshot={getSnapshotB}
+                  mutableSource={mutableSource}
+                  subscribe={subscribeB}
+                />
+              </>,
+            );
+          });
+        } else {
+          root.render(
+            <>
+              <Component
+                label="0"
+                getSnapshot={getSnapshotA}
+                mutableSource={mutableSource}
+                subscribe={subscribeA}
+              />
+              <Component
+                label="1"
+                getSnapshot={getSnapshotB}
+                mutableSource={mutableSource}
+                subscribe={subscribeB}
+              />
+            </>,
+          );
+        }
         expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
         source.valueB = 'b:two';
       });
@@ -344,6 +371,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate experimental
+  // @gate !enableSyncDefaultUpdates
   it('should detect a tear during a higher priority interruption', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -386,7 +414,13 @@ describe('useMutableSourceHydration', () => {
 
     expect(() => {
       act(() => {
-        root.render(<TestComponent flag={1} />);
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            root.render(<TestComponent flag={1} />);
+          });
+        } else {
+          root.render(<TestComponent flag={1} />);
+        }
         expect(Scheduler).toFlushAndYieldThrough([1]);
 
         // Render an update which will be higher priority than the hydration.
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
index f83cbb8820be..1a4554573afd 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
@@ -73,6 +73,7 @@ describe('ReactTestRendererAsync', () => {
     expect(renderer.toJSON()).toEqual(['A:2', 'B:2', 'C:2']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('flushThrough flushes until the expected values is yielded', () => {
     function Child(props) {
       Scheduler.unstable_yieldValue(props.children);
@@ -87,9 +88,19 @@ describe('ReactTestRendererAsync', () => {
         </>
       );
     }
-    const renderer = ReactTestRenderer.create(<Parent step={1} />, {
-      unstable_isConcurrent: true,
-    });
+
+    let renderer;
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        renderer = ReactTestRenderer.create(<Parent step={1} />, {
+          unstable_isConcurrent: true,
+        });
+      });
+    } else {
+      renderer = ReactTestRenderer.create(<Parent step={1} />, {
+        unstable_isConcurrent: true,
+      });
+    }
 
     // Flush the first two siblings
     expect(Scheduler).toFlushAndYieldThrough(['A:1', 'B:1']);
@@ -101,6 +112,7 @@ describe('ReactTestRendererAsync', () => {
     expect(renderer.toJSON()).toEqual(['A:1', 'B:1', 'C:1']);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('supports high priority interruptions', () => {
     function Child(props) {
       Scheduler.unstable_yieldValue(props.children);
@@ -124,9 +136,18 @@ describe('ReactTestRendererAsync', () => {
       }
     }
 
-    const renderer = ReactTestRenderer.create(<Example step={1} />, {
-      unstable_isConcurrent: true,
-    });
+    let renderer;
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        renderer = ReactTestRenderer.create(<Example step={1} />, {
+          unstable_isConcurrent: true,
+        });
+      });
+    } else {
+      renderer = ReactTestRenderer.create(<Example step={1} />, {
+        unstable_isConcurrent: true,
+      });
+    }
 
     // Flush the some of the changes, but don't commit
     expect(Scheduler).toFlushAndYieldThrough(['A:1']);
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
index 249aeab17334..1a026d732497 100644
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
@@ -123,11 +123,21 @@ describe('ReactDOMTracing', () => {
         SchedulerTracing.unstable_trace('initialization', 0, () => {
           interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
           act(() => {
-            root.render(
-              <React.Profiler id="test" onRender={onRender}>
-                <App />
-              </React.Profiler>,
-            );
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                root.render(
+                  <React.Profiler id="test" onRender={onRender}>
+                    <App />
+                  </React.Profiler>,
+                );
+              });
+            } else {
+              root.render(
+                <React.Profiler id="test" onRender={onRender}>
+                  <App />
+                </React.Profiler>,
+              );
+            }
             expect(onInteractionTraced).toHaveBeenCalledTimes(1);
             expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
               interaction,
@@ -140,6 +150,7 @@ describe('ReactDOMTracing', () => {
             );
             expect(Scheduler).toFlushAndYieldThrough(['Child', 'Child:mount']);
             expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+
             expect(onRender).toHaveBeenCalledTimes(2);
             expect(onRender).toHaveLastRenderedWithInteractions(
               new Set([interaction]),
@@ -275,11 +286,21 @@ describe('ReactDOMTracing', () => {
         SchedulerTracing.unstable_trace('initialization', 0, () => {
           interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
           act(() => {
-            root.render(
-              <React.Profiler id="test" onRender={onRender}>
-                <App />
-              </React.Profiler>,
-            );
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                root.render(
+                  <React.Profiler id="test" onRender={onRender}>
+                    <App />
+                  </React.Profiler>,
+                );
+              });
+            } else {
+              root.render(
+                <React.Profiler id="test" onRender={onRender}>
+                  <App />
+                </React.Profiler>,
+              );
+            }
             expect(onInteractionTraced).toHaveBeenCalledTimes(1);
             expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
               interaction,
@@ -307,16 +328,13 @@ describe('ReactDOMTracing', () => {
         expect(
           onInteractionScheduledWorkCompleted,
         ).toHaveBeenLastNotifiedOfInteraction(interaction);
-        if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
-          expect(onRender).toHaveBeenCalledTimes(3);
-        } else {
-          // TODO: This is 4 instead of 3 because this update was scheduled at
-          // idle priority, and idle updates are slightly higher priority than
-          // offscreen work. So it takes two render passes to finish it. Profiler
-          // calls `onRender` for the first render even though everything
-          // bails out.
-          expect(onRender).toHaveBeenCalledTimes(4);
-        }
+
+        // TODO: This is 4 instead of 3 because this update was scheduled at
+        // idle priority, and idle updates are slightly higher priority than
+        // offscreen work. So it takes two render passes to finish it. Profiler
+        // calls `onRender` for the first render even though everything
+        // bails out.
+        expect(onRender).toHaveBeenCalledTimes(4);
         expect(onRender).toHaveLastRenderedWithInteractions(
           new Set([interaction]),
         );
@@ -503,7 +521,13 @@ describe('ReactDOMTracing', () => {
               scheduleUpdateWithHidden(),
             );
           });
-          scheduleUpdate();
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              scheduleUpdate();
+            });
+          } else {
+            scheduleUpdate();
+          }
           expect(interaction).not.toBeNull();
           expect(onRender).toHaveBeenCalledTimes(1);
           expect(onInteractionTraced).toHaveBeenCalledTimes(1);
@@ -580,7 +604,13 @@ describe('ReactDOMTracing', () => {
           SchedulerTracing.unstable_trace('initialization', 0, () => {
             interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
             // This render is only CPU bound. Nothing suspends.
-            root.render(<App />);
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                root.render(<App />);
+              });
+            } else {
+              root.render(<App />);
+            }
           });
 
           expect(Scheduler).toFlushAndYieldThrough(['A']);
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 6b0c02432544..02c7541e3837 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -246,6 +246,7 @@ describe('Profiler', () => {
         expect(callback).toHaveBeenCalledTimes(2);
       });
 
+      // @gate experimental || !enableSyncDefaultUpdates
       it('is not invoked until the commit phase', () => {
         const callback = jest.fn();
 
@@ -254,15 +255,29 @@ describe('Profiler', () => {
           return null;
         };
 
-        ReactTestRenderer.create(
-          <React.Profiler id="test" onRender={callback}>
-            <Yield value="first" />
-            <Yield value="last" />
-          </React.Profiler>,
-          {
-            unstable_isConcurrent: true,
-          },
-        );
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.unstable_startTransition(() => {
+            ReactTestRenderer.create(
+              <React.Profiler id="test" onRender={callback}>
+                <Yield value="first" />
+                <Yield value="last" />
+              </React.Profiler>,
+              {
+                unstable_isConcurrent: true,
+              },
+            );
+          });
+        } else {
+          ReactTestRenderer.create(
+            <React.Profiler id="test" onRender={callback}>
+              <Yield value="first" />
+              <Yield value="last" />
+            </React.Profiler>,
+            {
+              unstable_isConcurrent: true,
+            },
+          );
+        }
 
         // Times are logged until a render is committed.
         expect(Scheduler).toFlushAndYieldThrough(['first']);
@@ -796,6 +811,7 @@ describe('Profiler', () => {
       });
 
       describe('with regard to interruptions', () => {
+        // @gate experimental || !enableSyncDefaultUpdates
         it('should accumulate actual time after a scheduling interruptions', () => {
           const callback = jest.fn();
 
@@ -808,13 +824,25 @@ describe('Profiler', () => {
           Scheduler.unstable_advanceTime(5); // 0 -> 5
 
           // Render partially, but run out of time before completing.
-          ReactTestRenderer.create(
-            <React.Profiler id="test" onRender={callback}>
-              <Yield renderTime={2} />
-              <Yield renderTime={3} />
-            </React.Profiler>,
-            {unstable_isConcurrent: true},
-          );
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              ReactTestRenderer.create(
+                <React.Profiler id="test" onRender={callback}>
+                  <Yield renderTime={2} />
+                  <Yield renderTime={3} />
+                </React.Profiler>,
+                {unstable_isConcurrent: true},
+              );
+            });
+          } else {
+            ReactTestRenderer.create(
+              <React.Profiler id="test" onRender={callback}>
+                <Yield renderTime={2} />
+                <Yield renderTime={3} />
+              </React.Profiler>,
+              {unstable_isConcurrent: true},
+            );
+          }
           expect(Scheduler).toFlushAndYieldThrough(['Yield:2']);
           expect(callback).toHaveBeenCalledTimes(0);
 
@@ -830,6 +858,7 @@ describe('Profiler', () => {
           expect(call[5]).toBe(10); // commit time
         });
 
+        // @gate experimental || !enableSyncDefaultUpdates
         it('should not include time between frames', () => {
           const callback = jest.fn();
 
@@ -843,16 +872,31 @@ describe('Profiler', () => {
 
           // Render partially, but don't finish.
           // This partial render should take 5ms of simulated time.
-          ReactTestRenderer.create(
-            <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>,
-            {unstable_isConcurrent: true},
-          );
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              ReactTestRenderer.create(
+                <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>,
+                {unstable_isConcurrent: true},
+              );
+            });
+          } else {
+            ReactTestRenderer.create(
+              <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>,
+              {unstable_isConcurrent: true},
+            );
+          }
           expect(Scheduler).toFlushAndYieldThrough(['Yield:5']);
           expect(callback).toHaveBeenCalledTimes(0);
 
@@ -880,6 +924,7 @@ describe('Profiler', () => {
           expect(outerCall[5]).toBe(87); // commit time
         });
 
+        // @gate experimental || !enableSyncDefaultUpdates
         it('should report the expected times when a high-pri update replaces a mount in-progress', () => {
           const callback = jest.fn();
 
@@ -893,13 +938,26 @@ describe('Profiler', () => {
 
           // Render a partially update, but don't finish.
           // This partial render should take 10ms of simulated time.
-          const renderer = ReactTestRenderer.create(
-            <React.Profiler id="test" onRender={callback}>
-              <Yield renderTime={10} />
-              <Yield renderTime={20} />
-            </React.Profiler>,
-            {unstable_isConcurrent: true},
-          );
+          let renderer;
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              renderer = ReactTestRenderer.create(
+                <React.Profiler id="test" onRender={callback}>
+                  <Yield renderTime={10} />
+                  <Yield renderTime={20} />
+                </React.Profiler>,
+                {unstable_isConcurrent: true},
+              );
+            });
+          } else {
+            renderer = ReactTestRenderer.create(
+              <React.Profiler id="test" onRender={callback}>
+                <Yield renderTime={10} />
+                <Yield renderTime={20} />
+              </React.Profiler>,
+              {unstable_isConcurrent: true},
+            );
+          }
           expect(Scheduler).toFlushAndYieldThrough(['Yield:10']);
           expect(callback).toHaveBeenCalledTimes(0);
 
@@ -933,6 +991,7 @@ describe('Profiler', () => {
           expect(callback).toHaveBeenCalledTimes(0);
         });
 
+        // @gate experimental || !enableSyncDefaultUpdates
         it('should report the expected times when a high-priority update replaces a low-priority update', () => {
           const callback = jest.fn();
 
@@ -968,13 +1027,25 @@ describe('Profiler', () => {
 
           // Render a partially update, but don't finish.
           // This partial render should take 3ms of simulated time.
-          renderer.update(
-            <React.Profiler id="test" onRender={callback}>
-              <Yield renderTime={3} />
-              <Yield renderTime={5} />
-              <Yield renderTime={9} />
-            </React.Profiler>,
-          );
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              renderer.update(
+                <React.Profiler id="test" onRender={callback}>
+                  <Yield renderTime={3} />
+                  <Yield renderTime={5} />
+                  <Yield renderTime={9} />
+                </React.Profiler>,
+              );
+            });
+          } else {
+            renderer.update(
+              <React.Profiler id="test" onRender={callback}>
+                <Yield renderTime={3} />
+                <Yield renderTime={5} />
+                <Yield renderTime={9} />
+              </React.Profiler>,
+            );
+          }
           expect(Scheduler).toFlushAndYieldThrough(['Yield:3']);
           expect(callback).toHaveBeenCalledTimes(0);
 
@@ -1014,6 +1085,7 @@ describe('Profiler', () => {
           expect(callback).toHaveBeenCalledTimes(1);
         });
 
+        // @gate experimental || !enableSyncDefaultUpdates
         it('should report the expected times when a high-priority update interrupts a low-priority update', () => {
           const callback = jest.fn();
 
@@ -1080,7 +1152,13 @@ describe('Profiler', () => {
 
           // Render a partially update, but don't finish.
           // This partial render will take 10ms of actual render time.
-          first.setState({renderTime: 10});
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.unstable_startTransition(() => {
+              first.setState({renderTime: 10});
+            });
+          } else {
+            first.setState({renderTime: 10});
+          }
           expect(Scheduler).toFlushAndYieldThrough(['FirstComponent:10']);
           expect(callback).toHaveBeenCalledTimes(0);
 
@@ -3343,6 +3421,7 @@ describe('Profiler', () => {
       ).toHaveBeenLastNotifiedOfInteraction(interaction);
     });
 
+    // @gate experimental || !enableSyncDefaultUpdates
     it('should associate traced events with their subsequent commits', () => {
       let instance = null;
 
@@ -3459,10 +3538,19 @@ describe('Profiler', () => {
           interactionOne.name,
           Scheduler.unstable_now(),
           () => {
-            instance.setState({count: 1});
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                instance.setState({count: 1});
 
-            // Update state again to verify our traced interaction isn't registered twice
-            instance.setState({count: 2});
+                // Update state again to verify our traced interaction isn't registered twice
+                instance.setState({count: 2});
+              });
+            } else {
+              instance.setState({count: 1});
+
+              // Update state again to verify our traced interaction isn't registered twice
+              instance.setState({count: 2});
+            }
 
             // The scheduler/tracing package will notify of work started for the default thread,
             // But React shouldn't notify until it's been flushed.
@@ -3655,6 +3743,7 @@ describe('Profiler', () => {
       expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
     });
 
+    // @gate experimental || !enableSyncDefaultUpdates
     it('should report the expected times when a high-priority update interrupts a low-priority update', () => {
       const onPostCommit = jest.fn(() => {
         Scheduler.unstable_yieldValue('onPostCommit');
@@ -3715,7 +3804,13 @@ describe('Profiler', () => {
           Scheduler.unstable_now(),
           () => {
             // Render a partially update, but don't finish.
-            first.setState({count: 1});
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                first.setState({count: 1});
+              });
+            } else {
+              first.setState({count: 1});
+            }
 
             expect(onWorkScheduled).toHaveBeenCalled();
             expect(onWorkScheduled.mock.calls[0][0]).toMatchInteractions([
@@ -4590,6 +4685,7 @@ describe('Profiler', () => {
         ).toMatchInteraction(initialRenderInteraction);
       });
 
+      // @gate experimental || !enableSyncDefaultUpdates
       it('handles high-pri renderers between suspended and resolved (async) trees', async () => {
         // Set up an initial shell. We need to set this up before the test sceanrio
         // because we want initial render to suspend on navigation to the initial state.
@@ -4614,14 +4710,27 @@ describe('Profiler', () => {
           initialRenderInteraction.name,
           initialRenderInteraction.timestamp,
           () => {
-            renderer.update(
-              <React.Profiler id="app" onCommit={onCommit}>
-                <React.Suspense fallback={<Text text="loading" />}>
-                  <AsyncText text="loaded" ms={100} />
-                </React.Suspense>
-                <Text text="initial" />
-              </React.Profiler>,
-            );
+            if (gate(flags => flags.enableSyncDefaultUpdates)) {
+              React.unstable_startTransition(() => {
+                renderer.update(
+                  <React.Profiler id="app" onCommit={onCommit}>
+                    <React.Suspense fallback={<Text text="loading" />}>
+                      <AsyncText text="loaded" ms={100} />
+                    </React.Suspense>
+                    <Text text="initial" />
+                  </React.Profiler>,
+                );
+              });
+            } else {
+              renderer.update(
+                <React.Profiler id="app" onCommit={onCommit}>
+                  <React.Suspense fallback={<Text text="loading" />}>
+                    <AsyncText text="loaded" ms={100} />
+                  </React.Suspense>
+                  <Text text="initial" />
+                </React.Profiler>,
+              );
+            }
           },
         );
         expect(Scheduler).toFlushAndYield([
diff --git a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
index 33454da6649d..bd3f168af4ee 100644
--- a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
@@ -178,6 +178,7 @@ describe('ReactProfiler DevTools integration', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('regression test: #17159', () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -195,7 +196,13 @@ describe('ReactProfiler DevTools integration', () => {
     // for updates.
     Scheduler.unstable_advanceTime(10000);
     // Schedule an update.
-    root.update(<Text text="B" />);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        root.update(<Text text="B" />);
+      });
+    } else {
+      root.update(<Text text="B" />);
+    }
 
     // Update B should not instantly expire.
     expect(Scheduler).toFlushAndYieldThrough([]);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 0729d53d7f3d..c8c2375babc9 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -170,3 +170,5 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 
 export const enableLazyContextPropagation = false;
+
+export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 826afbc1c9e1..47a2ea6ee2ab 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -60,6 +60,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableSyncDefaultUpdates = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 99fbcd61b5be..18375388be0a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableSyncDefaultUpdates = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 72a390ca9cd7..d7605e5ebb44 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableSyncDefaultUpdates = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 16243e404611..516d578b0d57 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableSyncDefaultUpdates = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 190d006b27fa..7bbc30f7cb46 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableSyncDefaultUpdates = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 61a48fbbd5bc..bd4137d3e7cb 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableSyncDefaultUpdates = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 71e77cf6971a..dacb018e3bea 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -59,6 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableSyncDefaultUpdates = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 9b9ec4310c9c..d0fc8e617706 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -59,3 +59,4 @@ export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
+export const enableSyncDefaultUpdates = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index eed614e4ae7e..871d4cc48ff8 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -34,6 +34,7 @@ export const {
   disableSchedulerTimeoutInWorkLoop,
   enableLazyContextPropagation,
   deletedTreeCleanUpLevel,
+  enableSyncDefaultUpdates,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
diff --git a/packages/use-subscription/src/__tests__/useSubscription-test.js b/packages/use-subscription/src/__tests__/useSubscription-test.js
index 6e0a9e504566..cfb082dfd2f6 100644
--- a/packages/use-subscription/src/__tests__/useSubscription-test.js
+++ b/packages/use-subscription/src/__tests__/useSubscription-test.js
@@ -262,6 +262,7 @@ describe('useSubscription', () => {
     expect(subscriptions).toHaveLength(2);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should ignore values emitted by a new subscribable until the commit phase', () => {
     const log = [];
 
@@ -331,7 +332,14 @@ describe('useSubscription', () => {
 
     // Start React update, but don't finish
     act(() => {
-      renderer.update(<Parent observed={observableB} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          renderer.update(<Parent observed={observableB} />);
+        });
+      } else {
+        renderer.update(<Parent observed={observableB} />);
+      }
+
       expect(Scheduler).toFlushAndYieldThrough(['Child: b-0']);
       expect(log).toEqual(['Parent.componentDidMount']);
 
@@ -362,6 +370,7 @@ describe('useSubscription', () => {
     ]);
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should not drop values emitted between updates', () => {
     const log = [];
 
@@ -432,7 +441,13 @@ describe('useSubscription', () => {
 
     // Start React update, but don't finish
     act(() => {
-      renderer.update(<Parent observed={observableB} />);
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          renderer.update(<Parent observed={observableB} />);
+        });
+      } else {
+        renderer.update(<Parent observed={observableB} />);
+      }
       expect(Scheduler).toFlushAndYieldThrough(['Child: b-0']);
       expect(log).toEqual([]);
 
@@ -561,6 +576,7 @@ describe('useSubscription', () => {
     Scheduler.unstable_flushAll();
   });
 
+  // @gate experimental || !enableSyncDefaultUpdates
   it('should not tear if a mutation occurs during a concurrent update', () => {
     const input = document.createElement('input');
 
@@ -608,9 +624,21 @@ describe('useSubscription', () => {
       // Interrupt with a second mutation "C" -> "D".
       // This update will not be eagerly evaluated,
       // but useSubscription() should eagerly close over the updated value to avoid tearing.
-      mutate('C');
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          mutate('C');
+        });
+      } else {
+        mutate('C');
+      }
       expect(Scheduler).toFlushAndYieldThrough(['render:first:C']);
-      mutate('D');
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          mutate('D');
+        });
+      } else {
+        mutate('D');
+      }
       expect(Scheduler).toFlushAndYield([
         'render:second:C',
         'render:first:D',

From 343710c9230d643ec442acef4634e380c1f0bce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Sat, 10 Apr 2021 15:50:42 -0400
Subject: [PATCH 0425/1603] [Fizz] Fragments and Iterable support (#21228)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 16 +--
 packages/react-server/src/ReactFizzServer.js  | 97 ++++++++++++++++++-
 2 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 0b69bf72231a..862c540c3b9f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -351,10 +351,12 @@ describe('ReactDOMFizzServer', () => {
     await act(async () => {
       const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
         <Suspense fallback={<Text text="Loading A..." />}>
-          <Text text="This will show A: " />
-          <div>
-            <AsyncText text="A" />
-          </div>
+          <>
+            <Text text="This will show A: " />
+            <div>
+              <AsyncText text="A" />
+            </div>
+          </>
         </Suspense>,
         writableA,
         {
@@ -432,11 +434,11 @@ describe('ReactDOMFizzServer', () => {
     }
 
     function AsyncPath({id}) {
-      return <path id={readText(id)}>{[]}</path>;
+      return <path id={readText(id)} />;
     }
 
     function AsyncMi({id}) {
-      return <mi id={readText(id)}>{[]}</mi>;
+      return <mi id={readText(id)} />;
     }
 
     function App() {
@@ -601,7 +603,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('can stream into an SVG container', async () => {
     function AsyncPath({id}) {
-      return <path id={readText(id)}>{[]}</path>;
+      return <path id={readText(id)} />;
     }
 
     function App() {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 90053ceb0251..3664e7ba4883 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -62,6 +62,12 @@ import {
   REACT_PORTAL_TYPE,
   REACT_LAZY_TYPE,
   REACT_SUSPENSE_TYPE,
+  REACT_LEGACY_HIDDEN_TYPE,
+  REACT_DEBUG_TRACING_MODE_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_FRAGMENT_TYPE,
 } from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -521,6 +527,8 @@ const didWarnAboutContextTypeOnFunctionComponent = {};
 const didWarnAboutGetDerivedStateOnFunctionComponent = {};
 let didWarnAboutReassigningProps = false;
 const didWarnAboutDefaultPropsOnFunctionComponent = {};
+let didWarnAboutGenerators = false;
+let didWarnAboutMaps = false;
 
 // This would typically be a function component but we still support module pattern
 // components for some reason.
@@ -701,10 +709,67 @@ function renderElement(
     }
   } else if (typeof type === 'string') {
     renderHostElement(request, task, type, props);
-  } else if (type === REACT_SUSPENSE_TYPE) {
-    renderSuspenseBoundary(request, task, props);
   } else {
-    throw new Error('Not yet implemented element type.');
+    switch (type) {
+      // TODO: 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: Add REACT_OFFSCREEN_TYPE here too with the same capability.
+      case REACT_LEGACY_HIDDEN_TYPE:
+      case REACT_DEBUG_TRACING_MODE_TYPE:
+      case REACT_STRICT_MODE_TYPE:
+      case REACT_PROFILER_TYPE:
+      case REACT_SUSPENSE_LIST_TYPE: // TODO: SuspenseList should control the boundaries.
+      case REACT_FRAGMENT_TYPE: {
+        renderNodeDestructive(request, task, props.children);
+        break;
+      }
+      case REACT_SUSPENSE_TYPE: {
+        renderSuspenseBoundary(request, task, props);
+        break;
+      }
+      default: {
+        throw new Error('Not yet implemented element type.');
+      }
+    }
+  }
+}
+
+function validateIterable(iterable, iteratorFn: Function): void {
+  if (__DEV__) {
+    // We don't support rendering Generators because it's a mutation.
+    // See https://github.com/facebook/react/issues/12995
+    if (
+      typeof Symbol === 'function' &&
+      // $FlowFixMe Flow doesn't know about toStringTag
+      iterable[Symbol.toStringTag] === 'Generator'
+    ) {
+      if (!didWarnAboutGenerators) {
+        console.error(
+          'Using Generators as children is unsupported and will likely yield ' +
+            'unexpected results because enumerating a generator mutates it. ' +
+            'You may convert it to an array with `Array.from()` or the ' +
+            '`[...spread]` operator before rendering. Keep in mind ' +
+            'you might need to polyfill these features for older browsers.',
+        );
+      }
+      didWarnAboutGenerators = true;
+    }
+
+    // Warn about using Maps as children
+    if ((iterable: any).entries === iteratorFn) {
+      if (!didWarnAboutMaps) {
+        console.error(
+          'Using Maps as children is not supported. ' +
+            'Use an array of keyed ReactElements instead.',
+        );
+      }
+      didWarnAboutMaps = true;
+    }
   }
 }
 
@@ -756,7 +821,30 @@ function renderNodeDestructive(
 
     const iteratorFn = getIteratorFn(node);
     if (iteratorFn) {
-      throw new Error('Not yet implemented node type.');
+      if (__DEV__) {
+        validateIterable(node, iteratorFn());
+      }
+      const iterator = iteratorFn.call(node);
+      if (iterator) {
+        let step = iterator.next();
+        // If there are not entries, we need to push an empty so we start by checking that.
+        if (!step.done) {
+          do {
+            // Recursively render the rest. 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, step.value);
+            step = iterator.next();
+          } while (!step.done);
+          return;
+        }
+      }
+      pushEmpty(
+        task.blockedSegment.chunks,
+        request.responseState,
+        task.assignID,
+      );
+      task.assignID = null;
     }
 
     const childString = Object.prototype.toString.call(node);
@@ -805,6 +893,7 @@ function renderNodeDestructive(
 
   // Any other type is assumed to be empty.
   pushEmpty(task.blockedSegment.chunks, request.responseState, task.assignID);
+  task.assignID = null;
 }
 
 function spawnNewSuspendedTask(

From bb88ce95a87934a655ef842af776c164391131ac Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 11 Apr 2021 04:09:41 -0500
Subject: [PATCH 0426/1603] Bugfix: Don't rely on `finishedLanes` for passive
 effects (#21233)

I recently started using `pendingPassiveEffectsLanes` to check if there were any pending
passive effects (530027a). `pendingPassiveEffectsLanes` is the value of
`root.finishedLanes` at the beginning of the commit phase. When there
are pending passive effects, it should always be a non-zero value,
because it represents the lanes used to render the effects.

But it turns out that `root.finishedLanes` isn't always correct.
Sometimes it's `NoLanes` even when there's a new commit.

I found this while investigating an internal bug report. The only repro
I could get was via a headless e2e test runner; I couldn't get one in an
actual browser, or other interactive environment. I used the e2e test to
bisect and confirm the fix. But I don't know yet know how to write a
regression test for the precise underlying scenario. I can probably
reverse engineer one by studying the code; after a quick glance
at `performConcurrentWorkOnRoot` and `performSyncWorkOnRoot`, it's not
hard to see how this might happen.

In the meantime, I'll revert the recent change that exposed the bug.

I was surprised that this had never come up before, since the code that
assigns `root.finishedLanes` is in an extremely hot path, and it hasn't
changed in a while. The reason is that, before 530027a,
`root.finishedLanes` was only used by the DevTools profiler, which is
probably why we had never noticed any issues. In addition to fixing the
inconsistency, we might also consider making `finishedLanes` a
profiling-only field.
---
 .../react-reconciler/src/ReactFiberWorkLoop.new.js     | 10 +++++++++-
 .../react-reconciler/src/ReactFiberWorkLoop.old.js     | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index df1b2653e204..bd65591558be 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2131,7 +2131,12 @@ function commitRootImpl(root, renderPriorityLevel) {
 
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
-  if (pendingPassiveEffectsLanes !== NoLanes) {
+  // TODO: Combine this check with the one in flushPassiveEFfectsImpl. We should
+  // probably just combine the two functions. 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.
+  if (rootWithPendingPassiveEffects !== null) {
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
@@ -2169,6 +2174,9 @@ function flushPassiveEffectsImpl() {
   const root = rootWithPendingPassiveEffects;
   const lanes = pendingPassiveEffectsLanes;
   rootWithPendingPassiveEffects = null;
+  // TODO: This is sometimes out of sync with rootWithPendingPassiveEffects.
+  // 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.
   pendingPassiveEffectsLanes = NoLanes;
 
   invariant(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 07f8a38b8bc0..6df35c9bf516 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2131,7 +2131,12 @@ function commitRootImpl(root, renderPriorityLevel) {
 
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
-  if (pendingPassiveEffectsLanes !== NoLanes) {
+  // TODO: Combine this check with the one in flushPassiveEFfectsImpl. We should
+  // probably just combine the two functions. 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.
+  if (rootWithPendingPassiveEffects !== null) {
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
@@ -2169,6 +2174,9 @@ function flushPassiveEffectsImpl() {
   const root = rootWithPendingPassiveEffects;
   const lanes = pendingPassiveEffectsLanes;
   rootWithPendingPassiveEffects = null;
+  // TODO: This is sometimes out of sync with rootWithPendingPassiveEffects.
+  // 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.
   pendingPassiveEffectsLanes = NoLanes;
 
   invariant(

From 9d48779b362ef773da50fef95af6998b560c75c0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 11 Apr 2021 14:59:52 -0400
Subject: [PATCH 0427/1603] Fixed broken feature flag import for DT inline
 package (#21237)

---
 packages/react-devtools-inline/package.json      | 2 +-
 packages/react-devtools-inline/webpack.config.js | 6 +++++-
 packages/react-devtools/CHANGELOG.md             | 4 ++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 6ad9bf82976d..a7a4525ccbca 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 98920b3508c1..6be627a6262b 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -33,11 +33,15 @@ module.exports = {
     react: 'react',
     // TODO: Once this package is published, remove the external
     // 'react-debug-tools': 'react-debug-tools',
-    'react-devtools-feature-flags': resolveFeatureFlags('inline'),
     'react-dom': 'react-dom',
     'react-is': 'react-is',
     scheduler: 'scheduler',
   },
+  resolve: {
+    alias: {
+      'react-devtools-feature-flags': resolveFeatureFlags('inline'),
+    },
+  },
   optimization: {
     minimize: false,
   },
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index d32bff0dec21..1e9df0db7c0d 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,10 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 4.11.1 (April 11, 2021)
+#### Bugfix
+* Fixed broken import in `react-devtools-inline` for feature flags file ([bvaughn](https://github.com/bvaughn) in [#21235](https://github.com/facebook/react/issues/21235))
+
 ## 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))

From dd8552ae0d82afed66fec649ee5c044c69c65e92 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 12 Apr 2021 11:49:26 -0500
Subject: [PATCH 0428/1603] yarn test: Default to bleeding edge configuration
 (#21238)

My personal workflow is to develop against the www-modern release
channel, with the variant flags enabled, because it encompasses the
largest set of features. Then I rely on CI to run the tests against
all the other configurations.

So in practice, I almost always run

```
yarn test -r=www-modern --variant TEST_FILE
```

instead of

```
yarn test TEST_FILE
```

So, I've updated the `yarn test` command to use those options
by default.
---
 .circleci/config.yml     | 32 ++++++++++++++++----------------
 scripts/jest/jest-cli.js | 20 +++++++++++++-------
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2cf2a93a8f06..9bfc78e5d32f 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -462,14 +462,14 @@ workflows:
                 - "-r=stable --env=production"
                 - "-r=experimental --env=development"
                 - "-r=experimental --env=production"
-                - "-r=www-classic --env=development"
-                - "-r=www-classic --env=production"
-                - "-r=www-classic --env=development --variant"
-                - "-r=www-classic --env=production --variant"
-                - "-r=www-modern --env=development"
-                - "-r=www-modern --env=production"
-                - "-r=www-modern --env=development --variant"
-                - "-r=www-modern --env=production --variant"
+                - "-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: Test more persistent configurations?
                 - '-r=stable --env=development --persistent'
@@ -497,14 +497,14 @@ workflows:
                 - "--project=devtools -r=experimental"
 
                 # TODO: Update test config to support www build tests
-                # - "-r=www-classic --env=development"
-                # - "-r=www-classic --env=production"
-                # - "-r=www-classic --env=development --variant"
-                # - "-r=www-classic --env=production --variant"
-                # - "-r=www-modern --env=development"
-                # - "-r=www-modern --env=production"
-                # - "-r=www-modern --env=development --variant"
-                # - "-r=www-modern --env=production --variant"
+                # - "-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: Test more persistent configurations?
       - get_base_build:
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 76fdd7e67581..3edd521b37d1 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -44,7 +44,7 @@ const argv = yargs
       describe: 'Run with the given release channel.',
       requiresArg: true,
       type: 'string',
-      default: 'experimental',
+      default: 'www-modern',
       choices: ['experimental', 'stable', 'www-classic', 'www-modern'],
     },
     env: {
@@ -71,7 +71,6 @@ const argv = yargs
       describe: 'Run with www variant set to true.',
       requiresArg: false,
       type: 'boolean',
-      default: false,
     },
     build: {
       alias: 'b',
@@ -161,11 +160,18 @@ function validateOptions() {
     }
   }
 
-  if (argv.variant && !isWWWConfig()) {
-    logError(
-      'Variant is only supported for the www release channels. Update these options to continue.'
-    );
-    success = false;
+  if (isWWWConfig()) {
+    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) {

From 686b635b7141511a7bbe751430f6680fc5cca2e2 Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshua.gross@gmail.com>
Date: Mon, 12 Apr 2021 11:10:51 -0700
Subject: [PATCH 0429/1603] Prevent reading canonical property of null (#21242)

* Prevent reading canonical property of null

* prettier
---
 .../src/ReactFabricGlobalResponderHandler.js                 | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
index 68a0b424ba34..e9aae2e4fd26 100644
--- a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
+++ b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
@@ -13,7 +13,10 @@ import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateI
 const ReactFabricGlobalResponderHandler = {
   onChange: function(from: any, to: any, blockNativeResponder: boolean) {
     const fromOrTo = from || to;
-    const isFabric = !!fromOrTo.stateNode.canonical._internalInstanceHandle;
+    const fromOrToStateNode = fromOrTo && fromOrTo.stateNode;
+    const isFabric = !!(
+      fromOrToStateNode && fromOrToStateNode.canonical._internalInstanceHandle
+    );
 
     if (isFabric) {
       // Noop for now until setJSResponder/clearJSResponder are supported in Fabric

From 84c06fef8168e779d15cc9450f67888445f7b4f4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 12 Apr 2021 17:07:14 -0400
Subject: [PATCH 0430/1603] Add createBridge and createStore exports to
 react-devtools-inline (for Replay integration) (#21032)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 +-
 .../edge/manifest.json                        |  4 +-
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/README.md      | 34 +++++++++++
 packages/react-devtools-inline/package.json   |  2 +-
 .../react-devtools-inline/src/frontend.js     | 57 ++++++++++++++-----
 packages/react-devtools/CHANGELOG.md          |  7 ++-
 packages/react-devtools/package.json          |  4 +-
 9 files changed, 91 insertions(+), 25 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 9a8fff2e8e2c..39947c4177b9 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 0ce9f5470ded..64f3c0afe23e 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.11.0",
-  "version_name": "4.11.0",
+  "version": "4.12.0",
+  "version_name": "4.12.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index be01541b8159..d78048924e42 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.11.0",
-  "version_name": "4.11.0",
+  "version": "4.12.0",
+  "version_name": "4.12.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 9cb050fa8556..fa8dc48ca413 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.11.0",
+  "version": "4.12.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index eecd3f99eba0..c523ed3107ec 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -153,6 +153,40 @@ iframe.onload = () => {
 };
 ```
 
+### Advanced integration with custom "wall"
+
+Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/).
+
+```js
+import {
+  createBridge,
+  createStore,
+  initialize as createDevTools,
+} from "react-devtools-inline/frontend";
+
+// Custom Wall implementation enables serializing data
+// using an API other than window.postMessage()
+// For example...
+const wall = {
+  emit() {},
+  listen(listener) {
+    wall._listener = listener;
+  },
+  async send(event, payload) {
+    const response = await fetch(...).json();
+    wall._listener(response);
+  },
+};
+
+// Create a Bridge and Store that use the custom Wall.
+const bridge = createBridge(target, wall);
+const store = createStore(bridge);
+const DevTools = createDevTools(target, { bridge, store });
+
+// Render DevTools with it.
+<DevTools {...otherProps} />;
+```
+
 ## Local development
 You can also build and test this package from source.
 
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index a7a4525ccbca..334c65e51eac 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.11.1",
+  "version": "4.12.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 3972f1789ab7..ebd57022e692 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -16,11 +16,47 @@ import {
   MESSAGE_TYPE_SAVED_PREFERENCES,
 } from './constants';
 
+import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
+export function createStore(bridge: FrontendBridge): Store {
+  return new Store(bridge, {supportsTraceUpdates: true});
+}
+
+export function createBridge(
+  contentWindow: window,
+  wall?: Wall,
+): FrontendBridge {
+  if (wall == null) {
+    wall = {
+      listen(fn) {
+        const onMessage = ({data}) => {
+          fn(data);
+        };
+        window.addEventListener('message', onMessage);
+        return () => {
+          window.removeEventListener('message', onMessage);
+        };
+      },
+      send(event: string, payload: any, transferable?: Array<any>) {
+        contentWindow.postMessage({event, payload}, '*', transferable);
+      },
+    };
+  }
+
+  return (new Bridge(wall): FrontendBridge);
+}
+
 export function initialize(
   contentWindow: window,
+  {
+    bridge,
+    store,
+  }: {|
+    bridge?: FrontendBridge,
+    store?: Store,
+  |} = {},
 ): React.AbstractComponent<Props, mixed> {
   const onGetSavedPreferencesMessage = ({data, source}) => {
     if (source === 'react-devtools-content-script') {
@@ -54,22 +90,13 @@ export function initialize(
 
   window.addEventListener('message', onGetSavedPreferencesMessage);
 
-  const bridge: FrontendBridge = new Bridge({
-    listen(fn) {
-      const onMessage = ({data}) => {
-        fn(data);
-      };
-      window.addEventListener('message', onMessage);
-      return () => {
-        window.removeEventListener('message', onMessage);
-      };
-    },
-    send(event: string, payload: any, transferable?: Array<any>) {
-      contentWindow.postMessage({event, payload}, '*', transferable);
-    },
-  });
+  if (bridge == null) {
+    bridge = createBridge();
+  }
 
-  const store: Store = new Store(bridge, {supportsTraceUpdates: true});
+  if (store == null) {
+    store = createStore(bridge);
+  }
 
   const ForwardRef = forwardRef<Props, mixed>((props, ref) => (
     <DevTools ref={ref} bridge={bridge} store={store} {...props} />
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 1e9df0db7c0d..3d83a269dce2 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,9 +9,14 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 4.12.0 (April 12, 2021)
+Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
+#### Feature
+* 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 [#21235](https://github.com/facebook/react/issues/21235))
+* 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 15e71cf7c38c..593850e753de 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.11.0",
+  "version": "4.12.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.11.0",
+    "react-devtools-core": "4.12.0",
     "update-notifier": "^2.1.0"
   }
 }

From dbadfa2c36f77a8adf1bcae2c85e6f2e0e3d4137 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 13 Apr 2021 16:57:36 -0400
Subject: [PATCH 0431/1603] [Fizz] Classes Follow Up (#21253)

* Port Classes from Fiber to Fizz

* Test
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 72 +++++++++++++++++++
 packages/react-server/src/ReactFizzContext.js |  2 +-
 packages/react-server/src/ReactFizzServer.js  |  6 +-
 3 files changed, 76 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 862c540c3b9f..9346f20f0442 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -16,6 +16,7 @@ let React;
 let ReactDOM;
 let ReactDOMFizzServer;
 let Suspense;
+let PropTypes;
 let textCache;
 let document;
 let writable;
@@ -36,6 +37,8 @@ describe('ReactDOMFizzServer', () => {
     }
     Stream = require('stream');
     Suspense = React.Suspense;
+    PropTypes = require('prop-types');
+
     textCache = new Map();
 
     // Test Environment
@@ -655,4 +658,73 @@ describe('ReactDOMFizzServer', () => {
       'http://www.w3.org/2000/svg',
     );
   });
+
+  // @gate experimental
+  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(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <TestProvider ctx="A">
+          <div>
+            <Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>
+              <TestProvider ctx="B">
+                <TestConsumer prefix="Hello: " />
+              </TestProvider>
+              <TestConsumer />
+            </Suspense>
+          </div>
+        </TestProvider>,
+        writable,
+      );
+      startWriting();
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Loading: <b>A</b>
+      </div>,
+    );
+    await act(async () => {
+      resolveText('Hello: ');
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Hello: <b>B</b>
+        <b>A</b>
+      </div>,
+    );
+  });
 });
diff --git a/packages/react-server/src/ReactFizzContext.js b/packages/react-server/src/ReactFizzContext.js
index 85751e779d11..7837d15753d4 100644
--- a/packages/react-server/src/ReactFizzContext.js
+++ b/packages/react-server/src/ReactFizzContext.js
@@ -47,8 +47,8 @@ export function getMaskedContext(type: any, unmaskedContext: Object): Object {
 }
 
 export function processChildContext(
-  type: any,
   instance: any,
+  type: any,
   parentContext: Object,
   childContextTypes: Object,
 ): Object {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 3664e7ba4883..a3b1babdf546 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -461,7 +461,7 @@ function renderWithHooks<Props, SecondArg>(
 function finishClassComponent(
   request: Request,
   task: Task,
-  instance: Object,
+  instance: any,
   Component: any,
   props: any,
 ): ReactNodeList {
@@ -518,7 +518,7 @@ function renderClassComponent(
     : undefined;
   const instance = constructClassInstance(Component, props, unmaskedContext);
   mountClassInstance(instance, Component, props, unmaskedContext);
-  finishClassComponent(request, task, Component);
+  finishClassComponent(request, task, instance, Component, props);
 }
 
 const didWarnAboutBadClass = {};
@@ -617,7 +617,7 @@ function renderIndeterminateComponent(
     }
 
     mountClassInstance(value, Component, props, legacyContext);
-    finishClassComponent(request, task, value, Component);
+    finishClassComponent(request, task, value, Component, props);
   } else {
     // Proceed under the assumption that this is a function component
     if (__DEV__) {

From ea155e2267b3e4fd958d174f8f0e2b09b1c8ecf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paul=20O=E2=80=99Shannessy?= <paul@oshannessy.com>
Date: Tue, 13 Apr 2021 16:33:31 -0700
Subject: [PATCH 0432/1603] Update code of conduct (#21251)

We are updating our code of conduct to include activities outside the project.

https://developers.facebook.com/blog/post/2021/04/12/facebook-open-source-ally/
---
 CODE_OF_CONDUCT.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index f049d4c53173..08b500a22185 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -52,6 +52,10 @@ 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

From 82ef450e0e22ef3d5cff03d26aed7d708fa10537 Mon Sep 17 00:00:00 2001
From: "Henry Q. Dineen" <henryqdineen@users.noreply.github.com>
Date: Wed, 14 Apr 2021 12:55:23 -0400
Subject: [PATCH 0433/1603] remove obsolete SharedArrayBuffer ESLint config
 (#21259)

---
 .eslintrc.js                                | 2 --
 scripts/rollup/validate/eslintrc.cjs.js     | 1 -
 scripts/rollup/validate/eslintrc.cjs2015.js | 1 -
 scripts/rollup/validate/eslintrc.esm.js     | 1 -
 scripts/rollup/validate/eslintrc.fb.js      | 1 -
 scripts/rollup/validate/eslintrc.rn.js      | 1 -
 scripts/rollup/validate/eslintrc.umd.js     | 1 -
 7 files changed, 8 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a456964bdbdb..85f3cfc294a0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -207,8 +207,6 @@ module.exports = {
   ],
 
   globals: {
-    SharedArrayBuffer: true,
-
     spyOnDev: true,
     spyOnDevAndProd: true,
     spyOnProd: true,
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 9f1d74176a50..12b8931f0663 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -26,7 +26,6 @@ module.exports = {
     trustedTypes: true,
 
     // Scheduler profiling
-    SharedArrayBuffer: true,
     Int32Array: true,
     ArrayBuffer: true,
 
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index d13058a61cc1..d94b4bc4a02b 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -26,7 +26,6 @@ module.exports = {
     trustedTypes: true,
 
     // Scheduler profiling
-    SharedArrayBuffer: true,
     Int32Array: true,
     ArrayBuffer: true,
 
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index 3b644b6274e4..be4dbf621bf4 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -26,7 +26,6 @@ module.exports = {
     trustedTypes: true,
 
     // Scheduler profiling
-    SharedArrayBuffer: true,
     Int32Array: true,
     ArrayBuffer: true,
 
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index 36f4877efdb4..5621d93f0f90 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -27,7 +27,6 @@ module.exports = {
     trustedTypes: true,
 
     // Scheduler profiling
-    SharedArrayBuffer: true,
     Int32Array: true,
     ArrayBuffer: true,
 
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 3e7027f3510e..b6941e4f2caf 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -26,7 +26,6 @@ module.exports = {
     trustedTypes: true,
 
     // Scheduler profiling
-    SharedArrayBuffer: true,
     Int32Array: true,
     ArrayBuffer: true,
 
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 933c1c9d7349..8bec6d92296d 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -30,7 +30,6 @@ module.exports = {
     trustedTypes: true,
 
     // Scheduler profiling
-    SharedArrayBuffer: true,
     Int32Array: true,
     ArrayBuffer: true,
 

From 6b3d86a2e92fdb79dedf05b759860bd7fd911222 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 14 Apr 2021 13:27:21 -0400
Subject: [PATCH 0434/1603] Fixed bug in react-detools-inline frontend init
 method (#21265)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-inline/src/frontend.js           | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 5 +++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 39947c4177b9..05df906770f9 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.12.0",
+  "version": "4.12.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 64f3c0afe23e..6e674216542d 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.12.0",
-  "version_name": "4.12.0",
+  "version": "4.12.1",
+  "version_name": "4.12.1",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index d78048924e42..5e125ead626c 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.12.0",
-  "version_name": "4.12.0",
+  "version": "4.12.1",
+  "version_name": "4.12.1",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index fa8dc48ca413..c02e8cc9042d 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.12.0",
+  "version": "4.12.1",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 334c65e51eac..876ffdc51b40 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.12.0",
+  "version": "4.12.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index ebd57022e692..a4c7f61f223f 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -91,7 +91,7 @@ export function initialize(
   window.addEventListener('message', onGetSavedPreferencesMessage);
 
   if (bridge == null) {
-    bridge = createBridge();
+    bridge = createBridge(contentWindow);
   }
 
   if (store == null) {
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 3d83a269dce2..f2f038e94cd6 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,11 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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).
+
 ## 4.12.0 (April 12, 2021)
 Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
 #### Feature
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 593850e753de..cfaec58b64f8 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.12.0",
+  "version": "4.12.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.12.0",
+    "react-devtools-core": "4.12.1",
     "update-notifier": "^2.1.0"
   }
 }

From 4f76a28c93c56e3f0c03150460fd4236880e0c94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 14:45:42 -0400
Subject: [PATCH 0435/1603] [Fizz] Implement New Context (#21255)

* Add NewContext module

This implements a reverse linked list tree containing the previous
contexts.

* Implement recursive algorithm

This algorithm pops the contexts back to a shared ancestor on the way down
the stack and then pushes new contexts in reverse order up the stack.

* Move isPrimaryRenderer to ServerFormatConfig

This is primarily intended to be used to support renderToString with a
separate build than the main one. This allows them to be nested.

* Wire up more element type matchers

* Wire up Context Provider type

* Wire up Context Consumer

* Test

* Implement reader in class

* Update error codez
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  66 +++++
 .../src/server/ReactDOMServerFormatConfig.js  |   4 +
 .../server/ReactNativeServerFormatConfig.js   |   2 +
 .../src/ReactFizzClassComponent.js            |   9 +-
 .../react-server/src/ReactFizzNewContext.js   | 278 ++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  | 235 +++++++++++++--
 .../forks/ReactServerFormatConfig.custom.js   |   2 +
 scripts/error-codes/codes.json                |   5 +-
 8 files changed, 567 insertions(+), 34 deletions(-)
 create mode 100644 packages/react-server/src/ReactFizzNewContext.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 9346f20f0442..edbb2e9f2e97 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -727,4 +727,70 @@ describe('ReactDOMFizzServer', () => {
       </div>,
     );
   });
+
+  // @gate experimental
+  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(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <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>,
+        writable,
+      );
+      startWriting();
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A0<div>Loading...</div>A0
+      </div>,
+    );
+    await act(async () => {
+      resolveText('Child:');
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A0
+        <div>
+          Child:<b>A0.1</b>B0
+        </div>
+        A0
+      </div>,
+    );
+  });
 });
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 45cd0fecb5e9..521fe04439c1 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -48,6 +48,10 @@ import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
 import isArray from 'shared/isArray';
 
+// 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;
+
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 40ab6b84b26a..223734c0483d 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -23,6 +23,8 @@ import {
 
 import invariant from 'shared/invariant';
 
+export const isPrimaryRenderer = true;
+
 // Every list of children or string is null terminated.
 const END_TAG = 0;
 // Tree node tags.
diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
index d56bc633b849..a7385d54aa78 100644
--- a/packages/react-server/src/ReactFizzClassComponent.js
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -8,6 +8,7 @@
  */
 
 import {emptyContextObject} from './ReactFizzContext';
+import {readContext} from './ReactFizzNewContext';
 
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
@@ -211,9 +212,7 @@ export function constructClassInstance(
   }
 
   if (typeof contextType === 'object' && contextType !== null) {
-    // TODO: Implement Context.
-    // context = readContext((contextType: any));
-    throw new Error('Context is not yet implemented.');
+    context = readContext((contextType: any));
   } else if (!disableLegacyContext) {
     context = maskedLegacyContext;
   }
@@ -617,9 +616,7 @@ export function mountClassInstance(
 
   const contextType = ctor.contextType;
   if (typeof contextType === 'object' && contextType !== null) {
-    // TODO: Implement Context.
-    // instance.context = readContext(contextType);
-    throw new Error('Context is not yet implemented.');
+    instance.context = readContext(contextType);
   } else if (disableLegacyContext) {
     instance.context = emptyContextObject;
   } else {
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
new file mode 100644
index 000000000000..43f364717d81
--- /dev/null
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -0,0 +1,278 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactContext} from 'shared/ReactTypes';
+
+import {isPrimaryRenderer} from './ReactServerFormatConfig';
+
+import invariant from 'shared/invariant';
+
+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) {
+      invariant(
+        parentNext === null,
+        'The stacks must reach the root at the same time. This is a bug in React.',
+      );
+    } else {
+      invariant(
+        parentNext !== null,
+        '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;
+  invariant(
+    parentPrev !== null,
+    '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;
+  invariant(
+    parentNext !== null,
+    '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: 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;
+  invariant(
+    prevSnapshot !== null,
+    '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) {
+    prevSnapshot.context._currentValue = prevSnapshot.parentValue;
+    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 {
+    prevSnapshot.context._currentValue2 = prevSnapshot.parentValue;
+    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
index a3b1babdf546..c1d51c3b2422 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -13,12 +13,18 @@ import type {
   Chunk,
   PrecomputedChunk,
 } from './ReactServerStreamConfig';
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  ReactNodeList,
+  ReactContext,
+  ReactProviderType,
+} from 'shared/ReactTypes';
+import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {
   SuspenseBoundaryID,
   ResponseState,
   FormatContext,
 } from './ReactServerFormatConfig';
+import type {ContextSnapshot} from './ReactFizzNewContext';
 
 import {
   scheduleWork,
@@ -56,6 +62,15 @@ import {
   processChildContext,
   emptyContextObject,
 } from './ReactFizzContext';
+import {
+  readContext,
+  rootContextSnapshot,
+  switchContext,
+  getActiveContext,
+  pushProvider,
+  popProvider,
+} from './ReactFizzNewContext';
+
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -68,6 +83,10 @@ import {
   REACT_PROFILER_TYPE,
   REACT_SUSPENSE_LIST_TYPE,
   REACT_FRAGMENT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_PROVIDER_TYPE,
+  REACT_CONTEXT_TYPE,
 } from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -104,6 +123,7 @@ type Task = {
   blockedSegment: Segment, // the segment we'll write to
   abortSet: Set<Task>, // the abortable set that this task belongs to
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
+  context: ContextSnapshot, // the current new context that this task is executing in
   assignID: null | SuspenseBoundaryID, // id to assign to the content
 };
 
@@ -220,6 +240,7 @@ export function createRequest(
     rootSegment,
     abortSet,
     emptyContextObject,
+    rootContextSnapshot,
     null,
   );
   pingedTasks.push(rootTask);
@@ -257,6 +278,7 @@ function createTask(
   blockedSegment: Segment,
   abortSet: Set<Task>,
   legacyContext: LegacyContext,
+  context: ContextSnapshot,
   assignID: null | SuspenseBoundaryID,
 ): Task {
   request.allPendingTasks++;
@@ -272,6 +294,7 @@ function createTask(
     blockedSegment,
     abortSet,
     legacyContext,
+    context,
     assignID,
   };
   abortSet.add(task);
@@ -394,6 +417,7 @@ function renderSuspenseBoundary(
     boundarySegment,
     fallbackAbortSet,
     task.legacyContext,
+    task.context,
     newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
   );
   // TODO: This should be queued at a separate lower priority queue so that we only work
@@ -529,6 +553,7 @@ let didWarnAboutReassigningProps = false;
 const didWarnAboutDefaultPropsOnFunctionComponent = {};
 let didWarnAboutGenerators = false;
 let didWarnAboutMaps = false;
+let hasWarnedAboutUsingContextAsConsumer = false;
 
 // This would typically be a function component but we still support module pattern
 // components for some reason.
@@ -694,49 +719,185 @@ function validateFunctionComponentInDev(Component: any): void {
   }
 }
 
+function renderForwardRef(
+  request: Request,
+  task: Task,
+  type: any,
+  props: Object,
+): void {
+  throw new Error('Not yet implemented element type.');
+}
+
+function renderMemo(
+  request: Request,
+  task: Task,
+  type: any,
+  props: Object,
+): void {
+  throw new Error('Not yet implemented element type.');
+}
+
+function renderContextConsumer(
+  request: Request,
+  task: Task,
+  context: ReactContext<any>,
+  props: Object,
+): void {
+  // The logic below for Context differs depending on PROD or DEV mode. In
+  // DEV mode, we create a separate object for Context.Consumer that acts
+  // like a proxy to Context. This proxy object adds unnecessary code in PROD
+  // so we use the old behaviour (Context.Consumer references Context) to
+  // reduce size and overhead. The separate object references context via
+  // a property called "_context", which also gives us the ability to check
+  // in DEV mode if this property exists or not and warn if it does not.
+  if (__DEV__) {
+    if ((context: any)._context === undefined) {
+      // This may be because it's a Context (rather than a Consumer).
+      // Or it may be because it's older React where they're the same thing.
+      // We only want to warn if we're sure it's a new React.
+      if (context !== context.Consumer) {
+        if (!hasWarnedAboutUsingContextAsConsumer) {
+          hasWarnedAboutUsingContextAsConsumer = true;
+          console.error(
+            'Rendering <Context> directly is not supported and will be removed in ' +
+              'a future major release. Did you mean to render <Context.Consumer> instead?',
+          );
+        }
+      }
+    } else {
+      context = (context: any)._context;
+    }
+  }
+  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);
+
+  renderNodeDestructive(request, task, newChildren);
+}
+
+function renderContextProvider(
+  request: Request,
+  task: Task,
+  type: ReactProviderType<any>,
+  props: Object,
+): void {
+  const context = type._context;
+  const value = props.value;
+  const children = props.children;
+  let prevSnapshot;
+  if (__DEV__) {
+    prevSnapshot = task.context;
+  }
+  task.context = pushProvider(context, value);
+  renderNodeDestructive(request, task, children);
+  task.context = popProvider(context);
+  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,
+  type: LazyComponentType<any, any>,
+  props: Object,
+): void {
+  throw new Error('Not yet implemented element type.');
+}
+
 function renderElement(
   request: Request,
   task: Task,
   type: any,
   props: Object,
-  node: ReactNodeList,
 ): void {
   if (typeof type === 'function') {
     if (shouldConstruct(type)) {
       renderClassComponent(request, task, type, props);
+      return;
     } else {
       renderIndeterminateComponent(request, task, type, props);
+      return;
     }
-  } else if (typeof type === 'string') {
+  }
+  if (typeof type === 'string') {
     renderHostElement(request, task, type, props);
-  } else {
-    switch (type) {
-      // TODO: 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: Add REACT_OFFSCREEN_TYPE here too with the same capability.
-      case REACT_LEGACY_HIDDEN_TYPE:
-      case REACT_DEBUG_TRACING_MODE_TYPE:
-      case REACT_STRICT_MODE_TYPE:
-      case REACT_PROFILER_TYPE:
-      case REACT_SUSPENSE_LIST_TYPE: // TODO: SuspenseList should control the boundaries.
-      case REACT_FRAGMENT_TYPE: {
-        renderNodeDestructive(request, task, props.children);
-        break;
+    return;
+  }
+
+  switch (type) {
+    // TODO: 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: Add REACT_OFFSCREEN_TYPE here too with the same capability.
+    case REACT_LEGACY_HIDDEN_TYPE:
+    case REACT_DEBUG_TRACING_MODE_TYPE:
+    case REACT_STRICT_MODE_TYPE:
+    case REACT_PROFILER_TYPE:
+    case REACT_SUSPENSE_LIST_TYPE: // TODO: SuspenseList should control the boundaries.
+    case REACT_FRAGMENT_TYPE: {
+      renderNodeDestructive(request, task, props.children);
+      return;
+    }
+    case REACT_SUSPENSE_TYPE: {
+      renderSuspenseBoundary(request, task, props);
+      return;
+    }
+  }
+
+  if (typeof type === 'object' && type !== null) {
+    switch (type.$$typeof) {
+      case REACT_FORWARD_REF_TYPE: {
+        renderForwardRef(request, task, type, props);
+        return;
       }
-      case REACT_SUSPENSE_TYPE: {
-        renderSuspenseBoundary(request, task, props);
-        break;
+      case REACT_MEMO_TYPE: {
+        renderMemo(request, task, type, props);
+        return;
       }
-      default: {
-        throw new Error('Not yet implemented element type.');
+      case REACT_PROVIDER_TYPE: {
+        renderContextProvider(request, task, type, props);
+        return;
+      }
+      case REACT_CONTEXT_TYPE: {
+        renderContextConsumer(request, task, type, props);
+        return;
+      }
+      case REACT_LAZY_TYPE: {
+        renderLazyComponent(request, task, type, props);
+        return;
       }
     }
   }
+
+  invariant(
+    false,
+    'Element type is invalid: expected a string (for built-in ' +
+      'components) or a class/function (for composite components) ' +
+      'but got: %s.%s',
+    type == null ? type : typeof type,
+    '',
+  );
 }
 
 function validateIterable(iterable, iteratorFn: Function): void {
@@ -791,7 +952,7 @@ function renderNodeDestructive(
         const element: React$Element<any> = (node: any);
         const type = element.type;
         const props = element.props;
-        renderElement(request, task, type, props, node);
+        renderElement(request, task, type, props);
         return;
       }
       case REACT_PORTAL_TYPE:
@@ -918,6 +1079,7 @@ function spawnNewSuspendedTask(
     newSegment,
     task.abortSet,
     task.legacyContext,
+    task.context,
     task.assignID,
   );
   // We've delegated the assignment.
@@ -936,6 +1098,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
   // process.
   const previousFormatContext = task.blockedSegment.formatContext;
   const previousLegacyContext = task.legacyContext;
+  const previousContext = task.context;
   try {
     return renderNodeDestructive(request, task, node);
   } catch (x) {
@@ -945,6 +1108,9 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       // functions in case nothing throws so we don't use "finally" here.
       task.blockedSegment.formatContext = previousFormatContext;
       task.legacyContext = previousLegacyContext;
+      task.context = previousContext;
+      // Restore all active ReactContexts to what they were before.
+      switchContext(previousContext);
     } else {
       // We assume that we don't need the correct context.
       // Let's terminate the rest of the tree and don't render any siblings.
@@ -1104,6 +1270,10 @@ function retryTask(request: Request, task: Task): void {
     // We completed this by other means before we had a chance to retry it.
     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);
   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.
@@ -1129,6 +1299,7 @@ function performWork(request: Request): void {
   if (request.status === CLOSED) {
     return;
   }
+  const prevContext = getActiveContext();
   const prevDispatcher = ReactCurrentDispatcher.current;
   ReactCurrentDispatcher.current = Dispatcher;
 
@@ -1148,6 +1319,16 @@ function performWork(request: Request): void {
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
+    if (prevDispatcher === Dispatcher) {
+      // 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);
+    }
   }
 }
 
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 58f2d504b46b..1ab6f9509082 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -29,6 +29,8 @@ export opaque type ResponseState = mixed;
 export opaque type FormatContext = mixed;
 export opaque type SuspenseBoundaryID = mixed;
 
+export const isPrimaryRenderer = false;
+
 export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
 export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
 export const pushEmpty = $$$hostConfig.pushEmpty;
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 17c28c3bc701..4dbb95f55e80 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -388,5 +388,8 @@
   "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`."
+  "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."
 }

From 15e779d921e11f22a39e688a5de89c3777462114 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 14 Apr 2021 14:47:36 -0400
Subject: [PATCH 0436/1603] Reconciler should inject its own version into
 DevTools hook (#21268)

---
 packages/react-reconciler/src/ReactFiberReconciler.new.js | 5 ++++-
 packages/react-reconciler/src/ReactFiberReconciler.old.js | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 4572e4d9de4b..f6318f0a0305 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -95,7 +95,7 @@ import {
   findHostInstancesForRefresh,
 } from './ReactFiberHotReloading.new';
 import {markRenderScheduled} from './SchedulingProfiler';
-
+import ReactVersion from 'shared/ReactVersion';
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {
@@ -739,5 +739,8 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
+    // Enables DevTools to detect reconciler version rather than renderer version
+    // which may not match for third party renderers.
+    reconcilerVersion: ReactVersion,
   });
 }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index abd5b9094c59..68a6ed619bbd 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -95,7 +95,7 @@ import {
   findHostInstancesForRefresh,
 } from './ReactFiberHotReloading.old';
 import {markRenderScheduled} from './SchedulingProfiler';
-
+import ReactVersion from 'shared/ReactVersion';
 export {registerMutableSourceForHydration} from './ReactMutableSource.old';
 export {createPortal} from './ReactPortal';
 export {
@@ -739,5 +739,8 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
+    // Enables DevTools to detect reconciler version rather than renderer version
+    // which may not match for third party renderers.
+    reconcilerVersion: ReactVersion,
   });
 }

From 68097787f6e8f6d73af06e7c549a294df942b986 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 14 Apr 2021 14:48:05 -0400
Subject: [PATCH 0437/1603] DevTools should use reconciler version (rather than
 renderer version)

when available (#21269)
---
 packages/react-devtools-shared/src/backend/renderer.js | 8 +++++++-
 packages/react-devtools-shared/src/backend/types.js    | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index b006c9166f53..807bbde0c799 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -503,13 +503,19 @@ export function attach(
   renderer: ReactRenderer,
   global: Object,
 ): 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,
     ReactTypeOfSideEffect,
-  } = getInternalReactConstants(renderer.version);
+  } = getInternalReactConstants(version);
   const {Incomplete, NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
   const {
     CacheComponent,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index f80211168c63..466a5b7fa2dd 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -137,6 +137,8 @@ export type ReactRenderer = {
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
   getCurrentFiber?: () => Fiber | null,
+  // 17.0.2+
+  reconcilerVersion?: string,
   // Uniquely identifies React DOM v15.
   ComponentTree?: any,
   // Present for React DOM v12 (possibly earlier) through v15.

From a597c2f5dc5596bea331b455aca0548fb933038e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 16:49:14 -0400
Subject: [PATCH 0438/1603] [Fizz] Fix reentrancy bug (#21270)

* Fix reentrancy bug

* Fix another reentrancy bug

There's also an issue if we try to schedule something to be client
rendered if its fallback hasn't rendered yet. So we don't do it
in that case.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 17 ++++---
 .../__tests__/ReactDOMFizzServerNode-test.js  | 51 +++++++++++++++++--
 packages/react-server/src/ReactFizzServer.js  | 33 +++++++-----
 3 files changed, 77 insertions(+), 24 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index edbb2e9f2e97..bcc4ad72a8b3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -353,13 +353,16 @@ describe('ReactDOMFizzServer', () => {
 
     await act(async () => {
       const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-        <Suspense fallback={<Text text="Loading A..." />}>
-          <>
-            <Text text="This will show A: " />
-            <div>
-              <AsyncText text="A" />
-            </div>
-          </>
+        // We use two nested boundaries to flush out coverage of an old reentrancy bug.
+        <Suspense fallback="Loading...">
+          <Suspense fallback={<Text text="Loading A..." />}>
+            <>
+              <Text text="This will show A: " />
+              <div>
+                <AsyncText text="A" />
+              </div>
+            </>
+          </Suspense>
         </Suspense>,
         writableA,
         {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index c6a774fcf322..dcef8c2406a6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -99,7 +99,7 @@ describe('ReactDOMFizzServer', () => {
       }
       return 'Done';
     }
-    let isComplete = false;
+    let isCompleteCalls = 0;
     const {writable, output} = getTestWritable();
     const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
@@ -110,13 +110,13 @@ describe('ReactDOMFizzServer', () => {
       writable,
       {
         onCompleteAll() {
-          isComplete = true;
+          isCompleteCalls++;
         },
       },
     );
     await jest.runAllTimers();
     expect(output.result).toBe('');
-    expect(isComplete).toBe(false);
+    expect(isCompleteCalls).toBe(0);
     // Resolve the loading.
     hasLoaded = true;
     await resolve();
@@ -124,7 +124,7 @@ describe('ReactDOMFizzServer', () => {
     await jest.runAllTimers();
 
     expect(output.result).toBe('');
-    expect(isComplete).toBe(true);
+    expect(isCompleteCalls).toBe(1);
 
     // First we write our header.
     output.result +=
@@ -244,6 +244,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
+    let isCompleteCalls = 0;
     const {writable, output, completed} = getTestWritable();
     const {startWriting, abort} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
@@ -252,12 +253,53 @@ describe('ReactDOMFizzServer', () => {
         </Suspense>
       </div>,
       writable,
+      {
+        onCompleteAll() {
+          isCompleteCalls++;
+        },
+      },
+    );
+    startWriting();
+
+    jest.runAllTimers();
+
+    expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(0);
+
+    abort();
+
+    await completed;
+
+    expect(output.error).toBe(undefined);
+    expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(1);
+  });
+
+  // @gate experimental
+  it('should be able to complete by abort when the fallback is also suspended', async () => {
+    let isCompleteCalls = 0;
+    const {writable, output, completed} = getTestWritable();
+    const {startWriting, abort} = ReactDOMFizzServer.pipeToNodeWritable(
+      <div>
+        <Suspense fallback="Loading">
+          <Suspense fallback={<InfiniteSuspend />}>
+            <InfiniteSuspend />
+          </Suspense>
+        </Suspense>
+      </div>,
+      writable,
+      {
+        onCompleteAll() {
+          isCompleteCalls++;
+        },
+      },
     );
     startWriting();
 
     jest.runAllTimers();
 
     expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(0);
 
     abort();
 
@@ -265,5 +307,6 @@ describe('ReactDOMFizzServer', () => {
 
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
+    expect(isCompleteCalls).toBe(1);
   });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index c1d51c3b2422..4febbbe98163 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1172,8 +1172,8 @@ function abortTask(task: Task): void {
   const segment = task.blockedSegment;
   segment.status = ABORTED;
 
-  request.allPendingTasks--;
   if (boundary === null) {
+    request.allPendingTasks--;
     // We didn't complete the root so we have nothing to show. We can close
     // the request;
     if (request.status !== CLOSED) {
@@ -1183,18 +1183,23 @@ function abortTask(task: Task): void {
   } else {
     boundary.pendingTasks--;
 
-    // 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(abortTask, request);
-    boundary.fallbackAbortableTasks.clear();
-
-    if (!boundary.forceClientRender) {
-      boundary.forceClientRender = true;
-      if (boundary.parentFlushed) {
-        request.clientRenderedBoundaries.push(boundary);
+    if (boundary.fallbackAbortableTasks.size > 0) {
+      // 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.
+      // This means that we don't have to client render this boundary because its parent
+      // will be client rendered anyway.
+      boundary.fallbackAbortableTasks.forEach(abortTask, request);
+      boundary.fallbackAbortableTasks.clear();
+    } else {
+      if (!boundary.forceClientRender) {
+        boundary.forceClientRender = true;
+        if (boundary.parentFlushed) {
+          request.clientRenderedBoundaries.push(boundary);
+        }
       }
     }
 
+    request.allPendingTasks--;
     if (request.allPendingTasks === 0) {
       const onCompleteAll = request.onCompleteAll;
       onCompleteAll();
@@ -1226,9 +1231,6 @@ function finishedTask(
       // This already errored.
     } else if (boundary.pendingTasks === 0) {
       // This must have been the last segment we were waiting on. This boundary is now complete.
-      // We can now cancel any pending task on the fallback since we won't need to show it anymore.
-      boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
-      boundary.fallbackAbortableTasks.clear();
       if (segment.parentFlushed) {
         // Our parent segment already flushed, so we need to schedule this segment to be emitted.
         boundary.completedSegments.push(segment);
@@ -1238,6 +1240,11 @@ function finishedTask(
         // 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.
+      boundary.fallbackAbortableTasks.forEach(abortTaskSoft, request);
+      boundary.fallbackAbortableTasks.clear();
     } else {
       if (segment.parentFlushed) {
         // Our parent already flushed, so we need to schedule this segment to be emitted.

From dde875dfb1f84692ed02f82b0fc781bec9a864ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 17:16:41 -0400
Subject: [PATCH 0439/1603] [Fizz] Implement Hooks (#21257)

* Implement Fizz Hooks

This is pretty much just a copy of the partial renderer Hooks.

* Implement forward ref and memo
---
 packages/react-server/src/ReactFizzHooks.js  | 515 +++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js |  96 ++--
 2 files changed, 555 insertions(+), 56 deletions(-)
 create mode 100644 packages/react-server/src/ReactFizzHooks.js

diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
new file mode 100644
index 000000000000..1650b5bf64c0
--- /dev/null
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -0,0 +1,515 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
+
+import type {
+  MutableSource,
+  MutableSourceGetSnapshotFn,
+  MutableSourceSubscribeFn,
+  ReactContext,
+} from 'shared/ReactTypes';
+
+import {readContext as readContextImpl} from './ReactFizzNewContext';
+
+import invariant from 'shared/invariant';
+import {enableCache} from 'shared/ReactFeatureFlags';
+import is from 'shared/objectIs';
+
+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,
+|};
+
+type OpaqueIDType = string;
+
+let currentlyRenderingComponent: Object | 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;
+// 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 {
+  invariant(
+    currentlyRenderingComponent !== null,
+    '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://reactjs.org/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://reactjs.org/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(', ')}]`,
+      );
+    }
+  }
+  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
+    if (is(nextDeps[i], prevDeps[i])) {
+      continue;
+    }
+    return false;
+  }
+  return true;
+}
+
+function createHook(): Hook {
+  if (numberOfReRenders > 0) {
+    invariant(false, '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(componentIdentity: Object): void {
+  currentlyRenderingComponent = componentIdentity;
+  if (__DEV__) {
+    isInHookUserCodeInDev = false;
+  }
+
+  // The following should have already been reset
+  // didScheduleRenderPhaseUpdate = false;
+  // firstWorkInProgressHook = null;
+  // numberOfReRenders = 0;
+  // renderPhaseUpdates = null;
+  // workInProgressHook = null;
+}
+
+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;
+    numberOfReRenders += 1;
+
+    // Start over from the beginning of the list
+    workInProgressHook = null;
+
+    children = Component(props, refOrContext);
+  }
+  resetHooksState();
+  return children;
+}
+
+// Reset the internal hooks state if an error occurs while rendering a component
+export function resetHooksState(): void {
+  if (__DEV__) {
+    isInHookUserCodeInDev = false;
+  }
+
+  currentlyRenderingComponent = null;
+  didScheduleRenderPhaseUpdate = false;
+  firstWorkInProgressHook = null;
+  numberOfReRenders = 0;
+  renderPhaseUpdates = null;
+  workInProgressHook = null;
+}
+
+function getCacheForType<T>(resourceType: () => T): T {
+  // TODO: This should silently mark this as client rendered since it's not necesssarily
+  // considered an error. It needs to work for things like Flight though.
+  invariant(false, 'Not implemented.');
+}
+
+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: 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) {
+        renderPhaseUpdates.delete(queue);
+        let newState = workInProgressHook.memoizedState;
+        let update = firstRenderPhaseUpdate;
+        do {
+          // Process this render phase update. We don't have to check the
+          // priority because it will always be the same as the current
+          // render's.
+          const action = update.action;
+          if (__DEV__) {
+            isInHookUserCodeInDev = true;
+          }
+          newState = reducer(newState, action);
+          if (__DEV__) {
+            isInHookUserCodeInDev = false;
+          }
+          update = update.next;
+        } while (update !== null);
+
+        workInProgressHook.memoizedState = newState;
+
+        return [newState, dispatch];
+      }
+    }
+    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;
+    }
+    workInProgressHook.memoizedState = initialState;
+    const queue: UpdateQueue<A> = (workInProgressHook.queue = {
+      last: null,
+      dispatch: null,
+    });
+    const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
+      null,
+      currentlyRenderingComponent,
+      queue,
+    ): any));
+    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;
+  }
+  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);
+    }
+    workInProgressHook.memoizedState = ref;
+    return ref;
+  } else {
+    return previousRef;
+  }
+}
+
+export function useLayoutEffect(
+  create: () => (() => void) | void,
+  inputs: Array<mixed> | void | null,
+) {
+  if (__DEV__) {
+    currentHookNameInDev = 'useLayoutEffect';
+    console.error(
+      'useLayoutEffect does nothing on the server, because its effect cannot ' +
+        "be encoded into the server renderer's output format. This will lead " +
+        'to a mismatch between the initial, non-hydrated UI and the intended ' +
+        'UI. To avoid this, useLayoutEffect should only be used in ' +
+        'components that render exclusively on the client. ' +
+        'See https://reactjs.org/link/uselayouteffect-ssr for common fixes.',
+    );
+  }
+}
+
+function dispatchAction<A>(
+  componentIdentity: Object,
+  queue: UpdateQueue<A>,
+  action: A,
+) {
+  invariant(
+    numberOfReRenders < RE_RENDER_LIMIT,
+    '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) {
+      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);
+}
+
+// TODO Decide on how to implement this hook for server rendering.
+// If a mutation occurs during render, consider triggering a Suspense boundary
+// and falling back to client rendering.
+function useMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  resolveCurrentlyRenderingComponent();
+  return getSnapshot(source._source);
+}
+
+function useDeferredValue<T>(value: T): T {
+  resolveCurrentlyRenderingComponent();
+  return value;
+}
+
+function unsupportedStartTransition() {
+  invariant(false, 'startTransition cannot be called during server rendering.');
+}
+
+function useTransition(): [(callback: () => void) => void, boolean] {
+  resolveCurrentlyRenderingComponent();
+  return [unsupportedStartTransition, false];
+}
+
+function useOpaqueIdentifier(): OpaqueIDType {
+  throw new Error('Not yet implemented.');
+}
+
+function unsupportedRefresh() {
+  invariant(false, 'Cache cannot be refreshed during server rendering.');
+}
+
+function useCacheRefresh(): <T>(?() => T, ?T) => void {
+  return unsupportedRefresh;
+}
+
+function noop(): void {}
+
+export const Dispatcher: DispatcherType = {
+  readContext,
+  useContext,
+  useMemo,
+  useReducer,
+  useRef,
+  useState,
+  useLayoutEffect,
+  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,
+  useOpaqueIdentifier,
+  // Subscriptions are not setup in a server environment.
+  useMutableSource,
+};
+
+if (enableCache) {
+  Dispatcher.getCacheForType = getCacheForType;
+  Dispatcher.useCacheRefresh = useCacheRefresh;
+}
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4febbbe98163..4daaddbb3275 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   Destination,
   Chunk,
@@ -70,6 +69,12 @@ import {
   pushProvider,
   popProvider,
 } from './ReactFizzNewContext';
+import {
+  prepareToUseHooks,
+  finishHooks,
+  resetHooksState,
+  Dispatcher,
+} from './ReactFizzHooks';
 
 import {
   getIteratorFn,
@@ -199,6 +204,8 @@ function defaultErrorHandler(error: mixed) {
   console['error'](error); // Don't transform to our wrapper
 }
 
+function noop(): void {}
+
 export function createRequest(
   children: ReactNodeList,
   destination: Destination,
@@ -474,8 +481,10 @@ function renderWithHooks<Props, SecondArg>(
   props: Props,
   secondArg: SecondArg,
 ): any {
-  // TODO: Set up Hooks etc.
-  const children = Component(props, secondArg);
+  const componentIdentity = {};
+  prepareToUseHooks(componentIdentity);
+  const result = Component(props, secondArg);
+  const children = finishHooks(Component, props, result, secondArg);
   if (children === undefined) {
     invalidRenderResult(Component);
   }
@@ -719,13 +728,29 @@ function validateFunctionComponentInDev(Component: any): void {
   }
 }
 
+function resolveDefaultProps(Component: any, baseProps: Object): Object {
+  if (Component && Component.defaultProps) {
+    // Resolve default props. Taken from ReactElement
+    const props = Object.assign({}, baseProps);
+    const defaultProps = Component.defaultProps;
+    for (const propName in defaultProps) {
+      if (props[propName] === undefined) {
+        props[propName] = defaultProps[propName];
+      }
+    }
+    return props;
+  }
+  return baseProps;
+}
+
 function renderForwardRef(
   request: Request,
   task: Task,
   type: any,
   props: Object,
+  ref: any,
 ): void {
-  throw new Error('Not yet implemented element type.');
+  renderWithHooks(request, task, type, props, ref);
 }
 
 function renderMemo(
@@ -733,8 +758,11 @@ function renderMemo(
   task: Task,
   type: any,
   props: Object,
+  ref: any,
 ): void {
-  throw new Error('Not yet implemented element type.');
+  const innerType = type.type;
+  const resolvedProps = resolveDefaultProps(innerType, props);
+  renderElement(request, task, innerType, resolvedProps, ref);
 }
 
 function renderContextConsumer(
@@ -826,6 +854,7 @@ function renderElement(
   task: Task,
   type: any,
   props: Object,
+  ref: any,
 ): void {
   if (typeof type === 'function') {
     if (shouldConstruct(type)) {
@@ -868,11 +897,11 @@ function renderElement(
   if (typeof type === 'object' && type !== null) {
     switch (type.$$typeof) {
       case REACT_FORWARD_REF_TYPE: {
-        renderForwardRef(request, task, type, props);
+        renderForwardRef(request, task, type, props, ref);
         return;
       }
       case REACT_MEMO_TYPE: {
-        renderMemo(request, task, type, props);
+        renderMemo(request, task, type, props, ref);
         return;
       }
       case REACT_PROVIDER_TYPE: {
@@ -952,7 +981,8 @@ function renderNodeDestructive(
         const element: React$Element<any> = (node: any);
         const type = element.type;
         const props = element.props;
-        renderElement(request, task, type, props);
+        const ref = element.ref;
+        renderElement(request, task, type, props, ref);
         return;
       }
       case REACT_PORTAL_TYPE:
@@ -1102,6 +1132,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
   try {
     return renderNodeDestructive(request, task, node);
   } catch (x) {
+    resetHooksState();
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       spawnNewSuspendedTask(request, task, x);
       // Restore the context. We assume that this will be restored by the inner
@@ -1290,6 +1321,7 @@ function retryTask(request: Request, task: Task): void {
     segment.status = COMPLETED;
     finishedTask(request, task.blockedBoundary, segment);
   } catch (x) {
+    resetHooksState();
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       // Something suspended again, let's pick it back up later.
       const ping = task.ping;
@@ -1704,51 +1736,3 @@ export function abort(request: Request): void {
     fatalError(request, error);
   }
 }
-
-function notYetImplemented(): void {
-  throw new Error('Not yet implemented.');
-}
-
-function unsupportedRefresh() {
-  invariant(false, 'Cache cannot be refreshed during server rendering.');
-}
-
-function unsupportedStartTransition() {
-  invariant(false, 'startTransition cannot be called during server rendering.');
-}
-
-function noop(): void {}
-
-const Dispatcher: DispatcherType = {
-  useMemo<T>(nextCreate: () => T): T {
-    return nextCreate();
-  },
-  useCallback<T>(callback: T): T {
-    return callback;
-  },
-  useDebugValue(): void {},
-  useDeferredValue<T>(value: T): T {
-    return value;
-  },
-  useTransition(): [(callback: () => void) => void, boolean] {
-    return [unsupportedStartTransition, false];
-  },
-  getCacheForType<T>(resourceType: () => T): T {
-    throw new Error('Not yet implemented. Should mark as client rendered.');
-  },
-  readContext: (notYetImplemented: any),
-  useContext: (notYetImplemented: any),
-  useReducer: (notYetImplemented: any),
-  useRef: (notYetImplemented: any),
-  useState: (notYetImplemented: any),
-  useLayoutEffect: noop,
-  // useImperativeHandle is not run in the server environment
-  useImperativeHandle: noop,
-  // Effects are not run in the server environment.
-  useEffect: noop,
-  useOpaqueIdentifier: (notYetImplemented: any),
-  useMutableSource: (notYetImplemented: any),
-  useCacheRefresh(): <T>(?() => T, ?T) => void {
-    return unsupportedRefresh;
-  },
-};

From f4d7a0f1ea0cd24e1979a9be6b2778b98cef414c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 17:25:42 -0400
Subject: [PATCH 0440/1603] Implement useOpaqueIdentifier (#21260)

The format of this ID is specific to the format.
---
 .../src/server/ReactDOMServerFormatConfig.js  | 22 +++++++++++++++++--
 .../server/ReactNativeServerFormatConfig.js   | 15 +++++++++++++
 .../src/ReactNoopServer.js                    |  6 +++++
 packages/react-server/src/ReactFizzHooks.js   | 15 ++++++++++---
 packages/react-server/src/ReactFizzServer.js  |  6 ++++-
 .../forks/ReactServerFormatConfig.custom.js   |  2 ++
 scripts/error-codes/codes.json                |  3 ++-
 7 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 521fe04439c1..acc6e86879c8 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -57,8 +57,9 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
-  opaqueIdentifierPrefix: PrecomputedChunk,
+  opaqueIdentifierPrefix: string,
   nextSuspenseID: number,
+  nextOpaqueID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
@@ -72,8 +73,9 @@ export function createResponseState(
     placeholderPrefix: stringToPrecomputedChunk(identifierPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(identifierPrefix + 'S:'),
     boundaryPrefix: identifierPrefix + 'B:',
-    opaqueIdentifierPrefix: stringToPrecomputedChunk(identifierPrefix + 'R:'),
+    opaqueIdentifierPrefix: identifierPrefix + 'R:',
     nextSuspenseID: 0,
+    nextOpaqueID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
@@ -172,6 +174,22 @@ export function createSuspenseBoundaryID(
   return {formattedID: null};
 }
 
+export type OpaqueIDType = string;
+
+export function makeServerID(
+  responseState: null | ResponseState,
+): OpaqueIDType {
+  invariant(
+    responseState !== null,
+    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+  );
+  // TODO: This is not deterministic since it's created during render.
+  return (
+    responseState.opaqueIdentifierPrefix +
+    (responseState.nextOpaqueID++).toString(36)
+  );
+}
+
 function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 223734c0483d..98779768f486 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -61,12 +61,14 @@ SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
 // Per response,
 export type ResponseState = {
   nextSuspenseID: number,
+  nextOpaqueID: number,
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(): ResponseState {
   return {
     nextSuspenseID: 0,
+    nextOpaqueID: 0,
   };
 }
 
@@ -108,6 +110,19 @@ export function createSuspenseBoundaryID(
   return responseState.nextSuspenseID++;
 }
 
+export type OpaqueIDType = number;
+
+export function makeServerID(
+  responseState: null | ResponseState,
+): OpaqueIDType {
+  invariant(
+    responseState !== null,
+    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+  );
+  // TODO: This is not deterministic since it's created during render.
+  return responseState.nextOpaqueID++;
+}
+
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
 export function pushEmpty(
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 1f10b6aedd4f..5a8ff56d6ce2 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -53,6 +53,8 @@ type Destination = {
 
 const POP = Buffer.from('/', 'utf8');
 
+let opaqueID = 0;
+
 const ReactNoopServer = ReactFizzServer({
   scheduleWork(callback: () => void) {
     callback();
@@ -84,6 +86,10 @@ const ReactNoopServer = ReactFizzServer({
     return {state: 'pending', children: []};
   },
 
+  makeServerID(): number {
+    return opaqueID++;
+  },
+
   getChildFormatContext(): null {
     return null;
   },
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 1650b5bf64c0..9fd9e0f42098 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -16,8 +16,12 @@ import type {
   ReactContext,
 } from 'shared/ReactTypes';
 
+import type {ResponseState, OpaqueIDType} from './ReactServerFormatConfig';
+
 import {readContext as readContextImpl} from './ReactFizzNewContext';
 
+import {makeServerID} from './ReactServerFormatConfig';
+
 import invariant from 'shared/invariant';
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
@@ -41,8 +45,6 @@ type Hook = {|
   next: Hook | null,
 |};
 
-type OpaqueIDType = string;
-
 let currentlyRenderingComponent: Object | null = null;
 let firstWorkInProgressHook: Hook | null = null;
 let workInProgressHook: Hook | null = null;
@@ -474,7 +476,7 @@ function useTransition(): [(callback: () => void) => void, boolean] {
 }
 
 function useOpaqueIdentifier(): OpaqueIDType {
-  throw new Error('Not yet implemented.');
+  return makeServerID(currentResponseState);
 }
 
 function unsupportedRefresh() {
@@ -513,3 +515,10 @@ if (enableCache) {
   Dispatcher.getCacheForType = getCacheForType;
   Dispatcher.useCacheRefresh = useCacheRefresh;
 }
+
+export let currentResponseState: null | ResponseState = (null: any);
+export function setCurrentResponseState(
+  responseState: null | ResponseState,
+): void {
+  currentResponseState = responseState;
+}
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4daaddbb3275..fb2b2e289b4d 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -74,6 +74,8 @@ import {
   finishHooks,
   resetHooksState,
   Dispatcher,
+  currentResponseState,
+  setCurrentResponseState,
 } from './ReactFizzHooks';
 
 import {
@@ -1341,7 +1343,8 @@ function performWork(request: Request): void {
   const prevContext = getActiveContext();
   const prevDispatcher = ReactCurrentDispatcher.current;
   ReactCurrentDispatcher.current = Dispatcher;
-
+  const prevResponseState = currentResponseState;
+  setCurrentResponseState(request.responseState);
   try {
     const pingedTasks = request.pingedTasks;
     let i;
@@ -1357,6 +1360,7 @@ function performWork(request: Request): void {
     reportError(request, error);
     fatalError(request, error);
   } finally {
+    setCurrentResponseState(prevResponseState);
     ReactCurrentDispatcher.current = prevDispatcher;
     if (prevDispatcher === Dispatcher) {
       // This means that we were in a reentrant work loop. This could happen
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 1ab6f9509082..7296697cc9c8 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -28,11 +28,13 @@ export opaque type Destination = mixed; // eslint-disable-line no-undef
 export opaque type ResponseState = mixed;
 export opaque type FormatContext = mixed;
 export opaque type SuspenseBoundaryID = mixed;
+export opaque type OpaqueIDType = mixed;
 
 export const isPrimaryRenderer = false;
 
 export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
 export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
+export const makeServerID = $$$hostConfig.makeServerID;
 export const pushEmpty = $$$hostConfig.pushEmpty;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 4dbb95f55e80..538f28756e42 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -391,5 +391,6 @@
   "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."
+  "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."
 }

From a4a940d7a15814e50c977179f7d2be3c76611707 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 17:35:36 -0400
Subject: [PATCH 0441/1603] [Fizz] Add unsupported Portal/Scope components
 (#21261)

* Update Portal error message

* Add Scope Component
---
 packages/react-server/src/ReactFizzServer.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index fb2b2e289b4d..334d8b38797a 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -94,12 +94,14 @@ import {
   REACT_MEMO_TYPE,
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
+  REACT_SCOPE_TYPE,
 } from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   disableLegacyContext,
   disableModulePatternComponents,
   warnAboutDefaultPropsOnFunctionComponents,
+  enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -890,6 +892,14 @@ function renderElement(
       renderNodeDestructive(request, task, props.children);
       return;
     }
+    case REACT_SCOPE_TYPE: {
+      if (enableScopeAPI) {
+        renderNodeDestructive(request, task, props.children);
+        return;
+      }
+      invariant(false, 'ReactDOMServer does not yet support scope components.');
+    }
+    // eslint-disable-next-line-no-fallthrough
     case REACT_SUSPENSE_TYPE: {
       renderSuspenseBoundary(request, task, props);
       return;
@@ -988,7 +998,12 @@ function renderNodeDestructive(
         return;
       }
       case REACT_PORTAL_TYPE:
-        throw new Error('Not yet implemented node type.');
+        invariant(
+          false,
+          'Portals are not currently supported by the server renderer. ' +
+            'Render them conditionally so that they only appear on the client render.',
+        );
+      // eslint-disable-next-line-no-fallthrough
       case REACT_LAZY_TYPE:
         throw new Error('Not yet implemented node type.');
     }

From 266c26ad45c977ecf67e9359809c37da1489ca63 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 18:09:22 -0400
Subject: [PATCH 0442/1603] Emit reactroot attribute on the first element we
 discover (#21154)

This may not be the first root element if the root is a fragment and the
second one unsuspends first. But this tag doesn't work well for root
fragments anyway.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  4 +++
 .../ReactDOMFizzServerBrowser-test.js         |  6 +++--
 .../__tests__/ReactDOMFizzServerNode-test.js  |  6 ++---
 .../src/server/ReactDOMServerFormatConfig.js  | 27 ++++++++++++++++++-
 4 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index bcc4ad72a8b3..3381005cf5c2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -116,6 +116,10 @@ describe('ReactDOMFizzServer', () => {
               // We assume this is a React added ID that's a non-visual implementation detail.
               continue;
             }
+            if (attributes[i].name === 'data-reactroot') {
+              // We ignore React injected attributes.
+              continue;
+            }
             props[attributes[i].name] = attributes[i].value;
           }
           props.children = getVisibleChildren(node);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index a61727d7fdf0..f805854841ff 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -55,7 +55,9 @@ describe('ReactDOMFizzServer', () => {
       <div>hello world</div>,
     );
     const result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(`"<div>hello world<!-- --></div>"`);
+    expect(result).toMatchInlineSnapshot(
+      `"<div data-reactroot=\\"\\">hello world<!-- --></div>"`,
+    );
   });
 
   // @gate experimental
@@ -94,7 +96,7 @@ describe('ReactDOMFizzServer', () => {
 
     const result = await readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
+      `"<div data-reactroot=\\"\\"><!--$-->Done<!-- --><!--/$--></div>"`,
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index dcef8c2406a6..cd93ac5a5163 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -66,7 +66,7 @@ describe('ReactDOMFizzServer', () => {
     startWriting();
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(
-      `"<div>hello world<!-- --></div>"`,
+      `"<div data-reactroot=\\"\\">hello world<!-- --></div>"`,
     );
   });
 
@@ -84,7 +84,7 @@ describe('ReactDOMFizzServer', () => {
     // Then React starts writing.
     startWriting();
     expect(output.result).toMatchInlineSnapshot(
-      `"<!doctype html><html><head><title>test</title><head><body><div>hello world<!-- --></div>"`,
+      `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\">hello world<!-- --></div>"`,
     );
   });
 
@@ -132,7 +132,7 @@ describe('ReactDOMFizzServer', () => {
     // Then React starts writing.
     startWriting();
     expect(output.result).toMatchInlineSnapshot(
-      `"<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!-- --><!--/$--></div>"`,
+      `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\"><!--$-->Done<!-- --><!--/$--></div>"`,
     );
   });
 
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index acc6e86879c8..62d27c5e9917 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -32,6 +32,7 @@ import {
   OVERLOADED_BOOLEAN,
   NUMERIC,
   POSITIVE_NUMERIC,
+  ROOT_ATTRIBUTE_NAME,
 } from '../shared/DOMProperty';
 import {isUnitlessNumber} from '../shared/CSSProperty';
 
@@ -63,6 +64,7 @@ export type ResponseState = {
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
+  hasEmittedRoot: boolean,
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
@@ -79,6 +81,7 @@ export function createResponseState(
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
+    hasEmittedRoot: false,
   };
 }
 
@@ -99,7 +102,7 @@ type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
 // Lets us keep track of contextual state and pick it back up after suspending.
 export type FormatContext = {
-  insertionMode: InsertionMode, // root/svg/html/mathml/table
+  insertionMode: InsertionMode, // svg/html/mathml/table
   selectedValue: null | string | Array<string>, // the selected value(s) inside a <select>, or null outside <select>
 };
 
@@ -508,6 +511,19 @@ const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
 const idAttr = stringToPrecomputedChunk(' id="');
 const attrEnd = stringToPrecomputedChunk('"');
 
+const reactRootAttribute = stringToPrecomputedChunk(
+  ' ' + ROOT_ATTRIBUTE_NAME + '=""',
+);
+function pushReactRoot(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+): void {
+  if (!responseState.hasEmittedRoot) {
+    responseState.hasEmittedRoot = true;
+    target.push(reactRootAttribute);
+  }
+}
+
 function pushID(
   target: Array<Chunk | PrecomputedChunk>,
   responseState: ResponseState,
@@ -639,6 +655,7 @@ function pushStartSelect(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -752,6 +769,7 @@ function pushStartOption(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return children;
@@ -839,6 +857,7 @@ function pushInput(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -903,6 +922,7 @@ function pushStartTextArea(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
 
@@ -979,6 +999,7 @@ function pushSelfClosing(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -1015,6 +1036,7 @@ function pushStartMenuItem(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return null;
@@ -1053,6 +1075,7 @@ function pushStartGenericElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1111,6 +1134,7 @@ function pushStartCustomElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1152,6 +1176,7 @@ function pushStartPreformattedElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
+  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
 

From 81ef5395358b6e0f44a02df618901eaef830fe78 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 18:39:51 -0400
Subject: [PATCH 0443/1603] Always insert a dummy node with an ID into
 fallbacks (#21272)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 78 ++++++++++++++++++-
 packages/react-server/src/ReactFizzServer.js  | 17 +++-
 2 files changed, 91 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 3381005cf5c2..19fde3c4a605 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -103,6 +103,7 @@ describe('ReactDOMFizzServer', () => {
         if (
           node.tagName !== 'SCRIPT' &&
           node.tagName !== 'TEMPLATE' &&
+          node.tagName !== 'template' &&
           !node.hasAttribute('hidden') &&
           !node.hasAttribute('aria-hidden')
         ) {
@@ -153,7 +154,6 @@ describe('ReactDOMFizzServer', () => {
     }
   }
 
-  /*
   function rejectText(text, error) {
     const record = textCache.get(text);
     if (record === undefined) {
@@ -169,7 +169,6 @@ describe('ReactDOMFizzServer', () => {
       thenable.pings.forEach(t => t());
     }
   }
-  */
 
   function readText(text) {
     const record = textCache.get(text);
@@ -800,4 +799,79 @@ describe('ReactDOMFizzServer', () => {
       </div>,
     );
   });
+
+  it('client renders a boundary if it errors before finishing the fallback', async () => {
+    function App({isClient}) {
+      return (
+        <Suspense fallback="Loading root...">
+          <div>
+            <Suspense fallback={<AsyncText text="Loading..." />}>
+              <h1>
+                {isClient ? <Text text="Hello" /> : <AsyncText text="Hello" />}
+              </h1>
+            </Suspense>
+          </div>
+        </Suspense>
+      );
+    }
+
+    const loggedErrors = [];
+    let controls;
+    await act(async () => {
+      controls = ReactDOMFizzServer.pipeToNodeWritable(
+        <App isClient={false} />,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      controls.startWriting();
+    });
+
+    // We're still showing a fallback.
+
+    // Attempt to hydrate the content.
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App isClient={true} />);
+    Scheduler.unstable_flushAll();
+
+    // We're still loading because we're waiting for the server to stream more content.
+    expect(getVisibleChildren(container)).toEqual('Loading root...');
+
+    expect(loggedErrors).toEqual([]);
+
+    const theError = new Error('Test');
+    // Error the content, but we don't have a fallback yet.
+    await act(async () => {
+      rejectText('Hello', theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+
+    // We still can't render it on the client because we haven't unblocked the parent.
+    Scheduler.unstable_flushAll();
+    expect(getVisibleChildren(container)).toEqual('Loading root...');
+
+    // Unblock the loading state
+    await act(async () => {
+      resolveText('Loading...');
+    });
+
+    // Now we're able to show the inner boundary.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // That will let us client render it instead.
+    Scheduler.unstable_flushAll();
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>Hello</h1>
+      </div>,
+    );
+
+    expect(loggedErrors).toEqual([theError]);
+  });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 334d8b38797a..a27a845f422e 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -419,17 +419,30 @@ function renderSuspenseBoundary(
     task.blockedSegment = parentSegment;
   }
 
+  // This injects an extra segment just to contain an empty tag with an ID.
+  // This means that we're not actually using the assignID anywhere.
+  // TODO: Rethink the assignID approach.
+  pushEmpty(boundarySegment.chunks, request.responseState, newBoundary.id);
+  const innerSegment = createPendingSegment(
+    request,
+    boundarySegment.chunks.length,
+    null,
+    boundarySegment.formatContext,
+  );
+  boundarySegment.status = COMPLETED;
+  boundarySegment.children.push(innerSegment);
+
   // 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 = createTask(
     request,
     fallback,
     parentBoundary,
-    boundarySegment,
+    innerSegment,
     fallbackAbortSet,
     task.legacyContext,
     task.context,
-    newBoundary.id, // This is the ID we want to give this fallback so we can replace it later.
+    null,
   );
   // 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.

From 0e100ed00fb52cfd107db1d1081ef18fe4b9167f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 19:37:44 -0400
Subject: [PATCH 0444/1603] Gate a test (#21275)

Rebase error
---
 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 19fde3c4a605..1c7ab533edf8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -800,6 +800,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
   it('client renders a boundary if it errors before finishing the fallback', async () => {
     function App({isClient}) {
       return (

From 96d00b9bba82d9b9f94a4986e52c38b995ef9941 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 14 Apr 2021 23:29:30 -0400
Subject: [PATCH 0445/1603] [Fizz] Random Fixes (#21277)

---
 .../ReactDOMFizzServerBrowser-test.js         |  2 +-
 .../__tests__/ReactDOMFizzServerNode-test.js  |  4 ++--
 .../src/server/ReactDOMServerFormatConfig.js  | 19 +++++++++++++++----
 packages/react-server/src/ReactFizzServer.js  |  3 ++-
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index f805854841ff..71c301134dd0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -56,7 +56,7 @@ describe('ReactDOMFizzServer', () => {
     );
     const result = await readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<div data-reactroot=\\"\\">hello world<!-- --></div>"`,
+      `"<div data-reactroot=\\"\\">hello world</div>"`,
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index cd93ac5a5163..464ee488d25c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -66,7 +66,7 @@ describe('ReactDOMFizzServer', () => {
     startWriting();
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(
-      `"<div data-reactroot=\\"\\">hello world<!-- --></div>"`,
+      `"<div data-reactroot=\\"\\">hello world</div>"`,
     );
   });
 
@@ -84,7 +84,7 @@ describe('ReactDOMFizzServer', () => {
     // Then React starts writing.
     startWriting();
     expect(output.result).toMatchInlineSnapshot(
-      `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\">hello world<!-- --></div>"`,
+      `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\">hello world</div>"`,
     );
   });
 
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 62d27c5e9917..53a4786f73cd 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -563,7 +563,9 @@ function pushInnerHTML(
         'for more information.',
     );
     const html = innerHTML.__html;
-    target.push(stringToChunk(html));
+    if (html !== null && html !== undefined) {
+      target.push(stringToChunk('' + html));
+    }
   }
 }
 
@@ -1079,6 +1081,12 @@ function pushStartGenericElement(
 
   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;
 }
 
@@ -1205,10 +1213,13 @@ function pushStartPreformattedElement(
         'for more information.',
     );
     const html = innerHTML.__html;
-    if (typeof html === 'string' && html[0] === '\n') {
-      target.push(leadingNewline);
+    if (html !== null && html !== undefined) {
+      if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
+        target.push(leadingNewline, stringToChunk(html));
+      } else {
+        target.push(stringToChunk('' + html));
+      }
     }
-    target.push(stringToChunk(html));
   }
   if (typeof children === 'string' && children[0] === '\n') {
     target.push(leadingNewline);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index a27a845f422e..1a838be226c8 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -767,7 +767,8 @@ function renderForwardRef(
   props: Object,
   ref: any,
 ): void {
-  renderWithHooks(request, task, type, props, ref);
+  const children = renderWithHooks(request, task, type.render, props, ref);
+  renderNodeDestructive(request, task, children);
 }
 
 function renderMemo(

From 11b07597ee96305283449e9eae6d12fb6077a9c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 15 Apr 2021 11:06:31 -0400
Subject: [PATCH 0446/1603] Fix classes (#21283)

---
 packages/react-server/src/ReactFizzClassComponent.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
index a7385d54aa78..b0cfc62c12ae 100644
--- a/packages/react-server/src/ReactFizzClassComponent.js
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -609,7 +609,7 @@ export function mountClassInstance(
 
   // The internal instance will be used to manage updates that happen during this mount.
   const internalInstance: InternalInstance = {
-    queue: null,
+    queue: [],
     replace: false,
   };
   setInstance(instance, internalInstance);

From 9eddfbf5af13d95c703c10072c8c2f7c0ddf8071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 15 Apr 2021 13:26:49 -0400
Subject: [PATCH 0447/1603] [Fizz] Two More Fixes (#21288)

* Emit value of option tags

* Mask the legacy context passed to classes
---
 .../react-dom/src/server/ReactDOMServerFormatConfig.js    | 7 ++++---
 packages/react-server/src/ReactFizzServer.js              | 8 ++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 53a4786f73cd..e723299f9242 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -729,15 +729,16 @@ function pushStartOption(
             }
           }
           break;
-        case 'value':
-          value = propValue;
-          break;
         case 'dangerouslySetInnerHTML':
           invariant(
             false,
             '`dangerouslySetInnerHTML` does not work on <option>.',
           );
         // eslint-disable-next-line-no-fallthrough
+        case 'value':
+          value = propValue;
+        // We intentionally fallthrough to also set the attribute on the node.
+        // eslint-disable-next-line-no-fallthrough
         default:
           pushAttribute(target, responseState, propKey, propValue);
           break;
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 1a838be226c8..8b84ce822bcc 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -563,11 +563,11 @@ function renderClassComponent(
   Component: any,
   props: any,
 ): void {
-  const unmaskedContext = !disableLegacyContext
-    ? task.legacyContext
+  const maskedContext = !disableLegacyContext
+    ? getMaskedContext(Component, task.legacyContext)
     : undefined;
-  const instance = constructClassInstance(Component, props, unmaskedContext);
-  mountClassInstance(instance, Component, props, unmaskedContext);
+  const instance = constructClassInstance(Component, props, maskedContext);
+  mountClassInstance(instance, Component, props, maskedContext);
   finishClassComponent(request, task, instance, Component, props);
 }
 

From f3337aa544998be249c63ad3accc5008dbb938ed Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 15 Apr 2021 13:34:54 -0400
Subject: [PATCH 0448/1603] DevTools error boundary: Search for pre-existing GH
 issues (#21279)

---
 packages/react-devtools-shared/package.json   |   1 +
 .../config/DevToolsFeatureFlags.default.js    |   1 +
 .../DevToolsFeatureFlags.extension-fb.js      |   1 +
 .../DevToolsFeatureFlags.extension-oss.js     |   1 +
 .../react-devtools-shared/src/constants.js    |   3 +
 .../src/devtools/views/ErrorBoundary.css      |  54 ------
 .../src/devtools/views/ErrorBoundary.js       | 154 ------------------
 .../views/ErrorBoundary/ErrorBoundary.js      |  91 +++++++++++
 .../devtools/views/ErrorBoundary/ErrorView.js |  46 ++++++
 .../views/ErrorBoundary/ReportNewIssue.js     |  68 ++++++++
 .../ErrorBoundary/SearchingGitHubIssues.js    |  21 +++
 .../ErrorBoundary/SuspendingErrorView.js      |  49 ++++++
 .../ErrorBoundary/UpdateExistingIssue.js      |  38 +++++
 .../views/ErrorBoundary/WorkplaceGroup.js     |  35 ++++
 .../src/devtools/views/ErrorBoundary/cache.js | 134 +++++++++++++++
 .../devtools/views/ErrorBoundary/githubAPI.js |  50 ++++++
 .../src/devtools/views/ErrorBoundary/index.js |  12 ++
 .../devtools/views/ErrorBoundary/shared.css   |  83 ++++++++++
 .../src/devtools/views/Icon.js                |   8 +
 yarn.lock                                     | 123 +++++++++++++-
 20 files changed, 764 insertions(+), 209 deletions(-)
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/index.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css

diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index 09551aadddba..7e83263687aa 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
+    "@octokit/rest": "^18.5.2",
     "@reach/menu-button": "^0.1.17",
     "@reach/tooltip": "^0.2.2",
     "clipboard-js": "^0.3.6",
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index da7784c75937..b9d3ba23e56e 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -14,3 +14,4 @@
  ************************************************************************/
 
 export const enableProfilerChangedHookIndices = false;
+export const isInternalFacebookBuild = 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
index 08fb7178c75b..104cf263091a 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -14,6 +14,7 @@
  ************************************************************************/
 
 export const enableProfilerChangedHookIndices = true;
+export const isInternalFacebookBuild = true;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index 6ad795840d58..4d1b1472bba6 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -14,6 +14,7 @@
  ************************************************************************/
 
 export const enableProfilerChangedHookIndices = false;
+export const isInternalFacebookBuild = false;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index bae23abc0122..7babb90cff37 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -49,6 +49,9 @@ export const CHANGE_LOG_URL =
 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';
+
 // HACK
 //
 // Extracting during build time avoids a temporarily invalid state for the inline target.
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css
deleted file mode 100644
index d16964aabaf2..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.ErrorBoundary {
-  height: 100%;
-  width: 100%;
-  background-color: var(--color-background);
-  padding: 0.5rem;
-  overflow: auto;
-}
-
-.Header {
-  font-size: var(--font-size-sans-large);
-  font-weight: bold;
-  color: var(--color-error-text);
-}
-
-.Stack {
-  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;
-  background-color: var(--color-error-background);
-  border: 1px solid var(--color-error-border);
-  color: var(--color-error-text);
-  border-radius: 0.25rem;
-  padding: 0.5rem;
-}
-
-.IconAndLinkRow {
-  display: flex;
-  align-items: center;
-  margin-top: 0.5rem;
-  color: var(--color-text);
-}
-
-.RetryIcon {
-  margin-right: 0.25rem;
-  color: var(--color-button-active);
-}
-
-.RetryButton {
-  margin-right: 0.25rem;
-  color: var(--color-text);
-}
-.RetryButton:hover {
-  color: var(--color-button-hover);
-}
-
-.ReportIcon {
-  margin-right: 0.25rem;
-}
-
-.ReportLink {
-  color: var(--color-link);
-}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
deleted file mode 100644
index 7b777115d3b5..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {Component} from 'react';
-import Button from './Button';
-import ButtonIcon from './ButtonIcon';
-import Icon from './Icon';
-import styles from './ErrorBoundary.css';
-import Store from 'react-devtools-shared/src/devtools/store';
-
-type Props = {|
-  children: React$Node,
-  onRetry?: (store: Store) => void,
-  store: Store,
-|};
-
-type State = {|
-  callStack: string | null,
-  componentStack: string | null,
-  errorMessage: string | null,
-  hasError: boolean,
-|};
-
-const InitialState: State = {
-  callStack: null,
-  componentStack: null,
-  errorMessage: null,
-  hasError: false,
-};
-
-export default class ErrorBoundary extends Component<Props, State> {
-  state: State = InitialState;
-
-  static getDerivedStateFromError(error: any) {
-    const errorMessage =
-      typeof error === 'object' &&
-      error !== null &&
-      error.hasOwnProperty('message')
-        ? error.message
-        : error;
-
-    return {
-      errorMessage,
-      hasError: true,
-    };
-  }
-
-  componentDidCatch(error: any, {componentStack}: any) {
-    const callStack =
-      typeof error === 'object' &&
-      error !== null &&
-      error.hasOwnProperty('stack')
-        ? error.stack
-            .split('\n')
-            .slice(1)
-            .join('\n')
-        : null;
-
-    this.setState({
-      callStack,
-      componentStack,
-    });
-  }
-
-  render() {
-    const {children} = this.props;
-    const {callStack, componentStack, errorMessage, hasError} = this.state;
-
-    let bugURL = process.env.GITHUB_URL;
-    if (bugURL) {
-      const title = `Error: "${errorMessage || ''}"`;
-      const label = 'Component: Developer Tools';
-
-      let body = 'Describe what you were doing when the bug occurred:';
-      body += '\n1. ';
-      body += '\n2. ';
-      body += '\n3. ';
-      body += '\n\n---------------------------------------------';
-      body += '\nPlease do not remove the text below this line';
-      body += '\n---------------------------------------------';
-      body += `\n\nDevTools version: ${process.env.DEVTOOLS_VERSION || ''}`;
-      if (callStack) {
-        body += `\n\nCall stack: ${callStack.trim()}`;
-      }
-      if (componentStack) {
-        body += `\n\nComponent stack: ${componentStack.trim()}`;
-      }
-
-      bugURL += `/issues/new?labels=${encodeURI(label)}&title=${encodeURI(
-        title,
-      )}&body=${encodeURI(body)}`;
-    }
-
-    if (hasError) {
-      return (
-        <div className={styles.ErrorBoundary}>
-          <div className={styles.Header}>
-            Uncaught Error: {errorMessage || ''}
-          </div>
-          <div className={styles.IconAndLinkRow}>
-            <Button
-              className={styles.RetryButton}
-              title="Retry"
-              onClick={this.handleRetry}>
-              <ButtonIcon className={styles.RetryIcon} type="reload" />
-              Retry
-            </Button>
-            {bugURL && (
-              <>
-                <Icon className={styles.ReportIcon} type="bug" />
-                <a
-                  className={styles.ReportLink}
-                  href={bugURL}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  title="Report bug">
-                  Report this issue
-                </a>
-              </>
-            )}
-          </div>
-          {!!callStack && (
-            <div className={styles.Stack}>
-              The error was thrown {callStack.trim()}
-            </div>
-          )}
-          {!!componentStack && (
-            <div className={styles.Stack}>
-              The error occurred {componentStack.trim()}
-            </div>
-          )}
-        </div>
-      );
-    }
-
-    return children;
-  }
-
-  handleRetry = () => {
-    const {onRetry, store} = this.props;
-    if (typeof onRetry === 'function') {
-      onRetry(store);
-    }
-
-    this.setState(InitialState);
-  };
-}
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 000000000000..3d633cf5dca2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {Component, Suspense} from 'react';
+import ErrorView from './ErrorView';
+import SearchingGitHubIssues from './SearchingGitHubIssues';
+import SuspendingErrorView from './SuspendingErrorView';
+
+type Props = {|
+  children: React$Node,
+|};
+
+type State = {|
+  callStack: string | null,
+  componentStack: string | null,
+  errorMessage: string | null,
+  hasError: boolean,
+|};
+
+const InitialState: State = {
+  callStack: null,
+  componentStack: null,
+  errorMessage: null,
+  hasError: false,
+};
+
+export default class ErrorBoundary extends Component<Props, State> {
+  state: State = InitialState;
+
+  static getDerivedStateFromError(error: any) {
+    const errorMessage =
+      typeof error === 'object' &&
+      error !== null &&
+      error.hasOwnProperty('message')
+        ? error.message
+        : '' + error;
+
+    return {
+      errorMessage,
+      hasError: true,
+    };
+  }
+
+  componentDidCatch(error: any, {componentStack}: any) {
+    const callStack =
+      typeof error === 'object' &&
+      error !== null &&
+      error.hasOwnProperty('stack')
+        ? error.stack
+            .split('\n')
+            .slice(1)
+            .join('\n')
+        : null;
+
+    this.setState({
+      callStack,
+      componentStack,
+    });
+  }
+
+  render() {
+    const {children} = this.props;
+    const {callStack, componentStack, errorMessage, hasError} = this.state;
+
+    if (hasError) {
+      return (
+        <ErrorView
+          callStack={callStack}
+          componentStack={componentStack}
+          errorMessage={errorMessage}>
+          <Suspense fallback={<SearchingGitHubIssues />}>
+            <SuspendingErrorView
+              callStack={callStack}
+              componentStack={componentStack}
+              errorMessage={errorMessage}
+            />
+          </Suspense>
+        </ErrorView>
+      );
+    }
+
+    return children;
+  }
+}
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 000000000000..6ec792408fe9
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * 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 ErrorView({
+  callStack,
+  children,
+  componentStack,
+  errorMessage,
+}: Props) {
+  return (
+    <div className={styles.ErrorBoundary}>
+      {children}
+      <div className={styles.ErrorInfo}>
+        <div className={styles.Header}>
+          Uncaught Error: {errorMessage || ''}
+        </div>
+        {!!callStack && (
+          <div className={styles.Stack}>
+            The error was thrown {callStack.trim()}
+          </div>
+        )}
+        {!!componentStack && (
+          <div className={styles.Stack}>
+            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 000000000000..d54115ef6d7c
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import Icon from '../Icon';
+import styles from './shared.css';
+
+type Props = {|
+  callStack: string | null,
+  componentStack: string | null,
+  errorMessage: string | null,
+|};
+
+export default function ReportNewIssue({
+  callStack,
+  componentStack,
+  errorMessage,
+}: Props) {
+  let bugURL = process.env.GITHUB_URL;
+  if (!bugURL) {
+    return null;
+  }
+
+  const title = `Error: "${errorMessage || ''}"`;
+  const label = 'Component: Developer Tools';
+
+  let body = 'Describe what you were doing when the bug occurred:';
+  body += '\n1. ';
+  body += '\n2. ';
+  body += '\n3. ';
+  body += '\n\n---------------------------------------------';
+  body += '\nPlease do not remove the text below this line';
+  body += '\n---------------------------------------------';
+  body += `\n\nDevTools version: ${process.env.DEVTOOLS_VERSION || ''}`;
+  if (callStack) {
+    body += `\n\nCall stack: ${callStack.trim()}`;
+  }
+  if (componentStack) {
+    body += `\n\nComponent stack: ${componentStack.trim()}`;
+  }
+
+  bugURL += `/issues/new?labels=${encodeURI(label)}&title=${encodeURI(
+    title,
+  )}&body=${encodeURI(body)}`;
+
+  return (
+    <div className={styles.GitHubLinkRow}>
+      <Icon className={styles.ReportIcon} type="bug" />
+      <a
+        className={styles.ReportLink}
+        href={bugURL}
+        rel="noopener noreferrer"
+        target="_blank"
+        title="Report bug">
+        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 000000000000..b7f993b2395d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import LoadingAnimation from 'react-devtools-shared/src/devtools/views/Components/LoadingAnimation';
+import styles from './shared.css';
+
+export default function SearchingGitHubIssues() {
+  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 000000000000..f44e166b3a57
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * 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) {
+  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/UpdateExistingIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
new file mode 100644
index 000000000000..ad1139d935a2
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {GitHubIssue} from './githubAPI';
+
+import * as React from 'react';
+import Icon from '../Icon';
+import styles from './shared.css';
+
+export default function UpdateExistingIssue({
+  gitHubIssue,
+}: {|
+  gitHubIssue: GitHubIssue,
+|}) {
+  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 000000000000..f885f9611f5b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants';
+import Icon from '../Icon';
+import styles from './shared.css';
+
+export default function WorkplaceGroup() {
+  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"
+        title="Report bug">
+        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 000000000000..cc9dca217986
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+import type {GitHubIssue} from './githubAPI';
+
+import {unstable_getCacheForType} from 'react';
+import {searchGitHubIssues} from './githubAPI';
+
+const API_TIMEOUT = 3000;
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingRecord = {|
+  status: 0,
+  value: Wakeable,
+|};
+
+type ResolvedRecord<T> = {|
+  status: 1,
+  value: T,
+|};
+
+type RejectedRecord = {|
+  status: 2,
+  value: null,
+|};
+
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
+
+function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
+  if (record.status === Resolved) {
+    // This is just a type refinement.
+    return record;
+  } else if (record.status === Rejected) {
+    // This is just a type refinement.
+    return record;
+  } else {
+    throw record.value;
+  }
+}
+
+type GitHubIssueMap = Map<string, Record<GitHubIssue>>;
+
+function createMap(): GitHubIssueMap {
+  return new Map();
+}
+
+function getRecordMap(): Map<string, Record<GitHubIssue>> {
+  return unstable_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();
+    const wakeable: Wakeable = {
+      then(callback) {
+        callbacks.add(callback);
+      },
+    };
+    const wake = () => {
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback());
+      callbacks.clear();
+    };
+    const newRecord: Record<GitHubIssue> = (record = {
+      status: Pending,
+      value: wakeable,
+    });
+
+    let didTimeout = false;
+
+    searchGitHubIssues(errorMessage)
+      .then(maybeItem => {
+        if (didTimeout) {
+          return;
+        }
+
+        if (maybeItem) {
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<GitHubIssue>);
+          resolvedRecord.status = Resolved;
+          resolvedRecord.value = maybeItem;
+        } else {
+          const notFoundRecord = ((newRecord: any): RejectedRecord);
+          notFoundRecord.status = Rejected;
+          notFoundRecord.value = null;
+        }
+
+        wake();
+      })
+      .catch(error => {
+        const thrownRecord = ((newRecord: any): RejectedRecord);
+        thrownRecord.status = Rejected;
+        thrownRecord.value = null;
+
+        wake();
+      });
+
+    // Only wait a little while for GitHub results before showing a fallback.
+    setTimeout(() => {
+      didTimeout = true;
+
+      const timedoutRecord = ((newRecord: any): RejectedRecord);
+      timedoutRecord.status = Rejected;
+      timedoutRecord.value = null;
+
+      wake();
+    }, API_TIMEOUT);
+
+    map.set(errorMessage, record);
+  }
+
+  const response = readRecord(record).value;
+  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 000000000000..7f990e4be482
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {Octokit} from '@octokit/rest';
+
+export type GitHubIssue = {|
+  title: string,
+  url: string,
+|};
+
+export async function searchGitHubIssues(
+  message: string,
+): Promise<GitHubIssue | null> {
+  // Remove Fiber IDs from error message (as those will be unique).
+  message = message.replace(/"[0-9]+"/, '');
+
+  const filters = [
+    // Unfortunately "repo" and "org" filters don't work
+    // Hopefully the label filter will be sufficient.
+    'in:title',
+    'is:issue',
+    'is:open',
+    'is:public',
+    'label:"Component: Developer Tools"',
+  ];
+
+  const octokit = new Octokit();
+  const {data} = await octokit.search.issuesAndPullRequests({
+    q: message + ' ' + filters.join(' '),
+  });
+
+  const maybeItem = data.items.find(item =>
+    item.html_url.startsWith('https://github.com/facebook/react/'),
+  );
+
+  if (maybeItem) {
+    return {
+      title: maybeItem.title,
+      url: maybeItem.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 000000000000..0d1d0cc39058
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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 000000000000..267cfad7b7e8
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
@@ -0,0 +1,83 @@
+.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;
+}
+
+.ErrorInfo {
+  padding: 0.5rem;
+  overflow: auto;
+}
+
+.Header {
+  font-size: var(--font-size-sans-large);
+  font-weight: bold;
+  color: var(--color-error-text);
+}
+
+.Stack {
+  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;
+  background-color: var(--color-error-background);
+  border: 1px solid var(--color-error-border);
+  color: var(--color-error-text);
+  border-radius: 0.25rem;
+  padding: 0.5rem;
+}
+
+.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);
+}
+
+.UpdateExistingIssuePrompt {
+  margin-right: 0.25rem;
+  color: var(--color-console-warning-text);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index ce02611127f3..e879acdbfa61 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -17,6 +17,7 @@ export type IconType =
   | 'components'
   | 'copy'
   | 'error'
+  | 'facebook'
   | 'flame-chart'
   | 'interactions'
   | 'profiler'
@@ -52,6 +53,9 @@ export default function Icon({className = '', type}: Props) {
     case 'error':
       pathData = PATH_ERROR;
       break;
+    case 'facebook':
+      pathData = PATH_FACEBOOK;
+      break;
     case 'flame-chart':
       pathData = PATH_FLAME_CHART;
       break;
@@ -117,6 +121,10 @@ const PATH_COPY = `
 
 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,
diff --git a/yarn.lock b/yarn.lock
index 9daccaf78bb3..861beb432555 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1814,6 +1814,26 @@
     read-package-json-fast "^1.1.1"
     readdir-scoped-modules "^1.1.0"
 
+"@octokit/auth-token@^2.4.4":
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
+  integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+
+"@octokit/core@^3.2.3":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-3.4.0.tgz#b48aa27d755b339fe7550548b340dcc2b513b742"
+  integrity sha512-6/vlKPP8NF17cgYXqucdshWqmMZGXkuvtcrWCgU5NOI0Pl2GjlmZyWgBMrU8zJ3v2MJlM6++CiB45VKYmhiWWg==
+  dependencies:
+    "@octokit/auth-token" "^2.4.4"
+    "@octokit/graphql" "^4.5.8"
+    "@octokit/request" "^5.4.12"
+    "@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@^5.1.0":
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-5.3.2.tgz#2deda2d869cac9ba7f370287d55667be2a808d4b"
@@ -1824,6 +1844,49 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
+"@octokit/endpoint@^6.0.1":
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.11.tgz#082adc2aebca6dcefa1fb383f5efb3ed081949d1"
+  integrity sha512-fUIPpx+pZyoLW4GCs3yMnlj2LfoXTWDUVPTC4V3MUEKZm48W+XYpeWSZCv+vYF1ZABUm2CqnDVf1sFtIYrj7KQ==
+  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.6.1"
+  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.6.1.tgz#f975486a46c94b7dbe58a0ca751935edc7e32cc9"
+  integrity sha512-2lYlvf4YTDgZCTXTW4+OX+9WTLFtEUc6hGm4qM1nlZjzxj+arizM4aHWzBVBCxY9glh7GIs0WEuiSgbVzv8cmA==
+  dependencies:
+    "@octokit/request" "^5.3.0"
+    "@octokit/types" "^6.0.3"
+    universal-user-agent "^6.0.0"
+
+"@octokit/openapi-types@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-6.0.0.tgz#7da8d7d5a72d3282c1a3ff9f951c8133a707480d"
+  integrity sha512-CnDdK7ivHkBtJYzWzZm7gEkanA7gKH6a09Eguz7flHw//GacPJLmkHA3f3N++MJmlxD1Fl+mB7B32EEpSCwztQ==
+
+"@octokit/plugin-paginate-rest@^2.6.2":
+  version "2.13.3"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.13.3.tgz#f0f1792230805108762d87906fb02d573b9e070a"
+  integrity sha512-46lptzM9lTeSmIBt/sVP/FLSTPGx6DCzAdSX3PfeJ3mTf4h9sGC26WpaQzMEq/Z44cOcmx8VsOhO+uEgE3cjYg==
+  dependencies:
+    "@octokit/types" "^6.11.0"
+
+"@octokit/plugin-request-log@^1.0.2":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.3.tgz#70a62be213e1edc04bb8897ee48c311482f9700d"
+  integrity sha512-4RFU4li238jMJAzLgAwkBAw+4Loile5haQMQr+uhFq27BmyJXcXSKvoQKqh0agsZEiUlW6iSv3FAgvmGkur7OQ==
+
+"@octokit/plugin-rest-endpoint-methods@5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.0.0.tgz#cf2cdeb24ea829c31688216a5b165010b61f9a98"
+  integrity sha512-Jc7CLNUueIshXT+HWt6T+M0sySPjF32mSFQAK7UfAg8qGeRI6OM1GSBxDLwbXjkqy2NVdnqCedJcP1nC785JYg==
+  dependencies:
+    "@octokit/types" "^6.13.0"
+    deprecation "^2.3.1"
+
 "@octokit/request-error@^1.0.1", "@octokit/request-error@^1.0.2":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-1.0.4.tgz#15e1dc22123ba4a9a4391914d80ec1e5303a23be"
@@ -1832,6 +1895,15 @@
     deprecation "^2.0.0"
     once "^1.4.0"
 
+"@octokit/request-error@^2.0.0", "@octokit/request-error@^2.0.5":
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.0.5.tgz#72cc91edc870281ad583a42619256b380c600143"
+  integrity sha512-T/2wcCFyM7SkXzNoyVNWjyVlUwBvW3igM3Btr/eKYiPmucXTtkxt2RBsf6gn3LTzaLSLTQtNmvg+dGsOxQrjZg==
+  dependencies:
+    "@octokit/types" "^6.0.3"
+    deprecation "^2.0.0"
+    once "^1.4.0"
+
 "@octokit/request@^5.0.0":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.0.2.tgz#59a920451f24811c016ddc507adcc41aafb2dca5"
@@ -1845,6 +1917,18 @@
     once "^1.4.0"
     universal-user-agent "^3.0.0"
 
+"@octokit/request@^5.3.0", "@octokit/request@^5.4.12":
+  version "5.4.15"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.15.tgz#829da413dc7dd3aa5e2cdbb1c7d0ebe1f146a128"
+  integrity sha512-6UnZfZzLwNhdLRreOtTkT9n57ZwulCve8q3IT/Z477vThu6snfdkBuhxnChpOKNGxcQ71ow561Qoa6uqLdPtag==
+  dependencies:
+    "@octokit/endpoint" "^6.0.1"
+    "@octokit/request-error" "^2.0.0"
+    "@octokit/types" "^6.7.1"
+    is-plain-object "^5.0.0"
+    node-fetch "^2.6.1"
+    universal-user-agent "^6.0.0"
+
 "@octokit/rest@^16.14.1":
   version "16.28.7"
   resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.28.7.tgz#a2c2db5b318da84144beba82d19c1a9dbdb1a1fa"
@@ -1864,6 +1948,23 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
+"@octokit/rest@^18.5.2":
+  version "18.5.2"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.5.2.tgz#0369e554b7076e3749005147be94c661c7a5a74b"
+  integrity sha512-Kz03XYfKS0yYdi61BkL9/aJ0pP2A/WK5vF/syhu9/kY30J8He3P68hv9GRpn8bULFx2K0A9MEErn4v3QEdbZcw==
+  dependencies:
+    "@octokit/core" "^3.2.3"
+    "@octokit/plugin-paginate-rest" "^2.6.2"
+    "@octokit/plugin-request-log" "^1.0.2"
+    "@octokit/plugin-rest-endpoint-methods" "5.0.0"
+
+"@octokit/types@^6.0.3", "@octokit/types@^6.11.0", "@octokit/types@^6.13.0", "@octokit/types@^6.7.1":
+  version "6.13.0"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.13.0.tgz#779e5b7566c8dde68f2f6273861dd2f0409480d0"
+  integrity sha512-W2J9qlVIU11jMwKHUp5/rbVUeErqelCsO5vW5PKNb7wAXQVUz87Rc+imjlEvpvbH8yUb+KHmv8NEjVZdsdpyxA==
+  dependencies:
+    "@octokit/openapi-types" "^6.0.0"
+
 "@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"
@@ -3478,6 +3579,11 @@ before-after-hook@^2.0.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.1.0.tgz#b6c03487f44e24200dd30ca5e6a1979c5d2fb635"
   integrity sha512-IWIbu7pMqyw3EAJHzzHbWa85b6oud/yfKYg5rqB5hNE8CeMi3nX+2C2sj0HswfblST86hpVEOAb9x34NZd6P7A==
 
+before-after-hook@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.1.tgz#73540563558687586b52ed217dad6a802ab1549c"
+  integrity sha512-/6FKxSTWoJdbsLDF8tdIjaRiFXiE6UHsEHE3OPI/cwPURCVi1ukP0gmLn7XWEiFk5TcwQjjY5PWsU+j+tgXgmw==
+
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -5140,7 +5246,7 @@ depd@^1.1.2, depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-deprecation@^2.0.0:
+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==
@@ -8128,6 +8234,11 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
+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-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"
@@ -10042,6 +10153,11 @@ node-fetch@^2.3.0, node-fetch@^2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
+node-fetch@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -13801,6 +13917,11 @@ universal-user-agent@^3.0.0:
   dependencies:
     os-name "^3.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"

From 4c9eb2af1e917529cbefa4b4e0c2923efd016ff5 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 15 Apr 2021 15:30:09 -0400
Subject: [PATCH 0449/1603] Add dynamic flags to React Native (#21291)

* Add dynamic flags to React Native

* Hardcode the setting to false instead
---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 47a2ea6ee2ab..4cff77870865 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -60,7 +60,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
-export const enableSyncDefaultUpdates = true;
+export const enableSyncDefaultUpdates = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

From f7cdc893618e9701a8e3403b2b63bfc8233c6771 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 15 Apr 2021 16:31:46 -0400
Subject: [PATCH 0450/1603] Also turn off enableSyncDefaultUpdates in RN test
 renderer (#21293)

---
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 516d578b0d57..e3e4ea0f58a4 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -59,7 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
-export const enableSyncDefaultUpdates = true;
+export const enableSyncDefaultUpdates = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

From cc4b431dab2a9ee296212d698a6034f5fe4ac8c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 15 Apr 2021 19:16:40 -0400
Subject: [PATCH 0451/1603] Mark boundary as client rendered even if aborting
 fallback (#21294)

---
 packages/react-server/src/ReactFizzServer.js | 22 ++++++++------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 8b84ce822bcc..bc3b06449f79 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1245,22 +1245,18 @@ function abortTask(task: Task): void {
   } else {
     boundary.pendingTasks--;
 
-    if (boundary.fallbackAbortableTasks.size > 0) {
-      // 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.
-      // This means that we don't have to client render this boundary because its parent
-      // will be client rendered anyway.
-      boundary.fallbackAbortableTasks.forEach(abortTask, request);
-      boundary.fallbackAbortableTasks.clear();
-    } else {
-      if (!boundary.forceClientRender) {
-        boundary.forceClientRender = true;
-        if (boundary.parentFlushed) {
-          request.clientRenderedBoundaries.push(boundary);
-        }
+    if (!boundary.forceClientRender) {
+      boundary.forceClientRender = true;
+      if (boundary.parentFlushed) {
+        request.clientRenderedBoundaries.push(boundary);
       }
     }
 
+    // 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(abortTask, request);
+    boundary.fallbackAbortableTasks.clear();
+
     request.allPendingTasks--;
     if (request.allPendingTasks === 0) {
       const onCompleteAll = request.onCompleteAll;

From c1a53ad2b2f29f30412c682b42bdd6ac3227eafa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 15 Apr 2021 19:56:41 -0400
Subject: [PATCH 0452/1603] DevTools pre-filter GH issues by repo (#21292)

---
 .../src/devtools/views/ErrorBoundary/githubAPI.js  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
index 7f990e4be482..e8392d89799a 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -21,13 +21,12 @@ export async function searchGitHubIssues(
   message = message.replace(/"[0-9]+"/, '');
 
   const filters = [
-    // Unfortunately "repo" and "org" filters don't work
-    // Hopefully the label filter will be sufficient.
     'in:title',
     'is:issue',
     'is:open',
     'is:public',
     'label:"Component: Developer Tools"',
+    'repo:facebook/react',
   ];
 
   const octokit = new Octokit();
@@ -35,14 +34,11 @@ export async function searchGitHubIssues(
     q: message + ' ' + filters.join(' '),
   });
 
-  const maybeItem = data.items.find(item =>
-    item.html_url.startsWith('https://github.com/facebook/react/'),
-  );
-
-  if (maybeItem) {
+  if (data.items.length > 0) {
+    const item = data.items[0];
     return {
-      title: maybeItem.title,
-      url: maybeItem.html_url,
+      title: item.title,
+      url: item.html_url,
     };
   } else {
     return null;

From 5027eb4650730d2bc7f909f2567828ffdf938642 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 16 Apr 2021 12:01:47 -0400
Subject: [PATCH 0453/1603] DevTools fork console patching logic (#21301)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

React has its own component stack generation code that DevTools embeds a fork of, but both of them use a shared helper for disabling console logs. This shared helper is DEV only though, because it was intended for use with React DEV-only warnings and we didn't want to unnecessarily add bytes to production builds.

But DevTools itself always ships as a production build– even when it's used to debug DEV bundles of product apps (with third party DEV-only warnings). That means this helper was always a noop.

The resolveCurrentDispatcher method was changed recently to replace the thrown error with a call to console.error. This newly logged error ended up slipping through and being user visible because of the above issue.

This PR updates DevTools to also fork the console patching logic (to remove the DEV-only guard).

Note that I didn't spot this earlier because my test harness (react-devtools-shell) always runs in DEV mode. 🤡
---
 .../react-devtools-core/webpack.backend.js    |  3 +
 .../backend/DevToolsComponentStackFrame.js    |  6 +-
 .../src/backend/DevToolsConsolePatching.js    | 90 +++++++++++++++++++
 3 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/backend/DevToolsConsolePatching.js

diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index f111d7330c62..79d97e6a84b3 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -58,6 +58,9 @@ module.exports = {
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),
   ],
+  optimization: {
+    minimize: false,
+  },
   module: {
     rules: [
       {
diff --git a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
index f673dbd7b975..db84d32e2e45 100644
--- a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
+++ b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
@@ -29,9 +29,9 @@ import {
   SUSPENSE_LIST_SYMBOL_STRING,
 } from './ReactSymbols';
 
-// These methods are safe to import from shared;
-// there is no React-specific logic here.
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
+// 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(
diff --git a/packages/react-devtools-shared/src/backend/DevToolsConsolePatching.js b/packages/react-devtools-shared/src/backend/DevToolsConsolePatching.js
new file mode 100644
index 000000000000..4e945726e0bb
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/DevToolsConsolePatching.js
@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// This is a 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) {
+    /* 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 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) {
+    /* eslint-disable react-internal/no-production-logging */
+    const props = {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+    };
+    // $FlowFixMe 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.',
+    );
+  }
+}

From d14b6a4bddda99421df7ed53ae6a7c682c4b50a9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 16 Apr 2021 12:35:29 -0400
Subject: [PATCH 0454/1603] DevTools version bump 4.12.1 -> 4.12.2

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 +++++-
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 05df906770f9..44b9b7ecef97 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.12.1",
+  "version": "4.12.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 6e674216542d..535c9e4942b2 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.12.1",
-  "version_name": "4.12.1",
+  "version": "4.12.2",
+  "version_name": "4.12.2",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 5e125ead626c..78b5a9c11d87 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.12.1",
-  "version_name": "4.12.1",
+  "version": "4.12.2",
+  "version_name": "4.12.2",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index c02e8cc9042d..73fcb2f9e779 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.12.1",
+  "version": "4.12.2",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 876ffdc51b40..1979c0fc6408 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.12.1",
+  "version": "4.12.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index f2f038e94cd6..28f89c1ed931 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,10 +9,14 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 4.12.2 (April 16, 2021)
+#### Bugfix
+* DevTools reliably suppresses console logs when generating component stacks ([bvaughn](https://github.com/bvaughn) in [#21237](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).
+* 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.
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index cfaec58b64f8..9f78fb7a7d6c 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.12.1",
+  "version": "4.12.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.12.1",
+    "react-devtools-core": "4.12.2",
     "update-notifier": "^2.1.0"
   }
 }

From c3cb2c2b30b2d5e767ab57a461441d157bbb5a1e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 16 Apr 2021 16:19:05 -0400
Subject: [PATCH 0455/1603] Fix DevTools test target (#21267)

---
 scripts/jest/jest-cli.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 3edd521b37d1..ed2e6822f3b3 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -104,8 +104,9 @@ function logError(message) {
 }
 function isWWWConfig() {
   return (
-    argv.releaseChannel === 'www-classic' ||
-    argv.releaseChannel === 'www-modern'
+    (argv.releaseChannel === 'www-classic' ||
+      argv.releaseChannel === 'www-modern') &&
+    argv.project !== 'devtools'
   );
 }
 

From af1a4cbf7adf2acae6f869e397198752d150e29a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 16 Apr 2021 16:45:09 -0500
Subject: [PATCH 0456/1603] Revert expiration for retry lanes (#21300)

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.
---
 packages/react-reconciler/src/ReactFiberLane.new.js | 8 +++++++-
 packages/react-reconciler/src/ReactFiberLane.old.js | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 219c8cadb7f9..c9a0702ce7b0 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -362,12 +362,18 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
+      return currentTime + 5000;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
-      return currentTime + 5000;
+      // 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 NoTimestamp;
     case SelectiveHydrationLane:
     case IdleHydrationLane:
     case IdleLane:
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4672d5a92c91..467369229e3c 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -362,12 +362,18 @@ function computeExpirationTime(lane: Lane, currentTime: number) {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
+      return currentTime + 5000;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
-      return currentTime + 5000;
+      // 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 NoTimestamp;
     case SelectiveHydrationLane:
     case IdleHydrationLane:
     case IdleLane:

From 4def1ceee2acc241f2434b2cfab6b8bc4c741cb3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Apr 2021 13:05:28 -0400
Subject: [PATCH 0457/1603] Update DevTools Error strings to support GitHub
 fuzzy search (#21314)

---
 .../src/devtools/ProfilerStore.js                  |  2 +-
 .../react-devtools-shared/src/devtools/store.js    | 14 +++++++-------
 .../react-devtools-shared/src/devtools/utils.js    |  4 ++--
 .../src/devtools/views/ErrorBoundary/githubAPI.js  |  2 +-
 .../devtools/views/Profiler/CommitTreeBuilder.js   | 12 ++++--------
 .../src/devtools/views/Profiler/utils.js           |  8 ++++++--
 .../src/inspectedElementMutableSource.js           |  4 ++--
 packages/react-devtools-shared/src/utils.js        |  2 +-
 8 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
index d1d55bfa3836..1aa84d2da53f 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilerStore.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -113,7 +113,7 @@ export default class ProfilerStore extends EventEmitter<{|
     }
 
     throw Error(
-      `Could not find commit data for root "${rootID}" and commit ${commitIndex}`,
+      `Could not find commit data for root "${rootID}" and commit "${commitIndex}"`,
     );
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index c0083f90a16e..5fa4bff344da 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -794,7 +794,7 @@ export default class Store extends EventEmitter<{|
 
           if (this._idToElement.has(id)) {
             throw Error(
-              `Cannot add node ${id} because a node with that id is already in the Store.`,
+              `Cannot add node "${id}" because a node with that id is already in the Store.`,
             );
           }
 
@@ -857,7 +857,7 @@ export default class Store extends EventEmitter<{|
 
             if (!this._idToElement.has(parentID)) {
               throw Error(
-                `Cannot add child ${id} to parent ${parentID} because parent node was not found in the Store.`,
+                `Cannot add child "${id}" to parent "${parentID}" because parent node was not found in the Store.`,
               );
             }
 
@@ -909,7 +909,7 @@ export default class Store extends EventEmitter<{|
 
             if (!this._idToElement.has(id)) {
               throw Error(
-                `Cannot remove node ${id} because no matching node was found in the Store.`,
+                `Cannot remove node "${id}" because no matching node was found in the Store.`,
               );
             }
 
@@ -918,7 +918,7 @@ export default class Store extends EventEmitter<{|
             const element = ((this._idToElement.get(id): any): Element);
             const {children, ownerID, parentID, weight} = element;
             if (children.length > 0) {
-              throw new Error(`Node ${id} was removed before its children.`);
+              throw new Error(`Node "${id}" was removed before its children.`);
             }
 
             this._idToElement.delete(id);
@@ -941,7 +941,7 @@ export default class Store extends EventEmitter<{|
               parentElement = ((this._idToElement.get(parentID): any): Element);
               if (parentElement === undefined) {
                 throw Error(
-                  `Cannot remove node ${id} from parent ${parentID} because no matching node was found in the Store.`,
+                  `Cannot remove node "${id}" from parent "${parentID}" because no matching node was found in the Store.`,
                 );
               }
               const index = parentElement.children.indexOf(id);
@@ -1002,7 +1002,7 @@ export default class Store extends EventEmitter<{|
 
           if (!this._idToElement.has(id)) {
             throw Error(
-              `Cannot reorder children for node ${id} because no matching node was found in the Store.`,
+              `Cannot reorder children for node "${id}" because no matching node was found in the Store.`,
             );
           }
 
@@ -1055,7 +1055,7 @@ export default class Store extends EventEmitter<{|
           haveErrorsOrWarningsChanged = true;
           break;
         default:
-          throw Error(`Unsupported Bridge operation ${operation}`);
+          throw Error(`Unsupported Bridge operation "${operation}"`);
       }
     }
 
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 4e71d70bd68f..35e34b9c8cf4 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -114,7 +114,7 @@ export function printStore(
         const element = store.getElementAtIndex(i);
 
         if (element == null) {
-          throw Error(`Could not find element at index ${i}`);
+          throw Error(`Could not find element at index "${i}"`);
         }
 
         const printedSelectedMarker = printSelectedMarker(i);
@@ -131,7 +131,7 @@ export function printStore(
     // 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})`,
+        `Inconsistent Store state. Individual root weights ("${rootWeight}") do not match total weight ("${store.numElements}")`,
       );
     }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
index e8392d89799a..571940e79b63 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -18,7 +18,7 @@ export async function searchGitHubIssues(
   message: string,
 ): Promise<GitHubIssue | null> {
   // Remove Fiber IDs from error message (as those will be unique).
-  message = message.replace(/"[0-9]+"/, '');
+  message = message.replace(/"[0-9]+"/g, '');
 
   const filters = [
     'in:title',
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 85b5c875e473..e0b5563f4ad2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -116,7 +116,7 @@ export function getCommitTree({
   }
 
   throw Error(
-    `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit ${commitIndex}`,
+    `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit "${commitIndex}"`,
   );
 }
 
@@ -194,9 +194,7 @@ function updateTree(
 
         if (nodes.has(id)) {
           throw new Error(
-            'Commit tree already contains fiber ' +
-              id +
-              '. This is a bug in React DevTools.',
+            `Commit tree already contains fiber "${id}". This is a bug in React DevTools.`,
           );
         }
 
@@ -269,9 +267,7 @@ function updateTree(
 
           if (!nodes.has(id)) {
             throw new Error(
-              'Commit tree does not contain fiber ' +
-                id +
-                '. This is a bug in React DevTools.',
+              `Commit tree does not contain fiber "${id}". This is a bug in React DevTools.`,
             );
           }
 
@@ -350,7 +346,7 @@ function updateTree(
         break;
 
       default:
-        throw Error(`Unsupported Bridge operation ${operation}`);
+        throw Error(`Unsupported Bridge operation "${operation}"`);
     }
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index 55f7ecb5c145..cace5aaf2ddb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -53,12 +53,16 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
       }) => {
         const operations = operationsByRootID.get(rootID);
         if (operations == null) {
-          throw Error(`Could not find profiling operations for root ${rootID}`);
+          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}`);
+          throw Error(
+            `Could not find profiling snapshots for root "${rootID}"`,
+          );
         }
 
         // Do not filter empty commits from the profiler data!
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index 2504b7932300..f53ab6398b08 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -77,7 +77,7 @@ export function inspectElement({
         // If the Element is still in the Store, we can eagerly remove it from the Map.
         inspectedElementMap.delete(element);
 
-        throw Error(`Element ${id} not found`);
+        throw Error(`Element "${id}" not found`);
 
       case 'full-data':
         const fullData = ((data: any): InspectElementFullData);
@@ -127,6 +127,6 @@ export function inspectElement({
         break;
     }
 
-    throw Error(`Unable to inspect element with id ${id}`);
+    throw Error(`Unable to inspect element with id "${id}"`);
   });
 }
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index be31af5c85ac..aa60acf06e1f 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -241,7 +241,7 @@ export function printOperationsArray(operations: Array<number>) {
         );
         break;
       default:
-        throw Error(`Unsupported Bridge operation ${operation}`);
+        throw Error(`Unsupported Bridge operation "${operation}"`);
     }
   }
 

From 8f202a7c8dc9b1a644f830bf3066b3bb7dfd915d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Apr 2021 13:09:07 -0400
Subject: [PATCH 0458/1603] DevTools version bump 4.12.2 -> 4.12.3

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 +++++-
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 44b9b7ecef97..614c27a9deb1 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.12.2",
+  "version": "4.12.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 535c9e4942b2..c25ccf9c7dbe 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.12.2",
-  "version_name": "4.12.2",
+  "version": "4.12.3",
+  "version_name": "4.12.3",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 78b5a9c11d87..dba1bcd3b962 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.12.2",
-  "version_name": "4.12.2",
+  "version": "4.12.3",
+  "version_name": "4.12.3",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 73fcb2f9e779..920cf91c6ff6 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.12.2",
+  "version": "4.12.3",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 1979c0fc6408..510707fac6eb 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.12.2",
+  "version": "4.12.3",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 28f89c1ed931..c0607e9d92ce 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,9 +9,13 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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/21301))
+
 ## 4.12.2 (April 16, 2021)
 #### Bugfix
-* DevTools reliably suppresses console logs when generating component stacks ([bvaughn](https://github.com/bvaughn) in [#21237](https://github.com/facebook/react/pull/21301))
+* DevTools reliably suppresses console logs when generating component stacks ([bvaughn](https://github.com/bvaughn) in [#21314](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.
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 9f78fb7a7d6c..65454ba8ca39 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.12.2",
+  "version": "4.12.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.12.2",
+    "react-devtools-core": "4.12.3",
     "update-notifier": "^2.1.0"
   }
 }

From b9c6a2b30ea6852da993a20e54089eda9ed4ba9b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Apr 2021 15:16:24 -0400
Subject: [PATCH 0459/1603] Remove LayoutStatic check from commit phase
 (#21249)

---
 .../src/ReactFiberCommitWork.new.js           | 158 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 158 +++++++++---------
 .../ReactSuspenseEffectsSemantics-test.js     |   4 +-
 3 files changed, 166 insertions(+), 154 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 1006a867f39d..4785ff9b24ef 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -81,8 +81,6 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
-  LayoutStatic,
-  RefStatic,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -1027,6 +1025,9 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
   const current = finishedWork.alternate;
   const wasHidden = current !== null && current.memoizedState !== null;
 
+  // Only hide the top-most host nodes.
+  let hiddenHostSubtreeRoot = null;
+
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
     // children to find all the terminal nodes.
@@ -1034,7 +1035,8 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
     while (true) {
       if (node.tag === HostComponent) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
+          hiddenHostSubtreeRoot = node;
           hideInstance(instance);
         } else {
           unhideInstance(node.stateNode, node.memoizedProps);
@@ -1043,16 +1045,13 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
           // This method is called during mutation; it should detach refs within a hidden subtree.
           // Attaching refs should be done elsewhere though (during layout).
-          if ((node.flags & RefStatic) !== NoFlags) {
-            if (isHidden) {
-              safelyDetachRef(node, finishedWork);
-            }
+          // TODO (Offscreen) Also check: flags & RefStatic
+          if (isHidden) {
+            safelyDetachRef(node, finishedWork);
           }
 
-          if (
-            (node.subtreeFlags & (RefStatic | LayoutStatic)) !== NoFlags &&
-            node.child !== null
-          ) {
+          // TODO (Offscreen) Also check: subtreeFlags & (RefStatic | LayoutStatic)
+          if (node.child !== null) {
             node.child.return = node;
             node = node.child;
             continue;
@@ -1060,7 +1059,7 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         }
       } else if (node.tag === HostText) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
           hideTextInstance(instance);
         } else {
           unhideTextInstance(instance, node.memoizedProps);
@@ -1075,43 +1074,42 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         // Don't search any deeper. This tree should remain hidden.
       } else if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
         // When a mounted Suspense subtree gets hidden again, destroy any nested layout effects.
-        if ((node.flags & (RefStatic | LayoutStatic)) !== NoFlags) {
-          switch (node.tag) {
-            case FunctionComponent:
-            case ForwardRef:
-            case MemoComponent:
-            case SimpleMemoComponent: {
-              // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
-              if (isHidden && !wasHidden) {
-                if (
-                  enableProfilerTimer &&
-                  enableProfilerCommitHooks &&
-                  node.mode & ProfileMode
-                ) {
-                  try {
-                    startLayoutEffectTimer();
-                    commitHookEffectListUnmount(HookLayout, node, finishedWork);
-                  } finally {
-                    recordLayoutEffectDuration(node);
-                  }
-                } else {
+        // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+        switch (node.tag) {
+          case FunctionComponent:
+          case ForwardRef:
+          case MemoComponent:
+          case SimpleMemoComponent: {
+            // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
+            if (isHidden && !wasHidden) {
+              if (
+                enableProfilerTimer &&
+                enableProfilerCommitHooks &&
+                node.mode & ProfileMode
+              ) {
+                try {
+                  startLayoutEffectTimer();
                   commitHookEffectListUnmount(HookLayout, node, finishedWork);
+                } finally {
+                  recordLayoutEffectDuration(node);
                 }
+              } else {
+                commitHookEffectListUnmount(HookLayout, node, finishedWork);
               }
-              break;
             }
-            case ClassComponent: {
-              if (isHidden && !wasHidden) {
-                if ((node.flags & RefStatic) !== NoFlags) {
-                  safelyDetachRef(node, finishedWork);
-                }
-                const instance = node.stateNode;
-                if (typeof instance.componentWillUnmount === 'function') {
-                  safelyCallComponentWillUnmount(node, finishedWork, instance);
-                }
+            break;
+          }
+          case ClassComponent: {
+            if (isHidden && !wasHidden) {
+              // TODO (Offscreen) Check: flags & RefStatic
+              safelyDetachRef(node, finishedWork);
+
+              const instance = node.stateNode;
+              if (typeof instance.componentWillUnmount === 'function') {
+                safelyCallComponentWillUnmount(node, finishedWork, instance);
               }
-              break;
             }
+            break;
           }
         }
 
@@ -1133,8 +1131,18 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         if (node.return === null || node.return === finishedWork) {
           return;
         }
+
+        if (hiddenHostSubtreeRoot === node) {
+          hiddenHostSubtreeRoot = null;
+        }
+
         node = node.return;
       }
+
+      if (hiddenHostSubtreeRoot === node) {
+        hiddenHostSubtreeRoot = null;
+      }
+
       node.sibling.return = node.return;
       node = node.sibling;
     }
@@ -2378,11 +2386,9 @@ function commitLayoutEffects_begin(
       if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
         const visibilityChanged =
           !offscreenSubtreeIsHidden && offscreenSubtreeWasHidden;
-        if (
-          visibilityChanged &&
-          (fiber.subtreeFlags & LayoutStatic) !== NoFlags &&
-          firstChild !== null
-        ) {
+
+        // TODO (Offscreen) Also check: subtreeFlags & LayoutStatic
+        if (visibilityChanged && firstChild !== null) {
           // We've just shown or hidden a Offscreen tree that contains layout effects.
           // We only enter this code path for subtrees that are updated,
           // because newly mounted ones would pass the LayoutMask check above.
@@ -2417,42 +2423,42 @@ function commitLayoutMountEffects_complete(
       // Inside of an Offscreen subtree that changed visibility during this commit.
       // If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
       // but if it was just shown, we need to (re)create the effects now.
-      if ((fiber.flags & LayoutStatic) !== NoFlags) {
-        switch (fiber.tag) {
-          case FunctionComponent:
-          case ForwardRef:
-          case SimpleMemoComponent: {
-            if (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              fiber.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
-                safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
-              } finally {
-                recordLayoutEffectDuration(fiber);
-              }
-            } else {
+      // TODO (Offscreen) Check: flags & LayoutStatic
+      switch (fiber.tag) {
+        case FunctionComponent:
+        case ForwardRef:
+        case SimpleMemoComponent: {
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            fiber.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
               safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
+            } finally {
+              recordLayoutEffectDuration(fiber);
             }
-            break;
+          } else {
+            safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
           }
-          case ClassComponent: {
-            const instance = fiber.stateNode;
+          break;
+        }
+        case ClassComponent: {
+          const instance = fiber.stateNode;
+          if (typeof instance.componentDidMount === 'function') {
             safelyCallComponentDidMount(fiber, fiber.return, instance);
-            break;
           }
+          break;
         }
       }
 
-      if ((fiber.flags & RefStatic) !== NoFlags) {
-        switch (fiber.tag) {
-          case ClassComponent:
-          case HostComponent:
-            safelyAttachRef(fiber, fiber.return);
-            break;
-        }
+      // TODO (Offscreen) Check flags & RefStatic
+      switch (fiber.tag) {
+        case ClassComponent:
+        case HostComponent:
+          safelyAttachRef(fiber, fiber.return);
+          break;
       }
     } else if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 05a373c86868..f39c96f5d1df 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -81,8 +81,6 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
-  LayoutStatic,
-  RefStatic,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -1027,6 +1025,9 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
   const current = finishedWork.alternate;
   const wasHidden = current !== null && current.memoizedState !== null;
 
+  // Only hide the top-most host nodes.
+  let hiddenHostSubtreeRoot = null;
+
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
     // children to find all the terminal nodes.
@@ -1034,7 +1035,8 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
     while (true) {
       if (node.tag === HostComponent) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
+          hiddenHostSubtreeRoot = node;
           hideInstance(instance);
         } else {
           unhideInstance(node.stateNode, node.memoizedProps);
@@ -1043,16 +1045,13 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
           // This method is called during mutation; it should detach refs within a hidden subtree.
           // Attaching refs should be done elsewhere though (during layout).
-          if ((node.flags & RefStatic) !== NoFlags) {
-            if (isHidden) {
-              safelyDetachRef(node, finishedWork);
-            }
+          // TODO (Offscreen) Also check: flags & RefStatic
+          if (isHidden) {
+            safelyDetachRef(node, finishedWork);
           }
 
-          if (
-            (node.subtreeFlags & (RefStatic | LayoutStatic)) !== NoFlags &&
-            node.child !== null
-          ) {
+          // TODO (Offscreen) Also check: subtreeFlags & (RefStatic | LayoutStatic)
+          if (node.child !== null) {
             node.child.return = node;
             node = node.child;
             continue;
@@ -1060,7 +1059,7 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         }
       } else if (node.tag === HostText) {
         const instance = node.stateNode;
-        if (isHidden) {
+        if (isHidden && hiddenHostSubtreeRoot === null) {
           hideTextInstance(instance);
         } else {
           unhideTextInstance(instance, node.memoizedProps);
@@ -1075,43 +1074,42 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         // Don't search any deeper. This tree should remain hidden.
       } else if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
         // When a mounted Suspense subtree gets hidden again, destroy any nested layout effects.
-        if ((node.flags & (RefStatic | LayoutStatic)) !== NoFlags) {
-          switch (node.tag) {
-            case FunctionComponent:
-            case ForwardRef:
-            case MemoComponent:
-            case SimpleMemoComponent: {
-              // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
-              if (isHidden && !wasHidden) {
-                if (
-                  enableProfilerTimer &&
-                  enableProfilerCommitHooks &&
-                  node.mode & ProfileMode
-                ) {
-                  try {
-                    startLayoutEffectTimer();
-                    commitHookEffectListUnmount(HookLayout, node, finishedWork);
-                  } finally {
-                    recordLayoutEffectDuration(node);
-                  }
-                } else {
+        // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+        switch (node.tag) {
+          case FunctionComponent:
+          case ForwardRef:
+          case MemoComponent:
+          case SimpleMemoComponent: {
+            // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
+            if (isHidden && !wasHidden) {
+              if (
+                enableProfilerTimer &&
+                enableProfilerCommitHooks &&
+                node.mode & ProfileMode
+              ) {
+                try {
+                  startLayoutEffectTimer();
                   commitHookEffectListUnmount(HookLayout, node, finishedWork);
+                } finally {
+                  recordLayoutEffectDuration(node);
                 }
+              } else {
+                commitHookEffectListUnmount(HookLayout, node, finishedWork);
               }
-              break;
             }
-            case ClassComponent: {
-              if (isHidden && !wasHidden) {
-                if ((node.flags & RefStatic) !== NoFlags) {
-                  safelyDetachRef(node, finishedWork);
-                }
-                const instance = node.stateNode;
-                if (typeof instance.componentWillUnmount === 'function') {
-                  safelyCallComponentWillUnmount(node, finishedWork, instance);
-                }
+            break;
+          }
+          case ClassComponent: {
+            if (isHidden && !wasHidden) {
+              // TODO (Offscreen) Check: flags & RefStatic
+              safelyDetachRef(node, finishedWork);
+
+              const instance = node.stateNode;
+              if (typeof instance.componentWillUnmount === 'function') {
+                safelyCallComponentWillUnmount(node, finishedWork, instance);
               }
-              break;
             }
+            break;
           }
         }
 
@@ -1133,8 +1131,18 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
         if (node.return === null || node.return === finishedWork) {
           return;
         }
+
+        if (hiddenHostSubtreeRoot === node) {
+          hiddenHostSubtreeRoot = null;
+        }
+
         node = node.return;
       }
+
+      if (hiddenHostSubtreeRoot === node) {
+        hiddenHostSubtreeRoot = null;
+      }
+
       node.sibling.return = node.return;
       node = node.sibling;
     }
@@ -2378,11 +2386,9 @@ function commitLayoutEffects_begin(
       if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
         const visibilityChanged =
           !offscreenSubtreeIsHidden && offscreenSubtreeWasHidden;
-        if (
-          visibilityChanged &&
-          (fiber.subtreeFlags & LayoutStatic) !== NoFlags &&
-          firstChild !== null
-        ) {
+
+        // TODO (Offscreen) Also check: subtreeFlags & LayoutStatic
+        if (visibilityChanged && firstChild !== null) {
           // We've just shown or hidden a Offscreen tree that contains layout effects.
           // We only enter this code path for subtrees that are updated,
           // because newly mounted ones would pass the LayoutMask check above.
@@ -2417,42 +2423,42 @@ function commitLayoutMountEffects_complete(
       // Inside of an Offscreen subtree that changed visibility during this commit.
       // If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
       // but if it was just shown, we need to (re)create the effects now.
-      if ((fiber.flags & LayoutStatic) !== NoFlags) {
-        switch (fiber.tag) {
-          case FunctionComponent:
-          case ForwardRef:
-          case SimpleMemoComponent: {
-            if (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              fiber.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
-                safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
-              } finally {
-                recordLayoutEffectDuration(fiber);
-              }
-            } else {
+      // TODO (Offscreen) Check: flags & LayoutStatic
+      switch (fiber.tag) {
+        case FunctionComponent:
+        case ForwardRef:
+        case SimpleMemoComponent: {
+          if (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            fiber.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
               safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
+            } finally {
+              recordLayoutEffectDuration(fiber);
             }
-            break;
+          } else {
+            safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
           }
-          case ClassComponent: {
-            const instance = fiber.stateNode;
+          break;
+        }
+        case ClassComponent: {
+          const instance = fiber.stateNode;
+          if (typeof instance.componentDidMount === 'function') {
             safelyCallComponentDidMount(fiber, fiber.return, instance);
-            break;
           }
+          break;
         }
       }
 
-      if ((fiber.flags & RefStatic) !== NoFlags) {
-        switch (fiber.tag) {
-          case ClassComponent:
-          case HostComponent:
-            safelyAttachRef(fiber, fiber.return);
-            break;
-        }
+      // TODO (Offscreen) Check flags & RefStatic
+      switch (fiber.tag) {
+        case ClassComponent:
+        case HostComponent:
+          safelyAttachRef(fiber, fiber.return);
+          break;
       }
     } else if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index 1dbc4404040f..0c9cca1f730f 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -906,7 +906,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
       expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer', [spanHidden('Inner')]),
+        spanHidden('Outer', [span('Inner')]),
         span('Fallback'),
       ]);
 
@@ -1023,7 +1023,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(Scheduler).toFlushAndYield(['Text:Fallback create passive']);
       expect(ReactNoop.getChildren()).toEqual([
-        spanHidden('Outer', [spanHidden('MemoizedInner')]),
+        spanHidden('Outer', [span('MemoizedInner')]),
         span('Fallback'),
       ]);
 

From 83bdc565f9921c341d558e29401d20151166695b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Apr 2021 21:20:34 -0400
Subject: [PATCH 0460/1603] Remove @octokit/rest dependency from DevTools
 (#21317)

---
 packages/react-devtools-shared/package.json   |   1 -
 .../devtools/views/ErrorBoundary/githubAPI.js |  17 ++-
 yarn.lock                                     | 123 +-----------------
 3 files changed, 11 insertions(+), 130 deletions(-)

diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index 7e83263687aa..09551aadddba 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -8,7 +8,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.11.2",
-    "@octokit/rest": "^18.5.2",
     "@reach/menu-button": "^0.1.17",
     "@reach/tooltip": "^0.2.2",
     "clipboard-js": "^0.3.6",
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
index 571940e79b63..3f63416bc133 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -7,13 +7,13 @@
  * @flow
  */
 
-import {Octokit} from '@octokit/rest';
-
 export type GitHubIssue = {|
   title: string,
   url: string,
 |};
 
+const GITHUB_ISSUES_API = 'https://api.github.com/search/issues';
+
 export async function searchGitHubIssues(
   message: string,
 ): Promise<GitHubIssue | null> {
@@ -29,11 +29,14 @@ export async function searchGitHubIssues(
     'repo:facebook/react',
   ];
 
-  const octokit = new Octokit();
-  const {data} = await octokit.search.issuesAndPullRequests({
-    q: message + ' ' + filters.join(' '),
-  });
-
+  const response = await fetch(
+    GITHUB_ISSUES_API +
+      '?q=' +
+      encodeURIComponent(message) +
+      '%20' +
+      filters.map(encodeURIComponent).join('%20'),
+  );
+  const data = await response.json();
   if (data.items.length > 0) {
     const item = data.items[0];
     return {
diff --git a/yarn.lock b/yarn.lock
index 861beb432555..9daccaf78bb3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1814,26 +1814,6 @@
     read-package-json-fast "^1.1.1"
     readdir-scoped-modules "^1.1.0"
 
-"@octokit/auth-token@^2.4.4":
-  version "2.4.5"
-  resolved "https://registry.yarnpkg.com/@octokit/auth-token/-/auth-token-2.4.5.tgz#568ccfb8cb46f36441fac094ce34f7a875b197f3"
-  integrity sha512-BpGYsPgJt05M7/L/5FoE1PiAbdxXFZkX/3kDYcsvd1v6UhlnE5e96dTDr0ezX/EFwciQxf3cNV0loipsURU+WA==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-
-"@octokit/core@^3.2.3":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@octokit/core/-/core-3.4.0.tgz#b48aa27d755b339fe7550548b340dcc2b513b742"
-  integrity sha512-6/vlKPP8NF17cgYXqucdshWqmMZGXkuvtcrWCgU5NOI0Pl2GjlmZyWgBMrU8zJ3v2MJlM6++CiB45VKYmhiWWg==
-  dependencies:
-    "@octokit/auth-token" "^2.4.4"
-    "@octokit/graphql" "^4.5.8"
-    "@octokit/request" "^5.4.12"
-    "@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@^5.1.0":
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-5.3.2.tgz#2deda2d869cac9ba7f370287d55667be2a808d4b"
@@ -1844,49 +1824,6 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
-"@octokit/endpoint@^6.0.1":
-  version "6.0.11"
-  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-6.0.11.tgz#082adc2aebca6dcefa1fb383f5efb3ed081949d1"
-  integrity sha512-fUIPpx+pZyoLW4GCs3yMnlj2LfoXTWDUVPTC4V3MUEKZm48W+XYpeWSZCv+vYF1ZABUm2CqnDVf1sFtIYrj7KQ==
-  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.6.1"
-  resolved "https://registry.yarnpkg.com/@octokit/graphql/-/graphql-4.6.1.tgz#f975486a46c94b7dbe58a0ca751935edc7e32cc9"
-  integrity sha512-2lYlvf4YTDgZCTXTW4+OX+9WTLFtEUc6hGm4qM1nlZjzxj+arizM4aHWzBVBCxY9glh7GIs0WEuiSgbVzv8cmA==
-  dependencies:
-    "@octokit/request" "^5.3.0"
-    "@octokit/types" "^6.0.3"
-    universal-user-agent "^6.0.0"
-
-"@octokit/openapi-types@^6.0.0":
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/@octokit/openapi-types/-/openapi-types-6.0.0.tgz#7da8d7d5a72d3282c1a3ff9f951c8133a707480d"
-  integrity sha512-CnDdK7ivHkBtJYzWzZm7gEkanA7gKH6a09Eguz7flHw//GacPJLmkHA3f3N++MJmlxD1Fl+mB7B32EEpSCwztQ==
-
-"@octokit/plugin-paginate-rest@^2.6.2":
-  version "2.13.3"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.13.3.tgz#f0f1792230805108762d87906fb02d573b9e070a"
-  integrity sha512-46lptzM9lTeSmIBt/sVP/FLSTPGx6DCzAdSX3PfeJ3mTf4h9sGC26WpaQzMEq/Z44cOcmx8VsOhO+uEgE3cjYg==
-  dependencies:
-    "@octokit/types" "^6.11.0"
-
-"@octokit/plugin-request-log@^1.0.2":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.3.tgz#70a62be213e1edc04bb8897ee48c311482f9700d"
-  integrity sha512-4RFU4li238jMJAzLgAwkBAw+4Loile5haQMQr+uhFq27BmyJXcXSKvoQKqh0agsZEiUlW6iSv3FAgvmGkur7OQ==
-
-"@octokit/plugin-rest-endpoint-methods@5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-5.0.0.tgz#cf2cdeb24ea829c31688216a5b165010b61f9a98"
-  integrity sha512-Jc7CLNUueIshXT+HWt6T+M0sySPjF32mSFQAK7UfAg8qGeRI6OM1GSBxDLwbXjkqy2NVdnqCedJcP1nC785JYg==
-  dependencies:
-    "@octokit/types" "^6.13.0"
-    deprecation "^2.3.1"
-
 "@octokit/request-error@^1.0.1", "@octokit/request-error@^1.0.2":
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-1.0.4.tgz#15e1dc22123ba4a9a4391914d80ec1e5303a23be"
@@ -1895,15 +1832,6 @@
     deprecation "^2.0.0"
     once "^1.4.0"
 
-"@octokit/request-error@^2.0.0", "@octokit/request-error@^2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@octokit/request-error/-/request-error-2.0.5.tgz#72cc91edc870281ad583a42619256b380c600143"
-  integrity sha512-T/2wcCFyM7SkXzNoyVNWjyVlUwBvW3igM3Btr/eKYiPmucXTtkxt2RBsf6gn3LTzaLSLTQtNmvg+dGsOxQrjZg==
-  dependencies:
-    "@octokit/types" "^6.0.3"
-    deprecation "^2.0.0"
-    once "^1.4.0"
-
 "@octokit/request@^5.0.0":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.0.2.tgz#59a920451f24811c016ddc507adcc41aafb2dca5"
@@ -1917,18 +1845,6 @@
     once "^1.4.0"
     universal-user-agent "^3.0.0"
 
-"@octokit/request@^5.3.0", "@octokit/request@^5.4.12":
-  version "5.4.15"
-  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.4.15.tgz#829da413dc7dd3aa5e2cdbb1c7d0ebe1f146a128"
-  integrity sha512-6UnZfZzLwNhdLRreOtTkT9n57ZwulCve8q3IT/Z477vThu6snfdkBuhxnChpOKNGxcQ71ow561Qoa6uqLdPtag==
-  dependencies:
-    "@octokit/endpoint" "^6.0.1"
-    "@octokit/request-error" "^2.0.0"
-    "@octokit/types" "^6.7.1"
-    is-plain-object "^5.0.0"
-    node-fetch "^2.6.1"
-    universal-user-agent "^6.0.0"
-
 "@octokit/rest@^16.14.1":
   version "16.28.7"
   resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.28.7.tgz#a2c2db5b318da84144beba82d19c1a9dbdb1a1fa"
@@ -1948,23 +1864,6 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
-"@octokit/rest@^18.5.2":
-  version "18.5.2"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-18.5.2.tgz#0369e554b7076e3749005147be94c661c7a5a74b"
-  integrity sha512-Kz03XYfKS0yYdi61BkL9/aJ0pP2A/WK5vF/syhu9/kY30J8He3P68hv9GRpn8bULFx2K0A9MEErn4v3QEdbZcw==
-  dependencies:
-    "@octokit/core" "^3.2.3"
-    "@octokit/plugin-paginate-rest" "^2.6.2"
-    "@octokit/plugin-request-log" "^1.0.2"
-    "@octokit/plugin-rest-endpoint-methods" "5.0.0"
-
-"@octokit/types@^6.0.3", "@octokit/types@^6.11.0", "@octokit/types@^6.13.0", "@octokit/types@^6.7.1":
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-6.13.0.tgz#779e5b7566c8dde68f2f6273861dd2f0409480d0"
-  integrity sha512-W2J9qlVIU11jMwKHUp5/rbVUeErqelCsO5vW5PKNb7wAXQVUz87Rc+imjlEvpvbH8yUb+KHmv8NEjVZdsdpyxA==
-  dependencies:
-    "@octokit/openapi-types" "^6.0.0"
-
 "@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"
@@ -3579,11 +3478,6 @@ before-after-hook@^2.0.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.1.0.tgz#b6c03487f44e24200dd30ca5e6a1979c5d2fb635"
   integrity sha512-IWIbu7pMqyw3EAJHzzHbWa85b6oud/yfKYg5rqB5hNE8CeMi3nX+2C2sj0HswfblST86hpVEOAb9x34NZd6P7A==
 
-before-after-hook@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.1.tgz#73540563558687586b52ed217dad6a802ab1549c"
-  integrity sha512-/6FKxSTWoJdbsLDF8tdIjaRiFXiE6UHsEHE3OPI/cwPURCVi1ukP0gmLn7XWEiFk5TcwQjjY5PWsU+j+tgXgmw==
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
@@ -5246,7 +5140,7 @@ depd@^1.1.2, depd@~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:
+deprecation@^2.0.0:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/deprecation/-/deprecation-2.3.1.tgz#6368cbdb40abf3373b525ac87e4a260c3a700919"
   integrity sha512-xmHIy4F3scKVwMsQ4WnVaS8bHOx0DmVwRywosKhaILI0ywMDWPtBSku2HNxRvF7jtwDRsoEwYQSfbxj8b7RlJQ==
@@ -8234,11 +8128,6 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
-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-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"
@@ -10153,11 +10042,6 @@ node-fetch@^2.3.0, node-fetch@^2.6.0:
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
   integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
 
-node-fetch@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
-
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -13917,11 +13801,6 @@ universal-user-agent@^3.0.0:
   dependencies:
     os-name "^3.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"

From 7becb2ff1befe8788f30268ebd8ad59aefcdb4f1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Apr 2021 21:23:01 -0400
Subject: [PATCH 0461/1603] DevTools version bump 4.12.3 -> 4.12.4

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 8 ++++++--
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 614c27a9deb1..baee98ad3c83 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.12.3",
+  "version": "4.12.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index c25ccf9c7dbe..fcbd0a3dfac7 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.12.3",
-  "version_name": "4.12.3",
+  "version": "4.12.4",
+  "version_name": "4.12.4",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index dba1bcd3b962..7fe8faaae125 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.12.3",
-  "version_name": "4.12.3",
+  "version": "4.12.4",
+  "version_name": "4.12.4",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 920cf91c6ff6..e5144dca40c7 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.12.3",
+  "version": "4.12.4",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 510707fac6eb..cdee9f7f3b62 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.12.3",
+  "version": "4.12.4",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index c0607e9d92ce..c6ec867e93fe 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,13 +9,17 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 4.12.4 (April 19, 2021)
+#### Bugfix
+* Remove `@octokit/rest` depedency 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/21301))
+* 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 [#21314](https://github.com/facebook/react/pull/21301))
+* 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.
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 65454ba8ca39..932a97a11298 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.12.3",
+  "version": "4.12.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.12.3",
+    "react-devtools-core": "4.12.4",
     "update-notifier": "^2.1.0"
   }
 }

From cdb6b4c554bb40654d6c3e72f06b29003bec8dc7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 19 Apr 2021 21:33:42 -0400
Subject: [PATCH 0462/1603] Only hide outermost host nodes when Offscreen is
 hidden (#21250)

---
 .../src/ReactFiberCommitWork.new.js           |  39 ++++---
 .../src/ReactFiberCommitWork.old.js           |  39 ++++---
 .../ReactSuspenseEffectsSemantics-test.js     | 110 ++++++++++++++++++
 3 files changed, 154 insertions(+), 34 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 4785ff9b24ef..1e1a3f0b9845 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1025,8 +1025,8 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
   const current = finishedWork.alternate;
   const wasHidden = current !== null && current.memoizedState !== null;
 
-  // Only hide the top-most host nodes.
-  let hiddenHostSubtreeRoot = null;
+  // Only hide or unhide the top-most host nodes.
+  let hostSubtreeRoot = null;
 
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
@@ -1034,12 +1034,15 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
     let node: Fiber = finishedWork;
     while (true) {
       if (node.tag === HostComponent) {
-        const instance = node.stateNode;
-        if (isHidden && hiddenHostSubtreeRoot === null) {
-          hiddenHostSubtreeRoot = node;
-          hideInstance(instance);
-        } else {
-          unhideInstance(node.stateNode, node.memoizedProps);
+        if (hostSubtreeRoot === null) {
+          hostSubtreeRoot = node;
+
+          const instance = node.stateNode;
+          if (isHidden) {
+            hideInstance(instance);
+          } else {
+            unhideInstance(node.stateNode, node.memoizedProps);
+          }
         }
 
         if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
@@ -1058,11 +1061,13 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
           }
         }
       } else if (node.tag === HostText) {
-        const instance = node.stateNode;
-        if (isHidden && hiddenHostSubtreeRoot === null) {
-          hideTextInstance(instance);
-        } else {
-          unhideTextInstance(instance, node.memoizedProps);
+        if (hostSubtreeRoot === null) {
+          const instance = node.stateNode;
+          if (isHidden) {
+            hideTextInstance(instance);
+          } else {
+            unhideTextInstance(instance, node.memoizedProps);
+          }
         }
       } else if (
         (node.tag === OffscreenComponent ||
@@ -1132,15 +1137,15 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
           return;
         }
 
-        if (hiddenHostSubtreeRoot === node) {
-          hiddenHostSubtreeRoot = null;
+        if (hostSubtreeRoot === node) {
+          hostSubtreeRoot = null;
         }
 
         node = node.return;
       }
 
-      if (hiddenHostSubtreeRoot === node) {
-        hiddenHostSubtreeRoot = null;
+      if (hostSubtreeRoot === node) {
+        hostSubtreeRoot = null;
       }
 
       node.sibling.return = node.return;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index f39c96f5d1df..f631c0131aff 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1025,8 +1025,8 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
   const current = finishedWork.alternate;
   const wasHidden = current !== null && current.memoizedState !== null;
 
-  // Only hide the top-most host nodes.
-  let hiddenHostSubtreeRoot = null;
+  // Only hide or unhide the top-most host nodes.
+  let hostSubtreeRoot = null;
 
   if (supportsMutation) {
     // We only have the top Fiber that was inserted but we need to recurse down its
@@ -1034,12 +1034,15 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
     let node: Fiber = finishedWork;
     while (true) {
       if (node.tag === HostComponent) {
-        const instance = node.stateNode;
-        if (isHidden && hiddenHostSubtreeRoot === null) {
-          hiddenHostSubtreeRoot = node;
-          hideInstance(instance);
-        } else {
-          unhideInstance(node.stateNode, node.memoizedProps);
+        if (hostSubtreeRoot === null) {
+          hostSubtreeRoot = node;
+
+          const instance = node.stateNode;
+          if (isHidden) {
+            hideInstance(instance);
+          } else {
+            unhideInstance(node.stateNode, node.memoizedProps);
+          }
         }
 
         if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
@@ -1058,11 +1061,13 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
           }
         }
       } else if (node.tag === HostText) {
-        const instance = node.stateNode;
-        if (isHidden && hiddenHostSubtreeRoot === null) {
-          hideTextInstance(instance);
-        } else {
-          unhideTextInstance(instance, node.memoizedProps);
+        if (hostSubtreeRoot === null) {
+          const instance = node.stateNode;
+          if (isHidden) {
+            hideTextInstance(instance);
+          } else {
+            unhideTextInstance(instance, node.memoizedProps);
+          }
         }
       } else if (
         (node.tag === OffscreenComponent ||
@@ -1132,15 +1137,15 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
           return;
         }
 
-        if (hiddenHostSubtreeRoot === node) {
-          hiddenHostSubtreeRoot = null;
+        if (hostSubtreeRoot === node) {
+          hostSubtreeRoot = null;
         }
 
         node = node.return;
       }
 
-      if (hiddenHostSubtreeRoot === node) {
-        hiddenHostSubtreeRoot = null;
+      if (hostSubtreeRoot === node) {
+        hostSubtreeRoot = null;
       }
 
       node.sibling.return = node.return;
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index 0c9cca1f730f..1cf5d3014f88 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -1284,6 +1284,116 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
+    // @gate enableSuspenseLayoutEffectSemantics
+    // @gate enableCache
+    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 ReactNoop.act(async () => {
+        ReactNoop.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Text:Outer create layout',
+        'Text:Inner create layout',
+        'Text:Outer create passive',
+        'Text:Inner create passive',
+      ]);
+      expect(ReactNoop.getChildren()).toEqual([span('Outer'), span('Inner')]);
+
+      // Suspend the inner Suspense subtree (only inner effects should be destroyed)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App innerChildren={<AsyncText text="InnerAsync_1" ms={1000} />} />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+        'Text:Inner destroy layout',
+        'Text:InnerFallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:InnerFallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        span('Outer'),
+        spanHidden('Inner'),
+        span('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.)
+      ReactNoop.act(() => {
+        ReactNoop.render(
+          <App
+            outerChildren={<AsyncText text="OuterAsync_1" ms={1000} />}
+            innerChildren={<AsyncText text="InnerAsync_1" ms={1000} />}
+          />,
+        );
+      });
+      await advanceTimers(1000);
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'Suspend:OuterAsync_1',
+        'Text:Inner render',
+        'Suspend:InnerAsync_1',
+        'Text:InnerFallback render',
+        'Text:OuterFallback render',
+        'Text:Outer destroy layout',
+        'Text:InnerFallback destroy layout',
+        'Text:OuterFallback create layout',
+      ]);
+      expect(Scheduler).toFlushAndYield(['Text:OuterFallback create passive']);
+      expect(ReactNoop.getChildren()).toEqual([
+        spanHidden('Outer'),
+        spanHidden('Inner'),
+        spanHidden('InnerFallback'),
+        span('OuterFallback'),
+      ]);
+
+      // Resolve both suspended trees.
+      await ReactNoop.act(async () => {
+        await resolveText('OuterAsync_1');
+        await resolveText('InnerAsync_1');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Text:Outer render',
+        'AsyncText:OuterAsync_1 render',
+        'Text:Inner render',
+        'AsyncText:InnerAsync_1 render',
+        'Text:OuterFallback destroy layout',
+        '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.getChildren()).toEqual([
+        span('Outer'),
+        span('OuterAsync_1'),
+        span('Inner'),
+        span('InnerAsync_1'),
+      ]);
+    });
+
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be cleaned up inside of a fallback that suspends', async () => {

From a3a7adb83ea28667714df91ef7e03dbe358330c3 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 20 Apr 2021 01:20:48 -0400
Subject: [PATCH 0463/1603] Turn off enableSyncDefaultUpdates in test renderer
 (#21319)

---
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7bbc30f7cb46..4d762c08277c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -59,7 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
-export const enableSyncDefaultUpdates = true;
+export const enableSyncDefaultUpdates = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

From 78120032d4ca7ee8611d630d7c67e7808885dfe9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 20 Apr 2021 10:25:31 -0500
Subject: [PATCH 0464/1603] Remove `flushDiscreteUpdates` from end of event
 (#21223)

We don't need this anymore because we flush in a microtask.

This should allow us to remove the logic in the event system that
tracks nested event dispatches.

I added a test to confirm that nested event dispatches don't triggger
a synchronous flush, like they would if we wrapped them `flushSync`. It
already passed; I added it to prevent a regression.
---
 .../__tests__/ReactDOMNestedEvents-test.js    | 78 +++++++++++++++++++
 .../src/events/ReactDOMEventListener.js       | 20 +----
 .../src/events/ReactDOMUpdateBatching.js      |  7 --
 .../DOMPluginEventSystem-test.internal.js     | 36 ++++++---
 .../react-native-renderer/src/ReactFabric.js  |  2 -
 .../src/ReactNativeRenderer.js                |  2 -
 .../src/legacy-events/ReactGenericBatching.js | 11 ---
 7 files changed, 106 insertions(+), 50 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js

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 000000000000..2de9a3127d33
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+describe('ReactDOMNestedEvents', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let TestUtils;
+  let act;
+  let useState;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    TestUtils = require('react-dom/test-utils');
+    act = TestUtils.unstable_concurrentAct;
+    useState = React.useState;
+  });
+
+  // @gate experimental
+  test('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.unstable_yieldValue(
+          '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 = ReactDOM.unstable_createRoot(container);
+
+    await act(async () => {
+      root.render(<App />);
+    });
+    expect(buttonRef.current.innerHTML).toEqual(
+      'Clicked: false, Focused: false',
+    );
+
+    await act(async () => {
+      buttonRef.current.click();
+    });
+    expect(Scheduler).toHaveYielded([
+      '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/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index f09d6ee86448..81b3a1b85dce 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -25,21 +25,13 @@ import {
   getSuspenseInstanceFromFiber,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
-import {
-  type EventSystemFlags,
-  IS_CAPTURE_PHASE,
-  IS_LEGACY_FB_SUPPORT_MODE,
-} from './EventSystemFlags';
+import {type EventSystemFlags, IS_CAPTURE_PHASE} from './EventSystemFlags';
 
 import getEventTarget from './getEventTarget';
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 
-import {enableLegacyFBSupport} from 'shared/ReactFeatureFlags';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
-import {
-  flushDiscreteUpdatesIfNeeded,
-  discreteUpdates,
-} from './ReactDOMUpdateBatching';
+import {discreteUpdates} from './ReactDOMUpdateBatching';
 
 import {
   getCurrentPriorityLevel as getCurrentSchedulerPriorityLevel,
@@ -120,14 +112,6 @@ function dispatchDiscreteEvent(
   container,
   nativeEvent,
 ) {
-  if (
-    !enableLegacyFBSupport ||
-    // If we are in Legacy FB support mode, it means we've already
-    // flushed for this event and we don't need to do it again.
-    (eventSystemFlags & IS_LEGACY_FB_SUPPORT_MODE) === 0
-  ) {
-    flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
-  }
   discreteUpdates(
     dispatchEvent,
     domEventName,
diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index 283afb5b84d6..c768bce0c3a7 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -88,13 +88,6 @@ export function discreteUpdates(fn, a, b, c, d) {
   }
 }
 
-// TODO: Replace with flushSync
-export function flushDiscreteUpdatesIfNeeded(timeStamp: number) {
-  if (!isInsideEventHandler) {
-    flushDiscreteUpdatesImpl();
-  }
-}
-
 export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 7d37d5b61e86..44353e6fb442 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -656,7 +656,7 @@ describe('DOMPluginEventSystem', () => {
           document.body.removeChild(parentContainer);
         });
 
-        it('handle click events on dynamic portals', () => {
+        it('handle click events on dynamic portals', async () => {
           const log = [];
 
           function Parent() {
@@ -670,7 +670,7 @@ describe('DOMPluginEventSystem', () => {
                   ref.current,
                 ),
               );
-            });
+            }, []);
 
             return (
               <div ref={ref} onClick={() => log.push('parent')} id="parent">
@@ -679,17 +679,25 @@ describe('DOMPluginEventSystem', () => {
             );
           }
 
-          ReactDOM.render(<Parent />, container);
+          await act(async () => {
+            ReactDOM.render(<Parent />, container);
+          });
 
           const parent = container.lastChild;
           expect(parent.id).toEqual('parent');
-          dispatchClickEvent(parent);
+
+          await act(async () => {
+            dispatchClickEvent(parent);
+          });
 
           expect(log).toEqual(['parent']);
 
           const child = parent.lastChild;
           expect(child.id).toEqual('child');
-          dispatchClickEvent(child);
+
+          await act(async () => {
+            dispatchClickEvent(child);
+          });
 
           // we add both 'child' and 'parent' due to bubbling
           expect(log).toEqual(['parent', 'child', 'parent']);
@@ -697,7 +705,7 @@ describe('DOMPluginEventSystem', () => {
 
         // Slight alteration to the last test, to catch
         // a subtle difference in traversal.
-        it('handle click events on dynamic portals #2', () => {
+        it('handle click events on dynamic portals #2', async () => {
           const log = [];
 
           function Parent() {
@@ -711,7 +719,7 @@ describe('DOMPluginEventSystem', () => {
                   ref.current,
                 ),
               );
-            });
+            }, []);
 
             return (
               <div ref={ref} onClick={() => log.push('parent')} id="parent">
@@ -720,17 +728,25 @@ describe('DOMPluginEventSystem', () => {
             );
           }
 
-          ReactDOM.render(<Parent />, container);
+          await act(async () => {
+            ReactDOM.render(<Parent />, container);
+          });
 
           const parent = container.lastChild;
           expect(parent.id).toEqual('parent');
-          dispatchClickEvent(parent);
+
+          await act(async () => {
+            dispatchClickEvent(parent);
+          });
 
           expect(log).toEqual(['parent']);
 
           const child = parent.lastChild;
           expect(child.id).toEqual('child');
-          dispatchClickEvent(child);
+
+          await act(async () => {
+            dispatchClickEvent(child);
+          });
 
           // we add both 'child' and 'parent' due to bubbling
           expect(log).toEqual(['parent', 'child', 'parent']);
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 5f797c0dcfa3..9f1f44f51cf4 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -19,7 +19,6 @@ import {
   batchedEventUpdates,
   batchedUpdates as batchedUpdatesImpl,
   discreteUpdates,
-  flushDiscreteUpdates,
   createContainer,
   updateContainer,
   injectIntoDevTools,
@@ -242,7 +241,6 @@ function createPortal(
 setBatchingImplementation(
   batchedUpdatesImpl,
   discreteUpdates,
-  flushDiscreteUpdates,
   batchedEventUpdates,
 );
 
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 1e7b390f9ff3..de42c6e41a58 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -19,7 +19,6 @@ import {
   batchedUpdates as batchedUpdatesImpl,
   batchedEventUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   createContainer,
   updateContainer,
   injectIntoDevTools,
@@ -241,7 +240,6 @@ function createPortal(
 setBatchingImplementation(
   batchedUpdatesImpl,
   discreteUpdates,
-  flushDiscreteUpdates,
   batchedEventUpdates,
 );
 
diff --git a/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js b/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
index 89bbdd203b14..3b30bb274ff1 100644
--- a/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
+++ b/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
@@ -18,7 +18,6 @@ let batchedUpdatesImpl = function(fn, bookkeeping) {
 let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
-let flushDiscreteUpdatesImpl = function() {};
 let batchedEventUpdatesImpl = batchedUpdatesImpl;
 
 let isInsideEventHandler = false;
@@ -59,25 +58,15 @@ export function discreteUpdates(fn, a, b, c, d) {
     return discreteUpdatesImpl(fn, a, b, c, d);
   } finally {
     isInsideEventHandler = prevIsInsideEventHandler;
-    if (!isInsideEventHandler) {
-    }
-  }
-}
-
-export function flushDiscreteUpdatesIfNeeded() {
-  if (!isInsideEventHandler) {
-    flushDiscreteUpdatesImpl();
   }
 }
 
 export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
-  _flushDiscreteUpdatesImpl,
   _batchedEventUpdatesImpl,
 ) {
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
-  flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
   batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
 }

From bd7f4a013be3ef272a01874532bee71ad861e617 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 20 Apr 2021 11:14:55 -0500
Subject: [PATCH 0465/1603] Fix sloppy factoring in `performSyncWorkOnRoot`
 (#21246)

* Warn if `finishedLanes` is empty in commit phase

See #21233 for context.

* Fix sloppy factoring when assigning finishedLanes

`finishedLanes` is assigned in `performSyncWorkOnRoot` and
`performSyncWorkOnRoot`. It's meant to represent whichever lanes we
used to render, but because of some sloppy factoring, it can sometimes
equal `NoLanes`.

The fixes are:
- Always check if the lanes are not `NoLanes` before entering the work
loop. There was a branch where this wasn't always true.
- In `performSyncWorkOnRoot`, don't assume the next lanes are sync; the
priority may have changed, or they may have been flushed by a
previous task.
- Don't re-assign the `lanes` variable (the one that gets assigned to
`finishedLanes` until right before we enter the work loop, so that it
is always corresponds to the newest complete root.
---
 .../src/ReactFiberLane.new.js                 |  6 --
 .../src/ReactFiberLane.old.js                 |  6 --
 .../src/ReactFiberWorkLoop.new.js             | 60 +++++++++++++------
 .../src/ReactFiberWorkLoop.old.js             | 60 +++++++++++++------
 4 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index c9a0702ce7b0..c4332d1b148d 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -614,12 +614,6 @@ export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
   root.pendingLanes |= SyncLane;
 }
 
-export function areLanesExpired(root: FiberRoot, lanes: Lanes) {
-  const SyncLaneIndex = 0;
-  const entanglements = root.entanglements;
-  return (entanglements[SyncLaneIndex] & lanes) !== NoLanes;
-}
-
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
   root.mutableReadLanes |= updateLane & root.pendingLanes;
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 467369229e3c..05626e7a7376 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -614,12 +614,6 @@ export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
   root.pendingLanes |= SyncLane;
 }
 
-export function areLanesExpired(root: FiberRoot, lanes: Lanes) {
-  const SyncLaneIndex = 0;
-  const entanglements = root.entanglements;
-  return (entanglements[SyncLaneIndex] & lanes) !== NoLanes;
-}
-
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
   root.mutableReadLanes |= updateLane & root.pendingLanes;
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index bd65591558be..bcfb82da57f8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -163,7 +163,6 @@ import {
   markRootPinged,
   markRootExpired,
   markRootFinished,
-  areLanesExpired,
   getHighestPriorityLane,
   addFiberToLanesMap,
   movePendingFibersToMemoized,
@@ -840,9 +839,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       // synchronously to block concurrent data mutations, and we'll includes
       // all pending updates are included. If it still fails after the second
       // attempt, we'll give up and commit the resulting tree.
-      lanes = getLanesToRetrySynchronouslyOnError(root);
-      if (lanes !== NoLanes) {
-        exitStatus = renderRootSync(root, lanes);
+      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+      if (errorRetryLanes !== NoLanes) {
+        lanes = errorRetryLanes;
+        exitStatus = renderRootSync(root, errorRetryLanes);
       }
     }
 
@@ -1007,21 +1007,29 @@ function performSyncWorkOnRoot(root) {
 
   flushPassiveEffects();
 
-  let lanes;
-  let exitStatus;
-  if (
-    root === workInProgressRoot &&
-    areLanesExpired(root, workInProgressRootRenderLanes)
+  let lanes = getNextLanes(root, NoLanes);
+  if (includesSomeLane(lanes, SyncLane)) {
+    if (
+      root === workInProgressRoot &&
+      includesSomeLane(lanes, workInProgressRootRenderLanes)
+    ) {
+      // There's a partial tree, and at least one of its lanes has expired. Finish
+      // rendering it before rendering the rest of the expired work.
+      lanes = workInProgressRootRenderLanes;
+    }
+  } else if (
+    !(
+      enableSyncDefaultUpdates &&
+      (includesSomeLane(lanes, DefaultLane) ||
+        includesSomeLane(lanes, DefaultHydrationLane))
+    )
   ) {
-    // There's a partial tree, and at least one of its lanes has expired. Finish
-    // rendering it before rendering the rest of the expired work.
-    lanes = workInProgressRootRenderLanes;
-    exitStatus = renderRootSync(root, lanes);
-  } else {
-    lanes = getNextLanes(root, NoLanes);
-    exitStatus = renderRootSync(root, lanes);
+    // There's no remaining sync work left.
+    ensureRootIsScheduled(root, now());
+    return null;
   }
 
+  let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
     executionContext |= RetryAfterError;
 
@@ -1039,8 +1047,9 @@ function performSyncWorkOnRoot(root) {
     // synchronously to block concurrent data mutations, and we'll includes
     // all pending updates are included. If it still fails after the second
     // attempt, we'll give up and commit the resulting tree.
-    lanes = getLanesToRetrySynchronouslyOnError(root);
-    if (lanes !== NoLanes) {
+    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+    if (errorRetryLanes !== NoLanes) {
+      lanes = errorRetryLanes;
       exitStatus = renderRootSync(root, lanes);
     }
   }
@@ -1058,7 +1067,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  if (enableSyncDefaultUpdates && !includesSomeLane(lanes, SyncLane)) {
+  if (
+    enableSyncDefaultUpdates &&
+    (includesSomeLane(lanes, DefaultLane) ||
+      includesSomeLane(lanes, DefaultHydrationLane))
+  ) {
     finishConcurrentRender(root, exitStatus, lanes);
   } else {
     commitRoot(root);
@@ -1826,6 +1839,15 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     return null;
+  } else {
+    if (__DEV__) {
+      if (lanes === NoLanes) {
+        console.error(
+          'root.finishedLanes should not be empty during a commit. This is a ' +
+            'bug in React.',
+        );
+      }
+    }
   }
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 6df35c9bf516..95066815c4d5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -163,7 +163,6 @@ import {
   markRootPinged,
   markRootExpired,
   markRootFinished,
-  areLanesExpired,
   getHighestPriorityLane,
   addFiberToLanesMap,
   movePendingFibersToMemoized,
@@ -840,9 +839,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       // synchronously to block concurrent data mutations, and we'll includes
       // all pending updates are included. If it still fails after the second
       // attempt, we'll give up and commit the resulting tree.
-      lanes = getLanesToRetrySynchronouslyOnError(root);
-      if (lanes !== NoLanes) {
-        exitStatus = renderRootSync(root, lanes);
+      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+      if (errorRetryLanes !== NoLanes) {
+        lanes = errorRetryLanes;
+        exitStatus = renderRootSync(root, errorRetryLanes);
       }
     }
 
@@ -1007,21 +1007,29 @@ function performSyncWorkOnRoot(root) {
 
   flushPassiveEffects();
 
-  let lanes;
-  let exitStatus;
-  if (
-    root === workInProgressRoot &&
-    areLanesExpired(root, workInProgressRootRenderLanes)
+  let lanes = getNextLanes(root, NoLanes);
+  if (includesSomeLane(lanes, SyncLane)) {
+    if (
+      root === workInProgressRoot &&
+      includesSomeLane(lanes, workInProgressRootRenderLanes)
+    ) {
+      // There's a partial tree, and at least one of its lanes has expired. Finish
+      // rendering it before rendering the rest of the expired work.
+      lanes = workInProgressRootRenderLanes;
+    }
+  } else if (
+    !(
+      enableSyncDefaultUpdates &&
+      (includesSomeLane(lanes, DefaultLane) ||
+        includesSomeLane(lanes, DefaultHydrationLane))
+    )
   ) {
-    // There's a partial tree, and at least one of its lanes has expired. Finish
-    // rendering it before rendering the rest of the expired work.
-    lanes = workInProgressRootRenderLanes;
-    exitStatus = renderRootSync(root, lanes);
-  } else {
-    lanes = getNextLanes(root, NoLanes);
-    exitStatus = renderRootSync(root, lanes);
+    // There's no remaining sync work left.
+    ensureRootIsScheduled(root, now());
+    return null;
   }
 
+  let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
     executionContext |= RetryAfterError;
 
@@ -1039,8 +1047,9 @@ function performSyncWorkOnRoot(root) {
     // synchronously to block concurrent data mutations, and we'll includes
     // all pending updates are included. If it still fails after the second
     // attempt, we'll give up and commit the resulting tree.
-    lanes = getLanesToRetrySynchronouslyOnError(root);
-    if (lanes !== NoLanes) {
+    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+    if (errorRetryLanes !== NoLanes) {
+      lanes = errorRetryLanes;
       exitStatus = renderRootSync(root, lanes);
     }
   }
@@ -1058,7 +1067,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  if (enableSyncDefaultUpdates && !includesSomeLane(lanes, SyncLane)) {
+  if (
+    enableSyncDefaultUpdates &&
+    (includesSomeLane(lanes, DefaultLane) ||
+      includesSomeLane(lanes, DefaultHydrationLane))
+  ) {
     finishConcurrentRender(root, exitStatus, lanes);
   } else {
     commitRoot(root);
@@ -1826,6 +1839,15 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
 
     return null;
+  } else {
+    if (__DEV__) {
+      if (lanes === NoLanes) {
+        console.error(
+          'root.finishedLanes should not be empty during a commit. This is a ' +
+            'bug in React.',
+        );
+      }
+    }
   }
   root.finishedWork = null;
   root.finishedLanes = NoLanes;

From a632f7de3bd35eaf6d5082054af4da92dd37cf20 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 20 Apr 2021 12:21:44 -0400
Subject: [PATCH 0466/1603] Flip tuple order of useTransition (#20976)

---
 .../ESLintRuleExhaustiveDeps-test.js          |  8 +++---
 .../src/ExhaustiveDeps.js                     | 11 +++++---
 .../react-debug-tools/src/ReactDebugHooks.js  |  4 +--
 .../InspectedElementErrorsAndWarningsTree.js  |  4 +--
 .../src/devtools/views/Components/KeyValue.js |  2 +-
 .../src/server/ReactPartialRendererHooks.js   |  4 +--
 .../src/ReactFiberHooks.new.js                | 26 +++++++++----------
 .../src/ReactFiberHooks.old.js                | 26 +++++++++----------
 .../src/ReactInternalTypes.js                 |  2 +-
 .../src/__tests__/ReactHooks-test.internal.js |  2 +-
 .../ReactHooksWithNoopRenderer-test.js        |  9 ++-----
 .../ReactSuspenseWithNoopRenderer-test.js     | 11 +++-----
 .../src/__tests__/ReactTransition-test.js     |  4 +--
 packages/react-server/src/ReactFizzHooks.js   |  4 +--
 packages/react/src/ReactHooks.js              |  2 +-
 15 files changed, 58 insertions(+), 61 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index 430e78562491..bde0c1cfa35e 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -604,10 +604,10 @@ const tests = {
           const [state4, dispatch2] = React.useReducer();
           const [state5, maybeSetState] = useFunnyState();
           const [state6, maybeDispatch] = useFunnyReducer();
-          const [startTransition1] = useTransition();
-          const [startTransition2, isPending2] = useTransition();
-          const [startTransition3] = React.useTransition();
-          const [startTransition4, isPending4] = React.useTransition();
+          const [isPending1] = useTransition();
+          const [isPending2, startTransition2] = useTransition();
+          const [isPending3] = React.useTransition();
+          const [isPending4, startTransition4] = React.useTransition();
           const mySetState = useCallback(() => {}, []);
           let myDispatch = useCallback(() => {}, []);
 
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index f4c36fcf2202..d40aaba421d3 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -255,9 +255,14 @@ export default {
             }
           }
         } else if (name === 'useTransition') {
-          if (id.type === 'ArrayPattern' && isArray(resolved.identifiers)) {
-            // Is first tuple value the same reference we're checking?
-            if (id.elements[0] === resolved.identifiers[0]) {
+          // 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;
             }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index d78f62937484..212708255747 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -265,7 +265,7 @@ function useMutableSource<Source, Snapshot>(
   return value;
 }
 
-function useTransition(): [(() => void) => void, boolean] {
+function useTransition(): [boolean, (() => void) => 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.
@@ -276,7 +276,7 @@ function useTransition(): [(() => void) => void, boolean] {
     stackError: new Error(),
     value: undefined,
   });
-  return [callback => {}, false];
+  return [false, callback => {}];
 }
 
 function useDeferredValue<T>(value: T): T {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 3b7aaca3216d..83d3721a53dc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -41,8 +41,8 @@ export default function InspectedElementErrorsAndWarningsTree({
   const refresh = useCacheRefresh();
 
   const [
-    startClearErrorsTransition,
     isErrorsTransitionPending,
+    startClearErrorsTransition,
   ] = useTransition();
   const clearErrorsForInspectedElement = () => {
     const {id} = inspectedElement;
@@ -60,8 +60,8 @@ export default function InspectedElementErrorsAndWarningsTree({
   };
 
   const [
-    startClearWarningsTransition,
     isWarningsTransitionPending,
+    startClearWarningsTransition,
   ] = useTransition();
   const clearWarningsForInspectedElement = () => {
     const {id} = inspectedElement;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index aa5b1bc56eec..b39a6d154562 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -90,7 +90,7 @@ export default function KeyValue({
     isReadOnly = value[meta.readonly];
   }
 
-  const [startInspectPathsTransition, isInspectPathsPending] = useTransition();
+  const [isInspectPathsPending, startInspectPathsTransition] = useTransition();
   const toggleIsOpen = () => {
     if (isOpen) {
       setIsOpen(false);
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index aeda6e72136f..433ab9ae078b 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -467,12 +467,12 @@ function useDeferredValue<T>(value: T): T {
   return value;
 }
 
-function useTransition(): [(callback: () => void) => void, boolean] {
+function useTransition(): [boolean, (callback: () => void) => void] {
   resolveCurrentlyRenderingComponent();
   const startTransition = callback => {
     callback();
   };
-  return [startTransition, false];
+  return [false, startTransition];
 }
 
 function useOpaqueIdentifier(): OpaqueIDType {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 5192c6d2740c..a507171aecd3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {
   }
 }
 
-function mountTransition(): [(() => void) => void, boolean] {
+function mountTransition(): [boolean, (() => void) => void] {
   const [isPending, setPending] = mountState(false);
   // The `start` method never changes.
   const start = startTransition.bind(null, setPending);
   const hook = mountWorkInProgressHook();
   hook.memoizedState = start;
-  return [start, isPending];
+  return [isPending, start];
 }
 
-function updateTransition(): [(() => void) => void, boolean] {
+function updateTransition(): [boolean, (() => void) => void] {
   const [isPending] = updateState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
-  return [start, isPending];
+  return [isPending, start];
 }
 
-function rerenderTransition(): [(() => void) => void, boolean] {
+function rerenderTransition(): [boolean, (() => void) => void] {
   const [isPending] = rerenderState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
-  return [start, isPending];
+  return [isPending, start];
 }
 
 let isUpdatingOpaqueValueInRenderPhase = false;
@@ -2283,7 +2283,7 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       mountHookTypesDev();
       return mountTransition();
@@ -2407,7 +2407,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
       return mountTransition();
@@ -2531,7 +2531,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
       return updateTransition();
@@ -2656,7 +2656,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
       return rerenderTransition();
@@ -2792,7 +2792,7 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -2931,7 +2931,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       updateHookTypesDev();
@@ -3071,7 +3071,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       updateHookTypesDev();
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index a319cdf75b67..ad555804319c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1723,27 +1723,27 @@ function startTransition(setPending, callback) {
   }
 }
 
-function mountTransition(): [(() => void) => void, boolean] {
+function mountTransition(): [boolean, (() => void) => void] {
   const [isPending, setPending] = mountState(false);
   // The `start` method never changes.
   const start = startTransition.bind(null, setPending);
   const hook = mountWorkInProgressHook();
   hook.memoizedState = start;
-  return [start, isPending];
+  return [isPending, start];
 }
 
-function updateTransition(): [(() => void) => void, boolean] {
+function updateTransition(): [boolean, (() => void) => void] {
   const [isPending] = updateState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
-  return [start, isPending];
+  return [isPending, start];
 }
 
-function rerenderTransition(): [(() => void) => void, boolean] {
+function rerenderTransition(): [boolean, (() => void) => void] {
   const [isPending] = rerenderState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
-  return [start, isPending];
+  return [isPending, start];
 }
 
 let isUpdatingOpaqueValueInRenderPhase = false;
@@ -2283,7 +2283,7 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       mountHookTypesDev();
       return mountTransition();
@@ -2407,7 +2407,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
       return mountTransition();
@@ -2531,7 +2531,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
       return updateTransition();
@@ -2656,7 +2656,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       updateHookTypesDev();
       return rerenderTransition();
@@ -2792,7 +2792,7 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -2931,7 +2931,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       updateHookTypesDev();
@@ -3071,7 +3071,7 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderDeferredValue(value);
     },
-    useTransition(): [(() => void) => void, boolean] {
+    useTransition(): [boolean, (() => void) => void] {
       currentHookNameInDev = 'useTransition';
       warnInvalidHookAccess();
       updateHookTypesDev();
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 0c34eeda8ed6..08f5cbc2d0e9 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -311,7 +311,7 @@ export type Dispatcher = {|
   ): void,
   useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
   useDeferredValue<T>(value: T): T,
-  useTransition(): [(() => void) => void, boolean],
+  useTransition(): [boolean, (() => void) => void],
   useMutableSource<Source, Snapshot>(
     source: MutableSource<Source>,
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
index bc37abbd322f..ce9236e114b9 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -1511,7 +1511,7 @@ describe('ReactHooks', () => {
     ];
 
     if (__EXPERIMENTAL__) {
-      const useTransitionHelper = () => React.useTransition({timeoutMs: 1000});
+      const useTransitionHelper = () => React.useTransition();
       const useDeferredValueHelper = () =>
         React.useDeferredValue(0, {timeoutMs: 1000});
 
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index d01cd2a06537..95e6a55c7835 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -876,14 +876,11 @@ describe('ReactHooksWithNoopRenderer', () => {
     // TODO: This should probably warn
     // @gate experimental
     it('calling startTransition inside render phase', async () => {
-      let startTransition;
       function App() {
         const [counter, setCounter] = useState(0);
-        const [_startTransition] = useTransition();
-        startTransition = _startTransition;
 
         if (counter === 0) {
-          startTransition(() => {
+          React.unstable_startTransition(() => {
             setCounter(c => c + 1);
           });
         }
@@ -3227,9 +3224,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       let transition;
       function App() {
         const [show, setShow] = useState(false);
-        const [startTransition, isPending] = useTransition({
-          timeoutMs: 1000,
-        });
+        const [isPending, startTransition] = useTransition();
         transition = () => {
           startTransition(() => {
             setShow(true);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index bb4e0f6892a6..7861b2904f28 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -3745,7 +3745,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     let startTransition;
     function B() {
       const [textB, _setTextB] = useState('B');
-      const [_startTransition] = useTransition({timeoutMs: 10000});
+      // eslint-disable-next-line no-unused-vars
+      const [_, _startTransition] = useTransition();
       startTransition = _startTransition;
       setTextB = _setTextB;
       return (
@@ -3843,12 +3844,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     let setTextWithLongTransition;
 
     function App() {
-      const [startShortTransition, isPending1] = React.unstable_useTransition({
-        timeoutMs: 5000,
-      });
-      const [startLongTransition, isPending2] = React.unstable_useTransition({
-        timeoutMs: 30000,
-      });
+      const [isPending1, startShortTransition] = React.unstable_useTransition();
+      const [isPending2, startLongTransition] = React.unstable_useTransition();
       const isPending = isPending1 || isPending2;
       const [text, setText] = React.useState('');
       const [mirror, setMirror] = React.useState('');
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index 09ba5dded730..71c40cefebe8 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -164,7 +164,7 @@ describe('ReactTransition', () => {
     let start;
     function App() {
       const [show, setShow] = useState(false);
-      const [_start, isPending] = useTransition();
+      const [isPending, _start] = useTransition();
       start = () => _start(() => setShow(true));
       return (
         <Suspense fallback={<Text text="Loading..." />}>
@@ -208,7 +208,7 @@ describe('ReactTransition', () => {
     async () => {
       let update;
       function App() {
-        const [startContentChange, isContentPending] = useTransition();
+        const [isContentPending, startContentChange] = useTransition();
         const [label, setLabel] = useState('A');
         const [contents, setContents] = useState('A');
         update = value => {
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 9fd9e0f42098..23a35c1803f7 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -470,9 +470,9 @@ function unsupportedStartTransition() {
   invariant(false, 'startTransition cannot be called during server rendering.');
 }
 
-function useTransition(): [(callback: () => void) => void, boolean] {
+function useTransition(): [boolean, (callback: () => void) => void] {
   resolveCurrentlyRenderingComponent();
-  return [unsupportedStartTransition, false];
+  return [false, unsupportedStartTransition];
 }
 
 function useOpaqueIdentifier(): OpaqueIDType {
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 18920be2c8df..82bd886d8245 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -145,7 +145,7 @@ export function useDebugValue<T>(
 
 export const emptyObject = {};
 
-export function useTransition(): [(() => void) => void, boolean] {
+export function useTransition(): [boolean, (() => void) => void] {
   const dispatcher = resolveDispatcher();
   return dispatcher.useTransition();
 }

From ef37d55b68ddc45d465b84ea2ce30e8328297b2d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 21 Apr 2021 10:29:31 -0500
Subject: [PATCH 0467/1603] Use performConcurrentWorkOnRoot for "sync default"
 (#21322)

Instead of `performSyncWorkOnRoot`.

The conceptual model is that the only difference between sync default
updates (in React 18) and concurrent default updates (in a future major
release) is time slicing. All other behavior should be the same
(i.e. the stuff in `finishConcurrentRender`).

Given this, I think it makes more sense to model the implementation this
way, too. This exposed a quirk in the previous implementation where
non-sync work was sometimes mistaken for sync work and flushed too
early. In the new implementation, `performSyncWorkOnRoot` is only used
for truly synchronous renders (i.e. `SyncLane`), which should make these
mistakes less common.

Fixes most of the tests marked with TODOs from #21072.
---
 .../src/ReactFiberLane.new.js                 |  3 ++
 .../src/ReactFiberLane.old.js                 |  3 ++
 .../src/ReactFiberWorkLoop.new.js             | 37 +++++--------------
 .../src/ReactFiberWorkLoop.old.js             | 37 +++++--------------
 .../src/__tests__/ReactExpiration-test.js     |  9 +----
 .../src/__tests__/ReactFlushSync-test.js      | 13 +------
 .../ReactHooksWithNoopRenderer-test.js        | 17 +++++----
 .../__tests__/ReactIncrementalUpdates-test.js | 12 ++----
 .../useMutableSource-test.internal.js         | 13 ++-----
 9 files changed, 45 insertions(+), 99 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index c4332d1b148d..ced32541ee8d 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -263,6 +263,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
       // 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.
+      // TODO: This applies to sync default updates, too. Which is probably what
+      // we want for default priority events, but not for continuous priority
+      // events like hover.
       (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 05626e7a7376..5af142edbbae 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -263,6 +263,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
       // 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.
+      // TODO: This applies to sync default updates, too. Which is probably what
+      // we want for default priority events, but not for continuous priority
+      // events like hover.
       (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index bcfb82da57f8..665df80b1334 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -713,16 +713,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (
-    enableSyncDefaultUpdates &&
-    (newCallbackPriority === DefaultLane ||
-      newCallbackPriority === DefaultHydrationLane)
-  ) {
-    newCallbackNode = scheduleCallback(
-      ImmediateSchedulerPriority,
-      performSyncWorkOnRoot.bind(null, root),
-    );
-  } else if (newCallbackPriority === SyncLane) {
+  if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -820,7 +811,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     return null;
   }
 
-  let exitStatus = renderRootConcurrent(root, lanes);
+  let exitStatus =
+    enableSyncDefaultUpdates &&
+    (includesSomeLane(lanes, DefaultLane) ||
+      includesSomeLane(lanes, DefaultHydrationLane))
+      ? // Time slicing is disabled for default updates in this root.
+        renderRootSync(root, lanes)
+      : renderRootConcurrent(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
@@ -1017,13 +1014,7 @@ function performSyncWorkOnRoot(root) {
       // rendering it before rendering the rest of the expired work.
       lanes = workInProgressRootRenderLanes;
     }
-  } else if (
-    !(
-      enableSyncDefaultUpdates &&
-      (includesSomeLane(lanes, DefaultLane) ||
-        includesSomeLane(lanes, DefaultHydrationLane))
-    )
-  ) {
+  } else {
     // There's no remaining sync work left.
     ensureRootIsScheduled(root, now());
     return null;
@@ -1067,15 +1058,7 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  if (
-    enableSyncDefaultUpdates &&
-    (includesSomeLane(lanes, DefaultLane) ||
-      includesSomeLane(lanes, DefaultHydrationLane))
-  ) {
-    finishConcurrentRender(root, exitStatus, lanes);
-  } else {
-    commitRoot(root);
-  }
+  commitRoot(root);
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 95066815c4d5..baebee3dc049 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -713,16 +713,7 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Schedule a new callback.
   let newCallbackNode;
-  if (
-    enableSyncDefaultUpdates &&
-    (newCallbackPriority === DefaultLane ||
-      newCallbackPriority === DefaultHydrationLane)
-  ) {
-    newCallbackNode = scheduleCallback(
-      ImmediateSchedulerPriority,
-      performSyncWorkOnRoot.bind(null, root),
-    );
-  } else if (newCallbackPriority === SyncLane) {
+  if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -820,7 +811,13 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     return null;
   }
 
-  let exitStatus = renderRootConcurrent(root, lanes);
+  let exitStatus =
+    enableSyncDefaultUpdates &&
+    (includesSomeLane(lanes, DefaultLane) ||
+      includesSomeLane(lanes, DefaultHydrationLane))
+      ? // Time slicing is disabled for default updates in this root.
+        renderRootSync(root, lanes)
+      : renderRootConcurrent(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
@@ -1017,13 +1014,7 @@ function performSyncWorkOnRoot(root) {
       // rendering it before rendering the rest of the expired work.
       lanes = workInProgressRootRenderLanes;
     }
-  } else if (
-    !(
-      enableSyncDefaultUpdates &&
-      (includesSomeLane(lanes, DefaultLane) ||
-        includesSomeLane(lanes, DefaultHydrationLane))
-    )
-  ) {
+  } else {
     // There's no remaining sync work left.
     ensureRootIsScheduled(root, now());
     return null;
@@ -1067,15 +1058,7 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  if (
-    enableSyncDefaultUpdates &&
-    (includesSomeLane(lanes, DefaultLane) ||
-      includesSomeLane(lanes, DefaultHydrationLane))
-  ) {
-    finishConcurrentRender(root, exitStatus, lanes);
-  } else {
-    commitRoot(root);
-  }
+  commitRoot(root);
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index d251bb04f111..4c89c341c649 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -440,12 +440,7 @@ describe('ReactExpiration', () => {
     flushNextRenderIfExpired();
     expect(Scheduler).toHaveYielded([]);
 
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      // TODO: Why is this flushed?
-      expect(ReactNoop).toMatchRenderedOutput('Hi');
-    } else {
-      expect(ReactNoop).toMatchRenderedOutput(null);
-    }
+    expect(ReactNoop).toMatchRenderedOutput(null);
 
     // Advance the time some more to expire the update.
     Scheduler.unstable_advanceTime(10000);
@@ -477,8 +472,6 @@ describe('ReactExpiration', () => {
     // Advancing by ~5 seconds should be sufficient to expire the update. (I
     // used a slightly larger number to allow for possible rounding.)
     Scheduler.unstable_advanceTime(6000);
-
-    ReactNoop.render('Hi');
     flushNextRenderIfExpired();
     expect(Scheduler).toHaveYielded([]);
     expect(ReactNoop).toMatchRenderedOutput('Hi');
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index a4c9fef93779..a3df1effd7b3 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -51,11 +51,7 @@ describe('ReactFlushSync', () => {
       // The passive effect will schedule a sync update and a normal update.
       // They should commit in two separate batches. First the sync one.
       expect(() => {
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          expect(Scheduler).toFlushUntilNextPaint(['1, 0', '1, 1']);
-        } else {
-          expect(Scheduler).toFlushUntilNextPaint(['1, 0']);
-        }
+        expect(Scheduler).toFlushUntilNextPaint(['1, 0']);
       }).toErrorDev('flushSync was called from inside a lifecycle method');
 
       // The remaining update is not sync
@@ -63,12 +59,7 @@ describe('ReactFlushSync', () => {
       expect(Scheduler).toHaveYielded([]);
 
       // Now flush it.
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        // With sync default updates, passive effects are synchronously flushed.
-        expect(Scheduler).toHaveYielded([]);
-      } else {
-        expect(Scheduler).toFlushUntilNextPaint(['1, 1']);
-      }
+      expect(Scheduler).toFlushUntilNextPaint(['1, 1']);
     });
     expect(root).toMatchRenderedOutput('1, 1');
   });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 95e6a55c7835..485d477ed7e8 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1406,20 +1406,21 @@ describe('ReactHooksWithNoopRenderer', () => {
           setParentState(false);
         });
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          // TODO: Default updates do not interrupt transition updates, to
+          // prevent starvation. However, when sync default updates are enabled,
+          // continuous updates are treated like default updates. In this case,
+          // we probably don't want this behavior; continuous should be allowed
+          // to interrupt.
           expect(Scheduler).toFlushUntilNextPaint([
-            // TODO: why do the children render and fire effects?
             'Child two render',
             'Child one commit',
             'Child two commit',
-            'Parent false render',
-            'Parent false commit',
-          ]);
-        } else {
-          expect(Scheduler).toFlushUntilNextPaint([
-            'Parent false render',
-            'Parent false commit',
           ]);
         }
+        expect(Scheduler).toFlushUntilNextPaint([
+          'Parent false render',
+          'Parent false commit',
+        ]);
 
         // Schedule updates for children too (which should be ignored)
         setChildStates.forEach(setChildState => setChildState(2));
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index 9eaa95f93edf..991937ee37fa 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -62,15 +62,9 @@ describe('ReactIncrementalUpdates', () => {
     ReactNoop.render(<Foo />);
     expect(Scheduler).toFlushAndYieldThrough(['commit']);
 
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      // TODO: should deferredUpdates flush sync with the default update?
-      expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
-      expect(Scheduler).toFlushWithoutYielding();
-    } else {
-      expect(state).toEqual({a: 'a'});
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
-    }
+    expect(state).toEqual({a: 'a'});
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(state).toEqual({a: 'a', b: 'b', c: 'c'});
   });
 
   it('applies updates with equal priority in insertion order', () => {
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index fd7ebbeb72c7..b8c47e93d6bf 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -1569,15 +1569,10 @@ describe('useMutableSource', () => {
           mutateB('b0');
         });
         // Finish the current render
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          // Default sync will flush both without yielding
-          expect(Scheduler).toFlushUntilNextPaint(['c', 'a0']);
-        } else {
-          expect(Scheduler).toFlushUntilNextPaint(['c']);
-          // a0 will re-render because of the mutation update. But it should show
-          // the latest value, not the intermediate one, to avoid tearing with b.
-          expect(Scheduler).toFlushUntilNextPaint(['a0']);
-        }
+        expect(Scheduler).toFlushUntilNextPaint(['c']);
+        // a0 will re-render because of the mutation update. But it should show
+        // the latest value, not the intermediate one, to avoid tearing with b.
+        expect(Scheduler).toFlushUntilNextPaint(['a0']);
 
         expect(root).toMatchRenderedOutput('a0b0c');
         // We should be done.

From 89847bf6e6c0b77ced5dfc7b794c730bb3deac36 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 21 Apr 2021 10:51:04 -0500
Subject: [PATCH 0468/1603] Continuous updates should interrupt transitions
 (#21323)

Even when updates are sync by default.

Discovered this quirk while working on #21322. Previously, when sync
default updates are enabled, continuous updates are treated like
default updates. We implemented this by assigning DefaultLane to
continous updates. However, an unintended consequence of that approach
is that continuous updates would no longer interrupt transitions,
because default updates are not supposed to interrupt transitions.

To fix this, I changed the implementation to always assign separate
lanes for default and continuous updates. Then I entangle the
lanes together.
---
 .../src/ReactFiberLane.new.js                 | 29 ++++++++--
 .../src/ReactFiberLane.old.js                 | 29 ++++++++--
 .../src/ReactFiberWorkLoop.new.js             | 31 ++---------
 .../src/ReactFiberWorkLoop.old.js             | 31 ++---------
 .../ReactHooksWithNoopRenderer-test.js        | 12 -----
 .../src/__tests__/ReactUpdatePriority-test.js | 54 +++++++++++++++++++
 .../SchedulingProfilerLabels-test.internal.js | 18 ++-----
 7 files changed, 121 insertions(+), 83 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index ced32541ee8d..501af9e8b12a 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -39,6 +39,7 @@ import {
   enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
+  enableSyncDefaultUpdates,
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 
@@ -263,9 +264,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
       // 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.
-      // TODO: This applies to sync default updates, too. Which is probably what
-      // we want for default priority events, but not for continuous priority
-      // events like hover.
       (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
@@ -273,6 +271,18 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     }
   }
 
+  if (
+    // TODO: Check for root override, once that lands
+    enableSyncDefaultUpdates &&
+    (nextLanes & InputContinuousLane) !== NoLanes
+  ) {
+    // When updates are sync by default, we entangle continous 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.
+    nextLanes |= pendingLanes & 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
@@ -467,6 +477,19 @@ export function includesOnlyTransitions(lanes: Lanes) {
   return (lanes & TransitionLanes) === lanes;
 }
 
+export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
+  if (!enableSyncDefaultUpdates) {
+    return true;
+  }
+  const SyncDefaultLanes =
+    InputContinuousHydrationLane |
+    InputContinuousLane |
+    DefaultHydrationLane |
+    DefaultLane;
+  // TODO: Check for root override, once that lands
+  return (lanes & SyncDefaultLanes) === NoLanes;
+}
+
 export function isTransitionLane(lane: Lane) {
   return (lane & TransitionLanes) !== 0;
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 5af142edbbae..701d4c46cf72 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -39,6 +39,7 @@ import {
   enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
+  enableSyncDefaultUpdates,
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 
@@ -263,9 +264,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
       // 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.
-      // TODO: This applies to sync default updates, too. Which is probably what
-      // we want for default priority events, but not for continuous priority
-      // events like hover.
       (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
@@ -273,6 +271,18 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     }
   }
 
+  if (
+    // TODO: Check for root override, once that lands
+    enableSyncDefaultUpdates &&
+    (nextLanes & InputContinuousLane) !== NoLanes
+  ) {
+    // When updates are sync by default, we entangle continous 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.
+    nextLanes |= pendingLanes & 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
@@ -467,6 +477,19 @@ export function includesOnlyTransitions(lanes: Lanes) {
   return (lanes & TransitionLanes) === lanes;
 }
 
+export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
+  if (!enableSyncDefaultUpdates) {
+    return true;
+  }
+  const SyncDefaultLanes =
+    InputContinuousHydrationLane |
+    InputContinuousLane |
+    DefaultHydrationLane |
+    DefaultLane;
+  // TODO: Check for root override, once that lands
+  return (lanes & SyncDefaultLanes) === NoLanes;
+}
+
 export function isTransitionLane(lane: Lane) {
   return (lane & TransitionLanes) !== 0;
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 665df80b1334..9ebace0c7201 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,7 +32,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
-  enableSyncDefaultUpdates,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -139,10 +138,6 @@ import {
   NoLanes,
   NoLane,
   SyncLane,
-  DefaultLane,
-  DefaultHydrationLane,
-  InputContinuousLane,
-  InputContinuousHydrationLane,
   NoTimestamp,
   claimNextTransitionLane,
   claimNextRetryLane,
@@ -154,6 +149,7 @@ import {
   includesNonIdleWork,
   includesOnlyRetries,
   includesOnlyTransitions,
+  shouldTimeSlice,
   getNextLanes,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
@@ -437,13 +433,6 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // TODO: Move this type conversion to the event priority module.
   const updateLane: Lane = (getCurrentUpdatePriority(): any);
   if (updateLane !== NoLane) {
-    if (
-      enableSyncDefaultUpdates &&
-      (updateLane === InputContinuousLane ||
-        updateLane === InputContinuousHydrationLane)
-    ) {
-      return DefaultLane;
-    }
     return updateLane;
   }
 
@@ -454,13 +443,6 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // use that directly.
   // TODO: Move this type conversion to the event priority module.
   const eventLane: Lane = (getCurrentEventPriority(): any);
-  if (
-    enableSyncDefaultUpdates &&
-    (eventLane === InputContinuousLane ||
-      eventLane === InputContinuousHydrationLane)
-  ) {
-    return DefaultLane;
-  }
   return eventLane;
 }
 
@@ -811,13 +793,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     return null;
   }
 
-  let exitStatus =
-    enableSyncDefaultUpdates &&
-    (includesSomeLane(lanes, DefaultLane) ||
-      includesSomeLane(lanes, DefaultHydrationLane))
-      ? // Time slicing is disabled for default updates in this root.
-        renderRootSync(root, lanes)
-      : renderRootConcurrent(root, lanes);
+  let exitStatus = shouldTimeSlice(root, lanes)
+    ? renderRootConcurrent(root, lanes)
+    : // Time slicing is disabled for default updates in this root.
+      renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index baebee3dc049..09a116c97bd7 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,7 +32,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   skipUnmountedBoundaries,
-  enableSyncDefaultUpdates,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -139,10 +138,6 @@ import {
   NoLanes,
   NoLane,
   SyncLane,
-  DefaultLane,
-  DefaultHydrationLane,
-  InputContinuousLane,
-  InputContinuousHydrationLane,
   NoTimestamp,
   claimNextTransitionLane,
   claimNextRetryLane,
@@ -154,6 +149,7 @@ import {
   includesNonIdleWork,
   includesOnlyRetries,
   includesOnlyTransitions,
+  shouldTimeSlice,
   getNextLanes,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
@@ -437,13 +433,6 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // TODO: Move this type conversion to the event priority module.
   const updateLane: Lane = (getCurrentUpdatePriority(): any);
   if (updateLane !== NoLane) {
-    if (
-      enableSyncDefaultUpdates &&
-      (updateLane === InputContinuousLane ||
-        updateLane === InputContinuousHydrationLane)
-    ) {
-      return DefaultLane;
-    }
     return updateLane;
   }
 
@@ -454,13 +443,6 @@ export function requestUpdateLane(fiber: Fiber): Lane {
   // use that directly.
   // TODO: Move this type conversion to the event priority module.
   const eventLane: Lane = (getCurrentEventPriority(): any);
-  if (
-    enableSyncDefaultUpdates &&
-    (eventLane === InputContinuousLane ||
-      eventLane === InputContinuousHydrationLane)
-  ) {
-    return DefaultLane;
-  }
   return eventLane;
 }
 
@@ -811,13 +793,10 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     return null;
   }
 
-  let exitStatus =
-    enableSyncDefaultUpdates &&
-    (includesSomeLane(lanes, DefaultLane) ||
-      includesSomeLane(lanes, DefaultHydrationLane))
-      ? // Time slicing is disabled for default updates in this root.
-        renderRootSync(root, lanes)
-      : renderRootConcurrent(root, lanes);
+  let exitStatus = shouldTimeSlice(root, lanes)
+    ? renderRootConcurrent(root, lanes)
+    : // Time slicing is disabled for default updates in this root.
+      renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 485d477ed7e8..07d3f7ff526a 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1405,18 +1405,6 @@ describe('ReactHooksWithNoopRenderer', () => {
         ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
           setParentState(false);
         });
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          // TODO: Default updates do not interrupt transition updates, to
-          // prevent starvation. However, when sync default updates are enabled,
-          // continuous updates are treated like default updates. In this case,
-          // we probably don't want this behavior; continuous should be allowed
-          // to interrupt.
-          expect(Scheduler).toFlushUntilNextPaint([
-            'Child two render',
-            'Child one commit',
-            'Child two commit',
-          ]);
-        }
         expect(Scheduler).toFlushUntilNextPaint([
           'Parent false render',
           'Parent false commit',
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
index 0aee7df66df4..116cc4c4d8e0 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
@@ -1,6 +1,8 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let ContinuousEventPriority;
+let startTransition;
 let useState;
 let useEffect;
 
@@ -11,6 +13,9 @@ describe('ReactUpdatePriority', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    ContinuousEventPriority = require('react-reconciler/constants')
+      .ContinuousEventPriority;
+    startTransition = React.unstable_startTransition;
     useState = React.useState;
     useEffect = React.useEffect;
   });
@@ -78,4 +83,53 @@ describe('ReactUpdatePriority', () => {
     // Now the idle update has flushed
     expect(Scheduler).toHaveYielded(['Idle: 2, Default: 2']);
   });
+
+  // @gate experimental
+  test('continuous updates should interrupt transisions', 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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A1', 'B1', 'C1']);
+    expect(root).toMatchRenderedOutput('A1B1C1');
+
+    await ReactNoop.act(async () => {
+      startTransition(() => {
+        setCounter(2);
+      });
+      expect(Scheduler).toFlushAndYieldThrough(['A2']);
+      ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
+        setIsHidden(true);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      // Because the hide update has continous 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__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index da59c153f43d..6474be855b38 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -168,18 +168,10 @@ describe('SchedulingProfiler labels', () => {
       event.initEvent('mouseover', true, true);
       dispatchAndSetCurrentEvent(targetRef.current, event);
     });
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      expect(clearedMarks).toContain(
-        `--schedule-state-update-${formatLanes(
-          ReactFiberLane.DefaultLane,
-        )}-App`,
-      );
-    } else {
-      expect(clearedMarks).toContain(
-        `--schedule-state-update-${formatLanes(
-          ReactFiberLane.InputContinuousLane,
-        )}-App`,
-      );
-    }
+    expect(clearedMarks).toContain(
+      `--schedule-state-update-${formatLanes(
+        ReactFiberLane.InputContinuousLane,
+      )}-App`,
+    );
   });
 });

From a1558600183b4321d4cdc117925980f1865641fa Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 21 Apr 2021 11:32:09 -0500
Subject: [PATCH 0469/1603] Fix: Don't flush discrete at end of batchedUpdates
 (#21229)

The outermost `batchedUpdates` call flushes pending sync updates at the
end. This was intended for legacy sync mode, but it also happens to
flush discrete updates in concurrent mode.

Instead, we should only flush sync updates at the end of
`batchedUpdates` for legacy roots. Discrete sync updates can wait to
flush in the microtask.

`discreteUpdates` has the same issue, which is how I originally noticed
this, but I'll change that one in a separate commit since it requires
updating a few (no longer relevant) internal tests.
---
 .../storeStressTestConcurrent-test.js         | 20 +++++---
 .../ReactDOMNativeEventHeuristic-test.js      | 50 +++++++++++++++++++
 .../src/ReactFiberSyncTaskQueue.new.js        | 22 +++++++-
 .../src/ReactFiberSyncTaskQueue.old.js        | 22 +++++++-
 .../src/ReactFiberWorkLoop.new.js             | 50 ++++++++++++-------
 .../src/ReactFiberWorkLoop.old.js             | 50 ++++++++++++-------
 .../ReactFiberHostContext-test.internal.js    | 50 ++++++++++++-------
 .../ReactIncrementalTriangle-test.js          |  5 +-
 8 files changed, 198 insertions(+), 71 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index 1090e24a0f73..38cd572ad680 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -11,6 +11,7 @@ describe('StoreStressConcurrent', () => {
   let React;
   let ReactDOM;
   let act;
+  let actAsync;
   let bridge;
   let store;
   let print;
@@ -23,6 +24,9 @@ describe('StoreStressConcurrent', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     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('./storeSerializer').print;
   });
@@ -758,7 +762,7 @@ describe('StoreStressConcurrent', () => {
 
         // Force fallback.
         expect(print(store)).toEqual(snapshots[i]);
-        act(() => {
+        await actAsync(async () => {
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
@@ -768,7 +772,7 @@ describe('StoreStressConcurrent', () => {
         expect(print(store)).toEqual(snapshots[j]);
 
         // Stop forcing fallback.
-        act(() => {
+        await actAsync(async () => {
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
@@ -818,7 +822,7 @@ describe('StoreStressConcurrent', () => {
         expect(print(store)).toEqual(snapshots[j]);
 
         // Stop forcing fallback. This reverts to primary content.
-        act(() => {
+        await actAsync(async () => {
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
@@ -829,13 +833,13 @@ describe('StoreStressConcurrent', () => {
         expect(print(store)).toEqual(snapshots[i]);
 
         // Clean up after every iteration.
-        act(() => root.unmount());
+        await actAsync(async () => root.unmount());
         expect(print(store)).toBe('');
       }
     }
   });
 
-  it('should handle a stress test for Suspense without type change (Concurrent Mode)', () => {
+  it('should handle a stress test for Suspense without type change (Concurrent Mode)', async () => {
     const A = () => 'a';
     const B = () => 'b';
     const C = () => 'c';
@@ -1294,7 +1298,7 @@ describe('StoreStressConcurrent', () => {
 
         // Force fallback.
         expect(print(store)).toEqual(snapshots[i]);
-        act(() => {
+        await actAsync(async () => {
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
@@ -1304,7 +1308,7 @@ describe('StoreStressConcurrent', () => {
         expect(print(store)).toEqual(fallbackSnapshots[j]);
 
         // Stop forcing fallback.
-        act(() => {
+        await actAsync(async () => {
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
@@ -1354,7 +1358,7 @@ describe('StoreStressConcurrent', () => {
         expect(print(store)).toEqual(fallbackSnapshots[j]);
 
         // Stop forcing fallback. This reverts to primary content.
-        act(() => {
+        await actAsync(async () => {
           bridge.send('overrideSuspense', {
             id: suspenseID,
             rendererID: store.getRendererIDForElement(suspenseID),
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 03bac9c657bd..753af57ba849 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -371,4 +371,54 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
   });
+
+  // @gate experimental
+  it('should not flush discrete events at the end of outermost batchedUpdates', async () => {
+    const root = ReactDOM.unstable_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.unstable_yieldValue(
+                  container.textContent + ' [after batchedUpdates]',
+                );
+              };
+            }
+          }}>
+          Count: {count}
+        </div>
+      );
+    }
+
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toEqual('Count: 0');
+
+    const pressEvent = document.createEvent('Event');
+    pressEvent.initEvent('click', true, true);
+    dispatchAndSetCurrentEvent(target, pressEvent);
+
+    expect(Scheduler).toHaveYielded(['Count: 0 [after batchedUpdates]']);
+    // TODO: There's a `flushDiscreteUpdates` call at the end of the event
+    // delegation listener that gets called even if no React event handlers are
+    // fired. Once that is removed, this will be 0, not 1.
+    // expect(container.textContent).toEqual('Count: 0');
+    expect(container.textContent).toEqual('Count: 1');
+
+    // Intentionally not using `act` so we can observe in between the click
+    // event and the microtask, without batching.
+    await null;
+
+    expect(container.textContent).toEqual('Count: 1');
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
index 1d3e3daa47ae..651825160302 100644
--- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
@@ -17,6 +17,7 @@ import {
 import {ImmediatePriority, scheduleCallback} from './Scheduler';
 
 let syncQueue: Array<SchedulerCallback> | null = null;
+let includesLegacySyncCallbacks: boolean = false;
 let isFlushingSyncQueue: boolean = false;
 
 export function scheduleSyncCallback(callback: SchedulerCallback) {
@@ -31,7 +32,23 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   }
 }
 
-export function flushSyncCallbackQueue() {
+export function scheduleLegacySyncCallback(callback: SchedulerCallback) {
+  includesLegacySyncCallbacks = true;
+  scheduleSyncCallback(callback);
+}
+
+export function flushSyncCallbacksOnlyInLegacyMode() {
+  // Only flushes the queue if there's a legacy sync callback scheduled.
+  // TODO: There's only a single type of callback: performSyncOnWorkOnRoot. So
+  // it might make more sense for the queue to be a list of roots instead of a
+  // list of generic callbacks. Then we can have two: one for legacy roots, one
+  // for concurrent roots. And this method would only flush the legacy ones.
+  if (includesLegacySyncCallbacks) {
+    flushSyncCallbacks();
+  }
+}
+
+export function flushSyncCallbacks() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
@@ -50,13 +67,14 @@ export function flushSyncCallbackQueue() {
         } while (callback !== null);
       }
       syncQueue = null;
+      includesLegacySyncCallbacks = false;
     } catch (error) {
       // If something throws, leave the remaining callbacks on the queue.
       if (syncQueue !== null) {
         syncQueue = syncQueue.slice(i + 1);
       }
       // Resume flushing in the next tick
-      scheduleCallback(ImmediatePriority, flushSyncCallbackQueue);
+      scheduleCallback(ImmediatePriority, flushSyncCallbacks);
       throw error;
     } finally {
       setCurrentUpdatePriority(previousUpdatePriority);
diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
index 48a6f352feca..52b4b5d44b64 100644
--- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
@@ -17,6 +17,7 @@ import {
 import {ImmediatePriority, scheduleCallback} from './Scheduler';
 
 let syncQueue: Array<SchedulerCallback> | null = null;
+let includesLegacySyncCallbacks: boolean = false;
 let isFlushingSyncQueue: boolean = false;
 
 export function scheduleSyncCallback(callback: SchedulerCallback) {
@@ -31,7 +32,23 @@ export function scheduleSyncCallback(callback: SchedulerCallback) {
   }
 }
 
-export function flushSyncCallbackQueue() {
+export function scheduleLegacySyncCallback(callback: SchedulerCallback) {
+  includesLegacySyncCallbacks = true;
+  scheduleSyncCallback(callback);
+}
+
+export function flushSyncCallbacksOnlyInLegacyMode() {
+  // Only flushes the queue if there's a legacy sync callback scheduled.
+  // TODO: There's only a single type of callback: performSyncOnWorkOnRoot. So
+  // it might make more sense for the queue to be a list of roots instead of a
+  // list of generic callbacks. Then we can have two: one for legacy roots, one
+  // for concurrent roots. And this method would only flush the legacy ones.
+  if (includesLegacySyncCallbacks) {
+    flushSyncCallbacks();
+  }
+}
+
+export function flushSyncCallbacks() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrancy.
     isFlushingSyncQueue = true;
@@ -50,13 +67,14 @@ export function flushSyncCallbackQueue() {
         } while (callback !== null);
       }
       syncQueue = null;
+      includesLegacySyncCallbacks = false;
     } catch (error) {
       // If something throws, leave the remaining callbacks on the queue.
       if (syncQueue !== null) {
         syncQueue = syncQueue.slice(i + 1);
       }
       // Resume flushing in the next tick
-      scheduleCallback(ImmediatePriority, flushSyncCallbackQueue);
+      scheduleCallback(ImmediatePriority, flushSyncCallbacks);
       throw error;
     } finally {
       setCurrentUpdatePriority(previousUpdatePriority);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 9ebace0c7201..938d32fc826c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -49,8 +49,10 @@ import {
   IdlePriority as IdleSchedulerPriority,
 } from './Scheduler';
 import {
-  flushSyncCallbackQueue,
+  flushSyncCallbacks,
+  flushSyncCallbacksOnlyInLegacyMode,
   scheduleSyncCallback,
+  scheduleLegacySyncCallback,
 } from './ReactFiberSyncTaskQueue.new';
 import {
   NoFlags as NoHookEffect,
@@ -561,7 +563,7 @@ export function scheduleUpdateOnFiber(
         // without immediately flushing it. We only do this for user-initiated
         // updates, to preserve historical behavior of legacy mode.
         resetRenderTimer();
-        flushSyncCallbackQueue();
+        flushSyncCallbacksOnlyInLegacyMode();
       }
     }
   } else {
@@ -698,13 +700,17 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
-    scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    if (root.tag === LegacyRoot) {
+      scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
+    } else {
+      scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    }
     if (supportsMicrotasks) {
       // Flush the queue in a microtask.
-      scheduleMicrotask(flushSyncCallbackQueue);
+      scheduleMicrotask(flushSyncCallbacks);
     } else {
       // Flush the queue in an Immediate task.
-      scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbackQueue);
+      scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);
     }
     newCallbackNode = null;
   } else {
@@ -1054,7 +1060,7 @@ export function flushRoot(root: FiberRoot, lanes: Lanes) {
     ensureRootIsScheduled(root, now());
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacks();
     }
   }
 }
@@ -1085,7 +1091,7 @@ export function flushDiscreteUpdates() {
     // like `el.focus()`. Exit.
     return;
   }
-  flushSyncCallbackQueue();
+  flushSyncCallbacks();
   // If the discrete updates scheduled passive effects, flush them now so that
   // they fire before the next serial event.
   flushPassiveEffects();
@@ -1111,10 +1117,11 @@ export function batchedUpdates<A, R>(fn: A => R, a: A): R {
     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) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
 }
@@ -1126,10 +1133,11 @@ export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
     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) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
 }
@@ -1151,9 +1159,10 @@ export function discreteUpdates<A, B, C, D, R>(
     setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      // TODO: This should only flush legacy sync updates. Not discrete updates
+      // in Concurrent Mode. Discrete updates will flush in a microtask.
+      flushSyncCallbacks();
     }
   }
 }
@@ -1166,10 +1175,13 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
     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) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      // TODO: I think this call is redundant, because we flush inside
+      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
 }
@@ -1196,7 +1208,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // Note that this will happen even if batchedUpdates is higher up
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
-      flushSyncCallbackQueue();
+      flushSyncCallbacks();
     } else {
       if (__DEV__) {
         console.error(
@@ -1226,7 +1238,7 @@ export function flushControlled(fn: () => mixed): void {
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacks();
     }
   }
 }
@@ -2098,7 +2110,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   }
 
   // If layout work was scheduled, flush it now.
-  flushSyncCallbackQueue();
+  flushSyncCallbacks();
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2224,7 +2236,7 @@ function flushPassiveEffectsImpl() {
 
   executionContext = prevExecutionContext;
 
-  flushSyncCallbackQueue();
+  flushSyncCallbacks();
 
   // If additional passive effects were scheduled, increment a counter. If this
   // exceeds the limit, we'll fire a warning.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 09a116c97bd7..8f80ad2a37bc 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -49,8 +49,10 @@ import {
   IdlePriority as IdleSchedulerPriority,
 } from './Scheduler';
 import {
-  flushSyncCallbackQueue,
+  flushSyncCallbacks,
+  flushSyncCallbacksOnlyInLegacyMode,
   scheduleSyncCallback,
+  scheduleLegacySyncCallback,
 } from './ReactFiberSyncTaskQueue.old';
 import {
   NoFlags as NoHookEffect,
@@ -561,7 +563,7 @@ export function scheduleUpdateOnFiber(
         // without immediately flushing it. We only do this for user-initiated
         // updates, to preserve historical behavior of legacy mode.
         resetRenderTimer();
-        flushSyncCallbackQueue();
+        flushSyncCallbacksOnlyInLegacyMode();
       }
     }
   } else {
@@ -698,13 +700,17 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
   if (newCallbackPriority === SyncLane) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
-    scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    if (root.tag === LegacyRoot) {
+      scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
+    } else {
+      scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
+    }
     if (supportsMicrotasks) {
       // Flush the queue in a microtask.
-      scheduleMicrotask(flushSyncCallbackQueue);
+      scheduleMicrotask(flushSyncCallbacks);
     } else {
       // Flush the queue in an Immediate task.
-      scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbackQueue);
+      scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);
     }
     newCallbackNode = null;
   } else {
@@ -1054,7 +1060,7 @@ export function flushRoot(root: FiberRoot, lanes: Lanes) {
     ensureRootIsScheduled(root, now());
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacks();
     }
   }
 }
@@ -1085,7 +1091,7 @@ export function flushDiscreteUpdates() {
     // like `el.focus()`. Exit.
     return;
   }
-  flushSyncCallbackQueue();
+  flushSyncCallbacks();
   // If the discrete updates scheduled passive effects, flush them now so that
   // they fire before the next serial event.
   flushPassiveEffects();
@@ -1111,10 +1117,11 @@ export function batchedUpdates<A, R>(fn: A => R, a: A): R {
     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) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
 }
@@ -1126,10 +1133,11 @@ export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
     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) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
 }
@@ -1151,9 +1159,10 @@ export function discreteUpdates<A, B, C, D, R>(
     setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      // TODO: This should only flush legacy sync updates. Not discrete updates
+      // in Concurrent Mode. Discrete updates will flush in a microtask.
+      flushSyncCallbacks();
     }
   }
 }
@@ -1166,10 +1175,13 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
     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) {
-      // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      // TODO: I think this call is redundant, because we flush inside
+      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
 }
@@ -1196,7 +1208,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // Note that this will happen even if batchedUpdates is higher up
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
-      flushSyncCallbackQueue();
+      flushSyncCallbacks();
     } else {
       if (__DEV__) {
         console.error(
@@ -1226,7 +1238,7 @@ export function flushControlled(fn: () => mixed): void {
     if (executionContext === NoContext) {
       // Flush the immediate callbacks that were scheduled during this batch
       resetRenderTimer();
-      flushSyncCallbackQueue();
+      flushSyncCallbacks();
     }
   }
 }
@@ -2098,7 +2110,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   }
 
   // If layout work was scheduled, flush it now.
-  flushSyncCallbackQueue();
+  flushSyncCallbacks();
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2224,7 +2236,7 @@ function flushPassiveEffectsImpl() {
 
   executionContext = prevExecutionContext;
 
-  flushSyncCallbackQueue();
+  flushSyncCallbacks();
 
   // If additional passive effects were scheduled, increment a counter. If this
   // exceeds the limit, we'll fire a warning.
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 5eda4dc7c7cd..a40a65671b8b 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -13,16 +13,20 @@
 let React;
 let ReactFiberReconciler;
 let ConcurrentRoot;
+let DefaultEventPriority;
 
 describe('ReactFiberHostContext', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
     ReactFiberReconciler = require('react-reconciler');
-    ConcurrentRoot = require('react-reconciler/src/ReactRootTags');
+    ConcurrentRoot = require('react-reconciler/src/ReactRootTags')
+      .ConcurrentRoot;
+    DefaultEventPriority = require('react-reconciler/src/ReactEventPriorities')
+      .DefaultEventPriority;
   });
 
-  it('works with null host context', () => {
+  it('works with null host context', async () => {
     let creates = 0;
     const Renderer = ReactFiberReconciler({
       prepareForCommit: function() {
@@ -54,6 +58,9 @@ describe('ReactFiberHostContext', () => {
         return null;
       },
       clearContainer: function() {},
+      getCurrentEventPriority: function() {
+        return DefaultEventPriority;
+      },
       supportsMutation: true,
     });
 
@@ -63,14 +70,16 @@ describe('ReactFiberHostContext', () => {
       false,
       null,
     );
-    Renderer.updateContainer(
-      <a>
-        <b />
-      </a>,
-      container,
-      /* parentComponent: */ null,
-      /* callback: */ null,
-    );
+    Renderer.act(() => {
+      Renderer.updateContainer(
+        <a>
+          <b />
+        </a>,
+        container,
+        /* parentComponent: */ null,
+        /* callback: */ null,
+      );
+    });
     expect(creates).toBe(2);
   });
 
@@ -109,6 +118,9 @@ describe('ReactFiberHostContext', () => {
         return null;
       },
       clearContainer: function() {},
+      getCurrentEventPriority: function() {
+        return DefaultEventPriority;
+      },
       supportsMutation: true,
     });
 
@@ -118,13 +130,15 @@ describe('ReactFiberHostContext', () => {
       false,
       null,
     );
-    Renderer.updateContainer(
-      <a>
-        <b />
-      </a>,
-      container,
-      /* parentComponent: */ null,
-      /* callback: */ null,
-    );
+    Renderer.act(() => {
+      Renderer.updateContainer(
+        <a>
+          <b />
+        </a>,
+        container,
+        /* parentComponent: */ null,
+        /* callback: */ null,
+      );
+    });
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
index 275a3feb8c82..f5dd5081aeaa 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalTriangle-test.js
@@ -432,9 +432,8 @@ describe('ReactIncrementalTriangle', () => {
         assertConsistentTree(activeLeafIndices);
       }
       // Flush remaining work
-      ReactNoop.act(() => {
-        Scheduler.unstable_flushAllWithoutAsserting();
-      });
+      Scheduler.unstable_flushAllWithoutAsserting();
+      ReactNoop.flushSync();
       assertConsistentTree(activeLeafIndices, expectedCounterAtEnd);
     }
 

From e8cdce40d667fa6745c9412b764c65eb85435b97 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 22 Apr 2021 15:28:05 -0500
Subject: [PATCH 0470/1603] Don't flush sync at end of discreteUpdates (#21327)

All it should do is change the priority. The updates will be flushed
by the microtask.
---
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  32 +++--
 .../ReactDOMNativeEventHeuristic-test.js      |   9 +-
 .../src/events/ReactDOMUpdateBatching.js      |   2 +
 .../__tests__/SimpleEventPlugin-test.js       | 124 +++---------------
 .../src/ReactFiberWorkLoop.new.js             |   3 -
 .../src/ReactFiberWorkLoop.old.js             |   3 -
 6 files changed, 41 insertions(+), 132 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index ff4e1b5aeeb5..35f8d46650d5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -427,7 +427,7 @@ describe('ReactDOMFiberAsync', () => {
     });
 
     // @gate experimental
-    it('ignores discrete events on a pending removed event listener', () => {
+    it('ignores discrete events on a pending removed event listener', async () => {
       const disableButtonRef = React.createRef();
       const submitButtonRef = React.createRef();
 
@@ -459,9 +459,9 @@ describe('ReactDOMFiberAsync', () => {
       }
 
       const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Form />);
-      // Flush
-      Scheduler.unstable_flushAll();
+      await act(async () => {
+        root.render(<Form />);
+      });
 
       const disableButton = disableButtonRef.current;
       expect(disableButton.tagName).toBe('BUTTON');
@@ -469,7 +469,9 @@ describe('ReactDOMFiberAsync', () => {
       // Dispatch a click event on the Disable-button.
       const firstEvent = document.createEvent('Event');
       firstEvent.initEvent('click', true, true);
-      disableButton.dispatchEvent(firstEvent);
+      await act(async () => {
+        disableButton.dispatchEvent(firstEvent);
+      });
 
       // There should now be a pending update to disable the form.
 
@@ -481,14 +483,16 @@ describe('ReactDOMFiberAsync', () => {
       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.
-      submitButton.dispatchEvent(secondEvent);
+      await act(async () => {
+        submitButton.dispatchEvent(secondEvent);
+      });
 
       // Therefore the form should never have been submitted.
       expect(formSubmitted).toBe(false);
     });
 
     // @gate experimental
-    it('uses the newest discrete events on a pending changed event listener', () => {
+    it('uses the newest discrete events on a pending changed event listener', async () => {
       const enableButtonRef = React.createRef();
       const submitButtonRef = React.createRef();
 
@@ -515,9 +519,9 @@ describe('ReactDOMFiberAsync', () => {
       }
 
       const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Form />);
-      // Flush
-      Scheduler.unstable_flushAll();
+      await act(async () => {
+        root.render(<Form />);
+      });
 
       const enableButton = enableButtonRef.current;
       expect(enableButton.tagName).toBe('BUTTON');
@@ -525,7 +529,9 @@ describe('ReactDOMFiberAsync', () => {
       // Dispatch a click event on the Enable-button.
       const firstEvent = document.createEvent('Event');
       firstEvent.initEvent('click', true, true);
-      enableButton.dispatchEvent(firstEvent);
+      await act(async () => {
+        enableButton.dispatchEvent(firstEvent);
+      });
 
       // There should now be a pending update to enable the form.
 
@@ -537,7 +543,9 @@ describe('ReactDOMFiberAsync', () => {
       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.
-      submitButton.dispatchEvent(secondEvent);
+      await act(async () => {
+        submitButton.dispatchEvent(secondEvent);
+      });
 
       // Therefore the form should have been submitted.
       expect(formSubmitted).toBe(true);
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 753af57ba849..7b252a3395a1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -357,6 +357,9 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     const pressEvent = document.createEvent('Event');
     pressEvent.initEvent('click', true, true);
     dispatchAndSetCurrentEvent(target.current, pressEvent);
+    // Intentionally not using `act` so we can observe in between the press
+    // event and the microtask, without batching.
+    await null;
     // If this is 2, that means the `setCount` calls were not batched.
     expect(container.textContent).toEqual('Count: 1');
 
@@ -409,11 +412,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     dispatchAndSetCurrentEvent(target, pressEvent);
 
     expect(Scheduler).toHaveYielded(['Count: 0 [after batchedUpdates]']);
-    // TODO: There's a `flushDiscreteUpdates` call at the end of the event
-    // delegation listener that gets called even if no React event handlers are
-    // fired. Once that is removed, this will be 0, not 1.
-    // expect(container.textContent).toEqual('Count: 0');
-    expect(container.textContent).toEqual('Count: 1');
+    expect(container.textContent).toEqual('Count: 0');
 
     // Intentionally not using `act` so we can observe in between the click
     // event and the microtask, without batching.
diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index c768bce0c3a7..4f0948dd68ab 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -39,6 +39,8 @@ function finishEventHandler() {
     // 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.
     flushDiscreteUpdatesImpl();
     restoreStateIfNeeded();
   }
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 95ea1cc598a5..cb522ba1edf5 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -13,7 +13,7 @@ describe('SimpleEventPlugin', function() {
   let React;
   let ReactDOM;
   let Scheduler;
-  let TestUtils;
+  let act;
 
   let onClick;
   let container;
@@ -40,7 +40,6 @@ describe('SimpleEventPlugin', function() {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
-    TestUtils = require('react-dom/test-utils');
 
     onClick = jest.fn();
   });
@@ -237,10 +236,12 @@ describe('SimpleEventPlugin', function() {
       React = require('react');
       ReactDOM = require('react-dom');
       Scheduler = require('scheduler');
+
+      act = require('react-dom/test-utils').unstable_concurrentAct;
     });
 
     // @gate experimental
-    it('flushes pending interactive work before exiting event handler', () => {
+    it('flushes pending interactive work before exiting event handler', async () => {
       container = document.createElement('div');
       const root = ReactDOM.unstable_createRoot(container);
       document.body.appendChild(container);
@@ -288,7 +289,7 @@ describe('SimpleEventPlugin', function() {
       }
 
       // Click the button to trigger the side-effect
-      click();
+      await act(async () => click());
       expect(Scheduler).toHaveYielded([
         // The handler fired
         'Side-effect',
@@ -312,6 +313,9 @@ describe('SimpleEventPlugin', function() {
       expect(Scheduler).toFlushAndYield([]);
     });
 
+    // 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.
     // @gate experimental
     it('end result of many interactive updates is deterministic', async () => {
       container = document.createElement('div');
@@ -355,121 +359,23 @@ describe('SimpleEventPlugin', function() {
       }
 
       // Click the button a single time
-      click();
+      await act(async () => click());
       // The counter should update synchronously, even in concurrent mode.
       expect(button.textContent).toEqual('Count: 1');
 
       // Click the button many more times
-      await TestUtils.act(async () => {
-        click();
-        click();
-        click();
-        click();
-        click();
-        click();
-      });
+      await act(async () => click());
+      await act(async () => click());
+      await act(async () => click());
+      await act(async () => click());
+      await act(async () => click());
+      await act(async () => click());
 
       // Flush the remaining work
       Scheduler.unstable_flushAll();
       // The counter should equal the total number of clicks
       expect(button.textContent).toEqual('Count: 7');
     });
-
-    // @gate experimental
-    it('flushes discrete updates in order', async () => {
-      container = document.createElement('div');
-      document.body.appendChild(container);
-
-      let button;
-      class Button extends React.Component {
-        state = {lowPriCount: 0};
-        render() {
-          const text = `High-pri count: ${this.props.highPriCount}, Low-pri count: ${this.state.lowPriCount}`;
-          Scheduler.unstable_yieldValue(text);
-          return (
-            <button
-              ref={el => (button = el)}
-              onClick={() => {
-                React.unstable_startTransition(() => {
-                  this.setState(state => ({
-                    lowPriCount: state.lowPriCount + 1,
-                  }));
-                });
-              }}>
-              {text}
-            </button>
-          );
-        }
-      }
-
-      class Wrapper extends React.Component {
-        state = {highPriCount: 0};
-        render() {
-          return (
-            <div
-              onClick={
-                // Intentionally not using the updater form here, to test
-                // that updates are serially processed.
-                () => {
-                  this.setState({highPriCount: this.state.highPriCount + 1});
-                }
-              }>
-              <Button highPriCount={this.state.highPriCount} />
-            </div>
-          );
-        }
-      }
-
-      // Initial mount
-      const root = ReactDOM.unstable_createRoot(container);
-      root.render(<Wrapper />);
-      expect(Scheduler).toFlushAndYield([
-        'High-pri count: 0, Low-pri count: 0',
-      ]);
-      expect(button.textContent).toEqual('High-pri count: 0, Low-pri 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.
-      // This will flush at the end of the event, even in concurrent mode.
-      click();
-      expect(Scheduler).toHaveYielded(['High-pri count: 1, Low-pri count: 0']);
-
-      // Click the button many more times
-      click();
-      click();
-      click();
-      click();
-      click();
-      click();
-
-      // Each update should synchronously flush, even in concurrent mode.
-      expect(Scheduler).toHaveYielded([
-        'High-pri count: 2, Low-pri count: 0',
-        'High-pri count: 3, Low-pri count: 0',
-        'High-pri count: 4, Low-pri count: 0',
-        'High-pri count: 5, Low-pri count: 0',
-        'High-pri count: 6, Low-pri count: 0',
-        'High-pri count: 7, Low-pri count: 0',
-      ]);
-
-      // Now flush the scheduler to apply the transition updates.
-      // At the end, both counters should equal the total number of clicks.
-      expect(Scheduler).toFlushAndYield([
-        'High-pri count: 7, Low-pri count: 7',
-      ]);
-
-      expect(button.textContent).toEqual('High-pri count: 7, Low-pri count: 7');
-    });
   });
 
   describe('iOS bubbling click fix', function() {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 938d32fc826c..c688214a100e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1160,9 +1160,6 @@ export function discreteUpdates<A, B, C, D, R>(
     ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       resetRenderTimer();
-      // TODO: This should only flush legacy sync updates. Not discrete updates
-      // in Concurrent Mode. Discrete updates will flush in a microtask.
-      flushSyncCallbacks();
     }
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8f80ad2a37bc..fb5ae4c1d7a2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1160,9 +1160,6 @@ export function discreteUpdates<A, B, C, D, R>(
     ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       resetRenderTimer();
-      // TODO: This should only flush legacy sync updates. Not discrete updates
-      // in Concurrent Mode. Discrete updates will flush in a microtask.
-      flushSyncCallbacks();
     }
   }
 }

From af5037a7a8ee983337a08eeff7477656bd80f5ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 22 Apr 2021 18:00:35 -0400
Subject: [PATCH 0471/1603] [Fizz] Wire up the Fixture (#21273)

* Wire up fizz to fixture

* Fixed typo conditional
---
 fixtures/ssr/server/index.js                  |    4 +-
 fixtures/ssr/server/render.js                 |   34 +-
 fixtures/ssr/src/components/App.js            |   34 +-
 fixtures/ssr/src/components/Chrome.js         |   32 +-
 fixtures/ssr/src/components/Suspend.js        |   19 +-
 fixtures/ssr/src/index.js                     |    2 +-
 fixtures/ssr/yarn.lock                        | 4469 ++++++++++++-----
 .../src/client/ReactDOMHostConfig.js          |    2 +-
 8 files changed, 3184 insertions(+), 1412 deletions(-)

diff --git a/fixtures/ssr/server/index.js b/fixtures/ssr/server/index.js
index fa57206df5eb..2b41c6d9fdeb 100644
--- a/fixtures/ssr/server/index.js
+++ b/fixtures/ssr/server/index.js
@@ -21,12 +21,12 @@ if (process.env.NODE_ENV === 'development') {
       delete require.cache[key];
     }
     const render = require('./render').default;
-    res.send(render(req.url));
+    render(req.url, res);
   });
 } else {
   const render = require('./render').default;
   app.get('/', function(req, res) {
-    res.send(render(req.url));
+    render(req.url, res);
   });
 }
 
diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index 80c4839ba434..5a37f5c5555b 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {renderToString} from 'react-dom/server';
+import {pipeToNodeWritable} from 'react-dom/unstable-fizz';
 
 import App from '../src/components/App';
 
@@ -14,9 +14,31 @@ if (process.env.NODE_ENV === 'development') {
   assets = require('../build/asset-manifest.json');
 }
 
-export default function render() {
-  var html = renderToString(<App assets={assets} />);
-  // There's no way to render a doctype in React so prepend manually.
-  // Also append a bootstrap script tag.
-  return '<!DOCTYPE html>' + html;
+export default function render(url, res) {
+  res.socket.on('error', error => {
+    // Log fatal errors
+    console.error('Fatal', error);
+  });
+  let didError = false;
+  const {startWriting, abort} = pipeToNodeWritable(
+    <App assets={assets} />,
+    res,
+    {
+      onReadyToStream() {
+        // If something errored before we started streaming, we set the error code appropriately.
+        res.statusCode = didError ? 500 : 200;
+        res.setHeader('Content-type', 'text/html');
+        // There's no way to render a doctype in React so prepend manually.
+        res.write('<!DOCTYPE html>');
+        startWriting();
+      },
+      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
index ebfafc9d15bb..a938ed2f188c 100644
--- a/fixtures/ssr/src/components/App.js
+++ b/fixtures/ssr/src/components/App.js
@@ -10,23 +10,29 @@ function LoadingIndicator() {
   return <div className={theme + '-loading'}>Loading...</div>;
 }
 
-export default function App({assets}) {
+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}>
-      <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>
+      <Content />
     </Chrome>
   );
 }
diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
index 9537f037e76e..c89566371056 100644
--- a/fixtures/ssr/src/components/Chrome.js
+++ b/fixtures/ssr/src/components/Chrome.js
@@ -1,4 +1,8 @@
-import React, {Component} from 'react';
+import React, {
+  Component,
+  Suspense,
+  unstable_startTransition as startTransition,
+} from 'react';
 
 import Theme, {ThemeToggleButton} from './Theme';
 
@@ -23,18 +27,20 @@ export default class Chrome extends Component {
               __html: `<b>Enable JavaScript to run this app.</b>`,
             }}
           />
-          <Theme.Provider value={this.state.theme}>
-            {this.props.children}
-            <div>
-              <ThemeToggleButton
-                onChange={theme => {
-                  React.startTransition(() => {
-                    this.setState({theme});
-                  });
-                }}
-              />
-            </div>
-          </Theme.Provider>
+          <Suspense fallback="Loading...">
+            <Theme.Provider value={this.state.theme}>
+              {this.props.children}
+              <div>
+                <ThemeToggleButton
+                  onChange={theme => {
+                    startTransition(() => {
+                      this.setState({theme});
+                    });
+                  }}
+                />
+              </div>
+            </Theme.Provider>
+          </Suspense>
           <script
             dangerouslySetInnerHTML={{
               __html: `assetManifest = ${JSON.stringify(assets)};`,
diff --git a/fixtures/ssr/src/components/Suspend.js b/fixtures/ssr/src/components/Suspend.js
index 80dc115cad28..9aac5493beeb 100644
--- a/fixtures/ssr/src/components/Suspend.js
+++ b/fixtures/ssr/src/components/Suspend.js
@@ -4,18 +4,19 @@ 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 (typeof window === 'object') {
-    if (!isResolved) {
-      if (promise === null) {
-        promise = new Promise(resolve => {
-          setTimeout(() => {
+  if (!isResolved) {
+    if (promise === null) {
+      promise = new Promise(resolve => {
+        setTimeout(
+          () => {
             isResolved = true;
             resolve();
-          }, 6000);
-        });
-      }
-      throw promise;
+          },
+          typeof window === 'object' ? 6000 : 1000
+        );
+      });
     }
+    throw promise;
   }
   return children;
 }
diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index 0af0c3127aa1..88c736fab428 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {createRoot} from 'react-dom';
+import {unstable_createRoot as createRoot} from 'react-dom';
 
 import App from './components/App';
 
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index 0e8591024641..3609381253bc 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -3,58 +3,79 @@
 
 
 abab@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
+  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.0"
-  resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.0.tgz#d0554c2256636e2f56e7c2e5ad183f859428d81f"
+  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.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.3.tgz#c3ca7434938648c3e0d9c1e328dd68b622c284ca"
+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.11"
-    negotiator "0.6.1"
+    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.11"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.11.tgz#edcda3bd937e7556410d42ed5860f67399c794c0"
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
+  integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
 
-acorn@^5.0.1:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.0.3.tgz#c460df08491463f028ccb82eab3730bf01087b3d"
+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.5"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.5.tgz#b6ee74657b993a01dce44b7944d56f485828d5bd"
+  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"
@@ -63,166 +84,235 @@ align-text@^0.1.1, align-text@^0.1.3:
 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=
 
-ansicolors@~0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/ansicolors/-/ansicolors-0.2.1.tgz#be089599097b74a5c9c4a84a0cdbcdb62bd87aef"
+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.0"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.0.tgz#a3e52fa39168c825ff57b0248126ce5a8ff95507"
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-1.3.2.tgz#553dcb8f91e3c889845dfdba34c77721b90b9d7a"
+  integrity sha512-0XNayC8lTHQ2OI8aljNCN3sSx6hsr/1+rlcDAotXJR7C1oZZHCNsfpbKwMjRA3Uqb5tF1Rae2oloTr4xpq+WjA==
   dependencies:
-    arrify "^1.0.0"
     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.1.1"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.1.1.tgz#95d3600f07710aa0e9298c726ad5ecf2eacbabab"
+  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.2"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz#80e470e95a084794fe1899262c5667c6e88de1b3"
+  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.0 || ^1.1.13"
+    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"
+  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-flatten@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.0.1.tgz#e5ffe54d45e19f32f216e91eb99c8ce892bb604b"
+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"
-
-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"
+  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.0, arrify@^1.0.1:
+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.5"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.5.tgz#522765b50c3510490e52d7dcfe085ef9ba96958f"
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
 
 asn1@~0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+  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.4.1"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  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.1"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
+  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.4.0, async@^1.5.0:
+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.3.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.3.0.tgz#1013d1051047dd320fe24e494d5c66ecaf6147d9"
+  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.14.0"
+    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, autoprefixer@^6.3.1:
+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"
@@ -231,25 +321,46 @@ autoprefixer@6.7.2, autoprefixer@^6.3.1:
     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=
 
-aws4@^1.2.1:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+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=
 
-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"
+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.0"
+    chalk "^1.1.3"
     esutils "^2.0.2"
-    js-tokens "^3.0.0"
+    js-tokens "^3.0.2"
 
-babel-core@6.22.1, babel-core@^6.0.0:
+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"
@@ -271,33 +382,35 @@ babel-core@6.22.1, babel-core@^6.0.0:
     slash "^1.0.0"
     source-map "^0.5.0"
 
-babel-core@^6.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.0.tgz#8f36a0a77f5c155aed6f920b844d23ba56742a02"
+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.22.0"
-    babel-generator "^6.24.0"
-    babel-helpers "^6.23.0"
+    babel-code-frame "^6.26.0"
+    babel-generator "^6.26.0"
+    babel-helpers "^6.24.1"
     babel-messages "^6.23.0"
-    babel-register "^6.24.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"
+    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.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"
@@ -305,132 +418,146 @@ babel-eslint@7.1.1:
     babylon "^6.13.0"
     lodash.pickby "^4.6.0"
 
-babel-generator@^6.18.0, babel-generator@^6.22.0, babel-generator@^6.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.24.0.tgz#eba270a8cc4ce6e09a61be43465d7c62c1f87c56"
+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.22.0"
-    babel-types "^6.23.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
+    lodash "^4.17.4"
+    source-map "^0.5.7"
     trim-right "^1.0.1"
 
-babel-helper-builder-binary-assignment-operator-visitor@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-builder-binary-assignment-operator-visitor/-/babel-helper-builder-binary-assignment-operator-visitor-6.22.0.tgz#29df56be144d81bdeac08262bfa41d2c5e91cdcd"
+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.22.0"
+    babel-helper-explode-assignable-expression "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-types "^6.22.0"
+    babel-types "^6.24.1"
 
-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"
+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.22.0"
-    babel-types "^6.23.0"
-    esutils "^2.0.0"
-    lodash "^4.2.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    esutils "^2.0.2"
 
-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"
+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.22.0"
+    babel-helper-hoist-variables "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-traverse "^6.22.0"
-    babel-types "^6.22.0"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-helper-define-map@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-define-map/-/babel-helper-define-map-6.23.0.tgz#1444f960c9691d69a2ced6a205315f8fd00804e7"
+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.23.0"
-    babel-runtime "^6.22.0"
-    babel-types "^6.23.0"
-    lodash "^4.2.0"
+    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.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-explode-assignable-expression/-/babel-helper-explode-assignable-expression-6.22.0.tgz#c97bf76eed3e0bae4048121f2b9dae1a4e7d0478"
+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.22.0"
-    babel-types "^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.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-function-name/-/babel-helper-function-name-6.23.0.tgz#25742d67175c8903dbe4b6cb9d9e1fcb8dcf23a6"
+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.22.0"
+    babel-helper-get-function-arity "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-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"
+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.22.0"
+    babel-types "^6.24.1"
 
-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"
+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.22.0"
+    babel-types "^6.24.1"
 
-babel-helper-optimise-call-expression@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.23.0.tgz#f3ee7eed355b4282138b33d02b78369e470622f5"
+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.23.0"
+    babel-types "^6.24.1"
 
-babel-helper-regex@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-regex/-/babel-helper-regex-6.22.0.tgz#79f532be1647b1f0ee3474b5f5c3da58001d247d"
+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.22.0"
-    babel-types "^6.22.0"
-    lodash "^4.2.0"
+    babel-runtime "^6.26.0"
+    babel-types "^6.26.0"
+    lodash "^4.17.4"
 
-babel-helper-remap-async-to-generator@^6.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.22.0.tgz#2186ae73278ed03b8b15ced089609da981053383"
+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.22.0"
+    babel-helper-function-name "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.22.0"
-    babel-traverse "^6.22.0"
-    babel-types "^6.22.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-babel-helper-replace-supers@^6.22.0, babel-helper-replace-supers@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-helper-replace-supers/-/babel-helper-replace-supers-6.23.0.tgz#eeaf8ad9b58ec4337ca94223bacdca1f8d9b4bfd"
+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.23.0"
+    babel-helper-optimise-call-expression "^6.24.1"
     babel-messages "^6.23.0"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
+    babel-template "^6.24.1"
+    babel-traverse "^6.24.1"
+    babel-types "^6.24.1"
 
-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"
+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.23.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"
@@ -439,6 +566,7 @@ babel-jest@18.0.0, babel-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"
@@ -448,18 +576,21 @@ babel-loader@6.2.10:
 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"
@@ -469,46 +600,56 @@ babel-plugin-istanbul@^3.0.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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.22.0.tgz#194b6938ec195ad36efc4c33a971acf00d8cd35e"
+  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.22.0"
+    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"
@@ -518,182 +659,206 @@ babel-plugin-transform-class-properties@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.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.23.0.tgz#e48895cf0b375be148cd7c8879b422707a053b51"
+  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.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
-    lodash "^4.2.0"
+    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.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.23.0.tgz#49b53f326202a2fd1b3bbaa5e2edd8a4f78643c1"
-  dependencies:
-    babel-helper-define-map "^6.23.0"
-    babel-helper-function-name "^6.23.0"
-    babel-helper-optimise-call-expression "^6.23.0"
-    babel-helper-replace-supers "^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.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.22.0.tgz#7c383e9629bba4820c11b0425bdd6290f7f057e7"
+  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.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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.22.0.tgz#672397031c21610d72dd2bbb0ba9fb6277e1c36b"
+  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.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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.22.0.tgz#f5fcc8b09093f9a23c76ac3d9e392c3ec4b77104"
+  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.22.0"
+    babel-helper-function-name "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-types "^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.0, babel-plugin-transform-es2015-modules-amd@^6.8.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.0.tgz#a1911fb9b7ec7e05a43a63c5995007557bcf6a2e"
+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.0"
+    babel-plugin-transform-es2015-modules-commonjs "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.22.0"
+    babel-template "^6.24.1"
 
-babel-plugin-transform-es2015-modules-commonjs@^6.24.0, babel-plugin-transform-es2015-modules-commonjs@^6.6.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.24.0.tgz#e921aefb72c2cc26cb03d107626156413222134f"
+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.22.0"
-    babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-types "^6.23.0"
+    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.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.23.0.tgz#ae3469227ffac39b0310d90fec73bfdc4f6317b0"
+  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.22.0"
+    babel-helper-hoist-variables "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
+    babel-template "^6.24.1"
 
 babel-plugin-transform-es2015-modules-umd@^6.12.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.0.tgz#fd5fa63521cae8d273927c3958afd7c067733450"
+  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.0"
+    babel-plugin-transform-es2015-modules-amd "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
+    babel-template "^6.24.1"
 
 babel-plugin-transform-es2015-object-super@^6.3.13:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.22.0.tgz#daa60e114a042ea769dd53fe528fc82311eb98fc"
+  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.22.0"
+    babel-helper-replace-supers "^6.24.1"
     babel-runtime "^6.22.0"
 
 babel-plugin-transform-es2015-parameters@^6.6.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.23.0.tgz#3a2aabb70c8af945d5ce386f1a4250625a83ae3b"
+  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.22.0"
-    babel-helper-get-function-arity "^6.22.0"
+    babel-helper-call-delegate "^6.24.1"
+    babel-helper-get-function-arity "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-template "^6.23.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.22.0.tgz#8ba776e0affaa60bff21e921403b8a652a2ff723"
+  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.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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.22.0.tgz#ab316829e866ee3f4b9eb96939757d19a5bc4593"
+  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.22.0"
+    babel-helper-regex "^6.24.1"
     babel-runtime "^6.22.0"
-    babel-types "^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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.22.0.tgz#8d9cc27e7ee1decfe65454fb986452a04a613d20"
+  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.22.0"
+    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.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.22.0.tgz#d57c8335281918e54ef053118ce6eb108468084d"
+  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.22.0"
+    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"
@@ -701,6 +866,7 @@ babel-plugin-transform-flow-strip-types@^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"
@@ -708,18 +874,21 @@ babel-plugin-transform-object-rest-spread@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.23.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-display-name/-/babel-plugin-transform-react-display-name-6.23.0.tgz#4398910c358441dc4cef18787264d0412ed36b37"
+  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"
@@ -727,40 +896,62 @@ babel-plugin-transform-react-jsx-self@6.22.0, babel-plugin-transform-react-jsx-s
 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, 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"
+  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-regenerator@6.22.0, babel-plugin-transform-regenerator@^6.6.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.22.0:
-  version "6.22.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.22.0.tgz#e008df01340fdc87e959da65991b7e05970c8c7c"
+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.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"
@@ -796,12 +987,14 @@ babel-preset-env@1.2.1:
 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"
@@ -818,6 +1011,7 @@ babel-preset-react-app@^2.2.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"
@@ -827,155 +1021,236 @@ babel-preset-react@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.24.0:
-  version "6.24.0"
-  resolved "https://registry.yarnpkg.com/babel-register/-/babel-register-6.24.0.tgz#5e89f8463ba9970356d02eb07dabe3308b080cfd"
+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.24.0"
-    babel-runtime "^6.22.0"
-    core-js "^2.4.0"
+    babel-core "^6.26.0"
+    babel-runtime "^6.26.0"
+    core-js "^2.5.0"
     home-or-tmp "^2.0.0"
-    lodash "^4.2.0"
+    lodash "^4.17.4"
     mkdirp "^0.5.1"
-    source-map-support "^0.4.2"
+    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:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.23.0.tgz#0a9489f144de70efb3ce4300accdb329e2fc543b"
+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.10.0"
+    regenerator-runtime "^0.11.0"
 
-babel-template@^6.16.0, babel-template@^6.22.0, babel-template@^6.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638"
+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.22.0"
-    babel-traverse "^6.23.0"
-    babel-types "^6.23.0"
-    babylon "^6.11.0"
-    lodash "^4.2.0"
+    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.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"
+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.22.0"
+    babel-code-frame "^6.26.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-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.23.0:
-  version "6.23.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.23.0.tgz#bb17179d7538bad38cd0c9e115d340f77e7e9acf"
+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.22.0"
+    babel-runtime "^6.26.0"
     esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^1.0.1"
+    lodash "^4.17.4"
+    to-fast-properties "^1.0.3"
 
-babylon@^6.11.0, babylon@^6.13.0, babylon@^6.15.0:
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3"
+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.1, balanced-match@^0.4.2:
+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=
 
-base64-js@^1.0.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
+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.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
+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.1"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  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.1.3"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.1.3.tgz#4cada2193652eb3ca9ec8e55c9015669c9806978"
+  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.8.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.8.0.tgz#48ec8d16df4377eae5fa5884682480af4d95c774"
+  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.5.0"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
+  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, 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:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.6.tgz#7197d7eaa9b87e648390ea61fc66c84427420df9"
+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 "^0.4.1"
+    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.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  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.0.1, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.7.1:
+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"
@@ -983,50 +1258,80 @@ browserslist@^1.0.1, browserslist@^1.4.0, browserslist@^1.5.2, browserslist@^1.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-shims@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-shims/-/buffer-shims-1.0.0.tgz#9978ce317388c649ad8793028c3477ef044a8b51"
+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.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  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:
+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@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-2.3.0.tgz#d5b680a165b6201739acb611542aabc2d8ceb070"
+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"
@@ -1034,42 +1339,50 @@ camel-case@3.0.x:
 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.5.3"
-  resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.5.3.tgz#5018e674b51c393e4d50614275dc017e27c4a2a2"
+  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.0.1"
-    caniuse-db "^1.0.30000346"
-    lodash.memoize "^4.1.0"
-    lodash.uniq "^4.3.0"
+    browserslist "^1.3.6"
+    caniuse-db "^1.0.30000529"
+    lodash.memoize "^4.1.2"
+    lodash.uniq "^4.5.0"
 
-caniuse-db@^1.0.30000346, caniuse-db@^1.0.30000618, caniuse-db@^1.0.30000639:
-  version "1.0.30000649"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000649.tgz#1ee1754a6df235450c8b7cd15e0ebf507221a86a"
+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@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/cardinal/-/cardinal-1.0.0.tgz#50e21c1b0aa37729f9377def196b5a9cec932ee9"
+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.2.1"
-    redeyed "~1.0.0"
+    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"
@@ -1077,6 +1390,7 @@ center-align@^0.1.1:
 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"
@@ -1084,9 +1398,10 @@ chalk@0.5.1:
     strip-ansi "^0.3.0"
     supports-color "^0.2.0"
 
-chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.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"
+  integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
   dependencies:
     ansi-styles "^2.2.1"
     escape-string-regexp "^1.0.2"
@@ -1094,9 +1409,19 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     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.6.1"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
+  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"
@@ -1109,52 +1434,71 @@ chokidar@^1.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"
+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.1"
-  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.1.tgz#be8b36aefccde8b3ca7aa2d6afc07a37242c0d2d"
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
+  integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
 
 clap@^1.0.9:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/clap/-/clap-1.1.3.tgz#b3bd36e93dd4cbfb395a3c26896352445265c05b"
+  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"
 
-clean-css@4.0.x:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.0.11.tgz#a6d88bffb399420b24298db49d99a1ed067534a8"
+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.5.x"
+    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.1"
-  resolved "https://registry.yarnpkg.com/cli-table/-/cli-table-0.3.1.tgz#f53b05266a8b1a0b934b3d0821e6e2dc5914ae23"
+  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.4"
-  resolved "https://registry.yarnpkg.com/cli-usage/-/cli-usage-0.1.4.tgz#7c01e0dc706c234b39c933838c8e20b2175776e2"
+  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.3.6"
-    marked-terminal "^1.6.2"
+    marked "^0.7.0"
+    marked-terminal "^3.3.0"
 
 cli-width@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.1.0.tgz#b234ca209b29ef66fc518d9b98d5847b00edf00a"
+  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"
@@ -1163,48 +1507,70 @@ cliui@^2.1.0:
 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.2"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.2.tgz#260b7a99ebb1edfe247538175f783243cb19d149"
+  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.1"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.1.tgz#7f959346cfc8719e3f7233cd6852854a7c67d8a3"
+  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=
 
-color-convert@^1.3.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.0.tgz#1accf97dd739b983bf994d56fec8f95853641b7a"
+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:
-    color-name "^1.1.1"
+    map-visit "^1.0.0"
+    object-visit "^1.0.0"
 
-color-name@^1.0.0, color-name@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.2.tgz#5c8ab72b64bd2215d617ae9559ebb148475cf98d"
+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"
@@ -1213,6 +1579,7 @@ color@^0.11.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"
@@ -1221,56 +1588,76 @@ colormin@^1.0.5:
 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.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+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.9.x:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
-  dependencies:
-    graceful-readlink ">= 1.0.0"
+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.8:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.10.tgz#feda1c7f7617912732b29bf8cf26252a20b9eecd"
+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.27.0 < 2"
+    mime-db ">= 1.43.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"
+  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.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  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"
@@ -1278,6 +1665,7 @@ concat-stream@^1.4.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"
@@ -1288,64 +1676,91 @@ concurrently@3.1.0:
     spawn-default-shell "^1.1.0"
     tree-kill "^1.1.0"
 
-connect-history-api-fallback@1.3.0, 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"
+  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.1.0"
-  resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.1.0.tgz#f0241c45730a9fc6323b206dbf38edc741d0bb10"
-  dependencies:
-    date-now "^0.1.4"
+  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.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+content-disposition@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
 
 content-type-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"
+  resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7"
+  integrity sha512-lM4l4CnMEwOLHAHr/P6MEZwZFPJFtAAKgL6pogbXmVZggIqXhdB6RbBtPOTsw2FcXwYhehRGERJmRrjOiIB8pQ==
 
-convert-source-map@^1.1.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.0.tgz#9acd70851c6d5dfdd93d9282e5edf94a03ff46b5"
+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.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
+copy-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:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
+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.0:
+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.1.1"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-2.1.1.tgz#817f2c2039347a1e9bf7d090c0923e53f749ca82"
+  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"
@@ -1356,6 +1771,7 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
 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"
@@ -1363,12 +1779,14 @@ cross-spawn@4.0.2:
 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"
@@ -1378,10 +1796,12 @@ crypto-browserify@3.3.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"
+  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"
@@ -1396,42 +1816,38 @@ css-loader@0.26.1:
     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"
+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 "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
+    boolbase "^1.0.0"
+    css-what "^3.2.1"
+    domutils "^1.7.0"
+    nth-check "^1.0.2"
 
-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"
+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 "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
 
-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.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+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@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+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"
@@ -1469,171 +1885,219 @@ cssesc@^0.1.0:
 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.2"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
 "cssstyle@>= 0.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:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+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.9"
+    es5-ext "^0.10.50"
+    type "^1.0.1"
 
 damerau-levenshtein@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
+  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"
 
-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:
+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.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
+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 "0.7.2"
+    ms "2.0.0"
 
-debug@2.6.3, debug@^2.1.0, debug@^2.1.1, debug@^2.2.0, debug@^2.6.0:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
+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 "0.7.2"
+    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=
 
-deep-extend@~0.4.0:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
+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=
+
+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"
 
-defined@^1.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/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
+  integrity sha1-dp66rz9KY6rTr56NMEybvnm/sOY=
+  dependencies:
+    is-descriptor "^1.0.0"
 
-del@^2.0.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/del/-/del-2.2.2.tgz#c12c981d067846c84bcaf862cff930d907ffd1a8"
+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:
-    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"
+    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.0, depd@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.0.tgz#e1bd82c6aab6ced965b97b88b17ed3e528ca18c3"
+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.2.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.2.0.tgz#c9ce393a4b7cbd0b058a725c93df299027868ff9"
+  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, doctrine@^1.2.2:
+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"
 
-dom-converter@~0.1:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+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.3"
+    utila "~0.4"
 
 dom-serializer@0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  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 "~1.1.1"
-    entities "~1.1.1"
+    domelementtype "^2.0.1"
+    entities "^2.0.0"
 
 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"
+  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.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+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==
 
-domhandler@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
-  dependencies:
-    domelementtype "1"
+domelementtype@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
-domutils@1.1:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
-domutils@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+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"
@@ -1641,85 +2105,108 @@ domutils@1.5.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.1"
-  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  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.1"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  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.2"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.2.tgz#b8ce5c93b308db0e92f6d0435c46ddec8f6363ab"
+  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.4.1"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-6.4.1.tgz#77486fe9cd45421d260a6238b88d721e2fad2050"
+  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.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+encodeurl@~1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
+  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
 encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  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.4.13"
+    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.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+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==
 
-"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"
+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 "~0.0.0"
+    prr "~1.0.1"
 
 error-ex@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  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.14, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.15"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.15.tgz#c330a5934c1ee21284a7c081a86e5fd937c91ea6"
+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"
-    es6-symbol "~3.1"
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
 
-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"
+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.14"
-    es6-symbol "^3.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"
@@ -1731,6 +2218,7 @@ es6-map@^0.1.3:
 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"
@@ -1738,44 +2226,58 @@ es6-set@~0.1.5:
     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:
+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.2"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  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.14"
-    es6-iterator "^2.0.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.8.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.8.1.tgz#5a5b53af4693110bebb0867aa3430dd3b70a1018"
+  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 "^2.7.1"
-    estraverse "^1.9.1"
+    esprima "^4.0.1"
+    estraverse "^4.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
-    source-map "~0.2.0"
+    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"
@@ -1785,10 +2287,12 @@ escope@^3.6.0:
 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"
@@ -1797,6 +2301,7 @@ eslint-import-resolver-node@^0.2.0:
 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"
@@ -1805,6 +2310,7 @@ eslint-loader@1.6.0:
 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"
@@ -1812,12 +2318,14 @@ eslint-module-utils@^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"
@@ -1833,6 +2341,7 @@ eslint-plugin-import@2.0.1:
 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"
@@ -1844,6 +2353,7 @@ eslint-plugin-jsx-a11y@4.0.0:
 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"
@@ -1851,6 +2361,7 @@ eslint-plugin-react@6.4.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"
@@ -1888,174 +2399,269 @@ eslint@3.16.1:
     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"
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
   dependencies:
-    acorn "^5.0.1"
+    acorn "^5.5.0"
     acorn-jsx "^3.0.0"
 
-esprima@^2.6.0, esprima@^2.7.1:
+esprima@^2.6.0:
   version "2.7.3"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
+  integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
 
-esprima@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/esprima/-/esprima-3.0.0.tgz#53cf247acda77313e551c3aa2e73342d3fb4f7d9"
+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.1.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.1.0.tgz#4713b6536adf7f2ac4f327d559e7756bff648220"
+  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 "~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 "^5.2.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"
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
-estraverse@~4.1.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.1.1.tgz#f6caca728933a850ef90661d0e17982ba47111a2"
+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.0, esutils@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+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.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.0.tgz#6f631aef336d6c46362b51764044ce216be3c051"
+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@1.x.x:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+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.0"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.0.tgz#14f75de3f20d286ef933099b2ce50a90359cef10"
+  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.1.3"
+    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.15.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.15.2.tgz#af107fc148504457f2dca9a6f2571d7129b97b35"
+  version "4.17.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
+  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
   dependencies:
-    accepts "~1.3.3"
+    accepts "~1.3.7"
     array-flatten "1.1.1"
-    content-disposition "0.5.2"
-    content-type "~1.0.2"
-    cookie "0.3.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.1"
-    depd "~1.1.0"
-    encodeurl "~1.0.1"
+    debug "2.6.9"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    etag "~1.8.0"
-    finalhandler "~1.0.0"
-    fresh "0.5.0"
+    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.1"
+    parseurl "~1.3.3"
     path-to-regexp "0.1.7"
-    proxy-addr "~1.1.3"
-    qs "6.4.0"
-    range-parser "~1.2.0"
-    send "0.15.1"
-    serve-static "1.12.1"
-    setprototypeof "1.0.3"
-    statuses "~1.3.1"
-    type-is "~1.6.14"
-    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"
+    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.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.0.2.tgz#e1080e0658e300b06294990cc70e1502235fd550"
+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-levenshtein@~2.0.4:
+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.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+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"
+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"
@@ -2063,6 +2669,7 @@ figures@^1.3.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"
@@ -2070,16 +2677,24 @@ file-entry-cache@^2.0.0:
 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.0"
-  resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.0.tgz#996e3e80479b98b9897f15a8a58b3d084e926775"
+  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"
@@ -2087,32 +2702,46 @@ fileset@^2.0.2:
 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.3"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  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 "^1.1.3"
+    randomatic "^3.0.0"
     repeat-element "^1.1.2"
     repeat-string "^1.5.2"
 
-finalhandler@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.0.1.tgz#bcd15d1689c0e5ed729b6f7f541a6df984117db8"
+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.3"
-    encodeurl "~1.0.1"
+    debug "2.6.9"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
-    parseurl "~1.3.1"
-    statuses "~1.3.1"
+    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"
@@ -2121,56 +2750,87 @@ find-cache-dir@^0.1.1:
 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.2.2"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.2.2.tgz#fa86714e72c21db88601761ecf2f555d1abc6b96"
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.4.tgz#2c2ef77525cc2929007dfffa1dd314aa9c9dee6f"
+  integrity sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==
   dependencies:
     circular-json "^0.3.1"
-    del "^2.0.2"
     graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
     write "^0.2.1"
 
 flatten@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+  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.13.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267"
+  integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA==
 
-for-in@^1.0.1:
+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.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.1.2.tgz#89c3534008b97eada4cbb157d58f6f5df025eae4"
+  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"
 
-forwarded@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.0.tgz#19ef9874c4ae1c297bcf078fde63a09b66a84363"
+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"
 
-fresh@0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.0.tgz#f474ca5e6a9246d6fd8e0953cfa9b9c805afa78e"
+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"
@@ -2181,38 +2841,52 @@ fs-extra@0.30.0, fs-extra@^0.30.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=
 
-fsevents@1.0.17, fsevents@^1.0.0:
+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.2:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.11.tgz#5c1fb1f117477114f0632a0eb4b71b3cb0fd3171"
+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.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.0.tgz#16176714c801798e4e8f2cf7f7529467bb4a5771"
+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"
+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"
@@ -2224,28 +2898,40 @@ gauge@~2.7.1:
     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"
+  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.2"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
+  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.6"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.6.tgz#283ffd9fc1256840875311c1b60e8c40187110e6"
+  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"
@@ -2253,158 +2939,221 @@ glob-base@^0.3.0:
 glob-parent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
   dependencies:
     is-glob "^2.0.0"
 
-glob@^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"
+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.2"
+    minimatch "^3.0.4"
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globals@^9.0.0, globals@^9.14.0:
-  version "9.17.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-9.17.0.tgz#0c0ca696d9b9bb694d2e5470bd37777caad50286"
-
-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"
+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-readlink@>= 1.0.0":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+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.0.6"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.6.tgz#2ce4484850537f9c97a8026d5399b935c4ed4ed7"
-  dependencies:
-    async "^1.4.0"
-    optimist "^0.6.1"
-    source-map "^0.4.4"
+  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 "^2.6"
+    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@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+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.0.2"
+    function-bind "^1.1.1"
 
-hawk@~3.1.3:
+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.1.x:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+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.4.1"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.4.1.tgz#4b0445e41c004a8bd1337773a4ff790ca40318c8"
+  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.1"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
+  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.1"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz#79bf7a785ea495fe66165e734153f363ff5437da"
+  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.4.2"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.4.2.tgz#31896baaf735c1d95f7a0b7291f9dc36c0720752"
+  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.0.x"
-    commander "2.9.x"
-    he "1.1.x"
-    ncname "1.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 "2.8.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"
@@ -2413,35 +3162,69 @@ html-webpack-plugin@2.24.0:
     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"
+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"
-    domhandler "2.1"
-    domutils "1.1"
-    readable-stream "1.0"
+    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.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.5.1.tgz#788c0d2c1de2c81b9e6e8c01843b6b97eb920750"
+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.0.2"
-    statuses ">= 1.3.1 < 2"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
 
-http-errors@~1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.1.tgz#5f8b8ed98aca545656bf572997387f904a722257"
+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.0"
+    depd "~1.1.2"
     inherits "2.0.3"
-    setprototypeof "1.0.3"
-    statuses ">= 1.3.1 < 2"
+    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, http-proxy-middleware@~0.17.1:
+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"
@@ -2449,88 +3232,125 @@ http-proxy-middleware@0.17.3, http-proxy-middleware@~0.17.1:
     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"
+  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 "1.x.x"
-    requires-port "1.x.x"
+    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.13:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
+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.4.13:
-  version "0.4.15"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
+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.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.0.2.tgz#cb0b6054eb3af6edc9ab1d62d01933e2d4c8bfa5"
+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.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
+  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.2.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.2.6.tgz#26e8da0644be0bb4cb39516f6c79f0e0f4ffe48c"
+  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.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, 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.4"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.4.tgz#0537cb79daf59b59a1a517dff706c86ec039162e"
+  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"
@@ -2549,267 +3369,382 @@ inquirer@^0.12.0:
 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.0.2"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.2.tgz#f4f623f0bb7122f15f5717c8e254b8161b5c5b2d"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
+  integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
-invariant@^2.2.0, invariant@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+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.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.3.0.tgz#1e03a52fdad83a8bbb2b25cbf4998b4cffcd3dec"
+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.0.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
+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-builtin-module@^1.0.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-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
+  resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz#d84876321d0e7add03990406abbbbd36ba9268c7"
+  integrity sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==
   dependencies:
-    builtin-modules "^1.0.0"
+    kind-of "^6.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"
+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:
-    ci-info "^1.0.0"
+    is-accessor-descriptor "^0.1.6"
+    is-data-descriptor "^0.1.4"
+    kind-of "^5.0.0"
 
-is-dotfile@^1.0.0:
+is-descriptor@^1.0.0, is-descriptor@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.2.tgz#2c132383f39199f8edc268ca01b9b007d205cc4d"
+  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.1:
+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.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  dependencies:
-    number-is-nan "^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.16.0"
-  resolved "https://registry.yarnpkg.com/is-my-json-valid/-/is-my-json-valid-2.16.0.tgz#f079dd9bfdae65ee2038aae8acbc86ab109e3693"
+  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.0.2, is-number@^2.1.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-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"
+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:
-    is-path-inside "^1.0.0"
+    kind-of "^3.0.2"
 
-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-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.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.0.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.0.tgz#8df57c61ea2e3c501408d100fb013cf8d6e0cc62"
-  dependencies:
-    tryit "^1.0.1"
+  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=
 
-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+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.1.7"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.1.7.tgz#f6f37f09f8002b130f891c646b70ee4a8e7345ae"
+  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.0.2"
-    istanbul-lib-hook "^1.0.5"
-    istanbul-lib-instrument "^1.7.0"
-    istanbul-lib-report "^1.0.0"
-    istanbul-lib-source-maps "^1.1.1"
-    istanbul-reports "^1.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.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.2.tgz#87a0c015b6910651cb3b184814dfb339337e25e1"
+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.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.0.5.tgz#6ca3d16d60c5f4082da39f7c5cd38ea8a772b88e"
+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.4.2, istanbul-lib-instrument@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-1.7.0.tgz#b8e0dc25709bb44e17336ab47b7bb5c97c23f659"
+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.13.0"
-    istanbul-lib-coverage "^1.0.2"
+    babylon "^6.18.0"
+    istanbul-lib-coverage "^1.2.1"
     semver "^5.3.0"
 
-istanbul-lib-report@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-report/-/istanbul-lib-report-1.0.0.tgz#d83dac7f26566b521585569367fe84ccfc7aaecb"
+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.0.2"
+    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.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.1.1.tgz#f8c8c2e8f2160d1d91526d97e5bd63b2079af71c"
+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:
-    istanbul-lib-coverage "^1.0.2"
+    debug "^3.1.0"
+    istanbul-lib-coverage "^1.2.1"
     mkdirp "^0.5.1"
-    rimraf "^2.4.4"
+    rimraf "^2.6.1"
     source-map "^0.5.3"
 
-istanbul-reports@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-1.0.2.tgz#4e8366abe6fa746cc1cd6633f108de12cc6ac6fa"
+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"
@@ -2843,6 +3778,7 @@ jest-cli@^18.1.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"
@@ -2856,6 +3792,7 @@ jest-config@^18.1.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"
@@ -2865,6 +3802,7 @@ jest-diff@^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"
@@ -2873,6 +3811,7 @@ jest-environment-jsdom@^18.1.0:
 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"
@@ -2880,10 +3819,12 @@ jest-environment-node@^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"
@@ -2894,6 +3835,7 @@ jest-haste-map@^18.1.0:
 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"
@@ -2904,6 +3846,7 @@ jest-jasmine2@^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"
@@ -2911,6 +3854,7 @@ jest-matcher-utils@^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"
@@ -2920,10 +3864,12 @@ jest-matchers@^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"
@@ -2931,6 +3877,7 @@ jest-resolve-dependencies@^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"
@@ -2940,6 +3887,7 @@ jest-resolve@^18.1.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"
@@ -2960,6 +3908,7 @@ jest-runtime@^18.1.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"
@@ -2971,6 +3920,7 @@ jest-snapshot@^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"
@@ -2982,31 +3932,37 @@ jest-util@^18.1.0:
 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"
 
-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@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
+  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-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.7.0, js-yaml@~3.7.0:
+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"
@@ -3014,10 +3970,12 @@ js-yaml@^3.4.3, js-yaml@^3.5.1, js-yaml@^3.7.0, js-yaml@~3.7.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"
@@ -3042,91 +4000,129 @@ jsdom@^9.9.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:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+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.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.0.1"
-  resolved "https://registry.yarnpkg.com/jsonpointer/-/jsonpointer-4.0.1.tgz#4fd92cb34e0e9db3c89c8622ecf51f9b978c6cb9"
+  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.0"
-  resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.0.tgz#a3b87e40298d8c380552d8cc7628a0bb95a22918"
+  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.0.2"
+    extsprintf "1.3.0"
     json-schema "0.2.3"
-    verror "1.3.6"
+    verror "1.10.0"
 
 jsx-ast-utils@^1.0.0, jsx-ast-utils@^1.3.1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.0.tgz#5afe38868f56bc8cc7aeaef0100ba8c75bd12591"
+  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:
-    object-assign "^4.1.0"
+    is-buffer "^1.1.5"
 
-kind-of@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.1.0.tgz#475d698a5e49ff5e53d14e3e732429dc8bf4cf47"
+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.0.2"
+    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"
@@ -3134,6 +4130,7 @@ levn@^0.3.0, levn@~0.3.0:
 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"
@@ -3144,6 +4141,7 @@ load-json-file@^1.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"
@@ -3153,14 +4151,17 @@ loader-utils@0.2.x, loader-utils@^0.2.11, loader-utils@^0.2.16, loader-utils@^0.
 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"
@@ -3168,6 +4169,7 @@ lodash._baseassign@^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"
@@ -3179,30 +4181,32 @@ lodash._baseclone@^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"
-
-lodash.assign@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.assign/-/lodash.assign-4.2.0.tgz#0d99f3ccd7a6d261d19bdaeb9245005d285808e7"
+  integrity sha1-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"
@@ -3210,50 +4214,58 @@ lodash.clonedeep@^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.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.uniq@^4.3.0:
+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.14.0, lodash@^4.15.0, lodash@^4.16.4, lodash@^4.17.2, lodash@^4.2.0, lodash@^4.3.0, lodash@^4.5.1:
-  version "4.17.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+"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:
-  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.4.0:
+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==
@@ -3263,53 +4275,76 @@ loose-envify@^1.1.0, loose-envify@^1.4.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.0.2"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.0.2.tgz#1d17679c069cda5d040991a09dbc2c0db377e55e"
+  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.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"
+    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"
 
-marked-terminal@^1.6.2:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/marked-terminal/-/marked-terminal-1.7.0.tgz#c8c460881c772c7604b64367007ee5f77f125904"
+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:
-    cardinal "^1.0.0"
-    chalk "^1.1.3"
+    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"
-    lodash.assign "^4.2.0"
     node-emoji "^1.4.1"
+    supports-hyperlinks "^1.0.1"
 
-marked@^0.3.6:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7"
+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.2.16"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.16.tgz#b357fa1ca9faefb8e48d10c14ef2bcb2d9f0a7c9"
+  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"
@@ -3317,6 +4352,7 @@ memory-fs@~0.3.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"
@@ -3324,18 +4360,22 @@ memory-fs@~0.4.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.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+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"
@@ -3351,108 +4391,194 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-"mime-db@>= 1.27.0 < 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.11, mime-types@~2.1.15, 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"
+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.3.4, mime@^1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.4.tgz#115f9e3b6b3daf2959983cb38f149a2d40eb5d53"
+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, minimatch@^3.0.0, minimatch@^3.0.2, minimatch@^3.0.3:
+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"
 
-minimist@0.0.8, minimist@~0.0.1:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
+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:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
+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.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
+  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 "0.0.8"
+    minimist "^1.2.5"
 
 moment@^2.11.2:
-  version "2.18.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
+  version "2.29.1"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
+  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
 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@0.7.2:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.2.tgz#ae25cf2512b3885a1d95d7f037868d8431124765"
+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"
-
-nan@^2.3.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.6.0.tgz#b9b0a907d796d0d336fd73afce24f5e1aa929934"
+  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=
 
-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.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.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.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.1"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
+  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.5.1"
-  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.5.1.tgz#fd918e412769bf8c448051238233840b2aff16a1"
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
+  integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==
   dependencies:
-    string.prototype.codepointat "^0.2.0"
+    lodash.toarray "^4.4.0"
 
 node-fetch@^1.6.3:
-  version "1.6.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
+  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.0"
-  resolved "https://registry.yarnpkg.com/node-hook/-/node-hook-0.4.0.tgz#782a3b3b4873388f93d087cd2971162f24eb6f2d"
+  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"
@@ -3481,6 +4607,7 @@ node-libs-browser@^0.7.0:
 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"
@@ -3491,48 +4618,56 @@ node-notifier@^4.6.1:
     which "^1.0.5"
 
 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"
+  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"
+    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"
+  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.3.6"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.3.6.tgz#498fa420c96401f787402ba21e600def9f981fff"
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
   dependencies:
     hosted-git-info "^2.1.4"
-    is-builtin-module "^1.0.0"
+    resolve "^1.10.0"
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.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"
@@ -3540,124 +4675,173 @@ normalize-url@^1.4.0:
     sort-keys "^1.0.0"
 
 npmlog@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.0.2.tgz#d03950e0e78ce1527ba26d2a7592e9348ac3e75f"
+  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.1"
+    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"
+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.3.9"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.3.9.tgz#8bab486ff7fa3dfd086656bbe8b17116d3692d2a"
+  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.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+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.1, optimist@~0.6.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"
+  integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
   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"
+  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.4"
+    fast-levenshtein "~2.0.6"
     levn "~0.3.0"
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
-    wordwrap "~1.0.0"
+    word-wrap "~1.2.3"
 
-original@>=0.0.5:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+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.0.x"
+    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.4"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.4.tgz#42fe6d5953df06c8064be6f176c3d05aaaa34644"
+  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"
@@ -3665,16 +4849,19 @@ osenv@^0.1.4:
 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"
@@ -3684,46 +4871,61 @@ parse-glob@^3.0.4:
 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.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.1.tgz#c8ab8c9223ba34888aa64a297b28853bec18da56"
+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.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:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+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"
@@ -3732,44 +4934,63 @@ path-type@^1.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"
@@ -3778,6 +4999,7 @@ postcss-calc@^5.2.0:
 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"
@@ -3786,6 +5008,7 @@ postcss-colormin@^2.1.8:
 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"
@@ -3793,44 +5016,50 @@ postcss-convert-values@^2.3.4:
 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.2"
-  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  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"
-    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"
+  integrity sha1-U56a/J3chiASHr+djDZz4M5Q0oo=
   dependencies:
     cosmiconfig "^2.1.0"
     object-assign "^4.1.0"
@@ -3840,6 +5069,7 @@ postcss-load-config@^1.1.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"
@@ -3847,6 +5077,7 @@ postcss-load-options@^1.2.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"
@@ -3854,6 +5085,7 @@ postcss-load-plugins@^2.3.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"
@@ -3863,6 +5095,7 @@ postcss-loader@1.2.2:
 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"
@@ -3871,12 +5104,14 @@ postcss-merge-idents@^2.1.5:
 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"
@@ -3887,10 +5122,12 @@ postcss-merge-rules@^2.0.3:
 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"
@@ -3899,6 +5136,7 @@ postcss-minify-font-values@^1.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"
@@ -3906,6 +5144,7 @@ postcss-minify-gradients@^1.0.1:
 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"
@@ -3915,6 +5154,7 @@ postcss-minify-params@^1.0.4:
 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"
@@ -3922,41 +5162,47 @@ postcss-minify-selectors@^2.0.4:
     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"
+  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 "^5.0.4"
+    postcss "^6.0.1"
 
 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"
+  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.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 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"
+  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.6.0"
-    postcss "^5.0.4"
+    css-selector-tokenizer "^0.7.0"
+    postcss "^6.0.1"
 
 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"
+  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.0.2"
-    postcss "^5.0.14"
+    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"
@@ -3966,6 +5212,7 @@ postcss-normalize-url@^3.0.7:
 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"
@@ -3973,6 +5220,7 @@ postcss-ordered-values@^2.1.0:
 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"
@@ -3980,12 +5228,14 @@ postcss-reduce-idents@^2.2.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"
@@ -3994,6 +5244,7 @@ postcss-reduce-transforms@^1.0.3:
 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"
@@ -4002,6 +5253,7 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
 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"
@@ -4011,122 +5263,164 @@ postcss-svgo@^2.1.1:
 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.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+  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.9:
-  version "5.2.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.16.tgz#732b3100000f9ff8379a48a53839ed097376ad57"
+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.0"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.0.tgz#87f4e9d706a24c87d6cbee9fabec001fcf8c75d8"
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
   dependencies:
-    renderkid "^2.0.1"
-    utila "~0.4"
+    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:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/private/-/private-0.1.7.tgz#68ce5e8a1ef0a23bb570cc28537b5332aba63ef1"
+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@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+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.9"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.9.tgz#7bd5ad21aa6253e7da8682264f1e11d11c0318c1"
+  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"
 
-prop-types@^15.6.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
-  integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
-  dependencies:
-    loose-envify "^1.4.0"
-    object-assign "^4.1.1"
-    react-is "^16.8.1"
-
-proxy-addr@~1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
+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.0"
-    ipaddr.js "1.3.0"
+    forwarded "~0.1.2"
+    ipaddr.js "1.9.1"
 
-prr@~0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-0.0.0.tgz#1a84b85908325501411853d0081ee3fa86e2926a"
+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.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.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.0"
-  resolved "https://registry.yarnpkg.com/q/-/q-1.5.0.tgz#dd01bac9d06d30e6f219aecb8253ee9ebdc308f1"
+  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, qs@~6.4.0:
+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.2"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.2.tgz#ec0fd765f58a50031a3968c2431386f8947a5cdd"
+  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"
@@ -4134,31 +5428,48 @@ query-string@^4.1.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@0.0.x:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c"
+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@^1.1.3:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb"
+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 "^2.0.2"
-    kind-of "^3.0.2"
+    is-number "^4.0.0"
+    kind-of "^6.0.0"
+    math-random "^1.0.1"
 
-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"
+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.1"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.1.tgz#2e03e8e42ee450b8cb3dce65be1bf8974e1dfd95"
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
+  integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
   dependencies:
-    deep-extend "~0.4.0"
+    deep-extend "^0.6.0"
     ini "~1.3.0"
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
@@ -4166,6 +5477,7 @@ rc@^1.1.7:
 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"
@@ -4182,14 +5494,10 @@ react-dev-utils@^0.5.2:
   version "0.0.0"
   uid ""
 
-react-is@^16.8.1:
-  version "16.12.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
-  integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
-
 react-scripts@0.9.5:
   version "0.9.5"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-0.9.5.tgz#e9f05c8427e27131662a9b9d7a9786d1ff16bb3f"
+  integrity sha1-6fBchCficTFmKpudepeG0f8Wuz8=
   dependencies:
     autoprefixer "6.7.2"
     babel-core "6.22.1"
@@ -4239,6 +5547,7 @@ react-scripts@0.9.5:
 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"
@@ -4246,44 +5555,47 @@ read-pkg-up@^1.0.1:
 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@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.4, readable-stream@^2.2.2, readable-stream@^2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.2.6.tgz#8b43aed76e71483938d12a8d46c6cf1a00b1f816"
+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:
-    buffer-shims "^1.0.0"
     core-util-is "~1.0.0"
-    inherits "~2.0.1"
+    inherits "~2.0.3"
     isarray "~1.0.0"
-    process-nextick-args "~1.0.6"
-    string_decoder "~0.10.x"
+    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.1.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.1.0.tgz#4ed0ad060df3073300c48440373f72d1cc642d78"
+  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.2"
-    minimatch "^3.0.2"
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
     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"
+  integrity sha1-QQWWCP/BVHV7cV2ZidGZ/783LjU=
   dependencies:
     code-point-at "^1.0.0"
     is-fullwidth-code-point "^1.0.0"
@@ -4292,69 +5604,92 @@ readline2@^1.0.1:
 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@~1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/redeyed/-/redeyed-1.0.1.tgz#e96c193b40c0816b00aec842698e61185e55498a"
+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 "~3.0.0"
+    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.2"
-  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+  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 "^0.4.2"
+    balanced-match "^1.0.0"
 
 regenerate@^1.2.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.2.tgz#d1941c67bad437e1be76433add5b385f95b19260"
+  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.3"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e"
+  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.3"
-  resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145"
+  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"
-    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"
+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:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
+    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"
@@ -4363,48 +5698,57 @@ regexpu-core@^2.0.0:
 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.0.1"
-  resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.0.1.tgz#615ebb96af559552d4bf4057c8436d486ab63cc4"
+  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.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"
+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 "^1.1.0"
-    dom-converter "~0.1"
-    htmlparser2 "~3.3.0"
+    css-select "^2.0.2"
+    dom-converter "^0.2"
+    htmlparser2 "^3.10.1"
+    lodash "^4.17.20"
     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"
+  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.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.79.0, request@^2.81.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"
@@ -4429,87 +5773,165 @@ request@^2.79.0, request@^2.81.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.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"
+  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.2.0:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.3.2.tgz#1f0442c9e0cbb8136e87b9305f932f46c7f28235"
+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:
-    path-parse "^1.0.5"
+    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.4.4, rimraf@^2.5.1, rimraf@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.1.tgz#c2338ec643df7a1b7fe5c54fa86f57428a55f33d"
+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.0.5"
+    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.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.0.1.tgz#d263ca54696cd8a306b5ca6551e92de57918fbe7"
+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"
@@ -4519,117 +5941,170 @@ sane@~1.4.1:
     watch "~0.10.0"
 
 sax@^1.2.1, sax@~1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.2.tgz#fd8631a23bc7826bef5d871bdb87378c95647828"
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
+  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.18.0.tgz#5901ad6659bc1d8f3fdaf36eb7a67b0d6746b1c4"
-  integrity sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==
+scheduler@^0.20.1:
+  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"
 
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
-send@0.15.1:
-  version "0.15.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.15.1.tgz#8a02354c26e6f5cca700065f5f0cdeba90ec7b5f"
+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.1"
-    depd "~1.1.0"
+    debug "2.6.9"
+    depd "~1.1.2"
     destroy "~1.0.4"
-    encodeurl "~1.0.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    etag "~1.8.0"
-    fresh "0.5.0"
-    http-errors "~1.6.1"
-    mime "1.3.4"
-    ms "0.7.2"
+    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.0"
-    statuses "~1.3.1"
+    range-parser "~1.2.1"
+    statuses "~1.5.0"
 
 serve-index@^1.7.2:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.8.0.tgz#7c5d96c13fb131101f93c1c5774f8516a1e78d3b"
+  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.3"
-    batch "0.5.3"
-    debug "~2.2.0"
+    accepts "~1.3.4"
+    batch "0.6.1"
+    debug "2.6.9"
     escape-html "~1.0.3"
-    http-errors "~1.5.0"
-    mime-types "~2.1.11"
-    parseurl "~1.3.1"
+    http-errors "~1.6.2"
+    mime-types "~2.1.17"
+    parseurl "~1.3.2"
 
-serve-static@1.12.1:
-  version "1.12.1"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.12.1.tgz#7443a965e3ced647aceb5639fa06bf4d1bbe0039"
+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.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    parseurl "~1.3.1"
-    send "0.15.1"
+    parseurl "~1.3.3"
+    send "0.17.1"
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-immediate-shim@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+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.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.2.tgz#81a552141ec104b88e89ce383103ad5c66564d08"
+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.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
+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.7"
-  resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.7.7.tgz#b2f5c77ef97148f4b4f6e22682e10bba8667cff1"
+  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.0"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.0.tgz#66afd47b6a12932d9071cbfd98a52e785cd0ba14"
+  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.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  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"
@@ -4639,99 +6114,153 @@ sockjs-client@1.0.1:
     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"
+  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 "^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"
+    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.18"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.18.tgz#d9b289316ca7df77595ef299e075f0f937eb4207"
+  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.10.0"
-    uuid "^2.0.2"
+    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.2:
-  version "0.4.14"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.14.tgz#9d4463772598b86271b4f523f6c1f4e02a7d6aef"
+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@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.6"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
+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.4, source-map@~0.4.1:
+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.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.2.0.tgz#dab73fbcfc2ba819b4de03bd6f6eaa48164b3f9d"
+  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@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+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-license-ids "^1.0.2"
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
 
-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-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-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"
+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.11.0"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.11.0.tgz#2d8d5ebb4a6fab28ffba37fa62a90f4a3ea59d77"
+  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"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-  optionalDependencies:
     bcrypt-pbkdf "^1.0.0"
+    dashdash "^1.12.0"
     ecc-jsbn "~0.1.1"
-    jodid25519 "^1.0.0"
+    getpass "^0.1.1"
     jsbn "~0.1.0"
+    safer-buffer "^2.0.2"
     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"
+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.1"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  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"
@@ -4739,97 +6268,146 @@ stream-browserify@^2.0.1:
 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.7.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.0.tgz#cec1f4e3b494bc4a81b451808970f8b20b4ed5f6"
+  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.2.6"
+    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@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.0.0.tgz#635c5436cc72a6e0c387ceca278d4e2eec52687e"
+"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 "^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"
+    strip-ansi "^4.0.0"
 
-string_decoder@^0.10.25, string_decoder@~0.10.x:
+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.5"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+  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"
@@ -4840,12 +6418,14 @@ svgo@^0.7.0:
     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"
+  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"
@@ -4857,10 +6437,12 @@ table@^3.7.8:
 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.0"
-  resolved "https://registry.yarnpkg.com/tar-pack/-/tar-pack-3.4.0.tgz#23be2d7f671a8339376cbdb0b8fe3fdebf317984"
+  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"
@@ -4872,16 +6454,18 @@ tar-pack@^3.4.0:
     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"
+  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.2"
+    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"
@@ -4892,102 +6476,174 @@ test-exclude@^3.3.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.0.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-3.0.0.tgz#e7c64c867cbb3845f10877642f7b60055b8ec0d6"
+  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.2"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.2.tgz#ab4883cf597dcd50af211349a00fbca56ac86b86"
+  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.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320"
+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.3"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.3.tgz#f02cd8a74bd8be2fc0e98611c3bacb95a171869c"
+  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.3.0:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"
+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.1.0"
-  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.1.0.tgz#c963dcf03722892ec59cba569e940b71954d1729"
+  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"
-
-tryit@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/tryit/-/tryit-1.0.3.tgz#393be730a9446fd1ead6da59a014308f36c289cb"
+  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.14:
-  version "1.6.15"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
+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.15"
+    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@2.8.x, uglify-js@^2.6:
-  version "2.8.21"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.21.tgz#1733f669ae6f82fc90c7b25ec0f5c783ee375314"
+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:
-    source-map "~0.5.1"
-    yargs "~3.10.0"
-  optionalDependencies:
-    uglify-to-browserify "~1.0.0"
+    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"
@@ -4997,137 +6653,183 @@ uglify-js@~2.7.3:
 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"
-
-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"
+  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, 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.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.8"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.1.8.tgz#7a65b3a8d57a1e86af6b4e2276e34774167c0156"
+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 "0.0.x"
-    requires-port "1.0.x"
+    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, 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, util@^0.10.3:
+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"
 
-utila@~0.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+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.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"
+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:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
+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.1"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  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 "~1.0.0"
-    spdx-expression-parse "~1.0.0"
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
 
-vary@~1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.1.tgz#67535ebb694c1d52257457984665323f587e8d37"
+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.1"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
+  integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
 
-verror@1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.3.6.tgz#cff5df12946d297d2baaefaa2689e25be01c005c"
+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:
-    extsprintf "1.0.2"
+    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"
@@ -5136,30 +6838,36 @@ watchpack@^0.2.1:
 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.1"
-  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
+  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.10.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.10.1.tgz#c6b4cf428139cf1aefbe06a0c00fdb4f8da2f893"
+  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.3.4"
+    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"
@@ -5178,6 +6886,7 @@ webpack-dev-server@1.16.2:
 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"
@@ -5185,6 +6894,7 @@ webpack-manifest-plugin@1.1.0:
 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"
@@ -5192,6 +6902,7 @@ webpack-sources@^0.1.0:
 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"
@@ -5209,29 +6920,36 @@ webpack@1.14.0:
     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"
+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.1"
-  resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.1.tgz#76899499c184b6ef754377c2dbb0cd6cb55d29e7"
+  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.1"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz#3c6c451a198ee7aec55b1ec61d0920c67801a5f4"
+  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.13"
+    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.7.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.7.0.tgz#202035ac1955b087cdd20fa8b58ded3ab1cd2af5"
+  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"
@@ -5239,49 +6957,63 @@ whatwg-url@^4.3.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.2.14"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.2.14.tgz#9a87c4378f03e827cecaf1acdf56c736c01c14e5"
+  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.0"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.0.tgz#40edde802a71fea1f070da3e62dcda2e7add96ad"
+  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.1"
+    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"
-
-wordwrap@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
+  integrity sha1-o9XabNXAvAAI03I0u68b7WMFkQc=
 
 worker-farm@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.3.1.tgz#4333112bb49b17aa050b87895ca6b2cacf40e5ff"
+  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.1 <0.2.0-0"
-    xtend ">=4.0.0 <4.1.0-0"
+    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"
@@ -5289,42 +7021,46 @@ wrap-ansi@^2.0.0:
 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-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"
+  integrity sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=
 
-"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"
+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.1"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
+  integrity sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==
 
-yallist@^2.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=
 
 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"
@@ -5343,6 +7079,7 @@ yargs@^6.3.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"
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 5d5d9393c4bf..22702453fd13 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -892,7 +892,7 @@ export function commitHydratedSuspenseInstance(
 export function shouldDeleteUnhydratedTailInstances(
   parentType: string,
 ): boolean {
-  return parentType !== 'head' || parentType !== 'body';
+  return parentType !== 'head' && parentType !== 'body';
 }
 
 export function didNotMatchHydratedContainerTextInstance(

From 709f9484122f5913fcdf2520eab230dbb0ae6bd2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 22 Apr 2021 19:54:29 -0400
Subject: [PATCH 0472/1603] [Fizz] Add FB specific streaming API and build
 (#21337)

Add FB specific streaming API and build
---
 packages/react-server-dom-relay/package.json  |   3 +-
 .../src/ReactDOMServerFB.js                   |  87 +++++++++
 .../src/ReactServerStreamConfigFB.js          |  54 ++++++
 .../ReactDOMServerFB-test.internal.js         | 182 ++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  |   4 +-
 .../ReactServerStreamConfig.dom-relay.js      |   2 +-
 scripts/rollup/bundles.js                     |  18 +-
 scripts/shared/inlinedHostConfigs.js          |   6 +-
 8 files changed, 342 insertions(+), 14 deletions(-)
 create mode 100644 packages/react-server-dom-relay/src/ReactDOMServerFB.js
 create mode 100644 packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
 create mode 100644 packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js

diff --git a/packages/react-server-dom-relay/package.json b/packages/react-server-dom-relay/package.json
index 5353bf9a1e5e..eeceab0da3e0 100644
--- a/packages/react-server-dom-relay/package.json
+++ b/packages/react-server-dom-relay/package.json
@@ -12,7 +12,6 @@
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "react": "^17.0.0"
   }
 }
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
new file mode 100644
index 000000000000..290a1f227e61
--- /dev/null
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import type {Request} from 'react-server/src/ReactFizzServer';
+
+import type {Destination} from 'react-server/src/ReactServerStreamConfig';
+
+import {
+  createRequest,
+  startWork,
+  performWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from 'react-server/src/ReactServerFormatConfig';
+
+type Options = {
+  identifierPrefix?: string,
+  progressiveChunkSize?: number,
+  onError: (error: mixed) => void,
+};
+
+opaque type Stream = {
+  destination: Destination,
+  request: Request,
+};
+
+function renderToStream(children: ReactNodeList, options: Options): Stream {
+  const destination = {
+    buffer: '',
+    done: false,
+    fatal: false,
+    error: null,
+  };
+  const request = createRequest(
+    children,
+    destination,
+    createResponseState(options ? options.identifierPrefix : 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): void {
+  abort(stream.request);
+}
+
+function renderNextChunk(stream: Stream): string {
+  const {request, destination} = stream;
+  performWork(request);
+  startFlowing(request);
+  if (destination.fatal) {
+    throw destination.error;
+  }
+  const chunk = destination.buffer;
+  destination.buffer = '';
+  return chunk;
+}
+
+function hasFinished(stream: Stream): boolean {
+  return stream.destination.done;
+}
+
+export {renderToStream, renderNextChunk, hasFinished, abortStream};
diff --git a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
new file mode 100644
index 000000000000..e0477fd6197e
--- /dev/null
+++ b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type Destination = {
+  buffer: string,
+  done: boolean,
+  fatal: boolean,
+  error: mixed,
+};
+
+export type PrecomputedChunk = string;
+export type Chunk = string;
+
+export function scheduleWork(callback: () => void) {
+  // We don't schedule work in this model, and instead expect performWork to always be called repeatedly.
+}
+
+export function flushBuffered(destination: Destination) {}
+
+export function beginWriting(destination: Destination) {}
+
+export function writeChunk(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk,
+): 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 closeWithError(destination: Destination, error: mixed): void {
+  destination.done = true;
+  destination.fatal = true;
+  destination.error = error;
+}
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
new file mode 100644
index 000000000000..f04a030276e7
--- /dev/null
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -0,0 +1,182 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let 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 data-reactroot=\\"\\">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';
+    }
+    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 data-reactroot=\\"\\"><!--$-->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 stream = ReactDOMServer.renderToStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          console.error(x);
+        },
+      },
+    );
+
+    const partial = ReactDOMServer.renderNextChunk(stream);
+    expect(partial).toContain('Loading');
+
+    ReactDOMServer.abortStream(stream);
+
+    const remaining = readResult(stream);
+    expect(remaining).toEqual('');
+  });
+});
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index bc3b06449f79..9409b57bbbf1 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -161,7 +161,7 @@ const BUFFERING = 0;
 const FLOWING = 1;
 const CLOSED = 2;
 
-type Request = {
+export opaque type Request = {
   +destination: Destination,
   +responseState: ResponseState,
   +progressiveChunkSize: number,
@@ -1361,7 +1361,7 @@ function retryTask(request: Request, task: Task): void {
   }
 }
 
-function performWork(request: Request): void {
+export function performWork(request: Request): void {
   if (request.status === CLOSED) {
     return;
   }
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.dom-relay.js b/packages/react-server/src/forks/ReactServerStreamConfig.dom-relay.js
index 7b6480120ee8..1fb93e24b877 100644
--- a/packages/react-server/src/forks/ReactServerStreamConfig.dom-relay.js
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-relay.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from '../ReactServerStreamConfigNode';
+export * from 'react-server-dom-relay/src/ReactServerStreamConfigFB';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index e37e7bbfe644..2890c5518104 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -238,14 +238,9 @@ const bundles = [
 
   /******* React DOM Server *******/
   {
-    bundleTypes: [
-      UMD_DEV,
-      UMD_PROD,
-      NODE_DEV,
-      NODE_PROD,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-    ],
+    bundleTypes: __EXPERIMENTAL__
+      ? [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD]
+      : [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
     moduleType: NON_FIBER_RENDERER,
     entry: 'react-dom/server.browser',
     global: 'ReactDOMServer',
@@ -287,6 +282,13 @@ const bundles = [
     global: 'ReactDOMFizzServer',
     externals: ['react', 'react-dom/server'],
   },
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
+    moduleType: RENDERER,
+    entry: 'react-server-dom-relay/src/ReactDOMServerFB',
+    global: 'ReactDOMServer',
+    externals: ['react', 'react-dom/server'],
+  },
 
   /******* React Server DOM Webpack Writer *******/
   {
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 7f96ae163ad6..eef4d1fa9a0e 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -83,7 +83,11 @@ module.exports = [
   },
   {
     shortName: 'dom-relay',
-    entryPoints: ['react-server-dom-relay', 'react-server-dom-relay/server'],
+    entryPoints: [
+      'react-server-dom-relay',
+      'react-server-dom-relay/server',
+      'react-server-dom-relay/src/ReactDOMServerFB',
+    ],
     paths: ['react-dom', 'react-server-dom-relay'],
     isFlowTyped: true,
     isServerSupported: true,

From ad091759a949747f55e1bad498d19be884d4a654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 23 Apr 2021 13:28:44 -0400
Subject: [PATCH 0473/1603] Revert "Emit reactroot attribute on the first
 element we discover (#21154)" (#21340)

This reverts commit 266c26ad45c977ecf67e9359809c37da1489ca63.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  4 ---
 .../ReactDOMFizzServerBrowser-test.js         |  6 ++---
 .../__tests__/ReactDOMFizzServerNode-test.js  |  8 +++---
 .../src/server/ReactDOMServerFormatConfig.js  | 27 +------------------
 .../ReactDOMServerFB-test.internal.js         |  6 ++---
 5 files changed, 8 insertions(+), 43 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 1c7ab533edf8..13774ec2de07 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -117,10 +117,6 @@ describe('ReactDOMFizzServer', () => {
               // We assume this is a React added ID that's a non-visual implementation detail.
               continue;
             }
-            if (attributes[i].name === 'data-reactroot') {
-              // We ignore React injected attributes.
-              continue;
-            }
             props[attributes[i].name] = attributes[i].value;
           }
           props.children = getVisibleChildren(node);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 71c301134dd0..c813b6f55858 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -55,9 +55,7 @@ describe('ReactDOMFizzServer', () => {
       <div>hello world</div>,
     );
     const result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<div data-reactroot=\\"\\">hello world</div>"`,
-    );
+    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
   // @gate experimental
@@ -96,7 +94,7 @@ describe('ReactDOMFizzServer', () => {
 
     const result = await readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<div data-reactroot=\\"\\"><!--$-->Done<!-- --><!--/$--></div>"`,
+      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
     );
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 464ee488d25c..7afc45aa4a5b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -65,9 +65,7 @@ describe('ReactDOMFizzServer', () => {
     );
     startWriting();
     jest.runAllTimers();
-    expect(output.result).toMatchInlineSnapshot(
-      `"<div data-reactroot=\\"\\">hello world</div>"`,
-    );
+    expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
   // @gate experimental
@@ -84,7 +82,7 @@ describe('ReactDOMFizzServer', () => {
     // Then React starts writing.
     startWriting();
     expect(output.result).toMatchInlineSnapshot(
-      `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\">hello world</div>"`,
+      `"<!doctype html><html><head><title>test</title><head><body><div>hello world</div>"`,
     );
   });
 
@@ -132,7 +130,7 @@ describe('ReactDOMFizzServer', () => {
     // Then React starts writing.
     startWriting();
     expect(output.result).toMatchInlineSnapshot(
-      `"<!doctype html><html><head><title>test</title><head><body><div data-reactroot=\\"\\"><!--$-->Done<!-- --><!--/$--></div>"`,
+      `"<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!-- --><!--/$--></div>"`,
     );
   });
 
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index e723299f9242..bc9e21c24920 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -32,7 +32,6 @@ import {
   OVERLOADED_BOOLEAN,
   NUMERIC,
   POSITIVE_NUMERIC,
-  ROOT_ATTRIBUTE_NAME,
 } from '../shared/DOMProperty';
 import {isUnitlessNumber} from '../shared/CSSProperty';
 
@@ -64,7 +63,6 @@ export type ResponseState = {
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
-  hasEmittedRoot: boolean,
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
@@ -81,7 +79,6 @@ export function createResponseState(
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
-    hasEmittedRoot: false,
   };
 }
 
@@ -102,7 +99,7 @@ type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
 // Lets us keep track of contextual state and pick it back up after suspending.
 export type FormatContext = {
-  insertionMode: InsertionMode, // svg/html/mathml/table
+  insertionMode: InsertionMode, // root/svg/html/mathml/table
   selectedValue: null | string | Array<string>, // the selected value(s) inside a <select>, or null outside <select>
 };
 
@@ -511,19 +508,6 @@ const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
 const idAttr = stringToPrecomputedChunk(' id="');
 const attrEnd = stringToPrecomputedChunk('"');
 
-const reactRootAttribute = stringToPrecomputedChunk(
-  ' ' + ROOT_ATTRIBUTE_NAME + '=""',
-);
-function pushReactRoot(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-): void {
-  if (!responseState.hasEmittedRoot) {
-    responseState.hasEmittedRoot = true;
-    target.push(reactRootAttribute);
-  }
-}
-
 function pushID(
   target: Array<Chunk | PrecomputedChunk>,
   responseState: ResponseState,
@@ -657,7 +641,6 @@ function pushStartSelect(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -772,7 +755,6 @@ function pushStartOption(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return children;
@@ -860,7 +842,6 @@ function pushInput(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -925,7 +906,6 @@ function pushStartTextArea(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
 
@@ -1002,7 +982,6 @@ function pushSelfClosing(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -1039,7 +1018,6 @@ function pushStartMenuItem(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   return null;
@@ -1078,7 +1056,6 @@ function pushStartGenericElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1143,7 +1120,6 @@ function pushStartCustomElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1185,7 +1161,6 @@ function pushStartPreformattedElement(
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
-  pushReactRoot(target, responseState);
 
   target.push(endOfStartTag);
 
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index f04a030276e7..4cf8bb8f7bf6 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -45,9 +45,7 @@ describe('ReactDOMServerFB', () => {
       },
     });
     const result = readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<div data-reactroot=\\"\\">hello world</div>"`,
-    );
+    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
   it('emits all HTML as one unit if we wait until the end to start', async () => {
@@ -81,7 +79,7 @@ describe('ReactDOMServerFB', () => {
 
     const result = readResult(stream);
     expect(result).toMatchInlineSnapshot(
-      `"<div data-reactroot=\\"\\"><!--$-->Done<!-- --><!--/$--></div>"`,
+      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
     );
   });
 

From 9cd52b27fe7be3c320d1e94a016fc416e66569b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 23 Apr 2021 15:24:10 -0400
Subject: [PATCH 0474/1603] Restore context after an error happens (#21341)

Typically we don't need to restore the context here because we assume that
we'll terminate the rest of the subtree so we don't need the correct
context since we're not rendering any siblings.

However, after a nested suspense boundary we need to restore the context.
The boundary could do this but since we're already doing this in the
suspense branch of renderNode, we might as well do it in the error case
which isn't very perf sensitive anyway.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 67 +++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  |  7 ++
 2 files changed, 74 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 13774ec2de07..a42056ab2492 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -796,6 +796,73 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  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(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <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>,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      startWriting();
+    });
+    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>,
+    );
+  });
+
   // @gate experimental
   it('client renders a boundary if it errors before finishing the fallback', async () => {
     function App({isClient}) {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 9409b57bbbf1..d51ad44ed64e 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1174,6 +1174,13 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       // Restore all active ReactContexts to what they were before.
       switchContext(previousContext);
     } else {
+      // 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.blockedSegment.formatContext = previousFormatContext;
+      task.legacyContext = previousLegacyContext;
+      task.context = previousContext;
+      // Restore all active ReactContexts to what they were before.
+      switchContext(previousContext);
       // We assume that we don't need the correct context.
       // Let's terminate the rest of the tree and don't render any siblings.
       throw x;

From 0f5ebf366ea4eca2e6c6a652606af3218f12edd6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 23 Apr 2021 17:41:53 -0500
Subject: [PATCH 0475/1603] Delete unreferenced type (#21343)

Had already deleted all the uses but didn't remove the type itself.
---
 .../src/ReactFiberLane.new.js                 | 19 -------------------
 .../src/ReactFiberLane.old.js                 | 19 -------------------
 2 files changed, 38 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 501af9e8b12a..dbbbc486265b 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -11,25 +11,6 @@ import type {FiberRoot} from './ReactInternalTypes';
 
 // 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 LanePriority =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17;
 
 export type Lanes = number;
 export type Lane = number;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 701d4c46cf72..af432cc6fd43 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -11,25 +11,6 @@ import type {FiberRoot} from './ReactInternalTypes';
 
 // 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 LanePriority =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17;
 
 export type Lanes = number;
 export type Lane = number;

From 48740429b4a74e984193e4e2d364d461e4fdc3be Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 24 Apr 2021 18:32:48 -0500
Subject: [PATCH 0476/1603] Expiration: Do nothing except disable time slicing
 (#21345)

We have a feature called "expiration" whose purpose is to prevent
a concurrent update from being starved by higher priority events.
If a lane is CPU-bound for too long, we finish the rest of the work
synchronously without allowing further interruptions.

In the current implementation, we do this in sort of a roundabout way:
once a lane is determined to have expired, we entangle it with SyncLane
and switch to the synchronous work loop.

There are a few flaws with the approach. One is that SyncLane has a
particular semantic meaning besides its non-yieldiness. For example,
`flushSync` will force remaining Sync work to finish; currently, that
also includes expired work, which isn't an intended behavior, but rather
an artifact of the implementation.

An event worse example is that passive effects triggered by a Sync
update are flushed synchronously, before paint, so that its result
is guaranteed to be observed by the next discrete event. But expired
work has no such requirement: we're flushing expired effects before
paint unnecessarily.

Aside from the behaviorial implications, the current implementation has
proven to be fragile: more than once, we've accidentally regressed
performance due to a subtle change in how expiration is handled.

This PR aims to radically simplify how we model starvation protection by
scaling back the implementation as much as possible. In this new model,
if a lane is expired, we disable time slicing. That's it. We don't
entangle it with SyncLane. The only thing we do is skip the call to
`shouldYield` in between each time slice. This is identical to how we
model synchronous-by-default updates in React 18.
---
 .../src/ReactFiberLane.new.js                 |  38 +--
 .../src/ReactFiberLane.old.js                 |  38 +--
 .../src/ReactFiberRoot.new.js                 |   1 +
 .../src/ReactFiberRoot.old.js                 |   1 +
 .../src/ReactFiberWorkLoop.new.js             |  38 +--
 .../src/ReactFiberWorkLoop.old.js             |  38 +--
 .../src/ReactInternalTypes.js                 |   1 +
 .../src/__tests__/ReactExpiration-test.js     | 316 ++++++++----------
 .../ReactSchedulerIntegration-test.js         |   3 +-
 .../ReactSuspenseWithNoopRenderer-test.js     |  33 +-
 10 files changed, 213 insertions(+), 294 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index dbbbc486265b..878fc433f3c5 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -401,7 +401,6 @@ export function markStarvedLanesAsExpired(
   // expiration time. If so, we'll assume the update is being starved and mark
   // it as expired to force it to finish.
   let lanes = pendingLanes;
-  let expiredLanes = 0;
   while (lanes > 0) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
@@ -420,15 +419,11 @@ export function markStarvedLanesAsExpired(
       }
     } else if (expirationTime <= currentTime) {
       // This lane expired
-      expiredLanes |= lane;
+      root.expiredLanes |= lane;
     }
 
     lanes &= ~lane;
   }
-
-  if (expiredLanes !== 0) {
-    markRootExpired(root, expiredLanes);
-  }
 }
 
 // This returns the highest priority pending lanes regardless of whether they
@@ -459,16 +454,22 @@ export function includesOnlyTransitions(lanes: Lanes) {
 }
 
 export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
-  if (!enableSyncDefaultUpdates) {
+  if ((lanes & root.expiredLanes) !== NoLanes) {
+    // At least one of these lanes expired. To prevent additional starvation,
+    // finish rendering without yielding execution.
+    return false;
+  }
+  if (enableSyncDefaultUpdates) {
+    const SyncDefaultLanes =
+      InputContinuousHydrationLane |
+      InputContinuousLane |
+      DefaultHydrationLane |
+      DefaultLane;
+    // TODO: Check for root override, once that lands
+    return (lanes & SyncDefaultLanes) === NoLanes;
+  } else {
     return true;
   }
-  const SyncDefaultLanes =
-    InputContinuousHydrationLane |
-    InputContinuousLane |
-    DefaultHydrationLane |
-    DefaultLane;
-  // TODO: Check for root override, once that lands
-  return (lanes & SyncDefaultLanes) === NoLanes;
 }
 
 export function isTransitionLane(lane: Lane) {
@@ -613,14 +614,6 @@ export function markRootPinged(
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
 }
 
-export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
-  const entanglements = root.entanglements;
-  const SyncLaneIndex = 0;
-  entanglements[SyncLaneIndex] |= expiredLanes;
-  root.entangledLanes |= SyncLane;
-  root.pendingLanes |= SyncLane;
-}
-
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
   root.mutableReadLanes |= updateLane & root.pendingLanes;
 }
@@ -634,6 +627,7 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.suspendedLanes = 0;
   root.pingedLanes = 0;
 
+  root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index af432cc6fd43..d4010468f0d7 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -401,7 +401,6 @@ export function markStarvedLanesAsExpired(
   // expiration time. If so, we'll assume the update is being starved and mark
   // it as expired to force it to finish.
   let lanes = pendingLanes;
-  let expiredLanes = 0;
   while (lanes > 0) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
@@ -420,15 +419,11 @@ export function markStarvedLanesAsExpired(
       }
     } else if (expirationTime <= currentTime) {
       // This lane expired
-      expiredLanes |= lane;
+      root.expiredLanes |= lane;
     }
 
     lanes &= ~lane;
   }
-
-  if (expiredLanes !== 0) {
-    markRootExpired(root, expiredLanes);
-  }
 }
 
 // This returns the highest priority pending lanes regardless of whether they
@@ -459,16 +454,22 @@ export function includesOnlyTransitions(lanes: Lanes) {
 }
 
 export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
-  if (!enableSyncDefaultUpdates) {
+  if ((lanes & root.expiredLanes) !== NoLanes) {
+    // At least one of these lanes expired. To prevent additional starvation,
+    // finish rendering without yielding execution.
+    return false;
+  }
+  if (enableSyncDefaultUpdates) {
+    const SyncDefaultLanes =
+      InputContinuousHydrationLane |
+      InputContinuousLane |
+      DefaultHydrationLane |
+      DefaultLane;
+    // TODO: Check for root override, once that lands
+    return (lanes & SyncDefaultLanes) === NoLanes;
+  } else {
     return true;
   }
-  const SyncDefaultLanes =
-    InputContinuousHydrationLane |
-    InputContinuousLane |
-    DefaultHydrationLane |
-    DefaultLane;
-  // TODO: Check for root override, once that lands
-  return (lanes & SyncDefaultLanes) === NoLanes;
 }
 
 export function isTransitionLane(lane: Lane) {
@@ -613,14 +614,6 @@ export function markRootPinged(
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
 }
 
-export function markRootExpired(root: FiberRoot, expiredLanes: Lanes) {
-  const entanglements = root.entanglements;
-  const SyncLaneIndex = 0;
-  entanglements[SyncLaneIndex] |= expiredLanes;
-  root.entangledLanes |= SyncLane;
-  root.pendingLanes |= SyncLane;
-}
-
 export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
   root.mutableReadLanes |= updateLane & root.pendingLanes;
 }
@@ -634,6 +627,7 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.suspendedLanes = 0;
   root.pingedLanes = 0;
 
+  root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 9201a3598075..728769261cbe 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -50,6 +50,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.pendingLanes = NoLanes;
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
+  this.expiredLanes = NoLanes;
   this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index f2968b314eca..7f338a4dbb21 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -50,6 +50,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.pendingLanes = NoLanes;
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
+  this.expiredLanes = NoLanes;
   this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index c688214a100e..ddf72f428dfd 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -159,7 +159,7 @@ import {
   markRootUpdated,
   markRootSuspended as markRootSuspended_dontCallThisOneDirectly,
   markRootPinged,
-  markRootExpired,
+  markRootEntangled,
   markRootFinished,
   getHighestPriorityLane,
   addFiberToLanesMap,
@@ -787,22 +787,17 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     return null;
   }
 
+  // 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.
   // 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.
-  if (!disableSchedulerTimeoutInWorkLoop && didTimeout) {
-    // Something expired. Flush synchronously until there's no expired
-    // work left.
-    markRootExpired(root, lanes);
-    // This will schedule a synchronous callback.
-    ensureRootIsScheduled(root, now());
-    return null;
-  }
-
-  let exitStatus = shouldTimeSlice(root, lanes)
-    ? renderRootConcurrent(root, lanes)
-    : // Time slicing is disabled for default updates in this root.
-      renderRootSync(root, lanes);
+  let exitStatus =
+    shouldTimeSlice(root, lanes) &&
+    (disableSchedulerTimeoutInWorkLoop || !didTimeout)
+      ? renderRootConcurrent(root, lanes)
+      : renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
@@ -990,16 +985,7 @@ function performSyncWorkOnRoot(root) {
   flushPassiveEffects();
 
   let lanes = getNextLanes(root, NoLanes);
-  if (includesSomeLane(lanes, SyncLane)) {
-    if (
-      root === workInProgressRoot &&
-      includesSomeLane(lanes, workInProgressRootRenderLanes)
-    ) {
-      // There's a partial tree, and at least one of its lanes has expired. Finish
-      // rendering it before rendering the rest of the expired work.
-      lanes = workInProgressRootRenderLanes;
-    }
-  } else {
+  if (!includesSomeLane(lanes, SyncLane)) {
     // There's no remaining sync work left.
     ensureRootIsScheduled(root, now());
     return null;
@@ -1052,11 +1038,9 @@ function performSyncWorkOnRoot(root) {
   return null;
 }
 
-// TODO: Do we still need this API? I think we can delete it. Was only used
-// internally.
 export function flushRoot(root: FiberRoot, lanes: Lanes) {
   if (lanes !== NoLanes) {
-    markRootExpired(root, lanes);
+    markRootEntangled(root, mergeLanes(lanes, SyncLane));
     ensureRootIsScheduled(root, now());
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       resetRenderTimer();
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index fb5ae4c1d7a2..3b0b196e112c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -159,7 +159,7 @@ import {
   markRootUpdated,
   markRootSuspended as markRootSuspended_dontCallThisOneDirectly,
   markRootPinged,
-  markRootExpired,
+  markRootEntangled,
   markRootFinished,
   getHighestPriorityLane,
   addFiberToLanesMap,
@@ -787,22 +787,17 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     return null;
   }
 
+  // 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.
   // 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.
-  if (!disableSchedulerTimeoutInWorkLoop && didTimeout) {
-    // Something expired. Flush synchronously until there's no expired
-    // work left.
-    markRootExpired(root, lanes);
-    // This will schedule a synchronous callback.
-    ensureRootIsScheduled(root, now());
-    return null;
-  }
-
-  let exitStatus = shouldTimeSlice(root, lanes)
-    ? renderRootConcurrent(root, lanes)
-    : // Time slicing is disabled for default updates in this root.
-      renderRootSync(root, lanes);
+  let exitStatus =
+    shouldTimeSlice(root, lanes) &&
+    (disableSchedulerTimeoutInWorkLoop || !didTimeout)
+      ? renderRootConcurrent(root, lanes)
+      : renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
       executionContext |= RetryAfterError;
@@ -990,16 +985,7 @@ function performSyncWorkOnRoot(root) {
   flushPassiveEffects();
 
   let lanes = getNextLanes(root, NoLanes);
-  if (includesSomeLane(lanes, SyncLane)) {
-    if (
-      root === workInProgressRoot &&
-      includesSomeLane(lanes, workInProgressRootRenderLanes)
-    ) {
-      // There's a partial tree, and at least one of its lanes has expired. Finish
-      // rendering it before rendering the rest of the expired work.
-      lanes = workInProgressRootRenderLanes;
-    }
-  } else {
+  if (!includesSomeLane(lanes, SyncLane)) {
     // There's no remaining sync work left.
     ensureRootIsScheduled(root, now());
     return null;
@@ -1052,11 +1038,9 @@ function performSyncWorkOnRoot(root) {
   return null;
 }
 
-// TODO: Do we still need this API? I think we can delete it. Was only used
-// internally.
 export function flushRoot(root: FiberRoot, lanes: Lanes) {
   if (lanes !== NoLanes) {
-    markRootExpired(root, lanes);
+    markRootEntangled(root, mergeLanes(lanes, SyncLane));
     ensureRootIsScheduled(root, now());
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       resetRenderTimer();
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 08f5cbc2d0e9..6d7d38232e34 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -228,6 +228,7 @@ type BaseFiberRootProperties = {|
   pendingLanes: Lanes,
   suspendedLanes: Lanes,
   pingedLanes: Lanes,
+  expiredLanes: Lanes,
   mutableReadLanes: Lanes,
 
   finishedLanes: Lanes,
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 4c89c341c649..885ee46e1477 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -15,6 +15,8 @@ let Scheduler;
 let readText;
 let resolveText;
 let startTransition;
+let useState;
+let useEffect;
 
 describe('ReactExpiration', () => {
   beforeEach(() => {
@@ -24,6 +26,8 @@ describe('ReactExpiration', () => {
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     startTransition = React.unstable_startTransition;
+    useState = React.useState;
+    useEffect = React.useEffect;
 
     const textCache = new Map();
 
@@ -478,9 +482,7 @@ describe('ReactExpiration', () => {
   });
 
   // @gate experimental || !enableSyncDefaultUpdates
-  it('prevents starvation by sync updates', async () => {
-    const {useState} = React;
-
+  it('prevents starvation by sync updates by disabling time slicing if too much time has elapsed', async () => {
     let updateSyncPri;
     let updateNormalPri;
     function App() {
@@ -519,15 +521,17 @@ describe('ReactExpiration', () => {
       }
       expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 0']);
       updateSyncPri();
+      expect(Scheduler).toHaveYielded(['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.
+      Scheduler.unstable_flushNumberOfYields(1);
+      // Yield right after first child.
+      expect(Scheduler).toHaveYielded(['Sync pri: 1']);
+      // Now do the rest.
+      expect(Scheduler).toFlushAndYield(['Normal pri: 1']);
     });
-    expect(Scheduler).toHaveYielded([
-      // Interrupt high pri update to render sync update
-      'Sync pri: 1',
-      'Normal pri: 0',
-      // Now render normal pri
-      'Sync pri: 1',
-      'Normal pri: 1',
-    ]);
     expect(root).toMatchRenderedOutput('Sync pri: 1, Normal pri: 1');
 
     // Do the same thing, but starve the first update
@@ -547,22 +551,18 @@ describe('ReactExpiration', () => {
       // starvation of normal priority updates.)
       Scheduler.unstable_advanceTime(10000);
 
-      // So when we get a high pri update, we shouldn't interrupt
       updateSyncPri();
+      expect(Scheduler).toHaveYielded(['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.
+      Scheduler.unstable_flushNumberOfYields(1);
+      expect(Scheduler).toHaveYielded(['Sync pri: 2', 'Normal pri: 2']);
     });
-    expect(Scheduler).toHaveYielded([
-      // Finish normal pri update
-      'Normal pri: 2',
-      // Then do high pri update
-      'Sync pri: 2',
-      'Normal pri: 2',
-    ]);
     expect(root).toMatchRenderedOutput('Sync pri: 2, Normal pri: 2');
   });
 
   it('idle work never expires', async () => {
-    const {useState} = React;
-
     let updateSyncPri;
     let updateIdlePri;
     function App() {
@@ -629,23 +629,19 @@ describe('ReactExpiration', () => {
   });
 
   // @gate experimental
-  it('a single update can expire without forcing all other updates to expire', async () => {
-    const {useState} = React;
-
-    let updateHighPri;
-    let updateNormalPri;
+  it('when multiple lanes expire, we can finish the in-progress one without including the others', async () => {
+    let setA;
+    let setB;
     function App() {
-      const [highPri, setHighPri] = useState(0);
-      const [normalPri, setNormalPri] = useState(0);
-      updateHighPri = () => ReactNoop.flushSync(() => setHighPri(n => n + 1));
-      updateNormalPri = () => setNormalPri(n => n + 1);
+      const [a, _setA] = useState(0);
+      const [b, _setB] = useState(0);
+      setA = _setA;
+      setB = _setB;
       return (
         <>
-          <Text text={'High pri: ' + highPri} />
-          {', '}
-          <Text text={'Normal pri: ' + normalPri} />
-          {', '}
-          <Text text="Sibling" />
+          <Text text={'A' + a} />
+          <Text text={'B' + b} />
+          <Text text="C" />
         </>
       );
     }
@@ -654,184 +650,168 @@ describe('ReactExpiration', () => {
     await ReactNoop.act(async () => {
       root.render(<App />);
     });
-    expect(Scheduler).toHaveYielded([
-      'High pri: 0',
-      'Normal pri: 0',
-      'Sibling',
-    ]);
-    expect(root).toMatchRenderedOutput('High pri: 0, Normal pri: 0, Sibling');
+    expect(Scheduler).toHaveYielded(['A0', 'B0', 'C']);
+    expect(root).toMatchRenderedOutput('A0B0C');
 
     await ReactNoop.act(async () => {
-      // Partially render an update
       startTransition(() => {
-        updateNormalPri();
+        setA(1);
       });
-      expect(Scheduler).toFlushAndYieldThrough(['High pri: 0']);
-
-      // Some time goes by. Schedule another update.
-      // This will be placed into a separate batch.
-      Scheduler.unstable_advanceTime(4000);
-
+      expect(Scheduler).toFlushAndYieldThrough(['A1']);
       startTransition(() => {
-        updateNormalPri();
-      });
-      // Keep rendering the first update
-      expect(Scheduler).toFlushAndYieldThrough(['Normal pri: 1']);
-      // More time goes by. Enough to expire the first batch, but not the
-      // second one.
-      Scheduler.unstable_advanceTime(1000);
-      // Attempt to interrupt with a high pri update.
-      await ReactNoop.act(async () => {
-        updateHighPri();
+        setB(1);
       });
-
-      expect(Scheduler).toHaveYielded([
-        // The first update expired
-        'Sibling',
-        // Then render the high pri update
-        'High pri: 1',
-        'Normal pri: 1',
-        'Sibling',
-        // Then the second normal pri update
-        'High pri: 1',
-        'Normal pri: 2',
-        'Sibling',
-      ]);
+      // 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.
+      Scheduler.unstable_flushNumberOfYields(1);
+      expect(Scheduler).toHaveYielded(['B0', 'C']);
+      expect(root).toMatchRenderedOutput('A1B0C');
+
+      // The next transition also finishes without yielding.
+      Scheduler.unstable_flushNumberOfYields(1);
+      expect(Scheduler).toHaveYielded(['A1', 'B1', 'C']);
+      expect(root).toMatchRenderedOutput('A1B1C');
     });
   });
 
   // @gate experimental || !enableSyncDefaultUpdates
-  it('detects starvation in multiple batches', async () => {
-    const {useState} = React;
+  it('updates do not expire while they are IO-bound', async () => {
+    const {Suspense} = React;
 
-    let updateHighPri;
-    let updateNormalPri;
-    function App() {
-      const [highPri, setHighPri] = useState(0);
-      const [normalPri, setNormalPri] = useState(0);
-      updateHighPri = () => {
-        ReactNoop.flushSync(() => {
-          setHighPri(n => n + 1);
-        });
-      };
-      updateNormalPri = () => setNormalPri(n => n + 1);
+    function App({step}) {
       return (
-        <>
-          <Text text={'High pri: ' + highPri} />
-          {', '}
-          <Text text={'Normal pri: ' + normalPri} />
-          {', '}
-          <Text text="Sibling" />
-        </>
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text={'A' + step} />
+          <Text text="B" />
+          <Text text="C" />
+        </Suspense>
       );
     }
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      root.render(<App />);
+      await resolveText('A0');
+      root.render(<App step={0} />);
     });
-    expect(Scheduler).toHaveYielded([
-      'High pri: 0',
-      'Normal pri: 0',
-      'Sibling',
-    ]);
-    expect(root).toMatchRenderedOutput('High pri: 0, Normal pri: 0, Sibling');
+    expect(Scheduler).toHaveYielded(['A0', 'B', 'C']);
+    expect(root).toMatchRenderedOutput('A0BC');
 
     await ReactNoop.act(async () => {
-      // Partially render an update
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.unstable_startTransition(() => {
-          updateNormalPri();
+          root.render(<App step={1} />);
         });
       } else {
-        updateNormalPri();
+        root.render(<App step={1} />);
       }
-      expect(Scheduler).toFlushAndYieldThrough(['High pri: 0']);
-      // Some time goes by. In an interleaved event, schedule another update.
-      // This will be placed into a separate batch.
-      Scheduler.unstable_advanceTime(4000);
-      updateNormalPri();
-      // Keep rendering the first update
-      expect(Scheduler).toFlushAndYieldThrough(['Normal pri: 1']);
-      // More time goes by. This expires both of the updates just scheduled.
+      expect(Scheduler).toFlushAndYield([
+        'Suspend! [A1]',
+        'B',
+        'C',
+        'Loading...',
+      ]);
+
+      // Lots of time elapses before the promise resolves
       Scheduler.unstable_advanceTime(10000);
-      expect(Scheduler).toHaveYielded([]);
+      await resolveText('A1');
+      expect(Scheduler).toHaveYielded(['Promise resolved [A1]']);
 
-      // Attempt to interrupt with a high pri update.
-      updateHighPri();
-
-      // Both normal pri updates should have expired.
-      // The sync update and the expired normal pri updates render in a
-      // single batch.
-      expect(Scheduler).toHaveYielded([
-        'Sibling',
-        'High pri: 1',
-        'Normal pri: 2',
-        'Sibling',
-      ]);
+      // But the update doesn't expire, because it was IO bound. So we can
+      // partially rendering without finishing.
+      expect(Scheduler).toFlushAndYieldThrough(['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.
+      Scheduler.unstable_flushNumberOfYields(1);
+      expect(Scheduler).toHaveYielded(['B', 'C']);
     });
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
-  it('updates do not expire while they are IO-bound', async () => {
-    const {Suspense} = React;
-
-    function App({text}) {
+  // @gate experimental
+  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 (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text={text} />
-          {', '}
-          <Text text="Sibling" />
-        </Suspense>
+        <>
+          <Text text={'A' + a} />
+          <Text text={'B' + b} />
+        </>
       );
     }
 
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
-      await resolveText('A');
-      root.render(<App text="A" />);
+      root.render(<App />);
     });
-    expect(Scheduler).toHaveYielded(['A', 'Sibling']);
-    expect(root).toMatchRenderedOutput('A, Sibling');
+    expect(Scheduler).toHaveYielded(['A0', 'B0']);
 
     await ReactNoop.act(async () => {
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
-          root.render(<App text="B" />);
-        });
-      } else {
-        root.render(<App text="B" />);
-      }
-      expect(Scheduler).toFlushAndYield([
-        'Suspend! [B]',
-        'Sibling',
-        'Loading...',
-      ]);
+      startTransition(() => {
+        setA(1);
+      });
+      expect(Scheduler).toFlushAndYieldThrough(['A1']);
 
-      // Lots of time elapses before the promise resolves
+      // Expire the in-progress update
       Scheduler.unstable_advanceTime(10000);
-      await resolveText('B');
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
 
-      // But the update doesn't expire, because it was IO bound. So we can
-      // partially rendering without finishing.
-      expect(Scheduler).toFlushAndYieldThrough(['B']);
-      expect(root).toMatchRenderedOutput('A, Sibling');
+      ReactNoop.flushSync(() => {
+        setB(1);
+      });
+      expect(Scheduler).toHaveYielded(['A0', 'B1']);
 
-      // Lots more time elapses. We're CPU-bound now, so we should treat this
-      // as starvation.
+      // Now flush the original update. Because it expired, it should finish
+      // without yielding.
+      Scheduler.unstable_flushNumberOfYields(1);
+      expect(Scheduler).toHaveYielded(['A1', 'B1']);
+    });
+  });
+
+  // @gate experimental
+  it('passive effects of expired update flush after paint', async () => {
+    function App({step}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect: ' + step);
+      }, [step]);
+      return (
+        <>
+          <Text text={'A' + step} />
+          <Text text={'B' + step} />
+          <Text text={'C' + step} />
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App step={0} />);
+    });
+    expect(Scheduler).toHaveYielded(['A0', 'B0', 'C0', 'Effect: 0']);
+    expect(root).toMatchRenderedOutput('A0B0C0');
+
+    await ReactNoop.act(async () => {
+      startTransition(() => {
+        root.render(<App step={1} />);
+      });
+      // Expire the update
       Scheduler.unstable_advanceTime(10000);
 
-      // Attempt to interrupt with a sync update.
-      ReactNoop.flushSync(() => root.render(<App text="A" />));
-      expect(Scheduler).toHaveYielded([
-        // Because the previous update had already expired, we don't interrupt
-        // it. Finish rendering it first.
-        'Sibling',
-        // Then do the sync update.
-        'A',
-        'Sibling',
-      ]);
+      // The update finishes without yielding. But it does not flush the effect.
+      Scheduler.unstable_flushNumberOfYields(1);
+      expect(Scheduler).toHaveYielded(['A1', 'B1', 'C1']);
     });
+    // The effect flushes after paint.
+    expect(Scheduler).toHaveYielded(['Effect: 1']);
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index d0fb1fec858c..3c09935a5b7c 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -300,10 +300,9 @@ describe(
           ReactNoop.render(<App />);
         });
 
-        ReactNoop.flushSync();
-
         // Because the render expired, React should finish the tree without
         // consulting `shouldYield` again
+        Scheduler.unstable_flushNumberOfYields(1);
         expect(Scheduler).toHaveYielded(['B', 'C']);
       });
     });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 7861b2904f28..668299b282b9 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -1958,32 +1958,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     await advanceTimers(5000);
 
     // Retry with the new content.
-    if (gate(flags => flags.disableSchedulerTimeoutInWorkLoop)) {
-      expect(Scheduler).toFlushAndYield([
-        'A',
-        // B still suspends
-        'Suspend! [B]',
-        'Loading more...',
-      ]);
-    } else {
-      // In this branch, right as we start rendering, we detect that the work
-      // has expired (via Scheduler's didTimeout argument) and re-schedule the
-      // work as synchronous. Since sync work does not flow through Scheduler,
-      // we need to use `flushSync`.
-      //
-      // Usually we would use `act`, which fluses both sync work and Scheduler
-      // work, but that would also force the fallback to display, and this test
-      // is specifically about whether we delay or show the fallback.
-      expect(Scheduler).toFlushAndYield([]);
-      // This will flush the synchronous callback we just scheduled.
-      ReactNoop.flushSync();
-      expect(Scheduler).toHaveYielded([
-        'A',
-        // B still suspends
-        'Suspend! [B]',
-        'Loading more...',
-      ]);
-    }
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      // B still suspends
+      'Suspend! [B]',
+      'Loading more...',
+    ]);
+
     // Because we've already been waiting for so long we've exceeded
     // our threshold and we show the next level immediately.
     expect(ReactNoop.getChildren()).toEqual([

From 84b9162cbe91a8c0169ec1171273be58f3a2398a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 26 Apr 2021 18:30:34 +0200
Subject: [PATCH 0477/1603] Use toMatchInlineSnapshot for dehydrated values
 (#20618)

---
 .../__tests__/dehydratedValueSerializer.js    |   6 +-
 .../src/__tests__/inspectedElement-test.js    | 350 ++++++++----------
 .../__tests__/inspectedElementSerializer.js   |  20 +-
 .../__tests__/legacy/inspectElement-test.js   | 240 ++++++------
 .../__tests__/treeContextStateSerializer.js   |   7 +-
 scripts/jest/config.base.js                   |   1 +
 scripts/jest/setupGlobal.js                   |   7 +
 7 files changed, 297 insertions(+), 334 deletions(-)
 create mode 100644 scripts/jest/setupGlobal.js

diff --git a/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js b/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
index d8eac57df035..23a9a1af02ef 100644
--- a/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
@@ -10,10 +10,14 @@
 // 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' &&
-    maybeDehydratedValue.hasOwnProperty(meta.inspectable) &&
+    hasOwnProperty(meta.inspectable) &&
     maybeDehydratedValue[meta.inspected] !== true
   );
 }
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 60119df3a972..1acc8a67c5db 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -20,7 +20,6 @@ describe('InspectedElement', () => {
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
   let store: Store;
-  let meta;
   let utils;
 
   let BridgeContext;
@@ -39,8 +38,6 @@ describe('InspectedElement', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
-    meta = require('react-devtools-shared/src/hydration').meta;
-
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -442,18 +439,21 @@ describe('InspectedElement', () => {
 
     const inspectedElement = await inspectElementAtIndex(0);
 
-    const {props} = (inspectedElement: any);
-    expect(props.boolean_false).toBe(false);
-    expect(props.boolean_true).toBe(true);
-    expect(Number.isFinite(props.infinity)).toBe(false);
-    expect(props.integer_zero).toEqual(0);
-    expect(props.integer_one).toEqual(1);
-    expect(props.float).toEqual(1.23);
-    expect(props.string).toEqual('abc');
-    expect(props.string_empty).toEqual('');
-    expect(props.nan).toBeNaN();
-    expect(props.value_null).toBeNull();
-    expect(props.value_undefined).toBeUndefined();
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "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 () => {
@@ -539,175 +539,126 @@ describe('InspectedElement', () => {
 
     const inspectedElement = await inspectElementAtIndex(0);
 
-    const {
-      anonymous_fn,
-      array_buffer,
-      array_of_arrays,
-      big_int,
-      bound_fn,
-      data_view,
-      date,
-      fn,
-      html_element,
-      immutable,
-      map,
-      map_of_maps,
-      object_of_objects,
-      object_with_symbol,
-      proxy,
-      react_element,
-      regexp,
-      set,
-      set_of_sets,
-      symbol,
-      typed_array,
-    } = (inspectedElement: any).props;
-
-    expect(anonymous_fn[meta.inspectable]).toBe(false);
-    expect(anonymous_fn[meta.name]).toBe('function');
-    expect(anonymous_fn[meta.type]).toBe('function');
-    expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
-    expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
-
-    expect(array_buffer[meta.size]).toBe(3);
-    expect(array_buffer[meta.inspectable]).toBe(false);
-    expect(array_buffer[meta.name]).toBe('ArrayBuffer');
-    expect(array_buffer[meta.type]).toBe('array_buffer');
-    expect(array_buffer[meta.preview_short]).toBe('ArrayBuffer(3)');
-    expect(array_buffer[meta.preview_long]).toBe('ArrayBuffer(3)');
-
-    expect(array_of_arrays[0][meta.size]).toBe(2);
-    expect(array_of_arrays[0][meta.inspectable]).toBe(true);
-    expect(array_of_arrays[0][meta.name]).toBe('Array');
-    expect(array_of_arrays[0][meta.type]).toBe('array');
-    expect(array_of_arrays[0][meta.preview_long]).toBe('[Array(3), Array(0)]');
-    expect(array_of_arrays[0][meta.preview_short]).toBe('Array(2)');
-
-    expect(big_int[meta.inspectable]).toBe(false);
-    expect(big_int[meta.name]).toBe('123');
-    expect(big_int[meta.type]).toBe('bigint');
-    expect(big_int[meta.preview_long]).toBe('123n');
-    expect(big_int[meta.preview_short]).toBe('123n');
-
-    expect(bound_fn[meta.inspectable]).toBe(false);
-    expect(bound_fn[meta.name]).toBe('bound exampleFunction');
-    expect(bound_fn[meta.type]).toBe('function');
-    expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
-    expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
-
-    expect(data_view[meta.size]).toBe(3);
-    expect(data_view[meta.inspectable]).toBe(false);
-    expect(data_view[meta.name]).toBe('DataView');
-    expect(data_view[meta.type]).toBe('data_view');
-    expect(data_view[meta.preview_long]).toBe('DataView(3)');
-    expect(data_view[meta.preview_short]).toBe('DataView(3)');
-
-    expect(date[meta.inspectable]).toBe(false);
-    expect(date[meta.type]).toBe('date');
-    expect(new Date(date[meta.preview_long]).toISOString()).toBe(
-      exampleDateISO,
-    );
-    expect(new Date(date[meta.preview_short]).toISOString()).toBe(
-      exampleDateISO,
-    );
-
-    expect(fn[meta.inspectable]).toBe(false);
-    expect(fn[meta.name]).toBe('exampleFunction');
-    expect(fn[meta.type]).toBe('function');
-    expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
-    expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
-
-    expect(html_element[meta.inspectable]).toBe(false);
-    expect(html_element[meta.name]).toBe('DIV');
-    expect(html_element[meta.type]).toBe('html_element');
-    expect(html_element[meta.preview_long]).toBe('<div />');
-    expect(html_element[meta.preview_short]).toBe('<div />');
-
-    expect(immutable[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(immutable[meta.name]).toBe('Map');
-    expect(immutable[meta.type]).toBe('iterator');
-    expect(immutable[meta.preview_long]).toBe(
-      'Map(3) {"a" => List(3), "b" => 123, "c" => Map(2)}',
-    );
-    expect(immutable[meta.preview_short]).toBe('Map(3)');
-
-    expect(map[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(map[meta.name]).toBe('Map');
-    expect(map[meta.type]).toBe('iterator');
-    expect(map[0][meta.type]).toBe('array');
-    expect(map[meta.preview_long]).toBe(
-      'Map(2) {"name" => "Brian", "food" => "sushi"}',
-    );
-    expect(map[meta.preview_short]).toBe('Map(2)');
-
-    expect(map_of_maps[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(map_of_maps[meta.name]).toBe('Map');
-    expect(map_of_maps[meta.type]).toBe('iterator');
-    expect(map_of_maps[0][meta.type]).toBe('array');
-    expect(map_of_maps[meta.preview_long]).toBe(
-      'Map(2) {"first" => Map(2), "second" => Map(2)}',
-    );
-    expect(map_of_maps[meta.preview_short]).toBe('Map(2)');
-
-    expect(object_of_objects.inner[meta.size]).toBe(3);
-    expect(object_of_objects.inner[meta.inspectable]).toBe(true);
-    expect(object_of_objects.inner[meta.name]).toBe('');
-    expect(object_of_objects.inner[meta.type]).toBe('object');
-    expect(object_of_objects.inner[meta.preview_long]).toBe(
-      '{boolean: true, number: 123, string: "abc"}',
-    );
-    expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');
-
-    expect(object_with_symbol['Symbol(name)']).toBe('hello');
-
-    expect(proxy[meta.inspectable]).toBe(false);
-    expect(proxy[meta.name]).toBe('function');
-    expect(proxy[meta.type]).toBe('function');
-    expect(proxy[meta.preview_long]).toBe('ƒ () {}');
-    expect(proxy[meta.preview_short]).toBe('ƒ () {}');
-
-    expect(react_element[meta.inspectable]).toBe(false);
-    expect(react_element[meta.name]).toBe('span');
-    expect(react_element[meta.type]).toBe('react_element');
-    expect(react_element[meta.preview_long]).toBe('<span />');
-    expect(react_element[meta.preview_short]).toBe('<span />');
-
-    expect(regexp[meta.inspectable]).toBe(false);
-    expect(regexp[meta.name]).toBe('/abc/giu');
-    expect(regexp[meta.preview_long]).toBe('/abc/giu');
-    expect(regexp[meta.preview_short]).toBe('/abc/giu');
-    expect(regexp[meta.type]).toBe('regexp');
-
-    expect(set[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(set[meta.name]).toBe('Set');
-    expect(set[meta.type]).toBe('iterator');
-    expect(set[0]).toBe('abc');
-    expect(set[1]).toBe(123);
-    expect(set[meta.preview_long]).toBe('Set(2) {"abc", 123}');
-    expect(set[meta.preview_short]).toBe('Set(2)');
-
-    expect(set_of_sets[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(set_of_sets[meta.name]).toBe('Set');
-    expect(set_of_sets[meta.type]).toBe('iterator');
-    expect(set_of_sets['0'][meta.inspectable]).toBe(true);
-    expect(set_of_sets[meta.preview_long]).toBe('Set(2) {Set(3), Set(3)}');
-    expect(set_of_sets[meta.preview_short]).toBe('Set(2)');
-
-    expect(symbol[meta.inspectable]).toBe(false);
-    expect(symbol[meta.name]).toBe('Symbol(symbol)');
-    expect(symbol[meta.type]).toBe('symbol');
-    expect(symbol[meta.preview_long]).toBe('Symbol(symbol)');
-    expect(symbol[meta.preview_short]).toBe('Symbol(symbol)');
-
-    expect(typed_array[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(typed_array[meta.size]).toBe(3);
-    expect(typed_array[meta.name]).toBe('Int8Array');
-    expect(typed_array[meta.type]).toBe('typed_array');
-    expect(typed_array[0]).toBe(100);
-    expect(typed_array[1]).toBe(-100);
-    expect(typed_array[2]).toBe(0);
-    expect(typed_array[meta.preview_long]).toBe('Int8Array(3) [100, -100, 0]');
-    expect(typed_array[meta.preview_short]).toBe('Int8Array(3)');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "anonymous_fn": Dehydrated {
+          "preview_short": ƒ () {},
+          "preview_long": ƒ () {},
+        },
+        "array_buffer": Dehydrated {
+          "preview_short": ArrayBuffer(3),
+          "preview_long": ArrayBuffer(3),
+        },
+        "array_of_arrays": Array [
+          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": Object {
+          "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": Object {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["name", "Brian"],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["food", "sushi"],
+          },
+        },
+        "map_of_maps": Object {
+          "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": Object {
+          "inner": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {boolean: true, number: 123, string: "abc"},
+          },
+        },
+        "object_with_symbol": Object {
+          "Symbol(name)": "hello",
+        },
+        "proxy": Dehydrated {
+          "preview_short": ƒ () {},
+          "preview_long": ƒ () {},
+        },
+        "react_element": Dehydrated {
+          "preview_short": <span />,
+          "preview_long": <span />,
+        },
+        "regexp": Dehydrated {
+          "preview_short": /abc/giu,
+          "preview_long": /abc/giu,
+        },
+        "set": Object {
+          "0": "abc",
+          "1": 123,
+        },
+        "set_of_sets": Object {
+          "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": Object {
+          "0": 100,
+          "1": -100,
+          "2": 0,
+        },
+      }
+    `);
   });
 
   it('should not consume iterables while inspecting', async () => {
@@ -725,13 +676,14 @@ describe('InspectedElement', () => {
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
-
-    const {prop} = (inspectedElement: any).props;
-    expect(prop[meta.inspectable]).toBe(false);
-    expect(prop[meta.name]).toBe('Generator');
-    expect(prop[meta.type]).toBe('opaque_iterator');
-    expect(prop[meta.preview_long]).toBe('Generator');
-    expect(prop[meta.preview_short]).toBe('Generator');
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "prop": Dehydrated {
+          "preview_short": Generator,
+          "preview_long": Generator,
+        },
+      }
+    `);
   });
 
   it('should support objects with no prototype', async () => {
@@ -774,10 +726,14 @@ describe('InspectedElement', () => {
 
     const inspectedElement = await inspectElementAtIndex(0);
 
-    // 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);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "object": Object {
+          "hasOwnProperty": true,
+          "name": "blah",
+        },
+      }
+    `);
   });
 
   it('should support custom objects with enumerable properties and getters', async () => {
@@ -1834,8 +1790,8 @@ describe('InspectedElement', () => {
       ReactDOM.render(<DisplayedComplexValue />, container),
     );
 
-    const inspectedElement = await inspectElementAtIndex(0);
-    expect(inspectedElement.hooks).toMatchInlineSnapshot(`
+    const {hooks} = await inspectElementAtIndex(0);
+    expect(hooks).toMatchInlineSnapshot(`
       Array [
         Object {
           "id": null,
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index a615777421fe..db75d9e15088 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -1,12 +1,20 @@
 // 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 (
-    maybeInspectedElement !== null &&
-    typeof maybeInspectedElement === 'object' &&
-    maybeInspectedElement.hasOwnProperty('canEditFunctionProps') &&
-    maybeInspectedElement.hasOwnProperty('canEditHooks') &&
-    maybeInspectedElement.hasOwnProperty('canToggleSuspense') &&
-    maybeInspectedElement.hasOwnProperty('canViewSource')
+    hasOwnProperty('canEditFunctionProps') &&
+    hasOwnProperty('canEditHooks') &&
+    hasOwnProperty('canToggleSuspense') &&
+    hasOwnProperty('canViewSource')
   );
 }
 
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index b01d9c0fe9c5..3afab2f38fee 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -207,133 +207,119 @@ describe('InspectedElementContext', () => {
     const id = ((store.getElementIDAtIndex(0): any): number);
     const inspectedElement = await read(id);
 
-    const {
-      anonymous_fn,
-      array_buffer,
-      array_of_arrays,
-      big_int,
-      bound_fn,
-      data_view,
-      date,
-      fn,
-      html_element,
-      immutable,
-      map,
-      map_of_maps,
-      object_of_objects,
-      react_element,
-      regexp,
-      set,
-      set_of_sets,
-      symbol,
-      typed_array,
-    } = inspectedElement.props;
-
-    const {meta} = require('react-devtools-shared/src/hydration');
-
-    expect(anonymous_fn[meta.inspectable]).toBe(false);
-    expect(anonymous_fn[meta.name]).toBe('function');
-    expect(anonymous_fn[meta.type]).toBe('function');
-    expect(anonymous_fn[meta.preview_long]).toBe('ƒ () {}');
-    expect(anonymous_fn[meta.preview_short]).toBe('ƒ () {}');
-
-    expect(array_buffer[meta.size]).toBe(3);
-    expect(array_buffer[meta.inspectable]).toBe(false);
-    expect(array_buffer[meta.name]).toBe('ArrayBuffer');
-    expect(array_buffer[meta.type]).toBe('array_buffer');
-    expect(array_buffer[meta.preview_short]).toBe('ArrayBuffer(3)');
-    expect(array_buffer[meta.preview_long]).toBe('ArrayBuffer(3)');
-
-    expect(array_of_arrays[0][meta.size]).toBe(2);
-    expect(array_of_arrays[0][meta.inspectable]).toBe(true);
-    expect(array_of_arrays[0][meta.name]).toBe('Array');
-    expect(array_of_arrays[0][meta.type]).toBe('array');
-    expect(array_of_arrays[0][meta.preview_long]).toBe('[Array(3), Array(0)]');
-    expect(array_of_arrays[0][meta.preview_short]).toBe('Array(2)');
-
-    expect(big_int[meta.inspectable]).toBe(false);
-    expect(big_int[meta.name]).toBe('123');
-    expect(big_int[meta.type]).toBe('bigint');
-
-    expect(bound_fn[meta.inspectable]).toBe(false);
-    expect(bound_fn[meta.name]).toBe('bound exampleFunction');
-    expect(bound_fn[meta.type]).toBe('function');
-    expect(bound_fn[meta.preview_long]).toBe('ƒ bound exampleFunction() {}');
-    expect(bound_fn[meta.preview_short]).toBe('ƒ bound exampleFunction() {}');
-
-    expect(data_view[meta.size]).toBe(3);
-    expect(data_view[meta.inspectable]).toBe(false);
-    expect(data_view[meta.name]).toBe('DataView');
-    expect(data_view[meta.type]).toBe('data_view');
-
-    expect(date[meta.inspectable]).toBe(false);
-    expect(date[meta.type]).toBe('date');
-
-    expect(fn[meta.inspectable]).toBe(false);
-    expect(fn[meta.name]).toBe('exampleFunction');
-    expect(fn[meta.type]).toBe('function');
-    expect(fn[meta.preview_long]).toBe('ƒ exampleFunction() {}');
-    expect(fn[meta.preview_short]).toBe('ƒ exampleFunction() {}');
-
-    expect(html_element[meta.inspectable]).toBe(false);
-    expect(html_element[meta.name]).toBe('DIV');
-    expect(html_element[meta.type]).toBe('html_element');
-
-    expect(immutable[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(immutable[meta.name]).toBe('Map');
-    expect(immutable[meta.type]).toBe('iterator');
-
-    expect(map[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(map[meta.name]).toBe('Map');
-    expect(map[meta.type]).toBe('iterator');
-    expect(map[0][meta.type]).toBe('array');
-
-    expect(map_of_maps[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(map_of_maps[meta.name]).toBe('Map');
-    expect(map_of_maps[meta.type]).toBe('iterator');
-    expect(map_of_maps[0][meta.type]).toBe('array');
-
-    expect(object_of_objects.inner[meta.size]).toBe(3);
-    expect(object_of_objects.inner[meta.inspectable]).toBe(true);
-    expect(object_of_objects.inner[meta.name]).toBe('');
-    expect(object_of_objects.inner[meta.type]).toBe('object');
-    expect(object_of_objects.inner[meta.preview_long]).toBe(
-      '{boolean: true, number: 123, string: "abc"}',
-    );
-    expect(object_of_objects.inner[meta.preview_short]).toBe('{…}');
-
-    expect(react_element[meta.inspectable]).toBe(false);
-    expect(react_element[meta.name]).toBe('span');
-    expect(react_element[meta.type]).toBe('react_element');
-
-    expect(regexp[meta.inspectable]).toBe(false);
-    expect(regexp[meta.name]).toBe('/abc/giu');
-    expect(regexp[meta.preview_long]).toBe('/abc/giu');
-    expect(regexp[meta.preview_short]).toBe('/abc/giu');
-    expect(regexp[meta.type]).toBe('regexp');
-
-    expect(set[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(set[meta.name]).toBe('Set');
-    expect(set[meta.type]).toBe('iterator');
-    expect(set[0]).toBe('abc');
-    expect(set[1]).toBe(123);
-
-    expect(set_of_sets[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(set_of_sets[meta.name]).toBe('Set');
-    expect(set_of_sets[meta.type]).toBe('iterator');
-    expect(set_of_sets['0'][meta.inspectable]).toBe(true);
-
-    expect(symbol[meta.inspectable]).toBe(false);
-    expect(symbol[meta.name]).toBe('Symbol(symbol)');
-    expect(symbol[meta.type]).toBe('symbol');
-
-    expect(typed_array[meta.inspectable]).toBeUndefined(); // Complex type
-    expect(typed_array[meta.size]).toBe(3);
-    expect(typed_array[meta.name]).toBe('Int8Array');
-    expect(typed_array[meta.type]).toBe('typed_array');
-    expect(typed_array[0]).toBe(100);
-    expect(typed_array[1]).toBe(-100);
-    expect(typed_array[2]).toBe(0);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "anonymous_fn": Dehydrated {
+          "preview_short": ƒ () {},
+          "preview_long": ƒ () {},
+        },
+        "array_buffer": Dehydrated {
+          "preview_short": ArrayBuffer(3),
+          "preview_long": ArrayBuffer(3),
+        },
+        "array_of_arrays": Array [
+          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": Object {
+          "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": Object {
+          "0": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["name", "Brian"],
+          },
+          "1": Dehydrated {
+            "preview_short": Array(2),
+            "preview_long": ["food", "sushi"],
+          },
+        },
+        "map_of_maps": Object {
+          "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": Object {
+          "inner": Dehydrated {
+            "preview_short": {…},
+            "preview_long": {boolean: true, number: 123, string: "abc"},
+          },
+        },
+        "react_element": Dehydrated {
+          "preview_short": <span />,
+          "preview_long": <span />,
+        },
+        "regexp": Dehydrated {
+          "preview_short": /abc/giu,
+          "preview_long": /abc/giu,
+        },
+        "set": Object {
+          "0": "abc",
+          "1": 123,
+        },
+        "set_of_sets": Object {
+          "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": Object {
+          "0": 100,
+          "1": -100,
+          "2": 0,
+        },
+      }
+    `);
   });
 
   it('should support objects with no prototype', async () => {
diff --git a/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js b/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
index 866d4ed4c366..f434cd66b5a4 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
@@ -6,11 +6,12 @@ export function test(maybeState) {
     return false;
   }
 
+  const hasOwnProperty = Object.prototype.hasOwnProperty.bind(maybeState);
   // Duck typing at its finest.
   return (
-    maybeState.hasOwnProperty('inspectedElementID') &&
-    maybeState.hasOwnProperty('ownerFlatTree') &&
-    maybeState.hasOwnProperty('ownerSubtreeLeafElementID')
+    hasOwnProperty('inspectedElementID') &&
+    hasOwnProperty('ownerFlatTree') &&
+    hasOwnProperty('ownerSubtreeLeafElementID')
   );
 }
 
diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js
index 0e9508221a65..425248902029 100644
--- a/scripts/jest/config.base.js
+++ b/scripts/jest/config.base.js
@@ -1,6 +1,7 @@
 'use strict';
 
 module.exports = {
+  globalSetup: require.resolve('./setupGlobal.js'),
   haste: {
     hasteImplModulePath: require.resolve('./noHaste.js'),
   },
diff --git a/scripts/jest/setupGlobal.js b/scripts/jest/setupGlobal.js
new file mode 100644
index 000000000000..f820078fea88
--- /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';
+};

From 72123839450ac3344e03fb7caf5d295188214241 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 26 Apr 2021 16:32:05 -0400
Subject: [PATCH 0478/1603] Enable strict effects mode for React Native
 Facebook builds (#21354)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 4cff77870865..e712288cf11c 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -53,7 +53,7 @@ export const enableSuspenseLayoutEffectSemantics = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = true;
 
-export const enableStrictEffects = false;
+export const enableStrictEffects = __DEV__;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 

From fc33f12bdee1d0ffbcc83d25199cdf4d47252736 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 26 Apr 2021 19:16:18 -0400
Subject: [PATCH 0479/1603] Remove unstable scheduler/tracing API (#20037)

---
 .codesandbox/ci.json                          |    2 +-
 fixtures/tracing/index.html                   |   83 -
 fixtures/tracing/script.js                    |  206 -
 fixtures/tracing/test.html                    |   21 -
 fixtures/tracing/test.js                      |  101 -
 .../__snapshots__/profilingCache-test.js.snap |  405 -
 .../profilingCharts-test.js.snap              |   42 -
 .../src/__tests__/profilingCache-test.js      |   75 -
 .../src/__tests__/profilingCharts-test.js     |   95 +-
 .../src/backend/renderer.js                   |   70 +-
 .../src/backend/types.js                      |    5 -
 .../src/devtools/ProfilingCache.js            |   16 -
 .../src/devtools/views/Icon.js                |   12 -
 .../views/Profiler/InteractionListItem.css    |   43 -
 .../views/Profiler/InteractionListItem.js     |  105 -
 .../devtools/views/Profiler/Interactions.css  |    9 -
 .../devtools/views/Profiler/Interactions.js   |  146 -
 .../Profiler/InteractionsChartBuilder.js      |   62 -
 .../views/Profiler/NoInteractions.css         |   16 -
 .../devtools/views/Profiler/NoInteractions.js |   35 -
 .../src/devtools/views/Profiler/Profiler.js   |   14 -
 .../views/Profiler/ProfilerContext.js         |   18 +-
 .../views/Profiler/SidebarCommitInfo.css      |   27 -
 .../views/Profiler/SidebarCommitInfo.js       |   37 +-
 .../views/Profiler/SidebarInteractions.css    |   55 -
 .../views/Profiler/SidebarInteractions.js     |  100 -
 .../src/devtools/views/Profiler/constants.js  |    2 -
 .../src/devtools/views/Profiler/types.js      |   19 -
 .../src/devtools/views/Profiler/utils.js      |   31 +-
 .../src/devtools/views/root.css               |    4 -
 .../src/app/InteractionTracing/index.js       |  103 -
 .../react-devtools-shell/src/app/index.js     |    2 -
 packages/react-devtools/OVERVIEW.md           |    1 -
 .../src/__tests__/ReactTestUtilsAct-test.js   |   83 -
 .../src/__tests__/ReactUpdates-test.js        |   80 -
 .../src/ReactFiberBeginWork.new.js            |   20 +-
 .../src/ReactFiberBeginWork.old.js            |   20 +-
 .../src/ReactFiberCommitWork.new.js           |   71 +-
 .../src/ReactFiberCommitWork.old.js           |   71 +-
 .../src/ReactFiberCompleteWork.new.js         |   11 -
 .../src/ReactFiberCompleteWork.old.js         |   11 -
 .../src/ReactFiberRoot.new.js                 |    7 -
 .../src/ReactFiberRoot.old.js                 |    7 -
 .../src/ReactFiberWorkLoop.new.js             |  255 +-
 .../src/ReactFiberWorkLoop.old.js             |  255 +-
 .../src/ReactInternalTypes.js                 |   14 -
 packages/react-reconciler/src/Scheduler.js    |   18 -
 .../src/__mocks__}/scheduler/tracing.js       |    6 +-
 .../ReactHooksWithNoopRenderer-test.js        |   67 -
 .../__tests__/ReactSuspense-test.internal.js  |   73 -
 .../__tests__/ReactTracing-test.internal.js   |   28 -
 .../__tests__/ReactUpdaters-test.internal.js  |   85 -
 .../useMutableSource-test.internal.js         |    1 -
 packages/react-refresh/package.json           |    3 +-
 .../src/__tests__/ReactFresh-test.js          |    4 +
 packages/react/index.js                       |    5 -
 .../ReactDOMTracing-test.internal.js          |  922 ---
 .../__tests__/ReactProfiler-test.internal.js  | 6857 ++++++-----------
 .../ReactProfilerDOM-test.internal.js         |  129 -
 ...ofilerDevToolsIntegration-test.internal.js |   44 +-
 .../ReactProfiler-test.internal.js.snap       |   80 +-
 .../src/forks/ReactSharedInternals.umd.js     |    2 -
 packages/scheduler/npm/tracing-profiling.js   |    7 -
 packages/scheduler/npm/tracing.js             |    7 -
 .../npm/umd/scheduler-tracing.development.js  |   80 -
 .../umd/scheduler-tracing.production.min.js   |   80 -
 .../umd/scheduler-tracing.profiling.min.js    |   80 -
 packages/scheduler/package.json               |    2 -
 packages/scheduler/src/Tracing.js             |  264 -
 .../scheduler/src/TracingSubscriptions.js     |  171 -
 .../SchedulerUMDBundle-test.internal.js       |   39 +-
 .../src/__tests__/Tracing-test.internal.js    |  375 -
 .../scheduler/src/__tests__/Tracing-test.js   |   51 -
 .../TracingSubscriptions-test.internal.js     |  621 --
 packages/shared/ReactFeatureFlags.js          |    3 -
 packages/shared/ReactTypes.js                 |    2 -
 .../forks/ReactFeatureFlags.native-fb.js      |    1 -
 .../forks/ReactFeatureFlags.native-oss.js     |    1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |    1 -
 .../ReactFeatureFlags.test-renderer.native.js |    1 -
 .../ReactFeatureFlags.test-renderer.www.js    |    1 -
 .../shared/forks/ReactFeatureFlags.testing.js |    1 -
 .../forks/ReactFeatureFlags.testing.www.js    |    1 -
 .../shared/forks/ReactFeatureFlags.www.js     |    1 -
 packages/shared/forks/SchedulerTracing.umd.js |   36 -
 .../matchers/interactionTracingMatchers.js    |  101 -
 scripts/jest/matchers/profilerMatchers.js     |   72 -
 scripts/jest/setupTests.js                    |    2 -
 .../spec-equivalence-reporter/setupTests.js   |    2 -
 .../shared-commands/test-tracing-fixture.js   |   58 -
 scripts/rollup/bundles.js                     |   18 -
 scripts/rollup/forks.js                       |   19 -
 scripts/rollup/modules.js                     |    2 -
 yarn.lock                                     |    8 +
 94 files changed, 2428 insertions(+), 10871 deletions(-)
 delete mode 100644 fixtures/tracing/index.html
 delete mode 100644 fixtures/tracing/script.js
 delete mode 100644 fixtures/tracing/test.html
 delete mode 100644 fixtures/tracing/test.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.css
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.css
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.css
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
 delete mode 100644 packages/react-devtools-shell/src/app/InteractionTracing/index.js
 rename packages/{ => react-reconciler/src/__mocks__}/scheduler/tracing.js (59%)
 delete mode 100644 packages/react-reconciler/src/__tests__/ReactTracing-test.internal.js
 delete mode 100644 packages/react/src/__tests__/ReactDOMTracing-test.internal.js
 delete mode 100644 packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
 delete mode 100644 packages/scheduler/npm/tracing-profiling.js
 delete mode 100644 packages/scheduler/npm/tracing.js
 delete mode 100644 packages/scheduler/npm/umd/scheduler-tracing.development.js
 delete mode 100644 packages/scheduler/npm/umd/scheduler-tracing.production.min.js
 delete mode 100644 packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js
 delete mode 100644 packages/scheduler/src/Tracing.js
 delete mode 100644 packages/scheduler/src/TracingSubscriptions.js
 delete mode 100644 packages/scheduler/src/__tests__/Tracing-test.internal.js
 delete mode 100644 packages/scheduler/src/__tests__/Tracing-test.js
 delete mode 100644 packages/scheduler/src/__tests__/TracingSubscriptions-test.internal.js
 delete mode 100644 packages/shared/forks/SchedulerTracing.umd.js
 delete mode 100644 scripts/jest/matchers/interactionTracingMatchers.js
 delete mode 100644 scripts/release/shared-commands/test-tracing-fixture.js

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index b57dd8fb5438..8fdab3e563d6 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/unstable_no_dom,scheduler/tracing,react/jsx-runtime,react/jsx-dev-runtime",
+  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/unstable_no_dom,react/jsx-runtime,react/jsx-dev-runtime",
   "publishDirectory": {
     "react": "build/node_modules/react",
     "react-dom": "build/node_modules/react-dom",
diff --git a/fixtures/tracing/index.html b/fixtures/tracing/index.html
deleted file mode 100644
index 61b2af1a43da..000000000000
--- a/fixtures/tracing/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html style="width: 100%; height: 100%;">
-  <head>
-    <meta charset="utf-8">
-    <title>Test tracing UMD</title>
-    <style>
-      body {
-        font-family: sans-serif;
-      }
-      ol {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: flex-start;
-      }
-      li {
-        background-color: #F7F7F7;
-        border: solid #CCC 0.125rem;
-        margin-bottom: 0.5rem;
-        border-radius: 0.25rem;
-        padding: 0.5rem;
-      }
-      li:after {
-        content: attr(data-value);
-        margin-left: 0.25rem;
-      }
-      .correct {
-        border-color: #0C0;
-        border-style: solid;
-        background: #EFE;
-      }
-      .incorrect {
-        border-color: #F00;
-        border-style: dashed;
-        background-color: #FEE;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Test tracing UMD</h1>
-    <p>
-      This fixture tests that the new tracing API is accessible via UMD build using the UMD shim.
-      It does not exhaustively test API functionality, only that the forwarded methods can be called.
-    </p>
-    <p>
-      Before running the tests below, check the console to make sure there are no errors.
-    </p>
-    <h3>
-      Tests
-      <button id="run-test-button" onClick="runAllTests()">Run all tests</button>
-    </h3>
-    <ol>
-      <li id="checkSchedulerAPI" data-value="...">
-        <strong>Test scheduler API</strong>
-      </li>
-      <li id="checkSchedulerTracingAPI" data-value="...">
-        <strong>Test tracing API</strong>
-      </li>
-      <li id="checkSchedulerTracingSubscriptionsAPI" data-value="...">
-        <strong>Test tracing subscriptions API</strong>
-      </li>
-      <li id="checkEndToEndIntegration" data-value="...">
-        <strong>Test end-to-end integration</strong>
-      </li>
-    </ol>
-
-    <script>
-      if (window.location.search.includes('puppeteer=true')) {
-        // Collocated calls to performance.now() often yield different values in Puppeteer.
-        // This causes the Scheduler API test to fail.
-        // For the purposes of our automated release scripts,
-        // Coerce tests to use Date.now() instead to reduce the chances of a false positive.
-        window.performance = {now: Date.now};
-      }
-    </script>
-
-    <!-- Load the tracing API before react to test that it's lazily evaluated -->
-    <script src="../../build/node_modules/scheduler/umd/scheduler.development.js"></script>
-    <script src="../../build/node_modules/scheduler/umd/scheduler-tracing.development.js"></script>
-    <script src="../../build/node_modules/react/umd/react.development.js"></script>
-    <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
-    <script src="./script.js"></script>
-  </body>
-</html>
diff --git a/fixtures/tracing/script.js b/fixtures/tracing/script.js
deleted file mode 100644
index 72a86c618d58..000000000000
--- a/fixtures/tracing/script.js
+++ /dev/null
@@ -1,206 +0,0 @@
-function runTest(listItem, callback) {
-  try {
-    callback();
-    listItem.className = 'correct';
-    listItem.setAttribute('data-value', 'All checks pass');
-  } catch (error) {
-    listItem.className = 'incorrect';
-    listItem.setAttribute('data-value', error);
-  }
-}
-
-function runAllTests() {
-  try {
-    checkSchedulerAPI();
-  } finally {
-    try {
-      checkSchedulerTracingAPI();
-    } finally {
-      try {
-        checkSchedulerTracingSubscriptionsAPI();
-      } finally {
-        checkEndToEndIntegration();
-      }
-    }
-  }
-}
-
-function checkSchedulerAPI() {
-  runTest(document.getElementById('checkSchedulerAPI'), () => {
-    if (
-      typeof Scheduler === 'undefined' ||
-      typeof Scheduler.unstable_now !== 'function' ||
-      typeof Scheduler.unstable_scheduleCallback !== 'function' ||
-      typeof Scheduler.unstable_cancelCallback !== 'function'
-    ) {
-      throw 'API is not defined';
-    }
-
-    const abs = Math.abs(Scheduler.unstable_now() - performance.now());
-    if (typeof abs !== 'number' || Number.isNaN(abs) || abs > 5) {
-      throw 'API does not work';
-    }
-
-    // There is no real way to verify that the two APIs are connected.
-  });
-}
-
-function checkSchedulerTracingAPI() {
-  runTest(document.getElementById('checkSchedulerTracingAPI'), () => {
-    if (
-      typeof SchedulerTracing === 'undefined' ||
-      typeof SchedulerTracing.unstable_clear !== 'function' ||
-      typeof SchedulerTracing.unstable_getCurrent !== 'function' ||
-      typeof SchedulerTracing.unstable_getThreadID !== 'function' ||
-      typeof SchedulerTracing.unstable_trace !== 'function' ||
-      typeof SchedulerTracing.unstable_wrap !== 'function'
-    ) {
-      throw 'API is not defined';
-    }
-
-    try {
-      let interactionsSet;
-      SchedulerTracing.unstable_trace('test', 123, () => {
-        interactionsSet = SchedulerTracing.unstable_getCurrent();
-      });
-      if (interactionsSet.size !== 1) {
-        throw null;
-      }
-      const interaction = Array.from(interactionsSet)[0];
-      if (interaction.name !== 'test' || interaction.timestamp !== 123) {
-        throw null;
-      }
-    } catch (error) {
-      throw 'API does not work';
-    }
-
-    const ForwardedSchedulerTracing =
-      React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing;
-
-    if (
-      SchedulerTracing.unstable_getThreadID() ===
-      ForwardedSchedulerTracing.unstable_getThreadID()
-    ) {
-      throw 'API forwarding is broken';
-    }
-  });
-}
-
-function checkSchedulerTracingSubscriptionsAPI() {
-  runTest(
-    document.getElementById('checkSchedulerTracingSubscriptionsAPI'),
-    () => {
-      if (
-        typeof SchedulerTracing === 'undefined' ||
-        typeof SchedulerTracing.unstable_subscribe !== 'function' ||
-        typeof SchedulerTracing.unstable_unsubscribe !== 'function'
-      ) {
-        throw 'API is not defined';
-      }
-
-      const onInteractionScheduledWorkCompletedCalls = [];
-      const onInteractionTracedCalls = [];
-      const onWorkCanceledCalls = [];
-      const onWorkScheduledCalls = [];
-      const onWorkStartedCalls = [];
-      const onWorkStoppedCalls = [];
-      const subscriber = {
-        onInteractionScheduledWorkCompleted: (...args) =>
-          onInteractionScheduledWorkCompletedCalls.push(args),
-        onInteractionTraced: (...args) => onInteractionTracedCalls.push(args),
-        onWorkCanceled: (...args) => onWorkCanceledCalls.push(args),
-        onWorkScheduled: (...args) => onWorkScheduledCalls.push(args),
-        onWorkStarted: (...args) => onWorkStartedCalls.push(args),
-        onWorkStopped: (...args) => onWorkStoppedCalls.push(args),
-      };
-
-      try {
-        SchedulerTracing.unstable_subscribe(subscriber);
-        SchedulerTracing.unstable_trace('foo', 123, () => {});
-        SchedulerTracing.unstable_unsubscribe(subscriber);
-        if (onInteractionTracedCalls.length !== 1) {
-          throw null;
-        }
-        const interaction = onInteractionTracedCalls[0][0];
-        if (interaction.name !== 'foo' || interaction.timestamp !== 123) {
-          throw null;
-        }
-        SchedulerTracing.unstable_trace('bar', 456, () => {});
-        if (onInteractionTracedCalls.length !== 1) {
-          throw null;
-        }
-      } catch (error) {
-        throw 'API does not forward methods';
-      }
-
-      const ForwardedSchedulerTracing =
-        React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
-          .SchedulerTracing;
-
-      try {
-        ForwardedSchedulerTracing.unstable_subscribe(subscriber);
-        SchedulerTracing.unstable_trace('foo', 123, () => {});
-        ForwardedSchedulerTracing.unstable_trace('bar', 456, () => {});
-        SchedulerTracing.unstable_unsubscribe(subscriber);
-        if (onInteractionTracedCalls.length !== 3) {
-          throw null;
-        }
-        const interactionFoo = onInteractionTracedCalls[1][0];
-        const interactionBar = onInteractionTracedCalls[2][0];
-        if (
-          interactionFoo.name !== 'foo' ||
-          interactionFoo.timestamp !== 123 ||
-          interactionBar.name !== 'bar' ||
-          interactionBar.timestamp !== 456
-        ) {
-          throw null;
-        }
-        ForwardedSchedulerTracing.unstable_trace('baz', 789, () => {});
-        if (onInteractionTracedCalls.length !== 3) {
-          throw null;
-        }
-      } catch (error) {
-        throw 'API forwarding is broken';
-      }
-    }
-  );
-}
-
-function checkEndToEndIntegration() {
-  runTest(document.getElementById('checkEndToEndIntegration'), () => {
-    try {
-      const onRenderCalls = [];
-      const onRender = (...args) => onRenderCalls.push(args);
-      const container = document.createElement('div');
-
-      SchedulerTracing.unstable_trace('render', 123, () => {
-        ReactDOM.render(
-          React.createElement(
-            React.Profiler,
-            {id: 'profiler', onRender},
-            React.createElement('div', null, 'hi')
-          ),
-          container
-        );
-      });
-
-      if (container.textContent !== 'hi') {
-        throw null;
-      }
-
-      if (onRenderCalls.length !== 1) {
-        throw null;
-      }
-      const call = onRenderCalls[0];
-      if (call.length !== 7) {
-        throw null;
-      }
-      const interaction = Array.from(call[6])[0];
-      if (interaction.name !== 'render' || interaction.timestamp !== 123) {
-        throw null;
-      }
-    } catch (error) {
-      throw 'End to end integration is broken';
-    }
-  });
-}
diff --git a/fixtures/tracing/test.html b/fixtures/tracing/test.html
deleted file mode 100644
index df09e7b62d01..000000000000
--- a/fixtures/tracing/test.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html style="width: 100%; height: 100%;">
-  <head>
-    <meta charset="utf-8">
-    <title>Test tracing UMD</title>
-    <style>
-      body {
-        font-family: sans-serif;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <!-- Load the tracing API before react to test that it's lazily evaluated -->
-    <script src="../../build/node_modules/scheduler/umd/scheduler.development.js"></script>
-    <script src="../../build/node_modules/scheduler/umd/scheduler-tracing.development.js"></script>
-    <script src="../../build/node_modules/react/umd/react.development.js"></script>
-    <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
-    <script src="./test.js"></script>
-  </body>
-</html>
diff --git a/fixtures/tracing/test.js b/fixtures/tracing/test.js
deleted file mode 100644
index 18753a819300..000000000000
--- a/fixtures/tracing/test.js
+++ /dev/null
@@ -1,101 +0,0 @@
-const {createElement, Component, Suspense} = React;
-const {createRoot} = ReactDOM;
-const {
-  unstable_subscribe: subscribe,
-  unstable_trace: trace,
-  unstable_wrap: wrap,
-} = SchedulerTracing;
-
-const createLogger = (backgroundColor, color, enabled) => (
-  message,
-  ...args
-) => {
-  if (enabled === false) return;
-  console.groupCollapsed(
-    `%c${message}`,
-    `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
-    ...args
-  );
-  console.log(
-    new Error('stack').stack
-      .split('\n')
-      .slice(2)
-      .join('\n')
-  );
-  console.groupEnd();
-};
-
-window.log = {
-  app: createLogger('#37474f', '#fff'),
-  interaction: createLogger('#6a1b9a', '#fff'),
-  react: createLogger('#ff5722', '#fff'),
-  tracing: createLogger('#2962ff', '#fff'),
-  work: createLogger('#e1bee7', '#000'),
-};
-
-// Fake suspense
-const resolvedValues = {};
-const read = key => {
-  if (!resolvedValues[key]) {
-    log.app(`Suspending for "${key}" ...`);
-    throw new Promise(
-      wrap(resolve => {
-        setTimeout(
-          wrap(() => {
-            log.app(`Loaded "${key}" ...`);
-            resolvedValues[key] = true;
-            resolve(key);
-          }),
-          1000
-        );
-      })
-    );
-  }
-  return key;
-};
-
-const TestApp = () =>
-  createElement(
-    Suspense,
-    {fallback: createElement(PlaceholderText)},
-    createElement(SuspendingChild, {text: 'foo'}),
-    createElement(SuspendingChild, {text: 'bar'}),
-    createElement(SuspendingChild, {text: 'baz'})
-  );
-
-const PlaceholderText = () => 'Loading ...';
-
-const SuspendingChild = ({text}) => {
-  const resolvedValue = read(text);
-  return resolvedValue;
-};
-
-subscribe({
-  onInteractionScheduledWorkCompleted: interaction =>
-    log.interaction(
-      'onInteractionScheduledWorkCompleted',
-      JSON.stringify(interaction)
-    ),
-  onInteractionTraced: interaction =>
-    log.interaction('onInteractionTraced', JSON.stringify(interaction)),
-  onWorkCanceled: interactions =>
-    log.work('onWorkCanceled', JSON.stringify(Array.from(interactions))),
-  onWorkScheduled: interactions =>
-    log.work('onWorkScheduled', JSON.stringify(Array.from(interactions))),
-  onWorkStarted: interactions =>
-    log.work('onWorkStarted', JSON.stringify(Array.from(interactions))),
-  onWorkStopped: interactions =>
-    log.work('onWorkStopped', JSON.stringify(Array.from(interactions))),
-});
-
-const element = document.getElementById('root');
-trace('initial_render', performance.now(), () => {
-  const root = createRoot(element);
-  log.app('render()');
-  root.render(
-    createElement(TestApp),
-    wrap(() => {
-      log.app('committed');
-    })
-  );
-});
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 9b94c71e6ed1..ad1d487ea790 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -39,7 +39,6 @@ Object {
     3 => 1,
     5 => 1,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 16,
@@ -87,7 +86,6 @@ Object {
     3 => 3,
     4 => 2,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 15,
@@ -124,7 +122,6 @@ Object {
     5 => 3,
     3 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 18,
@@ -188,7 +185,6 @@ Object {
     4 => 1,
     5 => 1,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 12,
@@ -254,7 +250,6 @@ Object {
     2 => 10,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 25,
@@ -302,7 +297,6 @@ Object {
     2 => 10,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 35,
@@ -341,7 +335,6 @@ Object {
     2 => 10,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 45,
@@ -451,7 +444,6 @@ Object {
               1,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 12,
@@ -556,7 +548,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 25,
@@ -625,7 +616,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 35,
@@ -676,7 +666,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 45,
@@ -693,8 +682,6 @@ Object {
       ],
       "displayName": "Parent",
       "initialTreeBaseDurations": Array [],
-      "interactionCommits": Array [],
-      "interactions": Array [],
       "operations": Array [
         Array [
           1,
@@ -950,7 +937,6 @@ Object {
               1,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 11,
@@ -1037,7 +1023,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 22,
@@ -1142,7 +1127,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 35,
@@ -1159,8 +1143,6 @@ Object {
       ],
       "displayName": "Parent",
       "initialTreeBaseDurations": Array [],
-      "interactionCommits": Array [],
-      "interactions": Array [],
       "operations": Array [
         Array [
           1,
@@ -1352,7 +1334,6 @@ Object {
         2 => 10,
         1 => 0,
       },
-      "interactionIDs": Array [],
       "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 13,
@@ -1397,7 +1378,6 @@ Object {
         2 => 10,
         1 => 0,
       },
-      "interactionIDs": Array [],
       "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 34,
@@ -1433,7 +1413,6 @@ Object {
         2 => 10,
         1 => 0,
       },
-      "interactionIDs": Array [],
       "passiveEffectDuration": null,
       "priorityLevel": "Immediate",
       "timestamp": 44,
@@ -1456,8 +1435,6 @@ Object {
     4 => 1,
     5 => 1,
   },
-  "interactionCommits": Map {},
-  "interactions": Map {},
   "operations": Array [
     Array [
       1,
@@ -1619,7 +1596,6 @@ Object {
         13 => 0,
         14 => 1,
       },
-      "interactionIDs": Array [],
       "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 24,
@@ -1636,8 +1612,6 @@ Object {
   ],
   "displayName": "Parent",
   "initialTreeBaseDurations": Map {},
-  "interactionCommits": Map {},
-  "interactions": Map {},
   "operations": Array [
     Array [
       1,
@@ -1712,7 +1686,6 @@ Object {
       "effectDuration": null,
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
-      "interactionIDs": Array [],
       "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 34,
@@ -1734,8 +1707,6 @@ Object {
     8 => 0,
     9 => 1,
   },
-  "interactionCommits": Map {},
-  "interactions": Map {},
   "operations": Array [
     Array [
       1,
@@ -1890,7 +1861,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 13,
@@ -1959,7 +1929,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 34,
@@ -2010,7 +1979,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 44,
@@ -2048,8 +2016,6 @@ Object {
           1,
         ],
       ],
-      "interactionCommits": Array [],
-      "interactions": Array [],
       "operations": Array [
         Array [
           1,
@@ -2256,7 +2222,6 @@ Object {
               1,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 24,
@@ -2273,8 +2238,6 @@ Object {
       ],
       "displayName": "Parent",
       "initialTreeBaseDurations": Array [],
-      "interactionCommits": Array [],
-      "interactions": Array [],
       "operations": Array [
         Array [
           1,
@@ -2346,7 +2309,6 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 34,
@@ -2380,8 +2342,6 @@ Object {
           1,
         ],
       ],
-      "interactionCommits": Array [],
-      "interactions": Array [],
       "operations": Array [
         Array [
           1,
@@ -2470,7 +2430,6 @@ Object {
         1 => 0,
         2 => 0,
       },
-      "interactionIDs": Array [],
       "passiveEffectDuration": null,
       "priorityLevel": "Normal",
       "timestamp": 0,
@@ -2487,8 +2446,6 @@ Object {
   ],
   "displayName": "Suspense",
   "initialTreeBaseDurations": Map {},
-  "interactionCommits": Map {},
-  "interactions": Map {},
   "operations": Array [
     Array [
       1,
@@ -2548,7 +2505,6 @@ Object {
     2 => 0,
     3 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 0,
@@ -2589,7 +2545,6 @@ Object {
     2 => 0,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -2624,7 +2579,6 @@ Object {
   "fiberSelfDurations": Map {
     3 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -2659,7 +2613,6 @@ Object {
   "fiberSelfDurations": Map {
     3 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -2698,7 +2651,6 @@ Object {
     2 => 0,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -2762,7 +2714,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 0,
@@ -2821,7 +2772,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -2862,7 +2812,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -2903,7 +2852,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -2960,7 +2908,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -2977,8 +2924,6 @@ Object {
       ],
       "displayName": "Component",
       "initialTreeBaseDurations": Array [],
-      "interactionCommits": Array [],
-      "interactions": Array [],
       "operations": Array [
         Array [
           1,
@@ -3125,7 +3070,6 @@ Object {
     6 => 0,
     7 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
   "timestamp": 0,
@@ -3206,7 +3150,6 @@ Object {
     3 => 0,
     2 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -3283,7 +3226,6 @@ Object {
     2 => 0,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -3361,7 +3303,6 @@ Object {
     2 => 0,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -3438,7 +3379,6 @@ Object {
     2 => 0,
     1 => 0,
   },
-  "interactionIDs": Array [],
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
   "timestamp": 0,
@@ -3574,7 +3514,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Normal",
           "timestamp": 0,
@@ -3703,7 +3642,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -3834,7 +3772,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -3966,7 +3903,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -4097,7 +4033,6 @@ Object {
               0,
             ],
           ],
-          "interactionIDs": Array [],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
           "timestamp": 0,
@@ -4114,8 +4049,6 @@ Object {
       ],
       "displayName": "LegacyContextProvider",
       "initialTreeBaseDurations": Array [],
-      "interactionCommits": Array [],
-      "interactions": Array [],
       "operations": Array [
         Array [
           1,
@@ -4325,341 +4258,3 @@ Object {
   "version": 5,
 }
 `;
-
-exports[`ProfilingCache should report every traced interaction: Interactions 1`] = `
-Array [
-  Object {
-    "__count": 1,
-    "id": 0,
-    "name": "mount: one child",
-    "timestamp": 0,
-  },
-  Object {
-    "__count": 0,
-    "id": 1,
-    "name": "update: two children",
-    "timestamp": 11,
-  },
-]
-`;
-
-exports[`ProfilingCache should report every traced interaction: imported data 1`] = `
-Object {
-  "dataForRoots": Array [
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              3,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              11,
-            ],
-            Array [
-              2,
-              11,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              4,
-              1,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              4,
-              1,
-            ],
-          ],
-          "interactionIDs": Array [
-            0,
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
-          "timestamp": 11,
-          "updaters": Array [
-            Object {
-              "displayName": "Anonymous",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              2,
-              11,
-            ],
-            Array [
-              1,
-              11,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "interactionIDs": Array [
-            1,
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 22,
-          "updaters": Array [
-            Object {
-              "displayName": "Anonymous",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [],
-      "interactionCommits": Array [
-        Array [
-          0,
-          Array [
-            0,
-          ],
-        ],
-        Array [
-          1,
-          Array [
-            1,
-          ],
-        ],
-      ],
-      "interactions": Array [
-        Array [
-          0,
-          Object {
-            "__count": 1,
-            "id": 0,
-            "name": "mount: one child",
-            "timestamp": 0,
-          },
-        ],
-        Array [
-          1,
-          Object {
-            "__count": 0,
-            "id": 1,
-            "name": "update: two children",
-            "timestamp": 11,
-          },
-        ],
-      ],
-      "operations": Array [
-        Array [
-          1,
-          1,
-          15,
-          6,
-          80,
-          97,
-          114,
-          101,
-          110,
-          116,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          48,
-          1,
-          1,
-          11,
-          1,
-          1,
-          4,
-          1,
-          11000,
-          1,
-          2,
-          5,
-          1,
-          0,
-          1,
-          0,
-          4,
-          2,
-          11000,
-          1,
-          3,
-          5,
-          2,
-          2,
-          2,
-          3,
-          4,
-          3,
-          0,
-          1,
-          4,
-          8,
-          2,
-          2,
-          2,
-          0,
-          4,
-          4,
-          1000,
-        ],
-        Array [
-          1,
-          1,
-          8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          49,
-          1,
-          5,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          5,
-          1000,
-          4,
-          2,
-          12000,
-          3,
-          2,
-          3,
-          3,
-          5,
-          4,
-          4,
-          1,
-          12000,
-        ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [],
-    },
-  ],
-  "version": 5,
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
index 5a497bafb6e9..e118ef9da325 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
@@ -255,48 +255,6 @@ Object {
 }
 `;
 
-exports[`profiling charts interactions should contain valid data: Interactions 1`] = `
-Object {
-  "interactions": Array [
-    Object {
-      "__count": 1,
-      "id": 0,
-      "name": "mount",
-      "timestamp": 0,
-    },
-    Object {
-      "__count": 0,
-      "id": 1,
-      "name": "update",
-      "timestamp": 15,
-    },
-  ],
-  "lastInteractionTime": 25,
-  "maxCommitDuration": 15,
-}
-`;
-
-exports[`profiling charts interactions should contain valid data: Interactions 2`] = `
-Object {
-  "interactions": Array [
-    Object {
-      "__count": 1,
-      "id": 0,
-      "name": "mount",
-      "timestamp": 0,
-    },
-    Object {
-      "__count": 0,
-      "id": 1,
-      "name": "update",
-      "timestamp": 15,
-    },
-  ],
-  "lastInteractionTime": 25,
-  "maxCommitDuration": 15,
-}
-`;
-
 exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `
 Object {
   "nodes": Map {
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 84311c0d8797..0b7273054c32 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -16,7 +16,6 @@ describe('ProfilingCache', () => {
   let React;
   let ReactDOM;
   let Scheduler;
-  let SchedulerTracing;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
   let store: Store;
@@ -35,7 +34,6 @@ describe('ProfilingCache', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
     TestRenderer = utils.requireTestRenderer();
   });
 
@@ -622,79 +620,6 @@ describe('ProfilingCache', () => {
     }
   });
 
-  it('should report every traced interaction', () => {
-    const Parent = ({count}) => {
-      Scheduler.unstable_advanceTime(10);
-      const children = new Array(count)
-        .fill(true)
-        .map((_, index) => <Child key={index} duration={index} />);
-      return (
-        <React.Fragment>
-          {children}
-          <MemoizedChild duration={1} />
-        </React.Fragment>
-      );
-    };
-    const Child = ({duration}) => {
-      Scheduler.unstable_advanceTime(duration);
-      return null;
-    };
-    const MemoizedChild = React.memo(Child);
-
-    const container = document.createElement('div');
-
-    utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() =>
-      SchedulerTracing.unstable_trace(
-        'mount: one child',
-        Scheduler.unstable_now(),
-        () => ReactDOM.render(<Parent count={1} />, container),
-      ),
-    );
-    utils.act(() =>
-      SchedulerTracing.unstable_trace(
-        'update: two children',
-        Scheduler.unstable_now(),
-        () => ReactDOM.render(<Parent count={2} />, container),
-      ),
-    );
-    utils.act(() => store.profilerStore.stopProfiling());
-
-    let interactions = null;
-
-    function Validator({previousInteractions, rootID}) {
-      interactions = store.profilerStore.profilingCache.getInteractionsChartData(
-        {
-          rootID,
-        },
-      ).interactions;
-      if (previousInteractions != null) {
-        expect(interactions).toEqual(previousInteractions);
-      } else {
-        expect(interactions).toMatchSnapshot('Interactions');
-      }
-      return null;
-    }
-
-    const rootID = store.roots[0];
-
-    utils.act(() =>
-      TestRenderer.create(
-        <Validator previousInteractions={null} rootID={rootID} />,
-      ),
-    );
-
-    expect(interactions).not.toBeNull();
-
-    utils.exportImportHelper(bridge, store);
-
-    utils.act(() =>
-      TestRenderer.create(
-        <Validator previousInteractions={interactions} rootID={rootID} />,
-      ),
-    );
-  });
-
   it('should handle unexpectedly shallow suspense trees', () => {
     const container = document.createElement('div');
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index 802a7421575e..b16e38f88c83 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -14,7 +14,6 @@ describe('profiling charts', () => {
   let React;
   let ReactDOM;
   let Scheduler;
-  let SchedulerTracing;
   let TestRenderer: TestRendererType;
   let store: Store;
   let utils;
@@ -30,7 +29,6 @@ describe('profiling charts', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
     TestRenderer = utils.requireTestRenderer();
   });
 
@@ -56,18 +54,8 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() =>
-        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
-          ReactDOM.render(<Parent />, container),
-        ),
-      );
-      utils.act(() =>
-        SchedulerTracing.unstable_trace(
-          'update',
-          Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent />, container),
-        ),
-      );
+      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => ReactDOM.render(<Parent />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
@@ -132,18 +120,8 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() =>
-        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
-          ReactDOM.render(<Parent />, container),
-        ),
-      );
-      utils.act(() =>
-        SchedulerTracing.unstable_trace(
-          'update',
-          Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent />, container),
-        ),
-      );
+      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => ReactDOM.render(<Parent />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
@@ -181,69 +159,4 @@ describe('profiling charts', () => {
       }
     });
   });
-
-  describe('interactions', () => {
-    it('should contain valid data', () => {
-      const Parent = (_: {||}) => {
-        Scheduler.unstable_advanceTime(10);
-        return (
-          <React.Fragment>
-            <Child key="first" duration={3} />
-            <Child key="second" duration={2} />
-            <Child key="third" duration={0} />
-          </React.Fragment>
-        );
-      };
-
-      // Memoize children to verify that chart doesn't include in the update.
-      const Child = React.memo(function Child({duration}) {
-        Scheduler.unstable_advanceTime(duration);
-        return null;
-      });
-
-      const container = document.createElement('div');
-
-      utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() =>
-        SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () =>
-          ReactDOM.render(<Parent />, container),
-        ),
-      );
-      utils.act(() =>
-        SchedulerTracing.unstable_trace(
-          'update',
-          Scheduler.unstable_now(),
-          () => ReactDOM.render(<Parent />, container),
-        ),
-      );
-      utils.act(() => store.profilerStore.stopProfiling());
-
-      let renderFinished = false;
-
-      function Validator({commitIndex, rootID}) {
-        const chartData = store.profilerStore.profilingCache.getInteractionsChartData(
-          {
-            rootID,
-          },
-        );
-        expect(chartData).toMatchSnapshot('Interactions');
-        renderFinished = true;
-        return null;
-      }
-
-      const rootID = store.roots[0];
-
-      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        renderFinished = false;
-
-        utils.act(() => {
-          TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />,
-          );
-        });
-
-        expect(renderFinished).toBe(true);
-      }
-    });
-  });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 807bbde0c799..c1172bfbe126 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -102,7 +102,6 @@ import type {
   SerializedElement,
   WorkTagMap,
 } from './types';
-import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
 import type {
   ComponentFilter,
   ElementType,
@@ -2136,6 +2135,22 @@ export function attach(
     // We don't patch any methods so there is no cleanup.
   }
 
+  function rootSupportsProfiling(root) {
+    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;
 
@@ -2161,21 +2176,14 @@ export function attach(
         currentRootID = getFiberID(getPrimaryFiber(root.current));
         setRootPseudoKey(currentRootID, root.current);
 
-        // Checking root.memoizedInteractions handles multi-renderer edge-case-
-        // where some v16 renderers support profiling and others don't.
-        if (isProfiling && root.memoizedInteractions != null) {
-          // If profiling is active, store commit time and duration, and the current interactions.
+        // 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,
-            interactions: Array.from(root.memoizedInteractions).map(
-              (interaction: Interaction) => ({
-                ...interaction,
-                timestamp: interaction.timestamp - profilingStartTime,
-              }),
-            ),
             maxActualDuration: 0,
             priorityLevel: null,
             updaters: getUpdatersList(root),
@@ -2205,8 +2213,7 @@ export function attach(
   }
 
   function handlePostCommitFiberRoot(root) {
-    const isProfilingSupported = root.memoizedInteractions != null;
-    if (isProfiling && isProfilingSupported) {
+    if (isProfiling && rootSupportsProfiling(root)) {
       if (currentCommitProfilingMetadata !== null) {
         const {effectDuration, passiveEffectDuration} = getEffectDurations(
           root,
@@ -2233,23 +2240,16 @@ export function attach(
       traceUpdatesForNodes.clear();
     }
 
-    // Checking root.memoizedInteractions handles multi-renderer edge-case-
-    // where some v16 renderers support profiling and others don't.
-    const isProfilingSupported = root.memoizedInteractions != null;
+    // 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, and the current interactions.
+      // 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,
-        interactions: Array.from(root.memoizedInteractions).map(
-          (interaction: Interaction) => ({
-            ...interaction,
-            timestamp: interaction.timestamp - profilingStartTime,
-          }),
-        ),
         maxActualDuration: 0,
         priorityLevel:
           priorityLevel == null ? null : formatPriorityLevel(priorityLevel),
@@ -3386,7 +3386,6 @@ export function attach(
     commitTime: number,
     durations: Array<number>,
     effectDuration: number | null,
-    interactions: Array<Interaction>,
     maxActualDuration: number,
     passiveEffectDuration: number | null,
     priorityLevel: string | null,
@@ -3419,8 +3418,6 @@ export function attach(
       (commitProfilingMetadata, rootID) => {
         const commitData: Array<CommitDataBackend> = [];
         const initialTreeBaseDurations: Array<[number, number]> = [];
-        const allInteractions: Map<number, Interaction> = new Map();
-        const interactionCommits: Map<number, Array<number>> = new Map();
 
         const displayName =
           (displayNamesByRootID !== null && displayNamesByRootID.get(rootID)) ||
@@ -3444,7 +3441,6 @@ export function attach(
             changeDescriptions,
             durations,
             effectDuration,
-            interactions,
             maxActualDuration,
             passiveEffectDuration,
             priorityLevel,
@@ -3452,23 +3448,6 @@ export function attach(
             updaters,
           } = commitProfilingData;
 
-          const interactionIDs: Array<number> = [];
-
-          interactions.forEach(interaction => {
-            if (!allInteractions.has(interaction.id)) {
-              allInteractions.set(interaction.id, interaction);
-            }
-
-            interactionIDs.push(interaction.id);
-
-            const commitIndices = interactionCommits.get(interaction.id);
-            if (commitIndices != null) {
-              commitIndices.push(commitIndex);
-            } else {
-              interactionCommits.set(interaction.id, [commitIndex]);
-            }
-          });
-
           const fiberActualDurations: Array<[number, number]> = [];
           const fiberSelfDurations: Array<[number, number]> = [];
           for (let i = 0; i < durations.length; i += 3) {
@@ -3486,7 +3465,6 @@ export function attach(
             effectDuration,
             fiberActualDurations,
             fiberSelfDurations,
-            interactionIDs,
             passiveEffectDuration,
             priorityLevel,
             timestamp: commitTime,
@@ -3498,8 +3476,6 @@ export function attach(
           commitData,
           displayName,
           initialTreeBaseDurations,
-          interactionCommits: Array.from(interactionCommits.entries()),
-          interactions: Array.from(allInteractions.entries()),
           rootID,
         });
       },
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 466a5b7fa2dd..342931c250ea 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -14,7 +14,6 @@ import type {
   ComponentFilter,
   ElementType,
 } from 'react-devtools-shared/src/types';
-import type {Interaction} from 'react-devtools-shared/src/devtools/views/Profiler/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
 type BundleType =
@@ -165,7 +164,6 @@ export type CommitDataBackend = {|
   fiberActualDurations: Array<[number, number]>,
   // Tuple of fiber ID and computed "self" duration
   fiberSelfDurations: Array<[number, number]>,
-  interactionIDs: Array<number>,
   // Only available in certain (newer) React builds,
   passiveEffectDuration: number | null,
   priorityLevel: string | null,
@@ -178,9 +176,6 @@ export type ProfilingDataForRootBackend = {|
   displayName: string,
   // Tuple of Fiber ID and base duration
   initialTreeBaseDurations: Array<[number, number]>,
-  // Tuple of Interaction ID and commit indices
-  interactionCommits: Array<[number, Array<number>]>,
-  interactions: Array<[number, Interaction]>,
   rootID: number,
 |};
 
diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
index 03e156cdf0f9..96e236b143d6 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilingCache.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -16,10 +16,6 @@ import {
   getChartData as getFlamegraphChartData,
   invalidateChartData as invalidateFlamegraphChartData,
 } from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
-import {
-  getChartData as getInteractionsChartData,
-  invalidateChartData as invalidateInteractionsChartData,
-} from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
 import {
   getChartData as getRankedChartData,
   invalidateChartData as invalidateRankedChartData,
@@ -27,7 +23,6 @@ import {
 
 import type {CommitTree} from 'react-devtools-shared/src/devtools/views/Profiler/types';
 import type {ChartData as FlamegraphChartData} from 'react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder';
-import type {ChartData as InteractionsChartData} from 'react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder';
 import type {ChartData as RankedChartData} from 'react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder';
 
 export default class ProfilingCache {
@@ -92,16 +87,6 @@ export default class ProfilingCache {
       rootID,
     });
 
-  getInteractionsChartData = ({
-    rootID,
-  }: {|
-    rootID: number,
-  |}): InteractionsChartData =>
-    getInteractionsChartData({
-      profilerStore: this._profilerStore,
-      rootID,
-    });
-
   getRankedChartData = ({
     commitIndex,
     commitTree,
@@ -123,7 +108,6 @@ export default class ProfilingCache {
 
     invalidateCommitTrees();
     invalidateFlamegraphChartData();
-    invalidateInteractionsChartData();
     invalidateRankedChartData();
   }
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index e879acdbfa61..ffa297610bdf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -19,7 +19,6 @@ export type IconType =
   | 'error'
   | 'facebook'
   | 'flame-chart'
-  | 'interactions'
   | 'profiler'
   | 'ranked-chart'
   | 'search'
@@ -59,9 +58,6 @@ export default function Icon({className = '', type}: Props) {
     case 'flame-chart':
       pathData = PATH_FLAME_CHART;
       break;
-    case 'interactions':
-      pathData = PATH_INTERACTIONS;
-      break;
     case 'profiler':
       pathData = PATH_PROFILER;
       break;
@@ -138,14 +134,6 @@ const PATH_FLAME_CHART = `
   13.3541667,19.4702042 C13.3541667,20.1226027 12.7851952,20.6514763 12.0833333,20.6514763 Z
 `;
 
-const PATH_INTERACTIONS = `
-  M23 8c0 1.1-.9 2-2 2-.18 0-.35-.02-.51-.07l-3.56 3.55c.05.16.07.34.07.52 0 1.1-.9 2-2
-  2s-2-.9-2-2c0-.18.02-.36.07-.52l-2.55-2.55c-.16.05-.34.07-.52.07s-.36-.02-.52-.07l-4.55
-  4.56c.05.16.07.33.07.51 0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2c.18 0 .35.02.51.07l4.56-4.55C8.02
-  9.36 8 9.18 8 9c0-1.1.9-2 2-2s2 .9 2 2c0 .18-.02.36-.07.52l2.55
-  2.55c.16-.05.34-.07.52-.07s.36.02.52.07l3.55-3.56C19.02 8.35 19 8.18 19 8c0-1.1.9-2 2-2s2 .9 2 2z
-`;
-
 const PATH_PROFILER = 'M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z';
 
 const PATH_SEARCH = `
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css
deleted file mode 100644
index 62784d3333dc..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.Interaction,
-.SelectedInteraction {
-  display: flex;
-  align-items: center;
-  padding: 0 0.25rem;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.Interaction:hover {
-  background-color: var(--color-background-hover);
-}
-
-.SelectedInteraction {
-  background-color: var(--color-background-hover);
-}
-
-.Name {
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-.Timeline {
-  position: relative;
-  height: 100%;
-}
-
-.InteractionLine {
-  position: absolute;
-  height: 3px;
-  background-color: var(--color-commit-did-not-render-fill);
-  color: var(--color-commit-did-not-render-fill-text);
-  border-radius: 0.125rem;
-}
-
-.CommitBox {
-  position: absolute;
-  width: var(--interaction-commit-size);
-  height: var(--interaction-commit-size);
-  background-color: var(--color-commit-did-not-render-fill);
-  color: var(--color-commit-did-not-render-fill-text);
-  cursor: pointer;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
deleted file mode 100644
index b720ca3e0d98..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionListItem.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {memo, useCallback} from 'react';
-import {areEqual} from 'react-window';
-import {getGradientColor} from './utils';
-
-import styles from './InteractionListItem.css';
-
-import type {ItemData} from './Interactions';
-
-type Props = {
-  data: ItemData,
-  index: number,
-  style: Object,
-  ...
-};
-
-function InteractionListItem({data: itemData, index, style}: Props) {
-  const {
-    chartData,
-    dataForRoot,
-    labelWidth,
-    scaleX,
-    selectedInteractionID,
-    selectCommitIndex,
-    selectInteraction,
-    selectTab,
-  } = itemData;
-
-  const {commitData, interactionCommits} = dataForRoot;
-  const {interactions, lastInteractionTime, maxCommitDuration} = chartData;
-
-  const interaction = interactions[index];
-  if (interaction == null) {
-    throw Error(`Could not find interaction #${index}`);
-  }
-
-  const handleClick = useCallback(() => {
-    selectInteraction(interaction.id);
-  }, [interaction, selectInteraction]);
-
-  const commits = interactionCommits.get(interaction.id) || [];
-
-  const startTime = interaction.timestamp;
-  const stopTime = lastInteractionTime;
-
-  const viewCommit = (commitIndex: number) => {
-    selectTab('flame-chart');
-    selectCommitIndex(commitIndex);
-  };
-
-  return (
-    <div
-      className={
-        selectedInteractionID === interaction.id
-          ? styles.SelectedInteraction
-          : styles.Interaction
-      }
-      onClick={handleClick}
-      style={style}>
-      <div
-        className={styles.Name}
-        style={{maxWidth: labelWidth}}
-        title={interaction.name}>
-        {interaction.name}
-      </div>
-      <div
-        className={styles.InteractionLine}
-        style={{
-          left: labelWidth + scaleX(startTime, 0),
-          width: scaleX(stopTime - startTime, 0),
-        }}
-      />
-      {commits.map(commitIndex => (
-        <div
-          className={styles.CommitBox}
-          key={commitIndex}
-          onClick={() => viewCommit(commitIndex)}
-          style={{
-            backgroundColor: getGradientColor(
-              Math.min(
-                1,
-                Math.max(
-                  0,
-                  commitData[commitIndex].duration / maxCommitDuration,
-                ),
-              ) || 0,
-            ),
-            left: labelWidth + scaleX(commitData[commitIndex].timestamp, 0),
-          }}
-        />
-      ))}
-    </div>
-  );
-}
-
-export default memo<Props>(InteractionListItem, areEqual);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.css
deleted file mode 100644
index 81fd9da918e1..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.Container {
-  width: 100%;
-  flex: 1;
-  padding: 0.5rem;
-}
-
-.FocusTarget:focus {
-  outline: none;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
deleted file mode 100644
index b39d973053b8..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Interactions.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {useCallback, useContext, useMemo} from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import {FixedSizeList} from 'react-window';
-import {ProfilerContext} from './ProfilerContext';
-import InteractionListItem from './InteractionListItem';
-import NoInteractions from './NoInteractions';
-import {StoreContext} from '../context';
-import {scale} from './utils';
-
-import styles from './Interactions.css';
-
-import type {ProfilingDataForRootFrontend} from './types';
-import type {ChartData} from './InteractionsChartBuilder';
-import type {TabID} from './ProfilerContext';
-
-export type ItemData = {|
-  chartData: ChartData,
-  dataForRoot: ProfilingDataForRootFrontend,
-  labelWidth: number,
-  scaleX: (value: number, fallbackValue: number) => number,
-  selectedInteractionID: number | null,
-  selectCommitIndex: (id: number | null) => void,
-  selectInteraction: (id: number | null) => void,
-  selectTab: (id: TabID) => void,
-|};
-
-export default function InteractionsAutoSizer(_: {||}) {
-  return (
-    <div className={styles.Container}>
-      <AutoSizer>
-        {({height, width}) => <Interactions height={height} width={width} />}
-      </AutoSizer>
-    </div>
-  );
-}
-
-function Interactions({height, width}: {|height: number, width: number|}) {
-  const {
-    rootID,
-    selectedInteractionID,
-    selectInteraction,
-    selectCommitIndex,
-    selectTab,
-  } = useContext(ProfilerContext);
-  const {profilerStore} = useContext(StoreContext);
-  const {profilingCache} = profilerStore;
-
-  const dataForRoot = profilerStore.getDataForRoot(((rootID: any): number));
-
-  const chartData = profilingCache.getInteractionsChartData({
-    rootID: ((rootID: any): number),
-  });
-
-  const {interactions} = chartData;
-
-  const handleKeyDown = useCallback(
-    event => {
-      let index;
-      switch (event.key) {
-        case 'ArrowDown':
-          index = interactions.findIndex(
-            interaction => interaction.id === selectedInteractionID,
-          );
-          selectInteraction(Math.min(interactions.length - 1, index + 1));
-          event.stopPropagation();
-          break;
-        case 'ArrowUp':
-          index = interactions.findIndex(
-            interaction => interaction.id === selectedInteractionID,
-          );
-          selectInteraction(Math.max(0, index - 1));
-          event.stopPropagation();
-          break;
-        default:
-          break;
-      }
-    },
-    [interactions, selectedInteractionID, selectInteraction],
-  );
-
-  const itemData = useMemo<ItemData>(() => {
-    const interactionCommitSize = parseInt(
-      getComputedStyle((document.body: any)).getPropertyValue(
-        '--interaction-commit-size',
-      ),
-      10,
-    );
-    const interactionLabelWidth = parseInt(
-      getComputedStyle((document.body: any)).getPropertyValue(
-        '--interaction-label-width',
-      ),
-      10,
-    );
-
-    const labelWidth = Math.min(interactionLabelWidth, width / 5);
-    const timelineWidth = width - labelWidth - interactionCommitSize;
-
-    return {
-      chartData,
-      dataForRoot,
-      labelWidth,
-      scaleX: scale(0, chartData.lastInteractionTime, 0, timelineWidth),
-      selectedInteractionID,
-      selectCommitIndex,
-      selectInteraction,
-      selectTab,
-    };
-  }, [
-    chartData,
-    dataForRoot,
-    selectedInteractionID,
-    selectCommitIndex,
-    selectInteraction,
-    selectTab,
-    width,
-  ]);
-
-  // If a commit contains no fibers with an actualDuration > 0,
-  // Display a fallback message.
-  if (interactions.length === 0) {
-    return <NoInteractions height={height} width={width} />;
-  }
-
-  return (
-    <div className={styles.FocusTarget} onKeyDown={handleKeyDown} tabIndex={0}>
-      <FixedSizeList
-        height={height}
-        itemCount={interactions.length}
-        itemData={itemData}
-        itemSize={30}
-        width={width}>
-        {InteractionListItem}
-      </FixedSizeList>
-    </div>
-  );
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
deleted file mode 100644
index 90ebfade4cd9..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/InteractionsChartBuilder.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
-
-import type {Interaction} from './types';
-
-export type ChartData = {|
-  interactions: Array<Interaction>,
-  lastInteractionTime: number,
-  maxCommitDuration: number,
-|};
-
-const cachedChartData: Map<number, ChartData> = new Map();
-
-export function getChartData({
-  profilerStore,
-  rootID,
-}: {|
-  profilerStore: ProfilerStore,
-  rootID: number,
-|}): ChartData {
-  if (cachedChartData.has(rootID)) {
-    return ((cachedChartData.get(rootID): any): ChartData);
-  }
-
-  const dataForRoot = profilerStore.getDataForRoot(rootID);
-  if (dataForRoot == null) {
-    throw Error(`Could not find profiling data for root "${rootID}"`);
-  }
-
-  const {commitData, interactions} = dataForRoot;
-
-  const lastInteractionTime =
-    commitData.length > 0 ? commitData[commitData.length - 1].timestamp : 0;
-
-  let maxCommitDuration = 0;
-
-  commitData.forEach(commitDatum => {
-    maxCommitDuration = Math.max(maxCommitDuration, commitDatum.duration);
-  });
-
-  const chartData = {
-    interactions: Array.from(interactions.values()),
-    lastInteractionTime,
-    maxCommitDuration,
-  };
-
-  cachedChartData.set(rootID, chartData);
-
-  return chartData;
-}
-
-export function invalidateChartData(): void {
-  cachedChartData.clear();
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.css b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.css
deleted file mode 100644
index 6c6872058ac7..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.NoInteractions {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.Header {
-  font-size: var(--font-size-sans-large);
-}
-
-.Link {
-  color: var(--color-button);
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
deleted file mode 100644
index c2f1f65480d1..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoInteractions.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-
-import styles from './NoInteractions.css';
-
-export default function NoInteractions({
-  height,
-  width,
-}: {|
-  height: number,
-  width: number,
-|}) {
-  return (
-    <div className={styles.NoInteractions} style={{height, width}}>
-      <p className={styles.Header}>No interactions were recorded.</p>
-      <p>
-        <a
-          className={styles.Link}
-          href="https://reactjs.org/link/interaction-tracing"
-          rel="noopener noreferrer"
-          target="_blank">
-          Learn more about the interaction tracing API here.
-        </a>
-      </p>
-    </div>
-  );
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 2b4e117d66d9..58008334bc8f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -15,14 +15,12 @@ import TabBar from '../TabBar';
 import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
-import Interactions from './Interactions';
 import RootSelector from './RootSelector';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
 import ProfilingImportExportButtons from './ProfilingImportExportButtons';
 import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
-import SidebarInteractions from './SidebarInteractions';
 import SidebarSelectedFiberInfo from './SidebarSelectedFiberInfo';
 import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/SettingsModal';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
@@ -53,9 +51,6 @@ function Profiler(_: {||}) {
       case 'ranked-chart':
         view = <CommitRanked />;
         break;
-      case 'interactions':
-        view = <Interactions />;
-        break;
       default:
         break;
     }
@@ -72,9 +67,6 @@ function Profiler(_: {||}) {
   let sidebar = null;
   if (!isProfiling && !isProcessingData && didRecordCommits) {
     switch (selectedTabID) {
-      case 'interactions':
-        sidebar = <SidebarInteractions />;
-        break;
       case 'flame-chart':
       case 'ranked-chart':
         // TRICKY
@@ -148,12 +140,6 @@ const tabs = [
     label: 'Ranked',
     title: 'Ranked chart',
   },
-  {
-    id: 'interactions',
-    icon: 'interactions',
-    label: 'Interactions',
-    title: 'Profiled interactions',
-  },
 ];
 
 const NoProfilingData = () => (
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index ac3b58f18798..48f9aa11eefd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -19,7 +19,7 @@ import {StoreContext} from '../context';
 
 import type {ProfilingDataFrontend} from './types';
 
-export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
+export type TabID = 'flame-chart' | 'ranked-chart';
 
 export type Context = {|
   // Which tab is selected in the Profiler UI?
@@ -64,10 +64,6 @@ export type Context = {|
   selectedFiberID: number | null,
   selectedFiberName: string | null,
   selectFiber: (id: number | null, name: string | null) => void,
-
-  // Which interaction is currently selected in the Interactions graph?
-  selectedInteractionID: number | null,
-  selectInteraction: (id: number | null) => void,
 |};
 
 const ProfilerContext = createContext<Context>(((null: any): Context));
@@ -216,9 +212,6 @@ function ProfilerContextController({children}: Props) {
     null,
   );
   const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
-  const [selectedInteractionID, selectInteraction] = useState<number | null>(
-    null,
-  );
 
   if (isProfiling) {
     batchedUpdates(() => {
@@ -229,9 +222,6 @@ function ProfilerContextController({children}: Props) {
         selectFiberID(null);
         selectFiberName(null);
       }
-      if (selectedInteractionID !== null) {
-        selectInteraction(null);
-      }
     });
   }
 
@@ -262,9 +252,6 @@ function ProfilerContextController({children}: Props) {
       selectedFiberID,
       selectedFiberName,
       selectFiber,
-
-      selectedInteractionID,
-      selectInteraction,
     }),
     [
       selectedTabID,
@@ -293,9 +280,6 @@ function ProfilerContextController({children}: Props) {
       selectedFiberID,
       selectedFiberName,
       selectFiber,
-
-      selectedInteractionID,
-      selectInteraction,
     ],
   );
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
index d82f10b3d73a..1fe2d298e9a1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.css
@@ -23,33 +23,6 @@
   margin: 0 0 0.5rem;
 }
 
-.NoInteractions {
-  color: var(--color-dim);
-}
-
-.Interactions {
-  margin: 0 0 0.5rem;
-}
-.NoInteractions,
-.Interaction {
-  display: block;
-  width: 100%;
-  text-align: left;
-  background: none;
-  border: none;
-  padding: 0.25rem 0.5rem;
-  color: var(--color-text);
-}
-.Interaction:focus,
-.Interaction:hover {
-  outline: none;
-  background-color: var(--color-background-hover);
-}
-
-.NoInteractions {
-  color: var(--color-dim);
-}
-
 .Label {
   overflow: hidden;
   text-overflow: ellipsis;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
index dcfaf7d68b3b..6619fb7c7839 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -20,12 +20,7 @@ import styles from './SidebarCommitInfo.css';
 export type Props = {||};
 
 export default function SidebarCommitInfo(_: Props) {
-  const {
-    selectedCommitIndex,
-    rootID,
-    selectInteraction,
-    selectTab,
-  } = useContext(ProfilerContext);
+  const {selectedCommitIndex, rootID} = useContext(ProfilerContext);
 
   const {profilerStore} = useContext(StoreContext);
 
@@ -33,22 +28,15 @@ export default function SidebarCommitInfo(_: Props) {
     return <div className={styles.NothingSelected}>Nothing selected</div>;
   }
 
-  const {interactions} = profilerStore.getDataForRoot(rootID);
   const {
     duration,
     effectDuration,
-    interactionIDs,
     passiveEffectDuration,
     priorityLevel,
     timestamp,
     updaters,
   } = profilerStore.getCommitData(rootID, selectedCommitIndex);
 
-  const viewInteraction = interactionID => {
-    selectTab('interactions');
-    selectInteraction(interactionID);
-  };
-
   const hasCommitPhaseDurations =
     effectDuration !== null || passiveEffectDuration !== null;
 
@@ -120,29 +108,6 @@ export default function SidebarCommitInfo(_: Props) {
               <Updaters commitTree={commitTree} updaters={updaters} />
             </li>
           )}
-
-          <li className={styles.Interactions}>
-            <label className={styles.Label}>Interactions</label>:
-            <div className={styles.InteractionList}>
-              {interactionIDs.length === 0 ? (
-                <div className={styles.NoInteractions}>(none)</div>
-              ) : null}
-              {interactionIDs.map(interactionID => {
-                const interaction = interactions.get(interactionID);
-                if (interaction == null) {
-                  throw Error(`Invalid interaction "${interactionID}"`);
-                }
-                return (
-                  <button
-                    key={interactionID}
-                    className={styles.Interaction}
-                    onClick={() => viewInteraction(interactionID)}>
-                    {interaction.name}
-                  </button>
-                );
-              })}
-            </div>
-          </li>
         </ul>
       </div>
     </Fragment>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.css
deleted file mode 100644
index c5643dfcd79f..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.Toolbar {
-  height: 2.25rem;
-  padding: 0 0.5rem;
-  flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-}
-
-.Content {
-  padding: 0.5rem;
-  user-select: none;
-  border-top: 1px solid var(--color-border);
-  overflow: auto;
-}
-
-.Name {
-  font-size: var(--font-size-sans-large);
-  white-space: nowrap;
-  overflow-x: hidden;
-  text-overflow: ellipsis;
-}
-
-.NothingSelected {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--color-dim);
-}
-
-.Commits {
-  font-weight: bold;
-}
-
-.List {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.ListItem {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.25rem 0.5rem;
-}
-.ListItem:hover {
-  background-color: var(--color-background-hover);
-}
-
-.CommitBox {
-  width: 20px;
-  height: 20px;
-  margin-right: 0.5rem;
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
deleted file mode 100644
index 186ec24250ea..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarInteractions.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {Fragment, useContext} from 'react';
-import {ProfilerContext} from './ProfilerContext';
-import {formatDuration, formatTime} from './utils';
-import {StoreContext} from '../context';
-import {getGradientColor} from './utils';
-
-import styles from './SidebarInteractions.css';
-
-export type Props = {||};
-
-export default function SidebarInteractions(_: Props) {
-  const {
-    selectedInteractionID,
-    rootID,
-    selectCommitIndex,
-    selectTab,
-  } = useContext(ProfilerContext);
-
-  const {profilerStore} = useContext(StoreContext);
-  const {profilingCache} = profilerStore;
-
-  if (selectedInteractionID === null) {
-    return <div className={styles.NothingSelected}>Nothing selected</div>;
-  }
-
-  const {interactionCommits, interactions} = profilerStore.getDataForRoot(
-    ((rootID: any): number),
-  );
-  const interaction = interactions.get(selectedInteractionID);
-  if (interaction == null) {
-    throw Error(
-      `Could not find interaction by selected interaction id "${selectedInteractionID}"`,
-    );
-  }
-
-  const {maxCommitDuration} = profilingCache.getInteractionsChartData({
-    rootID: ((rootID: any): number),
-  });
-
-  const viewCommit = (commitIndex: number) => {
-    selectTab('flame-chart');
-    selectCommitIndex(commitIndex);
-  };
-
-  const listItems: Array<React$Node> = [];
-  const commitIndices = interactionCommits.get(selectedInteractionID);
-  if (commitIndices != null) {
-    commitIndices.forEach(commitIndex => {
-      const {duration, timestamp} = profilerStore.getCommitData(
-        ((rootID: any): number),
-        commitIndex,
-      );
-
-      listItems.push(
-        <li
-          key={commitIndex}
-          className={styles.ListItem}
-          onClick={() => viewCommit(commitIndex)}>
-          <div
-            className={styles.CommitBox}
-            style={{
-              backgroundColor: getGradientColor(
-                Math.min(1, Math.max(0, duration / maxCommitDuration)) || 0,
-              ),
-            }}
-          />
-          <div>
-            timestamp: {formatTime(timestamp)}s
-            <br />
-            duration: {formatDuration(duration)}ms
-          </div>
-        </li>,
-      );
-    });
-  }
-
-  return (
-    <Fragment>
-      <div className={styles.Toolbar}>
-        <div className={styles.Name} title={interaction.name}>
-          {interaction.name}
-        </div>
-      </div>
-      <div className={styles.Content}>
-        <div className={styles.Commits}>Commits:</div>
-        <ul className={styles.List}>{listItems}</ul>
-      </div>
-    </Fragment>
-  );
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js b/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js
index fd6b4365f23a..547642620afe 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/constants.js
@@ -8,7 +8,5 @@
  */
 
 export const barWidthThreshold = 2;
-export const interactionCommitSize = 10;
-export const interactionLabelWidth = 200;
 export const maxBarWidth = 30;
 export const minBarWidth = 5;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index 90c56b3529be..c3889d47c2b3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -26,12 +26,6 @@ export type CommitTree = {|
   rootID: number,
 |};
 
-export type Interaction = {|
-  id: number,
-  name: string,
-  timestamp: number,
-|};
-
 export type SnapshotNode = {|
   id: number,
   children: Array<number>,
@@ -69,9 +63,6 @@ export type CommitDataFrontend = {|
   // Fibers that did not render will not have entries in this Map.
   fiberSelfDurations: Map<number, number>,
 
-  // Which interactions (IDs) were associated with this commit.
-  interactionIDs: Array<number>,
-
   // How long was the passive commit phase?
   // Note that not all builds of React expose this property.
   passiveEffectDuration: number | null,
@@ -98,12 +89,6 @@ export type ProfilingDataForRootFrontend = {|
   // This info can be used along with commitOperations to reconstruct the tree for any commit.
   initialTreeBaseDurations: Map<number, number>,
 
-  // All interactions recorded (for this root) during the current session.
-  interactionCommits: Map<number, Array<number>>,
-
-  // All interactions recorded (for this root) during the current session.
-  interactions: Map<number, Interaction>,
-
   // List of tree mutation that occur during profiling.
   // These mutations can be used along with initial snapshots to reconstruct the tree for any commit.
   operations: Array<Array<number>>,
@@ -131,7 +116,6 @@ export type CommitDataExport = {|
   fiberActualDurations: Array<[number, number]>,
   // Tuple of fiber ID and computed "self" duration
   fiberSelfDurations: Array<[number, number]>,
-  interactionIDs: Array<number>,
   passiveEffectDuration: number | null,
   priorityLevel: string | null,
   timestamp: number,
@@ -143,9 +127,6 @@ export type ProfilingDataForRootExport = {|
   displayName: string,
   // Tuple of Fiber ID and base duration
   initialTreeBaseDurations: Array<[number, number]>,
-  // Tuple of Interaction ID and commit indices
-  interactionCommits: Array<[number, Array<number>]>,
-  interactions: Array<[number, Interaction]>,
   operations: Array<Array<number>>,
   rootID: number,
   snapshots: Array<[number, SnapshotNode]>,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index cace5aaf2ddb..2594f255afa2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -43,14 +43,7 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
 
   dataBackends.forEach(dataBackend => {
     dataBackend.dataForRoots.forEach(
-      ({
-        commitData,
-        displayName,
-        initialTreeBaseDurations,
-        interactionCommits,
-        interactions,
-        rootID,
-      }) => {
+      ({commitData, displayName, initialTreeBaseDurations, rootID}) => {
         const operations = operationsByRootID.get(rootID);
         if (operations == null) {
           throw Error(
@@ -66,12 +59,7 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
         }
 
         // Do not filter empty commits from the profiler data!
-        // We used to do this, but it was error prone (see #18798).
-        // A commit may appear to be empty (no actual durations) because of component filters,
-        // but filtering these empty commits causes interaction commit indices to be off by N.
-        // This not only corrupts the resulting data, but also potentially causes runtime errors.
-        //
-        // For that matter, hiding "empty" commits might cause confusion too.
+        // 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) => ({
@@ -85,7 +73,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
               commitDataBackend.fiberActualDurations,
             ),
             fiberSelfDurations: new Map(commitDataBackend.fiberSelfDurations),
-            interactionIDs: commitDataBackend.interactionIDs,
             passiveEffectDuration: commitDataBackend.passiveEffectDuration,
             priorityLevel: commitDataBackend.priorityLevel,
             timestamp: commitDataBackend.timestamp,
@@ -113,8 +100,6 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
           commitData: convertedCommitData,
           displayName,
           initialTreeBaseDurations: new Map(initialTreeBaseDurations),
-          interactionCommits: new Map(interactionCommits),
-          interactions: new Map(interactions),
           operations,
           rootID,
           snapshots,
@@ -144,8 +129,6 @@ export function prepareProfilingDataFrontendFromExport(
       commitData,
       displayName,
       initialTreeBaseDurations,
-      interactionCommits,
-      interactions,
       operations,
       rootID,
       snapshots,
@@ -158,7 +141,6 @@ export function prepareProfilingDataFrontendFromExport(
             effectDuration,
             fiberActualDurations,
             fiberSelfDurations,
-            interactionIDs,
             passiveEffectDuration,
             priorityLevel,
             timestamp,
@@ -170,7 +152,6 @@ export function prepareProfilingDataFrontendFromExport(
             effectDuration,
             fiberActualDurations: new Map(fiberActualDurations),
             fiberSelfDurations: new Map(fiberSelfDurations),
-            interactionIDs,
             passiveEffectDuration,
             priorityLevel,
             timestamp,
@@ -179,8 +160,6 @@ export function prepareProfilingDataFrontendFromExport(
         ),
         displayName,
         initialTreeBaseDurations: new Map(initialTreeBaseDurations),
-        interactionCommits: new Map(interactionCommits),
-        interactions: new Map(interactions),
         operations,
         rootID,
         snapshots: new Map(snapshots),
@@ -201,8 +180,6 @@ export function prepareProfilingDataExport(
       commitData,
       displayName,
       initialTreeBaseDurations,
-      interactionCommits,
-      interactions,
       operations,
       rootID,
       snapshots,
@@ -215,7 +192,6 @@ export function prepareProfilingDataExport(
             effectDuration,
             fiberActualDurations,
             fiberSelfDurations,
-            interactionIDs,
             passiveEffectDuration,
             priorityLevel,
             timestamp,
@@ -229,7 +205,6 @@ export function prepareProfilingDataExport(
             effectDuration,
             fiberActualDurations: Array.from(fiberActualDurations.entries()),
             fiberSelfDurations: Array.from(fiberSelfDurations.entries()),
-            interactionIDs,
             passiveEffectDuration,
             priorityLevel,
             timestamp,
@@ -240,8 +215,6 @@ export function prepareProfilingDataExport(
         initialTreeBaseDurations: Array.from(
           initialTreeBaseDurations.entries(),
         ),
-        interactionCommits: Array.from(interactionCommits.entries()),
-        interactions: Array.from(interactions.entries()),
         operations,
         rootID,
         snapshots: Array.from(snapshots.entries()),
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index e703e011843e..6d03a9519a23 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -211,8 +211,4 @@
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-
-  /* Constant values shared between JS and CSS */
-  --interaction-commit-size: 10px;
-  --interaction-label-width: 200px;
 }
diff --git a/packages/react-devtools-shell/src/app/InteractionTracing/index.js b/packages/react-devtools-shell/src/app/InteractionTracing/index.js
deleted file mode 100644
index aab8e77e9091..000000000000
--- a/packages/react-devtools-shell/src/app/InteractionTracing/index.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {
-  Fragment,
-  useCallback,
-  useLayoutEffect,
-  useEffect,
-  useState,
-} from 'react';
-import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
-import {
-  unstable_trace as trace,
-  unstable_wrap as wrap,
-} from 'scheduler/tracing';
-
-function sleep(ms) {
-  const start = performance.now();
-  let now;
-  do {
-    now = performance.now();
-  } while (now - ms < start);
-}
-
-export default function InteractionTracing() {
-  const [count, setCount] = useState(0);
-  const [shouldCascade, setShouldCascade] = useState(false);
-
-  const handleUpdate = useCallback(() => {
-    trace('count', performance.now(), () => {
-      setTimeout(
-        wrap(() => {
-          setCount(count + 1);
-        }),
-        count * 100,
-      );
-    });
-  }, [count]);
-
-  const handleCascadingUpdate = useCallback(() => {
-    trace('cascade', performance.now(), () => {
-      setTimeout(
-        wrap(() => {
-          batchedUpdates(() => {
-            setCount(count + 1);
-            setShouldCascade(true);
-          });
-        }),
-        count * 100,
-      );
-    });
-  }, [count]);
-
-  const handleMultiple = useCallback(() => {
-    trace('first', performance.now(), () => {
-      trace('second', performance.now(), () => {
-        setTimeout(
-          wrap(() => {
-            setCount(count + 1);
-          }),
-          count * 100,
-        );
-      });
-    });
-  }, [count]);
-
-  useEffect(() => {
-    if (shouldCascade) {
-      setTimeout(
-        wrap(() => {
-          setShouldCascade(false);
-        }),
-        count * 100,
-      );
-    }
-  }, [count, shouldCascade]);
-
-  useLayoutEffect(() => {
-    sleep(150);
-  });
-
-  useEffect(() => {
-    sleep(300);
-  });
-
-  return (
-    <Fragment>
-      <h1>Interaction Tracing</h1>
-      <button onClick={handleUpdate}>Update ({count})</button>
-      <button onClick={handleCascadingUpdate}>
-        Cascading Update ({count}, {shouldCascade ? 'true' : 'false'})
-      </button>
-      <button onClick={handleMultiple}>Multiple</button>
-    </Fragment>
-  );
-}
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index f5683b69a82f..51f00c75a5e7 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -14,7 +14,6 @@ import ElementTypes from './ElementTypes';
 import Hydration from './Hydration';
 import InlineWarnings from './InlineWarnings';
 import InspectableElements from './InspectableElements';
-import InteractionTracing from './InteractionTracing';
 import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
@@ -48,7 +47,6 @@ function mountHelper(App) {
 
 function mountTestApp() {
   mountHelper(ToDoList);
-  mountHelper(InteractionTracing);
   mountHelper(InspectableElements);
   mountHelper(Hydration);
   mountHelper(ElementTypes);
diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index ee73da31c64a..0c8d47da26eb 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -286,7 +286,6 @@ When profiling begins, the frontend takes a snapshot/copy of each root. This sna
 When profiling begins, the backend records the base durations of each fiber currently in the tree. While profiling is in progress, the backend also stores some information about each commit, including:
 * Commit time and duration
 * Which elements were rendered during that commit
-* Which interactions (if any) were part of the commit
 * Which props and state changed (if enabled in profiler settings)
 
 This information will eventually be required by the frontend in order to render its profiling graphs, but it will not be sent across the bridge until profiling has completed (to minimize the performance impact of profiling).
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 242743d2f373..6ce9981fde92 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -10,7 +10,6 @@
 let React;
 let ReactDOM;
 let ReactTestUtils;
-let SchedulerTracing;
 let Scheduler;
 let act;
 let container;
@@ -119,7 +118,6 @@ function runActTests(label, render, unmount, rerender) {
       React = require('react');
       ReactDOM = require('react-dom');
       ReactTestUtils = require('react-dom/test-utils');
-      SchedulerTracing = require('scheduler/tracing');
       Scheduler = require('scheduler');
       act = ReactTestUtils.act;
       container = document.createElement('div');
@@ -497,87 +495,6 @@ function runActTests(label, render, unmount, rerender) {
       });
     });
 
-    describe('interaction tracing', () => {
-      if (__DEV__) {
-        it('should correctly trace interactions for sync roots', () => {
-          let expectedInteraction;
-
-          const Component = jest.fn(() => {
-            expect(expectedInteraction).toBeDefined();
-
-            const interactions = SchedulerTracing.unstable_getCurrent();
-            expect(interactions.size).toBe(1);
-            expect(interactions).toContain(expectedInteraction);
-
-            return null;
-          });
-
-          act(() => {
-            SchedulerTracing.unstable_trace(
-              'mount traced inside act',
-              performance.now(),
-              () => {
-                const interactions = SchedulerTracing.unstable_getCurrent();
-                expect(interactions.size).toBe(1);
-                expectedInteraction = Array.from(interactions)[0];
-
-                render(<Component />, container);
-              },
-            );
-          });
-
-          act(() => {
-            SchedulerTracing.unstable_trace(
-              'update traced inside act',
-              performance.now(),
-              () => {
-                const interactions = SchedulerTracing.unstable_getCurrent();
-                expect(interactions.size).toBe(1);
-                expectedInteraction = Array.from(interactions)[0];
-
-                rerender(<Component />);
-              },
-            );
-          });
-
-          const secondContainer = document.createElement('div');
-
-          SchedulerTracing.unstable_trace(
-            'mount traced outside act',
-            performance.now(),
-            () => {
-              act(() => {
-                const interactions = SchedulerTracing.unstable_getCurrent();
-                expect(interactions.size).toBe(1);
-                expectedInteraction = Array.from(interactions)[0];
-
-                render(<Component />, secondContainer);
-              });
-            },
-          );
-
-          SchedulerTracing.unstable_trace(
-            'update traced outside act',
-            performance.now(),
-            () => {
-              act(() => {
-                const interactions = SchedulerTracing.unstable_getCurrent();
-                expect(interactions.size).toBe(1);
-                expectedInteraction = Array.from(interactions)[0];
-
-                rerender(<Component />);
-              });
-            },
-          );
-
-          expect(Component).toHaveBeenCalledTimes(
-            label === 'legacy mode' ? 4 : 8,
-          );
-          unmount(secondContainer);
-        });
-      }
-    });
-
     describe('error propagation', () => {
       it('propagates errors - sync', () => {
         let err;
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index f876158b6718..28dd03158b7e 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -1684,84 +1684,4 @@ describe('ReactUpdates', () => {
       expect(container.textContent).toBe('1000');
     });
   }
-
-  if (__DEV__) {
-    it('should properly trace interactions within batched updates', () => {
-      const SchedulerTracing = require('scheduler/tracing');
-
-      let expectedInteraction;
-
-      const container = document.createElement('div');
-
-      const Component = jest.fn(() => {
-        expect(expectedInteraction).toBeDefined();
-
-        const interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions.size).toBe(1);
-        expect(interactions).toContain(expectedInteraction);
-
-        return null;
-      });
-
-      ReactDOM.unstable_batchedUpdates(() => {
-        SchedulerTracing.unstable_trace(
-          'mount traced inside a batched update',
-          1,
-          () => {
-            const interactions = SchedulerTracing.unstable_getCurrent();
-            expect(interactions.size).toBe(1);
-            expectedInteraction = Array.from(interactions)[0];
-
-            ReactDOM.render(<Component />, container);
-          },
-        );
-      });
-
-      ReactDOM.unstable_batchedUpdates(() => {
-        SchedulerTracing.unstable_trace(
-          'update traced inside a batched update',
-          2,
-          () => {
-            const interactions = SchedulerTracing.unstable_getCurrent();
-            expect(interactions.size).toBe(1);
-            expectedInteraction = Array.from(interactions)[0];
-
-            ReactDOM.render(<Component />, container);
-          },
-        );
-      });
-
-      const secondContainer = document.createElement('div');
-
-      SchedulerTracing.unstable_trace(
-        'mount traced outside a batched update',
-        3,
-        () => {
-          ReactDOM.unstable_batchedUpdates(() => {
-            const interactions = SchedulerTracing.unstable_getCurrent();
-            expect(interactions.size).toBe(1);
-            expectedInteraction = Array.from(interactions)[0];
-
-            ReactDOM.render(<Component />, secondContainer);
-          });
-        },
-      );
-
-      SchedulerTracing.unstable_trace(
-        'update traced outside a batched update',
-        4,
-        () => {
-          ReactDOM.unstable_batchedUpdates(() => {
-            const interactions = SchedulerTracing.unstable_getCurrent();
-            expect(interactions.size).toBe(1);
-            expectedInteraction = Array.from(interactions)[0];
-
-            ReactDOM.render(<Component />, container);
-          });
-        },
-      );
-
-      expect(Component).toHaveBeenCalledTimes(4);
-    });
-  }
 });
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 325fbac1f28d..2dfc6766577f 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -78,7 +78,6 @@ import {
   disableModulePatternComponents,
   enableProfilerCommitHooks,
   enableProfilerTimer,
-  enableSchedulerTracing,
   enableSuspenseServerRenderer,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
@@ -200,7 +199,6 @@ import {
   isSimpleFunctionComponent,
 } from './ReactFiber.new';
 import {
-  markSpawnedWork,
   retryDehydratedSuspenseBoundary,
   scheduleUpdateOnFiber,
   renderDidSuspendDelayIfPossible,
@@ -211,7 +209,6 @@ import {
   RetryAfterError,
   NoContext,
 } from './ReactFiberWorkLoop.new';
-import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {
   requestCacheFromPool,
@@ -635,9 +632,6 @@ function updateOffscreenComponent(
       }
 
       // Schedule this fiber to re-render at offscreen priority. Then bailout.
-      if (enableSchedulerTracing) {
-        markSpawnedWork((OffscreenLane: Lane));
-      }
       workInProgress.lanes = workInProgress.childLanes = laneToLanes(
         OffscreenLane,
       );
@@ -1939,9 +1933,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // RetryLane even if it's the one currently rendering since we're leaving
       // it behind on this node.
       workInProgress.lanes = SomeRetryLane;
-      if (enableSchedulerTracing) {
-        markSpawnedWork(SomeRetryLane);
-      }
       return fallbackFragment;
     } else {
       return mountSuspensePrimaryChildren(
@@ -2397,17 +2388,11 @@ function mountDehydratedSuspenseComponent(
     // time. This will mean that Suspense timeouts are slightly shifted to later than
     // they should be.
     // Schedule a normal pri update to render this content.
-    if (enableSchedulerTracing) {
-      markSpawnedWork(DefaultHydrationLane);
-    }
     workInProgress.lanes = laneToLanes(DefaultHydrationLane);
   } 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);
-    if (enableSchedulerTracing) {
-      markSpawnedWork(OffscreenLane);
-    }
   }
   return null;
 }
@@ -2520,10 +2505,7 @@ function updateDehydratedSuspenseComponent(
     // Leave the child in place. I.e. the dehydrated fragment.
     workInProgress.child = current.child;
     // Register a callback to retry this boundary once the server has sent the result.
-    let retry = retryDehydratedSuspenseBoundary.bind(null, current);
-    if (enableSchedulerTracing) {
-      retry = Schedule_tracing_wrap(retry);
-    }
+    const retry = retryDehydratedSuspenseBoundary.bind(null, current);
     registerSuspenseInstanceRetry(suspenseInstance, retry);
     return null;
   } else {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 9cac49a046bd..7c9df820b98c 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -78,7 +78,6 @@ import {
   disableModulePatternComponents,
   enableProfilerCommitHooks,
   enableProfilerTimer,
-  enableSchedulerTracing,
   enableSuspenseServerRenderer,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
@@ -200,7 +199,6 @@ import {
   isSimpleFunctionComponent,
 } from './ReactFiber.old';
 import {
-  markSpawnedWork,
   retryDehydratedSuspenseBoundary,
   scheduleUpdateOnFiber,
   renderDidSuspendDelayIfPossible,
@@ -211,7 +209,6 @@ import {
   RetryAfterError,
   NoContext,
 } from './ReactFiberWorkLoop.old';
-import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {
   requestCacheFromPool,
@@ -635,9 +632,6 @@ function updateOffscreenComponent(
       }
 
       // Schedule this fiber to re-render at offscreen priority. Then bailout.
-      if (enableSchedulerTracing) {
-        markSpawnedWork((OffscreenLane: Lane));
-      }
       workInProgress.lanes = workInProgress.childLanes = laneToLanes(
         OffscreenLane,
       );
@@ -1939,9 +1933,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // RetryLane even if it's the one currently rendering since we're leaving
       // it behind on this node.
       workInProgress.lanes = SomeRetryLane;
-      if (enableSchedulerTracing) {
-        markSpawnedWork(SomeRetryLane);
-      }
       return fallbackFragment;
     } else {
       return mountSuspensePrimaryChildren(
@@ -2397,17 +2388,11 @@ function mountDehydratedSuspenseComponent(
     // time. This will mean that Suspense timeouts are slightly shifted to later than
     // they should be.
     // Schedule a normal pri update to render this content.
-    if (enableSchedulerTracing) {
-      markSpawnedWork(DefaultHydrationLane);
-    }
     workInProgress.lanes = laneToLanes(DefaultHydrationLane);
   } 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);
-    if (enableSchedulerTracing) {
-      markSpawnedWork(OffscreenLane);
-    }
   }
   return null;
 }
@@ -2520,10 +2505,7 @@ function updateDehydratedSuspenseComponent(
     // Leave the child in place. I.e. the dehydrated fragment.
     workInProgress.child = current.child;
     // Register a callback to retry this boundary once the server has sent the result.
-    let retry = retryDehydratedSuspenseBoundary.bind(null, current);
-    if (enableSchedulerTracing) {
-      retry = Schedule_tracing_wrap(retry);
-    }
+    const retry = retryDehydratedSuspenseBoundary.bind(null, current);
     registerSuspenseInstanceRetry(suspenseInstance, retry);
     return null;
   } else {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 1e1a3f0b9845..46f19294562c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -25,9 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 
-import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
-  enableSchedulerTracing,
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
@@ -641,17 +639,7 @@ export function commitPassiveEffectDurations(
           }
 
           if (typeof onPostCommit === 'function') {
-            if (enableSchedulerTracing) {
-              onPostCommit(
-                id,
-                phase,
-                passiveEffectDuration,
-                commitTime,
-                finishedRoot.memoizedInteractions,
-              );
-            } else {
-              onPostCommit(id, phase, passiveEffectDuration, commitTime);
-            }
+            onPostCommit(id, phase, passiveEffectDuration, commitTime);
           }
 
           // Bubble times to the next nearest ancestor Profiler.
@@ -919,46 +907,24 @@ function commitLayoutEffectOnFiber(
           }
 
           if (typeof onRender === 'function') {
-            if (enableSchedulerTracing) {
-              onRender(
-                finishedWork.memoizedProps.id,
-                phase,
-                finishedWork.actualDuration,
-                finishedWork.treeBaseDuration,
-                finishedWork.actualStartTime,
-                commitTime,
-                finishedRoot.memoizedInteractions,
-              );
-            } else {
-              onRender(
-                finishedWork.memoizedProps.id,
-                phase,
-                finishedWork.actualDuration,
-                finishedWork.treeBaseDuration,
-                finishedWork.actualStartTime,
-                commitTime,
-              );
-            }
+            onRender(
+              finishedWork.memoizedProps.id,
+              phase,
+              finishedWork.actualDuration,
+              finishedWork.treeBaseDuration,
+              finishedWork.actualStartTime,
+              commitTime,
+            );
           }
 
           if (enableProfilerCommitHooks) {
             if (typeof onCommit === 'function') {
-              if (enableSchedulerTracing) {
-                onCommit(
-                  finishedWork.memoizedProps.id,
-                  phase,
-                  effectDuration,
-                  commitTime,
-                  finishedRoot.memoizedInteractions,
-                );
-              } else {
-                onCommit(
-                  finishedWork.memoizedProps.id,
-                  phase,
-                  effectDuration,
-                  commitTime,
-                );
-              }
+              onCommit(
+                finishedWork.memoizedProps.id,
+                phase,
+                effectDuration,
+                commitTime,
+              );
             }
 
             // Schedule a passive effect for this Profiler to call onPostCommit hooks.
@@ -2105,13 +2071,8 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
     }
     wakeables.forEach(wakeable => {
       // Memoize using the boundary fiber to prevent redundant listeners.
-      let retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
+      const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
       if (!retryCache.has(wakeable)) {
-        if (enableSchedulerTracing) {
-          if (wakeable.__reactDoNotTraceInteractions !== true) {
-            retry = Schedule_tracing_wrap(retry);
-          }
-        }
         retryCache.add(wakeable);
 
         if (enableUpdaterTracking) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index f631c0131aff..f45a44083e23 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -25,9 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 
-import {unstable_wrap as Schedule_tracing_wrap} from 'scheduler/tracing';
 import {
-  enableSchedulerTracing,
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
@@ -641,17 +639,7 @@ export function commitPassiveEffectDurations(
           }
 
           if (typeof onPostCommit === 'function') {
-            if (enableSchedulerTracing) {
-              onPostCommit(
-                id,
-                phase,
-                passiveEffectDuration,
-                commitTime,
-                finishedRoot.memoizedInteractions,
-              );
-            } else {
-              onPostCommit(id, phase, passiveEffectDuration, commitTime);
-            }
+            onPostCommit(id, phase, passiveEffectDuration, commitTime);
           }
 
           // Bubble times to the next nearest ancestor Profiler.
@@ -919,46 +907,24 @@ function commitLayoutEffectOnFiber(
           }
 
           if (typeof onRender === 'function') {
-            if (enableSchedulerTracing) {
-              onRender(
-                finishedWork.memoizedProps.id,
-                phase,
-                finishedWork.actualDuration,
-                finishedWork.treeBaseDuration,
-                finishedWork.actualStartTime,
-                commitTime,
-                finishedRoot.memoizedInteractions,
-              );
-            } else {
-              onRender(
-                finishedWork.memoizedProps.id,
-                phase,
-                finishedWork.actualDuration,
-                finishedWork.treeBaseDuration,
-                finishedWork.actualStartTime,
-                commitTime,
-              );
-            }
+            onRender(
+              finishedWork.memoizedProps.id,
+              phase,
+              finishedWork.actualDuration,
+              finishedWork.treeBaseDuration,
+              finishedWork.actualStartTime,
+              commitTime,
+            );
           }
 
           if (enableProfilerCommitHooks) {
             if (typeof onCommit === 'function') {
-              if (enableSchedulerTracing) {
-                onCommit(
-                  finishedWork.memoizedProps.id,
-                  phase,
-                  effectDuration,
-                  commitTime,
-                  finishedRoot.memoizedInteractions,
-                );
-              } else {
-                onCommit(
-                  finishedWork.memoizedProps.id,
-                  phase,
-                  effectDuration,
-                  commitTime,
-                );
-              }
+              onCommit(
+                finishedWork.memoizedProps.id,
+                phase,
+                effectDuration,
+                commitTime,
+              );
             }
 
             // Schedule a passive effect for this Profiler to call onPostCommit hooks.
@@ -2105,13 +2071,8 @@ function attachSuspenseRetryListeners(finishedWork: Fiber) {
     }
     wakeables.forEach(wakeable => {
       // Memoize using the boundary fiber to prevent redundant listeners.
-      let retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
+      const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
       if (!retryCache.has(wakeable)) {
-        if (enableSchedulerTracing) {
-          if (wakeable.__reactDoNotTraceInteractions !== true) {
-            retry = Schedule_tracing_wrap(retry);
-          }
-        }
         retryCache.add(wakeable);
 
         if (enableUpdaterTracking) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index f366ccdf8839..e11e15bac8a6 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -118,7 +118,6 @@ import {
   getIsHydrating,
 } from './ReactFiberHydrationContext.new';
 import {
-  enableSchedulerTracing,
   enableSuspenseCallback,
   enableSuspenseServerRenderer,
   enableScopeAPI,
@@ -127,7 +126,6 @@ import {
   enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import {
-  markSpawnedWork,
   renderDidSuspend,
   renderDidSuspendDelayIfPossible,
   renderHasNotSuspendedYet,
@@ -981,9 +979,6 @@ function completeWork(
                 'This is probably a bug in React.',
             );
             prepareToHydrateHostSuspenseInstance(workInProgress);
-            if (enableSchedulerTracing) {
-              markSpawnedWork(OffscreenLane);
-            }
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
               if ((workInProgress.mode & ProfileMode) !== NoMode) {
@@ -1259,9 +1254,6 @@ function completeWork(
             // 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 (enableSchedulerTracing) {
-              markSpawnedWork(SomeRetryLane);
-            }
           }
         } else {
           cutOffTailIfNeeded(renderState, false);
@@ -1320,9 +1312,6 @@ function completeWork(
             // 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 (enableSchedulerTracing) {
-              markSpawnedWork(SomeRetryLane);
-            }
           }
         }
         if (renderState.isBackwards) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 8bfd7d3fe999..ba6200d364a3 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -118,7 +118,6 @@ import {
   getIsHydrating,
 } from './ReactFiberHydrationContext.old';
 import {
-  enableSchedulerTracing,
   enableSuspenseCallback,
   enableSuspenseServerRenderer,
   enableScopeAPI,
@@ -127,7 +126,6 @@ import {
   enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import {
-  markSpawnedWork,
   renderDidSuspend,
   renderDidSuspendDelayIfPossible,
   renderHasNotSuspendedYet,
@@ -981,9 +979,6 @@ function completeWork(
                 'This is probably a bug in React.',
             );
             prepareToHydrateHostSuspenseInstance(workInProgress);
-            if (enableSchedulerTracing) {
-              markSpawnedWork(OffscreenLane);
-            }
             bubbleProperties(workInProgress);
             if (enableProfilerTimer) {
               if ((workInProgress.mode & ProfileMode) !== NoMode) {
@@ -1259,9 +1254,6 @@ function completeWork(
             // 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 (enableSchedulerTracing) {
-              markSpawnedWork(SomeRetryLane);
-            }
           }
         } else {
           cutOffTailIfNeeded(renderState, false);
@@ -1320,9 +1312,6 @@ function completeWork(
             // 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 (enableSchedulerTracing) {
-              markSpawnedWork(SomeRetryLane);
-            }
           }
         }
         if (renderState.isBackwards) {
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 728769261cbe..e82262b5737e 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -20,14 +20,12 @@ import {
   createLaneMap,
 } from './ReactFiberLane.new';
 import {
-  enableSchedulerTracing,
   enableSuspenseCallback,
   enableCache,
   enableProfilerCommitHooks,
   enableProfilerTimer,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
-import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 
@@ -66,11 +64,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.mutableSourceEagerHydrationData = null;
   }
 
-  if (enableSchedulerTracing) {
-    this.interactionThreadID = unstable_getThreadID();
-    this.memoizedInteractions = new Set();
-    this.pendingInteractionMap = new Map();
-  }
   if (enableSuspenseCallback) {
     this.hydrationCallbacks = null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 7f338a4dbb21..20c3cdaa6cbf 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -20,14 +20,12 @@ import {
   createLaneMap,
 } from './ReactFiberLane.old';
 import {
-  enableSchedulerTracing,
   enableSuspenseCallback,
   enableCache,
   enableProfilerCommitHooks,
   enableProfilerTimer,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
-import {unstable_getThreadID} from 'scheduler/tracing';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 
@@ -66,11 +64,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.mutableSourceEagerHydrationData = null;
   }
 
-  if (enableSchedulerTracing) {
-    this.interactionThreadID = unstable_getThreadID();
-    this.memoizedInteractions = new Set();
-    this.pendingInteractionMap = new Map();
-  }
   if (enableSuspenseCallback) {
     this.hydrationCallbacks = null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ddf72f428dfd..0b15fb13a235 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -10,7 +10,6 @@
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
-import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
@@ -24,7 +23,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableProfilerNestedUpdateScheduledHook,
-  enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
@@ -83,8 +81,6 @@ import {
 // The scheduler is imported here *only* to detect whether it's been mocked
 import * as Scheduler from 'scheduler';
 
-import {__interactionsRef, __subscriberRef} from 'scheduler/tracing';
-
 import {
   resetAfterCommit,
   scheduleTimeout,
@@ -349,13 +345,6 @@ let rootWithNestedUpdates: FiberRoot | null = null;
 const NESTED_PASSIVE_UPDATE_LIMIT = 50;
 let nestedPassiveUpdateCount: number = 0;
 
-// Marks the need to reschedule pending interactions at these lanes
-// during the commit phase. This enables them to be traced across components
-// that spawn new work during render. E.g. hidden boundaries, suspended SSR
-// hydration or SuspenseList.
-// TODO: Can use a bitmask instead of an array
-let spawnedWorkDuringRender: null | Array<Lane | Lanes> = null;
-
 // If two updates are scheduled within the same event, we should treat their
 // event times as simultaneous, even if the actual clock time has advanced
 // between the first and second call.
@@ -496,11 +485,7 @@ export function scheduleUpdateOnFiber(
           if (current.tag === Profiler) {
             const {id, onNestedUpdateScheduled} = current.memoizedProps;
             if (typeof onNestedUpdateScheduled === 'function') {
-              if (enableSchedulerTracing) {
-                onNestedUpdateScheduled(id, root.memoizedInteractions);
-              } else {
-                onNestedUpdateScheduled(id);
-              }
+              onNestedUpdateScheduled(id);
             }
           }
           current = current.return;
@@ -543,16 +528,12 @@ export function scheduleUpdateOnFiber(
       // Check if we're not already rendering
       (executionContext & (RenderContext | CommitContext)) === NoContext
     ) {
-      // Register pending interactions on the root to avoid losing traced interaction data.
-      schedulePendingInteractions(root, lane);
-
       // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
       // root inside of batchedUpdates should be synchronous, but layout updates
       // should be deferred until the end of the batch.
       performSyncWorkOnRoot(root);
     } else {
       ensureRootIsScheduled(root, eventTime);
-      schedulePendingInteractions(root, lane);
       if (
         executionContext === NoContext &&
         (fiber.mode & ConcurrentMode) === NoMode
@@ -569,7 +550,6 @@ export function scheduleUpdateOnFiber(
   } else {
     // Schedule other updates after in case the callback is sync.
     ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, lane);
   }
 
   return root;
@@ -1269,10 +1249,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
 
   enqueueInterleavedUpdates();
 
-  if (enableSchedulerTracing) {
-    spawnedWorkDuringRender = null;
-  }
-
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
@@ -1357,21 +1333,6 @@ function popDispatcher(prevDispatcher) {
   ReactCurrentDispatcher.current = prevDispatcher;
 }
 
-function pushInteractions(root) {
-  if (enableSchedulerTracing) {
-    const prevInteractions: Set<Interaction> | null = __interactionsRef.current;
-    __interactionsRef.current = root.memoizedInteractions;
-    return prevInteractions;
-  }
-  return null;
-}
-
-function popInteractions(prevInteractions) {
-  if (enableSchedulerTracing) {
-    __interactionsRef.current = prevInteractions;
-  }
-}
-
 export function markCommitTimeOfFallback() {
   globalMostRecentFallbackTime = now();
 }
@@ -1454,11 +1415,8 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
     }
 
     prepareFreshStack(root, lanes);
-    startWorkOnPendingInteractions(root, lanes);
   }
 
-  const prevInteractions = pushInteractions(root);
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logRenderStarted(lanes);
@@ -1478,9 +1436,6 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
     }
   } while (true);
   resetContextDependencies();
-  if (enableSchedulerTracing) {
-    popInteractions(((prevInteractions: any): Set<Interaction>));
-  }
 
   executionContext = prevExecutionContext;
   popDispatcher(prevDispatcher);
@@ -1546,11 +1501,8 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
 
     resetRenderTimer();
     prepareFreshStack(root, lanes);
-    startWorkOnPendingInteractions(root, lanes);
   }
 
-  const prevInteractions = pushInteractions(root);
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logRenderStarted(lanes);
@@ -1570,9 +1522,6 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     }
   } while (true);
   resetContextDependencies();
-  if (enableSchedulerTracing) {
-    popInteractions(((prevInteractions: any): Set<Interaction>));
-  }
 
   popDispatcher(prevDispatcher);
   executionContext = prevExecutionContext;
@@ -1874,7 +1823,6 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     const prevExecutionContext = executionContext;
     executionContext |= CommitContext;
-    const prevInteractions = pushInteractions(root);
 
     // Reset this to null before calling lifecycles
     ReactCurrentOwner.current = null;
@@ -1947,9 +1895,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     // opportunity to paint.
     requestPaint();
 
-    if (enableSchedulerTracing) {
-      popInteractions(((prevInteractions: any): Set<Interaction>));
-    }
     executionContext = prevExecutionContext;
 
     // Reset the priority to the previous non-sync value.
@@ -1980,22 +1925,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   remainingLanes = root.pendingLanes;
 
   // Check if there's remaining work on this root
-  if (remainingLanes !== NoLanes) {
-    if (enableSchedulerTracing) {
-      if (spawnedWorkDuringRender !== null) {
-        const expirationTimes = spawnedWorkDuringRender;
-        spawnedWorkDuringRender = null;
-        for (let i = 0; i < expirationTimes.length; i++) {
-          scheduleInteractions(
-            root,
-            expirationTimes[i],
-            root.memoizedInteractions,
-          );
-        }
-      }
-      schedulePendingInteractions(root, remainingLanes);
-    }
-  } else {
+  if (remainingLanes === NoLanes) {
     // If there's no remaining work, we can clear the set of already failed
     // error boundaries.
     legacyErrorBoundariesThatAlreadyFailed = null;
@@ -2007,16 +1937,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  if (enableSchedulerTracing) {
-    if (!rootDidHavePassiveEffects) {
-      // If there are no passive effects, then we can complete the pending interactions.
-      // Otherwise, we'll wait until after the passive effects are flushed.
-      // Wait to do this until after remaining work has been scheduled,
-      // so that we don't prematurely signal complete for interactions when there's e.g. hidden work.
-      finishPendingInteractions(root, lanes);
-    }
-  }
-
   if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
     if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
       markNestedUpdateScheduled();
@@ -2177,7 +2097,6 @@ function flushPassiveEffectsImpl() {
 
   const prevExecutionContext = executionContext;
   executionContext |= CommitContext;
-  const prevInteractions = pushInteractions(root);
 
   commitPassiveUnmountEffects(root.current);
   commitPassiveMountEffects(root, root.current);
@@ -2192,11 +2111,6 @@ function flushPassiveEffectsImpl() {
     }
   }
 
-  if (enableSchedulerTracing) {
-    popInteractions(((prevInteractions: any): Set<Interaction>));
-    finishPendingInteractions(root, lanes);
-  }
-
   if (__DEV__) {
     isFlushingPassiveEffects = false;
   }
@@ -2271,7 +2185,6 @@ function captureCommitPhaseErrorOnRoot(
   if (root !== null) {
     markRootUpdated(root, SyncLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, SyncLane);
   }
 }
 
@@ -2318,7 +2231,6 @@ export function captureCommitPhaseError(
         if (root !== null) {
           markRootUpdated(root, SyncLane, eventTime);
           ensureRootIsScheduled(root, eventTime);
-          schedulePendingInteractions(root, SyncLane);
         }
         return;
       }
@@ -2390,7 +2302,6 @@ export function pingSuspendedRoot(
   }
 
   ensureRootIsScheduled(root, eventTime);
-  schedulePendingInteractions(root, pingedLanes);
 }
 
 function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
@@ -2409,7 +2320,6 @@ function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
   if (root !== null) {
     markRootUpdated(root, retryLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, retryLane);
   }
 }
 
@@ -3008,167 +2918,6 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
   }
 }
 
-function computeThreadID(root: FiberRoot, lane: Lane | Lanes) {
-  // Interaction threads are unique per root and expiration time.
-  // NOTE: Intentionally unsound cast. All that matters is that it's a number
-  // and it represents a batch of work. Could make a helper function instead,
-  // but meh this is fine for now.
-  return (lane: any) * 1000 + root.interactionThreadID;
-}
-
-export function markSpawnedWork(lane: Lane | Lanes) {
-  if (!enableSchedulerTracing) {
-    return;
-  }
-  if (spawnedWorkDuringRender === null) {
-    spawnedWorkDuringRender = [lane];
-  } else {
-    spawnedWorkDuringRender.push(lane);
-  }
-}
-
-function scheduleInteractions(
-  root: FiberRoot,
-  lane: Lane | Lanes,
-  interactions: Set<Interaction>,
-) {
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  if (interactions.size > 0) {
-    const pendingInteractionMap = root.pendingInteractionMap;
-    const pendingInteractions = pendingInteractionMap.get(lane);
-    if (pendingInteractions != null) {
-      interactions.forEach(interaction => {
-        if (!pendingInteractions.has(interaction)) {
-          // Update the pending async work count for previously unscheduled interaction.
-          interaction.__count++;
-        }
-
-        pendingInteractions.add(interaction);
-      });
-    } else {
-      pendingInteractionMap.set(lane, new Set(interactions));
-
-      // Update the pending async work count for the current interactions.
-      interactions.forEach(interaction => {
-        interaction.__count++;
-      });
-    }
-
-    const subscriber = __subscriberRef.current;
-    if (subscriber !== null) {
-      const threadID = computeThreadID(root, lane);
-      subscriber.onWorkScheduled(interactions, threadID);
-    }
-  }
-}
-
-function schedulePendingInteractions(root: FiberRoot, lane: Lane | Lanes) {
-  // This is called when work is scheduled on a root.
-  // It associates the current interactions with the newly-scheduled expiration.
-  // They will be restored when that expiration is later committed.
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  scheduleInteractions(root, lane, __interactionsRef.current);
-}
-
-function startWorkOnPendingInteractions(root: FiberRoot, lanes: Lanes) {
-  // This is called when new work is started on a root.
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  // Determine which interactions this batch of work currently includes, So that
-  // we can accurately attribute time spent working on it, And so that cascading
-  // work triggered during the render phase will be associated with it.
-  const interactions: Set<Interaction> = new Set();
-  root.pendingInteractionMap.forEach((scheduledInteractions, scheduledLane) => {
-    if (includesSomeLane(lanes, scheduledLane)) {
-      scheduledInteractions.forEach(interaction =>
-        interactions.add(interaction),
-      );
-    }
-  });
-
-  // Store the current set of interactions on the FiberRoot for a few reasons:
-  // We can re-use it in hot functions like performConcurrentWorkOnRoot()
-  // without having to recalculate it. We will also use it in commitWork() to
-  // pass to any Profiler onRender() hooks. This also provides DevTools with a
-  // way to access it when the onCommitRoot() hook is called.
-  root.memoizedInteractions = interactions;
-
-  if (interactions.size > 0) {
-    const subscriber = __subscriberRef.current;
-    if (subscriber !== null) {
-      const threadID = computeThreadID(root, lanes);
-      try {
-        subscriber.onWorkStarted(interactions, threadID);
-      } catch (error) {
-        // If the subscriber throws, rethrow it in a separate task
-        scheduleCallback(ImmediateSchedulerPriority, () => {
-          throw error;
-        });
-      }
-    }
-  }
-}
-
-function finishPendingInteractions(root, committedLanes) {
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  const remainingLanesAfterCommit = root.pendingLanes;
-
-  let subscriber;
-
-  try {
-    subscriber = __subscriberRef.current;
-    if (subscriber !== null && root.memoizedInteractions.size > 0) {
-      // FIXME: More than one lane can finish in a single commit.
-      const threadID = computeThreadID(root, committedLanes);
-      subscriber.onWorkStopped(root.memoizedInteractions, threadID);
-    }
-  } catch (error) {
-    // If the subscriber throws, rethrow it in a separate task
-    scheduleCallback(ImmediateSchedulerPriority, () => {
-      throw error;
-    });
-  } finally {
-    // Clear completed interactions from the pending Map.
-    // Unless the render was suspended or cascading work was scheduled,
-    // In which case– leave pending interactions until the subsequent render.
-    const pendingInteractionMap = root.pendingInteractionMap;
-    pendingInteractionMap.forEach((scheduledInteractions, lane) => {
-      // Only decrement the pending interaction count if we're done.
-      // If there's still work at the current priority,
-      // That indicates that we are waiting for suspense data.
-      if (!includesSomeLane(remainingLanesAfterCommit, lane)) {
-        pendingInteractionMap.delete(lane);
-
-        scheduledInteractions.forEach(interaction => {
-          interaction.__count--;
-
-          if (subscriber !== null && interaction.__count === 0) {
-            try {
-              subscriber.onInteractionScheduledWorkCompleted(interaction);
-            } catch (error) {
-              // If the subscriber throws, rethrow it in a separate task
-              scheduleCallback(ImmediateSchedulerPriority, () => {
-                throw error;
-              });
-            }
-          }
-        });
-      }
-    });
-  }
-}
-
 // `act` testing API
 //
 // TODO: This is mostly a copy-paste from the legacy `act`, which does not have
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 3b0b196e112c..7b03e4cc743d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -10,7 +10,6 @@
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
-import type {Interaction} from 'scheduler/src/Tracing';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
@@ -24,7 +23,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableProfilerNestedUpdateScheduledHook,
-  enableSchedulerTracing,
   warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
@@ -83,8 +81,6 @@ import {
 // The scheduler is imported here *only* to detect whether it's been mocked
 import * as Scheduler from 'scheduler';
 
-import {__interactionsRef, __subscriberRef} from 'scheduler/tracing';
-
 import {
   resetAfterCommit,
   scheduleTimeout,
@@ -349,13 +345,6 @@ let rootWithNestedUpdates: FiberRoot | null = null;
 const NESTED_PASSIVE_UPDATE_LIMIT = 50;
 let nestedPassiveUpdateCount: number = 0;
 
-// Marks the need to reschedule pending interactions at these lanes
-// during the commit phase. This enables them to be traced across components
-// that spawn new work during render. E.g. hidden boundaries, suspended SSR
-// hydration or SuspenseList.
-// TODO: Can use a bitmask instead of an array
-let spawnedWorkDuringRender: null | Array<Lane | Lanes> = null;
-
 // If two updates are scheduled within the same event, we should treat their
 // event times as simultaneous, even if the actual clock time has advanced
 // between the first and second call.
@@ -496,11 +485,7 @@ export function scheduleUpdateOnFiber(
           if (current.tag === Profiler) {
             const {id, onNestedUpdateScheduled} = current.memoizedProps;
             if (typeof onNestedUpdateScheduled === 'function') {
-              if (enableSchedulerTracing) {
-                onNestedUpdateScheduled(id, root.memoizedInteractions);
-              } else {
-                onNestedUpdateScheduled(id);
-              }
+              onNestedUpdateScheduled(id);
             }
           }
           current = current.return;
@@ -543,16 +528,12 @@ export function scheduleUpdateOnFiber(
       // Check if we're not already rendering
       (executionContext & (RenderContext | CommitContext)) === NoContext
     ) {
-      // Register pending interactions on the root to avoid losing traced interaction data.
-      schedulePendingInteractions(root, lane);
-
       // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
       // root inside of batchedUpdates should be synchronous, but layout updates
       // should be deferred until the end of the batch.
       performSyncWorkOnRoot(root);
     } else {
       ensureRootIsScheduled(root, eventTime);
-      schedulePendingInteractions(root, lane);
       if (
         executionContext === NoContext &&
         (fiber.mode & ConcurrentMode) === NoMode
@@ -569,7 +550,6 @@ export function scheduleUpdateOnFiber(
   } else {
     // Schedule other updates after in case the callback is sync.
     ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, lane);
   }
 
   return root;
@@ -1269,10 +1249,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
 
   enqueueInterleavedUpdates();
 
-  if (enableSchedulerTracing) {
-    spawnedWorkDuringRender = null;
-  }
-
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
@@ -1357,21 +1333,6 @@ function popDispatcher(prevDispatcher) {
   ReactCurrentDispatcher.current = prevDispatcher;
 }
 
-function pushInteractions(root) {
-  if (enableSchedulerTracing) {
-    const prevInteractions: Set<Interaction> | null = __interactionsRef.current;
-    __interactionsRef.current = root.memoizedInteractions;
-    return prevInteractions;
-  }
-  return null;
-}
-
-function popInteractions(prevInteractions) {
-  if (enableSchedulerTracing) {
-    __interactionsRef.current = prevInteractions;
-  }
-}
-
 export function markCommitTimeOfFallback() {
   globalMostRecentFallbackTime = now();
 }
@@ -1454,11 +1415,8 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
     }
 
     prepareFreshStack(root, lanes);
-    startWorkOnPendingInteractions(root, lanes);
   }
 
-  const prevInteractions = pushInteractions(root);
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logRenderStarted(lanes);
@@ -1478,9 +1436,6 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
     }
   } while (true);
   resetContextDependencies();
-  if (enableSchedulerTracing) {
-    popInteractions(((prevInteractions: any): Set<Interaction>));
-  }
 
   executionContext = prevExecutionContext;
   popDispatcher(prevDispatcher);
@@ -1546,11 +1501,8 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
 
     resetRenderTimer();
     prepareFreshStack(root, lanes);
-    startWorkOnPendingInteractions(root, lanes);
   }
 
-  const prevInteractions = pushInteractions(root);
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logRenderStarted(lanes);
@@ -1570,9 +1522,6 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     }
   } while (true);
   resetContextDependencies();
-  if (enableSchedulerTracing) {
-    popInteractions(((prevInteractions: any): Set<Interaction>));
-  }
 
   popDispatcher(prevDispatcher);
   executionContext = prevExecutionContext;
@@ -1874,7 +1823,6 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     const prevExecutionContext = executionContext;
     executionContext |= CommitContext;
-    const prevInteractions = pushInteractions(root);
 
     // Reset this to null before calling lifecycles
     ReactCurrentOwner.current = null;
@@ -1947,9 +1895,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     // opportunity to paint.
     requestPaint();
 
-    if (enableSchedulerTracing) {
-      popInteractions(((prevInteractions: any): Set<Interaction>));
-    }
     executionContext = prevExecutionContext;
 
     // Reset the priority to the previous non-sync value.
@@ -1980,22 +1925,7 @@ function commitRootImpl(root, renderPriorityLevel) {
   remainingLanes = root.pendingLanes;
 
   // Check if there's remaining work on this root
-  if (remainingLanes !== NoLanes) {
-    if (enableSchedulerTracing) {
-      if (spawnedWorkDuringRender !== null) {
-        const expirationTimes = spawnedWorkDuringRender;
-        spawnedWorkDuringRender = null;
-        for (let i = 0; i < expirationTimes.length; i++) {
-          scheduleInteractions(
-            root,
-            expirationTimes[i],
-            root.memoizedInteractions,
-          );
-        }
-      }
-      schedulePendingInteractions(root, remainingLanes);
-    }
-  } else {
+  if (remainingLanes === NoLanes) {
     // If there's no remaining work, we can clear the set of already failed
     // error boundaries.
     legacyErrorBoundariesThatAlreadyFailed = null;
@@ -2007,16 +1937,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  if (enableSchedulerTracing) {
-    if (!rootDidHavePassiveEffects) {
-      // If there are no passive effects, then we can complete the pending interactions.
-      // Otherwise, we'll wait until after the passive effects are flushed.
-      // Wait to do this until after remaining work has been scheduled,
-      // so that we don't prematurely signal complete for interactions when there's e.g. hidden work.
-      finishPendingInteractions(root, lanes);
-    }
-  }
-
   if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
     if (enableProfilerTimer && enableProfilerNestedUpdatePhase) {
       markNestedUpdateScheduled();
@@ -2177,7 +2097,6 @@ function flushPassiveEffectsImpl() {
 
   const prevExecutionContext = executionContext;
   executionContext |= CommitContext;
-  const prevInteractions = pushInteractions(root);
 
   commitPassiveUnmountEffects(root.current);
   commitPassiveMountEffects(root, root.current);
@@ -2192,11 +2111,6 @@ function flushPassiveEffectsImpl() {
     }
   }
 
-  if (enableSchedulerTracing) {
-    popInteractions(((prevInteractions: any): Set<Interaction>));
-    finishPendingInteractions(root, lanes);
-  }
-
   if (__DEV__) {
     isFlushingPassiveEffects = false;
   }
@@ -2271,7 +2185,6 @@ function captureCommitPhaseErrorOnRoot(
   if (root !== null) {
     markRootUpdated(root, SyncLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, SyncLane);
   }
 }
 
@@ -2318,7 +2231,6 @@ export function captureCommitPhaseError(
         if (root !== null) {
           markRootUpdated(root, SyncLane, eventTime);
           ensureRootIsScheduled(root, eventTime);
-          schedulePendingInteractions(root, SyncLane);
         }
         return;
       }
@@ -2390,7 +2302,6 @@ export function pingSuspendedRoot(
   }
 
   ensureRootIsScheduled(root, eventTime);
-  schedulePendingInteractions(root, pingedLanes);
 }
 
 function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
@@ -2409,7 +2320,6 @@ function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
   if (root !== null) {
     markRootUpdated(root, retryLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
-    schedulePendingInteractions(root, retryLane);
   }
 }
 
@@ -3008,167 +2918,6 @@ export function warnIfUnmockedScheduler(fiber: Fiber) {
   }
 }
 
-function computeThreadID(root: FiberRoot, lane: Lane | Lanes) {
-  // Interaction threads are unique per root and expiration time.
-  // NOTE: Intentionally unsound cast. All that matters is that it's a number
-  // and it represents a batch of work. Could make a helper function instead,
-  // but meh this is fine for now.
-  return (lane: any) * 1000 + root.interactionThreadID;
-}
-
-export function markSpawnedWork(lane: Lane | Lanes) {
-  if (!enableSchedulerTracing) {
-    return;
-  }
-  if (spawnedWorkDuringRender === null) {
-    spawnedWorkDuringRender = [lane];
-  } else {
-    spawnedWorkDuringRender.push(lane);
-  }
-}
-
-function scheduleInteractions(
-  root: FiberRoot,
-  lane: Lane | Lanes,
-  interactions: Set<Interaction>,
-) {
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  if (interactions.size > 0) {
-    const pendingInteractionMap = root.pendingInteractionMap;
-    const pendingInteractions = pendingInteractionMap.get(lane);
-    if (pendingInteractions != null) {
-      interactions.forEach(interaction => {
-        if (!pendingInteractions.has(interaction)) {
-          // Update the pending async work count for previously unscheduled interaction.
-          interaction.__count++;
-        }
-
-        pendingInteractions.add(interaction);
-      });
-    } else {
-      pendingInteractionMap.set(lane, new Set(interactions));
-
-      // Update the pending async work count for the current interactions.
-      interactions.forEach(interaction => {
-        interaction.__count++;
-      });
-    }
-
-    const subscriber = __subscriberRef.current;
-    if (subscriber !== null) {
-      const threadID = computeThreadID(root, lane);
-      subscriber.onWorkScheduled(interactions, threadID);
-    }
-  }
-}
-
-function schedulePendingInteractions(root: FiberRoot, lane: Lane | Lanes) {
-  // This is called when work is scheduled on a root.
-  // It associates the current interactions with the newly-scheduled expiration.
-  // They will be restored when that expiration is later committed.
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  scheduleInteractions(root, lane, __interactionsRef.current);
-}
-
-function startWorkOnPendingInteractions(root: FiberRoot, lanes: Lanes) {
-  // This is called when new work is started on a root.
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  // Determine which interactions this batch of work currently includes, So that
-  // we can accurately attribute time spent working on it, And so that cascading
-  // work triggered during the render phase will be associated with it.
-  const interactions: Set<Interaction> = new Set();
-  root.pendingInteractionMap.forEach((scheduledInteractions, scheduledLane) => {
-    if (includesSomeLane(lanes, scheduledLane)) {
-      scheduledInteractions.forEach(interaction =>
-        interactions.add(interaction),
-      );
-    }
-  });
-
-  // Store the current set of interactions on the FiberRoot for a few reasons:
-  // We can re-use it in hot functions like performConcurrentWorkOnRoot()
-  // without having to recalculate it. We will also use it in commitWork() to
-  // pass to any Profiler onRender() hooks. This also provides DevTools with a
-  // way to access it when the onCommitRoot() hook is called.
-  root.memoizedInteractions = interactions;
-
-  if (interactions.size > 0) {
-    const subscriber = __subscriberRef.current;
-    if (subscriber !== null) {
-      const threadID = computeThreadID(root, lanes);
-      try {
-        subscriber.onWorkStarted(interactions, threadID);
-      } catch (error) {
-        // If the subscriber throws, rethrow it in a separate task
-        scheduleCallback(ImmediateSchedulerPriority, () => {
-          throw error;
-        });
-      }
-    }
-  }
-}
-
-function finishPendingInteractions(root, committedLanes) {
-  if (!enableSchedulerTracing) {
-    return;
-  }
-
-  const remainingLanesAfterCommit = root.pendingLanes;
-
-  let subscriber;
-
-  try {
-    subscriber = __subscriberRef.current;
-    if (subscriber !== null && root.memoizedInteractions.size > 0) {
-      // FIXME: More than one lane can finish in a single commit.
-      const threadID = computeThreadID(root, committedLanes);
-      subscriber.onWorkStopped(root.memoizedInteractions, threadID);
-    }
-  } catch (error) {
-    // If the subscriber throws, rethrow it in a separate task
-    scheduleCallback(ImmediateSchedulerPriority, () => {
-      throw error;
-    });
-  } finally {
-    // Clear completed interactions from the pending Map.
-    // Unless the render was suspended or cascading work was scheduled,
-    // In which case– leave pending interactions until the subsequent render.
-    const pendingInteractionMap = root.pendingInteractionMap;
-    pendingInteractionMap.forEach((scheduledInteractions, lane) => {
-      // Only decrement the pending interaction count if we're done.
-      // If there's still work at the current priority,
-      // That indicates that we are waiting for suspense data.
-      if (!includesSomeLane(remainingLanesAfterCommit, lane)) {
-        pendingInteractionMap.delete(lane);
-
-        scheduledInteractions.forEach(interaction => {
-          interaction.__count--;
-
-          if (subscriber !== null && interaction.__count === 0) {
-            try {
-              subscriber.onInteractionScheduledWorkCompleted(interaction);
-            } catch (error) {
-              // If the subscriber throws, rethrow it in a separate task
-              scheduleCallback(ImmediateSchedulerPriority, () => {
-                throw error;
-              });
-            }
-          }
-        });
-      }
-    });
-  }
-}
-
 // `act` testing API
 //
 // TODO: This is mostly a copy-paste from the legacy `act`, which does not have
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 6d7d38232e34..104a9ef728e4 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -24,7 +24,6 @@ import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {Interaction} from 'scheduler/src/Tracing';
 import type {Cache} from './ReactFiberCacheComponent.old';
 
 // Unwind Circular: moved from ReactFiberHooks.old
@@ -240,16 +239,6 @@ type BaseFiberRootProperties = {|
   pooledCacheLanes: Lanes,
 |};
 
-// The following attributes are only used by interaction tracing builds.
-// They enable interactions to be associated with their async work,
-// And expose interaction metadata to the React DevTools Profiler plugin.
-// Note that these attributes are only defined when the enableSchedulerTracing flag is enabled.
-type ProfilingOnlyFiberRootProperties = {|
-  interactionThreadID: number,
-  memoizedInteractions: Set<Interaction>,
-  pendingInteractionMap: Map<Lane | Lanes, Set<Interaction>>,
-|};
-
 // 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 = {|
@@ -270,12 +259,9 @@ type SuspenseCallbackOnlyFiberRootProperties = {|
 
 // Exported FiberRoot type includes all properties,
 // To avoid requiring potentially error-prone :any casts throughout the project.
-// Profiling properties are only safe to access in profiling builds (when enableSchedulerTracing is true).
 // The types are defined separately within this file to ensure they stay in sync.
-// (We don't have to use an inline :any cast when enableSchedulerTracing is disabled.)
 export type FiberRoot = {
   ...BaseFiberRootProperties,
-  ...ProfilingOnlyFiberRootProperties,
   ...SuspenseCallbackOnlyFiberRootProperties,
   ...UpdaterTrackingOnlyFiberRootProperties,
   ...
diff --git a/packages/react-reconciler/src/Scheduler.js b/packages/react-reconciler/src/Scheduler.js
index f590f284a9ed..dabb5baaf64b 100644
--- a/packages/react-reconciler/src/Scheduler.js
+++ b/packages/react-reconciler/src/Scheduler.js
@@ -12,9 +12,6 @@
 // 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';
-import {__interactionsRef} from 'scheduler/tracing';
-import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 
 export const scheduleCallback = Scheduler.unstable_scheduleCallback;
 export const cancelCallback = Scheduler.unstable_cancelCallback;
@@ -28,19 +25,4 @@ export const UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
 export const NormalPriority = Scheduler.unstable_NormalPriority;
 export const LowPriority = Scheduler.unstable_LowPriority;
 export const IdlePriority = Scheduler.unstable_IdlePriority;
-
-if (enableSchedulerTracing) {
-  // Provide explicit error message when production+profiling bundle of e.g.
-  // react-dom is used with production (non-profiling) bundle of
-  // scheduler/tracing
-  invariant(
-    __interactionsRef != null && __interactionsRef.current != null,
-    '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://reactjs.org/link/profiling',
-  );
-}
-
 export type SchedulerCallback = (isSync: boolean) => SchedulerCallback | null;
diff --git a/packages/scheduler/tracing.js b/packages/react-reconciler/src/__mocks__/scheduler/tracing.js
similarity index 59%
rename from packages/scheduler/tracing.js
rename to packages/react-reconciler/src/__mocks__/scheduler/tracing.js
index e3001a8ecffd..c9f74c6bb2a5 100644
--- a/packages/scheduler/tracing.js
+++ b/packages/react-reconciler/src/__mocks__/scheduler/tracing.js
@@ -7,7 +7,5 @@
  * @flow
  */
 
-'use strict';
-
-export * from './src/Tracing';
-export * from './src/TracingSubscriptions';
+// 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__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 07d3f7ff526a..27d09697fc21 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -18,7 +18,6 @@ let readText;
 let resolveText;
 let ReactNoop;
 let Scheduler;
-let SchedulerTracing;
 let Suspense;
 let useState;
 let useReducer;
@@ -43,7 +42,6 @@ describe('ReactHooksWithNoopRenderer', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
     useState = React.useState;
     useReducer = React.useReducer;
     useEffect = React.useEffect;
@@ -1797,71 +1795,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
     });
 
-    // @gate enableSchedulerTracing
-    it('does not flush non-discrete passive effects when flushing sync (with tracing)', () => {
-      const onInteractionScheduledWorkCompleted = jest.fn();
-      const onWorkCanceled = jest.fn();
-      SchedulerTracing.unstable_subscribe({
-        onInteractionScheduledWorkCompleted,
-        onInteractionTraced: jest.fn(),
-        onWorkCanceled,
-        onWorkScheduled: jest.fn(),
-        onWorkStarted: jest.fn(),
-        onWorkStopped: jest.fn(),
-      });
-
-      let _updateCount;
-      function Counter(props) {
-        const [count, updateCount] = useState(0);
-        _updateCount = updateCount;
-        useEffect(() => {
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            tracingEvent,
-          ]);
-          Scheduler.unstable_yieldValue(`Will set count to 1`);
-          updateCount(1);
-        }, []);
-        return <Text text={'Count: ' + count} />;
-      }
-
-      const tracingEvent = {id: 0, name: 'hello', timestamp: 0};
-      // we explicitly wait for missing act() warnings here since
-      // it's a lot harder to simulate this condition inside an act scope
-      expect(() => {
-        SchedulerTracing.unstable_trace(
-          tracingEvent.name,
-          tracingEvent.timestamp,
-          () => {
-            ReactNoop.render(<Counter count={0} />, () =>
-              Scheduler.unstable_yieldValue('Sync effect'),
-            );
-          },
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      }).toErrorDev(['An update to Counter ran an effect']);
-
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(0);
-
-      // A flush sync doesn't cause the passive effects to fire.
-      act(() => {
-        ReactNoop.flushSync(() => {
-          _updateCount(2);
-        });
-      });
-
-      expect(Scheduler).toHaveYielded([
-        'Will set count to 1',
-        'Count: 2',
-        'Count: 1',
-      ]);
-
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-      expect(onWorkCanceled).toHaveBeenCalledTimes(0);
-    });
-
     it(
       'in legacy mode, useEffect is deferred and updates finish synchronously ' +
         '(in a single batch)',
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index ae3f286f542b..e0fcab7a77cc 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -2,7 +2,6 @@ let React;
 let ReactTestRenderer;
 let ReactFeatureFlags;
 let Scheduler;
-let SchedulerTracing;
 let ReactCache;
 let Suspense;
 let act;
@@ -18,12 +17,10 @@ describe('ReactSuspense', () => {
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
-    ReactFeatureFlags.enableSchedulerTracing = true;
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
     act = ReactTestRenderer.unstable_concurrentAct;
     Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
     ReactCache = require('react-cache');
 
     Suspense = React.Suspense;
@@ -1271,76 +1268,6 @@ describe('ReactSuspense', () => {
       ]);
     });
 
-    it('should call onInteractionScheduledWorkCompleted after suspending', () => {
-      const subscriber = {
-        onInteractionScheduledWorkCompleted: jest.fn(),
-        onInteractionTraced: jest.fn(),
-        onWorkCanceled: jest.fn(),
-        onWorkScheduled: jest.fn(),
-        onWorkStarted: jest.fn(),
-        onWorkStopped: jest.fn(),
-      };
-      SchedulerTracing.unstable_subscribe(subscriber);
-      SchedulerTracing.unstable_trace('test', performance.now(), () => {
-        function App() {
-          return (
-            <React.Suspense fallback={<Text text="Loading..." />}>
-              <AsyncText text="A" ms={1000} />
-              <AsyncText text="B" ms={2000} />
-              <AsyncText text="C" ms={3000} />
-            </React.Suspense>
-          );
-        }
-
-        const root = ReactTestRenderer.create(null);
-        root.update(<App />);
-
-        expect(Scheduler).toHaveYielded([
-          'Suspend! [A]',
-          'Suspend! [B]',
-          'Suspend! [C]',
-          'Loading...',
-        ]);
-
-        // Resolve A
-        jest.advanceTimersByTime(1000);
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-        expect(Scheduler).toFlushUntilNextPaint([
-          'A',
-          // The promises for B and C have now been thrown twice
-          'Suspend! [B]',
-          'Suspend! [C]',
-        ]);
-
-        // Resolve B
-        jest.advanceTimersByTime(1000);
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-        expect(Scheduler).toFlushUntilNextPaint([
-          // 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]',
-        ]);
-
-        // Resolve C
-        jest.advanceTimersByTime(1000);
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [C]']);
-        expect(Scheduler).toFlushAndYield([
-          // Even though the promise for C was thrown three times, we should only
-          // re-render once.
-          'C',
-        ]);
-      });
-
-      expect(
-        subscriber.onInteractionScheduledWorkCompleted,
-      ).toHaveBeenCalledTimes(1);
-    });
-
     it('#14162', () => {
       const {lazy} = React;
 
diff --git a/packages/react-reconciler/src/__tests__/ReactTracing-test.internal.js b/packages/react-reconciler/src/__tests__/ReactTracing-test.internal.js
deleted file mode 100644
index 3815ec848794..000000000000
--- a/packages/react-reconciler/src/__tests__/ReactTracing-test.internal.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- * @jest-environment node
- */
-
-'use strict';
-
-describe('ReactTracing', () => {
-  it('should error if profiling renderer and non-profiling scheduler/tracing bundles are combined', () => {
-    jest.resetModules();
-
-    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableSchedulerTracing = false;
-
-    require('scheduler/tracing');
-
-    ReactFeatureFlags.enableSchedulerTracing = true;
-
-    expect(() => require('react-dom')).toThrow(
-      'Learn more at https://reactjs.org/link/profiling',
-    );
-  });
-});
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index 8d762f87b8fe..248223e34946 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -292,91 +292,6 @@ describe('updaters', () => {
     done();
   });
 
-  // @gate experimental
-  it('traces interaction through hidden subtree', async () => {
-    const {
-      FunctionComponent,
-      HostRoot,
-    } = require('react-reconciler/src/ReactWorkTags');
-
-    // 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>
-      );
-    }
-
-    const Child = () => {
-      const [didMount, setDidMount] = React.useState(false);
-      Scheduler.unstable_yieldValue('Child');
-      React.useEffect(() => {
-        if (didMount) {
-          Scheduler.unstable_yieldValue('Child:update');
-        } else {
-          Scheduler.unstable_yieldValue('Child:mount');
-          setDidMount(true);
-        }
-      }, [didMount]);
-      return <div />;
-    };
-
-    const App = () => {
-      Scheduler.unstable_yieldValue('App');
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('App:mount');
-      }, []);
-      return (
-        <LegacyHiddenDiv mode="hidden">
-          <Child />
-        </LegacyHiddenDiv>
-      );
-    };
-
-    const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
-    await ReactTestUtils.act(async () => {
-      root.render(<App />);
-    });
-
-    // TODO: There are 4 commits here instead of 3
-    // because this update was scheduled at idle priority,
-    // and idle updates are slightly higher priority than offscreen work.
-    // So it takes two render passes to finish it.
-    // The onCommit hook is called even after the no-op bailout update.
-    expect(Scheduler).toHaveYielded([
-      'App',
-      'onCommitRoot',
-      'App:mount',
-
-      'Child',
-      'onCommitRoot',
-      'Child:mount',
-
-      'onCommitRoot',
-
-      'Child',
-      'onCommitRoot',
-      'Child:update',
-    ]);
-    expect(allSchedulerTypes).toEqual([
-      // Initial render
-      [null],
-      // Offscreen update
-      [],
-      // Child passive effect
-      [Child],
-      // Offscreen update
-      [],
-    ]);
-    expect(allSchedulerTags).toEqual([[HostRoot], [], [FunctionComponent], []]);
-  });
-
   // @gate experimental
   it('should cover error handling', async () => {
     let triggerError = null;
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index b8c47e93d6bf..fbd81d957649 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -25,7 +25,6 @@ function loadModules() {
   jest.useFakeTimers();
 
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableSchedulerTracing = true;
   ReactFeatureFlags.enableProfilerTimer = true;
 
   React = require('react');
diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 590bb19dea99..4f5f3c31c5e0 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "react-16-8": "npm:react@16.8.0",
-    "react-dom-16-8": "npm:react-dom@16.8.0"
+    "react-dom-16-8": "npm:react-dom@16.8.0",
+    "scheduler-0-13": "npm:scheduler@0.13.0"
   }
 }
\ No newline at end of file
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 3fa7a61442d7..1f83a84d83dc 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -3844,6 +3844,10 @@ describe('ReactFresh', () => {
 
       // 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'));
 
diff --git a/packages/react/index.js b/packages/react/index.js
index 5319bb80be75..094d0fcd2379 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -28,11 +28,6 @@ export type ElementConfig<C> = React$ElementConfig<C>;
 export type ElementRef<C> = React$ElementRef<C>;
 export type Config<Props, DefaultProps> = React$Config<Props, DefaultProps>;
 export type ChildrenArray<+T> = $ReadOnlyArray<ChildrenArray<T>> | T;
-export type Interaction = {
-  name: string,
-  timestamp: number,
-  ...
-};
 
 // Export all exports so that they're available in tests.
 // We can't use export * from in Flow for some reason.
diff --git a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js b/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
deleted file mode 100644
index 1a026d732497..000000000000
--- a/packages/react/src/__tests__/ReactDOMTracing-test.internal.js
+++ /dev/null
@@ -1,922 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactDOM;
-let ReactDOMServer;
-let ReactFeatureFlags;
-let Scheduler;
-let SchedulerTracing;
-let TestUtils;
-let act;
-let onInteractionScheduledWorkCompleted;
-let onInteractionTraced;
-let onWorkCanceled;
-let onWorkScheduled;
-let onWorkStarted;
-let onWorkStopped;
-let IdleEventPriority;
-let ContinuousEventPriority;
-
-function loadModules() {
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-
-  ReactFeatureFlags.enableProfilerTimer = true;
-  ReactFeatureFlags.enableSchedulerTracing = true;
-  ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
-
-  React = require('react');
-  ReactDOM = require('react-dom');
-  ReactDOMServer = require('react-dom/server');
-  Scheduler = require('scheduler');
-  SchedulerTracing = require('scheduler/tracing');
-  TestUtils = require('react-dom/test-utils');
-
-  IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
-  ContinuousEventPriority = require('react-reconciler/constants')
-    .ContinuousEventPriority;
-
-  act = TestUtils.unstable_concurrentAct;
-
-  onInteractionScheduledWorkCompleted = jest.fn();
-  onInteractionTraced = jest.fn();
-  onWorkCanceled = jest.fn();
-  onWorkScheduled = jest.fn();
-  onWorkStarted = jest.fn();
-  onWorkStopped = jest.fn();
-
-  // Verify interaction subscriber methods are called as expected.
-  SchedulerTracing.unstable_subscribe({
-    onInteractionScheduledWorkCompleted,
-    onInteractionTraced,
-    onWorkCanceled,
-    onWorkScheduled,
-    onWorkStarted,
-    onWorkStopped,
-  });
-}
-
-// 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>
-  );
-}
-
-describe('ReactDOMTracing', () => {
-  beforeEach(() => {
-    jest.resetModules();
-
-    loadModules();
-  });
-
-  describe('interaction tracing', () => {
-    describe('hidden', () => {
-      // @gate experimental
-      it('traces interaction through hidden subtree', () => {
-        const Child = () => {
-          const [didMount, setDidMount] = React.useState(false);
-          Scheduler.unstable_yieldValue('Child');
-          React.useEffect(() => {
-            if (didMount) {
-              Scheduler.unstable_yieldValue('Child:update');
-            } else {
-              Scheduler.unstable_yieldValue('Child:mount');
-              setDidMount(true);
-            }
-          }, [didMount]);
-          return <div />;
-        };
-
-        const App = () => {
-          Scheduler.unstable_yieldValue('App');
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('App:mount');
-          }, []);
-          return (
-            <LegacyHiddenDiv mode="hidden">
-              <Child />
-            </LegacyHiddenDiv>
-          );
-        };
-
-        let interaction;
-
-        const onRender = jest.fn();
-
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
-        SchedulerTracing.unstable_trace('initialization', 0, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-          act(() => {
-            if (gate(flags => flags.enableSyncDefaultUpdates)) {
-              React.unstable_startTransition(() => {
-                root.render(
-                  <React.Profiler id="test" onRender={onRender}>
-                    <App />
-                  </React.Profiler>,
-                );
-              });
-            } else {
-              root.render(
-                <React.Profiler id="test" onRender={onRender}>
-                  <App />
-                </React.Profiler>,
-              );
-            }
-            expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-              interaction,
-            );
-            expect(Scheduler).toFlushAndYieldThrough(['App', 'App:mount']);
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-            expect(onRender).toHaveBeenCalledTimes(1);
-            expect(onRender).toHaveLastRenderedWithInteractions(
-              new Set([interaction]),
-            );
-            expect(Scheduler).toFlushAndYieldThrough(['Child', 'Child:mount']);
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-            expect(onRender).toHaveBeenCalledTimes(2);
-            expect(onRender).toHaveLastRenderedWithInteractions(
-              new Set([interaction]),
-            );
-
-            expect(Scheduler).toFlushAndYield(['Child', 'Child:update']);
-          });
-        });
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-
-        if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
-          expect(onRender).toHaveBeenCalledTimes(3);
-        } else {
-          // TODO: This is 4 instead of 3 because this update was scheduled at
-          // idle priority, and idle updates are slightly higher priority than
-          // offscreen work. So it takes two render passes to finish it. Profiler
-          // calls `onRender` for the first render even though everything
-          // bails out.
-          expect(onRender).toHaveBeenCalledTimes(4);
-        }
-        expect(onRender).toHaveLastRenderedWithInteractions(
-          new Set([interaction]),
-        );
-      });
-
-      // @gate experimental
-      it('traces interaction through hidden subtree when there is other pending traced work', () => {
-        const Child = () => {
-          Scheduler.unstable_yieldValue('Child');
-          return <div />;
-        };
-
-        let wrapped = null;
-
-        const App = () => {
-          Scheduler.unstable_yieldValue('App');
-          React.useEffect(() => {
-            wrapped = SchedulerTracing.unstable_wrap(() => {});
-            Scheduler.unstable_yieldValue('App:mount');
-          }, []);
-          return (
-            <LegacyHiddenDiv mode="hidden">
-              <Child />
-            </LegacyHiddenDiv>
-          );
-        };
-
-        let interaction;
-
-        const onRender = jest.fn();
-
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
-        SchedulerTracing.unstable_trace('initialization', 0, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-
-          act(() => {
-            root.render(
-              <React.Profiler id="test" onRender={onRender}>
-                <App />
-              </React.Profiler>,
-            );
-            expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-              interaction,
-            );
-
-            expect(Scheduler).toFlushAndYieldThrough(['App', 'App:mount']);
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-            expect(onRender).toHaveBeenCalledTimes(1);
-            expect(onRender).toHaveLastRenderedWithInteractions(
-              new Set([interaction]),
-            );
-
-            expect(wrapped).not.toBeNull();
-
-            expect(Scheduler).toFlushAndYield(['Child']);
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-            expect(onRender).toHaveBeenCalledTimes(2);
-            expect(onRender).toHaveLastRenderedWithInteractions(
-              new Set([interaction]),
-            );
-          });
-        });
-
-        wrapped();
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      // @gate experimental
-      it('traces interaction through hidden subtree that schedules more idle/never work', () => {
-        const Child = () => {
-          const [didMount, setDidMount] = React.useState(false);
-          Scheduler.unstable_yieldValue('Child');
-          React.useLayoutEffect(() => {
-            if (didMount) {
-              Scheduler.unstable_yieldValue('Child:update');
-            } else {
-              Scheduler.unstable_yieldValue('Child:mount');
-              ReactDOM.unstable_runWithPriority(IdleEventPriority, () =>
-                setDidMount(true),
-              );
-            }
-          }, [didMount]);
-          return <div />;
-        };
-
-        const App = () => {
-          Scheduler.unstable_yieldValue('App');
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('App:mount');
-          }, []);
-          return (
-            <LegacyHiddenDiv mode="hidden">
-              <Child />
-            </LegacyHiddenDiv>
-          );
-        };
-
-        let interaction;
-
-        const onRender = jest.fn();
-
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
-        SchedulerTracing.unstable_trace('initialization', 0, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-          act(() => {
-            if (gate(flags => flags.enableSyncDefaultUpdates)) {
-              React.unstable_startTransition(() => {
-                root.render(
-                  <React.Profiler id="test" onRender={onRender}>
-                    <App />
-                  </React.Profiler>,
-                );
-              });
-            } else {
-              root.render(
-                <React.Profiler id="test" onRender={onRender}>
-                  <App />
-                </React.Profiler>,
-              );
-            }
-            expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-              interaction,
-            );
-
-            expect(Scheduler).toFlushAndYieldThrough(['App', 'App:mount']);
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-            expect(onRender).toHaveBeenCalledTimes(1);
-            expect(onRender).toHaveLastRenderedWithInteractions(
-              new Set([interaction]),
-            );
-
-            expect(Scheduler).toFlushAndYieldThrough(['Child', 'Child:mount']);
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-            expect(onRender).toHaveBeenCalledTimes(2);
-            expect(onRender).toHaveLastRenderedWithInteractions(
-              new Set([interaction]),
-            );
-
-            expect(Scheduler).toFlushAndYield(['Child', 'Child:update']);
-          });
-        });
-
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-
-        // TODO: This is 4 instead of 3 because this update was scheduled at
-        // idle priority, and idle updates are slightly higher priority than
-        // offscreen work. So it takes two render passes to finish it. Profiler
-        // calls `onRender` for the first render even though everything
-        // bails out.
-        expect(onRender).toHaveBeenCalledTimes(4);
-        expect(onRender).toHaveLastRenderedWithInteractions(
-          new Set([interaction]),
-        );
-      });
-
-      // @gate experimental
-      it('does not continue interactions across pre-existing idle work', () => {
-        const Child = () => {
-          Scheduler.unstable_yieldValue('Child');
-          return <div />;
-        };
-
-        let update = null;
-
-        const WithHiddenWork = () => {
-          Scheduler.unstable_yieldValue('WithHiddenWork');
-          return (
-            <LegacyHiddenDiv mode="hidden">
-              <Child />
-            </LegacyHiddenDiv>
-          );
-        };
-
-        const Updater = () => {
-          Scheduler.unstable_yieldValue('Updater');
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('Updater:effect');
-          });
-
-          const setCount = React.useState(0)[1];
-          update = () => {
-            setCount(current => current + 1);
-          };
-
-          return <div />;
-        };
-
-        const App = () => {
-          Scheduler.unstable_yieldValue('App');
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('App:effect');
-          });
-
-          return (
-            <>
-              <WithHiddenWork />
-              <Updater />
-            </>
-          );
-        };
-
-        const onRender = jest.fn();
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
-
-        // Schedule some idle work without any interactions.
-        act(() => {
-          root.render(
-            <React.Profiler id="test" onRender={onRender}>
-              <App />
-            </React.Profiler>,
-          );
-          expect(Scheduler).toFlushAndYieldThrough([
-            'App',
-            'WithHiddenWork',
-            'Updater',
-            'Updater:effect',
-            'App:effect',
-          ]);
-          expect(update).not.toBeNull();
-
-          // Trace a higher-priority update.
-          let interaction = null;
-          SchedulerTracing.unstable_trace('update', 0, () => {
-            interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-            update();
-          });
-          expect(interaction).not.toBeNull();
-          expect(onRender).toHaveBeenCalledTimes(1);
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-            interaction,
-          );
-
-          // Ensure the traced interaction completes without being attributed to the pre-existing idle work.
-          expect(Scheduler).toFlushAndYieldThrough([
-            'Updater',
-            'Updater:effect',
-          ]);
-          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-          expect(
-            onInteractionScheduledWorkCompleted,
-          ).toHaveBeenLastNotifiedOfInteraction(interaction);
-          expect(onRender).toHaveBeenCalledTimes(2);
-          expect(onRender).toHaveLastRenderedWithInteractions(
-            new Set([interaction]),
-          );
-
-          // Complete low-priority work and ensure no lingering interaction.
-          expect(Scheduler).toFlushAndYield(['Child']);
-          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-          expect(onRender).toHaveBeenCalledTimes(3);
-          expect(onRender).toHaveLastRenderedWithInteractions(new Set([]));
-        });
-      });
-
-      // @gate experimental
-      it('should properly trace interactions when there is work of interleaved priorities', () => {
-        const Child = () => {
-          Scheduler.unstable_yieldValue('Child');
-          return <div />;
-        };
-
-        let scheduleUpdate = null;
-        let scheduleUpdateWithHidden = null;
-
-        const MaybeHiddenWork = () => {
-          const [flag, setFlag] = React.useState(false);
-          scheduleUpdateWithHidden = () => setFlag(true);
-          Scheduler.unstable_yieldValue('MaybeHiddenWork');
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('MaybeHiddenWork:effect');
-          });
-          return flag ? (
-            <LegacyHiddenDiv mode="hidden">
-              <Child />
-            </LegacyHiddenDiv>
-          ) : null;
-        };
-
-        const Updater = () => {
-          Scheduler.unstable_yieldValue('Updater');
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('Updater:effect');
-          });
-
-          const setCount = React.useState(0)[1];
-          scheduleUpdate = () => setCount(current => current + 1);
-
-          return <div />;
-        };
-
-        const App = () => {
-          Scheduler.unstable_yieldValue('App');
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('App:effect');
-          });
-
-          return (
-            <>
-              <MaybeHiddenWork />
-              <Updater />
-            </>
-          );
-        };
-
-        const onRender = jest.fn();
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
-
-        act(() => {
-          root.render(
-            <React.Profiler id="test" onRender={onRender}>
-              <App />
-            </React.Profiler>,
-          );
-          expect(Scheduler).toFlushAndYield([
-            'App',
-            'MaybeHiddenWork',
-            'Updater',
-            'MaybeHiddenWork:effect',
-            'Updater:effect',
-            'App:effect',
-          ]);
-          expect(scheduleUpdate).not.toBeNull();
-          expect(scheduleUpdateWithHidden).not.toBeNull();
-          expect(onRender).toHaveBeenCalledTimes(1);
-
-          // schedule traced high-pri update and a (non-traced) low-pri update.
-          let interaction = null;
-          SchedulerTracing.unstable_trace('update', 0, () => {
-            interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-            ReactDOM.unstable_runWithPriority(ContinuousEventPriority, () =>
-              scheduleUpdateWithHidden(),
-            );
-          });
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
-              scheduleUpdate();
-            });
-          } else {
-            scheduleUpdate();
-          }
-          expect(interaction).not.toBeNull();
-          expect(onRender).toHaveBeenCalledTimes(1);
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-            interaction,
-          );
-
-          // high-pri update should leave behind idle work and should not complete the interaction
-          expect(Scheduler).toFlushAndYieldThrough([
-            'MaybeHiddenWork',
-            'MaybeHiddenWork:effect',
-          ]);
-          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-          expect(onRender).toHaveBeenCalledTimes(2);
-          expect(onRender).toHaveLastRenderedWithInteractions(
-            new Set([interaction]),
-          );
-
-          // low-pri update should not have the interaction
-          expect(Scheduler).toFlushAndYieldThrough([
-            'Updater',
-            'Updater:effect',
-          ]);
-          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-          expect(onRender).toHaveBeenCalledTimes(3);
-          expect(onRender).toHaveLastRenderedWithInteractions(new Set([]));
-
-          // idle work should complete the interaction
-          expect(Scheduler).toFlushAndYield(['Child']);
-          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-          expect(
-            onInteractionScheduledWorkCompleted,
-          ).toHaveBeenLastNotifiedOfInteraction(interaction);
-          expect(onRender).toHaveBeenCalledTimes(4);
-          expect(onRender).toHaveLastRenderedWithInteractions(
-            new Set([interaction]),
-          );
-        });
-      });
-
-      // @gate experimental
-      it('should properly trace interactions through a multi-pass SuspenseList render', () => {
-        const SuspenseList = React.SuspenseList;
-        const Suspense = React.Suspense;
-        function Text({text}) {
-          Scheduler.unstable_yieldValue(text);
-          React.useEffect(() => {
-            Scheduler.unstable_yieldValue('Commit ' + text);
-          });
-          return <span>{text}</span>;
-        }
-        function App() {
-          return (
-            <SuspenseList revealOrder="forwards">
-              <Suspense fallback={<Text text="Loading A" />}>
-                <Text text="A" />
-              </Suspense>
-              <Suspense fallback={<Text text="Loading B" />}>
-                <Text text="B" />
-              </Suspense>
-              <Suspense fallback={<Text text="Loading C" />}>
-                <Text text="C" />
-              </Suspense>
-            </SuspenseList>
-          );
-        }
-
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
-
-        let interaction;
-
-        act(() => {
-          SchedulerTracing.unstable_trace('initialization', 0, () => {
-            interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-            // This render is only CPU bound. Nothing suspends.
-            if (gate(flags => flags.enableSyncDefaultUpdates)) {
-              React.unstable_startTransition(() => {
-                root.render(<App />);
-              });
-            } else {
-              root.render(<App />);
-            }
-          });
-
-          expect(Scheduler).toFlushAndYieldThrough(['A']);
-
-          Scheduler.unstable_advanceTime(200);
-          jest.advanceTimersByTime(200);
-
-          expect(Scheduler).toFlushAndYieldThrough(['B']);
-
-          Scheduler.unstable_advanceTime(300);
-          jest.advanceTimersByTime(300);
-
-          // Time has now elapsed for so long that we're just going to give up
-          // rendering the rest of the content. So that we can at least show
-          // something.
-          expect(Scheduler).toFlushAndYieldThrough([
-            'Loading C',
-            'Commit A',
-            'Commit B',
-            'Commit Loading C',
-          ]);
-
-          // Schedule an unrelated low priority update that shouldn't be included
-          // in the previous interaction. This is meant to ensure that we don't
-          // rely on the whole tree completing to cover up bugs.
-          ReactDOM.unstable_runWithPriority(IdleEventPriority, () => {
-            root.render(<App />);
-          });
-
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-            interaction,
-          );
-          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-          // Then we do a second pass to commit the last item.
-          expect(Scheduler).toFlushAndYieldThrough(['C', 'Commit C']);
-
-          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-          expect(
-            onInteractionScheduledWorkCompleted,
-          ).toHaveBeenLastNotifiedOfInteraction(interaction);
-        });
-      });
-    });
-
-    describe('hydration', () => {
-      // @gate experimental
-      it('traces interaction across hydration', () => {
-        const ref = React.createRef();
-
-        function Child() {
-          return 'Hello';
-        }
-
-        function App() {
-          return (
-            <div>
-              <span ref={ref}>
-                <Child />
-              </span>
-            </div>
-          );
-        }
-
-        // Render the final HTML.
-        const finalHTML = ReactDOMServer.renderToString(<App />);
-
-        const container = document.createElement('div');
-        container.innerHTML = finalHTML;
-
-        let interaction;
-
-        const root = ReactDOM.createRoot(container, {hydrate: true});
-
-        // Hydrate it.
-        SchedulerTracing.unstable_trace('initialization', 0, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-
-          root.render(<App />);
-        });
-        Scheduler.unstable_flushAll();
-        jest.runAllTimers();
-
-        expect(ref.current).not.toBe(null);
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interaction,
-        );
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      // @gate experimental
-      it('traces interaction across suspended hydration', 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>
-              <React.Suspense fallback="Loading...">
-                <span ref={ref}>
-                  <Child />
-                </span>
-              </React.Suspense>
-            </div>
-          );
-        }
-
-        // Render the final HTML.
-        // Don't suspend on the server.
-        const finalHTML = ReactDOMServer.renderToString(<App />);
-
-        const container = document.createElement('div');
-        container.innerHTML = finalHTML;
-
-        let interaction;
-
-        const root = ReactDOM.createRoot(container, {hydrate: true});
-
-        // Start hydrating but simulate blocking for suspense data.
-        suspend = true;
-        SchedulerTracing.unstable_trace('initialization', 0, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-
-          root.render(<App />);
-        });
-        Scheduler.unstable_flushAll();
-        jest.runAllTimers();
-
-        expect(ref.current).toBe(null);
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interaction,
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        // Resolving the promise should continue hydration
-        suspend = false;
-        resolve();
-        await promise;
-        Scheduler.unstable_flushAll();
-        jest.runAllTimers();
-
-        expect(ref.current).not.toBe(null);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      // @gate experimental
-      it('traces interaction across suspended hydration from server', async () => {
-        // Copied from ReactDOMHostConfig.js
-        const SUSPENSE_START_DATA = '$';
-        const SUSPENSE_PENDING_START_DATA = '$?';
-
-        const ref = React.createRef();
-
-        function App() {
-          return (
-            <React.Suspense fallback="Loading...">
-              <span ref={ref}>Hello</span>
-            </React.Suspense>
-          );
-        }
-
-        const container = document.createElement('div');
-
-        // Render the final HTML.
-        const finalHTML = ReactDOMServer.renderToString(<App />);
-
-        // Replace the marker with a pending state.
-        // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#Escaping
-        const escapedMarker = SUSPENSE_START_DATA.replace(
-          /[.*+\-?^${}()|[\]\\]/g,
-          '\\$&',
-        );
-        container.innerHTML = finalHTML.replace(
-          new RegExp(escapedMarker, 'g'),
-          SUSPENSE_PENDING_START_DATA,
-        );
-
-        let interaction;
-
-        const root = ReactDOM.createRoot(container, {hydrate: true});
-
-        // Start hydrating but simulate blocking for suspense data from the server.
-        SchedulerTracing.unstable_trace('initialization', 0, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-
-          root.render(<App />);
-        });
-        Scheduler.unstable_flushAll();
-        jest.runAllTimers();
-
-        expect(ref.current).toBe(null);
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interaction,
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        // Unblock rendering, pretend the content is injected by the server.
-        const startNode = container.childNodes[0];
-        expect(startNode).not.toBe(null);
-        expect(startNode.nodeType).toBe(Node.COMMENT_NODE);
-
-        startNode.textContent = SUSPENSE_START_DATA;
-        startNode._reactRetry();
-
-        Scheduler.unstable_flushAll();
-        jest.runAllTimers();
-
-        expect(ref.current).not.toBe(null);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      // @gate experimental
-      it('traces interaction across client-rendered hydration', () => {
-        let suspend = false;
-        const promise = new Promise(() => {});
-        const ref = React.createRef();
-
-        function Child() {
-          if (suspend) {
-            throw promise;
-          } else {
-            return 'Hello';
-          }
-        }
-
-        function App() {
-          return (
-            <div>
-              <React.Suspense fallback="Loading...">
-                <span ref={ref}>
-                  <Child />
-                </span>
-              </React.Suspense>
-            </div>
-          );
-        }
-
-        // Render the final HTML.
-        suspend = true;
-        const finalHTML = ReactDOMServer.renderToString(<App />);
-
-        const container = document.createElement('div');
-        container.innerHTML = finalHTML;
-
-        let interaction;
-
-        const root = ReactDOM.createRoot(container, {hydrate: true});
-
-        // Hydrate without suspending to fill in the client-rendered content.
-        suspend = false;
-        SchedulerTracing.unstable_trace('initialization', 0, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-
-          root.render(<App />);
-        });
-
-        expect(onWorkStopped).toHaveBeenCalledTimes(1);
-
-        // Advance time a bit so that we get into a new expiration bucket.
-        Scheduler.unstable_advanceTime(300);
-        jest.advanceTimersByTime(300);
-
-        Scheduler.unstable_flushAll();
-        jest.runAllTimers();
-
-        expect(ref.current).not.toBe(null);
-
-        // We should've had two commits that was traced.
-        // First one that hydrates the parent, and then one that hydrates
-        // the boundary at higher than Never priority.
-        expect(onWorkStopped).toHaveBeenCalledTimes(3);
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interaction,
-        );
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-    });
-  });
-});
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 02c7541e3837..bac44d736e35 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -14,23 +14,15 @@ let React;
 let ReactFeatureFlags;
 let ReactNoop;
 let Scheduler;
-let ReactCache;
 let ReactTestRenderer;
 let ReactTestRendererAct;
-let SchedulerTracing;
 let AdvanceTime;
-let AsyncText;
-let ComponentWithPassiveEffect;
-let Text;
-let TextResource;
-let resourcePromise;
 
 function loadModules({
   enableProfilerTimer = true,
   enableProfilerCommitHooks = true,
   enableProfilerNestedUpdatePhase = true,
   enableProfilerNestedUpdateScheduledHook = false,
-  enableSchedulerTracing = true,
   replayFailedUnitOfWorkWithInvokeGuardedCallback = false,
   useNoopRenderer = false,
 } = {}) {
@@ -40,13 +32,10 @@ function loadModules({
   ReactFeatureFlags.enableProfilerCommitHooks = enableProfilerCommitHooks;
   ReactFeatureFlags.enableProfilerNestedUpdatePhase = enableProfilerNestedUpdatePhase;
   ReactFeatureFlags.enableProfilerNestedUpdateScheduledHook = enableProfilerNestedUpdateScheduledHook;
-  ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
   ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = replayFailedUnitOfWorkWithInvokeGuardedCallback;
 
   React = require('react');
   Scheduler = require('scheduler');
-  SchedulerTracing = require('scheduler/tracing');
-  ReactCache = require('react-cache');
 
   if (useNoopRenderer) {
     ReactNoop = require('react-noop-renderer');
@@ -72,4960 +61,2774 @@ function loadModules({
       return this.props.children || null;
     }
   };
-
-  resourcePromise = null;
-
-  TextResource = ReactCache.unstable_createResource(
-    ([text, ms = 0]) => {
-      resourcePromise = new Promise((resolve, reject) =>
-        setTimeout(() => {
-          Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
-          resolve(text);
-        }, ms),
-      );
-      return resourcePromise;
-    },
-    ([text, ms]) => text,
-  );
-
-  AsyncText = ({ms, text}) => {
-    try {
-      TextResource.read([text, ms]);
-      Scheduler.unstable_yieldValue(`AsyncText [${text}]`);
-      return text;
-    } catch (promise) {
-      if (typeof promise.then === 'function') {
-        Scheduler.unstable_yieldValue(`Suspend [${text}]`);
-      } else {
-        Scheduler.unstable_yieldValue(`Error [${text}]`);
-      }
-      throw promise;
-    }
-  };
-
-  Text = ({text}) => {
-    Scheduler.unstable_yieldValue(`Text [${text}]`);
-    return text;
-  };
-
-  ComponentWithPassiveEffect = () => {
-    // Intentionally schedule a passive effect so the onPostCommit hook will be called.
-    React.useEffect(() => {});
-    return null;
-  };
 }
 
 describe('Profiler', () => {
   describe('works in profiling and non-profiling bundles', () => {
-    [true, false].forEach(enableSchedulerTracing => {
-      [true, false].forEach(enableProfilerTimer => {
-        describe(`enableSchedulerTracing:${
-          enableSchedulerTracing ? 'enabled' : 'disabled'
-        } enableProfilerTimer:${
-          enableProfilerTimer ? 'enabled' : 'disabled'
-        }`, () => {
-          beforeEach(() => {
-            jest.resetModules();
-
-            loadModules({enableSchedulerTracing, 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', () => {
-              expect(() => {
-                ReactTestRenderer.create(<React.Profiler />);
-              }).toErrorDev(
-                '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)', () => {
-            // As root
-            expect(
-              ReactTestRenderer.create(
-                <React.Profiler id="label" onRender={jest.fn()} />,
-              ).toJSON(),
-            ).toMatchSnapshot();
-
-            // As non-root
-            expect(
-              ReactTestRenderer.create(
-                <div>
-                  <React.Profiler id="label" onRender={jest.fn()} />
-                </div>,
-              ).toJSON(),
-            ).toMatchSnapshot();
-          });
-
-          it('should render children', () => {
-            const FunctionComponent = ({label}) => <span>{label}</span>;
-            const renderer = ReactTestRenderer.create(
-              <div>
-                <span>outside span</span>
-                <React.Profiler id="label" onRender={jest.fn()}>
-                  <span>inside span</span>
-                  <FunctionComponent label="function component" />
-                </React.Profiler>
-              </div>,
-            );
-            expect(renderer.toJSON()).toMatchSnapshot();
-          });
+    [true, false].forEach(enableProfilerTimer => {
+      describe(`enableProfilerTimer:${
+        enableProfilerTimer ? 'enabled' : 'disabled'
+      }`, () => {
+        beforeEach(() => {
+          jest.resetModules();
+
+          loadModules({enableProfilerTimer});
+        });
 
-          it('should support nested Profilers', () => {
-            const FunctionComponent = ({label}) => <div>{label}</div>;
-            class ClassComponent extends React.Component {
-              render() {
-                return <block>{this.props.label}</block>;
-              }
-            }
-            const renderer = ReactTestRenderer.create(
-              <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>,
+        // 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', () => {
+            expect(() => {
+              ReactTestRenderer.create(<React.Profiler />);
+            }).toErrorDev(
+              'Profiler must specify an "id" of type `string` as a prop. Received the type `undefined` instead.',
+              {
+                withoutStack: true,
+              },
             );
-            expect(renderer.toJSON()).toMatchSnapshot();
           });
-        });
-      });
-    });
-  });
+        }
 
-  [true, false].forEach(enableSchedulerTracing => {
-    describe(`onRender enableSchedulerTracing:${
-      enableSchedulerTracing ? 'enabled' : 'disabled'
-    }`, () => {
-      beforeEach(() => {
-        jest.resetModules();
+        it('should support an empty Profiler (with no children)', () => {
+          // As root
+          expect(
+            ReactTestRenderer.create(
+              <React.Profiler id="label" onRender={jest.fn()} />,
+            ).toJSON(),
+          ).toMatchSnapshot();
 
-        loadModules({
-          enableSchedulerTracing,
+          // As non-root
+          expect(
+            ReactTestRenderer.create(
+              <div>
+                <React.Profiler id="label" onRender={jest.fn()} />
+              </div>,
+            ).toJSON(),
+          ).toMatchSnapshot();
         });
-      });
 
-      it('should handle errors thrown', () => {
-        const callback = jest.fn(id => {
-          if (id === 'throw') {
-            throw Error('expected');
-          }
+        it('should render children', () => {
+          const FunctionComponent = ({label}) => <span>{label}</span>;
+          const renderer = ReactTestRenderer.create(
+            <div>
+              <span>outside span</span>
+              <React.Profiler id="label" onRender={jest.fn()}>
+                <span>inside span</span>
+                <FunctionComponent label="function component" />
+              </React.Profiler>
+            </div>,
+          );
+          expect(renderer.toJSON()).toMatchSnapshot();
         });
 
-        let didMount = false;
-        class ClassComponent extends React.Component {
-          componentDidMount() {
-            didMount = true;
-          }
-          render() {
-            return this.props.children;
+        it('should support nested Profilers', () => {
+          const FunctionComponent = ({label}) => <div>{label}</div>;
+          class ClassComponent extends React.Component {
+            render() {
+              return <block>{this.props.label}</block>;
+            }
           }
-        }
-
-        // Errors thrown from onRender should not break the commit phase,
-        // Or prevent other lifecycles from being called.
-        expect(() =>
-          ReactTestRenderer.create(
-            <ClassComponent>
-              <React.Profiler id="do-not-throw" onRender={callback}>
-                <React.Profiler id="throw" onRender={callback}>
-                  <div />
-                </React.Profiler>
+          const renderer = ReactTestRenderer.create(
+            <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>
-            </ClassComponent>,
-          ),
-        ).toThrow('expected');
-        expect(didMount).toBe(true);
-        expect(callback).toHaveBeenCalledTimes(2);
-      });
-
-      // @gate experimental || !enableSyncDefaultUpdates
-      it('is not invoked until the commit phase', () => {
-        const callback = jest.fn();
-
-        const Yield = ({value}) => {
-          Scheduler.unstable_yieldValue(value);
-          return null;
-        };
-
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
-            ReactTestRenderer.create(
-              <React.Profiler id="test" onRender={callback}>
-                <Yield value="first" />
-                <Yield value="last" />
-              </React.Profiler>,
-              {
-                unstable_isConcurrent: true,
-              },
-            );
-          });
-        } else {
-          ReactTestRenderer.create(
-            <React.Profiler id="test" onRender={callback}>
-              <Yield value="first" />
-              <Yield value="last" />
             </React.Profiler>,
-            {
-              unstable_isConcurrent: true,
-            },
           );
-        }
-
-        // Times are logged until a render is committed.
-        expect(Scheduler).toFlushAndYieldThrough(['first']);
-        expect(callback).toHaveBeenCalledTimes(0);
-        expect(Scheduler).toFlushAndYield(['last']);
-        expect(callback).toHaveBeenCalledTimes(1);
+          expect(renderer.toJSON()).toMatchSnapshot();
+        });
       });
+    });
+  });
+});
 
-      it('does not record times for components outside of Profiler tree', () => {
-        // Mock the Scheduler module so we can track how many times the current
-        // time is read
-        jest.mock('scheduler', obj => {
-          const ActualScheduler = require.requireActual(
-            'scheduler/unstable_mock',
-          );
-          return {
-            ...ActualScheduler,
-            unstable_now: function mockUnstableNow() {
-              ActualScheduler.unstable_yieldValue('read current time');
-              return ActualScheduler.unstable_now();
-            },
-          };
-        });
+describe(`onRender`, () => {
+  beforeEach(() => {
+    jest.resetModules();
 
-        jest.resetModules();
+    loadModules();
+  });
 
-        loadModules({enableSchedulerTracing});
+  it('should handle errors thrown', () => {
+    const callback = jest.fn(id => {
+      if (id === 'throw') {
+        throw Error('expected');
+      }
+    });
 
-        // Clear yields in case the current time is read during initialization.
-        Scheduler.unstable_clearYields();
+    let didMount = false;
+    class ClassComponent extends React.Component {
+      componentDidMount() {
+        didMount = true;
+      }
+      render() {
+        return this.props.children;
+      }
+    }
 
-        ReactTestRenderer.create(
-          <div>
-            <AdvanceTime />
-            <AdvanceTime />
-            <AdvanceTime />
-            <AdvanceTime />
-            <AdvanceTime />
-          </div>,
-        );
+    // Errors thrown from onRender should not break the commit phase,
+    // Or prevent other lifecycles from being called.
+    expect(() =>
+      ReactTestRenderer.create(
+        <ClassComponent>
+          <React.Profiler id="do-not-throw" onRender={callback}>
+            <React.Profiler id="throw" onRender={callback}>
+              <div />
+            </React.Profiler>
+          </React.Profiler>
+        </ClassComponent>,
+      ),
+    ).toThrow('expected');
+    expect(didMount).toBe(true);
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
 
-        // TODO: unstable_now is called by more places than just the profiler.
-        // Rewrite this test so it's less fragile.
-        expect(Scheduler).toHaveYielded([
-          'read current time',
-          'read current time',
-          'read current time',
-          'read current time',
-          'read current time',
-        ]);
-
-        // Restore original mock
-        jest.mock('scheduler', () =>
-          require.requireActual('scheduler/unstable_mock'),
-        );
-      });
+  // @gate experimental || !enableSyncDefaultUpdates
+  it('is not invoked until the commit phase', () => {
+    const callback = jest.fn();
 
-      it('does not report work done on a sibling', () => {
-        const callback = jest.fn();
+    const Yield = ({value}) => {
+      Scheduler.unstable_yieldValue(value);
+      return null;
+    };
 
-        const DoesNotUpdate = React.memo(
-          function DoesNotUpdateInner() {
-            Scheduler.unstable_advanceTime(10);
-            return null;
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.unstable_startTransition(() => {
+        ReactTestRenderer.create(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield value="first" />
+            <Yield value="last" />
+          </React.Profiler>,
+          {
+            unstable_isConcurrent: true,
           },
-          () => true,
         );
+      });
+    } else {
+      ReactTestRenderer.create(
+        <React.Profiler id="test" onRender={callback}>
+          <Yield value="first" />
+          <Yield value="last" />
+        </React.Profiler>,
+        {
+          unstable_isConcurrent: true,
+        },
+      );
+    }
 
-        let updateProfilerSibling;
+    // Times are logged until a render is committed.
+    expect(Scheduler).toFlushAndYieldThrough(['first']);
+    expect(callback).toHaveBeenCalledTimes(0);
+    expect(Scheduler).toFlushAndYield(['last']);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
 
-        function ProfilerSibling() {
-          const [count, setCount] = React.useState(0);
-          updateProfilerSibling = () => setCount(count + 1);
-          return null;
-        }
+  it('does not record times for components outside of Profiler tree', () => {
+    // Mock the Scheduler module so we can track how many times the current
+    // time is read
+    jest.mock('scheduler', obj => {
+      const ActualScheduler = require.requireActual('scheduler/unstable_mock');
+      return {
+        ...ActualScheduler,
+        unstable_now: function mockUnstableNow() {
+          ActualScheduler.unstable_yieldValue('read current time');
+          return ActualScheduler.unstable_now();
+        },
+      };
+    });
 
-        function App() {
-          return (
-            <React.Fragment>
-              <React.Profiler id="test" onRender={callback}>
-                <DoesNotUpdate />
-              </React.Profiler>
-              <ProfilerSibling />
-            </React.Fragment>
-          );
-        }
+    jest.resetModules();
+
+    loadModules();
+
+    // Clear yields in case the current time is read during initialization.
+    Scheduler.unstable_clearYields();
+
+    ReactTestRenderer.create(
+      <div>
+        <AdvanceTime />
+        <AdvanceTime />
+        <AdvanceTime />
+        <AdvanceTime />
+        <AdvanceTime />
+      </div>,
+    );
+
+    // TODO: unstable_now is called by more places than just the profiler.
+    // Rewrite this test so it's less fragile.
+    expect(Scheduler).toHaveYielded([
+      'read current time',
+      'read current time',
+      'read current time',
+      'read current time',
+      'read current time',
+    ]);
+
+    // Restore original mock
+    jest.mock('scheduler', () =>
+      require.requireActual('scheduler/unstable_mock'),
+    );
+  });
 
-        const renderer = ReactTestRenderer.create(<App />);
+  it('does not report work done on a sibling', () => {
+    const callback = jest.fn();
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    const DoesNotUpdate = React.memo(
+      function DoesNotUpdateInner() {
+        Scheduler.unstable_advanceTime(10);
+        return null;
+      },
+      () => true,
+    );
 
-        let call = callback.mock.calls[0];
+    let updateProfilerSibling;
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 7 : 6);
-        expect(call[0]).toBe('test');
-        expect(call[1]).toBe('mount');
-        expect(call[2]).toBe(10); // actual time
-        expect(call[3]).toBe(10); // base time
-        expect(call[4]).toBe(0); // start time
-        expect(call[5]).toBe(10); // commit time
-        expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    function ProfilerSibling() {
+      const [count, setCount] = React.useState(0);
+      updateProfilerSibling = () => setCount(count + 1);
+      return null;
+    }
 
-        callback.mockReset();
+    function App() {
+      return (
+        <React.Fragment>
+          <React.Profiler id="test" onRender={callback}>
+            <DoesNotUpdate />
+          </React.Profiler>
+          <ProfilerSibling />
+        </React.Fragment>
+      );
+    }
 
-        Scheduler.unstable_advanceTime(20); // 10 -> 30
+    const renderer = ReactTestRenderer.create(<App />);
 
-        renderer.update(<App />);
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        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);
+    let call = callback.mock.calls[0];
 
-          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
 
-          expect(call).toHaveLength(enableSchedulerTracing ? 7 : 6);
-          expect(call[0]).toBe('test');
-          expect(call[1]).toBe('update');
-          expect(call[2]).toBe(0); // actual time
-          expect(call[3]).toBe(10); // base time
-          expect(call[4]).toBe(30); // start time
-          expect(call[5]).toBe(30); // commit time
-          expect(call[6]).toEqual(
-            enableSchedulerTracing ? new Set() : undefined,
-          ); // interaction events
+    callback.mockReset();
 
-          callback.mockReset();
-        }
+    Scheduler.unstable_advanceTime(20); // 10 -> 30
 
-        Scheduler.unstable_advanceTime(20); // 30 -> 50
+    renderer.update(<App />);
 
-        // Updating a sibling should not report a re-render.
-        ReactTestRendererAct(updateProfilerSibling);
+    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);
 
-        expect(callback).not.toHaveBeenCalled();
-      });
+      call = callback.mock.calls[0];
 
-      it('logs render times for both mount and update', () => {
-        const callback = jest.fn();
+      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
 
-        Scheduler.unstable_advanceTime(5); // 0 -> 5
+      callback.mockReset();
+    }
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="test" onRender={callback}>
-            <AdvanceTime />
-          </React.Profiler>,
-        );
+    Scheduler.unstable_advanceTime(20); // 30 -> 50
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    // Updating a sibling should not report a re-render.
+    ReactTestRendererAct(updateProfilerSibling);
 
-        let [call] = callback.mock.calls;
+    expect(callback).not.toHaveBeenCalled();
+  });
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 7 : 6);
-        expect(call[0]).toBe('test');
-        expect(call[1]).toBe('mount');
-        expect(call[2]).toBe(10); // actual time
-        expect(call[3]).toBe(10); // base time
-        expect(call[4]).toBe(5); // start time
-        expect(call[5]).toBe(15); // commit time
-        expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+  it('logs render times for both mount and update', () => {
+    const callback = jest.fn();
 
-        callback.mockReset();
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
 
-        Scheduler.unstable_advanceTime(20); // 15 -> 35
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="test" onRender={callback}>
+        <AdvanceTime />
+      </React.Profiler>,
+    );
 
-        renderer.update(
-          <React.Profiler id="test" onRender={callback}>
-            <AdvanceTime />
-          </React.Profiler>,
-        );
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    let [call] = callback.mock.calls;
 
-        [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
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 7 : 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
-        expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    callback.mockReset();
 
-        callback.mockReset();
+    Scheduler.unstable_advanceTime(20); // 15 -> 35
 
-        Scheduler.unstable_advanceTime(20); // 45 -> 65
+    renderer.update(
+      <React.Profiler id="test" onRender={callback}>
+        <AdvanceTime />
+      </React.Profiler>,
+    );
 
-        renderer.update(
-          <React.Profiler id="test" onRender={callback}>
-            <AdvanceTime byAmount={4} />
-          </React.Profiler>,
-        );
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    [call] = callback.mock.calls;
 
-        [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
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 7 : 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
-        expect(call[6]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    callback.mockReset();
 
-      it('includes render times of nested Profilers in their parent times', () => {
-        const callback = jest.fn();
+    Scheduler.unstable_advanceTime(20); // 45 -> 65
 
-        Scheduler.unstable_advanceTime(5); // 0 -> 5
+    renderer.update(
+      <React.Profiler id="test" onRender={callback}>
+        <AdvanceTime byAmount={4} />
+      </React.Profiler>,
+    );
 
-        ReactTestRenderer.create(
-          <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(1);
 
-        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
-      });
+    [call] = callback.mock.calls;
 
-      it('traces sibling Profilers separately', () => {
-        const callback = jest.fn();
+    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
+  });
 
-        Scheduler.unstable_advanceTime(5); // 0 -> 5
+  it('includes render times of nested Profilers in their parent times', () => {
+    const callback = jest.fn();
 
-        ReactTestRenderer.create(
-          <React.Fragment>
-            <React.Profiler id="first" onRender={callback}>
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    ReactTestRenderer.create(
+      <React.Fragment>
+        <React.Profiler id="parent" onRender={callback}>
+          <AdvanceTime byAmount={10}>
+            <React.Profiler id="child" onRender={callback}>
               <AdvanceTime byAmount={20} />
             </React.Profiler>
-            <React.Profiler id="second" onRender={callback}>
-              <AdvanceTime byAmount={5} />
-            </React.Profiler>
-          </React.Fragment>,
-        );
+          </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
+  });
 
-        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('traces sibling Profilers separately', () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    ReactTestRenderer.create(
+      <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', () => {
-        const callback = jest.fn();
+  it('does not include time spent outside of profile root', () => {
+    const callback = jest.fn();
+
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+    ReactTestRenderer.create(
+      <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
+  });
 
-        Scheduler.unstable_advanceTime(5); // 0 -> 5
+  it('is not called when blocked by sCU false', () => {
+    const callback = jest.fn();
 
-        ReactTestRenderer.create(
-          <React.Fragment>
-            <AdvanceTime byAmount={20} />
-            <React.Profiler id="test" onRender={callback}>
-              <AdvanceTime byAmount={5} />
-            </React.Profiler>
-            <AdvanceTime byAmount={20} />
-          </React.Fragment>,
-        );
+    let instance;
+    class Updater extends React.Component {
+      state = {};
+      render() {
+        instance = this;
+        return this.props.children;
+      }
+    }
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="outer" onRender={callback}>
+        <Updater>
+          <React.Profiler id="inner" onRender={callback}>
+            <div />
+          </React.Profiler>
+        </Updater>
+      </React.Profiler>,
+    );
 
-        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
-      });
+    // All profile callbacks are called for initial render
+    expect(callback).toHaveBeenCalledTimes(2);
 
-      it('is not called when blocked by sCU false', () => {
-        const callback = jest.fn();
+    callback.mockReset();
 
-        let instance;
-        class Updater extends React.Component {
-          state = {};
-          render() {
-            instance = this;
-            return this.props.children;
-          }
-        }
+    renderer.unstable_flushSync(() => {
+      instance.setState({
+        count: 1,
+      });
+    });
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="outer" onRender={callback}>
-            <Updater>
-              <React.Profiler id="inner" onRender={callback}>
-                <div />
-              </React.Profiler>
-            </Updater>
-          </React.Profiler>,
-        );
+    // 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');
+  });
 
-        // All profile callbacks are called for initial render
-        expect(callback).toHaveBeenCalledTimes(2);
+  it('decreases actual time but not base time when sCU prevents an update', () => {
+    const callback = jest.fn();
 
-        callback.mockReset();
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
 
-        renderer.unstable_flushSync(() => {
-          instance.setState({
-            count: 1,
-          });
-        });
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="test" onRender={callback}>
+        <AdvanceTime byAmount={10}>
+          <AdvanceTime byAmount={13} shouldComponentUpdate={false} />
+        </AdvanceTime>
+      </React.Profiler>,
+    );
 
-        // 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');
-      });
+    expect(callback).toHaveBeenCalledTimes(1);
 
-      it('decreases actual time but not base time when sCU prevents an update', () => {
-        const callback = jest.fn();
+    Scheduler.unstable_advanceTime(30); // 28 -> 58
 
-        Scheduler.unstable_advanceTime(5); // 0 -> 5
+    renderer.update(
+      <React.Profiler id="test" onRender={callback}>
+        <AdvanceTime byAmount={4}>
+          <AdvanceTime byAmount={7} shouldComponentUpdate={false} />
+        </AdvanceTime>
+      </React.Profiler>,
+    );
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="test" onRender={callback}>
-            <AdvanceTime byAmount={10}>
-              <AdvanceTime byAmount={13} shouldComponentUpdate={false} />
-            </AdvanceTime>
-          </React.Profiler>,
-        );
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    const [mountCall, updateCall] = callback.mock.calls;
 
-        Scheduler.unstable_advanceTime(30); // 28 -> 58
+    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
 
-        renderer.update(
-          <React.Profiler id="test" onRender={callback}>
-            <AdvanceTime byAmount={4}>
-              <AdvanceTime byAmount={7} shouldComponentUpdate={false} />
-            </AdvanceTime>
-          </React.Profiler>,
-        );
+    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
+  });
 
-        expect(callback).toHaveBeenCalledTimes(2);
+  it('includes time spent in render phase lifecycles', () => {
+    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 [mountCall, updateCall] = callback.mock.calls;
+    const callback = jest.fn();
 
-        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
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
 
-        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
-      });
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="test" onRender={callback}>
+        <WithLifecycles />
+      </React.Profiler>,
+    );
 
-      it('includes time spent in render phase lifecycles', () => {
-        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;
-          }
-        }
+    Scheduler.unstable_advanceTime(15); // 13 -> 28
 
-        const callback = jest.fn();
+    renderer.update(
+      <React.Profiler id="test" onRender={callback}>
+        <WithLifecycles />
+      </React.Profiler>,
+    );
 
-        Scheduler.unstable_advanceTime(5); // 0 -> 5
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="test" onRender={callback}>
-            <WithLifecycles />
-          </React.Profiler>,
-        );
+    const [mountCall, updateCall] = callback.mock.calls;
 
-        Scheduler.unstable_advanceTime(15); // 13 -> 28
+    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
 
-        renderer.update(
-          <React.Profiler id="test" onRender={callback}>
-            <WithLifecycles />
-          </React.Profiler>,
-        );
+    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
+  });
 
-        expect(callback).toHaveBeenCalledTimes(2);
+  it('should clear nested-update flag when multiple cascading renders are scheduled', () => {
+    loadModules({
+      useNoopRenderer: true,
+    });
 
-        const [mountCall, updateCall] = callback.mock.calls;
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
+      const [didMountAndUpdate, setDidMountAndUpdate] = React.useState(false);
 
-        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
+      React.useLayoutEffect(() => {
+        setDidMount(true);
+      }, []);
 
-        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
-      });
+      React.useEffect(() => {
+        if (didMount && !didMountAndUpdate) {
+          setDidMountAndUpdate(true);
+        }
+      }, [didMount, didMountAndUpdate]);
 
-      it('should clear nested-update flag when multiple cascading renders are scheduled', () => {
-        loadModules({
-          enableSchedulerTracing,
-          useNoopRenderer: true,
-        });
+      Scheduler.unstable_yieldValue(`${didMount}:${didMountAndUpdate}`);
 
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
-          const [didMountAndUpdate, setDidMountAndUpdate] = React.useState(
-            false,
-          );
+      return null;
+    }
 
-          React.useLayoutEffect(() => {
-            setDidMount(true);
-          }, []);
+    const onRender = jest.fn();
 
-          React.useEffect(() => {
-            if (didMount && !didMountAndUpdate) {
-              setDidMountAndUpdate(true);
-            }
-          }, [didMount, didMountAndUpdate]);
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler id="root" onRender={onRender}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['false:false', 'true:false', 'true:true']);
 
-          Scheduler.unstable_yieldValue(`${didMount}:${didMountAndUpdate}`);
+    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');
+  });
 
-          return null;
-        }
+  // @gate experimental
+  it('is properly distinguish updates and nested-updates when there is more than sync remaining work', () => {
+    loadModules({
+      useNoopRenderer: true,
+    });
 
-        const onRender = jest.fn();
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
 
-        ReactNoop.act(() => {
-          ReactNoop.render(
-            <React.Profiler id="root" onRender={onRender}>
-              <Component />
-            </React.Profiler>,
-          );
-        });
-        expect(Scheduler).toHaveYielded([
-          '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');
-      });
+      React.useLayoutEffect(() => {
+        setDidMount(true);
+      }, []);
+      Scheduler.unstable_yieldValue(didMount);
+      return didMount;
+    }
 
-      // @gate experimental
-      it('is properly distinguish updates and nested-updates when there is more than sync remaining work', () => {
-        loadModules({
-          enableSchedulerTracing,
-          useNoopRenderer: true,
-        });
+    const onRender = jest.fn();
+
+    // Schedule low-priority work.
+    React.unstable_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>,
+      );
+    });
+    expect(Scheduler).toHaveYielded([false, true]);
 
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
+    // 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');
+  });
 
-          React.useLayoutEffect(() => {
-            setDidMount(true);
-          }, []);
-          Scheduler.unstable_yieldValue(didMount);
-          return didMount;
-        }
+  describe('with regard to interruptions', () => {
+    // @gate experimental || !enableSyncDefaultUpdates
+    it('should accumulate actual time after a scheduling interruptions', () => {
+      const callback = jest.fn();
 
-        const onRender = jest.fn();
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.unstable_yieldValue('Yield:' + renderTime);
+        return null;
+      };
 
-        // Schedule low-priority work.
-        React.unstable_startTransition(() =>
-          ReactNoop.render(
-            <React.Profiler id="root" onRender={onRender}>
-              <Component />
-            </React.Profiler>,
-          ),
-        );
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
 
-        // Flush sync work with a nested update
-        ReactNoop.flushSync(() => {
-          ReactNoop.render(
-            <React.Profiler id="root" onRender={onRender}>
-              <Component />
+      // Render partially, but run out of time before completing.
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactTestRenderer.create(
+            <React.Profiler id="test" onRender={callback}>
+              <Yield renderTime={2} />
+              <Yield renderTime={3} />
             </React.Profiler>,
+            {unstable_isConcurrent: true},
           );
         });
-        expect(Scheduler).toHaveYielded([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');
-      });
+      } else {
+        ReactTestRenderer.create(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={2} />
+            <Yield renderTime={3} />
+          </React.Profiler>,
+          {unstable_isConcurrent: true},
+        );
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['Yield:2']);
+      expect(callback).toHaveBeenCalledTimes(0);
 
-      describe('with regard to interruptions', () => {
-        // @gate experimental || !enableSyncDefaultUpdates
-        it('should accumulate actual time after a scheduling interruptions', () => {
-          const callback = jest.fn();
+      // Resume render for remaining children.
+      expect(Scheduler).toFlushAndYield(['Yield:3']);
 
-          const Yield = ({renderTime}) => {
-            Scheduler.unstable_advanceTime(renderTime);
-            Scheduler.unstable_yieldValue('Yield:' + renderTime);
-            return null;
-          };
+      // 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
+    });
 
-          Scheduler.unstable_advanceTime(5); // 0 -> 5
+    // @gate experimental || !enableSyncDefaultUpdates
+    it('should not include time between frames', () => {
+      const callback = jest.fn();
 
-          // Render partially, but run out of time before completing.
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
-              ReactTestRenderer.create(
-                <React.Profiler id="test" onRender={callback}>
-                  <Yield renderTime={2} />
-                  <Yield renderTime={3} />
-                </React.Profiler>,
-                {unstable_isConcurrent: true},
-              );
-            });
-          } else {
-            ReactTestRenderer.create(
-              <React.Profiler id="test" onRender={callback}>
-                <Yield renderTime={2} />
-                <Yield renderTime={3} />
-              </React.Profiler>,
-              {unstable_isConcurrent: true},
-            );
-          }
-          expect(Scheduler).toFlushAndYieldThrough(['Yield:2']);
-          expect(callback).toHaveBeenCalledTimes(0);
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.unstable_yieldValue('Yield:' + renderTime);
+        return null;
+      };
 
-          // Resume render for remaining children.
-          expect(Scheduler).toFlushAndYield(['Yield:3']);
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
 
-          // 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
+      // Render partially, but don't finish.
+      // This partial render should take 5ms of simulated time.
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          ReactTestRenderer.create(
+            <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>,
+            {unstable_isConcurrent: true},
+          );
         });
+      } else {
+        ReactTestRenderer.create(
+          <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>,
+          {unstable_isConcurrent: true},
+        );
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['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.
+      expect(Scheduler).toFlushAndYield(['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
+    });
 
-        // @gate experimental || !enableSyncDefaultUpdates
-        it('should not include time between frames', () => {
-          const callback = jest.fn();
-
-          const Yield = ({renderTime}) => {
-            Scheduler.unstable_advanceTime(renderTime);
-            Scheduler.unstable_yieldValue('Yield:' + renderTime);
-            return null;
-          };
+    // @gate experimental || !enableSyncDefaultUpdates
+    it('should report the expected times when a high-pri update replaces a mount in-progress', () => {
+      const callback = jest.fn();
 
-          Scheduler.unstable_advanceTime(5); // 0 -> 5
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.unstable_yieldValue('Yield:' + renderTime);
+        return null;
+      };
 
-          // Render partially, but don't finish.
-          // This partial render should take 5ms of simulated time.
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
-              ReactTestRenderer.create(
-                <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>,
-                {unstable_isConcurrent: true},
-              );
-            });
-          } else {
-            ReactTestRenderer.create(
-              <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>,
-              {unstable_isConcurrent: true},
-            );
-          }
-          expect(Scheduler).toFlushAndYieldThrough(['Yield:5']);
-          expect(callback).toHaveBeenCalledTimes(0);
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      // Render a partially update, but don't finish.
+      // This partial render should take 10ms of simulated time.
+      let renderer;
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          renderer = ReactTestRenderer.create(
+            <React.Profiler id="test" onRender={callback}>
+              <Yield renderTime={10} />
+              <Yield renderTime={20} />
+            </React.Profiler>,
+            {unstable_isConcurrent: true},
+          );
+        });
+      } else {
+        renderer = ReactTestRenderer.create(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={10} />
+            <Yield renderTime={20} />
+          </React.Profiler>,
+          {unstable_isConcurrent: true},
+        );
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['Yield:10']);
+      expect(callback).toHaveBeenCalledTimes(0);
 
-          // Simulate time moving forward while frame is paused.
-          Scheduler.unstable_advanceTime(50); // 10 -> 60
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(100); // 15 -> 115
 
-          // Flush the remaining work,
-          // Which should take an additional 10ms of simulated time.
-          expect(Scheduler).toFlushAndYield(['Yield:10', 'Yield:17']);
-          expect(callback).toHaveBeenCalledTimes(2);
+      // Interrupt with higher priority work.
+      // The interrupted work simulates an additional 5ms of time.
+      renderer.unstable_flushSync(() => {
+        renderer.update(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={5} />
+          </React.Profiler>,
+        );
+      });
+      expect(Scheduler).toHaveYielded(['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
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(callback).toHaveBeenCalledTimes(0);
+    });
+
+    // @gate experimental || !enableSyncDefaultUpdates
+    it('should report the expected times when a high-priority update replaces a low-priority update', () => {
+      const callback = jest.fn();
+
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.unstable_yieldValue('Yield:' + renderTime);
+        return null;
+      };
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      const renderer = ReactTestRenderer.create(
+        <React.Profiler id="test" onRender={callback}>
+          <Yield renderTime={6} />
+          <Yield renderTime={15} />
+        </React.Profiler>,
+        {unstable_isConcurrent: true},
+      );
+
+      // Render everything initially.
+      // This should take 21 seconds of actual and base time.
+      expect(Scheduler).toFlushAndYield(['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();
 
-          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
+      Scheduler.unstable_advanceTime(30); // 26 -> 56
+
+      // Render a partially update, but don't finish.
+      // This partial render should take 3ms of simulated time.
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          renderer.update(
+            <React.Profiler id="test" onRender={callback}>
+              <Yield renderTime={3} />
+              <Yield renderTime={5} />
+              <Yield renderTime={9} />
+            </React.Profiler>,
+          );
         });
+      } else {
+        renderer.update(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={3} />
+            <Yield renderTime={5} />
+            <Yield renderTime={9} />
+          </React.Profiler>,
+        );
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['Yield:3']);
+      expect(callback).toHaveBeenCalledTimes(0);
 
-        // @gate experimental || !enableSyncDefaultUpdates
-        it('should report the expected times when a high-pri update replaces a mount in-progress', () => {
-          const callback = jest.fn();
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(100); // 59 -> 159
 
-          const Yield = ({renderTime}) => {
-            Scheduler.unstable_advanceTime(renderTime);
-            Scheduler.unstable_yieldValue('Yield:' + renderTime);
-            return null;
-          };
+      // Render another 5ms of simulated time.
+      expect(Scheduler).toFlushAndYieldThrough(['Yield:5']);
+      expect(callback).toHaveBeenCalledTimes(0);
 
-          Scheduler.unstable_advanceTime(5); // 0 -> 5
+      // Simulate time moving forward while frame is paused.
+      Scheduler.unstable_advanceTime(100); // 164 -> 264
 
-          // Render a partially update, but don't finish.
-          // This partial render should take 10ms of simulated time.
-          let renderer;
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
-              renderer = ReactTestRenderer.create(
-                <React.Profiler id="test" onRender={callback}>
-                  <Yield renderTime={10} />
-                  <Yield renderTime={20} />
-                </React.Profiler>,
-                {unstable_isConcurrent: true},
-              );
-            });
-          } else {
-            renderer = ReactTestRenderer.create(
-              <React.Profiler id="test" onRender={callback}>
-                <Yield renderTime={10} />
-                <Yield renderTime={20} />
-              </React.Profiler>,
-              {unstable_isConcurrent: true},
-            );
-          }
-          expect(Scheduler).toFlushAndYieldThrough(['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.
-          renderer.unstable_flushSync(() => {
-            renderer.update(
-              <React.Profiler id="test" onRender={callback}>
-                <Yield renderTime={5} />
-              </React.Profiler>,
-            );
-          });
-          expect(Scheduler).toHaveYielded(['Yield:5']);
+      // Interrupt with higher priority work.
+      // The interrupted work simulates an additional 11ms of time.
+      renderer.unstable_flushSync(() => {
+        renderer.update(
+          <React.Profiler id="test" onRender={callback}>
+            <Yield renderTime={11} />
+          </React.Profiler>,
+        );
+      });
+      expect(Scheduler).toHaveYielded(['Yield:11']);
 
-          // 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
+      // 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
+      expect(Scheduler).toFlushAndYield([]);
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
 
-          callback.mockReset();
+    // @gate experimental || !enableSyncDefaultUpdates
+    it('should report the expected times when a high-priority update interrupts a low-priority update', () => {
+      const callback = jest.fn();
 
-          // Verify no more unexpected callbacks from low priority work
-          expect(Scheduler).toFlushWithoutYielding();
-          expect(callback).toHaveBeenCalledTimes(0);
+      const Yield = ({renderTime}) => {
+        Scheduler.unstable_advanceTime(renderTime);
+        Scheduler.unstable_yieldValue('Yield:' + renderTime);
+        return null;
+      };
+
+      let first;
+      class FirstComponent extends React.Component {
+        state = {renderTime: 1};
+        render() {
+          first = this;
+          Scheduler.unstable_advanceTime(this.state.renderTime);
+          Scheduler.unstable_yieldValue(
+            '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.unstable_yieldValue(
+            'SecondComponent:' + this.state.renderTime,
+          );
+          return <Yield renderTime={7} />;
+        }
+      }
+
+      Scheduler.unstable_advanceTime(5); // 0 -> 5
+
+      const renderer = ReactTestRenderer.create(
+        <React.Profiler id="test" onRender={callback}>
+          <FirstComponent />
+          <SecondComponent />
+        </React.Profiler>,
+        {unstable_isConcurrent: true},
+      );
+
+      // Render everything initially.
+      // This simulates a total of 14ms of actual render time.
+      // The base render time is also 14ms for the initial render.
+      expect(Scheduler).toFlushAndYield([
+        '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.
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          first.setState({renderTime: 10});
+        });
+      } else {
+        first.setState({renderTime: 10});
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['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.
+      renderer.unstable_flushSync(() => second.setState({renderTime: 30}));
+      expect(Scheduler).toHaveYielded(['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.
+      expect(Scheduler).toFlushAndYield(['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
+    });
+
+    [true, false].forEach(replayFailedUnitOfWorkWithInvokeGuardedCallback => {
+      describe(`replayFailedUnitOfWorkWithInvokeGuardedCallback ${
+        replayFailedUnitOfWorkWithInvokeGuardedCallback ? 'enabled' : 'disabled'
+      }`, () => {
+        beforeEach(() => {
+          jest.resetModules();
+
+          loadModules({
+            replayFailedUnitOfWorkWithInvokeGuardedCallback,
+          });
         });
 
-        // @gate experimental || !enableSyncDefaultUpdates
-        it('should report the expected times when a high-priority update replaces a low-priority update', () => {
+        it('should accumulate actual time after an error handled by componentDidCatch()', () => {
           const callback = jest.fn();
 
-          const Yield = ({renderTime}) => {
-            Scheduler.unstable_advanceTime(renderTime);
-            Scheduler.unstable_yieldValue('Yield:' + renderTime);
-            return null;
+          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 renderer = ReactTestRenderer.create(
+          ReactTestRenderer.create(
             <React.Profiler id="test" onRender={callback}>
-              <Yield renderTime={6} />
-              <Yield renderTime={15} />
+              <ErrorBoundary>
+                <AdvanceTime byAmount={9} />
+                <ThrowsError />
+              </ErrorBoundary>
             </React.Profiler>,
-            {unstable_isConcurrent: true},
           );
 
-          // Render everything initially.
-          // This should take 21 seconds of actual and base time.
-          expect(Scheduler).toFlushAndYield(['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.
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
-              renderer.update(
-                <React.Profiler id="test" onRender={callback}>
-                  <Yield renderTime={3} />
-                  <Yield renderTime={5} />
-                  <Yield renderTime={9} />
-                </React.Profiler>,
-              );
-            });
-          } else {
-            renderer.update(
-              <React.Profiler id="test" onRender={callback}>
-                <Yield renderTime={3} />
-                <Yield renderTime={5} />
-                <Yield renderTime={9} />
-              </React.Profiler>,
-            );
-          }
-          expect(Scheduler).toFlushAndYieldThrough(['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.
-          expect(Scheduler).toFlushAndYieldThrough(['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.
-          renderer.unstable_flushSync(() => {
-            renderer.update(
-              <React.Profiler id="test" onRender={callback}>
-                <Yield renderTime={11} />
-              </React.Profiler>,
-            );
-          });
-          expect(Scheduler).toHaveYielded(['Yield:11']);
+          expect(callback).toHaveBeenCalledTimes(2);
 
-          // 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
-          expect(Scheduler).toFlushAndYield([]);
-          expect(callback).toHaveBeenCalledTimes(1);
+          // 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
+          expect(mountCall[4]).toBe(5);
+          // commit time: 5 initially + 14 of work
+          // Add an additional 3 (ThrowsError) if we replayed the failed work
+          expect(mountCall[5]).toBe(
+            __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
+              ? 22
+              : 19,
+          );
+
+          // 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(
+            __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
+              ? 22
+              : 19,
+          );
+          // commit time: 19 (startTime) + 2 (ErrorBoundary) + 20 (AdvanceTime)
+          // Add an additional 3 (ThrowsError) if we replayed the failed work
+          expect(updateCall[5]).toBe(
+            __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
+              ? 44
+              : 41,
+          );
         });
 
-        // @gate experimental || !enableSyncDefaultUpdates
-        it('should report the expected times when a high-priority update interrupts a low-priority update', () => {
+        it('should accumulate actual time after an error handled by getDerivedStateFromError()', () => {
           const callback = jest.fn();
 
-          const Yield = ({renderTime}) => {
-            Scheduler.unstable_advanceTime(renderTime);
-            Scheduler.unstable_yieldValue('Yield:' + renderTime);
-            return null;
+          const ThrowsError = ({unused}) => {
+            Scheduler.unstable_advanceTime(10);
+            throw Error('expected error');
           };
 
-          let first;
-          class FirstComponent extends React.Component {
-            state = {renderTime: 1};
-            render() {
-              first = this;
-              Scheduler.unstable_advanceTime(this.state.renderTime);
-              Scheduler.unstable_yieldValue(
-                'FirstComponent:' + this.state.renderTime,
-              );
-              return <Yield renderTime={4} />;
+          class ErrorBoundary extends React.Component {
+            state = {error: null};
+            static getDerivedStateFromError(error) {
+              return {error};
             }
-          }
-          let second;
-          class SecondComponent extends React.Component {
-            state = {renderTime: 2};
             render() {
-              second = this;
-              Scheduler.unstable_advanceTime(this.state.renderTime);
-              Scheduler.unstable_yieldValue(
-                'SecondComponent:' + this.state.renderTime,
+              Scheduler.unstable_advanceTime(2);
+              return this.state.error === null ? (
+                this.props.children
+              ) : (
+                <AdvanceTime byAmount={20} />
               );
-              return <Yield renderTime={7} />;
             }
           }
 
           Scheduler.unstable_advanceTime(5); // 0 -> 5
 
-          const renderer = ReactTestRenderer.create(
+          ReactTestRenderer.create(
             <React.Profiler id="test" onRender={callback}>
-              <FirstComponent />
-              <SecondComponent />
+              <ErrorBoundary>
+                <AdvanceTime byAmount={5} />
+                <ThrowsError />
+              </ErrorBoundary>
             </React.Profiler>,
-            {unstable_isConcurrent: true},
           );
 
-          // Render everything initially.
-          // This simulates a total of 14ms of actual render time.
-          // The base render time is also 14ms for the initial render.
-          expect(Scheduler).toFlushAndYield([
-            '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.
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
-              first.setState({renderTime: 10});
-            });
-          } else {
-            first.setState({renderTime: 10});
-          }
-          expect(Scheduler).toFlushAndYieldThrough(['FirstComponent:10']);
-          expect(callback).toHaveBeenCalledTimes(0);
 
-          // Simulate time moving forward while frame is paused.
-          Scheduler.unstable_advanceTime(100); // 129 -> 229
+          // 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(5);
+          // commit time
+          expect(mountCall[5]).toBe(
+            __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
+              ? 54
+              : 44,
+          );
+        });
 
-          // Interrupt with higher priority work.
-          // This simulates a total of 37ms of actual render time.
-          renderer.unstable_flushSync(() => second.setState({renderTime: 30}));
-          expect(Scheduler).toHaveYielded(['SecondComponent:30', 'Yield:7']);
+        it('should reset the fiber stack correct after a "complete" phase error', () => {
+          jest.resetModules();
 
-          // 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.
-          expect(Scheduler).toFlushAndYield(['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
-        });
+          loadModules({
+            useNoopRenderer: true,
+            replayFailedUnitOfWorkWithInvokeGuardedCallback,
+          });
 
-        [true, false].forEach(
-          replayFailedUnitOfWorkWithInvokeGuardedCallback => {
-            describe(`replayFailedUnitOfWorkWithInvokeGuardedCallback ${
-              replayFailedUnitOfWorkWithInvokeGuardedCallback
-                ? 'enabled'
-                : 'disabled'
-            }`, () => {
-              beforeEach(() => {
-                jest.resetModules();
-
-                loadModules({
-                  replayFailedUnitOfWorkWithInvokeGuardedCallback,
-                });
-              });
-
-              it('should accumulate actual time after an error handled by componentDidCatch()', () => {
-                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
-
-                ReactTestRenderer.create(
-                  <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
-                expect(mountCall[4]).toBe(5);
-                // commit time: 5 initially + 14 of work
-                // Add an additional 3 (ThrowsError) if we replayed the failed work
-                expect(mountCall[5]).toBe(
-                  __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
-                    ? 22
-                    : 19,
-                );
-
-                // 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(
-                  __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
-                    ? 22
-                    : 19,
-                );
-                // commit time: 19 (startTime) + 2 (ErrorBoundary) + 20 (AdvanceTime)
-                // Add an additional 3 (ThrowsError) if we replayed the failed work
-                expect(updateCall[5]).toBe(
-                  __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
-                    ? 44
-                    : 41,
-                );
-              });
-
-              it('should accumulate actual time after an error handled by getDerivedStateFromError()', () => {
-                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
-
-                ReactTestRenderer.create(
-                  <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(5);
-                // commit time
-                expect(mountCall[5]).toBe(
-                  __DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback
-                    ? 54
-                    : 44,
-                );
-              });
-
-              it('should reset the fiber stack correct after a "complete" phase error', () => {
-                jest.resetModules();
-
-                loadModules({
-                  useNoopRenderer: true,
-                  replayFailedUnitOfWorkWithInvokeGuardedCallback,
-                });
-
-                // 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>,
-                );
-                expect(Scheduler).toFlushAndThrow('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>,
-                );
-                expect(Scheduler).toFlushAndThrow('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>,
-                );
-                expect(Scheduler).toFlushWithoutYielding();
-              });
-            });
-          },
-        );
-      });
+          // 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>,
+          );
+          expect(Scheduler).toFlushAndThrow('Error in host config.');
 
-      it('reflects the most recently rendered id value', () => {
-        const callback = jest.fn();
+          // 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>,
+          );
+          expect(Scheduler).toFlushAndThrow('Error in host config.');
 
-        Scheduler.unstable_advanceTime(5); // 0 -> 5
+          // 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>,
+          );
+          expect(Scheduler).toFlushWithoutYielding();
+        });
+      });
+    });
+  });
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="one" onRender={callback}>
-            <AdvanceTime byAmount={2} />
-          </React.Profiler>,
-        );
+  it('reflects the most recently rendered id value', () => {
+    const callback = jest.fn();
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    Scheduler.unstable_advanceTime(5); // 0 -> 5
 
-        Scheduler.unstable_advanceTime(20); // 7 -> 27
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="one" onRender={callback}>
+        <AdvanceTime byAmount={2} />
+      </React.Profiler>,
+    );
 
-        renderer.update(
-          <React.Profiler id="two" onRender={callback}>
-            <AdvanceTime byAmount={1} />
-          </React.Profiler>,
-        );
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    Scheduler.unstable_advanceTime(20); // 7 -> 27
 
-        const [mountCall, updateCall] = callback.mock.calls;
+    renderer.update(
+      <React.Profiler id="two" onRender={callback}>
+        <AdvanceTime byAmount={1} />
+      </React.Profiler>,
+    );
 
-        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(callback).toHaveBeenCalledTimes(2);
 
-        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
-      });
+    const [mountCall, updateCall] = callback.mock.calls;
 
-      it('should not be called until after mutations', () => {
-        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);
-          },
-        );
+    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
 
-        class ClassComponent extends React.Component {
-          componentDidMount() {
-            Scheduler.unstable_advanceTime(5);
-            classComponentMounted = true;
-          }
-          render() {
-            Scheduler.unstable_advanceTime(2);
-            return null;
-          }
-        }
+    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
+  });
 
-        ReactTestRenderer.create(
-          <React.Profiler id="test" onRender={callback}>
-            <ClassComponent />
-          </React.Profiler>,
-        );
+  it('should not be called until after mutations', () => {
+    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;
+      }
+    }
 
-        expect(callback).toHaveBeenCalledTimes(1);
-      });
-    });
+    ReactTestRenderer.create(
+      <React.Profiler id="test" onRender={callback}>
+        <ClassComponent />
+      </React.Profiler>,
+    );
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
 
-    describe(`onCommit enableSchedulerTracing:${
-      enableSchedulerTracing ? 'enabled' : 'disabled'
-    }`, () => {
-      beforeEach(() => {
-        jest.resetModules();
+describe(`onCommit`, () => {
+  beforeEach(() => {
+    jest.resetModules();
 
-        loadModules({
-          enableSchedulerTracing,
-        });
-      });
+    loadModules();
+  });
 
-      it('should report time spent in layout effects and commit lifecycles', () => {
-        const callback = jest.fn();
+  it('should report time spent in layout effects and commit lifecycles', () => {
+    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;
+    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;
-          }
-        }
+    class ComponentWithCommitHooks extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_advanceTime(100000);
+      }
+      componentDidUpdate() {
+        Scheduler.unstable_advanceTime(1000000);
+      }
+      render() {
+        return null;
+      }
+    }
 
-        Scheduler.unstable_advanceTime(1);
+    Scheduler.unstable_advanceTime(1);
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="mount-test" onCommit={callback}>
-            <ComponentWithEffects />
-            <ComponentWithCommitHooks />
-          </React.Profiler>,
-        );
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="mount-test" onCommit={callback}>
+        <ComponentWithEffects />
+        <ComponentWithCommitHooks />
+      </React.Profiler>,
+    );
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    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);
+    Scheduler.unstable_advanceTime(1);
 
-        renderer.update(
-          <React.Profiler id="update-test" onCommit={callback}>
-            <ComponentWithEffects />
-            <ComponentWithCommitHooks />
-          </React.Profiler>,
-        );
+    renderer.update(
+      <React.Profiler id="update-test" onCommit={callback}>
+        <ComponentWithEffects />
+        <ComponentWithCommitHooks />
+      </React.Profiler>,
+    );
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        call = callback.mock.calls[1];
+    call = callback.mock.calls[1];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    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);
+    Scheduler.unstable_advanceTime(1);
 
-        renderer.update(
-          <React.Profiler id="unmount-test" onCommit={callback} />,
-        );
+    renderer.update(<React.Profiler id="unmount-test" onCommit={callback} />);
 
-        expect(callback).toHaveBeenCalledTimes(3);
+    expect(callback).toHaveBeenCalledTimes(3);
 
-        call = callback.mock.calls[2];
+    call = callback.mock.calls[2];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    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', () => {
-        const callback = jest.fn();
+  it('should report time spent in layout effects and commit lifecycles with cascading renders', () => {
+    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;
+    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;
-          }
+    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);
+    Scheduler.unstable_advanceTime(1);
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="mount-test" onCommit={callback}>
-            <ComponentWithEffects shouldCascade={true} />
-            <ComponentWithCommitHooks />
-          </React.Profiler>,
-        );
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="mount-test" onCommit={callback}>
+        <ComponentWithEffects shouldCascade={true} />
+        <ComponentWithCommitHooks />
+      </React.Profiler>,
+    );
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    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];
+    call = callback.mock.calls[1];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    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);
+    Scheduler.unstable_advanceTime(1);
 
-        renderer.update(
-          <React.Profiler id="update-test" onCommit={callback}>
-            <ComponentWithEffects />
-            <ComponentWithCommitHooks shouldCascade={true} />
-          </React.Profiler>,
-        );
+    renderer.update(
+      <React.Profiler id="update-test" onCommit={callback}>
+        <ComponentWithEffects />
+        <ComponentWithCommitHooks shouldCascade={true} />
+      </React.Profiler>,
+    );
 
-        expect(callback).toHaveBeenCalledTimes(4);
+    expect(callback).toHaveBeenCalledTimes(4);
 
-        call = callback.mock.calls[2];
+    call = callback.mock.calls[2];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    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];
+    call = callback.mock.calls[3];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    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', () => {
-        const callback = jest.fn();
+  it('should include time spent in ref callbacks', () => {
+    const callback = jest.fn();
 
-        const refSetter = ref => {
-          if (ref !== null) {
-            Scheduler.unstable_advanceTime(10);
-          } else {
-            Scheduler.unstable_advanceTime(100);
-          }
-        };
+    const refSetter = ref => {
+      if (ref !== null) {
+        Scheduler.unstable_advanceTime(10);
+      } else {
+        Scheduler.unstable_advanceTime(100);
+      }
+    };
 
-        class ClassComponent extends React.Component {
-          render() {
-            return null;
-          }
-        }
+    class ClassComponent extends React.Component {
+      render() {
+        return null;
+      }
+    }
 
-        const Component = () => {
-          Scheduler.unstable_advanceTime(1000);
-          return <ClassComponent ref={refSetter} />;
-        };
+    const Component = () => {
+      Scheduler.unstable_advanceTime(1000);
+      return <ClassComponent ref={refSetter} />;
+    };
 
-        Scheduler.unstable_advanceTime(1);
+    Scheduler.unstable_advanceTime(1);
 
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="root" onCommit={callback}>
-            <Component />
-          </React.Profiler>,
-        );
+    const renderer = ReactTestRenderer.create(
+      <React.Profiler id="root" onCommit={callback}>
+        <Component />
+      </React.Profiler>,
+    );
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
+    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();
+    callback.mockClear();
 
-        renderer.update(<React.Profiler id="root" onCommit={callback} />);
+    renderer.update(<React.Profiler id="root" onCommit={callback} />);
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        call = callback.mock.calls[0];
+    call = callback.mock.calls[0];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-      });
+    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', () => {
-        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;
+  it('should bubble time spent in layout effects to higher profilers', () => {
+    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 setCountRef = React.createRef(null);
+
+    let renderer = null;
+    ReactTestRendererAct(() => {
+      renderer = ReactTestRenderer.create(
+        <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>,
+      );
+    });
 
-        let renderer = null;
-        ReactTestRendererAct(() => {
-          renderer = ReactTestRenderer.create(
-            <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);
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    let call = callback.mock.calls[0];
 
-        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)
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    ReactTestRendererAct(() => setCountRef.current(count => count + 1));
 
-        ReactTestRendererAct(() => setCountRef.current(count => count + 1));
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    call = callback.mock.calls[1];
 
-        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)
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    ReactTestRendererAct(() => {
+      renderer.update(
+        <React.Profiler id="root-update" onCommit={callback}>
+          <React.Profiler id="b">
+            <ComponentWithEffects duration={1000} cleanupDuration={10000} />
+          </React.Profiler>
+        </React.Profiler>,
+      );
+    });
 
-        ReactTestRendererAct(() => {
-          renderer.update(
-            <React.Profiler id="root-update" onCommit={callback}>
-              <React.Profiler id="b">
-                <ComponentWithEffects duration={1000} cleanupDuration={10000} />
-              </React.Profiler>
-            </React.Profiler>,
-          );
-        });
+    expect(callback).toHaveBeenCalledTimes(3);
 
-        expect(callback).toHaveBeenCalledTimes(3);
+    call = callback.mock.calls[2];
 
-        call = callback.mock.calls[2];
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-update');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(1100); // durations
+    expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
+  });
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-        expect(call[0]).toBe('root-update');
-        expect(call[1]).toBe('update');
-        expect(call[2]).toBe(1100); // durations
-        expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+  it('should properly report time in layout effects even when there are errors', () => {
+    const callback = jest.fn();
 
-      it('should properly report time in layout effects even when there are errors', () => {
-        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;
+      }
+    }
 
-        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');
         }
-
-        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;
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
         };
+      });
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
 
-        Scheduler.unstable_advanceTime(1);
+    Scheduler.unstable_advanceTime(1);
 
-        // Test an error that happens during an effect
+    // Test an error that happens during an effect
 
-        ReactTestRendererAct(() => {
-          ReactTestRenderer.create(
-            <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>
+    ReactTestRendererAct(() => {
+      ReactTestRenderer.create(
+        <React.Profiler id="root" onCommit={callback}>
+          <ErrorBoundary
+            fallback={
               <ComponentWithEffects
-                duration={10000}
-                effectDuration={100000}
-                cleanupDuration={1000000}
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
               />
-            </React.Profiler>,
-          );
-        });
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        // Initial render (with error)
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    // 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];
+    call = callback.mock.calls[1];
 
-        // Cleanup render from error boundary
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    // 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', () => {
-        const callback = jest.fn();
+  it('should properly report time in layout effect cleanup functions even when there are errors', () => {
+    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;
-          }
-        }
+    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;
+    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);
+    Scheduler.unstable_advanceTime(1);
 
-        let renderer = null;
+    let renderer = null;
 
-        ReactTestRendererAct(() => {
-          renderer = ReactTestRenderer.create(
-            <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>
+    ReactTestRendererAct(() => {
+      renderer = ReactTestRenderer.create(
+        <React.Profiler id="root" onCommit={callback}>
+          <ErrorBoundary
+            fallback={
               <ComponentWithEffects
-                duration={10000}
-                effectDuration={100000}
-                cleanupDuration={1000000}
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
               />
-            </React.Profiler>,
-          );
-        });
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        // Initial render
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    // 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();
+    callback.mockClear();
 
-        // Test an error that happens during an cleanup function
+    // Test an error that happens during an cleanup function
 
-        ReactTestRendererAct(() => {
-          renderer.update(
-            <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>
+    ReactTestRendererAct(() => {
+      renderer.update(
+        <React.Profiler id="root" onCommit={callback}>
+          <ErrorBoundary
+            fallback={
               <ComponentWithEffects
-                duration={10000}
-                effectDuration={100000}
-                cleanupDuration={1000000}
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
               />
-            </React.Profiler>,
-          );
-        });
-
-        expect(callback).toHaveBeenCalledTimes(2);
-
-        call = callback.mock.calls[0];
-
-        // Update (that throws)
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-
-        call = callback.mock.calls[1];
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={false}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
 
-        // Cleanup render from error boundary
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    expect(callback).toHaveBeenCalledTimes(2);
 
-      if (enableSchedulerTracing) {
-        it('should report interactions that were active', () => {
-          const callback = jest.fn();
+    call = callback.mock.calls[0];
 
-          const ComponentWithEffects = () => {
-            const [didMount, setDidMount] = React.useState(false);
-            React.useLayoutEffect(() => {
-              Scheduler.unstable_advanceTime(didMount ? 1000 : 100);
-              if (!didMount) {
-                setDidMount(true);
-              }
-              return () => {
-                Scheduler.unstable_advanceTime(10000);
-              };
-            }, [didMount]);
-            Scheduler.unstable_advanceTime(10);
-            return null;
-          };
+    // 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)
 
-          const interaction = {
-            id: 0,
-            name: 'mount',
-            timestamp: Scheduler.unstable_now(),
-          };
+    call = callback.mock.calls[1];
 
-          Scheduler.unstable_advanceTime(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)
+  });
+});
 
-          SchedulerTracing.unstable_trace(
-            interaction.name,
-            interaction.timestamp,
-            () => {
-              ReactTestRenderer.create(
-                <React.Profiler id="root" onCommit={callback}>
-                  <ComponentWithEffects />
-                </React.Profiler>,
-              );
-            },
-          );
+describe(`onPostCommit`, () => {
+  beforeEach(() => {
+    jest.resetModules();
 
-          expect(callback).toHaveBeenCalledTimes(2);
+    loadModules();
+  });
 
-          let call = callback.mock.calls[0];
+  it('should report time spent in passive effects', () => {
+    const callback = jest.fn();
 
-          expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-          expect(call[0]).toBe('root');
-          expect(call[1]).toBe('mount');
-          expect(call[4]).toMatchInteractions([interaction]);
+    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;
+    };
 
-          call = callback.mock.calls[1];
+    Scheduler.unstable_advanceTime(1);
 
-          expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-          expect(call[0]).toBe('root');
-          expect(call[1]).toBe('nested-update');
-          expect(call[4]).toMatchInteractions([interaction]);
-        });
-      }
+    let renderer;
+    ReactTestRendererAct(() => {
+      renderer = ReactTestRenderer.create(
+        <React.Profiler id="mount-test" onPostCommit={callback}>
+          <ComponentWithEffects />
+        </React.Profiler>,
+      );
     });
+    Scheduler.unstable_flushAll();
 
-    describe(`onPostCommit enableSchedulerTracing:${
-      enableSchedulerTracing ? 'enabled' : 'disabled'
-    }`, () => {
-      beforeEach(() => {
-        jest.resetModules();
-
-        loadModules({
-          enableSchedulerTracing,
-        });
-      });
-
-      it('should report time spent in passive effects', () => {
-        const callback = jest.fn();
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        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;
-        };
+    let call = callback.mock.calls[0];
 
-        Scheduler.unstable_advanceTime(1);
-
-        let renderer;
-        ReactTestRendererAct(() => {
-          renderer = ReactTestRenderer.create(
-            <React.Profiler id="mount-test" onPostCommit={callback}>
-              <ComponentWithEffects />
-            </React.Profiler>,
-          );
-        });
-        Scheduler.unstable_flushAll();
+    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)
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    Scheduler.unstable_advanceTime(1);
 
-        let call = callback.mock.calls[0];
+    ReactTestRendererAct(() => {
+      renderer.update(
+        <React.Profiler id="update-test" onPostCommit={callback}>
+          <ComponentWithEffects />
+        </React.Profiler>,
+      );
+    });
+    Scheduler.unstable_flushAll();
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        Scheduler.unstable_advanceTime(1);
+    call = callback.mock.calls[1];
 
-        ReactTestRendererAct(() => {
-          renderer.update(
-            <React.Profiler id="update-test" onPostCommit={callback}>
-              <ComponentWithEffects />
-            </React.Profiler>,
-          );
-        });
-        Scheduler.unstable_flushAll();
+    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)
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    Scheduler.unstable_advanceTime(1);
 
-        call = callback.mock.calls[1];
+    ReactTestRendererAct(() => {
+      renderer.update(
+        <React.Profiler id="unmount-test" onPostCommit={callback} />,
+      );
+    });
+    Scheduler.unstable_flushAll();
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    expect(callback).toHaveBeenCalledTimes(3);
 
-        Scheduler.unstable_advanceTime(1);
+    call = callback.mock.calls[2];
 
-        ReactTestRendererAct(() => {
-          renderer.update(
-            <React.Profiler id="unmount-test" onPostCommit={callback} />,
-          );
-        });
-        Scheduler.unstable_flushAll();
-
-        expect(callback).toHaveBeenCalledTimes(3);
-
-        call = callback.mock.calls[2];
-
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-        expect(call[0]).toBe('unmount-test');
-        expect(call[1]).toBe('update');
-        // TODO (bvaughn) The duration reported below should be 10100, but is 0
-        // by the time the passive effect is flushed its parent Fiber pointer is gone.
-        // If we refactor to preserve the unmounted Fiber tree we could fix this.
-        // The current implementation would require too much extra overhead to track this.
-        expect(call[2]).toBe(0); // durations
-        expect(call[3]).toBe(12030); // commit start time (before mutations or effects)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('unmount-test');
+    expect(call[1]).toBe('update');
+    // TODO (bvaughn) The duration reported below should be 10100, but is 0
+    // by the time the passive effect is flushed its parent Fiber pointer is gone.
+    // If we refactor to preserve the unmounted Fiber tree we could fix this.
+    // The current implementation would require too much extra overhead to track this.
+    expect(call[2]).toBe(0); // durations
+    expect(call[3]).toBe(12030); // commit start time (before mutations or effects)
+  });
 
-      it('should report time spent in passive effects with cascading renders', () => {
-        const callback = jest.fn();
+  it('should report time spent in passive effects with cascading renders', () => {
+    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;
+    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);
+    Scheduler.unstable_advanceTime(1);
 
-        ReactTestRendererAct(() => {
-          ReactTestRenderer.create(
-            <React.Profiler id="mount-test" onPostCommit={callback}>
-              <ComponentWithEffects />
-            </React.Profiler>,
-          );
-        });
+    ReactTestRendererAct(() => {
+      ReactTestRenderer.create(
+        <React.Profiler id="mount-test" onPostCommit={callback}>
+          <ComponentWithEffects />
+        </React.Profiler>,
+      );
+    });
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    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];
+    call = callback.mock.calls[1];
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    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', () => {
-        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;
+  it('should bubble time spent in effects to higher profilers', () => {
+    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 setCountRef = React.createRef(null);
+
+    let renderer = null;
+    ReactTestRendererAct(() => {
+      renderer = ReactTestRenderer.create(
+        <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>,
+      );
+    });
 
-        let renderer = null;
-        ReactTestRendererAct(() => {
-          renderer = ReactTestRenderer.create(
-            <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);
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    let call = callback.mock.calls[0];
 
-        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)
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    ReactTestRendererAct(() => setCountRef.current(count => count + 1));
 
-        ReactTestRendererAct(() => setCountRef.current(count => count + 1));
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    call = callback.mock.calls[1];
 
-        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)
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    ReactTestRendererAct(() => {
+      renderer.update(
+        <React.Profiler id="root-update" onPostCommit={callback}>
+          <React.Profiler id="b">
+            <ComponentWithEffects duration={1000} cleanupDuration={10000} />
+          </React.Profiler>
+        </React.Profiler>,
+      );
+    });
 
-        ReactTestRendererAct(() => {
-          renderer.update(
-            <React.Profiler id="root-update" onPostCommit={callback}>
-              <React.Profiler id="b">
-                <ComponentWithEffects duration={1000} cleanupDuration={10000} />
-              </React.Profiler>
-            </React.Profiler>,
-          );
-        });
+    expect(callback).toHaveBeenCalledTimes(3);
 
-        expect(callback).toHaveBeenCalledTimes(3);
+    call = callback.mock.calls[2];
 
-        call = callback.mock.calls[2];
+    expect(call).toHaveLength(4);
+    expect(call[0]).toBe('root-update');
+    expect(call[1]).toBe('update');
+    expect(call[2]).toBe(1100); // durations
+    expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
+  });
 
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-        expect(call[0]).toBe('root-update');
-        expect(call[1]).toBe('update');
-        expect(call[2]).toBe(1100); // durations
-        expect(call[3]).toBe(1124); // commit start time (before mutations or effects)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+  it('should properly report time in passive effects even when there are errors', () => {
+    const callback = jest.fn();
 
-      it('should properly report time in passive effects even when there are errors', () => {
-        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;
+      }
+    }
 
-        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');
         }
-
-        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;
+        return () => {
+          Scheduler.unstable_advanceTime(cleanupDuration);
         };
+      });
+      Scheduler.unstable_advanceTime(duration);
+      return null;
+    };
 
-        Scheduler.unstable_advanceTime(1);
+    Scheduler.unstable_advanceTime(1);
 
-        // Test an error that happens during an effect
+    // Test an error that happens during an effect
 
-        ReactTestRendererAct(() => {
-          ReactTestRenderer.create(
-            <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>
+    ReactTestRendererAct(() => {
+      ReactTestRenderer.create(
+        <React.Profiler id="root" onPostCommit={callback}>
+          <ErrorBoundary
+            fallback={
               <ComponentWithEffects
-                duration={10000}
-                effectDuration={100000}
-                cleanupDuration={1000000}
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
               />
-            </React.Profiler>,
-          );
-        });
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
 
-        expect(callback).toHaveBeenCalledTimes(2);
+    expect(callback).toHaveBeenCalledTimes(2);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        // Initial render (with error)
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    // 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];
+    call = callback.mock.calls[1];
 
-        // Cleanup render from error boundary
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    // 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', () => {
-        const callback = jest.fn();
+  it('should properly report time in passive effect cleanup functions even when there are errors', () => {
+    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;
-          }
-        }
+    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;
+    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);
+    Scheduler.unstable_advanceTime(1);
 
-        let renderer = null;
+    let renderer = null;
 
-        ReactTestRendererAct(() => {
-          renderer = ReactTestRenderer.create(
-            <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>
+    ReactTestRendererAct(() => {
+      renderer = ReactTestRenderer.create(
+        <React.Profiler id="root" onPostCommit={callback}>
+          <ErrorBoundary
+            fallback={
               <ComponentWithEffects
-                duration={10000}
-                effectDuration={100000}
-                cleanupDuration={1000000}
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
               />
-            </React.Profiler>,
-          );
-        });
+            }>
+            <ComponentWithEffects
+              duration={10}
+              effectDuration={100}
+              cleanupDuration={1000}
+              shouldThrow={true}
+            />
+          </ErrorBoundary>
+          <ComponentWithEffects
+            duration={10000}
+            effectDuration={100000}
+            cleanupDuration={1000000}
+          />
+        </React.Profiler>,
+      );
+    });
 
-        expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledTimes(1);
 
-        let call = callback.mock.calls[0];
+    let call = callback.mock.calls[0];
 
-        // Initial render
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
+    // 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();
+    callback.mockClear();
 
-        // Test an error that happens during an cleanup function
+    // Test an error that happens during an cleanup function
 
-        ReactTestRendererAct(() => {
-          renderer.update(
-            <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>
+    ReactTestRendererAct(() => {
+      renderer.update(
+        <React.Profiler id="root" onPostCommit={callback}>
+          <ErrorBoundary
+            fallback={
               <ComponentWithEffects
-                duration={10000}
-                effectDuration={100000}
-                cleanupDuration={1000000}
+                duration={10000000}
+                effectDuration={100000000}
+                cleanupDuration={1000000000}
               />
-            </React.Profiler>,
-          );
-        });
+            }>
+            <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(enableSchedulerTracing ? 5 : 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)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-
-        call = callback.mock.calls[1];
-
-        // Cleanup render from error boundary
-        expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-        expect(call[0]).toBe('root');
-        expect(call[1]).toBe('update');
-        expect(call[2]).toBe(100000000); // durations
-        // The commit time varies because the above duration time varies
-        expect(call[3]).toBe(11221221); // commit start time (before mutations or effects)
-        expect(call[4]).toEqual(enableSchedulerTracing ? new Set() : undefined); // interaction events
-      });
+    expect(callback).toHaveBeenCalledTimes(2);
 
-      if (enableSchedulerTracing) {
-        it('should report interactions that were active', () => {
-          const callback = jest.fn();
+    call = callback.mock.calls[0];
 
-          const ComponentWithEffects = () => {
-            const [didMount, setDidMount] = React.useState(false);
-            React.useEffect(() => {
-              Scheduler.unstable_advanceTime(didMount ? 1000 : 100);
-              if (!didMount) {
-                setDidMount(true);
-              }
-              return () => {
-                Scheduler.unstable_advanceTime(10000);
-              };
-            }, [didMount]);
-            Scheduler.unstable_advanceTime(10);
-            return null;
-          };
+    // 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)
 
-          const interaction = {
-            id: 0,
-            name: 'mount',
-            timestamp: Scheduler.unstable_now(),
-          };
+    call = callback.mock.calls[1];
 
-          Scheduler.unstable_advanceTime(1);
-
-          ReactTestRendererAct(() => {
-            SchedulerTracing.unstable_trace(
-              interaction.name,
-              interaction.timestamp,
-              () => {
-                ReactTestRenderer.create(
-                  <React.Profiler id="root" onPostCommit={callback}>
-                    <ComponentWithEffects />
-                  </React.Profiler>,
-                );
-              },
-            );
-          });
+    // 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
+    // The commit time varies because the above duration time varies
+    expect(call[3]).toBe(11221221); // commit start time (before mutations or effects)
+  });
+});
 
-          expect(callback).toHaveBeenCalledTimes(2);
+describe(`onNestedUpdateScheduled`, () => {
+  beforeEach(() => {
+    jest.resetModules();
 
-          let call = callback.mock.calls[0];
+    loadModules({
+      enableProfilerNestedUpdateScheduledHook: true,
+      useNoopRenderer: true,
+    });
+  });
 
-          expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-          expect(call[0]).toBe('root');
-          expect(call[1]).toBe('mount');
-          expect(call[4]).toMatchInteractions([interaction]);
+  it('is not called when the legacy render API is used to schedule an update', () => {
+    const onNestedUpdateScheduled = jest.fn();
+
+    ReactNoop.renderLegacySyncRoot(
+      <React.Profiler
+        id="test"
+        onNestedUpdateScheduled={onNestedUpdateScheduled}>
+        <div>initial</div>
+      </React.Profiler>,
+    );
+
+    ReactNoop.renderLegacySyncRoot(
+      <React.Profiler
+        id="test"
+        onNestedUpdateScheduled={onNestedUpdateScheduled}>
+        <div>update</div>
+      </React.Profiler>,
+    );
+
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+  });
 
-          call = callback.mock.calls[1];
+  it('is not called when the root API is used to schedule an update', () => {
+    const onNestedUpdateScheduled = jest.fn();
+
+    ReactNoop.render(
+      <React.Profiler
+        id="test"
+        onNestedUpdateScheduled={onNestedUpdateScheduled}>
+        <div>initial</div>
+      </React.Profiler>,
+    );
+
+    ReactNoop.render(
+      <React.Profiler
+        id="test"
+        onNestedUpdateScheduled={onNestedUpdateScheduled}>
+        <div>update</div>
+      </React.Profiler>,
+    );
+
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+  });
 
-          expect(call).toHaveLength(enableSchedulerTracing ? 5 : 4);
-          expect(call[0]).toBe('root');
-          expect(call[1]).toBe('update');
-          expect(call[4]).toMatchInteractions([interaction]);
-        });
-      }
+  it('is called when a function component schedules an update during a layout effect', () => {
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
+      React.useLayoutEffect(() => {
+        setDidMount(true);
+      }, []);
+      Scheduler.unstable_yieldValue(`Component:${didMount}`);
+      return didMount;
+    }
+
+    const onNestedUpdateScheduled = jest.fn();
+
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component />
+        </React.Profiler>,
+      );
     });
 
-    describe(`onNestedUpdateScheduled enableSchedulerTracing:${
-      enableSchedulerTracing ? 'enabled' : 'disabled'
-    }`, () => {
-      beforeEach(() => {
-        jest.resetModules();
+    expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+    expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+    expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+  });
 
-        loadModules({
-          enableProfilerNestedUpdateScheduledHook: true,
-          enableSchedulerTracing,
-          useNoopRenderer: true,
+  it('is called when a function component schedules a batched update during a layout effect', () => {
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
+      React.useLayoutEffect(() => {
+        ReactNoop.batchedUpdates(() => {
+          setDidMount(true);
         });
-      });
+      }, []);
+      Scheduler.unstable_yieldValue(`Component:${didMount}`);
+      return didMount;
+    }
 
-      it('is not called when the legacy render API is used to schedule an update', () => {
-        const onNestedUpdateScheduled = jest.fn();
+    const onNestedUpdateScheduled = jest.fn();
+    const onRender = jest.fn();
+
+    ReactNoop.render(
+      <React.Profiler
+        id="root"
+        onNestedUpdateScheduled={onNestedUpdateScheduled}
+        onRender={onRender}>
+        <Component />
+      </React.Profiler>,
+    );
+    expect(Scheduler).toFlushAndYield(['Component:false', 'Component:true']);
+
+    expect(onRender).toHaveBeenCalledTimes(2);
+    expect(onRender.mock.calls[0][1]).toBe('mount');
+    expect(onRender.mock.calls[1][1]).toBe('nested-update');
+
+    expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+    expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('root');
+  });
 
-        ReactNoop.renderLegacySyncRoot(
+  it('bubbles up and calls all ancestor Profilers', () => {
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
+      React.useLayoutEffect(() => {
+        setDidMount(true);
+      }, []);
+      Scheduler.unstable_yieldValue(`Component:${didMount}`);
+      return didMount;
+    }
+    const onNestedUpdateScheduledOne = jest.fn();
+    const onNestedUpdateScheduledTwo = jest.fn();
+    const onNestedUpdateScheduledThree = jest.fn();
+
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="one"
+          onNestedUpdateScheduled={onNestedUpdateScheduledOne}>
           <React.Profiler
-            id="test"
-            onNestedUpdateScheduled={onNestedUpdateScheduled}>
-            <div>initial</div>
-          </React.Profiler>,
-        );
+            id="two"
+            onNestedUpdateScheduled={onNestedUpdateScheduledTwo}>
+            <>
+              <Component />
+              <React.Profiler
+                id="three"
+                onNestedUpdateScheduled={onNestedUpdateScheduledThree}
+              />
+            </>
+          </React.Profiler>
+        </React.Profiler>,
+      );
+    });
 
-        ReactNoop.renderLegacySyncRoot(
-          <React.Profiler
-            id="test"
-            onNestedUpdateScheduled={onNestedUpdateScheduled}>
-            <div>update</div>
-          </React.Profiler>,
-        );
-
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-      });
-
-      it('is not called when the root API is used to schedule an update', () => {
-        const onNestedUpdateScheduled = jest.fn();
-
-        ReactNoop.render(
-          <React.Profiler
-            id="test"
-            onNestedUpdateScheduled={onNestedUpdateScheduled}>
-            <div>initial</div>
-          </React.Profiler>,
-        );
-
-        ReactNoop.render(
-          <React.Profiler
-            id="test"
-            onNestedUpdateScheduled={onNestedUpdateScheduled}>
-            <div>update</div>
-          </React.Profiler>,
-        );
-
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-      });
-
-      it('is called when a function component schedules an update during a layout effect', () => {
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
-          React.useLayoutEffect(() => {
-            setDidMount(true);
-          }, []);
-          Scheduler.unstable_yieldValue(`Component:${didMount}`);
-          return didMount;
-        }
-
-        const interactionCreation = {
-          id: 0,
-          name: 'creation event',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        SchedulerTracing.unstable_trace(
-          interactionCreation.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactNoop.act(() => {
-              ReactNoop.render(
-                <React.Profiler
-                  id="test"
-                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
-                  <Component />
-                </React.Profiler>,
-              );
-            });
-          },
-        );
-
-        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
-        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
-        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
-            interactionCreation,
-          ]);
-        }
-      });
-
-      it('is called when a function component schedules a batched update during a layout effect', () => {
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
-          React.useLayoutEffect(() => {
-            ReactNoop.batchedUpdates(() => {
-              setDidMount(true);
-            });
-          }, []);
-          Scheduler.unstable_yieldValue(`Component:${didMount}`);
-          return didMount;
-        }
-
-        const onNestedUpdateScheduled = jest.fn();
-        const onRender = jest.fn();
-
-        ReactNoop.render(
-          <React.Profiler
-            id="root"
-            onNestedUpdateScheduled={onNestedUpdateScheduled}
-            onRender={onRender}>
-            <Component />
-          </React.Profiler>,
-        );
-        expect(Scheduler).toFlushAndYield([
-          'Component:false',
-          'Component:true',
-        ]);
-
-        expect(onRender).toHaveBeenCalledTimes(2);
-        expect(onRender.mock.calls[0][1]).toBe('mount');
-        expect(onRender.mock.calls[1][1]).toBe('nested-update');
-
-        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
-        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('root');
-      });
-
-      it('bubbles up and calls all ancestor Profilers', () => {
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
-          React.useLayoutEffect(() => {
-            setDidMount(true);
-          }, []);
-          Scheduler.unstable_yieldValue(`Component:${didMount}`);
-          return didMount;
-        }
-        const onNestedUpdateScheduledOne = jest.fn();
-        const onNestedUpdateScheduledTwo = jest.fn();
-        const onNestedUpdateScheduledThree = jest.fn();
-
-        ReactNoop.act(() => {
-          ReactNoop.render(
-            <React.Profiler
-              id="one"
-              onNestedUpdateScheduled={onNestedUpdateScheduledOne}>
-              <React.Profiler
-                id="two"
-                onNestedUpdateScheduled={onNestedUpdateScheduledTwo}>
-                <>
-                  <Component />
-                  <React.Profiler
-                    id="three"
-                    onNestedUpdateScheduled={onNestedUpdateScheduledThree}
-                  />
-                </>
-              </React.Profiler>
-            </React.Profiler>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
-        expect(onNestedUpdateScheduledOne).toHaveBeenCalledTimes(1);
-        expect(onNestedUpdateScheduledOne.mock.calls[0][0]).toBe('one');
-        expect(onNestedUpdateScheduledTwo).toHaveBeenCalledTimes(1);
-        expect(onNestedUpdateScheduledTwo.mock.calls[0][0]).toBe('two');
-        expect(onNestedUpdateScheduledThree).not.toHaveBeenCalled();
-      });
-
-      it('is not called when an update is scheduled for another doort during a layout effect', () => {
-        const setStateRef = React.createRef(null);
-
-        function ComponentRootOne() {
-          const [state, setState] = React.useState(false);
-          setStateRef.current = setState;
-          Scheduler.unstable_yieldValue(`ComponentRootOne:${state}`);
-          return state;
-        }
-
-        function ComponentRootTwo() {
-          React.useLayoutEffect(() => {
-            setStateRef.current(true);
-          }, []);
-          Scheduler.unstable_yieldValue('ComponentRootTwo');
-          return null;
-        }
-
-        const interactionCreation = {
-          id: 0,
-          name: 'creation event',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        SchedulerTracing.unstable_trace(
-          interactionCreation.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactNoop.act(() => {
-              ReactNoop.renderToRootWithID(
-                <React.Profiler
-                  id="test"
-                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
-                  <ComponentRootOne />
-                </React.Profiler>,
-                1,
-              );
-
-              ReactNoop.renderToRootWithID(
-                <React.Profiler
-                  id="test"
-                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
-                  <ComponentRootTwo />
-                </React.Profiler>,
-                2,
-              );
-            });
-          },
-        );
-
-        expect(Scheduler).toHaveYielded([
-          'ComponentRootOne:false',
-          'ComponentRootTwo',
-          'ComponentRootOne:true',
-        ]);
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-      });
-
-      it('is not called when a function component schedules an update during a passive effect', () => {
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
-          React.useEffect(() => {
-            setDidMount(true);
-          }, []);
-          Scheduler.unstable_yieldValue(`Component:${didMount}`);
-          return didMount;
-        }
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        ReactNoop.act(() => {
-          ReactNoop.render(
-            <React.Profiler
-              id="test"
-              onNestedUpdateScheduled={onNestedUpdateScheduled}>
-              <Component />
-            </React.Profiler>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-      });
-
-      it('is not called when a function component schedules an update outside of render', () => {
-        const updateFnRef = React.createRef(null);
-
-        function Component() {
-          const [state, setState] = React.useState(false);
-          updateFnRef.current = () => setState(true);
-          Scheduler.unstable_yieldValue(`Component:${state}`);
-          return state;
-        }
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        ReactNoop.act(() => {
-          ReactNoop.render(
-            <React.Profiler
-              id="test"
-              onNestedUpdateScheduled={onNestedUpdateScheduled}>
-              <Component />
-            </React.Profiler>,
-          );
-        });
-        expect(Scheduler).toHaveYielded(['Component:false']);
-
-        ReactNoop.act(() => {
-          updateFnRef.current();
-        });
-        expect(Scheduler).toHaveYielded(['Component:true']);
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-      });
-
-      it('it is not called when a component schedules an update during render', () => {
-        function Component() {
-          const [state, setState] = React.useState(false);
-          if (state === false) {
-            setState(true);
-          }
-          Scheduler.unstable_yieldValue(`Component:${state}`);
-          return state;
-        }
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        ReactNoop.act(() => {
-          ReactNoop.render(
-            <React.Profiler
-              id="test"
-              onNestedUpdateScheduled={onNestedUpdateScheduled}>
-              <Component />
-            </React.Profiler>,
-          );
-        });
-
-        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-      });
-
-      it('it is called when a component schedules an update from a ref callback', () => {
-        function Component({mountChild}) {
-          const [refAttached, setRefAttached] = React.useState(false);
-          const [refDetached, setRefDetached] = React.useState(false);
-          const refSetter = React.useCallback(ref => {
-            if (ref !== null) {
-              setRefAttached(true);
-            } else {
-              setRefDetached(true);
-            }
-          }, []);
-          Scheduler.unstable_yieldValue(
-            `Component:${refAttached}:${refDetached}`,
-          );
-          return mountChild ? <div ref={refSetter} /> : null;
-        }
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        const interactionCreation = {
-          id: 0,
-          name: 'creation event',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        SchedulerTracing.unstable_trace(
-          interactionCreation.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactNoop.act(() => {
-              ReactNoop.render(
-                <React.Profiler
-                  id="test"
-                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
-                  <Component mountChild={true} />
-                </React.Profiler>,
-              );
-            });
-          },
-        );
-
-        expect(Scheduler).toHaveYielded([
-          'Component:false:false',
-          'Component:true:false',
-        ]);
-        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
-        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
-            interactionCreation,
-          ]);
-        }
-
-        const interactionUpdate = {
-          id: 1,
-          name: 'update event',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        SchedulerTracing.unstable_trace(
-          interactionUpdate.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactNoop.act(() => {
-              ReactNoop.render(
-                <React.Profiler
-                  id="test"
-                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
-                  <Component mountChild={false} />
-                </React.Profiler>,
-              );
-            });
-          },
-        );
-
-        expect(Scheduler).toHaveYielded([
-          'Component:true:false',
-          'Component:true:true',
-        ]);
-        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(2);
-        expect(onNestedUpdateScheduled.mock.calls[1][0]).toBe('test');
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[1][1]).toMatchInteractions([
-            interactionUpdate,
-          ]);
-        }
-      });
-
-      it('is called when a class component schedules an update from the componentDidMount lifecycles', () => {
-        class Component extends React.Component {
-          state = {
-            value: false,
-          };
-          componentDidMount() {
-            this.setState({value: true});
-          }
-          render() {
-            const {value} = this.state;
-            Scheduler.unstable_yieldValue(`Component:${value}`);
-            return value;
-          }
-        }
-
-        const interactionCreation = {
-          id: 0,
-          name: 'creation event',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        SchedulerTracing.unstable_trace(
-          interactionCreation.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactNoop.act(() => {
-              ReactNoop.render(
-                <React.Profiler
-                  id="test"
-                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
-                  <Component />
-                </React.Profiler>,
-              );
-            });
-          },
-        );
-
-        expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
-        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
-        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
-            interactionCreation,
-          ]);
-        }
-      });
-
-      it('is called when a class component schedules an update from the componentDidUpdate lifecycles', () => {
-        class Component extends React.Component {
-          state = {
-            nestedUpdateSheduled: false,
-          };
-          componentDidUpdate(prevProps, prevState) {
-            if (
-              this.props.scheduleNestedUpdate &&
-              !this.state.nestedUpdateSheduled
-            ) {
-              this.setState({nestedUpdateSheduled: true});
-            }
-          }
-          render() {
-            const {scheduleNestedUpdate} = this.props;
-            const {nestedUpdateSheduled} = this.state;
-            Scheduler.unstable_yieldValue(
-              `Component:${scheduleNestedUpdate}:${nestedUpdateSheduled}`,
-            );
-            return nestedUpdateSheduled;
-          }
-        }
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        ReactNoop.act(() => {
-          ReactNoop.render(
-            <React.Profiler
-              id="test"
-              onNestedUpdateScheduled={onNestedUpdateScheduled}>
-              <Component scheduleNestedUpdate={false} />
-            </React.Profiler>,
-          );
-        });
-        expect(Scheduler).toHaveYielded(['Component:false:false']);
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-
-        const interactionCreation = {
-          id: 0,
-          name: 'creation event',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        SchedulerTracing.unstable_trace(
-          interactionCreation.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactNoop.act(() => {
-              ReactNoop.render(
-                <React.Profiler
-                  id="test"
-                  onNestedUpdateScheduled={onNestedUpdateScheduled}>
-                  <Component scheduleNestedUpdate={true} />
-                </React.Profiler>,
-              );
-            });
-          },
-        );
-
-        expect(Scheduler).toHaveYielded([
-          'Component:true:false',
-          'Component:true:true',
-        ]);
-        expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
-        expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(onNestedUpdateScheduled.mock.calls[0][1]).toMatchInteractions([
-            interactionCreation,
-          ]);
-        }
-      });
-
-      it('is not called when a class component schedules an update outside of render', () => {
-        const updateFnRef = React.createRef(null);
-
-        class Component extends React.Component {
-          state = {
-            value: false,
-          };
-          render() {
-            const {value} = this.state;
-            updateFnRef.current = () => this.setState({value: true});
-            Scheduler.unstable_yieldValue(`Component:${value}`);
-            return value;
-          }
-        }
-
-        const onNestedUpdateScheduled = jest.fn();
-
-        ReactNoop.act(() => {
-          ReactNoop.render(
-            <React.Profiler
-              id="test"
-              onNestedUpdateScheduled={onNestedUpdateScheduled}>
-              <Component />
-            </React.Profiler>,
-          );
-        });
-        expect(Scheduler).toHaveYielded(['Component:false']);
-
-        ReactNoop.act(() => {
-          updateFnRef.current();
-        });
-        expect(Scheduler).toHaveYielded(['Component:true']);
-        expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
-      });
-
-      // TODO Add hydration tests to ensure we don't have false positives called.
-    });
-  });
-
-  describe('interaction tracing', () => {
-    let onInteractionScheduledWorkCompleted;
-    let onInteractionTraced;
-    let onWorkCanceled;
-    let onWorkScheduled;
-    let onWorkStarted;
-    let onWorkStopped;
-    let throwInOnInteractionScheduledWorkCompleted;
-    let throwInOnWorkScheduled;
-    let throwInOnWorkStarted;
-    let throwInOnWorkStopped;
-
-    const getWorkForReactThreads = mockFn =>
-      mockFn.mock.calls.filter(([interactions, threadID]) => threadID > 0);
-
-    function loadModulesForTracing(params) {
-      jest.resetModules();
-
-      loadModules({
-        enableSchedulerTracing: true,
-        ...params,
-      });
-
-      throwInOnInteractionScheduledWorkCompleted = false;
-      throwInOnWorkScheduled = false;
-      throwInOnWorkStarted = false;
-      throwInOnWorkStopped = false;
-
-      onInteractionScheduledWorkCompleted = jest.fn(() => {
-        if (throwInOnInteractionScheduledWorkCompleted) {
-          throw Error('Expected error onInteractionScheduledWorkCompleted');
-        }
-      });
-      onInteractionTraced = jest.fn();
-      onWorkCanceled = jest.fn();
-      onWorkScheduled = jest.fn(() => {
-        if (throwInOnWorkScheduled) {
-          throw Error('Expected error onWorkScheduled');
-        }
-      });
-      onWorkStarted = jest.fn(() => {
-        if (throwInOnWorkStarted) {
-          throw Error('Expected error onWorkStarted');
-        }
-      });
-      onWorkStopped = jest.fn(() => {
-        if (throwInOnWorkStopped) {
-          throw Error('Expected error onWorkStopped');
-        }
-      });
-
-      // Verify interaction subscriber methods are called as expected.
-      SchedulerTracing.unstable_subscribe({
-        onInteractionScheduledWorkCompleted,
-        onInteractionTraced,
-        onWorkCanceled,
-        onWorkScheduled,
-        onWorkStarted,
-        onWorkStopped,
-      });
-    }
-
-    beforeEach(() => loadModulesForTracing());
-
-    describe('error handling', () => {
-      it('should cover errors thrown in onWorkScheduled', () => {
-        function Component({children}) {
-          Scheduler.unstable_yieldValue('Component:' + children);
-          return children;
-        }
-
-        let renderer;
-
-        // Errors that happen inside of a subscriber should throw,
-        throwInOnWorkScheduled = true;
-        expect(() => {
-          SchedulerTracing.unstable_trace(
-            'event',
-            Scheduler.unstable_now(),
-            () => {
-              renderer = ReactTestRenderer.create(<Component>fail</Component>, {
-                unstable_isConcurrent: true,
-              });
-            },
-          );
-        }).toThrow('Expected error onWorkScheduled');
-        expect(Scheduler).toFlushAndYield(['Component:fail']);
-        throwInOnWorkScheduled = false;
-        expect(onWorkScheduled).toHaveBeenCalled();
-
-        // But should not leave React in a broken state for subsequent renders.
-        renderer = ReactTestRenderer.create(<Component>succeed</Component>, {
-          unstable_isConcurrent: true,
-        });
-        expect(Scheduler).toFlushAndYield(['Component:succeed']);
-        const tree = renderer.toTree();
-        expect(tree.type).toBe(Component);
-        expect(tree.props.children).toBe('succeed');
-      });
-
-      it('should cover errors thrown in onWorkStarted', () => {
-        function Component({children}) {
-          Scheduler.unstable_yieldValue('Component:' + children);
-          return children;
-        }
-
-        let renderer;
-        SchedulerTracing.unstable_trace(
-          'event',
-          Scheduler.unstable_now(),
-          () => {
-            renderer = ReactTestRenderer.create(<Component>text</Component>, {
-              unstable_isConcurrent: true,
-            });
-          },
-        );
-        onWorkStarted.mockClear();
-
-        // Errors that happen inside of a subscriber should throw,
-        throwInOnWorkStarted = true;
-        expect(Scheduler).toFlushAndThrow('Expected error onWorkStarted');
-        throwInOnWorkStarted = false;
-        // Rendering was interrupted by the error that was thrown, then
-        // continued and finished in the next task.
-        expect(Scheduler).toHaveYielded(['Component:text']);
-        expect(onWorkStarted).toHaveBeenCalled();
-        const tree = renderer.toTree();
-        expect(tree.type).toBe(Component);
-        expect(tree.props.children).toBe('text');
-      });
-
-      it('should cover errors thrown in onWorkStopped', () => {
-        function Component({children}) {
-          Scheduler.unstable_yieldValue('Component:' + children);
-          return children;
-        }
-
-        let renderer;
-        SchedulerTracing.unstable_trace(
-          'event',
-          Scheduler.unstable_now(),
-          () => {
-            renderer = ReactTestRenderer.create(<Component>text</Component>, {
-              unstable_isConcurrent: true,
-            });
-          },
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        // Errors that happen in an on-stopped callback,
-        throwInOnWorkStopped = true;
-        expect(() => {
-          expect(Scheduler).toFlushAndYield(['Component:text']);
-        }).toThrow('Expected error onWorkStopped');
-        throwInOnWorkStopped = false;
-        expect(onWorkStopped).toHaveBeenCalledTimes(2);
-
-        // Should still commit the update,
-        const tree = renderer.toTree();
-        expect(tree.type).toBe(Component);
-        expect(tree.props.children).toBe('text');
-
-        // And still call onInteractionScheduledWorkCompleted if the interaction is finished.
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-      });
-
-      it('should cover errors thrown in onInteractionScheduledWorkCompleted', () => {
-        function Component({children}) {
-          Scheduler.unstable_yieldValue('Component:' + children);
-          return children;
-        }
-
-        const eventOne = {
-          id: 0,
-          name: 'event one',
-          timestamp: Scheduler.unstable_now(),
-        };
-        const eventTwo = {
-          id: 1,
-          name: 'event two',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        SchedulerTracing.unstable_trace(
-          eventOne.name,
-          Scheduler.unstable_now(),
-          () => {
-            SchedulerTracing.unstable_trace(
-              eventTwo.name,
-              Scheduler.unstable_now(),
-              () => {
-                ReactTestRenderer.create(<Component>text</Component>, {
-                  unstable_isConcurrent: true,
-                });
-              },
-            );
-          },
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        throwInOnInteractionScheduledWorkCompleted = true;
-        expect(() => {
-          expect(Scheduler).toFlushAndYield(['Component:text']);
-        }).toThrow('Expected error onInteractionScheduledWorkCompleted');
-
-        // Even though an error is thrown for one completed interaction,
-        // The completed callback should be called for all completed interactions.
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-      });
-    });
-
-    it('should properly trace work scheduled during the begin render phase', () => {
-      const callback = jest.fn();
-      let wrapped;
-      const Component = jest.fn(() => {
-        wrapped = SchedulerTracing.unstable_wrap(callback);
-        return null;
-      });
-
-      let interaction;
-      SchedulerTracing.unstable_trace('event', Scheduler.unstable_now(), () => {
-        const interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions.size).toBe(1);
-        interaction = Array.from(interactions)[0];
-        ReactTestRenderer.create(<Component />);
-      });
-
-      expect(Component).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-      expect(callback).not.toHaveBeenCalled();
-
-      wrapped();
-      expect(callback).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-      expect(
-        onInteractionScheduledWorkCompleted,
-      ).toHaveBeenLastNotifiedOfInteraction(interaction);
-    });
-
-    // @gate experimental || !enableSyncDefaultUpdates
-    it('should associate traced events with their subsequent commits', () => {
-      let instance = null;
-
-      const Yield = ({duration = 10, value}) => {
-        Scheduler.unstable_advanceTime(duration);
-        Scheduler.unstable_yieldValue(value);
-        return null;
-      };
-
-      class Example extends React.Component {
-        state = {
-          count: 0,
-        };
-        render() {
-          instance = this;
-          return (
-            <React.Fragment>
-              <Yield value="first" />
-              {this.state.count}
-              <ComponentWithPassiveEffect count={this.state.count} />
-              <Yield value="last" />
-            </React.Fragment>
-          );
-        }
-      }
-
-      ReactTestRendererAct(() => {
-        Scheduler.unstable_advanceTime(1);
-
-        const interactionCreation = {
-          id: 0,
-          name: 'creation event',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onPostCommit = jest.fn(() => {
-          Scheduler.unstable_yieldValue('onPostCommit');
-        });
-        let renderer;
-        SchedulerTracing.unstable_trace(
-          interactionCreation.name,
-          Scheduler.unstable_now(),
-          () => {
-            renderer = ReactTestRenderer.create(
-              <React.Profiler id="test-profiler" onPostCommit={onPostCommit}>
-                <Example />
-              </React.Profiler>,
-              {
-                unstable_isConcurrent: true,
-              },
-            );
-          },
-        );
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interactionCreation,
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        // The scheduler/tracing package will notify of work started for the default thread,
-        // But React shouldn't notify until it's been flushed.
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-        // Work may have been scheduled multiple times.
-        // We only care that the subscriber was notified at least once.
-        // As for the thread ID- the actual value isn't important, only that there was one.
-        expect(onWorkScheduled).toHaveBeenCalled();
-        expect(onWorkScheduled.mock.calls[0][0]).toMatchInteractions([
-          interactionCreation,
-        ]);
-        expect(onWorkScheduled.mock.calls[0][1] > 0).toBe(true);
-
-        // Mount
-        expect(Scheduler).toFlushAndYield(['first', 'last', 'onPostCommit']);
-        expect(onPostCommit).toHaveBeenCalledTimes(1);
-        let call = onPostCommit.mock.calls[0];
-        expect(call[0]).toEqual('test-profiler');
-        expect(call[3]).toEqual(Scheduler.unstable_now());
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(call[4]).toMatchInteractions([interactionCreation]);
-        }
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interactionCreation);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(1);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[0][0],
-        ).toMatchInteractions([interactionCreation]);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(1);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[0][0],
-        ).toMatchInteractions([interactionCreation]);
-
-        onPostCommit.mockClear();
-        onWorkScheduled.mockClear();
-        onWorkStarted.mockClear();
-        onWorkStopped.mockClear();
-
-        Scheduler.unstable_advanceTime(3);
-
-        let didRunCallback = false;
-
-        const interactionOne = {
-          id: 1,
-          name: 'initial event',
-          timestamp: Scheduler.unstable_now(),
-        };
-        SchedulerTracing.unstable_trace(
-          interactionOne.name,
-          Scheduler.unstable_now(),
-          () => {
-            if (gate(flags => flags.enableSyncDefaultUpdates)) {
-              React.unstable_startTransition(() => {
-                instance.setState({count: 1});
-
-                // Update state again to verify our traced interaction isn't registered twice
-                instance.setState({count: 2});
-              });
-            } else {
-              instance.setState({count: 1});
-
-              // Update state again to verify our traced interaction isn't registered twice
-              instance.setState({count: 2});
-            }
-
-            // The scheduler/tracing package will notify of work started for the default thread,
-            // But React shouldn't notify until it's been flushed.
-            expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-            expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-            // Work may have been scheduled multiple times.
-            // We only care that the subscriber was notified at least once.
-            // As for the thread ID- the actual value isn't important, only that there was one.
-            expect(onWorkScheduled).toHaveBeenCalled();
-            expect(onWorkScheduled.mock.calls[0][0]).toMatchInteractions([
-              interactionOne,
-            ]);
-            expect(onWorkScheduled.mock.calls[0][1] > 0).toBe(true);
-
-            expect(Scheduler).toFlushAndYieldThrough(['first']);
-            expect(onPostCommit).not.toHaveBeenCalled();
-
-            expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-              interactionOne,
-            );
-            expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(
-              1,
-            );
-            expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(1);
-            expect(
-              getWorkForReactThreads(onWorkStarted)[0][0],
-            ).toMatchInteractions([interactionOne]);
-            expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-            expect(Scheduler).toFlushAndYield(['last', 'onPostCommit']);
-            expect(onPostCommit).toHaveBeenCalledTimes(1);
-
-            call = onPostCommit.mock.calls[0];
-            expect(call[0]).toEqual('test-profiler');
-            expect(call[3]).toEqual(Scheduler.unstable_now());
-            if (ReactFeatureFlags.enableSchedulerTracing) {
-              expect(call[4]).toMatchInteractions([interactionOne]);
-            }
-
-            didRunCallback = true;
-
-            expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(1);
-            expect(
-              getWorkForReactThreads(onWorkStarted)[0][0],
-            ).toMatchInteractions([interactionOne]);
-            expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(1);
-            expect(
-              getWorkForReactThreads(onWorkStopped)[0][0],
-            ).toMatchInteractions([interactionOne]);
-          },
-        );
-
-        expect(didRunCallback).toBe(true);
-
-        onPostCommit.mockClear();
-        onWorkScheduled.mockClear();
-        onWorkStarted.mockClear();
-        onWorkStopped.mockClear();
-
-        Scheduler.unstable_advanceTime(17);
-
-        // Verify that updating state again does not re-log our interaction.
-        instance.setState({count: 3});
-        expect(Scheduler).toFlushAndYield(['first', 'last', 'onPostCommit']);
-
-        expect(onPostCommit).toHaveBeenCalledTimes(1);
-        call = onPostCommit.mock.calls[0];
-        expect(call[0]).toEqual('test-profiler');
-        expect(call[3]).toEqual(Scheduler.unstable_now());
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(call[4]).toMatchInteractions([]);
-        }
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interactionOne);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-        onPostCommit.mockClear();
-
-        Scheduler.unstable_advanceTime(3);
-
-        // Verify that root updates are also associated with traced events.
-        const interactionTwo = {
-          id: 2,
-          name: 'root update event',
-          timestamp: Scheduler.unstable_now(),
-        };
-        SchedulerTracing.unstable_trace(
-          interactionTwo.name,
-          Scheduler.unstable_now(),
-          () => {
-            renderer.update(
-              <React.Profiler id="test-profiler" onPostCommit={onPostCommit}>
-                <Example />
-              </React.Profiler>,
-            );
-          },
-        );
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(3);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interactionTwo,
-        );
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-
-        // The scheduler/tracing package will notify of work started for the default thread,
-        // But React shouldn't notify until it's been flushed.
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-        // Work may have been scheduled multiple times.
-        // We only care that the subscriber was notified at least once.
-        // As for the thread ID- the actual value isn't important, only that there was one.
-        expect(onWorkScheduled).toHaveBeenCalled();
-        expect(onWorkScheduled.mock.calls[0][0]).toMatchInteractions([
-          interactionTwo,
-        ]);
-        expect(onWorkScheduled.mock.calls[0][1] > 0).toBe(true);
-
-        expect(Scheduler).toFlushAndYield(['first', 'last', 'onPostCommit']);
-
-        expect(onPostCommit).toHaveBeenCalledTimes(1);
-        call = onPostCommit.mock.calls[0];
-        expect(call[0]).toEqual('test-profiler');
-        expect(call[3]).toEqual(Scheduler.unstable_now());
-        if (ReactFeatureFlags.enableSchedulerTracing) {
-          expect(call[4]).toMatchInteractions([interactionTwo]);
-        }
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(3);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(3);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interactionTwo);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(1);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[0][0],
-        ).toMatchInteractions([interactionTwo]);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(1);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[0][0],
-        ).toMatchInteractions([interactionTwo]);
-      });
-    });
-
-    it('should not mark an interaction complete while passive effects are outstanding', () => {
-      const onCommit = jest.fn();
-      const onPostCommit = jest.fn(() => {
-        Scheduler.unstable_yieldValue('onPostCommit');
-      });
-
-      const ComponentWithEffects = () => {
-        React.useEffect(() => {
-          Scheduler.unstable_yieldValue('passive effect');
-        });
-        React.useLayoutEffect(() => {
-          Scheduler.unstable_yieldValue('layout effect');
-        });
-        Scheduler.unstable_yieldValue('render');
-        return null;
-      };
-
-      SchedulerTracing.unstable_trace('mount', Scheduler.unstable_now(), () => {
-        ReactTestRenderer.create(
-          <React.Profiler
-            id="root"
-            onCommit={onCommit}
-            onPostCommit={onPostCommit}>
-            <ComponentWithEffects />
-          </React.Profiler>,
-        );
-      });
-
-      expect(Scheduler).toHaveYielded(['render', 'layout effect']);
-
-      expect(onCommit).toHaveBeenCalled();
-      expect(onPostCommit).not.toHaveBeenCalled();
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      expect(Scheduler).toFlushAndYield(['passive effect', 'onPostCommit']);
-
-      expect(onCommit).toHaveBeenCalled();
-      expect(onPostCommit).toHaveBeenCalled();
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-    });
-
-    // @gate experimental || !enableSyncDefaultUpdates
-    it('should report the expected times when a high-priority update interrupts a low-priority update', () => {
-      const onPostCommit = jest.fn(() => {
-        Scheduler.unstable_yieldValue('onPostCommit');
-      });
-
-      let first;
-      class FirstComponent extends React.Component {
-        state = {count: 0};
-        render() {
-          first = this;
-          Scheduler.unstable_yieldValue('FirstComponent');
-          return <ComponentWithPassiveEffect count={this.state.count} />;
-        }
-      }
-      let second;
-      class SecondComponent extends React.Component {
-        state = {count: 0};
-        render() {
-          second = this;
-          Scheduler.unstable_yieldValue('SecondComponent');
-          return <ComponentWithPassiveEffect count={this.state.count} />;
-        }
-      }
-
-      Scheduler.unstable_advanceTime(5);
-
-      ReactTestRendererAct(() => {
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="test" onPostCommit={onPostCommit}>
-            <FirstComponent />
-            <SecondComponent />
-          </React.Profiler>,
-          {unstable_isConcurrent: true},
-        );
-
-        // Initial mount.
-        expect(Scheduler).toFlushAndYield([
-          'FirstComponent',
-          'SecondComponent',
-          'onPostCommit',
-        ]);
-
-        expect(onInteractionTraced).not.toHaveBeenCalled();
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        onPostCommit.mockClear();
-
-        Scheduler.unstable_advanceTime(100);
-
-        const interactionLowPri = {
-          id: 0,
-          name: 'lowPri',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        SchedulerTracing.unstable_trace(
-          interactionLowPri.name,
-          Scheduler.unstable_now(),
-          () => {
-            // Render a partially update, but don't finish.
-            if (gate(flags => flags.enableSyncDefaultUpdates)) {
-              React.unstable_startTransition(() => {
-                first.setState({count: 1});
-              });
-            } else {
-              first.setState({count: 1});
-            }
-
-            expect(onWorkScheduled).toHaveBeenCalled();
-            expect(onWorkScheduled.mock.calls[0][0]).toMatchInteractions([
-              interactionLowPri,
-            ]);
+    expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+    expect(onNestedUpdateScheduledOne).toHaveBeenCalledTimes(1);
+    expect(onNestedUpdateScheduledOne.mock.calls[0][0]).toBe('one');
+    expect(onNestedUpdateScheduledTwo).toHaveBeenCalledTimes(1);
+    expect(onNestedUpdateScheduledTwo.mock.calls[0][0]).toBe('two');
+    expect(onNestedUpdateScheduledThree).not.toHaveBeenCalled();
+  });
 
-            expect(Scheduler).toFlushAndYieldThrough(['FirstComponent']);
-            expect(onPostCommit).not.toHaveBeenCalled();
+  it('is not called when an update is scheduled for another doort during a layout effect', () => {
+    const setStateRef = React.createRef(null);
 
-            expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-            expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-              interactionLowPri,
-            );
-            expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-            expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(1);
-            expect(
-              getWorkForReactThreads(onWorkStarted)[0][0],
-            ).toMatchInteractions([interactionLowPri]);
-            expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-            Scheduler.unstable_advanceTime(100);
-
-            const interactionHighPri = {
-              id: 1,
-              name: 'highPri',
-              timestamp: Scheduler.unstable_now(),
-            };
-
-            // Interrupt with higher priority work.
-            // This simulates a total of 37ms of actual render time.
-            renderer.unstable_flushSync(() => {
-              SchedulerTracing.unstable_trace(
-                interactionHighPri.name,
-                Scheduler.unstable_now(),
-                () => {
-                  second.setState({count: 1});
-
-                  expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-                  expect(
-                    onInteractionTraced,
-                  ).toHaveBeenLastNotifiedOfInteraction(interactionHighPri);
-                  expect(
-                    onInteractionScheduledWorkCompleted,
-                  ).not.toHaveBeenCalled();
-
-                  expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(1);
-                  expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-                },
-              );
-            });
-
-            expect(Scheduler).toHaveYielded([
-              'SecondComponent',
-              'onPostCommit',
-            ]);
-            expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-            expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(
-              1,
-            );
-            expect(
-              onInteractionScheduledWorkCompleted,
-            ).toHaveBeenLastNotifiedOfInteraction(interactionHighPri);
-
-            // Verify the high priority update was associated with the high priority event.
-            expect(onPostCommit).toHaveBeenCalledTimes(1);
-            let call = onPostCommit.mock.calls[0];
-            expect(call[0]).toEqual('test');
-            expect(call[3]).toEqual(Scheduler.unstable_now());
-            expect(call[4]).toMatchInteractions(
-              ReactFeatureFlags.enableSchedulerTracing
-                ? [interactionLowPri, interactionHighPri]
-                : [],
-            );
+    function ComponentRootOne() {
+      const [state, setState] = React.useState(false);
+      setStateRef.current = setState;
+      Scheduler.unstable_yieldValue(`ComponentRootOne:${state}`);
+      return state;
+    }
 
-            onPostCommit.mockClear();
-
-            Scheduler.unstable_advanceTime(100);
-
-            // Resume the original low priority update, with rebased state.
-            // Verify the low priority update was retained.
-            expect(Scheduler).toFlushAndYield([
-              'FirstComponent',
-              'onPostCommit',
-            ]);
-            expect(onPostCommit).toHaveBeenCalledTimes(1);
-            call = onPostCommit.mock.calls[0];
-            expect(call[0]).toEqual('test');
-            expect(call[3]).toEqual(Scheduler.unstable_now());
-            expect(call[4]).toMatchInteractions(
-              ReactFeatureFlags.enableSchedulerTracing
-                ? [interactionLowPri]
-                : [],
-            );
+    function ComponentRootTwo() {
+      React.useLayoutEffect(() => {
+        setStateRef.current(true);
+      }, []);
+      Scheduler.unstable_yieldValue('ComponentRootTwo');
+      return null;
+    }
 
-            expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-            expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(
-              1,
-            );
+    const onNestedUpdateScheduled = jest.fn();
 
-            // Work might be started multiple times before being completed.
-            // This is okay; it's part of the scheduler/tracing contract.
-            expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(3);
-            expect(
-              getWorkForReactThreads(onWorkStarted)[1][0],
-            ).toMatchInteractions([interactionLowPri, interactionHighPri]);
-            expect(
-              getWorkForReactThreads(onWorkStarted)[2][0],
-            ).toMatchInteractions([interactionLowPri]);
-            expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(2);
-            expect(
-              getWorkForReactThreads(onWorkStopped)[0][0],
-            ).toMatchInteractions([interactionLowPri, interactionHighPri]);
-            expect(
-              getWorkForReactThreads(onWorkStopped)[1][0],
-            ).toMatchInteractions([interactionLowPri]);
-          },
-        );
+    ReactNoop.act(() => {
+      ReactNoop.renderToRootWithID(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <ComponentRootOne />
+        </React.Profiler>,
+        1,
+      );
 
-        expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interactionLowPri);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(3);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(2);
-      });
+      ReactNoop.renderToRootWithID(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <ComponentRootTwo />
+        </React.Profiler>,
+        2,
+      );
     });
 
-    it('should trace work spawned by a commit phase lifecycle and setState callback', () => {
-      let instance;
-      class Example extends React.Component {
-        state = {
-          count: 0,
-        };
-        componentDidMount() {
-          Scheduler.unstable_advanceTime(10); // Advance timer to keep commits separate
-          this.setState({count: 1}); // Intentional cascading update
-        }
-        componentDidUpdate(prevProps, prevState) {
-          if (this.state.count === 2 && prevState.count === 1) {
-            Scheduler.unstable_advanceTime(10); // Advance timer to keep commits separate
-            this.setState({count: 3}); // Intentional cascading update
-          }
-        }
-        render() {
-          instance = this;
-          Scheduler.unstable_yieldValue('Example:' + this.state.count);
-          return <ComponentWithPassiveEffect count={this.state.count} />;
-        }
-      }
-
-      const interactionOne = {
-        id: 0,
-        name: 'componentDidMount test',
-        timestamp: Scheduler.unstable_now(),
-      };
-
-      // Initial mount.
-      const onPostCommit = jest.fn(() => {
-        Scheduler.unstable_yieldValue('onPostCommit');
-      });
-
-      ReactTestRendererAct(() => {
-        let firstCommitTime = Scheduler.unstable_now();
-        SchedulerTracing.unstable_trace(
-          interactionOne.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactTestRenderer.create(
-              <React.Profiler id="test" onPostCommit={onPostCommit}>
-                <Example />
-              </React.Profiler>,
-              {unstable_isConcurrent: true},
-            );
-          },
-        );
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interactionOne,
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-        expect(Scheduler).toFlushAndYield([
-          'Example:0',
-          'onPostCommit',
-          'Example:1',
-          'onPostCommit',
-        ]);
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interactionOne);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(2);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[0][0],
-        ).toMatchInteractions([interactionOne]);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[1][0],
-        ).toMatchInteractions([interactionOne]);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(2);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[0][0],
-        ).toMatchInteractions([interactionOne]);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[1][0],
-        ).toMatchInteractions([interactionOne]);
-
-        expect(onPostCommit).toHaveBeenCalledTimes(2);
-        let call = onPostCommit.mock.calls[0];
-        expect(call[0]).toEqual('test');
-        expect(call[3]).toEqual(firstCommitTime);
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interactionOne] : [],
-        );
-        call = onPostCommit.mock.calls[1];
-        expect(call[0]).toEqual('test');
-        expect(call[3]).toEqual(Scheduler.unstable_now());
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interactionOne] : [],
-        );
-
-        onPostCommit.mockClear();
-
-        const interactionTwo = {
-          id: 1,
-          name: 'componentDidUpdate test',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        // Cause an traced, async update
-        SchedulerTracing.unstable_trace(
-          interactionTwo.name,
-          Scheduler.unstable_now(),
-          () => {
-            instance.setState({count: 2});
-          },
-        );
-        expect(onPostCommit).not.toHaveBeenCalled();
-        expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interactionTwo,
-        );
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(2);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(2);
-
-        Scheduler.unstable_advanceTime(5);
-
-        // Flush async work (outside of traced scope)
-        // This will cause an intentional cascading update from did-update
-        firstCommitTime = Scheduler.unstable_now();
-        expect(Scheduler).toFlushAndYield([
-          'Example:2',
-          'onPostCommit',
-          'Example:3',
-          'onPostCommit',
-        ]);
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interactionTwo);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(4);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[2][0],
-        ).toMatchInteractions([interactionTwo]);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[3][0],
-        ).toMatchInteractions([interactionTwo]);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(4);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[2][0],
-        ).toMatchInteractions([interactionTwo]);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[3][0],
-        ).toMatchInteractions([interactionTwo]);
-
-        // Verify the cascading commit is associated with the origin event
-        expect(onPostCommit).toHaveBeenCalledTimes(2);
-        call = onPostCommit.mock.calls[0];
-        expect(call[0]).toEqual('test');
-        expect(call[3]).toEqual(firstCommitTime);
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interactionTwo] : [],
-        );
-        call = onPostCommit.mock.calls[1];
-        expect(call[0]).toEqual('test');
-        expect(call[3]).toEqual(Scheduler.unstable_now());
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interactionTwo] : [],
-        );
-
-        onPostCommit.mockClear();
+    expect(Scheduler).toHaveYielded([
+      'ComponentRootOne:false',
+      'ComponentRootTwo',
+      'ComponentRootOne:true',
+    ]);
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+  });
 
-        const interactionThree = {
-          id: 2,
-          name: 'setState callback test',
-          timestamp: Scheduler.unstable_now(),
-        };
+  it('is not called when a function component schedules an update during a passive effect', () => {
+    function Component() {
+      const [didMount, setDidMount] = React.useState(false);
+      React.useEffect(() => {
+        setDidMount(true);
+      }, []);
+      Scheduler.unstable_yieldValue(`Component:${didMount}`);
+      return didMount;
+    }
 
-        // Cause a cascading update from the setState callback
-        function callback() {
-          instance.setState({count: 6});
-        }
-        SchedulerTracing.unstable_trace(
-          interactionThree.name,
-          Scheduler.unstable_now(),
-          () => {
-            instance.setState({count: 5}, callback);
-          },
-        );
-        expect(onPostCommit).not.toHaveBeenCalled();
+    const onNestedUpdateScheduled = jest.fn();
 
-        expect(onInteractionTraced).toHaveBeenCalledTimes(3);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interactionThree,
-        );
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(4);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(4);
-
-        // Flush async work (outside of traced scope)
-        // This will cause an intentional cascading update from the setState callback
-        firstCommitTime = Scheduler.unstable_now();
-        expect(Scheduler).toFlushAndYield([
-          'Example:5',
-          'onPostCommit',
-          'Example:6',
-          'onPostCommit',
-        ]);
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(3);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(3);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interactionThree);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(6);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[4][0],
-        ).toMatchInteractions([interactionThree]);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[5][0],
-        ).toMatchInteractions([interactionThree]);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(6);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[4][0],
-        ).toMatchInteractions([interactionThree]);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[5][0],
-        ).toMatchInteractions([interactionThree]);
-
-        // Verify the cascading commit is associated with the origin event
-        expect(onPostCommit).toHaveBeenCalledTimes(2);
-        call = onPostCommit.mock.calls[0];
-        expect(call[0]).toEqual('test');
-        expect(call[3]).toEqual(firstCommitTime);
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interactionThree] : [],
-        );
-        call = onPostCommit.mock.calls[1];
-        expect(call[0]).toEqual('test');
-        expect(call[3]).toEqual(Scheduler.unstable_now());
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interactionThree] : [],
-        );
-      });
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component />
+        </React.Profiler>,
+      );
     });
 
-    it('should trace interactions associated with a parent component state update', () => {
-      const onPostCommit = jest.fn(() => {
-        Scheduler.unstable_yieldValue('onPostCommit');
-      });
-      let parentInstance = null;
-
-      class Child extends React.Component {
-        render() {
-          Scheduler.unstable_yieldValue('Child:' + this.props.count);
-          return <ComponentWithPassiveEffect count={this.props.count} />;
-        }
-      }
-
-      class Parent extends React.Component {
-        state = {
-          count: 0,
-        };
-        render() {
-          parentInstance = this;
-          return (
-            <React.Profiler id="test-profiler" onPostCommit={onPostCommit}>
-              <Child count={this.state.count} />
-            </React.Profiler>
-          );
-        }
-      }
-
-      Scheduler.unstable_advanceTime(1);
+    expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+  });
 
-      ReactTestRendererAct(() => {
-        ReactTestRenderer.create(<Parent />, {
-          unstable_isConcurrent: true,
-        });
-        expect(Scheduler).toFlushAndYield(['Child:0', 'onPostCommit']);
-        onPostCommit.mockClear();
+  it('is not called when a function component schedules an update outside of render', () => {
+    const updateFnRef = React.createRef(null);
 
-        const interaction = {
-          id: 0,
-          name: 'parent interaction',
-          timestamp: Scheduler.unstable_now(),
-        };
+    function Component() {
+      const [state, setState] = React.useState(false);
+      updateFnRef.current = () => setState(true);
+      Scheduler.unstable_yieldValue(`Component:${state}`);
+      return state;
+    }
 
-        SchedulerTracing.unstable_trace(
-          interaction.name,
-          Scheduler.unstable_now(),
-          () => {
-            parentInstance.setState({count: 1});
-          },
-        );
+    const onNestedUpdateScheduled = jest.fn();
 
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interaction,
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-        expect(onPostCommit).not.toHaveBeenCalled();
-        expect(Scheduler).toFlushAndYield(['Child:1', 'onPostCommit']);
-        expect(onPostCommit).toHaveBeenCalledTimes(1);
-        const call = onPostCommit.mock.calls[0];
-        expect(call[0]).toEqual('test-profiler');
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interaction] : [],
-        );
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Component:false']);
 
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(1);
-        expect(
-          getWorkForReactThreads(onWorkStarted)[0][0],
-        ).toMatchInteractions([interaction]);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(1);
-        expect(
-          getWorkForReactThreads(onWorkStopped)[0][0],
-        ).toMatchInteractions([interaction]);
-      });
+    ReactNoop.act(() => {
+      updateFnRef.current();
     });
+    expect(Scheduler).toHaveYielded(['Component:true']);
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+  });
 
-    describe('suspense', () => {
-      function awaitableAdvanceTimers(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('it is not called when a component schedules an update during render', () => {
+    function Component() {
+      const [state, setState] = React.useState(false);
+      if (state === false) {
+        setState(true);
       }
+      Scheduler.unstable_yieldValue(`Component:${state}`);
+      return state;
+    }
 
-      it('traces both the temporary placeholder and the finished render for an interaction', async () => {
-        loadModulesForTracing({useNoopRenderer: true});
-
-        const interaction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const monkey = React.createRef();
-        class Monkey extends React.Component {
-          render() {
-            Scheduler.unstable_yieldValue('Monkey');
-            return null;
-          }
-        }
-
-        const onCommit = jest.fn(() => {
-          Scheduler.unstable_yieldValue('onCommit');
-        });
-        await ReactNoop.act(async () => {
-          SchedulerTracing.unstable_trace(
-            interaction.name,
-            Scheduler.unstable_now(),
-            () => {
-              ReactNoop.render(
-                <React.Profiler id="test-profiler" onCommit={onCommit}>
-                  <React.Suspense fallback={<Text text="Loading..." />}>
-                    <AsyncText text="Async" ms={20000} />
-                  </React.Suspense>
-                  <Text text="Sync" />
-                  <Monkey ref={monkey} />
-                  <ComponentWithPassiveEffect />
-                </React.Profiler>,
-              );
-            },
-          );
-
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-            interaction,
-          );
-          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-          expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-          expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-          expect(Scheduler).toFlushAndYield([
-            'Suspend [Async]',
-            'Text [Loading...]',
-            'Text [Sync]',
-            'Monkey',
-            'onCommit',
-          ]);
-          // Should have committed the placeholder.
-          expect(ReactNoop.getChildrenAsJSX()).toEqual('Loading...Sync');
-          expect(onCommit).toHaveBeenCalledTimes(1);
-
-          let call = onCommit.mock.calls[0];
-          expect(call[0]).toEqual('test-profiler');
-          expect(call[4]).toMatchInteractions(
-            ReactFeatureFlags.enableSchedulerTracing ? [interaction] : [],
-          );
-
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-          // An unrelated update in the middle shouldn't affect things...
-          monkey.current.forceUpdate();
-          expect(Scheduler).toFlushAndYield(['Monkey', 'onCommit']);
-          expect(onCommit).toHaveBeenCalledTimes(2);
-
-          // Once the promise resolves, we render the suspended view
-          await awaitableAdvanceTimers(20000);
-          expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-          expect(Scheduler).toFlushAndYield(['AsyncText [Async]', 'onCommit']);
-          expect(ReactNoop.getChildrenAsJSX()).toEqual('AsyncSync');
-          expect(onCommit).toHaveBeenCalledTimes(3);
-
-          call = onCommit.mock.calls[2];
-          expect(call[0]).toEqual('test-profiler');
-          expect(call[4]).toMatchInteractions(
-            ReactFeatureFlags.enableSchedulerTracing ? [interaction] : [],
-          );
-
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-          expect(
-            onInteractionScheduledWorkCompleted,
-          ).toHaveBeenLastNotifiedOfInteraction(interaction);
-        });
-      });
-
-      it('does not prematurely complete for suspended sync renders', async () => {
-        const interaction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onPostCommit = jest.fn(() =>
-          Scheduler.unstable_yieldValue('onPostCommit'),
-        );
-        SchedulerTracing.unstable_trace(
-          interaction.name,
-          interaction.timestamp,
-          () => {
-            ReactTestRenderer.create(
-              <React.Profiler id="app" onPostCommit={onPostCommit}>
-                <React.Suspense fallback={<Text text="loading" />}>
-                  <AsyncText text="loaded" ms={500} />
-                  <ComponentWithPassiveEffect />
-                </React.Suspense>
-              </React.Profiler>,
-            );
-          },
-        );
-
-        expect(Scheduler).toHaveYielded(['Suspend [loaded]', 'Text [loading]']);
-
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        jest.runAllTimers();
-        await resourcePromise;
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushUntilNextPaint([
-          'onPostCommit',
-          'AsyncText [loaded]',
-        ]);
-        expect(Scheduler).toFlushAndYield(['onPostCommit']);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      it('traces cascading work after suspended sync renders', async () => {
-        let wrappedCascadingFn;
-        class AsyncComponentWithCascadingWork extends React.Component {
-          state = {
-            hasMounted: false,
-          };
-
-          componentDidMount() {
-            wrappedCascadingFn = SchedulerTracing.unstable_wrap(() => {
-              this.setState({hasMounted: true});
-            });
-          }
-
-          render() {
-            Scheduler.unstable_yieldValue('render');
-            const {ms, text} = this.props;
-            TextResource.read([text, ms]);
-            return <span prop={text}>{this.state.hasMounted}</span>;
-          }
-        }
-
-        const interaction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onPostCommit = jest.fn(() =>
-          Scheduler.unstable_yieldValue('onPostCommit'),
-        );
-        SchedulerTracing.unstable_trace(
-          interaction.name,
-          interaction.timestamp,
-          () => {
-            ReactTestRenderer.create(
-              <React.Profiler id="app" onPostCommit={onPostCommit}>
-                <ComponentWithPassiveEffect />
-                <React.Suspense fallback={<Text text="loading" />}>
-                  <AsyncComponentWithCascadingWork text="loaded" ms={500} />
-                </React.Suspense>
-              </React.Profiler>,
-            );
-          },
-        );
-
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        expect(Scheduler).toHaveYielded(['render', 'Text [loading]']);
-
-        jest.runAllTimers();
-        await resourcePromise;
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushUntilNextPaint(['onPostCommit', 'render']);
+    const onNestedUpdateScheduled = jest.fn();
 
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
 
-        wrappedCascadingFn();
-        expect(Scheduler).toHaveYielded(['onPostCommit', 'render']);
+    expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+  });
 
-        // The new reconciler does not call onPostCommit again
-        // because the resolved suspended subtree doesn't contain any passive effects.
-        // If <AsyncComponentWithCascadingWork> or its decendents had a passive effect,
-        // onPostCommit would be called again.
-        if (gate(flags => flags.enableUseJSStackToTrackPassiveDurations)) {
-          expect(Scheduler).toFlushAndYield([]);
+  it('it is called when a component schedules an update from a ref callback', () => {
+    function Component({mountChild}) {
+      const [refAttached, setRefAttached] = React.useState(false);
+      const [refDetached, setRefDetached] = React.useState(false);
+      const refSetter = React.useCallback(ref => {
+        if (ref !== null) {
+          setRefAttached(true);
         } else {
-          expect(Scheduler).toFlushAndYield(['onPostCommit']);
+          setRefDetached(true);
         }
+      }, []);
+      Scheduler.unstable_yieldValue(`Component:${refAttached}:${refDetached}`);
+      return mountChild ? <div ref={refSetter} /> : null;
+    }
 
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      it('does not prematurely complete for suspended renders that have exceeded their deadline', async () => {
-        const interaction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onCommit = jest.fn(() => {
-          Scheduler.unstable_yieldValue('onCommit');
-        });
-        SchedulerTracing.unstable_trace(
-          interaction.name,
-          interaction.timestamp,
-          () => {
-            ReactTestRenderer.create(
-              <React.Profiler id="app" onCommit={onCommit}>
-                <React.Suspense fallback={<Text text="loading" />}>
-                  <AsyncText text="loaded" ms={500} />
-                </React.Suspense>
-              </React.Profiler>,
-              {
-                unstable_isConcurrent: true,
-              },
-            );
-          },
-        );
-
-        Scheduler.unstable_advanceTime(400);
-        await awaitableAdvanceTimers(400);
-
-        expect(Scheduler).toFlushAndYield([
-          'Suspend [loaded]',
-          'Text [loading]',
-          'onCommit',
-        ]);
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        Scheduler.unstable_advanceTime(500);
-        await awaitableAdvanceTimers(500);
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushAndYield(['AsyncText [loaded]', 'onCommit']);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      it('decrements interaction count correctly if suspense loads before placeholder is shown', async () => {
-        const interaction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onCommit = jest.fn(() => {
-          Scheduler.unstable_yieldValue('onCommit');
-        });
-        SchedulerTracing.unstable_trace(
-          interaction.name,
-          interaction.timestamp,
-          () => {
-            ReactTestRenderer.create(
-              <React.Profiler id="app" onCommit={onCommit}>
-                <React.Suspense fallback={<Text text="loading" />}>
-                  <AsyncText text="loaded" ms={100} />
-                </React.Suspense>
-              </React.Profiler>,
-              {unstable_isConcurrent: true},
-            );
-          },
-        );
-        expect(Scheduler).toFlushAndYield([
-          'Suspend [loaded]',
-          'Text [loading]',
-          'onCommit',
-        ]);
-
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-        jest.advanceTimersByTime(100);
-        await resourcePromise;
-        expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushAndYield(['AsyncText [loaded]', 'onCommit']);
-
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-      });
-
-      it('handles high-pri renderers between suspended and resolved (sync) trees', async () => {
-        const initialRenderInteraction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onPostCommit = jest.fn(() =>
-          Scheduler.unstable_yieldValue('onPostCommit'),
-        );
-        let renderer;
-        SchedulerTracing.unstable_trace(
-          initialRenderInteraction.name,
-          initialRenderInteraction.timestamp,
-          () => {
-            renderer = ReactTestRenderer.create(
-              <React.Profiler id="app" onPostCommit={onPostCommit}>
-                <ComponentWithPassiveEffect />
-                <React.Suspense fallback={<Text text="loading" />}>
-                  <AsyncText text="loaded" ms={100} />
-                </React.Suspense>
-                <Text text="initial" />
-              </React.Profiler>,
-            );
-          },
-        );
-        expect(renderer.toJSON()).toEqual(['loading', 'initial']);
-        expect(Scheduler).toHaveYielded([
-          'Suspend [loaded]',
-          'Text [loading]',
-          'Text [initial]',
-        ]);
-        expect(Scheduler).toFlushAndYield(['onPostCommit']);
-
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-        expect(onPostCommit).toHaveBeenCalledTimes(1);
-        expect(onPostCommit.mock.calls[0][4]).toMatchInteractions([
-          initialRenderInteraction,
-        ]);
-        onPostCommit.mockClear();
-
-        const highPriUpdateInteraction = {
-          id: 1,
-          name: 'hiPriUpdate',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const originalPromise = resourcePromise;
-
-        renderer.unstable_flushSync(() => {
-          SchedulerTracing.unstable_trace(
-            highPriUpdateInteraction.name,
-            highPriUpdateInteraction.timestamp,
-            () => {
-              renderer.update(
-                <React.Profiler id="app" onPostCommit={onPostCommit}>
-                  <ComponentWithPassiveEffect />
-                  <React.Suspense fallback={<Text text="loading" />}>
-                    <AsyncText text="loaded" ms={100} />
-                  </React.Suspense>
-                  <Text text="updated" />
-                </React.Profiler>,
-              );
-            },
-          );
-        });
-        expect(renderer.toJSON()).toEqual(['loading', 'updated']);
-        expect(Scheduler).toHaveYielded([
-          'Suspend [loaded]',
-          'Text [loading]',
-          'Text [updated]',
-        ]);
-        expect(Scheduler).toFlushAndYield(['onPostCommit']);
-
-        expect(onPostCommit).toHaveBeenCalledTimes(1);
-        expect(onPostCommit.mock.calls[0][4]).toMatchInteractions([
-          highPriUpdateInteraction,
-        ]);
-        onPostCommit.mockClear();
-
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted.mock.calls[0][0],
-        ).toMatchInteraction(highPriUpdateInteraction);
-        onInteractionScheduledWorkCompleted.mockClear();
-
-        Scheduler.unstable_advanceTime(100);
-        jest.advanceTimersByTime(100);
-        await originalPromise;
-
-        expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushUntilNextPaint(['AsyncText [loaded]']);
-        expect(renderer.toJSON()).toEqual(['loaded', 'updated']);
-        expect(Scheduler).toFlushAndYield(['onPostCommit']);
-
-        expect(onPostCommit).toHaveBeenCalledTimes(1);
-        expect(onPostCommit.mock.calls[0][4]).toMatchInteractions([
-          initialRenderInteraction,
-        ]);
-
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted.mock.calls[0][0],
-        ).toMatchInteraction(initialRenderInteraction);
-      });
-
-      // @gate experimental || !enableSyncDefaultUpdates
-      it('handles high-pri renderers between suspended and resolved (async) trees', async () => {
-        // Set up an initial shell. We need to set this up before the test sceanrio
-        // because we want initial render to suspend on navigation to the initial state.
-        const renderer = ReactTestRenderer.create(
-          <React.Profiler id="app" onRender={() => {}}>
-            <React.Suspense fallback={<Text text="loading" />} />
-          </React.Profiler>,
-          {unstable_isConcurrent: true},
-        );
-        expect(Scheduler).toFlushAndYield([]);
-
-        const initialRenderInteraction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const onCommit = jest.fn(() => {
-          Scheduler.unstable_yieldValue('onCommit');
-        });
-        SchedulerTracing.unstable_trace(
-          initialRenderInteraction.name,
-          initialRenderInteraction.timestamp,
-          () => {
-            if (gate(flags => flags.enableSyncDefaultUpdates)) {
-              React.unstable_startTransition(() => {
-                renderer.update(
-                  <React.Profiler id="app" onCommit={onCommit}>
-                    <React.Suspense fallback={<Text text="loading" />}>
-                      <AsyncText text="loaded" ms={100} />
-                    </React.Suspense>
-                    <Text text="initial" />
-                  </React.Profiler>,
-                );
-              });
-            } else {
-              renderer.update(
-                <React.Profiler id="app" onCommit={onCommit}>
-                  <React.Suspense fallback={<Text text="loading" />}>
-                    <AsyncText text="loaded" ms={100} />
-                  </React.Suspense>
-                  <Text text="initial" />
-                </React.Profiler>,
-              );
-            }
-          },
-        );
-        expect(Scheduler).toFlushAndYield([
-          'Suspend [loaded]',
-          'Text [loading]',
-          'Text [initial]',
-        ]);
-
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-        expect(onCommit).not.toHaveBeenCalled();
-
-        Scheduler.unstable_advanceTime(50);
-        jest.advanceTimersByTime(50);
-
-        const highPriUpdateInteraction = {
-          id: 1,
-          name: 'hiPriUpdate',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        const originalPromise = resourcePromise;
-
-        renderer.unstable_flushSync(() => {
-          SchedulerTracing.unstable_trace(
-            highPriUpdateInteraction.name,
-            highPriUpdateInteraction.timestamp,
-            () => {
-              renderer.update(
-                <React.Profiler id="app" onCommit={onCommit}>
-                  <React.Suspense fallback={<Text text="loading" />}>
-                    <AsyncText text="loaded" ms={100} />
-                  </React.Suspense>
-                  <Text text="updated" />
-                </React.Profiler>,
-              );
-            },
-          );
-        });
-        expect(Scheduler).toHaveYielded([
-          'Suspend [loaded]',
-          'Text [loading]',
-          'Text [updated]',
-          'onCommit',
-        ]);
-        expect(renderer.toJSON()).toEqual(['loading', 'updated']);
-
-        expect(onCommit).toHaveBeenCalledTimes(1);
-        expect(onCommit.mock.calls[0][4]).toMatchInteractions([
-          highPriUpdateInteraction,
-        ]);
-        onCommit.mockClear();
-
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(0);
-
-        Scheduler.unstable_advanceTime(50);
-        jest.advanceTimersByTime(50);
-        await originalPromise;
-        expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
-        expect(Scheduler).toFlushAndYield(['AsyncText [loaded]', 'onCommit']);
-        expect(renderer.toJSON()).toEqual(['loaded', 'updated']);
-
-        expect(onCommit).toHaveBeenCalledTimes(1);
-        expect(onCommit.mock.calls[0][4]).toMatchInteractions([
-          highPriUpdateInteraction,
-        ]);
-
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-        expect(
-          onInteractionScheduledWorkCompleted.mock.calls[0][0],
-        ).toMatchInteraction(initialRenderInteraction);
-        expect(
-          onInteractionScheduledWorkCompleted.mock.calls[1][0],
-        ).toMatchInteraction(highPriUpdateInteraction);
-      });
-
-      it('does not trace Promises flagged with __reactDoNotTraceInteractions', async () => {
-        loadModulesForTracing({useNoopRenderer: true});
-
-        const interaction = {
-          id: 0,
-          name: 'initial render',
-          timestamp: Scheduler.unstable_now(),
-        };
-
-        AsyncText = ({ms, text}) => {
-          try {
-            TextResource.read([text, ms]);
-            Scheduler.unstable_yieldValue(`AsyncText [${text}]`);
-            return text;
-          } catch (promise) {
-            promise.__reactDoNotTraceInteractions = true;
-
-            if (typeof promise.then === 'function') {
-              Scheduler.unstable_yieldValue(`Suspend [${text}]`);
-            } else {
-              Scheduler.unstable_yieldValue(`Error [${text}]`);
-            }
-            throw promise;
-          }
-        };
-
-        const onCommit = jest.fn(() => {
-          Scheduler.unstable_yieldValue('onCommit');
-        });
-        SchedulerTracing.unstable_trace(
-          interaction.name,
-          Scheduler.unstable_now(),
-          () => {
-            ReactNoop.render(
-              <React.Profiler id="test-profiler" onCommit={onCommit}>
-                <React.Suspense fallback={<Text text="Loading..." />}>
-                  <AsyncText text="Async" ms={20000} />
-                </React.Suspense>
-                <Text text="Sync" />
-              </React.Profiler>,
-            );
-          },
-        );
-
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          interaction,
-        );
-        expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-        expect(getWorkForReactThreads(onWorkStarted)).toHaveLength(0);
-        expect(getWorkForReactThreads(onWorkStopped)).toHaveLength(0);
-
-        expect(Scheduler).toFlushAndYield([
-          'Suspend [Async]',
-          'Text [Loading...]',
-          'Text [Sync]',
-          'onCommit',
-        ]);
-        // Should have committed the placeholder.
-        expect(ReactNoop.getChildrenAsJSX()).toEqual('Loading...Sync');
-        expect(onCommit).toHaveBeenCalledTimes(1);
-
-        let call = onCommit.mock.calls[0];
-        expect(call[0]).toEqual('test-profiler');
-        expect(call[4]).toMatchInteractions(
-          ReactFeatureFlags.enableSchedulerTracing ? [interaction] : [],
-        );
+    const onNestedUpdateScheduled = jest.fn();
 
-        // The interaction is now complete.
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(interaction);
-
-        // Once the promise resolves, we render the suspended view
-        await awaitableAdvanceTimers(20000);
-        expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-        expect(Scheduler).toFlushAndYield(['AsyncText [Async]', 'onCommit']);
-        expect(ReactNoop.getChildrenAsJSX()).toEqual('AsyncSync');
-        expect(onCommit).toHaveBeenCalledTimes(2);
-
-        // No interactions should be associated with this update.
-        call = onCommit.mock.calls[1];
-        expect(call[0]).toEqual('test-profiler');
-        expect(call[4]).toMatchInteractions([]);
-      });
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component mountChild={true} />
+        </React.Profiler>,
+      );
+    });
 
-      it('should properly report base duration wrt suspended subtrees', async () => {
-        loadModulesForTracing({useNoopRenderer: true});
+    expect(Scheduler).toHaveYielded([
+      'Component:false:false',
+      'Component:true:false',
+    ]);
+    expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+    expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component mountChild={false} />
+        </React.Profiler>,
+      );
+    });
 
-        const onRender = jest.fn();
+    expect(Scheduler).toHaveYielded([
+      'Component:true:false',
+      'Component:true:true',
+    ]);
+    expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(2);
+    expect(onNestedUpdateScheduled.mock.calls[1][0]).toBe('test');
+  });
 
-        let resolve = null;
-        const promise = new Promise(_resolve => {
-          resolve = _resolve;
-        });
+  it('is called when a class component schedules an update from the componentDidMount lifecycles', () => {
+    class Component extends React.Component {
+      state = {
+        value: false,
+      };
+      componentDidMount() {
+        this.setState({value: true});
+      }
+      render() {
+        const {value} = this.state;
+        Scheduler.unstable_yieldValue(`Component:${value}`);
+        return value;
+      }
+    }
 
-        function Other() {
-          Scheduler.unstable_advanceTime(1);
-          Scheduler.unstable_yieldValue('Other');
-          return <div>Other</div>;
-        }
+    const onNestedUpdateScheduled = jest.fn();
 
-        function Fallback() {
-          Scheduler.unstable_advanceTime(8);
-          Scheduler.unstable_yieldValue('Fallback');
-          return <div>Fallback</div>;
-        }
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
 
-        let shouldSuspend = false;
-        function Suspender() {
-          Scheduler.unstable_advanceTime(15);
-          if (shouldSuspend) {
-            Scheduler.unstable_yieldValue('Suspender!');
-            throw promise;
-          }
-          Scheduler.unstable_yieldValue('Suspender');
-          return <div>Suspender</div>;
-        }
+    expect(Scheduler).toHaveYielded(['Component:false', 'Component:true']);
+    expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+    expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+  });
 
-        function App() {
-          return (
-            <React.Profiler id="root" onRender={onRender}>
-              <Other />
-              <React.Suspense fallback={<Fallback />}>
-                <Suspender />
-              </React.Suspense>
-            </React.Profiler>
-          );
+  it('is called when a class component schedules an update from the componentDidUpdate lifecycles', () => {
+    class Component extends React.Component {
+      state = {
+        nestedUpdateSheduled: false,
+      };
+      componentDidUpdate(prevProps, prevState) {
+        if (
+          this.props.scheduleNestedUpdate &&
+          !this.state.nestedUpdateSheduled
+        ) {
+          this.setState({nestedUpdateSheduled: true});
         }
-
-        ReactNoop.render(<App />);
-        expect(Scheduler).toFlushAndYield(['Other', 'Suspender']);
-        expect(ReactNoop).toMatchRenderedOutput(
-          <>
-            <div>Other</div>
-            <div>Suspender</div>
-          </>,
-        );
-        expect(onRender).toHaveBeenCalledTimes(1);
-        expect(onRender.mock.calls[0][2]).toBe(1 + 15); // actual
-        expect(onRender.mock.calls[0][3]).toBe(1 + 15); // base
-
-        shouldSuspend = true;
-        ReactNoop.render(<App />);
-        expect(Scheduler).toFlushAndYield(['Other', 'Suspender!', 'Fallback']);
-        await awaitableAdvanceTimers(20000);
-        expect(ReactNoop).toMatchRenderedOutput(
-          <>
-            <div>Other</div>
-            <div hidden={true}>Suspender</div>
-            <div>Fallback</div>
-          </>,
-        );
-        expect(onRender).toHaveBeenCalledTimes(2);
-        expect(onRender.mock.calls[1][2]).toBe(1 + 15 + 8); // actual
-        expect(onRender.mock.calls[1][3]).toBe(1 + 8); // base
-
-        shouldSuspend = false;
-        resolve();
-        await promise;
-        expect(Scheduler).toFlushAndYield(['Suspender']);
-        expect(ReactNoop).toMatchRenderedOutput(
-          <>
-            <div>Other</div>
-            <div>Suspender</div>
-          </>,
+      }
+      render() {
+        const {scheduleNestedUpdate} = this.props;
+        const {nestedUpdateSheduled} = this.state;
+        Scheduler.unstable_yieldValue(
+          `Component:${scheduleNestedUpdate}:${nestedUpdateSheduled}`,
         );
-        expect(onRender).toHaveBeenCalledTimes(3);
-        expect(onRender.mock.calls[2][2]).toBe(15); // actual
-        expect(onRender.mock.calls[2][3]).toBe(1 + 15); // base
-      });
+        return nestedUpdateSheduled;
+      }
+    }
 
-      if (__DEV__) {
-        it('double invoking does not disconnect wrapped async work', () => {
-          ReactFeatureFlags.enableStrictEffects = true;
-          ReactFeatureFlags.createRootStrictEffectsByDefault = true;
+    const onNestedUpdateScheduled = jest.fn();
 
-          const callback = jest.fn(() => {
-            const wrappedInteractions = SchedulerTracing.unstable_getCurrent();
-            // Expect wrappedInteractions and interactions to be the same set.
-            expect(wrappedInteractions).toMatchInteractions([interaction]);
-          });
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component scheduleNestedUpdate={false} />
+        </React.Profiler>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Component:false:false']);
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
+
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component scheduleNestedUpdate={true} />
+        </React.Profiler>,
+      );
+    });
 
-          const Component = jest.fn(() => {
-            React.useEffect(() => {
-              setTimeout(SchedulerTracing.unstable_wrap(callback), 0);
-            });
-            React.useLayoutEffect(() => {
-              setTimeout(SchedulerTracing.unstable_wrap(callback), 0);
-            });
+    expect(Scheduler).toHaveYielded([
+      'Component:true:false',
+      'Component:true:true',
+    ]);
+    expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
+    expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
+  });
 
-            return null;
-          });
+  it('is not called when a class component schedules an update outside of render', () => {
+    const updateFnRef = React.createRef(null);
 
-          let interaction;
-          SchedulerTracing.unstable_trace(
-            'event',
-            Scheduler.unstable_now(),
-            () => {
-              const interactions = SchedulerTracing.unstable_getCurrent();
-              expect(interactions.size).toBe(1);
-              interaction = Array.from(interactions)[0];
-              ReactTestRendererAct(() => {
-                ReactTestRenderer.create(<Component />, {
-                  unstable_isConcurrent: true,
-                });
-              });
-            },
-          );
-          Scheduler.unstable_flushAll();
+    class Component extends React.Component {
+      state = {
+        value: false,
+      };
+      render() {
+        const {value} = this.state;
+        updateFnRef.current = () => this.setState({value: true});
+        Scheduler.unstable_yieldValue(`Component:${value}`);
+        return value;
+      }
+    }
 
-          jest.runAllTimers();
+    const onNestedUpdateScheduled = jest.fn();
 
-          expect(callback).toHaveBeenCalledTimes(4); // 2x per effect
+    ReactNoop.act(() => {
+      ReactNoop.render(
+        <React.Profiler
+          id="test"
+          onNestedUpdateScheduled={onNestedUpdateScheduled}>
+          <Component />
+        </React.Profiler>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Component:false']);
 
-          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-        });
-      }
+    ReactNoop.act(() => {
+      updateFnRef.current();
     });
+    expect(Scheduler).toHaveYielded(['Component:true']);
+    expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
   });
+
+  // TODO Add hydration tests to ensure we don't have false positives called.
 });
diff --git a/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js b/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
deleted file mode 100644
index 6c1df098d684..000000000000
--- a/packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
+++ /dev/null
@@ -1,129 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactDOM;
-let SchedulerTracing;
-let Scheduler;
-
-function loadModules() {
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-
-  ReactFeatureFlags.enableProfilerTimer = true;
-  ReactFeatureFlags.enableSchedulerTracing = true;
-
-  React = require('react');
-  SchedulerTracing = require('scheduler/tracing');
-  ReactDOM = require('react-dom');
-  Scheduler = require('scheduler');
-}
-
-describe('ProfilerDOM', () => {
-  let onInteractionScheduledWorkCompleted;
-  let onInteractionTraced;
-
-  beforeEach(() => {
-    loadModules();
-
-    onInteractionScheduledWorkCompleted = jest.fn();
-    onInteractionTraced = jest.fn();
-
-    // Verify interaction subscriber methods are called as expected.
-    SchedulerTracing.unstable_subscribe({
-      onInteractionScheduledWorkCompleted,
-      onInteractionTraced,
-      onWorkCanceled: () => {},
-      onWorkScheduled: () => {},
-      onWorkStarted: () => {},
-      onWorkStopped: () => {},
-    });
-  });
-
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return props.text;
-  }
-
-  // @gate experimental
-  it('should correctly trace interactions for async roots', async () => {
-    let resolve;
-    let thenable = {
-      then(res) {
-        resolve = () => {
-          thenable = null;
-          res();
-        };
-      },
-    };
-
-    function Async() {
-      if (thenable !== null) {
-        Scheduler.unstable_yieldValue('Suspend! [Async]');
-        throw thenable;
-      }
-      Scheduler.unstable_yieldValue('Async');
-      return 'Async';
-    }
-
-    const element = document.createElement('div');
-    const root = ReactDOM.createRoot(element);
-
-    let interaction;
-    let wrappedResolve;
-    SchedulerTracing.unstable_trace('initial_event', performance.now(), () => {
-      const interactions = SchedulerTracing.unstable_getCurrent();
-      expect(interactions.size).toBe(1);
-      interaction = Array.from(interactions)[0];
-
-      root.render(
-        <React.Suspense fallback={<Text text="Loading..." />}>
-          <Async />
-        </React.Suspense>,
-      );
-
-      wrappedResolve = SchedulerTracing.unstable_wrap(() => resolve());
-    });
-
-    // Render, suspend, and commit fallback
-    expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);
-    expect(element.textContent).toEqual('Loading...');
-
-    expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-      interaction,
-    );
-    expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-    // Ping React to try rendering again
-    wrappedResolve();
-
-    // Complete the tree without committing it
-    expect(Scheduler).toFlushAndYieldThrough(['Async']);
-    // Still showing the fallback
-    expect(element.textContent).toEqual('Loading...');
-
-    expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-      interaction,
-    );
-    expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-    expect(Scheduler).toFlushAndYield([]);
-    expect(element.textContent).toEqual('Async');
-
-    expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-    expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-      interaction,
-    );
-    expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
index bd3f168af4ee..d1b5bd9b44a9 100644
--- a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
@@ -15,7 +15,6 @@ describe('ReactProfiler DevTools integration', () => {
   let ReactFeatureFlags;
   let ReactTestRenderer;
   let Scheduler;
-  let SchedulerTracing;
   let AdvanceTime;
   let hook;
 
@@ -31,9 +30,7 @@ describe('ReactProfiler DevTools integration', () => {
 
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableProfilerTimer = true;
-    ReactFeatureFlags.enableSchedulerTracing = true;
     Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
 
@@ -76,15 +73,7 @@ describe('ReactProfiler DevTools integration', () => {
     // 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,
-      new Set(),
-    );
+    expect(onRender).toHaveBeenCalledWith('Profiler', 'mount', 10, 10, 2, 12);
     onRender.mockClear();
 
     // Measure unobservable timing required by the DevTools profiler.
@@ -101,15 +90,7 @@ describe('ReactProfiler DevTools integration', () => {
     // 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,
-      new Set(),
-    );
+    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:
@@ -157,27 +138,6 @@ describe('ReactProfiler DevTools integration', () => {
     ).toBe(7);
   });
 
-  it('should store traced interactions on the HostNode so DevTools can access them', () => {
-    // Render without an interaction
-    const rendered = ReactTestRenderer.create(<div />);
-
-    const root = rendered.root._currentFiber().return;
-    expect(root.stateNode.memoizedInteractions).toContainNoInteractions();
-
-    Scheduler.unstable_advanceTime(10);
-
-    const eventTime = Scheduler.unstable_now();
-
-    // Render with an interaction
-    SchedulerTracing.unstable_trace('some event', eventTime, () => {
-      rendered.update(<div />);
-    });
-
-    expect(root.stateNode.memoizedInteractions).toMatchInteractions([
-      {name: 'some event', timestamp: eventTime},
-    ]);
-  });
-
   // @gate experimental || !enableSyncDefaultUpdates
   it('regression test: #17159', () => {
     function Text({text}) {
diff --git a/packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap b/packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap
index 91d0b594dcf0..35da4c29611a 100644
--- a/packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/ReactProfiler-test.internal.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:disabled should render children 1`] = `
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should render children 1`] = `
 <div>
   <span>
     outside span
@@ -14,11 +14,11 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
 </div>
 `;
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:disabled should support an empty Profiler (with no children) 1`] = `null`;
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 1`] = `null`;
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:disabled should support an empty Profiler (with no children) 2`] = `<div />`;
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support an empty Profiler (with no children) 2`] = `<div />`;
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:disabled should support nested Profilers 1`] = `
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:disabled should support nested Profilers 1`] = `
 Array [
   <div>
     outer function component
@@ -32,7 +32,7 @@ Array [
 ]
 `;
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:enabled should render children 1`] = `
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should render children 1`] = `
 <div>
   <span>
     outside span
@@ -46,75 +46,11 @@ exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTr
 </div>
 `;
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:enabled should support an empty Profiler (with no children) 1`] = `null`;
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 1`] = `null`;
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:enabled should support an empty Profiler (with no children) 2`] = `<div />`;
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support an empty Profiler (with no children) 2`] = `<div />`;
 
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:disabled enableProfilerTimer:enabled should support nested Profilers 1`] = `
-Array [
-  <div>
-    outer function component
-  </div>,
-  <block>
-    inner class component
-  </block>,
-  <span>
-    inner span
-  </span>,
-]
-`;
-
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled 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 enableSchedulerTracing:enabled enableProfilerTimer:disabled should support an empty Profiler (with no children) 1`] = `null`;
-
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled enableProfilerTimer:disabled should support an empty Profiler (with no children) 2`] = `<div />`;
-
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled enableProfilerTimer:disabled should support nested Profilers 1`] = `
-Array [
-  <div>
-    outer function component
-  </div>,
-  <block>
-    inner class component
-  </block>,
-  <span>
-    inner span
-  </span>,
-]
-`;
-
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled 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 enableSchedulerTracing:enabled enableProfilerTimer:enabled should support an empty Profiler (with no children) 1`] = `null`;
-
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled enableProfilerTimer:enabled should support an empty Profiler (with no children) 2`] = `<div />`;
-
-exports[`Profiler works in profiling and non-profiling bundles enableSchedulerTracing:enabled enableProfilerTimer:enabled should support nested Profilers 1`] = `
+exports[`Profiler works in profiling and non-profiling bundles enableProfilerTimer:enabled should support nested Profilers 1`] = `
 Array [
   <div>
     outer function component
diff --git a/packages/react/src/forks/ReactSharedInternals.umd.js b/packages/react/src/forks/ReactSharedInternals.umd.js
index 268b792da1e6..8082fd0eef03 100644
--- a/packages/react/src/forks/ReactSharedInternals.umd.js
+++ b/packages/react/src/forks/ReactSharedInternals.umd.js
@@ -7,7 +7,6 @@
 
 import assign from 'object-assign';
 import * as Scheduler from 'scheduler';
-import * as SchedulerTracing from 'scheduler/tracing';
 import ReactCurrentDispatcher from '../ReactCurrentDispatcher';
 import ReactCurrentOwner from '../ReactCurrentOwner';
 import ReactDebugCurrentFrame from '../ReactDebugCurrentFrame';
@@ -28,7 +27,6 @@ const ReactSharedInternals = {
   // This re-export is only required for UMD bundles;
   // CJS bundles use the shared NPM package.
   Scheduler,
-  SchedulerTracing,
 };
 
 if (__DEV__) {
diff --git a/packages/scheduler/npm/tracing-profiling.js b/packages/scheduler/npm/tracing-profiling.js
deleted file mode 100644
index cb2d20c02522..000000000000
--- a/packages/scheduler/npm/tracing-profiling.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/scheduler-tracing.profiling.min.js');
-} else {
-  module.exports = require('./cjs/scheduler-tracing.development.js');
-}
diff --git a/packages/scheduler/npm/tracing.js b/packages/scheduler/npm/tracing.js
deleted file mode 100644
index 1e318bd901b5..000000000000
--- a/packages/scheduler/npm/tracing.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/scheduler-tracing.production.min.js');
-} else {
-  module.exports = require('./cjs/scheduler-tracing.development.js');
-}
diff --git a/packages/scheduler/npm/umd/scheduler-tracing.development.js b/packages/scheduler/npm/umd/scheduler-tracing.development.js
deleted file mode 100644
index a81bf8fe2f98..000000000000
--- a/packages/scheduler/npm/umd/scheduler-tracing.development.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * @license React
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-(function(global, factory) {
-  // eslint-disable-next-line 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.SchedulerTracing = factory(global));
-})(this, function(global) {
-  function unstable_clear() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_clear.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_getCurrent() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_getCurrent.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_getThreadID() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_getThreadID.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_subscribe() {
-    // eslint-disable-next-line max-len
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_subscribe.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_trace() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_trace.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_unsubscribe() {
-    // eslint-disable-next-line max-len
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_unsubscribe.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_wrap() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_wrap.apply(
-      this,
-      arguments
-    );
-  }
-
-  return Object.freeze({
-    unstable_clear: unstable_clear,
-    unstable_getCurrent: unstable_getCurrent,
-    unstable_getThreadID: unstable_getThreadID,
-    unstable_subscribe: unstable_subscribe,
-    unstable_trace: unstable_trace,
-    unstable_unsubscribe: unstable_unsubscribe,
-    unstable_wrap: unstable_wrap,
-  });
-});
diff --git a/packages/scheduler/npm/umd/scheduler-tracing.production.min.js b/packages/scheduler/npm/umd/scheduler-tracing.production.min.js
deleted file mode 100644
index a81bf8fe2f98..000000000000
--- a/packages/scheduler/npm/umd/scheduler-tracing.production.min.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * @license React
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-(function(global, factory) {
-  // eslint-disable-next-line 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.SchedulerTracing = factory(global));
-})(this, function(global) {
-  function unstable_clear() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_clear.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_getCurrent() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_getCurrent.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_getThreadID() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_getThreadID.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_subscribe() {
-    // eslint-disable-next-line max-len
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_subscribe.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_trace() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_trace.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_unsubscribe() {
-    // eslint-disable-next-line max-len
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_unsubscribe.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_wrap() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_wrap.apply(
-      this,
-      arguments
-    );
-  }
-
-  return Object.freeze({
-    unstable_clear: unstable_clear,
-    unstable_getCurrent: unstable_getCurrent,
-    unstable_getThreadID: unstable_getThreadID,
-    unstable_subscribe: unstable_subscribe,
-    unstable_trace: unstable_trace,
-    unstable_unsubscribe: unstable_unsubscribe,
-    unstable_wrap: unstable_wrap,
-  });
-});
diff --git a/packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js b/packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js
deleted file mode 100644
index a81bf8fe2f98..000000000000
--- a/packages/scheduler/npm/umd/scheduler-tracing.profiling.min.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * @license React
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-(function(global, factory) {
-  // eslint-disable-next-line 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.SchedulerTracing = factory(global));
-})(this, function(global) {
-  function unstable_clear() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_clear.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_getCurrent() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_getCurrent.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_getThreadID() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_getThreadID.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_subscribe() {
-    // eslint-disable-next-line max-len
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_subscribe.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_trace() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_trace.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_unsubscribe() {
-    // eslint-disable-next-line max-len
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_unsubscribe.apply(
-      this,
-      arguments
-    );
-  }
-
-  function unstable_wrap() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.SchedulerTracing.unstable_wrap.apply(
-      this,
-      arguments
-    );
-  }
-
-  return Object.freeze({
-    unstable_clear: unstable_clear,
-    unstable_getCurrent: unstable_getCurrent,
-    unstable_getThreadID: unstable_getThreadID,
-    unstable_subscribe: unstable_subscribe,
-    unstable_trace: unstable_trace,
-    unstable_unsubscribe: unstable_unsubscribe,
-    unstable_wrap: unstable_wrap,
-  });
-});
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index 04daf3e6a313..e8ac46571b73 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -25,8 +25,6 @@
     "README.md",
     "build-info.json",
     "index.js",
-    "tracing.js",
-    "tracing-profiling.js",
     "unstable_mock.js",
     "unstable_no_dom.js",
     "unstable_post_task.js",
diff --git a/packages/scheduler/src/Tracing.js b/packages/scheduler/src/Tracing.js
deleted file mode 100644
index cc71b03f9065..000000000000
--- a/packages/scheduler/src/Tracing.js
+++ /dev/null
@@ -1,264 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
-
-export type Interaction = {|
-  __count: number,
-  id: number,
-  name: string,
-  timestamp: number,
-|};
-
-export type Subscriber = {
-  // A new interaction has been created via the trace() method.
-  onInteractionTraced: (interaction: Interaction) => void,
-
-  // All scheduled async work for an interaction has finished.
-  onInteractionScheduledWorkCompleted: (interaction: Interaction) => void,
-
-  // New async work has been scheduled for a set of interactions.
-  // When this work is later run, onWorkStarted/onWorkStopped will be called.
-  // A batch of async/yieldy work may be scheduled multiple times before completing.
-  // In that case, onWorkScheduled may be called more than once before onWorkStopped.
-  // Work is scheduled by a "thread" which is identified by a unique ID.
-  onWorkScheduled: (interactions: Set<Interaction>, threadID: number) => void,
-
-  // A batch of scheduled work has been canceled.
-  // Work is done by a "thread" which is identified by a unique ID.
-  onWorkCanceled: (interactions: Set<Interaction>, threadID: number) => void,
-
-  // A batch of work has started for a set of interactions.
-  // When this work is complete, onWorkStopped will be called.
-  // Work is not always completed synchronously; yielding may occur in between.
-  // A batch of async/yieldy work may also be re-started before completing.
-  // In that case, onWorkStarted may be called more than once before onWorkStopped.
-  // Work is done by a "thread" which is identified by a unique ID.
-  onWorkStarted: (interactions: Set<Interaction>, threadID: number) => void,
-
-  // A batch of work has completed for a set of interactions.
-  // Work is done by a "thread" which is identified by a unique ID.
-  onWorkStopped: (interactions: Set<Interaction>, threadID: number) => void,
-  ...
-};
-
-export type InteractionsRef = {|current: Set<Interaction>|};
-
-export type SubscriberRef = {|current: Subscriber | null|};
-
-const DEFAULT_THREAD_ID = 0;
-
-// Counters used to generate unique IDs.
-let interactionIDCounter: number = 0;
-let threadIDCounter: number = 0;
-
-// Set of currently traced interactions.
-// Interactions "stack"–
-// Meaning that newly traced interactions are appended to the previously active set.
-// When an interaction goes out of scope, the previous set (if any) is restored.
-let interactionsRef: InteractionsRef = (null: any);
-
-// Listener(s) to notify when interactions begin and end.
-let subscriberRef: SubscriberRef = (null: any);
-
-if (enableSchedulerTracing) {
-  interactionsRef = {
-    current: new Set(),
-  };
-  subscriberRef = {
-    current: null,
-  };
-}
-
-export {interactionsRef as __interactionsRef, subscriberRef as __subscriberRef};
-
-export function unstable_clear(callback: Function): any {
-  if (!enableSchedulerTracing) {
-    return callback();
-  }
-
-  const prevInteractions = interactionsRef.current;
-  interactionsRef.current = new Set();
-
-  try {
-    return callback();
-  } finally {
-    interactionsRef.current = prevInteractions;
-  }
-}
-
-export function unstable_getCurrent(): Set<Interaction> | null {
-  if (!enableSchedulerTracing) {
-    return null;
-  } else {
-    return interactionsRef.current;
-  }
-}
-
-export function unstable_getThreadID(): number {
-  return ++threadIDCounter;
-}
-
-export function unstable_trace(
-  name: string,
-  timestamp: number,
-  callback: Function,
-  threadID: number = DEFAULT_THREAD_ID,
-): any {
-  if (!enableSchedulerTracing) {
-    return callback();
-  }
-
-  const interaction: Interaction = {
-    __count: 1,
-    id: interactionIDCounter++,
-    name,
-    timestamp,
-  };
-
-  const prevInteractions = interactionsRef.current;
-
-  // Traced interactions should stack/accumulate.
-  // To do that, clone the current interactions.
-  // The previous set will be restored upon completion.
-  const interactions = new Set(prevInteractions);
-  interactions.add(interaction);
-  interactionsRef.current = interactions;
-
-  const subscriber = subscriberRef.current;
-  let returnValue;
-
-  try {
-    if (subscriber !== null) {
-      subscriber.onInteractionTraced(interaction);
-    }
-  } finally {
-    try {
-      if (subscriber !== null) {
-        subscriber.onWorkStarted(interactions, threadID);
-      }
-    } finally {
-      try {
-        returnValue = callback();
-      } finally {
-        interactionsRef.current = prevInteractions;
-
-        try {
-          if (subscriber !== null) {
-            subscriber.onWorkStopped(interactions, threadID);
-          }
-        } finally {
-          interaction.__count--;
-
-          // If no async work was scheduled for this interaction,
-          // Notify subscribers that it's completed.
-          if (subscriber !== null && interaction.__count === 0) {
-            subscriber.onInteractionScheduledWorkCompleted(interaction);
-          }
-        }
-      }
-    }
-  }
-
-  return returnValue;
-}
-
-export function unstable_wrap(
-  callback: Function,
-  threadID: number = DEFAULT_THREAD_ID,
-): Function {
-  if (!enableSchedulerTracing) {
-    return callback;
-  }
-
-  const wrappedInteractions = interactionsRef.current;
-
-  let subscriber = subscriberRef.current;
-  if (subscriber !== null) {
-    subscriber.onWorkScheduled(wrappedInteractions, threadID);
-  }
-
-  // Update the pending async work count for the current interactions.
-  // Update after calling subscribers in case of error.
-  wrappedInteractions.forEach(interaction => {
-    interaction.__count++;
-  });
-
-  let hasRun = false;
-
-  function wrapped() {
-    const prevInteractions = interactionsRef.current;
-    interactionsRef.current = wrappedInteractions;
-
-    subscriber = subscriberRef.current;
-
-    try {
-      let returnValue;
-
-      try {
-        if (subscriber !== null) {
-          subscriber.onWorkStarted(wrappedInteractions, threadID);
-        }
-      } finally {
-        try {
-          returnValue = callback.apply(undefined, arguments);
-        } finally {
-          interactionsRef.current = prevInteractions;
-
-          if (subscriber !== null) {
-            subscriber.onWorkStopped(wrappedInteractions, threadID);
-          }
-        }
-      }
-
-      return returnValue;
-    } finally {
-      if (!hasRun) {
-        // We only expect a wrapped function to be executed once,
-        // But in the event that it's executed more than once–
-        // Only decrement the outstanding interaction counts once.
-        hasRun = true;
-
-        // Update pending async counts for all wrapped interactions.
-        // If this was the last scheduled async work for any of them,
-        // Mark them as completed.
-        wrappedInteractions.forEach(interaction => {
-          interaction.__count--;
-
-          if (subscriber !== null && interaction.__count === 0) {
-            subscriber.onInteractionScheduledWorkCompleted(interaction);
-          }
-        });
-      }
-    }
-  }
-
-  wrapped.cancel = function cancel() {
-    subscriber = subscriberRef.current;
-
-    try {
-      if (subscriber !== null) {
-        subscriber.onWorkCanceled(wrappedInteractions, threadID);
-      }
-    } finally {
-      // Update pending async counts for all wrapped interactions.
-      // If this was the last scheduled async work for any of them,
-      // Mark them as completed.
-      wrappedInteractions.forEach(interaction => {
-        interaction.__count--;
-
-        if (subscriber && interaction.__count === 0) {
-          subscriber.onInteractionScheduledWorkCompleted(interaction);
-        }
-      });
-    }
-  };
-
-  return wrapped;
-}
diff --git a/packages/scheduler/src/TracingSubscriptions.js b/packages/scheduler/src/TracingSubscriptions.js
deleted file mode 100644
index 9fd687adf415..000000000000
--- a/packages/scheduler/src/TracingSubscriptions.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {Interaction, Subscriber} from './Tracing';
-
-import {enableSchedulerTracing} from 'shared/ReactFeatureFlags';
-import {__subscriberRef} from './Tracing';
-
-let subscribers: Set<Subscriber> = (null: any);
-if (enableSchedulerTracing) {
-  subscribers = new Set();
-}
-
-export function unstable_subscribe(subscriber: Subscriber): void {
-  if (enableSchedulerTracing) {
-    subscribers.add(subscriber);
-
-    if (subscribers.size === 1) {
-      __subscriberRef.current = {
-        onInteractionScheduledWorkCompleted,
-        onInteractionTraced,
-        onWorkCanceled,
-        onWorkScheduled,
-        onWorkStarted,
-        onWorkStopped,
-      };
-    }
-  }
-}
-
-export function unstable_unsubscribe(subscriber: Subscriber): void {
-  if (enableSchedulerTracing) {
-    subscribers.delete(subscriber);
-
-    if (subscribers.size === 0) {
-      __subscriberRef.current = null;
-    }
-  }
-}
-
-function onInteractionTraced(interaction: Interaction): void {
-  let didCatchError = false;
-  let caughtError = null;
-
-  subscribers.forEach(subscriber => {
-    try {
-      subscriber.onInteractionTraced(interaction);
-    } catch (error) {
-      if (!didCatchError) {
-        didCatchError = true;
-        caughtError = error;
-      }
-    }
-  });
-
-  if (didCatchError) {
-    throw caughtError;
-  }
-}
-
-function onInteractionScheduledWorkCompleted(interaction: Interaction): void {
-  let didCatchError = false;
-  let caughtError = null;
-
-  subscribers.forEach(subscriber => {
-    try {
-      subscriber.onInteractionScheduledWorkCompleted(interaction);
-    } catch (error) {
-      if (!didCatchError) {
-        didCatchError = true;
-        caughtError = error;
-      }
-    }
-  });
-
-  if (didCatchError) {
-    throw caughtError;
-  }
-}
-
-function onWorkScheduled(
-  interactions: Set<Interaction>,
-  threadID: number,
-): void {
-  let didCatchError = false;
-  let caughtError = null;
-
-  subscribers.forEach(subscriber => {
-    try {
-      subscriber.onWorkScheduled(interactions, threadID);
-    } catch (error) {
-      if (!didCatchError) {
-        didCatchError = true;
-        caughtError = error;
-      }
-    }
-  });
-
-  if (didCatchError) {
-    throw caughtError;
-  }
-}
-
-function onWorkStarted(interactions: Set<Interaction>, threadID: number): void {
-  let didCatchError = false;
-  let caughtError = null;
-
-  subscribers.forEach(subscriber => {
-    try {
-      subscriber.onWorkStarted(interactions, threadID);
-    } catch (error) {
-      if (!didCatchError) {
-        didCatchError = true;
-        caughtError = error;
-      }
-    }
-  });
-
-  if (didCatchError) {
-    throw caughtError;
-  }
-}
-
-function onWorkStopped(interactions: Set<Interaction>, threadID: number): void {
-  let didCatchError = false;
-  let caughtError = null;
-
-  subscribers.forEach(subscriber => {
-    try {
-      subscriber.onWorkStopped(interactions, threadID);
-    } catch (error) {
-      if (!didCatchError) {
-        didCatchError = true;
-        caughtError = error;
-      }
-    }
-  });
-
-  if (didCatchError) {
-    throw caughtError;
-  }
-}
-
-function onWorkCanceled(
-  interactions: Set<Interaction>,
-  threadID: number,
-): void {
-  let didCatchError = false;
-  let caughtError = null;
-
-  subscribers.forEach(subscriber => {
-    try {
-      subscriber.onWorkCanceled(interactions, threadID);
-    } catch (error) {
-      if (!didCatchError) {
-        didCatchError = true;
-        caughtError = error;
-      }
-    }
-  });
-
-  if (didCatchError) {
-    throw caughtError;
-  }
-}
diff --git a/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js b/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
index d6dfeb2081e4..fde4ee8af20e 100644
--- a/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
+++ b/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
@@ -37,30 +37,10 @@ describe('Scheduling UMD bundle', () => {
     global.MessageChannel = undefined;
   });
 
-  function filterPrivateKeys(name) {
-    // Be very careful adding things to this filter!
-    // It's easy to introduce bugs by doing it:
-    // https://github.com/facebook/react/issues/14904
-    switch (name) {
-      case '__interactionsRef':
-      case '__subscriberRef':
-        // Don't forward these. (TODO: why?)
-        return false;
-      default:
-        return true;
-    }
-  }
-
   function validateForwardedAPIs(api, forwardedAPIs) {
-    const apiKeys = Object.keys(api)
-      .filter(filterPrivateKeys)
-      .sort();
+    const apiKeys = Object.keys(api).sort();
     forwardedAPIs.forEach(forwardedAPI => {
-      expect(
-        Object.keys(forwardedAPI)
-          .filter(filterPrivateKeys)
-          .sort(),
-      ).toEqual(apiKeys);
+      expect(Object.keys(forwardedAPI).sort()).toEqual(apiKeys);
     });
   }
 
@@ -78,19 +58,4 @@ describe('Scheduling UMD bundle', () => {
       secretAPI.Scheduler,
     ]);
   });
-
-  it('should define the same tracing API', () => {
-    const api = require('../../tracing');
-    const umdAPIDev = require('../../npm/umd/scheduler-tracing.development');
-    const umdAPIProd = require('../../npm/umd/scheduler-tracing.production.min');
-    const umdAPIProfiling = require('../../npm/umd/scheduler-tracing.profiling.min');
-    const secretAPI = require('react/src/forks/ReactSharedInternals.umd')
-      .default;
-    validateForwardedAPIs(api, [
-      umdAPIDev,
-      umdAPIProd,
-      umdAPIProfiling,
-      secretAPI.SchedulerTracing,
-    ]);
-  });
 });
diff --git a/packages/scheduler/src/__tests__/Tracing-test.internal.js b/packages/scheduler/src/__tests__/Tracing-test.internal.js
deleted file mode 100644
index 658b69313ca5..000000000000
--- a/packages/scheduler/src/__tests__/Tracing-test.internal.js
+++ /dev/null
@@ -1,375 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @jest-environment node
- */
-'use strict';
-
-describe('Tracing', () => {
-  let SchedulerTracing;
-  let ReactFeatureFlags;
-
-  let advanceTimeBy;
-  let currentTime;
-
-  function loadModules({enableSchedulerTracing}) {
-    jest.resetModules();
-    jest.useFakeTimers();
-
-    currentTime = 0;
-    Date.now = jest.fn().mockImplementation(() => currentTime);
-
-    advanceTimeBy = amount => {
-      currentTime += amount;
-    };
-
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
-
-    SchedulerTracing = require('scheduler/tracing');
-  }
-
-  describe('enableSchedulerTracing enabled', () => {
-    beforeEach(() => loadModules({enableSchedulerTracing: true}));
-
-    it('should return the value of a traced function', () => {
-      expect(
-        SchedulerTracing.unstable_trace('arbitrary', currentTime, () => 123),
-      ).toBe(123);
-    });
-
-    it('should return the value of a clear function', () => {
-      expect(SchedulerTracing.unstable_clear(() => 123)).toBe(123);
-    });
-
-    it('should return the value of a wrapped function', () => {
-      let wrapped;
-      SchedulerTracing.unstable_trace('arbitrary', currentTime, () => {
-        wrapped = SchedulerTracing.unstable_wrap(() => 123);
-      });
-      expect(wrapped()).toBe(123);
-    });
-
-    it('should pass arguments through to a wrapped function', done => {
-      let wrapped;
-      SchedulerTracing.unstable_trace('arbitrary', currentTime, () => {
-        wrapped = SchedulerTracing.unstable_wrap((param1, param2) => {
-          expect(param1).toBe('foo');
-          expect(param2).toBe('bar');
-          done();
-        });
-      });
-      wrapped('foo', 'bar');
-    });
-
-    it('should return an empty set when outside of a traced event', () => {
-      expect(SchedulerTracing.unstable_getCurrent()).toContainNoInteractions();
-    });
-
-    it('should report the traced interaction from within the trace callback', done => {
-      advanceTimeBy(100);
-
-      SchedulerTracing.unstable_trace('some event', currentTime, () => {
-        const interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions).toMatchInteractions([
-          {name: 'some event', timestamp: 100},
-        ]);
-
-        done();
-      });
-    });
-
-    it('should report the traced interaction from within wrapped callbacks', done => {
-      let wrappedIndirection;
-
-      function indirection() {
-        const interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions).toMatchInteractions([
-          {name: 'some event', timestamp: 100},
-        ]);
-
-        done();
-      }
-
-      advanceTimeBy(100);
-
-      SchedulerTracing.unstable_trace('some event', currentTime, () => {
-        wrappedIndirection = SchedulerTracing.unstable_wrap(indirection);
-      });
-
-      advanceTimeBy(50);
-
-      wrappedIndirection();
-    });
-
-    it('should clear the interaction stack for traced callbacks', () => {
-      let innerTestReached = false;
-
-      SchedulerTracing.unstable_trace('outer event', currentTime, () => {
-        expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-          {name: 'outer event'},
-        ]);
-
-        SchedulerTracing.unstable_clear(() => {
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions(
-            [],
-          );
-
-          SchedulerTracing.unstable_trace('inner event', currentTime, () => {
-            expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-              {name: 'inner event'},
-            ]);
-
-            innerTestReached = true;
-          });
-        });
-
-        expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-          {name: 'outer event'},
-        ]);
-      });
-
-      expect(innerTestReached).toBe(true);
-    });
-
-    it('should clear the interaction stack for wrapped callbacks', () => {
-      let innerTestReached = false;
-      let wrappedIndirection;
-
-      const indirection = jest.fn(() => {
-        expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-          {name: 'outer event'},
-        ]);
-
-        SchedulerTracing.unstable_clear(() => {
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions(
-            [],
-          );
-
-          SchedulerTracing.unstable_trace('inner event', currentTime, () => {
-            expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-              {name: 'inner event'},
-            ]);
-
-            innerTestReached = true;
-          });
-        });
-
-        expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-          {name: 'outer event'},
-        ]);
-      });
-
-      SchedulerTracing.unstable_trace('outer event', currentTime, () => {
-        wrappedIndirection = SchedulerTracing.unstable_wrap(indirection);
-      });
-
-      wrappedIndirection();
-
-      expect(innerTestReached).toBe(true);
-    });
-
-    it('should support nested traced events', done => {
-      advanceTimeBy(100);
-
-      let innerIndirectionTraced = false;
-      let outerIndirectionTraced = false;
-
-      function innerIndirection() {
-        const interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions).toMatchInteractions([
-          {name: 'outer event', timestamp: 100},
-          {name: 'inner event', timestamp: 150},
-        ]);
-
-        innerIndirectionTraced = true;
-      }
-
-      function outerIndirection() {
-        const interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions).toMatchInteractions([
-          {name: 'outer event', timestamp: 100},
-        ]);
-
-        outerIndirectionTraced = true;
-      }
-
-      SchedulerTracing.unstable_trace('outer event', currentTime, () => {
-        // Verify the current traced event
-        let interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions).toMatchInteractions([
-          {name: 'outer event', timestamp: 100},
-        ]);
-
-        advanceTimeBy(50);
-
-        const wrapperOuterIndirection = SchedulerTracing.unstable_wrap(
-          outerIndirection,
-        );
-
-        let wrapperInnerIndirection;
-        let innerEventTraced = false;
-
-        // Verify that a nested event is properly traced
-        SchedulerTracing.unstable_trace('inner event', currentTime, () => {
-          interactions = SchedulerTracing.unstable_getCurrent();
-          expect(interactions).toMatchInteractions([
-            {name: 'outer event', timestamp: 100},
-            {name: 'inner event', timestamp: 150},
-          ]);
-
-          // Verify that a wrapped outer callback is properly traced
-          wrapperOuterIndirection();
-          expect(outerIndirectionTraced).toBe(true);
-
-          wrapperInnerIndirection = SchedulerTracing.unstable_wrap(
-            innerIndirection,
-          );
-
-          innerEventTraced = true;
-        });
-
-        expect(innerEventTraced).toBe(true);
-
-        // Verify that the original event is restored
-        interactions = SchedulerTracing.unstable_getCurrent();
-        expect(interactions).toMatchInteractions([
-          {name: 'outer event', timestamp: 100},
-        ]);
-
-        // Verify that a wrapped nested callback is properly traced
-        wrapperInnerIndirection();
-        expect(innerIndirectionTraced).toBe(true);
-
-        done();
-      });
-    });
-
-    describe('error handling', () => {
-      it('should reset state appropriately when an error occurs in a trace callback', done => {
-        advanceTimeBy(100);
-
-        SchedulerTracing.unstable_trace('outer event', currentTime, () => {
-          expect(() => {
-            SchedulerTracing.unstable_trace('inner event', currentTime, () => {
-              throw Error('intentional');
-            });
-          }).toThrow();
-
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            {name: 'outer event', timestamp: 100},
-          ]);
-
-          done();
-        });
-      });
-
-      it('should reset state appropriately when an error occurs in a wrapped callback', done => {
-        advanceTimeBy(100);
-
-        SchedulerTracing.unstable_trace('outer event', currentTime, () => {
-          let wrappedCallback;
-
-          SchedulerTracing.unstable_trace('inner event', currentTime, () => {
-            wrappedCallback = SchedulerTracing.unstable_wrap(() => {
-              throw Error('intentional');
-            });
-          });
-
-          expect(wrappedCallback).toThrow();
-
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            {name: 'outer event', timestamp: 100},
-          ]);
-
-          done();
-        });
-      });
-    });
-
-    describe('advanced integration', () => {
-      it('should return a unique threadID per request', () => {
-        expect(SchedulerTracing.unstable_getThreadID()).not.toBe(
-          SchedulerTracing.unstable_getThreadID(),
-        );
-      });
-
-      it('should expose the current set of interactions to be externally manipulated', () => {
-        SchedulerTracing.unstable_trace('outer event', currentTime, () => {
-          expect(SchedulerTracing.__interactionsRef.current).toBe(
-            SchedulerTracing.unstable_getCurrent(),
-          );
-
-          SchedulerTracing.__interactionsRef.current = new Set([
-            {name: 'override event'},
-          ]);
-
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            {name: 'override event'},
-          ]);
-        });
-      });
-
-      it('should expose a subscriber ref to be externally manipulated', () => {
-        SchedulerTracing.unstable_trace('outer event', currentTime, () => {
-          expect(SchedulerTracing.__subscriberRef).toEqual({
-            current: null,
-          });
-        });
-      });
-    });
-  });
-
-  describe('enableSchedulerTracing disabled', () => {
-    beforeEach(() => loadModules({enableSchedulerTracing: false}));
-
-    it('should return the value of a traced function', () => {
-      expect(
-        SchedulerTracing.unstable_trace('arbitrary', currentTime, () => 123),
-      ).toBe(123);
-    });
-
-    it('should return the value of a wrapped function', () => {
-      let wrapped;
-      SchedulerTracing.unstable_trace('arbitrary', currentTime, () => {
-        wrapped = SchedulerTracing.unstable_wrap(() => 123);
-      });
-      expect(wrapped()).toBe(123);
-    });
-
-    it('should return null for traced interactions', () => {
-      expect(SchedulerTracing.unstable_getCurrent()).toBe(null);
-    });
-
-    it('should execute traced callbacks', done => {
-      SchedulerTracing.unstable_trace('some event', currentTime, () => {
-        expect(SchedulerTracing.unstable_getCurrent()).toBe(null);
-
-        done();
-      });
-    });
-
-    it('should return the value of a clear function', () => {
-      expect(SchedulerTracing.unstable_clear(() => 123)).toBe(123);
-    });
-
-    it('should execute wrapped callbacks', done => {
-      const wrappedCallback = SchedulerTracing.unstable_wrap(() => {
-        expect(SchedulerTracing.unstable_getCurrent()).toBe(null);
-
-        done();
-      });
-
-      wrappedCallback();
-    });
-
-    describe('advanced integration', () => {
-      it('should not create unnecessary objects', () => {
-        expect(SchedulerTracing.__interactionsRef).toBe(null);
-      });
-    });
-  });
-});
diff --git a/packages/scheduler/src/__tests__/Tracing-test.js b/packages/scheduler/src/__tests__/Tracing-test.js
deleted file mode 100644
index 5259be479256..000000000000
--- a/packages/scheduler/src/__tests__/Tracing-test.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @jest-environment node
- */
-'use strict';
-
-describe('Tracing', () => {
-  let SchedulerTracing;
-
-  beforeEach(() => {
-    jest.resetModules();
-
-    SchedulerTracing = require('scheduler/tracing');
-  });
-
-  it('should return the value of a traced function', () => {
-    expect(SchedulerTracing.unstable_trace('arbitrary', 0, () => 123)).toBe(
-      123,
-    );
-  });
-
-  it('should return the value of a wrapped function', () => {
-    let wrapped;
-    SchedulerTracing.unstable_trace('arbitrary', 0, () => {
-      wrapped = SchedulerTracing.unstable_wrap(() => 123);
-    });
-    expect(wrapped()).toBe(123);
-  });
-
-  it('should execute traced callbacks', done => {
-    SchedulerTracing.unstable_trace('some event', 0, () => {
-      done();
-    });
-  });
-
-  it('should return the value of a clear function', () => {
-    expect(SchedulerTracing.unstable_clear(() => 123)).toBe(123);
-  });
-
-  it('should execute wrapped callbacks', done => {
-    const wrappedCallback = SchedulerTracing.unstable_wrap(() => {
-      done();
-    });
-
-    wrappedCallback();
-  });
-});
diff --git a/packages/scheduler/src/__tests__/TracingSubscriptions-test.internal.js b/packages/scheduler/src/__tests__/TracingSubscriptions-test.internal.js
deleted file mode 100644
index 6eff59a6cf86..000000000000
--- a/packages/scheduler/src/__tests__/TracingSubscriptions-test.internal.js
+++ /dev/null
@@ -1,621 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @jest-environment node
- */
-'use strict';
-
-describe('TracingSubscriptions', () => {
-  let SchedulerTracing;
-  let ReactFeatureFlags;
-
-  let currentTime;
-
-  let onInteractionScheduledWorkCompleted;
-  let onInteractionTraced;
-  let onWorkCanceled;
-  let onWorkScheduled;
-  let onWorkStarted;
-  let onWorkStopped;
-  let throwInOnInteractionScheduledWorkCompleted;
-  let throwInOnInteractionTraced;
-  let throwInOnWorkCanceled;
-  let throwInOnWorkScheduled;
-  let throwInOnWorkStarted;
-  let throwInOnWorkStopped;
-  let firstSubscriber;
-  let secondSubscriber;
-
-  const firstEvent = {id: 0, name: 'first', timestamp: 0};
-  const secondEvent = {id: 1, name: 'second', timestamp: 0};
-  const threadID = 123;
-
-  function loadModules({enableSchedulerTracing, autoSubscribe = true}) {
-    jest.resetModules();
-    jest.useFakeTimers();
-
-    currentTime = 0;
-
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableSchedulerTracing = enableSchedulerTracing;
-
-    SchedulerTracing = require('scheduler/tracing');
-
-    throwInOnInteractionScheduledWorkCompleted = false;
-    throwInOnInteractionTraced = false;
-    throwInOnWorkCanceled = false;
-    throwInOnWorkScheduled = false;
-    throwInOnWorkStarted = false;
-    throwInOnWorkStopped = false;
-
-    onInteractionScheduledWorkCompleted = jest.fn(() => {
-      if (throwInOnInteractionScheduledWorkCompleted) {
-        throw Error('Expected error onInteractionScheduledWorkCompleted');
-      }
-    });
-    onInteractionTraced = jest.fn(() => {
-      if (throwInOnInteractionTraced) {
-        throw Error('Expected error onInteractionTraced');
-      }
-    });
-    onWorkCanceled = jest.fn(() => {
-      if (throwInOnWorkCanceled) {
-        throw Error('Expected error onWorkCanceled');
-      }
-    });
-    onWorkScheduled = jest.fn(() => {
-      if (throwInOnWorkScheduled) {
-        throw Error('Expected error onWorkScheduled');
-      }
-    });
-    onWorkStarted = jest.fn(() => {
-      if (throwInOnWorkStarted) {
-        throw Error('Expected error onWorkStarted');
-      }
-    });
-    onWorkStopped = jest.fn(() => {
-      if (throwInOnWorkStopped) {
-        throw Error('Expected error onWorkStopped');
-      }
-    });
-
-    firstSubscriber = {
-      onInteractionScheduledWorkCompleted,
-      onInteractionTraced,
-      onWorkCanceled,
-      onWorkScheduled,
-      onWorkStarted,
-      onWorkStopped,
-    };
-
-    secondSubscriber = {
-      onInteractionScheduledWorkCompleted: jest.fn(),
-      onInteractionTraced: jest.fn(),
-      onWorkCanceled: jest.fn(),
-      onWorkScheduled: jest.fn(),
-      onWorkStarted: jest.fn(),
-      onWorkStopped: jest.fn(),
-    };
-
-    if (autoSubscribe) {
-      SchedulerTracing.unstable_subscribe(firstSubscriber);
-      SchedulerTracing.unstable_subscribe(secondSubscriber);
-    }
-  }
-
-  describe('enabled', () => {
-    beforeEach(() => loadModules({enableSchedulerTracing: true}));
-
-    it('should lazily subscribe to tracing and unsubscribe again if there are no external subscribers', () => {
-      loadModules({enableSchedulerTracing: true, autoSubscribe: false});
-
-      expect(SchedulerTracing.__subscriberRef.current).toBe(null);
-      SchedulerTracing.unstable_subscribe(firstSubscriber);
-      expect(SchedulerTracing.__subscriberRef.current).toBeDefined();
-      SchedulerTracing.unstable_subscribe(secondSubscriber);
-      expect(SchedulerTracing.__subscriberRef.current).toBeDefined();
-      SchedulerTracing.unstable_unsubscribe(secondSubscriber);
-      expect(SchedulerTracing.__subscriberRef.current).toBeDefined();
-      SchedulerTracing.unstable_unsubscribe(firstSubscriber);
-      expect(SchedulerTracing.__subscriberRef.current).toBe(null);
-    });
-
-    describe('error handling', () => {
-      it('should cover onInteractionTraced/onWorkStarted within', done => {
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          const mock = jest.fn();
-
-          // It should call the callback before re-throwing
-          throwInOnInteractionTraced = true;
-          expect(() =>
-            SchedulerTracing.unstable_trace(
-              secondEvent.name,
-              currentTime,
-              mock,
-              threadID,
-            ),
-          ).toThrow('Expected error onInteractionTraced');
-          throwInOnInteractionTraced = false;
-          expect(mock).toHaveBeenCalledTimes(1);
-
-          throwInOnWorkStarted = true;
-          expect(() =>
-            SchedulerTracing.unstable_trace(
-              secondEvent.name,
-              currentTime,
-              mock,
-              threadID,
-            ),
-          ).toThrow('Expected error onWorkStarted');
-          expect(mock).toHaveBeenCalledTimes(2);
-
-          // It should restore the previous/outer interactions
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            firstEvent,
-          ]);
-
-          // It should call other subscribers despite the earlier error
-          expect(secondSubscriber.onInteractionTraced).toHaveBeenCalledTimes(3);
-          expect(secondSubscriber.onWorkStarted).toHaveBeenCalledTimes(3);
-
-          done();
-        });
-      });
-
-      it('should cover onWorkStopped within trace', done => {
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          let innerInteraction;
-          const mock = jest.fn(() => {
-            innerInteraction = Array.from(
-              SchedulerTracing.unstable_getCurrent(),
-            )[1];
-          });
-
-          throwInOnWorkStopped = true;
-          expect(() =>
-            SchedulerTracing.unstable_trace(
-              secondEvent.name,
-              currentTime,
-              mock,
-            ),
-          ).toThrow('Expected error onWorkStopped');
-          throwInOnWorkStopped = false;
-
-          // It should restore the previous/outer interactions
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            firstEvent,
-          ]);
-
-          // It should update the interaction count so as not to interfere with subsequent calls
-          expect(innerInteraction.__count).toBe(0);
-
-          // It should call other subscribers despite the earlier error
-          expect(secondSubscriber.onWorkStopped).toHaveBeenCalledTimes(1);
-
-          done();
-        });
-      });
-
-      it('should cover onInteractionScheduledWorkCompleted within trace', done => {
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          const mock = jest.fn();
-
-          throwInOnInteractionScheduledWorkCompleted = true;
-          expect(() =>
-            SchedulerTracing.unstable_trace(
-              secondEvent.name,
-              currentTime,
-              mock,
-            ),
-          ).toThrow('Expected error onInteractionScheduledWorkCompleted');
-          throwInOnInteractionScheduledWorkCompleted = false;
-
-          // It should restore the previous/outer interactions
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            firstEvent,
-          ]);
-
-          // It should call other subscribers despite the earlier error
-          expect(
-            secondSubscriber.onInteractionScheduledWorkCompleted,
-          ).toHaveBeenCalledTimes(1);
-
-          done();
-        });
-      });
-
-      it('should cover the callback within trace', done => {
-        expect(onWorkStarted).not.toHaveBeenCalled();
-        expect(onWorkStopped).not.toHaveBeenCalled();
-
-        expect(() => {
-          SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-            throw Error('Expected error callback');
-          });
-        }).toThrow('Expected error callback');
-
-        expect(onWorkStarted).toHaveBeenCalledTimes(1);
-        expect(onWorkStopped).toHaveBeenCalledTimes(1);
-
-        done();
-      });
-
-      it('should cover onWorkScheduled within wrap', done => {
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          const interaction = Array.from(
-            SchedulerTracing.unstable_getCurrent(),
-          )[0];
-          const beforeCount = interaction.__count;
-
-          throwInOnWorkScheduled = true;
-          expect(() => SchedulerTracing.unstable_wrap(() => {})).toThrow(
-            'Expected error onWorkScheduled',
-          );
-
-          // It should not update the interaction count so as not to interfere with subsequent calls
-          expect(interaction.__count).toBe(beforeCount);
-
-          // It should call other subscribers despite the earlier error
-          expect(secondSubscriber.onWorkScheduled).toHaveBeenCalledTimes(1);
-
-          done();
-        });
-      });
-
-      it('should cover onWorkStarted within wrap', () => {
-        const mock = jest.fn();
-        let interaction, wrapped;
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-          wrapped = SchedulerTracing.unstable_wrap(mock);
-        });
-        expect(interaction.__count).toBe(1);
-
-        throwInOnWorkStarted = true;
-        expect(wrapped).toThrow('Expected error onWorkStarted');
-
-        // It should call the callback before re-throwing
-        expect(mock).toHaveBeenCalledTimes(1);
-
-        // It should update the interaction count so as not to interfere with subsequent calls
-        expect(interaction.__count).toBe(0);
-
-        // It should call other subscribers despite the earlier error
-        expect(secondSubscriber.onWorkStarted).toHaveBeenCalledTimes(2);
-      });
-
-      it('should cover onWorkStopped within wrap', done => {
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          const outerInteraction = Array.from(
-            SchedulerTracing.unstable_getCurrent(),
-          )[0];
-          expect(outerInteraction.__count).toBe(1);
-
-          let wrapped;
-          let innerInteraction;
-
-          SchedulerTracing.unstable_trace(secondEvent.name, currentTime, () => {
-            innerInteraction = Array.from(
-              SchedulerTracing.unstable_getCurrent(),
-            )[1];
-            expect(outerInteraction.__count).toBe(1);
-            expect(innerInteraction.__count).toBe(1);
-
-            wrapped = SchedulerTracing.unstable_wrap(jest.fn());
-            expect(outerInteraction.__count).toBe(2);
-            expect(innerInteraction.__count).toBe(2);
-          });
-
-          expect(outerInteraction.__count).toBe(2);
-          expect(innerInteraction.__count).toBe(1);
-
-          throwInOnWorkStopped = true;
-          expect(wrapped).toThrow('Expected error onWorkStopped');
-          throwInOnWorkStopped = false;
-
-          // It should restore the previous interactions
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            outerInteraction,
-          ]);
-
-          // It should update the interaction count so as not to interfere with subsequent calls
-          expect(outerInteraction.__count).toBe(1);
-          expect(innerInteraction.__count).toBe(0);
-
-          expect(secondSubscriber.onWorkStopped).toHaveBeenCalledTimes(2);
-
-          done();
-        });
-      });
-
-      it('should cover the callback within wrap', done => {
-        expect(onWorkStarted).not.toHaveBeenCalled();
-        expect(onWorkStopped).not.toHaveBeenCalled();
-
-        let wrapped;
-        let interaction;
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-          wrapped = SchedulerTracing.unstable_wrap(() => {
-            throw Error('Expected error wrap');
-          });
-        });
-
-        expect(onWorkStarted).toHaveBeenCalledTimes(1);
-        expect(onWorkStopped).toHaveBeenCalledTimes(1);
-
-        expect(wrapped).toThrow('Expected error wrap');
-
-        expect(onWorkStarted).toHaveBeenCalledTimes(2);
-        expect(onWorkStopped).toHaveBeenCalledTimes(2);
-        expect(onWorkStopped).toHaveBeenLastNotifiedOfWork([interaction]);
-
-        done();
-      });
-
-      it('should cover onWorkCanceled within wrap', () => {
-        let interaction, wrapped;
-        SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-          interaction = Array.from(SchedulerTracing.unstable_getCurrent())[0];
-          wrapped = SchedulerTracing.unstable_wrap(jest.fn());
-        });
-        expect(interaction.__count).toBe(1);
-
-        throwInOnWorkCanceled = true;
-        expect(wrapped.cancel).toThrow('Expected error onWorkCanceled');
-
-        expect(onWorkCanceled).toHaveBeenCalledTimes(1);
-
-        // It should update the interaction count so as not to interfere with subsequent calls
-        expect(interaction.__count).toBe(0);
-        expect(
-          onInteractionScheduledWorkCompleted,
-        ).toHaveBeenLastNotifiedOfInteraction(firstEvent);
-
-        // It should call other subscribers despite the earlier error
-        expect(secondSubscriber.onWorkCanceled).toHaveBeenCalledTimes(1);
-      });
-    });
-
-    it('calls lifecycle methods for trace', () => {
-      expect(onInteractionTraced).not.toHaveBeenCalled();
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      SchedulerTracing.unstable_trace(
-        firstEvent.name,
-        currentTime,
-        () => {
-          expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-            firstEvent,
-          );
-          expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-          expect(onWorkStarted).toHaveBeenCalledTimes(1);
-          expect(onWorkStarted).toHaveBeenLastNotifiedOfWork(
-            new Set([firstEvent]),
-            threadID,
-          );
-          expect(onWorkStopped).not.toHaveBeenCalled();
-
-          SchedulerTracing.unstable_trace(
-            secondEvent.name,
-            currentTime,
-            () => {
-              expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-              expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-                secondEvent,
-              );
-              expect(
-                onInteractionScheduledWorkCompleted,
-              ).not.toHaveBeenCalled();
-              expect(onWorkStarted).toHaveBeenCalledTimes(2);
-              expect(onWorkStarted).toHaveBeenLastNotifiedOfWork(
-                new Set([firstEvent, secondEvent]),
-                threadID,
-              );
-              expect(onWorkStopped).not.toHaveBeenCalled();
-            },
-            threadID,
-          );
-
-          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-          expect(
-            onInteractionScheduledWorkCompleted,
-          ).toHaveBeenLastNotifiedOfInteraction(secondEvent);
-          expect(onWorkStopped).toHaveBeenCalledTimes(1);
-          expect(onWorkStopped).toHaveBeenLastNotifiedOfWork(
-            new Set([firstEvent, secondEvent]),
-            threadID,
-          );
-        },
-        threadID,
-      );
-
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-      expect(
-        onInteractionScheduledWorkCompleted,
-      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);
-      expect(onWorkScheduled).not.toHaveBeenCalled();
-      expect(onWorkCanceled).not.toHaveBeenCalled();
-      expect(onWorkStarted).toHaveBeenCalledTimes(2);
-      expect(onWorkStopped).toHaveBeenCalledTimes(2);
-      expect(onWorkStopped).toHaveBeenLastNotifiedOfWork(
-        new Set([firstEvent]),
-        threadID,
-      );
-    });
-
-    it('calls lifecycle methods for wrap', () => {
-      const unwrapped = jest.fn();
-      let wrapped;
-
-      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-        expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-        expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-          firstEvent,
-        );
-
-        SchedulerTracing.unstable_trace(secondEvent.name, currentTime, () => {
-          expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-          expect(onInteractionTraced).toHaveBeenLastNotifiedOfInteraction(
-            secondEvent,
-          );
-
-          wrapped = SchedulerTracing.unstable_wrap(unwrapped, threadID);
-          expect(onWorkScheduled).toHaveBeenCalledTimes(1);
-          expect(onWorkScheduled).toHaveBeenLastNotifiedOfWork(
-            new Set([firstEvent, secondEvent]),
-            threadID,
-          );
-        });
-      });
-
-      expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      wrapped();
-      expect(unwrapped).toHaveBeenCalled();
-
-      expect(onWorkScheduled).toHaveBeenCalledTimes(1);
-      expect(onWorkCanceled).not.toHaveBeenCalled();
-      expect(onWorkStarted).toHaveBeenCalledTimes(3);
-      expect(onWorkStarted).toHaveBeenLastNotifiedOfWork(
-        new Set([firstEvent, secondEvent]),
-        threadID,
-      );
-      expect(onWorkStopped).toHaveBeenCalledTimes(3);
-      expect(onWorkStopped).toHaveBeenLastNotifiedOfWork(
-        new Set([firstEvent, secondEvent]),
-        threadID,
-      );
-
-      expect(
-        onInteractionScheduledWorkCompleted.mock.calls[0][0],
-      ).toMatchInteraction(firstEvent);
-      expect(
-        onInteractionScheduledWorkCompleted.mock.calls[1][0],
-      ).toMatchInteraction(secondEvent);
-    });
-
-    it('should call the correct interaction subscriber methods when a wrapped callback is canceled', () => {
-      const fnOne = jest.fn();
-      const fnTwo = jest.fn();
-      let wrappedOne, wrappedTwo;
-      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-        wrappedOne = SchedulerTracing.unstable_wrap(fnOne, threadID);
-        SchedulerTracing.unstable_trace(secondEvent.name, currentTime, () => {
-          wrappedTwo = SchedulerTracing.unstable_wrap(fnTwo, threadID);
-        });
-      });
-
-      expect(onInteractionTraced).toHaveBeenCalledTimes(2);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-      expect(onWorkCanceled).not.toHaveBeenCalled();
-      expect(onWorkStarted).toHaveBeenCalledTimes(2);
-      expect(onWorkStopped).toHaveBeenCalledTimes(2);
-
-      wrappedTwo.cancel();
-
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-      expect(
-        onInteractionScheduledWorkCompleted,
-      ).toHaveBeenLastNotifiedOfInteraction(secondEvent);
-      expect(onWorkCanceled).toHaveBeenCalledTimes(1);
-      expect(onWorkCanceled).toHaveBeenLastNotifiedOfWork(
-        new Set([firstEvent, secondEvent]),
-        threadID,
-      );
-
-      wrappedOne.cancel();
-
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(2);
-      expect(
-        onInteractionScheduledWorkCompleted,
-      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);
-      expect(onWorkCanceled).toHaveBeenCalledTimes(2);
-      expect(onWorkCanceled).toHaveBeenLastNotifiedOfWork(
-        new Set([firstEvent]),
-        threadID,
-      );
-
-      expect(fnOne).not.toHaveBeenCalled();
-      expect(fnTwo).not.toHaveBeenCalled();
-    });
-
-    it('should not end an interaction twice if wrap is used to schedule follow up work within another wrap', () => {
-      const fnOne = jest.fn(() => {
-        wrappedTwo = SchedulerTracing.unstable_wrap(fnTwo, threadID);
-      });
-      const fnTwo = jest.fn();
-      let wrappedOne, wrappedTwo;
-      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-        wrappedOne = SchedulerTracing.unstable_wrap(fnOne, threadID);
-      });
-
-      expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      wrappedOne();
-
-      expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      wrappedTwo();
-
-      expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-      expect(
-        onInteractionScheduledWorkCompleted,
-      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);
-    });
-
-    it('should not decrement the interaction count twice if a wrapped function is run twice', () => {
-      const unwrappedOne = jest.fn();
-      const unwrappedTwo = jest.fn();
-      let wrappedOne, wrappedTwo;
-      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {
-        wrappedOne = SchedulerTracing.unstable_wrap(unwrappedOne, threadID);
-        wrappedTwo = SchedulerTracing.unstable_wrap(unwrappedTwo, threadID);
-      });
-
-      expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      wrappedOne();
-
-      expect(unwrappedOne).toHaveBeenCalledTimes(1);
-      expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      wrappedOne();
-
-      expect(unwrappedOne).toHaveBeenCalledTimes(2);
-      expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
-
-      wrappedTwo();
-
-      expect(onInteractionTraced).toHaveBeenCalledTimes(1);
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-      expect(
-        onInteractionScheduledWorkCompleted,
-      ).toHaveBeenLastNotifiedOfInteraction(firstEvent);
-    });
-
-    it('should unsubscribe', () => {
-      SchedulerTracing.unstable_unsubscribe(firstSubscriber);
-      SchedulerTracing.unstable_trace(firstEvent.name, currentTime, () => {});
-
-      expect(onInteractionTraced).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('disabled', () => {
-    beforeEach(() => loadModules({enableSchedulerTracing: false}));
-
-    // TODO
-  });
-});
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index c8c2375babc9..757d9ab28b78 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -51,9 +51,6 @@ export const enableProfilerNestedUpdatePhase = false;
 // This callback accepts the component type (class instance or function) the update is scheduled for.
 export const enableProfilerNestedUpdateScheduledHook = false;
 
-// Trace which interactions trigger each commit.
-export const enableSchedulerTracing = __PROFILE__;
-
 // Track which Fiber(s) schedule render work.
 export const enableUpdaterTracking = __PROFILE__;
 
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 19c89f77f9f1..03b70aae07e6 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -155,8 +155,6 @@ export type MutableSource<Source: $NonMaybeType<mixed>> = {|
 // This doesn't require a value to be passed to either handler.
 export interface Wakeable {
   then(onFulfill: () => mixed, onReject: () => mixed): void | Wakeable;
-  // Special flag to opt out of tracing interactions across a Suspense boundary.
-  __reactDoNotTraceInteractions?: boolean;
 }
 
 // The subset of a Promise that React APIs rely on. This resolves a value.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index e712288cf11c..ea9224d5a944 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -17,7 +17,6 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableSchedulerTracing = __PROFILE__;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 18375388be0a..251bb310c1fb 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -19,7 +19,6 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableSchedulerTracing = __PROFILE__;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index d7605e5ebb44..aeee968922f1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -19,7 +19,6 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableSchedulerTracing = __PROFILE__;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e3e4ea0f58a4..88f2287cd81b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -19,7 +19,6 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableSchedulerTracing = __PROFILE__;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 4d762c08277c..5d43505fa127 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -19,7 +19,6 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableSchedulerTracing = __PROFILE__;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index bd4137d3e7cb..0edbfad4ab17 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -19,7 +19,6 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableSchedulerTracing = __PROFILE__;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index dacb018e3bea..98dbae4505e0 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -19,7 +19,6 @@ export const enableProfilerTimer = false;
 export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableSchedulerTracing = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 871d4cc48ff8..afae32b4082f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -55,7 +55,6 @@ export const enableSchedulingProfiler =
 // Note: we'll want to remove this when we to userland implementation.
 // For now, we'll turn it on for everyone because it's *already* on for everyone in practice.
 // At least this will let us stop shipping <Profiler> implementation to all users.
-export const enableSchedulerTracing = true;
 export const enableSchedulerDebugging = true;
 
 export const warnAboutDeprecatedLifecycles = true;
diff --git a/packages/shared/forks/SchedulerTracing.umd.js b/packages/shared/forks/SchedulerTracing.umd.js
deleted file mode 100644
index 2fb835e95b89..000000000000
--- a/packages/shared/forks/SchedulerTracing.umd.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-
-const ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-const {
-  __interactionsRef,
-  __subscriberRef,
-  unstable_clear,
-  unstable_getCurrent,
-  unstable_getThreadID,
-  unstable_subscribe,
-  unstable_trace,
-  unstable_unsubscribe,
-  unstable_wrap,
-} = ReactInternals.SchedulerTracing;
-
-export {
-  __interactionsRef,
-  __subscriberRef,
-  unstable_clear,
-  unstable_getCurrent,
-  unstable_getThreadID,
-  unstable_subscribe,
-  unstable_trace,
-  unstable_unsubscribe,
-  unstable_wrap,
-};
diff --git a/scripts/jest/matchers/interactionTracingMatchers.js b/scripts/jest/matchers/interactionTracingMatchers.js
deleted file mode 100644
index 8281d7d862eb..000000000000
--- a/scripts/jest/matchers/interactionTracingMatchers.js
+++ /dev/null
@@ -1,101 +0,0 @@
-'use strict';
-
-const jestDiff = require('jest-diff').default;
-
-function toContainNoInteractions(actualSet) {
-  return {
-    message: () =>
-      this.isNot
-        ? `Expected interactions but there were none.`
-        : `Expected no interactions but there were ${actualSet.size}.`,
-    pass: actualSet.size === 0,
-  };
-}
-
-function toHaveBeenLastNotifiedOfInteraction(
-  mockFunction,
-  expectedInteraction
-) {
-  const calls = mockFunction.mock.calls;
-  if (calls.length === 0) {
-    return {
-      message: () => 'Mock function was not called',
-      pass: false,
-    };
-  }
-
-  const [actualInteraction] = calls[calls.length - 1];
-
-  return toMatchInteraction(actualInteraction, expectedInteraction);
-}
-
-function toHaveBeenLastNotifiedOfWork(
-  mockFunction,
-  expectedInteractions,
-  expectedThreadID = undefined
-) {
-  const calls = mockFunction.mock.calls;
-  if (calls.length === 0) {
-    return {
-      message: () => 'Mock function was not called',
-      pass: false,
-    };
-  }
-
-  const [actualInteractions, actualThreadID] = calls[calls.length - 1];
-
-  if (expectedThreadID !== undefined) {
-    if (expectedThreadID !== actualThreadID) {
-      return {
-        message: () => jestDiff(expectedThreadID + '', actualThreadID + ''),
-        pass: false,
-      };
-    }
-  }
-
-  return toMatchInteractions(actualInteractions, expectedInteractions);
-}
-
-function toMatchInteraction(actual, expected) {
-  let attribute;
-  for (attribute in expected) {
-    if (actual[attribute] !== expected[attribute]) {
-      return {
-        message: () => jestDiff(expected, actual),
-        pass: false,
-      };
-    }
-  }
-
-  return {pass: true};
-}
-
-function toMatchInteractions(actualSetOrArray, expectedSetOrArray) {
-  const actualArray = Array.from(actualSetOrArray);
-  const expectedArray = Array.from(expectedSetOrArray);
-
-  if (actualArray.length !== expectedArray.length) {
-    return {
-      message: () =>
-        `Expected ${expectedArray.length} interactions but there were ${actualArray.length}`,
-      pass: false,
-    };
-  }
-
-  for (let i = 0; i < actualArray.length; i++) {
-    const result = toMatchInteraction(actualArray[i], expectedArray[i]);
-    if (result.pass === false) {
-      return result;
-    }
-  }
-
-  return {pass: true};
-}
-
-module.exports = {
-  toContainNoInteractions,
-  toHaveBeenLastNotifiedOfInteraction,
-  toHaveBeenLastNotifiedOfWork,
-  toMatchInteraction,
-  toMatchInteractions,
-};
diff --git a/scripts/jest/matchers/profilerMatchers.js b/scripts/jest/matchers/profilerMatchers.js
index bc851ffd9e9e..e69de29bb2d1 100644
--- a/scripts/jest/matchers/profilerMatchers.js
+++ b/scripts/jest/matchers/profilerMatchers.js
@@ -1,72 +0,0 @@
-'use strict';
-
-const jestDiff = require('jest-diff').default;
-
-function toHaveLastRenderedWithNoInteractions(onRenderMockFn) {
-  const calls = onRenderMockFn.mock.calls;
-  if (calls.length === 0) {
-    return {
-      message: () => 'Mock onRender function was not called',
-      pass: false,
-    };
-  }
-}
-
-function toHaveLastRenderedWithInteractions(
-  onRenderMockFn,
-  expectedInteractions
-) {
-  const calls = onRenderMockFn.mock.calls;
-  if (calls.length === 0) {
-    return {
-      message: () => 'Mock onRender function was not called',
-      pass: false,
-    };
-  }
-
-  const lastCall = calls[calls.length - 1];
-  const actualInteractions = lastCall[6];
-
-  return toMatchInteractions(actualInteractions, expectedInteractions);
-}
-
-function toMatchInteraction(actual, expected) {
-  let attribute;
-  for (attribute in expected) {
-    if (actual[attribute] !== expected[attribute]) {
-      return {
-        message: () => jestDiff(expected, actual),
-        pass: false,
-      };
-    }
-  }
-
-  return {pass: true};
-}
-
-function toMatchInteractions(actualSetOrArray, expectedSetOrArray) {
-  const actualArray = Array.from(actualSetOrArray);
-  const expectedArray = Array.from(expectedSetOrArray);
-
-  if (actualArray.length !== expectedArray.length) {
-    return {
-      message: () =>
-        `Expected ${expectedArray.length} interactions but there were ${actualArray.length}`,
-      pass: false,
-    };
-  }
-
-  for (let i = 0; i < actualArray.length; i++) {
-    const result = toMatchInteraction(actualArray[i], expectedArray[i]);
-    if (result.pass === false) {
-      return result;
-    }
-  }
-
-  return {pass: true};
-}
-
-module.exports = {
-  toHaveLastRenderedWithInteractions,
-  toHaveLastRenderedWithNoInteractions,
-};
diff --git a/scripts/jest/setupTests.js b/scripts/jest/setupTests.js
index 34f5633ea372..abb358f817aa 100644
--- a/scripts/jest/setupTests.js
+++ b/scripts/jest/setupTests.js
@@ -45,8 +45,6 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
   }
 
   expect.extend({
-    ...require('./matchers/interactionTracingMatchers'),
-    ...require('./matchers/profilerMatchers'),
     ...require('./matchers/toWarnDev'),
     ...require('./matchers/reactTestMatchers'),
   });
diff --git a/scripts/jest/spec-equivalence-reporter/setupTests.js b/scripts/jest/spec-equivalence-reporter/setupTests.js
index 997abd76fb05..31814bb754d9 100644
--- a/scripts/jest/spec-equivalence-reporter/setupTests.js
+++ b/scripts/jest/spec-equivalence-reporter/setupTests.js
@@ -46,8 +46,6 @@ global.spyOnProd = function(...args) {
 };
 
 expect.extend({
-  ...require('../matchers/interactionTracingMatchers'),
-  ...require('../matchers/profilerMatchers'),
   ...require('../matchers/toWarnDev'),
   ...require('../matchers/reactTestMatchers'),
 });
diff --git a/scripts/release/shared-commands/test-tracing-fixture.js b/scripts/release/shared-commands/test-tracing-fixture.js
deleted file mode 100644
index 781e4001472e..000000000000
--- a/scripts/release/shared-commands/test-tracing-fixture.js
+++ /dev/null
@@ -1,58 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-const {join} = require('path');
-const puppeteer = require('puppeteer');
-const theme = require('../theme');
-const {logPromise} = require('../utils');
-
-const validate = async ({cwd}) => {
-  const browser = await puppeteer.launch();
-  const page = await browser.newPage();
-
-  await page.goto(
-    'file://' + join(cwd, 'fixtures/tracing/index.html?puppeteer=true')
-  );
-
-  try {
-    return await page.evaluate(() => {
-      const button = document.getElementById('run-test-button');
-      button.click();
-
-      const items = document.querySelectorAll('[data-value]');
-
-      if (items.length === 0) {
-        return 'No results were found.';
-      }
-
-      for (let i = 0; i < items.length; i++) {
-        const item = items[i];
-        if (item.getAttribute('data-value') !== 'All checks pass') {
-          return `Unexpected result, "${item.getAttribute('data-value')}"`;
-        }
-      }
-
-      return null;
-    });
-  } finally {
-    await browser.close();
-  }
-};
-
-const run = async ({cwd}) => {
-  const errorMessage = await logPromise(
-    validate({cwd}),
-    'Verifying "scheduler/tracing" fixture'
-  );
-  if (errorMessage) {
-    console.error(
-      theme.error('✗'),
-      'Verifying "scheduler/tracing" fixture\n ',
-      theme.error(errorMessage)
-    );
-    process.exit(1);
-  }
-};
-
-module.exports = run;
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 2890c5518104..b34c0077873a 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -805,24 +805,6 @@ const bundles = [
     global: 'ReactFreshRuntime',
     externals: [],
   },
-
-  {
-    bundleTypes: [
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-      FB_WWW_PROFILING,
-      NODE_DEV,
-      NODE_PROD,
-      NODE_PROFILING,
-      RN_FB_DEV,
-      RN_FB_PROD,
-      RN_FB_PROFILING,
-    ],
-    moduleType: ISOMORPHIC,
-    entry: 'scheduler/tracing',
-    global: 'SchedulerTracing',
-    externals: [],
-  },
 ];
 
 // Based on deep-freeze by substack (public domain)
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 2c64c6219e35..84211da5c512 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -171,25 +171,6 @@ const forks = Object.freeze({
     }
   },
 
-  'scheduler/tracing': (bundleType, entry, dependencies) => {
-    switch (bundleType) {
-      case UMD_DEV:
-      case UMD_PROD:
-      case UMD_PROFILING:
-        if (dependencies.indexOf('react') === -1) {
-          // It's only safe to use this fork for modules that depend on React,
-          // because they read the re-exported API from the SECRET_INTERNALS object.
-          return null;
-        }
-        // Optimization: for UMDs, use the API that is already a part of the React
-        // package instead of requiring it to be loaded via a separate <script> tag
-        return 'shared/forks/SchedulerTracing.umd.js';
-      default:
-        // For other bundles, use the shared NPM package.
-        return null;
-    }
-  },
-
   'scheduler/src/SchedulerFeatureFlags': (bundleType, entry, dependencies) => {
     if (
       bundleType === FB_WWW_DEV ||
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
index 1585e307aa7b..b56f4231e2ef 100644
--- a/scripts/rollup/modules.js
+++ b/scripts/rollup/modules.js
@@ -15,7 +15,6 @@ const importSideEffects = Object.freeze({
   '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,
-  'scheduler/tracing': 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,
@@ -31,7 +30,6 @@ const knownGlobals = Object.freeze({
   'react-dom/server': 'ReactDOMServer',
   'react-interactions/events/tap': 'ReactEventsTap',
   scheduler: 'Scheduler',
-  'scheduler/tracing': 'SchedulerTracing',
   'scheduler/unstable_mock': 'SchedulerMock',
 });
 
diff --git a/yarn.lock b/yarn.lock
index 9daccaf78bb3..8c6accd82945 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12319,6 +12319,14 @@ saxes@^5.0.0:
   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.11.0:
   version "0.11.3"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b"

From a2ae42db90d626eda8f84f127068bd1f95fb5a6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 26 Apr 2021 21:46:36 -0400
Subject: [PATCH 0480/1603] Escape style values (#21356)

---
 packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index bc9e21c24920..72e984f12824 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -321,7 +321,9 @@ function pushStyle(
           valueChunk = stringToChunk('' + styleValue);
         }
       } else {
-        valueChunk = stringToChunk(('' + styleValue).trim());
+        valueChunk = stringToChunk(
+          escapeTextForBrowser(('' + styleValue).trim()),
+        );
       }
     }
     if (isFirst) {

From bd4f056a3ef13ccf3eab4a154b5036a44e0d239d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 26 Apr 2021 21:46:46 -0400
Subject: [PATCH 0481/1603] [Fizz] Implement lazy components and nodes (#21355)

* Implement lazy components

* Implement lazy elements / nodes

This is used by Flight to encode not yet resolved nodes of any kind.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 224 ++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  |  22 +-
 2 files changed, 242 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index a42056ab2492..c2074d80418d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -207,6 +207,230 @@ describe('ReactDOMFizzServer', () => {
     return readText(text);
   }
 
+  // @gate experimental
+  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;
+      });
+    });
+
+    function TextWithPunctuation({text, punctuation}) {
+      return <Text text={text + punctuation} />;
+    }
+    // This tests that default props of the inner element is resolved.
+    TextWithPunctuation.defaultProps = {
+      punctuation: '!',
+    };
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <div>
+          <div>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <LazyA text="Hello" />
+            </Suspense>
+          </div>
+          <div>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <LazyB text="world" />
+            </Suspense>
+          </div>
+        </div>,
+        writable,
+      );
+      startWriting();
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Loading...</div>
+        <div>Loading...</div>
+      </div>,
+    );
+    await act(async () => {
+      resolveA({default: Text});
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Hello</div>
+        <div>Loading...</div>
+      </div>,
+    );
+    await act(async () => {
+      resolveB({default: TextWithPunctuation});
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <div>Hello</div>
+        <div>world!</div>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  it('should client render a boundary if a lazy component rejects', async () => {
+    let rejectComponent;
+    const LazyComponent = React.lazy(() => {
+      return new Promise((resolve, reject) => {
+        rejectComponent = reject;
+      });
+    });
+
+    const loggedErrors = [];
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {isClient ? <Text text="Hello" /> : <LazyComponent text="Hello" />}
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App isClient={false} />,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      startWriting();
+    });
+    expect(loggedErrors).toEqual([]);
+
+    // Attempt to hydrate the content.
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App isClient={true} />);
+    Scheduler.unstable_flushAll();
+
+    // 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([]);
+
+    const theError = new Error('Test');
+    await act(async () => {
+      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.
+    Scheduler.unstable_flushAll();
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
+  // @gate experimental
+  it('should asynchronously load a lazy element', async () => {
+    let resolveElement;
+    const lazyElement = React.lazy(() => {
+      return new Promise(r => {
+        resolveElement = r;
+      });
+    });
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {lazyElement}
+          </Suspense>
+        </div>,
+        writable,
+      );
+      startWriting();
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+    await act(async () => {
+      resolveElement({default: <Text text="Hello" />});
+    });
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
+
+  // @gate experimental
+  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 loggedErrors = [];
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Suspense fallback={<Text text="Loading..." />}>
+            {isClient ? element : lazyElement}
+          </Suspense>
+        </div>
+      );
+    }
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App isClient={false} />,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      startWriting();
+    });
+    expect(loggedErrors).toEqual([]);
+
+    // Attempt to hydrate the content.
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App isClient={true} />);
+    Scheduler.unstable_flushAll();
+
+    // 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([]);
+
+    const theError = new Error('Test');
+    await act(async () => {
+      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.
+    Scheduler.unstable_flushAll();
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
   // @gate experimental
   it('should asynchronously load the suspense boundary', async () => {
     await act(async () => {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index d51ad44ed64e..f272c18b462d 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -102,6 +102,7 @@ import {
   disableModulePatternComponents,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
+  enableLazyElements,
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -861,10 +862,15 @@ function renderContextProvider(
 function renderLazyComponent(
   request: Request,
   task: Task,
-  type: LazyComponentType<any, any>,
+  lazyComponent: LazyComponentType<any, any>,
   props: Object,
+  ref: any,
 ): void {
-  throw new Error('Not yet implemented element type.');
+  const payload = lazyComponent._payload;
+  const init = lazyComponent._init;
+  const Component = init(payload);
+  const resolvedProps = resolveDefaultProps(Component, props);
+  return renderElement(request, task, Component, resolvedProps, ref);
 }
 
 function renderElement(
@@ -1018,8 +1024,16 @@ function renderNodeDestructive(
             'Render them conditionally so that they only appear on the client render.',
         );
       // eslint-disable-next-line-no-fallthrough
-      case REACT_LAZY_TYPE:
-        throw new Error('Not yet implemented node type.');
+      case REACT_LAZY_TYPE: {
+        if (enableLazyElements) {
+          const lazyNode: LazyComponentType<any, any> = (node: any);
+          const payload = lazyNode._payload;
+          const init = lazyNode._init;
+          const resolvedNode = init(payload);
+          renderNodeDestructive(request, task, resolvedNode);
+          return;
+        }
+      }
     }
 
     if (isArray(node)) {

From 4a8deb08367d93d51912871b6d0e62852d0e981a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 26 Apr 2021 22:37:05 -0400
Subject: [PATCH 0482/1603] Switch the isPrimaryRender flag based on the stream
 config (#21357)

---
 packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 3 ++-
 packages/react-server/src/ReactServerStreamConfigBrowser.js | 2 ++
 packages/react-server/src/ReactServerStreamConfigNode.js    | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 72e984f12824..3e77b7ce35a8 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -23,6 +23,7 @@ import {
   writeChunk,
   stringToChunk,
   stringToPrecomputedChunk,
+  isPrimaryStreamConfig,
 } from 'react-server/src/ReactServerStreamConfig';
 
 import {
@@ -50,7 +51,7 @@ import isArray from 'shared/isArray';
 
 // 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 isPrimaryRenderer = isPrimaryStreamConfig;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index 3714be430276..b669002aff77 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -12,6 +12,8 @@ export type Destination = ReadableStreamController;
 export type PrecomputedChunk = Uint8Array;
 export type Chunk = Uint8Array;
 
+export const isPrimaryStreamConfig = true;
+
 export function scheduleWork(callback: () => void) {
   callback();
 }
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index 4329554b7f05..c44d5b8ee656 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -21,6 +21,8 @@ export type Destination = Writable & MightBeFlushable;
 export type PrecomputedChunk = Uint8Array;
 export type Chunk = string;
 
+export const isPrimaryStreamConfig = true;
+
 export function scheduleWork(callback: () => void) {
   setImmediate(callback);
 }

From 9a2591681e8da73da35c1116c0087d9c309afa2a Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sema@fb.com>
Date: Tue, 27 Apr 2021 09:44:17 -0400
Subject: [PATCH 0483/1603] Fix export

---
 .../react-server-dom-relay/src/ReactServerStreamConfigFB.js     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
index e0477fd6197e..b13e5f379260 100644
--- a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
+++ b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
@@ -17,6 +17,8 @@ export type Destination = {
 export type PrecomputedChunk = string;
 export type Chunk = string;
 
+export const isPrimaryStreamConfig = true;
+
 export function scheduleWork(callback: () => void) {
   // We don't schedule work in this model, and instead expect performWork to always be called repeatedly.
 }

From 4edbcdc3274aa4cd4969d9c5ffe379b5dd3c18b5 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 27 Apr 2021 18:03:25 +0200
Subject: [PATCH 0484/1603] Update supported devEngines (#21364)

---
 .codesandbox/ci.json | 1 +
 package.json         | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 8fdab3e563d6..97114903039b 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,6 +1,7 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
   "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/unstable_no_dom,react/jsx-runtime,react/jsx-dev-runtime",
+  "node": "12",
   "publishDirectory": {
     "react": "build/node_modules/react",
     "react-dom": "build/node_modules/react-dom",
diff --git a/package.json b/package.json
index aecd84fd7120..74be41ec3c15 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "yargs": "^15.3.1"
   },
   "devEngines": {
-    "node": "8.x || 9.x || 10.x || 11.x || 12.x || 13.x || 14.x || 15.x"
+    "node": "^12.17.0 || 13.x || 14.x || 15.x || 16.x"
   },
   "jest": {
     "testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"

From 29faeb2df30347dc260fe4681d4526876c351db1 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 27 Apr 2021 18:37:14 +0200
Subject: [PATCH 0485/1603] Remove unnecessary type cast (#21363)

---
 packages/react-dom/src/client/ReactDOMLegacy.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 7a3608a493a2..589ddfedcda3 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -9,6 +9,7 @@
 
 import type {Container} from './ReactDOMHostConfig';
 import type {RootType} from './ReactDOMRoot';
+import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {
@@ -184,10 +185,8 @@ function legacyRenderSubtreeIntoContainer(
     warnOnInvalidCallback(callback === undefined ? null : callback, 'render');
   }
 
-  // TODO: Without `any` type, Flow says "Property cannot be accessed on any
-  // member of intersection type." Whyyyyyy.
-  let root: RootType = (container._reactRootContainer: any);
-  let fiberRoot;
+  let root = container._reactRootContainer;
+  let fiberRoot: FiberRoot;
   if (!root) {
     // Initial mount
     root = container._reactRootContainer = legacyCreateRootFromDOMContainer(

From 2182563dc400b51fccea034dfcebe2aff9ee979e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 27 Apr 2021 16:18:42 -0400
Subject: [PATCH 0486/1603] Let value override defaultValue if both are
 specified (#21369)

There's a DEV warning for this case but we still test for the production
behavior.
---
 .../src/server/ReactDOMServerFormatConfig.js  | 42 +++++++++++++++----
 1 file changed, 33 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 3e77b7ce35a8..890ee749e34c 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -810,6 +810,11 @@ function pushInput(
 
   target.push(startChunkForTag('input'));
 
+  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];
@@ -827,14 +832,16 @@ function pushInput(
           );
         // eslint-disable-next-line-no-fallthrough
         case 'defaultChecked':
-          // Previously "checked" would win but now it's enumeration order dependent.
-          // There's a warning in either case.
-          pushAttribute(target, responseState, 'checked', propValue);
+          defaultChecked = propValue;
           break;
         case 'defaultValue':
-          // Previously "value" would win but now it's enumeration order dependent.
-          // There's a warning in either case.
-          pushAttribute(target, responseState, 'value', propValue);
+          defaultValue = propValue;
+          break;
+        case 'checked':
+          checked = propValue;
+          break;
+        case 'value':
+          value = propValue;
           break;
         default:
           pushAttribute(target, responseState, propKey, propValue);
@@ -842,6 +849,18 @@ function pushInput(
       }
     }
   }
+
+  if (checked !== null) {
+    pushAttribute(target, responseState, 'checked', checked);
+  } else if (defaultChecked !== null) {
+    pushAttribute(target, responseState, 'checked', defaultChecked);
+  }
+  if (value !== null) {
+    pushAttribute(target, responseState, 'value', value);
+  } else if (defaultValue !== null) {
+    pushAttribute(target, responseState, 'value', defaultValue);
+  }
+
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }
@@ -877,6 +896,7 @@ function pushStartTextArea(
   target.push(startChunkForTag('textarea'));
 
   let value = null;
+  let defaultValue = null;
   let children = null;
   for (const propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
@@ -889,11 +909,11 @@ function pushStartTextArea(
           children = propValue;
           break;
         case 'value':
-        case 'defaultValue':
-          // Previously "checked" would win but now it's enumeration order dependent.
-          // There's a warning in either case.
           value = propValue;
           break;
+        case 'defaultValue':
+          defaultValue = propValue;
+          break;
         case 'dangerouslySetInnerHTML':
           invariant(
             false,
@@ -906,6 +926,10 @@ function pushStartTextArea(
       }
     }
   }
+  if (value === null && defaultValue !== null) {
+    value = defaultValue;
+  }
+
   if (assignID !== null) {
     pushID(target, responseState, assignID, props.id);
   }

From 22ab39be681251f1c0f257af7e636cb8debf31c4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 27 Apr 2021 16:36:20 -0400
Subject: [PATCH 0487/1603] DevTools console patching should handle Symbols
 without erroring (#21368)

---
 .../src/__tests__/console-test.js                    | 12 ++++++++++++
 .../react-devtools-shared/src/backend/console.js     |  2 +-
 .../src/app/InlineWarnings/index.js                  |  7 +++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index e7588dc12986..64597597baef 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -453,4 +453,16 @@ describe('console', () => {
       '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
   });
+
+  it('should correctly log Symbols', () => {
+    const Component = ({children}) => {
+      fakeConsole.warn('Symbol:', Symbol(''));
+      return null;
+    };
+
+    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index ee06d2173eab..a4185193c434 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -144,7 +144,7 @@ export function patch({
         if (consoleSettingsRef.appendComponentStack) {
           const lastArg = args.length > 0 ? args[args.length - 1] : null;
           const alreadyHasComponentStack =
-            lastArg !== null && isStringComponentStack(lastArg);
+            typeof lastArg === 'string' && isStringComponentStack(lastArg);
 
           // If we are ever called with a string that already has a component stack,
           // e.g. a React error/warning, don't append a second stack.
diff --git a/packages/react-devtools-shell/src/app/InlineWarnings/index.js b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
index 9aa681b29381..964323a28a04 100644
--- a/packages/react-devtools-shell/src/app/InlineWarnings/index.js
+++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
@@ -149,6 +149,12 @@ 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() {
   const [count, setCount] = useState(0);
   const handleClick = () => setCount(count + 1);
@@ -176,6 +182,7 @@ export default function ErrorsAndWarnings() {
       <ReallyLongErrorMessageThatWillCauseTextToBeTruncated />
       <DuplicateWarningsAndErrors />
       <MultipleWarningsAndErrors />
+      <ComponentWithSymbolWarning />
     </Fragment>
   );
 }

From 8e2bb3e89c8c3c8b64b3aa94e0bb524775ef4522 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 27 Apr 2021 17:26:07 -0400
Subject: [PATCH 0488/1603] DevTools: Add Bridge protocol version
 backend/frontend (#21331)

Add an explicit Bridge protocol version to the frontend and backend components as well as a check during initialization to ensure that both are compatible. If not, the frontend will display either upgrade or downgrade instructions.

Note that only the `react-devtools-core` (React Native) and `react-devtools-inline` (Code Sandbox) packages implement this check. Browser extensions inject their own backend and so the check is unnecessary. (Arguably the `react-devtools-inline` check is also unlikely to be necessary _but_ has been added as an extra guard for use cases such as Replay.io.)
---
 .../react-devtools-core/src/standalone.js     |   5 +-
 .../react-devtools-inline/src/frontend.js     |   5 +-
 .../src/backend/agent.js                      |   6 +
 packages/react-devtools-shared/src/bridge.js  |  45 ++++++
 .../src/devtools/store.js                     |  66 ++++++++-
 .../src/devtools/views/DevTools.js            |   2 +
 .../views/Settings/SettingsContext.js         |   7 +
 .../views/UnsupportedBridgeProtocolDialog.css |  37 +++++
 .../views/UnsupportedBridgeProtocolDialog.js  | 132 ++++++++++++++++++
 .../src/devtools/views/root.css               |   6 +
 packages/react-devtools/app.js                |   6 +
 11 files changed, 314 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index e31b43d724d1..9f18ef5b1f5d 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -217,7 +217,10 @@ function initialize(socket: WebSocket) {
     socket.close();
   });
 
-  store = new Store(bridge, {supportsNativeInspection: false});
+  store = new Store(bridge, {
+    checkBridgeProtocolCompatibility: true,
+    supportsNativeInspection: false,
+  });
 
   log('Connected');
   reload();
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index a4c7f61f223f..af4b0330d75f 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -21,7 +21,10 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 export function createStore(bridge: FrontendBridge): Store {
-  return new Store(bridge, {supportsTraceUpdates: true});
+  return new Store(bridge, {
+    checkBridgeProtocolCompatibility: true,
+    supportsTraceUpdates: true,
+  });
 }
 
 export function createBridge(
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 86c35ae1b49b..e665235271ca 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -26,6 +26,7 @@ import {
   toggleEnabled as setTraceUpdatesEnabled,
 } from './views/TraceUpdates';
 import {patch as patchConsole, unpatch as unpatchConsole} from './console';
+import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 import type {
@@ -176,6 +177,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
     bridge.addListener('copyElementPath', this.copyElementPath);
     bridge.addListener('deletePath', this.deletePath);
+    bridge.addListener('getBridgeProtocol', this.getBridgeProtocol);
     bridge.addListener('getProfilingData', this.getProfilingData);
     bridge.addListener('getProfilingStatus', this.getProfilingStatus);
     bridge.addListener('getOwnersList', this.getOwnersList);
@@ -308,6 +310,10 @@ export default class Agent extends EventEmitter<{|
     return null;
   }
 
+  getBridgeProtocol = () => {
+    this._bridge.send('bridgeProtocol', currentBridgeProtocol);
+  };
+
   getProfilingData = ({rendererID}: {|rendererID: RendererID|}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index d3b669bd4287..9acd7607e469 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -20,6 +20,49 @@ import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-share
 
 const BATCH_DURATION = 100;
 
+// 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 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',
+  },
+  {
+    version: 1,
+    minNpmVersion: '4.13.0',
+    maxNpmVersion: null,
+  },
+];
+
+export const currentBridgeProtocol: BridgeProtocol =
+  BRIDGE_PROTOCOL[BRIDGE_PROTOCOL.length - 1];
+
 type ElementAndRendererID = {|id: number, rendererID: RendererID|};
 
 type Message = {|
@@ -119,6 +162,7 @@ type UpdateConsolePatchSettingsParams = {|
 |};
 
 export type BackendEvents = {|
+  bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
@@ -150,6 +194,7 @@ type FrontendEvents = {|
   clearWarningsForFiberID: [ElementAndRendererID],
   copyElementPath: [CopyElementPathParams],
   deletePath: [DeletePath],
+  getBridgeProtocol: [],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{|rendererID: RendererID|}],
   getProfilingStatus: [],
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 5fa4bff344da..ff3cf487b9b9 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -29,10 +29,17 @@ 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 type {Element} from './views/Components/types';
 import type {ComponentFilter, ElementType} from '../types';
-import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  FrontendBridge,
+  BridgeProtocol,
+} from 'react-devtools-shared/src/bridge';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -51,6 +58,7 @@ const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
   'React::DevTools::recordChangeDescriptions';
 
 type Config = {|
+  checkBridgeProtocolCompatibility?: boolean,
   isProfiling?: boolean,
   supportsNativeInspection?: boolean,
   supportsReloadAndProfile?: boolean,
@@ -76,6 +84,7 @@ export default class Store extends EventEmitter<{|
   supportsNativeStyleEditor: [],
   supportsProfiling: [],
   supportsReloadAndProfile: [],
+  unsupportedBridgeProtocolDetected: [],
   unsupportedRendererVersionDetected: [],
 |}> {
   _bridge: FrontendBridge;
@@ -119,6 +128,10 @@ export default class Store extends EventEmitter<{|
 
   _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<number, Set<number>> = new Map();
@@ -147,6 +160,7 @@ export default class Store extends EventEmitter<{|
   _supportsReloadAndProfile: boolean = false;
   _supportsTraceUpdates: boolean = false;
 
+  _unsupportedBridgeProtocol: BridgeProtocol | null = null;
   _unsupportedRendererVersionDetected: boolean = false;
 
   // Total number of visible elements (within all roots).
@@ -217,6 +231,20 @@ export default class Store extends EventEmitter<{|
     );
 
     this._profilerStore = new ProfilerStore(bridge, this, isProfiling);
+
+    // Verify that the frontend version is compatible with the connected backend.
+    // See github.com/facebook/react/issues/21326
+    if (config != null && config.checkBridgeProtocolCompatibility) {
+      // 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,
+      );
+
+      bridge.addListener('bridgeProtocol', this.onBridgeProtocol);
+      bridge.send('getBridgeProtocol');
+    }
   }
 
   // This is only used in tests to avoid memory leaks.
@@ -385,6 +413,10 @@ export default class Store extends EventEmitter<{|
     return this._supportsTraceUpdates;
   }
 
+  get unsupportedBridgeProtocol(): BridgeProtocol | null {
+    return this._unsupportedBridgeProtocol;
+  }
+
   get unsupportedRendererVersionDetected(): boolean {
     return this._unsupportedRendererVersionDetected;
   }
@@ -1168,6 +1200,12 @@ export default class Store extends EventEmitter<{|
       'unsupportedRendererVersion',
       this.onBridgeUnsupportedRendererVersion,
     );
+    bridge.removeListener('bridgeProtocol', this.onBridgeProtocol);
+
+    if (this._onBridgeProtocolTimeoutID !== null) {
+      clearTimeout(this._onBridgeProtocolTimeoutID);
+      this._onBridgeProtocolTimeoutID = null;
+    }
   };
 
   onBackendStorageAPISupported = (isBackendStorageAPISupported: boolean) => {
@@ -1187,4 +1225,30 @@ export default class Store extends EventEmitter<{|
 
     this.emit('unsupportedRendererVersionDetected');
   };
+
+  onBridgeProtocol = (bridgeProtocol: BridgeProtocol) => {
+    if (this._onBridgeProtocolTimeoutID !== null) {
+      clearTimeout(this._onBridgeProtocolTimeoutID);
+      this._onBridgeProtocolTimeoutID = null;
+    }
+
+    if (bridgeProtocol.version !== currentBridgeProtocol.version) {
+      this._unsupportedBridgeProtocol = bridgeProtocol;
+    } else {
+      // If we should happen to get a response after timing out...
+      this._unsupportedBridgeProtocol = null;
+    }
+
+    this.emit('unsupportedBridgeProtocolDetected');
+  };
+
+  onBridgeProtocolTimeout = () => {
+    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._unsupportedBridgeProtocol = BRIDGE_PROTOCOL[0];
+
+    this.emit('unsupportedBridgeProtocolDetected');
+  };
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index cb5c36cf680b..a7ac1c439799 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -25,6 +25,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
+import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
@@ -226,6 +227,7 @@ export default function DevTools({
                 </TreeContextController>
               </ViewElementSourceContext.Provider>
             </SettingsContextController>
+            <UnsupportedBridgeProtocolDialog />
             {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
             {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
           </ModalDialogContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index b6cd278df59d..93d7bfd9d500 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -383,6 +383,13 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
   updateStyleHelper(theme, 'color-link', documentElements);
   updateStyleHelper(theme, 'color-modal-background', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-bridge-version-npm-background',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-bridge-version-npm-text', documentElements);
+  updateStyleHelper(theme, 'color-bridge-version-number', documentElements);
   updateStyleHelper(
     theme,
     'color-primitive-hook-badge-background',
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 000000000000..ae4d73fd7814
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.css
@@ -0,0 +1,37 @@
+.Column { 
+  display: flex;  
+  flex-direction: column; 
+} 
+
+.Title {  
+  font-size: var(--font-size-sans-large); 
+  margin-bottom: 0.5rem;  
+} 
+
+.ReleaseNotesLink { 
+  color: var(--color-button-active);  
+}
+
+.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 000000000000..b5c1e7e8baeb
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * 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 type {BridgeProtocol} from 'react-devtools-shared/src/bridge';
+
+const DEVTOOLS_VERSION = process.env.DEVTOOLS_VERSION;
+const INSTRUCTIONS_FB_URL = 'https://fburl.com/devtools-bridge-protocol';
+
+export default function UnsupportedBridgeProtocolDialog(_: {||}) {
+  const {dispatch, isVisible} = useContext(ModalDialogContext);
+  const store = useContext(StoreContext);
+
+  useEffect(() => {
+    const updateDialog = () => {
+      if (!isVisible) {
+        if (store.unsupportedBridgeProtocol !== null) {
+          dispatch({
+            canBeDismissed: false,
+            type: 'SHOW',
+            content: (
+              <DialogContent
+                unsupportedBridgeProtocol={store.unsupportedBridgeProtocol}
+              />
+            ),
+          });
+        }
+      } else {
+        if (store.unsupportedBridgeProtocol === null) {
+          dispatch({type: 'HIDE'});
+        }
+      }
+    };
+
+    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={() => 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={() => 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/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 6d03a9519a23..8b3db6ee0772 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -69,6 +69,9 @@
   --light-color-expand-collapse-toggle: #777d88;
   --light-color-link: #0000ff;
   --light-color-modal-background: rgba(255, 255, 255, 0.75);
+  --light-color-bridge-version-npm-background: #eff0f1;
+  --light-color-bridge-version-npm-text: #000000;
+  --light-color-bridge-version-number: #0088fa;
   --light-color-primitive-hook-badge-background: #e5e5e5;
   --light-color-primitive-hook-badge-text: #5f6673;
   --light-color-record-active: #fc3a4b;
@@ -158,6 +161,9 @@
   --dark-color-expand-collapse-toggle: #8f949d;
   --dark-color-link: #61dafb;
   --dark-color-modal-background: rgba(0, 0, 0, 0.75);
+  --dark-color-bridge-version-npm-background: rgba(0, 0, 0, 0.25);
+  --dark-color-bridge-version-npm-text: #ffffff;
+  --dark-color-bridge-version-number: yellow;
   --dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
   --dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
   --dark-color-record-active: #fc3a4b;
diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
index 38304b4ffadd..ef3c43470fb0 100644
--- a/packages/react-devtools/app.js
+++ b/packages/react-devtools/app.js
@@ -32,6 +32,12 @@ app.on('ready', function() {
     },
   });
 
+  // https://stackoverflow.com/questions/32402327/
+  mainWindow.webContents.on('new-window', function(event, url) {
+    event.preventDefault();
+    require('electron').shell.openExternal(url);
+  });
+
   // and load the index.html of the app.
   mainWindow.loadURL('file://' + __dirname + '/app.html'); // eslint-disable-line no-path-concat
   mainWindow.webContents.executeJavaScript(

From ecb599cd87b39c23b44c2cc7daad9df42f4c2385 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 27 Apr 2021 20:33:11 -0400
Subject: [PATCH 0489/1603] DevTools supports multiple modal dialogs at once
 (#21370)

---
 .../views/Components/InspectedElement.js      |   1 +
 .../src/devtools/views/ModalDialog.css        |   2 +
 .../src/devtools/views/ModalDialog.js         | 112 +++++++++++-------
 .../Profiler/ProfilingImportExportButtons.js  |   1 +
 .../views/UnsupportedBridgeProtocolDialog.js  |  11 +-
 .../views/UnsupportedVersionDialog.js         |   1 +
 .../views/WarnIfLegacyBackendDetected.js      |   1 +
 7 files changed, 84 insertions(+), 45 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 2c4b0698c77e..e7cda475052e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -120,6 +120,7 @@ export default function InspectedElementWrapper(_: Props) {
     // Instead we can show a warning to the user.
     if (nearestSuspenseElement === null) {
       modalDialogDispatch({
+        id: 'InspectedElement',
         type: 'SHOW',
         content: <CannotSuspendWarningMessage />,
       });
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.css b/packages/react-devtools-shared/src/devtools/views/ModalDialog.css
index 378e8e73b4b3..754b40b96f29 100644
--- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.css
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.css
@@ -3,6 +3,7 @@
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: row;
   align-items: flex-start;
   justify-content: center;
   padding: 1rem;
@@ -13,6 +14,7 @@
 .Dialog {
   position: relative;
   z-index: 3;
+  margin: 0 0.25rem;
   width: 25rem;
   min-width: 20rem;
   max-width: 100%;
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
index 770c106d8c87..5c4acc58cfa4 100644
--- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -21,13 +21,17 @@ 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,
 |};
 
@@ -35,13 +39,17 @@ type Action = DIALOG_ACTION_HIDE | DIALOG_ACTION_SHOW;
 
 type Dispatch = (action: Action) => void;
 
-type State = {|
+type Dialog = {|
   canBeDismissed: boolean,
   content: React$Node | null,
-  isVisible: boolean,
+  id: ID,
   title: React$Node | null,
 |};
 
+type State = {|
+  dialogs: Array<Dialog>,
+|};
+
 type ModalDialogContextType = {|
   ...State,
   dispatch: Dispatch,
@@ -56,17 +64,19 @@ function dialogReducer(state, action) {
   switch (action.type) {
     case 'HIDE':
       return {
-        canBeDismissed: true,
-        content: null,
-        isVisible: false,
-        title: null,
+        dialogs: state.dialogs.filter(dialog => dialog.id !== action.id),
       };
     case 'SHOW':
       return {
-        canBeDismissed: action.canBeDismissed !== false,
-        content: action.content,
-        isVisible: true,
-        title: action.title || null,
+        dialogs: [
+          ...state.dialogs,
+          {
+            canBeDismissed: action.canBeDismissed !== false,
+            content: action.content,
+            id: action.id,
+            title: action.title || null,
+          },
+        ],
       };
     default:
       throw new Error(`Invalid action "${action.type}"`);
@@ -79,18 +89,12 @@ type Props = {|
 
 function ModalDialogContextController({children}: Props) {
   const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
-    canBeDismissed: true,
-    content: null,
-    isVisible: false,
-    title: null,
+    dialogs: [],
   });
 
   const value = useMemo<ModalDialogContextType>(
     () => ({
-      canBeDismissed: state.canBeDismissed,
-      content: state.content,
-      isVisible: state.isVisible,
-      title: state.title,
+      dialogs: state.dialogs,
       dispatch,
     }),
     [state, dispatch],
@@ -104,17 +108,44 @@ function ModalDialogContextController({children}: Props) {
 }
 
 function ModalDialog(_: {||}) {
-  const {isVisible} = useContext(ModalDialogContext);
-  return isVisible ? <ModalDialogImpl /> : null;
-}
+  const {dialogs, dispatch} = useContext(ModalDialogContext);
+
+  if (dialogs.length === 0) {
+    return null;
+  }
 
-function ModalDialogImpl(_: {||}) {
-  const {canBeDismissed, content, dispatch, title} = useContext(
-    ModalDialogContext,
+  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'});
+      dispatch({type: 'HIDE', id});
     }
   }, [canBeDismissed, dispatch]);
   const dialogRef = useRef<HTMLDivElement | null>(null);
@@ -135,24 +166,19 @@ function ModalDialogImpl(_: {||}) {
   };
 
   return (
-    <div className={styles.Background} onClick={dismissModal}>
-      <div
-        ref={dialogRef}
-        className={styles.Dialog}
-        onClick={handleDialogClick}>
-        {title !== null && <div className={styles.Title}>{title}</div>}
-        {content}
-        {canBeDismissed && (
-          <div className={styles.Buttons}>
-            <Button
-              autoFocus={true}
-              className={styles.Button}
-              onClick={dismissModal}>
-              Okay
-            </Button>
-          </div>
-        )}
-      </div>
+    <div 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>
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 7f14438aaa6e..d6570dd5ab34 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -85,6 +85,7 @@ export default function ProfilingImportExportButtons() {
           );
         } catch (error) {
           modalDialogDispatch({
+            id: 'ProfilingImportExportButtons',
             type: 'SHOW',
             title: 'Import failed',
             content: (
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
index b5c1e7e8baeb..ddbde14fad11 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -21,17 +21,21 @@ import type {BridgeProtocol} from 'react-devtools-shared/src/bridge';
 
 const DEVTOOLS_VERSION = process.env.DEVTOOLS_VERSION;
 const INSTRUCTIONS_FB_URL = 'https://fburl.com/devtools-bridge-protocol';
+const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';
 
 export default function UnsupportedBridgeProtocolDialog(_: {||}) {
-  const {dispatch, isVisible} = useContext(ModalDialogContext);
+  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.unsupportedBridgeProtocol !== null) {
           dispatch({
             canBeDismissed: false,
+            id: MODAL_DIALOG_ID,
             type: 'SHOW',
             content: (
               <DialogContent
@@ -42,7 +46,10 @@ export default function UnsupportedBridgeProtocolDialog(_: {||}) {
         }
       } else {
         if (store.unsupportedBridgeProtocol === null) {
-          dispatch({type: 'HIDE'});
+          dispatch({
+            type: 'HIDE',
+            id: MODAL_DIALOG_ID,
+          });
         }
       }
     };
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
index e28398d7f642..31da80c0584e 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
@@ -30,6 +30,7 @@ export default function UnsupportedVersionDialog(_: {||}) {
           setState('show-dialog');
           dispatch({
             canBeDismissed: true,
+            id: 'UnsupportedVersionDialog',
             type: 'SHOW',
             content: <DialogContent />,
           });
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
index 12d88c056220..4bc539d8975c 100644
--- a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -31,6 +31,7 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {
           // 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 />,

From 5196a95fd1266e4c8f86f42c49b14e9fcc19c6a7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 27 Apr 2021 23:49:30 -0400
Subject: [PATCH 0490/1603] Updated DevTools to replace fburl.com link with
 fb.me link

---
 .../src/devtools/views/UnsupportedBridgeProtocolDialog.js      | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
index ddbde14fad11..d48ab40aa3ea 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -20,7 +20,8 @@ import styles from './UnsupportedBridgeProtocolDialog.css';
 import type {BridgeProtocol} from 'react-devtools-shared/src/bridge';
 
 const DEVTOOLS_VERSION = process.env.DEVTOOLS_VERSION;
-const INSTRUCTIONS_FB_URL = 'https://fburl.com/devtools-bridge-protocol';
+const INSTRUCTIONS_FB_URL =
+  'https://fb.me/devtools-unsupported-bridge-protocol';
 const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';
 
 export default function UnsupportedBridgeProtocolDialog(_: {||}) {

From a5267faad5849eb3d10ead6be911f661691e0345 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 28 Apr 2021 08:58:27 -0400
Subject: [PATCH 0491/1603] Updated DevTools CHANGELOG for 4.10 releases

---
 packages/react-devtools/CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index c6ec867e93fe..728e3ef62a3a 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -80,6 +80,13 @@ The following features are only enabled when used with (experimental) builds of
 ###### 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.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)
+#### Feature
+* 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

From a0d6b155dc3a182162b9f91baac33df39d7919df Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 28 Apr 2021 10:29:22 -0400
Subject: [PATCH 0492/1603] DevTools should iterate over siblings during mount
 (#21377)

Previously, DevTools recursed over both children and siblings during mount. This caused potential stack overflows when there were a lot of children (e.g. a list containing many items).

Given the following example component tree:

       A
    B  C  D
    E     F
          G

A method that recurses for every child and sibling leads to a max depth of 6:

    A
    A -> B
    A -> B -> E
    A -> B -> C
    A -> B -> C -> D
    A -> B -> C -> D -> F
    A -> B -> C -> D -> F -> G

The stack gets deeper as the tree gets either deeper or wider.

A method that recurses for every child and iterates over siblings leads to a max depth of 4:

    A
    A -> B
    A -> B -> E
    A -> C
    A -> D
    A -> D -> F
    A -> D -> F -> G

The stack gets deeper as the tree gets deeper but is resilient to wide trees (e.g. lists containing many items).
---
 .../src/backend/renderer.js                   | 148 +++++++++---------
 1 file changed, 73 insertions(+), 75 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c1172bfbe126..a45f510ff230 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1647,102 +1647,100 @@ export function attach(
   }
 
   function mountFiberRecursively(
-    fiber: Fiber,
+    firstChild: Fiber,
     parentFiber: Fiber | null,
     traverseSiblings: boolean,
     traceNearestHostComponentUpdate: boolean,
   ) {
-    if (__DEBUG__) {
-      debug('mountFiberRecursively()', fiber, parentFiber);
-    }
+    // 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;
+    while (fiber !== null) {
+      if (__DEBUG__) {
+        debug('mountFiberRecursively()', fiber, parentFiber);
+      }
 
-    // If we have the tree selection from previous reload, try to match this Fiber.
-    // Also remember whether to do the same for siblings.
-    const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(
-      fiber,
-    );
+      // If we have the tree selection from previous reload, try to match this Fiber.
+      // Also remember whether to do the same for siblings.
+      const mightSiblingsBeOnTrackedPath = updateTrackedPathStateBeforeMount(
+        fiber,
+      );
 
-    const shouldIncludeInTree = !shouldFilterFiber(fiber);
-    if (shouldIncludeInTree) {
-      recordMount(fiber, parentFiber);
-    }
+      const shouldIncludeInTree = !shouldFilterFiber(fiber);
+      if (shouldIncludeInTree) {
+        recordMount(fiber, parentFiber);
+      }
 
-    if (traceUpdatesEnabled) {
-      if (traceNearestHostComponentUpdate) {
-        const elementType = getElementTypeForFiber(fiber);
-        // If an ancestor updated, we should mark the nearest host nodes for highlighting.
-        if (elementType === ElementTypeHostComponent) {
-          traceUpdatesForNodes.add(fiber.stateNode);
-          traceNearestHostComponentUpdate = false;
+      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.
-    }
+        // We intentionally do not re-enable the traceNearestHostComponentUpdate flag in this branch,
+        // because we don't want to highlight every host node inside of a newly mounted subtree.
+      }
 
-    const isSuspense = fiber.tag === ReactTypeOfWork.SuspenseComponent;
-    if (isSuspense) {
-      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;
-        const fallbackChild = fallbackChildFragment
-          ? fallbackChildFragment.child
-          : null;
-        if (fallbackChild !== null) {
-          mountFiberRecursively(
-            fallbackChild,
-            shouldIncludeInTree ? fiber : parentFiber,
-            true,
-            traceNearestHostComponentUpdate,
-          );
+      const isSuspense = fiber.tag === ReactTypeOfWork.SuspenseComponent;
+      if (isSuspense) {
+        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;
+          const fallbackChild = fallbackChildFragment
+            ? fallbackChildFragment.child
+            : null;
+          if (fallbackChild !== null) {
+            mountFiberRecursively(
+              fallbackChild,
+              shouldIncludeInTree ? fiber : parentFiber,
+              true,
+              traceNearestHostComponentUpdate,
+            );
+          }
+        } else {
+          let primaryChild: Fiber | null = null;
+          const areSuspenseChildrenConditionallyWrapped =
+            OffscreenComponent === -1;
+          if (areSuspenseChildrenConditionallyWrapped) {
+            primaryChild = fiber.child;
+          } else if (fiber.child !== null) {
+            primaryChild = fiber.child.child;
+          }
+          if (primaryChild !== null) {
+            mountFiberRecursively(
+              primaryChild,
+              shouldIncludeInTree ? fiber : parentFiber,
+              true,
+              traceNearestHostComponentUpdate,
+            );
+          }
         }
       } else {
-        let primaryChild: Fiber | null = null;
-        const areSuspenseChildrenConditionallyWrapped =
-          OffscreenComponent === -1;
-        if (areSuspenseChildrenConditionallyWrapped) {
-          primaryChild = fiber.child;
-        } else if (fiber.child !== null) {
-          primaryChild = fiber.child.child;
-        }
-        if (primaryChild !== null) {
+        if (fiber.child !== null) {
           mountFiberRecursively(
-            primaryChild,
+            fiber.child,
             shouldIncludeInTree ? fiber : parentFiber,
             true,
             traceNearestHostComponentUpdate,
           );
         }
       }
-    } else {
-      if (fiber.child !== null) {
-        mountFiberRecursively(
-          fiber.child,
-          shouldIncludeInTree ? fiber : parentFiber,
-          true,
-          traceNearestHostComponentUpdate,
-        );
-      }
-    }
 
-    // We're exiting this Fiber now, and entering its siblings.
-    // If we have selection to restore, we might need to re-activate tracking.
-    updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);
+      // We're exiting this Fiber now, and entering its siblings.
+      // If we have selection to restore, we might need to re-activate tracking.
+      updateTrackedPathStateAfterMount(mightSiblingsBeOnTrackedPath);
 
-    if (traverseSiblings && fiber.sibling !== null) {
-      mountFiberRecursively(
-        fiber.sibling,
-        parentFiber,
-        true,
-        traceNearestHostComponentUpdate,
-      );
+      fiber = traverseSiblings ? fiber.sibling : null;
     }
   }
 

From 7edd6281344a35519ca36b8a8280e7ba37187004 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 28 Apr 2021 12:36:09 -0400
Subject: [PATCH 0493/1603] Removed (deleted) tracing fixture test from relesae
 scripts

---
 scripts/release/prepare-release-from-ci.js  | 2 --
 scripts/release/prepare-release-from-npm.js | 2 --
 2 files changed, 4 deletions(-)

diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index 3ec76a6a7a46..d10444145e93 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -9,7 +9,6 @@ const downloadBuildArtifacts = require('./shared-commands/download-build-artifac
 const parseParams = require('./shared-commands/parse-params');
 const printPrereleaseSummary = require('./shared-commands/print-prerelease-summary');
 const testPackagingFixture = require('./shared-commands/test-packaging-fixture');
-const testTracingFixture = require('./shared-commands/test-tracing-fixture');
 
 const run = async () => {
   try {
@@ -22,7 +21,6 @@ const run = async () => {
 
     if (!params.skipTests) {
       await testPackagingFixture(params);
-      await testTracingFixture(params);
     }
 
     await printPrereleaseSummary(params, false);
diff --git a/scripts/release/prepare-release-from-npm.js b/scripts/release/prepare-release-from-npm.js
index 0b0261b68551..faada23d2bd7 100755
--- a/scripts/release/prepare-release-from-npm.js
+++ b/scripts/release/prepare-release-from-npm.js
@@ -12,7 +12,6 @@ const guessStableVersionNumbers = require('./prepare-release-from-npm-commands/g
 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 testTracingFixture = require('./shared-commands/test-tracing-fixture');
 const updateStableVersionNumbers = require('./prepare-release-from-npm-commands/update-stable-version-numbers');
 const theme = require('./theme');
 
@@ -48,7 +47,6 @@ const run = async () => {
 
     if (!params.skipTests) {
       await testPackagingFixture(params);
-      await testTracingFixture(params);
     }
 
     await printPrereleaseSummary(params, true);

From 2a7bb4154809f1f4e17ffbdde1342bd4ce91ea37 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 28 Apr 2021 12:36:24 -0400
Subject: [PATCH 0494/1603] Preparing DevTools 4.12.4 -> 4.13.0 release
 (#21378)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 ++--
 .../edge/manifest.json                        |  4 ++--
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 packages/react-devtools/CHANGELOG.md          | 22 +++++++++++++++++--
 packages/react-devtools/package.json          |  4 ++--
 7 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index baee98ad3c83..8ccbd92c458e 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.12.4",
+  "version": "4.13.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index fcbd0a3dfac7..837c907a9319 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.12.4",
-  "version_name": "4.12.4",
+  "version": "4.13.0",
+  "version_name": "4.13.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 7fe8faaae125..7a82b47f37e8 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.12.4",
-  "version_name": "4.12.4",
+  "version": "4.13.0",
+  "version_name": "4.13.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index e5144dca40c7..6babb60e95d4 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.12.4",
+  "version": "4.13.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index cdee9f7f3b62..9bb4684a7d63 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.12.4",
+  "version": "4.13.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 728e3ef62a3a..65bf7a0a1c3b 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,24 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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/master/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` depedency because of a problem with transitive dependencies ([bvaughn](https://github.com/bvaughn) in [#21317](https://github.com/facebook/react/pull/21317))
@@ -28,7 +46,7 @@ Although this release is being made for all NPM packages, only the `react-devtoo
 
 ## 4.12.0 (April 12, 2021)
 Although this release is being made for all NPM packages, only the `react-devtools-inline` package contains changes.
-#### Feature
+#### 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)
@@ -85,7 +103,7 @@ The following features are only enabled when used with (experimental) builds of
 * 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)
-#### Feature
+#### 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)
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 932a97a11298..d86ea73821e4 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.12.4",
+  "version": "4.13.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.12.4",
+    "react-devtools-core": "4.13.0",
     "update-notifier": "^2.1.0"
   }
 }

From 207d4c3a535d4624f17634baa6bfe613f5f3e4e6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 23 Apr 2021 11:44:57 -0500
Subject: [PATCH 0495/1603] Revert "Support nesting of startTransition and
 flushSync (alt) (#21149)"

This reverts commit faa1e127f1ba755da846bc6ce299cdefaf97721f.

* Support nesting of startTransition and flushSync

* Unset transition before entering any special execution contexts

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 .../src/events/ReactDOMEventListener.js       |  6 ---
 .../src/ReactFiberWorkLoop.new.js             | 22 ----------
 .../src/ReactFiberWorkLoop.old.js             | 22 ----------
 .../src/__tests__/ReactFlushSync-test.js      | 43 -------------------
 4 files changed, 93 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 81b3a1b85dce..590d8c2d9f5b 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -49,9 +49,6 @@ import {
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-
-const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
 // TODO: can we stop exporting these?
 export let _enabled = true;
@@ -128,14 +125,11 @@ function dispatchContinuousEvent(
   nativeEvent,
 ) {
   const previousPriority = getCurrentUpdatePriority();
-  const prevTransition = ReactCurrentBatchConfig.transition;
-  ReactCurrentBatchConfig.transition = 0;
   try {
     setCurrentUpdatePriority(ContinuousEventPriority);
     dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0b15fb13a235..99f3e014148f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -245,7 +245,6 @@ const ceil = Math.ceil;
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
-  ReactCurrentBatchConfig,
   IsSomeRendererActing,
 } = ReactSharedInternals;
 
@@ -1063,14 +1062,11 @@ export function flushDiscreteUpdates() {
 
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
-  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
@@ -1114,14 +1110,11 @@ export function discreteUpdates<A, B, C, D, R>(
   d: D,
 ): R {
   const previousPriority = getCurrentUpdatePriority();
-  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       resetRenderTimer();
     }
@@ -1151,10 +1144,8 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
-  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
@@ -1163,7 +1154,6 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1185,15 +1175,12 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
-  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1688,13 +1675,10 @@ function commitRoot(root) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
-  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
-    ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
@@ -1816,8 +1800,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 0;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -1899,7 +1881,6 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     // Reset the priority to the previous non-sync value.
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
   } else {
     // No effects.
     root.current = finishedWork;
@@ -2036,15 +2017,12 @@ export function flushPassiveEffects(): boolean {
   if (rootWithPendingPassiveEffects !== null) {
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
-    const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
-      ReactCurrentBatchConfig.transition = 0;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdatePriority(previousPriority);
-      ReactCurrentBatchConfig.transition = prevTransition;
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 7b03e4cc743d..e7328b989083 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -245,7 +245,6 @@ const ceil = Math.ceil;
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
-  ReactCurrentBatchConfig,
   IsSomeRendererActing,
 } = ReactSharedInternals;
 
@@ -1063,14 +1062,11 @@ export function flushDiscreteUpdates() {
 
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
-  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
@@ -1114,14 +1110,11 @@ export function discreteUpdates<A, B, C, D, R>(
   d: D,
 ): R {
   const previousPriority = getCurrentUpdatePriority();
-  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       resetRenderTimer();
     }
@@ -1151,10 +1144,8 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
-  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
@@ -1163,7 +1154,6 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1185,15 +1175,12 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
-  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1688,13 +1675,10 @@ function commitRoot(root) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
-  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
-    ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
@@ -1816,8 +1800,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 0;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -1899,7 +1881,6 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     // Reset the priority to the previous non-sync value.
     setCurrentUpdatePriority(previousPriority);
-    ReactCurrentBatchConfig.transition = prevTransition;
   } else {
     // No effects.
     root.current = finishedWork;
@@ -2036,15 +2017,12 @@ export function flushPassiveEffects(): boolean {
   if (rootWithPendingPassiveEffects !== null) {
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
-    const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
-      ReactCurrentBatchConfig.transition = 0;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdatePriority(previousPriority);
-      ReactCurrentBatchConfig.transition = prevTransition;
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index a3df1effd7b3..327b4a87ca67 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -3,7 +3,6 @@ let ReactNoop;
 let Scheduler;
 let useState;
 let useEffect;
-let startTransition;
 
 describe('ReactFlushSync', () => {
   beforeEach(() => {
@@ -14,7 +13,6 @@ describe('ReactFlushSync', () => {
     Scheduler = require('scheduler');
     useState = React.useState;
     useEffect = React.useEffect;
-    startTransition = React.unstable_startTransition;
   });
 
   function Text({text}) {
@@ -64,47 +62,6 @@ describe('ReactFlushSync', () => {
     expect(root).toMatchRenderedOutput('1, 1');
   });
 
-  // @gate experimental
-  test('nested 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 root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
-      root.render(<App />);
-    });
-    expect(Scheduler).toHaveYielded(['0, 0']);
-    expect(root).toMatchRenderedOutput('0, 0');
-
-    await ReactNoop.act(async () => {
-      ReactNoop.flushSync(() => {
-        startTransition(() => {
-          // This should be async even though flushSync is on the stack, because
-          // startTransition is closer.
-          setState(1);
-          ReactNoop.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
-      expect(Scheduler).toHaveYielded(['1, 0']);
-      expect(root).toMatchRenderedOutput('1, 0');
-    });
-    // Now the async update has flushed, too.
-    expect(Scheduler).toHaveYielded(['1, 1']);
-    expect(root).toMatchRenderedOutput('1, 1');
-  });
-
   test('flushes passive effects synchronously when they are the result of a sync render', async () => {
     function App() {
       useEffect(() => {

From 7bac7607a764074e66dd57c68c09ec5cc898f4a5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 23 Apr 2021 11:46:58 -0500
Subject: [PATCH 0496/1603] Revert "Flush discrete passive effects before paint
 (#21150)"

This reverts commit 2e7aceeb5c8b6e5c61174c0e9731e263e956e445.

If a discrete render results in passive effects, we should flush them
synchronously at the end of the current task so that the result is
immediately observable. For example, if a passive effect adds an event
listener, the listener will be added before the next input.

We don't need to do this for effects that don't have discrete/sync
priority, because we assume they are not order-dependent and do not
need to be observed by external systems.

For legacy mode, we will maintain the existing behavior, since it hasn't
been reported as an issue, and we'd have to do additional work to
distinguish "legacy default sync" from "discrete sync" to prevent all
passive effects from being treated this way.
---
 .../src/ReactFiberWorkLoop.new.js             | 15 ----
 .../src/ReactFiberWorkLoop.old.js             | 15 ----
 .../src/__tests__/ReactFlushSync-test.js      | 69 -------------------
 .../ReactHooksWithNoopRenderer-test.js        |  7 +-
 4 files changed, 2 insertions(+), 104 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 99f3e014148f..7c659b7775a1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1976,21 +1976,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     return null;
   }
 
-  // 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 (
-    includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
-    root.tag !== LegacyRoot
-  ) {
-    flushPassiveEffects();
-  }
-
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index e7328b989083..530646f8a4d2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1976,21 +1976,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     return null;
   }
 
-  // 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 (
-    includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
-    root.tag !== LegacyRoot
-  ) {
-    flushPassiveEffects();
-  }
-
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index 327b4a87ca67..f763e44705aa 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -61,73 +61,4 @@ describe('ReactFlushSync', () => {
     });
     expect(root).toMatchRenderedOutput('1, 1');
   });
-
-  test('flushes passive effects synchronously when they are the result of a sync render', async () => {
-    function App() {
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Effect');
-      }, []);
-      return <Text text="Child" />;
-    }
-
-    const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
-      ReactNoop.flushSync(() => {
-        root.render(<App />);
-      });
-      expect(Scheduler).toHaveYielded([
-        'Child',
-        // Because the pending effect was the result of a sync update, calling
-        // flushSync should flush it.
-        'Effect',
-      ]);
-      expect(root).toMatchRenderedOutput('Child');
-    });
-  });
-
-  test('do not flush passive effects synchronously in legacy mode', async () => {
-    function App() {
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Effect');
-      }, []);
-      return <Text text="Child" />;
-    }
-
-    const root = ReactNoop.createLegacyRoot();
-    await ReactNoop.act(async () => {
-      ReactNoop.flushSync(() => {
-        root.render(<App />);
-      });
-      expect(Scheduler).toHaveYielded([
-        'Child',
-        // Because we're in legacy mode, we shouldn't have flushed the passive
-        // effects yet.
-      ]);
-      expect(root).toMatchRenderedOutput('Child');
-    });
-    // Effect flushes after paint.
-    expect(Scheduler).toHaveYielded(['Effect']);
-  });
-
-  test("do not flush passive effects synchronously when they aren't the result of a sync render", async () => {
-    function App() {
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Effect');
-      }, []);
-      return <Text text="Child" />;
-    }
-
-    const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
-      root.render(<App />);
-      expect(Scheduler).toFlushUntilNextPaint([
-        'Child',
-        // Because the passive effect was not the result of a sync update, it
-        // should not flush before paint.
-      ]);
-      expect(root).toMatchRenderedOutput('Child');
-    });
-    // Effect flushes after paint.
-    expect(Scheduler).toHaveYielded(['Effect']);
-  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 27d09697fc21..a02c64067195 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -32,7 +32,6 @@ let useDeferredValue;
 let forwardRef;
 let memo;
 let act;
-let ContinuousEventPriority;
 
 describe('ReactHooksWithNoopRenderer', () => {
   beforeEach(() => {
@@ -56,8 +55,6 @@ describe('ReactHooksWithNoopRenderer', () => {
     useDeferredValue = React.unstable_useDeferredValue;
     Suspense = React.Suspense;
     act = ReactNoop.act;
-    ContinuousEventPriority = require('react-reconciler/constants')
-      .ContinuousEventPriority;
 
     textCache = new Map();
 
@@ -1400,10 +1397,10 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(Scheduler).toFlushAndYieldThrough(['Child one render']);
 
         // Schedule unmount for the parent that unmounts children with pending update.
-        ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
+        ReactNoop.flushSync(() => {
           setParentState(false);
         });
-        expect(Scheduler).toFlushUntilNextPaint([
+        expect(Scheduler).toHaveYielded([
           'Parent false render',
           'Parent false commit',
         ]);

From e7e0a90bd8558af16bb6aa278097536d9b69643c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 23 Apr 2021 11:48:13 -0500
Subject: [PATCH 0497/1603] Revert "Fix: flushSync changes priority inside
 effect (#21122)"

This reverts commit 0e3c7e1d62efb6238b69e5295d45b9bd2dcf9181.

When called from inside an effect, flushSync cannot synchronously flush
its updates because React is already working. So we fire a warning.

However, we should still change the priority of the updates to sync so
that they flush at the end of the current task.

This only affects useEffect because updates inside useLayoutEffect (and
the rest of the commit phase, like ref callbacks) are already sync.
---
 .../src/ReactFiberWorkLoop.new.js             | 22 +++----
 .../src/ReactFiberWorkLoop.old.js             | 22 +++----
 .../src/__tests__/ReactFlushSync-test.js      | 64 -------------------
 3 files changed, 22 insertions(+), 86 deletions(-)
 delete mode 100644 packages/react-reconciler/src/__tests__/ReactFlushSync-test.js

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7c659b7775a1..68a811e3fe08 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1142,6 +1142,16 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
 
 export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
+  if ((prevExecutionContext & (RenderContext | CommitContext)) !== NoContext) {
+    if (__DEV__) {
+      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.',
+      );
+    }
+    return fn(a);
+  }
   executionContext |= BatchedContext;
 
   const previousPriority = getCurrentUpdatePriority();
@@ -1158,17 +1168,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // 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) {
-      flushSyncCallbacks();
-    } else {
-      if (__DEV__) {
-        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.',
-        );
-      }
-    }
+    flushSyncCallbacks();
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 530646f8a4d2..729e8e6717d0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1142,6 +1142,16 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
 
 export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
+  if ((prevExecutionContext & (RenderContext | CommitContext)) !== NoContext) {
+    if (__DEV__) {
+      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.',
+      );
+    }
+    return fn(a);
+  }
   executionContext |= BatchedContext;
 
   const previousPriority = getCurrentUpdatePriority();
@@ -1158,17 +1168,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // 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) {
-      flushSyncCallbacks();
-    } else {
-      if (__DEV__) {
-        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.',
-        );
-      }
-    }
+    flushSyncCallbacks();
   }
 }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
deleted file mode 100644
index f763e44705aa..000000000000
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ /dev/null
@@ -1,64 +0,0 @@
-let React;
-let ReactNoop;
-let Scheduler;
-let useState;
-let useEffect;
-
-describe('ReactFlushSync', () => {
-  beforeEach(() => {
-    jest.resetModules();
-
-    React = require('react');
-    ReactNoop = require('react-noop-renderer');
-    Scheduler = require('scheduler');
-    useState = React.useState;
-    useEffect = React.useEffect;
-  });
-
-  function Text({text}) {
-    Scheduler.unstable_yieldValue(text);
-    return text;
-  }
-
-  // @gate experimental || !enableSyncDefaultUpdates
-  test('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);
-          ReactNoop.flushSync(() => setSyncState(1));
-        }
-      }, [syncState, state]);
-      return <Text text={`${syncState}, ${state}`} />;
-    }
-
-    const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
-          root.render(<App />);
-        });
-      } else {
-        root.render(<App />);
-      }
-      // This will yield right before the passive effect fires
-      expect(Scheduler).toFlushUntilNextPaint(['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.
-      expect(() => {
-        expect(Scheduler).toFlushUntilNextPaint(['1, 0']);
-      }).toErrorDev('flushSync was called from inside a lifecycle method');
-
-      // The remaining update is not sync
-      ReactNoop.flushSync();
-      expect(Scheduler).toHaveYielded([]);
-
-      // Now flush it.
-      expect(Scheduler).toFlushUntilNextPaint(['1, 1']);
-    });
-    expect(root).toMatchRenderedOutput('1, 1');
-  });
-});

From 1bd41c6645af83d537e5b9c2b50ec076c1c5b315 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 23 Apr 2021 11:50:04 -0500
Subject: [PATCH 0498/1603] Revert "Delete LanePriority type (#21090)"

This reverts commit 26ddc63f2dcc8e7dcbacf498237a2bb1e28a7d23.

No longer using LanePriority anywhere, so this deletes the
remaining references.
---
 .../src/ReactFiberLane.new.js                 | 76 +++++++++++++++++++
 .../src/ReactFiberLane.old.js                 | 76 +++++++++++++++++++
 2 files changed, 152 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 878fc433f3c5..c5aef527a422 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -11,6 +11,25 @@ import type {FiberRoot} from './ReactInternalTypes';
 
 // 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 LanePriority =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17;
 
 export type Lanes = number;
 export type Lane = number;
@@ -24,6 +43,28 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 
+export const SyncLanePriority: LanePriority = 12;
+
+const InputContinuousHydrationLanePriority: LanePriority = 11;
+export const InputContinuousLanePriority: LanePriority = 10;
+
+const DefaultHydrationLanePriority: LanePriority = 9;
+export const DefaultLanePriority: LanePriority = 8;
+
+const TransitionHydrationPriority: LanePriority = 7;
+export const TransitionPriority: LanePriority = 6;
+
+const RetryLanePriority: LanePriority = 5;
+
+const SelectiveHydrationLanePriority: LanePriority = 4;
+
+const IdleHydrationLanePriority: LanePriority = 3;
+export const IdleLanePriority: LanePriority = 2;
+
+const OffscreenLanePriority: LanePriority = 1;
+
+export const NoLanePriority: LanePriority = 0;
+
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
@@ -127,19 +168,29 @@ export const NoTimestamp = -1;
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
+// "Registers" used to "return" multiple values
+// Used by getHighestPriorityLanes and getNextLanes:
+let return_highestLanePriority: LanePriority = DefaultLanePriority;
+
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   switch (getHighestPriorityLane(lanes)) {
     case SyncLane:
+      return_highestLanePriority = SyncLanePriority;
       return SyncLane;
     case InputContinuousHydrationLane:
+      return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
     case InputContinuousLane:
+      return_highestLanePriority = InputContinuousLanePriority;
       return InputContinuousLane;
     case DefaultHydrationLane:
+      return_highestLanePriority = DefaultHydrationLanePriority;
       return DefaultHydrationLane;
     case DefaultLane:
+      return_highestLanePriority = DefaultLanePriority;
       return DefaultLane;
     case TransitionHydrationLane:
+      return_highestLanePriority = TransitionHydrationPriority;
       return TransitionHydrationLane;
     case TransitionLane1:
     case TransitionLane2:
@@ -157,20 +208,26 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
+      return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
+      return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
+      return_highestLanePriority = SelectiveHydrationLanePriority;
       return SelectiveHydrationLane;
     case IdleHydrationLane:
+      return_highestLanePriority = IdleHydrationLanePriority;
       return IdleHydrationLane;
     case IdleLane:
+      return_highestLanePriority = IdleLanePriority;
       return IdleLane;
     case OffscreenLane:
+      return_highestLanePriority = OffscreenLanePriority;
       return OffscreenLane;
     default:
       if (__DEV__) {
@@ -179,6 +236,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
         );
       }
       // This shouldn't be reachable, but as a fallback, return the entire bitmask.
+      return_highestLanePriority = DefaultLanePriority;
       return lanes;
   }
 }
@@ -187,10 +245,12 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
   if (pendingLanes === NoLanes) {
+    return_highestLanePriority = NoLanePriority;
     return NoLanes;
   }
 
   let nextLanes = NoLanes;
+  let nextLanePriority = NoLanePriority;
 
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
@@ -202,10 +262,12 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
     if (nonIdleUnblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+      nextLanePriority = return_highestLanePriority;
     } else {
       const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
       if (nonIdlePingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
+        nextLanePriority = return_highestLanePriority;
       }
     }
   } else {
@@ -213,9 +275,11 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const unblockedLanes = pendingLanes & ~suspendedLanes;
     if (unblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(unblockedLanes);
+      nextLanePriority = return_highestLanePriority;
     } else {
       if (pingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(pingedLanes);
+        nextLanePriority = return_highestLanePriority;
       }
     }
   }
@@ -249,6 +313,8 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
+    } else {
+      return_highestLanePriority = nextLanePriority;
     }
   }
 
@@ -443,6 +509,9 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
+export function returnNextLanesPriority() {
+  return return_highestLanePriority;
+}
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
@@ -548,6 +617,13 @@ export function higherPriorityLane(a: Lane, b: Lane) {
   return a !== NoLane && a < b ? a : b;
 }
 
+export function higherLanePriority(
+  a: LanePriority,
+  b: LanePriority,
+): LanePriority {
+  return a !== NoLanePriority && 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
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index d4010468f0d7..926a3da32cba 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -11,6 +11,25 @@ import type {FiberRoot} from './ReactInternalTypes';
 
 // 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 LanePriority =
+  | 0
+  | 1
+  | 2
+  | 3
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 13
+  | 14
+  | 15
+  | 16
+  | 17;
 
 export type Lanes = number;
 export type Lane = number;
@@ -24,6 +43,28 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 
+export const SyncLanePriority: LanePriority = 12;
+
+const InputContinuousHydrationLanePriority: LanePriority = 11;
+export const InputContinuousLanePriority: LanePriority = 10;
+
+const DefaultHydrationLanePriority: LanePriority = 9;
+export const DefaultLanePriority: LanePriority = 8;
+
+const TransitionHydrationPriority: LanePriority = 7;
+export const TransitionPriority: LanePriority = 6;
+
+const RetryLanePriority: LanePriority = 5;
+
+const SelectiveHydrationLanePriority: LanePriority = 4;
+
+const IdleHydrationLanePriority: LanePriority = 3;
+export const IdleLanePriority: LanePriority = 2;
+
+const OffscreenLanePriority: LanePriority = 1;
+
+export const NoLanePriority: LanePriority = 0;
+
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
@@ -127,19 +168,29 @@ export const NoTimestamp = -1;
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
+// "Registers" used to "return" multiple values
+// Used by getHighestPriorityLanes and getNextLanes:
+let return_highestLanePriority: LanePriority = DefaultLanePriority;
+
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   switch (getHighestPriorityLane(lanes)) {
     case SyncLane:
+      return_highestLanePriority = SyncLanePriority;
       return SyncLane;
     case InputContinuousHydrationLane:
+      return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
     case InputContinuousLane:
+      return_highestLanePriority = InputContinuousLanePriority;
       return InputContinuousLane;
     case DefaultHydrationLane:
+      return_highestLanePriority = DefaultHydrationLanePriority;
       return DefaultHydrationLane;
     case DefaultLane:
+      return_highestLanePriority = DefaultLanePriority;
       return DefaultLane;
     case TransitionHydrationLane:
+      return_highestLanePriority = TransitionHydrationPriority;
       return TransitionHydrationLane;
     case TransitionLane1:
     case TransitionLane2:
@@ -157,20 +208,26 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
+      return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
+      return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
+      return_highestLanePriority = SelectiveHydrationLanePriority;
       return SelectiveHydrationLane;
     case IdleHydrationLane:
+      return_highestLanePriority = IdleHydrationLanePriority;
       return IdleHydrationLane;
     case IdleLane:
+      return_highestLanePriority = IdleLanePriority;
       return IdleLane;
     case OffscreenLane:
+      return_highestLanePriority = OffscreenLanePriority;
       return OffscreenLane;
     default:
       if (__DEV__) {
@@ -179,6 +236,7 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
         );
       }
       // This shouldn't be reachable, but as a fallback, return the entire bitmask.
+      return_highestLanePriority = DefaultLanePriority;
       return lanes;
   }
 }
@@ -187,10 +245,12 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
   if (pendingLanes === NoLanes) {
+    return_highestLanePriority = NoLanePriority;
     return NoLanes;
   }
 
   let nextLanes = NoLanes;
+  let nextLanePriority = NoLanePriority;
 
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
@@ -202,10 +262,12 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
     if (nonIdleUnblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
+      nextLanePriority = return_highestLanePriority;
     } else {
       const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
       if (nonIdlePingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
+        nextLanePriority = return_highestLanePriority;
       }
     }
   } else {
@@ -213,9 +275,11 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const unblockedLanes = pendingLanes & ~suspendedLanes;
     if (unblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(unblockedLanes);
+      nextLanePriority = return_highestLanePriority;
     } else {
       if (pingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(pingedLanes);
+        nextLanePriority = return_highestLanePriority;
       }
     }
   }
@@ -249,6 +313,8 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
+    } else {
+      return_highestLanePriority = nextLanePriority;
     }
   }
 
@@ -443,6 +509,9 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
+export function returnNextLanesPriority() {
+  return return_highestLanePriority;
+}
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
@@ -548,6 +617,13 @@ export function higherPriorityLane(a: Lane, b: Lane) {
   return a !== NoLane && a < b ? a : b;
 }
 
+export function higherLanePriority(
+  a: LanePriority,
+  b: LanePriority,
+): LanePriority {
+  return a !== NoLanePriority && 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

From c6702656ff312fda4da9f442c99fe3931745c80d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 23 Apr 2021 11:53:36 -0500
Subject: [PATCH 0499/1603] Revert "Clean up host pointers in level 2 of
 clean-up flag (#21112)"

This reverts commit 8ed0c85bf174ce6e501be62d9ccec1889bbdbce1.

The host tree is a cyclical structure. Leaking a single DOM node can
retain a large amount of memory. React-managed DOM nodes also point
back to a fiber tree.

Perf testing suggests that disconnecting these fields has a big memory
impact. That suggests leaks in non-React code but since it's hard to
completely eliminate those, it may still be worth the extra work to
clear these fields.

I'm moving this to level 2 to confirm whether this alone is responsible
for the memory savings, or if there are other fields that are retaining
large amounts of memory.

In our plan for removing the alternate model, DOM nodes would not be
connected to fibers, except at the root of the whole tree, which is
easy to disconnect on deletion. So in that world, we likely won't have
to do any additional work.
---
 .../src/ReactFiberCommitWork.new.js           | 21 ++++++++-----------
 .../src/ReactFiberCommitWork.old.js           | 21 ++++++++-----------
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 46f19294562c..bbd6f5692522 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1382,18 +1382,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
     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;
-
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1412,6 +1400,15 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
+
+      // For host components, disconnect host instance -> fiber pointer.
+      if (fiber.tag === HostComponent) {
+        const hostInstance: Instance = fiber.stateNode;
+        if (hostInstance !== null) {
+          detachDeletedInstance(hostInstance);
+        }
+      }
+
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index f45a44083e23..40df79a1b852 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1382,18 +1382,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
     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;
-
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1412,6 +1400,15 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
+
+      // For host components, disconnect host instance -> fiber pointer.
+      if (fiber.tag === HostComponent) {
+        const hostInstance: Instance = fiber.stateNode;
+        if (hostInstance !== null) {
+          detachDeletedInstance(hostInstance);
+        }
+      }
+
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;

From 86f3385d9ae12fe7ff233fdb5a2b46f63095a75c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 23 Apr 2021 11:55:11 -0500
Subject: [PATCH 0500/1603] Revert "Use highest priority lane to detect
 interruptions (#21088)"

This reverts commit b4044f8a07323bcad7d55cbaedc35c35b4acf7e0.

Instead of LanePriority.

I'm removing all uses of LanePriority so I can delete it.
---
 packages/react-reconciler/src/ReactFiberLane.new.js | 11 +++++------
 packages/react-reconciler/src/ReactFiberLane.old.js | 11 +++++------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index c5aef527a422..64a3bc312cda 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -300,16 +300,15 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     // bother waiting until the root is complete.
     (wipLanes & suspendedLanes) === NoLanes
   ) {
-    const nextLane = getHighestPriorityLane(nextLanes);
-    const wipLane = getHighestPriorityLane(wipLanes);
+    getHighestPriorityLanes(wipLanes);
+    const wipLanePriority = return_highestLanePriority;
     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 ||
+      nextLanePriority <= wipLanePriority ||
       // 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)
+      (nextLanePriority === DefaultLanePriority &&
+        wipLanePriority === TransitionPriority)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 926a3da32cba..69c811a80e9b 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -300,16 +300,15 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     // bother waiting until the root is complete.
     (wipLanes & suspendedLanes) === NoLanes
   ) {
-    const nextLane = getHighestPriorityLane(nextLanes);
-    const wipLane = getHighestPriorityLane(wipLanes);
+    getHighestPriorityLanes(wipLanes);
+    const wipLanePriority = return_highestLanePriority;
     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 ||
+      nextLanePriority <= wipLanePriority ||
       // 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)
+      (nextLanePriority === DefaultLanePriority &&
+        wipLanePriority === TransitionPriority)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;

From 9e9dac650535406b25979758a630a78b7c68a22c Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Wed, 28 Apr 2021 16:09:30 -0400
Subject: [PATCH 0501/1603] Add unstable_concurrentUpdatesByDefault (#21227)

---
 .../src/__tests__/ReactDOMRoot-test.js        | 35 +++++++++++++++++++
 packages/react-dom/src/client/ReactDOMRoot.js | 11 ++++++
 .../react-native-renderer/src/ReactFabric.js  |  2 +-
 .../src/ReactNativeRenderer.js                |  2 +-
 .../react-reconciler/src/ReactFiber.new.js    | 13 +++++++
 .../react-reconciler/src/ReactFiber.old.js    | 13 +++++++
 .../src/ReactFiberLane.new.js                 | 34 ++++++++++--------
 .../src/ReactFiberLane.old.js                 | 34 ++++++++++--------
 .../src/ReactFiberReconciler.new.js           |  2 ++
 .../src/ReactFiberReconciler.old.js           |  2 ++
 .../src/ReactFiberRoot.new.js                 |  7 +++-
 .../src/ReactFiberRoot.old.js                 |  7 +++-
 .../react-reconciler/src/ReactTypeOfMode.js   | 13 +++----
 .../src/ReactTestRenderer.js                  | 10 ++++++
 packages/shared/ReactFeatureFlags.js          |  2 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  2 ++
 24 files changed, 159 insertions(+), 38 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 25a560c5c32a..5ffdb3813155 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -13,6 +13,7 @@ let React = require('react');
 let ReactDOM = require('react-dom');
 let ReactDOMServer = require('react-dom/server');
 let Scheduler = require('scheduler');
+let act;
 
 describe('ReactDOMRoot', () => {
   let container;
@@ -24,6 +25,7 @@ describe('ReactDOMRoot', () => {
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
+    act = require('react-dom/test-utils').unstable_concurrentAct;
   });
 
   if (!__EXPERIMENTAL__) {
@@ -316,4 +318,37 @@ describe('ReactDOMRoot', () => {
       {withoutStack: true},
     );
   });
+
+  // @gate experimental
+  it('opts-in to concurrent default updates', async () => {
+    const root = ReactDOM.unstable_createRoot(container, {
+      unstable_concurrentUpdatesByDefault: true,
+    });
+
+    function Foo({value}) {
+      Scheduler.unstable_yieldValue(value);
+      return <div>{value}</div>;
+    }
+
+    await act(async () => {
+      root.render(<Foo value="a" />);
+    });
+
+    expect(container.textContent).toEqual('a');
+
+    await act(async () => {
+      root.render(<Foo value="b" />);
+
+      expect(Scheduler).toHaveYielded(['a']);
+      expect(container.textContent).toEqual('a');
+
+      expect(Scheduler).toFlushAndYieldThrough(['b']);
+      if (gate(flags => flags.allowConcurrentByDefault)) {
+        expect(container.textContent).toEqual('a');
+      } else {
+        expect(container.textContent).toEqual('b');
+      }
+    });
+    expect(container.textContent).toEqual('b');
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 56532d5d6748..0a78f61ad097 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -28,6 +28,7 @@ export type RootOptions = {
     ...
   },
   unstable_strictModeLevel?: number,
+  unstable_concurrentUpdatesByDefault?: boolean,
   ...
 };
 
@@ -52,6 +53,7 @@ import {
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
 import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
 function ReactDOMRoot(container: Container, options: void | RootOptions) {
   this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
@@ -126,12 +128,21 @@ function createRootImpl(
       ? options.unstable_strictModeLevel
       : null;
 
+  let concurrentUpdatesByDefaultOverride = null;
+  if (allowConcurrentByDefault) {
+    concurrentUpdatesByDefaultOverride =
+      options != null && options.unstable_concurrentUpdatesByDefault != null
+        ? options.unstable_concurrentUpdatesByDefault
+        : null;
+  }
+
   const root = createContainer(
     container,
     tag,
     hydrate,
     hydrationCallbacks,
     strictModeLevelOverride,
+    concurrentUpdatesByDefaultOverride,
   );
   markContainerAsRoot(root.current, container);
 
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 9f1f44f51cf4..b319cb22c7b7 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -207,7 +207,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, null, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index de42c6e41a58..4f7337732037 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -203,7 +203,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, null, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 95a5340b1873..c883079028a5 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -24,6 +24,8 @@ import {
   enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
+  enableSyncDefaultUpdates,
+  allowConcurrentByDefault,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
@@ -68,6 +70,7 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
+  ConcurrentUpdatesByDefaultMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -420,6 +423,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 export function createHostRootFiber(
   tag: RootTag,
   strictModeLevelOverride: null | number,
+  concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
@@ -440,6 +444,15 @@ export function createHostRootFiber(
         mode |= StrictLegacyMode;
       }
     }
+    if (
+      // We only use this flag for our repo tests to check both behaviors.
+      // TODO: Flip this flag and rename it something like "forceConcurrentByDefaultForTesting"
+      !enableSyncDefaultUpdates ||
+      // Only for internal experiments.
+      (allowConcurrentByDefault && concurrentUpdatesByDefaultOverride)
+    ) {
+      mode |= ConcurrentUpdatesByDefaultMode;
+    }
   } else {
     mode = NoMode;
   }
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 159557e86a16..e33c0e7cd835 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -24,6 +24,8 @@ import {
   enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
+  enableSyncDefaultUpdates,
+  allowConcurrentByDefault,
 } from 'shared/ReactFeatureFlags';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
@@ -68,6 +70,7 @@ import {
   ProfileMode,
   StrictLegacyMode,
   StrictEffectsMode,
+  ConcurrentUpdatesByDefaultMode,
 } from './ReactTypeOfMode';
 import {
   REACT_FORWARD_REF_TYPE,
@@ -420,6 +423,7 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 export function createHostRootFiber(
   tag: RootTag,
   strictModeLevelOverride: null | number,
+  concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
@@ -440,6 +444,15 @@ export function createHostRootFiber(
         mode |= StrictLegacyMode;
       }
     }
+    if (
+      // We only use this flag for our repo tests to check both behaviors.
+      // TODO: Flip this flag and rename it something like "forceConcurrentByDefaultForTesting"
+      !enableSyncDefaultUpdates ||
+      // Only for internal experiments.
+      (allowConcurrentByDefault && concurrentUpdatesByDefaultOverride)
+    ) {
+      mode |= ConcurrentUpdatesByDefaultMode;
+    }
   } else {
     mode = NoMode;
   }
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 64a3bc312cda..cdf5543c36e6 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -39,9 +39,10 @@ import {
   enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
-  enableSyncDefaultUpdates,
+  allowConcurrentByDefault,
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
+import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 
 export const SyncLanePriority: LanePriority = 12;
 
@@ -318,11 +319,12 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   }
 
   if (
-    // TODO: Check for root override, once that lands
-    enableSyncDefaultUpdates &&
-    (nextLanes & InputContinuousLane) !== NoLanes
+    allowConcurrentByDefault &&
+    (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
   ) {
-    // When updates are sync by default, we entangle continous priority updates
+    // Do nothing, use the lanes as they were assigned.
+  } else if ((nextLanes & 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.
@@ -527,17 +529,21 @@ export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
     // finish rendering without yielding execution.
     return false;
   }
-  if (enableSyncDefaultUpdates) {
-    const SyncDefaultLanes =
-      InputContinuousHydrationLane |
-      InputContinuousLane |
-      DefaultHydrationLane |
-      DefaultLane;
-    // TODO: Check for root override, once that lands
-    return (lanes & SyncDefaultLanes) === NoLanes;
-  } else {
+
+  if (
+    allowConcurrentByDefault &&
+    (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
+  ) {
+    // Concurrent updates by default always use time slicing.
     return true;
   }
+
+  const SyncDefaultLanes =
+    InputContinuousHydrationLane |
+    InputContinuousLane |
+    DefaultHydrationLane |
+    DefaultLane;
+  return (lanes & SyncDefaultLanes) === NoLanes;
 }
 
 export function isTransitionLane(lane: Lane) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 69c811a80e9b..6ab7163cbb92 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -39,9 +39,10 @@ import {
   enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
-  enableSyncDefaultUpdates,
+  allowConcurrentByDefault,
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
+import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 
 export const SyncLanePriority: LanePriority = 12;
 
@@ -318,11 +319,12 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   }
 
   if (
-    // TODO: Check for root override, once that lands
-    enableSyncDefaultUpdates &&
-    (nextLanes & InputContinuousLane) !== NoLanes
+    allowConcurrentByDefault &&
+    (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
   ) {
-    // When updates are sync by default, we entangle continous priority updates
+    // Do nothing, use the lanes as they were assigned.
+  } else if ((nextLanes & 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.
@@ -527,17 +529,21 @@ export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
     // finish rendering without yielding execution.
     return false;
   }
-  if (enableSyncDefaultUpdates) {
-    const SyncDefaultLanes =
-      InputContinuousHydrationLane |
-      InputContinuousLane |
-      DefaultHydrationLane |
-      DefaultLane;
-    // TODO: Check for root override, once that lands
-    return (lanes & SyncDefaultLanes) === NoLanes;
-  } else {
+
+  if (
+    allowConcurrentByDefault &&
+    (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
+  ) {
+    // Concurrent updates by default always use time slicing.
     return true;
   }
+
+  const SyncDefaultLanes =
+    InputContinuousHydrationLane |
+    InputContinuousLane |
+    DefaultHydrationLane |
+    DefaultLane;
+  return (lanes & SyncDefaultLanes) === NoLanes;
 }
 
 export function isTransitionLane(lane: Lane) {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index f6318f0a0305..f53a24e86c60 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -249,6 +249,7 @@ export function createContainer(
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   strictModeLevelOverride: null | number,
+  concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -256,6 +257,7 @@ export function createContainer(
     hydrate,
     hydrationCallbacks,
     strictModeLevelOverride,
+    concurrentUpdatesByDefaultOverride,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 68a6ed619bbd..00c12b3406df 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -249,6 +249,7 @@ export function createContainer(
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   strictModeLevelOverride: null | number,
+  concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -256,6 +257,7 @@ export function createContainer(
     hydrate,
     hydrationCallbacks,
     strictModeLevelOverride,
+    concurrentUpdatesByDefaultOverride,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index e82262b5737e..d2efcc5851d4 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -99,6 +99,7 @@ export function createFiberRoot(
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   strictModeLevelOverride: null | number,
+  concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
   if (enableSuspenseCallback) {
@@ -107,7 +108,11 @@ export function createFiberRoot(
 
   // Cyclic construction. This cheats the type system right now because
   // stateNode is any.
-  const uninitializedFiber = createHostRootFiber(tag, strictModeLevelOverride);
+  const uninitializedFiber = createHostRootFiber(
+    tag,
+    strictModeLevelOverride,
+    concurrentUpdatesByDefaultOverride,
+  );
   root.current = uninitializedFiber;
   uninitializedFiber.stateNode = root;
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 20c3cdaa6cbf..68d329492cf1 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -99,6 +99,7 @@ export function createFiberRoot(
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   strictModeLevelOverride: null | number,
+  concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
   if (enableSuspenseCallback) {
@@ -107,7 +108,11 @@ export function createFiberRoot(
 
   // Cyclic construction. This cheats the type system right now because
   // stateNode is any.
-  const uninitializedFiber = createHostRootFiber(tag, strictModeLevelOverride);
+  const uninitializedFiber = createHostRootFiber(
+    tag,
+    strictModeLevelOverride,
+    concurrentUpdatesByDefaultOverride,
+  );
   root.current = uninitializedFiber;
   uninitializedFiber.stateNode = root;
 
diff --git a/packages/react-reconciler/src/ReactTypeOfMode.js b/packages/react-reconciler/src/ReactTypeOfMode.js
index 466363fabd4e..f16d2c51b76c 100644
--- a/packages/react-reconciler/src/ReactTypeOfMode.js
+++ b/packages/react-reconciler/src/ReactTypeOfMode.js
@@ -9,10 +9,11 @@
 
 export type TypeOfMode = number;
 
-export const NoMode = /*            */ 0b000000;
+export const NoMode = /*                         */ 0b000000;
 // TODO: Remove ConcurrentMode by reading from the root tag instead
-export const ConcurrentMode = /*    */ 0b000001;
-export const ProfileMode = /*       */ 0b000010;
-export const DebugTracingMode = /*  */ 0b000100;
-export const StrictLegacyMode = /*  */ 0b001000;
-export const StrictEffectsMode = /* */ 0b010000;
+export const ConcurrentMode = /*                 */ 0b000001;
+export const ProfileMode = /*                    */ 0b000010;
+export const DebugTracingMode = /*               */ 0b000100;
+export const StrictLegacyMode = /*               */ 0b001000;
+export const StrictEffectsMode = /*              */ 0b010000;
+export const ConcurrentUpdatesByDefaultMode = /* */ 0b100000;
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 5c74c6e9e310..7c64a1693600 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -51,6 +51,7 @@ import enqueueTask from 'shared/enqueueTask';
 
 import {getPublicInstance} from './ReactTestHostConfig';
 import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
 const {IsSomeRendererActing} = ReactSharedInternals;
 
@@ -58,6 +59,7 @@ type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isConcurrent: boolean,
   unstable_strictModeLevel: number,
+  unstable_concurrentUpdatesByDefault: boolean,
   ...
 };
 
@@ -436,6 +438,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
   let createNodeMock = defaultTestOptions.createNodeMock;
   let isConcurrent = false;
   let strictModeLevel = null;
+  let concurrentUpdatesByDefault = null;
   if (typeof options === 'object' && options !== null) {
     if (typeof options.createNodeMock === 'function') {
       createNodeMock = options.createNodeMock;
@@ -446,6 +449,12 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     if (options.unstable_strictModeLevel !== undefined) {
       strictModeLevel = options.unstable_strictModeLevel;
     }
+    if (allowConcurrentByDefault) {
+      if (options.unstable_concurrentUpdatesByDefault !== undefined) {
+        concurrentUpdatesByDefault =
+          options.unstable_concurrentUpdatesByDefault;
+      }
+    }
   }
   let container = {
     children: [],
@@ -458,6 +467,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     false,
     null,
     strictModeLevel,
+    concurrentUpdatesByDefault,
   );
   invariant(root != null, 'something went wrong');
   updateContainer(element, root, null, null);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 757d9ab28b78..ede084ff74ac 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -169,3 +169,5 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 
 export const enableSyncDefaultUpdates = true;
+
+export const allowConcurrentByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index ea9224d5a944..a2b9cc8446c4 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -60,6 +60,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = false;
+export const allowConcurrentByDefault = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 251bb310c1fb..eb3a55187e7d 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
+export const allowConcurrentByDefault = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index aeee968922f1..1a8a75a4c60f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
+export const allowConcurrentByDefault = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 88f2287cd81b..727e8764fc12 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = false;
+export const allowConcurrentByDefault = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 5d43505fa127..688d30ee9fe2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = false;
+export const allowConcurrentByDefault = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 0edbfad4ab17..d593aa3f9cee 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
+export const allowConcurrentByDefault = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 98dbae4505e0..01f184c1e458 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -59,6 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
+export const allowConcurrentByDefault = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index d0fc8e617706..b8c7a56ce720 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -60,3 +60,4 @@ export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
+export const allowConcurrentByDefault = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index afae32b4082f..1d9c88cc8fcf 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -93,6 +93,8 @@ export const enableNewReconciler = __VARIANT__;
 
 export const enableRecursiveCommitTraversal = false;
 
+export const allowConcurrentByDefault = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From 3c21aa855a13707a8abe5dc6eaf2d2a7429fa762 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 28 Apr 2021 16:32:35 -0400
Subject: [PATCH 0502/1603] DevTools refactor Profiler commit tree
 reconstruction to be iterative (#21383)

---
 .../views/Profiler/CommitTreeBuilder.js       | 59 ++++++++-----------
 1 file changed, 26 insertions(+), 33 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index e0b5563f4ad2..1d16aba7fc29 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -56,7 +56,6 @@ export function getCommitTree({
   const commitTrees = ((rootToCommitTreeMap.get(
     rootID,
   ): any): Array<CommitTree>);
-
   if (commitIndex < commitTrees.length) {
     return commitTrees[commitIndex];
   }
@@ -72,52 +71,46 @@ export function getCommitTree({
   }
 
   const {operations} = dataForRoot;
+  if (operations.length <= commitIndex) {
+    throw Error(
+      `getCommitTree(): Invalid commit "${commitIndex}" for root "${rootID}". There are only "${operations.length}" commits.`,
+    );
+  }
 
-  // Commits are generated sequentially and cached.
-  // If this is the very first commit, start with the cached snapshot and apply the first mutation.
-  // Otherwise load (or generate) the previous commit and append a mutation to it.
-  if (commitIndex === 0) {
-    const nodes = new Map();
-
-    // Construct the initial tree.
-    recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);
+  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();
 
-    // Mutate the tree
-    if (operations != null && commitIndex < operations.length) {
-      const commitTree = updateTree({nodes, rootID}, operations[commitIndex]);
+      // Construct the initial tree.
+      recursivelyInitializeTree(rootID, 0, nodes, dataForRoot);
 
-      if (__DEBUG__) {
-        __printTree(commitTree);
-      }
+      // Mutate the tree
+      if (operations != null && index < operations.length) {
+        commitTree = updateTree({nodes, rootID}, operations[index]);
 
-      commitTrees.push(commitTree);
-      return commitTree;
-    }
-  } else {
-    const previousCommitTree = getCommitTree({
-      commitIndex: commitIndex - 1,
-      profilerStore,
-      rootID,
-    });
+        if (__DEBUG__) {
+          __printTree(commitTree);
+        }
 
-    if (operations != null && commitIndex < operations.length) {
-      const commitTree = updateTree(
-        previousCommitTree,
-        operations[commitIndex],
-      );
+        commitTrees.push(commitTree);
+      }
+    } else {
+      const previousCommitTree = commitTrees[index - 1];
+      commitTree = updateTree(previousCommitTree, operations[index]);
 
       if (__DEBUG__) {
         __printTree(commitTree);
       }
 
       commitTrees.push(commitTree);
-      return commitTree;
     }
   }
 
-  throw Error(
-    `getCommitTree(): Unable to reconstruct tree for root "${rootID}" and commit "${commitIndex}"`,
-  );
+  return commitTree;
 }
 
 function recursivelyInitializeTree(

From 269dd6ec5da85fc5ca819cfa010ce60dd1c83ec6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 29 Apr 2021 08:28:38 -0500
Subject: [PATCH 0503/1603] subtreeFlag warning: Fix legacy suspense false
 positive (#21388)

Legacy Suspense is weird. We intentionally commit a suspended fiber in
an inconsistent state. If the fiber suspended before it mounted any
effects, then the fiber won't have a PassiveStatic effect flag, which
will trigger the "missing expected subtreeFlag" warning.

To avoid the false positive, we'd need to mark fibers that commit in an
incomplete state, somehow. For now I'll disable the warning in legacy
mode, with the assumption that most of the bugs that would trigger it
are either exclusive to concurrent mode or exist in both.
---
 .../src/ReactFiberHooks.new.js                |   8 +-
 .../src/ReactFiberHooks.old.js                |   8 +-
 .../ReactSubtreeFlagsWarning-test.js          | 173 ++++++++++++++++++
 3 files changed, 187 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index a507171aecd3..394aa983174c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -480,7 +480,13 @@ export function renderWithHooks<Props, SecondArg>(
     if (
       current !== null &&
       (current.flags & StaticMaskEffect) !==
-        (workInProgress.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.
+      (current.mode & ConcurrentMode) !== NoMode
     ) {
       console.error(
         'Internal React error: Expected static flag was missing. Please ' +
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index ad555804319c..a5eac6836e28 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -480,7 +480,13 @@ export function renderWithHooks<Props, SecondArg>(
     if (
       current !== null &&
       (current.flags & StaticMaskEffect) !==
-        (workInProgress.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.
+      (current.mode & ConcurrentMode) !== NoMode
     ) {
       console.error(
         'Internal React error: Expected static flag was missing. Please ' +
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 000000000000..c972d6ae472c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
@@ -0,0 +1,173 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let useEffect;
+let getCacheForType;
+
+let caches;
+let seededCache;
+
+describe('ReactSuspenseWithNoopRenderer', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    Suspense = React.Suspense;
+    useEffect = React.useEffect;
+
+    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.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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 experimental
+  it('regression: false positive for legacy suspense', async () => {
+    // Wrapping in memo because regular function components go through the
+    // mountIndeterminateComponent path, which acts like there's no `current`
+    // fiber even though there is. `memo` is not indeterminate, so it goes
+    // through the update path.
+    const Child = React.memo(({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.unstable_yieldValue('Effect');
+      }, []);
+
+      Scheduler.unstable_yieldValue(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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['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 ReactNoop.act(async () => {
+      resolveText('Async');
+    });
+    expect(Scheduler).toHaveYielded(['Async', 'Effect']);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+});

From b6644fabb9634216b3c422b52d29abcfb1ee2e77 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 30 Apr 2021 15:23:45 -0400
Subject: [PATCH 0504/1603] Added test fixture for scheduling profiler (#21397)

---
 .../devtools/scheduling-profiler/.gitignore   |  1 +
 .../devtools/scheduling-profiler/README.md    | 15 ++++
 fixtures/devtools/scheduling-profiler/app.js  | 14 ++++
 .../devtools/scheduling-profiler/index.html   | 14 ++++
 fixtures/devtools/scheduling-profiler/run.js  | 78 +++++++++++++++++++
 5 files changed, 122 insertions(+)
 create mode 100644 fixtures/devtools/scheduling-profiler/.gitignore
 create mode 100644 fixtures/devtools/scheduling-profiler/README.md
 create mode 100644 fixtures/devtools/scheduling-profiler/app.js
 create mode 100644 fixtures/devtools/scheduling-profiler/index.html
 create mode 100755 fixtures/devtools/scheduling-profiler/run.js

diff --git a/fixtures/devtools/scheduling-profiler/.gitignore b/fixtures/devtools/scheduling-profiler/.gitignore
new file mode 100644
index 000000000000..8f6ca63cde27
--- /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 000000000000..10f04c228d9d
--- /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 000000000000..7af7c13cc27d
--- /dev/null
+++ b/fixtures/devtools/scheduling-profiler/app.js
@@ -0,0 +1,14 @@
+const {createElement, useLayoutEffect, useState} = React;
+const {unstable_createRoot: 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 000000000000..4210a8e61f1a
--- /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 000000000000..9006956915ae
--- /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/node_modules/';
+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();

From 79740da4c6126abda1f9daf9f666cf200ea30fbb Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 30 Apr 2021 20:50:59 -0400
Subject: [PATCH 0505/1603] Update time-slicing demo (#21401)

---
 fixtures/concurrent/time-slicing/README.md    |   15 +
 fixtures/concurrent/time-slicing/package.json |    5 +-
 .../concurrent/time-slicing/src/index.css     |   10 +-
 fixtures/concurrent/time-slicing/src/index.js |   25 +-
 fixtures/concurrent/time-slicing/yarn.lock    | 5276 +++++++++++------
 5 files changed, 3509 insertions(+), 1822 deletions(-)

diff --git a/fixtures/concurrent/time-slicing/README.md b/fixtures/concurrent/time-slicing/README.md
index ec92df03980f..a61670e8512d 100644
--- a/fixtures/concurrent/time-slicing/README.md
+++ b/fixtures/concurrent/time-slicing/README.md
@@ -14,6 +14,18 @@ There are also known bugs and inefficiencies in master so **don't use this fixtu
 
 ## 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
@@ -24,6 +36,9 @@ yarn build react-dom/index,react/index,react-cache,scheduler --type=NODE
 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
index 9f589fa463b3..9fcfcae8d3df 100644
--- a/fixtures/concurrent/time-slicing/package.json
+++ b/fixtures/concurrent/time-slicing/package.json
@@ -4,13 +4,14 @@
   "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": {
-    "prestart": "cp -r ../../../build/node_modules/* ./node_modules/",
-    "prebuild": "cp -r ../../../build/node_modules/* ./node_modules/",
+    "copy-source": "cp -r ../../../build/node_modules/* ./node_modules/",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
diff --git a/fixtures/concurrent/time-slicing/src/index.css b/fixtures/concurrent/time-slicing/src/index.css
index 2d924fda9324..c685bb20c4a0 100644
--- a/fixtures/concurrent/time-slicing/src/index.css
+++ b/fixtures/concurrent/time-slicing/src/index.css
@@ -32,16 +32,18 @@ body {
   margin-top: 20px;
   margin-bottom: 20px;
   zoom: 1.8;
+  text-align: center;
+  display: flex;
+  justify-content: space-between;
 }
 
 label {
   zoom: 1;
-  margin-right: 50px;
   font-size: 30px;
 }
 
 label.selected {
-  font-weight: bold;  
+  font-weight: bold;
 }
 
 label:nth-child(1).selected {
@@ -56,6 +58,10 @@ label:nth-child(3).selected {
   color: #61dafb;
 }
 
+input[type="radio" i]:nth-child(1) {
+  margin-left: 0;
+}
+
 .chart {
   width: 100%;
   height: 100%;
diff --git a/fixtures/concurrent/time-slicing/src/index.js b/fixtures/concurrent/time-slicing/src/index.js
index 40c19442e351..4835a367e20d 100644
--- a/fixtures/concurrent/time-slicing/src/index.js
+++ b/fixtures/concurrent/time-slicing/src/index.js
@@ -1,6 +1,5 @@
-import React, {PureComponent} from 'react';
-import {flushSync, createRoot} from 'react-dom';
-import Scheduler from 'scheduler';
+import React, {PureComponent, unstable_startTransition} from 'react';
+import {unstable_createRoot} from 'react-dom';
 import _ from 'lodash';
 import Charts from './Charts';
 import Clock from './Clock';
@@ -55,11 +54,9 @@ class App extends PureComponent {
       return;
     }
     if (this.state.strategy !== 'async') {
-      flushSync(() => {
-        this.setState(state => ({
-          showDemo: !state.showDemo,
-        }));
-      });
+      this.setState(state => ({
+        showDemo: !state.showDemo,
+      }));
       return;
     }
     if (this._ignoreClick) {
@@ -67,7 +64,7 @@ class App extends PureComponent {
     }
     this._ignoreClick = true;
 
-    Scheduler.unstable_next(() => {
+    unstable_startTransition(() => {
       this.setState({showDemo: true}, () => {
         this._ignoreClick = false;
       });
@@ -76,9 +73,7 @@ class App extends PureComponent {
 
   debouncedHandleChange = _.debounce(value => {
     if (this.state.strategy === 'debounced') {
-      flushSync(() => {
-        this.setState({value: value});
-      });
+      this.setState({value: value});
     }
   }, 1000);
 
@@ -108,9 +103,9 @@ class App extends PureComponent {
         break;
       case 'async':
         // TODO: useTransition hook instead.
-        setTimeout(() => {
+        unstable_startTransition(() => {
           this.setState({value});
-        }, 0);
+        });
         break;
       default:
         break;
@@ -147,5 +142,5 @@ class App extends PureComponent {
 }
 
 const container = document.getElementById('root');
-const root = createRoot(container);
+const root = unstable_createRoot(container);
 root.render(<App />);
diff --git a/fixtures/concurrent/time-slicing/yarn.lock b/fixtures/concurrent/time-slicing/yarn.lock
index d157a7c79824..0cab4641b789 100644
--- a/fixtures/concurrent/time-slicing/yarn.lock
+++ b/fixtures/concurrent/time-slicing/yarn.lock
@@ -5,75 +5,96 @@
 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"
-
-accepts@~1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.4.tgz#86246758c7dd6d21a6474ff084a4740ec05eb21f"
+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.16"
-    negotiator "0.6.1"
+    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.2.1:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822"
+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, address@^1.0.1:
+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, ajv-keywords@^2.1.0:
+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@^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-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.0, ajv@^5.1.5, ajv@^5.2.0, ajv@^5.2.3:
+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"
@@ -82,201 +103,264 @@ align-text@^0.1.1, align-text@^0.1.3:
 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"
-
-ansi-align@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-1.1.0.tgz#2f0c1658829739add5ebb15e6b0c6e3423f016ba"
+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 "^1.0.1"
+    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.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.0.0.tgz#ec3e8b4e9f8064fc02c3ac9b65f1c275bda8ef92"
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
+  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
 
 ansi-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.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.0.tgz#c159b8d5be0f9e5a6f346dab94f16ce022161b88"
+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"
 
-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"
+  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.0"
-  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-0.7.0.tgz#4af10a1e61573ddea0cf3b99b51c52c05b424d24"
+  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-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.1"
-  resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.1.tgz#426bb9da84090c1838d812c8150af20a8331e296"
+  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:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.0.3.tgz#184b48f62d92d7452bb31b323165c7f8bd02266d"
+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:
-    define-properties "^1.1.2"
-    es-abstract "^1.7.0"
+    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@^4.0.0:
-  version "4.9.2"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.2.tgz#8117ef4f7ed87cd8f89044b5bff97ac243a16c9a"
+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.3"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.3.tgz#dac8787713c9966849fc8180777ebe9c1ddf3b86"
+  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"
-
-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-8S4PPF13sLHN2RRpQuTpbB5N1SU=
 
 assert@^1.1.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
+  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.1"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.1.tgz#19d386a1d9edc6e7c1c85d388aedbcc56d33602d"
-
-async@^1.4.0, async@^1.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-1.5.2.tgz#ec6a61ae56480c0c3cb241c95618e20892f9672a"
+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:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
+async@^2.1.2, async@^2.1.4, async@^2.4.1, async@^2.6.2:
+  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.14.0"
+    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"
@@ -288,6 +372,7 @@ autoprefixer@7.1.6:
 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"
@@ -296,35 +381,36 @@ autoprefixer@^6.3.1:
     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"
+  integrity sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=
 
-aws4@^1.2.1, aws4@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
+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, babel-core@^6.0.0, babel-core@^6.26.0:
+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"
@@ -346,9 +432,35 @@ babel-core@6.26.0, babel-core@^6.0.0, babel-core@^6.26.0:
     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"
@@ -356,8 +468,9 @@ babel-eslint@7.2.3:
     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"
+  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"
@@ -365,12 +478,13 @@ babel-generator@^6.18.0, babel-generator@^6.26.0:
     detect-indent "^4.0.0"
     jsesc "^1.3.0"
     lodash "^4.17.4"
-    source-map "^0.5.6"
+    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"
@@ -379,6 +493,7 @@ babel-helper-builder-binary-assignment-operator-visitor@^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"
@@ -387,6 +502,7 @@ babel-helper-builder-react-jsx@^6.24.1:
 babel-helper-call-delegate@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-call-delegate/-/babel-helper-call-delegate-6.24.1.tgz#ece6aacddc76e41c3461f88bfc575bd0daa2df8d"
+  integrity sha1-7Oaqzdx25Bw0YfiL/Fdb0Nqi340=
   dependencies:
     babel-helper-hoist-variables "^6.24.1"
     babel-runtime "^6.22.0"
@@ -396,6 +512,7 @@ babel-helper-call-delegate@^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"
@@ -405,6 +522,7 @@ babel-helper-define-map@^6.24.1:
 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"
@@ -413,6 +531,7 @@ babel-helper-explode-assignable-expression@^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"
@@ -423,6 +542,7 @@ babel-helper-function-name@^6.24.1:
 babel-helper-get-function-arity@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-get-function-arity/-/babel-helper-get-function-arity-6.24.1.tgz#8f7782aa93407c41d3aa50908f89b031b1b6853d"
+  integrity sha1-j3eCqpNAfEHTqlCQj4mwMbG2hT0=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -430,6 +550,7 @@ babel-helper-get-function-arity@^6.24.1:
 babel-helper-hoist-variables@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-hoist-variables/-/babel-helper-hoist-variables-6.24.1.tgz#1ecb27689c9d25513eadbc9914a73f5408be7a76"
+  integrity sha1-HssnaJydJVE+rbyZFKc/VAi+enY=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -437,6 +558,7 @@ babel-helper-hoist-variables@^6.24.1:
 babel-helper-optimise-call-expression@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-optimise-call-expression/-/babel-helper-optimise-call-expression-6.24.1.tgz#f7a13427ba9f73f8f4fa993c54a97882d1244257"
+  integrity sha1-96E0J7qfc/j0+pk8VKl4gtEkQlc=
   dependencies:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
@@ -444,6 +566,7 @@ babel-helper-optimise-call-expression@^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"
@@ -452,6 +575,7 @@ babel-helper-regex@^6.24.1:
 babel-helper-remap-async-to-generator@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helper-remap-async-to-generator/-/babel-helper-remap-async-to-generator-6.24.1.tgz#5ec581827ad723fecdd381f1c928390676e4551b"
+  integrity sha1-XsWBgnrXI/7N04HxySg5BnbkVRs=
   dependencies:
     babel-helper-function-name "^6.24.1"
     babel-runtime "^6.22.0"
@@ -462,6 +586,7 @@ babel-helper-remap-async-to-generator@^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"
@@ -473,6 +598,7 @@ babel-helper-replace-supers@^6.24.1:
 babel-helpers@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-helpers/-/babel-helpers-6.24.1.tgz#3471de9caec388e5c850e597e58a26ddf37602b2"
+  integrity sha1-NHHenK7DiOXIUOWX5Yom3fN2ArI=
   dependencies:
     babel-runtime "^6.22.0"
     babel-template "^6.24.1"
@@ -480,6 +606,7 @@ babel-helpers@^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"
@@ -488,6 +615,7 @@ babel-jest@20.0.3, babel-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"
@@ -496,70 +624,85 @@ babel-loader@7.1.2:
 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.5"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.5.tgz#6760cdd977f411d3e175bb064f2bc327d99b2b6e"
+  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.7.5"
-    test-exclude "^4.1.1"
+    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.8.0:
+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"
@@ -568,6 +711,7 @@ babel-plugin-transform-async-to-generator@^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"
@@ -577,18 +721,21 @@ babel-plugin-transform-class-properties@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"
@@ -599,6 +746,7 @@ babel-plugin-transform-es2015-block-scoping@^6.23.0:
 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"
@@ -613,6 +761,7 @@ babel-plugin-transform-es2015-classes@^6.23.0:
 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"
@@ -620,12 +769,14 @@ babel-plugin-transform-es2015-computed-properties@^6.22.0:
 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"
@@ -633,12 +784,14 @@ babel-plugin-transform-es2015-duplicate-keys@^6.22.0:
 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"
@@ -647,20 +800,23 @@ babel-plugin-transform-es2015-function-name@^6.22.0:
 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.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a"
+  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"
@@ -670,6 +826,7 @@ babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-e
 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"
@@ -678,6 +835,7 @@ babel-plugin-transform-es2015-modules-systemjs@^6.23.0:
 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"
@@ -686,6 +844,7 @@ babel-plugin-transform-es2015-modules-umd@^6.23.0:
 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"
@@ -693,6 +852,7 @@ babel-plugin-transform-es2015-object-super@^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"
@@ -704,6 +864,7 @@ babel-plugin-transform-es2015-parameters@^6.23.0:
 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"
@@ -711,12 +872,14 @@ babel-plugin-transform-es2015-shorthand-properties@^6.22.0:
 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"
@@ -725,18 +888,21 @@ babel-plugin-transform-es2015-sticky-regex@^6.22.0:
 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"
@@ -745,6 +911,7 @@ babel-plugin-transform-es2015-unicode-regex@^6.22.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"
@@ -753,6 +920,7 @@ babel-plugin-transform-exponentiation-operator@^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"
@@ -760,6 +928,7 @@ babel-plugin-transform-flow-strip-types@^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"
@@ -767,18 +936,21 @@ babel-plugin-transform-object-rest-spread@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"
@@ -786,6 +958,7 @@ babel-plugin-transform-react-jsx-self@6.22.0, babel-plugin-transform-react-jsx-s
 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"
@@ -793,6 +966,7 @@ babel-plugin-transform-react-jsx-source@6.22.0, babel-plugin-transform-react-jsx
 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"
@@ -801,18 +975,21 @@ babel-plugin-transform-react-jsx@6.24.1, babel-plugin-transform-react-jsx@^6.24.
 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"
@@ -820,6 +997,7 @@ babel-plugin-transform-strict-mode@^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"
@@ -855,18 +1033,21 @@ babel-preset-env@1.6.1:
 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.1:
+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"
@@ -885,6 +1066,7 @@ babel-preset-react-app@^3.1.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"
@@ -896,6 +1078,7 @@ babel-preset-react@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"
+  integrity sha1-btAhFz4vy0htestFxgCahW9kcHE=
   dependencies:
     babel-core "^6.26.0"
     babel-runtime "^6.26.0"
@@ -908,6 +1091,7 @@ babel-register@^6.26.0:
 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"
@@ -915,6 +1099,7 @@ babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtim
 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"
@@ -925,6 +1110,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0:
 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"
@@ -939,6 +1125,7 @@ babel-traverse@^6.18.0, babel-traverse@^6.23.1, babel-traverse@^6.24.1, babel-tr
 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"
@@ -948,73 +1135,115 @@ babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24
 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.2"
-  resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.2.tgz#f7d6c1731630a9f9f0d4d35ed1f962e2074a1764"
+  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.0"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
+  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.2.1"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.1.tgz#a91947da1f4a516ea38e5b4ec0ec3773675e0886"
+  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.1"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz#63bc5dcb61331b92bc05fd528953c33462a06f8d"
+  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.11.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.13.1.tgz#598afe54755b2868a5330d2aff9d4ebb53209b65"
+  integrity sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==
+
+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==
 
-block-stream@*:
-  version "0.0.9"
-  resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
+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:
-    inherits "~2.0.0"
+    file-uri-to-path "1.0.0"
 
 bluebird@^3.4.7:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+  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@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
+bn.js@^5.0.0, bn.js@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
 
-body-parser@1.18.2:
-  version "1.18.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.2.tgz#87678a19d84b47d859b83199bd59bce222b10454"
+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.0.0"
+    bytes "3.1.0"
     content-type "~1.0.4"
     debug "2.6.9"
-    depd "~1.1.1"
-    http-errors "~1.6.2"
-    iconv-lite "0.4.19"
+    depd "~1.1.2"
+    http-errors "1.7.2"
+    iconv-lite "0.4.24"
     on-finished "~2.3.0"
-    qs "6.5.1"
-    raw-body "2.3.2"
-    type-is "~1.6.15"
+    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"
@@ -1023,49 +1252,33 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
-boolbase@~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"
-
-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"
+  integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
 
 bowser@^1.7.3:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.1.tgz#f86ef2132e8cb10b3eb6ea5af018758c587020db"
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/bowser/-/bowser-1.9.4.tgz#890c58a2813a9d3243704334fa81b96a5c150c9a"
+  integrity sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ==
 
-boxen@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/boxen/-/boxen-0.6.0.tgz#8364d4248ac34ff0ef1b2f2bf49a6c60ce0d81b6"
+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 "^1.1.0"
-    camelcase "^2.1.0"
-    chalk "^1.1.1"
+    ansi-align "^2.0.0"
+    camelcase "^4.0.0"
+    chalk "^2.0.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"
+    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.8"
-  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.8.tgz#c07b211c7c952ec1f8efd51a77ef0d1d3990a292"
+  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"
@@ -1073,24 +1286,51 @@ brace-expansion@^1.0.0, brace-expansion@^1.1.7:
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
+  integrity sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=
   dependencies:
     expand-range "^1.8.1"
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
-brorand@^1.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=
 
 browser-resolve@^1.11.2:
-  version "1.11.2"
-  resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
+  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.1.1"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.1.1.tgz#38b7ab55edb806ff2dcda1a7f1620773a477c49f"
+  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"
@@ -1100,83 +1340,103 @@ browserify-aes@^1.0.0, browserify-aes@^1.0.4:
     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"
+  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.0"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.0.tgz#daa277717470922ed2fe18594118a175439721dd"
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
+  integrity sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==
   dependencies:
     cipher-base "^1.0.1"
     des.js "^1.0.0"
     inherits "^2.0.1"
+    safe-buffer "^5.1.2"
 
-browserify-rsa@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
+  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 "^4.1.0"
+    bn.js "^5.0.0"
     randombytes "^2.0.1"
 
 browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
 browserify-zlib@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
   dependencies:
     pako "~1.0.5"
 
 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.0"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.0.tgz#50350d6873a82ebe0f3ae5483658c571ae5f9d7d"
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2"
+  integrity sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==
   dependencies:
-    caniuse-lite "^1.0.30000784"
+    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.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
+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.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
+  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"
@@ -1185,32 +1445,67 @@ buffer@^4.3.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"
@@ -1218,6 +1513,7 @@ camel-case@3.0.x:
 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"
@@ -1225,22 +1521,27 @@ camelcase-keys@^2.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, camelcase@^2.1.0:
+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.1.0:
+camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
+  integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
 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"
@@ -1248,35 +1549,42 @@ caniuse-api@^1.5.2:
     lodash.uniq "^4.5.0"
 
 caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
-  version "1.0.30000789"
-  resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000789.tgz#5cf3fec75480041ab162ca06413153141e234325"
+  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.30000784:
-  version "1.0.30000789"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000789.tgz#2e3d937b267133f63635ef7f441fac66360fc889"
+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.0"
-  resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
+  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.0.0, chalk@^1.1.1, chalk@^1.1.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"
@@ -1284,56 +1592,78 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.3.0.tgz#b5ea48efc9c1793dccc9b4767c93914d3f2d52ba"
+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.1.0"
+    ansi-styles "^3.2.1"
     escape-string-regexp "^1.0.5"
-    supports-color "^4.0.0"
+    supports-color "^5.3.0"
 
 character-entities-legacy@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/character-entities-legacy/-/character-entities-legacy-1.1.1.tgz#f40779df1a101872bb510a3d295e1fccf147202f"
+  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.1"
-  resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.1.tgz#f76871be5ef66ddb7f8f8e3478ecc374c27d6dca"
+  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.1"
-  resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.1.tgz#942835f750e4ec61a308e60c2ef8cc1011202efc"
+  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@^1.6.0, chokidar@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.7.0.tgz#798e689778151c8076b4b360e5edd28cda2bb468"
+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 "^1.3.0"
-    async-each "^1.0.0"
-    glob-parent "^2.0.0"
-    inherits "^2.0.1"
+    anymatch "^2.0.0"
+    async-each "^1.0.1"
+    braces "^2.3.2"
+    glob-parent "^3.1.0"
+    inherits "^2.0.3"
     is-binary-path "^1.0.0"
-    is-glob "^2.0.0"
+    is-glob "^4.0.0"
+    normalize-path "^3.0.0"
     path-is-absolute "^1.0.0"
-    readdirp "^2.0.0"
+    readdirp "^2.2.1"
+    upath "^1.1.1"
   optionalDependencies:
-    fsevents "^1.0.0"
+    fsevents "^1.2.7"
 
-chownr@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181"
+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.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
+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"
@@ -1341,36 +1671,53 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
 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"
 
-clean-css@4.1.x:
-  version "4.1.9"
-  resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.1.9.tgz#35cee8ae7687a49b98034f70de00c4edd3826301"
+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.5.x"
+    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.0"
-  resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639"
+  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"
@@ -1379,52 +1726,75 @@ cliui@^2.1.0:
 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.3"
-  resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.3.tgz#298d7e2231660f40c003c2ed3140decf3f53085f"
+  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.3"
-  resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
+  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.1"
-  resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.1.tgz#c1261107aeb2f294ebffec9ed9ecad529a6097ed"
+  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.1"
+    color-name "1.1.3"
 
-color-name@^1.0.0, color-name@^1.1.1:
+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"
@@ -1433,6 +1803,7 @@ color@^0.11.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"
@@ -1441,126 +1812,165 @@ colormin@^1.0.5:
 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.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009"
+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.12.x, commander@~2.12.1:
-  version "2.12.2"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555"
+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=
 
-compressible@~2.0.11:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.12.tgz#c59a5c99db76767e9876500e271ef63b3493bd66"
+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.30.0 < 2"
+    mime-db ">= 1.43.0 < 2"
 
 compression@^1.5.2:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.1.tgz#eff2603efc2e22cf86f35d2eb93589f9875373db"
+  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.4"
+    accepts "~1.3.5"
     bytes "3.0.0"
-    compressible "~2.0.11"
+    compressible "~2.0.16"
     debug "2.6.9"
-    on-headers "~1.0.1"
-    safe-buffer "5.1.1"
+    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.0"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.0.tgz#0aac662fd52be78964d5532f694784e70110acf7"
+  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@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/configstore/-/configstore-2.1.0.tgz#737a3a7036e9886102aa6099e47bb33ab1aba1a1"
+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 "^3.0.0"
+    dot-prop "^4.2.1"
     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"
+    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.5.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.5.0.tgz#b06873934bc5e344fef611a196a6faae0aee015a"
+  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.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"
+  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.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4"
+content-disposition@0.5.3:
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
+  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+  dependencies:
+    safe-buffer "5.1.2"
 
 content-type-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:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
+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.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
+cookie@0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
+  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
+
+copy-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.5.3"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.3.tgz#8acc38345824f16d8365b7c9b4259168e8ed603e"
+  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"
@@ -1571,30 +1981,35 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     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"
+  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.0.0"
+    elliptic "^6.5.3"
 
-create-error-class@^3.0.1:
+create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
+  integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
   dependencies:
     capture-stack-trace "^1.0.0"
 
-create-hash@^1.1.0, create-hash@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.1.3.tgz#606042ac8b9262750f483caddab0f5819172d8fd"
+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"
-    ripemd160 "^2.0.0"
+    md5.js "^1.3.4"
+    ripemd160 "^2.0.1"
     sha.js "^2.4.0"
 
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.6.tgz#acb9e221a4e17bdb076e90657c42b93e3726cf06"
+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"
@@ -1606,26 +2021,16 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
 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"
 
-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"
+  integrity sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==
   dependencies:
     browserify-cipher "^1.0.0"
     browserify-sign "^4.0.0"
@@ -1639,19 +2044,28 @@ crypto-browserify@^3.11.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.0"
-  resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.0.tgz#5af1dd70f4b06b331f48d22a3d86e0786c0b9435"
+  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"
@@ -1668,34 +2082,38 @@ css-loader@0.28.7:
     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"
+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 "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
+    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.0"
-  resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.0.tgz#e6988474ae8c953477bf5e7efecfceccd9cf4c86"
+  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 "^0.1.0"
-    fastparse "^1.1.1"
-    regexpu-core "^1.0.0"
+    cssesc "^3.0.0"
+    fastparse "^1.1.2"
 
-css-what@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+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@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
+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"
@@ -1733,59 +2151,71 @@ cssesc@^0.1.0:
 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.2"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.2.tgz#b8036170c79f07a90ff2f16e22284027a243848b"
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
 "cssstyle@>= 0.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.1"
-  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
+  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.4"
-  resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
+  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.0.3"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"
+  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.3"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e"
+  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.2.2"
-  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.2.tgz#1a39c479c8a57fe5051b2e67a3bee27061a74e7a"
+  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.1.6"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.6.tgz#2cf395ae2381804df08aa1bf766b7f97b5f68fb6"
+  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.5"
-  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764"
+  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"
@@ -1796,101 +2226,145 @@ d3-scale@^1.0.0:
     d3-time-format "2"
 
 d3-shape@^1.0.0, d3-shape@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
+  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.1.1"
-  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.1.tgz#85b7cdfbc9ffca187f14d3c456ffda268081bb31"
+  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.0.8"
-  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.8.tgz#dbd2d6007bf416fe67a76d17947b784bffea1e84"
+  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.7"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"
+  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.2"
-  resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
+  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:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.0.tgz#754bb5bfe55451da69a58b94d45f4c5b0462d58f"
+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.9"
+    es5-ext "^0.10.50"
+    type "^1.0.1"
 
 damerau-levenshtein@^1.0.0:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
+  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"
 
-date-now@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
-
-debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.6.0, debug@^2.6.6, debug@^2.6.8, debug@^2.6.9:
+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:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+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.0.0"
+    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.0"
+  resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
+  integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
 deep-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
+  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"
-
-deep-extend@~0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.2.tgz#48b699c27e334bf89f10892be432f6e4c7d34a7f"
+  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.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.2.tgz#83a73f2fea569898fb737193c8f873caf6d45c94"
+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:
-    foreach "^2.0.5"
-    object-keys "^1.0.8"
+    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.0.2, del@^2.2.2:
+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"
@@ -1903,6 +2377,7 @@ del@^2.0.2, del@^2.2.2:
 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"
@@ -1914,18 +2389,17 @@ del@^3.0.0:
 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"
-
-depd@1.1.1, depd@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
+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.0"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
+  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"
@@ -1933,35 +2407,37 @@ des.js@^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-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
-
 detect-node@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
+  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.4.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.4.0.tgz#b1d85507daf3964828de54b37d0d73ba67dda56c"
+  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.2"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.2.tgz#b5835739270cfe26acf632099fded2a07f209e5e"
+  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"
@@ -1970,10 +2446,12 @@ diffie-hellman@^5.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.0.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.2.2.tgz#a8a26bec7646438963fc86e06f8f8b16d6c8bf7a"
+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"
@@ -1981,12 +2459,14 @@ dns-packet@^1.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"
@@ -1994,186 +2474,225 @@ doctrine@1.5.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.1:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.1.4.tgz#a45ef5727b890c9bffe6d7c876e7b19cb0e17f3b"
+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.3"
+    utila "~0.4"
 
 dom-serializer@0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
+  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 "~1.1.1"
-    entities "~1.1.1"
+    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.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"
+  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.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
+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==
 
-domhandler@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.1.0.tgz#d2646f5e57f6c3bab11cf6cb05d3c0acf7412594"
-  dependencies:
-    domelementtype "1"
+domelementtype@^2.0.1:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
-domutils@1.1:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.1.6.tgz#bddc3de099b9a2efacc51c623f28f416ecc57485"
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
   dependencies:
     domelementtype "1"
 
-domutils@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
+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@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
+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=
 
-duplexer2@^0.1.4:
+duplexer3@^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"
+  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"
+  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.1"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"
+  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"
-
-electron-releases@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/electron-releases/-/electron-releases-2.1.0.tgz#c5614bf811f176ce3c836e368a0625782341fd4e"
+  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
-  version "1.3.30"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.30.tgz#9666f532a64586651fc56a72513692e820d06a80"
-  dependencies:
-    electron-releases "^2.1.0"
+  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.0.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
+elliptic@^6.5.3:
+  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.4.0"
-    brorand "^1.0.1"
+    bn.js "^4.11.9"
+    brorand "^1.1.0"
     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"
+    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=
 
-encodeurl@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
+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.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
+  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.4.13"
+    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.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
+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==
 
-errno@^0.1.3, errno@^0.1.4:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.6.tgz#c386ce8a6283f14fc09563b71560908c9bf53026"
+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.1"
-  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.1.tgz#f855a86ce61adc4e8621c3cda21e7a7612c3a8dc"
+  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.7.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
+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:
-    es-to-primitive "^1.1.1"
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.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"
+    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.1"
+    is-callable "^1.1.4"
     is-date-object "^1.0.1"
-    is-symbol "^1.0.1"
+    is-symbol "^1.0.2"
 
-es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
-  version "0.10.37"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.37.tgz#0ee741d148b80069ba27d020393756af257defc3"
+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.1"
-    es6-symbol "~3.1.1"
+    es6-iterator "~2.0.3"
+    es6-symbol "~3.1.3"
+    next-tick "~1.0.0"
 
-es6-iterator@^2.0.1, es6-iterator@~2.0.1:
+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"
@@ -2182,6 +2701,7 @@ es6-iterator@^2.0.1, es6-iterator@~2.0.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"
@@ -2191,12 +2711,14 @@ es6-map@^0.1.3:
     event-emitter "~0.3.5"
 
 es6-promise@^4.0.5:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.2.2.tgz#f722d7769af88bd33bc13ec6605e1f92966b82d9"
+  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"
@@ -2204,44 +2726,58 @@ es6-set@~0.1.5:
     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:
+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.2"
-  resolved "https://registry.yarnpkg.com/es6-weak-map/-/es6-weak-map-2.0.2.tgz#5e3ab32251ffd1538a1f8e5ffa1357772f92d96f"
+  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.14"
-    es6-iterator "^2.0.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.9.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.9.0.tgz#9811a2f265dc1cd3894420ee3717064b632b8852"
+  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 "^3.1.3"
+    esprima "^4.0.1"
     estraverse "^4.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
-    source-map "~0.5.6"
+    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"
@@ -2251,17 +2787,20 @@ escope@^3.6.0:
 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.2"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.2.tgz#58f15fb839b8d0576ca980413476aab2472db66a"
+  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.5.0"
+    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"
@@ -2270,21 +2809,24 @@ eslint-loader@1.9.0:
     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"
+  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.8"
-    pkg-dir "^1.0.0"
+    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"
@@ -2300,6 +2842,7 @@ eslint-plugin-import@2.8.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"
@@ -2312,6 +2855,7 @@ eslint-plugin-jsx-a11y@5.1.1:
 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"
@@ -2319,8 +2863,9 @@ eslint-plugin-react@7.4.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"
+  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"
@@ -2328,6 +2873,7 @@ eslint-scope@^3.7.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"
@@ -2368,86 +2914,101 @@ eslint@4.10.0:
     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"
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
+  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
   dependencies:
-    acorn "^5.2.1"
+    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@^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"
+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.0.0"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.0.tgz#cfba8b57d7fba93f17298a8a006a04cda13d80fa"
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.4.0.tgz#2148ffc38b82e8c7057dfed48425b3e61f0f24a5"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
   dependencies:
-    estraverse "^4.0.0"
+    estraverse "^5.1.0"
 
 esrecurse@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.0.tgz#fa9568d98d3823f9a41d91e902dcab9ea6e5b163"
+  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 "^4.1.0"
-    object-assign "^4.0.1"
+    estraverse "^5.2.0"
 
-estraverse@^4.0.0, estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
+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.2"
-  resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b"
+  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@1.x.x:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-1.2.0.tgz#1c86991d816ad1e504750e73874224ecf3bec508"
+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"
+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.1"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.1.tgz#163b98a6e89e6b65b47c2a28d215bc1f63989c38"
+  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.1.3"
+    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"
@@ -2460,63 +3021,104 @@ execa@^0.7.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.13.3:
-  version "4.16.2"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.16.2.tgz#e35c6dfe2d64b7dca0a5cd4f21781be3299e076c"
+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.4"
+    accepts "~1.3.7"
     array-flatten "1.1.1"
-    body-parser "1.18.2"
-    content-disposition "0.5.2"
+    body-parser "1.19.0"
+    content-disposition "0.5.3"
     content-type "~1.0.4"
-    cookie "0.3.1"
+    cookie "0.4.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
-    depd "~1.1.1"
-    encodeurl "~1.0.1"
+    depd "~1.1.2"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.1.0"
+    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.2"
+    parseurl "~1.3.3"
     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"
+    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@^3.0.0, extend@~3.0.0, extend@~3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
+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.1.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.1.0.tgz#3d026a21b7f95b5726387d4200ac160d372c3b48"
+  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"
@@ -2525,12 +3127,28 @@ external-editor@^2.0.4:
 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"
@@ -2540,54 +3158,70 @@ extract-text-webpack-plugin@3.0.2:
 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.0.0"
-  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz#96256a3bc975595eb36d82e9929d060d893439ff"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
+  integrity sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ=
+
+fast-deep-equal@^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"
+  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:
+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.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.1.tgz#d1e2643b38a94d7583b479060e6c4affc94071f8"
+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.1"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.1.tgz#f0efe18c4f56e4f40afc7e06c719fd5ee6188f38"
+  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.0"
-  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.0.tgz#54e9abf7dfa2f26cd9b1636c588c1afc05de5d58"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
+  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
   dependencies:
-    bser "^2.0.0"
+    bser "2.1.1"
 
-fbjs@^0.8.12, fbjs@^0.8.16:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
+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"
@@ -2595,17 +3229,19 @@ fbjs@^0.8.12, fbjs@^0.8.16:
     object-assign "^4.1.0"
     promise "^7.1.1"
     setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
+    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"
@@ -2613,17 +3249,25 @@ file-entry-cache@^2.0.0:
 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"
@@ -2631,36 +3275,53 @@ fileset@^2.0.2:
 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.3"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-2.2.3.tgz#50b77dfd7e469bc7492470963699fe7a8485a723"
+  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 "^1.1.3"
+    randomatic "^3.0.0"
     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"
+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.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.0.tgz#ce0b6855b45853e791b2fcc680046d88253dd7f5"
+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.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
     on-finished "~2.3.0"
-    parseurl "~1.3.2"
-    statuses "~1.3.1"
+    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"
@@ -2669,6 +3330,7 @@ find-cache-dir@^0.1.1:
 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"
@@ -2677,6 +3339,7 @@ find-cache-dir@^1.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"
@@ -2684,67 +3347,77 @@ find-up@^1.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.0"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.0.tgz#d3030b32b38154f4e3b7e9c709f490f7ef97c481"
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-1.3.4.tgz#2c2ef77525cc2929007dfffa1dd314aa9c9dee6f"
+  integrity sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==
   dependencies:
     circular-json "^0.3.1"
-    del "^2.0.2"
     graceful-fs "^4.1.2"
+    rimraf "~2.6.2"
     write "^0.2.1"
 
 flatten@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
+  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.14.0"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.0.tgz#f5d260f95c5f8c105894491feee5dc8993b402fe"
+  integrity sha512-0vRwd7RKQBTt+mgu87mtYeofLFZpTas2S9zY+jIeuLJMNvudIgF52nr19q40HOwH5RrhWIPuj9puybzSJiRrVg==
 
-for-in@^1.0.1:
+for-in@^1.0.1, for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
+  integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
 for-own@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/for-own/-/for-own-0.1.5.tgz#5265c681a4f294dabbf17c9509b6763aa84510ce"
+  integrity sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=
   dependencies:
     for-in "^1.0.1"
 
-foreach@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99"
-
 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"
-  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"
+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.5"
+    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"
@@ -2753,6 +3426,7 @@ fs-extra@3.0.1:
 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"
@@ -2760,89 +3434,74 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-minipass@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
-  dependencies:
-    minipass "^2.2.1"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
-fsevents@^1.0.0:
-  version "1.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"
-
-fsevents@^1.1.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.4.tgz#f41dcb1af2582af3692da36fc55cbd8e1041c426"
-  dependencies:
-    nan "^2.9.2"
-    node-pre-gyp "^0.10.0"
-
-fstream-ignore@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/fstream-ignore/-/fstream-ignore-1.0.5.tgz#9c31dae34767018fe1d249b24dada67d092da105"
+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:
-    fstream "^1.0.0"
-    inherits "2"
-    minimatch "^3.0.0"
+    bindings "^1.5.0"
+    nan "^2.12.1"
 
-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"
+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.0.2, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
+  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-
-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"
+  integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
 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"
+  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"
@@ -2853,6 +3512,7 @@ glamor@^2.20.40:
 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"
@@ -2860,12 +3520,29 @@ glob-base@^0.3.0:
 glob-parent@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-2.0.0.tgz#81383d72db054fcccf5336daa902f182f6edbb28"
+  integrity sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=
   dependencies:
     is-glob "^2.0.0"
 
-glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.2.tgz#c19c9df9a028702d678612384a6552404c636d15"
+glob-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"
@@ -2874,9 +3551,17 @@ glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
     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"
@@ -2885,6 +3570,7 @@ global-modules@1.0.0, global-modules@^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"
@@ -2895,10 +3581,12 @@ global-prefix@^1.0.1:
 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"
@@ -2910,6 +3598,7 @@ globby@^5.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"
@@ -2917,178 +3606,195 @@ globby@^6.1.0:
     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"
+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.1"
-    duplexer2 "^0.1.4"
+    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"
-    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"
+    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"
+  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.0.11"
-  resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
+  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:
-    async "^1.4.0"
-    optimist "^0.6.1"
-    source-map "^0.4.4"
+    minimist "^1.2.5"
+    neo-async "^2.6.0"
+    source-map "^0.6.1"
+    wordwrap "^1.0.0"
   optionalDependencies:
-    uglify-js "^2.6"
-
-har-schema@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-1.0.5.tgz#d263135f43307c02c602afc8fe95970c0151369e"
+    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@~4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-4.2.1.tgz#33481d0f1bbff600dd203d75812a6a5fba002e2a"
+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 "^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"
+    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-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
+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@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.1.tgz#8461733f538b0837c9361e39a9ab9e9704dc2f28"
+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:
-    function-bind "^1.0.2"
+    get-value "^2.0.3"
+    has-values "^0.1.4"
+    isobject "^2.0.0"
 
-hash-base@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-2.0.2.tgz#66ea1d856db4e8a5470cadf6fce23ae5244ef2e1"
+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:
-    inherits "^2.0.1"
+    get-value "^2.0.6"
+    has-values "^1.0.0"
+    isobject "^3.0.0"
 
-hash-base@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
+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:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
+    is-number "^3.0.0"
+    kind-of "^4.0.0"
 
-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"
+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:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.0"
+    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"
+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:
-    boom "2.x.x"
-    cryptiles "2.x.x"
-    hoek "2.x.x"
-    sntp "1.x.x"
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
-hawk@~6.0.2:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/hawk/-/hawk-6.0.2.tgz#af4d914eb065f9b5ce4d9d11c1cb2126eecc3038"
+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:
-    boom "4.x.x"
-    cryptiles "3.x.x"
-    hoek "4.x.x"
-    sntp "2.x.x"
+    inherits "^2.0.3"
+    minimalistic-assert "^1.0.1"
 
-he@1.1.x:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+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.0:
+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"
 
-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"
+  integrity sha1-42w/LSyufXRqhX440Y1fMqeILbg=
   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"
+  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.5.0"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c"
+  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"
@@ -3096,35 +3802,39 @@ hpack.js@^2.1.6:
     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"
+  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.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
+  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.8"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700"
+  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.1.x"
-    commander "2.12.x"
-    he "1.1.x"
-    ncname "1.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.3.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"
@@ -3133,35 +3843,64 @@ html-webpack-plugin@2.29.0:
     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"
+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"
-    domhandler "2.1"
-    domutils "1.1"
-    readable-stream "1.0"
+    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.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"
+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.1"
+    depd "~1.1.2"
     inherits "2.0.3"
-    setprototypeof "1.0.3"
-    statuses ">= 1.3.1 < 2"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
+
+http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
 
-http-parser-js@>=0.4.0:
-  version "0.4.9"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.9.tgz#ea1a04fb64adff0242e9974f297dd4c3cad271e1"
+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"
@@ -3169,23 +3908,18 @@ http-proxy-middleware@~0.17.4:
     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"
+  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 "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"
+    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"
@@ -3194,48 +3928,58 @@ http-signature@~1.2.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.2"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
-
-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"
+  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.4:
-  version "0.4.23"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
+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.1.8"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
-
-ignore-walk@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
-  dependencies:
-    minimatch "^3.0.4"
+  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.7"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
+  integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-import-local@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-0.1.1.tgz#b1179572aacdc11c6a91009fb430dbcab5f668a8"
+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"
@@ -3243,43 +3987,52 @@ import-local@^0.1.1:
 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"
-
-indexof@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
+  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.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, 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.5"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
+  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"
@@ -3287,6 +4040,7 @@ inline-style-prefixer@^3.0.6:
 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"
@@ -3306,275 +4060,468 @@ inquirer@3.3.0, inquirer@^3.0.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.1.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
+  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.2"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360"
+  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.5.2:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.5.2.tgz#d4b505bde9946987ccf0fc58d9010ff9607e3fa0"
+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.1"
-  resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.1.tgz#c77079cc91d4efac775be1034bf2d243f95e6f08"
+  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.1"
-  resolved "https://registry.yarnpkg.com/is-alphanumerical/-/is-alphanumerical-1.0.1.tgz#dfb4aa4d1085e33bdb61c2dee9c80e9c6c19f53b"
+  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.1, is-callable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.3.tgz#86eb75392805ddc33af71c92a0eedf74ee7604b2"
+is-callable@^1.1.4, 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.1.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.1.0.tgz#247e4162e7860cebbdaf30b774d6b0ac7dcfe7a5"
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
+  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
+  dependencies:
+    ci-info "^1.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:
-    ci-info "^1.0.0"
+    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"
+  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.1"
-  resolved "https://registry.yarnpkg.com/is-decimal/-/is-decimal-1.0.1.tgz#f5fb6a94996ad9e8e3761fbfbd091f1fca8c4e82"
+  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.1:
+is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
+  integrity sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=
+
+is-extendable@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
+  integrity sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==
+  dependencies:
+    is-plain-object "^2.0.4"
 
 is-extglob@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
 
-is-extglob@^2.1.0:
+is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
 
 is-finite@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.0.2.tgz#cc6677695602be550ef11e8b4aa6305342b6d0aa"
-  dependencies:
-    number-is-nan "^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.1"
-  resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.1.tgz#6e084bbc92061fbb0971ec58b6ce6d404e24da69"
+  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.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.0.tgz#6477582b8214d602346094567003be8a9eac04dc"
+  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"
-
-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-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:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
+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:
-    has "^1.0.1"
+    call-bind "^1.0.2"
+    has-symbols "^1.0.1"
 
 is-resolvable@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4"
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
+  integrity sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==
 
 is-retry-allowed@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.1.0.tgz#11a060568b67339444033d0125a61a20d564fb34"
+  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.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
+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.1"
-  resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.1.tgz#9ae0176f3282b65457a1992cdb084f8a5f833e3b"
+  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:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.1.tgz#310db70f742d259a16a369202b51af84233310d9"
+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.1"
-  resolved "https://registry.yarnpkg.com/is-word-character/-/is-word-character-1.0.1.tgz#5a03fa1ea91ace8a6eb0c7cd770eb86d65c8befb"
+  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"
@@ -3582,77 +4529,87 @@ isomorphic-fetch@^2.1.1:
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
+  integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
 istanbul-api@^1.1.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-1.2.1.tgz#0c60a0515eb11c7d65c6b50bba2c6e999acd8620"
+  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.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"
+    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.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz#73bfb998885299415c93d38a3e9adf784a77a9da"
+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.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-hook/-/istanbul-lib-hook-1.1.0.tgz#8538d970372cb3716d53e55523dd54b557a8d89b"
+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.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"
+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.1.1"
+    istanbul-lib-coverage "^1.2.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"
+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.1.1"
+    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.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz#750578602435f28a0c04ee6d7d9e0f2960e62c1c"
+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.1.1"
+    istanbul-lib-coverage "^1.2.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"
+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"
@@ -3688,6 +4645,7 @@ jest-cli@^20.0.4:
 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"
@@ -3703,6 +4661,7 @@ jest-config@^20.0.4:
 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"
@@ -3712,10 +4671,12 @@ jest-diff@^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"
@@ -3724,6 +4685,7 @@ jest-environment-jsdom@^20.0.3:
 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"
@@ -3731,6 +4693,7 @@ jest-environment-node@^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"
@@ -3742,6 +4705,7 @@ jest-haste-map@^20.0.4:
 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"
@@ -3756,6 +4720,7 @@ jest-jasmine2@^20.0.4:
 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"
@@ -3763,6 +4728,7 @@ jest-matcher-utils@^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"
@@ -3772,6 +4738,7 @@ jest-matchers@^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"
@@ -3780,20 +4747,24 @@ jest-message-util@^20.0.3:
 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"
@@ -3802,6 +4773,7 @@ jest-resolve@^20.0.4:
 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"
@@ -3822,6 +4794,7 @@ jest-runtime@^20.0.4:
 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"
@@ -3833,6 +4806,7 @@ jest-snapshot@^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"
@@ -3845,6 +4819,7 @@ jest-util@^20.0.3:
 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"
@@ -3854,20 +4829,29 @@ jest-validate@^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.4.0"
-  resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.0.tgz#9e566fee624751a1d720c966cd6226d29d4025aa"
+  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.0, js-tokens@^3.0.2:
+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.10.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  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"
@@ -3875,6 +4859,7 @@ js-yaml@^3.4.3, js-yaml@^3.7.0, js-yaml@^3.9.1:
 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"
@@ -3882,10 +4867,12 @@ js-yaml@~3.7.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"
@@ -3910,60 +4897,85 @@ jsdom@^9.12.0:
 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.2"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
+  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"
@@ -3973,62 +4985,80 @@ jsprim@^1.2.2:
 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.0.1"
-  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
+  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.0.3"
+    array-includes "^3.1.1"
+    object.assign "^4.1.0"
 
 killable@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
+  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.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@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-2.0.0.tgz#56f8d6139620847b8017f8f1f4d78e211324168b"
+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 "^2.0.0"
+    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"
-
-lazy-req@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/lazy-req/-/lazy-req-1.1.0.tgz#bdaebead30f8d824039ce0ce149d4daa07ba1fac"
+  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"
@@ -4036,6 +5066,7 @@ levn@^0.3.0, levn@~0.3.0:
 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"
@@ -4046,6 +5077,7 @@ load-json-file@^1.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"
@@ -4053,19 +5085,22 @@ load-json-file@^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"
+  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"
+    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"
+  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"
@@ -4073,78 +5108,93 @@ loader-utils@^0.2.16:
     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"
+  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 "^3.1.3"
-    emojis-list "^2.0.0"
-    json5 "^0.5.0"
+    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:
+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.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
+  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._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"
+  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._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.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.4"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae"
+"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.6.0"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.0.tgz#ae0caa561111498c5ba13723d6fb631d24003934"
+  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.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
+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"
+    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"
@@ -4152,66 +5202,99 @@ loud-rejection@^1.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.0"
-  resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.0.tgz#4e3366b39e7f5457e35f1324bdf6f88d0bfc7306"
+  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.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55"
+  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"
 
-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"
+  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.1"
-  resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.1.tgz#1994df2d3af4811de59a6714934c2b2292734518"
+  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.2.17"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
+  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.4"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
+  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"
@@ -4219,6 +5302,7 @@ memory-fs@^0.4.0, memory-fs@~0.4.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"
@@ -4234,18 +5318,22 @@ meow@^3.3.0, meow@^3.7.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.1.3:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.0.tgz#7531e39d4949c281a66b8c5a6e0265e8b05894da"
+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"
@@ -4261,163 +5349,203 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     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.30.0 < 2":
-  version "1.32.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.32.0.tgz#485b3848b01a3cda5f968b4882c0771e58e09414"
-
-mime-db@~1.30.0:
-  version "1.30.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.30.0.tgz#74c643da2dd9d6a45399963465b26d5ca7d71f01"
+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.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"
+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.30.0"
+    mime-db "1.47.0"
 
-mime@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.4.1.tgz#121f9ebc49e3766f311a76e1fa1c8003c4b03aa6"
-
-mime@^1.4.1, mime@^1.5.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.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.1.0.tgz#e667783d92e89dbd342818b5230b9d62a672ad18"
+  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:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
+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.0, minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
+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@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"
-
-minipass@^2.2.1, minipass@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
+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==
 
-minizlib@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
+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:
-    minipass "^2.2.1"
+    for-in "^1.0.2"
+    is-extendable "^1.0.1"
 
-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"
+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 "0.0.8"
+    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.1"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.1.tgz#c5035defa9219d30640558a49298067352098060"
+  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.0.1"
-    thunky "^0.1.0"
+    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"
-
-nan@^2.3.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a"
-
-nan@^2.9.2:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.10.0.tgz#96d0cd610ebd58d4b4de9cc0c6828cda99c7548f"
+  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=
 
-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.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
+  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
 
-needle@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.1.tgz#b5e325bd3aae8c2678902fa296f729455d1d3a7d"
-  dependencies:
-    debug "^2.1.2"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
+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==
 
-negotiator@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
+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.6.33:
-  version "0.6.33"
-  resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
+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.1.0"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.1.0.tgz#5f94263d404f6e44767d726901fff05478d600df"
+  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"
@@ -4426,10 +5554,10 @@ node-libs-browser@^2.0.0:
     constants-browserify "^1.0.0"
     crypto-browserify "^3.11.0"
     domain-browser "^1.1.1"
-    events "^1.0.0"
+    events "^3.0.0"
     https-browserify "^1.0.0"
     os-browserify "^0.3.0"
-    path-browserify "0.0.0"
+    path-browserify "0.0.1"
     process "^0.11.10"
     punycode "^1.2.4"
     querystring-es3 "^0.2.0"
@@ -4440,306 +5568,321 @@ node-libs-browser@^2.0.0:
     timers-browserify "^2.0.4"
     tty-browserify "0.0.0"
     url "^0.11.0"
-    util "^0.10.3"
-    vm-browserify "0.0.4"
+    util "^0.11.0"
+    vm-browserify "^1.0.1"
 
 node-notifier@^5.0.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff"
+  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"
-    semver "^5.3.0"
-    shellwords "^0.1.0"
-    which "^1.2.12"
-
-node-pre-gyp@^0.10.0:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz#3070040716afdc778747b61b6887bf78880b80fc"
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4"
-
-node-pre-gyp@^0.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"
+    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.4.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
   dependencies:
     hosted-git-info "^2.1.4"
-    is-builtin-module "^1.0.0"
+    resolve "^1.10.0"
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.0, normalize-path@^2.0.1:
+normalize-path@^2.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-bundled@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.3.tgz#7e71703d973af3370a9591bafe3a63aca0be2308"
-
-npm-packlist@^1.1.6:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.11.tgz#84e8c683cbe7867d34b1d357d893ce29e28a02de"
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
+  integrity sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=
   dependencies:
     path-key "^2.0.0"
 
-npmlog@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  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"
+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.3"
-  resolved "https://registry.yarnpkg.com/nwmatcher/-/nwmatcher-1.4.3.tgz#64348e3b3d80f035b40ac11563d278f8b72db89c"
+  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, oauth-sign@~0.8.2:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
+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.2.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.2.0.tgz#e96af0e96981996a1d47f88ead8f74f1ebc4422b"
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-1.3.1.tgz#fde452098a951cb145f039bb7d455449ddc126df"
+  integrity sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==
 
-object-keys@^1.0.8:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"
+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.1"
-  resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.1.tgz#104124b6c602c6796881a042541d36db43a5264e"
+  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.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/on-headers/-/on-headers-1.0.1.tgz#928f5d0f470d49342651ea6794b0857c100693f7"
+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:
+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.1.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.1.0.tgz#72ce2306a17dbea58ff1041853352b4a8fc77519"
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
+  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
   dependencies:
     is-wsl "^1.1.0"
 
-optimist@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
-  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"
+  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.4"
+    fast-levenshtein "~2.0.6"
     levn "~0.3.0"
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
-    wordwrap "~1.0.0"
+    word-wrap "~1.2.3"
 
 original@>=0.0.5:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.0.tgz#9147f93fa1696d04be61e01bd50baeaca656bd3b"
+  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.0.x"
+    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.0, os-tmpdir@^1.0.1, os-tmpdir@~1.0.2:
+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"
+  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.2.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c"
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
+  integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
   dependencies:
     p-try "^1.0.0"
 
 p-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@^2.0.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/package-json/-/package-json-2.4.0.tgz#0d15bd67d1cbbddbb2ca222ff2edb86bcb31a8bb"
+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 "^5.0.0"
+    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.6"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
+  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:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
+  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 "^4.0.0"
+    asn1.js "^5.2.0"
     browserify-aes "^1.0.0"
-    create-hash "^1.1.0"
     evp_bytestokey "^1.0.0"
     pbkdf2 "^3.0.3"
+    safe-buffer "^5.1.1"
 
-parse-entities@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/parse-entities/-/parse-entities-1.1.1.tgz#8112d88471319f27abae4d64964b122fe4e1b890"
+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"
@@ -4751,73 +5894,98 @@ parse-entities@^1.0.2:
 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.1.0, parse-json@^2.2.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:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.2.tgz#fc289d4ed8993119460c156253262cdc8de65bf3"
+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==
 
-path-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.0.tgz#a0b870729aae214005b7d5032ec2cbbb0fb4451a"
+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:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.5.tgz#3c1adf871ea9cd6c9431b6ea2bd74a0ff055c4c1"
+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.7.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d"
+  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"
@@ -4826,12 +5994,14 @@ path-type@^1.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.0.14"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
+  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"
@@ -4839,59 +6009,75 @@ pbkdf2@^3.0.3:
     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"
+  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.13"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
+  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 "^1.5.2"
-    debug "^2.2.0"
-    mkdirp "0.5.x"
+    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"
@@ -4900,6 +6086,7 @@ postcss-calc@^5.2.0:
 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"
@@ -4908,6 +6095,7 @@ postcss-colormin@^2.1.8:
 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"
@@ -4915,50 +6103,57 @@ postcss-convert-values@^2.3.4:
 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.2"
-  resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.2.tgz#6d85862534d735ac420e4a85806e1f5d4286d84c"
+  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"
-    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"
+  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"
@@ -4968,6 +6163,7 @@ postcss-load-config@^1.2.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"
@@ -4975,6 +6171,7 @@ postcss-load-options@^1.2.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"
@@ -4982,6 +6179,7 @@ postcss-load-plugins@^2.3.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"
@@ -4991,6 +6189,7 @@ postcss-loader@2.0.8:
 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"
@@ -4999,12 +6198,14 @@ postcss-merge-idents@^2.1.5:
 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"
@@ -5015,10 +6216,12 @@ postcss-merge-rules@^2.0.3:
 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"
@@ -5027,6 +6230,7 @@ postcss-minify-font-values@^1.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"
@@ -5034,6 +6238,7 @@ postcss-minify-gradients@^1.0.1:
 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"
@@ -5043,6 +6248,7 @@ postcss-minify-params@^1.0.4:
 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"
@@ -5050,14 +6256,16 @@ postcss-minify-selectors@^2.0.4:
     postcss-selector-parser "^2.0.0"
 
 postcss-modules-extract-imports@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
+  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"
@@ -5065,6 +6273,7 @@ postcss-modules-local-by-default@^1.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"
@@ -5072,6 +6281,7 @@ postcss-modules-scope@^1.0.0:
 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"
@@ -5079,12 +6289,14 @@ postcss-modules-values@^1.1.0:
 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"
@@ -5094,6 +6306,7 @@ postcss-normalize-url@^3.0.7:
 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"
@@ -5101,6 +6314,7 @@ postcss-ordered-values@^2.1.0:
 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"
@@ -5108,12 +6322,14 @@ postcss-reduce-idents@^2.2.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"
@@ -5122,6 +6338,7 @@ postcss-reduce-transforms@^1.0.3:
 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"
@@ -5130,6 +6347,7 @@ postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
 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"
@@ -5139,18 +6357,21 @@ postcss-svgo@^2.1.1:
 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.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
+  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"
@@ -5159,6 +6380,7 @@ postcss-zindex@^2.0.1:
 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"
@@ -5166,127 +6388,162 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     supports-color "^3.2.3"
 
 postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.13:
-  version "6.0.16"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146"
+  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.3.0"
+    chalk "^2.4.1"
     source-map "^0.6.1"
-    supports-color "^5.1.0"
+    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.1"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.2.tgz#be89f82d81b1c86ec8fdfbc385045882727f93b6"
+  integrity sha512-EY5oDzmsX5wvuynAByrmY0P0hcp+QpnAKbJng2A2MPjVKXCxrDSUkzghVJ4ZGPIv+JC4gX8fPUWscC0RtjsWGw==
   dependencies:
-    renderkid "^2.0.1"
-    utila "~0.4"
+    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.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@~1.0.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
+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.0"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
+  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.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
+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:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
+    loose-envify "^1.4.0"
     object-assign "^4.1.1"
+    react-is "^16.8.1"
 
-proxy-addr@~2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
+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.5.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.0"
-  resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
+  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, punycode@^1.4.1:
+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.5.1, qs@~6.5.1:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
+qs@6.7.0:
+  version "6.7.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
+  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
-qs@~6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.4.0.tgz#13e26d28ad6b0ffaa91312cd3bf708ed351e7233"
+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"
@@ -5294,79 +6551,78 @@ query-string@^4.1.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@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"
+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@^1.1.3:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
+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 "^3.0.0"
-    kind-of "^4.0.0"
+    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.0.5"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79"
+  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.3"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.3.tgz#b96b7df587f01dd91726c418f30553b1418e3d62"
+  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.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.0.tgz#f49be6b487894ddc40dcc94a322f611092e00d5e"
+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.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.3.2.tgz#bcd60c77d3eb93cde0050295c3f379389bc88f89"
+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.0.0"
-    http-errors "1.6.2"
-    iconv-lite "0.4.19"
+    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, rc@^1.1.7:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.3.tgz#51575a900f8dd68381c710b4712c2154c3e2035b"
-  dependencies:
-    deep-extend "~0.4.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
-rc@^1.2.7:
+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.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-5.0.1.tgz#1f396e161fe44b595db1b186a40067289bf06613"
+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"
@@ -5380,37 +6636,60 @@ react-dev-utils@^5.0.1:
     inquirer "3.3.0"
     is-root "1.0.0"
     opn "5.2.0"
-    react-error-overlay "^4.0.0"
+    react-error-overlay "^4.0.1"
     recursive-readdir "2.2.1"
     shell-quote "1.6.1"
-    sockjs-client "1.1.4"
+    sockjs-client "1.1.5"
     strip-ansi "3.0.1"
     text-table "0.2.0"
 
-react-error-overlay@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
+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.2.0"
-  resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-3.2.0.tgz#0fec0629dda35887518559ea9e2cca3e761e24dc"
+  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:
-    prop-types "^15.6.0"
-    remark-parse "^4.0.0"
+    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.1.3"
+    unist-util-visit "^1.3.0"
     xtend "^4.0.1"
 
 react-scripts@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-1.1.4.tgz#d5c230e707918d6dd2d06f303b10f5222d017c88"
+  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.1"
+    babel-preset-react-app "^3.1.2"
     babel-runtime "6.26.0"
     case-sensitive-paths-webpack-plugin "2.1.1"
     chalk "1.1.3"
@@ -5434,28 +6713,30 @@ react-scripts@^1.1.4:
     postcss-loader "2.0.8"
     promise "8.0.1"
     raf "3.4.0"
-    react-dev-utils "^5.0.1"
+    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.9.4"
+    webpack-dev-server "2.11.3"
     webpack-manifest-plugin "1.3.2"
     whatwg-fetch "2.0.3"
   optionalDependencies:
     fsevents "^1.1.3"
 
-read-all-stream@^3.0.0:
-  version "3.1.0"
-  resolved "http://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"
+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:
-    pinkie-promise "^2.0.0"
-    readable-stream "^2.0.0"
+    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"
@@ -5463,6 +6744,7 @@ read-pkg-up@^1.0.1:
 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"
@@ -5470,6 +6752,7 @@ read-pkg-up@^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"
@@ -5478,50 +6761,61 @@ read-pkg@^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@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, readable-stream@^2.3.3:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c"
+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 "~1.0.6"
+    process-nextick-args "~2.0.0"
     safe-buffer "~5.1.1"
-    string_decoder "~1.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"
+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:
-    graceful-fs "^4.1.2"
-    minimatch "^3.0.2"
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
+readdirp@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
+  integrity sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==
+  dependencies:
+    graceful-fs "^4.1.11"
+    micromatch "^3.1.10"
     readable-stream "^2.0.2"
-    set-immediate-shim "^1.0.1"
+
+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"
@@ -5529,28 +6823,33 @@ redent@^1.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.2"
-  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.2.tgz#5a200bf92e0e37751752fe45b0ab330fd4b6be99"
+  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 "^0.4.2"
+    balanced-match "^1.0.0"
 
 regenerate@^1.2.1:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.3.3.tgz#0c336d3980553d755c39b586ae3b20aa49c82b7f"
+  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"
@@ -5559,28 +6858,39 @@ regenerator-transform@^0.10.0:
 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"
 
-regexpu-core@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
+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:
-    regenerate "^1.2.1"
-    regjsgen "^0.2.0"
-    regjsparser "^0.1.4"
+    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.3.1"
-  resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.3.1.tgz#fb0d3289ee0d9ada2cbb52af5dfe66cb070d3006"
+  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"
@@ -5588,26 +6898,31 @@ registry-auth-token@^3.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@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-4.0.0.tgz#99f1f049afac80382366e2e0d0bd55429dd45d8b"
+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"
@@ -5615,7 +6930,7 @@ remark-parse@^4.0.0:
     is-whitespace-character "^1.0.0"
     is-word-character "^1.0.0"
     markdown-escapes "^1.0.0"
-    parse-entities "^1.0.2"
+    parse-entities "^1.1.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
     trim "0.0.1"
@@ -5628,121 +6943,106 @@ remark-parse@^4.0.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=
 
-renderkid@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.1.tgz#898cabfc8bede4b7b91135a3ffd323e58c0db319"
+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 "^1.1.0"
-    dom-converter "~0.1"
-    htmlparser2 "~3.3.0"
+    css-select "^2.0.2"
+    dom-converter "^0.2"
+    htmlparser2 "^3.10.1"
+    lodash "^4.17.20"
     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"
+  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.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"
-
-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"
+  integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
 request@^2.79.0:
-  version "2.83.0"
-  resolved "https://registry.yarnpkg.com/request/-/request-2.83.0.tgz#ca0b65da02ed62935887808e6f510381034e3356"
+  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.6.0"
+    aws4 "^1.8.0"
     caseless "~0.12.0"
-    combined-stream "~1.0.5"
-    extend "~3.0.1"
+    combined-stream "~1.0.6"
+    extend "~3.0.2"
     forever-agent "~0.6.1"
-    form-data "~2.3.1"
-    har-validator "~5.0.3"
-    hawk "~6.0.2"
+    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.17"
-    oauth-sign "~0.8.2"
+    mime-types "~2.1.19"
+    oauth-sign "~0.9.0"
     performance-now "^2.1.0"
-    qs "~6.5.1"
-    safe-buffer "^5.1.1"
-    stringstream "~0.0.5"
-    tough-cookie "~2.3.3"
+    qs "~6.5.2"
+    safe-buffer "^5.1.2"
+    tough-cookie "~2.5.0"
     tunnel-agent "^0.6.0"
-    uuid "^3.1.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.x, requires-port@1.x.x, requires-port@~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"
@@ -5750,84 +7050,123 @@ resolve-dir@^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.3.2, resolve@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+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:
-    path-parse "^1.0.5"
+    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, 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"
+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.0.5"
+    glob "^7.1.3"
 
 ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.1.tgz#0f4584295c53a3628af7e6d79aca21ce57d1c6e7"
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
+  integrity sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==
   dependencies:
-    hash-base "^2.0.0"
+    hash-base "^3.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"
+  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.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.1.2:
+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.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", "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"
@@ -5837,57 +7176,73 @@ sane@~1.6.0:
     walker "~1.0.5"
     watch "~0.10.0"
 
-sax@^1.2.1, sax@^1.2.4, sax@~1.2.1:
+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.1"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-1.10.1.tgz#bf8cb7b83256c4551e31347c6311778db99eec52"
+  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.6.33"
+    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:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
+"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.16.1:
-  version "0.16.1"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3"
+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.1"
+    depd "~1.1.2"
     destroy "~1.0.4"
-    encodeurl "~1.0.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
     fresh "0.5.2"
-    http-errors "~1.6.2"
-    mime "1.4.1"
-    ms "2.0.0"
+    http-errors "~1.7.2"
+    mime "1.6.0"
+    ms "2.1.1"
     on-finished "~2.3.0"
-    range-parser "~1.2.0"
-    statuses "~1.3.1"
+    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"
@@ -5897,42 +7252,55 @@ serve-index@^1.7.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"
+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.1"
+    encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    parseurl "~1.3.2"
-    send "0.16.1"
+    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, set-blocking@~2.0.0:
+set-blocking@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
+  integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-immediate-shim@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
+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"
-
-setprototypeof@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
+  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.9"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
+  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"
@@ -5940,59 +7308,81 @@ sha.js@^2.4.0, sha.js@^2.4.8:
 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.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.2"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
+  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"
 
-slide@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/slide/-/slide-1.1.6.tgz#56eb027d65b4d2dce6cb2e2d32c4d4afc9e1d707"
+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"
 
-sntp@1.x.x:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-1.0.9.tgz#6541184cc90aeea6c6e7b35e2659082443c66198"
+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:
-    hoek "2.x.x"
+    kind-of "^3.2.0"
 
-sntp@2.x.x:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/sntp/-/sntp-2.1.0.tgz#2c6cec14fedc2222739caf9b5c3d85d1cc5a2cc8"
+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:
-    hoek "4.x.x"
+    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.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.1.4.tgz#5babe386b775e4cf14e7520911452654016c8b12"
+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"
@@ -6001,60 +7391,89 @@ sockjs-client@1.1.4:
     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"
+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 "^2.0.2"
+    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.0"
-  resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
+  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@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, 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.4.4:
-  version "0.4.4"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.4.4.tgz#eba4f5da9c0dc999de68032d8b4f76173652036b"
-  dependencies:
-    amdefine ">=0.0.4"
-
-source-map@^0.6.1, source-map@~0.6.1:
+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@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"
+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-license-ids "^1.0.2"
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
 
-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-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-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"
+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.0.20"
-  resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-2.0.20.tgz#735e72054c486b2354fe89e702256004a39ace4d"
+  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"
@@ -6067,6 +7486,7 @@ spdy-transport@^2.0.18:
 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"
@@ -6075,66 +7495,86 @@ spdy@^3.4.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.13.1"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.13.1.tgz#512df6da6287144316dc4c18fe1cf1d940739be3"
+  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"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-  optionalDependencies:
     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.0"
-  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.0.tgz#d20f9a616bb4f0c3b98b91922d25b640aa2bc425"
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/state-toggle/-/state-toggle-1.0.3.tgz#e123b16a88e143139b09c6852221bc9815917dfe"
+  integrity sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==
 
-"statuses@>= 1.3.1 < 2":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
+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.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.3.1.tgz#faf51b9eb74aaef3b3acf4ad5f61abf24cb7b93e"
+"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.1"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
+  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.7.2"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad"
+  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.2.6"
+    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"
@@ -6143,63 +7583,88 @@ string-width@^1.0.1, string-width@^1.0.2:
 string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
+  integrity sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==
   dependencies:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string_decoder@^1.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"
+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:
-    safe-buffer "~5.1.0"
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+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"
 
-stringstream@~0.0.4, stringstream@~0.0.5:
-  version "0.0.5"
-  resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878"
+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"
@@ -6207,28 +7672,33 @@ style-loader@0.19.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.0.0, supports-color@^4.2.1:
+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:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.1.0.tgz#058a021d1b619f7ddf3980d712ea3590ce7de3d5"
+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 "^2.0.0"
+    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"
@@ -6241,14 +7711,16 @@ svgo@^0.7.0:
 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.0"
-  resolved "https://registry.yarnpkg.com/sw-precache/-/sw-precache-5.2.0.tgz#eb6225ce580ceaae148194578a0ad01ab7ea199c"
+  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"
@@ -6259,70 +7731,49 @@ sw-precache@^5.1.1:
     mkdirp "^0.5.1"
     pretty-bytes "^4.0.2"
     sw-toolbox "^3.4.0"
-    update-notifier "^1.0.3"
+    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.2"
-  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6"
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
+  integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
 table@^4.0.1:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/table/-/table-4.0.2.tgz#a33447375391e766ad34d3486e6e2aedc84d2e36"
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/table/-/table-4.0.3.tgz#00b5e2b602f1794b9acaf9ca908a76386a7813bc"
+  integrity sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==
   dependencies:
-    ajv "^5.2.3"
-    ajv-keywords "^2.1.0"
+    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.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"
+  version "0.2.9"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.9.tgz#af2d8bbc9b04f74ee17af2b4d9048f807acd18a8"
+  integrity sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A==
 
-tar@^4:
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.4.tgz#ec8409fae9f665a4355cc3b4087d0820232bb8cd"
+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:
-    chownr "^1.0.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.3.3"
-    minizlib "^1.1.0"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.2"
+    execa "^0.7.0"
 
-test-exclude@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.1.1.tgz#4d84964b0966b0087ecc334a2ce002d3d9341e26"
+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"
@@ -6333,241 +7784,394 @@ test-exclude@^4.1.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@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/thunky/-/thunky-0.1.0.tgz#bf30146824e2b6e67b0f2d7a4ac8beb26908684e"
+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.0.0"
-  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.0.0.tgz#95c6a44530e15ba8d6f4a3ecb8c3a3fac46da357"
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-2.2.0.tgz#917e0a66905688790ec7bbbde04046259af83f57"
+  integrity sha512-zxke8goJQpBeEgD82CXABeMh0LSJcj7CXEd0OHOg45HgcofF7pxNwZm9+RknpxpDhwN4gFpySkApKfFYfRQnUA==
 
-timed-out@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-3.1.3.tgz#95860bfcc5c76c277f8f8326fd0f5b2e20eba217"
+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.4"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6"
+  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.6"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.6.tgz#c31748e55d210effc00fdcdc7d6e68d7d7bb9cec"
+  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.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"
+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:
-    punycode "^1.4.1"
+    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.0"
-  resolved "https://registry.yarnpkg.com/trim-trailing-lines/-/trim-trailing-lines-1.1.0.tgz#7aefbb7808df9d669f6da2e438cac8c46ada7684"
+  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.1"
-  resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.1.tgz#a9fd8b0394b0ae8fff82e0633a0a36ccad5b5f86"
+  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.15:
-  version "1.6.15"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.15.tgz#cab10fb4909e441c82842eafe1ad646c81804410"
+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.15"
+    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.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
+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.3.x, uglify-js@^3.0.13:
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.5.tgz#4c4143dfe08e8825746675cc49a6874a933b543e"
+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.12.1"
+    commander "~2.19.0"
     source-map "~0.6.1"
 
-uglify-js@^2.6, uglify-js@^2.8.29:
+uglify-js@^2.8.29:
   version "2.8.29"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
+  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"
 
-uid-number@^0.0.6:
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
+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.0"
-  resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.0.tgz#6b9aaedfbf73df1756ad9e316dd981885840cd7d"
+  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.1"
-    xtend "^4.0.1"
+    inherits "^2.0.0"
+    xtend "^4.0.0"
 
 unified@^6.1.5:
-  version "6.1.6"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-6.1.6.tgz#5ea7f807a0898f1f8acdeefe5f25faa010cc42b1"
+  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-function "^1.0.4"
     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"
-
-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"
+  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=
 
-unist-util-is@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.1.tgz#0c312629e3f960c66e931e812d3d80e77010947b"
+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.1"
-  resolved "https://registry.yarnpkg.com/unist-util-remove-position/-/unist-util-remove-position-1.1.1.tgz#5a85c1555fc1ba0c101b86707d15e50fa4c871bb"
+  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.1"
-  resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.1.tgz#3ccbdc53679eed6ecf3777dd7f5e3229c1b6aa3c"
+  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@^1.1.0, unist-util-visit@^1.1.3:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.3.0.tgz#41ca7c82981fd1ce6c762aac397fc24e35711444"
+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 "^2.1.1"
+    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.1"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
+  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=
 
-unzip-response@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"
+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"
 
-update-notifier@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-1.0.3.tgz#8f92c515482bd6831b7c93013e70f87552c7cf5a"
+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 "^0.6.0"
-    chalk "^1.0.0"
-    configstore "^2.0.0"
+    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 "^2.0.0"
-    lazy-req "^1.1.0"
+    latest-version "^3.0.0"
     semver-diff "^2.0.0"
-    xdg-basedir "^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.0"
-  resolved "https://registry.yarnpkg.com/urijs/-/urijs-1.19.0.tgz#d8aa284d0e7469703a6988ad045c4cbfdf08ada0"
+  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"
@@ -6576,178 +8180,211 @@ url-loader@0.6.2:
 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.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"
+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 "~1.0.0"
-    requires-port "~1.0.0"
+    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"
 
-util-deprecate@~1.0.1:
+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, util@^0.10.3:
+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"
 
-utila@~0.3:
-  version "0.3.3"
-  resolved "https://registry.yarnpkg.com/utila/-/utila-0.3.3.tgz#d7e8e7d7e309107092b05f8d9688824d633a4226"
+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@^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"
+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.1"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz#2804babe712ad3379459acfbe24746ab2c303fbc"
+  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 "~1.0.0"
-    spdx-expression-parse "~1.0.0"
+    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.1"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.1.tgz#37ad73c8ee417fb3d580e785312307d274847f22"
+  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.2"
-  resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-2.0.2.tgz#d3675c59c877498e492b4756ff65e4af1a752255"
+  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.0.0"
-  resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-1.0.0.tgz#a6adb0474ea400fa25d929f1d673abea6a17e359"
+  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.1.1:
-  version "25.1.1"
-  resolved "https://registry.yarnpkg.com/victory-chart/-/victory-chart-25.1.1.tgz#5b5d9bde802eea774f1105af6fb723d478717532"
+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.4"
-    victory-core "^21.0.4"
+    lodash "^4.17.5"
+    react-fast-compare "^1.0.0"
+    victory-core "^21.1.12"
 
-victory-core@^21.0.2, victory-core@^21.0.4:
-  version "21.0.4"
-  resolved "https://registry.yarnpkg.com/victory-core/-/victory-core-21.0.4.tgz#5ac6d495a43e5d95249c56973290b182ec607b4a"
+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.4"
+    lodash "^4.17.5"
+    react-fast-compare "^1.0.0"
 
-victory-pie@^14.0.1:
-  version "14.0.1"
-  resolved "https://registry.yarnpkg.com/victory-pie/-/victory-pie-14.0.1.tgz#53dff9e81696253c3da00f347d908d3ac1241c66"
+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.4"
-    victory-core "^21.0.2"
+    lodash "^4.17.5"
+    victory-core "^21.1.0"
 
 victory@^0.25.6:
-  version "0.25.6"
-  resolved "https://registry.yarnpkg.com/victory/-/victory-0.25.6.tgz#3b5b0a1d2a773caf75cc916e6ace9ad3d7d75024"
+  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.1.1"
-    victory-core "^21.0.4"
-    victory-pie "^14.0.1"
+    victory-chart "^25.2.0"
+    victory-core "^21.1.1"
+    victory-pie "^14.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"
+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.4.0"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.4.0.tgz#4a1472bcbb952bd0a9bb4036801f954dfb39faac"
+  version "1.7.5"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.5.tgz#1267e6c55e0b9b5be44c2023aed5437a2c26c453"
+  integrity sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==
   dependencies:
-    async "^2.1.2"
-    chokidar "^1.7.0"
     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.2"
-  resolved "https://registry.yarnpkg.com/wbuf/-/wbuf-1.7.2.tgz#d697b99f1f59512df2751be42769c1580b5801fe"
+  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.11.0:
+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"
@@ -6755,22 +8392,23 @@ webpack-dev-middleware@^1.11.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"
+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 "^1.6.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.13.3"
+    express "^4.16.2"
     html-entities "^1.2.0"
     http-proxy-middleware "~0.17.4"
-    import-local "^0.1.1"
+    import-local "^1.0.0"
     internal-ip "1.2.0"
     ip "^1.1.5"
     killable "^1.0.0"
@@ -6779,24 +8417,26 @@ webpack-dev-server@2.9.4:
     portfinder "^1.0.9"
     selfsigned "^1.9.1"
     serve-index "^1.7.2"
-    sockjs "0.3.18"
-    sockjs-client "1.1.4"
+    sockjs "0.3.19"
+    sockjs-client "1.1.5"
     spdy "^3.4.1"
-    strip-ansi "^3.0.1"
-    supports-color "^4.2.1"
-    webpack-dev-middleware "^1.11.0"
-    yargs "^6.6.0"
+    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.1.0"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
+  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"
@@ -6804,6 +8444,7 @@ webpack-sources@^1.0.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"
@@ -6829,29 +8470,40 @@ webpack@3.8.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"
+  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.4.0"
+    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"
+  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.3"
-  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3"
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
+  integrity sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==
   dependencies:
-    iconv-lite "0.4.19"
+    iconv-lite "0.4.24"
 
-whatwg-fetch@2.0.3, whatwg-fetch@>=0.10.0:
+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"
@@ -6859,59 +8511,74 @@ whatwg-url@^4.3.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:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"
+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"
 
-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"
+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 "^1.0.1"
+    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@~0.0.2:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-
-wordwrap@~1.0.0:
+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.5.2"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.2.tgz#32b312e5dc3d5d45d79ef44acc2587491cd729ae"
+  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.4"
-    xtend "^4.0.1"
+    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"
@@ -6919,80 +8586,80 @@ wrap-ansi@^2.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@^1.1.2:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-1.3.4.tgz#f807a4f0b1d9e913ae7a48112e6cc3af1991b45f"
+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"
-    slide "^1.1.5"
+    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-function@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/x-is-function/-/x-is-function-1.0.4.tgz#5d294dc3d268cbdd062580e0c5df77a391d1fa1e"
-
 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@^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"
+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.1"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
+  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.1"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
+  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"
-
-yallist@^3.0.0, yallist@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+  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.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
+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:
+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"
@@ -7009,8 +8676,9 @@ yargs@^6.6.0:
     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"
+  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"
@@ -7024,11 +8692,12 @@ yargs@^7.0.2:
     string-width "^1.0.2"
     which-module "^1.0.0"
     y18n "^3.2.1"
-    yargs-parser "^5.0.0"
+    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"
@@ -7047,6 +8716,7 @@ yargs@^8.0.2:
 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"

From fd907c1f153958950ba48db758cbd826d1e1af53 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 3 May 2021 13:34:19 -0500
Subject: [PATCH 0506/1603] Re-land "Use highest priority lane to detect
 interruptions (#21088)""

This re-lands commit b4044f8a07323bcad7d55cbaedc35c35b4acf7e0.
---
 packages/react-reconciler/src/ReactFiberLane.new.js | 11 ++++++-----
 packages/react-reconciler/src/ReactFiberLane.old.js | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index cdf5543c36e6..5a71b4ce489e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -301,15 +301,16 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     // bother waiting until the root is complete.
     (wipLanes & suspendedLanes) === NoLanes
   ) {
-    getHighestPriorityLanes(wipLanes);
-    const wipLanePriority = return_highestLanePriority;
+    const nextLane = getHighestPriorityLane(nextLanes);
+    const wipLane = getHighestPriorityLane(wipLanes);
     if (
-      nextLanePriority <= wipLanePriority ||
+      // 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.
-      (nextLanePriority === DefaultLanePriority &&
-        wipLanePriority === TransitionPriority)
+      (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 6ab7163cbb92..d3443dbe24d0 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -301,15 +301,16 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     // bother waiting until the root is complete.
     (wipLanes & suspendedLanes) === NoLanes
   ) {
-    getHighestPriorityLanes(wipLanes);
-    const wipLanePriority = return_highestLanePriority;
+    const nextLane = getHighestPriorityLane(nextLanes);
+    const wipLane = getHighestPriorityLane(wipLanes);
     if (
-      nextLanePriority <= wipLanePriority ||
+      // 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.
-      (nextLanePriority === DefaultLanePriority &&
-        wipLanePriority === TransitionPriority)
+      (nextLane === DefaultLane && (wipLane & TransitionLanes) !== NoLanes)
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;

From ab5b3792752385c7dcb5ad7ecd6bd9f0aa589f01 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 3 May 2021 13:34:19 -0500
Subject: [PATCH 0507/1603] Re-land "Clean up host pointers in level 2 of
 clean-up flag (#21112)"

This re-lands commit 8ed0c85bf174ce6e501be62d9ccec1889bbdbce1.
---
 .../src/ReactFiberCommitWork.new.js           | 21 +++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 21 +++++++++++--------
 2 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index bbd6f5692522..46f19294562c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1382,6 +1382,18 @@ function detachFiberAfterEffects(fiber: Fiber) {
     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;
+
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1400,15 +1412,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
-
-      // For host components, disconnect host instance -> fiber pointer.
-      if (fiber.tag === HostComponent) {
-        const hostInstance: Instance = fiber.stateNode;
-        if (hostInstance !== null) {
-          detachDeletedInstance(hostInstance);
-        }
-      }
-
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 40df79a1b852..f45a44083e23 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1382,6 +1382,18 @@ function detachFiberAfterEffects(fiber: Fiber) {
     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;
+
     // I'm intentionally not clearing the `return` field in this level. We
     // already disconnect the `return` pointer at the root of the deleted
     // subtree (in `detachFiberMutation`). Besides, `return` by itself is not
@@ -1400,15 +1412,6 @@ function detachFiberAfterEffects(fiber: Fiber) {
       // The purpose of this branch is to be super aggressive so we can measure
       // if there's any difference in memory impact. If there is, that could
       // indicate a React leak we don't know about.
-
-      // For host components, disconnect host instance -> fiber pointer.
-      if (fiber.tag === HostComponent) {
-        const hostInstance: Instance = fiber.stateNode;
-        if (hostInstance !== null) {
-          detachDeletedInstance(hostInstance);
-        }
-      }
-
       fiber.return = null;
       fiber.dependencies = null;
       fiber.memoizedProps = null;

From df420bc0a360ae443ec447ca87808d91975e6b82 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 3 May 2021 13:34:20 -0500
Subject: [PATCH 0508/1603] Re-land "Delete LanePriority type (#21090)"

This re-lands commit 26ddc63f2dcc8e7dcbacf498237a2bb1e28a7d23.
---
 .../src/ReactFiberLane.new.js                 | 76 -------------------
 .../src/ReactFiberLane.old.js                 | 76 -------------------
 2 files changed, 152 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 5a71b4ce489e..59e04b1865d4 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -11,25 +11,6 @@ import type {FiberRoot} from './ReactInternalTypes';
 
 // 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 LanePriority =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17;
 
 export type Lanes = number;
 export type Lane = number;
@@ -44,28 +25,6 @@ import {
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 
-export const SyncLanePriority: LanePriority = 12;
-
-const InputContinuousHydrationLanePriority: LanePriority = 11;
-export const InputContinuousLanePriority: LanePriority = 10;
-
-const DefaultHydrationLanePriority: LanePriority = 9;
-export const DefaultLanePriority: LanePriority = 8;
-
-const TransitionHydrationPriority: LanePriority = 7;
-export const TransitionPriority: LanePriority = 6;
-
-const RetryLanePriority: LanePriority = 5;
-
-const SelectiveHydrationLanePriority: LanePriority = 4;
-
-const IdleHydrationLanePriority: LanePriority = 3;
-export const IdleLanePriority: LanePriority = 2;
-
-const OffscreenLanePriority: LanePriority = 1;
-
-export const NoLanePriority: LanePriority = 0;
-
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
@@ -169,29 +128,19 @@ export const NoTimestamp = -1;
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
-// "Registers" used to "return" multiple values
-// Used by getHighestPriorityLanes and getNextLanes:
-let return_highestLanePriority: LanePriority = DefaultLanePriority;
-
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   switch (getHighestPriorityLane(lanes)) {
     case SyncLane:
-      return_highestLanePriority = SyncLanePriority;
       return SyncLane;
     case InputContinuousHydrationLane:
-      return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
     case InputContinuousLane:
-      return_highestLanePriority = InputContinuousLanePriority;
       return InputContinuousLane;
     case DefaultHydrationLane:
-      return_highestLanePriority = DefaultHydrationLanePriority;
       return DefaultHydrationLane;
     case DefaultLane:
-      return_highestLanePriority = DefaultLanePriority;
       return DefaultLane;
     case TransitionHydrationLane:
-      return_highestLanePriority = TransitionHydrationPriority;
       return TransitionHydrationLane;
     case TransitionLane1:
     case TransitionLane2:
@@ -209,26 +158,20 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
-      return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
-      return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
-      return_highestLanePriority = SelectiveHydrationLanePriority;
       return SelectiveHydrationLane;
     case IdleHydrationLane:
-      return_highestLanePriority = IdleHydrationLanePriority;
       return IdleHydrationLane;
     case IdleLane:
-      return_highestLanePriority = IdleLanePriority;
       return IdleLane;
     case OffscreenLane:
-      return_highestLanePriority = OffscreenLanePriority;
       return OffscreenLane;
     default:
       if (__DEV__) {
@@ -237,7 +180,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
         );
       }
       // This shouldn't be reachable, but as a fallback, return the entire bitmask.
-      return_highestLanePriority = DefaultLanePriority;
       return lanes;
   }
 }
@@ -246,12 +188,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
   if (pendingLanes === NoLanes) {
-    return_highestLanePriority = NoLanePriority;
     return NoLanes;
   }
 
   let nextLanes = NoLanes;
-  let nextLanePriority = NoLanePriority;
 
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
@@ -263,12 +203,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
     if (nonIdleUnblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
       if (nonIdlePingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   } else {
@@ -276,11 +214,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const unblockedLanes = pendingLanes & ~suspendedLanes;
     if (unblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(unblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       if (pingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(pingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   }
@@ -314,8 +250,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
-    } else {
-      return_highestLanePriority = nextLanePriority;
     }
   }
 
@@ -511,9 +445,6 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
-export function returnNextLanesPriority() {
-  return return_highestLanePriority;
-}
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
@@ -623,13 +554,6 @@ export function higherPriorityLane(a: Lane, b: Lane) {
   return a !== NoLane && a < b ? a : b;
 }
 
-export function higherLanePriority(
-  a: LanePriority,
-  b: LanePriority,
-): LanePriority {
-  return a !== NoLanePriority && 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
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index d3443dbe24d0..458d3ec6290e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -11,25 +11,6 @@ import type {FiberRoot} from './ReactInternalTypes';
 
 // 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 LanePriority =
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
-  | 13
-  | 14
-  | 15
-  | 16
-  | 17;
 
 export type Lanes = number;
 export type Lane = number;
@@ -44,28 +25,6 @@ import {
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 
-export const SyncLanePriority: LanePriority = 12;
-
-const InputContinuousHydrationLanePriority: LanePriority = 11;
-export const InputContinuousLanePriority: LanePriority = 10;
-
-const DefaultHydrationLanePriority: LanePriority = 9;
-export const DefaultLanePriority: LanePriority = 8;
-
-const TransitionHydrationPriority: LanePriority = 7;
-export const TransitionPriority: LanePriority = 6;
-
-const RetryLanePriority: LanePriority = 5;
-
-const SelectiveHydrationLanePriority: LanePriority = 4;
-
-const IdleHydrationLanePriority: LanePriority = 3;
-export const IdleLanePriority: LanePriority = 2;
-
-const OffscreenLanePriority: LanePriority = 1;
-
-export const NoLanePriority: LanePriority = 0;
-
 // Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
@@ -169,29 +128,19 @@ export const NoTimestamp = -1;
 let nextTransitionLane: Lane = TransitionLane1;
 let nextRetryLane: Lane = RetryLane1;
 
-// "Registers" used to "return" multiple values
-// Used by getHighestPriorityLanes and getNextLanes:
-let return_highestLanePriority: LanePriority = DefaultLanePriority;
-
 function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
   switch (getHighestPriorityLane(lanes)) {
     case SyncLane:
-      return_highestLanePriority = SyncLanePriority;
       return SyncLane;
     case InputContinuousHydrationLane:
-      return_highestLanePriority = InputContinuousHydrationLanePriority;
       return InputContinuousHydrationLane;
     case InputContinuousLane:
-      return_highestLanePriority = InputContinuousLanePriority;
       return InputContinuousLane;
     case DefaultHydrationLane:
-      return_highestLanePriority = DefaultHydrationLanePriority;
       return DefaultHydrationLane;
     case DefaultLane:
-      return_highestLanePriority = DefaultLanePriority;
       return DefaultLane;
     case TransitionHydrationLane:
-      return_highestLanePriority = TransitionHydrationPriority;
       return TransitionHydrationLane;
     case TransitionLane1:
     case TransitionLane2:
@@ -209,26 +158,20 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
     case TransitionLane14:
     case TransitionLane15:
     case TransitionLane16:
-      return_highestLanePriority = TransitionPriority;
       return lanes & TransitionLanes;
     case RetryLane1:
     case RetryLane2:
     case RetryLane3:
     case RetryLane4:
     case RetryLane5:
-      return_highestLanePriority = RetryLanePriority;
       return lanes & RetryLanes;
     case SelectiveHydrationLane:
-      return_highestLanePriority = SelectiveHydrationLanePriority;
       return SelectiveHydrationLane;
     case IdleHydrationLane:
-      return_highestLanePriority = IdleHydrationLanePriority;
       return IdleHydrationLane;
     case IdleLane:
-      return_highestLanePriority = IdleLanePriority;
       return IdleLane;
     case OffscreenLane:
-      return_highestLanePriority = OffscreenLanePriority;
       return OffscreenLane;
     default:
       if (__DEV__) {
@@ -237,7 +180,6 @@ function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
         );
       }
       // This shouldn't be reachable, but as a fallback, return the entire bitmask.
-      return_highestLanePriority = DefaultLanePriority;
       return lanes;
   }
 }
@@ -246,12 +188,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // Early bailout if there's no pending work left.
   const pendingLanes = root.pendingLanes;
   if (pendingLanes === NoLanes) {
-    return_highestLanePriority = NoLanePriority;
     return NoLanes;
   }
 
   let nextLanes = NoLanes;
-  let nextLanePriority = NoLanePriority;
 
   const suspendedLanes = root.suspendedLanes;
   const pingedLanes = root.pingedLanes;
@@ -263,12 +203,10 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const nonIdleUnblockedLanes = nonIdlePendingLanes & ~suspendedLanes;
     if (nonIdleUnblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(nonIdleUnblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       const nonIdlePingedLanes = nonIdlePendingLanes & pingedLanes;
       if (nonIdlePingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(nonIdlePingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   } else {
@@ -276,11 +214,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     const unblockedLanes = pendingLanes & ~suspendedLanes;
     if (unblockedLanes !== NoLanes) {
       nextLanes = getHighestPriorityLanes(unblockedLanes);
-      nextLanePriority = return_highestLanePriority;
     } else {
       if (pingedLanes !== NoLanes) {
         nextLanes = getHighestPriorityLanes(pingedLanes);
-        nextLanePriority = return_highestLanePriority;
       }
     }
   }
@@ -314,8 +250,6 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
     ) {
       // Keep working on the existing in-progress tree. Do not interrupt.
       return wipLanes;
-    } else {
-      return_highestLanePriority = nextLanePriority;
     }
   }
 
@@ -511,9 +445,6 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
-export function returnNextLanesPriority() {
-  return return_highestLanePriority;
-}
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
@@ -623,13 +554,6 @@ export function higherPriorityLane(a: Lane, b: Lane) {
   return a !== NoLane && a < b ? a : b;
 }
 
-export function higherLanePriority(
-  a: LanePriority,
-  b: LanePriority,
-): LanePriority {
-  return a !== NoLanePriority && 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

From 098600c42addca272bcb833bf55f53a65126e8aa Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 3 May 2021 13:34:21 -0500
Subject: [PATCH 0509/1603] Re-land "Fix: flushSync changes priority inside
 effect (#21122)"

This re-lands commit 0e3c7e1d62efb6238b69e5295d45b9bd2dcf9181.
---
 .../src/ReactFiberWorkLoop.new.js             | 22 +++----
 .../src/ReactFiberWorkLoop.old.js             | 22 +++----
 .../src/__tests__/ReactFlushSync-test.js      | 64 +++++++++++++++++++
 3 files changed, 86 insertions(+), 22 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactFlushSync-test.js

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 68a811e3fe08..7c659b7775a1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1142,16 +1142,6 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
 
 export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
-  if ((prevExecutionContext & (RenderContext | CommitContext)) !== NoContext) {
-    if (__DEV__) {
-      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.',
-      );
-    }
-    return fn(a);
-  }
   executionContext |= BatchedContext;
 
   const previousPriority = getCurrentUpdatePriority();
@@ -1168,7 +1158,17 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
     // the stack.
-    flushSyncCallbacks();
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      flushSyncCallbacks();
+    } else {
+      if (__DEV__) {
+        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.',
+        );
+      }
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 729e8e6717d0..530646f8a4d2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1142,16 +1142,6 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
 
 export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
-  if ((prevExecutionContext & (RenderContext | CommitContext)) !== NoContext) {
-    if (__DEV__) {
-      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.',
-      );
-    }
-    return fn(a);
-  }
   executionContext |= BatchedContext;
 
   const previousPriority = getCurrentUpdatePriority();
@@ -1168,7 +1158,17 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
     // the stack.
-    flushSyncCallbacks();
+    if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
+      flushSyncCallbacks();
+    } else {
+      if (__DEV__) {
+        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.',
+        );
+      }
+    }
   }
 }
 
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 000000000000..f763e44705aa
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -0,0 +1,64 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let useState;
+let useEffect;
+
+describe('ReactFlushSync', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useEffect = React.useEffect;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  // @gate experimental || !enableSyncDefaultUpdates
+  test('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);
+          ReactNoop.flushSync(() => setSyncState(1));
+        }
+      }, [syncState, state]);
+      return <Text text={`${syncState}, ${state}`} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.unstable_startTransition(() => {
+          root.render(<App />);
+        });
+      } else {
+        root.render(<App />);
+      }
+      // This will yield right before the passive effect fires
+      expect(Scheduler).toFlushUntilNextPaint(['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.
+      expect(() => {
+        expect(Scheduler).toFlushUntilNextPaint(['1, 0']);
+      }).toErrorDev('flushSync was called from inside a lifecycle method');
+
+      // The remaining update is not sync
+      ReactNoop.flushSync();
+      expect(Scheduler).toHaveYielded([]);
+
+      // Now flush it.
+      expect(Scheduler).toFlushUntilNextPaint(['1, 1']);
+    });
+    expect(root).toMatchRenderedOutput('1, 1');
+  });
+});

From bacc87068a5818b597f5cd9938ce0ce205cab53b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 3 May 2021 13:34:22 -0500
Subject: [PATCH 0510/1603] Re-land "Flush discrete passive effects before
 paint (#21150)"

This re-lands commit 2e7aceeb5c8b6e5c61174c0e9731e263e956e445.
---
 .../src/ReactFiberWorkLoop.new.js             | 15 ++++
 .../src/ReactFiberWorkLoop.old.js             | 15 ++++
 .../src/__tests__/ReactFlushSync-test.js      | 69 +++++++++++++++++++
 .../ReactHooksWithNoopRenderer-test.js        |  7 +-
 4 files changed, 104 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7c659b7775a1..99f3e014148f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1976,6 +1976,21 @@ function commitRootImpl(root, renderPriorityLevel) {
     return null;
   }
 
+  // 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 (
+    includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
+    root.tag !== LegacyRoot
+  ) {
+    flushPassiveEffects();
+  }
+
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 530646f8a4d2..e7328b989083 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1976,6 +1976,21 @@ function commitRootImpl(root, renderPriorityLevel) {
     return null;
   }
 
+  // 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 (
+    includesSomeLane(pendingPassiveEffectsLanes, SyncLane) &&
+    root.tag !== LegacyRoot
+  ) {
+    flushPassiveEffects();
+  }
+
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index f763e44705aa..327b4a87ca67 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -61,4 +61,73 @@ describe('ReactFlushSync', () => {
     });
     expect(root).toMatchRenderedOutput('1, 1');
   });
+
+  test('flushes passive effects synchronously when they are the result of a sync render', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Child',
+        // Because the pending effect was the result of a sync update, calling
+        // flushSync should flush it.
+        'Effect',
+      ]);
+      expect(root).toMatchRenderedOutput('Child');
+    });
+  });
+
+  test('do not flush passive effects synchronously in legacy mode', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createLegacyRoot();
+    await ReactNoop.act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded([
+        'Child',
+        // Because we're in legacy mode, we shouldn't have flushed the passive
+        // effects yet.
+      ]);
+      expect(root).toMatchRenderedOutput('Child');
+    });
+    // Effect flushes after paint.
+    expect(Scheduler).toHaveYielded(['Effect']);
+  });
+
+  test("do not flush passive effects synchronously when they aren't the result of a sync render", async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+      expect(Scheduler).toFlushUntilNextPaint([
+        'Child',
+        // Because the passive effect was not the result of a sync update, it
+        // should not flush before paint.
+      ]);
+      expect(root).toMatchRenderedOutput('Child');
+    });
+    // Effect flushes after paint.
+    expect(Scheduler).toHaveYielded(['Effect']);
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index a02c64067195..27d09697fc21 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -32,6 +32,7 @@ let useDeferredValue;
 let forwardRef;
 let memo;
 let act;
+let ContinuousEventPriority;
 
 describe('ReactHooksWithNoopRenderer', () => {
   beforeEach(() => {
@@ -55,6 +56,8 @@ describe('ReactHooksWithNoopRenderer', () => {
     useDeferredValue = React.unstable_useDeferredValue;
     Suspense = React.Suspense;
     act = ReactNoop.act;
+    ContinuousEventPriority = require('react-reconciler/constants')
+      .ContinuousEventPriority;
 
     textCache = new Map();
 
@@ -1397,10 +1400,10 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(Scheduler).toFlushAndYieldThrough(['Child one render']);
 
         // Schedule unmount for the parent that unmounts children with pending update.
-        ReactNoop.flushSync(() => {
+        ReactNoop.unstable_runWithPriority(ContinuousEventPriority, () => {
           setParentState(false);
         });
-        expect(Scheduler).toHaveYielded([
+        expect(Scheduler).toFlushUntilNextPaint([
           'Parent false render',
           'Parent false commit',
         ]);

From aea7c2aab18f2c288a1fcab0cf7a14560b5db35e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 3 May 2021 13:34:23 -0500
Subject: [PATCH 0511/1603] Re-land "Support nesting of startTransition and
 flushSync (alt) (#21149)"

This re-lands commit faa1e127f1ba755da846bc6ce299cdefaf97721f.
---
 .../src/events/ReactDOMEventListener.js       |  6 +++
 .../src/ReactFiberWorkLoop.new.js             | 22 ++++++++++
 .../src/ReactFiberWorkLoop.old.js             | 22 ++++++++++
 .../src/__tests__/ReactFlushSync-test.js      | 43 +++++++++++++++++++
 4 files changed, 93 insertions(+)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 590d8c2d9f5b..81b3a1b85dce 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -49,6 +49,9 @@ import {
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
 // TODO: can we stop exporting these?
 export let _enabled = true;
@@ -125,11 +128,14 @@ function dispatchContinuousEvent(
   nativeEvent,
 ) {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
+  ReactCurrentBatchConfig.transition = 0;
   try {
     setCurrentUpdatePriority(ContinuousEventPriority);
     dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 99f3e014148f..0b15fb13a235 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -245,6 +245,7 @@ const ceil = Math.ceil;
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
+  ReactCurrentBatchConfig,
   IsSomeRendererActing,
 } = ReactSharedInternals;
 
@@ -1062,11 +1063,14 @@ export function flushDiscreteUpdates() {
 
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
@@ -1110,11 +1114,14 @@ export function discreteUpdates<A, B, C, D, R>(
   d: D,
 ): R {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       resetRenderTimer();
     }
@@ -1144,8 +1151,10 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
@@ -1154,6 +1163,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1175,12 +1185,15 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1675,10 +1688,13 @@ function commitRoot(root) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
+    ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
@@ -1800,6 +1816,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
+    const prevTransition = ReactCurrentBatchConfig.transition;
+    ReactCurrentBatchConfig.transition = 0;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -1881,6 +1899,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     // Reset the priority to the previous non-sync value.
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   } else {
     // No effects.
     root.current = finishedWork;
@@ -2017,12 +2036,15 @@ export function flushPassiveEffects(): boolean {
   if (rootWithPendingPassiveEffects !== null) {
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
+    const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
+      ReactCurrentBatchConfig.transition = 0;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdatePriority(previousPriority);
+      ReactCurrentBatchConfig.transition = prevTransition;
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index e7328b989083..7b03e4cc743d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -245,6 +245,7 @@ const ceil = Math.ceil;
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
+  ReactCurrentBatchConfig,
   IsSomeRendererActing,
 } = ReactSharedInternals;
 
@@ -1062,11 +1063,14 @@ export function flushDiscreteUpdates() {
 
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   }
 }
 
@@ -1110,11 +1114,14 @@ export function discreteUpdates<A, B, C, D, R>(
   d: D,
 ): R {
   const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     if (executionContext === NoContext) {
       resetRenderTimer();
     }
@@ -1144,8 +1151,10 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn(a);
@@ -1154,6 +1163,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1175,12 +1185,15 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
+  const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
 
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {
@@ -1675,10 +1688,13 @@ function commitRoot(root) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
   try {
+    ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, previousUpdateLanePriority);
   } finally {
+    ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
   }
 
@@ -1800,6 +1816,8 @@ function commitRootImpl(root, renderPriorityLevel) {
     NoFlags;
 
   if (subtreeHasEffects || rootHasEffect) {
+    const prevTransition = ReactCurrentBatchConfig.transition;
+    ReactCurrentBatchConfig.transition = 0;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -1881,6 +1899,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
     // Reset the priority to the previous non-sync value.
     setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
   } else {
     // No effects.
     root.current = finishedWork;
@@ -2017,12 +2036,15 @@ export function flushPassiveEffects(): boolean {
   if (rootWithPendingPassiveEffects !== null) {
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
+    const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
+      ReactCurrentBatchConfig.transition = 0;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
       setCurrentUpdatePriority(previousPriority);
+      ReactCurrentBatchConfig.transition = prevTransition;
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index 327b4a87ca67..a3df1effd7b3 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -3,6 +3,7 @@ let ReactNoop;
 let Scheduler;
 let useState;
 let useEffect;
+let startTransition;
 
 describe('ReactFlushSync', () => {
   beforeEach(() => {
@@ -13,6 +14,7 @@ describe('ReactFlushSync', () => {
     Scheduler = require('scheduler');
     useState = React.useState;
     useEffect = React.useEffect;
+    startTransition = React.unstable_startTransition;
   });
 
   function Text({text}) {
@@ -62,6 +64,47 @@ describe('ReactFlushSync', () => {
     expect(root).toMatchRenderedOutput('1, 1');
   });
 
+  // @gate experimental
+  test('nested 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 root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['0, 0']);
+    expect(root).toMatchRenderedOutput('0, 0');
+
+    await ReactNoop.act(async () => {
+      ReactNoop.flushSync(() => {
+        startTransition(() => {
+          // This should be async even though flushSync is on the stack, because
+          // startTransition is closer.
+          setState(1);
+          ReactNoop.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
+      expect(Scheduler).toHaveYielded(['1, 0']);
+      expect(root).toMatchRenderedOutput('1, 0');
+    });
+    // Now the async update has flushed, too.
+    expect(Scheduler).toHaveYielded(['1, 1']);
+    expect(root).toMatchRenderedOutput('1, 1');
+  });
+
   test('flushes passive effects synchronously when they are the result of a sync render', async () => {
     function App() {
       useEffect(() => {

From 15fb8c3045064e13e81706a36bf0e4e419803c97 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 May 2021 16:57:03 -0400
Subject: [PATCH 0512/1603] createRoot API is no longer strict by default
 (#21417)

---
 .../src/__tests__/ReactTestUtilsAct-test.js   |  14 +-
 packages/react-dom/src/client/ReactDOMRoot.js |   6 -
 .../react-native-renderer/src/ReactFabric.js  |   2 +-
 .../src/ReactNativeRenderer.js                |   2 +-
 .../src/createReactNoop.js                    |   4 +-
 .../react-reconciler/src/ReactFiber.new.js    |  18 +-
 .../react-reconciler/src/ReactFiber.old.js    |  18 +-
 .../src/ReactFiberReconciler.new.js           |   2 -
 .../src/ReactFiberReconciler.old.js           |   2 -
 .../src/ReactFiberRoot.new.js                 |   2 -
 .../src/ReactFiberRoot.old.js                 |   2 -
 .../__tests__/DebugTracing-test.internal.js   |   2 -
 .../ReactHooksWithNoopRenderer-test.js        |  27 +--
 .../src/__tests__/ReactIncremental-test.js    | 221 ++++++------------
 ...tIncrementalErrorHandling-test.internal.js |  11 +-
 .../ReactIncrementalReflection-test.js        |  24 +-
 .../ReactIncrementalSideEffects-test.js       |   4 +-
 .../__tests__/ReactIncrementalUpdates-test.js |   7 +-
 .../src/__tests__/ReactNewContext-test.js     |  11 +-
 .../useMutableSource-test.internal.js         |   7 +-
 .../src/ReactTestRenderer.js                  |   6 -
 .../ReactStrictMode-test.internal.js          |  48 +---
 .../src/__tests__/ReactStrictMode-test.js     |  50 ++--
 .../react/src/__tests__/forwardRef-test.js    |  28 +--
 24 files changed, 148 insertions(+), 370 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 6ce9981fde92..8419c93c38c4 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -97,16 +97,10 @@ describe('ReactTestUtils.act()', () => {
     });
 
     // @gate experimental
-    it('warns in concurrent mode', () => {
-      expect(() => {
-        const root = ReactDOM.unstable_createRoot(
-          document.createElement('div'),
-        );
-        root.render(<App />);
-        Scheduler.unstable_flushAll();
-      }).toErrorDev([
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
+    it('does not warn in concurrent mode', () => {
+      const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+      root.render(<App />);
+      Scheduler.unstable_flushAll();
     });
   });
 });
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 0a78f61ad097..73e96eb086bb 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -27,7 +27,6 @@ export type RootOptions = {
     mutableSources?: Array<MutableSource<any>>,
     ...
   },
-  unstable_strictModeLevel?: number,
   unstable_concurrentUpdatesByDefault?: boolean,
   ...
 };
@@ -123,10 +122,6 @@ function createRootImpl(
       options.hydrationOptions != null &&
       options.hydrationOptions.mutableSources) ||
     null;
-  const strictModeLevelOverride =
-    options != null && options.unstable_strictModeLevel != null
-      ? options.unstable_strictModeLevel
-      : null;
 
   let concurrentUpdatesByDefaultOverride = null;
   if (allowConcurrentByDefault) {
@@ -141,7 +136,6 @@ function createRootImpl(
     tag,
     hydrate,
     hydrationCallbacks,
-    strictModeLevelOverride,
     concurrentUpdatesByDefaultOverride,
   );
   markContainerAsRoot(root.current, container);
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index b319cb22c7b7..9f1f44f51cf4 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -207,7 +207,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 4f7337732037..de42c6e41a58 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -203,7 +203,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 9d2c87621bce..659f4d63fcc0 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -722,7 +722,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (!root) {
         const container = {rootID: rootID, pendingChildren: [], children: []};
         rootContainers.set(rootID, container);
-        root = NoopRenderer.createContainer(container, tag, false, null, null);
+        root = NoopRenderer.createContainer(container, tag, false, null);
         roots.set(rootID, root);
       }
       return root.current.stateNode.containerInfo;
@@ -740,7 +740,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         ConcurrentRoot,
         false,
         null,
-        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -767,7 +766,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         LegacyRoot,
         false,
         null,
-        null,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index c883079028a5..fcb757b96a65 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -422,27 +422,13 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
 export function createHostRootFiber(
   tag: RootTag,
-  strictModeLevelOverride: null | number,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
     mode = ConcurrentMode;
-    if (strictModeLevelOverride !== null) {
-      if (strictModeLevelOverride >= 1) {
-        mode |= StrictLegacyMode;
-      }
-      if (enableStrictEffects) {
-        if (strictModeLevelOverride >= 2) {
-          mode |= StrictEffectsMode;
-        }
-      }
-    } else {
-      if (enableStrictEffects && createRootStrictEffectsByDefault) {
-        mode |= StrictLegacyMode | StrictEffectsMode;
-      } else {
-        mode |= StrictLegacyMode;
-      }
+    if (enableStrictEffects && createRootStrictEffectsByDefault) {
+      mode |= StrictLegacyMode | StrictEffectsMode;
     }
     if (
       // We only use this flag for our repo tests to check both behaviors.
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index e33c0e7cd835..50947ff94c8a 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -422,27 +422,13 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
 export function createHostRootFiber(
   tag: RootTag,
-  strictModeLevelOverride: null | number,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
     mode = ConcurrentMode;
-    if (strictModeLevelOverride !== null) {
-      if (strictModeLevelOverride >= 1) {
-        mode |= StrictLegacyMode;
-      }
-      if (enableStrictEffects) {
-        if (strictModeLevelOverride >= 2) {
-          mode |= StrictEffectsMode;
-        }
-      }
-    } else {
-      if (enableStrictEffects && createRootStrictEffectsByDefault) {
-        mode |= StrictLegacyMode | StrictEffectsMode;
-      } else {
-        mode |= StrictLegacyMode;
-      }
+    if (enableStrictEffects && createRootStrictEffectsByDefault) {
+      mode |= StrictLegacyMode | StrictEffectsMode;
     }
     if (
       // We only use this flag for our repo tests to check both behaviors.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index f53a24e86c60..b19223db377a 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -248,7 +248,6 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
-  strictModeLevelOverride: null | number,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
@@ -256,7 +255,6 @@ export function createContainer(
     tag,
     hydrate,
     hydrationCallbacks,
-    strictModeLevelOverride,
     concurrentUpdatesByDefaultOverride,
   );
 }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 00c12b3406df..fe528b8316c8 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -248,7 +248,6 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
-  strictModeLevelOverride: null | number,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
@@ -256,7 +255,6 @@ export function createContainer(
     tag,
     hydrate,
     hydrationCallbacks,
-    strictModeLevelOverride,
     concurrentUpdatesByDefaultOverride,
   );
 }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index d2efcc5851d4..ae62134de1bc 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -98,7 +98,6 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
-  strictModeLevelOverride: null | number,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
@@ -110,7 +109,6 @@ export function createFiberRoot(
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
     tag,
-    strictModeLevelOverride,
     concurrentUpdatesByDefaultOverride,
   );
   root.current = uninitializedFiber;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 68d329492cf1..83d4de95b6a8 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -98,7 +98,6 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
-  strictModeLevelOverride: null | number,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
@@ -110,7 +109,6 @@ export function createFiberRoot(
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
     tag,
-    strictModeLevelOverride,
     concurrentUpdatesByDefaultOverride,
   );
   root.current = uninitializedFiber;
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 83fc6b2eba89..c3dc4df1cf6f 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -282,7 +282,6 @@ describe('DebugTracing', () => {
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
-      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
       `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
     ]);
   });
@@ -366,7 +365,6 @@ describe('DebugTracing', () => {
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`,
-      `log: ⚛️ Example updated state (${DEFAULT_LANE_STRING})`, // debugRenderPhaseSideEffectsForStrictMode
       `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
     ]);
   });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 27d09697fc21..6758d9d4dc17 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -520,11 +520,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           </>,
         );
         expect(() =>
-          expect(Scheduler).toFlushAndYield(
-            __DEV__
-              ? ['Foo [0]', 'Bar', 'Foo [2]']
-              : ['Foo [0]', 'Bar', 'Foo [1]'],
-          ),
+          expect(Scheduler).toFlushAndYield(['Foo [0]', 'Bar', 'Foo [1]']),
         ).toErrorDev([
           'Cannot update a component (`Foo`) while rendering a ' +
             'different component (`Bar`). To locate the bad setState() call inside `Bar`',
@@ -539,11 +535,7 @@ describe('ReactHooksWithNoopRenderer', () => {
             <Bar triggerUpdate={true} />
           </>,
         );
-        expect(Scheduler).toFlushAndYield(
-          __DEV__
-            ? ['Foo [2]', 'Bar', 'Foo [4]']
-            : ['Foo [1]', 'Bar', 'Foo [2]'],
-        );
+        expect(Scheduler).toFlushAndYield(['Foo [1]', 'Bar', 'Foo [2]']);
       });
     });
 
@@ -1765,16 +1757,11 @@ describe('ReactHooksWithNoopRenderer', () => {
         return <Text text={'Count: ' + count} />;
       }
 
-      // we explicitly wait for missing act() warnings here since
-      // it's a lot harder to simulate this condition inside an act scope
-      expect(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      }).toErrorDev(['An update to Counter ran an effect']);
-
+      ReactNoop.render(<Counter count={0} />, () =>
+        Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
+      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
       // A flush sync doesn't cause the passive effects to fire.
       // So we haven't added the other update yet.
       act(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
index e505d1e243fa..efcb4d728887 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -1863,18 +1863,11 @@ describe('ReactIncremental', () => {
         </div>
       </Intl>,
     );
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([
-        'Intl {}',
-        'ShowLocale {"locale":"fr"}',
-        'ShowBoth {"locale":"fr"}',
-      ]),
-    ).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Intl, ShowBoth, ShowLocale',
-    );
+    expect(Scheduler).toFlushAndYield([
+      'Intl {}',
+      'ShowLocale {"locale":"fr"}',
+      'ShowBoth {"locale":"fr"}',
+    ]);
 
     ReactNoop.render(
       <Intl locale="de">
@@ -1921,28 +1914,21 @@ describe('ReactIncremental', () => {
         <ShowBoth />
       </Intl>,
     );
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([
-        '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"}',
-      ]),
-    ).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Router, ShowRoute',
-    );
+    expect(Scheduler).toFlushAndYield([
+      '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"}',
+    ]);
   });
 
   it('does not leak own context into context provider', () => {
@@ -1968,19 +1954,12 @@ describe('ReactIncremental', () => {
     }
 
     ReactNoop.render(<Recurse />);
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([
-        'Recurse {}',
-        'Recurse {"n":2}',
-        'Recurse {"n":1}',
-        'Recurse {"n":0}',
-      ]),
-    ).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Recurse',
-    );
+    expect(Scheduler).toFlushAndYield([
+      'Recurse {}',
+      'Recurse {"n":2}',
+      'Recurse {"n":1}',
+      'Recurse {"n":0}',
+    ]);
   });
 
   if (!require('shared/ReactFeatureFlags').disableModulePatternComponents) {
@@ -2020,10 +1999,6 @@ describe('ReactIncremental', () => {
           "If you can't use a class try assigning the prototype on the function as a workaround. " +
           '`Recurse.prototype = React.Component.prototype`. ' +
           "Don't use an arrow function since it cannot be called with `new` by React.",
-        'Legacy context API has been detected within a strict-mode tree.\n\n' +
-          'The old API will be supported in all 16.x releases, but applications ' +
-          'using it should migrate to the new version.\n\n' +
-          'Please update the following components: Recurse',
       ]);
     });
   }
@@ -2092,18 +2067,11 @@ describe('ReactIncremental', () => {
       'ShowLocale {"locale":"fr"}',
     ]);
 
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([
-        'ShowLocale {"locale":"fr"}',
-        'Intl {}',
-        'ShowLocale {"locale":"ru"}',
-      ]),
-    ).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Intl, ShowLocale',
-    );
+    expect(Scheduler).toFlushAndYield([
+      'ShowLocale {"locale":"fr"}',
+      'Intl {}',
+      'ShowLocale {"locale":"ru"}',
+    ]);
   });
 
   it('reads context when setState is below the provider', () => {
@@ -2186,21 +2154,14 @@ describe('ReactIncremental', () => {
         </IndirectionFn>
       </Intl>,
     );
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([
-        'Intl:read {}',
-        'Intl:provide {"locale":"fr"}',
-        'IndirectionFn {}',
-        'IndirectionClass {}',
-        'ShowLocaleClass:read {"locale":"fr"}',
-        'ShowLocaleFn:read {"locale":"fr"}',
-      ]),
-    ).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn',
-    );
+    expect(Scheduler).toFlushAndYield([
+      'Intl:read {}',
+      'Intl:provide {"locale":"fr"}',
+      'IndirectionFn {}',
+      'IndirectionClass {}',
+      'ShowLocaleClass:read {"locale":"fr"}',
+      'ShowLocaleFn:read {"locale":"fr"}',
+    ]);
 
     statefulInst.setState({x: 1});
     expect(Scheduler).toFlushWithoutYielding();
@@ -2287,21 +2248,14 @@ describe('ReactIncremental', () => {
         </IndirectionFn>
       </Stateful>,
     );
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([
-        'Intl:read {}',
-        'Intl:provide {"locale":"fr"}',
-        'IndirectionFn {}',
-        'IndirectionClass {}',
-        'ShowLocaleClass:read {"locale":"fr"}',
-        'ShowLocaleFn:read {"locale":"fr"}',
-      ]),
-    ).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn',
-    );
+    expect(Scheduler).toFlushAndYield([
+      'Intl:read {}',
+      'Intl:provide {"locale":"fr"}',
+      'IndirectionFn {}',
+      'IndirectionClass {}',
+      'ShowLocaleClass:read {"locale":"fr"}',
+      'ShowLocaleFn:read {"locale":"fr"}',
+    ]);
 
     statefulInst.setState({locale: 'gr'});
     expect(Scheduler).toFlushAndYield([
@@ -2356,12 +2310,7 @@ describe('ReactIncremental', () => {
 
     // Init
     ReactNoop.render(<Root />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Child',
-    );
+    expect(Scheduler).toFlushWithoutYielding();
 
     // Trigger an update in the middle of the tree
     instance.setState({});
@@ -2407,12 +2356,7 @@ describe('ReactIncremental', () => {
 
     // Init
     ReactNoop.render(<Root />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: ContextProvider',
-    );
+    expect(Scheduler).toFlushWithoutYielding();
 
     // Trigger an update in the middle of the tree
     // This is necessary to reproduce the error as it currently exists.
@@ -2454,27 +2398,16 @@ describe('ReactIncremental', () => {
     }
 
     ReactNoop.render(<MyComponent />);
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([
-        'render',
-        'componentDidMount',
-        'shouldComponentUpdate',
-        'render',
-        'componentDidUpdate',
-        'shouldComponentUpdate',
-        'render',
-        'componentDidUpdate',
-      ]),
-    ).toErrorDev(
-      [
-        'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
-        'Legacy context API has been detected within a strict-mode tree.\n\n' +
-          'The old API will be supported in all 16.x releases, but applications ' +
-          'using it should migrate to the new version.\n\n' +
-          'Please update the following components: MyComponent',
-      ],
-      {withoutStack: 1},
-    );
+    expect(Scheduler).toFlushAndYield([
+      'render',
+      'componentDidMount',
+      'shouldComponentUpdate',
+      'render',
+      'componentDidUpdate',
+      'shouldComponentUpdate',
+      'render',
+      'componentDidUpdate',
+    ]);
   });
 
   xit('should reuse memoized work if pointers are updated before calling lifecycles', () => {
@@ -2604,12 +2537,7 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() => expect(Scheduler).toFlushAndYield(['count:0'])).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Child, TopContextProvider',
-    );
+    expect(Scheduler).toFlushAndYield(['count:0']);
     instance.updateCount();
     expect(Scheduler).toFlushAndYield(['count:1']);
   });
@@ -2664,12 +2592,7 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() => expect(Scheduler).toFlushAndYield(['count:0'])).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
-    );
+    expect(Scheduler).toFlushAndYield(['count:0']);
     instance.updateCount();
     expect(Scheduler).toFlushAndYield(['count:1']);
   });
@@ -2733,12 +2656,7 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() => expect(Scheduler).toFlushAndYield(['count:0'])).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
-    );
+    expect(Scheduler).toFlushAndYield(['count:0']);
     instance.updateCount();
     expect(Scheduler).toFlushWithoutYielding();
   });
@@ -2814,14 +2732,7 @@ describe('ReactIncremental', () => {
       </TopContextProvider>,
     );
 
-    expect(() =>
-      expect(Scheduler).toFlushAndYield(['count:0, name:brian']),
-    ).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but applications ' +
-        'using it should migrate to the new version.\n\n' +
-        'Please update the following components: Child, MiddleContextProvider, TopContextProvider',
-    );
+    expect(Scheduler).toFlushAndYield(['count:0, name:brian']);
     topInstance.updateCount();
     expect(Scheduler).toFlushWithoutYielding();
     middleInstance.updateName('not brian');
@@ -2933,7 +2844,11 @@ describe('ReactIncremental', () => {
           return this.state.didError ? null : <Thing />;
         }
       }
-      ReactNoop.render(<Boundary />);
+      ReactNoop.render(
+        <React.StrictMode>
+          <Boundary />
+        </React.StrictMode>,
+      );
       expect(() => {
         expect(Scheduler).toFlushWithoutYielding();
       }).toErrorDev([
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 186085c84302..d26a433b6fa5 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1286,12 +1286,7 @@ describe('ReactIncrementalErrorHandling', () => {
         <Connector />
       </Provider>,
     );
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
-      'Legacy context API has been detected within a strict-mode tree.\n\n' +
-        'The old API will be supported in all 16.x releases, but ' +
-        'applications using it should migrate to the new version.\n\n' +
-        'Please update the following components: Connector, Provider',
-    );
+    expect(Scheduler).toFlushWithoutYielding();
 
     // If the context stack does not unwind, span will get 'abcde'
     expect(ReactNoop.getChildren()).toEqual([span('a')]);
@@ -1843,10 +1838,6 @@ describe('ReactIncrementalErrorHandling', () => {
           "If you can't use a class try assigning the prototype on the function as a workaround. " +
           '`Provider.prototype = React.Component.prototype`. ' +
           "Don't use an arrow function since it cannot be called with `new` by React.",
-        'Legacy context API has been detected within a strict-mode tree.\n\n' +
-          'The old API will be supported in all 16.x releases, but ' +
-          'applications using it should migrate to the new version.\n\n' +
-          'Please update the following components: Provider',
       ]);
     });
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
index b372bc8fce25..def901c153a9 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
@@ -78,12 +78,7 @@ describe('ReactIncrementalReflection', () => {
     expect(instances[0]._isMounted()).toBe(false);
 
     // Render the rest and commit the updates.
-    expect(() =>
-      expect(Scheduler).toFlushAndYield(['componentDidMount: true']),
-    ).toErrorDev(
-      'Using UNSAFE_componentWillMount in strict mode is not recommended',
-      {withoutStack: true},
-    );
+    expect(Scheduler).toFlushAndYield(['componentDidMount: true']);
 
     expect(instances[0]._isMounted()).toBe(true);
   });
@@ -120,12 +115,7 @@ describe('ReactIncrementalReflection', () => {
     }
 
     ReactNoop.render(<Foo mount={true} />);
-    expect(() =>
-      expect(Scheduler).toFlushAndYield(['Component']),
-    ).toErrorDev(
-      'Using UNSAFE_componentWillMount in strict mode is not recommended',
-      {withoutStack: true},
-    );
+    expect(Scheduler).toFlushAndYield(['Component']);
 
     expect(instances[0]._isMounted()).toBe(true);
 
@@ -238,15 +228,7 @@ describe('ReactIncrementalReflection', () => {
     // not find any host nodes in it.
     expect(findInstance(classInstance)).toBe(null);
 
-    expect(() =>
-      expect(Scheduler).toFlushAndYield([['componentDidMount', span()]]),
-    ).toErrorDev(
-      [
-        'Using UNSAFE_componentWillMount in strict mode is not recommended',
-        'Using UNSAFE_componentWillUpdate in strict mode is not recommended',
-      ],
-      {withoutStack: true},
-    );
+    expect(Scheduler).toFlushAndYield([['componentDidMount', span()]]);
 
     const hostSpan = classInstance.span;
     expect(hostSpan).toBeDefined();
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
index 32d4699318a1..fd819eeb32b4 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -1308,9 +1308,7 @@ describe('ReactIncrementalSideEffects', () => {
     }
 
     ReactNoop.render(<Foo />);
-    expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
-      'Warning: A string ref, "bar", has been found within a strict mode tree.',
-    );
+    expect(Scheduler).toFlushWithoutYielding();
 
     expect(fooInstance.refs.bar.test).toEqual('test');
   });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index 991937ee37fa..a3fcf9dc7011 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -402,12 +402,7 @@ describe('ReactIncrementalUpdates', () => {
       }
     }
     ReactNoop.render(<Foo />);
-    expect(() =>
-      expect(Scheduler).toFlushAndYield(['render']),
-    ).toErrorDev(
-      'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended',
-      {withoutStack: true},
-    );
+    expect(Scheduler).toFlushAndYield(['render']);
 
     ReactNoop.flushSync(() => {
       instance.setState({a: 'a'});
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index 5c338f01db8e..f81a2131e0b9 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -953,14 +953,7 @@ describe('ReactNewContext', () => {
           </App>
         </LegacyProvider>,
       );
-      expect(() => {
-        expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']);
-      }).toErrorDev(
-        'Legacy context API has been detected within a strict-mode tree.\n\n' +
-          'The old API will be supported in all 16.x releases, but applications ' +
-          'using it should migrate to the new version.\n\n' +
-          'Please update the following components: LegacyProvider',
-      );
+      expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']);
       expect(ReactNoop.getChildren()).toEqual([span('Child')]);
 
       // Update App with same value (should bail out)
@@ -1244,8 +1237,6 @@ describe('ReactNewContext', () => {
 
       ReactNoop.render(<Cls />);
       expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev([
-        'Context can only be read while React is rendering',
-        // A second warning comes from to setStates being added to the queue.
         'Context can only be read while React is rendering',
         'Cannot update during an existing state transition',
       ]);
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index fbd81d957649..5cc884d57fa5 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -1836,9 +1836,14 @@ describe('useMutableSource', () => {
           return null;
         }
 
+        // TODO The mechanism for this type of detection relies on StrictMode double rendering.
         expect(() => {
           act(() => {
-            ReactNoop.render(<MutateDuringRead />);
+            ReactNoop.render(
+              <React.StrictMode>
+                <MutateDuringRead />
+              </React.StrictMode>,
+            );
           });
         }).toThrow(
           'A mutable source was mutated while the MutateDuringRead component ' +
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 7c64a1693600..bc46f1d6d182 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -58,7 +58,6 @@ const {IsSomeRendererActing} = ReactSharedInternals;
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isConcurrent: boolean,
-  unstable_strictModeLevel: number,
   unstable_concurrentUpdatesByDefault: boolean,
   ...
 };
@@ -437,7 +436,6 @@ function propsMatch(props: Object, filter: Object): boolean {
 function create(element: React$Element<any>, options: TestRendererOptions) {
   let createNodeMock = defaultTestOptions.createNodeMock;
   let isConcurrent = false;
-  let strictModeLevel = null;
   let concurrentUpdatesByDefault = null;
   if (typeof options === 'object' && options !== null) {
     if (typeof options.createNodeMock === 'function') {
@@ -446,9 +444,6 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     if (options.unstable_isConcurrent === true) {
       isConcurrent = true;
     }
-    if (options.unstable_strictModeLevel !== undefined) {
-      strictModeLevel = options.unstable_strictModeLevel;
-    }
     if (allowConcurrentByDefault) {
       if (options.unstable_concurrentUpdatesByDefault !== undefined) {
         concurrentUpdatesByDefault =
@@ -466,7 +461,6 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isConcurrent ? ConcurrentRoot : LegacyRoot,
     false,
     null,
-    strictModeLevel,
     concurrentUpdatesByDefault,
   );
   invariant(root != null, 'something went wrong');
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 20c83a46dfaa..351ce098ef29 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -50,12 +50,10 @@ describe('ReactStrictMode', () => {
     }
 
     // @gate experimental
-    it('should support overriding default via createRoot option', () => {
+    it('should default to not strict', () => {
       act(() => {
         const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container, {
-          unstable_strictModeLevel: 0,
-        });
+        const root = ReactDOM.createRoot(container);
         root.render(<Component label="A" />);
       });
 
@@ -66,27 +64,6 @@ describe('ReactStrictMode', () => {
       ]);
     });
 
-    // @gate experimental
-    it('should disable strict mode if level 0 is specified', () => {
-      act(() => {
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container, {
-          unstable_strictModeLevel: 0,
-        });
-        root.render(
-          <React.StrictMode unstable_level={0}>
-            <Component label="A" />
-          </React.StrictMode>,
-        );
-      });
-
-      expect(log).toEqual([
-        'A: render',
-        'A: useLayoutEffect mount',
-        'A: useEffect mount',
-      ]);
-    });
-
     if (__DEV__) {
       // @gate experimental
       it('should default to level 1 (legacy mode)', () => {
@@ -156,9 +133,7 @@ describe('ReactStrictMode', () => {
       it('should allow level to be increased with nesting', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container, {
-            unstable_strictModeLevel: 0,
-          });
+          const root = ReactDOM.createRoot(container);
           root.render(
             <>
               <Component label="A" />
@@ -197,9 +172,7 @@ describe('ReactStrictMode', () => {
       it('should not allow level to be decreased with nesting', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container, {
-            unstable_strictModeLevel: 2,
-          });
+          const root = ReactDOM.createRoot(container);
           root.render(
             <>
               <Component label="A" />
@@ -216,7 +189,6 @@ describe('ReactStrictMode', () => {
         });
 
         expect(log).toEqual([
-          'A: render',
           'A: render',
           'B: render',
           'B: render',
@@ -228,18 +200,6 @@ describe('ReactStrictMode', () => {
           'A: useEffect mount',
           'B: useEffect mount',
           'C: useEffect mount',
-          'A: useLayoutEffect unmount',
-          'B: useLayoutEffect unmount',
-          'C: useLayoutEffect unmount',
-          'A: useEffect unmount',
-          'B: useEffect unmount',
-          'C: useEffect unmount',
-          'A: useLayoutEffect mount',
-          'B: useLayoutEffect mount',
-          'C: useLayoutEffect mount',
-          'A: useEffect mount',
-          'B: useEffect mount',
-          'C: useEffect mount',
         ]);
       });
     }
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 60862d12a9fe..c6d1f7ee72e6 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -363,8 +363,15 @@ describe('Concurrent Mode', () => {
   });
 
   // @gate experimental
-  it('should warn about unsafe legacy lifecycle methods anywhere in the tree', () => {
-    class AsyncRoot extends React.Component {
+  it('should warn about unsafe legacy lifecycle methods anywhere in a StrictMode tree', () => {
+    function StrictRoot() {
+      return (
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      );
+    }
+    class App extends React.Component {
       UNSAFE_componentWillMount() {}
       UNSAFE_componentWillUpdate() {}
       render() {
@@ -399,7 +406,7 @@ describe('Concurrent Mode', () => {
 
     const container = document.createElement('div');
     const root = ReactDOM.unstable_createRoot(container);
-    root.render(<AsyncRoot />);
+    root.render(<StrictRoot />);
     expect(() => Scheduler.unstable_flushAll()).toErrorDev(
       [
         /* eslint-disable max-len */
@@ -407,7 +414,7 @@ describe('Concurrent Mode', () => {
 
 * Move code with side effects to componentDidMount, and set initial state in the constructor.
 
-Please update the following components: AsyncRoot`,
+Please update the following components: App`,
         `Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
 
 * Move data fetching code or side effects to componentDidUpdate.
@@ -418,20 +425,27 @@ Please update the following components: Bar, Foo`,
 
 * Move data fetching code or side effects to componentDidUpdate.
 
-Please update the following components: AsyncRoot`,
+Please update the following components: App`,
         /* eslint-enable max-len */
       ],
       {withoutStack: true},
     );
 
     // Dedupe
-    root.render(<AsyncRoot />);
+    root.render(<App />);
     Scheduler.unstable_flushAll();
   });
 
   // @gate experimental
   it('should coalesce warnings by lifecycle name', () => {
-    class AsyncRoot extends React.Component {
+    function StrictRoot() {
+      return (
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      );
+    }
+    class App extends React.Component {
       UNSAFE_componentWillMount() {}
       UNSAFE_componentWillUpdate() {}
       render() {
@@ -455,7 +469,7 @@ Please update the following components: AsyncRoot`,
 
     const container = document.createElement('div');
     const root = ReactDOM.unstable_createRoot(container);
-    root.render(<AsyncRoot />);
+    root.render(<StrictRoot />);
 
     expect(() => {
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
@@ -465,7 +479,7 @@ Please update the following components: AsyncRoot`,
 
 * Move code with side effects to componentDidMount, and set initial state in the constructor.
 
-Please update the following components: AsyncRoot`,
+Please update the following components: App`,
           `Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
 
 * Move data fetching code or side effects to componentDidUpdate.
@@ -476,7 +490,7 @@ Please update the following components: Child`,
 
 * Move data fetching code or side effects to componentDidUpdate.
 
-Please update the following components: AsyncRoot`,
+Please update the following components: App`,
           /* eslint-enable max-len */
         ],
         {withoutStack: true},
@@ -508,16 +522,14 @@ Please update the following components: Parent`,
       {withoutStack: true},
     );
     // Dedupe
-    root.render(<AsyncRoot />);
+    root.render(<StrictRoot />);
     Scheduler.unstable_flushAll();
   });
 
   // @gate experimental
   it('should warn about components not present during the initial render', () => {
-    class AsyncRoot extends React.Component {
-      render() {
-        return this.props.foo ? <Foo /> : <Bar />;
-      }
+    function StrictRoot({foo}) {
+      return <React.StrictMode>{foo ? <Foo /> : <Bar />}</React.StrictMode>;
     }
     class Foo extends React.Component {
       UNSAFE_componentWillMount() {}
@@ -534,7 +546,7 @@ Please update the following components: Parent`,
 
     const container = document.createElement('div');
     const root = ReactDOM.unstable_createRoot(container);
-    root.render(<AsyncRoot foo={true} />);
+    root.render(<StrictRoot foo={true} />);
     expect(() =>
       Scheduler.unstable_flushAll(),
     ).toErrorDev(
@@ -542,7 +554,7 @@ Please update the following components: Parent`,
       {withoutStack: true},
     );
 
-    root.render(<AsyncRoot foo={false} />);
+    root.render(<StrictRoot foo={false} />);
     expect(() =>
       Scheduler.unstable_flushAll(),
     ).toErrorDev(
@@ -551,9 +563,9 @@ Please update the following components: Parent`,
     );
 
     // Dedupe
-    root.render(<AsyncRoot foo={true} />);
+    root.render(<StrictRoot foo={true} />);
     Scheduler.unstable_flushAll();
-    root.render(<AsyncRoot foo={false} />);
+    root.render(<StrictRoot foo={false} />);
     Scheduler.unstable_flushAll();
   });
 
diff --git a/packages/react/src/__tests__/forwardRef-test.js b/packages/react/src/__tests__/forwardRef-test.js
index 9c594082418a..4dfb4a3f9cd8 100644
--- a/packages/react/src/__tests__/forwardRef-test.js
+++ b/packages/react/src/__tests__/forwardRef-test.js
@@ -287,11 +287,11 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+    expect(renderCount).toBe(1);
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 4 : 2);
+    expect(renderCount).toBe(2);
   });
 
   it('should bailout if forwardRef is wrapped in memo', () => {
@@ -310,13 +310,13 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+    expect(renderCount).toBe(1);
 
     expect(ref.current.type).toBe('div');
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+    expect(renderCount).toBe(1);
 
     const differentRef = React.createRef();
 
@@ -324,14 +324,14 @@ describe('forwardRef', () => {
       <RefForwardingComponent ref={differentRef} optional="foo" />,
     );
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 4 : 2);
+    expect(renderCount).toBe(2);
 
     expect(ref.current).toBe(null);
     expect(differentRef.current.type).toBe('div');
 
     ReactNoop.render(<RefForwardingComponent ref={ref} optional="bar" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 6 : 3);
+    expect(renderCount).toBe(3);
   });
 
   it('should custom memo comparisons to compose', () => {
@@ -351,19 +351,19 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="0" c="1" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 2 : 1);
+    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" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 4 : 2);
+    expect(renderCount).toBe(2);
 
     // Changing c doesn't rerender
     ReactNoop.render(<RefForwardingComponent ref={ref} a="0" b="1" c="2" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 4 : 2);
+    expect(renderCount).toBe(2);
 
     const ComposedMemo = React.memo(
       RefForwardingComponent,
@@ -372,29 +372,29 @@ describe('forwardRef', () => {
 
     ReactNoop.render(<ComposedMemo ref={ref} a="0" b="0" c="0" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 6 : 3);
+    expect(renderCount).toBe(3);
 
     // Changing just b no longer updates
     ReactNoop.render(<ComposedMemo ref={ref} a="0" b="1" c="0" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 6 : 3);
+    expect(renderCount).toBe(3);
 
     // Changing just a and c updates
     ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="2" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 8 : 4);
+    expect(renderCount).toBe(4);
 
     // Changing just c does not update
     ReactNoop.render(<ComposedMemo ref={ref} a="2" b="2" c="3" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 8 : 4);
+    expect(renderCount).toBe(4);
 
     // Changing ref still rerenders
     const differentRef = React.createRef();
 
     ReactNoop.render(<ComposedMemo ref={differentRef} a="2" b="2" c="3" />);
     expect(Scheduler).toFlushWithoutYielding();
-    expect(renderCount).toBe(__DEV__ ? 10 : 5);
+    expect(renderCount).toBe(5);
 
     expect(ref.current).toBe(null);
     expect(differentRef.current.type).toBe('div');

From 4ca62cac45c288878d2532e5056981d177f9fdac Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 3 May 2021 16:57:17 -0400
Subject: [PATCH 0513/1603] Improve DevTools bug template text (#21413)

---
 .../views/ErrorBoundary/ReportNewIssue.js     | 56 ++++++++++++-------
 1 file changed, 37 insertions(+), 19 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index d54115ef6d7c..8dd3be4ad385 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -11,6 +11,10 @@ import * as React from 'react';
 import Icon from '../Icon';
 import styles from './shared.css';
 
+function encodeURIWrapper(string: string): string {
+  return encodeURI(string).replace(/#/g, '%23');
+}
+
 type Props = {|
   callStack: string | null,
   componentStack: string | null,
@@ -28,26 +32,40 @@ export default function ReportNewIssue({
   }
 
   const title = `Error: "${errorMessage || ''}"`;
-  const label = 'Component: Developer Tools';
-
-  let body = 'Describe what you were doing when the bug occurred:';
-  body += '\n1. ';
-  body += '\n2. ';
-  body += '\n3. ';
-  body += '\n\n---------------------------------------------';
-  body += '\nPlease do not remove the text below this line';
-  body += '\n---------------------------------------------';
-  body += `\n\nDevTools version: ${process.env.DEVTOOLS_VERSION || ''}`;
-  if (callStack) {
-    body += `\n\nCall stack: ${callStack.trim()}`;
-  }
-  if (componentStack) {
-    body += `\n\nComponent stack: ${componentStack.trim()}`;
-  }
+  const labels = ['Component: Developer Tools', 'Status: Unconfirmed'];
+
+  const body = `
+<!-- Please answer both questions below before submitting this issue. -->
+
+### Which website or app were you using when the bug happened?
+
+Please provide a link to the URL of the website (if it is public), a CodeSandbox (https://codesandbox.io/s/new) example that reproduces the bug, or a project on GitHub that we can checkout and run locally.
+
+### What were you doing on the website or app when the bug happened?
+
+If possible, please describe how to reproduce this bug on the website or app mentioned above:
+1. <!-- FILL THIS IN -->
+2. <!-- FILL THIS IN -->
+3. <!-- FILL THIS IN -->
+
+<!--------------------------------------------------->
+<!-- Please do not remove the text below this line -->
+<!--------------------------------------------------->
+
+### Generated information
+
+DevTools version: ${process.env.DEVTOOLS_VERSION || ''}
+
+Call stack:
+${callStack || '(not available)'}
+
+Component stack:
+${componentStack || '(not available)'}
+  `;
 
-  bugURL += `/issues/new?labels=${encodeURI(label)}&title=${encodeURI(
-    title,
-  )}&body=${encodeURI(body)}`;
+  bugURL += `/issues/new?labels=${encodeURIWrapper(
+    labels.join(','),
+  )}&title=${encodeURIWrapper(title)}&body=${encodeURIWrapper(body.trim())}`;
 
   return (
     <div className={styles.GitHubLinkRow}>

From b522638b994abfea16b981efdf88e11d1078c982 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 May 2021 00:09:11 -0400
Subject: [PATCH 0514/1603] Add GitHub API query to bug report template
 (#21421)

This may help debug why sometimes the GitHub API search seems to not find a match when it should.
---
 .../views/ErrorBoundary/ReportNewIssue.js     | 11 ++++++++--
 .../devtools/views/ErrorBoundary/githubAPI.js | 20 +++++++++++--------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index 8dd3be4ad385..3546c9438711 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -9,6 +9,7 @@
 
 import * as React from 'react';
 import Icon from '../Icon';
+import {searchGitHubIssuesURL} from './githubAPI';
 import styles from './shared.css';
 
 function encodeURIWrapper(string: string): string {
@@ -31,6 +32,9 @@ export default function ReportNewIssue({
     return null;
   }
 
+  const gitHubAPISearch =
+    errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)';
+
   const title = `Error: "${errorMessage || ''}"`;
   const labels = ['Component: Developer Tools', 'Status: Unconfirmed'];
 
@@ -57,10 +61,13 @@ If possible, please describe how to reproduce this bug on the website or app men
 DevTools version: ${process.env.DEVTOOLS_VERSION || ''}
 
 Call stack:
-${callStack || '(not available)'}
+${callStack || '(none)'}
 
 Component stack:
-${componentStack || '(not available)'}
+${componentStack || '(none)'}
+
+GitHub URL search query:
+${gitHubAPISearch}
   `;
 
   bugURL += `/issues/new?labels=${encodeURIWrapper(
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
index 3f63416bc133..714919effa81 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -14,9 +14,7 @@ export type GitHubIssue = {|
 
 const GITHUB_ISSUES_API = 'https://api.github.com/search/issues';
 
-export async function searchGitHubIssues(
-  message: string,
-): Promise<GitHubIssue | null> {
+export function searchGitHubIssuesURL(message: string): string {
   // Remove Fiber IDs from error message (as those will be unique).
   message = message.replace(/"[0-9]+"/g, '');
 
@@ -29,13 +27,19 @@ export async function searchGitHubIssues(
     'repo:facebook/react',
   ];
 
-  const response = await fetch(
+  return (
     GITHUB_ISSUES_API +
-      '?q=' +
-      encodeURIComponent(message) +
-      '%20' +
-      filters.map(encodeURIComponent).join('%20'),
+    '?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];

From 9a130e1dec268e02977bca46415dc28f332964b6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 May 2021 09:47:06 -0400
Subject: [PATCH 0515/1603] StrictMode includes strict effects by default
 (#21418)

Removed "unstable_level" attribute support for the time being.
---
 .../react-reconciler/src/ReactFiber.new.js    | 16 +---
 .../react-reconciler/src/ReactFiber.old.js    | 16 +---
 .../ReactStrictMode-test.internal.js          | 93 +------------------
 3 files changed, 7 insertions(+), 118 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index fcb757b96a65..13cbe26b5acc 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps(
         break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
-
-        // Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
-        const level =
-          pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;
-
-        // Levels cascade; higher levels inherit all lower level modes.
-        // It is explicitly not supported to lower a mode with nesting, only to increase it.
-        if (level >= 1) {
-          mode |= StrictLegacyMode;
-        }
-        if (enableStrictEffects) {
-          if (level >= 2) {
-            mode |= StrictEffectsMode;
-          }
-        }
+        mode |= StrictLegacyMode | StrictEffectsMode;
         break;
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, lanes, key);
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 50947ff94c8a..40a09820beae 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -487,21 +487,7 @@ export function createFiberFromTypeAndProps(
         break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
-
-        // Legacy strict mode (<StrictMode> without any level prop) defaults to level 1.
-        const level =
-          pendingProps.unstable_level == null ? 1 : pendingProps.unstable_level;
-
-        // Levels cascade; higher levels inherit all lower level modes.
-        // It is explicitly not supported to lower a mode with nesting, only to increase it.
-        if (level >= 1) {
-          mode |= StrictLegacyMode;
-        }
-        if (enableStrictEffects) {
-          if (level >= 2) {
-            mode |= StrictEffectsMode;
-          }
-        }
+        mode |= StrictLegacyMode | StrictEffectsMode;
         break;
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, lanes, key);
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 351ce098ef29..ca651fdefaf2 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -66,7 +66,7 @@ describe('ReactStrictMode', () => {
 
     if (__DEV__) {
       // @gate experimental
-      it('should default to level 1 (legacy mode)', () => {
+      it('should include legacy + strict effects mode', () => {
         act(() => {
           const container = document.createElement('div');
           const root = ReactDOM.createRoot(container);
@@ -77,46 +77,6 @@ describe('ReactStrictMode', () => {
           );
         });
 
-        expect(log).toEqual([
-          'A: render',
-          'A: render',
-          'A: useLayoutEffect mount',
-          'A: useEffect mount',
-        ]);
-      });
-
-      // @gate experimental
-      it('should support level 1 (legacy mode)', () => {
-        act(() => {
-          const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container);
-          root.render(
-            <React.StrictMode unstable_level={1}>
-              <Component label="A" />
-            </React.StrictMode>,
-          );
-        });
-
-        expect(log).toEqual([
-          'A: render',
-          'A: render',
-          'A: useLayoutEffect mount',
-          'A: useEffect mount',
-        ]);
-      });
-
-      // @gate experimental
-      it('should support level 2 (legacy + strict effects mode)', () => {
-        act(() => {
-          const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container);
-          root.render(
-            <React.StrictMode unstable_level={2}>
-              <Component label="A" />
-            </React.StrictMode>,
-          );
-        });
-
         expect(log).toEqual([
           'A: render',
           'A: render',
@@ -137,12 +97,8 @@ describe('ReactStrictMode', () => {
           root.render(
             <>
               <Component label="A" />
-              <React.StrictMode unstable_level={1}>
-                <Component label="B" />
-                <React.StrictMode unstable_level={2}>
-                  <Component label="C" />
-                </React.StrictMode>
-                ,
+              <React.StrictMode>
+                <Component label="B" />,
               </React.StrictMode>
               ,
             </>,
@@ -153,53 +109,14 @@ describe('ReactStrictMode', () => {
           'A: render',
           'B: render',
           'B: render',
-          'C: render',
-          'C: render',
           'A: useLayoutEffect mount',
           'B: useLayoutEffect mount',
-          'C: useLayoutEffect mount',
           'A: useEffect mount',
           'B: useEffect mount',
-          'C: useEffect mount',
-          'C: useLayoutEffect unmount',
-          'C: useEffect unmount',
-          'C: useLayoutEffect mount',
-          'C: useEffect mount',
-        ]);
-      });
-
-      // @gate experimental
-      it('should not allow level to be decreased with nesting', () => {
-        act(() => {
-          const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container);
-          root.render(
-            <>
-              <Component label="A" />
-              <React.StrictMode unstable_level={1}>
-                <Component label="B" />
-                <React.StrictMode unstable_level={0}>
-                  <Component label="C" />
-                </React.StrictMode>
-                ,
-              </React.StrictMode>
-              ,
-            </>,
-          );
-        });
-
-        expect(log).toEqual([
-          'A: render',
-          'B: render',
-          'B: render',
-          'C: render',
-          'C: render',
-          'A: useLayoutEffect mount',
+          'B: useLayoutEffect unmount',
+          'B: useEffect unmount',
           'B: useLayoutEffect mount',
-          'C: useLayoutEffect mount',
-          'A: useEffect mount',
           'B: useEffect mount',
-          'C: useEffect mount',
         ]);
       });
     }

From 442eb21e0e6541460157782d18edea1383ed62fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 4 May 2021 10:45:54 -0400
Subject: [PATCH 0516/1603] Allow dangerouslySetInnerHTML in <option> (#21373)

---
 .../react-dom/src/server/ReactDOMServerFormatConfig.js    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 890ee749e34c..941ee252be00 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -691,6 +691,7 @@ function pushStartOption(
   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];
@@ -716,10 +717,8 @@ function pushStartOption(
           }
           break;
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
-            '`dangerouslySetInnerHTML` does not work on <option>.',
-          );
+          innerHTML = propValue;
+          break;
         // eslint-disable-next-line-no-fallthrough
         case 'value':
           value = propValue;
@@ -760,6 +759,7 @@ function pushStartOption(
   }
 
   target.push(endOfStartTag);
+  pushInnerHTML(target, innerHTML, children);
   return children;
 }
 

From d19257b8fabd883d1db91811d81e10651d059e71 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 May 2021 10:46:26 -0400
Subject: [PATCH 0517/1603] DevTools Store emits errors before throwing
 (#21426)

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, github.com/facebook/react/issues/21402)

Emitting an error event allows the ErrorBoundary to show the original error.

Throwing is still valuable for local development and for unit testing the Store itself.
---
 .../src/devtools/store.js                     | 80 +++++++++++++------
 .../views/ErrorBoundary/ErrorBoundary.js      | 32 ++++++--
 .../src/devtools/views/Profiler/Profiler.js   |  9 +--
 .../src/devtools/views/portaledContent.js     |  4 +-
 4 files changed, 83 insertions(+), 42 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index ff3cf487b9b9..0d2ca5faa88e 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -78,6 +78,7 @@ export type Capabilities = {|
 export default class Store extends EventEmitter<{|
   collapseNodesByDefault: [],
   componentFilters: [],
+  error: [Error],
   mutated: [[Array<number>, Map<number, number>]],
   recordChangeDescriptions: [],
   roots: [],
@@ -270,12 +271,14 @@ export default class Store extends EventEmitter<{|
   assertMapSizeMatchesRootCount(map: Map<any, any>, mapName: string) {
     const expectedSize = this.roots.length;
     if (map.size !== expectedSize) {
-      throw new Error(
-        `Expected ${mapName} to contain ${expectedSize} items, but it contains ${
-          map.size
-        } items\n\n${inspect(map, {
-          depth: 20,
-        })}`,
+      this._throwAndEmitError(
+        Error(
+          `Expected ${mapName} to contain ${expectedSize} items, but it contains ${
+            map.size
+          } items\n\n${inspect(map, {
+            depth: 20,
+          })}`,
+        ),
       );
     }
   }
@@ -301,7 +304,9 @@ export default class Store extends EventEmitter<{|
     if (this._profilerStore.isProfiling) {
       // Re-mounting a tree while profiling is in progress might break a lot of assumptions.
       // If necessary, we could support this- but it doesn't seem like a necessary use case.
-      throw Error('Cannot modify filter preferences while profiling');
+      this._throwAndEmitError(
+        Error('Cannot modify filter preferences while profiling'),
+      );
     }
 
     // Filter updates are expensive to apply (since they impact the entire tree).
@@ -607,7 +612,7 @@ export default class Store extends EventEmitter<{|
             }
 
             if (depth === 0) {
-              throw Error('Invalid owners list');
+              this._throwAndEmitError(Error('Invalid owners list'));
             }
 
             list.push({...innerElement, depth});
@@ -667,7 +672,7 @@ export default class Store extends EventEmitter<{|
     if (element !== null) {
       if (isCollapsed) {
         if (element.type === ElementTypeRoot) {
-          throw Error('Root nodes cannot be collapsed');
+          this._throwAndEmitError(Error('Root nodes cannot be collapsed'));
         }
 
         if (!element.isCollapsed) {
@@ -825,8 +830,10 @@ export default class Store extends EventEmitter<{|
           i += 3;
 
           if (this._idToElement.has(id)) {
-            throw Error(
-              `Cannot add node "${id}" because a node with that id is already in the Store.`,
+            this._throwAndEmitError(
+              Error(
+                `Cannot add node "${id}" because a node with that id is already in the Store.`,
+              ),
             );
           }
 
@@ -888,8 +895,10 @@ export default class Store extends EventEmitter<{|
             }
 
             if (!this._idToElement.has(parentID)) {
-              throw Error(
-                `Cannot add child "${id}" to parent "${parentID}" because parent node was not found in the Store.`,
+              this._throwAndEmitError(
+                Error(
+                  `Cannot add child "${id}" to parent "${parentID}" because parent node was not found in the Store.`,
+                ),
               );
             }
 
@@ -940,8 +949,10 @@ export default class Store extends EventEmitter<{|
             const id = ((operations[i]: any): number);
 
             if (!this._idToElement.has(id)) {
-              throw Error(
-                `Cannot remove node "${id}" because no matching node was found in the Store.`,
+              this._throwAndEmitError(
+                Error(
+                  `Cannot remove node "${id}" because no matching node was found in the Store.`,
+                ),
               );
             }
 
@@ -950,7 +961,9 @@ export default class Store extends EventEmitter<{|
             const element = ((this._idToElement.get(id): any): Element);
             const {children, ownerID, parentID, weight} = element;
             if (children.length > 0) {
-              throw new Error(`Node "${id}" was removed before its children.`);
+              this._throwAndEmitError(
+                Error(`Node "${id}" was removed before its children.`),
+              );
             }
 
             this._idToElement.delete(id);
@@ -972,8 +985,10 @@ export default class Store extends EventEmitter<{|
               }
               parentElement = ((this._idToElement.get(parentID): any): Element);
               if (parentElement === undefined) {
-                throw Error(
-                  `Cannot remove node "${id}" from parent "${parentID}" because no matching node was found in the Store.`,
+                this._throwAndEmitError(
+                  Error(
+                    `Cannot remove node "${id}" from parent "${parentID}" because no matching node was found in the Store.`,
+                  ),
                 );
               }
               const index = parentElement.children.indexOf(id);
@@ -1033,16 +1048,20 @@ export default class Store extends EventEmitter<{|
           i += 3;
 
           if (!this._idToElement.has(id)) {
-            throw Error(
-              `Cannot reorder children for node "${id}" because no matching node was found in the Store.`,
+            this._throwAndEmitError(
+              Error(
+                `Cannot reorder children for node "${id}" because no matching node was found in the Store.`,
+              ),
             );
           }
 
           const element = ((this._idToElement.get(id): any): Element);
           const children = element.children;
           if (children.length !== numChildren) {
-            throw Error(
-              `Children cannot be added or removed during a reorder operation.`,
+            this._throwAndEmitError(
+              Error(
+                `Children cannot be added or removed during a reorder operation.`,
+              ),
             );
           }
 
@@ -1087,7 +1106,9 @@ export default class Store extends EventEmitter<{|
           haveErrorsOrWarningsChanged = true;
           break;
         default:
-          throw Error(`Unsupported Bridge operation "${operation}"`);
+          this._throwAndEmitError(
+            Error(`Unsupported Bridge operation "${operation}"`),
+          );
       }
     }
 
@@ -1251,4 +1272,17 @@ export default class Store extends EventEmitter<{|
 
     this.emit('unsupportedBridgeProtocolDetected');
   };
+
+  // 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) {
+    this.emit('error', error);
+
+    // Throwing is still valuable for local development
+    // and for unit testing the Store itself.
+    throw error;
+  }
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index 3d633cf5dca2..45441a925df6 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -9,12 +9,14 @@
 
 import * as React from 'react';
 import {Component, Suspense} from 'react';
+import Store from 'react-devtools-shared/src/devtools/store';
 import ErrorView from './ErrorView';
 import SearchingGitHubIssues from './SearchingGitHubIssues';
 import SuspendingErrorView from './SuspendingErrorView';
 
 type Props = {|
   children: React$Node,
+  store: Store,
 |};
 
 type State = {|
@@ -42,13 +44,6 @@ export default class ErrorBoundary extends Component<Props, State> {
         ? error.message
         : '' + error;
 
-    return {
-      errorMessage,
-      hasError: true,
-    };
-  }
-
-  componentDidCatch(error: any, {componentStack}: any) {
     const callStack =
       typeof error === 'object' &&
       error !== null &&
@@ -59,12 +54,27 @@ export default class ErrorBoundary extends Component<Props, State> {
             .join('\n')
         : null;
 
-    this.setState({
+    return {
       callStack,
+      errorMessage,
+      hasError: true,
+    };
+  }
+
+  componentDidCatch(error: any, {componentStack}: any) {
+    this.setState({
       componentStack,
     });
   }
 
+  componentDidMount() {
+    this.props.store.addListener('error', this._onStoreError);
+  }
+
+  componentWillUnmount() {
+    this.props.store.removeListener('error', this._onStoreError);
+  }
+
   render() {
     const {children} = this.props;
     const {callStack, componentStack, errorMessage, hasError} = this.state;
@@ -88,4 +98,10 @@ export default class ErrorBoundary extends Component<Props, State> {
 
     return children;
   }
+
+  _onStoreError = (error: Error) => {
+    if (!this.state.hasError) {
+      this.setState(ErrorBoundary.getDerivedStateFromError(error));
+    }
+  };
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 58008334bc8f..9fda41499871 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -26,7 +26,6 @@ import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/Set
 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 Store from '../../store';
 
 import styles from './Profiler.css';
 
@@ -188,10 +187,4 @@ const RecordingInProgress = () => (
   </div>
 );
 
-function onErrorRetry(store: Store) {
-  // If an error happened in the Profiler,
-  // we should clear data on retry (or it will just happen again).
-  store.profilerStore.profilingData = null;
-}
-
-export default portaledContent(Profiler, onErrorRetry);
+export default portaledContent(Profiler);
diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
index f0996702c280..4d7cdde32c95 100644
--- a/packages/react-devtools-shared/src/devtools/views/portaledContent.js
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -12,19 +12,17 @@ import {useContext} from 'react';
 import {createPortal} from 'react-dom';
 import ErrorBoundary from './ErrorBoundary';
 import {StoreContext} from './context';
-import Store from '../store';
 
 export type Props = {portalContainer?: Element, ...};
 
 export default function portaledContent(
   Component: React$StatelessFunctionalComponent<any>,
-  onErrorRetry?: (store: Store) => void,
 ): React$StatelessFunctionalComponent<any> {
   return function PortaledContent({portalContainer, ...rest}: Props) {
     const store = useContext(StoreContext);
 
     const children = (
-      <ErrorBoundary store={store} onRetry={onErrorRetry}>
+      <ErrorBoundary store={store}>
         <Component {...rest} />
       </ErrorBoundary>
     );

From d1542de3a607024421e13db01a42d8ba5930c389 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 May 2021 11:40:16 -0400
Subject: [PATCH 0518/1603] Unify React.memo and React.forwardRef display name
 logic (#21392)

Co-authored-by: iChenLei <2470828450@qq.com>
---
 .../__snapshots__/store-test.js.snap          | 17 ----
 .../src/__tests__/store-test.js               | 32 +++++-
 .../src/backend/renderer.js                   |  8 +-
 .../src/__tests__/ReactMemo-test.js           | 71 +++++++++++--
 packages/react/src/ReactForwardRef.js         | 10 +-
 packages/react/src/ReactMemo.js               | 10 +-
 .../react/src/__tests__/forwardRef-test.js    | 99 +++++++++++++++++--
 packages/shared/getComponentNameFromType.js   | 15 ++-
 8 files changed, 220 insertions(+), 42 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
index 5ff48f317f47..eedcaa33fc07 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
@@ -670,20 +670,3 @@ exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
 [root]
     <Child key="123">
 `;
-
-exports[`Store should show the right display names for special component types 1`] = `
-[root]
-  ▾ <App>
-      <MyComponent>
-      <MyComponent> [ForwardRef]
-    ▾ <Anonymous> [ForwardRef]
-        <MyComponent2>
-      <Custom> [ForwardRef]
-      <MyComponent4> [Memo]
-    ▾ <MyComponent> [Memo]
-        <MyComponent> [ForwardRef]
-      <Baz> [withFoo][withBar]
-      <Baz> [Memo][withFoo][withBar]
-      <Baz> [ForwardRef][withFoo][withBar]
-      <Cache>
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index f971946b686a..b63b8f088e8c 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -879,6 +879,17 @@ describe('Store', () => {
       FakeHigherOrderComponent,
     );
 
+    const MemoizedFakeHigherOrderComponentWithDisplayNameOverride = React.memo(
+      FakeHigherOrderComponent,
+    );
+    MemoizedFakeHigherOrderComponentWithDisplayNameOverride.displayName =
+      'memoRefOverride';
+    const ForwardRefFakeHigherOrderComponentWithDisplayNameOverride = React.forwardRef(
+      FakeHigherOrderComponent,
+    );
+    ForwardRefFakeHigherOrderComponentWithDisplayNameOverride.displayName =
+      'forwardRefOverride';
+
     const App = () => (
       <React.Fragment>
         <MyComponent />
@@ -891,6 +902,8 @@ describe('Store', () => {
         <MemoizedFakeHigherOrderComponent />
         <ForwardRefFakeHigherOrderComponent />
         <React.unstable_Cache />
+        <MemoizedFakeHigherOrderComponentWithDisplayNameOverride />
+        <ForwardRefFakeHigherOrderComponentWithDisplayNameOverride />
       </React.Fragment>
     );
 
@@ -904,7 +917,24 @@ describe('Store', () => {
     // Render again after it resolves
     act(() => ReactDOM.render(<App />, container));
 
-    expect(store).toMatchSnapshot();
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+            <MyComponent>
+            <MyComponent> [ForwardRef]
+          ▾ <Anonymous> [ForwardRef]
+              <MyComponent2>
+            <Custom> [ForwardRef]
+            <MyComponent4> [Memo]
+          ▾ <MyComponent> [Memo]
+              <MyComponent> [ForwardRef]
+            <Baz> [withFoo][withBar]
+            <Baz> [Memo][withFoo][withBar]
+            <Baz> [ForwardRef][withFoo][withBar]
+            <Cache>
+            <memoRefOverride> [Memo]
+            <forwardRefOverride> [ForwardRef]
+    `);
   });
 
   describe('Lazy', () => {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index a45f510ff230..18fa9d7efdda 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -393,7 +393,7 @@ export function getInternalReactConstants(
 
   // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
   function getDisplayNameForFiber(fiber: Fiber): string | null {
-    const {type, tag} = fiber;
+    const {elementType, type, tag} = fiber;
 
     let resolvedType = type;
     if (typeof type === 'object' && type !== null) {
@@ -432,7 +432,11 @@ export function getInternalReactConstants(
         return 'Lazy';
       case MemoComponent:
       case SimpleMemoComponent:
-        return getDisplayName(resolvedType, 'Anonymous');
+        return (
+          (elementType && elementType.displayName) ||
+          (type && type.displayName) ||
+          getDisplayName(resolvedType, 'Anonymous')
+        );
       case SuspenseComponent:
         return 'Suspense';
       case LegacyHiddenComponent:
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
index 5be63d65a375..89bf6e2cd4e6 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -498,11 +498,66 @@ describe('memo', () => {
       });
     });
 
+    it('should fall back to showing something meaningful if no displayName or name are present', () => {
+      const MemoComponent = React.memo(props => <div {...props} />);
+      MemoComponent.propTypes = {
+        required: PropTypes.string.isRequired,
+      };
+
+      expect(() =>
+        ReactNoop.render(<MemoComponent optional="foo" />),
+      ).toErrorDev(
+        'Warning: Failed prop type: The prop `required` is marked as required in ' +
+          '`Memo`, but its value is `undefined`.',
+        // There's no component stack in this warning because the inner function is anonymous.
+        // If we wanted to support this (for the Error frames / source location)
+        // we could do this by updating ReactComponentStackFrame.
+        {withoutStack: true},
+      );
+    });
+
+    it('should honor a displayName if set on the inner component in warnings', () => {
+      function Component(props) {
+        return <div {...props} />;
+      }
+      Component.displayName = 'Inner';
+      const MemoComponent = React.memo(Component);
+      MemoComponent.propTypes = {
+        required: PropTypes.string.isRequired,
+      };
+
+      expect(() =>
+        ReactNoop.render(<MemoComponent optional="foo" />),
+      ).toErrorDev(
+        'Warning: Failed prop type: The prop `required` is marked as required in ' +
+          '`Inner`, but its value is `undefined`.\n' +
+          '    in Inner (at **)',
+      );
+    });
+
     it('should honor a displayName if set on the memo wrapper in warnings', () => {
       const MemoComponent = React.memo(function Component(props) {
         return <div {...props} />;
       });
-      MemoComponent.displayName = 'Foo';
+      MemoComponent.displayName = 'Outer';
+      MemoComponent.propTypes = {
+        required: PropTypes.string.isRequired,
+      };
+
+      expect(() =>
+        ReactNoop.render(<MemoComponent optional="foo" />),
+      ).toErrorDev(
+        'Warning: Failed prop type: The prop `required` is marked as required in ' +
+          '`Outer`, but its value is `undefined`.\n' +
+          '    in Component (at **)',
+      );
+    });
+
+    it('should pass displayName to an anonymous inner component so it shows up in component stacks', () => {
+      const MemoComponent = React.memo(props => {
+        return <div {...props} />;
+      });
+      MemoComponent.displayName = 'Memo';
       MemoComponent.propTypes = {
         required: PropTypes.string.isRequired,
       };
@@ -511,19 +566,19 @@ describe('memo', () => {
         ReactNoop.render(<MemoComponent optional="foo" />),
       ).toErrorDev(
         'Warning: Failed prop type: The prop `required` is marked as required in ' +
-          '`Foo`, but its value is `undefined`.\n' +
-          '    in Foo (at **)',
+          '`Memo`, but its value is `undefined`.\n' +
+          '    in Memo (at **)',
       );
     });
 
-    it('should honor a inner displayName if set on the wrapped function', () => {
+    it('should honor a outer displayName when wrapped component and memo component set displayName at the same time.', () => {
       function Component(props) {
         return <div {...props} />;
       }
-      Component.displayName = 'Foo';
+      Component.displayName = 'Inner';
 
       const MemoComponent = React.memo(Component);
-      MemoComponent.displayName = 'Bar';
+      MemoComponent.displayName = 'Outer';
       MemoComponent.propTypes = {
         required: PropTypes.string.isRequired,
       };
@@ -532,8 +587,8 @@ describe('memo', () => {
         ReactNoop.render(<MemoComponent optional="foo" />),
       ).toErrorDev(
         'Warning: Failed prop type: The prop `required` is marked as required in ' +
-          '`Foo`, but its value is `undefined`.\n' +
-          '    in Foo (at **)',
+          '`Outer`, but its value is `undefined`.\n' +
+          '    in Inner (at **)',
       );
     });
   }
diff --git a/packages/react/src/ReactForwardRef.js b/packages/react/src/ReactForwardRef.js
index d76310ac74cf..796571d51f6b 100644
--- a/packages/react/src/ReactForwardRef.js
+++ b/packages/react/src/ReactForwardRef.js
@@ -57,7 +57,15 @@ export function forwardRef<Props, ElementType: React$ElementType>(
       },
       set: function(name) {
         ownName = name;
-        if (render.displayName == null) {
+
+        // 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) {
           render.displayName = name;
         }
       },
diff --git a/packages/react/src/ReactMemo.js b/packages/react/src/ReactMemo.js
index 2531c1a1879f..d742948bf5ed 100644
--- a/packages/react/src/ReactMemo.js
+++ b/packages/react/src/ReactMemo.js
@@ -37,7 +37,15 @@ export function memo<Props>(
       },
       set: function(name) {
         ownName = name;
-        if (type.displayName == null) {
+
+        // 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) {
           type.displayName = name;
         }
       },
diff --git a/packages/react/src/__tests__/forwardRef-test.js b/packages/react/src/__tests__/forwardRef-test.js
index 4dfb4a3f9cd8..0c2ee9aa4ea7 100644
--- a/packages/react/src/__tests__/forwardRef-test.js
+++ b/packages/react/src/__tests__/forwardRef-test.js
@@ -217,14 +217,43 @@ describe('forwardRef', () => {
     );
   });
 
-  it('should honor a displayName if set on the forwardRef wrapper in warnings', () => {
+  it('should fall back to showing something meaningful if no displayName or name are present', () => {
     const Component = props => <div {...props} />;
 
     const RefForwardingComponent = React.forwardRef((props, ref) => (
       <Component {...props} forwardedRef={ref} />
     ));
 
-    RefForwardingComponent.displayName = 'Foo';
+    RefForwardingComponent.propTypes = {
+      optional: PropTypes.string,
+      required: PropTypes.string.isRequired,
+    };
+
+    RefForwardingComponent.defaultProps = {
+      optional: 'default',
+    };
+
+    const ref = React.createRef();
+
+    expect(() =>
+      ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
+    ).toErrorDev(
+      'Warning: Failed prop type: The prop `required` is marked as required in ' +
+        '`ForwardRef`, but its value is `undefined`.',
+      // There's no component stack in this warning because the inner function is anonymous.
+      // If we wanted to support this (for the Error frames / source location)
+      // we could do this by updating ReactComponentStackFrame.
+      {withoutStack: true},
+    );
+  });
+
+  it('should honor a displayName if set on the forwardRef wrapper in warnings', () => {
+    const Component = props => <div {...props} />;
+
+    const RefForwardingComponent = React.forwardRef(function Inner(props, ref) {
+      <Component {...props} forwardedRef={ref} />;
+    });
+    RefForwardingComponent.displayName = 'Custom';
 
     RefForwardingComponent.propTypes = {
       optional: PropTypes.string,
@@ -241,8 +270,36 @@ describe('forwardRef', () => {
       ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
     ).toErrorDev(
       'Warning: Failed prop type: The prop `required` is marked as required in ' +
-        '`Foo`, but its value is `undefined`.\n' +
-        '    in Foo (at **)',
+        '`Custom`, but its value is `undefined`.\n' +
+        '    in Inner (at **)',
+    );
+  });
+
+  it('should pass displayName to an anonymous inner component so it shows up in component stacks', () => {
+    const Component = props => <div {...props} />;
+
+    const RefForwardingComponent = React.forwardRef((props, ref) => (
+      <Component {...props} forwardedRef={ref} />
+    ));
+    RefForwardingComponent.displayName = 'Custom';
+
+    RefForwardingComponent.propTypes = {
+      optional: PropTypes.string,
+      required: PropTypes.string.isRequired,
+    };
+
+    RefForwardingComponent.defaultProps = {
+      optional: 'default',
+    };
+
+    const ref = React.createRef();
+
+    expect(() =>
+      ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
+    ).toErrorDev(
+      'Warning: Failed prop type: The prop `required` is marked as required in ' +
+        '`Custom`, but its value is `undefined`.\n' +
+        '    in Custom (at **)',
     );
   });
 
@@ -250,8 +307,36 @@ describe('forwardRef', () => {
     const Component = props => <div {...props} />;
 
     const inner = (props, ref) => <Component {...props} forwardedRef={ref} />;
-    inner.displayName = 'Foo';
+    inner.displayName = 'Inner';
+    const RefForwardingComponent = React.forwardRef(inner);
+
+    RefForwardingComponent.propTypes = {
+      optional: PropTypes.string,
+      required: PropTypes.string.isRequired,
+    };
+
+    RefForwardingComponent.defaultProps = {
+      optional: 'default',
+    };
+
+    const ref = React.createRef();
+
+    expect(() =>
+      ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
+    ).toErrorDev(
+      'Warning: Failed prop type: The prop `required` is marked as required in ' +
+        '`ForwardRef(Inner)`, but its value is `undefined`.\n' +
+        '    in Inner (at **)',
+    );
+  });
+
+  it('should honor a outer displayName when wrapped component and memo component set displayName at the same time.', () => {
+    const Component = props => <div {...props} />;
+
+    const inner = (props, ref) => <Component {...props} forwardedRef={ref} />;
+    inner.displayName = 'Inner';
     const RefForwardingComponent = React.forwardRef(inner);
+    RefForwardingComponent.displayName = 'Outer';
 
     RefForwardingComponent.propTypes = {
       optional: PropTypes.string,
@@ -268,8 +353,8 @@ describe('forwardRef', () => {
       ReactNoop.render(<RefForwardingComponent ref={ref} optional="foo" />),
     ).toErrorDev(
       'Warning: Failed prop type: The prop `required` is marked as required in ' +
-        '`ForwardRef(Foo)`, but its value is `undefined`.\n' +
-        '    in Foo (at **)',
+        '`Outer`, but its value is `undefined`.\n' +
+        '    in Inner (at **)',
     );
   });
 
diff --git a/packages/shared/getComponentNameFromType.js b/packages/shared/getComponentNameFromType.js
index f0f51d852f8d..7428f8c11d73 100644
--- a/packages/shared/getComponentNameFromType.js
+++ b/packages/shared/getComponentNameFromType.js
@@ -31,11 +31,12 @@ function getWrappedName(
   innerType: any,
   wrapperName: string,
 ): string {
+  const displayName = (outerType: any).displayName;
+  if (displayName) {
+    return displayName;
+  }
   const functionName = innerType.displayName || innerType.name || '';
-  return (
-    (outerType: any).displayName ||
-    (functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName)
-  );
+  return functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName;
 }
 
 // Keep in sync with react-reconciler/getComponentNameFromFiber
@@ -90,7 +91,11 @@ export default function getComponentNameFromType(type: mixed): string | null {
       case REACT_FORWARD_REF_TYPE:
         return getWrappedName(type, type.render, 'ForwardRef');
       case REACT_MEMO_TYPE:
-        return getComponentNameFromType(type.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;

From e9a4a44aae675e1b164cf2ae509e438c324d424a Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 4 May 2021 15:42:48 -0400
Subject: [PATCH 0519/1603] Add back root override for strict mode (#21428)

* Add back root override for strict mode

* Switch flag to boolean

* Fix flow
---
 .../src/__tests__/ReactTestUtilsAct-test.js   | 14 ++++++++++++
 packages/react-dom/src/client/ReactDOMRoot.js |  3 +++
 .../react-native-renderer/src/ReactFabric.js  |  2 +-
 .../src/ReactNativeRenderer.js                |  2 +-
 .../src/createReactNoop.js                    |  4 +++-
 .../react-reconciler/src/ReactFiber.new.js    |  9 +++++++-
 .../react-reconciler/src/ReactFiber.old.js    |  9 +++++++-
 .../src/ReactFiberReconciler.new.js           |  2 ++
 .../src/ReactFiberReconciler.old.js           |  2 ++
 .../src/ReactFiberRoot.new.js                 |  2 ++
 .../src/ReactFiberRoot.old.js                 |  2 ++
 .../src/ReactTestRenderer.js                  |  6 +++++
 .../ReactStrictMode-test.internal.js          | 22 +++++++++++++++++++
 13 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 8419c93c38c4..dee4b7852a83 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -102,6 +102,20 @@ describe('ReactTestUtils.act()', () => {
       root.render(<App />);
       Scheduler.unstable_flushAll();
     });
+
+    // @gate experimental
+    it('warns in concurrent mode if root is strict', () => {
+      expect(() => {
+        const root = ReactDOM.unstable_createRoot(
+          document.createElement('div'),
+          {unstable_strictMode: true},
+        );
+        root.render(<App />);
+        Scheduler.unstable_flushAll();
+      }).toErrorDev([
+        'An update to App ran an effect, but was not wrapped in act(...)',
+      ]);
+    });
   });
 });
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 73e96eb086bb..dc4c95a41ef3 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -27,6 +27,7 @@ export type RootOptions = {
     mutableSources?: Array<MutableSource<any>>,
     ...
   },
+  unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
   ...
 };
@@ -122,6 +123,7 @@ function createRootImpl(
       options.hydrationOptions != null &&
       options.hydrationOptions.mutableSources) ||
     null;
+  const isStrictMode = options != null && options.unstable_strictMode === true;
 
   let concurrentUpdatesByDefaultOverride = null;
   if (allowConcurrentByDefault) {
@@ -136,6 +138,7 @@ function createRootImpl(
     tag,
     hydrate,
     hydrationCallbacks,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
   markContainerAsRoot(root.current, container);
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 9f1f44f51cf4..c516452a1766 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -207,7 +207,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index de42c6e41a58..6f12fd5d8d44 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -203,7 +203,7 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, null);
+    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 659f4d63fcc0..9d2c87621bce 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -722,7 +722,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (!root) {
         const container = {rootID: rootID, pendingChildren: [], children: []};
         rootContainers.set(rootID, container);
-        root = NoopRenderer.createContainer(container, tag, false, null);
+        root = NoopRenderer.createContainer(container, tag, false, null, null);
         roots.set(rootID, root);
       }
       return root.current.stateNode.containerInfo;
@@ -740,6 +740,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         ConcurrentRoot,
         false,
         null,
+        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -766,6 +767,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         LegacyRoot,
         false,
         null,
+        null,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 13cbe26b5acc..701c2926797d 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -422,12 +422,19 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
 export function createHostRootFiber(
   tag: RootTag,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
     mode = ConcurrentMode;
-    if (enableStrictEffects && createRootStrictEffectsByDefault) {
+    if (isStrictMode === true) {
+      mode |= StrictLegacyMode;
+
+      if (enableStrictEffects) {
+        mode |= StrictEffectsMode;
+      }
+    } else if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode |= StrictLegacyMode | StrictEffectsMode;
     }
     if (
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 40a09820beae..fd2428b59779 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -422,12 +422,19 @@ export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
 
 export function createHostRootFiber(
   tag: RootTag,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): Fiber {
   let mode;
   if (tag === ConcurrentRoot) {
     mode = ConcurrentMode;
-    if (enableStrictEffects && createRootStrictEffectsByDefault) {
+    if (isStrictMode === true) {
+      mode |= StrictLegacyMode;
+
+      if (enableStrictEffects) {
+        mode |= StrictEffectsMode;
+      }
+    } else if (enableStrictEffects && createRootStrictEffectsByDefault) {
       mode |= StrictLegacyMode | StrictEffectsMode;
     }
     if (
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index b19223db377a..c1e9778160a7 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -248,6 +248,7 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
@@ -255,6 +256,7 @@ export function createContainer(
     tag,
     hydrate,
     hydrationCallbacks,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
 }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index fe528b8316c8..47ced0013031 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -248,6 +248,7 @@ export function createContainer(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): OpaqueRoot {
   return createFiberRoot(
@@ -255,6 +256,7 @@ export function createContainer(
     tag,
     hydrate,
     hydrationCallbacks,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
 }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index ae62134de1bc..5e1f8275b694 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -98,6 +98,7 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
@@ -109,6 +110,7 @@ export function createFiberRoot(
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
     tag,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
   root.current = uninitializedFiber;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 83d4de95b6a8..413a87fbcffc 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -98,6 +98,7 @@ export function createFiberRoot(
   tag: RootTag,
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
@@ -109,6 +110,7 @@ export function createFiberRoot(
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
     tag,
+    isStrictMode,
     concurrentUpdatesByDefaultOverride,
   );
   root.current = uninitializedFiber;
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index bc46f1d6d182..246790ead3a4 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -58,6 +58,7 @@ const {IsSomeRendererActing} = ReactSharedInternals;
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isConcurrent: boolean,
+  unstable_strictMode: boolean,
   unstable_concurrentUpdatesByDefault: boolean,
   ...
 };
@@ -436,6 +437,7 @@ function propsMatch(props: Object, filter: Object): boolean {
 function create(element: React$Element<any>, options: TestRendererOptions) {
   let createNodeMock = defaultTestOptions.createNodeMock;
   let isConcurrent = false;
+  let isStrictMode = false;
   let concurrentUpdatesByDefault = null;
   if (typeof options === 'object' && options !== null) {
     if (typeof options.createNodeMock === 'function') {
@@ -444,6 +446,9 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     if (options.unstable_isConcurrent === true) {
       isConcurrent = true;
     }
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
     if (allowConcurrentByDefault) {
       if (options.unstable_concurrentUpdatesByDefault !== undefined) {
         concurrentUpdatesByDefault =
@@ -461,6 +466,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isConcurrent ? ConcurrentRoot : LegacyRoot,
     false,
     null,
+    isStrictMode,
     concurrentUpdatesByDefault,
   );
   invariant(root != null, 'something went wrong');
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index ca651fdefaf2..b1fb0bcc270a 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -65,6 +65,28 @@ describe('ReactStrictMode', () => {
     });
 
     if (__DEV__) {
+      // @gate experimental
+      it('should support enabling strict mode via createRoot option', () => {
+        act(() => {
+          const container = document.createElement('div');
+          const root = ReactDOM.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',
+        ]);
+      });
+
       // @gate experimental
       it('should include legacy + strict effects mode', () => {
         act(() => {

From 67ebdf88bfebb728f48d9842c479b4fac545a43d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 May 2021 22:28:17 -0400
Subject: [PATCH 0520/1603] Fix DevTools bug with Suspense+LegacyHidden
 component (#21432)

---
 packages/react-devtools-shared/src/backend/agent.js    | 5 ++++-
 packages/react-devtools-shared/src/backend/renderer.js | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index e665235271ca..7470070455c0 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -676,7 +676,10 @@ export default class Agent extends EventEmitter<{|
 
   onHookOperations = (operations: Array<number>) => {
     if (__DEBUG__) {
-      debug('onHookOperations', operations);
+      debug(
+        'onHookOperations',
+        `(${operations.length}) [${operations.join(', ')}]`,
+      );
     }
 
     // TODO:
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 18fa9d7efdda..3afbbf3dd443 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -534,6 +534,7 @@ export function attach(
     HostText,
     IncompleteClassComponent,
     IndeterminateComponent,
+    LegacyHiddenComponent,
     MemoComponent,
     OffscreenComponent,
     SimpleMemoComponent,
@@ -841,6 +842,7 @@ export function attach(
       case HostPortal:
       case HostText:
       case Fragment:
+      case LegacyHiddenComponent:
       case OffscreenComponent:
         return true;
       case HostRoot:

From 014edf19808d5f34c174fec99c1a7792c734ba7a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 May 2021 22:35:30 -0400
Subject: [PATCH 0521/1603] Prepare DevTools 4.13.1 release

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 9 +++++++++
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 8ccbd92c458e..a398573bb065 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.13.0",
+  "version": "4.13.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 837c907a9319..ea0ea378b110 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.13.0",
-  "version_name": "4.13.0",
+  "version": "4.13.1",
+  "version_name": "4.13.1",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 7a82b47f37e8..ede740a89838 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.13.0",
-  "version_name": "4.13.0",
+  "version": "4.13.1",
+  "version_name": "4.13.1",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 6babb60e95d4..8f6043ab2b32 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.13.0",
+  "version": "4.13.1",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 9bb4684a7d63..3f8e809e6cf9 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.13.0",
+  "version": "4.13.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 65bf7a0a1c3b..f2dc2d57fe36 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,15 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index d86ea73821e4..ec26672e2149 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.13.0",
+  "version": "4.13.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.13.0",
+    "react-devtools-core": "4.13.1",
     "update-notifier": "^2.1.0"
   }
 }

From 8ea11306ad473b26a2c899ef7a893d25413f3510 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 5 May 2021 11:40:54 -0400
Subject: [PATCH 0522/1603] Allow complex objects as children of option only if
 value is provided (#21431)

---
 .../src/__tests__/ReactDOMOption-test.js      | 115 +++++++++++++++---
 .../ReactDOMServerIntegrationSelect-test.js   |  28 ++---
 .../react-dom/src/client/ReactDOMComponent.js |   8 +-
 .../src/client/ReactDOMHostConfig.js          |   1 -
 .../react-dom/src/client/ReactDOMOption.js    |  76 ++++--------
 .../src/server/ReactDOMServerFormatConfig.js  |  17 ++-
 .../src/server/ReactPartialRenderer.js        |  20 ++-
 7 files changed, 164 insertions(+), 101 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMOption-test.js b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
index a81dd32f1f1b..4271b87386c2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMOption-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMOption-test.js
@@ -12,12 +12,14 @@
 describe('ReactDOMOption', () => {
   let React;
   let ReactDOM;
+  let ReactDOMServer;
   let ReactTestUtils;
 
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
     ReactTestUtils = require('react-dom/test-utils');
   });
 
@@ -32,9 +34,9 @@ describe('ReactDOMOption', () => {
     expect(node.innerHTML).toBe('1 foo');
   });
 
-  it('should ignore and warn invalid children types', () => {
+  it('should warn for invalid child tags', () => {
     const el = (
-      <option>
+      <option value="12">
         {1} <div /> {2}
       </option>
     );
@@ -42,10 +44,45 @@ describe('ReactDOMOption', () => {
     expect(() => {
       node = ReactTestUtils.renderIntoDocument(el);
     }).toErrorDev(
-      'Only strings and numbers are supported as <option> children.\n' +
+      'validateDOMNesting(...): <div> cannot appear as a child of <option>.\n' +
+        '    in div (at **)\n' +
         '    in option (at **)',
     );
-    expect(node.innerHTML).toBe('1 [object Object] 2');
+    expect(node.innerHTML).toBe('1 <div></div> 2');
+    ReactTestUtils.renderIntoDocument(el);
+  });
+
+  it('should warn for component child if no value prop is provided', () => {
+    function Foo() {
+      return '2';
+    }
+    const el = (
+      <option>
+        {1} <Foo /> {3}
+      </option>
+    );
+    let node;
+    expect(() => {
+      node = ReactTestUtils.renderIntoDocument(el);
+    }).toErrorDev(
+      'Cannot infer the option value of complex children. ' +
+        'Pass a `value` prop or use a plain string as children to <option>.',
+    );
+    expect(node.innerHTML).toBe('1 2 3');
+    ReactTestUtils.renderIntoDocument(el);
+  });
+
+  it('should not warn for component child if value prop is provided', () => {
+    function Foo() {
+      return '2';
+    }
+    const el = (
+      <option value="123">
+        {1} <Foo /> {3}
+      </option>
+    );
+    const node = ReactTestUtils.renderIntoDocument(el);
+    expect(node.innerHTML).toBe('1 2 3');
     ReactTestUtils.renderIntoDocument(el);
   });
 
@@ -91,7 +128,7 @@ describe('ReactDOMOption', () => {
 
   it('should support element-ish child', () => {
     // This is similar to <fbt>.
-    // It's important that we toString it.
+    // We don't toString it because you must instead provide a value prop.
     const obj = {
       $$typeof: Symbol.for('react.element'),
       type: props => props.content,
@@ -105,37 +142,42 @@ describe('ReactDOMOption', () => {
       },
     };
 
-    let node = ReactTestUtils.renderIntoDocument(<option>{obj}</option>);
+    let node = ReactTestUtils.renderIntoDocument(
+      <option value="a">{obj}</option>,
+    );
     expect(node.innerHTML).toBe('hello');
 
-    node = ReactTestUtils.renderIntoDocument(<option>{[obj]}</option>);
+    node = ReactTestUtils.renderIntoDocument(
+      <option value="b">{[obj]}</option>,
+    );
     expect(node.innerHTML).toBe('hello');
 
-    expect(() => {
-      node = ReactTestUtils.renderIntoDocument(
-        <option>
-          {obj}
-          <span />
-        </option>,
-      );
-    }).toErrorDev(
-      'Only strings and numbers are supported as <option> children.',
+    node = ReactTestUtils.renderIntoDocument(
+      <option value={obj}>{obj}</option>,
     );
-    expect(node.innerHTML).toBe('hello[object Object]');
+    expect(node.innerHTML).toBe('hello');
+    expect(node.value).toBe('hello');
 
     node = ReactTestUtils.renderIntoDocument(
-      <option>
+      <option value={obj}>
         {'1'}
         {obj}
         {2}
       </option>,
     );
     expect(node.innerHTML).toBe('1hello2');
+    expect(node.value).toBe('hello');
   });
 
   it('should be able to use dangerouslySetInnerHTML on option', () => {
     const stub = <option dangerouslySetInnerHTML={{__html: 'foobar'}} />;
-    const node = ReactTestUtils.renderIntoDocument(stub);
+    let node;
+    expect(() => {
+      node = ReactTestUtils.renderIntoDocument(stub);
+    }).toErrorDev(
+      'Pass a `value` prop if you set dangerouslyInnerHTML so React knows which value should be selected.\n' +
+        '    in option (at **)',
+    );
 
     expect(node.innerHTML).toBe('foobar');
   });
@@ -169,4 +211,39 @@ describe('ReactDOMOption', () => {
     ReactDOM.render(<select value="gorilla">{options}</select>, container);
     expect(node.selectedIndex).toEqual(2);
   });
+
+  it('generates a warning and hydration error when an invalid nested tag is used as a child', () => {
+    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);
+
+    const option = container.firstChild.firstChild;
+    expect(option.nodeName).toBe('OPTION');
+
+    expect(option.textContent).toBe('BarFooBaz');
+    expect(option.selected).toBe(true);
+
+    expect(() => ReactDOM.hydrate(children, container)).toErrorDev([
+      'Text content did not match. Server: "FooBaz" Client: "Foo"',
+      'validateDOMNesting(...): <div> cannot appear as a child of <option>.',
+    ]);
+
+    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__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 3871ad975e74..1ad9b0bb6454 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -156,13 +156,12 @@ describe('ReactDOMServerIntegrationSelect', () => {
           </option>
           <option
             id="baz"
-            value="baz"
             dangerouslySetInnerHTML={{
-              __html: 'Baz',
+              __html: 'Baz', // This warns because no value prop is passed.
             }}
           />
         </select>,
-        1,
+        2,
       );
       expectSelectValue(e, 'bar');
     },
@@ -228,26 +227,23 @@ describe('ReactDOMServerIntegrationSelect', () => {
       </select>,
     );
     const option = e.options[0];
-    expect(option.childNodes.length).toBe(1);
-    expect(option.childNodes[0].nodeType).toBe(3);
-    expect(option.childNodes[0].nodeValue).toBe('A B');
+    expect(option.textContent).toBe('A B');
+    expect(option.value).toBe('bar');
+    expect(option.selected).toBe(true);
   });
 
   itRenders(
-    'a select option with flattened children and a warning',
+    'a select option with flattened children no value',
     async render => {
       const e = await render(
-        <select readOnly={true} value="bar">
-          <option value="bar">
-            {['Bar', false, 'Foo', <div key="1" />, 'Baz']}
-          </option>
+        <select value="A B" readOnly={true}>
+          <option>A {'B'}</option>
         </select>,
-        1,
       );
-      expect(e.getAttribute('value')).toBe(null);
-      expect(e.getAttribute('defaultValue')).toBe(null);
-      expect(e.firstChild.innerHTML).toBe('BarFoo[object Object]Baz');
-      expect(e.firstChild.selected).toBe(true);
+      const option = e.options[0];
+      expect(option.textContent).toBe('A B');
+      expect(option.value).toBe('A B');
+      expect(option.selected).toBe(true);
     },
   );
 });
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 095512b75b75..635c67f5d770 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -29,7 +29,6 @@ import {
   restoreControlledState as ReactDOMInputRestoreControlledState,
 } from './ReactDOMInput';
 import {
-  getHostProps as ReactDOMOptionGetHostProps,
   postMountWrapper as ReactDOMOptionPostMountWrapper,
   validateProps as ReactDOMOptionValidateProps,
 } from './ReactDOMOption';
@@ -535,7 +534,7 @@ export function setInitialProperties(
       break;
     case 'option':
       ReactDOMOptionValidateProps(domElement, rawProps);
-      props = ReactDOMOptionGetHostProps(domElement, rawProps);
+      props = rawProps;
       break;
     case 'select':
       ReactDOMSelectInitWrapperState(domElement, rawProps);
@@ -615,11 +614,6 @@ export function diffProperties(
       nextProps = ReactDOMInputGetHostProps(domElement, nextRawProps);
       updatePayload = [];
       break;
-    case 'option':
-      lastProps = ReactDOMOptionGetHostProps(domElement, lastRawProps);
-      nextProps = ReactDOMOptionGetHostProps(domElement, nextRawProps);
-      updatePayload = [];
-      break;
     case 'select':
       lastProps = ReactDOMSelectGetHostProps(domElement, lastRawProps);
       nextProps = ReactDOMSelectGetHostProps(domElement, nextRawProps);
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 22702453fd13..908719d67989 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -351,7 +351,6 @@ export function prepareUpdate(
 export function shouldSetTextContent(type: string, props: Props): boolean {
   return (
     type === 'textarea' ||
-    type === 'option' ||
     type === 'noscript' ||
     typeof props.children === 'string' ||
     typeof props.children === 'number' ||
diff --git a/packages/react-dom/src/client/ReactDOMOption.js b/packages/react-dom/src/client/ReactDOMOption.js
index 56a4efe63151..b9103242c35c 100644
--- a/packages/react-dom/src/client/ReactDOMOption.js
+++ b/packages/react-dom/src/client/ReactDOMOption.js
@@ -12,27 +12,7 @@ import {getToStringValue, toString} from './ToStringValue';
 
 let didWarnSelectedSetOnOption = false;
 let didWarnInvalidChild = false;
-
-function flattenChildren(children) {
-  let content = '';
-
-  // Flatten children. We'll warn if they are invalid
-  // during validateProps() which runs for hydration too.
-  // Note that this would throw on non-element objects.
-  // Elements are stringified (which is normally irrelevant
-  // but matters for <fbt>).
-  Children.forEach(children, function(child) {
-    if (child == null) {
-      return;
-    }
-    content += (child: any);
-    // Note: we don't warn about invalid children here.
-    // Instead, this is done separately below so that
-    // it happens during the hydration code path too.
-  });
-
-  return content;
-}
+let didWarnInvalidInnerHTML = false;
 
 /**
  * Implements an <option> host component that warns when `selected` is set.
@@ -40,28 +20,33 @@ function flattenChildren(children) {
 
 export function validateProps(element: Element, props: Object) {
   if (__DEV__) {
-    // This mirrors the code path above, but runs for hydration too.
-    // Warn about invalid children here so that client and hydration are consistent.
-    // TODO: this seems like it could cause a DEV-only throw for hydration
-    // if children contains a non-element object. We should try to avoid that.
-    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') {
-          return;
-        }
-        if (typeof (child: any).type !== 'string') {
-          return;
-        }
-        if (!didWarnInvalidChild) {
-          didWarnInvalidChild = true;
+    // 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') {
+            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(
-            'Only strings and numbers are supported as <option> children.',
+            'Pass a `value` prop if you set dangerouslyInnerHTML so React knows ' +
+              'which value should be selected.',
           );
         }
-      });
+      }
     }
 
     // TODO: Remove support for `selected` in <option>.
@@ -81,14 +66,3 @@ export function postMountWrapper(element: Element, props: Object) {
     element.setAttribute('value', toString(getToStringValue(props.value)));
   }
 }
-
-export function getHostProps(element: Element, props: Object) {
-  const hostProps = {children: undefined, ...props};
-  const content = flattenChildren(props.children);
-
-  if (content) {
-    hostProps.children = content;
-  }
-
-  return hostProps;
-}
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 941ee252be00..09ac84a67322 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -563,6 +563,7 @@ let didWarnDefaultChecked = false;
 let didWarnDefaultSelectValue = false;
 let didWarnDefaultTextareaValue = false;
 let didWarnInvalidOptionChildren = false;
+let didWarnInvalidOptionInnerHTML = false;
 let didWarnSelectedSetOnOption = false;
 
 function checkSelectProp(props, propName) {
@@ -667,7 +668,8 @@ function flattenOptionChildren(children: mixed): string {
       ) {
         didWarnInvalidOptionChildren = true;
         console.error(
-          'Only strings and numbers are supported as <option> children.',
+          'Cannot infer the option value of complex children. ' +
+            'Pass a `value` prop or use a plain string as children to <option>.',
         );
       }
     }
@@ -736,7 +738,18 @@ function pushStartOption(
     if (value !== null) {
       stringValue = '' + value;
     } else {
-      stringValue = children = flattenOptionChildren(children);
+      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
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 90fbfd6ad439..dd568c16363e 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -188,6 +188,7 @@ let didWarnDefaultChecked = false;
 let didWarnDefaultSelectValue = false;
 let didWarnDefaultTextareaValue = false;
 let didWarnInvalidOptionChildren = false;
+let didWarnInvalidOptionInnerHTML = false;
 const didWarnAboutNoopUpdateForComponent = {};
 const didWarnAboutBadClass = {};
 const didWarnAboutModulePatternComponent = {};
@@ -334,7 +335,8 @@ function flattenOptionChildren(children: mixed): ?string {
       ) {
         didWarnInvalidOptionChildren = true;
         console.error(
-          'Only strings and numbers are supported as <option> children.',
+          'Cannot infer the option value of complex children. ' +
+            'Pass a `value` prop or use a plain string as children to <option>.',
         );
       }
     }
@@ -1507,13 +1509,23 @@ class ReactDOMServerRenderer {
     } else if (tag === 'option') {
       let selected = null;
       const selectValue = this.currentSelectValue;
-      const optionChildren = flattenOptionChildren(props.children);
       if (selectValue != null) {
         let value;
         if (props.value != null) {
           value = props.value + '';
         } else {
-          value = optionChildren;
+          if (__DEV__) {
+            if (props.dangerouslySetInnerHTML != null) {
+              if (!didWarnInvalidOptionInnerHTML) {
+                didWarnInvalidOptionInnerHTML = true;
+                console.error(
+                  'Pass a `value` prop if you set dangerouslyInnerHTML so React knows ' +
+                    'which value should be selected.',
+                );
+              }
+            }
+          }
+          value = flattenOptionChildren(props.children);
         }
         selected = false;
         if (isArray(selectValue)) {
@@ -1531,12 +1543,10 @@ class ReactDOMServerRenderer {
         props = Object.assign(
           {
             selected: undefined,
-            children: undefined,
           },
           props,
           {
             selected: selected,
-            children: optionChildren,
           },
         );
       }

From 12751d29914a75f335ce058bfe4e4a57e1304e33 Mon Sep 17 00:00:00 2001
From: Gang Chen <13298548+MoonBall@users.noreply.github.com>
Date: Thu, 6 May 2021 00:39:06 +0800
Subject: [PATCH 0523/1603] fix: version in nvmrc (#21430)

---
 .nvmrc | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.nvmrc b/.nvmrc
index 2d3beb1d0214..9ab73601cda4 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v12.16.2
+v12.17.0

From 212d2909d3c66eb5950b915b1f079f261e3ccb7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 5 May 2021 19:13:45 -0400
Subject: [PATCH 0524/1603] [Fizz] Make some tests more resilient to
 implementation details (#21438)

* Make some tests resilient against changing the specifics of the HTML

This ensures that for example flipping order of attributes doesn't matter.

* Use getVisibleChildren approach for more resilient tests
---
 .../src/__tests__/ReactDOMSelect-test.js      | 52 +++++++++++------
 .../ReactDOMServerSuspense-test.internal.js   | 57 +++++++++++++++----
 2 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index b9d76492c73b..3368f09f585a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -442,10 +442,15 @@ describe('ReactDOMSelect', () => {
         <option value="gorilla">A gorilla!</option>
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
-    expect(markup).not.toContain('<option selected="" value="gorilla"');
+    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', () => {
@@ -456,10 +461,15 @@ describe('ReactDOMSelect', () => {
         <option value="gorilla">A gorilla!</option>
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
-    expect(markup).not.toContain('<option selected="" value="gorilla"');
+    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', () => {
@@ -487,10 +497,15 @@ describe('ReactDOMSelect', () => {
         />
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
-    expect(markup).not.toContain('<option selected="" value="gorilla"');
+    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', () => {
@@ -501,10 +516,15 @@ describe('ReactDOMSelect', () => {
         <option value="gorilla">A gorilla!</option>
       </select>
     );
-    const markup = ReactDOMServer.renderToString(stub);
-    expect(markup).toContain('<option selected="" value="giraffe"');
-    expect(markup).toContain('<option selected="" value="gorilla"');
-    expect(markup).not.toContain('<option selected="" value="monkey"');
+    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', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 7b28d572ccce..3fe4cc2fcdc4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -54,6 +54,45 @@ describe('ReactDOMServerSuspense', () => {
     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;
+  }
+
   // @gate experimental || www
   it('should render the children when no promise is thrown', async () => {
     const c = await serverRender(
@@ -63,10 +102,7 @@ describe('ReactDOMServerSuspense', () => {
         </React.Suspense>
       </div>,
     );
-    const e = c.children[0];
-
-    expect(e.tagName).toBe('DIV');
-    expect(e.textContent).toBe('Children');
+    expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
   });
 
   // @gate experimental || www
@@ -78,10 +114,7 @@ describe('ReactDOMServerSuspense', () => {
         </React.Suspense>
       </div>,
     );
-    const e = c.children[0];
-
-    expect(e.tagName).toBe('DIV');
-    expect(e.textContent).toBe('Fallback');
+    expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
   });
 
   // @gate experimental || www
@@ -98,10 +131,12 @@ describe('ReactDOMServerSuspense', () => {
         </React.Suspense>
       </div>,
     );
-    const e = c.children[0];
 
-    expect(e.innerHTML).toBe(
-      '<div>Children</div><!--$!--><div>Fallback</div><!--/$-->',
+    expect(getVisibleChildren(c)).toEqual(
+      <div>
+        <div>Children</div>
+        <div>Fallback</div>
+      </div>,
     );
   });
 

From 46ef1ab32ad2119ce268b8e292bfa0da7705b852 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 5 May 2021 21:22:27 -0400
Subject: [PATCH 0525/1603] Convert emulated-Fizz PartialHydration tests to
 Fizz tests (#21437)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 173 +++++++++++
 ...DOMServerPartialHydration-test.internal.js | 275 ------------------
 2 files changed, 173 insertions(+), 275 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index c2074d80418d..ee91831e9f1c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -16,6 +16,7 @@ let React;
 let ReactDOM;
 let ReactDOMFizzServer;
 let Suspense;
+let SuspenseList;
 let PropTypes;
 let textCache;
 let document;
@@ -37,6 +38,7 @@ describe('ReactDOMFizzServer', () => {
     }
     Stream = require('stream');
     Suspense = React.Suspense;
+    SuspenseList = React.unstable_SuspenseList;
     PropTypes = require('prop-types');
 
     textCache = new Map();
@@ -476,6 +478,7 @@ describe('ReactDOMFizzServer', () => {
     });
 
     // We're still showing a fallback.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // Attempt to hydrate the content.
     const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
@@ -507,6 +510,176 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(h1);
   });
 
+  // @gate experimental
+  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(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App />,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      startWriting();
+    });
+
+    // We're still showing a fallback.
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    expect(loggedErrors).toEqual([]);
+
+    // Attempt to hydrate the content.
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App />);
+    Scheduler.unstable_flushAll();
+
+    // 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(async () => {
+      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.
+    Scheduler.unstable_flushAll();
+
+    // 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 experimental
+  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 (
+        <SuspenseList revealOrder="forwards">
+          {a}
+          {b}
+          {showMore ? (
+            <Suspense fallback="Loading C">
+              <span>C</span>
+            </Suspense>
+          ) : null}
+        </SuspenseList>
+      );
+    }
+
+    // We originally suspend the boundary and start streaming the loading state.
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App showMore={false} />,
+        writable,
+      );
+      startWriting();
+    });
+
+    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    root.render(<App showMore={false} />);
+    Scheduler.unstable_flushAll();
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+    expect(getVisibleChildren(container)).toEqual([
+      'Loading A',
+      // TODO: This is incorrect. It should be "Loading B" but Fizz SuspenseList
+      // isn't implemented fully yet.
+      <span>B</span>,
+    ]);
+
+    // Add more rows before we've hydrated the first two.
+    root.render(<App showMore={true} />);
+    Scheduler.unstable_flushAll();
+
+    // We're not hydrated yet.
+    expect(ref.current).toBe(null);
+
+    // We haven't resolved yet.
+    expect(getVisibleChildren(container)).toEqual([
+      'Loading A',
+      // TODO: This is incorrect. It should be "Loading B" but Fizz SuspenseList
+      // isn't implemented fully yet.
+      <span>B</span>,
+      'Loading C',
+    ]);
+
+    await act(async () => {
+      await resolveText('A');
+    });
+
+    Scheduler.unstable_flushAll();
+
+    expect(getVisibleChildren(container)).toEqual([
+      <span>A</span>,
+      <span>B</span>,
+      <span>C</span>,
+    ]);
+
+    const span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
+  });
+
   // @gate experimental
   it('client renders a boundary if it does not resolve before aborting', async () => {
     function App() {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index bc0df9fa6c3f..02a388a1898e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1358,189 +1358,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
-  // @gate experimental
-  it('waits for pending content to come in from the server and then hydrates it', 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>
-      );
-    }
-
-    // We're going to simulate what Fizz will do during streaming rendering.
-
-    // First we generate the HTML of the loading state.
-    suspend = true;
-    const loadingHTML = ReactDOMServer.renderToString(<App />);
-    // Then we generate the HTML of the final content.
-    suspend = false;
-    const finalHTML = ReactDOMServer.renderToString(<App />);
-
-    const container = document.createElement('div');
-    container.innerHTML = loadingHTML;
-
-    const suspenseNode = container.firstChild.firstChild;
-    expect(suspenseNode.nodeType).toBe(8);
-    // Put the suspense node in hydration state.
-    suspenseNode.data = '$?';
-
-    // This will simulates new content streaming into the document and
-    // replacing the fallback with final content.
-    function streamInContent() {
-      const temp = document.createElement('div');
-      temp.innerHTML = finalHTML;
-      const finalSuspenseNode = temp.firstChild.firstChild;
-      const fallbackContent = suspenseNode.nextSibling;
-      const finalContent = finalSuspenseNode.nextSibling;
-      suspenseNode.parentNode.replaceChild(finalContent, fallbackContent);
-      suspenseNode.data = '$';
-      if (suspenseNode._reactRetry) {
-        suspenseNode._reactRetry();
-      }
-    }
-
-    // We're still showing a fallback.
-    expect(container.getElementsByTagName('span').length).toBe(0);
-
-    // Attempt to hydrate the content.
-    suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
-    // We're still loading because we're waiting for the server to stream more content.
-    expect(container.textContent).toBe('Loading...');
-
-    // The server now updates the content in place in the fallback.
-    streamInContent();
-
-    // The final HTML is now in place.
-    expect(container.textContent).toBe('Hello');
-    const span = container.getElementsByTagName('span')[0];
-
-    // But it is not yet hydrated.
-    expect(ref.current).toBe(null);
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
-    // Now it's hydrated.
-    expect(ref.current).toBe(span);
-  });
-
-  // @gate experimental
-  it('handles an error on the client if the server ends up erroring', async () => {
-    let suspend = false;
-    const promise = new Promise(resolvePromise => {});
-    const ref = React.createRef();
-
-    function Child() {
-      if (suspend) {
-        throw promise;
-      } else {
-        throw new Error('Error Message');
-      }
-    }
-
-    class ErrorBoundary extends React.Component {
-      state = {error: null};
-      static getDerivedStateFromError(error) {
-        return {error};
-      }
-      render() {
-        if (this.state.error) {
-          return <div ref={ref}>{this.state.error.message}</div>;
-        }
-        return this.props.children;
-      }
-    }
-
-    function App() {
-      return (
-        <ErrorBoundary>
-          <div>
-            <Suspense fallback="Loading...">
-              <span ref={ref}>
-                <Child />
-              </span>
-            </Suspense>
-          </div>
-        </ErrorBoundary>
-      );
-    }
-
-    // We're going to simulate what Fizz will do during streaming rendering.
-
-    // First we generate the HTML of the loading state.
-    suspend = true;
-    const loadingHTML = ReactDOMServer.renderToString(<App />);
-
-    const container = document.createElement('div');
-    container.innerHTML = loadingHTML;
-
-    const suspenseNode = container.firstChild.firstChild;
-    expect(suspenseNode.nodeType).toBe(8);
-    // Put the suspense node in hydration state.
-    suspenseNode.data = '$?';
-
-    // This will simulates the server erroring and putting the fallback
-    // as the final state.
-    function streamInError() {
-      suspenseNode.data = '$!';
-      if (suspenseNode._reactRetry) {
-        suspenseNode._reactRetry();
-      }
-    }
-
-    // We're still showing a fallback.
-    expect(container.getElementsByTagName('span').length).toBe(0);
-
-    // Attempt to hydrate the content.
-    suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
-    // We're still loading because we're waiting for the server to stream more content.
-    expect(container.textContent).toBe('Loading...');
-
-    // The server now updates the content in place in the fallback.
-    streamInError();
-
-    // 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(container.textContent).toBe('Loading...');
-    expect(ref.current).toBe(null);
-
-    Scheduler.unstable_flushAll();
-    jest.runAllTimers();
-
-    // Hydrating should've generated an error and replaced the suspense boundary.
-    expect(container.textContent).toBe('Error Message');
-
-    const div = container.getElementsByTagName('div')[0];
-    expect(ref.current).toBe(div);
-  });
-
   // @gate experimental
   it('shows inserted items in a SuspenseList before content is hydrated', async () => {
     let suspend = false;
@@ -1702,98 +1519,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('ALoading B');
   });
 
-  // @gate experimental
-  it('shows inserted items before pending in a SuspenseList as fallbacks', 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">
-          {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 suspenseNode = container.firstChild;
-    expect(suspenseNode.nodeType).toBe(8);
-    // Put the suspense node in pending state.
-    suspenseNode.data = '$?';
-
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
-    suspend = true;
-    act(() => {
-      root.render(<App showMore={false} />);
-    });
-
-    // We're not hydrated yet.
-    expect(ref.current).toBe(null);
-    expect(container.textContent).toBe('AB');
-
-    // Add more rows before we've hydrated the first two.
-    act(() => {
-      root.render(<App showMore={true} />);
-    });
-
-    // We're not hydrated yet.
-    expect(ref.current).toBe(null);
-
-    // Since the first two are already showing their final content
-    // we should be able to show the real content.
-    expect(container.textContent).toBe('ABLoading C');
-
-    suspend = false;
-    await act(async () => {
-      // Resolve the boundary to be in its resolved final state.
-      suspenseNode.data = '$';
-      if (suspenseNode._reactRetry) {
-        suspenseNode._reactRetry();
-      }
-      await resolve();
-    });
-
-    expect(container.textContent).toBe('ABC');
-  });
-
   // @gate experimental
   it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
     let suspend = false;

From bd070eb2c489a1f758e4a55b193820af7346fa15 Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshua.gross@gmail.com>
Date: Wed, 5 May 2021 21:09:04 -0700
Subject: [PATCH 0526/1603] Enable setJSResponder/setIsJSResponder for React
 Native Fabric (#21439)

* Enable setJSResponder/setIsJSResponder for React Native

* yarn prettier

* add types to react-native-host-hooks

* yarn prettier

* mock setIsJSResponder
---
 .../src/ReactFabricGlobalResponderHandler.js   | 18 +++++++++++++++++-
 .../InitializeNativeFabricUIManager.js         |  1 +
 scripts/flow/react-native-host-hooks.js        |  5 +++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
index e9aae2e4fd26..e6d1a68465e4 100644
--- a/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
+++ b/packages/react-native-renderer/src/ReactFabricGlobalResponderHandler.js
@@ -19,7 +19,23 @@ const ReactFabricGlobalResponderHandler = {
     );
 
     if (isFabric) {
-      // Noop for now until setJSResponder/clearJSResponder are supported in Fabric
+      if (from) {
+        // equivalent to clearJSResponder
+        nativeFabricUIManager.setIsJSResponder(
+          from.stateNode.node,
+          false,
+          blockNativeResponder || false,
+        );
+      }
+
+      if (to) {
+        // equivalent to setJSResponder
+        nativeFabricUIManager.setIsJSResponder(
+          to.stateNode.node,
+          true,
+          blockNativeResponder || false,
+        );
+      }
     } else {
       if (to !== null) {
         const tag = to.stateNode.canonical._nativeTag;
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index 686dc72702de..ee3c7df98508 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -176,6 +176,7 @@ const RCTFabricUIManager = {
     );
     success(1, 1, 100, 100);
   }),
+  setIsJSResponder: jest.fn(),
 };
 
 global.nativeFabricUIManager = RCTFabricUIManager;
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 17cc6fe9c952..92f766dfad41 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -179,6 +179,11 @@ declare var nativeFabricUIManager: {
     locationY: number,
     callback: (Fiber) => void,
   ) => void,
+  setIsJSResponder: (
+    node: Node,
+    isJsResponder: boolean,
+    blockNativeResponder: boolean,
+  ) => void,
   ...
 };
 

From 1bb8987cc98e09af20a1f9d549433eb9960f669d Mon Sep 17 00:00:00 2001
From: faebzz <fabian@schaper.li>
Date: Fri, 7 May 2021 03:03:21 +0200
Subject: [PATCH 0527/1603] Renamed function in error log issue #21446 (#21449)

---
 packages/shared/getComponentNameFromType.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/getComponentNameFromType.js b/packages/shared/getComponentNameFromType.js
index 7428f8c11d73..a8e1d088664e 100644
--- a/packages/shared/getComponentNameFromType.js
+++ b/packages/shared/getComponentNameFromType.js
@@ -53,7 +53,7 @@ export default function getComponentNameFromType(type: mixed): string | null {
   if (__DEV__) {
     if (typeof (type: any).tag === 'number') {
       console.error(
-        'Received an unexpected object in getComponentName(). ' +
+        'Received an unexpected object in getComponentNameFromType(). ' +
           'This is likely a bug in React. Please file an issue.',
       );
     }

From 85b543c6b477def6366e3442d2eb432f6510cdfa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 May 2021 08:46:58 -0400
Subject: [PATCH 0528/1603] Added new GitHub issue form for React DevTools bug
 reports (#21450)

Added a new bug report template built with GitHub issue forms:
https://gh-community.github.io/issue-template-feedback/structured/

And updated DevTools bug report link to send information formatted for this new template.
---
 .../ISSUE_TEMPLATE/devtools_bug_report.yml    | 78 +++++++++++++++++++
 .../react-devtools-core/webpack.backend.js    |  1 +
 .../react-devtools-core/webpack.standalone.js |  1 +
 .../webpack.backend.js                        |  1 +
 .../webpack.config.js                         |  1 +
 .../react-devtools-inline/webpack.config.js   |  1 +
 .../views/ErrorBoundary/ReportNewIssue.js     | 64 ++++++---------
 .../react-devtools-shell/webpack.config.js    |  1 +
 8 files changed, 107 insertions(+), 41 deletions(-)
 create mode 100644 .github/ISSUE_TEMPLATE/devtools_bug_report.yml

diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
new file mode 100644
index 000000000000..9e59c21af7b1
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
@@ -0,0 +1,78 @@
+name: "DevTools bug report"
+description: "Report a problem with React DevTools"
+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?
+    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 may 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: input
+  id: automated_github_query_string
+  attributes:
+    label: GitHub query string (automated)
+    description: |
+      Please do not edit this field.
\ No newline at end of file
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 79d97e6a84b3..e33e4b89c6dd 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -54,6 +54,7 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 64556ae65812..8f5b4e6dcac9 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -54,6 +54,7 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index 885d9aa03b50..6f63b44e1bab 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -51,6 +51,7 @@ module.exports = {
       __DEV__: true,
       __PROFILE__: false,
       __EXPERIMENTAL__: true,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
     }),
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index f754a99b86a5..df813e82bcc9 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -58,6 +58,7 @@ module.exports = {
       __EXTENSION__: true,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 6be627a6262b..30481673ad0c 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -52,6 +52,7 @@ module.exports = {
       __EXTENSION__: false,
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index 3546c9438711..7dd12be65728 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -12,9 +12,14 @@ import Icon from '../Icon';
 import {searchGitHubIssuesURL} from './githubAPI';
 import styles from './shared.css';
 
-function encodeURIWrapper(string: string): string {
-  return encodeURI(string).replace(/#/g, '%23');
-}
+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,
@@ -35,44 +40,21 @@ export default function ReportNewIssue({
   const gitHubAPISearch =
     errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)';
 
-  const title = `Error: "${errorMessage || ''}"`;
-  const labels = ['Component: Developer Tools', 'Status: Unconfirmed'];
-
-  const body = `
-<!-- Please answer both questions below before submitting this issue. -->
-
-### Which website or app were you using when the bug happened?
-
-Please provide a link to the URL of the website (if it is public), a CodeSandbox (https://codesandbox.io/s/new) example that reproduces the bug, or a project on GitHub that we can checkout and run locally.
-
-### What were you doing on the website or app when the bug happened?
-
-If possible, please describe how to reproduce this bug on the website or app mentioned above:
-1. <!-- FILL THIS IN -->
-2. <!-- FILL THIS IN -->
-3. <!-- FILL THIS IN -->
-
-<!--------------------------------------------------->
-<!-- Please do not remove the text below this line -->
-<!--------------------------------------------------->
-
-### Generated information
-
-DevTools version: ${process.env.DEVTOOLS_VERSION || ''}
-
-Call stack:
-${callStack || '(none)'}
-
-Component stack:
-${componentStack || '(none)'}
-
-GitHub URL search query:
-${gitHubAPISearch}
-  `;
-
-  bugURL += `/issues/new?labels=${encodeURIWrapper(
-    labels.join(','),
-  )}&title=${encodeURIWrapper(title)}&body=${encodeURIWrapper(body.trim())}`;
+  const title = `[DevTools Error] ${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}>
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index c61e8850295c..a64d2838dbcb 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -52,6 +52,7 @@ const config = {
       __PROFILE__: false,
       __TEST__: NODE_ENV === 'test',
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
     }),
   ],

From 6005a6ab2b097a7d17cbcd747469fd617165461c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 May 2021 08:48:34 -0400
Subject: [PATCH 0529/1603] Update devtools_bug_report.yml

---
 .github/ISSUE_TEMPLATE/devtools_bug_report.yml | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
index 9e59c21af7b1..d7516eca7904 100644
--- a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
@@ -70,9 +70,10 @@ body:
     description: |
       Please do not edit this field.
     render: text
-- type: input
+- type: textarea
   id: automated_github_query_string
   attributes:
     label: GitHub query string (automated)
     description: |
-      Please do not edit this field.
\ No newline at end of file
+      Please do not edit this field.
+    render: text

From 0a8fefca4ce34b9efa5043b875bbda371ca2bc96 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 May 2021 08:52:02 -0400
Subject: [PATCH 0530/1603] DevTools 4.13.1 -> 4.13.2

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 4 ++++
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index a398573bb065..e5e4133dce88 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.13.1",
+  "version": "4.13.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index ea0ea378b110..e9805236a125 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.13.1",
-  "version_name": "4.13.1",
+  "version": "4.13.2",
+  "version_name": "4.13.2",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index ede740a89838..1a0c6cce657d 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.13.1",
-  "version_name": "4.13.1",
+  "version": "4.13.2",
+  "version_name": "4.13.2",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 8f6043ab2b32..e9c9f1cf912b 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.13.1",
+  "version": "4.13.2",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 3f8e809e6cf9..164e80e3ea53 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.13.1",
+  "version": "4.13.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index f2dc2d57fe36..6f675b4662cb 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,10 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index ec26672e2149..8a4778b7d7cd 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.13.1",
+  "version": "4.13.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.13.1",
+    "react-devtools-core": "4.13.2",
     "update-notifier": "^2.1.0"
   }
 }

From e468072e17e3c2e70fa6eca46a074ff3f948c38a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 May 2021 08:53:39 -0400
Subject: [PATCH 0531/1603] Updated release scripts to work around GitHub /
 Circle CI integration problems (#21434)

---
 .../print-summary.js                          |  7 ++----
 .../release/download-experimental-build.js    |  4 ----
 .../download-build-artifacts.js               |  8 ++++++-
 .../get-build-id-for-commit.js                |  0
 .../release/shared-commands/parse-params.js   | 23 +++++++++++++++----
 5 files changed, 28 insertions(+), 14 deletions(-)
 rename scripts/release/{ => shared-commands}/get-build-id-for-commit.js (100%)

diff --git a/scripts/release/download-experimental-build-commands/print-summary.js b/scripts/release/download-experimental-build-commands/print-summary.js
index 21e97c0dd504..6e7454a5a86a 100644
--- a/scripts/release/download-experimental-build-commands/print-summary.js
+++ b/scripts/release/download-experimental-build-commands/print-summary.js
@@ -5,9 +5,8 @@
 const clear = require('clear');
 const {join, relative} = require('path');
 const theme = require('../theme');
-const {getCommitFromCurrentBuild} = require('../utils');
 
-module.exports = async () => {
+module.exports = async ({build}) => {
   const commandPath = relative(
     process.env.PWD,
     join(__dirname, '../download-experimental-build.js')
@@ -15,13 +14,11 @@ module.exports = async () => {
 
   clear();
 
-  const commit = await getCommitFromCurrentBuild();
-
   const message = theme`
     {caution An experimental build has been downloaded!}
 
     You can download this build again by running:
-    {path   ${commandPath}} --commit={commit ${commit}}
+    {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
index 7f8b11dba122..c57ec4f1bf66 100755
--- a/scripts/release/download-experimental-build.js
+++ b/scripts/release/download-experimental-build.js
@@ -17,10 +17,6 @@ const run = async () => {
   try {
     addDefaultParamValue('-r', '--releaseChannel', 'experimental');
 
-    // Default to the latest commit in master.
-    // If this is a reproducible build (e.g. Firefox tester) a --commit will be specified.
-    addDefaultParamValue(null, '--commit', 'master');
-
     const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
     params.packages = await getPublicPackages(true);
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index cca62baabdef..f09b0f2c2809 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -51,8 +51,14 @@ const run = async ({build, cwd, releaseChannel}) => {
 };
 
 module.exports = async ({build, commit, cwd, releaseChannel}) => {
+  let buildLabel;
+  if (commit !== null) {
+    buildLabel = theme`commit {commit ${commit}} (build {build ${build}})`;
+  } else {
+    buildLabel = theme`build {build ${build}}`;
+  }
   return logPromise(
     run({build, cwd, releaseChannel}),
-    theme`Downloading artifacts from Circle CI for commit {commit ${commit}} (build {build ${build}})`
+    theme`Downloading artifacts from Circle CI for ${buildLabel}`
   );
 };
diff --git a/scripts/release/get-build-id-for-commit.js b/scripts/release/shared-commands/get-build-id-for-commit.js
similarity index 100%
rename from scripts/release/get-build-id-for-commit.js
rename to scripts/release/shared-commands/get-build-id-for-commit.js
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
index 5baec235b661..b632d0603368 100644
--- a/scripts/release/shared-commands/parse-params.js
+++ b/scripts/release/shared-commands/parse-params.js
@@ -3,10 +3,18 @@
 'use strict';
 
 const commandLineArgs = require('command-line-args');
-const getBuildIdForCommit = require('../get-build-id-for-commit');
+const getBuildIdForCommit = require('./get-build-id-for-commit');
 const theme = require('../theme');
+const {logPromise} = require('../utils');
 
 const paramDefinitions = [
+  {
+    name: 'build',
+    type: String,
+    description:
+      'CI build ID corresponding to the "process_artifacts_combined" task.',
+    defaultValue: null,
+  },
   {
     name: 'commit',
     type: String,
@@ -39,13 +47,20 @@ module.exports = async () => {
     process.exit(1);
   }
 
-  if (params.commit === null) {
-    console.error(theme.error`No --commit param specified.`);
+  if (params.build === null && params.commit === null) {
+    console.error(
+      theme.error`Either a --commit or --build param must be specified.`
+    );
     process.exit(1);
   }
 
   try {
-    params.build = await getBuildIdForCommit(params.commit);
+    if (params.build === null) {
+      params.build = await logPromise(
+        getBuildIdForCommit(params.commit),
+        theme`Getting build ID for commit "${params.commit}"`
+      );
+    }
   } catch (error) {
     console.error(theme.error(error));
     process.exit(1);

From 57768ef90bdb0110c7b9266185a8f6446934b331 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 7 May 2021 09:10:50 -0400
Subject: [PATCH 0532/1603] Update devtools_bug_report.yml

Tweaked label to include emoji characters.
---
 .github/ISSUE_TEMPLATE/devtools_bug_report.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
index d7516eca7904..f66a6360b842 100644
--- a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
@@ -1,4 +1,4 @@
-name: "DevTools bug report"
+name: "⚛️ 🛠 DevTools bug report"
 description: "Report a problem with React DevTools"
 title: "[DevTools Bug]: "
 labels: ["Component: Developer Tools", "Type: Bug", "Status: Unconfirmed"]

From 3890fb52fe3ca3c71f0422329248c36731ef9cbc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 8 May 2021 10:46:02 -0400
Subject: [PATCH 0533/1603] Update devtools_bug_report.yml

---
 .github/ISSUE_TEMPLATE/devtools_bug_report.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
index f66a6360b842..5fcaed978ea1 100644
--- a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
@@ -1,5 +1,5 @@
 name: "⚛️ 🛠 DevTools bug report"
-description: "Report a problem with React DevTools"
+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:

From b8fda6cabc7efc53356d87c6516d6a3d7eb1253c Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 11 May 2021 10:12:46 -0400
Subject: [PATCH 0534/1603] [React Native] Set allowConcurrentByDefault = true
 (#21491)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index a2b9cc8446c4..ce20f0ba79f5 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -60,7 +60,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = false;
-export const allowConcurrentByDefault = false;
+export const allowConcurrentByDefault = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 727e8764fc12..f0ed45768bf3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -59,7 +59,7 @@ export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = false;
-export const allowConcurrentByDefault = false;
+export const allowConcurrentByDefault = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

From 2bf4805e4bd63dab45cd7f5e1ad32ef8fed3f6ab Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 12 May 2021 11:28:14 -0400
Subject: [PATCH 0535/1603] Update entry point exports (#21488)

The following APIs have been added to the `react` stable entry point:
* `SuspenseList`
* `startTransition`
* `unstable_createMutableSource`
* `unstable_useMutableSource`
* `useDeferredValue`
* `useTransition`

The following APIs have been added or removed from the `react-dom` stable entry point:
* `createRoot`
* `unstable_createPortal` (removed)

The following APIs have been added to the `react-is` stable entry point:
* `SuspenseList`
* `isSuspenseList`

The following feature flags have been changed from experimental to true:
* `enableLazyElements`
* `enableSelectiveHydration`
* `enableSuspenseServerRenderer`
---
 .../src/__tests__/createSubscription-test.js  |   6 +-
 .../ReactHooksInspectionIntegration-test.js   |  77 +++++++------
 .../react-devtools-core/src/standalone.js     |   2 +-
 .../react-devtools-extensions/src/main.js     |   2 +-
 .../src/hooks.js                              |   4 +-
 .../__tests__/preprocessData-test.internal.js |   2 +-
 .../src/index.js                              |   2 +-
 .../profilingCommitTreeBuilder-test.js        |   4 +-
 .../src/__tests__/profilingHostRoot-test.js   |   4 +-
 .../src/__tests__/store-test.js               |  10 +-
 .../storeStressTestConcurrent-test.js         |  36 +++---
 .../Components/InspectedElementContext.js     |   2 +-
 .../InspectedElementErrorsAndWarningsTree.js  |   2 +-
 .../src/devtools/views/Components/KeyValue.js |   7 +-
 .../devtools/views/Components/TreeContext.js  |   2 +-
 .../src/devtools/views/ErrorBoundary/cache.js |   4 +-
 .../src/inspectedElementCache.js              |   6 +-
 .../src/app/SuspenseTree/index.js             |   7 +-
 .../react-devtools-shell/src/app/index.js     |   2 +-
 packages/react-devtools-shell/src/devtools.js |   2 +-
 packages/react-dom/index.classic.fb.js        |  21 ++--
 packages/react-dom/index.experimental.js      |  22 ++--
 packages/react-dom/index.js                   |  21 ++--
 packages/react-dom/index.modern.fb.js         |  16 +--
 packages/react-dom/index.stable.js            |  12 +-
 .../src/__tests__/ReactDOMFiber-test.js       |  28 -----
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  31 ++----
 .../src/__tests__/ReactDOMFizzServer-test.js  |  16 +--
 .../src/__tests__/ReactDOMHooks-test.js       |   3 +-
 .../ReactDOMNativeEventHeuristic-test.js      |  24 ++--
 .../__tests__/ReactDOMNestedEvents-test.js    |   3 +-
 .../src/__tests__/ReactDOMRoot-test.js        |  48 ++++----
 .../ReactDOMServerIntegrationHooks-test.js    |  54 +++------
 ...DOMServerPartialHydration-test.internal.js |  37 +-----
 ...MServerSelectiveHydration-test.internal.js |   5 -
 .../ReactDOMServerSuspense-test.internal.js   |   4 -
 .../ReactServerRenderingHydration-test.js     |   3 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |  15 +--
 .../ReactUnmockedSchedulerWarning-test.js     |   5 +-
 .../src/__tests__/ReactUpdates-test.js        |   2 +-
 .../__tests__/ReactWrongReturnPointer-test.js |   2 +-
 packages/react-dom/src/client/ReactDOM.js     |  24 ----
 .../DOMPluginEventSystem-test.internal.js     |   3 +-
 .../__tests__/ChangeEventPlugin-test.js       |  18 +--
 .../__tests__/SimpleEventPlugin-test.js       |   6 +-
 packages/react-is/index.experimental.js       |   4 +-
 packages/react-is/index.stable.js             |   2 +
 packages/react-is/src/ReactIs.js              |   4 +-
 .../react-is/src/__tests__/ReactIs-test.js    |  21 +---
 .../src/__tests__/ReactCache-test.js          |   2 +-
 .../__tests__/ReactContextPropagation-test.js |   4 +-
 ...asedOnReactExpirationTime-test.internal.js |   3 +-
 .../src/__tests__/ReactExpiration-test.js     |  40 +++----
 .../src/__tests__/ReactFlushSync-test.js      |   6 +-
 .../ReactHooksWithNoopRenderer-test.js        |  34 +++---
 .../src/__tests__/ReactIncremental-test.js    |  27 ++---
 ...tIncrementalErrorHandling-test.internal.js |  35 +++---
 .../ReactIncrementalReflection-test.js        |  13 +--
 .../ReactIncrementalScheduling-test.js        |  16 +--
 .../ReactIncrementalSideEffects-test.js       |  10 +-
 .../__tests__/ReactIncrementalUpdates-test.js |  29 ++---
 .../__tests__/ReactInterleavedUpdates-test.js |   8 +-
 .../src/__tests__/ReactLazy-test.internal.js  |   3 +-
 .../src/__tests__/ReactNewContext-test.js     |   3 +-
 .../ReactSchedulerIntegration-test.js         |   8 +-
 .../__tests__/ReactSuspense-test.internal.js  |   9 +-
 .../src/__tests__/ReactSuspenseList-test.js   |  51 ++-------
 .../ReactSuspenseWithNoopRenderer-test.js     | 105 ++++++++----------
 .../src/__tests__/ReactTransition-test.js     |  18 +--
 .../src/__tests__/ReactUpdatePriority-test.js |   3 +-
 .../__tests__/ReactUpdaters-test.internal.js  |  11 +-
 .../SchedulingProfiler-test.internal.js       |   3 +-
 .../SchedulingProfilerLabels-test.internal.js |   3 -
 .../useMutableSource-test.internal.js         |  63 +++--------
 .../useMutableSourceHydration-test.js         |  29 +++--
 .../src/__tests__/ReactFresh-test.js          |   2 +-
 .../ReactFlightDOMRelay-test.internal.js      |   2 -
 .../src/__tests__/ReactFlightDOM-test.js      |  15 +--
 .../__tests__/ReactTestRendererAsync-test.js  |   6 +-
 packages/react/index.classic.fb.js            |  63 +++++------
 packages/react/index.experimental.js          |  48 ++++----
 packages/react/index.js                       |  54 ++++-----
 packages/react/index.modern.fb.js             |  57 +++++-----
 packages/react/index.stable.js                |  29 +++--
 .../__tests__/ReactProfiler-test.internal.js  |  21 ++--
 ...ofilerDevToolsIntegration-test.internal.js |   3 +-
 .../ReactStrictMode-test.internal.js          |   4 -
 .../src/__tests__/ReactStrictMode-test.js     |   9 +-
 .../unstable-shared-subset.experimental.js    |  33 +++---
 packages/shared/ReactFeatureFlags.js          |   6 +-
 .../forks/ReactFeatureFlags.www-dynamic.js    |   2 +-
 .../src/__tests__/useSubscription-test.js     |  11 +-
 92 files changed, 572 insertions(+), 966 deletions(-)

diff --git a/packages/create-subscription/src/__tests__/createSubscription-test.js b/packages/create-subscription/src/__tests__/createSubscription-test.js
index 27075d7d7dee..c596bdb954c0 100644
--- a/packages/create-subscription/src/__tests__/createSubscription-test.js
+++ b/packages/create-subscription/src/__tests__/createSubscription-test.js
@@ -268,7 +268,6 @@ describe('createSubscription', () => {
     expect(Scheduler).toFlushAndYield(['b-1']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should ignore values emitted by a new subscribable until the commit phase', () => {
     const log = [];
 
@@ -327,7 +326,7 @@ describe('createSubscription', () => {
 
     // Start React update, but don't finish
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Parent observed={observableB} />);
       });
     } else {
@@ -362,7 +361,6 @@ describe('createSubscription', () => {
     ]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should not drop values emitted between updates', () => {
     const log = [];
 
@@ -421,7 +419,7 @@ describe('createSubscription', () => {
 
     // Start React update, but don't finish
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Parent observed={observableB} />);
       });
     } else {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 29ce46b5545a..2d09e2864d4b 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -366,10 +366,9 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental
   it('should support composite useTransition hook', () => {
     function Foo(props) {
-      React.unstable_useTransition();
+      React.useTransition();
       const memoizedValue = React.useMemo(() => 'hello', []);
       return <div>{memoizedValue}</div>;
     }
@@ -394,10 +393,9 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental
   it('should support composite useDeferredValue hook', () => {
     function Foo(props) {
-      React.unstable_useDeferredValue('abc', {
+      React.useDeferredValue('abc', {
         timeoutMs: 500,
       });
       const [state] = React.useState(() => 'hello', []);
@@ -424,7 +422,6 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental
   it('should support composite useOpaqueIdentifier hook', () => {
     function Foo(props) {
       const id = React.unstable_useOpaqueIdentifier();
@@ -452,7 +449,6 @@ describe('ReactHooksInspectionIntegration', () => {
     });
   });
 
-  // @gate experimental
   it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
     function Foo(props) {
       const id = React.unstable_useOpaqueIdentifier();
@@ -846,37 +842,40 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  if (__EXPERIMENTAL__) {
-    it('should support composite useMutableSource hook', () => {
-      const mutableSource = React.unstable_createMutableSource({}, () => 1);
-      function Foo(props) {
-        React.unstable_useMutableSource(
-          mutableSource,
-          () => 'snapshot',
-          () => {},
-        );
-        React.useMemo(() => 'memo', []);
-        return <div />;
-      }
-      const renderer = ReactTestRenderer.create(<Foo />);
-      const childFiber = renderer.root.findByType(Foo)._currentFiber();
-      const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
-      expect(tree).toEqual([
-        {
-          id: 0,
-          isStateEditable: false,
-          name: 'MutableSource',
-          value: 'snapshot',
-          subHooks: [],
-        },
-        {
-          id: 1,
-          isStateEditable: false,
-          name: 'Memo',
-          value: 'memo',
-          subHooks: [],
-        },
-      ]);
-    });
-  }
+  it('should support composite useMutableSource hook', () => {
+    const createMutableSource =
+      React.createMutableSource || React.unstable_createMutableSource;
+    const useMutableSource =
+      React.useMutableSource || React.unstable_useMutableSource;
+
+    const mutableSource = createMutableSource({}, () => 1);
+    function Foo(props) {
+      useMutableSource(
+        mutableSource,
+        () => 'snapshot',
+        () => {},
+      );
+      React.useMemo(() => 'memo', []);
+      return <div />;
+    }
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(tree).toEqual([
+      {
+        id: 0,
+        isStateEditable: false,
+        name: 'MutableSource',
+        value: 'snapshot',
+        subHooks: [],
+      },
+      {
+        id: 1,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'memo',
+        subHooks: [],
+      },
+    ]);
+  });
 });
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 9f18ef5b1f5d..2e9e6a1056bf 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -12,7 +12,7 @@ import {
   // $FlowFixMe Flow does not yet know about flushSync()
   flushSync,
   // $FlowFixMe Flow does not yet know about createRoot()
-  unstable_createRoot as createRoot,
+  createRoot,
 } from 'react-dom';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index d8789e1c69af..73924cd85a46 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -1,7 +1,7 @@
 /* global chrome */
 
 import {createElement} from 'react';
-import {unstable_createRoot as createRoot, flushSync} from 'react-dom';
+import {createRoot, flushSync} from 'react-dom';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {getBrowserName, getBrowserTheme} from './utils';
diff --git a/packages/react-devtools-scheduling-profiler/src/hooks.js b/packages/react-devtools-scheduling-profiler/src/hooks.js
index 6096d6b95054..a9692010bed2 100644
--- a/packages/react-devtools-scheduling-profiler/src/hooks.js
+++ b/packages/react-devtools-scheduling-profiler/src/hooks.js
@@ -8,9 +8,11 @@
  */
 
 import {
+  // $FlowFixMe
   unstable_createMutableSource as createMutableSource,
-  unstable_useMutableSource as useMutableSource,
   useLayoutEffect,
+  // $FlowFixMe
+  unstable_useMutableSource as useMutableSource,
 } from 'react';
 
 import {
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 59933cf6900b..128fdfb0f1dc 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -382,7 +382,7 @@ describe(preprocessData, () => {
     });
   });
 
-  // @gate experimental && enableSchedulingProfiler
+  // @gate enableSchedulingProfiler
   it('should process a sample createRoot render sequence', () => {
     function App() {
       const [didMount, setDidMount] = React.useState(false);
diff --git a/packages/react-devtools-scheduling-profiler/src/index.js b/packages/react-devtools-scheduling-profiler/src/index.js
index d93bbb2a62b3..b10a2b07efd6 100644
--- a/packages/react-devtools-scheduling-profiler/src/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/index.js
@@ -11,7 +11,7 @@ import 'regenerator-runtime/runtime';
 
 import * as React from 'react';
 // $FlowFixMe Flow does not yet know about createRoot()
-import {unstable_createRoot as createRoot} from 'react-dom';
+import {createRoot} from 'react-dom';
 import nullthrows from 'nullthrows';
 import App from './App';
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index e597c775d076..1f9c97d0dfbc 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -149,7 +149,7 @@ describe('commit tree', () => {
 
     it('should support Lazy components (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
@@ -226,7 +226,7 @@ describe('commit tree', () => {
 
     it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
diff --git a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
index a37401eb4a06..cfcff6bad4ba 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -89,7 +89,7 @@ describe('profiling HostRoot', () => {
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => {
       const container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<App />);
     });
     utils.act(() => store.profilerStore.stopProfiling());
@@ -122,7 +122,7 @@ describe('profiling HostRoot', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => root.render(<App />));
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index b63b8f088e8c..236a9b0f5e50 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -356,18 +356,18 @@ describe('Store', () => {
       };
       const Wrapper = ({shouldSuspense}) => (
         <React.Fragment>
-          <React.unstable_SuspenseList revealOrder="forwards" tail="collapsed">
+          <React.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.SuspenseList>
         </React.Fragment>
       );
 
       const container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       act(() => {
         root.render(<Wrapper shouldSuspense={true} />);
       });
@@ -984,7 +984,7 @@ describe('Store', () => {
 
     it('should support Lazy components in (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
 
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
@@ -1020,7 +1020,7 @@ describe('Store', () => {
 
     it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
 
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index 38cd572ad680..826a72552ab3 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -67,7 +67,7 @@ describe('StoreStressConcurrent', () => {
     // 1. Render a normal version of [a, b, c, d, e].
     let container = document.createElement('div');
     // $FlowFixMe
-    let root = ReactDOM.unstable_createRoot(container);
+    let root = ReactDOM.createRoot(container);
     act(() => root.render(<Parent>{[a, b, c, d, e]}</Parent>));
     expect(store).toMatchInlineSnapshot(
       `
@@ -151,7 +151,7 @@ describe('StoreStressConcurrent', () => {
       // Ensure fresh mount.
       container = document.createElement('div');
       // $FlowFixMe
-      root = ReactDOM.unstable_createRoot(container);
+      root = ReactDOM.createRoot(container);
 
       // Verify mounting 'abcde'.
       act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -181,7 +181,7 @@ describe('StoreStressConcurrent', () => {
     // There'll be no unmounting until the very end.
     container = document.createElement('div');
     // $FlowFixMe
-    root = ReactDOM.unstable_createRoot(container);
+    root = ReactDOM.createRoot(container);
     for (let i = 0; i < cases.length; i++) {
       // Verify mounting 'abcde'.
       act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -247,7 +247,7 @@ describe('StoreStressConcurrent', () => {
     const snapshots = [];
     let container = document.createElement('div');
     // $FlowFixMe
-    let root = ReactDOM.unstable_createRoot(container);
+    let root = ReactDOM.createRoot(container);
     for (let i = 0; i < steps.length; i++) {
       act(() => root.render(<Root>{steps[i]}</Root>));
       // We snapshot each step once so it doesn't regress.
@@ -320,7 +320,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() => root.render(<Root>{steps[i]}</Root>));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => root.render(<Root>{steps[j]}</Root>));
@@ -337,7 +337,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -409,7 +409,7 @@ describe('StoreStressConcurrent', () => {
     const snapshots = [];
     let container = document.createElement('div');
     // $FlowFixMe
-    let root = ReactDOM.unstable_createRoot(container);
+    let root = ReactDOM.createRoot(container);
     for (let i = 0; i < steps.length; i++) {
       act(() =>
         root.render(
@@ -536,7 +536,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -582,7 +582,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -640,7 +640,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -690,7 +690,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -744,7 +744,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -898,7 +898,7 @@ describe('StoreStressConcurrent', () => {
     const snapshots = [];
     let container = document.createElement('div');
     // $FlowFixMe
-    let root = ReactDOM.unstable_createRoot(container);
+    let root = ReactDOM.createRoot(container);
     for (let i = 0; i < steps.length; i++) {
       act(() =>
         root.render(
@@ -1055,7 +1055,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1107,7 +1107,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1174,7 +1174,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1226,7 +1226,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1278,7 +1278,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.unstable_createRoot(container);
+        root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 35e87c6ffb4a..396023b352cf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {
   createContext,
-  unstable_startTransition as startTransition,
+  startTransition,
   unstable_useCacheRefresh as useCacheRefresh,
   useCallback,
   useContext,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 83d3721a53dc..7f7be4677e03 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 import {
   useContext,
   unstable_useCacheRefresh as useCacheRefresh,
-  unstable_useTransition as useTransition,
+  useTransition,
 } from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index b39a6d154562..462b1277e277 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -8,12 +8,7 @@
  */
 
 import * as React from 'react';
-import {
-  unstable_useTransition as useTransition,
-  useContext,
-  useRef,
-  useState,
-} from 'react';
+import {useTransition, useContext, useRef, useState} from 'react';
 import EditableName from './EditableName';
 import EditableValue from './EditableValue';
 import NewArrayValue from './NewArrayValue';
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index 0ab6e57c4b41..93e680bc751a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -34,7 +34,7 @@ import {
   useMemo,
   useReducer,
   useRef,
-  unstable_startTransition as startTransition,
+  startTransition,
 } from 'react';
 import {createRegExp} from '../utils';
 import {BridgeContext, StoreContext} from '../context';
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
index cc9dca217986..71ee78e979bd 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -10,7 +10,7 @@
 import type {Wakeable} from 'shared/ReactTypes';
 import type {GitHubIssue} from './githubAPI';
 
-import {unstable_getCacheForType} from 'react';
+import {unstable_getCacheForType as getCacheForType} from 'react';
 import {searchGitHubIssues} from './githubAPI';
 
 const API_TIMEOUT = 3000;
@@ -55,7 +55,7 @@ function createMap(): GitHubIssueMap {
 }
 
 function getRecordMap(): Map<string, Record<GitHubIssue>> {
-  return unstable_getCacheForType(createMap);
+  return getCacheForType(createMap);
 }
 
 export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 9d0fcd9d7371..1d19989664f3 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -8,8 +8,8 @@
  */
 
 import {
-  unstable_getCacheForType,
-  unstable_startTransition as startTransition,
+  unstable_getCacheForType as getCacheForType,
+  startTransition,
 } from 'react';
 import Store from './devtools/store';
 import {inspectElement as inspectElementMutableSource} from './inspectedElementMutableSource';
@@ -60,7 +60,7 @@ function createMap(): InspectedElementMap {
 }
 
 function getRecordMap(): WeakMap<Element, Record<InspectedElementFrontend>> {
-  return unstable_getCacheForType(createMap);
+  return getCacheForType(createMap);
 }
 
 function createCacheSeed(
diff --git a/packages/react-devtools-shell/src/app/SuspenseTree/index.js b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
index 72fffe22b783..875cf60fec6d 100644
--- a/packages/react-devtools-shell/src/app/SuspenseTree/index.js
+++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
@@ -8,12 +8,7 @@
  */
 
 import * as React from 'react';
-import {
-  Fragment,
-  Suspense,
-  unstable_SuspenseList as SuspenseList,
-  useState,
-} from 'react';
+import {Fragment, Suspense, SuspenseList, useState} from 'react';
 
 function SuspenseTree() {
   return (
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index 51f00c75a5e7..5764130075ae 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -5,7 +5,7 @@
 import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about createRoot()
-  unstable_createRoot as createRoot,
+  createRoot,
 } from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import Iframe from './Iframe';
diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/devtools.js
index d3fe565be28a..4879e719c880 100644
--- a/packages/react-devtools-shell/src/devtools.js
+++ b/packages/react-devtools-shell/src/devtools.js
@@ -2,7 +2,7 @@
 
 import {createElement} from 'react';
 // $FlowFixMe Flow does not yet know about createRoot()
-import {unstable_createRoot as createRoot} from 'react-dom';
+import {createRoot} from 'react-dom';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index 0b16c0808368..234aa3306648 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -19,22 +19,21 @@ Object.assign((__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: any), {
 });
 
 export {
-  createPortal,
-  unstable_batchedUpdates,
-  flushSync,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  version,
+  createPortal,
+  createRoot,
+  createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
   findDOMNode,
+  flushSync,
   hydrate,
   render,
   unmountComponentAtNode,
-  createRoot,
-  createRoot as unstable_createRoot,
-  unstable_flushControlled,
-  unstable_scheduleHydration,
-  unstable_runWithPriority,
-  unstable_renderSubtreeIntoContainer,
-  unstable_createPortal,
+  unstable_batchedUpdates,
   unstable_createEventHandle,
+  unstable_flushControlled,
   unstable_isNewReconciler,
+  unstable_renderSubtreeIntoContainer,
+  unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
+  unstable_scheduleHydration,
+  version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index e685ec6e8a1f..5a1c9f191f70 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -8,26 +8,18 @@
  */
 
 export {
-  createPortal,
-  unstable_batchedUpdates,
-  flushSync,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  version,
-  // Disabled behind disableLegacyReactDOMAPIs
+  createPortal,
+  createRoot,
   findDOMNode,
+  flushSync,
   hydrate,
   render,
   unmountComponentAtNode,
-  // exposeConcurrentModeAPIs
-  createRoot as unstable_createRoot,
+  unstable_batchedUpdates,
   unstable_flushControlled,
-  unstable_scheduleHydration,
-  // DO NOT USE: Temporarily exposing this to migrate off of Scheduler.runWithPriority.
-  unstable_runWithPriority,
-  // Disabled behind disableUnstableRenderSubtreeIntoContainer
   unstable_renderSubtreeIntoContainer,
-  // Disabled behind disableUnstableCreatePortal
-  // Temporary alias since we already shipped React 16 RC with it.
-  // TODO: remove in React 18.
-  unstable_createPortal,
+  unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
+  unstable_scheduleHydration,
+  version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 7adfaa4ad218..6a824b2f70b1 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -10,22 +10,21 @@
 // Export all exports so that they're available in tests.
 // We can't use export * from in Flow for some reason.
 export {
-  createPortal,
-  unstable_batchedUpdates,
-  flushSync,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  version,
+  createPortal,
+  createRoot,
+  createRoot as unstable_createRoot,
   findDOMNode,
+  flushSync,
   hydrate,
   render,
   unmountComponentAtNode,
-  createRoot,
-  createRoot as unstable_createRoot,
-  unstable_flushControlled,
-  unstable_scheduleHydration,
-  unstable_runWithPriority,
-  unstable_renderSubtreeIntoContainer,
-  unstable_createPortal,
+  unstable_batchedUpdates,
   unstable_createEventHandle,
+  unstable_flushControlled,
   unstable_isNewReconciler,
+  unstable_renderSubtreeIntoContainer,
+  unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
+  unstable_scheduleHydration,
+  version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index f91cc3cb8955..b53a8cf9add7 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -8,16 +8,16 @@
  */
 
 export {
-  createPortal,
-  unstable_batchedUpdates,
-  flushSync,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  version,
+  createPortal,
   createRoot,
-  createRoot as unstable_createRoot,
-  unstable_flushControlled,
-  unstable_scheduleHydration,
-  unstable_runWithPriority,
+  createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
+  flushSync,
+  unstable_batchedUpdates,
   unstable_createEventHandle,
+  unstable_flushControlled,
   unstable_isNewReconciler,
+  unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
+  unstable_scheduleHydration,
+  version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.stable.js b/packages/react-dom/index.stable.js
index e9aa75047522..55d515a9fce2 100644
--- a/packages/react-dom/index.stable.js
+++ b/packages/react-dom/index.stable.js
@@ -8,17 +8,15 @@
  */
 
 export {
-  createPortal,
-  unstable_batchedUpdates,
-  flushSync,
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  version,
+  createPortal,
+  createRoot,
   findDOMNode,
+  flushSync,
   hydrate,
   render,
   unmountComponentAtNode,
+  unstable_batchedUpdates,
   unstable_renderSubtreeIntoContainer,
-  // Temporary alias since we already shipped React 16 RC with it.
-  // TODO: remove in React 18.
-  unstable_createPortal,
+  version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index ec3ec75ce482..fefcb2b08008 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -246,34 +246,6 @@ describe('ReactDOMFiber', () => {
     expect(container.innerHTML).toBe('');
   });
 
-  // TODO: remove in React 18
-  if (!__EXPERIMENTAL__) {
-    it('should support unstable_createPortal alias', () => {
-      const portalContainer = document.createElement('div');
-
-      expect(() =>
-        ReactDOM.render(
-          <div>
-            {ReactDOM.unstable_createPortal(<div>portal</div>, portalContainer)}
-          </div>,
-          container,
-        ),
-      ).toWarnDev(
-        'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
-          'and will be removed in React 18+. Update your code to use ' +
-          'ReactDOM.createPortal() instead. It has the exact same API, ' +
-          'but without the "unstable_" prefix.',
-        {withoutStack: true},
-      );
-      expect(portalContainer.innerHTML).toBe('<div>portal</div>');
-      expect(container.innerHTML).toBe('<div></div>');
-
-      ReactDOM.unmountComponentAtNode(container);
-      expect(portalContainer.innerHTML).toBe('');
-      expect(container.innerHTML).toBe('');
-    });
-  }
-
   it('should render many portals', () => {
     const portalContainer1 = document.createElement('div');
     const portalContainer2 = document.createElement('div');
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index 35f8d46650d5..4b99fa19303a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -148,7 +148,6 @@ describe('ReactDOMFiberAsync', () => {
   });
 
   describe('concurrent mode', () => {
-    // @gate experimental
     it('does not perform deferred updates synchronously', () => {
       const inputRef = React.createRef();
       const asyncValueRef = React.createRef();
@@ -185,7 +184,7 @@ describe('ReactDOMFiberAsync', () => {
           );
         }
       }
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<Counter />);
       Scheduler.unstable_flushAll();
       expect(asyncValueRef.current.textContent).toBe('');
@@ -204,9 +203,8 @@ describe('ReactDOMFiberAsync', () => {
       expect(syncValueRef.current.textContent).toBe('hello');
     });
 
-    // @gate experimental
     it('top-level updates are concurrent', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<div>Hi</div>);
       expect(container.textContent).toEqual('');
       Scheduler.unstable_flushAll();
@@ -218,7 +216,6 @@ describe('ReactDOMFiberAsync', () => {
       expect(container.textContent).toEqual('Bye');
     });
 
-    // @gate experimental
     it('deep updates (setState) are concurrent', () => {
       let instance;
       class Component extends React.Component {
@@ -229,7 +226,7 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<Component />);
       expect(container.textContent).toEqual('');
       Scheduler.unstable_flushAll();
@@ -241,7 +238,6 @@ describe('ReactDOMFiberAsync', () => {
       expect(container.textContent).toEqual('1');
     });
 
-    // @gate experimental
     it('flushSync flushes updates before end of the tick', () => {
       const ops = [];
       let instance;
@@ -260,7 +256,7 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<Component />);
       Scheduler.unstable_flushAll();
 
@@ -302,7 +298,7 @@ describe('ReactDOMFiberAsync', () => {
           return this.state.counter;
         }
       }
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<Counter />);
       Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('0');
@@ -385,7 +381,6 @@ describe('ReactDOMFiberAsync', () => {
       expect(returnValue).toBe(undefined);
     });
 
-    // @gate experimental
     it('ignores discrete events on a pending removed element', async () => {
       const disableButtonRef = React.createRef();
       const submitButtonRef = React.createRef();
@@ -406,7 +401,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -426,7 +421,6 @@ describe('ReactDOMFiberAsync', () => {
       expect(submitButton.current).toBe(undefined);
     });
 
-    // @gate experimental
     it('ignores discrete events on a pending removed event listener', async () => {
       const disableButtonRef = React.createRef();
       const submitButtonRef = React.createRef();
@@ -458,7 +452,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -491,7 +485,6 @@ describe('ReactDOMFiberAsync', () => {
       expect(formSubmitted).toBe(false);
     });
 
-    // @gate experimental
     it('uses the newest discrete events on a pending changed event listener', async () => {
       const enableButtonRef = React.createRef();
       const submitButtonRef = React.createRef();
@@ -518,7 +511,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -582,9 +575,8 @@ describe('ReactDOMFiberAsync', () => {
     expect(containerC.textContent).toEqual('Finished');
   });
 
-  // @gate experimental
   it('updates flush without yielding in the next event', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     function Text(props) {
       Scheduler.unstable_yieldValue(props.text);
@@ -607,7 +599,6 @@ describe('ReactDOMFiberAsync', () => {
     expect(container.textContent).toEqual('ABC');
   });
 
-  // @gate experimental
   it('unmounted roots should never clear newer root content from a container', () => {
     const ref = React.createRef();
 
@@ -630,7 +621,7 @@ describe('ReactDOMFiberAsync', () => {
       return <button ref={ref}>new</button>;
     }
 
-    const oldRoot = ReactDOM.unstable_createRoot(container);
+    const oldRoot = ReactDOM.createRoot(container);
     act(() => {
       oldRoot.render(<OldApp />);
     });
@@ -642,7 +633,7 @@ describe('ReactDOMFiberAsync', () => {
     expect(container.textContent).toBe('');
 
     // We can now render a new one.
-    const newRoot = ReactDOM.unstable_createRoot(container);
+    const newRoot = ReactDOM.createRoot(container);
     ReactDOM.flushSync(() => {
       newRoot.render(<NewApp />);
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index ee91831e9f1c..872f7042ec6f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -38,7 +38,7 @@ describe('ReactDOMFizzServer', () => {
     }
     Stream = require('stream');
     Suspense = React.Suspense;
-    SuspenseList = React.unstable_SuspenseList;
+    SuspenseList = React.SuspenseList;
     PropTypes = require('prop-types');
 
     textCache = new Map();
@@ -313,7 +313,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App isClient={true} />);
     Scheduler.unstable_flushAll();
 
@@ -405,7 +405,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App isClient={true} />);
     Scheduler.unstable_flushAll();
 
@@ -481,7 +481,7 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
     Scheduler.unstable_flushAll();
 
@@ -563,7 +563,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
     Scheduler.unstable_flushAll();
 
@@ -635,7 +635,7 @@ describe('ReactDOMFizzServer', () => {
       startWriting();
     });
 
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App showMore={false} />);
     Scheduler.unstable_flushAll();
 
@@ -703,7 +703,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
     Scheduler.unstable_flushAll();
 
@@ -1294,7 +1294,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App isClient={true} />);
     Scheduler.unstable_flushAll();
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
index faf182236f6a..23c7491c319c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -107,7 +107,6 @@ describe('ReactDOMHooks', () => {
     expect(labelRef.current.innerHTML).toBe('abc');
   });
 
-  // @gate experimental
   it('should not bail out when an update is scheduled from within an event handler in Concurrent Mode', async () => {
     const {createRef, useCallback, useState} = React;
 
@@ -128,7 +127,7 @@ describe('ReactDOMHooks', () => {
     const inputRef = createRef();
     const labelRef = createRef();
 
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
 
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 7b252a3395a1..d8d7c710ff57 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -42,7 +42,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     }
   }
 
-  // @gate experimental
   it('ignores discrete events on a pending removed element', async () => {
     const disableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -66,7 +65,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     await act(() => {
       root.render(<Form />);
     });
@@ -88,7 +87,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // We'll assume that the browser won't let the user click it.
   });
 
-  // @gate experimental
   it('ignores discrete events on a pending removed event listener', async () => {
     const disableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -125,7 +123,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<Form />);
     // Flush
     Scheduler.unstable_flushAll();
@@ -157,7 +155,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     expect(formSubmitted).toBe(false);
   });
 
-  // @gate experimental
   it('uses the newest discrete events on a pending changed event listener', async () => {
     const enableButtonRef = React.createRef();
     const submitButtonRef = React.createRef();
@@ -188,7 +185,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<Form />);
     // Flush
     Scheduler.unstable_flushAll();
@@ -220,9 +217,8 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     expect(formSubmitted).toBe(true);
   });
 
-  // @gate experimental
   it('mouse over should be user-blocking but not discrete', async () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -251,9 +247,8 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     expect(container.textContent).toEqual('hovered');
   });
 
-  // @gate experimental
   it('mouse enter should be user-blocking but not discrete', async () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -284,9 +279,8 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     expect(container.textContent).toEqual('hovered');
   });
 
-  // @gate experimental
   it('continuous native events flush as expected', async () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     const target = React.createRef(null);
     function Foo({hovered}) {
@@ -324,9 +318,8 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     expect(container.textContent).toEqual('hovered');
   });
 
-  // @gate experimental
   it('should batch inside native events', async () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -375,9 +368,8 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     }
   });
 
-  // @gate experimental
   it('should not flush discrete events at the end of outermost batchedUpdates', async () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     let target;
     function Foo() {
diff --git a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
index 2de9a3127d33..7c46355525e7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
@@ -27,7 +27,6 @@ describe('ReactDOMNestedEvents', () => {
     useState = React.useState;
   });
 
-  // @gate experimental
   test('nested event dispatches should not cause updates to flush', async () => {
     const buttonRef = React.createRef(null);
     function App() {
@@ -58,7 +57,7 @@ describe('ReactDOMNestedEvents', () => {
 
     const container = document.createElement('div');
     document.body.appendChild(container);
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     await act(async () => {
       root.render(<App />);
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 5ffdb3813155..9fe03cc2a947 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -28,15 +28,8 @@ describe('ReactDOMRoot', () => {
     act = require('react-dom/test-utils').unstable_concurrentAct;
   });
 
-  if (!__EXPERIMENTAL__) {
-    it('createRoot is not exposed in stable build', () => {
-      expect(ReactDOM.unstable_createRoot).toBe(undefined);
-    });
-    return;
-  }
-
   it('renders children', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -44,7 +37,7 @@ describe('ReactDOMRoot', () => {
 
   it('warns if a callback parameter is provided to render', () => {
     const callback = jest.fn();
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     expect(() =>
       root.render(<div>Hi</div>, callback),
     ).toErrorDev(
@@ -58,7 +51,7 @@ describe('ReactDOMRoot', () => {
 
   it('warns if a callback parameter is provided to unmount', () => {
     const callback = jest.fn();
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     expect(() =>
       root.unmount(callback),
@@ -72,7 +65,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('unmounts children', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -95,7 +88,7 @@ describe('ReactDOMRoot', () => {
     // Does not hydrate by default
     const container1 = document.createElement('div');
     container1.innerHTML = markup;
-    const root1 = ReactDOM.unstable_createRoot(container1);
+    const root1 = ReactDOM.createRoot(container1);
     root1.render(
       <div>
         <span />
@@ -106,7 +99,7 @@ describe('ReactDOMRoot', () => {
     // Accepts `hydrate` option
     const container2 = document.createElement('div');
     container2.innerHTML = markup;
-    const root2 = ReactDOM.unstable_createRoot(container2, {hydrate: true});
+    const root2 = ReactDOM.createRoot(container2, {hydrate: true});
     root2.render(
       <div>
         <span />
@@ -138,7 +131,7 @@ describe('ReactDOMRoot', () => {
 
   it('clears existing children', async () => {
     container.innerHTML = '<div>a</div><div>b</div>';
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(
       <div>
         <span>c</span>
@@ -159,12 +152,12 @@ describe('ReactDOMRoot', () => {
 
   it('throws a good message on invalid containers', () => {
     expect(() => {
-      ReactDOM.unstable_createRoot(<div>Hi</div>);
+      ReactDOM.createRoot(<div>Hi</div>);
     }).toThrow('createRoot(...): Target container is not a DOM element.');
   });
 
   it('warns when rendering with legacy API into createRoot() container', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -187,7 +180,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when hydrating with legacy API into createRoot() container', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -207,7 +200,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when unmounting with legacy API (no previous content)', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -236,7 +229,7 @@ describe('ReactDOMRoot', () => {
     // Currently createRoot().render() doesn't clear this.
     container.appendChild(document.createElement('div'));
     // The rest is the same as test above.
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -262,7 +255,7 @@ describe('ReactDOMRoot', () => {
   it('warns when passing legacy container to createRoot()', () => {
     ReactDOM.render(<div>Hi</div>, container);
     expect(() => {
-      ReactDOM.unstable_createRoot(container);
+      ReactDOM.createRoot(container);
     }).toErrorDev(
       'You are calling ReactDOM.createRoot() on a container that was previously ' +
         'passed to ReactDOM.render(). This is not supported.',
@@ -271,9 +264,9 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when creating two roots managing the same container', () => {
-    ReactDOM.unstable_createRoot(container);
+    ReactDOM.createRoot(container);
     expect(() => {
-      ReactDOM.unstable_createRoot(container);
+      ReactDOM.createRoot(container);
     }).toErrorDev(
       'You are calling ReactDOM.createRoot() on a container that ' +
         'has already been passed to createRoot() before. Instead, call ' +
@@ -283,15 +276,15 @@ describe('ReactDOMRoot', () => {
   });
 
   it('does not warn when creating second root after first one is unmounted', () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.unmount();
     Scheduler.unstable_flushAll();
-    ReactDOM.unstable_createRoot(container); // No warning
+    ReactDOM.createRoot(container); // No warning
   });
 
   it('warns if creating a root on the document.body', async () => {
     expect(() => {
-      ReactDOM.unstable_createRoot(document.body);
+      ReactDOM.createRoot(document.body);
     }).toErrorDev(
       'createRoot(): Creating roots directly with document.body is ' +
         'discouraged, since its children are often manipulated by third-party ' +
@@ -303,7 +296,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns if updating a root that has had its contents removed', async () => {
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     container.innerHTML = '';
@@ -319,9 +312,8 @@ describe('ReactDOMRoot', () => {
     );
   });
 
-  // @gate experimental
   it('opts-in to concurrent default updates', async () => {
-    const root = ReactDOM.unstable_createRoot(container, {
+    const root = ReactDOM.createRoot(container, {
       unstable_concurrentUpdatesByDefault: true,
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index 659a408e6750..7d6e894a9bdb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -895,7 +895,6 @@ describe('ReactDOMServerHooks', () => {
   });
 
   describe('useOpaqueIdentifier', () => {
-    // @gate experimental
     it('generates unique ids for server string render', async () => {
       function App(props) {
         const idOne = useOpaqueIdentifier();
@@ -929,7 +928,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('generates unique ids for server stream render', async () => {
       function App(props) {
         const idOne = useOpaqueIdentifier();
@@ -963,7 +961,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('generates unique ids for client render', async () => {
       function App(props) {
         const idOne = useOpaqueIdentifier();
@@ -997,7 +994,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('generates unique ids for client render on good server markup', async () => {
       function App(props) {
         const idOne = useOpaqueIdentifier();
@@ -1031,7 +1027,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier does not change id even if the component updates during client render', async () => {
       let _setShowId;
       function App() {
@@ -1063,7 +1058,6 @@ describe('ReactDOMServerHooks', () => {
       );
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier identifierPrefix works for server renderer and does not clash', async () => {
       function ChildTwo({id}) {
         return <div id={id}>Child Three</div>;
@@ -1149,7 +1143,6 @@ describe('ReactDOMServerHooks', () => {
       ).toBe(true);
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier identifierPrefix works for multiple reads on a streaming server renderer', async () => {
       function ChildTwo() {
         const id = useOpaqueIdentifier();
@@ -1241,7 +1234,6 @@ describe('ReactDOMServerHooks', () => {
       await Promise.all([streamOneIsDone, streamTwoIsDone]);
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered', async () => {
       let _setShowDiv;
       function App() {
@@ -1261,7 +1253,7 @@ describe('ReactDOMServerHooks', () => {
       document.body.append(container);
 
       container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       root.render(<App />);
       Scheduler.unstable_flushAll();
       jest.runAllTimers();
@@ -1285,7 +1277,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered for legacy', async () => {
       let _setShowDiv;
       function App() {
@@ -1326,7 +1317,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: ID is not used during hydration but is used in an update', async () => {
       let _setShow;
       function App({unused}) {
@@ -1344,7 +1334,7 @@ describe('ReactDOMServerHooks', () => {
       const container = document.createElement('div');
       document.body.append(container);
       container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       act(() => {
         root.render(<App />);
       });
@@ -1359,7 +1349,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: ID is not used during hydration but is used in an update in legacy', async () => {
       let _setShow;
       function App({unused}) {
@@ -1389,7 +1378,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: flushSync', async () => {
       let _setShow;
       function App() {
@@ -1406,7 +1394,7 @@ describe('ReactDOMServerHooks', () => {
       const container = document.createElement('div');
       document.body.append(container);
       container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       act(() => {
         root.render(<App />);
       });
@@ -1422,7 +1410,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: children with id hydrates before other children if ID updates', async () => {
       let _setShow;
 
@@ -1498,7 +1485,7 @@ describe('ReactDOMServerHooks', () => {
         .getAttribute('id');
       expect(serverId).not.toBeNull();
 
-      const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       root.render(<App show={false} />);
       expect(Scheduler).toHaveYielded([]);
 
@@ -1546,7 +1533,6 @@ describe('ReactDOMServerHooks', () => {
       expect(Scheduler).toHaveYielded([]);
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
       let suspend = true;
       let resolve;
@@ -1591,7 +1577,7 @@ describe('ReactDOMServerHooks', () => {
       container.innerHTML = ReactDOMServer.renderToString(<App />);
 
       suspend = true;
-      const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       await act(async () => {
         root.render(<App />);
       });
@@ -1627,7 +1613,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warn when there is a hydration error', async () => {
       function Child({appId}) {
         return <div aria-labelledby={appId} />;
@@ -1642,7 +1627,7 @@ describe('ReactDOMServerHooks', () => {
 
       // This is the wrong HTML string
       container.innerHTML = '<span></span>';
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
@@ -1652,7 +1637,6 @@ describe('ReactDOMServerHooks', () => {
       );
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
       let suspend = true;
 
@@ -1695,7 +1679,7 @@ describe('ReactDOMServerHooks', () => {
       container.innerHTML = ReactDOMServer.renderToString(<App />);
 
       suspend = false;
-      const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+      const root = ReactDOM.createRoot(container, {hydrate: true});
       await act(async () => {
         root.render(<App />);
       });
@@ -1717,7 +1701,6 @@ describe('ReactDOMServerHooks', () => {
       ).not.toBeNull();
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warn when there is a hydration error', async () => {
       function Child({appId}) {
         return <div aria-labelledby={appId} />;
@@ -1732,7 +1715,7 @@ describe('ReactDOMServerHooks', () => {
 
       // This is the wrong HTML string
       container.innerHTML = '<span></span>';
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
@@ -1742,7 +1725,6 @@ describe('ReactDOMServerHooks', () => {
       );
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
       function Child({appId}) {
         return <div aria-labelledby={appId + ''} />;
@@ -1757,7 +1739,7 @@ describe('ReactDOMServerHooks', () => {
 
       // This is the wrong HTML string
       container.innerHTML = '<span></span>';
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
@@ -1767,7 +1749,6 @@ describe('ReactDOMServerHooks', () => {
       );
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
       function Child({appId}) {
         return <div aria-labelledby={appId + ''} />;
@@ -1782,7 +1763,7 @@ describe('ReactDOMServerHooks', () => {
 
       // This is the wrong HTML string
       container.innerHTML = '<span></span>';
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
@@ -1792,7 +1773,6 @@ describe('ReactDOMServerHooks', () => {
       );
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warns if you try to use the result as a string in a child component', async () => {
       function Child({appId}) {
         return <div aria-labelledby={appId + ''} />;
@@ -1806,7 +1786,7 @@ describe('ReactDOMServerHooks', () => {
       document.body.appendChild(container);
 
       container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
@@ -1816,7 +1796,6 @@ describe('ReactDOMServerHooks', () => {
       );
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warns if you try to use the result as a string', async () => {
       function App() {
         const id = useOpaqueIdentifier();
@@ -1827,7 +1806,7 @@ describe('ReactDOMServerHooks', () => {
       document.body.appendChild(container);
 
       container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
       expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         [
           'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
@@ -1837,7 +1816,6 @@ describe('ReactDOMServerHooks', () => {
       );
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warns if you try to use the result as a string in a child component wrapped in a Suspense', async () => {
       function Child({appId}) {
         return <div aria-labelledby={appId + ''} />;
@@ -1856,7 +1834,7 @@ describe('ReactDOMServerHooks', () => {
 
       container.innerHTML = ReactDOMServer.renderToString(<App />);
 
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
 
       if (gate(flags => flags.deferRenderPhaseUpdateToNextBatch)) {
         expect(() => Scheduler.unstable_flushAll()).toErrorDev([
@@ -1878,7 +1856,6 @@ describe('ReactDOMServerHooks', () => {
       }
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier warns if you try to add the result as a number in a child component wrapped in a Suspense', async () => {
       function Child({appId}) {
         return <div aria-labelledby={+appId} />;
@@ -1899,7 +1876,7 @@ describe('ReactDOMServerHooks', () => {
 
       container.innerHTML = ReactDOMServer.renderToString(<App />);
 
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
 
       if (gate(flags => flags.deferRenderPhaseUpdateToNextBatch)) {
         expect(() => Scheduler.unstable_flushAll()).toErrorDev([
@@ -1921,7 +1898,6 @@ describe('ReactDOMServerHooks', () => {
       }
     });
 
-    // @gate experimental
     it('useOpaqueIdentifier with two opaque identifiers on the same page', () => {
       let _setShow;
 
@@ -1960,7 +1936,7 @@ describe('ReactDOMServerHooks', () => {
           .getAttribute('aria-labelledby'),
       ).toEqual(serverID);
 
-      ReactDOM.unstable_createRoot(container, {hydrate: true}).render(<App />);
+      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
       jest.runAllTimers();
       expect(Scheduler).toHaveYielded([]);
       expect(Scheduler).toFlushAndYield([]);
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 02a388a1898e..65ae9219e747 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -102,7 +102,6 @@ describe('ReactDOMServerPartialHydration', () => {
     );
   }
 
-  // @gate experimental
   it('hydrates a parent even if a child Suspense boundary is blocked', async () => {
     let suspend = false;
     let resolve;
@@ -161,7 +160,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
-  // @gate experimental
   it('calls the hydration callbacks after hydration or deletion', async () => {
     let suspend = false;
     let resolve;
@@ -252,7 +250,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(deleted.length).toBe(1);
   });
 
-  // @gate experimental
   it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
     let suspend = false;
     const promise = new Promise(() => {});
@@ -310,7 +307,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(deleted.length).toBe(1);
   });
 
-  // @gate experimental || www
   it('warns and replaces the boundary content in legacy mode', async () => {
     let suspend = false;
     let resolve;
@@ -390,7 +386,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hello');
   });
 
-  // @gate experimental
   it('can insert siblings before the dehydrated boundary', () => {
     let suspend = false;
     const promise = new Promise(() => {});
@@ -449,7 +444,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.firstChild.firstChild.textContent).toBe('First');
   });
 
-  // @gate experimental
   it('can delete the dehydrated boundary before it is hydrated', () => {
     let suspend = false;
     const promise = new Promise(() => {});
@@ -506,7 +500,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.firstChild.children[1].textContent).toBe('After');
   });
 
-  // @gate experimental
   it('blocks updates to hydrate the content first if props have changed', async () => {
     let suspend = false;
     let resolve;
@@ -652,7 +645,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.className).toBe('hi');
   });
 
-  // @gate experimental
   it('shows the fallback if props have changed before hydration completes and is still suspended', async () => {
     let suspend = false;
     let resolve;
@@ -722,7 +714,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hi');
   });
 
-  // @gate experimental
   it('shows the fallback of the outer if fallback is missing', async () => {
     // This is the same exact test as above but with a nested Suspense without a fallback.
     // This should be a noop.
@@ -796,7 +787,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hi');
   });
 
-  // @gate experimental
   it('clears nested suspense boundaries if they did not hydrate yet', async () => {
     let suspend = false;
     let resolve;
@@ -869,7 +859,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hi Hi');
   });
 
-  // @gate experimental
   it('hydrates first if props changed but we are able to resolve within a timeout', async () => {
     let suspend = false;
     let resolve;
@@ -917,9 +906,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hello');
 
     // Render an update with a long timeout.
-    React.unstable_startTransition(() =>
-      root.render(<App text="Hi" className="hi" />),
-    );
+    React.startTransition(() => root.render(<App text="Hi" className="hi" />));
 
     // This shouldn't force the fallback yet.
     Scheduler.unstable_flushAll();
@@ -949,7 +936,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.className).toBe('hi');
   });
 
-  // @gate experimental
   it('warns but works if setState is called before commit in a dehydrated component', async () => {
     let suspend = false;
     let resolve;
@@ -1018,7 +1004,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hello');
   });
 
-  // @gate experimental
   it('blocks the update to hydrate first if context has changed', async () => {
     let suspend = false;
     let resolve;
@@ -1103,7 +1088,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.className).toBe('hi');
   });
 
-  // @gate experimental
   it('shows the fallback if context has changed before hydration completes and is still suspended', async () => {
     let suspend = false;
     let resolve;
@@ -1187,7 +1171,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hi');
   });
 
-  // @gate experimental
   it('replaces the fallback with client content if it is not rendered by the server', async () => {
     let suspend = false;
     const promise = new Promise(resolvePromise => {});
@@ -1236,7 +1219,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
-  // @gate experimental
   it('replaces the fallback within the suspended time if there is a nested suspense', async () => {
     let suspend = false;
     const promise = new Promise(resolvePromise => {});
@@ -1296,7 +1278,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
-  // @gate experimental
   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 => {});
@@ -1358,7 +1339,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
-  // @gate experimental
   it('shows inserted items in a SuspenseList before content is hydrated', async () => {
     let suspend = false;
     let resolve;
@@ -1444,7 +1424,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(spanB);
   });
 
-  // @gate experimental
   it('shows is able to hydrate boundaries even if others in a list are pending', async () => {
     let suspend = false;
     let resolve;
@@ -1591,7 +1570,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App />);
         });
 
@@ -1622,7 +1601,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(b);
   });
 
-  // @gate experimental
   it('clears server boundaries when SuspenseList suspends last row hydrating', async () => {
     let suspend = false;
     let resolve;
@@ -1679,7 +1657,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('AB');
   });
 
-  // @gate experimental
   it('can client render nested boundaries', async () => {
     let suspend = false;
     const promise = new Promise(() => {});
@@ -1734,7 +1711,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.lastChild.data).toBe('unrelated comment');
   });
 
-  // @gate experimental
   it('can hydrate TWO suspense boundaries', async () => {
     const ref1 = React.createRef();
     const ref2 = React.createRef();
@@ -1774,7 +1750,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref2.current).toBe(span2);
   });
 
-  // @gate experimental
   it('regenerates if it cannot hydrate before changes to props/context expire', async () => {
     let suspend = false;
     const promise = new Promise(resolvePromise => {});
@@ -1856,7 +1831,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(newSpan.className).toBe('hi');
   });
 
-  // @gate experimental
   it('does not invoke an event on a hydrated node until it commits', async () => {
     let suspend = false;
     let resolve;
@@ -2022,7 +1996,6 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('invokes discrete events on nested suspense boundaries in a root (legacy system)', async () => {
     let suspend = false;
     let resolve;
@@ -2190,7 +2163,6 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('does not invoke the parent of dehydrated boundary event', async () => {
     let suspend = false;
     let resolve;
@@ -2266,7 +2238,6 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('does not invoke an event on a parent tree when a subtree is dehydrated', async () => {
     let suspend = false;
     let resolve;
@@ -2345,7 +2316,6 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(parentContainer);
   });
 
-  // @gate experimental
   it('blocks only on the last continuous event (legacy system)', async () => {
     let suspend1 = false;
     let resolve1;
@@ -2450,7 +2420,6 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('finishes normal pri work before continuing to hydrate a retry', async () => {
     let suspend = false;
     let resolve;
@@ -2532,7 +2501,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).not.toBe(null);
   });
 
-  // @gate experimental
   it('regression test: does not overfire non-bubbling browser events', async () => {
     let suspend = false;
     let resolve;
@@ -2623,7 +2591,6 @@ describe('ReactDOMServerPartialHydration', () => {
   // follow up.
   //
   // @gate FIXME
-  // @gate experimental
   it('hydrates a hidden subtree outside of a Suspense boundary', async () => {
     const ref = React.createRef();
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 4e3192fdce76..d8b6598a7863 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -126,7 +126,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
 
-  // @gate experimental
   it('hydrates the target boundary synchronously during a click', async () => {
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -189,7 +188,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('hydrates at higher pri if sync did not work first time', async () => {
     let suspend = false;
     let resolve;
@@ -277,7 +275,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('hydrates at higher pri for secondary discrete events', async () => {
     let suspend = false;
     let resolve;
@@ -628,7 +625,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('hydrates the hovered targets as higher priority for continuous events', async () => {
     let suspend = false;
     let resolve;
@@ -731,7 +727,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
   it('hydrates the last target path first for continuous events', async () => {
     let suspend = false;
     let resolve;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 3fe4cc2fcdc4..c987ec3b8bb0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -93,7 +93,6 @@ describe('ReactDOMServerSuspense', () => {
       : children;
   }
 
-  // @gate experimental || www
   it('should render the children when no promise is thrown', async () => {
     const c = await serverRender(
       <div>
@@ -105,7 +104,6 @@ describe('ReactDOMServerSuspense', () => {
     expect(getVisibleChildren(c)).toEqual(<div>Children</div>);
   });
 
-  // @gate experimental || www
   it('should render the fallback when a promise thrown', async () => {
     const c = await serverRender(
       <div>
@@ -117,7 +115,6 @@ describe('ReactDOMServerSuspense', () => {
     expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
   });
 
-  // @gate experimental || www
   it('should work with nested suspense components', async () => {
     const c = await serverRender(
       <div>
@@ -140,7 +137,6 @@ describe('ReactDOMServerSuspense', () => {
     );
   });
 
-  // @gate experimental
   it('server renders a SuspenseList component and its children', async () => {
     const example = (
       <React.SuspenseList>
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 0ea7972f5d65..29d2ce6c2214 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -492,12 +492,11 @@ describe('ReactDOMServerHydration', () => {
     expect(element.textContent).toBe('Hello world');
   });
 
-  // @gate experimental
   it('does not re-enter hydration after committing the first one', () => {
     const finalHTML = ReactDOMServer.renderToString(<div />);
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
-    const root = ReactDOM.unstable_createRoot(container, {hydrate: true});
+    const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<div />);
     Scheduler.unstable_flushAll();
     root.render(null);
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index dee4b7852a83..d2ea73e09800 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -29,7 +29,7 @@ describe('ReactTestUtils.act()', () => {
   if (__EXPERIMENTAL__) {
     let concurrentRoot = null;
     const renderConcurrent = (el, dom) => {
-      concurrentRoot = ReactDOM.unstable_createRoot(dom);
+      concurrentRoot = ReactDOM.createRoot(dom);
       concurrentRoot.render(el);
     };
 
@@ -96,20 +96,17 @@ describe('ReactTestUtils.act()', () => {
       ]);
     });
 
-    // @gate experimental
     it('does not warn in concurrent mode', () => {
-      const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+      const root = ReactDOM.createRoot(document.createElement('div'));
       root.render(<App />);
       Scheduler.unstable_flushAll();
     });
 
-    // @gate experimental
     it('warns in concurrent mode if root is strict', () => {
       expect(() => {
-        const root = ReactDOM.unstable_createRoot(
-          document.createElement('div'),
-          {unstable_strictMode: true},
-        );
+        const root = ReactDOM.createRoot(document.createElement('div'), {
+          unstable_strictMode: true,
+        });
         root.render(<App />);
         Scheduler.unstable_flushAll();
       }).toErrorDev([
@@ -665,7 +662,7 @@ function runActTests(label, render, unmount, rerender) {
           expect(document.querySelector('[data-test-id=spinner]')).toBeNull();
 
           // trigger a suspendy update with a delay
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             act(() => {
               rerender(<App suspend={true} />);
             });
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
index 79437e7f5c76..3091c3d1af78 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -29,10 +29,9 @@ it('does not warn when rendering in legacy mode', () => {
   }).toErrorDev([]);
 });
 
-// @gate experimental
 it('should warn when rendering in concurrent mode', () => {
   expect(() => {
-    ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
+    ReactDOM.createRoot(document.createElement('div')).render(<App />);
   }).toErrorDev(
     'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
       'to guarantee consistent behaviour across tests and browsers.',
@@ -40,6 +39,6 @@ it('should warn when rendering in concurrent mode', () => {
   );
   // does not warn twice
   expect(() => {
-    ReactDOM.unstable_createRoot(document.createElement('div')).render(<App />);
+    ReactDOM.createRoot(document.createElement('div')).render(<App />);
   }).toErrorDev([]);
 });
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index 28dd03158b7e..dfa1a51939c3 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -1332,7 +1332,7 @@ describe('ReactUpdates', () => {
       );
     }
 
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     let hiddenDiv;
     act(() => {
       root.render(<Foo />);
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index bb3e040cbeb6..37b8f72cd239 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -22,7 +22,7 @@ beforeEach(() => {
   Scheduler = require('scheduler');
 
   Suspense = React.Suspense;
-  SuspenseList = React.unstable_SuspenseList;
+  SuspenseList = React.SuspenseList;
 
   getCacheForType = React.unstable_getCacheForType;
 
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 9223c52fb027..848e889a35db 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -78,7 +78,6 @@ setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
 setGetCurrentUpdatePriority(getCurrentUpdatePriority);
 setAttemptHydrationAtPriority(runWithPriority);
 
-let didWarnAboutUnstableCreatePortal = false;
 let didWarnAboutUnstableRenderSubtreeIntoContainer = false;
 
 if (__DEV__) {
@@ -155,25 +154,6 @@ function renderSubtreeIntoContainer(
   );
 }
 
-function unstable_createPortal(
-  children: ReactNodeList,
-  container: Container,
-  key: ?string = null,
-) {
-  if (__DEV__) {
-    if (!didWarnAboutUnstableCreatePortal) {
-      didWarnAboutUnstableCreatePortal = true;
-      console.warn(
-        'The ReactDOM.unstable_createPortal() alias has been deprecated, ' +
-          'and will be removed in React 18+. Update your code to use ' +
-          'ReactDOM.createPortal() instead. It has the exact same API, ' +
-          'but without the "unstable_" prefix.',
-      );
-    }
-  }
-  return createPortal(children, container, key);
-}
-
 const Internals = {
   // Keep in sync with ReactTestUtils.js, and ReactTestUtilsAct.js.
   // This is an array for better minification.
@@ -206,10 +186,6 @@ export {
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
   renderSubtreeIntoContainer as unstable_renderSubtreeIntoContainer,
-  // Disabled behind disableUnstableCreatePortal
-  // Temporary alias since we already shipped React 16 RC with it.
-  // TODO: remove in React 18.
-  unstable_createPortal,
   // enableCreateEventHandleAPI
   createEventHandle as unstable_createEventHandle,
   // TODO: Remove this once callers migrate to alternatives.
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 44353e6fb442..9b913f50728c 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -575,7 +575,6 @@ describe('DOMPluginEventSystem', () => {
           expect(log).toEqual(['second', 'first']);
         });
 
-        // @gate experimental
         it('does not invoke an event on a parent tree when a subtree is dehydrated', async () => {
           let suspend = false;
           let resolve;
@@ -1951,7 +1950,7 @@ describe('DOMPluginEventSystem', () => {
 
             // Increase counter
             if (gate(flags => flags.enableSyncDefaultUpdates)) {
-              React.unstable_startTransition(() => {
+              React.startTransition(() => {
                 root.render(<Test counter={1} />);
               });
             } else {
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 3eb9edd2fecb..507de50f1408 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -495,9 +495,8 @@ describe('ChangeEventPlugin', () => {
   });
 
   describe('concurrent mode', () => {
-    // @gate experimental
     it('text input', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -538,9 +537,8 @@ describe('ChangeEventPlugin', () => {
       expect(input.value).toBe('changed [!]');
     });
 
-    // @gate experimental
     it('checkbox input', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -594,9 +592,8 @@ describe('ChangeEventPlugin', () => {
       expect(input.checked).toBe(false);
     });
 
-    // @gate experimental
     it('textarea', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       let textarea;
 
       class ControlledTextarea extends React.Component {
@@ -637,9 +634,8 @@ describe('ChangeEventPlugin', () => {
       expect(textarea.value).toBe('changed [!]');
     });
 
-    // @gate experimental
     it('parent of input', () => {
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -684,9 +680,8 @@ describe('ChangeEventPlugin', () => {
       expect(input.value).toBe('changed [!]');
     });
 
-    // @gate experimental
     it('is sync for non-input events', async () => {
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -731,12 +726,11 @@ describe('ChangeEventPlugin', () => {
       expect(input.value).toBe('');
     });
 
-    // @gate experimental
     it('mouse enter/leave should be user-blocking but not discrete', async () => {
       const {unstable_concurrentAct: act} = TestUtils;
       const {useState} = React;
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
 
       const target = React.createRef(null);
       function Foo() {
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index cb522ba1edf5..73c1e90f4ae5 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -240,10 +240,9 @@ describe('SimpleEventPlugin', function() {
       act = require('react-dom/test-utils').unstable_concurrentAct;
     });
 
-    // @gate experimental
     it('flushes pending interactive work before exiting event handler', async () => {
       container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       document.body.appendChild(container);
 
       let button;
@@ -316,10 +315,9 @@ describe('SimpleEventPlugin', function() {
     // 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.
-    // @gate experimental
     it('end result of many interactive updates is deterministic', async () => {
       container = document.createElement('div');
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       document.body.appendChild(container);
 
       let button;
diff --git a/packages/react-is/index.experimental.js b/packages/react-is/index.experimental.js
index 560283842b59..5b80389daa9c 100644
--- a/packages/react-is/index.experimental.js
+++ b/packages/react-is/index.experimental.js
@@ -23,7 +23,7 @@ export {
   Profiler,
   StrictMode,
   Suspense,
-  unstable_SuspenseList,
+  SuspenseList,
   isAsyncMode,
   isConcurrentMode,
   isContextConsumer,
@@ -37,5 +37,5 @@ export {
   isProfiler,
   isStrictMode,
   isSuspense,
-  unstable_isSuspenseList,
+  isSuspenseList,
 } from './src/ReactIs';
diff --git a/packages/react-is/index.stable.js b/packages/react-is/index.stable.js
index ad64178a1c53..5b80389daa9c 100644
--- a/packages/react-is/index.stable.js
+++ b/packages/react-is/index.stable.js
@@ -23,6 +23,7 @@ export {
   Profiler,
   StrictMode,
   Suspense,
+  SuspenseList,
   isAsyncMode,
   isConcurrentMode,
   isContextConsumer,
@@ -36,4 +37,5 @@ export {
   isProfiler,
   isStrictMode,
   isSuspense,
+  isSuspenseList,
 } from './src/ReactIs';
diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js
index 1958043bb224..dd81ec036158 100644
--- a/packages/react-is/src/ReactIs.js
+++ b/packages/react-is/src/ReactIs.js
@@ -72,7 +72,7 @@ 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 unstable_SuspenseList = REACT_SUSPENSE_LIST_TYPE;
+export const SuspenseList = REACT_SUSPENSE_LIST_TYPE;
 
 export {isValidElementType};
 
@@ -143,6 +143,6 @@ export function isStrictMode(object: any) {
 export function isSuspense(object: any) {
   return typeOf(object) === REACT_SUSPENSE_TYPE;
 }
-export function unstable_isSuspenseList(object: any) {
+export function isSuspenseList(object: any) {
   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
index e054cdbc4d48..b6adc66b00b5 100644
--- a/packages/react-is/src/__tests__/ReactIs-test.js
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -186,22 +186,13 @@ describe('ReactIs', () => {
     expect(ReactIs.isSuspense(<div />)).toBe(false);
   });
 
-  // @gate experimental
   it('should identify suspense list', () => {
-    expect(ReactIs.isValidElementType(React.unstable_SuspenseList)).toBe(true);
-    expect(ReactIs.typeOf(<React.unstable_SuspenseList />)).toBe(
-      ReactIs.unstable_SuspenseList,
-    );
-    expect(
-      ReactIs.unstable_isSuspenseList(<React.unstable_SuspenseList />),
-    ).toBe(true);
-    expect(
-      ReactIs.unstable_isSuspenseList({type: ReactIs.unstable_SuspenseList}),
-    ).toBe(false);
-    expect(ReactIs.unstable_isSuspenseList('React.unstable_SuspenseList')).toBe(
-      false,
-    );
-    expect(ReactIs.unstable_isSuspenseList(<div />)).toBe(false);
+    expect(ReactIs.isValidElementType(React.SuspenseList)).toBe(true);
+    expect(ReactIs.typeOf(<React.SuspenseList />)).toBe(ReactIs.SuspenseList);
+    expect(ReactIs.isSuspenseList(<React.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', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index ef14b6588e4b..33f4353649ca 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -22,7 +22,7 @@ describe('ReactCache', () => {
     Suspense = React.Suspense;
     getCacheForType = React.unstable_getCacheForType;
     useCacheRefresh = React.unstable_useCacheRefresh;
-    startTransition = React.unstable_startTransition;
+    startTransition = React.startTransition;
     useState = React.useState;
 
     caches = [];
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index 7d72ea717d76..45079c89edee 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -19,7 +19,7 @@ describe('ReactLazyContextPropagation', () => {
     useState = React.useState;
     useContext = React.useContext;
     Suspense = React.Suspense;
-    SuspenseList = React.unstable_SuspenseList;
+    SuspenseList = React.SuspenseList;
 
     getCacheForType = React.unstable_getCacheForType;
 
@@ -649,8 +649,6 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BBB');
   });
 
-  // @gate enableCache
-  // @gate experimental
   test('contexts are propagated through SuspenseList', async () => {
     // This kinda tests an implementation detail. SuspenseList has an early
     // bailout that doesn't use `bailoutOnAlreadyFinishedWork`. It probably
diff --git a/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js b/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
index 599aabda7235..7dac41380e61 100644
--- a/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactDisableSchedulerTimeoutBasedOnReactExpirationTime-test.internal.js
@@ -45,7 +45,6 @@ describe('ReactSuspenseList', () => {
     return Component;
   }
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('appends rendering tasks to the end of the priority queue', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -65,7 +64,7 @@ describe('ReactSuspenseList', () => {
     expect(Scheduler).toFlushAndYield([]);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.render(<App show={true} />);
       });
     } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 885ee46e1477..8497aa6c9ef6 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -25,7 +25,7 @@ describe('ReactExpiration', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
-    startTransition = React.unstable_startTransition;
+    startTransition = React.startTransition;
     useState = React.useState;
     useEffect = React.useEffect;
 
@@ -115,10 +115,10 @@ describe('ReactExpiration', () => {
     // Flush the sync task.
     ReactNoop.flushSync();
   }
-  // @gate experimental || !enableSyncDefaultUpdates
+
   it('increases priority of updates as time progresses', () => {
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<span prop="done" />);
       });
     } else {
@@ -142,7 +142,6 @@ describe('ReactExpiration', () => {
     expect(ReactNoop.getChildren()).toEqual([span('done')]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('two updates of like priority in the same event always flush within the same batch', () => {
     class TextClass extends React.Component {
       componentDidMount() {
@@ -166,7 +165,7 @@ describe('ReactExpiration', () => {
     // First, show what happens for updates in two separate events.
     // Schedule an update.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<TextClass text="A" />);
       });
     } else {
@@ -201,7 +200,6 @@ describe('ReactExpiration', () => {
     expect(Scheduler).toFlushAndYield(['B [render]', 'B [commit]']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   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",
@@ -228,7 +226,7 @@ describe('ReactExpiration', () => {
       // First, show what happens for updates in two separate events.
       // Schedule an update.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.render(<TextClass text="A" />);
         });
       } else {
@@ -269,7 +267,6 @@ describe('ReactExpiration', () => {
     },
   );
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('cannot update at the same expiration time that is already rendering', () => {
     const store = {text: 'initial'};
     const subscribers = [];
@@ -307,7 +304,7 @@ describe('ReactExpiration', () => {
 
     // Initial mount
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<App />);
       });
     } else {
@@ -326,7 +323,7 @@ describe('ReactExpiration', () => {
 
     // Partial update
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         subscribers.forEach(s => s.setState({text: '1'}));
       });
     } else {
@@ -347,7 +344,6 @@ describe('ReactExpiration', () => {
     ]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('stops yielding if CPU-bound update takes too long to finish', () => {
     const root = ReactNoop.createRoot();
     function App() {
@@ -363,7 +359,7 @@ describe('ReactExpiration', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.render(<App />);
       });
     } else {
@@ -381,7 +377,6 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('ABCDE');
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('root expiration is measured from the time of the first update', () => {
     Scheduler.unstable_advanceTime(10000);
 
@@ -398,7 +393,7 @@ describe('ReactExpiration', () => {
       );
     }
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.render(<App />);
       });
     } else {
@@ -416,7 +411,6 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('ABCDE');
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should measure expiration times relative to module initialization', () => {
     // Tests an implementation detail where expiration times are computed using
     // bitwise operations.
@@ -433,7 +427,7 @@ describe('ReactExpiration', () => {
     ReactNoop = require('react-noop-renderer');
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render('Hi');
       });
     } else {
@@ -453,7 +447,6 @@ describe('ReactExpiration', () => {
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should measure callback timeout relative to current time, not start-up time', () => {
     // 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
@@ -463,7 +456,7 @@ describe('ReactExpiration', () => {
     Scheduler.unstable_advanceTime(10000);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render('Hi');
       });
     } else {
@@ -481,7 +474,6 @@ describe('ReactExpiration', () => {
     expect(ReactNoop).toMatchRenderedOutput('Hi');
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('prevents starvation by sync updates by disabling time slicing if too much time has elapsed', async () => {
     let updateSyncPri;
     let updateNormalPri;
@@ -513,7 +505,7 @@ describe('ReactExpiration', () => {
     // First demonstrate what happens when there's no starvation
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           updateNormalPri();
         });
       } else {
@@ -537,7 +529,7 @@ describe('ReactExpiration', () => {
     // Do the same thing, but starve the first update
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           updateNormalPri();
         });
       } else {
@@ -628,7 +620,6 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('Sync pri: 2, Idle pri: 2');
   });
 
-  // @gate experimental
   it('when multiple lanes expire, we can finish the in-progress one without including the others', async () => {
     let setA;
     let setB;
@@ -677,7 +668,6 @@ describe('ReactExpiration', () => {
     });
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('updates do not expire while they are IO-bound', async () => {
     const {Suspense} = React;
 
@@ -701,7 +691,7 @@ describe('ReactExpiration', () => {
 
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App step={1} />);
         });
       } else {
@@ -734,7 +724,6 @@ describe('ReactExpiration', () => {
     });
   });
 
-  // @gate experimental
   it('flushSync should not affect expired work', async () => {
     let setA;
     let setB;
@@ -778,7 +767,6 @@ describe('ReactExpiration', () => {
     });
   });
 
-  // @gate experimental
   it('passive effects of expired update flush after paint', async () => {
     function App({step}) {
       useEffect(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index a3df1effd7b3..fc1ac7f3377b 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -14,7 +14,7 @@ describe('ReactFlushSync', () => {
     Scheduler = require('scheduler');
     useState = React.useState;
     useEffect = React.useEffect;
-    startTransition = React.unstable_startTransition;
+    startTransition = React.startTransition;
   });
 
   function Text({text}) {
@@ -22,7 +22,6 @@ describe('ReactFlushSync', () => {
     return text;
   }
 
-  // @gate experimental || !enableSyncDefaultUpdates
   test('changes priority of updates in useEffect', async () => {
     function App() {
       const [syncState, setSyncState] = useState(0);
@@ -39,7 +38,7 @@ describe('ReactFlushSync', () => {
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App />);
         });
       } else {
@@ -64,7 +63,6 @@ describe('ReactFlushSync', () => {
     expect(root).toMatchRenderedOutput('1, 1');
   });
 
-  // @gate experimental
   test('nested with startTransition', async () => {
     let setSyncState;
     let setState;
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 6758d9d4dc17..e43804ab5006 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -52,8 +52,8 @@ describe('ReactHooksWithNoopRenderer', () => {
     useImperativeHandle = React.useImperativeHandle;
     forwardRef = React.forwardRef;
     memo = React.memo;
-    useTransition = React.unstable_useTransition;
-    useDeferredValue = React.unstable_useDeferredValue;
+    useTransition = React.useTransition;
+    useDeferredValue = React.useDeferredValue;
     Suspense = React.Suspense;
     act = ReactNoop.act;
     ContinuousEventPriority = require('react-reconciler/constants')
@@ -149,7 +149,6 @@ describe('ReactHooksWithNoopRenderer', () => {
     return Promise.resolve().then(() => {});
   }
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('resumes after an interruption', () => {
     function Counter(props, ref) {
       const [count, updateCount] = useState(0);
@@ -166,7 +165,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
     // Schedule some updates
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         // TODO: Batched updates need to be inside startTransition?
         ReactNoop.batchedUpdates(() => {
           counter.current.updateCount(1);
@@ -691,7 +690,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span(22)]);
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('discards render phase updates if something suspends', async () => {
       const thenable = {then() {}};
       function Foo({signal}) {
@@ -728,7 +726,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(root).toMatchRenderedOutput(<span prop={0} />);
 
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<Foo signal={false} />);
         });
       } else {
@@ -739,7 +737,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       // Rendering again should suspend again.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<Foo signal={false} />);
         });
       } else {
@@ -748,7 +746,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield(['Suspend!']);
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('discards render phase updates if something suspends, but not other updates in the same component', async () => {
       const thenable = {then() {}};
       function Foo({signal}) {
@@ -792,7 +789,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       await ReactNoop.act(async () => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             root.render(<Foo signal={false} />);
             setLabel('B');
           });
@@ -806,7 +803,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
         // Rendering again should suspend again.
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             root.render(<Foo signal={false} />);
           });
         } else {
@@ -817,7 +814,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         // Flip the signal back to "cancel" the update. However, the update to
         // label should still proceed. It shouldn't have been dropped.
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             root.render(<Foo signal={true} />);
           });
         } else {
@@ -864,13 +861,12 @@ describe('ReactHooksWithNoopRenderer', () => {
     });
 
     // TODO: This should probably warn
-    // @gate experimental
     it('calling startTransition inside render phase', async () => {
       function App() {
         const [counter, setCounter] = useState(0);
 
         if (counter === 0) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             setCounter(c => c + 1);
           });
         }
@@ -1315,7 +1311,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('does not warn about state updates for unmounted components with pending passive unmounts for alternates', () => {
       let setParentState = null;
       const setChildStates = [];
@@ -1383,7 +1378,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
         // Schedule another update for children, and partially process it.
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             setChildStates.forEach(setChildState => setChildState(2));
           });
         } else {
@@ -1685,7 +1680,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('updates have async priority even if effects are flushed early', () => {
       function Counter(props) {
         const [count, updateCount] = useState('(empty)');
@@ -1707,7 +1701,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
         // Rendering again should flush the previous commit's effects
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             ReactNoop.render(<Counter count={1} />, () =>
               Scheduler.unstable_yieldValue('Sync effect'),
             );
@@ -3127,8 +3121,8 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(totalRefUpdates).toBe(2); // Should not increase since last time
     });
   });
+
   describe('useTransition', () => {
-    // @gate experimental
     it('delays showing loading state until after timeout', async () => {
       let transition;
       function App() {
@@ -3190,7 +3184,6 @@ describe('ReactHooksWithNoopRenderer', () => {
   });
 
   describe('useDeferredValue', () => {
-    // @gate experimental
     it('defers text value', async () => {
       function TextBox({text}) {
         return <AsyncText text={text} />;
@@ -3694,9 +3687,8 @@ describe('ReactHooksWithNoopRenderer', () => {
     ]);
   });
 
-  // @gate experimental
   it('regression: SuspenseList causes unmounts to be dropped on deletion', async () => {
-    const SuspenseList = React.unstable_SuspenseList;
+    const SuspenseList = React.SuspenseList;
 
     function Row({label}) {
       useEffect(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
index efcb4d728887..f1986249c0d2 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -50,7 +50,6 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushWithoutYielding();
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should render a simple component, in steps if needed', () => {
     function Bar() {
       Scheduler.unstable_yieldValue('Bar');
@@ -67,7 +66,7 @@ describe('ReactIncremental', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />, () =>
           Scheduler.unstable_yieldValue('callback'),
         );
@@ -143,7 +142,6 @@ describe('ReactIncremental', () => {
     ]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('can cancel partially rendered work and restart', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -165,7 +163,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'Bar']);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo text="bar" />);
       });
     } else {
@@ -178,7 +176,7 @@ describe('ReactIncremental', () => {
     ReactNoop.flushSync(() => ReactNoop.render(null));
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo text="baz" />);
       });
     } else {
@@ -192,7 +190,6 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Bar']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should call callbacks even if updates are aborted', () => {
     let inst;
 
@@ -219,7 +216,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushWithoutYielding();
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         inst.setState(
           () => {
             Scheduler.unstable_yieldValue('setState1');
@@ -244,7 +241,7 @@ describe('ReactIncremental', () => {
     // This will abort the previous work and restart
     ReactNoop.flushSync(() => ReactNoop.render(<Foo />));
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         inst.setState(
           () => {
             Scheduler.unstable_yieldValue('setState2');
@@ -1764,7 +1761,6 @@ describe('ReactIncremental', () => {
     expect(instance.state.n).toEqual(3);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('merges and masks context', () => {
     class Intl extends React.Component {
       static childContextTypes = {
@@ -1883,7 +1879,7 @@ describe('ReactIncremental', () => {
       'ShowBoth {"locale":"de"}',
     ]);
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <Intl locale="sv">
             <ShowLocale />
@@ -2033,7 +2029,7 @@ describe('ReactIncremental', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <Intl locale="fr">
             <ShowLocale />
@@ -2739,7 +2735,6 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['count:1, name:not brian']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('does not interrupt for update at same priority', () => {
     function Parent(props) {
       Scheduler.unstable_yieldValue('Parent: ' + props.step);
@@ -2752,7 +2747,7 @@ describe('ReactIncremental', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Parent step={1} />);
       });
     } else {
@@ -2766,7 +2761,6 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Child: 1', 'Parent: 2', 'Child: 2']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('does not interrupt for update at lower priority', () => {
     function Parent(props) {
       Scheduler.unstable_yieldValue('Parent: ' + props.step);
@@ -2779,7 +2773,7 @@ describe('ReactIncremental', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Parent step={1} />);
       });
     } else {
@@ -2794,7 +2788,6 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Child: 1', 'Parent: 2', 'Child: 2']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('does interrupt for update at higher priority', () => {
     function Parent(props) {
       Scheduler.unstable_yieldValue('Parent: ' + props.step);
@@ -2807,7 +2800,7 @@ describe('ReactIncremental', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Parent step={1} />);
       });
     } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index d26a433b6fa5..c0d269fa25ae 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -58,7 +58,6 @@ describe('ReactIncrementalErrorHandling', () => {
     );
   }
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('recovers from errors asynchronously', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -92,7 +91,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <ErrorBoundary>
             <Indirection>
@@ -171,7 +170,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('recovers from errors asynchronously (legacy, no getDerivedStateFromError)', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -205,7 +203,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <ErrorBoundary>
             <Indirection>
@@ -270,7 +268,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);
   });
 
-  // @gate experimental
   it("retries at a lower priority if there's additional pending work", async () => {
     function App(props) {
       if (props.isBroken) {
@@ -285,12 +282,12 @@ describe('ReactIncrementalErrorHandling', () => {
       Scheduler.unstable_yieldValue('commit');
     }
 
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       ReactNoop.render(<App isBroken={true} />, onCommit);
     });
     expect(Scheduler).toFlushAndYieldThrough(['error']);
 
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       // This update is in a separate batch
       ReactNoop.render(<App isBroken={false} />, onCommit);
     });
@@ -333,14 +330,14 @@ describe('ReactIncrementalErrorHandling', () => {
       Scheduler.unstable_yieldValue('commit');
     }
 
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       ReactNoop.render(<App isBroken={true} />, onCommit);
     });
     expect(Scheduler).toFlushAndYieldThrough(['error']);
 
     expect(ReactNoop).toMatchRenderedOutput(null);
 
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       // This update is in a separate batch
       ReactNoop.render(<App isBroken={false} />, onCommit);
     });
@@ -378,7 +375,6 @@ describe('ReactIncrementalErrorHandling', () => {
     );
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('retries one more time before handling error', () => {
     function BadRender({unused}) {
       Scheduler.unstable_yieldValue('BadRender');
@@ -401,7 +397,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Parent />, () =>
           Scheduler.unstable_yieldValue('commit'),
         );
@@ -429,7 +425,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('retries one more time if an error occurs during a render that expires midway through the tree', async () => {
     function Oops({unused}) {
       Scheduler.unstable_yieldValue('Oops');
@@ -454,7 +449,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<App />);
       });
     } else {
@@ -566,7 +561,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Caught an error: Hello.')]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('catches render error in a boundary during partial deferred mounting', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -592,7 +586,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <ErrorBoundary>
             <BrokenRender />
@@ -757,7 +751,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('propagates an error from a noop error boundary during partial deferred mounting', () => {
     class RethrowErrorBoundary extends React.Component {
       componentDidCatch(error) {
@@ -776,7 +769,7 @@ describe('ReactIncrementalErrorHandling', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <RethrowErrorBoundary>
             <BrokenRender />
@@ -1842,7 +1835,6 @@ describe('ReactIncrementalErrorHandling', () => {
     });
   }
 
-  // @gate experimental
   it('uncaught errors should be discarded if the render is aborted', async () => {
     const root = ReactNoop.createRoot();
 
@@ -1853,7 +1845,7 @@ describe('ReactIncrementalErrorHandling', () => {
 
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<Oops />);
         });
       } else {
@@ -1866,7 +1858,7 @@ describe('ReactIncrementalErrorHandling', () => {
       // 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.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.render('Everything is fine.');
       });
     });
@@ -1875,7 +1867,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(root).toMatchRenderedOutput('Everything is fine.');
   });
 
-  // @gate experimental
   it('uncaught errors are discarded if the render is aborted, case 2', async () => {
     const {useState} = React;
     const root = ReactNoop.createRoot();
@@ -1902,7 +1893,7 @@ describe('ReactIncrementalErrorHandling', () => {
     await ReactNoop.act(async () => {
       // Schedule a default pri and a low pri update on the root.
       root.render(<Oops />);
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.render(<AllGood />);
       });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
index def901c153a9..2b21aca385bd 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalReflection-test.js
@@ -34,7 +34,6 @@ describe('ReactIncrementalReflection', () => {
     return {type: 'span', children: [], prop, hidden: false};
   }
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('handles isMounted even when the initial render is deferred', () => {
     const instances = [];
 
@@ -65,7 +64,7 @@ describe('ReactIncrementalReflection', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />);
       });
     } else {
@@ -83,7 +82,6 @@ describe('ReactIncrementalReflection', () => {
     expect(instances[0]._isMounted()).toBe(true);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('handles isMounted when an unmount is deferred', () => {
     const instances = [];
 
@@ -120,7 +118,7 @@ describe('ReactIncrementalReflection', () => {
     expect(instances[0]._isMounted()).toBe(true);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo mount={false} />);
       });
     } else {
@@ -138,7 +136,6 @@ describe('ReactIncrementalReflection', () => {
     expect(instances[0]._isMounted()).toBe(false);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('finds no node before insertion and correct node before deletion', () => {
     let classInstance = null;
 
@@ -210,7 +207,7 @@ describe('ReactIncrementalReflection', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo step={0} />);
       });
     } else {
@@ -250,7 +247,7 @@ describe('ReactIncrementalReflection', () => {
     // The next step will render a new host node but won't get committed yet.
     // We expect this to mutate the original Fiber.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo step={2} />);
       });
     } else {
@@ -277,7 +274,7 @@ describe('ReactIncrementalReflection', () => {
 
     // Render to null but don't commit it yet.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo step={3} />);
       });
     } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index 3126957b2318..71dfe3529bfb 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -85,7 +85,6 @@ describe('ReactIncrementalScheduling', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span prop={5} />);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('works on deferred roots in the order they were scheduled', () => {
     const {useEffect} = React;
     function Text({text}) {
@@ -109,7 +108,7 @@ describe('ReactIncrementalScheduling', () => {
     // Schedule deferred work in the reverse order
     ReactNoop.act(() => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.renderToRootWithID(<Text text="c:2" />, 'c');
           ReactNoop.renderToRootWithID(<Text text="b:2" />, 'b');
         });
@@ -126,7 +125,7 @@ describe('ReactIncrementalScheduling', () => {
       // Schedule last bit of work, it will get processed the last
 
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.renderToRootWithID(<Text text="a:2" />, 'a');
         });
       } else {
@@ -146,7 +145,6 @@ describe('ReactIncrementalScheduling', () => {
     });
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('schedules sync updates when inside componentDidMount/Update', () => {
     let instance;
 
@@ -186,7 +184,7 @@ describe('ReactIncrementalScheduling', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />);
       });
     } else {
@@ -206,7 +204,7 @@ describe('ReactIncrementalScheduling', () => {
     ]);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         instance.setState({tick: 2});
       });
     } else {
@@ -224,7 +222,6 @@ describe('ReactIncrementalScheduling', () => {
     ]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('can opt-in to async scheduling inside componentDidMount/Update', () => {
     let instance;
     class Foo extends React.Component {
@@ -284,7 +281,7 @@ describe('ReactIncrementalScheduling', () => {
     // Increment the tick to 2. This will trigger an update inside cDU. Flush
     // the first update without flushing the second one.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         instance.setState({tick: 2});
       });
 
@@ -315,7 +312,6 @@ describe('ReactIncrementalScheduling', () => {
     }
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('performs Task work even after time runs out', () => {
     class Foo extends React.Component {
       state = {step: 1};
@@ -334,7 +330,7 @@ describe('ReactIncrementalScheduling', () => {
       }
     }
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />);
       });
     } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
index fd819eeb32b4..bb42fc621f54 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -384,7 +384,6 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ReactNoop.getChildren('portalContainer')).toEqual([]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('does not update child nodes if a flush is aborted', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -411,7 +410,7 @@ describe('ReactIncrementalSideEffects', () => {
     ]);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo text="World" />);
       });
     } else {
@@ -640,14 +639,13 @@ describe('ReactIncrementalSideEffects', () => {
     );
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('can update a completed tree before it has a chance to commit', () => {
     function Foo(props) {
       Scheduler.unstable_yieldValue('Foo');
       return <span prop={props.step} />;
     }
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo step={1} />);
       });
     } else {
@@ -662,7 +660,7 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={1} />);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo step={2} />);
       });
     } else {
@@ -675,7 +673,7 @@ describe('ReactIncrementalSideEffects', () => {
     // new props
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo step={3} />);
       });
     } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index a3fcf9dc7011..cd560ae91ca3 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -131,7 +131,6 @@ describe('ReactIncrementalUpdates', () => {
     expect(instance.state).toEqual({c: 'c', d: 'd'});
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('can abort an update, schedule additional updates, and resume', () => {
     let instance;
     class Foo extends React.Component {
@@ -162,7 +161,7 @@ describe('ReactIncrementalUpdates', () => {
 
     // Schedule some async updates
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         instance.setState(createUpdate('a'));
         instance.setState(createUpdate('b'));
         instance.setState(createUpdate('c'));
@@ -184,7 +183,7 @@ describe('ReactIncrementalUpdates', () => {
         instance.setState(createUpdate('e'));
         instance.setState(createUpdate('f'));
       });
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         instance.setState(createUpdate('g'));
       });
 
@@ -229,7 +228,6 @@ describe('ReactIncrementalUpdates', () => {
     }
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('can abort an update, schedule a replaceState, and resume', () => {
     let instance;
     class Foo extends React.Component {
@@ -260,7 +258,7 @@ describe('ReactIncrementalUpdates', () => {
 
     // Schedule some async updates
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         instance.setState(createUpdate('a'));
         instance.setState(createUpdate('b'));
         instance.setState(createUpdate('c'));
@@ -285,7 +283,7 @@ describe('ReactIncrementalUpdates', () => {
         // reaching into the updater.
         instance.updater.enqueueReplaceState(instance, createUpdate('f'));
       });
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         instance.setState(createUpdate('g'));
       });
 
@@ -543,7 +541,6 @@ describe('ReactIncrementalUpdates', () => {
     expect(ReactNoop.getChildren()).toEqual([span('derived state')]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('regression: does not expire soon due to layout effects in the last batch', () => {
     const {useState, useLayoutEffect} = React;
 
@@ -561,7 +558,7 @@ describe('ReactIncrementalUpdates', () => {
 
     ReactNoop.act(() => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.render(<App />);
         });
       } else {
@@ -577,7 +574,7 @@ describe('ReactIncrementalUpdates', () => {
 
       Scheduler.unstable_advanceTime(10000);
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           setCount(2);
         });
       } else {
@@ -588,7 +585,6 @@ describe('ReactIncrementalUpdates', () => {
     });
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('regression: does not expire soon due to previous flushSync', () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -603,7 +599,7 @@ describe('ReactIncrementalUpdates', () => {
     Scheduler.unstable_advanceTime(10000);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Text text="B" />);
       });
     } else {
@@ -613,7 +609,6 @@ describe('ReactIncrementalUpdates', () => {
     expect(Scheduler).toHaveYielded([]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('regression: does not expire soon due to previous expired work', () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -621,7 +616,7 @@ describe('ReactIncrementalUpdates', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Text text="A" />);
       });
     } else {
@@ -634,7 +629,7 @@ describe('ReactIncrementalUpdates', () => {
     Scheduler.unstable_advanceTime(10000);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Text text="B" />);
       });
     } else {
@@ -644,7 +639,6 @@ describe('ReactIncrementalUpdates', () => {
     expect(Scheduler).toHaveYielded([]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('when rebasing, does not exclude updates that were already committed, regardless of priority', async () => {
     const {useState, useLayoutEffect} = React;
 
@@ -678,7 +672,7 @@ describe('ReactIncrementalUpdates', () => {
 
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           pushToLog('A');
         });
       } else {
@@ -707,7 +701,6 @@ describe('ReactIncrementalUpdates', () => {
     expect(root).toMatchRenderedOutput('ABCD');
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('when rebasing, does not exclude updates that were already committed, regardless of priority (classes)', async () => {
     let pushToLog;
     class App extends React.Component {
@@ -740,7 +733,7 @@ describe('ReactIncrementalUpdates', () => {
 
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           pushToLog('A');
         });
       } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
index 271fe1ffb7c3..bab36c770e71 100644
--- a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
@@ -12,7 +12,7 @@ describe('ReactInterleavedUpdates', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
-    startTransition = React.unstable_startTransition;
+    startTransition = React.startTransition;
     useState = React.useState;
     useEffect = React.useEffect;
   });
@@ -22,7 +22,6 @@ describe('ReactInterleavedUpdates', () => {
     return text;
   }
 
-  // @gate experimental || !enableSyncDefaultUpdates
   test('update during an interleaved event is not processed during the current render', async () => {
     const updaters = [];
 
@@ -57,7 +56,7 @@ describe('ReactInterleavedUpdates', () => {
 
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           updateChildren(1);
         });
       } else {
@@ -69,7 +68,7 @@ describe('ReactInterleavedUpdates', () => {
       // In an interleaved event, schedule an update on each of the children.
       // Including the two that haven't rendered yet.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           updateChildren(2);
         });
       } else {
@@ -85,7 +84,6 @@ describe('ReactInterleavedUpdates', () => {
     expect(root).toMatchRenderedOutput('222');
   });
 
-  // @gate experimental
   // @gate !enableSyncDefaultUpdates
   test('low priority update during an interleaved event is not processed during the current render', async () => {
     // Same as previous test, but the interleaved update is lower priority than
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 215c83db2e25..b062ad8ab94b 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -1475,7 +1475,6 @@ describe('ReactLazy', () => {
   });
 
   // @gate enableLazyElements
-  // @gate experimental || !enableSyncDefaultUpdates
   it('mount and reorder lazy elements', async () => {
     class Child extends React.Component {
       componentDidMount() {
@@ -1536,7 +1535,7 @@ describe('ReactLazy', () => {
 
     // Swap the position of A and B
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.update(<Parent swap={true} />);
       });
     } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index f81a2131e0b9..60db80402fb5 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -828,7 +828,6 @@ describe('ReactNewContext', () => {
       );
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('warns if multiple renderers concurrently render the same context', () => {
       spyOnDev(console, 'error');
       const Context = React.createContext(0);
@@ -848,7 +847,7 @@ describe('ReactNewContext', () => {
       }
 
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.render(<App value={1} />);
         });
       } else {
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index 3c09935a5b7c..5992d993636a 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -28,7 +28,7 @@ describe('ReactSchedulerIntegration', () => {
     NormalPriority = Scheduler.unstable_NormalPriority;
     IdlePriority = Scheduler.unstable_IdlePriority;
     runWithPriority = Scheduler.unstable_runWithPriority;
-    startTransition = React.unstable_startTransition;
+    startTransition = React.startTransition;
   });
 
   // Note: This is based on a similar component we use in www. We can delete
@@ -88,7 +88,6 @@ describe('ReactSchedulerIntegration', () => {
     ]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('requests a paint after committing', () => {
     const scheduleCallback = Scheduler.unstable_scheduleCallback;
 
@@ -102,7 +101,7 @@ describe('ReactSchedulerIntegration', () => {
 
     // Schedule a React render. React will request a paint after committing it.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.render('Update');
       });
     } else {
@@ -203,7 +202,7 @@ describe(
       React = require('react');
       ReactNoop = require('react-noop-renderer');
       Scheduler = require('scheduler');
-      startTransition = React.unstable_startTransition;
+      startTransition = React.startTransition;
     });
 
     afterEach(() => {
@@ -252,7 +251,6 @@ describe(
       });
     });
 
-    // @gate experimental
     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
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index e0fcab7a77cc..a5db0b503612 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -96,7 +96,6 @@ describe('ReactSuspense', () => {
     }
   }
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('suspends rendering and continues later', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -128,7 +127,7 @@ describe('ReactSuspense', () => {
     // Navigate the shell to now render the child content.
     // This should suspend.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.update(<Foo renderBar={true} />);
       });
     } else {
@@ -201,7 +200,6 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('AB');
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('interrupts current render if promise resolves before current render phase', () => {
     let didResolve = false;
     const listeners = [];
@@ -244,7 +242,7 @@ describe('ReactSuspense', () => {
 
     // The update will suspend.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.update(
           <>
             <Suspense fallback={<Text text="Loading..." />}>
@@ -289,7 +287,6 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('AsyncAfter SuspenseSibling');
   });
 
-  // @gate experimental
   // @gate !enableSyncDefaultUpdates
   it(
     'interrupts current render when something suspends with a ' +
@@ -331,7 +328,7 @@ describe('ReactSuspense', () => {
 
       // Schedule another update. This will have lower priority because it's
       // a transition.
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.update(<App shouldSuspend={false} step={2} />);
       });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index dfac720d4b25..f50b3a6a7e44 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -14,7 +14,7 @@ describe('ReactSuspenseList', () => {
     Scheduler = require('scheduler');
     Profiler = React.Profiler;
     Suspense = React.Suspense;
-    SuspenseList = React.unstable_SuspenseList;
+    SuspenseList = React.SuspenseList;
   });
 
   function Text(props) {
@@ -40,7 +40,6 @@ describe('ReactSuspenseList', () => {
     return Component;
   }
 
-  // @gate experimental
   it('warns if an unsupported revealOrder option is used', () => {
     function Foo() {
       return (
@@ -60,7 +59,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('warns if a upper case revealOrder option is used', () => {
     function Foo() {
       return (
@@ -80,7 +78,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('warns if a misspelled revealOrder option is used', () => {
     function Foo() {
       return (
@@ -101,7 +98,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('warns if a single element is passed to a "forwards" list', () => {
     function Foo({children}) {
       return <SuspenseList revealOrder="forwards">{children}</SuspenseList>;
@@ -134,7 +130,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('warns if a single fragment is passed to a "backwards" list', () => {
     function Foo() {
       return (
@@ -155,7 +150,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('warns if a nested array is passed to a "forwards" list', () => {
     function Foo({items}) {
       return (
@@ -183,7 +177,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('shows content independently by default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -250,7 +243,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('shows content independently in legacy mode regardless of option', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -321,7 +313,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays all "together"', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -391,7 +382,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays all "together" even when nested as siblings', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -477,7 +467,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays all "together" in nested SuspenseLists', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -539,7 +528,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays all "together" in nested SuspenseLists where the inner is default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -599,7 +587,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays all "together" during an update', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -684,7 +671,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('avoided boundaries can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -783,7 +769,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays each items in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -849,7 +834,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays each items in "backwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -915,7 +899,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays added row at the top "together" and the bottom in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1070,7 +1053,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('displays added row at the top "together" and the bottom in "backwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1255,7 +1237,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('switches to rendering fallbacks if the tail takes long CPU time', async () => {
     function Foo() {
       return (
@@ -1275,7 +1256,7 @@ describe('ReactSuspenseList', () => {
 
     // This render is only CPU bound. Nothing suspends.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />);
       });
     } else {
@@ -1324,7 +1305,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('only shows one loading state at a time for "collapsed" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1394,7 +1374,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('warns if an unsupported tail option is used', () => {
     function Foo() {
       return (
@@ -1415,7 +1394,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('warns if a tail option is used with "together"', () => {
     function Foo() {
       return (
@@ -1436,7 +1414,6 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
-  // @gate experimental
   it('renders one "collapsed" fallback even if CPU time elapsed', async () => {
     function Foo() {
       return (
@@ -1459,7 +1436,7 @@ describe('ReactSuspenseList', () => {
 
     // This render is only CPU bound. Nothing suspends.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />);
       });
     } else {
@@ -1509,7 +1486,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('adding to the middle does not collapse insertions (forwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1652,7 +1628,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('adding to the middle does not collapse insertions (backwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1800,7 +1775,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('adding to the middle of committed tail does not collapse insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1958,7 +1932,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('only shows no initial loading state "hidden" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2022,7 +1995,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('eventually resolves a nested forwards suspense list', async () => {
     const B = createAsyncText('B');
 
@@ -2085,7 +2057,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('eventually resolves a nested forwards suspense list with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2132,7 +2103,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('eventually resolves two nested forwards suspense lists with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2200,7 +2170,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('can do unrelated adjacent updates', async () => {
     let updateAdjacent;
     function Adjacent() {
@@ -2247,7 +2216,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2336,7 +2304,6 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
-  // @gate experimental
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2425,7 +2392,6 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
-  // @gate experimental
   it('is able to interrupt a partially rendered tree and continue later', async () => {
     const AsyncA = createAsyncText('A');
 
@@ -2462,7 +2428,7 @@ describe('ReactSuspenseList', () => {
     await ReactNoop.act(async () => {
       // Add a few items at the end.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           updateLowPri(true);
         });
       } else {
@@ -2504,7 +2470,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('can resume class components when revealed together', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2567,7 +2532,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('should be able to progressively show CPU expensive rows with two pass rendering', async () => {
     function TwoPass({text}) {
       const [pass, setPass] = React.useState(0);
@@ -2605,7 +2569,7 @@ describe('ReactSuspenseList', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<App />);
       });
     } else {
@@ -2638,7 +2602,6 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental
   it('should be able to progressively show rows with two pass rendering and visible', async () => {
     function TwoPass({text}) {
       const [pass, setPass] = React.useState(0);
@@ -2678,7 +2641,7 @@ describe('ReactSuspenseList', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<App />);
       });
     } else {
@@ -2720,7 +2683,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate experimental && enableProfilerTimer
+  // @gate enableProfilerTimer
   it('counts the actual duration when profiling a SuspenseList', async () => {
     // Order of parameters: id, phase, actualDuration, treeBaseDuration
     const onRender = jest.fn();
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 668299b282b9..4110772513b8 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -212,7 +212,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />);
       });
     } else {
@@ -284,7 +284,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // The update will suspend.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo renderBar={true} />);
       });
     } else {
@@ -354,7 +354,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield([]);
     // B suspends. Continue rendering the remaining siblings.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <Suspense fallback={<Text text="Loading..." />}>
             <Text text="A" />
@@ -401,7 +401,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   // TODO: Delete this feature flag.
   // @gate !replayFailedUnitOfWorkWithInvokeGuardedCallback || !__DEV__
   // @gate enableCache
-  // @gate experimental || !enableSyncDefaultUpdates
   it('retries on error', async () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -437,7 +436,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<App renderContent={true} />);
       });
     } else {
@@ -567,7 +566,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate enableCache
-  // @gate experimental || !enableSyncDefaultUpdates
   it('keeps working on lower priority work after being pinged', async () => {
     // Advance the virtual time so that we're close to the edge of a bucket.
     ReactNoop.expire(149);
@@ -586,7 +584,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([]);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<App showA={true} showB={false} />);
       });
     } else {
@@ -599,7 +597,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // but not enough to expire the suspense timeout.
     ReactNoop.expire(120);
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<App showA={true} showB={true} />);
       });
     } else {
@@ -630,7 +628,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Default pri
     ReactNoop.render(<App />);
     // Low pri
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       ReactNoop.render(<App hide={true} />);
     });
 
@@ -647,7 +645,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   // 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.
-  // @gate experimental || !enableSyncDefaultUpdates
   it('tries each subsequent level after suspending', async () => {
     const root = ReactNoop.createRoot();
 
@@ -683,7 +680,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // Schedule an update at several distinct expiration times
     await ReactNoop.act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App step={1} shouldSuspend={true} />);
         });
       } else {
@@ -694,7 +691,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       interrupt();
 
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App step={2} shouldSuspend={true} />);
         });
       } else {
@@ -705,7 +702,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       interrupt();
 
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App step={3} shouldSuspend={true} />);
         });
       } else {
@@ -928,7 +925,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
   });
 
-  // @gate experimental
+  // @gate enableCache
   it('does not expire for transitions', async () => {
     ReactNoop.render(
       <Fragment>
@@ -937,7 +934,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
     expect(Scheduler).toFlushAndYield([]);
 
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       ReactNoop.render(
         <Fragment>
           <Suspense fallback={<Text text="Loading..." />}>
@@ -984,7 +981,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expect(ReactNoop.getChildren()).toEqual([]);
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <>
             <Suspense fallback={<Text text="Loading..." />}>
@@ -1051,7 +1048,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield([]);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(
           <Suspense fallback={<Text text="Loading..." />}>
             <AsyncText text="Async" />
@@ -1075,7 +1072,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Async')]);
   });
 
-  // @gate experimental
   // @gate enableCache
   it('starts working on an update even if its priority falls between two suspended levels', async () => {
     function App(props) {
@@ -1096,7 +1092,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['S']);
 
     // Schedule an update, and suspend for up to 5 seconds.
-    React.unstable_startTransition(() => ReactNoop.render(<App text="A" />));
+    React.startTransition(() => ReactNoop.render(<App text="A" />));
     // The update should suspend.
     expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([span('S')]);
@@ -1108,7 +1104,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('S')]);
 
     // Schedule another low priority update.
-    React.unstable_startTransition(() => ReactNoop.render(<App text="B" />));
+    React.startTransition(() => ReactNoop.render(<App text="B" />));
     // This update should also suspend.
     expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
     expect(ReactNoop.getChildren()).toEqual([span('S')]);
@@ -1857,7 +1853,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate enableCache
-  // @gate experimental || !enableSyncDefaultUpdates
   it('suspends for longer if something took a long (CPU bound) time to render', async () => {
     function Foo({renderContent}) {
       Scheduler.unstable_yieldValue('Foo');
@@ -1872,7 +1867,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo renderContent={true} />);
       });
     } else {
@@ -2044,7 +2039,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo renderContent={true} />);
       });
     } else {
@@ -2365,7 +2360,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo showB={true} />);
       });
     } else {
@@ -2445,7 +2440,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   describe('startTransition', () => {
-    // @gate experimental
     // @gate enableCache
     it('top level render', async () => {
       function App({page}) {
@@ -2457,7 +2451,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       // Initial render.
-      React.unstable_startTransition(() => ReactNoop.render(<App page="A" />));
+      React.startTransition(() => ReactNoop.render(<App page="A" />));
 
       expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
       // Only a short time is needed to unsuspend the initial loading state.
@@ -2471,7 +2465,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
       // Start transition.
-      React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));
+      React.startTransition(() => ReactNoop.render(<App page="B" />));
 
       expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
       Scheduler.unstable_advanceTime(100000);
@@ -2485,7 +2479,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
     });
 
-    // @gate experimental
     // @gate enableCache
     it('hooks', async () => {
       let transitionToPage;
@@ -2507,7 +2500,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Initial render.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('A'));
+        React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
         // Only a short time is needed to unsuspend the initial loading state.
@@ -2523,7 +2516,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Start transition.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('B'));
+        React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
         Scheduler.unstable_advanceTime(100000);
@@ -2538,7 +2531,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
     });
 
-    // @gate experimental
     // @gate enableCache
     it('classes', async () => {
       let transitionToPage;
@@ -2563,7 +2555,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Initial render.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('A'));
+        React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
         // Only a short time is needed to unsuspend the initial loading state.
@@ -2579,7 +2571,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Start transition.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('B'));
+        React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
         Scheduler.unstable_advanceTime(100000);
@@ -2596,7 +2588,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   describe('delays transitions when using React.startTranistion', () => {
-    // @gate experimental
     // @gate enableCache
     it('top level render', async () => {
       function App({page}) {
@@ -2608,7 +2599,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       // Initial render.
-      React.unstable_startTransition(() => ReactNoop.render(<App page="A" />));
+      React.startTransition(() => ReactNoop.render(<App page="A" />));
 
       expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
       // Only a short time is needed to unsuspend the initial loading state.
@@ -2622,7 +2613,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
       // Start transition.
-      React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));
+      React.startTransition(() => ReactNoop.render(<App page="B" />));
 
       expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
       Scheduler.unstable_advanceTime(2999);
@@ -2637,7 +2628,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
 
       // Start a long (infinite) transition.
-      React.unstable_startTransition(() => ReactNoop.render(<App page="C" />));
+      React.startTransition(() => ReactNoop.render(<App page="C" />));
       expect(Scheduler).toFlushAndYield(['Suspend! [C]', 'Loading...']);
 
       // Even after lots of time has passed, we have still not yet flushed the
@@ -2647,7 +2638,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
     });
 
-    // @gate experimental
     // @gate enableCache
     it('hooks', async () => {
       let transitionToPage;
@@ -2669,7 +2659,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Initial render.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('A'));
+        React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
         // Only a short time is needed to unsuspend the initial loading state.
@@ -2685,7 +2675,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Start transition.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('B'));
+        React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
 
@@ -2703,7 +2693,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Start a long (infinite) transition.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('C'));
+        React.startTransition(() => transitionToPage('C'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [C]', 'Loading...']);
 
@@ -2715,7 +2705,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       });
     });
 
-    // @gate experimental
     // @gate enableCache
     it('classes', async () => {
       let transitionToPage;
@@ -2740,7 +2729,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Initial render.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('A'));
+        React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
         // Only a short time is needed to unsuspend the initial loading state.
@@ -2756,7 +2745,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Start transition.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('B'));
+        React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
         Scheduler.unstable_advanceTime(2999);
@@ -2773,7 +2762,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Start a long (infinite) transition.
       await ReactNoop.act(async () => {
-        React.unstable_startTransition(() => transitionToPage('C'));
+        React.startTransition(() => transitionToPage('C'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [C]', 'Loading...']);
 
@@ -2786,7 +2775,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
   });
 
-  // @gate experimental
   // @gate enableCache
   it('do not show placeholder when updating an avoided boundary with startTransition', async () => {
     function App({page}) {
@@ -2810,7 +2798,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
 
     // Start transition.
-    React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));
+    React.startTransition(() => ReactNoop.render(<App page="B" />));
 
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
 
@@ -2831,7 +2819,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
-  // @gate experimental
   // @gate enableCache
   it('do not show placeholder when mounting an avoided boundary with startTransition', async () => {
     function App({page}) {
@@ -2857,7 +2844,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
 
     // Start transition.
-    React.unstable_startTransition(() => ReactNoop.render(<App page="B" />));
+    React.startTransition(() => ReactNoop.render(<App page="B" />));
 
     expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
 
@@ -2913,7 +2900,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // Update. Since showing a fallback would hide content that's already
       // visible, it should suspend for a JND without committing.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App text="First update" />);
         });
       } else {
@@ -2926,7 +2913,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Update again. This should also suspend for a JND.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App text="Second update" />);
         });
       } else {
@@ -2992,7 +2979,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(root).toMatchRenderedOutput(<span prop="Foo" />);
   });
 
-  // @gate experimental
   // @gate enableCache
   it('should not render hidden content while suspended on higher pri', async () => {
     function Offscreen() {
@@ -3021,7 +3007,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
 
     // Start transition.
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       ReactNoop.render(<App showContent={true} />);
     });
 
@@ -3043,7 +3029,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
-  // @gate experimental
   // @gate enableCache
   it('should be able to unblock higher pri content before suspended hidden', async () => {
     function Offscreen() {
@@ -3074,7 +3059,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);
 
     // Start transition.
-    React.unstable_startTransition(() => {
+    React.startTransition(() => {
       ReactNoop.render(<App showContent={true} />);
     });
 
@@ -3272,7 +3257,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // update even though the primary tree is suspended.
       await ReactNoop.act(async () => {
         setAppText('C');
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           setFallbackText('Still loading...');
         });
       });
@@ -3705,11 +3690,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
-  // @gate experimental
   // @gate enableCache
   // @gate !enableSyncDefaultUpdates
   it('regression: ping at high priority causes update to be dropped', async () => {
-    const {useState, unstable_useTransition: useTransition} = React;
+    const {useState, useTransition} = React;
 
     let setTextA;
     function A() {
@@ -3818,15 +3802,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // Regression: https://github.com/facebook/react/issues/18486
-  // @gate experimental
   // @gate enableCache
   it('does not get stuck in pending state with render phase updates', async () => {
     let setTextWithShortTransition;
     let setTextWithLongTransition;
 
     function App() {
-      const [isPending1, startShortTransition] = React.unstable_useTransition();
-      const [isPending2, startLongTransition] = React.unstable_useTransition();
+      const [isPending1, startShortTransition] = React.useTransition();
+      const [isPending2, startLongTransition] = React.useTransition();
       const isPending = isPending1 || isPending2;
       const [text, setText] = React.useState('');
       const [mirror, setMirror] = React.useState('');
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index 71c40cefebe8..cc6d0d00fc6e 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -32,9 +32,9 @@ describe('ReactTransition', () => {
     Scheduler = require('scheduler');
     useState = React.useState;
     useLayoutEffect = React.useLayoutEffect;
-    useTransition = React.unstable_useTransition;
+    useTransition = React.useTransition;
     Suspense = React.Suspense;
-    startTransition = React.unstable_startTransition;
+    startTransition = React.startTransition;
     getCacheForType = React.unstable_getCacheForType;
     act = ReactNoop.act;
 
@@ -158,7 +158,6 @@ describe('ReactTransition', () => {
     }
   }
 
-  // @gate experimental
   // @gate enableCache
   test('isPending works even if called from outside an input event', async () => {
     let start;
@@ -200,7 +199,6 @@ describe('ReactTransition', () => {
     expect(root).toMatchRenderedOutput('Async');
   });
 
-  // @gate experimental
   // @gate enableCache
   test(
     'when multiple transitions update the same queue, only the most recent ' +
@@ -320,7 +318,6 @@ describe('ReactTransition', () => {
   );
 
   // Same as previous test, but for class update queue.
-  // @gate experimental
   // @gate enableCache
   test(
     'when multiple transitions update the same queue, only the most recent ' +
@@ -445,7 +442,6 @@ describe('ReactTransition', () => {
     },
   );
 
-  // @gate experimental
   // @gate enableCache
   test(
     'when multiple transitions update overlapping queues, all the transitions ' +
@@ -551,7 +547,6 @@ describe('ReactTransition', () => {
     },
   );
 
-  // @gate experimental
   // @gate enableCache
   test('interrupt a refresh transition if a new transition is scheduled', async () => {
     const root = ReactNoop.createRoot();
@@ -607,7 +602,6 @@ describe('ReactTransition', () => {
     expect(root).toMatchRenderedOutput('Updated');
   });
 
-  // @gate experimental
   // @gate enableCache
   test(
     "interrupt a refresh transition when something suspends and we've " +
@@ -669,7 +663,7 @@ describe('ReactTransition', () => {
         expect(Scheduler).toFlushAndYieldThrough(['A']);
 
         // Now schedule a second transition. We won't interrupt the first one.
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           setShouldHideInParent(true);
         });
         // Continue rendering the first transition.
@@ -710,7 +704,6 @@ describe('ReactTransition', () => {
     },
   );
 
-  // @gate experimental
   // @gate enableCache
   test(
     'interrupt a refresh transition when something suspends and a parent ' +
@@ -776,8 +769,6 @@ describe('ReactTransition', () => {
     },
   );
 
-  // @gate experimental
-  // @gate enableCache
   it('should render normal pri updates scheduled after transitions before transitions', async () => {
     let updateTransitionPri;
     let updateNormalPri;
@@ -833,7 +824,6 @@ describe('ReactTransition', () => {
     expect(root).toMatchRenderedOutput('Transition pri: 1, Normal pri: 1');
   });
 
-  // @gate experimental
   // @gate enableCache
   it('should render normal pri updates before transition suspense retries', async () => {
     let updateTransitionPri;
@@ -898,8 +888,6 @@ describe('ReactTransition', () => {
     expect(root).toMatchRenderedOutput('Async, Normal pri: 1');
   });
 
-  // @gate experimental
-  // @gate enableCache
   it('should not interrupt transitions with normal pri updates', async () => {
     let updateNormalPri;
     let updateTransitionPri;
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
index 116cc4c4d8e0..918dd9798336 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
@@ -15,7 +15,7 @@ describe('ReactUpdatePriority', () => {
     Scheduler = require('scheduler');
     ContinuousEventPriority = require('react-reconciler/constants')
       .ContinuousEventPriority;
-    startTransition = React.unstable_startTransition;
+    startTransition = React.startTransition;
     useState = React.useState;
     useEffect = React.useEffect;
   });
@@ -84,7 +84,6 @@ describe('ReactUpdatePriority', () => {
     expect(Scheduler).toHaveYielded(['Idle: 2, Default: 2']);
   });
 
-  // @gate experimental
   test('continuous updates should interrupt transisions', async () => {
     const root = ReactNoop.createRoot();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index 248223e34946..181b243c5cf6 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -153,7 +153,6 @@ describe('updaters', () => {
     expect(allSchedulerTypes).toEqual([[null], [SchedulingComponent]]);
   });
 
-  // @gate experimental
   it('should cover cascading updates', async () => {
     let triggerActiveCascade = null;
     let triggerPassiveCascade = null;
@@ -183,7 +182,7 @@ describe('updaters', () => {
       return count;
     };
 
-    const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+    const root = ReactDOM.createRoot(document.createElement('div'));
     await ReactTestUtils.act(async () => {
       root.render(<Parent />);
       expect(Scheduler).toFlushAndYieldThrough([
@@ -292,7 +291,6 @@ describe('updaters', () => {
     done();
   });
 
-  // @gate experimental
   it('should cover error handling', async () => {
     let triggerError = null;
 
@@ -329,7 +327,7 @@ describe('updaters', () => {
       throw new Error('Hello');
     };
 
-    const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+    const root = ReactDOM.createRoot(document.createElement('div'));
     await ReactTestUtils.act(async () => {
       root.render(<Parent shouldError={false} />);
     });
@@ -349,7 +347,6 @@ describe('updaters', () => {
     Scheduler.unstable_flushAll();
   });
 
-  // @gate experimental
   it('should distinguish between updaters in the case of interleaved work', async () => {
     const {
       FunctionComponent,
@@ -368,7 +365,7 @@ describe('updaters', () => {
     const LowPriorityUpdater = () => {
       const [count, setCount] = React.useState(0);
       triggerLowPriorityUpdate = () => {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           setCount(prevCount => prevCount + 1);
         });
       };
@@ -380,7 +377,7 @@ describe('updaters', () => {
       return null;
     };
 
-    const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+    const root = ReactDOM.createRoot(document.createElement('div'));
     root.render(
       <React.Fragment>
         <SyncPriorityUpdater />
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 4240b363330c..77e7726a18a1 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -149,7 +149,6 @@ describe('SchedulingProfiler', () => {
   });
 
   // @gate enableSchedulingProfiler
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should mark render yields', async () => {
     function Bar() {
       Scheduler.unstable_yieldValue('Bar');
@@ -162,7 +161,7 @@ describe('SchedulingProfiler', () => {
     }
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactNoop.render(<Foo />);
       });
 
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index 6474be855b38..226607eaed2e 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -100,7 +100,6 @@ describe('SchedulingProfiler labels', () => {
     );
   });
 
-  // @gate experimental
   // @gate enableSchedulingProfiler
   it('regression test DefaultLane', () => {
     const container = document.createElement('div');
@@ -114,7 +113,6 @@ describe('SchedulingProfiler labels', () => {
     });
   });
 
-  // @gate experimental
   // @gate enableSchedulingProfiler
   // @gate !enableLegacyFBSupport
   it('regression test InputDiscreteLane', () => {
@@ -144,7 +142,6 @@ describe('SchedulingProfiler labels', () => {
     );
   });
 
-  // @gate experimental
   // @gate enableSchedulingProfiler
   it('regression test InputContinuousLane', () => {
     const container = document.createElement('div');
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index 5cc884d57fa5..47f918110555 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -31,8 +31,11 @@ function loadModules() {
   ReactNoop = require('react-noop-renderer');
   Scheduler = require('scheduler');
   act = ReactNoop.act;
-  createMutableSource = React.unstable_createMutableSource;
-  useMutableSource = React.unstable_useMutableSource;
+
+  // Stable entrypoints export with "unstable_" prefix.
+  createMutableSource =
+    React.createMutableSource || React.unstable_createMutableSource;
+  useMutableSource = React.useMutableSource || React.unstable_useMutableSource;
 }
 
 describe('useMutableSource', () => {
@@ -138,7 +141,6 @@ describe('useMutableSource', () => {
 
   beforeEach(loadModules);
 
-  // @gate experimental
   it('should subscribe to a source and schedule updates when it changes', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -206,14 +208,13 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should restart work if a new source is mutated during render', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
 
     act(() => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.render(
             <>
               <Component
@@ -262,7 +263,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should schedule an update if a new source is mutated between render and commit (subscription)', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -302,7 +302,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should unsubscribe and resubscribe if a new source is used', () => {
     const sourceA = createSource('a-one');
     const mutableSourceA = createMutableSource(
@@ -359,7 +358,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should unsubscribe and resubscribe if a new subscribe function is provided', () => {
     const source = createSource('a-one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -424,7 +422,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should re-use previously read snapshot value when reading is unsafe', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -452,7 +449,7 @@ describe('useMutableSource', () => {
       // Changing values should schedule an update with React.
       // Start working on this update but don't finish it.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           source.value = 'two';
         });
       } else {
@@ -487,7 +484,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should read from source on newly mounted subtree if no pending updates are scheduled for source', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -527,7 +523,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should throw and restart render if source and snapshot are unavailable during an update', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -591,7 +586,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should throw and restart render if source and snapshot are unavailable during a sync update', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -655,7 +649,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should only update components whose subscriptions fire', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -694,7 +687,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should detect tearing in part of the store not yet subscribed to', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -722,7 +714,7 @@ describe('useMutableSource', () => {
       // Because the store has not changed yet, there are no pending updates,
       // so it is considered safe to read from when we start this render.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.render(
             <>
               <Component
@@ -787,7 +779,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('does not schedule an update for subscriptions that fire with an unchanged snapshot', () => {
     const MockComponent = jest.fn(Component);
 
@@ -814,7 +805,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should throw and restart if getSnapshot changes between scheduled update and re-render', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -855,7 +845,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should recover from a mutation during yield when other work is scheduled', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -863,7 +852,7 @@ describe('useMutableSource', () => {
     act(() => {
       // Start a render that uses the mutable source.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactNoop.render(
             <>
               <Component
@@ -910,7 +899,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should not throw if the new getSnapshot returns the same snapshot value', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -965,7 +953,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1005,7 +992,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should still schedule an update if an eager selector throws after a mutation', () => {
     const source = createSource({
       friends: [
@@ -1072,7 +1058,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should not warn about updates that fire between unmount and passive unsubscribe', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1109,7 +1094,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should support inline selectors and updates that are processed after selector change', async () => {
     const source = createSource({
       a: 'initial',
@@ -1154,7 +1138,6 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('Another update');
   });
 
-  // @gate experimental
   it('should clear the update queue when getSnapshot changes with pending lower priority updates', async () => {
     const source = createSource({
       a: 'initial',
@@ -1211,7 +1194,6 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('B: Update');
   });
 
-  // @gate experimental
   it('should clear the update queue when source changes with pending lower priority updates', async () => {
     const sourceA = createSource('initial');
     const sourceB = createSource('initial');
@@ -1256,7 +1238,6 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('B: Update');
   });
 
-  // @gate experimental
   it('should always treat reading as potentially unsafe when getSnapshot changes between renders', async () => {
     const source = createSource({
       a: 'foo',
@@ -1346,7 +1327,6 @@ describe('useMutableSource', () => {
     expect(Scheduler).toHaveYielded(['x: bar, y: bar']);
   });
 
-  // @gate experimental
   it('getSnapshot changes and then source is mutated in between paint and passive effect phase', async () => {
     const source = createSource({
       a: 'foo',
@@ -1405,7 +1385,6 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('baz');
   });
 
-  // @gate experimental
   it('getSnapshot changes and then source is mutated in between paint and passive effect phase, case 2', async () => {
     const source = createSource({
       a: 'a0',
@@ -1476,7 +1455,6 @@ describe('useMutableSource', () => {
     expect(root.getChildrenAsJSX()).toEqual('first: a1, second: a1');
   });
 
-  // @gate experimental
   it(
     'if source is mutated after initial read but before subscription is set ' +
       'up, should still entangle all pending mutations even if snapshot of ' +
@@ -1533,7 +1511,7 @@ describe('useMutableSource', () => {
 
       await act(async () => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             root.render(
               <>
                 <Read getSnapshot={getSnapshotA} />
@@ -1563,7 +1541,7 @@ describe('useMutableSource', () => {
         // read during render will happen to match the latest value. But it should
         // still entangle the updates to prevent the previous update (a1) from
         // rendering by itself.
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           mutateA('a0');
           mutateB('b0');
         });
@@ -1581,7 +1559,6 @@ describe('useMutableSource', () => {
     },
   );
 
-  // @gate experimental
   it('warns about functions being used as snapshot values', async () => {
     const source = createSource(() => 'a');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1609,7 +1586,6 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('a');
   });
 
-  // @gate experimental
   it('getSnapshot changes and then source is mutated during interleaved event', async () => {
     const {useEffect} = React;
 
@@ -1680,7 +1656,7 @@ describe('useMutableSource', () => {
     await act(async () => {
       // Switch the parent and the child to read using the same config
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           root.render(<App parentConfig={configB} childConfig={configB} />);
         });
       } else {
@@ -1692,7 +1668,7 @@ describe('useMutableSource', () => {
       // Mutate the config. This is at lower priority so that 1) to make sure
       // it doesn't happen to get batched with the in-progress render, and 2)
       // so it doesn't interrupt the in-progress render.
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         source.valueB = '3';
       });
 
@@ -1734,7 +1710,6 @@ describe('useMutableSource', () => {
     });
   });
 
-  // @gate experimental
   it('should not tear with newly mounted component when updates were scheduled at a lower priority', async () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1802,7 +1777,7 @@ describe('useMutableSource', () => {
       expect(source.listenerCount).toBe(1);
 
       // Mutate -> schedule update for ComponentA
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         source.value = 'two';
       });
 
@@ -1815,7 +1790,6 @@ describe('useMutableSource', () => {
   if (__DEV__) {
     // See https://github.com/facebook/react/issues/19948
     describe('side effecte detection', () => {
-      // @gate experimental
       it('should throw if a mutable source is mutated during render', () => {
         const source = createSource(0);
         const mutableSource = createMutableSource(
@@ -1860,7 +1834,6 @@ describe('useMutableSource', () => {
         ]);
       });
 
-      // @gate experimental
       it('should throw if a mutable source is mutated during render (legacy mode)', () => {
         const source = createSource('initial');
         const mutableSource = createMutableSource(
@@ -1899,7 +1872,6 @@ describe('useMutableSource', () => {
         expect(Scheduler).toHaveYielded(['MutateDuringRead:initial']);
       });
 
-      // @gate experimental
       it('should not misidentify mutations after render as side effects', async () => {
         const source = createSource('initial');
         const mutableSource = createMutableSource(
@@ -1934,7 +1906,6 @@ describe('useMutableSource', () => {
     });
 
     describe('dev warnings', () => {
-      // @gate experimental
       it('should warn if the subscribe function does not return an unsubscribe function', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
@@ -1960,7 +1931,6 @@ describe('useMutableSource', () => {
         );
       });
 
-      // @gate experimental
       it('should error if multiple renderers of the same type use a mutable source at the same time', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
@@ -1971,7 +1941,7 @@ describe('useMutableSource', () => {
         act(() => {
           // Start a render that uses the mutable source.
           if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
+            React.startTransition(() => {
               ReactNoop.render(
                 <>
                   <Component
@@ -2041,7 +2011,6 @@ describe('useMutableSource', () => {
         });
       });
 
-      // @gate experimental
       it('should error if multiple renderers of the same type use a mutable source at the same time with mutation between', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
@@ -2052,7 +2021,7 @@ describe('useMutableSource', () => {
         act(() => {
           // Start a render that uses the mutable source.
           if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.unstable_startTransition(() => {
+            React.startTransition(() => {
               ReactNoop.render(
                 <>
                   <Component
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index c26ab9deba11..671a813f37ad 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -27,8 +27,12 @@ describe('useMutableSourceHydration', () => {
     Scheduler = require('scheduler');
 
     act = require('react-dom/test-utils').unstable_concurrentAct;
-    createMutableSource = React.unstable_createMutableSource;
-    useMutableSource = React.unstable_useMutableSource;
+
+    // Stable entrypoints export with "unstable_" prefix.
+    createMutableSource =
+      React.createMutableSource || React.unstable_createMutableSource;
+    useMutableSource =
+      React.useMutableSource || React.unstable_useMutableSource;
   });
 
   function dispatchAndSetCurrentEvent(el, event) {
@@ -140,7 +144,6 @@ describe('useMutableSourceHydration', () => {
     return <div>{`${label}:${snapshot}`}</div>;
   }
 
-  // @gate experimental
   it('should render and hydrate', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -164,7 +167,7 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.unstable_createRoot(container, {
+    const root = ReactDOM.createRoot(container, {
       hydrate: true,
       hydrationOptions: {
         mutableSources: [mutableSource],
@@ -177,7 +180,6 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(1);
   });
 
-  // @gate experimental
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -201,7 +203,7 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.unstable_createRoot(container, {
+    const root = ReactDOM.createRoot(container, {
       hydrate: true,
       hydrationOptions: {
         mutableSources: [mutableSource],
@@ -222,7 +224,6 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(1);
   });
 
-  // @gate experimental
   it('should detect a tear between hydrating components', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -254,7 +255,7 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['a:one', 'b:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.unstable_createRoot(container, {
+    const root = ReactDOM.createRoot(container, {
       hydrate: true,
       hydrationOptions: {
         mutableSources: [mutableSource],
@@ -263,7 +264,7 @@ describe('useMutableSourceHydration', () => {
     expect(() => {
       act(() => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             root.render(<TestComponent />);
           });
         } else {
@@ -281,7 +282,6 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(2);
   });
 
-  // @gate experimental
   it('should detect a tear between hydrating components reading from different parts of a source', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -314,7 +314,7 @@ describe('useMutableSourceHydration', () => {
     container.innerHTML = htmlString;
     expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);
 
-    const root = ReactDOM.unstable_createRoot(container, {
+    const root = ReactDOM.createRoot(container, {
       hydrate: true,
       hydrationOptions: {
         mutableSources: [mutableSource],
@@ -323,7 +323,7 @@ describe('useMutableSourceHydration', () => {
     expect(() => {
       act(() => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             root.render(
               <>
                 <Component
@@ -370,7 +370,6 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['0:a:one', '1:b:two']);
   });
 
-  // @gate experimental
   // @gate !enableSyncDefaultUpdates
   it('should detect a tear during a higher priority interruption', () => {
     const source = createSource('one');
@@ -405,7 +404,7 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded([1, 'a:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.unstable_createRoot(container, {
+    const root = ReactDOM.createRoot(container, {
       hydrate: true,
       hydrationOptions: {
         mutableSources: [mutableSource],
@@ -415,7 +414,7 @@ describe('useMutableSourceHydration', () => {
     expect(() => {
       act(() => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.unstable_startTransition(() => {
+          React.startTransition(() => {
             root.render(<TestComponent flag={1} />);
           });
         } else {
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 1f83a84d83dc..8a26c85395f3 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -2437,7 +2437,7 @@ describe('ReactFresh', () => {
         };
       });
 
-      const root = ReactDOM.unstable_createRoot(container);
+      const root = ReactDOM.createRoot(container);
       root.render(<AppV1 offscreen={true} />);
       expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
       const el = container.firstChild;
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index e63a357b31da..64a3d7645f17 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -72,7 +72,6 @@ describe('ReactFlightDOMRelay', () => {
     });
   });
 
-  // @gate experimental
   it('can render a client component using a module reference and render there', () => {
     function UserClient(props) {
       return (
@@ -105,7 +104,6 @@ describe('ReactFlightDOMRelay', () => {
     expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
   });
 
-  // @gate experimental
   it('can reasonably handle different element types', () => {
     const {
       forwardRef,
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index a768b0cf0bb6..020c06a1fef3 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -128,7 +128,6 @@ describe('ReactFlightDOM', () => {
     });
   });
 
-  // @gate experimental
   it('should resolve the root', async () => {
     const {Suspense} = React;
 
@@ -171,7 +170,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -180,7 +179,6 @@ describe('ReactFlightDOM', () => {
     );
   });
 
-  // @gate experimental
   it('should not get confused by $', async () => {
     const {Suspense} = React;
 
@@ -210,14 +208,13 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
     expect(container.innerHTML).toBe('<p>$1</p>');
   });
 
-  // @gate experimental
   it('should not get confused by @', async () => {
     const {Suspense} = React;
 
@@ -247,14 +244,13 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
     expect(container.innerHTML).toBe('<p>@div</p>');
   });
 
-  // @gate experimental
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
     const {Suspense} = React;
@@ -383,7 +379,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     await act(async () => {
       root.render(
         <Suspense fallback={<p>(loading)</p>}>
@@ -454,7 +450,6 @@ describe('ReactFlightDOM', () => {
     expect(reportedErrors).toEqual([]);
   });
 
-  // @gate experimental
   it('should preserve state of client components on refetch', async () => {
     const {Suspense} = React;
 
@@ -483,7 +478,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
 
     const stream1 = getTestStream();
     ReactServerDOMWriter.pipeToNodeWritable(
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
index 1a4554573afd..361c80e7a8b3 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAsync-test.js
@@ -73,7 +73,6 @@ describe('ReactTestRendererAsync', () => {
     expect(renderer.toJSON()).toEqual(['A:2', 'B:2', 'C:2']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('flushThrough flushes until the expected values is yielded', () => {
     function Child(props) {
       Scheduler.unstable_yieldValue(props.children);
@@ -91,7 +90,7 @@ describe('ReactTestRendererAsync', () => {
 
     let renderer;
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         renderer = ReactTestRenderer.create(<Parent step={1} />, {
           unstable_isConcurrent: true,
         });
@@ -112,7 +111,6 @@ describe('ReactTestRendererAsync', () => {
     expect(renderer.toJSON()).toEqual(['A:1', 'B:1', 'C:1']);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('supports high priority interruptions', () => {
     function Child(props) {
       Scheduler.unstable_yieldValue(props.children);
@@ -138,7 +136,7 @@ describe('ReactTestRendererAsync', () => {
 
     let renderer;
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         renderer = ReactTestRenderer.create(<Example step={1} />, {
           unstable_isConcurrent: true,
         });
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 366e86626fd1..43ae345b1eb2 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -8,55 +8,52 @@
  */
 
 export {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   Children,
-  createRef,
   Component,
+  Fragment,
+  Profiler,
   PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  SuspenseList as unstable_SuspenseList, // TODO: Remove once call sights updated to SuspenseList
+  cloneElement,
   createContext,
+  createElement,
+  createFactory,
+  createMutableSource,
+  createMutableSource as unstable_createMutableSource,
+  createRef,
   forwardRef,
+  isValidElement,
   lazy,
   memo,
+  startTransition,
+  startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
+  unstable_Cache,
+  unstable_DebugTracingMode,
+  unstable_LegacyHidden,
+  unstable_Scope,
+  unstable_getCacheForType,
+  unstable_useCacheRefresh,
+  unstable_useOpaqueIdentifier,
   useCallback,
   useContext,
+  useDebugValue,
+  useDeferredValue,
+  useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
   useImperativeHandle,
-  useDebugValue,
   useLayoutEffect,
   useMemo,
+  useMutableSource,
+  useMutableSource as unstable_useMutableSource,
   useReducer,
   useRef,
   useState,
-  useMutableSource,
-  useMutableSource as unstable_useMutableSource,
-  createMutableSource,
-  createMutableSource as unstable_createMutableSource,
-  Fragment,
-  Profiler,
-  StrictMode,
-  Suspense,
-  unstable_LegacyHidden,
-  createElement,
-  cloneElement,
-  isValidElement,
-  version,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  createFactory,
-  // exposeConcurrentModeAPIs
   useTransition,
-  useTransition as unstable_useTransition,
-  useDeferredValue,
-  useDeferredValue as unstable_useDeferredValue,
-  startTransition,
-  startTransition as unstable_startTransition,
-  SuspenseList,
-  SuspenseList as unstable_SuspenseList,
-  unstable_getCacheForType,
-  unstable_Cache,
-  unstable_useCacheRefresh,
-  // enableScopeAPI
-  unstable_Scope,
-  unstable_useOpaqueIdentifier,
-  // enableDebugTracing
-  unstable_DebugTracingMode,
+  useTransition as unstable_useTransition, // TODO: Remove once call sights updated to useTransition
+  version,
 } from './src/React';
 export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index ba0d205f8129..4fbc1664ab49 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -8,46 +8,44 @@
  */
 
 export {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   Children,
-  createRef,
   Component,
+  Fragment,
+  Profiler,
   PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  cloneElement,
   createContext,
+  createElement,
+  createFactory,
+  createMutableSource as unstable_createMutableSource,
+  createRef,
   forwardRef,
+  isValidElement,
   lazy,
   memo,
+  startTransition,
+  unstable_Cache,
+  unstable_DebugTracingMode,
+  unstable_LegacyHidden,
+  unstable_getCacheForType,
+  unstable_useCacheRefresh,
+  unstable_useOpaqueIdentifier,
   useCallback,
   useContext,
+  useDebugValue,
+  useDeferredValue,
   useEffect,
   useImperativeHandle,
-  useDebugValue,
   useLayoutEffect,
   useMemo,
+  useMutableSource as unstable_useMutableSource,
   useReducer,
   useRef,
   useState,
-  useMutableSource as unstable_useMutableSource,
-  createMutableSource as unstable_createMutableSource,
-  Fragment,
-  Profiler,
-  StrictMode,
-  Suspense,
-  unstable_LegacyHidden,
-  createElement,
-  cloneElement,
-  isValidElement,
+  useTransition,
   version,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  createFactory,
-  // exposeConcurrentModeAPIs
-  useTransition as unstable_useTransition,
-  useDeferredValue as unstable_useDeferredValue,
-  startTransition as unstable_startTransition,
-  SuspenseList as unstable_SuspenseList,
-  unstable_useOpaqueIdentifier,
-  unstable_getCacheForType,
-  unstable_Cache,
-  unstable_useCacheRefresh,
-  // enableDebugTracing
-  unstable_DebugTracingMode,
 } from './src/React';
diff --git a/packages/react/index.js b/packages/react/index.js
index 094d0fcd2379..bc77959248f0 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -32,51 +32,45 @@ 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 {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   Children,
-  createRef,
   Component,
+  Fragment,
+  Profiler,
   PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  cloneElement,
   createContext,
+  createElement,
+  createFactory,
+  createMutableSource,
+  createRef,
   forwardRef,
+  isValidElement,
   lazy,
   memo,
+  startTransition,
+  unstable_Cache,
+  unstable_DebugTracingMode,
+  unstable_LegacyHidden,
+  unstable_Scope,
+  unstable_getCacheForType,
+  unstable_useCacheRefresh,
+  unstable_useOpaqueIdentifier,
   useCallback,
   useContext,
+  useDebugValue,
+  useDeferredValue,
   useEffect,
   useImperativeHandle,
-  useDebugValue,
   useLayoutEffect,
   useMemo,
+  useMutableSource,
   useReducer,
   useRef,
   useState,
-  useMutableSource,
-  useMutableSource as unstable_useMutableSource,
-  createMutableSource,
-  createMutableSource as unstable_createMutableSource,
-  Fragment,
-  Profiler,
-  unstable_DebugTracingMode,
-  StrictMode,
-  Suspense,
-  createElement,
-  cloneElement,
-  isValidElement,
-  version,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  createFactory,
   useTransition,
-  useTransition as unstable_useTransition,
-  startTransition,
-  startTransition as unstable_startTransition,
-  useDeferredValue,
-  useDeferredValue as unstable_useDeferredValue,
-  SuspenseList,
-  SuspenseList as unstable_SuspenseList,
-  unstable_LegacyHidden,
-  unstable_Scope,
-  unstable_useOpaqueIdentifier,
-  unstable_getCacheForType,
-  unstable_Cache,
-  unstable_useCacheRefresh,
+  version,
 } from './src/React';
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index cf459c0bfb44..64073b0b8949 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -8,54 +8,51 @@
  */
 
 export {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   Children,
-  createRef,
   Component,
+  Fragment,
+  Profiler,
   PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  SuspenseList as unstable_SuspenseList, // TODO: Remove once call sights updated to SuspenseList
+  cloneElement,
   createContext,
+  createElement,
+  createMutableSource,
+  createMutableSource as unstable_createMutableSource,
+  createRef,
   forwardRef,
+  isValidElement,
   lazy,
   memo,
+  startTransition,
+  startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
+  unstable_Cache,
+  unstable_DebugTracingMode,
+  unstable_LegacyHidden,
+  unstable_Scope,
+  unstable_getCacheForType,
+  unstable_useCacheRefresh,
+  unstable_useOpaqueIdentifier,
   useCallback,
   useContext,
+  useDebugValue,
+  useDeferredValue,
+  useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
   useImperativeHandle,
-  useDebugValue,
   useLayoutEffect,
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
-  createMutableSource,
-  createMutableSource as unstable_createMutableSource,
   useReducer,
   useRef,
   useState,
-  Fragment,
-  Profiler,
-  StrictMode,
-  Suspense,
-  unstable_LegacyHidden,
-  createElement,
-  cloneElement,
-  isValidElement,
-  version,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  // exposeConcurrentModeAPIs
   useTransition,
-  useTransition as unstable_useTransition,
-  useDeferredValue,
-  useDeferredValue as unstable_useDeferredValue,
-  startTransition,
-  startTransition as unstable_startTransition,
-  SuspenseList,
-  SuspenseList as unstable_SuspenseList,
-  unstable_getCacheForType,
-  unstable_Cache,
-  unstable_useCacheRefresh,
-  // enableScopeAPI
-  unstable_Scope,
-  unstable_useOpaqueIdentifier,
-  // enableDebugTracing
-  unstable_DebugTracingMode,
+  useTransition as unstable_useTransition, // TODO: Remove once call sights updated to useTransition
+  version,
 } from './src/React';
 export {jsx, jsxs, jsxDEV} from './src/jsx/ReactJSX';
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 67a221ca674b..33e1b37693bd 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -8,32 +8,39 @@
  */
 
 export {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   Children,
-  createRef,
   Component,
+  Fragment,
+  Profiler,
   PureComponent,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  cloneElement,
   createContext,
+  createElement,
+  createFactory,
+  createMutableSource as unstable_createMutableSource,
+  createRef,
   forwardRef,
+  isValidElement,
   lazy,
   memo,
+  startTransition,
+  unstable_useOpaqueIdentifier,
   useCallback,
   useContext,
+  useDebugValue,
+  useDeferredValue,
   useEffect,
   useImperativeHandle,
-  useDebugValue,
   useLayoutEffect,
   useMemo,
+  useMutableSource as unstable_useMutableSource,
   useReducer,
   useRef,
   useState,
-  Fragment,
-  Profiler,
-  StrictMode,
-  Suspense,
-  createElement,
-  cloneElement,
-  isValidElement,
+  useTransition,
   version,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  createFactory,
 } from './src/React';
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index bac44d736e35..270c204f9cfa 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -186,7 +186,6 @@ describe(`onRender`, () => {
     expect(callback).toHaveBeenCalledTimes(2);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('is not invoked until the commit phase', () => {
     const callback = jest.fn();
 
@@ -196,7 +195,7 @@ describe(`onRender`, () => {
     };
 
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         ReactTestRenderer.create(
           <React.Profiler id="test" onRender={callback}>
             <Yield value="first" />
@@ -690,7 +689,6 @@ describe(`onRender`, () => {
     expect(onRender.mock.calls[2][1]).toBe('update');
   });
 
-  // @gate experimental
   it('is properly distinguish updates and nested-updates when there is more than sync remaining work', () => {
     loadModules({
       useNoopRenderer: true,
@@ -709,7 +707,7 @@ describe(`onRender`, () => {
     const onRender = jest.fn();
 
     // Schedule low-priority work.
-    React.unstable_startTransition(() =>
+    React.startTransition(() =>
       ReactNoop.render(
         <React.Profiler id="root" onRender={onRender}>
           <Component />
@@ -734,7 +732,6 @@ describe(`onRender`, () => {
   });
 
   describe('with regard to interruptions', () => {
-    // @gate experimental || !enableSyncDefaultUpdates
     it('should accumulate actual time after a scheduling interruptions', () => {
       const callback = jest.fn();
 
@@ -748,7 +745,7 @@ describe(`onRender`, () => {
 
       // Render partially, but run out of time before completing.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactTestRenderer.create(
             <React.Profiler id="test" onRender={callback}>
               <Yield renderTime={2} />
@@ -781,7 +778,6 @@ describe(`onRender`, () => {
       expect(call[5]).toBe(10); // commit time
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('should not include time between frames', () => {
       const callback = jest.fn();
 
@@ -796,7 +792,7 @@ describe(`onRender`, () => {
       // Render partially, but don't finish.
       // This partial render should take 5ms of simulated time.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           ReactTestRenderer.create(
             <React.Profiler id="outer" onRender={callback}>
               <Yield renderTime={5} />
@@ -847,7 +843,6 @@ describe(`onRender`, () => {
       expect(outerCall[5]).toBe(87); // commit time
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('should report the expected times when a high-pri update replaces a mount in-progress', () => {
       const callback = jest.fn();
 
@@ -863,7 +858,7 @@ describe(`onRender`, () => {
       // This partial render should take 10ms of simulated time.
       let renderer;
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           renderer = ReactTestRenderer.create(
             <React.Profiler id="test" onRender={callback}>
               <Yield renderTime={10} />
@@ -914,7 +909,6 @@ describe(`onRender`, () => {
       expect(callback).toHaveBeenCalledTimes(0);
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('should report the expected times when a high-priority update replaces a low-priority update', () => {
       const callback = jest.fn();
 
@@ -951,7 +945,7 @@ describe(`onRender`, () => {
       // Render a partially update, but don't finish.
       // This partial render should take 3ms of simulated time.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           renderer.update(
             <React.Profiler id="test" onRender={callback}>
               <Yield renderTime={3} />
@@ -1008,7 +1002,6 @@ describe(`onRender`, () => {
       expect(callback).toHaveBeenCalledTimes(1);
     });
 
-    // @gate experimental || !enableSyncDefaultUpdates
     it('should report the expected times when a high-priority update interrupts a low-priority update', () => {
       const callback = jest.fn();
 
@@ -1076,7 +1069,7 @@ describe(`onRender`, () => {
       // Render a partially update, but don't finish.
       // This partial render will take 10ms of actual render time.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           first.setState({renderTime: 10});
         });
       } else {
diff --git a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
index d1b5bd9b44a9..b6eec5238446 100644
--- a/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfilerDevToolsIntegration-test.internal.js
@@ -138,7 +138,6 @@ describe('ReactProfiler DevTools integration', () => {
     ).toBe(7);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('regression test: #17159', () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -157,7 +156,7 @@ describe('ReactProfiler DevTools integration', () => {
     Scheduler.unstable_advanceTime(10000);
     // Schedule an update.
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.unstable_startTransition(() => {
+      React.startTransition(() => {
         root.update(<Text text="B" />);
       });
     } else {
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index b1fb0bcc270a..62d63f48cd0d 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -49,7 +49,6 @@ describe('ReactStrictMode', () => {
       return null;
     }
 
-    // @gate experimental
     it('should default to not strict', () => {
       act(() => {
         const container = document.createElement('div');
@@ -65,7 +64,6 @@ describe('ReactStrictMode', () => {
     });
 
     if (__DEV__) {
-      // @gate experimental
       it('should support enabling strict mode via createRoot option', () => {
         act(() => {
           const container = document.createElement('div');
@@ -87,7 +85,6 @@ describe('ReactStrictMode', () => {
         ]);
       });
 
-      // @gate experimental
       it('should include legacy + strict effects mode', () => {
         act(() => {
           const container = document.createElement('div');
@@ -111,7 +108,6 @@ describe('ReactStrictMode', () => {
         ]);
       });
 
-      // @gate experimental
       it('should allow level to be increased with nesting', () => {
         act(() => {
           const container = document.createElement('div');
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index c6d1f7ee72e6..a41f2ef2ccc7 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -362,7 +362,6 @@ describe('Concurrent Mode', () => {
     Scheduler = require('scheduler');
   });
 
-  // @gate experimental
   it('should warn about unsafe legacy lifecycle methods anywhere in a StrictMode tree', () => {
     function StrictRoot() {
       return (
@@ -405,7 +404,7 @@ describe('Concurrent Mode', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<StrictRoot />);
     expect(() => Scheduler.unstable_flushAll()).toErrorDev(
       [
@@ -436,7 +435,6 @@ Please update the following components: App`,
     Scheduler.unstable_flushAll();
   });
 
-  // @gate experimental
   it('should coalesce warnings by lifecycle name', () => {
     function StrictRoot() {
       return (
@@ -468,7 +466,7 @@ Please update the following components: App`,
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<StrictRoot />);
 
     expect(() => {
@@ -526,7 +524,6 @@ Please update the following components: Parent`,
     Scheduler.unstable_flushAll();
   });
 
-  // @gate experimental
   it('should warn about components not present during the initial render', () => {
     function StrictRoot({foo}) {
       return <React.StrictMode>{foo ? <Foo /> : <Bar />}</React.StrictMode>;
@@ -545,7 +542,7 @@ Please update the following components: Parent`,
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.unstable_createRoot(container);
+    const root = ReactDOM.createRoot(container);
     root.render(<StrictRoot foo={true} />);
     expect(() =>
       Scheduler.unstable_flushAll(),
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index 890066957e38..9381778b4435 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -8,31 +8,32 @@
  */
 
 export {
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   Children,
+  Fragment,
+  Profiler,
+  StrictMode,
+  Suspense,
+  SuspenseList,
+  cloneElement,
+  createElement,
+  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
+  isValidElement,
   lazy,
   memo,
+  startTransition,
+  unstable_DebugTracingMode,
+  unstable_getCacheForType,
+  unstable_useOpaqueIdentifier,
   useCallback,
   useContext,
   useDebugValue,
+  useDeferredValue,
+  useDeferredValue as unstable_useDeferredValue,
   useMemo,
   useMutableSource as unstable_useMutableSource,
-  createMutableSource as unstable_createMutableSource,
-  Fragment,
-  Profiler,
-  StrictMode,
-  Suspense,
-  createElement,
-  cloneElement,
-  isValidElement,
+  useTransition,
   version,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
-  // exposeConcurrentModeAPIs
-  useDeferredValue as unstable_useDeferredValue,
-  SuspenseList as unstable_SuspenseList,
-  unstable_useOpaqueIdentifier,
-  unstable_getCacheForType,
-  // enableDebugTracing
-  unstable_DebugTracingMode,
 } from './src/React';
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index ede084ff74ac..500d995e69d8 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -55,11 +55,11 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = __PROFILE__;
 
 // SSR experiments
-export const enableSuspenseServerRenderer = __EXPERIMENTAL__;
-export const enableSelectiveHydration = __EXPERIMENTAL__;
+export const enableSuspenseServerRenderer = true;
+export const enableSelectiveHydration = true;
 
 // Flight experiments
-export const enableLazyElements = __EXPERIMENTAL__;
+export const enableLazyElements = true;
 export const enableCache = __EXPERIMENTAL__;
 
 // Only used in www builds.
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index b8c7a56ce720..83f7c3b812e4 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -23,7 +23,7 @@ export const enableSuspenseLayoutEffectSemantics = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
 //
-// NOTE: This feature will only work in DEV mode; all callsights are wrapped with __DEV__.
+// NOTE: This feature will only work in DEV mode; all callsites are wrapped with __DEV__.
 export const enableDebugTracing = __EXPERIMENTAL__;
 export const enableUpdaterTracking = false;
 
diff --git a/packages/use-subscription/src/__tests__/useSubscription-test.js b/packages/use-subscription/src/__tests__/useSubscription-test.js
index cfb082dfd2f6..579076af551f 100644
--- a/packages/use-subscription/src/__tests__/useSubscription-test.js
+++ b/packages/use-subscription/src/__tests__/useSubscription-test.js
@@ -262,7 +262,6 @@ describe('useSubscription', () => {
     expect(subscriptions).toHaveLength(2);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should ignore values emitted by a new subscribable until the commit phase', () => {
     const log = [];
 
@@ -333,7 +332,7 @@ describe('useSubscription', () => {
     // Start React update, but don't finish
     act(() => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           renderer.update(<Parent observed={observableB} />);
         });
       } else {
@@ -370,7 +369,6 @@ describe('useSubscription', () => {
     ]);
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should not drop values emitted between updates', () => {
     const log = [];
 
@@ -442,7 +440,7 @@ describe('useSubscription', () => {
     // Start React update, but don't finish
     act(() => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           renderer.update(<Parent observed={observableB} />);
         });
       } else {
@@ -576,7 +574,6 @@ describe('useSubscription', () => {
     Scheduler.unstable_flushAll();
   });
 
-  // @gate experimental || !enableSyncDefaultUpdates
   it('should not tear if a mutation occurs during a concurrent update', () => {
     const input = document.createElement('input');
 
@@ -625,7 +622,7 @@ describe('useSubscription', () => {
       // This update will not be eagerly evaluated,
       // but useSubscription() should eagerly close over the updated value to avoid tearing.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           mutate('C');
         });
       } else {
@@ -633,7 +630,7 @@ describe('useSubscription', () => {
       }
       expect(Scheduler).toFlushAndYieldThrough(['render:first:C']);
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.unstable_startTransition(() => {
+        React.startTransition(() => {
           mutate('D');
         });
       } else {

From b770f750054f85874bc6d483cc1dc01b4f6f5595 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 12 May 2021 10:14:45 -0700
Subject: [PATCH 0536/1603] lint-build: Infer format from artifact filename
 (#21489)

Uses the layout of the build artifact directory to infer the format
of a given file, and which lint rules to apply.

This has the effect of decoupling the lint build job from the existing
Rollup script, so that if we ever add additional post-processing, or
if we replace Rollup, it will still work.

But the immediate motivation is to replace the separate "stable" and
"experimental" lint-build jobs with a single combined job.
---
 .circleci/config.yml                      |  23 +---
 scripts/circleci/check_minified_errors.sh |   2 +-
 scripts/rollup/validate/index.js          | 150 ++++++++++------------
 3 files changed, 74 insertions(+), 101 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 9bfc78e5d32f..d94cc684e371 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -280,20 +280,6 @@ jobs:
       - run: yarn lint-build
       - run: scripts/circleci/check_minified_errors.sh
 
-  RELEASE_CHANNEL_stable_yarn_lint_build:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          environment:
-            RELEASE_CHANNEL: stable
-          command: yarn lint-build
-      - run: scripts/circleci/check_minified_errors.sh
-
   yarn_test:
     docker: *docker
     environment: *environment
@@ -405,9 +391,6 @@ workflows:
       - RELEASE_CHANNEL_stable_yarn_build:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_lint_build:
-          requires:
-            - RELEASE_CHANNEL_stable_yarn_build
       - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
           requires:
             - RELEASE_CHANNEL_stable_yarn_build
@@ -419,9 +402,6 @@ workflows:
       - yarn_build:
           requires:
             - setup
-      - yarn_lint_build:
-          requires:
-            - yarn_build
       - build_devtools_and_process_artifacts:
           requires:
             - yarn_build
@@ -522,6 +502,9 @@ workflows:
           requires:
             - get_base_build
             - yarn_build_combined
+      - yarn_lint_build:
+          requires:
+            - yarn_build_combined
   fuzz_tests:
     unless: << pipeline.parameters.prerelease_commit_sha >>
     triggers:
diff --git a/scripts/circleci/check_minified_errors.sh b/scripts/circleci/check_minified_errors.sh
index df7673a6ead6..df77ba0193ae 100755
--- a/scripts/circleci/check_minified_errors.sh
+++ b/scripts/circleci/check_minified_errors.sh
@@ -2,7 +2,7 @@
 
 # Ensure errors are minified in production
 
-OUT=$(git --no-pager grep -n --untracked --no-exclude-standard 'FIXME (minify-errors-in-prod)' -- './build/*')
+OUT=$(git --no-pager grep -n --untracked --no-exclude-standard 'FIXME (minify-errors-in-prod)' -- './build2/*')
 
 if [ "$OUT" != "" ]; then
   echo "$OUT";
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
index 4d1c9210e231..70921789d199 100644
--- a/scripts/rollup/validate/index.js
+++ b/scripts/rollup/validate/index.js
@@ -1,59 +1,58 @@
 'use strict';
 
-const path = require('path');
+/* 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');
 
-const {bundles, getFilename, bundleTypes} = require('../bundles');
-const Packaging = require('../packaging');
-
-const {
-  NODE_ES2015,
-  NODE_ESM,
-  UMD_DEV,
-  UMD_PROD,
-  UMD_PROFILING,
-  NODE_DEV,
-  NODE_PROD,
-  NODE_PROFILING,
-  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;
+// Lint the final build artifacts. Helps catch bugs in our build pipeline.
 
-function getFormat(bundleType) {
-  switch (bundleType) {
-    case UMD_DEV:
-    case UMD_PROD:
-    case UMD_PROFILING:
-      return 'umd';
-    case NODE_ES2015:
+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 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';
-    case NODE_ESM:
-      return 'esm';
-    case NODE_DEV:
-    case NODE_PROD:
-    case NODE_PROFILING:
-      return 'cjs';
-    case FB_WWW_DEV:
-    case FB_WWW_PROD:
-    case FB_WWW_PROFILING:
-      return 'fb';
-    case RN_OSS_DEV:
-    case RN_OSS_PROD:
-    case RN_OSS_PROFILING:
-    case RN_FB_DEV:
-    case RN_FB_PROD:
-    case RN_FB_PROFILING:
-      return 'rn';
+    }
+    return 'cjs';
+  }
+  if (filepath.includes('esm')) {
+    return 'esm';
+  }
+  if (filepath.includes('umd')) {
+    return 'umd';
   }
-  throw new Error('unknown bundleType');
+  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) {
@@ -64,35 +63,13 @@ function getESLintInstance(format) {
   });
 }
 
-const esLints = {
-  cjs: getESLintInstance('cjs'),
-  cjs2015: getESLintInstance('cjs2015'),
-  esm: getESLintInstance('esm'),
-  rn: getESLintInstance('rn'),
-  fb: getESLintInstance('fb'),
-  umd: getESLintInstance('umd'),
-};
-
-// Performs sanity checks on bundles *built* by Rollup.
-// Helps catch Rollup regressions.
-async function lint(bundle, bundleType) {
-  const filename = getFilename(bundle, bundleType);
-  const format = getFormat(bundleType);
-  const eslint = esLints[format];
-
-  const packageName = Packaging.getPackageName(bundle.entry);
-  const mainOutputPath = Packaging.getBundleOutputPath(
-    bundleType,
-    filename,
-    packageName
-  );
-
-  const results = await eslint.lintFiles([mainOutputPath]);
+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(`Failed ${mainOutputPath}`);
+    console.log(`Lint failed`);
     const formatter = await eslint.loadFormatter('stylish');
     const resultText = formatter.format(results);
     console.log(resultText);
@@ -100,15 +77,28 @@ async function lint(bundle, bundleType) {
 }
 
 async function lintEverything() {
-  console.log(`Linting known bundles...`);
-  let promises = [];
-  // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-  for (const bundle of bundles) {
-    // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-    for (const bundleType of bundle.bundleTypes) {
-      promises.push(lint(bundle, bundleType));
+  console.log(`Linting build artifacts...`);
+
+  const allFilepaths = await glob('build2/**/*.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);
 }
 

From 46491dce96e6a151706f51494edfd3cb7f09ed7f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 12 May 2021 10:40:17 -0700
Subject: [PATCH 0537/1603] [Bugfix] Prevent already-committed setState
 callback from firing again during a rebase (#21498)

* Failing test: Class callback fired multiple times

Happens during a rebase (low priority update followed by high priority
update). The high priority callback gets fired twice.

* Prevent setState callback firing during rebase

Before enqueueing the effect, adds a guard to check if the update was
already committed.
---
 .../src/ReactUpdateQueue.new.js               |  7 ++-
 .../src/ReactUpdateQueue.old.js               |  7 ++-
 .../ReactClassSetStateCallback-test.js        | 47 +++++++++++++++++++
 3 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js

diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index 0bdcbf580764..06ee95a92c70 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -580,7 +580,12 @@ export function processUpdateQueue<State>(
           instance,
         );
         const callback = update.callback;
-        if (callback !== null) {
+        if (
+          callback !== null &&
+          // If the update was already committed, we should not queue its
+          // callback again.
+          update.lane !== NoLane
+        ) {
           workInProgress.flags |= Callback;
           const effects = queue.effects;
           if (effects === null) {
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 209abfb32e74..520f993fbd81 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -580,7 +580,12 @@ export function processUpdateQueue<State>(
           instance,
         );
         const callback = update.callback;
-        if (callback !== null) {
+        if (
+          callback !== null &&
+          // If the update was already committed, we should not queue its
+          // callback again.
+          update.lane !== NoLane
+        ) {
           workInProgress.flags |= Callback;
           const effects = queue.effects;
           if (effects === null) {
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 000000000000..13d9ce838c03
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js
@@ -0,0 +1,47 @@
+let React;
+let ReactNoop;
+let Scheduler;
+
+describe('ReactClassSetStateCallback', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  test('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 ReactNoop.act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([0]);
+
+    await ReactNoop.act(async () => {
+      app.setState({step: 1}, () =>
+        Scheduler.unstable_yieldValue('Callback 1'),
+      );
+      ReactNoop.flushSync(() => {
+        app.setState({step: 2}, () =>
+          Scheduler.unstable_yieldValue('Callback 2'),
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded([2, 'Callback 2', 2, 'Callback 1']);
+  });
+});

From 5890e0e692d1c39eddde0110bd0d123409f31dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 13 May 2021 13:18:21 -0400
Subject: [PATCH 0538/1603] Remove data-reactroot from server rendering and
 hydration heuristic (#20996)

This was used to implicitly hydrate if you call ReactDOM.render.

We've had a warning to explicitly use ReactDOM.hydrate(...) instead of
ReactDOM.render(...). We can now remove this from the generated markup.
(And avoid adding it to Fizz.)

This is a little strange to do now since we're trying hard to make the
root API work the same.

But if we kept it, we'd need to keep it in the generated output which adds
unnecessary bytes. It also risks people relying on it, in the Fizz world
where as this is an opportunity to create that clean state.

We could possibly only keep it in the old server rendering APIs but then
that creates an implicit dependency between which server API and which
client API that you use. Currently you can really mix and match either way.
---
 .../__tests__/ReactCompositeComponent-test.js |  39 ----
 ...eactLegacyContextDisabled-test.internal.js |   4 +-
 .../src/__tests__/ReactRenderDocument-test.js | 219 ------------------
 .../__tests__/ReactServerRendering-test.js    |  22 +-
 .../ReactServerRenderingHydration-test.js     |  97 +-------
 .../__tests__/escapeTextForBrowser-test.js    |  16 +-
 .../quoteAttributeValueForBrowser-test.js     |  17 +-
 .../ReactDOMServerIntegrationTestUtils.js     |   2 +-
 .../react-dom/src/client/ReactDOMComponent.js |   3 -
 .../react-dom/src/client/ReactDOMLegacy.js    |  42 +---
 .../DOMPluginEventSystem-test.internal.js     |   6 +-
 .../src/server/DOMMarkupOperations.js         |   5 -
 .../src/server/ReactPartialRenderer.js        |  10 -
 packages/react-dom/src/shared/DOMProperty.js  |   1 -
 .../src/__tests__/ReactScope-test.internal.js |   2 +-
 .../ReactHooks-test.internal.js.snap          |   2 +-
 16 files changed, 31 insertions(+), 456 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
index 7006f51b77f5..1c02667d7bc9 100644
--- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
@@ -13,7 +13,6 @@ let ChildUpdates;
 let MorphingComponent;
 let React;
 let ReactDOM;
-let ReactDOMServer;
 let ReactCurrentOwner;
 let ReactTestUtils;
 let PropTypes;
@@ -65,7 +64,6 @@ describe('ReactCompositeComponent', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactDOMServer = require('react-dom/server');
     ReactCurrentOwner = require('react')
       .__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
     ReactTestUtils = require('react-dom/test-utils');
@@ -170,43 +168,6 @@ describe('ReactCompositeComponent', () => {
     expect(el.tagName).toBe('A');
   });
 
-  it('should not thrash a server rendered layout with client side one', () => {
-    class Child extends React.Component {
-      render() {
-        return null;
-      }
-    }
-
-    class Parent extends React.Component {
-      render() {
-        return (
-          <div>
-            <Child />
-          </div>
-        );
-      }
-    }
-
-    const markup = ReactDOMServer.renderToString(<Parent />);
-
-    // Old API based on heuristic
-    let container = document.createElement('div');
-    container.innerHTML = markup;
-    expect(() =>
-      ReactDOM.render(<Parent />, container),
-    ).toWarnDev(
-      'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
-        'will stop working in React v18. Replace the ReactDOM.render() call ' +
-        'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
-      {withoutStack: true},
-    );
-
-    // New explicit API
-    container = document.createElement('div');
-    container.innerHTML = markup;
-    ReactDOM.hydrate(<Parent />, container);
-  });
-
   it('should react to state changes from callbacks', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
diff --git a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
index c6a2d1fbb5aa..f04a4d0ea216 100644
--- a/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactLegacyContextDisabled-test.internal.js
@@ -139,9 +139,7 @@ describe('ReactLegacyContextDisabled', () => {
       'LegacyFnConsumer uses the legacy contextTypes API which is no longer supported. ' +
         'Use React.createContext() with React.useContext() instead.',
     ]);
-    expect(text).toBe(
-      '<span data-reactroot="">{}<!-- -->undefined<!-- -->undefined</span>',
-    );
+    expect(text).toBe('<span>{}<!-- -->undefined<!-- -->undefined</span>');
     expect(lifecycleContextLog).toEqual([{}, {}, {}]);
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
index def1c35bc64e..8003ee06cb8a 100644
--- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -33,225 +33,6 @@ describe('rendering React components at document', () => {
     ReactDOMServer = require('react-dom/server');
   });
 
-  describe('with old implicit hydration API', () => {
-    function expectDeprecationWarningWithFiber(callback) {
-      expect(
-        callback,
-      ).toWarnDev(
-        'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
-          'will stop working in React v18. Replace the ReactDOM.render() call ' +
-          'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
-        {withoutStack: true},
-      );
-    }
-
-    it('should be able to adopt server markup', () => {
-      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" />);
-      const testDocument = getTestDocument(markup);
-      const body = testDocument.body;
-
-      expectDeprecationWarningWithFiber(() =>
-        ReactDOM.render(<Root hello="world" />, testDocument),
-      );
-      expect(testDocument.body.innerHTML).toBe('Hello world');
-
-      ReactDOM.render(<Root hello="moon" />, testDocument);
-      expect(testDocument.body.innerHTML).toBe('Hello moon');
-
-      expect(body === testDocument.body).toBe(true);
-    });
-
-    it('should not be able to unmount component from document node', () => {
-      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);
-      expectDeprecationWarningWithFiber(() =>
-        ReactDOM.render(<Root />, testDocument),
-      );
-      expect(testDocument.body.innerHTML).toBe('Hello world');
-
-      // In Fiber this actually works. It might not be a good idea though.
-      ReactDOM.unmountComponentAtNode(testDocument);
-      expect(testDocument.firstChild).toBe(null);
-    });
-
-    it('should not be able to switch root constructors', () => {
-      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);
-
-      expectDeprecationWarningWithFiber(() =>
-        ReactDOM.render(<Component />, testDocument),
-      );
-      expect(testDocument.body.innerHTML).toBe('Hello world');
-
-      // This works but is probably a bad idea.
-      ReactDOM.render(<Component2 />, testDocument);
-
-      expect(testDocument.body.innerHTML).toBe('Goodbye world');
-    });
-
-    it('should be able to mount into document', () => {
-      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);
-
-      expectDeprecationWarningWithFiber(() =>
-        ReactDOM.render(<Component text="Hello world" />, testDocument),
-      );
-
-      expect(testDocument.body.innerHTML).toBe('Hello world');
-    });
-
-    it('renders over an existing text child without throwing', () => {
-      const container = document.createElement('div');
-      container.textContent = 'potato';
-      ReactDOM.render(<div>parsnip</div>, container);
-      expect(container.textContent).toBe('parsnip');
-      // We don't expect a warning about new hydration API here because
-      // we aren't sure if the user meant to hydrate or replace a stub node.
-      // We would see a warning if the container had React-rendered HTML in it.
-    });
-
-    it('should give helpful errors on state desync', () => {
-      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);
-
-      expect(() => {
-        expect(() =>
-          ReactDOM.render(<Component text="Hello world" />, testDocument),
-        ).toWarnDev(
-          'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
-            'will stop working in React v18. Replace the ReactDOM.render() call ' +
-            'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
-          {withoutStack: true},
-        );
-      }).toErrorDev('Warning: Text content did not match.');
-    });
-
-    it('should throw on full document render w/ no markup', () => {
-      const testDocument = getTestDocument();
-
-      class Component extends React.Component {
-        render() {
-          return (
-            <html>
-              <head>
-                <title>Hello World</title>
-              </head>
-              <body>{this.props.text}</body>
-            </html>
-          );
-        }
-      }
-
-      ReactDOM.render(<Component text="Hello world" />, testDocument);
-      expect(testDocument.body.innerHTML).toBe('Hello world');
-      // We don't expect a warning about new hydration API here because
-      // we aren't sure if the user meant to hydrate or replace the document.
-      // We would see a warning if the document had React-rendered HTML in it.
-    });
-
-    it('supports findDOMNode on full-page components', () => {
-      const tree = (
-        <html>
-          <head>
-            <title>Hello World</title>
-          </head>
-          <body>Hello world</body>
-        </html>
-      );
-
-      const markup = ReactDOMServer.renderToString(tree);
-      const testDocument = getTestDocument(markup);
-      let component;
-      expectDeprecationWarningWithFiber(() => {
-        component = ReactDOM.render(tree, testDocument);
-      });
-      expect(testDocument.body.innerHTML).toBe('Hello world');
-      expect(ReactDOM.findDOMNode(component).tagName).toBe('HTML');
-    });
-  });
-
   describe('with new explicit hydration API', () => {
     it('should be able to adopt server markup', () => {
       class Root extends React.Component {
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
index e84ae1d2ede4..b39d7c8ff517 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -31,14 +31,12 @@ describe('ReactDOMServer', () => {
   describe('renderToString', () => {
     it('should generate simple markup', () => {
       const response = ReactDOMServer.renderToString(<span>hello world</span>);
-      expect(response).toMatch(
-        new RegExp('<span data-reactroot=""' + '>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 data-reactroot=""' + '/>'));
+      expect(response).toMatch(new RegExp('<img' + '/>'));
     });
 
     it('should generate comment markup for component returns null', () => {
@@ -74,10 +72,7 @@ describe('ReactDOMServer', () => {
       const response = ReactDOMServer.renderToString(<Parent />);
       expect(response).toMatch(
         new RegExp(
-          '<div ' +
-            'data-reactroot' +
-            '=""' +
-            '>' +
+          '<div>' +
             '<span' +
             '>' +
             'My name is <!-- -->child' +
@@ -136,12 +131,7 @@ describe('ReactDOMServer', () => {
 
         expect(response).toMatch(
           new RegExp(
-            '<span ' +
-              'data-reactroot' +
-              '=""' +
-              '>' +
-              'Component name: <!-- -->TestComponent' +
-              '</span>',
+            '<span>' + 'Component name: <!-- -->TestComponent' + '</span>',
           ),
         );
         expect(lifecycle).toEqual([
@@ -580,9 +570,7 @@ describe('ReactDOMServer', () => {
     it('should generate simple markup', () => {
       const SuccessfulElement = React.createElement(() => <img />);
       const response = ReactDOMServer.renderToNodeStream(SuccessfulElement);
-      expect(response.read().toString()).toMatch(
-        new RegExp('<img data-reactroot=""' + '/>'),
-      );
+      expect(response.read().toString()).toMatch(new RegExp('<img' + '/>'));
     });
 
     it('should handle errors correctly', () => {
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 29d2ce6c2214..12fc6987cf59 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -25,99 +25,6 @@ describe('ReactDOMServerHydration', () => {
     Scheduler = require('scheduler');
   });
 
-  it('should have the correct mounting behavior (old hydrate API)', () => {
-    let mountCount = 0;
-    let numClicks = 0;
-
-    class TestComponent extends React.Component {
-      componentDidMount() {
-        mountCount++;
-      }
-
-      click = () => {
-        numClicks++;
-      };
-
-      render() {
-        return (
-          <span ref="span" onClick={this.click}>
-            Name: {this.props.name}
-          </span>
-        );
-      }
-    }
-
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    try {
-      ReactDOM.render(<TestComponent />, element);
-
-      let lastMarkup = element.innerHTML;
-
-      // Exercise the update path. Markup should not change,
-      // but some lifecycle methods should be run again.
-      ReactDOM.render(<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.
-      ReactDOM.unmountComponentAtNode(element);
-      expect(element.innerHTML).toEqual('');
-      ReactDOM.render(<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.
-      ReactDOM.unmountComponentAtNode(element);
-      expect(element.innerHTML).toEqual('');
-
-      lastMarkup = ReactDOMServer.renderToString(<TestComponent name="x" />);
-      element.innerHTML = lastMarkup;
-
-      let instance;
-
-      expect(() => {
-        instance = ReactDOM.render(<TestComponent name="x" />, element);
-      }).toWarnDev(
-        'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
-          'will stop working in React v18. Replace the ReactDOM.render() call ' +
-          'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
-        {withoutStack: true},
-      );
-      expect(mountCount).toEqual(3);
-      expect(element.innerHTML).toBe(lastMarkup);
-
-      // Ensure the events system works after mount into server markup
-      expect(numClicks).toEqual(0);
-
-      instance.refs.span.click();
-      expect(numClicks).toEqual(1);
-
-      ReactDOM.unmountComponentAtNode(element);
-      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;
-      expect(() => {
-        instance = ReactDOM.render(<TestComponent name="y" />, element);
-      }).toErrorDev('Text content did not match. Server: "x" Client: "y"');
-      expect(mountCount).toEqual(4);
-      expect(element.innerHTML.length > 0).toBe(true);
-      expect(element.innerHTML).not.toEqual(lastMarkup);
-
-      // Ensure the events system works after markup mismatch.
-      expect(numClicks).toEqual(1);
-      instance.refs.span.click();
-      expect(numClicks).toEqual(2);
-    } finally {
-      document.body.removeChild(element);
-    }
-  });
-
   it('should have the correct mounting behavior (new hydrate API)', () => {
     let mountCount = 0;
     let numClicks = 0;
@@ -289,7 +196,7 @@ describe('ReactDOMServerHydration', () => {
       // 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;" data-reactroot=""></div>';
+        '<div style="height: 10px; color: black; text-decoration: none;"></div>';
 
       // We don't expect to see false positive warnings.
       // https://github.com/facebook/react/issues/11807
@@ -308,7 +215,7 @@ describe('ReactDOMServerHydration', () => {
     const element = document.createElement('div');
 
     element.innerHTML =
-      '<div style="text-decoration: none; color: black; height: 10px;" data-reactroot=""></div>';
+      '<div style="text-decoration: none; color: black; height: 10px;"></div>';
 
     expect(() =>
       ReactDOM.hydrate(
diff --git a/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js b/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js
index 08d324daae3c..73565983da74 100644
--- a/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js
+++ b/packages/react-dom/src/__tests__/escapeTextForBrowser-test.js
@@ -21,37 +21,37 @@ describe('escapeTextForBrowser', () => {
 
   it('ampersand is escaped when passed as text content', () => {
     const response = ReactDOMServer.renderToString(<span>{'&'}</span>);
-    expect(response).toMatch('<span data-reactroot="">&amp;</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 data-reactroot="">&quot;</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 data-reactroot="">&#x27;</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 data-reactroot="">&gt;</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 data-reactroot="">&lt;</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 data-reactroot="">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" data-reactroot=""/>');
+    expect(response).toMatch('<img data-attr="42"/>');
   });
 
   it('escape text content representing a script tag', () => {
@@ -59,7 +59,7 @@ describe('escapeTextForBrowser', () => {
       <span>{'<script type=\'\' src=""></script>'}</span>,
     );
     expect(response).toMatch(
-      '<span data-reactroot="">&lt;script type=&#x27;&#x27; ' +
+      '<span>&lt;script type=&#x27;&#x27; ' +
         'src=&quot;&quot;&gt;&lt;/script&gt;</span>',
     );
   });
diff --git a/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js b/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js
index fc2a711149fe..e8f181477577 100644
--- a/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js
+++ b/packages/react-dom/src/__tests__/quoteAttributeValueForBrowser-test.js
@@ -21,32 +21,32 @@ describe('quoteAttributeValueForBrowser', () => {
 
   it('ampersand is escaped inside attributes', () => {
     const response = ReactDOMServer.renderToString(<img data-attr="&" />);
-    expect(response).toMatch('<img data-attr="&amp;" data-reactroot=""/>');
+    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;" data-reactroot=""/>');
+    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;" data-reactroot=""/>');
+    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;" data-reactroot=""/>');
+    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;" data-reactroot=""/>');
+    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" data-reactroot=""/>');
+    expect(response).toMatch('<img data-attr="42"/>');
   });
 
   it('object is passed to a string inside attributes', () => {
@@ -59,7 +59,7 @@ describe('quoteAttributeValueForBrowser', () => {
     const response = ReactDOMServer.renderToString(
       <img data-attr={sampleObject} />,
     );
-    expect(response).toMatch('<img data-attr="ponys" data-reactroot=""/>');
+    expect(response).toMatch('<img data-attr="ponys"/>');
   });
 
   it('script tag is escaped inside attributes', () => {
@@ -68,8 +68,7 @@ describe('quoteAttributeValueForBrowser', () => {
     );
     expect(response).toMatch(
       '<img data-attr="&lt;script type=&#x27;&#x27; ' +
-        'src=&quot;&quot;&gt;&lt;/script&gt;" ' +
-        'data-reactroot=""/>',
+        'src=&quot;&quot;&gt;&lt;/script&gt;"/>',
     );
   });
 });
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index b81a74983780..eec6cd855064 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -211,7 +211,7 @@ module.exports = function(initModules) {
       element,
       shouldUseDocument(element)
         ? '<html><body><div id="badIdWhichWillCauseMismatch" /></body></html>'
-        : '<div id="badIdWhichWillCauseMismatch" data-reactroot="" data-reactid="1"></div>',
+        : '<div id="badIdWhichWillCauseMismatch"></div>',
     );
 
     await renderIntoDom(element, container, true, errorCount + 1);
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 635c67f5d770..782097895710 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -941,9 +941,6 @@ export function diffHydratedProperties(
     for (let i = 0; i < attributes.length; i++) {
       const name = attributes[i].name.toLowerCase();
       switch (name) {
-        // Built-in SSR attribute is allowed
-        case 'data-reactroot':
-          break;
         // Controlled attributes are not validated
         // TODO: Only ignore them on controlled tags.
         case 'value':
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 589ddfedcda3..f1ee572ee6ef 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -18,7 +18,6 @@ import {
   unmarkContainerAsRoot,
 } from './ReactDOMComponentTree';
 import {createLegacyRoot, isValidContainer} from './ReactDOMRoot';
-import {ROOT_ATTRIBUTE_NAME} from '../shared/DOMProperty';
 import {
   DOCUMENT_NODE,
   ELEMENT_NODE,
@@ -41,7 +40,6 @@ import {has as hasInstance} from 'shared/ReactInstanceMap';
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 let topLevelUpdateWarnings;
-let warnedAboutHydrateAPI = false;
 
 if (__DEV__) {
   topLevelUpdateWarnings = (container: Container) => {
@@ -102,57 +100,21 @@ function getReactRootElementInContainer(container: any) {
   }
 }
 
-function shouldHydrateDueToLegacyHeuristic(container) {
-  const rootElement = getReactRootElementInContainer(container);
-  return !!(
-    rootElement &&
-    rootElement.nodeType === ELEMENT_NODE &&
-    rootElement.hasAttribute(ROOT_ATTRIBUTE_NAME)
-  );
-}
-
 function legacyCreateRootFromDOMContainer(
   container: Container,
   forceHydrate: boolean,
 ): RootType {
-  const shouldHydrate =
-    forceHydrate || shouldHydrateDueToLegacyHeuristic(container);
   // First clear any existing content.
-  if (!shouldHydrate) {
-    let warned = false;
+  if (!forceHydrate) {
     let rootSibling;
     while ((rootSibling = container.lastChild)) {
-      if (__DEV__) {
-        if (
-          !warned &&
-          rootSibling.nodeType === ELEMENT_NODE &&
-          (rootSibling: any).hasAttribute(ROOT_ATTRIBUTE_NAME)
-        ) {
-          warned = true;
-          console.error(
-            'render(): Target node has markup rendered by React, but there ' +
-              'are unrelated nodes as well. This is most commonly caused by ' +
-              'white-space inserted around server-rendered markup.',
-          );
-        }
-      }
       container.removeChild(rootSibling);
     }
   }
-  if (__DEV__) {
-    if (shouldHydrate && !forceHydrate && !warnedAboutHydrateAPI) {
-      warnedAboutHydrateAPI = true;
-      console.warn(
-        'render(): Calling ReactDOM.render() to hydrate server-rendered markup ' +
-          'will stop working in React v18. Replace the ReactDOM.render() call ' +
-          'with ReactDOM.hydrate() if you want React to attach to the server HTML.',
-      );
-    }
-  }
 
   return createLegacyRoot(
     container,
-    shouldHydrate
+    forceHydrate
       ? {
           hydrate: true,
         }
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 9b913f50728c..81ce4ecc1940 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -1272,7 +1272,7 @@ describe('DOMPluginEventSystem', () => {
               return <div ref={divRef}>Hello world</div>;
             }
             const output = ReactDOMServer.renderToString(<Test />);
-            expect(output).toBe(`<div data-reactroot="">Hello world</div>`);
+            expect(output).toBe(`<div>Hello world</div>`);
           });
 
           // @gate experimental
@@ -1293,9 +1293,7 @@ describe('DOMPluginEventSystem', () => {
               );
             }
             const output = ReactDOMServer.renderToString(<Test />);
-            expect(output).toBe(
-              `<div data-reactroot=""><span>Hello world</span></div>`,
-            );
+            expect(output).toBe(`<div><span>Hello world</span></div>`);
             container.innerHTML = output;
             ReactDOM.hydrate(<Test />, container);
             Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/server/DOMMarkupOperations.js b/packages/react-dom/src/server/DOMMarkupOperations.js
index 3cddbb493e07..014e63553192 100644
--- a/packages/react-dom/src/server/DOMMarkupOperations.js
+++ b/packages/react-dom/src/server/DOMMarkupOperations.js
@@ -8,7 +8,6 @@
  */
 
 import {
-  ROOT_ATTRIBUTE_NAME,
   BOOLEAN,
   OVERLOADED_BOOLEAN,
   getPropertyInfo,
@@ -23,10 +22,6 @@ import quoteAttributeValueForBrowser from './quoteAttributeValueForBrowser';
  * Operations for dealing with DOM properties.
  */
 
-export function createMarkupForRoot(): string {
-  return ROOT_ATTRIBUTE_NAME + '=""';
-}
-
 /**
  * Creates markup for a property.
  *
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index dd568c16363e..c8ccbfc245a1 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -52,7 +52,6 @@ import {allocThreadID, freeThreadID} from './ReactThreadIDAllocator';
 import {
   createMarkupForCustomAttribute,
   createMarkupForProperty,
-  createMarkupForRoot,
 } from './DOMMarkupOperations';
 import escapeTextForBrowser from './escapeTextForBrowser';
 import {
@@ -388,15 +387,6 @@ function createOpenTagMarkup(
     }
   }
 
-  // For static pages, no need to put React ID and checksum. Saves lots of
-  // bytes.
-  if (makeStaticMarkup) {
-    return ret;
-  }
-
-  if (isRootElement) {
-    ret += ' ' + createMarkupForRoot();
-  }
   return ret;
 }
 
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 92adf041d196..83b48555ebd8 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -63,7 +63,6 @@ export const ATTRIBUTE_NAME_START_CHAR =
 export const ATTRIBUTE_NAME_CHAR =
   ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
 
-export const ROOT_ATTRIBUTE_NAME = 'data-reactroot';
 export const VALID_ATTRIBUTE_NAME_REGEX = new RegExp(
   '^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$',
 );
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
index 2eeba5236285..10cdadfc66db 100644
--- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -228,7 +228,7 @@ describe('ReactScope', () => {
       }
       const html = ReactDOMServer.renderToString(<Test />);
       expect(html).toBe(
-        '<div data-reactroot=""><div>DIV</div><span>SPAN</span><a>A</a><div>Outside content!</div></div>',
+        '<div><div>DIV</div><span>SPAN</span><a>A</a><div>Outside content!</div></div>',
       );
       container.innerHTML = html;
       ReactDOM.hydrate(<Test />, container);
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
index 87633a047a8f..6d0f97a7b993 100644
--- a/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap
+++ b/packages/react-reconciler/src/__tests__/__snapshots__/ReactHooks-test.internal.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ReactHooks works with ReactDOMServer calls inside a component 1`] = `"<p data-reactroot=\\"\\">hello</p>0<p>bye</p>"`;
+exports[`ReactHooks works with ReactDOMServer calls inside a component 1`] = `"<p>hello</p>0<p>bye</p>"`;

From 9cf1069ffc5f3835506e314ef8c2e80bbfa8bdca Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 14 May 2021 10:14:34 -0400
Subject: [PATCH 0539/1603] DevTools: Fixed version range NPM syntax

---
 packages/react-devtools-shared/src/bridge.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 9acd7607e469..5b34a2321253 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -50,8 +50,8 @@ export const BRIDGE_PROTOCOL: Array<BridgeProtocol> = [
   // so the safest guess to downgrade the frontend would be to version 4.10.
   {
     version: 0,
-    minNpmVersion: '<4.11.0',
-    maxNpmVersion: '<4.11.0',
+    minNpmVersion: '"<4.11.0"',
+    maxNpmVersion: '"<4.11.0"',
   },
   {
     version: 1,

From 1a2d7925035531e5767ff31ff8d0d581b5f94d49 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 14 May 2021 10:19:58 -0400
Subject: [PATCH 0540/1603] Tweaked DevTools error template title to match
 issue form template

---
 .../src/devtools/views/ErrorBoundary/ReportNewIssue.js          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index 7dd12be65728..26417c35c44b 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -40,7 +40,7 @@ export default function ReportNewIssue({
   const gitHubAPISearch =
     errorMessage !== null ? searchGitHubIssuesURL(errorMessage) : '(none)';
 
-  const title = `[DevTools Error] ${errorMessage || ''}`;
+  const title = `[DevTools Bug] ${errorMessage || ''}`;
 
   const parameters = [
     `template=${TEMPLATE}`,

From e0f89aa056de95afc4c23909fce3d91fefb7dec7 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 17 May 2021 16:53:58 -0400
Subject: [PATCH 0541/1603] Clean up Scheduler forks (#20915)

* Clean up Scheduler forks

* Un-shadow variables

* Use timer globals directly, add a test for overrides

* Remove more window references

* Don't crash for undefined globals + tests

* Update lint config globals

* Fix test by using async act

* Add test fixture

* Delete test fixture
---
 .codesandbox/ci.json                          |   2 +-
 fixtures/dom/src/__tests__/wrong-act-test.js  |   4 +-
 ...ReactTestUtilsActUnmockedScheduler-test.js |   4 +-
 ...tUnmockedSchedulerWarning-test.internal.js |   2 +-
 .../ReactUnmockedSchedulerWarning-test.js     |   4 +-
 packages/scheduler/index.js                   |   2 +-
 packages/scheduler/npm/index.js               |   4 +-
 packages/scheduler/npm/unstable_no_dom.js     |   7 -
 packages/scheduler/package.json               |   1 -
 ...SchedulerDOM-test.js => Scheduler-test.js} |  19 +-
 .../src/__tests__/SchedulerPostTask-test.js   |   2 -
 .../__tests__/SchedulerPostTaskOnly-test.js   | 275 --------
 ...-test.js => SchedulerSetImmediate-test.js} |  62 +-
 ...OM-test.js => SchedulerSetTimeout-test.js} |  45 +-
 .../SchedulerUMDBundle-test.internal.js       |   9 +-
 .../forks/{SchedulerDOM.js => Scheduler.js}   |  50 +-
 .../scheduler/src/forks/SchedulerNoDOM.js     | 473 --------------
 .../src/forks/SchedulerPostTaskOnly.js        | 598 ------------------
 packages/scheduler/unstable_no_dom.js         |  10 -
 packages/scheduler/unstable_post_task_only.js |  10 -
 .../__tests__/ReactDOMFrameScheduling-test.js |  33 +-
 scripts/rollup/bundles.js                     |  33 -
 scripts/rollup/validate/eslintrc.rn.js        |   3 +-
 scripts/rollup/validate/eslintrc.umd.js       |   2 +
 24 files changed, 119 insertions(+), 1535 deletions(-)
 delete mode 100644 packages/scheduler/npm/unstable_no_dom.js
 rename packages/scheduler/src/__tests__/{SchedulerDOM-test.js => Scheduler-test.js} (93%)
 delete mode 100644 packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js
 rename packages/scheduler/src/__tests__/{SchedulerDOMSetImmediate-test.js => SchedulerSetImmediate-test.js} (84%)
 rename packages/scheduler/src/__tests__/{SchedulerNoDOM-test.js => SchedulerSetTimeout-test.js} (67%)
 rename packages/scheduler/src/forks/{SchedulerDOM.js => Scheduler.js} (92%)
 delete mode 100644 packages/scheduler/src/forks/SchedulerNoDOM.js
 delete mode 100644 packages/scheduler/src/forks/SchedulerPostTaskOnly.js
 delete mode 100644 packages/scheduler/unstable_no_dom.js
 delete mode 100644 packages/scheduler/unstable_post_task_only.js

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 97114903039b..8750763b5c21 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,scheduler/unstable_no_dom,react/jsx-runtime,react/jsx-dev-runtime",
+  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,react/jsx-runtime,react/jsx-dev-runtime",
   "node": "12",
   "publishDirectory": {
     "react": "build/node_modules/react",
diff --git a/fixtures/dom/src/__tests__/wrong-act-test.js b/fixtures/dom/src/__tests__/wrong-act-test.js
index 3e8912276e17..a3fe716ff07c 100644
--- a/fixtures/dom/src/__tests__/wrong-act-test.js
+++ b/fixtures/dom/src/__tests__/wrong-act-test.js
@@ -81,12 +81,12 @@ it("doesn't warn when you use the right act + renderer: test", () => {
   });
 });
 
-it('resets correctly across renderers', () => {
+it('resets correctly across renderers', async () => {
   function Effecty() {
     React.useEffect(() => {}, []);
     return null;
   }
-  TestUtils.act(() => {
+  await TestUtils.act(async () => {
     TestRenderer.act(() => {});
     expect(() => {
       TestRenderer.create(<Effecty />);
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
index 6f1587e7042e..f7145f657c72 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
@@ -33,9 +33,7 @@ function unmount(dom) {
 
 beforeEach(() => {
   jest.resetModules();
-  jest.mock('scheduler', () =>
-    require.requireActual('scheduler/unstable_no_dom'),
-  );
+  jest.unmock('scheduler');
   yields = [];
   React = require('react');
   ReactDOM = require('react-dom');
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
index 6c443a832aa1..501b01336b1b 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
@@ -17,7 +17,7 @@ function App() {
 
 beforeEach(() => {
   jest.resetModules();
-  jest.mock('scheduler', () => require('scheduler/unstable_no_dom'));
+  jest.unmock('scheduler');
   React = require('react');
   ReactDOM = require('react-dom');
   ReactFeatureFlags = require('shared/ReactFeatureFlags');
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
index 3091c3d1af78..960154dbea25 100644
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
@@ -16,9 +16,7 @@ function App() {
 
 beforeEach(() => {
   jest.resetModules();
-  jest.mock('scheduler', () =>
-    require.requireActual('scheduler/unstable_no_dom'),
-  );
+  jest.unmock('scheduler');
   React = require('react');
   ReactDOM = require('react-dom');
 });
diff --git a/packages/scheduler/index.js b/packages/scheduler/index.js
index a5e913d1dd26..db916ce5d4d9 100644
--- a/packages/scheduler/index.js
+++ b/packages/scheduler/index.js
@@ -7,4 +7,4 @@
 
 'use strict';
 
-export * from './src/forks/SchedulerDOM';
+export * from './src/forks/Scheduler';
diff --git a/packages/scheduler/npm/index.js b/packages/scheduler/npm/index.js
index 68a443aa1de8..77770b0c219e 100644
--- a/packages/scheduler/npm/index.js
+++ b/packages/scheduler/npm/index.js
@@ -1,8 +1,6 @@
 'use strict';
 
-if (typeof window === 'undefined' || typeof MessageChannel !== 'function') {
-  module.exports = require('./unstable_no_dom');
-} else if (process.env.NODE_ENV === 'production') {
+if (process.env.NODE_ENV === 'production') {
   module.exports = require('./cjs/scheduler.production.min.js');
 } else {
   module.exports = require('./cjs/scheduler.development.js');
diff --git a/packages/scheduler/npm/unstable_no_dom.js b/packages/scheduler/npm/unstable_no_dom.js
deleted file mode 100644
index 2ba763765a0c..000000000000
--- a/packages/scheduler/npm/unstable_no_dom.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/scheduler-unstable_no_dom.production.min.js');
-} else {
-  module.exports = require('./cjs/scheduler-unstable_no_dom.development.js');
-}
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index e8ac46571b73..b22fc085290e 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -26,7 +26,6 @@
     "build-info.json",
     "index.js",
     "unstable_mock.js",
-    "unstable_no_dom.js",
     "unstable_post_task.js",
     "cjs/",
     "umd/"
diff --git a/packages/scheduler/src/__tests__/SchedulerDOM-test.js b/packages/scheduler/src/__tests__/Scheduler-test.js
similarity index 93%
rename from packages/scheduler/src/__tests__/SchedulerDOM-test.js
rename to packages/scheduler/src/__tests__/Scheduler-test.js
index f6dd4be5db18..29abe65c1eae 100644
--- a/packages/scheduler/src/__tests__/SchedulerDOM-test.js
+++ b/packages/scheduler/src/__tests__/Scheduler-test.js
@@ -32,11 +32,9 @@ let NormalPriority;
 describe('SchedulerBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
-
-    // Un-mock scheduler
-    jest.mock('scheduler', () => require.requireActual('scheduler'));
-
     runtime = installMockBrowserRuntime();
+    jest.unmock('scheduler');
+
     performance = global.performance;
     Scheduler = require('scheduler');
     cancelCallback = Scheduler.unstable_cancelCallback;
@@ -68,21 +66,16 @@ describe('SchedulerBrowser', () => {
       },
     };
 
-    const window = {};
-    global.window = window;
-
-    // TODO: Scheduler no longer requires these methods to be polyfilled. But
-    // maybe we want to continue warning if they don't exist, to preserve the
-    // option to rely on it in the future?
-    window.requestAnimationFrame = window.cancelAnimationFrame = () => {};
+    // Delete node provide setImmediate so we fall through to MessageChannel.
+    delete global.setImmediate;
 
-    window.setTimeout = (cb, delay) => {
+    global.setTimeout = (cb, delay) => {
       const id = timerIDCounter++;
       log(`Set Timer`);
       // TODO
       return id;
     };
-    window.clearTimeout = id => {
+    global.clearTimeout = id => {
       // TODO
     };
 
diff --git a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
index 19b6e330b82f..883452120b12 100644
--- a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
@@ -30,8 +30,6 @@ let IdlePriority;
 describe('SchedulerPostTask', () => {
   beforeEach(() => {
     jest.resetModules();
-
-    // Un-mock scheduler
     jest.mock('scheduler', () =>
       require.requireActual('scheduler/unstable_post_task'),
     );
diff --git a/packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js b/packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js
deleted file mode 100644
index bc25f3dbb148..000000000000
--- a/packages/scheduler/src/__tests__/SchedulerPostTaskOnly-test.js
+++ /dev/null
@@ -1,275 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- * @jest-environment node
- */
-
-/* eslint-disable no-for-of-loops/no-for-of-loops */
-
-'use strict';
-
-let Scheduler;
-let runtime;
-let performance;
-let cancelCallback;
-let scheduleCallback;
-let NormalPriority;
-
-describe('SchedulerPostTaskOnly', () => {
-  beforeEach(() => {
-    if (!process.env.IS_BUILD) {
-      jest.resetModules();
-
-      // Un-mock scheduler
-      jest.mock('scheduler', () =>
-        require.requireActual('scheduler/unstable_post_task_only'),
-      );
-
-      runtime = installMockBrowserRuntime();
-      performance = window.performance;
-      Scheduler = require('scheduler');
-      cancelCallback = Scheduler.unstable_cancelCallback;
-      scheduleCallback = Scheduler.unstable_scheduleCallback;
-      NormalPriority = Scheduler.unstable_NormalPriority;
-    }
-  });
-
-  afterEach(() => {
-    if (!process.env.IS_BUILD) {
-      if (!runtime.isLogEmpty()) {
-        throw Error('Test exited without clearing log.');
-      }
-    }
-  });
-
-  function installMockBrowserRuntime() {
-    let hasPendingTask = false;
-    let timerIDCounter = 0;
-    let eventLog = [];
-
-    // Mock window functions
-    const window = {};
-    global.window = window;
-
-    // TODO: Scheduler no longer requires these methods to be polyfilled. But
-    // maybe we want to continue warning if they don't exist, to preserve the
-    // option to rely on it in the future?
-    window.requestAnimationFrame = window.cancelAnimationFrame = () => {};
-
-    let currentTime = 0;
-    window.performance = {
-      now() {
-        return currentTime;
-      },
-    };
-
-    window.setTimeout = (cb, delay) => {
-      const id = timerIDCounter++;
-      log(`Set Timer`);
-      // TODO
-      return id;
-    };
-    window.clearTimeout = id => {
-      // TODO
-    };
-
-    // Mock browser scheduler.
-    const scheduler = {};
-    global.scheduler = scheduler;
-
-    let nextTask;
-    scheduler.postTask = function(callback) {
-      if (hasPendingTask) {
-        throw Error('Task already scheduled');
-      }
-      log('Post Task');
-      hasPendingTask = true;
-      nextTask = callback;
-    };
-
-    function ensureLogIsEmpty() {
-      if (eventLog.length !== 0) {
-        throw Error('Log is not empty. Call assertLog before continuing.');
-      }
-    }
-
-    function advanceTime(ms) {
-      currentTime += ms;
-    }
-
-    function fireNextTask() {
-      ensureLogIsEmpty();
-      if (!hasPendingTask) {
-        throw Error('No task was scheduled');
-      }
-      hasPendingTask = false;
-
-      log('Task Event');
-
-      // 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 task = nextTask;
-      nextTask = null;
-      task();
-    }
-
-    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,
-      fireNextTask,
-      log,
-      isLogEmpty,
-      assertLog,
-    };
-  }
-
-  // @gate source
-  it('task that finishes before deadline', () => {
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('Task');
-    });
-    runtime.assertLog(['Post Task']);
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'Task']);
-  });
-
-  // @gate source
-  it('task with continuation', () => {
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('Task');
-      while (!Scheduler.unstable_shouldYield()) {
-        runtime.advanceTime(1);
-      }
-      runtime.log(`Yield at ${performance.now()}ms`);
-      return () => {
-        runtime.log('Continuation');
-      };
-    });
-    runtime.assertLog(['Post Task']);
-
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'Task', 'Yield at 5ms', 'Post Task']);
-
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'Continuation']);
-  });
-
-  // @gate source
-  it('multiple tasks', () => {
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('A');
-    });
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('B');
-    });
-    runtime.assertLog(['Post Task']);
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'A', 'B']);
-  });
-
-  // @gate source
-  it('multiple tasks with a yield in between', () => {
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('A');
-      runtime.advanceTime(4999);
-    });
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('B');
-    });
-    runtime.assertLog(['Post Task']);
-    runtime.fireNextTask();
-    runtime.assertLog([
-      'Task Event',
-      'A',
-      // Ran out of time. Post a continuation event.
-      'Post Task',
-    ]);
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'B']);
-  });
-
-  // @gate source
-  it('cancels tasks', () => {
-    const task = scheduleCallback(NormalPriority, () => {
-      runtime.log('Task');
-    });
-    runtime.assertLog(['Post Task']);
-    cancelCallback(task);
-    runtime.assertLog([]);
-  });
-
-  // @gate source
-  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 Task']);
-
-    expect(() => runtime.fireNextTask()).toThrow('Oops!');
-    runtime.assertLog(['Task Event', 'Oops!', 'Post Task']);
-
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'Yay']);
-  });
-
-  // @gate source
-  it('schedule new task after queue has emptied', () => {
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('A');
-    });
-
-    runtime.assertLog(['Post Task']);
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'A']);
-
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('B');
-    });
-    runtime.assertLog(['Post Task']);
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'B']);
-  });
-
-  // @gate source
-  it('schedule new task after a cancellation', () => {
-    const handle = scheduleCallback(NormalPriority, () => {
-      runtime.log('A');
-    });
-
-    runtime.assertLog(['Post Task']);
-    cancelCallback(handle);
-
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event']);
-
-    scheduleCallback(NormalPriority, () => {
-      runtime.log('B');
-    });
-    runtime.assertLog(['Post Task']);
-    runtime.fireNextTask();
-    runtime.assertLog(['Task Event', 'B']);
-  });
-});
diff --git a/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js b/packages/scheduler/src/__tests__/SchedulerSetImmediate-test.js
similarity index 84%
rename from packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js
rename to packages/scheduler/src/__tests__/SchedulerSetImmediate-test.js
index 04fecab12951..219618adc41f 100644
--- a/packages/scheduler/src/__tests__/SchedulerDOMSetImmediate-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerSetImmediate-test.js
@@ -18,6 +18,7 @@ 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
@@ -32,16 +33,15 @@ let NormalPriority;
 describe('SchedulerDOMSetImmediate', () => {
   beforeEach(() => {
     jest.resetModules();
-
-    // Un-mock scheduler
-    jest.mock('scheduler', () => require.requireActual('scheduler'));
-
     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(() => {
@@ -66,21 +66,12 @@ describe('SchedulerDOMSetImmediate', () => {
       },
     };
 
-    const window = {};
-    global.window = window;
-
-    // TODO: Scheduler no longer requires these methods to be polyfilled. But
-    // maybe we want to continue warning if they don't exist, to preserve the
-    // option to rely on it in the future?
-    window.requestAnimationFrame = window.cancelAnimationFrame = () => {};
-
-    window.setTimeout = (cb, delay) => {
+    global.setTimeout = (cb, delay) => {
       const id = timerIDCounter++;
       log(`Set Timer`);
-      // TODO
       return id;
     };
-    window.clearTimeout = id => {
+    global.clearTimeout = id => {
       // TODO
     };
 
@@ -97,7 +88,7 @@ describe('SchedulerDOMSetImmediate', () => {
     };
 
     let pendingSetImmediateCallback = null;
-    window.setImmediate = function(cb) {
+    global.setImmediate = function(cb) {
       if (pendingSetImmediateCallback) {
         throw Error('Message event already scheduled');
       }
@@ -143,6 +134,19 @@ describe('SchedulerDOMSetImmediate', () => {
     };
   }
 
+  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');
@@ -189,6 +193,18 @@ describe('SchedulerDOMSetImmediate', () => {
     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();
+    runtime.assertLog(['setImmediate Callback', 'B', 'A']);
+  });
+
   it('multiple tasks with a yield in between', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('A');
@@ -271,3 +287,17 @@ describe('SchedulerDOMSetImmediate', () => {
     runtime.assertLog(['setImmediate Callback', 'B']);
   });
 });
+
+it('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__/SchedulerNoDOM-test.js b/packages/scheduler/src/__tests__/SchedulerSetTimeout-test.js
similarity index 67%
rename from packages/scheduler/src/__tests__/SchedulerNoDOM-test.js
rename to packages/scheduler/src/__tests__/SchedulerSetTimeout-test.js
index 8d3920fd920f..c4a950e1f1fd 100644
--- a/packages/scheduler/src/__tests__/SchedulerNoDOM-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerSetTimeout-test.js
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @emails react-core
+ * @jest-environment node
  */
 
 'use strict';
@@ -16,21 +17,16 @@ let UserBlockingPriority;
 let NormalPriority;
 
 describe('SchedulerNoDOM', () => {
-  // If Scheduler runs in a non-DOM environment, it falls back to a naive
-  // implementation using setTimeout. This only meant to be used for testing
-  // purposes, like with jest's fake timer API.
+  // 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();
-
-    // Un-mock scheduler
-    jest.mock('scheduler', () =>
-      require.requireActual('scheduler/unstable_no_dom'),
-    );
+    delete global.setImmediate;
+    jest.unmock('scheduler');
 
     Scheduler = require('scheduler');
     scheduleCallback = Scheduler.unstable_scheduleCallback;
-    ImmediatePriority = Scheduler.unstable_ImmediatePriority;
     UserBlockingPriority = Scheduler.unstable_UserBlockingPriority;
     NormalPriority = Scheduler.unstable_NormalPriority;
   });
@@ -99,3 +95,34 @@ describe('SchedulerNoDOM', () => {
     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/__tests__/SchedulerUMDBundle-test.internal.js b/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
index fde4ee8af20e..8aa1a387b269 100644
--- a/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
+++ b/packages/scheduler/src/__tests__/SchedulerUMDBundle-test.internal.js
@@ -21,19 +21,12 @@ describe('Scheduling UMD bundle', () => {
     global.__UMD__ = true;
 
     jest.resetModules();
+    jest.unmock('scheduler');
 
-    jest.mock('scheduler', () => require.requireActual('scheduler'));
-
-    // Mock a browser environment since we're testing UMD modules.
-    global.window = {
-      requestAnimationFrame: jest.fn(),
-      cancelAnimationFrame: jest.fn(),
-    };
     global.MessageChannel = MockMessageChannel;
   });
 
   afterEach(() => {
-    global.window = undefined;
     global.MessageChannel = undefined;
   });
 
diff --git a/packages/scheduler/src/forks/SchedulerDOM.js b/packages/scheduler/src/forks/Scheduler.js
similarity index 92%
rename from packages/scheduler/src/forks/SchedulerDOM.js
rename to packages/scheduler/src/forks/Scheduler.js
index aa72972296b7..6d0599f7068c 100644
--- a/packages/scheduler/src/forks/SchedulerDOM.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -85,34 +85,11 @@ var isHostCallbackScheduled = false;
 var isHostTimeoutScheduled = false;
 
 // Capture local references to native APIs, in case a polyfill overrides them.
-const setTimeout = window.setTimeout;
-const clearTimeout = window.clearTimeout;
-const setImmediate = window.setImmediate; // IE and Node.js + jsdom
-
-if (typeof console !== 'undefined') {
-  // TODO: Scheduler no longer requires these methods to be polyfilled. But
-  // maybe we want to continue warning if they don't exist, to preserve the
-  // option to rely on it in the future?
-  const requestAnimationFrame = window.requestAnimationFrame;
-  const cancelAnimationFrame = window.cancelAnimationFrame;
-
-  if (typeof requestAnimationFrame !== 'function') {
-    // Using console['error'] to evade Babel and ESLint
-    console['error'](
-      "This browser doesn't support requestAnimationFrame. " +
-        'Make sure that you load a ' +
-        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
-    );
-  }
-  if (typeof cancelAnimationFrame !== 'function') {
-    // Using console['error'] to evade Babel and ESLint
-    console['error'](
-      "This browser doesn't support cancelAnimationFrame. " +
-        'Make sure that you load a ' +
-        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
-    );
-  }
-}
+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) {
   // Check for tasks that are no longer delayed and add them to the queue.
@@ -552,7 +529,7 @@ const performWorkUntilDeadline = () => {
 };
 
 let schedulePerformWorkUntilDeadline;
-if (typeof setImmediate === 'function') {
+if (typeof localSetImmediate === 'function') {
   // Node.js and old IE.
   // There's a few reasons for why we prefer setImmediate.
   //
@@ -565,15 +542,22 @@ if (typeof setImmediate === 'function') {
   // If other browsers ever implement it, it's better to use it.
   // Although both of these would be inferior to native scheduling.
   schedulePerformWorkUntilDeadline = () => {
-    setImmediate(performWorkUntilDeadline);
+    localSetImmediate(performWorkUntilDeadline);
   };
-} else {
+} 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 = () => {
+    localSetTimeout(performWorkUntilDeadline, 0);
+  };
 }
 
 function requestHostCallback(callback) {
@@ -585,13 +569,13 @@ function requestHostCallback(callback) {
 }
 
 function requestHostTimeout(callback, ms) {
-  taskTimeoutID = setTimeout(() => {
+  taskTimeoutID = localSetTimeout(() => {
     callback(getCurrentTime());
   }, ms);
 }
 
 function cancelHostTimeout() {
-  clearTimeout(taskTimeoutID);
+  localClearTimeout(taskTimeoutID);
   taskTimeoutID = -1;
 }
 
diff --git a/packages/scheduler/src/forks/SchedulerNoDOM.js b/packages/scheduler/src/forks/SchedulerNoDOM.js
deleted file mode 100644
index ed6d7891fd24..000000000000
--- a/packages/scheduler/src/forks/SchedulerNoDOM.js
+++ /dev/null
@@ -1,473 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* eslint-disable no-var */
-
-import {
-  enableSchedulerDebugging,
-  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';
-
-// 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 = [];
-var timerQueue = [];
-
-// Incrementing id counter. Used to maintain insertion order.
-var taskIdCounter = 1;
-
-// Pausing the scheduler is useful for debugging.
-var isSchedulerPaused = false;
-
-var currentTask = null;
-var currentPriorityLevel = NormalPriority;
-
-// This is set while performing work, to prevent re-entrancy.
-var isPerformingWork = false;
-
-var isHostCallbackScheduled = false;
-var isHostTimeoutScheduled = false;
-
-let getCurrentTime;
-const hasPerformanceNow =
-  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;
-}
-
-function advanceTimers(currentTime) {
-  // Check for tasks that are no longer delayed and add them to the queue.
-  let timer = peek(timerQueue);
-  while (timer !== null) {
-    if (timer.callback === null) {
-      // Timer was cancelled.
-      pop(timerQueue);
-    } else if (timer.startTime <= currentTime) {
-      // Timer fired. Transfer to the task queue.
-      pop(timerQueue);
-      timer.sortIndex = timer.expirationTime;
-      push(taskQueue, timer);
-      if (enableProfiling) {
-        markTaskStart(timer, currentTime);
-        timer.isQueued = true;
-      }
-    } else {
-      // Remaining timers are pending.
-      return;
-    }
-    timer = peek(timerQueue);
-  }
-}
-
-function handleTimeout(currentTime) {
-  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, initialTime) {
-  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();
-          markTaskErrored(currentTask, currentTime);
-          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, initialTime) {
-  let currentTime = initialTime;
-  advanceTimers(currentTime);
-  currentTask = peek(taskQueue);
-  while (
-    currentTask !== null &&
-    !(enableSchedulerDebugging && isSchedulerPaused)
-  ) {
-    if (
-      currentTask.expirationTime > currentTime &&
-      (!hasTimeRemaining || shouldYieldToHost())
-    ) {
-      // This currentTask hasn't expired, and we've reached the deadline.
-      break;
-    }
-    const callback = currentTask.callback;
-    if (typeof callback === 'function') {
-      currentTask.callback = null;
-      currentPriorityLevel = currentTask.priorityLevel;
-      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
-      if (enableProfiling) {
-        markTaskRun(currentTask, currentTime);
-      }
-      const continuationCallback = callback(didUserCallbackTimeout);
-      currentTime = getCurrentTime();
-      if (typeof continuationCallback === 'function') {
-        currentTask.callback = continuationCallback;
-        if (enableProfiling) {
-          markTaskYield(currentTask, currentTime);
-        }
-      } else {
-        if (enableProfiling) {
-          markTaskCompleted(currentTask, currentTime);
-          currentTask.isQueued = false;
-        }
-        if (currentTask === peek(taskQueue)) {
-          pop(taskQueue);
-        }
-      }
-      advanceTimers(currentTime);
-    } else {
-      pop(taskQueue);
-    }
-    currentTask = peek(taskQueue);
-  }
-  // Return whether there's additional work
-  if (currentTask !== null) {
-    return true;
-  } else {
-    const firstTimer = peek(timerQueue);
-    if (firstTimer !== null) {
-      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
-    }
-    return false;
-  }
-}
-
-function unstable_runWithPriority(priorityLevel, eventHandler) {
-  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(eventHandler) {
-  var 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(callback) {
-  var parentPriorityLevel = currentPriorityLevel;
-  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, callback, options) {
-  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 = {
-    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_pauseExecution() {
-  isSchedulerPaused = true;
-}
-
-function unstable_continueExecution() {
-  isSchedulerPaused = false;
-  if (!isHostCallbackScheduled && !isPerformingWork) {
-    isHostCallbackScheduled = true;
-    requestHostCallback(flushWork);
-  }
-}
-
-function unstable_getFirstCallbackNode() {
-  return peek(taskQueue);
-}
-
-function unstable_cancelCallback(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() {
-  return currentPriorityLevel;
-}
-
-// If this accidentally gets imported in a non-browser environment, e.g. JavaScriptCore,
-// fallback to a naive implementation.
-let _callback = null;
-let _timeoutID = null;
-const _flushCallback = function() {
-  if (_callback !== null) {
-    try {
-      const currentTime = getCurrentTime();
-      const hasRemainingTime = true;
-      _callback(hasRemainingTime, currentTime);
-      _callback = null;
-    } catch (e) {
-      setTimeout(_flushCallback, 0);
-      throw e;
-    }
-  }
-};
-
-function requestHostCallback(cb) {
-  if (_callback !== null) {
-    // Protect against re-entrancy.
-    setTimeout(requestHostCallback, 0, cb);
-  } else {
-    _callback = cb;
-    setTimeout(_flushCallback, 0);
-  }
-}
-
-function requestHostTimeout(cb, ms) {
-  _timeoutID = setTimeout(cb, ms);
-}
-
-function cancelHostTimeout() {
-  clearTimeout(_timeoutID);
-}
-
-function shouldYieldToHost() {
-  return false;
-}
-
-function forceFrameRate() {}
-
-function requestPaint() {}
-
-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,
-  unstable_continueExecution,
-  unstable_pauseExecution,
-  unstable_getFirstCallbackNode,
-  getCurrentTime as unstable_now,
-  forceFrameRate as unstable_forceFrameRate,
-};
-
-export const unstable_Profiling = enableProfiling
-  ? {
-      startLoggingProfilingEvents,
-      stopLoggingProfilingEvents,
-    }
-  : null;
diff --git a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js b/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
deleted file mode 100644
index 0f7e1b99e252..000000000000
--- a/packages/scheduler/src/forks/SchedulerPostTaskOnly.js
+++ /dev/null
@@ -1,598 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/* eslint-disable no-var */
-
-import {
-  enableSchedulerDebugging,
-  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';
-
-import {enableIsInputPending} from '../SchedulerFeatureFlags';
-
-const perf = window.performance;
-
-function getCurrentTime() {
-  return perf.now();
-}
-
-// 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 = [];
-var timerQueue = [];
-
-// Incrementing id counter. Used to maintain insertion order.
-var taskIdCounter = 1;
-
-// Pausing the scheduler is useful for debugging.
-var isSchedulerPaused = false;
-
-var currentTask = null;
-var currentPriorityLevel = NormalPriority;
-
-// This is set while performing work, to prevent re-entrancy.
-var isPerformingWork = false;
-
-var isHostCallbackScheduled = false;
-var isHostTimeoutScheduled = false;
-
-// Capture local references to native APIs, in case a polyfill overrides them.
-const setTimeout = window.setTimeout;
-const clearTimeout = window.clearTimeout;
-
-if (typeof console !== 'undefined') {
-  // TODO: Scheduler no longer requires these methods to be polyfilled. But
-  // maybe we want to continue warning if they don't exist, to preserve the
-  // option to rely on it in the future?
-  const requestAnimationFrame = window.requestAnimationFrame;
-  const cancelAnimationFrame = window.cancelAnimationFrame;
-
-  if (typeof requestAnimationFrame !== 'function') {
-    // Using console['error'] to evade Babel and ESLint
-    console['error'](
-      "This browser doesn't support requestAnimationFrame. " +
-        'Make sure that you load a ' +
-        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
-    );
-  }
-  if (typeof cancelAnimationFrame !== 'function') {
-    // Using console['error'] to evade Babel and ESLint
-    console['error'](
-      "This browser doesn't support cancelAnimationFrame. " +
-        'Make sure that you load a ' +
-        'polyfill in older browsers. https://reactjs.org/link/react-polyfills',
-    );
-  }
-}
-
-function advanceTimers(currentTime) {
-  // Check for tasks that are no longer delayed and add them to the queue.
-  let timer = peek(timerQueue);
-  while (timer !== null) {
-    if (timer.callback === null) {
-      // Timer was cancelled.
-      pop(timerQueue);
-    } else if (timer.startTime <= currentTime) {
-      // Timer fired. Transfer to the task queue.
-      pop(timerQueue);
-      timer.sortIndex = timer.expirationTime;
-      push(taskQueue, timer);
-      if (enableProfiling) {
-        markTaskStart(timer, currentTime);
-        timer.isQueued = true;
-      }
-    } else {
-      // Remaining timers are pending.
-      return;
-    }
-    timer = peek(timerQueue);
-  }
-}
-
-function handleTimeout(currentTime) {
-  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, initialTime) {
-  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();
-          markTaskErrored(currentTask, currentTime);
-          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, initialTime) {
-  let currentTime = initialTime;
-  advanceTimers(currentTime);
-  currentTask = peek(taskQueue);
-  while (
-    currentTask !== null &&
-    !(enableSchedulerDebugging && isSchedulerPaused)
-  ) {
-    if (
-      currentTask.expirationTime > currentTime &&
-      (!hasTimeRemaining || shouldYieldToHost())
-    ) {
-      // This currentTask hasn't expired, and we've reached the deadline.
-      break;
-    }
-    const callback = currentTask.callback;
-    if (typeof callback === 'function') {
-      currentTask.callback = null;
-      currentPriorityLevel = currentTask.priorityLevel;
-      const didUserCallbackTimeout = currentTask.expirationTime <= currentTime;
-      if (enableProfiling) {
-        markTaskRun(currentTask, currentTime);
-      }
-      const continuationCallback = callback(didUserCallbackTimeout);
-      currentTime = getCurrentTime();
-      if (typeof continuationCallback === 'function') {
-        currentTask.callback = continuationCallback;
-        if (enableProfiling) {
-          markTaskYield(currentTask, currentTime);
-        }
-      } else {
-        if (enableProfiling) {
-          markTaskCompleted(currentTask, currentTime);
-          currentTask.isQueued = false;
-        }
-        if (currentTask === peek(taskQueue)) {
-          pop(taskQueue);
-        }
-      }
-      advanceTimers(currentTime);
-    } else {
-      pop(taskQueue);
-    }
-    currentTask = peek(taskQueue);
-  }
-  // Return whether there's additional work
-  if (currentTask !== null) {
-    return true;
-  } else {
-    const firstTimer = peek(timerQueue);
-    if (firstTimer !== null) {
-      requestHostTimeout(handleTimeout, firstTimer.startTime - currentTime);
-    }
-    return false;
-  }
-}
-
-function unstable_runWithPriority(priorityLevel, eventHandler) {
-  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(eventHandler) {
-  var 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(callback) {
-  var parentPriorityLevel = currentPriorityLevel;
-  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, callback, options) {
-  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 = {
-    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_pauseExecution() {
-  isSchedulerPaused = true;
-}
-
-function unstable_continueExecution() {
-  isSchedulerPaused = false;
-  if (!isHostCallbackScheduled && !isPerformingWork) {
-    isHostCallbackScheduled = true;
-    requestHostCallback(flushWork);
-  }
-}
-
-function unstable_getFirstCallbackNode() {
-  return peek(taskQueue);
-}
-
-function unstable_cancelCallback(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() {
-  return currentPriorityLevel;
-}
-
-let isTaskLoopRunning = false;
-let scheduledHostCallback = null;
-let taskTimeoutID = -1;
-
-// Scheduler periodically yields in case there is other work on the main
-// thread, like user events. By default, it yields multiple times per frame.
-// It does not attempt to align with frame boundaries, since most tasks don't
-// need to be frame aligned; for those that do, use requestAnimationFrame.
-let yieldInterval = 5;
-let deadline = 0;
-
-// TODO: Make this configurable
-// TODO: Adjust this based on priority?
-const maxYieldInterval = 300;
-let needsPaint = false;
-
-function shouldYieldToHost() {
-  if (
-    enableIsInputPending &&
-    navigator !== undefined &&
-    navigator.scheduling !== undefined &&
-    navigator.scheduling.isInputPending !== undefined
-  ) {
-    const scheduling = navigator.scheduling;
-    const currentTime = getCurrentTime();
-    if (currentTime >= deadline) {
-      // There's no time left. We may want to yield control of the main
-      // thread, so the browser can perform high priority tasks. The main ones
-      // are painting and user input. If there's a pending paint or a pending
-      // input, then we should yield. But if there's neither, then we can
-      // yield less often while remaining responsive. We'll eventually yield
-      // regardless, since there could be a pending paint that wasn't
-      // accompanied by a call to `requestPaint`, or other main thread tasks
-      // like network events.
-      if (needsPaint || scheduling.isInputPending()) {
-        // There is either a pending paint or a pending input.
-        return true;
-      }
-      // There's no pending input. Only yield if we've reached the max
-      // yield interval.
-      return currentTime >= maxYieldInterval;
-    } else {
-      // There's still time left in the frame.
-      return false;
-    }
-  } else {
-    // `isInputPending` is not available. Since we have no way of knowing if
-    // there's pending input, always yield at the end of the frame.
-    return getCurrentTime() >= deadline;
-  }
-}
-
-function requestPaint() {
-  if (
-    enableIsInputPending &&
-    navigator !== undefined &&
-    navigator.scheduling !== undefined &&
-    navigator.scheduling.isInputPending !== undefined
-  ) {
-    needsPaint = true;
-  }
-
-  // Since we yield every frame regardless, `requestPaint` has no effect.
-}
-
-function forceFrameRate(fps) {
-  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) {
-    yieldInterval = Math.floor(1000 / fps);
-  } else {
-    // reset the framerate
-    yieldInterval = 5;
-  }
-}
-
-const performWorkUntilDeadline = () => {
-  if (scheduledHostCallback !== null) {
-    const currentTime = getCurrentTime();
-    // Yield after `yieldInterval` ms, regardless of where we are in the vsync
-    // cycle. This means there's always time remaining at the beginning of
-    // the message event.
-    deadline = currentTime + yieldInterval;
-    const hasTimeRemaining = true;
-
-    // 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 `scheduledHostCallback` errors, then
-    // `hasMoreWork` will remain true, and we'll continue the work loop.
-    let hasMoreWork = true;
-    try {
-      hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime);
-    } finally {
-      if (hasMoreWork) {
-        // If there's more work, schedule the next browser task at the end of
-        // the preceding one.
-        postTask(performWorkUntilDeadline);
-      } else {
-        isTaskLoopRunning = false;
-        scheduledHostCallback = null;
-      }
-    }
-  } else {
-    isTaskLoopRunning = false;
-  }
-  // Yielding to the browser will give it a chance to paint, so we can
-  // reset this.
-  needsPaint = false;
-};
-
-function postTask(callback) {
-  // Use experimental Chrome Scheduler postTask API.
-  global.scheduler.postTask(callback);
-}
-
-function requestHostCallback(callback) {
-  scheduledHostCallback = callback;
-  if (!isTaskLoopRunning) {
-    isTaskLoopRunning = true;
-    postTask(performWorkUntilDeadline);
-  }
-}
-
-function requestHostTimeout(callback, ms) {
-  taskTimeoutID = setTimeout(() => {
-    callback(getCurrentTime());
-  }, ms);
-}
-
-function cancelHostTimeout() {
-  clearTimeout(taskTimeoutID);
-  taskTimeoutID = -1;
-}
-
-const unstable_requestPaint = requestPaint;
-
-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,
-  unstable_requestPaint,
-  unstable_continueExecution,
-  unstable_pauseExecution,
-  unstable_getFirstCallbackNode,
-  getCurrentTime as unstable_now,
-  forceFrameRate as unstable_forceFrameRate,
-};
-
-export const unstable_Profiling = enableProfiling
-  ? {
-      startLoggingProfilingEvents,
-      stopLoggingProfilingEvents,
-    }
-  : null;
diff --git a/packages/scheduler/unstable_no_dom.js b/packages/scheduler/unstable_no_dom.js
deleted file mode 100644
index bf235f9b1514..000000000000
--- a/packages/scheduler/unstable_no_dom.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-export * from './src/forks/SchedulerNoDOM';
diff --git a/packages/scheduler/unstable_post_task_only.js b/packages/scheduler/unstable_post_task_only.js
deleted file mode 100644
index d6e22c230162..000000000000
--- a/packages/scheduler/unstable_post_task_only.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-export * from './src/forks/SchedulerPostTaskOnly';
diff --git a/packages/shared/__tests__/ReactDOMFrameScheduling-test.js b/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
index 3d6407ebe384..d46a3403ca84 100644
--- a/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
+++ b/packages/shared/__tests__/ReactDOMFrameScheduling-test.js
@@ -13,43 +13,14 @@ describe('ReactDOMFrameScheduling', () => {
   beforeEach(() => {
     jest.resetModules();
 
-    // Un-mock scheduler
-    jest.mock('scheduler', () => require.requireActual('scheduler'));
-  });
-
-  it('warns when requestAnimationFrame is not polyfilled in the browser', () => {
-    const previousRAF = global.requestAnimationFrame;
-    const previousMessageChannel = global.MessageChannel;
-    try {
-      delete global.requestAnimationFrame;
-      global.MessageChannel = function MessageChannel() {
-        return {
-          port1: {},
-          port2: {},
-        };
-      };
-      spyOnDevAndProd(console, 'error');
-      require('react-dom');
-      expect(console.error.calls.count()).toEqual(1);
-      expect(console.error.calls.argsFor(0)[0]).toMatch(
-        "This browser doesn't support requestAnimationFrame.",
-      );
-    } finally {
-      global.MessageChannel = previousMessageChannel;
-      global.requestAnimationFrame = previousRAF;
-    }
+    jest.unmock('scheduler');
   });
 
   // We're just testing importing, not using it.
   // It is important because even isomorphic components may import it.
-  // @gate !source
   it('can import findDOMNode in Node environment', () => {
-    const previousRAF = global.requestAnimationFrame;
-    const previousRIC = global.requestIdleCallback;
     const prevWindow = global.window;
     try {
-      global.requestAnimationFrame = undefined;
-      global.requestIdleCallback = undefined;
       // Simulate the Node environment:
       delete global.window;
       jest.resetModules();
@@ -57,8 +28,6 @@ describe('ReactDOMFrameScheduling', () => {
         require('react-dom');
       }).not.toThrow();
     } finally {
-      global.requestAnimationFrame = previousRAF;
-      global.requestIdleCallback = previousRIC;
       global.window = prevWindow;
     }
   });
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index b34c0077873a..7e0cd766d657 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -735,39 +735,6 @@ const bundles = [
     externals: [],
   },
 
-  /******* React Scheduler Post Task Only (experimental) *******/
-  {
-    bundleTypes: [
-      NODE_DEV,
-      NODE_PROD,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-      FB_WWW_PROFILING,
-    ],
-    moduleType: ISOMORPHIC,
-    entry: 'scheduler/unstable_post_task_only',
-    global: 'SchedulerPostTaskOnly',
-    externals: [],
-  },
-
-  /******* React Scheduler No DOM (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/unstable_no_dom',
-    global: 'SchedulerNoDOM',
-    externals: [],
-  },
-
   /******* Jest React (experimental) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index b6941e4f2caf..a20cdeb4a37e 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -24,7 +24,8 @@ module.exports = {
     nativeFabricUIManager: true,
     // Trusted Types
     trustedTypes: true,
-
+    // RN supports this
+    setImmediate: true,
     // Scheduler profiling
     Int32Array: true,
     ArrayBuffer: true,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 8bec6d92296d..95ef9550dd6a 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -26,6 +26,8 @@ module.exports = {
     require: true,
     globalThis: true,
     global: true,
+    // Internet Explorer
+    setImmediate: true,
     // Trusted Types
     trustedTypes: true,
 

From 316943091ed36b2807b70b765283c7647dd9ffda Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 07:07:58 -0700
Subject: [PATCH 0542/1603] Make StrictMode double rendering flag static for
 FB/www (#21517)

---
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js | 1 -
 packages/shared/forks/ReactFeatureFlags.www.js         | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 83f7c3b812e4..42e5d97e30c4 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -41,7 +41,6 @@ export const deferRenderPhaseUpdateToNextBatch = !__VARIANT__;
 
 // These are already tested in both modes using the build type dimension,
 // so we don't need to use __VARIANT__ to get extra coverage.
-export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 
 // TODO: These flags are hard-coded to the default values used in open source.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 1d9c88cc8fcf..5e0a0134474e 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -15,7 +15,6 @@ import typeof * as DynamicFeatureFlags from './ReactFeatureFlags.www-dynamic';
 const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');
 
 export const {
-  debugRenderPhaseSideEffectsForStrictMode,
   disableInputAttributeSyncing,
   enableTrustedTypesIntegration,
   disableSchedulerTimeoutBasedOnReactExpirationTime,
@@ -40,6 +39,7 @@ export const {
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
 // It's not used anywhere in production yet.
 
+export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;

From 7bef382bf92e380f2b94e825cf35b8af58f8a2ec Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 07:36:31 -0700
Subject: [PATCH 0543/1603] Errors thrown by Store can be dismissed in boundary
 (#21520)

---
 .../views/ErrorBoundary/ErrorBoundary.js      | 20 ++++++++++++++--
 .../devtools/views/ErrorBoundary/ErrorView.js | 16 +++++++++++--
 .../devtools/views/ErrorBoundary/shared.css   | 24 ++++++++++++++++++-
 3 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index 45441a925df6..63c67afdd9bc 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -21,6 +21,7 @@ type Props = {|
 
 type State = {|
   callStack: string | null,
+  canDismiss: boolean,
   componentStack: string | null,
   errorMessage: string | null,
   hasError: boolean,
@@ -28,6 +29,7 @@ type State = {|
 
 const InitialState: State = {
   callStack: null,
+  canDismiss: false,
   componentStack: null,
   errorMessage: null,
   hasError: false,
@@ -77,13 +79,20 @@ export default class ErrorBoundary extends Component<Props, State> {
 
   render() {
     const {children} = this.props;
-    const {callStack, componentStack, errorMessage, hasError} = this.state;
+    const {
+      callStack,
+      canDismiss,
+      componentStack,
+      errorMessage,
+      hasError,
+    } = this.state;
 
     if (hasError) {
       return (
         <ErrorView
           callStack={callStack}
           componentStack={componentStack}
+          dismissError={canDismiss ? this._dismissError : null}
           errorMessage={errorMessage}>
           <Suspense fallback={<SearchingGitHubIssues />}>
             <SuspendingErrorView
@@ -99,9 +108,16 @@ export default class ErrorBoundary extends Component<Props, State> {
     return children;
   }
 
+  _dismissError = () => {
+    this.setState(InitialState);
+  };
+
   _onStoreError = (error: Error) => {
     if (!this.state.hasError) {
-      this.setState(ErrorBoundary.getDerivedStateFromError(error));
+      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
index 6ec792408fe9..baff24e522e1 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -8,12 +8,15 @@
  */
 
 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,
 |};
 
@@ -21,14 +24,23 @@ export default function ErrorView({
   callStack,
   children,
   componentStack,
+  dismissError = null,
   errorMessage,
 }: Props) {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
       <div className={styles.ErrorInfo}>
-        <div className={styles.Header}>
-          Uncaught Error: {errorMessage || ''}
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>
+            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.Stack}>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
index 267cfad7b7e8..bef5c945c226 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
@@ -37,12 +37,22 @@
   overflow: auto;
 }
 
-.Header {
+.HeaderRow {
+  display: flex;
+  flex-direction: row;
   font-size: var(--font-size-sans-large);
   font-weight: bold;
   color: var(--color-error-text);
 }
 
+.Header {
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
 .Stack {
   margin-top: 0.5rem;
   white-space: pre-wrap;
@@ -75,9 +85,21 @@
 .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;
 }
\ No newline at end of file

From 1e3383a41154cb32d8d6b78b2451ee4dabfcb973 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 08:42:08 -0700
Subject: [PATCH 0544/1603] DevTools: Reload all roots after Fast Refresh force
 remount (#21516)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Works around the corrupted Store state by detecting a broken Fast Refresh remount and forcefully dropping the root and re-mounting the entire tree. This prevents Fibers from getting duplicated in the Store (and in the Components tree). The benefit of this approach is that it doesn't rely on an update or change in behavior to Fast Refresh. (This workaround is pretty dirty, but since it's a DEV-only code path, it's probably okay.)

Note that this change doesn't fix all of the reported issues (see #21442 (comment)) but it does fix some of them.

This commit also slightly refactors the way DevTools assigns and manages unique IDs for Fibers in the backend by removing the indirection of a "primary Fiber" and instead mapping both the primary and alternate.

It also removes the previous cache-on-read behavior of getFiberID and splits the method into three separate functions for different use cases:
* getOrGenerateFiberID – Like the previous function, this method returns an ID or generates and caches a new one if the Fiber hasn't been seen before.
* getFiberIDUnsafe – This function returns an ID if one has already been generated or null if not. (It can be used to e.g. log a message about a Fiber without potentially causing it to leak.)
* getFiberIDThrows – This function returns an ID if one has already been generated or it throws. (It can be used to guarantee expected behavior rather than to silently cause a leak.)
---
 .../FastRefreshDevToolsIntegration-test.js    | 260 +++++++++
 .../__snapshots__/profilingCache-test.js.snap | 510 +++++++++---------
 .../profilingCommitTreeBuilder-test.js.snap   |  12 +-
 .../src/backend/renderer.js                   | 255 ++++++---
 4 files changed, 692 insertions(+), 345 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js

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 000000000000..4e2cdecfb9e6
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
@@ -0,0 +1,260 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+describe('Fast Refresh', () => {
+  let React;
+  let ReactDOM;
+  let ReactFreshRuntime;
+  let act;
+  let babel;
+  let container;
+  let exportsObj;
+  let freshPlugin;
+  let store;
+  let withErrorsOrWarningsIgnored;
+
+  afterEach(() => {
+    jest.resetModules();
+  });
+
+  beforeEach(() => {
+    exportsObj = undefined;
+    container = document.createElement('div');
+
+    babel = require('@babel/core');
+    freshPlugin = require('react-refresh/babel');
+
+    store = global.store;
+
+    React = require('react');
+
+    ReactFreshRuntime = require('react-refresh/runtime');
+    ReactFreshRuntime.injectIntoGlobalHook(global);
+
+    ReactDOM = require('react-dom');
+
+    const utils = require('./utils');
+    act = utils.act;
+    withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
+  });
+
+  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(() => {
+      ReactDOM.render(<Component />, container);
+    });
+    // Module initialization shouldn't be counted as a hot update.
+    expect(ReactFreshRuntime.performReactRefresh()).toBe(null);
+  }
+
+  function patch(source) {
+    const prevExports = exportsObj;
+    execute(source);
+    const nextExports = exportsObj;
+
+    // Check if exported families have changed.
+    // (In a real module system we'd do this for *all* exports.)
+    // For example, this can happen if you convert a class to a function.
+    // Or if you wrap something in a HOC.
+    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(() => {
+        ReactDOM.render(<NextComponent />, container);
+      });
+    }
+    act(() => {
+      const result = ReactFreshRuntime.performReactRefresh();
+      if (!didExportsChange) {
+        // Normally we expect that some components got updated in our tests.
+        expect(result).not.toBe(null);
+      } else {
+        // However, we have tests where we convert functions to classes,
+        // and in those cases it's expected nothing would get updated.
+        // (Instead, the export change branch above would take care of it.)
+      }
+    });
+    expect(ReactFreshRuntime._getMountedRootCount()).toBe(1);
+  }
+
+  function $RefreshReg$(type, id) {
+    ReactFreshRuntime.register(type, id);
+  }
+
+  function $RefreshSig$() {
+    return ReactFreshRuntime.createSignatureFunctionForTransform();
+  }
+
+  it('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 = container.firstChild;
+    expect(container.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(container.firstChild).toBe(element);
+    element = container.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(container.firstChild).not.toBe(element);
+  });
+
+  it('should not break when there are warnings in between patching', () => {
+    withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
+      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 warning during render'], () => {
+      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 warning during render'], () => {
+      patch(`
+      const {useEffect, useState} = React;
+
+      export default function Component() {
+        const [state, setState] = useState(1);
+        useEffect(() => {});
+        console.warn("Expected warning during render");
+        return null;
+      }
+    `);
+    });
+    expect(store).toMatchInlineSnapshot(`
+      ✕ 0, ⚠ 1
+      [root]
+          <Component> ⚠
+    `);
+
+    withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
+      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> ⚠
+    `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index ad1d487ea790..8f07adaaf4da 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -10,14 +10,14 @@ Object {
       "props": null,
       "state": null,
     },
-    3 => Object {
+    4 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
       "props": null,
       "state": null,
     },
-    5 => Object {
+    6 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
@@ -30,14 +30,14 @@ Object {
   "fiberActualDurations": Map {
     1 => 16,
     2 => 16,
-    3 => 1,
-    5 => 1,
+    4 => 1,
+    6 => 1,
   },
   "fiberSelfDurations": Map {
     1 => 0,
     2 => 10,
-    3 => 1,
-    5 => 1,
+    4 => 1,
+    6 => 1,
   },
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
@@ -104,7 +104,7 @@ Object {
 exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
 Object {
   "changeDescriptions": Map {
-    5 => Object {
+    7 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
@@ -115,11 +115,11 @@ Object {
   "duration": 3,
   "effectDuration": null,
   "fiberActualDurations": Map {
-    5 => 3,
+    7 => 3,
     3 => 3,
   },
   "fiberSelfDurations": Map {
-    5 => 3,
+    7 => 3,
     3 => 0,
   },
   "passiveEffectDuration": null,
@@ -147,21 +147,21 @@ Object {
       "props": null,
       "state": null,
     },
-    3 => Object {
+    4 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
       "props": null,
       "state": null,
     },
-    4 => Object {
+    5 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
       "props": null,
       "state": null,
     },
-    5 => Object {
+    6 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
@@ -174,16 +174,16 @@ Object {
   "fiberActualDurations": Map {
     1 => 12,
     2 => 12,
-    3 => 0,
-    4 => 1,
+    4 => 0,
     5 => 1,
+    6 => 1,
   },
   "fiberSelfDurations": Map {
     1 => 0,
     2 => 10,
-    3 => 0,
-    4 => 1,
+    4 => 0,
     5 => 1,
+    6 => 1,
   },
   "passiveEffectDuration": null,
   "priorityLevel": "Normal",
@@ -203,21 +203,21 @@ Object {
 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `
 Object {
   "changeDescriptions": Map {
-    3 => Object {
+    4 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
-    4 => Object {
+    5 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
     },
-    6 => Object {
+    7 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
@@ -237,16 +237,16 @@ Object {
   "duration": 13,
   "effectDuration": null,
   "fiberActualDurations": Map {
-    3 => 0,
-    4 => 1,
-    6 => 2,
+    4 => 0,
+    5 => 1,
+    7 => 2,
     2 => 13,
     1 => 13,
   },
   "fiberSelfDurations": Map {
-    3 => 0,
-    4 => 1,
-    6 => 2,
+    4 => 0,
+    5 => 1,
+    7 => 2,
     2 => 10,
     1 => 0,
   },
@@ -268,7 +268,7 @@ Object {
 exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `
 Object {
   "changeDescriptions": Map {
-    3 => Object {
+    4 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": false,
@@ -288,12 +288,12 @@ Object {
   "duration": 10,
   "effectDuration": null,
   "fiberActualDurations": Map {
-    3 => 0,
+    4 => 0,
     2 => 10,
     1 => 10,
   },
   "fiberSelfDurations": Map {
-    3 => 0,
+    4 => 0,
     2 => 10,
     1 => 0,
   },
@@ -368,7 +368,7 @@ Object {
               },
             ],
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -378,7 +378,7 @@ Object {
               },
             ],
             Array [
-              4,
+              5,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -388,7 +388,7 @@ Object {
               },
             ],
             Array [
-              5,
+              6,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -410,15 +410,15 @@ Object {
               12,
             ],
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
             Array [
-              5,
+              6,
               1,
             ],
           ],
@@ -432,15 +432,15 @@ Object {
               10,
             ],
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
             Array [
-              5,
+              6,
               1,
             ],
           ],
@@ -460,7 +460,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -470,7 +470,7 @@ Object {
               },
             ],
             Array [
-              4,
+              5,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -480,7 +480,7 @@ Object {
               },
             ],
             Array [
-              6,
+              7,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -506,15 +506,15 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
             Array [
-              6,
+              7,
               2,
             ],
             Array [
@@ -528,15 +528,15 @@ Object {
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
             Array [
-              6,
+              7,
               2,
             ],
             Array [
@@ -564,7 +564,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -590,7 +590,7 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
@@ -604,7 +604,7 @@ Object {
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
@@ -723,34 +723,34 @@ Object {
           2,
           12000,
           1,
-          3,
+          4,
           5,
           2,
           2,
           2,
           3,
           4,
-          3,
+          4,
           0,
           1,
-          4,
+          5,
           5,
           2,
           2,
           2,
           4,
           4,
-          4,
+          5,
           1000,
           1,
-          5,
+          6,
           8,
           2,
           2,
           2,
           0,
           4,
-          5,
+          6,
           1000,
         ],
         Array [
@@ -766,14 +766,14 @@ Object {
           1,
           50,
           1,
-          6,
+          7,
           5,
           2,
           2,
           1,
           2,
           4,
-          6,
+          7,
           2000,
           4,
           2,
@@ -781,10 +781,10 @@ Object {
           3,
           2,
           4,
-          3,
           4,
-          6,
           5,
+          7,
+          6,
           4,
           1,
           14000,
@@ -795,16 +795,16 @@ Object {
           0,
           2,
           2,
-          6,
-          4,
+          7,
+          5,
           4,
           2,
           11000,
           3,
           2,
           2,
-          3,
-          5,
+          4,
+          6,
           4,
           1,
           11000,
@@ -815,7 +815,7 @@ Object {
           0,
           2,
           1,
-          3,
+          4,
         ],
       ],
       "rootID": 1,
@@ -834,7 +834,7 @@ Array [
 ]
 `;
 
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 3 1`] = `
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
 Array [
   0,
   1,
@@ -842,20 +842,20 @@ Array [
 ]
 `;
 
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
 Array [
   0,
 ]
 `;
 
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
 Array [
   1,
   2,
 ]
 `;
 
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 7 1`] = `
 Array [
   2,
 ]
@@ -879,7 +879,7 @@ Object {
               },
             ],
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -889,7 +889,7 @@ Object {
               },
             ],
             Array [
-              4,
+              5,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -911,11 +911,11 @@ Object {
               11,
             ],
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
           ],
@@ -929,11 +929,11 @@ Object {
               10,
             ],
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
           ],
@@ -953,7 +953,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -963,7 +963,7 @@ Object {
               },
             ],
             Array [
-              5,
+              6,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -989,11 +989,11 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              5,
+              6,
               1,
             ],
             Array [
@@ -1007,11 +1007,11 @@ Object {
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              5,
+              6,
               1,
             ],
             Array [
@@ -1039,7 +1039,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1049,7 +1049,7 @@ Object {
               },
             ],
             Array [
-              5,
+              6,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1059,7 +1059,7 @@ Object {
               },
             ],
             Array [
-              6,
+              7,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1085,15 +1085,15 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              5,
+              6,
               1,
             ],
             Array [
-              6,
+              7,
               2,
             ],
             Array [
@@ -1107,15 +1107,15 @@ Object {
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              5,
+              6,
               1,
             ],
             Array [
-              6,
+              7,
               2,
             ],
             Array [
@@ -1182,24 +1182,24 @@ Object {
           2,
           11000,
           1,
-          3,
+          4,
           5,
           2,
           2,
           2,
           3,
           4,
-          3,
+          4,
           0,
           1,
-          4,
+          5,
           8,
           2,
           2,
           2,
           0,
           4,
-          4,
+          5,
           1000,
         ],
         Array [
@@ -1215,14 +1215,14 @@ Object {
           1,
           49,
           1,
-          5,
+          6,
           5,
           2,
           2,
           1,
           2,
           4,
-          5,
+          6,
           1000,
           4,
           2,
@@ -1230,9 +1230,9 @@ Object {
           3,
           2,
           3,
-          3,
-          5,
           4,
+          6,
+          5,
           4,
           1,
           12000,
@@ -1250,14 +1250,14 @@ Object {
           1,
           50,
           1,
-          6,
+          7,
           5,
           2,
           2,
           1,
           2,
           4,
-          6,
+          7,
           2000,
           4,
           2,
@@ -1265,10 +1265,10 @@ Object {
           3,
           2,
           4,
-          3,
-          5,
-          6,
           4,
+          6,
+          7,
+          5,
           4,
           1,
           14000,
@@ -1287,21 +1287,21 @@ Object {
   "commitData": Array [
     Object {
       "changeDescriptions": Map {
-        3 => Object {
+        4 => Object {
           "context": null,
           "didHooksChange": false,
           "isFirstMount": false,
           "props": Array [],
           "state": null,
         },
-        4 => Object {
+        5 => Object {
           "context": null,
           "didHooksChange": false,
           "isFirstMount": false,
           "props": Array [],
           "state": null,
         },
-        10 => Object {
+        12 => Object {
           "context": null,
           "didHooksChange": false,
           "isFirstMount": true,
@@ -1321,16 +1321,16 @@ Object {
       "duration": 13,
       "effectDuration": null,
       "fiberActualDurations": Map {
-        3 => 0,
-        4 => 1,
-        10 => 2,
+        4 => 0,
+        5 => 1,
+        12 => 2,
         2 => 13,
         1 => 13,
       },
       "fiberSelfDurations": Map {
-        3 => 0,
-        4 => 1,
-        10 => 2,
+        4 => 0,
+        5 => 1,
+        12 => 2,
         2 => 10,
         1 => 0,
       },
@@ -1349,7 +1349,7 @@ Object {
     },
     Object {
       "changeDescriptions": Map {
-        3 => Object {
+        4 => Object {
           "context": null,
           "didHooksChange": false,
           "isFirstMount": false,
@@ -1369,12 +1369,12 @@ Object {
       "duration": 10,
       "effectDuration": null,
       "fiberActualDurations": Map {
-        3 => 0,
+        4 => 0,
         2 => 10,
         1 => 10,
       },
       "fiberSelfDurations": Map {
-        3 => 0,
+        4 => 0,
         2 => 10,
         1 => 0,
       },
@@ -1431,9 +1431,9 @@ Object {
   "initialTreeBaseDurations": Map {
     1 => 12,
     2 => 12,
-    3 => 0,
-    4 => 1,
+    4 => 0,
     5 => 1,
+    6 => 1,
   },
   "operations": Array [
     Array [
@@ -1449,14 +1449,14 @@ Object {
       1,
       50,
       1,
-      10,
+      12,
       5,
       2,
       2,
       1,
       2,
       4,
-      10,
+      12,
       2000,
       4,
       2,
@@ -1464,10 +1464,10 @@ Object {
       3,
       2,
       4,
-      3,
       4,
-      10,
       5,
+      12,
+      6,
       4,
       1,
       14000,
@@ -1478,16 +1478,16 @@ Object {
       0,
       2,
       2,
-      10,
-      4,
+      12,
+      5,
       4,
       2,
       11000,
       3,
       2,
       2,
-      3,
-      5,
+      4,
+      6,
       4,
       1,
       11000,
@@ -1498,7 +1498,7 @@ Object {
       0,
       2,
       1,
-      3,
+      4,
     ],
   ],
   "rootID": 1,
@@ -1515,9 +1515,9 @@ Object {
     },
     2 => Object {
       "children": Array [
-        3,
         4,
         5,
+        6,
       ],
       "displayName": "Parent",
       "hocDisplayNames": null,
@@ -1525,29 +1525,29 @@ Object {
       "key": null,
       "type": 5,
     },
-    3 => Object {
+    4 => Object {
       "children": Array [],
       "displayName": "Child",
       "hocDisplayNames": null,
-      "id": 3,
+      "id": 4,
       "key": "0",
       "type": 5,
     },
-    4 => Object {
+    5 => Object {
       "children": Array [],
       "displayName": "Child",
       "hocDisplayNames": null,
-      "id": 4,
+      "id": 5,
       "key": "1",
       "type": 5,
     },
-    5 => Object {
+    6 => Object {
       "children": Array [],
       "displayName": "Child",
       "hocDisplayNames": Array [
         "Memo",
       ],
-      "id": 5,
+      "id": 6,
       "key": null,
       "type": 8,
     },
@@ -1560,21 +1560,21 @@ Object {
   "commitData": Array [
     Object {
       "changeDescriptions": Map {
-        12 => Object {
+        14 => Object {
           "context": null,
           "didHooksChange": false,
           "isFirstMount": true,
           "props": null,
           "state": null,
         },
-        13 => Object {
+        16 => Object {
           "context": null,
           "didHooksChange": false,
           "isFirstMount": true,
           "props": null,
           "state": null,
         },
-        14 => Object {
+        17 => Object {
           "context": null,
           "didHooksChange": false,
           "isFirstMount": true,
@@ -1585,16 +1585,16 @@ Object {
       "duration": 11,
       "effectDuration": null,
       "fiberActualDurations": Map {
-        11 => 11,
-        12 => 11,
-        13 => 0,
-        14 => 1,
+        13 => 11,
+        14 => 11,
+        16 => 0,
+        17 => 1,
       },
       "fiberSelfDurations": Map {
-        11 => 0,
-        12 => 10,
         13 => 0,
-        14 => 1,
+        14 => 10,
+        16 => 0,
+        17 => 1,
       },
       "passiveEffectDuration": null,
       "priorityLevel": "Normal",
@@ -1603,7 +1603,7 @@ Object {
         Object {
           "displayName": "Anonymous",
           "hocDisplayNames": null,
-          "id": 11,
+          "id": 13,
           "key": null,
           "type": 11,
         },
@@ -1615,7 +1615,7 @@ Object {
   "operations": Array [
     Array [
       1,
-      11,
+      13,
       15,
       6,
       80,
@@ -1633,46 +1633,46 @@ Object {
       1,
       48,
       1,
-      11,
+      13,
       11,
       1,
       1,
       4,
-      11,
+      13,
       11000,
       1,
-      12,
+      14,
       5,
-      11,
+      13,
       0,
       1,
       0,
       4,
-      12,
+      14,
       11000,
       1,
-      13,
+      16,
       5,
-      12,
-      12,
+      14,
+      14,
       2,
       3,
       4,
-      13,
+      16,
       0,
       1,
-      14,
+      17,
       8,
-      12,
-      12,
+      14,
+      14,
       2,
       0,
       4,
-      14,
+      17,
       1000,
     ],
   ],
-  "rootID": 11,
+  "rootID": 13,
   "snapshots": Map {},
 }
 `;
@@ -1693,7 +1693,7 @@ Object {
         Object {
           "displayName": "Anonymous",
           "hocDisplayNames": null,
-          "id": 6,
+          "id": 7,
           "key": null,
           "type": 11,
         },
@@ -1702,62 +1702,62 @@ Object {
   ],
   "displayName": "Parent",
   "initialTreeBaseDurations": Map {
-    6 => 11,
     7 => 11,
-    8 => 0,
-    9 => 1,
+    8 => 11,
+    10 => 0,
+    11 => 1,
   },
   "operations": Array [
     Array [
       1,
-      6,
+      7,
       0,
       2,
       4,
-      9,
+      11,
+      10,
       8,
       7,
-      6,
     ],
   ],
-  "rootID": 6,
+  "rootID": 7,
   "snapshots": Map {
-    6 => Object {
+    7 => Object {
       "children": Array [
-        7,
+        8,
       ],
       "displayName": null,
       "hocDisplayNames": null,
-      "id": 6,
+      "id": 7,
       "key": null,
       "type": 11,
     },
-    7 => Object {
+    8 => Object {
       "children": Array [
-        8,
-        9,
+        10,
+        11,
       ],
       "displayName": "Parent",
       "hocDisplayNames": null,
-      "id": 7,
+      "id": 8,
       "key": null,
       "type": 5,
     },
-    8 => Object {
+    10 => Object {
       "children": Array [],
       "displayName": "Child",
       "hocDisplayNames": null,
-      "id": 8,
+      "id": 10,
       "key": "0",
       "type": 5,
     },
-    9 => Object {
+    11 => Object {
       "children": Array [],
       "displayName": "Child",
       "hocDisplayNames": Array [
         "Memo",
       ],
-      "id": 9,
+      "id": 11,
       "key": null,
       "type": 8,
     },
@@ -1773,7 +1773,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1783,7 +1783,7 @@ Object {
               },
             ],
             Array [
-              4,
+              5,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1793,7 +1793,7 @@ Object {
               },
             ],
             Array [
-              10,
+              12,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1819,15 +1819,15 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
             Array [
-              10,
+              12,
               2,
             ],
             Array [
@@ -1841,15 +1841,15 @@ Object {
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
-              4,
+              5,
               1,
             ],
             Array [
-              10,
+              12,
               2,
             ],
             Array [
@@ -1877,7 +1877,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1903,7 +1903,7 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
@@ -1917,7 +1917,7 @@ Object {
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
             Array [
@@ -2004,15 +2004,15 @@ Object {
           12,
         ],
         Array [
-          3,
+          4,
           0,
         ],
         Array [
-          4,
+          5,
           1,
         ],
         Array [
-          5,
+          6,
           1,
         ],
       ],
@@ -2030,14 +2030,14 @@ Object {
           1,
           50,
           1,
-          10,
+          12,
           5,
           2,
           2,
           1,
           2,
           4,
-          10,
+          12,
           2000,
           4,
           2,
@@ -2045,10 +2045,10 @@ Object {
           3,
           2,
           4,
-          3,
           4,
-          10,
           5,
+          12,
+          6,
           4,
           1,
           14000,
@@ -2059,16 +2059,16 @@ Object {
           0,
           2,
           2,
-          10,
-          4,
+          12,
+          5,
           4,
           2,
           11000,
           3,
           2,
           2,
-          3,
-          5,
+          4,
+          6,
           4,
           1,
           11000,
@@ -2079,7 +2079,7 @@ Object {
           0,
           2,
           1,
-          3,
+          4,
         ],
       ],
       "rootID": 1,
@@ -2101,9 +2101,9 @@ Object {
           2,
           Object {
             "children": Array [
-              3,
               4,
               5,
+              6,
             ],
             "displayName": "Parent",
             "hocDisplayNames": null,
@@ -2113,36 +2113,36 @@ Object {
           },
         ],
         Array [
-          3,
+          4,
           Object {
             "children": Array [],
             "displayName": "Child",
             "hocDisplayNames": null,
-            "id": 3,
+            "id": 4,
             "key": "0",
             "type": 5,
           },
         ],
         Array [
-          4,
+          5,
           Object {
             "children": Array [],
             "displayName": "Child",
             "hocDisplayNames": null,
-            "id": 4,
+            "id": 5,
             "key": "1",
             "type": 5,
           },
         ],
         Array [
-          5,
+          6,
           Object {
             "children": Array [],
             "displayName": "Child",
             "hocDisplayNames": Array [
               "Memo",
             ],
-            "id": 5,
+            "id": 6,
             "key": null,
             "type": 8,
           },
@@ -2154,7 +2154,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              12,
+              14,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -2164,7 +2164,7 @@ Object {
               },
             ],
             Array [
-              13,
+              16,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -2174,7 +2174,7 @@ Object {
               },
             ],
             Array [
-              14,
+              17,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -2188,37 +2188,37 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              11,
+              13,
               11,
             ],
             Array [
-              12,
+              14,
               11,
             ],
             Array [
-              13,
+              16,
               0,
             ],
             Array [
-              14,
+              17,
               1,
             ],
           ],
           "fiberSelfDurations": Array [
             Array [
-              11,
+              13,
               0,
             ],
             Array [
-              12,
+              14,
               10,
             ],
             Array [
-              13,
+              16,
               0,
             ],
             Array [
-              14,
+              17,
               1,
             ],
           ],
@@ -2229,7 +2229,7 @@ Object {
             Object {
               "displayName": "Anonymous",
               "hocDisplayNames": null,
-              "id": 11,
+              "id": 13,
               "key": null,
               "type": 11,
             },
@@ -2241,7 +2241,7 @@ Object {
       "operations": Array [
         Array [
           1,
-          11,
+          13,
           15,
           6,
           80,
@@ -2259,46 +2259,46 @@ Object {
           1,
           48,
           1,
-          11,
+          13,
           11,
           1,
           1,
           4,
-          11,
+          13,
           11000,
           1,
-          12,
+          14,
           5,
-          11,
+          13,
           0,
           1,
           0,
           4,
-          12,
+          14,
           11000,
           1,
-          13,
+          16,
           5,
-          12,
-          12,
+          14,
+          14,
           2,
           3,
           4,
-          13,
+          16,
           0,
           1,
-          14,
+          17,
           8,
-          12,
-          12,
+          14,
+          14,
           2,
           0,
           4,
-          14,
+          17,
           1000,
         ],
       ],
-      "rootID": 11,
+      "rootID": 13,
       "snapshots": Array [],
     },
     Object {
@@ -2316,7 +2316,7 @@ Object {
             Object {
               "displayName": "Anonymous",
               "hocDisplayNames": null,
-              "id": 6,
+              "id": 7,
               "key": null,
               "type": 11,
             },
@@ -2326,84 +2326,84 @@ Object {
       "displayName": "Parent",
       "initialTreeBaseDurations": Array [
         Array [
-          6,
+          7,
           11,
         ],
         Array [
-          7,
+          8,
           11,
         ],
         Array [
-          8,
+          10,
           0,
         ],
         Array [
-          9,
+          11,
           1,
         ],
       ],
       "operations": Array [
         Array [
           1,
-          6,
+          7,
           0,
           2,
           4,
-          9,
+          11,
+          10,
           8,
           7,
-          6,
         ],
       ],
-      "rootID": 6,
+      "rootID": 7,
       "snapshots": Array [
         Array [
-          6,
+          7,
           Object {
             "children": Array [
-              7,
+              8,
             ],
             "displayName": null,
             "hocDisplayNames": null,
-            "id": 6,
+            "id": 7,
             "key": null,
             "type": 11,
           },
         ],
         Array [
-          7,
+          8,
           Object {
             "children": Array [
-              8,
-              9,
+              10,
+              11,
             ],
             "displayName": "Parent",
             "hocDisplayNames": null,
-            "id": 7,
+            "id": 8,
             "key": null,
             "type": 5,
           },
         ],
         Array [
-          8,
+          10,
           Object {
             "children": Array [],
             "displayName": "Child",
             "hocDisplayNames": null,
-            "id": 8,
+            "id": 10,
             "key": "0",
             "type": 5,
           },
         ],
         Array [
-          9,
+          11,
           Object {
             "children": Array [],
             "displayName": "Child",
             "hocDisplayNames": Array [
               "Memo",
             ],
-            "id": 9,
+            "id": 11,
             "key": null,
             "type": 8,
           },
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
index 1fa419013d98..43f3f91c7a24 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
@@ -71,7 +71,7 @@ Object {
     },
     3 => Object {
       "children": Array [
-        4,
+        6,
       ],
       "displayName": "Suspense",
       "hocDisplayNames": null,
@@ -81,11 +81,11 @@ Object {
       "treeBaseDuration": 0,
       "type": 12,
     },
-    4 => Object {
+    6 => Object {
       "children": Array [],
       "displayName": "LazyInnerComponent",
       "hocDisplayNames": null,
-      "id": 4,
+      "id": 6,
       "key": null,
       "parentID": 3,
       "treeBaseDuration": 0,
@@ -167,7 +167,7 @@ Object {
     },
     3 => Object {
       "children": Array [
-        4,
+        6,
       ],
       "displayName": "Suspense",
       "hocDisplayNames": null,
@@ -177,11 +177,11 @@ Object {
       "treeBaseDuration": 0,
       "type": 12,
     },
-    4 => Object {
+    6 => Object {
       "children": Array [],
       "displayName": "LazyInnerComponent",
       "hocDisplayNames": null,
-      "id": 4,
+      "id": 6,
       "key": null,
       "parentID": 3,
       "treeBaseDuration": 0,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 3afbbf3dd443..0ef641e41021 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -631,12 +631,16 @@ export function attach(
 
     // Note that by calling these functions we may be creating the ID for the first time.
     // If the Fiber is then never mounted, we are responsible for cleaning up after ourselves.
-    // This is important because getPrimaryFiber() stores a Fiber in the primaryFibers Set.
-    // If a Fiber never mounts, and we don't clean up after this code, we could leak.
+    // This is important because getOrGenerateFiberID() stores a Fiber in a couple of local Maps.
+    // If the Fiber never mounts and we don't clean up after this code, we could leak.
     // Fortunately we would only leak Fibers that have errors/warnings associated with them,
     // which is hopefully only a small set and only in DEV mode– but this is still not great.
     // We should clean up Fibers like this when flushing; see recordPendingErrorsAndWarnings().
-    const fiberID = getFiberID(getPrimaryFiber(fiber));
+    const fiberID = getOrGenerateFiberID(fiber);
+
+    if (__DEBUG__) {
+      debug('onErrorOrWarning', fiber, null, `${type}: "${message}"`);
+    }
 
     // Mark this Fiber as needed its warning/error count updated during the next flush.
     fibersWithChangedErrorOrWarningCounts.add(fiberID);
@@ -702,19 +706,20 @@ export function attach(
     if (__DEBUG__) {
       const displayName =
         fiber.tag + ':' + (getDisplayNameForFiber(fiber) || 'null');
-      const id = getFiberID(fiber);
+
+      const maybeID = getFiberIDUnsafe(fiber) || '<no id>';
       const parentDisplayName = parentFiber
         ? parentFiber.tag +
           ':' +
           (getDisplayNameForFiber(parentFiber) || 'null')
         : '';
-      const parentID = parentFiber ? getFiberID(parentFiber) : '';
-      // NOTE: calling getFiberID or getPrimaryFiber is unsafe here
-      // because it will put them in the map. For now, we'll omit them.
-      // TODO: better debugging story for this.
+      const maybeParentID = parentFiber
+        ? getFiberIDUnsafe(parentFiber) || '<no-id>'
+        : '';
+
       console.log(
-        `[renderer] %c${name} %c${displayName} (${id}) %c${
-          parentFiber ? `${parentDisplayName} (${parentID})` : ''
+        `[renderer] %c${name} %c${displayName} (${maybeID}) %c${
+          parentFiber ? `${parentDisplayName} (${maybeParentID})` : ''
         } %c${extraString}`,
         'color: red; font-weight: bold;',
         'color: blue;',
@@ -797,9 +802,15 @@ export function attach(
       throw Error('Cannot modify filter preferences while profiling');
     }
 
+    unmountAndRemountAllRoots(() => {
+      applyComponentFilters(componentFilters);
+    });
+  }
+
+  function unmountAndRemountAllRoots(callback?: Function) {
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
-      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      currentRootID = getOrGenerateFiberID(root.current);
       // The TREE_OPERATION_REMOVE_ROOT operation serves two purposes:
       // 1. It avoids sending unnecessary bridge traffic to clear a root.
       // 2. It preserves Fiber IDs when remounting (below) which in turn ID to error/warning mapping.
@@ -808,14 +819,16 @@ export function attach(
       currentRootID = -1;
     });
 
-    applyComponentFilters(componentFilters);
+    if (typeof callback === 'function') {
+      callback();
+    }
 
     // Reset pseudo counters so that new path selections will be persisted.
     rootDisplayNameCounter.clear();
 
     // Recursively re-mount all roots with new filter criteria applied.
     hook.getFiberRoots(rendererID).forEach(root => {
-      currentRootID = getFiberID(getPrimaryFiber(root.current));
+      currentRootID = getOrGenerateFiberID(root.current);
       setRootPseudoKey(currentRootID, root.current);
       mountFiberRecursively(root.current, null, false, false);
       flushPendingEvents(root);
@@ -946,25 +959,16 @@ export function attach(
     }
   }
 
-  // This is a slightly annoying indirection.
-  // It is currently necessary because DevTools wants to use unique objects as keys for instances.
-  // However fibers have two versions.
-  // We use this set to remember first encountered fiber for each conceptual instance.
-  function getPrimaryFiber(fiber: Fiber): Fiber {
-    if (primaryFibers.has(fiber)) {
-      return fiber;
-    }
-    const {alternate} = fiber;
-    if (alternate != null && primaryFibers.has(alternate)) {
-      return alternate;
-    }
-    primaryFibers.add(fiber);
-    return fiber;
-  }
-
+  // Map of one or more Fibers in a pair to their unique id number.
+  // We track both Fibers to support Fast Refresh,
+  // which may forcefully replace one of the pair as part of hot reloading.
+  // In that case it's still important to be able to locate the previous ID during subsequent renders.
   const fiberToIDMap: Map<Fiber, number> = new Map();
-  const idToFiberMap: Map<number, Fiber> = new Map();
-  const primaryFibers: Set<Fiber> = new Set();
+
+  // Map of id to one (arbitrary) Fiber in a pair.
+  // 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 idToArbitraryFiberMap: Map<number, Fiber> = new Map();
 
   // When profiling is supported, we store the latest tree base durations for each Fiber.
   // This is so that we can quickly capture a snapshot of those values if profiling starts.
@@ -979,13 +983,84 @@ export function attach(
   // When a mount or update is in progress, this value tracks the root that is being operated on.
   let currentRootID: number = -1;
 
-  function getFiberID(primaryFiber: Fiber): number {
-    if (!fiberToIDMap.has(primaryFiber)) {
-      const id = getUID();
-      fiberToIDMap.set(primaryFiber, id);
-      idToFiberMap.set(id, primaryFiber);
+  // Returns the unique ID for a Fiber or generates and caches a new one if the Fiber hasn't been seen before.
+  // Once this method has been called for a Fiber, untrackFiberID() should always be called later to avoid leaking.
+  function getOrGenerateFiberID(fiber: Fiber): number {
+    let id = null;
+    if (fiberToIDMap.has(fiber)) {
+      id = fiberToIDMap.get(fiber);
+    } else {
+      const {alternate} = fiber;
+      if (alternate !== null && fiberToIDMap.has(alternate)) {
+        id = fiberToIDMap.get(alternate);
+      }
+    }
+
+    if (id === null) {
+      id = getUID();
+    }
+
+    // This refinement is for Flow purposes only.
+    const refinedID = ((id: any): number);
+
+    // Make sure we're tracking this Fiber
+    // e.g. if it just mounted or an error was logged during initial render.
+    if (!fiberToIDMap.has(fiber)) {
+      fiberToIDMap.set(fiber, refinedID);
+      idToArbitraryFiberMap.set(refinedID, fiber);
+    }
+
+    // Also make sure we're tracking its alternate,
+    // e.g. in case this is the first update after mount.
+    const {alternate} = fiber;
+    if (alternate !== null) {
+      if (!fiberToIDMap.has(alternate)) {
+        fiberToIDMap.set(alternate, refinedID);
+      }
+    }
+
+    return refinedID;
+  }
+
+  // Returns an ID if one has already been generated for the Fiber or throws.
+  function getFiberIDThrows(fiber: Fiber): number {
+    const maybeID = getFiberIDUnsafe(fiber);
+    if (maybeID !== null) {
+      return maybeID;
+    }
+    throw Error(
+      `Could not find ID for Fiber "${getDisplayNameForFiber(fiber) || ''}"`,
+    );
+  }
+
+  // Returns an ID if one has already been generated for the Fiber or null if one has not been generated.
+  // Use this method while e.g. logging to avoid over-retaining Fibers.
+  function getFiberIDUnsafe(fiber: Fiber): number | null {
+    if (fiberToIDMap.has(fiber)) {
+      return ((fiberToIDMap.get(fiber): any): number);
+    } else {
+      const {alternate} = fiber;
+      if (alternate !== null && fiberToIDMap.has(alternate)) {
+        return ((fiberToIDMap.get(alternate): any): number);
+      }
+    }
+    return null;
+  }
+
+  // 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 untrackFiberID(fiber: Fiber) {
+    const fiberID = getFiberIDUnsafe(fiber);
+    if (fiberID !== null) {
+      idToArbitraryFiberMap.delete(fiberID);
+    }
+
+    fiberToIDMap.delete(fiber);
+
+    const {alternate} = fiber;
+    if (alternate !== null) {
+      fiberToIDMap.delete(alternate);
     }
-    return ((fiberToIDMap.get(primaryFiber): any): number);
   }
 
   function getChangeDescription(
@@ -1046,7 +1121,7 @@ export function attach(
     switch (getElementTypeForFiber(fiber)) {
       case ElementTypeClass:
         if (idToContextsMap !== null) {
-          const id = getFiberID(getPrimaryFiber(fiber));
+          const id = getFiberIDThrows(fiber);
           const contexts = getContextsForFiber(fiber);
           if (contexts !== null) {
             idToContextsMap.set(id, contexts);
@@ -1102,7 +1177,7 @@ export function attach(
     switch (getElementTypeForFiber(fiber)) {
       case ElementTypeClass:
         if (idToContextsMap !== null) {
-          const id = getFiberID(getPrimaryFiber(fiber));
+          const id = getFiberIDThrows(fiber);
           const prevContexts = idToContextsMap.has(id)
             ? idToContextsMap.get(id)
             : null;
@@ -1370,15 +1445,13 @@ export function attach(
     clearPendingErrorsAndWarningsAfterDelay();
 
     fibersWithChangedErrorOrWarningCounts.forEach(fiberID => {
-      const fiber = idToFiberMap.get(fiberID);
+      const fiber = idToArbitraryFiberMap.get(fiberID);
       if (fiber != null) {
         // Don't send updates for Fibers that didn't mount due to e.g. Suspense or an error boundary.
         // We may also need to clean up after ourselves to avoid leaks.
         // See inline comments in onErrorOrWarning() for more info.
         if (isFiberMountedImpl(fiber) !== MOUNTED) {
-          fiberToIDMap.delete(fiber);
-          idToFiberMap.delete(fiberID);
-          primaryFibers.delete(fiber);
+          untrackFiberID(fiber);
           return;
         }
 
@@ -1539,7 +1612,7 @@ export function attach(
     }
 
     const isRoot = fiber.tag === HostRoot;
-    const id = getFiberID(getPrimaryFiber(fiber));
+    const id = getOrGenerateFiberID(fiber);
 
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
@@ -1562,11 +1635,8 @@ export function attach(
       const elementType = getElementTypeForFiber(fiber);
       const {_debugOwner} = fiber;
 
-      const ownerID =
-        _debugOwner != null ? getFiberID(getPrimaryFiber(_debugOwner)) : 0;
-      const parentID = parentFiber
-        ? getFiberID(getPrimaryFiber(parentFiber))
-        : 0;
+      const ownerID = _debugOwner != null ? getFiberIDThrows(_debugOwner) : 0;
+      const parentID = parentFiber ? getFiberIDThrows(parentFiber) : 0;
 
       const displayNameStringID = getStringID(displayName);
 
@@ -1601,6 +1671,20 @@ export function attach(
       );
     }
 
+    const unsafeID = getFiberIDUnsafe(fiber);
+    if (fiber._debugNeedsRemount) {
+      if (unsafeID === null) {
+        // This inidicates a case we can't recover from:
+        // Fast Refresh has force remounted a component in a way that we don't have an id for.
+        // We could throw but that's a bad user experience.
+        // Or we could ignore the unmount but then Store might end up with a duplicate node.
+        // So a fallback is to completely reset the Store.
+        // This is costly but since Fast Refresh is only used in DEV builds, it should be okay.
+        setTimeout(unmountAndRemountAllRoots, 0);
+        return;
+      }
+    }
+
     if (trackedPathMatchFiber !== null) {
       // We're in the process of trying to restore previous selection.
       // If this fiber matched but is being unmounted, there's no use trying.
@@ -1613,20 +1697,18 @@ export function attach(
       }
     }
 
-    const isRoot = fiber.tag === HostRoot;
-    const primaryFiber = getPrimaryFiber(fiber);
-    if (!fiberToIDMap.has(primaryFiber)) {
+    if (unsafeID === null) {
       // If we've never seen this Fiber, it might be inside of a legacy render Suspense fragment (so the store is not even aware of it).
       // In that case we can just ignore it or it will cause errors later on.
       // One example of this is a Lazy component that never resolves before being unmounted.
       //
       // TODO: This is fragile and can obscure actual bugs.
-      //
-      // Calling getPrimaryFiber() lazily adds fibers to the Map, so clean up after ourselves before returning.
-      primaryFibers.delete(primaryFiber);
       return;
     }
-    const id = getFiberID(primaryFiber);
+
+    // Flow refinement.
+    const id = ((unsafeID: any): number);
+    const isRoot = fiber.tag === HostRoot;
     if (isRoot) {
       // Roots must be removed only after all children (pending and simulated) have been removed.
       // So we track it separately.
@@ -1641,14 +1723,15 @@ export function attach(
         pendingRealUnmountedIDs.push(id);
       }
     }
-    fiberToIDMap.delete(primaryFiber);
-    idToFiberMap.delete(id);
-    primaryFibers.delete(primaryFiber);
 
-    const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
-    if (isProfilingSupported) {
-      idToRootMap.delete(id);
-      idToTreeBaseDurationMap.delete(id);
+    if (!fiber._debugNeedsRemount) {
+      untrackFiberID(fiber);
+
+      const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
+      if (isProfilingSupported) {
+        idToRootMap.delete(id);
+        idToTreeBaseDurationMap.delete(id);
+      }
     }
   }
 
@@ -1675,6 +1758,9 @@ export function attach(
       const shouldIncludeInTree = !shouldFilterFiber(fiber);
       if (shouldIncludeInTree) {
         recordMount(fiber, parentFiber);
+      } else {
+        // Generate an ID even for filtered Fibers, in case it's needed later (e.g. for Profiling).
+        getOrGenerateFiberID(fiber);
       }
 
       if (traceUpdatesEnabled) {
@@ -1785,7 +1871,7 @@ export function attach(
   }
 
   function recordProfilingDurations(fiber: Fiber) {
-    const id = getFiberID(getPrimaryFiber(fiber));
+    const id = getFiberIDThrows(fiber);
     const {actualDuration, treeBaseDuration} = fiber;
 
     idToTreeBaseDurationMap.set(id, treeBaseDuration || 0);
@@ -1873,7 +1959,7 @@ export function attach(
       return;
     }
     pushOperation(TREE_OPERATION_REORDER_CHILDREN);
-    pushOperation(getFiberID(getPrimaryFiber(fiber)));
+    pushOperation(getFiberIDThrows(fiber));
     pushOperation(numChildren);
     for (let i = 0; i < nextChildren.length; i++) {
       pushOperation(nextChildren[i]);
@@ -1885,7 +1971,7 @@ export function attach(
     nextChildren: Array<number>,
   ) {
     if (!shouldFilterFiber(fiber)) {
-      nextChildren.push(getFiberID(getPrimaryFiber(fiber)));
+      nextChildren.push(getFiberIDThrows(fiber));
     } else {
       let child = fiber.child;
       const isTimedOutSuspense =
@@ -1923,6 +2009,8 @@ export function attach(
       debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
 
+    const id = getOrGenerateFiberID(nextFiber);
+
     if (traceUpdatesEnabled) {
       const elementType = getElementTypeForFiber(nextFiber);
       if (traceNearestHostComponentUpdate) {
@@ -1948,8 +2036,7 @@ export function attach(
 
     if (
       mostRecentlyInspectedElement !== null &&
-      mostRecentlyInspectedElement.id ===
-        getFiberID(getPrimaryFiber(nextFiber)) &&
+      mostRecentlyInspectedElement.id === id &&
       didFiberRender(prevFiber, nextFiber)
     ) {
       // If this Fiber has updated, clear cached inspected data.
@@ -2093,7 +2180,7 @@ export function attach(
           // we should fall back to recursively marking the nearest host descendants for highlight.
           if (traceNearestHostComponentUpdate) {
             const hostFibers = findAllCurrentHostFibers(
-              getFiberID(getPrimaryFiber(nextFiber)),
+              getFiberIDThrows(nextFiber),
             );
             hostFibers.forEach(hostFiber => {
               traceUpdatesForNodes.add(hostFiber.stateNode);
@@ -2177,7 +2264,7 @@ export function attach(
       }
       // If we have not been profiling, then we can just walk the tree and build up its current state as-is.
       hook.getFiberRoots(rendererID).forEach(root => {
-        currentRootID = getFiberID(getPrimaryFiber(root.current));
+        currentRootID = getOrGenerateFiberID(root.current);
         setRootPseudoKey(currentRootID, root.current);
 
         // Handle multi-renderer edge-case where only some v16 renderers support profiling.
@@ -2232,7 +2319,7 @@ export function attach(
     const current = root.current;
     const alternate = current.alternate;
 
-    currentRootID = getFiberID(getPrimaryFiber(current));
+    currentRootID = getOrGenerateFiberID(current);
 
     // Before the traversals, remember to start tracking
     // our path in case we have selection to restore.
@@ -2378,7 +2465,7 @@ export function attach(
   }
 
   function getDisplayNameForFiberID(id) {
-    const fiber = idToFiberMap.get(id);
+    const fiber = idToArbitraryFiberMap.get(id);
     return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null;
   }
 
@@ -2393,7 +2480,7 @@ export function attach(
           fiber = fiber.return;
         }
       }
-      return getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
+      return getFiberIDThrows(((fiber: any): Fiber));
     }
     return null;
   }
@@ -2463,7 +2550,7 @@ export function attach(
   // It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).
   // BEGIN copied code
   function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
-    const fiber = idToFiberMap.get(id);
+    const fiber = idToArbitraryFiberMap.get(id);
     if (fiber == null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return null;
@@ -2625,7 +2712,7 @@ export function attach(
   }
 
   function prepareViewElementSource(id: number): void {
-    const fiber = idToFiberMap.get(id);
+    const fiber = idToArbitraryFiberMap.get(id);
     if (fiber == null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return;
@@ -2659,7 +2746,7 @@ export function attach(
   function fiberToSerializedElement(fiber: Fiber): SerializedElement {
     return {
       displayName: getDisplayNameForFiber(fiber) || 'Anonymous',
-      id: getFiberID(getPrimaryFiber(fiber)),
+      id: getFiberIDThrows(fiber),
       key: fiber.key,
       type: getElementTypeForFiber(fiber),
     };
@@ -2990,7 +3077,7 @@ export function attach(
   function updateSelectedElement(inspectedElement: InspectedElement): void {
     const {hooks, id, props} = inspectedElement;
 
-    const fiber = idToFiberMap.get(id);
+    const fiber = idToArbitraryFiberMap.get(id);
     if (fiber == null) {
       console.warn(`Could not find Fiber with id "${id}"`);
       return;
@@ -3508,7 +3595,7 @@ export function attach(
     idToContextsMap = new Map();
 
     hook.getFiberRoots(rendererID).forEach(root => {
-      const rootID = getFiberID(getPrimaryFiber(root.current));
+      const rootID = getFiberIDThrows(root.current);
       ((displayNamesByRootID: any): DisplayNamesByRootID).set(
         rootID,
         getDisplayNameForRoot(root.current),
@@ -3551,8 +3638,8 @@ export function attach(
 
   const forceFallbackForSuspenseIDs = new Set();
   function shouldSuspendFiberAccordingToSet(fiber) {
-    const id = getFiberID(getPrimaryFiber(((fiber: any): Fiber)));
-    return forceFallbackForSuspenseIDs.has(id);
+    const maybeID = getFiberIDUnsafe(((fiber: any): Fiber));
+    return maybeID !== null && forceFallbackForSuspenseIDs.has(maybeID);
   }
 
   function overrideSuspense(id, forceFallback) {
@@ -3577,7 +3664,7 @@ export function attach(
         setSuspenseHandler(shouldSuspendFiberAlwaysFalse);
       }
     }
-    const fiber = idToFiberMap.get(id);
+    const fiber = idToArbitraryFiberMap.get(id);
     if (fiber != null) {
       scheduleUpdate(fiber);
     }
@@ -3728,7 +3815,7 @@ export function attach(
       case HostRoot:
         // Roots don't have a real displayName, index, or key.
         // Instead, we'll use the pseudo key (childDisplayName:indexWithThatName).
-        const id = getFiberID(getPrimaryFiber(fiber));
+        const id = getFiberIDThrows(fiber);
         const pseudoKey = rootPseudoKeys.get(id);
         if (pseudoKey === undefined) {
           throw new Error('Expected mounted root to have known pseudo key.');
@@ -3753,7 +3840,7 @@ export function attach(
   // The return path will contain Fibers that are "invisible" to the store
   // because their keys and indexes are important to restoring the selection.
   function getPathForElement(id: number): Array<PathFrame> | null {
-    let fiber = idToFiberMap.get(id);
+    let fiber = idToArbitraryFiberMap.get(id);
     if (fiber == null) {
       return null;
     }
@@ -3784,7 +3871,7 @@ export function attach(
       return null;
     }
     return {
-      id: getFiberID(getPrimaryFiber(fiber)),
+      id: getFiberIDThrows(fiber),
       isFullMatch: trackedPathMatchDepth === trackedPath.length - 1,
     };
   }

From 63927e08438e8a52b41840bd583a07b3ceb2956e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 08:46:04 -0700
Subject: [PATCH 0545/1603] Fixed another Symbol concatenation issue with
 DevTools format() util (#21521)

---
 .../src/__tests__/utils-test.js               | 31 ++++++++
 .../src/backend/utils.js                      | 70 +++++++++++--------
 2 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js
index f2d559485b2c..3ff01c5ef960 100644
--- a/packages/react-devtools-shared/src/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -11,6 +11,7 @@ import {
   getDisplayName,
   getDisplayNameForReactElement,
 } from 'react-devtools-shared/src/utils';
+import {format} from 'react-devtools-shared/src/backend/utils';
 import {
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_STRICT_MODE_TYPE as StrictMode,
@@ -45,6 +46,7 @@ describe('utils', () => {
       expect(getDisplayName(FauxComponent, 'Fallback')).toEqual('Fallback');
     });
   });
+
   describe('getDisplayNameForReactElement', () => {
     it('should return correct display name for an element with function type', () => {
       function FauxComponent() {}
@@ -54,29 +56,58 @@ describe('utils', () => {
         'OverrideDisplayName',
       );
     });
+
     it('should return correct display name for an element with a type of StrictMode', () => {
       const element = createElement(StrictMode);
       expect(getDisplayNameForReactElement(element)).toEqual('StrictMode');
     });
+
     it('should return correct display name for an element with a type of SuspenseList', () => {
       const element = createElement(SuspenseList);
       expect(getDisplayNameForReactElement(element)).toEqual('SuspenseList');
     });
+
     it('should return NotImplementedInDevtools for an element with invalid symbol type', () => {
       const element = createElement(Symbol('foo'));
       expect(getDisplayNameForReactElement(element)).toEqual(
         'NotImplementedInDevtools',
       );
     });
+
     it('should return NotImplementedInDevtools for an element with invalid type', () => {
       const element = createElement(true);
       expect(getDisplayNameForReactElement(element)).toEqual(
         'NotImplementedInDevtools',
       );
     });
+
     it('should return Element for null type', () => {
       const element = createElement();
       expect(getDisplayNameForReactElement(element)).toEqual('Element');
     });
   });
+
+  describe('format', () => {
+    it('should format simple strings', () => {
+      expect(format('a', 'b', 'c')).toEqual('a b c');
+    });
+
+    it('should format multiple argument types', () => {
+      expect(format('abc', 123, true)).toEqual('abc 123 true');
+    });
+
+    it('should support string substitutions', () => {
+      expect(format('a %s b %s c', 123, true)).toEqual('a 123 b true c');
+    });
+
+    it('should gracefully handle Symbol types', () => {
+      expect(format(Symbol('a'), 'b', Symbol('c'))).toEqual(
+        'Symbol(a) b Symbol(c)',
+      );
+    });
+
+    it('should gracefully handle Symbol type for the first argument', () => {
+      expect(format(Symbol('abc'), 123)).toEqual('Symbol(abc) 123');
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 22f70e32e7d0..60fabfa03c89 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -163,43 +163,53 @@ export function format(
   maybeMessage: any,
   ...inputArgs: $ReadOnlyArray<any>
 ): string {
-  if (typeof maybeMessage !== 'string') {
-    return [maybeMessage, ...inputArgs].join(' ');
-  }
-
-  const re = /(%?)(%([jds]))/g;
   const args = inputArgs.slice();
-  let formatted: string = maybeMessage;
 
-  if (args.length) {
-    formatted = formatted.replace(re, (match, escaped, ptn, flag) => {
-      let arg = args.shift();
-      switch (flag) {
-        case 's':
-          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;
-    });
+  // Symbols cannot be concatenated with Strings.
+  let formatted: string =
+    typeof maybeMessage === 'symbol'
+      ? maybeMessage.toString()
+      : '' + maybeMessage;
+
+  // If the first argument is a string, check for substitutions.
+  if (typeof maybeMessage === 'string') {
+    if (args.length) {
+      const REGEXP = /(%?)(%([jds]))/g;
+
+      formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+        let arg = args.shift();
+        switch (flag) {
+          case 's':
+            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 remain after formatting
+  // Arguments that remain after formatting.
   if (args.length) {
-    formatted += ' ' + args.join(' ');
+    for (let i = 0; i < args.length; i++) {
+      const arg = args[i];
+
+      // Symbols cannot be concatenated with Strings.
+      formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+    }
   }
 
-  // update escaped %% values
+  // Update escaped %% values.
   formatted = formatted.replace(/%{2,2}/g, '%');
 
   return '' + formatted;

From 4d402cdda007f4c0f32336111f9debc8edc18eb2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 13:23:06 -0400
Subject: [PATCH 0546/1603] Preparing DevTools 4.13.2 -> 4.13.3 for release

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 9 +++++++++
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index e5e4133dce88..1f8ff5679dc3 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.13.2",
+  "version": "4.13.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index e9805236a125..b8e59e0d3305 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.13.2",
-  "version_name": "4.13.2",
+  "version": "4.13.3",
+  "version_name": "4.13.3",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 1a0c6cce657d..2a89a41b7a6e 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.13.2",
-  "version_name": "4.13.2",
+  "version": "4.13.3",
+  "version_name": "4.13.3",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index e9c9f1cf912b..c9cffa915224 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.13.2",
+  "version": "4.13.3",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 164e80e3ea53..ff72b279e70b 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.13.2",
+  "version": "4.13.3",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 6f675b4662cb..2c7f24575242 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,15 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 4.13.3 (May 18, 2021)
+#### 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))
+* 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))
+* 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 8a4778b7d7cd..c9e8d06fa093 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.13.2",
+  "version": "4.13.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.13.2",
+    "react-devtools-core": "4.13.3",
     "update-notifier": "^2.1.0"
   }
 }

From 343776fc9071f9e8c8a1dee0166c033bf381f04d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 13:25:29 -0400
Subject: [PATCH 0547/1603] Added React entry-points change to DevTools
 changelog

---
 packages/react-devtools/CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 2c7f24575242..c6810b188cee 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -10,6 +10,9 @@
 </details>
 
 ## 4.13.3 (May 18, 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))
 * 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))

From b15bf2b2f1effb6f760effac9f48c5901622f27b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 13:43:33 -0700
Subject: [PATCH 0548/1603] DevTools bugfix for useState() with hasOwnProperty
 key (#21524)

---
 .../src/__tests__/profilerStore-test.js       | 32 +++++++++++++++++++
 .../src/backend/renderer.js                   | 19 ++++++-----
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index dca154ad170c..7799756aed85 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -135,4 +135,36 @@ describe('ProfilerStore', () => {
       });
     }).toThrow('Cannot modify filter preferences while profiling');
   });
+
+  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;
+    };
+
+    const container = document.createElement('div');
+
+    // This element has to be in the <body> for the event system to work.
+    document.body.appendChild(container);
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    ReactDOM.render(<ControlledInput />, container);
+
+    utils.act(() => store.profilerStore.startProfiling());
+    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);
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 0ef641e41021..fbbac1bcdc6d 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1221,15 +1221,18 @@ export function attach(
   }
 
   function isEffect(memoizedState) {
+    if (memoizedState === null || typeof memoizedState !== 'object') {
+      return false;
+    }
+    const {deps} = memoizedState;
+    const hasOwnProperty = Object.prototype.hasOwnProperty.bind(memoizedState);
     return (
-      memoizedState !== null &&
-      typeof memoizedState === 'object' &&
-      memoizedState.hasOwnProperty('tag') &&
-      memoizedState.hasOwnProperty('create') &&
-      memoizedState.hasOwnProperty('destroy') &&
-      memoizedState.hasOwnProperty('deps') &&
-      (memoizedState.deps === null || isArray(memoizedState.deps)) &&
-      memoizedState.hasOwnProperty('next')
+      hasOwnProperty('create') &&
+      hasOwnProperty('destroy') &&
+      hasOwnProperty('deps') &&
+      hasOwnProperty('next') &&
+      hasOwnProperty('tag') &&
+      (deps === null || isArray(deps))
     );
   }
 

From d6604ac0318f2ee139492d8dce64d6427e921658 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 May 2021 19:44:29 -0700
Subject: [PATCH 0549/1603] Account for another DevTools + Fast Refresh edge
 case (#21523)

DevTools now 'untrack' Fibers (cleans up the ID-to-Fiber mapping) after a slight delay in order to support a Fast Refresh edge case:
1. Component type is updated and Fast Refresh schedules an update+remount.
2. flushPendingErrorsAndWarningsAfterDelay() runs, sees the old Fiber is no longer mounted (it's been disconnected by Fast Refresh), and calls untrackFiberID() to clear it from the Map.
3. React flushes pending passive effects before it runs the next render, which logs an error or warning, which causes a new ID to be generated for this Fiber.
4. DevTools now tries to unmount the old Component with the new ID.

The underlying problem here is the premature clearing of the Fiber ID, but DevTools has no way to detect that a given Fiber has been scheduled for Fast Refresh. (The '_debugNeedsRemount' flag won't necessarily be set.)

The best we can do is to delay untracking by a small amount, and give React time to process the Fast Refresh delay.
---
 .../FastRefreshDevToolsIntegration-test.js    | 26 ++---
 .../src/backend/renderer.js                   | 98 ++++++++++++++++---
 packages/react-devtools/CHANGELOG.md          |  2 +-
 3 files changed, 98 insertions(+), 28 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
index 4e2cdecfb9e6..6b94016148db 100644
--- a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
+++ b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
@@ -188,13 +188,13 @@ describe('Fast Refresh', () => {
   });
 
   it('should not break when there are warnings in between patching', () => {
-    withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
       render(`
       const {useState} = React;
 
       export default function Component() {
         const [state, setState] = useState(1);
-        console.warn("Expected warning during render");
+        console.warn("Expected: warning during render");
         return null;
       }
     `);
@@ -205,13 +205,13 @@ describe('Fast Refresh', () => {
           <Component> ⚠
     `);
 
-    withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
       patch(`
       const {useEffect, useState} = React;
 
       export default function Component() {
         const [state, setState] = useState(1);
-        console.warn("Expected warning during render");
+        console.warn("Expected: warning during render");
         return null;
       }
     `);
@@ -222,31 +222,33 @@ describe('Fast Refresh', () => {
           <Component> ⚠
     `);
 
-    withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
       patch(`
       const {useEffect, useState} = React;
 
       export default function Component() {
         const [state, setState] = useState(1);
-        useEffect(() => {});
-        console.warn("Expected warning during render");
+        useEffect(() => {
+          console.error("Expected: error during effect");
+        });
+        console.warn("Expected: warning during render");
         return null;
       }
     `);
     });
     expect(store).toMatchInlineSnapshot(`
-      ✕ 0, ⚠ 1
+      ✕ 1, ⚠ 1
       [root]
-          <Component> ⚠
+          <Component> ✕⚠
     `);
 
-    withErrorsOrWarningsIgnored(['Expected warning during render'], () => {
+    withErrorsOrWarningsIgnored(['Expected:'], () => {
       patch(`
       const {useEffect, useState} = React;
 
       export default function Component() {
         const [state, setState] = useState(1);
-        console.warn("Expected warning during render");
+        console.warn("Expected: warning during render");
         return null;
       }
     `);
@@ -257,4 +259,6 @@ describe('Fast Refresh', () => {
           <Component> ⚠
     `);
   });
+
+  // TODO (bvaughn) Write a test that checks in between the steps of patch
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index fbbac1bcdc6d..c1f08846fdb1 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -717,7 +717,7 @@ export function attach(
         ? getFiberIDUnsafe(parentFiber) || '<no-id>'
         : '';
 
-      console.log(
+      console.groupCollapsed(
         `[renderer] %c${name} %c${displayName} (${maybeID}) %c${
           parentFiber ? `${parentDisplayName} (${maybeParentID})` : ''
         } %c${extraString}`,
@@ -726,6 +726,13 @@ export function attach(
         'color: purple;',
         'color: black;',
       );
+      console.log(
+        new Error().stack
+          .split('\n')
+          .slice(1)
+          .join('\n'),
+      );
+      console.groupEnd();
     }
   };
 
@@ -996,7 +1003,9 @@ export function attach(
       }
     }
 
+    let didGenerateID = false;
     if (id === null) {
+      didGenerateID = true;
       id = getUID();
     }
 
@@ -1019,6 +1028,17 @@ export function attach(
       }
     }
 
+    if (__DEBUG__) {
+      if (didGenerateID) {
+        debug(
+          'getOrGenerateFiberID()',
+          fiber,
+          fiber.return,
+          'Generated a new UID',
+        );
+      }
+    }
+
     return refinedID;
   }
 
@@ -1050,19 +1070,61 @@ export function attach(
   // 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 untrackFiberID(fiber: Fiber) {
-    const fiberID = getFiberIDUnsafe(fiber);
-    if (fiberID !== null) {
-      idToArbitraryFiberMap.delete(fiberID);
+    if (__DEBUG__) {
+      debug('untrackFiberID()', fiber, fiber.return, 'schedule after delay');
     }
 
-    fiberToIDMap.delete(fiber);
+    // Untrack Fibers after a slight delay in order to support a Fast Refresh edge case:
+    // 1. Component type is updated and Fast Refresh schedules an update+remount.
+    // 2. flushPendingErrorsAndWarningsAfterDelay() runs, sees the old Fiber is no longer mounted
+    //    (it's been disconnected by Fast Refresh), and calls untrackFiberID() to clear it from the Map.
+    // 3. React flushes pending passive effects before it runs the next render,
+    //    which logs an error or warning, which causes a new ID to be generated for this Fiber.
+    // 4. DevTools now tries to unmount the old Component with the new ID.
+    //
+    // The underlying problem here is the premature clearing of the Fiber ID,
+    // but DevTools has no way to detect that a given Fiber has been scheduled for Fast Refresh.
+    // (The "_debugNeedsRemount" flag won't necessarily be set.)
+    //
+    // The best we can do is to delay untracking by a small amount,
+    // and give React time to process the Fast Refresh delay.
 
-    const {alternate} = fiber;
-    if (alternate !== null) {
-      fiberToIDMap.delete(alternate);
+    untrackFibersSet.add(fiber);
+
+    if (untrackFibersTimeoutID === null) {
+      untrackFibersTimeoutID = setTimeout(untrackFibers, 1000);
     }
   }
 
+  const untrackFibersSet: Set<Fiber> = new Set();
+  let untrackFibersTimeoutID: TimeoutID | null = null;
+
+  function untrackFibers() {
+    if (untrackFibersTimeoutID !== null) {
+      clearTimeout(untrackFibersTimeoutID);
+      untrackFibersTimeoutID = null;
+    }
+
+    untrackFibersSet.forEach(fiber => {
+      const fiberID = getFiberIDUnsafe(fiber);
+      if (fiberID !== null) {
+        idToArbitraryFiberMap.delete(fiberID);
+
+        // Also clear any errors/warnings associated with this fiber.
+        clearErrorsForFiberID(fiberID);
+        clearWarningsForFiberID(fiberID);
+      }
+
+      fiberToIDMap.delete(fiber);
+
+      const {alternate} = fiber;
+      if (alternate !== null) {
+        fiberToIDMap.delete(alternate);
+      }
+    });
+    untrackFibersSet.clear();
+  }
+
   function getChangeDescription(
     prevFiber: Fiber | null,
     nextFiber: Fiber,
@@ -1610,13 +1672,13 @@ export function attach(
   }
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
+    const isRoot = fiber.tag === HostRoot;
+    const id = getOrGenerateFiberID(fiber);
+
     if (__DEBUG__) {
       debug('recordMount()', fiber, parentFiber);
     }
 
-    const isRoot = fiber.tag === HostRoot;
-    const id = getOrGenerateFiberID(fiber);
-
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
 
@@ -1748,6 +1810,9 @@ export function attach(
     // This reduces the chance of stack overflow for wide trees (e.g. lists with many items).
     let fiber: Fiber | null = firstChild;
     while (fiber !== null) {
+      // Generate an ID even for filtered Fibers, in case it's needed later (e.g. for Profiling).
+      getOrGenerateFiberID(fiber);
+
       if (__DEBUG__) {
         debug('mountFiberRecursively()', fiber, parentFiber);
       }
@@ -1761,9 +1826,6 @@ export function attach(
       const shouldIncludeInTree = !shouldFilterFiber(fiber);
       if (shouldIncludeInTree) {
         recordMount(fiber, parentFiber);
-      } else {
-        // Generate an ID even for filtered Fibers, in case it's needed later (e.g. for Profiling).
-        getOrGenerateFiberID(fiber);
       }
 
       if (traceUpdatesEnabled) {
@@ -2008,12 +2070,12 @@ export function attach(
     parentFiber: Fiber | null,
     traceNearestHostComponentUpdate: boolean,
   ): boolean {
+    const id = getOrGenerateFiberID(nextFiber);
+
     if (__DEBUG__) {
       debug('updateFiberRecursively()', nextFiber, parentFiber);
     }
 
-    const id = getOrGenerateFiberID(nextFiber);
-
     if (traceUpdatesEnabled) {
       const elementType = getElementTypeForFiber(nextFiber);
       if (traceNearestHostComponentUpdate) {
@@ -2322,6 +2384,10 @@ export function attach(
     const current = root.current;
     const alternate = current.alternate;
 
+    // Flush any pending Fibers that we are untracking before processing the new commit.
+    // If we don't do this, we might end up double-deleting Fibers in some cases (like Legacy Suspense).
+    untrackFibers();
+
     currentRootID = getOrGenerateFiberID(current);
 
     // Before the traversals, remember to start tracking
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index c6810b188cee..09e254cda4bc 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -14,7 +14,7 @@
 * 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))
+* 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))
 * 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

From 3f8f4675d499ebf8f20cf02ee34aa16045a648b6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 May 2021 10:59:32 -0400
Subject: [PATCH 0550/1603] Updated DevTools CHANGELOG for 4.13.3 release

---
 packages/react-devtools/CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 09e254cda4bc..cce1e4864f7d 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,13 +9,14 @@
   <!-- Upcoming changes go here -->
 </details>
 
-## 4.13.3 (May 18, 2021)
+## 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))

From 99995c1063d1a9d3bfbcdf41078cb1e685218d99 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 May 2021 10:27:56 -0700
Subject: [PATCH 0551/1603] Improve error boundary in inspected elements panel
 (#21531)

Show more info about the error as well as the option to report it to GitHub.
---
 .../InspectedElementErrorBoundary.css         | 22 +-----
 .../InspectedElementErrorBoundary.js          | 75 +------------------
 .../views/ErrorBoundary/ErrorBoundary.js      | 21 ++++--
 3 files changed, 21 insertions(+), 97 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
index 399f83cec45b..612fd7eb2840 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
@@ -1,21 +1,3 @@
-.Error {
-  justify-content: center;
-  align-items: center;
-  display: flex;
-      flex-direction: column;
-  height: 100%;
-  font-size: var(--font-size-sans-large);
-    font-weight: bold;
-    text-align: center;
-  background-color: var(--color-error-background);
-  color: var(--color-error-text);
-  border: 1px solid var(--color-error-border);
-  padding: 1rem;
-}
-
-.Message {
-  margin-bottom: 1rem;
-}
-
-.RetryButton {
+.Wrapper {
+  border-left: 1px solid var(--color-border);
 }
\ 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
index 09c11664dcf7..8b892c8eaf7c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -8,13 +8,9 @@
  */
 
 import * as React from 'react';
-import {Component, useContext} from 'react';
-import {TreeDispatcherContext} from './TreeContext';
-import Button from 'react-devtools-shared/src/devtools/views/Button';
+import ErrorBoundary from '../ErrorBoundary';
 import styles from './InspectedElementErrorBoundary.css';
 
-import type {DispatcherContext} from './InspectedElementErrorBoundary.css';
-
 type WrapperProps = {|
   children: React$Node,
 |};
@@ -22,72 +18,9 @@ type WrapperProps = {|
 export default function InspectedElementErrorBoundaryWrapper({
   children,
 }: WrapperProps) {
-  const dispatch = useContext(TreeDispatcherContext);
-
   return (
-    <InspectedElementErrorBoundary children={children} dispatch={dispatch} />
+    <div className={styles.Wrapper}>
+      <ErrorBoundary canDismiss={true}>{children}</ErrorBoundary>
+    </div>
   );
 }
-
-type Props = {|
-  children: React$Node,
-  dispatch: DispatcherContext,
-|};
-
-type State = {|
-  errorMessage: string | null,
-  hasError: boolean,
-|};
-
-const InitialState: State = {
-  errorMessage: null,
-  hasError: false,
-};
-
-class InspectedElementErrorBoundary extends Component<Props, State> {
-  state: State = InitialState;
-
-  static getDerivedStateFromError(error: any) {
-    const errorMessage =
-      typeof error === 'object' &&
-      error !== null &&
-      error.hasOwnProperty('message')
-        ? error.message
-        : error;
-
-    return {
-      errorMessage,
-      hasError: true,
-    };
-  }
-
-  render() {
-    const {children} = this.props;
-    const {errorMessage, hasError} = this.state;
-
-    if (hasError) {
-      return (
-        <div className={styles.Error}>
-          <div className={styles.Message}>{errorMessage || 'Error'}</div>
-          <Button className={styles.RetryButton} onClick={this._retry}>
-            Dismiss
-          </Button>
-        </div>
-      );
-    }
-
-    return children;
-  }
-
-  _retry = () => {
-    const {dispatch} = this.props;
-    dispatch({
-      type: 'SELECT_ELEMENT_BY_ID',
-      payload: null,
-    });
-    this.setState({
-      errorMessage: null,
-      hasError: false,
-    });
-  };
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index 63c67afdd9bc..3ffa7536b72d 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -16,7 +16,8 @@ import SuspendingErrorView from './SuspendingErrorView';
 
 type Props = {|
   children: React$Node,
-  store: Store,
+  canDismiss?: boolean,
+  store?: Store,
 |};
 
 type State = {|
@@ -70,18 +71,24 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidMount() {
-    this.props.store.addListener('error', this._onStoreError);
+    const {store} = this.props;
+    if (store != null) {
+      store.addListener('error', this._onStoreError);
+    }
   }
 
   componentWillUnmount() {
-    this.props.store.removeListener('error', this._onStoreError);
+    const {store} = this.props;
+    if (store != null) {
+      store.removeListener('error', this._onStoreError);
+    }
   }
 
   render() {
-    const {children} = this.props;
+    const {canDismiss: canDismissProp, children} = this.props;
     const {
       callStack,
-      canDismiss,
+      canDismiss: canDismissState,
       componentStack,
       errorMessage,
       hasError,
@@ -92,7 +99,9 @@ export default class ErrorBoundary extends Component<Props, State> {
         <ErrorView
           callStack={callStack}
           componentStack={componentStack}
-          dismissError={canDismiss ? this._dismissError : null}
+          dismissError={
+            canDismissProp || canDismissState ? this._dismissError : null
+          }
           errorMessage={errorMessage}>
           <Suspense fallback={<SearchingGitHubIssues />}>
             <SuspendingErrorView

From ebcec3cc20417528ffe80f0b11701af42b399939 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 May 2021 14:38:12 -0700
Subject: [PATCH 0552/1603] Add key to inspected-element error boundary
 (#21535)

This way changing the selected element also recreates/resets the boundary automatically.
---
 .../views/Components/InspectedElementErrorBoundary.js    | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index 8b892c8eaf7c..249c37463660 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -8,7 +8,9 @@
  */
 
 import * as React from 'react';
+import {useContext} from 'react';
 import ErrorBoundary from '../ErrorBoundary';
+import {TreeStateContext} from './TreeContext';
 import styles from './InspectedElementErrorBoundary.css';
 
 type WrapperProps = {|
@@ -18,9 +20,14 @@ type WrapperProps = {|
 export default function InspectedElementErrorBoundaryWrapper({
   children,
 }: WrapperProps) {
+  // 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 {selectedElementID} = useContext(TreeStateContext);
   return (
     <div className={styles.Wrapper}>
-      <ErrorBoundary canDismiss={true}>{children}</ErrorBoundary>
+      <ErrorBoundary key={selectedElementID} canDismiss={true}>
+        {children}
+      </ErrorBoundary>
     </div>
   );
 }

From b8bbb6a13d0d0fc93bd1bf51bd66d626aad84672 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 May 2021 08:24:08 -0700
Subject: [PATCH 0553/1603] Fix edge-case Fast Refresh bug that caused Fibers
 with warnings/errors to be untracked prematurely (#21536)

Refactor error/warning count tracking to avoid pre-allocating an ID for Fibers that aren't yet mounted. Instead, we store a temporary reference to the Fiber itself and later check to see if it successfully mounted before merging pending error/warning counts.

This avoids a problematic edge case where a force-remounted Fiber (from Fast Refresh) caused us to untrack a Fiber that was still mounted, resulting in a DevTools error if that Fiber was inspected in the Components tab.
---
 .../src/__tests__/inspectedElement-test.js    |  26 +--
 .../src/backend/renderer.js                   | 217 +++++++++++-------
 2 files changed, 150 insertions(+), 93 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 1acc8a67c5db..0c4fc869764e 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -1946,15 +1946,11 @@ describe('InspectedElement', () => {
   });
 
   describe('inline errors and warnings', () => {
-    // Some actions require the Fiber id.
-    // In those instances you might want to make assertions based on the ID instead of the index.
-    function getErrorsAndWarningsForElement(id: number) {
-      const index = ((store.getIndexOfElementID(id): any): number);
-      return getErrorsAndWarningsForElementAtIndex(index);
-    }
-
     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;
@@ -2222,8 +2218,8 @@ describe('InspectedElement', () => {
       jest.runOnlyPendingTimers();
 
       let data = [
-        await getErrorsAndWarningsForElement(1),
-        await getErrorsAndWarningsForElement(2),
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
       ];
       expect(data).toMatchInlineSnapshot(`
         Array [
@@ -2260,8 +2256,8 @@ describe('InspectedElement', () => {
       jest.runOnlyPendingTimers();
 
       data = [
-        await getErrorsAndWarningsForElement(1),
-        await getErrorsAndWarningsForElement(2),
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
       ];
       expect(data).toMatchInlineSnapshot(`
         Array [
@@ -2319,8 +2315,8 @@ describe('InspectedElement', () => {
       jest.runOnlyPendingTimers();
 
       let data = [
-        await getErrorsAndWarningsForElement(1),
-        await getErrorsAndWarningsForElement(2),
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
       ];
       expect(data).toMatchInlineSnapshot(`
         Array [
@@ -2357,8 +2353,8 @@ describe('InspectedElement', () => {
       jest.runOnlyPendingTimers();
 
       data = [
-        await getErrorsAndWarningsForElement(1),
-        await getErrorsAndWarningsForElement(2),
+        await getErrorsAndWarningsForElementAtIndex(0),
+        await getErrorsAndWarningsForElementAtIndex(1),
       ];
       expect(data).toMatchInlineSnapshot(`
         Array [
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c1f08846fdb1..da007e336cff 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -564,50 +564,82 @@ export function attach(
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
-  // Set of Fibers (IDs) with recently changed number of error/warning messages.
-  const fibersWithChangedErrorOrWarningCounts: Set<number> = new Set();
+  // Tracks Fibers with recently changed number of error/warning messages.
+  // These collections store the Fiber rather than the ID,
+  // in order to avoid generating an ID for Fibers that never get mounted
+  // (due to e.g. Suspense or error boundaries).
+  // onErrorOrWarning() adds Fibers and recordPendingErrorsAndWarnings() later clears them.
+  const fibersWithChangedErrorOrWarningCounts: Set<Fiber> = new Set();
+  const pendingFiberToErrorsMap: Map<Fiber, Map<string, number>> = new Map();
+  const pendingFiberToWarningsMap: Map<Fiber, Map<string, number>> = new Map();
 
   // Mapping of fiber IDs to error/warning messages and counts.
-  const fiberToErrorsMap: Map<number, Map<string, number>> = new Map();
-  const fiberToWarningsMap: Map<number, Map<string, number>> = new Map();
+  const fiberIDToErrorsMap: Map<number, Map<string, number>> = new Map();
+  const fiberIDToWarningsMap: Map<number, Map<string, number>> = new Map();
 
   function clearErrorsAndWarnings() {
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-    for (const id of fiberToErrorsMap.keys()) {
-      fibersWithChangedErrorOrWarningCounts.add(id);
-      updateMostRecentlyInspectedElementIfNecessary(id);
+    for (const id of fiberIDToErrorsMap.keys()) {
+      const fiber = idToArbitraryFiberMap.get(id);
+      if (fiber != null) {
+        fibersWithChangedErrorOrWarningCounts.add(fiber);
+        updateMostRecentlyInspectedElementIfNecessary(id);
+      }
     }
 
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-    for (const id of fiberToWarningsMap.keys()) {
-      fibersWithChangedErrorOrWarningCounts.add(id);
-      updateMostRecentlyInspectedElementIfNecessary(id);
+    for (const id of fiberIDToWarningsMap.keys()) {
+      const fiber = idToArbitraryFiberMap.get(id);
+      if (fiber != null) {
+        fibersWithChangedErrorOrWarningCounts.add(fiber);
+        updateMostRecentlyInspectedElementIfNecessary(id);
+      }
     }
 
-    fiberToErrorsMap.clear();
-    fiberToWarningsMap.clear();
+    fiberIDToErrorsMap.clear();
+    fiberIDToWarningsMap.clear();
 
     flushPendingEvents();
   }
 
-  function clearErrorsForFiberID(id: number) {
-    if (fiberToErrorsMap.has(id)) {
-      fiberToErrorsMap.delete(id);
-      fibersWithChangedErrorOrWarningCounts.add(id);
-      flushPendingEvents();
-    }
+  function clearMessageCountHelper(
+    fiberID: number,
+    pendingFiberToMessageCountMap: Map<Fiber, Map<string, number>>,
+    fiberIDToMessageCountMap: Map<number, Map<string, number>>,
+  ) {
+    const fiber = idToArbitraryFiberMap.get(fiberID);
+    if (fiber != null) {
+      // Throw out any pending changes.
+      pendingFiberToErrorsMap.delete(fiber);
 
-    updateMostRecentlyInspectedElementIfNecessary(id);
-  }
+      if (fiberIDToMessageCountMap.has(fiberID)) {
+        fiberIDToMessageCountMap.delete(fiberID);
+
+        // If previous flushed counts have changed, schedule an update too.
+        fibersWithChangedErrorOrWarningCounts.add(fiber);
+        flushPendingEvents();
 
-  function clearWarningsForFiberID(id: number) {
-    if (fiberToWarningsMap.has(id)) {
-      fiberToWarningsMap.delete(id);
-      fibersWithChangedErrorOrWarningCounts.add(id);
-      flushPendingEvents();
+        updateMostRecentlyInspectedElementIfNecessary(fiberID);
+      } else {
+        fibersWithChangedErrorOrWarningCounts.delete(fiber);
+      }
     }
+  }
 
-    updateMostRecentlyInspectedElementIfNecessary(id);
+  function clearErrorsForFiberID(fiberID: number) {
+    clearMessageCountHelper(
+      fiberID,
+      pendingFiberToErrorsMap,
+      fiberIDToErrorsMap,
+    );
+  }
+
+  function clearWarningsForFiberID(fiberID: number) {
+    clearMessageCountHelper(
+      fiberID,
+      pendingFiberToWarningsMap,
+      fiberIDToWarningsMap,
+    );
   }
 
   function updateMostRecentlyInspectedElementIfNecessary(
@@ -628,36 +660,24 @@ export function attach(
     args: $ReadOnlyArray<any>,
   ): void {
     const message = format(...args);
-
-    // Note that by calling these functions we may be creating the ID for the first time.
-    // If the Fiber is then never mounted, we are responsible for cleaning up after ourselves.
-    // This is important because getOrGenerateFiberID() stores a Fiber in a couple of local Maps.
-    // If the Fiber never mounts and we don't clean up after this code, we could leak.
-    // Fortunately we would only leak Fibers that have errors/warnings associated with them,
-    // which is hopefully only a small set and only in DEV mode– but this is still not great.
-    // We should clean up Fibers like this when flushing; see recordPendingErrorsAndWarnings().
-    const fiberID = getOrGenerateFiberID(fiber);
-
     if (__DEBUG__) {
       debug('onErrorOrWarning', fiber, null, `${type}: "${message}"`);
     }
 
     // Mark this Fiber as needed its warning/error count updated during the next flush.
-    fibersWithChangedErrorOrWarningCounts.add(fiberID);
+    fibersWithChangedErrorOrWarningCounts.add(fiber);
 
-    // Update the error/warning messages and counts for the Fiber.
-    const fiberMap = type === 'error' ? fiberToErrorsMap : fiberToWarningsMap;
-    const messageMap = fiberMap.get(fiberID);
+    // Track the warning/error for later.
+    const fiberMap =
+      type === 'error' ? pendingFiberToErrorsMap : pendingFiberToWarningsMap;
+    const messageMap = fiberMap.get(fiber);
     if (messageMap != null) {
       const count = messageMap.get(message) || 0;
       messageMap.set(message, count + 1);
     } else {
-      fiberMap.set(fiberID, new Map([[message, 1]]));
+      fiberMap.set(fiber, new Map([[message, 1]]));
     }
 
-    // If this Fiber is currently being inspected, mark it as needing an udpate as well.
-    updateMostRecentlyInspectedElementIfNecessary(fiberID);
-
     // Passive effects may trigger errors or warnings too;
     // In this case, we should wait until the rest of the passive effects have run,
     // but we shouldn't wait until the next commit because that might be a long time.
@@ -1497,53 +1517,94 @@ export function attach(
 
   function reevaluateErrorsAndWarnings() {
     fibersWithChangedErrorOrWarningCounts.clear();
-    fiberToErrorsMap.forEach((countMap, fiberID) => {
-      fibersWithChangedErrorOrWarningCounts.add(fiberID);
+    fiberIDToErrorsMap.forEach((countMap, fiberID) => {
+      const fiber = idToArbitraryFiberMap.get(fiberID);
+      if (fiber != null) {
+        fibersWithChangedErrorOrWarningCounts.add(fiber);
+      }
     });
-    fiberToWarningsMap.forEach((countMap, fiberID) => {
-      fibersWithChangedErrorOrWarningCounts.add(fiberID);
+    fiberIDToWarningsMap.forEach((countMap, fiberID) => {
+      const fiber = idToArbitraryFiberMap.get(fiberID);
+      if (fiber != null) {
+        fibersWithChangedErrorOrWarningCounts.add(fiber);
+      }
     });
     recordPendingErrorsAndWarnings();
   }
 
-  function recordPendingErrorsAndWarnings() {
-    clearPendingErrorsAndWarningsAfterDelay();
+  function mergeMapsAndGetCountHelper(
+    fiber: Fiber,
+    fiberID: number,
+    pendingFiberToMessageCountMap: Map<Fiber, Map<string, number>>,
+    fiberIDToMessageCountMap: Map<number, Map<string, number>>,
+  ): number {
+    let newCount = 0;
 
-    fibersWithChangedErrorOrWarningCounts.forEach(fiberID => {
-      const fiber = idToArbitraryFiberMap.get(fiberID);
-      if (fiber != null) {
-        // Don't send updates for Fibers that didn't mount due to e.g. Suspense or an error boundary.
-        // We may also need to clean up after ourselves to avoid leaks.
-        // See inline comments in onErrorOrWarning() for more info.
-        if (isFiberMountedImpl(fiber) !== MOUNTED) {
-          untrackFiberID(fiber);
-          return;
-        }
+    let messageCountMap = fiberIDToMessageCountMap.get(fiberID);
 
-        let errorCount = 0;
-        let warningCount = 0;
+    const pendingMessageCountMap = pendingFiberToMessageCountMap.get(fiber);
+    if (pendingMessageCountMap != null) {
+      if (messageCountMap == null) {
+        messageCountMap = pendingMessageCountMap;
 
-        if (!shouldFilterFiber(fiber)) {
-          const errorCountsMap = fiberToErrorsMap.get(fiberID);
-          const warningCountsMap = fiberToWarningsMap.get(fiberID);
+        fiberIDToMessageCountMap.set(fiberID, pendingMessageCountMap);
+      } else {
+        // This Flow refinement should not be necessary and yet...
+        const refinedMessageCountMap = ((messageCountMap: any): Map<
+          string,
+          number,
+        >);
+
+        pendingMessageCountMap.forEach((pendingCount, message) => {
+          const previousCount = refinedMessageCountMap.get(message) || 0;
+          refinedMessageCountMap.set(message, previousCount + pendingCount);
+        });
+      }
+    }
 
-          if (errorCountsMap != null) {
-            errorCountsMap.forEach(count => {
-              errorCount += count;
-            });
-          }
-          if (warningCountsMap != null) {
-            warningCountsMap.forEach(count => {
-              warningCount += count;
-            });
-          }
-        }
+    if (!shouldFilterFiber(fiber)) {
+      if (messageCountMap != null) {
+        messageCountMap.forEach(count => {
+          newCount += count;
+        });
+      }
+    }
+
+    pendingFiberToMessageCountMap.delete(fiber);
+
+    return newCount;
+  }
+
+  function recordPendingErrorsAndWarnings() {
+    clearPendingErrorsAndWarningsAfterDelay();
+
+    fibersWithChangedErrorOrWarningCounts.forEach(fiber => {
+      const fiberID = getFiberIDUnsafe(fiber);
+      if (fiberID === null) {
+        // Don't send updates for Fibers that didn't mount due to e.g. Suspense or an error boundary.
+      } else {
+        const errorCount = mergeMapsAndGetCountHelper(
+          fiber,
+          fiberID,
+          pendingFiberToErrorsMap,
+          fiberIDToErrorsMap,
+        );
+        const warningCount = mergeMapsAndGetCountHelper(
+          fiber,
+          fiberID,
+          pendingFiberToWarningsMap,
+          fiberIDToWarningsMap,
+        );
 
         pushOperation(TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS);
         pushOperation(fiberID);
         pushOperation(errorCount);
         pushOperation(warningCount);
       }
+
+      // Always clean up so that we don't leak.
+      pendingFiberToErrorsMap.delete(fiber);
+      pendingFiberToWarningsMap.delete(fiber);
     });
     fibersWithChangedErrorOrWarningCounts.clear();
   }
@@ -3012,8 +3073,8 @@ export function attach(
       rootType = fiberRoot._debugRootType;
     }
 
-    const errors = fiberToErrorsMap.get(id) || new Map();
-    const warnings = fiberToWarningsMap.get(id) || new Map();
+    const errors = fiberIDToErrorsMap.get(id) || new Map();
+    const warnings = fiberIDToWarningsMap.get(id) || new Map();
 
     return {
       id,

From 132b72d7b668cbdabb06a44bd62979b212fc8b6d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 May 2021 11:24:30 -0400
Subject: [PATCH 0554/1603] DevTools 4.13.3 -> 4.13.4

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 4 ++++
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 1f8ff5679dc3..6cd91fe196ca 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.13.3",
+  "version": "4.13.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index b8e59e0d3305..ec77f8a8c3a0 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.13.3",
-  "version_name": "4.13.3",
+  "version": "4.13.4",
+  "version_name": "4.13.4",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 2a89a41b7a6e..059b02b0b39a 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.13.3",
-  "version_name": "4.13.3",
+  "version": "4.13.4",
+  "version_name": "4.13.4",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index c9cffa915224..5e694fbff8d2 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.13.3",
+  "version": "4.13.4",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index ff72b279e70b..84f243d913b7 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.13.3",
+  "version": "4.13.4",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index cce1e4864f7d..d1d805687b9e 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,10 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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))
+
 ## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index c9e8d06fa093..1ebd0f474451 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.13.3",
+  "version": "4.13.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.13.3",
+    "react-devtools-core": "4.13.4",
     "update-notifier": "^2.1.0"
   }
 }

From 549aaacbb0978e6570a4a85d9ba998fa091ec79b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 May 2021 14:51:35 -0400
Subject: [PATCH 0555/1603] Update devtools_bug_report.yml

---
 .github/ISSUE_TEMPLATE/devtools_bug_report.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
index 5fcaed978ea1..96379619b11c 100644
--- a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
@@ -7,7 +7,7 @@ body:
   attributes:
     label: Website or app
     description: |
-      Which website or app were you using when the bug happened?
+      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:

From e0bffeeb013f982cd3fd372452efb4f235af0072 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 May 2021 14:52:08 -0400
Subject: [PATCH 0556/1603] Update devtools_bug_report.yml

---
 .github/ISSUE_TEMPLATE/devtools_bug_report.yml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
index 96379619b11c..f90209764681 100644
--- a/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/devtools_bug_report.yml
@@ -7,7 +7,9 @@ body:
   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.)
+      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:
@@ -18,7 +20,7 @@ body:
     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 may be closed.
+      Issues filed without repro steps will be closed.
     placeholder: |
       Example bug report:
       1. Log in with username/password

From 45f1a4a33f8e8015a80aeb18a813ee98cd989c6c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 May 2021 12:28:59 -0700
Subject: [PATCH 0557/1603] DevTools: Revert force deep re-mount when Fast
 Refresh detected (#21539)

This reverts the most expensive part of 1e3383a41 (which seems to no longer be necessary after subsequent changes).
---
 .../src/backend/renderer.js                   | 27 +++----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index da007e336cff..c05a9b6a7214 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -829,12 +829,6 @@ export function attach(
       throw Error('Cannot modify filter preferences while profiling');
     }
 
-    unmountAndRemountAllRoots(() => {
-      applyComponentFilters(componentFilters);
-    });
-  }
-
-  function unmountAndRemountAllRoots(callback?: Function) {
     // Recursively unmount all roots.
     hook.getFiberRoots(rendererID).forEach(root => {
       currentRootID = getOrGenerateFiberID(root.current);
@@ -846,9 +840,7 @@ export function attach(
       currentRootID = -1;
     });
 
-    if (typeof callback === 'function') {
-      callback();
-    }
+    applyComponentFilters(componentFilters);
 
     // Reset pseudo counters so that new path selections will be persisted.
     rootDisplayNameCounter.clear();
@@ -1797,20 +1789,6 @@ export function attach(
       );
     }
 
-    const unsafeID = getFiberIDUnsafe(fiber);
-    if (fiber._debugNeedsRemount) {
-      if (unsafeID === null) {
-        // This inidicates a case we can't recover from:
-        // Fast Refresh has force remounted a component in a way that we don't have an id for.
-        // We could throw but that's a bad user experience.
-        // Or we could ignore the unmount but then Store might end up with a duplicate node.
-        // So a fallback is to completely reset the Store.
-        // This is costly but since Fast Refresh is only used in DEV builds, it should be okay.
-        setTimeout(unmountAndRemountAllRoots, 0);
-        return;
-      }
-    }
-
     if (trackedPathMatchFiber !== null) {
       // We're in the process of trying to restore previous selection.
       // If this fiber matched but is being unmounted, there's no use trying.
@@ -1823,11 +1801,14 @@ export function attach(
       }
     }
 
+    const unsafeID = getFiberIDUnsafe(fiber);
     if (unsafeID === null) {
       // If we've never seen this Fiber, it might be inside of a legacy render Suspense fragment (so the store is not even aware of it).
       // In that case we can just ignore it or it will cause errors later on.
       // One example of this is a Lazy component that never resolves before being unmounted.
       //
+      // This also might indicate a Fast Refresh force-remount scenario.
+      //
       // TODO: This is fragile and can obscure actual bugs.
       return;
     }

From 97c25b0e9cef6d4f7aca81f781571d2198d9b037 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 May 2021 16:31:18 -0400
Subject: [PATCH 0558/1603] DevTools: Add 4.10.4 to CHANGELOG

---
 packages/react-devtools/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index d1d805687b9e..7ba28e82e806 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -128,6 +128,10 @@ The following features are only enabled when used with (experimental) builds of
 ###### 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))

From 51ebccc37482f84e41417ef2917b0e4e44cc7465 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 May 2021 17:00:17 -0400
Subject: [PATCH 0559/1603] DevTools: Add 4.13.4 changelog

---
 packages/react-devtools/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 7ba28e82e806..48a9dcd279f8 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -12,6 +12,7 @@
 ## 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

From a731a51696239a69a6cd89cdd34f23ce2fc39099 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 21 May 2021 12:48:12 -0700
Subject: [PATCH 0560/1603] Add GitHub action to check for bug repro (#21542)

---
 .github/workflows/devtools_check_repro.yml | 209 +++++++++++++++++++++
 1 file changed, 209 insertions(+)
 create mode 100644 .github/workflows/devtools_check_repro.yml

diff --git a/.github/workflows/devtools_check_repro.yml b/.github/workflows/devtools_check_repro.yml
new file mode 100644
index 000000000000..0a32ff691f76
--- /dev/null
+++ b/.github/workflows/devtools_check_repro.yml
@@ -0,0 +1,209 @@
+name: DevTools Check for bug repro
+on:
+  issues:
+    types: [opened, edited]
+  issue_comment:
+    types: [created, edited]
+
+jobs:
+  check-repro:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/github-script@v3
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const URL_REGEXP = /### Website or app[\r\n]+([^#]+)###/m;
+            const REPRO_STEPS_REGEXP = /### Repro steps[\r\n]+([^#]+)###/m;
+            const LABEL_NEEDS_MORE_INFORMATION = "Resolution: Needs More Information";
+            const LABEL_UNCONFIRMED = "Status: Unconfirmed";
+
+            function debug(...args) {
+              core.info(args.map(JSON.stringify).join(' '));
+            }
+
+            if (context.payload.comment) {
+              debug('Ignoring comment update.');
+              return;
+            }
+
+            const user = context.payload.sender.login;
+            const issue = context.payload.issue;
+            const body = issue.body;
+
+            const urlMatch = body.match(URL_REGEXP);
+            const reproStepsMatch = body.match(REPRO_STEPS_REGEXP);
+
+            const url = urlMatch !== null ? urlMatch[1].trim() : null;
+            const reproSteps = reproStepsMatch !== null ? reproStepsMatch[1].trim() : null;
+
+            if (!url || !reproSteps) {
+              debug('This issue is not a DevTools bug report.');
+              return;
+            }
+
+            debug(`found URL "${url}"`);
+            debug(`found repro steps "${reproSteps}"`);
+
+            function formatComment(comment) {
+              return comment
+                .split("\n")
+                .map((line) => line.trim())
+                .join("\n")
+                .trim();
+            }
+
+            async function getGitHubActionComments() {
+              debug(`Loading existing comments...`);
+
+              const comments = await github.issues.listComments({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+              });
+
+              return comments.data.filter(comment => {
+                debug(`comment by user: "${comment.user.login}"`);
+                return comment.user.login === 'github-actions[bot]';
+              });
+            }
+
+            async function getIssueLabels() {
+              const issues = await github.issues.listLabelsOnIssue({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+              });
+
+              return issues.data;
+            }
+
+            async function closeWithComment(comment) {
+              if (issue.state !== 'open') {
+                debug(`Issue is not open`);
+                return;
+              }
+
+              const labels = await getIssueLabels();
+              const label = labels.find(label => label.name === LABEL_UNCONFIRMED);
+              if (!label) {
+                debug(`Issue was not opened via DevTools bug report template`);
+                return;
+              }
+
+              const comments = await getGitHubActionComments();
+              if (comments.length > 0) {
+                debug(`Already commented on issue; won't comment again`);
+                return;
+              }
+
+              debug(`Missing required information`);
+
+              await github.issues.addLabels({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                labels: [LABEL_NEEDS_MORE_INFORMATION],
+              });
+
+              await github.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: formatComment(comment),
+              });
+
+              await github.issues.update({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'closed',
+              });
+            }
+
+            async function openWithComment(comment) {
+              if (issue.state !== 'closed') {
+                debug(`Issue is already open`);
+                return;
+              }
+
+              const labels = await getIssueLabels();
+              const label = labels.find(label => label.name === LABEL_NEEDS_MORE_INFORMATION);
+              if (!label) {
+                debug(`Issue was not tagged as needs information`);
+                return;
+              }
+
+              const comments = await getGitHubActionComments();
+              if (comments.length === 0) {
+                debug(`Issue was closed by someone else; won't reopen`);
+                return;
+              }
+
+              debug(`Re-opening closed issue`);
+
+              await github.issues.removeLabel({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: LABEL_NEEDS_MORE_INFORMATION,
+              });
+
+              await github.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: formatComment(comment),
+              });
+
+              await github.issues.update({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+              });
+            }
+
+            const PROBABLY_NOT_A_URL_REGEX = /(^Chrome$|^Firefox$| Website)/i;
+
+            const COMMENT_HEADER = `
+              @${user}: We're sorry you've seen this error. ❤️
+            `.trim();
+
+            const COMMENT_FOOTER = `
+              Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)
+
+              Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve
+
+              Issues without repros are automatically closed but we will re-open if you update with repro info.
+            `.trim();
+
+            if (url.includes("/localhost")) {
+              closeWithComment(`
+                ${COMMENT_HEADER}
+
+                Unfortunately the URL you provided ("localhost") is not publicly accessible. (This means that we will not be able to reproduce the problem you're reporting.)
+
+                ${COMMENT_FOOTER}
+              `);
+            } else if (url.length < 10 || url.match(PROBABLY_NOT_A_URL_REGEX)) {
+              closeWithComment(`
+                ${COMMENT_HEADER}
+
+                It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)
+
+                ${COMMENT_FOOTER}
+              `);
+            } else if (reproSteps.length < 25) {
+              closeWithComment(`
+                ${COMMENT_HEADER}
+
+                Unfortunately, it doesn't look like this issue has enough info for one of us to reproduce and fix it though.
+
+                ${COMMENT_FOOTER}
+              `);
+            } else {
+              openWithComment(`
+                Thank you for providing repro steps! Re-opening issue now for triage.
+              `);
+            }

From 459c34fde6e22475b09e7215c8d35a513c4fa7b4 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Mon, 24 May 2021 15:56:47 +0100
Subject: [PATCH 0561/1603] Add flag concurrent root to Fabric render function
 (#21552)

* Add flag concurrent root to Fabric render function

* Lint
---
 packages/react-native-renderer/src/ReactFabric.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index c516452a1766..040e02e093e4 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -40,7 +40,7 @@ import {
   getInspectorDataForViewTag,
   getInspectorDataForViewAtPoint,
 } from './ReactNativeFiberInspector';
-import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {LegacyRoot, ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 
@@ -201,13 +201,21 @@ function render(
   element: Element<ElementType>,
   containerTag: number,
   callback: ?() => void,
+  concurrentRoot: ?boolean,
 ): ?ElementRef<ElementType> {
   let root = roots.get(containerTag);
 
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
+    root = createContainer(
+      containerTag,
+      concurrentRoot ? ConcurrentRoot : LegacyRoot,
+      false,
+      null,
+      false,
+      null,
+    );
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);

From 2d8d133e1756ea50a48e615db0c22870e92f4af6 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 25 May 2021 11:21:58 -0400
Subject: [PATCH 0562/1603] Turn on enableSyncDefaultUpdates everywhere
 (#21548)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index ce20f0ba79f5..f34657b052a6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -59,7 +59,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
-export const enableSyncDefaultUpdates = false;
+export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f0ed45768bf3..240978a61333 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -58,7 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
-export const enableSyncDefaultUpdates = false;
+export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 688d30ee9fe2..3829b61918b3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -58,7 +58,7 @@ export const enableUseRefAccessWarning = false;
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
-export const enableSyncDefaultUpdates = false;
+export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
 // Flow magic to verify the exports of this file match the original version.

From 965fb8be6b9e59d6552231039f3d8c1ff20d2793 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 25 May 2021 11:49:05 -0700
Subject: [PATCH 0563/1603] DevTools: Support an element mounting before its
 owner (#21562)

---
 .../src/__tests__/store-test.js               | 39 +++++++++++++++++++
 .../src/backend/renderer.js                   |  8 +++-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 236a9b0f5e50..04f14a41a934 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -60,6 +60,45 @@ describe('Store', () => {
     expect(store).toMatchSnapshot('2: add host nodes');
   });
 
+  // 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
+  it('should handle when a component mounts before its owner', () => {
+    const promise = new Promise(resolve => {});
+
+    let Dynamic = null;
+    const Owner = () => {
+      Dynamic = <Child />;
+      throw promise;
+    };
+    const Parent = () => {
+      return Dynamic;
+    };
+    const Child = () => null;
+
+    const container = document.createElement('div');
+
+    act(() =>
+      ReactDOM.render(
+        <>
+          <React.Suspense fallback="Loading...">
+            <Owner />
+          </React.Suspense>
+          <Parent />
+        </>,
+        container,
+      ),
+    );
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Suspense>
+        ▾ <Parent>
+            <Child>
+    `);
+  });
+
   describe('collapseNodesByDefault:false', () => {
     beforeEach(() => {
       store.collapseNodesByDefault = false;
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c05a9b6a7214..b7b8eb605615 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1753,7 +1753,13 @@ export function attach(
       const elementType = getElementTypeForFiber(fiber);
       const {_debugOwner} = fiber;
 
-      const ownerID = _debugOwner != null ? getFiberIDThrows(_debugOwner) : 0;
+      // Ideally we should call getFiberIDThrows() for _debugOwner,
+      // since owners are almost always higher in the tree (and so have already been processed),
+      // but in some (rare) instances reported in open source, a descendant mounts before an owner.
+      // Since this is a DEV only field it's probably okay to also just lazily generate and ID here if needed.
+      // See https://github.com/facebook/react/issues/21445
+      const ownerID =
+        _debugOwner != null ? getOrGenerateFiberID(_debugOwner) : 0;
       const parentID = parentFiber ? getFiberIDThrows(parentFiber) : 0;
 
       const displayNameStringID = getStringID(displayName);

From 0ae5290b5434dd7a14be02a5c3f62bd80ad75d6d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 25 May 2021 15:18:47 -0400
Subject: [PATCH 0564/1603] DevTools 4.13.4 -> 4.13.5

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 4 ++++
 packages/react-devtools/package.json                     | 4 ++--
 7 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 6cd91fe196ca..ad3756263921 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.13.4",
+  "version": "4.13.5",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index ec77f8a8c3a0..906d50465ca3 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.13.4",
-  "version_name": "4.13.4",
+  "version": "4.13.5",
+  "version_name": "4.13.5",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 059b02b0b39a..ac13c85424e9 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.13.4",
-  "version_name": "4.13.4",
+  "version": "4.13.5",
+  "version_name": "4.13.5",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 5e694fbff8d2..480ea1b4c636 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.13.4",
+  "version": "4.13.5",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 84f243d913b7..381d4ebd5935 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.13.4",
+  "version": "4.13.5",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 48a9dcd279f8..f07db005bb3b 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,10 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 1ebd0f474451..0be667fdd137 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.13.4",
+  "version": "4.13.5",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.13.4",
+    "react-devtools-core": "4.13.5",
     "update-notifier": "^2.1.0"
   }
 }

From 6405efc368a75b2b2f5eb80cdf0fda03ba644748 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 25 May 2021 14:32:14 -0700
Subject: [PATCH 0565/1603] Enabled Profiling feature flags for OSS release
 (#21565)

* Enabled Profiling feature flags for OSS release

`enableProfilerCommitHooks` and `enableProfilerNestedUpdatePhase`
---
 .../__snapshots__/profilingCache-test.js.snap | 52 +++++++++----------
 packages/shared/ReactFeatureFlags.js          |  4 +-
 .../forks/ReactFeatureFlags.native-fb.js      |  4 +-
 .../forks/ReactFeatureFlags.native-oss.js     |  4 +-
 .../forks/ReactFeatureFlags.test-renderer.js  |  4 +-
 .../ReactFeatureFlags.test-renderer.native.js |  4 +-
 .../ReactFeatureFlags.test-renderer.www.js    |  4 +-
 .../shared/forks/ReactFeatureFlags.testing.js |  4 +-
 8 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 8f07adaaf4da..b27231efdffc 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -113,7 +113,7 @@ Object {
     },
   },
   "duration": 3,
-  "effectDuration": null,
+  "effectDuration": 0,
   "fiberActualDurations": Map {
     7 => 3,
     3 => 3,
@@ -122,7 +122,7 @@ Object {
     7 => 3,
     3 => 0,
   },
-  "passiveEffectDuration": null,
+  "passiveEffectDuration": 0,
   "priorityLevel": "Immediate",
   "timestamp": 18,
   "updaters": Array [
@@ -286,7 +286,7 @@ Object {
     },
   },
   "duration": 10,
-  "effectDuration": null,
+  "effectDuration": 0,
   "fiberActualDurations": Map {
     4 => 0,
     2 => 10,
@@ -297,7 +297,7 @@ Object {
     2 => 10,
     1 => 0,
   },
-  "passiveEffectDuration": null,
+  "passiveEffectDuration": 0,
   "priorityLevel": "Immediate",
   "timestamp": 35,
   "updaters": Array [
@@ -326,7 +326,7 @@ Object {
     },
   },
   "duration": 10,
-  "effectDuration": null,
+  "effectDuration": 0,
   "fiberActualDurations": Map {
     2 => 10,
     1 => 10,
@@ -335,7 +335,7 @@ Object {
     2 => 10,
     1 => 0,
   },
-  "passiveEffectDuration": null,
+  "passiveEffectDuration": 0,
   "priorityLevel": "Immediate",
   "timestamp": 45,
   "updaters": Array [
@@ -587,7 +587,7 @@ Object {
             ],
           ],
           "duration": 10,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
             Array [
               4,
@@ -616,7 +616,7 @@ Object {
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 35,
           "updaters": Array [
@@ -645,7 +645,7 @@ Object {
             ],
           ],
           "duration": 10,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
             Array [
               2,
@@ -666,7 +666,7 @@ Object {
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 45,
           "updaters": Array [
@@ -1367,7 +1367,7 @@ Object {
         },
       },
       "duration": 10,
-      "effectDuration": null,
+      "effectDuration": 0,
       "fiberActualDurations": Map {
         4 => 0,
         2 => 10,
@@ -1378,7 +1378,7 @@ Object {
         2 => 10,
         1 => 0,
       },
-      "passiveEffectDuration": null,
+      "passiveEffectDuration": 0,
       "priorityLevel": "Immediate",
       "timestamp": 34,
       "updaters": Array [
@@ -1404,7 +1404,7 @@ Object {
         },
       },
       "duration": 10,
-      "effectDuration": null,
+      "effectDuration": 0,
       "fiberActualDurations": Map {
         2 => 10,
         1 => 10,
@@ -1413,7 +1413,7 @@ Object {
         2 => 10,
         1 => 0,
       },
-      "passiveEffectDuration": null,
+      "passiveEffectDuration": 0,
       "priorityLevel": "Immediate",
       "timestamp": 44,
       "updaters": Array [
@@ -1683,10 +1683,10 @@ Object {
     Object {
       "changeDescriptions": Map {},
       "duration": 0,
-      "effectDuration": null,
+      "effectDuration": 0,
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
-      "passiveEffectDuration": null,
+      "passiveEffectDuration": 0,
       "priorityLevel": "Normal",
       "timestamp": 34,
       "updaters": Array [
@@ -1900,7 +1900,7 @@ Object {
             ],
           ],
           "duration": 10,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
             Array [
               4,
@@ -1929,7 +1929,7 @@ Object {
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 34,
           "updaters": Array [
@@ -1958,7 +1958,7 @@ Object {
             ],
           ],
           "duration": 10,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
             Array [
               2,
@@ -1979,7 +1979,7 @@ Object {
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 44,
           "updaters": Array [
@@ -2306,10 +2306,10 @@ Object {
         Object {
           "changeDescriptions": Array [],
           "duration": 0,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Normal",
           "timestamp": 34,
           "updaters": Array [
@@ -2494,7 +2494,7 @@ Object {
     },
   },
   "duration": 0,
-  "effectDuration": null,
+  "effectDuration": 0,
   "fiberActualDurations": Map {
     1 => 0,
     2 => 0,
@@ -2505,7 +2505,7 @@ Object {
     2 => 0,
     3 => 0,
   },
-  "passiveEffectDuration": null,
+  "passiveEffectDuration": 0,
   "priorityLevel": "Normal",
   "timestamp": 0,
   "updaters": Array [
@@ -2685,7 +2685,7 @@ Object {
             ],
           ],
           "duration": 0,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
             Array [
               1,
@@ -2714,7 +2714,7 @@ Object {
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Normal",
           "timestamp": 0,
           "updaters": Array [
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 500d995e69d8..3fa8cf284268 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -42,10 +42,10 @@ export const warnAboutDeprecatedLifecycles = true;
 export const enableProfilerTimer = __PROFILE__;
 
 // Record durations for commit and passive effects phases.
-export const enableProfilerCommitHooks = false;
+export const enableProfilerCommitHooks = __PROFILE__;
 
 // Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
-export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 
 // Profiler API accepts a function to be called when a nested update is scheduled.
 // This callback accepts the component type (class instance or function) the update is scheduled for.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f34657b052a6..9f8fae58517e 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -14,8 +14,8 @@ import typeof * as ExportsType from './ReactFeatureFlags.native-fb';
 export const enableDebugTracing = false;
 export const enableSchedulingProfiler = false;
 export const enableProfilerTimer = __PROFILE__;
-export const enableProfilerCommitHooks = false;
-export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index eb3a55187e7d..f12ca5f49576 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -16,8 +16,8 @@ export const enableSchedulingProfiler = false;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
 export const enableProfilerTimer = __PROFILE__;
-export const enableProfilerCommitHooks = false;
-export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 1a8a75a4c60f..888bedb396dd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -16,8 +16,8 @@ export const enableSchedulingProfiler = false;
 export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
-export const enableProfilerCommitHooks = false;
-export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 240978a61333..7eb2c151d10e 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -16,8 +16,8 @@ export const enableSchedulingProfiler = false;
 export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
-export const enableProfilerCommitHooks = false;
-export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 3829b61918b3..7699c52b1474 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -16,8 +16,8 @@ export const enableSchedulingProfiler = false;
 export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
-export const enableProfilerCommitHooks = false;
-export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d593aa3f9cee..7af17d70fa7f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -16,8 +16,8 @@ export const enableSchedulingProfiler = false;
 export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;
-export const enableProfilerCommitHooks = false;
-export const enableProfilerNestedUpdatePhase = false;
+export const enableProfilerCommitHooks = __PROFILE__;
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;

From 7841d0695ae4bde9848cf8953baf34d312d0cced Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 25 May 2021 14:41:19 -0700
Subject: [PATCH 0566/1603] Enable the updater-tracking feature flag in more
 builds (#21567)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js   | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-oss.js  | 2 +-
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js | 1 -
 packages/shared/forks/ReactFeatureFlags.www.js         | 3 +--
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 9f8fae58517e..27d10c9f0f44 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -17,7 +17,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableUpdaterTracking = false;
+export const enableUpdaterTracking = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index f12ca5f49576..1f8722560caf 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -19,7 +19,7 @@ export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
-export const enableUpdaterTracking = false;
+export const enableUpdaterTracking = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 42e5d97e30c4..591193ebb777 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,7 +25,6 @@ export const enableSuspenseLayoutEffectSemantics = __VARIANT__;
 //
 // NOTE: This feature will only work in DEV mode; all callsites are wrapped with __DEV__.
 export const enableDebugTracing = __EXPERIMENTAL__;
-export const enableUpdaterTracking = false;
 
 export const enableSchedulingProfiler = __VARIANT__;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 5e0a0134474e..4ce769c61750 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -45,8 +45,7 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook =
   __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
-export const enableUpdaterTracking =
-  __PROFILE__ && dynamicFeatureFlags.enableUpdaterTracking;
+export const enableUpdaterTracking = __PROFILE__;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =

From bb1c8215569f59b70276e8939bd8a59aa7f28f53 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 26 May 2021 10:43:51 -0400
Subject: [PATCH 0567/1603] Fixed localhost URL check

Noticed that it missed 21568 because of a leading "/"
---
 .github/workflows/devtools_check_repro.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/devtools_check_repro.yml b/.github/workflows/devtools_check_repro.yml
index 0a32ff691f76..0d569a87fd91 100644
--- a/.github/workflows/devtools_check_repro.yml
+++ b/.github/workflows/devtools_check_repro.yml
@@ -178,7 +178,7 @@ jobs:
               Issues without repros are automatically closed but we will re-open if you update with repro info.
             `.trim();
 
-            if (url.includes("/localhost")) {
+            if (url.includes("localhost")) {
               closeWithComment(`
                 ${COMMENT_HEADER}
 

From 0d493dcda96fc86242cf9a05a44130978a56fbdd Mon Sep 17 00:00:00 2001
From: Pulkit Sharma <75886411+Pulkit3234@users.noreply.github.com>
Date: Thu, 27 May 2021 02:23:18 +0530
Subject: [PATCH 0568/1603] Removed _debugID field from Fiber - Issue #21558
 (#21570)

* Removed _debugID field from Fiber
* Update ReactFunctionComponent-test.js

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
---
 .../src/__tests__/ReactFunctionComponent-test.js          | 6 ++----
 packages/react-reconciler/src/ReactFiber.new.js           | 8 +++-----
 packages/react-reconciler/src/ReactFiber.old.js           | 8 +++-----
 packages/react-reconciler/src/ReactFiberBeginWork.new.js  | 2 +-
 packages/react-reconciler/src/ReactFiberBeginWork.old.js  | 2 +-
 packages/react-reconciler/src/ReactInternalTypes.js       | 2 +-
 6 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
index 8e6d1eaa594e..0aa9aa69285f 100644
--- a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -284,10 +284,8 @@ describe('ReactFunctionComponent', () => {
     }).toErrorDev('Warning: Function components cannot be given refs.');
     // Should be deduped (same internal instance, no additional warnings)
     instance2.forceUpdate();
-    // Could not be deduped (different internal instance):
-    expect(() =>
-      ReactTestUtils.renderIntoDocument(<AnonymousParentNotUsingJSX />),
-    ).toErrorDev('Warning: Function components cannot be given refs.');
+    // Could not be differentiated (since owner is anonymous and no source location)
+    ReactTestUtils.renderIntoDocument(<AnonymousParentNotUsingJSX />);
 
     // When owner doesn't use JSX, but is named, we warn once per owner name
     class NamedParentNotUsingJSX extends React.Component {
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 701c2926797d..2ea25195a7c0 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -108,8 +108,6 @@ if (__DEV__) {
   }
 }
 
-let debugCounter = 1;
-
 function FiberNode(
   tag: WorkTag,
   pendingProps: mixed,
@@ -178,7 +176,7 @@ function FiberNode(
 
   if (__DEV__) {
     // This isn't directly used but is handy for debugging internals:
-    this._debugID = debugCounter++;
+
     this._debugSource = null;
     this._debugOwner = null;
     this._debugNeedsRemount = false;
@@ -261,7 +259,7 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
 
     if (__DEV__) {
       // DEV-only fields
-      workInProgress._debugID = current._debugID;
+
       workInProgress._debugSource = current._debugSource;
       workInProgress._debugOwner = current._debugOwner;
       workInProgress._debugHookTypes = current._debugHookTypes;
@@ -809,7 +807,7 @@ export function assignFiberPropertiesInDEV(
     target.selfBaseDuration = source.selfBaseDuration;
     target.treeBaseDuration = source.treeBaseDuration;
   }
-  target._debugID = source._debugID;
+
   target._debugSource = source._debugSource;
   target._debugOwner = source._debugOwner;
   target._debugNeedsRemount = source._debugNeedsRemount;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index fd2428b59779..1e30bb9c7a3a 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -108,8 +108,6 @@ if (__DEV__) {
   }
 }
 
-let debugCounter = 1;
-
 function FiberNode(
   tag: WorkTag,
   pendingProps: mixed,
@@ -178,7 +176,7 @@ function FiberNode(
 
   if (__DEV__) {
     // This isn't directly used but is handy for debugging internals:
-    this._debugID = debugCounter++;
+
     this._debugSource = null;
     this._debugOwner = null;
     this._debugNeedsRemount = false;
@@ -261,7 +259,7 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
 
     if (__DEV__) {
       // DEV-only fields
-      workInProgress._debugID = current._debugID;
+
       workInProgress._debugSource = current._debugSource;
       workInProgress._debugOwner = current._debugOwner;
       workInProgress._debugHookTypes = current._debugHookTypes;
@@ -809,7 +807,7 @@ export function assignFiberPropertiesInDEV(
     target.selfBaseDuration = source.selfBaseDuration;
     target.treeBaseDuration = source.treeBaseDuration;
   }
-  target._debugID = source._debugID;
+
   target._debugSource = source._debugSource;
   target._debugOwner = source._debugOwner;
   target._debugNeedsRemount = source._debugNeedsRemount;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 2dfc6766577f..6f1f7953b257 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1653,7 +1653,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
         info += '\n\nCheck the render method of `' + ownerName + '`.';
       }
 
-      let warningKey = ownerName || workInProgress._debugID || '';
+      let warningKey = ownerName || '';
       const debugSource = workInProgress._debugSource;
       if (debugSource) {
         warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 7c9df820b98c..8bac08c0ff6f 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1653,7 +1653,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
         info += '\n\nCheck the render method of `' + ownerName + '`.';
       }
 
-      let warningKey = ownerName || workInProgress._debugID || '';
+      let warningKey = ownerName || '';
       const debugSource = workInProgress._debugSource;
       if (debugSource) {
         warningKey = debugSource.fileName + ':' + debugSource.lineNumber;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 104a9ef728e4..5a4bc6237425 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -178,7 +178,7 @@ export type Fiber = {|
   // workInProgress : Fiber ->  alternate The alternate used for reuse happens
   // to be the same as work in progress.
   // __DEV__ only
-  _debugID?: number,
+
   _debugSource?: Source | null,
   _debugOwner?: Fiber | null,
   _debugIsCurrentlyTiming?: boolean,

From 5151466bab761cd6124d630a8a77d10b1cecbdc9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 27 May 2021 09:49:44 -0400
Subject: [PATCH 0569/1603] Updated DevTools bug Workflow

Workflow now auto-assigns issues needing more information to the person who reported them
---
 .github/workflows/devtools_check_repro.yml | 52 ++++++++++------------
 1 file changed, 24 insertions(+), 28 deletions(-)

diff --git a/.github/workflows/devtools_check_repro.yml b/.github/workflows/devtools_check_repro.yml
index 0d569a87fd91..e0335e905939 100644
--- a/.github/workflows/devtools_check_repro.yml
+++ b/.github/workflows/devtools_check_repro.yml
@@ -45,12 +45,20 @@ jobs:
             debug(`found URL "${url}"`);
             debug(`found repro steps "${reproSteps}"`);
 
-            function formatComment(comment) {
-              return comment
+            async function createComment(comment) {
+              // Format
+              comment = comment
                 .split("\n")
                 .map((line) => line.trim())
                 .join("\n")
                 .trim();
+
+              await github.issues.createComment({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                body: comment,
+              });
             }
 
             async function getGitHubActionComments() {
@@ -78,6 +86,16 @@ jobs:
               return issues.data;
             }
 
+            async function updateIssue(state, assignees = []) {
+              await github.issues.update({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state,
+                assignees,
+              });
+            }
+
             async function closeWithComment(comment) {
               if (issue.state !== 'open') {
                 debug(`Issue is not open`);
@@ -106,19 +124,8 @@ jobs:
                 labels: [LABEL_NEEDS_MORE_INFORMATION],
               });
 
-              await github.issues.createComment({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                body: formatComment(comment),
-              });
-
-              await github.issues.update({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                state: 'closed',
-              });
+              await createComment(comment);
+              await updateIssue('closed', [user]);
             }
 
             async function openWithComment(comment) {
@@ -149,19 +156,8 @@ jobs:
                 name: LABEL_NEEDS_MORE_INFORMATION,
               });
 
-              await github.issues.createComment({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                body: formatComment(comment),
-              });
-
-              await github.issues.update({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                state: 'open',
-              });
+              await createComment(comment);
+              await updateIssue('open');
             }
 
             const PROBABLY_NOT_A_URL_REGEX = /(^Chrome$|^Firefox$| Website)/i;

From 3c2341416ab3631dffe7a6e525e3cd683c5fa82a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 27 May 2021 17:33:57 +0200
Subject: [PATCH 0570/1603] Update jest to v26 (#21574)

* Install jest 26

* jsdom env now uses 16 by default

* require.requireActual -> jest.requireActual

* deduplicate added deps
---
 package.json                                  |    7 +-
 .../ReactSchedulerIntegration-test.js         |    4 +-
 .../__tests__/ReactProfiler-test.internal.js  |    6 +-
 .../src/__tests__/SchedulerPostTask-test.js   |    2 +-
 scripts/jest/config.base.js                   |    3 +-
 scripts/jest/setupHostConfigs.js              |   20 +-
 scripts/jest/setupTests.build.js              |    2 +-
 scripts/jest/setupTests.persistent.js         |    2 +-
 yarn.lock                                     | 1719 +++++++++--------
 9 files changed, 906 insertions(+), 859 deletions(-)

diff --git a/package.json b/package.json
index 74be41ec3c15..0f650fb1b26e 100644
--- a/package.json
+++ b/package.json
@@ -68,10 +68,9 @@
     "google-closure-compiler": "^20200517.0.0",
     "gzip-size": "^5.1.1",
     "jasmine-check": "^1.0.0-rc.0",
-    "jest": "^25.2.7",
-    "jest-cli": "^25.2.7",
-    "jest-diff": "^25.2.6",
-    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest": "^26.6.3",
+    "jest-cli": "^26.6.3",
+    "jest-diff": "^26.6.2",
     "jest-snapshot-serializer-raw": "^1.1.0",
     "minimatch": "^3.0.4",
     "minimist": "^1.2.3",
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index 5992d993636a..082b7c15f94e 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -187,7 +187,7 @@ describe(
       jest.resetModules();
 
       jest.mock('scheduler', () => {
-        const actual = require.requireActual('scheduler/unstable_mock');
+        const actual = jest.requireActual('scheduler/unstable_mock');
         return {
           ...actual,
           unstable_shouldYield() {
@@ -207,7 +207,7 @@ describe(
 
     afterEach(() => {
       jest.mock('scheduler', () =>
-        require.requireActual('scheduler/unstable_mock'),
+        jest.requireActual('scheduler/unstable_mock'),
       );
     });
 
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 270c204f9cfa..18fa18a365e9 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -229,7 +229,7 @@ describe(`onRender`, () => {
     // Mock the Scheduler module so we can track how many times the current
     // time is read
     jest.mock('scheduler', obj => {
-      const ActualScheduler = require.requireActual('scheduler/unstable_mock');
+      const ActualScheduler = jest.requireActual('scheduler/unstable_mock');
       return {
         ...ActualScheduler,
         unstable_now: function mockUnstableNow() {
@@ -267,9 +267,7 @@ describe(`onRender`, () => {
     ]);
 
     // Restore original mock
-    jest.mock('scheduler', () =>
-      require.requireActual('scheduler/unstable_mock'),
-    );
+    jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
   });
 
   it('does not report work done on a sibling', () => {
diff --git a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
index 883452120b12..19c38ad8972f 100644
--- a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
@@ -31,7 +31,7 @@ describe('SchedulerPostTask', () => {
   beforeEach(() => {
     jest.resetModules();
     jest.mock('scheduler', () =>
-      require.requireActual('scheduler/unstable_post_task'),
+      jest.requireActual('scheduler/unstable_post_task'),
     );
 
     runtime = installMockBrowserRuntime();
diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js
index 425248902029..2920216da595 100644
--- a/scripts/jest/config.base.js
+++ b/scripts/jest/config.base.js
@@ -25,6 +25,5 @@ module.exports = {
 
   testSequencer: require.resolve('./jestSequencer'),
 
-  // TODO: Upgrade to Jest 26 which uses jsdom 16 by default.
-  testEnvironment: require.resolve('jest-environment-jsdom-sixteen'),
+  testEnvironment: 'jsdom',
 };
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index 58f4d4adf124..f21ea11356d2 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -3,7 +3,7 @@
 const inlinedHostConfigs = require('../shared/inlinedHostConfigs');
 
 jest.mock('react-reconciler/src/ReactFiberReconciler', () => {
-  return require.requireActual(
+  return jest.requireActual(
     __VARIANT__
       ? 'react-reconciler/src/ReactFiberReconciler.new'
       : 'react-reconciler/src/ReactFiberReconciler.old'
@@ -16,7 +16,7 @@ const shimHostConfigPath = 'react-reconciler/src/ReactFiberHostConfig';
 jest.mock('react-reconciler', () => {
   return config => {
     jest.mock(shimHostConfigPath, () => config);
-    return require.requireActual('react-reconciler');
+    return jest.requireActual('react-reconciler');
   };
 });
 const shimServerStreamConfigPath = 'react-server/src/ReactServerStreamConfig';
@@ -26,7 +26,7 @@ jest.mock('react-server', () => {
   return config => {
     jest.mock(shimServerStreamConfigPath, () => config);
     jest.mock(shimServerFormatConfigPath, () => config);
-    return require.requireActual('react-server');
+    return jest.requireActual('react-server');
   };
 });
 jest.mock('react-server/flight', () => {
@@ -39,11 +39,11 @@ jest.mock('react-server/flight', () => {
       resolveModuleMetaData: config.resolveModuleMetaData,
     }));
     jest.mock(shimFlightServerConfigPath, () =>
-      require.requireActual(
+      jest.requireActual(
         'react-server/src/forks/ReactFlightServerConfig.custom'
       )
     );
-    return require.requireActual('react-server/flight');
+    return jest.requireActual('react-server/flight');
   };
 });
 const shimFlightClientHostConfigPath =
@@ -51,7 +51,7 @@ const shimFlightClientHostConfigPath =
 jest.mock('react-client/flight', () => {
   return config => {
     jest.mock(shimFlightClientHostConfigPath, () => config);
-    return require.requireActual('react-client/flight');
+    return jest.requireActual('react-client/flight');
   };
 });
 
@@ -69,7 +69,7 @@ function mockAllConfigs(rendererInfo) {
     jest.mock(path, () => {
       let idx = path.lastIndexOf('/');
       let forkPath = path.substr(0, idx) + '/forks' + path.substr(idx);
-      return require.requireActual(`${forkPath}.${rendererInfo.shortName}.js`);
+      return jest.requireActual(`${forkPath}.${rendererInfo.shortName}.js`);
     });
   });
 }
@@ -85,7 +85,7 @@ inlinedHostConfigs.forEach(rendererInfo => {
   rendererInfo.entryPoints.forEach(entryPoint => {
     jest.mock(entryPoint, () => {
       mockAllConfigs(rendererInfo);
-      return require.requireActual(entryPoint);
+      return jest.requireActual(entryPoint);
     });
   });
 });
@@ -93,7 +93,7 @@ inlinedHostConfigs.forEach(rendererInfo => {
 // Make it possible to import this module inside
 // the React package itself.
 jest.mock('shared/ReactSharedInternals', () =>
-  require.requireActual('react/src/ReactSharedInternals')
+  jest.requireActual('react/src/ReactSharedInternals')
 );
 
-jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));
+jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
diff --git a/scripts/jest/setupTests.build.js b/scripts/jest/setupTests.build.js
index f3d4be6c01ee..d7014c7720e4 100644
--- a/scripts/jest/setupTests.build.js
+++ b/scripts/jest/setupTests.build.js
@@ -1,3 +1,3 @@
 'use strict';
 
-jest.mock('scheduler', () => require.requireActual('scheduler/unstable_mock'));
+jest.mock('scheduler', () => jest.requireActual('scheduler/unstable_mock'));
diff --git a/scripts/jest/setupTests.persistent.js b/scripts/jest/setupTests.persistent.js
index e07e74e456e0..1d3f33a68e58 100644
--- a/scripts/jest/setupTests.persistent.js
+++ b/scripts/jest/setupTests.persistent.js
@@ -1,7 +1,7 @@
 'use strict';
 
 jest.mock('react-noop-renderer', () =>
-  require.requireActual('react-noop-renderer/persistent')
+  jest.requireActual('react-noop-renderer/persistent')
 );
 
 global.__PERSISTENT__ = true;
diff --git a/yarn.lock b/yarn.lock
index 8c6accd82945..54504c2fd6af 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18,12 +18,12 @@
   optionalDependencies:
     chokidar "^2.1.8"
 
-"@babel/code-frame@^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==
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13":
+  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.10.4"
+    "@babel/highlight" "^7.12.13"
 
 "@babel/code-frame@^7.8.3":
   version "7.8.3"
@@ -391,10 +391,10 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
-"@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-plugin-utils@^7.10.4", "@babel/helper-plugin-utils@^7.12.13":
+  version "7.13.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
+  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
 "@babel/helper-regex@^7.10.4":
   version "7.10.5"
@@ -481,10 +481,10 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@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.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
+  integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
 
 "@babel/helper-validator-identifier@^7.9.5":
   version "7.9.5"
@@ -528,24 +528,24 @@
     "@babel/traverse" "^7.9.0"
     "@babel/types" "^7.9.0"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.8.3":
-  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==
+"@babel/highlight@^7.12.13", "@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.10.4"
+    "@babel/helper-validator-identifier" "^7.14.0"
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.7.5", "@babel/parser@^7.8.3":
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.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.10.4", "@babel/parser@^7.11.0", "@babel/parser@^7.11.1", "@babel/parser@^7.11.3":
-  version "7.11.3"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.3.tgz#9e1eae46738bcd08e23e867bab43e7b95299a8f9"
-  integrity sha512-REo8xv7+sDxkKvoxEywIdsNFiZLybwdI7hcT5uEPyQrSMB4YQ973BfC9OOrD/81MaIjh6UxdulIQXkjmiH3PcA==
+"@babel/parser@^7.11.0", "@babel/parser@^7.11.1", "@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.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
@@ -683,14 +683,14 @@
     "@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.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.0.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==
@@ -704,12 +704,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@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==
+"@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.10.4"
+    "@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"
@@ -739,14 +739,14 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-import-meta@^7.10.4":
+"@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.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==
@@ -767,54 +767,54 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
-"@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
+"@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.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.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.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.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.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.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==
+"@babel/plugin-syntax-top-level-await@^7.10.4", "@babel/plugin-syntax-top-level-await@^7.8.3":
+  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.10.4"
+    "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-arrow-functions@^7.0.0":
   version "7.8.3"
@@ -1450,16 +1450,16 @@
   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==
+"@babel/template@^7.10.4", "@babel/template@^7.3.3":
+  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.10.4"
-    "@babel/parser" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/code-frame" "^7.12.13"
+    "@babel/parser" "^7.12.13"
+    "@babel/types" "^7.12.13"
 
-"@babel/template@^7.7.4", "@babel/template@^7.8.3":
+"@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==
@@ -1477,7 +1477,7 @@
     "@babel/parser" "^7.8.6"
     "@babel/types" "^7.8.6"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.3":
+"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.3.tgz#a826215b011c9b4f73f3a893afbc05151358bf9a"
   integrity sha512-we+a2lti+eEImHmEXp7bM9cTxGzxPmBiVJlLVD+FuuQMeeO7RaDbutbgeheDkw+Xe3mCfJHnGOWLswT74m2IPg==
@@ -1531,13 +1531,12 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.4.4":
-  version "7.11.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.0.tgz#2ae6bf1ba9ae8c3c43824e5861269871b206e90d"
-  integrity sha512-O53yME4ZZI0jO1EVGtF1ePGl0LHirG4P1ibcD80XyzZcKhcMFeCXmh4Xb1ifGBIV233Qg12x4rBfQgA+tmOukA==
+"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.12.13", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.2.tgz#4208ae003107ef8a057ea8333e56eb64d2f6a2c3"
+  integrity sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==
   dependencies:
-    "@babel/helper-validator-identifier" "^7.10.4"
-    lodash "^4.17.19"
+    "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
 "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
@@ -1617,161 +1616,176 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
   integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@jest/console@^25.2.6":
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-25.2.6.tgz#f594847ec8aef3cf27f448abe97e76e491212e97"
-  integrity sha512-bGp+0PicZVCEhb+ifnW9wpKWONNdkhtJsRE7ap729hiAfTvCN6VhGx0s/l/V/skA2pnyqq+N/7xl9ZWfykDpsg==
+"@jest/console@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.6.2.tgz#4e04bc464014358b03ab4937805ee36a0aeb98f2"
+  integrity sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==
   dependencies:
-    "@jest/source-map" "^25.2.6"
-    chalk "^3.0.0"
-    jest-util "^25.2.6"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^26.6.2"
+    jest-util "^26.6.2"
     slash "^3.0.0"
 
-"@jest/core@^25.2.7":
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-25.2.7.tgz#58d697687e94ee644273d15e4eed6a20e27187cd"
-  integrity sha512-Nd6ELJyR+j0zlwhzkfzY70m04hAur0VnMwJXVe4VmmD/SaQ6DEyal++ERQ1sgyKIKKEqRuui6k/R0wHLez4P+g==
+"@jest/core@^26.6.3":
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
+  integrity sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==
   dependencies:
-    "@jest/console" "^25.2.6"
-    "@jest/reporters" "^25.2.6"
-    "@jest/test-result" "^25.2.6"
-    "@jest/transform" "^25.2.6"
-    "@jest/types" "^25.2.6"
+    "@jest/console" "^26.6.2"
+    "@jest/reporters" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
     ansi-escapes "^4.2.1"
-    chalk "^3.0.0"
+    chalk "^4.0.0"
     exit "^0.1.2"
-    graceful-fs "^4.2.3"
-    jest-changed-files "^25.2.6"
-    jest-config "^25.2.7"
-    jest-haste-map "^25.2.6"
-    jest-message-util "^25.2.6"
-    jest-regex-util "^25.2.6"
-    jest-resolve "^25.2.6"
-    jest-resolve-dependencies "^25.2.7"
-    jest-runner "^25.2.7"
-    jest-runtime "^25.2.7"
-    jest-snapshot "^25.2.7"
-    jest-util "^25.2.6"
-    jest-validate "^25.2.6"
-    jest-watcher "^25.2.7"
+    graceful-fs "^4.2.4"
+    jest-changed-files "^26.6.2"
+    jest-config "^26.6.3"
+    jest-haste-map "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-resolve-dependencies "^26.6.3"
+    jest-runner "^26.6.3"
+    jest-runtime "^26.6.3"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
+    jest-watcher "^26.6.2"
     micromatch "^4.0.2"
     p-each-series "^2.1.0"
-    realpath-native "^2.0.0"
     rimraf "^3.0.0"
     slash "^3.0.0"
     strip-ansi "^6.0.0"
 
-"@jest/environment@^25.2.6":
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-25.2.6.tgz#8f7931e79abd81893ce88b7306f0cc4744835000"
-  integrity sha512-17WIw+wCb9drRNFw1hi8CHah38dXVdOk7ga9exThhGtXlZ9mK8xH4DjSB9uGDGXIWYSHmrxoyS6KJ7ywGr7bzg==
+"@jest/environment@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.6.2.tgz#ba364cc72e221e79cc8f0a99555bf5d7577cf92c"
+  integrity sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==
+  dependencies:
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+
+"@jest/fake-timers@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
+  integrity sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==
   dependencies:
-    "@jest/fake-timers" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    jest-mock "^25.2.6"
+    "@jest/types" "^26.6.2"
+    "@sinonjs/fake-timers" "^6.0.1"
+    "@types/node" "*"
+    jest-message-util "^26.6.2"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
 
-"@jest/fake-timers@^25.1.0", "@jest/fake-timers@^25.2.6":
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-25.5.0.tgz#46352e00533c024c90c2bc2ad9f2959f7f114185"
-  integrity sha512-9y2+uGnESw/oyOI3eww9yaxdZyHq7XvprfP/eeoCsjqKYts2yRlsHS/SgjPDV8FyMfn2nbMy8YzUk6nyvdLOpQ==
+"@jest/globals@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.6.2.tgz#5b613b78a1aa2655ae908eba638cc96a20df720a"
+  integrity sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==
   dependencies:
-    "@jest/types" "^25.5.0"
-    jest-message-util "^25.5.0"
-    jest-mock "^25.5.0"
-    jest-util "^25.5.0"
-    lolex "^5.0.0"
+    "@jest/environment" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    expect "^26.6.2"
 
-"@jest/reporters@^25.2.6":
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-25.2.6.tgz#6d87e40fb15adb69e22bb83aa02a4d88b2253b5f"
-  integrity sha512-DRMyjaxcd6ZKctiXNcuVObnPwB1eUs7xrUVu0J2V0p5/aZJei5UM9GL3s/bmN4hRV8Mt3zXh+/9X2o0Q4ClZIA==
+"@jest/reporters@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.6.2.tgz#1f518b99637a5f18307bd3ecf9275f6882a667f6"
+  integrity sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==
   dependencies:
     "@bcoe/v8-coverage" "^0.2.3"
-    "@jest/console" "^25.2.6"
-    "@jest/test-result" "^25.2.6"
-    "@jest/transform" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    chalk "^3.0.0"
+    "@jest/console" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
     collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.2"
+    graceful-fs "^4.2.4"
     istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^4.0.0"
+    istanbul-lib-instrument "^4.0.3"
     istanbul-lib-report "^3.0.0"
     istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.0.0"
-    jest-haste-map "^25.2.6"
-    jest-resolve "^25.2.6"
-    jest-util "^25.2.6"
-    jest-worker "^25.2.6"
+    istanbul-reports "^3.0.2"
+    jest-haste-map "^26.6.2"
+    jest-resolve "^26.6.2"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
     slash "^3.0.0"
     source-map "^0.6.0"
-    string-length "^3.1.0"
+    string-length "^4.0.1"
     terminal-link "^2.0.0"
-    v8-to-istanbul "^4.0.1"
+    v8-to-istanbul "^7.0.0"
   optionalDependencies:
-    node-notifier "^6.0.0"
+    node-notifier "^8.0.0"
 
-"@jest/source-map@^25.2.6":
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-25.2.6.tgz#0ef2209514c6d445ebccea1438c55647f22abb4c"
-  integrity sha512-VuIRZF8M2zxYFGTEhkNSvQkUKafQro4y+mwUxy5ewRqs5N/ynSFUODYp3fy1zCnbCMy1pz3k+u57uCqx8QRSQQ==
+"@jest/source-map@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
+  integrity sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==
   dependencies:
     callsites "^3.0.0"
-    graceful-fs "^4.2.3"
+    graceful-fs "^4.2.4"
     source-map "^0.6.0"
 
-"@jest/test-result@^25.2.6":
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-25.2.6.tgz#f6082954955313eb96f6cabf9fb14f8017826916"
-  integrity sha512-gmGgcF4qz/pkBzyfJuVHo2DA24kIgVQ5Pf/VpW4QbyMLSegi8z+9foSZABfIt5se6k0fFj/3p/vrQXdaOgit0w==
+"@jest/test-result@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.6.2.tgz#55da58b62df134576cc95476efa5f7949e3f5f18"
+  integrity sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==
   dependencies:
-    "@jest/console" "^25.2.6"
-    "@jest/types" "^25.2.6"
+    "@jest/console" "^26.6.2"
+    "@jest/types" "^26.6.2"
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
-"@jest/test-sequencer@^25.2.7":
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-25.2.7.tgz#e4331f7b4850e34289b9a5c8ec8a2c03b400da8f"
-  integrity sha512-s2uYGOXONDSTJQcZJ9A3Zkg3hwe53RlX1HjUNqjUy3HIqwgwCKJbnAKYsORPbhxXi3ARMKA7JNBi9arsTxXoYw==
+"@jest/test-sequencer@^26.6.3":
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz#98e8a45100863886d074205e8ffdc5a7eb582b17"
+  integrity sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==
   dependencies:
-    "@jest/test-result" "^25.2.6"
-    jest-haste-map "^25.2.6"
-    jest-runner "^25.2.7"
-    jest-runtime "^25.2.7"
+    "@jest/test-result" "^26.6.2"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.6.2"
+    jest-runner "^26.6.3"
+    jest-runtime "^26.6.3"
 
-"@jest/transform@^25.2.6":
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-25.2.6.tgz#007fd946dedf12d2a9eb5d4154faf1991d5f61ff"
-  integrity sha512-rZnjCjZf9avPOf9q/w9RUZ9Uc29JmB53uIXNJmNz04QbDMD5cR/VjfikiMKajBsXe2vnFl5sJ4RTt+9HPicauQ==
+"@jest/transform@^26.6.2":
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
+  integrity sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/types" "^25.2.6"
+    "@jest/types" "^26.6.2"
     babel-plugin-istanbul "^6.0.0"
-    chalk "^3.0.0"
+    chalk "^4.0.0"
     convert-source-map "^1.4.0"
     fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.2.3"
-    jest-haste-map "^25.2.6"
-    jest-regex-util "^25.2.6"
-    jest-util "^25.2.6"
+    graceful-fs "^4.2.4"
+    jest-haste-map "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-util "^26.6.2"
     micromatch "^4.0.2"
     pirates "^4.0.1"
-    realpath-native "^2.0.0"
     slash "^3.0.0"
     source-map "^0.6.1"
     write-file-atomic "^3.0.0"
 
-"@jest/types@^25.2.6", "@jest/types@^25.5.0":
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-25.5.0.tgz#4d6a4793f7b9599fc3680877b856a97dbccf2a9d"
-  integrity sha512-OXD0RgQ86Tu3MazKo8bnrkDRaDXXMGUqd+kTtLtK1Zb7CRzQcaSRPPPV37SvYTdevXEBVxe0HXylEjs8ibkmCw==
+"@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" "^1.1.1"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
     "@types/yargs" "^15.0.0"
-    chalk "^3.0.0"
+    chalk "^4.0.0"
 
 "@mattiasbuelens/web-streams-polyfill@^0.3.2":
   version "0.3.2"
@@ -2050,6 +2064,13 @@
   dependencies:
     type-detect "4.0.8"
 
+"@sinonjs/fake-timers@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
+  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+  dependencies:
+    "@sinonjs/commons" "^1.7.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"
@@ -2057,15 +2078,20 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@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==
+
 "@types/anymatch@*":
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
   integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
 
-"@types/babel__core@^7.1.0":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.2.tgz#608c74f55928033fce18b99b213c16be4b3d114f"
-  integrity sha512-cfCCrFmiGY/yq0NuKNxIQvZFy9kY/1immpSpTngOnyIbD4+eJOG5mxphhHDv3CHL9GltO4GcKr54kGBg3RNdbg==
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
+  version "7.1.14"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
+  integrity sha512-zGZJzzBUVDo/eV6KgbE0f0ZI7dInEYvo12Rb70uNQDshC3SkRMb67ja0GgRHZgAX3Za6rhaWlvbDO8rrGyAb1g==
   dependencies:
     "@babel/parser" "^7.1.0"
     "@babel/types" "^7.0.0"
@@ -2095,6 +2121,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/babel__traverse@^7.0.4":
+  version "7.11.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.11.1.tgz#654f6c4f67568e24c23b367e947098c6206fa639"
+  integrity sha512-Vs0hm0vPahPMYi9tDjtP66llufgO3ST16WXaSTtDGEl9cewAl3AibmxWw6TINOqHPT9z0uABKAYjT9jNSg4npw==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -2124,6 +2157,13 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/graceful-fs@^4.1.2":
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15"
+  integrity sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/html-minifier-terser@^5.0.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz#551a4589b6ee2cc9c1dff08056128aec29b94880"
@@ -2141,12 +2181,11 @@
   dependencies:
     "@types/istanbul-lib-coverage" "*"
 
-"@types/istanbul-reports@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
-  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
+"@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-coverage" "*"
     "@types/istanbul-lib-report" "*"
 
 "@types/json-schema@^7.0.3":
@@ -2174,20 +2213,25 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.12.48.tgz#4135f064eeed9fcfb4756deea5ba2caa11603391"
   integrity sha512-m3Nmo/YaDUfYzdCQlxjF5pIy7TNyDTAJhIa//xtHcF0dlgYIBKULKnmloCPtByDxtZXrWV8Pge1AKT6/lRvVWg==
 
-"@types/prettier@^1.19.0":
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-1.19.1.tgz#33509849f8e679e4add158959fdb086440e9553f"
-  integrity sha512-5qOlnZscTn4xxM5MeGXAMOsIOIKIbh9e85zJWfBRVPlRMEVawzoPhINYbRGkBZCI8LxvBe7tJCdWiarA99OZfQ==
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
+  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
+
+"@types/prettier@^2.0.0":
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.3.tgz#ef65165aea2924c9359205bf748865b8881753c0"
+  integrity sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==
 
 "@types/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
-"@types/stack-utils@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
-  integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
+"@types/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/tapable@*", "@types/tapable@^1.0.5":
   version "1.0.6"
@@ -2576,16 +2620,16 @@ JSONSelect@0.2.1:
   resolved "https://registry.yarnpkg.com/JSONSelect/-/JSONSelect-0.2.1.tgz#415418a526d33fe31d74b4defa3c836d485ec203"
   integrity sha1-QVQYpSbTP+MddLTe+jyDbUhewgM=
 
-abab@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
-  integrity sha512-sY5AXXVZv4Y1VACTtR11UJCPHHudgY5i26Qj5TypE6DKlIApbwb5uqhXcJ5UUGbvZNRh7EeIoW+LrJumBsKp7w==
-
 abab@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.3.tgz#623e2075e02eb2d3f2475e49f99c91846467907a"
   integrity sha512-tsFzPpcttalNjFBCFMqsKYQcWxxen1pgJR56by//QwvJc4/OUS3kPOOttx2tSIfjsylB0pYu7f5D3K1RCxUnUg==
 
+abab@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
+  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+
 abort-controller@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
@@ -2601,14 +2645,6 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-globals@^4.3.2:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
-  integrity sha512-clfQEh21R+D0leSbUdWf3OcfqyaCSAQ8Ryq00bofSekfr9W8u1jyYZo6ir0xu9Gtcf7BjcHJpnbZH7JOCpP60A==
-  dependencies:
-    acorn "^6.0.1"
-    acorn-walk "^6.0.1"
-
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -2622,17 +2658,12 @@ acorn-jsx@^5.0.0, acorn-jsx@^5.2.0:
   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-walk@^6.0.1:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
-  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
-
 acorn-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@^6.0.1, acorn@^6.0.7, acorn@^6.2.1, acorn@^6.4.1:
+acorn@^6.0.7, acorn@^6.2.1, 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==
@@ -2642,6 +2673,11 @@ acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
+acorn@^8.2.4:
+  version "8.2.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.4.tgz#caba24b08185c3b56e3168e97d15ed17f4d31fd0"
+  integrity sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==
+
 adbkit-logcat@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/adbkit-logcat/-/adbkit-logcat-1.1.0.tgz#01d7f9b0cef9093a30bcb3b007efff301508962f"
@@ -2726,6 +2762,13 @@ agent-base@5:
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
 
+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@~4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.2.1.tgz#d89e5999f797875674c07d87f260fc41e83e8ca9"
@@ -3048,11 +3091,6 @@ array-differ@^3.0.0:
   resolved "https://registry.yarnpkg.com/array-differ/-/array-differ-3.0.0.tgz#3cbb3d0f316810eafcc47624734237d6aee4ae6b"
   integrity sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==
 
-array-equal@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/array-equal/-/array-equal-1.0.0.tgz#8c2a5ef2472fd9ea742b04c77a75093ba2757c93"
-  integrity sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=
-
 array-filter@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
@@ -3315,17 +3353,18 @@ babel-eslint@^9.0.0:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
-babel-jest@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-25.2.6.tgz#fe67ff4d0db3626ca8082da8881dd5e84e07ae75"
-  integrity sha512-MDJOAlwtIeIQiGshyX0d2PxTbV73xZMpNji40ivVTPQOm59OdRR9nYCkffqI7ugtsK4JR98HgNKbDbuVf4k5QQ==
+babel-jest@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
+  integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
   dependencies:
-    "@jest/transform" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    "@types/babel__core" "^7.1.0"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/babel__core" "^7.1.7"
     babel-plugin-istanbul "^6.0.0"
-    babel-preset-jest "^25.2.6"
-    chalk "^3.0.0"
+    babel-preset-jest "^26.6.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
     slash "^3.0.0"
 
 babel-loader@^8.0.4:
@@ -3374,11 +3413,14 @@ babel-plugin-istanbul@^6.0.0:
     istanbul-lib-instrument "^4.0.0"
     test-exclude "^6.0.0"
 
-babel-plugin-jest-hoist@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-25.2.6.tgz#2af07632b8ac7aad7d414c1e58425d5fc8e84909"
-  integrity sha512-qE2xjMathybYxjiGFJg0mLFrz0qNp83aNZycWDY/SuHiZNq+vQfRQtuINqyXyue1ELd8Rd+1OhFSLjms8msMbw==
+babel-plugin-jest-hoist@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz#8185bd030348d254c6d7dd974355e6a28b21e62d"
+  integrity sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
   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-syntax-trailing-function-commas@^6.5.0:
@@ -3391,6 +3433,24 @@ babel-plugin-syntax-trailing-function-commas@^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-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.3.0"
   resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-3.3.0.tgz#a6024764ea86c8e06a22d794ca8b69534d263541"
@@ -3424,14 +3484,13 @@ babel-preset-fbjs@^3.2.0:
     "@babel/plugin-transform-template-literals" "^7.0.0"
     babel-plugin-syntax-trailing-function-commas "^7.0.0-beta.0"
 
-babel-preset-jest@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-25.2.6.tgz#5d3f7c99e2a8508d61775c9d68506d143b7f71b5"
-  integrity sha512-Xh2eEAwaLY9+SyMt/xmGZDnXTW/7pSaBPG0EMo7EuhvosFKVWYB6CqwYD31DaEQuoTL090oDZ0FEqygffGRaSQ==
+babel-preset-jest@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz#747872b1171df032252426586881d62d31798fee"
+  integrity sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==
   dependencies:
-    "@babel/plugin-syntax-bigint" "^7.0.0"
-    "@babel/plugin-syntax-object-rest-spread" "^7.0.0"
-    babel-plugin-jest-hoist "^25.2.6"
+    babel-plugin-jest-hoist "^26.6.2"
+    babel-preset-current-node-syntax "^1.0.0"
 
 balanced-match@^1.0.0:
   version "1.0.0"
@@ -3644,17 +3703,12 @@ brorand@^1.0.1:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
-browser-process-hrtime@^0.1.2:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-0.1.3.tgz#616f00faef1df7ec1b5bf9cfe2bdc3170f26c7b4"
-  integrity sha512-bRFnI4NnjO6cnyLmOV/7PVoDEMJChlcfN0z4s1YMBY989/SvlfMI1lgCnkFUs53e9gQF+w7qu7XdllSTiSl8Aw==
-
 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==
 
-browser-resolve@^1.11.0, browser-resolve@^1.11.3:
+browser-resolve@^1.11.0:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
   integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
@@ -4027,6 +4081,11 @@ chalk@^3.0.0:
     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==
+
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -4152,6 +4211,11 @@ cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
+cjs-module-lexer@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f"
+  integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -4351,7 +4415,7 @@ columnify@1.5.4:
     strip-ansi "^3.0.0"
     wcwidth "^1.0.0"
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+combined-stream@^1.0.6, combined-stream@^1.0.8, 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==
@@ -4861,7 +4925,7 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssom@^0.4.1, cssom@^0.4.4:
+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==
@@ -4871,14 +4935,7 @@ cssom@~0.3.6:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssstyle@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-2.2.0.tgz#e4c44debccd6b7911ed617a4395e5754bba59992"
-  integrity sha512-sEb3XFPx3jNnCAMtqrXPDeSgQr+jojtCeNf8cvMNMh1cG970+lljssvQDzPq6lmmJu2Vhqood/gtEomBiHOGnA==
-  dependencies:
-    cssom "~0.3.6"
-
-cssstyle@^2.2.0:
+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==
@@ -4944,15 +5001,6 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-data-urls@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-1.1.0.tgz#15ee0582baa5e22bb59c77140da8f9c76963bbfe"
-  integrity sha512-YTWYI9se1P55u58gL5GkQHW4P6VJBJ5iBT+B5a7i2Tjadhv52paJG0qHX4A0OR6/t52odI64KP2YvFpkDOi3eQ==
-  dependencies:
-    abab "^2.0.0"
-    whatwg-mimetype "^2.2.0"
-    whatwg-url "^7.0.0"
-
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@@ -5012,10 +5060,10 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decimal.js@^10.2.0:
-  version "10.2.0"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.0.tgz#39466113a9e036111d02f82489b5fd6b0b5ed231"
-  integrity sha512-vDPw+rDgn3bZe1+F/pyEwb1oMG2XTlRVgAa6B4KccTEpYgF8w6eQllVbQcfIJnZyvzFtFpxnpGtx8dd7DJp/Rw==
+decimal.js@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
+  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
 
 decode-uri-component@^0.2.0:
   version "0.2.0"
@@ -5181,10 +5229,10 @@ dezalgo@^1.0.0:
     asap "^2.0.0"
     wrappy "1"
 
-diff-sequences@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-25.2.6.tgz#5f467c00edd35352b7bca46d7927d60e687a76dd"
-  integrity sha512-Hq8o7+6GaZeoFjtpgvRBUknSXNeJiCx7V9Fr94ZMljNiCr9n9L8H8aJqgWOQiDDGdyn29fRNcDdRVJ5fdyihfg==
+diff-sequences@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
+  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
 
 diff@4.0.1:
   version "4.0.1"
@@ -5298,13 +5346,6 @@ domelementtype@^2.0.1:
   resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.0.1.tgz#1f8bdfe91f5a78063274e803b4bdcedf6e94f94d"
   integrity sha512-5HOHUDsYZWV8FGWN0Njbr/Rn7f/eWSQi1v7+HsUVwXgn8nWWlL64zKDkS0n8ZmQ3mlWOMuXOnR+7Nx/5tMO5AQ==
 
-domexception@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90"
-  integrity sha512-raigMkn7CJNNo6Ihro1fzG7wr3fHuYVytzquZKX5n0yizGsTcYgzdIUwj1X9pK0VvjeihV+XiclP+DjwbsSKug==
-  dependencies:
-    webidl-conversions "^4.0.2"
-
 domexception@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/domexception/-/domexception-2.0.1.tgz#fb44aefba793e1574b0af6aed2801d057529f304"
@@ -5435,6 +5476,11 @@ elliptic@^6.0.0, elliptic@^6.5.2:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+emittery@^0.7.1:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
+  integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
+
 emoji-regex@^7.0.1:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
@@ -5702,30 +5748,23 @@ escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1
   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==
+
 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.11.1:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.13.0.tgz#c7adf9bd3f3cc675bb752f202f79a720189cab29"
-  integrity sha512-eYk2dCkxR07DsHA/X2hRBj0CFAZeri/LyDMc0C8JT1Hqi6JnVpMhJ7XFITbb0+yZS3lVkaPL2oCkZ3AVmeVbMw==
-  dependencies:
-    esprima "^4.0.1"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
-escodegen@^1.14.1:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
-  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+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 "^4.2.0"
+    estraverse "^5.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
@@ -6011,7 +6050,7 @@ esrecurse@^4.1.0:
   dependencies:
     estraverse "^4.1.0"
 
-estraverse@^4.0.0, estraverse@^4.2.0:
+estraverse@^4.0.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
   integrity sha1-De4/7TH81GlhjOc0IJn8GvoL2xM=
@@ -6021,7 +6060,7 @@ estraverse@^4.1.0, estraverse@^4.1.1:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
-estraverse@^5.1.0:
+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==
@@ -6117,22 +6156,6 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^3.2.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-3.4.0.tgz#c08ed4550ef65d858fac269ffc8572446f37eb89"
-  integrity sha512-r9vdGQk4bmCuK1yKQu1KTwcT2zwfWdbdaXfCtAh+5nU/4fSX+JAb7vZGvI5naJrQlvONrEB20jeruESI69530g==
-  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"
-    p-finally "^2.0.0"
-    signal-exit "^3.0.2"
-    strip-final-newline "^2.0.0"
-
 execa@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/execa/-/execa-4.0.3.tgz#0a34dabbad6d66100bd6f2c576c8669403f317f2"
@@ -6187,17 +6210,17 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
-expect@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-25.2.7.tgz#509b79f47502835f4071ff3ecc401f2eaecca709"
-  integrity sha512-yA+U2Ph0MkMsJ9N8q5hs9WgWI6oJYfecdXta6LkP/alY/jZZL1MHlJ2wbLh60Ucqf3G+51ytbqV3mlGfmxkpNw==
+expect@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
+  integrity sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==
   dependencies:
-    "@jest/types" "^25.2.6"
+    "@jest/types" "^26.6.2"
     ansi-styles "^4.0.0"
-    jest-get-type "^25.2.6"
-    jest-matcher-utils "^25.2.7"
-    jest-message-util "^25.2.6"
-    jest-regex-util "^25.2.6"
+    jest-get-type "^26.3.0"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-regex-util "^26.0.0"
 
 express@^4.17.1:
   version "4.17.1"
@@ -6704,6 +6727,15 @@ form-data@^2.5.0:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+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@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -7179,7 +7211,7 @@ graceful-fs@4.1.15:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
 
-graceful-fs@^4.1.0, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
+graceful-fs@^4.1.0, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
   integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
@@ -7217,7 +7249,7 @@ har-schema@^2.0.0:
   resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
   integrity sha1-qUwiJOvKwEeCoNkDVSHyRzW37JI=
 
-har-validator@~5.1.0, har-validator@~5.1.3:
+har-validator@~5.1.0:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/har-validator/-/har-validator-5.1.3.tgz#1ef89ebd3e4996557675eed9893110dc350fa080"
   integrity sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==
@@ -7343,6 +7375,11 @@ homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
   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==
+
 hosted-git-info@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.2.tgz#8b7e3bd114b59b51786f8bade0f39ddc80275a97"
@@ -7360,13 +7397,6 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-html-encoding-sniffer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
-  integrity sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==
-  dependencies:
-    whatwg-encoding "^1.0.1"
-
 html-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"
@@ -7500,6 +7530,15 @@ http-proxy-agent@^3.0.0:
     agent-base "5"
     debug "4"
 
+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@0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
@@ -7554,6 +7593,14 @@ https-proxy-agent@^4.0.0:
     agent-base "5"
     debug "4"
 
+https-proxy-agent@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
+  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
+  dependencies:
+    agent-base "6"
+    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"
@@ -7889,6 +7936,13 @@ is-ci@^2.0.0:
   dependencies:
     ci-info "^2.0.0"
 
+is-core-module@^2.2.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
+  integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
+  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"
@@ -8133,10 +8187,10 @@ is-posix-bracket@^0.1.0:
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
   integrity sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=
 
-is-potential-custom-element-name@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
-  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+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-primitive@^2.0.0:
   version "2.0.0"
@@ -8305,15 +8359,12 @@ istanbul-lib-coverage@^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-instrument@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.0.tgz#53321a7970f076262fd3292c8f9b2e4ac544aae1"
-  integrity sha512-Nm4wVHdo7ZXSG30KjZ2Wl5SU/Bw7bDx1PdaiIFzEStdjs0H12mOTncn1GVYuqQSaZxpg87VGBRsVRPGD2cD1AQ==
+istanbul-lib-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
+  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
   dependencies:
     "@babel/core" "^7.7.5"
-    "@babel/parser" "^7.7.5"
-    "@babel/template" "^7.7.4"
-    "@babel/traverse" "^7.7.4"
     "@istanbuljs/schema" "^0.1.2"
     istanbul-lib-coverage "^3.0.0"
     semver "^6.3.0"
@@ -8336,10 +8387,10 @@ istanbul-lib-source-maps@^4.0.0:
     istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.0.tgz#d4d16d035db99581b6194e119bbf36c963c5eb70"
-  integrity sha512-2osTcC8zcOSUkImzN2EWQta3Vdi4WjjKw99P2yWx5mLnigAM0Rd5uYFn1cf2i/Ois45GkNjaoTqc5CxgMSX80A==
+istanbul-reports@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
+  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
   dependencies:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
@@ -8356,394 +8407,383 @@ jed@1.1.1:
   resolved "https://registry.yarnpkg.com/jed/-/jed-1.1.1.tgz#7a549bbd9ffe1585b0cd0a191e203055bee574b4"
   integrity sha1-elSbvZ/+FYWwzQoZHiAwVb7ldLQ=
 
-jest-changed-files@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-25.2.6.tgz#7d569cd6b265b1a84db3914db345d9c452f26b71"
-  integrity sha512-F7l2m5n55jFnJj4ItB9XbAlgO+6umgvz/mdK76BfTd2NGkvGf9x96hUXP/15a1K0k14QtVOoutwpRKl360msvg==
+jest-changed-files@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
+  integrity sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==
   dependencies:
-    "@jest/types" "^25.2.6"
-    execa "^3.2.0"
+    "@jest/types" "^26.6.2"
+    execa "^4.0.0"
     throat "^5.0.0"
 
-jest-cli@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-25.2.7.tgz#515b61fee402c397ffa8d570532f7b039c3159f4"
-  integrity sha512-OOAZwY4Jkd3r5WhVM5L3JeLNFaylvHUczMLxQDVLrrVyb1Cy+DNJ6MVsb5TLh6iBklB42m5TOP+IbOgKGGOtMw==
+jest-cli@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
+  integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
   dependencies:
-    "@jest/core" "^25.2.7"
-    "@jest/test-result" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    chalk "^3.0.0"
+    "@jest/core" "^26.6.3"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
     exit "^0.1.2"
+    graceful-fs "^4.2.4"
     import-local "^3.0.2"
     is-ci "^2.0.0"
-    jest-config "^25.2.7"
-    jest-util "^25.2.6"
-    jest-validate "^25.2.6"
+    jest-config "^26.6.3"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
     prompts "^2.0.1"
-    realpath-native "^2.0.0"
-    yargs "^15.3.1"
+    yargs "^15.4.1"
 
-jest-config@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-25.2.7.tgz#a14e5b96575987ce913dd9fc20ac8cd4b35a8c29"
-  integrity sha512-rIdPPXR6XUxi+7xO4CbmXXkE6YWprvlKc4kg1SrkCL2YV5m/8MkHstq9gBZJ19Qoa3iz/GP+0sTG/PcIwkFojg==
+jest-config@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
+  integrity sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==
   dependencies:
     "@babel/core" "^7.1.0"
-    "@jest/test-sequencer" "^25.2.7"
-    "@jest/types" "^25.2.6"
-    babel-jest "^25.2.6"
-    chalk "^3.0.0"
+    "@jest/test-sequencer" "^26.6.3"
+    "@jest/types" "^26.6.2"
+    babel-jest "^26.6.3"
+    chalk "^4.0.0"
     deepmerge "^4.2.2"
     glob "^7.1.1"
-    jest-environment-jsdom "^25.2.6"
-    jest-environment-node "^25.2.6"
-    jest-get-type "^25.2.6"
-    jest-jasmine2 "^25.2.7"
-    jest-regex-util "^25.2.6"
-    jest-resolve "^25.2.6"
-    jest-util "^25.2.6"
-    jest-validate "^25.2.6"
+    graceful-fs "^4.2.4"
+    jest-environment-jsdom "^26.6.2"
+    jest-environment-node "^26.6.2"
+    jest-get-type "^26.3.0"
+    jest-jasmine2 "^26.6.3"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
     micromatch "^4.0.2"
-    pretty-format "^25.2.6"
-    realpath-native "^2.0.0"
+    pretty-format "^26.6.2"
 
-jest-diff@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-25.2.6.tgz#a6d70a9ab74507715ea1092ac513d1ab81c1b5e7"
-  integrity sha512-KuadXImtRghTFga+/adnNrv9s61HudRMR7gVSbP35UKZdn4IK2/0N0PpGZIqtmllK9aUyye54I3nu28OYSnqOg==
+jest-diff@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
+  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
   dependencies:
-    chalk "^3.0.0"
-    diff-sequences "^25.2.6"
-    jest-get-type "^25.2.6"
-    pretty-format "^25.2.6"
+    chalk "^4.0.0"
+    diff-sequences "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
 
-jest-docblock@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-25.2.6.tgz#4b09f1e7b7d6b3f39242ef3647ac7106770f722b"
-  integrity sha512-VAYrljEq0upq0oERfIaaNf28gC6p9gORndhHstCYF8NWGNQJnzoaU//S475IxfWMk4UjjVmS9rJKLe5Jjjbixw==
+jest-docblock@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
+  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
   dependencies:
     detect-newline "^3.0.0"
 
-jest-each@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-25.2.6.tgz#026f6dea2ccc443c35cea793265620aab1b278b6"
-  integrity sha512-OgQ01VINaRD6idWJOhCYwUc5EcgHBiFlJuw+ON2VgYr7HLtMFyCcuo+3mmBvuLUH4QudREZN7cDCZviknzsaJQ==
+jest-each@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.6.2.tgz#02526438a77a67401c8a6382dfe5999952c167cb"
+  integrity sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==
   dependencies:
-    "@jest/types" "^25.2.6"
-    chalk "^3.0.0"
-    jest-get-type "^25.2.6"
-    jest-util "^25.2.6"
-    pretty-format "^25.2.6"
-
-jest-environment-jsdom-sixteen@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom-sixteen/-/jest-environment-jsdom-sixteen-1.0.3.tgz#e222228fac537ef15cca5ad470b19b47d9690165"
-  integrity sha512-CwMqDUUfSl808uGPWXlNA1UFkWFgRmhHvyAjhCmCry6mYq4b/nn80MMN7tglqo5XgrANIs/w+mzINPzbZ4ZZrQ==
-  dependencies:
-    "@jest/fake-timers" "^25.1.0"
-    jest-mock "^25.1.0"
-    jest-util "^25.1.0"
-    jsdom "^16.2.1"
-
-jest-environment-jsdom@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-25.2.6.tgz#b7ae41c6035905b8e58d63a8f63cf8eaa00af279"
-  integrity sha512-/o7MZIhGmLGIEG5j7r5B5Az0umWLCHU+F5crwfbm0BzC4ybHTJZOQTFQWhohBg+kbTCNOuftMcqHlVkVduJCQQ==
-  dependencies:
-    "@jest/environment" "^25.2.6"
-    "@jest/fake-timers" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    jest-mock "^25.2.6"
-    jest-util "^25.2.6"
-    jsdom "^15.2.1"
-
-jest-environment-node@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-25.2.6.tgz#ad4398432867113f474d94fe37b071ed04b30f3d"
-  integrity sha512-D1Ihj14fxZiMHGeTtU/LunhzSI+UeBvlr/rcXMTNyRMUMSz2PEhuqGbB78brBY6Dk3FhJDk7Ta+8reVaGjLWhA==
-  dependencies:
-    "@jest/environment" "^25.2.6"
-    "@jest/fake-timers" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    jest-mock "^25.2.6"
-    jest-util "^25.2.6"
-    semver "^6.3.0"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
+    jest-util "^26.6.2"
+    pretty-format "^26.6.2"
+
+jest-environment-jsdom@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
+  integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
+    jsdom "^16.4.0"
+
+jest-environment-node@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c"
+  integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==
+  dependencies:
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    jest-mock "^26.6.2"
+    jest-util "^26.6.2"
 
-jest-get-type@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-25.2.6.tgz#0b0a32fab8908b44d508be81681487dbabb8d877"
-  integrity sha512-DxjtyzOHjObRM+sM1knti6or+eOgcGU4xVSb2HNP1TqO4ahsT+rqZg+nyqHWJSvWgKC5cG3QjGFBqxLghiF/Ig==
+jest-get-type@^26.3.0:
+  version "26.3.0"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
+  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
 
-jest-haste-map@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-25.2.6.tgz#4aa6bcfa15310afccdb9ca77af58a98add8cedb8"
-  integrity sha512-nom0+fnY8jwzelSDQnrqaKAcDZczYQvMEwcBjeL3PQ4MlcsqeB7dmrsAniUw/9eLkngT5DE6FhnenypilQFsgA==
+jest-haste-map@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
+  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
   dependencies:
-    "@jest/types" "^25.2.6"
+    "@jest/types" "^26.6.2"
+    "@types/graceful-fs" "^4.1.2"
+    "@types/node" "*"
     anymatch "^3.0.3"
     fb-watchman "^2.0.0"
-    graceful-fs "^4.2.3"
-    jest-serializer "^25.2.6"
-    jest-util "^25.2.6"
-    jest-worker "^25.2.6"
+    graceful-fs "^4.2.4"
+    jest-regex-util "^26.0.0"
+    jest-serializer "^26.6.2"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
     micromatch "^4.0.2"
     sane "^4.0.3"
     walker "^1.0.7"
-    which "^2.0.2"
   optionalDependencies:
     fsevents "^2.1.2"
 
-jest-jasmine2@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-25.2.7.tgz#55ff87f8f462ef0e2f16fd19430b8be8bcebef0e"
-  integrity sha512-HeQxEbonp8fUvik9jF0lkU9ab1u5TQdIb7YSU9Fj7SxWtqHNDGyCpF6ZZ3r/5yuertxi+R95Ba9eA91GMQ38eA==
+jest-jasmine2@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
+  integrity sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==
   dependencies:
     "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^25.2.6"
-    "@jest/source-map" "^25.2.6"
-    "@jest/test-result" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    chalk "^3.0.0"
+    "@jest/environment" "^26.6.2"
+    "@jest/source-map" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
     co "^4.6.0"
-    expect "^25.2.7"
+    expect "^26.6.2"
     is-generator-fn "^2.0.0"
-    jest-each "^25.2.6"
-    jest-matcher-utils "^25.2.7"
-    jest-message-util "^25.2.6"
-    jest-runtime "^25.2.7"
-    jest-snapshot "^25.2.7"
-    jest-util "^25.2.6"
-    pretty-format "^25.2.6"
+    jest-each "^26.6.2"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-runtime "^26.6.3"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    pretty-format "^26.6.2"
     throat "^5.0.0"
 
-jest-leak-detector@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-25.2.6.tgz#68fbaf651142292b03e30641f33e15af9b8c62b1"
-  integrity sha512-n+aJUM+j/x1kIaPVxzerMqhAUuqTU1PL5kup46rXh+l9SP8H6LqECT/qD1GrnylE1L463/0StSPkH4fUpkuEjA==
+jest-leak-detector@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz#7717cf118b92238f2eba65054c8a0c9c653a91af"
+  integrity sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==
   dependencies:
-    jest-get-type "^25.2.6"
-    pretty-format "^25.2.6"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
 
-jest-matcher-utils@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-25.2.7.tgz#53fad3c11fc42e92e374306df543026712c957a3"
-  integrity sha512-jNYmKQPRyPO3ny0KY1I4f0XW4XnpJ3Nx5ovT4ik0TYDOYzuXJW40axqOyS61l/voWbVT9y9nZ1THL1DlpaBVpA==
+jest-matcher-utils@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
+  integrity sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==
   dependencies:
-    chalk "^3.0.0"
-    jest-diff "^25.2.6"
-    jest-get-type "^25.2.6"
-    pretty-format "^25.2.6"
+    chalk "^4.0.0"
+    jest-diff "^26.6.2"
+    jest-get-type "^26.3.0"
+    pretty-format "^26.6.2"
 
-jest-message-util@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.2.6.tgz#9d5523bebec8cd9cdef75f0f3069d6ec9a2252df"
-  integrity sha512-Hgg5HbOssSqOuj+xU1mi7m3Ti2nwSQJQf/kxEkrz2r2rp2ZLO1pMeKkz2WiDUWgSR+APstqz0uMFcE5yc0qdcg==
+jest-message-util@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
+  integrity sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@jest/types" "^25.2.6"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^3.0.0"
+    "@jest/types" "^26.6.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
     micromatch "^4.0.2"
+    pretty-format "^26.6.2"
     slash "^3.0.0"
-    stack-utils "^1.0.1"
+    stack-utils "^2.0.2"
 
-jest-message-util@^25.5.0:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-25.5.0.tgz#ea11d93204cc7ae97456e1d8716251185b8880ea"
-  integrity sha512-ezddz3YCT/LT0SKAmylVyWWIGYoKHOFOFXx3/nA4m794lfVUskMcwhip6vTgdVrOtYdjeQeis2ypzes9mZb4EA==
+jest-mock@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
+  integrity sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==
   dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/types" "^25.5.0"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^3.0.0"
-    graceful-fs "^4.2.4"
-    micromatch "^4.0.2"
-    slash "^3.0.0"
-    stack-utils "^1.0.1"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
 
-jest-mock@^25.1.0, jest-mock@^25.5.0:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.5.0.tgz#a91a54dabd14e37ecd61665d6b6e06360a55387a"
-  integrity sha512-eXWuTV8mKzp/ovHc5+3USJMYsTBhyQ+5A1Mak35dey/RG8GlM4YWVylZuGgVXinaW6tpvk/RSecmF37FKUlpXA==
+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@^26.0.0:
+  version "26.0.0"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
+  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
+
+jest-resolve-dependencies@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
+  integrity sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==
   dependencies:
-    "@jest/types" "^25.5.0"
+    "@jest/types" "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-snapshot "^26.6.2"
 
-jest-mock@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-25.2.6.tgz#8df66eaa55a713d0f2a7dfb4f14507289d24dfa3"
-  integrity sha512-vc4nibavi2RGPdj/MyZy/azuDjZhpYZLvpfgq1fxkhbyTpKVdG7CgmRVKJ7zgLpY5kuMjTzDYA6QnRwhsCU+tA==
+jest-resolve@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.2.tgz#a3ab1517217f469b504f1b56603c5bb541fbb507"
+  integrity sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==
   dependencies:
-    "@jest/types" "^25.2.6"
+    "@jest/types" "^26.6.2"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    jest-pnp-resolver "^1.2.2"
+    jest-util "^26.6.2"
+    read-pkg-up "^7.0.1"
+    resolve "^1.18.1"
+    slash "^3.0.0"
 
-jest-pnp-resolver@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.1.tgz#ecdae604c077a7fbc70defb6d517c3c1c898923a"
-  integrity sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ==
-
-jest-regex-util@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-25.2.6.tgz#d847d38ba15d2118d3b06390056028d0f2fd3964"
-  integrity sha512-KQqf7a0NrtCkYmZZzodPftn7fL1cq3GQAFVMn5Hg8uKx/fIenLEobNanUxb7abQ1sjADHBseG/2FGpsv/wr+Qw==
-
-jest-resolve-dependencies@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-25.2.7.tgz#9ca4c62d67cce031a27fa5d5705b4b5b5c029d23"
-  integrity sha512-IrnMzCAh11Xd2gAOJL+ThEW6QO8DyqNdvNkQcaCticDrOAr9wtKT7yT6QBFFjqKFgjjvaVKDs59WdgUhgYnHnQ==
-  dependencies:
-    "@jest/types" "^25.2.6"
-    jest-regex-util "^25.2.6"
-    jest-snapshot "^25.2.7"
-
-jest-resolve@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-25.2.6.tgz#84694ead5da13c2890ac04d4a78699ba937f3896"
-  integrity sha512-7O61GVdcAXkLz/vNGKdF+00A80/fKEAA47AEXVNcZwj75vEjPfZbXDaWFmAQCyXj4oo9y9dC9D+CLA11t8ieGw==
-  dependencies:
-    "@jest/types" "^25.2.6"
-    browser-resolve "^1.11.3"
-    chalk "^3.0.0"
-    jest-pnp-resolver "^1.2.1"
-    realpath-native "^2.0.0"
-    resolve "^1.15.1"
-
-jest-runner@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-25.2.7.tgz#3676c01dc0104caa8a0ebb8507df382c88f2a1e2"
-  integrity sha512-RFEr71nMrtNwcpoHzie5+fe1w3JQCGMyT2xzNwKe3f88+bK+frM2o1v24gEcPxQ2QqB3COMCe2+1EkElP+qqqQ==
-  dependencies:
-    "@jest/console" "^25.2.6"
-    "@jest/environment" "^25.2.6"
-    "@jest/test-result" "^25.2.6"
-    "@jest/types" "^25.2.6"
-    chalk "^3.0.0"
+jest-runner@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
+  integrity sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/environment" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    emittery "^0.7.1"
     exit "^0.1.2"
-    graceful-fs "^4.2.3"
-    jest-config "^25.2.7"
-    jest-docblock "^25.2.6"
-    jest-haste-map "^25.2.6"
-    jest-jasmine2 "^25.2.7"
-    jest-leak-detector "^25.2.6"
-    jest-message-util "^25.2.6"
-    jest-resolve "^25.2.6"
-    jest-runtime "^25.2.7"
-    jest-util "^25.2.6"
-    jest-worker "^25.2.6"
+    graceful-fs "^4.2.4"
+    jest-config "^26.6.3"
+    jest-docblock "^26.0.0"
+    jest-haste-map "^26.6.2"
+    jest-leak-detector "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-resolve "^26.6.2"
+    jest-runtime "^26.6.3"
+    jest-util "^26.6.2"
+    jest-worker "^26.6.2"
     source-map-support "^0.5.6"
     throat "^5.0.0"
 
-jest-runtime@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-25.2.7.tgz#cb10e695d036671a83aec3a3803163c354043ac9"
-  integrity sha512-Gw3X8KxTTFylu2T/iDSNKRUQXQiPIYUY0b66GwVYa7W8wySkUljKhibQHSq0VhmCAN7vRBEQjlVQ+NFGNmQeBw==
-  dependencies:
-    "@jest/console" "^25.2.6"
-    "@jest/environment" "^25.2.6"
-    "@jest/source-map" "^25.2.6"
-    "@jest/test-result" "^25.2.6"
-    "@jest/transform" "^25.2.6"
-    "@jest/types" "^25.2.6"
+jest-runtime@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
+  integrity sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==
+  dependencies:
+    "@jest/console" "^26.6.2"
+    "@jest/environment" "^26.6.2"
+    "@jest/fake-timers" "^26.6.2"
+    "@jest/globals" "^26.6.2"
+    "@jest/source-map" "^26.6.2"
+    "@jest/test-result" "^26.6.2"
+    "@jest/transform" "^26.6.2"
+    "@jest/types" "^26.6.2"
     "@types/yargs" "^15.0.0"
-    chalk "^3.0.0"
+    chalk "^4.0.0"
+    cjs-module-lexer "^0.6.0"
     collect-v8-coverage "^1.0.0"
     exit "^0.1.2"
     glob "^7.1.3"
-    graceful-fs "^4.2.3"
-    jest-config "^25.2.7"
-    jest-haste-map "^25.2.6"
-    jest-message-util "^25.2.6"
-    jest-mock "^25.2.6"
-    jest-regex-util "^25.2.6"
-    jest-resolve "^25.2.6"
-    jest-snapshot "^25.2.7"
-    jest-util "^25.2.6"
-    jest-validate "^25.2.6"
-    realpath-native "^2.0.0"
+    graceful-fs "^4.2.4"
+    jest-config "^26.6.3"
+    jest-haste-map "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-mock "^26.6.2"
+    jest-regex-util "^26.0.0"
+    jest-resolve "^26.6.2"
+    jest-snapshot "^26.6.2"
+    jest-util "^26.6.2"
+    jest-validate "^26.6.2"
     slash "^3.0.0"
     strip-bom "^4.0.0"
-    yargs "^15.3.1"
+    yargs "^15.4.1"
 
-jest-serializer@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-25.2.6.tgz#3bb4cc14fe0d8358489dbbefbb8a4e708ce039b7"
-  integrity sha512-RMVCfZsezQS2Ww4kB5HJTMaMJ0asmC0BHlnobQC6yEtxiFKIxohFA4QSXSabKwSggaNkqxn6Z2VwdFCjhUWuiQ==
+jest-serializer@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
+  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
+  dependencies:
+    "@types/node" "*"
+    graceful-fs "^4.2.4"
 
 jest-snapshot-serializer-raw@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/jest-snapshot-serializer-raw/-/jest-snapshot-serializer-raw-1.1.0.tgz#1d7f09c02f3dbbc3ae70b5b7598fb2f45e37d6c8"
   integrity sha512-OL3bXRCnSn7Kur3YTGYj+A3Hwh2eyb5QL5VLQ9OSsPBOva7r3sCB0Jf1rOT/KN3ypzH42hrkDz96lpbiMo+AlQ==
 
-jest-snapshot@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-25.2.7.tgz#7eeafeef4dcbda1c47c8503d2bf5212b6430aac6"
-  integrity sha512-Rm8k7xpGM4tzmYhB6IeRjsOMkXaU8/FOz5XlU6oYwhy53mq6txVNqIKqN1VSiexzpC80oWVxVDfUDt71M6XPOA==
+jest-snapshot@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
+  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
   dependencies:
     "@babel/types" "^7.0.0"
-    "@jest/types" "^25.2.6"
-    "@types/prettier" "^1.19.0"
-    chalk "^3.0.0"
-    expect "^25.2.7"
-    jest-diff "^25.2.6"
-    jest-get-type "^25.2.6"
-    jest-matcher-utils "^25.2.7"
-    jest-message-util "^25.2.6"
-    jest-resolve "^25.2.6"
-    make-dir "^3.0.0"
+    "@jest/types" "^26.6.2"
+    "@types/babel__traverse" "^7.0.4"
+    "@types/prettier" "^2.0.0"
+    chalk "^4.0.0"
+    expect "^26.6.2"
+    graceful-fs "^4.2.4"
+    jest-diff "^26.6.2"
+    jest-get-type "^26.3.0"
+    jest-haste-map "^26.6.2"
+    jest-matcher-utils "^26.6.2"
+    jest-message-util "^26.6.2"
+    jest-resolve "^26.6.2"
     natural-compare "^1.4.0"
-    pretty-format "^25.2.6"
-    semver "^6.3.0"
+    pretty-format "^26.6.2"
+    semver "^7.3.2"
 
-jest-util@^25.1.0, jest-util@^25.2.6, jest-util@^25.5.0:
-  version "25.5.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-25.5.0.tgz#31c63b5d6e901274d264a4fec849230aa3fa35b0"
-  integrity sha512-KVlX+WWg1zUTB9ktvhsg2PXZVdkI1NBevOJSkTKYAyXyH4QSvh+Lay/e/v+bmaFfrkfx43xD8QTfgobzlEXdIA==
+jest-util@^26.6.2:
+  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" "^25.5.0"
-    chalk "^3.0.0"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
     graceful-fs "^4.2.4"
     is-ci "^2.0.0"
-    make-dir "^3.0.0"
+    micromatch "^4.0.2"
 
-jest-validate@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-25.2.6.tgz#ab3631fb97e242c42b09ca53127abe0b12e9125e"
-  integrity sha512-a4GN7hYbqQ3Rt9iHsNLFqQz7HDV7KiRPCwPgo5nqtTIWNZw7gnT8KchG+Riwh+UTSn8REjFCodGp50KX/fRNgQ==
+jest-validate@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
+  integrity sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==
   dependencies:
-    "@jest/types" "^25.2.6"
-    camelcase "^5.3.1"
-    chalk "^3.0.0"
-    jest-get-type "^25.2.6"
+    "@jest/types" "^26.6.2"
+    camelcase "^6.0.0"
+    chalk "^4.0.0"
+    jest-get-type "^26.3.0"
     leven "^3.1.0"
-    pretty-format "^25.2.6"
+    pretty-format "^26.6.2"
 
-jest-watcher@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-25.2.7.tgz#01db4332d34d14c03c9ef22255125a3b07f997bc"
-  integrity sha512-RdHuW+f49tahWtluTnUdZ2iPliebleROI2L/J5phYrUS6DPC9RB3SuUtqYyYhGZJsbvRSuLMIlY/cICJ+PIecw==
+jest-watcher@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.6.2.tgz#a5b683b8f9d68dbcb1d7dae32172d2cca0592975"
+  integrity sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==
   dependencies:
-    "@jest/test-result" "^25.2.6"
-    "@jest/types" "^25.2.6"
+    "@jest/test-result" "^26.6.2"
+    "@jest/types" "^26.6.2"
+    "@types/node" "*"
     ansi-escapes "^4.2.1"
-    chalk "^3.0.0"
-    jest-util "^25.2.6"
-    string-length "^3.1.0"
+    chalk "^4.0.0"
+    jest-util "^26.6.2"
+    string-length "^4.0.1"
 
-jest-worker@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-25.2.6.tgz#d1292625326794ce187c38f51109faced3846c58"
-  integrity sha512-FJn9XDUSxcOR4cwDzRfL1z56rUofNTFs539FGASpd50RHdb6EVkhxQqktodW2mI49l+W3H+tFJDotCHUQF6dmA==
+jest-worker@^26.6.2:
+  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@^25.2.7:
-  version "25.2.7"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-25.2.7.tgz#3929a5f35cdd496f7756876a206b99a94e1e09ae"
-  integrity sha512-XV1n/CE2McCikl4tfpCY950RytHYvxdo/wvtgmn/qwA8z1s16fuvgFL/KoPrrmkqJTaPMUlLVE58pwiaTX5TdA==
+jest@^26.6.3:
+  version "26.6.3"
+  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
+  integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
   dependencies:
-    "@jest/core" "^25.2.7"
+    "@jest/core" "^26.6.3"
     import-local "^3.0.2"
-    jest-cli "^25.2.7"
+    jest-cli "^26.6.3"
 
 jetpack-id@1.0.0:
   version "1.0.0"
@@ -8789,68 +8829,37 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jsdom@^15.2.1:
-  version "15.2.1"
-  resolved "https://registry.yarnpkg.com/@gaearon/jsdom/-/jsdom-15.2.1.tgz#23273b20b6c7b6ca70b54bc0b0eecdc518ae9694"
-  integrity sha512-qQc4j+gyi06zrevvopql0pehAXrgTv71wGkKMQZg8bl2VYfv2dqbdtP0hD0TpHsuI7YF1XfE7DM62Nclr13vfA==
-  dependencies:
-    abab "^2.0.0"
-    acorn "^7.1.0"
-    acorn-globals "^4.3.2"
-    array-equal "^1.0.0"
-    cssom "^0.4.1"
-    cssstyle "^2.0.0"
-    data-urls "^1.1.0"
-    domexception "^1.0.1"
-    escodegen "^1.11.1"
-    html-encoding-sniffer "^1.0.2"
-    nwsapi "^2.2.0"
-    parse5 "5.1.0"
-    pn "^1.1.0"
-    request "^2.88.0"
-    request-promise-native "^1.0.7"
-    saxes "^3.1.9"
-    symbol-tree "^3.2.2"
-    tough-cookie "^3.0.1"
-    w3c-hr-time "^1.0.1"
-    w3c-xmlserializer "^1.1.2"
-    webidl-conversions "^4.0.2"
-    whatwg-encoding "^1.0.5"
-    whatwg-mimetype "^2.3.0"
-    whatwg-url "^7.0.0"
-    ws "^7.0.0"
-    xml-name-validator "^3.0.0"
-
-jsdom@^16.2.1:
-  version "16.3.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.3.0.tgz#75690b7dac36c67be49c336dcd7219bbbed0810c"
-  integrity sha512-zggeX5UuEknpdZzv15+MS1dPYG0J/TftiiNunOeNxSl3qr8Z6cIlQpN0IdJa44z9aFxZRIVqRncvEhQ7X5DtZg==
+jsdom@^16.4.0:
+  version "16.6.0"
+  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.6.0.tgz#f79b3786682065492a3da6a60a4695da983805ac"
+  integrity sha512-Ty1vmF4NHJkolaEmdjtxTfSfkdb8Ywarwf63f+F8/mDD1uLSSWDxDuMiZxiPhwunLrn9LOSVItWj4bLYsLN3Dg==
   dependencies:
-    abab "^2.0.3"
-    acorn "^7.1.1"
+    abab "^2.0.5"
+    acorn "^8.2.4"
     acorn-globals "^6.0.0"
     cssom "^0.4.4"
-    cssstyle "^2.2.0"
+    cssstyle "^2.3.0"
     data-urls "^2.0.0"
-    decimal.js "^10.2.0"
+    decimal.js "^10.2.1"
     domexception "^2.0.1"
-    escodegen "^1.14.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
     html-encoding-sniffer "^2.0.1"
-    is-potential-custom-element-name "^1.0.0"
+    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 "5.1.1"
-    request "^2.88.2"
-    request-promise-native "^1.0.8"
-    saxes "^5.0.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
     symbol-tree "^3.2.4"
-    tough-cookie "^3.0.1"
+    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.0.0"
-    ws "^7.2.3"
+    whatwg-url "^8.5.0"
+    ws "^7.4.5"
     xml-name-validator "^3.0.0"
 
 jsesc@^2.5.1:
@@ -8885,6 +8894,11 @@ json-parse-even-better-errors@^2.0.1:
   resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.0.1.tgz#ed0009e0f5e7eb21ae0675d0d34782cc7a53c60e"
   integrity sha512-XFY2Mbnmg+8r7MRsxfArVkZcfjxGlF/NjM3LsPXVeCX/GBF/1FTCv+idHBYC4qLPtK7q8HC8bapLoWqnhP/bXw==
 
+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"
@@ -9374,6 +9388,11 @@ lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.7.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-driver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
@@ -9384,13 +9403,6 @@ loglevel@^1.6.6, loglevel@^1.6.8:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
   integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
 
-lolex@^5.0.0:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-5.1.2.tgz#953694d098ce7c07bc5ed6d0e42bc6c0c6d5a367"
-  integrity sha512-h4hmjAvHTmd+25JSwrtTIuwbKdwg5NzZVRMLn9saij4SZaepCrTCxPr35H/3bjwfMJtN+t3CX8672UIkglz28A==
-  dependencies:
-    "@sinonjs/commons" "^1.7.0"
-
 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"
@@ -10120,7 +10132,7 @@ node-modules-regexp@^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@6.0.0, node-notifier@^6.0.0:
+node-notifier@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-6.0.0.tgz#cea319e06baa16deec8ce5cd7f133c4a46b68e12"
   integrity sha512-SVfQ/wMw+DesunOm5cKqr6yDcvUTDl/yc97ybGHMrteNEY6oekXpNpS3lZwgLlwz0FLgHoiW28ZpmBHUDg37cw==
@@ -10131,6 +10143,18 @@ node-notifier@6.0.0, node-notifier@^6.0.0:
     shellwords "^0.1.1"
     which "^1.3.1"
 
+node-notifier@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.2.tgz#f3167a38ef0d2c8a866a83e318c1ba0efeb702c5"
+  integrity sha512-oJP/9NAdd9+x2Q+rfphB2RJCHjod70RcRLjosiPMMu5gjIfwVnOUGq2nbTjTUbmy0DJ/tFIVT30+Qe3nzl4TJg==
+  dependencies:
+    growly "^1.3.0"
+    is-wsl "^2.2.0"
+    semver "^7.3.2"
+    shellwords "^0.1.1"
+    uuid "^8.3.0"
+    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"
@@ -10160,6 +10184,16 @@ normalize-css-color@^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.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    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"
@@ -10558,11 +10592,6 @@ p-finally@^1.0.0:
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
   integrity sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=
 
-p-finally@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-2.0.1.tgz#bd6fcaa9c559a096b680806f4d657b3f0f240561"
-  integrity sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==
-
 p-is-promise@^2.0.0, 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"
@@ -10756,6 +10785,16 @@ parse-json@5.0.0:
     json-parse-better-errors "^1.0.1"
     lines-and-columns "^1.1.6"
 
+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"
+
 parse-link-header@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-link-header/-/parse-link-header-1.0.1.tgz#bedfe0d2118aeb84be75e7b025419ec8a61140a7"
@@ -10778,15 +10817,10 @@ parse-passwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
 
-parse5@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
-  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
-
-parse5@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+parse5@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
 parse5@^3.0.1:
   version "3.0.3"
@@ -11010,11 +11044,6 @@ plugin-error@^0.1.2:
     arr-union "^2.0.1"
     extend-shallow "^1.1.2"
 
-pn@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb"
-  integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==
-
 portfinder@^1.0.25:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
@@ -11177,15 +11206,15 @@ pretty-error@^2.1.1:
     renderkid "^2.0.1"
     utila "~0.4"
 
-pretty-format@^25.2.6:
-  version "25.2.6"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-25.2.6.tgz#542a1c418d019bbf1cca2e3620443bc1323cb8d7"
-  integrity sha512-DEiWxLBaCHneffrIT4B+TpMvkV9RNvvJrd3lY9ew1CEQobDzEXmYT1mg0hJhljZty7kCc10z13ohOFAE8jrUDg==
+pretty-format@^26.6.2:
+  version "26.6.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
+  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
   dependencies:
-    "@jest/types" "^25.2.6"
+    "@jest/types" "^26.6.2"
     ansi-regex "^5.0.0"
     ansi-styles "^4.0.0"
-    react-is "^16.12.0"
+    react-is "^17.0.1"
 
 pretty-ms@^7.0.0:
   version "7.0.0"
@@ -11298,11 +11327,16 @@ pseudomap@^1.0.2:
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
-psl@^1.1.24, psl@^1.1.28:
+psl@^1.1.24:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.3.0.tgz#e1ebf6a3b5564fa8376f3da2275da76d875ca1bd"
   integrity sha512-avHdspHO+9rQTLbv1RO+MPYeP/SzsCoxofjVnHanETfQhTJrmB0HlDoW+EiN/R+C0BZ+gERab9NY0lPN2TxNag==
 
+psl@^1.1.33:
+  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"
@@ -11521,7 +11555,7 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     prop-types "^15.6.2"
     scheduler "^0.13.0"
 
-react-is@^16.12.0, react-is@^16.8.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==
@@ -11582,6 +11616,25 @@ read-package-json-fast@^1.1.1:
     json-parse-even-better-errors "^2.0.1"
     npm-normalize-package-bin "^1.0.1"
 
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
+  dependencies:
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.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.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"
@@ -11676,11 +11729,6 @@ readline-sync@^1.4.9:
   resolved "https://registry.yarnpkg.com/readline-sync/-/readline-sync-1.4.10.tgz#41df7fbb4b6312d673011594145705bf56d8873b"
   integrity sha512-gNva8/6UAe8QYepIQH/jQ2qn91Qj0B9sYjMBBs3QOB8F2CXcKgLxQaJRP76sWVRQt+QU+8fAkCbCvjjMFu7Ycw==
 
-realpath-native@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-2.0.0.tgz#7377ac429b6e1fd599dc38d08ed942d0d7beb866"
-  integrity sha512-v1SEYUOXXdbBZK8ZuNgO4TBjamPsiSgcFr0aP+tEKpQZK8vooEUqV6nm6Cv502mX4NF2EfsnVqtNAHG+/6Ur1Q==
-
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -11866,22 +11914,6 @@ replace-ext@^1.0.0:
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
-request-promise-core@1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.3.tgz#e9a3c081b51380dfea677336061fea879a829ee9"
-  integrity sha512-QIs2+ArIGQVp5ZYbWD5ZLCY29D5CfWizP8eWnm8FoGD1TX61veauETVQbrV60662V0oFBkrDOuaBI8XgtuyYAQ==
-  dependencies:
-    lodash "^4.17.15"
-
-request-promise-native@^1.0.7, request-promise-native@^1.0.8:
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.8.tgz#a455b960b826e44e2bf8999af64dff2bfe58cb36"
-  integrity sha512-dapwLGqkHtwL5AEbfenuzjTYg35Jd6KPytsC2/TLkVMz8rm+tNt72MGUWT1RP/aYawMpN6HqbNGBQaRcBtjQMQ==
-  dependencies:
-    request-promise-core "1.1.3"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
 request@2.88.0, request@^2.83.0, request@^2.88.0, request@~2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
@@ -11908,32 +11940,6 @@ request@2.88.0, request@^2.83.0, request@^2.88.0, request@~2.88.0:
     tunnel-agent "^0.6.0"
     uuid "^3.3.2"
 
-request@^2.88.2:
-  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"
@@ -12020,11 +12026,12 @@ resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.15.1:
-  version "1.15.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
-  integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
+resolve@^1.18.1:
+  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:
@@ -12305,14 +12312,7 @@ sax@>=0.6.0:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-saxes@^3.1.9:
-  version "3.1.11"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
-  integrity sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==
-  dependencies:
-    xmlchars "^2.1.1"
-
-saxes@^5.0.0:
+saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
   integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
@@ -12400,6 +12400,11 @@ semver-diff@^3.1.1:
   dependencies:
     semver "^6.3.0"
 
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+
 semver@5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
@@ -12415,11 +12420,6 @@ semver@7.3.2, semver@^7.2.1, semver@^7.3.2:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
   integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
 
-semver@^5.0.3, semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
-  version "5.7.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
-  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
 semver@^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"
@@ -12791,6 +12791,32 @@ spawn-sync@1.0.15:
     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"
@@ -12884,10 +12910,12 @@ ssri@^7.0.0, ssri@^7.0.1, ssri@^7.1.0:
     figgy-pudding "^3.5.1"
     minipass "^3.1.1"
 
-stack-utils@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
-  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
+stack-utils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
+  integrity sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
+  dependencies:
+    escape-string-regexp "^2.0.0"
 
 stackframe@^1.1.1:
   version "1.1.1"
@@ -12907,11 +12935,6 @@ static-extend@^0.1.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-stealthy-require@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
-  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-
 stream-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-1.0.0.tgz#bf9b4abfb42b274d751479e44e0ff2656b6f1193"
@@ -12980,13 +13003,13 @@ strict-uri-encode@^2.0.0:
   resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
   integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY=
 
-string-length@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-length/-/string-length-3.1.0.tgz#107ef8c23456e187a8abd4a61162ff4ac6e25837"
-  integrity sha512-Ttp5YvkGm5v9Ijagtaz1BnN+k9ObpvS0eIBblPMp2YWL8FBmi9qblQ9fexc2k/CXFgrTIteU3jAw3payCnwSTA==
+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:
-    astral-regex "^1.0.0"
-    strip-ansi "^5.2.0"
+    char-regex "^1.0.2"
+    strip-ansi "^6.0.0"
 
 string-width@^1.0.1:
   version "1.0.2"
@@ -13211,7 +13234,7 @@ symbol-observable@1.0.1:
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
   integrity sha1-g0D8RwLDEi310iKI+IKD9RPT/dQ=
 
-symbol-tree@^3.2.2, symbol-tree@^3.2.4:
+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==
@@ -13535,22 +13558,14 @@ tosource@1.0.0:
   resolved "https://registry.yarnpkg.com/tosource/-/tosource-1.0.0.tgz#42d88dd116618bcf00d6106dd5446f3427902ff1"
   integrity sha1-QtiN0RZhi88A1hBt1URvNCeQL/E=
 
-tough-cookie@^2.3.3, 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@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
-  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
+tough-cookie@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
+  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
   dependencies:
-    ip-regex "^2.1.0"
-    psl "^1.1.28"
+    psl "^1.1.33"
     punycode "^2.1.1"
+    universalify "^0.1.2"
 
 tough-cookie@~2.4.3:
   version "2.4.3"
@@ -13675,6 +13690,11 @@ type-fest@^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.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
 type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
@@ -13809,7 +13829,7 @@ universal-user-agent@^3.0.0:
   dependencies:
     os-name "^3.0.0"
 
-universalify@^0.1.0:
+universalify@^0.1.0, universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
@@ -14023,6 +14043,11 @@ uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+uuid@^8.3.0:
+  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.0.3"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.0.3.tgz#00f7494d2ae2b688cfe2899df6ed2c54bef91dbe"
@@ -14033,15 +14058,23 @@ v8-compile-cache@^2.0.3, v8-compile-cache@^2.1.1:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz#54bc3cdd43317bca91e35dcaf305b1a7237de745"
   integrity sha512-8OQ9CL+VWyt3JStj7HX7/ciTL2V3Rl1Wf5OL+SNTm0yK1KvtReVulksyeRnCANHHuUxHlQig+JJDlUhBt1NQDQ==
 
-v8-to-istanbul@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-4.0.1.tgz#d6a2a3823b8ff49bdf2167ff2a45d82dff81d02f"
-  integrity sha512-x0yZvZAkjJwdD3fPiJzYP37aod0ati4LlmD2RmpKjqewjKAov/u/ytZ8ViIZb07cN4cePKzl9ijiUi7C1LQ8hQ==
+v8-to-istanbul@^7.0.0:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-7.1.2.tgz#30898d1a7fa0c84d225a2c1434fb958f290883c1"
+  integrity sha512-TxNb7YEUwkLXCQYeudi6lgQ/SZrzNO4kMdlqVxaZPUIUjCv6iSSypUQX70kNBSERpQ8fk48+d61FXk+tgqcWow==
   dependencies:
     "@types/istanbul-lib-coverage" "^2.0.1"
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+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"
+
 validate-npm-package-name@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz#5fa912d81eb7d0c74afc140de7317f0ca7df437e"
@@ -14111,13 +14144,6 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
-w3c-hr-time@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045"
-  integrity sha1-gqwr/2PZUOqeMYmlimViX+3xkEU=
-  dependencies:
-    browser-process-hrtime "^0.1.2"
-
 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"
@@ -14125,15 +14151,6 @@ w3c-hr-time@^1.0.2:
   dependencies:
     browser-process-hrtime "^1.0.0"
 
-w3c-xmlserializer@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-1.1.2.tgz#30485ca7d70a6fd052420a3d12fd90e6339ce794"
-  integrity sha512-p10l/ayESzrBMYWRID6xbuCKh2Fp77+sA0doRuGn4tTIMrrZVeqfpKjXHY+oDh3K4nLdPgNwMTVP6Vp4pvqbNg==
-  dependencies:
-    domexception "^1.0.1"
-    webidl-conversions "^4.0.2"
-    xml-name-validator "^3.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"
@@ -14469,7 +14486,7 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
   integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
-whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.5:
+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==
@@ -14481,7 +14498,7 @@ whatwg-fetch@>=0.10.0:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
   integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
 
-whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
+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==
@@ -14504,6 +14521,15 @@ whatwg-url@^7.0.0:
     tr46 "^1.0.1"
     webidl-conversions "^4.0.2"
 
+whatwg-url@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.5.0.tgz#7752b8464fc0903fec89aa9846fc9efe07351fd3"
+  integrity sha512-fy+R77xWv0AiqfLl4nuGUlQ3/6b5uNfQ4WAbGQVMYshCTCCPK9psC1nWh3XHuxGVCtlcDDQPQW1csmmIQo+fwg==
+  dependencies:
+    lodash "^4.7.0"
+    tr46 "^2.0.2"
+    webidl-conversions "^6.1.0"
+
 when@3.7.7:
   version "3.7.7"
   resolved "https://registry.yarnpkg.com/when/-/when-3.7.7.tgz#aba03fc3bb736d6c88b091d013d8a8e590d84718"
@@ -14651,15 +14677,15 @@ ws@^6.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7, ws@^7.0.0:
+ws@^7:
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.2.1.tgz#03ed52423cd744084b2cf42ed197c8b65a936b8e"
   integrity sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A==
 
-ws@^7.2.3:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
-  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+ws@^7.4.5:
+  version "7.4.6"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
+  integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
 xdg-basedir@^3.0.0:
   version "3.0.0"
@@ -14689,7 +14715,7 @@ xmlbuilder@~9.0.1:
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
   integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
 
-xmlchars@^2.1.1, xmlchars@^2.2.0:
+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==
@@ -14758,6 +14784,14 @@ yargs-parser@^18.1.1:
     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@12.0.5:
   version "12.0.5"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
@@ -14826,6 +14860,23 @@ yargs@^13.3.2:
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
 
+yargs@^15.4.1:
+  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"
+
 yauzl@2.10.0:
   version "2.10.0"
   resolved "https://registry.yarnpkg.com/yauzl/-/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"

From d75105fa92cfc77f41bcd56bf9eb127a132e44cb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 27 May 2021 12:44:14 -0700
Subject: [PATCH 0571/1603] DevTools: Format error message (#21580)

To support GitHub API fuzzy issue search
---
 packages/react-devtools-shared/src/inspectedElementCache.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 1d19989664f3..4d12ec70b96d 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -110,7 +110,7 @@ export function inspectElement(
     if (rendererID == null) {
       const rejectedRecord = ((newRecord: any): RejectedRecord);
       rejectedRecord.status = Rejected;
-      rejectedRecord.value = `Could not inspect element with id ${element.id}`;
+      rejectedRecord.value = `Could not inspect element with id "${element.id}"`;
 
       map.set(element, record);
 
@@ -134,7 +134,7 @@ export function inspectElement(
         if (newRecord.status === Pending) {
           const rejectedRecord = ((newRecord: any): RejectedRecord);
           rejectedRecord.status = Rejected;
-          rejectedRecord.value = `Could not inspect element with id ${element.id}`;
+          rejectedRecord.value = `Could not inspect element with id "${element.id}"`;
           wake();
         }
       },

From 28625c6f45423e6edc5ca0e2932281769c0d431e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 31 May 2021 10:05:50 -0700
Subject: [PATCH 0572/1603] Disable strict effects for legacy roots (again)
 (#21591)

---
 packages/react-reconciler/src/ReactFiber.new.js             | 6 +++++-
 packages/react-reconciler/src/ReactFiber.old.js             | 6 +++++-
 .../react-reconciler/src/ReactFiberClassComponent.new.js    | 4 ----
 .../react-reconciler/src/ReactFiberClassComponent.old.js    | 4 ----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 2ea25195a7c0..a18514c50c0f 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -492,7 +492,11 @@ export function createFiberFromTypeAndProps(
         break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
-        mode |= StrictLegacyMode | StrictEffectsMode;
+        mode |= StrictLegacyMode;
+        if (enableStrictEffects && (mode & ConcurrentMode) !== NoMode) {
+          // Strict effects should never run on legacy roots
+          mode |= StrictEffectsMode;
+        }
         break;
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, lanes, key);
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 1e30bb9c7a3a..4fbbb5a00efc 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -492,7 +492,11 @@ export function createFiberFromTypeAndProps(
         break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
-        mode |= StrictLegacyMode | StrictEffectsMode;
+        mode |= StrictLegacyMode;
+        if (enableStrictEffects && (mode & ConcurrentMode) !== NoMode) {
+          // Strict effects should never run on legacy roots
+          mode |= StrictEffectsMode;
+        }
         break;
       case REACT_PROFILER_TYPE:
         return createFiberFromProfiler(pendingProps, mode, lanes, key);
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 44b9db7aacb2..c464b6c3bf41 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -923,7 +923,6 @@ function mountClassInstance(
       enableStrictEffects &&
       (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
-      // Never double-invoke effects for legacy roots.
       fiberFlags |= MountLayoutDev;
     }
     workInProgress.flags |= fiberFlags;
@@ -1005,7 +1004,6 @@ function resumeMountClassInstance(
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
-        // Never double-invoke effects for legacy roots.
         fiberFlags |= MountLayoutDev;
       }
       workInProgress.flags |= fiberFlags;
@@ -1060,7 +1058,6 @@ function resumeMountClassInstance(
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
-        // Never double-invoke effects for legacy roots.
         fiberFlags |= MountLayoutDev;
       }
       workInProgress.flags |= fiberFlags;
@@ -1078,7 +1075,6 @@ function resumeMountClassInstance(
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
-        // Never double-invoke effects for legacy roots.
         fiberFlags |= MountLayoutDev;
       }
       workInProgress.flags |= fiberFlags;
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index ab2bb4379678..adb616c6262b 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -923,7 +923,6 @@ function mountClassInstance(
       enableStrictEffects &&
       (workInProgress.mode & StrictEffectsMode) !== NoMode
     ) {
-      // Never double-invoke effects for legacy roots.
       fiberFlags |= MountLayoutDev;
     }
     workInProgress.flags |= fiberFlags;
@@ -1005,7 +1004,6 @@ function resumeMountClassInstance(
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
-        // Never double-invoke effects for legacy roots.
         fiberFlags |= MountLayoutDev;
       }
       workInProgress.flags |= fiberFlags;
@@ -1060,7 +1058,6 @@ function resumeMountClassInstance(
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
-        // Never double-invoke effects for legacy roots.
         fiberFlags |= MountLayoutDev;
       }
       workInProgress.flags |= fiberFlags;
@@ -1078,7 +1075,6 @@ function resumeMountClassInstance(
         enableStrictEffects &&
         (workInProgress.mode & StrictEffectsMode) !== NoMode
       ) {
-        // Never double-invoke effects for legacy roots.
         fiberFlags |= MountLayoutDev;
       }
       workInProgress.flags |= fiberFlags;

From 8f6163cbed64d1eff23b91159d6eef34a2ee9c27 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 1 Jun 2021 13:02:04 -0400
Subject: [PATCH 0573/1603] Fix Fizz exported types (#21596)

---
 .../react-dom/src/server/ReactDOMFizzServerBrowser.js    | 4 ++--
 packages/react-dom/src/server/ReactDOMFizzServerNode.js  | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 8d5c59a2d686..ac90d60671d9 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -21,7 +21,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-type Options = {
+type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   progressiveChunkSize?: number,
@@ -29,7 +29,7 @@ type Options = {
   onReadyToStream?: () => void,
   onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
-};
+|};
 
 function renderToReadableStream(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 1d53e6fda472..dcb07c990553 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -26,20 +26,21 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request);
 }
 
-type Options = {
+type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   progressiveChunkSize?: number,
   onReadyToStream?: () => void,
   onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
-};
+|};
 
-type Controls = {
+type Controls = {|
   // Cancel any pending I/O and put anything remaining into
   // client rendered mode.
   abort(): void,
-};
+  startWriting(): void,
+|};
 
 function pipeToNodeWritable(
   children: ReactNodeList,

From efbd69b27e530cb26f0c055265a624242a32305b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 1 Jun 2021 13:16:06 -0400
Subject: [PATCH 0574/1603]  Define global __WWW__ = true flag during www tests
 (#21504)

* Define global __WWW__ = true flag during www tests

We already do that for __PERSISTENT__.

* Use @gate www in ReactSuspenseCallback

This allows it to not be internal anymore. We test it against the www build.
---
 ...ernal.js => ReactSuspenseCallback-test.js} | 52 ++++++++++---------
 scripts/jest/TestFlags.js                     |  5 +-
 scripts/jest/config.source-www.js             |  2 +-
 scripts/jest/setupTests.www.js                |  2 +
 4 files changed, 31 insertions(+), 30 deletions(-)
 rename packages/react-reconciler/src/__tests__/{ReactSuspenseCallback-test.internal.js => ReactSuspenseCallback-test.js} (89%)

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
similarity index 89%
rename from packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.internal.js
rename to packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
index 2314ef0c47ad..38f32c9f494d 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
@@ -10,15 +10,12 @@
 'use strict';
 
 let React;
-let ReactFeatureFlags;
 let ReactNoop;
 let Scheduler;
 
 describe('ReactSuspense', () => {
   beforeEach(() => {
     jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.enableSuspenseCallback = true;
 
     React = require('react');
     ReactNoop = require('react-noop-renderer');
@@ -47,30 +44,34 @@ describe('ReactSuspense', () => {
     return {promise, resolve, PromiseComp};
   }
 
-  it('check type', () => {
-    const {PromiseComp} = createThenable();
+  if (__DEV__) {
+    // @gate www
+    it('check type', () => {
+      const {PromiseComp} = createThenable();
 
-    const elementBadType = (
-      <React.Suspense suspenseCallback={1} fallback={'Waiting'}>
-        <PromiseComp />
-      </React.Suspense>
-    );
+      const elementBadType = (
+        <React.Suspense suspenseCallback={1} fallback={'Waiting'}>
+          <PromiseComp />
+        </React.Suspense>
+      );
 
-    ReactNoop.render(elementBadType);
-    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-      'Warning: Unexpected type for suspenseCallback.',
-    ]);
+      ReactNoop.render(elementBadType);
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+        'Warning: Unexpected type for suspenseCallback.',
+      ]);
 
-    const elementMissingCallback = (
-      <React.Suspense fallback={'Waiting'}>
-        <PromiseComp />
-      </React.Suspense>
-    );
+      const elementMissingCallback = (
+        <React.Suspense fallback={'Waiting'}>
+          <PromiseComp />
+        </React.Suspense>
+      );
 
-    ReactNoop.render(elementMissingCallback);
-    expect(() => Scheduler.unstable_flushAll()).toErrorDev([]);
-  });
+      ReactNoop.render(elementMissingCallback);
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev([]);
+    });
+  }
 
+  // @gate www
   it('1 then 0 suspense callback', async () => {
     const {promise, resolve, PromiseComp} = createThenable();
 
@@ -97,6 +98,7 @@ describe('ReactSuspense', () => {
     expect(ops).toEqual([]);
   });
 
+  // @gate www
   it('2 then 1 then 0 suspense callback', async () => {
     const {
       promise: promise1,
@@ -143,6 +145,7 @@ describe('ReactSuspense', () => {
     expect(ops).toEqual([]);
   });
 
+  // @gate www
   it('nested suspense promises are reported only for their tier', () => {
     const {promise, PromiseComp} = createThenable();
 
@@ -174,6 +177,7 @@ describe('ReactSuspense', () => {
     expect(ops2).toEqual([new Set([promise])]);
   });
 
+  // @gate www
   it('competing suspense promises', async () => {
     const {
       promise: promise1,
@@ -242,6 +246,7 @@ describe('ReactSuspense', () => {
   });
 
   if (__DEV__) {
+    // @gate www
     it('regression test for #16215 that relies on implementation details', async () => {
       // Regression test for https://github.com/facebook/react/pull/16215.
       // The bug only happens if there's an error earlier in the commit phase.
@@ -272,9 +277,6 @@ describe('ReactSuspense', () => {
         },
       }));
 
-      ReactFeatureFlags = require('shared/ReactFeatureFlags');
-      ReactFeatureFlags.enableSuspenseCallback = true;
-
       React = require('react');
       ReactNoop = require('react-noop-renderer');
       Scheduler = require('scheduler');
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index d46a26fb942e..93ba09dbf032 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -56,10 +56,7 @@ function getTestFlags() {
   // not to but there are exceptions.
   const featureFlags = require('shared/ReactFeatureFlags');
 
-  // TODO: This is a heuristic to detect the release channel by checking a flag
-  // that is known to only be enabled in www. What we should do instead is set
-  // the release channel explicitly in the each test config file.
-  const www = featureFlags.enableSuspenseCallback === true;
+  const www = global.__WWW__ === true;
   const releaseChannel = www
     ? __EXPERIMENTAL__
       ? 'modern'
diff --git a/scripts/jest/config.source-www.js b/scripts/jest/config.source-www.js
index 0d79c83bbebb..060291a74821 100644
--- a/scripts/jest/config.source-www.js
+++ b/scripts/jest/config.source-www.js
@@ -30,7 +30,7 @@ module.exports = Object.assign({}, baseConfig, {
   ],
   setupFiles: [
     ...baseConfig.setupFiles,
-    require.resolve('./setupHostConfigs.js'),
     require.resolve('./setupTests.www.js'),
+    require.resolve('./setupHostConfigs.js'),
   ],
 });
diff --git a/scripts/jest/setupTests.www.js b/scripts/jest/setupTests.www.js
index de8a70d40be7..3812d8f1354b 100644
--- a/scripts/jest/setupTests.www.js
+++ b/scripts/jest/setupTests.www.js
@@ -19,3 +19,5 @@ jest.mock('shared/ReactFeatureFlags', () => {
 
   return wwwFlags;
 });
+
+global.__WWW__ = true;

From 63091939bdb82c75a5d935143705d09d51380430 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 1 Jun 2021 10:44:10 -0700
Subject: [PATCH 0575/1603] OSS feature flag updates (#21597)

Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 packages/shared/ReactFeatureFlags.js           | 4 ++--
 packages/shared/forks/ReactFeatureFlags.www.js | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 3fa8cf284268..29232d83a595 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -25,7 +25,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 
 // Helps identify code that is not safe for planned Offscreen API and Suspense semantics;
 // this feature flag only impacts StrictEffectsMode.
-export const enableStrictEffects = false;
+export const enableStrictEffects = __DEV__;
 
 // If TRUE, trees rendered with createRoot will be StrictEffectsMode.
 // If FALSE, these trees will be StrictLegacyMode.
@@ -128,7 +128,7 @@ export const deletedTreeCleanUpLevel = 1;
 // Destroy layout effects for components that are hidden because something suspended in an update
 // and recreate them when they are shown again (after the suspended boundary has resolved).
 // Note that this should be an uncommon use case and can be avoided by using the transition API.
-export const enableSuspenseLayoutEffectSemantics = false;
+export const enableSuspenseLayoutEffectSemantics = true;
 
 // --------------------------
 // Future APIs to be deprecated
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 4ce769c61750..a5972151b79a 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -25,7 +25,6 @@ export const {
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
   skipUnmountedBoundaries,
-  enableStrictEffects,
   createRootStrictEffectsByDefault,
   enableSuspenseLayoutEffectSemantics,
   enableUseRefAccessWarning,
@@ -39,6 +38,8 @@ export const {
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
 // It's not used anywhere in production yet.
 
+export const enableStrictEffects =
+  __DEV__ && dynamicFeatureFlags.enableStrictEffects;
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;

From e16d61c3000e2de6217d06b9afad162e883f73c4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 1 Jun 2021 15:46:08 -0400
Subject: [PATCH 0576/1603] [Offscreen] Mount/unmount layout effects (#21386)

* [Offscreen] Mount/unmount layout effects

Exposes the Offscreen component type and implements basic support for
mount/unmounting layout effects when the visibility is toggled.

Mostly it works the same way as hidden Suspense trees, which use the
same internal fiber type. I had to add an extra bailout, though, that
doesn't apply to the Suspense case but does apply to Offscreen
components: a hidden Offscreen tree will eventually render at low
priority, and when we it does, its `subtreeTag` will have effects
scheduled on it. So I added a check to the layout phase where, if the
subtree is hidden, we skip over the subtree entirely. An alternate
design would be to clear the subtree flags in the render phase, but I
prefer doing it this way since it's harder to mess up.

We also need an API to enable the same thing for passive effects. This
is not yet implemented.

* Add test starting from hidden

Co-authored-by: Rick Hanlon <rickhanlonii@gmail.com>
---
 .../src/ReactFiberCommitWork.new.js           |  47 +++---
 .../src/ReactFiberCommitWork.old.js           |  47 +++---
 .../src/__tests__/ReactOffscreen-test.js      | 150 ++++++++++++++++++
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/src/React.js                   |   2 +
 packages/shared/isValidElementType.js         |   2 +
 9 files changed, 212 insertions(+), 40 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 46f19294562c..0f6bfdee73d1 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2306,33 +2306,40 @@ function commitLayoutEffects_begin(
     const fiber = nextEffect;
     const firstChild = fiber.child;
 
-    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+    if (
+      enableSuspenseLayoutEffectSemantics &&
+      fiber.tag === OffscreenComponent &&
+      isModernRoot
+    ) {
       // Keep track of the current Offscreen stack's state.
-      if (fiber.tag === OffscreenComponent) {
-        const current = fiber.alternate;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const isHidden = fiber.memoizedState !== null;
-
-        const newOffscreenSubtreeIsHidden =
-          isHidden || offscreenSubtreeIsHidden;
-        const newOffscreenSubtreeWasHidden =
-          wasHidden || offscreenSubtreeWasHidden;
-
-        if (
-          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
-          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
-        ) {
+      const isHidden = fiber.memoizedState !== null;
+      const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+      if (newOffscreenSubtreeIsHidden) {
+        // The Offscreen tree is hidden. Skip over its layout effects.
+        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+        continue;
+      } else {
+        if ((fiber.subtreeFlags & LayoutMask) !== NoFlags) {
+          const current = fiber.alternate;
+          const wasHidden = current !== null && current.memoizedState !== null;
+          const newOffscreenSubtreeWasHidden =
+            wasHidden || offscreenSubtreeWasHidden;
           const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
           const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
 
           // Traverse the Offscreen subtree with the current Offscreen as the root.
           offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
           offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-          commitLayoutEffects_begin(
-            fiber, // New root; bubble back up to here and stop.
-            root,
-            committedLanes,
-          );
+          let child = firstChild;
+          while (child !== null) {
+            nextEffect = child;
+            commitLayoutEffects_begin(
+              child, // New root; bubble back up to here and stop.
+              root,
+              committedLanes,
+            );
+            child = child.sibling;
+          }
 
           // Restore Offscreen state and resume in our-progress traversal.
           nextEffect = fiber;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index f45a44083e23..63942e1a6936 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2306,33 +2306,40 @@ function commitLayoutEffects_begin(
     const fiber = nextEffect;
     const firstChild = fiber.child;
 
-    if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
+    if (
+      enableSuspenseLayoutEffectSemantics &&
+      fiber.tag === OffscreenComponent &&
+      isModernRoot
+    ) {
       // Keep track of the current Offscreen stack's state.
-      if (fiber.tag === OffscreenComponent) {
-        const current = fiber.alternate;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const isHidden = fiber.memoizedState !== null;
-
-        const newOffscreenSubtreeIsHidden =
-          isHidden || offscreenSubtreeIsHidden;
-        const newOffscreenSubtreeWasHidden =
-          wasHidden || offscreenSubtreeWasHidden;
-
-        if (
-          newOffscreenSubtreeIsHidden !== offscreenSubtreeIsHidden ||
-          newOffscreenSubtreeWasHidden !== offscreenSubtreeWasHidden
-        ) {
+      const isHidden = fiber.memoizedState !== null;
+      const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
+      if (newOffscreenSubtreeIsHidden) {
+        // The Offscreen tree is hidden. Skip over its layout effects.
+        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+        continue;
+      } else {
+        if ((fiber.subtreeFlags & LayoutMask) !== NoFlags) {
+          const current = fiber.alternate;
+          const wasHidden = current !== null && current.memoizedState !== null;
+          const newOffscreenSubtreeWasHidden =
+            wasHidden || offscreenSubtreeWasHidden;
           const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
           const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
 
           // Traverse the Offscreen subtree with the current Offscreen as the root.
           offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
           offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-          commitLayoutEffects_begin(
-            fiber, // New root; bubble back up to here and stop.
-            root,
-            committedLanes,
-          );
+          let child = firstChild;
+          while (child !== null) {
+            nextEffect = child;
+            commitLayoutEffects_begin(
+              child, // New root; bubble back up to here and stop.
+              root,
+              committedLanes,
+            );
+            child = child.sibling;
+          }
 
           // Restore Offscreen state and resume in our-progress traversal.
           nextEffect = fiber;
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index d04203089c22..da6778aefc89 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -2,7 +2,9 @@ let React;
 let ReactNoop;
 let Scheduler;
 let LegacyHidden;
+let Offscreen;
 let useState;
+let useLayoutEffect;
 
 describe('ReactOffscreen', () => {
   beforeEach(() => {
@@ -12,7 +14,9 @@ describe('ReactOffscreen', () => {
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     LegacyHidden = React.unstable_LegacyHidden;
+    Offscreen = React.unstable_Offscreen;
     useState = React.useState;
+    useLayoutEffect = React.useLayoutEffect;
   });
 
   function Text(props) {
@@ -169,4 +173,150 @@ describe('ReactOffscreen', () => {
       </>,
     );
   });
+
+  // @gate experimental
+  // @gate enableSuspenseLayoutEffectSemantics
+  it('mounts without layout effects when hidden', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Mount layout');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Mount hidden tree.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    // No layout effect.
+    expect(Scheduler).toHaveYielded(['Child']);
+    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
+    // it should only be used inside a host component wrapper whose visibility
+    // is toggled simultaneously.
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Unhide the tree. The layout effect is mounted.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+  });
+
+  // @gate experimental
+  // @gate enableSuspenseLayoutEffectSemantics
+  it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Mount layout');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree. The layout effect is unmounted.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
+    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
+    // it should only be used inside a host component wrapper whose visibility
+    // is toggled simultaneously.
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Unhide the tree. The layout effect is re-mounted.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+  });
+
+  // @gate experimental
+  // @gate enableSuspenseLayoutEffectSemantics
+  it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Mount layout');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await ReactNoop.act(async () => {
+      // Start the tree hidden. The layout effect is not mounted.
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child']);
+    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
+    // it should only be used inside a host component wrapper whose visibility
+    // is toggled simultaneously.
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Show the tree. The layout effect is mounted.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree again. The layout effect is un-mounted.
+    await ReactNoop.act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
+    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
+    // it should only be used inside a host component wrapper whose visibility
+    // is toggled simultaneously.
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+  });
 });
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 43ae345b1eb2..15f3447a111f 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -34,6 +34,7 @@ export {
   unstable_Cache,
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
+  unstable_Offscreen,
   unstable_Scope,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 4fbc1664ab49..5c7197b282cd 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -31,6 +31,7 @@ export {
   unstable_Cache,
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
+  unstable_Offscreen,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.js b/packages/react/index.js
index bc77959248f0..59e76eff92fa 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -55,6 +55,7 @@ export {
   unstable_Cache,
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
+  unstable_Offscreen,
   unstable_Scope,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 64073b0b8949..47b629832b33 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -33,6 +33,7 @@ export {
   unstable_Cache,
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
+  unstable_Offscreen,
   unstable_Scope,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 70c92ff86820..a99d2a331b20 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -16,6 +16,7 @@ import {
   REACT_SUSPENSE_TYPE,
   REACT_SUSPENSE_LIST_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
+  REACT_OFFSCREEN_TYPE,
   REACT_SCOPE_TYPE,
   REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
@@ -112,6 +113,7 @@ export {
   useDeferredValue,
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
+  REACT_OFFSCREEN_TYPE as unstable_Offscreen,
   getCacheForType as unstable_getCacheForType,
   useCacheRefresh as unstable_useCacheRefresh,
   REACT_CACHE_TYPE as unstable_Cache,
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 7ad6b0766a66..78b6d2fc2754 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -21,6 +21,7 @@ import {
   REACT_LAZY_TYPE,
   REACT_SCOPE_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
+  REACT_OFFSCREEN_TYPE,
   REACT_CACHE_TYPE,
 } from 'shared/ReactSymbols';
 import {enableScopeAPI, enableCache} from './ReactFeatureFlags';
@@ -44,6 +45,7 @@ export default function isValidElementType(type: mixed) {
     type === REACT_SUSPENSE_TYPE ||
     type === REACT_SUSPENSE_LIST_TYPE ||
     type === REACT_LEGACY_HIDDEN_TYPE ||
+    type === REACT_OFFSCREEN_TYPE ||
     (enableScopeAPI && type === REACT_SCOPE_TYPE) ||
     (enableCache && type === REACT_CACHE_TYPE)
   ) {

From 76f85b3e50b64e3f64f19da09c1b5974aa900608 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 2 Jun 2021 16:13:19 +0100
Subject: [PATCH 0577/1603] Expose Fizz in stable builds (#21602)

---
 scripts/rollup/bundles.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 7e0cd766d657..12302671c00e 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -267,16 +267,14 @@ const bundles = [
 
   /******* React DOM Fizz Server *******/
   {
-    bundleTypes: __EXPERIMENTAL__
-      ? [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD]
-      : [],
+    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-dom/unstable-fizz.browser',
     global: 'ReactDOMFizzServer',
     externals: ['react', 'react-dom/server'],
   },
   {
-    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
+    bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-dom/unstable-fizz.node',
     global: 'ReactDOMFizzServer',

From a8964649bb6332cf1f8d723f81ce97cc5a1886ff Mon Sep 17 00:00:00 2001
From: okmttdhr <okmttdhr@users.noreply.github.com>
Date: Thu, 3 Jun 2021 00:24:40 +0900
Subject: [PATCH 0578/1603] Delete an unused field (#21415)

---
 packages/react-reconciler/src/ReactFiberNewContext.new.js | 3 ---
 packages/react-reconciler/src/ReactFiberNewContext.old.js | 3 ---
 2 files changed, 6 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 9d2484a78397..6195532d6127 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -644,9 +644,6 @@ export function readContext<T>(context: ReactContext<T>): T {
       currentlyRenderingFiber.dependencies = {
         lanes: NoLanes,
         firstContext: contextItem,
-
-        // TODO: This is an old field. Delete it.
-        responders: null,
       };
       if (enableLazyContextPropagation) {
         currentlyRenderingFiber.flags |= NeedsPropagation;
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index c2a160065011..110e65d688d2 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -644,9 +644,6 @@ export function readContext<T>(context: ReactContext<T>): T {
       currentlyRenderingFiber.dependencies = {
         lanes: NoLanes,
         firstContext: contextItem,
-
-        // TODO: This is an old field. Delete it.
-        responders: null,
       };
       if (enableLazyContextPropagation) {
         currentlyRenderingFiber.flags |= NeedsPropagation;

From 1d3558965f691ca8c01387e5b620fd7263fbcd19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 2 Jun 2021 14:28:06 -0400
Subject: [PATCH 0579/1603] Disable deferRenderPhaseUpdateToNextBatch by
 default (#21605)

We're still experimenting with this and it causes a breaking behavior
for setState in componentWillMount/componentWillReceiveProps atm.
---
 packages/shared/ReactFeatureFlags.js                            | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-oss.js           | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.js        | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js    | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.js              | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.www.js          | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 29232d83a595..d9ea72340c22 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -158,7 +158,7 @@ export const enableLegacyFBSupport = false;
 // not currently rendering. We treat them the same as if they came from an
 // interleaved event. Remove this flag once we have migrated to the
 // new behavior.
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableUseRefAccessWarning = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 27d10c9f0f44..2fc1faa80ce7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,7 +50,7 @@ export const deletedTreeCleanUpLevel = 1;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableStrictEffects = __DEV__;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 1f8722560caf..28bd6d0e07a3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -49,7 +49,7 @@ export const deletedTreeCleanUpLevel = 1;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 888bedb396dd..4dc6686c61ca 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -49,7 +49,7 @@ export const deletedTreeCleanUpLevel = 1;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 7eb2c151d10e..600eb8015330 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -49,7 +49,7 @@ export const deletedTreeCleanUpLevel = 1;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7699c52b1474..506c778765a6 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -49,7 +49,7 @@ export const deletedTreeCleanUpLevel = 1;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableStrictEffects = true;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 7af17d70fa7f..0556a6e49489 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -49,7 +49,7 @@ export const deletedTreeCleanUpLevel = 1;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 01f184c1e458..06cc9bed8ffa 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -49,7 +49,7 @@ export const deletedTreeCleanUpLevel = 1;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
-export const deferRenderPhaseUpdateToNextBatch = true;
+export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;

From a8a4742f1c54493df00da648a3f9d26e3db9c8b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 2 Jun 2021 14:36:59 -0400
Subject: [PATCH 0580/1603] Convert ES6/TypeScript/CoffeeScript Tests to
 createRoot + act (#21598)

* Convert ES6/TypeScript CoffeeScript Tests to createRoot + act

* Change expectation for WWW+VARIANT because the deferRenderPhaseUpdateToNextBatch flag breaks this behavior
---
 .../ReactCoffeeScriptClass-test.coffee        | 94 +++++++++----------
 .../react/src/__tests__/ReactES6Class-test.js | 60 +++++++-----
 .../__tests__/ReactTypeScriptClass-test.ts    | 88 +++++++++--------
 .../src/__tests__/testDefinitions/React.d.ts  |  3 +
 .../__tests__/testDefinitions/ReactDOM.d.ts   |  1 +
 .../testDefinitions/ReactDOMTestUtils.d.ts    | 17 ++++
 scripts/jest/typescript/preprocessor.js       |  2 +-
 7 files changed, 152 insertions(+), 113 deletions(-)
 create mode 100644 packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts

diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
index c07f7e4b990b..21463598cda4 100644
--- a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -5,12 +5,14 @@ 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
-PropTypes = null
+act = null
 
 describe 'ReactCoffeeScriptClass', ->
   container = null
+  root = null
   InnerComponent = null
   attachedListener = null;
   renderedName = null;
@@ -18,8 +20,10 @@ describe 'ReactCoffeeScriptClass', ->
   beforeEach ->
     React = require 'react'
     ReactDOM = require 'react-dom'
+    act = require('react-dom/test-utils').act
     PropTypes = require 'prop-types'
     container = document.createElement 'div'
+    root = ReactDOM.createRoot container
     attachedListener = null
     renderedName = null
     InnerComponent = class extends React.Component
@@ -30,11 +34,11 @@ describe 'ReactCoffeeScriptClass', ->
         return React.createElement('div', className: this.props.name)
 
   test = (element, expectedTag, expectedClassName) ->
-    instance = ReactDOM.render(element, container)
+    act ->
+      root.render(element)
     expect(container.firstChild).not.toBeNull()
     expect(container.firstChild.tagName).toBe(expectedTag)
     expect(container.firstChild.className).toBe(expectedClassName)
-    instance;
 
   it 'preserves the name of the class for use in error messages', ->
     class Foo extends React.Component
@@ -44,14 +48,16 @@ describe 'ReactCoffeeScriptClass', ->
     class Foo extends React.Component
     expect(->
       expect(->
-        ReactDOM.render React.createElement(Foo), container
+        act ->
+          root.render React.createElement(Foo)
       ).toThrow()
     ).toErrorDev([
-      # A failed component renders twice in DEV
+      # A failed component renders four times in DEV in concurrent mode
+      'No `render` method found on the returned component instance',
+      'No `render` method found on the returned component instance',
       'No `render` method found on the returned component instance',
       'No `render` method found on the returned component instance',
     ])
-    undefined
 
   it 'renders a simple stateless component with prop', ->
     class Foo extends React.Component
@@ -62,7 +68,6 @@ describe 'ReactCoffeeScriptClass', ->
 
     test React.createElement(Foo, bar: 'foo'), 'DIV', 'foo'
     test React.createElement(Foo, bar: 'bar'), 'DIV', 'bar'
-    undefined
 
   it 'renders based on state using initial values in this.props', ->
     class Foo extends React.Component
@@ -76,7 +81,6 @@ describe 'ReactCoffeeScriptClass', ->
         )
 
     test React.createElement(Foo, initialValue: 'foo'), 'SPAN', 'foo'
-    undefined
 
   it 'renders based on state using props in the constructor', ->
     class Foo extends React.Component
@@ -95,10 +99,10 @@ describe 'ReactCoffeeScriptClass', ->
           className: @state.bar
         )
 
-    instance = test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
-    instance.changeState()
+    ref = React.createRef()
+    test React.createElement(Foo, initialValue: 'foo', ref: ref), 'DIV', 'foo'
+    ref.current.changeState()
     test React.createElement(Foo), 'SPAN', 'bar'
-    undefined
 
   it 'sets initial state with value returned by static getDerivedStateFromProps', ->
     class Foo extends React.Component
@@ -115,7 +119,6 @@ describe 'ReactCoffeeScriptClass', ->
         bar: 'bar'
       }
     test React.createElement(Foo, foo: 'foo'), 'DIV', 'foo bar'
-    undefined
 
   it 'warns if getDerivedStateFromProps is not static', ->
     class Foo extends React.Component
@@ -124,9 +127,9 @@ describe 'ReactCoffeeScriptClass', ->
       getDerivedStateFromProps: ->
         {}
     expect(->
-      ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
+      act ->
+        root.render React.createElement(Foo, foo: 'foo')
     ).toErrorDev 'Foo: getDerivedStateFromProps() is defined as an instance method and will be ignored. Instead, declare it as a static method.'
-    undefined
 
   it 'warns if getDerivedStateFromError is not static', ->
     class Foo extends React.Component
@@ -135,9 +138,9 @@ describe 'ReactCoffeeScriptClass', ->
       getDerivedStateFromError: ->
         {}
     expect(->
-      ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
+      act ->
+        root.render React.createElement(Foo, foo: 'foo')
     ).toErrorDev 'Foo: getDerivedStateFromError() is defined as an instance method and will be ignored. Instead, declare it as a static method.'
-    undefined
 
   it 'warns if getSnapshotBeforeUpdate is static', ->
     class Foo extends React.Component
@@ -146,9 +149,9 @@ describe 'ReactCoffeeScriptClass', ->
     Foo.getSnapshotBeforeUpdate = () ->
       {}
     expect(->
-      ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
+      act ->
+        root.render React.createElement(Foo, foo: 'foo')
     ).toErrorDev 'Foo: getSnapshotBeforeUpdate() is defined as a static method and will be ignored. Instead, declare it as an instance method.'
-    undefined
 
   it 'warns if state not initialized before static getDerivedStateFromProps', ->
     class Foo extends React.Component
@@ -162,14 +165,14 @@ describe 'ReactCoffeeScriptClass', ->
         bar: 'bar'
       }
     expect(->
-      ReactDOM.render(React.createElement(Foo, foo: 'foo'), container)
+      act ->
+        root.render React.createElement(Foo, foo: 'foo')
     ).toErrorDev (
       '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
       'undefined. This is not recommended. Instead, define the initial state by ' +
       'assigning an object to `this.state` in the constructor of `Foo`. ' +
       'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.'
     )
-    undefined
 
   it 'updates initial state with values returned by static getDerivedStateFromProps', ->
     class Foo extends React.Component
@@ -187,7 +190,6 @@ describe 'ReactCoffeeScriptClass', ->
         foo: "not-#{prevState.foo}"
       }
     test React.createElement(Foo), 'DIV', 'not-foo bar'
-    undefined
 
   it 'renders updated state with values returned by static getDerivedStateFromProps', ->
     class Foo extends React.Component
@@ -207,7 +209,6 @@ describe 'ReactCoffeeScriptClass', ->
       return null
     test React.createElement(Foo, update: false), 'DIV', 'initial'
     test React.createElement(Foo, update: true), 'DIV', 'updated'
-    undefined
 
   it 'renders based on context in the constructor', ->
     class Foo extends React.Component
@@ -239,7 +240,6 @@ describe 'ReactCoffeeScriptClass', ->
         React.createElement Foo
 
     test React.createElement(Outer), 'SPAN', 'foo'
-    undefined
 
   it 'renders only once when setting state in componentWillMount', ->
     renderCount = 0
@@ -255,8 +255,9 @@ describe 'ReactCoffeeScriptClass', ->
         React.createElement('span', className: @state.bar)
 
     test React.createElement(Foo, initialValue: 'foo'), 'SPAN', 'bar'
-    expect(renderCount).toBe 1
-    undefined
+    # This is broken with deferRenderPhaseUpdateToNextBatch flag on.
+    # We can't use the gate feature here because this test is also in CoffeeScript and TypeScript.
+    expect(renderCount).toBe(if global.__WWW__ and !global.__VARIANT__ then 2 else 1)
 
   it 'should warn with non-object in the initial state property', ->
     [['an array'], 'a string', 1234].forEach (state) ->
@@ -270,7 +271,6 @@ describe 'ReactCoffeeScriptClass', ->
       expect(->
         test React.createElement(Foo), 'SPAN', ''
       ).toErrorDev('Foo.state: must be set to an object or null')
-    undefined
 
   it 'should render with null in the initial state property', ->
     class Foo extends React.Component
@@ -281,7 +281,6 @@ describe 'ReactCoffeeScriptClass', ->
         React.createElement('span')
 
     test React.createElement(Foo), 'SPAN', ''
-    undefined
 
   it 'setState through an event handler', ->
     class Foo extends React.Component
@@ -298,9 +297,9 @@ describe 'ReactCoffeeScriptClass', ->
         )
 
     test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
-    attachedListener()
+    act ->
+      attachedListener()
     expect(renderedName).toBe 'bar'
-    undefined
 
   it 'should not implicitly bind event handlers', ->
     class Foo extends React.Component
@@ -318,7 +317,6 @@ describe 'ReactCoffeeScriptClass', ->
 
     test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
     expect(attachedListener).toThrow()
-    undefined
 
   it 'renders using forceUpdate even when there is no state', ->
     class Foo extends React.Component
@@ -336,9 +334,9 @@ describe 'ReactCoffeeScriptClass', ->
         )
 
     test React.createElement(Foo, initialValue: 'foo'), 'DIV', 'foo'
-    attachedListener()
+    act ->
+      attachedListener()
     expect(renderedName).toBe 'bar'
-    undefined
 
   it 'will call all the normal life cycle methods', ->
     lifeCycles = []
@@ -387,9 +385,9 @@ describe 'ReactCoffeeScriptClass', ->
       'did-update',    { value: 'foo' }, {}
     ]
     lifeCycles = [] # reset
-    ReactDOM.unmountComponentAtNode container
+    act ->
+      root.unmount()
     expect(lifeCycles).toEqual ['will-unmount']
-    undefined
 
   it 'warns when classic properties are defined on the instance,
       but does not invoke them.', ->
@@ -425,7 +423,6 @@ describe 'ReactCoffeeScriptClass', ->
     ])
     expect(getInitialStateWasCalled).toBe false
     expect(getDefaultPropsWasCalled).toBe false
-    undefined
 
   it 'does not warn about getInitialState() on class components
       if state is also defined.', ->
@@ -443,7 +440,6 @@ describe 'ReactCoffeeScriptClass', ->
         )
 
     test React.createElement(Foo), 'SPAN', 'foo'
-    undefined
 
   it 'should warn when misspelling shouldComponentUpdate', ->
     class NamedComponent extends React.Component
@@ -462,7 +458,6 @@ describe 'ReactCoffeeScriptClass', ->
        Did you mean shouldComponentUpdate()? The name is phrased as a
        question because the function is expected to return a value.'
     )
-    undefined
 
   it 'should warn when misspelling componentWillReceiveProps', ->
     class NamedComponent extends React.Component
@@ -480,7 +475,6 @@ describe 'ReactCoffeeScriptClass', ->
       'Warning: NamedComponent has a method called componentWillRecieveProps().
        Did you mean componentWillReceiveProps()?'
     )
-    undefined
 
   it 'should warn when misspelling UNSAFE_componentWillReceiveProps', ->
     class NamedComponent extends React.Component
@@ -498,24 +492,22 @@ describe 'ReactCoffeeScriptClass', ->
       'Warning: NamedComponent has a method called UNSAFE_componentWillRecieveProps().
        Did you mean UNSAFE_componentWillReceiveProps()?'
     )
-    undefined
 
   it 'should throw AND warn when trying to access classic APIs', ->
-    instance =
-      test React.createElement(InnerComponent, name: 'foo'), 'DIV', 'foo'
+    ref = React.createRef()
+    test React.createElement(InnerComponent, name: 'foo', ref: ref), 'DIV', 'foo'
     expect(->
-      expect(-> instance.replaceState {}).toThrow()
+      expect(-> ref.current.replaceState {}).toThrow()
     ).toWarnDev(
       'replaceState(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
     )
     expect(->
-      expect(-> instance.isMounted()).toThrow()
+      expect(-> ref.current.isMounted()).toThrow()
     ).toWarnDev(
       'isMounted(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
     )
-    undefined
 
   it 'supports this.context passed via getChildContext', ->
     class Bar extends React.Component
@@ -533,7 +525,6 @@ describe 'ReactCoffeeScriptClass', ->
         React.createElement Bar
 
     test React.createElement(Foo), 'DIV', 'bar-through-context'
-    undefined
 
   it 'supports classic refs', ->
     class Foo extends React.Component
@@ -543,13 +534,14 @@ describe 'ReactCoffeeScriptClass', ->
           ref: 'inner'
         )
 
-    instance = test(React.createElement(Foo), 'DIV', 'foo')
-    expect(instance.refs.inner.getName()).toBe 'foo'
-    undefined
+    ref = React.createRef()
+    test(React.createElement(Foo, ref: ref), 'DIV', 'foo')
+    expect(ref.current.refs.inner.getName()).toBe 'foo'
 
   it 'supports drilling through to the DOM using findDOMNode', ->
-    instance = test React.createElement(InnerComponent, name: 'foo'), 'DIV', 'foo'
-    node = ReactDOM.findDOMNode(instance)
+    ref = React.createRef()
+    test React.createElement(InnerComponent, name: 'foo', ref: ref), 'DIV', 'foo'
+    node = ReactDOM.findDOMNode(ref.current)
     expect(node).toBe container.firstChild
-    undefined
+
   undefined
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
index 1d554ca9f458..3ae11bc4e74c 100644
--- a/packages/react/src/__tests__/ReactES6Class-test.js
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -12,9 +12,11 @@
 let PropTypes;
 let React;
 let ReactDOM;
+let act;
 
 describe('ReactES6Class', () => {
   let container;
+  let root;
   const freeze = function(expectation) {
     Object.freeze(expectation);
     return expectation;
@@ -27,7 +29,9 @@ describe('ReactES6Class', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
+    act = require('react-dom/test-utils').act;
     container = document.createElement('div');
+    root = ReactDOM.createRoot(container);
     attachedListener = null;
     renderedName = null;
     Inner = class extends React.Component {
@@ -43,11 +47,10 @@ describe('ReactES6Class', () => {
   });
 
   function test(element, expectedTag, expectedClassName) {
-    const instance = ReactDOM.render(element, container);
+    act(() => root.render(element));
     expect(container.firstChild).not.toBeNull();
     expect(container.firstChild.tagName).toBe(expectedTag);
     expect(container.firstChild.className).toBe(expectedClassName);
-    return instance;
   }
 
   it('preserves the name of the class for use in error messages', () => {
@@ -57,10 +60,14 @@ describe('ReactES6Class', () => {
 
   it('throws if no render function is defined', () => {
     class Foo extends React.Component {}
-    expect(() =>
-      expect(() => ReactDOM.render(<Foo />, container)).toThrow(),
-    ).toErrorDev([
-      // A failed component renders twice in DEV
+    expect(() => {
+      expect(() => act(() => root.render(<Foo />))).toThrow();
+    }).toErrorDev([
+      // A failed component renders four times in DEV in concurrent mode
+      'Warning: Foo(...): No `render` method found on the returned component ' +
+        'instance: you may have forgotten to define `render`.',
+      'Warning: Foo(...): No `render` method found on the returned component ' +
+        'instance: you may have forgotten to define `render`.',
       'Warning: Foo(...): No `render` method found on the returned component ' +
         'instance: you may have forgotten to define `render`.',
       'Warning: Foo(...): No `render` method found on the returned component ' +
@@ -107,8 +114,9 @@ describe('ReactES6Class', () => {
         return <span className={this.state.bar} />;
       }
     }
-    const instance = test(<Foo initialValue="foo" />, 'DIV', 'foo');
-    instance.changeState();
+    const ref = React.createRef();
+    test(<Foo initialValue="foo" ref={ref} />, 'DIV', 'foo');
+    act(() => ref.current.changeState());
     test(<Foo />, 'SPAN', 'bar');
   });
 
@@ -137,7 +145,7 @@ describe('ReactES6Class', () => {
         return <div />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
+    expect(() => act(() => root.render(<Foo foo="foo" />))).toErrorDev(
       'Foo: getDerivedStateFromProps() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
     );
@@ -152,7 +160,7 @@ describe('ReactES6Class', () => {
         return <div />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
+    expect(() => act(() => root.render(<Foo foo="foo" />))).toErrorDev(
       'Foo: getDerivedStateFromError() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.',
     );
@@ -165,7 +173,7 @@ describe('ReactES6Class', () => {
         return <div />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
+    expect(() => act(() => root.render(<Foo foo="foo" />))).toErrorDev(
       'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
         'and will be ignored. Instead, declare it as an instance method.',
     );
@@ -183,7 +191,7 @@ describe('ReactES6Class', () => {
         return <div className={`${this.state.foo} ${this.state.bar}`} />;
       }
     }
-    expect(() => ReactDOM.render(<Foo foo="foo" />, container)).toErrorDev(
+    expect(() => act(() => root.render(<Foo foo="foo" />))).toErrorDev(
       '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
         'undefined. This is not recommended. Instead, define the initial state by ' +
         'assigning an object to `this.state` in the constructor of `Foo`. ' +
@@ -277,7 +285,9 @@ describe('ReactES6Class', () => {
       }
     }
     test(<Foo initialValue="foo" />, 'SPAN', 'bar');
-    expect(renderCount).toBe(1);
+    // This is broken with deferRenderPhaseUpdateToNextBatch flag on.
+    // We can't use the gate feature here because this test is also in CoffeeScript and TypeScript.
+    expect(renderCount).toBe(global.__WWW__ && !global.__VARIANT__ ? 2 : 1);
   });
 
   it('should warn with non-object in the initial state property', () => {
@@ -326,7 +336,8 @@ describe('ReactES6Class', () => {
       }
     }
     test(<Foo initialValue="foo" />, 'DIV', 'foo');
-    attachedListener();
+
+    act(() => attachedListener());
     expect(renderedName).toBe('bar');
   });
 
@@ -367,7 +378,7 @@ describe('ReactES6Class', () => {
       }
     }
     test(<Foo initialValue="foo" />, 'DIV', 'foo');
-    attachedListener();
+    act(() => attachedListener());
     expect(renderedName).toBe('bar');
   });
 
@@ -416,7 +427,7 @@ describe('ReactES6Class', () => {
       'did-update', freeze({value: 'foo'}), {},
     ]);
     lifeCycles = []; // reset
-    ReactDOM.unmountComponentAtNode(container);
+    act(() => root.unmount());
     expect(lifeCycles).toEqual(['will-unmount']);
   });
 
@@ -520,15 +531,16 @@ describe('ReactES6Class', () => {
   });
 
   it('should throw AND warn when trying to access classic APIs', () => {
-    const instance = test(<Inner name="foo" />, 'DIV', 'foo');
+    const ref = React.createRef();
+    test(<Inner name="foo" ref={ref} />, 'DIV', 'foo');
     expect(() =>
-      expect(() => instance.replaceState({})).toThrow(),
+      expect(() => ref.current.replaceState({})).toThrow(),
     ).toWarnDev(
       'replaceState(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true},
     );
     expect(() =>
-      expect(() => instance.isMounted()).toThrow(),
+      expect(() => ref.current.isMounted()).toThrow(),
     ).toWarnDev(
       'isMounted(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true},
@@ -560,13 +572,15 @@ describe('ReactES6Class', () => {
         return <Inner name="foo" ref="inner" />;
       }
     }
-    const instance = test(<Foo />, 'DIV', 'foo');
-    expect(instance.refs.inner.getName()).toBe('foo');
+    const ref = React.createRef();
+    test(<Foo ref={ref} />, 'DIV', 'foo');
+    expect(ref.current.refs.inner.getName()).toBe('foo');
   });
 
   it('supports drilling through to the DOM using findDOMNode', () => {
-    const instance = test(<Inner name="foo" />, 'DIV', 'foo');
-    const node = ReactDOM.findDOMNode(instance);
+    const ref = React.createRef();
+    test(<Inner name="foo" ref={ref} />, 'DIV', 'foo');
+    const node = ReactDOM.findDOMNode(ref.current);
     expect(node).toBe(container.firstChild);
   });
 });
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
index cce61a34aa04..e8533b3e37af 100644
--- a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -1,6 +1,7 @@
 /// <reference path="./testDefinitions/PropTypes.d.ts" />
 /// <reference path="./testDefinitions/React.d.ts" />
 /// <reference path="./testDefinitions/ReactDOM.d.ts" />
+/// <reference path="./testDefinitions/ReactDOMTestUtils.d.ts" />
 
 /*!
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -11,11 +12,13 @@
 
 import React = require('react');
 import ReactDOM = require('react-dom');
+import ReactDOMTestUtils = require('react-dom/test-utils');
 import PropTypes = require('prop-types');
 
 // Before Each
 
 let container;
+let root;
 let attachedListener = null;
 let renderedName = null;
 
@@ -31,11 +34,10 @@ class Inner extends React.Component {
 }
 
 function test(element, expectedTag, expectedClassName) {
-  const instance = ReactDOM.render(element, container);
+  ReactDOMTestUtils.act(() => root.render(element));
   expect(container.firstChild).not.toBeNull();
   expect(container.firstChild.tagName).toBe(expectedTag);
   expect(container.firstChild.className).toBe(expectedClassName);
-  return instance;
 }
 
 // Classes need to be declared at the top level scope, so we declare all the
@@ -313,6 +315,7 @@ class ClassicRefs extends React.Component {
 describe('ReactTypeScriptClass', function() {
   beforeEach(function() {
     container = document.createElement('div');
+    root = ReactDOM.createRoot(container);
     attachedListener = null;
     renderedName = null;
   });
@@ -322,12 +325,16 @@ describe('ReactTypeScriptClass', function() {
   });
 
   it('throws if no render function is defined', function() {
-    expect(() =>
+    expect(() => {
       expect(() =>
-        ReactDOM.render(React.createElement(Empty), container)
-      ).toThrow()
-    ).toErrorDev([
-      // A failed component renders twice in DEV
+        ReactDOMTestUtils.act(() => root.render(React.createElement(Empty)))
+      ).toThrow();
+    }).toErrorDev([
+      // A failed component renders four times in DEV in concurrent mode
+      'Warning: Empty(...): No `render` method found on the returned ' +
+        'component instance: you may have forgotten to define `render`.',
+      'Warning: Empty(...): No `render` method found on the returned ' +
+        'component instance: you may have forgotten to define `render`.',
       'Warning: Empty(...): No `render` method found on the returned ' +
         'component instance: you may have forgotten to define `render`.',
       'Warning: Empty(...): No `render` method found on the returned ' +
@@ -349,12 +356,13 @@ describe('ReactTypeScriptClass', function() {
   });
 
   it('renders based on state using props in the constructor', function() {
-    const instance = test(
-      React.createElement(StateBasedOnProps, {initialValue: 'foo'}),
+    const ref = React.createRef();
+    test(
+      React.createElement(StateBasedOnProps, {initialValue: 'foo', ref: ref}),
       'DIV',
       'foo'
     );
-    instance.changeState();
+    ReactDOMTestUtils.act(() => ref.current.changeState());
     test(React.createElement(StateBasedOnProps), 'SPAN', 'bar');
   });
 
@@ -389,7 +397,9 @@ describe('ReactTypeScriptClass', function() {
       }
     }
     expect(function() {
-      ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
+      ReactDOMTestUtils.act(() =>
+        root.render(React.createElement(Foo, {foo: 'foo'}))
+      );
     }).toErrorDev(
       'Foo: getDerivedStateFromProps() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.'
@@ -406,7 +416,9 @@ describe('ReactTypeScriptClass', function() {
       }
     }
     expect(function() {
-      ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
+      ReactDOMTestUtils.act(() =>
+        root.render(React.createElement(Foo, {foo: 'foo'}))
+      );
     }).toErrorDev(
       'Foo: getDerivedStateFromError() is defined as an instance method ' +
         'and will be ignored. Instead, declare it as a static method.'
@@ -415,14 +427,15 @@ describe('ReactTypeScriptClass', function() {
 
   it('warns if getSnapshotBeforeUpdate is static', function() {
     class Foo extends React.Component {
-      static getSnapshotBeforeUpdate() {
-      }
+      static getSnapshotBeforeUpdate() {}
       render() {
         return React.createElement('div', {});
       }
     }
     expect(function() {
-      ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
+      ReactDOMTestUtils.act(() =>
+        root.render(React.createElement(Foo, {foo: 'foo'}))
+      );
     }).toErrorDev(
       'Foo: getSnapshotBeforeUpdate() is defined as a static method ' +
         'and will be ignored. Instead, declare it as an instance method.'
@@ -444,12 +457,14 @@ describe('ReactTypeScriptClass', function() {
       }
     }
     expect(function() {
-      ReactDOM.render(React.createElement(Foo, {foo: 'foo'}), container);
+      ReactDOMTestUtils.act(() =>
+        root.render(React.createElement(Foo, {foo: 'foo'}))
+      );
     }).toErrorDev(
       '`Foo` uses `getDerivedStateFromProps` but its initial state is ' +
-      'undefined. This is not recommended. Instead, define the initial state by ' +
-      'assigning an object to `this.state` in the constructor of `Foo`. ' +
-      'This ensures that `getDerivedStateFromProps` arguments have a consistent shape.'
+        '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.'
     );
   });
 
@@ -501,7 +516,9 @@ describe('ReactTypeScriptClass', function() {
   it('renders only once when setting state in componentWillMount', function() {
     renderCount = 0;
     test(React.createElement(RenderOnce, {initialValue: 'foo'}), 'SPAN', 'bar');
-    expect(renderCount).toBe(1);
+    // This is broken with deferRenderPhaseUpdateToNextBatch flag on.
+    // We can't use the gate feature in TypeScript.
+    expect(renderCount).toBe(global.__WWW__ && !global.__VARIANT__ ? 2 : 1);
   });
 
   it('should warn with non-object in the initial state property', function() {
@@ -526,7 +543,7 @@ describe('ReactTypeScriptClass', function() {
       'DIV',
       'foo'
     );
-    attachedListener();
+    ReactDOMTestUtils.act(() => attachedListener());
     expect(renderedName).toBe('bar');
   });
 
@@ -545,7 +562,7 @@ describe('ReactTypeScriptClass', function() {
       'DIV',
       'foo'
     );
-    attachedListener();
+    ReactDOMTestUtils.act(() => attachedListener());
     expect(renderedName).toBe('bar');
   });
 
@@ -569,7 +586,7 @@ describe('ReactTypeScriptClass', function() {
       {},
     ]);
     lifeCycles = []; // reset
-    ReactDOM.unmountComponentAtNode(container);
+    ReactDOMTestUtils.act(() => root.unmount(container));
     expect(lifeCycles).toEqual(['will-unmount']);
   });
 
@@ -645,19 +662,16 @@ describe('ReactTypeScriptClass', function() {
   });
 
   it('should throw AND warn when trying to access classic APIs', function() {
-    const instance = test(
-      React.createElement(Inner, {name: 'foo'}),
-      'DIV',
-      'foo'
-    );
+    const ref = React.createRef();
+    test(React.createElement(Inner, {name: 'foo', ref: ref}), 'DIV', 'foo');
     expect(() =>
-      expect(() => instance.replaceState({})).toThrow()
+      expect(() => ref.current.replaceState({})).toThrow()
     ).toWarnDev(
       'replaceState(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
     );
     expect(() =>
-      expect(() => instance.isMounted()).toThrow()
+      expect(() => ref.current.isMounted()).toThrow()
     ).toWarnDev(
       'isMounted(...) is deprecated in plain JavaScript React classes',
       {withoutStack: true}
@@ -669,17 +683,15 @@ describe('ReactTypeScriptClass', function() {
   });
 
   it('supports classic refs', function() {
-    const instance = test(React.createElement(ClassicRefs), 'DIV', 'foo');
-    expect(instance.refs.inner.getName()).toBe('foo');
+    const ref = React.createRef();
+    test(React.createElement(ClassicRefs, {ref: ref}), 'DIV', 'foo');
+    expect(ref.current.refs.inner.getName()).toBe('foo');
   });
 
   it('supports drilling through to the DOM using findDOMNode', function() {
-    const instance = test(
-      React.createElement(Inner, {name: 'foo'}),
-      'DIV',
-      'foo'
-    );
-    const node = ReactDOM.findDOMNode(instance);
+    const ref = React.createRef();
+    test(React.createElement(Inner, {name: 'foo', ref: ref}), 'DIV', 'foo');
+    const node = ReactDOM.findDOMNode(ref.current);
     expect(node).toBe(container.firstChild);
   });
 });
diff --git a/packages/react/src/__tests__/testDefinitions/React.d.ts b/packages/react/src/__tests__/testDefinitions/React.d.ts
index 0fa9fbe94a13..b1d5ceb70bba 100644
--- a/packages/react/src/__tests__/testDefinitions/React.d.ts
+++ b/packages/react/src/__tests__/testDefinitions/React.d.ts
@@ -12,6 +12,8 @@
  * just helpers for the unit test.
  */
 
+declare let global: any;
+
 declare module 'react' {
   export class Component {
     props: any;
@@ -24,4 +26,5 @@ declare module 'react' {
   }
   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
index 90ee316124d9..1d0e883ab162 100644
--- a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
@@ -13,6 +13,7 @@
  */
 
 declare module 'react-dom' {
+  export function createRoot(container : any) : any
   export function render(element : any, container : any) : any
   export function unmountComponentAtNode(container : any) : void
   export function findDOMNode(instance : any) : any
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts
new file mode 100644
index 000000000000..50ff68603767
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts
@@ -0,0 +1,17 @@
+/*!
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * 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/test-utils' {
+  export function act(cb : () => any) : any
+}
diff --git a/scripts/jest/typescript/preprocessor.js b/scripts/jest/typescript/preprocessor.js
index d14471a0e5a4..d5457ff2ccd7 100644
--- a/scripts/jest/typescript/preprocessor.js
+++ b/scripts/jest/typescript/preprocessor.js
@@ -42,7 +42,7 @@ function compile(content, contentFilename) {
       let source;
       const libRegex = /lib\.(.+\.)?d\.ts$/;
       const jestRegex = /jest\.d\.ts/;
-      const reactRegex = /(?:React|ReactDOM|PropTypes)(?:\.d)?\.ts$/;
+      const reactRegex = /(?:React|ReactDOM|ReactDOMTestUtils|PropTypes)(?:\.d)?\.ts$/;
 
       // `path.normalize` is used to turn forward slashes in
       // the file path into backslashes on Windows.

From 86715efa23c02dd156e61a4476f28045bb5f4654 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 2 Jun 2021 21:03:29 -0400
Subject: [PATCH 0581/1603] Resolve the true entry point during tests (#21505)

* Resolve the entry point for tests the same way builds do

This way the source tests, test the same entry point configuration.

* Gate test selectors on www

These are currently only exposed in www builds

* Gate createEventHandle / useFocus on www

These are enabled in both www variants but not OSS experimental.

* Temporarily disable www-modern entry point

Use the main one that has all the exports until we fix more tests.

* Remove enableCache override that's no longer correct

* Open gates for www

These used to not be covered because they used Cache which wasn't exposed.
---
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  6 +-
 ...DOMServerPartialHydration-test.internal.js | 12 ++--
 ...MServerSelectiveHydration-test.internal.js | 10 +--
 .../ReactDOMTestSelectors-test.internal.js    | 38 ++++++++++-
 .../src/__tests__/ReactUpdates-test.js        |  2 +-
 .../__tests__/ReactWrongReturnPointer-test.js |  1 -
 .../DOMPluginEventSystem-test.internal.js     | 68 +++++++++----------
 .../src/__tests__/ReactFetchNode-test.js      | 10 +--
 .../__tests__/useFocus-test.internal.js       | 24 +++----
 .../__tests__/useFocusWithin-test.internal.js | 34 +++++-----
 .../__tests__/DebugTracing-test.internal.js   |  6 +-
 .../src/__tests__/ReactCache-test.js          | 32 ++++-----
 .../__tests__/ReactContextPropagation-test.js |  7 +-
 .../src/__tests__/ReactIncremental-test.js    |  6 +-
 ...tIncrementalErrorHandling-test.internal.js |  2 +-
 .../ReactIncrementalSideEffects-test.js       | 10 +--
 .../src/__tests__/ReactNewContext-test.js     |  2 +-
 .../src/__tests__/ReactOffscreen-test.js      | 12 ++--
 .../ReactSchedulerIntegration-test.js         |  2 +-
 .../src/__tests__/ReactScope-test.internal.js | 20 +++---
 .../ReactSubtreeFlagsWarning-test.js          |  2 +-
 scripts/jest/TestFlags.js                     |  5 --
 scripts/jest/config.source-persistent.js      | 21 ------
 scripts/jest/config.source-www.js             | 21 ------
 scripts/jest/config.source.js                 | 21 ------
 scripts/jest/setupHostConfigs.js              | 54 ++++++++++++++-
 26 files changed, 223 insertions(+), 205 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index 4b99fa19303a..d9ecced72e8a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -286,7 +286,7 @@ describe('ReactDOMFiberAsync', () => {
       expect(ops).toEqual(['BC', 'ABCD']);
     });
 
-    // @gate experimental
+    // @gate experimental || www
     it('flushControlled flushes updates before yielding to browser', () => {
       let inst;
       class Counter extends React.Component {
@@ -326,7 +326,7 @@ describe('ReactDOMFiberAsync', () => {
       ]);
     });
 
-    // @gate experimental
+    // @gate experimental || www
     it('flushControlled does not flush until end of outermost batchedUpdates', () => {
       let inst;
       class Counter extends React.Component {
@@ -357,7 +357,7 @@ describe('ReactDOMFiberAsync', () => {
       ]);
     });
 
-    // @gate experimental
+    // @gate experimental || www
     it('flushControlled returns nothing', () => {
       // In the future, we may want to return a thenable "work" object.
       let inst;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 65ae9219e747..8e3c99ccc283 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -571,7 +571,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.className).toBe('hi');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('blocks updates to hydrate the content first if props changed at idle priority', async () => {
     let suspend = false;
     let resolve;
@@ -1498,7 +1498,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('ALoading B');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
     let suspend = false;
     let resolve;
@@ -1912,7 +1912,7 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
+  // @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;
@@ -2077,7 +2077,7 @@ describe('ReactDOMServerPartialHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
+  // @gate www
   it('invokes discrete events on nested suspense boundaries in a root (createEventHandle)', async () => {
     let suspend = false;
     let isServerRendering = true;
@@ -2617,7 +2617,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.innerHTML).toBe('Hidden child');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('renders a hidden LegacyHidden component inside a Suspense boundary', async () => {
     const ref = React.createRef();
 
@@ -2646,7 +2646,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.innerHTML).toBe('Hidden child');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('renders a visible LegacyHidden component', async () => {
     const ref = React.createRef();
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index d8b6598a7863..73269b2262e5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -369,7 +369,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
+  // @gate www
   it('hydrates the target boundary synchronously during a click (createEventHandle)', async () => {
     const setClick = ReactDOM.unstable_createEventHandle('click');
     let isServerRendering = true;
@@ -438,7 +438,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
+  // @gate www
   it('hydrates at higher pri if sync did not work first time (createEventHandle)', async () => {
     let suspend = false;
     let isServerRendering = true;
@@ -526,7 +526,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
+  // @gate www
   it('hydrates at higher pri for secondary discrete events (createEventHandle)', async () => {
     const setClick = ReactDOM.unstable_createEventHandle('click');
     let suspend = false;
@@ -812,7 +812,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('hydrates the last explicitly hydrated target at higher priority', async () => {
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -861,7 +861,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     expect(Scheduler).toFlushAndYield(['App', 'C', 'B', 'A']);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('hydrates before an update even if hydration moves away from it', async () => {
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
diff --git a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
index 20fe21a73b4c..24c3978566a0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
@@ -56,6 +56,7 @@ describe('ReactDOMTestSelectors', () => {
   });
 
   describe('findAllNodes', () => {
+    // @gate www
     it('should support searching from the document root', () => {
       function Example() {
         return (
@@ -75,6 +76,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
+    // @gate www
     it('should support searching from the container', () => {
       function Example() {
         return (
@@ -94,6 +96,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
+    // @gate www
     it('should support searching from a previous match if the match had a data-testname', () => {
       function Outer() {
         return (
@@ -124,6 +127,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('inner');
     });
 
+    // @gate www
     it('should not support searching from a previous match if the match did not have a data-testname', () => {
       function Outer() {
         return (
@@ -153,6 +157,7 @@ describe('ReactDOMTestSelectors', () => {
       );
     });
 
+    // @gate www
     it('should support an multiple component types in the selector array', () => {
       function Outer() {
         return (
@@ -206,6 +211,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match3');
     });
 
+    // @gate www
     it('should find multiple matches', () => {
       function Example1() {
         return (
@@ -243,6 +249,7 @@ describe('ReactDOMTestSelectors', () => {
       ]);
     });
 
+    // @gate www
     it('should ignore nested matches', () => {
       function Example() {
         return (
@@ -262,6 +269,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toEqual('match1');
     });
 
+    // @gate www
     it('should enforce the specific order of selectors', () => {
       function Outer() {
         return (
@@ -286,6 +294,7 @@ describe('ReactDOMTestSelectors', () => {
       ).toHaveLength(0);
     });
 
+    // @gate www
     it('should not search within hidden subtrees', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -315,6 +324,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0]).toBe(ref2.current);
     });
 
+    // @gate www
     it('should support filtering by display text', () => {
       function Example() {
         return (
@@ -337,6 +347,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
+    // @gate www
     it('should support filtering by explicit accessibiliy role', () => {
       function Example() {
         return (
@@ -361,6 +372,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
+    // @gate www
     it('should support filtering by explicit secondary accessibiliy role', () => {
       const ref = React.createRef();
 
@@ -385,6 +397,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0]).toBe(ref.current);
     });
 
+    // @gate www
     it('should support filtering by implicit accessibiliy role', () => {
       function Example() {
         return (
@@ -407,6 +420,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
+    // @gate www
     it('should support filtering by implicit accessibiliy role with attributes qualifications', () => {
       function Example() {
         return (
@@ -429,6 +443,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
+    // @gate www
     it('should support searching ahead with the has() selector', () => {
       function Example() {
         return (
@@ -464,12 +479,14 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
+    // @gate www
     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
     it('should throw if an invalid host root is specified', () => {
       const ref = React.createRef();
       function Example() {
@@ -485,6 +502,7 @@ describe('ReactDOMTestSelectors', () => {
   });
 
   describe('getFindAllNodesFailureDescription', () => {
+    // @gate www
     it('should describe findAllNodes failures caused by the component type selector', () => {
       function Outer() {
         return <Middle />;
@@ -514,6 +532,7 @@ No matching component was found for:
       );
     });
 
+    // @gate www
     it('should return null if findAllNodes was able to find a match', () => {
       function Example() {
         return (
@@ -549,6 +568,7 @@ No matching component was found for:
       };
     }
 
+    // @gate www
     it('should return a single rect for a component that returns a single root host element', () => {
       const ref = React.createRef();
 
@@ -582,6 +602,7 @@ No matching component was found for:
       });
     });
 
+    // @gate www
     it('should return a multiple rects for multiple matches', () => {
       const outerRef = React.createRef();
       const innerRef = React.createRef();
@@ -631,6 +652,7 @@ No matching component was found for:
       });
     });
 
+    // @gate www
     it('should return a multiple rects for single match that returns a fragment', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -680,6 +702,7 @@ No matching component was found for:
       });
     });
 
+    // @gate www
     it('should merge overlapping rects', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -734,6 +757,7 @@ No matching component was found for:
       });
     });
 
+    // @gate www
     it('should merge some types of adjacent rects (if they are the same in one dimension)', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -833,6 +857,7 @@ No matching component was found for:
       });
     });
 
+    // @gate www
     it('should not search within hidden subtrees', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -889,6 +914,7 @@ No matching component was found for:
   });
 
   describe('focusWithin', () => {
+    // @gate www
     it('should return false if the specified component path has no matches', () => {
       function Example() {
         return <Child />;
@@ -909,6 +935,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
+    // @gate www
     it('should return false if there are no focusable elements within the matched subtree', () => {
       function Example() {
         return <Child />;
@@ -926,6 +953,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
+    // @gate www
     it('should return false if the only focusable elements are disabled', () => {
       function Example() {
         return (
@@ -943,6 +971,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
+    // @gate www
     it('should return false if the only focusable elements are hidden', () => {
       function Example() {
         return <button hidden={true}>not clickable</button>;
@@ -956,6 +985,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
+    // @gate www
     it('should successfully focus the first focusable element within the tree', () => {
       const secondRef = React.createRef(null);
 
@@ -1010,6 +1040,7 @@ No matching component was found for:
       expect(handleThirdFocus).not.toHaveBeenCalled();
     });
 
+    // @gate www
     it('should successfully focus the first focusable element even if application logic interferes', () => {
       const ref = React.createRef(null);
 
@@ -1039,6 +1070,7 @@ No matching component was found for:
       expect(handleFocus).toHaveBeenCalledTimes(1);
     });
 
+    // @gate www
     it('should not focus within hidden subtrees', () => {
       const secondRef = React.createRef(null);
 
@@ -1162,6 +1194,7 @@ No matching component was found for:
       window.IntersectionObserver = IntersectionObserver;
     });
 
+    // @gate www
     it('should notify a listener when the underlying instance intersection changes', () => {
       const ref = React.createRef(null);
 
@@ -1198,6 +1231,7 @@ No matching component was found for:
       expect(handleVisibilityChange).toHaveBeenCalledWith([{rect, ratio: 0.5}]);
     });
 
+    // @gate www
     it('should notify a listener of multiple targets when the underlying instance intersection changes', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -1274,6 +1308,7 @@ No matching component was found for:
       ]);
     });
 
+    // @gate www
     it('should stop listening when its disconnected', () => {
       const ref = React.createRef(null);
 
@@ -1308,7 +1343,7 @@ No matching component was found for:
     });
 
     // This test reuires gating because it relies on the __DEV__ only commit hook to work.
-    // @gate __DEV__
+    // @gate www && __DEV__
     it('should update which targets its listening to after a commit', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -1387,6 +1422,7 @@ No matching component was found for:
       ]);
     });
 
+    // @gate www
     it('should not observe components within hidden subtrees', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index dfa1a51939c3..fd883f7e32d4 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -1300,7 +1300,7 @@ describe('ReactUpdates', () => {
     expect(ops).toEqual(['Foo', 'Bar', 'Baz']);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('delays sync updates inside hidden subtrees in Concurrent Mode', () => {
     const container = document.createElement('div');
 
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index 37b8f72cd239..ac6e37374f0a 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -194,7 +194,6 @@ test('warns in DEV if return pointer is inconsistent', async () => {
   );
 });
 
-// @gate experimental
 // @gate enableCache
 test('regression (#20932): return pointer is correct before entering deleted tree', async () => {
   // Based on a production bug. Designed to trigger a very specific
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 81ce4ecc1940..b4765bc8ad38 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -1257,7 +1257,7 @@ describe('DOMPluginEventSystem', () => {
             act = ReactTestUtils.unstable_concurrentAct;
           });
 
-          // @gate experimental
+          // @gate www
           it('can render correctly with the ReactDOMServer', () => {
             const clickEvent = jest.fn();
             const setClick = ReactDOM.unstable_createEventHandle('click');
@@ -1275,7 +1275,7 @@ describe('DOMPluginEventSystem', () => {
             expect(output).toBe(`<div>Hello world</div>`);
           });
 
-          // @gate experimental
+          // @gate www
           it('can render correctly with the ReactDOMServer hydration', () => {
             const clickEvent = jest.fn();
             const spanRef = React.createRef();
@@ -1301,7 +1301,7 @@ describe('DOMPluginEventSystem', () => {
             expect(clickEvent).toHaveBeenCalledTimes(1);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly work for a basic "click" listener', () => {
             let log = [];
             const clickEvent = jest.fn(event => {
@@ -1409,7 +1409,7 @@ describe('DOMPluginEventSystem', () => {
             expect(clickEvent2).toBeCalledTimes(1);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly work for setting and clearing a basic "click" listener', () => {
             const clickEvent = jest.fn();
             const divRef = React.createRef();
@@ -1450,7 +1450,7 @@ describe('DOMPluginEventSystem', () => {
             expect(clickEvent).toBeCalledTimes(0);
           });
 
-          // @gate experimental
+          // @gate www
           it('should handle the target being a text node', () => {
             const clickEvent = jest.fn();
             const buttonRef = React.createRef();
@@ -1472,7 +1472,7 @@ describe('DOMPluginEventSystem', () => {
             expect(clickEvent).toBeCalledTimes(1);
           });
 
-          // @gate experimental
+          // @gate www
           it('handle propagation of click events', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
@@ -1541,7 +1541,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log[3]).toEqual(['bubble', buttonElement]);
           });
 
-          // @gate experimental
+          // @gate www
           it('handle propagation of click events mixed with onClick events', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
@@ -1601,7 +1601,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log[5]).toEqual(['bubble', buttonElement]);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly work for a basic "click" listener on the outer target', () => {
             const log = [];
             const clickEvent = jest.fn(event => {
@@ -1666,7 +1666,7 @@ describe('DOMPluginEventSystem', () => {
             expect(clickEvent).toBeCalledTimes(2);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly handle many nested target listeners', () => {
             const buttonRef = React.createRef();
             const targetListener1 = jest.fn();
@@ -1769,7 +1769,7 @@ describe('DOMPluginEventSystem', () => {
             expect(targetListener4).toHaveBeenCalledTimes(2);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly handle stopPropagation correctly for target events', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
@@ -1807,7 +1807,7 @@ describe('DOMPluginEventSystem', () => {
             expect(clickEvent).toHaveBeenCalledTimes(0);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly handle stopPropagation correctly for many target events', () => {
             const buttonRef = React.createRef();
             const targetListener1 = jest.fn(e => e.stopPropagation());
@@ -1860,7 +1860,7 @@ describe('DOMPluginEventSystem', () => {
             expect(targetListener4).toHaveBeenCalledTimes(1);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly handle stopPropagation for mixed capture/bubbling target listeners', () => {
             const buttonRef = React.createRef();
             const targetListener1 = jest.fn(e => e.stopPropagation());
@@ -1917,7 +1917,7 @@ describe('DOMPluginEventSystem', () => {
             expect(targetListener4).toHaveBeenCalledTimes(0);
           });
 
-          // @gate experimental
+          // @gate www
           it('should work with concurrent mode updates', async () => {
             const log = [];
             const ref = React.createRef();
@@ -1970,7 +1970,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log).toEqual([{counter: 1}]);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly work for a basic "click" window listener', () => {
             const log = [];
             const clickEvent = jest.fn(event => {
@@ -2021,7 +2021,7 @@ describe('DOMPluginEventSystem', () => {
             expect(clickEvent).toBeCalledTimes(2);
           });
 
-          // @gate experimental
+          // @gate www
           it('handle propagation of click events on the window', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
@@ -2101,7 +2101,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log[5]).toEqual(['bubble', window]);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly handle stopPropagation for mixed listeners', () => {
             const buttonRef = React.createRef();
             const rootListener1 = jest.fn(e => e.stopPropagation());
@@ -2152,7 +2152,7 @@ describe('DOMPluginEventSystem', () => {
             expect(rootListener2).toHaveBeenCalledTimes(0);
           });
 
-          // @gate experimental
+          // @gate www
           it('should correctly handle stopPropagation for delegated listeners', () => {
             const buttonRef = React.createRef();
             const rootListener1 = jest.fn(e => e.stopPropagation());
@@ -2198,7 +2198,7 @@ describe('DOMPluginEventSystem', () => {
             expect(rootListener4).toHaveBeenCalledTimes(0);
           });
 
-          // @gate experimental
+          // @gate www
           it('handle propagation of click events on the window and document', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
@@ -2311,7 +2311,7 @@ describe('DOMPluginEventSystem', () => {
             }
           });
 
-          // @gate experimental
+          // @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
@@ -2323,7 +2323,7 @@ describe('DOMPluginEventSystem', () => {
             );
           });
 
-          // @gate experimental
+          // @gate www
           it('beforeblur and afterblur are called after a focused element is unmounted', () => {
             const log = [];
             // We have to persist here because we want to read relatedTarget later.
@@ -2382,7 +2382,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log).toEqual(['beforeblur', 'afterblur']);
           });
 
-          // @gate experimental
+          // @gate www
           it('beforeblur and afterblur are called after a nested focused element is unmounted', () => {
             const log = [];
             // We have to persist here because we want to read relatedTarget later.
@@ -2445,7 +2445,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log).toEqual(['beforeblur', 'afterblur']);
           });
 
-          // @gate experimental
+          // @gate www
           it('beforeblur should skip handlers from a deleted subtree after the focused element is unmounted', () => {
             const onBeforeBlur = jest.fn();
             const innerRef = React.createRef();
@@ -2499,7 +2499,7 @@ describe('DOMPluginEventSystem', () => {
             expect(onBeforeBlur).toHaveBeenCalledTimes(1);
           });
 
-          // @gate experimental
+          // @gate www
           it('beforeblur and afterblur are called after a focused element is suspended', () => {
             const log = [];
             // We have to persist here because we want to read relatedTarget later.
@@ -2585,7 +2585,7 @@ describe('DOMPluginEventSystem', () => {
             document.body.removeChild(container2);
           });
 
-          // @gate experimental
+          // @gate www
           it('beforeblur should skip handlers from a deleted subtree after the focused element is suspended', () => {
             const onBeforeBlur = jest.fn();
             const innerRef = React.createRef();
@@ -2666,7 +2666,7 @@ describe('DOMPluginEventSystem', () => {
             document.body.removeChild(container2);
           });
 
-          // @gate experimental
+          // @gate www
           it('regression: does not fire beforeblur/afterblur if target is already hidden', () => {
             const Suspense = React.Suspense;
             let suspend = false;
@@ -2728,7 +2728,7 @@ describe('DOMPluginEventSystem', () => {
             document.body.removeChild(container2);
           });
 
-          // @gate experimental
+          // @gate www
           it('handle propagation of click events between disjointed comment roots', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
@@ -2799,7 +2799,7 @@ describe('DOMPluginEventSystem', () => {
             expect(log[5]).toEqual(['bubble', buttonElement]);
           });
 
-          // @gate experimental
+          // @gate www
           it('propagates known createEventHandle events through portals without inner listeners', () => {
             const buttonRef = React.createRef();
             const divRef = React.createRef();
@@ -2870,7 +2870,7 @@ describe('DOMPluginEventSystem', () => {
               ReactDOMServer = require('react-dom/server');
             });
 
-            // @gate experimental
+            // @gate www
             it('handle propagation of click events on a scope', () => {
               const buttonRef = React.createRef();
               const log = [];
@@ -2926,7 +2926,7 @@ describe('DOMPluginEventSystem', () => {
               ]);
             });
 
-            // @gate experimental
+            // @gate www
             it('handle mixed propagation of click events on a scope', () => {
               const buttonRef = React.createRef();
               const divRef = React.createRef();
@@ -3017,7 +3017,7 @@ describe('DOMPluginEventSystem', () => {
               ]);
             });
 
-            // @gate experimental
+            // @gate www
             it('should not handle the target being a dangling text node within a scope', () => {
               const clickEvent = jest.fn();
               const buttonRef = React.createRef();
@@ -3048,7 +3048,7 @@ describe('DOMPluginEventSystem', () => {
               expect(clickEvent).toBeCalledTimes(0);
             });
 
-            // @gate experimental
+            // @gate www
             it('handle stopPropagation (inner) correctly between scopes', () => {
               const buttonRef = React.createRef();
               const outerOnClick = jest.fn();
@@ -3090,7 +3090,7 @@ describe('DOMPluginEventSystem', () => {
               expect(outerOnClick).toHaveBeenCalledTimes(0);
             });
 
-            // @gate experimental
+            // @gate www
             it('handle stopPropagation (outer) correctly between scopes', () => {
               const buttonRef = React.createRef();
               const outerOnClick = jest.fn(e => e.stopPropagation());
@@ -3132,7 +3132,7 @@ describe('DOMPluginEventSystem', () => {
               expect(outerOnClick).toHaveBeenCalledTimes(1);
             });
 
-            // @gate experimental
+            // @gate www
             it('handle stopPropagation (inner and outer) correctly between scopes', () => {
               const buttonRef = React.createRef();
               const onClick = jest.fn(e => e.stopPropagation());
@@ -3172,7 +3172,7 @@ describe('DOMPluginEventSystem', () => {
               expect(onClick).toHaveBeenCalledTimes(1);
             });
 
-            // @gate experimental
+            // @gate www
             it('should be able to register handlers for events affected by the intervention', () => {
               const rootContainer = document.createElement('div');
               container.appendChild(rootContainer);
diff --git a/packages/react-fetch/src/__tests__/ReactFetchNode-test.js b/packages/react-fetch/src/__tests__/ReactFetchNode-test.js
index 6ad5fdc9c434..e7c4884c4055 100644
--- a/packages/react-fetch/src/__tests__/ReactFetchNode-test.js
+++ b/packages/react-fetch/src/__tests__/ReactFetchNode-test.js
@@ -39,7 +39,7 @@ describe('ReactFetchNode', () => {
     server = null;
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('can fetch text from a server component', async () => {
     serverImpl = (req, res) => {
       res.write('mango');
@@ -51,7 +51,7 @@ describe('ReactFetchNode', () => {
     expect(text).toEqual('mango');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('can fetch json from a server component', async () => {
     serverImpl = (req, res) => {
       res.write(JSON.stringify({name: 'Sema'}));
@@ -63,7 +63,7 @@ describe('ReactFetchNode', () => {
     expect(json).toEqual({name: 'Sema'});
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('provides response status', async () => {
     serverImpl = (req, res) => {
       res.write(JSON.stringify({name: 'Sema'}));
@@ -79,7 +79,7 @@ describe('ReactFetchNode', () => {
     });
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('handles different paths', async () => {
     serverImpl = (req, res) => {
       switch (req.url) {
@@ -105,7 +105,7 @@ describe('ReactFetchNode', () => {
     expect(outputs).toMatchObject(['banana', 'mango', 'orange']);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('can produce an error', async () => {
     serverImpl = (req, res) => {};
 
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
index d8f8f3c7d31b..2d3de4e13e26 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocus-test.internal.js
@@ -28,7 +28,7 @@ function initializeModules(hasPointerEvents) {
 
   // TODO: This import throws outside of experimental mode. Figure out better
   // strategy for gated imports.
-  if (__EXPERIMENTAL__) {
+  if (__EXPERIMENTAL__ || global.__WWW__) {
     useFocus = require('react-interactions/events/focus').useFocus;
   }
 }
@@ -70,7 +70,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('does not call callbacks', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -97,7 +97,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('is called after "blur" event', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -128,7 +128,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('is called after "focus" event', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -136,7 +136,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       expect(onFocus).toHaveBeenCalledTimes(1);
     });
 
-    // @gate experimental
+    // @gate www
     it('is not called if descendants of target receive focus', () => {
       componentInit();
       const target = createEventTarget(innerRef.current);
@@ -166,7 +166,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('is called after "blur" and "focus" events', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -178,7 +178,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       expect(onFocusChange).toHaveBeenCalledWith(false);
     });
 
-    // @gate experimental
+    // @gate www
     it('is not called after "blur" and "focus" events on descendants', () => {
       componentInit();
       const target = createEventTarget(innerRef.current);
@@ -210,7 +210,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('is called after "focus" and "blur" if keyboard navigation is active', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -225,7 +225,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       expect(onFocusVisibleChange).toHaveBeenCalledWith(false);
     });
 
-    // @gate experimental
+    // @gate www
     it('is called if non-keyboard event is dispatched on target previously focused with keyboard', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -244,7 +244,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
     });
 
-    // @gate experimental
+    // @gate www
     it('is not called after "focus" and "blur" events without keyboard', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -256,7 +256,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
       expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);
     });
 
-    // @gate experimental
+    // @gate www
     it('is not called after "blur" and "focus" events on descendants', () => {
       componentInit();
       const innerTarget = createEventTarget(innerRef.current);
@@ -270,7 +270,7 @@ describe.each(table)(`useFocus hasPointerEvents=%s`, hasPointerEvents => {
   });
 
   describe('nested Focus components', () => {
-    // @gate experimental
+    // @gate www
     it('propagates events in the correct order', () => {
       const events = [];
       const innerRef = React.createRef();
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
index f1e8f57ac08d..62eb6630de2e 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
@@ -33,7 +33,7 @@ function initializeModules(hasPointerEvents) {
 
   // TODO: This import throws outside of experimental mode. Figure out better
   // strategy for gated imports.
-  if (__EXPERIMENTAL__) {
+  if (__EXPERIMENTAL__ || global.__WWW__) {
     useFocusWithin = require('react-interactions/events/focus').useFocusWithin;
   }
 }
@@ -80,7 +80,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('prevents custom events being dispatched', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -115,7 +115,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('is called after "blur" and "focus" events on focus target', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -127,7 +127,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onFocusWithinChange).toHaveBeenCalledWith(false);
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after "blur" and "focus" events on descendants', () => {
       componentInit();
       const target = createEventTarget(innerRef.current);
@@ -139,7 +139,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onFocusWithinChange).toHaveBeenCalledWith(false);
     });
 
-    // @gate experimental
+    // @gate www
     it('is only called once when focus moves within and outside the subtree', () => {
       componentInit();
       const node = ref.current;
@@ -191,7 +191,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       Scheduler.unstable_flushAll();
     };
 
-    // @gate experimental
+    // @gate www
     it('is called after "focus" and "blur" on focus target if keyboard was used', () => {
       componentInit();
       const target = createEventTarget(ref.current);
@@ -206,7 +206,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after "focus" and "blur" on descendants if keyboard was used', () => {
       componentInit();
       const innerTarget = createEventTarget(innerRef.current);
@@ -221,7 +221,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
     });
 
-    // @gate experimental
+    // @gate www
     it('is called if non-keyboard event is dispatched on target previously focused with keyboard', () => {
       componentInit();
       const node = ref.current;
@@ -259,7 +259,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
     });
 
-    // @gate experimental
+    // @gate www
     it('is not called after "focus" and "blur" events without keyboard', () => {
       componentInit();
       const innerTarget = createEventTarget(innerRef.current);
@@ -269,7 +269,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(0);
     });
 
-    // @gate experimental
+    // @gate www
     it('is only called once when focus moves within and outside the subtree', () => {
       componentInit();
       const node = ref.current;
@@ -297,7 +297,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
     });
   });
 
-  // @gate experimental
+  // @gate www
   it('should correctly handle focus visibility when typing into an input', () => {
     const onFocusWithinVisibleChange = jest.fn();
     const ref = React.createRef();
@@ -337,7 +337,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       innerRef2 = React.createRef();
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after a focused element is unmounted', () => {
       const Component = ({show}) => {
         const focusWithinRef = useFocusWithin(ref, {
@@ -369,7 +369,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       );
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after a nested focused element is unmounted', () => {
       const Component = ({show}) => {
         const focusWithinRef = useFocusWithin(ref, {
@@ -405,7 +405,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       );
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after many elements are unmounted', () => {
       const buttonRef = React.createRef();
       const inputRef = React.createRef();
@@ -440,7 +440,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after a nested focused element is unmounted (with scope query)', () => {
       const TestScope = React.unstable_Scope;
       const testScopeQuery = (type, props) => true;
@@ -476,7 +476,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       expect(targetNodes).toEqual([targetNode]);
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after a focused suspended element is hidden', () => {
       const Suspense = React.Suspense;
       let suspend = false;
@@ -534,7 +534,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
       resolve();
     });
 
-    // @gate experimental
+    // @gate www
     it('is called after a focused suspended element is hidden then shown', () => {
       const Suspense = React.Suspense;
       let suspend = false;
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index c3dc4df1cf6f..94431b435054 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -43,7 +43,7 @@ describe('DebugTracing', () => {
     });
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('should not log anything for sync render without suspends or state updates', () => {
     ReactTestRenderer.create(
       <React.unstable_DebugTracingMode>
@@ -54,7 +54,7 @@ describe('DebugTracing', () => {
     expect(logs).toEqual([]);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('should not log anything for concurrent render without suspends or state updates', () => {
     ReactTestRenderer.create(
       <React.unstable_DebugTracingMode>
@@ -396,7 +396,7 @@ describe('DebugTracing', () => {
     ]);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('should not log anything outside of a unstable_DebugTracingMode subtree', () => {
     function ExampleThatCascades() {
       const [didMount, setDidMount] = React.useState(false);
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 33f4353649ca..01488a8b3a7b 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -149,7 +149,7 @@ describe('ReactCache', () => {
     }
   }
 
-  // @gate experimental
+  // @gate experimental || www
   test('render Cache component', async () => {
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
@@ -158,7 +158,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Hi');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('mount new data', async () => {
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
@@ -180,7 +180,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('root acts as implicit cache boundary', async () => {
     const root = ReactNoop.createRoot();
     await ReactNoop.act(async () => {
@@ -200,7 +200,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => {
     function App({text}) {
       return (
@@ -239,7 +239,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('AA');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test(
     'nested cache boundaries share the same cache as the root during ' +
       'the initial render',
@@ -272,7 +272,7 @@ describe('ReactCache', () => {
     },
   );
 
-  // @gate experimental
+  // @gate experimental || www
   test('new content inside an existing Cache boundary should re-use already cached data', async () => {
     function App({showMore}) {
       return (
@@ -309,7 +309,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]A [v1]');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('a new Cache boundary uses fresh cache', async () => {
     // The only difference from the previous test is that the "Show More"
     // content is wrapped in a nested <Cache /> boundary
@@ -356,7 +356,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]A [v2]');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('inner content uses same cache as shell if spawned by the same transition', async () => {
     const root = ReactNoop.createRoot();
 
@@ -431,7 +431,7 @@ describe('ReactCache', () => {
     );
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('refresh a cache', async () => {
     let refresh;
     function App() {
@@ -474,7 +474,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v2]');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('refresh the root cache', async () => {
     let refresh;
     function App() {
@@ -515,7 +515,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v2]');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('refresh a cache with seed data', async () => {
     let refresh;
     function App() {
@@ -558,7 +558,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v2]');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('refreshing a parent cache also refreshes its children', async () => {
     let refreshShell;
     function RefreshShell() {
@@ -623,7 +623,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v3]A [v3]');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test(
     'refreshing a cache boundary does not refresh the other boundaries ' +
       'that mounted at the same time (i.e. the ones that share the same cache)',
@@ -696,7 +696,7 @@ describe('ReactCache', () => {
     },
   );
 
-  // @gate experimental
+  // @gate experimental || www
   test(
     'mount a new Cache boundary in a sibling while simultaneously ' +
       'resolving a Suspense boundary',
@@ -758,7 +758,7 @@ describe('ReactCache', () => {
     },
   );
 
-  // @gate experimental
+  // @gate experimental || www
   test('cache pool is cleared once transitions that depend on it commit their shell', async () => {
     function Child({text}) {
       return (
@@ -841,7 +841,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]A [v1]A [v2]');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('cache pool is not cleared by arbitrary commits', async () => {
     function App() {
       return (
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index 45079c89edee..0dcc18f074ac 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -542,7 +542,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BB');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('context is propagated through offscreen trees', async () => {
     const LegacyHidden = React.unstable_LegacyHidden;
 
@@ -588,7 +588,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BB');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('multiple contexts are propagated across through offscreen trees', async () => {
     // Same as previous test, but with multiple context providers
     const LegacyHidden = React.unstable_LegacyHidden;
@@ -744,7 +744,6 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BB');
   });
 
-  // @gate experimental
   // @gate enableCache
   test('nested bailouts across retries', async () => {
     // Lazy context propagation will stop propagating when it hits the first
@@ -814,7 +813,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BB');
   });
 
-  // @gate experimental
+  // @gate experimental || www
   test('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.
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
index f1986249c0d2..864723e927b8 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -270,7 +270,7 @@ describe('ReactIncremental', () => {
     expect(inst.state).toEqual({text: 'bar', text2: 'baz'});
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('can deprioritize unfinished work and resume it later', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -316,7 +316,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Middle', 'Middle']);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('can deprioritize a tree from without dropping work', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -1999,7 +1999,7 @@ describe('ReactIncremental', () => {
     });
   }
 
-  // @gate experimental
+  // @gate experimental || www
   it('provides context when reusing work', () => {
     class Intl extends React.Component {
       static childContextTypes = {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index c0d269fa25ae..ed4c945ea7f3 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -308,7 +308,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Everything is fine.')]);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('does not include offscreen work when retrying after an error', () => {
     function App(props) {
       if (props.isBroken) {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
index bb42fc621f54..f0c6bad86319 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -424,7 +424,7 @@ describe('ReactIncrementalSideEffects', () => {
     ]);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('preserves a previously rendered node when deprioritized', () => {
     function Middle(props) {
       Scheduler.unstable_yieldValue('Middle');
@@ -475,7 +475,7 @@ describe('ReactIncrementalSideEffects', () => {
     );
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('can reuse side-effects after being preempted', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -555,7 +555,7 @@ describe('ReactIncrementalSideEffects', () => {
     );
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('can reuse side-effects after being preempted, if shouldComponentUpdate is false', () => {
     class Bar extends React.Component {
       shouldComponentUpdate(nextProps) {
@@ -690,7 +690,7 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={3} />);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('updates a child even though the old props is empty', () => {
     function Foo(props) {
       return (
@@ -930,7 +930,7 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ops).toEqual(['Bar', 'Baz', 'Bar', 'Bar']);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('deprioritizes setStates that happens within a deprioritized tree', () => {
     const barInstances = [];
 
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index 60db80402fb5..eb90d61dad6a 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -667,7 +667,7 @@ describe('ReactNewContext', () => {
         expect(ReactNoop.getChildren()).toEqual([span(2), span(2)]);
       });
 
-      // @gate experimental
+      // @gate experimental || www
       it("context consumer doesn't bail out inside hidden subtree", () => {
         const Context = React.createContext('dark');
         const Consumer = getConsumer(Context);
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index da6778aefc89..ec6ee2c407ea 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -24,7 +24,7 @@ describe('ReactOffscreen', () => {
     return <span prop={props.text} />;
   }
 
-  // @gate experimental
+  // @gate experimental || www
   it('unstable-defer-without-hiding should never toggle the visibility of its children', async () => {
     function App({mode}) {
       return (
@@ -83,7 +83,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('does not defer in legacy mode', async () => {
     let setState;
     function Foo() {
@@ -128,7 +128,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('does defer in concurrent mode', async () => {
     let setState;
     function Foo() {
@@ -174,7 +174,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // @gate experimental
+  // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
   it('mounts without layout effects when hidden', async () => {
     function Child({text}) {
@@ -216,7 +216,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
   it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
     function Child({text}) {
@@ -266,7 +266,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
   it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
     function Child({text}) {
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index 082b7c15f94e..5f527d75755a 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -120,7 +120,7 @@ describe('ReactSchedulerIntegration', () => {
     expect(Scheduler).toHaveYielded(['A', 'B', 'C']);
   });
 
-  // @gate experimental
+  // @gate experimental || www
   it('idle updates are not blocked by offscreen work', async () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
index 10cdadfc66db..dedc8146d808 100644
--- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -39,7 +39,7 @@ describe('ReactScope', () => {
       container = null;
     });
 
-    // @gate experimental
+    // @gate www
     it('DO_NOT_USE_queryAllNodes() works as intended', () => {
       const testScopeQuery = (type, props) => true;
       const TestScope = React.unstable_Scope;
@@ -74,7 +74,7 @@ describe('ReactScope', () => {
       expect(scopeRef.current).toBe(null);
     });
 
-    // @gate experimental
+    // @gate www
     it('DO_NOT_USE_queryAllNodes() provides the correct host instance', () => {
       const testScopeQuery = (type, props) => type === 'div';
       const TestScope = React.unstable_Scope;
@@ -121,7 +121,7 @@ describe('ReactScope', () => {
       expect(scopeRef.current).toBe(null);
     });
 
-    // @gate experimental
+    // @gate www
     it('DO_NOT_USE_queryFirstNode() works as intended', () => {
       const testScopeQuery = (type, props) => true;
       const TestScope = React.unstable_Scope;
@@ -156,7 +156,7 @@ describe('ReactScope', () => {
       expect(scopeRef.current).toBe(null);
     });
 
-    // @gate experimental
+    // @gate www
     it('containsNode() works as intended', () => {
       const TestScope = React.unstable_Scope;
       const scopeRef = React.createRef();
@@ -206,7 +206,7 @@ describe('ReactScope', () => {
       expect(scopeRef.current.containsNode(emRef.current)).toBe(false);
     });
 
-    // @gate experimental
+    // @gate www
     it('scopes support server-side rendering and hydration', () => {
       const TestScope = React.unstable_Scope;
       const scopeRef = React.createRef();
@@ -237,7 +237,7 @@ describe('ReactScope', () => {
       expect(nodes).toEqual([divRef.current, spanRef.current, aRef.current]);
     });
 
-    // @gate experimental
+    // @gate www
     it('getChildContextValues() works as intended', () => {
       const TestContext = React.createContext();
       const TestScope = React.unstable_Scope;
@@ -266,7 +266,7 @@ describe('ReactScope', () => {
       expect(scopeRef.current).toBe(null);
     });
 
-    // @gate experimental
+    // @gate www
     it('correctly works with suspended boundaries that are hydrated', async () => {
       let suspend = false;
       let resolve;
@@ -341,7 +341,7 @@ describe('ReactScope', () => {
       ReactTestRenderer = require('react-test-renderer');
     });
 
-    // @gate experimental
+    // @gate www
     it('DO_NOT_USE_queryAllNodes() works as intended', () => {
       const testScopeQuery = (type, props) => true;
       const TestScope = React.unstable_Scope;
@@ -378,7 +378,7 @@ describe('ReactScope', () => {
       expect(nodes).toEqual([aRef.current, divRef.current, spanRef.current]);
     });
 
-    // @gate experimental
+    // @gate www
     it('DO_NOT_USE_queryFirstNode() works as intended', () => {
       const testScopeQuery = (type, props) => true;
       const TestScope = React.unstable_Scope;
@@ -415,7 +415,7 @@ describe('ReactScope', () => {
       expect(node).toEqual(aRef.current);
     });
 
-    // @gate experimental
+    // @gate www
     it('containsNode() works as intended', () => {
       const TestScope = React.unstable_Scope;
       const scopeRef = React.createRef();
diff --git a/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
index c972d6ae472c..c2c872dc41fa 100644
--- a/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
@@ -124,7 +124,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   const resolveText = resolveMostRecentTextCache;
 
-  // @gate experimental
+  // @gate experimental || www
   it('regression: false positive for legacy suspense', async () => {
     // Wrapping in memo because regular function components go through the
     // mountIndeterminateComponent path, which acts like there's no `current`
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 93ba09dbf032..3b6fc83ac984 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -81,11 +81,6 @@ function getTestFlags() {
 
       ...featureFlags,
       ...environmentFlags,
-
-      // FIXME: www-classic has enableCache on, but when running the source
-      // tests, Jest doesn't expose the API correctly. Fix then remove
-      // this override.
-      enableCache: __EXPERIMENTAL__,
     },
     {
       get(flags, flagName) {
diff --git a/scripts/jest/config.source-persistent.js b/scripts/jest/config.source-persistent.js
index 63c95c5584ba..935c4463c1c9 100644
--- a/scripts/jest/config.source-persistent.js
+++ b/scripts/jest/config.source-persistent.js
@@ -2,28 +2,7 @@
 
 const baseConfig = require('./config.base');
 
-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;
-
-const preferredExtension = __EXPERIMENTAL__ ? '.js' : '.stable.js';
-
-const moduleNameMapper = {};
-moduleNameMapper[
-  '^react$'
-] = `<rootDir>/packages/react/index${preferredExtension}`;
-moduleNameMapper[
-  '^react-dom$'
-] = `<rootDir>/packages/react-dom/index${preferredExtension}`;
-
 module.exports = Object.assign({}, baseConfig, {
-  // Prefer the stable forks for tests.
-  moduleNameMapper,
   modulePathIgnorePatterns: [
     ...baseConfig.modulePathIgnorePatterns,
     'packages/react-devtools-shared',
diff --git a/scripts/jest/config.source-www.js b/scripts/jest/config.source-www.js
index 060291a74821..d8d29872c194 100644
--- a/scripts/jest/config.source-www.js
+++ b/scripts/jest/config.source-www.js
@@ -2,28 +2,7 @@
 
 const baseConfig = require('./config.base');
 
-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;
-
-const preferredExtension = __EXPERIMENTAL__ ? '.js' : '.stable.js';
-
-const moduleNameMapper = {};
-moduleNameMapper[
-  '^react$'
-] = `<rootDir>/packages/react/index${preferredExtension}`;
-moduleNameMapper[
-  '^react-dom$'
-] = `<rootDir>/packages/react-dom/index${preferredExtension}`;
-
 module.exports = Object.assign({}, baseConfig, {
-  // Prefer the stable forks for tests.
-  moduleNameMapper,
   modulePathIgnorePatterns: [
     ...baseConfig.modulePathIgnorePatterns,
     'packages/react-devtools-shared',
diff --git a/scripts/jest/config.source.js b/scripts/jest/config.source.js
index 18f44e3b7216..2e3401a4ba5c 100644
--- a/scripts/jest/config.source.js
+++ b/scripts/jest/config.source.js
@@ -2,28 +2,7 @@
 
 const baseConfig = require('./config.base');
 
-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;
-
-const preferredExtension = __EXPERIMENTAL__ ? '.js' : '.stable.js';
-
-const moduleNameMapper = {};
-moduleNameMapper[
-  '^react$'
-] = `<rootDir>/packages/react/index${preferredExtension}`;
-moduleNameMapper[
-  '^react-dom$'
-] = `<rootDir>/packages/react-dom/index${preferredExtension}`;
-
 module.exports = Object.assign({}, baseConfig, {
-  // Prefer the stable forks for tests.
-  moduleNameMapper,
   modulePathIgnorePatterns: [
     ...baseConfig.modulePathIgnorePatterns,
     'packages/react-devtools-shared',
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index f21ea11356d2..1dc72761e03b 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -1,7 +1,55 @@
 'use strict';
 
+const fs = require('fs');
 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
+
+  if (isFBBundle) {
+    if (__EXPERIMENTAL__) {
+      // We can't currently use the true modern entry point because too many tests fail.
+      // TODO: Fix tests to not use ReactDOM.render or gate them. Then we can remove this.
+      return resolvedEntry;
+    }
+    const resolvedFBEntry = resolvedEntry.replace(
+      '.js',
+      __EXPERIMENTAL__ ? '.modern.fb.js' : '.classic.fb.js'
+    );
+    if (fs.existsSync(resolvedFBEntry)) {
+      return resolvedFBEntry;
+    }
+    const resolvedGenericFBEntry = resolvedEntry.replace('.js', '.fb.js');
+    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'
+  );
+  if (fs.existsSync(resolvedForkedEntry)) {
+    return resolvedForkedEntry;
+  }
+  // Just use the plain .js one.
+  return resolvedEntry;
+}
+
+jest.mock('react', () => {
+  const resolvedEntryPoint = resolveEntryFork(
+    require.resolve('react'),
+    global.__WWW__
+  );
+  return jest.requireActual(resolvedEntryPoint);
+});
+
 jest.mock('react-reconciler/src/ReactFiberReconciler', () => {
   return jest.requireActual(
     __VARIANT__
@@ -85,7 +133,11 @@ inlinedHostConfigs.forEach(rendererInfo => {
   rendererInfo.entryPoints.forEach(entryPoint => {
     jest.mock(entryPoint, () => {
       mockAllConfigs(rendererInfo);
-      return jest.requireActual(entryPoint);
+      const resolvedEntryPoint = resolveEntryFork(
+        require.resolve(entryPoint),
+        global.__WWW__
+      );
+      return jest.requireActual(resolvedEntryPoint);
     });
   });
 });

From 6736a38b9abdd19a015929c0279783c92b30d372 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 2 Jun 2021 23:54:26 -0400
Subject: [PATCH 0582/1603] Add single source of truth for package versions
 (#21608)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The versioning scheme for `@next` releases does not include semver
information. Like `@experimental`, the versions are based only on the
hash, i.e. `0.0.0-<commit_sha>`. The reason we do this is to prevent
the use of a tilde (~) or caret (^) to match a range of
prerelease versions.

For `@experimental`, I think this rationale still makes sense — those
releases are very unstable, with frequent breaking changes. But `@next`
is not as volatile. It represents the next stable release. So, I think
we can afford to include an actual verison number at the beginning of
the string instead of `0.0.0`.

We can also add a label that indicates readiness of the upcoming
release, like "alpha", "beta", "rc", etc.

To prepare for this the new versioning scheme, I updated the build
script. However, **this PR does not enable the new versioning scheme
yet**. I left a TODO above the line that we'll change once we're ready.

We need to specify the expected next version numbers for each package,
somewhere. These aren't encoded anywhere today — we don't specify
version numbers until right before publishing to `@latest`, using an
interactive script: `prepare-release-from-npm`.

Instead, what we can do is track these version numbers in a module. I
added `ReactVersions.js` that acts as the single source of truth for
every package's version. The build script uses this module to build the
`@next` packages.

In the future, I want to start building the `@latest` packages the same
way we do `@next` and `@experimental`. (What we do now is download a
`@next` release from npm and swap out its version numbers.) Then we
could run automated tests in CI to confirm the packages are releasable,
instead of waiting to verify that right before publish.
---
 ReactVersions.js                             | 62 +++++++++++++++++
 packages/shared/ReactVersion.js              |  3 +
 scripts/release/utils.js                     |  1 +
 scripts/rollup/build-all-release-channels.js | 72 ++++++++++++++------
 4 files changed, 118 insertions(+), 20 deletions(-)
 create mode 100644 ReactVersions.js

diff --git a/ReactVersions.js b/ReactVersions.js
new file mode 100644
index 000000000000..a16c73fcfd3b
--- /dev/null
+++ b/ReactVersions.js
@@ -0,0 +1,62 @@
+'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.:
+//
+//   18.0.0
+//
+// The @next channel appends additional information, with the scheme
+// <version>-<label>-<commit_sha>, e.g.:
+//
+//   18.0.0-next-a1c2d3e4
+//
+// (TODO: ^ this isn't enabled quite yet. We still use <version>-<commit_sha>.)
+//
+// The @experimental channel doesn't include a version, only a sha, e.g.:
+//
+//   0.0.0-experimental-a1c2d3e4
+
+// TODO: Main includes breaking changes. Bump this to 18.0.0.
+const ReactVersion = '17.0.3';
+
+// The label used by the @next channel. Represents the upcoming release's
+// stability. Could be "alpha", "beta", "rc", etc.
+const nextChannelLabel = 'next';
+
+const stablePackages = {
+  'create-subscription': ReactVersion,
+  'eslint-plugin-react-hooks': '4.2.1',
+  'jest-react': '0.12.1',
+  react: ReactVersion,
+  'react-art': ReactVersion,
+  'react-dom': ReactVersion,
+  'react-is': ReactVersion,
+  'react-reconciler': '0.27.0',
+  'react-refresh': '0.11.0',
+  'react-test-renderer': ReactVersion,
+  'use-subscription': '1.6.0',
+  scheduler: '0.21.0',
+};
+
+// These packages do not exist in the @next 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-fetch',
+  'react-fs',
+  'react-pg',
+  'react-server-dom-webpack',
+  'react-server',
+];
+
+// TODO: Export a map of every package and its version.
+module.exports = {
+  ReactVersion,
+  nextChannelLabel,
+  stablePackages,
+  experimentalPackages,
+};
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index 69b37a19f037..8d357322ca3a 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -10,4 +10,7 @@
 // TODO: 17.0.3 has not been released to NPM;
 // It exists as a placeholder so that DevTools can support work tag changes between releases.
 // When we next publish a release (either 17.0.3 or 17.1.0), 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 '17.0.3';
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index ca9803b3b369..247f493bd169 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -132,6 +132,7 @@ const getCommitFromCurrentBuild = async () => {
 };
 
 const getPublicPackages = isExperimental => {
+  // TODO: Use ReactVersions.js as source of truth.
   if (isExperimental) {
     return [
       'create-subscription',
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 19eec730706b..a787ef9d3aff 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -8,14 +8,18 @@ const {spawnSync} = require('child_process');
 const path = require('path');
 const tmp = require('tmp');
 
+const {
+  ReactVersion,
+  stablePackages,
+  experimentalPackages,
+} = require('../../ReactVersions');
+
 // Runs the build script for both stable and experimental release channels,
 // by configuring an environment variable.
 
 const sha = (
   spawnSync('git', ['show', '-s', '--format=%h']).stdout + ''
 ).trim();
-const ReactVersion = JSON.parse(fs.readFileSync('packages/react/package.json'))
-  .version;
 
 if (process.env.CIRCLE_NODE_TOTAL) {
   // In CI, we use multiple concurrent processes. Allocate half the processes to
@@ -27,19 +31,17 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   if (index < halfTotal) {
     const nodeTotal = halfTotal;
     const nodeIndex = index;
-    const version = '0.0.0-' + sha;
     updateTheReactVersionThatDevToolsReads(ReactVersion + '-' + sha);
     buildForChannel('stable', nodeTotal, nodeIndex);
-    processStable('./build', version);
+    processStable('./build');
   } else {
     const nodeTotal = total - halfTotal;
     const nodeIndex = index - halfTotal;
-    const version = '0.0.0-experimental-' + sha;
     updateTheReactVersionThatDevToolsReads(
       ReactVersion + '-experimental-' + sha
     );
     buildForChannel('experimental', nodeTotal, nodeIndex);
-    processExperimental('./build', version);
+    processExperimental('./build');
   }
 
   // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
@@ -48,17 +50,16 @@ if (process.env.CIRCLE_NODE_TOTAL) {
 } else {
   // Running locally, no concurrency. Move each channel's build artifacts into
   // a temporary directory so that they don't conflict.
-  const stableVersion = '0.0.0-' + sha;
+  updateTheReactVersionThatDevToolsReads(ReactVersion + '-' + sha);
   buildForChannel('stable', '', '');
   const stableDir = tmp.dirSync().name;
   crossDeviceRenameSync('./build', stableDir);
-  processStable(stableDir, stableVersion);
-
-  const experimentalVersion = '0.0.0-experimental-' + sha;
+  processStable(stableDir);
+  updateTheReactVersionThatDevToolsReads(ReactVersion + '-experimental-' + sha);
   buildForChannel('experimental', '', '');
   const experimentalDir = tmp.dirSync().name;
   crossDeviceRenameSync('./build', experimentalDir);
-  processExperimental(experimentalDir, experimentalVersion);
+  processExperimental(experimentalDir);
 
   // Then merge the experimental folder into the stable one. processExperimental
   // will have already removed conflicting files.
@@ -84,9 +85,21 @@ function buildForChannel(channel, nodeTotal, nodeIndex) {
   });
 }
 
-function processStable(buildDir, version) {
+function processStable(buildDir) {
   if (fs.existsSync(buildDir + '/node_modules')) {
-    updatePackageVersions(buildDir + '/node_modules', version);
+    const defaultVersionIfNotFound = '0.0.0' + '-' + sha;
+    const versionsMap = new Map();
+    for (const moduleName in stablePackages) {
+      // TODO: Use version declared in ReactVersions module instead of 0.0.0.
+      // const version = stablePackages[moduleName];
+      // versionsMap.set(moduleName, version + '-' + nextChannelLabel + '-' + sha);
+      versionsMap.set(moduleName, defaultVersionIfNotFound);
+    }
+    updatePackageVersions(
+      buildDir + '/node_modules',
+      versionsMap,
+      defaultVersionIfNotFound
+    );
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-stable');
   }
 
@@ -107,7 +120,19 @@ function processStable(buildDir, version) {
 
 function processExperimental(buildDir, version) {
   if (fs.existsSync(buildDir + '/node_modules')) {
-    updatePackageVersions(buildDir + '/node_modules', version);
+    const defaultVersionIfNotFound = '0.0.0' + '-' + 'experimental' + '-' + sha;
+    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
+    );
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-experimental');
   }
 
@@ -151,9 +176,18 @@ function crossDeviceRenameSync(source, destination) {
  * to match this version for all of the 'React' packages
  * (packages available in this repo).
  */
-function updatePackageVersions(modulesDir, version) {
-  const allReactModuleNames = fs.readdirSync('packages');
+function updatePackageVersions(
+  modulesDir,
+  versionsMap,
+  defaultVersionIfNotFound
+) {
   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()) {
@@ -164,16 +198,14 @@ function updatePackageVersions(modulesDir, version) {
 
       if (packageInfo.dependencies) {
         for (const dep of Object.keys(packageInfo.dependencies)) {
-          // if it's a react package (available in the current repo), update the version
-          // TODO: is this too broad? Assumes all of the packages were built.
-          if (allReactModuleNames.includes(dep)) {
+          if (modulesDir.includes(dep)) {
             packageInfo.dependencies[dep] = version;
           }
         }
       }
       if (packageInfo.peerDependencies) {
         for (const dep of Object.keys(packageInfo.peerDependencies)) {
-          if (allReactModuleNames.includes(dep)) {
+          if (modulesDir.includes(dep)) {
             packageInfo.peerDependencies[dep] = version;
           }
         }

From 154a8cf32869cb9fabbb0ef2b68c77a5c17954e9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 3 Jun 2021 00:23:08 -0400
Subject: [PATCH 0583/1603] Fix reference to wrong variable

Follow-up to #21608
---
 scripts/rollup/build-all-release-channels.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index a787ef9d3aff..3cbd73565da1 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -198,14 +198,14 @@ function updatePackageVersions(
 
       if (packageInfo.dependencies) {
         for (const dep of Object.keys(packageInfo.dependencies)) {
-          if (modulesDir.includes(dep)) {
+          if (versionsMap.has(dep)) {
             packageInfo.dependencies[dep] = version;
           }
         }
       }
       if (packageInfo.peerDependencies) {
         for (const dep of Object.keys(packageInfo.peerDependencies)) {
-          if (modulesDir.includes(dep)) {
+          if (versionsMap.has(dep)) {
             packageInfo.peerDependencies[dep] = version;
           }
         }

From 2418f24b609029c3f3415b5954005d5aa4851f0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 3 Jun 2021 09:13:00 -0400
Subject: [PATCH 0584/1603] Fix <select> check of defaultValue/value type
 (#21611)

---
 .../src/server/ReactDOMServerFormatConfig.js  | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 09ac84a67322..7d705a6abe1d 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -568,19 +568,22 @@ let didWarnSelectedSetOnOption = false;
 
 function checkSelectProp(props, propName) {
   if (__DEV__) {
-    const array = isArray(props[propName]);
-    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,
-      );
+    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,
+        );
+      }
     }
   }
 }

From 8b4201535c6068147d61d0ed3f02d21d6dcd6927 Mon Sep 17 00:00:00 2001
From: Bao Pham <gbaopham@gmail.com>
Date: Thu, 3 Jun 2021 23:21:44 +0800
Subject: [PATCH 0585/1603] Devtools: add feature to trigger an error boundary
 (#21583)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../src/__tests__/inspectedElement-test.js    |  91 +++++++++++
 .../__tests__/inspectedElementSerializer.js   |   1 +
 .../src/backend/agent.js                      |  16 ++
 .../src/backend/legacy/renderer.js            |   9 ++
 .../src/backend/renderer.js                   | 144 +++++++++++++++++-
 .../src/backend/types.js                      |   8 +
 .../react-devtools-shared/src/backendAPI.js   |   6 +
 packages/react-devtools-shared/src/bridge.js  |   6 +
 .../src/devtools/views/ButtonIcon.js          |   9 +-
 .../views/Components/InspectedElement.js      |  45 ++++++
 .../src/devtools/views/Components/types.js    |   5 +
 .../src/app/ErrorBoundaries/index.js          |  71 +++++++++
 .../react-devtools-shell/src/app/index.js     |   2 +
 .../src/ReactFiberBeginWork.new.js            |  39 ++++-
 .../src/ReactFiberBeginWork.old.js            |  39 ++++-
 .../src/ReactFiberReconciler.js               |   5 +
 .../src/ReactFiberReconciler.new.js           |  12 ++
 .../src/ReactFiberReconciler.old.js           |  12 ++
 18 files changed, 515 insertions(+), 5 deletions(-)
 create mode 100644 packages/react-devtools-shell/src/app/ErrorBoundaries/index.js

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 0c4fc869764e..61ea4414c68b 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2380,4 +2380,95 @@ describe('InspectedElement', () => {
       `);
     });
   });
+
+  describe('error boundary', () => {
+    it('can toggle error', async () => {
+      class ErrorBoundary 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(() =>
+        ReactDOM.render(
+          <ErrorBoundary>
+            <Example />
+          </ErrorBoundary>,
+          document.createElement('div'),
+        ),
+      );
+
+      const targetErrorBoundaryID = ((store.getElementIDAtIndex(
+        0,
+      ): any): number);
+      const inspect = index => {
+        // HACK: Recreate TestRenderer instance so we can inspect different
+        // elements
+        testRendererInstance = TestRenderer.create(null, {
+          unstable_isConcurrent: true,
+        });
+        return inspectElementAtIndex(index);
+      };
+      const toggleError = async forceError => {
+        await withErrorsOrWarningsIgnored(['ErrorBoundary'], async () => {
+          await utils.actAsync(() => {
+            bridge.send('overrideError', {
+              id: targetErrorBoundaryID,
+              rendererID: store.getRendererIDForElement(targetErrorBoundaryID),
+              forceError,
+            });
+          });
+        });
+
+        TestUtilsAct(() => {
+          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(false);
+      expect(inspectedElement.targetErrorBoundaryID).toBe(null);
+
+      // Inspect <Example />
+      inspectedElement = await inspect(1);
+      expect(inspectedElement.canToggleError).toBe(true);
+      expect(inspectedElement.isErrored).toBe(false);
+      expect(inspectedElement.targetErrorBoundaryID).toBe(
+        targetErrorBoundaryID,
+      );
+
+      // now force error state on <Example />
+      await toggleError(true);
+
+      // we are in error state now, <Example /> won't show up
+      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);
+      // its error boundary ID is itself because it's caught the error
+      expect(inspectedElement.targetErrorBoundaryID).toBe(
+        targetErrorBoundaryID,
+      );
+
+      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);
+      expect(inspectedElement.targetErrorBoundaryID).toBe(
+        targetErrorBoundaryID,
+      );
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index db75d9e15088..d3e87c7110a0 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -14,6 +14,7 @@ export function test(maybeInspectedElement) {
     hasOwnProperty('canEditFunctionProps') &&
     hasOwnProperty('canEditHooks') &&
     hasOwnProperty('canToggleSuspense') &&
+    hasOwnProperty('canToggleError') &&
     hasOwnProperty('canViewSource')
   );
 }
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 7470070455c0..4dc727a59e2f 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -122,6 +122,12 @@ type OverrideValueAtPathParams = {|
   value: any,
 |};
 
+type OverrideErrorParams = {|
+  id: number,
+  rendererID: number,
+  forceError: boolean,
+|};
+
 type OverrideSuspenseParams = {|
   id: number,
   rendererID: number,
@@ -183,6 +189,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('getOwnersList', this.getOwnersList);
     bridge.addListener('inspectElement', this.inspectElement);
     bridge.addListener('logElementToConsole', this.logElementToConsole);
+    bridge.addListener('overrideError', this.overrideError);
     bridge.addListener('overrideSuspense', this.overrideSuspense);
     bridge.addListener('overrideValueAtPath', this.overrideValueAtPath);
     bridge.addListener('reloadAndProfile', this.reloadAndProfile);
@@ -381,6 +388,15 @@ export default class Agent extends EventEmitter<{|
     }
   };
 
+  overrideError = ({id, rendererID, forceError}: OverrideErrorParams) => {
+    const renderer = this._rendererInterfaces[rendererID];
+    if (renderer == null) {
+      console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
+    } else {
+      renderer.overrideError(id, forceError);
+    }
+  };
+
   overrideSuspense = ({
     id,
     rendererID,
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 091d755009b4..7b612ff34617 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -800,6 +800,11 @@ export function attach(
       canEditFunctionPropsDeletePaths: false,
       canEditFunctionPropsRenamePaths: false,
 
+      // Toggle error boundary did not exist in legacy versions
+      canToggleError: false,
+      isErrored: false,
+      targetErrorBoundaryID: null,
+
       // Suspense did not exist in legacy versions
       canToggleSuspense: false,
 
@@ -1016,6 +1021,9 @@ export function attach(
   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');
   };
@@ -1089,6 +1097,7 @@ export function attach(
     handlePostCommitFiberRoot,
     inspectElement,
     logElementToConsole,
+    overrideError,
     overrideSuspense,
     overrideValueAtPath,
     renamePath,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index b7b8eb605615..2911855f57bd 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -120,6 +120,7 @@ type ReactPriorityLevelsType = {|
 |};
 
 type ReactTypeOfSideEffectType = {|
+  DidCapture: number,
   NoFlags: number,
   PerformedWork: number,
   Placement: number,
@@ -147,6 +148,7 @@ export function getInternalReactConstants(
   ReactTypeOfWork: WorkTagMap,
 |} {
   const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
+    DidCapture: 0b10000000,
     NoFlags: 0b00,
     PerformedWork: 0b01,
     Placement: 0b10,
@@ -519,7 +521,13 @@ export function attach(
     ReactTypeOfWork,
     ReactTypeOfSideEffect,
   } = getInternalReactConstants(version);
-  const {Incomplete, NoFlags, PerformedWork, Placement} = ReactTypeOfSideEffect;
+  const {
+    DidCapture,
+    Incomplete,
+    NoFlags,
+    PerformedWork,
+    Placement,
+  } = ReactTypeOfSideEffect;
   const {
     CacheComponent,
     ClassComponent,
@@ -557,9 +565,13 @@ export function attach(
     overrideProps,
     overridePropsDeletePath,
     overridePropsRenamePath,
+    setErrorHandler,
     setSuspenseHandler,
     scheduleUpdate,
   } = renderer;
+  const supportsTogglingError =
+    typeof setErrorHandler === 'function' &&
+    typeof scheduleUpdate === 'function';
   const supportsTogglingSuspense =
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
@@ -659,6 +671,13 @@ export function attach(
     type: 'error' | 'warn',
     args: $ReadOnlyArray<any>,
   ): void {
+    if (type === 'error') {
+      const maybeID = getFiberIDUnsafe(fiber);
+      // if this is an error simulated by us to trigger error boundary, ignore
+      if (maybeID != null && forceErrorForFiberIDs.get(maybeID) === true) {
+        return;
+      }
+    }
     const message = format(...args);
     if (__DEBUG__) {
       debug('onErrorOrWarning', fiber, null, `${type}: "${message}"`);
@@ -1133,6 +1152,13 @@ export function attach(
       if (alternate !== null) {
         fiberToIDMap.delete(alternate);
       }
+
+      if (forceErrorForFiberIDs.has(fiberID)) {
+        forceErrorForFiberIDs.delete(fiberID);
+        if (forceErrorForFiberIDs.size === 0 && setErrorHandler != null) {
+          setErrorHandler(shouldErrorFiberAlwaysNull);
+        }
+      }
     });
     untrackFibersSet.clear();
   }
@@ -2909,6 +2935,34 @@ export function attach(
     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 getNearestErrorBoundaryID(fiber: Fiber): number | null {
+    let parent = fiber.return;
+    while (parent !== null) {
+      if (isErrorBoundary(parent)) {
+        return getFiberIDUnsafe(parent);
+      }
+      parent = parent.return;
+    }
+    return null;
+  }
+
   function inspectElementRaw(id: number): InspectedElement | null {
     const fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber == null) {
@@ -3063,6 +3117,21 @@ export function attach(
     const errors = fiberIDToErrorsMap.get(id) || new Map();
     const warnings = fiberIDToWarningsMap.get(id) || new Map();
 
+    const isErrored =
+      (fiber.flags & DidCapture) !== NoFlags ||
+      forceErrorForFiberIDs.get(id) === true;
+
+    let targetErrorBoundaryID;
+    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
+      targetErrorBoundaryID = isErrored ? id : getNearestErrorBoundaryID(fiber);
+    } else {
+      targetErrorBoundaryID = getNearestErrorBoundaryID(fiber);
+    }
+
     return {
       id,
 
@@ -3080,6 +3149,11 @@ export function attach(
       canEditFunctionPropsRenamePaths:
         typeof overridePropsRenamePath === 'function',
 
+      canToggleError: supportsTogglingError && targetErrorBoundaryID != null,
+      // Is this error boundary in error state.
+      isErrored,
+      targetErrorBoundaryID,
+
       canToggleSuspense:
         supportsTogglingSuspense &&
         // If it's showing the real content, we can always flip fallback.
@@ -3747,7 +3821,72 @@ export function attach(
   }
 
   // React will switch between these implementations depending on whether
-  // we have any manually suspended Fibers or not.
+  // we have any manually suspended/errored-out Fibers or not.
+  function shouldErrorFiberAlwaysNull() {
+    return null;
+  }
+
+  // Map of id and its force error status: true (error), false (toggled off),
+  // null (do nothing)
+  const forceErrorForFiberIDs = new Map();
+  function shouldErrorFiberAccordingToMap(fiber) {
+    if (typeof setErrorHandler !== 'function') {
+      throw new Error(
+        'Expected overrideError() to not get called for earlier React versions.',
+      );
+    }
+
+    const id = getFiberIDUnsafe(fiber);
+    if (id === null) {
+      return null;
+    }
+
+    let status = null;
+    if (forceErrorForFiberIDs.has(id)) {
+      status = forceErrorForFiberIDs.get(id);
+      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.
+        forceErrorForFiberIDs.delete(id);
+
+        if (forceErrorForFiberIDs.size === 0) {
+          // Last override is gone. Switch React back to fast path.
+          setErrorHandler(shouldErrorFiberAlwaysNull);
+        }
+      }
+    }
+    return status;
+  }
+
+  function overrideError(id, forceError) {
+    if (
+      typeof setErrorHandler !== 'function' ||
+      typeof scheduleUpdate !== 'function'
+    ) {
+      throw new Error(
+        'Expected overrideError() to not get called for earlier React versions.',
+      );
+    }
+
+    forceErrorForFiberIDs.set(id, forceError);
+
+    if (forceErrorForFiberIDs.size === 1) {
+      // First override is added. Switch React to slower path.
+      setErrorHandler(shouldErrorFiberAccordingToMap);
+    }
+
+    const fiber = idToArbitraryFiberMap.get(id);
+    if (fiber != null) {
+      scheduleUpdate(fiber);
+    }
+  }
 
   function shouldSuspendFiberAlwaysFalse() {
     return false;
@@ -4042,6 +4181,7 @@ export function attach(
     logElementToConsole,
     prepareViewAttributeSource,
     prepareViewElementSource,
+    overrideError,
     overrideSuspense,
     overrideValueAtPath,
     renamePath,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 342931c250ea..d8e0939f1150 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -142,6 +142,8 @@ export type ReactRenderer = {
   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,
   ...
 };
 
@@ -224,6 +226,11 @@ export type InspectedElement = {|
   canEditFunctionPropsDeletePaths: boolean,
   canEditFunctionPropsRenamePaths: boolean,
 
+  // Is this Error, and can its value be overridden now?
+  canToggleError: boolean,
+  isErrored: boolean,
+  targetErrorBoundaryID: ?number,
+
   // Is this Suspense, and can its value be overridden now?
   canToggleSuspense: boolean,
 
@@ -332,6 +339,7 @@ export type RendererInterface = {
     inspectedPaths: Object,
   ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
+  overrideError: (id: number, forceError: boolean) => void,
   overrideSuspense: (id: number, forceFallback: boolean) => void,
   overrideValueAtPath: (
     type: Type,
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index a4b870ea8f9b..4a79147ec23e 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -190,6 +190,9 @@ export function convertInspectedElementBackendToFrontend(
     canEditHooks,
     canEditHooksAndDeletePaths,
     canEditHooksAndRenamePaths,
+    canToggleError,
+    isErrored,
+    targetErrorBoundaryID,
     canToggleSuspense,
     canViewSource,
     hasLegacyContext,
@@ -216,6 +219,9 @@ export function convertInspectedElementBackendToFrontend(
     canEditHooks,
     canEditHooksAndDeletePaths,
     canEditHooksAndRenamePaths,
+    canToggleError,
+    isErrored,
+    targetErrorBoundaryID,
     canToggleSuspense,
     canViewSource,
     hasLegacyContext,
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 5b34a2321253..5bf8a5f127c9 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -115,6 +115,11 @@ type OverrideValueAtPath = {|
   value: any,
 |};
 
+type OverrideError = {|
+  ...ElementAndRendererID,
+  forceError: boolean,
+|};
+
 type OverrideSuspense = {|
   ...ElementAndRendererID,
   forceFallback: boolean,
@@ -201,6 +206,7 @@ type FrontendEvents = {|
   highlightNativeElement: [HighlightElementInDOM],
   inspectElement: [InspectElementParams],
   logElementToConsole: [ElementAndRendererID],
+  overrideError: [OverrideError],
   overrideSuspense: [OverrideSuspense],
   overrideValueAtPath: [OverrideValueAtPath],
   profilingData: [ProfilingDataBackend],
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index 0c7fe00b42aa..fffd0aec4cbc 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -32,6 +32,7 @@ export type IconType =
   | 'save'
   | 'search'
   | 'settings'
+  | 'error'
   | 'suspend'
   | 'undo'
   | 'up'
@@ -109,6 +110,9 @@ export default function ButtonIcon({className = '', type}: Props) {
     case 'settings':
       pathData = PATH_SETTINGS;
       break;
+    case 'error':
+      pathData = PATH_ERROR;
+      break;
     case 'suspend':
       pathData = PATH_SUSPEND;
       break;
@@ -187,7 +191,7 @@ const PATH_LOG_DATA = `
 `;
 
 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 
+  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
 `;
 
@@ -223,6 +227,9 @@ const PATH_SETTINGS = `
   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
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index e7cda475052e..ea976767c02f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -92,15 +92,47 @@ export default function InspectedElementWrapper(_: Props) {
     (canViewElementSourceFunction === null ||
       canViewElementSourceFunction(inspectedElement));
 
+  const isErrored = inspectedElement != null && inspectedElement.isErrored;
+  const targetErrorBoundaryID =
+    inspectedElement != null ? inspectedElement.targetErrorBoundaryID : null;
+
   const isSuspended =
     element !== null &&
     element.type === ElementTypeSuspense &&
     inspectedElement != null &&
     inspectedElement.state != null;
 
+  const canToggleError =
+    inspectedElement != null && inspectedElement.canToggleError;
+
   const canToggleSuspense =
     inspectedElement != null && inspectedElement.canToggleSuspense;
 
+  const toggleErrored = useCallback(() => {
+    if (inspectedElement == null || targetErrorBoundaryID == null) {
+      return;
+    }
+
+    const rendererID = store.getRendererIDForElement(targetErrorBoundaryID);
+    if (rendererID !== null) {
+      if (targetErrorBoundaryID !== inspectedElement.id) {
+        // Update tree selection so that if we cause a component to error,
+        // the nearest error boundary will become the newly selected thing.
+        dispatch({
+          type: 'SELECT_ELEMENT_BY_ID',
+          payload: targetErrorBoundaryID,
+        });
+      }
+
+      // Toggle error.
+      bridge.send('overrideError', {
+        id: targetErrorBoundaryID,
+        rendererID,
+        forceError: !isErrored,
+      });
+    }
+  }, [bridge, dispatch, isErrored, targetErrorBoundaryID]);
+
   // TODO (suspense toggle) Would be nice to eventually use a two setState pattern here as well.
   const toggleSuspended = useCallback(() => {
     let nearestSuspenseElement = null;
@@ -177,6 +209,19 @@ export default function InspectedElementWrapper(_: Props) {
           </div>
         </div>
 
+        {canToggleError && (
+          <Toggle
+            className={styles.IconButton}
+            isChecked={isErrored}
+            onChange={toggleErrored}
+            title={
+              isErrored
+                ? 'Clear the forced error'
+                : 'Force the selected component into an errored state'
+            }>
+            <ButtonIcon type="error" />
+          </Toggle>
+        )}
         {canToggleSuspense && (
           <Toggle
             className={styles.IconButton}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index e09a251392bf..d48e8e32e1f2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -76,6 +76,11 @@ export type InspectedElement = {|
   canEditFunctionPropsDeletePaths: boolean,
   canEditFunctionPropsRenamePaths: boolean,
 
+  // Is this Error, and can its value be overridden now?
+  isErrored: boolean,
+  canToggleError: boolean,
+  targetErrorBoundaryID: ?number,
+
   // Is this Suspense, and can its value be overridden now?
   canToggleSuspense: boolean,
 
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 000000000000..1a4fc7927c06
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {Fragment} from 'react';
+
+class ErrorBoundary extends React.Component {
+  state = {hasError: false};
+
+  static getDerivedStateFromError(error) {
+    return {hasError: true};
+  }
+
+  render() {
+    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>
+    );
+  }
+}
+
+function Component({label}) {
+  return <div>{label}</div>;
+}
+
+export default function ErrorBoundaries() {
+  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/index.js b/packages/react-devtools-shell/src/app/index.js
index 5764130075ae..d00ffde4a5de 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -17,6 +17,7 @@ import InspectableElements from './InspectableElements';
 import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
+import ErrorBoundaries from './ErrorBoundaries';
 import SuspenseTree from './SuspenseTree';
 import {ignoreErrors, ignoreWarnings} from './console';
 
@@ -54,6 +55,7 @@ function mountTestApp() {
   mountHelper(InlineWarnings);
   mountHelper(ReactNativeWeb);
   mountHelper(Toggle);
+  mountHelper(ErrorBoundaries);
   mountHelper(SuspenseTree);
   mountHelper(DeeplyNestedComponents);
   mountHelper(Iframe);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6f1f7953b257..30fdc5165636 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -70,6 +70,7 @@ import {
   ChildDeletion,
   ForceUpdateForLegacySuspense,
   StaticMask,
+  ShouldCapture,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -111,6 +112,7 @@ import {
   processUpdateQueue,
   cloneUpdateQueue,
   initializeUpdateQueue,
+  enqueueCapturedUpdate,
 } from './ReactUpdateQueue.new';
 import {
   NoLane,
@@ -125,6 +127,7 @@ import {
   removeLanes,
   mergeLanes,
   getBumpedLaneForHydration,
+  pickArbitraryLane,
 } from './ReactFiberLane.new';
 import {
   ConcurrentMode,
@@ -141,7 +144,7 @@ import {
   isPrimaryRenderer,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {shouldSuspend} from './ReactFiberReconciler';
+import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.new';
 import {
   suspenseStackCursor,
@@ -219,6 +222,8 @@ import {
   restoreSpawnedCachePool,
   getOffscreenDeferredCachePool,
 } from './ReactFiberCacheComponent.new';
+import {createCapturedValue} from './ReactCapturedValue';
+import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import is from 'shared/objectIs';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
@@ -947,6 +952,38 @@ function updateClassComponent(
   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;
+        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 update = createClassErrorUpdate(
+          workInProgress,
+          createCapturedValue(error, workInProgress),
+          lane,
+        );
+        enqueueCapturedUpdate(workInProgress, update);
+        break;
+      }
+    }
+
     if (workInProgress.type !== workInProgress.elementType) {
       // Lazy component props can't be validated in createElement
       // because they're only guaranteed to be resolved here.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 8bac08c0ff6f..090fa0b19571 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -70,6 +70,7 @@ import {
   ChildDeletion,
   ForceUpdateForLegacySuspense,
   StaticMask,
+  ShouldCapture,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -111,6 +112,7 @@ import {
   processUpdateQueue,
   cloneUpdateQueue,
   initializeUpdateQueue,
+  enqueueCapturedUpdate,
 } from './ReactUpdateQueue.old';
 import {
   NoLane,
@@ -125,6 +127,7 @@ import {
   removeLanes,
   mergeLanes,
   getBumpedLaneForHydration,
+  pickArbitraryLane,
 } from './ReactFiberLane.old';
 import {
   ConcurrentMode,
@@ -141,7 +144,7 @@ import {
   isPrimaryRenderer,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {shouldSuspend} from './ReactFiberReconciler';
+import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.old';
 import {
   suspenseStackCursor,
@@ -219,6 +222,8 @@ import {
   restoreSpawnedCachePool,
   getOffscreenDeferredCachePool,
 } from './ReactFiberCacheComponent.old';
+import {createCapturedValue} from './ReactCapturedValue';
+import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import is from 'shared/objectIs';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
@@ -947,6 +952,38 @@ function updateClassComponent(
   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;
+        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 update = createClassErrorUpdate(
+          workInProgress,
+          createCapturedValue(error, workInProgress),
+          lane,
+        );
+        enqueueCapturedUpdate(workInProgress, update);
+        break;
+      }
+    }
+
     if (workInProgress.type !== workInProgress.elementType) {
       // Lazy component props can't be validated in createElement
       // because they're only guaranteed to be resolved here.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index e789b58b61c1..ff68770f09b0 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -35,6 +35,7 @@ import {
   findHostInstance as findHostInstance_old,
   findHostInstanceWithWarning as findHostInstanceWithWarning_old,
   findHostInstanceWithNoPortals as findHostInstanceWithNoPortals_old,
+  shouldError as shouldError_old,
   shouldSuspend as shouldSuspend_old,
   injectIntoDevTools as injectIntoDevTools_old,
   act as act_old,
@@ -75,6 +76,7 @@ import {
   findHostInstance as findHostInstance_new,
   findHostInstanceWithWarning as findHostInstanceWithWarning_new,
   findHostInstanceWithNoPortals as findHostInstanceWithNoPortals_new,
+  shouldError as shouldError_new,
   shouldSuspend as shouldSuspend_new,
   injectIntoDevTools as injectIntoDevTools_new,
   act as act_new,
@@ -155,6 +157,9 @@ export const findHostInstanceWithWarning = enableNewReconciler
 export const findHostInstanceWithNoPortals = enableNewReconciler
   ? findHostInstanceWithNoPortals_new
   : findHostInstanceWithNoPortals_old;
+export const shouldError = enableNewReconciler
+  ? shouldError_new
+  : shouldError_old;
 export const shouldSuspend = enableNewReconciler
   ? shouldSuspend_new
   : shouldSuspend_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index c1e9778160a7..c53fabbb8e4a 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -463,6 +463,12 @@ export function findHostInstanceWithNoPortals(
   return hostFiber.stateNode;
 }
 
+let shouldErrorImpl = fiber => null;
+
+export function shouldError(fiber: Fiber): ?boolean {
+  return shouldErrorImpl(fiber);
+}
+
 let shouldSuspendImpl = fiber => false;
 
 export function shouldSuspend(fiber: Fiber): boolean {
@@ -476,6 +482,7 @@ let overrideProps = null;
 let overridePropsDeletePath = null;
 let overridePropsRenamePath = null;
 let scheduleUpdate = null;
+let setErrorHandler = null;
 let setSuspenseHandler = null;
 
 if (__DEV__) {
@@ -690,6 +697,10 @@ if (__DEV__) {
     scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
   };
 
+  setErrorHandler = (newShouldErrorImpl: Fiber => ?boolean) => {
+    shouldErrorImpl = newShouldErrorImpl;
+  };
+
   setSuspenseHandler = (newShouldSuspendImpl: Fiber => boolean) => {
     shouldSuspendImpl = newShouldSuspendImpl;
   };
@@ -728,6 +739,7 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     overrideProps,
     overridePropsDeletePath,
     overridePropsRenamePath,
+    setErrorHandler,
     setSuspenseHandler,
     scheduleUpdate,
     currentDispatcherRef: ReactCurrentDispatcher,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 47ced0013031..73d412bfcd1a 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -463,6 +463,12 @@ export function findHostInstanceWithNoPortals(
   return hostFiber.stateNode;
 }
 
+let shouldErrorImpl = fiber => null;
+
+export function shouldError(fiber: Fiber): ?boolean {
+  return shouldErrorImpl(fiber);
+}
+
 let shouldSuspendImpl = fiber => false;
 
 export function shouldSuspend(fiber: Fiber): boolean {
@@ -476,6 +482,7 @@ let overrideProps = null;
 let overridePropsDeletePath = null;
 let overridePropsRenamePath = null;
 let scheduleUpdate = null;
+let setErrorHandler = null;
 let setSuspenseHandler = null;
 
 if (__DEV__) {
@@ -690,6 +697,10 @@ if (__DEV__) {
     scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
   };
 
+  setErrorHandler = (newShouldErrorImpl: Fiber => ?boolean) => {
+    shouldErrorImpl = newShouldErrorImpl;
+  };
+
   setSuspenseHandler = (newShouldSuspendImpl: Fiber => boolean) => {
     shouldSuspendImpl = newShouldSuspendImpl;
   };
@@ -728,6 +739,7 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     overrideProps,
     overridePropsDeletePath,
     overridePropsRenamePath,
+    setErrorHandler,
     setSuspenseHandler,
     scheduleUpdate,
     currentDispatcherRef: ReactCurrentDispatcher,

From 44cdfd6b7a0f5a4949866a24f65179760b3767d1 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 3 Jun 2021 11:45:10 -0400
Subject: [PATCH 0586/1603] Use ReactVersions module as package allowlist
 (#21613)

Instead of keeping a separate allowlist in sync, we use ReactVersions.js
as the source of truth for which packages get published.
---
 ReactVersions.js         |  1 -
 scripts/release/utils.js | 38 ++++----------------------------------
 2 files changed, 4 insertions(+), 35 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index a16c73fcfd3b..82e3aeb1024b 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -50,7 +50,6 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
-  'react-server',
 ];
 
 // TODO: Export a map of every package and its version.
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index 247f493bd169..d989a175675b 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -11,6 +11,7 @@ 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({
@@ -132,42 +133,11 @@ const getCommitFromCurrentBuild = async () => {
 };
 
 const getPublicPackages = isExperimental => {
-  // TODO: Use ReactVersions.js as source of truth.
+  const packageNames = Object.keys(stablePackages);
   if (isExperimental) {
-    return [
-      'create-subscription',
-      'eslint-plugin-react-hooks',
-      'jest-react',
-      'react',
-      'react-art',
-      'react-dom',
-      'react-is',
-      'react-reconciler',
-      'react-refresh',
-      'react-test-renderer',
-      'use-subscription',
-      'scheduler',
-      'react-fetch',
-      'react-fs',
-      'react-pg',
-      'react-server-dom-webpack',
-    ];
-  } else {
-    return [
-      'create-subscription',
-      'eslint-plugin-react-hooks',
-      'jest-react',
-      'react',
-      'react-art',
-      'react-dom',
-      'react-is',
-      'react-reconciler',
-      'react-refresh',
-      'react-test-renderer',
-      'use-subscription',
-      'scheduler',
-    ];
+    packageNames.push(...experimentalPackages);
   }
+  return packageNames;
 };
 
 const handleError = error => {

From 8f379427657ff1be5b25904864da54c7acfc8d64 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 3 Jun 2021 13:26:11 -0400
Subject: [PATCH 0587/1603] Prepare semver (`@latest`) releases in CI (#21615)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Now that we track package versions in source, `@latest` builds should
be fully reproducible for a given commit. We can prepare the packages in
CI and store them as artifacts, the same way we do for `@next` and
`@experimental`.

Eventually this can replace the interactive script that we currently
use to swap out the version numbers.

The other nice thing about this approach is that we can run tests in CI
to verify that the packages are releasable, instead of waiting until
right before publish.

I named the output directory `oss-stable-semver`, to distinguish from
the `@next` prereleases that are located at `oss-stable`. I don't love
this naming. I'd prefer to use the name of the corresponding npm dist
tag. I'll do that in a follow-up, though, since the `oss-stable` name is
referenced in a handful of places.

Current naming (after this PR):

- `oss-experimental` → `@experimental`
- `oss-stable` → `@next`
- `oss-stable-semver` → `@latest`

Proposed naming (not yet implemented, requires more work):

- `oss-experimental` → `@experimental`
- `oss-next` → `@next`
- `oss-latest` → `@latest`
---
 scripts/rollup/build-all-release-channels.js | 36 +++++++++++++++++---
 1 file changed, 31 insertions(+), 5 deletions(-)

diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 3cbd73565da1..0346996ac4e1 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -98,9 +98,29 @@ function processStable(buildDir) {
     updatePackageVersions(
       buildDir + '/node_modules',
       versionsMap,
-      defaultVersionIfNotFound
+      defaultVersionIfNotFound,
+      true
     );
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-stable');
+
+    // Identical to `oss-stable` but with real, semver versions. This is what
+    // will get published to @latest.
+    spawnSync('cp', [
+      '-r',
+      buildDir + '/oss-stable',
+      buildDir + '/oss-stable-semver',
+    ]);
+    const semverVersionsMap = new Map();
+    for (const moduleName in stablePackages) {
+      const version = stablePackages[moduleName];
+      semverVersionsMap.set(moduleName, version);
+    }
+    updatePackageVersions(
+      buildDir + '/oss-stable-semver',
+      semverVersionsMap,
+      defaultVersionIfNotFound,
+      false
+    );
   }
 
   if (fs.existsSync(buildDir + '/facebook-www')) {
@@ -131,7 +151,8 @@ function processExperimental(buildDir, version) {
     updatePackageVersions(
       buildDir + '/node_modules',
       versionsMap,
-      defaultVersionIfNotFound
+      defaultVersionIfNotFound,
+      true
     );
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-experimental');
   }
@@ -179,7 +200,8 @@ function crossDeviceRenameSync(source, destination) {
 function updatePackageVersions(
   modulesDir,
   versionsMap,
-  defaultVersionIfNotFound
+  defaultVersionIfNotFound,
+  pinToExactVersion
 ) {
   for (const moduleName of fs.readdirSync(modulesDir)) {
     let version = versionsMap.get(moduleName);
@@ -199,14 +221,18 @@ function updatePackageVersions(
       if (packageInfo.dependencies) {
         for (const dep of Object.keys(packageInfo.dependencies)) {
           if (versionsMap.has(dep)) {
-            packageInfo.dependencies[dep] = version;
+            packageInfo.dependencies[dep] = pinToExactVersion
+              ? version
+              : '^' + version;
           }
         }
       }
       if (packageInfo.peerDependencies) {
         for (const dep of Object.keys(packageInfo.peerDependencies)) {
           if (versionsMap.has(dep)) {
-            packageInfo.peerDependencies[dep] = version;
+            packageInfo.peerDependencies[dep] = pinToExactVersion
+              ? version
+              : '^' + version;
           }
         }
       }

From 7747a5684d0d4c482081cad4e8b715d35fb97dd2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 3 Jun 2021 14:00:08 -0400
Subject: [PATCH 0588/1603] Support `@latest` in prepare-release-from-ci
 (#21616)

Since we track these versions in source, we can build `@latest`
releases in CI and store them as artifacts.

Then when it's time to release, and the build has been verified, we use
`prepare-release-from-ci` (the same script we use for `@next` and
`@experimental`) to fetch the already built and versioned packages.
---
 scripts/release/prepare-release-from-ci.js             |  3 ++-
 .../shared-commands/download-build-artifacts.js        |  3 +++
 scripts/release/shared-commands/parse-params.js        | 10 +++++++---
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index d10444145e93..c61b3ed6372e 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -23,7 +23,8 @@ const run = async () => {
       await testPackagingFixture(params);
     }
 
-    await printPrereleaseSummary(params, false);
+    const isLatestRelease = params.releaseChannel === 'latest';
+    await printPrereleaseSummary(params, isLatestRelease);
   } catch (error) {
     handleError(error);
   }
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index f09b0f2c2809..7d2763eabc57 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -39,10 +39,13 @@ const run = async ({build, cwd, releaseChannel}) => {
     await exec(`rm -rf ./build/node_modules`, {cwd});
   }
   let sourceDir;
+  // TODO: Rename release channel to `next`
   if (releaseChannel === 'stable') {
     sourceDir = 'oss-stable';
   } else if (releaseChannel === 'experimental') {
     sourceDir = 'oss-experimental';
+  } else if (releaseChannel === 'latest') {
+    sourceDir = 'oss-stable-semver';
   } else {
     console.error('Internal error: Invalid release channel: ' + releaseChannel);
     process.exit(releaseChannel);
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
index b632d0603368..4467007ad8a5 100644
--- a/scripts/release/shared-commands/parse-params.js
+++ b/scripts/release/shared-commands/parse-params.js
@@ -32,7 +32,7 @@ const paramDefinitions = [
     name: 'releaseChannel',
     alias: 'r',
     type: String,
-    description: 'Release channel (stable or experimental)',
+    description: 'Release channel (stable, experimental, or latest)',
   },
 ];
 
@@ -40,9 +40,13 @@ module.exports = async () => {
   const params = commandLineArgs(paramDefinitions);
 
   const channel = params.releaseChannel;
-  if (channel !== 'experimental' && channel !== 'stable') {
+  if (
+    channel !== 'experimental' &&
+    channel !== 'stable' &&
+    channel !== 'latest'
+  ) {
     console.error(
-      theme.error`Invalid release channel (-r) "${channel}". Must be "stable" or "experimental".`
+      theme.error`Invalid release channel (-r) "${channel}". Must be "stable", "experimental", or "latest".`
     );
     process.exit(1);
   }

From 39f00748922cf40e06cd08d0c81f8b28fc8503fa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 3 Jun 2021 12:40:59 -0700
Subject: [PATCH 0589/1603] Make enableSuspenseLayoutEffectSemantics static for
 www (#21617)

This has been ramped up to 80% GK so the next step is to just turn it on for 100%
---
 packages/shared/forks/ReactFeatureFlags.www.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a5972151b79a..3f6d8dec8110 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -26,7 +26,6 @@ export const {
   enableDebugTracing,
   skipUnmountedBoundaries,
   createRootStrictEffectsByDefault,
-  enableSuspenseLayoutEffectSemantics,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
@@ -38,6 +37,8 @@ export const {
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
 // It's not used anywhere in production yet.
 
+export const enableSuspenseLayoutEffectSemantics = true;
+
 export const enableStrictEffects =
   __DEV__ && dynamicFeatureFlags.enableStrictEffects;
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;

From 1b7b3592f4713b3a53709554aefd1d20e9a0a6a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 3 Jun 2021 16:02:41 -0400
Subject: [PATCH 0590/1603] [Fizz] Implement Component Stacks in DEV for
 warnings (#21610)

* Implement component stacks

This uses a reverse linked list in DEV-only to keep track of where we're
currently executing.

* Fix bug that wasn't picking up the right stack at suspended boundaries

This makes it more explicit which stack we pass in to be retained by the
task.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 112 ++++++++++++++++
 .../src/ReactFizzComponentStack.js            |  61 +++++++++
 packages/react-server/src/ReactFizzServer.js  | 123 +++++++++++++++++-
 3 files changed, 292 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-server/src/ReactFizzComponentStack.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 872f7042ec6f..eb9eb0e4ef83 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1058,6 +1058,118 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  function normalizeCodeLocInfo(str) {
+    return (
+      str &&
+      str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
+        return '\n    in ' + name + ' (at **)';
+      })
+    );
+  }
+
+  // @gate experimental
+  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(t => (
+            <span>{t}</span>
+          ))}
+        </div>
+      );
+    }
+    function C() {
+      return (
+        <inCorrectTag>
+          <Text text="Loading" />
+        </inCorrectTag>
+      );
+    }
+    function A() {
+      return (
+        <div>
+          <Suspense fallback={<C />}>
+            <B />
+          </Suspense>
+        </div>
+      );
+    }
+
+    // We can't use the toErrorDev helper here because this is an async act.
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
+
+    try {
+      await act(async () => {
+        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+          <A />,
+          writable,
+        );
+        startWriting();
+      });
+
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <incorrecttag>Loading</incorrecttag>
+        </div>,
+      );
+
+      if (__DEV__) {
+        expect(mockError).toHaveBeenCalledWith(
+          'Warning: <%s /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.%s',
+          'inCorrectTag',
+          '\n' +
+            '    in inCorrectTag (at **)\n' +
+            '    in C (at **)\n' +
+            '    in Suspense (at **)\n' +
+            '    in div (at **)\n' +
+            '    in A (at **)',
+        );
+        mockError.mockClear();
+      } else {
+        expect(mockError).not.toHaveBeenCalled();
+      }
+
+      await act(async () => {
+        resolveText('Hello');
+        resolveText('World');
+      });
+
+      if (__DEV__) {
+        expect(mockError).toHaveBeenCalledWith(
+          'Warning: Each child in a list should have a unique "key" prop.%s%s' +
+            ' See https://reactjs.org/link/warning-keys for more information.%s',
+          '\n\nCheck the top-level render call using <div>.',
+          '',
+          '\n' +
+            '    in span (at **)\n' +
+            '    in B (at **)\n' +
+            '    in Suspense (at **)\n' +
+            '    in div (at **)\n' +
+            '    in A (at **)',
+        );
+      } else {
+        expect(mockError).not.toHaveBeenCalled();
+      }
+
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <div>
+            <span>Hello</span>
+            <span>World</span>
+          </div>
+        </div>,
+      );
+    } finally {
+      console.error = originalConsoleError;
+    }
+  });
+
   // @gate experimental
   it('should can suspend in a class component with legacy context', async () => {
     class TestProvider extends React.Component {
diff --git a/packages/react-server/src/ReactFizzComponentStack.js b/packages/react-server/src/ReactFizzComponentStack.js
new file mode 100644
index 000000000000..1fa49453d31b
--- /dev/null
+++ b/packages/react-server/src/ReactFizzComponentStack.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {
+  describeBuiltInComponentFrame,
+  describeFunctionComponentFrame,
+  describeClassComponentFrame,
+} from 'shared/ReactComponentStackFrame';
+
+// DEV-only reverse linked list representing the current component stack
+type BuiltInComponentStackNode = {
+  tag: 0,
+  parent: null | ComponentStackNode,
+  type: string,
+};
+type FunctionComponentStackNode = {
+  tag: 1,
+  parent: null | ComponentStackNode,
+  type: Function,
+};
+type ClassComponentStackNode = {
+  tag: 2,
+  parent: null | ComponentStackNode,
+  type: Function,
+};
+export type ComponentStackNode =
+  | BuiltInComponentStackNode
+  | FunctionComponentStackNode
+  | ClassComponentStackNode;
+
+export function getStackByComponentStackNode(
+  componentStack: ComponentStackNode,
+): string {
+  try {
+    let info = '';
+    let node = componentStack;
+    do {
+      switch (node.tag) {
+        case 0:
+          info += describeBuiltInComponentFrame(node.type, null, null);
+          break;
+        case 1:
+          info += describeFunctionComponentFrame(node.type, null, null);
+          break;
+        case 2:
+          info += describeClassComponentFrame(node.type, null, null);
+          break;
+      }
+      node = node.parent;
+    } while (node);
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
+}
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f272c18b462d..d7189ab06c97 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -24,6 +24,7 @@ import type {
   FormatContext,
 } from './ReactServerFormatConfig';
 import type {ContextSnapshot} from './ReactFizzNewContext';
+import type {ComponentStackNode} from './ReactFizzComponentStack';
 
 import {
   scheduleWork,
@@ -77,6 +78,7 @@ import {
   currentResponseState,
   setCurrentResponseState,
 } from './ReactFizzHooks';
+import {getStackByComponentStackNode} from './ReactFizzComponentStack';
 
 import {
   getIteratorFn,
@@ -110,6 +112,7 @@ import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
+const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
 type LegacyContext = {
   [key: string]: any,
@@ -135,6 +138,7 @@ type Task = {
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
   context: ContextSnapshot, // the current new context that this task is executing in
   assignID: null | SuspenseBoundaryID, // id to assign to the content
+  componentStack: null | ComponentStackNode, // DEV-only component stack
 };
 
 const PENDING = 0;
@@ -299,7 +303,7 @@ function createTask(
   } else {
     blockedBoundary.pendingTasks++;
   }
-  const task = {
+  const task: Task = ({
     node,
     ping: () => pingTask(request, task),
     blockedBoundary,
@@ -308,7 +312,10 @@ function createTask(
     legacyContext,
     context,
     assignID,
-  };
+  }: any);
+  if (__DEV__) {
+    task.componentStack = null;
+  }
   abortSet.add(task);
   return task;
 }
@@ -331,6 +338,57 @@ function createPendingSegment(
   };
 }
 
+// DEV-only global reference to the currently executing task
+let currentTaskInDEV: null | Task = null;
+function getCurrentStackInDEV(): string {
+  if (__DEV__) {
+    if (currentTaskInDEV === null || currentTaskInDEV.componentStack === null) {
+      return '';
+    }
+    return getStackByComponentStackNode(currentTaskInDEV.componentStack);
+  }
+  return '';
+}
+
+function pushBuiltInComponentStackInDEV(task: Task, type: string): void {
+  if (__DEV__) {
+    task.componentStack = {
+      tag: 0,
+      parent: task.componentStack,
+      type,
+    };
+  }
+}
+function pushFunctionComponentStackInDEV(task: Task, type: Function): void {
+  if (__DEV__) {
+    task.componentStack = {
+      tag: 1,
+      parent: task.componentStack,
+      type,
+    };
+  }
+}
+function pushClassComponentStackInDEV(task: Task, type: Function): void {
+  if (__DEV__) {
+    task.componentStack = {
+      tag: 2,
+      parent: task.componentStack,
+      type,
+    };
+  }
+}
+function popComponentStackInDEV(task: Task): void {
+  if (__DEV__) {
+    if (task.componentStack === null) {
+      console.error(
+        'Unexpectedly popped too many stack frames. This is a bug in React.',
+      );
+    } else {
+      task.componentStack = task.componentStack.parent;
+    }
+  }
+}
+
 function reportError(request: Request, error: mixed): void {
   // 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.
@@ -351,6 +409,7 @@ function renderSuspenseBoundary(
   task: Task,
   props: Object,
 ): void {
+  pushBuiltInComponentStackInDEV(task, 'Suspense');
   const parentBoundary = task.blockedBoundary;
   const parentSegment = task.blockedSegment;
 
@@ -406,6 +465,7 @@ function renderSuspenseBoundary(
       // 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.
+      popComponentStackInDEV(task);
       return;
     }
   } catch (error) {
@@ -445,9 +505,14 @@ function renderSuspenseBoundary(
     task.context,
     null,
   );
+  if (__DEV__) {
+    suspendedFallbackTask.componentStack = task.componentStack;
+  }
   // 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);
+
+  popComponentStackInDEV(task);
 }
 
 function renderHostElement(
@@ -456,6 +521,7 @@ function renderHostElement(
   type: string,
   props: Object,
 ): void {
+  pushBuiltInComponentStackInDEV(task, type);
   const segment = task.blockedSegment;
   const children = pushStartInstance(
     segment.chunks,
@@ -476,6 +542,7 @@ function renderHostElement(
   // the correct context. Therefore this is not in a finally.
   segment.formatContext = prevContext;
   pushEndInstance(segment.chunks, type, props);
+  popComponentStackInDEV(task);
 }
 
 function shouldConstruct(Component) {
@@ -564,12 +631,14 @@ function renderClassComponent(
   Component: any,
   props: any,
 ): void {
+  pushClassComponentStackInDEV(task, Component);
   const maskedContext = !disableLegacyContext
     ? getMaskedContext(Component, task.legacyContext)
     : undefined;
   const instance = constructClassInstance(Component, props, maskedContext);
   mountClassInstance(instance, Component, props, maskedContext);
   finishClassComponent(request, task, instance, Component, props);
+  popComponentStackInDEV(task);
 }
 
 const didWarnAboutBadClass = {};
@@ -594,6 +663,7 @@ function renderIndeterminateComponent(
   if (!disableLegacyContext) {
     legacyContext = getMaskedContext(Component, task.legacyContext);
   }
+  pushFunctionComponentStackInDEV(task, Component);
 
   if (__DEV__) {
     if (
@@ -688,6 +758,7 @@ function renderIndeterminateComponent(
     // the previous task every again, so we can use the destructive recursive form.
     renderNodeDestructive(request, task, value);
   }
+  popComponentStackInDEV(task);
 }
 
 function validateFunctionComponentInDev(Component: any): void {
@@ -768,8 +839,10 @@ function renderForwardRef(
   props: Object,
   ref: any,
 ): void {
+  pushFunctionComponentStackInDEV(task, type.render);
   const children = renderWithHooks(request, task, type.render, props, ref);
   renderNodeDestructive(request, task, children);
+  popComponentStackInDEV(task);
 }
 
 function renderMemo(
@@ -866,11 +939,13 @@ function renderLazyComponent(
   props: Object,
   ref: any,
 ): void {
+  pushBuiltInComponentStackInDEV(task, 'Lazy');
   const payload = lazyComponent._payload;
   const init = lazyComponent._init;
   const Component = init(payload);
   const resolvedProps = resolveDefaultProps(Component, props);
-  return renderElement(request, task, Component, resolvedProps, ref);
+  renderElement(request, task, Component, resolvedProps, ref);
+  popComponentStackInDEV(task);
 }
 
 function renderElement(
@@ -907,11 +982,17 @@ function renderElement(
     case REACT_DEBUG_TRACING_MODE_TYPE:
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
-    case REACT_SUSPENSE_LIST_TYPE: // TODO: SuspenseList should control the boundaries.
     case REACT_FRAGMENT_TYPE: {
       renderNodeDestructive(request, task, props.children);
       return;
     }
+    case REACT_SUSPENSE_LIST_TYPE: {
+      pushBuiltInComponentStackInDEV(task, 'SuspenseList');
+      // TODO: SuspenseList should control the boundaries.
+      renderNodeDestructive(request, task, props.children);
+      popComponentStackInDEV(task);
+      return;
+    }
     case REACT_SCOPE_TYPE: {
       if (enableScopeAPI) {
         renderNodeDestructive(request, task, props.children);
@@ -1157,6 +1238,13 @@ function spawnNewSuspendedTask(
     task.context,
     task.assignID,
   );
+  if (__DEV__) {
+    if (task.componentStack !== null) {
+      // We pop one task off the stack because the node that suspended will be tried again,
+      // which will add it back onto the stack.
+      newTask.componentStack = task.componentStack.parent;
+    }
+  }
   // We've delegated the assignment.
   task.assignID = null;
   const ping = newTask.ping;
@@ -1174,6 +1262,10 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
   const previousFormatContext = task.blockedSegment.formatContext;
   const previousLegacyContext = task.legacyContext;
   const previousContext = task.context;
+  let previousComponentStack = null;
+  if (__DEV__) {
+    previousComponentStack = task.componentStack;
+  }
   try {
     return renderNodeDestructive(request, task, node);
   } catch (x) {
@@ -1187,6 +1279,9 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       task.context = previousContext;
       // Restore all active ReactContexts to what they were before.
       switchContext(previousContext);
+      if (__DEV__) {
+        task.componentStack = previousComponentStack;
+      }
     } else {
       // 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.
@@ -1195,6 +1290,9 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       task.context = previousContext;
       // Restore all active ReactContexts to what they were before.
       switchContext(previousContext);
+      if (__DEV__) {
+        task.componentStack = previousComponentStack;
+      }
       // We assume that we don't need the correct context.
       // Let's terminate the rest of the tree and don't render any siblings.
       throw x;
@@ -1360,6 +1458,11 @@ function retryTask(request: Request, task: Task): void {
   // 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;
+    currentTaskInDEV = 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.
@@ -1379,6 +1482,10 @@ function retryTask(request: Request, task: Task): void {
       segment.status = ERRORED;
       erroredTask(request, task.blockedBoundary, segment, x);
     }
+  } finally {
+    if (__DEV__) {
+      currentTaskInDEV = prevTaskInDEV;
+    }
   }
 }
 
@@ -1389,6 +1496,11 @@ export function performWork(request: Request): void {
   const prevContext = getActiveContext();
   const prevDispatcher = ReactCurrentDispatcher.current;
   ReactCurrentDispatcher.current = Dispatcher;
+  let prevGetCurrentStackImpl;
+  if (__DEV__) {
+    prevGetCurrentStackImpl = ReactDebugCurrentFrame.getCurrentStack;
+    ReactDebugCurrentFrame.getCurrentStack = getCurrentStackInDEV;
+  }
   const prevResponseState = currentResponseState;
   setCurrentResponseState(request.responseState);
   try {
@@ -1408,6 +1520,9 @@ export function performWork(request: Request): void {
   } finally {
     setCurrentResponseState(prevResponseState);
     ReactCurrentDispatcher.current = prevDispatcher;
+    if (__DEV__) {
+      ReactDebugCurrentFrame.getCurrentStack = prevGetCurrentStackImpl;
+    }
     if (prevDispatcher === Dispatcher) {
       // This means that we were in a reentrant work loop. This could happen
       // in a renderer that supports synchronous work like renderToString,

From e0d9b289998c66d2e4fb75582b9e107054e4e0a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 3 Jun 2021 19:54:31 -0400
Subject: [PATCH 0591/1603] [Fizz] Minor Fixes for Warning Parity (#21618)

---
 .../ReactDOMServerLifecycles-test.js          |   8 +-
 .../src/server/ReactPartialRenderer.js        | 120 ++++++++++++++----
 .../src/ReactFizzClassComponent.js            |  28 +++-
 packages/react-server/src/ReactFizzServer.js  |  16 ++-
 4 files changed, 144 insertions(+), 28 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
index 5f1875f5f431..786eaac4f448 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerLifecycles-test.js
@@ -115,7 +115,9 @@ describe('ReactDOMServerLifecycles', () => {
       }
     }
 
-    ReactDOMServer.renderToString(<Component />);
+    expect(() => ReactDOMServer.renderToString(<Component />)).toErrorDev(
+      'Unsafe legacy lifecycles will not be called for components using new component APIs.',
+    );
   });
 
   it('should update instance.state with value returned from getDerivedStateFromProps', () => {
@@ -279,8 +281,8 @@ describe('ReactDOMServerLifecycles', () => {
       }
     }
 
-    expect(() => ReactDOMServer.renderToString(<Component />)).toWarnDev(
-      'componentWillMount has been renamed',
+    expect(() => ReactDOMServer.renderToString(<Component />)).toErrorDev(
+      'Unsafe legacy lifecycles will not be called for components using new component APIs.',
     );
   });
 
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index c8ccbfc245a1..752af3b2c737 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -194,6 +194,7 @@ const didWarnAboutModulePatternComponent = {};
 const didWarnAboutDeprecatedWillMount = {};
 const didWarnAboutUndefinedDerivedState = {};
 const didWarnAboutUninitializedState = {};
+const didWarnAboutLegacyLifecyclesAndDerivedState = {};
 const valuePropNames = ['value', 'defaultValue'];
 const newlineEatingTags = {
   listing: true,
@@ -475,6 +476,79 @@ function resolve(
               didWarnAboutUninitializedState[componentName] = true;
             }
           }
+
+          // 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 Component.getDerivedStateFromProps === 'function' ||
+            typeof inst.getSnapshotBeforeUpdate === 'function'
+          ) {
+            let foundWillMountName = null;
+            let foundWillReceivePropsName = null;
+            let foundWillUpdateName = null;
+            if (
+              typeof inst.componentWillMount === 'function' &&
+              inst.componentWillMount.__suppressDeprecationWarning !== true
+            ) {
+              foundWillMountName = 'componentWillMount';
+            } else if (typeof inst.UNSAFE_componentWillMount === 'function') {
+              foundWillMountName = 'UNSAFE_componentWillMount';
+            }
+            if (
+              typeof inst.componentWillReceiveProps === 'function' &&
+              inst.componentWillReceiveProps.__suppressDeprecationWarning !==
+                true
+            ) {
+              foundWillReceivePropsName = 'componentWillReceiveProps';
+            } else if (
+              typeof inst.UNSAFE_componentWillReceiveProps === 'function'
+            ) {
+              foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
+            }
+            if (
+              typeof inst.componentWillUpdate === 'function' &&
+              inst.componentWillUpdate.__suppressDeprecationWarning !== true
+            ) {
+              foundWillUpdateName = 'componentWillUpdate';
+            } else if (typeof inst.UNSAFE_componentWillUpdate === 'function') {
+              foundWillUpdateName = 'UNSAFE_componentWillUpdate';
+            }
+            if (
+              foundWillMountName !== null ||
+              foundWillReceivePropsName !== null ||
+              foundWillUpdateName !== null
+            ) {
+              const componentName =
+                getComponentNameFromType(Component) || 'Component';
+              const newApiName =
+                typeof Component.getDerivedStateFromProps === 'function'
+                  ? 'getDerivedStateFromProps()'
+                  : 'getSnapshotBeforeUpdate()';
+              if (!didWarnAboutLegacyLifecyclesAndDerivedState[componentName]) {
+                didWarnAboutLegacyLifecyclesAndDerivedState[
+                  componentName
+                ] = true;
+                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://reactjs.org/link/unsafe-component-lifecycles',
+                  componentName,
+                  newApiName,
+                  foundWillMountName !== null
+                    ? `\n  ${foundWillMountName}`
+                    : '',
+                  foundWillReceivePropsName !== null
+                    ? `\n  ${foundWillReceivePropsName}`
+                    : '',
+                  foundWillUpdateName !== null
+                    ? `\n  ${foundWillUpdateName}`
+                    : '',
+                );
+              }
+            }
+          }
         }
 
         const partialState = Component.getDerivedStateFromProps.call(
@@ -575,32 +649,32 @@ function resolve(
       typeof inst.componentWillMount === 'function'
     ) {
       if (typeof inst.componentWillMount === 'function') {
-        if (__DEV__) {
-          if (
-            warnAboutDeprecatedLifecycles &&
-            inst.componentWillMount.__suppressDeprecationWarning !== true
-          ) {
-            const componentName =
-              getComponentNameFromType(Component) || '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://reactjs.org/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;
-            }
-          }
-        }
-
         // In order to support react-lifecycles-compat polyfilled components,
         // Unsafe lifecycles should not be invoked for any component with the new gDSFP.
         if (typeof Component.getDerivedStateFromProps !== 'function') {
+          if (__DEV__) {
+            if (
+              warnAboutDeprecatedLifecycles &&
+              inst.componentWillMount.__suppressDeprecationWarning !== true
+            ) {
+              const componentName =
+                getComponentNameFromType(Component) || '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://reactjs.org/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;
+              }
+            }
+          }
+
           inst.componentWillMount();
         }
       }
diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
index b0cfc62c12ae..2e085c3f1a71 100644
--- a/packages/react-server/src/ReactFizzClassComponent.js
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -10,13 +10,17 @@
 import {emptyContextObject} from './ReactFizzContext';
 import {readContext} from './ReactFizzNewContext';
 
-import {disableLegacyContext} from 'shared/ReactFeatureFlags';
+import {
+  disableLegacyContext,
+  warnAboutDeprecatedLifecycles,
+} from 'shared/ReactFeatureFlags';
 import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import isArray from 'shared/isArray';
 
 const didWarnAboutNoopUpdateForComponent = {};
+const didWarnAboutDeprecatedWillMount = {};
 
 let didWarnAboutUninitializedState;
 let didWarnAboutGetSnapshotBeforeUpdateWithoutDidUpdate;
@@ -531,6 +535,28 @@ function callComponentWillMount(type, instance) {
   const oldState = instance.state;
 
   if (typeof instance.componentWillMount === 'function') {
+    if (__DEV__) {
+      if (
+        warnAboutDeprecatedLifecycles &&
+        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://reactjs.org/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') {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index d7189ab06c97..927aef27f4a7 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1032,13 +1032,27 @@ function renderElement(
     }
   }
 
+  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.';
+    }
+  }
   invariant(
     false,
     'Element type is invalid: expected a string (for built-in ' +
       'components) or a class/function (for composite components) ' +
       'but got: %s.%s',
     type == null ? type : typeof type,
-    '',
+    info,
   );
 }
 

From 46926993fc435e9ba7dd03f791ded05e32897b0d Mon Sep 17 00:00:00 2001
From: Ikko Ashimine <eltociear@gmail.com>
Date: Sat, 5 Jun 2021 00:42:09 +0900
Subject: [PATCH 0592/1603] Fix typo in bridge.js (#21621)

---
 packages/react-devtools-shared/src/bridge.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 5bf8a5f127c9..2637b59713e3 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -238,7 +238,7 @@ type FrontendEvents = {|
   // 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 suppot both approaches (and not run handlers twice)
+  // 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],

From cc4d24ab0b1b70c6d30e1131e496c59ff9f85d5f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 4 Jun 2021 20:17:57 +0100
Subject: [PATCH 0593/1603] [Fizz] Always call flush() if it exists (#21625)

---
 .../react-server/src/ReactServerStreamConfigNode.js   | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index c44d5b8ee656..58ce127ba965 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -11,8 +11,6 @@ import type {Writable} from 'stream';
 
 type MightBeFlushable = {
   flush?: () => void,
-  // Legacy
-  flushHeaders?: () => void,
   ...
 };
 
@@ -31,12 +29,9 @@ 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') {
-    // http.createServer response have flush(), but it has a different meaning and
-    // is deprecated in favor of flushHeaders(). Detect to avoid a warning.
-    if (typeof destination.flushHeaders !== 'function') {
-      // By convention the Zlib streams provide a flush function for this purpose.
-      destination.flush();
-    }
+    // By convention the Zlib streams provide a flush function for this purpose.
+    // For Express, compression middleware adds this method.
+    destination.flush();
   }
 }
 

From fccfc248939dcaadb55cfdb0d8f5118251c8ad80 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 4 Jun 2021 23:04:06 +0100
Subject: [PATCH 0594/1603] [Fizz] Add another fixture (#21627)

---
 fixtures/ssr2/package-lock.json | 12684 ++++++++++++++++++++++++++++++
 fixtures/ssr2/package.json      |    53 +
 fixtures/ssr2/public/main.css   |    70 +
 fixtures/ssr2/scripts/build.js  |    54 +
 fixtures/ssr2/server/delays.js  |    18 +
 fixtures/ssr2/server/render.js  |    88 +
 fixtures/ssr2/server/server.js  |    96 +
 fixtures/ssr2/src/App.js        |    62 +
 fixtures/ssr2/src/Comments.js   |    22 +
 fixtures/ssr2/src/Html.js       |    35 +
 fixtures/ssr2/src/Layout.js     |    11 +
 fixtures/ssr2/src/NavBar.js     |    15 +
 fixtures/ssr2/src/Post.js       |    28 +
 fixtures/ssr2/src/Sidebar.js    |    26 +
 fixtures/ssr2/src/Spinner.js    |    17 +
 fixtures/ssr2/src/data.js       |    38 +
 fixtures/ssr2/src/index.js      |    14 +
 17 files changed, 13331 insertions(+)
 create mode 100644 fixtures/ssr2/package-lock.json
 create mode 100644 fixtures/ssr2/package.json
 create mode 100644 fixtures/ssr2/public/main.css
 create mode 100644 fixtures/ssr2/scripts/build.js
 create mode 100644 fixtures/ssr2/server/delays.js
 create mode 100644 fixtures/ssr2/server/render.js
 create mode 100644 fixtures/ssr2/server/server.js
 create mode 100644 fixtures/ssr2/src/App.js
 create mode 100644 fixtures/ssr2/src/Comments.js
 create mode 100644 fixtures/ssr2/src/Html.js
 create mode 100644 fixtures/ssr2/src/Layout.js
 create mode 100644 fixtures/ssr2/src/NavBar.js
 create mode 100644 fixtures/ssr2/src/Post.js
 create mode 100644 fixtures/ssr2/src/Sidebar.js
 create mode 100644 fixtures/ssr2/src/Spinner.js
 create mode 100644 fixtures/ssr2/src/data.js
 create mode 100644 fixtures/ssr2/src/index.js

diff --git a/fixtures/ssr2/package-lock.json b/fixtures/ssr2/package-lock.json
new file mode 100644
index 000000000000..176802403681
--- /dev/null
+++ b/fixtures/ssr2/package-lock.json
@@ -0,0 +1,12684 @@
+{
+  "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": "0.0.0-cc4d24ab0",
+        "react-dom": "0.0.0-cc4d24ab0",
+        "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.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+      "dependencies": {
+        "@babel/highlight": "^7.12.13"
+      }
+    },
+    "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.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
+      "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
+      "dependencies": {
+        "@babel/types": "^7.14.2",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.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-explode-assignable-expression": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+      "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+      "dependencies": {
+        "@babel/helper-get-function-arity": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/types": "^7.14.2"
+      }
+    },
+    "node_modules/@babel/helper-get-function-arity": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+      "dependencies": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.10.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "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.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+      "dependencies": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+    },
+    "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.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
+      "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.4.tgz",
+      "integrity": "sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA==",
+      "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.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+      "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+      "dependencies": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.2",
+        "@babel/helper-function-name": "^7.14.2",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/parser": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.4.tgz",
+      "integrity": "sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "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.1.3",
+      "license": "MIT"
+    },
+    "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.1",
+      "license": "ISC",
+      "dependencies": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      }
+    },
+    "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": "0.0.0-cc4d24ab0",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "0.0.0-cc4d24ab0",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "0.0.0-cc4d24ab0"
+      },
+      "peerDependencies": {
+        "react": "0.0.0-cc4d24ab0"
+      }
+    },
+    "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.0",
+      "license": "MIT",
+      "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.0.0-cc4d24ab0",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "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.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+      "requires": {
+        "@babel/highlight": "^7.12.13"
+      }
+    },
+    "@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.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
+      "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
+      "requires": {
+        "@babel/types": "^7.14.2",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@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-explode-assignable-expression": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+      "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/types": "^7.14.2"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.10.4",
+      "requires": {
+        "@babel/types": "^7.10.4"
+      }
+    },
+    "@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.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+      "requires": {
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
+    },
+    "@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.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
+      "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.4.tgz",
+      "integrity": "sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA=="
+    },
+    "@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.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+      "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.2",
+        "@babel/helper-function-name": "^7.14.2",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/parser": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.4.tgz",
+      "integrity": "sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@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.1.3"
+    },
+    "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.1",
+      "requires": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "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": "0.0.0-cc4d24ab0",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-dom": {
+      "version": "0.0.0-cc4d24ab0",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "0.0.0-cc4d24ab0"
+      }
+    },
+    "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.0",
+      "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.0.0-cc4d24ab0",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "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 000000000000..638133923967
--- /dev/null
+++ b/fixtures/ssr2/package.json
@@ -0,0 +1,53 @@
+{
+  "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": "0.0.0-cc4d24ab0",
+    "react-dom": "0.0.0-cc4d24ab0",
+    "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": {
+    "start": "concurrently \"npm run server:dev\" \"npm run bundler:dev\"",
+    "start:prod": "concurrently \"npm run server:prod\" \"npm run bundler:prod\"",
+    "server:dev": "cross-env NODE_ENV=development nodemon -- server/server.js",
+    "server:prod": "cross-env NODE_ENV=production nodemon -- server/server.js",
+    "bundler:dev": "cross-env NODE_ENV=development nodemon -- scripts/build.js",
+    "bundler:prod": "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 000000000000..0e1cf9860a56
--- /dev/null
+++ b/fixtures/ssr2/public/main.css
@@ -0,0 +1,70 @@
+body {
+  font-family: system-ui, sans-serif;
+}
+
+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 000000000000..24606053d9f0
--- /dev/null
+++ b/fixtures/ssr2/scripts/build.js
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+const 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);
+      return;
+    }
+    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 000000000000..ca79fea56738
--- /dev/null
+++ b/fixtures/ssr2/server/delays.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// 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 = 5000;
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
new file mode 100644
index 000000000000..9904e46e8524
--- /dev/null
+++ b/fixtures/ssr2/server/render.js
@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import * as React from 'react';
+// import {renderToString} from 'react-dom/server';
+import {pipeToNodeWritable} from 'react-dom/unstable-fizz';
+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) {
+  // 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 data = createServerData();
+  const {startWriting, abort} = pipeToNodeWritable(
+    <DataProvider data={data}>
+      <App assets={assets} />
+    </DataProvider>,
+    res,
+    {
+      onReadyToStream() {
+        // 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.write('<!DOCTYPE html>');
+        startWriting();
+      },
+      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 000000000000..02fa65f61bd8
--- /dev/null
+++ b/fixtures/ssr2/server/server.js
@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+const 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 React = require('react');
+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 000000000000..ad8b7b50b36c
--- /dev/null
+++ b/fixtures/ssr2/src/App.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {useState, 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">
+        <Post />
+        <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 000000000000..cf4c5b7452f1
--- /dev/null
+++ b/fixtures/ssr2/src/Comments.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..907318263d90
--- /dev/null
+++ b/fixtures/ssr2/src/Html.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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)};`,
+          }}
+        />
+        <script async src={assets['main.js']} />
+      </body>
+    </html>
+  );
+}
diff --git a/fixtures/ssr2/src/Layout.js b/fixtures/ssr2/src/Layout.js
new file mode 100644
index 000000000000..0fe908e33315
--- /dev/null
+++ b/fixtures/ssr2/src/Layout.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..67f7288a9d52
--- /dev/null
+++ b/fixtures/ssr2/src/NavBar.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default 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 000000000000..2fb36b21c302
--- /dev/null
+++ b/fixtures/ssr2/src/Post.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export default 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 000000000000..0a6d16fbba16
--- /dev/null
+++ b/fixtures/ssr2/src/Sidebar.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..b91af634cbe2
--- /dev/null
+++ b/fixtures/ssr2/src/Spinner.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..3826a3a53d25
--- /dev/null
+++ b/fixtures/ssr2/src/data.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {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 000000000000..0879e98e94d0
--- /dev/null
+++ b/fixtures/ssr2/src/index.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import {createRoot} from 'react-dom';
+import App from './App';
+import {DataProvider} from './data';
+
+const root = createRoot(document, {hydrate: true});
+root.render(<App assets={window.assetManifest} />);

From 2568fecc383955fbaf8e0501702c25a12e1a0320 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Fri, 4 Jun 2021 23:10:02 +0100
Subject: [PATCH 0595/1603] Tweak fixture

---
 fixtures/ssr2/server/delays.js | 2 +-
 fixtures/ssr2/server/server.js | 1 -
 fixtures/ssr2/src/App.js       | 6 ++++--
 fixtures/ssr2/src/index.js     | 1 -
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/fixtures/ssr2/server/delays.js b/fixtures/ssr2/server/delays.js
index ca79fea56738..20a1e870b4e0 100644
--- a/fixtures/ssr2/server/delays.js
+++ b/fixtures/ssr2/server/delays.js
@@ -15,4 +15,4 @@ exports.API_DELAY = 2000;
 exports.ABORT_DELAY = 10000;
 
 // How long serving the JS bundles is delayed.
-exports.JS_BUNDLE_DELAY = 5000;
+exports.JS_BUNDLE_DELAY = 4000;
diff --git a/fixtures/ssr2/server/server.js b/fixtures/ssr2/server/server.js
index 02fa65f61bd8..027c46379ccf 100644
--- a/fixtures/ssr2/server/server.js
+++ b/fixtures/ssr2/server/server.js
@@ -19,7 +19,6 @@ const express = require('express');
 const compress = require('compression');
 const {readFileSync} = require('fs');
 const path = require('path');
-const React = require('react');
 const render = require('./render');
 const {JS_BUNDLE_DELAY} = require('./delays');
 
diff --git a/fixtures/ssr2/src/App.js b/fixtures/ssr2/src/App.js
index ad8b7b50b36c..3c6dcceac8f5 100644
--- a/fixtures/ssr2/src/App.js
+++ b/fixtures/ssr2/src/App.js
@@ -6,7 +6,7 @@
  *
  */
 
-import {useState, Suspense, lazy} from 'react';
+import {Suspense, lazy} from 'react';
 import {ErrorBoundary} from 'react-error-boundary';
 import Html from './Html';
 import Spinner from './Spinner';
@@ -39,7 +39,9 @@ function Content() {
         </Suspense>
       </aside>
       <article className="post">
-        <Post />
+        <Suspense fallback={<Spinner />}>
+          <Post />
+        </Suspense>
         <section className="comments">
           <h2>Comments</h2>
           <Suspense fallback={<Spinner />}>
diff --git a/fixtures/ssr2/src/index.js b/fixtures/ssr2/src/index.js
index 0879e98e94d0..26481d7e6f71 100644
--- a/fixtures/ssr2/src/index.js
+++ b/fixtures/ssr2/src/index.js
@@ -8,7 +8,6 @@
 
 import {createRoot} from 'react-dom';
 import App from './App';
-import {DataProvider} from './data';
 
 const root = createRoot(document, {hydrate: true});
 root.render(<App assets={window.assetManifest} />);

From 23c80959ad79898877e76a61dffbe8c02ec3853e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Fri, 4 Jun 2021 23:12:01 +0100
Subject: [PATCH 0596/1603] Fix CSS

---
 fixtures/ssr2/public/main.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/fixtures/ssr2/public/main.css b/fixtures/ssr2/public/main.css
index 0e1cf9860a56..34b4ecb1ce7f 100644
--- a/fixtures/ssr2/public/main.css
+++ b/fixtures/ssr2/public/main.css
@@ -2,6 +2,10 @@ body {
   font-family: system-ui, sans-serif;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 nav {
   padding: 20px;
 }

From b610fec00cef1fb0a33ea353ed81fd138b961785 Mon Sep 17 00:00:00 2001
From: Shannon Feng <taichiyi@163.com>
Date: Sat, 5 Jun 2021 22:19:40 +0800
Subject: [PATCH 0597/1603] fix comments: expiration time -> lanes (#21551)

---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 8 ++++----
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0b15fb13a235..1791b709136d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -389,7 +389,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     workInProgressRootRenderLanes !== NoLanes
   ) {
     // This is a render phase update. These are not officially supported. The
-    // old behavior is to give this the same "thread" (expiration time) as
+    // 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
@@ -756,7 +756,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     }
   }
 
-  // Determine the next expiration time to work on, using the fields stored
+  // Determine the next lanes to work on, using the fields stored
   // on the root.
   let lanes = getNextLanes(
     root,
@@ -1629,7 +1629,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       // capture values if possible.
       const next = unwindWork(completedWork, subtreeRenderLanes);
 
-      // Because this fiber did not complete, don't reset its expiration time.
+      // Because this fiber did not complete, don't reset its lanes.
 
       if (next !== null) {
         // If completing this work spawned new work, do that next. We'll come
@@ -2308,7 +2308,7 @@ 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 expiration time.
+  // likely unblocked. Try rendering again, at a new lanes.
   if (retryLane === NoLane) {
     // TODO: Assign this to `suspenseState.retryLane`? to avoid
     // unnecessary entanglement?
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 7b03e4cc743d..6b1ecd42d9c6 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -389,7 +389,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     workInProgressRootRenderLanes !== NoLanes
   ) {
     // This is a render phase update. These are not officially supported. The
-    // old behavior is to give this the same "thread" (expiration time) as
+    // 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
@@ -756,7 +756,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
     }
   }
 
-  // Determine the next expiration time to work on, using the fields stored
+  // Determine the next lanes to work on, using the fields stored
   // on the root.
   let lanes = getNextLanes(
     root,
@@ -1629,7 +1629,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       // capture values if possible.
       const next = unwindWork(completedWork, subtreeRenderLanes);
 
-      // Because this fiber did not complete, don't reset its expiration time.
+      // Because this fiber did not complete, don't reset its lanes.
 
       if (next !== null) {
         // If completing this work spawned new work, do that next. We'll come
@@ -2308,7 +2308,7 @@ 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 expiration time.
+  // likely unblocked. Try rendering again, at a new lanes.
   if (retryLane === NoLane) {
     // TODO: Assign this to `suspenseState.retryLane`? to avoid
     // unnecessary entanglement?

From 9d17b562ba427adb1bced98f4231406ec573c422 Mon Sep 17 00:00:00 2001
From: niexq <1879633916@qq.com>
Date: Sun, 6 Jun 2021 02:02:15 +0800
Subject: [PATCH 0598/1603] =?UTF-8?q?Fix=20typo=20in=20comment=20(satsify?=
 =?UTF-8?q?=20=E2=86=92=20satisfy)=20(#21629)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 1791b709136d..74f959920833 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1803,7 +1803,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   // 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 satsify Flow. I think the
+  // 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 subtreeHasEffects =
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 6b1ecd42d9c6..acc25f6955b3 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1803,7 +1803,7 @@ function commitRootImpl(root, renderPriorityLevel) {
 
   // 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 satsify Flow. I think the
+  // 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 subtreeHasEffects =

From 0706162ba7dff8aeb4bf824473f423946c0168c9 Mon Sep 17 00:00:00 2001
From: niexq <niexq@firstgrid.cn>
Date: Mon, 7 Jun 2021 20:52:42 +0800
Subject: [PATCH 0599/1603] =?UTF-8?q?Fix=20typo=20in=20comment=20(environe?=
 =?UTF-8?q?ment=20=E2=86=92=20environment)=20(#21635)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 74f959920833..af00bb022df8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -427,7 +427,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     return updateLane;
   }
 
-  // This update originated outside React. Ask the host environement for an
+  // This update originated outside React. Ask the host environment for an
   // appropriate priority, based on the type of event.
   //
   // The opaque type returned by the host config is internally a lane, so we can
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index acc25f6955b3..38b198644388 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -427,7 +427,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     return updateLane;
   }
 
-  // This update originated outside React. Ask the host environement for an
+  // This update originated outside React. Ask the host environment for an
   // appropriate priority, based on the type of event.
   //
   // The opaque type returned by the host config is internally a lane, so we can

From 0eea5772486318c5b2922c8b36680cf4744615d6 Mon Sep 17 00:00:00 2001
From: ithinker5 <513802516@qq.com>
Date: Mon, 7 Jun 2021 20:52:49 +0800
Subject: [PATCH 0600/1603] =?UTF-8?q?Fix=20typo=20in=20comment=20(accumlat?=
 =?UTF-8?q?ed=20=E2=86=92=20accumulated)=20(#21637)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: HuJiajie <hujj@firstgrid.cn>
---
 packages/react-reconciler/src/ReactFiberBeginWork.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberBeginWork.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 30fdc5165636..581bf6c76d45 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -557,7 +557,7 @@ function updateSimpleMemoComponent(
         // 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 accumlated during the evaluation 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.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 090fa0b19571..b4dde9e826d8 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -557,7 +557,7 @@ function updateSimpleMemoComponent(
         // 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 accumlated during the evaluation 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.

From 5aa0c5671fdddc46092d46420fff84a82df558ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 7 Jun 2021 17:47:18 -0400
Subject: [PATCH 0601/1603] Fix Issue with Undefined Lazy Imports By
 Refactoring Lazy Initialization Order (#21642)

* Add a DEV warning for common case

* Don't set Pending flag before we know it's a promise

* Move default exports extraction to render phase

This is really where most unwrapping happen. The resolved promise is the
module object and then we read things from it.

This way it lines up a bit closer with the Promise model too since the
promise resolving to React gets passed this same value.

If this throws, then it throws during render so it's caught properly and
you can break on it and even see it on the right stack.

* Check if the default is in the module object instead of if it's undefined

Normally we'd just check if something is undefined but in this case it's
valid to have an undefined value in the export but if you don't have a
property then you're probably importing the wrong kind of object.

* We need to check if it's uninitialized for sync resolution

Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 .../src/__tests__/ReactLazy-test.internal.js  |  4 +-
 packages/react/src/ReactLazy.js               | 63 ++++++++++++-------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index b062ad8ab94b..769679c9a701 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -178,13 +178,13 @@ describe('ReactLazy', () => {
 
     await Promise.resolve();
 
+    expect(Scheduler).toFlushAndThrow('Element type is invalid');
     if (__DEV__) {
-      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error).toHaveBeenCalledTimes(3);
       expect(console.error.calls.argsFor(0)[0]).toContain(
         'Expected the result of a dynamic import() call',
       );
     }
-    expect(Scheduler).toFlushAndThrow('Element type is invalid');
   });
 
   it('throws if promise rejects', async () => {
diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index 24156b69ac2d..0bc05df6411c 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -28,7 +28,7 @@ type PendingPayload = {
 
 type ResolvedPayload<T> = {
   _status: 1,
-  _result: T,
+  _result: {default: T},
 };
 
 type RejectedPayload = {
@@ -53,33 +53,21 @@ function lazyInitializer<T>(payload: Payload<T>): T {
     const ctor = payload._result;
     const thenable = ctor();
     // Transition to the next state.
-    const pending: PendingPayload = (payload: any);
-    pending._status = Pending;
-    pending._result = thenable;
+    // 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._status === Pending) {
-          const defaultExport = moduleObject.default;
-          if (__DEV__) {
-            if (defaultExport === undefined) {
-              console.error(
-                'lazy: Expected the result of a dynamic import() call. ' +
-                  'Instead received: %s\n\nYour code should look like: \n  ' +
-                  // Break up imports to avoid accidentally parsing them as dependencies.
-                  'const MyComponent = lazy(() => imp' +
-                  "ort('./MyComponent'))",
-                moduleObject,
-              );
-            }
-          }
+        if (payload._status === Pending || payload._status === Uninitialized) {
           // Transition to the next state.
           const resolved: ResolvedPayload<T> = (payload: any);
           resolved._status = Resolved;
-          resolved._result = defaultExport;
+          resolved._result = moduleObject;
         }
       },
       error => {
-        if (payload._status === Pending) {
+        if (payload._status === Pending || payload._status === Uninitialized) {
           // Transition to the next state.
           const rejected: RejectedPayload = (payload: any);
           rejected._status = Rejected;
@@ -87,9 +75,42 @@ function lazyInitializer<T>(payload: Payload<T>): T {
         }
       },
     );
+    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) {
-    return payload._result;
+    const moduleObject = payload._result;
+    if (__DEV__) {
+      if (moduleObject === undefined) {
+        console.error(
+          'lazy: Expected the result of a dynamic import() 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 import() 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;
   }

From 48a11a3efc1a3107b07d5f866a26f5abd440885f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 8 Jun 2021 11:26:22 -0400
Subject: [PATCH 0602/1603] Update next React version (#21647)

This does not mean that a release of 18.0 is imminent, only that the
main branch includes breaking changes.

Also updates the versioning scheme of the `@next` channel to include
the upcoming semver number, as well as the word "alpha" to indicate the
stability of the release.

- Before:       0.0.0-e0d9b28999
- After:        18.0.0-alpha-e0d9b28999
---
 .circleci/config.yml                          |  4 +--
 ReactVersions.js                              | 10 +++-----
 .../release/publish-commands/validate-tags.js |  2 +-
 scripts/rollup/build-all-release-channels.js  | 25 +++++++++++--------
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d94cc684e371..083f8a895bbd 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -532,7 +532,7 @@ workflows:
             - setup
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: stable
-          dist_tag: next
+          dist_tag: "next, alpha"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
@@ -564,7 +564,7 @@ workflows:
             - setup
           commit_sha: << pipeline.git.revision >>
           release_channel: stable
-          dist_tag: next
+          dist_tag: "next, alpha"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
diff --git a/ReactVersions.js b/ReactVersions.js
index 82e3aeb1024b..bac58ffb9094 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -12,20 +12,17 @@
 // The @next channel appends additional information, with the scheme
 // <version>-<label>-<commit_sha>, e.g.:
 //
-//   18.0.0-next-a1c2d3e4
-//
-// (TODO: ^ this isn't enabled quite yet. We still use <version>-<commit_sha>.)
+//   18.0.0-alpha-a1c2d3e4
 //
 // The @experimental channel doesn't include a version, only a sha, e.g.:
 //
 //   0.0.0-experimental-a1c2d3e4
 
-// TODO: Main includes breaking changes. Bump this to 18.0.0.
-const ReactVersion = '17.0.3';
+const ReactVersion = '18.0.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'next';
+const nextChannelLabel = 'alpha';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
@@ -52,7 +49,6 @@ const experimentalPackages = [
   'react-server-dom-webpack',
 ];
 
-// TODO: Export a map of every package and its version.
 module.exports = {
   ReactVersion,
   nextChannelLabel,
diff --git a/scripts/release/publish-commands/validate-tags.js b/scripts/release/publish-commands/validate-tags.js
index 329826b891ed..35d6abb1a807 100644
--- a/scripts/release/publish-commands/validate-tags.js
+++ b/scripts/release/publish-commands/validate-tags.js
@@ -19,7 +19,7 @@ const run = async ({cwd, packages, tags}) => {
   );
   const {version} = await readJson(packageJSONPath);
   const isExperimentalVersion = version.indexOf('experimental') !== -1;
-  if (version.indexOf('0.0.0') === 0) {
+  if (version.indexOf('-') === 0) {
     if (tags.includes('latest')) {
       if (isExperimentalVersion) {
         console.log(
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 0346996ac4e1..71b6f2dd0dec 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -12,6 +12,7 @@ const {
   ReactVersion,
   stablePackages,
   experimentalPackages,
+  nextChannelLabel,
 } = require('../../ReactVersions');
 
 // Runs the build script for both stable and experimental release channels,
@@ -90,10 +91,12 @@ function processStable(buildDir) {
     const defaultVersionIfNotFound = '0.0.0' + '-' + sha;
     const versionsMap = new Map();
     for (const moduleName in stablePackages) {
-      // TODO: Use version declared in ReactVersions module instead of 0.0.0.
-      // const version = stablePackages[moduleName];
-      // versionsMap.set(moduleName, version + '-' + nextChannelLabel + '-' + sha);
-      versionsMap.set(moduleName, defaultVersionIfNotFound);
+      const version = stablePackages[moduleName];
+      versionsMap.set(
+        moduleName,
+        version + '-' + nextChannelLabel + '-' + sha,
+        defaultVersionIfNotFound
+      );
     }
     updatePackageVersions(
       buildDir + '/node_modules',
@@ -220,19 +223,21 @@ function updatePackageVersions(
 
       if (packageInfo.dependencies) {
         for (const dep of Object.keys(packageInfo.dependencies)) {
-          if (versionsMap.has(dep)) {
+          const depVersion = versionsMap.get(dep);
+          if (depVersion !== undefined) {
             packageInfo.dependencies[dep] = pinToExactVersion
-              ? version
-              : '^' + version;
+              ? depVersion
+              : '^' + depVersion;
           }
         }
       }
       if (packageInfo.peerDependencies) {
         for (const dep of Object.keys(packageInfo.peerDependencies)) {
-          if (versionsMap.has(dep)) {
+          const depVersion = versionsMap.get(dep);
+          if (depVersion !== undefined) {
             packageInfo.peerDependencies[dep] = pinToExactVersion
-              ? version
-              : '^' + version;
+              ? depVersion
+              : '^' + depVersion;
           }
         }
       }

From bc7d5ac99dcb36679c90b60731458063fb8c82f3 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 8 Jun 2021 11:31:42 -0400
Subject: [PATCH 0603/1603] Allow alpha tags

---
 scripts/release/publish-commands/parse-params.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/release/publish-commands/parse-params.js b/scripts/release/publish-commands/parse-params.js
index 03b8be209d54..a441168226a7 100644
--- a/scripts/release/publish-commands/parse-params.js
+++ b/scripts/release/publish-commands/parse-params.js
@@ -43,6 +43,7 @@ module.exports = () => {
       case 'latest':
       case 'next':
       case 'experimental':
+      case 'alpha':
       case 'untagged':
         break;
       default:

From 6bbe7c3446c6ab986be39a678a75f6e2c27a5b52 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 8 Jun 2021 11:40:34 -0400
Subject: [PATCH 0604/1603] Remove space from tag arguments

---
 .circleci/config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 083f8a895bbd..e8c5de99aa3b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -532,7 +532,7 @@ workflows:
             - setup
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: stable
-          dist_tag: "next, alpha"
+          dist_tag: "next,alpha"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
@@ -564,7 +564,7 @@ workflows:
             - setup
           commit_sha: << pipeline.git.revision >>
           release_channel: stable
-          dist_tag: "next, alpha"
+          dist_tag: "next,alpha"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:

From e6be2d531d82be6a601abbd392e4615f90e1f87a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 8 Jun 2021 11:53:43 -0400
Subject: [PATCH 0605/1603] Fix tag validation

---
 scripts/release/publish-commands/validate-tags.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/release/publish-commands/validate-tags.js b/scripts/release/publish-commands/validate-tags.js
index 35d6abb1a807..fbd58e9b3763 100644
--- a/scripts/release/publish-commands/validate-tags.js
+++ b/scripts/release/publish-commands/validate-tags.js
@@ -19,7 +19,7 @@ const run = async ({cwd, packages, tags}) => {
   );
   const {version} = await readJson(packageJSONPath);
   const isExperimentalVersion = version.indexOf('experimental') !== -1;
-  if (version.indexOf('-') === 0) {
+  if (version.indexOf('-') !== -1) {
     if (tags.includes('latest')) {
       if (isExperimentalVersion) {
         console.log(
@@ -45,7 +45,7 @@ const run = async ({cwd, packages, tags}) => {
       process.exit(1);
     }
   } else {
-    if (version.indexOf('-') === -1 && !tags.includes('latest')) {
+    if (!tags.includes('latest')) {
       console.log(
         theme`{error Stable release} {version ${version}} {error must always be tagged as} {tag latest}`
       );

From 1a3f1afbd3cf815d4e55628cd7d84ef20171bab8 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@fb.com>
Date: Tue, 8 Jun 2021 17:26:21 +0100
Subject: [PATCH 0606/1603] [React Native] Fabric get current event priority
 (#21553)

* Call into Fabric to get current event priority

Fix flow errors

* Prettier

* Better handle null and undefined cases

* Remove optional chaining and use ?? operator

* prettier-all

* Use conditional ternary operator

* prettier
---
 .../src/ReactFabricHostConfig.js              | 22 ++++++++++++++++++-
 scripts/flow/react-native-host-hooks.js       |  3 +++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index ac4a97bb4609..842a33291fb0 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -25,7 +25,10 @@ import invariant from 'shared/invariant';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
-import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
+import {
+  DefaultEventPriority,
+  DiscreteEventPriority,
+} from 'react-reconciler/src/ReactEventPriorities';
 
 // Modules provided by RN:
 import {
@@ -48,6 +51,9 @@ const {
   measure: fabricMeasure,
   measureInWindow: fabricMeasureInWindow,
   measureLayout: fabricMeasureLayout,
+  unstable_DefaultEventPriority: FabricDefaultPriority,
+  unstable_DiscreteEventPriority: FabricDiscretePriority,
+  unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
 } = nativeFabricUIManager;
 
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
@@ -343,6 +349,20 @@ export function shouldSetTextContent(type: string, props: Props): boolean {
 }
 
 export function getCurrentEventPriority(): * {
+  const currentEventPriority = fabricGetCurrentEventPriority
+    ? fabricGetCurrentEventPriority()
+    : null;
+
+  if (currentEventPriority != null) {
+    switch (currentEventPriority) {
+      case FabricDiscretePriority:
+        return DiscreteEventPriority;
+      case FabricDefaultPriority:
+      default:
+        return DefaultEventPriority;
+    }
+  }
+
   return DefaultEventPriority;
 }
 
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 92f766dfad41..770b77a84082 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -184,6 +184,9 @@ declare var nativeFabricUIManager: {
     isJsResponder: boolean,
     blockNativeResponder: boolean,
   ) => void,
+  unstable_DefaultEventPriority: number,
+  unstable_DiscreteEventPriority: number,
+  unstable_getCurrentEventPriority: () => number,
   ...
 };
 

From aecb3b6d114e8fafddf6982133737198e8ea7cb3 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 9 Jun 2021 16:46:55 -0400
Subject: [PATCH 0607/1603] Deprecate ReactDOM.render and ReactDOM.hydrate
 (#21652)

* Use existing test warning filter for server tests

We have a warning filter for our internal tests to ignore warnings
that are too noisy or that we haven't removed from our test suite yet:
shouldIgnoreConsoleError.

Many of our server rendering tests don't use this filter, though,
because it has its own special of asserting warnings.

So I added the warning filter to the server tests, too.

* Deprecate ReactDOM.render and ReactDOM.hydrate

These are no longer supported in React 18. They are replaced by the
`createRoot` API.

The warning includes a link to documentation of the new API. Currently
it redirects to the corresponding working group post. Here's the PR to
set up the redirect: https://github.com/reactjs/reactjs.org/pull/3730

Many of our tests still use ReactDOM.render. We will need to gradually
migrate them over to createRoot.

In the meantime, I added the warnings to our internal warning filter.
---
 fixtures/dom/src/__tests__/wrong-act-test.js  | 12 ++++--
 .../src/__tests__/inspectedElement-test.js    |  5 +--
 .../src/__tests__/ReactDOMFiber-test.js       | 10 ++++-
 .../ReactErrorBoundaries-test.internal.js     | 26 ++++++++-----
 .../ReactErrorLoggingRecovery-test.js         |  7 ++++
 ...eactLegacyErrorBoundaries-test.internal.js | 26 ++++++++-----
 .../__tests__/ReactLegacyRootWarnings-test.js | 38 +++++++++++++++++++
 .../ReactDOMServerIntegrationTestUtils.js     | 37 ++++++++++--------
 .../react-dom/src/client/ReactDOMLegacy.js    | 18 +++++++++
 scripts/jest/shouldIgnoreConsoleError.js      | 10 +++++
 10 files changed, 146 insertions(+), 43 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactLegacyRootWarnings-test.js

diff --git a/fixtures/dom/src/__tests__/wrong-act-test.js b/fixtures/dom/src/__tests__/wrong-act-test.js
index a3fe716ff07c..f865a8bccff6 100644
--- a/fixtures/dom/src/__tests__/wrong-act-test.js
+++ b/fixtures/dom/src/__tests__/wrong-act-test.js
@@ -101,9 +101,15 @@ it('warns when using the wrong act version - test + dom: render', () => {
     TestRenderer.act(() => {
       ReactDOM.render(<App />, document.createElement('div'));
     });
-  }).toWarnDev(["It looks like you're using the wrong act()"], {
-    withoutStack: true,
-  });
+  }).toWarnDev(
+    [
+      'ReactDOM.render is no longer supported in React 18.',
+      "It looks like you're using the wrong act()",
+    ],
+    {
+      withoutStack: true,
+    }
+  );
 });
 
 it('warns when using the wrong act version - test + dom: updates', () => {
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 61ea4414c68b..ce263dd86829 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -390,9 +390,8 @@ describe('InspectedElement', () => {
     });
 
     const container = document.createElement('div');
-    await utils.actAsync(() =>
-      ReactDOM.render(<Target a={1} b="abc" />, container),
-    );
+    const root = ReactDOM.createRoot(container);
+    await utils.actAsync(() => root.render(<Target a={1} b="abc" />));
 
     expect(targetRenderCount).toBe(1);
     expect(console.error).toHaveBeenCalledTimes(1);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index fefcb2b08008..36c8367af5d4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1154,9 +1154,15 @@ describe('ReactDOMFiber', () => {
     expect(ops).toEqual(['A']);
 
     if (__DEV__) {
-      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
       const errorCalls = console.error.calls.count();
-      for (let i = 0; i < errorCalls; i++) {
+      expect(console.error.calls.argsFor(0)[0]).toMatch(
+        'ReactDOM.render is no longer supported in React 18',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toMatch(
+        'ReactDOM.render is no longer supported in React 18',
+      );
+      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
+      for (let i = 2; i < errorCalls; i++) {
         expect(console.error.calls.argsFor(i)[0]).toMatch(
           'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
         );
diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
index 02e483368552..85c7a2311e0c 100644
--- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -787,16 +787,22 @@ describe('ReactErrorBoundaries', () => {
 
   it('logs a single error when using error boundary', () => {
     const container = document.createElement('div');
-    expect(() =>
-      ReactDOM.render(
-        <ErrorBoundary>
-          <BrokenRender />
-        </ErrorBoundary>,
-        container,
-      ),
-    ).toErrorDev('The above error occurred in the <BrokenRender> component:', {
-      logAllErrors: true,
-    });
+    spyOnDev(console, 'error');
+    ReactDOM.render(
+      <ErrorBoundary>
+        <BrokenRender />
+      </ErrorBoundary>,
+      container,
+    );
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.render is no longer supported',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toContain(
+        'The above error occurred in the <BrokenRender> component:',
+      );
+    }
 
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
     expect(Scheduler).toHaveYielded([
diff --git a/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js b/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js
index 21b868557ef2..616bb1ba2a66 100644
--- a/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js
+++ b/packages/react-dom/src/__tests__/ReactErrorLoggingRecovery-test.js
@@ -43,6 +43,13 @@ describe('ReactErrorLoggingRecovery', () => {
 
   beforeEach(() => {
     console.error = error => {
+      if (
+        typeof error === 'string' &&
+        error.includes('ReactDOM.render is no longer supported in React 18')
+      ) {
+        // Ignore legacy root deprecation warning
+        return;
+      }
       throw new Error('Buggy console.error');
     };
   });
diff --git a/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
index b661ead42df3..92de8b413b16 100644
--- a/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactLegacyErrorBoundaries-test.internal.js
@@ -668,16 +668,22 @@ describe('ReactLegacyErrorBoundaries', () => {
 
   it('logs a single error using both error boundaries', () => {
     const container = document.createElement('div');
-    expect(() =>
-      ReactDOM.render(
-        <BothErrorBoundaries>
-          <BrokenRender />
-        </BothErrorBoundaries>,
-        container,
-      ),
-    ).toErrorDev('The above error occurred in the <BrokenRender> component', {
-      logAllErrors: true,
-    });
+    spyOnDev(console, 'error');
+    ReactDOM.render(
+      <BothErrorBoundaries>
+        <BrokenRender />
+      </BothErrorBoundaries>,
+      container,
+    );
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.render is no longer supported',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toContain(
+        'The above error occurred in the <BrokenRender> component:',
+      );
+    }
 
     expect(container.firstChild.textContent).toBe('Caught an error: Hello.');
     expect(log).toEqual([
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 000000000000..f8d039124f4e
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactLegacyRootWarnings-test.js
@@ -0,0 +1,38 @@
+let ReactDOM = require('react-dom');
+
+describe('ReactDOMRoot', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    container = document.createElement('div');
+    ReactDOM = require('react-dom');
+  });
+
+  test('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.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.render is no longer supported',
+      );
+    }
+  });
+
+  test('deprecation warning for ReactDOM.hydrate', () => {
+    spyOnDev(console, 'error');
+
+    container.innerHTML = 'Hi';
+    ReactDOM.hydrate('Hi', container);
+    expect(container.textContent).toEqual('Hi');
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'ReactDOM.hydrate is no longer supported',
+      );
+    }
+  });
+});
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index eec6cd855064..eec0de44fb5b 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -10,6 +10,7 @@
 'use strict';
 
 const stream = require('stream');
+const shouldIgnoreConsoleError = require('../../../../../scripts/jest/shouldIgnoreConsoleError');
 
 module.exports = function(initModules) {
   let ReactDOM;
@@ -74,23 +75,29 @@ module.exports = function(initModules) {
     }
 
     const result = await fn();
-    if (
-      console.error.calls &&
-      console.error.calls.count() !== count &&
-      console.error.calls.count() !== 0
-    ) {
-      console.log(
-        `We expected ${count} warning(s), but saw ${console.error.calls.count()} warning(s).`,
-      );
-      if (console.error.calls.count() > 0) {
-        console.log(`We saw these warnings:`);
-        for (let i = 0; i < console.error.calls.count(); i++) {
-          console.log(...console.error.calls.argsFor(i));
+    if (console.error.calls && console.error.calls.count() !== 0) {
+      const filteredWarnings = [];
+      for (let i = 0; i < console.error.calls.count(); i++) {
+        const args = console.error.calls.argsFor(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.count > 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);
         }
       }
-    }
-    if (__DEV__) {
-      expect(console.error).toHaveBeenCalledTimes(count);
     }
     return result;
   }
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index f1ee572ee6ef..e85a5541b19e 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -219,6 +219,15 @@ export function hydrate(
   container: Container,
   callback: ?Function,
 ) {
+  if (__DEV__) {
+    console.error(
+      'ReactDOM.hydrate is no longer supported in 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://reactjs.org/link/switch-to-createroot',
+    );
+  }
+
   invariant(
     isValidContainer(container),
     'Target container is not a DOM element.',
@@ -250,6 +259,15 @@ export function render(
   container: Container,
   callback: ?Function,
 ) {
+  if (__DEV__) {
+    console.error(
+      'ReactDOM.render is no longer supported in 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://reactjs.org/link/switch-to-createroot',
+    );
+  }
+
   invariant(
     isValidContainer(container),
     'Target container is not a DOM element.',
diff --git a/scripts/jest/shouldIgnoreConsoleError.js b/scripts/jest/shouldIgnoreConsoleError.js
index cae46ac7c8c3..7534b4339abb 100644
--- a/scripts/jest/shouldIgnoreConsoleError.js
+++ b/scripts/jest/shouldIgnoreConsoleError.js
@@ -13,6 +13,16 @@ module.exports = function shouldIgnoreConsoleError(format, args) {
         // Ignore it too.
         return true;
       }
+      if (
+        format.indexOf('ReactDOM.render is no longer supported in React 18') !==
+          -1 ||
+        format.indexOf(
+          'ReactDOM.hydrate is no longer supported in React 18'
+        ) !== -1
+      ) {
+        // We haven't finished migrating our tests to use createRoot.
+        return true;
+      }
     }
   } else {
     if (

From c96b78e0e7cd9e6ef7c0464748a50cf8510dde81 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuelsusla@fb.com>
Date: Thu, 10 Jun 2021 13:59:22 +0100
Subject: [PATCH 0608/1603] Add concurrentRoot property to ReactNativeTypes
 (#21648)

* Add concurrentRoot property to ReactNativeTypes

* Add concurrentRoot to ReactNativeType

* Use ReactFabricType instead of ReactNativeType
---
 packages/react-native-renderer/src/ReactNativeTypes.js | 1 +
 scripts/rollup/shims/react-native/ReactFabric.js       | 5 ++---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 8192371af827..4f42833511d2 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -210,6 +210,7 @@ export type ReactFabricType = {
     element: Element<ElementType>,
     containerTag: number,
     callback: ?() => void,
+    concurrentRoot: ?boolean,
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   ...
diff --git a/scripts/rollup/shims/react-native/ReactFabric.js b/scripts/rollup/shims/react-native/ReactFabric.js
index 536ce9a6f30b..e0692ad6eb00 100644
--- a/scripts/rollup/shims/react-native/ReactFabric.js
+++ b/scripts/rollup/shims/react-native/ReactFabric.js
@@ -12,8 +12,7 @@
 
 import {BatchedBridge} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
-// TODO @sema: Adjust types
-import type {ReactNativeType} from './ReactNativeTypes';
+import type {ReactFabricType} from './ReactNativeTypes';
 
 let ReactFabric;
 
@@ -29,4 +28,4 @@ if (global.RN$Bridgeless) {
   BatchedBridge.registerCallableModule('ReactFabric', ReactFabric);
 }
 
-module.exports = (ReactFabric: ReactNativeType);
+module.exports = (ReactFabric: ReactFabricType);

From c1536795cae5101041ef50a59ae29119aa1c2bf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 10 Jun 2021 13:12:31 -0400
Subject: [PATCH 0609/1603] Revert "Make enableSuspenseLayoutEffectSemantics
 static for www (#21617)" (#21656)

This reverts commit 39f00748922cf40e06cd08d0c81f8b28fc8503fa.
---
 packages/shared/forks/ReactFeatureFlags.www.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 3f6d8dec8110..a5972151b79a 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -26,6 +26,7 @@ export const {
   enableDebugTracing,
   skipUnmountedBoundaries,
   createRootStrictEffectsByDefault,
+  enableSuspenseLayoutEffectSemantics,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
@@ -37,8 +38,6 @@ export const {
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
 // It's not used anywhere in production yet.
 
-export const enableSuspenseLayoutEffectSemantics = true;
-
 export const enableStrictEffects =
   __DEV__ && dynamicFeatureFlags.enableStrictEffects;
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;

From cb30388d10240363615fef31eb16b9d4e2925bb9 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Fri, 11 Jun 2021 00:45:49 -0700
Subject: [PATCH 0610/1603] Export React Native `AttributeType` Types (#21661)

---
 packages/react-native-renderer/src/ReactNativeTypes.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 4f42833511d2..55150e83517e 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -33,7 +33,7 @@ export type MeasureLayoutOnSuccessCallback = (
   height: number,
 ) => void;
 
-type AttributeType<T, V> =
+export type AttributeType<T, V> =
   | true
   | $ReadOnly<{|
       diff?: (arg1: T, arg2: T) => boolean,
@@ -42,7 +42,7 @@ type AttributeType<T, V> =
 
 // We either force that `diff` and `process` always use mixed,
 // or we allow them to define specific types and use this hack
-type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>;
+export type AnyAttributeType = AttributeType<$FlowFixMe, $FlowFixMe>;
 
 export type AttributeConfiguration = $ReadOnly<{
   [propName: string]: AnyAttributeType,
@@ -53,7 +53,7 @@ export type AttributeConfiguration = $ReadOnly<{
   ...
 }>;
 
-type PartialAttributeConfiguration = $ReadOnly<{
+export type PartialAttributeConfiguration = $ReadOnly<{
   [propName: string]: AnyAttributeType,
   style?: $ReadOnly<{
     [propName: string]: AnyAttributeType,

From 01be61c12f4361dc9e4c4f4157bffbeb0e57b064 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 11 Jun 2021 10:15:48 -0400
Subject: [PATCH 0611/1603] DevTools can inspect Proxies that return broken
 iterator functions (#21660)

---
 .../src/__tests__/inspectedElement-test.js    | 40 +++++++++++++++++++
 packages/react-devtools-shared/src/utils.js   | 10 +++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index ce263dd86829..44fbf9fd470c 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -1813,6 +1813,46 @@ describe('InspectedElement', () => {
     `);
   });
 
+  // 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];
+        },
+      },
+    );
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      ReactDOM.render(<Example proxy={proxy} />, container),
+    );
+
+    const inspectedElement = await inspectElementAtIndex(0);
+
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "proxy": Object {
+          "$$typeof": Dehydrated {
+            "preview_short": ƒ () {},
+            "preview_long": ƒ () {},
+          },
+          "Symbol(Symbol.iterator)": Dehydrated {
+            "preview_short": ƒ () {},
+            "preview_long": ƒ () {},
+          },
+          "constructor": Dehydrated {
+            "preview_short": ƒ () {},
+            "preview_long": ƒ () {},
+          },
+        },
+      }
+    `);
+  });
+
   describe('$r', () => {
     it('should support function components', async () => {
       const Example = () => {
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index aa60acf06e1f..dc16bfe8e85d 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -540,9 +540,13 @@ export function getDataType(data: Object): DataType {
         // but this seems kind of awkward and expensive.
         return 'array_buffer';
       } else if (typeof data[Symbol.iterator] === 'function') {
-        return data[Symbol.iterator]() === data
-          ? 'opaque_iterator'
-          : 'iterator';
+        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 {

From 1e3ceadcc094ddc565c3f9e96b25629c1ae8a6d3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 11 Jun 2021 14:19:37 -0400
Subject: [PATCH 0612/1603] Added React 18 issue template

---
 .github/ISSUE_TEMPLATE/react_18.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .github/ISSUE_TEMPLATE/react_18.md

diff --git a/.github/ISSUE_TEMPLATE/react_18.md b/.github/ISSUE_TEMPLATE/react_18.md
new file mode 100644
index 000000000000..3b6997624e8d
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/react_18.md
@@ -0,0 +1,7 @@
+---
+name: "React 18"
+about: Bug reports, questions, and general feedback about React 18
+title: 'React 18 '
+labels: 'Type: Discussion', 'React 18'
+
+---

From 42a89d5c61c5596e50f2d1ae378134da99674000 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 11 Jun 2021 14:22:57 -0400
Subject: [PATCH 0613/1603] Update react_18.md

---
 .github/ISSUE_TEMPLATE/react_18.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.github/ISSUE_TEMPLATE/react_18.md b/.github/ISSUE_TEMPLATE/react_18.md
index 3b6997624e8d..d2726e4c18fd 100644
--- a/.github/ISSUE_TEMPLATE/react_18.md
+++ b/.github/ISSUE_TEMPLATE/react_18.md
@@ -5,3 +5,7 @@ title: 'React 18 '
 labels: 'Type: Discussion', 'React 18'
 
 ---
+
+<!--
+  Ask a question or share feedback about the React 18 release here.
+-->

From ca4e650ec1672c89618e75385f0b180957110dfb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 11 Jun 2021 14:24:09 -0400
Subject: [PATCH 0614/1603] Update react_18.md

---
 .github/ISSUE_TEMPLATE/react_18.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/react_18.md b/.github/ISSUE_TEMPLATE/react_18.md
index d2726e4c18fd..a72d1468bbf0 100644
--- a/.github/ISSUE_TEMPLATE/react_18.md
+++ b/.github/ISSUE_TEMPLATE/react_18.md
@@ -2,7 +2,9 @@
 name: "React 18"
 about: Bug reports, questions, and general feedback about React 18
 title: 'React 18 '
-labels: 'Type: Discussion', 'React 18'
+labels:
+- Type: Discussion
+- React 18
 
 ---
 

From 905f6f48d48b586de2a80cbf4c1febe4e29d996d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 11 Jun 2021 14:25:47 -0400
Subject: [PATCH 0615/1603] Update react_18.md

---
 .github/ISSUE_TEMPLATE/react_18.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/react_18.md b/.github/ISSUE_TEMPLATE/react_18.md
index a72d1468bbf0..2d6dffd5a15a 100644
--- a/.github/ISSUE_TEMPLATE/react_18.md
+++ b/.github/ISSUE_TEMPLATE/react_18.md
@@ -2,9 +2,7 @@
 name: "React 18"
 about: Bug reports, questions, and general feedback about React 18
 title: 'React 18 '
-labels:
-- Type: Discussion
-- React 18
+labels: 'Type: Discussion, React 18'
 
 ---
 

From 3ba2b67f213d4ec4c5239c9d97744e21a4763b9e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 11 Jun 2021 14:27:09 -0400
Subject: [PATCH 0616/1603] Update react_18.md

---
 .github/ISSUE_TEMPLATE/react_18.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/ISSUE_TEMPLATE/react_18.md b/.github/ISSUE_TEMPLATE/react_18.md
index 2d6dffd5a15a..1c0a8792469f 100644
--- a/.github/ISSUE_TEMPLATE/react_18.md
+++ b/.github/ISSUE_TEMPLATE/react_18.md
@@ -1,5 +1,5 @@
 ---
-name: "React 18"
+name: "💬 React 18"
 about: Bug reports, questions, and general feedback about React 18
 title: 'React 18 '
 labels: 'Type: Discussion, React 18'

From 1a106bdc2abc7af190b791d13b2ead0c2c556f7a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 11 Jun 2021 21:08:32 +0100
Subject: [PATCH 0617/1603] Wrap eventhandle-specific logic in a flag (#21657)

---
 .../src/ReactFiberCommitWork.new.js           | 55 +++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 55 +++++++++++--------
 .../src/ReactFiberWorkLoop.new.js             |  7 ++-
 .../src/ReactFiberWorkLoop.old.js             |  7 ++-
 4 files changed, 74 insertions(+), 50 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 0f6bfdee73d1..37c9bbcda79d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 
 import {
+  enableCreateEventHandleAPI,
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
@@ -365,12 +366,16 @@ function commitBeforeMutationEffects_begin() {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    // 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);
+    // This phase is only used for beforeActiveInstanceBlur.
+    // Let's skip the whole loop if it's off.
+    if (enableCreateEventHandleAPI) {
+      // 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);
+        }
       }
     }
 
@@ -426,16 +431,18 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
   const current = finishedWork.alternate;
   const flags = finishedWork.flags;
 
-  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.
-    if (
-      finishedWork.tag === SuspenseComponent &&
-      isSuspenseBoundaryBeingHidden(current, finishedWork) &&
-      doesFiberContain(finishedWork, focusedInstanceHandle)
-    ) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur(finishedWork);
+  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.
+      if (
+        finishedWork.tag === SuspenseComponent &&
+        isSuspenseBoundaryBeingHidden(current, finishedWork) &&
+        doesFiberContain(finishedWork, focusedInstanceHandle)
+      ) {
+        shouldFireAfterActiveInstanceBlur = true;
+        beforeActiveInstanceBlur(finishedWork);
+      }
     }
   }
 
@@ -531,13 +538,15 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
 }
 
 function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
-  // 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 (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);
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 63942e1a6936..98e8faebb0b8 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 
 import {
+  enableCreateEventHandleAPI,
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
@@ -365,12 +366,16 @@ function commitBeforeMutationEffects_begin() {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    // 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);
+    // This phase is only used for beforeActiveInstanceBlur.
+    // Let's skip the whole loop if it's off.
+    if (enableCreateEventHandleAPI) {
+      // 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);
+        }
       }
     }
 
@@ -426,16 +431,18 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
   const current = finishedWork.alternate;
   const flags = finishedWork.flags;
 
-  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.
-    if (
-      finishedWork.tag === SuspenseComponent &&
-      isSuspenseBoundaryBeingHidden(current, finishedWork) &&
-      doesFiberContain(finishedWork, focusedInstanceHandle)
-    ) {
-      shouldFireAfterActiveInstanceBlur = true;
-      beforeActiveInstanceBlur(finishedWork);
+  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.
+      if (
+        finishedWork.tag === SuspenseComponent &&
+        isSuspenseBoundaryBeingHidden(current, finishedWork) &&
+        doesFiberContain(finishedWork, focusedInstanceHandle)
+      ) {
+        shouldFireAfterActiveInstanceBlur = true;
+        beforeActiveInstanceBlur(finishedWork);
+      }
     }
   }
 
@@ -531,13 +538,15 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
 }
 
 function commitBeforeMutationEffectsDeletion(deletion: Fiber) {
-  // 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 (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);
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index af00bb022df8..105e43229bd3 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -19,6 +19,7 @@ import {
   warnAboutDeprecatedLifecycles,
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
+  enableCreateEventHandleAPI,
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
@@ -1854,8 +1855,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     // The next phase is the mutation phase, where we mutate the host tree.
     commitMutationEffects(root, finishedWork, lanes);
 
-    if (shouldFireAfterActiveInstanceBlur) {
-      afterActiveInstanceBlur();
+    if (enableCreateEventHandleAPI) {
+      if (shouldFireAfterActiveInstanceBlur) {
+        afterActiveInstanceBlur();
+      }
     }
     resetAfterCommit(root.containerInfo);
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 38b198644388..baff7e76b5e7 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -19,6 +19,7 @@ import {
   warnAboutDeprecatedLifecycles,
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
+  enableCreateEventHandleAPI,
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
@@ -1854,8 +1855,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     // The next phase is the mutation phase, where we mutate the host tree.
     commitMutationEffects(root, finishedWork, lanes);
 
-    if (shouldFireAfterActiveInstanceBlur) {
-      afterActiveInstanceBlur();
+    if (enableCreateEventHandleAPI) {
+      if (shouldFireAfterActiveInstanceBlur) {
+        afterActiveInstanceBlur();
+      }
     }
     resetAfterCommit(root.containerInfo);
 

From 101ea9f55cb4d5c671102bc49a45535af73c02b0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 14 Jun 2021 20:10:24 +0100
Subject: [PATCH 0618/1603] Set deletedTreeCleanUpLevel to 3 (#21679)

---
 packages/shared/ReactFeatureFlags.js                           | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-fb.js           | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-oss.js          | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.js       | 2 +-
 .../shared/forks/ReactFeatureFlags.test-renderer.native.js     | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js   | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.js             | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.www.js         | 2 +-
 packages/shared/forks/ReactFeatureFlags.www.js                 | 3 ++-
 9 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index d9ea72340c22..60efb97e4201 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -123,7 +123,7 @@ export const skipUnmountedBoundaries = false;
 //
 // It's an enum so that we can experiment with different levels of
 // aggressiveness.
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 
 // Destroy layout effects for components that are hidden because something suspended in an update
 // and recreate them when they are shown again (after the suspended boundary has resolved).
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 2fc1faa80ce7..a58e9e543895 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -46,7 +46,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 28bd6d0e07a3..1fc0969a3fa9 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -45,7 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 4dc6686c61ca..fe3abe658bdd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -45,7 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 600eb8015330..bdf3607a1ee8 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -45,7 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 506c778765a6..a4f209a6b9f3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -45,7 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 0556a6e49489..5c8baa8a1204 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -45,7 +45,7 @@ export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 06cc9bed8ffa..30cf572ddce2 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -45,7 +45,7 @@ export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = true;
-export const deletedTreeCleanUpLevel = 1;
+export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a5972151b79a..04abc20de646 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,7 +31,6 @@ export const {
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
   enableLazyContextPropagation,
-  deletedTreeCleanUpLevel,
   enableSyncDefaultUpdates,
 } = dynamicFeatureFlags;
 
@@ -95,6 +94,8 @@ export const enableRecursiveCommitTraversal = false;
 
 export const allowConcurrentByDefault = true;
 
+export const deletedTreeCleanUpLevel = 3;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From dbe3363ccd125f89c25fea234031410408f0df09 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 14 Jun 2021 15:54:30 -0400
Subject: [PATCH 0619/1603] [Fizz] Implement Legacy renderToString and
 renderToNodeStream on top of Fizz (#21276)

* Wire up DOM legacy build

* Hack to filter extra comments for testing purposes

* Use string concat in renderToString

I think this might be faster. We could probably use a combination of this
technique in the stream too to lower the overhead.

* Error if we can't complete the root synchronously

Maybe this should always error but in the async forms we can just delay
the stream until it resolves so it does have some useful semantics.

In the synchronous form it's never useful though. I'm mostly adding the
error because we're testing this behavior for renderToString specifically.

* Gate memory leak tests of internals

These tests don't translate as is to the new implementation and have been
ported to the Fizz tests separately.

* Enable Fizz legacy mode in stable

* Add wrapper around the ServerFormatConfig for legacy mode

This ensures that we can inject custom overrides without negatively
affecting the new implementation.

This adds another field for static mark up for example.

* Wrap pushTextInstance to avoid emitting comments for text in static markup

* Don't emit static mark up for completed suspense boundaries

Completed and client rendered boundaries are only marked for the client
to take over.

Pending boundaries are still supported in case you stream non-hydratable
mark up.

* Wire up generateStaticMarkup to static API entry points

* Mark as renderer for stable

This shouldn't affect the FB one ideally but it's done with the same build
so let's hope this works.
---
 .../ReactFlightClientHostConfig.dom-legacy.js |  12 ++
 .../react-dom/server.browser.classic.fb.js    |  16 ++
 packages/react-dom/server.browser.js          |   2 +-
 packages/react-dom/server.browser.stable.js   |  16 ++
 packages/react-dom/server.node.classic.fb.js  |  17 ++
 packages/react-dom/server.node.js             |   2 +-
 ...eactDOMServerIntegrationNewContext-test.js |   2 +
 .../src/server/ReactDOMLegacyServerBrowser.js | 127 ++++++++++++++
 .../src/server/ReactDOMLegacyServerNode.js    | 113 +++++++++++++
 .../ReactDOMLegacyServerStreamConfig.js       |  62 +++++++
 .../src/server/ReactDOMServerFormatConfig.js  |  37 ++++-
 .../ReactDOMServerLegacyFormatConfig.js       | 155 ++++++++++++++++++
 .../server/ReactNativeServerFormatConfig.js   |  20 ++-
 .../src/ReactNoopServer.js                    |  11 +-
 .../forks/ReactFiberHostConfig.dom-legacy.js  |  10 ++
 .../src/ReactServerStreamConfigFB.js          |   2 -
 packages/react-server/src/ReactFizzServer.js  |  42 ++++-
 .../src/ReactServerStreamConfigBrowser.js     |   2 -
 .../src/ReactServerStreamConfigNode.js        |   2 -
 .../ReactFlightServerConfig.dom-legacy.js     |  11 ++
 .../forks/ReactServerFormatConfig.custom.js   |   7 +-
 .../ReactServerFormatConfig.dom-legacy.js     |  10 ++
 .../ReactServerStreamConfig.dom-legacy.js     |  10 ++
 scripts/rollup/bundles.js                     |  14 +-
 scripts/shared/inlinedHostConfigs.js          |  18 ++
 25 files changed, 680 insertions(+), 40 deletions(-)
 create mode 100644 packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js
 create mode 100644 packages/react-dom/server.browser.classic.fb.js
 create mode 100644 packages/react-dom/server.browser.stable.js
 create mode 100644 packages/react-dom/server.node.classic.fb.js
 create mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
 create mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerNode.js
 create mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
 create mode 100644 packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
 create mode 100644 packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-legacy.js
 create mode 100644 packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
 create mode 100644 packages/react-server/src/forks/ReactServerFormatConfig.dom-legacy.js
 create mode 100644 packages/react-server/src/forks/ReactServerStreamConfig.dom-legacy.js

diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js
new file mode 100644
index 000000000000..59e1171c144e
--- /dev/null
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.dom-legacy.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-client/src/ReactFlightClientHostConfigBrowser';
+export * from 'react-client/src/ReactFlightClientHostConfigStream';
+export * from 'react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig';
diff --git a/packages/react-dom/server.browser.classic.fb.js b/packages/react-dom/server.browser.classic.fb.js
new file mode 100644
index 000000000000..c57063649a9f
--- /dev/null
+++ b/packages/react-dom/server.browser.classic.fb.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+} from './src/server/ReactDOMServerBrowser';
diff --git a/packages/react-dom/server.browser.js b/packages/react-dom/server.browser.js
index c57063649a9f..bd63acc8685f 100644
--- a/packages/react-dom/server.browser.js
+++ b/packages/react-dom/server.browser.js
@@ -13,4 +13,4 @@ export {
   renderToNodeStream,
   renderToStaticNodeStream,
   version,
-} from './src/server/ReactDOMServerBrowser';
+} from './src/server/ReactDOMLegacyServerBrowser';
diff --git a/packages/react-dom/server.browser.stable.js b/packages/react-dom/server.browser.stable.js
new file mode 100644
index 000000000000..c57063649a9f
--- /dev/null
+++ b/packages/react-dom/server.browser.stable.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+} from './src/server/ReactDOMServerBrowser';
diff --git a/packages/react-dom/server.node.classic.fb.js b/packages/react-dom/server.node.classic.fb.js
new file mode 100644
index 000000000000..e610a8818f96
--- /dev/null
+++ b/packages/react-dom/server.node.classic.fb.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// For some reason Flow doesn't like export * in this file. I don't know why.
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+} from './src/server/ReactDOMServerNode';
diff --git a/packages/react-dom/server.node.js b/packages/react-dom/server.node.js
index e610a8818f96..92b69c03bc34 100644
--- a/packages/react-dom/server.node.js
+++ b/packages/react-dom/server.node.js
@@ -14,4 +14,4 @@ export {
   renderToNodeStream,
   renderToStaticNodeStream,
   version,
-} from './src/server/ReactDOMServerNode';
+} from './src/server/ReactDOMLegacyServerNode';
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
index cbba19591045..601a42e72524 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -487,6 +487,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     // Regression test for https://github.com/facebook/react/issues/14705
+    // @gate !experimental && www
     it('does not pollute later renders when stream destroyed', () => {
       const LoggedInUser = React.createContext('default');
 
@@ -529,6 +530,7 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     // Regression test for https://github.com/facebook/react/issues/14705
+    // @gate !experimental && www
     it('frees context value reference when stream destroyed', () => {
       const LoggedInUser = React.createContext('default');
 
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
new file mode 100644
index 000000000000..4f0d61941761
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 ReactVersion from 'shared/ReactVersion';
+import invariant from 'shared/invariant';
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerLegacyFormatConfig';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+function onError() {
+  // Non-fatal errors are ignored.
+}
+
+function renderToStringImpl(
+  children: ReactNodeList,
+  options: void | ServerOptions,
+  generateStaticMarkup: boolean,
+): string {
+  let didFatal = false;
+  let fatalError = null;
+  let result = '';
+  const destination = {
+    push(chunk) {
+      if (chunk !== null) {
+        result += chunk;
+      }
+      return true;
+    },
+    destroy(error) {
+      didFatal = true;
+      fatalError = error;
+    },
+  };
+
+  let readyToStream = false;
+  function onReadyToStream() {
+    readyToStream = true;
+  }
+  const request = createRequest(
+    children,
+    destination,
+    createResponseState(
+      generateStaticMarkup,
+      options ? options.identifierPrefix : undefined,
+    ),
+    createRootFormatContext(undefined),
+    Infinity,
+    onError,
+    undefined,
+    onReadyToStream,
+  );
+  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);
+  startFlowing(request);
+  if (didFatal) {
+    throw fatalError;
+  }
+  invariant(
+    readyToStream,
+    'A React component suspended while rendering, but no fallback UI was specified.\n' +
+      '\n' +
+      'Add a <Suspense fallback=...> component higher in the tree to ' +
+      'provide a loading indicator or placeholder to display.',
+  );
+  return result;
+}
+
+function renderToString(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(children, options, false);
+}
+
+function renderToStaticMarkup(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(children, options, true);
+}
+
+function renderToNodeStream() {
+  invariant(
+    false,
+    'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
+      'in the browser. Use ReactDOMServer.renderToString() instead.',
+  );
+}
+
+function renderToStaticNodeStream() {
+  invariant(
+    false,
+    'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
+      'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
+  );
+}
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  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 000000000000..bc1e13220963
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -0,0 +1,113 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import type {Request} from 'react-server/src/ReactFizzServer';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerLegacyFormatConfig';
+
+import {
+  version,
+  renderToString,
+  renderToStaticMarkup,
+} from './ReactDOMLegacyServerBrowser';
+
+import {Readable} from 'stream';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+class ReactMarkupReadableStream extends Readable {
+  request: Request;
+  startedFlowing: boolean;
+  constructor() {
+    // Calls the stream.Readable(options) constructor. Consider exposing built-in
+    // features like highWaterMark in the future.
+    super({});
+    this.request = (null: any);
+    this.startedFlowing = false;
+  }
+
+  _destroy(err, callback) {
+    abort(this.request);
+    // $FlowFixMe: The type definition for the callback should allow undefined and null.
+    callback(err);
+  }
+
+  _read(size) {
+    if (this.startedFlowing) {
+      startFlowing(this.request);
+    }
+  }
+}
+
+function onError() {
+  // Non-fatal errors are ignored.
+}
+
+function renderToNodeStreamImpl(
+  children: ReactNodeList,
+  options: void | ServerOptions,
+  generateStaticMarkup: boolean,
+): Readable {
+  function onCompleteAll() {
+    // We wait until everything has loaded before starting to write.
+    // That way we only end up with fully resolved HTML even if we suspend.
+    destination.startedFlowing = true;
+    startFlowing(request);
+  }
+  const destination = new ReactMarkupReadableStream();
+  const request = createRequest(
+    children,
+    destination,
+    createResponseState(false, options ? options.identifierPrefix : undefined),
+    createRootFormatContext(undefined),
+    Infinity,
+    onError,
+    onCompleteAll,
+    undefined,
+  );
+  destination.request = request;
+  startWork(request);
+  return destination;
+}
+
+function renderToNodeStream(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): Readable {
+  return renderToNodeStreamImpl(children, options, false);
+}
+
+function renderToStaticNodeStream(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): Readable {
+  return renderToNodeStreamImpl(children, options, true);
+}
+
+export {
+  renderToString,
+  renderToStaticMarkup,
+  renderToNodeStream,
+  renderToStaticNodeStream,
+  version,
+};
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js b/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
new file mode 100644
index 000000000000..4cfe16091bc5
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type Destination = {
+  push(chunk: string | null): boolean,
+  destroy(error: Error): mixed,
+  ...
+};
+
+export type PrecomputedChunk = string;
+export type Chunk = string;
+
+export function scheduleWork(callback: () => void) {
+  callback();
+}
+
+export function flushBuffered(destination: Destination) {}
+
+export function beginWriting(destination: Destination) {}
+
+let prevWasCommentSegmenter = false;
+export function writeChunk(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk,
+): boolean {
+  if (prevWasCommentSegmenter) {
+    prevWasCommentSegmenter = false;
+    if (chunk[0] !== '<') {
+      destination.push('<!-- -->');
+    }
+  }
+  if (chunk === '<!-- -->') {
+    prevWasCommentSegmenter = true;
+    return true;
+  }
+  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 closeWithError(destination: Destination, error: mixed): void {
+  // $FlowFixMe: This is an Error object or the destination accepts other types.
+  destination.destroy(error);
+}
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 7d705a6abe1d..6dfa245ae4bd 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -23,7 +23,6 @@ import {
   writeChunk,
   stringToChunk,
   stringToPrecomputedChunk,
-  isPrimaryStreamConfig,
 } from 'react-server/src/ReactServerStreamConfig';
 
 import {
@@ -51,7 +50,7 @@ import isArray from 'shared/isArray';
 
 // 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 = isPrimaryStreamConfig;
+export const isPrimaryRenderer = true;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
@@ -63,18 +62,20 @@ export type ResponseState = {
   nextOpaqueID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
-  sentClientRenderFunction: boolean,
+  sentClientRenderFunction: boolean, // We allow the legacy renderer to extend this object.
+  ...
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
-  identifierPrefix: string = '',
+  identifierPrefix: string | void,
 ): ResponseState {
+  const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
   return {
-    placeholderPrefix: stringToPrecomputedChunk(identifierPrefix + 'P:'),
-    segmentPrefix: stringToPrecomputedChunk(identifierPrefix + 'S:'),
-    boundaryPrefix: identifierPrefix + 'B:',
-    opaqueIdentifierPrefix: identifierPrefix + 'R:',
+    placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
+    segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
+    boundaryPrefix: idPrefix + 'B:',
+    opaqueIdentifierPrefix: idPrefix + 'R:',
     nextSuspenseID: 0,
     nextOpaqueID: 0,
     sentCompleteSegmentFunction: false,
@@ -1459,23 +1460,41 @@ const endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
 
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
+  responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
   return writeChunk(destination, startCompletedSuspenseBoundary);
 }
 export function writeStartPendingSuspenseBoundary(
   destination: Destination,
+  responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
   return writeChunk(destination, startPendingSuspenseBoundary);
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
+  responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
   return writeChunk(destination, startClientRenderedSuspenseBoundary);
 }
-export function writeEndSuspenseBoundary(destination: Destination): boolean {
+export function writeEndCompletedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  return writeChunk(destination, endSuspenseBoundary);
+}
+export function writeEndPendingSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  return writeChunk(destination, endSuspenseBoundary);
+}
+export function writeEndClientRenderedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
   return writeChunk(destination, endSuspenseBoundary);
 }
 
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
new file mode 100644
index 000000000000..dbca4b43ab03
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -0,0 +1,155 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {SuspenseBoundaryID} from './ReactDOMServerFormatConfig';
+
+import {
+  createResponseState as createResponseStateImpl,
+  pushTextInstance as pushTextInstanceImpl,
+  writeStartCompletedSuspenseBoundary as writeStartCompletedSuspenseBoundaryImpl,
+  writeStartClientRenderedSuspenseBoundary as writeStartClientRenderedSuspenseBoundaryImpl,
+  writeEndCompletedSuspenseBoundary as writeEndCompletedSuspenseBoundaryImpl,
+  writeEndClientRenderedSuspenseBoundary as writeEndClientRenderedSuspenseBoundaryImpl,
+} from './ReactDOMServerFormatConfig';
+
+import type {
+  Destination,
+  Chunk,
+  PrecomputedChunk,
+} from 'react-server/src/ReactServerStreamConfig';
+
+export const isPrimaryRenderer = false;
+
+export type ResponseState = {
+  // Keep this in sync with ReactDOMServerFormatConfig
+  placeholderPrefix: PrecomputedChunk,
+  segmentPrefix: PrecomputedChunk,
+  boundaryPrefix: string,
+  opaqueIdentifierPrefix: string,
+  nextSuspenseID: number,
+  nextOpaqueID: number,
+  sentCompleteSegmentFunction: boolean,
+  sentCompleteBoundaryFunction: boolean,
+  sentClientRenderFunction: boolean,
+  // This is an extra field for the legacy renderer
+  generateStaticMarkup: boolean,
+};
+
+export function createResponseState(
+  generateStaticMarkup: boolean,
+  identifierPrefix: string | void,
+): ResponseState {
+  const responseState = createResponseStateImpl(identifierPrefix);
+  return {
+    // Keep this in sync with ReactDOMServerFormatConfig
+    placeholderPrefix: responseState.placeholderPrefix,
+    segmentPrefix: responseState.segmentPrefix,
+    boundaryPrefix: responseState.boundaryPrefix,
+    opaqueIdentifierPrefix: responseState.opaqueIdentifierPrefix,
+    nextSuspenseID: responseState.nextSuspenseID,
+    nextOpaqueID: responseState.nextOpaqueID,
+    sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
+    sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
+    sentClientRenderFunction: responseState.sentClientRenderFunction,
+    // This is an extra field for the legacy renderer
+    generateStaticMarkup,
+  };
+}
+
+export type {
+  FormatContext,
+  SuspenseBoundaryID,
+  OpaqueIDType,
+} from './ReactDOMServerFormatConfig';
+
+export {
+  createRootFormatContext,
+  getChildFormatContext,
+  createSuspenseBoundaryID,
+  makeServerID,
+  pushEmpty,
+  pushStartInstance,
+  pushEndInstance,
+  writeStartSegment,
+  writeEndSegment,
+  writeCompletedSegmentInstruction,
+  writeCompletedBoundaryInstruction,
+  writeClientRenderBoundaryInstruction,
+  writeStartPendingSuspenseBoundary,
+  writeEndPendingSuspenseBoundary,
+  writePlaceholder,
+} from './ReactDOMServerFormatConfig';
+
+import {stringToChunk} from 'react-server/src/ReactServerStreamConfig';
+
+import escapeTextForBrowser from './escapeTextForBrowser';
+
+export function pushTextInstance(
+  target: Array<Chunk | PrecomputedChunk>,
+  text: string,
+  responseState: ResponseState,
+  assignID: null | SuspenseBoundaryID,
+): void {
+  if (responseState.generateStaticMarkup) {
+    target.push(stringToChunk(escapeTextForBrowser(text)));
+  } else {
+    pushTextInstanceImpl(target, text, responseState, assignID);
+  }
+}
+
+export function writeStartCompletedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+  id: SuspenseBoundaryID,
+): boolean {
+  if (responseState.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,
+    responseState,
+    id,
+  );
+}
+export function writeStartClientRenderedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+  id: SuspenseBoundaryID,
+): boolean {
+  if (responseState.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,
+    responseState,
+    id,
+  );
+}
+export function writeEndCompletedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  if (responseState.generateStaticMarkup) {
+    return true;
+  }
+  return writeEndCompletedSuspenseBoundaryImpl(destination, responseState);
+}
+export function writeEndClientRenderedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  if (responseState.generateStaticMarkup) {
+    return true;
+  }
+  return writeEndClientRenderedSuspenseBoundaryImpl(destination, responseState);
+}
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 98779768f486..9f7501007ed8 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -203,6 +203,7 @@ export function writePlaceholder(
 // Suspense boundaries are encoded as comments.
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
+  responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, SUSPENSE_COMPLETE);
@@ -210,6 +211,7 @@ export function writeStartCompletedSuspenseBoundary(
 }
 export function writeStartPendingSuspenseBoundary(
   destination: Destination,
+  responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, SUSPENSE_PENDING);
@@ -217,12 +219,28 @@ export function writeStartPendingSuspenseBoundary(
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
+  responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, SUSPENSE_CLIENT_RENDER);
   return writeChunk(destination, formatID(id));
 }
-export function writeEndSuspenseBoundary(destination: Destination): boolean {
+export function writeEndCompletedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  return writeChunk(destination, END);
+}
+export function writeEndPendingSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  return writeChunk(destination, END);
+}
+export function writeEndClientRenderedSuspenseBoundary(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
   return writeChunk(destination, END);
 }
 
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 5a8ff56d6ce2..e183a8ce7190 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -138,6 +138,7 @@ const ReactNoopServer = ReactFizzServer({
 
   writeStartCompletedSuspenseBoundary(
     destination: Destination,
+    responseState: ResponseState,
     suspenseInstance: SuspenseInstance,
   ): boolean {
     suspenseInstance.state = 'complete';
@@ -147,6 +148,7 @@ const ReactNoopServer = ReactFizzServer({
   },
   writeStartPendingSuspenseBoundary(
     destination: Destination,
+    responseState: ResponseState,
     suspenseInstance: SuspenseInstance,
   ): boolean {
     suspenseInstance.state = 'pending';
@@ -156,6 +158,7 @@ const ReactNoopServer = ReactFizzServer({
   },
   writeStartClientRenderedSuspenseBoundary(
     destination: Destination,
+    responseState: ResponseState,
     suspenseInstance: SuspenseInstance,
   ): boolean {
     suspenseInstance.state = 'client-render';
@@ -163,7 +166,13 @@ const ReactNoopServer = ReactFizzServer({
     parent.children.push(suspenseInstance);
     destination.stack.push(suspenseInstance);
   },
-  writeEndSuspenseBoundary(destination: Destination): boolean {
+  writeEndCompletedSuspenseBoundary(destination: Destination): boolean {
+    destination.stack.pop();
+  },
+  writeEndPendingSuspenseBoundary(destination: Destination): boolean {
+    destination.stack.pop();
+  },
+  writeEndClientRenderedSuspenseBoundary(destination: Destination): boolean {
     destination.stack.pop();
   },
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-legacy.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-legacy.js
new file mode 100644
index 000000000000..d830c8501be2
--- /dev/null
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.dom-legacy.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/client/ReactDOMHostConfig';
diff --git a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
index b13e5f379260..e0477fd6197e 100644
--- a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
+++ b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
@@ -17,8 +17,6 @@ export type Destination = {
 export type PrecomputedChunk = string;
 export type Chunk = string;
 
-export const isPrimaryStreamConfig = true;
-
 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/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 927aef27f4a7..411eaf7618c6 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -40,7 +40,9 @@ import {
   writeStartCompletedSuspenseBoundary,
   writeStartPendingSuspenseBoundary,
   writeStartClientRenderedSuspenseBoundary,
-  writeEndSuspenseBoundary,
+  writeEndCompletedSuspenseBoundary,
+  writeEndPendingSuspenseBoundary,
+  writeEndClientRenderedSuspenseBoundary,
   writeStartSegment,
   writeEndSegment,
   writeClientRenderBoundaryInstruction,
@@ -1609,12 +1611,19 @@ function flushSegment(
     // Emit a client rendered suspense boundary wrapper.
     // We never queue the inner boundary so we'll never emit its content or partial segments.
 
-    writeStartClientRenderedSuspenseBoundary(destination, boundary.id);
+    writeStartClientRenderedSuspenseBoundary(
+      destination,
+      request.responseState,
+      boundary.id,
+    );
 
     // Flush the fallback.
     flushSubtree(request, destination, segment);
 
-    return writeEndSuspenseBoundary(destination);
+    return writeEndClientRenderedSuspenseBoundary(
+      destination,
+      request.responseState,
+    );
   } else if (boundary.pendingTasks > 0) {
     // This boundary is still loading. Emit a pending suspense boundary wrapper.
 
@@ -1625,12 +1634,16 @@ function flushSegment(
       request.partialBoundaries.push(boundary);
     }
 
-    writeStartPendingSuspenseBoundary(destination, boundary.id);
+    writeStartPendingSuspenseBoundary(
+      destination,
+      request.responseState,
+      boundary.id,
+    );
 
     // Flush the fallback.
     flushSubtree(request, destination, segment);
 
-    return writeEndSuspenseBoundary(destination);
+    return writeEndPendingSuspenseBoundary(destination, request.responseState);
   } else if (boundary.byteSize > request.progressiveChunkSize) {
     // This boundary is large and 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
@@ -1643,16 +1656,24 @@ function flushSegment(
 
     request.completedBoundaries.push(boundary);
     // Emit a pending rendered suspense boundary wrapper.
-    writeStartPendingSuspenseBoundary(destination, boundary.id);
+    writeStartPendingSuspenseBoundary(
+      destination,
+      request.responseState,
+      boundary.id,
+    );
 
     // Flush the fallback.
     flushSubtree(request, destination, segment);
 
-    return writeEndSuspenseBoundary(destination);
+    return writeEndPendingSuspenseBoundary(destination, request.responseState);
   } else {
     // We can inline this boundary's content as a complete boundary.
 
-    writeStartCompletedSuspenseBoundary(destination, boundary.id);
+    writeStartCompletedSuspenseBoundary(
+      destination,
+      request.responseState,
+      boundary.id,
+    );
 
     const completedSegments = boundary.completedSegments;
     invariant(
@@ -1662,7 +1683,10 @@ function flushSegment(
     const contentSegment = completedSegments[0];
     flushSegment(request, destination, contentSegment);
 
-    return writeEndSuspenseBoundary(destination);
+    return writeEndCompletedSuspenseBoundary(
+      destination,
+      request.responseState,
+    );
   }
 }
 
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index b669002aff77..3714be430276 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -12,8 +12,6 @@ export type Destination = ReadableStreamController;
 export type PrecomputedChunk = Uint8Array;
 export type Chunk = Uint8Array;
 
-export const isPrimaryStreamConfig = true;
-
 export function scheduleWork(callback: () => void) {
   callback();
 }
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index 58ce127ba965..348deb760503 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -19,8 +19,6 @@ export type Destination = Writable & MightBeFlushable;
 export type PrecomputedChunk = Uint8Array;
 export type Chunk = string;
 
-export const isPrimaryStreamConfig = true;
-
 export function scheduleWork(callback: () => void) {
   setImmediate(callback);
 }
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 000000000000..07b5f345f193
--- /dev/null
+++ b/packages/react-server/src/forks/ReactFlightServerConfig.dom-legacy.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from '../ReactFlightServerConfigStream';
+export * from 'react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig';
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 7296697cc9c8..5458a4f50a9d 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -46,7 +46,12 @@ export const writeStartPendingSuspenseBoundary =
   $$$hostConfig.writeStartPendingSuspenseBoundary;
 export const writeStartClientRenderedSuspenseBoundary =
   $$$hostConfig.writeStartClientRenderedSuspenseBoundary;
-export const writeEndSuspenseBoundary = $$$hostConfig.writeEndSuspenseBoundary;
+export const writeEndCompletedSuspenseBoundary =
+  $$$hostConfig.writeEndCompletedSuspenseBoundary;
+export const writeEndPendingSuspenseBoundary =
+  $$$hostConfig.writeEndPendingSuspenseBoundary;
+export const writeEndClientRenderedSuspenseBoundary =
+  $$$hostConfig.writeEndClientRenderedSuspenseBoundary;
 export const writeStartSegment = $$$hostConfig.writeStartSegment;
 export const writeEndSegment = $$$hostConfig.writeEndSegment;
 export const writeCompletedSegmentInstruction =
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.dom-legacy.js b/packages/react-server/src/forks/ReactServerFormatConfig.dom-legacy.js
new file mode 100644
index 000000000000..acbac5042b62
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.dom-legacy.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/server/ReactDOMServerLegacyFormatConfig';
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 000000000000..160efd5a92b2
--- /dev/null
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.dom-legacy.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from 'react-dom/src/server/ReactDOMLegacyServerStreamConfig';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 12302671c00e..9823df3142f2 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -56,17 +56,9 @@ const moduleTypes = {
   RENDERER_UTILS: 'RENDERER_UTILS',
   // Standalone reconciler for third-party renderers.
   RECONCILER: 'RECONCILER',
-  // Non-Fiber implementations like SSR and Shallow renderers.
-  NON_FIBER_RENDERER: 'NON_FIBER_RENDERER',
 };
 
-const {
-  ISOMORPHIC,
-  RENDERER,
-  RENDERER_UTILS,
-  RECONCILER,
-  NON_FIBER_RENDERER,
-} = moduleTypes;
+const {ISOMORPHIC, RENDERER, RENDERER_UTILS, RECONCILER} = moduleTypes;
 
 const bundles = [
   /******* Isomorphic *******/
@@ -241,7 +233,7 @@ const bundles = [
     bundleTypes: __EXPERIMENTAL__
       ? [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD]
       : [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
-    moduleType: NON_FIBER_RENDERER,
+    moduleType: RENDERER,
     entry: 'react-dom/server.browser',
     global: 'ReactDOMServer',
     externals: ['react'],
@@ -254,7 +246,7 @@ const bundles = [
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
-    moduleType: NON_FIBER_RENDERER,
+    moduleType: RENDERER,
     entry: 'react-dom/server.node',
     externals: ['react', 'stream'],
     babel: opts =>
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index eef4d1fa9a0e..146bc4d64ffe 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -20,6 +20,7 @@ module.exports = [
       'react-dom',
       'react-dom/unstable-fizz',
       'react-dom/unstable-fizz.node',
+      'react-dom/server.node.stable',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/unstable-fizz.node
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer',
@@ -44,6 +45,7 @@ module.exports = [
       'react-dom',
       'react-dom/testing',
       'react-dom/unstable-fizz.browser',
+      'react-dom/server.browser.stable',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/unstable-fizz.browser
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',
@@ -53,6 +55,22 @@ module.exports = [
     isFlowTyped: true,
     isServerSupported: true,
   },
+  {
+    shortName: 'dom-legacy',
+    entryPoints: ['react-dom/server.browser', 'react-dom/server.node'],
+    paths: [
+      'react-dom',
+      'react-dom/server',
+      'react-dom/server.browser',
+      'react-dom/server.node',
+      'react-server-dom-webpack',
+      'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
+      'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node
+      'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+    ],
+    isFlowTyped: true,
+    isServerSupported: true,
+  },
   {
     shortName: 'art',
     entryPoints: ['react-art'],

From a8f5e77b921c890c215fb1c7e24a06f38598deb1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 14 Jun 2021 21:45:53 +0100
Subject: [PATCH 0620/1603] Remove invokeGuardedCallback from commit phase
 (#21666)

* Remove invokeGuardedCallback from commit phase

* Sync fork
---
 .../react-dom/src/__tests__/ReactDOM-test.js  |  43 ---
 .../src/ReactFiberCommitWork.new.js           | 350 +++++-------------
 .../src/ReactFiberCommitWork.old.js           | 350 +++++-------------
 .../__tests__/ReactSuspenseCallback-test.js   |  65 ----
 4 files changed, 172 insertions(+), 636 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOM-test.js b/packages/react-dom/src/__tests__/ReactDOM-test.js
index 6c3de6978046..4c46eb7d0da9 100644
--- a/packages/react-dom/src/__tests__/ReactDOM-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOM-test.js
@@ -408,49 +408,6 @@ describe('ReactDOM', () => {
     }
   });
 
-  it('throws in DEV if jsdom is destroyed by the time setState() is called', () => {
-    class App extends React.Component {
-      state = {x: 1};
-      componentDidUpdate() {}
-      render() {
-        return <div />;
-      }
-    }
-    const container = document.createElement('div');
-    const instance = ReactDOM.render(<App />, container);
-    const documentDescriptor = Object.getOwnPropertyDescriptor(
-      global,
-      'document',
-    );
-    try {
-      // Emulate jsdom environment cleanup.
-      // This is roughly what happens if the test finished and then
-      // an asynchronous callback tried to setState() after this.
-      delete global.document;
-
-      // The error we're interested in is thrown by invokeGuardedCallback, which
-      // in DEV is used 1) to replay a failed begin phase, or 2) when calling
-      // lifecycle methods. We're triggering the second case here.
-      const fn = () => instance.setState({x: 2});
-      if (__DEV__) {
-        expect(fn).toThrow(
-          '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.',
-        );
-      } else {
-        expect(fn).not.toThrow();
-      }
-    } finally {
-      // Don't break other tests.
-      Object.defineProperty(global, 'document', documentDescriptor);
-    }
-  });
-
   it('reports stacks with re-entrant renderToString() calls on the client', () => {
     function Child2(props) {
       return <span ariaTypo3="no">{props.children}</span>;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 37c9bbcda79d..e31ed8577938 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -57,11 +57,6 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
-import {
-  invokeGuardedCallback,
-  hasCaughtError,
-  clearCaughtError,
-} from 'shared/ReactErrorUtils';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
   NoFlags,
@@ -189,24 +184,10 @@ function safelyCallCommitHookLayoutEffectListMount(
   current: Fiber,
   nearestMountedAncestor: Fiber | null,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(
-      null,
-      commitHookEffectListMount,
-      null,
-      HookLayout,
-      current,
-    );
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      commitHookEffectListMount(HookLayout, current);
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    commitHookEffectListMount(HookLayout, current);
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
@@ -216,24 +197,10 @@ function safelyCallComponentWillUnmount(
   nearestMountedAncestor: Fiber | null,
   instance: any,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(
-      null,
-      callComponentWillUnmountWithTimer,
-      null,
-      current,
-      instance,
-    );
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      callComponentWillUnmountWithTimer(current, instance);
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    callComponentWillUnmountWithTimer(current, instance);
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
@@ -243,35 +210,19 @@ function safelyCallComponentDidMount(
   nearestMountedAncestor: Fiber | null,
   instance: any,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(null, instance.componentDidMount, instance);
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      instance.componentDidMount();
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    instance.componentDidMount();
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
 // Capture errors so they don't interrupt mounting.
 function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
-  if (__DEV__) {
-    invokeGuardedCallback(null, commitAttachRef, null, current);
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      commitAttachRef(current);
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    commitAttachRef(current);
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
@@ -279,42 +230,23 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
     if (typeof ref === 'function') {
-      if (__DEV__) {
+      try {
         if (
           enableProfilerTimer &&
           enableProfilerCommitHooks &&
           current.mode & ProfileMode
         ) {
-          startLayoutEffectTimer();
-          invokeGuardedCallback(null, ref, null, null);
-          recordLayoutEffectDuration(current);
-        } else {
-          invokeGuardedCallback(null, ref, null, null);
-        }
-
-        if (hasCaughtError()) {
-          const refError = clearCaughtError();
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
-        }
-      } else {
-        try {
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            current.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              ref(null);
-            } finally {
-              recordLayoutEffectDuration(current);
-            }
-          } else {
+          try {
+            startLayoutEffectTimer();
             ref(null);
+          } finally {
+            recordLayoutEffectDuration(current);
           }
-        } catch (refError) {
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
+        } else {
+          ref(null);
         }
+      } catch (error) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
     } else {
       ref.current = null;
@@ -327,18 +259,10 @@ function safelyCallDestroy(
   nearestMountedAncestor: Fiber | null,
   destroy: () => void,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(null, destroy, null);
-    if (hasCaughtError()) {
-      const error = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
-    }
-  } else {
-    try {
-      destroy();
-    } catch (error) {
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
-    }
+  try {
+    destroy();
+  } catch (error) {
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -395,26 +319,13 @@ function commitBeforeMutationEffects_begin() {
 function commitBeforeMutationEffects_complete() {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitBeforeMutationEffectsOnFiber,
-        null,
-        fiber,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitBeforeMutationEffectsOnFiber(fiber);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      commitBeforeMutationEffectsOnFiber(fiber);
+    } catch (error) {
+      captureCommitPhaseError(fiber, fiber.return, error);
     }
+    resetCurrentDebugFiberInDEV();
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
@@ -2151,25 +2062,10 @@ function commitMutationEffects_begin(root: FiberRoot) {
     if (deletions !== null) {
       for (let i = 0; i < deletions.length; i++) {
         const childToDelete = deletions[i];
-        if (__DEV__) {
-          invokeGuardedCallback(
-            null,
-            commitDeletion,
-            null,
-            root,
-            childToDelete,
-            fiber,
-          );
-          if (hasCaughtError()) {
-            const error = clearCaughtError();
-            captureCommitPhaseError(childToDelete, fiber, error);
-          }
-        } else {
-          try {
-            commitDeletion(root, childToDelete, fiber);
-          } catch (error) {
-            captureCommitPhaseError(childToDelete, fiber, error);
-          }
+        try {
+          commitDeletion(root, childToDelete, fiber);
+        } catch (error) {
+          captureCommitPhaseError(childToDelete, fiber, error);
         }
       }
     }
@@ -2187,27 +2083,13 @@ function commitMutationEffects_begin(root: FiberRoot) {
 function commitMutationEffects_complete(root: FiberRoot) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitMutationEffectsOnFiber,
-        null,
-        fiber,
-        root,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitMutationEffectsOnFiber(fiber, root);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      commitMutationEffectsOnFiber(fiber, root);
+    } catch (error) {
+      captureCommitPhaseError(fiber, fiber.return, error);
     }
+    resetCurrentDebugFiberInDEV();
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
@@ -2444,29 +2326,13 @@ function commitLayoutMountEffects_complete(
       }
     } else if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitLayoutEffectOnFiber,
-          null,
-          root,
-          current,
-          fiber,
-          committedLanes,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
+      setCurrentDebugFiberInDEV(fiber);
+      try {
+        commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
+      resetCurrentDebugFiberInDEV();
     }
 
     if (fiber === subtreeRoot) {
@@ -2513,27 +2379,13 @@ function commitPassiveMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
     if ((fiber.flags & Passive) !== NoFlags) {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitPassiveMountOnFiber,
-          null,
-          root,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitPassiveMountOnFiber(root, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
+      setCurrentDebugFiberInDEV(fiber);
+      try {
+        commitPassiveMountOnFiber(root, fiber);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
+      resetCurrentDebugFiberInDEV();
     }
 
     if (fiber === subtreeRoot) {
@@ -2810,25 +2662,19 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+        try {
+          commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
       case ClassComponent: {
         const instance = fiber.stateNode;
-        invokeGuardedCallback(null, instance.componentDidMount, instance);
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+        try {
+          instance.componentDidMount();
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
@@ -2844,16 +2690,10 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+        try {
+          commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
@@ -2869,35 +2709,21 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-          fiber.return,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, unmountError);
+        try {
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            fiber,
+            fiber.return,
+          );
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
       case ClassComponent: {
         const instance = fiber.stateNode;
         if (typeof instance.componentWillUnmount === 'function') {
-          invokeGuardedCallback(
-            null,
-            safelyCallComponentWillUnmount,
-            null,
-            fiber,
-            fiber.return,
-            instance,
-          );
-          if (hasCaughtError()) {
-            const unmountError = clearCaughtError();
-            captureCommitPhaseError(fiber, fiber.return, unmountError);
-          }
+          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
         }
         break;
       }
@@ -2913,19 +2739,15 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-          fiber.return,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, unmountError);
+        try {
+          commitHookEffectListUnmount(
+            HookPassive | HookHasEffect,
+            fiber,
+            fiber.return,
+          );
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
-        break;
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 98e8faebb0b8..4dc06f6f4f7d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -57,11 +57,6 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
 } from './ReactWorkTags';
-import {
-  invokeGuardedCallback,
-  hasCaughtError,
-  clearCaughtError,
-} from 'shared/ReactErrorUtils';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
   NoFlags,
@@ -189,24 +184,10 @@ function safelyCallCommitHookLayoutEffectListMount(
   current: Fiber,
   nearestMountedAncestor: Fiber | null,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(
-      null,
-      commitHookEffectListMount,
-      null,
-      HookLayout,
-      current,
-    );
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      commitHookEffectListMount(HookLayout, current);
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    commitHookEffectListMount(HookLayout, current);
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
@@ -216,24 +197,10 @@ function safelyCallComponentWillUnmount(
   nearestMountedAncestor: Fiber | null,
   instance: any,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(
-      null,
-      callComponentWillUnmountWithTimer,
-      null,
-      current,
-      instance,
-    );
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      callComponentWillUnmountWithTimer(current, instance);
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    callComponentWillUnmountWithTimer(current, instance);
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
@@ -243,35 +210,19 @@ function safelyCallComponentDidMount(
   nearestMountedAncestor: Fiber | null,
   instance: any,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(null, instance.componentDidMount, instance);
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      instance.componentDidMount();
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    instance.componentDidMount();
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
 // Capture errors so they don't interrupt mounting.
 function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
-  if (__DEV__) {
-    invokeGuardedCallback(null, commitAttachRef, null, current);
-    if (hasCaughtError()) {
-      const unmountError = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
-  } else {
-    try {
-      commitAttachRef(current);
-    } catch (unmountError) {
-      captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
-    }
+  try {
+    commitAttachRef(current);
+  } catch (unmountError) {
+    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
   }
 }
 
@@ -279,42 +230,23 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
     if (typeof ref === 'function') {
-      if (__DEV__) {
+      try {
         if (
           enableProfilerTimer &&
           enableProfilerCommitHooks &&
           current.mode & ProfileMode
         ) {
-          startLayoutEffectTimer();
-          invokeGuardedCallback(null, ref, null, null);
-          recordLayoutEffectDuration(current);
-        } else {
-          invokeGuardedCallback(null, ref, null, null);
-        }
-
-        if (hasCaughtError()) {
-          const refError = clearCaughtError();
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
-        }
-      } else {
-        try {
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            current.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              ref(null);
-            } finally {
-              recordLayoutEffectDuration(current);
-            }
-          } else {
+          try {
+            startLayoutEffectTimer();
             ref(null);
+          } finally {
+            recordLayoutEffectDuration(current);
           }
-        } catch (refError) {
-          captureCommitPhaseError(current, nearestMountedAncestor, refError);
+        } else {
+          ref(null);
         }
+      } catch (error) {
+        captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
     } else {
       ref.current = null;
@@ -327,18 +259,10 @@ function safelyCallDestroy(
   nearestMountedAncestor: Fiber | null,
   destroy: () => void,
 ) {
-  if (__DEV__) {
-    invokeGuardedCallback(null, destroy, null);
-    if (hasCaughtError()) {
-      const error = clearCaughtError();
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
-    }
-  } else {
-    try {
-      destroy();
-    } catch (error) {
-      captureCommitPhaseError(current, nearestMountedAncestor, error);
-    }
+  try {
+    destroy();
+  } catch (error) {
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -395,26 +319,13 @@ function commitBeforeMutationEffects_begin() {
 function commitBeforeMutationEffects_complete() {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitBeforeMutationEffectsOnFiber,
-        null,
-        fiber,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitBeforeMutationEffectsOnFiber(fiber);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      commitBeforeMutationEffectsOnFiber(fiber);
+    } catch (error) {
+      captureCommitPhaseError(fiber, fiber.return, error);
     }
+    resetCurrentDebugFiberInDEV();
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
@@ -2151,25 +2062,10 @@ function commitMutationEffects_begin(root: FiberRoot) {
     if (deletions !== null) {
       for (let i = 0; i < deletions.length; i++) {
         const childToDelete = deletions[i];
-        if (__DEV__) {
-          invokeGuardedCallback(
-            null,
-            commitDeletion,
-            null,
-            root,
-            childToDelete,
-            fiber,
-          );
-          if (hasCaughtError()) {
-            const error = clearCaughtError();
-            captureCommitPhaseError(childToDelete, fiber, error);
-          }
-        } else {
-          try {
-            commitDeletion(root, childToDelete, fiber);
-          } catch (error) {
-            captureCommitPhaseError(childToDelete, fiber, error);
-          }
+        try {
+          commitDeletion(root, childToDelete, fiber);
+        } catch (error) {
+          captureCommitPhaseError(childToDelete, fiber, error);
         }
       }
     }
@@ -2187,27 +2083,13 @@ function commitMutationEffects_begin(root: FiberRoot) {
 function commitMutationEffects_complete(root: FiberRoot) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
-    if (__DEV__) {
-      setCurrentDebugFiberInDEV(fiber);
-      invokeGuardedCallback(
-        null,
-        commitMutationEffectsOnFiber,
-        null,
-        fiber,
-        root,
-      );
-      if (hasCaughtError()) {
-        const error = clearCaughtError();
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
-    } else {
-      try {
-        commitMutationEffectsOnFiber(fiber, root);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      commitMutationEffectsOnFiber(fiber, root);
+    } catch (error) {
+      captureCommitPhaseError(fiber, fiber.return, error);
     }
+    resetCurrentDebugFiberInDEV();
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
@@ -2444,29 +2326,13 @@ function commitLayoutMountEffects_complete(
       }
     } else if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitLayoutEffectOnFiber,
-          null,
-          root,
-          current,
-          fiber,
-          committedLanes,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
+      setCurrentDebugFiberInDEV(fiber);
+      try {
+        commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
+      resetCurrentDebugFiberInDEV();
     }
 
     if (fiber === subtreeRoot) {
@@ -2513,27 +2379,13 @@ function commitPassiveMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
     if ((fiber.flags & Passive) !== NoFlags) {
-      if (__DEV__) {
-        setCurrentDebugFiberInDEV(fiber);
-        invokeGuardedCallback(
-          null,
-          commitPassiveMountOnFiber,
-          null,
-          root,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const error = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        resetCurrentDebugFiberInDEV();
-      } else {
-        try {
-          commitPassiveMountOnFiber(root, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
+      setCurrentDebugFiberInDEV(fiber);
+      try {
+        commitPassiveMountOnFiber(root, fiber);
+      } catch (error) {
+        captureCommitPhaseError(fiber, fiber.return, error);
       }
+      resetCurrentDebugFiberInDEV();
     }
 
     if (fiber === subtreeRoot) {
@@ -2810,25 +2662,19 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+        try {
+          commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
       case ClassComponent: {
         const instance = fiber.stateNode;
-        invokeGuardedCallback(null, instance.componentDidMount, instance);
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+        try {
+          instance.componentDidMount();
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
@@ -2844,16 +2690,10 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListMount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-        );
-        if (hasCaughtError()) {
-          const mountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, mountError);
+        try {
+          commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
@@ -2869,35 +2709,21 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookLayout | HookHasEffect,
-          fiber,
-          fiber.return,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, unmountError);
+        try {
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            fiber,
+            fiber.return,
+          );
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
       }
       case ClassComponent: {
         const instance = fiber.stateNode;
         if (typeof instance.componentWillUnmount === 'function') {
-          invokeGuardedCallback(
-            null,
-            safelyCallComponentWillUnmount,
-            null,
-            fiber,
-            fiber.return,
-            instance,
-          );
-          if (hasCaughtError()) {
-            const unmountError = clearCaughtError();
-            captureCommitPhaseError(fiber, fiber.return, unmountError);
-          }
+          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
         }
         break;
       }
@@ -2913,19 +2739,15 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        invokeGuardedCallback(
-          null,
-          commitHookEffectListUnmount,
-          null,
-          HookPassive | HookHasEffect,
-          fiber,
-          fiber.return,
-        );
-        if (hasCaughtError()) {
-          const unmountError = clearCaughtError();
-          captureCommitPhaseError(fiber, fiber.return, unmountError);
+        try {
+          commitHookEffectListUnmount(
+            HookPassive | HookHasEffect,
+            fiber,
+            fiber.return,
+          );
+        } catch (error) {
+          captureCommitPhaseError(fiber, fiber.return, error);
         }
-        break;
       }
     }
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
index 38f32c9f494d..1157bb27ebd7 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseCallback-test.js
@@ -244,69 +244,4 @@ describe('ReactSuspense', () => {
     expect(ops1).toEqual([]);
     expect(ops2).toEqual([]);
   });
-
-  if (__DEV__) {
-    // @gate www
-    it('regression test for #16215 that relies on implementation details', async () => {
-      // Regression test for https://github.com/facebook/react/pull/16215.
-      // The bug only happens if there's an error earlier in the commit phase.
-      // The first error is the one that gets thrown, so to observe the later
-      // error, I've mocked the ReactErrorUtils module.
-      //
-      // If this test starts failing because the implementation details change,
-      // you can probably just delete it. It's not worth the hassle.
-      jest.resetModules();
-
-      const errors = [];
-      let hasCaughtError = false;
-      jest.mock('shared/ReactErrorUtils', () => ({
-        invokeGuardedCallback(name, fn, context, ...args) {
-          try {
-            return fn.call(context, ...args);
-          } catch (error) {
-            hasCaughtError = true;
-            errors.push(error);
-          }
-        },
-        hasCaughtError() {
-          return hasCaughtError;
-        },
-        clearCaughtError() {
-          hasCaughtError = false;
-          return errors[errors.length - 1];
-        },
-      }));
-
-      React = require('react');
-      ReactNoop = require('react-noop-renderer');
-      Scheduler = require('scheduler');
-
-      const {useEffect} = React;
-      const {PromiseComp} = createThenable();
-      function App() {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Passive Effect');
-        });
-        return (
-          <React.Suspense
-            suspenseCallback={() => {
-              throw Error('Oops!');
-            }}
-            fallback="Loading...">
-            <PromiseComp />
-          </React.Suspense>
-        );
-      }
-      const root = ReactNoop.createRoot();
-      await ReactNoop.act(async () => {
-        root.render(<App />);
-        expect(Scheduler).toFlushAndThrow('Oops!');
-      });
-
-      // Should have only received a single error. Before the bug fix, there was
-      // also a second error related to the Suspense update queue.
-      expect(errors.length).toBe(1);
-      expect(errors[0].message).toEqual('Oops!');
-    });
-  }
 });

From bd45ad05dc4fe05f289d482bfd0111bee5d09ef4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 14 Jun 2021 16:57:17 -0400
Subject: [PATCH 0621/1603] Add a DOCTYPE to the stream if the <html> tag is
 rendered (#21680)

This makes it a lot easier to render the whole document using React without
needing to patch into the stream.

We expect that currently people will still have to patch into the stream
to do advanced things but eventually the goal is that you shouldn't
need to.
---
 fixtures/fizz-ssr-browser/index.html          | 11 +++++--
 fixtures/ssr/server/render.js                 |  2 --
 .../ReactDOMFizzServerBrowser-test.js         | 13 ++++++++
 .../__tests__/ReactDOMFizzServerNode-test.js  | 16 ++++++++++
 .../src/__tests__/ReactRenderDocument-test.js |  1 +
 .../src/server/ReactDOMLegacyServerBrowser.js |  2 +-
 .../src/server/ReactDOMLegacyServerNode.js    |  2 +-
 .../src/server/ReactDOMServerFormatConfig.js  | 32 ++++++++++++++++---
 .../ReactDOMServerLegacyFormatConfig.js       | 14 ++++++--
 9 files changed, 80 insertions(+), 13 deletions(-)

diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
index fa7943506745..6320c4a56bbc 100644
--- a/fixtures/fizz-ssr-browser/index.html
+++ b/fixtures/fizz-ssr-browser/index.html
@@ -21,9 +21,14 @@ <h1>Fizz Example</h1>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let controller = new AbortController();
-      let stream = ReactDOMFizzServer.renderToReadableStream(<body>Success</body>, {
-        signal: controller.signal,
-      });
+      let stream = ReactDOMFizzServer.renderToReadableStream(
+        <html>
+          <body>Success</body>
+        </html>,
+        {
+          signal: controller.signal,
+        }
+      );
       let response = new Response(stream, {
         headers: {'Content-Type': 'text/html'},
       });
diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index 5a37f5c5555b..ae441545d853 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -28,8 +28,6 @@ export default function render(url, res) {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');
-        // There's no way to render a doctype in React so prepend manually.
-        res.write('<!DOCTYPE html>');
         startWriting();
       },
       onError(x) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index c813b6f55858..fd256f1a55b1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -58,6 +58,19 @@ describe('ReactDOMFizzServer', () => {
     expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
+  // @gate experimental
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <html>
+        <body>hello world</body>
+      </html>,
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+    );
+  });
+
   // @gate experimental
   it('emits all HTML as one unit if we wait until the end to start', async () => {
     let hasLoaded = false;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 7afc45aa4a5b..be0b665ea661 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -68,6 +68,22 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
+  // @gate experimental
+  it('should emit DOCTYPE at the root of the document', () => {
+    const {writable, output} = getTestWritable();
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      <html>
+        <body>hello world</body>
+      </html>,
+      writable,
+    );
+    startWriting();
+    jest.runAllTimers();
+    expect(output.result).toMatchInlineSnapshot(
+      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+    );
+  });
+
   // @gate experimental
   it('should start writing after startWriting', () => {
     const {writable, output} = getTestWritable();
diff --git a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
index 8003ee06cb8a..95b814b331dd 100644
--- a/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
+++ b/packages/react-dom/src/__tests__/ReactRenderDocument-test.js
@@ -49,6 +49,7 @@ describe('rendering React components at document', () => {
       }
 
       const markup = ReactDOMServer.renderToString(<Root hello="world" />);
+      expect(markup).not.toContain('DOCTYPE');
       const testDocument = getTestDocument(markup);
       const body = testDocument.body;
 
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 4f0d61941761..991c83e32e35 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -64,7 +64,7 @@ function renderToStringImpl(
       generateStaticMarkup,
       options ? options.identifierPrefix : undefined,
     ),
-    createRootFormatContext(undefined),
+    createRootFormatContext(),
     Infinity,
     onError,
     undefined,
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index bc1e13220963..ce2924c9a53a 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -79,7 +79,7 @@ function renderToNodeStreamImpl(
     children,
     destination,
     createResponseState(false, options ? options.identifierPrefix : undefined),
-    createRootFormatContext(undefined),
+    createRootFormatContext(),
     Infinity,
     onError,
     onCompleteAll,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 6dfa245ae4bd..9232106aac36 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -87,9 +87,10 @@ export function createResponseState(
 // 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.
-const HTML_MODE = 0;
-const SVG_MODE = 1;
-const MATHML_MODE = 2;
+const ROOT_HTML_MODE = 0; // Used for the root most element tag.
+export const HTML_MODE = 1;
+const SVG_MODE = 2;
+const MATHML_MODE = 3;
 const HTML_TABLE_MODE = 4;
 const HTML_TABLE_BODY_MODE = 5;
 const HTML_TABLE_ROW_MODE = 6;
@@ -121,7 +122,7 @@ export function createRootFormatContext(namespaceURI?: string): FormatContext {
       ? SVG_MODE
       : namespaceURI === 'http://www.w3.org/1998/Math/MathML'
       ? MATHML_MODE
-      : HTML_MODE;
+      : ROOT_HTML_MODE;
   return createFormatContext(insertionMode, null);
 }
 
@@ -160,6 +161,10 @@ export function getChildFormatContext(
     // entered plain HTML again.
     return createFormatContext(HTML_MODE, null);
   }
+  if (parentContext.insertionMode === ROOT_HTML_MODE) {
+    // We've emitted the root and is now in plain HTML mode.
+    return createFormatContext(HTML_MODE, null);
+  }
   return parentContext;
 }
 
@@ -1262,6 +1267,8 @@ function startChunkForTag(tag: string): PrecomputedChunk {
   return tagStartChunk;
 }
 
+const DOCTYPE: PrecomputedChunk = stringToPrecomputedChunk('<!DOCTYPE html>');
+
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
   type: string,
@@ -1371,6 +1378,21 @@ export function pushStartInstance(
         assignID,
       );
     }
+    case 'html': {
+      if (formatContext.insertionMode === ROOT_HTML_MODE) {
+        // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
+        // then we also emit the DOCTYPE as part of the root content as a convenience for
+        // rendering the whole document.
+        target.push(DOCTYPE);
+      }
+      return pushStartGenericElement(
+        target,
+        props,
+        type,
+        responseState,
+        assignID,
+      );
+    }
     default: {
       if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
         // Generic element
@@ -1541,6 +1563,7 @@ export function writeStartSegment(
   id: number,
 ): boolean {
   switch (formatContext.insertionMode) {
+    case ROOT_HTML_MODE:
     case HTML_MODE: {
       writeChunk(destination, startSegmentHTML);
       writeChunk(destination, responseState.segmentPrefix);
@@ -1597,6 +1620,7 @@ export function writeEndSegment(
   formatContext: FormatContext,
 ): boolean {
   switch (formatContext.insertionMode) {
+    case ROOT_HTML_MODE:
     case HTML_MODE: {
       return writeChunk(destination, endSegmentHTML);
     }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index dbca4b43ab03..3dc354b45231 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -7,7 +7,10 @@
  * @flow
  */
 
-import type {SuspenseBoundaryID} from './ReactDOMServerFormatConfig';
+import type {
+  SuspenseBoundaryID,
+  FormatContext,
+} from './ReactDOMServerFormatConfig';
 
 import {
   createResponseState as createResponseStateImpl,
@@ -16,6 +19,7 @@ import {
   writeStartClientRenderedSuspenseBoundary as writeStartClientRenderedSuspenseBoundaryImpl,
   writeEndCompletedSuspenseBoundary as writeEndCompletedSuspenseBoundaryImpl,
   writeEndClientRenderedSuspenseBoundary as writeEndClientRenderedSuspenseBoundaryImpl,
+  HTML_MODE,
 } from './ReactDOMServerFormatConfig';
 
 import type {
@@ -62,6 +66,13 @@ export function createResponseState(
   };
 }
 
+export function createRootFormatContext(): FormatContext {
+  return {
+    insertionMode: HTML_MODE, // We skip the root mode because we don't want to emit the DOCTYPE in legacy mode.
+    selectedValue: null,
+  };
+}
+
 export type {
   FormatContext,
   SuspenseBoundaryID,
@@ -69,7 +80,6 @@ export type {
 } from './ReactDOMServerFormatConfig';
 
 export {
-  createRootFormatContext,
   getChildFormatContext,
   createSuspenseBoundaryID,
   makeServerID,

From 502f8a2a07bb8e8923ead71166fbe599f94a42ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 14 Jun 2021 18:28:20 -0400
Subject: [PATCH 0622/1603] [Fizz/Flight] Don't use default args (#21681)

* Don't use default args

* Hoist out creation for better inlining

The closures prevent inlining otherwise.
---
 .../src/server/ReactDOMFizzServerNode.js      | 16 ++++++++++++----
 packages/react-server/src/ReactFizzServer.js  | 19 +++++++++++--------
 .../react-server/src/ReactFlightServer.js     |  4 ++--
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index dcb07c990553..a75234c86a27 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -42,12 +42,12 @@ type Controls = {|
   startWriting(): void,
 |};
 
-function pipeToNodeWritable(
+function createRequestImpl(
   children: ReactNodeList,
   destination: Writable,
-  options?: Options,
-): Controls {
-  const request = createRequest(
+  options: void | Options,
+) {
+  return createRequest(
     children,
     destination,
     createResponseState(options ? options.identifierPrefix : undefined),
@@ -57,6 +57,14 @@ function pipeToNodeWritable(
     options ? options.onCompleteAll : undefined,
     options ? options.onReadyToStream : undefined,
   );
+}
+
+function pipeToNodeWritable(
+  children: ReactNodeList,
+  destination: Writable,
+  options?: Options,
+): Controls {
+  const request = createRequestImpl(children, destination, options);
   let hasStartedFlowing = false;
   startWork(request);
   return {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 411eaf7618c6..9e2874eea449 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -222,17 +222,20 @@ export function createRequest(
   destination: Destination,
   responseState: ResponseState,
   rootFormatContext: FormatContext,
-  progressiveChunkSize: number = DEFAULT_PROGRESSIVE_CHUNK_SIZE,
-  onError: (error: mixed) => void = defaultErrorHandler,
-  onCompleteAll: () => void = noop,
-  onReadyToStream: () => void = noop,
+  progressiveChunkSize: void | number,
+  onError: void | ((error: mixed) => void),
+  onCompleteAll: void | (() => void),
+  onReadyToStream: void | (() => void),
 ): Request {
   const pingedTasks = [];
   const abortSet: Set<Task> = new Set();
   const request = {
     destination,
     responseState,
-    progressiveChunkSize,
+    progressiveChunkSize:
+      progressiveChunkSize === undefined
+        ? DEFAULT_PROGRESSIVE_CHUNK_SIZE
+        : progressiveChunkSize,
     status: BUFFERING,
     nextSegmentId: 0,
     allPendingTasks: 0,
@@ -243,9 +246,9 @@ export function createRequest(
     clientRenderedBoundaries: [],
     completedBoundaries: [],
     partialBoundaries: [],
-    onError,
-    onCompleteAll,
-    onReadyToStream,
+    onError: onError === undefined ? defaultErrorHandler : onError,
+    onCompleteAll: onCompleteAll === undefined ? noop : onCompleteAll,
+    onReadyToStream: onReadyToStream === undefined ? noop : onReadyToStream,
   };
   // This segment represents the root fallback.
   const rootSegment = createPendingSegment(request, 0, null, rootFormatContext);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 58c3a9219f64..dd5b43df2d35 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -98,7 +98,7 @@ export function createRequest(
   model: ReactModel,
   destination: Destination,
   bundlerConfig: BundlerConfig,
-  onError: (error: mixed) => void = defaultErrorHandler,
+  onError: void | ((error: mixed) => void),
 ): Request {
   const pingedSegments = [];
   const request = {
@@ -113,7 +113,7 @@ export function createRequest(
     completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenModules: new Map(),
-    onError,
+    onError: onError === undefined ? defaultErrorHandler : onError,
     flowing: false,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);

From e601854f077e5df76c5ea6d90cdc9c6a5c0f245f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 14 Jun 2021 18:44:46 -0400
Subject: [PATCH 0623/1603] Clean up partial renderer entry points (#21682)

* Clean up partial renderer entry points

I made a mistake by leaving server.browser.stable in which is the partial
renderer for the browser build of stable. That should use the legacy fizz
one.

Since the only usage of the partial renderer now is at FB and we don't use
it with Node, I removed the Node build of partial renderer too.

* Remove GC test

No code is running this path anymore. Ideally this should be ported to
a Fizz form.
---
 .../react-dom/server.browser.classic.fb.js    |  2 +-
 packages/react-dom/server.browser.stable.js   | 16 -----
 packages/react-dom/server.node.classic.fb.js  | 17 -----
 ...eactDOMServerIntegrationNewContext-test.js | 71 -------------------
 .../src/server/ReactDOMNodeStreamRenderer.js  | 55 --------------
 ...tDOMServerLegacyPartialRendererBrowser.js} |  0
 .../src/server/ReactDOMServerNode.js          | 22 ------
 scripts/shared/inlinedHostConfigs.js          |  2 -
 8 files changed, 1 insertion(+), 184 deletions(-)
 delete mode 100644 packages/react-dom/server.browser.stable.js
 delete mode 100644 packages/react-dom/server.node.classic.fb.js
 delete mode 100644 packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js
 rename packages/react-dom/src/server/{ReactDOMServerBrowser.js => ReactDOMServerLegacyPartialRendererBrowser.js} (100%)
 delete mode 100644 packages/react-dom/src/server/ReactDOMServerNode.js

diff --git a/packages/react-dom/server.browser.classic.fb.js b/packages/react-dom/server.browser.classic.fb.js
index c57063649a9f..39d975d20e84 100644
--- a/packages/react-dom/server.browser.classic.fb.js
+++ b/packages/react-dom/server.browser.classic.fb.js
@@ -13,4 +13,4 @@ export {
   renderToNodeStream,
   renderToStaticNodeStream,
   version,
-} from './src/server/ReactDOMServerBrowser';
+} from './src/server/ReactDOMServerLegacyPartialRendererBrowser';
diff --git a/packages/react-dom/server.browser.stable.js b/packages/react-dom/server.browser.stable.js
deleted file mode 100644
index c57063649a9f..000000000000
--- a/packages/react-dom/server.browser.stable.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export {
-  renderToString,
-  renderToStaticMarkup,
-  renderToNodeStream,
-  renderToStaticNodeStream,
-  version,
-} from './src/server/ReactDOMServerBrowser';
diff --git a/packages/react-dom/server.node.classic.fb.js b/packages/react-dom/server.node.classic.fb.js
deleted file mode 100644
index e610a8818f96..000000000000
--- a/packages/react-dom/server.node.classic.fb.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-// For some reason Flow doesn't like export * in this file. I don't know why.
-export {
-  renderToString,
-  renderToStaticMarkup,
-  renderToNodeStream,
-  renderToStaticNodeStream,
-  version,
-} from './src/server/ReactDOMServerNode';
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
index 601a42e72524..85c214067531 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -486,77 +486,6 @@ describe('ReactDOMServerIntegration', () => {
       }
     });
 
-    // Regression test for https://github.com/facebook/react/issues/14705
-    // @gate !experimental && www
-    it('does not pollute later renders when stream destroyed', () => {
-      const LoggedInUser = React.createContext('default');
-
-      const AppWithUser = user => (
-        <LoggedInUser.Provider value={user}>
-          <header>
-            <LoggedInUser.Consumer>{whoAmI => whoAmI}</LoggedInUser.Consumer>
-          </header>
-        </LoggedInUser.Provider>
-      );
-
-      const stream = ReactDOMServer.renderToNodeStream(
-        AppWithUser('Amy'),
-      ).setEncoding('utf8');
-
-      // This is an implementation detail because we test a memory leak
-      const {threadID} = stream.partialRenderer;
-
-      // Read enough to render Provider but not enough for it to be exited
-      stream._read(10);
-      expect(LoggedInUser[threadID]).toBe('Amy');
-
-      stream.destroy();
-
-      const AppWithUserNoProvider = () => (
-        <LoggedInUser.Consumer>{whoAmI => whoAmI}</LoggedInUser.Consumer>
-      );
-
-      const stream2 = ReactDOMServer.renderToNodeStream(
-        AppWithUserNoProvider(),
-      ).setEncoding('utf8');
-
-      // Sanity check to ensure 2nd render has same threadID as 1st render,
-      // otherwise this test is not testing what it's meant to
-      expect(stream2.partialRenderer.threadID).toBe(threadID);
-
-      const markup = stream2.read(Infinity);
-
-      expect(markup).toBe('default');
-    });
-
-    // Regression test for https://github.com/facebook/react/issues/14705
-    // @gate !experimental && www
-    it('frees context value reference when stream destroyed', () => {
-      const LoggedInUser = React.createContext('default');
-
-      const AppWithUser = user => (
-        <LoggedInUser.Provider value={user}>
-          <header>
-            <LoggedInUser.Consumer>{whoAmI => whoAmI}</LoggedInUser.Consumer>
-          </header>
-        </LoggedInUser.Provider>
-      );
-
-      const stream = ReactDOMServer.renderToNodeStream(
-        AppWithUser('Amy'),
-      ).setEncoding('utf8');
-
-      // This is an implementation detail because we test a memory leak
-      const {threadID} = stream.partialRenderer;
-
-      // Read enough to render Provider but not enough for it to be exited
-      stream._read(10);
-      expect(LoggedInUser[threadID]).toBe('Amy');
-
-      stream.destroy();
-      expect(LoggedInUser[threadID]).toBe('default');
-    });
-
     it('does not pollute sync renders after an error', () => {
       const LoggedInUser = React.createContext('default');
       const Crash = () => {
diff --git a/packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js b/packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js
deleted file mode 100644
index 6b032556db4d..000000000000
--- a/packages/react-dom/src/server/ReactDOMNodeStreamRenderer.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import type {ServerOptions} from './ReactPartialRenderer';
-
-import {Readable} from 'stream';
-
-import ReactPartialRenderer from './ReactPartialRenderer';
-
-// This is a Readable Node.js stream which wraps the ReactDOMPartialRenderer.
-class ReactMarkupReadableStream extends Readable {
-  constructor(element, makeStaticMarkup, options) {
-    // Calls the stream.Readable(options) constructor. Consider exposing built-in
-    // features like highWaterMark in the future.
-    super({});
-    this.partialRenderer = new ReactPartialRenderer(
-      element,
-      makeStaticMarkup,
-      options,
-    );
-  }
-
-  _destroy(err, callback) {
-    this.partialRenderer.destroy();
-    callback(err);
-  }
-
-  _read(size) {
-    try {
-      this.push(this.partialRenderer.read(size));
-    } catch (err) {
-      this.destroy(err);
-    }
-  }
-}
-/**
- * Render a ReactElement to its initial HTML. This should only be used on the
- * server.
- * See https://reactjs.org/docs/react-dom-server.html#rendertonodestream
- */
-export function renderToNodeStream(element, options?: ServerOptions) {
-  return new ReactMarkupReadableStream(element, false, options);
-}
-
-/**
- * Similar to renderToNodeStream, except this doesn't create extra DOM attributes
- * such as data-react-id that React uses internally.
- * See https://reactjs.org/docs/react-dom-server.html#rendertostaticnodestream
- */
-export function renderToStaticNodeStream(element, options?: ServerOptions) {
-  return new ReactMarkupReadableStream(element, true, options);
-}
diff --git a/packages/react-dom/src/server/ReactDOMServerBrowser.js b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
similarity index 100%
rename from packages/react-dom/src/server/ReactDOMServerBrowser.js
rename to packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
diff --git a/packages/react-dom/src/server/ReactDOMServerNode.js b/packages/react-dom/src/server/ReactDOMServerNode.js
deleted file mode 100644
index 1347434b6900..000000000000
--- a/packages/react-dom/src/server/ReactDOMServerNode.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import ReactVersion from 'shared/ReactVersion';
-
-import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';
-import {
-  renderToNodeStream,
-  renderToStaticNodeStream,
-} from './ReactDOMNodeStreamRenderer';
-
-export {
-  renderToString,
-  renderToStaticMarkup,
-  renderToNodeStream,
-  renderToStaticNodeStream,
-  ReactVersion as version,
-};
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 146bc4d64ffe..1ec1a250fcae 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -20,7 +20,6 @@ module.exports = [
       'react-dom',
       'react-dom/unstable-fizz',
       'react-dom/unstable-fizz.node',
-      'react-dom/server.node.stable',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/unstable-fizz.node
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer',
@@ -45,7 +44,6 @@ module.exports = [
       'react-dom',
       'react-dom/testing',
       'react-dom/unstable-fizz.browser',
-      'react-dom/server.browser.stable',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/unstable-fizz.browser
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',

From 9343f872038746b6bd0455d8d1098f31a1674b0b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 14 Jun 2021 19:23:19 -0400
Subject: [PATCH 0624/1603] Use the server src files as entry points for the
 builds/tests (#21683)

* Use the server src files as entry points for the builds/tests

We need one top level entry point to target two builds so we can't have
the top level one be the entry point for the builds.

* Same thing but with the modern entry point
---
 fixtures/fizz-ssr-browser/index.html          |  4 +--
 fixtures/ssr/src/index.js                     |  2 +-
 packages/react-dom/npm/server.browser.js      |  4 +--
 packages/react-dom/npm/server.node.js         |  4 +--
 .../react-dom/npm/unstable-fizz.browser.js    |  4 +--
 packages/react-dom/npm/unstable-fizz.node.js  |  4 +--
 ...ReactDOMLegacyServerBrowser.classic.fb.js} |  2 +-
 scripts/rollup/bundles.js                     | 29 ++++++++++---------
 scripts/shared/inlinedHostConfigs.js          |  9 ++++--
 9 files changed, 34 insertions(+), 28 deletions(-)
 rename packages/react-dom/{server.browser.classic.fb.js => src/server/ReactDOMLegacyServerBrowser.classic.fb.js} (82%)

diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
index 6320c4a56bbc..82ed7bf6145d 100644
--- a/fixtures/fizz-ssr-browser/index.html
+++ b/fixtures/fizz-ssr-browser/index.html
@@ -17,11 +17,11 @@ <h1>Fizz Example</h1>
       </p>
     </div>
     <script src="../../build/node_modules/react/umd/react.development.js"></script>
-    <script src="../../build/node_modules/react-dom/umd/react-dom-unstable-fizz.browser.development.js"></script>
+    <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
       let controller = new AbortController();
-      let stream = ReactDOMFizzServer.renderToReadableStream(
+      let stream = ReactDOMServer.renderToReadableStream(
         <html>
           <body>Success</body>
         </html>,
diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index 88c736fab428..0af0c3127aa1 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {unstable_createRoot as createRoot} from 'react-dom';
+import {createRoot} from 'react-dom';
 
 import App from './components/App';
 
diff --git a/packages/react-dom/npm/server.browser.js b/packages/react-dom/npm/server.browser.js
index 32b4953bb350..7f7d57b6c2c2 100644
--- a/packages/react-dom/npm/server.browser.js
+++ b/packages/react-dom/npm/server.browser.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-server.browser.production.min.js');
+  module.exports = require('./cjs/react-dom-server-legacy.browser.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-server.browser.development.js');
+  module.exports = require('./cjs/react-dom-server-legacy.browser.development.js');
 }
diff --git a/packages/react-dom/npm/server.node.js b/packages/react-dom/npm/server.node.js
index c45c37af6f37..c3c33dab4e70 100644
--- a/packages/react-dom/npm/server.node.js
+++ b/packages/react-dom/npm/server.node.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-server.node.production.min.js');
+  module.exports = require('./cjs/react-dom-server-legacy.node.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-server.node.development.js');
+  module.exports = require('./cjs/react-dom-server-legacy.node.development.js');
 }
diff --git a/packages/react-dom/npm/unstable-fizz.browser.js b/packages/react-dom/npm/unstable-fizz.browser.js
index 976fac7eca51..32b4953bb350 100644
--- a/packages/react-dom/npm/unstable-fizz.browser.js
+++ b/packages/react-dom/npm/unstable-fizz.browser.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-unstable-fizz.browser.production.min.js');
+  module.exports = require('./cjs/react-dom-server.browser.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-unstable-fizz.browser.development.js');
+  module.exports = require('./cjs/react-dom-server.browser.development.js');
 }
diff --git a/packages/react-dom/npm/unstable-fizz.node.js b/packages/react-dom/npm/unstable-fizz.node.js
index 038a3fd0fb49..c45c37af6f37 100644
--- a/packages/react-dom/npm/unstable-fizz.node.js
+++ b/packages/react-dom/npm/unstable-fizz.node.js
@@ -1,7 +1,7 @@
 'use strict';
 
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-unstable-fizz.node.production.min.js');
+  module.exports = require('./cjs/react-dom-server.node.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-unstable-fizz.node.development.js');
+  module.exports = require('./cjs/react-dom-server.node.development.js');
 }
diff --git a/packages/react-dom/server.browser.classic.fb.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.classic.fb.js
similarity index 82%
rename from packages/react-dom/server.browser.classic.fb.js
rename to packages/react-dom/src/server/ReactDOMLegacyServerBrowser.classic.fb.js
index 39d975d20e84..26ade8144113 100644
--- a/packages/react-dom/server.browser.classic.fb.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.classic.fb.js
@@ -13,4 +13,4 @@ export {
   renderToNodeStream,
   renderToStaticNodeStream,
   version,
-} from './src/server/ReactDOMServerLegacyPartialRendererBrowser';
+} from './ReactDOMServerLegacyPartialRendererBrowser';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 9823df3142f2..a19b6510c3ce 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -234,7 +234,8 @@ const bundles = [
       ? [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD]
       : [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/server.browser',
+    entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser',
+    name: 'react-dom-server-legacy.browser',
     global: 'ReactDOMServer',
     externals: ['react'],
     babel: opts =>
@@ -247,7 +248,8 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/server.node',
+    entry: 'react-dom/src/server/ReactDOMLegacyServerNode',
+    name: 'react-dom-server-legacy.node',
     externals: ['react', 'stream'],
     babel: opts =>
       Object.assign({}, opts, {
@@ -261,23 +263,25 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/unstable-fizz.browser',
-    global: 'ReactDOMFizzServer',
-    externals: ['react', 'react-dom/server'],
+    entry: 'react-dom/src/server/ReactDOMFizzServerBrowser',
+    name: 'react-dom-server.browser',
+    global: 'ReactDOMServer',
+    externals: ['react'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/unstable-fizz.node',
-    global: 'ReactDOMFizzServer',
-    externals: ['react', 'react-dom/server'],
+    entry: 'react-dom/src/server/ReactDOMFizzServerNode',
+    name: 'react-dom-server.node',
+    global: 'ReactDOMServer',
+    externals: ['react'],
   },
   {
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/src/ReactDOMServerFB',
     global: 'ReactDOMServer',
-    externals: ['react', 'react-dom/server'],
+    externals: ['react'],
   },
 
   /******* React Server DOM Webpack Writer *******/
@@ -286,14 +290,14 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.browser.server',
     global: 'ReactServerDOMWriter',
-    externals: ['react', 'react-dom/server'],
+    externals: ['react'],
   },
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.node.server',
     global: 'ReactServerDOMWriter',
-    externals: ['react', 'react-dom/server'],
+    externals: ['react'],
   },
 
   /******* React Server DOM Webpack Reader *******/
@@ -340,7 +344,6 @@ const bundles = [
     global: 'ReactFlightDOMRelayServer', // TODO: Rename to Writer
     externals: [
       'react',
-      'react-dom/server',
       'ReactFlightDOMRelayServerIntegration',
       'JSResourceReference',
     ],
@@ -785,7 +788,7 @@ deepFreeze(bundleTypes);
 deepFreeze(moduleTypes);
 
 function getOriginalFilename(bundle, bundleType) {
-  let name = bundle.entry;
+  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('/', '-');
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 1ec1a250fcae..dd16af3f62a2 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -12,7 +12,7 @@ module.exports = [
     entryPoints: [
       'react-dom',
       'react-dom/testing',
-      'react-dom/unstable-fizz.node',
+      'react-dom/src/server/ReactDOMFizzServerNode',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack',
     ],
@@ -36,7 +36,7 @@ module.exports = [
     entryPoints: [
       'react-dom',
       'react-dom/testing',
-      'react-dom/unstable-fizz.browser',
+      'react-dom/src/server/ReactDOMFizzServerBrowser',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack',
     ],
@@ -55,7 +55,10 @@ module.exports = [
   },
   {
     shortName: 'dom-legacy',
-    entryPoints: ['react-dom/server.browser', 'react-dom/server.node'],
+    entryPoints: [
+      'react-dom/src/server/ReactDOMLegacyServerBrowser', // react-dom/server.browser
+      'react-dom/src/server/ReactDOMLegacyServerNode', // react-dom/server.node
+    ],
     paths: [
       'react-dom',
       'react-dom/server',

From 9212d994ba939f20a04220a61e9776b488381596 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 14 Jun 2021 21:37:44 -0400
Subject: [PATCH 0625/1603] Merge /unstable-fizz entry point into /server
 (#21684)

---
 fixtures/ssr/server/render.js                 |  2 +-
 packages/react-dom/npm/server.browser.js      | 14 +++++-
 packages/react-dom/npm/server.node.js         | 14 +++++-
 .../react-dom/npm/unstable-fizz.browser.js    |  7 ---
 packages/react-dom/npm/unstable-fizz.js       |  3 --
 packages/react-dom/npm/unstable-fizz.node.js  |  7 ---
 packages/react-dom/package.json               |  6 +--
 packages/react-dom/server.browser.js          | 46 ++++++++++++++----
 packages/react-dom/server.node.js             | 47 +++++++++++++++----
 .../src/__tests__/ReactDOMFizzServer-test.js  |  2 +-
 .../ReactDOMFizzServerBrowser-test.js         |  2 +-
 .../__tests__/ReactDOMFizzServerNode-test.js  |  2 +-
 .../ReactServerRenderingBrowser-test.js       |  6 ---
 .../src/server/ReactDOMFizzServerBrowser.js   |  4 +-
 .../src/server/ReactDOMFizzServerNode.js      |  4 +-
 packages/react-dom/unstable-fizz.browser.js   | 10 ----
 packages/react-dom/unstable-fizz.js           | 10 ----
 packages/react-dom/unstable-fizz.node.js      | 10 ----
 scripts/shared/inlinedHostConfigs.js          | 10 +---
 19 files changed, 111 insertions(+), 95 deletions(-)
 delete mode 100644 packages/react-dom/npm/unstable-fizz.browser.js
 delete mode 100644 packages/react-dom/npm/unstable-fizz.js
 delete mode 100644 packages/react-dom/npm/unstable-fizz.node.js
 delete mode 100644 packages/react-dom/unstable-fizz.browser.js
 delete mode 100644 packages/react-dom/unstable-fizz.js
 delete mode 100644 packages/react-dom/unstable-fizz.node.js

diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index ae441545d853..a6ee4decdd22 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {pipeToNodeWritable} from 'react-dom/unstable-fizz';
+import {pipeToNodeWritable} from 'react-dom/server';
 
 import App from '../src/components/App';
 
diff --git a/packages/react-dom/npm/server.browser.js b/packages/react-dom/npm/server.browser.js
index 7f7d57b6c2c2..4b7749d4cd9b 100644
--- a/packages/react-dom/npm/server.browser.js
+++ b/packages/react-dom/npm/server.browser.js
@@ -1,7 +1,17 @@
 'use strict';
 
+var l, s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-server-legacy.browser.production.min.js');
+  l = require('./cjs/react-dom-server-legacy.browser.production.min.js');
+  s = require('./cjs/react-dom-server.browser.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-server-legacy.browser.development.js');
+  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.renderToNodeStream = l.renderToNodeStream;
+exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
+exports.renderToReadableStream = s.renderToReadableStream;
diff --git a/packages/react-dom/npm/server.node.js b/packages/react-dom/npm/server.node.js
index c3c33dab4e70..e7d3251c4d3d 100644
--- a/packages/react-dom/npm/server.node.js
+++ b/packages/react-dom/npm/server.node.js
@@ -1,7 +1,17 @@
 'use strict';
 
+var l, s;
 if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-server-legacy.node.production.min.js');
+  l = require('./cjs/react-dom-server-legacy.node.production.min.js');
+  s = require('./cjs/react-dom-server.node.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-server-legacy.node.development.js');
+  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.renderToNodeStream = l.renderToNodeStream;
+exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
+exports.pipeToNodeWritable = s.pipeToNodeWritable;
diff --git a/packages/react-dom/npm/unstable-fizz.browser.js b/packages/react-dom/npm/unstable-fizz.browser.js
deleted file mode 100644
index 32b4953bb350..000000000000
--- a/packages/react-dom/npm/unstable-fizz.browser.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-server.browser.production.min.js');
-} else {
-  module.exports = require('./cjs/react-dom-server.browser.development.js');
-}
diff --git a/packages/react-dom/npm/unstable-fizz.js b/packages/react-dom/npm/unstable-fizz.js
deleted file mode 100644
index ca4135d36b87..000000000000
--- a/packages/react-dom/npm/unstable-fizz.js
+++ /dev/null
@@ -1,3 +0,0 @@
-'use strict';
-
-module.exports = require('./unstable-fizz.node');
diff --git a/packages/react-dom/npm/unstable-fizz.node.js b/packages/react-dom/npm/unstable-fizz.node.js
deleted file mode 100644
index c45c37af6f37..000000000000
--- a/packages/react-dom/npm/unstable-fizz.node.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-dom-server.node.production.min.js');
-} else {
-  module.exports = require('./cjs/react-dom-server.node.development.js');
-}
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index b5fdf2c991ac..f7918bcc8384 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -34,15 +34,11 @@
     "server.browser.js",
     "server.node.js",
     "test-utils.js",
-    "unstable-fizz.js",
-    "unstable-fizz.browser.js",
-    "unstable-fizz.node.js",
     "cjs/",
     "umd/"
   ],
   "browser": {
-    "./server.js": "./server.browser.js",
-    "./unstable-fizz.js": "./unstable-fizz.browser.js"
+    "./server.js": "./server.browser.js"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-dom/server.browser.js b/packages/react-dom/server.browser.js
index bd63acc8685f..67dea0e8c84f 100644
--- a/packages/react-dom/server.browser.js
+++ b/packages/react-dom/server.browser.js
@@ -3,14 +3,42 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
-export {
-  renderToString,
-  renderToStaticMarkup,
-  renderToNodeStream,
-  renderToStaticNodeStream,
-  version,
-} from './src/server/ReactDOMLegacyServerBrowser';
+// 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 renderToNodeStream() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+export function renderToStaticNodeStream() {
+  return require('./src/server/ReactDOMLegacyServerBrowser').renderToStaticNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function renderToReadableStream() {
+  return require('./src/server/ReactDOMFizzServerBrowser').renderToReadableStream.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/server.node.js b/packages/react-dom/server.node.js
index 92b69c03bc34..7fb8cfaeb5a8 100644
--- a/packages/react-dom/server.node.js
+++ b/packages/react-dom/server.node.js
@@ -3,15 +3,42 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
-// For some reason Flow doesn't like export * in this file. I don't know why.
-export {
-  renderToString,
-  renderToStaticMarkup,
-  renderToNodeStream,
-  renderToStaticNodeStream,
-  version,
-} from './src/server/ReactDOMLegacyServerNode';
+// 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 renderToNodeStream() {
+  return require('./src/server/ReactDOMLegacyServerNode').renderToNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+export function renderToStaticNodeStream() {
+  return require('./src/server/ReactDOMLegacyServerNode').renderToStaticNodeStream.apply(
+    this,
+    arguments,
+  );
+}
+
+export function pipeToNodeWritable() {
+  return require('./src/server/ReactDOMFizzServerNode').pipeToNodeWritable.apply(
+    this,
+    arguments,
+  );
+}
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index eb9eb0e4ef83..75a821b224d0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -34,7 +34,7 @@ describe('ReactDOMFizzServer', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     if (__EXPERIMENTAL__) {
-      ReactDOMFizzServer = require('react-dom/unstable-fizz');
+      ReactDOMFizzServer = require('react-dom/server');
     }
     Stream = require('stream');
     Suspense = React.Suspense;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index fd256f1a55b1..546e1f622baa 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -23,7 +23,7 @@ describe('ReactDOMFizzServer', () => {
     jest.resetModules();
     React = require('react');
     if (__EXPERIMENTAL__) {
-      ReactDOMFizzServer = require('react-dom/unstable-fizz.browser');
+      ReactDOMFizzServer = require('react-dom/server.browser');
     }
     Suspense = React.Suspense;
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index be0b665ea661..78a8374d09cc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -20,7 +20,7 @@ describe('ReactDOMFizzServer', () => {
     jest.resetModules();
     React = require('react');
     if (__EXPERIMENTAL__) {
-      ReactDOMFizzServer = require('react-dom/unstable-fizz');
+      ReactDOMFizzServer = require('react-dom/server');
     }
     Stream = require('stream');
     Suspense = React.Suspense;
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingBrowser-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingBrowser-test.js
index c388b4bb6729..6356c054aedb 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingBrowser-test.js
@@ -24,12 +24,6 @@ describe('ReactServerRenderingBrowser', () => {
     ReactDOMServerBrowser = require('react-dom/server.browser');
   });
 
-  it('provides the same top-level API as react-dom/server', () => {
-    expect(Object.keys(ReactDOMServerBrowser)).toEqual(
-      Object.keys(ReactDOMServer),
-    );
-  });
-
   it('returns the same results as react-dom/server', () => {
     class Nice extends React.Component {
       render() {
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index ac90d60671d9..67ecb7f261e3 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -9,6 +9,8 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import ReactVersion from 'shared/ReactVersion';
+
 import {
   createRequest,
   startWork,
@@ -72,4 +74,4 @@ function renderToReadableStream(
   return stream;
 }
 
-export {renderToReadableStream};
+export {renderToReadableStream, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index a75234c86a27..ccfc91643a13 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -10,6 +10,8 @@
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Writable} from 'stream';
 
+import ReactVersion from 'shared/ReactVersion';
+
 import {
   createRequest,
   startWork,
@@ -82,4 +84,4 @@ function pipeToNodeWritable(
   };
 }
 
-export {pipeToNodeWritable};
+export {pipeToNodeWritable, ReactVersion as version};
diff --git a/packages/react-dom/unstable-fizz.browser.js b/packages/react-dom/unstable-fizz.browser.js
deleted file mode 100644
index 322d4e364e1a..000000000000
--- a/packages/react-dom/unstable-fizz.browser.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from './src/server/ReactDOMFizzServerBrowser';
diff --git a/packages/react-dom/unstable-fizz.js b/packages/react-dom/unstable-fizz.js
deleted file mode 100644
index 835fb25dca4a..000000000000
--- a/packages/react-dom/unstable-fizz.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from './unstable-fizz.node';
diff --git a/packages/react-dom/unstable-fizz.node.js b/packages/react-dom/unstable-fizz.node.js
deleted file mode 100644
index ae7462ed7071..000000000000
--- a/packages/react-dom/unstable-fizz.node.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export * from './src/server/ReactDOMFizzServerNode';
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index dd16af3f62a2..f6d349502f6b 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -18,9 +18,7 @@ module.exports = [
     ],
     paths: [
       'react-dom',
-      'react-dom/unstable-fizz',
-      'react-dom/unstable-fizz.node',
-      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/unstable-fizz.node
+      'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer',
       'react-server-dom-webpack/writer.node.server',
@@ -43,8 +41,7 @@ module.exports = [
     paths: [
       'react-dom',
       'react-dom/testing',
-      'react-dom/unstable-fizz.browser',
-      'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/unstable-fizz.browser
+      'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server
@@ -61,9 +58,6 @@ module.exports = [
     ],
     paths: [
       'react-dom',
-      'react-dom/server',
-      'react-dom/server.browser',
-      'react-dom/server.node',
       'react-server-dom-webpack',
       'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
       'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node

From 7ec4c55971aad644616ca0b040f42410659fe802 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 15 Jun 2021 16:37:53 -0400
Subject: [PATCH 0626/1603] createRoot(..., {hydrate:true}) -> hydrateRoot(...)
 (#21687)

This adds a new top level API for hydrating a root. It takes the initial
children as part of its constructor. These are unlike other render calls
in that they have to represent what the server sent and they can't be
batched with other updates.

I also changed the options to move the hydrationOptions to the top level
since now these options are all hydration options.

I kept the createRoot one just temporarily to make it easier to codemod
internally but I'm doing a follow up to delete.

As part of this I un-dried a couple of paths. ReactDOMLegacy was intended
to be built on top of the new API but it didn't actually use those root
APIs because there are special paths. It also doesn't actually use most of
the commmon paths since all the options are ignored. It also made it hard
to add only warnings for legacy only or new only code paths.

I also forked the create/hydrate paths because they're subtly different
since now the options are different. The containers are also different
because I now error for comment nodes during hydration which just doesn't
work at all but eventually we'll error for all createRoot calls.

After some iteration it might make sense to break out some common paths but
for now it's easier to iterate on the duplicates.
---
 packages/react-dom/index.classic.fb.js        |   1 +
 packages/react-dom/index.experimental.js      |   1 +
 packages/react-dom/index.js                   |   1 +
 packages/react-dom/index.modern.fb.js         |   1 +
 packages/react-dom/index.stable.js            |   1 +
 .../src/__tests__/ReactDOMRoot-test.js        |   7 +-
 packages/react-dom/src/client/ReactDOM.js     |   3 +-
 .../src/client/ReactDOMHostConfig.js          |   5 +-
 .../react-dom/src/client/ReactDOMLegacy.js    |  48 ++++---
 packages/react-dom/src/client/ReactDOMRoot.js | 118 +++++++++++++-----
 scripts/error-codes/codes.json                |   3 +-
 11 files changed, 130 insertions(+), 59 deletions(-)

diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index 234aa3306648..5f4f04e63461 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -23,6 +23,7 @@ export {
   createPortal,
   createRoot,
   createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
+  hydrateRoot,
   findDOMNode,
   flushSync,
   hydrate,
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index 5a1c9f191f70..5cb691740e71 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -11,6 +11,7 @@ export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
+  hydrateRoot,
   findDOMNode,
   flushSync,
   hydrate,
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 6a824b2f70b1..7b89695091d5 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -14,6 +14,7 @@ export {
   createPortal,
   createRoot,
   createRoot as unstable_createRoot,
+  hydrateRoot,
   findDOMNode,
   flushSync,
   hydrate,
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index b53a8cf9add7..b12c249286b1 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -12,6 +12,7 @@ export {
   createPortal,
   createRoot,
   createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
+  hydrateRoot,
   flushSync,
   unstable_batchedUpdates,
   unstable_createEventHandle,
diff --git a/packages/react-dom/index.stable.js b/packages/react-dom/index.stable.js
index 55d515a9fce2..7d8b01be53e3 100644
--- a/packages/react-dom/index.stable.js
+++ b/packages/react-dom/index.stable.js
@@ -11,6 +11,7 @@ export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
+  hydrateRoot,
   findDOMNode,
   flushSync,
   hydrate,
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 9fe03cc2a947..6fb631fb4dbf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -96,11 +96,10 @@ describe('ReactDOMRoot', () => {
     );
     Scheduler.unstable_flushAll();
 
-    // Accepts `hydrate` option
     const container2 = document.createElement('div');
     container2.innerHTML = markup;
-    const root2 = ReactDOM.createRoot(container2, {hydrate: true});
-    root2.render(
+    ReactDOM.hydrateRoot(
+      container2,
       <div>
         <span />
       </div>,
@@ -191,7 +190,7 @@ describe('ReactDOMRoot', () => {
         // We care about this warning:
         'You are calling ReactDOM.hydrate() on a container that was previously ' +
           'passed to ReactDOM.createRoot(). This is not supported. ' +
-          'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',
+          'Did you mean to call hydrateRoot(container, 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.',
       ],
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 848e889a35db..7355e0be45a3 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -17,7 +17,7 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, isValidContainer} from './ReactDOMRoot';
+import {createRoot, hydrateRoot, isValidContainer} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -182,6 +182,7 @@ export {
   unmountComponentAtNode,
   // exposeConcurrentModeAPIs
   createRoot,
+  hydrateRoot,
   flushControlled as unstable_flushControlled,
   scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 908719d67989..bad70b6ba996 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -14,7 +14,6 @@ import type {
   IntersectionObserverOptions,
   ObserveVisibleRectsCallback,
 } from 'react-reconciler/src/ReactTestSelectors';
-import type {RootType} from './ReactDOMRoot';
 import type {ReactScopeInstance} from 'shared/ReactTypes';
 
 import {
@@ -105,8 +104,8 @@ export type EventTargetChildElement = {
   ...
 };
 export type Container =
-  | (Element & {_reactRootContainer?: RootType, ...})
-  | (Document & {_reactRootContainer?: RootType, ...});
+  | (Element & {_reactRootContainer?: FiberRoot, ...})
+  | (Document & {_reactRootContainer?: FiberRoot, ...});
 export type Instance = Element;
 export type TextInstance = Text;
 export type SuspenseInstance = Comment & {_reactRetry?: () => void, ...};
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index e85a5541b19e..a62a7fb444c5 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -8,16 +8,17 @@
  */
 
 import type {Container} from './ReactDOMHostConfig';
-import type {RootType} from './ReactDOMRoot';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {
   getInstanceFromNode,
   isContainerMarkedAsRoot,
+  markContainerAsRoot,
   unmarkContainerAsRoot,
 } from './ReactDOMComponentTree';
-import {createLegacyRoot, isValidContainer} from './ReactDOMRoot';
+import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
+import {isValidContainerLegacy} from './ReactDOMRoot';
 import {
   DOCUMENT_NODE,
   ELEMENT_NODE,
@@ -25,6 +26,7 @@ import {
 } from '../shared/HTMLNodeType';
 
 import {
+  createContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
   unbatchedUpdates,
@@ -32,6 +34,7 @@ import {
   findHostInstance,
   findHostInstanceWithWarning,
 } from 'react-reconciler/src/ReactFiberReconciler';
+import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -45,7 +48,7 @@ if (__DEV__) {
   topLevelUpdateWarnings = (container: Container) => {
     if (container._reactRootContainer && container.nodeType !== COMMENT_NODE) {
       const hostInstance = findHostInstanceWithNoPortals(
-        container._reactRootContainer._internalRoot.current,
+        container._reactRootContainer.current,
       );
       if (hostInstance) {
         if (hostInstance.parentNode !== container) {
@@ -103,7 +106,7 @@ function getReactRootElementInContainer(container: any) {
 function legacyCreateRootFromDOMContainer(
   container: Container,
   forceHydrate: boolean,
-): RootType {
+): FiberRoot {
   // First clear any existing content.
   if (!forceHydrate) {
     let rootSibling;
@@ -112,14 +115,21 @@ function legacyCreateRootFromDOMContainer(
     }
   }
 
-  return createLegacyRoot(
+  const root = createContainer(
     container,
-    forceHydrate
-      ? {
-          hydrate: true,
-        }
-      : undefined,
+    LegacyRoot,
+    forceHydrate,
+    null, // hydrationCallbacks
+    false, // isStrictMode
+    false, // concurrentUpdatesByDefaultOverride,
   );
+  markContainerAsRoot(root.current, container);
+
+  const rootContainerElement =
+    container.nodeType === COMMENT_NODE ? container.parentNode : container;
+  listenToAllSupportedEvents(rootContainerElement);
+
+  return root;
 }
 
 function warnOnInvalidCallback(callback: mixed, callerName: string): void {
@@ -155,7 +165,7 @@ function legacyRenderSubtreeIntoContainer(
       container,
       forceHydrate,
     );
-    fiberRoot = root._internalRoot;
+    fiberRoot = root;
     if (typeof callback === 'function') {
       const originalCallback = callback;
       callback = function() {
@@ -168,7 +178,7 @@ function legacyRenderSubtreeIntoContainer(
       updateContainer(children, fiberRoot, parentComponent, callback);
     });
   } else {
-    fiberRoot = root._internalRoot;
+    fiberRoot = root;
     if (typeof callback === 'function') {
       const originalCallback = callback;
       callback = function() {
@@ -221,7 +231,7 @@ export function hydrate(
 ) {
   if (__DEV__) {
     console.error(
-      'ReactDOM.hydrate is no longer supported in React 18. Use createRoot ' +
+      'ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot ' +
         'instead. Until you switch to the new API, your app will behave as ' +
         "if it's running React 17. Learn " +
         'more: https://reactjs.org/link/switch-to-createroot',
@@ -229,7 +239,7 @@ export function hydrate(
   }
 
   invariant(
-    isValidContainer(container),
+    isValidContainerLegacy(container),
     'Target container is not a DOM element.',
   );
   if (__DEV__) {
@@ -240,7 +250,7 @@ export function hydrate(
       console.error(
         'You are calling ReactDOM.hydrate() on a container that was previously ' +
           'passed to ReactDOM.createRoot(). This is not supported. ' +
-          'Did you mean to call createRoot(container, {hydrate: true}).render(element)?',
+          'Did you mean to call hydrateRoot(container, element)?',
       );
     }
   }
@@ -269,7 +279,7 @@ export function render(
   }
 
   invariant(
-    isValidContainer(container),
+    isValidContainerLegacy(container),
     'Target container is not a DOM element.',
   );
   if (__DEV__) {
@@ -300,7 +310,7 @@ export function unstable_renderSubtreeIntoContainer(
   callback: ?Function,
 ) {
   invariant(
-    isValidContainer(containerNode),
+    isValidContainerLegacy(containerNode),
     'Target container is not a DOM element.',
   );
   invariant(
@@ -318,7 +328,7 @@ export function unstable_renderSubtreeIntoContainer(
 
 export function unmountComponentAtNode(container: Container) {
   invariant(
-    isValidContainer(container),
+    isValidContainerLegacy(container),
     'unmountComponentAtNode(...): Target container is not a DOM element.',
   );
 
@@ -365,7 +375,7 @@ export function unmountComponentAtNode(container: Container) {
       // Check if the container itself is a React root node.
       const isContainerReactRoot =
         container.nodeType === ELEMENT_NODE &&
-        isValidContainer(container.parentNode) &&
+        isValidContainerLegacy(container.parentNode) &&
         !!container.parentNode._reactRootContainer;
 
       if (hasNonRootReactChild) {
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index dc4c95a41ef3..ba062fc3f71e 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -8,7 +8,6 @@
  */
 
 import type {Container} from './ReactDOMHostConfig';
-import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 import type {MutableSource, ReactNodeList} from 'shared/ReactTypes';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 
@@ -19,7 +18,8 @@ export type RootType = {
   ...
 };
 
-export type RootOptions = {
+export type CreateRootOptions = {
+  // TODO: Remove these options.
   hydrate?: boolean,
   hydrationOptions?: {
     onHydrated?: (suspenseNode: Comment) => void,
@@ -27,6 +27,18 @@ export type RootOptions = {
     mutableSources?: Array<MutableSource<any>>,
     ...
   },
+  // END OF TODO
+  unstable_strictMode?: boolean,
+  unstable_concurrentUpdatesByDefault?: boolean,
+  ...
+};
+
+export type HydrateRootOptions = {
+  // Hydration options
+  hydratedSources?: Array<MutableSource<any>>,
+  onHydrated?: (suspenseNode: Comment) => void,
+  onDeleted?: (suspenseNode: Comment) => void,
+  // Options for all roots
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
   ...
@@ -52,20 +64,14 @@ import {
   registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
-import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
+import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
-function ReactDOMRoot(container: Container, options: void | RootOptions) {
-  this._internalRoot = createRootImpl(container, ConcurrentRoot, options);
-}
-
-function ReactDOMLegacyRoot(container: Container, options: void | RootOptions) {
-  this._internalRoot = createRootImpl(container, LegacyRoot, options);
+function ReactDOMRoot(internalRoot) {
+  this._internalRoot = internalRoot;
 }
 
-ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
-  children: ReactNodeList,
-): void {
+ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   const root = this._internalRoot;
   if (__DEV__) {
     if (typeof arguments[1] === 'function') {
@@ -93,7 +99,7 @@ ReactDOMRoot.prototype.render = ReactDOMLegacyRoot.prototype.render = function(
   updateContainer(children, root, null, null);
 };
 
-ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function(): void {
+ReactDOMRoot.prototype.unmount = function(): void {
   if (__DEV__) {
     if (typeof arguments[0] === 'function') {
       console.error(
@@ -109,12 +115,17 @@ ReactDOMRoot.prototype.unmount = ReactDOMLegacyRoot.prototype.unmount = function
   });
 };
 
-function createRootImpl(
+export function createRoot(
   container: Container,
-  tag: RootTag,
-  options: void | RootOptions,
-) {
-  // Tag is either LegacyRoot or Concurrent Root
+  options?: CreateRootOptions,
+): RootType {
+  invariant(
+    isValidContainerLegacy(container),
+    'createRoot(...): Target container is not a DOM element.',
+  );
+  warnIfReactDOMContainerInDEV(container);
+
+  // TODO: Delete these options
   const hydrate = options != null && options.hydrate === true;
   const hydrationCallbacks =
     (options != null && options.hydrationOptions) || null;
@@ -123,8 +134,9 @@ function createRootImpl(
       options.hydrationOptions != null &&
       options.hydrationOptions.mutableSources) ||
     null;
-  const isStrictMode = options != null && options.unstable_strictMode === true;
+  // END TODO
 
+  const isStrictMode = options != null && options.unstable_strictMode === true;
   let concurrentUpdatesByDefaultOverride = null;
   if (allowConcurrentByDefault) {
     concurrentUpdatesByDefaultOverride =
@@ -135,7 +147,7 @@ function createRootImpl(
 
   const root = createContainer(
     container,
-    tag,
+    ConcurrentRoot,
     hydrate,
     hydrationCallbacks,
     isStrictMode,
@@ -147,36 +159,80 @@ function createRootImpl(
     container.nodeType === COMMENT_NODE ? container.parentNode : container;
   listenToAllSupportedEvents(rootContainerElement);
 
+  // TODO: Delete this path
   if (mutableSources) {
     for (let i = 0; i < mutableSources.length; i++) {
       const mutableSource = mutableSources[i];
       registerMutableSourceForHydration(root, mutableSource);
     }
   }
+  // END TODO
 
-  return root;
+  return new ReactDOMRoot(root);
 }
 
-export function createRoot(
+export function hydrateRoot(
   container: Container,
-  options?: RootOptions,
+  initialChildren: ReactNodeList,
+  options?: HydrateRootOptions,
 ): RootType {
   invariant(
     isValidContainer(container),
-    'createRoot(...): Target container is not a DOM element.',
+    'hydrateRoot(...): Target container is not a DOM element.',
   );
   warnIfReactDOMContainerInDEV(container);
-  return new ReactDOMRoot(container, options);
+
+  // For now we reuse the whole bag of options since they contain
+  // the hydration callbacks.
+  const hydrationCallbacks = options != null ? options : null;
+  const mutableSources = (options != null && options.hydratedSources) || null;
+  const isStrictMode = options != null && options.unstable_strictMode === true;
+
+  let concurrentUpdatesByDefaultOverride = null;
+  if (allowConcurrentByDefault) {
+    concurrentUpdatesByDefaultOverride =
+      options != null && options.unstable_concurrentUpdatesByDefault != null
+        ? options.unstable_concurrentUpdatesByDefault
+        : null;
+  }
+
+  const root = createContainer(
+    container,
+    ConcurrentRoot,
+    true, // hydrate
+    hydrationCallbacks,
+    isStrictMode,
+    concurrentUpdatesByDefaultOverride,
+  );
+  markContainerAsRoot(root.current, container);
+  // This can't be a comment node since hydration doesn't work on comment nodes anyway.
+  listenToAllSupportedEvents(container);
+
+  if (mutableSources) {
+    for (let i = 0; i < mutableSources.length; i++) {
+      const mutableSource = mutableSources[i];
+      registerMutableSourceForHydration(root, mutableSource);
+    }
+  }
+
+  // Render the initial children
+  updateContainer(initialChildren, root, null, null);
+
+  return new ReactDOMRoot(root);
 }
 
-export function createLegacyRoot(
-  container: Container,
-  options?: RootOptions,
-): RootType {
-  return new ReactDOMLegacyRoot(container, options);
+export function isValidContainer(node: any): boolean {
+  return !!(
+    node &&
+    (node.nodeType === ELEMENT_NODE ||
+      node.nodeType === DOCUMENT_NODE ||
+      node.nodeType === DOCUMENT_FRAGMENT_NODE)
+  );
 }
 
-export function isValidContainer(node: mixed): boolean {
+// TODO: Remove this function which also includes comment nodes.
+// We only use it in places that are currently more relaxed.
+export function isValidContainerLegacy(node: any): boolean {
   return !!(
     node &&
     (node.nodeType === ELEMENT_NODE ||
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 538f28756e42..d80cd0776ec2 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -392,5 +392,6 @@
   "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."
+  "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."
 }

From 03c5314b44dbf280f3008ce7f587e5055e76c6e2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 15 Jun 2021 23:20:51 +0100
Subject: [PATCH 0627/1603] [SSR2 Fixture] Update APIs (#21688)

---
 fixtures/ssr2/package-lock.json | 12684 ------------------------------
 fixtures/ssr2/package.json      |     4 +-
 fixtures/ssr2/server/render.js  |     2 +-
 fixtures/ssr2/src/index.js      |     5 +-
 fixtures/ssr2/yarn.lock         |  5260 +++++++++++++
 5 files changed, 5265 insertions(+), 12690 deletions(-)
 delete mode 100644 fixtures/ssr2/package-lock.json
 create mode 100644 fixtures/ssr2/yarn.lock

diff --git a/fixtures/ssr2/package-lock.json b/fixtures/ssr2/package-lock.json
deleted file mode 100644
index 176802403681..000000000000
--- a/fixtures/ssr2/package-lock.json
+++ /dev/null
@@ -1,12684 +0,0 @@
-{
-  "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": "0.0.0-cc4d24ab0",
-        "react-dom": "0.0.0-cc4d24ab0",
-        "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.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
-      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
-      "dependencies": {
-        "@babel/highlight": "^7.12.13"
-      }
-    },
-    "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.14.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
-      "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
-      "dependencies": {
-        "@babel/types": "^7.14.2",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.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-explode-assignable-expression": {
-      "version": "7.12.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.12.1"
-      }
-    },
-    "node_modules/@babel/helper-function-name": {
-      "version": "7.14.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
-      "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
-      "dependencies": {
-        "@babel/helper-get-function-arity": "^7.12.13",
-        "@babel/template": "^7.12.13",
-        "@babel/types": "^7.14.2"
-      }
-    },
-    "node_modules/@babel/helper-get-function-arity": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
-      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
-      "dependencies": {
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.10.4",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "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.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
-      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
-      "dependencies": {
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
-      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
-    },
-    "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.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
-      "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.0",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      }
-    },
-    "node_modules/@babel/parser": {
-      "version": "7.14.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.4.tgz",
-      "integrity": "sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA==",
-      "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.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
-      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/parser": "^7.12.13",
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "node_modules/@babel/traverse": {
-      "version": "7.14.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
-      "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
-      "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/generator": "^7.14.2",
-        "@babel/helper-function-name": "^7.14.2",
-        "@babel/helper-split-export-declaration": "^7.12.13",
-        "@babel/parser": "^7.14.2",
-        "@babel/types": "^7.14.2",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      }
-    },
-    "node_modules/@babel/types": {
-      "version": "7.14.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.4.tgz",
-      "integrity": "sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==",
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.0",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
-    "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.1.3",
-      "license": "MIT"
-    },
-    "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.1",
-      "license": "ISC",
-      "dependencies": {
-        "bn.js": "^5.1.1",
-        "browserify-rsa": "^4.0.1",
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "elliptic": "^6.5.3",
-        "inherits": "^2.0.4",
-        "parse-asn1": "^5.1.5",
-        "readable-stream": "^3.6.0",
-        "safe-buffer": "^5.2.0"
-      }
-    },
-    "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": "0.0.0-cc4d24ab0",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "0.0.0-cc4d24ab0",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "0.0.0-cc4d24ab0"
-      },
-      "peerDependencies": {
-        "react": "0.0.0-cc4d24ab0"
-      }
-    },
-    "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.0",
-      "license": "MIT",
-      "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.0.0-cc4d24ab0",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "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.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
-      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
-      "requires": {
-        "@babel/highlight": "^7.12.13"
-      }
-    },
-    "@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.14.3",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
-      "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
-      "requires": {
-        "@babel/types": "^7.14.2",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
-      }
-    },
-    "@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-explode-assignable-expression": {
-      "version": "7.12.1",
-      "requires": {
-        "@babel/types": "^7.12.1"
-      }
-    },
-    "@babel/helper-function-name": {
-      "version": "7.14.2",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
-      "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
-      "requires": {
-        "@babel/helper-get-function-arity": "^7.12.13",
-        "@babel/template": "^7.12.13",
-        "@babel/types": "^7.14.2"
-      }
-    },
-    "@babel/helper-get-function-arity": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
-      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
-      "requires": {
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "@babel/helper-hoist-variables": {
-      "version": "7.10.4",
-      "requires": {
-        "@babel/types": "^7.10.4"
-      }
-    },
-    "@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.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
-      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
-      "requires": {
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "@babel/helper-validator-identifier": {
-      "version": "7.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
-      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
-    },
-    "@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.14.0",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
-      "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
-      "requires": {
-        "@babel/helper-validator-identifier": "^7.14.0",
-        "chalk": "^2.0.0",
-        "js-tokens": "^4.0.0"
-      }
-    },
-    "@babel/parser": {
-      "version": "7.14.4",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.4.tgz",
-      "integrity": "sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA=="
-    },
-    "@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.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
-      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
-      "requires": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/parser": "^7.12.13",
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.14.2",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
-      "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
-      "requires": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/generator": "^7.14.2",
-        "@babel/helper-function-name": "^7.14.2",
-        "@babel/helper-split-export-declaration": "^7.12.13",
-        "@babel/parser": "^7.14.2",
-        "@babel/types": "^7.14.2",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      }
-    },
-    "@babel/types": {
-      "version": "7.14.4",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.4.tgz",
-      "integrity": "sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==",
-      "requires": {
-        "@babel/helper-validator-identifier": "^7.14.0",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
-    "@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.1.3"
-    },
-    "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.1",
-      "requires": {
-        "bn.js": "^5.1.1",
-        "browserify-rsa": "^4.0.1",
-        "create-hash": "^1.2.0",
-        "create-hmac": "^1.1.7",
-        "elliptic": "^6.5.3",
-        "inherits": "^2.0.4",
-        "parse-asn1": "^5.1.5",
-        "readable-stream": "^3.6.0",
-        "safe-buffer": "^5.2.0"
-      },
-      "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": "0.0.0-cc4d24ab0",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "react-dom": {
-      "version": "0.0.0-cc4d24ab0",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "scheduler": "0.0.0-cc4d24ab0"
-      }
-    },
-    "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.0",
-      "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.0.0-cc4d24ab0",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
-    },
-    "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
index 638133923967..963d9a966c63 100644
--- a/fixtures/ssr2/package.json
+++ b/fixtures/ssr2/package.json
@@ -15,8 +15,8 @@
     "concurrently": "^5.3.0",
     "express": "^4.17.1",
     "nodemon": "^2.0.6",
-    "react": "0.0.0-cc4d24ab0",
-    "react-dom": "0.0.0-cc4d24ab0",
+    "react": "18.0.0-alpha-7ec4c5597",
+    "react-dom": "18.0.0-alpha-7ec4c5597",
     "react-error-boundary": "^3.1.3",
     "resolve": "1.12.0",
     "rimraf": "^3.0.2",
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index 9904e46e8524..e227dae93e82 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -8,7 +8,7 @@
 
 import * as React from 'react';
 // import {renderToString} from 'react-dom/server';
-import {pipeToNodeWritable} from 'react-dom/unstable-fizz';
+import {pipeToNodeWritable} from 'react-dom/server';
 import App from '../src/App';
 import {DataProvider} from '../src/data';
 import {API_DELAY, ABORT_DELAY} from './delays';
diff --git a/fixtures/ssr2/src/index.js b/fixtures/ssr2/src/index.js
index 26481d7e6f71..0d41da456e3a 100644
--- a/fixtures/ssr2/src/index.js
+++ b/fixtures/ssr2/src/index.js
@@ -6,8 +6,7 @@
  *
  */
 
-import {createRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom';
 import App from './App';
 
-const root = createRoot(document, {hydrate: true});
-root.render(<App assets={window.assetManifest} />);
+const root = hydrateRoot(document, <App assets={window.assetManifest} />);
diff --git a/fixtures/ssr2/yarn.lock b/fixtures/ssr2/yarn.lock
new file mode 100644
index 000000000000..0876393ac443
--- /dev/null
+++ b/fixtures/ssr2/yarn.lock
@@ -0,0 +1,5260 @@
+# 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.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
+  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
+  dependencies:
+    "@babel/highlight" "^7.14.5"
+
+"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.5.tgz#8ef4c18e58e801c5c95d3c1c0f2874a2680fadea"
+  integrity sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==
+
+"@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.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785"
+  integrity sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==
+  dependencies:
+    "@babel/types" "^7.14.5"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
+"@babel/helper-annotate-as-pure@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61"
+  integrity sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz#b939b43f8c37765443a19ae74ad8b15978e0a191"
+  integrity sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==
+  dependencies:
+    "@babel/helper-explode-assignable-expression" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.13.16", "@babel/helper-compilation-targets@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz#7a99c5d0967911e972fe2c3411f7d5b498498ecf"
+  integrity sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==
+  dependencies:
+    "@babel/compat-data" "^7.14.5"
+    "@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.14.6":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz#f114469b6c06f8b5c59c6c4e74621f5085362542"
+  integrity sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-function-name" "^7.14.5"
+    "@babel/helper-member-expression-to-functions" "^7.14.5"
+    "@babel/helper-optimise-call-expression" "^7.14.5"
+    "@babel/helper-replace-supers" "^7.14.5"
+    "@babel/helper-split-export-declaration" "^7.14.5"
+
+"@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-explode-assignable-expression@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz#8aa72e708205c7bb643e45c73b4386cdf2a1f645"
+  integrity sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-function-name@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz#89e2c474972f15d8e233b52ee8c480e2cfcd50c4"
+  integrity sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.14.5"
+    "@babel/template" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-get-function-arity@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
+  integrity sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-hoist-variables@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d"
+  integrity sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-member-expression-to-functions@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz#d5c70e4ad13b402c95156c7a53568f504e2fb7b8"
+  integrity sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
+  integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.2", "@babel/helper-module-transforms@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz#7de42f10d789b423eb902ebd24031ca77cb1e10e"
+  integrity sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.14.5"
+    "@babel/helper-replace-supers" "^7.14.5"
+    "@babel/helper-simple-access" "^7.14.5"
+    "@babel/helper-split-export-declaration" "^7.14.5"
+    "@babel/helper-validator-identifier" "^7.14.5"
+    "@babel/template" "^7.14.5"
+    "@babel/traverse" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-optimise-call-expression@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c"
+  integrity sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@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":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz#51439c913612958f54a987a4ffc9ee587a2045d6"
+  integrity sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-wrap-function" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-replace-supers@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz#0ecc0b03c41cd567b4024ea016134c28414abb94"
+  integrity sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.14.5"
+    "@babel/helper-optimise-call-expression" "^7.14.5"
+    "@babel/traverse" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-simple-access@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz#66ea85cf53ba0b4e588ba77fc813f53abcaa41c4"
+  integrity sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-skip-transparent-expression-wrappers@^7.12.1", "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz#96f486ac050ca9f44b009fbe5b7d394cab3a0ee4"
+  integrity sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-split-export-declaration@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
+  integrity sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==
+  dependencies:
+    "@babel/types" "^7.14.5"
+
+"@babel/helper-validator-identifier@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
+  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
+
+"@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.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz#5919d115bf0fe328b8a5d63bcb610f51601f2bff"
+  integrity sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.14.5"
+    "@babel/template" "^7.14.5"
+    "@babel/traverse" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@babel/helpers@^7.12.1", "@babel/helpers@^7.14.0":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.6.tgz#5b58306b95f1b47e2a0199434fa8658fa6c21635"
+  integrity sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==
+  dependencies:
+    "@babel/template" "^7.14.5"
+    "@babel/traverse" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@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/parser@^7.12.3", "@babel/parser@^7.14.3", "@babel/parser@^7.14.5":
+  version "7.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.6.tgz#d85cc68ca3cac84eae384c06f032921f5227f4b2"
+  integrity sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==
+
+"@babel/plugin-proposal-async-generator-functions@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.5.tgz#4024990e3dd74181f4f426ea657769ff49a2df39"
+  integrity sha512-tbD/CG3l43FIXxmu4a7RBe4zH7MLJ+S/lFowPFO7HetS2hyOZ/0nnnznegDuzFzfkyQYTxqdTH/hKmuBngaDAA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-remap-async-to-generator" "^7.14.5"
+    "@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.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.5.tgz#e581d5ccdfa187ea6ed73f56c6a21c1580b90fbf"
+  integrity sha512-VzMyY6PWNPPT3pxc5hi9LloKNr4SSrVCg7Yr6aZpW4Ym07r7KqSU/QXYwjXLVxqwSv0t/XSXkFoKBPUkZ8vb2A==
+  dependencies:
+    "@babel/compat-data" "^7.14.5"
+    "@babel/helper-compilation-targets" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.14.5"
+
+"@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.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz#8cc63e61e50f42e078e6f09be775a75f23ef9939"
+  integrity sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-transform-classes@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz#0e98e82097b38550b03b483f9b51a78de0acb2cf"
+  integrity sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.14.5"
+    "@babel/helper-function-name" "^7.14.5"
+    "@babel/helper-optimise-call-expression" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-replace-supers" "^7.14.5"
+    "@babel/helper-split-export-declaration" "^7.14.5"
+    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.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.5.tgz#d32ad19ff1a6da1e861dc62720d80d9776e3bf35"
+  integrity sha512-wU9tYisEbRMxqDezKUqC9GleLycCRoUsai9ddlsq54r8QRLaeEhc+d+9DqCG+kV9W2GgQjTZESPTpn5bAFMDww==
+  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.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz#dae384613de8f77c196a8869cbf602a44f7fc0eb"
+  integrity sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==
+  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.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz#7aaee0ea98283de94da98b28f8c35701429dad97"
+  integrity sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-simple-access" "^7.14.5"
+    babel-plugin-dynamic-import-node "^2.3.3"
+
+"@babel/plugin-transform-modules-systemjs@^7.12.1":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz#c75342ef8b30dcde4295d3401aae24e65638ed29"
+  integrity sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.14.5"
+    "@babel/helper-module-transforms" "^7.14.5"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-validator-identifier" "^7.14.5"
+    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.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.5.tgz#d537e8ee083ee6f6aa4f4eef9d2081d555746e4c"
+  integrity sha512-+Xe5+6MWFo311U8SchgeX5c1+lJM+eZDBZgD+tvXu9VVQPXwwVzeManMMjYX6xw2HczngfOSZjoFYKwdeB/Jvw==
+  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.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz#49662e86a1f3ddccac6363a7dfb1ff0a158afeb3"
+  integrity sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==
+  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.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz#baa92d15c4570411301a85a74c13534873885b65"
+  integrity sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==
+  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.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz#703b5d1edccd342179c2a99ee8c7065c2b4403cc"
+  integrity sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==
+  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.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
+  integrity sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==
+  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.5"
+
+"@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.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz#6bd40e57fe7de94aa904851963b5616652f73144"
+  integrity sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
+
+"@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.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.6.tgz#6e9c2d98da2507ebe0a883b100cde3c7279df36c"
+  integrity sha512-XlTdBq7Awr4FYIzqhmYY80WN0V0azF74DMPyFqVHBvf81ZUgc4X7ZOpx6O8eLDK6iM5cCQzeyJw0ynTaefixRA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.14.6"
+    "@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.14.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
+  integrity sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/parser" "^7.14.5"
+    "@babel/types" "^7.14.5"
+
+"@babel/traverse@^7.12.1", "@babel/traverse@^7.14.2", "@babel/traverse@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.5.tgz#c111b0f58afab4fea3d3385a406f692748c59870"
+  integrity sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/generator" "^7.14.5"
+    "@babel/helper-function-name" "^7.14.5"
+    "@babel/helper-hoist-variables" "^7.14.5"
+    "@babel/helper-split-export-declaration" "^7.14.5"
+    "@babel/parser" "^7.14.5"
+    "@babel/types" "^7.14.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
+"@babel/types@^7.12.1", "@babel/types@^7.14.2", "@babel/types@^7.14.5", "@babel/types@^7.4.4":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
+  integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.5"
+    to-fast-properties "^2.0.0"
+
+"@discoveryjs/json-ext@^0.5.0":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
+  integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
+
+"@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.7"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
+  integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
+
+"@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.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.0.4.tgz#f03ce6311c0883a83d04569e2c03c6238316d2aa"
+  integrity sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==
+
+"@webpack-cli/info@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.3.0.tgz#9d78a31101a960997a4acd41ffd9b9300627fe2b"
+  integrity sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==
+  dependencies:
+    envinfo "^7.7.3"
+
+"@webpack-cli/serve@^1.5.1":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.5.1.tgz#b5fde2f0f79c1e120307c415a4c1d5eb15a6f278"
+  integrity sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==
+
+"@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.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-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.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.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"
+
+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, bn.js@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+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@^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"
+
+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.0.1:
+  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.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
+browserslist@^4.16.6:
+  version "4.16.6"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
+  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
+  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"
+
+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-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, 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==
+
+caniuse-lite@^1.0.30001219:
+  version "1.0.30001237"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5"
+  integrity sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==
+
+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@^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"
+
+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.0:
+  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@^1.2.1, colorette@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
+  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
+
+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.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-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.14.0"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.14.0.tgz#b574dabf29184681d5b16357bd33d104df3d29a5"
+  integrity sha512-R4NS2eupxtiJU+VwgkF9WTpnSfZW4pogwKHd8bclWU2sp93Pr5S1uYJI84cMOubJRou7bcfL0vmwtLslWN5p3A==
+  dependencies:
+    browserslist "^4.16.6"
+    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"
+  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+
+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.22.1"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.22.1.tgz#1e5af959831ebb1d82992bf67b765052d8f0efc4"
+  integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==
+
+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.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
+  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.723:
+  version "1.3.752"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
+  integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==
+
+elliptic@^6.5.3:
+  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.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  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@^2.0.1:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.1.0.tgz#e9046a49c806ff04d6c1825e196c8f0091e8df4d"
+  integrity sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==
+  dependencies:
+    ini "1.3.7"
+
+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.6"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
+  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
+
+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.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"
+  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@1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
+  integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
+
+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.4.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
+  integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
+  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.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.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-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-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.1:
+  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.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-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.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
+  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
+  dependencies:
+    package-json "^6.3.0"
+
+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"
+
+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.48.0, "mime-db@>= 1.43.0 < 2":
+  version "1.48.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d"
+  integrity sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==
+
+mime-types@~2.1.24:
+  version "2.1.31"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.31.tgz#a00d76b74317c61f9c2db2218b8e9f8e9c5c9e6b"
+  integrity sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==
+  dependencies:
+    mime-db "1.48.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.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"
+
+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@^1.1.71:
+  version "1.1.73"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
+  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
+
+nodemon@^2.0.6:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.7.tgz#6f030a0a0ebe3ea1ba2a38f71bf9bab4841ced32"
+  integrity sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==
+  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"
+
+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.5:
+  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"
+
+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.0.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.0.0-alpha-7ec4c5597:
+  version "18.0.0-alpha-7ec4c5597"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-alpha-7ec4c5597.tgz#2dbb5f1fde3968001a056c34718ba8b9ce6b53ff"
+  integrity sha512-ZF0yJcbpIBMw/2Mb28rn9KquQtxL5uzlfDENsWIDqDabRcnYJGY1jkckC6EG35KufRV4UC4/Rp2r1AKL8cDLJg==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "0.21.0-alpha-7ec4c5597"
+
+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.0.0-alpha-7ec4c5597:
+  version "18.0.0-alpha-7ec4c5597"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-alpha-7ec4c5597.tgz#dd57901c736fd691c5456ec7aa69177cf2ce4ef5"
+  integrity sha512-W0cK4JlO5HSyXfp7rPRprFCKJeN4oJ51MImnTbp3lS/1g17d837BiMKqqyr9veBst2C4yrq5oXx6EKv9UsAqbw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
+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"
+
+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.0"
+  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.0.tgz#32650fd52c21ab252aa5d65b19310441c7e03aca"
+  integrity sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==
+  dependencies:
+    resolve "^1.9.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.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.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-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.7.1"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
+  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
+  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"
+
+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.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.4:
+  version "0.6.9"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
+  integrity sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==
+  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.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.21.0-alpha-7ec4c5597:
+  version "0.21.0-alpha-7ec4c5597"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-alpha-7ec4c5597.tgz#4bfbf5d8fbfcf3ddb7b7741d64175e3501f6fa59"
+  integrity sha512-UGZQDpLhPL1o2U4Kujt3WkDUWC3iNIm4OcErqv1f/fq8RQ/VxgmhlBryiZMaNF06qm3jXARebUWnlK3Tn2Sn5w==
+  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.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==
+
+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.3"
+  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
+  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
+
+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.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+  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.9"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz#8a595135def9592bda69709474f1cbeea7c2467f"
+  integrity sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==
+
+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:
+  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.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:
+  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"
+
+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==
+
+term-size@^2.1.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
+  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
+
+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.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
+  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
+
+type-is@~1.6.17, type-is@~1.6.18:
+  version "1.6.18"
+  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
+  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
+  dependencies:
+    media-typer "0.3.0"
+    mime-types "~2.1.24"
+
+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.3"
+  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.3.tgz#6b166e7094ad46313b2202da7ecc2cd7cc6e7aae"
+  integrity sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==
+  dependencies:
+    debug "^2.2.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-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.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.1.0"
+  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
+  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
+
+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@^4.1.0:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"
+  integrity sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==
+  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"
+
+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=
+
+v8-compile-cache@^2.2.0:
+  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==
+
+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.7.2"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.7.2.tgz#a718db600de6d3906a4357e059ae584a89f4c1a5"
+  integrity sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==
+  dependencies:
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^1.0.4"
+    "@webpack-cli/info" "^1.3.0"
+    "@webpack-cli/serve" "^1.5.1"
+    colorette "^1.2.1"
+    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"
+    v8-compile-cache "^2.2.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"
+
+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"

From f283d7524ac5c30c5190e1bbe1b047dce4479a0c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 15 Jun 2021 23:49:04 +0100
Subject: [PATCH 0628/1603] Use npm lockfile for fixture

---
 fixtures/ssr2/yarn.lock | 5260 ---------------------------------------
 1 file changed, 5260 deletions(-)
 delete mode 100644 fixtures/ssr2/yarn.lock

diff --git a/fixtures/ssr2/yarn.lock b/fixtures/ssr2/yarn.lock
deleted file mode 100644
index 0876393ac443..000000000000
--- a/fixtures/ssr2/yarn.lock
+++ /dev/null
@@ -1,5260 +0,0 @@
-# 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.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.14.5.tgz#23b08d740e83f49c5e59945fbf1b43e80bbf4edb"
-  integrity sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==
-  dependencies:
-    "@babel/highlight" "^7.14.5"
-
-"@babel/compat-data@^7.12.1", "@babel/compat-data@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.5.tgz#8ef4c18e58e801c5c95d3c1c0f2874a2680fadea"
-  integrity sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==
-
-"@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.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.5.tgz#848d7b9f031caca9d0cd0af01b063f226f52d785"
-  integrity sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==
-  dependencies:
-    "@babel/types" "^7.14.5"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
-"@babel/helper-annotate-as-pure@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz#7bf478ec3b71726d56a8ca5775b046fc29879e61"
-  integrity sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-builder-binary-assignment-operator-visitor@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz#b939b43f8c37765443a19ae74ad8b15978e0a191"
-  integrity sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==
-  dependencies:
-    "@babel/helper-explode-assignable-expression" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.13.16", "@babel/helper-compilation-targets@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz#7a99c5d0967911e972fe2c3411f7d5b498498ecf"
-  integrity sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==
-  dependencies:
-    "@babel/compat-data" "^7.14.5"
-    "@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.14.6":
-  version "7.14.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz#f114469b6c06f8b5c59c6c4e74621f5085362542"
-  integrity sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.14.5"
-    "@babel/helper-function-name" "^7.14.5"
-    "@babel/helper-member-expression-to-functions" "^7.14.5"
-    "@babel/helper-optimise-call-expression" "^7.14.5"
-    "@babel/helper-replace-supers" "^7.14.5"
-    "@babel/helper-split-export-declaration" "^7.14.5"
-
-"@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-explode-assignable-expression@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz#8aa72e708205c7bb643e45c73b4386cdf2a1f645"
-  integrity sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-function-name@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz#89e2c474972f15d8e233b52ee8c480e2cfcd50c4"
-  integrity sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.14.5"
-    "@babel/template" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-get-function-arity@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz#25fbfa579b0937eee1f3b805ece4ce398c431815"
-  integrity sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-hoist-variables@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz#e0dd27c33a78e577d7c8884916a3e7ef1f7c7f8d"
-  integrity sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-member-expression-to-functions@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz#d5c70e4ad13b402c95156c7a53568f504e2fb7b8"
-  integrity sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz#6d1a44df6a38c957aa7c312da076429f11b422f3"
-  integrity sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.14.2", "@babel/helper-module-transforms@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz#7de42f10d789b423eb902ebd24031ca77cb1e10e"
-  integrity sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==
-  dependencies:
-    "@babel/helper-module-imports" "^7.14.5"
-    "@babel/helper-replace-supers" "^7.14.5"
-    "@babel/helper-simple-access" "^7.14.5"
-    "@babel/helper-split-export-declaration" "^7.14.5"
-    "@babel/helper-validator-identifier" "^7.14.5"
-    "@babel/template" "^7.14.5"
-    "@babel/traverse" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-optimise-call-expression@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz#f27395a8619e0665b3f0364cddb41c25d71b499c"
-  integrity sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@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":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz#51439c913612958f54a987a4ffc9ee587a2045d6"
-  integrity sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.14.5"
-    "@babel/helper-wrap-function" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-replace-supers@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz#0ecc0b03c41cd567b4024ea016134c28414abb94"
-  integrity sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==
-  dependencies:
-    "@babel/helper-member-expression-to-functions" "^7.14.5"
-    "@babel/helper-optimise-call-expression" "^7.14.5"
-    "@babel/traverse" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-simple-access@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz#66ea85cf53ba0b4e588ba77fc813f53abcaa41c4"
-  integrity sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-skip-transparent-expression-wrappers@^7.12.1", "@babel/helper-skip-transparent-expression-wrappers@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz#96f486ac050ca9f44b009fbe5b7d394cab3a0ee4"
-  integrity sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-split-export-declaration@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz#22b23a54ef51c2b7605d851930c1976dd0bc693a"
-  integrity sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==
-  dependencies:
-    "@babel/types" "^7.14.5"
-
-"@babel/helper-validator-identifier@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8"
-  integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==
-
-"@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.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz#5919d115bf0fe328b8a5d63bcb610f51601f2bff"
-  integrity sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==
-  dependencies:
-    "@babel/helper-function-name" "^7.14.5"
-    "@babel/template" "^7.14.5"
-    "@babel/traverse" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@babel/helpers@^7.12.1", "@babel/helpers@^7.14.0":
-  version "7.14.6"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.14.6.tgz#5b58306b95f1b47e2a0199434fa8658fa6c21635"
-  integrity sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==
-  dependencies:
-    "@babel/template" "^7.14.5"
-    "@babel/traverse" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@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/parser@^7.12.3", "@babel/parser@^7.14.3", "@babel/parser@^7.14.5":
-  version "7.14.6"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.6.tgz#d85cc68ca3cac84eae384c06f032921f5227f4b2"
-  integrity sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==
-
-"@babel/plugin-proposal-async-generator-functions@^7.12.1":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.5.tgz#4024990e3dd74181f4f426ea657769ff49a2df39"
-  integrity sha512-tbD/CG3l43FIXxmu4a7RBe4zH7MLJ+S/lFowPFO7HetS2hyOZ/0nnnznegDuzFzfkyQYTxqdTH/hKmuBngaDAA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/helper-remap-async-to-generator" "^7.14.5"
-    "@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.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.5.tgz#e581d5ccdfa187ea6ed73f56c6a21c1580b90fbf"
-  integrity sha512-VzMyY6PWNPPT3pxc5hi9LloKNr4SSrVCg7Yr6aZpW4Ym07r7KqSU/QXYwjXLVxqwSv0t/XSXkFoKBPUkZ8vb2A==
-  dependencies:
-    "@babel/compat-data" "^7.14.5"
-    "@babel/helper-compilation-targets" "^7.14.5"
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.14.5"
-
-"@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.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz#8cc63e61e50f42e078e6f09be775a75f23ef9939"
-  integrity sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-
-"@babel/plugin-transform-classes@^7.12.1":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz#0e98e82097b38550b03b483f9b51a78de0acb2cf"
-  integrity sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.14.5"
-    "@babel/helper-function-name" "^7.14.5"
-    "@babel/helper-optimise-call-expression" "^7.14.5"
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/helper-replace-supers" "^7.14.5"
-    "@babel/helper-split-export-declaration" "^7.14.5"
-    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.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.5.tgz#d32ad19ff1a6da1e861dc62720d80d9776e3bf35"
-  integrity sha512-wU9tYisEbRMxqDezKUqC9GleLycCRoUsai9ddlsq54r8QRLaeEhc+d+9DqCG+kV9W2GgQjTZESPTpn5bAFMDww==
-  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.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz#dae384613de8f77c196a8869cbf602a44f7fc0eb"
-  integrity sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==
-  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.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz#7aaee0ea98283de94da98b28f8c35701429dad97"
-  integrity sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==
-  dependencies:
-    "@babel/helper-module-transforms" "^7.14.5"
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/helper-simple-access" "^7.14.5"
-    babel-plugin-dynamic-import-node "^2.3.3"
-
-"@babel/plugin-transform-modules-systemjs@^7.12.1":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz#c75342ef8b30dcde4295d3401aae24e65638ed29"
-  integrity sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==
-  dependencies:
-    "@babel/helper-hoist-variables" "^7.14.5"
-    "@babel/helper-module-transforms" "^7.14.5"
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/helper-validator-identifier" "^7.14.5"
-    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.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.5.tgz#d537e8ee083ee6f6aa4f4eef9d2081d555746e4c"
-  integrity sha512-+Xe5+6MWFo311U8SchgeX5c1+lJM+eZDBZgD+tvXu9VVQPXwwVzeManMMjYX6xw2HczngfOSZjoFYKwdeB/Jvw==
-  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.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz#49662e86a1f3ddccac6363a7dfb1ff0a158afeb3"
-  integrity sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==
-  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.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz#baa92d15c4570411301a85a74c13534873885b65"
-  integrity sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==
-  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.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz#703b5d1edccd342179c2a99ee8c7065c2b4403cc"
-  integrity sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==
-  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.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz#39749f0ee1efd8a1bd729152cf5f78f1d247a44a"
-  integrity sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==
-  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.5"
-
-"@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.14.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz#6bd40e57fe7de94aa904851963b5616652f73144"
-  integrity sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.14.5"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
-
-"@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.14.6"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.6.tgz#6e9c2d98da2507ebe0a883b100cde3c7279df36c"
-  integrity sha512-XlTdBq7Awr4FYIzqhmYY80WN0V0azF74DMPyFqVHBvf81ZUgc4X7ZOpx6O8eLDK6iM5cCQzeyJw0ynTaefixRA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.14.6"
-    "@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.14.6"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
-  integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
-"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.14.5.tgz#a9bc9d8b33354ff6e55a9c60d1109200a68974f4"
-  integrity sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==
-  dependencies:
-    "@babel/code-frame" "^7.14.5"
-    "@babel/parser" "^7.14.5"
-    "@babel/types" "^7.14.5"
-
-"@babel/traverse@^7.12.1", "@babel/traverse@^7.14.2", "@babel/traverse@^7.14.5":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.5.tgz#c111b0f58afab4fea3d3385a406f692748c59870"
-  integrity sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==
-  dependencies:
-    "@babel/code-frame" "^7.14.5"
-    "@babel/generator" "^7.14.5"
-    "@babel/helper-function-name" "^7.14.5"
-    "@babel/helper-hoist-variables" "^7.14.5"
-    "@babel/helper-split-export-declaration" "^7.14.5"
-    "@babel/parser" "^7.14.5"
-    "@babel/types" "^7.14.5"
-    debug "^4.1.0"
-    globals "^11.1.0"
-
-"@babel/types@^7.12.1", "@babel/types@^7.14.2", "@babel/types@^7.14.5", "@babel/types@^7.4.4":
-  version "7.14.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff"
-  integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.14.5"
-    to-fast-properties "^2.0.0"
-
-"@discoveryjs/json-ext@^0.5.0":
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
-  integrity sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==
-
-"@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.7"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.7.tgz#98a993516c859eb0d5c4c8f098317a9ea68db9ad"
-  integrity sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==
-
-"@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.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.0.4.tgz#f03ce6311c0883a83d04569e2c03c6238316d2aa"
-  integrity sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==
-
-"@webpack-cli/info@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.3.0.tgz#9d78a31101a960997a4acd41ffd9b9300627fe2b"
-  integrity sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==
-  dependencies:
-    envinfo "^7.7.3"
-
-"@webpack-cli/serve@^1.5.1":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.5.1.tgz#b5fde2f0f79c1e120307c415a4c1d5eb15a6f278"
-  integrity sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==
-
-"@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.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-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.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.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"
-
-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, bn.js@^5.1.1:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
-  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
-
-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@^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"
-
-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.0.1:
-  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.1"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
-  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
-  dependencies:
-    bn.js "^5.1.1"
-    browserify-rsa "^4.0.1"
-    create-hash "^1.2.0"
-    create-hmac "^1.1.7"
-    elliptic "^6.5.3"
-    inherits "^2.0.4"
-    parse-asn1 "^5.1.5"
-    readable-stream "^3.6.0"
-    safe-buffer "^5.2.0"
-
-browserify-zlib@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
-  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
-  dependencies:
-    pako "~1.0.5"
-
-browserslist@^4.16.6:
-  version "4.16.6"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2"
-  integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==
-  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"
-
-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-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, 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==
-
-caniuse-lite@^1.0.30001219:
-  version "1.0.30001237"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz#4b7783661515b8e7151fc6376cfd97f0e427b9e5"
-  integrity sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==
-
-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@^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"
-
-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.0:
-  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@^1.2.1, colorette@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
-  integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
-
-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.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-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.14.0"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.14.0.tgz#b574dabf29184681d5b16357bd33d104df3d29a5"
-  integrity sha512-R4NS2eupxtiJU+VwgkF9WTpnSfZW4pogwKHd8bclWU2sp93Pr5S1uYJI84cMOubJRou7bcfL0vmwtLslWN5p3A==
-  dependencies:
-    browserslist "^4.16.6"
-    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"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
-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.22.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.22.1.tgz#1e5af959831ebb1d82992bf67b765052d8f0efc4"
-  integrity sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==
-
-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.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
-  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.723:
-  version "1.3.752"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz#0728587f1b9b970ec9ffad932496429aef750d09"
-  integrity sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A==
-
-elliptic@^6.5.3:
-  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.1.7"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
-  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
-  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@^2.0.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-2.1.0.tgz#e9046a49c806ff04d6c1825e196c8f0091e8df4d"
-  integrity sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==
-  dependencies:
-    ini "1.3.7"
-
-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.6"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
-  integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
-
-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.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"
-  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@1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.7.tgz#a09363e1911972ea16d7a8851005d84cf09a9a84"
-  integrity sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ==
-
-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.4.0"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.4.0.tgz#8e9fc8e15027b011418026e98f0e6f4d86305cc1"
-  integrity sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==
-  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.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.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-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-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.1:
-  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.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-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.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
-  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
-  dependencies:
-    package-json "^6.3.0"
-
-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"
-
-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.48.0, "mime-db@>= 1.43.0 < 2":
-  version "1.48.0"
-  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.48.0.tgz#e35b31045dd7eada3aaad537ed88a33afbef2d1d"
-  integrity sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==
-
-mime-types@~2.1.24:
-  version "2.1.31"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.31.tgz#a00d76b74317c61f9c2db2218b8e9f8e9c5c9e6b"
-  integrity sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==
-  dependencies:
-    mime-db "1.48.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.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"
-
-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@^1.1.71:
-  version "1.1.73"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.73.tgz#dd4e81ddd5277ff846b80b52bb40c49edf7a7b20"
-  integrity sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg==
-
-nodemon@^2.0.6:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.7.tgz#6f030a0a0ebe3ea1ba2a38f71bf9bab4841ced32"
-  integrity sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==
-  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"
-
-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.5:
-  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"
-
-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.0.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.0.0-alpha-7ec4c5597:
-  version "18.0.0-alpha-7ec4c5597"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.0.0-alpha-7ec4c5597.tgz#2dbb5f1fde3968001a056c34718ba8b9ce6b53ff"
-  integrity sha512-ZF0yJcbpIBMw/2Mb28rn9KquQtxL5uzlfDENsWIDqDabRcnYJGY1jkckC6EG35KufRV4UC4/Rp2r1AKL8cDLJg==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "0.21.0-alpha-7ec4c5597"
-
-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.0.0-alpha-7ec4c5597:
-  version "18.0.0-alpha-7ec4c5597"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.0.0-alpha-7ec4c5597.tgz#dd57901c736fd691c5456ec7aa69177cf2ce4ef5"
-  integrity sha512-W0cK4JlO5HSyXfp7rPRprFCKJeN4oJ51MImnTbp3lS/1g17d837BiMKqqyr9veBst2C4yrq5oXx6EKv9UsAqbw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
-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"
-
-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.0"
-  resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.0.tgz#32650fd52c21ab252aa5d65b19310441c7e03aca"
-  integrity sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==
-  dependencies:
-    resolve "^1.9.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.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.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-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.7.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
-  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
-  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"
-
-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.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.4:
-  version "0.6.9"
-  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.9.tgz#b489eef7c9a2ce43727627011429cf833a7183e6"
-  integrity sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==
-  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.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.21.0-alpha-7ec4c5597:
-  version "0.21.0-alpha-7ec4c5597"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0-alpha-7ec4c5597.tgz#4bfbf5d8fbfcf3ddb7b7741d64175e3501f6fa59"
-  integrity sha512-UGZQDpLhPL1o2U4Kujt3WkDUWC3iNIm4OcErqv1f/fq8RQ/VxgmhlBryiZMaNF06qm3jXARebUWnlK3Tn2Sn5w==
-  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.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==
-
-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.3"
-  resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
-  integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
-
-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.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
-  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.9"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz#8a595135def9592bda69709474f1cbeea7c2467f"
-  integrity sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==
-
-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:
-  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.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:
-  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"
-
-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==
-
-term-size@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
-  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
-
-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.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
-type-is@~1.6.17, type-is@~1.6.18:
-  version "1.6.18"
-  resolved "https://registry.yarnpkg.com/type-is/-/type-is-1.6.18.tgz#4e552cd05df09467dcbc4ef739de89f2cf37c131"
-  integrity sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==
-  dependencies:
-    media-typer "0.3.0"
-    mime-types "~2.1.24"
-
-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.3"
-  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.3.tgz#6b166e7094ad46313b2202da7ecc2cd7cc6e7aae"
-  integrity sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==
-  dependencies:
-    debug "^2.2.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-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.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.1.0"
-  resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
-  integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
-
-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@^4.1.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"
-  integrity sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==
-  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"
-
-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=
-
-v8-compile-cache@^2.2.0:
-  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==
-
-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.7.2"
-  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-4.7.2.tgz#a718db600de6d3906a4357e059ae584a89f4c1a5"
-  integrity sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==
-  dependencies:
-    "@discoveryjs/json-ext" "^0.5.0"
-    "@webpack-cli/configtest" "^1.0.4"
-    "@webpack-cli/info" "^1.3.0"
-    "@webpack-cli/serve" "^1.5.1"
-    colorette "^1.2.1"
-    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"
-    v8-compile-cache "^2.2.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"
-
-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"

From c0a77029c4acb60844108fbbd7f5e960b1d81b7c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 15 Jun 2021 23:49:41 +0100
Subject: [PATCH 0629/1603] Remove unused variable

---
 fixtures/ssr2/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fixtures/ssr2/src/index.js b/fixtures/ssr2/src/index.js
index 0d41da456e3a..adf035ad1a88 100644
--- a/fixtures/ssr2/src/index.js
+++ b/fixtures/ssr2/src/index.js
@@ -9,4 +9,4 @@
 import {hydrateRoot} from 'react-dom';
 import App from './App';
 
-const root = hydrateRoot(document, <App assets={window.assetManifest} />);
+hydrateRoot(document, <App assets={window.assetManifest} />);

From 6cbf2a8b3b13e5510467158967b85b0013f6f849 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 15 Jun 2021 23:52:15 +0100
Subject: [PATCH 0630/1603] Add missing package lock

---
 fixtures/ssr2/package-lock.json | 14303 ++++++++++++++++++++++++++++++
 1 file changed, 14303 insertions(+)
 create mode 100644 fixtures/ssr2/package-lock.json

diff --git a/fixtures/ssr2/package-lock.json b/fixtures/ssr2/package-lock.json
new file mode 100644
index 000000000000..3e6c6269b951
--- /dev/null
+++ b/fixtures/ssr2/package-lock.json
@@ -0,0 +1,14303 @@
+{
+  "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.0.0-alpha-7ec4c5597",
+        "react-dom": "18.0.0-alpha-7ec4c5597",
+        "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.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "dependencies": {
+        "@babel/highlight": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz",
+      "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "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/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/core/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "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.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
+      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "dependencies": {
+        "@babel/types": "^7.14.5",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-annotate-as-pure": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
+      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz",
+      "integrity": "sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==",
+      "dependencies": {
+        "@babel/helper-explode-assignable-expression": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
+      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
+      "dependencies": {
+        "@babel/compat-data": "^7.14.5",
+        "@babel/helper-validator-option": "^7.14.5",
+        "browserslist": "^4.16.6",
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=6.9.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-explode-assignable-expression": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz",
+      "integrity": "sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
+      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+      "dependencies": {
+        "@babel/helper-get-function-arity": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-get-function-arity": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
+      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-hoist-variables": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
+      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-member-expression-to-functions": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz",
+      "integrity": "sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
+      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
+      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.14.5",
+        "@babel/helper-replace-supers": "^7.14.5",
+        "@babel/helper-simple-access": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-optimise-call-expression": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
+      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
+      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-remap-async-to-generator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz",
+      "integrity": "sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.14.5",
+        "@babel/helper-wrap-function": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-replace-supers": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
+      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
+      "dependencies": {
+        "@babel/helper-member-expression-to-functions": "^7.14.5",
+        "@babel/helper-optimise-call-expression": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-simple-access": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
+      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz",
+      "integrity": "sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-split-export-declaration": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
+      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+      "dependencies": {
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
+      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-wrap-function": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz",
+      "integrity": "sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
+      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+      "dependencies": {
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/highlight": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
+      "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==",
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.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.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
+      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+      "dependencies": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/parser": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz",
+      "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==",
+      "dependencies": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-hoist-variables": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/parser": "^7.14.5",
+        "@babel/types": "^7.14.5",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@babel/traverse/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/@babel/types": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz",
+      "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "dependencies": {
+        "defer-to-connect": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
+    "node_modules/@webassemblyjs/ast": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/@webassemblyjs/floating-point-hex-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA=="
+    },
+    "node_modules/@webassemblyjs/helper-api-error": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw=="
+    },
+    "node_modules/@webassemblyjs/helper-buffer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA=="
+    },
+    "node_modules/@webassemblyjs/helper-code-frame": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+      "dependencies": {
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-fsm": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw=="
+    },
+    "node_modules/@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0"
+      }
+    },
+    "node_modules/@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw=="
+    },
+    "node_modules/@webassemblyjs/helper-wasm-section": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+      "dependencies": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+      "dependencies": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w=="
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-parser": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+      "dependencies": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "node_modules/@webpack-cli/configtest": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
+      "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
+      "peerDependencies": {
+        "webpack": "4.x.x || 5.x.x",
+        "webpack-cli": "4.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.3.0.tgz",
+      "integrity": "sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==",
+      "dependencies": {
+        "envinfo": "^7.7.3"
+      },
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.1.tgz",
+      "integrity": "sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==",
+      "peerDependencies": {
+        "webpack-cli": "4.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    },
+    "node_modules/@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
+    "node_modules/accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "dependencies": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/acorn": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/ajv": {
+      "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"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-errors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+      "peerDependencies": {
+        "ajv": ">=5.0.0"
+      }
+    },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/ansi-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+      "dependencies": {
+        "string-width": "^3.0.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "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"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/anymatch": {
+      "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"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    },
+    "node_modules/arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "node_modules/array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "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"
+      }
+    },
+    "node_modules/assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
+      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "util": "0.10.3"
+      }
+    },
+    "node_modules/assert/node_modules/inherits": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+      "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
+    },
+    "node_modules/assert/node_modules/util": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+      "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+      "dependencies": {
+        "inherits": "2.0.1"
+      }
+    },
+    "node_modules/assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
+      "optional": true
+    },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
+    "node_modules/babel-loader": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 6.9"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "webpack": ">=2"
+      }
+    },
+    "node_modules/babel-loader/node_modules/schema-utils": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+      "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/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "dependencies": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/babel-plugin-macros/node_modules/resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
+      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
+    },
+    "node_modules/babel-preset-react-app": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz",
+      "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"
+      }
+    },
+    "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/babel-preset-react-app/node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz",
+      "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.14.5",
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-member-expression-to-functions": "^7.14.5",
+        "@babel/helper-optimise-call-expression": "^7.14.5",
+        "@babel/helper-replace-supers": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz",
+      "integrity": "sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.14.5",
+        "regexpu-core": "^4.7.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.5.tgz",
+      "integrity": "sha512-tbD/CG3l43FIXxmu4a7RBe4zH7MLJ+S/lFowPFO7HetS2hyOZ/0nnnznegDuzFzfkyQYTxqdTH/hKmuBngaDAA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/helper-remap-async-to-generator": "^7.14.5",
+        "@babel/plugin-syntax-async-generators": "^7.8.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
+      "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==",
+      "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-preset-react-app/node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-dynamic-import": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz",
+      "integrity": "sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz",
+      "integrity": "sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-json-strings": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz",
+      "integrity": "sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-json-strings": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz",
+      "integrity": "sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz",
+      "integrity": "sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==",
+      "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-preset-react-app/node_modules/@babel/plugin-proposal-numeric-separator": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz",
+      "integrity": "sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==",
+      "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-preset-react-app/node_modules/@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.5.tgz",
+      "integrity": "sha512-VzMyY6PWNPPT3pxc5hi9LloKNr4SSrVCg7Yr6aZpW4Ym07r7KqSU/QXYwjXLVxqwSv0t/XSXkFoKBPUkZ8vb2A==",
+      "dependencies": {
+        "@babel/compat-data": "^7.14.5",
+        "@babel/helper-compilation-targets": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+        "@babel/plugin-transform-parameters": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz",
+      "integrity": "sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-optional-chaining": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-private-methods": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz",
+      "integrity": "sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-async-generators": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-class-properties": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.14.5.tgz",
+      "integrity": "sha512-c4sZMRWL4GSvP1EXy0woIP7m4jkVcEuG8R1TOZxPBPtp4FSM/kiPZub9UIs/Jrb5ZAOzvTUSGYrWsrSu1JvoPw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-flow": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.14.5.tgz",
+      "integrity": "sha512-9WK5ZwKCdWHxVuU13XNT6X73FGmutAXeor5lGFq6qhOFtMFUF4jkbijuyUdZZlpYq6E2hZeZf/u3959X9wsv0Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-json-strings": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
+      "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-numeric-separator": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-optional-chaining": {
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-top-level-await": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz",
+      "integrity": "sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz",
+      "integrity": "sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz",
+      "integrity": "sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
+      "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-classes": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz",
+      "integrity": "sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.14.5",
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-optimise-call-expression": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/helper-replace-supers": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz",
+      "integrity": "sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.5.tgz",
+      "integrity": "sha512-wU9tYisEbRMxqDezKUqC9GleLycCRoUsai9ddlsq54r8QRLaeEhc+d+9DqCG+kV9W2GgQjTZESPTpn5bAFMDww==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz",
+      "integrity": "sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz",
+      "integrity": "sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-exponentiation-operator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz",
+      "integrity": "sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==",
+      "dependencies": {
+        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-flow-strip-types": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz",
+      "integrity": "sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==",
+      "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-preset-react-app/node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz",
+      "integrity": "sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz",
+      "integrity": "sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==",
+      "dependencies": {
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-literals": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz",
+      "integrity": "sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz",
+      "integrity": "sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-amd": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-commonjs": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
+      "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/helper-simple-access": "^7.14.5",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz",
+      "integrity": "sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==",
+      "dependencies": {
+        "@babel/helper-hoist-variables": "^7.14.5",
+        "@babel/helper-module-transforms": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "babel-plugin-dynamic-import-node": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz",
+      "integrity": "sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==",
+      "dependencies": {
+        "@babel/helper-module-transforms": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.5.tgz",
+      "integrity": "sha512-+Xe5+6MWFo311U8SchgeX5c1+lJM+eZDBZgD+tvXu9VVQPXwwVzeManMMjYX6xw2HczngfOSZjoFYKwdeB/Jvw==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz",
+      "integrity": "sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz",
+      "integrity": "sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/helper-replace-supers": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz",
+      "integrity": "sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz",
+      "integrity": "sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz",
+      "integrity": "sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz",
+      "integrity": "sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==",
+      "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.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz",
+      "integrity": "sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==",
+      "dependencies": {
+        "@babel/plugin-transform-react-jsx": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz",
+      "integrity": "sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz",
+      "integrity": "sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz",
+      "integrity": "sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==",
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-regenerator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz",
+      "integrity": "sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==",
+      "dependencies": {
+        "regenerator-transform": "^0.14.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz",
+      "integrity": "sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
+      "integrity": "sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-spread": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz",
+      "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz",
+      "integrity": "sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz",
+      "integrity": "sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz",
+      "integrity": "sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.6.tgz",
+      "integrity": "sha512-XlTdBq7Awr4FYIzqhmYY80WN0V0azF74DMPyFqVHBvf81ZUgc4X7ZOpx6O8eLDK6iM5cCQzeyJw0ynTaefixRA==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.14.6",
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-typescript": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz",
+      "integrity": "sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz",
+      "integrity": "sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==",
+      "dependencies": {
+        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.1.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz",
+      "integrity": "sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==",
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.14.5",
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz",
+      "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-numeric-separator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz",
+      "integrity": "sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-optional-chaining": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-modules": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-react": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.12.1.tgz",
+      "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"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-react/node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz",
+      "integrity": "sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.14.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/@babel/preset-typescript": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz",
+      "integrity": "sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==",
+      "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-preset-react-app/node_modules/@babel/runtime": {
+      "version": "7.12.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
+      "integrity": "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==",
+      "dependencies": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/debug": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/babel-preset-react-app/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    },
+    "node_modules/babel-preset-react-app/node_modules/resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base/node_modules/define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "node_modules/bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
+    "node_modules/bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
+    },
+    "node_modules/body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/boxen": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/ansi-styles": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/boxen/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "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",
+      "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"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/boxen/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/boxen/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/boxen/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/is-fullwidth-code-point": {
+      "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==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/boxen/node_modules/supports-color": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "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"
+      }
+    },
+    "node_modules/braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
+    },
+    "node_modules/browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/browserify-cipher": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "dependencies": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "node_modules/browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "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"
+      }
+    },
+    "node_modules/browserify-rsa": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "dependencies": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      }
+    },
+    "node_modules/browserify-rsa/node_modules/bn.js": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
+      "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
+    },
+    "node_modules/browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "dependencies": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      }
+    },
+    "node_modules/browserify-sign/node_modules/bn.js": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
+      "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
+    },
+    "node_modules/browserify-sign/node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "dependencies": {
+        "pako": "~1.0.5"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.16.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+      "dependencies": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4",
+        "isarray": "^1.0.0"
+      }
+    },
+    "node_modules/buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "node_modules/buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
+    },
+    "node_modules/builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
+    },
+    "node_modules/bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/cacache": {
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+      "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"
+      }
+    },
+    "node_modules/cacache/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cacheable-request": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/get-stream": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cacheable-request/node_modules/lowercase-keys": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dependencies": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001237",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz",
+      "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/browserslist"
+      }
+    },
+    "node_modules/chalk": {
+      "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"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/braces": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dependencies": {
+        "fill-range": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar/node_modules/fill-range": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/chokidar/node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/chokidar/node_modules/to-regex-range": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+    },
+    "node_modules/chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+    },
+    "node_modules/cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "node_modules/collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "dependencies": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/color-convert": {
+      "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"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "node_modules/colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+    },
+    "node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+    },
+    "node_modules/component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+    },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "node_modules/concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "engines": [
+        "node >= 0.8"
+      ],
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "node_modules/concurrently": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-5.3.0.tgz",
+      "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"
+      },
+      "bin": {
+        "concurrently": "bin/concurrently.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/concurrently/node_modules/supports-color": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/configstore/node_modules/make-dir": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/configstore/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/console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
+    },
+    "node_modules/constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
+    },
+    "node_modules/content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "dependencies": {
+        "safe-buffer": "5.1.2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/content-disposition/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "dependencies": {
+        "safe-buffer": "~5.1.1"
+      }
+    },
+    "node_modules/convert-source-map/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "node_modules/copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "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"
+      }
+    },
+    "node_modules/copy-concurrently/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/core-js-compat": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.14.0.tgz",
+      "integrity": "sha512-R4NS2eupxtiJU+VwgkF9WTpnSfZW4pogwKHd8bclWU2sp93Pr5S1uYJI84cMOubJRou7bcfL0vmwtLslWN5p3A==",
+      "dependencies": {
+        "browserslist": "^4.16.6",
+        "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",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/parse-json": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "dependencies": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      }
+    },
+    "node_modules/create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/create-hmac": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "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"
+      }
+    },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "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",
+      "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"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/crypto-random-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cyclist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
+      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
+    },
+    "node_modules/date-fns": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "dependencies": {
+        "mimic-response": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
+    },
+    "node_modules/define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "dependencies": {
+        "object-keys": "^1.0.12"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "dependencies": {
+        "is-descriptor": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-accessor-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-accessor-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-data-descriptor": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-data-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/define-property/node_modules/is-descriptor": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+      "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/define-property/node_modules/kind-of": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/des.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
+      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "node_modules/destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "node_modules/diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "dependencies": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      }
+    },
+    "node_modules/domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
+      "engines": {
+        "node": ">=0.4",
+        "npm": ">=1.2"
+      }
+    },
+    "node_modules/dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "dependencies": {
+        "is-obj": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
+    "node_modules/duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "dependencies": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "node_modules/ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.3.752",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+      "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A=="
+    },
+    "node_modules/elliptic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "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"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
+    "node_modules/emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/end-of-stream": {
+      "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"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/enhanced-resolve/node_modules/memory-fs": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+      "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+      "dependencies": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=4.3.0 <5.0.0 || >=5.10"
+      }
+    },
+    "node_modules/envinfo": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
+    "node_modules/error-ex": {
+      "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"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "dependencies": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/esrecurse": {
+      "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"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esrecurse/node_modules/estraverse": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "engines": {
+        "node": ">=0.8.x"
+      }
+    },
+    "node_modules/evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "dependencies": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "node_modules/execa": {
+      "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"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/expand-brackets": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/express/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "dependencies": {
+        "is-extendable": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/extglob/node_modules/define-property": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "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=="
+    },
+    "node_modules/fast-json-stable-stringify": {
+      "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=="
+    },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
+      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow=="
+    },
+    "node_modules/figgy-pudding": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
+    },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
+    "node_modules/fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/find-cache-dir": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/find-up": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "node_modules/for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "dependencies": {
+        "map-cache": "^0.2.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "dependencies": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "node_modules/fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "dependencies": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      }
+    },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "node_modules/gensync": {
+      "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==",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/get-intrinsic": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "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": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "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.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"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/global-dirs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.1.0.tgz",
+      "integrity": "sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==",
+      "dependencies": {
+        "ini": "1.3.7"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/got/node_modules/get-stream": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+      "dependencies": {
+        "pump": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
+    },
+    "node_modules/has": {
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "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",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-values/node_modules/kind-of": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+      "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/hash-base/node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "node_modules/hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
+      "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",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+    },
+    "node_modules/http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+    },
+    "node_modules/http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/http-errors/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "node_modules/https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+    },
+    "node_modules/human-signals": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
+      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "engines": {
+        "node": ">=10.17.0"
+      }
+    },
+    "node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+    },
+    "node_modules/ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
+    },
+    "node_modules/import-fresh": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/import-fresh/node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/import-local": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
+      "integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
+      "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",
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/locate-path": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/p-locate": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/path-exists": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/import-local/node_modules/pkg-dir": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
+    "node_modules/infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "node_modules/ini": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
+      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
+    },
+    "node_modules/interpret": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
+      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/ipaddr.js": {
+      "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==",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/is-accessor-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+    },
+    "node_modules/is-binary-path": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "node_modules/is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "dependencies": {
+        "ci-info": "^2.0.0"
+      },
+      "bin": {
+        "is-ci": "bin.js"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "dependencies": {
+        "kind-of": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "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/is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-installed-globally": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz",
+      "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==",
+      "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",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz",
+      "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-path-inside": {
+      "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==",
+      "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",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "node_modules/is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+    },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
+    },
+    "node_modules/json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+    },
+    "node_modules/json-parse-even-better-errors": {
+      "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=="
+    },
+    "node_modules/json-schema-traverse": {
+      "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=="
+    },
+    "node_modules/json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "dependencies": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/latest-version": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
+      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
+      "dependencies": {
+        "package-json": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+    },
+    "node_modules/loader-runner": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
+      "engines": {
+        "node": ">=4.3.0 <5.0.0 || >=5.10"
+      }
+    },
+    "node_modules/loader-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "dependencies": {
+        "minimist": "^1.2.0"
+      },
+      "bin": {
+        "json5": "lib/cli.js"
+      }
+    },
+    "node_modules/locate-path": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "node_modules/loose-envify": {
+      "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"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/lru-cache": {
+      "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"
+      }
+    },
+    "node_modules/make-dir": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "dependencies": {
+        "object-visit": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "dependencies": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/memory-fs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "dependencies": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "node_modules/merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "node_modules/merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "node_modules/methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dependencies": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/micromatch/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "dependencies": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      },
+      "bin": {
+        "miller-rabin": "bin/miller-rabin"
+      }
+    },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.48.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
+      "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.31",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
+      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
+      "dependencies": {
+        "mime-db": "1.48.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "node_modules/minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
+    },
+    "node_modules/minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
+    "node_modules/mississippi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
+    "node_modules/mixin-deep": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "dependencies": {
+        "minimist": "^1.2.5"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "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"
+      }
+    },
+    "node_modules/move-concurrently/node_modules/rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "node_modules/nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
+    "node_modules/nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nanomatch/node_modules/define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dependencies": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nanomatch/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/nanomatch/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "node_modules/node-libs-browser": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
+      "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/node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "1.1.73",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
+    },
+    "node_modules/nodemon": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
+      "integrity": "sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==",
+      "hasInstallScript": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/nodemon/node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "node_modules/nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "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"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-url": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/npm-run-path": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "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/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "dependencies": {
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dependencies": {
+        "ee-first": "1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/onetime": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+    },
+    "node_modules/p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-limit": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/p-locate": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/package-json": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
+      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
+    "node_modules/parallel-transform": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
+      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
+      "dependencies": {
+        "cyclist": "^1.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      }
+    },
+    "node_modules/parent-module": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "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"
+      }
+    },
+    "node_modules/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dependencies": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
+      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ=="
+    },
+    "node_modules/path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
+      "optional": true
+    },
+    "node_modules/path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "dependencies": {
+        "node-modules-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/pkg-dir": {
+      "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"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin-prettier.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "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=="
+    },
+    "node_modules/promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+    },
+    "node_modules/proxy-addr": {
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+    },
+    "node_modules/pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w=="
+    },
+    "node_modules/public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "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"
+      }
+    },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "dependencies": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      }
+    },
+    "node_modules/pumpify/node_modules/pump": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "node_modules/punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+    },
+    "node_modules/pupa": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "dependencies": {
+        "escape-goat": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
+    "node_modules/randombytes": {
+      "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"
+      }
+    },
+    "node_modules/randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "dependencies": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "node_modules/range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "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/rc/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
+    "node_modules/react": {
+      "version": "18.0.0-alpha-7ec4c5597",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0-alpha-7ec4c5597.tgz",
+      "integrity": "sha512-W0cK4JlO5HSyXfp7rPRprFCKJeN4oJ51MImnTbp3lS/1g17d837BiMKqqyr9veBst2C4yrq5oXx6EKv9UsAqbw==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.0.0-alpha-7ec4c5597",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0-alpha-7ec4c5597.tgz",
+      "integrity": "sha512-ZF0yJcbpIBMw/2Mb28rn9KquQtxL5uzlfDENsWIDqDabRcnYJGY1jkckC6EG35KufRV4UC4/Rp2r1AKL8cDLJg==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "0.21.0-alpha-7ec4c5597"
+      },
+      "peerDependencies": {
+        "react": "18.0.0-alpha-7ec4c5597"
+      }
+    },
+    "node_modules/react-error-boundary": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz",
+      "integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
+    "node_modules/read-pkg": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
+      "integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=",
+      "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/pify": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "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"
+      }
+    },
+    "node_modules/readable-stream/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "node_modules/readable-stream/node_modules/string_decoder": {
+      "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"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/rechoir": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
+      "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
+      "dependencies": {
+        "resolve": "^1.9.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/rechoir/node_modules/resolve": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+    },
+    "node_modules/regenerate-unicode-properties": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+      "dependencies": {
+        "regenerate": "^1.4.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+    },
+    "node_modules/regenerator-transform": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
+      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "node_modules/regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "dependencies": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regex-not/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regex-not/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/regexpu-core": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
+      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/registry-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "dependencies": {
+        "rc": "^1.2.8"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/regjsgen": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
+    },
+    "node_modules/regjsparser": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
+      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
+      "dependencies": {
+        "jsesc": "~0.5.0"
+      },
+      "bin": {
+        "regjsparser": "bin/parser"
+      }
+    },
+    "node_modules/regjsparser/node_modules/jsesc": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+      "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+      "bin": {
+        "jsesc": "bin/jsesc"
+      }
+    },
+    "node_modules/remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
+      "optional": true
+    },
+    "node_modules/repeat-element": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
+      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-main-filename": {
+      "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=="
+    },
+    "node_modules/resolve": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
+      "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
+      "dependencies": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "node_modules/resolve-cwd": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
+      "deprecated": "https://github.com/lydell/resolve-url#deprecated"
+    },
+    "node_modules/responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "dependencies": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "node_modules/ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "engines": {
+        "node": ">=0.12"
+      }
+    },
+    "node_modules/rimraf": {
+      "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"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "dependencies": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "node_modules/run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "dependencies": {
+        "aproba": "^1.1.1"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "dependencies": {
+        "ret": "~0.1.10"
+      }
+    },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "node_modules/scheduler": {
+      "version": "0.21.0-alpha-7ec4c5597",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0-alpha-7ec4c5597.tgz",
+      "integrity": "sha512-UGZQDpLhPL1o2U4Kujt3WkDUWC3iNIm4OcErqv1f/fq8RQ/VxgmhlBryiZMaNF06qm3jXARebUWnlK3Tn2Sn5w==",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "node_modules/schema-utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+      "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+      "dependencies": {
+        "ajv": "^6.1.0",
+        "ajv-errors": "^1.0.0",
+        "ajv-keywords": "^3.1.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/semver-diff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
+      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "dependencies": {
+        "semver": "^6.3.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/semver-diff/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/send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/send/node_modules/http-errors": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/send/node_modules/ms": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+    },
+    "node_modules/serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "dependencies": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "node_modules/serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
+    "node_modules/set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+    },
+    "node_modules/setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "node_modules/sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "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",
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "node_modules/snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "dependencies": {
+        "is-descriptor": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "dependencies": {
+        "kind-of": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/snapdragon-util/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+    },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "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"
+      }
+    },
+    "node_modules/source-map-support": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
+    "node_modules/source-map-support/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
+    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2-1",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+      "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A="
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz",
+      "integrity": "sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ=="
+    },
+    "node_modules/split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "dependencies": {
+        "extend-shallow": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/split-string/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/ssri": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
+      "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
+      "dependencies": {
+        "figgy-pudding": "^3.5.1"
+      }
+    },
+    "node_modules/static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "dependencies": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/stream-browserify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+      "dependencies": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "node_modules/stream-each": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "node_modules/stream-http": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+      "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"
+      }
+    },
+    "node_modules/stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+    },
+    "node_modules/string_decoder": {
+      "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"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "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",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "dependencies": {
+        "ansi-regex": "^4.1.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-final-newline": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
+      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "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"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/term-size": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
+      "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/terser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">= 6.9.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0"
+      }
+    },
+    "node_modules/terser-webpack-plugin/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/terser/node_modules/commander": {
+      "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=="
+    },
+    "node_modules/terser/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "dependencies": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "node_modules/timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "dependencies": {
+        "setimmediate": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6.0"
+      }
+    },
+    "node_modules/to-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+    },
+    "node_modules/to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "dependencies": {
+        "kind-of": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-object-path/node_modules/kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dependencies": {
+        "is-buffer": "^1.1.5"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "dependencies": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex/node_modules/define-property": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+      "dependencies": {
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex/node_modules/extend-shallow": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+      "dependencies": {
+        "assign-symbols": "^1.0.0",
+        "is-extendable": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/to-regex/node_modules/is-extendable": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "dependencies": {
+        "is-plain-object": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/touch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
+      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "dependencies": {
+        "nopt": "~1.0.10"
+      },
+      "bin": {
+        "nodetouch": "bin/nodetouch.js"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/tty-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+    },
+    "node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
+    "node_modules/typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "dependencies": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "node_modules/undefsafe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
+      "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==",
+      "dependencies": {
+        "debug": "^2.2.0"
+      }
+    },
+    "node_modules/unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/unicode-property-aliases-ecmascript": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "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"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unique-filename": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "dependencies": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "node_modules/unique-slug": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "dependencies": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
+    "node_modules/unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "dependencies": {
+        "crypto-random-string": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "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",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+      "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+      "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",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+      "dependencies": {
+        "isarray": "1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/unset-value/node_modules/has-values": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+      "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "optional": true,
+      "engines": {
+        "node": ">=4",
+        "yarn": "*"
+      }
+    },
+    "node_modules/update-notifier": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.3.tgz",
+      "integrity": "sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==",
+      "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",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "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",
+      "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"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/update-notifier/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/update-notifier/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/update-notifier/node_modules/supports-color": {
+      "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"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/uri-js": {
+      "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"
+      }
+    },
+    "node_modules/uri-js/node_modules/punycode": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
+      "deprecated": "Please see https://github.com/lydell/urix#deprecated"
+    },
+    "node_modules/url": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+      "dependencies": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      }
+    },
+    "node_modules/url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "dependencies": {
+        "prepend-http": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/url/node_modules/punycode": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+    },
+    "node_modules/use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/util": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+      "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "node_modules/util/node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "node_modules/utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
+    "node_modules/v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
+    },
+    "node_modules/watchpack": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+      "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"
+      }
+    },
+    "node_modules/watchpack-chokidar2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+      "optional": true,
+      "dependencies": {
+        "chokidar": "^2.1.8"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/anymatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "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",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/chokidar": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+      "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+      "deprecated": "Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.",
+      "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/fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
+      "hasInstallScript": true,
+      "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",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+      "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",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "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",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "optional": true,
+      "dependencies": {
+        "binary-extensions": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/watchpack-chokidar2/node_modules/readdirp": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "optional": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.11",
+        "micromatch": "^3.1.10",
+        "readable-stream": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/webpack": {
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",
+      "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"
+      },
+      "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.7.2",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.7.2.tgz",
+      "integrity": "sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==",
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^1.0.4",
+        "@webpack-cli/info": "^1.3.0",
+        "@webpack-cli/serve": "^1.5.1",
+        "colorette": "^1.2.1",
+        "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",
+        "v8-compile-cache": "^2.2.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      },
+      "peerDependencies": {
+        "webpack": "4.x.x || 5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generators": {
+          "optional": true
+        },
+        "@webpack-cli/migrate": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-merge": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
+      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/webpack-sources": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "dependencies": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      }
+    },
+    "node_modules/webpack-sources/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/which": {
+      "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"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
+    "node_modules/widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "dependencies": {
+        "string-width": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/widest-line/node_modules/ansi-regex": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/widest-line/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/widest-line/node_modules/is-fullwidth-code-point": {
+      "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==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/widest-line/node_modules/string-width": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "dependencies": {
+        "ansi-regex": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+    },
+    "node_modules/worker-farm": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "dependencies": {
+        "errno": "~0.1.7"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "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",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "node_modules/write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "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"
+      }
+    },
+    "node_modules/xdg-basedir": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "engines": {
+        "node": ">=0.4"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "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"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "dependencies": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  },
+  "dependencies": {
+    "@babel/code-frame": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "requires": {
+        "@babel/highlight": "^7.14.5"
+      }
+    },
+    "@babel/compat-data": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz",
+      "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w=="
+    },
+    "@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": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "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.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
+      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "requires": {
+        "@babel/types": "^7.14.5",
+        "jsesc": "^2.5.1",
+        "source-map": "^0.5.0"
+      }
+    },
+    "@babel/helper-annotate-as-pure": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
+      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-builder-binary-assignment-operator-visitor": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz",
+      "integrity": "sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==",
+      "requires": {
+        "@babel/helper-explode-assignable-expression": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-compilation-targets": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
+      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
+      "requires": {
+        "@babel/compat-data": "^7.14.5",
+        "@babel/helper-validator-option": "^7.14.5",
+        "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-explode-assignable-expression": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz",
+      "integrity": "sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-function-name": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
+      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+      "requires": {
+        "@babel/helper-get-function-arity": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-get-function-arity": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
+      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-hoist-variables": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
+      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-member-expression-to-functions": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz",
+      "integrity": "sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-module-imports": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
+      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-module-transforms": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
+      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.14.5",
+        "@babel/helper-replace-supers": "^7.14.5",
+        "@babel/helper-simple-access": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-optimise-call-expression": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
+      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-plugin-utils": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
+      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ=="
+    },
+    "@babel/helper-remap-async-to-generator": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz",
+      "integrity": "sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.14.5",
+        "@babel/helper-wrap-function": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-replace-supers": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
+      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
+      "requires": {
+        "@babel/helper-member-expression-to-functions": "^7.14.5",
+        "@babel/helper-optimise-call-expression": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-simple-access": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
+      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-skip-transparent-expression-wrappers": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz",
+      "integrity": "sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-split-export-declaration": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
+      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+      "requires": {
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
+      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+    },
+    "@babel/helper-validator-option": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
+      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow=="
+    },
+    "@babel/helper-wrap-function": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz",
+      "integrity": "sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==",
+      "requires": {
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/helpers": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
+      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+      "requires": {
+        "@babel/template": "^7.14.5",
+        "@babel/traverse": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/highlight": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "chalk": "^2.0.0",
+        "js-tokens": "^4.0.0"
+      }
+    },
+    "@babel/parser": {
+      "version": "7.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
+      "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ=="
+    },
+    "@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.14.6",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
+      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+      "requires": {
+        "regenerator-runtime": "^0.13.4"
+      }
+    },
+    "@babel/template": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
+      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+      "requires": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/parser": "^7.14.5",
+        "@babel/types": "^7.14.5"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz",
+      "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==",
+      "requires": {
+        "@babel/code-frame": "^7.14.5",
+        "@babel/generator": "^7.14.5",
+        "@babel/helper-function-name": "^7.14.5",
+        "@babel/helper-hoist-variables": "^7.14.5",
+        "@babel/helper-split-export-declaration": "^7.14.5",
+        "@babel/parser": "^7.14.5",
+        "@babel/types": "^7.14.5",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        }
+      }
+    },
+    "@babel/types": {
+      "version": "7.14.5",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
+      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.5",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@discoveryjs/json-ext": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz",
+      "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g=="
+    },
+    "@sindresorhus/is": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
+      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
+    },
+    "@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
+      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+      "requires": {
+        "defer-to-connect": "^1.0.1"
+      }
+    },
+    "@types/json-schema": {
+      "version": "7.0.7",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
+      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
+    },
+    "@webassemblyjs/ast": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
+      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
+      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA=="
+    },
+    "@webassemblyjs/helper-api-error": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
+      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw=="
+    },
+    "@webassemblyjs/helper-buffer": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
+      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA=="
+    },
+    "@webassemblyjs/helper-code-frame": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
+      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+      "requires": {
+        "@webassemblyjs/wast-printer": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-fsm": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
+      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw=="
+    },
+    "@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
+      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0"
+      }
+    },
+    "@webassemblyjs/helper-wasm-bytecode": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
+      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw=="
+    },
+    "@webassemblyjs/helper-wasm-section": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
+      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
+      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+      "requires": {
+        "@xtuc/ieee754": "^1.2.0"
+      }
+    },
+    "@webassemblyjs/leb128": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
+      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+      "requires": {
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webassemblyjs/utf8": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
+      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w=="
+    },
+    "@webassemblyjs/wasm-edit": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
+      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
+      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
+      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
+      "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",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
+      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
+      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
+      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+      "requires": {
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
+      }
+    },
+    "@webpack-cli/configtest": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
+      "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
+      "requires": {}
+    },
+    "@webpack-cli/info": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.3.0.tgz",
+      "integrity": "sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==",
+      "requires": {
+        "envinfo": "^7.7.3"
+      }
+    },
+    "@webpack-cli/serve": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.1.tgz",
+      "integrity": "sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==",
+      "requires": {}
+    },
+    "@xtuc/ieee754": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
+      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    },
+    "@xtuc/long": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
+      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    },
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "acorn": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
+      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ=="
+    },
+    "ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "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",
+      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
+      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
+      "requires": {}
+    },
+    "ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "requires": {}
+    },
+    "ansi-align": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
+      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+      "requires": {
+        "string-width": "^3.0.0"
+      }
+    },
+    "ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+    },
+    "ansi-styles": {
+      "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==",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "anymatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "requires": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      }
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    },
+    "arr-diff": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
+      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+    },
+    "arr-flatten": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
+      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
+    },
+    "arr-union": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
+      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "array-unique": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
+      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+    },
+    "asn1.js": {
+      "version": "5.4.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
+      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+      "requires": {
+        "bn.js": "^4.0.0",
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0",
+        "safer-buffer": "^2.1.0"
+      }
+    },
+    "assert": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
+      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "util": "0.10.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
+          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
+        },
+        "util": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+          "requires": {
+            "inherits": "2.0.1"
+          }
+        }
+      }
+    },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+    },
+    "async-each": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
+      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
+      "optional": true
+    },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    },
+    "babel-loader": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
+      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
+      "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"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "2.7.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
+          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+          "requires": {
+            "@types/json-schema": "^7.0.5",
+            "ajv": "^6.12.4",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
+    "babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+      "requires": {
+        "object.assign": "^4.1.0"
+      }
+    },
+    "babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
+      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
+    },
+    "babel-preset-react-app": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz",
+      "integrity": "sha512-itL2z8v16khpuKutx5IH8UdCdSTuzrOhRFTEdIhveZ2i1iBKDrVE0ATa4sFVy+02GLucZNVBWtoarXBy0Msdpg==",
+      "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"
+          }
+        },
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz",
+          "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==",
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.14.5",
+            "@babel/helper-function-name": "^7.14.5",
+            "@babel/helper-member-expression-to-functions": "^7.14.5",
+            "@babel/helper-optimise-call-expression": "^7.14.5",
+            "@babel/helper-replace-supers": "^7.14.5",
+            "@babel/helper-split-export-declaration": "^7.14.5"
+          }
+        },
+        "@babel/helper-create-regexp-features-plugin": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz",
+          "integrity": "sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==",
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.14.5",
+            "regexpu-core": "^4.7.1"
+          }
+        },
+        "@babel/plugin-proposal-async-generator-functions": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.5.tgz",
+          "integrity": "sha512-tbD/CG3l43FIXxmu4a7RBe4zH7MLJ+S/lFowPFO7HetS2hyOZ/0nnnznegDuzFzfkyQYTxqdTH/hKmuBngaDAA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/helper-remap-async-to-generator": "^7.14.5",
+            "@babel/plugin-syntax-async-generators": "^7.8.4"
+          }
+        },
+        "@babel/plugin-proposal-class-properties": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
+          "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==",
+          "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",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz",
+          "integrity": "sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==",
+          "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.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz",
+          "integrity": "sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+          }
+        },
+        "@babel/plugin-proposal-export-namespace-from": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz",
+          "integrity": "sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+          }
+        },
+        "@babel/plugin-proposal-json-strings": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz",
+          "integrity": "sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/plugin-syntax-json-strings": "^7.8.3"
+          }
+        },
+        "@babel/plugin-proposal-logical-assignment-operators": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz",
+          "integrity": "sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+          }
+        },
+        "@babel/plugin-proposal-nullish-coalescing-operator": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz",
+          "integrity": "sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==",
+          "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",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz",
+          "integrity": "sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+          }
+        },
+        "@babel/plugin-proposal-object-rest-spread": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.5.tgz",
+          "integrity": "sha512-VzMyY6PWNPPT3pxc5hi9LloKNr4SSrVCg7Yr6aZpW4Ym07r7KqSU/QXYwjXLVxqwSv0t/XSXkFoKBPUkZ8vb2A==",
+          "requires": {
+            "@babel/compat-data": "^7.14.5",
+            "@babel/helper-compilation-targets": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+            "@babel/plugin-transform-parameters": "^7.14.5"
+          }
+        },
+        "@babel/plugin-proposal-optional-catch-binding": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz",
+          "integrity": "sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+          }
+        },
+        "@babel/plugin-proposal-optional-chaining": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz",
+          "integrity": "sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==",
+          "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.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz",
+          "integrity": "sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==",
+          "requires": {
+            "@babel/helper-create-class-features-plugin": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-proposal-unicode-property-regex": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz",
+          "integrity": "sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==",
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-syntax-async-generators": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-class-properties": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.12.13"
+          }
+        },
+        "@babel/plugin-syntax-decorators": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.14.5.tgz",
+          "integrity": "sha512-c4sZMRWL4GSvP1EXy0woIP7m4jkVcEuG8R1TOZxPBPtp4FSM/kiPZub9UIs/Jrb5ZAOzvTUSGYrWsrSu1JvoPw==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-syntax-dynamic-import": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+          "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-export-namespace-from": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+          "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.3"
+          }
+        },
+        "@babel/plugin-syntax-flow": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.14.5.tgz",
+          "integrity": "sha512-9WK5ZwKCdWHxVuU13XNT6X73FGmutAXeor5lGFq6qhOFtMFUF4jkbijuyUdZZlpYq6E2hZeZf/u3959X9wsv0Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-syntax-json-strings": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-jsx": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
+          "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-syntax-logical-assignment-operators": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-syntax-nullish-coalescing-operator": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-numeric-separator": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-syntax-object-rest-spread": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-optional-catch-binding": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-optional-chaining": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-top-level-await": {
+          "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==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-syntax-typescript": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz",
+          "integrity": "sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-arrow-functions": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz",
+          "integrity": "sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-async-to-generator": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz",
+          "integrity": "sha512-szkbzQ0mNk0rpu76fzDdqSyPu0MuvpXgC+6rz5rpMb5OIRxdmHfQxrktL8CYolL2d8luMCZTR0DpIMIdL27IjA==",
+          "requires": {
+            "@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": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz",
+          "integrity": "sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-block-scoping": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
+          "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-classes": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz",
+          "integrity": "sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==",
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.14.5",
+            "@babel/helper-function-name": "^7.14.5",
+            "@babel/helper-optimise-call-expression": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/helper-replace-supers": "^7.14.5",
+            "@babel/helper-split-export-declaration": "^7.14.5",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/plugin-transform-computed-properties": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz",
+          "integrity": "sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-destructuring": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.5.tgz",
+          "integrity": "sha512-wU9tYisEbRMxqDezKUqC9GleLycCRoUsai9ddlsq54r8QRLaeEhc+d+9DqCG+kV9W2GgQjTZESPTpn5bAFMDww==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-dotall-regex": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz",
+          "integrity": "sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==",
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-duplicate-keys": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz",
+          "integrity": "sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-exponentiation-operator": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz",
+          "integrity": "sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==",
+          "requires": {
+            "@babel/helper-builder-binary-assignment-operator-visitor": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-flow-strip-types": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz",
+          "integrity": "sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-flow": "^7.12.1"
+          }
+        },
+        "@babel/plugin-transform-for-of": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz",
+          "integrity": "sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-function-name": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz",
+          "integrity": "sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==",
+          "requires": {
+            "@babel/helper-function-name": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-literals": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz",
+          "integrity": "sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-member-expression-literals": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz",
+          "integrity": "sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-modules-amd": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz",
+          "integrity": "sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==",
+          "requires": {
+            "@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": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
+          "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
+          "requires": {
+            "@babel/helper-module-transforms": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/helper-simple-access": "^7.14.5",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-systemjs": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz",
+          "integrity": "sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==",
+          "requires": {
+            "@babel/helper-hoist-variables": "^7.14.5",
+            "@babel/helper-module-transforms": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-umd": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz",
+          "integrity": "sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==",
+          "requires": {
+            "@babel/helper-module-transforms": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-named-capturing-groups-regex": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.5.tgz",
+          "integrity": "sha512-+Xe5+6MWFo311U8SchgeX5c1+lJM+eZDBZgD+tvXu9VVQPXwwVzeManMMjYX6xw2HczngfOSZjoFYKwdeB/Jvw==",
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-new-target": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz",
+          "integrity": "sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-object-super": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz",
+          "integrity": "sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/helper-replace-supers": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-parameters": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz",
+          "integrity": "sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-property-literals": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz",
+          "integrity": "sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-react-display-name": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz",
+          "integrity": "sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-react-jsx": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz",
+          "integrity": "sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==",
+          "requires": {
+            "@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.5"
+          }
+        },
+        "@babel/plugin-transform-react-jsx-development": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz",
+          "integrity": "sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==",
+          "requires": {
+            "@babel/plugin-transform-react-jsx": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-react-jsx-self": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz",
+          "integrity": "sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-react-jsx-source": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz",
+          "integrity": "sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-react-pure-annotations": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz",
+          "integrity": "sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==",
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-regenerator": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz",
+          "integrity": "sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==",
+          "requires": {
+            "regenerator-transform": "^0.14.2"
+          }
+        },
+        "@babel/plugin-transform-reserved-words": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz",
+          "integrity": "sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-runtime": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz",
+          "integrity": "sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==",
+          "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.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
+          "integrity": "sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-spread": {
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz",
+          "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-sticky-regex": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz",
+          "integrity": "sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-template-literals": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz",
+          "integrity": "sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-typeof-symbol": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz",
+          "integrity": "sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-typescript": {
+          "version": "7.14.6",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.6.tgz",
+          "integrity": "sha512-XlTdBq7Awr4FYIzqhmYY80WN0V0azF74DMPyFqVHBvf81ZUgc4X7ZOpx6O8eLDK6iM5cCQzeyJw0ynTaefixRA==",
+          "requires": {
+            "@babel/helper-create-class-features-plugin": "^7.14.6",
+            "@babel/helper-plugin-utils": "^7.14.5",
+            "@babel/plugin-syntax-typescript": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-unicode-escapes": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz",
+          "integrity": "sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/plugin-transform-unicode-regex": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz",
+          "integrity": "sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==",
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.14.5",
+            "@babel/helper-plugin-utils": "^7.14.5"
+          }
+        },
+        "@babel/preset-env": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.1.tgz",
+          "integrity": "sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==",
+          "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"
+          },
+          "dependencies": {
+            "@babel/plugin-proposal-class-properties": {
+              "version": "7.14.5",
+              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz",
+              "integrity": "sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==",
+              "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.14.5",
+                "@babel/helper-plugin-utils": "^7.14.5"
+              }
+            },
+            "@babel/plugin-proposal-nullish-coalescing-operator": {
+              "version": "7.14.5",
+              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz",
+              "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==",
+              "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+              }
+            },
+            "@babel/plugin-proposal-numeric-separator": {
+              "version": "7.14.5",
+              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz",
+              "integrity": "sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==",
+              "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+              }
+            },
+            "@babel/plugin-proposal-optional-chaining": {
+              "version": "7.14.5",
+              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz",
+              "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==",
+              "requires": {
+                "@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/preset-modules": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
+          "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
+          "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",
+          "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.12.1.tgz",
+          "integrity": "sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==",
+          "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"
+          },
+          "dependencies": {
+            "@babel/plugin-transform-react-display-name": {
+              "version": "7.14.5",
+              "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz",
+              "integrity": "sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==",
+              "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+              }
+            }
+          }
+        },
+        "@babel/preset-typescript": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz",
+          "integrity": "sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-transform-typescript": "^7.12.1"
+          }
+        },
+        "@babel/runtime": {
+          "version": "7.12.1",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
+          "integrity": "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "debug": {
+          "version": "4.3.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
+          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+          "requires": {
+            "ms": "2.1.2"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+        },
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "base": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
+      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "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",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        }
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+    },
+    "big.js": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
+      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+    },
+    "binary-extensions": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+    },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
+    "bluebird": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
+      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+    },
+    "bn.js": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
+      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "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"
+      }
+    },
+    "boxen": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
+      "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==",
+      "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",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "is-fullwidth-code-point": {
+          "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=="
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
+      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "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"
+      }
+    },
+    "brorand": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
+      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
+    },
+    "browserify-aes": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
+      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
+      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "requires": {
+        "browserify-aes": "^1.0.4",
+        "browserify-des": "^1.0.0",
+        "evp_bytestokey": "^1.0.0"
+      }
+    },
+    "browserify-des": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
+      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "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",
+      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
+      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "requires": {
+        "bn.js": "^5.0.0",
+        "randombytes": "^2.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
+          "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
+        }
+      }
+    },
+    "browserify-sign": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
+      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "requires": {
+        "bn.js": "^5.1.1",
+        "browserify-rsa": "^4.0.1",
+        "create-hash": "^1.2.0",
+        "create-hmac": "^1.1.7",
+        "elliptic": "^6.5.3",
+        "inherits": "^2.0.4",
+        "parse-asn1": "^5.1.5",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
+          "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
+        },
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "browserify-zlib": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
+      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "requires": {
+        "pako": "~1.0.5"
+      }
+    },
+    "browserslist": {
+      "version": "4.16.6",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
+      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
+      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+      "requires": {
+        "base64-js": "^1.0.2",
+        "ieee754": "^1.1.4",
+        "isarray": "^1.0.0"
+      }
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+    },
+    "buffer-xor": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
+      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
+    },
+    "builtin-status-codes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
+      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "cacache": {
+      "version": "12.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
+      "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+      "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",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "cache-base": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
+      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
+      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "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",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        },
+        "lowercase-keys": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
+          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
+        }
+      }
+    },
+    "call-bind": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
+      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "get-intrinsic": "^1.0.2"
+      }
+    },
+    "callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
+      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+    },
+    "caniuse-lite": {
+      "version": "1.0.30001237",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz",
+      "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw=="
+    },
+    "chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "requires": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      }
+    },
+    "chokidar": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
+      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "requires": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "fsevents": "~2.3.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"
+      },
+      "dependencies": {
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+          "requires": {
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+        },
+        "to-regex-range": {
+          "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==",
+          "requires": {
+            "is-number": "^7.0.0"
+          }
+        }
+      }
+    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+    },
+    "chrome-trace-event": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
+      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
+    },
+    "ci-info": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
+      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+    },
+    "cipher-base": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
+      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "class-utils": {
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "requires": {
+        "arr-union": "^3.1.0",
+        "define-property": "^0.2.5",
+        "isobject": "^3.0.0",
+        "static-extend": "^0.1.1"
+      }
+    },
+    "cli-boxes": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
+      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw=="
+    },
+    "cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
+      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
+      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "collection-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
+      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "requires": {
+        "map-visit": "^1.0.0",
+        "object-visit": "^1.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "colorette": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
+      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+    },
+    "commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    },
+    "commondir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
+      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+    },
+    "component-emitter": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+    },
+    "compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "requires": {
+        "mime-db": ">= 1.43.0 < 2"
+      }
+    },
+    "compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "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": {
+        "bytes": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+    },
+    "concat-stream": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
+      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "concurrently": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-5.3.0.tgz",
+      "integrity": "sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ==",
+      "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",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
+          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+          "requires": {
+            "has-flag": "^3.0.0"
+          }
+        }
+      }
+    },
+    "configstore": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
+      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "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",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+          "requires": {
+            "semver": "^6.0.0"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "console-browserify": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
+      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
+    },
+    "constants-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
+      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "convert-source-map": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "requires": {
+        "safe-buffer": "~5.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
+      }
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "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",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "copy-descriptor": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
+      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+    },
+    "core-js-compat": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.14.0.tgz",
+      "integrity": "sha512-R4NS2eupxtiJU+VwgkF9WTpnSfZW4pogwKHd8bclWU2sp93Pr5S1uYJI84cMOubJRou7bcfL0vmwtLslWN5p3A==",
+      "requires": {
+        "browserslist": "^4.16.6",
+        "semver": "7.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A=="
+        }
+      }
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+    },
+    "cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "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"
+      },
+      "dependencies": {
+        "parse-json": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+          "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"
+          }
+        }
+      }
+    },
+    "create-ecdh": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
+      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "elliptic": "^6.5.3"
+      }
+    },
+    "create-hash": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
+      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
+      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.1"
+      }
+    },
+    "cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "requires": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      }
+    },
+    "crypto-browserify": {
+      "version": "3.12.0",
+      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
+      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
+      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
+    },
+    "cyclist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
+      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
+    },
+    "date-fns": {
+      "version": "2.22.1",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
+      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+    },
+    "decompress-response": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
+      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "requires": {
+        "mimic-response": "^1.0.0"
+      }
+    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+    },
+    "defer-to-connect": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
+      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
+    },
+    "define-properties": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
+      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "requires": {
+        "object-keys": "^1.0.12"
+      }
+    },
+    "define-property": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
+      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "requires": {
+        "is-descriptor": "^0.1.0"
+      },
+      "dependencies": {
+        "is-accessor-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "is-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
+          "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+          "requires": {
+            "is-accessor-descriptor": "^0.1.6",
+            "is-data-descriptor": "^0.1.4",
+            "kind-of": "^5.0.0"
+          }
+        },
+        "kind-of": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
+          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
+        }
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "des.js": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
+      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
+      "requires": {
+        "inherits": "^2.0.1",
+        "minimalistic-assert": "^1.0.0"
+      }
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "diffie-hellman": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
+      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "requires": {
+        "bn.js": "^4.1.0",
+        "miller-rabin": "^4.0.0",
+        "randombytes": "^2.0.0"
+      }
+    },
+    "domain-browser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
+    },
+    "dot-prop": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
+      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "requires": {
+        "is-obj": "^2.0.0"
+      }
+    },
+    "duplexer3": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
+      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+    },
+    "duplexify": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
+      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "requires": {
+        "end-of-stream": "^1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "electron-to-chromium": {
+      "version": "1.3.752",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
+      "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A=="
+    },
+    "elliptic": {
+      "version": "6.5.4",
+      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
+      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "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"
+      }
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
+      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+    },
+    "emojis-list": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
+      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "end-of-stream": {
+      "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==",
+      "requires": {
+        "once": "^1.4.0"
+      }
+    },
+    "enhanced-resolve": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
+      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "memory-fs": "^0.5.0",
+        "tapable": "^1.0.0"
+      },
+      "dependencies": {
+        "memory-fs": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
+          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+          "requires": {
+            "errno": "^0.1.3",
+            "readable-stream": "^2.0.1"
+          }
+        }
+      }
+    },
+    "envinfo": {
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw=="
+    },
+    "errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "requires": {
+        "prr": "~1.0.1"
+      }
+    },
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "requires": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-goat": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
+      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+    },
+    "eslint-scope": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
+      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "requires": {
+        "esrecurse": "^4.1.0",
+        "estraverse": "^4.1.1"
+      }
+    },
+    "esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "requires": {
+        "estraverse": "^5.2.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
+          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
+        }
+      }
+    },
+    "estraverse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
+      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+    },
+    "esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "events": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+    },
+    "evp_bytestokey": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
+      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "requires": {
+        "md5.js": "^1.3.4",
+        "safe-buffer": "^5.1.1"
+      }
+    },
+    "execa": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
+      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "requires": {
+        "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": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
+      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "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"
+      }
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "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": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        }
+      }
+    },
+    "extend-shallow": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "requires": {
+        "is-extendable": "^0.1.0"
+      }
+    },
+    "extglob": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "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",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        }
+      }
+    },
+    "fast-deep-equal": {
+      "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-json-stable-stringify": {
+      "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=="
+    },
+    "fastest-levenshtein": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
+      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow=="
+    },
+    "figgy-pudding": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
+      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
+    },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
+    "fill-range": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
+      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1",
+        "to-regex-range": "^2.1.0"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "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"
+      }
+    },
+    "find-cache-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
+      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+      "requires": {
+        "commondir": "^1.0.1",
+        "make-dir": "^2.0.0",
+        "pkg-dir": "^3.0.0"
+      }
+    },
+    "find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
+      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "requires": {
+        "locate-path": "^3.0.0"
+      }
+    },
+    "flush-write-stream": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
+      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.3.6"
+      }
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+    },
+    "forwarded": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+    },
+    "fragment-cache": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
+      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "requires": {
+        "map-cache": "^0.2.2"
+      }
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "requires": {
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "iferr": "^0.1.5",
+        "imurmurhash": "^0.1.4",
+        "readable-stream": "1 || 2"
+      }
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+    },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "optional": true
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+    },
+    "gensync": {
+      "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": {
+      "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": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
+      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "requires": {
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3",
+        "has-symbols": "^1.0.1"
+      }
+    },
+    "get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+    },
+    "get-value": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
+      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
+    },
+    "glob": {
+      "version": "7.1.7",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
+      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "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.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "requires": {
+        "is-glob": "^4.0.1"
+      }
+    },
+    "global-dirs": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.1.0.tgz",
+      "integrity": "sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==",
+      "requires": {
+        "ini": "1.3.7"
+      }
+    },
+    "globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+    },
+    "got": {
+      "version": "9.6.0",
+      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
+      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "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"
+      },
+      "dependencies": {
+        "get-stream": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
+          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
+          "requires": {
+            "pump": "^3.0.0"
+          }
+        }
+      }
+    },
+    "graceful-fs": {
+      "version": "4.2.6",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
+      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
+    "has-symbols": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
+      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+    },
+    "has-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
+      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "requires": {
+        "get-value": "^2.0.6",
+        "has-values": "^1.0.0",
+        "isobject": "^3.0.0"
+      }
+    },
+    "has-values": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
+      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "has-yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
+      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw=="
+    },
+    "hash-base": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
+      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "requires": {
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.6.0",
+        "safe-buffer": "^5.2.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
+      }
+    },
+    "hash.js": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
+      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "requires": {
+        "inherits": "^2.0.3",
+        "minimalistic-assert": "^1.0.1"
+      }
+    },
+    "hmac-drbg": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
+      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
+      "requires": {
+        "hash.js": "^1.0.3",
+        "minimalistic-assert": "^1.0.0",
+        "minimalistic-crypto-utils": "^1.0.1"
+      }
+    },
+    "hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+    },
+    "http-cache-semantics": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
+      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "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",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
+      }
+    },
+    "https-browserify": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
+      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+    },
+    "human-signals": {
+      "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": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+    },
+    "iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+    },
+    "ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
+    },
+    "import-fresh": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "requires": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        }
+      }
+    },
+    "import-lazy": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
+      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
+    },
+    "import-local": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
+      "integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
+      "requires": {
+        "pkg-dir": "^4.2.0",
+        "resolve-cwd": "^3.0.0"
+      },
+      "dependencies": {
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        },
+        "pkg-dir": {
+          "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==",
+          "requires": {
+            "find-up": "^4.0.0"
+          }
+        }
+      }
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+    },
+    "infer-owner": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
+      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "ini": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
+      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
+    },
+    "interpret": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
+      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw=="
+    },
+    "ipaddr.js": {
+      "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-accessor-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "requires": {
+        "kind-of": "^6.0.0"
+      }
+    },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+    },
+    "is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "requires": {
+        "binary-extensions": "^2.0.0"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
+      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+    },
+    "is-ci": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
+      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "requires": {
+        "ci-info": "^2.0.0"
+      }
+    },
+    "is-core-module": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
+      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "is-data-descriptor": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "requires": {
+        "kind-of": "^6.0.0"
+      }
+    },
+    "is-descriptor": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "requires": {
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
+      }
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+    },
+    "is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+    },
+    "is-glob": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
+      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "requires": {
+        "is-extglob": "^2.1.1"
+      }
+    },
+    "is-installed-globally": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz",
+      "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==",
+      "requires": {
+        "global-dirs": "^2.0.1",
+        "is-path-inside": "^3.0.1"
+      }
+    },
+    "is-npm": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz",
+      "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig=="
+    },
+    "is-number": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "is-obj": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
+      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
+    },
+    "is-path-inside": {
+      "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-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",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw=="
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+    },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
+    },
+    "is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+    },
+    "is-yarn-global": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
+      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+    },
+    "isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "jsesc": {
+      "version": "2.5.2",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
+      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+    },
+    "json-buffer": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
+      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
+    },
+    "json-parse-better-errors": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+    },
+    "json-parse-even-better-errors": {
+      "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": {
+      "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=="
+    },
+    "json5": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
+      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "keyv": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
+      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "requires": {
+        "json-buffer": "3.0.0"
+      }
+    },
+    "kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+    },
+    "latest-version": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
+      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
+      "requires": {
+        "package-json": "^6.3.0"
+      }
+    },
+    "lines-and-columns": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+    },
+    "loader-runner": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
+      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw=="
+    },
+    "loader-utils": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
+      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "requires": {
+        "big.js": "^5.2.2",
+        "emojis-list": "^3.0.0",
+        "json5": "^1.0.1"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
+      }
+    },
+    "locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
+      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
+    "lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "lowercase-keys": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
+      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+    },
+    "lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "requires": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "requires": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      }
+    },
+    "map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
+    },
+    "map-visit": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
+      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "requires": {
+        "object-visit": "^1.0.0"
+      }
+    },
+    "md5.js": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1",
+        "safe-buffer": "^5.1.2"
+      }
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "memory-fs": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
+      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "requires": {
+        "errno": "^0.1.3",
+        "readable-stream": "^2.0.1"
+      }
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "merge-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "micromatch": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
+      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "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": {
+        "define-property": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+          "requires": {
+            "is-descriptor": "^1.0.2",
+            "isobject": "^3.0.1"
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "miller-rabin": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
+      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "requires": {
+        "bn.js": "^4.0.0",
+        "brorand": "^1.0.1"
+      }
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.48.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
+      "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ=="
+    },
+    "mime-types": {
+      "version": "2.1.31",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
+      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
+      "requires": {
+        "mime-db": "1.48.0"
+      }
+    },
+    "mimic-fn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+    },
+    "mimic-response": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
+      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
+    },
+    "minimalistic-assert": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
+      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+    },
+    "minimalistic-crypto-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
+      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+    },
+    "mississippi": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
+      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+      "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",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
+      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "requires": {
+        "for-in": "^1.0.2",
+        "is-extendable": "^1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "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",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        }
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
+    "nanomatch": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
+      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "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"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+          "requires": {
+            "is-descriptor": "^1.0.2",
+            "isobject": "^3.0.1"
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "neo-async": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
+      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+    },
+    "node-libs-browser": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
+      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+      "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"
+      }
+    },
+    "node-modules-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
+      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA="
+    },
+    "node-releases": {
+      "version": "1.1.73",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
+      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
+    },
+    "nodemon": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
+      "integrity": "sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==",
+      "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",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+        }
+      }
+    },
+    "nopt": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+      "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "requires": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "normalize-url": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
+      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA=="
+    },
+    "npm-run-path": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "requires": {
+        "path-key": "^3.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "object-copy": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
+      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "requires": {
+        "copy-descriptor": "^0.1.0",
+        "define-property": "^0.2.5",
+        "kind-of": "^3.0.3"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "object-keys": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+    },
+    "object-visit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
+      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "requires": {
+        "isobject": "^3.0.0"
+      }
+    },
+    "object.assign": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
+      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "requires": {
+        "isobject": "^3.0.1"
+      }
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "onetime": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "requires": {
+        "mimic-fn": "^2.1.0"
+      }
+    },
+    "os-browserify": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
+      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+    },
+    "p-cancelable": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
+      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw=="
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "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==",
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
+      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+    },
+    "package-json": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
+      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "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",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+        }
+      }
+    },
+    "pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
+    "parallel-transform": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
+      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
+      "requires": {
+        "cyclist": "^1.0.1",
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.1.5"
+      }
+    },
+    "parent-module": {
+      "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==",
+      "requires": {
+        "callsites": "^3.0.0"
+      }
+    },
+    "parse-asn1": {
+      "version": "5.1.6",
+      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
+      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "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": "4.0.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "requires": {
+        "error-ex": "^1.3.1",
+        "json-parse-better-errors": "^1.0.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "pascalcase": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
+      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
+    },
+    "path-browserify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
+      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ=="
+    },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
+      "optional": true
+    },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+    },
+    "path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+    },
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+    },
+    "pbkdf2": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
+      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "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.3.0",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
+      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
+    },
+    "pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+    },
+    "pirates": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
+      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "requires": {
+        "node-modules-regexp": "^1.0.0"
+      }
+    },
+    "pkg-dir": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
+      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+      "requires": {
+        "find-up": "^3.0.0"
+      }
+    },
+    "posix-character-classes": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
+      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
+    },
+    "prepend-http": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
+      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
+    },
+    "prettier": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
+      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
+      "dev": true
+    },
+    "process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+    },
+    "process-nextick-args": {
+      "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=="
+    },
+    "promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+    },
+    "proxy-addr": {
+      "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==",
+      "requires": {
+        "forwarded": "0.2.0",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+    },
+    "pstree.remy": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
+      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w=="
+    },
+    "public-encrypt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
+      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "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"
+      }
+    },
+    "pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
+    "pumpify": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "requires": {
+        "duplexify": "^3.6.0",
+        "inherits": "^2.0.3",
+        "pump": "^2.0.0"
+      },
+      "dependencies": {
+        "pump": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+          "requires": {
+            "end-of-stream": "^1.1.0",
+            "once": "^1.3.1"
+          }
+        }
+      }
+    },
+    "punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+    },
+    "pupa": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
+      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "requires": {
+        "escape-goat": "^2.0.0"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "querystring": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
+      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
+    },
+    "querystring-es3": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
+      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
+    },
+    "randombytes": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
+      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "requires": {
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "randomfill": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "requires": {
+        "randombytes": "^2.0.5",
+        "safe-buffer": "^5.1.0"
+      }
+    },
+    "range-parser": {
+      "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": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "ini": {
+          "version": "1.3.8",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+          "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+        }
+      }
+    },
+    "react": {
+      "version": "18.0.0-alpha-7ec4c5597",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0-alpha-7ec4c5597.tgz",
+      "integrity": "sha512-W0cK4JlO5HSyXfp7rPRprFCKJeN4oJ51MImnTbp3lS/1g17d837BiMKqqyr9veBst2C4yrq5oXx6EKv9UsAqbw==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "react-dom": {
+      "version": "18.0.0-alpha-7ec4c5597",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0-alpha-7ec4c5597.tgz",
+      "integrity": "sha512-ZF0yJcbpIBMw/2Mb28rn9KquQtxL5uzlfDENsWIDqDabRcnYJGY1jkckC6EG35KufRV4UC4/Rp2r1AKL8cDLJg==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "scheduler": "0.21.0-alpha-7ec4c5597"
+      }
+    },
+    "react-error-boundary": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz",
+      "integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
+    "read-pkg": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
+      "integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=",
+      "requires": {
+        "normalize-package-data": "^2.3.2",
+        "parse-json": "^4.0.0",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+        }
+      }
+    },
+    "readable-stream": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "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": {
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
+    "readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "requires": {
+        "picomatch": "^2.2.1"
+      }
+    },
+    "rechoir": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
+      "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
+      "requires": {
+        "resolve": "^1.9.0"
+      },
+      "dependencies": {
+        "resolve": {
+          "version": "1.20.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
+          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "regenerate": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+    },
+    "regenerate-unicode-properties": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+      "requires": {
+        "regenerate": "^1.4.0"
+      }
+    },
+    "regenerator-runtime": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
+      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+    },
+    "regenerator-transform": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
+      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+      "requires": {
+        "@babel/runtime": "^7.8.4"
+      }
+    },
+    "regex-not": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "requires": {
+        "extend-shallow": "^3.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "regexpu-core": {
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
+      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
+      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "registry-url": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
+      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "requires": {
+        "rc": "^1.2.8"
+      }
+    },
+    "regjsgen": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
+      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
+    },
+    "regjsparser": {
+      "version": "0.6.9",
+      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
+      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
+      "requires": {
+        "jsesc": "~0.5.0"
+      },
+      "dependencies": {
+        "jsesc": {
+          "version": "0.5.0",
+          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+        }
+      }
+    },
+    "remove-trailing-separator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
+      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
+      "optional": true
+    },
+    "repeat-element": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
+      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ=="
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
+    "require-main-filename": {
+      "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=="
+    },
+    "resolve": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
+      "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
+      "requires": {
+        "path-parse": "^1.0.6"
+      }
+    },
+    "resolve-cwd": {
+      "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==",
+      "requires": {
+        "resolve-from": "^5.0.0"
+      }
+    },
+    "resolve-from": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
+      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
+    },
+    "resolve-url": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
+      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
+    },
+    "responselike": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
+      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "requires": {
+        "lowercase-keys": "^1.0.0"
+      }
+    },
+    "ret": {
+      "version": "0.1.15",
+      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
+      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
+    },
+    "rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
+    "ripemd160": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
+      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "requires": {
+        "hash-base": "^3.0.0",
+        "inherits": "^2.0.1"
+      }
+    },
+    "run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "requires": {
+        "aproba": "^1.1.1"
+      }
+    },
+    "rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+    },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "requires": {
+        "ret": "~0.1.10"
+      }
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "scheduler": {
+      "version": "0.21.0-alpha-7ec4c5597",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0-alpha-7ec4c5597.tgz",
+      "integrity": "sha512-UGZQDpLhPL1o2U4Kujt3WkDUWC3iNIm4OcErqv1f/fq8RQ/VxgmhlBryiZMaNF06qm3jXARebUWnlK3Tn2Sn5w==",
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "schema-utils": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+      "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+      "requires": {
+        "ajv": "^6.1.0",
+        "ajv-errors": "^1.0.0",
+        "ajv-keywords": "^3.1.0"
+      }
+    },
+    "semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+    },
+    "semver-diff": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
+      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "requires": {
+        "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=="
+        }
+      }
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "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": {
+        "http-errors": {
+          "version": "1.7.3",
+          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
+          "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+          "requires": {
+            "depd": "~1.1.2",
+            "inherits": "2.0.4",
+            "setprototypeof": "1.1.1",
+            "statuses": ">= 1.5.0 < 2",
+            "toidentifier": "1.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serialize-javascript": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
+      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "requires": {
+        "randombytes": "^2.1.0"
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
+    "set-value": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
+      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "requires": {
+        "extend-shallow": "^2.0.1",
+        "is-extendable": "^0.1.1",
+        "is-plain-object": "^2.0.3",
+        "split-string": "^3.0.1"
+      }
+    },
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "sha.js": {
+      "version": "2.4.11",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "requires": {
+        "shebang-regex": "^3.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+    },
+    "signal-exit": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
+      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+    },
+    "snapdragon": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
+      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "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"
+      }
+    },
+    "snapdragon-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
+      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "requires": {
+        "define-property": "^1.0.0",
+        "isobject": "^3.0.0",
+        "snapdragon-util": "^3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "^1.0.0"
+          }
+        }
+      }
+    },
+    "snapdragon-util": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
+      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "requires": {
+        "kind-of": "^3.2.0"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "source-list-map": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
+      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+    },
+    "source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+    },
+    "source-map-resolve": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
+      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
+      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "requires": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "source-map-url": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
+      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
+    },
+    "spawn-command": {
+      "version": "0.0.2-1",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+      "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A="
+    },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz",
+      "integrity": "sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ=="
+    },
+    "split-string": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
+      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "requires": {
+        "extend-shallow": "^3.0.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "ssri": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
+      "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
+      "requires": {
+        "figgy-pudding": "^3.5.1"
+      }
+    },
+    "static-extend": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
+      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "requires": {
+        "define-property": "^0.2.5",
+        "object-copy": "^0.1.0"
+      }
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "stream-browserify": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
+      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+      "requires": {
+        "inherits": "~2.0.1",
+        "readable-stream": "^2.0.2"
+      }
+    },
+    "stream-each": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
+      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "requires": {
+        "end-of-stream": "^1.1.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "stream-http": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
+      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+      "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"
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
+      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+    },
+    "string_decoder": {
+      "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==",
+      "requires": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
+    "string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
+      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "requires": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "requires": {
+        "ansi-regex": "^4.1.0"
+      }
+    },
+    "strip-final-newline": {
+      "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": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+    },
+    "supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "requires": {
+        "has-flag": "^3.0.0"
+      }
+    },
+    "tapable": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
+      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
+    },
+    "term-size": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
+      "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="
+    },
+    "terser": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
+      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "requires": {
+        "commander": "^2.20.0",
+        "source-map": "~0.6.1",
+        "source-map-support": "~0.5.12"
+      },
+      "dependencies": {
+        "commander": {
+          "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=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "terser-webpack-plugin": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
+      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "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": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "through2": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
+      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "requires": {
+        "readable-stream": "~2.3.6",
+        "xtend": "~4.0.1"
+      }
+    },
+    "timers-browserify": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
+      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "requires": {
+        "setimmediate": "^1.0.4"
+      }
+    },
+    "to-arraybuffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
+      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+    },
+    "to-fast-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+    },
+    "to-object-path": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
+      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "requires": {
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "to-readable-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
+      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q=="
+    },
+    "to-regex": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "requires": {
+        "define-property": "^2.0.2",
+        "extend-shallow": "^3.0.2",
+        "regex-not": "^1.0.2",
+        "safe-regex": "^1.1.0"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+          "requires": {
+            "is-descriptor": "^1.0.2",
+            "isobject": "^3.0.1"
+          }
+        },
+        "extend-shallow": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+          "requires": {
+            "assign-symbols": "^1.0.0",
+            "is-extendable": "^1.0.1"
+          }
+        },
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "^2.0.4"
+          }
+        }
+      }
+    },
+    "to-regex-range": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
+      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "requires": {
+        "is-number": "^3.0.0",
+        "repeat-string": "^1.6.1"
+      }
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "touch": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
+      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "requires": {
+        "nopt": "~1.0.10"
+      }
+    },
+    "tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="
+    },
+    "tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "tty-browserify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
+      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+    },
+    "type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
+    "typedarray-to-buffer": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
+      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "requires": {
+        "is-typedarray": "^1.0.0"
+      }
+    },
+    "undefsafe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
+      "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==",
+      "requires": {
+        "debug": "^2.2.0"
+      }
+    },
+    "unicode-canonical-property-names-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ=="
+    },
+    "unicode-match-property-ecmascript": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
+      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ=="
+    },
+    "unicode-property-aliases-ecmascript": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
+      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
+    },
+    "union-value": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
+      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "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",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
+      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "requires": {
+        "unique-slug": "^2.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
+      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "requires": {
+        "imurmurhash": "^0.1.4"
+      }
+    },
+    "unique-string": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
+      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "requires": {
+        "crypto-random-string": "^2.0.0"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "unset-value": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
+      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "requires": {
+        "has-value": "^0.3.1",
+        "isobject": "^3.0.0"
+      },
+      "dependencies": {
+        "has-value": {
+          "version": "0.3.1",
+          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
+          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+          "requires": {
+            "get-value": "^2.0.3",
+            "has-values": "^0.1.4",
+            "isobject": "^2.0.0"
+          },
+          "dependencies": {
+            "isobject": {
+              "version": "2.1.0",
+              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+              "requires": {
+                "isarray": "1.0.0"
+              }
+            }
+          }
+        },
+        "has-values": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
+          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+        }
+      }
+    },
+    "upath": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "optional": true
+    },
+    "update-notifier": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.3.tgz",
+      "integrity": "sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==",
+      "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",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "requires": {
+        "punycode": "^2.1.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
+          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+        }
+      }
+    },
+    "urix": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
+      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+    },
+    "url": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
+      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+      "requires": {
+        "punycode": "1.3.2",
+        "querystring": "0.2.0"
+      },
+      "dependencies": {
+        "punycode": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
+          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+        }
+      }
+    },
+    "url-parse-lax": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
+      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "requires": {
+        "prepend-http": "^2.0.0"
+      }
+    },
+    "use": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
+      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
+    },
+    "util": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
+      "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+      "requires": {
+        "inherits": "2.0.3"
+      },
+      "dependencies": {
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+        }
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "v8-compile-cache": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
+      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+    },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    },
+    "vm-browserify": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
+      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
+    },
+    "watchpack": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
+      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
+      "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",
+      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
+      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+      "optional": true,
+      "requires": {
+        "chokidar": "^2.1.8"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "optional": true,
+          "requires": {
+            "micromatch": "^3.1.4",
+            "normalize-path": "^2.1.1"
+          },
+          "dependencies": {
+            "normalize-path": {
+              "version": "2.1.1",
+              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+              "optional": true,
+              "requires": {
+                "remove-trailing-separator": "^1.0.1"
+              }
+            }
+          }
+        },
+        "binary-extensions": {
+          "version": "1.13.1",
+          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
+          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+          "optional": true
+        },
+        "chokidar": {
+          "version": "2.1.8",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
+          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
+          "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"
+          }
+        },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "optional": true,
+          "requires": {
+            "is-glob": "^3.1.0",
+            "path-dirname": "^1.0.0"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "optional": true,
+              "requires": {
+                "is-extglob": "^2.1.0"
+              }
+            }
+          }
+        },
+        "is-binary-path": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+          "optional": true,
+          "requires": {
+            "binary-extensions": "^1.0.0"
+          }
+        },
+        "readdirp": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
+          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+          "optional": true,
+          "requires": {
+            "graceful-fs": "^4.1.11",
+            "micromatch": "^3.1.10",
+            "readable-stream": "^2.0.2"
+          }
+        }
+      }
+    },
+    "webpack": {
+      "version": "4.44.2",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",
+      "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==",
+      "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"
+      }
+    },
+    "webpack-cli": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.7.2.tgz",
+      "integrity": "sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==",
+      "requires": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^1.0.4",
+        "@webpack-cli/info": "^1.3.0",
+        "@webpack-cli/serve": "^1.5.1",
+        "colorette": "^1.2.1",
+        "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",
+        "v8-compile-cache": "^2.2.0",
+        "webpack-merge": "^5.7.3"
+      }
+    },
+    "webpack-merge": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
+      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "wildcard": "^2.0.0"
+      }
+    },
+    "webpack-sources": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
+      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "requires": {
+        "source-list-map": "^2.0.0",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
+    "widest-line": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
+      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "requires": {
+        "string-width": "^4.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+        },
+        "emoji-regex": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+        },
+        "is-fullwidth-code-point": {
+          "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=="
+        },
+        "string-width": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
+          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "requires": {
+            "emoji-regex": "^8.0.0",
+            "is-fullwidth-code-point": "^3.0.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        }
+      }
+    },
+    "wildcard": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
+      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+    },
+    "worker-farm": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
+      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "requires": {
+        "errno": "~0.1.7"
+      }
+    },
+    "wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      }
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+    },
+    "write-file-atomic": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "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",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
+      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q=="
+    },
+    "xtend": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
+      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+    },
+    "y18n": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
+      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+    },
+    "yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+    },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+    },
+    "yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
+      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "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",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
+      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
+    }
+  }
+}

From a0d2d1e1e1830e35bf12174f3cc273231aa03063 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Wed, 16 Jun 2021 00:04:01 +0100
Subject: [PATCH 0631/1603] Fix fixture lockfile manually

---
 fixtures/ssr2/package-lock.json | 11281 +++++++++++++-----------------
 1 file changed, 4831 insertions(+), 6450 deletions(-)

diff --git a/fixtures/ssr2/package-lock.json b/fixtures/ssr2/package-lock.json
index 3e6c6269b951..1d5363ae4991 100644
--- a/fixtures/ssr2/package-lock.json
+++ b/fixtures/ssr2/package-lock.json
@@ -34,23 +34,17 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
       "dependencies": {
-        "@babel/highlight": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/highlight": "^7.12.13"
       }
     },
     "node_modules/@babel/compat-data": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz",
-      "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "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",
@@ -81,27 +75,6 @@
         "url": "https://opencollective.com/babel"
       }
     },
-    "node_modules/@babel/core/node_modules/debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@babel/core/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -111,54 +84,57 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
+      "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
       "dependencies": {
-        "@babel/types": "^7.14.5",
+        "@babel/types": "^7.14.2",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
-      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
+      "version": "7.12.10",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.12.10"
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz",
-      "integrity": "sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==",
+      "version": "7.10.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-explode-assignable-expression": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
-      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
+      "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.5",
-        "@babel/helper-validator-option": "^7.14.5",
+        "@babel/compat-data": "^7.14.4",
+        "@babel/helper-validator-option": "^7.12.17",
         "browserslist": "^4.16.6",
         "semver": "^6.3.0"
       },
-      "engines": {
-        "node": ">=6.9.0"
-      },
       "peerDependencies": {
         "@babel/core": "^7.0.0"
       }
@@ -171,231 +147,202 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/@babel/helper-explode-assignable-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz",
-      "integrity": "sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==",
+    "node_modules/@babel/helper-create-class-features-plugin": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
+        "@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"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+    "node_modules/@babel/helper-create-regexp-features-plugin": {
+      "version": "7.12.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "regexpu-core": "^4.7.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "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-explode-assignable-expression": {
+      "version": "7.12.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.12.1"
+      }
+    },
+    "node_modules/@babel/helper-function-name": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+      "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
+      "dependencies": {
+        "@babel/helper-get-function-arity": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/types": "^7.14.2"
       }
     },
     "node_modules/@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.12.13"
       }
     },
     "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
-      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+      "version": "7.10.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.10.4"
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz",
-      "integrity": "sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==",
+      "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.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.13.12"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "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.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.13.12"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+      "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.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
+      "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.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.12.13"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "version": "7.10.4",
+      "license": "MIT"
     },
     "node_modules/@babel/helper-remap-async-to-generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz",
-      "integrity": "sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==",
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-wrap-function": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
+      "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.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "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.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.13.12"
       }
     },
     "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz",
-      "integrity": "sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==",
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.12.1"
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
       "dependencies": {
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/types": "^7.12.13"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
-      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
-      "engines": {
-        "node": ">=6.9.0"
-      }
+      "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.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz",
-      "integrity": "sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==",
+      "version": "7.12.3",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+      "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.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.0",
+        "@babel/types": "^7.14.0"
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
+      "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.0",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
-      "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ==",
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.4.tgz",
+      "integrity": "sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA==",
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -403,991 +350,670 @@
         "node": ">=6.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==",
+    "node_modules/@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.12.1",
+      "license": "MIT",
       "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/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/runtime": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+    "node_modules/@babel/plugin-proposal-class-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "regenerator-runtime": "^0.13.4"
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+    "node_modules/@babel/plugin-proposal-decorators": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-decorators": "^7.12.1"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/traverse": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz",
-      "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==",
-      "dependencies": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.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"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+    "node_modules/@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@babel/traverse/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
+    "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/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+    "node_modules/@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@discoveryjs/json-ext": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz",
-      "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g==",
-      "engines": {
-        "node": ">=10.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/@sindresorhus/is": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
-      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==",
-      "engines": {
-        "node": ">=6"
+    "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/@szmarczak/http-timer": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
-      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+    "node_modules/@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "defer-to-connect": "^1.0.1"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-transform-parameters": "^7.12.1"
       },
-      "engines": {
-        "node": ">=6"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@types/json-schema": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
-      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
-    },
-    "node_modules/@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
-    },
-    "node_modules/@webassemblyjs/ast": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
-      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+    "node_modules/@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/helper-module-context": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0"
+        "@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/@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
-      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA=="
-    },
-    "node_modules/@webassemblyjs/helper-api-error": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
-      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw=="
-    },
-    "node_modules/@webassemblyjs/helper-buffer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
-      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA=="
-    },
-    "node_modules/@webassemblyjs/helper-code-frame": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
-      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+    "node_modules/@babel/plugin-proposal-optional-chaining": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/wast-printer": "1.9.0"
+        "@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/@webassemblyjs/helper-fsm": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
-      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw=="
-    },
-    "node_modules/@webassemblyjs/helper-module-context": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
-      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+    "node_modules/@babel/plugin-proposal-private-methods": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.9.0"
+        "@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/@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
-      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw=="
-    },
-    "node_modules/@webassemblyjs/helper-wasm-section": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
-      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
+    "node_modules/@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.12.1",
+      "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"
+        "@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/@webassemblyjs/ieee754": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
-      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+    "node_modules/@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
+      "license": "MIT",
       "dependencies": {
-        "@xtuc/ieee754": "^1.2.0"
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webassemblyjs/leb128": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
-      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+    "node_modules/@babel/plugin-syntax-class-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@xtuc/long": "4.2.2"
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webassemblyjs/utf8": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
-      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w=="
-    },
-    "node_modules/@webassemblyjs/wasm-edit": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
-      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
+    "node_modules/@babel/plugin-syntax-decorators": {
+      "version": "7.12.1",
+      "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"
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webassemblyjs/wasm-gen": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
-      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
+    "node_modules/@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
+      "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"
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webassemblyjs/wasm-opt": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
-      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
+    "node_modules/@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "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"
+        "@babel/helper-plugin-utils": "^7.8.3"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webassemblyjs/wasm-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
-      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
+    "node_modules/@babel/plugin-syntax-flow": {
+      "version": "7.12.1",
+      "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"
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webassemblyjs/wast-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
-      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
+    "node_modules/@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "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"
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webassemblyjs/wast-printer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
-      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0",
-        "@xtuc/long": "4.2.2"
-      }
-    },
-    "node_modules/@webpack-cli/configtest": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
-      "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
       "peerDependencies": {
-        "webpack": "4.x.x || 5.x.x",
-        "webpack-cli": "4.x.x"
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webpack-cli/info": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.3.0.tgz",
-      "integrity": "sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==",
+    "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
+      "license": "MIT",
       "dependencies": {
-        "envinfo": "^7.7.3"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
-        "webpack-cli": "4.x.x"
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@webpack-cli/serve": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.1.tgz",
-      "integrity": "sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==",
-      "peerDependencies": {
-        "webpack-cli": "4.x.x"
+    "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "peerDependenciesMeta": {
-        "webpack-dev-server": {
-          "optional": true
-        }
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
-    },
-    "node_modules/@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
-    },
-    "node_modules/abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
-    },
-    "node_modules/accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+    "node_modules/@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "license": "MIT",
       "dependencies": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "engines": {
-        "node": ">= 0.6"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/acorn": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==",
-      "bin": {
-        "acorn": "bin/acorn"
+    "node_modules/@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "engines": {
-        "node": ">=0.4.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "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"
+        "@babel/helper-plugin-utils": "^7.8.0"
       },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-errors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
       "peerDependencies": {
-        "ajv": ">=5.0.0"
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+    "node_modules/@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      },
       "peerDependencies": {
-        "ajv": "^6.9.1"
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/ansi-align": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
-      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+    "node_modules/@babel/plugin-syntax-top-level-await": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "string-width": "^3.0.0"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "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"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "engines": {
-        "node": ">=4"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+    "node_modules/@babel/plugin-syntax-typescript": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
-    },
-    "node_modules/arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
-    },
-    "node_modules/array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/asn1.js": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
-      "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"
-      }
-    },
-    "node_modules/assert": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
-      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
-      "dependencies": {
-        "object-assign": "^4.1.1",
-        "util": "0.10.3"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/assert/node_modules/inherits": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-      "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
-    },
-    "node_modules/assert/node_modules/util": {
-      "version": "0.10.3",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-      "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
+    "node_modules/@babel/plugin-transform-arrow-functions": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "inherits": "2.0.1"
-      }
-    },
-    "node_modules/assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/async-each": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
-      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
-      "optional": true
-    },
-    "node_modules/atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-      "bin": {
-        "atob": "bin/atob.js"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "engines": {
-        "node": ">= 4.5.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-loader": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
-      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
+    "node_modules/@babel/plugin-transform-async-to-generator": {
+      "version": "7.12.1",
+      "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"
+        "@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",
-        "webpack": ">=2"
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-loader/node_modules/schema-utils": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-      "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
+    "node_modules/@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@types/json-schema": "^7.0.5",
-        "ajv": "^6.12.4",
-        "ajv-keywords": "^3.5.2"
-      },
-      "engines": {
-        "node": ">= 8.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
-    "node_modules/babel-plugin-dynamic-import-node": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
-      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
-      "dependencies": {
-        "object.assign": "^4.1.0"
-      }
-    },
-    "node_modules/babel-plugin-macros": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
-      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
-      "dependencies": {
-        "@babel/runtime": "^7.7.2",
-        "cosmiconfig": "^6.0.0",
-        "resolve": "^1.12.0"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-plugin-macros/node_modules/resolve": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
+    "node_modules/@babel/plugin-transform-block-scoping": {
+      "version": "7.12.11",
+      "license": "MIT",
       "dependencies": {
-        "is-core-module": "^2.2.0",
-        "path-parse": "^1.0.6"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-plugin-transform-react-remove-prop-types": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
-      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
-    },
-    "node_modules/babel-preset-react-app": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz",
-      "integrity": "sha512-itL2z8v16khpuKutx5IH8UdCdSTuzrOhRFTEdIhveZ2i1iBKDrVE0ATa4sFVy+02GLucZNVBWtoarXBy0Msdpg==",
+    "node_modules/@babel/plugin-transform-classes": {
+      "version": "7.12.1",
+      "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"
+        "@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-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==",
+    "node_modules/@babel/plugin-transform-computed-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
       "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"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/babel"
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz",
-      "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==",
+    "node_modules/@babel/plugin-transform-destructuring": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-member-expression-to-functions": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/helper-create-regexp-features-plugin": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz",
-      "integrity": "sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==",
+    "node_modules/@babel/plugin-transform-dotall-regex": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "regexpu-core": "^4.7.1"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-async-generator-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.5.tgz",
-      "integrity": "sha512-tbD/CG3l43FIXxmu4a7RBe4zH7MLJ+S/lFowPFO7HetS2hyOZ/0nnnznegDuzFzfkyQYTxqdTH/hKmuBngaDAA==",
+    "node_modules/@babel/plugin-transform-duplicate-keys": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-remap-async-to-generator": "^7.14.5",
-        "@babel/plugin-syntax-async-generators": "^7.8.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-class-properties": {
+    "node_modules/@babel/plugin-transform-exponentiation-operator": {
       "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
-      "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@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-preset-react-app/node_modules/@babel/plugin-proposal-decorators": {
+    "node_modules/@babel/plugin-transform-flow-strip-types": {
       "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz",
-      "integrity": "sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==",
+      "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"
+        "@babel/plugin-syntax-flow": "^7.12.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-dynamic-import": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz",
-      "integrity": "sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==",
+    "node_modules/@babel/plugin-transform-for-of": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-export-namespace-from": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz",
-      "integrity": "sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==",
+    "node_modules/@babel/plugin-transform-function-name": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-json-strings": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz",
-      "integrity": "sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==",
+    "node_modules/@babel/plugin-transform-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-json-strings": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz",
-      "integrity": "sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==",
+    "node_modules/@babel/plugin-transform-member-expression-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
+    "node_modules/@babel/plugin-transform-modules-amd": {
       "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz",
-      "integrity": "sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==",
+      "license": "MIT",
       "dependencies": {
+        "@babel/helper-module-transforms": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
+        "babel-plugin-dynamic-import-node": "^2.3.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-numeric-separator": {
+    "node_modules/@babel/plugin-transform-modules-commonjs": {
       "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz",
-      "integrity": "sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==",
+      "license": "MIT",
       "dependencies": {
+        "@babel/helper-module-transforms": "^7.12.1",
         "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-syntax-numeric-separator": "^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-preset-react-app/node_modules/@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.5.tgz",
-      "integrity": "sha512-VzMyY6PWNPPT3pxc5hi9LloKNr4SSrVCg7Yr6aZpW4Ym07r7KqSU/QXYwjXLVxqwSv0t/XSXkFoKBPUkZ8vb2A==",
+    "node_modules/@babel/plugin-transform-modules-systemjs": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/compat-data": "^7.14.5",
-        "@babel/helper-compilation-targets": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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-preset-react-app/node_modules/@babel/plugin-proposal-optional-catch-binding": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz",
-      "integrity": "sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==",
+    "node_modules/@babel/plugin-transform-modules-umd": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-module-transforms": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-optional-chaining": {
+    "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
       "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz",
-      "integrity": "sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==",
+      "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"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-private-methods": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz",
-      "integrity": "sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==",
+    "node_modules/@babel/plugin-transform-new-target": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-proposal-unicode-property-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz",
-      "integrity": "sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==",
+    "node_modules/@babel/plugin-transform-object-super": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=4"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-replace-supers": "^7.12.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-async-generators": {
-      "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==",
+    "node_modules/@babel/plugin-transform-parameters": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-class-properties": {
-      "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==",
+    "node_modules/@babel/plugin-transform-property-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.12.13"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-decorators": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.14.5.tgz",
-      "integrity": "sha512-c4sZMRWL4GSvP1EXy0woIP7m4jkVcEuG8R1TOZxPBPtp4FSM/kiPZub9UIs/Jrb5ZAOzvTUSGYrWsrSu1JvoPw==",
+    "node_modules/@babel/plugin-transform-react-display-name": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-dynamic-import": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-      "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.12.11",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@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-preset-react-app/node_modules/@babel/plugin-syntax-export-namespace-from": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-      "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+    "node_modules/@babel/plugin-transform-react-jsx-development": {
+      "version": "7.12.11",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.3"
+        "@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-preset-react-app/node_modules/@babel/plugin-syntax-flow": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.14.5.tgz",
-      "integrity": "sha512-9WK5ZwKCdWHxVuU13XNT6X73FGmutAXeor5lGFq6qhOFtMFUF4jkbijuyUdZZlpYq6E2hZeZf/u3959X9wsv0Q==",
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-json-strings": {
-      "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==",
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
-      "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==",
+    "node_modules/@babel/plugin-transform-react-pure-annotations": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-annotate-as-pure": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
-      "engines": {
-        "node": ">=6.9.0"
+      "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-preset-react-app/node_modules/@babel/plugin-syntax-logical-assignment-operators": {
-      "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==",
+    "node_modules/@babel/plugin-transform-reserved-words": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
       },
@@ -1395,21 +1021,22 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
-      "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==",
+    "node_modules/@babel/plugin-transform-runtime": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@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-preset-react-app/node_modules/@babel/plugin-syntax-numeric-separator": {
-      "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==",
+    "node_modules/@babel/plugin-transform-shorthand-properties": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.10.4"
       },
@@ -1417,912 +1044,735 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-object-rest-spread": {
-      "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==",
+    "node_modules/@babel/plugin-transform-spread": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@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-preset-react-app/node_modules/@babel/plugin-syntax-optional-catch-binding": {
-      "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==",
+    "node_modules/@babel/plugin-transform-sticky-regex": {
+      "version": "7.12.7",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-optional-chaining": {
-      "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==",
+    "node_modules/@babel/plugin-transform-template-literals": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.8.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-top-level-await": {
-      "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==",
+    "node_modules/@babel/plugin-transform-typeof-symbol": {
+      "version": "7.12.10",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz",
-      "integrity": "sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==",
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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-preset-react-app/node_modules/@babel/plugin-transform-arrow-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz",
-      "integrity": "sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==",
+    "node_modules/@babel/plugin-transform-unicode-escapes": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-async-to-generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz",
-      "integrity": "sha512-szkbzQ0mNk0rpu76fzDdqSyPu0MuvpXgC+6rz5rpMb5OIRxdmHfQxrktL8CYolL2d8luMCZTR0DpIMIdL27IjA==",
+    "node_modules/@babel/plugin-transform-unicode-regex": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-remap-async-to-generator": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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-react-app/node_modules/@babel/plugin-transform-block-scoped-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz",
-      "integrity": "sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==",
+    "node_modules/@babel/preset-env": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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-react-app/node_modules/@babel/plugin-transform-block-scoping": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
-      "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
+    "node_modules/@babel/preset-modules": {
+      "version": "0.1.4",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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-app/node_modules/@babel/plugin-transform-classes": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz",
-      "integrity": "sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==",
+    "node_modules/@babel/preset-react": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "globals": "^11.1.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@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-react-app/node_modules/@babel/plugin-transform-computed-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz",
-      "integrity": "sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==",
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-transform-typescript": "^7.12.1"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-destructuring": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.5.tgz",
-      "integrity": "sha512-wU9tYisEbRMxqDezKUqC9GleLycCRoUsai9ddlsq54r8QRLaeEhc+d+9DqCG+kV9W2GgQjTZESPTpn5bAFMDww==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.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-preset-react-app/node_modules/@babel/plugin-transform-dotall-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz",
-      "integrity": "sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==",
+    "node_modules/@babel/runtime": {
+      "version": "7.12.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "regenerator-runtime": "^0.13.4"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-duplicate-keys": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz",
-      "integrity": "sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==",
+    "node_modules/@babel/template": {
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/code-frame": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/types": "^7.12.13"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-exponentiation-operator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz",
-      "integrity": "sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==",
+    "node_modules/@babel/traverse": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+      "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
       "dependencies": {
-        "@babel/helper-builder-binary-assignment-operator-visitor": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.2",
+        "@babel/helper-function-name": "^7.14.2",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/parser": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-flow-strip-types": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz",
-      "integrity": "sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==",
+    "node_modules/@babel/types": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.4.tgz",
+      "integrity": "sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4",
-        "@babel/plugin-syntax-flow": "^7.12.1"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "to-fast-properties": "^2.0.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-for-of": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz",
-      "integrity": "sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+    "node_modules/@sindresorhus/is": {
+      "version": "0.14.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=6"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz",
-      "integrity": "sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==",
+    "node_modules/@szmarczak/http-timer": {
+      "version": "1.1.2",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "defer-to-connect": "^1.0.1"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=6"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz",
-      "integrity": "sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==",
+    "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": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@webassemblyjs/helper-module-context": "1.9.0",
+        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-member-expression-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz",
-      "integrity": "sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==",
+    "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": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@webassemblyjs/wast-printer": "1.9.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-amd": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz",
-      "integrity": "sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==",
+    "node_modules/@webassemblyjs/helper-fsm": {
+      "version": "1.9.0",
+      "license": "ISC"
+    },
+    "node_modules/@webassemblyjs/helper-module-context": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@webassemblyjs/ast": "1.9.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-commonjs": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
-      "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
+    "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": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@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/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-systemjs": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz",
-      "integrity": "sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==",
+    "node_modules/@webassemblyjs/ieee754": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "babel-plugin-dynamic-import-node": "^2.3.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@xtuc/ieee754": "^1.2.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-modules-umd": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz",
-      "integrity": "sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==",
+    "node_modules/@webassemblyjs/leb128": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-module-transforms": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.5.tgz",
-      "integrity": "sha512-+Xe5+6MWFo311U8SchgeX5c1+lJM+eZDBZgD+tvXu9VVQPXwwVzeManMMjYX6xw2HczngfOSZjoFYKwdeB/Jvw==",
+    "node_modules/@webassemblyjs/utf8": {
+      "version": "1.9.0",
+      "license": "MIT"
+    },
+    "node_modules/@webassemblyjs/wasm-edit": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
+        "@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/babel-preset-react-app/node_modules/@babel/plugin-transform-new-target": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz",
-      "integrity": "sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==",
+    "node_modules/@webassemblyjs/wasm-gen": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@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/babel-preset-react-app/node_modules/@babel/plugin-transform-object-super": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz",
-      "integrity": "sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==",
+    "node_modules/@webassemblyjs/wasm-opt": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@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/babel-preset-react-app/node_modules/@babel/plugin-transform-parameters": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz",
-      "integrity": "sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==",
+    "node_modules/@webassemblyjs/wasm-parser": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@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/babel-preset-react-app/node_modules/@babel/plugin-transform-property-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz",
-      "integrity": "sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==",
+    "node_modules/@webassemblyjs/wast-parser": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@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/babel-preset-react-app/node_modules/@babel/plugin-transform-react-display-name": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz",
-      "integrity": "sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==",
+    "node_modules/@webassemblyjs/wast-printer": {
+      "version": "1.9.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.10.4"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@webassemblyjs/ast": "1.9.0",
+        "@webassemblyjs/wast-parser": "1.9.0",
+        "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz",
-      "integrity": "sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==",
+    "node_modules/@webpack-cli/info": {
+      "version": "1.1.0",
+      "license": "MIT",
       "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.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "envinfo": "^7.7.3"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "webpack-cli": "4.x.x"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-development": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz",
-      "integrity": "sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==",
-      "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
+    "node_modules/@webpack-cli/serve": {
+      "version": "1.1.0",
+      "license": "MIT",
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "webpack-cli": "4.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-self": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz",
-      "integrity": "sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==",
+    "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": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx-source": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz",
-      "integrity": "sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+    "node_modules/acorn": {
+      "version": "6.4.2",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=0.4.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-pure-annotations": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz",
-      "integrity": "sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==",
+    "node_modules/ajv": {
+      "version": "6.12.6",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
+        "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": {
-        "@babel/core": "^7.0.0-0"
+        "ajv": ">=5.0.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-regenerator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz",
-      "integrity": "sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==",
-      "dependencies": {
-        "regenerator-transform": "^0.14.2"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
+    "node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "license": "MIT",
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "ajv": "^6.9.1"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-reserved-words": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz",
-      "integrity": "sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==",
+    "node_modules/ansi-align": {
+      "version": "3.0.0",
+      "license": "ISC",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+        "string-width": "^3.0.0"
+      }
+    },
+    "node_modules/ansi-colors": {
+      "version": "4.1.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=6"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-runtime": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz",
-      "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"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+    "node_modules/ansi-regex": {
+      "version": "4.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-shorthand-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
-      "integrity": "sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==",
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "color-convert": "^1.9.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=4"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-spread": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz",
-      "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==",
+    "node_modules/anymatch": {
+      "version": "3.1.1",
+      "license": "ISC",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5"
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
       },
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">= 8"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-sticky-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz",
-      "integrity": "sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+    "node_modules/aproba": {
+      "version": "1.2.0",
+      "license": "ISC"
+    },
+    "node_modules/arr-diff": {
+      "version": "4.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-template-literals": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz",
-      "integrity": "sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+    "node_modules/arr-flatten": {
+      "version": "1.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-typeof-symbol": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz",
-      "integrity": "sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+    "node_modules/arr-union": {
+      "version": "3.1.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-typescript": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.6.tgz",
-      "integrity": "sha512-XlTdBq7Awr4FYIzqhmYY80WN0V0azF74DMPyFqVHBvf81ZUgc4X7ZOpx6O8eLDK6iM5cCQzeyJw0ynTaefixRA==",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.14.6",
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-typescript": "^7.14.5"
-      },
+    "node_modules/array-back": {
+      "version": "4.0.1",
+      "license": "MIT",
       "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "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/babel-preset-react-app/node_modules/@babel/plugin-transform-unicode-escapes": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz",
-      "integrity": "sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==",
+    "node_modules/asn1.js": {
+      "version": "5.4.1",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
+        "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": ">=6.9.0"
+        "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"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+      "engines": {
+        "node": ">= 4.5.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-unicode-regex": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz",
-      "integrity": "sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==",
+    "node_modules/babel-loader": {
+      "version": "8.1.0",
+      "license": "MIT",
       "dependencies": {
-        "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "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.0"
+        "node": ">= 6.9"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/core": "^7.0.0",
+        "webpack": ">=2"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.1.tgz",
-      "integrity": "sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==",
+    "node_modules/babel-plugin-dynamic-import-node": {
+      "version": "2.3.3",
+      "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-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-class-properties": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz",
-      "integrity": "sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==",
-      "dependencies": {
-        "@babel/helper-create-class-features-plugin": "^7.14.5",
-        "@babel/helper-plugin-utils": "^7.14.5"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-nullish-coalescing-operator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz",
-      "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-numeric-separator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz",
-      "integrity": "sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==",
-      "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5",
-        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "object.assign": "^4.1.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-optional-chaining": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz",
-      "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==",
+    "node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "license": "MIT",
       "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"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
       }
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/preset-modules": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
-      "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"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
+    "node_modules/babel-plugin-transform-react-remove-prop-types": {
+      "version": "0.4.24",
+      "license": "MIT"
     },
-    "node_modules/babel-preset-react-app/node_modules/@babel/preset-react": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.12.1.tgz",
-      "integrity": "sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==",
+    "node_modules/babel-preset-react-app": {
+      "version": "10.0.0",
+      "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"
+        "@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/preset-react/node_modules/@babel/plugin-transform-react-display-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz",
-      "integrity": "sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==",
+    "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/helper-plugin-utils": "^7.14.5"
+        "@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"
       },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0-0"
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/@babel/preset-typescript": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz",
-      "integrity": "sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==",
-      "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-preset-react-app/node_modules/@babel/runtime": {
-      "version": "7.12.1",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
-      "integrity": "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==",
-      "dependencies": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-      "dependencies": {
-        "ms": "2.1.2"
-      },
-      "engines": {
-        "node": ">=6.0"
-      },
-      "peerDependenciesMeta": {
-        "supports-color": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/babel-preset-react-app/node_modules/ms": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-    },
-    "node_modules/babel-preset-react-app/node_modules/resolve": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dependencies": {
-        "is-core-module": "^2.2.0",
-        "path-parse": "^1.0.6"
-      },
       "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
       }
     },
     "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "version": "1.0.0",
+      "license": "MIT"
     },
     "node_modules/base": {
       "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
+      "license": "MIT",
       "dependencies": {
         "cache-base": "^1.0.1",
         "class-utils": "^0.3.5",
@@ -2338,8 +1788,7 @@
     },
     "node_modules/base/node_modules/define-property": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "license": "MIT",
       "dependencies": {
         "is-descriptor": "^1.0.0"
       },
@@ -2347,10 +1796,40 @@
         "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",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
       "funding": [
         {
           "type": "github",
@@ -2364,28 +1843,26 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "MIT"
     },
     "node_modules/big.js": {
       "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
+      "license": "MIT",
       "engines": {
         "node": "*"
       }
     },
     "node_modules/binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "version": "2.1.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/bindings": {
       "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "file-uri-to-path": "1.0.0"
@@ -2393,18 +1870,15 @@
     },
     "node_modules/bluebird": {
       "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+      "license": "MIT"
     },
     "node_modules/bn.js": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
+      "version": "5.1.3",
+      "license": "MIT"
     },
     "node_modules/body-parser": {
       "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "license": "MIT",
       "dependencies": {
         "bytes": "3.1.0",
         "content-type": "~1.0.4",
@@ -2421,10 +1895,27 @@
         "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",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
-      "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==",
+      "license": "MIT",
       "dependencies": {
         "ansi-align": "^3.0.0",
         "camelcase": "^5.3.1",
@@ -2444,16 +1935,14 @@
     },
     "node_modules/boxen/node_modules/ansi-regex": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/boxen/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -2466,8 +1955,7 @@
     },
     "node_modules/boxen/node_modules/chalk": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -2478,8 +1966,7 @@
     },
     "node_modules/boxen/node_modules/color-convert": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -2489,34 +1976,29 @@
     },
     "node_modules/boxen/node_modules/color-name": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "license": "MIT"
     },
     "node_modules/boxen/node_modules/emoji-regex": {
       "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "license": "MIT"
     },
     "node_modules/boxen/node_modules/has-flag": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/boxen/node_modules/is-fullwidth-code-point": {
       "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/boxen/node_modules/string-width": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "version": "4.2.0",
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -2528,8 +2010,7 @@
     },
     "node_modules/boxen/node_modules/strip-ansi": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.0"
       },
@@ -2539,8 +2020,7 @@
     },
     "node_modules/boxen/node_modules/supports-color": {
       "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -2550,42 +2030,29 @@
     },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+      "license": "MIT",
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "version": "3.0.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"
+        "fill-range": "^7.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
     "node_modules/brorand": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
+      "license": "MIT"
     },
     "node_modules/browserify-aes": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
-      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
+      "license": "MIT",
       "dependencies": {
         "buffer-xor": "^1.0.3",
         "cipher-base": "^1.0.0",
@@ -2597,8 +2064,7 @@
     },
     "node_modules/browserify-cipher": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
+      "license": "MIT",
       "dependencies": {
         "browserify-aes": "^1.0.4",
         "browserify-des": "^1.0.0",
@@ -2607,8 +2073,7 @@
     },
     "node_modules/browserify-des": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
+      "license": "MIT",
       "dependencies": {
         "cipher-base": "^1.0.1",
         "des.js": "^1.0.0",
@@ -2618,22 +2083,15 @@
     },
     "node_modules/browserify-rsa": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
-      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
+      "license": "MIT",
       "dependencies": {
         "bn.js": "^5.0.0",
         "randombytes": "^2.0.1"
       }
     },
-    "node_modules/browserify-rsa/node_modules/bn.js": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
-      "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
-    },
     "node_modules/browserify-sign": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
-      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
+      "license": "ISC",
       "dependencies": {
         "bn.js": "^5.1.1",
         "browserify-rsa": "^4.0.1",
@@ -2646,36 +2104,34 @@
         "safe-buffer": "^5.2.0"
       }
     },
-    "node_modules/browserify-sign/node_modules/bn.js": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
-      "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
-    },
-    "node_modules/browserify-sign/node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+    "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",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
+      "license": "MIT",
       "dependencies": {
         "pako": "~1.0.5"
       }
     },
     "node_modules/browserslist": {
       "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
+      "license": "MIT",
       "dependencies": {
         "caniuse-lite": "^1.0.30001219",
         "colorette": "^1.2.2",
@@ -2696,8 +2152,7 @@
     },
     "node_modules/buffer": {
       "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
+      "license": "MIT",
       "dependencies": {
         "base64-js": "^1.0.2",
         "ieee754": "^1.1.4",
@@ -2706,31 +2161,26 @@
     },
     "node_modules/buffer-from": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+      "license": "MIT"
     },
     "node_modules/buffer-xor": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
+      "license": "MIT"
     },
     "node_modules/builtin-status-codes": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
+      "license": "MIT"
     },
     "node_modules/bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "version": "3.0.0",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/cacache": {
       "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-      "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
+      "license": "ISC",
       "dependencies": {
         "bluebird": "^3.5.5",
         "chownr": "^1.1.1",
@@ -2751,8 +2201,7 @@
     },
     "node_modules/cacache/node_modules/rimraf": {
       "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -2762,8 +2211,7 @@
     },
     "node_modules/cache-base": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
+      "license": "MIT",
       "dependencies": {
         "collection-visit": "^1.0.0",
         "component-emitter": "^1.2.1",
@@ -2781,8 +2229,7 @@
     },
     "node_modules/cacheable-request": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
-      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
+      "license": "MIT",
       "dependencies": {
         "clone-response": "^1.0.2",
         "get-stream": "^5.1.0",
@@ -2798,8 +2245,7 @@
     },
     "node_modules/cacheable-request/node_modules/get-stream": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-      "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+      "license": "MIT",
       "dependencies": {
         "pump": "^3.0.0"
       },
@@ -2812,19 +2258,17 @@
     },
     "node_modules/cacheable-request/node_modules/lowercase-keys": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-      "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "get-intrinsic": "^1.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -2832,24 +2276,21 @@
     },
     "node_modules/callsites": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/camelcase": {
       "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001237",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz",
-      "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw==",
+      "version": "1.0.30001233",
+      "license": "CC-BY-4.0",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/browserslist"
@@ -2857,8 +2298,7 @@
     },
     "node_modules/chalk": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -2869,88 +2309,45 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "version": "3.4.3",
+      "license": "MIT",
       "dependencies": {
-        "anymatch": "~3.1.2",
+        "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "glob-parent": "~5.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.6.0"
+        "readdirp": "~3.5.0"
       },
       "engines": {
         "node": ">= 8.10.0"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dependencies": {
-        "fill-range": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/chokidar/node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/chokidar/node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/chokidar/node_modules/to-regex-range": {
-      "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"
-      },
-      "engines": {
-        "node": ">=8.0"
+        "fsevents": "~2.1.2"
       }
     },
     "node_modules/chownr": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+      "license": "ISC"
     },
     "node_modules/chrome-trace-event": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
       "engines": {
         "node": ">=6.0"
       }
     },
     "node_modules/ci-info": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+      "license": "MIT"
     },
     "node_modules/cipher-base": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
+      "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -2958,8 +2355,7 @@
     },
     "node_modules/class-utils": {
       "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
+      "license": "MIT",
       "dependencies": {
         "arr-union": "^3.1.0",
         "define-property": "^0.2.5",
@@ -2970,10 +2366,19 @@
         "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",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
-      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       },
@@ -2983,8 +2388,7 @@
     },
     "node_modules/cliui": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
+      "license": "ISC",
       "dependencies": {
         "string-width": "^3.1.0",
         "strip-ansi": "^5.2.0",
@@ -3006,16 +2410,14 @@
     },
     "node_modules/clone-response": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
+      "license": "MIT",
       "dependencies": {
         "mimic-response": "^1.0.0"
       }
     },
     "node_modules/collection-visit": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
+      "license": "MIT",
       "dependencies": {
         "map-visit": "^1.0.0",
         "object-visit": "^1.0.0"
@@ -3026,44 +2428,43 @@
     },
     "node_modules/color-convert": {
       "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "license": "MIT",
       "dependencies": {
         "color-name": "1.1.3"
       }
     },
     "node_modules/color-name": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "license": "MIT"
     },
     "node_modules/colorette": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+      "license": "MIT"
     },
-    "node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+    "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": ">= 10"
+        "node": ">=8.0.0"
       }
     },
     "node_modules/commondir": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+      "license": "MIT"
     },
     "node_modules/component-emitter": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+      "license": "MIT"
     },
     "node_modules/compressible": {
       "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "license": "MIT",
       "dependencies": {
         "mime-db": ">= 1.43.0 < 2"
       },
@@ -3073,8 +2474,7 @@
     },
     "node_modules/compression": {
       "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.5",
         "bytes": "3.0.0",
@@ -3088,31 +2488,27 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/compression/node_modules/bytes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-      "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=",
-      "engines": {
-        "node": ">= 0.8"
+    "node_modules/compression/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "2.0.0"
       }
     },
-    "node_modules/compression/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    "node_modules/compression/node_modules/ms": {
+      "version": "2.0.0",
+      "license": "MIT"
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "license": "MIT"
     },
     "node_modules/concat-stream": {
       "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
       "engines": [
         "node >= 0.8"
       ],
+      "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
         "inherits": "^2.0.3",
@@ -3120,10 +2516,29 @@
         "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",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-5.3.0.tgz",
-      "integrity": "sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ==",
+      "license": "MIT",
       "dependencies": {
         "chalk": "^2.4.2",
         "date-fns": "^2.0.1",
@@ -3144,8 +2559,7 @@
     },
     "node_modules/concurrently/node_modules/supports-color": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-      "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
+      "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -3155,8 +2569,7 @@
     },
     "node_modules/configstore": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
-      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "dot-prop": "^5.2.0",
         "graceful-fs": "^4.1.2",
@@ -3171,8 +2584,7 @@
     },
     "node_modules/configstore/node_modules/make-dir": {
       "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==",
+      "license": "MIT",
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -3185,26 +2597,21 @@
     },
     "node_modules/configstore/node_modules/semver": {
       "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/console-browserify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
-      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
+      "version": "1.2.0"
     },
     "node_modules/constants-browserify": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
+      "license": "MIT"
     },
     "node_modules/content-disposition": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "license": "MIT",
       "dependencies": {
         "safe-buffer": "5.1.2"
       },
@@ -3212,49 +2619,34 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/content-disposition/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
     "node_modules/content-type": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/convert-source-map": {
       "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
-      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "license": "MIT",
       "dependencies": {
         "safe-buffer": "~5.1.1"
       }
     },
-    "node_modules/convert-source-map/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
     "node_modules/cookie": {
       "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cookie-signature": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+      "license": "MIT"
     },
     "node_modules/copy-concurrently": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "license": "ISC",
       "dependencies": {
         "aproba": "^1.1.1",
         "fs-write-stream-atomic": "^1.0.8",
@@ -3266,8 +2658,7 @@
     },
     "node_modules/copy-concurrently/node_modules/rimraf": {
       "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -3277,18 +2668,16 @@
     },
     "node_modules/copy-descriptor": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/core-js-compat": {
-      "version": "3.14.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.14.0.tgz",
-      "integrity": "sha512-R4NS2eupxtiJU+VwgkF9WTpnSfZW4pogwKHd8bclWU2sp93Pr5S1uYJI84cMOubJRou7bcfL0vmwtLslWN5p3A==",
+      "version": "3.8.1",
+      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.15.0",
         "semver": "7.0.0"
       },
       "funding": {
@@ -3298,21 +2687,18 @@
     },
     "node_modules/core-js-compat/node_modules/semver": {
       "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-      "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/core-util-is": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+      "license": "MIT"
     },
     "node_modules/cosmiconfig": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "license": "MIT",
       "dependencies": {
         "@types/parse-json": "^4.0.0",
         "import-fresh": "^3.1.0",
@@ -3324,36 +2710,21 @@
         "node": ">=8"
       }
     },
-    "node_modules/cosmiconfig/node_modules/parse-json": {
-      "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"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/create-ecdh": {
       "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
-      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
+      "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",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
-      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
+      "license": "MIT",
       "dependencies": {
         "cipher-base": "^1.0.1",
         "inherits": "^2.0.1",
@@ -3364,8 +2735,7 @@
     },
     "node_modules/create-hmac": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
-      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
+      "license": "MIT",
       "dependencies": {
         "cipher-base": "^1.0.3",
         "create-hash": "^1.1.0",
@@ -3377,9 +2747,8 @@
     },
     "node_modules/cross-env": {
       "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "cross-spawn": "^7.0.1"
       },
@@ -3395,8 +2764,7 @@
     },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -3408,8 +2776,7 @@
     },
     "node_modules/crypto-browserify": {
       "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
+      "license": "MIT",
       "dependencies": {
         "browserify-cipher": "^1.0.0",
         "browserify-sign": "^4.0.0",
@@ -3429,21 +2796,18 @@
     },
     "node_modules/crypto-random-string": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
-      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/cyclist": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
-      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
+      "license": "MIT"
     },
     "node_modules/date-fns": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
-      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg==",
+      "version": "2.16.1",
+      "license": "MIT",
       "engines": {
         "node": ">=0.11"
       },
@@ -3453,33 +2817,37 @@
       }
     },
     "node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "4.3.1",
+      "license": "MIT",
       "dependencies": {
-        "ms": "2.0.0"
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
       }
     },
     "node_modules/decamelize": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/decode-uri-component": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10"
       }
     },
     "node_modules/decompress-response": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
-      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
+      "license": "MIT",
       "dependencies": {
         "mimic-response": "^1.0.0"
       },
@@ -3489,21 +2857,18 @@
     },
     "node_modules/deep-extend": {
       "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
       "engines": {
         "node": ">=4.0.0"
       }
     },
     "node_modules/defer-to-connect": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
-      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
+      "license": "MIT"
     },
     "node_modules/define-properties": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "license": "MIT",
       "dependencies": {
         "object-keys": "^1.0.12"
       },
@@ -3512,93 +2877,58 @@
       }
     },
     "node_modules/define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "version": "2.0.2",
+      "license": "MIT",
       "dependencies": {
-        "is-descriptor": "^0.1.0"
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/define-property/node_modules/is-accessor-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^3.0.2"
+        "kind-of": "^6.0.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/define-property/node_modules/is-accessor-descriptor/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+    "node_modules/define-property/node_modules/is-data-descriptor": {
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
-        "is-buffer": "^1.1.5"
+        "kind-of": "^6.0.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/define-property/node_modules/is-data-descriptor": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+    "node_modules/define-property/node_modules/is-descriptor": {
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^3.0.2"
+        "is-accessor-descriptor": "^1.0.0",
+        "is-data-descriptor": "^1.0.0",
+        "kind-of": "^6.0.2"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/define-property/node_modules/is-data-descriptor/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
+    "node_modules/depd": {
+      "version": "1.1.2",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">= 0.6"
       }
     },
-    "node_modules/define-property/node_modules/is-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-      "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-      "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/define-property/node_modules/kind-of": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-      "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
-    "node_modules/des.js": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
-      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
+    "node_modules/des.js": {
+      "version": "1.0.1",
+      "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.1",
         "minimalistic-assert": "^1.0.0"
@@ -3606,23 +2936,24 @@
     },
     "node_modules/destroy": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+      "license": "MIT"
     },
     "node_modules/diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
+      "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",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
-      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.4",
         "npm": ">=1.2"
@@ -3630,8 +2961,7 @@
     },
     "node_modules/dot-prop": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
-      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
+      "license": "MIT",
       "dependencies": {
         "is-obj": "^2.0.0"
       },
@@ -3641,13 +2971,11 @@
     },
     "node_modules/duplexer3": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+      "license": "BSD-3-Clause"
     },
     "node_modules/duplexify": {
       "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
-      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
+      "license": "MIT",
       "dependencies": {
         "end-of-stream": "^1.0.0",
         "inherits": "^2.0.1",
@@ -3655,20 +2983,37 @@
         "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",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+      "license": "MIT"
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.3.752",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
-      "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A=="
+      "version": "1.3.743",
+      "license": "ISC"
     },
     "node_modules/elliptic": {
       "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
+      "license": "MIT",
       "dependencies": {
         "bn.js": "^4.11.9",
         "brorand": "^1.1.0",
@@ -3679,39 +3024,37 @@
         "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",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+      "license": "MIT"
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
+      "license": "MIT",
       "engines": {
         "node": ">= 4"
       }
     },
     "node_modules/encodeurl": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/end-of-stream": {
       "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==",
+      "license": "MIT",
       "dependencies": {
         "once": "^1.4.0"
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
-      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "version": "4.3.0",
       "dependencies": {
         "graceful-fs": "^4.1.2",
         "memory-fs": "^0.5.0",
@@ -3723,8 +3066,7 @@
     },
     "node_modules/enhanced-resolve/node_modules/memory-fs": {
       "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-      "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+      "license": "MIT",
       "dependencies": {
         "errno": "^0.1.3",
         "readable-stream": "^2.0.1"
@@ -3733,10 +3075,39 @@
         "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.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
+      "version": "7.7.3",
+      "license": "MIT",
       "bin": {
         "envinfo": "dist/cli.js"
       },
@@ -3746,8 +3117,7 @@
     },
     "node_modules/errno": {
       "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "license": "MIT",
       "dependencies": {
         "prr": "~1.0.1"
       },
@@ -3757,45 +3127,39 @@
     },
     "node_modules/error-ex": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "license": "MIT",
       "dependencies": {
         "is-arrayish": "^0.2.1"
       }
     },
     "node_modules/escalade": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/escape-goat": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
-      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/escape-html": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+      "license": "MIT"
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.0"
       }
     },
     "node_modules/eslint-scope": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "esrecurse": "^4.1.0",
         "estraverse": "^4.1.1"
@@ -3806,8 +3170,7 @@
     },
     "node_modules/esrecurse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -3817,66 +3180,59 @@
     },
     "node_modules/esrecurse/node_modules/estraverse": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
     },
     "node_modules/estraverse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=4.0"
       }
     },
     "node_modules/esutils": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/etag": {
       "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
+      "version": "3.2.0",
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.x"
       }
     },
     "node_modules/evp_bytestokey": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
-      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
+      "license": "MIT",
       "dependencies": {
         "md5.js": "^1.3.4",
         "safe-buffer": "^5.1.1"
       }
     },
     "node_modules/execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "version": "4.1.0",
+      "license": "MIT",
       "dependencies": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
+        "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.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
+        "npm-run-path": "^4.0.0",
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2",
         "strip-final-newline": "^2.0.0"
       },
       "engines": {
@@ -3886,10 +3242,22 @@
         "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",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
+      "license": "MIT",
       "dependencies": {
         "debug": "^2.3.3",
         "define-property": "^0.2.5",
@@ -3903,10 +3271,40 @@
         "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",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "license": "MIT",
       "dependencies": {
         "accepts": "~1.3.7",
         "array-flatten": "1.1.1",
@@ -3943,17 +3341,33 @@
         "node": ">= 0.10.0"
       }
     },
-    "node_modules/express/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    "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": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "version": "3.0.2",
+      "license": "MIT",
       "dependencies": {
-        "is-extendable": "^0.1.0"
+        "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"
@@ -3961,8 +3375,7 @@
     },
     "node_modules/extglob": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
+      "license": "MIT",
       "dependencies": {
         "array-unique": "^0.3.2",
         "define-property": "^1.0.0",
@@ -3979,8 +3392,7 @@
     },
     "node_modules/extglob/node_modules/define-property": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "license": "MIT",
       "dependencies": {
         "is-descriptor": "^1.0.0"
       },
@@ -3988,50 +3400,78 @@
         "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",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "license": "MIT"
     },
     "node_modules/fast-json-stable-stringify": {
       "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=="
-    },
-    "node_modules/fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow=="
+      "license": "MIT"
     },
     "node_modules/figgy-pudding": {
       "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
-      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
+      "license": "ISC"
     },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "license": "MIT",
       "optional": true
     },
     "node_modules/fill-range": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "version": "7.0.1",
+      "license": "MIT",
       "dependencies": {
-        "extend-shallow": "^2.0.1",
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1",
-        "to-regex-range": "^2.1.0"
+        "to-regex-range": "^5.0.1"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
     "node_modules/finalhandler": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
@@ -4045,10 +3485,20 @@
         "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",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
+      "license": "MIT",
       "dependencies": {
         "commondir": "^1.0.1",
         "make-dir": "^2.0.0",
@@ -4060,8 +3510,7 @@
     },
     "node_modules/find-up": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
+      "license": "MIT",
       "dependencies": {
         "locate-path": "^3.0.0"
       },
@@ -4071,33 +3520,49 @@
     },
     "node_modules/flush-write-stream": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
-      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
+      "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",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
+      "version": "0.1.2",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/fragment-cache": {
       "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
+      "license": "MIT",
       "dependencies": {
         "map-cache": "^0.2.2"
       },
@@ -4107,42 +3572,76 @@
     },
     "node_modules/fresh": {
       "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/from2": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.1",
         "readable-stream": "^2.0.0"
       }
     },
-    "node_modules/fs-write-stream-atomic": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+    "node_modules/from2/node_modules/readable-stream": {
+      "version": "2.3.7",
+      "license": "MIT",
       "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "iferr": "^0.1.5",
-        "imurmurhash": "^0.1.4",
-        "readable-stream": "1 || 2"
+        "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",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+      "license": "ISC"
     },
     "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "hasInstallScript": true,
+      "version": "2.1.3",
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -4153,29 +3652,25 @@
     },
     "node_modules/function-bind": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "license": "MIT"
     },
     "node_modules/gensync": {
       "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "license": "ISC",
       "engines": {
         "node": "6.* || 8.* || >= 10.*"
       }
     },
     "node_modules/get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.0.2",
+      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -4186,28 +3681,25 @@
       }
     },
     "node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "engines": {
-        "node": ">=10"
+      "version": "4.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "pump": "^3.0.0"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/get-value": {
       "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "version": "7.1.6",
+      "license": "ISC",
       "dependencies": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -4224,9 +3716,8 @@
       }
     },
     "node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "version": "5.1.1",
+      "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4236,8 +3727,7 @@
     },
     "node_modules/global-dirs": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.1.0.tgz",
-      "integrity": "sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==",
+      "license": "MIT",
       "dependencies": {
         "ini": "1.3.7"
       },
@@ -4250,16 +3740,14 @@
     },
     "node_modules/globals": {
       "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/got": {
       "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
-      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
+      "license": "MIT",
       "dependencies": {
         "@sindresorhus/is": "^0.14.0",
         "@szmarczak/http-timer": "^1.1.2",
@@ -4277,26 +3765,13 @@
         "node": ">=8.6"
       }
     },
-    "node_modules/got/node_modules/get-stream": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-      "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-      "dependencies": {
-        "pump": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/graceful-fs": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
+      "version": "4.2.4",
+      "license": "ISC"
     },
     "node_modules/has": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -4306,16 +3781,14 @@
     },
     "node_modules/has-flag": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "version": "1.0.1",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       },
@@ -4325,8 +3798,7 @@
     },
     "node_modules/has-value": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
+      "license": "MIT",
       "dependencies": {
         "get-value": "^2.0.6",
         "has-values": "^1.0.0",
@@ -4338,8 +3810,7 @@
     },
     "node_modules/has-values": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
+      "license": "MIT",
       "dependencies": {
         "is-number": "^3.0.0",
         "kind-of": "^4.0.0"
@@ -4348,10 +3819,29 @@
         "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",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-      "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+      "license": "MIT",
       "dependencies": {
         "is-buffer": "^1.1.5"
       },
@@ -4361,16 +3851,14 @@
     },
     "node_modules/has-yarn": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
-      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/hash-base": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
-      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
+      "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.4",
         "readable-stream": "^3.6.0",
@@ -4380,23 +3868,27 @@
         "node": ">=4"
       }
     },
-    "node_modules/hash-base/node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
+    "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",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
+      "license": "MIT",
       "dependencies": {
         "inherits": "^2.0.3",
         "minimalistic-assert": "^1.0.1"
@@ -4404,8 +3896,7 @@
     },
     "node_modules/hmac-drbg": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
+      "license": "MIT",
       "dependencies": {
         "hash.js": "^1.0.3",
         "minimalistic-assert": "^1.0.0",
@@ -4414,18 +3905,15 @@
     },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+      "license": "ISC"
     },
     "node_modules/http-cache-semantics": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+      "license": "BSD-2-Clause"
     },
     "node_modules/http-errors": {
       "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "license": "MIT",
       "dependencies": {
         "depd": "~1.1.2",
         "inherits": "2.0.3",
@@ -4439,26 +3927,22 @@
     },
     "node_modules/http-errors/node_modules/inherits": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+      "license": "ISC"
     },
     "node_modules/https-browserify": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+      "license": "MIT"
     },
     "node_modules/human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
+      "version": "1.1.1",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=10.17.0"
+        "node": ">=8.12.0"
       }
     },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3"
       },
@@ -4468,8 +3952,6 @@
     },
     "node_modules/ieee754": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
       "funding": [
         {
           "type": "github",
@@ -4483,22 +3965,20 @@
           "type": "consulting",
           "url": "https://feross.org/support"
         }
-      ]
+      ],
+      "license": "BSD-3-Clause"
     },
     "node_modules/iferr": {
       "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+      "license": "MIT"
     },
     "node_modules/ignore-by-default": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
+      "license": "ISC"
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+      "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -4510,26 +3990,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/import-fresh/node_modules/resolve-from": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/import-lazy": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
-      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/import-local": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
-      "integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
+      "license": "MIT",
       "dependencies": {
         "pkg-dir": "^4.2.0",
         "resolve-cwd": "^3.0.0"
@@ -4543,8 +4013,7 @@
     },
     "node_modules/import-local/node_modules/find-up": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+      "license": "MIT",
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -4555,8 +4024,7 @@
     },
     "node_modules/import-local/node_modules/locate-path": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+      "license": "MIT",
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -4566,8 +4034,7 @@
     },
     "node_modules/import-local/node_modules/p-locate": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+      "license": "MIT",
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -4577,16 +4044,14 @@
     },
     "node_modules/import-local/node_modules/path-exists": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/import-local/node_modules/pkg-dir": {
       "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==",
+      "license": "MIT",
       "dependencies": {
         "find-up": "^4.0.0"
       },
@@ -4596,21 +4061,18 @@
     },
     "node_modules/imurmurhash": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.8.19"
       }
     },
     "node_modules/infer-owner": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
+      "license": "ISC"
     },
     "node_modules/inflight": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "license": "ISC",
       "dependencies": {
         "once": "^1.3.0",
         "wrappy": "1"
@@ -4618,36 +4080,41 @@
     },
     "node_modules/inherits": {
       "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "license": "ISC"
     },
     "node_modules/ini": {
       "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
-      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
+      "license": "ISC"
     },
     "node_modules/interpret": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.10"
       }
     },
     "node_modules/ipaddr.js": {
       "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==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.10"
       }
     },
     "node_modules/is-accessor-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "version": "0.1.6",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^6.0.0"
+        "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"
@@ -4655,13 +4122,11 @@
     },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+      "license": "MIT"
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -4671,13 +4136,11 @@
     },
     "node_modules/is-buffer": {
       "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+      "license": "MIT"
     },
     "node_modules/is-ci": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
+      "license": "MIT",
       "dependencies": {
         "ci-info": "^2.0.0"
       },
@@ -4685,69 +4148,69 @@
         "is-ci": "bin.js"
       }
     },
-    "node_modules/is-core-module": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
-      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
+    "node_modules/is-data-descriptor": {
+      "version": "0.1.4",
+      "license": "MIT",
       "dependencies": {
-        "has": "^1.0.3"
+        "kind-of": "^3.0.2"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
-    "node_modules/is-data-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+    "node_modules/is-data-descriptor/node_modules/kind-of": {
+      "version": "3.2.2",
+      "license": "MIT",
       "dependencies": {
-        "kind-of": "^6.0.0"
+        "is-buffer": "^1.1.5"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/is-descriptor": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "version": "0.1.6",
+      "license": "MIT",
       "dependencies": {
-        "is-accessor-descriptor": "^1.0.0",
-        "is-data-descriptor": "^1.0.0",
-        "kind-of": "^6.0.2"
+        "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",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/is-fullwidth-code-point": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/is-glob": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -4757,8 +4220,7 @@
     },
     "node_modules/is-installed-globally": {
       "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz",
-      "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==",
+      "license": "MIT",
       "dependencies": {
         "global-dirs": "^2.0.1",
         "is-path-inside": "^3.0.1"
@@ -4772,46 +4234,28 @@
     },
     "node_modules/is-npm": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz",
-      "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-      "dependencies": {
-        "kind-of": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number/node_modules/kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dependencies": {
-        "is-buffer": "^1.1.5"
-      },
+      "version": "7.0.0",
+      "license": "MIT",
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=0.12.0"
       }
     },
     "node_modules/is-obj": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/is-path-inside": {
-      "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==",
+      "version": "3.0.2",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -4829,65 +4273,55 @@
     },
     "node_modules/is-stream": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/is-typedarray": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+      "license": "MIT"
     },
     "node_modules/is-windows": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/is-wsl": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/is-yarn-global": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
-      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
+      "license": "MIT"
     },
     "node_modules/isarray": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+      "license": "MIT"
     },
     "node_modules/isexe": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+      "license": "ISC"
     },
     "node_modules/isobject": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "license": "MIT"
     },
     "node_modules/jsesc": {
       "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
       },
@@ -4897,28 +4331,23 @@
     },
     "node_modules/json-buffer": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
+      "license": "MIT"
     },
     "node_modules/json-parse-better-errors": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+      "license": "MIT"
     },
     "node_modules/json-parse-even-better-errors": {
       "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=="
+      "license": "MIT"
     },
     "node_modules/json-schema-traverse": {
       "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=="
+      "license": "MIT"
     },
     "node_modules/json5": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "version": "2.1.3",
+      "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.5"
       },
@@ -4931,24 +4360,21 @@
     },
     "node_modules/keyv": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
-      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
+      "license": "MIT",
       "dependencies": {
         "json-buffer": "3.0.0"
       }
     },
     "node_modules/kind-of": {
       "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/latest-version": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
-      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
+      "license": "MIT",
       "dependencies": {
         "package-json": "^6.3.0"
       },
@@ -4956,23 +4382,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/leven": {
+      "version": "3.1.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+      "license": "MIT"
     },
     "node_modules/loader-runner": {
       "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
-      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==",
+      "license": "MIT",
       "engines": {
         "node": ">=4.3.0 <5.0.0 || >=5.10"
       }
     },
     "node_modules/loader-utils": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
+      "license": "MIT",
       "dependencies": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -4984,8 +4414,7 @@
     },
     "node_modules/loader-utils/node_modules/json5": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-      "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+      "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.0"
       },
@@ -4995,8 +4424,7 @@
     },
     "node_modules/locate-path": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
+      "license": "MIT",
       "dependencies": {
         "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
@@ -5007,13 +4435,11 @@
     },
     "node_modules/lodash": {
       "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "license": "MIT"
     },
     "node_modules/loose-envify": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -5023,24 +4449,21 @@
     },
     "node_modules/lowercase-keys": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/lru-cache": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "license": "ISC",
       "dependencies": {
         "yallist": "^3.0.2"
       }
     },
     "node_modules/make-dir": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "license": "MIT",
       "dependencies": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
@@ -5051,16 +4474,14 @@
     },
     "node_modules/map-cache": {
       "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/map-visit": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
+      "license": "MIT",
       "dependencies": {
         "object-visit": "^1.0.0"
       },
@@ -5070,8 +4491,7 @@
     },
     "node_modules/md5.js": {
       "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
-      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
+      "license": "MIT",
       "dependencies": {
         "hash-base": "^3.0.0",
         "inherits": "^2.0.1",
@@ -5080,43 +4500,57 @@
     },
     "node_modules/media-typer": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/memory-fs": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
+      "license": "MIT",
       "dependencies": {
         "errno": "^0.1.3",
         "readable-stream": "^2.0.1"
       }
     },
-    "node_modules/merge-descriptors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    "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/merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+    "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",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/micromatch": {
       "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
+      "license": "MIT",
       "dependencies": {
         "arr-diff": "^4.0.0",
         "array-unique": "^0.3.2",
@@ -5136,36 +4570,84 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/micromatch/node_modules/define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+    "node_modules/micromatch/node_modules/braces": {
+      "version": "2.3.2",
+      "license": "MIT",
       "dependencies": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
+        "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/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+    "node_modules/micromatch/node_modules/braces/node_modules/extend-shallow": {
+      "version": "2.0.1",
+      "license": "MIT",
       "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
+        "is-extendable": "^0.1.0"
       },
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/micromatch/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+    "node_modules/micromatch/node_modules/fill-range": {
+      "version": "4.0.0",
+      "license": "MIT",
       "dependencies": {
-        "is-plain-object": "^2.0.4"
+        "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"
@@ -5173,8 +4655,7 @@
     },
     "node_modules/miller-rabin": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
+      "license": "MIT",
       "dependencies": {
         "bn.js": "^4.0.0",
         "brorand": "^1.0.1"
@@ -5183,10 +4664,13 @@
         "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",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "license": "MIT",
       "bin": {
         "mime": "cli.js"
       },
@@ -5195,19 +4679,17 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.48.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
-      "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ==",
+      "version": "1.44.0",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/mime-types": {
-      "version": "2.1.31",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
-      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
+      "version": "2.1.27",
+      "license": "MIT",
       "dependencies": {
-        "mime-db": "1.48.0"
+        "mime-db": "1.44.0"
       },
       "engines": {
         "node": ">= 0.6"
@@ -5215,34 +4697,29 @@
     },
     "node_modules/mimic-fn": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/mimic-response": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+      "license": "ISC"
     },
     "node_modules/minimalistic-crypto-utils": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
+      "license": "MIT"
     },
     "node_modules/minimatch": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "license": "ISC",
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -5252,13 +4729,11 @@
     },
     "node_modules/minimist": {
       "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "license": "MIT"
     },
     "node_modules/mississippi": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "concat-stream": "^1.5.0",
         "duplexify": "^3.4.2",
@@ -5277,8 +4752,7 @@
     },
     "node_modules/mixin-deep": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
+      "license": "MIT",
       "dependencies": {
         "for-in": "^1.0.2",
         "is-extendable": "^1.0.1"
@@ -5289,8 +4763,7 @@
     },
     "node_modules/mixin-deep/node_modules/is-extendable": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "license": "MIT",
       "dependencies": {
         "is-plain-object": "^2.0.4"
       },
@@ -5300,8 +4773,7 @@
     },
     "node_modules/mkdirp": {
       "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "license": "MIT",
       "dependencies": {
         "minimist": "^1.2.5"
       },
@@ -5311,8 +4783,7 @@
     },
     "node_modules/move-concurrently": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "license": "ISC",
       "dependencies": {
         "aproba": "^1.1.1",
         "copy-concurrently": "^1.0.0",
@@ -5324,8 +4795,7 @@
     },
     "node_modules/move-concurrently/node_modules/rimraf": {
       "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -5334,20 +4804,17 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "version": "2.1.2",
+      "license": "MIT"
     },
     "node_modules/nan": {
       "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "license": "MIT",
       "optional": true
     },
     "node_modules/nanomatch": {
       "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
+      "license": "MIT",
       "dependencies": {
         "arr-diff": "^4.0.0",
         "array-unique": "^0.3.2",
@@ -5365,58 +4832,20 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/nanomatch/node_modules/define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dependencies": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/nanomatch/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/nanomatch/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/negotiator": {
       "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/neo-async": {
       "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+      "license": "MIT"
     },
     "node_modules/node-libs-browser": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
-      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
+      "license": "MIT",
       "dependencies": {
         "assert": "^1.1.1",
         "browserify-zlib": "^0.2.0",
@@ -5443,24 +4872,45 @@
         "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",
-      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
-      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/node-releases": {
-      "version": "1.1.73",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
-      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
+      "version": "1.1.72",
+      "license": "MIT"
     },
     "node_modules/nodemon": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
-      "integrity": "sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==",
+      "version": "2.0.6",
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
         "chokidar": "^3.2.2",
         "debug": "^3.2.6",
@@ -5486,35 +4936,24 @@
     },
     "node_modules/nodemon/node_modules/debug": {
       "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
       "dependencies": {
         "ms": "^2.1.1"
       }
     },
-    "node_modules/nodemon/node_modules/ms": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-    },
     "node_modules/nopt": {
       "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-      "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+      "license": "MIT",
       "dependencies": {
         "abbrev": "1"
       },
       "bin": {
         "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": "*"
       }
     },
     "node_modules/normalize-package-data": {
       "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "hosted-git-info": "^2.1.4",
         "resolve": "^1.10.0",
@@ -5522,38 +4961,23 @@
         "validate-npm-package-license": "^3.0.1"
       }
     },
-    "node_modules/normalize-package-data/node_modules/resolve": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dependencies": {
-        "is-core-module": "^2.2.0",
-        "path-parse": "^1.0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/normalize-url": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
-      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==",
+      "version": "4.5.0",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.0.0"
       },
@@ -5563,16 +4987,14 @@
     },
     "node_modules/object-assign": {
       "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/object-copy": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
+      "license": "MIT",
       "dependencies": {
         "copy-descriptor": "^0.1.0",
         "define-property": "^0.2.5",
@@ -5582,10 +5004,19 @@
         "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",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "license": "MIT",
       "dependencies": {
         "is-buffer": "^1.1.5"
       },
@@ -5595,16 +5026,14 @@
     },
     "node_modules/object-keys": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4"
       }
     },
     "node_modules/object-visit": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
+      "license": "MIT",
       "dependencies": {
         "isobject": "^3.0.0"
       },
@@ -5614,8 +5043,7 @@
     },
     "node_modules/object.assign": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
+      "license": "MIT",
       "dependencies": {
         "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
@@ -5631,8 +5059,7 @@
     },
     "node_modules/object.pick": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
+      "license": "MIT",
       "dependencies": {
         "isobject": "^3.0.1"
       },
@@ -5642,8 +5069,7 @@
     },
     "node_modules/on-finished": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "license": "MIT",
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -5653,24 +5079,21 @@
     },
     "node_modules/on-headers": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/once": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "license": "ISC",
       "dependencies": {
         "wrappy": "1"
       }
     },
     "node_modules/onetime": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+      "license": "MIT",
       "dependencies": {
         "mimic-fn": "^2.1.0"
       },
@@ -5683,21 +5106,18 @@
     },
     "node_modules/os-browserify": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+      "license": "MIT"
     },
     "node_modules/p-cancelable": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
-      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/p-limit": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
+      "license": "MIT",
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -5710,8 +5130,7 @@
     },
     "node_modules/p-locate": {
       "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==",
+      "license": "MIT",
       "dependencies": {
         "p-limit": "^2.0.0"
       },
@@ -5721,16 +5140,14 @@
     },
     "node_modules/p-try": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/package-json": {
       "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
-      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
+      "license": "MIT",
       "dependencies": {
         "got": "^9.6.0",
         "registry-auth-token": "^4.0.0",
@@ -5743,31 +5160,47 @@
     },
     "node_modules/package-json/node_modules/semver": {
       "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/pako": {
       "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+      "license": "(MIT AND Zlib)"
     },
     "node_modules/parallel-transform": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
-      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
+      "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",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
       },
@@ -5777,8 +5210,7 @@
     },
     "node_modules/parse-asn1": {
       "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
-      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
+      "license": "ISC",
       "dependencies": {
         "asn1.js": "^5.2.0",
         "browserify-aes": "^1.0.0",
@@ -5788,90 +5220,83 @@
       }
     },
     "node_modules/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "version": "5.1.0",
+      "license": "MIT",
       "dependencies": {
+        "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/parseurl": {
       "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/pascalcase": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/path-browserify": {
       "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
-      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ=="
+      "license": "MIT"
     },
     "node_modules/path-dirname": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
+      "license": "MIT",
       "optional": true
     },
     "node_modules/path-exists": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/path-is-absolute": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/path-key": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "version": "1.0.6",
+      "license": "MIT"
     },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+      "license": "MIT"
     },
     "node_modules/path-type": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/pbkdf2": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
-      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "version": "3.1.1",
+      "license": "MIT",
       "dependencies": {
         "create-hash": "^1.1.2",
         "create-hmac": "^1.1.4",
@@ -5884,9 +5309,8 @@
       }
     },
     "node_modules/picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "version": "2.2.2",
+      "license": "MIT",
       "engines": {
         "node": ">=8.6"
       },
@@ -5896,16 +5320,14 @@
     },
     "node_modules/pify": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/pirates": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
-      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
+      "license": "MIT",
       "dependencies": {
         "node-modules-regexp": "^1.0.0"
       },
@@ -5915,8 +5337,7 @@
     },
     "node_modules/pkg-dir": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
+      "license": "MIT",
       "dependencies": {
         "find-up": "^3.0.0"
       },
@@ -5926,25 +5347,22 @@
     },
     "node_modules/posix-character-classes": {
       "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/prepend-http": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/prettier": {
       "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin-prettier.js"
       },
@@ -5954,28 +5372,24 @@
     },
     "node_modules/process": {
       "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
       }
     },
     "node_modules/process-nextick-args": {
       "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=="
+      "license": "MIT"
     },
     "node_modules/promise-inflight": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+      "license": "ISC"
     },
     "node_modules/proxy-addr": {
-      "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==",
+      "version": "2.0.6",
+      "license": "MIT",
       "dependencies": {
-        "forwarded": "0.2.0",
+        "forwarded": "~0.1.2",
         "ipaddr.js": "1.9.1"
       },
       "engines": {
@@ -5984,18 +5398,15 @@
     },
     "node_modules/prr": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+      "license": "MIT"
     },
     "node_modules/pstree.remy": {
       "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
-      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w=="
+      "license": "MIT"
     },
     "node_modules/public-encrypt": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
+      "license": "MIT",
       "dependencies": {
         "bn.js": "^4.1.0",
         "browserify-rsa": "^4.0.0",
@@ -6005,10 +5416,13 @@
         "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",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "license": "MIT",
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -6016,8 +5430,7 @@
     },
     "node_modules/pumpify": {
       "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
-      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "license": "MIT",
       "dependencies": {
         "duplexify": "^3.6.0",
         "inherits": "^2.0.3",
@@ -6026,22 +5439,22 @@
     },
     "node_modules/pumpify/node_modules/pump": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "license": "MIT",
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
       }
     },
     "node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+      "version": "2.1.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
     },
     "node_modules/pupa": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
-      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
+      "license": "MIT",
       "dependencies": {
         "escape-goat": "^2.0.0"
       },
@@ -6051,40 +5464,33 @@
     },
     "node_modules/qs": {
       "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.6"
       }
     },
     "node_modules/querystring": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
       "engines": {
         "node": ">=0.4.x"
       }
     },
     "node_modules/querystring-es3": {
       "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=",
       "engines": {
         "node": ">=0.4.x"
       }
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
+      "license": "MIT",
       "dependencies": {
         "safe-buffer": "^5.1.0"
       }
     },
     "node_modules/randomfill": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
+      "license": "MIT",
       "dependencies": {
         "randombytes": "^2.0.5",
         "safe-buffer": "^5.1.0"
@@ -6092,16 +5498,14 @@
     },
     "node_modules/range-parser": {
       "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/raw-body": {
       "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "license": "MIT",
       "dependencies": {
         "bytes": "3.1.0",
         "http-errors": "1.7.2",
@@ -6112,10 +5516,16 @@
         "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",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
       "dependencies": {
         "deep-extend": "^0.6.0",
         "ini": "~1.3.0",
@@ -6126,15 +5536,9 @@
         "rc": "cli.js"
       }
     },
-    "node_modules/rc/node_modules/ini": {
-      "version": "1.3.8",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
-    },
     "node_modules/react": {
       "version": "18.0.0-alpha-7ec4c5597",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0-alpha-7ec4c5597.tgz",
-      "integrity": "sha512-W0cK4JlO5HSyXfp7rPRprFCKJeN4oJ51MImnTbp3lS/1g17d837BiMKqqyr9veBst2C4yrq5oXx6EKv9UsAqbw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -6145,8 +5549,7 @@
     },
     "node_modules/react-dom": {
       "version": "18.0.0-alpha-7ec4c5597",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0-alpha-7ec4c5597.tgz",
-      "integrity": "sha512-ZF0yJcbpIBMw/2Mb28rn9KquQtxL5uzlfDENsWIDqDabRcnYJGY1jkckC6EG35KufRV4UC4/Rp2r1AKL8cDLJg==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -6158,8 +5561,7 @@
     },
     "node_modules/react-error-boundary": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz",
-      "integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5"
       },
@@ -6171,10 +5573,16 @@
         "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",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
-      "integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=",
+      "license": "MIT",
       "dependencies": {
         "normalize-package-data": "^2.3.2",
         "parse-json": "^4.0.0",
@@ -6184,45 +5592,39 @@
         "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",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-      "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "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"
-      }
-    },
-    "node_modules/readable-stream/node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-    },
-    "node_modules/readable-stream/node_modules/string_decoder": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "version": "3.6.0",
+      "license": "MIT",
       "dependencies": {
-        "safe-buffer": "~5.1.0"
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "version": "3.5.0",
+      "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -6232,8 +5634,7 @@
     },
     "node_modules/rechoir": {
       "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
-      "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
+      "license": "MIT",
       "dependencies": {
         "resolve": "^1.9.0"
       },
@@ -6241,27 +5642,20 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/rechoir/node_modules/resolve": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-      "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-      "dependencies": {
-        "is-core-module": "^2.2.0",
-        "path-parse": "^1.0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
+    "node_modules/reduce-flatten": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
       }
     },
     "node_modules/regenerate": {
       "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+      "license": "MIT"
     },
     "node_modules/regenerate-unicode-properties": {
       "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
-      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+      "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.0"
       },
@@ -6271,21 +5665,18 @@
     },
     "node_modules/regenerator-runtime": {
       "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "license": "MIT"
     },
     "node_modules/regenerator-transform": {
       "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
-      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.8.4"
       }
     },
     "node_modules/regex-not": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
+      "license": "MIT",
       "dependencies": {
         "extend-shallow": "^3.0.2",
         "safe-regex": "^1.1.0"
@@ -6294,33 +5685,9 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/regex-not/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/regex-not/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/regexpu-core": {
       "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
-      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
+      "license": "MIT",
       "dependencies": {
         "regenerate": "^1.4.0",
         "regenerate-unicode-properties": "^8.2.0",
@@ -6335,8 +5702,7 @@
     },
     "node_modules/registry-auth-token": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
-      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
+      "license": "MIT",
       "dependencies": {
         "rc": "^1.2.8"
       },
@@ -6346,8 +5712,7 @@
     },
     "node_modules/registry-url": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
-      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
+      "license": "MIT",
       "dependencies": {
         "rc": "^1.2.8"
       },
@@ -6357,13 +5722,11 @@
     },
     "node_modules/regjsgen": {
       "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
+      "license": "MIT"
     },
     "node_modules/regjsparser": {
-      "version": "0.6.9",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
-      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
+      "version": "0.6.4",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "jsesc": "~0.5.0"
       },
@@ -6373,59 +5736,50 @@
     },
     "node_modules/regjsparser/node_modules/jsesc": {
       "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-      "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
       "bin": {
         "jsesc": "bin/jsesc"
       }
     },
     "node_modules/remove-trailing-separator": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
+      "license": "ISC",
       "optional": true
     },
     "node_modules/repeat-element": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
-      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==",
+      "version": "1.1.3",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/repeat-string": {
       "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10"
       }
     },
     "node_modules/require-directory": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/require-main-filename": {
       "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=="
+      "license": "ISC"
     },
     "node_modules/resolve": {
       "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
-      "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
+      "license": "MIT",
       "dependencies": {
         "path-parse": "^1.0.6"
       }
     },
     "node_modules/resolve-cwd": {
       "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==",
+      "license": "MIT",
       "dependencies": {
         "resolve-from": "^5.0.0"
       },
@@ -6433,40 +5787,41 @@
         "node": ">=8"
       }
     },
-    "node_modules/resolve-from": {
+    "node_modules/resolve-cwd/node_modules/resolve-from": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==",
+      "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",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=",
-      "deprecated": "https://github.com/lydell/resolve-url#deprecated"
+      "license": "MIT"
     },
     "node_modules/responselike": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
-      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
+      "license": "MIT",
       "dependencies": {
         "lowercase-keys": "^1.0.0"
       }
     },
     "node_modules/ret": {
       "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.12"
       }
     },
     "node_modules/rimraf": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "license": "ISC",
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -6479,8 +5834,7 @@
     },
     "node_modules/ripemd160": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
+      "license": "MIT",
       "dependencies": {
         "hash-base": "^3.0.0",
         "inherits": "^2.0.1"
@@ -6488,16 +5842,14 @@
     },
     "node_modules/run-queue": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "license": "ISC",
       "dependencies": {
         "aproba": "^1.1.1"
       }
     },
     "node_modules/rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "version": "6.6.3",
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^1.9.0"
       },
@@ -6506,71 +5858,54 @@
       }
     },
     "node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
+      "version": "5.1.2",
+      "license": "MIT"
     },
     "node_modules/safe-regex": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "license": "MIT",
       "dependencies": {
         "ret": "~0.1.10"
       }
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "license": "MIT"
     },
     "node_modules/scheduler": {
       "version": "0.21.0-alpha-7ec4c5597",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0-alpha-7ec4c5597.tgz",
-      "integrity": "sha512-UGZQDpLhPL1o2U4Kujt3WkDUWC3iNIm4OcErqv1f/fq8RQ/VxgmhlBryiZMaNF06qm3jXARebUWnlK3Tn2Sn5w==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
       }
     },
     "node_modules/schema-utils": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-      "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+      "version": "2.7.1",
+      "license": "MIT",
       "dependencies": {
-        "ajv": "^6.1.0",
-        "ajv-errors": "^1.0.0",
-        "ajv-keywords": "^3.1.0"
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
       },
       "engines": {
-        "node": ">= 4"
+        "node": ">= 8.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/semver": {
       "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver"
       }
     },
     "node_modules/semver-diff": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
-      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
+      "license": "MIT",
       "dependencies": {
         "semver": "^6.3.0"
       },
@@ -6580,16 +5915,14 @@
     },
     "node_modules/semver-diff/node_modules/semver": {
       "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-      "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
       }
     },
     "node_modules/send": {
       "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "license": "MIT",
       "dependencies": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -6609,38 +5942,31 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/send/node_modules/http-errors": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-      "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+    "node_modules/send/node_modules/debug": {
+      "version": "2.6.9",
+      "license": "MIT",
       "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.4",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.6"
+        "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",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+      "license": "MIT"
     },
     "node_modules/serialize-javascript": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
+      "license": "BSD-3-Clause",
       "dependencies": {
         "randombytes": "^2.1.0"
       }
     },
     "node_modules/serve-static": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "license": "MIT",
       "dependencies": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
@@ -6653,13 +5979,11 @@
     },
     "node_modules/set-blocking": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+      "license": "ISC"
     },
     "node_modules/set-value": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
+      "license": "MIT",
       "dependencies": {
         "extend-shallow": "^2.0.1",
         "is-extendable": "^0.1.1",
@@ -6670,20 +5994,27 @@
         "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",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+      "license": "MIT"
     },
     "node_modules/setprototypeof": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+      "license": "ISC"
     },
     "node_modules/sha.js": {
       "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
+      "license": "(MIT AND BSD-3-Clause)",
       "dependencies": {
         "inherits": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -6705,8 +6036,7 @@
     },
     "node_modules/shebang-command": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -6716,21 +6046,18 @@
     },
     "node_modules/shebang-regex": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/signal-exit": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+      "license": "ISC"
     },
     "node_modules/snapdragon": {
       "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
+      "license": "MIT",
       "dependencies": {
         "base": "^0.11.1",
         "debug": "^2.2.0",
@@ -6747,8 +6074,7 @@
     },
     "node_modules/snapdragon-node": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
+      "license": "MIT",
       "dependencies": {
         "define-property": "^1.0.0",
         "isobject": "^3.0.0",
@@ -6760,8 +6086,7 @@
     },
     "node_modules/snapdragon-node/node_modules/define-property": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "license": "MIT",
       "dependencies": {
         "is-descriptor": "^1.0.0"
       },
@@ -6769,10 +6094,41 @@
         "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",
-      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
+      "license": "MIT",
       "dependencies": {
         "kind-of": "^3.2.0"
       },
@@ -6782,8 +6138,7 @@
     },
     "node_modules/snapdragon-util/node_modules/kind-of": {
       "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "license": "MIT",
       "dependencies": {
         "is-buffer": "^1.1.5"
       },
@@ -6791,23 +6146,51 @@
         "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",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+      "license": "MIT"
     },
     "node_modules/source-map": {
       "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-resolve": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
-      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
+      "license": "MIT",
       "dependencies": {
         "atob": "^2.1.2",
         "decode-uri-component": "^0.2.0",
@@ -6818,8 +6201,7 @@
     },
     "node_modules/source-map-support": {
       "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
@@ -6827,26 +6209,22 @@
     },
     "node_modules/source-map-support/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-url": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
-      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
+      "version": "0.4.0",
+      "license": "MIT"
     },
     "node_modules/spawn-command": {
       "version": "0.0.2-1",
-      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-      "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A="
+      "license": "MIT"
     },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "license": "Apache-2.0",
       "dependencies": {
         "spdx-expression-parse": "^3.0.0",
         "spdx-license-ids": "^3.0.0"
@@ -6854,27 +6232,23 @@
     },
     "node_modules/spdx-exceptions": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+      "license": "CC-BY-3.0"
     },
     "node_modules/spdx-expression-parse": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "license": "MIT",
       "dependencies": {
         "spdx-exceptions": "^2.1.0",
         "spdx-license-ids": "^3.0.0"
       }
     },
     "node_modules/spdx-license-ids": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz",
-      "integrity": "sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ=="
+      "version": "3.0.7",
+      "license": "CC0-1.0"
     },
     "node_modules/split-string": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
+      "license": "MIT",
       "dependencies": {
         "extend-shallow": "^3.0.0"
       },
@@ -6882,41 +6256,16 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/split-string/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/split-string/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-      "dependencies": {
-        "is-plain-object": "^2.0.4"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/ssri": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-      "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
+      "license": "ISC",
       "dependencies": {
         "figgy-pudding": "^3.5.1"
       }
     },
     "node_modules/static-extend": {
       "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
+      "license": "MIT",
       "dependencies": {
         "define-property": "^0.2.5",
         "object-copy": "^0.1.0"
@@ -6925,27 +6274,54 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
+    "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",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
-      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
+      "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",
-      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
-      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "license": "MIT",
       "dependencies": {
         "end-of-stream": "^1.1.0",
         "stream-shift": "^1.0.0"
@@ -6953,8 +6329,7 @@
     },
     "node_modules/stream-http": {
       "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
-      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
+      "license": "MIT",
       "dependencies": {
         "builtin-status-codes": "^3.0.0",
         "inherits": "^2.0.1",
@@ -6963,23 +6338,58 @@
         "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",
-      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
-      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+      "license": "MIT"
     },
     "node_modules/string_decoder": {
       "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==",
+      "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",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^7.0.1",
         "is-fullwidth-code-point": "^2.0.0",
@@ -6991,8 +6401,7 @@
     },
     "node_modules/strip-ansi": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^4.1.0"
       },
@@ -7002,24 +6411,21 @@
     },
     "node_modules/strip-final-newline": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/strip-json-comments": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/supports-color": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "license": "MIT",
       "dependencies": {
         "has-flag": "^3.0.0"
       },
@@ -7027,18 +6433,29 @@
         "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",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/term-size": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
-      "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       },
@@ -7048,8 +6465,7 @@
     },
     "node_modules/terser": {
       "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "commander": "^2.20.0",
         "source-map": "~0.6.1",
@@ -7064,8 +6480,7 @@
     },
     "node_modules/terser-webpack-plugin": {
       "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
+      "license": "MIT",
       "dependencies": {
         "cacache": "^12.0.2",
         "find-cache-dir": "^2.1.0",
@@ -7084,40 +6499,67 @@
         "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",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/terser/node_modules/commander": {
       "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=="
+      "license": "MIT"
     },
     "node_modules/terser/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/through2": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "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",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
-      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
+      "license": "MIT",
       "dependencies": {
         "setimmediate": "^1.0.4"
       },
@@ -7127,21 +6569,18 @@
     },
     "node_modules/to-arraybuffer": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+      "license": "MIT"
     },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/to-object-path": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
+      "license": "MIT",
       "dependencies": {
         "kind-of": "^3.0.2"
       },
@@ -7151,8 +6590,7 @@
     },
     "node_modules/to-object-path/node_modules/kind-of": {
       "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "license": "MIT",
       "dependencies": {
         "is-buffer": "^1.1.5"
       },
@@ -7162,16 +6600,14 @@
     },
     "node_modules/to-readable-stream": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
-      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/to-regex": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
+      "license": "MIT",
       "dependencies": {
         "define-property": "^2.0.2",
         "extend-shallow": "^3.0.2",
@@ -7183,64 +6619,25 @@
       }
     },
     "node_modules/to-regex-range": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
-      "dependencies": {
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/to-regex/node_modules/define-property": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-      "dependencies": {
-        "is-descriptor": "^1.0.2",
-        "isobject": "^3.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/to-regex/node_modules/extend-shallow": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-      "dependencies": {
-        "assign-symbols": "^1.0.0",
-        "is-extendable": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/to-regex/node_modules/is-extendable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-      "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+      "version": "5.0.1",
+      "license": "MIT",
       "dependencies": {
-        "is-plain-object": "^2.0.4"
+        "is-number": "^7.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8.0"
       }
     },
     "node_modules/toidentifier": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.6"
       }
     },
     "node_modules/touch": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
-      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
+      "license": "ISC",
       "dependencies": {
         "nopt": "~1.0.10"
       },
@@ -7250,34 +6647,29 @@
     },
     "node_modules/tree-kill": {
       "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "license": "MIT",
       "bin": {
         "tree-kill": "cli.js"
       }
     },
     "node_modules/tslib": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "license": "0BSD"
     },
     "node_modules/tty-browserify": {
       "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+      "license": "MIT"
     },
     "node_modules/type-fest": {
       "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/type-is": {
       "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
       "dependencies": {
         "media-typer": "0.3.0",
         "mime-types": "~2.1.24"
@@ -7288,37 +6680,50 @@
     },
     "node_modules/typedarray": {
       "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+      "license": "MIT"
     },
     "node_modules/typedarray-to-buffer": {
       "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
+      "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",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
-      "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==",
+      "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",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/unicode-match-property-ecmascript": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
+      "license": "MIT",
       "dependencies": {
         "unicode-canonical-property-names-ecmascript": "^1.0.4",
         "unicode-property-aliases-ecmascript": "^1.0.4"
@@ -7329,24 +6734,21 @@
     },
     "node_modules/unicode-match-property-value-ecmascript": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
-      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/unicode-property-aliases-ecmascript": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
-      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==",
+      "license": "MIT",
       "engines": {
         "node": ">=4"
       }
     },
     "node_modules/union-value": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
+      "license": "MIT",
       "dependencies": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
@@ -7359,24 +6761,21 @@
     },
     "node_modules/unique-filename": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "license": "ISC",
       "dependencies": {
         "unique-slug": "^2.0.0"
       }
     },
     "node_modules/unique-slug": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
-      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
+      "license": "ISC",
       "dependencies": {
         "imurmurhash": "^0.1.4"
       }
     },
     "node_modules/unique-string": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
-      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
+      "license": "MIT",
       "dependencies": {
         "crypto-random-string": "^2.0.0"
       },
@@ -7386,16 +6785,14 @@
     },
     "node_modules/unpipe": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/unset-value": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
+      "license": "MIT",
       "dependencies": {
         "has-value": "^0.3.1",
         "isobject": "^3.0.0"
@@ -7406,8 +6803,7 @@
     },
     "node_modules/unset-value/node_modules/has-value": {
       "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-      "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
+      "license": "MIT",
       "dependencies": {
         "get-value": "^2.0.3",
         "has-values": "^0.1.4",
@@ -7419,8 +6815,7 @@
     },
     "node_modules/unset-value/node_modules/has-value/node_modules/isobject": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+      "license": "MIT",
       "dependencies": {
         "isarray": "1.0.0"
       },
@@ -7430,16 +6825,14 @@
     },
     "node_modules/unset-value/node_modules/has-values": {
       "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-      "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E=",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/upath": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
+      "license": "MIT",
       "optional": true,
       "engines": {
         "node": ">=4",
@@ -7448,8 +6841,7 @@
     },
     "node_modules/update-notifier": {
       "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.3.tgz",
-      "integrity": "sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "boxen": "^4.2.0",
         "chalk": "^3.0.0",
@@ -7474,8 +6866,7 @@
     },
     "node_modules/update-notifier/node_modules/ansi-styles": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "license": "MIT",
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -7488,8 +6879,7 @@
     },
     "node_modules/update-notifier/node_modules/chalk": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -7500,8 +6890,7 @@
     },
     "node_modules/update-notifier/node_modules/color-convert": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -7511,21 +6900,18 @@
     },
     "node_modules/update-notifier/node_modules/color-name": {
       "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+      "license": "MIT"
     },
     "node_modules/update-notifier/node_modules/has-flag": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/update-notifier/node_modules/supports-color": {
       "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -7534,31 +6920,19 @@
       }
     },
     "node_modules/uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "version": "4.4.0",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/uri-js/node_modules/punycode": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/urix": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
-      "deprecated": "Please see https://github.com/lydell/urix#deprecated"
+      "license": "MIT"
     },
     "node_modules/url": {
       "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
+      "license": "MIT",
       "dependencies": {
         "punycode": "1.3.2",
         "querystring": "0.2.0"
@@ -7566,8 +6940,7 @@
     },
     "node_modules/url-parse-lax": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
+      "license": "MIT",
       "dependencies": {
         "prepend-http": "^2.0.0"
       },
@@ -7577,52 +6950,44 @@
     },
     "node_modules/url/node_modules/punycode": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+      "license": "MIT"
     },
     "node_modules/use": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/util": {
       "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
-      "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
+      "license": "MIT",
       "dependencies": {
         "inherits": "2.0.3"
       }
     },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+      "license": "MIT"
     },
     "node_modules/util/node_modules/inherits": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+      "license": "ISC"
     },
     "node_modules/utils-merge": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.4.0"
       }
     },
     "node_modules/v8-compile-cache": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+      "version": "2.2.0",
+      "license": "MIT"
     },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "license": "Apache-2.0",
       "dependencies": {
         "spdx-correct": "^3.0.0",
         "spdx-expression-parse": "^3.0.0"
@@ -7630,21 +6995,18 @@
     },
     "node_modules/vary": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=",
+      "license": "MIT",
       "engines": {
         "node": ">= 0.8"
       }
     },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
-      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
+      "license": "MIT"
     },
     "node_modules/watchpack": {
       "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
-      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.1.2",
         "neo-async": "^2.5.0"
@@ -7656,8 +7018,7 @@
     },
     "node_modules/watchpack-chokidar2": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
-      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "chokidar": "^2.1.8"
@@ -7665,8 +7026,7 @@
     },
     "node_modules/watchpack-chokidar2/node_modules/anymatch": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-      "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "micromatch": "^3.1.4",
@@ -7675,8 +7035,7 @@
     },
     "node_modules/watchpack-chokidar2/node_modules/anymatch/node_modules/normalize-path": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "remove-trailing-separator": "^1.0.1"
@@ -7687,18 +7046,35 @@
     },
     "node_modules/watchpack-chokidar2/node_modules/binary-extensions": {
       "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-      "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
+      "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",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-      "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
-      "deprecated": "Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "anymatch": "^2.0.0",
@@ -7717,12 +7093,35 @@
         "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",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
       "hasInstallScript": true,
+      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -7737,8 +7136,7 @@
     },
     "node_modules/watchpack-chokidar2/node_modules/glob-parent": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-      "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+      "license": "ISC",
       "optional": true,
       "dependencies": {
         "is-glob": "^3.1.0",
@@ -7747,8 +7145,7 @@
     },
     "node_modules/watchpack-chokidar2/node_modules/glob-parent/node_modules/is-glob": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-      "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "is-extglob": "^2.1.0"
@@ -7759,8 +7156,7 @@
     },
     "node_modules/watchpack-chokidar2/node_modules/is-binary-path": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "binary-extensions": "^1.0.0"
@@ -7769,10 +7165,45 @@
         "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",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-      "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
+      "license": "MIT",
       "optional": true,
       "dependencies": {
         "graceful-fs": "^4.1.11",
@@ -7783,10 +7214,29 @@
         "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",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",
-      "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==",
+      "license": "MIT",
       "dependencies": {
         "@webassemblyjs/ast": "1.9.0",
         "@webassemblyjs/helper-module-context": "1.9.0",
@@ -7832,23 +7282,22 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.7.2.tgz",
-      "integrity": "sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==",
-      "dependencies": {
-        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.4",
-        "@webpack-cli/info": "^1.3.0",
-        "@webpack-cli/serve": "^1.5.1",
+      "version": "4.2.0",
+      "license": "MIT",
+      "dependencies": {
+        "@webpack-cli/info": "^1.1.0",
+        "@webpack-cli/serve": "^1.1.0",
         "colorette": "^1.2.1",
-        "commander": "^7.0.0",
-        "execa": "^5.0.0",
-        "fastest-levenshtein": "^1.0.12",
+        "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": "^5.7.3"
+        "webpack-merge": "^4.2.2"
       },
       "bin": {
         "webpack-cli": "bin/cli.js"
@@ -7860,7 +7309,13 @@
         "webpack": "4.x.x || 5.x.x"
       },
       "peerDependenciesMeta": {
-        "@webpack-cli/generators": {
+        "@webpack-cli/generate-loader": {
+          "optional": true
+        },
+        "@webpack-cli/generate-plugin": {
+          "optional": true
+        },
+        "@webpack-cli/init": {
           "optional": true
         },
         "@webpack-cli/migrate": {
@@ -7874,22 +7329,23 @@
         }
       }
     },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "6.2.1",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/webpack-merge": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "version": "4.2.2",
+      "license": "MIT",
       "dependencies": {
-        "clone-deep": "^4.0.1",
-        "wildcard": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=10.0.0"
+        "lodash": "^4.17.15"
       }
     },
     "node_modules/webpack-sources": {
       "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
+      "license": "MIT",
       "dependencies": {
         "source-list-map": "^2.0.0",
         "source-map": "~0.6.1"
@@ -7897,16 +7353,26 @@
     },
     "node_modules/webpack-sources/node_modules/source-map": {
       "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "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",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -7919,13 +7385,11 @@
     },
     "node_modules/which-module": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+      "license": "ISC"
     },
     "node_modules/widest-line": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
-      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
+      "license": "MIT",
       "dependencies": {
         "string-width": "^4.0.0"
       },
@@ -7935,29 +7399,25 @@
     },
     "node_modules/widest-line/node_modules/ansi-regex": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/widest-line/node_modules/emoji-regex": {
       "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "license": "MIT"
     },
     "node_modules/widest-line/node_modules/is-fullwidth-code-point": {
       "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==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/widest-line/node_modules/string-width": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "version": "4.2.0",
+      "license": "MIT",
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -7969,8 +7429,7 @@
     },
     "node_modules/widest-line/node_modules/strip-ansi": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.0"
       },
@@ -7978,23 +7437,27 @@
         "node": ">=8"
       }
     },
-    "node_modules/wildcard": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+    "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",
-      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
-      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
+      "license": "MIT",
       "dependencies": {
         "errno": "~0.1.7"
       }
     },
     "node_modules/wrap-ansi": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
+      "license": "MIT",
       "dependencies": {
         "ansi-styles": "^3.2.0",
         "string-width": "^3.0.0",
@@ -8006,13 +7469,11 @@
     },
     "node_modules/wrappy": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+      "license": "ISC"
     },
     "node_modules/write-file-atomic": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
+      "license": "ISC",
       "dependencies": {
         "imurmurhash": "^0.1.4",
         "is-typedarray": "^1.0.0",
@@ -8022,42 +7483,36 @@
     },
     "node_modules/xdg-basedir": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
-      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==",
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
     "node_modules/xtend": {
       "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
+      "license": "MIT",
       "engines": {
         "node": ">=0.4"
       }
     },
     "node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+      "version": "4.0.1",
+      "license": "ISC"
     },
     "node_modules/yallist": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+      "license": "ISC"
     },
     "node_modules/yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "version": "1.10.0",
+      "license": "ISC",
       "engines": {
         "node": ">= 6"
       }
     },
     "node_modules/yargs": {
       "version": "13.3.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
+      "license": "MIT",
       "dependencies": {
         "cliui": "^5.0.0",
         "find-up": "^3.0.0",
@@ -8073,8 +7528,7 @@
     },
     "node_modules/yargs-parser": {
       "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
+      "license": "ISC",
       "dependencies": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"
@@ -8083,17 +7537,17 @@
   },
   "dependencies": {
     "@babel/code-frame": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
-      "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
+      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
       "requires": {
-        "@babel/highlight": "^7.14.5"
+        "@babel/highlight": "^7.12.13"
       }
     },
     "@babel/compat-data": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.14.5.tgz",
-      "integrity": "sha512-kixrYn4JwfAVPa0f2yfzc2AWti6WRRyO3XjWW5PJAvtE11qhSayrrcrEnee05KAtNaPC+EwehE8Qt1UedEVB8w=="
+      "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",
@@ -8117,19 +7571,6 @@
         "source-map": "^0.5.0"
       },
       "dependencies": {
-        "debug": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        },
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
@@ -8138,39 +7579,50 @@
       }
     },
     "@babel/generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.5.tgz",
-      "integrity": "sha512-y3rlP+/G25OIX3mYKKIOlQRcqj7YgrvHxOLbVmyLJ9bPmi5ttvUmpydVjcFjZphOktWuA7ovbx91ECloWTfjIA==",
+      "version": "7.14.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.14.3.tgz",
+      "integrity": "sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==",
       "requires": {
-        "@babel/types": "^7.14.5",
+        "@babel/types": "^7.14.2",
         "jsesc": "^2.5.1",
         "source-map": "^0.5.0"
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz",
-      "integrity": "sha512-EivH9EgBIb+G8ij1B2jAwSH36WnGvkQSEC6CkX/6v6ZFlw5fVOHvsgGF4uiEHO2GzMvunZb6tDLQEQSdrdocrA==",
+      "version": "7.12.10",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.12.10"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.14.5.tgz",
-      "integrity": "sha512-YTA/Twn0vBXDVGJuAX6PwW7x5zQei1luDDo2Pl6q1qZ7hVNl0RZrhHCQG/ArGpR29Vl7ETiB8eJyrvpuRp300w==",
+      "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-explode-assignable-expression": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@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.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.14.5.tgz",
-      "integrity": "sha512-v+QtZqXEiOnpO6EYvlImB6zCD2Lel06RzOPzmkz/D/XgQiUu3C/Jb1LOqSt/AIA34TYi/Q+KlT8vTQrgdxkbLw==",
+      "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.5",
-        "@babel/helper-validator-option": "^7.14.5",
+        "@babel/compat-data": "^7.14.4",
+        "@babel/helper-validator-option": "^7.12.17",
         "browserslist": "^4.16.6",
         "semver": "^6.3.0"
       },
@@ -8182,1559 +7634,1168 @@
         }
       }
     },
+    "@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-explode-assignable-expression": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.14.5.tgz",
-      "integrity": "sha512-Htb24gnGJdIGT4vnRKMdoXiOIlqOLmdiUYpAQ0mYfgVT/GDm8GOYhgi4GL+hMKrkiPRohO4ts34ELFsGAPQLDQ==",
+      "version": "7.12.1",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.12.1"
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.5.tgz",
-      "integrity": "sha512-Gjna0AsXWfFvrAuX+VKcN/aNNWonizBj39yGwUzVDVTlMYJMK2Wp6xdpy72mfArFq5uK+NOuexfzZlzI1z9+AQ==",
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz",
+      "integrity": "sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==",
       "requires": {
-        "@babel/helper-get-function-arity": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/helper-get-function-arity": "^7.12.13",
+        "@babel/template": "^7.12.13",
+        "@babel/types": "^7.14.2"
       }
     },
     "@babel/helper-get-function-arity": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.14.5.tgz",
-      "integrity": "sha512-I1Db4Shst5lewOM4V+ZKJzQ0JGGaZ6VY1jYvMghRjqs6DWgxLCIyFt30GlnKkfUeFLpJt2vzbMVEXVSXlIFYUg==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
+      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.12.13"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.14.5.tgz",
-      "integrity": "sha512-R1PXiz31Uc0Vxy4OEOm07x0oSjKAdPPCh3tPivn/Eo8cvz6gveAeuyUUPB21Hoiif0uoPQSSdhIPS3352nvdyQ==",
+      "version": "7.10.4",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.10.4"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.14.5.tgz",
-      "integrity": "sha512-UxUeEYPrqH1Q/k0yRku1JE7dyfyehNwT6SVkMHvYvPDv4+uu627VXBckVj891BO8ruKBkiDoGnZf4qPDD8abDQ==",
+      "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.14.5"
+        "@babel/types": "^7.13.12"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "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.14.5"
+        "@babel/types": "^7.13.12"
       }
     },
     "@babel/helper-module-transforms": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.14.5.tgz",
-      "integrity": "sha512-iXpX4KW8LVODuAieD7MzhNjmM6dzYY5tfRqT+R9HDXWl0jPn/djKmA+G9s/2C2T9zggw5tK1QNqZ70USfedOwA==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.14.5",
-        "@babel/helper-replace-supers": "^7.14.5",
-        "@babel/helper-simple-access": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+      "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.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.14.5.tgz",
-      "integrity": "sha512-IqiLIrODUOdnPU9/F8ib1Fx2ohlgDhxnIDU7OEVi+kAbEZcyiF7BLU8W6PfvPi9LzztjS7kcbzbmL7oG8kD6VA==",
+      "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.14.5"
+        "@babel/types": "^7.12.13"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ=="
+      "version": "7.10.4"
     },
     "@babel/helper-remap-async-to-generator": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.14.5.tgz",
-      "integrity": "sha512-rLQKdQU+HYlxBwQIj8dk4/0ENOUEhA/Z0l4hN8BexpvmSMN9oA9EagjnhnDpNsRdWCfjwa4mn/HyBXO9yhQP6A==",
+      "version": "7.12.1",
       "requires": {
-        "@babel/helper-annotate-as-pure": "^7.14.5",
-        "@babel/helper-wrap-function": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@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.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.14.5.tgz",
-      "integrity": "sha512-3i1Qe9/8x/hCHINujn+iuHy+mMRLoc77b2nI9TB0zjH1hvn9qGlXjWlggdwUcju36PkPCy/lpM7LLUdcTyH4Ow==",
+      "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.14.5",
-        "@babel/helper-optimise-call-expression": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@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.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.14.5.tgz",
-      "integrity": "sha512-nfBN9xvmCt6nrMZjfhkl7i0oTV3yxR4/FztsbOASyTvVcoYd0TRHh7eMLdlEcCqobydC0LAF3LtC92Iwxo0wyw==",
+      "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.14.5"
+        "@babel/types": "^7.13.12"
       }
     },
     "@babel/helper-skip-transparent-expression-wrappers": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.14.5.tgz",
-      "integrity": "sha512-dmqZB7mrb94PZSAOYtr+ZN5qt5owZIAgqtoTuqiFbHFtxgEcmQlRJVI+bO++fciBunXtB6MK7HrzrfcAzIz2NQ==",
+      "version": "7.12.1",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.12.1"
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.14.5.tgz",
-      "integrity": "sha512-hprxVPu6e5Kdp2puZUmvOGjaLv9TCe58E/Fl6hRq4YiVQxIcNvuq6uTM2r1mT/oPskuS9CgR+I94sqAYv0NGKA==",
+      "version": "7.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
+      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.12.13"
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz",
-      "integrity": "sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg=="
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz",
+      "integrity": "sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A=="
     },
     "@babel/helper-validator-option": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
-      "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow=="
+      "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.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.14.5.tgz",
-      "integrity": "sha512-YEdjTCq+LNuNS1WfxsDCNpgXkJaIyqco6DAelTUjT4f2KIWC1nBcaCaSdHTBqQVLnTBexBcVcFhLSU1KnYuePQ==",
+      "version": "7.12.3",
       "requires": {
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/template": "^7.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@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.6",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.14.6.tgz",
-      "integrity": "sha512-yesp1ENQBiLI+iYHSJdoZKUtRpfTlL1grDIX9NRlAVppljLw/4tTyYupIB7uIYmC3stW/imAv8EqaKaS/ibmeA==",
+      "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.14.5",
-        "@babel/traverse": "^7.14.5",
-        "@babel/types": "^7.14.5"
+        "@babel/template": "^7.12.13",
+        "@babel/traverse": "^7.14.0",
+        "@babel/types": "^7.14.0"
       }
     },
     "@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.0.tgz",
+      "integrity": "sha512-YSCOwxvTYEIMSGaBQb5kDDsCopDdiUGsqpatp3fOlI4+2HQSkTmEVWnVuySdAC5EWCqSWWTv0ib63RjR7dTBdg==",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.14.0",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       }
     },
     "@babel/parser": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.6.tgz",
-      "integrity": "sha512-oG0ej7efjEXxb4UgE+klVx+3j4MVo+A2vCzm7OUN4CLo6WhQ+vSOD2yJ8m7B+DghObxtLxt3EfgMWpq+AsWehQ=="
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.14.4.tgz",
+      "integrity": "sha512-ArliyUsWDUqEGfWcmzpGUzNfLxTdTp6WU4IuP6QFSp9gGfWS6boxFCkJSJ/L4+RG8z/FnIU3WxCk6hPL9SSWeA=="
     },
-    "@babel/register": {
-      "version": "7.13.16",
-      "resolved": "https://registry.npmjs.org/@babel/register/-/register-7.13.16.tgz",
-      "integrity": "sha512-dh2t11ysujTwByQjXNgJ48QZ2zcXKQVdV8s0TbeMI0flmtGWCdTwK9tJiACHXPLmncm5+ktNn/diojA45JE4jg==",
+    "@babel/plugin-proposal-async-generator-functions": {
+      "version": "7.12.1",
       "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/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-remap-async-to-generator": "^7.12.1",
+        "@babel/plugin-syntax-async-generators": "^7.8.0"
       }
     },
-    "@babel/runtime": {
-      "version": "7.14.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-      "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+    "@babel/plugin-proposal-class-properties": {
+      "version": "7.12.1",
       "requires": {
-        "regenerator-runtime": "^0.13.4"
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "@babel/template": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.14.5.tgz",
-      "integrity": "sha512-6Z3Po85sfxRGachLULUhOmvAaOo7xCvqGQtxINai2mEGPFm6pQ4z5QInFnUrRpfoSV60BnjyF5F3c+15fxFV1g==",
+    "@babel/plugin-proposal-decorators": {
+      "version": "7.12.1",
       "requires": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5"
-      }
-    },
-    "@babel/traverse": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.5.tgz",
-      "integrity": "sha512-G3BiS15vevepdmFqmUc9X+64y0viZYygubAMO8SvBmKARuF6CPSZtH4Ng9vi/lrWlZFGe3FWdXNy835akH8Glg==",
-      "requires": {
-        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.14.5",
-        "@babel/helper-function-name": "^7.14.5",
-        "@babel/helper-hoist-variables": "^7.14.5",
-        "@babel/helper-split-export-declaration": "^7.14.5",
-        "@babel/parser": "^7.14.5",
-        "@babel/types": "^7.14.5",
-        "debug": "^4.1.0",
-        "globals": "^11.1.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        }
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-decorators": "^7.12.1"
       }
     },
-    "@babel/types": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-      "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+    "@babel/plugin-proposal-dynamic-import": {
+      "version": "7.12.1",
       "requires": {
-        "@babel/helper-validator-identifier": "^7.14.5",
-        "to-fast-properties": "^2.0.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-dynamic-import": "^7.8.0"
       }
     },
-    "@discoveryjs/json-ext": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz",
-      "integrity": "sha512-Fxt+AfXgjMoin2maPIYzFZnQjAXjAL0PHscM5pRTtatFqB+vZxAM9tLp2Optnuw3QOQC40jTNeGYFOMvyf7v9g=="
-    },
-    "@sindresorhus/is": {
-      "version": "0.14.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
-      "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ=="
-    },
-    "@szmarczak/http-timer": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
-      "integrity": "sha512-XIB2XbzHTN6ieIjfIMV9hlVcfPU26s2vafYWQcZHWXHOxiaRZYEDKEwdl129Zyg50+foYV2jCgtrqSA6qNuNSA==",
+    "@babel/plugin-proposal-export-namespace-from": {
+      "version": "7.12.1",
       "requires": {
-        "defer-to-connect": "^1.0.1"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
       }
     },
-    "@types/json-schema": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
-      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA=="
-    },
-    "@types/parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
-    },
-    "@webassemblyjs/ast": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
-      "integrity": "sha512-C6wW5L+b7ogSDVqymbkkvuW9kruN//YisMED04xzeBBqjHa2FYnmvOlS6Xj68xWQRgWvI9cIglsjFowH/RJyEA==",
+    "@babel/plugin-proposal-json-strings": {
+      "version": "7.12.1",
       "requires": {
-        "@webassemblyjs/helper-module-context": "1.9.0",
-        "@webassemblyjs/helper-wasm-bytecode": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-json-strings": "^7.8.0"
       }
     },
-    "@webassemblyjs/floating-point-hex-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.9.0.tgz",
-      "integrity": "sha512-TG5qcFsS8QB4g4MhrxK5TqfdNe7Ey/7YL/xN+36rRjl/BlGE/NcBvJcqsRgCP6Z92mRE+7N50pRIi8SmKUbcQA=="
-    },
-    "@webassemblyjs/helper-api-error": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.9.0.tgz",
-      "integrity": "sha512-NcMLjoFMXpsASZFxJ5h2HZRcEhDkvnNFOAKneP5RbKRzaWJN36NC4jqQHKwStIhGXu5mUWlUUk7ygdtrO8lbmw=="
-    },
-    "@webassemblyjs/helper-buffer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.9.0.tgz",
-      "integrity": "sha512-qZol43oqhq6yBPx7YM3m9Bv7WMV9Eevj6kMi6InKOuZxhw+q9hOkvq5e/PpKSiLfyetpaBnogSbNCfBwyB00CA=="
-    },
-    "@webassemblyjs/helper-code-frame": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-code-frame/-/helper-code-frame-1.9.0.tgz",
-      "integrity": "sha512-ERCYdJBkD9Vu4vtjUYe8LZruWuNIToYq/ME22igL+2vj2dQ2OOujIZr3MEFvfEaqKoVqpsFKAGsRdBSBjrIvZA==",
+    "@babel/plugin-proposal-logical-assignment-operators": {
+      "version": "7.12.1",
       "requires": {
-        "@webassemblyjs/wast-printer": "1.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       }
     },
-    "@webassemblyjs/helper-fsm": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-fsm/-/helper-fsm-1.9.0.tgz",
-      "integrity": "sha512-OPRowhGbshCb5PxJ8LocpdX9Kl0uB4XsAjl6jH/dWKlk/mzsANvhwbiULsaiqT5GZGT9qinTICdj6PLuM5gslw=="
-    },
-    "@webassemblyjs/helper-module-context": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-module-context/-/helper-module-context-1.9.0.tgz",
-      "integrity": "sha512-MJCW8iGC08tMk2enck1aPW+BE5Cw8/7ph/VGZxwyvGbJwjktKkDK7vy7gAmMDx88D7mhDTCNKAW5tED+gZ0W8g==",
+    "@babel/plugin-proposal-nullish-coalescing-operator": {
+      "version": "7.12.1",
       "requires": {
-        "@webassemblyjs/ast": "1.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
       }
     },
-    "@webassemblyjs/helper-wasm-bytecode": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.9.0.tgz",
-      "integrity": "sha512-R7FStIzyNcd7xKxCZH5lE0Bqy+hGTwS3LJjuv1ZVxd9O7eHCedSdrId/hMOd20I+v8wDXEn+bjfKDLzTepoaUw=="
-    },
-    "@webassemblyjs/helper-wasm-section": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.9.0.tgz",
-      "integrity": "sha512-XnMB8l3ek4tvrKUUku+IVaXNHz2YsJyOOmz+MMkZvh8h1uSJpSen6vYnw3IoQ7WwEuAhL8Efjms1ZWjqh2agvw==",
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.12.1",
       "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"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
       }
     },
-    "@webassemblyjs/ieee754": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.9.0.tgz",
-      "integrity": "sha512-dcX8JuYU/gvymzIHc9DgxTzUUTLexWwt8uCTWP3otys596io0L5aW02Gb1RjYpx2+0Jus1h4ZFqjla7umFniTg==",
+    "@babel/plugin-proposal-object-rest-spread": {
+      "version": "7.12.1",
       "requires": {
-        "@xtuc/ieee754": "^1.2.0"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+        "@babel/plugin-transform-parameters": "^7.12.1"
       }
     },
-    "@webassemblyjs/leb128": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.9.0.tgz",
-      "integrity": "sha512-ENVzM5VwV1ojs9jam6vPys97B/S65YQtv/aanqnU7D8aSoHFX8GyhGg0CMfyKNIHBuAVjy3tlzd5QMMINa7wpw==",
+    "@babel/plugin-proposal-optional-catch-binding": {
+      "version": "7.12.1",
       "requires": {
-        "@xtuc/long": "4.2.2"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
       }
     },
-    "@webassemblyjs/utf8": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.9.0.tgz",
-      "integrity": "sha512-GZbQlWtopBTP0u7cHrEx+73yZKrQoBMpwkGEIqlacljhXCkVM1kMQge/Mf+csMJAjEdSwhOyLAS0AoR3AG5P8w=="
-    },
-    "@webassemblyjs/wasm-edit": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.9.0.tgz",
-      "integrity": "sha512-FgHzBm80uwz5M8WKnMTn6j/sVbqilPdQXTWraSjBwFXSYGirpkSWE2R9Qvz9tNiTKQvoKILpCuTjBKzOIm0nxw==",
+    "@babel/plugin-proposal-optional-chaining": {
+      "version": "7.12.1",
       "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"
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.12.1",
+        "@babel/plugin-syntax-optional-chaining": "^7.8.0"
       }
     },
-    "@webassemblyjs/wasm-gen": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.9.0.tgz",
-      "integrity": "sha512-cPE3o44YzOOHvlsb4+E9qSqjc9Qf9Na1OO/BHFy4OI91XDE14MjFN4lTMezzaIWdPqHnsTodGGNP+iRSYfGkjA==",
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.12.1",
       "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"
+        "@babel/helper-create-class-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "@webassemblyjs/wasm-opt": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.9.0.tgz",
-      "integrity": "sha512-Qkjgm6Anhm+OMbIL0iokO7meajkzQD71ioelnfPEj6r4eOFuqm4YC3VBPqXjFyyNwowzbMD+hizmprP/Fwkl2A==",
+    "@babel/plugin-proposal-unicode-property-regex": {
+      "version": "7.12.1",
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/helper-buffer": "1.9.0",
-        "@webassemblyjs/wasm-gen": "1.9.0",
-        "@webassemblyjs/wasm-parser": "1.9.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "@webassemblyjs/wasm-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.9.0.tgz",
-      "integrity": "sha512-9+wkMowR2AmdSWQzsPEjFU7njh8HTO5MqO8vjwEHuM+AMHioNqSBONRdr0NQQ3dVQrzp0s8lTcYqzUdb7YgELA==",
+    "@babel/plugin-syntax-async-generators": {
+      "version": "7.8.4",
       "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"
+        "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
-    "@webassemblyjs/wast-parser": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-parser/-/wast-parser-1.9.0.tgz",
-      "integrity": "sha512-qsqSAP3QQ3LyZjNC/0jBJ/ToSxfYJ8kYyuiGvtn/8MK89VrNEfwj7BPQzJVHi0jGTRK2dGdJ5PRqhtjzoww+bw==",
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.12.1",
       "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"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "@webassemblyjs/wast-printer": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.9.0.tgz",
-      "integrity": "sha512-2J0nE95rHXHyQ24cWjMKJ1tqB/ds8z/cyeOZxJhcb+rW+SQASVjuznUSmdz5GpVJTzU8JkhYut0D3siFDD6wsA==",
+    "@babel/plugin-syntax-decorators": {
+      "version": "7.12.1",
       "requires": {
-        "@webassemblyjs/ast": "1.9.0",
-        "@webassemblyjs/wast-parser": "1.9.0",
-        "@xtuc/long": "4.2.2"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "@webpack-cli/configtest": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.4.tgz",
-      "integrity": "sha512-cs3XLy+UcxiP6bj0A6u7MLLuwdXJ1c3Dtc0RkKg+wiI1g/Ti1om8+/2hc2A2B60NbBNAbMgyBMHvyymWm/j4wQ==",
-      "requires": {}
-    },
-    "@webpack-cli/info": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.3.0.tgz",
-      "integrity": "sha512-ASiVB3t9LOKHs5DyVUcxpraBXDOKubYu/ihHhU+t1UPpxsivg6Od2E2qU4gJCekfEddzRBzHhzA/Acyw/mlK/w==",
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.8.3",
       "requires": {
-        "envinfo": "^7.7.3"
+        "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
-    "@webpack-cli/serve": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.5.1.tgz",
-      "integrity": "sha512-4vSVUiOPJLmr45S8rMGy7WDvpWxfFxfP/Qx/cxZFCfvoypTYpPPL1X8VIZMe0WTA+Jr7blUxwUSEZNkjoMTgSw==",
-      "requires": {}
+    "@babel/plugin-syntax-export-namespace-from": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.3"
+      }
     },
-    "@xtuc/ieee754": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
-      "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA=="
+    "@babel/plugin-syntax-flow": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "@xtuc/long": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
-      "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
+    "@babel/plugin-syntax-json-strings": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
     },
-    "abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+    "@babel/plugin-syntax-logical-assignment-operators": {
+      "version": "7.10.4",
       "requires": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "acorn": {
-      "version": "6.4.2",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz",
-      "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ=="
+    "@babel/plugin-syntax-nullish-coalescing-operator": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
     },
-    "ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
       "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"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "ajv-errors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz",
-      "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==",
-      "requires": {}
+    "@babel/plugin-syntax-object-rest-spread": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
     },
-    "ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "requires": {}
+    "@babel/plugin-syntax-optional-catch-binding": {
+      "version": "7.8.3",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.8.0"
+      }
     },
-    "ansi-align": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-3.0.0.tgz",
-      "integrity": "sha512-ZpClVKqXN3RGBmKibdfWzqCY4lnjEuoNzU5T0oEFpfd/z5qJHVarukridD4juLO2FXMiwUQxr9WqQtaYa8XRYw==",
+    "@babel/plugin-syntax-optional-chaining": {
+      "version": "7.8.3",
       "requires": {
-        "string-width": "^3.0.0"
+        "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
-    "ansi-regex": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
-      "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg=="
+    "@babel/plugin-syntax-top-level-await": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "ansi-styles": {
-      "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==",
+    "@babel/plugin-syntax-typescript": {
+      "version": "7.12.1",
       "requires": {
-        "color-convert": "^1.9.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "anymatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
-      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+    "@babel/plugin-transform-arrow-functions": {
+      "version": "7.12.1",
       "requires": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw=="
+    "@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"
+      }
     },
-    "arr-diff": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
-      "integrity": "sha1-1kYQdP6/7HHn4VI1dhoyml3HxSA="
+    "@babel/plugin-transform-block-scoped-functions": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "arr-flatten": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.1.0.tgz",
-      "integrity": "sha512-L3hKV5R/p5o81R7O02IGnwpDmkp6E982XhtbuwSe3O4qOtMMMtodicASA1Cny2U+aCXcNpml+m4dPsvsJ3jatg=="
+    "@babel/plugin-transform-block-scoping": {
+      "version": "7.12.11",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "arr-union": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz",
-      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ="
+    "@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"
+      }
     },
-    "array-flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
-      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    "@babel/plugin-transform-computed-properties": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "array-unique": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz",
-      "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
+    "@babel/plugin-transform-destructuring": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "asn1.js": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-5.4.1.tgz",
-      "integrity": "sha512-+I//4cYPccV8LdmBLiX8CYvf9Sp3vQsrqu2QNXRcrbiWvcx/UdlFiqUJJzxRQxgsZmvhXhn4cSKeSmoFjVdupA==",
+    "@babel/plugin-transform-dotall-regex": {
+      "version": "7.12.1",
       "requires": {
-        "bn.js": "^4.0.0",
-        "inherits": "^2.0.1",
-        "minimalistic-assert": "^1.0.0",
-        "safer-buffer": "^2.1.0"
+        "@babel/helper-create-regexp-features-plugin": "^7.12.1",
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "assert": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/assert/-/assert-1.5.0.tgz",
-      "integrity": "sha512-EDsgawzwoun2CZkCgtxJbv392v4nbk9XDD06zI+kQYoBM/3RBWLlEyJARDOmhAAosBjWACEkKL6S+lIZtcAubA==",
+    "@babel/plugin-transform-duplicate-keys": {
+      "version": "7.12.1",
       "requires": {
-        "object-assign": "^4.1.1",
-        "util": "0.10.3"
-      },
-      "dependencies": {
-        "inherits": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.1.tgz",
-          "integrity": "sha1-sX0I0ya0Qj5Wjv9xn5GwscvfafE="
-        },
-        "util": {
-          "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
-          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
-          "requires": {
-            "inherits": "2.0.1"
-          }
-        }
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "assign-symbols": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
-      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+    "@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"
+      }
     },
-    "async-each": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz",
-      "integrity": "sha512-z/WhQ5FPySLdvREByI2vZiTWwCnF0moMJ1hK9YQwDTHKh6I7/uSckMetoRGb5UBZPC1z0jlw+n/XCgjeH7y1AQ==",
-      "optional": true
+    "@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"
+      }
     },
-    "atob": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
+    "@babel/plugin-transform-for-of": {
+      "version": "7.12.1",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      }
     },
-    "babel-loader": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.1.0.tgz",
-      "integrity": "sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==",
+    "@babel/plugin-transform-function-name": {
+      "version": "7.12.1",
       "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"
-      },
-      "dependencies": {
-        "schema-utils": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
-          "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==",
-          "requires": {
-            "@types/json-schema": "^7.0.5",
-            "ajv": "^6.12.4",
-            "ajv-keywords": "^3.5.2"
-          }
-        }
+        "@babel/helper-function-name": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "babel-plugin-dynamic-import-node": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
-      "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+    "@babel/plugin-transform-literals": {
+      "version": "7.12.1",
       "requires": {
-        "object.assign": "^4.1.0"
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "babel-plugin-macros": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
-      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+    "@babel/plugin-transform-member-expression-literals": {
+      "version": "7.12.1",
       "requires": {
-        "@babel/runtime": "^7.7.2",
-        "cosmiconfig": "^6.0.0",
-        "resolve": "^1.12.0"
-      },
-      "dependencies": {
-        "resolve": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-          "requires": {
-            "is-core-module": "^2.2.0",
-            "path-parse": "^1.0.6"
-          }
-        }
+        "@babel/helper-plugin-utils": "^7.10.4"
       }
     },
-    "babel-plugin-transform-react-remove-prop-types": {
-      "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
-      "integrity": "sha512-eqj0hVcJUR57/Ug2zE1Yswsw4LhuqqHhD+8v120T1cl3kjg76QwtyBrdIk4WVwK+lAhBJVYCd/v+4nc4y+8JsA=="
+    "@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-preset-react-app": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-10.0.0.tgz",
-      "integrity": "sha512-itL2z8v16khpuKutx5IH8UdCdSTuzrOhRFTEdIhveZ2i1iBKDrVE0ATa4sFVy+02GLucZNVBWtoarXBy0Msdpg==",
+    "@babel/plugin-transform-modules-commonjs": {
+      "version": "7.12.1",
       "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"
-          }
-        },
-        "@babel/helper-create-class-features-plugin": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz",
-          "integrity": "sha512-Z6gsfGofTxH/+LQXqYEK45kxmcensbzmk/oi8DmaQytlQCgqNZt9XQF8iqlI/SeXWVjaMNxvYvzaYw+kh42mDg==",
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-member-expression-to-functions": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5"
-          }
-        },
-        "@babel/helper-create-regexp-features-plugin": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.5.tgz",
-          "integrity": "sha512-TLawwqpOErY2HhWbGJ2nZT5wSkR192QpN+nBg1THfBfftrlvOh+WbhrxXCH4q4xJ9Gl16BGPR/48JA+Ryiho/A==",
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.14.5",
-            "regexpu-core": "^4.7.1"
-          }
-        },
-        "@babel/plugin-proposal-async-generator-functions": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.5.tgz",
-          "integrity": "sha512-tbD/CG3l43FIXxmu4a7RBe4zH7MLJ+S/lFowPFO7HetS2hyOZ/0nnnznegDuzFzfkyQYTxqdTH/hKmuBngaDAA==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-remap-async-to-generator": "^7.14.5",
-            "@babel/plugin-syntax-async-generators": "^7.8.4"
-          }
-        },
-        "@babel/plugin-proposal-class-properties": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.12.1.tgz",
-          "integrity": "sha512-cKp3dlQsFsEs5CWKnN7BnSHOd0EOW8EKpEjkoz1pO2E5KzIDNV9Ros1b0CnmbVgAGXJubOYVBOGCT1OmJwOI7w==",
-          "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",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.12.1.tgz",
-          "integrity": "sha512-knNIuusychgYN8fGJHONL0RbFxLGawhXOJNLBk75TniTsZZeA+wdkDuv6wp4lGwzQEKjZi6/WYtnb3udNPmQmQ==",
-          "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.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.5.tgz",
-          "integrity": "sha512-ExjiNYc3HDN5PXJx+bwC50GIx/KKanX2HiggnIUAYedbARdImiCU4RhhHfdf0Kd7JNXGpsBBBCOm+bBVy3Gb0g==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-dynamic-import": "^7.8.3"
-          }
-        },
-        "@babel/plugin-proposal-export-namespace-from": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.5.tgz",
-          "integrity": "sha512-g5POA32bXPMmSBu5Dx/iZGLGnKmKPc5AiY7qfZgurzrCYgIztDlHFbznSNCoQuv57YQLnQfaDi7dxCtLDIdXdA==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
-          }
-        },
-        "@babel/plugin-proposal-json-strings": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.5.tgz",
-          "integrity": "sha512-NSq2fczJYKVRIsUJyNxrVUMhB27zb7N7pOFGQOhBKJrChbGcgEAqyZrmZswkPk18VMurEeJAaICbfm57vUeTbQ==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-json-strings": "^7.8.3"
-          }
-        },
-        "@babel/plugin-proposal-logical-assignment-operators": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.5.tgz",
-          "integrity": "sha512-YGn2AvZAo9TwyhlLvCCWxD90Xq8xJ4aSgaX3G5D/8DW94L8aaT+dS5cSP+Z06+rCJERGSr9GxMBZ601xoc2taw==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
-          }
-        },
-        "@babel/plugin-proposal-nullish-coalescing-operator": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.12.1.tgz",
-          "integrity": "sha512-nZY0ESiaQDI1y96+jk6VxMOaL4LPo/QDHBqL+SF3/vl6dHkTwHlOI8L4ZwuRBHgakRBw5zsVylel7QPbbGuYgg==",
-          "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",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.1.tgz",
-          "integrity": "sha512-MR7Ok+Af3OhNTCxYVjJZHS0t97ydnJZt/DbR4WISO39iDnhiD8XHrY12xuSJ90FFEGjir0Fzyyn7g/zY6hxbxA==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4",
-            "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-          }
-        },
-        "@babel/plugin-proposal-object-rest-spread": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.5.tgz",
-          "integrity": "sha512-VzMyY6PWNPPT3pxc5hi9LloKNr4SSrVCg7Yr6aZpW4Ym07r7KqSU/QXYwjXLVxqwSv0t/XSXkFoKBPUkZ8vb2A==",
-          "requires": {
-            "@babel/compat-data": "^7.14.5",
-            "@babel/helper-compilation-targets": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-            "@babel/plugin-transform-parameters": "^7.14.5"
-          }
-        },
-        "@babel/plugin-proposal-optional-catch-binding": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.5.tgz",
-          "integrity": "sha512-3Oyiixm0ur7bzO5ybNcZFlmVsygSIQgdOa7cTfOYCMY+wEPAYhZAJxi3mixKFCTCKUhQXuCTtQ1MzrpL3WT8ZQ==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
-          }
-        },
-        "@babel/plugin-proposal-optional-chaining": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.1.tgz",
-          "integrity": "sha512-c2uRpY6WzaVDzynVY9liyykS+kVU+WRZPMPYpkelXH8KBt1oXoI89kPbZKKG/jDT5UK92FTW2fZkZaJhdiBabw==",
-          "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.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.14.5.tgz",
-          "integrity": "sha512-838DkdUA1u+QTCplatfq4B7+1lnDa/+QMI89x5WZHBcnNv+47N8QEj2k9I2MUU9xIv8XJ4XvPCviM/Dj7Uwt9g==",
-          "requires": {
-            "@babel/helper-create-class-features-plugin": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-proposal-unicode-property-regex": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.14.5.tgz",
-          "integrity": "sha512-6axIeOU5LnY471KenAB9vI8I5j7NQ2d652hIYwVyRfgaZT5UpiqFKCuVXCDMSrU+3VFafnu2c5m3lrWIlr6A5Q==",
-          "requires": {
-            "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-syntax-async-generators": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-          }
-        },
-        "@babel/plugin-syntax-class-properties": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.12.13"
-          }
-        },
-        "@babel/plugin-syntax-decorators": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.14.5.tgz",
-          "integrity": "sha512-c4sZMRWL4GSvP1EXy0woIP7m4jkVcEuG8R1TOZxPBPtp4FSM/kiPZub9UIs/Jrb5ZAOzvTUSGYrWsrSu1JvoPw==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-syntax-dynamic-import": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
-          "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-          }
-        },
-        "@babel/plugin-syntax-export-namespace-from": {
-          "version": "7.8.3",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
-          "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.3"
-          }
-        },
-        "@babel/plugin-syntax-flow": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.14.5.tgz",
-          "integrity": "sha512-9WK5ZwKCdWHxVuU13XNT6X73FGmutAXeor5lGFq6qhOFtMFUF4jkbijuyUdZZlpYq6E2hZeZf/u3959X9wsv0Q==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-syntax-json-strings": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-          }
-        },
-        "@babel/plugin-syntax-jsx": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
-          "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-syntax-logical-assignment-operators": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-          }
-        },
-        "@babel/plugin-syntax-nullish-coalescing-operator": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-          }
-        },
-        "@babel/plugin-syntax-numeric-separator": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-          }
-        },
-        "@babel/plugin-syntax-object-rest-spread": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-          }
-        },
-        "@babel/plugin-syntax-optional-catch-binding": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-          }
-        },
-        "@babel/plugin-syntax-optional-chaining": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.8.0"
-          }
-        },
-        "@babel/plugin-syntax-top-level-await": {
-          "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==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-syntax-typescript": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz",
-          "integrity": "sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-arrow-functions": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.14.5.tgz",
-          "integrity": "sha512-KOnO0l4+tD5IfOdi4x8C1XmEIRWUjNRV8wc6K2vz/3e8yAOoZZvsRXRRIF/yo/MAOFb4QjtAw9xSxMXbSMRy8A==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-async-to-generator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.14.5.tgz",
-          "integrity": "sha512-szkbzQ0mNk0rpu76fzDdqSyPu0MuvpXgC+6rz5rpMb5OIRxdmHfQxrktL8CYolL2d8luMCZTR0DpIMIdL27IjA==",
-          "requires": {
-            "@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": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.14.5.tgz",
-          "integrity": "sha512-dtqWqdWZ5NqBX3KzsVCWfQI3A53Ft5pWFCT2eCVUftWZgjc5DpDponbIF1+c+7cSGk2wN0YK7HGL/ezfRbpKBQ==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-block-scoping": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.5.tgz",
-          "integrity": "sha512-LBYm4ZocNgoCqyxMLoOnwpsmQ18HWTQvql64t3GvMUzLQrNoV1BDG0lNftC8QKYERkZgCCT/7J5xWGObGAyHDw==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-classes": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.5.tgz",
-          "integrity": "sha512-J4VxKAMykM06K/64z9rwiL6xnBHgB1+FVspqvlgCdwD1KUbQNfszeKVVOMh59w3sztHYIZDgnhOC4WbdEfHFDA==",
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.14.5",
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-optimise-call-expression": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5",
-            "@babel/helper-split-export-declaration": "^7.14.5",
-            "globals": "^11.1.0"
-          }
-        },
-        "@babel/plugin-transform-computed-properties": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.14.5.tgz",
-          "integrity": "sha512-pWM+E4283UxaVzLb8UBXv4EIxMovU4zxT1OPnpHJcmnvyY9QbPPTKZfEj31EUvG3/EQRbYAGaYEUZ4yWOBC2xg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-destructuring": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.14.5.tgz",
-          "integrity": "sha512-wU9tYisEbRMxqDezKUqC9GleLycCRoUsai9ddlsq54r8QRLaeEhc+d+9DqCG+kV9W2GgQjTZESPTpn5bAFMDww==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-dotall-regex": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.14.5.tgz",
-          "integrity": "sha512-loGlnBdj02MDsFaHhAIJzh7euK89lBrGIdM9EAtHFo6xKygCUGuuWe07o1oZVk287amtW1n0808sQM99aZt3gw==",
-          "requires": {
-            "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-duplicate-keys": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.14.5.tgz",
-          "integrity": "sha512-iJjbI53huKbPDAsJ8EmVmvCKeeq21bAze4fu9GBQtSLqfvzj2oRuHVx4ZkDwEhg1htQ+5OBZh/Ab0XDf5iBZ7A==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-exponentiation-operator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.14.5.tgz",
-          "integrity": "sha512-jFazJhMBc9D27o9jDnIE5ZErI0R0m7PbKXVq77FFvqFbzvTMuv8jaAwLZ5PviOLSFttqKIW0/wxNSDbjLk0tYA==",
-          "requires": {
-            "@babel/helper-builder-binary-assignment-operator-visitor": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-flow-strip-types": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.12.1.tgz",
-          "integrity": "sha512-8hAtkmsQb36yMmEtk2JZ9JnVyDSnDOdlB+0nEGzIDLuK4yR3JcEjfuFPYkdEPSh8Id+rAMeBEn+X0iVEyho6Hg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4",
-            "@babel/plugin-syntax-flow": "^7.12.1"
-          }
-        },
-        "@babel/plugin-transform-for-of": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.14.5.tgz",
-          "integrity": "sha512-CfmqxSUZzBl0rSjpoQSFoR9UEj3HzbGuGNL21/iFTmjb5gFggJp3ph0xR1YBhexmLoKRHzgxuFvty2xdSt6gTA==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-function-name": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.14.5.tgz",
-          "integrity": "sha512-vbO6kv0fIzZ1GpmGQuvbwwm+O4Cbm2NrPzwlup9+/3fdkuzo1YqOZcXw26+YUJB84Ja7j9yURWposEHLYwxUfQ==",
-          "requires": {
-            "@babel/helper-function-name": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-literals": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.14.5.tgz",
-          "integrity": "sha512-ql33+epql2F49bi8aHXxvLURHkxJbSmMKl9J5yHqg4PLtdE6Uc48CH1GS6TQvZ86eoB/ApZXwm7jlA+B3kra7A==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-member-expression-literals": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.14.5.tgz",
-          "integrity": "sha512-WkNXxH1VXVTKarWFqmso83xl+2V3Eo28YY5utIkbsmXoItO8Q3aZxN4BTS2k0hz9dGUloHK26mJMyQEYfkn/+Q==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-modules-amd": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.5.tgz",
-          "integrity": "sha512-3lpOU8Vxmp3roC4vzFpSdEpGUWSMsHFreTWOMMLzel2gNGfHE5UWIh/LN6ghHs2xurUp4jRFYMUIZhuFbody1g==",
-          "requires": {
-            "@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": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.14.5.tgz",
-          "integrity": "sha512-en8GfBtgnydoao2PS+87mKyw62k02k7kJ9ltbKe0fXTHrQmG6QZZflYuGI1VVG7sVpx4E1n7KBpNlPb8m78J+A==",
-          "requires": {
-            "@babel/helper-module-transforms": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-simple-access": "^7.14.5",
-            "babel-plugin-dynamic-import-node": "^2.3.3"
-          }
-        },
-        "@babel/plugin-transform-modules-systemjs": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.14.5.tgz",
-          "integrity": "sha512-mNMQdvBEE5DcMQaL5LbzXFMANrQjd2W7FPzg34Y4yEz7dBgdaC+9B84dSO+/1Wba98zoDbInctCDo4JGxz1VYA==",
-          "requires": {
-            "@babel/helper-hoist-variables": "^7.14.5",
-            "@babel/helper-module-transforms": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-validator-identifier": "^7.14.5",
-            "babel-plugin-dynamic-import-node": "^2.3.3"
-          }
-        },
-        "@babel/plugin-transform-modules-umd": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.14.5.tgz",
-          "integrity": "sha512-RfPGoagSngC06LsGUYyM9QWSXZ8MysEjDJTAea1lqRjNECE3y0qIJF/qbvJxc4oA4s99HumIMdXOrd+TdKaAAA==",
-          "requires": {
-            "@babel/helper-module-transforms": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-named-capturing-groups-regex": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.14.5.tgz",
-          "integrity": "sha512-+Xe5+6MWFo311U8SchgeX5c1+lJM+eZDBZgD+tvXu9VVQPXwwVzeManMMjYX6xw2HczngfOSZjoFYKwdeB/Jvw==",
-          "requires": {
-            "@babel/helper-create-regexp-features-plugin": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-new-target": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.14.5.tgz",
-          "integrity": "sha512-Nx054zovz6IIRWEB49RDRuXGI4Gy0GMgqG0cII9L3MxqgXz/+rgII+RU58qpo4g7tNEx1jG7rRVH4ihZoP4esQ==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-object-super": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.14.5.tgz",
-          "integrity": "sha512-MKfOBWzK0pZIrav9z/hkRqIk/2bTv9qvxHzPQc12RcVkMOzpIKnFCNYJip00ssKWYkd8Sf5g0Wr7pqJ+cmtuFg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-replace-supers": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-parameters": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.5.tgz",
-          "integrity": "sha512-Tl7LWdr6HUxTmzQtzuU14SqbgrSKmaR77M0OKyq4njZLQTPfOvzblNKyNkGwOfEFCEx7KeYHQHDI0P3F02IVkA==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-property-literals": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.14.5.tgz",
-          "integrity": "sha512-r1uilDthkgXW8Z1vJz2dKYLV1tuw2xsbrp3MrZmD99Wh9vsfKoob+JTgri5VUb/JqyKRXotlOtwgu4stIYCmnw==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-react-display-name": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.12.1.tgz",
-          "integrity": "sha512-cAzB+UzBIrekfYxyLlFqf/OagTvHLcVBb5vpouzkYkBclRPraiygVnafvAoipErZLI8ANv8Ecn6E/m5qPXD26w==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4"
-          }
-        },
-        "@babel/plugin-transform-react-jsx": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.14.5.tgz",
-          "integrity": "sha512-7RylxNeDnxc1OleDm0F5Q/BSL+whYRbOAR+bwgCxIr0L32v7UFh/pz1DLMZideAUxKT6eMoS2zQH6fyODLEi8Q==",
-          "requires": {
-            "@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.5"
-          }
-        },
-        "@babel/plugin-transform-react-jsx-development": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.14.5.tgz",
-          "integrity": "sha512-rdwG/9jC6QybWxVe2UVOa7q6cnTpw8JRRHOxntG/h6g/guAOe6AhtQHJuJh5FwmnXIT1bdm5vC2/5huV8ZOorQ==",
-          "requires": {
-            "@babel/plugin-transform-react-jsx": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-react-jsx-self": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.14.5.tgz",
-          "integrity": "sha512-M/fmDX6n0cfHK/NLTcPmrfVAORKDhK8tyjDhyxlUjYyPYYO8FRWwuxBA3WBx8kWN/uBUuwGa3s/0+hQ9JIN3Tg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-react-jsx-source": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.14.5.tgz",
-          "integrity": "sha512-1TpSDnD9XR/rQ2tzunBVPThF5poaYT9GqP+of8fAtguYuI/dm2RkrMBDemsxtY0XBzvW7nXjYM0hRyKX9QYj7Q==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-react-pure-annotations": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.14.5.tgz",
-          "integrity": "sha512-3X4HpBJimNxW4rhUy/SONPyNQHp5YRr0HhJdT2OH1BRp0of7u3Dkirc7x9FRJMKMqTBI079VZ1hzv7Ouuz///g==",
-          "requires": {
-            "@babel/helper-annotate-as-pure": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-regenerator": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.14.5.tgz",
-          "integrity": "sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==",
-          "requires": {
-            "regenerator-transform": "^0.14.2"
-          }
-        },
-        "@babel/plugin-transform-reserved-words": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.14.5.tgz",
-          "integrity": "sha512-cv4F2rv1nD4qdexOGsRQXJrOcyb5CrgjUH9PKrrtyhSDBNWGxd0UIitjyJiWagS+EbUGjG++22mGH1Pub8D6Vg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-runtime": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.12.1.tgz",
-          "integrity": "sha512-Ac/H6G9FEIkS2tXsZjL4RAdS3L3WHxci0usAnz7laPWUmFiGtj7tIASChqKZMHTSQTQY6xDbOq+V1/vIq3QrWg==",
-          "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.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.14.5.tgz",
-          "integrity": "sha512-xLucks6T1VmGsTB+GWK5Pl9Jl5+nRXD1uoFdA5TSO6xtiNjtXTjKkmPdFXVLGlK5A2/or/wQMKfmQ2Y0XJfn5g==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-spread": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.14.6.tgz",
-          "integrity": "sha512-Zr0x0YroFJku7n7+/HH3A2eIrGMjbmAIbJSVv0IZ+t3U2WUQUA64S/oeied2e+MaGSjmt4alzBCsK9E8gh+fag==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/helper-skip-transparent-expression-wrappers": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-sticky-regex": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.14.5.tgz",
-          "integrity": "sha512-Z7F7GyvEMzIIbwnziAZmnSNpdijdr4dWt+FJNBnBLz5mwDFkqIXU9wmBcWWad3QeJF5hMTkRe4dAq2sUZiG+8A==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-template-literals": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.14.5.tgz",
-          "integrity": "sha512-22btZeURqiepOfuy/VkFr+zStqlujWaarpMErvay7goJS6BWwdd6BY9zQyDLDa4x2S3VugxFb162IZ4m/S/+Gg==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-typeof-symbol": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.14.5.tgz",
-          "integrity": "sha512-lXzLD30ffCWseTbMQzrvDWqljvZlHkXU+CnseMhkMNqU1sASnCsz3tSzAaH3vCUXb9PHeUb90ZT1BdFTm1xxJw==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-typescript": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.6.tgz",
-          "integrity": "sha512-XlTdBq7Awr4FYIzqhmYY80WN0V0azF74DMPyFqVHBvf81ZUgc4X7ZOpx6O8eLDK6iM5cCQzeyJw0ynTaefixRA==",
-          "requires": {
-            "@babel/helper-create-class-features-plugin": "^7.14.6",
-            "@babel/helper-plugin-utils": "^7.14.5",
-            "@babel/plugin-syntax-typescript": "^7.14.5"
-          }
-        },
-        "@babel/plugin-transform-unicode-escapes": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.14.5.tgz",
-          "integrity": "sha512-crTo4jATEOjxj7bt9lbYXcBAM3LZaUrbP2uUdxb6WIorLmjNKSpHfIybgY4B8SRpbf8tEVIWH3Vtm7ayCrKocA==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.14.5"
-          }
+        "@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.12.13",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
+      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/parser": "^7.12.13",
+        "@babel/types": "^7.12.13"
+      }
+    },
+    "@babel/traverse": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.14.2.tgz",
+      "integrity": "sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==",
+      "requires": {
+        "@babel/code-frame": "^7.12.13",
+        "@babel/generator": "^7.14.2",
+        "@babel/helper-function-name": "^7.14.2",
+        "@babel/helper-split-export-declaration": "^7.12.13",
+        "@babel/parser": "^7.14.2",
+        "@babel/types": "^7.14.2",
+        "debug": "^4.1.0",
+        "globals": "^11.1.0"
+      }
+    },
+    "@babel/types": {
+      "version": "7.14.4",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.4.tgz",
+      "integrity": "sha512-lCj4aIs0xUefJFQnwwQv2Bxg7Omd6bgquZ6LGC+gGMh6/s5qDVfjuCMlDmYQ15SLsWHd9n+X3E75lKIhl5Lkiw==",
+      "requires": {
+        "@babel/helper-validator-identifier": "^7.14.0",
+        "to-fast-properties": "^2.0.0"
+      }
+    },
+    "@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"
         },
-        "@babel/plugin-transform-unicode-regex": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.14.5.tgz",
-          "integrity": "sha512-UygduJpC5kHeCiRw/xDVzC+wj8VaYSoKl5JNVmbP7MadpNinAm3SvZCxZ42H37KZBKztz46YC73i9yV34d0Tzw==",
+        "util": {
+          "version": "0.10.3",
           "requires": {
-            "@babel/helper-create-regexp-features-plugin": "^7.14.5",
-            "@babel/helper-plugin-utils": "^7.14.5"
+            "inherits": "2.0.1"
           }
-        },
-        "@babel/preset-env": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.12.1.tgz",
-          "integrity": "sha512-H8kxXmtPaAGT7TyBvSSkoSTUK6RHh61So05SyEbpmr0MCZrsNYn7mGMzzeYoOUCdHzww61k8XBft2TaES+xPLg==",
+        }
+      }
+    },
+    "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/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/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",
-            "core-js-compat": "^3.6.2",
-            "semver": "^5.5.0"
-          },
-          "dependencies": {
-            "@babel/plugin-proposal-class-properties": {
-              "version": "7.14.5",
-              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.14.5.tgz",
-              "integrity": "sha512-q/PLpv5Ko4dVc1LYMpCY7RVAAO4uk55qPwrIuJ5QJ8c6cVuAmhu7I/49JOppXL6gXf7ZHzpRVEUZdYoPLM04Gg==",
-              "requires": {
-                "@babel/helper-create-class-features-plugin": "^7.14.5",
-                "@babel/helper-plugin-utils": "^7.14.5"
-              }
-            },
-            "@babel/plugin-proposal-nullish-coalescing-operator": {
-              "version": "7.14.5",
-              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.5.tgz",
-              "integrity": "sha512-gun/SOnMqjSb98Nkaq2rTKMwervfdAoz6NphdY0vTfuzMfryj+tDGb2n6UkDKwez+Y8PZDhE3D143v6Gepp4Hg==",
-              "requires": {
-                "@babel/helper-plugin-utils": "^7.14.5",
-                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
-              }
-            },
-            "@babel/plugin-proposal-numeric-separator": {
-              "version": "7.14.5",
-              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.5.tgz",
-              "integrity": "sha512-yiclALKe0vyZRZE0pS6RXgjUOt87GWv6FYa5zqj15PvhOGFO69R5DusPlgK/1K5dVnCtegTiWu9UaBSrLLJJBg==",
-              "requires": {
-                "@babel/helper-plugin-utils": "^7.14.5",
-                "@babel/plugin-syntax-numeric-separator": "^7.10.4"
-              }
-            },
-            "@babel/plugin-proposal-optional-chaining": {
-              "version": "7.14.5",
-              "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.5.tgz",
-              "integrity": "sha512-ycz+VOzo2UbWNI1rQXxIuMOzrDdHGrI23fRiz/Si2R4kv2XZQ1BK8ccdHwehMKBlcH/joGW/tzrUmo67gbJHlQ==",
-              "requires": {
-                "@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/preset-modules": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.4.tgz",
-          "integrity": "sha512-J36NhwnfdzpmH41M1DrnkkgAqhZaqr/NBdPfQ677mLzlaXo+oDiv1deyCDtgAhz8p328otdob0Du7+xgHGZbKg==",
-          "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",
-          "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.12.1.tgz",
-          "integrity": "sha512-euCExymHCi0qB9u5fKw7rvlw7AZSjw/NaB9h7EkdTt5+yHRrXdiRTh7fkG3uBPpJg82CqLfp1LHLqWGSCrab+g==",
-          "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"
-          },
-          "dependencies": {
-            "@babel/plugin-transform-react-display-name": {
-              "version": "7.14.5",
-              "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.14.5.tgz",
-              "integrity": "sha512-07aqY1ChoPgIxsuDviptRpVkWCSbXWmzQqcgy65C6YSFOfPFvb/DX3bBRHh7pCd/PMEEYHYWUTSVkCbkVainYQ==",
-              "requires": {
-                "@babel/helper-plugin-utils": "^7.14.5"
-              }
-            }
-          }
-        },
-        "@babel/preset-typescript": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.12.1.tgz",
-          "integrity": "sha512-hNK/DhmoJPsksdHuI/RVrcEws7GN5eamhi28JkO52MqIxU8Z0QpmiSOQxZHWOHV7I3P4UjHV97ay4TcamMA6Kw==",
-          "requires": {
-            "@babel/helper-plugin-utils": "^7.10.4",
-            "@babel/plugin-transform-typescript": "^7.12.1"
-          }
-        },
-        "@babel/runtime": {
-          "version": "7.12.1",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.1.tgz",
-          "integrity": "sha512-J5AIf3vPj3UwXaAzb5j1xM4WAQDX3EMgemF8rjCP3SoW09LfRKAXQKt6CoVYl230P6iWdRcBbnLDDdnqWxZSCA==",
-          "requires": {
-            "regenerator-runtime": "^0.13.4"
-          }
-        },
-        "debug": {
-          "version": "4.3.1",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-          "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
-          "requires": {
-            "ms": "2.1.2"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
-        },
-        "resolve": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-          "requires": {
-            "is-core-module": "^2.2.0",
-            "path-parse": "^1.0.6"
+            "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.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "version": "1.0.0"
     },
     "base": {
       "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/base/-/base-0.11.2.tgz",
-      "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
       "requires": {
         "cache-base": "^1.0.1",
         "class-utils": "^0.3.5",
@@ -9747,52 +8808,56 @@
       "dependencies": {
         "define-property": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
           "requires": {
-            "is-descriptor": "^1.0.0"
+            "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",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
-      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="
+      "version": "1.5.1"
     },
     "big.js": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
-      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
+      "version": "5.2.2"
     },
     "binary-extensions": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+      "version": "2.1.0"
     },
     "bindings": {
       "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
       "optional": true,
       "requires": {
         "file-uri-to-path": "1.0.0"
       }
     },
     "bluebird": {
-      "version": "3.7.2",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
-      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg=="
+      "version": "3.7.2"
     },
     "bn.js": {
-      "version": "4.12.0",
-      "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
-      "integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA=="
+      "version": "5.1.3"
     },
     "body-parser": {
       "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
       "requires": {
         "bytes": "3.1.0",
         "content-type": "~1.0.4",
@@ -9804,12 +8869,24 @@
         "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",
-      "resolved": "https://registry.npmjs.org/boxen/-/boxen-4.2.0.tgz",
-      "integrity": "sha512-eB4uT9RGzg2odpER62bBwSLvUeGC+WbRjjyyFhGsKnc8wp/m0+hQsMUvUe3H2V0D5vw0nBdO1hCJoZo5mKeuIQ==",
       "requires": {
         "ansi-align": "^3.0.0",
         "camelcase": "^5.3.1",
@@ -9822,22 +8899,16 @@
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+          "version": "5.0.0"
         },
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "requires": {
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -9845,36 +8916,24 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
           }
         },
         "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+          "version": "1.1.4"
         },
         "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+          "version": "8.0.0"
         },
         "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+          "version": "4.0.0"
         },
         "is-fullwidth-code-point": {
-          "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=="
+          "version": "3.0.0"
         },
         "string-width": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "version": "4.2.0",
           "requires": {
             "emoji-regex": "^8.0.0",
             "is-fullwidth-code-point": "^3.0.0",
@@ -9883,16 +8942,12 @@
         },
         "strip-ansi": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "requires": {
             "ansi-regex": "^5.0.0"
           }
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -9901,39 +8956,22 @@
     },
     "brace-expansion": {
       "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "requires": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
     "braces": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz",
-      "integrity": "sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==",
+      "version": "3.0.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"
+        "fill-range": "^7.0.1"
       }
     },
     "brorand": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
-      "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8="
+      "version": "1.1.0"
     },
     "browserify-aes": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
-      "integrity": "sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==",
       "requires": {
         "buffer-xor": "^1.0.3",
         "cipher-base": "^1.0.0",
@@ -9945,8 +8983,6 @@
     },
     "browserify-cipher": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/browserify-cipher/-/browserify-cipher-1.0.1.tgz",
-      "integrity": "sha512-sPhkz0ARKbf4rRQt2hTpAHqn47X3llLkUGn+xEJzLjwY8LRs2p0v7ljvI5EyoRO/mexrNunNECisZs+gw2zz1w==",
       "requires": {
         "browserify-aes": "^1.0.4",
         "browserify-des": "^1.0.0",
@@ -9955,8 +8991,6 @@
     },
     "browserify-des": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/browserify-des/-/browserify-des-1.0.2.tgz",
-      "integrity": "sha512-BioO1xf3hFwz4kc6iBhI3ieDFompMhrMlnDFC4/0/vd5MokpuAc3R+LYbwTA9A5Yc9pq9UYPqffKpW2ObuwX5A==",
       "requires": {
         "cipher-base": "^1.0.1",
         "des.js": "^1.0.0",
@@ -9966,24 +9000,13 @@
     },
     "browserify-rsa": {
       "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/browserify-rsa/-/browserify-rsa-4.1.0.tgz",
-      "integrity": "sha512-AdEER0Hkspgno2aR97SAf6vi0y0k8NuOpGnVH3O99rcA5Q6sh8QxcngtHuJ6uXwnfAXNM4Gn1Gb7/MV1+Ymbog==",
       "requires": {
         "bn.js": "^5.0.0",
         "randombytes": "^2.0.1"
-      },
-      "dependencies": {
-        "bn.js": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
-          "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
-        }
       }
     },
     "browserify-sign": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/browserify-sign/-/browserify-sign-4.2.1.tgz",
-      "integrity": "sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==",
       "requires": {
         "bn.js": "^5.1.1",
         "browserify-rsa": "^4.0.1",
@@ -9996,35 +9019,19 @@
         "safe-buffer": "^5.2.0"
       },
       "dependencies": {
-        "bn.js": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
-          "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
+        "safe-buffer": {
+          "version": "5.2.1"
         }
       }
     },
     "browserify-zlib": {
       "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/browserify-zlib/-/browserify-zlib-0.2.0.tgz",
-      "integrity": "sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==",
       "requires": {
         "pako": "~1.0.5"
       }
     },
     "browserslist": {
       "version": "4.16.6",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.16.6.tgz",
-      "integrity": "sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ==",
       "requires": {
         "caniuse-lite": "^1.0.30001219",
         "colorette": "^1.2.2",
@@ -10035,8 +9042,6 @@
     },
     "buffer": {
       "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
-      "integrity": "sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==",
       "requires": {
         "base64-js": "^1.0.2",
         "ieee754": "^1.1.4",
@@ -10044,29 +9049,19 @@
       }
     },
     "buffer-from": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
+      "version": "1.1.1"
     },
     "buffer-xor": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz",
-      "integrity": "sha1-JuYe0UIvtw3ULm42cp7VHYVf6Nk="
+      "version": "1.0.3"
     },
     "builtin-status-codes": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz",
-      "integrity": "sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug="
+      "version": "3.0.0"
     },
     "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+      "version": "3.0.0"
     },
     "cacache": {
       "version": "12.0.4",
-      "resolved": "https://registry.npmjs.org/cacache/-/cacache-12.0.4.tgz",
-      "integrity": "sha512-a0tMB40oefvuInr4Cwb3GerbL9xTj1D5yg0T5xrjGCGyfvbxseIXX7BAO/u/hIXdafzOI5JC3wDwHyf24buOAQ==",
       "requires": {
         "bluebird": "^3.5.5",
         "chownr": "^1.1.1",
@@ -10087,8 +9082,6 @@
       "dependencies": {
         "rimraf": {
           "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
           "requires": {
             "glob": "^7.1.3"
           }
@@ -10097,8 +9090,6 @@
     },
     "cache-base": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
-      "integrity": "sha512-AKcdTnFSWATd5/GCPRxr2ChwIJ85CeyrEyjRHlKxQ56d4XJMGym0uAiKn0xbLOGOl3+yRpOTi484dVCEc5AUzQ==",
       "requires": {
         "collection-visit": "^1.0.0",
         "component-emitter": "^1.2.1",
@@ -10113,8 +9104,6 @@
     },
     "cacheable-request": {
       "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-6.1.0.tgz",
-      "integrity": "sha512-Oj3cAGPCqOZX7Rz64Uny2GYAZNliQSqfbePrgAQ1wKAihYmCUnraBtJtKcGR4xz7wF+LoJC+ssFZvv5BgF9Igg==",
       "requires": {
         "clone-response": "^1.0.2",
         "get-stream": "^5.1.0",
@@ -10127,47 +9116,33 @@
       "dependencies": {
         "get-stream": {
           "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
           "requires": {
             "pump": "^3.0.0"
           }
         },
         "lowercase-keys": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz",
-          "integrity": "sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA=="
+          "version": "2.0.0"
         }
       }
     },
     "call-bind": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
-      "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "version": "1.0.0",
       "requires": {
         "function-bind": "^1.1.1",
-        "get-intrinsic": "^1.0.2"
+        "get-intrinsic": "^1.0.0"
       }
     },
     "callsites": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+      "version": "3.1.0"
     },
     "camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
+      "version": "5.3.1"
     },
     "caniuse-lite": {
-      "version": "1.0.30001237",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001237.tgz",
-      "integrity": "sha512-pDHgRndit6p1NR2GhzMbQ6CkRrp4VKuSsqbcLeOQppYPKOYkKT/6ZvZDvKJUqcmtyWIAHuZq3SVS2vc1egCZzw=="
+      "version": "1.0.30001233"
     },
     "chalk": {
       "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -10175,70 +9150,32 @@
       }
     },
     "chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "version": "3.4.3",
       "requires": {
-        "anymatch": "~3.1.2",
+        "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.2",
-        "glob-parent": "~5.1.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.6.0"
-      },
-      "dependencies": {
-        "braces": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-          "requires": {
-            "fill-range": "^7.0.1"
-          }
-        },
-        "fill-range": {
-          "version": "7.0.1",
-          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-          "requires": {
-            "to-regex-range": "^5.0.1"
-          }
-        },
-        "is-number": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
-        },
-        "to-regex-range": {
-          "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==",
-          "requires": {
-            "is-number": "^7.0.0"
-          }
-        }
+        "readdirp": "~3.5.0"
       }
     },
     "chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+      "version": "1.1.4"
     },
     "chrome-trace-event": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-      "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg=="
+      "version": "1.0.2",
+      "requires": {
+        "tslib": "^1.9.0"
+      }
     },
     "ci-info": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-2.0.0.tgz",
-      "integrity": "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="
+      "version": "2.0.0"
     },
     "cipher-base": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/cipher-base/-/cipher-base-1.0.4.tgz",
-      "integrity": "sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==",
       "requires": {
         "inherits": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -10246,24 +9183,26 @@
     },
     "class-utils": {
       "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
-      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
       "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",
-      "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-2.2.1.tgz",
-      "integrity": "sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw=="
+      "version": "2.2.1"
     },
     "cliui": {
       "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz",
-      "integrity": "sha512-PYeGSEmmHM6zvoef2w8TPzlrnNpXIjTipYK780YswmIP9vjxmd6Y2a3CB2Ks6/AU8NHjZugXvo8w3oWM2qnwXA==",
       "requires": {
         "string-width": "^3.1.0",
         "strip-ansi": "^5.2.0",
@@ -10282,16 +9221,12 @@
     },
     "clone-response": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
-      "integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
       "requires": {
         "mimic-response": "^1.0.0"
       }
     },
     "collection-visit": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
-      "integrity": "sha1-S8A3PBZLwykbTTaMgpzxqApZ3KA=",
       "requires": {
         "map-visit": "^1.0.0",
         "object-visit": "^1.0.0"
@@ -10299,49 +9234,39 @@
     },
     "color-convert": {
       "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
       "requires": {
         "color-name": "1.1.3"
       }
     },
     "color-name": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "version": "1.1.3"
     },
     "colorette": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
-      "integrity": "sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w=="
+      "version": "1.2.2"
     },
-    "commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw=="
+    "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",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
+      "version": "1.0.1"
     },
     "component-emitter": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+      "version": "1.3.0"
     },
     "compressible": {
       "version": "2.0.18",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
-      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
       "requires": {
         "mime-db": ">= 1.43.0 < 2"
       }
     },
     "compression": {
       "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
-      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
       "requires": {
         "accepts": "~1.3.5",
         "bytes": "3.0.0",
@@ -10352,38 +9277,51 @@
         "vary": "~1.1.2"
       },
       "dependencies": {
-        "bytes": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
-          "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
         },
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        "ms": {
+          "version": "2.0.0"
         }
       }
     },
     "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
+      "version": "0.0.1"
     },
     "concat-stream": {
       "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
       "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",
-      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-5.3.0.tgz",
-      "integrity": "sha512-8MhqOB6PWlBfA2vJ8a0bSFKATOdWlHiQlk11IfmQBPaHVP8oP2gsh2MObE6UR3hqDHqvaIvLTyceNW6obVuFHQ==",
       "requires": {
         "chalk": "^2.4.2",
         "date-fns": "^2.0.1",
@@ -10398,8 +9336,6 @@
       "dependencies": {
         "supports-color": {
           "version": "6.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
-          "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -10408,8 +9344,6 @@
     },
     "configstore": {
       "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-5.0.1.tgz",
-      "integrity": "sha512-aMKprgk5YhBNyH25hj8wGt2+D52Sw1DRRIzqBwLp2Ya9mFmY8KPvvtvmna8SxVR9JMZ4kzMD68N22vlaRpkeFA==",
       "requires": {
         "dot-prop": "^5.2.0",
         "graceful-fs": "^4.1.2",
@@ -10421,78 +9355,44 @@
       "dependencies": {
         "make-dir": {
           "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==",
           "requires": {
             "semver": "^6.0.0"
           }
         },
         "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "version": "6.3.0"
         }
       }
     },
     "console-browserify": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/console-browserify/-/console-browserify-1.2.0.tgz",
-      "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA=="
+      "version": "1.2.0"
     },
     "constants-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
-      "integrity": "sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U="
+      "version": "1.0.0"
     },
     "content-disposition": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
       "requires": {
         "safe-buffer": "5.1.2"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-        }
       }
     },
     "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+      "version": "1.0.4"
     },
     "convert-source-map": {
       "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
-      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
       "requires": {
         "safe-buffer": "~5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-        }
       }
     },
     "cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+      "version": "0.4.0"
     },
     "cookie-signature": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
-      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+      "version": "1.0.6"
     },
     "copy-concurrently": {
       "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
       "requires": {
         "aproba": "^1.1.1",
         "fs-write-stream-atomic": "^1.0.8",
@@ -10504,8 +9404,6 @@
       "dependencies": {
         "rimraf": {
           "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
           "requires": {
             "glob": "^7.1.3"
           }
@@ -10513,69 +9411,47 @@
       }
     },
     "copy-descriptor": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
-      "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
+      "version": "0.1.1"
     },
     "core-js-compat": {
-      "version": "3.14.0",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.14.0.tgz",
-      "integrity": "sha512-R4NS2eupxtiJU+VwgkF9WTpnSfZW4pogwKHd8bclWU2sp93Pr5S1uYJI84cMOubJRou7bcfL0vmwtLslWN5p3A==",
+      "version": "3.8.1",
       "requires": {
-        "browserslist": "^4.16.6",
+        "browserslist": "^4.15.0",
         "semver": "7.0.0"
       },
       "dependencies": {
         "semver": {
-          "version": "7.0.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
-          "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A=="
+          "version": "7.0.0"
         }
       }
     },
     "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
+      "version": "1.0.2"
     },
     "cosmiconfig": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
       "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"
-      },
-      "dependencies": {
-        "parse-json": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
-          "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
-          "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"
-          }
-        }
       }
     },
     "create-ecdh": {
       "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
-      "integrity": "sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==",
       "requires": {
         "bn.js": "^4.1.0",
         "elliptic": "^6.5.3"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
       }
     },
     "create-hash": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
-      "integrity": "sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==",
       "requires": {
         "cipher-base": "^1.0.1",
         "inherits": "^2.0.1",
@@ -10586,8 +9462,6 @@
     },
     "create-hmac": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/create-hmac/-/create-hmac-1.1.7.tgz",
-      "integrity": "sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==",
       "requires": {
         "cipher-base": "^1.0.3",
         "create-hash": "^1.1.0",
@@ -10599,8 +9473,6 @@
     },
     "cross-env": {
       "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
-      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
       "dev": true,
       "requires": {
         "cross-spawn": "^7.0.1"
@@ -10608,8 +9480,6 @@
     },
     "cross-spawn": {
       "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
       "requires": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -10618,8 +9488,6 @@
     },
     "crypto-browserify": {
       "version": "3.12.0",
-      "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
-      "integrity": "sha512-fz4spIh+znjO2VjL+IdhEpRJ3YN6sMzITSBijk6FK2UvTqruSQW+/cCZTSNsMiZNvUeq0CqurF+dAbyiGOY6Wg==",
       "requires": {
         "browserify-cipher": "^1.0.0",
         "browserify-sign": "^4.0.0",
@@ -10635,197 +9503,148 @@
       }
     },
     "crypto-random-string": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz",
-      "integrity": "sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA=="
+      "version": "2.0.0"
     },
     "cyclist": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz",
-      "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
+      "version": "1.0.1"
     },
     "date-fns": {
-      "version": "2.22.1",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.22.1.tgz",
-      "integrity": "sha512-yUFPQjrxEmIsMqlHhAhmxkuH769baF21Kk+nZwZGyrMoyLA+LugaQtC0+Tqf9CBUUULWwUJt6Q5ySI3LJDDCGg=="
+      "version": "2.16.1"
     },
     "debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "version": "4.3.1",
       "requires": {
-        "ms": "2.0.0"
+        "ms": "2.1.2"
       }
     },
     "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+      "version": "1.2.0"
     },
     "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
+      "version": "0.2.0"
     },
     "decompress-response": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
-      "integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
       "requires": {
         "mimic-response": "^1.0.0"
       }
     },
     "deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA=="
+      "version": "0.6.0"
     },
     "defer-to-connect": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-1.1.3.tgz",
-      "integrity": "sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ=="
+      "version": "1.1.3"
     },
     "define-properties": {
       "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
       "requires": {
         "object-keys": "^1.0.12"
       }
     },
     "define-property": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-      "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
+      "version": "2.0.2",
       "requires": {
-        "is-descriptor": "^0.1.0"
+        "is-descriptor": "^1.0.2",
+        "isobject": "^3.0.1"
       },
       "dependencies": {
         "is-accessor-descriptor": {
-          "version": "0.1.6",
-          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "version": "1.0.0",
           "requires": {
-            "kind-of": "^3.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "requires": {
-                "is-buffer": "^1.1.5"
-              }
-            }
+            "kind-of": "^6.0.0"
           }
         },
         "is-data-descriptor": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "version": "1.0.0",
           "requires": {
-            "kind-of": "^3.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "requires": {
-                "is-buffer": "^1.1.5"
-              }
-            }
+            "kind-of": "^6.0.0"
           }
         },
         "is-descriptor": {
-          "version": "0.1.6",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-          "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
+          "version": "1.0.2",
           "requires": {
-            "is-accessor-descriptor": "^0.1.6",
-            "is-data-descriptor": "^0.1.4",
-            "kind-of": "^5.0.0"
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
           }
-        },
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
         }
       }
     },
     "depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+      "version": "1.1.2"
     },
     "des.js": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.1.tgz",
-      "integrity": "sha512-Q0I4pfFrv2VPd34/vfLrFOoRmlYj3OV50i7fskps1jZWK1kApMWWT9G6RRUeYedLcBDIhnSDaUvJMb3AhUlaEA==",
       "requires": {
         "inherits": "^2.0.1",
         "minimalistic-assert": "^1.0.0"
       }
     },
     "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+      "version": "1.0.4"
     },
     "diffie-hellman": {
       "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
-      "integrity": "sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==",
       "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",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
-      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
+      "version": "1.2.0"
     },
     "dot-prop": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-5.3.0.tgz",
-      "integrity": "sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==",
       "requires": {
         "is-obj": "^2.0.0"
       }
     },
     "duplexer3": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
-      "integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI="
+      "version": "0.1.4"
     },
     "duplexify": {
       "version": "3.7.1",
-      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz",
-      "integrity": "sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==",
       "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",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+      "version": "1.1.1"
     },
     "electron-to-chromium": {
-      "version": "1.3.752",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.752.tgz",
-      "integrity": "sha512-2Tg+7jSl3oPxgsBsWKh5H83QazTkmWG/cnNwJplmyZc7KcN61+I10oUgaXSVk/NwfvN3BdkKDR4FYuRBQQ2v0A=="
+      "version": "1.3.743"
     },
     "elliptic": {
       "version": "6.5.4",
-      "resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
-      "integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
       "requires": {
         "bn.js": "^4.11.9",
         "brorand": "^1.1.0",
@@ -10834,35 +9653,30 @@
         "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",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
-      "integrity": "sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA=="
+      "version": "7.0.3"
     },
     "emojis-list": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
-      "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
+      "version": "3.0.0"
     },
     "encodeurl": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+      "version": "1.0.2"
     },
     "end-of-stream": {
       "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==",
       "requires": {
         "once": "^1.4.0"
       }
     },
     "enhanced-resolve": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
-      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "version": "4.3.0",
       "requires": {
         "graceful-fs": "^4.1.2",
         "memory-fs": "^0.5.0",
@@ -10871,60 +9685,66 @@
       "dependencies": {
         "memory-fs": {
           "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-          "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
           "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.8.1",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
-      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw=="
+      "version": "7.7.3"
     },
     "errno": {
       "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
       "requires": {
         "prr": "~1.0.1"
       }
     },
     "error-ex": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
-      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
       "requires": {
         "is-arrayish": "^0.2.1"
       }
     },
     "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+      "version": "3.1.1"
     },
     "escape-goat": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/escape-goat/-/escape-goat-2.1.1.tgz",
-      "integrity": "sha512-8/uIhbG12Csjy2JEW7D9pHbreaVaS/OpN3ycnyvElTdwM5n6GY6W6e2IPemfvGZeUMqZ9A/3GqIZMgKnBhAw/Q=="
+      "version": "2.1.1"
     },
     "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+      "version": "1.0.3"
     },
     "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "version": "1.0.5"
     },
     "eslint-scope": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz",
-      "integrity": "sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==",
       "requires": {
         "esrecurse": "^4.1.0",
         "estraverse": "^4.1.1"
@@ -10932,68 +9752,58 @@
     },
     "esrecurse": {
       "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
-      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "requires": {
         "estraverse": "^5.2.0"
       },
       "dependencies": {
         "estraverse": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ=="
+          "version": "5.2.0"
         }
       }
     },
     "estraverse": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
-      "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
+      "version": "4.3.0"
     },
     "esutils": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
-      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="
+      "version": "2.0.3"
     },
     "etag": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+      "version": "1.8.1"
     },
     "events": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
-      "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+      "version": "3.2.0"
     },
     "evp_bytestokey": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz",
-      "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
       "requires": {
         "md5.js": "^1.3.4",
         "safe-buffer": "^5.1.1"
       }
     },
     "execa": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
-      "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==",
+      "version": "4.1.0",
       "requires": {
-        "cross-spawn": "^7.0.3",
-        "get-stream": "^6.0.0",
-        "human-signals": "^2.1.0",
+        "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.1",
-        "onetime": "^5.1.2",
-        "signal-exit": "^3.0.3",
+        "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",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz",
-      "integrity": "sha1-t3c14xXOMPa27/D4OwQVGiJEliI=",
       "requires": {
         "debug": "^2.3.3",
         "define-property": "^0.2.5",
@@ -11002,12 +9812,33 @@
         "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",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
       "requires": {
         "accepts": "~1.3.7",
         "array-flatten": "1.1.1",
@@ -11041,25 +9872,34 @@
         "vary": "~1.1.2"
       },
       "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        "debug": {
+          "version": "2.6.9",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0"
         }
       }
     },
     "extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "version": "3.0.2",
       "requires": {
-        "is-extendable": "^0.1.0"
+        "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",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
-      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
       "requires": {
         "array-unique": "^0.3.2",
         "define-property": "^1.0.0",
@@ -11073,55 +9913,59 @@
       "dependencies": {
         "define-property": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
           "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",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "version": "3.1.3"
     },
     "fast-json-stable-stringify": {
-      "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=="
-    },
-    "fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow=="
+      "version": "2.1.0"
     },
     "figgy-pudding": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
-      "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw=="
+      "version": "3.5.2"
     },
     "file-uri-to-path": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
       "optional": true
     },
     "fill-range": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
-      "integrity": "sha1-1USBHUKPmOsGpj3EAtJAPDKMOPc=",
+      "version": "7.0.1",
       "requires": {
-        "extend-shallow": "^2.0.1",
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1",
-        "to-regex-range": "^2.1.0"
+        "to-regex-range": "^5.0.1"
       }
     },
     "finalhandler": {
       "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
       "requires": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
@@ -11130,12 +9974,21 @@
         "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",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz",
-      "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==",
       "requires": {
         "commondir": "^1.0.1",
         "make-dir": "^2.0.0",
@@ -11144,94 +9997,126 @@
     },
     "find-up": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz",
-      "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==",
       "requires": {
         "locate-path": "^3.0.0"
       }
     },
     "flush-write-stream": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
-      "integrity": "sha512-3Z4XhFZ3992uIq0XOqb9AreonueSYphE6oYbpt5+3u06JWklbsPkNv3ZKkP9Bz/r+1MWCaMoSQ28P85+1Yc77w==",
       "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",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA="
+      "version": "1.0.2"
     },
     "forwarded": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
-      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow=="
+      "version": "0.1.2"
     },
     "fragment-cache": {
       "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz",
-      "integrity": "sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk=",
       "requires": {
         "map-cache": "^0.2.2"
       }
     },
     "fresh": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+      "version": "0.5.2"
     },
     "from2": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
-      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
       "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",
-      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
-      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
       "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",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
+      "version": "1.0.0"
     },
     "fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "version": "2.1.3",
       "optional": true
     },
     "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "version": "1.1.1"
     },
     "gensync": {
-      "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=="
+      "version": "1.0.0-beta.2"
     },
     "get-caller-file": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
-      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+      "version": "2.0.5"
     },
     "get-intrinsic": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz",
-      "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==",
+      "version": "1.0.2",
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -11239,19 +10124,16 @@
       }
     },
     "get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg=="
+      "version": "4.1.0",
+      "requires": {
+        "pump": "^3.0.0"
+      }
     },
     "get-value": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
-      "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
+      "version": "2.0.6"
     },
     "glob": {
-      "version": "7.1.7",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz",
-      "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==",
+      "version": "7.1.6",
       "requires": {
         "fs.realpath": "^1.0.0",
         "inflight": "^1.0.4",
@@ -11262,30 +10144,22 @@
       }
     },
     "glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "version": "5.1.1",
       "requires": {
         "is-glob": "^4.0.1"
       }
     },
     "global-dirs": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/global-dirs/-/global-dirs-2.1.0.tgz",
-      "integrity": "sha512-MG6kdOUh/xBnyo9cJFeIKkLEc1AyFq42QTU4XiX51i2NEdxLxLWXIjEjmqKeSuKR7pAZjTqUVoT2b2huxVLgYQ==",
       "requires": {
         "ini": "1.3.7"
       }
     },
     "globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
+      "version": "11.12.0"
     },
     "got": {
       "version": "9.6.0",
-      "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz",
-      "integrity": "sha512-R7eWptXuGYxwijs0eV+v3o6+XH1IqVK8dJOEecQfTmkncw9AV4dcw/Dhxi8MdlqPthxxpZyizMzyg8RTmEsG+Q==",
       "requires": {
         "@sindresorhus/is": "^0.14.0",
         "@szmarczak/http-timer": "^1.1.2",
@@ -11298,45 +10172,25 @@
         "p-cancelable": "^1.0.0",
         "to-readable-stream": "^1.0.0",
         "url-parse-lax": "^3.0.0"
-      },
-      "dependencies": {
-        "get-stream": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        }
       }
     },
     "graceful-fs": {
-      "version": "4.2.6",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
-      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
+      "version": "4.2.4"
     },
     "has": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
       "requires": {
         "function-bind": "^1.1.1"
       }
     },
     "has-flag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "version": "3.0.0"
     },
     "has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw=="
+      "version": "1.0.1"
     },
     "has-value": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-value/-/has-value-1.0.0.tgz",
-      "integrity": "sha1-GLKB2lhbHFxR3vJMkw7SmgvmsXc=",
       "requires": {
         "get-value": "^2.0.6",
         "has-values": "^1.0.0",
@@ -11345,17 +10199,27 @@
     },
     "has-values": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-values/-/has-values-1.0.0.tgz",
-      "integrity": "sha1-lbC2P+whRmGab+V/51Yo1aOe/k8=",
       "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",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -11363,36 +10227,23 @@
       }
     },
     "has-yarn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/has-yarn/-/has-yarn-2.1.0.tgz",
-      "integrity": "sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw=="
+      "version": "2.1.0"
     },
     "hash-base": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.1.0.tgz",
-      "integrity": "sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==",
       "requires": {
         "inherits": "^2.0.4",
         "readable-stream": "^3.6.0",
         "safe-buffer": "^5.2.0"
       },
       "dependencies": {
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
+        "safe-buffer": {
+          "version": "5.2.1"
         }
       }
     },
     "hash.js": {
       "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz",
-      "integrity": "sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==",
       "requires": {
         "inherits": "^2.0.3",
         "minimalistic-assert": "^1.0.1"
@@ -11400,8 +10251,6 @@
     },
     "hmac-drbg": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
-      "integrity": "sha1-0nRXAQJabHdabFRXk+1QL8DGSaE=",
       "requires": {
         "hash.js": "^1.0.3",
         "minimalistic-assert": "^1.0.0",
@@ -11409,19 +10258,13 @@
       }
     },
     "hosted-git-info": {
-      "version": "2.8.9",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
-      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
+      "version": "2.8.9"
     },
     "http-cache-semantics": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
-      "integrity": "sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ=="
+      "version": "4.1.0"
     },
     "http-errors": {
       "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
       "requires": {
         "depd": "~1.1.2",
         "inherits": "2.0.3",
@@ -11431,70 +10274,43 @@
       },
       "dependencies": {
         "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+          "version": "2.0.3"
         }
       }
     },
     "https-browserify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
-      "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
+      "version": "1.0.0"
     },
     "human-signals": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
-      "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
+      "version": "1.1.1"
     },
     "iconv-lite": {
       "version": "0.4.24",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
       "requires": {
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
     "ieee754": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
-      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
+      "version": "1.2.1"
     },
     "iferr": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
-      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+      "version": "0.1.5"
     },
     "ignore-by-default": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk="
+      "version": "1.0.1"
     },
     "import-fresh": {
       "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
-      "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
       "requires": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
-      },
-      "dependencies": {
-        "resolve-from": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
-        }
       }
     },
     "import-lazy": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz",
-      "integrity": "sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM="
+      "version": "2.1.0"
     },
     "import-local": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
-      "integrity": "sha512-vjL3+w0oulAVZ0hBHnxa/Nm5TAurf9YLQJDhqRZyqb+VKGOB6LU8t9H1Nr5CIo16vh9XfJTOoHwU0B71S557gA==",
       "requires": {
         "pkg-dir": "^4.2.0",
         "resolve-cwd": "^3.0.0"
@@ -11502,8 +10318,6 @@
       "dependencies": {
         "find-up": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
           "requires": {
             "locate-path": "^5.0.0",
             "path-exists": "^4.0.0"
@@ -11511,29 +10325,21 @@
         },
         "locate-path": {
           "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
           "requires": {
             "p-locate": "^4.1.0"
           }
         },
         "p-locate": {
           "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
           "requires": {
             "p-limit": "^2.2.0"
           }
         },
         "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+          "version": "4.0.0"
         },
         "pkg-dir": {
           "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==",
           "requires": {
             "find-up": "^4.0.0"
           }
@@ -11541,168 +10347,122 @@
       }
     },
     "imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o="
+      "version": "0.1.4"
     },
     "infer-owner": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz",
-      "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A=="
+      "version": "1.0.4"
     },
     "inflight": {
       "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
       "requires": {
         "once": "^1.3.0",
         "wrappy": "1"
       }
     },
     "inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "version": "2.0.4"
     },
     "ini": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.7.tgz",
-      "integrity": "sha512-iKpRpXP+CrP2jyrxvg1kMUpXDyRUFDWurxbnVT1vQPx+Wz9uCYsMIqYuSBLV+PAaZG/d7kRLKRFc9oDMsH+mFQ=="
+      "version": "1.3.7"
     },
     "interpret": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/interpret/-/interpret-2.2.0.tgz",
-      "integrity": "sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw=="
+      "version": "2.2.0"
     },
     "ipaddr.js": {
-      "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=="
+      "version": "1.9.1"
     },
     "is-accessor-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
-      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+      "version": "0.1.6",
       "requires": {
-        "kind-of": "^6.0.0"
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
       }
     },
     "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+      "version": "0.2.1"
     },
     "is-binary-path": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "requires": {
         "binary-extensions": "^2.0.0"
       }
     },
     "is-buffer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-      "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
+      "version": "1.1.6"
     },
     "is-ci": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-2.0.0.tgz",
-      "integrity": "sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==",
       "requires": {
         "ci-info": "^2.0.0"
       }
     },
-    "is-core-module": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.4.0.tgz",
-      "integrity": "sha512-6A2fkfq1rfeQZjxrZJGerpLCTHRNEBiSgnu0+obeJpEPZRUooHgsizvzv0ZjJwOz3iWIHdJtVWJ/tmPr3D21/A==",
-      "requires": {
-        "has": "^1.0.3"
-      }
-    },
     "is-data-descriptor": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
-      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+      "version": "0.1.4",
       "requires": {
-        "kind-of": "^6.0.0"
+        "kind-of": "^3.0.2"
+      },
+      "dependencies": {
+        "kind-of": {
+          "version": "3.2.2",
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
       }
     },
     "is-descriptor": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
-      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+      "version": "0.1.6",
       "requires": {
-        "is-accessor-descriptor": "^1.0.0",
-        "is-data-descriptor": "^1.0.0",
-        "kind-of": "^6.0.2"
+        "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",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
+      "version": "0.1.1"
     },
     "is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+      "version": "2.1.1"
     },
     "is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+      "version": "2.0.0"
     },
     "is-glob": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
       "requires": {
         "is-extglob": "^2.1.1"
       }
     },
     "is-installed-globally": {
       "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.3.2.tgz",
-      "integrity": "sha512-wZ8x1js7Ia0kecP/CHM/3ABkAmujX7WPvQk6uu3Fly/Mk44pySulQpnHG46OMjHGXApINnV4QhY3SWnECO2z5g==",
       "requires": {
         "global-dirs": "^2.0.1",
         "is-path-inside": "^3.0.1"
       }
     },
     "is-npm": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-4.0.0.tgz",
-      "integrity": "sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig=="
+      "version": "4.0.0"
     },
     "is-number": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-      "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-      "requires": {
-        "kind-of": "^3.0.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
+      "version": "7.0.0"
     },
     "is-obj": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-2.0.0.tgz",
-      "integrity": "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="
+      "version": "2.0.0"
     },
     "is-path-inside": {
-      "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=="
+      "version": "3.0.2"
     },
     "is-plain-object": {
       "version": "2.0.4",
@@ -11713,118 +10473,79 @@
       }
     },
     "is-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-      "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw=="
+      "version": "2.0.0"
     },
     "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
+      "version": "1.0.0"
     },
     "is-windows": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
-      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
+      "version": "1.0.2"
     },
     "is-wsl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0="
+      "version": "1.1.0"
     },
     "is-yarn-global": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/is-yarn-global/-/is-yarn-global-0.3.0.tgz",
-      "integrity": "sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw=="
+      "version": "0.3.0"
     },
     "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+      "version": "1.0.0"
     },
     "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA="
+      "version": "2.0.0"
     },
     "isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+      "version": "3.0.1"
     },
     "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "version": "4.0.0"
     },
     "jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA=="
+      "version": "2.5.2"
     },
     "json-buffer": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
-      "integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg="
+      "version": "3.0.0"
     },
     "json-parse-better-errors": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+      "version": "1.0.2"
     },
     "json-parse-even-better-errors": {
-      "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=="
+      "version": "2.3.1"
     },
     "json-schema-traverse": {
-      "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=="
+      "version": "0.4.1"
     },
     "json5": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz",
-      "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==",
+      "version": "2.1.3",
       "requires": {
         "minimist": "^1.2.5"
       }
     },
     "keyv": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/keyv/-/keyv-3.1.0.tgz",
-      "integrity": "sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==",
       "requires": {
         "json-buffer": "3.0.0"
       }
     },
     "kind-of": {
-      "version": "6.0.3",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
+      "version": "6.0.3"
     },
     "latest-version": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-5.1.0.tgz",
-      "integrity": "sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==",
       "requires": {
         "package-json": "^6.3.0"
       }
     },
+    "leven": {
+      "version": "3.1.0"
+    },
     "lines-and-columns": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+      "version": "1.1.6"
     },
     "loader-runner": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz",
-      "integrity": "sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw=="
+      "version": "2.4.0"
     },
     "loader-utils": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz",
-      "integrity": "sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==",
       "requires": {
         "big.js": "^5.2.2",
         "emojis-list": "^3.0.0",
@@ -11833,8 +10554,6 @@
       "dependencies": {
         "json5": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -11843,65 +10562,47 @@
     },
     "locate-path": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
-      "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==",
       "requires": {
         "p-locate": "^3.0.0",
         "path-exists": "^3.0.0"
       }
     },
     "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+      "version": "4.17.21"
     },
     "loose-envify": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
     "lowercase-keys": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
-      "integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA=="
+      "version": "1.0.1"
     },
     "lru-cache": {
       "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
-      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
       "requires": {
         "yallist": "^3.0.2"
       }
     },
     "make-dir": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
-      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
       "requires": {
         "pify": "^4.0.1",
         "semver": "^5.6.0"
       }
     },
     "map-cache": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
-      "integrity": "sha1-wyq9C9ZSXZsFFkW7TyasXcmKDb8="
+      "version": "0.2.2"
     },
     "map-visit": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
-      "integrity": "sha1-7Nyo8TFE5mDxtb1B8S80edmN+48=",
       "requires": {
         "object-visit": "^1.0.0"
       }
     },
     "md5.js": {
       "version": "1.3.5",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
-      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
       "requires": {
         "hash-base": "^3.0.0",
         "inherits": "^2.0.1",
@@ -11909,38 +10610,46 @@
       }
     },
     "media-typer": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+      "version": "0.3.0"
     },
     "memory-fs": {
       "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
-      "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
       "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",
-      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
-      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+      "version": "1.0.1"
     },
     "merge-stream": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
-      "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
+      "version": "2.0.0"
     },
     "methods": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
-      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+      "version": "1.1.2"
     },
     "micromatch": {
       "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
-      "integrity": "sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==",
       "requires": {
         "arr-diff": "^4.0.0",
         "array-unique": "^0.3.2",
@@ -11957,98 +10666,116 @@
         "to-regex": "^3.0.2"
       },
       "dependencies": {
-        "define-property": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
+        "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": {
-            "is-descriptor": "^1.0.2",
-            "isobject": "^3.0.1"
+            "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"
+              }
+            }
           }
         },
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
+        "is-number": {
+          "version": "3.0.0",
           "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
           }
         },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+        "to-regex-range": {
+          "version": "2.1.1",
           "requires": {
-            "is-plain-object": "^2.0.4"
+            "is-number": "^3.0.0",
+            "repeat-string": "^1.6.1"
           }
         }
       }
     },
     "miller-rabin": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/miller-rabin/-/miller-rabin-4.0.1.tgz",
-      "integrity": "sha512-115fLhvZVqWwHPbClyntxEVfVDfl9DLLTuJvq3g2O/Oxi8AiNouAHvDSzHS0viUJc+V5vm3eq91Xwqn9dp4jRA==",
       "requires": {
         "bn.js": "^4.0.0",
         "brorand": "^1.0.1"
+      },
+      "dependencies": {
+        "bn.js": {
+          "version": "4.11.9"
+        }
       }
     },
     "mime": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
-      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+      "version": "1.6.0"
     },
     "mime-db": {
-      "version": "1.48.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz",
-      "integrity": "sha512-FM3QwxV+TnZYQ2aRqhlKBMHxk10lTbMt3bBkMAp54ddrNeVSfcQYOOKuGuy3Ddrm38I04If834fOUSq1yzslJQ=="
+      "version": "1.44.0"
     },
     "mime-types": {
-      "version": "2.1.31",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.31.tgz",
-      "integrity": "sha512-XGZnNzm3QvgKxa8dpzyhFTHmpP3l5YNusmne07VUOXxou9CqUqYa/HBy124RqtVh/O2pECas/MOcsDgpilPOPg==",
+      "version": "2.1.27",
       "requires": {
-        "mime-db": "1.48.0"
+        "mime-db": "1.44.0"
       }
     },
     "mimic-fn": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
-      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
+      "version": "2.1.0"
     },
     "mimic-response": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
-      "integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ=="
+      "version": "1.0.1"
     },
     "minimalistic-assert": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
-      "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A=="
+      "version": "1.0.1"
     },
     "minimalistic-crypto-utils": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz",
-      "integrity": "sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo="
+      "version": "1.0.1"
     },
     "minimatch": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
       "requires": {
         "brace-expansion": "^1.1.7"
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
+      "version": "1.2.5"
     },
     "mississippi": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-      "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
       "requires": {
         "concat-stream": "^1.5.0",
         "duplexify": "^3.4.2",
@@ -12064,8 +10791,6 @@
     },
     "mixin-deep": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.2.tgz",
-      "integrity": "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==",
       "requires": {
         "for-in": "^1.0.2",
         "is-extendable": "^1.0.1"
@@ -12073,8 +10798,6 @@
       "dependencies": {
         "is-extendable": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
           "requires": {
             "is-plain-object": "^2.0.4"
           }
@@ -12083,16 +10806,12 @@
     },
     "mkdirp": {
       "version": "0.5.5",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
-      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
       "requires": {
         "minimist": "^1.2.5"
       }
     },
     "move-concurrently": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
-      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
       "requires": {
         "aproba": "^1.1.1",
         "copy-concurrently": "^1.0.0",
@@ -12104,8 +10823,6 @@
       "dependencies": {
         "rimraf": {
           "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
           "requires": {
             "glob": "^7.1.3"
           }
@@ -12113,20 +10830,14 @@
       }
     },
     "ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "version": "2.1.2"
     },
     "nan": {
       "version": "2.14.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
-      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
       "optional": true
     },
     "nanomatch": {
       "version": "1.2.13",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
-      "integrity": "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==",
       "requires": {
         "arr-diff": "^4.0.0",
         "array-unique": "^0.3.2",
@@ -12139,50 +10850,16 @@
         "regex-not": "^1.0.0",
         "snapdragon": "^0.8.1",
         "to-regex": "^3.0.1"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-          "requires": {
-            "is-descriptor": "^1.0.2",
-            "isobject": "^3.0.1"
-          }
-        },
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
       }
     },
     "negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+      "version": "0.6.2"
     },
     "neo-async": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
-      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="
+      "version": "2.6.2"
     },
     "node-libs-browser": {
       "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/node-libs-browser/-/node-libs-browser-2.2.1.tgz",
-      "integrity": "sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q==",
       "requires": {
         "assert": "^1.1.1",
         "browserify-zlib": "^0.2.0",
@@ -12207,22 +10884,41 @@
         "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",
-      "resolved": "https://registry.npmjs.org/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz",
-      "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA="
+      "version": "1.0.0"
     },
     "node-releases": {
-      "version": "1.1.73",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.73.tgz",
-      "integrity": "sha512-uW7fodD6pyW2FZNZnp/Z3hvWKeEW1Y8R1+1CnErE8cXFXzl5blBOoVB41CvMer6P6Q0S5FXDwcHgFd1Wj0U9zg=="
+      "version": "1.1.72"
     },
     "nodemon": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-2.0.7.tgz",
-      "integrity": "sha512-XHzK69Awgnec9UzHr1kc8EomQh4sjTQ8oRf8TsGrSmHDx9/UmiGG9E/mM3BuTfNeFwdNBvrqQq/RHL0xIeyFOA==",
+      "version": "2.0.6",
       "requires": {
         "chokidar": "^3.2.2",
         "debug": "^3.2.6",
@@ -12238,86 +10934,58 @@
       "dependencies": {
         "debug": {
           "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
           "requires": {
             "ms": "^2.1.1"
           }
-        },
-        "ms": {
-          "version": "2.1.3",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
         }
       }
     },
     "nopt": {
       "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-      "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
       "requires": {
         "abbrev": "1"
       }
     },
     "normalize-package-data": {
       "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
-      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
       "requires": {
         "hosted-git-info": "^2.1.4",
         "resolve": "^1.10.0",
         "semver": "2 || 3 || 4 || 5",
         "validate-npm-package-license": "^3.0.1"
-      },
-      "dependencies": {
-        "resolve": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-          "requires": {
-            "is-core-module": "^2.2.0",
-            "path-parse": "^1.0.6"
-          }
-        }
       }
     },
     "normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+      "version": "3.0.0"
     },
     "normalize-url": {
-      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz",
-      "integrity": "sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA=="
+      "version": "4.5.0"
     },
     "npm-run-path": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
-      "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
       "requires": {
         "path-key": "^3.0.0"
       }
     },
     "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+      "version": "4.1.1"
     },
     "object-copy": {
       "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz",
-      "integrity": "sha1-fn2Fi3gb18mRpBupde04EnVOmYw=",
       "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",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -12325,22 +10993,16 @@
       }
     },
     "object-keys": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+      "version": "1.1.1"
     },
     "object-visit": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/object-visit/-/object-visit-1.0.1.tgz",
-      "integrity": "sha1-95xEk68MU3e1n+OdOV5BBC3QRbs=",
       "requires": {
         "isobject": "^3.0.0"
       }
     },
     "object.assign": {
       "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz",
-      "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==",
       "requires": {
         "call-bind": "^1.0.0",
         "define-properties": "^1.1.3",
@@ -12350,76 +11012,54 @@
     },
     "object.pick": {
       "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
-      "integrity": "sha1-h6EKxMFpS9Lhy/U1kaZhQftd10c=",
       "requires": {
         "isobject": "^3.0.1"
       }
     },
     "on-finished": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
       "requires": {
         "ee-first": "1.1.1"
       }
     },
     "on-headers": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
-      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA=="
+      "version": "1.0.2"
     },
     "once": {
       "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
       "requires": {
         "wrappy": "1"
       }
     },
     "onetime": {
       "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
-      "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
       "requires": {
         "mimic-fn": "^2.1.0"
       }
     },
     "os-browserify": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz",
-      "integrity": "sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc="
+      "version": "0.3.0"
     },
     "p-cancelable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-1.1.0.tgz",
-      "integrity": "sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw=="
+      "version": "1.1.0"
     },
     "p-limit": {
       "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
       "requires": {
         "p-try": "^2.0.0"
       }
     },
     "p-locate": {
       "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==",
       "requires": {
         "p-limit": "^2.0.0"
       }
     },
     "p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ=="
+      "version": "2.2.0"
     },
     "package-json": {
       "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-6.5.0.tgz",
-      "integrity": "sha512-k3bdm2n25tkyxcjSKzB5x8kfVxlMdgsbPr0GkZcwHsLpba6cBjqCt1KlcChKEvxHIcTB1FVMuwoijZ26xex5MQ==",
       "requires": {
         "got": "^9.6.0",
         "registry-auth-token": "^4.0.0",
@@ -12428,39 +11068,49 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "version": "6.3.0"
         }
       }
     },
     "pako": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
-      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+      "version": "1.0.11"
     },
     "parallel-transform": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
-      "integrity": "sha512-P2vSmIu38uIlvdcU7fDkyrxj33gTUy/ABO5ZUbGowxNCopBq/OoD42bP4UmMrJoPyk4Uqf0mu3mtWBhHCZD8yg==",
       "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",
-      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
-      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
       "requires": {
         "callsites": "^3.0.0"
       }
     },
     "parse-asn1": {
       "version": "5.1.6",
-      "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.6.tgz",
-      "integrity": "sha512-RnZRo1EPU6JBnra2vGHj0yhp6ebyjBZpmUCLHWiFhxlzvBCCpAuZ7elsBp1PVAbQN0/04VD/19rfzlBSwLstMw==",
       "requires": {
         "asn1.js": "^5.2.0",
         "browserify-aes": "^1.0.0",
@@ -12470,69 +11120,47 @@
       }
     },
     "parse-json": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
-      "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "version": "5.1.0",
       "requires": {
+        "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
-        "json-parse-better-errors": "^1.0.1"
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
       }
     },
     "parseurl": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
-      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+      "version": "1.3.3"
     },
     "pascalcase": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
-      "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ="
+      "version": "0.1.1"
     },
     "path-browserify": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz",
-      "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ=="
+      "version": "0.0.1"
     },
     "path-dirname": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
-      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=",
       "optional": true
     },
     "path-exists": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
-      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+      "version": "3.0.0"
     },
     "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
+      "version": "1.0.1"
     },
     "path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+      "version": "3.1.1"
     },
     "path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "version": "1.0.6"
     },
     "path-to-regexp": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
-      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+      "version": "0.1.7"
     },
     "path-type": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+      "version": "4.0.0"
     },
     "pbkdf2": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
-      "integrity": "sha512-iuh7L6jA7JEGu2WxDwtQP1ddOpaJNC4KlDEFfdQajSGgGPNi4OyDc2R7QnbY2bR9QjBVGwgvTdNJZoE7RaxUMA==",
+      "version": "3.1.1",
       "requires": {
         "create-hash": "^1.1.2",
         "create-hmac": "^1.1.4",
@@ -12542,85 +11170,57 @@
       }
     },
     "picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw=="
+      "version": "2.2.2"
     },
     "pify": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
-      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g=="
+      "version": "4.0.1"
     },
     "pirates": {
       "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.1.tgz",
-      "integrity": "sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==",
       "requires": {
         "node-modules-regexp": "^1.0.0"
       }
     },
     "pkg-dir": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-3.0.0.tgz",
-      "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==",
       "requires": {
         "find-up": "^3.0.0"
       }
     },
     "posix-character-classes": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
-      "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
+      "version": "0.1.1"
     },
     "prepend-http": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
-      "integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc="
+      "version": "2.0.0"
     },
     "prettier": {
       "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
       "dev": true
     },
     "process": {
-      "version": "0.11.10",
-      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-      "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
+      "version": "0.11.10"
     },
     "process-nextick-args": {
-      "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=="
+      "version": "2.0.1"
     },
     "promise-inflight": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
-      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+      "version": "1.0.1"
     },
     "proxy-addr": {
-      "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==",
+      "version": "2.0.6",
       "requires": {
-        "forwarded": "0.2.0",
+        "forwarded": "~0.1.2",
         "ipaddr.js": "1.9.1"
       }
     },
     "prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY="
+      "version": "1.0.1"
     },
     "pstree.remy": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz",
-      "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w=="
+      "version": "1.1.8"
     },
     "public-encrypt": {
       "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz",
-      "integrity": "sha512-zVpa8oKZSz5bTMTFClc1fQOnyyEzpl5ozpi1B5YcvBrdohMjH2rfsBtyXcuNuwjsDIXmBYlF2N5FlJYhR29t8Q==",
       "requires": {
         "bn.js": "^4.1.0",
         "browserify-rsa": "^4.0.0",
@@ -12628,12 +11228,15 @@
         "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",
-      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
       "requires": {
         "end-of-stream": "^1.1.0",
         "once": "^1.3.1"
@@ -12641,8 +11244,6 @@
     },
     "pumpify": {
       "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
-      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
       "requires": {
         "duplexify": "^3.6.0",
         "inherits": "^2.0.3",
@@ -12651,8 +11252,6 @@
       "dependencies": {
         "pump": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-          "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
           "requires": {
             "end-of-stream": "^1.1.0",
             "once": "^1.3.1"
@@ -12661,88 +11260,64 @@
       }
     },
     "punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4="
+      "version": "2.1.1"
     },
     "pupa": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/pupa/-/pupa-2.1.1.tgz",
-      "integrity": "sha512-l1jNAspIBSFqbT+y+5FosojNpVpF94nlI+wDUpqP9enwOTfHx9f0gh5nB96vl+6yTpsJsypeNrwfzPrKuHB41A==",
       "requires": {
         "escape-goat": "^2.0.0"
       }
     },
     "qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+      "version": "6.7.0"
     },
     "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA="
+      "version": "0.2.0"
     },
     "querystring-es3": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/querystring-es3/-/querystring-es3-0.2.1.tgz",
-      "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM="
+      "version": "0.2.1"
     },
     "randombytes": {
       "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
-      "integrity": "sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==",
       "requires": {
         "safe-buffer": "^5.1.0"
       }
     },
     "randomfill": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
-      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
       "requires": {
         "randombytes": "^2.0.5",
         "safe-buffer": "^5.1.0"
       }
     },
     "range-parser": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
-      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+      "version": "1.2.1"
     },
     "raw-body": {
       "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
       "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",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
       "requires": {
         "deep-extend": "^0.6.0",
         "ini": "~1.3.0",
         "minimist": "^1.2.0",
         "strip-json-comments": "~2.0.1"
-      },
-      "dependencies": {
-        "ini": {
-          "version": "1.3.8",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
-          "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
-        }
       }
     },
     "react": {
       "version": "18.0.0-alpha-7ec4c5597",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.0.0-alpha-7ec4c5597.tgz",
-      "integrity": "sha512-W0cK4JlO5HSyXfp7rPRprFCKJeN4oJ51MImnTbp3lS/1g17d837BiMKqqyr9veBst2C4yrq5oXx6EKv9UsAqbw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -12750,8 +11325,6 @@
     },
     "react-dom": {
       "version": "18.0.0-alpha-7ec4c5597",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.0.0-alpha-7ec4c5597.tgz",
-      "integrity": "sha512-ZF0yJcbpIBMw/2Mb28rn9KquQtxL5uzlfDENsWIDqDabRcnYJGY1jkckC6EG35KufRV4UC4/Rp2r1AKL8cDLJg==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
@@ -12760,143 +11333,88 @@
     },
     "react-error-boundary": {
       "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-3.1.3.tgz",
-      "integrity": "sha512-A+F9HHy9fvt9t8SNDlonq01prnU8AmkjvGKV4kk8seB9kU3xMEO8J/PQlLVmoOIDODl5U2kufSBs4vrWIqhsAA==",
       "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",
-      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-4.0.1.tgz",
-      "integrity": "sha1-ljYlN48+HE1IyFhytabsfV0JMjc=",
       "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",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
-          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
+          "version": "3.0.0"
         }
       }
     },
     "readable-stream": {
-      "version": "2.3.7",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
-      "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+      "version": "3.6.0",
       "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": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
-          "requires": {
-            "safe-buffer": "~5.1.0"
-          }
-        }
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
       }
     },
     "readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "version": "3.5.0",
       "requires": {
         "picomatch": "^2.2.1"
       }
     },
     "rechoir": {
       "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.0.tgz",
-      "integrity": "sha512-ADsDEH2bvbjltXEP+hTIAmeFekTFK0V2BTxMkok6qILyAJEXV0AFfoWcAq4yfll5VdIMd/RVXq0lR+wQi5ZU3Q==",
       "requires": {
         "resolve": "^1.9.0"
-      },
-      "dependencies": {
-        "resolve": {
-          "version": "1.20.0",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
-          "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==",
-          "requires": {
-            "is-core-module": "^2.2.0",
-            "path-parse": "^1.0.6"
-          }
-        }
       }
     },
+    "reduce-flatten": {
+      "version": "2.0.0"
+    },
     "regenerate": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
-      "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="
+      "version": "1.4.2"
     },
     "regenerate-unicode-properties": {
       "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
-      "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
       "requires": {
         "regenerate": "^1.4.0"
       }
     },
     "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
+      "version": "0.13.7"
     },
     "regenerator-transform": {
       "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
-      "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
       "requires": {
         "@babel/runtime": "^7.8.4"
       }
     },
     "regex-not": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
-      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
       "requires": {
         "extend-shallow": "^3.0.2",
         "safe-regex": "^1.1.0"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
       }
     },
     "regexpu-core": {
       "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz",
-      "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==",
       "requires": {
         "regenerate": "^1.4.0",
         "regenerate-unicode-properties": "^8.2.0",
@@ -12908,117 +11426,86 @@
     },
     "registry-auth-token": {
       "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-4.2.1.tgz",
-      "integrity": "sha512-6gkSb4U6aWJB4SF2ZvLb76yCBjcvufXBqvvEx1HbmKPkutswjW1xNVRY0+daljIYRbogN7O0etYSlbiaEQyMyw==",
       "requires": {
         "rc": "^1.2.8"
       }
     },
     "registry-url": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-5.1.0.tgz",
-      "integrity": "sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==",
       "requires": {
         "rc": "^1.2.8"
       }
     },
     "regjsgen": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.5.2.tgz",
-      "integrity": "sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A=="
+      "version": "0.5.2"
     },
     "regjsparser": {
-      "version": "0.6.9",
-      "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.9.tgz",
-      "integrity": "sha512-ZqbNRz1SNjLAiYuwY0zoXW8Ne675IX5q+YHioAGbCw4X96Mjl2+dcX9B2ciaeyYjViDAfvIjFpQjJgLttTEERQ==",
+      "version": "0.6.4",
       "requires": {
         "jsesc": "~0.5.0"
       },
       "dependencies": {
         "jsesc": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
-          "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0="
+          "version": "0.5.0"
         }
       }
     },
     "remove-trailing-separator": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
-      "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8=",
       "optional": true
     },
     "repeat-element": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.4.tgz",
-      "integrity": "sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ=="
+      "version": "1.1.3"
     },
     "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
+      "version": "1.6.1"
     },
     "require-directory": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
-      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+      "version": "2.1.1"
     },
     "require-main-filename": {
-      "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=="
+      "version": "2.0.0"
     },
     "resolve": {
       "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.12.0.tgz",
-      "integrity": "sha512-B/dOmuoAik5bKcD6s6nXDCjzUKnaDvdkRyAk6rsmsKLipWj4797iothd7jmmUhWTfinVMU+wc56rYKsit2Qy4w==",
       "requires": {
         "path-parse": "^1.0.6"
       }
     },
     "resolve-cwd": {
       "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==",
       "requires": {
         "resolve-from": "^5.0.0"
+      },
+      "dependencies": {
+        "resolve-from": {
+          "version": "5.0.0"
+        }
       }
     },
     "resolve-from": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz",
-      "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw=="
+      "version": "4.0.0"
     },
     "resolve-url": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
-      "integrity": "sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo="
+      "version": "0.2.1"
     },
     "responselike": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
-      "integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
       "requires": {
         "lowercase-keys": "^1.0.0"
       }
     },
     "ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg=="
+      "version": "0.1.15"
     },
     "rimraf": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
       "requires": {
         "glob": "^7.1.3"
       }
     },
     "ripemd160": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/ripemd160/-/ripemd160-2.0.2.tgz",
-      "integrity": "sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==",
       "requires": {
         "hash-base": "^3.0.0",
         "inherits": "^2.0.1"
@@ -13026,81 +11513,59 @@
     },
     "run-queue": {
       "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
-      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
       "requires": {
         "aproba": "^1.1.1"
       }
     },
     "rxjs": {
-      "version": "6.6.7",
-      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
-      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "version": "6.6.3",
       "requires": {
         "tslib": "^1.9.0"
       }
     },
     "safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ=="
+      "version": "5.1.2"
     },
     "safe-regex": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
-      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
       "requires": {
         "ret": "~0.1.10"
       }
     },
     "safer-buffer": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "version": "2.1.2"
     },
     "scheduler": {
       "version": "0.21.0-alpha-7ec4c5597",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.21.0-alpha-7ec4c5597.tgz",
-      "integrity": "sha512-UGZQDpLhPL1o2U4Kujt3WkDUWC3iNIm4OcErqv1f/fq8RQ/VxgmhlBryiZMaNF06qm3jXARebUWnlK3Tn2Sn5w==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
       }
     },
     "schema-utils": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
-      "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+      "version": "2.7.1",
       "requires": {
-        "ajv": "^6.1.0",
-        "ajv-errors": "^1.0.0",
-        "ajv-keywords": "^3.1.0"
+        "@types/json-schema": "^7.0.5",
+        "ajv": "^6.12.4",
+        "ajv-keywords": "^3.5.2"
       }
     },
     "semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
+      "version": "5.7.1"
     },
     "semver-diff": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-3.1.1.tgz",
-      "integrity": "sha512-GX0Ix/CJcHyB8c4ykpHGIAvLyOwOobtM/8d+TQkAd81/bEjgPHrfba41Vpesr7jX/t8Uh+R3EX9eAS5be+jQYg==",
       "requires": {
         "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=="
+          "version": "6.3.0"
         }
       }
     },
     "send": {
       "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
       "requires": {
         "debug": "2.6.9",
         "depd": "~1.1.2",
@@ -13117,37 +11582,30 @@
         "statuses": "~1.5.0"
       },
       "dependencies": {
-        "http-errors": {
-          "version": "1.7.3",
-          "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
-          "integrity": "sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==",
+        "debug": {
+          "version": "2.6.9",
           "requires": {
-            "depd": "~1.1.2",
-            "inherits": "2.0.4",
-            "setprototypeof": "1.1.1",
-            "statuses": ">= 1.5.0 < 2",
-            "toidentifier": "1.0.0"
+            "ms": "2.0.0"
+          },
+          "dependencies": {
+            "ms": {
+              "version": "2.0.0"
+            }
           }
         },
         "ms": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+          "version": "2.1.1"
         }
       }
     },
     "serialize-javascript": {
       "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz",
-      "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==",
       "requires": {
         "randombytes": "^2.1.0"
       }
     },
     "serve-static": {
       "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
       "requires": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
@@ -13156,35 +11614,33 @@
       }
     },
     "set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+      "version": "2.0.0"
     },
     "set-value": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
-      "integrity": "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==",
       "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",
-      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+      "version": "1.0.5"
     },
     "setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+      "version": "1.1.1"
     },
     "sha.js": {
       "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
-      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
       "requires": {
         "inherits": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -13200,26 +11656,18 @@
     },
     "shebang-command": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "requires": {
         "shebang-regex": "^3.0.0"
       }
     },
     "shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+      "version": "3.0.0"
     },
     "signal-exit": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA=="
+      "version": "3.0.3"
     },
     "snapdragon": {
       "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
-      "integrity": "sha512-FtyOnWN/wCHTVXOMwvSv26d+ko5vWlIDD6zoUJ7LW8vh+ZBC8QdljveRP+crNrtBwioEUWy/4dMtbBjA4ioNlg==",
       "requires": {
         "base": "^0.11.1",
         "debug": "^2.2.0",
@@ -13229,12 +11677,33 @@
         "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",
-      "resolved": "https://registry.npmjs.org/snapdragon-node/-/snapdragon-node-2.1.1.tgz",
-      "integrity": "sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==",
       "requires": {
         "define-property": "^1.0.0",
         "isobject": "^3.0.0",
@@ -13243,26 +11712,40 @@
       "dependencies": {
         "define-property": {
           "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
           "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",
-      "resolved": "https://registry.npmjs.org/snapdragon-util/-/snapdragon-util-3.0.1.tgz",
-      "integrity": "sha512-mbKkMdQKsjX4BAL4bRYTj21edOf8cN7XHdYUJEe+Zn99hVEYcMvKPct1IqNe7+AZPirn8BCDOQBHQZknqmKlZQ==",
       "requires": {
         "kind-of": "^3.2.0"
       },
       "dependencies": {
         "kind-of": {
           "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -13270,19 +11753,13 @@
       }
     },
     "source-list-map": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
-      "integrity": "sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw=="
+      "version": "2.0.1"
     },
     "source-map": {
-      "version": "0.5.7",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+      "version": "0.5.7"
     },
     "source-map-resolve": {
       "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
-      "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
       "requires": {
         "atob": "^2.1.2",
         "decode-uri-component": "^0.2.0",
@@ -13293,120 +11770,101 @@
     },
     "source-map-support": {
       "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
       "requires": {
         "buffer-from": "^1.0.0",
         "source-map": "^0.6.0"
       },
       "dependencies": {
         "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "version": "0.6.1"
         }
       }
     },
     "source-map-url": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
-      "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
+      "version": "0.4.0"
     },
     "spawn-command": {
-      "version": "0.0.2-1",
-      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
-      "integrity": "sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A="
+      "version": "0.0.2-1"
     },
     "spdx-correct": {
       "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
-      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
       "requires": {
         "spdx-expression-parse": "^3.0.0",
         "spdx-license-ids": "^3.0.0"
       }
     },
     "spdx-exceptions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
-      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A=="
+      "version": "2.3.0"
     },
     "spdx-expression-parse": {
       "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
       "requires": {
         "spdx-exceptions": "^2.1.0",
         "spdx-license-ids": "^3.0.0"
       }
     },
     "spdx-license-ids": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz",
-      "integrity": "sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ=="
+      "version": "3.0.7"
     },
     "split-string": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
-      "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
       "requires": {
         "extend-shallow": "^3.0.0"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
       }
     },
     "ssri": {
       "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.2.tgz",
-      "integrity": "sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==",
       "requires": {
         "figgy-pudding": "^3.5.1"
       }
     },
     "static-extend": {
       "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
-      "integrity": "sha1-YICcOcv/VTNyJv1eC1IPNB8ftcY=",
       "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",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+      "version": "1.5.0"
     },
     "stream-browserify": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
-      "integrity": "sha512-nX6hmklHs/gr2FuxYDltq8fJA1GDlxKQCz8O/IM4atRqBH8OORmBNgfvW5gG10GT/qQ9u0CzIvr2X5Pkt6ntqg==",
       "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",
-      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
-      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
       "requires": {
         "end-of-stream": "^1.1.0",
         "stream-shift": "^1.0.0"
@@ -13414,33 +11872,50 @@
     },
     "stream-http": {
       "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.3.tgz",
-      "integrity": "sha512-+TSkfINHDo4J+ZobQLWiMouQYB+UVYFttRA94FpEzzJ7ZdqcL4uUUQ7WkdkI4DSozGmgBUE/a47L+38PenXhUw==",
       "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",
-      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
-      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
+      "version": "1.0.1"
     },
     "string_decoder": {
       "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==",
       "requires": {
         "safe-buffer": "~5.2.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1"
+        }
       }
     },
     "string-width": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz",
-      "integrity": "sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==",
       "requires": {
         "emoji-regex": "^7.0.1",
         "is-fullwidth-code-point": "^2.0.0",
@@ -13449,44 +11924,39 @@
     },
     "strip-ansi": {
       "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
-      "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
       "requires": {
         "ansi-regex": "^4.1.0"
       }
     },
     "strip-final-newline": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-2.0.0.tgz",
-      "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA=="
+      "version": "2.0.0"
     },
     "strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo="
+      "version": "2.0.1"
     },
     "supports-color": {
       "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
-      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
       "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",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA=="
+      "version": "1.1.3"
     },
     "term-size": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/term-size/-/term-size-2.2.1.tgz",
-      "integrity": "sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg=="
+      "version": "2.2.1"
     },
     "terser": {
       "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz",
-      "integrity": "sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==",
       "requires": {
         "commander": "^2.20.0",
         "source-map": "~0.6.1",
@@ -13494,21 +11964,15 @@
       },
       "dependencies": {
         "commander": {
-          "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=="
+          "version": "2.20.3"
         },
         "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "version": "0.6.1"
         }
       }
     },
     "terser-webpack-plugin": {
       "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz",
-      "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==",
       "requires": {
         "cacache": "^12.0.2",
         "find-cache-dir": "^2.1.0",
@@ -13521,52 +11985,66 @@
         "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",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "version": "0.6.1"
         }
       }
     },
     "through2": {
       "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
       "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",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
-      "integrity": "sha512-9phl76Cqm6FhSX9Xe1ZUAMLtm1BLkKj2Qd5ApyWkXzsMRaA7dgr81kf4wJmQf/hAvg8EEyJxDo3du/0KlhPiKQ==",
       "requires": {
         "setimmediate": "^1.0.4"
       }
     },
     "to-arraybuffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
-      "integrity": "sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M="
+      "version": "1.0.1"
     },
     "to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+      "version": "2.0.0"
     },
     "to-object-path": {
       "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/to-object-path/-/to-object-path-0.3.0.tgz",
-      "integrity": "sha1-KXWIt7Dn4KwI4E5nL4XB9JmeF68=",
       "requires": {
         "kind-of": "^3.0.2"
       },
       "dependencies": {
         "kind-of": {
           "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -13574,149 +12052,98 @@
       }
     },
     "to-readable-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/to-readable-stream/-/to-readable-stream-1.0.0.tgz",
-      "integrity": "sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q=="
+      "version": "1.0.0"
     },
     "to-regex": {
       "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
-      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
       "requires": {
         "define-property": "^2.0.2",
         "extend-shallow": "^3.0.2",
         "regex-not": "^1.0.2",
         "safe-regex": "^1.1.0"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
-          "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
-          "requires": {
-            "is-descriptor": "^1.0.2",
-            "isobject": "^3.0.1"
-          }
-        },
-        "extend-shallow": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
-          "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
-          "requires": {
-            "assign-symbols": "^1.0.0",
-            "is-extendable": "^1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "requires": {
-            "is-plain-object": "^2.0.4"
-          }
-        }
       }
     },
     "to-regex-range": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-2.1.1.tgz",
-      "integrity": "sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=",
+      "version": "5.0.1",
       "requires": {
-        "is-number": "^3.0.0",
-        "repeat-string": "^1.6.1"
+        "is-number": "^7.0.0"
       }
     },
     "toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+      "version": "1.0.0"
     },
     "touch": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz",
-      "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==",
       "requires": {
         "nopt": "~1.0.10"
       }
     },
     "tree-kill": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
-      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="
+      "version": "1.2.2"
     },
     "tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "version": "1.14.1"
     },
     "tty-browserify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz",
-      "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+      "version": "0.0.0"
     },
     "type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA=="
+      "version": "0.8.1"
     },
     "type-is": {
       "version": "1.6.18",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
-      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
       "requires": {
         "media-typer": "0.3.0",
         "mime-types": "~2.1.24"
       }
     },
     "typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+      "version": "0.0.6"
     },
     "typedarray-to-buffer": {
       "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz",
-      "integrity": "sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==",
       "requires": {
         "is-typedarray": "^1.0.0"
       }
     },
+    "typical": {
+      "version": "5.2.0"
+    },
     "undefsafe": {
       "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
-      "integrity": "sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==",
       "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",
-      "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-jDrNnXWHd4oHiTZnx/ZG7gtUTVp+gCcTTKr8L0HjlwphROEW3+Him+IpvC+xcJEFegapiMZyZe02CyuOnRmbnQ=="
+      "version": "1.0.4"
     },
     "unicode-match-property-ecmascript": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-1.0.4.tgz",
-      "integrity": "sha512-L4Qoh15vTfntsn4P1zqnHulG0LdXgjSO035fEpdtp6YxXhMT51Q6vgM5lYdG/5X3MjS+k/Y9Xw4SFCY9IkR0rg==",
       "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",
-      "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
-      "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ=="
+      "version": "1.2.0"
     },
     "unicode-property-aliases-ecmascript": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz",
-      "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg=="
+      "version": "1.1.0"
     },
     "union-value": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",
-      "integrity": "sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==",
       "requires": {
         "arr-union": "^3.1.0",
         "get-value": "^2.0.6",
@@ -13726,37 +12153,27 @@
     },
     "unique-filename": {
       "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
       "requires": {
         "unique-slug": "^2.0.0"
       }
     },
     "unique-slug": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.2.tgz",
-      "integrity": "sha512-zoWr9ObaxALD3DOPfjPSqxt4fnZiWblxHIgeWqW8x7UqDzEtHEQLzji2cuJYQFCU6KmoJikOYAZlrTHHebjx2w==",
       "requires": {
         "imurmurhash": "^0.1.4"
       }
     },
     "unique-string": {
       "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
-      "integrity": "sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==",
       "requires": {
         "crypto-random-string": "^2.0.0"
       }
     },
     "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+      "version": "1.0.0"
     },
     "unset-value": {
       "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
-      "integrity": "sha1-g3aHP30jNRef+x5vw6jtDfyKtVk=",
       "requires": {
         "has-value": "^0.3.1",
         "isobject": "^3.0.0"
@@ -13764,8 +12181,6 @@
       "dependencies": {
         "has-value": {
           "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/has-value/-/has-value-0.3.1.tgz",
-          "integrity": "sha1-ex9YutpiyoJ+wKIHgCVlSEWZXh8=",
           "requires": {
             "get-value": "^2.0.3",
             "has-values": "^0.1.4",
@@ -13774,8 +12189,6 @@
           "dependencies": {
             "isobject": {
               "version": "2.1.0",
-              "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-              "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
               "requires": {
                 "isarray": "1.0.0"
               }
@@ -13783,22 +12196,16 @@
           }
         },
         "has-values": {
-          "version": "0.1.4",
-          "resolved": "https://registry.npmjs.org/has-values/-/has-values-0.1.4.tgz",
-          "integrity": "sha1-bWHeldkd/Km5oCCJrThL/49it3E="
+          "version": "0.1.4"
         }
       }
     },
     "upath": {
       "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
-      "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==",
       "optional": true
     },
     "update-notifier": {
       "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-4.1.3.tgz",
-      "integrity": "sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==",
       "requires": {
         "boxen": "^4.2.0",
         "chalk": "^3.0.0",
@@ -13817,16 +12224,12 @@
       "dependencies": {
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "requires": {
             "color-convert": "^2.0.1"
           }
         },
         "chalk": {
           "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
           "requires": {
             "ansi-styles": "^4.1.0",
             "supports-color": "^7.1.0"
@@ -13834,26 +12237,18 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "requires": {
             "color-name": "~1.1.4"
           }
         },
         "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+          "version": "1.1.4"
         },
         "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+          "version": "4.0.0"
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "requires": {
             "has-flag": "^4.0.0"
           }
@@ -13861,107 +12256,70 @@
       }
     },
     "uri-js": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
-      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "version": "4.4.0",
       "requires": {
         "punycode": "^2.1.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-          "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-        }
       }
     },
     "urix": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
-      "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI="
+      "version": "0.1.0"
     },
     "url": {
       "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
       "requires": {
         "punycode": "1.3.2",
         "querystring": "0.2.0"
       },
       "dependencies": {
         "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0="
+          "version": "1.3.2"
         }
       }
     },
     "url-parse-lax": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
-      "integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
       "requires": {
         "prepend-http": "^2.0.0"
       }
     },
     "use": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
-      "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
+      "version": "3.1.1"
     },
     "util": {
       "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
-      "integrity": "sha512-HShAsny+zS2TZfaXxD9tYj4HQGlBezXZMZuM/S5PKLLoZkShZiGk9o5CzukI1LVHZvjdvZ2Sj1aW/Ndn2NB/HQ==",
       "requires": {
         "inherits": "2.0.3"
       },
       "dependencies": {
         "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+          "version": "2.0.3"
         }
       }
     },
     "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+      "version": "1.0.2"
     },
     "utils-merge": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
-      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+      "version": "1.0.1"
     },
     "v8-compile-cache": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz",
-      "integrity": "sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA=="
+      "version": "2.2.0"
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
       "requires": {
         "spdx-correct": "^3.0.0",
         "spdx-expression-parse": "^3.0.0"
       }
     },
     "vary": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+      "version": "1.1.2"
     },
     "vm-browserify": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
-      "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
+      "version": "1.1.2"
     },
     "watchpack": {
       "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
-      "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "requires": {
         "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
@@ -13971,8 +12329,6 @@
     },
     "watchpack-chokidar2": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
-      "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
       "optional": true,
       "requires": {
         "chokidar": "^2.1.8"
@@ -13980,8 +12336,6 @@
       "dependencies": {
         "anymatch": {
           "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
-          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
           "optional": true,
           "requires": {
             "micromatch": "^3.1.4",
@@ -13990,8 +12344,6 @@
           "dependencies": {
             "normalize-path": {
               "version": "2.1.1",
-              "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-              "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
               "optional": true,
               "requires": {
                 "remove-trailing-separator": "^1.0.1"
@@ -14001,14 +12353,26 @@
         },
         "binary-extensions": {
           "version": "1.13.1",
-          "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
-          "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
           "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",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
-          "integrity": "sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==",
           "optional": true,
           "requires": {
             "anymatch": "^2.0.0",
@@ -14025,10 +12389,25 @@
             "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",
-          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
-          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "optional": true,
           "requires": {
             "bindings": "^1.5.0",
@@ -14037,8 +12416,6 @@
         },
         "glob-parent": {
           "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
-          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
           "optional": true,
           "requires": {
             "is-glob": "^3.1.0",
@@ -14047,8 +12424,6 @@
           "dependencies": {
             "is-glob": {
               "version": "3.1.0",
-              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
               "optional": true,
               "requires": {
                 "is-extglob": "^2.1.0"
@@ -14058,30 +12433,66 @@
         },
         "is-binary-path": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-          "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
           "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",
-          "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.2.1.tgz",
-          "integrity": "sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==",
           "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",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-4.44.2.tgz",
-      "integrity": "sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q==",
       "requires": {
         "@webassemblyjs/ast": "1.9.0",
         "@webassemblyjs/helper-module-context": "1.9.0",
@@ -14106,93 +12517,85 @@
         "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.7.2",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.7.2.tgz",
-      "integrity": "sha512-mEoLmnmOIZQNiRl0ebnjzQ74Hk0iKS5SiEEnpq3dRezoyR3yPaeQZCMCe+db4524pj1Pd5ghZXjT41KLzIhSLw==",
-      "requires": {
-        "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.4",
-        "@webpack-cli/info": "^1.3.0",
-        "@webpack-cli/serve": "^1.5.1",
+      "version": "4.2.0",
+      "requires": {
+        "@webpack-cli/info": "^1.1.0",
+        "@webpack-cli/serve": "^1.1.0",
         "colorette": "^1.2.1",
-        "commander": "^7.0.0",
-        "execa": "^5.0.0",
-        "fastest-levenshtein": "^1.0.12",
+        "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": "^5.7.3"
+        "webpack-merge": "^4.2.2"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "6.2.1"
+        }
       }
     },
     "webpack-merge": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
-      "integrity": "sha512-/SaI7xY0831XwP6kzuwhKWVKDP9t1QY1h65lAFLbZqMPIuYcD9QAW4u9STIbU9kaJbPBB/geU/gLr1wDjOhQ+Q==",
+      "version": "4.2.2",
       "requires": {
-        "clone-deep": "^4.0.1",
-        "wildcard": "^2.0.0"
+        "lodash": "^4.17.15"
       }
     },
     "webpack-sources": {
       "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
-      "integrity": "sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==",
       "requires": {
         "source-list-map": "^2.0.0",
         "source-map": "~0.6.1"
       },
       "dependencies": {
         "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "version": "0.6.1"
         }
       }
     },
     "which": {
       "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "requires": {
         "isexe": "^2.0.0"
       }
     },
     "which-module": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz",
-      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+      "version": "2.0.0"
     },
     "widest-line": {
       "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-3.1.0.tgz",
-      "integrity": "sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==",
       "requires": {
         "string-width": "^4.0.0"
       },
       "dependencies": {
         "ansi-regex": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+          "version": "5.0.0"
         },
         "emoji-regex": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-          "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+          "version": "8.0.0"
         },
         "is-fullwidth-code-point": {
-          "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=="
+          "version": "3.0.0"
         },
         "string-width": {
-          "version": "4.2.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-          "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+          "version": "4.2.0",
           "requires": {
             "emoji-regex": "^8.0.0",
             "is-fullwidth-code-point": "^3.0.0",
@@ -14201,31 +12604,27 @@
         },
         "strip-ansi": {
           "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
           "requires": {
             "ansi-regex": "^5.0.0"
           }
         }
       }
     },
-    "wildcard": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
-      "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw=="
+    "wordwrapjs": {
+      "version": "4.0.0",
+      "requires": {
+        "reduce-flatten": "^2.0.0",
+        "typical": "^5.0.0"
+      }
     },
     "worker-farm": {
       "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
-      "integrity": "sha512-rvw3QTZc8lAxyVrqcSGVm5yP/IJ2UcB3U0graE3LCFoZ0Yn2x4EoVSqJKdB/T5M+FLcRPjz4TDacRf3OCfNUzw==",
       "requires": {
         "errno": "~0.1.7"
       }
     },
     "wrap-ansi": {
       "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
-      "integrity": "sha512-QC1/iN/2/RPVJ5jYK8BGttj5z83LmSKmvbvrXPNCLZSEb32KKVDJDl/MOt2N01qU2H/FkzEa9PKto1BqDjtd7Q==",
       "requires": {
         "ansi-styles": "^3.2.0",
         "string-width": "^3.0.0",
@@ -14233,14 +12632,10 @@
       }
     },
     "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
+      "version": "1.0.2"
     },
     "write-file-atomic": {
       "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
-      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
       "requires": {
         "imurmurhash": "^0.1.4",
         "is-typedarray": "^1.0.0",
@@ -14249,34 +12644,22 @@
       }
     },
     "xdg-basedir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz",
-      "integrity": "sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q=="
+      "version": "4.0.0"
     },
     "xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ=="
+      "version": "4.0.2"
     },
     "y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ=="
+      "version": "4.0.1"
     },
     "yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+      "version": "3.1.1"
     },
     "yaml": {
-      "version": "1.10.2",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
-      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
+      "version": "1.10.0"
     },
     "yargs": {
       "version": "13.3.2",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz",
-      "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==",
       "requires": {
         "cliui": "^5.0.0",
         "find-up": "^3.0.0",
@@ -14292,8 +12675,6 @@
     },
     "yargs-parser": {
       "version": "13.1.2",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz",
-      "integrity": "sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==",
       "requires": {
         "camelcase": "^5.0.0",
         "decamelize": "^1.2.0"

From bd0a963445715f2963d4a9e3a0485e56cbe60653 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 16 Jun 2021 16:29:51 -0400
Subject: [PATCH 0632/1603] Throw when `act` is used in production (#21686)

Upgrades the deprecation warning to a runtime error.

I did it this way instead of removing the export so the type is the same
in both builds. It will get dead code eliminated regardless.
---
 fixtures/legacy-jsx-runtimes/setupTests.js    | 10 ----
 .../src/__tests__/ReactTestUtilsAct-test.js   | 46 +++++++++++--------
 ...ReactTestUtilsActUnmockedScheduler-test.js |  5 ++
 .../src/test-utils/ReactTestUtilsPublicAct.js | 13 ++----
 .../src/ReactFiberWorkLoop.new.js             | 12 ++---
 .../src/ReactFiberWorkLoop.old.js             | 12 ++---
 .../ReactFiberHostContext-test.internal.js    |  2 +
 .../__tests__/ReactUpdaters-test.internal.js  | 35 +++++++-------
 .../__tests__/ReactTestRendererAct-test.js    |  4 ++
 .../ReactCoffeeScriptClass-test.coffee        |  2 +-
 .../react/src/__tests__/ReactES6Class-test.js |  2 +-
 .../__tests__/ReactTypeScriptClass-test.ts    | 21 +++++----
 .../testDefinitions/ReactDOMTestUtils.d.ts    |  2 +-
 scripts/error-codes/codes.json                |  3 +-
 scripts/jest/shouldIgnoreConsoleError.js      | 10 ----
 15 files changed, 87 insertions(+), 92 deletions(-)

diff --git a/fixtures/legacy-jsx-runtimes/setupTests.js b/fixtures/legacy-jsx-runtimes/setupTests.js
index 85a21cc15d91..3e675b3f7c2c 100644
--- a/fixtures/legacy-jsx-runtimes/setupTests.js
+++ b/fixtures/legacy-jsx-runtimes/setupTests.js
@@ -33,16 +33,6 @@ function shouldIgnoreConsoleError(format, args) {
       // They are noisy too so we'll try to ignore them.
       return true;
     }
-    if (
-      format.indexOf(
-        'act(...) is not supported in production builds of React'
-      ) === 0
-    ) {
-      // We don't yet support act() for prod builds, and warn for it.
-      // But we'd like to use act() ourselves for prod builds.
-      // Let's ignore the warning and #yolo.
-      return true;
-    }
   }
   // Looks legit
   return false;
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index d2ea73e09800..2dabcfc5281b 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -135,6 +135,7 @@ function runActTests(label, render, unmount, rerender) {
     });
 
     describe('sync', () => {
+      // @gate __DEV__
       it('can use act to flush effects', () => {
         function App() {
           React.useEffect(() => {
@@ -150,6 +151,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(Scheduler).toHaveYielded([100]);
       });
 
+      // @gate __DEV__
       it('flushes effects on every call', async () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
@@ -186,6 +188,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(button.innerHTML).toBe('5');
       });
 
+      // @gate __DEV__
       it("should keep flushing effects until they're done", () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
@@ -204,6 +207,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(container.innerHTML).toBe('5');
       });
 
+      // @gate __DEV__
       it('should flush effects only on exiting the outermost act', () => {
         function App() {
           React.useEffect(() => {
@@ -224,6 +228,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(Scheduler).toHaveYielded([0]);
       });
 
+      // @gate __DEV__
       it('warns if a setState is called outside of act(...)', () => {
         let setValue = null;
         function App() {
@@ -250,6 +255,7 @@ function runActTests(label, render, unmount, rerender) {
           jest.useRealTimers();
         });
 
+        // @gate __DEV__
         it('lets a ticker update', () => {
           function App() {
             const [toggle, setToggle] = React.useState(0);
@@ -272,6 +278,7 @@ function runActTests(label, render, unmount, rerender) {
           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);
@@ -294,6 +301,7 @@ function runActTests(label, render, unmount, rerender) {
           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.
@@ -317,6 +325,7 @@ function runActTests(label, render, unmount, rerender) {
           expect(container.innerHTML).toBe('5');
         });
 
+        // @gate __DEV__
         it('flushes immediate re-renders with act', () => {
           function App() {
             const [ctr, setCtr] = React.useState(0);
@@ -346,6 +355,7 @@ function runActTests(label, render, unmount, rerender) {
         });
       });
 
+      // @gate __DEV__
       it('warns if you return a value inside act', () => {
         expect(() => act(() => null)).toErrorDev(
           [
@@ -361,6 +371,7 @@ function runActTests(label, render, unmount, rerender) {
         );
       });
 
+      // @gate __DEV__
       it('warns if you try to await a sync .act call', () => {
         expect(() => act(() => {}).then(() => {})).toErrorDev(
           [
@@ -372,6 +383,7 @@ function runActTests(label, render, unmount, rerender) {
     });
 
     describe('asynchronous tests', () => {
+      // @gate __DEV__
       it('works with timeouts', async () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
@@ -396,6 +408,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(container.innerHTML).toBe('1');
       });
 
+      // @gate __DEV__
       it('flushes microtasks before exiting', async () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
@@ -418,6 +431,7 @@ function runActTests(label, render, unmount, rerender) {
         expect(container.innerHTML).toEqual('1');
       });
 
+      // @gate __DEV__
       it('warns if you do not await an act call', async () => {
         spyOnDevAndProd(console, 'error');
         act(async () => {});
@@ -431,6 +445,7 @@ function runActTests(label, render, unmount, rerender) {
         }
       });
 
+      // @gate __DEV__
       it('warns if you try to interleave multiple act calls', async () => {
         spyOnDevAndProd(console, 'error');
         // let's try to cheat and spin off a 'thread' with an act call
@@ -450,6 +465,7 @@ function runActTests(label, render, unmount, rerender) {
         }
       });
 
+      // @gate __DEV__
       it('async commits and effects are guaranteed to be flushed', async () => {
         function App() {
           const [state, setState] = React.useState(0);
@@ -475,6 +491,7 @@ function runActTests(label, render, unmount, rerender) {
         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.
@@ -501,6 +518,7 @@ function runActTests(label, render, unmount, rerender) {
     });
 
     describe('error propagation', () => {
+      // @gate __DEV__
       it('propagates errors - sync', () => {
         let err;
         try {
@@ -515,6 +533,7 @@ function runActTests(label, render, unmount, rerender) {
         }
       });
 
+      // @gate __DEV__
       it('should propagate errors from effects - sync', () => {
         function App() {
           React.useEffect(() => {
@@ -536,6 +555,7 @@ function runActTests(label, render, unmount, rerender) {
         }
       });
 
+      // @gate __DEV__
       it('propagates errors - async', async () => {
         let err;
         try {
@@ -551,6 +571,7 @@ function runActTests(label, render, unmount, rerender) {
         }
       });
 
+      // @gate __DEV__
       it('should cleanup after errors - sync', () => {
         function App() {
           React.useEffect(() => {
@@ -576,6 +597,7 @@ function runActTests(label, render, unmount, rerender) {
         }
       });
 
+      // @gate __DEV__
       it('should cleanup after errors - async', async () => {
         function App() {
           async function somethingAsync() {
@@ -611,6 +633,7 @@ function runActTests(label, render, unmount, rerender) {
       if (__DEV__ && __EXPERIMENTAL__) {
         // todo - remove __DEV__ check once we start using testing builds
 
+        // @gate __DEV__
         it('triggers fallbacks if available', async () => {
           if (label !== 'legacy mode') {
             // FIXME: Support for Concurrent Root intentionally removed
@@ -691,25 +714,12 @@ function runActTests(label, render, unmount, rerender) {
         });
       }
     });
-    describe('warn in prod mode', () => {
+    describe('throw in prod mode', () => {
+      // @gate !__DEV__
       it('warns if you try to use act() in prod mode', () => {
-        const spy = spyOnDevAndProd(console, 'error');
-
-        act(() => {});
-
-        if (!__DEV__) {
-          expect(console.error).toHaveBeenCalledTimes(1);
-          expect(console.error.calls.argsFor(0)[0]).toContain(
-            'act(...) is not supported in production builds of React',
-          );
-        } else {
-          expect(console.error).toHaveBeenCalledTimes(0);
-        }
-
-        spy.calls.reset();
-        // does not warn twice
-        act(() => {});
-        expect(console.error).toHaveBeenCalledTimes(0);
+        expect(() => act(() => {})).toThrow(
+          'act(...) is not supported in production builds of React',
+        );
       });
     });
   });
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
index f7145f657c72..e1ff6f870019 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsActUnmockedScheduler-test.js
@@ -47,6 +47,7 @@ afterEach(() => {
   document.body.removeChild(container);
 });
 
+// @gate __DEV__
 it('can use act to flush effects', () => {
   function App() {
     React.useEffect(() => {
@@ -62,6 +63,7 @@ it('can use act to flush effects', () => {
   expect(clearYields()).toEqual([100]);
 });
 
+// @gate __DEV__
 it('flushes effects on every call', () => {
   function App() {
     const [ctr, setCtr] = React.useState(0);
@@ -100,6 +102,7 @@ it('flushes effects on every call', () => {
   expect(button.innerHTML).toEqual('5');
 });
 
+// @gate __DEV__
 it("should keep flushing effects until they're done", () => {
   function App() {
     const [ctr, setCtr] = React.useState(0);
@@ -118,6 +121,7 @@ it("should keep flushing effects until they're done", () => {
   expect(container.innerHTML).toEqual('5');
 });
 
+// @gate __DEV__
 it('should flush effects only on exiting the outermost act', () => {
   function App() {
     React.useEffect(() => {
@@ -138,6 +142,7 @@ it('should flush effects only on exiting the outermost act', () => {
   expect(clearYields()).toEqual([0]);
 });
 
+// @gate __DEV__
 it('can handle cascading promises', async () => {
   // this component triggers an effect, that waits a tick,
   // then sets state. repeats this 5 times.
diff --git a/packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js b/packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js
index 91ce4c9c5f68..8f02e4b5f323 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js
@@ -13,6 +13,7 @@ import * as ReactDOM from 'react-dom';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 import * as Scheduler from 'scheduler';
+import invariant from 'shared/invariant';
 
 // Keep in sync with ReactDOM.js, and ReactTestUtils.js:
 const EventInternals =
@@ -71,17 +72,13 @@ function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
 // so we can tell if any async act() calls try to run in parallel.
 
 let actingUpdatesScopeDepth = 0;
-let didWarnAboutUsingActInProd = false;
 
 export function act(callback: () => Thenable<mixed>): Thenable<void> {
   if (!__DEV__) {
-    if (didWarnAboutUsingActInProd === false) {
-      didWarnAboutUsingActInProd = true;
-      // eslint-disable-next-line react-internal/no-production-logging
-      console.error(
-        'act(...) is not supported in production builds of React, and might not behave as expected.',
-      );
-    }
+    invariant(
+      false,
+      'act(...) is not supported in production builds of React.',
+    );
   }
   const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
   actingUpdatesScopeDepth++;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 105e43229bd3..eb26348ca16e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2985,17 +2985,13 @@ function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
 // so we can tell if any async act() calls try to run in parallel.
 
 let actingUpdatesScopeDepth = 0;
-let didWarnAboutUsingActInProd = false;
 
 export function act(callback: () => Thenable<mixed>): Thenable<void> {
   if (!__DEV__) {
-    if (didWarnAboutUsingActInProd === false) {
-      didWarnAboutUsingActInProd = true;
-      // eslint-disable-next-line react-internal/no-production-logging
-      console.error(
-        'act(...) is not supported in production builds of React, and might not behave as expected.',
-      );
-    }
+    invariant(
+      false,
+      'act(...) is not supported in production builds of React.',
+    );
   }
 
   const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index baff7e76b5e7..0b3495707853 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2985,17 +2985,13 @@ function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
 // so we can tell if any async act() calls try to run in parallel.
 
 let actingUpdatesScopeDepth = 0;
-let didWarnAboutUsingActInProd = false;
 
 export function act(callback: () => Thenable<mixed>): Thenable<void> {
   if (!__DEV__) {
-    if (didWarnAboutUsingActInProd === false) {
-      didWarnAboutUsingActInProd = true;
-      // eslint-disable-next-line react-internal/no-production-logging
-      console.error(
-        'act(...) is not supported in production builds of React, and might not behave as expected.',
-      );
-    }
+    invariant(
+      false,
+      'act(...) is not supported in production builds of React.',
+    );
   }
 
   const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index a40a65671b8b..8348c708f3bc 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -26,6 +26,7 @@ describe('ReactFiberHostContext', () => {
       .DefaultEventPriority;
   });
 
+  // @gate __DEV__
   it('works with null host context', async () => {
     let creates = 0;
     const Renderer = ReactFiberReconciler({
@@ -83,6 +84,7 @@ describe('ReactFiberHostContext', () => {
     expect(creates).toBe(2);
   });
 
+  // @gate __DEV__
   it('should send the context to prepareForCommit and resetAfterCommit', () => {
     const rootContext = {};
     const Renderer = ReactFiberReconciler({
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index 181b243c5cf6..66dd7d12b492 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -18,6 +18,7 @@ let mockDevToolsHook;
 let allSchedulerTags;
 let allSchedulerTypes;
 let onCommitRootShouldYield;
+let act;
 
 describe('updaters', () => {
   beforeEach(() => {
@@ -66,6 +67,8 @@ describe('updaters', () => {
     ReactDOM = require('react-dom');
     ReactTestUtils = require('react-dom/test-utils');
     Scheduler = require('scheduler');
+
+    act = ReactTestUtils.unstable_concurrentAct;
   });
 
   it('should report the (host) root as the scheduler for root-level render', async () => {
@@ -75,12 +78,12 @@ describe('updaters', () => {
     const Child = () => null;
     const container = document.createElement('div');
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       ReactDOM.render(<Parent />, container);
     });
     expect(allSchedulerTags).toEqual([[HostRoot]]);
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       ReactDOM.render(<Parent />, container);
     });
     expect(allSchedulerTags).toEqual([[HostRoot], [HostRoot]]);
@@ -108,19 +111,19 @@ describe('updaters', () => {
     };
     const Child = () => null;
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       ReactDOM.render(<Parent />, document.createElement('div'));
     });
     expect(scheduleForA).not.toBeNull();
     expect(scheduleForB).not.toBeNull();
     expect(allSchedulerTypes).toEqual([[null]]);
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       scheduleForA();
     });
     expect(allSchedulerTypes).toEqual([[null], [SchedulingComponentA]]);
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       scheduleForB();
     });
     expect(allSchedulerTypes).toEqual([
@@ -141,13 +144,13 @@ describe('updaters', () => {
     }
     const Child = () => null;
     let instance;
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       ReactDOM.render(<Parent />, document.createElement('div'));
     });
     expect(allSchedulerTypes).toEqual([[null]]);
 
     expect(instance).not.toBeNull();
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       instance.setState({});
     });
     expect(allSchedulerTypes).toEqual([[null], [SchedulingComponent]]);
@@ -183,7 +186,7 @@ describe('updaters', () => {
     };
 
     const root = ReactDOM.createRoot(document.createElement('div'));
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       root.render(<Parent />);
       expect(Scheduler).toFlushAndYieldThrough([
         'CascadingChild 0',
@@ -194,7 +197,7 @@ describe('updaters', () => {
     expect(triggerPassiveCascade).not.toBeNull();
     expect(allSchedulerTypes).toEqual([[null]]);
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       triggerActiveCascade();
       expect(Scheduler).toFlushAndYieldThrough([
         'CascadingChild 0',
@@ -209,7 +212,7 @@ describe('updaters', () => {
       [CascadingChild],
     ]);
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       triggerPassiveCascade();
       expect(Scheduler).toFlushAndYieldThrough([
         'CascadingChild 1',
@@ -264,21 +267,21 @@ describe('updaters', () => {
       }
     };
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       ReactDOM.render(<Parent />, document.createElement('div'));
       expect(Scheduler).toHaveYielded(['onCommitRoot']);
     });
     expect(setShouldSuspend).not.toBeNull();
     expect(allSchedulerTypes).toEqual([[null]]);
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       setShouldSuspend(true);
     });
     expect(Scheduler).toHaveYielded(['onCommitRoot']);
     expect(allSchedulerTypes).toEqual([[null], [Suspender]]);
 
     expect(resolver).not.toBeNull();
-    await ReactTestUtils.act(() => {
+    await act(() => {
       resolver('abc');
       return promise;
     });
@@ -328,7 +331,7 @@ describe('updaters', () => {
     };
 
     const root = ReactDOM.createRoot(document.createElement('div'));
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       root.render(<Parent shouldError={false} />);
     });
     expect(Scheduler).toHaveYielded(['initial', 'onCommitRoot']);
@@ -337,7 +340,7 @@ describe('updaters', () => {
     allSchedulerTypes.splice(0);
     onCommitRootShouldYield = true;
 
-    await ReactTestUtils.act(async () => {
+    await act(async () => {
       triggerError();
     });
     expect(Scheduler).toHaveYielded(['onCommitRoot', 'error', 'onCommitRoot']);
@@ -398,7 +401,7 @@ describe('updaters', () => {
     expect(allSchedulerTags).toEqual([[HostRoot]]);
 
     // Render a partial update, but don't finish.
-    ReactTestUtils.act(() => {
+    act(() => {
       triggerLowPriorityUpdate();
       expect(Scheduler).toFlushAndYieldThrough(['LowPriorityUpdater 1']);
       expect(allSchedulerTags).toEqual([[HostRoot]]);
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
index 725b067b59f5..28cc0062e8a7 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
@@ -13,6 +13,8 @@ describe('ReactTestRenderer.act()', () => {
     Scheduler = require('scheduler');
     act = ReactTestRenderer.act;
   });
+
+  // @gate __DEV__
   it('can use .act() to flush effects', () => {
     function App(props) {
       const [ctr, setCtr] = React.useState(0);
@@ -56,6 +58,7 @@ describe('ReactTestRenderer.act()', () => {
   });
 
   describe('async', () => {
+    // @gate __DEV__
     it('should work with async/await', async () => {
       function fetch(url) {
         return Promise.resolve({
@@ -83,6 +86,7 @@ describe('ReactTestRenderer.act()', () => {
       expect(root.toJSON()).toEqual(['1', '2', '3']);
     });
 
+    // @gate __DEV__
     it('should not flush effects without also flushing microtasks', async () => {
       const {useEffect, useReducer} = React;
 
diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
index 21463598cda4..24adba7561c6 100644
--- a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -20,7 +20,7 @@ describe 'ReactCoffeeScriptClass', ->
   beforeEach ->
     React = require 'react'
     ReactDOM = require 'react-dom'
-    act = require('react-dom/test-utils').act
+    act = require('react-dom/test-utils').unstable_concurrentAct
     PropTypes = require 'prop-types'
     container = document.createElement 'div'
     root = ReactDOM.createRoot container
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
index 3ae11bc4e74c..8ce57867fcb0 100644
--- a/packages/react/src/__tests__/ReactES6Class-test.js
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -29,7 +29,7 @@ describe('ReactES6Class', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('react-dom/test-utils').act;
+    act = require('react-dom/test-utils').unstable_concurrentAct;
     container = document.createElement('div');
     root = ReactDOM.createRoot(container);
     attachedListener = null;
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
index e8533b3e37af..c0c2da07785e 100644
--- a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -21,6 +21,7 @@ let container;
 let root;
 let attachedListener = null;
 let renderedName = null;
+let act = ReactDOMTestUtils.unstable_concurrentAct;
 
 class Inner extends React.Component {
   getName() {
@@ -34,7 +35,7 @@ class Inner extends React.Component {
 }
 
 function test(element, expectedTag, expectedClassName) {
-  ReactDOMTestUtils.act(() => root.render(element));
+  act(() => root.render(element));
   expect(container.firstChild).not.toBeNull();
   expect(container.firstChild.tagName).toBe(expectedTag);
   expect(container.firstChild.className).toBe(expectedClassName);
@@ -327,7 +328,7 @@ describe('ReactTypeScriptClass', function() {
   it('throws if no render function is defined', function() {
     expect(() => {
       expect(() =>
-        ReactDOMTestUtils.act(() => root.render(React.createElement(Empty)))
+        act(() => root.render(React.createElement(Empty)))
       ).toThrow();
     }).toErrorDev([
       // A failed component renders four times in DEV in concurrent mode
@@ -362,7 +363,7 @@ describe('ReactTypeScriptClass', function() {
       'DIV',
       'foo'
     );
-    ReactDOMTestUtils.act(() => ref.current.changeState());
+    act(() => ref.current.changeState());
     test(React.createElement(StateBasedOnProps), 'SPAN', 'bar');
   });
 
@@ -397,7 +398,7 @@ describe('ReactTypeScriptClass', function() {
       }
     }
     expect(function() {
-      ReactDOMTestUtils.act(() =>
+      act(() =>
         root.render(React.createElement(Foo, {foo: 'foo'}))
       );
     }).toErrorDev(
@@ -416,7 +417,7 @@ describe('ReactTypeScriptClass', function() {
       }
     }
     expect(function() {
-      ReactDOMTestUtils.act(() =>
+      act(() =>
         root.render(React.createElement(Foo, {foo: 'foo'}))
       );
     }).toErrorDev(
@@ -433,7 +434,7 @@ describe('ReactTypeScriptClass', function() {
       }
     }
     expect(function() {
-      ReactDOMTestUtils.act(() =>
+      act(() =>
         root.render(React.createElement(Foo, {foo: 'foo'}))
       );
     }).toErrorDev(
@@ -457,7 +458,7 @@ describe('ReactTypeScriptClass', function() {
       }
     }
     expect(function() {
-      ReactDOMTestUtils.act(() =>
+      act(() =>
         root.render(React.createElement(Foo, {foo: 'foo'}))
       );
     }).toErrorDev(
@@ -543,7 +544,7 @@ describe('ReactTypeScriptClass', function() {
       'DIV',
       'foo'
     );
-    ReactDOMTestUtils.act(() => attachedListener());
+    act(() => attachedListener());
     expect(renderedName).toBe('bar');
   });
 
@@ -562,7 +563,7 @@ describe('ReactTypeScriptClass', function() {
       'DIV',
       'foo'
     );
-    ReactDOMTestUtils.act(() => attachedListener());
+    act(() => attachedListener());
     expect(renderedName).toBe('bar');
   });
 
@@ -586,7 +587,7 @@ describe('ReactTypeScriptClass', function() {
       {},
     ]);
     lifeCycles = []; // reset
-    ReactDOMTestUtils.act(() => root.unmount(container));
+    act(() => root.unmount(container));
     expect(lifeCycles).toEqual(['will-unmount']);
   });
 
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts
index 50ff68603767..49ecaf208e05 100644
--- a/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts
@@ -13,5 +13,5 @@
  */
 
 declare module 'react-dom/test-utils' {
-  export function act(cb : () => any) : any
+  export function unstable_concurrentAct(cb : () => any) : any
 }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index d80cd0776ec2..38de792d6998 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -393,5 +393,6 @@
   "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."
+  "405": "hydrateRoot(...): Target container is not a DOM element.",
+  "406": "act(...) is not supported in production builds of React."
 }
diff --git a/scripts/jest/shouldIgnoreConsoleError.js b/scripts/jest/shouldIgnoreConsoleError.js
index 7534b4339abb..02af0bfd2852 100644
--- a/scripts/jest/shouldIgnoreConsoleError.js
+++ b/scripts/jest/shouldIgnoreConsoleError.js
@@ -35,16 +35,6 @@ module.exports = function shouldIgnoreConsoleError(format, args) {
       // They are noisy too so we'll try to ignore them.
       return true;
     }
-    if (
-      format.indexOf(
-        'act(...) is not supported in production builds of React'
-      ) === 0
-    ) {
-      // We don't yet support act() for prod builds, and warn for it.
-      // But we'd like to use act() ourselves for prod builds.
-      // Let's ignore the warning and #yolo.
-      return true;
-    }
   }
   // Looks legit
   return false;

From d0f348dc1b1ab1c3f7377f918d8ffd3fa64c6918 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 16 Jun 2021 19:44:44 -0400
Subject: [PATCH 0633/1603] Fix for failed Suspense layout semantics (#21694)

Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 .../src/ReactFiberCommitWork.new.js           | 55 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 55 +++++++++---------
 .../__tests__/ReactSuspense-test.internal.js  | 58 +++++++++++++++++++
 3 files changed, 112 insertions(+), 56 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e31ed8577938..60158f1f4aaa 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2210,36 +2210,35 @@ function commitLayoutEffects_begin(
         commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
         continue;
       } else {
-        if ((fiber.subtreeFlags & LayoutMask) !== NoFlags) {
-          const current = fiber.alternate;
-          const wasHidden = current !== null && current.memoizedState !== null;
-          const newOffscreenSubtreeWasHidden =
-            wasHidden || offscreenSubtreeWasHidden;
-          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
-          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-
-          // Traverse the Offscreen subtree with the current Offscreen as the root.
-          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-          let child = firstChild;
-          while (child !== null) {
-            nextEffect = child;
-            commitLayoutEffects_begin(
-              child, // New root; bubble back up to here and stop.
-              root,
-              committedLanes,
-            );
-            child = child.sibling;
-          }
+        // TODO (Offscreen) Also check: subtreeFlags & LayoutMask
+        const current = fiber.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const newOffscreenSubtreeWasHidden =
+          wasHidden || offscreenSubtreeWasHidden;
+        const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+        const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+
+        // Traverse the Offscreen subtree with the current Offscreen as the root.
+        offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
+        offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+        let child = firstChild;
+        while (child !== null) {
+          nextEffect = child;
+          commitLayoutEffects_begin(
+            child, // New root; bubble back up to here and stop.
+            root,
+            committedLanes,
+          );
+          child = child.sibling;
+        }
 
-          // Restore Offscreen state and resume in our-progress traversal.
-          nextEffect = fiber;
-          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
-          commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+        // Restore Offscreen state and resume in our-progress traversal.
+        nextEffect = fiber;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
 
-          continue;
-        }
+        continue;
       }
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 4dc06f6f4f7d..c741023f22bf 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2210,36 +2210,35 @@ function commitLayoutEffects_begin(
         commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
         continue;
       } else {
-        if ((fiber.subtreeFlags & LayoutMask) !== NoFlags) {
-          const current = fiber.alternate;
-          const wasHidden = current !== null && current.memoizedState !== null;
-          const newOffscreenSubtreeWasHidden =
-            wasHidden || offscreenSubtreeWasHidden;
-          const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
-          const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-
-          // Traverse the Offscreen subtree with the current Offscreen as the root.
-          offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-          let child = firstChild;
-          while (child !== null) {
-            nextEffect = child;
-            commitLayoutEffects_begin(
-              child, // New root; bubble back up to here and stop.
-              root,
-              committedLanes,
-            );
-            child = child.sibling;
-          }
+        // TODO (Offscreen) Also check: subtreeFlags & LayoutMask
+        const current = fiber.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const newOffscreenSubtreeWasHidden =
+          wasHidden || offscreenSubtreeWasHidden;
+        const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
+        const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+
+        // Traverse the Offscreen subtree with the current Offscreen as the root.
+        offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
+        offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+        let child = firstChild;
+        while (child !== null) {
+          nextEffect = child;
+          commitLayoutEffects_begin(
+            child, // New root; bubble back up to here and stop.
+            root,
+            committedLanes,
+          );
+          child = child.sibling;
+        }
 
-          // Restore Offscreen state and resume in our-progress traversal.
-          nextEffect = fiber;
-          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
-          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
-          commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
+        // Restore Offscreen state and resume in our-progress traversal.
+        nextEffect = fiber;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
 
-          continue;
-        }
+        continue;
       }
     }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index a5db0b503612..2bfec1aa583a 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -663,6 +663,64 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('new value');
   });
 
+  // @gate enableSuspenseLayoutEffectSemantics
+  it('re-fires layout effects when re-showing Suspense', () => {
+    function TextWithLayout(props) {
+      Scheduler.unstable_yieldValue(props.text);
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('create layout');
+        return () => {
+          Scheduler.unstable_yieldValue('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 ms={1000} text="Child 2" />}
+        </Suspense>
+      );
+    }
+
+    const root = ReactTestRenderer.create(<App />, {
+      unstable_isConcurrent: true,
+    });
+
+    expect(Scheduler).toFlushAndYield(['Child 1', 'create layout']);
+    expect(root).toMatchRenderedOutput('Child 1');
+
+    ReactTestRenderer.act(() => {
+      _setShow(true);
+    });
+    expect(Scheduler).toHaveYielded(
+      // DEV behavior differs from prod
+      // In DEV sometimes the work loop sync-flushes the commit
+      // where as in production, it schedules it behind a timeout.
+      // See shouldForceFlushFallbacksInDEV() usage
+      __DEV__
+        ? ['Child 1', 'Suspend! [Child 2]', 'Loading...', 'destroy layout']
+        : ['Child 1', 'Suspend! [Child 2]', 'Loading...'],
+    );
+    jest.advanceTimersByTime(1000);
+    expect(Scheduler).toHaveYielded(
+      // DEV behavior differs from prod
+      // In DEV sometimes the work loop sync-flushes the commit
+      // where as in production, it schedules it behind a timeout.
+      // See shouldForceFlushFallbacksInDEV() usage
+      __DEV__
+        ? ['Promise resolved [Child 2]']
+        : ['destroy layout', 'Promise resolved [Child 2]'],
+    );
+    expect(Scheduler).toFlushAndYield(['Child 1', 'Child 2', 'create layout']);
+    expect(root).toMatchRenderedOutput(['Child 1', 'Child 2'].join(''));
+  });
+
   describe('outside concurrent mode', () => {
     it('a mounted class component can suspend without losing state', () => {
       class TextWithLifecycle extends React.Component {

From 43f4cc160811657135508cdefe6aed2b3522a905 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 17 Jun 2021 13:56:18 +0100
Subject: [PATCH 0634/1603] Fix failing test (#21697)

---
 .../__tests__/ReactSuspense-test.internal.js  | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 2bfec1aa583a..e7e167972404 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -695,28 +695,19 @@ describe('ReactSuspense', () => {
     expect(Scheduler).toFlushAndYield(['Child 1', 'create layout']);
     expect(root).toMatchRenderedOutput('Child 1');
 
-    ReactTestRenderer.act(() => {
+    act(() => {
       _setShow(true);
     });
-    expect(Scheduler).toHaveYielded(
-      // DEV behavior differs from prod
-      // In DEV sometimes the work loop sync-flushes the commit
-      // where as in production, it schedules it behind a timeout.
-      // See shouldForceFlushFallbacksInDEV() usage
-      __DEV__
-        ? ['Child 1', 'Suspend! [Child 2]', 'Loading...', 'destroy layout']
-        : ['Child 1', 'Suspend! [Child 2]', 'Loading...'],
-    );
+    expect(Scheduler).toHaveYielded([
+      'Child 1',
+      'Suspend! [Child 2]',
+      'Loading...',
+    ]);
     jest.advanceTimersByTime(1000);
-    expect(Scheduler).toHaveYielded(
-      // DEV behavior differs from prod
-      // In DEV sometimes the work loop sync-flushes the commit
-      // where as in production, it schedules it behind a timeout.
-      // See shouldForceFlushFallbacksInDEV() usage
-      __DEV__
-        ? ['Promise resolved [Child 2]']
-        : ['destroy layout', 'Promise resolved [Child 2]'],
-    );
+    expect(Scheduler).toHaveYielded([
+      'destroy layout',
+      'Promise resolved [Child 2]',
+    ]);
     expect(Scheduler).toFlushAndYield(['Child 1', 'Child 2', 'create layout']);
     expect(root).toMatchRenderedOutput(['Child 1', 'Child 2'].join(''));
   });

From 568dc3532e25b30eee5072de08503b1bbc4f065d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Thu, 17 Jun 2021 14:29:30 -0400
Subject: [PATCH 0635/1603] Remove unstable_createRoot from internal builds
 (#21698)

These callsites were already removed as far as I can tell.
---
 fixtures/blocks/src/index.js                  | 2 +-
 fixtures/concurrent/time-slicing/src/index.js | 4 ++--
 fixtures/devtools/scheduling-profiler/app.js  | 2 +-
 fixtures/dom/src/__tests__/wrong-act-test.js  | 2 +-
 packages/react-dom/index.classic.fb.js        | 1 -
 packages/react-dom/index.js                   | 1 -
 packages/react-dom/index.modern.fb.js         | 1 -
 7 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/fixtures/blocks/src/index.js b/fixtures/blocks/src/index.js
index 5b95772dcb71..be279937f4d3 100644
--- a/fixtures/blocks/src/index.js
+++ b/fixtures/blocks/src/index.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {unstable_createRoot as createRoot} from 'react-dom';
+import {createRoot} from 'react-dom';
 import './index.css';
 import Router from './Router';
 
diff --git a/fixtures/concurrent/time-slicing/src/index.js b/fixtures/concurrent/time-slicing/src/index.js
index 4835a367e20d..c871ec6c1122 100644
--- a/fixtures/concurrent/time-slicing/src/index.js
+++ b/fixtures/concurrent/time-slicing/src/index.js
@@ -1,5 +1,5 @@
 import React, {PureComponent, unstable_startTransition} from 'react';
-import {unstable_createRoot} from 'react-dom';
+import {createRoot} from 'react-dom';
 import _ from 'lodash';
 import Charts from './Charts';
 import Clock from './Clock';
@@ -142,5 +142,5 @@ class App extends PureComponent {
 }
 
 const container = document.getElementById('root');
-const root = unstable_createRoot(container);
+const root = createRoot(container);
 root.render(<App />);
diff --git a/fixtures/devtools/scheduling-profiler/app.js b/fixtures/devtools/scheduling-profiler/app.js
index 7af7c13cc27d..27e452a60ba6 100644
--- a/fixtures/devtools/scheduling-profiler/app.js
+++ b/fixtures/devtools/scheduling-profiler/app.js
@@ -1,5 +1,5 @@
 const {createElement, useLayoutEffect, useState} = React;
-const {unstable_createRoot: createRoot} = ReactDOM;
+const {createRoot} = ReactDOM;
 
 function App() {
   const [isMounted, setIsMounted] = useState(false);
diff --git a/fixtures/dom/src/__tests__/wrong-act-test.js b/fixtures/dom/src/__tests__/wrong-act-test.js
index f865a8bccff6..05f1853f8a2c 100644
--- a/fixtures/dom/src/__tests__/wrong-act-test.js
+++ b/fixtures/dom/src/__tests__/wrong-act-test.js
@@ -189,7 +189,7 @@ it("doesn't warn if you use nested acts from different renderers", () => {
 
 if (__EXPERIMENTAL__) {
   it('warns when using createRoot() + .render', () => {
-    const root = ReactDOM.unstable_createRoot(document.createElement('div'));
+    const root = ReactDOM.createRoot(document.createElement('div'));
     expect(() => {
       TestRenderer.act(() => {
         root.render(<App />);
diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index 5f4f04e63461..a70dd4d0224e 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -22,7 +22,6 @@ export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
-  createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
   hydrateRoot,
   findDOMNode,
   flushSync,
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 7b89695091d5..79438fff5733 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -13,7 +13,6 @@ export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
-  createRoot as unstable_createRoot,
   hydrateRoot,
   findDOMNode,
   flushSync,
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index b12c249286b1..b45b03e4ec1d 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -11,7 +11,6 @@ export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
-  createRoot as unstable_createRoot, // TODO Remove once callsites use createRoot
   hydrateRoot,
   flushSync,
   unstable_batchedUpdates,

From 422e0bb3604dd7d3f6158df87b05932a43c89017 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 22 Jun 2021 17:21:22 -0400
Subject: [PATCH 0636/1603] Delete test-utils implementation of `act` (#21703)

* Delete test-utils implementation of `act`

Since it's dev-only now, we can use the one provided by the reconciler.

* Move act related stuff out of EventInternals
---
 packages/react-dom/src/client/ReactDOM.js     |  10 +-
 .../src/test-utils/ReactTestUtils.js          |  13 +-
 .../test-utils/ReactTestUtilsInternalAct.js   |  13 +-
 .../src/test-utils/ReactTestUtilsPublicAct.js | 214 ------------------
 4 files changed, 14 insertions(+), 236 deletions(-)
 delete mode 100644 packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 7355e0be45a3..eade4ea474c7 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -28,8 +28,8 @@ import {
   flushSync,
   flushControlled,
   injectIntoDevTools,
-  flushPassiveEffects,
   IsThisRendererActing,
+  act,
   attemptSynchronousHydration,
   attemptDiscreteHydration,
   attemptContinuousHydration,
@@ -155,7 +155,7 @@ function renderSubtreeIntoContainer(
 }
 
 const Internals = {
-  // Keep in sync with ReactTestUtils.js, and ReactTestUtilsAct.js.
+  // Keep in sync with ReactTestUtils.js.
   // This is an array for better minification.
   Events: [
     getInstanceFromNode,
@@ -163,10 +163,10 @@ const Internals = {
     getFiberCurrentPropsFromNode,
     enqueueStateRestore,
     restoreStateIfNeeded,
-    flushPassiveEffects,
-    // TODO: This is related to `act`, not events. Move to separate key?
-    IsThisRendererActing,
   ],
+  act,
+  // TODO: Temporary. Only used by our internal version of `act. Will remove.
+  IsThisRendererActing,
 };
 
 export {
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 492ab02d1192..69c1a6afcff3 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -18,7 +18,6 @@ import {
 import {SyntheticEvent} from '../events/SyntheticEvent';
 import invariant from 'shared/invariant';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
-import {act} from './ReactTestUtilsPublicAct';
 import {unstable_concurrentAct} from './ReactTestUtilsInternalAct';
 import {
   rethrowCaughtError,
@@ -26,17 +25,17 @@ import {
 } from 'shared/ReactErrorUtils';
 import isArray from 'shared/isArray';
 
-// Keep in sync with ReactDOM.js, and ReactTestUtilsAct.js:
-const EventInternals =
-  ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;
+// Keep in sync with ReactDOM.js:
+const SecretInternals =
+  ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+const EventInternals = SecretInternals.Events;
 const getInstanceFromNode = EventInternals[0];
 const getNodeFromInstance = EventInternals[1];
 const getFiberCurrentPropsFromNode = EventInternals[2];
 const enqueueStateRestore = EventInternals[3];
 const restoreStateIfNeeded = EventInternals[4];
-// const flushPassiveEffects = EventInternals[5];
-// TODO: This is related to `act`, not events. Move to separate key?
-// const IsThisRendererActing = EventInternals[6];
+
+const act = SecretInternals.act;
 
 function Event(suffix) {}
 
diff --git a/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js b/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
index 77fd1779ee56..3adc786eed5f 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
@@ -14,16 +14,9 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
 import * as Scheduler from 'scheduler';
 
-// Keep in sync with ReactDOM.js, and ReactTestUtils.js:
-const EventInternals =
-  ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;
-// const getInstanceFromNode = EventInternals[0];
-// const getNodeFromInstance = EventInternals[1];
-// const getFiberCurrentPropsFromNode = EventInternals[2];
-// const enqueueStateRestore = EventInternals[3];
-// const restoreStateIfNeeded = EventInternals[4];
-// const flushPassiveEffects = EventInternals[5];
-const IsThisRendererActing = EventInternals[6];
+const SecretInternals =
+  ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+const IsThisRendererActing = SecretInternals.IsThisRendererActing;
 
 const batchedUpdates = ReactDOM.unstable_batchedUpdates;
 
diff --git a/packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js b/packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js
deleted file mode 100644
index 8f02e4b5f323..000000000000
--- a/packages/react-dom/src/test-utils/ReactTestUtilsPublicAct.js
+++ /dev/null
@@ -1,214 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {Thenable} from 'shared/ReactTypes';
-
-import * as ReactDOM from 'react-dom';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-import enqueueTask from 'shared/enqueueTask';
-import * as Scheduler from 'scheduler';
-import invariant from 'shared/invariant';
-
-// Keep in sync with ReactDOM.js, and ReactTestUtils.js:
-const EventInternals =
-  ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Events;
-// const getInstanceFromNode = EventInternals[0];
-// const getNodeFromInstance = EventInternals[1];
-// const getFiberCurrentPropsFromNode = EventInternals[2];
-// const enqueueStateRestore = EventInternals[3];
-// const restoreStateIfNeeded = EventInternals[4];
-const flushPassiveEffects = EventInternals[5];
-const IsThisRendererActing = EventInternals[6];
-
-const batchedUpdates = ReactDOM.unstable_batchedUpdates;
-
-const {IsSomeRendererActing} = ReactSharedInternals;
-
-// This is the public version of `ReactTestUtils.act`. It is implemented in
-// "userspace" (i.e. not the reconciler), so that it doesn't add to the
-// production bundle size.
-// TODO: Remove this implementation of `act` in favor of the one exported by
-// the reconciler. To do this, we must first drop support for `act` in
-// production mode.
-
-// TODO: Remove support for the mock scheduler build, which was only added for
-// the purposes of internal testing. Internal tests should use
-// `unstable_concurrentAct` instead.
-const isSchedulerMocked =
-  typeof Scheduler.unstable_flushAllWithoutAsserting === 'function';
-const flushWork =
-  Scheduler.unstable_flushAllWithoutAsserting ||
-  function() {
-    let didFlushWork = false;
-    while (flushPassiveEffects()) {
-      didFlushWork = true;
-    }
-
-    return didFlushWork;
-  };
-
-function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
-  try {
-    flushWork();
-    enqueueTask(() => {
-      if (flushWork()) {
-        flushWorkAndMicroTasks(onDone);
-      } else {
-        onDone();
-      }
-    });
-  } catch (err) {
-    onDone(err);
-  }
-}
-
-// we track the 'depth' of the act() calls with this counter,
-// so we can tell if any async act() calls try to run in parallel.
-
-let actingUpdatesScopeDepth = 0;
-
-export function act(callback: () => Thenable<mixed>): Thenable<void> {
-  if (!__DEV__) {
-    invariant(
-      false,
-      'act(...) is not supported in production builds of React.',
-    );
-  }
-  const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  actingUpdatesScopeDepth++;
-
-  const previousIsSomeRendererActing = IsSomeRendererActing.current;
-  const previousIsThisRendererActing = IsThisRendererActing.current;
-  IsSomeRendererActing.current = true;
-  IsThisRendererActing.current = true;
-
-  function onDone() {
-    actingUpdatesScopeDepth--;
-    IsSomeRendererActing.current = previousIsSomeRendererActing;
-    IsThisRendererActing.current = previousIsThisRendererActing;
-    if (__DEV__) {
-      if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
-        // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
-        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. ',
-        );
-      }
-    }
-  }
-
-  let result;
-  try {
-    result = batchedUpdates(callback);
-  } catch (error) {
-    // on sync errors, we still want to 'cleanup' and decrement actingUpdatesScopeDepth
-    onDone();
-    throw error;
-  }
-
-  if (
-    result !== null &&
-    typeof result === 'object' &&
-    typeof result.then === 'function'
-  ) {
-    // setup a boolean that gets set to true only
-    // once this act() call is await-ed
-    let called = false;
-    if (__DEV__) {
-      if (typeof Promise !== 'undefined') {
-        //eslint-disable-next-line no-undef
-        Promise.resolve()
-          .then(() => {})
-          .then(() => {
-            if (called === false) {
-              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 () => ...);',
-              );
-            }
-          });
-      }
-    }
-
-    // in the async case, the returned thenable runs the callback, flushes
-    // effects and  microtasks in a loop until flushPassiveEffects() === false,
-    // and cleans up
-    return {
-      then(resolve, reject) {
-        called = true;
-        result.then(
-          () => {
-            if (
-              actingUpdatesScopeDepth > 1 ||
-              (isSchedulerMocked === true &&
-                previousIsSomeRendererActing === true)
-            ) {
-              onDone();
-              resolve();
-              return;
-            }
-            // we're about to exit the act() scope,
-            // now's the time to flush tasks/effects
-            flushWorkAndMicroTasks((err: ?Error) => {
-              onDone();
-              if (err) {
-                reject(err);
-              } else {
-                resolve();
-              }
-            });
-          },
-          err => {
-            onDone();
-            reject(err);
-          },
-        );
-      },
-    };
-  } else {
-    if (__DEV__) {
-      if (result !== undefined) {
-        console.error(
-          'The callback passed to act(...) function ' +
-            'must return undefined, or a Promise. You returned %s',
-          result,
-        );
-      }
-    }
-
-    // flush effects until none remain, and cleanup
-    try {
-      if (
-        actingUpdatesScopeDepth === 1 &&
-        (isSchedulerMocked === false || previousIsSomeRendererActing === false)
-      ) {
-        // we're about to exit the act() scope,
-        // now's the time to flush effects
-        flushWork();
-      }
-      onDone();
-    } catch (err) {
-      onDone();
-      throw err;
-    }
-
-    // in the sync case, the returned thenable only warns *if* await-ed
-    return {
-      then(resolve) {
-        if (__DEV__) {
-          console.error(
-            'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
-          );
-        }
-        resolve();
-      },
-    };
-  }
-}

From 06f7b4f43a93eae9111cfbd972ab1ae1148f6afb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 22 Jun 2021 17:25:07 -0400
Subject: [PATCH 0637/1603] `act` should work without mock Scheduler (#21714)

Currently, in a React 18 root, `act` only works if you mock the
Scheduler package. This was because we didn't want to add additional
checks at runtime.

But now that the `act` testing API is dev-only, we can simplify its
implementation.

Now when an update is wrapped with `act`, React will bypass Scheduler
entirely and push its tasks onto a special internal queue. Then, when
the outermost `act` scope exists, we'll flush that queue.

I also removed the "wrong act" warning, because the plan is to move
`act` to an isomorphic entry point, simlar to `startTransition`. That's
not directly related to this PR, but I didn't want to bother
re-implementing that warning only to immediately remove it.

I'll add the isomorphic API in a follow up.

Note that the internal version of `act` that we use in our own tests
still depends on mocking the Scheduler package, because it needs to work
in production. I'm planning to move that implementation to a shared
(internal) module, too.
---
 fixtures/dom/src/__tests__/nested-act-test.js |   2 +-
 fixtures/dom/src/__tests__/wrong-act-test.js  | 207 ----------
 .../ReactDOMTestSelectors-test.internal.js    |   2 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |  67 ++--
 ...tUnmockedSchedulerWarning-test.internal.js |  56 ---
 .../ReactUnmockedSchedulerWarning-test.js     |  42 ---
 packages/react-dom/src/client/ReactDOM.js     |   3 +-
 .../src/test-utils/ReactTestUtils.js          |   8 +-
 .../test-utils/ReactTestUtilsInternalAct.js   |  10 +-
 packages/react-dom/testing.classic.fb.js      |   1 -
 packages/react-dom/testing.experimental.js    |   1 -
 packages/react-dom/testing.js                 |   1 -
 packages/react-dom/testing.modern.fb.js       |   1 -
 packages/react-dom/testing.stable.js          |   1 -
 .../src/createReactNoop.js                    |  10 +-
 .../src/ReactFiberHooks.new.js                |   2 -
 .../src/ReactFiberHooks.old.js                |   2 -
 .../src/ReactFiberReconciler.js               |   3 -
 .../src/ReactFiberReconciler.new.js           |  11 -
 .../src/ReactFiberReconciler.old.js           |  11 -
 .../src/ReactFiberWorkLoop.new.js             | 354 +++---------------
 .../src/ReactFiberWorkLoop.old.js             | 354 +++---------------
 .../ReactFiberHostContext-test.internal.js    |   6 +-
 .../src/ReactTestRenderer.js                  |  19 +-
 .../__tests__/ReactTestRendererAct-test.js    |  17 -
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/index.stable.js                |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactAct.js                | 194 ++++++++++
 packages/react/src/ReactCurrentActQueue.js    |  22 ++
 packages/react/src/ReactSharedInternals.js    |   2 +
 packages/shared/ReactFeatureFlags.js          |   1 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   2 -
 scripts/jest/setupTests.www.js                |   1 -
 44 files changed, 423 insertions(+), 1004 deletions(-)
 delete mode 100644 fixtures/dom/src/__tests__/wrong-act-test.js
 delete mode 100644 packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
 delete mode 100644 packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
 create mode 100644 packages/react/src/ReactAct.js
 create mode 100644 packages/react/src/ReactCurrentActQueue.js

diff --git a/fixtures/dom/src/__tests__/nested-act-test.js b/fixtures/dom/src/__tests__/nested-act-test.js
index 4a39a0ea98f7..3219706e3fff 100644
--- a/fixtures/dom/src/__tests__/nested-act-test.js
+++ b/fixtures/dom/src/__tests__/nested-act-test.js
@@ -48,7 +48,7 @@ describe('unmocked scheduler', () => {
       TestAct(() => {
         TestRenderer.create(<Effecty />);
       });
-      expect(log).toEqual(['called']);
+      expect(log).toEqual([]);
     });
     expect(log).toEqual(['called']);
   });
diff --git a/fixtures/dom/src/__tests__/wrong-act-test.js b/fixtures/dom/src/__tests__/wrong-act-test.js
deleted file mode 100644
index 05f1853f8a2c..000000000000
--- a/fixtures/dom/src/__tests__/wrong-act-test.js
+++ /dev/null
@@ -1,207 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-let React;
-let ReactDOM;
-let ReactART;
-let TestUtils;
-let ARTSVGMode;
-let ARTCurrentMode;
-let TestRenderer;
-let ARTTest;
-
-global.__DEV__ = process.env.NODE_ENV !== 'production';
-global.__EXPERIMENTAL__ = process.env.RELEASE_CHANNEL === 'experimental';
-
-expect.extend(require('../toWarnDev'));
-
-function App(props) {
-  return 'hello world';
-}
-
-beforeEach(() => {
-  jest.resetModules();
-  React = require('react');
-  ReactDOM = require('react-dom');
-  TestUtils = require('react-dom/test-utils');
-  ReactART = require('react-art');
-  ARTSVGMode = require('art/modes/svg');
-  ARTCurrentMode = require('art/modes/current');
-  TestRenderer = require('react-test-renderer');
-
-  ARTCurrentMode.setCurrent(ARTSVGMode);
-
-  ARTTest = function ARTTestComponent(props) {
-    return (
-      <ReactART.Surface width={150} height={200}>
-        <ReactART.Group>
-          <ReactART.Shape
-            d="M0,0l50,0l0,50l-50,0z"
-            fill={new ReactART.LinearGradient(['black', 'white'])}
-            key="a"
-            width={50}
-            height={50}
-            x={50}
-            y={50}
-            opacity={0.1}
-          />
-          <ReactART.Shape
-            fill="#3C5A99"
-            key="b"
-            scale={0.5}
-            x={50}
-            y={50}
-            title="This is an F"
-            cursor="pointer">
-            M64.564,38.583H54l0.008-5.834c0-3.035,0.293-4.666,4.657-4.666
-            h5.833V16.429h-9.33c-11.213,0-15.159,5.654-15.159,15.16v6.994
-            h-6.99v11.652h6.99v33.815H54V50.235h9.331L64.564,38.583z
-          </ReactART.Shape>
-        </ReactART.Group>
-      </ReactART.Surface>
-    );
-  };
-});
-
-it("doesn't warn when you use the right act + renderer: dom", () => {
-  TestUtils.act(() => {
-    ReactDOM.render(<App />, document.createElement('div'));
-  });
-});
-
-it("doesn't warn when you use the right act + renderer: test", () => {
-  TestRenderer.act(() => {
-    TestRenderer.create(<App />);
-  });
-});
-
-it('resets correctly across renderers', async () => {
-  function Effecty() {
-    React.useEffect(() => {}, []);
-    return null;
-  }
-  await TestUtils.act(async () => {
-    TestRenderer.act(() => {});
-    expect(() => {
-      TestRenderer.create(<Effecty />);
-    }).toWarnDev(["It looks like you're using the wrong act()"], {
-      withoutStack: true,
-    });
-  });
-});
-
-it('warns when using the wrong act version - test + dom: render', () => {
-  expect(() => {
-    TestRenderer.act(() => {
-      ReactDOM.render(<App />, document.createElement('div'));
-    });
-  }).toWarnDev(
-    [
-      'ReactDOM.render is no longer supported in React 18.',
-      "It looks like you're using the wrong act()",
-    ],
-    {
-      withoutStack: true,
-    }
-  );
-});
-
-it('warns when using the wrong act version - test + dom: updates', () => {
-  let setCtr;
-  function Counter(props) {
-    const [ctr, _setCtr] = React.useState(0);
-    setCtr = _setCtr;
-    return ctr;
-  }
-  ReactDOM.render(<Counter />, document.createElement('div'));
-  expect(() => {
-    TestRenderer.act(() => {
-      setCtr(1);
-    });
-  }).toWarnDev(["It looks like you're using the wrong act()"], {
-    withoutStack: true,
-  });
-});
-
-it('warns when using the wrong act version - dom + test: .create()', () => {
-  expect(() => {
-    TestUtils.act(() => {
-      TestRenderer.create(<App />);
-    });
-  }).toWarnDev(["It looks like you're using the wrong act()"], {
-    withoutStack: true,
-  });
-});
-
-it('warns when using the wrong act version - dom + test: .update()', () => {
-  const root = TestRenderer.create(<App key="one" />);
-  expect(() => {
-    TestUtils.act(() => {
-      root.update(<App key="two" />);
-    });
-  }).toWarnDev(["It looks like you're using the wrong act()"], {
-    withoutStack: true,
-  });
-});
-
-it('warns when using the wrong act version - dom + test: updates', () => {
-  let setCtr;
-  function Counter(props) {
-    const [ctr, _setCtr] = React.useState(0);
-    setCtr = _setCtr;
-    return ctr;
-  }
-  TestRenderer.create(<Counter />);
-  expect(() => {
-    TestUtils.act(() => {
-      setCtr(1);
-    });
-  }).toWarnDev(["It looks like you're using the wrong act()"], {
-    withoutStack: true,
-  });
-});
-
-it('does not warn when nesting react-act inside react-dom', () => {
-  TestUtils.act(() => {
-    ReactDOM.render(<ARTTest />, document.createElement('div'));
-  });
-});
-
-it('does not warn when nesting react-act inside react-test-renderer', () => {
-  TestRenderer.act(() => {
-    TestRenderer.create(<ARTTest />);
-  });
-});
-
-it("doesn't warn if you use nested acts from different renderers", () => {
-  TestRenderer.act(() => {
-    TestUtils.act(() => {
-      TestRenderer.create(<App />);
-    });
-  });
-});
-
-if (__EXPERIMENTAL__) {
-  it('warns when using createRoot() + .render', () => {
-    const root = ReactDOM.createRoot(document.createElement('div'));
-    expect(() => {
-      TestRenderer.act(() => {
-        root.render(<App />);
-      });
-    }).toWarnDev(
-      [
-        'In Concurrent or Sync modes, the "scheduler" module needs to be mocked',
-        "It looks like you're using the wrong act()",
-      ],
-      {
-        withoutStack: true,
-      }
-    );
-  });
-}
diff --git a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
index 24c3978566a0..e9b0cc6ea0e5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
@@ -33,7 +33,7 @@ describe('ReactDOMTestSelectors', () => {
     React = require('react');
 
     const ReactDOM = require('react-dom/testing');
-    act = ReactDOM.act;
+    act = React.unstable_act;
     createComponentSelector = ReactDOM.createComponentSelector;
     createHasPseudoClassSelector = ReactDOM.createHasPseudoClassSelector;
     createRoleSelector = ReactDOM.createRoleSelector;
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 2dabcfc5281b..0e10207b0bb0 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -354,32 +354,6 @@ function runActTests(label, render, unmount, rerender) {
           expect(container.innerHTML).toBe('2');
         });
       });
-
-      // @gate __DEV__
-      it('warns if you return a value inside act', () => {
-        expect(() => act(() => null)).toErrorDev(
-          [
-            'The callback passed to act(...) function must return undefined, or a Promise.',
-          ],
-          {withoutStack: true},
-        );
-        expect(() => act(() => 123)).toErrorDev(
-          [
-            'The callback passed to act(...) function must return undefined, or a Promise.',
-          ],
-          {withoutStack: true},
-        );
-      });
-
-      // @gate __DEV__
-      it('warns if you try to await a sync .act call', () => {
-        expect(() => act(() => {}).then(() => {})).toErrorDev(
-          [
-            'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
-          ],
-          {withoutStack: true},
-        );
-      });
     });
 
     describe('asynchronous tests', () => {
@@ -401,15 +375,17 @@ function runActTests(label, render, unmount, rerender) {
 
         await act(async () => {
           render(<App />, container);
-          // flush a little to start the timer
-          expect(Scheduler).toFlushAndYield([]);
+        });
+        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 () => {
+      it('flushes microtasks before exiting (async function)', async () => {
         function App() {
           const [ctr, setCtr] = React.useState(0);
           async function someAsyncFunction() {
@@ -431,6 +407,31 @@ function runActTests(label, render, unmount, rerender) {
         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');
@@ -461,7 +462,13 @@ function runActTests(label, render, unmount, rerender) {
 
         await sleep(150);
         if (__DEV__) {
-          expect(console.error).toHaveBeenCalledTimes(1);
+          expect(console.error).toHaveBeenCalledTimes(2);
+          expect(console.error.calls.argsFor(0)[0]).toMatch(
+            'You seem to have overlapping act() calls',
+          );
+          expect(console.error.calls.argsFor(1)[0]).toMatch(
+            'You seem to have overlapping act() calls',
+          );
         }
       });
 
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
deleted file mode 100644
index 501b01336b1b..000000000000
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.internal.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-let React;
-let ReactDOM;
-let ReactFeatureFlags;
-
-function App() {
-  return null;
-}
-
-beforeEach(() => {
-  jest.resetModules();
-  jest.unmock('scheduler');
-  React = require('react');
-  ReactDOM = require('react-dom');
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.warnAboutUnmockedScheduler = true;
-});
-
-afterEach(() => {
-  ReactFeatureFlags.warnAboutUnmockedScheduler = false;
-});
-
-it('should warn in legacy mode', () => {
-  expect(() => {
-    ReactDOM.render(<App />, document.createElement('div'));
-  }).toErrorDev(
-    ['Starting from React v18, the "scheduler" module will need to be mocked'],
-    {withoutStack: true},
-  );
-  // does not warn twice
-  expect(() => {
-    ReactDOM.render(<App />, document.createElement('div'));
-  }).toErrorDev([]);
-});
-
-it('does not warn if Scheduler is mocked', () => {
-  jest.resetModules();
-  jest.mock('scheduler', () => require('scheduler/unstable_mock'));
-  React = require('react');
-  ReactDOM = require('react-dom');
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.warnAboutUnmockedScheduler = true;
-
-  // This should not warn
-  expect(() => {
-    ReactDOM.render(<App />, document.createElement('div'));
-  }).toErrorDev([]);
-});
diff --git a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js b/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
deleted file mode 100644
index 960154dbea25..000000000000
--- a/packages/react-dom/src/__tests__/ReactUnmockedSchedulerWarning-test.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-let React;
-let ReactDOM;
-
-function App() {
-  return null;
-}
-
-beforeEach(() => {
-  jest.resetModules();
-  jest.unmock('scheduler');
-  React = require('react');
-  ReactDOM = require('react-dom');
-});
-
-it('does not warn when rendering in legacy mode', () => {
-  expect(() => {
-    ReactDOM.render(<App />, document.createElement('div'));
-  }).toErrorDev([]);
-});
-
-it('should warn when rendering in concurrent mode', () => {
-  expect(() => {
-    ReactDOM.createRoot(document.createElement('div')).render(<App />);
-  }).toErrorDev(
-    'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
-      'to guarantee consistent behaviour across tests and browsers.',
-    {withoutStack: true},
-  );
-  // does not warn twice
-  expect(() => {
-    ReactDOM.createRoot(document.createElement('div')).render(<App />);
-  }).toErrorDev([]);
-});
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index eade4ea474c7..e603121d82c0 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -29,7 +29,6 @@ import {
   flushControlled,
   injectIntoDevTools,
   IsThisRendererActing,
-  act,
   attemptSynchronousHydration,
   attemptDiscreteHydration,
   attemptContinuousHydration,
@@ -163,8 +162,8 @@ const Internals = {
     getFiberCurrentPropsFromNode,
     enqueueStateRestore,
     restoreStateIfNeeded,
+    batchedUpdates,
   ],
-  act,
   // TODO: Temporary. Only used by our internal version of `act. Will remove.
   IsThisRendererActing,
 };
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 69c1a6afcff3..e721dd30e7a3 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -34,8 +34,14 @@ const getNodeFromInstance = EventInternals[1];
 const getFiberCurrentPropsFromNode = EventInternals[2];
 const enqueueStateRestore = EventInternals[3];
 const restoreStateIfNeeded = EventInternals[4];
+const batchedUpdates = EventInternals[5];
 
-const act = SecretInternals.act;
+const act_notBatchedInLegacyMode = React.unstable_act;
+function act(callback) {
+  return act_notBatchedInLegacyMode(() => {
+    return batchedUpdates(callback);
+  });
+}
 
 function Event(suffix) {}
 
diff --git a/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js b/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
index 3adc786eed5f..6afe4af8aa49 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
@@ -20,7 +20,7 @@ const IsThisRendererActing = SecretInternals.IsThisRendererActing;
 
 const batchedUpdates = ReactDOM.unstable_batchedUpdates;
 
-const {IsSomeRendererActing} = ReactSharedInternals;
+const {IsSomeRendererActing, ReactCurrentActQueue} = ReactSharedInternals;
 
 // 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
@@ -28,6 +28,8 @@ const {IsSomeRendererActing} = ReactSharedInternals;
 // 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.
+// TODO: Replace the internal "concurrent" implementations of `act` with a
+// single shared module.
 
 let actingUpdatesScopeDepth = 0;
 
@@ -50,8 +52,14 @@ export function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
   IsSomeRendererActing.current = true;
   IsThisRendererActing.current = true;
   actingUpdatesScopeDepth++;
+  if (__DEV__ && actingUpdatesScopeDepth === 1) {
+    ReactCurrentActQueue.disableActWarning = true;
+  }
 
   const unwind = () => {
+    if (__DEV__ && actingUpdatesScopeDepth === 1) {
+      ReactCurrentActQueue.disableActWarning = false;
+    }
     actingUpdatesScopeDepth--;
     IsSomeRendererActing.current = previousIsSomeRendererActing;
     IsThisRendererActing.current = previousIsThisRendererActing;
diff --git a/packages/react-dom/testing.classic.fb.js b/packages/react-dom/testing.classic.fb.js
index 923ba78f09d1..a127b63f8c8f 100644
--- a/packages/react-dom/testing.classic.fb.js
+++ b/packages/react-dom/testing.classic.fb.js
@@ -9,7 +9,6 @@
 
 export * from './index.classic.fb.js';
 export {
-  act,
   createComponentSelector,
   createHasPseudoClassSelector,
   createRoleSelector,
diff --git a/packages/react-dom/testing.experimental.js b/packages/react-dom/testing.experimental.js
index 4d3f2d2a7f4f..f994d83fa7d2 100644
--- a/packages/react-dom/testing.experimental.js
+++ b/packages/react-dom/testing.experimental.js
@@ -8,4 +8,3 @@
  */
 
 export * from './index.experimental.js';
-export {act} from 'react-reconciler/src/ReactFiberReconciler';
diff --git a/packages/react-dom/testing.js b/packages/react-dom/testing.js
index d66124f67d83..ef4ac5899dfd 100644
--- a/packages/react-dom/testing.js
+++ b/packages/react-dom/testing.js
@@ -9,7 +9,6 @@
 
 export * from './index.js';
 export {
-  act,
   createComponentSelector,
   createHasPseudoClassSelector,
   createRoleSelector,
diff --git a/packages/react-dom/testing.modern.fb.js b/packages/react-dom/testing.modern.fb.js
index 7f22bb849e7c..738ae3a3710f 100644
--- a/packages/react-dom/testing.modern.fb.js
+++ b/packages/react-dom/testing.modern.fb.js
@@ -9,7 +9,6 @@
 
 export * from './index.modern.fb.js';
 export {
-  act,
   createComponentSelector,
   createHasPseudoClassSelector,
   createRoleSelector,
diff --git a/packages/react-dom/testing.stable.js b/packages/react-dom/testing.stable.js
index 47161fadd7f8..044b15bde9c4 100644
--- a/packages/react-dom/testing.stable.js
+++ b/packages/react-dom/testing.stable.js
@@ -8,4 +8,3 @@
  */
 
 export * from './index.stable.js';
-export {act} from 'react-reconciler/src/ReactFiberReconciler';
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 9d2c87621bce..59cea7cd5d97 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -31,7 +31,7 @@ import {
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
-const {IsSomeRendererActing} = ReactSharedInternals;
+const {IsSomeRendererActing, ReactCurrentActQueue} = ReactSharedInternals;
 
 type Container = {
   rootID: string,
@@ -1048,6 +1048,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
   // 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.
+  // TODO: Replace the internal "concurrent" implementations of `act` with a
+  // single shared module.
 
   const {batchedUpdates, IsThisRendererActing} = NoopRenderer;
   let actingUpdatesScopeDepth = 0;
@@ -1071,8 +1073,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     IsSomeRendererActing.current = true;
     IsThisRendererActing.current = true;
     actingUpdatesScopeDepth++;
+    if (__DEV__ && actingUpdatesScopeDepth === 1) {
+      ReactCurrentActQueue.disableActWarning = true;
+    }
 
     const unwind = () => {
+      if (__DEV__ && actingUpdatesScopeDepth === 1) {
+        ReactCurrentActQueue.disableActWarning = false;
+      }
       actingUpdatesScopeDepth--;
       IsSomeRendererActing.current = previousIsSomeRendererActing;
       IsThisRendererActing.current = previousIsThisRendererActing;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 394aa983174c..b195a0cb5748 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -79,7 +79,6 @@ import {
   requestEventTime,
   warnIfNotCurrentlyActingEffectsInDEV,
   warnIfNotCurrentlyActingUpdatesInDev,
-  warnIfNotScopedWithMatchingAct,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
@@ -2011,7 +2010,6 @@ function dispatchAction<S, A>(
     if (__DEV__) {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
       if ('undefined' !== typeof jest) {
-        warnIfNotScopedWithMatchingAct(fiber);
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index a5eac6836e28..7c51c43ad2e7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -79,7 +79,6 @@ import {
   requestEventTime,
   warnIfNotCurrentlyActingEffectsInDEV,
   warnIfNotCurrentlyActingUpdatesInDev,
-  warnIfNotScopedWithMatchingAct,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
@@ -2011,7 +2010,6 @@ function dispatchAction<S, A>(
     if (__DEV__) {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
       if ('undefined' !== typeof jest) {
-        warnIfNotScopedWithMatchingAct(fiber);
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index ff68770f09b0..6675ed78d5ff 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -38,7 +38,6 @@ import {
   shouldError as shouldError_old,
   shouldSuspend as shouldSuspend_old,
   injectIntoDevTools as injectIntoDevTools_old,
-  act as act_old,
   createPortal as createPortal_old,
   createComponentSelector as createComponentSelector_old,
   createHasPseudoClassSelector as createHasPseudoClassSelector_old,
@@ -79,7 +78,6 @@ import {
   shouldError as shouldError_new,
   shouldSuspend as shouldSuspend_new,
   injectIntoDevTools as injectIntoDevTools_new,
-  act as act_new,
   createPortal as createPortal_new,
   createComponentSelector as createComponentSelector_new,
   createHasPseudoClassSelector as createHasPseudoClassSelector_new,
@@ -166,7 +164,6 @@ export const shouldSuspend = enableNewReconciler
 export const injectIntoDevTools = enableNewReconciler
   ? injectIntoDevTools_new
   : injectIntoDevTools_old;
-export const act = enableNewReconciler ? act_new : act_old;
 export const createPortal = enableNewReconciler
   ? createPortal_new
   : createPortal_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index c53fabbb8e4a..9e831157bf5f 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -60,10 +60,7 @@ import {
   discreteUpdates,
   flushDiscreteUpdates,
   flushPassiveEffects,
-  warnIfNotScopedWithMatchingAct,
-  warnIfUnmockedScheduler,
   IsThisRendererActing,
-  act,
 } from './ReactFiberWorkLoop.new';
 import {
   createUpdate,
@@ -272,13 +269,6 @@ export function updateContainer(
   }
   const current = container.current;
   const eventTime = requestEventTime();
-  if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
-      warnIfUnmockedScheduler(current);
-      warnIfNotScopedWithMatchingAct(current);
-    }
-  }
   const lane = requestUpdateLane(current);
 
   if (enableSchedulingProfiler) {
@@ -348,7 +338,6 @@ export {
   flushSync,
   flushPassiveEffects,
   IsThisRendererActing,
-  act,
 };
 
 export function getPublicRootInstance(
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 73d412bfcd1a..8accca3deb35 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -60,10 +60,7 @@ import {
   discreteUpdates,
   flushDiscreteUpdates,
   flushPassiveEffects,
-  warnIfNotScopedWithMatchingAct,
-  warnIfUnmockedScheduler,
   IsThisRendererActing,
-  act,
 } from './ReactFiberWorkLoop.old';
 import {
   createUpdate,
@@ -272,13 +269,6 @@ export function updateContainer(
   }
   const current = container.current;
   const eventTime = requestEventTime();
-  if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
-      warnIfUnmockedScheduler(current);
-      warnIfNotScopedWithMatchingAct(current);
-    }
-  }
   const lane = requestUpdateLane(current);
 
   if (enableSchedulingProfiler) {
@@ -348,7 +338,6 @@ export {
   flushSync,
   flushPassiveEffects,
   IsThisRendererActing,
-  act,
 };
 
 export function getPublicRootInstance(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index eb26348ca16e..b4f889c569af 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Thenable, Wakeable} from 'shared/ReactTypes';
+import type {Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
@@ -24,7 +24,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableProfilerNestedUpdateScheduledHook,
-  warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -37,8 +36,9 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
 
 import {
-  scheduleCallback,
-  cancelCallback,
+  // Aliased because `act` will override and push to an internal queue
+  scheduleCallback as Scheduler_scheduleCallback,
+  cancelCallback as Scheduler_cancelCallback,
   shouldYield,
   requestPaint,
   now,
@@ -79,9 +79,6 @@ import {
   markRenderStopped,
 } from './SchedulingProfiler';
 
-// The scheduler is imported here *only* to detect whether it's been mocked
-import * as Scheduler from 'scheduler';
-
 import {
   resetAfterCommit,
   scheduleTimeout,
@@ -238,16 +235,13 @@ import {
 } from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
-// Used by `act`
-import enqueueTask from 'shared/enqueueTask';
-
 const ceil = Math.ceil;
 
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
   ReactCurrentBatchConfig,
-  IsSomeRendererActing,
+  ReactCurrentActQueue,
 } = ReactSharedInternals;
 
 type ExecutionContext = number;
@@ -653,7 +647,17 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Check if there's an existing task. We may be able to reuse it.
   const existingCallbackPriority = root.callbackPriority;
-  if (existingCallbackPriority === newCallbackPriority) {
+  if (
+    existingCallbackPriority === newCallbackPriority &&
+    // Special case related to `act`. If the currently scheduled task is a
+    // Scheduler task, rather than an `act` task, cancel it and re-scheduled
+    // on the `act` queue.
+    !(
+      __DEV__ &&
+      ReactCurrentActQueue.current !== null &&
+      existingCallbackNode !== fakeActCallbackNode
+    )
+  ) {
     if (__DEV__) {
       // If we're going to re-use an existing task, it needs to exist.
       // Assume that discrete update microtasks are non-cancellable and null.
@@ -2781,42 +2785,35 @@ export function restorePendingUpdaters(root: FiberRoot, lanes: Lanes): void {
   }
 }
 
-export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
+const fakeActCallbackNode = {};
+function scheduleCallback(priorityLevel, callback) {
   if (__DEV__) {
-    if (
-      warnsIfNotActing === true &&
-      IsSomeRendererActing.current === true &&
-      IsThisRendererActing.current !== true
-    ) {
-      const previousFiber = ReactCurrentFiberCurrent;
-      try {
-        setCurrentDebugFiberInDEV(fiber);
-        console.error(
-          "It looks like you're using the wrong act() around your test interactions.\n" +
-            'Be sure to use the matching version of act() corresponding to your renderer:\n\n' +
-            '// for react-dom:\n' +
-            // Break up imports to avoid accidentally parsing them as dependencies.
-            'import {act} fr' +
-            "om 'react-dom/test-utils';\n" +
-            '// ...\n' +
-            'act(() => ...);\n\n' +
-            '// for react-test-renderer:\n' +
-            // Break up imports to avoid accidentally parsing them as dependencies.
-            'import TestRenderer fr' +
-            "om 'react-test-renderer';\n" +
-            'const {act} = TestRenderer;\n' +
-            '// ...\n' +
-            'act(() => ...);',
-        );
-      } finally {
-        if (previousFiber) {
-          setCurrentDebugFiberInDEV(fiber);
-        } else {
-          resetCurrentDebugFiberInDEV();
-        }
-      }
+    // If we're currently inside an `act` scope, bypass Scheduler and push to
+    // the `act` queue instead.
+    const actQueue = ReactCurrentActQueue.current;
+    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 cancelCallback(callbackNode) {
+  if (__DEV__ && callbackNode === fakeActCallbackNode) {
+    return;
   }
+  // In production, always call Scheduler. This function will be stripped out.
+  return Scheduler_cancelCallback(callbackNode);
+}
+
+function shouldForceFlushFallbacksInDEV() {
+  // Never force flush in production. This function should get stripped out.
+  return __DEV__ && ReactCurrentActQueue.current !== null;
 }
 
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
@@ -2824,8 +2821,13 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
     if (
       warnsIfNotActing === true &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
-      IsSomeRendererActing.current === false &&
-      IsThisRendererActing.current === false
+      ReactCurrentActQueue.current === null &&
+      // Our internal tests use a custom implementation of `act` that works by
+      // mocking the Scheduler package. Disable the `act` warning.
+      // TODO: Maybe the warning should be disabled by default, and then turned
+      // on at the testing frameworks layer? Instead of what we do now, which
+      // is check if a `jest` global is defined.
+      ReactCurrentActQueue.disableActWarning === false
     ) {
       console.error(
         'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@@ -2849,8 +2851,13 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
     if (
       warnsIfNotActing === true &&
       executionContext === NoContext &&
-      IsSomeRendererActing.current === false &&
-      IsThisRendererActing.current === false
+      ReactCurrentActQueue.current === null &&
+      // Our internal tests use a custom implementation of `act` that works by
+      // mocking the Scheduler package. Disable the `act` warning.
+      // TODO: Maybe the warning should be disabled by default, and then turned
+      // on at the testing frameworks layer? Instead of what we do now, which
+      // is check if a `jest` global is defined.
+      ReactCurrentActQueue.disableActWarning === false
     ) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
@@ -2880,252 +2887,3 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
 }
 
 export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
-
-// In tests, we want to enforce a mocked scheduler.
-let didWarnAboutUnmockedScheduler = false;
-// TODO Before we release concurrent mode, revisit this and decide whether a mocked
-// scheduler is the actual recommendation. The alternative could be a testing build,
-// a new lib, or whatever; we dunno just yet. This message is for early adopters
-// to get their tests right.
-
-export function warnIfUnmockedScheduler(fiber: Fiber) {
-  if (__DEV__) {
-    if (
-      didWarnAboutUnmockedScheduler === false &&
-      Scheduler.unstable_flushAllWithoutAsserting === undefined
-    ) {
-      if (fiber.mode & ConcurrentMode) {
-        didWarnAboutUnmockedScheduler = true;
-        console.error(
-          'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
-            'to guarantee consistent behaviour across tests and browsers. ' +
-            'For example, with jest: \n' +
-            // Break up requires to avoid accidentally parsing them as dependencies.
-            "jest.mock('scheduler', () => require" +
-            "('scheduler/unstable_mock'));\n\n" +
-            'For more info, visit https://reactjs.org/link/mock-scheduler',
-        );
-      } else if (warnAboutUnmockedScheduler === true) {
-        didWarnAboutUnmockedScheduler = true;
-        console.error(
-          'Starting from React v18, the "scheduler" module will need to be mocked ' +
-            'to guarantee consistent behaviour across tests and browsers. ' +
-            'For example, with jest: \n' +
-            // Break up requires to avoid accidentally parsing them as dependencies.
-            "jest.mock('scheduler', () => require" +
-            "('scheduler/unstable_mock'));\n\n" +
-            'For more info, visit https://reactjs.org/link/mock-scheduler',
-        );
-      }
-    }
-  }
-}
-
-// `act` testing API
-//
-// TODO: This is mostly a copy-paste from the legacy `act`, which does not have
-// access to the same internals that we do here. Some trade offs in the
-// implementation no longer make sense.
-
-let isFlushingAct = false;
-let isInsideThisAct = false;
-
-function shouldForceFlushFallbacksInDEV() {
-  // Never force flush in production. This function should get stripped out.
-  return __DEV__ && actingUpdatesScopeDepth > 0;
-}
-
-const flushMockScheduler = Scheduler.unstable_flushAllWithoutAsserting;
-const isSchedulerMocked = typeof flushMockScheduler === 'function';
-
-// Returns whether additional work was scheduled. Caller should keep flushing
-// until there's no work left.
-function flushActWork(): boolean {
-  if (flushMockScheduler !== undefined) {
-    const prevIsFlushing = isFlushingAct;
-    isFlushingAct = true;
-    try {
-      return flushMockScheduler();
-    } finally {
-      isFlushingAct = prevIsFlushing;
-    }
-  } else {
-    // No mock scheduler available. However, the only type of pending work is
-    // passive effects, which we control. So we can flush that.
-    const prevIsFlushing = isFlushingAct;
-    isFlushingAct = true;
-    try {
-      let didFlushWork = false;
-      while (flushPassiveEffects()) {
-        didFlushWork = true;
-      }
-      return didFlushWork;
-    } finally {
-      isFlushingAct = prevIsFlushing;
-    }
-  }
-}
-
-function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
-  try {
-    flushActWork();
-    enqueueTask(() => {
-      if (flushActWork()) {
-        flushWorkAndMicroTasks(onDone);
-      } else {
-        onDone();
-      }
-    });
-  } catch (err) {
-    onDone(err);
-  }
-}
-
-// we track the 'depth' of the act() calls with this counter,
-// so we can tell if any async act() calls try to run in parallel.
-
-let actingUpdatesScopeDepth = 0;
-
-export function act(callback: () => Thenable<mixed>): Thenable<void> {
-  if (!__DEV__) {
-    invariant(
-      false,
-      'act(...) is not supported in production builds of React.',
-    );
-  }
-
-  const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  actingUpdatesScopeDepth++;
-
-  const previousIsSomeRendererActing = IsSomeRendererActing.current;
-  const previousIsThisRendererActing = IsThisRendererActing.current;
-  const previousIsInsideThisAct = isInsideThisAct;
-  IsSomeRendererActing.current = true;
-  IsThisRendererActing.current = true;
-  isInsideThisAct = true;
-
-  function onDone() {
-    actingUpdatesScopeDepth--;
-    IsSomeRendererActing.current = previousIsSomeRendererActing;
-    IsThisRendererActing.current = previousIsThisRendererActing;
-    isInsideThisAct = previousIsInsideThisAct;
-    if (__DEV__) {
-      if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
-        // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
-        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. ',
-        );
-      }
-    }
-  }
-
-  let result;
-  try {
-    result = batchedUpdates(callback);
-  } catch (error) {
-    // on sync errors, we still want to 'cleanup' and decrement actingUpdatesScopeDepth
-    onDone();
-    throw error;
-  }
-
-  if (
-    result !== null &&
-    typeof result === 'object' &&
-    typeof result.then === 'function'
-  ) {
-    // setup a boolean that gets set to true only
-    // once this act() call is await-ed
-    let called = false;
-    if (__DEV__) {
-      if (typeof Promise !== 'undefined') {
-        //eslint-disable-next-line no-undef
-        Promise.resolve()
-          .then(() => {})
-          .then(() => {
-            if (called === false) {
-              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 () => ...);',
-              );
-            }
-          });
-      }
-    }
-
-    // in the async case, the returned thenable runs the callback, flushes
-    // effects and  microtasks in a loop until flushPassiveEffects() === false,
-    // and cleans up
-    return {
-      then(resolve, reject) {
-        called = true;
-        result.then(
-          () => {
-            if (
-              actingUpdatesScopeDepth > 1 ||
-              (isSchedulerMocked === true &&
-                previousIsSomeRendererActing === true)
-            ) {
-              onDone();
-              resolve();
-              return;
-            }
-            // we're about to exit the act() scope,
-            // now's the time to flush tasks/effects
-            flushWorkAndMicroTasks((err: ?Error) => {
-              onDone();
-              if (err) {
-                reject(err);
-              } else {
-                resolve();
-              }
-            });
-          },
-          err => {
-            onDone();
-            reject(err);
-          },
-        );
-      },
-    };
-  } else {
-    if (__DEV__) {
-      if (result !== undefined) {
-        console.error(
-          'The callback passed to act(...) function ' +
-            'must return undefined, or a Promise. You returned %s',
-          result,
-        );
-      }
-    }
-
-    // flush effects until none remain, and cleanup
-    try {
-      if (
-        actingUpdatesScopeDepth === 1 &&
-        (isSchedulerMocked === false || previousIsSomeRendererActing === false)
-      ) {
-        // we're about to exit the act() scope,
-        // now's the time to flush effects
-        flushActWork();
-      }
-      onDone();
-    } catch (err) {
-      onDone();
-      throw err;
-    }
-
-    // in the sync case, the returned thenable only warns *if* await-ed
-    return {
-      then(resolve) {
-        if (__DEV__) {
-          console.error(
-            'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
-          );
-        }
-        resolve();
-      },
-    };
-  }
-}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 0b3495707853..d2ccf9e6826a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Thenable, Wakeable} from 'shared/ReactTypes';
+import type {Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
@@ -24,7 +24,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableProfilerNestedUpdateScheduledHook,
-  warnAboutUnmockedScheduler,
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
   enableSchedulingProfiler,
@@ -37,8 +36,9 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
 
 import {
-  scheduleCallback,
-  cancelCallback,
+  // Aliased because `act` will override and push to an internal queue
+  scheduleCallback as Scheduler_scheduleCallback,
+  cancelCallback as Scheduler_cancelCallback,
   shouldYield,
   requestPaint,
   now,
@@ -79,9 +79,6 @@ import {
   markRenderStopped,
 } from './SchedulingProfiler';
 
-// The scheduler is imported here *only* to detect whether it's been mocked
-import * as Scheduler from 'scheduler';
-
 import {
   resetAfterCommit,
   scheduleTimeout,
@@ -238,16 +235,13 @@ import {
 } from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 
-// Used by `act`
-import enqueueTask from 'shared/enqueueTask';
-
 const ceil = Math.ceil;
 
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
   ReactCurrentBatchConfig,
-  IsSomeRendererActing,
+  ReactCurrentActQueue,
 } = ReactSharedInternals;
 
 type ExecutionContext = number;
@@ -653,7 +647,17 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
 
   // Check if there's an existing task. We may be able to reuse it.
   const existingCallbackPriority = root.callbackPriority;
-  if (existingCallbackPriority === newCallbackPriority) {
+  if (
+    existingCallbackPriority === newCallbackPriority &&
+    // Special case related to `act`. If the currently scheduled task is a
+    // Scheduler task, rather than an `act` task, cancel it and re-scheduled
+    // on the `act` queue.
+    !(
+      __DEV__ &&
+      ReactCurrentActQueue.current !== null &&
+      existingCallbackNode !== fakeActCallbackNode
+    )
+  ) {
     if (__DEV__) {
       // If we're going to re-use an existing task, it needs to exist.
       // Assume that discrete update microtasks are non-cancellable and null.
@@ -2781,42 +2785,35 @@ export function restorePendingUpdaters(root: FiberRoot, lanes: Lanes): void {
   }
 }
 
-export function warnIfNotScopedWithMatchingAct(fiber: Fiber): void {
+const fakeActCallbackNode = {};
+function scheduleCallback(priorityLevel, callback) {
   if (__DEV__) {
-    if (
-      warnsIfNotActing === true &&
-      IsSomeRendererActing.current === true &&
-      IsThisRendererActing.current !== true
-    ) {
-      const previousFiber = ReactCurrentFiberCurrent;
-      try {
-        setCurrentDebugFiberInDEV(fiber);
-        console.error(
-          "It looks like you're using the wrong act() around your test interactions.\n" +
-            'Be sure to use the matching version of act() corresponding to your renderer:\n\n' +
-            '// for react-dom:\n' +
-            // Break up imports to avoid accidentally parsing them as dependencies.
-            'import {act} fr' +
-            "om 'react-dom/test-utils';\n" +
-            '// ...\n' +
-            'act(() => ...);\n\n' +
-            '// for react-test-renderer:\n' +
-            // Break up imports to avoid accidentally parsing them as dependencies.
-            'import TestRenderer fr' +
-            "om 'react-test-renderer';\n" +
-            'const {act} = TestRenderer;\n' +
-            '// ...\n' +
-            'act(() => ...);',
-        );
-      } finally {
-        if (previousFiber) {
-          setCurrentDebugFiberInDEV(fiber);
-        } else {
-          resetCurrentDebugFiberInDEV();
-        }
-      }
+    // If we're currently inside an `act` scope, bypass Scheduler and push to
+    // the `act` queue instead.
+    const actQueue = ReactCurrentActQueue.current;
+    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 cancelCallback(callbackNode) {
+  if (__DEV__ && callbackNode === fakeActCallbackNode) {
+    return;
   }
+  // In production, always call Scheduler. This function will be stripped out.
+  return Scheduler_cancelCallback(callbackNode);
+}
+
+function shouldForceFlushFallbacksInDEV() {
+  // Never force flush in production. This function should get stripped out.
+  return __DEV__ && ReactCurrentActQueue.current !== null;
 }
 
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
@@ -2824,8 +2821,13 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
     if (
       warnsIfNotActing === true &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
-      IsSomeRendererActing.current === false &&
-      IsThisRendererActing.current === false
+      ReactCurrentActQueue.current === null &&
+      // Our internal tests use a custom implementation of `act` that works by
+      // mocking the Scheduler package. Disable the `act` warning.
+      // TODO: Maybe the warning should be disabled by default, and then turned
+      // on at the testing frameworks layer? Instead of what we do now, which
+      // is check if a `jest` global is defined.
+      ReactCurrentActQueue.disableActWarning === false
     ) {
       console.error(
         'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@@ -2849,8 +2851,13 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
     if (
       warnsIfNotActing === true &&
       executionContext === NoContext &&
-      IsSomeRendererActing.current === false &&
-      IsThisRendererActing.current === false
+      ReactCurrentActQueue.current === null &&
+      // Our internal tests use a custom implementation of `act` that works by
+      // mocking the Scheduler package. Disable the `act` warning.
+      // TODO: Maybe the warning should be disabled by default, and then turned
+      // on at the testing frameworks layer? Instead of what we do now, which
+      // is check if a `jest` global is defined.
+      ReactCurrentActQueue.disableActWarning === false
     ) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
@@ -2880,252 +2887,3 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
 }
 
 export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
-
-// In tests, we want to enforce a mocked scheduler.
-let didWarnAboutUnmockedScheduler = false;
-// TODO Before we release concurrent mode, revisit this and decide whether a mocked
-// scheduler is the actual recommendation. The alternative could be a testing build,
-// a new lib, or whatever; we dunno just yet. This message is for early adopters
-// to get their tests right.
-
-export function warnIfUnmockedScheduler(fiber: Fiber) {
-  if (__DEV__) {
-    if (
-      didWarnAboutUnmockedScheduler === false &&
-      Scheduler.unstable_flushAllWithoutAsserting === undefined
-    ) {
-      if (fiber.mode & ConcurrentMode) {
-        didWarnAboutUnmockedScheduler = true;
-        console.error(
-          'In Concurrent or Sync modes, the "scheduler" module needs to be mocked ' +
-            'to guarantee consistent behaviour across tests and browsers. ' +
-            'For example, with jest: \n' +
-            // Break up requires to avoid accidentally parsing them as dependencies.
-            "jest.mock('scheduler', () => require" +
-            "('scheduler/unstable_mock'));\n\n" +
-            'For more info, visit https://reactjs.org/link/mock-scheduler',
-        );
-      } else if (warnAboutUnmockedScheduler === true) {
-        didWarnAboutUnmockedScheduler = true;
-        console.error(
-          'Starting from React v18, the "scheduler" module will need to be mocked ' +
-            'to guarantee consistent behaviour across tests and browsers. ' +
-            'For example, with jest: \n' +
-            // Break up requires to avoid accidentally parsing them as dependencies.
-            "jest.mock('scheduler', () => require" +
-            "('scheduler/unstable_mock'));\n\n" +
-            'For more info, visit https://reactjs.org/link/mock-scheduler',
-        );
-      }
-    }
-  }
-}
-
-// `act` testing API
-//
-// TODO: This is mostly a copy-paste from the legacy `act`, which does not have
-// access to the same internals that we do here. Some trade offs in the
-// implementation no longer make sense.
-
-let isFlushingAct = false;
-let isInsideThisAct = false;
-
-function shouldForceFlushFallbacksInDEV() {
-  // Never force flush in production. This function should get stripped out.
-  return __DEV__ && actingUpdatesScopeDepth > 0;
-}
-
-const flushMockScheduler = Scheduler.unstable_flushAllWithoutAsserting;
-const isSchedulerMocked = typeof flushMockScheduler === 'function';
-
-// Returns whether additional work was scheduled. Caller should keep flushing
-// until there's no work left.
-function flushActWork(): boolean {
-  if (flushMockScheduler !== undefined) {
-    const prevIsFlushing = isFlushingAct;
-    isFlushingAct = true;
-    try {
-      return flushMockScheduler();
-    } finally {
-      isFlushingAct = prevIsFlushing;
-    }
-  } else {
-    // No mock scheduler available. However, the only type of pending work is
-    // passive effects, which we control. So we can flush that.
-    const prevIsFlushing = isFlushingAct;
-    isFlushingAct = true;
-    try {
-      let didFlushWork = false;
-      while (flushPassiveEffects()) {
-        didFlushWork = true;
-      }
-      return didFlushWork;
-    } finally {
-      isFlushingAct = prevIsFlushing;
-    }
-  }
-}
-
-function flushWorkAndMicroTasks(onDone: (err: ?Error) => void) {
-  try {
-    flushActWork();
-    enqueueTask(() => {
-      if (flushActWork()) {
-        flushWorkAndMicroTasks(onDone);
-      } else {
-        onDone();
-      }
-    });
-  } catch (err) {
-    onDone(err);
-  }
-}
-
-// we track the 'depth' of the act() calls with this counter,
-// so we can tell if any async act() calls try to run in parallel.
-
-let actingUpdatesScopeDepth = 0;
-
-export function act(callback: () => Thenable<mixed>): Thenable<void> {
-  if (!__DEV__) {
-    invariant(
-      false,
-      'act(...) is not supported in production builds of React.',
-    );
-  }
-
-  const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  actingUpdatesScopeDepth++;
-
-  const previousIsSomeRendererActing = IsSomeRendererActing.current;
-  const previousIsThisRendererActing = IsThisRendererActing.current;
-  const previousIsInsideThisAct = isInsideThisAct;
-  IsSomeRendererActing.current = true;
-  IsThisRendererActing.current = true;
-  isInsideThisAct = true;
-
-  function onDone() {
-    actingUpdatesScopeDepth--;
-    IsSomeRendererActing.current = previousIsSomeRendererActing;
-    IsThisRendererActing.current = previousIsThisRendererActing;
-    isInsideThisAct = previousIsInsideThisAct;
-    if (__DEV__) {
-      if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
-        // if it's _less than_ previousActingUpdatesScopeDepth, then we can assume the 'other' one has warned
-        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. ',
-        );
-      }
-    }
-  }
-
-  let result;
-  try {
-    result = batchedUpdates(callback);
-  } catch (error) {
-    // on sync errors, we still want to 'cleanup' and decrement actingUpdatesScopeDepth
-    onDone();
-    throw error;
-  }
-
-  if (
-    result !== null &&
-    typeof result === 'object' &&
-    typeof result.then === 'function'
-  ) {
-    // setup a boolean that gets set to true only
-    // once this act() call is await-ed
-    let called = false;
-    if (__DEV__) {
-      if (typeof Promise !== 'undefined') {
-        //eslint-disable-next-line no-undef
-        Promise.resolve()
-          .then(() => {})
-          .then(() => {
-            if (called === false) {
-              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 () => ...);',
-              );
-            }
-          });
-      }
-    }
-
-    // in the async case, the returned thenable runs the callback, flushes
-    // effects and  microtasks in a loop until flushPassiveEffects() === false,
-    // and cleans up
-    return {
-      then(resolve, reject) {
-        called = true;
-        result.then(
-          () => {
-            if (
-              actingUpdatesScopeDepth > 1 ||
-              (isSchedulerMocked === true &&
-                previousIsSomeRendererActing === true)
-            ) {
-              onDone();
-              resolve();
-              return;
-            }
-            // we're about to exit the act() scope,
-            // now's the time to flush tasks/effects
-            flushWorkAndMicroTasks((err: ?Error) => {
-              onDone();
-              if (err) {
-                reject(err);
-              } else {
-                resolve();
-              }
-            });
-          },
-          err => {
-            onDone();
-            reject(err);
-          },
-        );
-      },
-    };
-  } else {
-    if (__DEV__) {
-      if (result !== undefined) {
-        console.error(
-          'The callback passed to act(...) function ' +
-            'must return undefined, or a Promise. You returned %s',
-          result,
-        );
-      }
-    }
-
-    // flush effects until none remain, and cleanup
-    try {
-      if (
-        actingUpdatesScopeDepth === 1 &&
-        (isSchedulerMocked === false || previousIsSomeRendererActing === false)
-      ) {
-        // we're about to exit the act() scope,
-        // now's the time to flush effects
-        flushActWork();
-      }
-      onDone();
-    } catch (err) {
-      onDone();
-      throw err;
-    }
-
-    // in the sync case, the returned thenable only warns *if* await-ed
-    return {
-      then(resolve) {
-        if (__DEV__) {
-          console.error(
-            'Do not await the result of calling act(...) with sync logic, it is not a Promise.',
-          );
-        }
-        resolve();
-      },
-    };
-  }
-}
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 8348c708f3bc..35c22e672ed3 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -11,6 +11,7 @@
 'use strict';
 
 let React;
+let act;
 let ReactFiberReconciler;
 let ConcurrentRoot;
 let DefaultEventPriority;
@@ -19,6 +20,7 @@ describe('ReactFiberHostContext', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
+    act = React.unstable_act;
     ReactFiberReconciler = require('react-reconciler');
     ConcurrentRoot = require('react-reconciler/src/ReactRootTags')
       .ConcurrentRoot;
@@ -71,7 +73,7 @@ describe('ReactFiberHostContext', () => {
       false,
       null,
     );
-    Renderer.act(() => {
+    act(() => {
       Renderer.updateContainer(
         <a>
           <b />
@@ -132,7 +134,7 @@ describe('ReactFiberHostContext', () => {
       false,
       null,
     );
-    Renderer.act(() => {
+    act(() => {
       Renderer.updateContainer(
         <a>
           <b />
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 246790ead3a4..469807090ec6 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -12,6 +12,7 @@ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Instance, TextInstance} from './ReactTestHostConfig';
 
+import * as React from 'react';
 import * as Scheduler from 'scheduler/unstable_mock';
 import {
   getPublicRootInstance,
@@ -20,7 +21,6 @@ import {
   flushSync,
   injectIntoDevTools,
   batchedUpdates,
-  act,
   IsThisRendererActing,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {findCurrentFiberUsingSlowPath} from 'react-reconciler/src/ReactFiberTreeReflection';
@@ -53,7 +53,14 @@ import {getPublicInstance} from './ReactTestHostConfig';
 import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
-const {IsSomeRendererActing} = ReactSharedInternals;
+const {IsSomeRendererActing, ReactCurrentActQueue} = ReactSharedInternals;
+
+const act_notBatchedInLegacyMode = React.unstable_act;
+function act(callback: () => Thenable<mixed>): Thenable<void> {
+  return act_notBatchedInLegacyMode(() => {
+    return batchedUpdates(callback);
+  });
+}
 
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
@@ -604,6 +611,8 @@ let actingUpdatesScopeDepth = 0;
 // building an app with React.
 // TODO: Migrate our tests to use ReactNoop. Although we would need to figure
 // out a solution for Relay, which has some Concurrent Mode tests.
+// TODO: Replace the internal "concurrent" implementations of `act` with a
+// single shared module.
 function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
   if (Scheduler.unstable_flushAllWithoutAsserting === undefined) {
     throw Error(
@@ -623,8 +632,14 @@ function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
   IsSomeRendererActing.current = true;
   IsThisRendererActing.current = true;
   actingUpdatesScopeDepth++;
+  if (__DEV__ && actingUpdatesScopeDepth === 1) {
+    ReactCurrentActQueue.disableActWarning = true;
+  }
 
   const unwind = () => {
+    if (__DEV__ && actingUpdatesScopeDepth === 1) {
+      ReactCurrentActQueue.disableActWarning = false;
+    }
     actingUpdatesScopeDepth--;
     IsSomeRendererActing.current = previousIsSomeRendererActing;
     IsThisRendererActing.current = previousIsThisRendererActing;
diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
index 28cc0062e8a7..4fe1afea6d62 100644
--- a/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
+++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererAct-test.js
@@ -40,23 +40,6 @@ describe('ReactTestRenderer.act()', () => {
     expect(root.toJSON()).toEqual('1');
   });
 
-  it("warns if you don't use .act", () => {
-    let setCtr;
-    function App(props) {
-      const [ctr, _setCtr] = React.useState(0);
-      setCtr = _setCtr;
-      return ctr;
-    }
-
-    ReactTestRenderer.create(<App />);
-
-    expect(() => {
-      setCtr(1);
-    }).toErrorDev([
-      'An update to App inside a test was not wrapped in act(...)',
-    ]);
-  });
-
   describe('async', () => {
     // @gate __DEV__
     it('should work with async/await', async () => {
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 15f3447a111f..653013c7b079 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -9,6 +9,7 @@
 
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  act as unstable_act,
   Children,
   Component,
   Fragment,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 5c7197b282cd..ab90ea66bc11 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -9,6 +9,7 @@
 
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  act as unstable_act,
   Children,
   Component,
   Fragment,
diff --git a/packages/react/index.js b/packages/react/index.js
index 59e76eff92fa..247d17ec01b8 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -33,6 +33,7 @@ export type ChildrenArray<+T> = $ReadOnlyArray<ChildrenArray<T>> | T;
 // We can't use export * from in Flow for some reason.
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  act as unstable_act,
   Children,
   Component,
   Fragment,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 47b629832b33..4f316eacad8b 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -9,6 +9,7 @@
 
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  act as unstable_act,
   Children,
   Component,
   Fragment,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 33e1b37693bd..008875e4577e 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -9,6 +9,7 @@
 
 export {
   __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  act as unstable_act,
   Children,
   Component,
   Fragment,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index a99d2a331b20..2b87d18b6c81 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -60,6 +60,7 @@ import {
 import {createMutableSource} from './ReactMutableSource';
 import ReactSharedInternals from './ReactSharedInternals';
 import {startTransition} from './ReactStartTransition';
+import {act} from './ReactAct';
 
 // TODO: Move this branching into the other module instead and just re-export.
 const createElement = __DEV__ ? createElementWithValidation : createElementProd;
@@ -120,4 +121,5 @@ export {
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
   useOpaqueIdentifier as unstable_useOpaqueIdentifier,
+  act,
 };
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
new file mode 100644
index 000000000000..885e803b027c
--- /dev/null
+++ b/packages/react/src/ReactAct.js
@@ -0,0 +1,194 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Thenable} from 'shared/ReactTypes';
+import ReactCurrentActQueue from './ReactCurrentActQueue';
+import invariant from 'shared/invariant';
+import enqueueTask from 'shared/enqueueTask';
+
+let actScopeDepth = 0;
+let didWarnNoAwaitAct = false;
+
+export function act(callback: () => Thenable<mixed>): Thenable<void> {
+  if (__DEV__) {
+    // `act` calls can be nested, so we track the depth. This represents the
+    // number of `act` scopes on the stack.
+    const prevActScopeDepth = actScopeDepth;
+    actScopeDepth++;
+
+    if (ReactCurrentActQueue.current === null) {
+      // This is the outermost `act` scope. Initialize the queue. The reconciler
+      // will detect the queue and use it instead of Scheduler.
+      ReactCurrentActQueue.current = [];
+    }
+
+    let result;
+    try {
+      result = callback();
+    } catch (error) {
+      popActScope(prevActScopeDepth);
+      throw error;
+    }
+
+    if (
+      result !== null &&
+      typeof result === 'object' &&
+      typeof result.then === 'function'
+    ) {
+      // The callback is an async function (i.e. returned a promise). Wait
+      // for it to resolve before exiting the current scope.
+      let wasAwaited = false;
+      const thenable = {
+        then(resolve, reject) {
+          wasAwaited = true;
+          result.then(
+            () => {
+              popActScope(prevActScopeDepth);
+              if (actScopeDepth === 0) {
+                // We've exited the outermost act scope. Recursively flush the
+                // queue until there's no remaining work.
+                recursivelyFlushAsyncActWork(resolve, reject);
+              } else {
+                resolve();
+              }
+            },
+            error => {
+              // The callback threw an error.
+              popActScope(prevActScopeDepth);
+              reject(error);
+            },
+          );
+        },
+      };
+
+      if (__DEV__) {
+        if (!didWarnNoAwaitAct && typeof Promise !== 'undefined') {
+          // eslint-disable-next-line no-undef
+          Promise.resolve()
+            .then(() => {})
+            .then(() => {
+              if (!wasAwaited) {
+                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 thenable;
+    } else {
+      // The callback is not an async function. Exit the current scope
+      // immediately, without awaiting.
+      popActScope(prevActScopeDepth);
+      if (actScopeDepth === 0) {
+        // Exiting the outermost act scope. Flush the queue.
+        const queue = ReactCurrentActQueue.current;
+        if (queue !== null) {
+          flushActQueue(queue);
+          ReactCurrentActQueue.current = null;
+        }
+        // Return a thenable. If the user awaits it, we'll flush again in
+        // case additional work was scheduled by a microtask.
+        return {
+          then(resolve, reject) {
+            // Confirm we haven't re-entered another `act` scope, in case
+            // the user does something weird like await the thenable
+            // multiple times.
+            if (ReactCurrentActQueue.current === null) {
+              // Recursively flush the queue until there's no remaining work.
+              ReactCurrentActQueue.current = [];
+              recursivelyFlushAsyncActWork(resolve, reject);
+            }
+          },
+        };
+      } else {
+        // Since we're inside a nested `act` scope, the returned thenable
+        // immediately resolves. The outer scope will flush the queue.
+        return {
+          then(resolve, reject) {
+            resolve();
+          },
+        };
+      }
+    }
+  } else {
+    invariant(
+      false,
+      'act(...) is not supported in production builds of React.',
+    );
+  }
+}
+
+function popActScope(prevActScopeDepth) {
+  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(resolve, reject) {
+  if (__DEV__) {
+    const queue = ReactCurrentActQueue.current;
+    if (queue !== null) {
+      try {
+        flushActQueue(queue);
+        enqueueTask(() => {
+          if (queue.length === 0) {
+            // No additional work was scheduled. Finish.
+            ReactCurrentActQueue.current = null;
+            resolve();
+          } else {
+            // Keep flushing work until there's none left.
+            recursivelyFlushAsyncActWork(resolve, reject);
+          }
+        });
+      } catch (error) {
+        reject(error);
+      }
+    } else {
+      resolve();
+    }
+  }
+}
+
+let isFlushing = false;
+function flushActQueue(queue) {
+  if (__DEV__) {
+    if (!isFlushing) {
+      // Prevent re-entrancy.
+      isFlushing = true;
+      let i = 0;
+      try {
+        for (; i < queue.length; i++) {
+          let callback = queue[i];
+          do {
+            callback = callback(true);
+          } while (callback !== null);
+        }
+        queue.length = 0;
+      } catch (error) {
+        // If something throws, leave the remaining callbacks on the queue.
+        queue = queue.slice(i + 1);
+        throw error;
+      } finally {
+        isFlushing = false;
+      }
+    }
+  }
+}
diff --git a/packages/react/src/ReactCurrentActQueue.js b/packages/react/src/ReactCurrentActQueue.js
new file mode 100644
index 000000000000..1b7966337cad
--- /dev/null
+++ b/packages/react/src/ReactCurrentActQueue.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+type RendererTask = boolean => RendererTask | null;
+
+const ReactCurrentActQueue = {
+  current: (null: null | Array<RendererTask>),
+  // Our internal tests use a custom implementation of `act` that works by
+  // mocking the Scheduler package. Use this field to disable the `act` warning.
+  // TODO: Maybe the warning should be disabled by default, and then turned
+  // on at the testing frameworks layer? Instead of what we do now, which
+  // is check if a `jest` global is defined.
+  disableActWarning: (false: boolean),
+};
+
+export default ReactCurrentActQueue;
diff --git a/packages/react/src/ReactSharedInternals.js b/packages/react/src/ReactSharedInternals.js
index 791d41adf804..e95ea1584875 100644
--- a/packages/react/src/ReactSharedInternals.js
+++ b/packages/react/src/ReactSharedInternals.js
@@ -8,6 +8,7 @@
 import assign from 'object-assign';
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
+import ReactCurrentActQueue from './ReactCurrentActQueue';
 import ReactCurrentOwner from './ReactCurrentOwner';
 import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
 import IsSomeRendererActing from './IsSomeRendererActing';
@@ -23,6 +24,7 @@ const ReactSharedInternals = {
 
 if (__DEV__) {
   ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;
+  ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue;
 }
 
 export default ReactSharedInternals;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 60efb97e4201..d966c9ec54c9 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -78,7 +78,6 @@ export const enableCreateEventHandleAPI = false;
 
 // We will enforce mocking scheduler with scheduler/unstable_mock at some point. (v18?)
 // Till then, we warn about the missing mock, but still fallback to a legacy mode compatible version
-export const warnAboutUnmockedScheduler = false;
 
 // 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
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index a58e9e543895..76cfa7d18f3e 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -30,7 +30,6 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
-export const warnAboutUnmockedScheduler = true;
 export const enableSuspenseCallback = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 1fc0969a3fa9..f8595c01b927 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -29,7 +29,6 @@ export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
-export const warnAboutUnmockedScheduler = false;
 export const enableSuspenseCallback = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index fe3abe658bdd..528f42ddc3cc 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -29,7 +29,6 @@ export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
-export const warnAboutUnmockedScheduler = false;
 export const enableSuspenseCallback = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index bdf3607a1ee8..6a70e11a4c55 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -29,7 +29,6 @@ export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
-export const warnAboutUnmockedScheduler = false;
 export const enableSuspenseCallback = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index a4f209a6b9f3..ef095eef7e7b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -29,7 +29,6 @@ export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableScopeAPI = true;
 export const enableCreateEventHandleAPI = false;
-export const warnAboutUnmockedScheduler = true;
 export const enableSuspenseCallback = true;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 5c8baa8a1204..58c6400b0aee 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -29,7 +29,6 @@ export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
 export const enableCreateEventHandleAPI = false;
-export const warnAboutUnmockedScheduler = false;
 export const enableSuspenseCallback = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 30cf572ddce2..0c3d15890b27 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -29,7 +29,6 @@ export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = true;
 export const enableCreateEventHandleAPI = true;
-export const warnAboutUnmockedScheduler = true;
 export const enableSuspenseCallback = true;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const warnAboutStringRefs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 04abc20de646..e028c9ddb8ef 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -75,8 +75,6 @@ export const enableCreateEventHandleAPI = true;
 
 export const enableScopeAPI = true;
 
-export const warnAboutUnmockedScheduler = true;
-
 export const enableSuspenseCallback = true;
 
 export const enableComponentStackLocations = true;
diff --git a/scripts/jest/setupTests.www.js b/scripts/jest/setupTests.www.js
index 3812d8f1354b..e303d9fee22a 100644
--- a/scripts/jest/setupTests.www.js
+++ b/scripts/jest/setupTests.www.js
@@ -14,7 +14,6 @@ jest.mock('shared/ReactFeatureFlags', () => {
   // www configuration. Update those tests so that they work against the www
   // configuration, too. Then remove these overrides.
   wwwFlags.disableLegacyContext = defaultFlags.disableLegacyContext;
-  wwwFlags.warnAboutUnmockedScheduler = defaultFlags.warnAboutUnmockedScheduler;
   wwwFlags.disableJavaScriptURLs = defaultFlags.disableJavaScriptURLs;
 
   return wwwFlags;

From d7dce572c7453737a685e791e7afcbc7e2b2fe16 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 22 Jun 2021 17:29:35 -0400
Subject: [PATCH 0638/1603] Remove internal `act` builds from public modules
 (#21721)

* Move internal version of act to shared module

No reason to have three different copies of this anymore.

I've left the the renderer-specific `act` entry points because legacy
mode tests need to also be wrapped in `batchedUpdates`. Next, I'll update
the tests to use `batchedUpdates` manually when needed.

* Migrates tests to use internal module directly

Instead of the `unstable_concurrentAct` exports. Now we can drop those
from the public builds.

I put it in the jest-react package since that's where we put our other
testing utilities (like `toFlushAndYield`). Not so much so it can be
consumed publicly (nobody uses that package except us), but so it works
with our build tests.

* Remove unused internal fields

These were used by the old act implementation. No longer needed.
---
 packages/jest-react/src/JestReact.js          |   2 +
 .../src/internalAct.js}                       |  37 +---
 .../src/__tests__/ReactFlight-test.js         |   2 +-
 .../ReactHooksInspectionIntegration-test.js   |   2 +-
 .../src/__tests__/inspectedElement-test.js    |   6 +-
 .../__tests__/storeComponentFilters-test.js   |   6 +-
 .../src/__tests__/ReactDOMFiberAsync-test.js  |   2 +-
 .../src/__tests__/ReactDOMHooks-test.js       |   2 +-
 .../ReactDOMNativeEventHeuristic-test.js      |   2 +-
 .../__tests__/ReactDOMNestedEvents-test.js    |   4 +-
 .../src/__tests__/ReactDOMRoot-test.js        |   2 +-
 .../ReactDOMServerIntegrationHooks-test.js    |   2 +-
 ...DOMServerPartialHydration-test.internal.js |   2 +-
 ...MServerSelectiveHydration-test.internal.js |   4 +-
 .../ReactDOMServerSuspense-test.internal.js   |   2 +-
 .../ReactDOMSuspensePlaceholder-test.js       |   4 +-
 .../ReactErrorBoundaries-test.internal.js     |   2 +-
 .../src/__tests__/ReactUpdates-test.js        |   2 +-
 .../__tests__/ReactWrongReturnPointer-test.js |  12 +-
 .../ReactDOMServerIntegrationTestUtils.js     |   9 +-
 packages/react-dom/src/client/ReactDOM.js     |   3 -
 .../DOMPluginEventSystem-test.internal.js     |   6 +-
 .../__tests__/ChangeEventPlugin-test.js       |   5 +-
 .../__tests__/SimpleEventPlugin-test.js       |   2 +-
 .../src/test-utils/ReactTestUtils.js          |   2 -
 .../__tests__/useFocusWithin-test.internal.js |   4 +-
 .../src/createReactNoop.js                    | 131 +-----------
 .../src/ReactFiberReconciler.js               |   5 -
 .../src/ReactFiberReconciler.new.js           |   2 -
 .../src/ReactFiberReconciler.old.js           |   2 -
 .../src/ReactFiberWorkLoop.new.js             |   3 -
 .../src/ReactFiberWorkLoop.old.js             |   3 -
 .../src/__tests__/ReactCPUSuspense-test.js    |  14 +-
 .../src/__tests__/ReactCache-test.js          | 102 +++++-----
 .../ReactClassSetStateCallback-test.js        |   6 +-
 .../__tests__/ReactContextPropagation-test.js |  66 +++---
 .../src/__tests__/ReactEffectOrdering-test.js |  10 +-
 .../src/__tests__/ReactExpiration-test.js     |  30 +--
 .../src/__tests__/ReactFlushSync-test.js      |  14 +-
 .../src/__tests__/ReactHooks-test.internal.js |  18 +-
 .../ReactHooksWithNoopRenderer-test.js        |  30 +--
 ...tIncrementalErrorHandling-test.internal.js |   8 +-
 .../ReactIncrementalScheduling-test.js        |   6 +-
 .../__tests__/ReactIncrementalUpdates-test.js |  18 +-
 .../__tests__/ReactInterleavedUpdates-test.js |  10 +-
 .../src/__tests__/ReactMemo-test.js           |  10 +-
 .../__tests__/ReactNoopRendererAct-test.js    |  12 +-
 .../src/__tests__/ReactOffscreen-test.js      |  32 +--
 .../ReactSchedulerIntegration-test.js         |  12 +-
 .../ReactSubtreeFlagsWarning-test.js          |   6 +-
 .../__tests__/ReactSuspense-test.internal.js  |   2 +-
 .../ReactSuspenseEffectsSemantics-test.js     | 188 +++++++++---------
 .../ReactSuspenseFuzz-test.internal.js        |   8 +-
 .../src/__tests__/ReactSuspenseList-test.js   |  18 +-
 .../ReactSuspenseWithNoopRenderer-test.js     | 168 ++++++++--------
 .../src/__tests__/ReactTransition-test.js     |  14 +-
 .../src/__tests__/ReactUpdatePriority-test.js |  10 +-
 .../__tests__/ReactUpdaters-test.internal.js  |   4 +-
 .../SchedulingProfiler-test.internal.js       |   6 +-
 .../src/__tests__/StrictEffectsMode-test.js   |   2 +-
 ...StrictEffectsModeDefaults-test.internal.js |  58 +++---
 .../useMutableSource-test.internal.js         |   4 +-
 .../useMutableSourceHydration-test.js         |   2 +-
 .../src/__tests__/useRef-test.internal.js     |   2 +-
 .../src/__tests__/ReactFresh-test.js          |   4 +-
 .../__tests__/ReactFreshIntegration-test.js   |   2 +-
 .../ReactFlightDOMRelay-test.internal.js      |   2 +-
 .../src/__tests__/ReactFlightDOM-test.js      |   2 +-
 .../src/ReactTestRenderer.js                  | 130 +-----------
 packages/react/src/IsSomeRendererActing.js    |  17 --
 packages/react/src/ReactSharedInternals.js    |   2 -
 .../ReactCoffeeScriptClass-test.coffee        |   2 +-
 .../react/src/__tests__/ReactES6Class-test.js |   2 +-
 .../__tests__/ReactProfiler-test.internal.js  |  69 ++++---
 .../ReactStrictMode-test.internal.js          |   3 +-
 .../__tests__/ReactTypeScriptClass-test.ts    |   5 +-
 ...OMTestUtils.d.ts => ReactInternalAct.d.ts} |   4 +-
 .../src/forks/ReactSharedInternals.umd.js     |   2 -
 .../src/__tests__/useSubscription-test.js     |   2 +-
 scripts/jest/typescript/preprocessor.js       |   2 +-
 scripts/rollup/bundles.js                     |   2 +-
 81 files changed, 574 insertions(+), 842 deletions(-)
 rename packages/{react-dom/src/test-utils/ReactTestUtilsInternalAct.js => jest-react/src/internalAct.js} (79%)
 delete mode 100644 packages/react/src/IsSomeRendererActing.js
 rename packages/react/src/__tests__/testDefinitions/{ReactDOMTestUtils.d.ts => ReactInternalAct.d.ts} (77%)

diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
index 1f26cbee3a32..b4688f1ff980 100644
--- a/packages/jest-react/src/JestReact.js
+++ b/packages/jest-react/src/JestReact.js
@@ -10,6 +10,8 @@ import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
+export {act} from './internalAct';
+
 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
diff --git a/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js b/packages/jest-react/src/internalAct.js
similarity index 79%
rename from packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
rename to packages/jest-react/src/internalAct.js
index 6afe4af8aa49..486d84c31f64 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtilsInternalAct.js
+++ b/packages/jest-react/src/internalAct.js
@@ -4,36 +4,27 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict
  */
 
-import type {Thenable} from 'shared/ReactTypes';
-
-import * as ReactDOM from 'react-dom';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-import enqueueTask from 'shared/enqueueTask';
-import * as Scheduler from 'scheduler';
-
-const SecretInternals =
-  ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-const IsThisRendererActing = SecretInternals.IsThisRendererActing;
-
-const batchedUpdates = ReactDOM.unstable_batchedUpdates;
-
-const {IsSomeRendererActing, ReactCurrentActQueue} = ReactSharedInternals;
-
 // 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.
-// TODO: Replace the internal "concurrent" implementations of `act` with a
-// single shared module.
+
+import type {Thenable} from 'shared/ReactTypes';
+
+import * as Scheduler from 'scheduler/unstable_mock';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import enqueueTask from 'shared/enqueueTask';
+const {ReactCurrentActQueue} = ReactSharedInternals;
 
 let actingUpdatesScopeDepth = 0;
 
-export function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
+export function act(scope: () => Thenable<mixed> | void) {
   if (Scheduler.unstable_flushAllWithoutAsserting === undefined) {
     throw Error(
       'This version of `act` requires a special mock build of Scheduler.',
@@ -47,10 +38,6 @@ export function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
   }
 
   const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  const previousIsSomeRendererActing = IsSomeRendererActing.current;
-  const previousIsThisRendererActing = IsThisRendererActing.current;
-  IsSomeRendererActing.current = true;
-  IsThisRendererActing.current = true;
   actingUpdatesScopeDepth++;
   if (__DEV__ && actingUpdatesScopeDepth === 1) {
     ReactCurrentActQueue.disableActWarning = true;
@@ -61,8 +48,6 @@ export function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
       ReactCurrentActQueue.disableActWarning = false;
     }
     actingUpdatesScopeDepth--;
-    IsSomeRendererActing.current = previousIsSomeRendererActing;
-    IsThisRendererActing.current = previousIsThisRendererActing;
 
     if (__DEV__) {
       if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
@@ -80,7 +65,7 @@ export function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
   // returned and 2) we could use async/await. Since it's only our used in
   // our test suite, we should be able to.
   try {
-    const thenable = batchedUpdates(scope);
+    const thenable = scope();
     if (
       typeof thenable === 'object' &&
       thenable !== null &&
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 4961cbcff72a..8d0fbe1609d9 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -26,7 +26,7 @@ describe('ReactFlight', () => {
     ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
-    act = ReactNoop.act;
+    act = require('jest-react').act;
 
     ErrorBoundary = class extends React.Component {
       state = {hasError: false, error: null};
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 2d09e2864d4b..1a35fd284c90 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -22,7 +22,7 @@ describe('ReactHooksInspectionIntegration', () => {
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
-    act = ReactTestRenderer.unstable_concurrentAct;
+    act = require('jest-react').act;
     ReactDebugTools = require('react-debug-tools');
   });
 
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 44fbf9fd470c..be6a3d7b8604 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -26,7 +26,6 @@ describe('InspectedElement', () => {
   let InspectedElementContext;
   let InspectedElementContextController;
   let StoreContext;
-  let TestUtils;
   let TreeContextController;
 
   let TestUtilsAct;
@@ -45,10 +44,9 @@ describe('InspectedElement', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     PropTypes = require('prop-types');
-    TestUtils = require('react-dom/test-utils');
-    TestUtilsAct = TestUtils.unstable_concurrentAct;
+    TestUtilsAct = require('jest-react').act;
     TestRenderer = utils.requireTestRenderer();
-    TestRendererAct = TestUtils.unstable_concurrentAct;
+    TestRendererAct = require('jest-react').act;
 
     BridgeContext = require('react-devtools-shared/src/devtools/views/context')
       .BridgeContext;
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index 4a365acb0ef3..7468eb48d1cd 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -13,14 +13,14 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('Store component filters', () => {
   let React;
   let ReactDOM;
-  let TestUtils;
   let Types;
   let bridge: FrontendBridge;
   let store: Store;
   let utils;
+  let internalAct;
 
   const act = (callback: Function) => {
-    TestUtils.unstable_concurrentAct(() => {
+    internalAct(() => {
       callback();
     });
     jest.runAllTimers(); // Flush Bridge operations
@@ -35,9 +35,9 @@ describe('Store component filters', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    TestUtils = require('react-dom/test-utils');
     Types = require('react-devtools-shared/src/types');
     utils = require('./utils');
+    internalAct = require('jest-react').act;
   });
 
   it('should throw if filters are updated while profiling', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index d9ecced72e8a..ef2873a80bd7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -28,7 +28,7 @@ describe('ReactDOMFiberAsync', () => {
     container = document.createElement('div');
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
     Scheduler = require('scheduler');
 
     document.body.appendChild(container);
diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
index 23c7491c319c..7aed4305876b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -23,7 +23,7 @@ describe('ReactDOMHooks', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
 
     container = document.createElement('div');
     document.body.appendChild(container);
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index d8d7c710ff57..702f213d7a2e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -24,7 +24,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
 
     document.body.appendChild(container);
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
index 7c46355525e7..6fb1b1072bdf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
@@ -13,7 +13,6 @@ describe('ReactDOMNestedEvents', () => {
   let React;
   let ReactDOM;
   let Scheduler;
-  let TestUtils;
   let act;
   let useState;
 
@@ -22,8 +21,7 @@ describe('ReactDOMNestedEvents', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
-    TestUtils = require('react-dom/test-utils');
-    act = TestUtils.unstable_concurrentAct;
+    act = require('jest-react').act;
     useState = React.useState;
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 6fb631fb4dbf..0c264240976e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -25,7 +25,7 @@ describe('ReactDOMRoot', () => {
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
   });
 
   it('renders children', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index 7d6e894a9bdb..cfd23f843c14 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -44,7 +44,7 @@ function initModules() {
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
   Scheduler = require('scheduler');
-  act = ReactTestUtils.unstable_concurrentAct;
+  act = require('jest-react').act;
   useState = React.useState;
   useReducer = React.useReducer;
   useEffect = React.useEffect;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 8e3c99ccc283..a78298878b37 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -80,7 +80,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 73269b2262e5..76d9b43d07f6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -14,7 +14,6 @@ import {createEventTarget} from 'dom-event-testing-library';
 let React;
 let ReactDOM;
 let ReactDOMServer;
-let ReactTestUtils;
 let Scheduler;
 let Suspense;
 let act;
@@ -118,8 +117,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMServer = require('react-dom/server');
-    ReactTestUtils = require('react-dom/test-utils');
-    act = ReactTestUtils.unstable_concurrentAct;
+    act = require('jest-react').act;
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index c987ec3b8bb0..60ab2edbdcf2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -25,7 +25,7 @@ function initModules() {
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
-  act = ReactTestUtils.unstable_concurrentAct;
+  act = require('jest-react').act;
 
   // Make them available to the helpers.
   return {
diff --git a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
index 44f6aeebe671..35204db4ef51 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
@@ -13,7 +13,6 @@ let React;
 let ReactDOM;
 let Suspense;
 let ReactCache;
-let ReactTestUtils;
 let Scheduler;
 let TextResource;
 let act;
@@ -26,9 +25,8 @@ describe('ReactDOMSuspensePlaceholder', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactCache = require('react-cache');
-    ReactTestUtils = require('react-dom/test-utils');
     Scheduler = require('scheduler');
-    act = ReactTestUtils.unstable_concurrentAct;
+    act = require('jest-react').act;
     Suspense = React.Suspense;
     container = document.createElement('div');
     document.body.appendChild(container);
diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
index 85c7a2311e0c..c5a1403ddc52 100644
--- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -45,7 +45,7 @@ describe('ReactErrorBoundaries', () => {
     ReactFeatureFlags.skipUnmountedBoundaries = true;
     ReactDOM = require('react-dom');
     React = require('react');
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
     Scheduler = require('scheduler');
 
     BrokenConstructor = class extends React.Component {
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index fd883f7e32d4..a49b62062d32 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -21,7 +21,7 @@ describe('ReactUpdates', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('react-dom/test-utils');
-    act = ReactTestUtils.unstable_concurrentAct;
+    act = require('jest-react').act;
     Scheduler = require('scheduler');
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index ac6e37374f0a..66cf344814dc 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -10,6 +10,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let Suspense;
 let SuspenseList;
 let getCacheForType;
@@ -20,6 +21,7 @@ beforeEach(() => {
   React = require('react');
   ReactNoop = require('react-noop-renderer');
   Scheduler = require('scheduler');
+  act = require('jest-react').act;
 
   Suspense = React.Suspense;
   SuspenseList = React.SuspenseList;
@@ -180,12 +182,12 @@ test('warns in DEV if return pointer is inconsistent', async () => {
   }
 
   const root = ReactNoop.createRoot();
-  await ReactNoop.act(async () => {
+  await act(async () => {
     root.render(<App text="A" />);
   });
 
   spyOnDev(console, 'error');
-  await ReactNoop.act(async () => {
+  await act(async () => {
     root.render(<App text="B" />);
   });
   expect(console.error.calls.count()).toBe(1);
@@ -225,7 +227,7 @@ test('regression (#20932): return pointer is correct before entering deleted tre
   }
 
   const root = ReactNoop.createRoot();
-  await ReactNoop.act(async () => {
+  await act(async () => {
     root.render(<App />);
   });
   expect(Scheduler).toHaveYielded([
@@ -233,11 +235,11 @@ test('regression (#20932): return pointer is correct before entering deleted tre
     'Loading Async...',
     'Loading Tail...',
   ]);
-  await ReactNoop.act(async () => {
+  await act(async () => {
     resolveText(0);
   });
   expect(Scheduler).toHaveYielded([0, 'Tail']);
-  await ReactNoop.act(async () => {
+  await act(async () => {
     setAsyncText(x => x + 1);
   });
   expect(Scheduler).toHaveYielded([
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index eec0de44fb5b..81be4cb30d72 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -15,10 +15,11 @@ const shouldIgnoreConsoleError = require('../../../../../scripts/jest/shouldIgno
 module.exports = function(initModules) {
   let ReactDOM;
   let ReactDOMServer;
-  let ReactTestUtils;
+  let act;
 
   function resetModules() {
-    ({ReactDOM, ReactDOMServer, ReactTestUtils} = initModules());
+    ({ReactDOM, ReactDOMServer} = initModules());
+    act = require('jest-react').act;
   }
 
   function shouldUseDocument(reactElement) {
@@ -50,11 +51,11 @@ module.exports = function(initModules) {
   function asyncReactDOMRender(reactElement, domElement, forceHydrate) {
     return new Promise(resolve => {
       if (forceHydrate) {
-        ReactTestUtils.unstable_concurrentAct(() => {
+        act(() => {
           ReactDOM.hydrate(reactElement, domElement);
         });
       } else {
-        ReactTestUtils.unstable_concurrentAct(() => {
+        act(() => {
           ReactDOM.render(reactElement, domElement);
         });
       }
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index e603121d82c0..f2affc78a58c 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -28,7 +28,6 @@ import {
   flushSync,
   flushControlled,
   injectIntoDevTools,
-  IsThisRendererActing,
   attemptSynchronousHydration,
   attemptDiscreteHydration,
   attemptContinuousHydration,
@@ -164,8 +163,6 @@ const Internals = {
     restoreStateIfNeeded,
     batchedUpdates,
   ],
-  // TODO: Temporary. Only used by our internal version of `act. Will remove.
-  IsThisRendererActing,
 };
 
 export {
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index b4765bc8ad38..4f2df6fffc49 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -16,7 +16,6 @@ let ReactFeatureFlags;
 let ReactDOM;
 let ReactDOMServer;
 let Scheduler;
-let ReactTestUtils;
 let act;
 
 function dispatchEvent(element, type) {
@@ -67,7 +66,7 @@ describe('DOMPluginEventSystem', () => {
           ReactDOM = require('react-dom');
           Scheduler = require('scheduler');
           ReactDOMServer = require('react-dom/server');
-          act = require('react-dom/test-utils').unstable_concurrentAct;
+          act = require('jest-react').act;
           container = document.createElement('div');
           document.body.appendChild(container);
           startNativeEventListenerClearDown();
@@ -1253,8 +1252,7 @@ describe('DOMPluginEventSystem', () => {
             ReactDOM = require('react-dom');
             Scheduler = require('scheduler');
             ReactDOMServer = require('react-dom/server');
-            ReactTestUtils = require('react-dom/test-utils');
-            act = ReactTestUtils.unstable_concurrentAct;
+            act = require('jest-react').act;
           });
 
           // @gate www
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index 507de50f1408..b1a5649624ae 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -11,9 +11,9 @@
 
 let React;
 let ReactDOM;
-let TestUtils;
 let ReactFeatureFlags;
 let Scheduler;
+let act;
 
 const setUntrackedChecked = Object.getOwnPropertyDescriptor(
   HTMLInputElement.prototype,
@@ -56,7 +56,7 @@ describe('ChangeEventPlugin', () => {
     };
     React = require('react');
     ReactDOM = require('react-dom');
-    TestUtils = require('react-dom/test-utils');
+    act = require('jest-react').act;
     Scheduler = require('scheduler');
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -727,7 +727,6 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('mouse enter/leave should be user-blocking but not discrete', async () => {
-      const {unstable_concurrentAct: act} = TestUtils;
       const {useState} = React;
 
       const root = ReactDOM.createRoot(container);
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index 73c1e90f4ae5..ba830d939c5f 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -237,7 +237,7 @@ describe('SimpleEventPlugin', function() {
       ReactDOM = require('react-dom');
       Scheduler = require('scheduler');
 
-      act = require('react-dom/test-utils').unstable_concurrentAct;
+      act = require('jest-react').act;
     });
 
     it('flushes pending interactive work before exiting event handler', async () => {
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index e721dd30e7a3..cc93dc866eaa 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -18,7 +18,6 @@ import {
 import {SyntheticEvent} from '../events/SyntheticEvent';
 import invariant from 'shared/invariant';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
-import {unstable_concurrentAct} from './ReactTestUtilsInternalAct';
 import {
   rethrowCaughtError,
   invokeGuardedCallbackAndCatchFirstError,
@@ -732,5 +731,4 @@ export {
   nativeTouchData,
   Simulate,
   act,
-  unstable_concurrentAct,
 };
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
index 62eb6630de2e..df151bbf72c2 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
@@ -15,7 +15,6 @@ let React;
 let ReactFeatureFlags;
 let ReactDOM;
 let useFocusWithin;
-let ReactTestRenderer;
 let act;
 let Scheduler;
 
@@ -27,9 +26,8 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableCreateEventHandleAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
-  ReactTestRenderer = require('react-test-renderer');
   Scheduler = require('scheduler');
-  act = ReactTestRenderer.unstable_concurrentAct;
+  act = require('jest-react').act;
 
   // TODO: This import throws outside of experimental mode. Figure out better
   // strategy for gated imports.
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 59cea7cd5d97..8dbadafd2c22 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -16,7 +16,7 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {UpdateQueue} from 'react-reconciler/src/ReactUpdateQueue';
-import type {ReactNodeList, Thenable} from 'shared/ReactTypes';
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
@@ -29,10 +29,6 @@ import {
   LegacyRoot,
 } from 'react-reconciler/constants';
 
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-import enqueueTask from 'shared/enqueueTask';
-const {IsSomeRendererActing, ReactCurrentActQueue} = ReactSharedInternals;
-
 type Container = {
   rootID: string,
   children: Array<Instance | TextInstance>,
@@ -927,8 +923,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     flushPassiveEffects: NoopRenderer.flushPassiveEffects,
 
-    act: noopAct,
-
     // Logs the current state of the tree.
     dumpTree(rootID: string = DEFAULT_ROOT_ID) {
       const root = roots.get(rootID);
@@ -1042,129 +1036,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     },
   };
 
-  // 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.
-  // TODO: Replace the internal "concurrent" implementations of `act` with a
-  // single shared module.
-
-  const {batchedUpdates, IsThisRendererActing} = NoopRenderer;
-  let actingUpdatesScopeDepth = 0;
-
-  function noopAct(scope: () => Thenable<mixed> | void) {
-    if (Scheduler.unstable_flushAllWithoutAsserting === undefined) {
-      throw Error(
-        'This version of `act` requires a special mock build of Scheduler.',
-      );
-    }
-    if (setTimeout._isMockFunction !== true) {
-      throw Error(
-        "This version of `act` requires Jest's timer mocks " +
-          '(i.e. jest.useFakeTimers).',
-      );
-    }
-
-    const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-    const previousIsSomeRendererActing = IsSomeRendererActing.current;
-    const previousIsThisRendererActing = IsThisRendererActing.current;
-    IsSomeRendererActing.current = true;
-    IsThisRendererActing.current = true;
-    actingUpdatesScopeDepth++;
-    if (__DEV__ && actingUpdatesScopeDepth === 1) {
-      ReactCurrentActQueue.disableActWarning = true;
-    }
-
-    const unwind = () => {
-      if (__DEV__ && actingUpdatesScopeDepth === 1) {
-        ReactCurrentActQueue.disableActWarning = false;
-      }
-      actingUpdatesScopeDepth--;
-      IsSomeRendererActing.current = previousIsSomeRendererActing;
-      IsThisRendererActing.current = previousIsThisRendererActing;
-
-      if (__DEV__) {
-        if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
-          // if it's _less than_ previousActingUpdatesScopeDepth, then we can
-          // assume the 'other' one has warned
-          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. ',
-          );
-        }
-      }
-    };
-
-    // TODO: This would be way simpler if 1) we required a promise to be
-    // returned and 2) we could use async/await. Since it's only our used in
-    // our test suite, we should be able to.
-    try {
-      const thenable = batchedUpdates(scope);
-      if (
-        typeof thenable === 'object' &&
-        thenable !== null &&
-        typeof thenable.then === 'function'
-      ) {
-        return {
-          then(resolve: () => void, reject: (error: mixed) => void) {
-            thenable.then(
-              () => {
-                flushActWork(
-                  () => {
-                    unwind();
-                    resolve();
-                  },
-                  error => {
-                    unwind();
-                    reject(error);
-                  },
-                );
-              },
-              error => {
-                unwind();
-                reject(error);
-              },
-            );
-          },
-        };
-      } else {
-        try {
-          // TODO: Let's not support non-async scopes at all in our tests. Need to
-          // migrate existing tests.
-          let didFlushWork;
-          do {
-            didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
-          } while (didFlushWork);
-        } finally {
-          unwind();
-        }
-      }
-    } catch (error) {
-      unwind();
-      throw error;
-    }
-  }
-
-  function flushActWork(resolve, reject) {
-    // Flush suspended fallbacks
-    // $FlowFixMe: Flow doesn't know about global Jest object
-    jest.runOnlyPendingTimers();
-    enqueueTask(() => {
-      try {
-        const didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
-        if (didFlushWork) {
-          flushActWork(resolve, reject);
-        } else {
-          resolve();
-        }
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
   return ReactNoop;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 6675ed78d5ff..7f1a53522da5 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -26,7 +26,6 @@ import {
   flushControlled as flushControlled_old,
   flushSync as flushSync_old,
   flushPassiveEffects as flushPassiveEffects_old,
-  IsThisRendererActing as IsThisRendererActing_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
   attemptDiscreteHydration as attemptDiscreteHydration_old,
@@ -66,7 +65,6 @@ import {
   flushControlled as flushControlled_new,
   flushSync as flushSync_new,
   flushPassiveEffects as flushPassiveEffects_new,
-  IsThisRendererActing as IsThisRendererActing_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
   attemptDiscreteHydration as attemptDiscreteHydration_new,
@@ -125,9 +123,6 @@ export const flushSync = enableNewReconciler ? flushSync_new : flushSync_old;
 export const flushPassiveEffects = enableNewReconciler
   ? flushPassiveEffects_new
   : flushPassiveEffects_old;
-export const IsThisRendererActing = enableNewReconciler
-  ? IsThisRendererActing_new
-  : IsThisRendererActing_old;
 export const getPublicRootInstance = enableNewReconciler
   ? getPublicRootInstance_new
   : getPublicRootInstance_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 9e831157bf5f..1c549125a43d 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -60,7 +60,6 @@ import {
   discreteUpdates,
   flushDiscreteUpdates,
   flushPassiveEffects,
-  IsThisRendererActing,
 } from './ReactFiberWorkLoop.new';
 import {
   createUpdate,
@@ -337,7 +336,6 @@ export {
   flushControlled,
   flushSync,
   flushPassiveEffects,
-  IsThisRendererActing,
 };
 
 export function getPublicRootInstance(
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 8accca3deb35..f57b1f84814c 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -60,7 +60,6 @@ import {
   discreteUpdates,
   flushDiscreteUpdates,
   flushPassiveEffects,
-  IsThisRendererActing,
 } from './ReactFiberWorkLoop.old';
 import {
   createUpdate,
@@ -337,7 +336,6 @@ export {
   flushControlled,
   flushSync,
   flushPassiveEffects,
-  IsThisRendererActing,
 };
 
 export function getPublicRootInstance(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b4f889c569af..b21c7b2e33f9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2767,9 +2767,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   }
 }
 
-// a 'shared' variable that changes when act() opens/closes in tests.
-export const IsThisRendererActing = {current: (false: boolean)};
-
 export function restorePendingUpdaters(root: FiberRoot, lanes: Lanes): void {
   if (enableUpdaterTracking) {
     if (isDevToolsPresent) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d2ccf9e6826a..399ea10393ef 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2767,9 +2767,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   }
 }
 
-// a 'shared' variable that changes when act() opens/closes in tests.
-export const IsThisRendererActing = {current: (false: boolean)};
-
 export function restorePendingUpdaters(root: FiberRoot, lanes: Lanes): void {
   if (enableUpdaterTracking) {
     if (isDevToolsPresent) {
diff --git a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
index 1de9050caa4a..85d3fbbab534 100644
--- a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let Suspense;
 let useState;
 let textCache;
@@ -16,6 +17,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     Suspense = React.Suspense;
     useState = React.useState;
 
@@ -123,7 +125,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
       expect(Scheduler).toFlushUntilNextPaint(['Outer', 'Loading...']);
       expect(root).toMatchRenderedOutput(
@@ -165,7 +167,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Initial mount
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     // Inner contents finish in separate commit from outer
@@ -178,7 +180,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
 
     // Update
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setCount(1);
     });
     // Entire update finishes in a single commit
@@ -208,7 +210,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
       expect(Scheduler).toFlushUntilNextPaint(['Outer', 'Loading...']);
       expect(root).toMatchRenderedOutput(
@@ -228,7 +230,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
 
     // Resolve the data and finish rendering
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('Inner');
     });
     expect(Scheduler).toHaveYielded(['Inner']);
@@ -264,7 +266,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     // Each level commits separately
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 01488a8b3a7b..4f6caa4c6a80 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -3,6 +3,7 @@ let ReactNoop;
 let Cache;
 let getCacheForType;
 let Scheduler;
+let act;
 let Suspense;
 let useCacheRefresh;
 let startTransition;
@@ -19,6 +20,7 @@ describe('ReactCache', () => {
     ReactNoop = require('react-noop-renderer');
     Cache = React.unstable_Cache;
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     Suspense = React.Suspense;
     getCacheForType = React.unstable_getCacheForType;
     useCacheRefresh = React.unstable_useCacheRefresh;
@@ -152,7 +154,7 @@ describe('ReactCache', () => {
   // @gate experimental || www
   test('render Cache component', async () => {
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<Cache>Hi</Cache>);
     });
     expect(root).toMatchRenderedOutput('Hi');
@@ -161,7 +163,7 @@ describe('ReactCache', () => {
   // @gate experimental || www
   test('mount new data', async () => {
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Cache>
           <Suspense fallback={<Text text="Loading..." />}>
@@ -173,7 +175,7 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('Loading...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A']);
@@ -183,7 +185,7 @@ describe('ReactCache', () => {
   // @gate experimental || www
   test('root acts as implicit cache boundary', async () => {
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Suspense fallback={<Text text="Loading..." />}>
           <AsyncText text="A" />
@@ -193,7 +195,7 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('Loading...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A']);
@@ -220,7 +222,7 @@ describe('ReactCache', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App showMore={false} />);
     });
     // Even though there are two new <Cache /> trees, they should share the same
@@ -232,7 +234,7 @@ describe('ReactCache', () => {
     ]);
     expect(root).toMatchRenderedOutput('Loading...Loading...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
@@ -256,7 +258,7 @@ describe('ReactCache', () => {
       }
 
       const root = ReactNoop.createRoot();
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App />);
       });
       // Even though there are two new <Cache /> trees, they should share the same
@@ -264,7 +266,7 @@ describe('ReactCache', () => {
       expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
       expect(root).toMatchRenderedOutput('Loading...');
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A', 'A']);
@@ -290,7 +292,7 @@ describe('ReactCache', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       seedNextTextCache('A');
       root.render(<App showMore={false} />);
     });
@@ -298,7 +300,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]');
 
     // Add a new cache boundary
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App showMore={true} />);
     });
     expect(Scheduler).toHaveYielded([
@@ -331,7 +333,7 @@ describe('ReactCache', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       seedNextTextCache('A');
       root.render(<App showMore={false} />);
     });
@@ -339,7 +341,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]');
 
     // Add a new cache boundary
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App showMore={true} />);
     });
     expect(Scheduler).toHaveYielded([
@@ -349,7 +351,7 @@ describe('ReactCache', () => {
       'Loading...',
     ]);
     expect(root).toMatchRenderedOutput('A [v1]Loading...');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v2]']);
@@ -396,13 +398,13 @@ describe('ReactCache', () => {
       return <Text text="Content" />;
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading shell...']);
     expect(root).toMatchRenderedOutput('Loading shell...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded([
@@ -419,7 +421,7 @@ describe('ReactCache', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('B');
     });
     expect(Scheduler).toHaveYielded(['Content']);
@@ -441,7 +443,7 @@ describe('ReactCache', () => {
 
     // Mount initial data
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Cache>
           <Suspense fallback={<Text text="Loading..." />}>
@@ -453,20 +455,20 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('Loading...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
     // Fefresh for new data.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => refresh());
     });
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     // Note that the version has updated
@@ -484,7 +486,7 @@ describe('ReactCache', () => {
 
     // Mount initial data
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Suspense fallback={<Text text="Loading..." />}>
           <App />
@@ -494,20 +496,20 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('Loading...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
     // Refresh for new data.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => refresh());
     });
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     // Note that the version has updated
@@ -525,7 +527,7 @@ describe('ReactCache', () => {
 
     // Mount initial data
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Cache>
           <Suspense fallback={<Text text="Loading..." />}>
@@ -537,14 +539,14 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('Loading...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
     // Refresh for new data.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Refresh the cache with seeded data, like you would receive from a
       // server mutation.
       // TODO: Seeding multiple typed caches. Should work by calling `refresh`
@@ -585,7 +587,7 @@ describe('ReactCache', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       seedNextTextCache('A');
       root.render(<App showMore={false} />);
     });
@@ -593,7 +595,7 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('A [v1]');
 
     // Add a new cache boundary
-    await ReactNoop.act(async () => {
+    await act(async () => {
       seedNextTextCache('A');
       root.render(<App showMore={true} />);
     });
@@ -606,7 +608,7 @@ describe('ReactCache', () => {
 
     // Now refresh the shell. This should also cause the "Show More" contents to
     // refresh, since its cache is nested inside the outer one.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => refreshShell());
     });
     expect(Scheduler).toHaveYielded([
@@ -616,7 +618,7 @@ describe('ReactCache', () => {
     ]);
     expect(root).toMatchRenderedOutput('A [v1]A [v2]');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v3]', 'A [v3]']);
@@ -657,12 +659,12 @@ describe('ReactCache', () => {
       // treated like sibling providers that happen to share an underlying
       // cache, as opposed to consumers of the root-level cache.
       const root = ReactNoop.createRoot();
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App showMore={false} />);
       });
 
       // Now reveal the boundaries. In a real app  this would be a navigation.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App showMore={true} />);
       });
 
@@ -675,7 +677,7 @@ describe('ReactCache', () => {
       ]);
       expect(root).toMatchRenderedOutput('Loading...Loading...');
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]']);
@@ -683,12 +685,12 @@ describe('ReactCache', () => {
 
       // Refresh the first boundary. It should not refresh the second boundary,
       // even though they previously shared the same underlying cache.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await refreshFirstBoundary();
       });
       expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
@@ -723,7 +725,7 @@ describe('ReactCache', () => {
       }
 
       const root = ReactNoop.createRoot();
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App showMore={false} />);
       });
       expect(Scheduler).toHaveYielded([
@@ -732,7 +734,7 @@ describe('ReactCache', () => {
         'Loading...',
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         // This will resolve the content in the first cache
         resolveMostRecentTextCache('A');
         resolveMostRecentTextCache('B');
@@ -750,7 +752,7 @@ describe('ReactCache', () => {
       ]);
 
       // Now resolve the second tree
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveMostRecentTextCache('A');
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
@@ -769,7 +771,7 @@ describe('ReactCache', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Suspense fallback={<Text text="Loading..." />}>(empty)</Suspense>,
       );
@@ -777,7 +779,7 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded([]);
     expect(root).toMatchRenderedOutput('(empty)');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         root.render(
           <Suspense fallback={<Text text="Loading..." />}>
@@ -789,7 +791,7 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('(empty)');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         root.render(
           <Suspense fallback={<Text text="Loading..." />}>
@@ -806,14 +808,14 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('(empty)');
 
     // Resolve the request
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]A [v1]');
 
     // Now do another transition
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         root.render(
           <Suspense fallback={<Text text="Loading..." />}>
@@ -834,7 +836,7 @@ describe('ReactCache', () => {
     ]);
     expect(root).toMatchRenderedOutput('A [v1]A [v1]');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]', 'A [v2]']);
@@ -877,13 +879,13 @@ describe('ReactCache', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App showMore={false} />);
     });
     expect(Scheduler).toHaveYielded(['0']);
     expect(root).toMatchRenderedOutput('0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         showMore();
       });
@@ -891,7 +893,7 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
     expect(root).toMatchRenderedOutput('0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       updateUnrelated(1);
     });
     expect(Scheduler).toHaveYielded([
@@ -903,7 +905,7 @@ describe('ReactCache', () => {
     ]);
     expect(root).toMatchRenderedOutput('1');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveMostRecentTextCache('A');
     });
     expect(Scheduler).toHaveYielded(['A']);
diff --git a/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js b/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js
index 13d9ce838c03..0f97bb599718 100644
--- a/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactClassSetStateCallback-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 
 describe('ReactClassSetStateCallback', () => {
   beforeEach(() => {
@@ -9,6 +10,7 @@ describe('ReactClassSetStateCallback', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
   });
 
   function Text({text}) {
@@ -27,12 +29,12 @@ describe('ReactClassSetStateCallback', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([0]);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       app.setState({step: 1}, () =>
         Scheduler.unstable_yieldValue('Callback 1'),
       );
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index 0dcc18f074ac..f568e40ccad7 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let useState;
 let useContext;
 let Suspense;
@@ -16,6 +17,7 @@ describe('ReactLazyContextPropagation', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     useState = React.useState;
     useContext = React.useContext;
     Suspense = React.Suspense;
@@ -195,13 +197,13 @@ describe('ReactLazyContextPropagation', () => {
         return <Text text={value} />;
       }
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App />);
       });
       expect(Scheduler).toHaveYielded([0]);
       expect(root).toMatchRenderedOutput('0');
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setValue(1);
       });
       expect(Scheduler).toHaveYielded([1]);
@@ -237,13 +239,13 @@ describe('ReactLazyContextPropagation', () => {
       return <Text text={value} />;
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([0]);
     expect(root).toMatchRenderedOutput('0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setValue(1);
     });
     expect(Scheduler).toHaveYielded([1]);
@@ -280,13 +282,13 @@ describe('ReactLazyContextPropagation', () => {
       return <Text text={value} />;
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([0]);
     expect(root).toMatchRenderedOutput('0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setValue(1);
     });
     expect(Scheduler).toHaveYielded([1]);
@@ -318,13 +320,13 @@ describe('ReactLazyContextPropagation', () => {
       return <Text text={value} />;
     });
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['Consumer', 0]);
     expect(root).toMatchRenderedOutput('0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // 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.
@@ -380,13 +382,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     await seedNextTextCache('A');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Intentionally not wrapping in startTransition, so that the fallback
       // the fallback displays despite this being a refresh.
       setContext('B');
@@ -394,7 +396,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
     expect(root).toMatchRenderedOutput('Loading...B');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('B');
     });
     expect(Scheduler).toHaveYielded(['B']);
@@ -460,13 +462,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     await seedNextTextCache('A');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A', 'A']);
     expect(root).toMatchRenderedOutput('AAA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Intentionally not wrapping in startTransition, so that the fallback
       // the fallback displays despite this being a refresh.
       setContext('B');
@@ -474,7 +476,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
     expect(root).toMatchRenderedOutput('Loading...B');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B']);
@@ -521,13 +523,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     await seedNextTextCache('A');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Intentionally not wrapping in startTransition, so that the fallback
       // the fallback displays despite this being a refresh.
       setContext('B');
@@ -535,7 +537,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...', 'B']);
     expect(root).toMatchRenderedOutput('Loading...B');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('B');
     });
     expect(Scheduler).toHaveYielded(['B']);
@@ -575,13 +577,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     await seedNextTextCache('A');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setContext('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B']);
@@ -636,13 +638,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     await seedNextTextCache('A');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A', 'A']);
     expect(root).toMatchRenderedOutput('AAA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setContext('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B', 'B']);
@@ -677,13 +679,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setContext('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B']);
@@ -731,13 +733,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setContext('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B']);
@@ -794,19 +796,19 @@ describe('ReactLazyContextPropagation', () => {
 
     const root = ReactNoop.createRoot();
     await seedNextTextCache('A');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setContext('B');
     });
     expect(Scheduler).toHaveYielded(['Suspend! [B]', 'Loading...']);
     expect(root).toMatchRenderedOutput('Loading...');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B']);
@@ -855,13 +857,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setContext('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B']);
@@ -904,13 +906,13 @@ describe('ReactLazyContextPropagation', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setContext('B');
     });
     expect(Scheduler).toHaveYielded(['B', 'B']);
diff --git a/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js b/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
index 6e9ffcfb894f..05a8b84a7f78 100644
--- a/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
@@ -15,6 +15,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let useEffect;
 let useLayoutEffect;
 
@@ -26,6 +27,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     useEffect = React.useEffect;
     useLayoutEffect = React.useLayoutEffect;
   });
@@ -47,11 +49,11 @@ describe('ReactHooksWithNoopRenderer', () => {
       return 'Child';
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<Parent />);
     });
     expect(root).toMatchRenderedOutput('Child');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(null);
     });
     expect(Scheduler).toHaveYielded(['Unmount parent', 'Unmount child']);
@@ -74,11 +76,11 @@ describe('ReactHooksWithNoopRenderer', () => {
       return 'Child';
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<Parent />);
     });
     expect(root).toMatchRenderedOutput('Child');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(null);
     });
     expect(Scheduler).toHaveYielded(['Unmount parent', 'Unmount child']);
diff --git a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
index 8497aa6c9ef6..202348a21bb7 100644
--- a/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactExpiration-test.js
@@ -12,6 +12,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let readText;
 let resolveText;
 let startTransition;
@@ -25,6 +26,7 @@ describe('ReactExpiration', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     startTransition = React.startTransition;
     useState = React.useState;
     useEffect = React.useEffect;
@@ -496,14 +498,14 @@ describe('ReactExpiration', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['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 ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           updateNormalPri();
@@ -527,7 +529,7 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('Sync pri: 1, Normal pri: 1');
 
     // Do the same thing, but starve the first update
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           updateNormalPri();
@@ -575,14 +577,14 @@ describe('ReactExpiration', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['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 ReactNoop.act(async () => {
+    await act(async () => {
       updateIdlePri();
       expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 0']);
       updateSyncPri();
@@ -598,7 +600,7 @@ describe('ReactExpiration', () => {
     expect(root).toMatchRenderedOutput('Sync pri: 1, Idle pri: 1');
 
     // Do the same thing, but starve the first update
-    await ReactNoop.act(async () => {
+    await act(async () => {
       updateIdlePri();
       expect(Scheduler).toFlushAndYieldThrough(['Sync pri: 1']);
 
@@ -638,13 +640,13 @@ describe('ReactExpiration', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A0', 'B0', 'C']);
     expect(root).toMatchRenderedOutput('A0B0C');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         setA(1);
       });
@@ -682,14 +684,14 @@ describe('ReactExpiration', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('A0');
       root.render(<App step={0} />);
     });
     expect(Scheduler).toHaveYielded(['A0', 'B', 'C']);
     expect(root).toMatchRenderedOutput('A0BC');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           root.render(<App step={1} />);
@@ -741,12 +743,12 @@ describe('ReactExpiration', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A0', 'B0']);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         setA(1);
       });
@@ -782,13 +784,13 @@ describe('ReactExpiration', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App step={0} />);
     });
     expect(Scheduler).toHaveYielded(['A0', 'B0', 'C0', 'Effect: 0']);
     expect(root).toMatchRenderedOutput('A0B0C0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         root.render(<App step={1} />);
       });
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index fc1ac7f3377b..a3a74d739a9a 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let useState;
 let useEffect;
 let startTransition;
@@ -12,6 +13,7 @@ describe('ReactFlushSync', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     useState = React.useState;
     useEffect = React.useEffect;
     startTransition = React.startTransition;
@@ -36,7 +38,7 @@ describe('ReactFlushSync', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           root.render(<App />);
@@ -75,13 +77,13 @@ describe('ReactFlushSync', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['0, 0']);
     expect(root).toMatchRenderedOutput('0, 0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.flushSync(() => {
         startTransition(() => {
           // This should be async even though flushSync is on the stack, because
@@ -112,7 +114,7 @@ describe('ReactFlushSync', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.flushSync(() => {
         root.render(<App />);
       });
@@ -135,7 +137,7 @@ describe('ReactFlushSync', () => {
     }
 
     const root = ReactNoop.createLegacyRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.flushSync(() => {
         root.render(<App />);
       });
@@ -159,7 +161,7 @@ describe('ReactFlushSync', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
       expect(Scheduler).toFlushUntilNextPaint([
         'Child',
diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
index ce9236e114b9..c14588788b38 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -31,7 +31,7 @@ describe('ReactHooks', () => {
     ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
     ReactDOMServer = require('react-dom/server');
-    act = ReactTestRenderer.unstable_concurrentAct;
+    act = require('jest-react').act;
   });
 
   if (__DEV__) {
@@ -1775,13 +1775,15 @@ describe('ReactHooks', () => {
     }
 
     await act(async () => {
-      ReactTestRenderer.create(
-        <>
-          <A />
-          <B />
-        </>,
-      );
-      expect(() => Scheduler.unstable_flushAll()).toThrow('Hello');
+      ReactTestRenderer.unstable_batchedUpdates(() => {
+        ReactTestRenderer.create(
+          <>
+            <A />
+            <B />
+          </>,
+        );
+        expect(() => Scheduler.unstable_flushAll()).toThrow('Hello');
+      });
     });
 
     if (__DEV__) {
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index e43804ab5006..fc5e61cd78ee 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -42,6 +42,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     useState = React.useState;
     useReducer = React.useReducer;
     useEffect = React.useEffect;
@@ -55,7 +56,6 @@ describe('ReactHooksWithNoopRenderer', () => {
     useTransition = React.useTransition;
     useDeferredValue = React.useDeferredValue;
     Suspense = React.Suspense;
-    act = ReactNoop.act;
     ContinuousEventPriority = require('react-reconciler/constants')
       .ContinuousEventPriority;
 
@@ -500,7 +500,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       const root = ReactNoop.createRoot();
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(
           <>
             <Foo />
@@ -511,7 +511,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toHaveYielded(['Foo [0]', 'Bar']);
 
       // Bar will update Foo during its render phase. React should warn.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(
           <>
             <Foo />
@@ -527,7 +527,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
 
       // It should not warn again (deduplication).
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(
           <>
             <Foo />
@@ -675,7 +675,7 @@ describe('ReactHooksWithNoopRenderer', () => {
 
       // Test that it works on update, too. This time the log is a bit different
       // because we started with reducerB instead of reducerA.
-      ReactNoop.act(() => {
+      act(() => {
         counter.current.dispatch('reset');
       });
       ReactNoop.render(<Counter ref={counter} />);
@@ -787,7 +787,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield(['A:0']);
       expect(root).toMatchRenderedOutput(<span prop="A:0" />);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
             root.render(<Foo signal={false} />);
@@ -3492,7 +3492,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot(null);
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <>
           <CounterA />
@@ -3507,7 +3507,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       'Commit B: 0',
     ]);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setCounterA(1);
 
       // In the same batch, update B twice. To trigger the condition we're
@@ -3714,7 +3714,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([
@@ -3724,7 +3724,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       'Mount B',
     ]);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('A');
     });
     expect(Scheduler).toHaveYielded([
@@ -3733,7 +3733,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       'Suspend! [B]',
     ]);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(null);
     });
     // In the regression, SuspenseList would cause the children to "forget" that
@@ -3760,25 +3760,25 @@ describe('ReactHooksWithNoopRenderer', () => {
       return <Text text={`Render: ${count}`} />;
     }
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(<Test />);
     });
 
     expect(Scheduler).toHaveYielded(['Render: 0', 'Effect: 0']);
 
-    ReactNoop.act(() => {
+    act(() => {
       handleClick();
     });
 
     expect(Scheduler).toHaveYielded(['Render: 0']);
 
-    ReactNoop.act(() => {
+    act(() => {
       handleClick();
     });
 
     expect(Scheduler).toHaveYielded(['Render: 0']);
 
-    ReactNoop.act(() => {
+    act(() => {
       handleClick();
     });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index ed4c945ea7f3..2d6ad2a97524 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -15,6 +15,7 @@ let PropTypes;
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 
 describe('ReactIncrementalErrorHandling', () => {
   beforeEach(() => {
@@ -25,6 +26,7 @@ describe('ReactIncrementalErrorHandling', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
   });
 
   function div(...children) {
@@ -1843,7 +1845,7 @@ describe('ReactIncrementalErrorHandling', () => {
       throw Error('Oops');
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           root.render(<Oops />);
@@ -1886,11 +1888,11 @@ describe('ReactIncrementalErrorHandling', () => {
       return 'Everything is fine.';
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<Oops />);
     });
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Schedule a default pri and a low pri update on the root.
       root.render(<Oops />);
       React.startTransition(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index 71dfe3529bfb..b603b03c696f 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -13,6 +13,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 
 describe('ReactIncrementalScheduling', () => {
   beforeEach(() => {
@@ -21,6 +22,7 @@ describe('ReactIncrementalScheduling', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
   });
 
   function span(prop) {
@@ -94,7 +96,7 @@ describe('ReactIncrementalScheduling', () => {
       return text;
     }
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.renderToRootWithID(<Text text="a:1" />, 'a');
       ReactNoop.renderToRootWithID(<Text text="b:1" />, 'b');
       ReactNoop.renderToRootWithID(<Text text="c:1" />, 'c');
@@ -106,7 +108,7 @@ describe('ReactIncrementalScheduling', () => {
     expect(ReactNoop.getChildrenAsJSX('c')).toEqual('c:1');
 
     // Schedule deferred work in the reverse order
-    ReactNoop.act(() => {
+    act(() => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           ReactNoop.renderToRootWithID(<Text text="c:2" />, 'c');
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index cd560ae91ca3..200d6453010b 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -14,6 +14,7 @@ let React;
 let ReactNoop;
 let Scheduler;
 let ContinuousEventPriority;
+let act;
 
 describe('ReactIncrementalUpdates', () => {
   beforeEach(() => {
@@ -22,6 +23,7 @@ describe('ReactIncrementalUpdates', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     ContinuousEventPriority = require('react-reconciler/constants')
       .ContinuousEventPriority;
   });
@@ -556,7 +558,7 @@ describe('ReactIncrementalUpdates', () => {
       return null;
     }
 
-    ReactNoop.act(() => {
+    act(() => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           ReactNoop.render(<App />);
@@ -664,13 +666,13 @@ describe('ReactIncrementalUpdates', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['Committed: ']);
     expect(root).toMatchRenderedOutput('');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           pushToLog('A');
@@ -725,13 +727,13 @@ describe('ReactIncrementalUpdates', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([]);
     expect(root).toMatchRenderedOutput('');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           pushToLog('A');
@@ -788,20 +790,20 @@ describe('ReactIncrementalUpdates', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App prop="A" />);
     });
     expect(root).toMatchRenderedOutput('0');
 
     // Changing the prop causes the count to increase by 100
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App prop="B" />);
     });
     expect(root).toMatchRenderedOutput('100');
 
     // Now increment the count by 1 with a state update. And, in the same
     // batch, change the prop back to its original value.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App prop="A" />);
       app.setState(state => ({count: state.count + 1}));
     });
diff --git a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
index bab36c770e71..c9e66fe0399e 100644
--- a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
@@ -4,6 +4,7 @@ let Scheduler;
 let startTransition;
 let useState;
 let useEffect;
+let act;
 
 describe('ReactInterleavedUpdates', () => {
   beforeEach(() => {
@@ -12,6 +13,7 @@ describe('ReactInterleavedUpdates', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     startTransition = React.startTransition;
     useState = React.useState;
     useEffect = React.useEffect;
@@ -42,7 +44,7 @@ describe('ReactInterleavedUpdates', () => {
 
     const root = ReactNoop.createRoot();
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <>
           <Child />
@@ -54,7 +56,7 @@ describe('ReactInterleavedUpdates', () => {
     expect(Scheduler).toHaveYielded([0, 0, 0]);
     expect(root).toMatchRenderedOutput('000');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           updateChildren(1);
@@ -107,7 +109,7 @@ describe('ReactInterleavedUpdates', () => {
 
     const root = ReactNoop.createRoot();
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <>
           <Child />
@@ -119,7 +121,7 @@ describe('ReactInterleavedUpdates', () => {
     expect(Scheduler).toHaveYielded([0, 0, 0]);
     expect(root).toMatchRenderedOutput('000');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       updateChildren(1);
       // Partially render the children. Only the first one.
       expect(Scheduler).toFlushAndYieldThrough([1]);
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
index 89bf6e2cd4e6..639daeb1a98d 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -17,6 +17,7 @@ let React;
 let ReactNoop;
 let Suspense;
 let Scheduler;
+let act;
 
 describe('memo', () => {
   beforeEach(() => {
@@ -26,6 +27,7 @@ describe('memo', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     ({Suspense} = React);
   });
 
@@ -447,12 +449,12 @@ describe('memo', () => {
         }
 
         const root = ReactNoop.createRoot();
-        await ReactNoop.act(async () => {
+        await act(async () => {
           root.render(<App />);
         });
         expect(root).toMatchRenderedOutput('0');
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           setCounter(1);
           ReactNoop.discreteUpdates(() => {
             root.render(<App />);
@@ -483,12 +485,12 @@ describe('memo', () => {
         }
 
         const root = ReactNoop.createRoot();
-        await ReactNoop.act(async () => {
+        await act(async () => {
           root.render(<App />);
         });
         expect(root).toMatchRenderedOutput('0');
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           setCounter(1);
           ReactNoop.discreteUpdates(() => {
             root.render(<App />);
diff --git a/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
index 6fad734ad578..a1f5a92dcebf 100644
--- a/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNoopRendererAct-test.js
@@ -7,13 +7,17 @@
  * @jest-environment node
  */
 
-// sanity tests for ReactNoop.act()
+// sanity tests for act()
 
 const React = require('react');
 const ReactNoop = require('react-noop-renderer');
 const Scheduler = require('scheduler');
+const act = require('jest-react').act;
 
-describe('ReactNoop.act()', () => {
+// 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);
@@ -21,7 +25,7 @@ describe('ReactNoop.act()', () => {
     }
 
     const calledLog = [];
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <App
           callback={() => {
@@ -49,7 +53,7 @@ describe('ReactNoop.act()', () => {
       }, []);
       return ctr;
     }
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['stage 1', 'stage 2']);
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index ec6ee2c407ea..327e72fdc972 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let LegacyHidden;
 let Offscreen;
 let useState;
@@ -13,6 +14,7 @@ describe('ReactOffscreen', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     LegacyHidden = React.unstable_LegacyHidden;
     Offscreen = React.unstable_Offscreen;
     useState = React.useState;
@@ -39,7 +41,7 @@ describe('ReactOffscreen', () => {
 
     // Test the initial mount
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App mode="unstable-defer-without-hiding" />);
       expect(Scheduler).toFlushUntilNextPaint(['Normal']);
       expect(root).toMatchRenderedOutput(<span prop="Normal" />);
@@ -53,7 +55,7 @@ describe('ReactOffscreen', () => {
     );
 
     // Now try after an update
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App mode="visible" />);
     });
     expect(Scheduler).toHaveYielded(['Normal', 'Deferred']);
@@ -64,7 +66,7 @@ describe('ReactOffscreen', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App mode="unstable-defer-without-hiding" />);
       expect(Scheduler).toFlushUntilNextPaint(['Normal']);
       expect(root).toMatchRenderedOutput(
@@ -93,7 +95,7 @@ describe('ReactOffscreen', () => {
     }
 
     const root = ReactNoop.createLegacyRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <>
           <LegacyHidden mode="hidden">
@@ -116,7 +118,7 @@ describe('ReactOffscreen', () => {
     );
 
     // Test that the children can be updated
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setState('B');
     });
     expect(Scheduler).toHaveYielded(['B']);
@@ -138,7 +140,7 @@ describe('ReactOffscreen', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <>
           <LegacyHidden mode="hidden">
@@ -162,7 +164,7 @@ describe('ReactOffscreen', () => {
     );
 
     // Test that the children can be updated
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setState('B');
     });
     expect(Scheduler).toHaveYielded(['B']);
@@ -190,7 +192,7 @@ describe('ReactOffscreen', () => {
     const root = ReactNoop.createRoot();
 
     // Mount hidden tree.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Offscreen mode="hidden">
           <Child />
@@ -205,7 +207,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
 
     // Unhide the tree. The layout effect is mounted.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Offscreen mode="visible">
           <Child />
@@ -230,7 +232,7 @@ describe('ReactOffscreen', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Offscreen mode="visible">
           <Child />
@@ -241,7 +243,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
 
     // Hide the tree. The layout effect is unmounted.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Offscreen mode="hidden">
           <Child />
@@ -255,7 +257,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
 
     // Unhide the tree. The layout effect is re-mounted.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Offscreen mode="visible">
           <Child />
@@ -280,7 +282,7 @@ describe('ReactOffscreen', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Start the tree hidden. The layout effect is not mounted.
       root.render(
         <Offscreen mode="hidden">
@@ -295,7 +297,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
 
     // Show the tree. The layout effect is mounted.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Offscreen mode="visible">
           <Child />
@@ -306,7 +308,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
 
     // Hide the tree again. The layout effect is un-mounted.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <Offscreen mode="hidden">
           <Child />
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index 5f527d75755a..fc315ae0da87 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -13,6 +13,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let NormalPriority;
 let IdlePriority;
 let runWithPriority;
@@ -25,6 +26,7 @@ describe('ReactSchedulerIntegration', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     NormalPriority = Scheduler.unstable_NormalPriority;
     IdlePriority = Scheduler.unstable_IdlePriority;
     runWithPriority = Scheduler.unstable_runWithPriority;
@@ -71,11 +73,11 @@ describe('ReactSchedulerIntegration', () => {
       });
       return null;
     }
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<CleanupEffect />);
     });
     expect(Scheduler).toHaveYielded([]);
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<Effects />);
     });
     expect(Scheduler).toHaveYielded([
@@ -139,7 +141,7 @@ describe('ReactSchedulerIntegration', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App label="A" />);
 
       // Commit the visible content
@@ -244,7 +246,7 @@ describe(
         return null;
       }
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
         expect(Scheduler).toFlushUntilNextPaint([]);
         expect(Scheduler).toFlushUntilNextPaint([]);
@@ -273,7 +275,7 @@ describe(
         );
       }
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         // Partially render the tree, then yield
         startTransition(() => {
           ReactNoop.render(<App />);
diff --git a/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
index c2c872dc41fa..8dd183fd4e42 100644
--- a/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSubtreeFlagsWarning-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let Suspense;
 let useEffect;
 let getCacheForType;
@@ -15,6 +16,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     Suspense = React.Suspense;
     useEffect = React.useEffect;
 
@@ -155,7 +157,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // On initial mount, the suspended component is committed in an incomplete
     // state, without a passive static effect flag.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['Suspend! [Async]']);
@@ -164,7 +166,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     // 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 ReactNoop.act(async () => {
+    await act(async () => {
       resolveText('Async');
     });
     expect(Scheduler).toHaveYielded(['Async', 'Effect']);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index e7e167972404..e00f5e119c5b 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -19,7 +19,7 @@ describe('ReactSuspense', () => {
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
-    act = ReactTestRenderer.unstable_concurrentAct;
+    act = require('jest-react').act;
     Scheduler = require('scheduler');
     ReactCache = require('react-cache');
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index 1cf5d3014f88..b081f82e332c 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -10,6 +10,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let Suspense;
 let getCacheForType;
 let caches;
@@ -23,6 +24,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     Suspense = React.Suspense;
 
     getCacheForType = React.unstable_getCacheForType;
@@ -253,7 +255,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount and suspend.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(
           <App>
             <AsyncText text="Async" ms={1000} />
@@ -280,7 +282,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -302,7 +304,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outside'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -370,7 +372,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount and suspend.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.renderLegacySyncRoot(
           <App>
             <AsyncText text="Async" ms={1000} />
@@ -402,7 +404,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -419,7 +421,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outside'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.renderLegacySyncRoot(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -467,7 +469,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.renderLegacySyncRoot(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -491,7 +493,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Schedule an update that causes React to suspend.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.renderLegacySyncRoot(
           <App>
             <AsyncText text="Async" ms={1000} />
@@ -527,7 +529,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -544,7 +546,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outside'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.renderLegacySyncRoot(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -590,7 +592,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         );
       }
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -614,7 +616,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Schedule an update that causes React to suspend.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App>
             <AsyncText text="Async" ms={1000} />
@@ -652,7 +654,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -673,7 +675,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outside'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -742,7 +744,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -763,7 +765,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Schedule an update that causes React to suspend.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App>
             <AsyncText text="Async" ms={1000} />
@@ -801,7 +803,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -821,7 +823,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outside'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -863,7 +865,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -880,7 +882,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Outer', [span('Inner')])]);
 
       // Schedule an update that causes React to suspend.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App>
             <AsyncText text="Async" ms={1000} />
@@ -911,7 +913,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -930,7 +932,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outer', [span('Inner')]),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -975,7 +977,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -994,7 +996,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Schedule an update that causes React to suspend.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App>
             <AsyncText text="Async" ms={1000} />
@@ -1028,7 +1030,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -1046,7 +1048,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outer', [span('MemoizedInner')]),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -1078,7 +1080,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -1092,7 +1094,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Outer'), span('Inner')]);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App innerChildren={<AsyncText text="InnerAsync_1" ms={1000} />} />,
         );
@@ -1115,7 +1117,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // 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.)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App
             outerChildren={<AsyncText text="OuterAsync_1" ms={1000} />}
@@ -1144,7 +1146,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Show the inner Susepnse subtree (no effects should be recreated)
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('InnerAsync_1');
       });
       expect(Scheduler).toHaveYielded([
@@ -1161,7 +1163,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Suspend the inner Suspense subtree (no effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App
             outerChildren={<AsyncText text="OuterAsync_1" ms={1000} />}
@@ -1186,7 +1188,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Show the outer Susepnse subtree (only outer effects should be recreated)
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('OuterAsync_1');
       });
       expect(Scheduler).toHaveYielded([
@@ -1210,7 +1212,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Show the inner Susepnse subtree (only inner effects should be recreated)
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('InnerAsync_2');
       });
       expect(Scheduler).toHaveYielded([
@@ -1230,7 +1232,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Suspend the outer Suspense subtree (all effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App
             outerChildren={<AsyncText text="OuterAsync_2" ms={1000} />}
@@ -1260,7 +1262,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Show the outer Suspense subtree (all effects should be recreated)
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('OuterAsync_2');
       });
       expect(Scheduler).toHaveYielded([
@@ -1301,7 +1303,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -1315,7 +1317,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Outer'), span('Inner')]);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App innerChildren={<AsyncText text="InnerAsync_1" ms={1000} />} />,
         );
@@ -1338,7 +1340,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // 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.)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App
             outerChildren={<AsyncText text="OuterAsync_1" ms={1000} />}
@@ -1367,7 +1369,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolve both suspended trees.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('OuterAsync_1');
         await resolveText('InnerAsync_1');
       });
@@ -1419,7 +1421,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -1436,7 +1438,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Suspend the outer shell
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App outerChildren={<AsyncText text="OutsideAsync" ms={1000} />} />,
         );
@@ -1472,7 +1474,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Suspend the fallback and verify that it's effects get cleaned up as well
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App
             fallbackChildren={<AsyncText text="FallbackAsync" ms={1000} />}
@@ -1514,7 +1516,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving both resources should cleanup fallabck effects and recreate main effects
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('FallbackAsync');
         await resolveText('OutsideAsync');
       });
@@ -1562,7 +1564,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -1579,7 +1581,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Suspend both the outer boundary and the fallback
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App
             outerChildren={<AsyncText text="OutsideAsync" ms={1000} />}
@@ -1612,7 +1614,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the inside fallback
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('FallbackAsync');
       });
       expect(Scheduler).toHaveYielded([
@@ -1634,7 +1636,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the outer fallback only
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('OutsideAsync');
       });
       expect(Scheduler).toHaveYielded([
@@ -1679,7 +1681,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App shouldSuspend={false} />);
       });
       expect(Scheduler).toHaveYielded([
@@ -1697,7 +1699,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // Suspending a component in the middle of the tree
       // should still properly cleanup effects deeper in the tree
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App shouldSuspend={true} />);
       });
       expect(Scheduler).toHaveYielded([
@@ -1724,7 +1726,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving should cleanup.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Suspend');
       });
       expect(Scheduler).toHaveYielded([
@@ -1783,7 +1785,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           );
         }
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App />
@@ -1810,7 +1812,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         ]);
 
         // Schedule an update that causes React to suspend.
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App>
@@ -1841,7 +1843,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
         // Resolve the pending suspense and throw
         componentDidMountShouldThrow = true;
-        await ReactNoop.act(async () => {
+        await act(async () => {
           await resolveText('Async');
         });
         expect(Scheduler).toHaveYielded([
@@ -1920,7 +1922,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           );
         }
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App />
@@ -1947,7 +1949,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         ]);
 
         // Schedule an update that suspends and triggers our error code.
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App>
@@ -2036,7 +2038,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           );
         }
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App />
@@ -2063,7 +2065,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         ]);
 
         // Schedule an update that causes React to suspend.
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App>
@@ -2094,7 +2096,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
         // Resolve the pending suspense and throw
         useLayoutEffectShouldThrow = true;
-        await ReactNoop.act(async () => {
+        await act(async () => {
           await resolveText('Async');
         });
         expect(Scheduler).toHaveYielded([
@@ -2172,7 +2174,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           );
         }
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App />
@@ -2199,7 +2201,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         ]);
 
         // Schedule an update that suspends and triggers our error code.
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App>
@@ -2279,7 +2281,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         );
       }
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -2295,7 +2297,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Schedule an update that causes React to suspend.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App>
             <AsyncText text="Async_1" ms={1000} />
@@ -2330,7 +2332,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async_1');
       });
       expect(Scheduler).toHaveYielded([
@@ -2346,7 +2348,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async_2');
       });
       expect(Scheduler).toHaveYielded([
@@ -2369,7 +2371,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Class'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -2428,7 +2430,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         );
       }
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -2447,7 +2449,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // Schedule an update that causes React to suspend.
       textToRead = 'A';
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -2480,7 +2482,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // Resolving the suspended resource should re-create inner layout effects.
       textToRead = 'B';
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('A');
       });
       expect(Scheduler).toHaveYielded([
@@ -2497,7 +2499,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('B');
       });
       expect(Scheduler).toHaveYielded([
@@ -2514,7 +2516,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Class'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -2602,7 +2604,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         );
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.renderLegacySyncRoot(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -2620,7 +2622,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.renderLegacySyncRoot(
           <App children={<AsyncText text="Async" ms={1000} />} />,
         );
@@ -2641,7 +2643,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -2653,7 +2655,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Async')]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.renderLegacySyncRoot(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -2681,7 +2683,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -2700,7 +2702,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App children={<AsyncText text="Async" ms={1000} />} />,
         );
@@ -2726,7 +2728,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -2750,7 +2752,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('refCallback'),
       ]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -2787,7 +2789,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -2805,7 +2807,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App children={<AsyncText text="Async" ms={1000} />} />,
         );
@@ -2829,7 +2831,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -2851,7 +2853,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Async')]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -2892,7 +2894,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -2910,7 +2912,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App children={<AsyncText text="Async" ms={1000} />} />,
         );
@@ -2934,7 +2936,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -2956,7 +2958,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Async')]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -3011,7 +3013,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       }
 
       // Mount
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
       expect(Scheduler).toHaveYielded([
@@ -3023,7 +3025,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
 
       // Suspend the inner Suspense subtree (only inner effects should be destroyed)
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <App children={<AsyncText text="Async" ms={1000} />} />,
         );
@@ -3040,7 +3042,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([span('Fallback')]);
 
       // Resolving the suspended resource should re-create inner layout effects.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Async');
       });
       expect(Scheduler).toHaveYielded([
@@ -3055,7 +3057,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Async')]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(null);
       });
       expect(Scheduler).toHaveYielded([
@@ -3107,7 +3109,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           );
         }
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App />
@@ -3134,7 +3136,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         ]);
 
         // Schedule an update that causes React to suspend.
-        await ReactNoop.act(async () => {
+        await act(async () => {
           ReactNoop.render(
             <ErrorBoundary fallback={<Text text="Error" />}>
               <App>
@@ -3165,7 +3167,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
         // Resolve the pending suspense and throw
         useRefCallbackShouldThrow = true;
-        await ReactNoop.act(async () => {
+        await act(async () => {
           await resolveText('Async');
         });
         expect(Scheduler).toHaveYielded([
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
index a0a0d08a2c42..957d5f37c70f 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -2,6 +2,7 @@ let React;
 let Suspense;
 let ReactNoop;
 let Scheduler;
+let act;
 let ReactFeatureFlags;
 let Random;
 
@@ -27,6 +28,7 @@ describe('ReactSuspenseFuzz', () => {
     Suspense = React.Suspense;
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     Random = require('random-seed');
   });
 
@@ -143,7 +145,11 @@ describe('ReactSuspenseFuzz', () => {
         if ((elapsedTime += 1000) > 1000000) {
           throw new Error('Something did not resolve properly.');
         }
-        ReactNoop.act(() => jest.advanceTimersByTime(1000));
+        act(() => {
+          ReactNoop.batchedUpdates(() => {
+            jest.advanceTimersByTime(1000);
+          });
+        });
         Scheduler.unstable_flushAllWithoutAsserting();
       }
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index f50b3a6a7e44..ddd20f35edad 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 let Profiler;
 let Suspense;
 let SuspenseList;
@@ -12,6 +13,7 @@ describe('ReactSuspenseList', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     Profiler = React.Profiler;
     Suspense = React.Suspense;
     SuspenseList = React.SuspenseList;
@@ -284,7 +286,7 @@ describe('ReactSuspenseList', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       C.resolve();
     });
 
@@ -298,7 +300,7 @@ describe('ReactSuspenseList', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       B.resolve();
     });
 
@@ -2203,7 +2205,7 @@ describe('ReactSuspenseList', () => {
     );
 
     // Update the row adjacent to the list
-    ReactNoop.act(() => updateAdjacent('C'));
+    act(() => updateAdjacent('C'));
 
     expect(Scheduler).toHaveYielded(['C']);
 
@@ -2259,7 +2261,7 @@ describe('ReactSuspenseList', () => {
     const previousInst = setAsyncB;
 
     // During an update we suspend on B.
-    ReactNoop.act(() => setAsyncB(true));
+    act(() => setAsyncB(true));
 
     expect(Scheduler).toHaveYielded([
       'Suspend! [B]',
@@ -2277,7 +2279,7 @@ describe('ReactSuspenseList', () => {
 
     // Before we resolve we'll rerender the whole list.
     // This should leave the tree intact.
-    ReactNoop.act(() => ReactNoop.render(<Foo updateList={true} />));
+    act(() => ReactNoop.render(<Foo updateList={true} />));
 
     expect(Scheduler).toHaveYielded(['A', 'Suspend! [B]', 'Loading B']);
 
@@ -2347,7 +2349,7 @@ describe('ReactSuspenseList', () => {
     const previousInst = setAsyncB;
 
     // During an update we suspend on B.
-    ReactNoop.act(() => setAsyncB(true));
+    act(() => setAsyncB(true));
 
     expect(Scheduler).toHaveYielded([
       'Suspend! [B]',
@@ -2365,7 +2367,7 @@ describe('ReactSuspenseList', () => {
 
     // Before we resolve we'll rerender the whole list.
     // This should leave the tree intact.
-    ReactNoop.act(() => ReactNoop.render(<Foo updateList={true} />));
+    act(() => ReactNoop.render(<Foo updateList={true} />));
 
     expect(Scheduler).toHaveYielded(['A', 'Suspend! [B]', 'Loading B']);
 
@@ -2425,7 +2427,7 @@ describe('ReactSuspenseList', () => {
 
     expect(ReactNoop).toMatchRenderedOutput(null);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Add a few items at the end.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 4110772513b8..fdd1a46dbb1e 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -2,6 +2,7 @@ let React;
 let Fragment;
 let ReactNoop;
 let Scheduler;
+let act;
 let Suspense;
 let getCacheForType;
 
@@ -16,6 +17,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     Fragment = React.Fragment;
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     Suspense = React.Suspense;
 
     getCacheForType = React.unstable_getCacheForType;
@@ -671,14 +673,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Mount the Suspense boundary without suspending, so that the subsequent
     // updates suspend with a delay.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App step={0} shouldSuspend={false} />);
     });
     await advanceTimers(1000);
     expect(Scheduler).toHaveYielded(['Sibling', 'Step 0']);
 
     // Schedule an update at several distinct expiration times
-    await ReactNoop.act(async () => {
+    await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           root.render(<App step={1} shouldSuspend={true} />);
@@ -1228,7 +1230,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toHaveYielded(['Suspend! [Result]', 'Loading...']);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveText('Result');
       });
 
@@ -1298,7 +1300,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </>,
       );
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveText('Step: 2');
       });
       expect(Scheduler).toHaveYielded(['Step: 2']);
@@ -1371,7 +1373,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </>,
       );
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveText('B');
       });
 
@@ -1417,7 +1419,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveText('Hi');
       });
 
@@ -1464,7 +1466,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Loading...',
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-      await ReactNoop.act(async () => {
+      await act(async () => {
         resolveText('Hi');
       });
       expect(Scheduler).toHaveYielded(['Hi']);
@@ -1510,7 +1512,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           </>,
         ]);
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           resolveText('Hi');
         });
         expect(Scheduler).toHaveYielded(['Hi']);
@@ -1553,7 +1555,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           'Child is hidden: true',
         ]);
 
-        await ReactNoop.act(async () => {
+        await act(async () => {
           resolveText('Hi');
         });
 
@@ -1626,20 +1628,20 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       const root = ReactNoop.createLegacyRoot(null);
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App />);
       });
       expect(Scheduler).toHaveYielded(['Mount']);
       expect(root).toMatchRenderedOutput('Child');
 
       // Suspend the child. This puts it into an inconsistent state.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setShouldSuspend(true);
       });
       expect(root).toMatchRenderedOutput('Loading...');
 
       // Unmount everying
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(null);
       });
       expect(Scheduler).toHaveYielded(['Unmount']);
@@ -1801,7 +1803,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveText('B');
     });
 
@@ -1837,7 +1839,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Effect [Loading...]',
     ]);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       resolveText('B2');
     });
 
@@ -2091,12 +2093,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<App />);
     });
 
     // TODO: assert toErrorDev() when the warning is implemented again.
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.flushSync(() => _setShow(true));
     });
   });
@@ -2118,12 +2120,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<App />);
     });
 
     // TODO: assert toErrorDev() when the warning is implemented again.
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.flushSync(() => show());
     });
   });
@@ -2145,14 +2147,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<App />);
     });
 
     expect(Scheduler).toHaveYielded(['Suspend! [A]']);
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.flushSync(() => showB());
     });
 
@@ -2178,12 +2180,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
           </Suspense>
         );
       }
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.render(<App />);
       });
 
       // TODO: assert toErrorDev() when the warning is implemented again.
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.flushSync(() => _setShow(true));
       });
     },
@@ -2205,12 +2207,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<App />);
     });
 
     // also make sure lowpriority is okay
-    await ReactNoop.act(async () => show(true));
+    await act(async () => show(true));
 
     expect(Scheduler).toHaveYielded(['Suspend! [A]']);
     await resolveText('A');
@@ -2231,12 +2233,12 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.render(<App />);
     });
 
     // also make sure lowpriority is okay
-    await ReactNoop.act(async () => _setShow(true));
+    await act(async () => _setShow(true));
 
     expect(Scheduler).toHaveYielded(['Suspend! [A]']);
     await resolveText('A');
@@ -2499,7 +2501,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield([]);
 
       // Initial render.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
@@ -2515,7 +2517,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
       // Start transition.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
@@ -2554,7 +2556,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield([]);
 
       // Initial render.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
@@ -2570,7 +2572,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
       // Start transition.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
@@ -2658,7 +2660,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield([]);
 
       // Initial render.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
@@ -2674,7 +2676,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
       // Start transition.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
@@ -2692,7 +2694,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
 
       // Start a long (infinite) transition.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('C'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [C]', 'Loading...']);
@@ -2728,7 +2730,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield([]);
 
       // Initial render.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('A'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
@@ -2744,7 +2746,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
       // Start transition.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('B'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
@@ -2761,7 +2763,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(ReactNoop.getChildren()).toEqual([span('B')]);
 
       // Start a long (infinite) transition.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         React.startTransition(() => transitionToPage('C'));
 
         expect(Scheduler).toFlushAndYield(['Suspend! [C]', 'Loading...']);
@@ -2884,19 +2886,19 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App text="Initial" />);
     });
     expect(Scheduler).toHaveYielded(['Suspend! [Initial]']);
 
     // Resolve initial render
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('Initial');
     });
     expect(Scheduler).toHaveYielded(['Initial']);
     expect(root).toMatchRenderedOutput(<span prop="Initial" />);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Update. Since showing a fallback would hide content that's already
       // visible, it should suspend for a JND without committing.
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
@@ -2953,13 +2955,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
 
     expect(Scheduler).toHaveYielded(['Foo']);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       foo.setState({suspend: true});
 
       // In the regression that this covers, we would neglect to reset the
@@ -3110,13 +3112,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       await seedNextTextCache('A');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<Parent />);
       });
       expect(Scheduler).toHaveYielded(['A']);
       expect(root).toMatchRenderedOutput(<span prop="A" />);
 
-      await ReactNoop.act(async () => {
+      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.
@@ -3164,13 +3166,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       }
 
       await seedNextTextCache('A');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<Parent />);
       });
       expect(Scheduler).toHaveYielded(['A']);
       expect(root).toMatchRenderedOutput(<span prop="A" />);
 
-      await ReactNoop.act(async () => {
+      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 it by hiding the async component.
@@ -3233,13 +3235,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Resolve the initial tree
       await seedNextTextCache('A');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App />);
       });
       expect(Scheduler).toHaveYielded(['A']);
       expect(root).toMatchRenderedOutput(<span prop="A" />);
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         // Schedule an update inside the Suspense boundary that suspends.
         setAppText('B');
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
@@ -3255,7 +3257,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       // 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 ReactNoop.act(async () => {
+      await act(async () => {
         setAppText('C');
         React.startTransition(() => {
           setFallbackText('Still loading...');
@@ -3318,7 +3320,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Mount an initial tree. Resolve A so that it doesn't suspend.
       await seedNextTextCache('A');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<Parent />);
       });
       expect(Scheduler).toHaveYielded(['A']);
@@ -3327,7 +3329,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Schedule another update. This will "flip" the alternate pairs.
       await resolveText('B');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setText('B');
       });
       expect(Scheduler).toHaveYielded(['B']);
@@ -3335,14 +3337,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(root).toMatchRenderedOutput(<span prop="B" />);
 
       // Schedule another update. This time, we'll suspend.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setText('C');
       });
       expect(Scheduler).toHaveYielded(['Suspend! [C]', 'Loading...']);
 
       // Commit. This will insert a fragment fiber to wrap around the component
       // that triggered the update.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await advanceTimers(250);
       });
       // The fragment fiber is part of the current tree, but the setState return
@@ -3357,7 +3359,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Update again. This should unsuspend the tree.
       await resolveText('D');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setText('D');
       });
       // Even though the fragment fiber is not part of the return path, we should
@@ -3395,7 +3397,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Mount an initial tree. Resolve A so that it doesn't suspend.
       await seedNextTextCache('A');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<Parent />);
       });
       expect(Scheduler).toHaveYielded(['A']);
@@ -3404,7 +3406,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Schedule another update. This will "flip" the alternate pairs.
       await resolveText('B');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setText('B');
       });
       expect(Scheduler).toHaveYielded(['B']);
@@ -3412,14 +3414,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(root).toMatchRenderedOutput(<span prop="B" />);
 
       // Schedule another update. This time, we'll suspend.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setText('C');
       });
       expect(Scheduler).toHaveYielded(['Suspend! [C]', 'Loading...']);
 
       // Commit. This will insert a fragment fiber to wrap around the component
       // that triggered the update.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await advanceTimers(250);
       });
       // The fragment fiber is part of the current tree, but the setState return
@@ -3432,7 +3434,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         </>,
       );
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         // Schedule a normal pri update. This will suspend again.
         setText('D');
 
@@ -3504,7 +3506,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
       // Mount an initial tree. Resolve A so that it doesn't suspend.
       await seedNextTextCache('Inner text: A');
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<Parent step={0} />);
       });
       expect(Scheduler).toHaveYielded([
@@ -3524,7 +3526,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
 
       // Update. This causes the inner component to suspend.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         setText('B');
       });
       expect(Scheduler).toHaveYielded([
@@ -3547,7 +3549,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
 
       // Schedule a high pri update on the parent.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.discreteUpdates(() => {
           root.render(<Parent step={1} />);
         });
@@ -3574,7 +3576,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
 
       // Now finish resolving the inner text
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('Inner text: B');
       });
       expect(Scheduler).toHaveYielded([
@@ -3643,7 +3645,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Mount an initial tree. Resolve A so that it doesn't suspend.
     await seedNextTextCache('Inner: A0');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<Parent step={0} />);
     });
     expect(Scheduler).toHaveYielded(['Outer: A0', 'Inner: A0', 'Commit Child']);
@@ -3655,7 +3657,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
 
     // Update. This causes the inner component to suspend.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setText('B');
     });
     expect(Scheduler).toHaveYielded([
@@ -3675,7 +3677,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     // Schedule a high pri update on the parent. This will unblock the content.
     await resolveText('Inner: B1');
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.discreteUpdates(() => {
         root.render(<Parent step={1} />);
       });
@@ -3731,7 +3733,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await seedNextTextCache('A');
       await seedNextTextCache('B');
       root.render(<App />);
@@ -3744,7 +3746,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Triggers suspense at normal pri
       setTextA('A1');
       // Triggers in an unrelated tree at a different pri
@@ -3847,14 +3849,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<Root />);
     });
     expect(Scheduler).toHaveYielded(['']);
     expect(root).toMatchRenderedOutput(<span prop="" />);
 
     // Update to "a". That will suspend.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setTextWithShortTransition('a');
       expect(Scheduler).toFlushAndYield([
         'Pending...',
@@ -3872,7 +3874,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
 
     // Update to "b". That will suspend, too.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setTextWithLongTransition('b');
       expect(Scheduler).toFlushAndYield([
         // Neither is resolved yet.
@@ -3891,7 +3893,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
 
     // Resolve "a". But "b" is still pending.
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await resolveText('a');
 
       expect(Scheduler).toFlushAndYield(['Suspend! [b]', 'Loading...']);
@@ -3903,7 +3905,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       );
 
       // Resolve "b". This should remove the pending state.
-      await ReactNoop.act(async () => {
+      await act(async () => {
         await resolveText('b');
       });
       expect(Scheduler).toHaveYielded(['b']);
@@ -3924,7 +3926,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       await seedNextTextCache('A');
       root.render(
         <Suspense fallback={<Text text="Loading..." />}>
@@ -3935,7 +3937,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput(<span prop="A" />);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setText('B');
       ReactNoop.idleUpdates(() => {
         setText('B');
@@ -3951,7 +3953,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield(['Suspend! [B]']);
     });
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       setText('B');
       await resolveText('B');
     });
@@ -3971,7 +3973,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <>
           <UpdatingText />
@@ -3989,7 +3991,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Resolve the promise. This will trigger a retry.
       await resolveText('Async');
       // Before the retry happens, schedule a new update.
@@ -4039,13 +4041,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     const root = ReactNoop.createRoot();
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App show={false} />);
     });
     expect(Scheduler).toHaveYielded(['Mount Child']);
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App show={true} />);
     });
     expect(Scheduler).toHaveYielded(['Suspend! [Async]', 'Loading...']);
@@ -4056,7 +4058,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(null);
     });
     expect(Scheduler).toHaveYielded(['Unmount Child']);
@@ -4087,13 +4089,13 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     const root = ReactNoop.createLegacyRoot();
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App show={false} />);
     });
     expect(Scheduler).toHaveYielded(['Mount Child']);
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App show={true} />);
     });
     expect(Scheduler).toHaveYielded(['Suspend! [Async]', 'Loading...']);
@@ -4104,7 +4106,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       </>,
     );
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(null);
     });
     expect(Scheduler).toHaveYielded(['Unmount Child']);
diff --git a/packages/react-reconciler/src/__tests__/ReactTransition-test.js b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
index cc6d0d00fc6e..4443b15f6db3 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransition-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransition-test.js
@@ -36,7 +36,7 @@ describe('ReactTransition', () => {
     Suspense = React.Suspense;
     startTransition = React.startTransition;
     getCacheForType = React.unstable_getCacheForType;
-    act = ReactNoop.act;
+    act = require('jest-react').act;
 
     caches = [];
     seededCache = null;
@@ -551,7 +551,7 @@ describe('ReactTransition', () => {
   test('interrupt a refresh transition if a new transition is scheduled', async () => {
     const root = ReactNoop.createRoot();
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(
         <>
           <Suspense fallback={<Text text="Loading..." />} />
@@ -562,7 +562,7 @@ describe('ReactTransition', () => {
     expect(Scheduler).toHaveYielded(['Initial']);
     expect(root).toMatchRenderedOutput('Initial');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       // Start a refresh transition
       startTransition(() => {
         root.render(
@@ -729,13 +729,13 @@ describe('ReactTransition', () => {
 
       const root = ReactNoop.createRoot();
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         root.render(<App shouldSuspend={false} step={0} />);
       });
       expect(Scheduler).toHaveYielded(['A0', 'B0', 'C0']);
       expect(root).toMatchRenderedOutput('A0B0C0');
 
-      await ReactNoop.act(async () => {
+      await act(async () => {
         // This update will suspend.
         startTransition(() => {
           root.render(<App shouldSuspend={true} step={1} />);
@@ -911,7 +911,7 @@ describe('ReactTransition', () => {
     }
 
     const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([
@@ -921,7 +921,7 @@ describe('ReactTransition', () => {
     ]);
     expect(root).toMatchRenderedOutput('Transition pri: 0, Normal pri: 0');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       updateTransitionPri();
 
       expect(Scheduler).toFlushAndYieldThrough([
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
index 918dd9798336..a63beb1ed5db 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
@@ -5,6 +5,7 @@ let ContinuousEventPriority;
 let startTransition;
 let useState;
 let useEffect;
+let act;
 
 describe('ReactUpdatePriority', () => {
   beforeEach(() => {
@@ -13,6 +14,7 @@ describe('ReactUpdatePriority', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
     ContinuousEventPriority = require('react-reconciler/constants')
       .ContinuousEventPriority;
     startTransition = React.startTransition;
@@ -36,7 +38,7 @@ describe('ReactUpdatePriority', () => {
       return <Text text={state} />;
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.flushSync(() => {
         root.render(<App />);
       });
@@ -61,7 +63,7 @@ describe('ReactUpdatePriority', () => {
       return <Text text={`Idle: ${idleState}, Default: ${defaultState}`} />;
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       ReactNoop.idleUpdates(() => {
         root.render(<App />);
       });
@@ -106,13 +108,13 @@ describe('ReactUpdatePriority', () => {
       );
     }
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['A1', 'B1', 'C1']);
     expect(root).toMatchRenderedOutput('A1B1C1');
 
-    await ReactNoop.act(async () => {
+    await act(async () => {
       startTransition(() => {
         setCounter(2);
       });
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index 66dd7d12b492..7770c070667d 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -12,7 +12,6 @@
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
-let ReactTestUtils;
 let Scheduler;
 let mockDevToolsHook;
 let allSchedulerTags;
@@ -65,10 +64,9 @@ describe('updaters', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactTestUtils = require('react-dom/test-utils');
     Scheduler = require('scheduler');
 
-    act = ReactTestUtils.unstable_concurrentAct;
+    act = require('jest-react').act;
   });
 
   it('should report the (host) root as the scheduler for root-level render', async () => {
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 77e7726a18a1..b5d544d0a48d 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -26,6 +26,7 @@ describe('SchedulingProfiler', () => {
   let ReactTestRenderer;
   let ReactNoop;
   let Scheduler;
+  let act;
 
   let clearedMarks;
   let featureDetectionMarkName = null;
@@ -86,6 +87,7 @@ describe('SchedulingProfiler', () => {
     ReactNoop = require('react-noop-renderer');
 
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
 
     const SchedulingProfiler = require('react-reconciler/src/SchedulingProfiler');
     formatLanes = SchedulingProfiler.formatLanes;
@@ -518,7 +520,7 @@ describe('SchedulingProfiler', () => {
       return didMount;
     }
 
-    ReactTestRenderer.unstable_concurrentAct(() => {
+    act(() => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
@@ -553,7 +555,7 @@ describe('SchedulingProfiler', () => {
       return didRender;
     }
 
-    ReactTestRenderer.unstable_concurrentAct(() => {
+    act(() => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
diff --git a/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js b/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
index 13f7a9ac543c..a6210a82e356 100644
--- a/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
@@ -20,7 +20,7 @@ describe('StrictEffectsMode', () => {
     React = require('react');
     ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
-    act = ReactTestRenderer.unstable_concurrentAct;
+    act = require('jest-react').act;
   });
 
   function supportsDoubleInvokeEffects() {
diff --git a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
index 469f43348bea..e443aa0a2319 100644
--- a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
@@ -12,6 +12,7 @@
 let React;
 let ReactNoop;
 let Scheduler;
+let act;
 
 describe('StrictEffectsMode defaults', () => {
   beforeEach(() => {
@@ -20,6 +21,7 @@ describe('StrictEffectsMode defaults', () => {
     React = require('react');
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
+    act = require('jest-react').act;
 
     const ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableStrictEffects = __DEV__;
@@ -41,7 +43,7 @@ describe('StrictEffectsMode defaults', () => {
       return text;
     }
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
     });
 
@@ -70,7 +72,7 @@ describe('StrictEffectsMode defaults', () => {
       }
     }
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.renderLegacySyncRoot(<App text={'mount'} />);
     });
 
@@ -89,7 +91,7 @@ describe('StrictEffectsMode defaults', () => {
         return label;
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <>
             <ComponentWithEffects label={'one'} />
@@ -103,7 +105,7 @@ describe('StrictEffectsMode defaults', () => {
         ]);
       });
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <>
             <ComponentWithEffects label={'one'} />
@@ -143,7 +145,7 @@ describe('StrictEffectsMode defaults', () => {
         return label;
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <>
             <ComponentWithEffects label={'one'} />
@@ -162,7 +164,7 @@ describe('StrictEffectsMode defaults', () => {
         ]);
       });
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(
           <>
             <ComponentWithEffects label={'one'} />
@@ -204,7 +206,7 @@ describe('StrictEffectsMode defaults', () => {
 
         return text;
       }
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -217,7 +219,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'update'} />);
       });
 
@@ -228,7 +230,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(null);
       });
 
@@ -253,7 +255,7 @@ describe('StrictEffectsMode defaults', () => {
         return text;
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -266,7 +268,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect Two mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'update'} />);
       });
 
@@ -277,7 +279,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect Two mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(null);
       });
 
@@ -304,7 +306,7 @@ describe('StrictEffectsMode defaults', () => {
         return text;
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -317,7 +319,7 @@ describe('StrictEffectsMode defaults', () => {
         'useLayoutEffect Two mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'update'} />);
       });
 
@@ -328,7 +330,7 @@ describe('StrictEffectsMode defaults', () => {
         'useLayoutEffect Two mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(null);
       });
 
@@ -351,7 +353,7 @@ describe('StrictEffectsMode defaults', () => {
         return text;
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -362,7 +364,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'update'} />);
       });
 
@@ -371,7 +373,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(null);
       });
 
@@ -402,7 +404,7 @@ describe('StrictEffectsMode defaults', () => {
         }
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App />);
       });
 
@@ -432,7 +434,7 @@ describe('StrictEffectsMode defaults', () => {
         }
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -442,13 +444,13 @@ describe('StrictEffectsMode defaults', () => {
         'componentDidMount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'update'} />);
       });
 
       expect(Scheduler).toHaveYielded(['componentDidUpdate']);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(null);
       });
 
@@ -475,7 +477,7 @@ describe('StrictEffectsMode defaults', () => {
         return text;
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -527,7 +529,7 @@ describe('StrictEffectsMode defaults', () => {
         return showChild && <Child />;
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App />);
       });
 
@@ -540,7 +542,7 @@ describe('StrictEffectsMode defaults', () => {
         'App useEffect mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         _setShowChild(true);
       });
 
@@ -594,7 +596,7 @@ describe('StrictEffectsMode defaults', () => {
         );
       }
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -610,7 +612,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(<App text={'mount'} />);
       });
 
@@ -621,7 +623,7 @@ describe('StrictEffectsMode defaults', () => {
         'useEffect mount',
       ]);
 
-      ReactNoop.act(() => {
+      act(() => {
         ReactNoop.render(null);
       });
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index 47f918110555..1b56f3fc125c 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -30,7 +30,7 @@ function loadModules() {
   React = require('react');
   ReactNoop = require('react-noop-renderer');
   Scheduler = require('scheduler');
-  act = ReactNoop.act;
+  act = require('jest-react').act;
 
   // Stable entrypoints export with "unstable_" prefix.
   createMutableSource =
@@ -1443,7 +1443,7 @@ describe('useMutableSource', () => {
       // Now mutate A. Both hooks should update.
       // This is at high priority so that it doesn't get batched with default
       // priority updates that might fire during the passive effect
-      await ReactNoop.act(async () => {
+      await act(async () => {
         ReactNoop.discreteUpdates(() => {
           mutateA('a1');
         });
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 671a813f37ad..7f46d1cb0055 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -26,7 +26,7 @@ describe('useMutableSourceHydration', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
 
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
 
     // Stable entrypoints export with "unstable_" prefix.
     createMutableSource =
diff --git a/packages/react-reconciler/src/__tests__/useRef-test.internal.js b/packages/react-reconciler/src/__tests__/useRef-test.internal.js
index ccfc6d0d4b2a..ba08d9133105 100644
--- a/packages/react-reconciler/src/__tests__/useRef-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useRef-test.internal.js
@@ -31,7 +31,7 @@ describe('useRef', () => {
     const ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
 
-    act = ReactNoop.act;
+    act = require('jest-react').act;
     useCallback = React.useCallback;
     useEffect = React.useEffect;
     useLayoutEffect = React.useLayoutEffect;
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 8a26c85395f3..0a31aa9c62f7 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -29,7 +29,7 @@ describe('ReactFresh', () => {
       ReactFreshRuntime.injectIntoGlobalHook(global);
       ReactDOM = require('react-dom');
       Scheduler = require('scheduler');
-      act = require('react-dom/test-utils').unstable_concurrentAct;
+      act = require('jest-react').act;
       createReactClass = require('create-react-class/factory')(
         React.Component,
         React.isValidElement,
@@ -3782,7 +3782,7 @@ describe('ReactFresh', () => {
       React = require('react');
       ReactDOM = require('react-dom');
       Scheduler = require('scheduler');
-      act = require('react-dom/test-utils').unstable_concurrentAct;
+      act = require('jest-react').act;
 
       // Important! Inject into the global hook *after* ReactDOM runs:
       ReactFreshRuntime = require('react-refresh/runtime');
diff --git a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
index 231dd6b04219..09edf1d89728 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -30,7 +30,7 @@ describe('ReactFreshIntegration', () => {
       ReactFreshRuntime = require('react-refresh/runtime');
       ReactFreshRuntime.injectIntoGlobalHook(global);
       ReactDOM = require('react-dom');
-      act = require('react-dom/test-utils').unstable_concurrentAct;
+      act = require('jest-react').act;
       container = document.createElement('div');
       document.body.appendChild(container);
       exportsObj = undefined;
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 64a3d7645f17..75ac4ef8850a 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -18,7 +18,7 @@ describe('ReactFlightDOMRelay', () => {
   beforeEach(() => {
     jest.resetModules();
 
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 020c06a1fef3..12a50fce2187 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -36,7 +36,7 @@ describe('ReactFlightDOM', () => {
     jest.resetModules();
     webpackModules = {};
     webpackMap = {};
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
     Stream = require('stream');
     React = require('react');
     ReactDOM = require('react-dom');
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 469807090ec6..d8b6b08611fe 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -21,7 +21,6 @@ import {
   flushSync,
   injectIntoDevTools,
   batchedUpdates,
-  IsThisRendererActing,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {findCurrentFiberUsingSlowPath} from 'react-reconciler/src/ReactFiberTreeReflection';
 import {
@@ -46,15 +45,11 @@ import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-import enqueueTask from 'shared/enqueueTask';
 
 import {getPublicInstance} from './ReactTestHostConfig';
 import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
-const {IsSomeRendererActing, ReactCurrentActQueue} = ReactSharedInternals;
-
 const act_notBatchedInLegacyMode = React.unstable_act;
 function act(callback: () => Thenable<mixed>): Thenable<void> {
   return act_notBatchedInLegacyMode(() => {
@@ -62,6 +57,8 @@ function act(callback: () => Thenable<mixed>): Thenable<void> {
   });
 }
 
+// TODO: Remove from public bundle
+
 type TestRendererOptions = {
   createNodeMock: (element: React$Element<any>) => any,
   unstable_isConcurrent: boolean,
@@ -601,133 +598,10 @@ injectIntoDevTools({
   rendererPackageName: 'react-test-renderer',
 });
 
-let actingUpdatesScopeDepth = 0;
-
-// 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.
-// TODO: Migrate our tests to use ReactNoop. Although we would need to figure
-// out a solution for Relay, which has some Concurrent Mode tests.
-// TODO: Replace the internal "concurrent" implementations of `act` with a
-// single shared module.
-function unstable_concurrentAct(scope: () => Thenable<mixed> | void) {
-  if (Scheduler.unstable_flushAllWithoutAsserting === undefined) {
-    throw Error(
-      'This version of `act` requires a special mock build of Scheduler.',
-    );
-  }
-  if (setTimeout._isMockFunction !== true) {
-    throw Error(
-      "This version of `act` requires Jest's timer mocks " +
-        '(i.e. jest.useFakeTimers).',
-    );
-  }
-
-  const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
-  const previousIsSomeRendererActing = IsSomeRendererActing.current;
-  const previousIsThisRendererActing = IsThisRendererActing.current;
-  IsSomeRendererActing.current = true;
-  IsThisRendererActing.current = true;
-  actingUpdatesScopeDepth++;
-  if (__DEV__ && actingUpdatesScopeDepth === 1) {
-    ReactCurrentActQueue.disableActWarning = true;
-  }
-
-  const unwind = () => {
-    if (__DEV__ && actingUpdatesScopeDepth === 1) {
-      ReactCurrentActQueue.disableActWarning = false;
-    }
-    actingUpdatesScopeDepth--;
-    IsSomeRendererActing.current = previousIsSomeRendererActing;
-    IsThisRendererActing.current = previousIsThisRendererActing;
-    if (__DEV__) {
-      if (actingUpdatesScopeDepth > previousActingUpdatesScopeDepth) {
-        // if it's _less than_ previousActingUpdatesScopeDepth, then we can
-        // assume the 'other' one has warned
-        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. ',
-        );
-      }
-    }
-  };
-
-  // TODO: This would be way simpler if 1) we required a promise to be
-  // returned and 2) we could use async/await. Since it's only our used in
-  // our test suite, we should be able to.
-  try {
-    const thenable = batchedUpdates(scope);
-    if (
-      typeof thenable === 'object' &&
-      thenable !== null &&
-      typeof thenable.then === 'function'
-    ) {
-      return {
-        then(resolve: () => void, reject: (error: mixed) => void) {
-          thenable.then(
-            () => {
-              flushActWork(
-                () => {
-                  unwind();
-                  resolve();
-                },
-                error => {
-                  unwind();
-                  reject(error);
-                },
-              );
-            },
-            error => {
-              unwind();
-              reject(error);
-            },
-          );
-        },
-      };
-    } else {
-      try {
-        // TODO: Let's not support non-async scopes at all in our tests. Need to
-        // migrate existing tests.
-        let didFlushWork;
-        do {
-          didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
-        } while (didFlushWork);
-      } finally {
-        unwind();
-      }
-    }
-  } catch (error) {
-    unwind();
-    throw error;
-  }
-}
-
-function flushActWork(resolve, reject) {
-  // Flush suspended fallbacks
-  // $FlowFixMe: Flow doesn't know about global Jest object
-  jest.runOnlyPendingTimers();
-  enqueueTask(() => {
-    try {
-      const didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
-      if (didFlushWork) {
-        flushActWork(resolve, reject);
-      } else {
-        resolve();
-      }
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
 export {
   Scheduler as _Scheduler,
   create,
   /* eslint-disable-next-line camelcase */
   batchedUpdates as unstable_batchedUpdates,
   act,
-  unstable_concurrentAct,
 };
diff --git a/packages/react/src/IsSomeRendererActing.js b/packages/react/src/IsSomeRendererActing.js
deleted file mode 100644
index b2462fc6c24c..000000000000
--- a/packages/react/src/IsSomeRendererActing.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-/**
- * Used by act() to track whether you're inside an act() scope.
- */
-
-const IsSomeRendererActing = {
-  current: (false: boolean),
-};
-export default IsSomeRendererActing;
diff --git a/packages/react/src/ReactSharedInternals.js b/packages/react/src/ReactSharedInternals.js
index e95ea1584875..3443fb276633 100644
--- a/packages/react/src/ReactSharedInternals.js
+++ b/packages/react/src/ReactSharedInternals.js
@@ -11,13 +11,11 @@ import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
 import ReactCurrentActQueue from './ReactCurrentActQueue';
 import ReactCurrentOwner from './ReactCurrentOwner';
 import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
-import IsSomeRendererActing from './IsSomeRendererActing';
 
 const ReactSharedInternals = {
   ReactCurrentDispatcher,
   ReactCurrentBatchConfig,
   ReactCurrentOwner,
-  IsSomeRendererActing,
   // Used by renderers to avoid bundling object-assign twice in UMD bundles:
   assign,
 };
diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
index 24adba7561c6..3cf0e40b65db 100644
--- a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -20,7 +20,7 @@ describe 'ReactCoffeeScriptClass', ->
   beforeEach ->
     React = require 'react'
     ReactDOM = require 'react-dom'
-    act = require('react-dom/test-utils').unstable_concurrentAct
+    act = require('jest-react').act
     PropTypes = require 'prop-types'
     container = document.createElement 'div'
     root = ReactDOM.createRoot container
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
index 8ce57867fcb0..3c15930a3798 100644
--- a/packages/react/src/__tests__/ReactES6Class-test.js
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -29,7 +29,7 @@ describe('ReactES6Class', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('react-dom/test-utils').unstable_concurrentAct;
+    act = require('jest-react').act;
     container = document.createElement('div');
     root = ReactDOM.createRoot(container);
     attachedListener = null;
diff --git a/packages/react/src/__tests__/ReactProfiler-test.internal.js b/packages/react/src/__tests__/ReactProfiler-test.internal.js
index 18fa18a365e9..af0a92003009 100644
--- a/packages/react/src/__tests__/ReactProfiler-test.internal.js
+++ b/packages/react/src/__tests__/ReactProfiler-test.internal.js
@@ -15,7 +15,7 @@ let ReactFeatureFlags;
 let ReactNoop;
 let Scheduler;
 let ReactTestRenderer;
-let ReactTestRendererAct;
+let act;
 let AdvanceTime;
 
 function loadModules({
@@ -36,15 +36,14 @@ function loadModules({
 
   React = require('react');
   Scheduler = require('scheduler');
+  act = require('jest-react').act;
 
   if (useNoopRenderer) {
     ReactNoop = require('react-noop-renderer');
     ReactTestRenderer = null;
-    ReactTestRendererAct = null;
   } else {
     ReactNoop = null;
     ReactTestRenderer = require('react-test-renderer');
-    ReactTestRendererAct = ReactTestRenderer.unstable_concurrentAct;
   }
 
   AdvanceTime = class extends React.Component {
@@ -346,7 +345,7 @@ describe(`onRender`, () => {
     Scheduler.unstable_advanceTime(20); // 30 -> 50
 
     // Updating a sibling should not report a re-render.
-    ReactTestRendererAct(updateProfilerSibling);
+    act(updateProfilerSibling);
 
     expect(callback).not.toHaveBeenCalled();
   });
@@ -672,7 +671,7 @@ describe(`onRender`, () => {
 
     const onRender = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler id="root" onRender={onRender}>
           <Component />
@@ -1641,7 +1640,7 @@ describe(`onCommit`, () => {
     const setCountRef = React.createRef(null);
 
     let renderer = null;
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer = ReactTestRenderer.create(
         <React.Profiler id="root-mount" onCommit={callback}>
           <React.Profiler id="a">
@@ -1668,7 +1667,7 @@ describe(`onCommit`, () => {
     expect(call[2]).toBe(1010); // durations
     expect(call[3]).toBe(2); // commit start time (before mutations or effects)
 
-    ReactTestRendererAct(() => setCountRef.current(count => count + 1));
+    act(() => setCountRef.current(count => count + 1));
 
     expect(callback).toHaveBeenCalledTimes(2);
 
@@ -1680,7 +1679,7 @@ describe(`onCommit`, () => {
     expect(call[2]).toBe(110); // durations
     expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer.update(
         <React.Profiler id="root-update" onCommit={callback}>
           <React.Profiler id="b">
@@ -1739,7 +1738,7 @@ describe(`onCommit`, () => {
 
     // Test an error that happens during an effect
 
-    ReactTestRendererAct(() => {
+    act(() => {
       ReactTestRenderer.create(
         <React.Profiler id="root" onCommit={callback}>
           <ErrorBoundary
@@ -1825,7 +1824,7 @@ describe(`onCommit`, () => {
 
     let renderer = null;
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer = ReactTestRenderer.create(
         <React.Profiler id="root" onCommit={callback}>
           <ErrorBoundary
@@ -1867,7 +1866,7 @@ describe(`onCommit`, () => {
 
     // Test an error that happens during an cleanup function
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer.update(
         <React.Profiler id="root" onCommit={callback}>
           <ErrorBoundary
@@ -1952,7 +1951,7 @@ describe(`onPostCommit`, () => {
     Scheduler.unstable_advanceTime(1);
 
     let renderer;
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer = ReactTestRenderer.create(
         <React.Profiler id="mount-test" onPostCommit={callback}>
           <ComponentWithEffects />
@@ -1973,7 +1972,7 @@ describe(`onPostCommit`, () => {
 
     Scheduler.unstable_advanceTime(1);
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer.update(
         <React.Profiler id="update-test" onPostCommit={callback}>
           <ComponentWithEffects />
@@ -1994,7 +1993,7 @@ describe(`onPostCommit`, () => {
 
     Scheduler.unstable_advanceTime(1);
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer.update(
         <React.Profiler id="unmount-test" onPostCommit={callback} />,
       );
@@ -2036,7 +2035,7 @@ describe(`onPostCommit`, () => {
 
     Scheduler.unstable_advanceTime(1);
 
-    ReactTestRendererAct(() => {
+    act(() => {
       ReactTestRenderer.create(
         <React.Profiler id="mount-test" onPostCommit={callback}>
           <ComponentWithEffects />
@@ -2084,7 +2083,7 @@ describe(`onPostCommit`, () => {
     const setCountRef = React.createRef(null);
 
     let renderer = null;
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer = ReactTestRenderer.create(
         <React.Profiler id="root-mount" onPostCommit={callback}>
           <React.Profiler id="a">
@@ -2111,7 +2110,7 @@ describe(`onPostCommit`, () => {
     expect(call[2]).toBe(1010); // durations
     expect(call[3]).toBe(2); // commit start time (before mutations or effects)
 
-    ReactTestRendererAct(() => setCountRef.current(count => count + 1));
+    act(() => setCountRef.current(count => count + 1));
 
     expect(callback).toHaveBeenCalledTimes(2);
 
@@ -2123,7 +2122,7 @@ describe(`onPostCommit`, () => {
     expect(call[2]).toBe(110); // durations
     expect(call[3]).toBe(1013); // commit start time (before mutations or effects)
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer.update(
         <React.Profiler id="root-update" onPostCommit={callback}>
           <React.Profiler id="b">
@@ -2182,7 +2181,7 @@ describe(`onPostCommit`, () => {
 
     // Test an error that happens during an effect
 
-    ReactTestRendererAct(() => {
+    act(() => {
       ReactTestRenderer.create(
         <React.Profiler id="root" onPostCommit={callback}>
           <ErrorBoundary
@@ -2269,7 +2268,7 @@ describe(`onPostCommit`, () => {
 
     let renderer = null;
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer = ReactTestRenderer.create(
         <React.Profiler id="root" onPostCommit={callback}>
           <ErrorBoundary
@@ -2311,7 +2310,7 @@ describe(`onPostCommit`, () => {
 
     // Test an error that happens during an cleanup function
 
-    ReactTestRendererAct(() => {
+    act(() => {
       renderer.update(
         <React.Profiler id="root" onPostCommit={callback}>
           <ErrorBoundary
@@ -2428,7 +2427,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2489,7 +2488,7 @@ describe(`onNestedUpdateScheduled`, () => {
     const onNestedUpdateScheduledTwo = jest.fn();
     const onNestedUpdateScheduledThree = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="one"
@@ -2537,7 +2536,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.renderToRootWithID(
         <React.Profiler
           id="test"
@@ -2577,7 +2576,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2603,7 +2602,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2614,7 +2613,7 @@ describe(`onNestedUpdateScheduled`, () => {
     });
     expect(Scheduler).toHaveYielded(['Component:false']);
 
-    ReactNoop.act(() => {
+    act(() => {
       updateFnRef.current();
     });
     expect(Scheduler).toHaveYielded(['Component:true']);
@@ -2633,7 +2632,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2664,7 +2663,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2681,7 +2680,7 @@ describe(`onNestedUpdateScheduled`, () => {
     expect(onNestedUpdateScheduled).toHaveBeenCalledTimes(1);
     expect(onNestedUpdateScheduled.mock.calls[0][0]).toBe('test');
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2716,7 +2715,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2756,7 +2755,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2768,7 +2767,7 @@ describe(`onNestedUpdateScheduled`, () => {
     expect(Scheduler).toHaveYielded(['Component:false:false']);
     expect(onNestedUpdateScheduled).not.toHaveBeenCalled();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2803,7 +2802,7 @@ describe(`onNestedUpdateScheduled`, () => {
 
     const onNestedUpdateScheduled = jest.fn();
 
-    ReactNoop.act(() => {
+    act(() => {
       ReactNoop.render(
         <React.Profiler
           id="test"
@@ -2814,7 +2813,7 @@ describe(`onNestedUpdateScheduled`, () => {
     });
     expect(Scheduler).toHaveYielded(['Component:false']);
 
-    ReactNoop.act(() => {
+    act(() => {
       updateFnRef.current();
     });
     expect(Scheduler).toHaveYielded(['Component:true']);
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 62d63f48cd0d..081be41e1bc8 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -19,8 +19,7 @@ describe('ReactStrictMode', () => {
     React = require('react');
     ReactDOM = require('react-dom');
 
-    const TestUtils = require('react-dom/test-utils');
-    act = TestUtils.unstable_concurrentAct;
+    act = require('jest-react').act;
 
     const ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableStrictEffects = __DEV__;
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
index c0c2da07785e..d9456404bb5e 100644
--- a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -1,7 +1,7 @@
 /// <reference path="./testDefinitions/PropTypes.d.ts" />
 /// <reference path="./testDefinitions/React.d.ts" />
 /// <reference path="./testDefinitions/ReactDOM.d.ts" />
-/// <reference path="./testDefinitions/ReactDOMTestUtils.d.ts" />
+/// <reference path="./testDefinitions/ReactInternalAct.d.ts" />
 
 /*!
  * Copyright (c) Facebook, Inc. and its affiliates.
@@ -14,6 +14,7 @@ import React = require('react');
 import ReactDOM = require('react-dom');
 import ReactDOMTestUtils = require('react-dom/test-utils');
 import PropTypes = require('prop-types');
+import internalAct = require('jest-react');
 
 // Before Each
 
@@ -21,7 +22,7 @@ let container;
 let root;
 let attachedListener = null;
 let renderedName = null;
-let act = ReactDOMTestUtils.unstable_concurrentAct;
+let act = internalAct.act;
 
 class Inner extends React.Component {
   getName() {
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts b/packages/react/src/__tests__/testDefinitions/ReactInternalAct.d.ts
similarity index 77%
rename from packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts
rename to packages/react/src/__tests__/testDefinitions/ReactInternalAct.d.ts
index 49ecaf208e05..8217aab8150f 100644
--- a/packages/react/src/__tests__/testDefinitions/ReactDOMTestUtils.d.ts
+++ b/packages/react/src/__tests__/testDefinitions/ReactInternalAct.d.ts
@@ -12,6 +12,6 @@
  * just helpers for the unit test.
  */
 
-declare module 'react-dom/test-utils' {
-  export function unstable_concurrentAct(cb : () => any) : any
+declare module 'jest-react' {
+  export function act(cb : () => any) : any
 }
diff --git a/packages/react/src/forks/ReactSharedInternals.umd.js b/packages/react/src/forks/ReactSharedInternals.umd.js
index 8082fd0eef03..2620c61d92e6 100644
--- a/packages/react/src/forks/ReactSharedInternals.umd.js
+++ b/packages/react/src/forks/ReactSharedInternals.umd.js
@@ -10,13 +10,11 @@ import * as Scheduler from 'scheduler';
 import ReactCurrentDispatcher from '../ReactCurrentDispatcher';
 import ReactCurrentOwner from '../ReactCurrentOwner';
 import ReactDebugCurrentFrame from '../ReactDebugCurrentFrame';
-import IsSomeRendererActing from '../IsSomeRendererActing';
 import ReactCurrentBatchConfig from '../ReactCurrentBatchConfig';
 
 const ReactSharedInternals = {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
-  IsSomeRendererActing,
   ReactCurrentBatchConfig,
   // Used by renderers to avoid bundling object-assign twice in UMD bundles:
   assign,
diff --git a/packages/use-subscription/src/__tests__/useSubscription-test.js b/packages/use-subscription/src/__tests__/useSubscription-test.js
index 579076af551f..60d6eb20ddfc 100644
--- a/packages/use-subscription/src/__tests__/useSubscription-test.js
+++ b/packages/use-subscription/src/__tests__/useSubscription-test.js
@@ -27,7 +27,7 @@ describe('useSubscription', () => {
     ReactTestRenderer = require('react-test-renderer');
     Scheduler = require('scheduler');
 
-    act = ReactTestRenderer.unstable_concurrentAct;
+    act = require('jest-react').act;
 
     BehaviorSubject = require('rxjs').BehaviorSubject;
     ReplaySubject = require('rxjs').ReplaySubject;
diff --git a/scripts/jest/typescript/preprocessor.js b/scripts/jest/typescript/preprocessor.js
index d5457ff2ccd7..dbf910754f9b 100644
--- a/scripts/jest/typescript/preprocessor.js
+++ b/scripts/jest/typescript/preprocessor.js
@@ -42,7 +42,7 @@ function compile(content, contentFilename) {
       let source;
       const libRegex = /lib\.(.+\.)?d\.ts$/;
       const jestRegex = /jest\.d\.ts/;
-      const reactRegex = /(?:React|ReactDOM|ReactDOMTestUtils|PropTypes)(?:\.d)?\.ts$/;
+      const reactRegex = /(?:React|ReactDOM|ReactInternalAct|PropTypes)(?:\.d)?\.ts$/;
 
       // `path.normalize` is used to turn forward slashes in
       // the file path into backslashes on Windows.
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index a19b6510c3ce..fb64c0e6e07f 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -734,7 +734,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'jest-react',
     global: 'JestReact',
-    externals: [],
+    externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
   },
 
   /******* ESLint Plugin for Hooks *******/

From 355591add41c0f6dad738fdb1b6603e0786b7b4e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 23 Jun 2021 13:50:09 -0400
Subject: [PATCH 0639/1603] Next/experimental release versions include commit
 date (#21700)

Change format of @next and @experimental release versions from <number>-<sha> to <number>-<sha>-<date> to make them more human readable. This format still preserves the ability for us to easily map a version number to the changes it contains, while also being able to more easily know at a glance how recent a release is.
---
 ReactVersions.js                              |  4 +--
 scripts/release/README.md                     |  6 ++--
 .../parse-params.js                           |  3 +-
 .../update-stable-version-numbers.js          |  4 +--
 scripts/release/snapshot-test.js              |  6 ++--
 scripts/release/utils.js                      | 33 ++++++++++++++-----
 scripts/rollup/build-all-release-channels.js  | 33 ++++++++++++++-----
 7 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index bac58ffb9094..95d4bd8b7c27 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -14,9 +14,9 @@
 //
 //   18.0.0-alpha-a1c2d3e4
 //
-// The @experimental channel doesn't include a version, only a sha, e.g.:
+// The @experimental channel doesn't include a version, only a date and a sha, e.g.:
 //
-//   0.0.0-experimental-a1c2d3e4
+//   0.0.0-experimental-241c4467e-20200129
 
 const ReactVersion = '18.0.0';
 
diff --git a/scripts/release/README.md b/scripts/release/README.md
index befc605b9be2..979062dd1484 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -87,7 +87,7 @@ Stable releases should always be created from the "next" channel. This encourage
 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
+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.
@@ -165,9 +165,9 @@ This script prompts for new (stable) release versions for each public package an
 "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` (aka commit [241c4467e](https://github.com/facebook/react/commit/241c4467e)) to stable:
+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
+scripts/release/prepare-release-from-npm.js --version=0.0.0-241c4467e-20200129
 ```
 
 ## `publish`
diff --git a/scripts/release/prepare-release-from-npm-commands/parse-params.js b/scripts/release/prepare-release-from-npm-commands/parse-params.js
index 0aa85fa428a4..b9aa1a4f5e7e 100644
--- a/scripts/release/prepare-release-from-npm-commands/parse-params.js
+++ b/scripts/release/prepare-release-from-npm-commands/parse-params.js
@@ -29,7 +29,8 @@ const paramDefinitions = [
   {
     name: 'version',
     type: String,
-    description: 'Version of published "next" release (e.g. 0.0.0-ddaf2b07c)',
+    description:
+      'Version of published "next" release (e.g. 0.0.0-0e526bcec-20210202)',
   },
 ];
 
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
index 2a845bebde25..16bec66b6076 100644
--- 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
@@ -47,7 +47,7 @@ const run = async ({cwd, packages, version}, versionsMap) => {
           // (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-ddaf2b07c).
+          // since "next" releases are all locked to the version (e.g. 0.0.0-0e526bcec-20210202).
           if (
             sourceDependencyVersion ===
             sourceDependencyConstraint.replace(/^[\^\~]/, '')
@@ -69,7 +69,7 @@ const run = async ({cwd, packages, version}, versionsMap) => {
   // 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-ddaf2b07c).
+  // 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');
diff --git a/scripts/release/snapshot-test.js b/scripts/release/snapshot-test.js
index 9a0d4f84b89d..d199b51c7b9c 100755
--- a/scripts/release/snapshot-test.js
+++ b/scripts/release/snapshot-test.js
@@ -6,7 +6,7 @@ const {exec, spawn} = require('child-process-promise');
 const {join} = require('path');
 const {readFileSync} = require('fs');
 const theme = require('./theme');
-const {logPromise, printDiff} = require('./utils');
+const {getDateStringForCommit, logPromise, printDiff} = require('./utils');
 
 const cwd = join(__dirname, '..', '..');
 
@@ -37,6 +37,8 @@ const run = async () => {
     );
     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.
@@ -44,7 +46,7 @@ const run = async () => {
       'node',
       [
         './scripts/release/prepare-release-from-npm.js',
-        `--version=0.0.0-${COMMIT}`,
+        `--version=0.0.0-${COMMIT}-${dateString}`,
         '--local',
       ],
       defaultOptions
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index d989a175675b..ea110ba69618 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -49,9 +49,9 @@ const execRead = async (command, options) => {
 };
 
 const extractCommitFromVersionNumber = version => {
-  // Support stable version format e.g. "0.0.0-0e526bcec"
-  // and experimental version format e.g. "0.0.0-experimental-0e526bcec"
-  const match = version.match(/0\.0\.0\-([a-z]+\-){0,1}(.+)/);
+  // 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}"`);
   }
@@ -74,9 +74,10 @@ const getBuildInfo = async () => {
   });
   const commit = await execRead('git show -s --format=%h', {cwd});
   const checksum = await getChecksumForCurrentRevision(cwd);
+  const dateString = await getDateStringForCommit(commit);
   const version = isExperimental
-    ? `0.0.0-experimental-${commit}`
-    : `0.0.0-${commit}`;
+    ? `0.0.0-experimental-${commit}-${dateString}`
+    : `0.0.0-${commit}-${dateString}`;
 
   // Only available for Circle CI builds.
   // https://circleci.com/docs/2.0/env-vars/
@@ -88,8 +89,8 @@ const getBuildInfo = async () => {
     join(cwd, 'packages', 'react', 'package.json')
   );
   const reactVersion = isExperimental
-    ? `${packageJSON.version}-experimental-${commit}`
-    : `${packageJSON.version}-${commit}`;
+    ? `${packageJSON.version}-experimental-${commit}-${dateString}`
+    : `${packageJSON.version}-${commit}-${dateString}`;
 
   return {branch, buildNumber, checksum, commit, reactVersion, version};
 };
@@ -103,6 +104,19 @@ const getChecksumForCurrentRevision = async cwd => {
   return hashedPackages.hash.slice(0, 7);
 };
 
+const getDateStringForCommit = async commit => {
+  let dateString = await execRead(
+    `git show -s --format=%cd --date=format:%Y%m%d ${commit}`
+  );
+
+  // On CI environment, this string is wrapped with quotes '...'s
+  if (dateString.startsWith("'")) {
+    dateString = dateString.substr(1, 8);
+  }
+
+  return dateString;
+};
+
 const getCommitFromCurrentBuild = async () => {
   const cwd = join(__dirname, '..', '..');
 
@@ -194,10 +208,10 @@ const splitCommaParams = array => {
 // 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> to be easily recognized (e.g. 0.0.0-01974a867).
+// 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).
+// 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');
@@ -258,6 +272,7 @@ module.exports = {
   getBuildInfo,
   getChecksumForCurrentRevision,
   getCommitFromCurrentBuild,
+  getDateStringForCommit,
   getPublicPackages,
   handleError,
   logPromise,
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 71b6f2dd0dec..575f1c9f0585 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -22,6 +22,16 @@ const sha = (
   spawnSync('git', ['show', '-s', '--format=%h']).stdout + ''
 ).trim();
 
+let dateString = (
+  spawnSync('git', ['show', '-s', '--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.substr(1, 8);
+}
+
 if (process.env.CIRCLE_NODE_TOTAL) {
   // In CI, we use multiple concurrent processes. Allocate half the processes to
   // build the stable channel, and the other half for experimental. Override
@@ -32,14 +42,16 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   if (index < halfTotal) {
     const nodeTotal = halfTotal;
     const nodeIndex = index;
-    updateTheReactVersionThatDevToolsReads(ReactVersion + '-' + sha);
+    updateTheReactVersionThatDevToolsReads(
+      ReactVersion + '-' + sha + '-' + dateString
+    );
     buildForChannel('stable', nodeTotal, nodeIndex);
     processStable('./build');
   } else {
     const nodeTotal = total - halfTotal;
     const nodeIndex = index - halfTotal;
     updateTheReactVersionThatDevToolsReads(
-      ReactVersion + '-experimental-' + sha
+      ReactVersion + '-experimental-' + sha + '-' + dateString
     );
     buildForChannel('experimental', nodeTotal, nodeIndex);
     processExperimental('./build');
@@ -51,12 +63,16 @@ if (process.env.CIRCLE_NODE_TOTAL) {
 } else {
   // Running locally, no concurrency. Move each channel's build artifacts into
   // a temporary directory so that they don't conflict.
-  updateTheReactVersionThatDevToolsReads(ReactVersion + '-' + sha);
+  updateTheReactVersionThatDevToolsReads(
+    ReactVersion + '-' + sha + '-' + dateString
+  );
   buildForChannel('stable', '', '');
   const stableDir = tmp.dirSync().name;
   crossDeviceRenameSync('./build', stableDir);
   processStable(stableDir);
-  updateTheReactVersionThatDevToolsReads(ReactVersion + '-experimental-' + sha);
+  updateTheReactVersionThatDevToolsReads(
+    ReactVersion + '-experimental-' + sha + '-' + dateString
+  );
   buildForChannel('experimental', '', '');
   const experimentalDir = tmp.dirSync().name;
   crossDeviceRenameSync('./build', experimentalDir);
@@ -88,13 +104,13 @@ function buildForChannel(channel, nodeTotal, nodeIndex) {
 
 function processStable(buildDir) {
   if (fs.existsSync(buildDir + '/node_modules')) {
-    const defaultVersionIfNotFound = '0.0.0' + '-' + sha;
+    const defaultVersionIfNotFound = '0.0.0' + '-' + sha + '-' + dateString;
     const versionsMap = new Map();
     for (const moduleName in stablePackages) {
       const version = stablePackages[moduleName];
       versionsMap.set(
         moduleName,
-        version + '-' + nextChannelLabel + '-' + sha,
+        version + '-' + nextChannelLabel + '-' + sha + '-' + dateString,
         defaultVersionIfNotFound
       );
     }
@@ -143,7 +159,8 @@ function processStable(buildDir) {
 
 function processExperimental(buildDir, version) {
   if (fs.existsSync(buildDir + '/node_modules')) {
-    const defaultVersionIfNotFound = '0.0.0' + '-' + 'experimental' + '-' + sha;
+    const defaultVersionIfNotFound =
+      '0.0.0' + '-' + 'experimental' + '-' + sha + '-' + dateString;
     const versionsMap = new Map();
     for (const moduleName in stablePackages) {
       versionsMap.set(moduleName, defaultVersionIfNotFound);
@@ -195,7 +212,7 @@ function crossDeviceRenameSync(source, destination) {
 
 /*
  * Grabs the built packages in ${tmp_build_dir}/node_modules and updates the
- * `version` key in their package.json to 0.0.0-${commitHash} for the commit
+ * `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).

From e577bfb1cedc56f93d8e5967088932e7100d4829 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 23 Jun 2021 21:47:47 +0100
Subject: [PATCH 0640/1603] Add tests for invokeGuardedCallback (#21734)

* Add tests for invokeGuardedCallback

* Add skipped failing tests

* Check next render works

* Mirror tests for createRoot

* Move comments around
---
 .../ReactDOMConsoleErrorReporting-test.js     | 1120 +++++++++++++++++
 1 file changed, 1120 insertions(+)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js

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 000000000000..bbaffe5489b5
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
@@ -0,0 +1,1120 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+describe('ReactDOMConsoleErrorReporting', () => {
+  let act;
+  let React;
+  let ReactDOM;
+
+  let ErrorBoundary;
+  let NoError;
+  let container;
+  let windowOnError;
+
+  beforeEach(() => {
+    jest.resetModules();
+    act = require('jest-react').act;
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    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);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    window.removeEventListener('error', windowOnError);
+  });
+
+  describe('ReactDOM.createRoot', () => {
+    it('logs errors during event handlers', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        return (
+          <button
+            onClick={() => {
+              throw Error('Boom');
+            }}>
+            click me
+          </button>
+        );
+      }
+
+      const root = ReactDOM.createRoot(container);
+      act(() => {
+        root.render(<Foo />);
+      });
+
+      act(() => {
+        container.firstChild.dispatchEvent(
+          new MouseEvent('click', {
+            bubbles: true,
+          }),
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported because we're in a browser click event:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // This one is jsdom-only. Real browser deduplicates it.
+            // (In DEV, we have a nested event due to guarded callback.)
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported because we're in a browser click event:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // This one is jsdom-only. Real browser deduplicates it.
+            // (In DEV, we have a nested event due to guarded callback.)
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      } else {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported because we're in a browser click event:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported because we're in a browser click event:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([]);
+      }
+    });
+
+    it('logs render errors without an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      const root = ReactDOM.createRoot(container);
+      expect(() => {
+        act(() => {
+          root.render(<Foo />);
+        });
+      }).toThrow('Boom');
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // TODO: This is duplicated only with createRoot. Why?
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // TODO: This is duplicated only with createRoot. Why?
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([]);
+      }
+    });
+
+    it('logs render errors with an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      const root = ReactDOM.createRoot(container);
+      act(() => {
+        root.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // TODO: This is duplicated only with createRoot. Why?
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by jsdom due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+          [
+            // TODO: This is duplicated only with createRoot. Why?
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // TODO: This is duplicated only with createRoot. Why?
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // TODO: This is duplicated only with createRoot. Why?
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs layout effect errors without an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOM.createRoot(container);
+      expect(() => {
+        act(() => {
+          root.render(<Foo />);
+        });
+      }).toThrow('Boom');
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs layout effect errors with an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOM.createRoot(container);
+      act(() => {
+        root.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by jsdom due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs passive effect errors without an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOM.createRoot(container);
+      expect(() => {
+        act(() => {
+          root.render(<Foo />);
+        });
+      }).toThrow('Boom');
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs passive effect errors with an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      const root = ReactDOM.createRoot(container);
+      act(() => {
+        root.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by jsdom due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        root.render(<NoError />);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([]);
+      }
+    });
+  });
+
+  describe('ReactDOM.render', () => {
+    it('logs errors during event handlers', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        return (
+          <button
+            onClick={() => {
+              throw Error('Boom');
+            }}>
+            click me
+          </button>
+        );
+      }
+
+      act(() => {
+        ReactDOM.render(<Foo />, container);
+      });
+
+      act(() => {
+        container.firstChild.dispatchEvent(
+          new MouseEvent('click', {
+            bubbles: true,
+          }),
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported because we're in a browser click event:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // This one is jsdom-only. Real browser deduplicates it.
+            // (In DEV, we have a nested event due to guarded callback.)
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+          [
+            // Reported because we're in a browser click event:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // This one is jsdom-only. Real browser deduplicates it.
+            // (In DEV, we have a nested event due to guarded callback.)
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      } else {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported because we're in a browser click event:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported because we're in a browser click event:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+        ]);
+      }
+    });
+
+    it('logs render errors without an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      expect(() => {
+        act(() => {
+          ReactDOM.render(<Foo />, container);
+        });
+      }).toThrow('Boom');
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+          [
+            // Reported due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+        ]);
+      }
+    });
+
+    it('logs render errors with an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        throw Error('Boom');
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+          container,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+          [
+            // Reported by jsdom due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+        ]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs layout effect errors without an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      expect(() => {
+        act(() => {
+          ReactDOM.render(<Foo />, container);
+        });
+      }).toThrow('Boom');
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+          [
+            // Reported due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+        ]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs layout effect errors with an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useLayoutEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+          container,
+        );
+      });
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+          [
+            // Reported by jsdom due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+        ]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs passive effect errors without an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      expect(() => {
+        act(() => {
+          ReactDOM.render(<Foo />, container);
+        });
+      }).toThrow('Boom');
+
+      if (__DEV__) {
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            // Reported due to guarded callback:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+          [
+            // Reported due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+        ]);
+      }
+    });
+
+    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
+    xit('logs passive effect errors with an error boundary', () => {
+      spyOnDevAndProd(console, 'error');
+
+      function Foo() {
+        React.useEffect(() => {
+          throw Error('Boom');
+        }, []);
+        return null;
+      }
+
+      act(() => {
+        ReactDOM.render(
+          <ErrorBoundary>
+            <Foo />
+          </ErrorBoundary>,
+          container,
+        );
+      });
+
+      if (__DEV__) {
+        // Reported due to guarded callback:
+        expect(windowOnError.mock.calls).toEqual([
+          [
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+          [
+            // Reported by jsdom due to the guarded callback:
+            expect.stringContaining('Error: Uncaught [Error: Boom]'),
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+          [
+            // Addendum by React:
+            expect.stringContaining(
+              'The above error occurred in the <Foo> component',
+            ),
+          ],
+        ]);
+      } else {
+        // The top-level error was caught with try/catch, and there's no guarded callback,
+        // so in production we don't see an error event.
+        expect(windowOnError.mock.calls).toEqual([]);
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [
+            // Reported by React with no extra message:
+            expect.objectContaining({
+              message: 'Boom',
+            }),
+          ],
+        ]);
+      }
+
+      // Check next render doesn't throw.
+      windowOnError.mockReset();
+      console.error.calls.reset();
+      act(() => {
+        ReactDOM.render(<NoError />, container);
+      });
+      expect(container.textContent).toBe('OK');
+      expect(windowOnError.mock.calls).toEqual([]);
+      if (__DEV__) {
+        expect(console.error.calls.all().map(c => c.args)).toEqual([
+          [expect.stringContaining('ReactDOM.render is no longer supported')],
+        ]);
+      }
+    });
+  });
+});

From 8426bb6956fb12279c458e69fbfc62fbb04a621c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 23 Jun 2021 16:58:46 -0400
Subject: [PATCH 0641/1603] Pass Jest useStderr flag when debugging (#21741)

This prevents it from buffering adn suppressing all console logs until a test has completed running (When debugging in Chrome).
---
 scripts/jest/jest-cli.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index ed2e6822f3b3..0e916c07c4fa 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -261,6 +261,9 @@ function getCommandArgs() {
   if (argv.debug) {
     args.unshift('--inspect-brk');
     args.push('--runInBand');
+
+    // Prevent console logs from being hidden until test completes.
+    args.push('--useStderr');
   }
 
   // CI Environments have limited workers.

From 27c9c95e23ddedb9163373950e364dd62038f6c0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 23 Jun 2021 20:32:44 -0400
Subject: [PATCH 0642/1603] act: Bypass microtask for "default sync" updates
 (#21740)

When wrapping an update in act, instead of scheduling a microtask,
we can add the task to our internal queue.

The benefit is that the user doesn't have to await the act call. We can
flush the work synchronously. This doesn't account for microtasks that
are scheduled in userspace, of course, but it at least covers
React's usage.
---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 9 ++++++++-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 9 ++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b21c7b2e33f9..6ce133729979 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -692,7 +692,14 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     }
     if (supportsMicrotasks) {
       // Flush the queue in a microtask.
-      scheduleMicrotask(flushSyncCallbacks);
+      if (__DEV__ && ReactCurrentActQueue.current !== null) {
+        // Inside `act`, use our internal `act` queue so that these get flushed
+        // at the end of the current scope even when using the sync version
+        // of `act`.
+        ReactCurrentActQueue.current.push(flushSyncCallbacks);
+      } else {
+        scheduleMicrotask(flushSyncCallbacks);
+      }
     } else {
       // Flush the queue in an Immediate task.
       scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 399ea10393ef..b99245f097d1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -692,7 +692,14 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     }
     if (supportsMicrotasks) {
       // Flush the queue in a microtask.
-      scheduleMicrotask(flushSyncCallbacks);
+      if (__DEV__ && ReactCurrentActQueue.current !== null) {
+        // Inside `act`, use our internal `act` queue so that these get flushed
+        // at the end of the current scope even when using the sync version
+        // of `act`.
+        ReactCurrentActQueue.current.push(flushSyncCallbacks);
+      } else {
+        scheduleMicrotask(flushSyncCallbacks);
+      }
     } else {
       // Flush the queue in an Immediate task.
       scheduleCallback(ImmediateSchedulerPriority, flushSyncCallbacks);

From 7fec38041faf7f4691f503feccbaf5af901367e2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 24 Jun 2021 15:48:28 +0100
Subject: [PATCH 0643/1603] Log and show error overlay for commit phase errors
 (#21723)

* Enable skipped tests from #21723

* Report uncaught errors in DEV

* Clear caught error

This is not necessary (as proven by tests) because next invokeGuardedCallback clears it anyway. But I'll keep it for consistency with other calls.
---
 .../ReactDOMConsoleErrorReporting-test.js     | 24 ++++------
 .../src/ReactFiberCommitWork.new.js           | 47 +++++++++++++++----
 .../src/ReactFiberCommitWork.old.js           | 47 +++++++++++++++----
 3 files changed, 86 insertions(+), 32 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
index bbaffe5489b5..47fbd364d317 100644
--- a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
@@ -313,8 +313,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs layout effect errors without an error boundary', () => {
+    it('logs layout effect errors without an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
@@ -382,8 +381,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs layout effect errors with an error boundary', () => {
+    it('logs layout effect errors with an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
@@ -453,8 +451,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs passive effect errors without an error boundary', () => {
+    it('logs passive effect errors without an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
@@ -522,8 +519,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs passive effect errors with an error boundary', () => {
+    it('logs passive effect errors with an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
@@ -827,8 +823,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs layout effect errors without an error boundary', () => {
+    it('logs layout effect errors without an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
@@ -898,8 +893,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs layout effect errors with an error boundary', () => {
+    it('logs layout effect errors with an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
@@ -972,8 +966,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs passive effect errors without an error boundary', () => {
+    it('logs passive effect errors without an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
@@ -1043,8 +1036,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
       }
     });
 
-    // TODO: this is broken due to https://github.com/facebook/react/issues/21712.
-    xit('logs passive effect errors with an error boundary', () => {
+    it('logs passive effect errors with an error boundary', () => {
       spyOnDevAndProd(console, 'error');
 
       function Foo() {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 60158f1f4aaa..e7a3e157301b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -140,6 +140,7 @@ import {
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
 import {doesFiberContain} from './ReactFiberTreeReflection';
+import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -160,6 +161,20 @@ let nextEffect: Fiber | null = null;
 let inProgressLanes: Lanes | null = null;
 let inProgressRoot: FiberRoot | null = null;
 
+function reportUncaughtErrorInDEV(error) {
+  // Wrapping each small part of the commit phase into a guarded
+  // callback is a bit too slow (https://github.com/facebook/react/pull/21666).
+  // But we rely on it to surface errors to DEV tools like overlays
+  // (https://github.com/facebook/react/issues/21712).
+  // As a compromise, rethrow only caught errors in a guard.
+  if (__DEV__) {
+    invokeGuardedCallback(null, () => {
+      throw error;
+    });
+    clearCaughtError();
+  }
+}
+
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
@@ -186,8 +201,9 @@ function safelyCallCommitHookLayoutEffectListMount(
 ) {
   try {
     commitHookEffectListMount(HookLayout, current);
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -199,8 +215,9 @@ function safelyCallComponentWillUnmount(
 ) {
   try {
     callComponentWillUnmountWithTimer(current, instance);
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -212,8 +229,9 @@ function safelyCallComponentDidMount(
 ) {
   try {
     instance.componentDidMount();
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -221,8 +239,9 @@ function safelyCallComponentDidMount(
 function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   try {
     commitAttachRef(current);
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -246,6 +265,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
           ref(null);
         }
       } catch (error) {
+        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
     } else {
@@ -262,6 +282,7 @@ function safelyCallDestroy(
   try {
     destroy();
   } catch (error) {
+    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -323,6 +344,7 @@ function commitBeforeMutationEffects_complete() {
     try {
       commitBeforeMutationEffectsOnFiber(fiber);
     } catch (error) {
+      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2065,6 +2087,7 @@ function commitMutationEffects_begin(root: FiberRoot) {
         try {
           commitDeletion(root, childToDelete, fiber);
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(childToDelete, fiber, error);
         }
       }
@@ -2087,6 +2110,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
     try {
       commitMutationEffectsOnFiber(fiber, root);
     } catch (error) {
+      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2329,6 +2353,7 @@ function commitLayoutMountEffects_complete(
       try {
         commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
       } catch (error) {
+        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2382,6 +2407,7 @@ function commitPassiveMountEffects_complete(
       try {
         commitPassiveMountOnFiber(root, fiber);
       } catch (error) {
+        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2664,6 +2690,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2673,6 +2700,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           instance.componentDidMount();
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2692,6 +2720,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2715,6 +2744,7 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2745,6 +2775,7 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index c741023f22bf..a4ce8c644954 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -140,6 +140,7 @@ import {
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';
 import {doesFiberContain} from './ReactFiberTreeReflection';
+import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -160,6 +161,20 @@ let nextEffect: Fiber | null = null;
 let inProgressLanes: Lanes | null = null;
 let inProgressRoot: FiberRoot | null = null;
 
+function reportUncaughtErrorInDEV(error) {
+  // Wrapping each small part of the commit phase into a guarded
+  // callback is a bit too slow (https://github.com/facebook/react/pull/21666).
+  // But we rely on it to surface errors to DEV tools like overlays
+  // (https://github.com/facebook/react/issues/21712).
+  // As a compromise, rethrow only caught errors in a guard.
+  if (__DEV__) {
+    invokeGuardedCallback(null, () => {
+      throw error;
+    });
+    clearCaughtError();
+  }
+}
+
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
@@ -186,8 +201,9 @@ function safelyCallCommitHookLayoutEffectListMount(
 ) {
   try {
     commitHookEffectListMount(HookLayout, current);
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -199,8 +215,9 @@ function safelyCallComponentWillUnmount(
 ) {
   try {
     callComponentWillUnmountWithTimer(current, instance);
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -212,8 +229,9 @@ function safelyCallComponentDidMount(
 ) {
   try {
     instance.componentDidMount();
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -221,8 +239,9 @@ function safelyCallComponentDidMount(
 function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   try {
     commitAttachRef(current);
-  } catch (unmountError) {
-    captureCommitPhaseError(current, nearestMountedAncestor, unmountError);
+  } catch (error) {
+    reportUncaughtErrorInDEV(error);
+    captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
 
@@ -246,6 +265,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
           ref(null);
         }
       } catch (error) {
+        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
     } else {
@@ -262,6 +282,7 @@ function safelyCallDestroy(
   try {
     destroy();
   } catch (error) {
+    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -323,6 +344,7 @@ function commitBeforeMutationEffects_complete() {
     try {
       commitBeforeMutationEffectsOnFiber(fiber);
     } catch (error) {
+      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2065,6 +2087,7 @@ function commitMutationEffects_begin(root: FiberRoot) {
         try {
           commitDeletion(root, childToDelete, fiber);
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(childToDelete, fiber, error);
         }
       }
@@ -2087,6 +2110,7 @@ function commitMutationEffects_complete(root: FiberRoot) {
     try {
       commitMutationEffectsOnFiber(fiber, root);
     } catch (error) {
+      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2329,6 +2353,7 @@ function commitLayoutMountEffects_complete(
       try {
         commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
       } catch (error) {
+        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2382,6 +2407,7 @@ function commitPassiveMountEffects_complete(
       try {
         commitPassiveMountOnFiber(root, fiber);
       } catch (error) {
+        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2664,6 +2690,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2673,6 +2700,7 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           instance.componentDidMount();
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2692,6 +2720,7 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2715,6 +2744,7 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2745,6 +2775,7 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
+          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
       }

From 386e8f2ea7209121b89159dbfbca53f70e87e1fb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 24 Jun 2021 11:19:57 -0400
Subject: [PATCH 0644/1603] DevTools: Fix Settings dialog scroll/size bug in
 Firefox (#21747)

---
 .../src/devtools/views/Settings/SettingsModal.css           | 2 +-
 .../react-devtools-shared/src/devtools/views/TabBar.css     | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
index 7c1e6b55b449..6566621ebbc7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.css
@@ -22,7 +22,7 @@
   box-shadow: 0 2px 4px var(--color-shadow);
   border-radius: 0.25rem;
   overflow: auto;
-  width: 400px;
+  width: 410px;
   max-width: 100%;
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.css b/packages/react-devtools-shared/src/devtools/views/TabBar.css
index a29770a0d010..57abadaecf55 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.css
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.css
@@ -10,6 +10,9 @@
   user-select: none;
   color: var(--color-text);
 
+  /* Hide radio buttons for Firefox too */
+  position:  relative;
+
   /* Electron drag area */
   -webkit-app-region: no-drag;
 }
@@ -48,6 +51,9 @@
   width: 0;
   margin: 0;
   opacity: 0;
+
+  /* Hide radio buttons for Firefox too */
+  position:  absolute;
 }
 
 .IconSizeNavigation,

From 51b0becf3e8a8084d8a2ee85ce8b3a1d9ace6ecd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 24 Jun 2021 19:50:07 +0100
Subject: [PATCH 0645/1603] Always keep disabled logs in the second pass
 (#21739)

* Add tests for disabled logs

* Always keep disabled logs in the second pass

* Jest nit

* Always use the second result
---
 .../src/ReactFiberClassComponent.new.js       |  32 ++-
 .../src/ReactFiberClassComponent.old.js       |  32 ++-
 .../src/__tests__/ReactStrictMode-test.js     | 192 ++++++++++++++++++
 3 files changed, 220 insertions(+), 36 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index c464b6c3bf41..3d10472c0441 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -169,7 +169,7 @@ function applyDerivedStateFromProps(
   nextProps: any,
 ) {
   const prevState = workInProgress.memoizedState;
-
+  let partialState = getDerivedStateFromProps(nextProps, prevState);
   if (__DEV__) {
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
@@ -178,16 +178,11 @@ function applyDerivedStateFromProps(
       disableLogs();
       try {
         // Invoke the function an extra time to help detect side-effects.
-        getDerivedStateFromProps(nextProps, prevState);
+        partialState = getDerivedStateFromProps(nextProps, prevState);
       } finally {
         reenableLogs();
       }
     }
-  }
-
-  const partialState = getDerivedStateFromProps(nextProps, prevState);
-
-  if (__DEV__) {
     warnOnUndefinedDerivedState(ctor, partialState);
   }
   // Merge the partial state and the previous state.
@@ -323,6 +318,11 @@ function checkShouldComponentUpdate(
 ) {
   const instance = workInProgress.stateNode;
   if (typeof instance.shouldComponentUpdate === 'function') {
+    let shouldUpdate = instance.shouldComponentUpdate(
+      newProps,
+      newState,
+      nextContext,
+    );
     if (__DEV__) {
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
@@ -331,19 +331,15 @@ function checkShouldComponentUpdate(
         disableLogs();
         try {
           // Invoke the function an extra time to help detect side-effects.
-          instance.shouldComponentUpdate(newProps, newState, nextContext);
+          shouldUpdate = instance.shouldComponentUpdate(
+            newProps,
+            newState,
+            nextContext,
+          );
         } finally {
           reenableLogs();
         }
       }
-    }
-    const shouldUpdate = instance.shouldComponentUpdate(
-      newProps,
-      newState,
-      nextContext,
-    );
-
-    if (__DEV__) {
       if (shouldUpdate === undefined) {
         console.error(
           '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
@@ -659,6 +655,7 @@ function constructClassInstance(
       : emptyContextObject;
   }
 
+  let instance = new ctor(props, context);
   // Instantiate twice to help detect side-effects.
   if (__DEV__) {
     if (
@@ -667,14 +664,13 @@ function constructClassInstance(
     ) {
       disableLogs();
       try {
-        new ctor(props, context); // eslint-disable-line no-new
+        instance = new ctor(props, context); // eslint-disable-line no-new
       } finally {
         reenableLogs();
       }
     }
   }
 
-  const instance = new ctor(props, context);
   const state = (workInProgress.memoizedState =
     instance.state !== null && instance.state !== undefined
       ? instance.state
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index adb616c6262b..ab80913c7b6b 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -169,7 +169,7 @@ function applyDerivedStateFromProps(
   nextProps: any,
 ) {
   const prevState = workInProgress.memoizedState;
-
+  let partialState = getDerivedStateFromProps(nextProps, prevState);
   if (__DEV__) {
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
@@ -178,16 +178,11 @@ function applyDerivedStateFromProps(
       disableLogs();
       try {
         // Invoke the function an extra time to help detect side-effects.
-        getDerivedStateFromProps(nextProps, prevState);
+        partialState = getDerivedStateFromProps(nextProps, prevState);
       } finally {
         reenableLogs();
       }
     }
-  }
-
-  const partialState = getDerivedStateFromProps(nextProps, prevState);
-
-  if (__DEV__) {
     warnOnUndefinedDerivedState(ctor, partialState);
   }
   // Merge the partial state and the previous state.
@@ -323,6 +318,11 @@ function checkShouldComponentUpdate(
 ) {
   const instance = workInProgress.stateNode;
   if (typeof instance.shouldComponentUpdate === 'function') {
+    let shouldUpdate = instance.shouldComponentUpdate(
+      newProps,
+      newState,
+      nextContext,
+    );
     if (__DEV__) {
       if (
         debugRenderPhaseSideEffectsForStrictMode &&
@@ -331,19 +331,15 @@ function checkShouldComponentUpdate(
         disableLogs();
         try {
           // Invoke the function an extra time to help detect side-effects.
-          instance.shouldComponentUpdate(newProps, newState, nextContext);
+          shouldUpdate = instance.shouldComponentUpdate(
+            newProps,
+            newState,
+            nextContext,
+          );
         } finally {
           reenableLogs();
         }
       }
-    }
-    const shouldUpdate = instance.shouldComponentUpdate(
-      newProps,
-      newState,
-      nextContext,
-    );
-
-    if (__DEV__) {
       if (shouldUpdate === undefined) {
         console.error(
           '%s.shouldComponentUpdate(): Returned undefined instead of a ' +
@@ -659,6 +655,7 @@ function constructClassInstance(
       : emptyContextObject;
   }
 
+  let instance = new ctor(props, context);
   // Instantiate twice to help detect side-effects.
   if (__DEV__) {
     if (
@@ -667,14 +664,13 @@ function constructClassInstance(
     ) {
       disableLogs();
       try {
-        new ctor(props, context); // eslint-disable-line no-new
+        instance = new ctor(props, context); // eslint-disable-line no-new
       } finally {
         reenableLogs();
       }
     }
   }
 
-  const instance = new ctor(props, context);
   const state = (workInProgress.memoizedState =
     instance.state !== null && instance.state !== undefined
       ? instance.state
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index a41f2ef2ccc7..5bd16f9c544d 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -892,4 +892,196 @@ describe('context legacy', () => {
     // Dedupe
     ReactDOM.render(<Root />, container);
   });
+
+  describe('disableLogs', () => {
+    it('disables logs once for class double render', () => {
+      spyOnDevAndProd(console, 'log');
+
+      let count = 0;
+      class Foo extends React.Component {
+        render() {
+          count++;
+          console.log('foo ' + count);
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        container,
+      );
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(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('disables logs once for class double ctor', () => {
+      spyOnDevAndProd(console, 'log');
+
+      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');
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        container,
+      );
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(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('disables logs once for class double getDerivedStateFromProps', () => {
+      spyOnDevAndProd(console, 'log');
+
+      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');
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        container,
+      );
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(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('disables logs once for class double shouldComponentUpdate', () => {
+      spyOnDevAndProd(console, 'log');
+
+      let count = 0;
+      class Foo extends React.Component {
+        state = {};
+        shouldComponentUpdate() {
+          count++;
+          console.log('foo ' + count);
+          return {};
+        }
+        render() {
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        container,
+      );
+      // Trigger sCU:
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        container,
+      );
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(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('disables logs once for class state updaters', () => {
+      spyOnDevAndProd(console, 'log');
+
+      let inst;
+      let count = 0;
+      class Foo extends React.Component {
+        state = {};
+        render() {
+          inst = this;
+          return null;
+        }
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        container,
+      );
+      inst.setState(() => {
+        count++;
+        console.log('foo ' + count);
+        return {};
+      });
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(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('disables logs once for function double render', () => {
+      spyOnDevAndProd(console, 'log');
+
+      let count = 0;
+      function Foo() {
+        count++;
+        console.log('foo ' + count);
+        return null;
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <React.StrictMode>
+          <Foo />
+        </React.StrictMode>,
+        container,
+      );
+
+      expect(count).toBe(__DEV__ ? 2 : 1);
+      expect(console.log).toBeCalledTimes(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');
+    });
+  });
 });

From 534c9c52ec3e33ed241f7a20e264bb4571d452b3 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 24 Jun 2021 20:57:10 +0100
Subject: [PATCH 0646/1603] Move error logging to update callback (#21737)

* Move error logging to update callback

This prevents double logging for gDSFE boundaries with createRoot.

* Add an explanation for the rest of duplicates
---
 .../ReactDOMConsoleErrorReporting-test.js     | 26 +++++++------------
 .../src/ReactFiberThrow.new.js                | 15 +++++------
 .../src/ReactFiberThrow.old.js                | 15 +++++------
 3 files changed, 23 insertions(+), 33 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
index 47fbd364d317..3507e2440981 100644
--- a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
@@ -166,7 +166,8 @@ describe('ReactDOMConsoleErrorReporting', () => {
             }),
           ],
           [
-            // TODO: This is duplicated only with createRoot. Why?
+            // This is only duplicated with createRoot
+            // because it retries once with a sync render.
             expect.objectContaining({
               message: 'Boom',
             }),
@@ -181,7 +182,8 @@ describe('ReactDOMConsoleErrorReporting', () => {
             }),
           ],
           [
-            // TODO: This is duplicated only with createRoot. Why?
+            // This is only duplicated with createRoot
+            // because it retries once with a sync render.
             expect.stringContaining('Error: Uncaught [Error: Boom]'),
             expect.objectContaining({
               message: 'Boom',
@@ -246,7 +248,8 @@ describe('ReactDOMConsoleErrorReporting', () => {
             }),
           ],
           [
-            // TODO: This is duplicated only with createRoot. Why?
+            // This is only duplicated with createRoot
+            // because it retries once with a sync render.
             expect.objectContaining({
               message: 'Boom',
             }),
@@ -261,20 +264,15 @@ describe('ReactDOMConsoleErrorReporting', () => {
             }),
           ],
           [
-            // Addendum by React:
-            expect.stringContaining(
-              'The above error occurred in the <Foo> component',
-            ),
-          ],
-          [
-            // TODO: This is duplicated only with createRoot. Why?
+            // This is only duplicated with createRoot
+            // because it retries once with a sync render.
             expect.stringContaining('Error: Uncaught [Error: Boom]'),
             expect.objectContaining({
               message: 'Boom',
             }),
           ],
           [
-            // TODO: This is duplicated only with createRoot. Why?
+            // Addendum by React:
             expect.stringContaining(
               'The above error occurred in the <Foo> component',
             ),
@@ -291,12 +289,6 @@ describe('ReactDOMConsoleErrorReporting', () => {
               message: 'Boom',
             }),
           ],
-          [
-            // TODO: This is duplicated only with createRoot. Why?
-            expect.objectContaining({
-              message: 'Boom',
-            }),
-          ],
         ]);
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index e100561ed86e..398ae98abef6 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -108,9 +108,14 @@ function createClassErrorUpdate(
   if (typeof getDerivedStateFromError === 'function') {
     const error = errorInfo.value;
     update.payload = () => {
-      logCapturedError(fiber, errorInfo);
       return getDerivedStateFromError(error);
     };
+    update.callback = () => {
+      if (__DEV__) {
+        markFailedErrorBoundaryForHotReloading(fiber);
+      }
+      logCapturedError(fiber, errorInfo);
+    };
   }
 
   const inst = fiber.stateNode;
@@ -119,6 +124,7 @@ function createClassErrorUpdate(
       if (__DEV__) {
         markFailedErrorBoundaryForHotReloading(fiber);
       }
+      logCapturedError(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.
@@ -126,9 +132,6 @@ function createClassErrorUpdate(
         // TODO: Warn in strict mode if getDerivedStateFromError is
         // not defined.
         markLegacyErrorBoundaryAsFailed(this);
-
-        // Only log here if componentDidCatch is the only error boundary method defined
-        logCapturedError(fiber, errorInfo);
       }
       const error = errorInfo.value;
       const stack = errorInfo.stack;
@@ -150,10 +153,6 @@ function createClassErrorUpdate(
         }
       }
     };
-  } else if (__DEV__) {
-    update.callback = () => {
-      markFailedErrorBoundaryForHotReloading(fiber);
-    };
   }
   return update;
 }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index cdb02cb8f188..42e255793857 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -108,9 +108,14 @@ function createClassErrorUpdate(
   if (typeof getDerivedStateFromError === 'function') {
     const error = errorInfo.value;
     update.payload = () => {
-      logCapturedError(fiber, errorInfo);
       return getDerivedStateFromError(error);
     };
+    update.callback = () => {
+      if (__DEV__) {
+        markFailedErrorBoundaryForHotReloading(fiber);
+      }
+      logCapturedError(fiber, errorInfo);
+    };
   }
 
   const inst = fiber.stateNode;
@@ -119,6 +124,7 @@ function createClassErrorUpdate(
       if (__DEV__) {
         markFailedErrorBoundaryForHotReloading(fiber);
       }
+      logCapturedError(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.
@@ -126,9 +132,6 @@ function createClassErrorUpdate(
         // TODO: Warn in strict mode if getDerivedStateFromError is
         // not defined.
         markLegacyErrorBoundaryAsFailed(this);
-
-        // Only log here if componentDidCatch is the only error boundary method defined
-        logCapturedError(fiber, errorInfo);
       }
       const error = errorInfo.value;
       const stack = errorInfo.stack;
@@ -150,10 +153,6 @@ function createClassErrorUpdate(
         }
       }
     };
-  } else if (__DEV__) {
-    update.callback = () => {
-      markFailedErrorBoundaryForHotReloading(fiber);
-    };
   }
   return update;
 }

From 73ffce1b6fb7eff13414e35e40efe4269664e5ea Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 24 Jun 2021 22:42:44 -0400
Subject: [PATCH 0647/1603] DevTools: Update tests to fix warnings/errors
 (#21748)

Some new ones had slipped in (e.g. deprecated ReactDOM.render message from 18)
---
 .../FastRefreshDevToolsIntegration-test.js    |   9 +-
 .../src/__tests__/componentStacks-test.js     |   8 +-
 .../src/__tests__/console-test.js             |  24 +--
 .../src/__tests__/editing-test.js             |  13 +-
 .../src/__tests__/inspectedElement-test.js    |  89 +++++-----
 .../src/__tests__/ownersListContext-test.js   |  13 +-
 .../src/__tests__/profilerContext-test.js     |  43 ++---
 .../src/__tests__/profilerStore-test.js       |  15 +-
 .../src/__tests__/profilingCache-test.js      |  51 +++---
 .../src/__tests__/profilingCharts-test.js     |  13 +-
 .../profilingCommitTreeBuilder-test.js        |  31 ++--
 .../src/__tests__/profilingHostRoot-test.js   |   6 +-
 .../src/__tests__/store-test.js               | 158 ++++++++----------
 .../__tests__/storeComponentFilters-test.js   |  31 ++--
 .../src/__tests__/storeOwners-test.js         |  24 +--
 .../src/__tests__/storeStressSync-test.js     |  94 ++++++-----
 .../src/__tests__/treeContext-test.js         |  90 +++++-----
 .../src/__tests__/useEditableValue-test.js    |  18 +-
 .../src/__tests__/utils.js                    |  24 ++-
 19 files changed, 391 insertions(+), 363 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
index 6b94016148db..b2b4fe9fc96d 100644
--- a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
+++ b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
@@ -9,13 +9,13 @@
 
 describe('Fast Refresh', () => {
   let React;
-  let ReactDOM;
   let ReactFreshRuntime;
   let act;
   let babel;
   let container;
   let exportsObj;
   let freshPlugin;
+  let legacyRender;
   let store;
   let withErrorsOrWarningsIgnored;
 
@@ -37,10 +37,9 @@ describe('Fast Refresh', () => {
     ReactFreshRuntime = require('react-refresh/runtime');
     ReactFreshRuntime.injectIntoGlobalHook(global);
 
-    ReactDOM = require('react-dom');
-
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
   });
 
@@ -74,7 +73,7 @@ describe('Fast Refresh', () => {
   function render(source) {
     const Component = execute(source);
     act(() => {
-      ReactDOM.render(<Component />, container);
+      legacyRender(<Component />, container);
     });
     // Module initialization shouldn't be counted as a hot update.
     expect(ReactFreshRuntime.performReactRefresh()).toBe(null);
@@ -99,7 +98,7 @@ describe('Fast Refresh', () => {
       // Here, we'll just force a re-render using the newer type to emulate this.
       const NextComponent = nextExports.default;
       act(() => {
-        ReactDOM.render(<NextComponent />, container);
+        legacyRender(<NextComponent />, container);
       });
     }
     act(() => {
diff --git a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
index 3028fc182da5..48dbd400a959 100644
--- a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
+++ b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
@@ -25,8 +25,8 @@ function normalizeCodeLocInfo(str) {
 
 describe('component stack', () => {
   let React;
-  let ReactDOM;
   let act;
+  let legacyRender;
   let mockError;
   let mockWarn;
 
@@ -44,9 +44,9 @@ describe('component stack', () => {
 
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
 
     React = require('react');
-    ReactDOM = require('react-dom');
   });
 
   it('should log the current component stack along with an error or warning', () => {
@@ -60,7 +60,7 @@ describe('component stack', () => {
 
     const container = document.createElement('div');
 
-    act(() => ReactDOM.render(<Grandparent />, container));
+    act(() => legacyRender(<Grandparent />, container));
 
     expect(mockError).toHaveBeenCalledWith(
       'Test error.',
@@ -93,7 +93,7 @@ describe('component stack', () => {
     };
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Example test="abc" />, container));
+    act(() => legacyRender(<Example test="abc" />, container));
 
     expect(useEffectCount).toBe(1);
 
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 64597597baef..3d539f286aa9 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -9,9 +9,9 @@
 
 describe('console', () => {
   let React;
-  let ReactDOM;
   let act;
   let fakeConsole;
+  let legacyRender;
   let mockError;
   let mockInfo;
   let mockLog;
@@ -58,10 +58,10 @@ describe('console', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
 
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
   });
 
   function normalizeCodeLocInfo(str) {
@@ -176,7 +176,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+    act(() => legacyRender(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
@@ -203,7 +203,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(1);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -243,7 +243,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(2);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -298,8 +298,8 @@ describe('console', () => {
     }
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Parent />, container));
-    act(() => ReactDOM.render(<Parent />, container));
+    act(() => legacyRender(<Parent />, container));
+    act(() => legacyRender(<Parent />, container));
 
     expect(mockLog).toHaveBeenCalledTimes(2);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -350,7 +350,7 @@ describe('console', () => {
       }
     }
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(1);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -377,7 +377,7 @@ describe('console', () => {
     };
 
     unpatchConsole();
-    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+    act(() => legacyRender(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
@@ -391,7 +391,7 @@ describe('console', () => {
       breakOnWarn: false,
       showInlineWarningsAndErrors: false,
     });
-    act(() => ReactDOM.render(<Child />, document.createElement('div')));
+    act(() => legacyRender(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
     expect(mockWarn.mock.calls[1]).toHaveLength(2);
@@ -435,7 +435,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Parent />, document.createElement('div')));
+    act(() => legacyRender(<Parent />, document.createElement('div')));
 
     expect(mockLog).toHaveBeenCalledTimes(1);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
@@ -460,7 +460,7 @@ describe('console', () => {
       return null;
     };
 
-    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    act(() => legacyRender(<Component />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
diff --git a/packages/react-devtools-shared/src/__tests__/editing-test.js b/packages/react-devtools-shared/src/__tests__/editing-test.js
index 1a57927f5102..78ab08b78603 100644
--- a/packages/react-devtools-shared/src/__tests__/editing-test.js
+++ b/packages/react-devtools-shared/src/__tests__/editing-test.js
@@ -13,8 +13,8 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('editing interface', () => {
   let PropTypes;
   let React;
-  let ReactDOM;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -25,6 +25,8 @@ describe('editing interface', () => {
   beforeEach(() => {
     utils = require('./utils');
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -32,7 +34,6 @@ describe('editing interface', () => {
 
     PropTypes = require('prop-types');
     React = require('react');
-    ReactDOM = require('react-dom');
   });
 
   describe('props', () => {
@@ -67,7 +68,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <>
             <ClassComponent
               array={[1, 2, 3]}
@@ -435,7 +436,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <ClassComponent object={{nested: 'initial'}} shallow="initial" />,
           container,
         ),
@@ -652,7 +653,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<FunctionComponent />, container),
+        legacyRender(<FunctionComponent />, container),
       );
 
       hookID = 0; // index
@@ -902,7 +903,7 @@ describe('editing interface', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <LegacyContextProvider>
             <ClassComponent />
           </LegacyContextProvider>,
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index be6a3d7b8604..5bec9a74f62d 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -31,12 +31,15 @@ describe('InspectedElement', () => {
   let TestUtilsAct;
   let TestRendererAct;
 
+  let legacyRender;
   let testRendererInstance;
 
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -139,7 +142,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, container),
+      legacyRender(<Example a={1} b="abc" />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -209,7 +212,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <React.Fragment>
           <LegacyContextProvider>
             <LegacyContextConsumer />
@@ -270,7 +273,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(
-      () => ReactDOM.render(<Example a={1} b="abc" />, container),
+      () => legacyRender(<Example a={1} b="abc" />, container),
       false,
     );
 
@@ -283,7 +286,7 @@ describe('InspectedElement', () => {
     `);
 
     await utils.actAsync(
-      () => ReactDOM.render(<Example a={2} b="def" />, container),
+      () => legacyRender(<Example a={2} b="def" />, container),
       false,
     );
 
@@ -319,7 +322,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Wrapper>
           <Target a={1} b="abc" />
         </Wrapper>,
@@ -349,7 +352,7 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(
       () =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper>
             <Target a={2} b="def" />
           </Wrapper>,
@@ -416,7 +419,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           boolean_false={false}
           boolean_true={true}
@@ -505,7 +508,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           anonymous_fn={instance.anonymousFunction}
           array_buffer={arrayBuffer}
@@ -669,7 +672,7 @@ describe('InspectedElement', () => {
 
     const iterable = generator();
     await utils.actAsync(() =>
-      ReactDOM.render(<Example prop={iterable} />, container),
+      legacyRender(<Example prop={iterable} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -693,7 +696,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example object={object} />, container),
+      legacyRender(<Example object={object} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -718,7 +721,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example object={object} />, container),
+      legacyRender(<Example object={object} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -755,7 +758,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example data={new CustomData()} />, container),
+      legacyRender(<Example data={new CustomData()} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -834,7 +837,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example object={object} />, container),
+      legacyRender(<Example object={object} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -889,7 +892,7 @@ describe('InspectedElement', () => {
     const Example = ({data}) => null;
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example data={testData} />, container),
+      legacyRender(<Example data={testData} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -920,7 +923,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             a: {
@@ -1075,7 +1078,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           set_of_sets={new Set([new Set([1, 2, 3]), new Set(['a', 'b', 'c'])])}
         />,
@@ -1141,7 +1144,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             a: {
@@ -1245,7 +1248,7 @@ describe('InspectedElement', () => {
 
     TestRendererAct(() => {
       TestUtilsAct(() => {
-        ReactDOM.render(
+        legacyRender(
           <Example
             nestedObject={{
               a: {
@@ -1304,7 +1307,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             a: {
@@ -1383,7 +1386,7 @@ describe('InspectedElement', () => {
 
     TestRendererAct(() => {
       TestUtilsAct(() => {
-        ReactDOM.render(
+        legacyRender(
           <Example
             nestedObject={{
               a: {
@@ -1439,7 +1442,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             value: 1,
@@ -1487,7 +1490,7 @@ describe('InspectedElement', () => {
     `);
 
     TestUtilsAct(() => {
-      ReactDOM.render(
+      legacyRender(
         <Example
           nestedObject={{
             value: 2,
@@ -1529,7 +1532,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example a={1} b="abc" />, container),
+      legacyRender(<Example a={1} b="abc" />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -1573,7 +1576,7 @@ describe('InspectedElement', () => {
     };
 
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example nestedObject={nestedObject} />,
         document.createElement('div'),
       ),
@@ -1632,7 +1635,7 @@ describe('InspectedElement', () => {
     };
 
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example nestedObject={nestedObject} />,
         document.createElement('div'),
       ),
@@ -1707,7 +1710,7 @@ describe('InspectedElement', () => {
     const bigInt = BigInt(123); // eslint-disable-line no-undef
 
     await utils.actAsync(() =>
-      ReactDOM.render(
+      legacyRender(
         <Example
           arrayBuffer={arrayBuffer}
           dataView={dataView}
@@ -1784,7 +1787,7 @@ describe('InspectedElement', () => {
     }
 
     await utils.actAsync(() =>
-      ReactDOM.render(<DisplayedComplexValue />, container),
+      legacyRender(<DisplayedComplexValue />, container),
     );
 
     const {hooks} = await inspectElementAtIndex(0);
@@ -1826,7 +1829,7 @@ describe('InspectedElement', () => {
 
     const container = document.createElement('div');
     await utils.actAsync(() =>
-      ReactDOM.render(<Example proxy={proxy} />, container),
+      legacyRender(<Example proxy={proxy} />, container),
     );
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -1860,7 +1863,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -1893,7 +1896,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -1926,7 +1929,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -1963,7 +1966,7 @@ describe('InspectedElement', () => {
 
       const container = document.createElement('div');
       await utils.actAsync(() =>
-        ReactDOM.render(<Example a={1} b="abc" />, container),
+        legacyRender(<Example a={1} b="abc" />, container),
       );
 
       await inspectElementAtIndex(0);
@@ -2030,7 +2033,7 @@ describe('InspectedElement', () => {
 
       await withErrorsOrWarningsIgnored(['test-only: '], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2066,7 +2069,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
       const data = await getErrorsAndWarningsForElementAtIndex(0);
@@ -2102,7 +2105,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2139,7 +2142,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2172,7 +2175,7 @@ describe('InspectedElement', () => {
         ['Warning: Each child in a list should have a unique "key" prop.'],
         async () => {
           await utils.actAsync(() =>
-            ReactDOM.render(<Example repeatWarningCount={1} />, container),
+            legacyRender(<Example repeatWarningCount={1} />, container),
           );
         },
       );
@@ -2202,7 +2205,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(<Example repeatWarningCount={1} />, container),
+          legacyRender(<Example repeatWarningCount={1} />, container),
         );
       });
 
@@ -2233,7 +2236,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example id={1} />
               <Example id={2} />
@@ -2330,7 +2333,7 @@ describe('InspectedElement', () => {
       const container = document.createElement('div');
       await utils.withErrorsOrWarningsIgnored(['test-only:'], async () => {
         await utils.actAsync(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example id={1} />
               <Example id={2} />
@@ -2433,7 +2436,7 @@ describe('InspectedElement', () => {
       const Example = () => 'example';
 
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <ErrorBoundary>
             <Example />
           </ErrorBoundary>,
@@ -2486,7 +2489,9 @@ describe('InspectedElement', () => {
       await toggleError(true);
 
       // we are in error state now, <Example /> won't show up
-      expect(store.getElementIDAtIndex(1)).toBe(null);
+      withErrorsOrWarningsIgnored(['Invalid index'], () => {
+        expect(store.getElementIDAtIndex(1)).toBe(null);
+      });
 
       // Inpsect <ErrorBoundary /> to toggle off the error state
       inspectedElement = await inspect(0);
diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
index 27b75afdd333..774b8ee663e7 100644
--- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -14,9 +14,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('OwnersListContext', () => {
   let React;
-  let ReactDOM;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -30,12 +30,13 @@ describe('OwnersListContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
 
     React = require('react');
-    ReactDOM = require('react-dom');
     TestRenderer = utils.requireTestRenderer();
 
     BridgeContext = require('react-devtools-shared/src/devtools/views/context')
@@ -73,7 +74,7 @@ describe('OwnersListContext', () => {
     const Child = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -132,7 +133,7 @@ describe('OwnersListContext', () => {
     const Child = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -170,7 +171,7 @@ describe('OwnersListContext', () => {
     const Parent = () => null;
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     expect(store).toMatchSnapshot('mount');
@@ -211,7 +212,7 @@ describe('OwnersListContext', () => {
     };
 
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
 
     let didFinish = false;
diff --git a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
index 21c2b2427b4f..7a62f415ce9d 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
@@ -18,6 +18,7 @@ describe('ProfilerContext', () => {
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -33,6 +34,8 @@ describe('ProfilerContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -96,10 +99,10 @@ describe('ProfilerContext', () => {
     const containerA = document.createElement('div');
     const containerB = document.createElement('div');
 
-    await utils.actAsync(() => ReactDOM.render(<Component />, containerA));
+    await utils.actAsync(() => legacyRender(<Component />, containerA));
     expect(context.supportsProfiling).toBe(true);
 
-    await utils.actAsync(() => ReactDOM.render(<Component />, containerB));
+    await utils.actAsync(() => legacyRender(<Component />, containerB));
     await utils.actAsync(() => ReactDOM.unmountComponentAtNode(containerA));
     expect(context.supportsProfiling).toBe(true);
 
@@ -110,9 +113,7 @@ describe('ProfilerContext', () => {
   it('should gracefully handle an empty profiling session (with no recorded commits)', async () => {
     const Example = () => null;
 
-    utils.act(() =>
-      ReactDOM.render(<Example />, document.createElement('div')),
-    );
+    utils.act(() => legacyRender(<Example />, document.createElement('div')));
 
     let context: Context = ((null: any): Context);
 
@@ -150,14 +151,14 @@ describe('ProfilerContext', () => {
 
     const containerOne = document.createElement('div');
     const containerTwo = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Parent />, containerOne));
-    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    utils.act(() => legacyRender(<Parent />, containerOne));
+    utils.act(() => legacyRender(<Parent />, containerTwo));
     expect(store).toMatchSnapshot('mounted');
 
     // Profile and record updates to both roots.
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerTwo));
+    await utils.actAsync(() => legacyRender(<Parent />, containerOne));
+    await utils.actAsync(() => legacyRender(<Parent />, containerTwo));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     let context: Context = ((null: any): Context);
@@ -189,13 +190,13 @@ describe('ProfilerContext', () => {
 
     const containerOne = document.createElement('div');
     const containerTwo = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Parent />, containerOne));
-    utils.act(() => ReactDOM.render(<Parent />, containerTwo));
+    utils.act(() => legacyRender(<Parent />, containerOne));
+    utils.act(() => legacyRender(<Parent />, containerTwo));
     expect(store).toMatchSnapshot('mounted');
 
     // Profile and record updates to only the first root.
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerOne));
+    await utils.actAsync(() => legacyRender(<Parent />, containerOne));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     let context: Context = ((null: any): Context);
@@ -228,14 +229,14 @@ describe('ProfilerContext', () => {
 
     const containerA = document.createElement('div');
     const containerB = document.createElement('div');
-    utils.act(() => ReactDOM.render(<Parent />, containerA));
-    utils.act(() => ReactDOM.render(<Parent />, containerB));
+    utils.act(() => legacyRender(<Parent />, containerA));
+    utils.act(() => legacyRender(<Parent />, containerB));
     expect(store).toMatchSnapshot('mounted');
 
     // Profile and record updates.
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => legacyRender(<Parent />, containerA));
+    await utils.actAsync(() => legacyRender(<Parent />, containerB));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     let context: Context = ((null: any): Context);
@@ -263,8 +264,8 @@ describe('ProfilerContext', () => {
 
     // Profile and record more updates to both roots
     await utils.actAsync(() => store.profilerStore.startProfiling());
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerA));
-    await utils.actAsync(() => ReactDOM.render(<Parent />, containerB));
+    await utils.actAsync(() => legacyRender(<Parent />, containerA));
+    await utils.actAsync(() => legacyRender(<Parent />, containerB));
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
     const otherID = ((store.getElementIDAtIndex(0): any): number);
@@ -287,7 +288,7 @@ describe('ProfilerContext', () => {
 
     const container = document.createElement('div');
     utils.act(() =>
-      ReactDOM.render(<GrandParent includeChild={true} />, container),
+      legacyRender(<GrandParent includeChild={true} />, container),
     );
     expect(store).toMatchSnapshot('mounted');
 
@@ -297,10 +298,10 @@ describe('ProfilerContext', () => {
     // Profile and record updates.
     await utils.actAsync(() => store.profilerStore.startProfiling());
     await utils.actAsync(() =>
-      ReactDOM.render(<GrandParent includeChild={true} />, container),
+      legacyRender(<GrandParent includeChild={true} />, container),
     );
     await utils.actAsync(() =>
-      ReactDOM.render(<GrandParent includeChild={false} />, container),
+      legacyRender(<GrandParent includeChild={false} />, container),
     );
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index 7799756aed85..ea81b1dceef1 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -12,6 +12,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('ProfilerStore', () => {
   let React;
   let ReactDOM;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -19,6 +20,8 @@ describe('ProfilerStore', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     store = global.store;
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
@@ -38,15 +41,15 @@ describe('ProfilerStore', () => {
     const containerB = document.createElement('div');
 
     utils.act(() => {
-      ReactDOM.render(<Parent key="A" count={3} />, containerA);
-      ReactDOM.render(<Parent key="B" count={2} />, containerB);
+      legacyRender(<Parent key="A" count={3} />, containerA);
+      legacyRender(<Parent key="B" count={2} />, containerB);
     });
 
     utils.act(() => store.profilerStore.startProfiling());
 
     utils.act(() => {
-      ReactDOM.render(<Parent key="A" count={4} />, containerA);
-      ReactDOM.render(<Parent key="B" count={1} />, containerB);
+      legacyRender(<Parent key="A" count={4} />, containerA);
+      legacyRender(<Parent key="B" count={1} />, containerB);
     });
 
     utils.act(() => store.profilerStore.stopProfiling());
@@ -96,7 +99,7 @@ describe('ProfilerStore', () => {
 
     // It's important that this test uses legacy sync mode.
     // The root API does not trigger this particular failing case.
-    ReactDOM.render(<ControlledInput />, container);
+    legacyRender(<ControlledInput />, container);
 
     utils.act(() => store.profilerStore.startProfiling());
 
@@ -151,7 +154,7 @@ describe('ProfilerStore', () => {
 
     // It's important that this test uses legacy sync mode.
     // The root API does not trigger this particular failing case.
-    ReactDOM.render(<ControlledInput />, container);
+    legacyRender(<ControlledInput />, container);
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 0b7273054c32..ace43294e931 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -18,6 +18,7 @@ describe('ProfilingCache', () => {
   let Scheduler;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -25,6 +26,8 @@ describe('ProfilingCache', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     bridge = global.bridge;
     store = global.store;
     store.collapseNodesByDefault = false;
@@ -60,14 +63,14 @@ describe('ProfilingCache', () => {
     const containerB = document.createElement('div');
     const containerC = document.createElement('div');
 
-    utils.act(() => ReactDOM.render(<Parent count={2} />, containerA));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, containerB));
+    utils.act(() => legacyRender(<Parent count={2} />, containerA));
+    utils.act(() => legacyRender(<Parent count={1} />, containerB));
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={3} />, containerA));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, containerC));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, containerA));
+    utils.act(() => legacyRender(<Parent count={3} />, containerA));
+    utils.act(() => legacyRender(<Parent count={1} />, containerC));
+    utils.act(() => legacyRender(<Parent count={1} />, containerA));
     utils.act(() => ReactDOM.unmountComponentAtNode(containerB));
-    utils.act(() => ReactDOM.render(<Parent count={0} />, containerA));
+    utils.act(() => legacyRender(<Parent count={0} />, containerA));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allProfilingDataForRoots = [];
@@ -143,10 +146,10 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => legacyRender(<Parent count={2} />, container));
+    utils.act(() => legacyRender(<Parent count={3} />, container));
+    utils.act(() => legacyRender(<Parent count={1} />, container));
+    utils.act(() => legacyRender(<Parent count={0} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
@@ -248,16 +251,16 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
+    utils.act(() => legacyRender(<LegacyContextProvider />, container));
     expect(instance).not.toBeNull();
     utils.act(() => (instance: any).setState({count: 1}));
     utils.act(() =>
-      ReactDOM.render(<LegacyContextProvider foo={123} />, container),
+      legacyRender(<LegacyContextProvider foo={123} />, container),
     );
     utils.act(() =>
-      ReactDOM.render(<LegacyContextProvider bar="abc" />, container),
+      legacyRender(<LegacyContextProvider bar="abc" />, container),
     );
-    utils.act(() => ReactDOM.render(<LegacyContextProvider />, container));
+    utils.act(() => legacyRender(<LegacyContextProvider />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
@@ -346,7 +349,7 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Context.Provider value={true}>
           <Component count={1} />
         </Context.Provider>,
@@ -356,7 +359,7 @@ describe('ProfilingCache', () => {
 
     // Second render has no changed hooks, only changed props.
     utils.act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Context.Provider value={true}>
           <Component count={2} />
         </Context.Provider>,
@@ -373,7 +376,7 @@ describe('ProfilingCache', () => {
     // Fifth render has a changed context value, but no changed hook.
     // Technically, DevTools will miss this "context" change since it only tracks legacy context.
     utils.act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Context.Provider value={false}>
           <Component count={2} />
         </Context.Provider>,
@@ -453,7 +456,7 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() =>
-      ReactDOM.render(<Grandparent />, document.createElement('div')),
+      legacyRender(<Grandparent />, document.createElement('div')),
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
@@ -508,7 +511,7 @@ describe('ProfilingCache', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     await utils.actAsync(() =>
-      ReactDOM.render(<Parent />, document.createElement('div')),
+      legacyRender(<Parent />, document.createElement('div')),
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
@@ -558,9 +561,9 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
+    utils.act(() => legacyRender(<Parent count={1} />, container));
+    utils.act(() => legacyRender(<Parent count={2} />, container));
+    utils.act(() => legacyRender(<Parent count={3} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allFiberCommits = [];
@@ -624,7 +627,7 @@ describe('ProfilingCache', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<React.Suspense />, container));
+    utils.act(() => legacyRender(<React.Suspense />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     function Validator({commitIndex, rootID}) {
@@ -721,7 +724,7 @@ describe('ProfilingCache', () => {
     const {Simulate} = require('react-dom/test-utils');
 
     const container = document.createElement('div');
-    utils.act(() => ReactDOM.render(<App />, container));
+    utils.act(() => legacyRender(<App />, container));
     expect(container.textContent).toBe('Home');
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => Simulate.click(linkRef.current));
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index b16e38f88c83..16b42f39081e 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('profiling charts', () => {
   let React;
-  let ReactDOM;
   let Scheduler;
   let TestRenderer: TestRendererType;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -22,12 +22,13 @@ describe('profiling charts', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     store = global.store;
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
 
     React = require('react');
-    ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
     TestRenderer = utils.requireTestRenderer();
   });
@@ -54,8 +55,8 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => ReactDOM.render(<Parent />, container));
-      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
@@ -120,8 +121,8 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() => ReactDOM.render(<Parent />, container));
-      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index 1f9c97d0dfbc..9923fb33aa82 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -15,6 +15,7 @@ describe('commit tree', () => {
   let ReactDOM;
   let Scheduler;
   let TestRenderer: TestRendererType;
+  let legacyRender;
   let store: Store;
   let utils;
 
@@ -22,6 +23,8 @@ describe('commit tree', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     store = global.store;
     store.collapseNodesByDefault = false;
     store.recordChangeDescriptions = true;
@@ -47,10 +50,10 @@ describe('commit tree', () => {
     const container = document.createElement('div');
 
     utils.act(() => store.profilerStore.startProfiling());
-    utils.act(() => ReactDOM.render(<Parent count={1} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={3} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={2} />, container));
-    utils.act(() => ReactDOM.render(<Parent count={0} />, container));
+    utils.act(() => legacyRender(<Parent count={1} />, container));
+    utils.act(() => legacyRender(<Parent count={3} />, container));
+    utils.act(() => legacyRender(<Parent count={2} />, container));
+    utils.act(() => legacyRender(<Parent count={0} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
     let renderFinished = false;
@@ -108,16 +111,10 @@ describe('commit tree', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={true} />, container),
-      );
+      utils.act(() => legacyRender(<App renderChildren={true} />, container));
       await Promise.resolve();
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={true} />, container),
-      );
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={false} />, container),
-      );
+      utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      utils.act(() => legacyRender(<App renderChildren={false} />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
@@ -189,12 +186,8 @@ describe('commit tree', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={true} />, container),
-      );
-      utils.act(() =>
-        ReactDOM.render(<App renderChildren={false} />, container),
-      );
+      utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      utils.act(() => legacyRender(<App renderChildren={false} />, container));
       utils.act(() => store.profilerStore.stopProfiling());
 
       let renderFinished = false;
diff --git a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
index cfcff6bad4ba..61dc9f6bfd63 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -11,10 +11,10 @@ describe('profiling HostRoot', () => {
   let React;
   let ReactDOM;
   let Scheduler;
+  let legacyRender;
   let store: Store;
   let utils;
   let getEffectDurations;
-
   let effectDurations;
   let passiveEffectDurations;
 
@@ -22,6 +22,8 @@ describe('profiling HostRoot', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
+
     getEffectDurations = require('../backend/utils').getEffectDurations;
 
     store = global.store;
@@ -61,7 +63,7 @@ describe('profiling HostRoot', () => {
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => {
       const container = document.createElement('div');
-      ReactDOM.render(<App />, container);
+      legacyRender(<App />, container);
     });
     utils.act(() => store.profilerStore.stopProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 04f14a41a934..02cea3d925d5 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -14,6 +14,7 @@ describe('Store', () => {
   let act;
   let bridge;
   let getRendererID;
+  let legacyRender;
   let store;
   let withErrorsOrWarningsIgnored;
 
@@ -28,6 +29,7 @@ describe('Store', () => {
     const utils = require('./utils');
     act = utils.act;
     getRendererID = utils.getRendererID;
+    legacyRender = utils.legacyRender;
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
   });
 
@@ -35,7 +37,7 @@ describe('Store', () => {
     const Component = () => <div>Hi</div>;
 
     act(() =>
-      ReactDOM.render(<Component count={4} />, document.createElement('div')),
+      legacyRender(<Component count={4} />, document.createElement('div')),
     );
     expect(store).toMatchSnapshot('1: mount');
 
@@ -53,10 +55,10 @@ describe('Store', () => {
 
     const container = document.createElement('div');
 
-    act(() => ReactDOM.render(<Root>{null}</Root>, container));
+    act(() => legacyRender(<Root>{null}</Root>, container));
     expect(store).toMatchSnapshot('1: mount');
 
-    act(() => ReactDOM.render(<div />, container));
+    act(() => legacyRender(<div />, container));
     expect(store).toMatchSnapshot('2: add host nodes');
   });
 
@@ -81,7 +83,7 @@ describe('Store', () => {
     const container = document.createElement('div');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <>
           <React.Suspense fallback="Loading...">
             <Owner />
@@ -117,10 +119,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() => ReactDOM.render(<Grandparent count={4} />, container));
+      act(() => legacyRender(<Grandparent count={4} />, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      act(() => legacyRender(<Grandparent count={2} />, container));
       expect(store).toMatchSnapshot('2: update');
 
       act(() => ReactDOM.unmountComponentAtNode(container));
@@ -136,14 +138,14 @@ describe('Store', () => {
       const containerB = document.createElement('div');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={3} />, containerA);
-        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+        legacyRender(<Parent key="A" count={3} />, containerA);
+        legacyRender(<Parent key="B" count={2} />, containerB);
       });
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={4} />, containerA);
-        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+        legacyRender(<Parent key="A" count={4} />, containerA);
+        legacyRender(<Parent key="B" count={1} />, containerB);
       });
       expect(store).toMatchSnapshot('2: update');
 
@@ -171,10 +173,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={4} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={4} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
     });
@@ -201,11 +200,11 @@ describe('Store', () => {
       );
 
       const container = document.createElement('div');
-      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
       expect(store).toMatchSnapshot('1: loading');
 
       act(() => {
-        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+        legacyRender(<Wrapper shouldSuspense={false} />, container);
       });
       expect(store).toMatchSnapshot('2: resolved');
     });
@@ -251,7 +250,7 @@ describe('Store', () => {
 
       const container = document.createElement('div');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -262,7 +261,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('1: third child is suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -273,7 +272,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('2: first and third child are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -284,7 +283,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('3: second and third child are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -295,7 +294,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('4: first and third child are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={true}
             suspendFirst={true}
@@ -306,7 +305,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('5: parent is suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -317,7 +316,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('6: all children are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -346,7 +345,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('9: parent is suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={true}
@@ -373,7 +372,7 @@ describe('Store', () => {
       );
       expect(store).toMatchSnapshot('12: all children are suspended');
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper
             suspendParent={false}
             suspendFirst={false}
@@ -430,10 +429,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={2} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={2} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -468,10 +464,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
@@ -495,7 +491,7 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Parent count={1} />
             <Parent count={3} />
@@ -506,7 +502,7 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('1: mount');
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Parent count={2} />
             <Parent count={1} />
@@ -529,14 +525,14 @@ describe('Store', () => {
       const containerB = document.createElement('div');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={3} />, containerA);
-        ReactDOM.render(<Parent key="B" count={2} />, containerB);
+        legacyRender(<Parent key="A" count={3} />, containerA);
+        legacyRender(<Parent key="B" count={2} />, containerB);
       });
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => {
-        ReactDOM.render(<Parent key="A" count={4} />, containerA);
-        ReactDOM.render(<Parent key="B" count={1} />, containerB);
+        legacyRender(<Parent key="A" count={4} />, containerA);
+        legacyRender(<Parent key="B" count={1} />, containerB);
       });
       expect(store).toMatchSnapshot('2: update');
 
@@ -564,10 +560,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={4} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={4} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -600,7 +593,7 @@ describe('Store', () => {
       );
 
       const container = document.createElement('div');
-      act(() => ReactDOM.render(<Wrapper shouldSuspense={true} />, container));
+      act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
       expect(store).toMatchSnapshot('1: loading');
 
       // This test isn't meaningful unless we expand the suspended tree
@@ -609,7 +602,7 @@ describe('Store', () => {
       expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');
 
       act(() => {
-        ReactDOM.render(<Wrapper shouldSuspense={false} />, container);
+        legacyRender(<Wrapper shouldSuspense={false} />, container);
       });
       expect(store).toMatchSnapshot('2: resolved');
     });
@@ -626,10 +619,7 @@ describe('Store', () => {
       const Child = () => <div>Hi!</div>;
 
       act(() =>
-        ReactDOM.render(
-          <Grandparent count={2} />,
-          document.createElement('div'),
-        ),
+        legacyRender(<Grandparent count={2} />, document.createElement('div')),
       );
       expect(store).toMatchSnapshot('1: mount');
 
@@ -671,7 +661,7 @@ describe('Store', () => {
       const ref = React.createRef();
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Wrapper forwardedRef={ref} />,
           document.createElement('div'),
         ),
@@ -711,10 +701,10 @@ describe('Store', () => {
 
       const container = document.createElement('div');
 
-      act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
+      act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
       expect(store).toMatchSnapshot('1: mount');
 
-      act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
+      act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
       expect(store).toMatchSnapshot('3: reorder children');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
@@ -743,9 +733,7 @@ describe('Store', () => {
       const Parent = () => <Child />;
       const Child = () => null;
 
-      act(() =>
-        ReactDOM.render(<SuspenseTree />, document.createElement('div')),
-      );
+      act(() => legacyRender(<SuspenseTree />, document.createElement('div')));
       expect(store).toMatchSnapshot('1: mount');
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
@@ -790,9 +778,7 @@ describe('Store', () => {
       const Parent = () => <Child />;
       const Child = () => null;
 
-      act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
-      );
+      act(() => legacyRender(<Grandparent />, document.createElement('div')));
 
       for (let i = 0; i < store.numElements; i++) {
         expect(store.getIndexOfElementID(store.getElementIDAtIndex(i))).toBe(i);
@@ -805,8 +791,8 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() => {
-        ReactDOM.render(<Grandparent />, document.createElement('div'));
-        ReactDOM.render(<Grandparent />, document.createElement('div'));
+        legacyRender(<Grandparent />, document.createElement('div'));
+        legacyRender(<Grandparent />, document.createElement('div'));
       });
 
       for (let i = 0; i < store.numElements; i++) {
@@ -820,7 +806,7 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Grandparent />
             <Grandparent />
@@ -840,14 +826,14 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() => {
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Grandparent />
             <Grandparent />
           </React.Fragment>,
           document.createElement('div'),
         );
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Grandparent />
             <Grandparent />
@@ -870,10 +856,10 @@ describe('Store', () => {
 
     expect(store.supportsProfiling).toBe(false);
 
-    act(() => ReactDOM.render(<Component />, containerA));
+    act(() => legacyRender(<Component />, containerA));
     expect(store.supportsProfiling).toBe(true);
 
-    act(() => ReactDOM.render(<Component />, containerB));
+    act(() => legacyRender(<Component />, containerB));
     act(() => ReactDOM.unmountComponentAtNode(containerA));
     expect(store.supportsProfiling).toBe(true);
 
@@ -888,7 +874,7 @@ describe('Store', () => {
     // This is pretty hacky.
     const fauxElement = Object.assign({}, <Child />, {key: 123});
 
-    act(() => ReactDOM.render([fauxElement], document.createElement('div')));
+    act(() => legacyRender([fauxElement], document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
   });
 
@@ -949,12 +935,12 @@ describe('Store', () => {
     const container = document.createElement('div');
 
     // Render once to start fetching the lazy component
-    act(() => ReactDOM.render(<App />, container));
+    act(() => legacyRender(<App />, container));
 
     await Promise.resolve();
 
     // Render again after it resolves
-    act(() => ReactDOM.render(<App />, container));
+    act(() => legacyRender(<App />, container));
 
     expect(store).toMatchInlineSnapshot(`
       [root]
@@ -1004,19 +990,19 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       // Render once to start fetching the lazy component
-      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+      act(() => legacyRender(<App renderChildren={true} />, container));
 
       expect(store).toMatchSnapshot('1: mounted + loading');
 
       await Promise.resolve();
 
       // Render again after it resolves
-      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+      act(() => legacyRender(<App renderChildren={true} />, container));
 
       expect(store).toMatchSnapshot('2: mounted + loaded');
 
       // Render again to unmount it
-      act(() => ReactDOM.render(<App renderChildren={false} />, container));
+      act(() => legacyRender(<App renderChildren={false} />, container));
 
       expect(store).toMatchSnapshot('3: unmounted');
     });
@@ -1047,12 +1033,12 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       // Render once to start fetching the lazy component
-      act(() => ReactDOM.render(<App renderChildren={true} />, container));
+      act(() => legacyRender(<App renderChildren={true} />, container));
 
       expect(store).toMatchSnapshot('1: mounted + loading');
 
       // Render again to unmount it before it finishes loading
-      act(() => ReactDOM.render(<App renderChildren={false} />, container));
+      act(() => legacyRender(<App renderChildren={false} />, container));
 
       expect(store).toMatchSnapshot('2: unmounted');
     });
@@ -1083,7 +1069,7 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example />, container));
+        act(() => legacyRender(<Example />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1093,7 +1079,7 @@ describe('Store', () => {
       `);
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example rerender={1} />, container));
+        act(() => legacyRender(<Example rerender={1} />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1114,7 +1100,7 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example />, container));
+        act(() => legacyRender(<Example />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1124,7 +1110,7 @@ describe('Store', () => {
       `);
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<Example rerender={1} />, container));
+        act(() => legacyRender(<Example rerender={1} />, container));
       });
 
       expect(store).toMatchInlineSnapshot(`
@@ -1156,7 +1142,7 @@ describe('Store', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () => {
           act(() => {
-            ReactDOM.render(<Example />, container);
+            legacyRender(<Example />, container);
           }, false);
         });
         flushPendingBridgeOperations();
@@ -1194,7 +1180,7 @@ describe('Store', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () => {
           act(() => {
-            ReactDOM.render(
+            legacyRender(
               <>
                 <Example />
               </>,
@@ -1209,7 +1195,7 @@ describe('Store', () => {
 
           // Before warnings and errors have flushed, flush another commit.
           act(() => {
-            ReactDOM.render(
+            legacyRender(
               <>
                 <Example />
                 <Noop />
@@ -1252,7 +1238,7 @@ describe('Store', () => {
       withErrorsOrWarningsIgnored(
         ['Warning: Each child in a list should have a unique "key" prop'],
         () => {
-          act(() => ReactDOM.render(<Example />, container));
+          act(() => legacyRender(<Example />, container));
         },
       );
 
@@ -1273,7 +1259,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example />
               <Example />
@@ -1314,7 +1300,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example />
               <Example />
@@ -1359,7 +1345,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Example />
               <Example />
@@ -1412,7 +1398,7 @@ describe('Store', () => {
       const container = document.createElement('div');
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithError />
               <ComponentWithWarning />
@@ -1432,7 +1418,7 @@ describe('Store', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithWarning />
               <ComponentWithWarningAndError />
@@ -1450,7 +1436,7 @@ describe('Store', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithWarning />
             </React.Fragment>,
@@ -1465,7 +1451,7 @@ describe('Store', () => {
       `);
 
       withErrorsOrWarningsIgnored(['test-only:'], () => {
-        act(() => ReactDOM.render(<React.Fragment />, container));
+        act(() => legacyRender(<React.Fragment />, container));
       });
       expect(store).toMatchInlineSnapshot(`[root]`);
       expect(store.errorCount).toBe(0);
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index 7468eb48d1cd..baa19e0787df 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -12,9 +12,9 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('Store component filters', () => {
   let React;
-  let ReactDOM;
   let Types;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
   let internalAct;
@@ -34,10 +34,11 @@ describe('Store component filters', () => {
     store.recordChangeDescriptions = true;
 
     React = require('react');
-    ReactDOM = require('react-dom');
     Types = require('react-devtools-shared/src/types');
     utils = require('./utils');
     internalAct = require('jest-react').act;
+
+    legacyRender = utils.legacyRender;
   });
 
   it('should throw if filters are updated while profiling', () => {
@@ -56,7 +57,7 @@ describe('Store component filters', () => {
     const FunctionComponent = () => <div>Hi</div>;
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <ClassComponent>
           <FunctionComponent />
         </ClassComponent>,
@@ -137,7 +138,7 @@ describe('Store component filters', () => {
   it('should ignore invalid ElementTypeRoot filter', () => {
     const Component = () => <div>Hi</div>;
 
-    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    act(() => legacyRender(<Component />, document.createElement('div')));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Component>
@@ -165,7 +166,7 @@ describe('Store component filters', () => {
     const Baz = () => <Text label="baz" />;
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <React.Fragment>
           <Foo />
           <Bar />
@@ -221,7 +222,7 @@ describe('Store component filters', () => {
   it('should filter by path', () => {
     const Component = () => <div>Hi</div>;
 
-    act(() => ReactDOM.render(<Component />, document.createElement('div')));
+    act(() => legacyRender(<Component />, document.createElement('div')));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Component>
@@ -258,7 +259,7 @@ describe('Store component filters', () => {
     const Bar = () => <Foo />;
     Bar.displayName = 'Bar(Foo(Component))';
 
-    act(() => ReactDOM.render(<Bar />, document.createElement('div')));
+    act(() => legacyRender(<Bar />, document.createElement('div')));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Component> [Bar][Foo]
@@ -337,7 +338,7 @@ describe('Store component filters', () => {
     ];
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
+    act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Wrapper>
@@ -345,14 +346,14 @@ describe('Store component filters', () => {
               <div>
     `);
 
-    act(() => ReactDOM.render(<Wrapper shouldSuspend={false} />, container));
+    act(() => legacyRender(<Wrapper shouldSuspend={false} />, container));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Wrapper>
             <Component>
     `);
 
-    act(() => ReactDOM.render(<Wrapper shouldSuspend={true} />, container));
+    act(() => legacyRender(<Wrapper shouldSuspend={true} />, container));
     expect(store).toMatchInlineSnapshot(`
       [root]
         ▾ <Wrapper>
@@ -376,6 +377,14 @@ describe('Store component filters', () => {
         console.warn('test-only: render warning');
         return null;
       }
+
+      // HACK This require() is needed (somewhere in the test) for this case to pass.
+      // Without it, the legacyRender() call below causes this test to fail
+      // because it requires "react-dom" for the first time,
+      // which causes the console error() and warn() methods to be overridden again,
+      // effectively disconnecting the DevTools override in 'react-devtools-shared/src/backend/console'.
+      require('react-dom');
+
       const container = document.createElement('div');
       utils.withErrorsOrWarningsIgnored(['test-only:'], () => {
         act(
@@ -386,7 +395,7 @@ describe('Store component filters', () => {
             ]),
         );
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <ComponentWithError />
               <ComponentWithWarning />
diff --git a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
index c380d8b91ad3..183245a04ffa 100644
--- a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
@@ -11,8 +11,8 @@ const {printOwnersList} = require('../devtools/utils');
 
 describe('Store owners list', () => {
   let React;
-  let ReactDOM;
   let act;
+  let legacyRender;
   let store;
 
   beforeEach(() => {
@@ -20,8 +20,10 @@ describe('Store owners list', () => {
     store.collapseNodesByDefault = false;
 
     React = require('react');
-    ReactDOM = require('react-dom');
-    act = require('./utils').act;
+
+    const utils = require('./utils');
+    act = utils.act;
+    legacyRender = utils.legacyRender;
   });
 
   it('should drill through intermediate components', () => {
@@ -36,7 +38,7 @@ describe('Store owners list', () => {
     const Leaf = () => <div>Leaf</div>;
     const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
 
-    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    act(() => legacyRender(<Root />, document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
 
     const rootID = store.getElementIDAtIndex(0);
@@ -64,7 +66,7 @@ describe('Store owners list', () => {
       <Wrapper key="wrapper">{children}</Wrapper>,
     ];
 
-    act(() => ReactDOM.render(<Root />, document.createElement('div')));
+    act(() => legacyRender(<Root />, document.createElement('div')));
     expect(store).toMatchSnapshot('1: mount');
 
     const rootID = store.getElementIDAtIndex(0);
@@ -96,7 +98,7 @@ describe('Store owners list', () => {
     const container = document.createElement('div');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={false} includeIndirect={true} />,
         container,
       ),
@@ -109,7 +111,7 @@ describe('Store owners list', () => {
     ).toMatchSnapshot('2: components owned by <Root>');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={true} includeIndirect={true} />,
         container,
       ),
@@ -121,7 +123,7 @@ describe('Store owners list', () => {
     ).toMatchSnapshot('4: components owned by <Root>');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={true} includeIndirect={false} />,
         container,
       ),
@@ -133,7 +135,7 @@ describe('Store owners list', () => {
     ).toMatchSnapshot('6: components owned by <Root>');
 
     act(() =>
-      ReactDOM.render(
+      legacyRender(
         <Root includeDirect={false} includeIndirect={false} />,
         container,
       ),
@@ -153,7 +155,7 @@ describe('Store owners list', () => {
     const Leaf = () => <div>Leaf</div>;
 
     const container = document.createElement('div');
-    act(() => ReactDOM.render(<Root ascending={true} />, container));
+    act(() => legacyRender(<Root ascending={true} />, container));
     expect(store).toMatchSnapshot('1: mount (ascending)');
 
     const rootID = store.getElementIDAtIndex(0);
@@ -161,7 +163,7 @@ describe('Store owners list', () => {
       printOwnersList(store.getOwnersListForElement(rootID)),
     ).toMatchSnapshot('2: components owned by <Root>');
 
-    act(() => ReactDOM.render(<Root ascending={false} />, container));
+    act(() => legacyRender(<Root ascending={false} />, container));
     expect(store).toMatchSnapshot('3: update (descending)');
 
     expect(
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
index 587bef95af40..f1684b87b793 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -14,6 +14,7 @@ describe('StoreStress (Legacy Mode)', () => {
   let bridge;
   let store;
   let print;
+  let legacyRender;
 
   beforeEach(() => {
     bridge = global.bridge;
@@ -22,7 +23,10 @@ describe('StoreStress (Legacy Mode)', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
-    act = require('./utils').act;
+
+    const utils = require('./utils');
+    act = utils.act;
+    legacyRender = utils.legacyRender;
 
     print = require('./storeSerializer').print;
   });
@@ -56,7 +60,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
     // 1. Render a normal version of [a, b, c, d, e].
     let container = document.createElement('div');
-    act(() => ReactDOM.render(<Parent>{[a, b, c, d, e]}</Parent>, container));
+    act(() => legacyRender(<Parent>{[a, b, c, d, e]}</Parent>, container));
     expect(store).toMatchSnapshot('1: abcde');
     expect(container.textContent).toMatch('abcde');
     const snapshotForABCDE = print(store);
@@ -119,7 +123,7 @@ describe('StoreStress (Legacy Mode)', () => {
       container = document.createElement('div');
 
       // Verify mounting 'abcde'.
-      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
       expect(container.textContent).toMatch('abcde');
       expect(print(store)).toEqual(snapshotForABCDE);
 
@@ -147,7 +151,7 @@ describe('StoreStress (Legacy Mode)', () => {
     container = document.createElement('div');
     for (let i = 0; i < cases.length; i++) {
       // Verify mounting 'abcde'.
-      act(() => ReactDOM.render(<Parent>{cases[i]}</Parent>, container));
+      act(() => legacyRender(<Parent>{cases[i]}</Parent>, container));
       expect(container.textContent).toMatch('abcde');
       expect(print(store)).toEqual(snapshotForABCDE);
 
@@ -210,7 +214,7 @@ describe('StoreStress (Legacy Mode)', () => {
     const snapshots = [];
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
-      act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+      act(() => legacyRender(<Root>{steps[i]}</Root>, container));
       // We snapshot each step once so it doesn't regress.
       expect(store).toMatchSnapshot();
       snapshots.push(print(store));
@@ -222,11 +226,11 @@ describe('StoreStress (Legacy Mode)', () => {
     for (let i = 0; i < steps.length; i++) {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
-        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        act(() => legacyRender(<Root>{steps[i]}</Root>, container));
         expect(print(store)).toMatch(snapshots[i]);
-        act(() => ReactDOM.render(<Root>{steps[j]}</Root>, container));
+        act(() => legacyRender(<Root>{steps[j]}</Root>, container));
         expect(print(store)).toMatch(snapshots[j]);
-        act(() => ReactDOM.render(<Root>{steps[i]}</Root>, container));
+        act(() => legacyRender(<Root>{steps[i]}</Root>, container));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => ReactDOM.unmountComponentAtNode(container));
         expect(print(store)).toBe('');
@@ -238,7 +242,7 @@ describe('StoreStress (Legacy Mode)', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <div>{steps[i]}</div>
             </Root>,
@@ -247,7 +251,7 @@ describe('StoreStress (Legacy Mode)', () => {
         );
         expect(print(store)).toMatch(snapshots[i]);
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <div>{steps[j]}</div>
             </Root>,
@@ -256,7 +260,7 @@ describe('StoreStress (Legacy Mode)', () => {
         );
         expect(print(store)).toMatch(snapshots[j]);
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <div>{steps[i]}</div>
             </Root>,
@@ -312,7 +316,7 @@ describe('StoreStress (Legacy Mode)', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -331,7 +335,7 @@ describe('StoreStress (Legacy Mode)', () => {
     // 2. Verify check Suspense can render same steps as initial fallback content.
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={steps[i]}>
@@ -355,7 +359,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -367,7 +371,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
@@ -380,7 +384,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -402,7 +406,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -418,7 +422,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -435,7 +439,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -461,7 +465,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -473,7 +477,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -490,7 +494,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[i]}</React.Suspense>
@@ -512,7 +516,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -528,7 +532,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>{steps[j]}</React.Suspense>
@@ -541,7 +545,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -567,7 +571,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
@@ -605,7 +609,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Trigger actual fallback.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -633,7 +637,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Switch to primary mode.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>{steps[i]}</React.Suspense>
@@ -723,7 +727,7 @@ describe('StoreStress (Legacy Mode)', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={z}>
@@ -747,7 +751,7 @@ describe('StoreStress (Legacy Mode)', () => {
     const fallbackSnapshots = [];
     for (let i = 0; i < steps.length; i++) {
       act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Root>
             <X />
             <React.Suspense fallback={steps[i]}>
@@ -773,7 +777,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -787,7 +791,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -802,7 +806,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -826,7 +830,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -845,7 +849,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -865,7 +869,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -894,7 +898,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -908,7 +912,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -923,7 +927,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={z}>
@@ -947,7 +951,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -961,7 +965,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(fallbackSnapshots[i]);
         // Re-render with steps[j].
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -976,7 +980,7 @@ describe('StoreStress (Legacy Mode)', () => {
         expect(print(store)).toEqual(snapshots[j]);
         // Check that we can transition back again.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[i]}>
@@ -1000,7 +1004,7 @@ describe('StoreStress (Legacy Mode)', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -1040,7 +1044,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Trigger actual fallback.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
@@ -1066,7 +1070,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
         // Switch to primary mode.
         act(() =>
-          ReactDOM.render(
+          legacyRender(
             <Root>
               <X />
               <React.Suspense fallback={steps[j]}>
diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 36f615c1155b..0db248c01786 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -20,6 +20,7 @@ describe('TreeListContext', () => {
   let ReactDOM;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
+  let legacyRender;
   let store: Store;
   let utils;
   let withErrorsOrWarningsIgnored;
@@ -35,6 +36,7 @@ describe('TreeListContext', () => {
     utils = require('./utils');
     utils.beforeEachProfiling();
 
+    legacyRender = utils.legacyRender;
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
 
     bridge = global.bridge;
@@ -88,7 +90,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -214,7 +216,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -300,7 +302,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -391,7 +393,7 @@ describe('TreeListContext', () => {
 
       const container = document.createElement('div');
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Grandparent>
             <Parent>
               <Child />
@@ -425,7 +427,7 @@ describe('TreeListContext', () => {
 
       // Remove the child (which should auto-select the parent)
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <Grandparent>
             <Parent />
           </Grandparent>,
@@ -458,7 +460,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -619,7 +621,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -918,7 +920,7 @@ describe('TreeListContext', () => {
       Qux.displayName = `withHOC(${Qux.name})`;
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -990,7 +992,7 @@ describe('TreeListContext', () => {
       const Baz = () => null;
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Baz />
@@ -1097,7 +1099,7 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1123,7 +1125,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1158,7 +1160,7 @@ describe('TreeListContext', () => {
       const container = document.createElement('div');
 
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1196,7 +1198,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Foo />
             <Bar />
@@ -1242,7 +1244,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       utils.act(() =>
-        ReactDOM.render(<Grandparent />, document.createElement('div')),
+        legacyRender(<Grandparent />, document.createElement('div')),
       );
 
       let renderer;
@@ -1283,7 +1285,7 @@ describe('TreeListContext', () => {
       const Child = () => null;
 
       const container = document.createElement('div');
-      utils.act(() => ReactDOM.render(<Grandparent count={2} />, container));
+      utils.act(() => legacyRender(<Grandparent count={2} />, container));
 
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
@@ -1306,7 +1308,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(<Grandparent count={1} />, container),
+        legacyRender(<Grandparent count={1} />, container),
       );
       expect(state).toMatchInlineSnapshot(`
         [owners]
@@ -1315,7 +1317,7 @@ describe('TreeListContext', () => {
       `);
 
       await utils.actAsync(() =>
-        ReactDOM.render(<Grandparent count={0} />, container),
+        legacyRender(<Grandparent count={0} />, container),
       );
       expect(state).toMatchInlineSnapshot(`
         [owners]
@@ -1329,7 +1331,7 @@ describe('TreeListContext', () => {
 
       const container = document.createElement('div');
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <Parent>
             <Child />
           </Parent>,
@@ -1353,7 +1355,7 @@ describe('TreeListContext', () => {
         →    <Child>
       `);
 
-      await utils.actAsync(() => ReactDOM.render(<Parent />, container));
+      await utils.actAsync(() => legacyRender(<Parent />, container));
       expect(state).toMatchInlineSnapshot(`
         [root]
         →    <Parent>
@@ -1386,7 +1388,7 @@ describe('TreeListContext', () => {
       );
 
       const container = document.createElement('div');
-      utils.act(() => ReactDOM.render(<Parent />, container));
+      utils.act(() => legacyRender(<Parent />, container));
 
       let renderer;
       utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
@@ -1493,7 +1495,7 @@ describe('TreeListContext', () => {
 
     it('should handle when there are no errors/warnings', () => {
       utils.act(() =>
-        ReactDOM.render(
+        legacyRender(
           <React.Fragment>
             <Child />
             <Child />
@@ -1556,7 +1558,7 @@ describe('TreeListContext', () => {
     it('should cycle through the next errors/warnings and wrap around', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -1617,7 +1619,7 @@ describe('TreeListContext', () => {
     it('should cycle through the previous errors/warnings and wrap around', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -1678,14 +1680,14 @@ describe('TreeListContext', () => {
     it('should cycle through the next errors/warnings and wrap around with multiple roots', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         utils.act(() => {
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />,
             </React.Fragment>,
             document.createElement('div'),
           );
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logError={true} />
@@ -1748,14 +1750,14 @@ describe('TreeListContext', () => {
     it('should cycle through the previous errors/warnings and wrap around with multiple roots', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () => {
         utils.act(() => {
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />,
             </React.Fragment>,
             document.createElement('div'),
           );
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logError={true} />
@@ -1818,7 +1820,7 @@ describe('TreeListContext', () => {
     it('should select the next or previous element relative to the current selection', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -1880,7 +1882,7 @@ describe('TreeListContext', () => {
     it('should update correctly when errors/warnings are cleared for a fiber in the list', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child logError={true} />
@@ -1953,7 +1955,7 @@ describe('TreeListContext', () => {
     it('should update correctly when errors/warnings are cleared for the currently selected fiber', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child logError={true} />
@@ -1994,7 +1996,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child />
@@ -2028,7 +2030,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child />
               <Child logWarning={true} />
@@ -2074,7 +2076,7 @@ describe('TreeListContext', () => {
     it('should update correctly when all errors/warnings are cleared', () => {
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Child logWarning={true} />
               <Child logError={true} />
@@ -2124,7 +2126,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Wrapper>
                 <Child logWarning={true} />
@@ -2174,7 +2176,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Wrapper>
                 <Child logWarning={true} />
@@ -2260,7 +2262,7 @@ describe('TreeListContext', () => {
 
       withErrorsOrWarningsIgnored(['test-only:'], () =>
         utils.act(() =>
-          ReactDOM.render(
+          legacyRender(
             <React.Fragment>
               <Wrapper>
                 <Child logWarning={true} />
@@ -2318,7 +2320,7 @@ describe('TreeListContext', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={null}>
                 <Child logWarning={true} />
                 <NeverResolves />
@@ -2354,7 +2356,7 @@ describe('TreeListContext', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={null}>
                 <Child logWarning={true} />
                 <LazyComponent />
@@ -2373,7 +2375,7 @@ describe('TreeListContext', () => {
         await Promise.resolve();
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={null}>
                 <Child logWarning={true} />
                 <LazyComponent />
@@ -2404,7 +2406,7 @@ describe('TreeListContext', () => {
 
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={<Fallback />}>
                 <LazyComponent />
               </React.Suspense>,
@@ -2425,7 +2427,7 @@ describe('TreeListContext', () => {
         await Promise.resolve();
         withErrorsOrWarningsIgnored(['test-only:'], () =>
           utils.act(() =>
-            ReactDOM.render(
+            legacyRender(
               <React.Suspense fallback={<Fallback />}>
                 <LazyComponent />
               </React.Suspense>,
@@ -2469,7 +2471,7 @@ describe('TreeListContext', () => {
           ['test-only:', 'React will try to recreate this component tree'],
           () => {
             utils.act(() =>
-              ReactDOM.render(
+              legacyRender(
                 <ErrorBoundary>
                   <BadRender />
                 </ErrorBoundary>,
@@ -2533,7 +2535,7 @@ describe('TreeListContext', () => {
           ['test-only:', 'React will try to recreate this component tree'],
           () => {
             utils.act(() =>
-              ReactDOM.render(
+              legacyRender(
                 <ErrorBoundary>
                   <LogsWarning />
                 </ErrorBoundary>,
@@ -2592,7 +2594,7 @@ describe('TreeListContext', () => {
           ['test-only:', 'React will try to recreate this component tree'],
           () => {
             utils.act(() =>
-              ReactDOM.render(
+              legacyRender(
                 <ErrorBoundary>
                   <BadRender />
                 </ErrorBoundary>,
diff --git a/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js b/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
index db22d2813e40..018089c8fc6e 100644
--- a/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
+++ b/packages/react-devtools-shared/src/__tests__/useEditableValue-test.js
@@ -10,15 +10,15 @@
 describe('useEditableValue', () => {
   let act;
   let React;
-  let ReactDOM;
+  let legacyRender;
   let useEditableValue;
 
   beforeEach(() => {
     const utils = require('./utils');
     act = utils.act;
+    legacyRender = utils.legacyRender;
 
     React = require('react');
-    ReactDOM = require('react-dom');
 
     useEditableValue = require('../devtools/views/hooks').useEditableValue;
   });
@@ -33,7 +33,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example />, container);
+    legacyRender(<Example />, container);
     expect(state.editableValue).toEqual('NaN');
     expect(state.externalValue).toEqual(NaN);
     expect(state.parsedValue).toEqual(NaN);
@@ -51,7 +51,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
@@ -60,7 +60,7 @@ describe('useEditableValue', () => {
 
     // If there are NO pending changes,
     // an update to the external prop value should override the local/pending value.
-    ReactDOM.render(<Example value={2} />, container);
+    legacyRender(<Example value={2} />, container);
     expect(state.editableValue).toEqual('2');
     expect(state.externalValue).toEqual(2);
     expect(state.parsedValue).toEqual(2);
@@ -79,7 +79,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
@@ -102,7 +102,7 @@ describe('useEditableValue', () => {
 
     // If there ARE pending changes,
     // an update to the external prop value should NOT override the local/pending value.
-    ReactDOM.render(<Example value={3} />, container);
+    legacyRender(<Example value={3} />, container);
     expect(state.editableValue).toEqual('2');
     expect(state.externalValue).toEqual(3);
     expect(state.parsedValue).toEqual(2);
@@ -121,7 +121,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
@@ -154,7 +154,7 @@ describe('useEditableValue', () => {
     }
 
     const container = document.createElement('div');
-    ReactDOM.render(<Example value={1} />, container);
+    legacyRender(<Example value={1} />, container);
     expect(state.editableValue).toEqual('1');
     expect(state.externalValue).toEqual(1);
     expect(state.parsedValue).toEqual(1);
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 61a6acc604a7..74fcebc44185 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -162,6 +162,16 @@ export function getRendererID(): number {
   return parseInt(id, 10);
 }
 
+export function legacyRender(elements, container) {
+  const ReactDOM = require('react-dom');
+  withErrorsOrWarningsIgnored(
+    ['ReactDOM.render is no longer supported in React 18'],
+    () => {
+      ReactDOM.render(elements, container);
+    },
+  );
+}
+
 export function requireTestRenderer(): ReactTestRenderer {
   let hook;
   try {
@@ -228,9 +238,15 @@ 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 = errorOrWarningMessages;
+    global._ignoredErrorOrWarningMessages = [
+      ...prev,
+      ...errorOrWarningMessages,
+    ];
     const maybeThenable = fn();
     if (
       maybeThenable !== undefined &&
@@ -239,16 +255,16 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
       resetIgnoredErrorOrWarningMessages = false;
       return maybeThenable.then(
         () => {
-          global._ignoredErrorOrWarningMessages = [];
+          global._ignoredErrorOrWarningMessages = prev;
         },
         () => {
-          global._ignoredErrorOrWarningMessages = [];
+          global._ignoredErrorOrWarningMessages = prev;
         },
       );
     }
   } finally {
     if (resetIgnoredErrorOrWarningMessages) {
-      global._ignoredErrorOrWarningMessages = [];
+      global._ignoredErrorOrWarningMessages = prev;
     }
   }
 }

From e2453e2007083a67bf93f59c8ef2f39df2aaf636 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 25 Jun 2021 15:39:46 -0400
Subject: [PATCH 0648/1603] act: Add test for bypassing queueMicrotask (#21743)

Test for fix added in #21740
---
 .../src/__tests__/ReactIsomorphicAct-test.js  | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js

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 000000000000..08d9bc568837
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @jest-environment node
+ */
+
+// sanity tests for act()
+
+let React;
+let ReactNoop;
+let act;
+let DiscreteEventPriority;
+
+describe('isomorphic act()', () => {
+  beforeEach(() => {
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    DiscreteEventPriority = require('react-reconciler/constants')
+      .DiscreteEventPriority;
+    act = React.unstable_act;
+  });
+
+  // @gate __DEV__
+  test('bypasses queueMicrotask', async () => {
+    const root = ReactNoop.createRoot();
+
+    // First test what happens without wrapping in act. This update would
+    // normally be queued in a microtask.
+    ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
+      root.render('A');
+    });
+    // Nothing has rendered yet
+    expect(root).toMatchRenderedOutput(null);
+    // Flush the microtasks by awaiting
+    await null;
+    expect(root).toMatchRenderedOutput('A');
+
+    // Now do the same thing but wrap the update with `act`. No
+    // `await` necessary.
+    act(() => {
+      ReactNoop.unstable_runWithPriority(DiscreteEventPriority, () => {
+        root.render('B');
+      });
+    });
+    expect(root).toMatchRenderedOutput('B');
+  });
+});

From cae635054e17a6f107a39d328649137b83f25972 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 26 Jun 2021 14:51:23 -0400
Subject: [PATCH 0649/1603] `act`: Resolve to return value of scope function
 (#21759)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When migrating some internal tests I found it annoying that I couldn't
return anything from the `act` scope. You would have to declare the
variable on the outside then assign to it. But this doesn't play well
with type systems — when you use the variable, you have to check
the type.

Before:

```js
let renderer;
act(() => {
  renderer = ReactTestRenderer.create(<App />);
})

// Type system can't tell that renderer is never undefined
renderer?.root.findByType(Component);
```

After:

```js
const renderer = await act(() => {
  return ReactTestRenderer.create(<App />);
})
renderer.root.findByType(Component);
```
---
 .../src/__tests__/ReactIsomorphicAct-test.js  | 31 +++++++++++++++
 .../src/ReactTestRenderer.js                  |  2 +-
 packages/react/src/ReactAct.js                | 38 ++++++++++++-------
 3 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
index 08d9bc568837..001474e93521 100644
--- a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
@@ -47,4 +47,35 @@ describe('isomorphic act()', () => {
     });
     expect(root).toMatchRenderedOutput('B');
   });
+
+  // @gate __DEV__
+  test('return value – sync callback', async () => {
+    expect(await act(() => 'hi')).toEqual('hi');
+  });
+
+  // @gate __DEV__
+  test('return value – sync callback, nested', async () => {
+    const returnValue = await act(() => {
+      return act(() => 'hi');
+    });
+    expect(returnValue).toEqual('hi');
+  });
+
+  // @gate __DEV__
+  test('return value – async callback', async () => {
+    const returnValue = await act(async () => {
+      return await Promise.resolve('hi');
+    });
+    expect(returnValue).toEqual('hi');
+  });
+
+  // @gate __DEV__
+  test('return value – async callback, nested', async () => {
+    const returnValue = await act(async () => {
+      return await act(async () => {
+        return await Promise.resolve('hi');
+      });
+    });
+    expect(returnValue).toEqual('hi');
+  });
 });
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index d8b6b08611fe..eb0097550695 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -51,7 +51,7 @@ import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
 const act_notBatchedInLegacyMode = React.unstable_act;
-function act(callback: () => Thenable<mixed>): Thenable<void> {
+function act<T>(callback: () => T): Thenable<T> {
   return act_notBatchedInLegacyMode(() => {
     return batchedUpdates(callback);
   });
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
index 885e803b027c..99156f85fde4 100644
--- a/packages/react/src/ReactAct.js
+++ b/packages/react/src/ReactAct.js
@@ -15,7 +15,7 @@ import enqueueTask from 'shared/enqueueTask';
 let actScopeDepth = 0;
 let didWarnNoAwaitAct = false;
 
-export function act(callback: () => Thenable<mixed>): Thenable<void> {
+export function act<T>(callback: () => T | Thenable<T>): Thenable<T> {
   if (__DEV__) {
     // `act` calls can be nested, so we track the depth. This represents the
     // number of `act` scopes on the stack.
@@ -41,21 +41,22 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
       typeof result === 'object' &&
       typeof result.then === 'function'
     ) {
+      const thenableResult: Thenable<T> = (result: any);
       // The callback is an async function (i.e. returned a promise). Wait
       // for it to resolve before exiting the current scope.
       let wasAwaited = false;
-      const thenable = {
+      const thenable: Thenable<T> = {
         then(resolve, reject) {
           wasAwaited = true;
-          result.then(
-            () => {
+          thenableResult.then(
+            returnValue => {
               popActScope(prevActScopeDepth);
               if (actScopeDepth === 0) {
                 // We've exited the outermost act scope. Recursively flush the
                 // queue until there's no remaining work.
-                recursivelyFlushAsyncActWork(resolve, reject);
+                recursivelyFlushAsyncActWork(returnValue, resolve, reject);
               } else {
-                resolve();
+                resolve(returnValue);
               }
             },
             error => {
@@ -88,6 +89,7 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
       }
       return thenable;
     } else {
+      const returnValue: T = (result: any);
       // The callback is not an async function. Exit the current scope
       // immediately, without awaiting.
       popActScope(prevActScopeDepth);
@@ -100,7 +102,7 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
         }
         // Return a thenable. If the user awaits it, we'll flush again in
         // case additional work was scheduled by a microtask.
-        return {
+        const thenable: Thenable<T> = {
           then(resolve, reject) {
             // Confirm we haven't re-entered another `act` scope, in case
             // the user does something weird like await the thenable
@@ -108,18 +110,22 @@ export function act(callback: () => Thenable<mixed>): Thenable<void> {
             if (ReactCurrentActQueue.current === null) {
               // Recursively flush the queue until there's no remaining work.
               ReactCurrentActQueue.current = [];
-              recursivelyFlushAsyncActWork(resolve, reject);
+              recursivelyFlushAsyncActWork(returnValue, resolve, reject);
+            } else {
+              resolve(returnValue);
             }
           },
         };
+        return thenable;
       } else {
         // Since we're inside a nested `act` scope, the returned thenable
         // immediately resolves. The outer scope will flush the queue.
-        return {
+        const thenable: Thenable<T> = {
           then(resolve, reject) {
-            resolve();
+            resolve(returnValue);
           },
         };
+        return thenable;
       }
     }
   } else {
@@ -142,7 +148,11 @@ function popActScope(prevActScopeDepth) {
   }
 }
 
-function recursivelyFlushAsyncActWork(resolve, reject) {
+function recursivelyFlushAsyncActWork<T>(
+  returnValue: T,
+  resolve: T => mixed,
+  reject: mixed => mixed,
+) {
   if (__DEV__) {
     const queue = ReactCurrentActQueue.current;
     if (queue !== null) {
@@ -152,17 +162,17 @@ function recursivelyFlushAsyncActWork(resolve, reject) {
           if (queue.length === 0) {
             // No additional work was scheduled. Finish.
             ReactCurrentActQueue.current = null;
-            resolve();
+            resolve(returnValue);
           } else {
             // Keep flushing work until there's none left.
-            recursivelyFlushAsyncActWork(resolve, reject);
+            recursivelyFlushAsyncActWork(returnValue, resolve, reject);
           }
         });
       } catch (error) {
         reject(error);
       }
     } else {
-      resolve();
+      resolve(returnValue);
     }
   }
 }

From d483463bc86555decb3e8caa18459d1d0f7c0148 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 29 Jun 2021 14:26:24 -0400
Subject: [PATCH 0650/1603] Updated scripts and config to replace "master" with
 "main" branch (#21768)

---
 .circleci/config.yml                             | 16 ++++++++--------
 .github/PULL_REQUEST_TEMPLATE.md                 |  2 +-
 CHANGELOG.md                                     |  8 ++++----
 README.md                                        |  2 +-
 appveyor.yml                                     |  2 +-
 packages/create-subscription/README.md           |  2 +-
 packages/eslint-plugin-react-hooks/CHANGELOG.md  |  2 +-
 .../npm/react-test-renderer_v16.x.x.js           |  2 +-
 .../popups/disabled.html                         |  2 +-
 packages/react-devtools-inline/README.md         |  2 +-
 .../src/view-base/utils/normalizeWheel.js        |  2 +-
 .../src/__tests__/profilingCache-test.js         |  8 ++++----
 .../src/backend/renderer.js                      |  4 ++--
 packages/react-devtools-shared/src/constants.js  |  2 +-
 .../react-devtools-shared/src/devtools/cache.js  |  2 +-
 packages/react-devtools-shell/README.md          |  2 +-
 packages/react-devtools/CHANGELOG.md             |  6 +++---
 packages/react-devtools/OVERVIEW.md              |  2 +-
 packages/react-devtools/README.md                |  2 +-
 packages/react-reconciler/README.md              | 12 ++++++------
 packages/react/index.js                          |  2 +-
 packages/use-subscription/README.md              |  2 +-
 scripts/bench/README.md                          |  4 ++--
 scripts/bench/build.js                           | 12 ++++++------
 scripts/bench/runner.js                          |  2 +-
 scripts/error-codes/README.md                    |  6 +++---
 scripts/error-codes/extract-errors.js            |  2 +-
 scripts/merge-fork/README.md                     |  2 +-
 scripts/print-warnings/print-warnings.js         |  2 +-
 scripts/release/README.md                        |  4 ++--
 scripts/release/prepare-release-from-ci.js       |  2 +-
 .../guess-stable-version-numbers.js              |  4 ++--
 scripts/release/publish-using-ci-workflow.js     |  2 +-
 scripts/shared/listChangedFiles.js               |  2 +-
 34 files changed, 65 insertions(+), 65 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index e8c5de99aa3b..e157cb442707 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -171,9 +171,9 @@ jobs:
       - run:
           name: Download artifacts for base revision
           command: |
-              git fetch origin master
+              git fetch origin main
               cd ./scripts/release && yarn && cd ../../
-              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/master)
+              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main)
               mv ./build2 ./base-build
       - persist_to_workspace:
           root: .
@@ -356,7 +356,7 @@ jobs:
       - run:
           name: Run publish script
           command: |
-            git fetch origin master
+            git fetch origin main
             cd ./scripts/release && yarn && cd ../../
             scripts/release/prepare-release-from-ci.js --skipTests -r << parameters.release_channel >> --commit=<< parameters.commit_sha >>
             cp ./scripts/release/ci-npmrc ~/.npmrc
@@ -414,7 +414,7 @@ workflows:
           filters:
             branches:
               only:
-                - master
+                - main
 
   # New workflow that will replace "stable" and "experimental"
   build_and_test:
@@ -491,14 +491,14 @@ workflows:
           filters:
             branches:
               ignore:
-                - master
+                - main
           requires:
             - setup
       - sizebot:
           filters:
             branches:
               ignore:
-                - master
+                - main
           requires:
             - get_base_build
             - yarn_build_combined
@@ -514,7 +514,7 @@ workflows:
           filters:
             branches:
               only:
-                - master
+                - main
     jobs:
       - setup
       - test_fuzz:
@@ -555,7 +555,7 @@ workflows:
           filters:
             branches:
               only:
-                - master
+                - main
     jobs:
       - setup
       - publish_prerelease:
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 11ef400966cd..27d6a428c044 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,7 +4,7 @@
 
   Before submitting a pull request, please make sure the following is done:
 
-  1. Fork [the repository](https://github.com/facebook/react) and create your branch from `master`.
+  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.
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2ed8f56c51da..a7ec5b94efdc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -679,7 +679,7 @@ This release was published in a broken state and should be skipped.
 
 ### React Is (New)
 
-* First release of the [new package](https://github.com/facebook/react/tree/master/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))
+* 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)
@@ -688,7 +688,7 @@ This release was published in a broken state and should be skipped.
 
 ### Create Subscription (New)
 
-* First release of the [new package](https://github.com/facebook/react/tree/master/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))
+* 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)
 
@@ -819,12 +819,12 @@ Starting with 16.1.0, we will no longer be publishing new releases on Bower. You
 
 ### React Reconciler (Experimental)
 
-* First release of the [new experimental package](https://github.com/facebook/react/blob/master/packages/react-reconciler/README.md) for creating custom renderers. ([@iamdustan](https://github.com/iamdustan) in [#10758](https://github.com/facebook/react/pull/10758))
+* 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/master/packages/react-call-return) for parent-child communication. ([@gaearon](https://github.com/gaearon) in [#11364](https://github.com/facebook/react/pull/11364))
+* 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)
 
diff --git a/README.md b/README.md
index 33d3929acc15..1a5a64e0dc70 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# [React](https://reactjs.org/) &middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/react.svg?style=flat)](https://www.npmjs.com/package/react) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+# [React](https://reactjs.org/) &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) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
 
 React is a JavaScript library for building user interfaces.
 
diff --git a/appveyor.yml b/appveyor.yml
index 8191e610a95f..a50df340f51a 100644
--- a/appveyor.yml
+++ b/appveyor.yml
@@ -18,7 +18,7 @@ platform:
 
 branches:
   only:
-    - master
+    - main
 
 # Disable Visual Studio build and deploy
 build: off
diff --git a/packages/create-subscription/README.md b/packages/create-subscription/README.md
index c294b894f51f..39248568a033 100644
--- a/packages/create-subscription/README.md
+++ b/packages/create-subscription/README.md
@@ -8,7 +8,7 @@ This utility should be used for subscriptions to a single value that are typical
 
 Other cases have **better long-term solutions**:
 * Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
-* I/O subscriptions (e.g. notifications) that update infrequently should use [`react-cache`](https://github.com/facebook/react/blob/master/packages/react-cache/README.md) instead.
+* I/O subscriptions (e.g. notifications) that update infrequently should use [`react-cache`](https://github.com/facebook/react/blob/main/packages/react-cache/README.md) instead.
 * Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
 
 ## Limitations in async mode
diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index 0ca1cda305ed..b3e5d1736cb4 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -71,4 +71,4 @@
 
 ## 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/master/packages/eslint-plugin-react-hooks).
+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/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
index cd2ae506d2ef..585b215bf68e 100644
--- 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
@@ -2,7 +2,7 @@
 // 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
+// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/main/types/react-test-renderer
 
 'use strict';
 
diff --git a/packages/react-devtools-extensions/popups/disabled.html b/packages/react-devtools-extensions/popups/disabled.html
index 3e16aa507918..52f762253ffd 100644
--- a/packages/react-devtools-extensions/popups/disabled.html
+++ b/packages/react-devtools-extensions/popups/disabled.html
@@ -13,5 +13,5 @@
 <p>
   <b>This page doesn&rsquo;t appear to be using React.</b>
   <br />
-  If this seems wrong, follow the <a href="https://github.com/facebook/react/tree/master/packages/react-devtools#the-react-tab-doesnt-show-up">troubleshooting instructions</a>.
+  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-inline/README.md b/packages/react-devtools-inline/README.md
index c523ed3107ec..22cff37fb750 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -211,4 +211,4 @@ Once the above packages have been built or downloaded, you can watch for changes
 yarn start
 ```
 
-To test package changes, refer to the [`react-devtools-shell` README](https://github.com/facebook/react/blob/master/packages/react-devtools-shell/README.md).
+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-scheduling-profiler/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-scheduling-profiler/src/view-base/utils/normalizeWheel.js
index 6e783a0fc014..89de907562d1 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/utils/normalizeWheel.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/utils/normalizeWheel.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-// Adapted from: https://github.com/facebookarchive/fixed-data-table/blob/master/src/vendor_upstream/dom/normalizeWheel.js
+// Adapted from: https://github.com/facebookarchive/fixed-data-table/blob/main/src/vendor_upstream/dom/normalizeWheel.js
 
 export type NormalizedWheelDelta = {|
   deltaX: number,
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index ace43294e931..2cf31e867b57 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -672,7 +672,7 @@ describe('ProfilingCache', () => {
 
     const About = () => <div>About</div>;
 
-    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js
+    // Mimics https://github.com/ReactTraining/react-router/blob/main/packages/react-router/modules/Router.js
     function Router({children}) {
       const [path, setPath] = React.useState('/');
       return (
@@ -682,7 +682,7 @@ describe('ProfilingCache', () => {
       );
     }
 
-    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js
+    // Mimics https://github.com/ReactTraining/react-router/blob/main/packages/react-router/modules/Switch.js
     function Switch({children}) {
       return (
         <RouterContext.Consumer>
@@ -699,14 +699,14 @@ describe('ProfilingCache', () => {
       );
     }
 
-    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js
+    // Mimics https://github.com/ReactTraining/react-router/blob/main/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
+    // Mimics https://github.com/ReactTraining/react-router/blob/main/packages/react-router-dom/modules/Link.js
     function Link({children, path}) {
       return (
         <RouterContext.Consumer>
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 2911855f57bd..d9aa2672d469 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2633,7 +2633,7 @@ export function attach(
   const UNMOUNTED = 3;
 
   // This function is copied from React and should be kept in sync:
-  // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js
   function isFiberMountedImpl(fiber: Fiber): number {
     let node = fiber;
     let prevNode = null;
@@ -2689,7 +2689,7 @@ export function attach(
   }
 
   // This function is copied from React and should be kept in sync:
-  // https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js
   // It would be nice if we updated React to inject this function directly (vs just indirectly via findDOMNode).
   // BEGIN copied code
   function findCurrentFiberUsingSlowPathById(id: number): Fiber | null {
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 7babb90cff37..a5449612c7ae 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -44,7 +44,7 @@ export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
 export const PROFILER_EXPORT_VERSION = 5;
 
 export const CHANGE_LOG_URL =
-  'https://github.com/facebook/react/blob/master/packages/react-devtools/CHANGELOG.md';
+  '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';
diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js
index cc51b31861c1..c98b0566d881 100644
--- a/packages/react-devtools-shared/src/devtools/cache.js
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -15,7 +15,7 @@ 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/master/packages/react-cache/src/ReactCache.js
+// https://github.com/facebook/react/blob/main/packages/react-cache/src/ReactCache.js
 //
 // This cache is simpler than react-cache in that:
 // 1. Individual items don't need to be invalidated.
diff --git a/packages/react-devtools-shell/README.md b/packages/react-devtools-shell/README.md
index 0ad5de70b94e..6d1d3b76dc9e 100644
--- a/packages/react-devtools-shell/README.md
+++ b/packages/react-devtools-shell/README.md
@@ -2,7 +2,7 @@ Harness for testing local changes to the `react-devtools-inline` and `react-devt
 
 ## Development
 
-This target should be run in parallel with the `react-devtools-inline` package. The first step then is to run that target following the instructions in the [`react-devtools-inline` README](https://github.com/facebook/react/blob/master/packages/react-devtools-inline/README.md).
+This target should be run in parallel with the `react-devtools-inline` package. The first step then is to run that target following the instructions in the [`react-devtools-inline` README](https://github.com/facebook/react/blob/main/packages/react-devtools-inline/README.md).
 
 The test harness can then be run as follows:
 ```sh
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index f07db005bb3b..ec244e939cb9 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 <details>
   <summary>
-    Changes that have landed in master but are not yet released.
+    Changes that have landed in main but are not yet released.
     Click to see more.
   </summary>
 
@@ -380,7 +380,7 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 #### Improved performance
 The legacy DevTools extension used to add significant performance overhead, making it unusable for some larger React applications. That overhead has been effectively eliminated in version 4.
 
-[Learn more](https://github.com/facebook/react/blob/master/packages/react-devtools/OVERVIEW.md) about the performance optimizations that made this possible.
+[Learn more](https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md) about the performance optimizations that made this possible.
 
 #### Component stacks
 
@@ -406,7 +406,7 @@ Filter preferences are remembered between sessions.
 
 #### No more inline props
 
-Components in the tree no longer show inline props. This was done to [make DevTools faster](https://github.com/facebook/react/blob/master/packages/react-devtools/OVERVIEW.md) and to make it easier to browse larger component trees.
+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:
 
diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index 0c8d47da26eb..a05bafc3b2a5 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -259,7 +259,7 @@ Even when dealing with a single component, serializing deeply nested properties
 
 Hooks present a unique challenge for the DevTools because of the concept of _custom_ hooks. (A custom hook is essentially any function that calls at least one of the built-in hooks. By convention custom hooks also have names that begin with "use".)
 
-So how does DevTools identify custom functions called from within third party components? It does this by temporarily overriding React's built-in hooks and shallow rendering the component in question. Whenever one of the (overridden) built-in hooks are called, it parses the call stack to spot potential custom hooks (functions between the component itself and the built-in hook). This approach enables it to build a tree structure describing all of the calls to both the built-in _and_ custom hooks, along with the values passed to those hooks. (If you're interested in learning more about this, [here is the source code](https://github.com/facebook/react/blob/master/packages/react-debug-tools/src/ReactDebugHooks.js).)
+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,
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
index 2551416b970d..a8794737c0af 100644
--- a/packages/react-devtools/README.md
+++ b/packages/react-devtools/README.md
@@ -105,7 +105,7 @@ Or you could develop with a local HTTP server [like `serve`](https://www.npmjs.c
 
 **If your app is inside of CodePen**, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe.
 
-**If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment**, try [the standalone version instead](https://github.com/facebook/react/tree/master/packages/react-devtools). Chrome apps are currently not inspectable.
+**If 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 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.
 
diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index ec15ffd27436..8b0fc1b9eae7 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -51,15 +51,15 @@ const HostConfig = {
 * **[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/master/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js). For their signatures, we recommend looking at specific examples below.
+The full list of supported methods [can be found here](https://github.com/facebook/react/blob/main/packages/react-reconciler/src/forks/ReactFiberHostConfig.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/master/packages/react-art/src/ReactART.js) and its [host config](https://github.com/facebook/react/blob/master/packages/react-art/src/ReactARTHostConfig.js)
-* [React DOM](https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOM.js) and its [host config](https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMHostConfig.js)
-* [React Native](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactNativeRenderer.js) and its [host config](https://github.com/facebook/react/blob/master/packages/react-native-renderer/src/ReactNativeHostConfig.js)
+* [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/ReactARTHostConfig.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/src/client/ReactDOMHostConfig.js)
+* [React Native](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeRenderer.js) and its [host config](https://github.com/facebook/react/blob/main/packages/react-native-renderer/src/ReactNativeHostConfig.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!
 
@@ -332,10 +332,10 @@ This method should mutate the `container` root node and remove all children from
 
 ### 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/master/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js). File an issue if you need help.
+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/ReactFiberHostConfig.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/master/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js). File an issue if you need help.
+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/ReactFiberHostConfig.custom.js). File an issue if you need help.
diff --git a/packages/react/index.js b/packages/react/index.js
index 247d17ec01b8..890b06084738 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-// Keep in sync with https://github.com/facebook/flow/blob/master/lib/react.js
+// Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
 export type StatelessFunctionalComponent<
   P,
 > = React$StatelessFunctionalComponent<P>;
diff --git a/packages/use-subscription/README.md b/packages/use-subscription/README.md
index 549230211ca8..4ea34e1bca8b 100644
--- a/packages/use-subscription/README.md
+++ b/packages/use-subscription/README.md
@@ -8,7 +8,7 @@ This utility can be used for subscriptions to a single value that are typically
 
 Most other cases have **better long-term solutions**:
 * Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
-* I/O subscriptions (e.g. notifications) that update infrequently should use a mechanism like [`react-cache`](https://github.com/facebook/react/blob/master/packages/react-cache/README.md) instead.
+* I/O subscriptions (e.g. notifications) that update infrequently should use a mechanism like [`react-cache`](https://github.com/facebook/react/blob/main/packages/react-cache/README.md) instead.
 * Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
 
 ## Limitations in concurrent mode
diff --git a/scripts/bench/README.md b/scripts/bench/README.md
index 2d1ea7bea3f1..ae567fa5169d 100644
--- a/scripts/bench/README.md
+++ b/scripts/bench/README.md
@@ -27,8 +27,8 @@ 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 master repo against benchmarks
-yarn start --remote=master
+# will only build and run remote main repo against benchmarks
+yarn start --remote=main
 
 # same as "yarn start"
 yarn start --remote --local
diff --git a/scripts/bench/build.js b/scripts/bench/build.js
index 3ef0ffe18673..9147d8519e52 100644
--- a/scripts/bench/build.js
+++ b/scripts/bench/build.js
@@ -55,7 +55,7 @@ async function getMergeBaseFromLocalGitRepo(localRepo) {
   return await Git.Merge.base(
     repo,
     await repo.getHeadCommit(),
-    await repo.getBranchCommit('master')
+    await repo.getBranchCommit('main')
   );
 }
 
@@ -82,15 +82,15 @@ async function buildBenchmarkBundlesFromGitRepo(
       // if not, clone the repo to remote-repo folder
       repo = await Git.Clone(url, remoteRepoDir);
     }
-    let commit = await repo.getBranchCommit('master');
+    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 master head
-    await repo.checkoutBranch('master');
+    // then we checkout the latest main head
+    await repo.checkoutBranch('main');
     // make sure we pull in the latest changes
-    await repo.mergeBranches('master', 'origin/master');
+    await repo.mergeBranches('main', 'origin/main');
     // then we check if we need to move the HEAD to the merge base
-    if (commitId && commitId !== 'master') {
+    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);
diff --git a/scripts/bench/runner.js b/scripts/bench/runner.js
index ce4e411063c8..922e914d4ea2 100644
--- a/scripts/bench/runner.js
+++ b/scripts/bench/runner.js
@@ -61,7 +61,7 @@ async function runBenchmarks(reactPath) {
 }
 
 // get the performance benchmark results
-// from remote master (default React repo)
+// from remote main (default React repo)
 async function benchmarkRemoteMaster() {
   console.log(chalk.gray(`- Building React bundles...`));
   let commit = argv.remote;
diff --git a/scripts/error-codes/README.md b/scripts/error-codes/README.md
index 7d0988660f53..9933e9903d1e 100644
--- a/scripts/error-codes/README.md
+++ b/scripts/error-codes/README.md
@@ -2,14 +2,14 @@ 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/master/scripts/error-codes/codes.json)
+- [`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/master/scripts/error-codes/extract-errors.js)
+- [`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`.
-- [`transform-error-messages`](https://github.com/facebook/react/blob/master/scripts/error-codes/transform-error-messages.js)
+- [`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/extract-errors.js b/scripts/error-codes/extract-errors.js
index 58823cbe1687..4541a3eeeab6 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -18,7 +18,7 @@ const babylonOptions = {
   // As a parser, babylon has its own options and we can't directly
   // import/require a babel preset. It should be kept **the same** as
   // the `babel-plugin-syntax-*` ones specified in
-  // https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
+  // https://github.com/facebook/fbjs/blob/main/packages/babel-preset-fbjs/configure.js
   plugins: [
     'classProperties',
     'flow',
diff --git a/scripts/merge-fork/README.md b/scripts/merge-fork/README.md
index 75208a5781a1..2b01bfe156bd 100644
--- a/scripts/merge-fork/README.md
+++ b/scripts/merge-fork/README.md
@@ -51,7 +51,7 @@ By default, the changes are compared to HEAD. You can use `--base-ref` to compar
 
 ```sh
 yarn merge-fork \
-  --base-ref=$(git merge-base HEAD origin/master)
+  --base-ref=$(git merge-base HEAD origin/main)
   --base-dir=packages/react-reconciler/src \
   ReactFiberWorkLoop
 ```
diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index 9bdd6543d2a3..95dabcc1e11e 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -19,7 +19,7 @@ const parserOptions = {
   // babelParser has its own options and we can't directly
   // import/require a babel preset. It should be kept **the same** as
   // the `babel-plugin-syntax-*` ones specified in
-  // https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
+  // https://github.com/facebook/fbjs/blob/main/packages/babel-preset-fbjs/configure.js
   plugins: [
     'classProperties',
     'flow',
diff --git a/scripts/release/README.md b/scripts/release/README.md
index 979062dd1484..1737c3cf1880 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -50,7 +50,7 @@ The sections below include meaningful `--tags` in the instructions. However, kee
 "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/master).
+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
@@ -115,7 +115,7 @@ Begin by creating a branch from the previous git tag<sup>1</sup>:
 git checkout -b 16.8.3 v16.8.2
 ```
 
-Next cherry pick any changes from master that you want to include in the release:
+Next cherry pick any changes from main that you want to include in the release:
 
 ```sh
 git cherry-pick <commit-hash>
diff --git a/scripts/release/prepare-release-from-ci.js b/scripts/release/prepare-release-from-ci.js
index c61b3ed6372e..80dd05193078 100755
--- a/scripts/release/prepare-release-from-ci.js
+++ b/scripts/release/prepare-release-from-ci.js
@@ -12,7 +12,7 @@ const testPackagingFixture = require('./shared-commands/test-packaging-fixture')
 
 const run = async () => {
   try {
-    addDefaultParamValue(null, '--commit', 'master');
+    addDefaultParamValue(null, '--commit', 'main');
 
     const params = await parseParams();
     params.cwd = join(__dirname, '..', '..');
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
index 1e9b560faf08..a3cde5d1c4fc 100644
--- 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
@@ -25,9 +25,9 @@ const run = async ({cwd, packages, skipPackages}, versionsMap) => {
 
         // Guess the next version by incrementing patch.
         // The script will confirm this later.
-        // By default, new releases from masters should increment the minor version number,
+        // By default, new releases from mains should increment the minor version number,
         // and patch releases should be done from branches.
-        if (branch === 'master') {
+        if (branch === 'main') {
           versionsMap.set(packageName, `${major}.${minor + 1}.0`);
         } else {
           versionsMap.set(packageName, `${major}.${minor}.${patch + 1}`);
diff --git a/scripts/release/publish-using-ci-workflow.js b/scripts/release/publish-using-ci-workflow.js
index 0bb6c7d0d6c2..48a834ba1f19 100644
--- a/scripts/release/publish-using-ci-workflow.js
+++ b/scripts/release/publish-using-ci-workflow.js
@@ -78,7 +78,7 @@ async function pollUntilWorkflowFinishes(workflowID) {
 
 async function main() {
   const headCommitResponse = await fetch(
-    'https://api.github.com/repos/facebook/react/commits/master'
+    'https://api.github.com/repos/facebook/react/commits/main'
   );
   const headCommitJSON = await headCommitResponse.json();
   const headCommitSha = headCommitJSON.sha;
diff --git a/scripts/shared/listChangedFiles.js b/scripts/shared/listChangedFiles.js
index e9b586aa94f3..9db4e1507138 100644
--- a/scripts/shared/listChangedFiles.js
+++ b/scripts/shared/listChangedFiles.js
@@ -26,7 +26,7 @@ const execGitCmd = args =>
     .split('\n');
 
 const listChangedFiles = () => {
-  const mergeBase = execGitCmd(['merge-base', 'HEAD', 'master']);
+  const mergeBase = execGitCmd(['merge-base', 'HEAD', 'main']);
   return new Set([
     ...execGitCmd(['diff', '--name-only', '--diff-filter=ACMRTUB', mergeBase]),
     ...execGitCmd(['ls-files', '--others', '--exclude-standard']),

From 83f38d07689b8b750b7d96e17647a8978b836154 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 29 Jun 2021 16:53:31 -0400
Subject: [PATCH 0651/1603] Bump ecstatic from 2.2.1 to 2.2.2 in /scripts/bench
 (#20468)

Bumps [ecstatic](https://github.com/jfhbrook/node-ecstatic) from 2.2.1 to 2.2.2.
- [Release notes](https://github.com/jfhbrook/node-ecstatic/releases)
- [Changelog](https://github.com/jfhbrook/node-ecstatic/blob/2.2.2/CHANGELOG.md)
- [Commits](https://github.com/jfhbrook/node-ecstatic/compare/2.2.1...2.2.2)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 scripts/bench/yarn.lock | 26 +++++++++++++++-----------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/scripts/bench/yarn.lock b/scripts/bench/yarn.lock
index 3890ea264857..af0030824044 100644
--- a/scripts/bench/yarn.lock
+++ b/scripts/bench/yarn.lock
@@ -446,8 +446,9 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
 
 ecstatic@^2.0.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/ecstatic/-/ecstatic-2.2.1.tgz#b5087fad439dd9dd49d31e18131454817fe87769"
+  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"
@@ -640,8 +641,9 @@ hawk@~3.1.3:
     sntp "1.x.x"
 
 he@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
+  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"
@@ -988,8 +990,9 @@ mime-types@^2.1.12, mime-types@~2.1.7:
     mime-db "~1.29.0"
 
 mime@^1.2.11, mime@^1.3.6:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-1.3.6.tgz#591d84d3653a6b0b4a3b9df8de5aa8108e72e5e0"
+  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"
@@ -1007,9 +1010,9 @@ minimist@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.3"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.3.tgz#3db5c0765545ab8637be71f333a104a965a9ca3f"
-  integrity sha512-+bMdgqjMN/Z77a6NlY/I3U5LlRDbnmaAk6lDveAPKwSpcPM4tKAuYsvYF8xjhOPXhOYGe/73vVLVez5PW+jqhw==
+  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"
@@ -1622,8 +1625,9 @@ update-notifier@^2.1.0:
     xdg-basedir "^3.0.0"
 
 url-join@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/url-join/-/url-join-2.0.2.tgz#c072756967ad24b8b59e5741551caac78f50b8b7"
+  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"

From 2442d988eff0943b557bcc61cf4e0062146b6948 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 29 Jun 2021 16:53:39 -0400
Subject: [PATCH 0652/1603] Bump ws from 6.1.2 to 6.2.2 in /scripts/release
 (#21628)

Bumps [ws](https://github.com/websockets/ws) from 6.1.2 to 6.2.2.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/commits)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 scripts/release/yarn.lock | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/scripts/release/yarn.lock b/scripts/release/yarn.lock
index 46c935b69d16..2836b28fab3b 100644
--- a/scripts/release/yarn.lock
+++ b/scripts/release/yarn.lock
@@ -79,9 +79,9 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
 
 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==
+  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==
 
 asynckit@^0.4.0:
   version "0.4.0"
@@ -1214,9 +1214,9 @@ wrappy@1:
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
 ws@^6.1.0:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.1.2.tgz#3cc7462e98792f0ac679424148903ded3b9c3ad8"
-  integrity sha512-rfUqzvz0WxmSXtJpPMX2EeASXabOrSMk1ruMOV3JBTBjo4ac2lDjGGsbQSyxj8Odhw5fBib8ZKEjDNvgouNKYw==
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
   dependencies:
     async-limiter "~1.0.0"
 

From f6112ffe5af0aa4688e29bb0f1d58f6cf8fbe8e0 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 30 Jun 2021 15:27:32 +0200
Subject: [PATCH 0653/1603] chore: Ignore build2/ when linting (#21204)

---
 .eslintignore | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.eslintignore b/.eslintignore
index 2af8176bc3e1..82f28b72dda4 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,6 +6,9 @@ packages/react-art/npm/lib
 
 # Build products
 build/
+# TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
+# with old build job. Remove once we migrate rest of build/test pipeline.
+build2/
 coverage/
 fixtures/
 scripts/bench/benchmarks/**/*.js
@@ -20,4 +23,4 @@ packages/react-devtools-extensions/shared/build
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static
\ No newline at end of file
+packages/react-devtools-scheduling-profiler/static

From 3e8c86c1c84559f2552a493970c50143c8757043 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=AD=E5=B8=85=E5=BD=AC?= <guoshuaibin@bytedance.com>
Date: Wed, 30 Jun 2021 09:52:24 -0400
Subject: [PATCH 0654/1603] fix: maxYieldInterval should not compare with
 currentTime directly in Scheduler-shouldYieldToHost

---
 packages/scheduler/src/forks/Scheduler.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index 6d0599f7068c..8d1f1f994fe8 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -450,7 +450,8 @@ function shouldYieldToHost() {
       }
       // There's no pending input. Only yield if we've reached the max
       // yield interval.
-      return currentTime >= maxYieldInterval;
+      const timeElapsed = currentTime - (deadline - yieldInterval);
+      return timeElapsed >= maxYieldInterval;
     } else {
       // There's still time left in the frame.
       return false;

From ae5afb3b9d347636037b69222c0534d4187b05ab Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 30 Jun 2021 14:29:31 -0400
Subject: [PATCH 0655/1603] Simplify `discreteUpdates` (#21773)

Now that discrete updates are flushed synchronously in a microtask,
the `discreteUpdates` method used by our event system is only a
optimization to save us from having to check `window.event.type` on
every update. So we should be able to remove the extra logic.

Assuming this lands successfully, we can remove `batchedEventUpdates`
and probably inline `discreteUpdates` into the renderer, like we do
for continuous updates.
---
 .../src/events/ReactDOMUpdateBatching.js      | 41 +++++--------------
 1 file changed, 11 insertions(+), 30 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index 4f0948dd68ab..3fb8214fc690 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -24,10 +24,11 @@ let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
 let flushDiscreteUpdatesImpl = function() {};
-let batchedEventUpdatesImpl = batchedUpdatesImpl;
+// TODO: Remove references to batchedEventUpdates
+// let batchedEventUpdatesImpl = batchedUpdatesImpl;
 
 let isInsideEventHandler = false;
-let isBatchingEventUpdates = false;
+// let isBatchingEventUpdates = false;
 
 function finishEventHandler() {
   // Here we wait until all updates have propagated, which is important
@@ -46,48 +47,27 @@ function finishEventHandler() {
   }
 }
 
-export function batchedUpdates(fn, bookkeeping) {
+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(bookkeeping);
+    return fn(a, b);
   }
   isInsideEventHandler = true;
   try {
-    return batchedUpdatesImpl(fn, bookkeeping);
+    return batchedUpdatesImpl(fn, a, b);
   } finally {
     isInsideEventHandler = false;
     finishEventHandler();
   }
 }
 
-export function batchedEventUpdates(fn, a, b) {
-  if (isBatchingEventUpdates) {
-    // If we are currently inside another batch, we need to wait until it
-    // fully completes before restoring state.
-    return fn(a, b);
-  }
-  isBatchingEventUpdates = true;
-  try {
-    return batchedEventUpdatesImpl(fn, a, b);
-  } finally {
-    isBatchingEventUpdates = false;
-    finishEventHandler();
-  }
-}
+// TODO: Remove references to batchedEventUpdates
+export const batchedEventUpdates = batchedUpdates;
 
 // TODO: Replace with flushSync
 export function discreteUpdates(fn, a, b, c, d) {
-  const prevIsInsideEventHandler = isInsideEventHandler;
-  isInsideEventHandler = true;
-  try {
-    return discreteUpdatesImpl(fn, a, b, c, d);
-  } finally {
-    isInsideEventHandler = prevIsInsideEventHandler;
-    if (!isInsideEventHandler) {
-      finishEventHandler();
-    }
-  }
+  return discreteUpdatesImpl(fn, a, b, c, d);
 }
 
 export function setBatchingImplementation(
@@ -99,5 +79,6 @@ export function setBatchingImplementation(
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
   flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
-  batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
+  // TODO: Remove references to batchedEventUpdates
+  // batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
 }

From c96761c7b217989a6c377c9b12249a78b0be91f9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 30 Jun 2021 18:09:14 -0400
Subject: [PATCH 0656/1603] Delete batchedEventUpdates (#21774)

No longer used anywhere.
---
 packages/react-dom/src/client/ReactDOM.js     |  2 --
 .../src/events/DOMPluginEventSystem.js        |  4 +--
 .../src/events/ReactDOMUpdateBatching.js      |  9 ------
 .../react-native-renderer/src/ReactFabric.js  |  7 +----
 .../src/ReactNativeRenderer.js                |  7 +----
 .../src/legacy-events/ReactGenericBatching.js | 18 ------------
 .../src/ReactFiberReconciler.js               |  5 ----
 .../src/ReactFiberReconciler.new.js           |  2 --
 .../src/ReactFiberReconciler.old.js           |  2 --
 .../src/ReactFiberWorkLoop.new.js             | 29 ++++---------------
 .../src/ReactFiberWorkLoop.old.js             | 29 ++++---------------
 11 files changed, 16 insertions(+), 98 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index f2affc78a58c..8e974697075f 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -21,7 +21,6 @@ import {createRoot, hydrateRoot, isValidContainer} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
-  batchedEventUpdates,
   batchedUpdates,
   discreteUpdates,
   flushDiscreteUpdates,
@@ -102,7 +101,6 @@ setBatchingImplementation(
   batchedUpdates,
   discreteUpdates,
   flushDiscreteUpdates,
-  batchedEventUpdates,
 );
 
 function createPortal(
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index b2c118d3cea8..0583916988e0 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -43,7 +43,7 @@ import {
   getEventHandlerListeners,
 } from '../client/ReactDOMComponentTree';
 import {COMMENT_NODE} from '../shared/HTMLNodeType';
-import {batchedEventUpdates} from './ReactDOMUpdateBatching';
+import {batchedUpdates} from './ReactDOMUpdateBatching';
 import getListener from './getListener';
 import {passiveBrowserEventsSupported} from './checkPassiveEvents';
 
@@ -630,7 +630,7 @@ export function dispatchEventForPluginEventSystem(
     }
   }
 
-  batchedEventUpdates(() =>
+  batchedUpdates(() =>
     dispatchEventsForPlugins(
       domEventName,
       eventSystemFlags,
diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index 3fb8214fc690..f2fbfe4c3f32 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -24,11 +24,8 @@ let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
 let flushDiscreteUpdatesImpl = function() {};
-// TODO: Remove references to batchedEventUpdates
-// let batchedEventUpdatesImpl = batchedUpdatesImpl;
 
 let isInsideEventHandler = false;
-// let isBatchingEventUpdates = false;
 
 function finishEventHandler() {
   // Here we wait until all updates have propagated, which is important
@@ -62,9 +59,6 @@ export function batchedUpdates(fn, a, b) {
   }
 }
 
-// TODO: Remove references to batchedEventUpdates
-export const batchedEventUpdates = batchedUpdates;
-
 // TODO: Replace with flushSync
 export function discreteUpdates(fn, a, b, c, d) {
   return discreteUpdatesImpl(fn, a, b, c, d);
@@ -74,11 +68,8 @@ export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
   _flushDiscreteUpdatesImpl,
-  _batchedEventUpdatesImpl,
 ) {
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
   flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
-  // TODO: Remove references to batchedEventUpdates
-  // batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
 }
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 040e02e093e4..c79868af51f0 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -16,7 +16,6 @@ import './ReactFabricInjection';
 import {
   findHostInstance,
   findHostInstanceWithWarning,
-  batchedEventUpdates,
   batchedUpdates as batchedUpdatesImpl,
   discreteUpdates,
   createContainer,
@@ -246,11 +245,7 @@ function createPortal(
   return createPortalImpl(children, containerTag, null, key);
 }
 
-setBatchingImplementation(
-  batchedUpdatesImpl,
-  discreteUpdates,
-  batchedEventUpdates,
-);
+setBatchingImplementation(batchedUpdatesImpl, discreteUpdates);
 
 const roots = new Map();
 
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 6f12fd5d8d44..fdb1c05fed94 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -17,7 +17,6 @@ import {
   findHostInstance,
   findHostInstanceWithWarning,
   batchedUpdates as batchedUpdatesImpl,
-  batchedEventUpdates,
   discreteUpdates,
   createContainer,
   updateContainer,
@@ -237,11 +236,7 @@ function createPortal(
   return createPortalImpl(children, containerTag, null, key);
 }
 
-setBatchingImplementation(
-  batchedUpdatesImpl,
-  discreteUpdates,
-  batchedEventUpdates,
-);
+setBatchingImplementation(batchedUpdatesImpl, discreteUpdates);
 
 function computeComponentStackForErrorReporting(reactTag: number): string {
   const fiber = getClosestInstanceFromNode(reactTag);
diff --git a/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js b/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
index 3b30bb274ff1..f0f0705c1fc5 100644
--- a/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
+++ b/packages/react-native-renderer/src/legacy-events/ReactGenericBatching.js
@@ -18,10 +18,8 @@ let batchedUpdatesImpl = function(fn, bookkeeping) {
 let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
-let batchedEventUpdatesImpl = batchedUpdatesImpl;
 
 let isInsideEventHandler = false;
-let isBatchingEventUpdates = false;
 
 export function batchedUpdates(fn, bookkeeping) {
   if (isInsideEventHandler) {
@@ -37,20 +35,6 @@ export function batchedUpdates(fn, bookkeeping) {
   }
 }
 
-export function batchedEventUpdates(fn, a, b) {
-  if (isBatchingEventUpdates) {
-    // If we are currently inside another batch, we need to wait until it
-    // fully completes before restoring state.
-    return fn(a, b);
-  }
-  isBatchingEventUpdates = true;
-  try {
-    return batchedEventUpdatesImpl(fn, a, b);
-  } finally {
-    isBatchingEventUpdates = false;
-  }
-}
-
 export function discreteUpdates(fn, a, b, c, d) {
   const prevIsInsideEventHandler = isInsideEventHandler;
   isInsideEventHandler = true;
@@ -64,9 +48,7 @@ export function discreteUpdates(fn, a, b, c, d) {
 export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
-  _batchedEventUpdatesImpl,
 ) {
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
-  batchedEventUpdatesImpl = _batchedEventUpdatesImpl;
 }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 7f1a53522da5..bc169fd8a647 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -17,7 +17,6 @@ import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 import {
   createContainer as createContainer_old,
   updateContainer as updateContainer_old,
-  batchedEventUpdates as batchedEventUpdates_old,
   batchedUpdates as batchedUpdates_old,
   unbatchedUpdates as unbatchedUpdates_old,
   deferredUpdates as deferredUpdates_old,
@@ -56,7 +55,6 @@ import {
 import {
   createContainer as createContainer_new,
   updateContainer as updateContainer_new,
-  batchedEventUpdates as batchedEventUpdates_new,
   batchedUpdates as batchedUpdates_new,
   unbatchedUpdates as unbatchedUpdates_new,
   deferredUpdates as deferredUpdates_new,
@@ -98,9 +96,6 @@ export const createContainer = enableNewReconciler
 export const updateContainer = enableNewReconciler
   ? updateContainer_new
   : updateContainer_old;
-export const batchedEventUpdates = enableNewReconciler
-  ? batchedEventUpdates_new
-  : batchedEventUpdates_old;
 export const batchedUpdates = enableNewReconciler
   ? batchedUpdates_new
   : batchedUpdates_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 1c549125a43d..f406f8592b0d 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -51,7 +51,6 @@ import {
   requestUpdateLane,
   scheduleUpdateOnFiber,
   flushRoot,
-  batchedEventUpdates,
   batchedUpdates,
   unbatchedUpdates,
   flushSync,
@@ -327,7 +326,6 @@ export function updateContainer(
 }
 
 export {
-  batchedEventUpdates,
   batchedUpdates,
   unbatchedUpdates,
   deferredUpdates,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index f57b1f84814c..f6ae425b4400 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -51,7 +51,6 @@ import {
   requestUpdateLane,
   scheduleUpdateOnFiber,
   flushRoot,
-  batchedEventUpdates,
   batchedUpdates,
   unbatchedUpdates,
   flushSync,
@@ -327,7 +326,6 @@ export function updateContainer(
 }
 
 export {
-  batchedEventUpdates,
   batchedUpdates,
   unbatchedUpdates,
   deferredUpdates,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 6ce133729979..7f429c873438 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -246,13 +246,12 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b000000;
-const BatchedContext = /*               */ 0b000001;
-const EventContext = /*                 */ 0b000010;
-const LegacyUnbatchedContext = /*       */ 0b000100;
-const RenderContext = /*                */ 0b001000;
-const CommitContext = /*                */ 0b010000;
-export const RetryAfterError = /*       */ 0b100000;
+export const NoContext = /*             */ 0b00000;
+const BatchedContext = /*               */ 0b00001;
+const LegacyUnbatchedContext = /*       */ 0b00010;
+const RenderContext = /*                */ 0b00100;
+const CommitContext = /*                */ 0b01000;
+export const RetryAfterError = /*       */ 0b10000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -1102,22 +1101,6 @@ export function batchedUpdates<A, R>(fn: A => R, a: A): R {
   }
 }
 
-export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
-  const prevExecutionContext = executionContext;
-  executionContext |= EventContext;
-  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) {
-      resetRenderTimer();
-      flushSyncCallbacksOnlyInLegacyMode();
-    }
-  }
-}
-
 export function discreteUpdates<A, B, C, D, R>(
   fn: (A, B, C, D) => R,
   a: A,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b99245f097d1..f356fc3f1156 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -246,13 +246,12 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b000000;
-const BatchedContext = /*               */ 0b000001;
-const EventContext = /*                 */ 0b000010;
-const LegacyUnbatchedContext = /*       */ 0b000100;
-const RenderContext = /*                */ 0b001000;
-const CommitContext = /*                */ 0b010000;
-export const RetryAfterError = /*       */ 0b100000;
+export const NoContext = /*             */ 0b00000;
+const BatchedContext = /*               */ 0b00001;
+const LegacyUnbatchedContext = /*       */ 0b00010;
+const RenderContext = /*                */ 0b00100;
+const CommitContext = /*                */ 0b01000;
+export const RetryAfterError = /*       */ 0b10000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -1102,22 +1101,6 @@ export function batchedUpdates<A, R>(fn: A => R, a: A): R {
   }
 }
 
-export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
-  const prevExecutionContext = executionContext;
-  executionContext |= EventContext;
-  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) {
-      resetRenderTimer();
-      flushSyncCallbacksOnlyInLegacyMode();
-    }
-  }
-}
-
 export function discreteUpdates<A, B, C, D, R>(
   fn: (A, B, C, D) => R,
   a: A,

From 6bf111772afb73e2d91a563bf5e8e5e7e1f7d7a9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 1 Jul 2021 11:37:56 -0400
Subject: [PATCH 0657/1603] Install nested packages from Yarn cache before
 running build tests (#21779)

---
 .circleci/config.yml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index e157cb442707..e3834500ed3b 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -306,6 +306,9 @@ jobs:
           at: .
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
+      - run:
+          name: Install nested packages from Yarn cache
+          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
       - run: yarn test --build <<parameters.args>> --ci
 
   RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:

From ab390c65eefb7f395468c18ee2b059bf35c7cd03 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 1 Jul 2021 13:08:46 -0400
Subject: [PATCH 0658/1603] ReactDebugHooks optionally includes fileName, and
 line/column numbers (#21781)

---
 .../react-debug-tools/src/ReactDebugHooks.js  | 65 ++++++++++++++++---
 1 file changed, 56 insertions(+), 9 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 212708255747..7d2679b319ce 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -332,12 +332,20 @@ const Dispatcher: DispatcherType = {
 
 // 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>,
+  hookSource?: HookSource,
   ...
 };
 export type HooksTree = Array<HooksNode>;
@@ -473,7 +481,11 @@ function parseCustomHookName(functionName: void | string): string {
   return functionName.substr(startIndex);
 }
 
-function buildTree(rootStack, readHookLog): HooksTree {
+function buildTree(
+  rootStack,
+  readHookLog,
+  includeHooksSource: boolean,
+): HooksTree {
   const rootChildren = [];
   let prevStack = null;
   let levelChildren = rootChildren;
@@ -508,13 +520,25 @@ function buildTree(rootStack, readHookLog): HooksTree {
       // to the tree.
       for (let j = stack.length - commonSteps - 1; j >= 1; j--) {
         const children = [];
-        levelChildren.push({
+        const stackFrame = stack[j];
+        const levelChild: HooksNode = {
           id: null,
           isStateEditable: false,
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
           subHooks: children,
-        });
+        };
+
+        if (includeHooksSource) {
+          levelChild.hookSource = {
+            lineNumber: stackFrame.lineNumber,
+            columnNumber: stackFrame.columnNumber,
+            functionName: stackFrame.functionName,
+            fileName: stackFrame.fileName,
+          };
+        }
+
+        levelChildren.push(levelChild);
         stackOfChildren.push(levelChildren);
         levelChildren = children;
       }
@@ -531,14 +555,33 @@ function buildTree(rootStack, readHookLog): HooksTree {
 
     // For the time being, only State and Reducer hooks support runtime overrides.
     const isStateEditable = primitive === 'Reducer' || primitive === 'State';
-
-    levelChildren.push({
+    const levelChild: HooksNode = {
       id,
       isStateEditable,
       name: primitive,
       value: hook.value,
       subHooks: [],
-    });
+    };
+
+    if (includeHooksSource) {
+      const hookSource: HookSource = {
+        lineNumber: null,
+        functionName: null,
+        fileName: null,
+        columnNumber: null,
+      };
+      if (stack && stack.length >= 1) {
+        const stackFrame = stack[0];
+        hookSource.lineNumber = stackFrame.lineNumber;
+        hookSource.functionName = stackFrame.functionName;
+        hookSource.fileName = stackFrame.fileName;
+        hookSource.columnNumber = stackFrame.columnNumber;
+      }
+
+      levelChild.hookSource = hookSource;
+    }
+
+    levelChildren.push(levelChild);
   }
 
   // Associate custom hook values (useDebugValue() hook entries) with the correct hooks.
@@ -585,6 +628,7 @@ export function inspectHooks<Props>(
   renderFunction: Props => React$Node,
   props: Props,
   currentDispatcher: ?CurrentDispatcherRef,
+  includeHooksSource?: boolean = false,
 ): HooksTree {
   // DevTools will pass the current renderer's injected dispatcher.
   // Other apps might compile debug hooks as part of their app though.
@@ -605,7 +649,7 @@ export function inspectHooks<Props>(
     currentDispatcher.current = previousDispatcher;
   }
   const rootStack = ErrorStackParser.parse(ancestorStackError);
-  return buildTree(rootStack, readHookLog);
+  return buildTree(rootStack, readHookLog, includeHooksSource);
 }
 
 function setupContexts(contextMap: Map<ReactContext<any>, any>, fiber: Fiber) {
@@ -634,6 +678,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
   props: Props,
   ref: Ref,
   currentDispatcher: CurrentDispatcherRef,
+  includeHooksSource: boolean,
 ): HooksTree {
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
@@ -648,7 +693,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
     currentDispatcher.current = previousDispatcher;
   }
   const rootStack = ErrorStackParser.parse(ancestorStackError);
-  return buildTree(rootStack, readHookLog);
+  return buildTree(rootStack, readHookLog, includeHooksSource);
 }
 
 function resolveDefaultProps(Component, baseProps) {
@@ -669,6 +714,7 @@ function resolveDefaultProps(Component, baseProps) {
 export function inspectHooksOfFiber(
   fiber: Fiber,
   currentDispatcher: ?CurrentDispatcherRef,
+  includeHooksSource?: boolean = false,
 ) {
   // DevTools will pass the current renderer's injected dispatcher.
   // Other apps might compile debug hooks as part of their app though.
@@ -706,9 +752,10 @@ export function inspectHooksOfFiber(
         props,
         fiber.ref,
         currentDispatcher,
+        includeHooksSource,
       );
     }
-    return inspectHooks(type, props, currentDispatcher);
+    return inspectHooks(type, props, currentDispatcher, includeHooksSource);
   } finally {
     currentHook = null;
     restoreContexts(contextMap);

From c5cfa71948dbf4c2dd9ff64596ab663f8d559cd6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 1 Jul 2021 14:39:18 -0400
Subject: [PATCH 0659/1603] DevTools: Show hook names based on variable usage
 (#21641)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
Co-authored-by: Saphal Patro <saphal1998@gmail.com>
Co-authored-by: VibhorCodecianGupta <vibhordelgupta@gmail.com>
---
 .eslintignore                                 |   2 +
 .prettierignore                               |   2 +
 package.json                                  |   2 +-
 .../react-devtools-core/webpack.backend.js    |   3 +
 packages/react-devtools-extensions/build.js   |   6 +
 .../chrome/manifest.json                      |   3 +-
 .../edge/manifest.json                        |   3 +-
 .../firefox/manifest.json                     |   3 +-
 .../react-devtools-extensions/package.json    |   8 +-
 .../src/ErrorTester.js                        |  34 ++
 .../src/ErrorTesterCompiled.js                |  25 +
 .../src/__tests__/README.md                   |   1 +
 .../__source__/ComponentWithCustomHook.js     |  39 ++
 .../ComponentWithExternalCustomHooks.js       |  17 +
 .../src/__tests__/__source__/Example.js       |  21 +
 .../src/__tests__/__source__/InlineRequire.js |  14 +
 .../src/__tests__/__source__/ToDoList.js      | 128 +++++
 .../external/ComponentWithCustomHook.js       |  42 ++
 .../external/ComponentWithCustomHook.js.map   |   1 +
 .../ComponentWithExternalCustomHooks.js       |  27 +
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../__compiled__/external/Example.js          |  29 +
 .../__compiled__/external/Example.js.map      |   1 +
 .../__compiled__/external/InlineRequire.js    |  22 +
 .../external/InlineRequire.js.map             |   1 +
 .../__compiled__/external/ToDoList.js         | 107 ++++
 .../__compiled__/external/ToDoList.js.map     |   1 +
 .../__compiled__/external/useTheme.js         |  28 +
 .../__compiled__/external/useTheme.js.map     |   1 +
 .../inline/ComponentWithCustomHook.js         |  42 ++
 .../ComponentWithExternalCustomHooks.js       |  27 +
 .../__source__/__compiled__/inline/Example.js |  29 +
 .../__compiled__/inline/InlineRequire.js      |  22 +
 .../__compiled__/inline/ToDoList.js           | 107 ++++
 .../__compiled__/inline/useTheme.js           |  28 +
 .../src/__tests__/__source__/useTheme.js      |  18 +
 .../src/__tests__/parseHookNames-test.js      | 287 ++++++++++
 .../src/__tests__/updateMockSourceMaps.js     |  76 +++
 .../react-devtools-extensions/src/astUtils.js | 366 +++++++++++++
 .../react-devtools-extensions/src/main.js     |   2 +
 .../src/parseHookNames.js                     | 501 ++++++++++++++++++
 .../webpack.backend.js                        |   4 +
 .../webpack.config.js                         |  15 +
 .../react-devtools-inline/webpack.config.js   |   5 +
 packages/react-devtools-shared/package.json   |   2 +
 .../src/__tests__/hookSerializer.js           |  60 +++
 .../src/__tests__/inspectedElement-test.js    |  23 +-
 .../__tests__/inspectedElementSerializer.js   |   1 +
 .../src/__tests__/setupEnv.js                 |   1 +
 .../src/__tests__/setupTests.js               |  10 +
 .../src/__tests__/utils.js                    |  10 +
 .../src/backend/renderer.js                   |   6 +-
 .../config/DevToolsFeatureFlags.default.js    |   1 +
 .../DevToolsFeatureFlags.extension-fb.js      |   1 +
 .../DevToolsFeatureFlags.extension-oss.js     |   1 +
 .../react-devtools-shared/src/constants.js    |   3 +
 .../src/devtools/views/ButtonIcon.js          |  19 +-
 .../src/devtools/views/Components/Badge.js    |   2 +-
 .../devtools/views/Components/Components.css  |   1 +
 .../views/Components/InspectedElement.css     |   2 +-
 .../views/Components/InspectedElement.js      |  10 +-
 .../Components/InspectedElementContext.js     |  58 +-
 .../InspectedElementErrorBoundary.css         |   2 +-
 .../Components/InspectedElementHooksTree.css  |   4 +
 .../Components/InspectedElementHooksTree.js   |  70 ++-
 .../views/Components/InspectedElementView.js  |  12 +-
 .../devtools/views/Components/KeyValue.css    |   5 +
 .../src/devtools/views/Components/KeyValue.js |  16 +-
 .../LoadHookNamesFunctionContext.js           |  11 +
 .../src/devtools/views/DevTools.js            |  80 +--
 .../views/Settings/ComponentsSettings.js      |  22 +
 .../views/Settings/SettingsContext.js         |  12 +
 .../views/Settings/SettingsShared.css         |   4 +
 .../src/hookNamesCache.js                     | 154 ++++++
 packages/react-devtools-shared/src/types.js   |  11 +
 packages/react-devtools-shared/src/utils.js   |   6 +-
 .../react-devtools-shell/webpack.config.js    |   5 +
 scripts/jest/config.build-devtools.js         |  12 +-
 scripts/jest/config.build.js                  |   1 +
 scripts/jest/config.source-persistent.js      |   1 +
 scripts/jest/config.source-www.js             |   1 +
 scripts/jest/config.source.js                 |   1 +
 scripts/prettier/index.js                     |   9 +-
 yarn.lock                                     | 289 +++++++++-
 84 files changed, 2966 insertions(+), 74 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/ErrorTester.js
 create mode 100644 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/README.md
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
 create mode 100644 packages/react-devtools-extensions/src/astUtils.js
 create mode 100644 packages/react-devtools-extensions/src/parseHookNames.js
 create mode 100644 packages/react-devtools-shared/src/__tests__/hookSerializer.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js
 create mode 100644 packages/react-devtools-shared/src/hookNamesCache.js

diff --git a/.eslintignore b/.eslintignore
index 82f28b72dda4..2593400242b0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -20,6 +20,8 @@ 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/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-scheduling-profiler/dist
diff --git a/.prettierignore b/.prettierignore
index 80650567efce..d944a5e628fa 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,6 +2,8 @@ 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/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
 packages/react-devtools-scheduling-profiler/dist
diff --git a/package.json b/package.json
index 0f650fb1b26e..1bf9be46f889 100644
--- a/package.json
+++ b/package.json
@@ -107,7 +107,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build2 && mkdir build2 && cp -r ./build/node_modules build2/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build2 && mkdir build2 && cp -r ./build/node_modules build2/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index e33e4b89c6dd..9b09448c55b2 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -47,6 +47,9 @@ module.exports = {
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
   },
+  node: {
+    fs: 'empty',
+  },
   plugins: [
     new DefinePlugin({
       __DEV__,
diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
index 76b7aee68cb3..afd4b6fd23b0 100644
--- a/packages/react-devtools-extensions/build.js
+++ b/packages/react-devtools-extensions/build.js
@@ -93,6 +93,12 @@ const build = async (tempPath, manifestPath) => {
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
   );
 
+  // The "source-map" library requires this chunk of WASM to be bundled at runtime.
+  await copy(
+    join(__dirname, 'node_modules', 'source-map', 'lib', 'mappings.wasm'),
+    join(zipPath, 'mappings.wasm'),
+  );
+
   const commit = getGitCommit();
   const dateString = new Date().toLocaleDateString();
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 906d50465ca3..1f689e6c3a97 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -32,7 +32,8 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js"
+    "build/renderer.js",
+    "mappings.wasm"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index ac13c85424e9..04d92e4719a1 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -32,7 +32,8 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js"
+    "build/renderer.js",
+    "mappings.wasm"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 480ea1b4c636..2ba0d204452e 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -37,7 +37,8 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js"
+    "build/renderer.js",
+    "mappings.wasm"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 2771c31c5a3d..1949edbd0232 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -15,12 +15,14 @@
     "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
-    "test:edge": "node ./edge/test"
+    "test:edge": "node ./edge/test",
+    "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "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-modules-commonjs": "^7.10.4",
     "@babel/plugin-transform-react-jsx-source": "^7.10.5",
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
@@ -29,16 +31,20 @@
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
+    "babel-preset-minify": "^0.5.1",
     "child-process-promise": "^2.2.1",
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
     "firefox-profile": "^1.0.2",
+    "fs-extra": "^4.0.2",
+    "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",
     "raw-loader": "^3.1.0",
+    "source-map": "^0.8.0-beta.0",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
     "webpack": "^4.43.0",
diff --git a/packages/react-devtools-extensions/src/ErrorTester.js b/packages/react-devtools-extensions/src/ErrorTester.js
new file mode 100644
index 000000000000..dfdb2a60829a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/ErrorTester.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import 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-extensions/src/ErrorTesterCompiled.js b/packages/react-devtools-extensions/src/ErrorTesterCompiled.js
new file mode 100644
index 000000000000..9bdbd8582dee
--- /dev/null
+++ b/packages/react-devtools-extensions/src/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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/README.md b/packages/react-devtools-extensions/src/__tests__/README.md
new file mode 100644
index 000000000000..3b95b09f7436
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/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 parnet `__tests__` folder. To regenerate these compiled files, run `yarn update-mock-source-maps` in the `react-devtools-extensions` directory.
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..311876ffc515
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, {useEffect, useState} from 'react';
+
+export function Component() {
+  const [count, setCount] = useState(0);
+  const isDarkMode = useIsDarkMode();
+
+  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 [isDarkMode] = useState(false);
+
+  useEffect(function useEffectCreate() {
+    // Here is where we may listen to a "theme" event...
+  }, []);
+
+  return isDarkMode;
+}
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..f7c52ffc9dbf
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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-extensions/src/__tests__/__source__/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/Example.js
new file mode 100644
index 000000000000..be2049d89c0f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/Example.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import 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-extensions/src/__tests__/__source__/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/InlineRequire.js
new file mode 100644
index 000000000000..617200b1edad
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/InlineRequire.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/ToDoList.js
new file mode 100644
index 000000000000..733aba85fc2b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ToDoList.js
@@ -0,0 +1,128 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * 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-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..f76a1acedb86
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode, setIsDarkMode] = (0, _react.useState)(0);
+  (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map
+//# sourceURL=ComponentWithCustomHook.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
new file mode 100644
index 000000000000..ac54e5738f97
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","setIsDarkMode","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,EAAaG,aAAb,IAA8B,qBAAS,CAAT,CAApC;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOJ,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [isDarkMode, setIsDarkMode] = useState(0);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}"]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..dbdc0b3ade5e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
+//# sourceURL=ComponentWithExternalCustomHooks.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 000000000000..a4afacf044c9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
new file mode 100644
index 000000000000..b51d2b2c843a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map
+//# sourceURL=Example.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map
new file mode 100644
index 000000000000..a3616e735c26
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
new file mode 100644
index 000000000000..4d025dab5851
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map
+//# sourceURL=InlineRequire.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js.map
new file mode 100644
index 000000000000..0777b4692796
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
new file mode 100644
index 000000000000..d9cca2b089ca
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map
+//# sourceURL=ToDoList.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js.map
new file mode 100644
index 000000000000..2408485245a6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
new file mode 100644
index 000000000000..b32aa123308b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
+//# sourceURL=useTheme.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js.map
new file mode 100644
index 000000000000..95da9f592fb8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..85ac8a37c89f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode, setIsDarkMode] = (0, _react.useState)(0);
+  (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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwic2V0SXNEYXJrTW9kZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFDQSxRQUFNQyxVQUFVLEdBQUdDLGFBQWEsRUFBaEM7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUgsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJFLFVBQWpCLENBREYsZUFFRSxxREFBYUYsS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUk7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNELGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELEVBQWFHLGFBQWIsSUFBOEIscUJBQVMsQ0FBVCxDQUFwQztBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9KLFVBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW2lzRGFya01vZGUsIHNldElzRGFya01vZGVdID0gdXNlU3RhdGUoMCk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufSJdfQ==
+//# sourceURL=ComponentWithCustomHook.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..b9812467b7f6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useTheme = _interopRequireDefault(require("./useTheme"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXX0=
+//# sourceURL=ComponentWithExternalCustomHooks.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
new file mode 100644
index 000000000000..ea6b7e4b9881
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==
+//# sourceURL=Example.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
new file mode 100644
index 000000000000..3492fe273279
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl19
+//# sourceURL=InlineRequire.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
new file mode 100644
index 000000000000..b196f598b6d6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19
+//# sourceURL=ToDoList.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
new file mode 100644
index 000000000000..1122f6ab69e3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+exports.ThemeContext = void 0;
+
+var _react = require("react");
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
+//# sourceURL=useTheme.js
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/useTheme.js
new file mode 100644
index 000000000000..bc8ac51cc6bf
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/useTheme.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
new file mode 100644
index 000000000000..3a65b3709d26
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -0,0 +1,287 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+describe('parseHookNames', () => {
+  let fetchMock;
+  let inspectHooks;
+  let parseHookNames;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    jest.mock('source-map-support', () => {
+      console.trace('source-map-support');
+    });
+
+    const {
+      overrideFeatureFlags,
+    } = require('react-devtools-shared/src/__tests__/utils');
+    overrideFeatureFlags({enableHookNameParsing: true});
+
+    fetchMock = require('jest-fetch-mock');
+    fetchMock.enableMocks();
+
+    inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
+      .inspectHooks;
+    parseHookNames = require('../parseHookNames').default;
+
+    // Jest (jest-runner?) configures Errors to automatically account for source maps.
+    // This changes behavior between our tests and the browser.
+    // To "fix" this, clear the prepareStackTrace() method on the Error object.
+    delete Error.prepareStackTrace;
+
+    fetchMock.mockIf(/.+$/, request => {
+      const {resolve} = require('path');
+      const url = request.url;
+      if (url.endsWith('js.map')) {
+        // Source maps are relative URLs (e.g. "path/to/Exmaple.js" specifies "Exmaple.js.map").
+        const sourceMapURL = resolve(
+          __dirname,
+          '__source__',
+          '__compiled__',
+          'external',
+          url,
+        );
+        return Promise.resolve(requireText(sourceMapURL, 'utf8'));
+      } else {
+        return Promise.resolve(requireText(url, 'utf8'));
+      }
+    });
+
+    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
+    global.chrome = {
+      extension: {
+        getURL: jest.fn((...args) => {
+          const {join} = require('path');
+          return join(
+            __dirname,
+            '..',
+            '..',
+            'node_modules',
+            'source-map',
+            'lib',
+            'mappings.wasm',
+          );
+        }),
+      },
+    };
+  });
+
+  afterEach(() => {
+    fetch.resetMocks();
+  });
+
+  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 {readFileSync} = require('fs');
+    return readFileSync(path, encoding);
+  }
+
+  async function getHookNamesForComponent(Component, props = {}) {
+    const hooksTree = inspectHooks(Component, props, undefined, true);
+    const hookNames = await parseHookNames(hooksTree);
+    return hookNames;
+  }
+
+  it('should parse names for useState()', async () => {
+    const React = require('react');
+    const {useState} = React;
+    function Component(props) {
+      const [foo] = useState(true);
+      const bar = useState(true);
+      const [baz] = React.useState(true);
+      return `${foo}-${bar}-${baz}`;
+    }
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
+  });
+
+  it('should parse names for useReducer()', async () => {
+    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}`;
+    }
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
+  });
+
+  it('should return null for hooks without names like useEffect', async () => {
+    const React = require('react');
+    const {useEffect} = React;
+    function Component(props) {
+      useEffect(() => {});
+      React.useLayoutEffect(() => () => {});
+      return null;
+    }
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, []); // No hooks with names
+  });
+
+  it('should parse names for custom hooks', async () => {
+    const {useDebugValue, useState} = require('react');
+    function useCustomHookOne() {
+      // DebugValue hook should not appear in log.
+      useDebugValue('example');
+      return true;
+    }
+    function useCustomHookTwo() {
+      const [baz, setBaz] = useState(true);
+      return [baz, setBaz];
+    }
+    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}`;
+    }
+
+    const hookNames = await getHookNamesForComponent(Component);
+    expectHookNamesToEqual(hookNames, [
+      'foo',
+      null, // Custom hooks can have names, but not when using destructuring.
+      'baz',
+    ]);
+  });
+
+  it('should return null for custom hooks without explicit names', async () => {
+    const {useDebugValue} = require('react');
+    function useCustomHookOne() {
+      // DebugValue hook should not appear in log.
+      useDebugValue('example');
+    }
+    function useCustomHookTwo() {
+      // DebugValue hook should not appear in log.
+      useDebugValue('example');
+      return [true];
+    }
+    function Component(props) {
+      useCustomHookOne();
+      const [bar] = useCustomHookTwo();
+      return bar;
+    }
+
+    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.
+    ]);
+  });
+
+  describe('inline and external source maps', () => {
+    it('should work for simple components', async () => {
+      async function test(path) {
+        const Component = require(path).Component;
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState
+        ]);
+      }
+
+      await test('./__source__/Example'); // original source (uncompiled)
+      await test('./__source__/__compiled__/inline/Example'); // inline source map
+      await test('./__source__/__compiled__/external/Example'); // external source map
+    });
+
+    it('should work with more complex files and components', async () => {
+      async function test(path) {
+        const components = 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 test('./__source__/ToDoList'); // original source (uncompiled)
+      await test('./__source__/__compiled__/inline/ToDoList'); // inline source map
+      await test('./__source__/__compiled__/external/ToDoList'); // external source map
+    });
+
+    it('should work for custom hook', async () => {
+      async function test(path) {
+        const Component = require(path).Component;
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'isDarkMode', // useIsDarkMode()
+          'isDarkMode', // useIsDarkMode -> useState()
+        ]);
+      }
+
+      await test('./__source__/ComponentWithCustomHook'); // original source (uncompiled)
+      await test('./__source__/__compiled__/inline/ComponentWithCustomHook'); // inline source map
+      await test('./__source__/__compiled__/external/ComponentWithCustomHook'); // external source map
+    });
+
+    it('should work for external hooks', async () => {
+      async function test(path) {
+        const Component = require(path).Component;
+        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 test(
+        './__source__/__compiled__/inline/ComponentWithExternalCustomHooks',
+      ); // inline source map
+      await test(
+        './__source__/__compiled__/external/ComponentWithExternalCustomHooks',
+      ); // external 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).
+    xit('should work for inline requires', async () => {
+      async function test(path) {
+        const Component = require(path).Component;
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+      }
+
+      await test('./__source__/InlineRequire'); // original source (uncompiled)
+      await test('./__source__/__compiled__/inline/InlineRequire'); // inline source map
+      await test('./__source__/__compiled__/external/InlineRequire'); // external source map
+    });
+  });
+});
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
new file mode 100644
index 000000000000..590cd36cc63c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -0,0 +1,76 @@
+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 sourceDir = resolve(__dirname, '__source__');
+const buildRoot = resolve(sourceDir, '__compiled__');
+const externalDir = resolve(buildRoot, 'external');
+const inlineDir = resolve(buildRoot, 'inline');
+
+// Remove previous builds
+emptyDirSync(buildRoot);
+mkdirSync(externalDir);
+mkdirSync(inlineDir);
+
+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` +
+      `\n//# sourceURL=${fileName}`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalDir, `${fileName}.map`),
+    JSON.stringify(sourceMap),
+    'utf8',
+  );
+
+  // Generate compiled output with external inline base64 source maps
+  writeFileSync(
+    resolve(inlineDir, fileName),
+    transformed.code +
+      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
+      btoa(JSON.stringify(sourceMap)) +
+      `\n//# sourceURL=${fileName}`,
+    'utf8',
+  );
+}
+
+// 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);
+  }
+});
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
new file mode 100644
index 000000000000..cc976bbd198a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -0,0 +1,366 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 traverse, {NodePath, Node} from '@babel/traverse';
+import {File} from '@babel/types';
+
+import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
+
+export type SourceConsumer = any;
+
+export type SourceFileASTWithHookDetails = {
+  sourceFileAST: File,
+  line: number,
+  source: string,
+};
+
+export type SourceMap = {|
+  mappings: string,
+  names: Array<string>,
+  sources: Array<string>,
+  sourcesContent: Array<string>,
+  version: number,
+|};
+
+const AST_NODE_TYPES = Object.freeze({
+  CALL_EXPRESSION: 'CallExpression',
+  MEMBER_EXPRESSION: 'MemberExpression',
+  ARRAY_PATTERN: 'ArrayPattern',
+  IDENTIFIER: 'Identifier',
+  NUMERIC_LITERAL: 'NumericLiteral',
+});
+
+// Check if line number obtained from source map and the line number in hook node match
+function checkNodeLocation(path: NodePath, line: number): boolean {
+  const {start, end} = path.node.loc;
+  return line >= start.line && line <= end.line;
+}
+
+// Checks whether hookNode is a member of targetHookNode
+function filterMemberNodesOfTargetHook(
+  targetHookNode: NodePath,
+  hookNode: NodePath,
+): boolean {
+  const targetHookName = targetHookNode.node.id.name;
+  return (
+    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,
+): string | null {
+  const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST);
+
+  const potentialReactHookASTNode = hooksFromAST.find(node => {
+    const nodeLocationCheck = checkNodeLocation(
+      node,
+      ((originalSourceLineNumber: any): number),
+    );
+    const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
+    return nodeLocationCheck && hookDeclaractionCheck;
+  });
+
+  if (!potentialReactHookASTNode) {
+    return null;
+  }
+
+  // nodesAssociatedWithReactHookASTNode could directly be used to obtain the hook variable name
+  // depending on the type of potentialReactHookASTNode
+  try {
+    const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes(
+      potentialReactHookASTNode,
+      hooksFromAST,
+      originalSourceCode,
+    );
+
+    return getHookNameFromNode(
+      hook,
+      nodesAssociatedWithReactHookASTNode,
+      potentialReactHookASTNode,
+    );
+  } 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;
+
+    case AST_NODE_TYPES.IDENTIFIER:
+      return hook.node.id.name;
+
+    default:
+      throw new Error(`Invalid node type: ${nodeType}`);
+  }
+}
+
+function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
+  const potentialHooksFound: NodePath[] = [];
+  traverse(sourceAST, {
+    enter(path) {
+      if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {
+        potentialHooksFound.push(path);
+      }
+    },
+  });
+  return potentialHooksFound;
+}
+
+// Check if 'path' contains declaration of the form const X = useState(0);
+function isConfirmedHookDeclaration(path: NodePath): boolean {
+  const node = path.node.init;
+  if (node.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
+    return false;
+  }
+  const callee = node.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);
+}
+
+// Determines whether incoming hook is a primitive hook that gets assigned to variables.
+export function isNonDeclarativePrimitiveHook(hook: HooksNode) {
+  return ['Effect', 'ImperativeHandle', 'LayoutEffect', 'DebugValue'].includes(
+    hook.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 decalration 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 isStateOrReducerHook(path: NodePath): boolean {
+  const callee = path.node.init.callee;
+  return (
+    isReactFunction(callee, 'useState') || isReactFunction(callee, 'useReducer')
+  );
+}
+
+// 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 && !isStateOrReducerHook(hookNode))
+  ) {
+    return true;
+  }
+  return false;
+}
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 73924cd85a46..32efad807e5a 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -12,6 +12,7 @@ import {
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
+import parseHookNames from './parseHookNames';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -214,6 +215,7 @@ function createPanelIfReactLoaded() {
               browserTheme: getBrowserTheme(),
               componentsPortalContainer,
               enabledInspectedElementContextMenu: true,
+              loadHookNamesFunction: parseHookNames,
               overrideTab,
               profilerPortalContainer,
               showTabBar: false,
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
new file mode 100644
index 000000000000..f2d74dc29294
--- /dev/null
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -0,0 +1,501 @@
+/* global chrome */
+
+/**
+ * Copyright (c) Facebook, Inc. and 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 {parse} from '@babel/parser';
+import {enableHookNameParsing} from 'react-devtools-feature-flags';
+import LRU from 'lru-cache';
+import {SourceMapConsumer} from 'source-map';
+import {getHookName, isNonDeclarativePrimitiveHook} from './astUtils';
+import {areSourceMapsAppliedToErrors} from './ErrorTester';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+
+import type {
+  HooksNode,
+  HookSource,
+  HooksTree,
+} from 'react-debug-tools/src/ReactDebugHooks';
+import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
+import type {Thenable} from 'shared/ReactTypes';
+import type {SourceConsumer, SourceMap} from './astUtils';
+
+const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
+const ABSOLUTE_URL_REGEX = /^https?:\/\//i;
+const MAX_SOURCE_LENGTH = 100_000_000;
+
+type AST = mixed;
+
+type HookSourceData = {|
+  // Generated by react-debug-tools.
+  hookSource: HookSource,
+
+  // 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,
+
+  // Compiled code (React components or custom hooks) containing primitive hook calls.
+  runtimeSourceCode: string | null,
+
+  // APIs from source-map for parsing source maps (if detected).
+  sourceConsumer: SourceConsumer | null,
+
+  // External URL of source map.
+  // Sources without source maps (or with inline source maps) won't have this.
+  sourceMapURL: string | null,
+
+  // Parsed source map object.
+  sourceMapContents: SourceMap | null,
+|};
+
+type CachedMetadata = {|
+  originalSourceAST: AST,
+  originalSourceCode: string,
+  sourceConsumer: SourceConsumer | null,
+|};
+
+// On large trees, encoding takes significant time.
+// Try to reuse the already encoded strings.
+const fileNameToMetadataCache: LRUCache<string, CachedMetadata> = new LRU({
+  max: 50,
+  dispose: (fileName: string, metadata: CachedMetadata) => {
+    if (__DEBUG__) {
+      console.log(
+        'fileNameToHookSourceData.dispose() Evicting cached metadata for "' +
+          fileName +
+          '"',
+      );
+    }
+
+    const sourceConsumer = metadata.sourceConsumer;
+    if (sourceConsumer !== null) {
+      sourceConsumer.destroy();
+    }
+  },
+});
+
+export default async function parseHookNames(
+  hooksTree: HooksTree,
+): Thenable<HookNames | null> {
+  if (!enableHookNameParsing) {
+    return Promise.resolve(null);
+  }
+
+  const hooksList: Array<HooksNode> = [];
+  flattenHooksList(hooksTree, hooksList);
+
+  if (__DEBUG__) {
+    console.log('parseHookNames() hooksList:', hooksList);
+  }
+
+  // Gather the unique set of source files to load for the built-in hooks.
+  const fileNameToHookSourceData: Map<string, HookSourceData> = 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 fileName = hookSource.fileName;
+    if (fileName == null) {
+      throw Error('Hook source code location not found.');
+    } else {
+      if (!fileNameToHookSourceData.has(fileName)) {
+        const hookSourceData: HookSourceData = {
+          hookSource,
+          originalSourceAST: null,
+          originalSourceCode: null,
+          runtimeSourceCode: null,
+          sourceConsumer: null,
+          sourceMapURL: null,
+          sourceMapContents: null,
+        };
+
+        // If we've already loaded source/source map info for this file,
+        // we can skip reloading it (and more importantly, re-parsing it).
+        const metadata = fileNameToMetadataCache.get(fileName);
+        if (metadata != null) {
+          if (__DEBUG__) {
+            console.groupCollapsed(
+              'parseHookNames() Found cached metadata for file "' +
+                fileName +
+                '"',
+            );
+            console.log(metadata);
+            console.groupEnd();
+          }
+
+          hookSourceData.originalSourceAST = metadata.originalSourceAST;
+          hookSourceData.originalSourceCode = metadata.originalSourceCode;
+          hookSourceData.sourceConsumer = metadata.sourceConsumer;
+        }
+
+        fileNameToHookSourceData.set(fileName, hookSourceData);
+      }
+    }
+  }
+
+  return loadSourceFiles(fileNameToHookSourceData)
+    .then(() => extractAndLoadSourceMaps(fileNameToHookSourceData))
+    .then(() => parseSourceAST(fileNameToHookSourceData))
+    .then(() => updateLruCache(fileNameToHookSourceData))
+    .then(() => findHookNames(hooksList, fileNameToHookSourceData));
+}
+
+function decodeBase64String(encoded: string): Object {
+  if (typeof atob === 'function') {
+    return atob(encoded);
+  } else if (
+    typeof Buffer !== 'undefined' &&
+    Buffer !== null &&
+    typeof Buffer.from === 'function'
+  ) {
+    return Buffer.from(encoded, 'base64');
+  } else {
+    throw Error('Cannot decode base64 string');
+  }
+}
+
+function extractAndLoadSourceMaps(
+  fileNameToHookSourceData: Map<string, HookSourceData>,
+): Promise<*> {
+  const promises = [];
+  fileNameToHookSourceData.forEach(hookSourceData => {
+    if (hookSourceData.originalSourceAST !== null) {
+      // Use cached metadata.
+      return;
+    }
+
+    const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
+    const sourceMappingURLs = runtimeSourceCode.match(SOURCE_MAP_REGEX);
+    if (sourceMappingURLs == null) {
+      // Maybe file has not been transformed; we'll try to parse it as-is in parseSourceAST().
+
+      if (__DEBUG__) {
+        console.log('extractAndLoadSourceMaps() No source map found');
+      }
+    } else {
+      for (let i = 0; i < sourceMappingURLs.length; i++) {
+        const sourceMappingURL = sourceMappingURLs[i];
+        const index = sourceMappingURL.indexOf('base64,');
+        if (index >= 0) {
+          // 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 = decodeBase64String(trimmed);
+          const parsed = JSON.parse(decoded);
+
+          if (__DEBUG__) {
+            console.groupCollapsed(
+              'extractAndLoadSourceMaps() Inline source map',
+            );
+            console.log(parsed);
+            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"
+          const fileName = ((hookSourceData.hookSource.fileName: any): string);
+          const match = parsed.sources.find(
+            source =>
+              source === 'Inline Babel script' || fileName.includes(source),
+          );
+          if (match) {
+            hookSourceData.sourceMapContents = parsed;
+            break;
+          }
+        } else {
+          if (sourceMappingURLs.length > 1) {
+            console.warn(
+              'More than one external source map detected in the source file',
+            );
+          }
+
+          let url = sourceMappingURLs[0].split('=')[1];
+          if (ABSOLUTE_URL_REGEX.test(url)) {
+            const baseURL = url.slice(0, url.lastIndexOf('/'));
+            url = `${baseURL}/${url}`;
+
+            if (!isValidUrl(url)) {
+              throw new Error(`Invalid source map URL "${url}"`);
+            }
+          }
+
+          hookSourceData.sourceMapURL = url;
+
+          if (__DEBUG__) {
+            console.log(
+              'extractAndLoadSourceMaps() External source map "' + url + '"',
+            );
+          }
+
+          promises.push(
+            fetchFile(url).then(sourceMapContents => {
+              hookSourceData.sourceMapContents = JSON.parse(sourceMapContents);
+            }),
+          );
+          break;
+        }
+      }
+    }
+  });
+  return Promise.all(promises);
+}
+
+function fetchFile(url: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    fetch(url).then(response => {
+      if (response.ok) {
+        response
+          .text()
+          .then(text => {
+            resolve(text);
+          })
+          .catch(error => {
+            reject(null);
+          });
+      } else {
+        reject(null);
+      }
+    });
+  });
+}
+
+function findHookNames(
+  hooksList: Array<HooksNode>,
+  fileNameToHookSourceData: Map<string, HookSourceData>,
+): HookNames {
+  const map: HookNames = new Map();
+
+  hooksList.map(hook => {
+    if (isNonDeclarativePrimitiveHook(hook)) {
+      if (__DEBUG__) {
+        console.log('findHookNames() Non declarative primitive hook');
+      }
+
+      // Not all hooks have names (e.g. useEffect or useLayoutEffect)
+      return null;
+    }
+
+    // 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 hookSourceData = fileNameToHookSourceData.get(fileName);
+    if (!hookSourceData) {
+      return null; // Should not be reachable.
+    }
+
+    const {lineNumber, columnNumber} = hookSource;
+    if (!lineNumber || !columnNumber) {
+      return null; // Should not be reachable.
+    }
+
+    const sourceConsumer = hookSourceData.sourceConsumer;
+
+    let originalSourceLineNumber;
+    if (areSourceMapsAppliedToErrors() || !sourceConsumer) {
+      // 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.
+      originalSourceLineNumber = lineNumber;
+    } else {
+      originalSourceLineNumber = sourceConsumer.originalPositionFor({
+        line: lineNumber,
+        column: columnNumber,
+      }).line;
+    }
+
+    if (__DEBUG__) {
+      console.log(
+        'findHookNames() mapped line number',
+        lineNumber,
+        'to',
+        originalSourceLineNumber,
+      );
+    }
+
+    if (originalSourceLineNumber === null) {
+      return null;
+    }
+
+    const name = getHookName(
+      hook,
+      hookSourceData.originalSourceAST,
+      ((hookSourceData.originalSourceCode: any): string),
+      ((originalSourceLineNumber: any): number),
+    );
+
+    if (__DEBUG__) {
+      console.log('findHookNames() Found name "' + (name || '-') + '"');
+    }
+
+    map.set(hook, name);
+  });
+
+  return map;
+}
+
+function isValidUrl(possibleURL: string): boolean {
+  try {
+    // eslint-disable-next-line no-new
+    new URL(possibleURL);
+  } catch (_) {
+    return false;
+  }
+  return true;
+}
+
+function loadSourceFiles(
+  fileNameToHookSourceData: Map<string, HookSourceData>,
+): Promise<*> {
+  const promises = [];
+  fileNameToHookSourceData.forEach((hookSourceData, fileName) => {
+    promises.push(
+      fetchFile(fileName).then(runtimeSourceCode => {
+        if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {
+          throw Error('Source code too large to parse');
+        }
+
+        if (__DEBUG__) {
+          console.groupCollapsed(
+            'loadSourceFiles() fileName "' + fileName + '"',
+          );
+          console.log(runtimeSourceCode);
+          console.groupEnd();
+        }
+
+        hookSourceData.runtimeSourceCode = runtimeSourceCode;
+      }),
+    );
+  });
+  return Promise.all(promises);
+}
+
+async function parseSourceAST(
+  fileNameToHookSourceData: Map<string, HookSourceData>,
+): Promise<*> {
+  // SourceMapConsumer.initialize() does nothing when running in Node (aka Jest)
+  // because the wasm file is automatically read from the file system
+  // so we can avoid triggering a warning message about this.
+  if (!__TEST__) {
+    if (__DEBUG__) {
+      console.log('parseSourceAST() Initializing source-map library ...');
+    }
+
+    // $FlowFixMe
+    const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
+
+    SourceMapConsumer.initialize({'lib/mappings.wasm': wasmMappingsURL});
+  }
+
+  const promises = [];
+  fileNameToHookSourceData.forEach(hookSourceData => {
+    if (hookSourceData.originalSourceAST !== null) {
+      // Use cached metadata.
+      return;
+    }
+
+    const {runtimeSourceCode, sourceMapContents} = hookSourceData;
+    if (sourceMapContents !== null) {
+      // Parse and extract the AST from the source map.
+      promises.push(
+        SourceMapConsumer.with(
+          sourceMapContents,
+          null,
+          (sourceConsumer: SourceConsumer) => {
+            hookSourceData.sourceConsumer = sourceConsumer;
+
+            // Now that the source map has been loaded,
+            // extract the original source for later.
+            const source = sourceMapContents.sources[0];
+            const originalSourceCode = sourceConsumer.sourceContentFor(
+              source,
+              true,
+            );
+
+            if (__DEBUG__) {
+              console.groupCollapsed(
+                'parseSourceAST() Extracted source code from source map',
+              );
+              console.log(originalSourceCode);
+              console.groupEnd();
+            }
+
+            hookSourceData.originalSourceCode = originalSourceCode;
+
+            // TODO Parsing should ideally be done off of the main thread.
+            hookSourceData.originalSourceAST = parse(originalSourceCode, {
+              sourceType: 'unambiguous',
+              plugins: ['jsx', 'typescript'],
+            });
+          },
+        ),
+      );
+    } else {
+      // There's no source map to parse here so we can just parse the original source itself.
+      hookSourceData.originalSourceCode = runtimeSourceCode;
+
+      // TODO Parsing should ideally be done off of the main thread.
+      hookSourceData.originalSourceAST = parse(runtimeSourceCode, {
+        sourceType: 'unambiguous',
+        plugins: ['jsx', 'typescript'],
+      });
+    }
+  });
+  return Promise.all(promises);
+}
+
+function flattenHooksList(
+  hooksTree: HooksTree,
+  hooksList: Array<HooksNode>,
+): void {
+  for (let i = 0; i < hooksTree.length; i++) {
+    const hook = hooksTree[i];
+    hooksList.push(hook);
+    if (hook.subHooks.length > 0) {
+      flattenHooksList(hook.subHooks, hooksList);
+    }
+  }
+}
+
+function updateLruCache(
+  fileNameToHookSourceData: Map<string, HookSourceData>,
+): Promise<*> {
+  fileNameToHookSourceData.forEach(
+    ({originalSourceAST, originalSourceCode, sourceConsumer}, fileName) => {
+      // Only set once to avoid triggering eviction/cleanup code.
+      if (!fileNameToMetadataCache.has(fileName)) {
+        if (__DEBUG__) {
+          console.log('updateLruCache() Caching metada for "' + fileName + '"');
+        }
+
+        fileNameToMetadataCache.set(fileName, {
+          originalSourceAST,
+          originalSourceCode: ((originalSourceCode: any): string),
+          sourceConsumer,
+        });
+      }
+    },
+  );
+  return Promise.resolve();
+}
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index 6f63b44e1bab..6f5a1d386093 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -32,6 +32,10 @@ module.exports = {
   node: {
     // Don't define a polyfill on window.setImmediate
     setImmediate: false,
+
+    // source-maps package has a dependency on 'fs'
+    // but this build won't trigger that code path
+    fs: 'empty',
   },
   resolve: {
     alias: {
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index df813e82bcc9..94a12ebdd111 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -37,6 +37,10 @@ module.exports = {
   node: {
     // Don't define a polyfill on window.setImmediate
     setImmediate: false,
+
+    // source-maps package has a dependency on 'fs'
+    // but this build won't trigger that code path
+    fs: 'empty',
   },
   resolve: {
     alias: {
@@ -65,6 +69,17 @@ module.exports = {
     }),
   ],
   module: {
+    defaultRules: [
+      {
+        type: 'javascript/auto',
+        resolve: {},
+      },
+      {
+        test: /\.json$/i,
+        type: 'json',
+      },
+    ],
+
     rules: [
       {
         test: /\.js$/,
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 30481673ad0c..7011e7151c76 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -37,6 +37,11 @@ module.exports = {
     'react-is': 'react-is',
     scheduler: 'scheduler',
   },
+  node: {
+    // source-maps package has a dependency on 'fs'
+    // but this build won't trigger that code path
+    fs: 'empty',
+  },
   resolve: {
     alias: {
       'react-devtools-feature-flags': resolveFeatureFlags('inline'),
diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index 09551aadddba..808d8d5d343e 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -7,7 +7,9 @@
     "react-dom-15": "npm:react-dom@^15"
   },
   "dependencies": {
+    "@babel/parser": "^7.12.5",
     "@babel/runtime": "^7.11.2",
+    "@babel/traverse": "^7.12.5",
     "@reach/menu-button": "^0.1.17",
     "@reach/tooltip": "^0.2.2",
     "clipboard-js": "^0.3.6",
diff --git a/packages/react-devtools-shared/src/__tests__/hookSerializer.js b/packages/react-devtools-shared/src/__tests__/hookSerializer.js
new file mode 100644
index 000000000000..2bf84086edb7
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/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.substring(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__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 5bec9a74f62d..4eb4b76a07e7 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -25,6 +25,7 @@ describe('InspectedElement', () => {
   let BridgeContext;
   let InspectedElementContext;
   let InspectedElementContextController;
+  let SettingsContextController;
   let StoreContext;
   let TreeContextController;
 
@@ -57,6 +58,8 @@ describe('InspectedElement', () => {
       .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')
@@ -79,15 +82,17 @@ describe('InspectedElement', () => {
   }) => (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
-        <TreeContextController
-          defaultSelectedElementID={defaultSelectedElementID}
-          defaultSelectedElementIndex={defaultSelectedElementIndex}>
-          <React.Suspense fallback="Loading...">
-            <InspectedElementContextController>
-              {children}
-            </InspectedElementContextController>
-          </React.Suspense>
-        </TreeContextController>
+        <SettingsContextController>
+          <TreeContextController
+            defaultSelectedElementID={defaultSelectedElementID}
+            defaultSelectedElementIndex={defaultSelectedElementIndex}>
+            <React.Suspense fallback="Loading...">
+              <InspectedElementContextController>
+                {children}
+              </InspectedElementContextController>
+            </React.Suspense>
+          </TreeContextController>
+        </SettingsContextController>
       </StoreContext.Provider>
     </BridgeContext.Provider>
   );
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index d3e87c7110a0..4721a29722f0 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -10,6 +10,7 @@ export function test(maybeInspectedElement) {
   const hasOwnProperty = Object.prototype.hasOwnProperty.bind(
     maybeInspectedElement,
   );
+
   return (
     hasOwnProperty('canEditFunctionProps') &&
     hasOwnProperty('canEditHooks') &&
diff --git a/packages/react-devtools-shared/src/__tests__/setupEnv.js b/packages/react-devtools-shared/src/__tests__/setupEnv.js
index 8b18798e6f7a..7bbb69362841 100644
--- a/packages/react-devtools-shared/src/__tests__/setupEnv.js
+++ b/packages/react-devtools-shared/src/__tests__/setupEnv.js
@@ -7,3 +7,4 @@ if (!global.hasOwnProperty('localStorage')) {
 
 // Mimic the global we set with Webpack's DefinePlugin
 global.__DEV__ = process.env.NODE_ENV !== 'production';
+global.__TEST__ = true;
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index b244c7e0cf17..c2db1ae546f6 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -122,6 +122,16 @@ env.beforeEach(() => {
   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;
 });
 env.afterEach(() => {
   delete global.__REACT_DEVTOOLS_GLOBAL_HOOK__;
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 74fcebc44185..10a96598d573 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -268,3 +268,13 @@ export function withErrorsOrWarningsIgnored<T: void | Promise<void>>(
     }
   }
 }
+
+export function overrideFeatureFlags(overrideFlags) {
+  jest.mock('react-devtools-feature-flags', () => {
+    const actualFlags = jest.requireActual('react-devtools-feature-flags');
+    return {
+      ...actualFlags,
+      ...overrideFlags,
+    };
+  });
+}
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index d9aa2672d469..d56819a8ba0b 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -80,7 +80,10 @@ import {
   MEMO_SYMBOL_STRING,
 } from './ReactSymbols';
 import {format} from './utils';
-import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
+import {
+  enableHookNameParsing,
+  enableProfilerChangedHookIndices,
+} from 'react-devtools-feature-flags';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
 
@@ -3092,6 +3095,7 @@ export function attach(
         hooks = inspectHooksOfFiber(
           fiber,
           (renderer.currentDispatcherRef: any),
+          enableHookNameParsing, // Include source location info for hooks
         );
       } finally {
         // Restore original console functionality.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index b9d3ba23e56e..e310e26f43d2 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -13,5 +13,6 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const enableHookNameParsing = false;
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = 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
index 104cf263091a..c6c319cd6d49 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -13,6 +13,7 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const enableHookNameParsing = true;
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index 4d1b1472bba6..7201754f4f3d 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -13,6 +13,7 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const enableHookNameParsing = false;
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
 
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index a5449612c7ae..10750fa7d773 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -23,6 +23,9 @@ export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
 export const SESSION_STORAGE_LAST_SELECTION_KEY =
   'React::DevTools::lastSelection';
 
+export const LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY =
+  'React::DevTools::parseHookNames';
+
 export const SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
   'React::DevTools::recordChangeDescriptions';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index fffd0aec4cbc..8239a765f90b 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -26,6 +26,7 @@ export type IconType =
   | 'log-data'
   | 'more'
   | 'next'
+  | 'parse-hook-names'
   | 'previous'
   | 'record'
   | 'reload'
@@ -92,6 +93,9 @@ export default function ButtonIcon({className = '', type}: Props) {
     case 'next':
       pathData = PATH_NEXT;
       break;
+    case 'parse-hook-names':
+      pathData = PATH_PARSE_HOOK_NAMES;
+      break;
     case 'previous':
       pathData = PATH_PREVIOUS;
       break;
@@ -141,7 +145,11 @@ export default function ButtonIcon({className = '', type}: Props) {
       height="24"
       viewBox="0 0 24 24">
       <path d="M0 0h24v24H0z" fill="none" />
-      <path fill="currentColor" d={pathData} />
+      {typeof pathData === 'string' ? (
+        <path fill="currentColor" d={pathData} />
+      ) : (
+        pathData
+      )}
     </svg>
   );
 }
@@ -197,6 +205,15 @@ const PATH_MORE = `
 
 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';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
index aad4848426aa..25352ee39a53 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -26,7 +26,7 @@ export default function Badge({
   type,
   children,
 }: Props) {
-  if (hocDisplayNames === null) {
+  if (hocDisplayNames === null || hocDisplayNames.length === 0) {
     return null;
   }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.css b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
index f709913919b0..5624f2348934 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.css
@@ -68,4 +68,5 @@
   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/InspectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
index 9e6872928334..b6ad3b9983f2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
@@ -64,5 +64,5 @@
   padding: 0.25rem;
   color: var(--color-dimmer);
   font-style: italic;
+  border-left: 1px solid 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
index ea976767c02f..d0774d95f961 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -39,7 +39,12 @@ export default function InspectedElementWrapper(_: Props) {
   const store = useContext(StoreContext);
   const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
-  const {inspectedElement} = useContext(InspectedElementContext);
+  const {
+    hookNames,
+    inspectedElement,
+    parseHookNames,
+    toggleParseHookNames,
+  } = useContext(InspectedElementContext);
 
   const element =
     inspectedElementID !== null
@@ -268,7 +273,10 @@ export default function InspectedElementWrapper(_: Props) {
             inspectedElementID /* Force reset when selected Element changes */
           }
           element={element}
+          hookNames={hookNames}
           inspectedElement={inspectedElement}
+          parseHookNames={parseHookNames}
+          toggleParseHookNames={toggleParseHookNames}
         />
       )}
     </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
index 396023b352cf..d705947ff4da 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -18,13 +18,19 @@ import {
   useMemo,
   useState,
 } from 'react';
+import {enableHookNameParsing} from 'react-devtools-feature-flags';
 import {TreeStateContext} from './TreeContext';
 import {BridgeContext, StoreContext} from '../context';
 import {
   checkForUpdate,
   inspectElement,
 } from 'react-devtools-shared/src/inspectedElementCache';
+import {loadHookNames} from 'react-devtools-shared/src/hookNamesCache';
+import {ElementTypeFunction} from 'react-devtools-shared/src/types';
+import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext';
+import {SettingsContext} from '../Settings/SettingsContext';
 
+import type {HookNames} from 'react-devtools-shared/src/types';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   Element,
@@ -33,10 +39,14 @@ import type {
 
 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 = createContext<Context>(
@@ -51,8 +61,10 @@ export type Props = {|
 
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
+  const loadHookNamesFunction = useContext(LoadHookNamesFunctionContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const {parseHookNames: parseHookNamesByDefault} = useContext(SettingsContext);
 
   const refresh = useCacheRefresh();
 
@@ -68,6 +80,13 @@ export function InspectedElementContextController({children}: Props) {
     path: null,
   });
 
+  // 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,
+  );
+
   const element =
     selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
 
@@ -79,14 +98,41 @@ export function InspectedElementContextController({children}: Props) {
       element,
       path: null,
     });
+
+    setParseHookNames(parseHookNamesByDefault);
   }
 
   // Don't load a stale element from the backend; it wastes bridge bandwidth.
   let inspectedElement = null;
+  let hookNames: HookNames | null = null;
   if (!elementHasChanged && element !== null) {
     inspectedElement = inspectElement(element, state.path, store, bridge);
+
+    if (enableHookNameParsing) {
+      if (parseHookNames) {
+        if (
+          inspectedElement !== null &&
+          inspectedElement.type === ElementTypeFunction &&
+          inspectedElement.hooks !== null &&
+          loadHookNamesFunction !== null
+        ) {
+          hookNames = loadHookNames(
+            element,
+            inspectedElement.hooks,
+            loadHookNamesFunction,
+          );
+        }
+      }
+    }
   }
 
+  const toggleParseHookNames: ToggleParseHookNames = useCallback<ToggleParseHookNames>(() => {
+    startTransition(() => {
+      setParseHookNames(value => !value);
+      refresh();
+    });
+  }, [setParseHookNames]);
+
   const inspectPaths: InspectPathFunction = useCallback<InspectPathFunction>(
     (path: Path) => {
       startTransition(() => {
@@ -125,6 +171,7 @@ export function InspectedElementContextController({children}: Props) {
     }
   }, [
     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,
@@ -133,10 +180,19 @@ export function InspectedElementContextController({children}: Props) {
 
   const value = useMemo<Context>(
     () => ({
+      hookNames,
       inspectedElement,
       inspectPaths,
+      parseHookNames,
+      toggleParseHookNames,
     }),
-    [inspectedElement, inspectPaths],
+    [
+      hookNames,
+      inspectedElement,
+      inspectPaths,
+      parseHookNames,
+      toggleParseHookNames,
+    ],
   );
 
   return (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
index 612fd7eb2840..da08989a726c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.css
@@ -1,3 +1,3 @@
 .Wrapper {
-  border-left: 1px solid var(--color-border);
+  height: 100%;
 }
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
index e5099abb348e..a338a88bf83f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -77,4 +77,8 @@
   margin-right: 0.25rem;
   border-radius: 0.125rem;
   padding: 0.125rem 0.25rem;
+}
+
+.HookName {
+  color: var(--color-component-name);
 }
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 7ed52905691b..910e94098cac 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -13,6 +13,7 @@ import {useCallback, useContext, useRef, 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';
@@ -20,28 +21,49 @@ import Store from '../../store';
 import styles from './InspectedElementHooksTree.css';
 import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
-import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
+import {
+  enableHookNameParsing,
+  enableProfilerChangedHookIndices,
+} from 'react-devtools-feature-flags';
 
 import type {InspectedElement} from './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/types';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/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) {
   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 handleCopy = () => copy(serializeHooksForCopy(hooks));
 
   if (hooks === null) {
@@ -51,11 +73,25 @@ export function InspectedElementHooksTree({
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
+          {enableHookNameParsing && !parseHookNames && (
+            <Toggle
+              isChecked={parseHookNamesOptimistic}
+              isDisabled={parseHookNamesOptimistic}
+              onChange={handleChange}
+              title={
+                parseHookNames
+                  ? 'Parse hook names'
+                  : 'Parse hook names (may be slow)'
+              }>
+              <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}
@@ -69,6 +105,7 @@ export function InspectedElementHooksTree({
 
 type InnerHooksTreeViewProps = {|
   element: Element,
+  hookNames: HookNames | null,
   hooks: HooksTree,
   id: number,
   inspectedElement: InspectedElement,
@@ -77,6 +114,7 @@ type InnerHooksTreeViewProps = {|
 
 export function InnerHooksTreeView({
   element,
+  hookNames,
   hooks,
   id,
   inspectedElement,
@@ -88,6 +126,7 @@ export function InnerHooksTreeView({
       key={index}
       element={element}
       hook={hooks[index]}
+      hookNames={hookNames}
       id={id}
       inspectedElement={inspectedElement}
       path={path.concat([index])}
@@ -98,12 +137,20 @@ export function InnerHooksTreeView({
 type HookViewProps = {|
   element: Element,
   hook: HooksNode,
+  hookNames: HookNames | null,
   id: number,
   inspectedElement: InspectedElement,
   path: Array<string | number>,
 |};
 
-function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
+function HookView({
+  element,
+  hook,
+  hookNames,
+  id,
+  inspectedElement,
+  path,
+}: HookViewProps) {
   const {
     canEditHooks,
     canEditHooksAndDeletePaths,
@@ -180,6 +227,16 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
   let displayValue;
   let isComplexDisplayValue = false;
 
+  const hookName = hookNames != null ? hookNames.get(hook) : null;
+  const hookDisplayName = hookName ? (
+    <>
+      {name}
+      {!!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)}"`;
@@ -204,6 +261,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
       <InnerHooksTreeView
         element={element}
         hooks={subHooks}
+        hookNames={hookNames}
         id={id}
         inspectedElement={inspectedElement}
         path={path.concat(['subHooks'])}
@@ -219,6 +277,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
         depth={1}
         element={element}
         hookID={hookID}
+        hookName={hookName}
         inspectedElement={inspectedElement}
         name="subHooks"
         path={path.concat(['subHooks'])}
@@ -236,7 +295,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
             <span
               onClick={toggleIsOpen}
               className={name !== '' ? styles.Name : styles.NameAnonymous}>
-              {name || 'Anonymous'}
+              {hookDisplayName || 'Anonymous'}
             </span>
             <span className={styles.Value} onClick={toggleIsOpen}>
               {isOpen || getMetaValueLabel(value)}
@@ -253,6 +312,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
               depth={1}
               element={element}
               hookID={hookID}
+              hookName={hookName}
               inspectedElement={inspectedElement}
               name="DebugValue"
               path={path.concat(['value'])}
@@ -272,7 +332,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
             <span
               onClick={toggleIsOpen}
               className={name !== '' ? styles.Name : styles.NameAnonymous}>
-              {name || 'Anonymous'}
+              {hookDisplayName || 'Anonymous'}
             </span>{' '}
             {/* $FlowFixMe */}
             <span className={styles.Value} onClick={toggleIsOpen}>
@@ -299,6 +359,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
             depth={1}
             element={element}
             hookID={hookID}
+            hookName={hookName}
             inspectedElement={inspectedElement}
             name={name}
             path={path.concat(['value'])}
@@ -320,6 +381,7 @@ function HookView({element, hook, id, inspectedElement, path}: HookViewProps) {
             depth={1}
             element={element}
             hookID={hookID}
+            hookName={hookName}
             inspectedElement={inspectedElement}
             name={name}
             path={[]}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index e7b416591092..8424621fcf16 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -36,19 +36,26 @@ import styles from './InspectedElementView.css';
 
 import type {ContextMenuContextType} from '../context';
 import type {Element, InspectedElement, SerializedElement} from './types';
-import type {ElementType} from 'react-devtools-shared/src/types';
+import type {ElementType, HookNames} from 'react-devtools-shared/src/types';
+import type {ToggleParseHookNames} from './InspectedElementContext';
 
 export type CopyPath = (path: Array<string | number>) => void;
 export type InspectPath = (path: Array<string | number>) => void;
 
 type Props = {|
   element: Element,
+  hookNames: HookNames | null,
   inspectedElement: InspectedElement,
+  parseHookNames: boolean,
+  toggleParseHookNames: ToggleParseHookNames,
 |};
 
 export default function InspectedElementView({
   element,
+  hookNames,
   inspectedElement,
+  parseHookNames,
+  toggleParseHookNames,
 }: Props) {
   const {id} = element;
   const {
@@ -103,8 +110,11 @@ export default function InspectedElementView({
         <InspectedElementHooksTree
           bridge={bridge}
           element={element}
+          hookNames={hookNames}
           inspectedElement={inspectedElement}
+          parseHookNames={parseHookNames}
           store={store}
+          toggleParseHookNames={toggleParseHookNames}
         />
 
         <InspectedElementContextTree
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index dec3e2df9617..bca22c8786c6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -11,6 +11,7 @@
   flex: 0 0 auto;
   cursor: default;
 }
+
 .EditableName {
   color: var(--color-attribute-name);
   flex: 0 0 auto;
@@ -48,4 +49,8 @@
 .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
index 462b1277e277..39ba220efbc1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -43,6 +43,7 @@ type KeyValueProps = {|
   element: Element,
   hidden: boolean,
   hookID?: ?number,
+  hookName?: ?string,
   inspectedElement: InspectedElement,
   isDirectChildOfAnArray?: boolean,
   name: string,
@@ -65,6 +66,7 @@ export default function KeyValue({
   isDirectChildOfAnArray,
   hidden,
   hookID,
+  hookName,
   name,
   path,
   pathRoot,
@@ -202,7 +204,12 @@ export default function KeyValue({
         <DeleteToggle name={name} deletePath={deletePath} path={path} />
       );
     } else {
-      renderedName = <span className={styles.Name}>{name}</span>;
+      renderedName = (
+        <span className={styles.Name}>
+          {name}
+          {!!hookName && <span className={styles.HookName}>({hookName})</span>}
+        </span>
+      );
     }
   } else if (canRenameTheCurrentPath) {
     renderedName = (
@@ -215,7 +222,12 @@ export default function KeyValue({
       />
     );
   } else {
-    renderedName = <span className={styles.Name}>{name}</span>;
+    renderedName = (
+      <span className={styles.Name}>
+        {name}
+        {!!hookName && <span className={styles.HookName}>({hookName})</span>}
+      </span>
+    );
   }
 
   let children = null;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js b/packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js
new file mode 100644
index 000000000000..1874dd7e5a94
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js
@@ -0,0 +1,11 @@
+// @flow
+
+import {createContext} from 'react';
+import type {LoadHookNamesFunction} from '../DevTools';
+
+export type Context = LoadHookNamesFunction | null;
+
+const LoadHookNamesFunctionContext = createContext<Context>(null);
+LoadHookNamesFunctionContext.displayName = 'LoadHookNamesFunctionContext';
+
+export default LoadHookNamesFunctionContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index a7ac1c439799..534e2cc4e282 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -22,6 +22,7 @@ import TabBar from './TabBar';
 import {SettingsContextController} from './Settings/SettingsContext';
 import {TreeContextController} from './Components/TreeContext';
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
+import LoadHookNamesFunctionContext from './Components/LoadHookNamesFunctionContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
@@ -34,15 +35,22 @@ import styles from './DevTools.css';
 
 import './root.css';
 
+import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {HookNames} from 'react-devtools-shared/src/types';
+import type {Thenable} from '../cache';
 
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
+
 export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
 ) => void;
+export type LoadHookNamesFunction = (
+  hooksTree: HooksTree,
+) => Thenable<HookNames>;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
@@ -75,6 +83,11 @@ export type Props = {|
   // but individual tabs (e.g. Components, Profiling) can be rendered into portals within their browser panels.
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
+
+  // 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.
+  loadHookNamesFunction?: ?LoadHookNamesFunction,
 |};
 
 const componentsTab = {
@@ -99,6 +112,7 @@ export default function DevTools({
   componentsPortalContainer,
   defaultTab = 'components',
   enabledInspectedElementContextMenu = false,
+  loadHookNamesFunction,
   overrideTab,
   profilerPortalContainer,
   showTabBar = false,
@@ -180,7 +194,6 @@ export default function DevTools({
       }
     };
   }, [bridge]);
-
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
@@ -191,40 +204,43 @@ export default function DevTools({
               componentsPortalContainer={componentsPortalContainer}
               profilerPortalContainer={profilerPortalContainer}>
               <ViewElementSourceContext.Provider value={viewElementSource}>
-                <TreeContextController>
-                  <ProfilerContextController>
-                    <div className={styles.DevTools} ref={devToolsRef}>
-                      {showTabBar && (
-                        <div className={styles.TabBar}>
-                          <ReactLogo />
-                          <span className={styles.DevToolsVersion}>
-                            {process.env.DEVTOOLS_VERSION}
-                          </span>
-                          <div className={styles.Spacer} />
-                          <TabBar
-                            currentTab={tab}
-                            id="DevTools"
-                            selectTab={setTab}
-                            tabs={tabs}
-                            type="navigation"
+                <LoadHookNamesFunctionContext.Provider
+                  value={loadHookNamesFunction || null}>
+                  <TreeContextController>
+                    <ProfilerContextController>
+                      <div className={styles.DevTools} ref={devToolsRef}>
+                        {showTabBar && (
+                          <div className={styles.TabBar}>
+                            <ReactLogo />
+                            <span className={styles.DevToolsVersion}>
+                              {process.env.DEVTOOLS_VERSION}
+                            </span>
+                            <div className={styles.Spacer} />
+                            <TabBar
+                              currentTab={tab}
+                              id="DevTools"
+                              selectTab={setTab}
+                              tabs={tabs}
+                              type="navigation"
+                            />
+                          </div>
+                        )}
+                        <div
+                          className={styles.TabContent}
+                          hidden={tab !== 'components'}>
+                          <Components
+                            portalContainer={componentsPortalContainer}
                           />
                         </div>
-                      )}
-                      <div
-                        className={styles.TabContent}
-                        hidden={tab !== 'components'}>
-                        <Components
-                          portalContainer={componentsPortalContainer}
-                        />
-                      </div>
-                      <div
-                        className={styles.TabContent}
-                        hidden={tab !== 'profiler'}>
-                        <Profiler portalContainer={profilerPortalContainer} />
+                        <div
+                          className={styles.TabContent}
+                          hidden={tab !== 'profiler'}>
+                          <Profiler portalContainer={profilerPortalContainer} />
+                        </div>
                       </div>
-                    </div>
-                  </ProfilerContextController>
-                </TreeContextController>
+                    </ProfilerContextController>
+                  </TreeContextController>
+                </LoadHookNamesFunctionContext.Provider>
               </ViewElementSourceContext.Provider>
             </SettingsContextController>
             <UnsupportedBridgeProtocolDialog />
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 6e25adaa5d5b..a07b8380aa63 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -16,11 +16,13 @@ import {
   useRef,
   useState,
 } from 'react';
+import {enableHookNameParsing} from 'react-devtools-feature-flags';
 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,
@@ -50,6 +52,7 @@ import type {
 
 export default function ComponentsSettings(_: {||}) {
   const store = useContext(StoreContext);
+  const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
 
   const collapseNodesByDefaultSubscription = useMemo(
     () => ({
@@ -72,6 +75,13 @@ export default function ComponentsSettings(_: {||}) {
     [store],
   );
 
+  const updateParseHookNames = useCallback(
+    ({currentTarget}) => {
+      setParseHookNames(currentTarget.checked);
+    },
+    [setParseHookNames],
+  );
+
   const [componentFilters, setComponentFilters] = useState<
     Array<ComponentFilter>,
   >(() => [...store.componentFilters]);
@@ -252,6 +262,18 @@ export default function ComponentsSettings(_: {||}) {
         Expand component tree by default
       </label>
 
+      {enableHookNameParsing && (
+        <label className={styles.Setting}>
+          <input
+            type="checkbox"
+            checked={parseHookNames}
+            onChange={updateParseHookNames}
+          />{' '}
+          Always parse hook names from source{' '}
+          <span className={styles.Warning}>(may be slow)</span>
+        </label>
+      )}
+
       <div className={styles.Header}>Hide components where...</div>
 
       <table className={styles.Table}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 93d7bfd9d500..be073adc5d8b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -18,6 +18,7 @@ import {
 import {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
+  LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
@@ -45,6 +46,9 @@ type Context = {|
   breakOnConsoleErrors: boolean,
   setBreakOnConsoleErrors: (value: boolean) => void,
 
+  parseHookNames: boolean,
+  setParseHookNames: (value: boolean) => void,
+
   showInlineWarningsAndErrors: boolean,
   setShowInlineWarningsAndErrors: (value: boolean) => void,
 
@@ -94,6 +98,10 @@ function SettingsContextController({
     LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
     false,
   );
+  const [parseHookNames, setParseHookNames] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
+    false,
+  );
   const [
     showInlineWarningsAndErrors,
     setShowInlineWarningsAndErrors,
@@ -180,9 +188,11 @@ function SettingsContextController({
         displayDensity === 'compact'
           ? COMPACT_LINE_HEIGHT
           : COMFORTABLE_LINE_HEIGHT,
+      parseHookNames,
       setAppendComponentStack,
       setBreakOnConsoleErrors,
       setDisplayDensity,
+      setParseHookNames,
       setTheme,
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
@@ -194,9 +204,11 @@ function SettingsContextController({
       appendComponentStack,
       breakOnConsoleErrors,
       displayDensity,
+      parseHookNames,
       setAppendComponentStack,
       setBreakOnConsoleErrors,
       setDisplayDensity,
+      setParseHookNames,
       setTheme,
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index 8bf8b3de1fdd..58ad5d15d37a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -139,3 +139,7 @@
 .ReleaseNotesLink {
   color: var(--color-button-active);
 }
+
+.Warning {
+  color: var(--color-error-text);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
new file mode 100644
index 000000000000..6b3ca25af28e
--- /dev/null
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {unstable_getCacheForType as getCacheForType} from 'react';
+import {enableHookNameParsing} from 'react-devtools-feature-flags';
+
+import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+import type {Thenable, Wakeable} from 'shared/ReactTypes';
+import type {Element} from './devtools/views/Components/types';
+import type {HookNames} from 'react-devtools-shared/src/types';
+
+const TIMEOUT = 3000;
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingRecord = {|
+  status: 0,
+  value: Wakeable,
+|};
+
+type ResolvedRecord<T> = {|
+  status: 1,
+  value: T,
+|};
+
+type RejectedRecord = {|
+  status: 2,
+  value: null,
+|};
+
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
+
+function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
+  if (record.status === Resolved) {
+    // This is just a type refinement.
+    return record;
+  } else if (record.status === Rejected) {
+    // This is just a type refinement.
+    return record;
+  } else {
+    throw record.value;
+  }
+}
+
+type HookNamesMap = WeakMap<Element, Record<HookNames>>;
+
+function createMap(): HookNamesMap {
+  return new WeakMap();
+}
+
+function getRecordMap(): WeakMap<Element, Record<HookNames>> {
+  return getCacheForType(createMap);
+}
+
+export function loadHookNames(
+  element: Element,
+  hooksTree: HooksTree,
+  loadHookNamesFunction: (hookLog: HooksTree) => Thenable<HookNames>,
+): HookNames | null {
+  if (!enableHookNameParsing) {
+    return null;
+  }
+
+  const map = getRecordMap();
+
+  let record = map.get(element);
+  if (record) {
+    // TODO Do we need to update the Map to use new the hooks list objects as keys
+    // or will these be stable between inspections as a component updates?
+    // It seems like they're stable.
+  } else {
+    const callbacks = new Set();
+    const wakeable: Wakeable = {
+      then(callback) {
+        callbacks.add(callback);
+      },
+    };
+
+    const wake = () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+        timeoutID = null;
+      }
+
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback());
+      callbacks.clear();
+    };
+
+    const newRecord: Record<HookNames> = (record = {
+      status: Pending,
+      value: wakeable,
+    });
+
+    let didTimeout = false;
+
+    loadHookNamesFunction(hooksTree).then(
+      function onSuccess(hookNames) {
+        if (didTimeout) {
+          return;
+        }
+
+        if (hookNames) {
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
+          resolvedRecord.status = Resolved;
+          resolvedRecord.value = hookNames;
+        } else {
+          const notFoundRecord = ((newRecord: any): RejectedRecord);
+          notFoundRecord.status = Rejected;
+          notFoundRecord.value = null;
+        }
+
+        wake();
+      },
+      function onError(error) {
+        if (didTimeout) {
+          return;
+        }
+
+        const thrownRecord = ((newRecord: any): RejectedRecord);
+        thrownRecord.status = Rejected;
+        thrownRecord.value = null;
+
+        wake();
+      },
+    );
+
+    // Eventually timeout and stop trying to load names.
+    let timeoutID = setTimeout(() => {
+      timeoutID = null;
+
+      didTimeout = true;
+
+      const timedoutRecord = ((newRecord: any): RejectedRecord);
+      timedoutRecord.status = Rejected;
+      timedoutRecord.value = null;
+
+      wake();
+    }, TIMEOUT);
+
+    map.set(element, record);
+  }
+
+  const response = readRecord(record).value;
+  return response;
+}
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index e2463a6aad26..b9faeb7dbe97 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
+
 export type Wall = {|
   // `listen` returns the "unlisten" function.
   listen: (fn: Function) => Function,
@@ -76,3 +78,12 @@ export type ComponentFilter =
   | BooleanComponentFilter
   | ElementTypeComponentFilter
   | RegExpComponentFilter;
+
+export type HookName = string | null;
+export type HookNames = Map<HooksNode, HookName>;
+
+export type LRUCache<K, V> = {|
+  get: (key: K) => V,
+  has: (key: K) => boolean,
+  set: (key: K, value: V) => void,
+|};
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index dc16bfe8e85d..573679f635ab 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -47,13 +47,17 @@ import {
 } from 'react-devtools-shared/src/types';
 import {localStorageGetItem, localStorageSetItem} from './storage';
 import {meta} from './hydration';
+
 import type {ComponentFilter, ElementType} from './types';
+import type {LRUCache} from 'react-devtools-shared/src/types';
 
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
 // On large trees, encoding takes significant time.
 // Try to reuse the already encoded strings.
-const encodedStringCache = new LRU({max: 1000});
+const encodedStringCache: LRUCache<string, Array<number>> = new LRU({
+  max: 1000,
+});
 
 export function alphaSortKeys(
   a: string | number | Symbol,
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index a64d2838dbcb..41fd6fa2666f 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -31,6 +31,11 @@ const config = {
     app: './src/app/index.js',
     devtools: './src/devtools.js',
   },
+  node: {
+    // source-maps package has a dependency on 'fs'
+    // but this build won't trigger that code path
+    fs: 'empty',
+  },
   resolve: {
     alias: {
       react: resolve(builtModulesDir, 'react'),
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 761479ce45c5..ed6a0b7db0f8 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -55,12 +55,20 @@ module.exports = Object.assign({}, baseConfig, {
   // 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>/build2/'],
-  testRegex: 'packages/react-devtools-shared/src/__tests__/[^]+.test.js$',
+  transformIgnorePatterns: [
+    '/node_modules/',
+    '<rootDir>/build2/',
+    '/__compiled__/',
+  ],
+  testRegex:
+    'packages/react-devtools-(extensions|shared)/src/__tests__/[^]+.test.js$',
   snapshotSerializers: [
     require.resolve(
       '../../packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js'
     ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/hookSerializer.js'
+    ),
     require.resolve(
       '../../packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js'
     ),
diff --git a/scripts/jest/config.build.js b/scripts/jest/config.build.js
index 95bc0e633ce5..e99034693e89 100644
--- a/scripts/jest/config.build.js
+++ b/scripts/jest/config.build.js
@@ -52,6 +52,7 @@ module.exports = Object.assign({}, baseConfig, {
   moduleNameMapper,
   modulePathIgnorePatterns: [
     ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
     'packages/react-devtools-shared',
   ],
   // Don't run bundle tests on -test.internal.* files
diff --git a/scripts/jest/config.source-persistent.js b/scripts/jest/config.source-persistent.js
index 935c4463c1c9..80bec669b643 100644
--- a/scripts/jest/config.source-persistent.js
+++ b/scripts/jest/config.source-persistent.js
@@ -5,6 +5,7 @@ const baseConfig = require('./config.base');
 module.exports = Object.assign({}, baseConfig, {
   modulePathIgnorePatterns: [
     ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
     'packages/react-devtools-shared',
     'ReactIncrementalPerf',
     'ReactIncrementalUpdatesMinimalism',
diff --git a/scripts/jest/config.source-www.js b/scripts/jest/config.source-www.js
index d8d29872c194..31e8841ac363 100644
--- a/scripts/jest/config.source-www.js
+++ b/scripts/jest/config.source-www.js
@@ -5,6 +5,7 @@ const baseConfig = require('./config.base');
 module.exports = Object.assign({}, baseConfig, {
   modulePathIgnorePatterns: [
     ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
     'packages/react-devtools-shared',
   ],
   setupFiles: [
diff --git a/scripts/jest/config.source.js b/scripts/jest/config.source.js
index 2e3401a4ba5c..710df337b5ab 100644
--- a/scripts/jest/config.source.js
+++ b/scripts/jest/config.source.js
@@ -5,6 +5,7 @@ const baseConfig = require('./config.base');
 module.exports = Object.assign({}, baseConfig, {
   modulePathIgnorePatterns: [
     ...baseConfig.modulePathIgnorePatterns,
+    'packages/react-devtools-extensions',
     'packages/react-devtools-shared',
   ],
   setupFiles: [
diff --git a/scripts/prettier/index.js b/scripts/prettier/index.js
index 4853557640af..0be3fefdca68 100644
--- a/scripts/prettier/index.js
+++ b/scripts/prettier/index.js
@@ -25,7 +25,14 @@ let didWarn = false;
 let didError = false;
 
 const files = glob
-  .sync('**/*.js', {ignore: ['**/node_modules/**', '**/cjs/**']})
+  .sync('**/*.js', {
+    ignore: [
+      '**/node_modules/**',
+      '**/cjs/**',
+      '**/__compiled__/**',
+      'packages/react-devtools-extensions/src/ErrorTesterCompiled.js',
+    ],
+  })
   .filter(f => !onlyChanged || changedFiles.has(f));
 
 if (!files.length) {
diff --git a/yarn.lock b/yarn.lock
index 54504c2fd6af..3332b2147477 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -124,6 +124,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.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.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.3.tgz#0e22c005b0a94c1c74eafe19ef78ce53a4d45c03"
@@ -481,7 +490,7 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
-"@babel/helper-validator-identifier@^7.14.0":
+"@babel/helper-validator-identifier@^7.10.4", "@babel/helper-validator-identifier@^7.14.0":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
   integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
@@ -547,6 +556,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
   integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
 
+"@babel/parser@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0"
+  integrity sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==
+
 "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
@@ -1507,6 +1521,21 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
+"@babel/traverse@^7.12.5":
+  version "7.12.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.5.tgz#78a0c68c8e8a35e4cacfd31db8bb303d5606f095"
+  integrity sha512-xa15FbQnias7z9a62LwYAA5SZZPkHIXpd42C6uW68o8uTuua96FHZy1y61Va5P/i83FAAcMpW8+A/QayntzuqA==
+  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.5"
+    "@babel/types" "^7.12.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.19"
+
 "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
@@ -1539,6 +1568,15 @@
     "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.12.5":
+  version "7.12.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.6.tgz#ae0e55ef1cce1fbc881cd26f8234eb3e657edc96"
+  integrity sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.10.4"
+    lodash "^4.17.19"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
@@ -3353,6 +3391,41 @@ babel-eslint@^9.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@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
@@ -3423,6 +3496,82 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@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-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"
@@ -3433,6 +3582,65 @@ babel-plugin-syntax-trailing-function-commas@^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"
@@ -3492,6 +3700,35 @@ babel-preset-jest@^26.6.2:
     babel-plugin-jest-hoist "^26.6.2"
     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"
@@ -4754,6 +4991,13 @@ cross-env@^3.1.4:
     cross-spawn "^5.1.0"
     is-windows "^1.0.0"
 
+cross-fetch@^3.0.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
+  integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
+  dependencies:
+    node-fetch "2.6.1"
+
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -6780,6 +7024,15 @@ fs-exists-sync@^0.1.0:
   resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
   integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
 
+fs-extra@^4.0.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"
@@ -6789,15 +7042,6 @@ fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@~4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
-  integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-minipass@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
@@ -8512,6 +8756,14 @@ jest-environment-node@^26.6.2:
     jest-mock "^26.6.2"
     jest-util "^26.6.2"
 
+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@^26.3.0:
   version "26.3.0"
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
@@ -10041,6 +10293,11 @@ node-cleanup@^2.1.2:
   resolved "https://registry.yarnpkg.com/node-cleanup/-/node-cleanup-2.1.2.tgz#7ac19abd297e09a7f72a71545d951b517e4dde2c"
   integrity sha1-esGavSl+Caf3KnFUXZUbUX5N3iw=
 
+node-fetch@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-fetch@^1.0.1:
   version "1.7.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
@@ -11267,6 +11524,11 @@ promise-polyfill@^6.0.1:
   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-retry@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/promise-retry/-/promise-retry-1.1.1.tgz#6739e968e3051da20ce6497fb2b50f6911df3d6d"
@@ -12778,6 +13040,13 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+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.1, sourcemap-codec@^1.4.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"

From 32eefcb3c5131f4d77a2195ff11a00a2513cf62f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 1 Jul 2021 18:13:00 -0400
Subject: [PATCH 0660/1603] Replace flushDiscreteUpdates with flushSync
 (#21775)

* Replace flushDiscreteUpdates with flushSync

flushDiscreteUpdates is almost the same as flushSync. It forces passive
effects to fire, because of an outdated heuristic, which isn't ideal but
not that important.

Besides that, the only remaining difference between flushDiscreteUpdates
and flushSync is that flushDiscreteUpdates does not warn if you call it
from inside an effect/lifecycle. This is because it might get triggered
by a nested event dispatch, like `el.focus()`.

So I added a new method, flushSyncWithWarningIfAlreadyRendering, which
is used for the public flushSync API. It includes the warning. And I
removed the warning from flushSync, so the event system can call that
one. In production, flushSyncWithWarningIfAlreadyRendering gets inlined
to flushSync, so the behavior is identical.

Another way of thinking about this PR is that I renamed flushSync to
flushSyncWithWarningIfAlreadyRendering and flushDiscreteUpdates to
flushSync (and fixed the passive effects thing). The point is to prevent
these from subtly diverging in the future.

* Invert so the one with the warning is the default one

To make Seb happy
---
 .../src/__tests__/ReactDOMFiber-test.js       |  8 +--
 packages/react-dom/src/client/ReactDOM.js     |  4 +-
 .../src/events/ReactDOMUpdateBatching.js      |  8 +--
 packages/react-noop-renderer/src/ReactNoop.js |  1 -
 .../src/createReactNoop.js                    |  2 -
 .../src/ReactFiberReconciler.js               | 10 ++--
 .../src/ReactFiberReconciler.new.js           |  4 +-
 .../src/ReactFiberReconciler.old.js           |  4 +-
 .../src/ReactFiberWorkLoop.new.js             | 54 ++++++-------------
 .../src/ReactFiberWorkLoop.old.js             | 54 ++++++-------------
 .../src/__tests__/ReactFlushSync-test.js      | 23 ++++++++
 11 files changed, 73 insertions(+), 99 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index 36c8367af5d4..ff1ea1771fc8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1154,19 +1154,13 @@ describe('ReactDOMFiber', () => {
     expect(ops).toEqual(['A']);
 
     if (__DEV__) {
-      const errorCalls = console.error.calls.count();
+      expect(console.error.calls.count()).toBe(2);
       expect(console.error.calls.argsFor(0)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
       expect(console.error.calls.argsFor(1)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
-      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
-      for (let i = 2; i < errorCalls; i++) {
-        expect(console.error.calls.argsFor(i)[0]).toMatch(
-          'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
-        );
-      }
     }
   });
 
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 8e974697075f..80fc3d1e4a05 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -23,8 +23,8 @@ import {createEventHandle} from './ReactDOMEventHandle';
 import {
   batchedUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushControlled,
   injectIntoDevTools,
   attemptSynchronousHydration,
@@ -100,7 +100,7 @@ setRestoreImplementation(restoreControlledState);
 setBatchingImplementation(
   batchedUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
 );
 
 function createPortal(
diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index f2fbfe4c3f32..d3c46630b148 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -23,7 +23,7 @@ let batchedUpdatesImpl = function(fn, bookkeeping) {
 let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
-let flushDiscreteUpdatesImpl = function() {};
+let flushSyncImpl = function() {};
 
 let isInsideEventHandler = false;
 
@@ -39,7 +39,7 @@ function finishEventHandler() {
     // 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.
-    flushDiscreteUpdatesImpl();
+    flushSyncImpl();
     restoreStateIfNeeded();
   }
 }
@@ -67,9 +67,9 @@ export function discreteUpdates(fn, a, b, c, d) {
 export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
-  _flushDiscreteUpdatesImpl,
+  _flushSyncImpl,
 ) {
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
-  flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
+  flushSyncImpl = _flushSyncImpl;
 }
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index c09fa2d8000f..5e5567f9e094 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -41,7 +41,6 @@ export const {
   unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
-  flushDiscreteUpdates,
   flushSync,
   flushPassiveEffects,
   act,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 8dbadafd2c22..eb7e74193341 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -915,8 +915,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
-    flushDiscreteUpdates: NoopRenderer.flushDiscreteUpdates,
-
     flushSync(fn: () => mixed) {
       NoopRenderer.flushSync(fn);
     },
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index bc169fd8a647..bf78e9e41c39 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -21,9 +21,9 @@ import {
   unbatchedUpdates as unbatchedUpdates_old,
   deferredUpdates as deferredUpdates_old,
   discreteUpdates as discreteUpdates_old,
-  flushDiscreteUpdates as flushDiscreteUpdates_old,
   flushControlled as flushControlled_old,
   flushSync as flushSync_old,
+  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_old,
   flushPassiveEffects as flushPassiveEffects_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
@@ -59,9 +59,9 @@ import {
   unbatchedUpdates as unbatchedUpdates_new,
   deferredUpdates as deferredUpdates_new,
   discreteUpdates as discreteUpdates_new,
-  flushDiscreteUpdates as flushDiscreteUpdates_new,
   flushControlled as flushControlled_new,
   flushSync as flushSync_new,
+  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_new,
   flushPassiveEffects as flushPassiveEffects_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
@@ -108,13 +108,13 @@ export const deferredUpdates = enableNewReconciler
 export const discreteUpdates = enableNewReconciler
   ? discreteUpdates_new
   : discreteUpdates_old;
-export const flushDiscreteUpdates = enableNewReconciler
-  ? flushDiscreteUpdates_new
-  : flushDiscreteUpdates_old;
 export const flushControlled = enableNewReconciler
   ? flushControlled_new
   : flushControlled_old;
 export const flushSync = enableNewReconciler ? flushSync_new : flushSync_old;
+export const flushSyncWithoutWarningIfAlreadyRendering = enableNewReconciler
+  ? flushSyncWithoutWarningIfAlreadyRendering_new
+  : flushSyncWithoutWarningIfAlreadyRendering_old;
 export const flushPassiveEffects = enableNewReconciler
   ? flushPassiveEffects_new
   : flushPassiveEffects_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index f406f8592b0d..c8b61182d573 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -57,7 +57,7 @@ import {
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -330,9 +330,9 @@ export {
   unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushControlled,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index f6ae425b4400..7e74bf6a1fee 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -57,7 +57,7 @@ import {
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -330,9 +330,9 @@ export {
   unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushControlled,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7f429c873438..c8e13fa3a5eb 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1044,34 +1044,6 @@ export function getExecutionContext(): ExecutionContext {
   return executionContext;
 }
 
-export function flushDiscreteUpdates() {
-  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
-  // However, `act` uses `batchedUpdates`, so there's no way to distinguish
-  // those two cases. Need to fix this before exposing flushDiscreteUpdates
-  // as a public API.
-  if (
-    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==
-    NoContext
-  ) {
-    if (__DEV__) {
-      if ((executionContext & RenderContext) !== NoContext) {
-        console.error(
-          'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
-            'already rendering.',
-        );
-      }
-    }
-    // We're already rendering, so we can't synchronously flush pending work.
-    // This is probably a nested event dispatch triggered by a lifecycle/effect,
-    // like `el.focus()`. Exit.
-    return;
-  }
-  flushSyncCallbacks();
-  // If the discrete updates scheduled passive effects, flush them now so that
-  // they fire before the next serial event.
-  flushPassiveEffects();
-}
-
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1142,7 +1114,10 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
   }
 }
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
+export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
+  fn: A => R,
+  a: A,
+): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
@@ -1165,18 +1140,23 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       flushSyncCallbacks();
-    } else {
-      if (__DEV__) {
-        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.',
-        );
-      }
     }
   }
 }
 
+export function flushSync<A, R>(fn: A => R, a: A): R {
+  if (__DEV__) {
+    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+      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.',
+      );
+    }
+  }
+  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
+}
+
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index f356fc3f1156..c4f51481eaf9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1044,34 +1044,6 @@ export function getExecutionContext(): ExecutionContext {
   return executionContext;
 }
 
-export function flushDiscreteUpdates() {
-  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
-  // However, `act` uses `batchedUpdates`, so there's no way to distinguish
-  // those two cases. Need to fix this before exposing flushDiscreteUpdates
-  // as a public API.
-  if (
-    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==
-    NoContext
-  ) {
-    if (__DEV__) {
-      if ((executionContext & RenderContext) !== NoContext) {
-        console.error(
-          'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
-            'already rendering.',
-        );
-      }
-    }
-    // We're already rendering, so we can't synchronously flush pending work.
-    // This is probably a nested event dispatch triggered by a lifecycle/effect,
-    // like `el.focus()`. Exit.
-    return;
-  }
-  flushSyncCallbacks();
-  // If the discrete updates scheduled passive effects, flush them now so that
-  // they fire before the next serial event.
-  flushPassiveEffects();
-}
-
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1142,7 +1114,10 @@ export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
   }
 }
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
+export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
+  fn: A => R,
+  a: A,
+): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
@@ -1165,18 +1140,23 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       flushSyncCallbacks();
-    } else {
-      if (__DEV__) {
-        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.',
-        );
-      }
     }
   }
 }
 
+export function flushSync<A, R>(fn: A => R, a: A): R {
+  if (__DEV__) {
+    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+      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.',
+      );
+    }
+  }
+  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
+}
+
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index a3a74d739a9a..c73e46ddc5e3 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -173,4 +173,27 @@ describe('ReactFlushSync', () => {
     // Effect flushes after paint.
     expect(Scheduler).toHaveYielded(['Effect']);
   });
+
+  test('does not flush pending passive effects', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+      expect(Scheduler).toFlushUntilNextPaint(['Child']);
+      expect(root).toMatchRenderedOutput('Child');
+
+      // Passive effects are pending. Calling flushSync should not affect them.
+      ReactNoop.flushSync();
+      // Effects still haven't fired.
+      expect(Scheduler).toHaveYielded([]);
+    });
+    // Now the effects have fired.
+    expect(Scheduler).toHaveYielded(['Effect']);
+  });
 });

From ed6c091fe961a3b95e956ebcefe8f152177b1fb7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 1 Jul 2021 18:14:07 -0400
Subject: [PATCH 0661/1603] Replace unbatchedUpdates with flushSync (#21776)

There's a weird quirk leftover from the old Stack (pre-Fiber)
implementation where the initial mount of a leagcy (ReactDOM.render)
root is flushed synchronously even inside `batchedUpdates`.

The original workaround for this was an internal method called
`unbatchedUpdates`. We've since added another API that works almost the
same way, `flushSync`.

The only difference is that `unbatchedUpdates` would not cause other
pending updates to flush too, only the newly mounted root. `flushSync`
flushes all pending sync work across all roots. This was to preserve
the exact behavior of the Stack implementation.

But since it's close enough, let's just use `flushSync`. It's unlikely
anyone's app accidentally relies on this subtle difference, and the
legacy API is deprecated in 18, anyway.
---
 .../__snapshots__/profilingCache-test.js.snap | 28 +++---
 .../src/__tests__/ReactMount-test.js          | 12 +--
 .../react-dom/src/client/ReactDOMLegacy.js    |  6 +-
 packages/react-noop-renderer/src/ReactNoop.js |  1 -
 .../src/ReactNoopPersistent.js                |  1 -
 .../src/createReactNoop.js                    |  2 -
 .../src/ReactFiberReconciler.js               |  5 --
 .../src/ReactFiberReconciler.new.js           |  2 -
 .../src/ReactFiberReconciler.old.js           |  2 -
 .../src/ReactFiberWorkLoop.new.js             | 90 ++++---------------
 .../src/ReactFiberWorkLoop.old.js             | 90 ++++---------------
 .../ReactIncrementalScheduling-test.js        | 59 ------------
 12 files changed, 59 insertions(+), 239 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index b27231efdffc..2ab8751e3cbc 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -40,7 +40,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 16,
   "updaters": Array [
     Object {
@@ -87,7 +87,7 @@ Object {
     4 => 2,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 15,
   "updaters": Array [
     Object {
@@ -186,7 +186,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 12,
   "updaters": Array [
     Object {
@@ -445,7 +445,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 12,
           "updaters": Array [
             Object {
@@ -938,7 +938,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 11,
           "updaters": Array [
             Object {
@@ -1597,7 +1597,7 @@ Object {
         17 => 1,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 24,
       "updaters": Array [
         Object {
@@ -1687,7 +1687,7 @@ Object {
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
       "passiveEffectDuration": 0,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 34,
       "updaters": Array [
         Object {
@@ -2223,7 +2223,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 24,
           "updaters": Array [
             Object {
@@ -2310,7 +2310,7 @@ Object {
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 34,
           "updaters": Array [
             Object {
@@ -2431,7 +2431,7 @@ Object {
         2 => 0,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 0,
       "updaters": Array [
         Object {
@@ -2506,7 +2506,7 @@ Object {
     3 => 0,
   },
   "passiveEffectDuration": 0,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -2715,7 +2715,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
@@ -3071,7 +3071,7 @@ Object {
     7 => 0,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -3515,7 +3515,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
index a214c32f58d0..9571905edaf5 100644
--- a/packages/react-dom/src/__tests__/ReactMount-test.js
+++ b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -277,7 +277,7 @@ describe('ReactMount', () => {
     expect(calls).toBe(5);
   });
 
-  it('initial mount is sync inside batchedUpdates, but task work is deferred until the end of the batch', () => {
+  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');
 
@@ -302,12 +302,12 @@ describe('ReactMount', () => {
 
       // Initial mount on another root. Should flush immediately.
       ReactDOM.render(<Foo>a</Foo>, container2);
-      // The update did not flush yet.
-      expect(container1.textContent).toEqual('1');
-      // The initial mount flushed, but not the update scheduled in cDM.
-      expect(container2.textContent).toEqual('a');
+      // 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!');
     });
-    // All updates have flushed.
     expect(container1.textContent).toEqual('2');
     expect(container2.textContent).toEqual('a!');
   });
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index a62a7fb444c5..f03350cb2924 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -29,7 +29,7 @@ import {
   createContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
-  unbatchedUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   getPublicRootInstance,
   findHostInstance,
   findHostInstanceWithWarning,
@@ -174,7 +174,7 @@ function legacyRenderSubtreeIntoContainer(
       };
     }
     // Initial mount should not be batched.
-    unbatchedUpdates(() => {
+    flushSyncWithoutWarningIfAlreadyRendering(() => {
       updateContainer(children, fiberRoot, parentComponent, callback);
     });
   } else {
@@ -357,7 +357,7 @@ export function unmountComponentAtNode(container: Container) {
     }
 
     // Unmount should not be batched.
-    unbatchedUpdates(() => {
+    flushSyncWithoutWarningIfAlreadyRendering(() => {
       legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
         // $FlowFixMe This should probably use `delete container._reactRootContainer`
         container._reactRootContainer = null;
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index 5e5567f9e094..a225deaf961f 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -38,7 +38,6 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
-  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
   flushSync,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index 97876990a9b5..86bb87c065e4 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -38,7 +38,6 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
-  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
   flushDiscreteUpdates,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index eb7e74193341..5ea510d73d6e 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -901,8 +901,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     deferredUpdates: NoopRenderer.deferredUpdates,
 
-    unbatchedUpdates: NoopRenderer.unbatchedUpdates,
-
     discreteUpdates: NoopRenderer.discreteUpdates,
 
     idleUpdates<T>(fn: () => T): T {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index bf78e9e41c39..d25783164e98 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -18,7 +18,6 @@ import {
   createContainer as createContainer_old,
   updateContainer as updateContainer_old,
   batchedUpdates as batchedUpdates_old,
-  unbatchedUpdates as unbatchedUpdates_old,
   deferredUpdates as deferredUpdates_old,
   discreteUpdates as discreteUpdates_old,
   flushControlled as flushControlled_old,
@@ -56,7 +55,6 @@ import {
   createContainer as createContainer_new,
   updateContainer as updateContainer_new,
   batchedUpdates as batchedUpdates_new,
-  unbatchedUpdates as unbatchedUpdates_new,
   deferredUpdates as deferredUpdates_new,
   discreteUpdates as discreteUpdates_new,
   flushControlled as flushControlled_new,
@@ -99,9 +97,6 @@ export const updateContainer = enableNewReconciler
 export const batchedUpdates = enableNewReconciler
   ? batchedUpdates_new
   : batchedUpdates_old;
-export const unbatchedUpdates = enableNewReconciler
-  ? unbatchedUpdates_new
-  : unbatchedUpdates_old;
 export const deferredUpdates = enableNewReconciler
   ? deferredUpdates_new
   : deferredUpdates_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index c8b61182d573..7ab995a5fcb0 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -52,7 +52,6 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
-  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
@@ -327,7 +326,6 @@ export function updateContainer(
 
 export {
   batchedUpdates,
-  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
   flushControlled,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 7e74bf6a1fee..da127689c7c6 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -52,7 +52,6 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
-  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
@@ -327,7 +326,6 @@ export function updateContainer(
 
 export {
   batchedUpdates,
-  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
   flushControlled,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index c8e13fa3a5eb..aa36d6da831e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -246,12 +246,11 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b00000;
-const BatchedContext = /*               */ 0b00001;
-const LegacyUnbatchedContext = /*       */ 0b00010;
-const RenderContext = /*                */ 0b00100;
-const CommitContext = /*                */ 0b01000;
-export const RetryAfterError = /*       */ 0b10000;
+export const NoContext = /*             */ 0b0000;
+const BatchedContext = /*               */ 0b0001;
+const RenderContext = /*                */ 0b0010;
+const CommitContext = /*                */ 0b0100;
+export const RetryAfterError = /*       */ 0b1000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -515,35 +514,19 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  if (lane === SyncLane) {
-    if (
-      // Check if we're inside unbatchedUpdates
-      (executionContext & LegacyUnbatchedContext) !== NoContext &&
-      // Check if we're not already rendering
-      (executionContext & (RenderContext | CommitContext)) === NoContext
-    ) {
-      // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
-      // root inside of batchedUpdates should be synchronous, but layout updates
-      // should be deferred until the end of the batch.
-      performSyncWorkOnRoot(root);
-    } else {
-      ensureRootIsScheduled(root, eventTime);
-      if (
-        executionContext === NoContext &&
-        (fiber.mode & ConcurrentMode) === NoMode
-      ) {
-        // 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();
-        flushSyncCallbacksOnlyInLegacyMode();
-      }
-    }
-  } else {
-    // Schedule other updates after in case the callback is sync.
-    ensureRootIsScheduled(root, eventTime);
+  ensureRootIsScheduled(root, eventTime);
+  if (
+    lane === SyncLane &&
+    executionContext === NoContext &&
+    (fiber.mode & ConcurrentMode) === NoMode
+  ) {
+    // 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();
+    flushSyncCallbacksOnlyInLegacyMode();
   }
 
   return root;
@@ -1095,25 +1078,6 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
-  const prevExecutionContext = executionContext;
-  executionContext &= ~BatchedContext;
-  executionContext |= LegacyUnbatchedContext;
-  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) {
-      resetRenderTimer();
-      // TODO: I think this call is redundant, because we flush inside
-      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
-      flushSyncCallbacksOnlyInLegacyMode();
-    }
-  }
-}
-
 export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
   fn: A => R,
   a: A,
@@ -1954,24 +1918,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw error;
   }
 
-  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
-    if (__DEV__) {
-      if (enableDebugTracing) {
-        logCommitStopped();
-      }
-    }
-
-    if (enableSchedulingProfiler) {
-      markCommitStopped();
-    }
-
-    // This is a legacy edge case. We just committed the initial mount of
-    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
-    // synchronously, but layout updates should be deferred until the end
-    // of the batch.
-    return null;
-  }
-
   // 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
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c4f51481eaf9..2fd46c7cda7c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -246,12 +246,11 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b00000;
-const BatchedContext = /*               */ 0b00001;
-const LegacyUnbatchedContext = /*       */ 0b00010;
-const RenderContext = /*                */ 0b00100;
-const CommitContext = /*                */ 0b01000;
-export const RetryAfterError = /*       */ 0b10000;
+export const NoContext = /*             */ 0b0000;
+const BatchedContext = /*               */ 0b0001;
+const RenderContext = /*                */ 0b0010;
+const CommitContext = /*                */ 0b0100;
+export const RetryAfterError = /*       */ 0b1000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -515,35 +514,19 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  if (lane === SyncLane) {
-    if (
-      // Check if we're inside unbatchedUpdates
-      (executionContext & LegacyUnbatchedContext) !== NoContext &&
-      // Check if we're not already rendering
-      (executionContext & (RenderContext | CommitContext)) === NoContext
-    ) {
-      // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
-      // root inside of batchedUpdates should be synchronous, but layout updates
-      // should be deferred until the end of the batch.
-      performSyncWorkOnRoot(root);
-    } else {
-      ensureRootIsScheduled(root, eventTime);
-      if (
-        executionContext === NoContext &&
-        (fiber.mode & ConcurrentMode) === NoMode
-      ) {
-        // 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();
-        flushSyncCallbacksOnlyInLegacyMode();
-      }
-    }
-  } else {
-    // Schedule other updates after in case the callback is sync.
-    ensureRootIsScheduled(root, eventTime);
+  ensureRootIsScheduled(root, eventTime);
+  if (
+    lane === SyncLane &&
+    executionContext === NoContext &&
+    (fiber.mode & ConcurrentMode) === NoMode
+  ) {
+    // 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();
+    flushSyncCallbacksOnlyInLegacyMode();
   }
 
   return root;
@@ -1095,25 +1078,6 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
-  const prevExecutionContext = executionContext;
-  executionContext &= ~BatchedContext;
-  executionContext |= LegacyUnbatchedContext;
-  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) {
-      resetRenderTimer();
-      // TODO: I think this call is redundant, because we flush inside
-      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
-      flushSyncCallbacksOnlyInLegacyMode();
-    }
-  }
-}
-
 export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
   fn: A => R,
   a: A,
@@ -1954,24 +1918,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw error;
   }
 
-  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
-    if (__DEV__) {
-      if (enableDebugTracing) {
-        logCommitStopped();
-      }
-    }
-
-    if (enableSchedulingProfiler) {
-      markCommitStopped();
-    }
-
-    // This is a legacy edge case. We just committed the initial mount of
-    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
-    // synchronously, but layout updates should be deferred until the end
-    // of the batch.
-    return null;
-  }
-
   // 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
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index b603b03c696f..9c9490085147 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -349,63 +349,4 @@ describe('ReactIncrementalScheduling', () => {
     // The updates should all be flushed with Task priority
     expect(ReactNoop).toMatchRenderedOutput(<span prop={5} />);
   });
-
-  it('can opt-out of batching using unbatchedUpdates', () => {
-    ReactNoop.flushSync(() => {
-      ReactNoop.render(<span prop={0} />);
-      expect(ReactNoop.getChildren()).toEqual([]);
-      // Should not have flushed yet because we're still batching
-
-      // unbatchedUpdates reverses the effect of batchedUpdates, so sync
-      // updates are not batched
-      ReactNoop.unbatchedUpdates(() => {
-        ReactNoop.render(<span prop={1} />);
-        expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
-        ReactNoop.render(<span prop={2} />);
-        expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
-      });
-
-      ReactNoop.render(<span prop={3} />);
-      expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
-    });
-    // Remaining update is now flushed
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
-  });
-
-  it('nested updates are always deferred, even inside unbatchedUpdates', () => {
-    let instance;
-    class Foo extends React.Component {
-      state = {step: 0};
-      componentDidUpdate() {
-        Scheduler.unstable_yieldValue('componentDidUpdate: ' + this.state.step);
-        if (this.state.step === 1) {
-          ReactNoop.unbatchedUpdates(() => {
-            // This is a nested state update, so it should not be
-            // flushed synchronously, even though we wrapped it
-            // in unbatchedUpdates.
-            this.setState({step: 2});
-          });
-          expect(Scheduler).toHaveYielded([
-            'render: 1',
-            'componentDidUpdate: 1',
-          ]);
-          expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
-        }
-      }
-      render() {
-        Scheduler.unstable_yieldValue('render: ' + this.state.step);
-        instance = this;
-        return <span prop={this.state.step} />;
-      }
-    }
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield(['render: 0']);
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
-
-    ReactNoop.flushSync(() => {
-      instance.setState({step: 1});
-    });
-    expect(Scheduler).toHaveYielded(['render: 2', 'componentDidUpdate: 2']);
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
-  });
 });

From 9c7f29ebe75a7546e59038123d3b0c3515bec916 Mon Sep 17 00:00:00 2001
From: Moti Zilberman <motiz88@gmail.com>
Date: Wed, 7 Jul 2021 18:07:58 +0100
Subject: [PATCH 0662/1603] [WIP] DevTools: Support named hooks for >1 module
 in a bundle (#21790)

* Add named hooks test case built with Rollup

* Fix prepareStackTrace unpatching, remove sourceURL

* Prettier

* Resolve source map URL/path relative to the script

* Add failing tests for multi-module bundle

* Parse hook names from multiple modules in a bundle

* Create a HookSourceData per location key (file, line, column).
* Cache the source map per runtime URL ( = file part of location key).
* Don't store sourceMapContents - only store a consumer instance.
* Look up original source URLs in the source map correctly.
* Cache the code + AST per original URL.
* Fix off-by-one column number lookup.
* Some naming and typing tweaks related to the above.
* Stop storing the consumer outside the with() callback, which is a bug.

* Lint fix for 8d8dd25

* Added devDependencies to react-devtools-extensions package.json

* Added some debug logging and TODO comments

* Added additional DEBUG logging to hook names cache

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../react-devtools-extensions/package.json    |   5 +
 .../__source__/__compiled__/bundle/index.js   | 198 +++++++++
 .../__compiled__/bundle/index.js.map          |   1 +
 .../external/ComponentWithCustomHook.js       |   5 +-
 .../external/ComponentWithCustomHook.js.map   |   2 +-
 .../ComponentWithExternalCustomHooks.js       |   3 +-
 .../__compiled__/external/Example.js          |   3 +-
 .../__compiled__/external/InlineRequire.js    |   3 +-
 .../__compiled__/external/ToDoList.js         |   3 +-
 .../__source__/__compiled__/external/index.js |  57 +++
 .../__compiled__/external/index.js.map        |   1 +
 .../__compiled__/external/useTheme.js         |   3 +-
 .../inline/ComponentWithCustomHook.js         |   5 +-
 .../ComponentWithExternalCustomHooks.js       |   3 +-
 .../__source__/__compiled__/inline/Example.js |   3 +-
 .../__compiled__/inline/InlineRequire.js      |   3 +-
 .../__compiled__/inline/ToDoList.js           |   3 +-
 .../__source__/__compiled__/inline/index.js   |  57 +++
 .../__compiled__/inline/useTheme.js           |   3 +-
 .../src/__tests__/__source__/index.js         |  16 +
 .../src/__tests__/parseHookNames-test.js      |  57 +--
 .../src/__tests__/updateMockSourceMaps.js     |  40 +-
 .../react-devtools-extensions/src/astUtils.js |   8 -
 .../src/parseHookNames.js                     | 419 +++++++++++-------
 .../src/hookNamesCache.js                     |  15 +-
 25 files changed, 694 insertions(+), 222 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/index.js

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 1949edbd0232..40954c442515 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -19,6 +19,7 @@
     "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {
+    "acorn-jsx": "^5.2.0",
     "@babel/core": "^7.11.1",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-flow-strip-types": "^7.10.4",
@@ -44,6 +45,10 @@
     "open": "^7.0.2",
     "os-name": "^3.1.0",
     "raw-loader": "^3.1.0",
+    "rollup": "^1.19.4",
+    "rollup-plugin-babel": "^4.0.1",
+    "rollup-plugin-commonjs": "^9.3.4",
+    "rollup-plugin-node-resolve": "^2.1.1",
     "source-map": "^0.8.0-beta.0",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
new file mode 100644
index 000000000000..6bb598647662
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
@@ -0,0 +1,198 @@
+'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);
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = React.useState(0);
+  const isDarkMode = useIsDarkMode();
+  React.useEffect(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", null, "Count: ", count), /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleClick
+  }, "Update count"));
+}
+
+function useIsDarkMode() {
+  const [isDarkMode] = React.useState(false);
+  React.useEffect(function useEffectCreate() {// Here is where we may listen to a "theme" event...
+  }, []);
+  return isDarkMode;
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const ThemeContext = /*#__PURE__*/React.createContext('bright');
+function useTheme() {
+  const theme = React.useContext(ThemeContext);
+  React.useDebugValue(theme);
+  return theme;
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component$1() {
+  const theme = useTheme();
+  return /*#__PURE__*/React__default.createElement("div", null, "theme: ", theme);
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component$2() {
+  const [count, setCount] = React.useState(0);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component$3() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+
+var ToDoList = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  ListItem: ListItem,
+  List: List
+});
+
+exports.ComponentWithCustomHook = Component;
+exports.ComponentWithExternalCustomHooks = Component$1;
+exports.Example = Component$2;
+exports.InlineRequire = Component$3;
+exports.ToDoList = ToDoList;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
new file mode 100644
index 000000000000..1a4fb620f928
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","count","setCount","useState","isDarkMode","useIsDarkMode","useEffect","handleClick","React","useEffectCreate","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEAC,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBJ,UAAjB,CADF,eAEEI,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAeD,cAAQ,CAAC,KAAD,CAA7B;AAEAG,EAAAA,eAAS,CAAC,SAASG,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAOL,UAAP;AACD;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAASb,WAAT,GAAqB;AAC1B,QAAMa,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOJ,qDAAaK,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEO,SAASb,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUe,OAAO,CAAC,OAAD,CAAP,CAAiBb,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASgB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC3B,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAAC4B,KAAD,EAAQC,QAAR,IAAoB7B,cAAQ,CAAC,CACjC;AAAC8B,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgBhC,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMI,WAAW,GAAGe,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzB/B,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMgC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEtB;AAA/C,kBACEiB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
index f76a1acedb86..e326d7a4962d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
@@ -33,10 +33,9 @@ function Component() {
 }
 
 function useIsDarkMode() {
-  const [isDarkMode, setIsDarkMode] = (0, _react.useState)(0);
+  const [isDarkMode] = (0, _react.useState)(false);
   (0, _react.useEffect)(function useEffectCreate() {// Here is where we may listen to a "theme" event...
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=ComponentWithCustomHook.js.map
-//# sourceURL=ComponentWithCustomHook.js
\ No newline at end of file
+//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
index ac54e5738f97..3ebcb084abc1 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","setIsDarkMode","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,EAAaG,aAAb,IAA8B,qBAAS,CAAT,CAApC;AAEA,wBAAU,SAASC,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOJ,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [isDarkMode, setIsDarkMode] = useState(0);\n\n  useEffect(function useEffectCreate() {\n    // Here is where we may listen to a \"theme\" event...\n  }, []);\n\n  return isDarkMode;\n}"]}
\ No newline at end of file
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
index dbdc0b3ade5e..05aedb938b71 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
@@ -23,5 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
-//# sourceURL=ComponentWithExternalCustomHooks.js
\ No newline at end of file
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
index b51d2b2c843a..19134738824b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
@@ -25,5 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=Example.js.map
-//# sourceURL=Example.js
\ No newline at end of file
+//# sourceMappingURL=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
index 4d025dab5851..388aeda62b30 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
@@ -18,5 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=InlineRequire.js.map
-//# sourceURL=InlineRequire.js
\ No newline at end of file
+//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
index d9cca2b089ca..a6eb863b661f 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
@@ -103,5 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=ToDoList.js.map
-//# sourceURL=ToDoList.js
\ No newline at end of file
+//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
new file mode 100644
index 000000000000..060a736cf1ab
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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, "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 _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
new file mode 100644
index 000000000000..0cd3aeaca077
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\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-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
index b32aa123308b..95bb454253ec 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
@@ -24,5 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=useTheme.js.map
-//# sourceURL=useTheme.js
\ No newline at end of file
+//# sourceMappingURL=useTheme.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
index 85ac8a37c89f..a382725a5384 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
@@ -33,10 +33,9 @@ function Component() {
 }
 
 function useIsDarkMode() {
-  const [isDarkMode, setIsDarkMode] = (0, _react.useState)(0);
+  const [isDarkMode] = (0, _react.useState)(false);
   (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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwic2V0SXNEYXJrTW9kZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFDQSxRQUFNQyxVQUFVLEdBQUdDLGFBQWEsRUFBaEM7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNQyxXQUFXLEdBQUcsTUFBTUgsUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJFLFVBQWpCLENBREYsZUFFRSxxREFBYUYsS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUk7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNELGFBQVQsR0FBeUI7QUFDdkIsUUFBTSxDQUFDRCxVQUFELEVBQWFHLGFBQWIsSUFBOEIscUJBQVMsQ0FBVCxDQUFwQztBQUVBLHdCQUFVLFNBQVNDLGVBQVQsR0FBMkIsQ0FDbkM7QUFDRCxHQUZELEVBRUcsRUFGSDtBQUlBLFNBQU9KLFVBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW2lzRGFya01vZGUsIHNldElzRGFya01vZGVdID0gdXNlU3RhdGUoMCk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufSJdfQ==
-//# sourceURL=ComponentWithCustomHook.js
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
index b9812467b7f6..fc925fdd5c2d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
@@ -23,5 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXX0=
-//# sourceURL=ComponentWithExternalCustomHooks.js
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
index ea6b7e4b9881..1902dd97ec68 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
@@ -25,5 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==
-//# sourceURL=Example.js
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
index 3492fe273279..83458fd428fa 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
@@ -18,5 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl19
-//# sourceURL=InlineRequire.js
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
index b196f598b6d6..a5a2b216cf73 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
@@ -103,5 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19
-//# sourceURL=ToDoList.js
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
new file mode 100644
index 000000000000..429ebfbbcf6c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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, "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 _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIEV4YW1wbGV9IGZyb20gJy4vRXhhbXBsZSc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBJbmxpbmVSZXF1aXJlfSBmcm9tICcuL0lubGluZVJlcXVpcmUnO1xuaW1wb3J0ICogYXMgVG9Eb0xpc3QgZnJvbSAnLi9Ub0RvTGlzdCc7XG5leHBvcnQge1RvRG9MaXN0fTtcbmV4cG9ydCB7ZGVmYXVsdCBhcyB1c2VUaGVtZX0gZnJvbSAnLi91c2VUaGVtZSc7XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
index 1122f6ab69e3..0703c679363c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
@@ -24,5 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl19
-//# sourceURL=useTheme.js
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
new file mode 100644
index 000000000000..a4f204fe19f9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';
+export {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';
+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-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 3a65b3709d26..e1efe7c32caa 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -33,25 +33,18 @@ describe('parseHookNames', () => {
 
     // Jest (jest-runner?) configures Errors to automatically account for source maps.
     // This changes behavior between our tests and the browser.
-    // To "fix" this, clear the prepareStackTrace() method on the Error object.
-    delete Error.prepareStackTrace;
+    // 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;
+    };
 
     fetchMock.mockIf(/.+$/, request => {
-      const {resolve} = require('path');
-      const url = request.url;
-      if (url.endsWith('js.map')) {
-        // Source maps are relative URLs (e.g. "path/to/Exmaple.js" specifies "Exmaple.js.map").
-        const sourceMapURL = resolve(
-          __dirname,
-          '__source__',
-          '__compiled__',
-          'external',
-          url,
-        );
-        return Promise.resolve(requireText(sourceMapURL, 'utf8'));
-      } else {
-        return Promise.resolve(requireText(url, 'utf8'));
-      }
+      return Promise.resolve(requireText(request.url, 'utf8'));
     });
 
     // Mock out portion of browser API used by parseHookNames to initialize "source-map".
@@ -185,10 +178,10 @@ describe('parseHookNames', () => {
     ]);
   });
 
-  describe('inline and external source maps', () => {
+  describe('inline, external and bundle source maps', () => {
     it('should work for simple components', async () => {
-      async function test(path) {
-        const Component = require(path).Component;
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
         const hookNames = await getHookNamesForComponent(Component);
         expectHookNamesToEqual(hookNames, [
           'count', // useState
@@ -198,11 +191,12 @@ describe('parseHookNames', () => {
       await test('./__source__/Example'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/Example'); // inline source map
       await test('./__source__/__compiled__/external/Example'); // external source map
+      await test('./__source__/__compiled__/bundle/index', 'Example'); // bundle source map
     });
 
     it('should work with more complex files and components', async () => {
-      async function test(path) {
-        const components = require(path);
+      async function test(path, name = undefined) {
+        const components = name != null ? require(path)[name] : require(path);
 
         let hookNames = await getHookNamesForComponent(components.List);
         expectHookNamesToEqual(hookNames, [
@@ -228,11 +222,12 @@ describe('parseHookNames', () => {
       await test('./__source__/ToDoList'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/ToDoList'); // inline source map
       await test('./__source__/__compiled__/external/ToDoList'); // external source map
+      await test('./__source__/__compiled__/bundle', 'ToDoList'); // bundle source map
     });
 
     it('should work for custom hook', async () => {
-      async function test(path) {
-        const Component = require(path).Component;
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
         const hookNames = await getHookNamesForComponent(Component);
         expectHookNamesToEqual(hookNames, [
           'count', // useState()
@@ -244,11 +239,12 @@ describe('parseHookNames', () => {
       await test('./__source__/ComponentWithCustomHook'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/ComponentWithCustomHook'); // inline source map
       await test('./__source__/__compiled__/external/ComponentWithCustomHook'); // external source map
+      await test('./__source__/__compiled__/bundle', 'ComponentWithCustomHook'); // bundle source map
     });
 
     it('should work for external hooks', async () => {
-      async function test(path) {
-        const Component = require(path).Component;
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
         const hookNames = await getHookNamesForComponent(Component);
         expectHookNamesToEqual(hookNames, [
           'theme', // useTheme()
@@ -265,14 +261,18 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ComponentWithExternalCustomHooks',
       ); // external source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ComponentWithExternalCustomHooks',
+      ); // bundle 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).
     xit('should work for inline requires', async () => {
-      async function test(path) {
-        const Component = require(path).Component;
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
         const hookNames = await getHookNamesForComponent(Component);
         expectHookNamesToEqual(hookNames, [
           'count', // useState()
@@ -282,6 +282,7 @@ describe('parseHookNames', () => {
       await test('./__source__/InlineRequire'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/InlineRequire'); // inline source map
       await test('./__source__/__compiled__/external/InlineRequire'); // external source map
+      await test('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map
     });
   });
 });
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
index 590cd36cc63c..231bdee52126 100644
--- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -9,16 +9,23 @@ const {
 } = require('fs');
 const {emptyDirSync} = require('fs-extra');
 const {resolve} = require('path');
+const rollup = require('rollup');
+const babel = require('rollup-plugin-babel');
+const commonjs = require('rollup-plugin-commonjs');
+const jsx = require('acorn-jsx');
+const rollupResolve = require('rollup-plugin-node-resolve');
 
 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');
 
 // Remove previous builds
 emptyDirSync(buildRoot);
 mkdirSync(externalDir);
 mkdirSync(inlineDir);
+mkdirSync(bundleDir);
 
 function compile(fileName) {
   const code = readFileSync(resolve(sourceDir, fileName), 'utf8');
@@ -44,9 +51,7 @@ function compile(fileName) {
   // Generate compiled output with external source maps
   writeFileSync(
     resolve(externalDir, fileName),
-    transformed.code +
-      `\n//# sourceMappingURL=${fileName}.map` +
-      `\n//# sourceURL=${fileName}`,
+    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
     'utf8',
   );
   writeFileSync(
@@ -60,12 +65,32 @@ function compile(fileName) {
     resolve(inlineDir, fileName),
     transformed.code +
       '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
-      btoa(JSON.stringify(sourceMap)) +
-      `\n//# sourceURL=${fileName}`,
+      btoa(JSON.stringify(sourceMap)),
     '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({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 => {
@@ -74,3 +99,8 @@ entries.forEach(entry => {
     compile(entry);
   }
 });
+
+bundle().catch(e => {
+  console.error(e);
+  process.exit(1);
+});
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index cc976bbd198a..dff938c9d381 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -20,14 +20,6 @@ export type SourceFileASTWithHookDetails = {
   source: string,
 };
 
-export type SourceMap = {|
-  mappings: string,
-  names: Array<string>,
-  sources: Array<string>,
-  sourcesContent: Array<string>,
-  version: number,
-|};
-
 const AST_NODE_TYPES = Object.freeze({
   CALL_EXPRESSION: 'CallExpression',
   MEMBER_EXPRESSION: 'MemberExpression',
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index f2d74dc29294..dc2b8b3c4bc9 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -24,7 +24,7 @@ import type {
 } from 'react-debug-tools/src/ReactDebugHooks';
 import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
 import type {Thenable} from 'shared/ReactTypes';
-import type {SourceConsumer, SourceMap} from './astUtils';
+import type {SourceConsumer} from './astUtils';
 
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const ABSOLUTE_URL_REGEX = /^https?:\/\//i;
@@ -43,36 +43,36 @@ type HookSourceData = {|
   // 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,
+
   // 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,
+
   // APIs from source-map for parsing source maps (if detected).
   sourceConsumer: SourceConsumer | null,
 
   // External URL of source map.
   // Sources without source maps (or with inline source maps) won't have this.
   sourceMapURL: string | null,
-
-  // Parsed source map object.
-  sourceMapContents: SourceMap | null,
 |};
 
-type CachedMetadata = {|
-  originalSourceAST: AST,
-  originalSourceCode: string,
+type CachedRuntimeCodeMetadata = {|
   sourceConsumer: SourceConsumer | null,
 |};
 
-// On large trees, encoding takes significant time.
-// Try to reuse the already encoded strings.
-const fileNameToMetadataCache: LRUCache<string, CachedMetadata> = new LRU({
+const runtimeURLToMetadataCache: LRUCache<
+  string,
+  CachedRuntimeCodeMetadata,
+> = new LRU({
   max: 50,
-  dispose: (fileName: string, metadata: CachedMetadata) => {
+  dispose: (runtimeSourceURL: string, metadata: CachedRuntimeCodeMetadata) => {
     if (__DEBUG__) {
       console.log(
-        'fileNameToHookSourceData.dispose() Evicting cached metadata for "' +
-          fileName +
-          '"',
+        `runtimeURLToMetadataCache.dispose() Evicting cached metadata for "${runtimeSourceURL}"`,
       );
     }
 
@@ -83,6 +83,36 @@ const fileNameToMetadataCache: LRUCache<string, CachedMetadata> = new LRU({
   },
 });
 
+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}"`,
+      );
+    }
+  },
+});
+
+function getLocationKey({
+  fileName,
+  lineNumber,
+  columnNumber,
+}: HookSource): string {
+  if (fileName == null || lineNumber == null || columnNumber == null) {
+    throw Error('Hook source code location not found.');
+  }
+  return `${fileName}:${lineNumber}:${columnNumber}`;
+}
+
 export default async function parseHookNames(
   hooksTree: HooksTree,
 ): Thenable<HookNames | null> {
@@ -97,8 +127,8 @@ export default async function parseHookNames(
     console.log('parseHookNames() hooksList:', hooksList);
   }
 
-  // Gather the unique set of source files to load for the built-in hooks.
-  const fileNameToHookSourceData: Map<string, HookSourceData> = new Map();
+  // Create map of unique source locations (file names plus line and column numbers) to metadata about hooks.
+  const locationKeyToHookSourceData: Map<string, HookSourceData> = new Map();
   for (let i = 0; i < hooksList.length; i++) {
     const hook = hooksList[i];
 
@@ -109,50 +139,47 @@ export default async function parseHookNames(
       throw Error('Hook source code location not found.');
     }
 
-    const fileName = hookSource.fileName;
-    if (fileName == null) {
-      throw Error('Hook source code location not found.');
-    } else {
-      if (!fileNameToHookSourceData.has(fileName)) {
-        const hookSourceData: HookSourceData = {
-          hookSource,
-          originalSourceAST: null,
-          originalSourceCode: null,
-          runtimeSourceCode: null,
-          sourceConsumer: null,
-          sourceMapURL: null,
-          sourceMapContents: null,
-        };
-
-        // If we've already loaded source/source map info for this file,
-        // we can skip reloading it (and more importantly, re-parsing it).
-        const metadata = fileNameToMetadataCache.get(fileName);
-        if (metadata != null) {
-          if (__DEBUG__) {
-            console.groupCollapsed(
-              'parseHookNames() Found cached metadata for file "' +
-                fileName +
-                '"',
-            );
-            console.log(metadata);
-            console.groupEnd();
-          }
-
-          hookSourceData.originalSourceAST = metadata.originalSourceAST;
-          hookSourceData.originalSourceCode = metadata.originalSourceCode;
-          hookSourceData.sourceConsumer = metadata.sourceConsumer;
+    const locationKey = getLocationKey(hookSource);
+    if (!locationKeyToHookSourceData.has(locationKey)) {
+      // Can't be null because getLocationKey() would have thrown
+      const runtimeSourceURL = ((hookSource.fileName: any): string);
+
+      const hookSourceData: HookSourceData = {
+        hookSource,
+        originalSourceAST: null,
+        originalSourceCode: null,
+        originalSourceURL: null,
+        runtimeSourceCode: null,
+        runtimeSourceURL,
+        sourceConsumer: null,
+        sourceMapURL: null,
+      };
+
+      // 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(
+        hookSourceData.runtimeSourceURL,
+      );
+      if (runtimeMetadata != null) {
+        if (__DEBUG__) {
+          console.groupCollapsed(
+            `parseHookNames() Found cached runtime metadata for file "${hookSourceData.runtimeSourceURL}"`,
+          );
+          console.log(runtimeMetadata);
+          console.groupEnd();
         }
-
-        fileNameToHookSourceData.set(fileName, hookSourceData);
+        hookSourceData.sourceConsumer = runtimeMetadata.sourceConsumer;
       }
+
+      locationKeyToHookSourceData.set(locationKey, hookSourceData);
     }
   }
 
-  return loadSourceFiles(fileNameToHookSourceData)
-    .then(() => extractAndLoadSourceMaps(fileNameToHookSourceData))
-    .then(() => parseSourceAST(fileNameToHookSourceData))
-    .then(() => updateLruCache(fileNameToHookSourceData))
-    .then(() => findHookNames(hooksList, fileNameToHookSourceData));
+  return loadSourceFiles(locationKeyToHookSourceData)
+    .then(() => extractAndLoadSourceMaps(locationKeyToHookSourceData))
+    .then(() => parseSourceAST(locationKeyToHookSourceData))
+    .then(() => updateLruCache(locationKeyToHookSourceData))
+    .then(() => findHookNames(hooksList, locationKeyToHookSourceData));
 }
 
 function decodeBase64String(encoded: string): Object {
@@ -170,12 +197,31 @@ function decodeBase64String(encoded: string): Object {
 }
 
 function extractAndLoadSourceMaps(
-  fileNameToHookSourceData: Map<string, HookSourceData>,
+  locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {
-  const promises = [];
-  fileNameToHookSourceData.forEach(hookSourceData => {
-    if (hookSourceData.originalSourceAST !== null) {
-      // Use cached metadata.
+  // SourceMapConsumer.initialize() does nothing when running in Node (aka Jest)
+  // because the wasm file is automatically read from the file system
+  // so we can avoid triggering a warning message about this.
+  if (!__TEST__) {
+    if (__DEBUG__) {
+      console.log(
+        'extractAndLoadSourceMaps() Initializing source-map library ...',
+      );
+    }
+
+    // $FlowFixMe
+    const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
+
+    SourceMapConsumer.initialize({'lib/mappings.wasm': wasmMappingsURL});
+  }
+
+  // Deduplicate fetches, since there can be multiple location keys per source map.
+  const fetchPromises = new Map();
+
+  const setPromises = [];
+  locationKeyToHookSourceData.forEach(hookSourceData => {
+    if (hookSourceData.sourceConsumer != null) {
+      // Use cached source map consumer.
       return;
     }
 
@@ -189,9 +235,13 @@ function extractAndLoadSourceMaps(
       }
     } else {
       for (let i = 0; i < sourceMappingURLs.length; i++) {
+        const {runtimeSourceURL} = hookSourceData;
         const sourceMappingURL = sourceMappingURLs[i];
         const index = sourceMappingURL.indexOf('base64,');
         if (index >= 0) {
+          // 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.
@@ -211,13 +261,17 @@ function extractAndLoadSourceMaps(
 
           // 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"
-          const fileName = ((hookSourceData.hookSource.fileName: any): string);
           const match = parsed.sources.find(
             source =>
-              source === 'Inline Babel script' || fileName.includes(source),
+              source === 'Inline Babel script' ||
+              runtimeSourceURL.endsWith(source),
           );
           if (match) {
-            hookSourceData.sourceMapContents = parsed;
+            setPromises.push(
+              new SourceMapConsumer(parsed).then(sourceConsumer => {
+                hookSourceData.sourceConsumer = sourceConsumer;
+              }),
+            );
             break;
           }
         } else {
@@ -227,7 +281,7 @@ function extractAndLoadSourceMaps(
             );
           }
 
-          let url = sourceMappingURLs[0].split('=')[1];
+          let url = sourceMappingURLs[i].split('=')[1];
           if (ABSOLUTE_URL_REGEX.test(url)) {
             const baseURL = url.slice(0, url.lastIndexOf('/'));
             url = `${baseURL}/${url}`;
@@ -235,19 +289,38 @@ function extractAndLoadSourceMaps(
             if (!isValidUrl(url)) {
               throw new Error(`Invalid source map URL "${url}"`);
             }
+          } else if (!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}`;
+            }
           }
 
           hookSourceData.sourceMapURL = url;
 
-          if (__DEBUG__) {
-            console.log(
-              'extractAndLoadSourceMaps() External source map "' + url + '"',
+          const fetchPromise =
+            fetchPromises.get(url) ||
+            fetchFile(url).then(
+              sourceMapContents =>
+                new SourceMapConsumer(JSON.parse(sourceMapContents)),
             );
+          if (__DEBUG__) {
+            if (!fetchPromises.has(url)) {
+              console.log(
+                `extractAndLoadSourceMaps() External source map "${url}"`,
+              );
+            }
           }
 
-          promises.push(
-            fetchFile(url).then(sourceMapContents => {
-              hookSourceData.sourceMapContents = JSON.parse(sourceMapContents);
+          fetchPromises.set(url, fetchPromise);
+          setPromises.push(
+            fetchPromise.then(sourceConsumer => {
+              hookSourceData.sourceConsumer = sourceConsumer;
             }),
           );
           break;
@@ -255,7 +328,7 @@ function extractAndLoadSourceMaps(
       }
     }
   });
-  return Promise.all(promises);
+  return Promise.all(setPromises);
 }
 
 function fetchFile(url: string): Promise<string> {
@@ -268,9 +341,15 @@ function fetchFile(url: string): Promise<string> {
             resolve(text);
           })
           .catch(error => {
+            if (__DEBUG__) {
+              console.log(`fetchFile() Could not read text for url "${url}"`);
+            }
             reject(null);
           });
       } else {
+        if (__DEBUG__) {
+          console.log(`fetchFile() Got bad response for url "${url}"`);
+        }
         reject(null);
       }
     });
@@ -279,11 +358,13 @@ function fetchFile(url: string): Promise<string> {
 
 function findHookNames(
   hooksList: Array<HooksNode>,
-  fileNameToHookSourceData: Map<string, HookSourceData>,
+  locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): HookNames {
   const map: HookNames = new Map();
 
   hooksList.map(hook => {
+    // TODO (named hooks) We should probably filter before this point,
+    // otherwise we are loading and parsing source maps and ASTs for nothing.
     if (isNonDeclarativePrimitiveHook(hook)) {
       if (__DEBUG__) {
         console.log('findHookNames() Non declarative primitive hook');
@@ -300,7 +381,8 @@ function findHookNames(
       return null; // Should not be reachable.
     }
 
-    const hookSourceData = fileNameToHookSourceData.get(fileName);
+    const locationKey = getLocationKey(hookSource);
+    const hookSourceData = locationKeyToHookSourceData.get(locationKey);
     if (!hookSourceData) {
       return null; // Should not be reachable.
     }
@@ -321,7 +403,10 @@ function findHookNames(
     } else {
       originalSourceLineNumber = sourceConsumer.originalPositionFor({
         line: lineNumber,
-        column: columnNumber,
+
+        // Column numbers are representated differently between tools/engines.
+        // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
+        column: columnNumber - 1,
       }).line;
     }
 
@@ -346,7 +431,7 @@ function findHookNames(
     );
 
     if (__DEBUG__) {
-      console.log('findHookNames() Found name "' + (name || '-') + '"');
+      console.log(`findHookNames() Found name "${name || '-'}"`);
     }
 
     map.set(hook, name);
@@ -366,103 +451,133 @@ function isValidUrl(possibleURL: string): boolean {
 }
 
 function loadSourceFiles(
-  fileNameToHookSourceData: Map<string, HookSourceData>,
+  locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {
-  const promises = [];
-  fileNameToHookSourceData.forEach((hookSourceData, fileName) => {
-    promises.push(
-      fetchFile(fileName).then(runtimeSourceCode => {
+  // Deduplicate fetches, since there can be multiple location keys per file.
+  const fetchPromises = new Map();
+
+  const setPromises = [];
+  locationKeyToHookSourceData.forEach(hookSourceData => {
+    const {runtimeSourceURL} = hookSourceData;
+    const fetchPromise =
+      fetchPromises.get(runtimeSourceURL) ||
+      fetchFile(runtimeSourceURL).then(runtimeSourceCode => {
         if (runtimeSourceCode.length > MAX_SOURCE_LENGTH) {
           throw Error('Source code too large to parse');
         }
-
         if (__DEBUG__) {
           console.groupCollapsed(
-            'loadSourceFiles() fileName "' + fileName + '"',
+            `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`,
           );
           console.log(runtimeSourceCode);
           console.groupEnd();
         }
-
+        return runtimeSourceCode;
+      });
+    fetchPromises.set(runtimeSourceURL, fetchPromise);
+    setPromises.push(
+      fetchPromise.then(runtimeSourceCode => {
         hookSourceData.runtimeSourceCode = runtimeSourceCode;
       }),
     );
   });
-  return Promise.all(promises);
+  return Promise.all(setPromises);
 }
 
 async function parseSourceAST(
-  fileNameToHookSourceData: Map<string, HookSourceData>,
+  locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {
-  // SourceMapConsumer.initialize() does nothing when running in Node (aka Jest)
-  // because the wasm file is automatically read from the file system
-  // so we can avoid triggering a warning message about this.
-  if (!__TEST__) {
-    if (__DEBUG__) {
-      console.log('parseSourceAST() Initializing source-map library ...');
-    }
-
-    // $FlowFixMe
-    const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
-
-    SourceMapConsumer.initialize({'lib/mappings.wasm': wasmMappingsURL});
-  }
-
-  const promises = [];
-  fileNameToHookSourceData.forEach(hookSourceData => {
+  locationKeyToHookSourceData.forEach(hookSourceData => {
     if (hookSourceData.originalSourceAST !== null) {
       // Use cached metadata.
       return;
     }
 
-    const {runtimeSourceCode, sourceMapContents} = hookSourceData;
-    if (sourceMapContents !== null) {
+    const {sourceConsumer} = hookSourceData;
+    const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
+    let originalSourceURL, originalSourceCode;
+    if (sourceConsumer !== null) {
       // Parse and extract the AST from the source map.
-      promises.push(
-        SourceMapConsumer.with(
-          sourceMapContents,
-          null,
-          (sourceConsumer: SourceConsumer) => {
-            hookSourceData.sourceConsumer = sourceConsumer;
-
-            // Now that the source map has been loaded,
-            // extract the original source for later.
-            const source = sourceMapContents.sources[0];
-            const originalSourceCode = sourceConsumer.sourceContentFor(
-              source,
-              true,
-            );
+      const {lineNumber, columnNumber} = hookSourceData.hookSource;
+      if (lineNumber == null || columnNumber == null) {
+        throw Error('Hook source code location not found.');
+      }
+      // Now that the source map has been loaded,
+      // extract the original source for later.
+      const {source} = sourceConsumer.originalPositionFor({
+        line: lineNumber,
 
-            if (__DEBUG__) {
-              console.groupCollapsed(
-                'parseSourceAST() Extracted source code from source map',
-              );
-              console.log(originalSourceCode);
-              console.groupEnd();
-            }
+        // Column numbers are representated differently between tools/engines.
+        // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
+        column: columnNumber - 1,
+      });
+
+      if (source == null) {
+        // TODO (named hooks) maybe fall back to the runtime source instead of throwing?
+        throw new Error(
+          'Could not map hook runtime location to original source location',
+        );
+      }
 
-            hookSourceData.originalSourceCode = originalSourceCode;
+      // TODO (named hooks) maybe canonicalize this URL somehow?
+      // It can be relative if the source map specifies it that way,
+      // but we use it as a cache key across different source maps and there can be collisions.
+      originalSourceURL = (source: string);
+      originalSourceCode = (sourceConsumer.sourceContentFor(
+        source,
+        true,
+      ): string);
 
-            // TODO Parsing should ideally be done off of the main thread.
-            hookSourceData.originalSourceAST = parse(originalSourceCode, {
-              sourceType: 'unambiguous',
-              plugins: ['jsx', 'typescript'],
-            });
-          },
-        ),
-      );
+      if (__DEBUG__) {
+        console.groupCollapsed(
+          'parseSourceAST() Extracted source code from source map',
+        );
+        console.log(originalSourceCode);
+        console.groupEnd();
+      }
     } else {
       // There's no source map to parse here so we can just parse the original source itself.
-      hookSourceData.originalSourceCode = runtimeSourceCode;
+      originalSourceCode = runtimeSourceCode;
+      // TODO (named hooks) This mixes runtimeSourceURLs with source mapped URLs in the same cache key space.
+      // Namespace them?
+      originalSourceURL = hookSourceData.runtimeSourceURL;
+    }
+
+    hookSourceData.originalSourceCode = originalSourceCode;
+    hookSourceData.originalSourceURL = originalSourceURL;
 
-      // TODO Parsing should ideally be done off of the main thread.
-      hookSourceData.originalSourceAST = parse(runtimeSourceCode, {
+    // 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();
+      }
+      hookSourceData.originalSourceAST = sourceMetadata.originalSourceAST;
+      hookSourceData.originalSourceCode = sourceMetadata.originalSourceCode;
+    } else {
+      // TODO (named hooks) Parsing should ideally be done off of the main thread.
+      const originalSourceAST = parse(originalSourceCode, {
         sourceType: 'unambiguous',
         plugins: ['jsx', 'typescript'],
       });
+      hookSourceData.originalSourceAST = originalSourceAST;
+      if (__DEBUG__) {
+        console.log(
+          `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
+        );
+      }
+      originalURLToMetadataCache.set(originalSourceURL, {
+        originalSourceAST,
+        originalSourceCode,
+      });
     }
   });
-  return Promise.all(promises);
+  return Promise.resolve();
 }
 
 function flattenHooksList(
@@ -479,23 +594,21 @@ function flattenHooksList(
 }
 
 function updateLruCache(
-  fileNameToHookSourceData: Map<string, HookSourceData>,
+  locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {
-  fileNameToHookSourceData.forEach(
-    ({originalSourceAST, originalSourceCode, sourceConsumer}, fileName) => {
-      // Only set once to avoid triggering eviction/cleanup code.
-      if (!fileNameToMetadataCache.has(fileName)) {
-        if (__DEBUG__) {
-          console.log('updateLruCache() Caching metada for "' + fileName + '"');
-        }
-
-        fileNameToMetadataCache.set(fileName, {
-          originalSourceAST,
-          originalSourceCode: ((originalSourceCode: any): string),
-          sourceConsumer,
-        });
+  locationKeyToHookSourceData.forEach(({sourceConsumer, runtimeSourceURL}) => {
+    // Only set once to avoid triggering eviction/cleanup code.
+    if (!runtimeURLToMetadataCache.has(runtimeSourceURL)) {
+      if (__DEBUG__) {
+        console.log(
+          `updateLruCache() Caching runtime metadata for "${runtimeSourceURL}"`,
+        );
       }
-    },
-  );
+
+      runtimeURLToMetadataCache.set(runtimeSourceURL, {
+        sourceConsumer,
+      });
+    }
+  });
   return Promise.resolve();
 }
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 6b3ca25af28e..1b979c8e1916 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -9,6 +9,7 @@
 
 import {unstable_getCacheForType as getCacheForType} from 'react';
 import {enableHookNameParsing} from 'react-devtools-feature-flags';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
 
 import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
@@ -108,6 +109,10 @@ export function loadHookNames(
           return;
         }
 
+        if (__DEBUG__) {
+          console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
+        }
+
         if (hookNames) {
           const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
           resolvedRecord.status = Resolved;
@@ -121,6 +126,10 @@ export function loadHookNames(
         wake();
       },
       function onError(error) {
+        if (__DEBUG__) {
+          console.log('[hookNamesCache] onError() error:', error);
+        }
+
         if (didTimeout) {
           return;
         }
@@ -134,7 +143,11 @@ export function loadHookNames(
     );
 
     // Eventually timeout and stop trying to load names.
-    let timeoutID = setTimeout(() => {
+    let timeoutID = setTimeout(function onTimeout() {
+      if (__DEBUG__) {
+        console.log('[hookNamesCache] onTimeout()');
+      }
+
       timeoutID = null;
 
       didTimeout = true;

From 42b3c89c57a6b7027a6599785d63f47f809fda26 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 7 Jul 2021 14:24:17 -0400
Subject: [PATCH 0663/1603] DevTooks: Don't dehydrate hook source fileNames
 (#21814)

---
 .../src/parseHookNames.js                     | 20 +------------------
 .../src/backend/renderer.js                   | 11 ++++++++++
 .../react-devtools-shared/src/hydration.js    |  7 ++++++-
 3 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index dc2b8b3c4bc9..9d183375e805 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -27,7 +27,6 @@ import type {Thenable} from 'shared/ReactTypes';
 import type {SourceConsumer} from './astUtils';
 
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
-const ABSOLUTE_URL_REGEX = /^https?:\/\//i;
 const MAX_SOURCE_LENGTH = 100_000_000;
 
 type AST = mixed;
@@ -282,14 +281,7 @@ function extractAndLoadSourceMaps(
           }
 
           let url = sourceMappingURLs[i].split('=')[1];
-          if (ABSOLUTE_URL_REGEX.test(url)) {
-            const baseURL = url.slice(0, url.lastIndexOf('/'));
-            url = `${baseURL}/${url}`;
-
-            if (!isValidUrl(url)) {
-              throw new Error(`Invalid source map URL "${url}"`);
-            }
-          } else if (!url.startsWith('/')) {
+          if (!url.startsWith('http') && !url.startsWith('/')) {
             // Resolve paths relative to the location of the file name
             const lastSlashIdx = runtimeSourceURL.lastIndexOf('/');
             if (lastSlashIdx !== -1) {
@@ -440,16 +432,6 @@ function findHookNames(
   return map;
 }
 
-function isValidUrl(possibleURL: string): boolean {
-  try {
-    // eslint-disable-next-line no-new
-    new URL(possibleURL);
-  } catch (_) {
-    return false;
-  }
-  return true;
-}
-
 function loadSourceFiles(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index d56819a8ba0b..57b3de2e08a4 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -3240,6 +3240,17 @@ export function attach(
             // 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'
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 2c2d69608937..0b936462d5fe 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -160,7 +160,12 @@ export function dehydrate(
       };
 
     case 'string':
-      return data.length <= 500 ? data : data.slice(0, 500) + '...';
+      isPathAllowedCheck = isPathAllowed(path);
+      if (isPathAllowedCheck) {
+        return data;
+      } else {
+        return data.length <= 500 ? data : data.slice(0, 500) + '...';
+      }
 
     case 'bigint':
       cleaned.push(path);

From b6258b05f4ea16776557bc370ee0892604504d8f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 7 Jul 2021 14:29:41 -0400
Subject: [PATCH 0664/1603] DevTools named hooks: Support FLow syntax (#21815)

Detect Flow pragma (@flow) and use Flow plug-in instead of TypeScript (default)
---
 packages/react-devtools-extensions/src/parseHookNames.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index 9d183375e805..bd4a7e63838e 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -542,10 +542,15 @@ async function parseSourceAST(
       hookSourceData.originalSourceAST = sourceMetadata.originalSourceAST;
       hookSourceData.originalSourceCode = sourceMetadata.originalSourceCode;
     } else {
+      // 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) Parsing should ideally be done off of the main thread.
       const originalSourceAST = parse(originalSourceCode, {
         sourceType: 'unambiguous',
-        plugins: ['jsx', 'typescript'],
+        plugins: ['jsx', plugin],
       });
       hookSourceData.originalSourceAST = originalSourceAST;
       if (__DEBUG__) {

From 9ccc25a0ea322b39ea04f8dfc03620ea90e0da94 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 7 Jul 2021 15:07:55 -0400
Subject: [PATCH 0665/1603] Reverting recent flushSync changes (#21816)

---
 .../__snapshots__/profilingCache-test.js.snap |  28 ++--
 .../src/__tests__/ReactDOMFiber-test.js       |   8 +-
 .../src/__tests__/ReactMount-test.js          |  12 +-
 packages/react-dom/src/client/ReactDOM.js     |   4 +-
 .../react-dom/src/client/ReactDOMLegacy.js    |   6 +-
 .../src/events/ReactDOMUpdateBatching.js      |   8 +-
 packages/react-noop-renderer/src/ReactNoop.js |   2 +
 .../src/ReactNoopPersistent.js                |   1 +
 .../src/createReactNoop.js                    |   4 +
 .../src/ReactFiberReconciler.js               |  15 +-
 .../src/ReactFiberReconciler.new.js           |   6 +-
 .../src/ReactFiberReconciler.old.js           |   6 +-
 .../src/ReactFiberWorkLoop.new.js             | 144 +++++++++++++-----
 .../src/ReactFiberWorkLoop.old.js             | 144 +++++++++++++-----
 .../src/__tests__/ReactFlushSync-test.js      |  23 ---
 .../ReactIncrementalScheduling-test.js        |  59 +++++++
 16 files changed, 338 insertions(+), 132 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 2ab8751e3cbc..b27231efdffc 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -40,7 +40,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 16,
   "updaters": Array [
     Object {
@@ -87,7 +87,7 @@ Object {
     4 => 2,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 15,
   "updaters": Array [
     Object {
@@ -186,7 +186,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 12,
   "updaters": Array [
     Object {
@@ -445,7 +445,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 12,
           "updaters": Array [
             Object {
@@ -938,7 +938,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 11,
           "updaters": Array [
             Object {
@@ -1597,7 +1597,7 @@ Object {
         17 => 1,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
+      "priorityLevel": "Normal",
       "timestamp": 24,
       "updaters": Array [
         Object {
@@ -1687,7 +1687,7 @@ Object {
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
       "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
+      "priorityLevel": "Normal",
       "timestamp": 34,
       "updaters": Array [
         Object {
@@ -2223,7 +2223,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 24,
           "updaters": Array [
             Object {
@@ -2310,7 +2310,7 @@ Object {
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 34,
           "updaters": Array [
             Object {
@@ -2431,7 +2431,7 @@ Object {
         2 => 0,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
+      "priorityLevel": "Normal",
       "timestamp": 0,
       "updaters": Array [
         Object {
@@ -2506,7 +2506,7 @@ Object {
     3 => 0,
   },
   "passiveEffectDuration": 0,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -2715,7 +2715,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 0,
           "updaters": Array [
             Object {
@@ -3071,7 +3071,7 @@ Object {
     7 => 0,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
+  "priorityLevel": "Normal",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -3515,7 +3515,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "priorityLevel": "Normal",
           "timestamp": 0,
           "updaters": Array [
             Object {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index ff1ea1771fc8..36c8367af5d4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1154,13 +1154,19 @@ describe('ReactDOMFiber', () => {
     expect(ops).toEqual(['A']);
 
     if (__DEV__) {
-      expect(console.error.calls.count()).toBe(2);
+      const errorCalls = console.error.calls.count();
       expect(console.error.calls.argsFor(0)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
       expect(console.error.calls.argsFor(1)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
+      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
+      for (let i = 2; i < errorCalls; i++) {
+        expect(console.error.calls.argsFor(i)[0]).toMatch(
+          'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
+        );
+      }
     }
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
index 9571905edaf5..a214c32f58d0 100644
--- a/packages/react-dom/src/__tests__/ReactMount-test.js
+++ b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -277,7 +277,7 @@ describe('ReactMount', () => {
     expect(calls).toBe(5);
   });
 
-  it('initial mount of legacy root is sync inside batchedUpdates, as if it were wrapped in flushSync', () => {
+  it('initial mount is sync inside batchedUpdates, but task work is deferred until the end of the batch', () => {
     const container1 = document.createElement('div');
     const container2 = document.createElement('div');
 
@@ -302,12 +302,12 @@ describe('ReactMount', () => {
 
       // 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!');
+      // The update did not flush yet.
+      expect(container1.textContent).toEqual('1');
+      // The initial mount flushed, but not the update scheduled in cDM.
+      expect(container2.textContent).toEqual('a');
     });
+    // All updates have flushed.
     expect(container1.textContent).toEqual('2');
     expect(container2.textContent).toEqual('a!');
   });
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 80fc3d1e4a05..8e974697075f 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -23,8 +23,8 @@ import {createEventHandle} from './ReactDOMEventHandle';
 import {
   batchedUpdates,
   discreteUpdates,
+  flushDiscreteUpdates,
   flushSync,
-  flushSyncWithoutWarningIfAlreadyRendering,
   flushControlled,
   injectIntoDevTools,
   attemptSynchronousHydration,
@@ -100,7 +100,7 @@ setRestoreImplementation(restoreControlledState);
 setBatchingImplementation(
   batchedUpdates,
   discreteUpdates,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  flushDiscreteUpdates,
 );
 
 function createPortal(
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index f03350cb2924..a62a7fb444c5 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -29,7 +29,7 @@ import {
   createContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  unbatchedUpdates,
   getPublicRootInstance,
   findHostInstance,
   findHostInstanceWithWarning,
@@ -174,7 +174,7 @@ function legacyRenderSubtreeIntoContainer(
       };
     }
     // Initial mount should not be batched.
-    flushSyncWithoutWarningIfAlreadyRendering(() => {
+    unbatchedUpdates(() => {
       updateContainer(children, fiberRoot, parentComponent, callback);
     });
   } else {
@@ -357,7 +357,7 @@ export function unmountComponentAtNode(container: Container) {
     }
 
     // Unmount should not be batched.
-    flushSyncWithoutWarningIfAlreadyRendering(() => {
+    unbatchedUpdates(() => {
       legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
         // $FlowFixMe This should probably use `delete container._reactRootContainer`
         container._reactRootContainer = null;
diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index d3c46630b148..f2fbfe4c3f32 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -23,7 +23,7 @@ let batchedUpdatesImpl = function(fn, bookkeeping) {
 let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
-let flushSyncImpl = function() {};
+let flushDiscreteUpdatesImpl = function() {};
 
 let isInsideEventHandler = false;
 
@@ -39,7 +39,7 @@ function finishEventHandler() {
     // 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.
-    flushSyncImpl();
+    flushDiscreteUpdatesImpl();
     restoreStateIfNeeded();
   }
 }
@@ -67,9 +67,9 @@ export function discreteUpdates(fn, a, b, c, d) {
 export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
-  _flushSyncImpl,
+  _flushDiscreteUpdatesImpl,
 ) {
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
-  flushSyncImpl = _flushSyncImpl;
+  flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
 }
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index a225deaf961f..c09fa2d8000f 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -38,8 +38,10 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
+  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
+  flushDiscreteUpdates,
   flushSync,
   flushPassiveEffects,
   act,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index 86bb87c065e4..97876990a9b5 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -38,6 +38,7 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
+  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
   flushDiscreteUpdates,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 5ea510d73d6e..8dbadafd2c22 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -901,6 +901,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     deferredUpdates: NoopRenderer.deferredUpdates,
 
+    unbatchedUpdates: NoopRenderer.unbatchedUpdates,
+
     discreteUpdates: NoopRenderer.discreteUpdates,
 
     idleUpdates<T>(fn: () => T): T {
@@ -913,6 +915,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
+    flushDiscreteUpdates: NoopRenderer.flushDiscreteUpdates,
+
     flushSync(fn: () => mixed) {
       NoopRenderer.flushSync(fn);
     },
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index d25783164e98..bc169fd8a647 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -18,11 +18,12 @@ import {
   createContainer as createContainer_old,
   updateContainer as updateContainer_old,
   batchedUpdates as batchedUpdates_old,
+  unbatchedUpdates as unbatchedUpdates_old,
   deferredUpdates as deferredUpdates_old,
   discreteUpdates as discreteUpdates_old,
+  flushDiscreteUpdates as flushDiscreteUpdates_old,
   flushControlled as flushControlled_old,
   flushSync as flushSync_old,
-  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_old,
   flushPassiveEffects as flushPassiveEffects_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
@@ -55,11 +56,12 @@ import {
   createContainer as createContainer_new,
   updateContainer as updateContainer_new,
   batchedUpdates as batchedUpdates_new,
+  unbatchedUpdates as unbatchedUpdates_new,
   deferredUpdates as deferredUpdates_new,
   discreteUpdates as discreteUpdates_new,
+  flushDiscreteUpdates as flushDiscreteUpdates_new,
   flushControlled as flushControlled_new,
   flushSync as flushSync_new,
-  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_new,
   flushPassiveEffects as flushPassiveEffects_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
@@ -97,19 +99,22 @@ export const updateContainer = enableNewReconciler
 export const batchedUpdates = enableNewReconciler
   ? batchedUpdates_new
   : batchedUpdates_old;
+export const unbatchedUpdates = enableNewReconciler
+  ? unbatchedUpdates_new
+  : unbatchedUpdates_old;
 export const deferredUpdates = enableNewReconciler
   ? deferredUpdates_new
   : deferredUpdates_old;
 export const discreteUpdates = enableNewReconciler
   ? discreteUpdates_new
   : discreteUpdates_old;
+export const flushDiscreteUpdates = enableNewReconciler
+  ? flushDiscreteUpdates_new
+  : flushDiscreteUpdates_old;
 export const flushControlled = enableNewReconciler
   ? flushControlled_new
   : flushControlled_old;
 export const flushSync = enableNewReconciler ? flushSync_new : flushSync_old;
-export const flushSyncWithoutWarningIfAlreadyRendering = enableNewReconciler
-  ? flushSyncWithoutWarningIfAlreadyRendering_new
-  : flushSyncWithoutWarningIfAlreadyRendering_old;
 export const flushPassiveEffects = enableNewReconciler
   ? flushPassiveEffects_new
   : flushPassiveEffects_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 7ab995a5fcb0..f406f8592b0d 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -52,11 +52,12 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
+  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  flushDiscreteUpdates,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -326,11 +327,12 @@ export function updateContainer(
 
 export {
   batchedUpdates,
+  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
+  flushDiscreteUpdates,
   flushControlled,
   flushSync,
-  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index da127689c7c6..f6ae425b4400 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -52,11 +52,12 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
+  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  flushDiscreteUpdates,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -326,11 +327,12 @@ export function updateContainer(
 
 export {
   batchedUpdates,
+  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
+  flushDiscreteUpdates,
   flushControlled,
   flushSync,
-  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index aa36d6da831e..7f429c873438 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -246,11 +246,12 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b0000;
-const BatchedContext = /*               */ 0b0001;
-const RenderContext = /*                */ 0b0010;
-const CommitContext = /*                */ 0b0100;
-export const RetryAfterError = /*       */ 0b1000;
+export const NoContext = /*             */ 0b00000;
+const BatchedContext = /*               */ 0b00001;
+const LegacyUnbatchedContext = /*       */ 0b00010;
+const RenderContext = /*                */ 0b00100;
+const CommitContext = /*                */ 0b01000;
+export const RetryAfterError = /*       */ 0b10000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -514,19 +515,35 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  ensureRootIsScheduled(root, eventTime);
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode
-  ) {
-    // 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();
-    flushSyncCallbacksOnlyInLegacyMode();
+  if (lane === SyncLane) {
+    if (
+      // Check if we're inside unbatchedUpdates
+      (executionContext & LegacyUnbatchedContext) !== NoContext &&
+      // Check if we're not already rendering
+      (executionContext & (RenderContext | CommitContext)) === NoContext
+    ) {
+      // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
+      // root inside of batchedUpdates should be synchronous, but layout updates
+      // should be deferred until the end of the batch.
+      performSyncWorkOnRoot(root);
+    } else {
+      ensureRootIsScheduled(root, eventTime);
+      if (
+        executionContext === NoContext &&
+        (fiber.mode & ConcurrentMode) === NoMode
+      ) {
+        // 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();
+        flushSyncCallbacksOnlyInLegacyMode();
+      }
+    }
+  } else {
+    // Schedule other updates after in case the callback is sync.
+    ensureRootIsScheduled(root, eventTime);
   }
 
   return root;
@@ -1027,6 +1044,34 @@ export function getExecutionContext(): ExecutionContext {
   return executionContext;
 }
 
+export function flushDiscreteUpdates() {
+  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
+  // However, `act` uses `batchedUpdates`, so there's no way to distinguish
+  // those two cases. Need to fix this before exposing flushDiscreteUpdates
+  // as a public API.
+  if (
+    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==
+    NoContext
+  ) {
+    if (__DEV__) {
+      if ((executionContext & RenderContext) !== NoContext) {
+        console.error(
+          'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
+            'already rendering.',
+        );
+      }
+    }
+    // We're already rendering, so we can't synchronously flush pending work.
+    // This is probably a nested event dispatch triggered by a lifecycle/effect,
+    // like `el.focus()`. Exit.
+    return;
+  }
+  flushSyncCallbacks();
+  // If the discrete updates scheduled passive effects, flush them now so that
+  // they fire before the next serial event.
+  flushPassiveEffects();
+}
+
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1078,10 +1123,26 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
-  fn: A => R,
-  a: A,
-): R {
+export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
+  const prevExecutionContext = executionContext;
+  executionContext &= ~BatchedContext;
+  executionContext |= LegacyUnbatchedContext;
+  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) {
+      resetRenderTimer();
+      // TODO: I think this call is redundant, because we flush inside
+      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
+      flushSyncCallbacksOnlyInLegacyMode();
+    }
+  }
+}
+
+export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
@@ -1104,23 +1165,18 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       flushSyncCallbacks();
+    } else {
+      if (__DEV__) {
+        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.',
+        );
+      }
     }
   }
 }
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
-  if (__DEV__) {
-    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
-      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.',
-      );
-    }
-  }
-  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
-}
-
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
@@ -1918,6 +1974,24 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw error;
   }
 
+  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        logCommitStopped();
+      }
+    }
+
+    if (enableSchedulingProfiler) {
+      markCommitStopped();
+    }
+
+    // This is a legacy edge case. We just committed the initial mount of
+    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
+    // synchronously, but layout updates should be deferred until the end
+    // of the batch.
+    return null;
+  }
+
   // 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
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 2fd46c7cda7c..f356fc3f1156 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -246,11 +246,12 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b0000;
-const BatchedContext = /*               */ 0b0001;
-const RenderContext = /*                */ 0b0010;
-const CommitContext = /*                */ 0b0100;
-export const RetryAfterError = /*       */ 0b1000;
+export const NoContext = /*             */ 0b00000;
+const BatchedContext = /*               */ 0b00001;
+const LegacyUnbatchedContext = /*       */ 0b00010;
+const RenderContext = /*                */ 0b00100;
+const CommitContext = /*                */ 0b01000;
+export const RetryAfterError = /*       */ 0b10000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -514,19 +515,35 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  ensureRootIsScheduled(root, eventTime);
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode
-  ) {
-    // 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();
-    flushSyncCallbacksOnlyInLegacyMode();
+  if (lane === SyncLane) {
+    if (
+      // Check if we're inside unbatchedUpdates
+      (executionContext & LegacyUnbatchedContext) !== NoContext &&
+      // Check if we're not already rendering
+      (executionContext & (RenderContext | CommitContext)) === NoContext
+    ) {
+      // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
+      // root inside of batchedUpdates should be synchronous, but layout updates
+      // should be deferred until the end of the batch.
+      performSyncWorkOnRoot(root);
+    } else {
+      ensureRootIsScheduled(root, eventTime);
+      if (
+        executionContext === NoContext &&
+        (fiber.mode & ConcurrentMode) === NoMode
+      ) {
+        // 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();
+        flushSyncCallbacksOnlyInLegacyMode();
+      }
+    }
+  } else {
+    // Schedule other updates after in case the callback is sync.
+    ensureRootIsScheduled(root, eventTime);
   }
 
   return root;
@@ -1027,6 +1044,34 @@ export function getExecutionContext(): ExecutionContext {
   return executionContext;
 }
 
+export function flushDiscreteUpdates() {
+  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
+  // However, `act` uses `batchedUpdates`, so there's no way to distinguish
+  // those two cases. Need to fix this before exposing flushDiscreteUpdates
+  // as a public API.
+  if (
+    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==
+    NoContext
+  ) {
+    if (__DEV__) {
+      if ((executionContext & RenderContext) !== NoContext) {
+        console.error(
+          'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
+            'already rendering.',
+        );
+      }
+    }
+    // We're already rendering, so we can't synchronously flush pending work.
+    // This is probably a nested event dispatch triggered by a lifecycle/effect,
+    // like `el.focus()`. Exit.
+    return;
+  }
+  flushSyncCallbacks();
+  // If the discrete updates scheduled passive effects, flush them now so that
+  // they fire before the next serial event.
+  flushPassiveEffects();
+}
+
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1078,10 +1123,26 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
-  fn: A => R,
-  a: A,
-): R {
+export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
+  const prevExecutionContext = executionContext;
+  executionContext &= ~BatchedContext;
+  executionContext |= LegacyUnbatchedContext;
+  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) {
+      resetRenderTimer();
+      // TODO: I think this call is redundant, because we flush inside
+      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
+      flushSyncCallbacksOnlyInLegacyMode();
+    }
+  }
+}
+
+export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
@@ -1104,23 +1165,18 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       flushSyncCallbacks();
+    } else {
+      if (__DEV__) {
+        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.',
+        );
+      }
     }
   }
 }
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
-  if (__DEV__) {
-    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
-      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.',
-      );
-    }
-  }
-  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
-}
-
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
@@ -1918,6 +1974,24 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw error;
   }
 
+  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        logCommitStopped();
+      }
+    }
+
+    if (enableSchedulingProfiler) {
+      markCommitStopped();
+    }
+
+    // This is a legacy edge case. We just committed the initial mount of
+    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
+    // synchronously, but layout updates should be deferred until the end
+    // of the batch.
+    return null;
+  }
+
   // 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
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index c73e46ddc5e3..a3a74d739a9a 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -173,27 +173,4 @@ describe('ReactFlushSync', () => {
     // Effect flushes after paint.
     expect(Scheduler).toHaveYielded(['Effect']);
   });
-
-  test('does not flush pending passive effects', async () => {
-    function App() {
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Effect');
-      }, []);
-      return <Text text="Child" />;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(<App />);
-      expect(Scheduler).toFlushUntilNextPaint(['Child']);
-      expect(root).toMatchRenderedOutput('Child');
-
-      // Passive effects are pending. Calling flushSync should not affect them.
-      ReactNoop.flushSync();
-      // Effects still haven't fired.
-      expect(Scheduler).toHaveYielded([]);
-    });
-    // Now the effects have fired.
-    expect(Scheduler).toHaveYielded(['Effect']);
-  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index 9c9490085147..b603b03c696f 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -349,4 +349,63 @@ describe('ReactIncrementalScheduling', () => {
     // The updates should all be flushed with Task priority
     expect(ReactNoop).toMatchRenderedOutput(<span prop={5} />);
   });
+
+  it('can opt-out of batching using unbatchedUpdates', () => {
+    ReactNoop.flushSync(() => {
+      ReactNoop.render(<span prop={0} />);
+      expect(ReactNoop.getChildren()).toEqual([]);
+      // Should not have flushed yet because we're still batching
+
+      // unbatchedUpdates reverses the effect of batchedUpdates, so sync
+      // updates are not batched
+      ReactNoop.unbatchedUpdates(() => {
+        ReactNoop.render(<span prop={1} />);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+        ReactNoop.render(<span prop={2} />);
+        expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
+      });
+
+      ReactNoop.render(<span prop={3} />);
+      expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
+    });
+    // Remaining update is now flushed
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
+  });
+
+  it('nested updates are always deferred, even inside unbatchedUpdates', () => {
+    let instance;
+    class Foo extends React.Component {
+      state = {step: 0};
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('componentDidUpdate: ' + this.state.step);
+        if (this.state.step === 1) {
+          ReactNoop.unbatchedUpdates(() => {
+            // This is a nested state update, so it should not be
+            // flushed synchronously, even though we wrapped it
+            // in unbatchedUpdates.
+            this.setState({step: 2});
+          });
+          expect(Scheduler).toHaveYielded([
+            'render: 1',
+            'componentDidUpdate: 1',
+          ]);
+          expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
+        }
+      }
+      render() {
+        Scheduler.unstable_yieldValue('render: ' + this.state.step);
+        instance = this;
+        return <span prop={this.state.step} />;
+      }
+    }
+    ReactNoop.render(<Foo />);
+    expect(Scheduler).toFlushAndYield(['render: 0']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
+
+    ReactNoop.flushSync(() => {
+      instance.setState({step: 1});
+    });
+    expect(Scheduler).toHaveYielded(['render: 2', 'componentDidUpdate: 2']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
+  });
 });

From 8b34d5a905a17e95b5b9b515b60acbb2370f3603 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 7 Jul 2021 16:27:39 -0400
Subject: [PATCH 0666/1603] DevTools show error icon when hook name parsing
 fails (#21820)

---
 .../Components/InspectedElementContext.js     |  2 --
 .../Components/InspectedElementHooksTree.css  |  4 ++++
 .../Components/InspectedElementHooksTree.js   | 22 +++++++++++++------
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index d705947ff4da..ebb26d0843e9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -26,7 +26,6 @@ import {
   inspectElement,
 } from 'react-devtools-shared/src/inspectedElementCache';
 import {loadHookNames} from 'react-devtools-shared/src/hookNamesCache';
-import {ElementTypeFunction} from 'react-devtools-shared/src/types';
 import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 
@@ -112,7 +111,6 @@ export function InspectedElementContextController({children}: Props) {
       if (parseHookNames) {
         if (
           inspectedElement !== null &&
-          inspectedElement.type === ElementTypeFunction &&
           inspectedElement.hooks !== null &&
           loadHookNamesFunction !== null
         ) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
index a338a88bf83f..09cb48c06b95 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.css
@@ -81,4 +81,8 @@
 
 .HookName {
   color: var(--color-component-name);
+}
+
+.ToggleError {
+  color: var(--color-error-text);
 }
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 910e94098cac..9712095d8245 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -64,6 +64,17 @@ export function InspectedElementHooksTree({
     toggleParseHookNames();
   };
 
+  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) {
@@ -73,16 +84,13 @@ export function InspectedElementHooksTree({
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          {enableHookNameParsing && !parseHookNames && (
+          {enableHookNameParsing && (!parseHookNames || hookParsingFailed) && (
             <Toggle
+              className={hookParsingFailed ? styles.ToggleError : null}
               isChecked={parseHookNamesOptimistic}
-              isDisabled={parseHookNamesOptimistic}
+              isDisabled={parseHookNamesOptimistic || hookParsingFailed}
               onChange={handleChange}
-              title={
-                parseHookNames
-                  ? 'Parse hook names'
-                  : 'Parse hook names (may be slow)'
-              }>
+              title={toggleTitle}>
               <ButtonIcon type="parse-hook-names" />
             </Toggle>
           )}

From 241485a2c4db75f42baf62c68f54e7cdef101c31 Mon Sep 17 00:00:00 2001
From: Shannon Feng <taichiyi@163.com>
Date: Thu, 8 Jul 2021 10:11:42 +0800
Subject: [PATCH 0667/1603] [SSR2 Fixture] Delete duplicate DOCTYPE (#21824)

---
 fixtures/ssr2/server/render.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index e227dae93e82..fdb545a073a1 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -47,7 +47,6 @@ module.exports = function render(url, res) {
         // 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.write('<!DOCTYPE html>');
         startWriting();
       },
       onError(x) {

From feb2f6892ab42a6efc1333bbf1544b7337e8f244 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 13:54:16 -0400
Subject: [PATCH 0668/1603] DevTool: hook names cache no longer loses entries
 between selection (#21831)

Made several changes to the hooks name cache to avoid losing cached data between selected elements:
1. No longer use React-managed cache. This had the unfortunate side effect of the inspected element cache also clearing the hook names cache. For now, instead, a module-level WeakMap cache is used. This isn't great but we can revisit it later.
2. Hooks are no longer the cache keys (since hook objects get recreated between element inspections). Instead a hook key string made of fileName + line number + column number is used.
3. If hook names have already been loaded for a component, skip showing the load button and just show the hook names by default when selecting the component.
---
 .../src/parseHookNames.js                     | 21 ++-----
 .../Components/InspectedElementContext.js     | 20 ++++---
 .../Components/InspectedElementHooksTree.js   |  7 ++-
 .../src/hookNamesCache.js                     | 58 ++++++++++++-------
 packages/react-devtools-shared/src/types.js   |  8 ++-
 5 files changed, 67 insertions(+), 47 deletions(-)

diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index bd4a7e63838e..9336c5818ef1 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -16,6 +16,7 @@ import {SourceMapConsumer} from 'source-map';
 import {getHookName, isNonDeclarativePrimitiveHook} from './astUtils';
 import {areSourceMapsAppliedToErrors} from './ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 
 import type {
   HooksNode,
@@ -101,17 +102,6 @@ const originalURLToMetadataCache: LRUCache<
   },
 });
 
-function getLocationKey({
-  fileName,
-  lineNumber,
-  columnNumber,
-}: HookSource): string {
-  if (fileName == null || lineNumber == null || columnNumber == null) {
-    throw Error('Hook source code location not found.');
-  }
-  return `${fileName}:${lineNumber}:${columnNumber}`;
-}
-
 export default async function parseHookNames(
   hooksTree: HooksTree,
 ): Thenable<HookNames | null> {
@@ -138,9 +128,9 @@ export default async function parseHookNames(
       throw Error('Hook source code location not found.');
     }
 
-    const locationKey = getLocationKey(hookSource);
+    const locationKey = getHookSourceLocationKey(hookSource);
     if (!locationKeyToHookSourceData.has(locationKey)) {
-      // Can't be null because getLocationKey() would have thrown
+      // Can't be null because getHookSourceLocationKey() would have thrown
       const runtimeSourceURL = ((hookSource.fileName: any): string);
 
       const hookSourceData: HookSourceData = {
@@ -373,7 +363,7 @@ function findHookNames(
       return null; // Should not be reachable.
     }
 
-    const locationKey = getLocationKey(hookSource);
+    const locationKey = getHookSourceLocationKey(hookSource);
     const hookSourceData = locationKeyToHookSourceData.get(locationKey);
     if (!hookSourceData) {
       return null; // Should not be reachable.
@@ -426,7 +416,8 @@ function findHookNames(
       console.log(`findHookNames() Found name "${name || '-'}"`);
     }
 
-    map.set(hook, name);
+    const key = getHookSourceLocationKey(hookSource);
+    map.set(key, name);
   });
 
   return map;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index ebb26d0843e9..6234aec4f1eb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -25,7 +25,10 @@ import {
   checkForUpdate,
   inspectElement,
 } from 'react-devtools-shared/src/inspectedElementCache';
-import {loadHookNames} from 'react-devtools-shared/src/hookNamesCache';
+import {
+  hasAlreadyLoadedHookNames,
+  loadHookNames,
+} from 'react-devtools-shared/src/hookNamesCache';
 import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 
@@ -79,16 +82,19 @@ export function InspectedElementContextController({children}: Props) {
     path: null,
   });
 
+  const element =
+    selectedElementID !== null ? store.getElementByID(selectedElementID) : 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,
+    parseHookNamesByDefault || alreadyLoadedHookNames,
   );
 
-  const element =
-    selectedElementID !== null ? store.getElementByID(selectedElementID) : null;
-
   const elementHasChanged = element !== null && element !== state.element;
 
   // Reset the cached inspected paths when a new element is selected.
@@ -98,7 +104,7 @@ export function InspectedElementContextController({children}: Props) {
       path: null,
     });
 
-    setParseHookNames(parseHookNamesByDefault);
+    setParseHookNames(parseHookNamesByDefault || alreadyLoadedHookNames);
   }
 
   // Don't load a stale element from the backend; it wastes bridge bandwidth.
@@ -108,7 +114,7 @@ export function InspectedElementContextController({children}: Props) {
     inspectedElement = inspectElement(element, state.path, store, bridge);
 
     if (enableHookNameParsing) {
-      if (parseHookNames) {
+      if (parseHookNames || alreadyLoadedHookNames) {
         if (
           inspectedElement !== null &&
           inspectedElement.hooks !== null &&
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 9712095d8245..c4201ddeb4d9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -21,6 +21,7 @@ import Store from '../../store';
 import styles from './InspectedElementHooksTree.css';
 import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {
   enableHookNameParsing,
   enableProfilerChangedHookIndices,
@@ -235,7 +236,11 @@ function HookView({
   let displayValue;
   let isComplexDisplayValue = false;
 
-  const hookName = hookNames != null ? hookNames.get(hook) : null;
+  const hookSource = hook.hookSource;
+  const hookName =
+    hookNames != null && hookSource != null
+      ? hookNames.get(getHookSourceLocationKey(hookSource))
+      : null;
   const hookDisplayName = hookName ? (
     <>
       {name}
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 1b979c8e1916..113ad64b860a 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -7,16 +7,19 @@
  * @flow
  */
 
-import {unstable_getCacheForType as getCacheForType} from 'react';
 import {enableHookNameParsing} from 'react-devtools-feature-flags';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 
 import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {Thenable, Wakeable} from 'shared/ReactTypes';
 import type {Element} from './devtools/views/Components/types';
-import type {HookNames} from 'react-devtools-shared/src/types';
+import type {
+  HookNames,
+  HookSourceLocationKey,
+} from 'react-devtools-shared/src/types';
+import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
 
-const TIMEOUT = 3000;
+const TIMEOUT = 5000;
 
 const Pending = 0;
 const Resolved = 1;
@@ -51,14 +54,15 @@ function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
   }
 }
 
-type HookNamesMap = WeakMap<Element, Record<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
+const map: WeakMap<Element, Record<HookNames>> = new WeakMap();
 
-function createMap(): HookNamesMap {
-  return new WeakMap();
-}
-
-function getRecordMap(): WeakMap<Element, Record<HookNames>> {
-  return getCacheForType(createMap);
+export function hasAlreadyLoadedHookNames(element: Element): boolean {
+  const record = map.get(element);
+  return record != null && record.status === Resolved;
 }
 
 export function loadHookNames(
@@ -70,14 +74,15 @@ export function loadHookNames(
     return null;
   }
 
-  const map = getRecordMap();
-
   let record = map.get(element);
-  if (record) {
-    // TODO Do we need to update the Map to use new the hooks list objects as keys
-    // or will these be stable between inspections as a component updates?
-    // It seems like they're stable.
-  } else {
+
+  if (__DEBUG__) {
+    console.groupCollapsed('loadHookNames() record:');
+    console.log(record);
+    console.groupEnd();
+  }
+
+  if (!record) {
     const callbacks = new Set();
     const wakeable: Wakeable = {
       then(callback) {
@@ -126,14 +131,14 @@ export function loadHookNames(
         wake();
       },
       function onError(error) {
-        if (__DEBUG__) {
-          console.log('[hookNamesCache] onError() error:', error);
-        }
-
         if (didTimeout) {
           return;
         }
 
+        if (__DEBUG__) {
+          console.log('[hookNamesCache] onError() error:', error);
+        }
+
         const thrownRecord = ((newRecord: any): RejectedRecord);
         thrownRecord.status = Rejected;
         thrownRecord.value = null;
@@ -165,3 +170,14 @@ export function loadHookNames(
   const response = readRecord(record).value;
   return response;
 }
+
+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/types.js b/packages/react-devtools-shared/src/types.js
index b9faeb7dbe97..92000f5f5246 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
-
 export type Wall = {|
   // `listen` returns the "unlisten" function.
   listen: (fn: Function) => Function,
@@ -80,7 +78,11 @@ export type ComponentFilter =
   | RegExpComponentFilter;
 
 export type HookName = string | null;
-export type HookNames = Map<HooksNode, HookName>;
+// Map of hook source ("<filename>:<line-number>:<column-number>") to name.
+// Hook source is used instead of the hook itself becuase 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> = {|
   get: (key: K) => V,

From 92f3414d03d8744c420e15e55d7dc832deb2fa53 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 14:07:15 -0400
Subject: [PATCH 0669/1603] Reset inspected element cache in the event of an
 error (#21821)

---
 .../Components/InspectedElementContext.js      |  2 +-
 .../InspectedElementErrorBoundary.js           | 18 ++++++++++++++++--
 .../views/ErrorBoundary/ErrorBoundary.js       |  6 ++++++
 .../src/inspectedElementCache.js               |  7 +++++++
 4 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 6234aec4f1eb..c7dd028c5cbf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -108,8 +108,8 @@ export function InspectedElementContextController({children}: Props) {
   }
 
   // Don't load a stale element from the backend; it wastes bridge bandwidth.
-  let inspectedElement = null;
   let hookNames: HookNames | null = null;
+  let inspectedElement = null;
   if (!elementHasChanged && element !== null) {
     inspectedElement = inspectElement(element, state.path, store, bridge);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index 249c37463660..76b7d96bf72f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -8,9 +8,14 @@
  */
 
 import * as React from 'react';
-import {useContext} 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 = {|
@@ -23,9 +28,18 @@ export default function InspectedElementErrorBoundaryWrapper({
   // 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 {selectedElementID} = useContext(TreeStateContext);
+
+  const refresh = useCacheRefresh();
+  const handleDsmiss = useCallback(() => {
+    clearCacheBecauseOfError(refresh);
+  }, [refresh]);
+
   return (
     <div className={styles.Wrapper}>
-      <ErrorBoundary key={selectedElementID} canDismiss={true}>
+      <ErrorBoundary
+        key={selectedElementID}
+        canDismiss={true}
+        onBeforeDismissCallback={handleDsmiss}>
         {children}
       </ErrorBoundary>
     </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
index 3ffa7536b72d..c7aa20dcd590 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -17,6 +17,7 @@ import SuspendingErrorView from './SuspendingErrorView';
 type Props = {|
   children: React$Node,
   canDismiss?: boolean,
+  onBeforeDismissCallback?: () => void,
   store?: Store,
 |};
 
@@ -118,6 +119,11 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   _dismissError = () => {
+    const onBeforeDismissCallback = this.props.onBeforeDismissCallback;
+    if (typeof onBeforeDismissCallback === 'function') {
+      onBeforeDismissCallback();
+    }
+
     this.setState(InitialState);
   };
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 4d12ec70b96d..f5d1ba5b9884 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -190,3 +190,10 @@ export function checkForUpdate({
     );
   }
 }
+
+export function clearCacheBecauseOfError(refresh: RefreshFunction): void {
+  startTransition(() => {
+    const map = createMap();
+    refresh(createMap, map);
+  });
+}

From 8148fe5ff46ac738dec3cf4196dd82d2176c892f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 14:11:30 -0400
Subject: [PATCH 0670/1603] Added DevTools CONTRIBUTING guide

---
 packages/react-devtools/CONTRIBUTING.md | 65 +++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/react-devtools/CONTRIBUTING.md

diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
new file mode 100644
index 000000000000..0ad72142086e
--- /dev/null
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -0,0 +1,65 @@
+Intrested 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
+
+cd scripts/release
+yarn install
+```
+
+# Build React and React DOM
+Next, check out (or build) the local version of React that DevTools uses:
+
+### Option 1 (fastest): Checkout DevTools dependencies
+```sh
+cd <react-repo>
+scripts/release/download-experimental-build.js --commit=main
+```
+
+### Option 2 (if you've ade local changes to react): 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 && 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>
+```
+
+# 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!
\ No newline at end of file

From 27423de39571b1f54a1a77f78d6ce2db96793d3a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 14:28:53 -0400
Subject: [PATCH 0671/1603] Update CONTRIBUTING.md

---
 packages/react-devtools/CONTRIBUTING.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 0ad72142086e..9f07f5f2b61b 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -18,13 +18,15 @@ yarn install
 # Build React and React DOM
 Next, check out (or build) the local version of React that DevTools uses:
 
-### Option 1 (fastest): Checkout DevTools dependencies
+### 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>
 scripts/release/download-experimental-build.js --commit=main
 ```
 
-### Option 2 (if you've ade local changes to react): Build from source
+### 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
@@ -62,4 +64,4 @@ yarn build:chrome && yarn test:chrome --url=<url-to-test>
 ```
 
 # 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!
\ No newline at end of file
+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!

From 92af60afb2a229c0b70d360a80e24e4f7fd394aa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 14:37:13 -0400
Subject: [PATCH 0672/1603] Update CONTRIBUTING.md

---
 packages/react-devtools/CONTRIBUTING.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 9f07f5f2b61b..abfe20bdec53 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -8,10 +8,6 @@ git clone git@github.com:facebook/react.git
 Next install dependencies:
 ```sh
 cd <react-repo>
-
-yarn install
-
-cd scripts/release
 yarn install
 ```
 
@@ -22,7 +18,11 @@ Next, check out (or build) the local version of React that DevTools uses:
 To check out the latest version of React (built by CI from the `main` branch) run:
 ```sh
 cd <react-repo>
-scripts/release/download-experimental-build.js --commit=main
+
+cd scripts/release
+yarn install
+
+./download-experimental-build.js --commit=main
 ```
 
 ### Option 2: Build from source

From f52b73f9d0a9adbdb2815af440b2edd6b5627ff0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 16:12:22 -0400
Subject: [PATCH 0673/1603] DevTools: Update named hooks match to use column
 number also (#21833)

This prevents edge cases where AST nodes are incorrectly matched.
---
 .eslintignore                                 |  1 +
 .prettierignore                               |  1 +
 .../ComponentWithMultipleHooksPerLine.js      | 23 +++++
 .../src/__tests__/{ => __source__}/README.md  |  0
 .../__source__/__compiled__/bundle/index.js   | 27 ++++-
 .../__compiled__/bundle/index.js.map          |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      | 30 ++++++
 .../ComponentWithMultipleHooksPerLine.js.map  |  1 +
 .../__source__/__compiled__/external/index.js |  8 ++
 .../__compiled__/external/index.js.map        |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      | 30 ++++++
 .../__source__/__compiled__/inline/index.js   | 10 +-
 .../ComponentWithNamedCustomHooks.js          | 31 ++++++
 .../ComponentWithUnnamedCustomHooks.js        | 29 ++++++
 .../ComponentWithUseEffect.js                 | 19 ++++
 .../ComponentWithUseReducer.js                | 20 ++++
 .../ComponentWithUseState.js                  | 20 ++++
 .../__source__/__untransformed__/README.md    |  1 +
 .../src/__tests__/__source__/index.js         |  1 +
 .../src/__tests__/parseHookNames-test.js      | 98 +++++++------------
 .../react-devtools-extensions/src/astUtils.js | 24 ++++-
 .../src/parseHookNames.js                     | 20 ++--
 scripts/jest/config.build-devtools.js         |  1 +
 scripts/prettier/index.js                     |  1 +
 24 files changed, 324 insertions(+), 76 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
 rename packages/react-devtools-extensions/src/__tests__/{ => __source__}/README.md (100%)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/README.md

diff --git a/.eslintignore b/.eslintignore
index 2593400242b0..215132a8225e 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -21,6 +21,7 @@ packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
diff --git a/.prettierignore b/.prettierignore
index d944a5e628fa..adf1716fd4fa 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,7 @@ packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/
+packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..ef8450391835
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {createContext, 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-extensions/src/__tests__/README.md b/packages/react-devtools-extensions/src/__tests__/__source__/README.md
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/README.md
rename to packages/react-devtools-extensions/src/__tests__/__source__/README.md
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
index 6bb598647662..0af8d182714d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
@@ -71,7 +71,27 @@ function Component$1() {
  *
  * @flow
  */
+const A = /*#__PURE__*/React.createContext(1);
+const B = /*#__PURE__*/React.createContext(2);
 function Component$2() {
+  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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component$3() {
   const [count, setCount] = React.useState(0);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
     onClick: () => setCount(count + 1)
@@ -86,7 +106,7 @@ function Component$2() {
  *
  * @flow
  */
-function Component$3() {
+function Component$4() {
   const [count] = require('react').useState(0);
 
   return count;
@@ -191,8 +211,9 @@ var ToDoList = /*#__PURE__*/Object.freeze({
 
 exports.ComponentWithCustomHook = Component;
 exports.ComponentWithExternalCustomHooks = Component$1;
-exports.Example = Component$2;
-exports.InlineRequire = Component$3;
+exports.ComponentWithMultipleHooksPerLine = Component$2;
+exports.Example = Component$3;
+exports.InlineRequire = Component$4;
 exports.ToDoList = ToDoList;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
index 1a4fb620f928..d5cafbbb1144 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","count","setCount","useState","isDarkMode","useIsDarkMode","useEffect","handleClick","React","useEffectCreate","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEAC,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBJ,UAAjB,CADF,eAEEI,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAeD,cAAQ,CAAC,KAAD,CAA7B;AAEAG,EAAAA,eAAS,CAAC,SAASG,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAOL,UAAP;AACD;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAASb,WAAT,GAAqB;AAC1B,QAAMa,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOJ,qDAAaK,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEO,SAASb,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUe,OAAO,CAAC,OAAD,CAAP,CAAiBb,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASgB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC3B,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAAC4B,KAAD,EAAQC,QAAR,IAAoB7B,cAAQ,CAAC,CACjC;AAAC8B,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgBhC,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMI,WAAW,GAAGe,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzB/B,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMgC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEtB;AAA/C,kBACEiB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"index.js","sources":["../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../ComponentWithMultipleHooksPerLine.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","count","setCount","useState","isDarkMode","useIsDarkMode","useEffect","handleClick","React","useEffectCreate","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","A","B","a","b","c","d","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEAC,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBJ,UAAjB,CADF,eAEEI,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAeD,cAAQ,CAAC,KAAD,CAA7B;AAEAG,EAAAA,eAAS,CAAC,SAASG,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAOL,UAAP;AACD;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAASb,WAAT,GAAqB;AAC1B,QAAMa,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOJ,qDAAaK,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASX,WAAT,GAAqB;AAC1B,QAAMkB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;AASA,AAEO,SAASrB,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUqB,OAAO,CAAC,OAAD,CAAP,CAAiBnB,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASsB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCjC,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAACkC,KAAD,EAAQC,QAAR,IAAoBnC,cAAQ,CAAC,CACjC;AAACoC,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgBtC,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMI,WAAW,GAAGqB,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBrC,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMsC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAE5B;AAA/C,kBACEuB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..c657f3eb5455
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 000000000000..0fdbf88172c3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
index 060a736cf1ab..e82ebfd746fd 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
     return _ComponentWithExternalCustomHooks.Component;
   }
 });
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
 Object.defineProperty(exports, "Example", {
   enumerable: true,
   get: function () {
@@ -39,6 +45,8 @@ var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
 
 var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
 
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
 var _Example = require("./Example");
 
 var _InlineRequire = require("./InlineRequire");
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
index 0cd3aeaca077..27dbc8d2296d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\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
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\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-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..4b9037ab9cb2
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/inline/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
index 429ebfbbcf6c..60e56857a864 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ComponentWithExternalCustomHooks", {
     return _ComponentWithExternalCustomHooks.Component;
   }
 });
+Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithMultipleHooksPerLine.Component;
+  }
+});
 Object.defineProperty(exports, "Example", {
   enumerable: true,
   get: function () {
@@ -39,6 +45,8 @@ var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
 
 var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
 
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
 var _Example = require("./Example");
 
 var _InlineRequire = require("./InlineRequire");
@@ -54,4 +62,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIEV4YW1wbGV9IGZyb20gJy4vRXhhbXBsZSc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBJbmxpbmVSZXF1aXJlfSBmcm9tICcuL0lubGluZVJlcXVpcmUnO1xuaW1wb3J0ICogYXMgVG9Eb0xpc3QgZnJvbSAnLi9Ub0RvTGlzdCc7XG5leHBvcnQge1RvRG9MaXN0fTtcbmV4cG9ydCB7ZGVmYXVsdCBhcyB1c2VUaGVtZX0gZnJvbSAnLi91c2VUaGVtZSc7XG4iXX0=
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
new file mode 100644
index 000000000000..d738b9992346
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
new file mode 100644
index 000000000000..ee55f33d73a8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const {useDebugValue} = require('react');
+
+function Component(props) {
+  useCustomHookOne();
+  const [bar] = useCustomHookTwo();
+  return bar;
+}
+
+function useCustomHookOne() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example');
+}
+
+function useCustomHookTwo() {
+  // DebugValue hook should not appear in log.
+  useDebugValue('example');
+  return [true];
+}
+
+module.exports = {Component};
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
new file mode 100644
index 000000000000..ca1d30b1f39d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const 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-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
new file mode 100644
index 000000000000..7fed158224db
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
new file mode 100644
index 000000000000..cf50881bd87b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const React = require('react');
+const {useState} = React;
+
+function Component(props) {
+  const [foo] = useState(true);
+  const bar = useState(true);
+  const [baz] = React.useState(true);
+  return `${foo}-${bar}-${baz}`;
+}
+
+module.exports = {Component};
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/README.md b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/README.md
new file mode 100644
index 000000000000..1c88f7fa638c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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-extensions/src/__tests__/__source__/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
index a4f204fe19f9..56d9683937e7 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
@@ -9,6 +9,7 @@
 
 export {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';
 export {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';
+export {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';
 export {Component as Example} from './Example';
 export {Component as InlineRequire} from './InlineRequire';
 import * as ToDoList from './ToDoList';
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index e1efe7c32caa..5406a9541685 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -7,6 +7,10 @@
  * @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.
+
 describe('parseHookNames', () => {
   let fetchMock;
   let inspectHooks;
@@ -87,65 +91,29 @@ describe('parseHookNames', () => {
   }
 
   it('should parse names for useState()', async () => {
-    const React = require('react');
-    const {useState} = React;
-    function Component(props) {
-      const [foo] = useState(true);
-      const bar = useState(true);
-      const [baz] = React.useState(true);
-      return `${foo}-${bar}-${baz}`;
-    }
-
+    const Component = require('./__source__/__untransformed__/ComponentWithUseState')
+      .Component;
     const hookNames = await getHookNamesForComponent(Component);
     expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
   });
 
   it('should parse names for useReducer()', async () => {
-    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}`;
-    }
-
+    const Component = require('./__source__/__untransformed__/ComponentWithUseReducer')
+      .Component;
     const hookNames = await getHookNamesForComponent(Component);
     expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
   });
 
   it('should return null for hooks without names like useEffect', async () => {
-    const React = require('react');
-    const {useEffect} = React;
-    function Component(props) {
-      useEffect(() => {});
-      React.useLayoutEffect(() => () => {});
-      return null;
-    }
-
+    const Component = require('./__source__/__untransformed__/ComponentWithUseEffect')
+      .Component;
     const hookNames = await getHookNamesForComponent(Component);
     expectHookNamesToEqual(hookNames, []); // No hooks with names
   });
 
   it('should parse names for custom hooks', async () => {
-    const {useDebugValue, useState} = require('react');
-    function useCustomHookOne() {
-      // DebugValue hook should not appear in log.
-      useDebugValue('example');
-      return true;
-    }
-    function useCustomHookTwo() {
-      const [baz, setBaz] = useState(true);
-      return [baz, setBaz];
-    }
-    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}`;
-    }
-
+    const Component = require('./__source__/__untransformed__/ComponentWithNamedCustomHooks')
+      .Component;
     const hookNames = await getHookNamesForComponent(Component);
     expectHookNamesToEqual(hookNames, [
       'foo',
@@ -155,22 +123,8 @@ describe('parseHookNames', () => {
   });
 
   it('should return null for custom hooks without explicit names', async () => {
-    const {useDebugValue} = require('react');
-    function useCustomHookOne() {
-      // DebugValue hook should not appear in log.
-      useDebugValue('example');
-    }
-    function useCustomHookTwo() {
-      // DebugValue hook should not appear in log.
-      useDebugValue('example');
-      return [true];
-    }
-    function Component(props) {
-      useCustomHookOne();
-      const [bar] = useCustomHookTwo();
-      return bar;
-    }
-
+    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.
@@ -267,6 +221,30 @@ describe('parseHookNames', () => {
       ); // bundle source map
     });
 
+    it('should work when multiple hooks are on a line', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'a', // useContext()
+          'b', // useContext()
+          'c', // useContext()
+          'd', // useContext()
+        ]);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine',
+      ); // inline source map
+      await test(
+        './__source__/__compiled__/external/ComponentWithMultipleHooksPerLine',
+      ); // external source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ComponentWithMultipleHooksPerLine',
+      ); // bundle 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).
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index dff938c9d381..27fbb7a80a05 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -29,9 +29,25 @@ const AST_NODE_TYPES = Object.freeze({
 });
 
 // Check if line number obtained from source map and the line number in hook node match
-function checkNodeLocation(path: NodePath, line: number): boolean {
+function checkNodeLocation(
+  path: NodePath,
+  line: number,
+  column: number,
+): boolean {
   const {start, end} = path.node.loc;
-  return line >= start.line && line <= end.line;
+
+  if (line < start.line || line > end.line) {
+    return false;
+  }
+
+  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
@@ -91,13 +107,15 @@ export function getHookName(
   originalSourceAST: mixed,
   originalSourceCode: string,
   originalSourceLineNumber: number,
+  originalSourceColumnNumber: number,
 ): string | null {
   const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST);
 
   const potentialReactHookASTNode = hooksFromAST.find(node => {
     const nodeLocationCheck = checkNodeLocation(
       node,
-      ((originalSourceLineNumber: any): number),
+      originalSourceLineNumber,
+      originalSourceColumnNumber,
     );
     const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
     return nodeLocationCheck && hookDeclaractionCheck;
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index 9336c5818ef1..d0be611d11b7 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -376,32 +376,37 @@ function findHookNames(
 
     const sourceConsumer = hookSourceData.sourceConsumer;
 
+    let originalSourceColumnNumber;
     let originalSourceLineNumber;
     if (areSourceMapsAppliedToErrors() || !sourceConsumer) {
       // 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;
     } else {
-      originalSourceLineNumber = sourceConsumer.originalPositionFor({
+      const position = sourceConsumer.originalPositionFor({
         line: lineNumber,
 
         // Column numbers are representated differently between tools/engines.
         // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
         column: columnNumber - 1,
-      }).line;
+      });
+
+      originalSourceColumnNumber = position.column;
+      originalSourceLineNumber = position.line;
     }
 
     if (__DEBUG__) {
       console.log(
-        'findHookNames() mapped line number',
-        lineNumber,
-        'to',
-        originalSourceLineNumber,
+        `findHookNames() mapped line ${lineNumber}->${originalSourceLineNumber} and column ${columnNumber}->${originalSourceColumnNumber}`,
       );
     }
 
-    if (originalSourceLineNumber === null) {
+    if (
+      originalSourceLineNumber === null ||
+      originalSourceColumnNumber === null
+    ) {
       return null;
     }
 
@@ -410,6 +415,7 @@ function findHookNames(
       hookSourceData.originalSourceAST,
       ((hookSourceData.originalSourceCode: any): string),
       ((originalSourceLineNumber: any): number),
+      originalSourceColumnNumber,
     );
 
     if (__DEBUG__) {
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index ed6a0b7db0f8..5108c61aa402 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -59,6 +59,7 @@ module.exports = Object.assign({}, baseConfig, {
     '/node_modules/',
     '<rootDir>/build2/',
     '/__compiled__/',
+    '/__untransformed__/',
   ],
   testRegex:
     'packages/react-devtools-(extensions|shared)/src/__tests__/[^]+.test.js$',
diff --git a/scripts/prettier/index.js b/scripts/prettier/index.js
index 0be3fefdca68..18426b81f5b5 100644
--- a/scripts/prettier/index.js
+++ b/scripts/prettier/index.js
@@ -30,6 +30,7 @@ const files = glob
       '**/node_modules/**',
       '**/cjs/**',
       '**/__compiled__/**',
+      '**/__untransformed__/**',
       'packages/react-devtools-extensions/src/ErrorTesterCompiled.js',
     ],
   })

From 32d88d4332d6c2b32c9ea58a60e2a56d833fc1ad Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 16:46:17 -0400
Subject: [PATCH 0674/1603] DevTools: Don't load source files contaning only
 unnamed hooks (#21835)

This wastes CPU cycles.
---
 .../ComponentWithExternalUseEffect.js         | 19 +++++++++++
 .../__source__/__untransformed__/useCustom.js | 18 +++++++++++
 .../src/__tests__/parseHookNames-test.js      | 32 ++++++++++++++++---
 .../react-devtools-extensions/src/astUtils.js |  7 ----
 .../src/parseHookNames.js                     | 29 ++++++++++-------
 5 files changed, 81 insertions(+), 24 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/useCustom.js

diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
new file mode 100644
index 000000000000..591fb27cce60
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const {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-extensions/src/__tests__/__source__/__untransformed__/useCustom.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/useCustom.js
new file mode 100644
index 000000000000..da942ead650d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/useCustom.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const {useEffect} = require('react');
+
+function useCustom() {
+  useEffect(() => {
+    // ...
+  }, []);
+}
+
+module.exports = {useCustom};
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 5406a9541685..5f038b893fc7 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -104,13 +104,35 @@ describe('parseHookNames', () => {
     expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
   });
 
-  it('should return null for hooks without names like useEffect', async () => {
+  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 th 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 Promise.resolve(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;
@@ -239,10 +261,10 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ComponentWithMultipleHooksPerLine',
       ); // external source map
-      await test(
-        './__source__/__compiled__/bundle',
-        'ComponentWithMultipleHooksPerLine',
-      ); // bundle source map
+      // await test(
+      //   './__source__/__compiled__/bundle',
+      //   'ComponentWithMultipleHooksPerLine',
+      // ); // bundle source map
     });
 
     // TODO Inline require (e.g. require("react").useState()) isn't supported yet.
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 27fbb7a80a05..23208fca1eee 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -292,13 +292,6 @@ function isHookName(name: string): boolean {
   return /^use[A-Z0-9].*$/.test(name);
 }
 
-// Determines whether incoming hook is a primitive hook that gets assigned to variables.
-export function isNonDeclarativePrimitiveHook(hook: HooksNode) {
-  return ['Effect', 'ImperativeHandle', 'LayoutEffect', 'DebugValue'].includes(
-    hook.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
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index d0be611d11b7..7250dfee687c 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -13,7 +13,7 @@ import {parse} from '@babel/parser';
 import {enableHookNameParsing} from 'react-devtools-feature-flags';
 import LRU from 'lru-cache';
 import {SourceMapConsumer} from 'source-map';
-import {getHookName, isNonDeclarativePrimitiveHook} from './astUtils';
+import {getHookName} from './astUtils';
 import {areSourceMapsAppliedToErrors} from './ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
@@ -345,17 +345,6 @@ function findHookNames(
   const map: HookNames = new Map();
 
   hooksList.map(hook => {
-    // TODO (named hooks) We should probably filter before this point,
-    // otherwise we are loading and parsing source maps and ASTs for nothing.
-    if (isNonDeclarativePrimitiveHook(hook)) {
-      if (__DEBUG__) {
-        console.log('findHookNames() Non declarative primitive hook');
-      }
-
-      // Not all hooks have names (e.g. useEffect or useLayoutEffect)
-      return null;
-    }
-
     // We already guard against a null HookSource in parseHookNames()
     const hookSource = ((hook.hookSource: any): HookSource);
     const fileName = hookSource.fileName;
@@ -570,6 +559,15 @@ function flattenHooksList(
 ): 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('flattenHooksList() Skipping unnamed hook', hook);
+      }
+      continue;
+    }
+
     hooksList.push(hook);
     if (hook.subHooks.length > 0) {
       flattenHooksList(hook.subHooks, hooksList);
@@ -577,6 +575,13 @@ function flattenHooksList(
   }
 }
 
+// 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 updateLruCache(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {

From 25984e523107b10bb2e3a02a8e39c4ead2162aa9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 8 Jul 2021 17:38:59 -0400
Subject: [PATCH 0675/1603] Update CONTRIBUTING.md

---
 packages/react-devtools/CONTRIBUTING.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index abfe20bdec53..9aff37907625 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -65,3 +65,5 @@ yarn build:chrome && yarn test:chrome --url=<url-to-test>
 
 # 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.

From 59d3aca68638319c88d685ce22cac76a03cfe493 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Thu, 8 Jul 2021 15:02:02 -0700
Subject: [PATCH 0676/1603] Use `act()` in ReactFabric tests (#21839)

---
 .../__tests__/ReactFabric-test.internal.js    | 462 +++++++++++-------
 1 file changed, 274 insertions(+), 188 deletions(-)

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index a935da5e4df6..b77ed9903aa0 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -16,6 +16,7 @@ let createReactNativeComponentClass;
 let UIManager;
 let StrictMode;
 let TextInputState;
+let act;
 
 const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
   'Warning: setNativeProps is not currently supported in Fabric';
@@ -47,6 +48,9 @@ describe('ReactFabric', () => {
       .ReactNativeViewConfigRegistry.register;
     TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
       .TextInputState;
+
+    const ReactTestRenderer = require('react-test-renderer');
+    act = ReactTestRenderer.act;
   });
 
   it('should be able to create and render a native component', () => {
@@ -55,7 +59,9 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    ReactFabric.render(<View foo="test" />, 1);
+    act(() => {
+      ReactFabric.render(<View foo="test" />, 1);
+    });
     expect(nativeFabricUIManager.createNode).toBeCalled();
     expect(nativeFabricUIManager.appendChild).not.toBeCalled();
     expect(nativeFabricUIManager.completeRoot).toBeCalled();
@@ -71,11 +77,15 @@ describe('ReactFabric', () => {
 
     nativeFabricUIManager.createNode.mockReturnValue(firstNode);
 
-    ReactFabric.render(<View foo="foo" />, 11);
+    act(() => {
+      ReactFabric.render(<View foo="foo" />, 11);
+    });
 
     expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
 
-    ReactFabric.render(<View foo="bar" />, 11);
+    act(() => {
+      ReactFabric.render(<View foo="bar" />, 11);
+    });
 
     expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
     expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -97,7 +107,9 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTText',
     }));
 
-    ReactFabric.render(<Text foo="a">1</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="a">1</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -106,7 +118,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // If no properties have changed, we shouldn't call cloneNode.
-    ReactFabric.render(<Text foo="a">1</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="a">1</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -115,7 +129,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Only call cloneNode for the changed property (and not for text).
-    ReactFabric.render(<Text foo="b">1</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="b">1</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -126,7 +142,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Only call cloneNode for the changed text (and no other properties).
-    ReactFabric.render(<Text foo="b">2</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="b">2</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -139,7 +157,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Call cloneNode for both changed text and properties.
-    ReactFabric.render(<Text foo="c">3</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="c">3</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -158,12 +178,14 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTText',
     }));
 
-    ReactFabric.render(
-      <Text foo="a" bar="a">
-        1
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text foo="a" bar="a">
+          1
+        </Text>,
+        11,
+      );
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -171,12 +193,14 @@ describe('ReactFabric', () => {
       nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
     ).not.toBeCalled();
 
-    ReactFabric.render(
-      <Text foo="a" bar="b">
-        1
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text foo="a" bar="b">
+          1
+        </Text>,
+        11,
+      );
+    });
     expect(
       nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][1],
     ).toEqual({
@@ -186,12 +210,14 @@ describe('ReactFabric', () => {
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
 
-    ReactFabric.render(
-      <Text foo="b" bar="b">
-        2
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text foo="b" bar="b">
+          2
+        </Text>,
+        11,
+      );
+    });
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][1],
     ).toEqual({
@@ -211,15 +237,17 @@ describe('ReactFabric', () => {
     UIManager.updateView.mockReset();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        foo="bar"
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          foo="bar"
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
     expect(UIManager.updateView).not.toBeCalled();
 
     expect(() => {
@@ -247,14 +275,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.dispatchCommand.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
     ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
@@ -274,14 +304,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.dispatchCommand.mockReset();
 
     let viewRef;
-    ReactFabric.render(
-      <BasicClass
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <BasicClass
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
     expect(() => {
@@ -302,14 +334,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.sendAccessibilityEvent.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
     ReactFabric.sendAccessibilityEvent(viewRef, 'focus');
@@ -332,14 +366,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.sendAccessibilityEvent.mockReset();
 
     let viewRef;
-    ReactFabric.render(
-      <BasicClass
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <BasicClass
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
     expect(() => {
@@ -360,14 +396,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.measure.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.measure).not.toBeCalled();
     const successCallback = jest.fn();
@@ -386,14 +424,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.measureInWindow.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
     const successCallback = jest.fn();
@@ -413,22 +453,24 @@ describe('ReactFabric', () => {
 
     let viewRef;
     let otherRef;
-    ReactFabric.render(
-      <View>
-        <View
-          foo="bar"
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />
-        <View
-          ref={ref => {
-            otherRef = ref;
-          }}
-        />
-      </View>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View>
+          <View
+            foo="bar"
+            ref={ref => {
+              viewRef = ref;
+            }}
+          />
+          <View
+            ref={ref => {
+              otherRef = ref;
+            }}
+          />
+        </View>,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
     const successCallback = jest.fn();
@@ -483,12 +525,16 @@ describe('ReactFabric', () => {
     const before = 'abcdefghijklmnopqrst';
     const after = 'mxhpgwfralkeoivcstzy';
 
-    ReactFabric.render(<Component chars={before} />, 11);
+    act(() => {
+      ReactFabric.render(<Component chars={before} />, 11);
+    });
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
 
-    ReactFabric.render(<Component chars={after} />, 11);
+    act(() => {
+      ReactFabric.render(<Component chars={after} />, 11);
+    });
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
@@ -521,12 +567,14 @@ describe('ReactFabric', () => {
 
     const ref = React.createRef();
     // Wrap in a host node.
-    ReactFabric.render(
-      <View>
-        <Component ref={ref} />
-      </View>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View>
+          <Component ref={ref} />
+        </View>,
+        11,
+      );
+    });
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
@@ -552,7 +600,9 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(<Component />, 11);
+    act(() => {
+      ReactFabric.render(<Component />, 11);
+    });
     expect(mockArgs.length).toEqual(0);
   });
 
@@ -572,12 +622,14 @@ describe('ReactFabric', () => {
       );
     });
 
-    ReactFabric.render(
-      <View foo="a">
-        <View foo="b" />
-      </View>,
-      22,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View foo="a">
+          <View foo="b" />
+        </View>,
+        22,
+      );
+    });
     expect(snapshots).toMatchSnapshot();
   });
 
@@ -595,19 +647,23 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    ReactFabric.render(
-      <Text>
-        <View />
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text>
+          <View />
+        </Text>,
+        11,
+      );
+    });
 
-    ReactFabric.render(
-      <Text>
-        <Image />
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text>
+          <Image />
+        </Text>,
+        11,
+      );
+    });
   });
 
   it('should throw for text not inside of a <Text> ancestor', () => {
@@ -624,18 +680,22 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() => ReactFabric.render(<View>this should warn</View>, 11)).toThrow(
-      'Text strings must be rendered within a <Text> component.',
-    );
+    expect(() => {
+      act(() => {
+        ReactFabric.render(<View>this should warn</View>, 11);
+      });
+    }).toThrow('Text strings must be rendered within a <Text> component.');
 
-    expect(() =>
-      ReactFabric.render(
-        <Text>
-          <ScrollView>hi hello hi</ScrollView>
-        </Text>,
-        11,
-      ),
-    ).toThrow('Text strings must be rendered within a <Text> component.');
+    expect(() => {
+      act(() => {
+        ReactFabric.render(
+          <Text>
+            <ScrollView>hi hello hi</ScrollView>
+          </Text>,
+          11,
+        );
+      });
+    }).toThrow('Text strings must be rendered within a <Text> component.');
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {
@@ -646,12 +706,14 @@ describe('ReactFabric', () => {
 
     const Indirection = () => 'Hi';
 
-    ReactFabric.render(
-      <Text>
-        <Indirection />
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text>
+          <Indirection />
+        </Text>,
+        11,
+      );
+    });
   });
 
   it('dispatches events to the last committed props', () => {
@@ -668,7 +730,9 @@ describe('ReactFabric', () => {
     const touchStart = jest.fn();
     const touchStart2 = jest.fn();
 
-    ReactFabric.render(<View onTouchStart={touchStart} />, 11);
+    act(() => {
+      ReactFabric.render(<View onTouchStart={touchStart} />, 11);
+    });
 
     expect(nativeFabricUIManager.createNode.mock.calls.length).toBe(1);
     expect(nativeFabricUIManager.registerEventHandler.mock.calls.length).toBe(
@@ -698,7 +762,9 @@ describe('ReactFabric', () => {
     expect(touchStart).toBeCalled();
     expect(touchStart2).not.toBeCalled();
 
-    ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
+    act(() => {
+      ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
+    });
 
     // Intentionally dispatch to the same instanceHandle again.
     dispatchEvent(instanceHandle, 'topTouchStart', touchEvent);
@@ -742,33 +808,35 @@ describe('ReactFabric', () => {
     const ref1 = React.createRef();
     const ref2 = React.createRef();
 
-    ReactFabric.render(
-      <View id="parent">
-        <View
-          ref={ref1}
-          id="one"
-          onResponderStart={event => {
-            expect(ref1.current).not.toBeNull();
-            // Check for referential equality
-            expect(ref1.current).toBe(event.target);
-            expect(ref1.current).toBe(event.currentTarget);
-          }}
-          onStartShouldSetResponder={() => true}
-        />
-        <View
-          ref={ref2}
-          id="two"
-          onResponderStart={event => {
-            expect(ref2.current).not.toBeNull();
-            // Check for referential equality
-            expect(ref2.current).toBe(event.target);
-            expect(ref2.current).toBe(event.currentTarget);
-          }}
-          onStartShouldSetResponder={() => true}
-        />
-      </View>,
-      1,
-    );
+    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,
+      );
+    });
 
     const [
       dispatchEvent,
@@ -823,7 +891,12 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
+    act(() => {
+      ReactFabric.render(
+        <ContainsStrictModeChild ref={n => (parent = n)} />,
+        11,
+      );
+    });
 
     let match;
     expect(
@@ -855,12 +928,14 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(
-      <StrictMode>
-        <IsInStrictMode ref={n => (parent = n)} />
-      </StrictMode>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <StrictMode>
+          <IsInStrictMode ref={n => (parent = n)} />
+        </StrictMode>,
+        11,
+      );
+    });
 
     let match;
     expect(
@@ -896,7 +971,12 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
+    act(() => {
+      ReactFabric.render(
+        <ContainsStrictModeChild ref={n => (parent = n)} />,
+        11,
+      );
+    });
 
     let match;
     expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -926,12 +1006,14 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(
-      <StrictMode>
-        <IsInStrictMode ref={n => (parent = n)} />
-      </StrictMode>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <StrictMode>
+          <IsInStrictMode ref={n => (parent = n)} />
+        </StrictMode>,
+        11,
+      );
+    });
 
     let match;
     expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -953,7 +1035,9 @@ describe('ReactFabric', () => {
     }));
 
     const viewRef = React.createRef();
-    ReactFabric.render(<View ref={viewRef} />, 11);
+    act(() => {
+      ReactFabric.render(<View ref={viewRef} />, 11);
+    });
 
     expect(TextInputState.blurTextInput).not.toBeCalled();
 
@@ -970,7 +1054,9 @@ describe('ReactFabric', () => {
     }));
 
     const viewRef = React.createRef();
-    ReactFabric.render(<View ref={viewRef} />, 11);
+    act(() => {
+      ReactFabric.render(<View ref={viewRef} />, 11);
+    });
 
     expect(TextInputState.focusTextInput).not.toBeCalled();
 

From c549bc491877b94a44ecc00daa9cf04026a77a6e Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@gmail.com>
Date: Thu, 8 Jul 2021 15:05:51 -0700
Subject: [PATCH 0677/1603] Revert "Use `act()` in ReactFabric tests (#21839)"
 (#21840)

This reverts commit 59d3aca68638319c88d685ce22cac76a03cfe493.
---
 .../__tests__/ReactFabric-test.internal.js    | 462 +++++++-----------
 1 file changed, 188 insertions(+), 274 deletions(-)

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index b77ed9903aa0..a935da5e4df6 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -16,7 +16,6 @@ let createReactNativeComponentClass;
 let UIManager;
 let StrictMode;
 let TextInputState;
-let act;
 
 const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
   'Warning: setNativeProps is not currently supported in Fabric';
@@ -48,9 +47,6 @@ describe('ReactFabric', () => {
       .ReactNativeViewConfigRegistry.register;
     TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
       .TextInputState;
-
-    const ReactTestRenderer = require('react-test-renderer');
-    act = ReactTestRenderer.act;
   });
 
   it('should be able to create and render a native component', () => {
@@ -59,9 +55,7 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    act(() => {
-      ReactFabric.render(<View foo="test" />, 1);
-    });
+    ReactFabric.render(<View foo="test" />, 1);
     expect(nativeFabricUIManager.createNode).toBeCalled();
     expect(nativeFabricUIManager.appendChild).not.toBeCalled();
     expect(nativeFabricUIManager.completeRoot).toBeCalled();
@@ -77,15 +71,11 @@ describe('ReactFabric', () => {
 
     nativeFabricUIManager.createNode.mockReturnValue(firstNode);
 
-    act(() => {
-      ReactFabric.render(<View foo="foo" />, 11);
-    });
+    ReactFabric.render(<View foo="foo" />, 11);
 
     expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
 
-    act(() => {
-      ReactFabric.render(<View foo="bar" />, 11);
-    });
+    ReactFabric.render(<View foo="bar" />, 11);
 
     expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
     expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -107,9 +97,7 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTText',
     }));
 
-    act(() => {
-      ReactFabric.render(<Text foo="a">1</Text>, 11);
-    });
+    ReactFabric.render(<Text foo="a">1</Text>, 11);
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -118,9 +106,7 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // If no properties have changed, we shouldn't call cloneNode.
-    act(() => {
-      ReactFabric.render(<Text foo="a">1</Text>, 11);
-    });
+    ReactFabric.render(<Text foo="a">1</Text>, 11);
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -129,9 +115,7 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Only call cloneNode for the changed property (and not for text).
-    act(() => {
-      ReactFabric.render(<Text foo="b">1</Text>, 11);
-    });
+    ReactFabric.render(<Text foo="b">1</Text>, 11);
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -142,9 +126,7 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Only call cloneNode for the changed text (and no other properties).
-    act(() => {
-      ReactFabric.render(<Text foo="b">2</Text>, 11);
-    });
+    ReactFabric.render(<Text foo="b">2</Text>, 11);
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -157,9 +139,7 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Call cloneNode for both changed text and properties.
-    act(() => {
-      ReactFabric.render(<Text foo="c">3</Text>, 11);
-    });
+    ReactFabric.render(<Text foo="c">3</Text>, 11);
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -178,14 +158,12 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTText',
     }));
 
-    act(() => {
-      ReactFabric.render(
-        <Text foo="a" bar="a">
-          1
-        </Text>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <Text foo="a" bar="a">
+        1
+      </Text>,
+      11,
+    );
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -193,14 +171,12 @@ describe('ReactFabric', () => {
       nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
     ).not.toBeCalled();
 
-    act(() => {
-      ReactFabric.render(
-        <Text foo="a" bar="b">
-          1
-        </Text>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <Text foo="a" bar="b">
+        1
+      </Text>,
+      11,
+    );
     expect(
       nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][1],
     ).toEqual({
@@ -210,14 +186,12 @@ describe('ReactFabric', () => {
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
 
-    act(() => {
-      ReactFabric.render(
-        <Text foo="b" bar="b">
-          2
-        </Text>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <Text foo="b" bar="b">
+        2
+      </Text>,
+      11,
+    );
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][1],
     ).toEqual({
@@ -237,17 +211,15 @@ describe('ReactFabric', () => {
     UIManager.updateView.mockReset();
 
     let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          foo="bar"
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <View
+        foo="bar"
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
     expect(UIManager.updateView).not.toBeCalled();
 
     expect(() => {
@@ -275,16 +247,14 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.dispatchCommand.mockClear();
 
     let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
 
     expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
     ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
@@ -304,16 +274,14 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.dispatchCommand.mockReset();
 
     let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <BasicClass
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <BasicClass
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
 
     expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
     expect(() => {
@@ -334,16 +302,14 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.sendAccessibilityEvent.mockClear();
 
     let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
 
     expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
     ReactFabric.sendAccessibilityEvent(viewRef, 'focus');
@@ -366,16 +332,14 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.sendAccessibilityEvent.mockReset();
 
     let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <BasicClass
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <BasicClass
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
 
     expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
     expect(() => {
@@ -396,16 +360,14 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.measure.mockClear();
 
     let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
 
     expect(nativeFabricUIManager.measure).not.toBeCalled();
     const successCallback = jest.fn();
@@ -424,16 +386,14 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.measureInWindow.mockClear();
 
     let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <View
+        ref={ref => {
+          viewRef = ref;
+        }}
+      />,
+      11,
+    );
 
     expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
     const successCallback = jest.fn();
@@ -453,24 +413,22 @@ describe('ReactFabric', () => {
 
     let viewRef;
     let otherRef;
-    act(() => {
-      ReactFabric.render(
-        <View>
-          <View
-            foo="bar"
-            ref={ref => {
-              viewRef = ref;
-            }}
-          />
-          <View
-            ref={ref => {
-              otherRef = ref;
-            }}
-          />
-        </View>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <View>
+        <View
+          foo="bar"
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />
+        <View
+          ref={ref => {
+            otherRef = ref;
+          }}
+        />
+      </View>,
+      11,
+    );
 
     expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
     const successCallback = jest.fn();
@@ -525,16 +483,12 @@ describe('ReactFabric', () => {
     const before = 'abcdefghijklmnopqrst';
     const after = 'mxhpgwfralkeoivcstzy';
 
-    act(() => {
-      ReactFabric.render(<Component chars={before} />, 11);
-    });
+    ReactFabric.render(<Component chars={before} />, 11);
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
 
-    act(() => {
-      ReactFabric.render(<Component chars={after} />, 11);
-    });
+    ReactFabric.render(<Component chars={after} />, 11);
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
@@ -567,14 +521,12 @@ describe('ReactFabric', () => {
 
     const ref = React.createRef();
     // Wrap in a host node.
-    act(() => {
-      ReactFabric.render(
-        <View>
-          <Component ref={ref} />
-        </View>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <View>
+        <Component ref={ref} />
+      </View>,
+      11,
+    );
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
@@ -600,9 +552,7 @@ describe('ReactFabric', () => {
       }
     }
 
-    act(() => {
-      ReactFabric.render(<Component />, 11);
-    });
+    ReactFabric.render(<Component />, 11);
     expect(mockArgs.length).toEqual(0);
   });
 
@@ -622,14 +572,12 @@ describe('ReactFabric', () => {
       );
     });
 
-    act(() => {
-      ReactFabric.render(
-        <View foo="a">
-          <View foo="b" />
-        </View>,
-        22,
-      );
-    });
+    ReactFabric.render(
+      <View foo="a">
+        <View foo="b" />
+      </View>,
+      22,
+    );
     expect(snapshots).toMatchSnapshot();
   });
 
@@ -647,23 +595,19 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    act(() => {
-      ReactFabric.render(
-        <Text>
-          <View />
-        </Text>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <Text>
+        <View />
+      </Text>,
+      11,
+    );
 
-    act(() => {
-      ReactFabric.render(
-        <Text>
-          <Image />
-        </Text>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <Text>
+        <Image />
+      </Text>,
+      11,
+    );
   });
 
   it('should throw for text not inside of a <Text> ancestor', () => {
@@ -680,22 +624,18 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() => {
-      act(() => {
-        ReactFabric.render(<View>this should warn</View>, 11);
-      });
-    }).toThrow('Text strings must be rendered within a <Text> component.');
+    expect(() => ReactFabric.render(<View>this should warn</View>, 11)).toThrow(
+      'Text strings must be rendered within a <Text> component.',
+    );
 
-    expect(() => {
-      act(() => {
-        ReactFabric.render(
-          <Text>
-            <ScrollView>hi hello hi</ScrollView>
-          </Text>,
-          11,
-        );
-      });
-    }).toThrow('Text strings must be rendered within a <Text> component.');
+    expect(() =>
+      ReactFabric.render(
+        <Text>
+          <ScrollView>hi hello hi</ScrollView>
+        </Text>,
+        11,
+      ),
+    ).toThrow('Text strings must be rendered within a <Text> component.');
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {
@@ -706,14 +646,12 @@ describe('ReactFabric', () => {
 
     const Indirection = () => 'Hi';
 
-    act(() => {
-      ReactFabric.render(
-        <Text>
-          <Indirection />
-        </Text>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <Text>
+        <Indirection />
+      </Text>,
+      11,
+    );
   });
 
   it('dispatches events to the last committed props', () => {
@@ -730,9 +668,7 @@ describe('ReactFabric', () => {
     const touchStart = jest.fn();
     const touchStart2 = jest.fn();
 
-    act(() => {
-      ReactFabric.render(<View onTouchStart={touchStart} />, 11);
-    });
+    ReactFabric.render(<View onTouchStart={touchStart} />, 11);
 
     expect(nativeFabricUIManager.createNode.mock.calls.length).toBe(1);
     expect(nativeFabricUIManager.registerEventHandler.mock.calls.length).toBe(
@@ -762,9 +698,7 @@ describe('ReactFabric', () => {
     expect(touchStart).toBeCalled();
     expect(touchStart2).not.toBeCalled();
 
-    act(() => {
-      ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
-    });
+    ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
 
     // Intentionally dispatch to the same instanceHandle again.
     dispatchEvent(instanceHandle, 'topTouchStart', touchEvent);
@@ -808,35 +742,33 @@ describe('ReactFabric', () => {
     const ref1 = React.createRef();
     const ref2 = React.createRef();
 
-    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,
-      );
-    });
+    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,
+    );
 
     const [
       dispatchEvent,
@@ -891,12 +823,7 @@ describe('ReactFabric', () => {
       }
     }
 
-    act(() => {
-      ReactFabric.render(
-        <ContainsStrictModeChild ref={n => (parent = n)} />,
-        11,
-      );
-    });
+    ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
 
     let match;
     expect(
@@ -928,14 +855,12 @@ describe('ReactFabric', () => {
       }
     }
 
-    act(() => {
-      ReactFabric.render(
-        <StrictMode>
-          <IsInStrictMode ref={n => (parent = n)} />
-        </StrictMode>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <StrictMode>
+        <IsInStrictMode ref={n => (parent = n)} />
+      </StrictMode>,
+      11,
+    );
 
     let match;
     expect(
@@ -971,12 +896,7 @@ describe('ReactFabric', () => {
       }
     }
 
-    act(() => {
-      ReactFabric.render(
-        <ContainsStrictModeChild ref={n => (parent = n)} />,
-        11,
-      );
-    });
+    ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
 
     let match;
     expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -1006,14 +926,12 @@ describe('ReactFabric', () => {
       }
     }
 
-    act(() => {
-      ReactFabric.render(
-        <StrictMode>
-          <IsInStrictMode ref={n => (parent = n)} />
-        </StrictMode>,
-        11,
-      );
-    });
+    ReactFabric.render(
+      <StrictMode>
+        <IsInStrictMode ref={n => (parent = n)} />
+      </StrictMode>,
+      11,
+    );
 
     let match;
     expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -1035,9 +953,7 @@ describe('ReactFabric', () => {
     }));
 
     const viewRef = React.createRef();
-    act(() => {
-      ReactFabric.render(<View ref={viewRef} />, 11);
-    });
+    ReactFabric.render(<View ref={viewRef} />, 11);
 
     expect(TextInputState.blurTextInput).not.toBeCalled();
 
@@ -1054,9 +970,7 @@ describe('ReactFabric', () => {
     }));
 
     const viewRef = React.createRef();
-    act(() => {
-      ReactFabric.render(<View ref={viewRef} />, 11);
-    });
+    ReactFabric.render(<View ref={viewRef} />, 11);
 
     expect(TextInputState.focusTextInput).not.toBeCalled();
 

From 84639ab53fcb83c5d4806b5d791bb07992c40bf1 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Thu, 8 Jul 2021 16:01:51 -0700
Subject: [PATCH 0678/1603] Guard against reused fibers in React Native
 commands (#21837)

---
 .../react-native-renderer/src/ReactFabric.js  | 22 +++++++++----------
 .../src/ReactNativeRenderer.js                | 21 +++++++++---------
 2 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index c79868af51f0..6fe3eeb12d24 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -160,16 +160,14 @@ function dispatchCommand(handle: any, command: string, args: Array<any>) {
           'native component. Use React.forwardRef to get access to the underlying native component',
       );
     }
-
     return;
   }
 
-  if (handle._internalInstanceHandle) {
-    nativeFabricUIManager.dispatchCommand(
-      handle._internalInstanceHandle.stateNode.node,
-      command,
-      args,
-    );
+  if (handle._internalInstanceHandle != null) {
+    const {stateNode} = handle._internalInstanceHandle;
+    if (stateNode != null) {
+      nativeFabricUIManager.dispatchCommand(stateNode.node, command, args);
+    }
   } else {
     UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
   }
@@ -186,11 +184,11 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
     return;
   }
 
-  if (handle._internalInstanceHandle) {
-    nativeFabricUIManager.sendAccessibilityEvent(
-      handle._internalInstanceHandle.stateNode.node,
-      eventType,
-    );
+  if (handle._internalInstanceHandle != null) {
+    const {stateNode} = handle._internalInstanceHandle;
+    if (stateNode != null) {
+      nativeFabricUIManager.sendAccessibilityEvent(stateNode.node, eventType);
+    }
   } else {
     legacySendAccessibilityEvent(handle._nativeTag, eventType);
   }
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index fdb1c05fed94..3c3f234e0cb6 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -160,12 +160,11 @@ function dispatchCommand(handle: any, command: string, args: Array<any>) {
     return;
   }
 
-  if (handle._internalInstanceHandle) {
-    nativeFabricUIManager.dispatchCommand(
-      handle._internalInstanceHandle.stateNode.node,
-      command,
-      args,
-    );
+  if (handle._internalInstanceHandle != null) {
+    const {stateNode} = handle._internalInstanceHandle;
+    if (stateNode != null) {
+      nativeFabricUIManager.dispatchCommand(stateNode.node, command, args);
+    }
   } else {
     UIManager.dispatchViewManagerCommand(handle._nativeTag, command, args);
   }
@@ -182,11 +181,11 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
     return;
   }
 
-  if (handle._internalInstanceHandle) {
-    nativeFabricUIManager.sendAccessibilityEvent(
-      handle._internalInstanceHandle.stateNode.node,
-      eventType,
-    );
+  if (handle._internalInstanceHandle != null) {
+    const {stateNode} = handle._internalInstanceHandle;
+    if (stateNode != null) {
+      nativeFabricUIManager.sendAccessibilityEvent(stateNode.node, eventType);
+    }
   } else {
     legacySendAccessibilityEvent(handle._nativeTag, eventType);
   }

From f85f429d55f3f13bd741b4e4a06e3fcc54f2330c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 8 Jul 2021 22:35:46 -0400
Subject: [PATCH 0679/1603] Use `act()` in ReactFabric tests (#21839) (#21841)

Co-authored-by: Timothy Yung <yungsters@fb.com>
---
 .../__tests__/ReactFabric-test.internal.js    | 461 +++++++++++-------
 1 file changed, 273 insertions(+), 188 deletions(-)

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index a935da5e4df6..4c5bea872bbd 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -16,6 +16,7 @@ let createReactNativeComponentClass;
 let UIManager;
 let StrictMode;
 let TextInputState;
+let act;
 
 const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
   'Warning: setNativeProps is not currently supported in Fabric';
@@ -47,6 +48,8 @@ describe('ReactFabric', () => {
       .ReactNativeViewConfigRegistry.register;
     TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
       .TextInputState;
+
+    act = require('jest-react').act;
   });
 
   it('should be able to create and render a native component', () => {
@@ -55,7 +58,9 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    ReactFabric.render(<View foo="test" />, 1);
+    act(() => {
+      ReactFabric.render(<View foo="test" />, 1);
+    });
     expect(nativeFabricUIManager.createNode).toBeCalled();
     expect(nativeFabricUIManager.appendChild).not.toBeCalled();
     expect(nativeFabricUIManager.completeRoot).toBeCalled();
@@ -71,11 +76,15 @@ describe('ReactFabric', () => {
 
     nativeFabricUIManager.createNode.mockReturnValue(firstNode);
 
-    ReactFabric.render(<View foo="foo" />, 11);
+    act(() => {
+      ReactFabric.render(<View foo="foo" />, 11);
+    });
 
     expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
 
-    ReactFabric.render(<View foo="bar" />, 11);
+    act(() => {
+      ReactFabric.render(<View foo="bar" />, 11);
+    });
 
     expect(nativeFabricUIManager.createNode).toHaveBeenCalledTimes(1);
     expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -97,7 +106,9 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTText',
     }));
 
-    ReactFabric.render(<Text foo="a">1</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="a">1</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -106,7 +117,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // If no properties have changed, we shouldn't call cloneNode.
-    ReactFabric.render(<Text foo="a">1</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="a">1</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -115,7 +128,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Only call cloneNode for the changed property (and not for text).
-    ReactFabric.render(<Text foo="b">1</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="b">1</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).toHaveBeenCalledTimes(
@@ -126,7 +141,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Only call cloneNode for the changed text (and no other properties).
-    ReactFabric.render(<Text foo="b">2</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="b">2</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -139,7 +156,9 @@ describe('ReactFabric', () => {
     ).not.toBeCalled();
 
     // Call cloneNode for both changed text and properties.
-    ReactFabric.render(<Text foo="c">3</Text>, 11);
+    act(() => {
+      ReactFabric.render(<Text foo="c">3</Text>, 11);
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildren,
@@ -158,12 +177,14 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTText',
     }));
 
-    ReactFabric.render(
-      <Text foo="a" bar="a">
-        1
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text foo="a" bar="a">
+          1
+        </Text>,
+        11,
+      );
+    });
     expect(nativeFabricUIManager.cloneNode).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewChildren).not.toBeCalled();
     expect(nativeFabricUIManager.cloneNodeWithNewProps).not.toBeCalled();
@@ -171,12 +192,14 @@ describe('ReactFabric', () => {
       nativeFabricUIManager.cloneNodeWithNewChildrenAndProps,
     ).not.toBeCalled();
 
-    ReactFabric.render(
-      <Text foo="a" bar="b">
-        1
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text foo="a" bar="b">
+          1
+        </Text>,
+        11,
+      );
+    });
     expect(
       nativeFabricUIManager.cloneNodeWithNewProps.mock.calls[0][1],
     ).toEqual({
@@ -186,12 +209,14 @@ describe('ReactFabric', () => {
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
 
-    ReactFabric.render(
-      <Text foo="b" bar="b">
-        2
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text foo="b" bar="b">
+          2
+        </Text>,
+        11,
+      );
+    });
     expect(
       nativeFabricUIManager.cloneNodeWithNewChildrenAndProps.mock.calls[0][1],
     ).toEqual({
@@ -211,15 +236,17 @@ describe('ReactFabric', () => {
     UIManager.updateView.mockReset();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        foo="bar"
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          foo="bar"
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
     expect(UIManager.updateView).not.toBeCalled();
 
     expect(() => {
@@ -247,14 +274,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.dispatchCommand.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
     ReactFabric.dispatchCommand(viewRef, 'updateCommand', [10, 20]);
@@ -274,14 +303,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.dispatchCommand.mockReset();
 
     let viewRef;
-    ReactFabric.render(
-      <BasicClass
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <BasicClass
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.dispatchCommand).not.toBeCalled();
     expect(() => {
@@ -302,14 +333,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.sendAccessibilityEvent.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
     ReactFabric.sendAccessibilityEvent(viewRef, 'focus');
@@ -332,14 +365,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.sendAccessibilityEvent.mockReset();
 
     let viewRef;
-    ReactFabric.render(
-      <BasicClass
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <BasicClass
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
     expect(() => {
@@ -360,14 +395,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.measure.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.measure).not.toBeCalled();
     const successCallback = jest.fn();
@@ -386,14 +423,16 @@ describe('ReactFabric', () => {
     nativeFabricUIManager.measureInWindow.mockClear();
 
     let viewRef;
-    ReactFabric.render(
-      <View
-        ref={ref => {
-          viewRef = ref;
-        }}
-      />,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
     const successCallback = jest.fn();
@@ -413,22 +452,24 @@ describe('ReactFabric', () => {
 
     let viewRef;
     let otherRef;
-    ReactFabric.render(
-      <View>
-        <View
-          foo="bar"
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />
-        <View
-          ref={ref => {
-            otherRef = ref;
-          }}
-        />
-      </View>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View>
+          <View
+            foo="bar"
+            ref={ref => {
+              viewRef = ref;
+            }}
+          />
+          <View
+            ref={ref => {
+              otherRef = ref;
+            }}
+          />
+        </View>,
+        11,
+      );
+    });
 
     expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
     const successCallback = jest.fn();
@@ -483,12 +524,16 @@ describe('ReactFabric', () => {
     const before = 'abcdefghijklmnopqrst';
     const after = 'mxhpgwfralkeoivcstzy';
 
-    ReactFabric.render(<Component chars={before} />, 11);
+    act(() => {
+      ReactFabric.render(<Component chars={before} />, 11);
+    });
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
 
-    ReactFabric.render(<Component chars={after} />, 11);
+    act(() => {
+      ReactFabric.render(<Component chars={after} />, 11);
+    });
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
@@ -521,12 +566,14 @@ describe('ReactFabric', () => {
 
     const ref = React.createRef();
     // Wrap in a host node.
-    ReactFabric.render(
-      <View>
-        <Component ref={ref} />
-      </View>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View>
+          <Component ref={ref} />
+        </View>,
+        11,
+      );
+    });
     expect(
       nativeFabricUIManager.__dumpHierarchyForJestTestsOnly(),
     ).toMatchSnapshot();
@@ -552,7 +599,9 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(<Component />, 11);
+    act(() => {
+      ReactFabric.render(<Component />, 11);
+    });
     expect(mockArgs.length).toEqual(0);
   });
 
@@ -572,12 +621,14 @@ describe('ReactFabric', () => {
       );
     });
 
-    ReactFabric.render(
-      <View foo="a">
-        <View foo="b" />
-      </View>,
-      22,
-    );
+    act(() => {
+      ReactFabric.render(
+        <View foo="a">
+          <View foo="b" />
+        </View>,
+        22,
+      );
+    });
     expect(snapshots).toMatchSnapshot();
   });
 
@@ -595,19 +646,23 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    ReactFabric.render(
-      <Text>
-        <View />
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text>
+          <View />
+        </Text>,
+        11,
+      );
+    });
 
-    ReactFabric.render(
-      <Text>
-        <Image />
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text>
+          <Image />
+        </Text>,
+        11,
+      );
+    });
   });
 
   it('should throw for text not inside of a <Text> ancestor', () => {
@@ -624,18 +679,22 @@ describe('ReactFabric', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() => ReactFabric.render(<View>this should warn</View>, 11)).toThrow(
-      'Text strings must be rendered within a <Text> component.',
-    );
+    expect(() => {
+      act(() => {
+        ReactFabric.render(<View>this should warn</View>, 11);
+      });
+    }).toThrow('Text strings must be rendered within a <Text> component.');
 
-    expect(() =>
-      ReactFabric.render(
-        <Text>
-          <ScrollView>hi hello hi</ScrollView>
-        </Text>,
-        11,
-      ),
-    ).toThrow('Text strings must be rendered within a <Text> component.');
+    expect(() => {
+      act(() => {
+        ReactFabric.render(
+          <Text>
+            <ScrollView>hi hello hi</ScrollView>
+          </Text>,
+          11,
+        );
+      });
+    }).toThrow('Text strings must be rendered within a <Text> component.');
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {
@@ -646,12 +705,14 @@ describe('ReactFabric', () => {
 
     const Indirection = () => 'Hi';
 
-    ReactFabric.render(
-      <Text>
-        <Indirection />
-      </Text>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <Text>
+          <Indirection />
+        </Text>,
+        11,
+      );
+    });
   });
 
   it('dispatches events to the last committed props', () => {
@@ -668,7 +729,9 @@ describe('ReactFabric', () => {
     const touchStart = jest.fn();
     const touchStart2 = jest.fn();
 
-    ReactFabric.render(<View onTouchStart={touchStart} />, 11);
+    act(() => {
+      ReactFabric.render(<View onTouchStart={touchStart} />, 11);
+    });
 
     expect(nativeFabricUIManager.createNode.mock.calls.length).toBe(1);
     expect(nativeFabricUIManager.registerEventHandler.mock.calls.length).toBe(
@@ -698,7 +761,9 @@ describe('ReactFabric', () => {
     expect(touchStart).toBeCalled();
     expect(touchStart2).not.toBeCalled();
 
-    ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
+    act(() => {
+      ReactFabric.render(<View onTouchStart={touchStart2} />, 11);
+    });
 
     // Intentionally dispatch to the same instanceHandle again.
     dispatchEvent(instanceHandle, 'topTouchStart', touchEvent);
@@ -742,33 +807,35 @@ describe('ReactFabric', () => {
     const ref1 = React.createRef();
     const ref2 = React.createRef();
 
-    ReactFabric.render(
-      <View id="parent">
-        <View
-          ref={ref1}
-          id="one"
-          onResponderStart={event => {
-            expect(ref1.current).not.toBeNull();
-            // Check for referential equality
-            expect(ref1.current).toBe(event.target);
-            expect(ref1.current).toBe(event.currentTarget);
-          }}
-          onStartShouldSetResponder={() => true}
-        />
-        <View
-          ref={ref2}
-          id="two"
-          onResponderStart={event => {
-            expect(ref2.current).not.toBeNull();
-            // Check for referential equality
-            expect(ref2.current).toBe(event.target);
-            expect(ref2.current).toBe(event.currentTarget);
-          }}
-          onStartShouldSetResponder={() => true}
-        />
-      </View>,
-      1,
-    );
+    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,
+      );
+    });
 
     const [
       dispatchEvent,
@@ -823,7 +890,12 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
+    act(() => {
+      ReactFabric.render(
+        <ContainsStrictModeChild ref={n => (parent = n)} />,
+        11,
+      );
+    });
 
     let match;
     expect(
@@ -855,12 +927,14 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(
-      <StrictMode>
-        <IsInStrictMode ref={n => (parent = n)} />
-      </StrictMode>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <StrictMode>
+          <IsInStrictMode ref={n => (parent = n)} />
+        </StrictMode>,
+        11,
+      );
+    });
 
     let match;
     expect(
@@ -896,7 +970,12 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(<ContainsStrictModeChild ref={n => (parent = n)} />, 11);
+    act(() => {
+      ReactFabric.render(
+        <ContainsStrictModeChild ref={n => (parent = n)} />,
+        11,
+      );
+    });
 
     let match;
     expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -926,12 +1005,14 @@ describe('ReactFabric', () => {
       }
     }
 
-    ReactFabric.render(
-      <StrictMode>
-        <IsInStrictMode ref={n => (parent = n)} />
-      </StrictMode>,
-      11,
-    );
+    act(() => {
+      ReactFabric.render(
+        <StrictMode>
+          <IsInStrictMode ref={n => (parent = n)} />
+        </StrictMode>,
+        11,
+      );
+    });
 
     let match;
     expect(() => (match = ReactFabric.findNodeHandle(parent))).toErrorDev([
@@ -953,7 +1034,9 @@ describe('ReactFabric', () => {
     }));
 
     const viewRef = React.createRef();
-    ReactFabric.render(<View ref={viewRef} />, 11);
+    act(() => {
+      ReactFabric.render(<View ref={viewRef} />, 11);
+    });
 
     expect(TextInputState.blurTextInput).not.toBeCalled();
 
@@ -970,7 +1053,9 @@ describe('ReactFabric', () => {
     }));
 
     const viewRef = React.createRef();
-    ReactFabric.render(<View ref={viewRef} />, 11);
+    act(() => {
+      ReactFabric.render(<View ref={viewRef} />, 11);
+    });
 
     expect(TextInputState.focusTextInput).not.toBeCalled();
 

From cb8afda183e9c931978279d3a1706d1d9c905484 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 8 Jul 2021 23:01:29 -0400
Subject: [PATCH 0680/1603] Add test for #21837 (#21842)

Taken from https://github.com/facebook/react/pull/21837#issuecomment-876788973

Co-Authored-By: Timothy Yung <yungsters@fb.com>

Co-authored-by: Timothy Yung <yungsters@fb.com>
---
 .../__tests__/ReactFabric-test.internal.js    | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index 4c5bea872bbd..6b776c085fd4 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -1064,4 +1064,36 @@ describe('ReactFabric', () => {
     expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
     expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
   });
+
+  it('should no-op if calling sendAccessibilityEvent on unmounted refs', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.sendAccessibilityEvent.mockReset();
+
+    let viewRef;
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
+    const dangerouslyRetainedViewRef = viewRef;
+    act(() => {
+      ReactFabric.stopSurface(11);
+    });
+
+    ReactFabric.sendAccessibilityEvent(
+      dangerouslyRetainedViewRef,
+      'eventTypeName',
+    );
+
+    expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
+  });
 });

From 54e88ed12c931fa717738849ba5656cc1cf3527a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 10 Jul 2021 14:15:11 -0400
Subject: [PATCH 0681/1603] Bugfix: Flush legacy sync passive effects at
 beginning of event (#21846)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Re-land recent flushSync changes

Adds back #21776 and #21775, which were removed due to an internal
e2e test failure.

Will attempt to fix in subsequent commits.

* Failing test: Legacy mode sync passive effects

In concurrent roots, if a render is synchronous, we flush its passive
effects synchronously. In legacy roots, we don't do this because all
updates are synchronous — so we need to flush at the beginning of the
next event. This is how `discreteUpdates` worked.

* Flush legacy passive effects at beginning of event

Fixes test added in previous commit.
---
 .../__snapshots__/profilingCache-test.js.snap |  28 ++--
 .../src/__tests__/ReactDOMFiber-test.js       |   8 +-
 .../src/__tests__/ReactMount-test.js          |  12 +-
 packages/react-dom/src/client/ReactDOM.js     |   4 +-
 .../react-dom/src/client/ReactDOMLegacy.js    |   6 +-
 .../src/events/ReactDOMUpdateBatching.js      |   8 +-
 packages/react-noop-renderer/src/ReactNoop.js |   2 -
 .../src/ReactNoopPersistent.js                |   1 -
 .../src/createReactNoop.js                    |   4 -
 .../src/ReactFiberReconciler.js               |  15 +-
 .../src/ReactFiberReconciler.new.js           |   6 +-
 .../src/ReactFiberReconciler.old.js           |   6 +-
 .../src/ReactFiberWorkLoop.new.js             | 149 +++++-------------
 .../src/ReactFiberWorkLoop.old.js             | 149 +++++-------------
 .../src/__tests__/ReactFlushSync-test.js      |  59 ++++++-
 .../ReactHooksWithNoopRenderer-test.js        |   5 +-
 .../ReactIncrementalScheduling-test.js        |  59 -------
 17 files changed, 184 insertions(+), 337 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index b27231efdffc..2ab8751e3cbc 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -40,7 +40,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 16,
   "updaters": Array [
     Object {
@@ -87,7 +87,7 @@ Object {
     4 => 2,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 15,
   "updaters": Array [
     Object {
@@ -186,7 +186,7 @@ Object {
     6 => 1,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 12,
   "updaters": Array [
     Object {
@@ -445,7 +445,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 12,
           "updaters": Array [
             Object {
@@ -938,7 +938,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 11,
           "updaters": Array [
             Object {
@@ -1597,7 +1597,7 @@ Object {
         17 => 1,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 24,
       "updaters": Array [
         Object {
@@ -1687,7 +1687,7 @@ Object {
       "fiberActualDurations": Map {},
       "fiberSelfDurations": Map {},
       "passiveEffectDuration": 0,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 34,
       "updaters": Array [
         Object {
@@ -2223,7 +2223,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 24,
           "updaters": Array [
             Object {
@@ -2310,7 +2310,7 @@ Object {
           "fiberActualDurations": Array [],
           "fiberSelfDurations": Array [],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 34,
           "updaters": Array [
             Object {
@@ -2431,7 +2431,7 @@ Object {
         2 => 0,
       },
       "passiveEffectDuration": null,
-      "priorityLevel": "Normal",
+      "priorityLevel": "Immediate",
       "timestamp": 0,
       "updaters": Array [
         Object {
@@ -2506,7 +2506,7 @@ Object {
     3 => 0,
   },
   "passiveEffectDuration": 0,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -2715,7 +2715,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": 0,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
@@ -3071,7 +3071,7 @@ Object {
     7 => 0,
   },
   "passiveEffectDuration": null,
-  "priorityLevel": "Normal",
+  "priorityLevel": "Immediate",
   "timestamp": 0,
   "updaters": Array [
     Object {
@@ -3515,7 +3515,7 @@ Object {
             ],
           ],
           "passiveEffectDuration": null,
-          "priorityLevel": "Normal",
+          "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
index 36c8367af5d4..ff1ea1771fc8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiber-test.js
@@ -1154,19 +1154,13 @@ describe('ReactDOMFiber', () => {
     expect(ops).toEqual(['A']);
 
     if (__DEV__) {
-      const errorCalls = console.error.calls.count();
+      expect(console.error.calls.count()).toBe(2);
       expect(console.error.calls.argsFor(0)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
       expect(console.error.calls.argsFor(1)[0]).toMatch(
         'ReactDOM.render is no longer supported in React 18',
       );
-      // TODO: this warning shouldn't be firing in the first place if user didn't call it.
-      for (let i = 2; i < errorCalls; i++) {
-        expect(console.error.calls.argsFor(i)[0]).toMatch(
-          'unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.',
-        );
-      }
     }
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactMount-test.js b/packages/react-dom/src/__tests__/ReactMount-test.js
index a214c32f58d0..9571905edaf5 100644
--- a/packages/react-dom/src/__tests__/ReactMount-test.js
+++ b/packages/react-dom/src/__tests__/ReactMount-test.js
@@ -277,7 +277,7 @@ describe('ReactMount', () => {
     expect(calls).toBe(5);
   });
 
-  it('initial mount is sync inside batchedUpdates, but task work is deferred until the end of the batch', () => {
+  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');
 
@@ -302,12 +302,12 @@ describe('ReactMount', () => {
 
       // Initial mount on another root. Should flush immediately.
       ReactDOM.render(<Foo>a</Foo>, container2);
-      // The update did not flush yet.
-      expect(container1.textContent).toEqual('1');
-      // The initial mount flushed, but not the update scheduled in cDM.
-      expect(container2.textContent).toEqual('a');
+      // 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!');
     });
-    // All updates have flushed.
     expect(container1.textContent).toEqual('2');
     expect(container2.textContent).toEqual('a!');
   });
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 8e974697075f..80fc3d1e4a05 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -23,8 +23,8 @@ import {createEventHandle} from './ReactDOMEventHandle';
 import {
   batchedUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushControlled,
   injectIntoDevTools,
   attemptSynchronousHydration,
@@ -100,7 +100,7 @@ setRestoreImplementation(restoreControlledState);
 setBatchingImplementation(
   batchedUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
 );
 
 function createPortal(
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index a62a7fb444c5..f03350cb2924 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -29,7 +29,7 @@ import {
   createContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
-  unbatchedUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   getPublicRootInstance,
   findHostInstance,
   findHostInstanceWithWarning,
@@ -174,7 +174,7 @@ function legacyRenderSubtreeIntoContainer(
       };
     }
     // Initial mount should not be batched.
-    unbatchedUpdates(() => {
+    flushSyncWithoutWarningIfAlreadyRendering(() => {
       updateContainer(children, fiberRoot, parentComponent, callback);
     });
   } else {
@@ -357,7 +357,7 @@ export function unmountComponentAtNode(container: Container) {
     }
 
     // Unmount should not be batched.
-    unbatchedUpdates(() => {
+    flushSyncWithoutWarningIfAlreadyRendering(() => {
       legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
         // $FlowFixMe This should probably use `delete container._reactRootContainer`
         container._reactRootContainer = null;
diff --git a/packages/react-dom/src/events/ReactDOMUpdateBatching.js b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
index f2fbfe4c3f32..d3c46630b148 100644
--- a/packages/react-dom/src/events/ReactDOMUpdateBatching.js
+++ b/packages/react-dom/src/events/ReactDOMUpdateBatching.js
@@ -23,7 +23,7 @@ let batchedUpdatesImpl = function(fn, bookkeeping) {
 let discreteUpdatesImpl = function(fn, a, b, c, d) {
   return fn(a, b, c, d);
 };
-let flushDiscreteUpdatesImpl = function() {};
+let flushSyncImpl = function() {};
 
 let isInsideEventHandler = false;
 
@@ -39,7 +39,7 @@ function finishEventHandler() {
     // 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.
-    flushDiscreteUpdatesImpl();
+    flushSyncImpl();
     restoreStateIfNeeded();
   }
 }
@@ -67,9 +67,9 @@ export function discreteUpdates(fn, a, b, c, d) {
 export function setBatchingImplementation(
   _batchedUpdatesImpl,
   _discreteUpdatesImpl,
-  _flushDiscreteUpdatesImpl,
+  _flushSyncImpl,
 ) {
   batchedUpdatesImpl = _batchedUpdatesImpl;
   discreteUpdatesImpl = _discreteUpdatesImpl;
-  flushDiscreteUpdatesImpl = _flushDiscreteUpdatesImpl;
+  flushSyncImpl = _flushSyncImpl;
 }
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
index c09fa2d8000f..a225deaf961f 100644
--- a/packages/react-noop-renderer/src/ReactNoop.js
+++ b/packages/react-noop-renderer/src/ReactNoop.js
@@ -38,10 +38,8 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
-  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
-  flushDiscreteUpdates,
   flushSync,
   flushPassiveEffects,
   act,
diff --git a/packages/react-noop-renderer/src/ReactNoopPersistent.js b/packages/react-noop-renderer/src/ReactNoopPersistent.js
index 97876990a9b5..86bb87c065e4 100644
--- a/packages/react-noop-renderer/src/ReactNoopPersistent.js
+++ b/packages/react-noop-renderer/src/ReactNoopPersistent.js
@@ -38,7 +38,6 @@ export const {
   flushExpired,
   batchedUpdates,
   deferredUpdates,
-  unbatchedUpdates,
   discreteUpdates,
   idleUpdates,
   flushDiscreteUpdates,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 8dbadafd2c22..5ea510d73d6e 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -901,8 +901,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
     deferredUpdates: NoopRenderer.deferredUpdates,
 
-    unbatchedUpdates: NoopRenderer.unbatchedUpdates,
-
     discreteUpdates: NoopRenderer.discreteUpdates,
 
     idleUpdates<T>(fn: () => T): T {
@@ -915,8 +913,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
-    flushDiscreteUpdates: NoopRenderer.flushDiscreteUpdates,
-
     flushSync(fn: () => mixed) {
       NoopRenderer.flushSync(fn);
     },
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index bc169fd8a647..d25783164e98 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -18,12 +18,11 @@ import {
   createContainer as createContainer_old,
   updateContainer as updateContainer_old,
   batchedUpdates as batchedUpdates_old,
-  unbatchedUpdates as unbatchedUpdates_old,
   deferredUpdates as deferredUpdates_old,
   discreteUpdates as discreteUpdates_old,
-  flushDiscreteUpdates as flushDiscreteUpdates_old,
   flushControlled as flushControlled_old,
   flushSync as flushSync_old,
+  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_old,
   flushPassiveEffects as flushPassiveEffects_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
@@ -56,12 +55,11 @@ import {
   createContainer as createContainer_new,
   updateContainer as updateContainer_new,
   batchedUpdates as batchedUpdates_new,
-  unbatchedUpdates as unbatchedUpdates_new,
   deferredUpdates as deferredUpdates_new,
   discreteUpdates as discreteUpdates_new,
-  flushDiscreteUpdates as flushDiscreteUpdates_new,
   flushControlled as flushControlled_new,
   flushSync as flushSync_new,
+  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_new,
   flushPassiveEffects as flushPassiveEffects_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
@@ -99,22 +97,19 @@ export const updateContainer = enableNewReconciler
 export const batchedUpdates = enableNewReconciler
   ? batchedUpdates_new
   : batchedUpdates_old;
-export const unbatchedUpdates = enableNewReconciler
-  ? unbatchedUpdates_new
-  : unbatchedUpdates_old;
 export const deferredUpdates = enableNewReconciler
   ? deferredUpdates_new
   : deferredUpdates_old;
 export const discreteUpdates = enableNewReconciler
   ? discreteUpdates_new
   : discreteUpdates_old;
-export const flushDiscreteUpdates = enableNewReconciler
-  ? flushDiscreteUpdates_new
-  : flushDiscreteUpdates_old;
 export const flushControlled = enableNewReconciler
   ? flushControlled_new
   : flushControlled_old;
 export const flushSync = enableNewReconciler ? flushSync_new : flushSync_old;
+export const flushSyncWithoutWarningIfAlreadyRendering = enableNewReconciler
+  ? flushSyncWithoutWarningIfAlreadyRendering_new
+  : flushSyncWithoutWarningIfAlreadyRendering_old;
 export const flushPassiveEffects = enableNewReconciler
   ? flushPassiveEffects_new
   : flushPassiveEffects_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index f406f8592b0d..7ab995a5fcb0 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -52,12 +52,11 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
-  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -327,12 +326,11 @@ export function updateContainer(
 
 export {
   batchedUpdates,
-  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushControlled,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index f6ae425b4400..da127689c7c6 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -52,12 +52,11 @@ import {
   scheduleUpdateOnFiber,
   flushRoot,
   batchedUpdates,
-  unbatchedUpdates,
   flushSync,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -327,12 +326,11 @@ export function updateContainer(
 
 export {
   batchedUpdates,
-  unbatchedUpdates,
   deferredUpdates,
   discreteUpdates,
-  flushDiscreteUpdates,
   flushControlled,
   flushSync,
+  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7f429c873438..b6f697edfee3 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -246,12 +246,11 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b00000;
-const BatchedContext = /*               */ 0b00001;
-const LegacyUnbatchedContext = /*       */ 0b00010;
-const RenderContext = /*                */ 0b00100;
-const CommitContext = /*                */ 0b01000;
-export const RetryAfterError = /*       */ 0b10000;
+export const NoContext = /*             */ 0b0000;
+const BatchedContext = /*               */ 0b0001;
+const RenderContext = /*                */ 0b0010;
+const CommitContext = /*                */ 0b0100;
+export const RetryAfterError = /*       */ 0b1000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -515,35 +514,19 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  if (lane === SyncLane) {
-    if (
-      // Check if we're inside unbatchedUpdates
-      (executionContext & LegacyUnbatchedContext) !== NoContext &&
-      // Check if we're not already rendering
-      (executionContext & (RenderContext | CommitContext)) === NoContext
-    ) {
-      // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
-      // root inside of batchedUpdates should be synchronous, but layout updates
-      // should be deferred until the end of the batch.
-      performSyncWorkOnRoot(root);
-    } else {
-      ensureRootIsScheduled(root, eventTime);
-      if (
-        executionContext === NoContext &&
-        (fiber.mode & ConcurrentMode) === NoMode
-      ) {
-        // 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();
-        flushSyncCallbacksOnlyInLegacyMode();
-      }
-    }
-  } else {
-    // Schedule other updates after in case the callback is sync.
-    ensureRootIsScheduled(root, eventTime);
+  ensureRootIsScheduled(root, eventTime);
+  if (
+    lane === SyncLane &&
+    executionContext === NoContext &&
+    (fiber.mode & ConcurrentMode) === NoMode
+  ) {
+    // 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();
+    flushSyncCallbacksOnlyInLegacyMode();
   }
 
   return root;
@@ -1044,34 +1027,6 @@ export function getExecutionContext(): ExecutionContext {
   return executionContext;
 }
 
-export function flushDiscreteUpdates() {
-  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
-  // However, `act` uses `batchedUpdates`, so there's no way to distinguish
-  // those two cases. Need to fix this before exposing flushDiscreteUpdates
-  // as a public API.
-  if (
-    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==
-    NoContext
-  ) {
-    if (__DEV__) {
-      if ((executionContext & RenderContext) !== NoContext) {
-        console.error(
-          'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
-            'already rendering.',
-        );
-      }
-    }
-    // We're already rendering, so we can't synchronously flush pending work.
-    // This is probably a nested event dispatch triggered by a lifecycle/effect,
-    // like `el.focus()`. Exit.
-    return;
-  }
-  flushSyncCallbacks();
-  // If the discrete updates scheduled passive effects, flush them now so that
-  // they fire before the next serial event.
-  flushPassiveEffects();
-}
-
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1123,26 +1078,19 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
-  const prevExecutionContext = executionContext;
-  executionContext &= ~BatchedContext;
-  executionContext |= LegacyUnbatchedContext;
-  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) {
-      resetRenderTimer();
-      // TODO: I think this call is redundant, because we flush inside
-      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
-      flushSyncCallbacksOnlyInLegacyMode();
-    }
+export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
+  fn: A => R,
+  a: A,
+): R {
+  // In legacy mode, we flush pending passive effects at the beginning of the
+  // next event, not at the end of the previous one.
+  if (
+    rootWithPendingPassiveEffects !== null &&
+    rootWithPendingPassiveEffects.tag === LegacyRoot
+  ) {
+    flushPassiveEffects();
   }
-}
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
@@ -1165,18 +1113,23 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       flushSyncCallbacks();
-    } else {
-      if (__DEV__) {
-        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.',
-        );
-      }
     }
   }
 }
 
+export function flushSync<A, R>(fn: A => R, a: A): R {
+  if (__DEV__) {
+    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+      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.',
+      );
+    }
+  }
+  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
+}
+
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
@@ -1974,24 +1927,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw error;
   }
 
-  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
-    if (__DEV__) {
-      if (enableDebugTracing) {
-        logCommitStopped();
-      }
-    }
-
-    if (enableSchedulingProfiler) {
-      markCommitStopped();
-    }
-
-    // This is a legacy edge case. We just committed the initial mount of
-    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
-    // synchronously, but layout updates should be deferred until the end
-    // of the batch.
-    return null;
-  }
-
   // 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
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index f356fc3f1156..22c8395cb098 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -246,12 +246,11 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b00000;
-const BatchedContext = /*               */ 0b00001;
-const LegacyUnbatchedContext = /*       */ 0b00010;
-const RenderContext = /*                */ 0b00100;
-const CommitContext = /*                */ 0b01000;
-export const RetryAfterError = /*       */ 0b10000;
+export const NoContext = /*             */ 0b0000;
+const BatchedContext = /*               */ 0b0001;
+const RenderContext = /*                */ 0b0010;
+const CommitContext = /*                */ 0b0100;
+export const RetryAfterError = /*       */ 0b1000;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
 const RootIncomplete = 0;
@@ -515,35 +514,19 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  if (lane === SyncLane) {
-    if (
-      // Check if we're inside unbatchedUpdates
-      (executionContext & LegacyUnbatchedContext) !== NoContext &&
-      // Check if we're not already rendering
-      (executionContext & (RenderContext | CommitContext)) === NoContext
-    ) {
-      // This is a legacy edge case. The initial mount of a ReactDOM.render-ed
-      // root inside of batchedUpdates should be synchronous, but layout updates
-      // should be deferred until the end of the batch.
-      performSyncWorkOnRoot(root);
-    } else {
-      ensureRootIsScheduled(root, eventTime);
-      if (
-        executionContext === NoContext &&
-        (fiber.mode & ConcurrentMode) === NoMode
-      ) {
-        // 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();
-        flushSyncCallbacksOnlyInLegacyMode();
-      }
-    }
-  } else {
-    // Schedule other updates after in case the callback is sync.
-    ensureRootIsScheduled(root, eventTime);
+  ensureRootIsScheduled(root, eventTime);
+  if (
+    lane === SyncLane &&
+    executionContext === NoContext &&
+    (fiber.mode & ConcurrentMode) === NoMode
+  ) {
+    // 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();
+    flushSyncCallbacksOnlyInLegacyMode();
   }
 
   return root;
@@ -1044,34 +1027,6 @@ export function getExecutionContext(): ExecutionContext {
   return executionContext;
 }
 
-export function flushDiscreteUpdates() {
-  // TODO: Should be able to flush inside batchedUpdates, but not inside `act`.
-  // However, `act` uses `batchedUpdates`, so there's no way to distinguish
-  // those two cases. Need to fix this before exposing flushDiscreteUpdates
-  // as a public API.
-  if (
-    (executionContext & (BatchedContext | RenderContext | CommitContext)) !==
-    NoContext
-  ) {
-    if (__DEV__) {
-      if ((executionContext & RenderContext) !== NoContext) {
-        console.error(
-          'unstable_flushDiscreteUpdates: Cannot flush updates when React is ' +
-            'already rendering.',
-        );
-      }
-    }
-    // We're already rendering, so we can't synchronously flush pending work.
-    // This is probably a nested event dispatch triggered by a lifecycle/effect,
-    // like `el.focus()`. Exit.
-    return;
-  }
-  flushSyncCallbacks();
-  // If the discrete updates scheduled passive effects, flush them now so that
-  // they fire before the next serial event.
-  flushPassiveEffects();
-}
-
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -1123,26 +1078,19 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function unbatchedUpdates<A, R>(fn: (a: A) => R, a: A): R {
-  const prevExecutionContext = executionContext;
-  executionContext &= ~BatchedContext;
-  executionContext |= LegacyUnbatchedContext;
-  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) {
-      resetRenderTimer();
-      // TODO: I think this call is redundant, because we flush inside
-      // scheduleUpdateOnFiber when LegacyUnbatchedContext is set.
-      flushSyncCallbacksOnlyInLegacyMode();
-    }
+export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
+  fn: A => R,
+  a: A,
+): R {
+  // In legacy mode, we flush pending passive effects at the beginning of the
+  // next event, not at the end of the previous one.
+  if (
+    rootWithPendingPassiveEffects !== null &&
+    rootWithPendingPassiveEffects.tag === LegacyRoot
+  ) {
+    flushPassiveEffects();
   }
-}
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
 
@@ -1165,18 +1113,23 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
     // the stack.
     if ((executionContext & (RenderContext | CommitContext)) === NoContext) {
       flushSyncCallbacks();
-    } else {
-      if (__DEV__) {
-        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.',
-        );
-      }
     }
   }
 }
 
+export function flushSync<A, R>(fn: A => R, a: A): R {
+  if (__DEV__) {
+    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+      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.',
+      );
+    }
+  }
+  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
+}
+
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
@@ -1974,24 +1927,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     throw error;
   }
 
-  if ((executionContext & LegacyUnbatchedContext) !== NoContext) {
-    if (__DEV__) {
-      if (enableDebugTracing) {
-        logCommitStopped();
-      }
-    }
-
-    if (enableSchedulingProfiler) {
-      markCommitStopped();
-    }
-
-    // This is a legacy edge case. We just committed the initial mount of
-    // a ReactDOM.render-ed root inside of batchedUpdates. The commit fired
-    // synchronously, but layout updates should be deferred until the end
-    // of the batch.
-    return null;
-  }
-
   // 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
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index a3a74d739a9a..20d846f64b03 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -128,7 +128,7 @@ describe('ReactFlushSync', () => {
     });
   });
 
-  test('do not flush passive effects synchronously in legacy mode', async () => {
+  test('do not flush passive effects synchronously after render in legacy mode', async () => {
     function App() {
       useEffect(() => {
         Scheduler.unstable_yieldValue('Effect');
@@ -152,6 +152,40 @@ describe('ReactFlushSync', () => {
     expect(Scheduler).toHaveYielded(['Effect']);
   });
 
+  test('flush pending passive effects before scope is called in legacy mode', async () => {
+    let currentStep = 0;
+
+    function App({step}) {
+      useEffect(() => {
+        currentStep = step;
+        Scheduler.unstable_yieldValue('Effect: ' + step);
+      }, [step]);
+      return <Text text={step} />;
+    }
+
+    const root = ReactNoop.createLegacyRoot();
+    await act(async () => {
+      ReactNoop.flushSync(() => {
+        root.render(<App step={1} />);
+      });
+      expect(Scheduler).toHaveYielded([
+        1,
+        // Because we're in legacy mode, we shouldn't have flushed the passive
+        // effects yet.
+      ]);
+      expect(root).toMatchRenderedOutput('1');
+
+      ReactNoop.flushSync(() => {
+        // This should render step 2 because the passive effect has already
+        // fired, before the scope function is called.
+        root.render(<App step={currentStep + 1} />);
+      });
+      expect(Scheduler).toHaveYielded(['Effect: 1', 2]);
+      expect(root).toMatchRenderedOutput('2');
+    });
+    expect(Scheduler).toHaveYielded(['Effect: 2']);
+  });
+
   test("do not flush passive effects synchronously when they aren't the result of a sync render", async () => {
     function App() {
       useEffect(() => {
@@ -173,4 +207,27 @@ describe('ReactFlushSync', () => {
     // Effect flushes after paint.
     expect(Scheduler).toHaveYielded(['Effect']);
   });
+
+  test('does not flush pending passive effects', async () => {
+    function App() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Effect');
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App />);
+      expect(Scheduler).toFlushUntilNextPaint(['Child']);
+      expect(root).toMatchRenderedOutput('Child');
+
+      // Passive effects are pending. Calling flushSync should not affect them.
+      ReactNoop.flushSync();
+      // Effects still haven't fired.
+      expect(Scheduler).toHaveYielded([]);
+    });
+    // Now the effects have fired.
+    expect(Scheduler).toHaveYielded(['Effect']);
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index fc5e61cd78ee..7de523293448 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1795,10 +1795,11 @@ describe('ReactHooksWithNoopRenderer', () => {
           return <Text text={'Count: ' + count} />;
         }
         await act(async () => {
-          ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
+          ReactNoop.flushSync(() => {
+            ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
+          });
 
           // Even in legacy mode, effects are deferred until after paint
-          ReactNoop.flushSync();
           expect(Scheduler).toHaveYielded(['Count: (empty)']);
           expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
         });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index b603b03c696f..9c9490085147 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -349,63 +349,4 @@ describe('ReactIncrementalScheduling', () => {
     // The updates should all be flushed with Task priority
     expect(ReactNoop).toMatchRenderedOutput(<span prop={5} />);
   });
-
-  it('can opt-out of batching using unbatchedUpdates', () => {
-    ReactNoop.flushSync(() => {
-      ReactNoop.render(<span prop={0} />);
-      expect(ReactNoop.getChildren()).toEqual([]);
-      // Should not have flushed yet because we're still batching
-
-      // unbatchedUpdates reverses the effect of batchedUpdates, so sync
-      // updates are not batched
-      ReactNoop.unbatchedUpdates(() => {
-        ReactNoop.render(<span prop={1} />);
-        expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
-        ReactNoop.render(<span prop={2} />);
-        expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
-      });
-
-      ReactNoop.render(<span prop={3} />);
-      expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
-    });
-    // Remaining update is now flushed
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
-  });
-
-  it('nested updates are always deferred, even inside unbatchedUpdates', () => {
-    let instance;
-    class Foo extends React.Component {
-      state = {step: 0};
-      componentDidUpdate() {
-        Scheduler.unstable_yieldValue('componentDidUpdate: ' + this.state.step);
-        if (this.state.step === 1) {
-          ReactNoop.unbatchedUpdates(() => {
-            // This is a nested state update, so it should not be
-            // flushed synchronously, even though we wrapped it
-            // in unbatchedUpdates.
-            this.setState({step: 2});
-          });
-          expect(Scheduler).toHaveYielded([
-            'render: 1',
-            'componentDidUpdate: 1',
-          ]);
-          expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
-        }
-      }
-      render() {
-        Scheduler.unstable_yieldValue('render: ' + this.state.step);
-        instance = this;
-        return <span prop={this.state.step} />;
-      }
-    }
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield(['render: 0']);
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={0} />);
-
-    ReactNoop.flushSync(() => {
-      instance.setState({step: 1});
-    });
-    expect(Scheduler).toHaveYielded(['render: 2', 'componentDidUpdate: 2']);
-    expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
-  });
 });

From 0f09f14ae60cfca996c15fc50eeb59447c19a7be Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 10 Jul 2021 18:02:00 -0400
Subject: [PATCH 0682/1603] Check if already rendering before flushing

Forgot to stage this before committing 54e88ed12

I don't think is currently observable but should include the guard to
protect against regressions (though this whole block will be deleted
along with legacy mode, anyway).
---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 3 ++-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b6f697edfee3..bb855370faec 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1086,7 +1086,8 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
   // next event, not at the end of the previous one.
   if (
     rootWithPendingPassiveEffects !== null &&
-    rootWithPendingPassiveEffects.tag === LegacyRoot
+    rootWithPendingPassiveEffects.tag === LegacyRoot &&
+    (executionContext & (RenderContext | CommitContext)) === NoContext
   ) {
     flushPassiveEffects();
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 22c8395cb098..a7b020726e71 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1086,7 +1086,8 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
   // next event, not at the end of the previous one.
   if (
     rootWithPendingPassiveEffects !== null &&
-    rootWithPendingPassiveEffects.tag === LegacyRoot
+    rootWithPendingPassiveEffects.tag === LegacyRoot &&
+    (executionContext & (RenderContext | CommitContext)) === NoContext
   ) {
     flushPassiveEffects();
   }

From bfa50f827241300d6674eeb99b9efab1ac9a5c40 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 12 Jul 2021 10:55:09 -0400
Subject: [PATCH 0683/1603] Inline discreteUpdates (#21784)

This API is only used by the event system, to set the event priority for
the scope of a function. We don't need it anymore because we can modify
the priority directly, like we already do for continuous input events.
---
 .../src/events/ReactDOMEventListener.js        | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 81b3a1b85dce..f3a7b974dfe9 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -31,7 +31,6 @@ import getEventTarget from './getEventTarget';
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
-import {discreteUpdates} from './ReactDOMUpdateBatching';
 
 import {
   getCurrentPriorityLevel as getCurrentSchedulerPriorityLevel,
@@ -112,13 +111,16 @@ function dispatchDiscreteEvent(
   container,
   nativeEvent,
 ) {
-  discreteUpdates(
-    dispatchEvent,
-    domEventName,
-    eventSystemFlags,
-    container,
-    nativeEvent,
-  );
+  const previousPriority = getCurrentUpdatePriority();
+  const prevTransition = ReactCurrentBatchConfig.transition;
+  ReactCurrentBatchConfig.transition = 0;
+  try {
+    setCurrentUpdatePriority(DiscreteEventPriority);
+    dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
+  } finally {
+    setCurrentUpdatePriority(previousPriority);
+    ReactCurrentBatchConfig.transition = prevTransition;
+  }
 }
 
 function dispatchContinuousEvent(

From c2c6ea1fdead7a33a33664675365b1575315276e Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 12 Jul 2021 14:50:33 -0400
Subject: [PATCH 0684/1603] Capture suspense boundaries with undefined
 fallbacks (#21854)

---
 ...DOMServerPartialHydration-test.internal.js |  12 +-
 .../ReactServerRenderingHydration-test.js     |  10 +-
 .../src/server/ReactPartialRenderer.js        |  19 --
 .../src/ReactFiberBeginWork.new.js            |  36 ++-
 .../src/ReactFiberBeginWork.old.js            |  36 ++-
 .../src/ReactFiberCompleteWork.new.js         |   4 +-
 .../src/ReactFiberCompleteWork.old.js         |   4 +-
 .../src/ReactFiberSuspenseComponent.new.js    |   4 -
 .../src/ReactFiberSuspenseComponent.old.js    |   4 -
 .../src/__tests__/ReactHooks-test.internal.js |   2 -
 .../__tests__/ReactSuspense-test.internal.js  |  44 +---
 .../__tests__/ReactSuspenseFallback-test.js   | 223 ++++++++++++++++++
 .../src/__tests__/ReactSuspenseList-test.js   |  83 +++++++
 .../ReactSuspenseWithNoopRenderer-test.js     | 100 ++++++++
 14 files changed, 452 insertions(+), 129 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index a78298878b37..9f954f4581d3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -714,7 +714,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('Hi');
   });
 
-  it('shows the fallback of the outer if fallback is missing', async () => {
+  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;
@@ -759,7 +759,8 @@ describe('ReactDOMServerPartialHydration', () => {
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
-    expect(ref.current).toBe(null);
+    const span = container.getElementsByTagName('span')[0];
+    expect(ref.current).toBe(span);
 
     // Render an update, but leave it still suspended.
     root.render(<App text="Hi" className="hi" />);
@@ -768,9 +769,9 @@ describe('ReactDOMServerPartialHydration', () => {
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
-    expect(container.getElementsByTagName('span').length).toBe(0);
-    expect(ref.current).toBe(null);
-    expect(container.textContent).toBe('Loading...');
+    expect(container.getElementsByTagName('span').length).toBe(1);
+    expect(ref.current).toBe(span);
+    expect(container.textContent).toBe('');
 
     // Unsuspending shows the content.
     suspend = false;
@@ -780,7 +781,6 @@ describe('ReactDOMServerPartialHydration', () => {
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
-    const span = container.getElementsByTagName('span')[0];
     expect(span.textContent).toBe('Hi');
     expect(span.className).toBe('hi');
     expect(ref.current).toBe(span);
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 12fc6987cf59..6e2ec3150d7f 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -471,10 +471,12 @@ describe('ReactDOMServerHydration', () => {
       element,
     );
 
-    // Because this didn't have a fallback, it was hydrated as if it's
-    // not a Suspense boundary.
-    expect(ref.current).toBe(div);
-    expect(element.innerHTML).toBe('<div>Hello World</div>');
+    // The content should've been client rendered.
+    expect(ref.current).not.toBe(div);
+    // Unfortunately, since we don't delete the tail at the root, a duplicate will remain.
+    expect(element.innerHTML).toBe(
+      '<div>Hello World</div><div>Hello World</div>',
+    );
   });
 
   // regression test for https://github.com/facebook/react/issues/17170
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 752af3b2c737..455309db79c7 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -1123,25 +1123,6 @@ class ReactDOMServerRenderer {
         case REACT_SUSPENSE_TYPE: {
           if (enableSuspenseServerRenderer) {
             const fallback = ((nextChild: any): ReactElement).props.fallback;
-            if (fallback === undefined) {
-              // If there is no fallback, then this just behaves as a fragment.
-              const nextChildren = toArray(
-                ((nextChild: any): ReactElement).props.children,
-              );
-              const frame: Frame = {
-                type: null,
-                domNamespace: parentNamespace,
-                children: nextChildren,
-                childIndex: 0,
-                context: context,
-                footer: '',
-              };
-              if (__DEV__) {
-                ((frame: any): FrameDev).debugElementStack = [];
-              }
-              this.stack.push(frame);
-              return '';
-            }
             const fallbackChildren = toArray(fallback);
             const nextChildren = toArray(
               ((nextChild: any): ReactElement).props.children,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 581bf6c76d45..50a5a81a1f09 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1867,12 +1867,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // This is a new mount or this boundary is already showing a fallback state.
       // Mark this subtree context as having at least one invisible parent that could
       // handle the fallback state.
-      // Boundaries without fallbacks or should be avoided are not considered since
-      // they cannot handle preferred fallback states.
-      if (
-        nextProps.fallback !== undefined &&
-        nextProps.unstable_avoidThisFallback !== true
-      ) {
+      // Avoided boundaries are not considered since they cannot handle preferred fallback states.
+      if (nextProps.unstable_avoidThisFallback !== true) {
         suspenseContext = addSubtreeSuspenseContext(
           suspenseContext,
           InvisibleParentSuspenseContext,
@@ -1910,22 +1906,18 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   if (current === null) {
     // Initial mount
     // If we're currently hydrating, try to hydrate this boundary.
-    // But only if this has a fallback.
-    if (nextProps.fallback !== undefined) {
-      tryToClaimNextHydratableInstance(workInProgress);
-      // This could've been a dehydrated suspense component.
-      if (enableSuspenseServerRenderer) {
-        const suspenseState: null | SuspenseState =
-          workInProgress.memoizedState;
-        if (suspenseState !== null) {
-          const dehydrated = suspenseState.dehydrated;
-          if (dehydrated !== null) {
-            return mountDehydratedSuspenseComponent(
-              workInProgress,
-              dehydrated,
-              renderLanes,
-            );
-          }
+    tryToClaimNextHydratableInstance(workInProgress);
+    // This could've been a dehydrated suspense component.
+    if (enableSuspenseServerRenderer) {
+      const suspenseState: null | SuspenseState = workInProgress.memoizedState;
+      if (suspenseState !== null) {
+        const dehydrated = suspenseState.dehydrated;
+        if (dehydrated !== null) {
+          return mountDehydratedSuspenseComponent(
+            workInProgress,
+            dehydrated,
+            renderLanes,
+          );
         }
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index b4dde9e826d8..fa0a9840e758 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1867,12 +1867,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // This is a new mount or this boundary is already showing a fallback state.
       // Mark this subtree context as having at least one invisible parent that could
       // handle the fallback state.
-      // Boundaries without fallbacks or should be avoided are not considered since
-      // they cannot handle preferred fallback states.
-      if (
-        nextProps.fallback !== undefined &&
-        nextProps.unstable_avoidThisFallback !== true
-      ) {
+      // Avoided boundaries are not considered since they cannot handle preferred fallback states.
+      if (nextProps.unstable_avoidThisFallback !== true) {
         suspenseContext = addSubtreeSuspenseContext(
           suspenseContext,
           InvisibleParentSuspenseContext,
@@ -1910,22 +1906,18 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   if (current === null) {
     // Initial mount
     // If we're currently hydrating, try to hydrate this boundary.
-    // But only if this has a fallback.
-    if (nextProps.fallback !== undefined) {
-      tryToClaimNextHydratableInstance(workInProgress);
-      // This could've been a dehydrated suspense component.
-      if (enableSuspenseServerRenderer) {
-        const suspenseState: null | SuspenseState =
-          workInProgress.memoizedState;
-        if (suspenseState !== null) {
-          const dehydrated = suspenseState.dehydrated;
-          if (dehydrated !== null) {
-            return mountDehydratedSuspenseComponent(
-              workInProgress,
-              dehydrated,
-              renderLanes,
-            );
-          }
+    tryToClaimNextHydratableInstance(workInProgress);
+    // This could've been a dehydrated suspense component.
+    if (enableSuspenseServerRenderer) {
+      const suspenseState: null | SuspenseState = workInProgress.memoizedState;
+      if (suspenseState !== null) {
+        const dehydrated = suspenseState.dehydrated;
+        if (dehydrated !== null) {
+          return mountDehydratedSuspenseComponent(
+            workInProgress,
+            dehydrated,
+            renderLanes,
+          );
         }
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index e11e15bac8a6..29c5fe48c4b2 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1045,9 +1045,7 @@ function completeWork(
       const nextDidTimeout = nextState !== null;
       let prevDidTimeout = false;
       if (current === null) {
-        if (workInProgress.memoizedProps.fallback !== undefined) {
-          popHydrationState(workInProgress);
-        }
+        popHydrationState(workInProgress);
       } else {
         const prevState: null | SuspenseState = current.memoizedState;
         prevDidTimeout = prevState !== null;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index ba6200d364a3..a119a6b97519 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1045,9 +1045,7 @@ function completeWork(
       const nextDidTimeout = nextState !== null;
       let prevDidTimeout = false;
       if (current === null) {
-        if (workInProgress.memoizedProps.fallback !== undefined) {
-          popHydrationState(workInProgress);
-        }
+        popHydrationState(workInProgress);
       } else {
         const prevState: null | SuspenseState = current.memoizedState;
         prevDidTimeout = prevState !== null;
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index b1077092d46a..5ad7ae650249 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -77,10 +77,6 @@ export function shouldCaptureSuspense(
     return false;
   }
   const props = workInProgress.memoizedProps;
-  // In order to capture, the Suspense component must have a fallback prop.
-  if (props.fallback === undefined) {
-    return false;
-  }
   // Regular boundaries always capture.
   if (props.unstable_avoidThisFallback !== true) {
     return true;
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index b97064696760..51bef1df3a56 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -77,10 +77,6 @@ export function shouldCaptureSuspense(
     return false;
   }
   const props = workInProgress.memoizedProps;
-  // In order to capture, the Suspense component must have a fallback prop.
-  if (props.fallback === undefined) {
-    return false;
-  }
   // Regular boundaries always capture.
   if (props.unstable_avoidThisFallback !== true) {
     return true;
diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
index c14588788b38..53fb9c07589e 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -19,8 +19,6 @@ let Scheduler;
 let ReactDOMServer;
 let act;
 
-// Additional tests can be found in ReactHooksWithNoopRenderer. Plan is to
-// gradually migrate those to this file.
 describe('ReactHooks', () => {
   beforeEach(() => {
     jest.resetModules();
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index e00f5e119c5b..c11dcfe69292 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -9,8 +9,6 @@ let act;
 let TextResource;
 let textResourceShouldFail;
 
-// Additional tests can be found in ReactSuspenseWithNoopRenderer. Plan is
-// to gradually migrate those to this file.
 describe('ReactSuspense', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -391,44 +389,10 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('Hi');
   });
 
-  it('only captures if `fallback` is defined', () => {
-    const root = ReactTestRenderer.create(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <Suspense>
-          <AsyncText text="Hi" ms={5000} />
-        </Suspense>
-      </Suspense>,
-      {
-        unstable_isConcurrent: true,
-      },
-    );
-
-    expect(Scheduler).toFlushAndYield([
-      'Suspend! [Hi]',
-      // The outer fallback should be rendered, because the inner one does not
-      // have a `fallback` prop
-      'Loading...',
-    ]);
-    jest.advanceTimersByTime(1000);
-    expect(Scheduler).toHaveYielded([]);
-    expect(Scheduler).toFlushAndYield([]);
-    expect(root).toMatchRenderedOutput('Loading...');
-
-    jest.advanceTimersByTime(5000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
-    expect(Scheduler).toFlushAndYield(['Hi']);
-    expect(root).toMatchRenderedOutput('Hi');
-  });
-
-  it('throws if tree suspends and none of the Suspense ancestors have a fallback', () => {
-    ReactTestRenderer.create(
-      <Suspense>
-        <AsyncText text="Hi" ms={1000} />
-      </Suspense>,
-      {
-        unstable_isConcurrent: true,
-      },
-    );
+  it('throws if tree suspends and none of the Suspense ancestors have a boundary', () => {
+    ReactTestRenderer.create(<AsyncText text="Hi" ms={1000} />, {
+      unstable_isConcurrent: true,
+    });
 
     expect(Scheduler).toFlushAndThrow(
       'AsyncText suspended while rendering, but no fallback UI was specified.',
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 000000000000..18e21a43c134
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFallback-test.js
@@ -0,0 +1,223 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+let React;
+let ReactNoop;
+let Scheduler;
+let Suspense;
+let getCacheForType;
+let caches;
+let seededCache;
+
+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;
+  });
+
+  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.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(text);
+    return <span prop={text} />;
+  }
+
+  function AsyncText({text, showVersion}) {
+    const version = readText(text);
+    const fullText = showVersion ? `${text} [v${version}]` : text;
+    Scheduler.unstable_yieldValue(fullText);
+    return <span prop={fullText} />;
+  }
+
+  function span(prop) {
+    return {type: 'span', children: [], prop, hidden: false};
+  }
+
+  // @gate enableCache
+  it('suspends and shows fallback', () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Loading..." />}>
+        <AsyncText text="A" ms={100} />
+      </Suspense>,
+    );
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+  });
+
+  // @gate enableCache
+  it('suspends and shows null fallback', () => {
+    ReactNoop.render(
+      <Suspense fallback={null}>
+        <AsyncText text="A" ms={100} />
+      </Suspense>,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      // null
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+  });
+
+  // @gate enableCache
+  it('suspends and shows undefined fallback', () => {
+    ReactNoop.render(
+      <Suspense>
+        <AsyncText text="A" ms={100} />
+      </Suspense>,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      // null
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+  });
+
+  // @gate enableCache
+  it('suspends and shows inner fallback', () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Should not show..." />}>
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" ms={100} />
+        </Suspense>
+      </Suspense>,
+    );
+
+    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+  });
+
+  // @gate enableCache
+  it('suspends and shows inner undefined fallback', () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Should not show..." />}>
+        <Suspense>
+          <AsyncText text="A" ms={100} />
+        </Suspense>
+      </Suspense>,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      // null
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+  });
+
+  // @gate enableCache
+  it('suspends and shows inner null fallback', () => {
+    ReactNoop.render(
+      <Suspense fallback={<Text text="Should not show..." />}>
+        <Suspense fallback={null}>
+          <AsyncText text="A" ms={100} />
+        </Suspense>
+      </Suspense>,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      // null
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index ddd20f35edad..e969a59c4f60 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -771,6 +771,89 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  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 />);
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      // null
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    // Let's do an update that should consult the avoided boundaries.
+    ReactNoop.render(<Foo showMore={true} />);
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'Suspend! [B]',
+      // 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 B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'Suspend! [C]']);
+
+    // Even though we could now show B, we're still waiting on C.
+    expect(ReactNoop).toMatchRenderedOutput(<span>A</span>);
+
+    await C.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
+
   it('displays each items in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index fdd1a46dbb1e..ac7d0665f3fb 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -2303,6 +2303,55 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
   });
 
+  // @gate enableCache
+  it('does not show the parent fallback if the inner fallback is not defined', async () => {
+    function Foo({showC}) {
+      Scheduler.unstable_yieldValue('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 />);
+    expect(Scheduler).toFlushAndYield([
+      'Foo',
+      'Suspend! [A]',
+      'B',
+      // null
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([span('B')]);
+
+    // Eventually we resolve and show the data.
+    await resolveText('A');
+    expect(Scheduler).toFlushAndYield(['A']);
+    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+
+    // Update to show C
+    ReactNoop.render(<Foo showC={true} />);
+    expect(Scheduler).toFlushAndYield([
+      'Foo',
+      'A',
+      'Suspend! [C]',
+      // null
+      'B',
+    ]);
+    // Flush to skip suspended time.
+    Scheduler.unstable_advanceTime(600);
+    await advanceTimers(600);
+    expect(ReactNoop.getChildren()).toEqual([hiddenSpan('A'), span('B')]);
+
+    // Later we load the data.
+    await resolveText('C');
+    expect(Scheduler).toFlushAndYield(['A', 'C']);
+    expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
+  });
+
   // @gate enableCache
   it('favors showing the inner fallback for nested top level avoided fallback', async () => {
     function Foo({showB}) {
@@ -2393,6 +2442,57 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
   });
 
+  // @gate enableCache
+  it('keeps showing an undefined fallback if it is already showing', async () => {
+    function Foo({showB}) {
+      Scheduler.unstable_yieldValue('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 />);
+    expect(Scheduler).toFlushAndYield(['Foo', 'A']);
+    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      React.startTransition(() => {
+        ReactNoop.render(<Foo showB={true} />);
+      });
+    } else {
+      ReactNoop.render(<Foo showB={true} />);
+    }
+
+    expect(Scheduler).toFlushAndYield([
+      'Foo',
+      'A',
+      'Suspend! [B]',
+      // Null
+    ]);
+    // Still suspended.
+    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+
+    // Flush to skip suspended time.
+    Scheduler.unstable_advanceTime(600);
+    await advanceTimers(600);
+
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      // Transitions never fall back.
+      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    } else {
+      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+    }
+  });
+
   // @gate enableCache
   it('commits a suspended idle pri render within a reasonable time', async () => {
     function Foo({renderContent}) {

From a4ecd85e8628d1fdfe77c5615934de40af7d9537 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 12 Jul 2021 20:15:20 -0400
Subject: [PATCH 0685/1603] act: Batch updates, even in legacy roots (#21797)

In legacy roots, if an update originates outside of `batchedUpdates`,
check if it's inside an `act` scope; if so, treat it as if it were
batched. This is only necessary in legacy roots because in concurrent
roots, updates are batched by default.

With this change, the Test Utils and Test Renderer versions of `act` are
nothing more than aliases of the isomorphic API (still not exposed, but
will likely be the recommended API that replaces the others).
---
 .../src/__tests__/inspectedElement-test.js    |  2 +-
 .../src/test-utils/ReactTestUtils.js          |  8 +--
 .../src/ReactFiberWorkLoop.new.js             | 13 ++++-
 .../src/ReactFiberWorkLoop.old.js             | 13 ++++-
 .../src/__tests__/ReactIsomorphicAct-test.js  | 49 +++++++++++++++++++
 .../src/ReactTestRenderer.js                  |  8 +--
 packages/react/src/ReactAct.js                | 22 +++++++++
 packages/react/src/ReactCurrentActQueue.js    |  4 ++
 8 files changed, 100 insertions(+), 19 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 4eb4b76a07e7..67598900ec90 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2462,7 +2462,7 @@ describe('InspectedElement', () => {
       };
       const toggleError = async forceError => {
         await withErrorsOrWarningsIgnored(['ErrorBoundary'], async () => {
-          await utils.actAsync(() => {
+          await TestUtilsAct(() => {
             bridge.send('overrideError', {
               id: targetErrorBoundaryID,
               rendererID: store.getRendererIDForElement(targetErrorBoundaryID),
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index cc93dc866eaa..f93c92a93767 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -33,14 +33,8 @@ const getNodeFromInstance = EventInternals[1];
 const getFiberCurrentPropsFromNode = EventInternals[2];
 const enqueueStateRestore = EventInternals[3];
 const restoreStateIfNeeded = EventInternals[4];
-const batchedUpdates = EventInternals[5];
 
-const act_notBatchedInLegacyMode = React.unstable_act;
-function act(callback) {
-  return act_notBatchedInLegacyMode(() => {
-    return batchedUpdates(callback);
-  });
-}
+const act = React.unstable_act;
 
 function Event(suffix) {}
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index bb855370faec..2db7c319a2ec 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -518,7 +518,9 @@ export function scheduleUpdateOnFiber(
   if (
     lane === SyncLane &&
     executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode
+    (fiber.mode & ConcurrentMode) === NoMode &&
+    // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+    !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
   ) {
     // Flush the synchronous work now, unless we're already working or inside
     // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
@@ -668,6 +670,9 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     if (root.tag === LegacyRoot) {
+      if (__DEV__ && ReactCurrentActQueue.isBatchingLegacy !== null) {
+        ReactCurrentActQueue.didScheduleLegacyUpdate = true;
+      }
       scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
     } else {
       scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -1049,7 +1054,11 @@ export function batchedUpdates<A, R>(fn: A => R, a: A): R {
     executionContext = prevExecutionContext;
     // If there were legacy sync updates, flush them at the end of the outer
     // most batchedUpdates-like method.
-    if (executionContext === NoContext) {
+    if (
+      executionContext === NoContext &&
+      // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
+    ) {
       resetRenderTimer();
       flushSyncCallbacksOnlyInLegacyMode();
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index a7b020726e71..8a93502b905a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -518,7 +518,9 @@ export function scheduleUpdateOnFiber(
   if (
     lane === SyncLane &&
     executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode
+    (fiber.mode & ConcurrentMode) === NoMode &&
+    // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+    !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
   ) {
     // Flush the synchronous work now, unless we're already working or inside
     // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
@@ -668,6 +670,9 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
     // Special case: Sync React callbacks are scheduled on a special
     // internal queue
     if (root.tag === LegacyRoot) {
+      if (__DEV__ && ReactCurrentActQueue.isBatchingLegacy !== null) {
+        ReactCurrentActQueue.didScheduleLegacyUpdate = true;
+      }
       scheduleLegacySyncCallback(performSyncWorkOnRoot.bind(null, root));
     } else {
       scheduleSyncCallback(performSyncWorkOnRoot.bind(null, root));
@@ -1049,7 +1054,11 @@ export function batchedUpdates<A, R>(fn: A => R, a: A): R {
     executionContext = prevExecutionContext;
     // If there were legacy sync updates, flush them at the end of the outer
     // most batchedUpdates-like method.
-    if (executionContext === NoContext) {
+    if (
+      executionContext === NoContext &&
+      // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
+    ) {
       resetRenderTimer();
       flushSyncCallbacksOnlyInLegacyMode();
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
index 001474e93521..135757d24f9e 100644
--- a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
@@ -78,4 +78,53 @@ describe('isomorphic act()', () => {
     });
     expect(returnValue).toEqual('hi');
   });
+
+  // @gate __DEV__
+  test('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__
+  test('in legacy mode, in an async scope, updates are batched until the first `await`', async () => {
+    const root = ReactNoop.createLegacyRoot();
+
+    await act(async () => {
+      // These updates are batched. This replicates the behavior of the original
+      // `act` implementation, for compatibility.
+      root.render('A');
+      root.render('B');
+      // Nothing has rendered yet.
+      expect(root).toMatchRenderedOutput(null);
+      await null;
+      // Updates are flushed after the first await.
+      expect(root).toMatchRenderedOutput('B');
+
+      // Subsequent updates in the same scope aren't batched.
+      root.render('C');
+      expect(root).toMatchRenderedOutput('C');
+    });
+  });
 });
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index eb0097550695..60e02766dc9d 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {Thenable} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Instance, TextInstance} from './ReactTestHostConfig';
@@ -50,12 +49,7 @@ import {getPublicInstance} from './ReactTestHostConfig';
 import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
-const act_notBatchedInLegacyMode = React.unstable_act;
-function act<T>(callback: () => T): Thenable<T> {
-  return act_notBatchedInLegacyMode(() => {
-    return batchedUpdates(callback);
-  });
-}
+const act = React.unstable_act;
 
 // TODO: Remove from public bundle
 
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
index 99156f85fde4..1dc2d8fcd40b 100644
--- a/packages/react/src/ReactAct.js
+++ b/packages/react/src/ReactAct.js
@@ -28,12 +28,34 @@ export function act<T>(callback: () => T | Thenable<T>): Thenable<T> {
       ReactCurrentActQueue.current = [];
     }
 
+    const prevIsBatchingLegacy = ReactCurrentActQueue.isBatchingLegacy;
     let result;
     try {
+      // 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.
+      ReactCurrentActQueue.isBatchingLegacy = true;
       result = callback();
+
+      // 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 &&
+        ReactCurrentActQueue.didScheduleLegacyUpdate
+      ) {
+        const queue = ReactCurrentActQueue.current;
+        if (queue !== null) {
+          ReactCurrentActQueue.didScheduleLegacyUpdate = false;
+          flushActQueue(queue);
+        }
+      }
     } catch (error) {
       popActScope(prevActScopeDepth);
       throw error;
+    } finally {
+      ReactCurrentActQueue.isBatchingLegacy = prevIsBatchingLegacy;
     }
 
     if (
diff --git a/packages/react/src/ReactCurrentActQueue.js b/packages/react/src/ReactCurrentActQueue.js
index 1b7966337cad..694907a10335 100644
--- a/packages/react/src/ReactCurrentActQueue.js
+++ b/packages/react/src/ReactCurrentActQueue.js
@@ -17,6 +17,10 @@ const ReactCurrentActQueue = {
   // on at the testing frameworks layer? Instead of what we do now, which
   // is check if a `jest` global is defined.
   disableActWarning: (false: boolean),
+
+  // Used to reproduce behavior of `batchedUpdates` in legacy mode.
+  isBatchingLegacy: false,
+  didScheduleLegacyUpdate: false,
 };
 
 export default ReactCurrentActQueue;

From 9f5224a9c6f5287ddf7db724f5a79443d93fbd44 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 13 Jul 2021 15:41:51 +0100
Subject: [PATCH 0686/1603] Restore DevTools console message (#21864)

---
 .../react-reconciler/src/ReactFiberDevToolsHook.new.js   | 9 +++++++--
 .../react-reconciler/src/ReactFiberDevToolsHook.old.js   | 9 +++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index e7bde59e20cb..52d1c68730c6 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -69,8 +69,13 @@ export function injectInternals(internals: Object): boolean {
       console.error('React instrumentation encountered an error: %s.', err);
     }
   }
-  // DevTools exists
-  return true;
+  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) {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index 494138685e10..42fd68a93a8b 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -69,8 +69,13 @@ export function injectInternals(internals: Object): boolean {
       console.error('React instrumentation encountered an error: %s.', err);
     }
   }
-  // DevTools exists
-  return true;
+  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) {

From b03293faaa868f93b57c34aed64f48e4cfec1c24 Mon Sep 17 00:00:00 2001
From: Ehsan Hosseini <53467610+e-hosseini@users.noreply.github.com>
Date: Tue, 13 Jul 2021 16:55:33 +0200
Subject: [PATCH 0687/1603] Fix link to fbjs (#21863)

`fbjs` doesn't have the `main` branch and it is `master`
---
 scripts/print-warnings/print-warnings.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index 95dabcc1e11e..9bdd6543d2a3 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -19,7 +19,7 @@ const parserOptions = {
   // babelParser has its own options and we can't directly
   // import/require a babel preset. It should be kept **the same** as
   // the `babel-plugin-syntax-*` ones specified in
-  // https://github.com/facebook/fbjs/blob/main/packages/babel-preset-fbjs/configure.js
+  // https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
   plugins: [
     'classProperties',
     'flow',

From 464f275724ab11e3b55ea753bc4aee6700399332 Mon Sep 17 00:00:00 2001
From: Ehsan Hosseini <53467610+e-hosseini@users.noreply.github.com>
Date: Tue, 13 Jul 2021 16:55:54 +0200
Subject: [PATCH 0688/1603] Update link to flow (#21862)

`main` branch does not exist in the `flow` project and it is `master`.

Co-authored-by: Ehsan Hosseini <53467610+dh-hosseini@users.noreply.github.com>
---
 packages/react/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/index.js b/packages/react/index.js
index 890b06084738..247d17ec01b8 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-// Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
+// Keep in sync with https://github.com/facebook/flow/blob/master/lib/react.js
 export type StatelessFunctionalComponent<
   P,
 > = React$StatelessFunctionalComponent<P>;

From 64bbd7a7f1b7874ffcbfc69fa87be4f606e5adc5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 13 Jul 2021 13:28:01 -0400
Subject: [PATCH 0689/1603] Adjust Error stack columns numbers by 1 (#21865)

To account for differences between error stacks (1-based) and ASTs (0-based). In practice this change should not make an observable difference.
---
 packages/react-devtools-extensions/src/astUtils.js    | 11 +++++++++++
 .../react-devtools-extensions/src/parseHookNames.js   |  2 ++
 2 files changed, 13 insertions(+)

diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 23208fca1eee..879f17ae1805 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -40,6 +40,17 @@ function checkNodeLocation(
     return false;
   }
 
+  // Column numbers are representated 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)
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index 7250dfee687c..58436acf4f8c 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -378,6 +378,7 @@ function findHookNames(
         line: lineNumber,
 
         // Column numbers are representated differently between tools/engines.
+        // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
         // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
         column: columnNumber - 1,
       });
@@ -476,6 +477,7 @@ async function parseSourceAST(
         line: lineNumber,
 
         // Column numbers are representated differently between tools/engines.
+        // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
         // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
         column: columnNumber - 1,
       });

From 87b67d319fed725fafe06fb1bfd1b4a672e5a629 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 13 Jul 2021 13:41:19 -0400
Subject: [PATCH 0690/1603] Enable scheduling profiler flag for react-dom
 profiling builds (#21867)

---
 packages/shared/ReactFeatureFlags.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index d966c9ec54c9..862a6bde9b26 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -17,7 +17,7 @@ export const enableDebugTracing = false;
 
 // Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
 // for an experimental scheduling profiler tool.
-export const enableSchedulingProfiler = __PROFILE__ && __EXPERIMENTAL__;
+export const enableSchedulingProfiler = __PROFILE__;
 
 // Helps identify side effects in render-phase lifecycle hooks and setState
 // reducers by double invoking them in StrictLegacyMode.

From 14bac6193a334eda42e727336e8967419f08f5df Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 13 Jul 2021 15:48:11 -0400
Subject: [PATCH 0691/1603] Allow components to render undefined (#21869)

---
 .../ReactDOMServerIntegrationElements-test.js |  52 +-
 .../src/__tests__/ReactEmptyComponent-test.js | 474 +++++++++---------
 .../__tests__/ReactFunctionComponent-test.js  |   7 +-
 .../__tests__/ReactMockedComponent-test.js    |  34 +-
 .../ReactDOMServerIntegrationTestUtils.js     |   2 +-
 .../src/server/ReactPartialRenderer.js        |  22 -
 .../src/ReactChildFiber.new.js                |  40 +-
 .../src/ReactChildFiber.old.js                |  40 +-
 packages/react-server/src/ReactFizzServer.js  |  23 +-
 .../__tests__/ReactError-test.internal.js     |   8 +-
 10 files changed, 286 insertions(+), 416 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
index 859647b39c1f..c41170aa54e9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
@@ -924,33 +924,37 @@ describe('ReactDOMServerIntegration', () => {
       );
     });
 
-    describe('components that throw errors', function() {
-      itThrowsWhenRendering(
-        'a function returning undefined',
-        async render => {
-          const UndefinedComponent = () => undefined;
-          await render(<UndefinedComponent />, 1);
-        },
-        'UndefinedComponent(...): Nothing was returned from render. ' +
-          'This usually means a return statement is missing. Or, to ' +
-          'render nothing, return null.',
-      );
+    describe('components that render nullish', function() {
+      itRenders('a function returning null', async render => {
+        const NullComponent = () => null;
+        await render(<NullComponent />);
+      });
 
-      itThrowsWhenRendering(
-        'a class returning undefined',
-        async render => {
-          class UndefinedComponent extends React.Component {
-            render() {
-              return undefined;
-            }
+      itRenders('a class returning null', async render => {
+        class NullComponent extends React.Component {
+          render() {
+            return null;
           }
-          await render(<UndefinedComponent />, 1);
-        },
-        'UndefinedComponent(...): Nothing was returned from render. ' +
-          'This usually means a return statement is missing. Or, to ' +
-          'render nothing, 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 => {
diff --git a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
index 0c0b1d1a9273..12146e9b7edc 100644
--- a/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactEmptyComponent-test.js
@@ -45,145 +45,117 @@ describe('ReactEmptyComponent', () => {
     };
   });
 
-  it('should not produce child DOM nodes for null and false', () => {
-    class Component1 extends React.Component {
-      render() {
-        return null;
-      }
-    }
-
-    class Component2 extends React.Component {
-      render() {
-        return false;
+  describe.each([null, undefined])('when %s', nullORUndefined => {
+    it('should not throw when rendering', () => {
+      class Component extends React.Component {
+        render() {
+          return nullORUndefined;
+        }
       }
-    }
-
-    const container1 = document.createElement('div');
-    ReactDOM.render(<Component1 />, container1);
-    expect(container1.children.length).toBe(0);
-
-    const container2 = document.createElement('div');
-    ReactDOM.render(<Component2 />, container2);
-    expect(container2.children.length).toBe(0);
-  });
-
-  it('should still throw when rendering to undefined', () => {
-    class Component extends React.Component {
-      render() {}
-    }
-
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(<Component />);
-    }).toThrowError(
-      'Component(...): Nothing was returned from render. This usually means a return statement is missing. ' +
-        'Or, to render nothing, return null.',
-    );
-  });
 
-  it('should be able to switch between rendering null and a normal tag', () => {
-    const instance1 = (
-      <TogglingComponent firstComponent={null} secondComponent={'div'} />
-    );
-    const instance2 = (
-      <TogglingComponent firstComponent={'div'} secondComponent={null} />
-    );
+      expect(function() {
+        ReactTestUtils.renderIntoDocument(<Component />);
+      }).not.toThrowError();
+    });
 
-    ReactTestUtils.renderIntoDocument(instance1);
-    ReactTestUtils.renderIntoDocument(instance2);
+    it('should not produce child DOM nodes for nullish and false', () => {
+      class Component1 extends React.Component {
+        render() {
+          return nullORUndefined;
+        }
+      }
 
-    expect(log).toHaveBeenCalledTimes(4);
-    expect(log).toHaveBeenNthCalledWith(1, null);
-    expect(log).toHaveBeenNthCalledWith(
-      2,
-      expect.objectContaining({tagName: 'DIV'}),
-    );
-    expect(log).toHaveBeenNthCalledWith(
-      3,
-      expect.objectContaining({tagName: 'DIV'}),
-    );
-    expect(log).toHaveBeenNthCalledWith(4, null);
-  });
+      class Component2 extends React.Component {
+        render() {
+          return false;
+        }
+      }
 
-  it('should be able to switch in a list of children', () => {
-    const instance1 = (
-      <TogglingComponent firstComponent={null} secondComponent={'div'} />
-    );
+      const container1 = document.createElement('div');
+      ReactDOM.render(<Component1 />, container1);
+      expect(container1.children.length).toBe(0);
 
-    ReactTestUtils.renderIntoDocument(
-      <div>
-        {instance1}
-        {instance1}
-        {instance1}
-      </div>,
-    );
+      const container2 = document.createElement('div');
+      ReactDOM.render(<Component2 />, container2);
+      expect(container2.children.length).toBe(0);
+    });
 
-    expect(log).toHaveBeenCalledTimes(6);
-    expect(log).toHaveBeenNthCalledWith(1, null);
-    expect(log).toHaveBeenNthCalledWith(2, null);
-    expect(log).toHaveBeenNthCalledWith(3, null);
-    expect(log).toHaveBeenNthCalledWith(
-      4,
-      expect.objectContaining({tagName: 'DIV'}),
-    );
-    expect(log).toHaveBeenNthCalledWith(
-      5,
-      expect.objectContaining({tagName: 'DIV'}),
-    );
-    expect(log).toHaveBeenNthCalledWith(
-      6,
-      expect.objectContaining({tagName: 'DIV'}),
-    );
-  });
-
-  it('should distinguish between a script placeholder and an actual script tag', () => {
-    const instance1 = (
-      <TogglingComponent firstComponent={null} secondComponent={'script'} />
-    );
-    const instance2 = (
-      <TogglingComponent firstComponent={'script'} secondComponent={null} />
-    );
+    it('should be able to switch between rendering nullish and a normal tag', () => {
+      const instance1 = (
+        <TogglingComponent
+          firstComponent={nullORUndefined}
+          secondComponent={'div'}
+        />
+      );
+      const instance2 = (
+        <TogglingComponent
+          firstComponent={'div'}
+          secondComponent={nullORUndefined}
+        />
+      );
 
-    expect(function() {
       ReactTestUtils.renderIntoDocument(instance1);
-    }).not.toThrow();
-    expect(function() {
       ReactTestUtils.renderIntoDocument(instance2);
-    }).not.toThrow();
 
-    expect(log).toHaveBeenCalledTimes(4);
-    expect(log).toHaveBeenNthCalledWith(1, null);
-    expect(log).toHaveBeenNthCalledWith(
-      2,
-      expect.objectContaining({tagName: 'SCRIPT'}),
-    );
-    expect(log).toHaveBeenNthCalledWith(
-      3,
-      expect.objectContaining({tagName: 'SCRIPT'}),
-    );
-    expect(log).toHaveBeenNthCalledWith(4, null);
-  });
+      expect(log).toHaveBeenCalledTimes(4);
+      expect(log).toHaveBeenNthCalledWith(1, null);
+      expect(log).toHaveBeenNthCalledWith(
+        2,
+        expect.objectContaining({tagName: 'DIV'}),
+      );
+      expect(log).toHaveBeenNthCalledWith(
+        3,
+        expect.objectContaining({tagName: 'DIV'}),
+      );
+      expect(log).toHaveBeenNthCalledWith(4, null);
+    });
 
-  it(
-    'should have findDOMNode return null when multiple layers of composite ' +
-      'components render to the same null placeholder',
-    () => {
-      class GrandChild extends React.Component {
-        render() {
-          return null;
-        }
-      }
+    it('should be able to switch in a list of children', () => {
+      const instance1 = (
+        <TogglingComponent
+          firstComponent={nullORUndefined}
+          secondComponent={'div'}
+        />
+      );
 
-      class Child extends React.Component {
-        render() {
-          return <GrandChild />;
-        }
-      }
+      ReactTestUtils.renderIntoDocument(
+        <div>
+          {instance1}
+          {instance1}
+          {instance1}
+        </div>,
+      );
+
+      expect(log).toHaveBeenCalledTimes(6);
+      expect(log).toHaveBeenNthCalledWith(1, null);
+      expect(log).toHaveBeenNthCalledWith(2, null);
+      expect(log).toHaveBeenNthCalledWith(3, null);
+      expect(log).toHaveBeenNthCalledWith(
+        4,
+        expect.objectContaining({tagName: 'DIV'}),
+      );
+      expect(log).toHaveBeenNthCalledWith(
+        5,
+        expect.objectContaining({tagName: 'DIV'}),
+      );
+      expect(log).toHaveBeenNthCalledWith(
+        6,
+        expect.objectContaining({tagName: 'DIV'}),
+      );
+    });
 
+    it('should distinguish between a script placeholder and an actual script tag', () => {
       const instance1 = (
-        <TogglingComponent firstComponent={'div'} secondComponent={Child} />
+        <TogglingComponent
+          firstComponent={nullORUndefined}
+          secondComponent={'script'}
+        />
       );
       const instance2 = (
-        <TogglingComponent firstComponent={Child} secondComponent={'div'} />
+        <TogglingComponent
+          firstComponent={'script'}
+          secondComponent={nullORUndefined}
+        />
       );
 
       expect(function() {
@@ -194,146 +166,192 @@ describe('ReactEmptyComponent', () => {
       }).not.toThrow();
 
       expect(log).toHaveBeenCalledTimes(4);
+      expect(log).toHaveBeenNthCalledWith(1, null);
       expect(log).toHaveBeenNthCalledWith(
-        1,
-        expect.objectContaining({tagName: 'DIV'}),
+        2,
+        expect.objectContaining({tagName: 'SCRIPT'}),
       );
-      expect(log).toHaveBeenNthCalledWith(2, null);
-      expect(log).toHaveBeenNthCalledWith(3, null);
       expect(log).toHaveBeenNthCalledWith(
-        4,
-        expect.objectContaining({tagName: 'DIV'}),
+        3,
+        expect.objectContaining({tagName: 'SCRIPT'}),
       );
-    },
-  );
+      expect(log).toHaveBeenNthCalledWith(4, null);
+    });
+
+    it(
+      'should have findDOMNode return null when multiple layers of composite ' +
+        'components render to the same nullish placeholder',
+      () => {
+        class GrandChild extends React.Component {
+          render() {
+            return nullORUndefined;
+          }
+        }
 
-  it('works when switching components', () => {
-    let assertions = 0;
+        class Child extends React.Component {
+          render() {
+            return <GrandChild />;
+          }
+        }
 
-    class Inner extends React.Component {
-      render() {
-        return <span />;
-      }
+        const instance1 = (
+          <TogglingComponent firstComponent={'div'} secondComponent={Child} />
+        );
+        const instance2 = (
+          <TogglingComponent firstComponent={Child} secondComponent={'div'} />
+        );
 
-      componentDidMount() {
-        // Make sure the DOM node resolves properly even if we're replacing a
-        // `null` component
-        expect(ReactDOM.findDOMNode(this)).not.toBe(null);
-        assertions++;
-      }
+        expect(function() {
+          ReactTestUtils.renderIntoDocument(instance1);
+        }).not.toThrow();
+        expect(function() {
+          ReactTestUtils.renderIntoDocument(instance2);
+        }).not.toThrow();
+
+        expect(log).toHaveBeenCalledTimes(4);
+        expect(log).toHaveBeenNthCalledWith(
+          1,
+          expect.objectContaining({tagName: 'DIV'}),
+        );
+        expect(log).toHaveBeenNthCalledWith(2, null);
+        expect(log).toHaveBeenNthCalledWith(3, null);
+        expect(log).toHaveBeenNthCalledWith(
+          4,
+          expect.objectContaining({tagName: 'DIV'}),
+        );
+      },
+    );
 
-      componentWillUnmount() {
-        // Even though we're getting replaced by `null`, we haven't been
-        // replaced yet!
-        expect(ReactDOM.findDOMNode(this)).not.toBe(null);
-        assertions++;
+    it('works when switching components', () => {
+      let assertions = 0;
+
+      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(ReactDOM.findDOMNode(this)).not.toBe(null);
+          assertions++;
+        }
+
+        componentWillUnmount() {
+          // Even though we're getting replaced by `null`, we haven't been
+          // replaced yet!
+          expect(ReactDOM.findDOMNode(this)).not.toBe(null);
+          assertions++;
+        }
       }
-    }
 
-    class Wrapper extends React.Component {
-      render() {
-        return this.props.showInner ? <Inner /> : null;
+      class Wrapper extends React.Component {
+        render() {
+          return this.props.showInner ? <Inner /> : nullORUndefined;
+        }
       }
-    }
 
-    const el = document.createElement('div');
-    let component;
+      const el = document.createElement('div');
+      let component;
 
-    // Render the <Inner /> component...
-    component = ReactDOM.render(<Wrapper showInner={true} />, el);
-    expect(ReactDOM.findDOMNode(component)).not.toBe(null);
+      // Render the <Inner /> component...
+      component = ReactDOM.render(<Wrapper showInner={true} />, el);
+      expect(ReactDOM.findDOMNode(component)).not.toBe(null);
 
-    // Switch to null...
-    component = ReactDOM.render(<Wrapper showInner={false} />, el);
-    expect(ReactDOM.findDOMNode(component)).toBe(null);
+      // Switch to null...
+      component = ReactDOM.render(<Wrapper showInner={false} />, el);
+      expect(ReactDOM.findDOMNode(component)).toBe(null);
 
-    // ...then switch back.
-    component = ReactDOM.render(<Wrapper showInner={true} />, el);
-    expect(ReactDOM.findDOMNode(component)).not.toBe(null);
+      // ...then switch back.
+      component = ReactDOM.render(<Wrapper showInner={true} />, el);
+      expect(ReactDOM.findDOMNode(component)).not.toBe(null);
 
-    expect(assertions).toBe(3);
-  });
+      expect(assertions).toBe(3);
+    });
 
-  it('can render null at the top level', () => {
-    const div = document.createElement('div');
-    ReactDOM.render(null, div);
-    expect(div.innerHTML).toBe('');
-  });
+    it('can render nullish at the top level', () => {
+      const div = document.createElement('div');
+      ReactDOM.render(nullORUndefined, div);
+      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();
+    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 null;
-        }
+        render() {
+          if (!this.props.visible) {
+            return nullORUndefined;
+          }
 
-        return <div>hello world</div>;
+          return <div>hello world</div>;
+        }
       }
-    }
 
-    class Parent extends React.Component {
-      update = () => {
-        this.forceUpdate();
-      };
+      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>
-        );
+        render() {
+          return (
+            <div>
+              <Child key="1" visible={false} />
+              <Child key="0" visible={true} onMount={this.update} />
+              <Child key="2" visible={false} />
+            </div>
+          );
+        }
       }
-    }
 
-    expect(function() {
-      ReactTestUtils.renderIntoDocument(<Parent />);
-    }).not.toThrow();
-  });
+      expect(function() {
+        ReactTestUtils.renderIntoDocument(<Parent />);
+      }).not.toThrow();
+    });
 
-  it('preserves the dom node during updates', () => {
-    class Empty extends React.Component {
-      render() {
-        return null;
+    it('preserves the dom node during updates', () => {
+      class Empty extends React.Component {
+        render() {
+          return nullORUndefined;
+        }
       }
-    }
 
-    const container = document.createElement('div');
+      const container = document.createElement('div');
 
-    ReactDOM.render(<Empty />, container);
-    const noscript1 = container.firstChild;
-    expect(noscript1).toBe(null);
+      ReactDOM.render(<Empty />, container);
+      const noscript1 = container.firstChild;
+      expect(noscript1).toBe(null);
 
-    // This update shouldn't create a DOM node
-    ReactDOM.render(<Empty />, container);
-    const noscript2 = container.firstChild;
-    expect(noscript2).toBe(null);
-  });
+      // This update shouldn't create a DOM node
+      ReactDOM.render(<Empty />, container);
+      const noscript2 = container.firstChild;
+      expect(noscript2).toBe(null);
+    });
 
-  it('should warn about React.forwardRef that returns undefined', () => {
-    const Empty = () => {};
-    const EmptyForwardRef = React.forwardRef(Empty);
+    it('should not warn about React.forwardRef that returns nullish', () => {
+      const Empty = () => {
+        return nullORUndefined;
+      };
+      const EmptyForwardRef = React.forwardRef(Empty);
 
-    expect(() => {
-      ReactTestUtils.renderIntoDocument(<EmptyForwardRef />);
-    }).toThrowError(
-      'ForwardRef(Empty)(...): Nothing was returned from render.',
-    );
-  });
+      expect(() => {
+        ReactTestUtils.renderIntoDocument(<EmptyForwardRef />);
+      }).not.toThrowError();
+    });
 
-  it('should warn about React.memo that returns undefined', () => {
-    const Empty = () => {};
-    const EmptyMemo = React.memo(Empty);
+    it('should not warn about React.memo that returns nullish', () => {
+      const Empty = () => {
+        return nullORUndefined;
+      };
+      const EmptyMemo = React.memo(Empty);
 
-    expect(() => {
-      ReactTestUtils.renderIntoDocument(<EmptyMemo />);
-    }).toThrowError('Empty(...): Nothing was returned from render.');
+      expect(() => {
+        ReactTestUtils.renderIntoDocument(<EmptyMemo />);
+      }).not.toThrowError();
+    });
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
index 0aa9aa69285f..9228316f884e 100644
--- a/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactFunctionComponent-test.js
@@ -136,7 +136,7 @@ describe('ReactFunctionComponent', () => {
     );
   });
 
-  it('should throw when stateless component returns undefined', () => {
+  it('should not throw when stateless component returns undefined', () => {
     function NotAComponent() {}
     expect(function() {
       ReactTestUtils.renderIntoDocument(
@@ -144,10 +144,7 @@ describe('ReactFunctionComponent', () => {
           <NotAComponent />
         </div>,
       );
-    }).toThrowError(
-      'NotAComponent(...): Nothing was returned from render. ' +
-        'This usually means a return statement is missing. Or, to render nothing, return null.',
-    );
+    }).not.toThrowError();
   });
 
   it('should throw on string refs in pure functions', () => {
diff --git a/packages/react-dom/src/__tests__/ReactMockedComponent-test.js b/packages/react-dom/src/__tests__/ReactMockedComponent-test.js
index c572c41197f2..9d33a08ca9c9 100644
--- a/packages/react-dom/src/__tests__/ReactMockedComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactMockedComponent-test.js
@@ -30,42 +30,18 @@ describe('ReactMockedComponent', () => {
     MockedComponent.prototype.render = jest.fn();
   });
 
-  it('should allow a mocked component to be rendered in dev', () => {
+  it('should allow a mocked component to be rendered', () => {
     const container = document.createElement('container');
-    if (__DEV__) {
-      ReactDOM.render(<MockedComponent />, container);
-    } else {
-      expect(() => ReactDOM.render(<MockedComponent />, container)).toThrow(
-        'Nothing was returned from render.',
-      );
-    }
+    ReactDOM.render(<MockedComponent />, container);
   });
 
   it('should allow a mocked component to be updated in dev', () => {
     const container = document.createElement('container');
-    if (__DEV__) {
-      ReactDOM.render(<MockedComponent />, container);
-    } else {
-      expect(() => ReactDOM.render(<MockedComponent />, container)).toThrow(
-        'Nothing was returned from render.',
-      );
-    }
-    if (__DEV__) {
-      ReactDOM.render(<MockedComponent />, container);
-    } else {
-      expect(() => ReactDOM.render(<MockedComponent />, container)).toThrow(
-        'Nothing was returned from render.',
-      );
-    }
+    ReactDOM.render(<MockedComponent />, container);
+    ReactDOM.render(<MockedComponent />, container);
   });
 
   it('should allow a mocked component to be rendered in dev (SSR)', () => {
-    if (__DEV__) {
-      ReactDOMServer.renderToString(<MockedComponent />);
-    } else {
-      expect(() => ReactDOMServer.renderToString(<MockedComponent />)).toThrow(
-        'Nothing was returned from render.',
-      );
-    }
+    ReactDOMServer.renderToString(<MockedComponent />);
   });
 });
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index 81be4cb30d72..8714059bb386 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -242,7 +242,7 @@ module.exports = function(initModules) {
     await asyncReactDOMRender(element, cleanContainer, true);
     // This gives us the expected text content.
     const cleanTextContent =
-      cleanContainer.lastChild && cleanContainer.lastChild.textContent;
+      (cleanContainer.lastChild && cleanContainer.lastChild.textContent) || '';
 
     // The only guarantee is that text content has been patched up if needed.
     expect(hydratedTextContent).toBe(cleanTextContent);
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 455309db79c7..caf1ee2f6fc2 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -391,18 +391,6 @@ function createOpenTagMarkup(
   return ret;
 }
 
-function validateRenderResult(child, type) {
-  if (child === undefined) {
-    invariant(
-      false,
-      '%s(...): Nothing was returned from render. This usually means a ' +
-        'return statement is missing. Or, to render nothing, ' +
-        'return null.',
-      getComponentNameFromType(type) || 'Component',
-    );
-  }
-}
-
 function resolve(
   child: mixed,
   context: Object,
@@ -631,7 +619,6 @@ function resolve(
         inst.render == null
       ) {
         child = inst;
-        validateRenderResult(child, Component);
         return;
       }
     }
@@ -720,15 +707,6 @@ function resolve(
     }
     child = inst.render();
 
-    if (__DEV__) {
-      if (child === undefined && inst.render._isMockFunction) {
-        // This is probably bad practice. Consider warning here and
-        // deprecating this convenience.
-        child = null;
-      }
-    }
-    validateRenderResult(child, Component);
-
     let childContext;
     if (disableLegacyContext) {
       if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 024a903dbd91..e3f41115f53f 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -21,15 +21,7 @@ import {
   REACT_PORTAL_TYPE,
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
-import {
-  FunctionComponent,
-  ClassComponent,
-  HostText,
-  HostPortal,
-  ForwardRef,
-  Fragment,
-  SimpleMemoComponent,
-} from './ReactWorkTags';
+import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
@@ -1302,36 +1294,6 @@ function ChildReconciler(shouldTrackSideEffects) {
         warnOnFunctionType(returnFiber);
       }
     }
-    if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
-      // If the new child is undefined, and the return fiber is a composite
-      // component, throw an error. If Fiber return types are disabled,
-      // we already threw above.
-      switch (returnFiber.tag) {
-        case ClassComponent: {
-          if (__DEV__) {
-            const instance = returnFiber.stateNode;
-            if (instance.render._isMockFunction) {
-              // We allow auto-mocks to proceed as if they're returning null.
-              break;
-            }
-          }
-        }
-        // Intentionally fall through to the next case, which handles both
-        // functions and classes
-        // eslint-disable-next-lined no-fallthrough
-        case FunctionComponent:
-        case ForwardRef:
-        case SimpleMemoComponent: {
-          invariant(
-            false,
-            '%s(...): Nothing was returned from render. This usually means a ' +
-              'return statement is missing. Or, to render nothing, ' +
-              'return null.',
-            getComponentNameFromFiber(returnFiber) || 'Component',
-          );
-        }
-      }
-    }
 
     // Remaining cases are all treated as empty.
     return deleteRemainingChildren(returnFiber, currentFirstChild);
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 80b4fc35512d..f1e39112b589 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -21,15 +21,7 @@ import {
   REACT_PORTAL_TYPE,
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
-import {
-  FunctionComponent,
-  ClassComponent,
-  HostText,
-  HostPortal,
-  ForwardRef,
-  Fragment,
-  SimpleMemoComponent,
-} from './ReactWorkTags';
+import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
@@ -1302,36 +1294,6 @@ function ChildReconciler(shouldTrackSideEffects) {
         warnOnFunctionType(returnFiber);
       }
     }
-    if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
-      // If the new child is undefined, and the return fiber is a composite
-      // component, throw an error. If Fiber return types are disabled,
-      // we already threw above.
-      switch (returnFiber.tag) {
-        case ClassComponent: {
-          if (__DEV__) {
-            const instance = returnFiber.stateNode;
-            if (instance.render._isMockFunction) {
-              // We allow auto-mocks to proceed as if they're returning null.
-              break;
-            }
-          }
-        }
-        // Intentionally fall through to the next case, which handles both
-        // functions and classes
-        // eslint-disable-next-lined no-fallthrough
-        case FunctionComponent:
-        case ForwardRef:
-        case SimpleMemoComponent: {
-          invariant(
-            false,
-            '%s(...): Nothing was returned from render. This usually means a ' +
-              'return statement is missing. Or, to render nothing, ' +
-              'return null.',
-            getComponentNameFromFiber(returnFiber) || 'Component',
-          );
-        }
-      }
-    }
 
     // Remaining cases are all treated as empty.
     return deleteRemainingChildren(returnFiber, currentFirstChild);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 9e2874eea449..95074071da1d 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -554,16 +554,6 @@ function shouldConstruct(Component) {
   return Component.prototype && Component.prototype.isReactComponent;
 }
 
-function invalidRenderResult(type: any): void {
-  invariant(
-    false,
-    '%s(...): Nothing was returned from render. This usually means a ' +
-      'return statement is missing. Or, to render nothing, ' +
-      'return null.',
-    getComponentNameFromType(type) || 'Component',
-  );
-}
-
 function renderWithHooks<Props, SecondArg>(
   request: Request,
   task: Task,
@@ -574,11 +564,7 @@ function renderWithHooks<Props, SecondArg>(
   const componentIdentity = {};
   prepareToUseHooks(componentIdentity);
   const result = Component(props, secondArg);
-  const children = finishHooks(Component, props, result, secondArg);
-  if (children === undefined) {
-    invalidRenderResult(Component);
-  }
-  return children;
+  return finishHooks(Component, props, result, secondArg);
 }
 
 function finishClassComponent(
@@ -589,13 +575,6 @@ function finishClassComponent(
   props: any,
 ): ReactNodeList {
   const nextChildren = instance.render();
-  if (nextChildren === undefined) {
-    if (__DEV__ && instance.render._isMockFunction) {
-      // We allow auto-mocks to proceed as if they're returning null.
-    } else {
-      invalidRenderResult(Component);
-    }
-  }
 
   if (__DEV__) {
     if (instance.props !== props) {
diff --git a/packages/shared/__tests__/ReactError-test.internal.js b/packages/shared/__tests__/ReactError-test.internal.js
index 0672471ea7bb..c40e62c6f391 100644
--- a/packages/shared/__tests__/ReactError-test.internal.js
+++ b/packages/shared/__tests__/ReactError-test.internal.js
@@ -46,18 +46,12 @@ describe('ReactError', () => {
     );
   });
 
-  // @gate build === "production"
   it('should serialize arguments', () => {
     function Oops() {
       return;
     }
     Oops.displayName = '#wtf';
     const container = document.createElement('div');
-    expect(() => ReactDOM.render(<Oops />, container)).toThrowError(
-      '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.',
-    );
+    expect(() => ReactDOM.render(<Oops />, container)).not.toThrowError();
   });
 });

From 9fec3f2adde00614c562f23feb74948e47aaafb6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 13 Jul 2021 16:39:29 -0400
Subject: [PATCH 0692/1603] DevTools: Ignore multiple sourceMappingUrls for
 external source maps (#21871)

Added an edge case regression test and bugfix.
---
 .../ContainingStringSourceMappingURL.js       | 23 +++++++
 .../__source__/__compiled__/bundle/index.js   | 21 ++++++-
 .../__compiled__/bundle/index.js.map          |  2 +-
 .../ContainingStringSourceMappingURL.js       | 29 +++++++++
 .../ContainingStringSourceMappingURL.js.map   |  1 +
 .../__source__/__compiled__/external/index.js |  8 +++
 .../__compiled__/external/index.js.map        |  2 +-
 .../ContainingStringSourceMappingURL.js       | 29 +++++++++
 .../__source__/__compiled__/inline/index.js   | 10 +++-
 .../src/__tests__/__source__/index.js         |  1 +
 .../src/__tests__/parseHookNames-test.js      | 45 +++++++++++---
 .../src/parseHookNames.js                     | 60 ++++++++++++-------
 12 files changed, 198 insertions(+), 33 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js

diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..e03b3f65b626
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, {useState} from 'react';
+
+// ?sourceMappingURL=([^\s'"]+)/gm
+
+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-extensions/src/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
index 0af8d182714d..83756f2fce61 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
@@ -91,6 +91,7 @@ function Component$2() {
  *
  * @flow
  */
+
 function Component$3() {
   const [count, setCount] = React.useState(0);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
@@ -107,6 +108,21 @@ function Component$3() {
  * @flow
  */
 function Component$4() {
+  const [count, setCount] = React.useState(0);
+  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component$5() {
   const [count] = require('react').useState(0);
 
   return count;
@@ -212,8 +228,9 @@ var ToDoList = /*#__PURE__*/Object.freeze({
 exports.ComponentWithCustomHook = Component;
 exports.ComponentWithExternalCustomHooks = Component$1;
 exports.ComponentWithMultipleHooksPerLine = Component$2;
-exports.Example = Component$3;
-exports.InlineRequire = Component$4;
+exports.ContainingStringSourceMappingURL = Component$3;
+exports.Example = Component$4;
+exports.InlineRequire = Component$5;
 exports.ToDoList = ToDoList;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
index d5cafbbb1144..2d9958a997aa 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../ComponentWithMultipleHooksPerLine.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","count","setCount","useState","isDarkMode","useIsDarkMode","useEffect","handleClick","React","useEffectCreate","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","A","B","a","b","c","d","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEAC,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBJ,UAAjB,CADF,eAEEI,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAeD,cAAQ,CAAC,KAAD,CAA7B;AAEAG,EAAAA,eAAS,CAAC,SAASG,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAOL,UAAP;AACD;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAASb,WAAT,GAAqB;AAC1B,QAAMa,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOJ,qDAAaK,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASX,WAAT,GAAqB;AAC1B,QAAMkB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;AASA,AAEO,SAASrB,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUqB,OAAO,CAAC,OAAD,CAAP,CAAiBnB,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASsB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCjC,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAACkC,KAAD,EAAQC,QAAR,IAAoBnC,cAAQ,CAAC,CACjC;AAACoC,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgBtC,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMI,WAAW,GAAGqB,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBrC,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMsC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAE5B;AAA/C,kBACEuB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"index.js","sources":["../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../ComponentWithMultipleHooksPerLine.js","../../ContainingStringSourceMappingURL.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","count","setCount","useState","isDarkMode","useIsDarkMode","useEffect","handleClick","React","useEffectCreate","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","A","B","a","b","c","d","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEAC,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBJ,UAAjB,CADF,eAEEI,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAeD,cAAQ,CAAC,KAAD,CAA7B;AAEAG,EAAAA,eAAS,CAAC,SAASG,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAOL,UAAP;AACD;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAASb,WAAT,GAAqB;AAC1B,QAAMa,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOJ,qDAAaK,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASX,WAAT,GAAqB;AAC1B,QAAMkB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;AASA;AAIA,AAAO,SAASrB,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUqB,OAAO,CAAC,OAAD,CAAP,CAAiBnB,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASsB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCjC,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAACkC,KAAD,EAAQC,QAAR,IAAoBnC,cAAQ,CAAC,CACjC;AAACoC,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgBtC,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMI,WAAW,GAAGqB,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBrC,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMsC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAE5B;AAA/C,kBACEuB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..0fc2c078ca12
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 000000000000..26ff682d745a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
index e82ebfd746fd..e82af34d8b17 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
     return _ComponentWithMultipleHooksPerLine.Component;
   }
 });
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
 Object.defineProperty(exports, "Example", {
   enumerable: true,
   get: function () {
@@ -47,6 +53,8 @@ var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHo
 
 var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
 
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
 var _Example = require("./Example");
 
 var _InlineRequire = require("./InlineRequire");
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
index 27dbc8d2296d..4fea58e1227c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\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
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\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-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..daeaa1e06053
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
index 60e56857a864..186ab68d95aa 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
@@ -21,6 +21,12 @@ Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
     return _ComponentWithMultipleHooksPerLine.Component;
   }
 });
+Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
+  enumerable: true,
+  get: function () {
+    return _ContainingStringSourceMappingURL.Component;
+  }
+});
 Object.defineProperty(exports, "Example", {
   enumerable: true,
   get: function () {
@@ -47,6 +53,8 @@ var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHo
 
 var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
 
+var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
+
 var _Example = require("./Example");
 
 var _InlineRequire = require("./InlineRequire");
@@ -62,4 +70,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
index 56d9683937e7..eca1ff83d71d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
@@ -10,6 +10,7 @@
 export {Component as ComponentWithCustomHook} from './ComponentWithCustomHook';
 export {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';
 export {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';
+export {Component as ContainingStringSourceMappingURL} from './ContainingStringSourceMappingURL';
 export {Component as Example} from './Example';
 export {Component as InlineRequire} from './InlineRequire';
 import * as ToDoList from './ToDoList';
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 5f038b893fc7..a1429ec7587d 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -48,7 +48,7 @@ describe('parseHookNames', () => {
     };
 
     fetchMock.mockIf(/.+$/, request => {
-      return Promise.resolve(requireText(request.url, 'utf8'));
+      return requireText(request.url, 'utf8');
     });
 
     // Mock out portion of browser API used by parseHookNames to initialize "source-map".
@@ -80,8 +80,12 @@ describe('parseHookNames', () => {
   }
 
   function requireText(path, encoding) {
-    const {readFileSync} = require('fs');
-    return readFileSync(path, encoding);
+    const {existsSync, readFileSync} = require('fs');
+    if (existsSync(path)) {
+      return Promise.resolve(readFileSync(path, encoding));
+    } else {
+      return Promise.reject(`File not found "${path}"`);
+    }
   }
 
   async function getHookNamesForComponent(Component, props = {}) {
@@ -126,7 +130,7 @@ describe('parseHookNames', () => {
       if (request.url.endsWith('useCustom.js')) {
         throw Error(`Unexpected file request for "${request.url}"`);
       }
-      return Promise.resolve(requireText(request.url, 'utf8'));
+      return requireText(request.url, 'utf8');
     });
 
     const hookNames = await getHookNamesForComponent(Component);
@@ -261,10 +265,10 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ComponentWithMultipleHooksPerLine',
       ); // external source map
-      // await test(
-      //   './__source__/__compiled__/bundle',
-      //   'ComponentWithMultipleHooksPerLine',
-      // ); // bundle source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ComponentWithMultipleHooksPerLine',
+      ); // bundle source map
     });
 
     // TODO Inline require (e.g. require("react").useState()) isn't supported yet.
@@ -284,5 +288,30 @@ describe('parseHookNames', () => {
       await test('./__source__/__compiled__/external/InlineRequire'); // external source map
       await test('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map
     });
+
+    it('should support sources that contain the string "sourceMappingURL="', async () => {
+      async function test(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 test('./__source__/ContainingStringSourceMappingURL'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/ContainingStringSourceMappingURL',
+      ); // inline source map
+      await test(
+        './__source__/__compiled__/external/ContainingStringSourceMappingURL',
+      ); // external source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ContainingStringSourceMappingURL',
+      ); // bundle source map
+    });
   });
 });
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index 58436acf4f8c..be6deb71f554 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -264,13 +264,19 @@ function extractAndLoadSourceMaps(
             break;
           }
         } else {
-          if (sourceMappingURLs.length > 1) {
+          let url = sourceMappingURLs[i].split('=')[1];
+
+          if (i !== sourceMappingURLs.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',
+              `More than one external source map detected in the source file; skipping "${url}"`,
             );
+            continue;
           }
 
-          let url = sourceMappingURLs[i].split('=')[1];
           if (!url.startsWith('http') && !url.startsWith('/')) {
             // Resolve paths relative to the location of the file name
             const lastSlashIdx = runtimeSourceURL.lastIndexOf('/');
@@ -290,7 +296,13 @@ function extractAndLoadSourceMaps(
             fetchFile(url).then(
               sourceMapContents =>
                 new SourceMapConsumer(JSON.parse(sourceMapContents)),
+
+              // 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 (!fetchPromises.has(url)) {
               console.log(
@@ -315,26 +327,34 @@ function extractAndLoadSourceMaps(
 
 function fetchFile(url: string): Promise<string> {
   return new Promise((resolve, reject) => {
-    fetch(url).then(response => {
-      if (response.ok) {
-        response
-          .text()
-          .then(text => {
-            resolve(text);
-          })
-          .catch(error => {
-            if (__DEBUG__) {
-              console.log(`fetchFile() Could not read text for url "${url}"`);
-            }
-            reject(null);
-          });
-      } else {
+    fetch(url).then(
+      response => {
+        if (response.ok) {
+          response
+            .text()
+            .then(text => {
+              resolve(text);
+            })
+            .catch(error => {
+              if (__DEBUG__) {
+                console.log(`fetchFile() Could not read text for url "${url}"`);
+              }
+              reject(null);
+            });
+        } else {
+          if (__DEBUG__) {
+            console.log(`fetchFile() Got bad response for url "${url}"`);
+          }
+          reject(null);
+        }
+      },
+      error => {
         if (__DEBUG__) {
-          console.log(`fetchFile() Got bad response for url "${url}"`);
+          console.log(`fetchFile() Could not fetch file "${error.message}"`);
         }
         reject(null);
-      }
-    });
+      },
+    );
   });
 }
 

From 9090257e6edec44a09a4cd5723d1d0f7ce2ab7c4 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 13 Jul 2021 23:38:25 +0200
Subject: [PATCH 0693/1603] fix: restore execution context after
 RetryAfterError completed (#21766)

* test: Add failing test due to executionContext not being restored

* fix: restore execution context after RetryAfterError completed

* Poke codesandbox/ci

* Completely restore executionContext

* expect a specific error
---
 .../src/__tests__/ReactTestUtilsAct-test.js   | 27 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.new.js             |  6 +++++
 .../src/ReactFiberWorkLoop.old.js             |  6 +++++
 3 files changed, 39 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 0e10207b0bb0..a47e234534db 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -246,6 +246,33 @@ function runActTests(label, render, unmount, rerender) {
         ]);
       });
 
+      // @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);
+        });
+
+        expect(() => setValue(1)).toErrorDev([
+          'An update to App inside a test was not wrapped in act(...).',
+        ]);
+      });
+
       describe('fake timers', () => {
         beforeEach(() => {
           jest.useFakeTimers();
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 2db7c319a2ec..cede27655a52 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -779,6 +779,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       : renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
+      const prevExecutionContext = executionContext;
       executionContext |= RetryAfterError;
 
       // If an error occurred during hydration,
@@ -800,6 +801,8 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         lanes = errorRetryLanes;
         exitStatus = renderRootSync(root, errorRetryLanes);
       }
+
+      executionContext = prevExecutionContext;
     }
 
     if (exitStatus === RootFatalErrored) {
@@ -972,6 +975,7 @@ function performSyncWorkOnRoot(root) {
 
   let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
+    const prevExecutionContext = executionContext;
     executionContext |= RetryAfterError;
 
     // If an error occurred during hydration,
@@ -993,6 +997,8 @@ function performSyncWorkOnRoot(root) {
       lanes = errorRetryLanes;
       exitStatus = renderRootSync(root, lanes);
     }
+
+    executionContext = prevExecutionContext;
   }
 
   if (exitStatus === RootFatalErrored) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8a93502b905a..0bba7217b1fd 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -779,6 +779,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       : renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
+      const prevExecutionContext = executionContext;
       executionContext |= RetryAfterError;
 
       // If an error occurred during hydration,
@@ -800,6 +801,8 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
         lanes = errorRetryLanes;
         exitStatus = renderRootSync(root, errorRetryLanes);
       }
+
+      executionContext = prevExecutionContext;
     }
 
     if (exitStatus === RootFatalErrored) {
@@ -972,6 +975,7 @@ function performSyncWorkOnRoot(root) {
 
   let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
+    const prevExecutionContext = executionContext;
     executionContext |= RetryAfterError;
 
     // If an error occurred during hydration,
@@ -993,6 +997,8 @@ function performSyncWorkOnRoot(root) {
       lanes = errorRetryLanes;
       exitStatus = renderRootSync(root, lanes);
     }
+
+    executionContext = prevExecutionContext;
   }
 
   if (exitStatus === RootFatalErrored) {

From 81346764bb62dc3fb04ccbf7f507cd390a249840 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 14 Jul 2021 11:40:20 -0400
Subject: [PATCH 0694/1603] Run persistent tests in more configurations in CI
 (#21880)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I noticed that `enableSuspenseLayoutEffectSemantics` is not fully
implemented in persistent mode. I believe this was an oversight
because we don't have a CI job that runs tests in persistent mode and
with experimental flags enabled.

This adds additional test configurations to the CI job so we don't miss
stuff like this again. It doesn't fix the failing tests — I'll address
that separately.
---
 .circleci/config.yml                          |  1 +
 .../src/__tests__/ReactOffscreen-test.js      |  2 ++
 .../ReactSuspenseEffectsSemantics-test.js     | 22 +++++++++++++++++++
 scripts/jest/TestFlags.js                     |  2 ++
 4 files changed, 27 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index e3834500ed3b..a1b1fa1cb49e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -456,6 +456,7 @@ workflows:
 
                 # TODO: Test more persistent configurations?
                 - '-r=stable --env=development --persistent'
+                - '-r=experimental --env=development --persistent'
       - yarn_build_combined:
           requires:
             - setup
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 327e72fdc972..e2bbc30998a7 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -220,6 +220,7 @@ describe('ReactOffscreen', () => {
 
   // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
+  // @gate !persistent
   it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -270,6 +271,7 @@ describe('ReactOffscreen', () => {
 
   // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
+  // @gate !persistent
   it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index b081f82e332c..fa16b8340511 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -17,6 +17,8 @@ let caches;
 let seededCache;
 let ErrorBoundary;
 
+// TODO: These tests don't pass in persistent mode yet. Need to implement.
+
 describe('ReactSuspenseEffectsSemantics', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -565,6 +567,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be destroyed and recreated for function components', async () => {
       function App({children = null}) {
         Scheduler.unstable_yieldValue('App render');
@@ -694,6 +697,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be destroyed and recreated for class components', async () => {
       class ClassText extends React.Component {
         componentDidMount() {
@@ -839,6 +843,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be destroyed and recreated when nested below host components', async () => {
       function App({children = null}) {
         Scheduler.unstable_yieldValue('App render');
@@ -949,6 +954,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be destroyed and recreated even if there is a bailout because of memoization', async () => {
       const MemoizedText = React.memo(Text, () => true);
 
@@ -1065,6 +1071,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should respect nested suspense boundaries', async () => {
       function App({innerChildren = null, outerChildren = null}) {
         return (
@@ -1288,6 +1295,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should show nested host nodes if multiple boundaries resolve at the same time', async () => {
       function App({innerChildren = null, outerChildren = null}) {
         return (
@@ -1398,6 +1406,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be cleaned up inside of a fallback that suspends', async () => {
       function App({fallbackChildren = null, outerChildren = null}) {
         return (
@@ -1541,6 +1550,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be cleaned up inside of a fallback that suspends (alternate)', async () => {
       function App({fallbackChildren = null, outerChildren = null}) {
         return (
@@ -1661,6 +1671,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be cleaned up deeper inside of a subtree that suspends', async () => {
       function ConditionalSuspense({shouldSuspend}) {
         if (shouldSuspend) {
@@ -1744,6 +1755,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
     describe('that throw errors', () => {
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
+      // @gate !persistent
       it('are properly handled for componentDidMount', async () => {
         let componentDidMountShouldThrow = false;
 
@@ -1883,6 +1895,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
+      // @gate !persistent
       it('are properly handled for componentWillUnmount', async () => {
         class ThrowsInWillUnmount extends React.Component {
           componentDidMount() {
@@ -1996,6 +2009,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
+      // @gate !persistent
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled for layout effect creation', async () => {
         let useLayoutEffectShouldThrow = false;
@@ -2136,6 +2150,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
+      // @gate !persistent
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled for layout effect descruction', async () => {
         function ThrowsInLayoutEffectDestroy() {
@@ -2248,6 +2263,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be only destroy layout effects once if a tree suspends in multiple places', async () => {
       class ClassText extends React.Component {
         componentDidMount() {
@@ -2387,6 +2403,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be only destroy layout effects once if a component suspends multiple times', async () => {
       class ClassText extends React.Component {
         componentDidMount() {
@@ -2671,6 +2688,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be cleared and reset for host components', async () => {
       function App({children}) {
         Scheduler.unstable_yieldValue(`App render`);
@@ -2768,6 +2786,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be cleared and reset for class components', async () => {
       class ClassComponent extends React.Component {
         render() {
@@ -2869,6 +2888,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should be cleared and reset for function components with useImperativeHandle', async () => {
       const FunctionComponent = React.forwardRef((props, ref) => {
         Scheduler.unstable_yieldValue('FunctionComponent render');
@@ -2974,6 +2994,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
+    // @gate !persistent
     it('should not reset for user-managed values', async () => {
       function RefChecker({forwardedRef}) {
         Scheduler.unstable_yieldValue(`RefChecker render`);
@@ -3072,6 +3093,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
     describe('that throw errors', () => {
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
+      // @gate !persistent
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled in ref callbacks', async () => {
         let useRefCallbackShouldThrow = false;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 3b6fc83ac984..45391b75f414 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -42,6 +42,8 @@ const environmentFlags = {
   // Similarly, should stable imply "classic"?
   stable: !__EXPERIMENTAL__,
 
+  persistent: global.__PERSISTENT__ === true,
+
   // Use this for tests that are known to be broken.
   FIXME: false,
 

From f0efb7b70f9c1570b35e71a7fcc6690684fe9d08 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 14 Jul 2021 13:36:24 -0400
Subject: [PATCH 0695/1603] Add comment support to `@gate` pragma (#21881)

So you can more easily comment on why a test is gated.
---
 scripts/babel/__tests__/transform-test-gate-pragma-test.js | 5 +++++
 scripts/babel/transform-test-gate-pragma.js                | 4 ++++
 2 files changed, 9 insertions(+)

diff --git a/scripts/babel/__tests__/transform-test-gate-pragma-test.js b/scripts/babel/__tests__/transform-test-gate-pragma-test.js
index dbfe85e73dc8..352e0e6775dc 100644
--- a/scripts/babel/__tests__/transform-test-gate-pragma-test.js
+++ b/scripts/babel/__tests__/transform-test-gate-pragma-test.js
@@ -160,6 +160,11 @@ describe('transform-test-gate-pragma', () => {
   test('single quoted strings', () => {
     expect(shouldPass).toBe(true);
   });
+
+  // @gate flagThatIsOn // This is a comment
+  test('line comment', () => {
+    expect(shouldPass).toBe(true);
+  });
 });
 
 describe('transform test-gate-pragma: actual runtime', () => {
diff --git a/scripts/babel/transform-test-gate-pragma.js b/scripts/babel/transform-test-gate-pragma.js
index f2586a0a942d..8b1f469f5905 100644
--- a/scripts/babel/transform-test-gate-pragma.js
+++ b/scripts/babel/transform-test-gate-pragma.js
@@ -93,6 +93,10 @@ function transform(babel) {
           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) {

From a97b5ac078499e33bbcf937935ab7139a317bac4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 14 Jul 2021 13:37:10 -0400
Subject: [PATCH 0696/1603] [Bugfix] Don't hide/unhide unless visibility
 changes (#21875)

* Use Visibility flag to schedule a hide/show effect

Instead of the Update flag, which is also used for other side-effects,
like refs.

I originally added the Visibility flag for this purpose in #20043 but
it got reverted last winter when we were bisecting the effects refactor.

* Added failing test case

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../src/ReactFiberCommitWork.new.js           | 72 ++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 72 ++++++++++--------
 .../src/ReactFiberCompleteWork.new.js         | 53 ++++++++-----
 .../src/ReactFiberCompleteWork.old.js         | 53 ++++++++-----
 .../react-reconciler/src/ReactFiberFlags.js   |  2 +-
 .../ReactSuspenseEffectsSemanticsDOM-test.js  | 74 +++++++++++++++++++
 6 files changed, 223 insertions(+), 103 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e7a3e157301b..c67a874119da 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -66,7 +66,6 @@ import {
   ChildDeletion,
   Snapshot,
   Update,
-  Callback,
   Ref,
   Hydrating,
   HydratingAndUpdate,
@@ -75,6 +74,7 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
+  Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -615,7 +615,7 @@ function commitLayoutEffectOnFiber(
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
-  if ((finishedWork.flags & (Update | Callback)) !== NoFlags) {
+  if ((finishedWork.flags & LayoutMask) !== NoFlags) {
     switch (finishedWork.tag) {
       case FunctionComponent:
       case ForwardRef:
@@ -1776,7 +1776,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
         return;
       }
       case SuspenseComponent: {
-        commitSuspenseComponent(finishedWork);
+        commitSuspenseCallback(finishedWork);
         attachSuspenseRetryListeners(finishedWork);
         return;
       }
@@ -1899,7 +1899,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case SuspenseComponent: {
-      commitSuspenseComponent(finishedWork);
+      commitSuspenseCallback(finishedWork);
       attachSuspenseRetryListeners(finishedWork);
       return;
     }
@@ -1918,13 +1918,6 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       break;
     }
-    case OffscreenComponent:
-    case LegacyHiddenComponent: {
-      const newState: OffscreenState | null = finishedWork.memoizedState;
-      const isHidden = newState !== null;
-      hideOrUnhideAllChildren(finishedWork, isHidden);
-      return;
-    }
   }
   invariant(
     false,
@@ -1933,27 +1926,9 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
   );
 }
 
-function commitSuspenseComponent(finishedWork: Fiber) {
+function commitSuspenseCallback(finishedWork: Fiber) {
+  // TODO: Move this to passive phase
   const newState: SuspenseState | null = finishedWork.memoizedState;
-
-  if (newState !== null) {
-    markCommitTimeOfFallback();
-
-    if (supportsMutation) {
-      // Hide the Offscreen component that contains the primary children. TODO:
-      // Ideally, this effect would have been scheduled on the Offscreen fiber
-      // itself. That's how unhiding works: the Offscreen component schedules an
-      // effect on itself. However, in this case, the component didn't complete,
-      // so the fiber was never added to the effect list in the normal path. We
-      // could have appended it to the effect list in the Suspense component's
-      // second pass, but doing it this way is less complicated. This would be
-      // simpler if we got rid of the effect list and traversed the tree, like
-      // we're planning to do.
-      const primaryChildParent: Fiber = (finishedWork.child: any);
-      hideOrUnhideAllChildren(primaryChildParent, true);
-    }
-  }
-
   if (enableSuspenseCallback && newState !== null) {
     const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;
     if (typeof suspenseCallback === 'function') {
@@ -2127,6 +2102,10 @@ function commitMutationEffects_complete(root: FiberRoot) {
 }
 
 function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
+  // TODO: The factoring of this phase could probably be improved. Consider
+  // switching on the type of work before checking the flags. That's what
+  // we do in all the other phases. I think this one is only different
+  // because of the shared reconcilation logic below.
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
@@ -2147,6 +2126,37 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
     }
   }
 
+  if (flags & Visibility) {
+    switch (finishedWork.tag) {
+      case SuspenseComponent: {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        if (newState !== null) {
+          markCommitTimeOfFallback();
+          // Hide the Offscreen component that contains the primary children.
+          // TODO: Ideally, this effect would have been scheduled on the
+          // Offscreen fiber itself. That's how unhiding works: the Offscreen
+          // component schedules an effect on itself. However, in this case, the
+          // component didn't complete, so the fiber was never added to the
+          // effect list in the normal path. We could have appended it to the
+          // effect list in the Suspense component's second pass, but doing it
+          // this way is less complicated. This would be simpler if we got rid
+          // of the effect list and traversed the tree, like we're planning to
+          // do.
+          const primaryChildParent: Fiber = (finishedWork.child: any);
+          hideOrUnhideAllChildren(primaryChildParent, true);
+        }
+        break;
+      }
+      case OffscreenComponent:
+      case LegacyHiddenComponent: {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        hideOrUnhideAllChildren(finishedWork, isHidden);
+        break;
+      }
+    }
+  }
+
   // The following switch statement is only concerned about placement,
   // updates, and deletions. To avoid needing to add a case for every possible
   // bitmap value, we remove the secondary effects from the effect tag and
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index a4ce8c644954..cbaf8ed8c498 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -66,7 +66,6 @@ import {
   ChildDeletion,
   Snapshot,
   Update,
-  Callback,
   Ref,
   Hydrating,
   HydratingAndUpdate,
@@ -75,6 +74,7 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
+  Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
@@ -615,7 +615,7 @@ function commitLayoutEffectOnFiber(
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
-  if ((finishedWork.flags & (Update | Callback)) !== NoFlags) {
+  if ((finishedWork.flags & LayoutMask) !== NoFlags) {
     switch (finishedWork.tag) {
       case FunctionComponent:
       case ForwardRef:
@@ -1776,7 +1776,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
         return;
       }
       case SuspenseComponent: {
-        commitSuspenseComponent(finishedWork);
+        commitSuspenseCallback(finishedWork);
         attachSuspenseRetryListeners(finishedWork);
         return;
       }
@@ -1899,7 +1899,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case SuspenseComponent: {
-      commitSuspenseComponent(finishedWork);
+      commitSuspenseCallback(finishedWork);
       attachSuspenseRetryListeners(finishedWork);
       return;
     }
@@ -1918,13 +1918,6 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       break;
     }
-    case OffscreenComponent:
-    case LegacyHiddenComponent: {
-      const newState: OffscreenState | null = finishedWork.memoizedState;
-      const isHidden = newState !== null;
-      hideOrUnhideAllChildren(finishedWork, isHidden);
-      return;
-    }
   }
   invariant(
     false,
@@ -1933,27 +1926,9 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
   );
 }
 
-function commitSuspenseComponent(finishedWork: Fiber) {
+function commitSuspenseCallback(finishedWork: Fiber) {
+  // TODO: Move this to passive phase
   const newState: SuspenseState | null = finishedWork.memoizedState;
-
-  if (newState !== null) {
-    markCommitTimeOfFallback();
-
-    if (supportsMutation) {
-      // Hide the Offscreen component that contains the primary children. TODO:
-      // Ideally, this effect would have been scheduled on the Offscreen fiber
-      // itself. That's how unhiding works: the Offscreen component schedules an
-      // effect on itself. However, in this case, the component didn't complete,
-      // so the fiber was never added to the effect list in the normal path. We
-      // could have appended it to the effect list in the Suspense component's
-      // second pass, but doing it this way is less complicated. This would be
-      // simpler if we got rid of the effect list and traversed the tree, like
-      // we're planning to do.
-      const primaryChildParent: Fiber = (finishedWork.child: any);
-      hideOrUnhideAllChildren(primaryChildParent, true);
-    }
-  }
-
   if (enableSuspenseCallback && newState !== null) {
     const suspenseCallback = finishedWork.memoizedProps.suspenseCallback;
     if (typeof suspenseCallback === 'function') {
@@ -2127,6 +2102,10 @@ function commitMutationEffects_complete(root: FiberRoot) {
 }
 
 function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
+  // TODO: The factoring of this phase could probably be improved. Consider
+  // switching on the type of work before checking the flags. That's what
+  // we do in all the other phases. I think this one is only different
+  // because of the shared reconcilation logic below.
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
@@ -2147,6 +2126,37 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
     }
   }
 
+  if (flags & Visibility) {
+    switch (finishedWork.tag) {
+      case SuspenseComponent: {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        if (newState !== null) {
+          markCommitTimeOfFallback();
+          // Hide the Offscreen component that contains the primary children.
+          // TODO: Ideally, this effect would have been scheduled on the
+          // Offscreen fiber itself. That's how unhiding works: the Offscreen
+          // component schedules an effect on itself. However, in this case, the
+          // component didn't complete, so the fiber was never added to the
+          // effect list in the normal path. We could have appended it to the
+          // effect list in the Suspense component's second pass, but doing it
+          // this way is less complicated. This would be simpler if we got rid
+          // of the effect list and traversed the tree, like we're planning to
+          // do.
+          const primaryChildParent: Fiber = (finishedWork.child: any);
+          hideOrUnhideAllChildren(primaryChildParent, true);
+        }
+        break;
+      }
+      case OffscreenComponent:
+      case LegacyHiddenComponent: {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        hideOrUnhideAllChildren(finishedWork, isHidden);
+        break;
+      }
+    }
+  }
+
   // The following switch statement is only concerned about placement,
   // updates, and deletions. To avoid needing to add a case for every possible
   // bitmap value, we remove the secondary effects from the effect tag and
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 29c5fe48c4b2..c919f1522246 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -9,7 +9,11 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
-import type {ReactScopeInstance, ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactScopeInstance,
+  ReactContext,
+  Wakeable,
+} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {
   Instance,
@@ -60,6 +64,7 @@ import {
   Ref,
   RefStatic,
   Update,
+  Visibility,
   NoFlags,
   DidCapture,
   Snapshot,
@@ -320,7 +325,7 @@ if (supportsMutation) {
         // down its children. Instead, we'll get insertions from each child in
         // the portal directly.
       } else if (node.tag === SuspenseComponent) {
-        if ((node.flags & Update) !== NoFlags) {
+        if ((node.flags & Visibility) !== NoFlags) {
           // Need to toggle the visibility of the primary children.
           const newIsHidden = node.memoizedState !== null;
           if (newIsHidden) {
@@ -405,7 +410,7 @@ if (supportsMutation) {
         // down its children. Instead, we'll get insertions from each child in
         // the portal directly.
       } else if (node.tag === SuspenseComponent) {
-        if ((node.flags & Update) !== NoFlags) {
+        if ((node.flags & Visibility) !== NoFlags) {
           // Need to toggle the visibility of the primary children.
           const newIsHidden = node.memoizedState !== null;
           if (newIsHidden) {
@@ -1084,32 +1089,40 @@ function completeWork(
         }
       }
 
-      if (supportsPersistence) {
-        // TODO: Only schedule updates if not prevDidTimeout.
-        if (nextDidTimeout) {
-          // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
-          // primary children.
-          workInProgress.flags |= Update;
-        }
+      const wakeables: Set<Wakeable> | null = (workInProgress.updateQueue: any);
+      if (wakeables !== null) {
+        // Schedule an effect to attach a retry listener to the promise.
+        // TODO: Move to passive phase
+        workInProgress.flags |= Update;
       }
+
       if (supportsMutation) {
-        // TODO: Only schedule updates if these values are non equal, i.e. it changed.
-        if (nextDidTimeout || prevDidTimeout) {
-          // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
-          // primary children. In mutation mode, we also need the flag to
-          // *unhide* children that were previously hidden, so check if this
-          // is currently timed out, too.
-          workInProgress.flags |= Update;
+        if (nextDidTimeout !== prevDidTimeout) {
+          // In mutation mode, visibility is toggled by mutating the nearest
+          // host nodes whenever they switch from hidden -> visible or vice
+          // versa. We don't need to switch when the boundary updates but its
+          // visibility hasn't changed.
+          workInProgress.flags |= Visibility;
         }
       }
+      if (supportsPersistence) {
+        if (nextDidTimeout) {
+          // In persistent mode, visibility is toggled by cloning the nearest
+          // host nodes in the complete phase whenever the boundary is hidden.
+          // TODO: The plan is to add a transparent host wrapper (no layout)
+          // around the primary children and hide that node. Then we don't need
+          // to do the funky cloning business.
+          workInProgress.flags |= Visibility;
+        }
+      }
+
       if (
         enableSuspenseCallback &&
         workInProgress.updateQueue !== null &&
         workInProgress.memoizedProps.suspenseCallback != null
       ) {
         // Always notify the callback
+        // TODO: Move to passive phase
         workInProgress.flags |= Update;
       }
       bubbleProperties(workInProgress);
@@ -1396,7 +1409,7 @@ function completeWork(
           prevIsHidden !== nextIsHidden &&
           newProps.mode !== 'unstable-defer-without-hiding'
         ) {
-          workInProgress.flags |= Update;
+          workInProgress.flags |= Visibility;
         }
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index a119a6b97519..59d72380dbee 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -9,7 +9,11 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
-import type {ReactScopeInstance, ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactScopeInstance,
+  ReactContext,
+  Wakeable,
+} from 'shared/ReactTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {
   Instance,
@@ -60,6 +64,7 @@ import {
   Ref,
   RefStatic,
   Update,
+  Visibility,
   NoFlags,
   DidCapture,
   Snapshot,
@@ -320,7 +325,7 @@ if (supportsMutation) {
         // down its children. Instead, we'll get insertions from each child in
         // the portal directly.
       } else if (node.tag === SuspenseComponent) {
-        if ((node.flags & Update) !== NoFlags) {
+        if ((node.flags & Visibility) !== NoFlags) {
           // Need to toggle the visibility of the primary children.
           const newIsHidden = node.memoizedState !== null;
           if (newIsHidden) {
@@ -405,7 +410,7 @@ if (supportsMutation) {
         // down its children. Instead, we'll get insertions from each child in
         // the portal directly.
       } else if (node.tag === SuspenseComponent) {
-        if ((node.flags & Update) !== NoFlags) {
+        if ((node.flags & Visibility) !== NoFlags) {
           // Need to toggle the visibility of the primary children.
           const newIsHidden = node.memoizedState !== null;
           if (newIsHidden) {
@@ -1084,32 +1089,40 @@ function completeWork(
         }
       }
 
-      if (supportsPersistence) {
-        // TODO: Only schedule updates if not prevDidTimeout.
-        if (nextDidTimeout) {
-          // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
-          // primary children.
-          workInProgress.flags |= Update;
-        }
+      const wakeables: Set<Wakeable> | null = (workInProgress.updateQueue: any);
+      if (wakeables !== null) {
+        // Schedule an effect to attach a retry listener to the promise.
+        // TODO: Move to passive phase
+        workInProgress.flags |= Update;
       }
+
       if (supportsMutation) {
-        // TODO: Only schedule updates if these values are non equal, i.e. it changed.
-        if (nextDidTimeout || prevDidTimeout) {
-          // If this boundary just timed out, schedule an effect to attach a
-          // retry listener to the promise. This flag is also used to hide the
-          // primary children. In mutation mode, we also need the flag to
-          // *unhide* children that were previously hidden, so check if this
-          // is currently timed out, too.
-          workInProgress.flags |= Update;
+        if (nextDidTimeout !== prevDidTimeout) {
+          // In mutation mode, visibility is toggled by mutating the nearest
+          // host nodes whenever they switch from hidden -> visible or vice
+          // versa. We don't need to switch when the boundary updates but its
+          // visibility hasn't changed.
+          workInProgress.flags |= Visibility;
         }
       }
+      if (supportsPersistence) {
+        if (nextDidTimeout) {
+          // In persistent mode, visibility is toggled by cloning the nearest
+          // host nodes in the complete phase whenever the boundary is hidden.
+          // TODO: The plan is to add a transparent host wrapper (no layout)
+          // around the primary children and hide that node. Then we don't need
+          // to do the funky cloning business.
+          workInProgress.flags |= Visibility;
+        }
+      }
+
       if (
         enableSuspenseCallback &&
         workInProgress.updateQueue !== null &&
         workInProgress.memoizedProps.suspenseCallback != null
       ) {
         // Always notify the callback
+        // TODO: Move to passive phase
         workInProgress.flags |= Update;
       }
       bubbleProperties(workInProgress);
@@ -1396,7 +1409,7 @@ function completeWork(
           prevIsHidden !== nextIsHidden &&
           newProps.mode !== 'unstable-defer-without-hiding'
         ) {
-          workInProgress.flags |= Update;
+          workInProgress.flags |= Visibility;
         }
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index b711d730c3b2..ce6460b02367 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -82,7 +82,7 @@ export const MutationMask =
   Ref |
   Hydrating |
   Visibility;
-export const LayoutMask = Update | Callback | Ref;
+export const LayoutMask = Update | Callback | Ref | Visibility;
 
 // TODO: Split into PassiveMountMask and PassiveUnmountMask
 export const PassiveMask = Passive | ChildDeletion;
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 000000000000..8ed56bd5f2d9
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let act;
+
+describe('ReactSuspenseEffectsSemanticsDOM', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    act = require('jest-react').act;
+  });
+
+  it('should not cause a cycle when combined with a render phase update', () => {
+    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 promise = Promise.resolve();
+
+    function ComponentThatSuspendsOnUpdate({shouldSuspend}) {
+      if (shouldSuspend) {
+        // Fake Suspend
+        throw promise;
+      }
+      return null;
+    }
+
+    act(() => {
+      const root = ReactDOM.createRoot(document.createElement('div'));
+      root.render(<App />);
+    });
+
+    act(() => {
+      scheduleSuspendingUpdate();
+    });
+  });
+});

From 87b3ada89dc83c88a89ff1b599b0f39e3c49cc32 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 14 Jul 2021 14:37:27 -0400
Subject: [PATCH 0697/1603] DevTools: Named hooks supports
 "cheap-module-source-map" (#21874)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

"cheap-module-source-map" is the default source-map generation mode used in created-react-dev mode because of speed. The major trade-off is that the source maps generated don't contain column numbers, so DevTools needs to be more lenient when matching AST nodes in this mode.

In this case, it can ignore column numbers and match nodes using line numbers only– so long as only a single node matches. If more than one match is found, treat it the same as if none were found, and fall back to no name.
---
 .../react-devtools-extensions/package.json    |   1 +
 .../no-columns/ComponentWithCustomHook.js     |  41 +++++++
 .../ComponentWithExternalCustomHooks.js       |  26 +++++
 .../ComponentWithMultipleHooksPerLine.js      |  30 +++++
 .../ContainingStringSourceMappingURL.js       |  29 +++++
 .../__compiled__/no-columns/Example.js        |  28 +++++
 .../__compiled__/no-columns/InlineRequire.js  |  21 ++++
 .../__compiled__/no-columns/ToDoList.js       | 106 ++++++++++++++++++
 .../__compiled__/no-columns/index.js          |  73 ++++++++++++
 .../__compiled__/no-columns/useTheme.js       |  27 +++++
 .../src/__tests__/parseHookNames-test.js      |  30 +++++
 .../src/__tests__/updateMockSourceMaps.js     |  36 ++++++
 .../react-devtools-extensions/src/astUtils.js |  74 +++++++-----
 .../src/parseHookNames.js                     |   2 +-
 yarn.lock                                     |   2 +-
 15 files changed, 498 insertions(+), 28 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 40954c442515..da473f7613a6 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -50,6 +50,7 @@
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-node-resolve": "^2.1.1",
     "source-map": "^0.8.0-beta.0",
+    "sourcemap-codec": "^1.4.8",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",
     "webpack": "^4.43.0",
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..07c3317e87d3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsVUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFFQSx3QkFBQSxNQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTs7QUFJQSxRQUFBQyxXQUFBLEdBQUEsTUFBQUgsUUFBQSxDQUFBRCxLQUFBLEdBQUEsQ0FBQSxDQUFBOztBQUVBLHNCQUNBLHlFQUNBLHlEQUFBRSxVQUFBLENBREEsZUFFQSxxREFBQUYsS0FBQSxDQUZBLGVBR0E7QUFBQSxJQUFBLE9BQUEsRUFBQUk7QUFBQSxvQkFIQSxDQURBO0FBT0E7O0FBRUEsU0FBQUQsYUFBQSxHQUFBO0FBQ0EsUUFBQSxDQUFBRCxVQUFBLElBQUEscUJBQUEsS0FBQSxDQUFBO0FBRUEsd0JBQUEsU0FBQUcsZUFBQSxHQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTtBQUlBLFNBQUFILFVBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gaXNEYXJrTW9kZTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..63c7ec8d8ef9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBQyxLQUFBLEdBQUEsd0JBQUE7QUFFQSxzQkFBQSxxREFBQUEsS0FBQSxDQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB1c2VUaGVtZSBmcm9tICcuL3VzZVRoZW1lJztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiA8ZGl2PnRoZW1lOiB7dGhlbWV9PC9kaXY+O1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..b05cd188f468
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..a05ba5ba6982
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js
new file mode 100644
index 000000000000..6d668eaac8a1
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
new file mode 100644
index 000000000000..45f22810dfbe
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js
new file mode 100644
index 000000000000..3693681e1087
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWUEsU0FBQUEsUUFBQSxDQUFBO0FBQUFDLEVBQUFBLElBQUE7QUFBQUMsRUFBQUEsVUFBQTtBQUFBQyxFQUFBQTtBQUFBLENBQUEsRUFBQTtBQUNBLFFBQUFDLFlBQUEsR0FBQSx1QkFBQSxNQUFBO0FBQ0FGLElBQUFBLFVBQUEsQ0FBQUQsSUFBQSxDQUFBO0FBQ0EsR0FGQSxFQUVBLENBQUFBLElBQUEsRUFBQUMsVUFBQSxDQUZBLENBQUE7QUFJQSxRQUFBRyxZQUFBLEdBQUEsdUJBQUEsTUFBQTtBQUNBRixJQUFBQSxVQUFBLENBQUFGLElBQUEsQ0FBQTtBQUNBLEdBRkEsRUFFQSxDQUFBQSxJQUFBLEVBQUFFLFVBQUEsQ0FGQSxDQUFBO0FBSUEsc0JBQ0EsNkNBQ0E7QUFBQSxJQUFBLE9BQUEsRUFBQUM7QUFBQSxjQURBLGVBRUEsZ0RBQ0E7QUFDQSxJQUFBLE9BQUEsRUFBQUgsSUFBQSxDQUFBSyxVQURBO0FBRUEsSUFBQSxRQUFBLEVBQUFELFlBRkE7QUFHQSxJQUFBLElBQUEsRUFBQTtBQUhBLElBREEsRUFLQSxHQUxBLEVBTUFKLElBQUEsQ0FBQU0sSUFOQSxDQUZBLENBREE7QUFhQTs7QUFFQSxTQUFBQyxJQUFBLENBQUFDLEtBQUEsRUFBQTtBQUNBLFFBQUEsQ0FBQUMsV0FBQSxFQUFBQyxjQUFBLElBQUEsb0JBQUEsRUFBQSxDQUFBO0FBQ0EsUUFBQSxDQUFBQyxLQUFBLEVBQUFDLFFBQUEsSUFBQSxvQkFBQSxDQUNBO0FBQUFDLElBQUFBLEVBQUEsRUFBQSxDQUFBO0FBQUFSLElBQUFBLFVBQUEsRUFBQSxJQUFBO0FBQUFDLElBQUFBLElBQUEsRUFBQTtBQUFBLEdBREEsRUFFQTtBQUFBTyxJQUFBQSxFQUFBLEVBQUEsQ0FBQTtBQUFBUixJQUFBQSxVQUFBLEVBQUEsSUFBQTtBQUFBQyxJQUFBQSxJQUFBLEVBQUE7QUFBQSxHQUZBLEVBR0E7QUFBQU8sSUFBQUEsRUFBQSxFQUFBLENBQUE7QUFBQVIsSUFBQUEsVUFBQSxFQUFBLEtBQUE7QUFBQUMsSUFBQUEsSUFBQSxFQUFBO0FBQUEsR0FIQSxDQUFBLENBQUE7QUFLQSxRQUFBLENBQUFRLEdBQUEsRUFBQUMsTUFBQSxJQUFBLG9CQUFBLENBQUEsQ0FBQTtBQUVBLFFBQUFDLFdBQUEsR0FBQSx1QkFBQSxNQUFBO0FBQ0EsUUFBQVAsV0FBQSxLQUFBLEVBQUEsRUFBQTtBQUNBRyxNQUFBQSxRQUFBLENBQUEsQ0FDQSxHQUFBRCxLQURBLEVBRUE7QUFDQUUsUUFBQUEsRUFBQSxFQUFBQyxHQURBO0FBRUFULFFBQUFBLFVBQUEsRUFBQSxLQUZBO0FBR0FDLFFBQUFBLElBQUEsRUFBQUc7QUFIQSxPQUZBLENBQUEsQ0FBQTtBQVFBTSxNQUFBQSxNQUFBLENBQUFELEdBQUEsR0FBQSxDQUFBLENBQUE7QUFDQUosTUFBQUEsY0FBQSxDQUFBLEVBQUEsQ0FBQTtBQUNBO0FBQ0EsR0FiQSxFQWFBLENBQUFELFdBQUEsRUFBQUUsS0FBQSxFQUFBRyxHQUFBLENBYkEsQ0FBQTtBQWVBLFFBQUFHLGNBQUEsR0FBQSx1QkFDQUMsS0FBQSxJQUFBO0FBQ0EsUUFBQUEsS0FBQSxDQUFBQyxHQUFBLEtBQUEsT0FBQSxFQUFBO0FBQ0FILE1BQUFBLFdBQUE7QUFDQTtBQUNBLEdBTEEsRUFNQSxDQUFBQSxXQUFBLENBTkEsQ0FBQTtBQVNBLFFBQUFJLFlBQUEsR0FBQSx1QkFDQUYsS0FBQSxJQUFBO0FBQ0FSLElBQUFBLGNBQUEsQ0FBQVEsS0FBQSxDQUFBRyxhQUFBLENBQUFDLEtBQUEsQ0FBQTtBQUNBLEdBSEEsRUFJQSxDQUFBWixjQUFBLENBSkEsQ0FBQTtBQU9BLFFBQUFULFVBQUEsR0FBQSx1QkFDQXNCLFlBQUEsSUFBQVgsUUFBQSxDQUFBRCxLQUFBLENBQUFhLE1BQUEsQ0FBQXhCLElBQUEsSUFBQUEsSUFBQSxLQUFBdUIsWUFBQSxDQUFBLENBREEsRUFFQSxDQUFBWixLQUFBLENBRkEsQ0FBQTtBQUtBLFFBQUFULFVBQUEsR0FBQSx1QkFDQXVCLFlBQUEsSUFBQTtBQUNBO0FBQ0E7QUFDQSxVQUFBQyxLQUFBLEdBQUFmLEtBQUEsQ0FBQWdCLFNBQUEsQ0FBQTNCLElBQUEsSUFBQUEsSUFBQSxDQUFBYSxFQUFBLEtBQUFZLFlBQUEsQ0FBQVosRUFBQSxDQUFBO0FBRUFELElBQUFBLFFBQUEsQ0FDQUQsS0FBQSxDQUNBaUIsS0FEQSxDQUNBLENBREEsRUFDQUYsS0FEQSxFQUVBRyxNQUZBLENBRUEsRUFDQSxHQUFBSixZQURBO0FBRUFwQixNQUFBQSxVQUFBLEVBQUEsQ0FBQW9CLFlBQUEsQ0FBQXBCO0FBRkEsS0FGQSxFQU1Bd0IsTUFOQSxDQU1BbEIsS0FBQSxDQUFBaUIsS0FBQSxDQUFBRixLQUFBLEdBQUEsQ0FBQSxDQU5BLENBREEsQ0FBQTtBQVNBLEdBZkEsRUFnQkEsQ0FBQWYsS0FBQSxDQWhCQSxDQUFBO0FBbUJBLHNCQUNBLG9CQUFBLGNBQUEscUJBQ0EsdUNBREEsZUFFQTtBQUNBLElBQUEsSUFBQSxFQUFBLE1BREE7QUFFQSxJQUFBLFdBQUEsRUFBQSxrQkFGQTtBQUdBLElBQUEsS0FBQSxFQUFBRixXQUhBO0FBSUEsSUFBQSxRQUFBLEVBQUFXLFlBSkE7QUFLQSxJQUFBLFVBQUEsRUFBQUg7QUFMQSxJQUZBLGVBU0E7QUFBQSxJQUFBLFFBQUEsRUFBQVIsV0FBQSxLQUFBLEVBQUE7QUFBQSxJQUFBLE9BQUEsRUFBQU87QUFBQSxrQkFDQTtBQUFBLElBQUEsSUFBQSxFQUFBLEtBQUE7QUFBQSxrQkFBQTtBQUFBLFdBREEsQ0FUQSxlQWNBLGdDQUNBTCxLQUFBLENBQUFtQixHQUFBLENBQUE5QixJQUFBLGlCQUNBLG9CQUFBLFFBQUE7QUFDQSxJQUFBLEdBQUEsRUFBQUEsSUFBQSxDQUFBYSxFQURBO0FBRUEsSUFBQSxJQUFBLEVBQUFiLElBRkE7QUFHQSxJQUFBLFVBQUEsRUFBQUMsVUFIQTtBQUlBLElBQUEsVUFBQSxFQUFBQztBQUpBLElBREEsQ0FEQSxDQWRBLENBREE7QUEyQkEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtGcmFnbWVudCwgdXNlQ2FsbGJhY2ssIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0SXRlbSh7aXRlbSwgcmVtb3ZlSXRlbSwgdG9nZ2xlSXRlbX0pIHtcbiAgY29uc3QgaGFuZGxlRGVsZXRlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHJlbW92ZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCByZW1vdmVJdGVtXSk7XG5cbiAgY29uc3QgaGFuZGxlVG9nZ2xlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHRvZ2dsZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCB0b2dnbGVJdGVtXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8bGk+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZURlbGV0ZX0+RGVsZXRlPC9idXR0b24+XG4gICAgICA8bGFiZWw+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIGNoZWNrZWQ9e2l0ZW0uaXNDb21wbGV0ZX1cbiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlVG9nZ2xlfVxuICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgIC8+eycgJ31cbiAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9saT5cbiAgKTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIExpc3QocHJvcHMpIHtcbiAgY29uc3QgW25ld0l0ZW1UZXh0LCBzZXROZXdJdGVtVGV4dF0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtpdGVtcywgc2V0SXRlbXNdID0gdXNlU3RhdGUoW1xuICAgIHtpZDogMSwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ0ZpcnN0J30sXG4gICAge2lkOiAyLCBpc0NvbXBsZXRlOiB0cnVlLCB0ZXh0OiAnU2Vjb25kJ30sXG4gICAge2lkOiAzLCBpc0NvbXBsZXRlOiBmYWxzZSwgdGV4dDogJ1RoaXJkJ30sXG4gIF0pO1xuICBjb25zdCBbdWlkLCBzZXRVSURdID0gdXNlU3RhdGUoNCk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgaWYgKG5ld0l0ZW1UZXh0ICE9PSAnJykge1xuICAgICAgc2V0SXRlbXMoW1xuICAgICAgICAuLi5pdGVtcyxcbiAgICAgICAge1xuICAgICAgICAgIGlkOiB1aWQsXG4gICAgICAgICAgaXNDb21wbGV0ZTogZmFsc2UsXG4gICAgICAgICAgdGV4dDogbmV3SXRlbVRleHQsXG4gICAgICAgIH0sXG4gICAgICBdKTtcbiAgICAgIHNldFVJRCh1aWQgKyAxKTtcbiAgICAgIHNldE5ld0l0ZW1UZXh0KCcnKTtcbiAgICB9XG4gIH0sIFtuZXdJdGVtVGV4dCwgaXRlbXMsIHVpZF0pO1xuXG4gIGNvbnN0IGhhbmRsZUtleVByZXNzID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICBoYW5kbGVDbGljaygpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2hhbmRsZUNsaWNrXSxcbiAgKTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICBldmVudCA9PiB7XG4gICAgICBzZXROZXdJdGVtVGV4dChldmVudC5jdXJyZW50VGFyZ2V0LnZhbHVlKTtcbiAgICB9LFxuICAgIFtzZXROZXdJdGVtVGV4dF0sXG4gICk7XG5cbiAgY29uc3QgcmVtb3ZlSXRlbSA9IHVzZUNhbGxiYWNrKFxuICAgIGl0ZW1Ub1JlbW92ZSA9PiBzZXRJdGVtcyhpdGVtcy5maWx0ZXIoaXRlbSA9PiBpdGVtICE9PSBpdGVtVG9SZW1vdmUpKSxcbiAgICBbaXRlbXNdLFxuICApO1xuXG4gIGNvbnN0IHRvZ2dsZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9Ub2dnbGUgPT4ge1xuICAgICAgLy8gRG9udCB1c2UgaW5kZXhPZigpXG4gICAgICAvLyBiZWNhdXNlIGVkaXRpbmcgcHJvcHMgaW4gRGV2VG9vbHMgY3JlYXRlcyBhIG5ldyBPYmplY3QuXG4gICAgICBjb25zdCBpbmRleCA9IGl0ZW1zLmZpbmRJbmRleChpdGVtID0+IGl0ZW0uaWQgPT09IGl0ZW1Ub1RvZ2dsZS5pZCk7XG5cbiAgICAgIHNldEl0ZW1zKFxuICAgICAgICBpdGVtc1xuICAgICAgICAgIC5zbGljZSgwLCBpbmRleClcbiAgICAgICAgICAuY29uY2F0KHtcbiAgICAgICAgICAgIC4uLml0ZW1Ub1RvZ2dsZSxcbiAgICAgICAgICAgIGlzQ29tcGxldGU6ICFpdGVtVG9Ub2dnbGUuaXNDb21wbGV0ZSxcbiAgICAgICAgICB9KVxuICAgICAgICAgIC5jb25jYXQoaXRlbXMuc2xpY2UoaW5kZXggKyAxKSksXG4gICAgICApO1xuICAgIH0sXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxGcmFnbWVudD5cbiAgICAgIDxoMT5MaXN0PC9oMT5cbiAgICAgIDxpbnB1dFxuICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgIHBsYWNlaG9sZGVyPVwiTmV3IGxpc3QgaXRlbS4uLlwiXG4gICAgICAgIHZhbHVlPXtuZXdJdGVtVGV4dH1cbiAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX1cbiAgICAgICAgb25LZXlQcmVzcz17aGFuZGxlS2V5UHJlc3N9XG4gICAgICAvPlxuICAgICAgPGJ1dHRvbiBkaXNhYmxlZD17bmV3SXRlbVRleHQgPT09ICcnfSBvbkNsaWNrPXtoYW5kbGVDbGlja30+XG4gICAgICAgIDxzcGFuIHJvbGU9XCJpbWdcIiBhcmlhLWxhYmVsPVwiQWRkIGl0ZW1cIj5cbiAgICAgICAgICBBZGRcbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8dWw+XG4gICAgICAgIHtpdGVtcy5tYXAoaXRlbSA9PiAoXG4gICAgICAgICAgPExpc3RJdGVtXG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgcmVtb3ZlSXRlbT17cmVtb3ZlSXRlbX1cbiAgICAgICAgICAgIHRvZ2dsZUl0ZW09e3RvZ2dsZUl0ZW19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSl9XG4gICAgICA8L3VsPlxuICAgIDwvRnJhZ21lbnQ+XG4gICk7XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
new file mode 100644
index 000000000000..186ab68d95aa
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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, "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 _ComponentWithCustomHook = require("./ComponentWithCustomHook");
+
+var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
+
+var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
+
+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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js
new file mode 100644
index 000000000000..7a1b76c59c00
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index a1429ec7587d..2599ce95c4cd 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -172,6 +172,7 @@ describe('parseHookNames', () => {
       await test('./__source__/__compiled__/inline/Example'); // inline source map
       await test('./__source__/__compiled__/external/Example'); // external source map
       await test('./__source__/__compiled__/bundle/index', 'Example'); // bundle source map
+      await test('./__source__/__compiled__/no-columns/Example'); // simulated Webpack 'cheap-module-source-map'
     });
 
     it('should work with more complex files and components', async () => {
@@ -203,6 +204,7 @@ describe('parseHookNames', () => {
       await test('./__source__/__compiled__/inline/ToDoList'); // inline source map
       await test('./__source__/__compiled__/external/ToDoList'); // external source map
       await test('./__source__/__compiled__/bundle', 'ToDoList'); // bundle source map
+      await test('./__source__/__compiled__/no-columns/ToDoList'); // simulated Webpack 'cheap-module-source-map'
     });
 
     it('should work for custom hook', async () => {
@@ -220,6 +222,9 @@ describe('parseHookNames', () => {
       await test('./__source__/__compiled__/inline/ComponentWithCustomHook'); // inline source map
       await test('./__source__/__compiled__/external/ComponentWithCustomHook'); // external source map
       await test('./__source__/__compiled__/bundle', 'ComponentWithCustomHook'); // bundle source map
+      await test(
+        './__source__/__compiled__/no-columns/ComponentWithCustomHook',
+      ); // simulated Webpack 'cheap-module-source-map'
     });
 
     it('should work for external hooks', async () => {
@@ -245,6 +250,9 @@ describe('parseHookNames', () => {
         './__source__/__compiled__/bundle',
         'ComponentWithExternalCustomHooks',
       ); // bundle source map
+      await test(
+        './__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks',
+      ); // simulated Webpack 'cheap-module-source-map'
     });
 
     it('should work when multiple hooks are on a line', async () => {
@@ -269,6 +277,24 @@ describe('parseHookNames', () => {
         './__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.
@@ -287,6 +313,7 @@ describe('parseHookNames', () => {
       await test('./__source__/__compiled__/inline/InlineRequire'); // inline source map
       await test('./__source__/__compiled__/external/InlineRequire'); // external source map
       await test('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map
+      await test('./__source__/__compiled__/no-columns/InlineRequire'); // simulated Webpack 'cheap-module-source-map'
     });
 
     it('should support sources that contain the string "sourceMappingURL="', async () => {
@@ -312,6 +339,9 @@ describe('parseHookNames', () => {
         './__source__/__compiled__/bundle',
         'ContainingStringSourceMappingURL',
       ); // bundle source map
+      await test(
+        './__source__/__compiled__/no-columns/ContainingStringSourceMappingURL',
+      ); // simulated Webpack 'cheap-module-source-map'
     });
   });
 });
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
index 231bdee52126..6906abf52c92 100644
--- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -14,18 +14,21 @@ const babel = require('rollup-plugin-babel');
 const commonjs = require('rollup-plugin-commonjs');
 const jsx = require('acorn-jsx');
 const rollupResolve = require('rollup-plugin-node-resolve');
+const {encode, decode} = require('sourcemap-codec');
 
 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');
 
 // Remove previous builds
 emptyDirSync(buildRoot);
 mkdirSync(externalDir);
 mkdirSync(inlineDir);
 mkdirSync(bundleDir);
+mkdirSync(noColumnsDir);
 
 function compile(fileName) {
   const code = readFileSync(resolve(sourceDir, fileName), 'utf8');
@@ -60,6 +63,25 @@ function compile(fileName) {
     '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 external inline base64 source maps
   writeFileSync(
     resolve(inlineDir, fileName),
@@ -68,6 +90,20 @@ function compile(fileName) {
       btoa(JSON.stringify(sourceMap)),
     'utf8',
   );
+
+  // Generate compiled output with external 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',
+  );
 }
 
 async function bundle() {
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 879f17ae1805..87a4f47dcaea 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -32,7 +32,7 @@ const AST_NODE_TYPES = Object.freeze({
 function checkNodeLocation(
   path: NodePath,
   line: number,
-  column: number,
+  column?: number | null = null,
 ): boolean {
   const {start, end} = path.node.loc;
 
@@ -40,22 +40,24 @@ function checkNodeLocation(
     return false;
   }
 
-  // Column numbers are representated 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;
+  if (column !== null) {
+    // Column numbers are representated 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;
@@ -122,15 +124,35 @@ export function getHookName(
 ): string | null {
   const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST);
 
-  const potentialReactHookASTNode = hooksFromAST.find(node => {
-    const nodeLocationCheck = checkNodeLocation(
-      node,
-      originalSourceLineNumber,
-      originalSourceColumnNumber,
-    );
-    const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
-    return nodeLocationCheck && hookDeclaractionCheck;
-  });
+  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 hookDeclaractionCheck = isConfirmedHookDeclaration(node);
+      return nodeLocationCheck && hookDeclaractionCheck;
+    });
+
+    if (matchingNodes.length === 1) {
+      potentialReactHookASTNode = matchingNodes[0];
+    }
+  } else {
+    potentialReactHookASTNode = hooksFromAST.find(node => {
+      const nodeLocationCheck = checkNodeLocation(
+        node,
+        originalSourceLineNumber,
+        originalSourceColumnNumber,
+      );
+      const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
+      return nodeLocationCheck && hookDeclaractionCheck;
+    });
+  }
 
   if (!potentialReactHookASTNode) {
     return null;
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index be6deb71f554..218bd596d03a 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -350,7 +350,7 @@ function fetchFile(url: string): Promise<string> {
       },
       error => {
         if (__DEBUG__) {
-          console.log(`fetchFile() Could not fetch file "${error.message}"`);
+          console.log(`fetchFile() Could not fetch file: ${error.message}`);
         }
         reject(null);
       },
diff --git a/yarn.lock b/yarn.lock
index 3332b2147477..c0bddfe82c64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13047,7 +13047,7 @@ source-map@^0.8.0-beta.0:
   dependencies:
     whatwg-url "^7.0.0"
 
-sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4:
+sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4, 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==

From 232c67e911c61dbd15ceb8b1da4f3fa139ff617a Mon Sep 17 00:00:00 2001
From: Steve Rubin <nerdforlife@gmail.com>
Date: Wed, 14 Jul 2021 17:37:02 -0700
Subject: [PATCH 0698/1603] Devtools Profiler: allow user to enter commit
 number (#19957)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../views/Profiler/SnapshotSelector.css       |  16 +++
 .../views/Profiler/SnapshotSelector.js        | 100 +++++++++++++-----
 2 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
index c708adcffdbc..040d2e4d2893 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.css
@@ -28,3 +28,19 @@
   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
index b79569df1e48..42510f08761a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {Fragment, useCallback, useContext, useMemo} from 'react';
+import {Fragment, useContext, useMemo} from 'react';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {ProfilerContext} from './ProfilerContext';
@@ -86,47 +86,89 @@ export default function SnapshotSelector(_: Props) {
 
   let label = null;
   if (numFilteredCommits > 0) {
-    label =
-      `${selectedFilteredCommitIndex + 1}`.padStart(
-        `${numFilteredCommits}`.length,
-        '0',
-      ) +
-      ' / ' +
-      numFilteredCommits;
+    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]);
+      }
+    };
+
+    const handleClick = event => {
+      event.currentTarget.select();
+    };
+
+    const handleKeyDown = event => {
+      switch (event.key) {
+        case 'ArrowDown':
+          viewPrevCommit();
+          event.stopPropagation();
+          break;
+        case 'ArrowUp':
+          viewNextCommit();
+          event.stopPropagation();
+          break;
+        default:
+          break;
+      }
+    };
+
+    const input = (
+      <input
+        className={styles.Input}
+        type="text"
+        inputMode="numeric"
+        pattern="[0-9]*"
+        value={selectedFilteredCommitIndex + 1}
+        size={`${numFilteredCommits}`.length}
+        onChange={handleCommitInputChange}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      />
+    );
+
+    label = (
+      <Fragment>
+        {input} / {numFilteredCommits}
+      </Fragment>
+    );
   }
 
-  const viewNextCommit = useCallback(() => {
+  const viewNextCommit = () => {
     let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) + 1;
     if (nextCommitIndex === filteredCommitIndices.length) {
       nextCommitIndex = 0;
     }
     selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
-  const viewPrevCommit = useCallback(() => {
+  };
+  const viewPrevCommit = () => {
     let nextCommitIndex = ((selectedFilteredCommitIndex: any): number) - 1;
     if (nextCommitIndex < 0) {
       nextCommitIndex = filteredCommitIndices.length - 1;
     }
     selectCommitIndex(filteredCommitIndices[nextCommitIndex]);
-  }, [selectedFilteredCommitIndex, filteredCommitIndices, selectCommitIndex]);
+  };
 
-  const handleKeyDown = useCallback(
-    event => {
-      switch (event.key) {
-        case 'ArrowLeft':
-          viewPrevCommit();
-          event.stopPropagation();
-          break;
-        case 'ArrowRight':
-          viewNextCommit();
-          event.stopPropagation();
-          break;
-        default:
-          break;
-      }
-    },
-    [viewNextCommit, viewPrevCommit],
-  );
+  const handleKeyDown = event => {
+    switch (event.key) {
+      case 'ArrowLeft':
+        viewPrevCommit();
+        event.stopPropagation();
+        break;
+      case 'ArrowRight':
+        viewNextCommit();
+        event.stopPropagation();
+        break;
+      default:
+        break;
+    }
+  };
 
   if (commitData.length === 0) {
     return null;

From d5de45820ae6beda46c34f8737f1861c85642a65 Mon Sep 17 00:00:00 2001
From: houssemchebeb <59608551+houssemchebeb@users.noreply.github.com>
Date: Thu, 15 Jul 2021 01:42:54 +0100
Subject: [PATCH 0699/1603] Fix typo (#21671)

---
 packages/react-devtools-shared/src/backend/console.js       | 2 +-
 packages/react-devtools-shared/src/backend/renderer.js      | 6 +++---
 packages/react-devtools-shared/src/devtools/store.js        | 4 ++--
 .../devtools/views/Components/InspectedElementHooksTree.js  | 2 +-
 packages/react-devtools-shared/src/hook.js                  | 2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index a4185193c434..fcfb944bce23 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -170,7 +170,7 @@ export function patch({
               try {
                 if (shouldShowInlineWarningsAndErrors) {
                   // patch() is called by two places: (1) the hook and (2) the renderer backend.
-                  // The backend is what impliments a message queue, so it's the only one that injects onErrorOrWarning.
+                  // The backend is what implements a message queue, so it's the only one that injects onErrorOrWarning.
                   if (typeof onErrorOrWarning === 'function') {
                     onErrorOrWarning(
                       current,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 57b3de2e08a4..611eddc63395 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -255,7 +255,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.6.0-beta.0')) {
     ReactTypeOfWork = {
-      CacheComponent: -1, // Doens't exist yet
+      CacheComponent: -1, // Doesn't exist yet
       ClassComponent: 1,
       ContextConsumer: 9,
       ContextProvider: 10,
@@ -285,7 +285,7 @@ export function getInternalReactConstants(
     };
   } else if (gte(version, '16.4.3-alpha')) {
     ReactTypeOfWork = {
-      CacheComponent: -1, // Doens't exist yet
+      CacheComponent: -1, // Doesn't exist yet
       ClassComponent: 2,
       ContextConsumer: 11,
       ContextProvider: 12,
@@ -315,7 +315,7 @@ export function getInternalReactConstants(
     };
   } else {
     ReactTypeOfWork = {
-      CacheComponent: -1, // Doens't exist yet
+      CacheComponent: -1, // Doesn't exist yet
       ClassComponent: 2,
       ContextConsumer: 12,
       ContextProvider: 13,
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 0d2ca5faa88e..59e10a5ef72e 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -335,8 +335,8 @@ export default class Store extends EventEmitter<{|
     // Update persisted filter preferences stored in localStorage.
     saveComponentFilters(value);
 
-    // Notify the renderer that filter prefernces have changed.
-    // This is an expensive opreation; it unmounts and remounts the entire tree,
+    // 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);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index c4201ddeb4d9..f595fdb54749 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -214,7 +214,7 @@ function HookView({
   }
 
   // Certain hooks are not editable at all (as identified by react-debug-tools).
-  // Primative hook names (e.g. the "State" name for useState) are also never editable.
+  // Primitive hook names (e.g. the "State" name for useState) are also never editable.
   const canRenamePathsAtDepth = depth => isStateEditable && depth > 1;
 
   const isCustomHook = subHooks.length > 0;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index a4724f6f6b92..4ba54fe31085 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -330,7 +330,7 @@ export function installHook(target: any): DevToolsHook | null {
     '__REACT_DEVTOOLS_GLOBAL_HOOK__',
     ({
       // This property needs to be configurable for the test environment,
-      // else we won't be able to delete and recreate it beween tests.
+      // else we won't be able to delete and recreate it between tests.
       configurable: __DEV__,
       enumerable: false,
       get() {

From 682bbd0e7212df0bfe1d8017284e2822d281f7ea Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 15 Jul 2021 12:39:56 -0400
Subject: [PATCH 0700/1603] Cache local reference to global Promise (#21886)

---
 packages/react-dom/src/client/ReactDOMHostConfig.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index bad70b6ba996..43f507793261 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -392,6 +392,7 @@ export const scheduleTimeout: any =
 export const cancelTimeout: any =
   typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
 export const noTimeout = -1;
+const localPromise = Promise;
 
 // -------------------
 //     Microtasks
@@ -400,9 +401,10 @@ export const supportsMicrotasks = true;
 export const scheduleMicrotask: any =
   typeof queueMicrotask === 'function'
     ? queueMicrotask
-    : typeof Promise !== 'undefined'
+    : typeof localPromise !== 'undefined'
     ? callback =>
-        Promise.resolve(null)
+        localPromise
+          .resolve(null)
           .then(callback)
           .catch(handleErrorInNextTick)
     : scheduleTimeout; // TODO: Determine the best fallback here.

From e26cb8f86db0936e14682c39e2d26373fa6f433d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 15 Jul 2021 23:39:30 -0400
Subject: [PATCH 0701/1603] Clear named hooks Suspense and AST cache after a
 Fast Refresh (#21891)

---
 .../src/__tests__/parseHookNames-test.js      |  6 ++++-
 .../react-devtools-extensions/src/main.js     |  5 ++--
 .../src/parseHookNames.js                     |  7 ++++-
 .../src/backend/agent.js                      |  8 ++++++
 .../src/backend/index.js                      |  1 +
 .../src/backend/renderer.js                   | 17 ++++++++++++
 .../src/backend/types.js                      |  2 ++
 packages/react-devtools-shared/src/bridge.js  |  1 +
 .../views/Components/HookNamesContext.js      | 20 ++++++++++++++
 .../Components/InspectedElementContext.js     | 26 +++++++++++++++++--
 .../LoadHookNamesFunctionContext.js           | 11 --------
 .../src/devtools/views/DevTools.js            | 22 +++++++++++-----
 .../src/hookNamesCache.js                     |  6 ++++-
 packages/react-devtools-shared/src/types.js   |  1 +
 14 files changed, 109 insertions(+), 24 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js

diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 2599ce95c4cd..81db5ab7a03c 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -33,7 +33,7 @@ describe('parseHookNames', () => {
 
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
-    parseHookNames = require('../parseHookNames').default;
+    parseHookNames = require('../parseHookNames').parseHookNames;
 
     // Jest (jest-runner?) configures Errors to automatically account for source maps.
     // This changes behavior between our tests and the browser.
@@ -158,6 +158,10 @@ describe('parseHookNames', () => {
     ]);
   });
 
+  // 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 test(path, name = 'Component') {
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 32efad807e5a..b3b2581eda3a 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -12,7 +12,7 @@ import {
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
-import parseHookNames from './parseHookNames';
+import {parseHookNames, purgeCachedMetadata} from './parseHookNames';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -215,9 +215,10 @@ function createPanelIfReactLoaded() {
               browserTheme: getBrowserTheme(),
               componentsPortalContainer,
               enabledInspectedElementContextMenu: true,
-              loadHookNamesFunction: parseHookNames,
+              loadHookNames: parseHookNames,
               overrideTab,
               profilerPortalContainer,
+              purgeCachedHookNamesMetadata: purgeCachedMetadata,
               showTabBar: false,
               store,
               warnIfUnsupportedVersionDetected: true,
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index 218bd596d03a..9b029b322569 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -102,7 +102,7 @@ const originalURLToMetadataCache: LRUCache<
   },
 });
 
-export default async function parseHookNames(
+export async function parseHookNames(
   hooksTree: HooksTree,
 ): Thenable<HookNames | null> {
   if (!enableHookNameParsing) {
@@ -623,3 +623,8 @@ function updateLruCache(
   });
   return Promise.resolve();
 }
+
+export function purgeCachedMetadata(): void {
+  originalURLToMetadataCache.reset();
+  runtimeURLToMetadataCache.reset();
+}
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 4dc727a59e2f..f5a91e0d7c16 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -690,6 +690,14 @@ export default class Agent extends EventEmitter<{|
     this.emit('traceUpdates', nodes);
   };
 
+  onFastRefreshScheduled = () => {
+    if (__DEBUG__) {
+      debug('onFastRefreshScheduled');
+    }
+
+    this._bridge.send('fastRefreshScheduled');
+  };
+
   onHookOperations = (operations: Array<number>) => {
     if (__DEBUG__) {
       debug(
diff --git a/packages/react-devtools-shared/src/backend/index.js b/packages/react-devtools-shared/src/backend/index.js
index ac8eaeb10f15..4f6fec290c74 100644
--- a/packages/react-devtools-shared/src/backend/index.js
+++ b/packages/react-devtools-shared/src/backend/index.js
@@ -48,6 +48,7 @@ export function initBackend(
       agent.onUnsupportedRenderer(id);
     }),
 
+    hook.sub('fastRefreshScheduled', agent.onFastRefreshScheduled),
     hook.sub('operations', agent.onHookOperations),
     hook.sub('traceUpdates', agent.onTraceUpdates),
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 611eddc63395..23b00097ce18 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -568,6 +568,7 @@ export function attach(
     overrideProps,
     overridePropsDeletePath,
     overridePropsRenamePath,
+    scheduleRefresh,
     setErrorHandler,
     setSuspenseHandler,
     scheduleUpdate,
@@ -579,6 +580,22 @@ export function attach(
     typeof setSuspenseHandler === 'function' &&
     typeof scheduleUpdate === 'function';
 
+  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);
+      }
+    };
+  }
+
   // Tracks Fibers with recently changed number of error/warning messages.
   // These collections store the Fiber rather than the ID,
   // in order to avoid generating an ID for Fibers that never get mounted
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index d8e0939f1150..27bbc8ce253c 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -144,6 +144,8 @@ export type ReactRenderer = {
   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,
   ...
 };
 
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 2637b59713e3..cfcfa79e1f2d 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -169,6 +169,7 @@ type UpdateConsolePatchSettingsParams = {|
 export type BackendEvents = {|
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
+  fastRefreshScheduled: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   isSynchronousXHRSupported: [boolean],
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
new file mode 100644
index 000000000000..bcd0f940751b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
@@ -0,0 +1,20 @@
+// @flow
+
+import {createContext} from 'react';
+import type {
+  LoadHookNamesFunction,
+  PurgeCachedHookNamesMetadata,
+} from '../DevTools';
+
+export type Context = {
+  loadHookNames: LoadHookNamesFunction | null,
+  purgeCachedMetadata: PurgeCachedHookNamesMetadata | null,
+};
+
+const HookNamesContext = createContext<Context>({
+  loadHookNames: null,
+  purgeCachedMetadata: null,
+});
+HookNamesContext.displayName = 'HookNamesContext';
+
+export default HookNamesContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index c7dd028c5cbf..9dd594c1efea 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -26,10 +26,11 @@ import {
   inspectElement,
 } from 'react-devtools-shared/src/inspectedElementCache';
 import {
+  clearHookNamesCache,
   hasAlreadyLoadedHookNames,
   loadHookNames,
 } from 'react-devtools-shared/src/hookNamesCache';
-import LoadHookNamesFunctionContext from 'react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext';
+import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 
 import type {HookNames} from 'react-devtools-shared/src/types';
@@ -63,7 +64,10 @@ export type Props = {|
 
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
-  const loadHookNamesFunction = useContext(LoadHookNamesFunctionContext);
+  const {
+    loadHookNames: loadHookNamesFunction,
+    purgeCachedMetadata,
+  } = useContext(HookNamesContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const {parseHookNames: parseHookNamesByDefault} = useContext(SettingsContext);
@@ -150,6 +154,24 @@ export function InspectedElementContextController({children}: Props) {
     [setState, state],
   );
 
+  useEffect(() => {
+    if (enableHookNameParsing) {
+      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(() => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js b/packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js
deleted file mode 100644
index 1874dd7e5a94..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Components/LoadHookNamesFunctionContext.js
+++ /dev/null
@@ -1,11 +0,0 @@
-// @flow
-
-import {createContext} from 'react';
-import type {LoadHookNamesFunction} from '../DevTools';
-
-export type Context = LoadHookNamesFunction | null;
-
-const LoadHookNamesFunctionContext = createContext<Context>(null);
-LoadHookNamesFunctionContext.displayName = 'LoadHookNamesFunctionContext';
-
-export default LoadHookNamesFunctionContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 534e2cc4e282..812ca916d8eb 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -22,7 +22,7 @@ import TabBar from './TabBar';
 import {SettingsContextController} from './Settings/SettingsContext';
 import {TreeContextController} from './Components/TreeContext';
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
-import LoadHookNamesFunctionContext from './Components/LoadHookNamesFunctionContext';
+import HookNamesContext from './Components/HookNamesContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
@@ -51,6 +51,7 @@ export type ViewElementSource = (
 export type LoadHookNamesFunction = (
   hooksTree: HooksTree,
 ) => Thenable<HookNames>;
+export type PurgeCachedHookNamesMetadata = () => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
@@ -87,7 +88,8 @@ export type Props = {|
   // 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.
-  loadHookNamesFunction?: ?LoadHookNamesFunction,
+  loadHookNames?: ?LoadHookNamesFunction,
+  purgeCachedHookNamesMetadata?: ?PurgeCachedHookNamesMetadata,
 |};
 
 const componentsTab = {
@@ -112,9 +114,10 @@ export default function DevTools({
   componentsPortalContainer,
   defaultTab = 'components',
   enabledInspectedElementContextMenu = false,
-  loadHookNamesFunction,
+  loadHookNames,
   overrideTab,
   profilerPortalContainer,
+  purgeCachedHookNamesMetadata,
   showTabBar = false,
   store,
   warnIfLegacyBackendDetected = false,
@@ -149,6 +152,14 @@ export default function DevTools({
     [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
   );
 
+  const hookNamesContext = useMemo(
+    () => ({
+      loadHookNames: loadHookNames || null,
+      purgeCachedMetadata: purgeCachedHookNamesMetadata || null,
+    }),
+    [loadHookNames, purgeCachedHookNamesMetadata],
+  );
+
   const devToolsRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
@@ -204,8 +215,7 @@ export default function DevTools({
               componentsPortalContainer={componentsPortalContainer}
               profilerPortalContainer={profilerPortalContainer}>
               <ViewElementSourceContext.Provider value={viewElementSource}>
-                <LoadHookNamesFunctionContext.Provider
-                  value={loadHookNamesFunction || null}>
+                <HookNamesContext.Provider value={hookNamesContext}>
                   <TreeContextController>
                     <ProfilerContextController>
                       <div className={styles.DevTools} ref={devToolsRef}>
@@ -240,7 +250,7 @@ export default function DevTools({
                       </div>
                     </ProfilerContextController>
                   </TreeContextController>
-                </LoadHookNamesFunctionContext.Provider>
+                </HookNamesContext.Provider>
               </ViewElementSourceContext.Provider>
             </SettingsContextController>
             <UnsupportedBridgeProtocolDialog />
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 113ad64b860a..f673cff59eec 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -58,7 +58,7 @@ function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
 // 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
-const map: WeakMap<Element, Record<HookNames>> = new WeakMap();
+let map: WeakMap<Element, Record<HookNames>> = new WeakMap();
 
 export function hasAlreadyLoadedHookNames(element: Element): boolean {
   const record = map.get(element);
@@ -181,3 +181,7 @@ export function getHookSourceLocationKey({
   }
   return `${fileName}:${lineNumber}:${columnNumber}`;
 }
+
+export function clearHookNamesCache(): void {
+  map = new WeakMap();
+}
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index 92000f5f5246..695dc95163fd 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -87,5 +87,6 @@ export type HookNames = Map<HookSourceLocationKey, HookName>;
 export type LRUCache<K, V> = {|
   get: (key: K) => V,
   has: (key: K) => boolean,
+  reset: () => void,
   set: (key: K, value: V) => void,
 |};

From 6840c98c3246b749549beae2a62150f509ba4111 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 16 Jul 2021 00:14:20 -0400
Subject: [PATCH 0702/1603] Remove named hooks feature flag (#21894)

---
 .../src/__tests__/parseHookNames-test.js      |  5 --
 .../src/parseHookNames.js                     |  5 --
 .../src/__tests__/inspectedElement-test.js    | 63 +++++++++++++++++++
 .../src/backend/renderer.js                   |  7 +--
 .../config/DevToolsFeatureFlags.default.js    |  1 -
 .../DevToolsFeatureFlags.extension-fb.js      |  1 -
 .../DevToolsFeatureFlags.extension-oss.js     |  1 -
 .../Components/InspectedElementContext.js     | 51 +++++++--------
 .../Components/InspectedElementHooksTree.js   |  7 +--
 .../views/Settings/ComponentsSettings.js      | 21 +++----
 .../src/hookNamesCache.js                     |  5 --
 11 files changed, 99 insertions(+), 68 deletions(-)

diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 81db5ab7a03c..0b10ffee2bee 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -23,11 +23,6 @@ describe('parseHookNames', () => {
       console.trace('source-map-support');
     });
 
-    const {
-      overrideFeatureFlags,
-    } = require('react-devtools-shared/src/__tests__/utils');
-    overrideFeatureFlags({enableHookNameParsing: true});
-
     fetchMock = require('jest-fetch-mock');
     fetchMock.enableMocks();
 
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames.js
index 9b029b322569..73745c6be3a1 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames.js
@@ -10,7 +10,6 @@
  */
 
 import {parse} from '@babel/parser';
-import {enableHookNameParsing} from 'react-devtools-feature-flags';
 import LRU from 'lru-cache';
 import {SourceMapConsumer} from 'source-map';
 import {getHookName} from './astUtils';
@@ -105,10 +104,6 @@ const originalURLToMetadataCache: LRUCache<
 export async function parseHookNames(
   hooksTree: HooksTree,
 ): Thenable<HookNames | null> {
-  if (!enableHookNameParsing) {
-    return Promise.resolve(null);
-  }
-
   const hooksList: Array<HooksNode> = [];
   flattenHooksList(hooksTree, hooksList);
 
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 67598900ec90..886a54ceeec1 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -157,6 +157,12 @@ describe('InspectedElement', () => {
         "events": undefined,
         "hooks": Array [
           Object {
+            "hookSource": Object {
+              "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",
@@ -1041,6 +1047,12 @@ describe('InspectedElement', () => {
     expect(inspectedElement.hooks).toMatchInlineSnapshot(`
       Array [
         Object {
+          "hookSource": Object {
+            "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",
@@ -1062,6 +1074,12 @@ describe('InspectedElement', () => {
     expect(inspectedElement.hooks).toMatchInlineSnapshot(`
       Array [
         Object {
+          "hookSource": Object {
+            "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",
@@ -1547,6 +1565,12 @@ describe('InspectedElement', () => {
         "events": undefined,
         "hooks": Array [
           Object {
+            "hookSource": Object {
+              "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",
@@ -1799,11 +1823,23 @@ describe('InspectedElement', () => {
     expect(hooks).toMatchInlineSnapshot(`
       Array [
         Object {
+          "hookSource": Object {
+            "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": Array [
             Object {
+              "hookSource": Object {
+                "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",
@@ -1877,6 +1913,12 @@ describe('InspectedElement', () => {
         Object {
           "hooks": Array [
             Object {
+              "hookSource": Object {
+                "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",
@@ -1910,6 +1952,12 @@ describe('InspectedElement', () => {
         Object {
           "hooks": Array [
             Object {
+              "hookSource": Object {
+                "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",
@@ -1943,6 +1991,12 @@ describe('InspectedElement', () => {
         Object {
           "hooks": Array [
             Object {
+              "hookSource": Object {
+                "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",
@@ -2490,9 +2544,18 @@ describe('InspectedElement', () => {
         targetErrorBoundaryID,
       );
 
+      // Suppress expected error and warning.
+      const originalError = console.error;
+      const originalWarn = console.warn;
+      console.error = () => {};
+      console.warn = () => {};
+
       // now force error state on <Example />
       await toggleError(true);
 
+      console.error = originalError;
+      console.warn = originalWarn;
+
       // we are in error state now, <Example /> won't show up
       withErrorsOrWarningsIgnored(['Invalid index'], () => {
         expect(store.getElementIDAtIndex(1)).toBe(null);
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 23b00097ce18..ee772fda860a 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -80,10 +80,7 @@ import {
   MEMO_SYMBOL_STRING,
 } from './ReactSymbols';
 import {format} from './utils';
-import {
-  enableHookNameParsing,
-  enableProfilerChangedHookIndices,
-} from 'react-devtools-feature-flags';
+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
 
@@ -3112,7 +3109,7 @@ export function attach(
         hooks = inspectHooksOfFiber(
           fiber,
           (renderer.currentDispatcherRef: any),
-          enableHookNameParsing, // Include source location info for hooks
+          true, // Include source location info for hooks
         );
       } finally {
         // Restore original console functionality.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index e310e26f43d2..b9d3ba23e56e 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -13,6 +13,5 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-export const enableHookNameParsing = false;
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = 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
index c6c319cd6d49..104cf263091a 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -13,7 +13,6 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-export const enableHookNameParsing = true;
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index 7201754f4f3d..4d1b1472bba6 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -13,7 +13,6 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-export const enableHookNameParsing = false;
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 9dd594c1efea..e7b15b3f3dc5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -18,7 +18,6 @@ import {
   useMemo,
   useState,
 } from 'react';
-import {enableHookNameParsing} from 'react-devtools-feature-flags';
 import {TreeStateContext} from './TreeContext';
 import {BridgeContext, StoreContext} from '../context';
 import {
@@ -117,19 +116,17 @@ export function InspectedElementContextController({children}: Props) {
   if (!elementHasChanged && element !== null) {
     inspectedElement = inspectElement(element, state.path, store, bridge);
 
-    if (enableHookNameParsing) {
-      if (parseHookNames || alreadyLoadedHookNames) {
-        if (
-          inspectedElement !== null &&
-          inspectedElement.hooks !== null &&
-          loadHookNamesFunction !== null
-        ) {
-          hookNames = loadHookNames(
-            element,
-            inspectedElement.hooks,
-            loadHookNamesFunction,
-          );
-        }
+    if (parseHookNames || alreadyLoadedHookNames) {
+      if (
+        inspectedElement !== null &&
+        inspectedElement.hooks !== null &&
+        loadHookNamesFunction !== null
+      ) {
+        hookNames = loadHookNames(
+          element,
+          inspectedElement.hooks,
+          loadHookNamesFunction,
+        );
       }
     }
   }
@@ -155,20 +152,18 @@ export function InspectedElementContextController({children}: Props) {
   );
 
   useEffect(() => {
-    if (enableHookNameParsing) {
-      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);
-      }
+    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]);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index f595fdb54749..a7ea9178db2b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -22,10 +22,7 @@ import styles from './InspectedElementHooksTree.css';
 import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
-import {
-  enableHookNameParsing,
-  enableProfilerChangedHookIndices,
-} from 'react-devtools-feature-flags';
+import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
 
 import type {InspectedElement} from './types';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -85,7 +82,7 @@ export function InspectedElementHooksTree({
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          {enableHookNameParsing && (!parseHookNames || hookParsingFailed) && (
+          {(!parseHookNames || hookParsingFailed) && (
             <Toggle
               className={hookParsingFailed ? styles.ToggleError : null}
               isChecked={parseHookNamesOptimistic}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index a07b8380aa63..83e972729988 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -16,7 +16,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import {enableHookNameParsing} from 'react-devtools-feature-flags';
 import {useSubscription} from '../hooks';
 import {StoreContext} from '../context';
 import Button from '../Button';
@@ -262,17 +261,15 @@ export default function ComponentsSettings(_: {||}) {
         Expand component tree by default
       </label>
 
-      {enableHookNameParsing && (
-        <label className={styles.Setting}>
-          <input
-            type="checkbox"
-            checked={parseHookNames}
-            onChange={updateParseHookNames}
-          />{' '}
-          Always parse hook names from source{' '}
-          <span className={styles.Warning}>(may be slow)</span>
-        </label>
-      )}
+      <label className={styles.Setting}>
+        <input
+          type="checkbox"
+          checked={parseHookNames}
+          onChange={updateParseHookNames}
+        />{' '}
+        Always parse hook names from source{' '}
+        <span className={styles.Warning}>(may be slow)</span>
+      </label>
 
       <div className={styles.Header}>Hide components where...</div>
 
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index f673cff59eec..f385c7242852 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {enableHookNameParsing} from 'react-devtools-feature-flags';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 
 import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -70,10 +69,6 @@ export function loadHookNames(
   hooksTree: HooksTree,
   loadHookNamesFunction: (hookLog: HooksTree) => Thenable<HookNames>,
 ): HookNames | null {
-  if (!enableHookNameParsing) {
-    return null;
-  }
-
   let record = map.get(element);
 
   if (__DEBUG__) {

From d0ec283819113d27f7c5e5022de6ccc36d4e502d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 16 Jul 2021 00:25:01 -0400
Subject: [PATCH 0703/1603] DevTools 4.13.5 -> 4.14.0

---
 packages/react-devtools-core/package.json            |  2 +-
 .../react-devtools-extensions/chrome/manifest.json   |  4 ++--
 .../react-devtools-extensions/edge/manifest.json     |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json  |  2 +-
 packages/react-devtools-inline/package.json          |  2 +-
 packages/react-devtools/CHANGELOG.md                 | 12 ++++++++++++
 packages/react-devtools/package.json                 |  4 ++--
 7 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index ad3756263921..8798d6136775 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.13.5",
+  "version": "4.14.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 1f689e6c3a97..23a791281bec 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.13.5",
-  "version_name": "4.13.5",
+  "version": "4.14.0",
+  "version_name": "4.14.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 04d92e4719a1..7582056dc56e 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.13.5",
-  "version_name": "4.13.5",
+  "version": "4.14.0",
+  "version_name": "4.14.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 2ba0d204452e..a97422cedf86 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.13.5",
+  "version": "4.14.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 381d4ebd5935..a661fdf83995 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.13.5",
+  "version": "4.14.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index ec244e939cb9..c3c92ea8e061 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,18 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 0be667fdd137..81d9be15c87c 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.13.5",
+  "version": "4.14.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.13.5",
+    "react-devtools-core": "4.14.0",
     "update-notifier": "^2.1.0"
   }
 }

From 310187264d01a31bc3079358f13662d31a079d9e Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 16 Jul 2021 10:37:57 -0400
Subject: [PATCH 0704/1603] Clean up flushSync flow types (#21887)

---
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  2 +-
 .../src/createReactNoop.js                    |  5 +---
 .../src/ReactFiberWorkLoop.new.js             | 25 +++++++++++++------
 .../src/ReactFiberWorkLoop.old.js             | 25 +++++++++++++------
 .../src/ReactTestRenderer.js                  |  4 +--
 5 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index ef2873a80bd7..79a7351f57f3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -132,7 +132,7 @@ describe('ReactDOMFiberAsync', () => {
   it('flushSync logs an error if already performing work', () => {
     class Component extends React.Component {
       componentDidUpdate() {
-        ReactDOM.flushSync(() => {});
+        ReactDOM.flushSync();
       }
       render() {
         return null;
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 5ea510d73d6e..652f32521c24 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -913,10 +913,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
-    flushSync(fn: () => mixed) {
-      NoopRenderer.flushSync(fn);
-    },
-
+    flushSync: NoopRenderer.flushSync,
     flushPassiveEffects: NoopRenderer.flushPassiveEffects,
 
     // Logs the current state of the tree.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index cede27655a52..065d17fcc753 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1093,10 +1093,13 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
-  fn: A => R,
-  a: A,
-): R {
+// Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+declare function flushSyncWithoutWarningIfAlreadyRendering<R>(fn: () => R): R;
+// eslint-disable-next-line no-redeclare
+declare function flushSyncWithoutWarningIfAlreadyRendering(): void;
+// eslint-disable-next-line no-redeclare
+export function flushSyncWithoutWarningIfAlreadyRendering(fn) {
   // In legacy mode, we flush pending passive effects at the beginning of the
   // next event, not at the end of the previous one.
   if (
@@ -1116,9 +1119,9 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
     ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
-      return fn(a);
+      return fn();
     } else {
-      return (undefined: $FlowFixMe);
+      return undefined;
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
@@ -1133,7 +1136,13 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
   }
 }
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
+// Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+declare function flushSync<R>(fn: () => R): R;
+// eslint-disable-next-line no-redeclare
+declare function flushSync(): void;
+// eslint-disable-next-line no-redeclare
+export function flushSync(fn) {
   if (__DEV__) {
     if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
       console.error(
@@ -1143,7 +1152,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
       );
     }
   }
-  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
+  return flushSyncWithoutWarningIfAlreadyRendering(fn);
 }
 
 export function flushControlled(fn: () => mixed): void {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 0bba7217b1fd..710e853ce4fd 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1093,10 +1093,13 @@ export function discreteUpdates<A, B, C, D, R>(
   }
 }
 
-export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
-  fn: A => R,
-  a: A,
-): R {
+// Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+declare function flushSyncWithoutWarningIfAlreadyRendering<R>(fn: () => R): R;
+// eslint-disable-next-line no-redeclare
+declare function flushSyncWithoutWarningIfAlreadyRendering(): void;
+// eslint-disable-next-line no-redeclare
+export function flushSyncWithoutWarningIfAlreadyRendering(fn) {
   // In legacy mode, we flush pending passive effects at the beginning of the
   // next event, not at the end of the previous one.
   if (
@@ -1116,9 +1119,9 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
     ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
-      return fn(a);
+      return fn();
     } else {
-      return (undefined: $FlowFixMe);
+      return undefined;
     }
   } finally {
     setCurrentUpdatePriority(previousPriority);
@@ -1133,7 +1136,13 @@ export function flushSyncWithoutWarningIfAlreadyRendering<A, R>(
   }
 }
 
-export function flushSync<A, R>(fn: A => R, a: A): R {
+// Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+declare function flushSync<R>(fn: () => R): R;
+// eslint-disable-next-line no-redeclare
+declare function flushSync(): void;
+// eslint-disable-next-line no-redeclare
+export function flushSync(fn) {
   if (__DEV__) {
     if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
       console.error(
@@ -1143,7 +1152,7 @@ export function flushSync<A, R>(fn: A => R, a: A): R {
       );
     }
   }
-  return flushSyncWithoutWarningIfAlreadyRendering(fn, a);
+  return flushSyncWithoutWarningIfAlreadyRendering(fn);
 }
 
 export function flushControlled(fn: () => mixed): void {
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 60e02766dc9d..39c288014884 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -536,9 +536,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
       return getPublicRootInstance(root);
     },
 
-    unstable_flushSync<T>(fn: () => T): T {
-      return flushSync(fn);
-    },
+    unstable_flushSync: flushSync,
   };
 
   Object.defineProperty(

From 34600f4fadf526028a21c94030510fbed20e4665 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 16 Jul 2021 18:05:39 -0400
Subject: [PATCH 0705/1603] Refactor "reappear" logic into its own traversal
 (#21898)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When a Suspense boundary switches to its fallback state — or similarly,
when an Offscreen boundary switches from visible to hidden — we unmount
all its layout effects. When it resolves — or when Offscreen switches
back to visible — we mount them again. This "reappearing" logic
currently happens in the same commit phase traversal where we perform
normal layout effects.

I've changed it so that the "reappear" logic happens in its own
recurisve traversal that is separate from the commit phase one.

In the next step, I will do the same for the "disappear" logic that
currently lives in the `hideOrUnhideAllChildren` function.

There are a few reasons to model it this way, related to future
Offscreen features that we have planned. For example, we intend to
provide an imperative API to "appear" and "reappear" all the effects
within an Offscreen boundary. This API would be called from outside the
commit phase, during an arbitrary event. Which means it can't rely on
the regular commit phase — it's not part of a commit. This isn't the
only motivation but it illustrates why the separation makes sense.
---
 .../src/ReactFiberCommitWork.new.js           | 397 ++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 397 ++++++++++--------
 .../ReactSuspenseWithNoopRenderer-test.js     |  32 +-
 3 files changed, 458 insertions(+), 368 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index c67a874119da..e211ff332b79 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -620,131 +620,144 @@ function commitLayoutEffectOnFiber(
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        // 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 (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
+          !enableSuspenseLayoutEffectSemantics ||
+          !offscreenSubtreeWasHidden
         ) {
-          try {
-            startLayoutEffectTimer();
+          // 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 (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            finishedWork.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
+              commitHookEffectListMount(
+                HookLayout | HookHasEffect,
+                finishedWork,
+              );
+            } finally {
+              recordLayoutEffectDuration(finishedWork);
+            }
+          } else {
             commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-          } finally {
-            recordLayoutEffectDuration(finishedWork);
           }
-        } else {
-          commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
         }
         break;
       }
       case ClassComponent: {
         const instance = finishedWork.stateNode;
         if (finishedWork.flags & Update) {
-          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 (!offscreenSubtreeWasHidden) {
+            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 === finishedWork.elementType &&
+                  !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 (
-                finishedWork.type === finishedWork.elementType &&
-                !didWarnAboutReassigningProps
+                enableProfilerTimer &&
+                enableProfilerCommitHooks &&
+                finishedWork.mode & ProfileMode
               ) {
-                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',
-                  );
+                try {
+                  startLayoutEffectTimer();
+                  instance.componentDidMount();
+                } finally {
+                  recordLayoutEffectDuration(finishedWork);
                 }
-              }
-            }
-            if (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
+              } else {
                 instance.componentDidMount();
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
               }
             } else {
-              instance.componentDidMount();
-            }
-          } else {
-            const prevProps =
-              finishedWork.elementType === finishedWork.type
-                ? current.memoizedProps
-                : resolveDefaultProps(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__) {
+              const prevProps =
+                finishedWork.elementType === finishedWork.type
+                  ? current.memoizedProps
+                  : resolveDefaultProps(
+                      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 === finishedWork.elementType &&
+                  !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 (
-                finishedWork.type === finishedWork.elementType &&
-                !didWarnAboutReassigningProps
+                enableProfilerTimer &&
+                enableProfilerCommitHooks &&
+                finishedWork.mode & ProfileMode
               ) {
-                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',
+                try {
+                  startLayoutEffectTimer();
+                  instance.componentDidUpdate(
+                    prevProps,
+                    prevState,
+                    instance.__reactInternalSnapshotBeforeUpdate,
                   );
+                } finally {
+                  recordLayoutEffectDuration(finishedWork);
                 }
-              }
-            }
-            if (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
+              } else {
                 instance.componentDidUpdate(
                   prevProps,
                   prevState,
                   instance.__reactInternalSnapshotBeforeUpdate,
                 );
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
               }
-            } else {
-              instance.componentDidUpdate(
-                prevProps,
-                prevState,
-                instance.__reactInternalSnapshotBeforeUpdate,
-              );
             }
           }
         }
@@ -913,15 +926,55 @@ function commitLayoutEffectOnFiber(
     }
   }
 
-  if (enableScopeAPI) {
-    // TODO: This is a temporary solution that allowed us to transition away
-    // from React Flare on www.
-    if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
-      commitAttachRef(finishedWork);
+  if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
+    if (enableScopeAPI) {
+      // TODO: This is a temporary solution that allowed us to transition away
+      // from React Flare on www.
+      if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
+        commitAttachRef(finishedWork);
+      }
+    } else {
+      if (finishedWork.flags & Ref) {
+        commitAttachRef(finishedWork);
+      }
     }
-  } else {
-    if (finishedWork.flags & Ref) {
-      commitAttachRef(finishedWork);
+  }
+}
+
+function reappearLayoutEffectsOnFiber(node: Fiber) {
+  // Turn on layout effects in a tree that previously disappeared.
+  // TODO (Offscreen) Check: flags & LayoutStatic
+  switch (node.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        node.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          safelyCallCommitHookLayoutEffectListMount(node, node.return);
+        } finally {
+          recordLayoutEffectDuration(node);
+        }
+      } else {
+        safelyCallCommitHookLayoutEffectListMount(node, node.return);
+      }
+      break;
+    }
+    case ClassComponent: {
+      const instance = node.stateNode;
+      if (typeof instance.componentDidMount === 'function') {
+        safelyCallComponentDidMount(node, node.return, instance);
+      }
+      safelyAttachRef(node, node.return);
+      break;
+    }
+    case HostComponent: {
+      safelyAttachRef(node, node.return);
+      break;
     }
   }
 }
@@ -2255,6 +2308,14 @@ function commitLayoutEffects_begin(
         // Traverse the Offscreen subtree with the current Offscreen as the root.
         offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
         offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+
+        if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
+          // This is the root of a reappearing boundary. Turn its layout effects
+          // back on.
+          nextEffect = fiber;
+          reappearLayoutEffects_begin(fiber);
+        }
+
         let child = firstChild;
         while (child !== null) {
           nextEffect = child;
@@ -2280,21 +2341,6 @@ function commitLayoutEffects_begin(
       ensureCorrectReturnPointer(firstChild, fiber);
       nextEffect = firstChild;
     } else {
-      if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-        const visibilityChanged =
-          !offscreenSubtreeIsHidden && offscreenSubtreeWasHidden;
-
-        // TODO (Offscreen) Also check: subtreeFlags & LayoutStatic
-        if (visibilityChanged && firstChild !== null) {
-          // We've just shown or hidden a Offscreen tree that contains layout effects.
-          // We only enter this code path for subtrees that are updated,
-          // because newly mounted ones would pass the LayoutMask check above.
-          ensureCorrectReturnPointer(firstChild, fiber);
-          nextEffect = firstChild;
-          continue;
-        }
-      }
-
       commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
     }
   }
@@ -2305,59 +2351,9 @@ function commitLayoutMountEffects_complete(
   root: FiberRoot,
   committedLanes: Lanes,
 ) {
-  // Suspense layout effects semantics don't change for legacy roots.
-  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
-
   while (nextEffect !== null) {
     const fiber = nextEffect;
-
-    if (
-      enableSuspenseLayoutEffectSemantics &&
-      isModernRoot &&
-      offscreenSubtreeWasHidden &&
-      !offscreenSubtreeIsHidden
-    ) {
-      // Inside of an Offscreen subtree that changed visibility during this commit.
-      // If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
-      // but if it was just shown, we need to (re)create the effects now.
-      // TODO (Offscreen) Check: flags & LayoutStatic
-      switch (fiber.tag) {
-        case FunctionComponent:
-        case ForwardRef:
-        case SimpleMemoComponent: {
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            fiber.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
-            } finally {
-              recordLayoutEffectDuration(fiber);
-            }
-          } else {
-            safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
-          }
-          break;
-        }
-        case ClassComponent: {
-          const instance = fiber.stateNode;
-          if (typeof instance.componentDidMount === 'function') {
-            safelyCallComponentDidMount(fiber, fiber.return, instance);
-          }
-          break;
-        }
-      }
-
-      // TODO (Offscreen) Check flags & RefStatic
-      switch (fiber.tag) {
-        case ClassComponent:
-        case HostComponent:
-          safelyAttachRef(fiber, fiber.return);
-          break;
-      }
-    } else if ((fiber.flags & LayoutMask) !== NoFlags) {
+    if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
       setCurrentDebugFiberInDEV(fiber);
       try {
@@ -2385,6 +2381,60 @@ function commitLayoutMountEffects_complete(
   }
 }
 
+function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+
+    if (fiber.tag === OffscreenComponent) {
+      const isHidden = fiber.memoizedState !== null;
+      if (isHidden) {
+        // Nested Offscreen tree is still hidden. Don't re-appear its effects.
+        reappearLayoutEffects_complete(subtreeRoot);
+        continue;
+      }
+    }
+
+    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
+    if (firstChild !== null) {
+      ensureCorrectReturnPointer(firstChild, fiber);
+      nextEffect = firstChild;
+    } else {
+      reappearLayoutEffects_complete(subtreeRoot);
+    }
+  }
+}
+
+function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // TODO (Offscreen) Check: flags & LayoutStatic
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      reappearLayoutEffectsOnFiber(fiber);
+    } catch (error) {
+      reportUncaughtErrorInDEV(error);
+      captureCommitPhaseError(fiber, fiber.return, error);
+    }
+    resetCurrentDebugFiberInDEV();
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
 export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
@@ -2689,6 +2739,7 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
   fiber.return = expectedReturnFiber;
 }
 
+// TODO: Reuse reappearLayoutEffects traversal here?
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index cbaf8ed8c498..b9706d730ba7 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -620,131 +620,144 @@ function commitLayoutEffectOnFiber(
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        // 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 (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
+          !enableSuspenseLayoutEffectSemantics ||
+          !offscreenSubtreeWasHidden
         ) {
-          try {
-            startLayoutEffectTimer();
+          // 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 (
+            enableProfilerTimer &&
+            enableProfilerCommitHooks &&
+            finishedWork.mode & ProfileMode
+          ) {
+            try {
+              startLayoutEffectTimer();
+              commitHookEffectListMount(
+                HookLayout | HookHasEffect,
+                finishedWork,
+              );
+            } finally {
+              recordLayoutEffectDuration(finishedWork);
+            }
+          } else {
             commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
-          } finally {
-            recordLayoutEffectDuration(finishedWork);
           }
-        } else {
-          commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
         }
         break;
       }
       case ClassComponent: {
         const instance = finishedWork.stateNode;
         if (finishedWork.flags & Update) {
-          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 (!offscreenSubtreeWasHidden) {
+            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 === finishedWork.elementType &&
+                  !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 (
-                finishedWork.type === finishedWork.elementType &&
-                !didWarnAboutReassigningProps
+                enableProfilerTimer &&
+                enableProfilerCommitHooks &&
+                finishedWork.mode & ProfileMode
               ) {
-                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',
-                  );
+                try {
+                  startLayoutEffectTimer();
+                  instance.componentDidMount();
+                } finally {
+                  recordLayoutEffectDuration(finishedWork);
                 }
-              }
-            }
-            if (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
+              } else {
                 instance.componentDidMount();
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
               }
             } else {
-              instance.componentDidMount();
-            }
-          } else {
-            const prevProps =
-              finishedWork.elementType === finishedWork.type
-                ? current.memoizedProps
-                : resolveDefaultProps(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__) {
+              const prevProps =
+                finishedWork.elementType === finishedWork.type
+                  ? current.memoizedProps
+                  : resolveDefaultProps(
+                      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 === finishedWork.elementType &&
+                  !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 (
-                finishedWork.type === finishedWork.elementType &&
-                !didWarnAboutReassigningProps
+                enableProfilerTimer &&
+                enableProfilerCommitHooks &&
+                finishedWork.mode & ProfileMode
               ) {
-                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',
+                try {
+                  startLayoutEffectTimer();
+                  instance.componentDidUpdate(
+                    prevProps,
+                    prevState,
+                    instance.__reactInternalSnapshotBeforeUpdate,
                   );
+                } finally {
+                  recordLayoutEffectDuration(finishedWork);
                 }
-              }
-            }
-            if (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
+              } else {
                 instance.componentDidUpdate(
                   prevProps,
                   prevState,
                   instance.__reactInternalSnapshotBeforeUpdate,
                 );
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
               }
-            } else {
-              instance.componentDidUpdate(
-                prevProps,
-                prevState,
-                instance.__reactInternalSnapshotBeforeUpdate,
-              );
             }
           }
         }
@@ -913,15 +926,55 @@ function commitLayoutEffectOnFiber(
     }
   }
 
-  if (enableScopeAPI) {
-    // TODO: This is a temporary solution that allowed us to transition away
-    // from React Flare on www.
-    if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
-      commitAttachRef(finishedWork);
+  if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
+    if (enableScopeAPI) {
+      // TODO: This is a temporary solution that allowed us to transition away
+      // from React Flare on www.
+      if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
+        commitAttachRef(finishedWork);
+      }
+    } else {
+      if (finishedWork.flags & Ref) {
+        commitAttachRef(finishedWork);
+      }
     }
-  } else {
-    if (finishedWork.flags & Ref) {
-      commitAttachRef(finishedWork);
+  }
+}
+
+function reappearLayoutEffectsOnFiber(node: Fiber) {
+  // Turn on layout effects in a tree that previously disappeared.
+  // TODO (Offscreen) Check: flags & LayoutStatic
+  switch (node.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        node.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          safelyCallCommitHookLayoutEffectListMount(node, node.return);
+        } finally {
+          recordLayoutEffectDuration(node);
+        }
+      } else {
+        safelyCallCommitHookLayoutEffectListMount(node, node.return);
+      }
+      break;
+    }
+    case ClassComponent: {
+      const instance = node.stateNode;
+      if (typeof instance.componentDidMount === 'function') {
+        safelyCallComponentDidMount(node, node.return, instance);
+      }
+      safelyAttachRef(node, node.return);
+      break;
+    }
+    case HostComponent: {
+      safelyAttachRef(node, node.return);
+      break;
     }
   }
 }
@@ -2255,6 +2308,14 @@ function commitLayoutEffects_begin(
         // Traverse the Offscreen subtree with the current Offscreen as the root.
         offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
         offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
+
+        if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
+          // This is the root of a reappearing boundary. Turn its layout effects
+          // back on.
+          nextEffect = fiber;
+          reappearLayoutEffects_begin(fiber);
+        }
+
         let child = firstChild;
         while (child !== null) {
           nextEffect = child;
@@ -2280,21 +2341,6 @@ function commitLayoutEffects_begin(
       ensureCorrectReturnPointer(firstChild, fiber);
       nextEffect = firstChild;
     } else {
-      if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-        const visibilityChanged =
-          !offscreenSubtreeIsHidden && offscreenSubtreeWasHidden;
-
-        // TODO (Offscreen) Also check: subtreeFlags & LayoutStatic
-        if (visibilityChanged && firstChild !== null) {
-          // We've just shown or hidden a Offscreen tree that contains layout effects.
-          // We only enter this code path for subtrees that are updated,
-          // because newly mounted ones would pass the LayoutMask check above.
-          ensureCorrectReturnPointer(firstChild, fiber);
-          nextEffect = firstChild;
-          continue;
-        }
-      }
-
       commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
     }
   }
@@ -2305,59 +2351,9 @@ function commitLayoutMountEffects_complete(
   root: FiberRoot,
   committedLanes: Lanes,
 ) {
-  // Suspense layout effects semantics don't change for legacy roots.
-  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
-
   while (nextEffect !== null) {
     const fiber = nextEffect;
-
-    if (
-      enableSuspenseLayoutEffectSemantics &&
-      isModernRoot &&
-      offscreenSubtreeWasHidden &&
-      !offscreenSubtreeIsHidden
-    ) {
-      // Inside of an Offscreen subtree that changed visibility during this commit.
-      // If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
-      // but if it was just shown, we need to (re)create the effects now.
-      // TODO (Offscreen) Check: flags & LayoutStatic
-      switch (fiber.tag) {
-        case FunctionComponent:
-        case ForwardRef:
-        case SimpleMemoComponent: {
-          if (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            fiber.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
-            } finally {
-              recordLayoutEffectDuration(fiber);
-            }
-          } else {
-            safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
-          }
-          break;
-        }
-        case ClassComponent: {
-          const instance = fiber.stateNode;
-          if (typeof instance.componentDidMount === 'function') {
-            safelyCallComponentDidMount(fiber, fiber.return, instance);
-          }
-          break;
-        }
-      }
-
-      // TODO (Offscreen) Check flags & RefStatic
-      switch (fiber.tag) {
-        case ClassComponent:
-        case HostComponent:
-          safelyAttachRef(fiber, fiber.return);
-          break;
-      }
-    } else if ((fiber.flags & LayoutMask) !== NoFlags) {
+    if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
       setCurrentDebugFiberInDEV(fiber);
       try {
@@ -2385,6 +2381,60 @@ function commitLayoutMountEffects_complete(
   }
 }
 
+function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+
+    if (fiber.tag === OffscreenComponent) {
+      const isHidden = fiber.memoizedState !== null;
+      if (isHidden) {
+        // Nested Offscreen tree is still hidden. Don't re-appear its effects.
+        reappearLayoutEffects_complete(subtreeRoot);
+        continue;
+      }
+    }
+
+    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
+    if (firstChild !== null) {
+      ensureCorrectReturnPointer(firstChild, fiber);
+      nextEffect = firstChild;
+    } else {
+      reappearLayoutEffects_complete(subtreeRoot);
+    }
+  }
+}
+
+function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    // TODO (Offscreen) Check: flags & LayoutStatic
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      reappearLayoutEffectsOnFiber(fiber);
+    } catch (error) {
+      reportUncaughtErrorInDEV(error);
+      captureCommitPhaseError(fiber, fiber.return, error);
+    }
+    resetCurrentDebugFiberInDEV();
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      ensureCorrectReturnPointer(sibling, fiber.return);
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
 export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
@@ -2689,6 +2739,7 @@ function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
   fiber.return = expectedReturnFiber;
 }
 
+// TODO: Reuse reappearLayoutEffects traversal here?
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableStrictEffects) {
     // We don't need to re-check StrictEffectsMode here.
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index ac7d0665f3fb..960c52506ab0 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -501,30 +501,18 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
     await rejectText('Result', new Error('Failed to load: Result'));
 
-    gate(flags => {
-      if (flags.enableSuspenseLayoutEffectSemantics) {
-        expect(Scheduler).toFlushAndYield([
-          'Error! [Result]',
-
-          // React retries one more time
-          'Error! [Result]',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([]);
-      } else {
-        expect(Scheduler).toFlushAndYield([
-          'Error! [Result]',
+    expect(Scheduler).toFlushAndYield([
+      'Error! [Result]',
 
-          // React retries one more time
-          'Error! [Result]',
+      // React retries one more time
+      'Error! [Result]',
 
-          // Errored again on retry. Now handle it.
-          'Caught error: Failed to load: Result',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Caught error: Failed to load: Result'),
-        ]);
-      }
-    });
+      // Errored again on retry. Now handle it.
+      'Caught error: Failed to load: Result',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Caught error: Failed to load: Result'),
+    ]);
   });
 
   // @gate enableCache

From 262ff7ad2c4a018de9992731fcf8a8f9c91083d8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 16 Jul 2021 18:58:11 -0400
Subject: [PATCH 0706/1603] Refactor "disappear" logic into its own traversal
 (#21901)

Similar to #21898, but for "disappear" logic. Previously this lived
inside `hideOrUnhideAllChildren`, the function that mutates the nearest
DOM nodes to override their `display` style.

This makes the feature work in persistent mode (Fabric); it didn't
before because `hideOrUnhideAllChildren` only runs in mutation mode.
---
 .../src/ReactFiberCommitWork.new.js           | 240 +++++++++++-------
 .../src/ReactFiberCommitWork.old.js           | 240 +++++++++++-------
 .../src/__tests__/ReactOffscreen-test.js      |   2 -
 .../ReactSuspenseEffectsSemantics-test.js     |  20 --
 4 files changed, 310 insertions(+), 192 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e211ff332b79..99161bd97f48 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -980,12 +980,6 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
 }
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
-  // Suspense layout effects semantics don't change for legacy roots.
-  const isModernRoot = (finishedWork.mode & ConcurrentMode) !== NoMode;
-
-  const current = finishedWork.alternate;
-  const wasHidden = current !== null && current.memoizedState !== null;
-
   // Only hide or unhide the top-most host nodes.
   let hostSubtreeRoot = null;
 
@@ -1005,22 +999,6 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
             unhideInstance(node.stateNode, node.memoizedProps);
           }
         }
-
-        if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-          // This method is called during mutation; it should detach refs within a hidden subtree.
-          // Attaching refs should be done elsewhere though (during layout).
-          // TODO (Offscreen) Also check: flags & RefStatic
-          if (isHidden) {
-            safelyDetachRef(node, finishedWork);
-          }
-
-          // TODO (Offscreen) Also check: subtreeFlags & (RefStatic | LayoutStatic)
-          if (node.child !== null) {
-            node.child.return = node;
-            node = node.child;
-            continue;
-          }
-        }
       } else if (node.tag === HostText) {
         if (hostSubtreeRoot === null) {
           const instance = node.stateNode;
@@ -1038,52 +1016,6 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
       ) {
         // Found a nested Offscreen component that is hidden.
         // Don't search any deeper. This tree should remain hidden.
-      } else if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-        // When a mounted Suspense subtree gets hidden again, destroy any nested layout effects.
-        // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
-        switch (node.tag) {
-          case FunctionComponent:
-          case ForwardRef:
-          case MemoComponent:
-          case SimpleMemoComponent: {
-            // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
-            if (isHidden && !wasHidden) {
-              if (
-                enableProfilerTimer &&
-                enableProfilerCommitHooks &&
-                node.mode & ProfileMode
-              ) {
-                try {
-                  startLayoutEffectTimer();
-                  commitHookEffectListUnmount(HookLayout, node, finishedWork);
-                } finally {
-                  recordLayoutEffectDuration(node);
-                }
-              } else {
-                commitHookEffectListUnmount(HookLayout, node, finishedWork);
-              }
-            }
-            break;
-          }
-          case ClassComponent: {
-            if (isHidden && !wasHidden) {
-              // TODO (Offscreen) Check: flags & RefStatic
-              safelyDetachRef(node, finishedWork);
-
-              const instance = node.stateNode;
-              if (typeof instance.componentWillUnmount === 'function') {
-                safelyCallComponentWillUnmount(node, finishedWork, instance);
-              }
-            }
-            break;
-          }
-        }
-
-        if (node.child !== null) {
-          node.child.return = node;
-          node = node.child;
-          continue;
-        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -1801,6 +1733,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
         // 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.
+        // TODO: Check if we're inside an Offscreen subtree that disappeared
+        // during this commit. If so, we would have already unmounted its
+        // layout hooks. (However, since we null out the `destroy` function
+        // right before calling it, the behavior is already correct, so this
+        // would mostly be for modeling purposes.)
         if (
           enableProfilerTimer &&
           enableProfilerCommitHooks &&
@@ -2183,20 +2120,36 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
     switch (finishedWork.tag) {
       case SuspenseComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
-        if (newState !== null) {
-          markCommitTimeOfFallback();
-          // Hide the Offscreen component that contains the primary children.
-          // TODO: Ideally, this effect would have been scheduled on the
-          // Offscreen fiber itself. That's how unhiding works: the Offscreen
-          // component schedules an effect on itself. However, in this case, the
-          // component didn't complete, so the fiber was never added to the
-          // effect list in the normal path. We could have appended it to the
-          // effect list in the Suspense component's second pass, but doing it
-          // this way is less complicated. This would be simpler if we got rid
-          // of the effect list and traversed the tree, like we're planning to
-          // do.
-          const primaryChildParent: Fiber = (finishedWork.child: any);
-          hideOrUnhideAllChildren(primaryChildParent, true);
+        const isHidden = newState !== null;
+        const current = finishedWork.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const offscreenBoundary: Fiber = (finishedWork.child: any);
+
+        if (isHidden) {
+          if (!wasHidden) {
+            markCommitTimeOfFallback();
+            if (supportsMutation) {
+              hideOrUnhideAllChildren(offscreenBoundary, true);
+            }
+            if (
+              enableSuspenseLayoutEffectSemantics &&
+              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
+            ) {
+              let offscreenChild = offscreenBoundary.child;
+              while (offscreenChild !== null) {
+                nextEffect = offscreenChild;
+                disappearLayoutEffects_begin(offscreenChild);
+                offscreenChild = offscreenChild.sibling;
+              }
+            }
+          }
+        } else {
+          if (wasHidden) {
+            if (supportsMutation) {
+              hideOrUnhideAllChildren(offscreenBoundary, false);
+            }
+            // TODO: Move re-appear call here for symmetry?
+          }
         }
         break;
       }
@@ -2204,7 +2157,36 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
       case LegacyHiddenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        hideOrUnhideAllChildren(finishedWork, isHidden);
+        const current = finishedWork.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const offscreenBoundary: Fiber = finishedWork;
+
+        if (supportsMutation) {
+          // TODO: This needs to run whenever there's an insertion or update
+          // inside a hidden Offscreen tree.
+          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+        }
+
+        if (isHidden) {
+          if (!wasHidden) {
+            if (
+              enableSuspenseLayoutEffectSemantics &&
+              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
+            ) {
+              nextEffect = offscreenBoundary;
+              let offscreenChild = offscreenBoundary.child;
+              while (offscreenChild !== null) {
+                nextEffect = offscreenChild;
+                disappearLayoutEffects_begin(offscreenChild);
+                offscreenChild = offscreenChild.sibling;
+              }
+            }
+          }
+        } else {
+          if (wasHidden) {
+            // TODO: Move re-appear call here for symmetry?
+          }
+        }
         break;
       }
     }
@@ -2381,6 +2363,90 @@ function commitLayoutMountEffects_complete(
   }
 }
 
+function disappearLayoutEffects_begin(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+
+    // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case MemoComponent:
+      case SimpleMemoComponent: {
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          fiber.mode & ProfileMode
+        ) {
+          try {
+            startLayoutEffectTimer();
+            commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
+          } finally {
+            recordLayoutEffectDuration(fiber);
+          }
+        } else {
+          commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
+        }
+        break;
+      }
+      case ClassComponent: {
+        // TODO (Offscreen) Check: flags & RefStatic
+        safelyDetachRef(fiber, fiber.return);
+
+        const instance = fiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
+        }
+        break;
+      }
+      case HostComponent: {
+        safelyDetachRef(fiber, fiber.return);
+        break;
+      }
+      case OffscreenComponent: {
+        // Check if this is a
+        const isHidden = fiber.memoizedState !== null;
+        if (isHidden) {
+          // Nested Offscreen tree is already hidden. Don't disappear
+          // its effects.
+          disappearLayoutEffects_complete(subtreeRoot);
+          continue;
+        }
+        break;
+      }
+    }
+
+    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
+    if (firstChild !== null) {
+      firstChild.return = fiber;
+      nextEffect = firstChild;
+    } else {
+      disappearLayoutEffects_complete(subtreeRoot);
+    }
+  }
+}
+
+function disappearLayoutEffects_complete(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
 function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2397,7 +2463,9 @@ function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
 
     // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
     if (firstChild !== null) {
-      ensureCorrectReturnPointer(firstChild, fiber);
+      // This node may have been reused from a previous render, so we can't
+      // assume its return pointer is correct.
+      firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
       reappearLayoutEffects_complete(subtreeRoot);
@@ -2426,7 +2494,9 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      // This node may have been reused from a previous render, so we can't
+      // assume its return pointer is correct.
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index b9706d730ba7..8fcdb5920756 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -980,12 +980,6 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
 }
 
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
-  // Suspense layout effects semantics don't change for legacy roots.
-  const isModernRoot = (finishedWork.mode & ConcurrentMode) !== NoMode;
-
-  const current = finishedWork.alternate;
-  const wasHidden = current !== null && current.memoizedState !== null;
-
   // Only hide or unhide the top-most host nodes.
   let hostSubtreeRoot = null;
 
@@ -1005,22 +999,6 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
             unhideInstance(node.stateNode, node.memoizedProps);
           }
         }
-
-        if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-          // This method is called during mutation; it should detach refs within a hidden subtree.
-          // Attaching refs should be done elsewhere though (during layout).
-          // TODO (Offscreen) Also check: flags & RefStatic
-          if (isHidden) {
-            safelyDetachRef(node, finishedWork);
-          }
-
-          // TODO (Offscreen) Also check: subtreeFlags & (RefStatic | LayoutStatic)
-          if (node.child !== null) {
-            node.child.return = node;
-            node = node.child;
-            continue;
-          }
-        }
       } else if (node.tag === HostText) {
         if (hostSubtreeRoot === null) {
           const instance = node.stateNode;
@@ -1038,52 +1016,6 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
       ) {
         // Found a nested Offscreen component that is hidden.
         // Don't search any deeper. This tree should remain hidden.
-      } else if (enableSuspenseLayoutEffectSemantics && isModernRoot) {
-        // When a mounted Suspense subtree gets hidden again, destroy any nested layout effects.
-        // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
-        switch (node.tag) {
-          case FunctionComponent:
-          case ForwardRef:
-          case MemoComponent:
-          case SimpleMemoComponent: {
-            // Note that refs are attached by the useImperativeHandle() hook, not by commitAttachRef()
-            if (isHidden && !wasHidden) {
-              if (
-                enableProfilerTimer &&
-                enableProfilerCommitHooks &&
-                node.mode & ProfileMode
-              ) {
-                try {
-                  startLayoutEffectTimer();
-                  commitHookEffectListUnmount(HookLayout, node, finishedWork);
-                } finally {
-                  recordLayoutEffectDuration(node);
-                }
-              } else {
-                commitHookEffectListUnmount(HookLayout, node, finishedWork);
-              }
-            }
-            break;
-          }
-          case ClassComponent: {
-            if (isHidden && !wasHidden) {
-              // TODO (Offscreen) Check: flags & RefStatic
-              safelyDetachRef(node, finishedWork);
-
-              const instance = node.stateNode;
-              if (typeof instance.componentWillUnmount === 'function') {
-                safelyCallComponentWillUnmount(node, finishedWork, instance);
-              }
-            }
-            break;
-          }
-        }
-
-        if (node.child !== null) {
-          node.child.return = node;
-          node = node.child;
-          continue;
-        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -1801,6 +1733,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
         // 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.
+        // TODO: Check if we're inside an Offscreen subtree that disappeared
+        // during this commit. If so, we would have already unmounted its
+        // layout hooks. (However, since we null out the `destroy` function
+        // right before calling it, the behavior is already correct, so this
+        // would mostly be for modeling purposes.)
         if (
           enableProfilerTimer &&
           enableProfilerCommitHooks &&
@@ -2183,20 +2120,36 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
     switch (finishedWork.tag) {
       case SuspenseComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
-        if (newState !== null) {
-          markCommitTimeOfFallback();
-          // Hide the Offscreen component that contains the primary children.
-          // TODO: Ideally, this effect would have been scheduled on the
-          // Offscreen fiber itself. That's how unhiding works: the Offscreen
-          // component schedules an effect on itself. However, in this case, the
-          // component didn't complete, so the fiber was never added to the
-          // effect list in the normal path. We could have appended it to the
-          // effect list in the Suspense component's second pass, but doing it
-          // this way is less complicated. This would be simpler if we got rid
-          // of the effect list and traversed the tree, like we're planning to
-          // do.
-          const primaryChildParent: Fiber = (finishedWork.child: any);
-          hideOrUnhideAllChildren(primaryChildParent, true);
+        const isHidden = newState !== null;
+        const current = finishedWork.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const offscreenBoundary: Fiber = (finishedWork.child: any);
+
+        if (isHidden) {
+          if (!wasHidden) {
+            markCommitTimeOfFallback();
+            if (supportsMutation) {
+              hideOrUnhideAllChildren(offscreenBoundary, true);
+            }
+            if (
+              enableSuspenseLayoutEffectSemantics &&
+              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
+            ) {
+              let offscreenChild = offscreenBoundary.child;
+              while (offscreenChild !== null) {
+                nextEffect = offscreenChild;
+                disappearLayoutEffects_begin(offscreenChild);
+                offscreenChild = offscreenChild.sibling;
+              }
+            }
+          }
+        } else {
+          if (wasHidden) {
+            if (supportsMutation) {
+              hideOrUnhideAllChildren(offscreenBoundary, false);
+            }
+            // TODO: Move re-appear call here for symmetry?
+          }
         }
         break;
       }
@@ -2204,7 +2157,36 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
       case LegacyHiddenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        hideOrUnhideAllChildren(finishedWork, isHidden);
+        const current = finishedWork.alternate;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const offscreenBoundary: Fiber = finishedWork;
+
+        if (supportsMutation) {
+          // TODO: This needs to run whenever there's an insertion or update
+          // inside a hidden Offscreen tree.
+          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+        }
+
+        if (isHidden) {
+          if (!wasHidden) {
+            if (
+              enableSuspenseLayoutEffectSemantics &&
+              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
+            ) {
+              nextEffect = offscreenBoundary;
+              let offscreenChild = offscreenBoundary.child;
+              while (offscreenChild !== null) {
+                nextEffect = offscreenChild;
+                disappearLayoutEffects_begin(offscreenChild);
+                offscreenChild = offscreenChild.sibling;
+              }
+            }
+          }
+        } else {
+          if (wasHidden) {
+            // TODO: Move re-appear call here for symmetry?
+          }
+        }
         break;
       }
     }
@@ -2381,6 +2363,90 @@ function commitLayoutMountEffects_complete(
   }
 }
 
+function disappearLayoutEffects_begin(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+    const firstChild = fiber.child;
+
+    // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+    switch (fiber.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case MemoComponent:
+      case SimpleMemoComponent: {
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          fiber.mode & ProfileMode
+        ) {
+          try {
+            startLayoutEffectTimer();
+            commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
+          } finally {
+            recordLayoutEffectDuration(fiber);
+          }
+        } else {
+          commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
+        }
+        break;
+      }
+      case ClassComponent: {
+        // TODO (Offscreen) Check: flags & RefStatic
+        safelyDetachRef(fiber, fiber.return);
+
+        const instance = fiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
+        }
+        break;
+      }
+      case HostComponent: {
+        safelyDetachRef(fiber, fiber.return);
+        break;
+      }
+      case OffscreenComponent: {
+        // Check if this is a
+        const isHidden = fiber.memoizedState !== null;
+        if (isHidden) {
+          // Nested Offscreen tree is already hidden. Don't disappear
+          // its effects.
+          disappearLayoutEffects_complete(subtreeRoot);
+          continue;
+        }
+        break;
+      }
+    }
+
+    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
+    if (firstChild !== null) {
+      firstChild.return = fiber;
+      nextEffect = firstChild;
+    } else {
+      disappearLayoutEffects_complete(subtreeRoot);
+    }
+  }
+}
+
+function disappearLayoutEffects_complete(subtreeRoot: Fiber) {
+  while (nextEffect !== null) {
+    const fiber = nextEffect;
+
+    if (fiber === subtreeRoot) {
+      nextEffect = null;
+      return;
+    }
+
+    const sibling = fiber.sibling;
+    if (sibling !== null) {
+      sibling.return = fiber.return;
+      nextEffect = sibling;
+      return;
+    }
+
+    nextEffect = fiber.return;
+  }
+}
+
 function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2397,7 +2463,9 @@ function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
 
     // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
     if (firstChild !== null) {
-      ensureCorrectReturnPointer(firstChild, fiber);
+      // This node may have been reused from a previous render, so we can't
+      // assume its return pointer is correct.
+      firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
       reappearLayoutEffects_complete(subtreeRoot);
@@ -2426,7 +2494,9 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      // This node may have been reused from a previous render, so we can't
+      // assume its return pointer is correct.
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index e2bbc30998a7..327e72fdc972 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -220,7 +220,6 @@ describe('ReactOffscreen', () => {
 
   // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
-  // @gate !persistent
   it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -271,7 +270,6 @@ describe('ReactOffscreen', () => {
 
   // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
-  // @gate !persistent
   it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index fa16b8340511..6cb3c6097153 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -567,7 +567,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be destroyed and recreated for function components', async () => {
       function App({children = null}) {
         Scheduler.unstable_yieldValue('App render');
@@ -697,7 +696,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be destroyed and recreated for class components', async () => {
       class ClassText extends React.Component {
         componentDidMount() {
@@ -843,7 +841,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be destroyed and recreated when nested below host components', async () => {
       function App({children = null}) {
         Scheduler.unstable_yieldValue('App render');
@@ -954,7 +951,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be destroyed and recreated even if there is a bailout because of memoization', async () => {
       const MemoizedText = React.memo(Text, () => true);
 
@@ -1071,7 +1067,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should respect nested suspense boundaries', async () => {
       function App({innerChildren = null, outerChildren = null}) {
         return (
@@ -1295,7 +1290,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should show nested host nodes if multiple boundaries resolve at the same time', async () => {
       function App({innerChildren = null, outerChildren = null}) {
         return (
@@ -1406,7 +1400,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be cleaned up inside of a fallback that suspends', async () => {
       function App({fallbackChildren = null, outerChildren = null}) {
         return (
@@ -1550,7 +1543,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be cleaned up inside of a fallback that suspends (alternate)', async () => {
       function App({fallbackChildren = null, outerChildren = null}) {
         return (
@@ -1671,7 +1663,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be cleaned up deeper inside of a subtree that suspends', async () => {
       function ConditionalSuspense({shouldSuspend}) {
         if (shouldSuspend) {
@@ -1755,7 +1746,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
     describe('that throw errors', () => {
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
-      // @gate !persistent
       it('are properly handled for componentDidMount', async () => {
         let componentDidMountShouldThrow = false;
 
@@ -1895,7 +1885,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
-      // @gate !persistent
       it('are properly handled for componentWillUnmount', async () => {
         class ThrowsInWillUnmount extends React.Component {
           componentDidMount() {
@@ -2009,7 +1998,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
-      // @gate !persistent
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled for layout effect creation', async () => {
         let useLayoutEffectShouldThrow = false;
@@ -2150,7 +2138,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
-      // @gate !persistent
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled for layout effect descruction', async () => {
         function ThrowsInLayoutEffectDestroy() {
@@ -2263,7 +2250,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be only destroy layout effects once if a tree suspends in multiple places', async () => {
       class ClassText extends React.Component {
         componentDidMount() {
@@ -2403,7 +2389,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be only destroy layout effects once if a component suspends multiple times', async () => {
       class ClassText extends React.Component {
         componentDidMount() {
@@ -2688,7 +2673,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be cleared and reset for host components', async () => {
       function App({children}) {
         Scheduler.unstable_yieldValue(`App render`);
@@ -2786,7 +2770,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be cleared and reset for class components', async () => {
       class ClassComponent extends React.Component {
         render() {
@@ -2888,7 +2871,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should be cleared and reset for function components with useImperativeHandle', async () => {
       const FunctionComponent = React.forwardRef((props, ref) => {
         Scheduler.unstable_yieldValue('FunctionComponent render');
@@ -2994,7 +2976,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
     // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
-    // @gate !persistent
     it('should not reset for user-managed values', async () => {
       function RefChecker({forwardedRef}) {
         Scheduler.unstable_yieldValue(`RefChecker render`);
@@ -3093,7 +3074,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
     describe('that throw errors', () => {
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
-      // @gate !persistent
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled in ref callbacks', async () => {
         let useRefCallbackShouldThrow = false;

From 9b76d2d7b3a86ffde945f88b758a0537aeca027a Mon Sep 17 00:00:00 2001
From: Christian Schulze <christian.schulze@gmail.com>
Date: Tue, 20 Jul 2021 00:26:41 +1000
Subject: [PATCH 0707/1603] react-devtools: set icon on macos (#21908)

---
 packages/react-devtools/app.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
index ef3c43470fb0..174766490cc4 100644
--- a/packages/react-devtools/app.js
+++ b/packages/react-devtools/app.js
@@ -9,6 +9,7 @@
 
 const {app, BrowserWindow} = 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._;
@@ -32,6 +33,11 @@ app.on('ready', function() {
     },
   });
 
+  // set dock icon for macos
+  if (os.platform() === 'darwin') {
+    app.dock.setIcon(join(__dirname, 'icons/icon128.png'));
+  }
+
   // https://stackoverflow.com/questions/32402327/
   mainWindow.webContents.on('new-window', function(event, url) {
     event.preventDefault();

From 5579f1dc875c328e8155906aabe20902fc14c04a Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Mon, 19 Jul 2021 15:07:38 -0400
Subject: [PATCH 0708/1603] Update test comments with explanations (#21857)

---
 .../ReactHooksWithNoopRenderer-test.js        | 37 +++++++--------
 .../ReactIncrementalScheduling-test.js        | 47 ++++++-------------
 .../__tests__/ReactIncrementalUpdates-test.js |  9 ++--
 3 files changed, 38 insertions(+), 55 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 7de523293448..8fe9b19815eb 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -164,34 +164,31 @@ describe('ReactHooksWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
     // Schedule some updates
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.startTransition(() => {
-        // TODO: Batched updates need to be inside startTransition?
-        ReactNoop.batchedUpdates(() => {
+    act(() => {
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.startTransition(() => {
           counter.current.updateCount(1);
           counter.current.updateCount(count => count + 10);
         });
-      });
-    } else {
-      ReactNoop.batchedUpdates(() => {
+      } else {
         counter.current.updateCount(1);
         counter.current.updateCount(count => count + 10);
-      });
-    }
+      }
 
-    // Partially flush without committing
-    expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
-    expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      // Partially flush without committing
+      expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
+      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-    // Interrupt with a high priority update
-    ReactNoop.flushSync(() => {
-      ReactNoop.render(<Counter label="Total" />);
-    });
-    expect(Scheduler).toHaveYielded(['Total: 0']);
+      // Interrupt with a high priority update
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(<Counter label="Total" />);
+      });
+      expect(Scheduler).toHaveYielded(['Total: 0']);
 
-    // Resume rendering
-    expect(Scheduler).toFlushAndYield(['Total: 11']);
-    expect(ReactNoop.getChildren()).toEqual([span('Total: 11')]);
+      // Resume rendering
+      expect(Scheduler).toFlushAndYield(['Total: 11']);
+      expect(ReactNoop.getChildren()).toEqual([span('Total: 11')]);
+    });
   });
 
   it('throws inside class components', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
index 9c9490085147..a16df14067de 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalScheduling-test.js
@@ -230,7 +230,7 @@ describe('ReactIncrementalScheduling', () => {
       state = {tick: 0};
 
       componentDidMount() {
-        ReactNoop.deferredUpdates(() => {
+        React.startTransition(() => {
           Scheduler.unstable_yieldValue(
             'componentDidMount (before setState): ' + this.state.tick,
           );
@@ -242,7 +242,7 @@ describe('ReactIncrementalScheduling', () => {
       }
 
       componentDidUpdate() {
-        ReactNoop.deferredUpdates(() => {
+        React.startTransition(() => {
           Scheduler.unstable_yieldValue(
             'componentDidUpdate: ' + this.state.tick,
           );
@@ -280,38 +280,21 @@ describe('ReactIncrementalScheduling', () => {
     expect(Scheduler).toFlushAndYield(['render: 1', 'componentDidUpdate: 1']);
     expect(ReactNoop).toMatchRenderedOutput(<span prop={1} />);
 
-    // Increment the tick to 2. This will trigger an update inside cDU. Flush
-    // the first update without flushing the second one.
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.startTransition(() => {
-        instance.setState({tick: 2});
-      });
-
-      // TODO: why does this flush sync?
-      expect(Scheduler).toFlushAndYieldThrough([
-        'render: 2',
-        'componentDidUpdate: 2',
-        'componentDidUpdate (before setState): 2',
-        'componentDidUpdate (after setState): 2',
-        'render: 3',
-        'componentDidUpdate: 3',
-      ]);
-      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
-    } else {
+    React.startTransition(() => {
       instance.setState({tick: 2});
+    });
 
-      expect(Scheduler).toFlushAndYieldThrough([
-        'render: 2',
-        'componentDidUpdate: 2',
-        'componentDidUpdate (before setState): 2',
-        'componentDidUpdate (after setState): 2',
-      ]);
-      expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
-
-      // Now flush the cDU update.
-      expect(Scheduler).toFlushAndYield(['render: 3', 'componentDidUpdate: 3']);
-      expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
-    }
+    expect(Scheduler).toFlushUntilNextPaint([
+      'render: 2',
+      'componentDidUpdate: 2',
+      'componentDidUpdate (before setState): 2',
+      'componentDidUpdate (after setState): 2',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={2} />);
+
+    // Now flush the cDU update.
+    expect(Scheduler).toFlushAndYield(['render: 3', 'componentDidUpdate: 3']);
+    expect(ReactNoop).toMatchRenderedOutput(<span prop={3} />);
   });
 
   it('performs Task work even after time runs out', () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index 200d6453010b..b507076e9e91 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -196,11 +196,13 @@ describe('ReactIncrementalUpdates', () => {
       // 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.
-      // TODO: should d, e, f be flushed again first?
       expect(Scheduler).toFlushAndYield([
+        // Since 'g' is in a transition, we'll process 'd' separately first.
+        // That causes us to process 'd' with 'e' and 'f' rebased.
         'd',
         'e',
         'f',
+        // Then we'll re-process everything for 'g'.
         'a',
         'b',
         'c',
@@ -290,8 +292,6 @@ describe('ReactIncrementalUpdates', () => {
       });
 
       // The sync updates should have flushed, but not the async ones.
-      // TODO: should 'd' have flushed?
-      // TODO: should 'f' have flushed? I don't know what enqueueReplaceState is.
       expect(Scheduler).toHaveYielded(['e', 'f']);
       expect(ReactNoop.getChildren()).toEqual([span('f')]);
 
@@ -299,9 +299,12 @@ describe('ReactIncrementalUpdates', () => {
       // they should be processed again, to ensure that the terminal state
       // is deterministic.
       expect(Scheduler).toFlushAndYield([
+        // Since 'g' is in a transition, we'll process 'd' separately first.
+        // That causes us to process 'd' with 'e' and 'f' rebased.
         'd',
         'e',
         'f',
+        // Then we'll re-process everything for 'g'.
         'a',
         'b',
         'c',

From 3f62dec84aba5d7ae6dfc73d68752254e8f06384 Mon Sep 17 00:00:00 2001
From: Deniz Susman <susmandeniz@gmail.com>
Date: Mon, 19 Jul 2021 23:19:52 +0200
Subject: [PATCH 0709/1603] Typo fix (#21729)

emitted instead of emmitted
---
 packages/react-server/src/ReactFizzServer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 95074071da1d..47a0d23fd738 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1612,7 +1612,7 @@ function flushSegment(
     // Assign an ID to refer to the future content by.
     boundary.rootSegmentID = request.nextSegmentId++;
     if (boundary.completedSegments.length > 0) {
-      // If this is at least partially complete, we can queue it to be partially emmitted early.
+      // If this is at least partially complete, we can queue it to be partially emitted early.
       request.partialBoundaries.push(boundary);
     }
 

From 5c6543771b7fe7ca37ab4b4419a7f873e0849cfb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 20 Jul 2021 18:39:57 -0400
Subject: [PATCH 0710/1603] Fix global reference to Promise (#21926)

Referencing Promise without a type check will throw in environments
where Promise is not defined.

We will follow up with a lint rule that restricts access to all globals
except in dedicated module indirections.
---
 packages/react-dom/src/client/ReactDOMHostConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 43f507793261..74877c1591e7 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -392,7 +392,7 @@ export const scheduleTimeout: any =
 export const cancelTimeout: any =
   typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
 export const noTimeout = -1;
-const localPromise = Promise;
+const localPromise = typeof Promise === 'function' ? Promise : undefined;
 
 // -------------------
 //     Microtasks

From 9ab90de602357407fb03a27715b61761a258a8c4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 20 Jul 2021 19:05:16 -0400
Subject: [PATCH 0711/1603] Clean-up: Move Offscreen logic from Suspense fiber
 (#21925)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Much of the visibility-toggling logic is shared between the Suspense and
Offscreen types, but there is some duplicated code that exists in both.
Specifically, when a Suspense fiber's state switches from suspended to
resolved, we schedule an effect on the parent Suspense fiber, rather
than the inner Offscreen fiber. Then in the commit phase, the Suspense
fiber is responsible for committing the visibility effect on Offscreen.

There two main reasons we implemented it this way, neither of which
apply any more:

- The inner Offscreen fiber that wraps around the Suspense children used
  to be conditionally added only when the boundary was in its fallback
  state. So when toggling back to visible, there was no inner fiber to
  handle the visibility effect. This is no longer the case — the
  primary children are always wrapped in an Offscreen fiber.
- When the Suspense fiber is in its fallback state, the inner Offscreen
  fiber does not have a complete phase, because we bail out of
  rendering that tree. In the old effects list implementation, that
  meant the Offscreen fiber did not get added to the effect list, so
  it didn't have a commit phase. In the new recursive effects
  implementation, there's no list to maintain. Marking a flag on the
  inner fiber is sufficient to schedule a commit effect.

Given that these are no relevant, I was able to remove a lot of old
code and shift more of the logic out of the Suspense implementation
and into the Offscreen implementation so that it is shared by both.
(Being able to share the implementaiton like this was in fact one of
the reasons we stopped conditionally removing the inner
Offscreen fiber.)

As a bonus, this happens to fix a TODO in the Offscreen implementation
for persistent (Fabric) mode, where newly inserted nodes inside an
already hidden tree must also be hidden. Though we'll still need to
make this work in mutation (DOM) mode, too.
---
 .../src/ReactFiberCommitWork.new.js           |  28 +----
 .../src/ReactFiberCommitWork.old.js           |  28 +----
 .../src/ReactFiberCompleteWork.new.js         | 114 ++++++------------
 .../src/ReactFiberCompleteWork.old.js         | 114 ++++++------------
 .../src/__tests__/ReactOffscreen-test.js      |  48 +++++---
 5 files changed, 106 insertions(+), 226 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 99161bd97f48..a68e489dccc9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2121,34 +2121,12 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
       case SuspenseComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        const current = finishedWork.alternate;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const offscreenBoundary: Fiber = (finishedWork.child: any);
-
         if (isHidden) {
+          const current = finishedWork.alternate;
+          const wasHidden = current !== null && current.memoizedState !== null;
           if (!wasHidden) {
+            // TODO: Move to passive phase
             markCommitTimeOfFallback();
-            if (supportsMutation) {
-              hideOrUnhideAllChildren(offscreenBoundary, true);
-            }
-            if (
-              enableSuspenseLayoutEffectSemantics &&
-              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
-            ) {
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
-              }
-            }
-          }
-        } else {
-          if (wasHidden) {
-            if (supportsMutation) {
-              hideOrUnhideAllChildren(offscreenBoundary, false);
-            }
-            // TODO: Move re-appear call here for symmetry?
           }
         }
         break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 8fcdb5920756..aea3e36ed09d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2121,34 +2121,12 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
       case SuspenseComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        const current = finishedWork.alternate;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const offscreenBoundary: Fiber = (finishedWork.child: any);
-
         if (isHidden) {
+          const current = finishedWork.alternate;
+          const wasHidden = current !== null && current.memoizedState !== null;
           if (!wasHidden) {
+            // TODO: Move to passive phase
             markCommitTimeOfFallback();
-            if (supportsMutation) {
-              hideOrUnhideAllChildren(offscreenBoundary, true);
-            }
-            if (
-              enableSuspenseLayoutEffectSemantics &&
-              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
-            ) {
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
-              }
-            }
-          }
-        } else {
-          if (wasHidden) {
-            if (supportsMutation) {
-              hideOrUnhideAllChildren(offscreenBoundary, false);
-            }
-            // TODO: Move re-appear call here for symmetry?
           }
         }
         break;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index c919f1522246..32b9587f2631 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -324,37 +324,17 @@ if (supportsMutation) {
         // 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 === SuspenseComponent) {
-        if ((node.flags & Visibility) !== NoFlags) {
-          // Need to toggle the visibility of the primary children.
-          const newIsHidden = node.memoizedState !== null;
-          if (newIsHidden) {
-            const primaryChildParent = node.child;
-            if (primaryChildParent !== null) {
-              if (primaryChildParent.child !== null) {
-                primaryChildParent.child.return = primaryChildParent;
-                appendAllChildren(
-                  parent,
-                  primaryChildParent,
-                  true,
-                  newIsHidden,
-                );
-              }
-              const fallbackChildParent = primaryChildParent.sibling;
-              if (fallbackChildParent !== null) {
-                fallbackChildParent.return = node;
-                node = fallbackChildParent;
-                continue;
-              }
-            }
-          }
-        }
-        if (node.child !== null) {
-          // Continue traversing like normal
-          node.child.return = node;
-          node = node.child;
-          continue;
+      } 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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -409,37 +389,17 @@ if (supportsMutation) {
         // 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 === SuspenseComponent) {
-        if ((node.flags & Visibility) !== NoFlags) {
-          // Need to toggle the visibility of the primary children.
-          const newIsHidden = node.memoizedState !== null;
-          if (newIsHidden) {
-            const primaryChildParent = node.child;
-            if (primaryChildParent !== null) {
-              if (primaryChildParent.child !== null) {
-                primaryChildParent.child.return = primaryChildParent;
-                appendAllChildrenToContainer(
-                  containerChildSet,
-                  primaryChildParent,
-                  true,
-                  newIsHidden,
-                );
-              }
-              const fallbackChildParent = primaryChildParent.sibling;
-              if (fallbackChildParent !== null) {
-                fallbackChildParent.return = node;
-                node = fallbackChildParent;
-                continue;
-              }
-            }
-          }
-        }
-        if (node.child !== null) {
-          // Continue traversing like normal
-          node.child.return = node;
-          node = node.child;
-          continue;
+      } 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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -1056,7 +1016,21 @@ function completeWork(
         prevDidTimeout = prevState !== null;
       }
 
+      // 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 && !prevDidTimeout) {
+        const offscreenFiber: Fiber = (workInProgress.child: any);
+        offscreenFiber.flags |= Visibility;
+
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
@@ -1096,26 +1070,6 @@ function completeWork(
         workInProgress.flags |= Update;
       }
 
-      if (supportsMutation) {
-        if (nextDidTimeout !== prevDidTimeout) {
-          // In mutation mode, visibility is toggled by mutating the nearest
-          // host nodes whenever they switch from hidden -> visible or vice
-          // versa. We don't need to switch when the boundary updates but its
-          // visibility hasn't changed.
-          workInProgress.flags |= Visibility;
-        }
-      }
-      if (supportsPersistence) {
-        if (nextDidTimeout) {
-          // In persistent mode, visibility is toggled by cloning the nearest
-          // host nodes in the complete phase whenever the boundary is hidden.
-          // TODO: The plan is to add a transparent host wrapper (no layout)
-          // around the primary children and hide that node. Then we don't need
-          // to do the funky cloning business.
-          workInProgress.flags |= Visibility;
-        }
-      }
-
       if (
         enableSuspenseCallback &&
         workInProgress.updateQueue !== null &&
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 59d72380dbee..60359fd42d8d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -324,37 +324,17 @@ if (supportsMutation) {
         // 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 === SuspenseComponent) {
-        if ((node.flags & Visibility) !== NoFlags) {
-          // Need to toggle the visibility of the primary children.
-          const newIsHidden = node.memoizedState !== null;
-          if (newIsHidden) {
-            const primaryChildParent = node.child;
-            if (primaryChildParent !== null) {
-              if (primaryChildParent.child !== null) {
-                primaryChildParent.child.return = primaryChildParent;
-                appendAllChildren(
-                  parent,
-                  primaryChildParent,
-                  true,
-                  newIsHidden,
-                );
-              }
-              const fallbackChildParent = primaryChildParent.sibling;
-              if (fallbackChildParent !== null) {
-                fallbackChildParent.return = node;
-                node = fallbackChildParent;
-                continue;
-              }
-            }
-          }
-        }
-        if (node.child !== null) {
-          // Continue traversing like normal
-          node.child.return = node;
-          node = node.child;
-          continue;
+      } 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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -409,37 +389,17 @@ if (supportsMutation) {
         // 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 === SuspenseComponent) {
-        if ((node.flags & Visibility) !== NoFlags) {
-          // Need to toggle the visibility of the primary children.
-          const newIsHidden = node.memoizedState !== null;
-          if (newIsHidden) {
-            const primaryChildParent = node.child;
-            if (primaryChildParent !== null) {
-              if (primaryChildParent.child !== null) {
-                primaryChildParent.child.return = primaryChildParent;
-                appendAllChildrenToContainer(
-                  containerChildSet,
-                  primaryChildParent,
-                  true,
-                  newIsHidden,
-                );
-              }
-              const fallbackChildParent = primaryChildParent.sibling;
-              if (fallbackChildParent !== null) {
-                fallbackChildParent.return = node;
-                node = fallbackChildParent;
-                continue;
-              }
-            }
-          }
-        }
-        if (node.child !== null) {
-          // Continue traversing like normal
-          node.child.return = node;
-          node = node.child;
-          continue;
+      } 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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -1056,7 +1016,21 @@ function completeWork(
         prevDidTimeout = prevState !== null;
       }
 
+      // 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 && !prevDidTimeout) {
+        const offscreenFiber: Fiber = (workInProgress.child: any);
+        offscreenFiber.flags |= Visibility;
+
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
@@ -1096,26 +1070,6 @@ function completeWork(
         workInProgress.flags |= Update;
       }
 
-      if (supportsMutation) {
-        if (nextDidTimeout !== prevDidTimeout) {
-          // In mutation mode, visibility is toggled by mutating the nearest
-          // host nodes whenever they switch from hidden -> visible or vice
-          // versa. We don't need to switch when the boundary updates but its
-          // visibility hasn't changed.
-          workInProgress.flags |= Visibility;
-        }
-      }
-      if (supportsPersistence) {
-        if (nextDidTimeout) {
-          // In persistent mode, visibility is toggled by cloning the nearest
-          // host nodes in the complete phase whenever the boundary is hidden.
-          // TODO: The plan is to add a transparent host wrapper (no layout)
-          // around the primary children and hide that node. Then we don't need
-          // to do the funky cloning business.
-          workInProgress.flags |= Visibility;
-        }
-      }
-
       if (
         enableSuspenseCallback &&
         workInProgress.updateQueue !== null &&
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 327e72fdc972..2915b1e769f0 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -201,10 +201,14 @@ describe('ReactOffscreen', () => {
     });
     // No layout effect.
     expect(Scheduler).toHaveYielded(['Child']);
-    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
-    // it should only be used inside a host component wrapper whose visibility
-    // is toggled simultaneously.
-    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    if (gate(flags => flags.persistent)) {
+      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+    } else {
+      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
+      // mode. Until we do, it should only be used inside a host component
+      // wrapper whose visibility is toggled simultaneously.
+      expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    }
 
     // Unhide the tree. The layout effect is mounted.
     await act(async () => {
@@ -251,10 +255,14 @@ describe('ReactOffscreen', () => {
       );
     });
     expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
-    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
-    // it should only be used inside a host component wrapper whose visibility
-    // is toggled simultaneously.
-    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    if (gate(flags => flags.persistent)) {
+      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+    } else {
+      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
+      // mode. Until we do, it should only be used inside a host component
+      // wrapper whose visibility is toggled simultaneously.
+      expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    }
 
     // Unhide the tree. The layout effect is re-mounted.
     await act(async () => {
@@ -291,10 +299,14 @@ describe('ReactOffscreen', () => {
       );
     });
     expect(Scheduler).toHaveYielded(['Child']);
-    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
-    // it should only be used inside a host component wrapper whose visibility
-    // is toggled simultaneously.
-    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    if (gate(flags => flags.persistent)) {
+      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+    } else {
+      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
+      // mode. Until we do, it should only be used inside a host component
+      // wrapper whose visibility is toggled simultaneously.
+      expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    }
 
     // Show the tree. The layout effect is mounted.
     await act(async () => {
@@ -316,9 +328,13 @@ describe('ReactOffscreen', () => {
       );
     });
     expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
-    // TODO: Offscreen does not yet hide/unhide children correctly. Until we do,
-    // it should only be used inside a host component wrapper whose visibility
-    // is toggled simultaneously.
-    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    if (gate(flags => flags.persistent)) {
+      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+    } else {
+      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
+      // mode. Until we do, it should only be used inside a host component
+      // wrapper whose visibility is toggled simultaneously.
+      expect(root).toMatchRenderedOutput(<span prop="Child" />);
+    }
   });
 });

From 25f09e3e4e900fc5d510243ce9ed3272d0af59e7 Mon Sep 17 00:00:00 2001
From: Lucas Correia <tsirlucas@gmail.com>
Date: Wed, 21 Jul 2021 13:16:08 -0300
Subject: [PATCH 0712/1603] DevTools: Parse named source AST in a worker
 (#21902)

Resolves #21855

Ended up using workerize in order to setup the worker once it allows easy imports (for babel's parse function) and exports.
---
 .../firefox/manifest.json                     |   2 +-
 .../react-devtools-extensions/package.json    |   5 +-
 .../src/__tests__/parseHookNames-test.js      | 131 +++++++++++++-----
 .../src/parseHookNames/index.js               |  33 +++++
 .../{ => parseHookNames}/parseHookNames.js    |  17 ++-
 .../parseHookNames/parseHookNames.worker.js   |   4 +
 .../webpack.config.js                         |   5 +
 .../src/hookNamesCache.js                     |   2 +-
 yarn.lock                                     |   7 +
 9 files changed, 161 insertions(+), 45 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/parseHookNames/index.js
 rename packages/react-devtools-extensions/src/{ => parseHookNames}/parseHookNames.js (98%)
 create mode 100644 packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js

diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index a97422cedf86..44327c8566f7 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -32,7 +32,7 @@
 
   "devtools_page": "main.html",
 
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "content_security_policy": "script-src 'self' 'unsafe-eval' blob:; object-src 'self'",
   "web_accessible_resources": [
     "main.html",
     "panel.html",
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index da473f7613a6..4cb68ea8973a 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -19,7 +19,6 @@
     "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {
-    "acorn-jsx": "^5.2.0",
     "@babel/core": "^7.11.1",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-transform-flow-strip-types": "^7.10.4",
@@ -28,6 +27,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "acorn-jsx": "^5.2.0",
     "archiver": "^3.0.0",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
@@ -55,7 +55,8 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "workerize-loader": "^1.3.0"
   },
   "dependencies": {
     "web-ext": "^4"
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 0b10ffee2bee..67e57871e4a1 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -11,6 +11,37 @@
 // 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}"`);
+  }
+}
+
+const chromeGlobal = {
+  extension: {
+    getURL: jest.fn((...args) => {
+      const {join} = require('path');
+      return join(
+        __dirname,
+        '..',
+        '..',
+        'node_modules',
+        'source-map',
+        'lib',
+        'mappings.wasm',
+      );
+    }),
+  },
+};
+
 describe('parseHookNames', () => {
   let fetchMock;
   let inspectHooks;
@@ -26,6 +57,9 @@ describe('parseHookNames', () => {
     fetchMock = require('jest-fetch-mock');
     fetchMock.enableMocks();
 
+    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
+    global.chrome = chromeGlobal;
+
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
     parseHookNames = require('../parseHookNames').parseHookNames;
@@ -45,44 +79,12 @@ describe('parseHookNames', () => {
     fetchMock.mockIf(/.+$/, request => {
       return requireText(request.url, 'utf8');
     });
-
-    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
-    global.chrome = {
-      extension: {
-        getURL: jest.fn((...args) => {
-          const {join} = require('path');
-          return join(
-            __dirname,
-            '..',
-            '..',
-            'node_modules',
-            'source-map',
-            'lib',
-            'mappings.wasm',
-          );
-        }),
-      },
-    };
   });
 
   afterEach(() => {
     fetch.resetMocks();
   });
 
-  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}"`);
-    }
-  }
-
   async function getHookNamesForComponent(Component, props = {}) {
     const hooksTree = inspectHooks(Component, props, undefined, true);
     const hookNames = await parseHookNames(hooksTree);
@@ -344,3 +346,68 @@ describe('parseHookNames', () => {
     });
   });
 });
+
+describe('parseHookNames worker', () => {
+  let inspectHooks;
+  let parseHookNames;
+  let originalParseHookNamesMock;
+  let workerizedParseHookNamesMock;
+
+  beforeEach(() => {
+    window.Worker = undefined;
+
+    originalParseHookNamesMock = jest.fn();
+    workerizedParseHookNamesMock = jest.fn();
+
+    jest.mock('../parseHookNames/parseHookNames.js', () => {
+      return {
+        __esModule: true,
+        parseHookNames: originalParseHookNamesMock,
+      };
+    });
+
+    jest.mock('../parseHookNames/parseHookNames.worker.js', () => {
+      return {
+        __esModule: true,
+        default: () => ({
+          parseHookNames: workerizedParseHookNamesMock,
+        }),
+      };
+    });
+
+    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
+    global.chrome = chromeGlobal;
+
+    inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
+      .inspectHooks;
+    parseHookNames = require('../parseHookNames').parseHookNames;
+  });
+
+  async function getHookNamesForComponent(Component, props = {}) {
+    const hooksTree = inspectHooks(Component, props, undefined, true);
+    const hookNames = await parseHookNames(hooksTree);
+    return hookNames;
+  }
+
+  it('should use worker when available', async () => {
+    const Component = require('./__source__/__untransformed__/ComponentWithUseState')
+      .Component;
+
+    window.Worker = true;
+    // resets module so mocked worker instance can be updated
+    jest.resetModules();
+    parseHookNames = require('../parseHookNames').parseHookNames;
+
+    await getHookNamesForComponent(Component);
+    expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(1);
+  });
+
+  it('should use main thread when worker is not available', async () => {
+    const Component = require('./__source__/__untransformed__/ComponentWithUseState')
+      .Component;
+
+    await getHookNamesForComponent(Component);
+    expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(0);
+    expect(originalParseHookNamesMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js
new file mode 100644
index 000000000000..da864aa27085
--- /dev/null
+++ b/packages/react-devtools-extensions/src/parseHookNames/index.js
@@ -0,0 +1,33 @@
+/* global chrome */
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// This file uses workerize to load ./parseHookNames.worker as a webworker
+// and instanciates it, exposing flow typed functions that can be used
+// on other files.
+
+import * as parseHookNamesModule from './parseHookNames';
+import WorkerizedParseHookNames from './parseHookNames.worker';
+
+type ParseHookNamesModule = typeof parseHookNamesModule;
+
+// $FlowFixMe
+const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
+
+const workerizedParseHookNames: ParseHookNamesModule = window.Worker
+  ? WorkerizedParseHookNames()
+  : parseHookNamesModule;
+
+type ParseHookNames = $PropertyType<ParseHookNamesModule, 'parseHookNames'>;
+
+export const parseHookNames: ParseHookNames = hooksTree =>
+  workerizedParseHookNames.parseHookNames(hooksTree, wasmMappingsURL);
+
+export const purgeCachedMetadata = workerizedParseHookNames.purgeCachedMetadata;
diff --git a/packages/react-devtools-extensions/src/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
similarity index 98%
rename from packages/react-devtools-extensions/src/parseHookNames.js
rename to packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 73745c6be3a1..f68c37135b8b 100644
--- a/packages/react-devtools-extensions/src/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -1,5 +1,3 @@
-/* global chrome */
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -12,8 +10,8 @@
 import {parse} from '@babel/parser';
 import LRU from 'lru-cache';
 import {SourceMapConsumer} from 'source-map';
-import {getHookName} from './astUtils';
-import {areSourceMapsAppliedToErrors} from './ErrorTester';
+import {getHookName} from '../astUtils';
+import {areSourceMapsAppliedToErrors} from '../ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 
@@ -24,7 +22,7 @@ import type {
 } from 'react-debug-tools/src/ReactDebugHooks';
 import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
 import type {Thenable} from 'shared/ReactTypes';
-import type {SourceConsumer} from './astUtils';
+import type {SourceConsumer} from '../astUtils';
 
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const MAX_SOURCE_LENGTH = 100_000_000;
@@ -103,6 +101,7 @@ const originalURLToMetadataCache: LRUCache<
 
 export async function parseHookNames(
   hooksTree: HooksTree,
+  wasmMappingsURL: string,
 ): Thenable<HookNames | null> {
   const hooksList: Array<HooksNode> = [];
   flattenHooksList(hooksTree, hooksList);
@@ -160,7 +159,9 @@ export async function parseHookNames(
   }
 
   return loadSourceFiles(locationKeyToHookSourceData)
-    .then(() => extractAndLoadSourceMaps(locationKeyToHookSourceData))
+    .then(() =>
+      extractAndLoadSourceMaps(locationKeyToHookSourceData, wasmMappingsURL),
+    )
     .then(() => parseSourceAST(locationKeyToHookSourceData))
     .then(() => updateLruCache(locationKeyToHookSourceData))
     .then(() => findHookNames(hooksList, locationKeyToHookSourceData));
@@ -182,6 +183,7 @@ function decodeBase64String(encoded: string): Object {
 
 function extractAndLoadSourceMaps(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
+  wasmMappingsURL: string,
 ): Promise<*> {
   // SourceMapConsumer.initialize() does nothing when running in Node (aka Jest)
   // because the wasm file is automatically read from the file system
@@ -193,9 +195,6 @@ function extractAndLoadSourceMaps(
       );
     }
 
-    // $FlowFixMe
-    const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
-
     SourceMapConsumer.initialize({'lib/mappings.wasm': wasmMappingsURL});
   }
 
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
new file mode 100644
index 000000000000..7843527e4d96
--- /dev/null
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
@@ -0,0 +1,4 @@
+import * as parseHookNamesModule from './parseHookNames';
+
+export const parseHookNames = parseHookNamesModule.parseHookNames;
+export const purgeCachedMetadata = parseHookNamesModule.purgeCachedMetadata;
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 94a12ebdd111..3b89bf7355eb 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -109,6 +109,11 @@ module.exports = {
           },
         ],
       },
+      {
+        test: /\.worker\.js$/,
+        // inline: true due to limitations with extensions
+        use: {loader: 'workerize-loader', options: {inline: true}},
+      },
     ],
   },
 };
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index f385c7242852..070dafeb1d8e 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -18,7 +18,7 @@ import type {
 } from 'react-devtools-shared/src/types';
 import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
 
-const TIMEOUT = 5000;
+const TIMEOUT = 30000;
 
 const Pending = 0;
 const Resolved = 1;
diff --git a/yarn.lock b/yarn.lock
index c0bddfe82c64..03daa69ff812 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14877,6 +14877,13 @@ worker-loader@^3.0.2:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+workerize-loader@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/workerize-loader/-/workerize-loader-1.3.0.tgz#4995cf2ff2b45dd6dc60e4411e63f5ae2c704d36"
+  integrity sha512-utWDc8K6embcICmRBUUkzanPgKBb8yM1OHfh6siZfiMsswE8wLCa9CWS+L7AARz0+Th4KH4ZySrqer/OJ9WuWw==
+  dependencies:
+    loader-utils "^2.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"

From ae5d26154b1e206774533a8313221d309f273090 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 21 Jul 2021 13:34:08 -0400
Subject: [PATCH 0713/1603] Fix: LegacyHidden should not toggle effects
 (#21928)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

LegacyHidden is a transitional API that we added to replace the old
`<div hidden={true} />` API that we used to use for pre-rendering. The
plan is to replace this with the Offscreen component, once it's ready.

The idea is that LegacyHidden has identical behavior to Offscreen except
that it doesn't change the behavior of effects. (Which is basically how
`<div hidden={true} />` worked — it prerendered the hidden content in
the background, but nothing else.) That way, while we're rolling this
out, we could toggle the feature behind a feature flag either for
performance testing or as a kill switch.

It looks like we accidentally enabled the effects flag for both
Offscreen _and_ LegacyHidden. I suppose it's a good thing that nobody
has complained yet, since we eventually do want to ship this
behavior everywhere?

But I do think we should remove it from LegacyHidden, and roll it out by
gating the component type in the downstream repo. That way if there's an
issue related to the use of LegacyHidden, we can disable that without
disabling the behavior for Suspense boundaries.

In retrospect, I might have implemented this as an unstable prop on
Offscreen instead of a completely separate type — though at the time,
Offscreen didn't exist. I originally added LegacyHidden to unblock the
Lanes refactor, so I could move the deprioritization logic out of the
HostComponent implementation.

Not a big deal since we're going to remove this soon. The implementation
is almost the same regardless: before disconnecting or reconnecting
the effects, check the fiber tag. The rest of the logic is the same.
---
 .../src/ReactFiberCommitWork.new.js           | 36 +++++++-------
 .../src/ReactFiberCommitWork.old.js           | 36 +++++++-------
 .../src/ReactFiberCompleteWork.new.js         |  4 +-
 .../src/ReactFiberCompleteWork.old.js         |  4 +-
 .../src/__tests__/ReactOffscreen-test.js      | 48 +++++++++++++++++++
 5 files changed, 88 insertions(+), 40 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index a68e489dccc9..f9d9ad39999f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2131,8 +2131,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
         }
         break;
       }
-      case OffscreenComponent:
-      case LegacyHiddenComponent: {
+      case OffscreenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         const current = finishedWork.alternate;
@@ -2145,27 +2144,26 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);
         }
 
-        if (isHidden) {
-          if (!wasHidden) {
-            if (
-              enableSuspenseLayoutEffectSemantics &&
-              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
-            ) {
-              nextEffect = offscreenBoundary;
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
+                }
               }
             }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
+            }
           }
-        } else {
-          if (wasHidden) {
-            // TODO: Move re-appear call here for symmetry?
-          }
+          break;
         }
-        break;
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index aea3e36ed09d..60c230cd251b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2131,8 +2131,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
         }
         break;
       }
-      case OffscreenComponent:
-      case LegacyHiddenComponent: {
+      case OffscreenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         const current = finishedWork.alternate;
@@ -2145,27 +2144,26 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);
         }
 
-        if (isHidden) {
-          if (!wasHidden) {
-            if (
-              enableSuspenseLayoutEffectSemantics &&
-              (offscreenBoundary.mode & ConcurrentMode) !== NoMode
-            ) {
-              nextEffect = offscreenBoundary;
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
+                }
               }
             }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
+            }
           }
-        } else {
-          if (wasHidden) {
-            // TODO: Move re-appear call here for symmetry?
-          }
+          break;
         }
-        break;
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 32b9587f2631..b6feee098b4f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1361,7 +1361,9 @@ function completeWork(
         const prevIsHidden = prevState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
-          newProps.mode !== 'unstable-defer-without-hiding'
+          newProps.mode !== 'unstable-defer-without-hiding' &&
+          // LegacyHidden doesn't do any hiding — it only pre-renders.
+          workInProgress.tag !== LegacyHiddenComponent
         ) {
           workInProgress.flags |= Visibility;
         }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 60359fd42d8d..612ad2db52c9 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1361,7 +1361,9 @@ function completeWork(
         const prevIsHidden = prevState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
-          newProps.mode !== 'unstable-defer-without-hiding'
+          newProps.mode !== 'unstable-defer-without-hiding' &&
+          // LegacyHidden doesn't do any hiding — it only pre-renders.
+          workInProgress.tag !== LegacyHiddenComponent
         ) {
           workInProgress.flags |= Visibility;
         }
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 2915b1e769f0..9f9225fea3ba 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -337,4 +337,52 @@ describe('ReactOffscreen', () => {
       expect(root).toMatchRenderedOutput(<span prop="Child" />);
     }
   });
+
+  // @gate experimental || www
+  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.unstable_yieldValue('Mount layout');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+
+    await act(async () => {
+      root.render(
+        <LegacyHidden mode="hidden">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    await act(async () => {
+      root.render(
+        <LegacyHidden mode="visible">
+          <Child />
+        </LegacyHidden>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    await act(async () => {
+      root.render(null);
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout']);
+  });
 });

From f4161c3ec7d2ab2993695a458f771bb331e256d5 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 22 Jul 2021 13:58:57 -0400
Subject: [PATCH 0714/1603] [DRAFT] Import scheduling profiler into DevTools
 Profiler (#21897)

---
 .circleci/config.yml                          |  52 ------
 .../react-devtools-core/webpack.standalone.js |  33 +++-
 .../react-devtools-extensions/package.json    |   2 +-
 .../react-devtools-extensions/src/main.js     |   2 +
 .../src/parseHookNames/index.js               |   5 +-
 .../parseHookNames/parseHookNames.worker.js   |   7 +
 .../webpack.config.js                         |  38 +++--
 packages/react-devtools-inline/package.json   |   4 +-
 .../react-devtools-inline/src/frontend.js     |   1 +
 .../react-devtools-inline/webpack.config.js   |  33 +++-
 .../README.md                                 |  16 +-
 .../buildUtils.js                             |  36 ----
 .../package.json                              |   6 +-
 .../src/App.css                               |  19 ---
 .../src/App.js                                |  34 ----
 .../src/CanvasPage.css                        |   8 +-
 .../src/CanvasPage.js                         |  17 +-
 .../src/EventTooltip.css                      |  17 +-
 .../src/ImportButton.js                       |   5 +-
 .../src/SchedulingProfiler.css                |  75 ++-------
 .../src/SchedulingProfiler.js                 | 146 ++++++++--------
 .../src/SchedulingProfilerContext.js          |  62 +++++++
 .../src/assets/logo.svg                       |   1 -
 .../src/assets/profilerBrowser.png            | Bin 77466 -> 0 bytes
 .../src/assets/reactlogo.svg                  |   7 -
 .../src/content-views/FlamechartView.js       |   2 +-
 .../src/content-views/constants.js            | 157 ++++++++++++++----
 .../src/context/ContextMenu.css               |  10 --
 .../src/context/ContextMenu.js                | 143 ----------------
 .../src/context/ContextMenuItem.css           |  20 ---
 .../src/context/ContextMenuItem.js            |  40 -----
 .../src/context/Contexts.js                   |  87 ----------
 .../src/context/index.js                      |  15 --
 .../src/context/useContextMenu.js             |  52 ------
 .../src/createDataResourceFromImportedFile.js |  46 +++++
 .../src/hooks.js                              |  71 --------
 .../{import.worker.js => importFile.js}       |  29 +---
 .../importFile.worker.js}                     |   6 +-
 .../src/import-worker/index.js                |  31 ++++
 .../src/index.css                             |  21 ---
 .../src/index.js                              |  31 ----
 .../src/view-base/ResizableSplitView.js       |  22 ++-
 .../src/view-base/useCanvasInteraction.js     |   9 +-
 .../vercel.json                               |   3 -
 .../webpack.config.js                         | 128 --------------
 .../src/devtools/ContextMenu/ContextMenu.css  |   2 +
 .../src/devtools/ContextMenu/ContextMenu.js   |  20 +--
 .../src/devtools/ContextMenu/Contexts.js      |  39 +++--
 .../devtools/ContextMenu/useContextMenu.js    |   8 +-
 .../src/devtools/store.js                     |  10 ++
 .../Components/InspectedElementHooksTree.js   |  24 +--
 .../src/devtools/views/DevTools.js            |  59 ++++---
 .../src/devtools/views/Icon.js                |   9 +
 .../src/devtools/views/Profiler/Profiler.js   |  29 +++-
 .../views/Profiler/ProfilerContext.js         |   3 +-
 .../Profiler/ProfilingImportExportButtons.js  |  31 +++-
 .../views/Settings/SettingsContext.js         | 138 ++++++++++++++-
 .../src/devtools/views/TabBar.css             |   8 +
 .../src/devtools/views/TabBar.js              |  15 +-
 .../src/devtools/views/Tooltip.css            |   1 +
 .../src/devtools/views/root.css               |  60 ++++++-
 .../src/hookNamesCache.js                     |   9 +-
 yarn.lock                                     |  45 +++++
 63 files changed, 931 insertions(+), 1128 deletions(-)
 delete mode 100644 packages/react-devtools-scheduling-profiler/buildUtils.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/App.css
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/App.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/assets/logo.svg
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/assets/profilerBrowser.png
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/context/ContextMenu.css
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/context/ContextMenu.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.css
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/context/Contexts.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/context/index.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/context/useContextMenu.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/hooks.js
 rename packages/react-devtools-scheduling-profiler/src/import-worker/{import.worker.js => importFile.js} (65%)
 rename packages/react-devtools-scheduling-profiler/src/{SchedulingProfilerFeatureFlags.js => import-worker/importFile.worker.js} (64%)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/import-worker/index.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/index.css
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/index.js
 delete mode 100644 packages/react-devtools-scheduling-profiler/vercel.json
 delete mode 100644 packages/react-devtools-scheduling-profiler/webpack.config.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a1b1fa1cb49e..efa35f94501d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -227,48 +227,6 @@ jobs:
       - store_artifacts:
           path: ./build/devtools.tgz
 
-  build_devtools_scheduling_profiler:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_yarn_cache
-      - *restore_node_modules
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
-      - run:
-          name: Build and archive
-          command: |
-            mkdir -p build/devtools
-            cd packages/react-devtools-scheduling-profiler
-            yarn build
-            cd dist
-            tar -zcvf ../../../build/devtools-scheduling-profiler.tgz .
-      - store_artifacts:
-          path: ./build/devtools-scheduling-profiler.tgz
-      - persist_to_workspace:
-          root: packages/react-devtools-scheduling-profiler
-          paths:
-            - dist
-
-  deploy_devtools_scheduling_profiler:
-    docker: *docker
-    environment: *environment
-    steps:
-      - checkout
-      - attach_workspace:
-          at: packages/react-devtools-scheduling-profiler
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          name: Deploy
-          command: |
-            cd packages/react-devtools-scheduling-profiler
-            yarn vercel deploy dist --prod --confirm --token $SCHEDULING_PROFILER_DEPLOY_VERCEL_TOKEN
-
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -408,16 +366,6 @@ workflows:
       - build_devtools_and_process_artifacts:
           requires:
             - yarn_build
-      - build_devtools_scheduling_profiler:
-          requires:
-            - yarn_build
-      - deploy_devtools_scheduling_profiler:
-          requires:
-            - build_devtools_scheduling_profiler
-          filters:
-            branches:
-              only:
-                - main
 
   # New workflow that will replace "stable" and "experimental"
   build_and_test:
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 8f5b4e6dcac9..4d1f8544047c 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -18,6 +18,15 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
@@ -62,17 +71,25 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              inline: true,
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 4cb68ea8973a..4600dde3f7c4 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -37,6 +37,7 @@
     "chrome-launch": "^1.1.4",
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
     "firefox-profile": "^1.0.2",
     "fs-extra": "^4.0.2",
     "jest-fetch-mock": "^3.0.3",
@@ -52,7 +53,6 @@
     "source-map": "^0.8.0-beta.0",
     "sourcemap-codec": "^1.4.8",
     "style-loader": "^0.23.1",
-    "web-ext": "^3.0.0",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.10.3",
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index b3b2581eda3a..514e48514d78 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -140,6 +140,8 @@ function createPanelIfReactLoaded() {
           isProfiling,
           supportsReloadAndProfile: isChrome,
           supportsProfiling,
+          // At this time, the scheduling profiler can only parse Chrome performance profiles.
+          supportsSchedulingProfiler: isChrome,
           supportsTraceUpdates: true,
         });
         store.profilerStore.profilingData = profilingData;
diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js
index da864aa27085..ed178c3f200b 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/index.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/index.js
@@ -9,9 +9,8 @@
  * @flow
  */
 
-// This file uses workerize to load ./parseHookNames.worker as a webworker
-// and instanciates it, exposing flow typed functions that can be used
-// on other files.
+// This file uses workerize to load ./parseHookNames.worker as a webworker and instanciates it,
+// exposing flow typed functions that can be used on other files.
 
 import * as parseHookNamesModule from './parseHookNames';
 import WorkerizedParseHookNames from './parseHookNames.worker';
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
index 7843527e4d96..c89f11a55db2 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
@@ -1,3 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import * as parseHookNamesModule from './parseHookNames';
 
 export const parseHookNames = parseHookNamesModule.parseHookNames;
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 3b89bf7355eb..b3a92762ae6c 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -19,6 +19,15 @@ const DEVTOOLS_VERSION = getVersionString();
 
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
+const babelOptions = {
+  configFile: resolve(
+    __dirname,
+    '..',
+    'react-devtools-shared',
+    'babel.config.js',
+  ),
+};
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-module-eval-source-map' : false,
@@ -81,17 +90,25 @@ module.exports = {
     ],
 
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              inline: true,
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,
@@ -109,11 +126,6 @@ module.exports = {
           },
         ],
       },
-      {
-        test: /\.worker\.js$/,
-        // inline: true due to limitations with extensions
-        use: {loader: 'workerize-loader', options: {inline: true}},
-      },
     ],
   },
 };
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index a661fdf83995..21efaf2bbd9a 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -34,10 +34,12 @@
     "babel-loader": "^8.0.4",
     "cross-env": "^3.1.4",
     "css-loader": "^1.0.1",
+    "file-loader": "^6.1.0",
     "raw-loader": "^3.1.0",
     "style-loader": "^0.23.1",
     "webpack": "^4.43.0",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "worker-loader": "^3.0.3"
   }
 }
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index af4b0330d75f..d9645999b3f0 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -24,6 +24,7 @@ export function createStore(bridge: FrontendBridge): Store {
   return new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
+    supportsSchedulingProfiler: true,
   });
 }
 
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 7011e7151c76..040cc629b822 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -16,6 +16,15 @@ const __DEV__ = NODE_ENV === 'development';
 
 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',
@@ -65,17 +74,25 @@ module.exports = {
   ],
   module: {
     rules: [
+      {
+        test: /\.worker\.js$/,
+        use: [
+          {
+            loader: 'workerize-loader',
+            options: {
+              inline: true,
+            },
+          },
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
+          },
+        ],
+      },
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        options: babelOptions,
       },
       {
         test: /\.css$/,
diff --git a/packages/react-devtools-scheduling-profiler/README.md b/packages/react-devtools-scheduling-profiler/README.md
index 5ce54a3d7ea2..457bec25efcf 100644
--- a/packages/react-devtools-scheduling-profiler/README.md
+++ b/packages/react-devtools-scheduling-profiler/README.md
@@ -1,15 +1,3 @@
-# Experimental React Concurrent Mode Profiler
+# React Concurrent Mode Profiler
 
-https://react-devtools-scheduling-profiler.vercel.app/
-
-## Setting up continuous deployment with CircleCI and Vercel
-
-These instructions are intended for internal use, but may be useful if you are setting up a custom production deployment of the scheduling profiler.
-
-1. Create a Vercel token at https://vercel.com/account/tokens.
-2. Configure CircleCI:
-    1. In CircleCI, navigate to the repository's Project Settings.
-    2. In the Advanced tab, ensure that "Pass secrets to builds from forked pull requests" is set to false.
-    3. In the Environment Variables tab, add the Vercel token as a new `SCHEDULING_PROFILER_DEPLOY_VERCEL_TOKEN` environment variable.
-
-The Vercel project will be created when the deploy job runs.
+This package contains the new/experimental "scheduling profiler" 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-scheduling-profiler/buildUtils.js b/packages/react-devtools-scheduling-profiler/buildUtils.js
deleted file mode 100644
index b0971c486111..000000000000
--- a/packages/react-devtools-scheduling-profiler/buildUtils.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const {execSync} = require('child_process');
-const {readFileSync} = require('fs');
-const {resolve} = require('path');
-
-function getGitCommit() {
-  try {
-    return execSync('git show -s --format=%h')
-      .toString()
-      .trim();
-  } catch (error) {
-    // Mozilla runs this command from a git archive.
-    // In that context, there is no Git revision.
-    return null;
-  }
-}
-
-function getVersionString() {
-  const packageVersion = JSON.parse(
-    readFileSync(resolve(__dirname, './package.json')),
-  ).version;
-
-  const commit = getGitCommit();
-
-  return `${packageVersion}-${commit}`;
-}
-
-module.exports = {
-  getVersionString,
-};
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 705261279e30..55b66341bee7 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,12 +1,8 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "0.0.0",
+  "version": "4.14.0",
   "license": "MIT",
-  "scripts": {
-    "build": "cross-env NODE_ENV=production cross-env TARGET=remote webpack --config webpack.config.js",
-    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open"
-  },
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
     "clipboard-js": "^0.3.6",
diff --git a/packages/react-devtools-scheduling-profiler/src/App.css b/packages/react-devtools-scheduling-profiler/src/App.css
deleted file mode 100644
index 1ea3d75fcc59..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/App.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.DevTools {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--color-background);
-  color: var(--color-text);
-}
-
-.TabContent {
-  flex: 1 1 100%;
-  overflow: auto;
-  -webkit-app-region: no-drag;
-}
-
-.DevTools, .DevTools * {
-  box-sizing: border-box;
-  -webkit-font-smoothing: var(--font-smoothing);
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/App.js b/packages/react-devtools-scheduling-profiler/src/App.js
deleted file mode 100644
index 9a27253b6c03..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/App.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-// 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 {SchedulingProfiler} from './SchedulingProfiler';
-import {useBrowserTheme, useDisplayDensity} from './hooks';
-
-import styles from './App.css';
-import 'react-devtools-shared/src/devtools/views/root.css';
-
-export default function App() {
-  useBrowserTheme();
-  useDisplayDensity();
-
-  return (
-    <div className={styles.DevTools}>
-      <div className={styles.TabContent}>
-        <SchedulingProfiler />
-      </div>
-    </div>
-  );
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.css b/packages/react-devtools-scheduling-profiler/src/CanvasPage.css
index e5d238a0d9d2..8c7633a1b897 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.css
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.css
@@ -1,7 +1,7 @@
 .CanvasPage {
   position: absolute;
-  top: 0.5rem;
-  bottom: 0.5rem;
-  left: 0.5rem;
-  right: 0.5rem;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 9b20cd2fb80d..9064065e541d 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -52,9 +52,9 @@ import {
 import {COLORS} from './content-views/constants';
 
 import EventTooltip from './EventTooltip';
-import ContextMenu from './context/ContextMenu';
-import ContextMenuItem from './context/ContextMenuItem';
-import useContextMenu from './context/useContextMenu';
+import ContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenu';
+import ContextMenuItem from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem';
+import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useContextMenu';
 import {getBatchRange} from './utils/getBatchRange';
 
 import styles from './CanvasPage.css';
@@ -94,6 +94,7 @@ const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {
   );
 };
 
+// TODO (scheduling profiler) Why is the "zoom" feature so much slower than normal rendering?
 const zoomToBatch = (
   data: ReactProfilerData,
   measure: ReactMeasure,
@@ -102,8 +103,7 @@ const zoomToBatch = (
   const {batchUID} = measure;
   const [startTime, stopTime] = getBatchRange(batchUID, data);
   syncedHorizontalPanAndZoomViews.forEach(syncedView =>
-    // Using time as range works because the views' intrinsic content size is
-    // based on time.
+    // Using time as range works because the views' intrinsic content size is based on time.
     syncedView.zoomToRange(startTime, stopTime),
   );
 };
@@ -243,6 +243,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       defaultFrame,
       reactMeasuresHorizontalPanAndZoomView,
       flamechartHorizontalPanAndZoomView,
+      canvasRef,
     );
 
     const rootView = new View(
@@ -281,13 +282,17 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
   useCanvasInteraction(canvasRef, interactor);
 
+  const setIsContextMenuShownWrapper = (...args) => {
+    console.log('setIsContextMenuShown()', ...args);
+    setIsContextMenuShown(...args);
+  };
   useContextMenu({
     data: {
       data,
       hoveredEvent,
     },
     id: CONTEXT_MENU_ID,
-    onChange: setIsContextMenuShown,
+    onChange: setIsContextMenuShownWrapper,
     ref: canvasRef,
   });
 
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
index f721295b2f2b..b6503b7338c3 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
@@ -6,9 +6,10 @@
   padding: 0.25rem;
   user-select: none;
   pointer-events: none;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+  background-color: var(--color-tooltip-background);
+  border: 1px solid var(border);
+  box-shadow: 1px 1px 2px var(--color-shadow);
+  color: var(--color-tooltip-text);
   font-size: 11px;
 }
 
@@ -26,7 +27,7 @@
 }
 
 .DetailsGridLabel {
-  color: #666;
+  color: var(--color-dim);
   text-align: right;
 }
 
@@ -56,14 +57,14 @@
   line-height: 1.5;
   -webkit-mask-image: linear-gradient(
     180deg,
-    #fff,
-    #fff 5em,
+    var(--color-tooltip-background),
+    var(--color-tooltip-background) 5em,
     transparent
   );
   mask-image: linear-gradient(
     180deg,
-    #fff,
-    #fff 5em,
+    var(--color-tooltip-background),
+    var(--color-tooltip-background) 5em,
     transparent
   );
   white-space: pre;
diff --git a/packages/react-devtools-scheduling-profiler/src/ImportButton.js b/packages/react-devtools-scheduling-profiler/src/ImportButton.js
index acd382b08ad0..6f018bf30934 100644
--- a/packages/react-devtools-scheduling-profiler/src/ImportButton.js
+++ b/packages/react-devtools-scheduling-profiler/src/ImportButton.js
@@ -9,17 +9,17 @@
 
 import * as React from 'react';
 import {useCallback, useRef} from 'react';
-
 import Button from 'react-devtools-shared/src/devtools/views/Button';
 import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
 
 import styles from './ImportButton.css';
 
 type Props = {|
+  children?: mixed,
   onFileSelect: (file: File) => void,
 |};
 
-export default function ImportButton({onFileSelect}: Props) {
+export default function ImportButton({children = null, onFileSelect}: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleFiles = useCallback(() => {
@@ -51,6 +51,7 @@ export default function ImportButton({onFileSelect}: Props) {
       />
       <Button onClick={uploadData} title="Load profile...">
         <ButtonIcon type="import" />
+        {children}
       </Button>
     </>
   );
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
index e16279192b83..5be33714a8f9 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
@@ -1,21 +1,5 @@
-.SchedulingProfiler {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sans-normal);
-  background-color: var(--color-background);
-  color: var(--color-text);
-}
-
-.SchedulingProfiler, .SchedulingProfiler * {
-  box-sizing: border-box;
-  -webkit-font-smoothing: var(--font-smoothing);
-}
-
 .Content {
+  width: 100%;
   position: relative;
   flex: 1 1 auto;
   display: flex;
@@ -52,57 +36,26 @@
   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;
-}
-
-.Link {
-  color: var(--color-button);
-}
-
-.ScreenshotWrapper {
-  max-width: 30rem;
-  padding: 0 1rem;
-  margin-bottom: 2rem;
+.WelcomeInstructionsList {
 }
 
-.Screenshot {
-  width: 100%;
-  border-radius: 0.4em;
-  border: 2px solid var(--color-border);
+.WelcomeInstructionsListItem {
+  display: flex;
+  align-items: center;
+  line-height: 1.5rem;
+  counter-increment: li;
 }
 
-.AppName {
-  font-size: var(--font-size-sans-large);
+.WelcomeInstructionsListItem::before {
+  content: counter(li);
   margin-right: 0.5rem;
-  user-select: none;
 }
 
-@media screen and (max-width: 350px) {
-  .AppName {
-    display: none;
-  }
+.WelcomeInstructionsListItemLink {
+  color: var(--color-link);
+  margin-left: 0.25rem;
 }
 
-@media screen and (max-height: 600px) {
-  .ScreenshotWrapper {
-    display: none;
-  }
+.ImportButtonLabel {
+  margin-left: 0.25rem;
 }
\ No newline at end of file
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
index 2f232b6bbe18..dff2398164fd 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
@@ -7,102 +7,88 @@
  * @flow
  */
 
-import type {Resource} from 'react-devtools-shared/src/devtools/cache';
-import type {ReactProfilerData} from './types';
-import type {ImportWorkerOutputData} from './import-worker/import.worker';
+import type {DataResource} from './createDataResourceFromImportedFile';
 
 import * as React from 'react';
-import {Suspense, useCallback, useState} from 'react';
-import {createResource} from 'react-devtools-shared/src/devtools/cache';
-import ReactLogo from 'react-devtools-shared/src/devtools/views/ReactLogo';
-
+import {
+  Suspense,
+  useContext,
+  useDeferredValue,
+  useLayoutEffect,
+  useState,
+} from 'react';
+import {SettingsContext} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
+import {updateColorsToMatchTheme} from './content-views/constants';
+import {SchedulingProfilerContext} from './SchedulingProfilerContext';
 import ImportButton from './ImportButton';
 import CanvasPage from './CanvasPage';
-import ImportWorker from './import-worker/import.worker';
 
-import profilerBrowser from './assets/profilerBrowser.png';
 import styles from './SchedulingProfiler.css';
 
-type DataResource = Resource<void, File, ReactProfilerData | Error>;
-
-function createDataResourceFromImportedFile(file: File): DataResource {
-  return createResource(
-    () => {
-      return new Promise<ReactProfilerData | Error>((resolve, reject) => {
-        const worker: Worker = new (ImportWorker: any)();
-
-        worker.onmessage = function(event) {
-          const data = ((event.data: any): ImportWorkerOutputData);
-          switch (data.status) {
-            case 'SUCCESS':
-              resolve(data.processedData);
-              break;
-            case 'INVALID_PROFILE_ERROR':
-              resolve(data.error);
-              break;
-            case 'UNEXPECTED_ERROR':
-              reject(data.error);
-              break;
-          }
-          worker.terminate();
-        };
-
-        worker.postMessage({file});
-      });
-    },
-    () => file,
-    {useWeakMap: true},
-  );
-}
-
 export function SchedulingProfiler(_: {||}) {
-  const [dataResource, setDataResource] = useState<DataResource | null>(null);
+  const {importSchedulingProfilerData, schedulingProfilerData} = useContext(
+    SchedulingProfilerContext,
+  );
 
-  const handleFileSelect = useCallback((file: File) => {
-    setDataResource(createDataResourceFromImportedFile(file));
-  }, []);
+  // 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(() => {
+    updateColorsToMatchTheme();
+    setKey(deferredTheme);
+  }, [deferredTheme]);
 
   return (
-    <div className={styles.SchedulingProfiler}>
-      <div className={styles.Toolbar}>
-        <ReactLogo />
-        <span className={styles.AppName}>Concurrent Mode Profiler</span>
-        <div className={styles.VRule} />
-        <ImportButton onFileSelect={handleFileSelect} />
-        <div className={styles.Spacer} />
-      </div>
-      <div className={styles.Content}>
-        {dataResource ? (
-          <Suspense fallback={<ProcessingData />}>
-            <DataResourceComponent
-              dataResource={dataResource}
-              onFileSelect={handleFileSelect}
-            />
-          </Suspense>
-        ) : (
-          <Welcome onFileSelect={handleFileSelect} />
-        )}
-      </div>
+    <div className={styles.Content}>
+      {schedulingProfilerData ? (
+        <Suspense fallback={<ProcessingData />}>
+          <DataResourceComponent
+            dataResource={schedulingProfilerData}
+            key={key}
+            onFileSelect={importSchedulingProfilerData}
+          />
+        </Suspense>
+      ) : (
+        <Welcome onFileSelect={importSchedulingProfilerData} />
+      )}
     </div>
   );
 }
 
 const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
-  <div className={styles.EmptyStateContainer}>
-    <div className={styles.ScreenshotWrapper}>
-      <img
-        src={profilerBrowser}
-        className={styles.Screenshot}
-        alt="Profiler screenshot"
-      />
-    </div>
-    <div className={styles.Header}>Welcome!</div>
-    <div className={styles.Row}>
-      Click the import button
-      <ImportButton onFileSelect={onFileSelect} /> to import a Chrome
-      performance profile.
-    </div>
-  </div>
+  <ol className={styles.WelcomeInstructionsList}>
+    <li className={styles.WelcomeInstructionsListItem}>
+      Open a website that's built with the
+      <a
+        className={styles.WelcomeInstructionsListItemLink}
+        href="https://reactjs.org/link/profiling"
+        rel="noopener noreferrer"
+        target="_blank">
+        profiling build of ReactDOM
+      </a>
+      .
+    </li>
+    <li className={styles.WelcomeInstructionsListItem}>
+      Open the "Performance" tab in Chrome and record some performance data.
+    </li>
+    <li className={styles.WelcomeInstructionsListItem}>
+      Click the "Save profile..." button in Chrome to export the data.
+    </li>
+    <li className={styles.WelcomeInstructionsListItem}>
+      Import the data into the profiler:
+      <br />
+      <ImportButton onFileSelect={onFileSelect}>
+        <span className={styles.ImportButtonLabel}>Import</span>
+      </ImportButton>
+    </li>
+  </ol>
 );
 
 const ProcessingData = () => (
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
new file mode 100644
index 000000000000..e6638ce728d8
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {createContext, useCallback, useMemo, useState} from 'react';
+import createDataResourceFromImportedFile from './createDataResourceFromImportedFile';
+
+import type {DataResource} from './createDataResourceFromImportedFile';
+
+export type Context = {|
+  importSchedulingProfilerData: (file: File) => void,
+  schedulingProfilerData: DataResource | null,
+|};
+
+const SchedulingProfilerContext = createContext<Context>(
+  ((null: any): Context),
+);
+SchedulingProfilerContext.displayName = 'SchedulingProfilerContext';
+
+type Props = {|
+  children: React$Node,
+|};
+
+function SchedulingProfilerContextController({children}: Props) {
+  const [
+    schedulingProfilerData,
+    setSchedulingProfilerData,
+  ] = useState<DataResource | null>(null);
+
+  const importSchedulingProfilerData = useCallback((file: File) => {
+    setSchedulingProfilerData(createDataResourceFromImportedFile(file));
+  }, []);
+
+  // TODO (scheduling profiler) Start/stop time ref here?
+
+  const value = useMemo(
+    () => ({
+      importSchedulingProfilerData,
+      schedulingProfilerData,
+      // TODO (scheduling profiler)
+    }),
+    [
+      importSchedulingProfilerData,
+      schedulingProfilerData,
+      // TODO (scheduling profiler)
+    ],
+  );
+
+  return (
+    <SchedulingProfilerContext.Provider value={value}>
+      {children}
+    </SchedulingProfilerContext.Provider>
+  );
+}
+
+export {SchedulingProfilerContext, SchedulingProfilerContextController};
diff --git a/packages/react-devtools-scheduling-profiler/src/assets/logo.svg b/packages/react-devtools-scheduling-profiler/src/assets/logo.svg
deleted file mode 100644
index 2e5df0d3ab2f..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.96 159.93"><defs><style>.cls-1{fill:#09d3ac;}</style></defs><path class="cls-1" d="M141.35,73.27c0-6.89-8.11-13-20.58-16.73,3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63s8.12,13,20.59,16.72c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26C133.27,86.18,141.34,80.12,141.35,73.27ZM96.56,42.06c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM71.77,78.94c.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88c-2.71-.39-5.34-.88-7.84-1.46C69.86,84,70.75,81.5,71.77,78.94ZM69,59.9c2.53-.59,5.18-1.08,7.93-1.46-1,1.48-1.86,3-2.76,4.59s-1.69,3-2.46,4.52Q70.18,63.65,69,59.9Zm5.21,13.34q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55s2.88,5.22,4.12,7.83c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55S75.5,75.85,74.25,73.24Zm32.86-14.77c2.72.38,5.35.87,7.84,1.45-.74,2.47-1.62,5-2.64,7.55-.79-1.5-1.61-3-2.48-4.51S108,59.93,107.11,58.47Zm2.76,24.92q1.29-2.27,2.46-4.53c1,2.6,2,5.16,2.7,7.66-2.52.59-5.17,1.07-7.92,1.45Q108.52,85.75,109.87,83.39ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM64.53,85.26a58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25,98.72,98.72,0,0,0,64.53,85.26Zm23,19.1c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm4.57-4.51c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm10.8-28.44c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14,98.1,98.1,0,0,0,4.49-12,58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14S132.17,80.42,125.07,83.37ZM92,82.39a9.18,9.18,0,1,0-9.17-9.19A9.17,9.17,0,0,0,92,82.39ZM31,17.88V128.53H153.07V17.88ZM148.3,123.77H35.78V22.65H148.3Zm-85-33.9c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26,12.41-3.72,20.48-9.78,20.49-16.63s-8.11-13-20.58-16.73c3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63S50.84,86.13,63.31,89.87Zm24.21,14.49c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm24.79-36.89c-.79-1.5-1.61-3-2.48-4.51s-1.8-3-2.72-4.49c2.72.38,5.35.87,7.84,1.45C114.21,62.39,113.33,64.92,112.31,67.47Zm2.72,19c-2.52.59-5.17,1.07-7.92,1.45q1.41-2.22,2.76-4.58t2.46-4.53C113.37,81.46,114.28,84,115,86.52Zm-5.21-13.35c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55s-2.87-5.22-4.12-7.83q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55S108.58,70.56,109.82,73.17ZM77,88c-2.71-.39-5.34-.88-7.84-1.46.74-2.46,1.63-5,2.65-7.55.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88ZM74.21,63c-.87,1.5-1.69,3-2.46,4.52Q70.18,63.65,69,59.9c2.53-.59,5.18-1.08,7.93-1.46C76,59.92,75.11,61.45,74.21,63ZM92.09,99.85c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm5.28-50.66a58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14s-4.41,7.16-11.51,10.11c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14A98.1,98.1,0,0,0,119.55,61.15Zm-23-19.09c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25a98.72,98.72,0,0,0-4.49,12,58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05Zm33,1a9.18,9.18,0,1,0,9.17,9.19A9.17,9.17,0,0,0,92,64Zm0,0a9.18,9.18,0,1,0,9.17,9.19A9.17,9.17,0,0,0,92,64Zm0,0a9.18,9.18,0,1,0,9.17,9.19A9.17,9.17,0,0,0,92,64Zm49.35,9.24c0-6.89-8.11-13-20.58-16.73,3-12.67,1.69-22.75-4.28-26.16a9.55,9.55,0,0,0-4.79-1.2c-5.57,0-12.61,3.89-19.72,10.62-7.11-6.68-14.13-10.55-19.69-10.55a9.46,9.46,0,0,0-4.86,1.22c-5.94,3.42-7.17,13.44-4.21,26.05-12.41,3.71-20.48,9.77-20.5,16.63s8.12,13,20.59,16.72c-3,12.68-1.7,22.75,4.28,26.16a9.41,9.41,0,0,0,4.78,1.2c5.58,0,12.62-3.89,19.73-10.62,7.1,6.68,14.12,10.55,19.69,10.55a9.59,9.59,0,0,0,4.86-1.22c5.94-3.42,7.16-13.44,4.21-26C133.27,86.18,141.34,80.12,141.35,73.27ZM96.56,42.06c8.19-7.33,13.31-8.12,15.13-8.12h0a4.71,4.71,0,0,1,2.42.58c2.86,1.63,4,7.38,3.09,15a56.73,56.73,0,0,1-1,5.79,97.7,97.7,0,0,0-12.58-2.07,98.47,98.47,0,0,0-8.24-10.08C95.75,42.79,96.15,42.42,96.56,42.06ZM71.77,78.94c.78,1.5,1.61,3,2.47,4.51S76,86.49,77,88c-2.71-.39-5.34-.88-7.84-1.46C69.86,84,70.75,81.5,71.77,78.94ZM69,59.9c2.53-.59,5.18-1.08,7.93-1.46-1,1.48-1.86,3-2.76,4.59s-1.69,3-2.46,4.52Q70.18,63.65,69,59.9Zm5.21,13.34q1.86-3.93,4.09-7.86c1.5-2.62,3.11-5.17,4.77-7.61,2.91-.22,5.91-.34,9-.33s6,.12,8.89.35c1.66,2.42,3.25,5,4.75,7.55s2.88,5.22,4.12,7.83c-1.23,2.62-2.6,5.25-4.08,7.85s-3.11,5.18-4.77,7.62c-2.91.23-5.91.34-9,.34s-6-.13-8.89-.36c-1.66-2.42-3.26-4.94-4.76-7.55S75.5,75.85,74.25,73.24Zm32.86-14.77c2.72.38,5.35.87,7.84,1.45-.74,2.47-1.62,5-2.64,7.55-.79-1.5-1.61-3-2.48-4.51S108,59.93,107.11,58.47Zm2.76,24.92q1.29-2.27,2.46-4.53c1,2.6,2,5.16,2.7,7.66-2.52.59-5.17,1.07-7.92,1.45Q108.52,85.75,109.87,83.39ZM92,46.56c1.8,1.92,3.57,4,5.3,6.23-1.71-.07-3.46-.12-5.23-.12s-3.58,0-5.33.12C88.45,50.57,90.2,48.48,92,46.56Zm-22.18-12A4.82,4.82,0,0,1,72.29,34a13.11,13.11,0,0,1,5.19,1.31,39.07,39.07,0,0,1,10,6.78l1.17,1.07a98.49,98.49,0,0,0-8.16,10,98.88,98.88,0,0,0-12.65,2.06c-.44-1.94-.8-3.84-1-5.67C65.8,42,67,36.24,69.81,34.6ZM64.53,85.26a58.75,58.75,0,0,1-5.54-2c-7.1-3-11.5-6.85-11.5-10.14S51.91,66,59,63.05a57.63,57.63,0,0,1,5.44-1.94A97.93,97.93,0,0,0,69,73.25,98.72,98.72,0,0,0,64.53,85.26Zm23,19.1c-8.19,7.33-13.31,8.11-15.14,8.11a4.69,4.69,0,0,1-2.42-.58c-2.86-1.63-4-7.38-3.09-15a56.07,56.07,0,0,1,1-5.78,99.51,99.51,0,0,0,12.58,2.06,97.17,97.17,0,0,0,8.24,10.08Zm4.57-4.51c-1.8-1.92-3.57-4-5.31-6.23,1.72.08,3.47.12,5.24.12s3.58,0,5.33-.11C95.63,95.85,93.87,97.93,92.09,99.85Zm22.18,12a4.82,4.82,0,0,1-2.48.59c-1.82,0-7-.8-15.16-8.1l-1.17-1.07a98.44,98.44,0,0,0,8.15-10,97,97,0,0,0,12.66-2.06c.44,1.94.79,3.84,1,5.67C118.27,104.42,117.12,110.18,114.27,111.81Zm10.8-28.44c-1.71.7-3.52,1.35-5.44,1.93a98.54,98.54,0,0,0-4.57-12.14,98.1,98.1,0,0,0,4.49-12,58.75,58.75,0,0,1,5.54,2c7.09,3,11.5,6.85,11.49,10.14S132.17,80.42,125.07,83.37ZM92,82.39a9.18,9.18,0,1,0-9.17-9.19A9.17,9.17,0,0,0,92,82.39Zm-69.32,54.5V26.2L17.89,31V141.66H139.94l4.78-4.77Z"/></svg>
\ No newline at end of file
diff --git a/packages/react-devtools-scheduling-profiler/src/assets/profilerBrowser.png b/packages/react-devtools-scheduling-profiler/src/assets/profilerBrowser.png
deleted file mode 100644
index b0282be2f68289ae83da05816100e26a1b7b35cf..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 77466
zcmce;c|4oVzwn<fx@l=|TT4-0sJ&H7?RT}bMW`jV2vtQR*4me#+-ND<+G<VJRw9B}
zL(nQ}jap&}LT!y8_EaMAXz$+NbI$La=bY#F{PE1oALF`a<}>s8%x5y!eBRgf;(@{4
zQz!UO004kf_wU^?1^^DN0ssdKjvd**vbg8-006iExPRxCsek6uM1bFUW$Xe?__UtP
z<@|o*;>E>9=606q_DHr@+sv>ZDJxY|Z9DB8sm{-h3K;@jDXM(ceTBDq;ntnYiQM;J
zb6;`1M>15>vzEJLe+%FbI6TE7bB4wp+?NCZsP=dT{K|~L5AXM2KfMGTQ2Uj+^e2Gx
zXQuhs>E=T}GuICOKP$51N`3ETK%+USyv3XHPRt{*U#A}xncvlGJ$tuK@MmWLD{mNu
zn!8(siz8}Xn?nl-s4@2f3l15kZ<F;DTvdygf0gnWc5^+3+w!*Ml@eeO%@LaS(1KmQ
zziy4N)$lfxNEr}*DNa%CY#Y^-zpIq7yGe&>*6N%N9)<b2s{Sgw6b@#e5^Eh=XsKVS
zs;~aL2fiP(q%Qe^G4sn~f4AswyI<3GxF^{b3|Sw85IKI;t)C(s^aq<W6>aKa!~;Js
zJ>(m=0_-h53COo`4~oP2O8vXb!uEqThPF>2!+ecx;ST@dZfz*N#nxRR(5IKoV(A~<
zNb3yo^$Thnk17Hi(m)Y&{|NLW6At<R679iQd3;X!@2vX&Gvoaq2->;zTKumIb%GP4
zXRp*CRim@)$*r#(Jp^ZO)W(Y-&b{*W0L?1Y#xFNSc}E~GB6j?>JA!2W{QbH87#AQl
zHO<KbvG;D&imsotZXb;~13hZ4Z4*Hm>4n`>s+CwzOUQ~{b20yWf{!Su9r`_uXY0#i
zg(<oGMn*uF#}Vh{QuEQ*W0-rpcl#%~9=-Cbgd8yMKhjaZaf5t1zc2gb#(2Z$`=f3X
z_KJfgZjZ(sR5Rt80&)gUS$nBH`tkaHhq6xVckJPr_wQk|StctoXqnNjjB0^Ci^ns-
zv%d98A_YO0@#84{1o?5VkyE~KY4$GW)_R%ZouM4cPQ4ooN&`)JYe!57`y~r4)l#Y@
zk9OCmupLq@1P0Olv>jWg?!H-dEtRkLH&@TDt~y#p3i6<d6yO4d5q3Kz6I_!MYH{OG
zfV<LH3TW`FT%G`(H4d|hZ!&)TaYdzM%YMsRHiPd(`H)Q`8Xqe*)<v7u`QsSTQ)(>I
zMnQJ4P3J~aVbBgdxpDj%u0DGuU23a1B;Us(-+rgW|J^4(dzF(@Eta5unx?L1V@g5(
z=G<*E>y~*K*pBt>9-UQJY2nLO)ltJQPNnMEsx3|iwHGTcjvDo0hEZldgOwiiZy^Qk
zjM1vGb0y)vl^iP8)iH~mCCnG3s_GNgiJ$@w^INj<5d@&E-3F}4zvxwy?pET_xl8I-
zg|Y>{m;+NAZO&JbxBb0ek-sVo5FnVad5?3Oo7cX3OcbyBp05+4G6WRvjVN0y7@>J@
z>D4bhEyT~;46OU|vw6UM<7}m^m>wg=ZuvnbXgp^_L1ZWl$M6^2sxgnVkqJLR-JA_6
z5IbtFH<Pl!@)*ghbP(#j0rw;=GK9B}lrsk7neDmnsuZfVp~m-Y&(8){QcWU;d@NNo
zi^Cg(Mi;jvT)tTo`y<kZ%{je#V$Kx$OKye)UtzAkhvn~nd$zgCB3FbEu_@WCtLj1G
z$=c>e{XIO4@77*PaS}#p=_aHsOd<l74VkDAeJ-rp*UqTTa~t|WiGHx)ip@vFAm6i<
zAHp5;2WBGlk5*HM$5*o0R=Xs=8{(~)<aQl&>h&s9xTov@3I4iJcj#@zkKFkOp;oM0
zp_WXe=pM<c6Y1Ex#&nixQ`#O*C>23%wrQM5*z#g}uBpP!;Yd;WG5q#c>?nF`Yl$zN
zPA;XgqS&ZtN-BL|kwzyj3P=<4=R*uNvsl(mZ})T=J0Ihh#LF)6N|N_>_{f^f*v-vI
z`Hp<sP-&+7o&mizwI9)x%EIqmWKL(4HXHB=`x)N@OSgqH_jYRfoAzA!x=F8#<BKwP
zQmG{eM+@lBhtwMz5M&Z7uWy(WBUu#&o};2QtLaRP4q7TKp}z&EA4<DCY$!Z?c<qwI
zv+f#AMf${m6+R(3@HnLL6=@GMK8fJjXfYKIuuvOxpWhQr7ML?@K@T~wRx5|7Ax}0R
zePvrk2tTGXWKS?R?R+J1LBgK~hEc4!dMi@HlPZ@-*nDB?QRcQ-T?p&i@N9bfS|F6B
zi*&b<w=#q9u49hYg)lE0p0fQ>CZ)&P1|^oR`N>8sUR^fK3|YH6>`r<Ll=@z?JFwoE
z3rh03p1&6Q<9?B?daul>-~@tEXz<u~+a~nZj9gyu#$+DQhe--aD?HN2X$SJ7kwa^k
zH#u}89Ns56^e0BVYudXwj2D7vW@&1=ZOM|9=v^3{SbCllsTzLGGqCO@eK|F41$g)7
z!J6Xy(0$E^GDG{74D0V~ZgG({cOy1Ao0bl4y0%M_n^-n<!#xyiye6EmcxrDg^i{~t
z5Gt+{^V)#a_<eocsXeC)K?|0MZK5x&Z~B9f5{q~|n7I~^rIL<v-grzZ^k&RnXfnF}
zEI-aE8UmRmrV`Q~=4$4lSDeT;{!giaThCRGPr07$CE2hsH~gwXZl26I>@FRg_z8;M
zOgC&h_i?zKKtocErx^Ad-A61XEU4}!gHn>f2~#i4VKox*84mYWL2EZ)?I_c3O;!4n
zC%+sW8<MYh1jy9ipKJPVmr+t63yLgKlk688I%LO`V6G(FK+o`Y!V7GdnP&L{qz?zD
za8LNjer8YhhD%qgb3Du_fu18gUyxOs_|P{j>Yk{e5CUpR-8c*r+9PhPP%*}I+Ym|M
z%9K#7*~f|)aBdUMWoYD;0_F0Pq=P&H{H_l13PQFiS)<cnbR6g`Yu7$k(HEygc#|Cj
zbzj_ilJM^F%WT1F`T`Zk+=^6Ku`qm$D*0hxxpud1$x`=DP8@VL1q3P>)wfO2yg!FH
z^{g^GDU_M>)ek+k^7Vum%BHf&#va#0cu+~v&W{VPyg)I;3kaG|T>s)Wor+q5-Vi8X
zAHY|5H(9r0<LQ*xSK;~Qv9;&Iv85TNc3H`-PxuuzcnKyu_51S4mbt~`UL2&b8l@m>
zjcrTx3XE~x{EW!<yHy;g@f3dH5m|jBdETK25uAb`20a;OGR#q|Er#gOmWf{s&lT4`
z;cNwQ|Gl||6`bbNHwVSKnh=U~7U<p%t*mMLUKpFn_Dt|M6M#R67qhz)kl4vbIW;*h
z1P=@?e@;)OQj+HPSbCw$ZO>Gl9DeMrA@cWj(J7~~!5{fIQSqyz&o(i#25re;^=U(r
z?jB=LlDQ%PTU%kDYALnxD3ev+S;|Vdnvc-#3*F1<LNBt)BZs?Qt<T_I4CgZaRPlrj
z)&%8MX;%J59}i6&QQ5|_Oe3?F=m<OLEKRdgd|9^m?Y9;Oo`GXLv0R1u!x1ofx5@i)
zErD_+a*t8`zK=?16N_QKr_J69p<5tJ1k?wue7>y>ZUFdw59D?DZFX+d!PSzG;^Adv
zmS%j*`~yRzaOKH%@~EGH;@iNAj8uAgNQ%&zv+NYlP#eu*Pp?5pBI`_8?zRsduJGRe
zz@)0=8B`UsegSezJ<EH7yQ^w**@R3BO=hiUc{e1jTT863kT#QjY|ZRn+@eq4B@>0Q
z@Af!G`gRuXifq+d9I$qj0li=9vRYfFp;N@-zVH>@)=xe{v8x((?9C5Xi<41XjIzOG
zcm1$vW`3&$LO%yidM%i8$HnYO@(f(!u{5>Y+lUO;3cS4XAprHRl<>r7u<)*{^Ox(|
zEB&cH#um+wlRJIexuTXQDL(g3L68MO8Ub&7+RvC!VM_W{Zs@Y|Y>;lKnsfc+7^{OH
zIWrodi!kxR1V2F!)Fp`bSZ%x5@_x2D?F_xCFrL}6NJ*htHrwI5!IRLBAt&<U?H3Q6
z;(PqgH`KCEbC7H@39cRNdO~aCL=%(DCTj}HpI#{V+UPlw!0PHeteTSAC6mRuVPPF9
zNZiO>DVI`JatNiKByLaUZ)~sEhO$ESOU_J&Z#C`qsT-trZfRMWLms-{o~=RG$9={G
zw%CS#Up(z#t7IXS=N{s}v8D7F+S%#Sb$7`g8*l`h5bQY!Y1tOkEF@D-rO-wTjH}xG
zc5p-IqIOwW7x@_VPj>25v(T#>ZrNuj56WiB0edQ~ty!DR?I9Kzdcf;(!uVY?k-*`^
z(9}nj?{P-nMl#uzeHMDLRps*KW?X2aKPF$>eZy8#d-ItzsQfLYiWTSJif~J_C<-I1
zS}cOIG}KahoyDc#KJ`*Q!~FY=?<m<V1=a}P!<D63-xi$w$wI%|QK4dwG{r5yi%F^w
zA7!maNhY-#fHyW>g`avCRW;&t@;U2UO05F9eS_Y-_lDbt)<O1~a!w|QzY^}$IYk8~
zR{E$*fbZw)(J$TSzdd@@b*N)<%@Q9{+TOGM&GCIRcnoT7NpvEQrN4yLHi%e11@=w~
z3&^<MIMs)JA{KSACCfm!6rs~98p1dY71@4<P<6T}M>?f=U)zdk6B?=rWi$k}<_BCG
z;vC@@Rz0^&nDud@93<Z5iB21(TXNu3cQ9Ap6i{D>wx7Eel>ohMTWC(x5A>K=v08;o
zE~s#<8Pa&7pWP>)cK>mlNb6s%pPqcaG6tm@1WuunJEM*-SxVY`xB9W9Q*9Q{@Jbb0
z6h?kZ#ioW9q#^P<C@%NlJjhM=QZ3rXQL^Paqz18^@5Iv8ypL}pvcL|0Da+(W;Nw)F
zj#p&Cs40Snrm&VcxcZ>or#Ni%jxT5b9p4#c-YFc$Y(svn8&_IsT~c4*1cQgJKcLSU
z=ApB_69+6|4e(LSQ=;v*swCM(z*cQ3aE%%!*cqXYW|$yO7*Jjt+5(5)Iwekyc)fEM
zIOl?zRXmUiOv(*8XvV0BX~7i@;6{mJ&pxe`w?TupX_MpmIp0zg7gfxwYSG2%#m8?Y
zOAO`cI<(nT7X~PjO1?b84JvYmtFQCXu`l74aowV-V+d>(B66(GP3{IV(bC;)D0^JY
zOcOIx=51>|bH)bQ0<TWZ&$dFk5OI$#o$048u*P%7{F_{Av8Nb4^z1u&g}h}3v2HR6
zIQGSfls0MjNL3|AwGX0ATC=LsE`X$sKSX3YBzzvb9Kf4d!e|(-wx_)WZr)@9pd!?+
z14PozrFO!whm_*$5p6F_R(mfwA|PcYj^3?Uzd>wO4Z7inVmOIeXa#s1(swbX*C#u@
zDKBcYhC*no-JiV)S-W$&rSY#E%Sy0+IXW~kdu>A5BlCP3Ez@8-&uJ3@?okyZ>+5NT
zmu4rmH9mhxl=)zQIP-}A`IGC5lc$8&44@%+gs$v1dTS*#MdRo8VM%yzZT~MTe)EWn
z#r<qQw(R9#Y=@YP`rVBT*{AAb^>mC`eOpvIQEHi>+Z0dX-W_|bzpHO+5K?U06PkN>
zZYImNt(*U%%g8(R4Y%AQnHxoG)2SF+GG!F6(B-IFmTI2JxG0#Q@aKpN-6oA=J%}Di
z_hJS+CXOtJM4VXtXi@Y8j{+ZYjjS#|zW?~V(7#7_&nNAcuuq!9r`+<#yq)tC<q^7=
z`!t$ZLSE>ed)^+Iy5jPOswBAIE7}P9{QHBoN^HkWgc?wO8xy?)Mtt;!w|IHW0Au(V
z4oQtSzid+WcbxlA7A~LlqT$6$F{4Z0%}8ZVcCI@&sd524ofYq-Y`b<|rG!<T`yQ&!
zh}++#ODVV@sgEnBn!`;6LfrPORLWlX@AZn72ffPo#!#>eU+Z%+dEZsRqdOyT`b{h~
z!^Ab<I&#>u<Y4BC_^^8MBOeXeRmRSYbyKjl_bD4h;5SCIlyEnF8cSh$ItI-%780H^
z=^NiZ-CtT#NwFM`aBumz?0FH{XmzN^T@$|*i<dPJAg>*F*M6ag?*~u0G-3XnGf&u%
zC%;vA-{|fe%172%-nPGysqV{A%G*E-Lu9jvaC?Ur6AVQutYF{{Bci5_U2mf)pda{1
z30u}Sk1D5!C2u$?CWmY#Zwi+Pt@`kFb1vPn*g<4Rmtx!YBGk#kAtKE7P)X*l7$4p`
z^pr1$iPg4-!eL8={H2BRoq92d<!))>h|f+SUxPXPrL*MmVCeP5M719N(8Q?Gi<Ex5
z3Exxs*HPh9{Th4Qv04aH{bc7AnYQ|KQ^_j6X15Fzv;vQ`TTQ$0-h$ma7o`5B*spzA
z%g{V@V1o`lF;A<2!;M(-po0})8-r<hdDw9FT&UIFt89|ymzDf;o34K#%B2t64}Xqt
zbtKr1N^L5BdKa9;axfB@I@$HkR+xq_-M`31rr_(d10??<vUavLLxzE-PWka{>z0~?
z?)6&yicjMBct#Vg>LIBu+o<wIOo;zbUN~mSDQ9o}R`$VKWJM<xldGsMkm}f&#TX0%
zjg!Mm{LRTb9ooo+=<3-tio~~3Ew}Xutu-y}`K=GZd17;^Mb|^XO82gOXACP2Yi0CD
zf>s-AouDwa)HXM0M%Oek6=<c>;kMCEdkXg<!F(g;8XpO-j$-nvyHh5d5;(CAe3o1+
zw~-kQMSK#_;K|2Ig}jk1oMsT?a`yH(8aT53-nN?3fs+FMsHUY@&MxE3+H1TW@O%6e
z*WK0@Yld*G$b$dS^4;`}_lUIaz}uQN-mEmk#ODydP%X`(bYKh}Yn%1>;U)9Nkhgxg
zR(s%vA}wy;S23N$kCuW{$actWrZ#%7i#G8`rP(#sE<3p+qBMVlS3$gKG39WjiQ8Ik
za%)YW&a2No)<U<?W+Ku^C~?mPPvLh}b1#c3OKo>e|1yysfS_?@O+F@3rNV?yCRljK
zj*{lG$29~>)%9PcY^iV9t8*|AaWboyEL&I?32z@IC|bzwmL`M)R;>B`Z2S)F1Q->c
zdW~@+juZY8Eq51{rCYx7y+h>m<bWRe=5{bGqw;-wNGb3A83EoGdign%IYAW_dhKzu
zl+vU4)YO#FmIt0e$SrI_)h9RFbA=}(EKc>8)K3+skuG4~PZyFW%G|I{IM;7glvz8-
z*!OJJY8yP|uw05$!I=j!Pzx3$PQRS_p(fj>3FYmkZ3lOhNxC@Dju{I-1uo0jS?c%X
zE4LGx%(8W_)xK>R41UJ2ydB^UO7}ZHj;~N7=!jWj>!JL08vvnShk6Z=5O42p=t01E
zOzEY`tnR}UtXpl30uM3lt(}hh{)w#{)F3RRQu}O5POYoi!m6S;-J+1ul(zfBUqog4
z0Dvk1r2o+nE(fgm;DR%=kdJW?)x^sN_g0{CwRq-SEP^^-uI!%(Lj)TZK@X~nO_K~l
zQb>y!dEQ1V=10Q8&AQojLwhsH3=3I&Mdp5=R(l^w;;fvkiuzJFJ}hl%A)C%i1l=6i
zOyvpy%Y9$MQVg7VQ7ML!b0+8=zO?oJeAfeju(k4R+Aw>e6A2~Hn7)@FydV)0fDVdp
zgwtvV`03LAw!(^5!bf{tt6nnTcR$`0A`}2L@W-e2doN>kO(@f>lLyyxV4f!)yaNZP
zNF>TuD6zYNyFf;E%iK4>i&xF<C`VK~uK)mTUz`j+Dodvj-jZ}_a&sDqF<MWZ!0Twd
zP`y`myfv{HGIqMTJA6z&lZ87uL=xd`zHv$kFqP#Rg{vPxw$-sh`3db4zP%Po-}aAt
z+h9nQSK&R06|9u#TF%&&`ei&r{tpA8fmyA=w*UaO*R`OG!VdB?PDhwe)-JpEFGAMF
zhxdo;d6s_$qS;|>K0<o5)2KjRK3!QTtofRLNd134f3Kq%bn_er`13*Er#~DR-q{=i
zss&YK#sVMB;LKlwyV^Hz5DKBxa6L-jC~QfOHIbUOf8Z>fGH}f^D;2fLD*&Dc!bewl
zn9?POsP*}<`oJhkikVj_gIQR{u^R}vPL$mru*HSRO0!pV?oUcpDC*=@{X9ZVaj~w3
zW6W~KfnY(a$Pyz;LvgX$szHuO*ipbk7h?b-AhJyyFHi?HO}vYuSXqJpBsFfFv3w`w
zT=b$!i%@*r05lXQtqH>aIJR|Q*J}Eb?dtwyVU7Ob;YC$=A=#>1TySfJQuHXTqmzHg
z4YSmx<E+LhA#}J-${B((jZDlA+MmlZgqw&eg9M=?bC?&Ox?!Uw`PyEvx%w^5cIbm_
zZ8lqIoeP$e^+mP7b+ds%Q6jb8(>@MZEwwhC$8OnzB`t0U^v>6R!k&UJtxW!SCI3=`
z!ak#z&EVf}n%77%X41*vtIkklqmx>;EoZGb<%MC(JaMFbSvZvWQONMi0_NQ9?*{-i
zZBS$`bC5H&c9F6l8u4$St~0rint39d@$nphX4mH{rc*1A#_6M5%ir8nDu}LMde3wm
z+IPg3%VeTG)q1Z-I%REbmTTPAJ?QSJ=REYwMV~8xW>w0G#GLL)iF%V;UQi>h=v1Q%
z2lgw09RkLS1sf7BHlkgEb%%};o*n(^_YV&r+n@gX>Fj}ne;@Sgg#EoDgq`^!IMDYi
zT2nUAFZWdBup^W0SC!~|KuEd8)x*Cl_$JfhoqjhG5v-VT{jXmuN|<0uR9_JFr+4kA
z5xadK_<iHdg?(G^r~g*AtLWe1lCt`@k$<=M`b%op70Tc7qq3HgqZ;n%IwHU0NoB|e
zzs|0wTAY8!n^dK?no}Ka{SG>D*#Gf&TRP$Y4DEm4g9|ljOFugYXkK~58~7`ya}iw}
z<MYor2!{~pVOZqpT7zFVm#$KA>uPxNZ*@lJ3;iH_>;B(J{x`k5O8hOjtiE4mRpjtL
zrrOs#>&Fj^|1f6w{M`B9LALr%OMqsU{yD9`V-y^Ex4&bgF8x;Ze%;A%zke(y@LP@l
zT^MdwG4b!%)CdI1OFw-Ovp*L+ZWjqQxSup^B`Z5D`hu0UWdMNM7u?NgGuY3j-M(MG
z>BpB+NLILx`|GEw$M2n(B32t68x-9y$HCqiky-3x8f1-pVl{U(a$G7=AaIP)jDy^b
z)LD;AN_N}W_suZm`lL9*Kx}j0&>q0FM8dj?Ri#yM4Po+Weuuj*P^fpdft&b><tjk_
z;gIWiPJT~nz$HcekNx6dFkSUkZKI!A4<K)I&3a6!87AeEoCLd#gHfJ>&HDuLF#Kg{
zmpm|6@{YB(rFXfiw(Ne#qPUyEs|NcfYu?J+S)^YbKj^a%{bK16eP*7t89t)ES6bSA
z<)<E%KC1lB3+q22t3TaLzV7#lQht9SEAxG(mSn4_Z(<L)&bepiV<WZEWtw)@I#7M?
zmj)|eT7y7RmyQCO6%-7L=jH|_5SGe|gFnp7N(-*cXw`5uu+dO3?hP~GtKt}k+5O46
zWeK3NHVd2DP9H4f+#h+xB&{IMITclLI;rRB&Le-7<;z;`F!tHpit&zxOa}nK13nov
zm)P-_(7v4}TSN9HV`B!yo%jHNh79??8m07p+HbOT)k3vZ902e)GzQ>1*Z@<4XKMGy
zz!~;a=6?Dw7K#7lNzcX$-v4rMK)s~&CG+8}qn1Y}HM;ZjpXQET-6^5$a*F5*kE(2H
z2*UjIzc%_AkgqLk`ZW+<QHijnq$XFx64&-pWB-{d877G)z&MK*0Za|ZC&9172ZpS<
zBee9Cj{@pH`-t3sw0C4Hhwv(ah@UJ(b5o=G+U<E`x4&BT9eok$u6JT;nBv11hNBs7
zz^4|tiDu=xPI`@-#`78#fIdIACioD_wCbtvOKsb8wYm0j@IU+}3w5Hpw0;Z@o~8#i
zXB}ou2<K{XaTmYkml*#{B6}VHc)&`sAI<p-%#M{_(0A}}6F(A`_3G1Gjli0-H?luV
zl~RMxA4vn-2xauKZPn>D8H(tAw-?cLaX+6*P<b$Lnod)WncNcd8oJjG6ir<igGr*A
z!1;vuoz(nwrgb?yl(Cv~a>3I`FZRI~W!XLFqE&Cy=(FLaF5}Wwzo#YD?jVY{wbN6}
zf}jok*1mOb#gEuhbLNwCRmHg+jy9NnpX-6oW6F&zq^fp(QQx!XHPfz=>N92z0;UvC
zI{YZ!x~2-<p9g=l04l{^bu-E93$cS15RGi-?En#kUmOt-R&T%K^J<`C+e*@8{szc(
zu)#y(X`urT=x$M&xjI~2UGohhMWRXNLBJG`By{Wj{p*GSBuQE3llASvLz-E=la#Up
z!wJ?O%#GTCIpaK7L;z~IYmja<Ytl0xsda-jNz6$NJd>Xb5~nuAU_oBB#>(RIY28V9
zjH<F3vF3rQbcVH2osj-hpxDZI&L-is!zDHZT0k)JUBty<7rbAbNecG1wBLE}hEmtv
z7oAUw$!dF7OaGoA)0E`o>9iOJ6d9v4WM`_el^&uF((pNP>iFUP0RP;u&nu4G1uYW8
zpPj6#jphbna-Kzpo}S6GECKCWi0?7k$sgf6vO@W_m@OmZoE%&6Kr~k}FCs4Qk{sKr
z<-F!S02RIzmDf?2O`d+iwjejEQJe7a$JT=%g*oTePxR8-$JLKgnG=G@<qTMsR_Ljv
z_jyj5y#c{E3bf`>2iEDn%jIXZ2~RfFlvn&>QFkvcxeIqG90mlZS9h(NnvJb?>r8yF
zxM#UPw?C~@xZPC|>lB&B7i6ae>B-~btO`<>P;@c4PPE{xe3zWIFjnM;VtC_TmO#f@
z`p?yi)hIk}n32HT=vPsF4W{kbr>jj}B;LJt9_h6<d+w#bU%Sf5WK!l{rSQVhRnJ;S
z@G#6DxJ2rkxGdJhu=u6HO`UTqSP|&$AO#0Oz)}>ZytC-+4GvEWVVXrHV#}83xp2Du
z<uzUh!T;|z;XkhcyDijjj%{Iv&80#xrJ&uipatg6YzC{#ReDkLp^z}3xm_ZA=OAF|
zLJdzttx{8OFM@UEi$ZrFA8GlAVmTz~6M^c|rkNTb&dzjUGWA25-SaJ%!&+XVTMmbb
z-KcSgx0!XHV=PCHz#&eWIL*=R0LnXCe-|caIasWeF|o?<sL1N+UTJw*H9dRVI{k1t
z!)}E7LCGn+={ZS7);yrAj0&|K@bM^2U}nZP7GXYrDDy!@(R>m|{MzT~Lu{34Su97F
zj_95(&EzmZ@QKWC9nR;7u83`nbb#{X(-|*)t;Ob+*5!vgXztLXv;FC%1~PxS6+LLM
zyUKT4P2FUz;3alSJ>#jbMU+B3`Xq6%efPe@CBeOW2}f_@eKV)6$Gwe>_Rgm+Tg>&K
zMUDupdowgP*GA0rF@omtB?hl$Q<2^eN;UuTJ3ci-Xd>3Ztz4R7(yMK3()bmg9=)ZZ
zGGvEp^+cV1WHl_)8ou&4!`yQsQG@$a3!G6+Q_X5{GwE0wo*oF8v%1t{+NE7sVl5fU
zogaV%;f&!f?0juK2G+FTdKB-=n#SR*^SR4@6E}g*=<jk0vHD$$dEvp^H>BbgfPLcx
zBkKU^nX>&~pJmkI1Mzx39!MXyh&u&n^=fUNytjE!1E6uG93Nz0b=7`vgS@MpUCB)e
zf8u;MzoMniq>dP{Lk*g#)|AW^ugXCgJh!;-r93xaHJYgJCYW!D8VbBZ!g>j4R>K~w
zT~aPAd~*`YCY<GOY{+`PLNtt=8wS1#o{=B03ZT>*jE&`AL%P(rwOilXak63Y(eeU{
z2&gLS!;vbwi7G?a2|lLv-8uthu0EG&^_sz42{5$UMmo@XF%K7FDy|UcZ5>(p755^M
zW`G1C7w5D_yX-p_);Sj>s6Om-g?~PP#QO5!;w8|cDn0B7{^nwptN6T&6bX+>Wz^z3
z(2N1kC5#qU$x8x*WUB;83zmi#n~h0kZ9A31o-}^%fy3zUQx+AAOZazMC3=MVI+2i8
z?}1c?!JLg~Dkn;PLI|5vIOd~%?{4yd-CY09q$J##;|oq+5~3tG^@e$@S{S7NajV2b
zV!g&zQq>^Hu-dAt$)>32{W^mSxZ>2gz9D%r!tSr;qOaQ-B<)DW&VGY@{f+wt0iF@-
z6E>tHC{9Vx-Kv;0bI(_Z!LJ8`$4hpfWTgNL)M)A4GCT!l*T9WW0tOf7j7QgWwaGl9
z+KaDi8a~B6=H-**N{KV4Q~+mO(^P@6ZWq&O*+a_c2OwvJP;m%Ed<8EbAa7)LlOV6z
z?)WYmQf!(~G*nWuBqd*$DyeEh@_?(`F^fSTtaun{>jBl0(OwQkTIX@R?YE}qbhWvX
z1d}?c3q_6Burd-;=S$IsvI2$J*A*aX+elNI)OM5zHnXn$-cA);C0H<{P{+G)_;6jH
zA7JE(MC^3&yRBH!R;NV#QwJ{6R$oFG&8ALr!D_HBrlfCwO&Iv*lF&XEHMQc;Q}rZW
zUW+juQd-en8C>4K*!sGY)MTcZ2CE3QWdxa=a#C&$G%6lWvyt+Wb}kfiNReqqiawdo
z$8{Guzdu3UdVie0cJl+-uq;{3aK$OG*8EB6BDV}VSxCiqOuG-MookMKhv=45-ybq<
zWn6^ZvbuqN5g2f`vhvRch<K<`*N)=W6ImPI_E(`<uyv33!Hf0wM1CR7%v`JwJ!hRx
z`2;g_q&ue+ow^P(rV4v6Xjq?q0QPWatbNl)`UuJ+=Ee{V_UL{_BOe@hOr;nGM1JU?
zwL5d<#@ITfhiK^WO!<%A56Wd@{iU#J!NwSRy}z@`sgRPdX-k9o#*6~FDY`wew-pRw
z$(%QOgbn9TgvuoyZ@$~LUOWsd%*FPp$yPR{lAoNZEO|d4RHsd|3Nb<M78nOKC2f1b
zMuE>vHAb1oG^&hr$XlKT4p&WPO6Oj4irNG*EIajxG;1f1I&;QMP6|F7x|Mo~TzDhd
zwp(8L3%7vW*hZd8gdeohatk}O2t@{bkq@{Ds#`Er2q_GEmrNi@gPKmJ>p$&Tz?dX|
zxn5T3KNu)&L$C_1AN*KMSSsWK3IP>H@!TXoEjA56tO)_N8A#p=JSQJ?24rQ0;7O+f
zH98maHF@~9nXa1a<4q4CAgjh>ouX+4hK@yCiZ3rGV05C##Z8{uxOQ`+Qq}6`Z_M4M
zmLxbcj^;s{1eKBJ@6`DqzoXEjl3gW!3NG1Iy279!g^ve)hzT-Rt1jS9$uO-gO({5n
z>tMxGagRzGPa3Yb5WnV522Q^0_TIK691<R=cC|&B%r;0i25hU3C_@L<*btJR^-HT$
ze2XByoYU=Nf$Of9Z&%mt)PTc{uNW9?muU@Q<p(cWaE1i-ju)OeaeJXVz?d5RT_Uh*
zIYDlx+twdttts_I1H*yRMaqxul%N*Ib*vskx&QQD>p#&Jd7wccThP<Fzx?r2OW$dh
z?dN#O%DM)8zw%2|R=d7sN<RG1>KgyL1xy`%+nhsut{f5qOMB!jUZYk}(Vifc@O@pV
z%N^4|og1Gn`BZNg&y6O;mxuCeBww;5%sr#3hSdy6h`C2PN&IQu>1CoJa85B$W?12x
zl3Bc&jF0?ZV?u|P`X}a<X^kRS$pxGiD#>7Zyr51%hkJ8uc{bNa>hRD|hkA{8;tS{1
zGi7wx38T!p4rAiIa`O7;91i@$L{F@Im~i7V*bEj6hjkE-eJ|;n>Fot!kj4PgGSSgd
zZtF(RMDsO91VyY!)u(zgb89!Qy@(DUdHL)n^Pu0fcUgI;3{%iCxXBnsB*d0JASp9O
z=2x>5b>7_&rdN9j;{)(@!oDmS1br1YI4q+sy%uf`S>ShZj|jZHdYsr>7PWpkTP^Lo
zMpUHXi~uS0`NGu9s)&JmN^9-xXIG|IvX^hqx(}aEJHNZBEkGw$yGru}A8)?!v^+S&
zVRn+ZW}SO_WCb@7vQxx%V7!CkW>%eP-HL3Yy<geMU~3h|>U;CC%IrT#0T3mL;JxrD
zUB7wKnfig-7ZPxdh7xZDMUyV0re<oO=a1+_DT@7ibo#erm4EG*);TL;r?*AP%IZ~L
zIch(~kCPj3U_=4I*sF)!=1tVxr3%>qszsbrhK?_qI;=UwxVq{FFnITB9O&4{BgRU1
zN$J|=?w!<RKE590(+Q@plW202@3|^mO9+e<)v-E5PQ@xYzVUMJ?(`nLUTZ?CGXdXp
zCm9<42;DzuyzlH*VcoW!7hY}frhdA+Z9)3ZwIw2>R4LQ)k3YhQjjEF=n9PMhN#o3P
zZssRoy;7)(YR&`)>GQ%I({qD)G+mSI^05xrCO#R`+nXmlESrmk*x)?fG#@DYW*G3y
zWXQ|)+8>blR^3^Li4|A&3q1EEIC$K5OVs97Lc*UyEmkHANmW&2_GpI?T$tOjgBdE$
z{NSDMgHo8v>iTr6)@O+fXPH!<7|YzPr*)PRZeAQ<G$V3gT(u{QO86oDKBgP`2sW|v
zu3K3>{SMH9Qs9StJ!Tb8i?OnUK+gr!nUM_TV3WHOvf-TpgX5s$gkfhHi)U_En_S7`
z_n)uJ6niI+ml(7^SkW8Xh!K%cJyyJEwOmo>anJ!g+?X^lQzYMk6a6S@t`Ga9#Ezb$
zfAg}fchl4bbCC#c=!TSNnK+%Bv<-UmILOGWN@87SCELV}BG?NC0rShep(OYBzK}Na
zJB5eLC6SV-1gru#Iys~P)inA6bS3mOw-}1xlT2_5MzDJpz$lO!oekwjO~v1~i;o^s
zb!Z8|xaK)<<)ZfE;EO>-GSR2$*f6=rV?rgNI@FGWsooH5!j*j^!1|pcVVUeCbZi~O
z7WYljx(P8MVDD^&m0F5rR?mQ{C#b1G7@0a{vBsvb>y4vkwL8rNM}4a(Wj?Is@oc}0
zJPK~&p^~ZhOotC?3BO9K9r~hlzFlF1*mE6m8Rcyd4J#K<E%nbfjIRM>)F8JPxaGQH
z;WTAvB>n<P5i+yDMtlM<ctXXXEDk!4At&17214dRZ8~;yCK?M%5ri~{%=8r{2@U-0
zcIK|s)xbh*5sy^Ugr_()!C0uFU_bg5yqKX+xs)2yNf}2gy$Na!MA2=;;pgT!GShug
zTNOe>Ds#f=6NWxdj7R0;%zBlIZ|B!;PCRJ7)hU+uc9>ix;$CHgt`BFxW!FPv7p<JZ
zXiFQ((6b;#8#mcvsHF73^+dC4AwITfeE2}au})feu+ZR#l*p^c?=xqH?ydq|jF$>3
zj6i-nbfEovPU)ezy&ntik0!j6tAmkRfe>Cbr5t4Qf@RHXf<&X)#S)_Fr=9zy!QTu(
zjzAt9uTQ~+Lg*yOt+-8m!)TwM@x^5>niUgE<pk^FZGr4iw70}AIB<o5$GDy!s%Eah
zgXZRrF4Dt#IC9Dl23v|ZTIi-}qa(+vkyCsa{nqiW1u()dYRDc*kT?vPxt-$Nb)D_e
zB%{XQ-a~4Q*O_|y+g-4X*%De0mdsGRM-c_d?aG@tiY*DI9ID3I)Ywp3%-lfGiUrUL
z9~=<S<JxMLbHW+cbtkLh{x-|%6CIAs9VqVMejn;J`xj;d29<5)5bv=-_McAT3mCji
z4Jj>I(=o6V1p!S3r6zo-!>>ZL_`G>6Nt28edra+>o5+WLw<;$Lw^Kj^5PX9n1!#Zj
z=5<#;V{ZXe##^@~xmb7g=-aDKjPdG;5X(!6%+l_v(KZK)bJWNL0uo!5zbvAT2#$h}
zD(l~Rsn9uR>=yTcZ;5moQ1cZ!;Y|zDrNVPyM41hl2dKr;waa+yGI47ienCZk9s0zZ
zEMO@b&=5QrhuiMn!CUVM`MnX7clEO-E3ObTqJlf>-E7nCLg`ITrFxt#*LfmmYYwv5
zw^WIT3w;DlY|@;Vbt@Zhl0?U9p@SVJ>Ghv_Mhca>xLV#Dm0L)1#ywT&q#sRLN?a-w
zbrk;)YJUhm0CbFtEUx!@yfecx{pgm*-u8_n?hxUj6U{!`iA*2#Nt*C=_{#Pt(p+z+
zB{}AWxm1@oe7(qAQSESbi}XT^Q4Pvu<fQQT^|)o7CR*o8wBpqgSQY41m)G14*;FGV
zT&CUv%CaT~n1t|m$S2AByJ0G-AT=jk_0i?%>lJD^*YIz}$u*e;-E-_{CAXl5pG(w)
z7EhLvPf)ItYHAz%J|{VWwTHiPASRxuZD*BXZ)=FNCu^Tq>6?TOi-`$(ie0D6r>c(d
zyHyVf+(>#xkr<$enhXW1-@_^GpU&tfZx&@1D;9KqHxl%&eJTD*D10P3D2-$L2C$%%
z(pozOi25_n=B}VLSP&H+{F;nOGsH3Y6tSD?@1kQLuAvLACxY|0RjXv2;e%UGcf<@Z
zL3J@5W(iYl3-`dM4rSP2C9{8Y5NPHBu|yW0^_VhdjV=t%V7p{CZFAl+aA(GfmcTC<
z{2I3248H6c!7C+e?ko15f(i~*>g$_nv<`rKC6Q}a4*r;?LBk>vSMXUvOF@F@+-%|2
zq$5iz;CHMa%@ia~ip@hdA$(iRAczZ{O3}e{Mr;=v9KC@!5jB3FVwG-~<#+>eu%|{a
zn|c>~UZ~2d%81j^^2A{FC>}WI<du5Rl~H15#5pgsoZw2ED~4IW#Rofw)s{Hn`T3X5
z#>Yo+P~J&-sn|qwfB6YYvl^S!Tnp@Dt)#S^lPVs}&Ut3Udn&GpEvV|EQ*XseEV9Na
zNXr89Ao+cKlZfq2D{XaEx5|=y25*UjE^Rt*lm2vNpnO!h+{?#(zQ4}0B)lMUxYC<E
zQd0hIIfAz7HC;Ju8_kXf3I`K+Y{z!8AEyH+98F`hlwg~|J|m0m+JkwoMDtC)3y8aD
zqKsNg8PgJZO?X{WXk%q@ZVI!`Uv5hR6MMJc1;NGGa6Yp&K@pwPPSHTweVhz^KpzbA
zwum%6Py=3V?w=cPVwPVn^k&*Las=)K7mfPqO=yPXx5rWy&^BG|?^GnWo^D%2Z{R_E
zCUthtI|(`^ek{zK$+BQb;YE4pM!GdJl;&5=xm};8S5mdnW0IxORNN4cw8p&eYw))E
z>z$7PC?)L?SEZGygiU29Eo%(wT>hYOSm{{P-1zbdzv}WIw>bvRpXjzM-}*k%(-mg;
zA{jWho9C9R*PD@%lCdG!J}xI`#J}8MRe;q?ICmDgOkeAGuJ{LCEZ6(#22I$nfm6ok
zQBq>*J2H(~5M4G@UN+jh?IqeGT#f(QC+TxmPOyeoN*U-BfPKb6Q9M;hBi!JM&|T=K
zX3Kmk;2TqUEtaTNDy5KCXG(7T&VTa2*u^`7HOV$+C=SyPZ@D23tjx~A2X&P;)y|_&
zpa(2BJ2SNTg~kX5$b}*S;~-jtsP^l?Z$2MGtbb%KC`deAP`3}=Cpnl?ev&Vx!#oKa
zfwSJVZVC{GPDm;F@f(R3(?@R0O{5*(Y+T8Ad175PRlH93B=?@0g1m-m&a0G0WXq-l
zWxY-qI7J2<6?FDUD5g7EI#)s3CD_(9FaQM;*IePuVYwqfoVjw35_GvAUWu<cBis(u
zWe~uQsy>4yRr{<zMvV=nS(+~2>F`K8I$$)8yIkZ}uO#BJxCM~*nGIpT72qWOD%PxP
zr1<6bIT5zE3Gmn3egl2p@q=AU?-w1AprybFTXWzE$K^)Quso&?!8v?OJFSZ+va|8o
z%=q*+JU1nd-%>s~zIf&A#>m_O#Y!TdwysmVYZm``(Hm$7fz7dl76LtgWEGDnNDRW?
zxt$7y{?(Uv@6yRnYzQhNsIj^&;`F9v3Nn*kX?q)ArygS>tPlvPN*@)DkvV2~AXrn*
z?rYm7tuC(bYH*DvVRgv&lqlisTgyYv0diVX7c=gv7r(o$ca-vBM~&K#VZ%F=o(@mR
zVSlqc-pi0*@ZNvHBA^{6`-B6Avl%W<kn0I?Nzx1|82w5UU+wKwCx5-u)oxgsJ`25x
zBQAL;&1#^*6G0&*>-A00ewm@iX`lAK&lQ?bSn5h)R6pBx#fl4$CFJk78>0kJT7Aq<
zLMqN6RQ#+>R4HE{E73_px+%*sH|+^!(93VQyWQPK_|Bic5Ha<Y)J!F%Zi9`K;kYnW
zkkf_zX8~{D3#Z8YsDIA4c$$d%w>mD>H!Ojg&=FS8{IDm5=1BqZX(ZM;Y-Ha^#vuop
z{e5JNs+U0xq0pO(P$%5%KkhazV7oSGGVUoESqlW;8&{b^@gi@kX$G&m)of8gGcT2F
z{0jQfcEa>!tO;6`c{~+9DM0(`7_^3>PK2Zq>Ev(sTca2ZXA~&owlZ;Q?pu+ve6J?5
z5YHf!+9e^;)1EJY?|d9dikkJ9w3cmKr5E4gn4_69l8Te9UQI6w4R)%RVLu4=>I(|J
zuB3BLnv8>m2hTz&&FCxHzya#&hyAc)bGv9l&ETSk!BSb(#D?Zn-uhVN0SKO$_7K|D
zcS%Eyv{)_C=6USHWT2GTExhQ1AR^;inW2--O?{7Q946Iep~1@=GK@1bs@eRw;O0;H
z5e=`OZvRXxPv8qNXm`!e$+_bDw$e>?ioZXzH?MB_Pftcw;bc8C{VaO2|4g)N<7n7a
zwI)U1!)x8ryjBQ|vT~y^iNukH6=?y_!WBtZS9cf*-|G>K3IY{s%nT}PZqzK>E7x;Q
zfYBa;z1e$SV9w|nU-$EjRtA@0;c?gHuH-j+8Dy7w1<$j`{INz0x*5xpO<9EwGQfMO
zV*xivXvK0Lyh~H4zpYZ;-9>N$U(e~C`F4(s5tWbbis22OT4=9e)hW|S_+17wXMHrG
zCpl^;9zL?m+kaexZL>CXtSuXV9sDcG4!HE6-;&&sS^nlD`Xey99fhV=+*Q{69>0{W
zgs_`{69;%Q;oXb|y?{xI%+pblJ7YI9M1@sd6R<&RN?2}mWtcM=$@n22TVLPw2IR^>
zeReFeaZg9wKJjClSEEcvSPhBq8$oKT=C1{w{SbXpJ%(~M_)lV2cYaY;|6_v*dHw0`
z5^Xz*LPp@@CCNTF*m^#@3(FDKSf40fAQMFDxMMdVcR%AH6nRjfrGvJOtye<`cX}99
z)(Oc-OD^<gfL!@#xV@0X`RYTP{_9Fv_q{R#zJKfJ_7fw2FudeBGJlOZN*=bp65!HH
zEn`kIzAF+1wlB5nw#YlnWCu_3P><L6ocDwwlxS^NZcVMSmW#F(8Q*&i?)z5YSEL!$
zaCA17T3tHofrvzjFIMAeWP4?ta0bPrW1$}9b<xjpz1j;;92J)#jUy6Cq-($@lp8bK
zrv758d`dfWX<j?kuAJ>RX3^E95P^Q<kj17<Y0^2mnqlFgMemYZg_ASJr>O>xm6}dY
z2BNc+ftRXvsRkTVvn-R5^nn$w4)=Yf9f1n|D1eqKwk!s{S$vE#=gm5?z|gfdEl@<I
zl}yzuL`RsEnsEsyZF%9w0=p*(V{Vy?ojw$ht;f~Ug!<cDNs*$iU6Xx-*LzZezlxX9
z6kNwm@A1I2Nz#Hm8yA$w@3B+h(K_!f(SvHEZL7jmMJ}E8YB1R6<re-SC6pMtl>Wm^
zhSS;l!Gyf=rmA|?!s(hwLeYc1{kJ(HCpo&ZB|GRgpQZBabf9dM5yJ|UOi!d}XS68F
zeS(nUE5K6<;$3FQND~RcCu30NkfV{S+m_$!<(;5;uh~WNEf<!Aiju)!_`{`+r<9fx
zFD=7}BP(r{oZDRm9L2fy-aP^Jra-O%7NgJiT=*mUN%pp-NsrX-!Sw9`UQ2gyU0+uF
zcs%J-`IHj6e5NNiO8_jXkq1XfA_)3TPwHE6i?_43J5Dk9h?Q-@;Ja+~8ad?fp;!4E
zE(|wVvwQE}yoz@~<lLod{5I90eW)O)@jkVR`DC$#h;~b422j>tC*l(u=4|2N6?hD@
zBf5#^F0?&RnwvF)b?0u7x7@V6+u8I8)gQTnS&~1BeqhPZJ`rHtl$$bN%uYyC4HCQ^
zs%Dv6ax%uG(9!*UXU`l_2c!(Tfu9q7BYT^4=d_Y)Dr+J4lbQ+qTB22<qg8P=1v1P#
z>UZh@U-15maK0K#@MTe;Hd~ir1Zr<mR~y?cz8B{v+2q5wz}P?X5l$R@wwBry%+=yh
zwM*;Ps5@a0Ta`FObc{5d4j8)QFj@2^bBw!B6_xSMXF!_#2P1~mu&MHPXA|3HcKB>~
zIQF=TmCnx)toImVr<8Buy~)GmuG3W|k51ft%3hEH;%f%K!mKz?wq_5{UP#0<#-7@u
z^+6Lkb~#X<jH{{2JD>cLsb_R~R=!t$$eXi!Fgln{4VVksx&OI(h7dP^Ox7bmtnC#W
z?kSSWbc{3^I*eNM|6|EDUpZDO1@yr3p2NI%<x2nk*Y^|03&X}#3l;Aq*A3)(tg}vZ
zeaV*>LoL4IPbhHUyC5ii`$VNEoF8mD0ly}lxm^f(RKYCAk4Qr3OI;eBg;8%mfVe<I
zBDhAk_fm=z8UD*aCiu_~>?y0^>#dHy!lN4COLw!gY}8yK(VP6L=%ZYS_~~7bm026q
z;)h(2U$-wyO0#Tvq?#tCfoto1k+o2<>bw-<68^MHX?>-E7^L+QF6&0y2>zA?@pZEv
zK7^~(d1aPf09#Nx&_KawKq%Tn@NBrxj-kHvpT6@hP0PVnx9wjuWQ4sYsHkVn@lcI5
zC}J{jc=JF*7HQbGTO7R<0v!$-6Q*L7mCd@iTp8|(@nSmCgj>j5v(fj2N-O6^4dc<0
ze*b3#Co7&HD}(JJY>E5o7*>3#%)YNuh2Y}zw$Yt)-nq%Y<fdeO)w=9eCl@dXw)4Uy
zn~{_)4IB+fPo7|*ZBVnR$uV*!-I&UC8|4j1h~7_ZNaKtd)hm=a?|yyK4uD=3$#n9y
zKlVi_R~&!x_(b6N`eWtU8hFaqd|l!Ruji>v3T_%TV5%~QYCor?P<W_n^aAR7qZ`f!
zq`^jQ#axO^t*W$rvL|*UnPI6CR!&gIsVYBUzj|@Iw)Y<vK<bHyc>{-^!_8r6zVk4o
zMX7G^Id@A24CP)}x4ii_9w*G9eo}0b<Ht8g>1m|;jpc8I(_1Wf(MK`239byh#*4Uy
zf%!9uNO&K4#!F1tGyfTPspd+L0OQQ51)SeaVe^S5lLcCL8u2`u+B;NM$r!~1`6hLN
z;w7_t#9aRB8Lb*(yyoYF^iCVwR%&KU?$*p|I^{DfUNV;Cn9R^9k+~MqC!*?9eoxq*
zMqEA@l}Azf<wUCwb7V*U%~aeW%ARMVFv~6OnAmMH3CqRYIbYf{kBt_I!-hb1YLyB8
zM(n5ew<dQbh7KV#L+_JXgDQ`oHP8-`+4{8cV;@Wc0H%t4oq6dAU*~sdgQFB~hMRV{
z-_PsKKBt>Q0pP^t8!)+F<#cpZ;`SlG{e<BC%~Jgr=eqxisJpPwk5LZ)tkxXgg)E-u
z-~Z_V0Lo_exv@H(pIN|CZLms~N8GRch^PLeUjWVj-PaQS6tYi({}K>3F`H@9Xf4BY
z@Lz;jP~rG{|ApG$LW_Sw8wURdj2&p8W&bAR1RW2k{UpBj(|-qv{p)iM(BD|VKC<=`
z6-;^ktLnp_s9=@VnSY=?MfKJHK(GC8i9Njo4Q$lkB-N7QKLFf+$146;ydbhz^k4X!
z(2rs($$y6|8Uz?6{bbDcQ(22K=k8;z-^`v229W*#19$o_u*r-9yWiUIeT({=7W`*t
zSGo_k(I&f;{{itpi_Z}Hq9=2H+54xqG`i&exo2@=O4?uS_W)|jU!MQj*Z*ph_;1A7
zjnUtRPj<}V6uHK({;P_r6x%9tDCQr_5@^jeC!YQO4>E@{(MZ$(_xPgPFCu!s=1*o5
z^FNFI*GE2HskS>D{3-Eas^wC4^o8=6zq?#7$+k+_O8*x@S<MkVSskbKPaMQNfSSao
zee2($n_R!`LNo?Y-$wmSe`YzBtNtHQi~pLC-M=x&c)hMKAW+Y5aIfJIMW6<~ygC*n
z-YFjS!S7T(0}z5b{o7+}#o3X>@3W93KVzb94#&Dtr=IK_Gs^vJNDwtCi25(mQmLvm
z&m4vhIHw?)*ZO|wTeJ?w8oLK7Qlmj+cTcrY|ASkdI@vOxx?Q!I?qIYtDBkeF6z3+N
zp_)8*C()8+aGPubz+e9RlON+RPo;A5H)4ONFo!R0ZPsE9Kl;VsNFuw{w12EXZIPy>
z{?^Wa<CYAMF80RXPUm5=^0)$9%WOH_M1wVv+Jb!ph}9)OzhmL?tS6?vWnHrz%>R6m
z3lO}kXc^j&cSGG*?~5hXpM2Tf;m-4QjSp8NtXH^s1|_Z*?D<e%Ob4>vw>laEL7|!Z
zi%6K^Eq&%y85D&wW=hm$XQ{MZJJ>8H(kVH{ze1=9>5yBwu2OelLeh#y=IWq<_NX&!
zM6xTd*a{h9DOqjQ8#r@AY;IUJqE~fJd|fPL-wAHEN<ay@6(4ZLRuUYk{dUs8r#(Wc
z67vvlL-i8?4UOC9JS^@b+hFdCRhp`r!L}v2@hKuW=-!?a6<9m|zc_o#sJNP@T{u7p
z!9#El5!~Gg!9tKpf(Hxk5Zoa^fMA0Km%-g-26uM}I>6vI*f4|J;ePJt{l2r-`E}0U
z-Mw~IU0vOK*XpaP`eJR@aAW?amO`8kB_xn5HxKRG8J-qxDMuAE%^7K5Ut;?({d|Hg
zz4Rx=Z9&7)+i587<Et0mPhJU+a;Ht{Rl4^2r;yIu;-j`W4z`|cab!i{O)Fp)L_4_?
zj^an7k=|dqh$e8L&;#DTdhz@zwxy$~8cWNv^^z?|;&G*szYc~1RYWaKZEuf5K7EP@
z_EYqL)nT;WpXF!<ORO#WI|Jmz;yR}Gq>{GZ=WdTL%)+$bFR5^lX23n(?zem$B|Ty$
z)vS;Khgt4+hw3))fU0?N=4SGjeE*MV0Nq`rcoMq7KXTCnUP)I3;M}7P#5v`MvwGn+
z=f4T({giWr!pr?fF-d<@D(-x)2}mM%a%Z3hFVz^M*_ZW{4Fl5aXL8GTBEL1^8N!}x
zu}T`r@r7!X=P5V!duq&b5g^UC4qf->5l`v<wJ(rjG(c{M-W1|o#k~VK`XW1+`;SHA
z&xWH@*)F6SELMr=(u^Sv@Y=7p?SH&KuE>XGEMDtf--Yg^iQdL=zgDRFN7+Y}B70?8
zFdmV9{?uQzE;KZcSL-7B&DRdxe@Fi_=>+pVj>o@p|An{h$wxG<|5*DUu+cloe=bQ_
z{?C*70I`Sx-%bT`9X}RssVVK9&vBm~@$Li>a6UWPa~2eDsaT(n=?mKy^>?uR*$&}w
z`~{_<Rwz=@2_XMhDT=V|6Qklq%twnVfBwMJhe;#!+w0}SPx4!JX$G}Q6I$+N|BE(S
zE6iONt?6qr%X=>T6ZW9gshc$+?PUr-m6#u@k8|#ACvJfkU92=VQMS#!hY9D$c9rhN
zh|+DrXZ=m5Y{&2seJ$&Vv!)LQR3o3IRoIFYsCr*cD3ED@dq?e1l1)Teq#kF}fOc(@
zx2OL_tmkvfbT$7^o}a8yH@Rh;Y337Gmw8J6=wnDm((I8sz!CK!lZC|dro>Z6$5yF5
zAhY7}VnJ|h`ssVKTiHrZd_f1Hc|9#=pwkE)`2gd7mT*q}2Llq~|Ihs0pSr$<#s+N6
zhw&Ur*eUEk9|d=U==f%ocij?3r*lMTCEM)LrHHfmFxAjz#BiNWVraLtX;kj4+bGAS
zzXgml5wom5g7?qjgv12H5?cBd{(-`JKpqG=6it})Y6)Ik>e8DAR^ZjeRPc6aZcws>
z&i}I~{$0<2_a`h_KPHNib}|3s*8dp@<a+Xd?-_c(-u}l`RsqqM9a-R{V`k67=Ev6^
ztkPkXi~I&Gheq8WJ^xqX6Q<DUI8@)?o9)+!pXp22q9fmWd+f@>qqoCUtUfol_ZreF
zm#SQUzJW!{Il-kZb05Q7xA}FLW2HJ$<w8a9O8&5FCgkQ~a{@+iWL>(4?>@7`b6B^Z
z&`N$B%B4Xh;!7K)UQ}J@HYvP)kFnKekwhp_YQEuL@^KvPA+VBxs^9OTm^(1j`-)WK
z24c^*izNC{$*Se;bQjT8aL_2z@_jRHRC5L6A6E~QqW$2cS;$BKCal5x_OAQA&m`*_
zHn|D`VJAJ5x3Uu?BjtE%dw9R|`6Bq(Zp!?Vy&ltJ@r<I1ucHaGviwEMvMW>(V|5?p
z_+9@N<hpXujx*dwi)v!a92mq2*Wlw)+#3jZ-Wc#1Xx=}g)^BI}0gu1<W^YxV{bAC<
z-KA@A?C4x7k^W3VFs_^7+Sc97cG~UR^_LPBb@^d#aDZl;Y|?@}pgXCea$d44nb_+C
zy<mMa&u!Rd;`M|yZM0v6e}$_C3&5~v{QbsJ@@3PnkiS}g?@%Mz^P4g%Ij7=kL$l&|
zP1pxR>eXKluDLnybWM}5n*^to`$>lL4^uN>CSLpS+~Vin?(I1`FHn9?@ZZxMYMAQj
zX^9_J?$*t$9}`FS4RMboPV$2@C^q|lrc&5KbT8iDWFH5NL!kJPM145_IkG~htSKx>
zs0M1HU%;6=`9tEjxZWgcYUb93$7?ps5UJcwx-s$i#k8>oPx1H0VEeLUmHBjjd>E^H
zXx;1*9sjAPt1fS(dv((-fTDFw^(%Z^yMCTfaNnXFKGNjJ3iltk(ktaq){#~bK>dn-
z@;dcXgf;x3obNsPUrnJmzx~OmbhZg!=A1_fu=_^&<W+nj%>M#3&jB4xi|S+2ta2d&
zZLmz-pp?t<`7L@RFpH>R+^87?ZCQ)0h`>lQi!!H;*`e}<+?v1gxl-9#uP901zNtFM
z?Gj#+nR~$%g_wJKO{gI^%>M<t5FkEp7iwwc5jPZfja~OG5iNTnQ_9-5efEOLvY`3*
za-!M#W%;f9U-|`G=Jg`38lsvcyDeOmIml_97~M$?6C!0({UlR&N{9(=o7~T@xgWHs
zzGSfKaP(_IO0%ibI4$IKqv+N)6=G#(v;2;h*`thl1J|83N5IfzLF;K+rM9H3LJ?7h
zy*x2mS(|~DfVO`*wblu=hn}9v$1r6v!KT8;gcQJ7^driy?}J@P7*T$jV$rJn?@<2K
z$h)$g;=<|yAOB54yG_DwiZCqGH^7h~<d<4}(X=23;sEm;0Ccg^Mr)V;JMPd;zFl$F
z5J&hKnOwbVi{clNyCE7WMbMkk05GX~_V;Z}cKnxy^U4<rza*c9D+V~_IQr_o*4oY*
ztJ55)WpA#HC;sQCU3LD&#riW1idV|of5qGFQsAa3M~73uy2kq6Tl>ZR-{-;8Tddvi
z1o>EtWWXP`+1+*vHGT5Ii)TAdb3)IObXliJ>>*_EsdbMEy(wQuld9sMp4mV6)#m?n
zgeCxf(bHR{kMnD?MQF|CH{V-UR4<^<L1y0pcW^;3rgy}(lF4w$**1DkP_oT#m6~L_
z80p(&4U5LUI>y(g;d@hBeCjPQzxnm+-q|~Euhg~OtEcgAKtKA#NJz=~wQQm^64oqZ
zO)@da=bnKVb6l{Ufzxupy-0`swRi7k;q|@Ex<QH+OCCs{w-1fl4UGcYc6R!Y%;O8o
z0{!a5qpEqE4_93~=4L<YtF=`HR13%!Z5^9g99`48O&i&4E42Cs?M1!_XWHmha#YOT
z^C9l;hQ8NVpAGSoGRY24Z{S5I;*{3+9wy={aAw(q$%JeoYV*4`6hojxt6m#Y^eSgY
z;Qeswh~b1@FWmGI(!^<xh4Y_oct2b>uDryNb(S*+FS9?uQ?FF%wwzQjQ+m~=bfylK
z@u$igKxy@zXS3H~@3lOxat@5mzG#v$IY(I$=&exsG@S9jXm1yt6;5MWDr5I+FVfTP
z=R554aaD4AW?_-nn`9HDQ*nagcfP(|n>7|hQypB<5Q+}#vs1j*Uz=LaO{Yy8GM2tK
zF35Se<}3N~Ba`IPC3^a%D%eZ+n-B{mnKgZce>M+`ItZEHmz&>r_{_smztMXq*sW$s
zbJo{jgv6YZ#(w~$j4Net9le;1h*uvdTqqJQfDQI%sMaA#!A^Yc+%seln_yU_K!p&_
zF!rA6_U6_7;tg`Tu`lm45Npn61DY*~A2lj`PdmzQ9{j<q93FoukD8#c%0YFPIKha@
zkzr{{Ju^eX`Xc%s=0u<(m|S*-)Z3dZNvjG+5j9nzf%aIuqUE$GS5RSN*TM%e+E)_U
z@Q>$prz&%?_uD3Sq7f)BGsI~@;Qi<I$uuQ#uZx!vP}~XrPz@@-+Q7~d?Nu)XiBNAf
zsHKP;fuAUJ?C7G7{%}vS74Ka6avKSZ1>y8s0j+Z#t0$A~*vN-nqB#nFu$@frse>o}
z`E6STU><71)&e)JbywNBxKk|7_D8z|L|Fn(&uamy`x+U#!R`>MTAj7T7FLs3wx~gI
zcey#46DHfqN<mW1f)5oW6|5U^V?HH3lQ_ph@9dR=OcJu+holXykCyxzBLPO^Y}V3j
z6?8R^KAXk^N?LE+6*$H7spZVE`pj!4Pud3tzRVeV*SVt;V4G82&_zsE80^YhVh<Tm
z4_L6>kEo7vRJ=Njz%RisFJ;>t$5pln=K4{}DD^rc$9UGBR1->rv|ZOkI#eokSlhB<
zlrsruDD!08<h3{iy+K?LQIy$Y=kteqZpS(Dt$(o|?RBp&uc{%1<#Olu*k?8xcg^45
z^KCITjuiAn@g$q3<cbN|P}o-K?94BAm7{#;6DussT|&Z!e&|rPw3dJOTtF=!lF@4x
z7`Wz<%Cowt0+|L1D2JxVFGZ)KhHISS$=~+de$6UjT~a3<JEfWS)Ff{-Ig1K!Ic(~x
z=Mf%rR^D#P%%g~SFIMkdTTwOAs{hoWQR8ST=WQFcA$zQ31>{*_KW4b+5u=Ia%i?Gk
z>;B1Rfd)a1R#H*-=I87y<w~}!5w@w#%XFq}?S>kz)t9?@KYW&#s9M_eo7ZE^{lkm<
zdcjV_ybJ8k&GakfY&0xU7V%+hwhp#iyPW2YY=X@m2b$nHveMF*$8+z1d{HU0%+kTN
z^3?<Bt#t^YGI7|~Sa&rMzt7%1rD^3{W8)+$CEE=Zk&o^(5UYZ#9%AdWfwQYNwI#QW
zLK>T-R}||tyHyDJ>0vsRu|~kl15&G2P8d()n3e@YaMr$?P?0W_EO*%oRImmU+N_@8
zpHQSs_t#f@)GuCVNb(1v*PsOn&An4q0WPq2FMew=u)AaRj1_y3k@HPpaesI>T^dvg
zr6_ux>*}GG;5VY)p{DoRZ8900FP-nCoRv}OU0bpwo0n<ItUbq=@<DKB%+EkC$$s5V
zkn8ieN+G!do|G%a-`ERqz1)Gn%(_#09a_3^om2~3R0>>>0YAT}-cVRf%1cc(Gza}d
z%S1qxuUla07A1(a1G5Fw+`)lcq*d-7!Zbf(VPrGtVR9SaC6SUPz!}wb$k7{sH(d;q
z<`WG5f!Q+q?ca#!ws;i`I7MdpCFKJ0{!m>ouQGfNxp45`<}#l#O3FP|EZ-u`lxoR0
zkb2?2zw?XqmN;%yE$(RH<Kq3^ob#poVxqy!c;~l*{$&RZmnhfZSnR`JQt-;NhiAhw
z%^E7yZuFnio^POfGhihum`Upv0={Br$AdU6K)RorKW_4`t|qp}A(i{G;CQ(f(9&t^
zH<rTOT&*EnXa7|;sR>=J!PdL!{61pi?iIs+_rpF1_>TA88w^gPXb)8<?7AC{vj74^
z{^s(flS9viw2ZK@9~sT^Y+#M;(*W?k=6N~&=koC;PgzrTmpn)S+2Q3L)QGI{xR|Nj
zgStgm`oag-FDu$@4v2kgchD_cgMwC38-$i4>~jf+!+txp>{zU~w#vnm#ojTSTP_<?
zXwgTdTGdS&jv7i$Xx^8cG|1+HqDB%x!Zl%>#U}$HTZd~#G(PxLet*TCni_{oDah9R
zxcD@Nze?-G*)1AQ`}Ib%_xMenY!I(GV?HdPpD_Rf6rPP-B>PW#$beL!OOh>>)^szL
zE<KBVV-oal#3JeFpL@Ny$^8N*5!5L9jx>OgXgru<Cv*H6T1u*Dof3vo`n33;bbHFT
zMKc|`cvQS!F{qg5Y%$Pgve~(rxlC$qMqfE)5C2ba<Ik$C`gbWgr~5aZ@aDov$A$%+
zlHH$)>j#@p-~Vpx&cF0lV777pL{hI-(~}=jPFOi*bX+IaI)A-Wrs1OE1rYzxrWt&b
z>*60u4))BPlfG%+elP5IBp7Qo+TP?(4KynCM__%cPyaT<7$fQn5!R0K00(6{EVJa;
zp3eDu^AS)JAZl)J9oe~>)js$0;)xTo!Hsf0_B#Di*<7a41dG)NUH_`iR(NvW-(^=-
z@fT~2Hfub4JPX3EG7h5^us&cMN%_kZ5>=gjoz)h?Wm%0&dceQ#u&ni#oEA}CoxNTA
zp{g*;!AF{~e3a6;%mndAr@Tnw!ubv2YAaiQAzLU;r(q=_n#eGrUd*knGL7Zfjide?
zt(r!~6jI{ZCRwLLk1Bq>h@rwdL8+p7G{_51`?Gxld-Yd7+Rawk$U%H%C2g7AOM#xs
zEb8u41nz;{A;ctL(w;ii)d{l&beYvHM|B6QKYV2?l}!SV{60=Dd+*O~%KG0({{KC|
zY+*o1?u-G&dF#*GLL~_s2;KK84>K#=nl2}1c4Q`}-47X1c^9<2eLQzA_0YL(nLUNY
zeqZR}#-#70V;)?gTfhHwLfp>ATRBZe&~f*2-4TD!8g}gK=C9?|bVNOUtZ&(9(`<L)
z|BbnzQDm`D5`Q;fltt8ccXe$=2wYb`8G_ms_*?j@kSVz|bRFQ73fUq~=`P;5e``L<
z#Dxs&S58_Vzc(1IJ2I$+5@c+bUcnOmr_c8G1w}hb{51T1PvWE;M>SE98}FgeADr6G
z;t4C1pa+ih5TQW1C4XO(#_9vbc}>&RbjcZkz6sRIG-ImD9Z$=}8f>1TeL)V2Gg#Pe
z=y?1$BADsQ^`*6~nDqJPf$aNLeftsG5K)em$=@G)2(E<!M$+`DYcTE#4iD%C<y!>2
z!C!SAQrrGmj20h-*;;!eE`A9#|8Vkl`LOsZs%`vx5P0_P2(3?2`*5&DB-j9%95dhI
z#soiJY_*&0*Ct?;eCD__G3HA@mp&9tM)wt<>Q5}Cc6j+3>IG_FImoDKw~;c}dO$l5
z1vhdvGDS|#`*~662slx}=is0F3YVs-H3zt+tdJ#Tw`^*zNJ)3O!ijiTnOihP-NDmc
zl$X1QemPs{Hj{}{bLcNB%ZHfjeA=}ipZ+?KQba7XIeQ%!;4>+Hplx6_Oxx6s%RTRo
z_-<To4HvUFguMylkL8WDVxrS6xni_pviG-Kva=(cjHhD}OSI6p&erYwGZnn8y)p~y
zdv)|i61^6FBUrR~{36eXx*H>MLL@$ND_gJzh43g_p_?L)t41MA@iI(~>8-``u_e4#
zEEI~Dqhk{k`|^qP?WmnU0p5R71NlbfV_}0-l-f-;W2WL3b<!dUV~=A9uP?dN*}ItC
zU$z$WCV79JdZg~wmnQE#rVfH#bVjoA>vt8>#!!fAK=ezI)8?`;Cdyl}@i59Ev&%ne
zEPpIL4Xf4#%cu%<OGJ1U)!+RozO}jCZCz0BOB?Ym@V7WJb7E(@Xm*7W>1*s6M#8Pm
zU@Y)sM=mSgOtMifp1{f5Gyu2CU|2!*k?+wFrpsbS1DI|9rN-7*y9wM{ML>)Wh1yjc
zOKj8%hGBct*kpDi;W}-rLGdYS!ac#U#bpUbtdF!85}jC3PuPjBFJcY;3J<stxVf=`
zzh1`W0$TXGJN?yD2N%3E;9_sLSf)rMYVB_Ndjw0c(P|_&n+#UfWF6>4iaT>np3aaD
z7X4PuE)>Ed8A37+bnfZoEoS3eM_=w5h;5mgedc}WUnmKlnH`)$Vz6U8u(qsSbO`Y}
ziZk%JiC34gl~{#dXOs70HL{TIm7VkEtq;0r+nvxp6KKt*?FCmxnn8<hOShG`Jv2_(
zi1-dp1x{9m8Bb<T;T)ZU1+;)j|8{zKm|NxI(hkpXSl=<K`E=_|`%>m^?U<n@J;%3a
zC4c;_vK&u~_O-UH)a~_xb0h8uZvwspz^5SG0*P~c13;P^KfSXm7~W5BDRlNUhnk>0
zz9Pr{l1*yTf^FSs%V0c-LFu}7<amN9nX%bfg>0qcXNVAfD=FM(B6ig|C=ze@rB4*1
zlF?-@#!jQc_n0pT#(8xyGMJaWKt7}+Oxb=8AL?z@Y+o_Pl1JPn6oOV%RF7*a&58fO
zv3bccYDAA&E!4EVF8qiJY;GUi3#2BQBSrwb3AY82Ul@4D=$lS~;H6!Lta!<<c~^65
z{K8|g<9xSW65W!8(^`i+CPxBJ@Uul~exXtVPb0?EivfaeryFG;ynyBBGBvJl8n$ni
zpZ?(5@4dPWX!V)W>u-Np?EA-my1&_i)9x;0W3ELdV~E4!lpyJM!s>8W!PHLLXz*5K
zg>f6LfzXlWbC+plRmkwk>kO#kUzxP;ShIx?cNwWxnXp^5?>D%$)1l|prA$0g7Zs7;
zTp&t@?v-b5rlS7z8?f^$`U7HG!30%2;|qg&@6k5jY!J*y<Mp0aakxKx-(4GcV<Hg6
zwLUZA=w#W=P`$PhV9Ct>Bi(BEki)(*(onoXE4r9Q1jCK!^79QI+-^RF9pB-^F3G{m
zznw6At4u`tRi=-C)<CU5!Jm1nh_El(u#P)#rm!N{&kBw$cImcQEmWJiX>x7#!jo+u
zL7QX>L&g;e-e%LaR$(RF$s|;KrC&_Rdb^;#abHmyA&O=vw$?Eg9W+CC?xGjh^`EIh
z6ac)M5o7CsLN&uY<sy&f8Ex(B6?9!pcJKg;;Si)j-?QyYXI3;=_{s=FjfF%h=+oqJ
z0=;TP4N2d+ux>W9z{t>rG-jU0vv2w`<pQ&l)+kPYb-U?5CO2z)|HB1HH!*R{<G{hN
zby!{8`wN&$UPNGDfqP<4dE!D+bhGrVmMWkIndC07zik!d`P=AIUukZfe`@S$WoH|y
zmJ6=8@#f`lOw?6&4sM(oaEiEknY>NONOtLEu>NI?NbX9wm@n!LtB59L_|&kZAD4Hg
zmNqAQqNtw9kGO;hYCtHJRcRhBO4Wt8TTx?8R%1dp_^h7J=(zd(00)pd&cXq#cf4+H
z)8za{<)`JZW3|aocNifnAyDM>-JD-gYbBGr!~2kNn*H>p@YjS3uqjh2ELQ><&xTaa
z{Rv6fAa3u{Go>tG>~_oN5g={TwOytlCl010$y8+rr}Vx?qRjb%0&&Vzw!@o<Yc4(+
zd6!#_8MRxkk{Wm^cv-P0mi)@pOg0T)q1s+~CCEZLtJOJn;fb?d%&>e)TI&DC%jokq
znXU=<Fh^pd%k$*%@@dkV!kn@bTk{{O7}Fy+f!GN567EsnP5HIKo(3LOCn`SfLA*rb
zpyJbaWg4BO*NTyp3)=bBtqfNuY`0|>P#rUbt-WI$^$1SzJJN!b4{oMQ`{%sFpS58-
zlRSt{(bS?*+r7K3*ILOFJ@3tz^Sa(nC#(KUIVHyR(iAZi8W&)kV8(HfGPP5(h#*C^
zxDZFhzwVF3ajAir1?%as*MU~6`Cd)q@Zp-u1us-f$Ho#|4VL)W>p3cza4+6SQ`Hv3
zaA6h-sZ2T~r%}D}gJcUEq~^hW*OSgIhM-rqq&M`HH)(q$@mEiodKbx$S}+3UK@wu!
z)?RoLgGQR<G;9i+Nq^hy)@^hR8g*qP-%iP8`|j`GmW;&{gs#877iP*3m@k`zmrnVp
z#7nk#orM@?D59Nn)cIiqkG?lDYbX;9<cT(#ag?ZX6XucGAmu%qCHk_UrY#=idbIs=
zu`Og)YsrldFG!8zW<*gbsG{+A1!drtAW)y0442s(qxZ0A*3HA53Nz9dJxIYI`%qWt
zS*hxKd-(-j%a&hLb5+7Ja{NbSnx*DT=d`?cA?I1#5(>(M^|j_+E6odFU#|fpz?T$-
zs{M43S5^ubce_8lQY}`Gu5-T79`6RFZqNR$J*3Nx3A;Wyi+B9{ObQ{lM}%_g)2fh8
zyjefYpm@vR3PSrmbgE-CTO-mz@3CiXAvMRVJNV;I5+HTtyR6v<-lo^(%?>R~cOH?x
zctOafRr~N(Hp{b@R6>(I%6W6=Y{&9{*(~+s52yAASR%c)H}etb-}G0Uw?rnWheh%)
z$iCgtO*(-z{6GD`)lTmYyiW5dH08=Lu+(!!5l!x);4X97t6h`3TQ1B}=*L0jV>+Ss
z3tX*_y&%q9!-jk?OMxv08}I6J;GgVmuua<C<~l1D3|6W$4gt(Mo3W$hwib_^T(Shu
z{e$+#Xxp&c$@1LJbzw^4Nz~Zhi!1e0sRUmFCBaSG4gBcRQ5aPrMuJ3WC-EnMweM$b
zPsudhLg=&Tg%I(9ek)qk?2*dH1|2txaX^N@YrAeL=;7x`lq;@DBDcp-oBo_%S=vgn
zy|9$DpsBufFwy<`+Ly{`=;sy#G5-R`RukO~qPSC$N2-td-$jfxJiZ0$!Z$w#XBy*c
zYYYhZDa}qsZU!{ztSxL-u<{*w20U?WK-KAud8*)p;uAsRdbtp-6?t2YY0E>JgoqiY
zF?uzc3%A56llh&;>I?4x4I{6s!me3ki-ji6qYUF5OQZ39ft<9Kxu_mM&XrszCF@Pk
zbS@6LVarilh$g&=t6fYJK_Ii3>J>gDc`BlCsp1L9K4h~*l0Czvkn?I^ooO~bO)UP^
zYVI$Cd8EaC-t#WwTdSLR-ux%bElyU0ATjsr4ZFp^x)XyH%u<i_+zz{AQ1-Sfmxrsw
z2k-vCFPgqc=YLb@0Y(7!8z>5J_uUJ`uBs}KZ=YVd6~=4NL~t{1emuv+5gPc5yMvq7
z#yBRVa|*C!a+F1itcg)<N^UQ7ZQ*8C3bjP}4`h9)I3L)fK_s1G9>X1S+nT=5b76Vg
z7fj#!Tk8FR7$EC2ANY@kR2zObI`PE2V7VRHzL`4~hDDg*=^gMNxZ53yk+eI5uDzm^
zTSKdflW-}vOk#6{*HPi8kJW8Oa=P0IZ_9^4*|Sjw&Pigp=4aklX&=AV&cDuy*DT!O
zJbIDg2N+{Zs{Im6xwt#cL*L(iDlXlE-*b$EsA-iwGWG4nOnX@2N=Cjl_5idYqZ^ZI
zz3^ga=ef~T{Z1awq040L#$=tpa@%9O>Z>mZS0>#yj<70T(y@{Um3tk)vD}xB$LQ8M
zCZtEZeo<UeRKD4{_46D$HoWv{_Y*e@oDz3Mu_lPLW`h&*MNN*7b^<{)4lR<+!QO^8
z6onRg!>hh`lAgoe*nnpT1D+kgBJivBZ;mvlH|t#4Gq{$`k6)m%)r*%uhYxHlE;P&I
z=HsuZ#(7~iY^I{XR{g8eHSq(U9f`#~{q6k(C}T)9r}mCvIM%l?!aix<`zJ+aUyqAK
z0R`2cK?%be&FjuW`@$bQC3@-3vOUvn0Gyru5+<NgmkFHP!9gB21ldqrmY*}mE@<H-
ztZwFyxKsqrrDUI;beat_lB<weaJV(@E0L0Pwilt9e{|f7_VF$WSi;@zAH@{H&*w=P
zxE?u3UG2M8=Lt@p?DeF@>UZRy_9Xs%rs>{Q<0P<DO3`{%O4o>((j+zGq!};E?A(1P
z7P<U)08<>vR(BN~r2DKC)Ll~9NV^q}c2laf?Y6g;^2!xmh8XMGvass&HV28wQIW8_
zVti)TK7IPy!E|i^FIN^m;#zb+`Y4}AD$vzruyupGUE~comC-s=0sAhQ7Ej%${d8kC
z{YSM-fR498kw}&~Ek3i5XVwUt<rKd6Ac_FXm8+XLac$5~+E$433!}j=<Kk`5^)tbn
zPU<iQ$%m!4dz=dc-)rc7;>=g1iK3rr4PAey5`hzs`-_EnjIg+oqUbriyq~isWqqr6
zQ61uaSl%SVwCX2zAv^h8$bC%-m1m~${5sh7bR;y^DO~#WweNGV*H`!A!vuPFb#)Iv
ziJ(ctTGc7He*c<`@|N^;|Le&IRVaMvGH|&NQ@p<Q*PyC|A$QclL4tpdid6YsfWls%
za=fQ~pmjf?mp4if^|FdS9iM^<lxqR^DR**f|8#4YWkC=>no+jO$ZwmAJ4W8-dTz4o
z&Lm@S=hSu^gcQ@qY?=A<=NH1X?K!W*!dQjTjMhP6U@Oe4ea)|ZKejR{Hs0j?%`jq`
z{8&Jk(s?ggA7e&rr?$U8hQerWS|kz~Iy_LhN<fT0gouk1t-N{L9SnJcT--~7@PUI9
z6;&_V7Zo&O4OeqUuG%YKiwLphiGJFaDf^(PxK?SuUN$+{&rJ!DCbl;3owJR1bU<@`
zDg(|UKcM!Y$FjH!KOAdv^K->!ySj{F?++`e|H3;YrsKolL@?|)wAclGIpE+ahO6kS
z|D<6iZOP$$tQ`$itczJAcoM@n?dOOs-s_&*7L*^@;(FW|TA;`u7u$M<DYt#4B!btg
zY-9h;ZS0SIS7!;0{KNC_n#i7M8stMkZ=X-Kl|b)EV{`^Eky@y6`wk4bINxEFkz6BI
zgAo8$YBDCG7<Ut`y_hma@On=nuAO_9Ssrq2g9goExD8>R8W%E6y2U0!VTnf{T;g;2
zRqNm9o7)@rak$NERh^Iiru8?<x5dtl*4|<C3kW<VKvtNMfANy)&FHWAe14@754~KO
z`{{`hV=r>Wk)9#C0&l$NwddXG+sox~&RQ1^nh)uE!`{!G*FI*k<NErjIB)5obv!o1
zCrPz3l0#2#mJ{n;`}-R2knqjj^$n#>PWQGlElzkBtqQ|9+$A%T8@smfZ8}t~^OH#0
zX@oMR3dthuyOr|fSjqWK`M3kialuUh?E+hci+<aeR<r^7(xs$#;1t`5`gwLZ^`7Kb
z5pEJa3%{7e07OkW&p2^Cd%T}1HvJ1=>>#!NLTPd3b+;}MUwp4Ll1nqA)vvq$Q*fkl
z<JAJ7sfdvf*>WzrhYV2riHfW1m@s`;@4JRHxF{QljqV<c-m2&uxTJ!+oZ1v(Ek+$$
z2yqx^Y}|KF8rxypSuz}3oJV;nfCHkzaGun^1glr_S6o}fe)Ka@Y2r23QQ@bc1H@QY
zmabVPr|*guJlN4Se1@1Jj(qEh2DZvo>6OF~L~Qp}D`R_C#5+kYPueRo;p>m&dUO$#
zbe#R%l6?!*?aZ~rLNaLnhj$U>-_xU9dUqHu``_1<zVUa9cB$i7ot4y;T8`MbGJRP-
z6^B=<qV!>b_v1AO+uC{U4EmwW5s0Wv^Zq&q-KDd~v?DQ-L03-kxfJu-HFJy8pFIJY
z?;)mr5NZDTC8<iyWheA0%?|3qSCogOQ^Zo5#B@hP^N4L_B!|_H>3ceycEXaDa$MZq
zA>?Si+GTkXFw<2D4S*vdC!e%mM94dPm}o{yezNdH;<jZ}aDtfpgxD05s&OJ&X%<Vx
zX@cgYpRMR(hxGOdx`fF7!O+=Ep_H;imWc}*?6Hi#((AV4T|KhB2&0VFD6lj+k$-to
zz_*#Td;90Xog+xY`a#Z%Yr|k#@(Z@r;_vTE)MWh!!IPp&RHk6rZIpYB7~ERNaDQQ5
z=JJcDcUF0*SX0`KjGE<=6<Vbdm!XBiqSO-n;9wEUp|G}*zSO2L{6Lapb+qk%8bm!k
zYbI$RSj}nW5Xu=bq;1c`d!d}y4zjh37+H96EbKTgwc<u{A~_&{>bd^x0h1y21CF5F
zY4<*PqY?Vznd+EQThEQ55)WG~uW8IeHAtvW3FuJ@*-t*D&EGPtelLmE2F82O`@A1(
zY_;|=Iyszw&GvWfD17$DM(3FP#I&@?&UL^+)#J!#6jS_$UmxLt3&Wz-RL`%*((3@c
z20{B_fl$OXN!&GsBN}DjCg&tIv&BWcJfV#kE?b8v>l4;F!=qb4_$GlBC3JmAWoQa~
z?3elG6jygQLp;Ftm*&Ev?XOF<tIIf*Z|eprCyxceE)ORR8>EnqI8iYBB$wY2!F+da
zR84)<JJfoSZ1@Q}$NttC_+BPHU*tE<r-Aa$?%ZTiB6IBI+iZuNRKVhD*epIEkh2IX
zD+N7b%Cz@7eR`g6J=0Tky%-aLa9&D*3Lnmt>p@6P1c$a34}y^2cl_%Kbt&z@+buJQ
zhs8aKJ^u<Fw|c|2v+-$pHxjOW5mi%f3C7hWzy1em@JxML84w`zNXERL*Tvg(t5{vS
zrb+c|bU>~u62Q+`v?iKV9Kxgu!2RboUN1InHI)?xuoOdC#s@s>g4=-}<p%^<skCCx
z!WsK(URmhgU^+-O`acEI88|g{Gy!%3Paae2aSkBM@jBG)#KugJare_{mwv$KAji^U
zzcNYKZ&zqPd1}w((A)D)0W8Fb0aLZbI+MJ>^yX<UKkO(g=vK|nWPUW;+KjO<`<qkl
zO(0TR6!{+O4&eLwB-msf`64x4%tl}RIi^pa@8NY(fdw^fAg{+~d@;>j0&P6PNFywh
zOX;FTNd8^OA;%=i6!YTO-GV6YUJLapP3UE^Jgr?Jjz23^w929bt<e5XKq`+>65X^w
z1#=@o-P6#C{@SsHtlgE2`)}7_XW0b{z@6556(=fW;XPdxfs4=-&n$ziXo;?+{R~rm
zDc8rF-iq6!vUrvpFh;ADT6Npn6H1r!{u<!bcxWE~IGroX=xT+1wz_$UC1>zjE!RCn
z3tGCp71ZDXJa}H6v8NB4G_UkV)z6E+q%P{GAzfrd;EMT#`&w^u)%I|qrlyVG^c^jl
z?tAwQ@GMb}vR^=(?G_IuMpO@x_s*TID85J)_uU6tA{4dsSeQQ@@0lun&qMw76ZcNh
zD&mNj%aAY?yxtfdm*_+V3bmmJes}3+4%a<Xs@(n)n|{rS`7aIxy|B=7Lc1t1LW;Iu
z|L&ZC>)Wk7{kbicEv|2)$-c?UzkcjF@6MBgOr)E~qQ*>kly?kty@cGODzTlgLDMbl
zsJR4CulUMj=}Fr8RjsO@*gR1Fgm3hV!UYkuh&I!IZ?t<F?(G2~E}W@)P;^+C6ieIv
zk*e_YDktdZy^M-B#MfmT+7#=!pLXt)8XD7V|5&FGSkpfRcFeAhpS`t-yzg--A_M&#
z0Mb##5^7pXd9#71D@LE1@a&cvx5saTGStZ5M4`rZmF`1SMS+!`&#9VrJwDRB(7vdk
zq_WY<5_Y+zS6d+r4*j9d(s#nSMI86a$*^htrtfJc7S2=<YRN)8ba6MCr<mZLeo-^6
zMX~@GO*<zu?W`pNY-}5M_v5_J!F8{n18yQ}-=|6WKfk9jRtP<(^bpac^SztTw2`b=
zbwfCm0S=lT7;ew|hnA;c^np8}yFD*BF7`HJ;EUI)$F!#mCeE>St)Z(o$!+waTH><L
zK<F|XG^d{KTcFlA4)jASKcX)M1qmW2LD75dbT0`NmB<aRuN+}_{{KH|@sZ;wiI(^C
zza-LsNr$*UNlyOv89r$L2c;1-E#~($kc&PXK#$M$F<)&)10|xIk}^wvMi+9zYvCSO
zfA*kRV%6+7iNrv;3Zdshc2Cea0t&AAQXy#APeD|o^A;Y5srIT%SX4LH-M0UbX$gL9
ztJT3FcPE2a-i})7iy$1<79gKzw%>0<)}ek`l%e=PdeXf>=t`=iW{EClDb0+^sl;tu
z*vrlizc5i1M+2{~WmdMg#Fi=BbFGr-L-w@pRVL6o3xmFfN!F+w&ciDt9?2e^JNR2G
z4c4CaQ|$|5Zaw-4o5yR+VP`?G4jXTxROz*y{p$-UtpCWuBZHTcN|v#b)KZR_cbskE
zkW&Y5)QSM>IzuA_>@|SMcouVFUr2(4q1AWq+P>yej+!eP3+LdoGn`{Bvf+44AQM><
zIi#VU5(p^JRz($NIOb<yX@tQ`b@j>uayKY}yg?Vo4%Huk3KnW4<`M4Xy5B{6_hS2G
zTVhw$I`=GsX9N~Xdv7g)@m;H@-8fo|-Fpjod>U(aHv-B$oqLF<)99n#5C4#Uor9nO
zT5H?J!Nd66x??}Yc^Z8DBW&W=4t&Ck%TMl&gIGbUw|O0JH^gO6%w*8Eyn-&0Y}6N?
z?kHeZ8EhQ(k}Ws^k->fDt`Qe(-#vM|5#pgCWj+3bF@JPkH3+Hes~fhq_p}>0IHLIb
z9SK?<?r85FQ#L|#I((XXhhdVd<*6n$$=?NAH)b7KCCfUm_o*JPx1J&UDS;6*NtG)b
z58iesXE0oLRXl_Ch7PE8;Bf(FV(r1SZ5qzuG`L(PEJBF<vL9;|dd!pznDw|Crf%s&
zkM{&_jN-K4`e3GKeit<~=KT`)@wp`aM=8iVPME<uy#s!xuUO|~O;4#IYz=Zq;twJl
zn89hka|#<heco#vxTidrOZNy4Qg&X_j?KrzI{?J>Q^Am2o5l{YKPPlqp1R>b?zCwh
z{8(|K$J#Nnx2EG4BO_bv9ywwD=ar?^UWcTH6dDte(eF}v>+}yTod;LMGyojE)@%<f
zpF5L)-kcKvzh<1XZ}C4nq(SI|Q5m<?x7Ef9ZXNRhr{Il#rpqJd?!8D!jOa`nqXNd{
zo&BS6(B!=^voe{p_yeoVBcH^AGI6K>(hr@6%gMB{^J?RbvPwwqI*{$oJs>=@e3+Le
zgKjOYxOY!nCXv(wbwI*LqD_MG46zs|;Rbz=Lr8oQbi<ZJ+f8vVuNK!|PwQH@jFl$u
zxT;k%H4DkL3ZYRG_kH%~(N9y*Su0lL<S-xo|C!Czq(D?|?Yp*2w1|B9L~>z&uka-j
zZPgY-?^C>aGBxEI?@fllaopM0pwW{{>>qLCpEs$5zpcU@a5nofYsC8lPpiAuf1OsJ
z_$04J1V0`Zok7w@o^Fv_BKsJ!W0{~0b{a+#XYo7pZLwy6^x@)cG94G<Zt&$=XTe6H
zg|OccnvRaRpJeaGk5_Yr1|n}$T>|3!F;(}wpA>kU(?-K4h5LnuMIJOgscHerg{zg=
zg&<1c7~ltrnZ_V?4IyO8CvEr$p#2JsEko(?KkgqQR`sTPa6>KqiL3p|CX^-fRgeC;
zO-%R5y?WJqNzlespqWw)h-R&yPXjKE*ria24l?+?+V1ievt_H5|6S@vF7*2)WWNIo
z9Uqn(AKoS3p7NVOcCKEZ?<w`N#baM7s1V76y>6R>jRkY9(v8xd5D`r6TM2<=f6do0
z@xBSQQ$tIkx`d(p{cIz=uWh~jk@`b5*bgB`@C{ub71ktmNjuR(F&AFZQvppP_c+~a
z{ZE=@NMBT6oqWJtNdYCPe%l=2{Y*Bb_z1G6N1sux%3FEe*NW6XAYVMFh`glnShi5G
zyJty+d`g}%M<SA&d{mSC3NIjgxr%M{G5{}!wDLlyfjC%`B{<9;bq6F6Q?^~J{SYzg
zzGra@OT{<;rFVoL-!dtX0DG~xu5&O=5H)FLDs%lrOq5@>=X^2Ap=ZuLiX|!(ajf5#
zAC)NM6ahw@FMQNJnwC?TyK_fC_2*~<U0MXQdl^M}3P6HVf53d(_ndc;t_|>e8RRd?
z`~J3iWt5j~q!8^Lsy8;#@!*Q5-rJL@$?1kO4PYd?xhSyGFv_`(Zg_LM#&C7{f&)$C
zb@Na4ov*1Org`#u#1Ddb#0(DORGRq((`o+ay>|?t$v%jnNL|m$3i#S1l+KF|J#^FM
zBA;OfTGx7?{)T0hWil7bS?CS!<sh0Ig<&Pxlkm-ziR0Iw%mZVXqKGx)H&YpYaWuy7
zdX0j1logsb$tgqu^YO?tMKSBK!?Wzw^FL{{XD0Y}toGi0cH7t-?;xP5;>KmGuN@Xk
z@*q8Qd}z@!YtFFX+~nm!;$HLcspSxad%NR?=Q>`&C9;u;LYuXlLUgLJ1H!tl;xUc`
zFT?LkINmq4lyQuyJM-3ciw`x3lYz>hYF3(dmV~Psa?Rs^Qi&bUHfZxMTN#SG2^m0*
zP5jK-b;;3>U+WX-u1_OMH(_<?hDgDggmh^6>nmsvaAH0eU+KzGm$mu^jNTUYKp9<V
z<Nbct2!tjwY&+Qn>2UB60Z+xBzKJv&YAdwd<2%FGnF6a^zL?y<)T%$x6fkkTo_>sV
zdf?-Bm7Wo!ST93S@$bFz1NG>vOF!=8YP^*a$N_0rn$Y4a>ZjeK80J&MEENx#d-yWu
zC*3+i^Pl?~`Jf$hS|O!634)Hp{EtsLcyPdldmsHU+hc~90j5OJ#megn;mHv2)_qC0
zedw**dk~14$3Ot%;B|NuQWo%-F>GxrB|X03^UkgiK&HQe-NbD-SUh!Ok_kRbcqf?~
z@eu#fpc+3P^Dzr*B8n#V+HG6uPB+JS%pqx%!d4GY)=hLbE@-)5u)xiEJ{#R&A=Zs#
zSQNnc{>2$_crrg@{Yiy}q{#~yJ*qL>G;Ny*S8_!vHKr6<1HMdggi_Pl==xEe9;)>C
zZ@1PS@*-$i5!nm(Z+`nC%Ez$nWSzf>nSME%F;}R@>-JDlikeGwDBK-_n!tz`n<EIR
zBeK&u=Z(n$1k!rZ;46FLs|H`M)Rp3@zjcuHhpM<U$|nFsk;!|Gexg#RS2rblN)lF0
zO!=d2m?$Uz>yHw~Sor}5)C4tdc>&Kv=>_BjRnT`UTR*sfyXC?qBWPe&fB3s0Nxt~=
zZ{AC-b+wo*^~~K$rBWKXlGUp{xu(ucXV%?C=tgDJABqzB;%)k49cbNXP$6cwY1xfM
zb{;~BIcY`4C@;EAChM@_Ftk?mA5XvMmDyNsuf;`)|MaX$vUHtDBWl0LpMYb~I8%&U
z-AKIkzvIXPzRbvd$gFLfm(>z3E^+;ew&4C#a-Zc-U&Xep=v;}C+WUu9JA0<a2#gi&
zUu~I3qOWjX^3!?Kv{_~ouV9Pms+7>I2i;wKR5j_3?(-~0ntrhDI_HV#8&r+5oqEUr
zUElj<xnE4W>JwTNFmRRcmD-@P{nEpqGXa~nHxG$-9lFHP@i+YbNpj~jwZHD<&xM{C
zdWuabS0W*@#}7v*kVN0^E5FYLq4k60i+tx2iZ2}RQ3|tnf|S~TVIbFxG91==``cZ>
zq0?`JX5az8qX`k={akXl%*1Jp@Ym~yJNy_fg5L}*u#Q0}A|Tk2-02v=+=kiA1k1d`
zf?p~=9G09oepHEj`l_e=JzV=+CWdEqGj*ho>4{_g$~PcA521>w3`UEiBZ37|OQ~ph
z;IHb&G_5$t(zmG5&ngd2!#bEi2YNpo^_Q66%pDl5-SHsa%khMuByZfov0&54&D%O}
z-WU(~i08DE6!}k1H~9;(_Pg?NxqUQOhC0W#W1;KS+dD$`n+ZRnEnJ0_omCzF+2Z5E
z2)d*QiL(d%Ccy3Z2Pv7yKncc3x%t>Ovr?glzWaQsntRh{@1o4X=!4YOLtKBgX{+C}
zO&wEu$9n!PiaBHY3ND~4Q0U88VRHL9(GF*S*jOyAZ7XCdtX{_H*J^uo&Qhjb|5YAO
zeZUrtdk4^ZCG&9c)PR6g5^~bkR~8nwKl!`GDf9(!REn2FQF7NhVO8iu8=djT^w8d6
zC@vs03i%{F12TD5tKaI%d*}Vffr|?C^I^;EqiFUAz5JW@9U8EWhBtel;YS~}7$Ozc
zBC>YX_8lpY)}@pmiq_%^aG^3a-|D%e8+;3IDPFrt0b%FpR*3^qw0`9pBc>ohG5xAa
zK4qxyi%VX+YuE->G~^xmZ}A56EnyXs28%5Fsy9JD(~75jd_|#j;h>iMV-K^}t>)~;
z48JHBUZ>hEy#X%(YZOdGZ;XRFAA7v~+an<1f{D#uLl9t&nF}AJIMez$h<3xcAU|Ha
zL~@d$w|)a`q~PYL8S>i9@kP)2su27!(}+xHdnTDQjwHZ>1=Ky_<<?=XFv&B^Sy%pD
zwhD1Mg)SNA=!>5th_P(01sX7F%!zZ^!Qrk%E0dqXfypPyyvCRtN6YnrlF$qo9O8dB
zkP9#>qVFX*Wf2>6Nf0<`vTz#SPXx(SiJ2(Kh<o7AyT9q9KXOQ!aNM|0#r=+vj0>xv
zb|BLq=Mr|6zE3yfu?zp0|61RkO%jTd^Yr|CYdOs{V?td`XktiY(De-<Y}wHgc_4Yt
zg<3lEK9<tU&a4>NECaD9I@8Y|s&%ws9)y}|bYG(fq2v*=3ZpkU*d3bh;<1Wp!3>d}
zmgE!kn6CX4f#$Yu9Xs?-ff0g;LrTDNR~5Xux5cuY3~N$bznDlAO!`u<w0|*$MbCT@
zul@pJQHH1<F{Jjm`Z*~R(Icc<Hk%5LBbg}e(U9m>bBYWxXFV9CR|pIbjblw4WVW5C
z@w3z5Rfkiceh35CWSBk>0d=JI486U!SK}z%@+85Pd4T4DB=vtgKe4Yphe*Tvdg^4&
z|ENRr=Ysb!f5L&@L0n7d+Z^zR1$$lZ^O?k2Q)Tz$<m>Q=B(V6q!RqtNFPGTg(iVx}
zMPmyOJ&v!#xd_BXj&Z~`?%Jtgj7^2nppxp1>#2Epd6JXdTa$E|(gJP#;MWV>Dgz?T
znF7SWeb0$+_p*P;L7m6!ICIima}0Uf6UIkbqMbbFmBy6J+seHV%!9->lJDFsO~lqE
zmu=8A^4z}=5RqkDPL;i;ziu;eG=AQq7U42`wOQm=g-D)W(ybr(EGJm3Yg^29F5gn~
zMbds+@|n|(w+z#U%5}BT&S%msXLq?Wayy^uFs|i02?M_k%FF0_j)3${>W*7NEQjH+
zuBTNDyZ3bXfyAmRXluo=S)JCW2bH1k40~217d<v3j8YYAxX_TgsK~E48y1HAq)(z7
zGn5?i+=gmD>N-?aczpG91=QDTT)pnQon{(+>yx_d$fl<dHJyDv+CGo=%PrCn-woSs
zcy=Xwvw{?BAO)v4+_Gt1$Hb|u5DR5?+feko9OBoBTyC=vRmF<K=3FcRiPPq0@C{Fl
zqD$FNl1~MZ8<1OLQEPt86jChn#Y{Hz)TN+~yB~W{)x91)E`#v1K{lUid#6BQIp}W6
z6JqCbg%WnL9AXNr10Rq1MV2aks~nqd{hm7H_$`GGZEWr&&_}Z!h}w>n%c=#sbX~td
zKo|P4W)DZmLEH3i=snjq2Qc##CV}|%x(%YxyBTCcU|t&cnvQ;d8px;f*e^m8`cac#
zdVALjx@YX6;nj7Abr1XDAEL!;at9GNXRV32OHdsaH1#uY6JMJN*kC>>ml(CrVRD-Y
z_r;3+fXd|W1c9ew354k^4HCk{W)C8Ezjv%^#m&5057pJl5ORTjx0sXU8C3No6P-8>
zuxdSuWg@@eFFmle9I@VJ3Y-qmvaK|s@BZ|3AGMn9UYsY!dlbk4sIoM4VP5en`KB4J
zTYYx^NmLUsHE{=XWZ(hQ%J#|uY^x5M^~II6R+S6}Q<0nn43?D_riKl+mb*vkG7ppv
zg^^lsh3OUrpnVYonYNp{V;8Pdw7aNIXc!b9QRJ&IN?_kY_vL8)VCUBz@*Q+QMM<x;
z;XPl=*Njt<O`Hc~|Cp8W(q8qRM#q!8F^Be(jiXa&fdAS4YPuGi!s3&&FR|$>NA}t7
zrM-nKOv#4A1jQkm<o+PHo;dve{uBsPp?4>&?J(I=h3J|knMo%PH*H{L()hTOTr)kw
ztObW^cx$#_%bLmdc!sk7cgF)YpmL*oVHs&z*v!>(-=H`j=*#TG1HU{?bx+K2%BH>*
zTzJ5Y-ivhCKB*AMfemgu^?XoH{#{6V@doHl3cUqP9+hU^ETd(MhgH``u(k4Ub5wq8
zc9gR4zsyAT^E4X^>dE+gzwz)%_9t|EA6#|!4ndvh8bL2s?i{nU<MW5BNf>aB0AA4_
zlT;m$`vFbA3&U{zBAM7(+xoVkBo>UBgfmi?i1L>Mnf%ac4Q)MKM?c@o&2%JGA)UD3
zV#NvAYz(5<@kunhWaE<Ti;f@}fhdeX>UW^3ZOb9yzDs!vqZ|7%9ndWAx{W|`8#))Z
z)-#iQgm8wib))&#VVH4tZ7ff91#ULoU1Q--p~;H&W$ZqH2TrSzbjv!2T6FG0ItTgd
z$_r3{doLT?(Tae~bG})oNwWC32*lhZ-waQ(k@aw|OGhg4oZa8CVDh@dRJ$$5=GF6%
zAkopR(fEY(a`(21a^Vv#nwZMt<R2^KHU^#E$FMYUuTqmI<ihq#&|PohC}&F>EpFxl
zlfNUnZ)Lopj`;9^>B39O%k(H-ac`&Irk9y4Y{EbKM6be$f3hXobk_DeH2UHV0HJQ8
z7b?-5cG^2D)vC5Fe2xJ}GXty2J_{bYOWqY>hZFB4>}q$7ywj~FF;{Tl=tnB*C#^@G
z+bqwRAe`9yQ(;rlVka7-#G(}oA=|c<$h^DKfuoI0Zs9=z@=TtGIdMvpdHVUyw!d6?
z&oA1I=z36^QJKP?c}=vMKAFc;rk)zT?;6LwF6*~C?im-(?bBq?>{^Wb0wP@AlMg1(
z6D)rk3#Aj=Bz+=O?3C2~OOo-^v4sNMH2h@uS={^&`s5<*X54n=_5KbvS0&XZua~=G
z47-E6=jGM3lX(-OHSrAUDu@jqG5JfyAIf@=i!~RN{wASJ4Gm+&bdYiGO}fOE1enI8
z+s{4Wpa!R<(Y894chPO74-~`JvZX!szZiS(Xt>(`|2JBQp6HzrBzo^e1Q9JFqW6|y
z^j=1d-bL>uMD!Bf=!PhxBnE?F2BUXIpX0gj=X=igtn<h3{55N4)^*MP?AdFtwO^n2
z^}3FUJJk{Ib5UwVTHU5(sb}ac<N@2&(4hCYKCp8bIO<Pxv$(?<<8ynu_mam?g6^qN
zYkr;JbR}7@3roudfS-J)dGcftAj#n{^OR<zdKG(l@Uk{_N1V5|SgnxFsqGzbq;ldY
zOPqwM{d5qh89XV)?@Fot;?JqM8}a4|49gN*d;(q7@)-&q?-?LO3471pXYxCPMhYuj
zJFKpA-JNcFC^Wfn?i(p<_rZ2+QR^OYfY~!3Quer-v&8SW)F5YSuj53LbL!n}N_?Nl
zq46@m3%b_r1}=WoJGkD!u3&ZR0Yuu_B<2nGUfzd!tmLDlQ9s!?0DhS(m1}et&jmi>
z8u3ghUs>I|GG)}RVuQ$%M%QWJ%Q_QE1eb15E8C*-HAznvr_zh1kI3wy%;rN3MYjt7
z0%3#52?L`SxdX4slKXhFHCdewd6Is!=bw+pSS&7vYM-4P?W3uw&eEr6hQjZ0yJO`r
z`TLyxx2n1QEFvAu=DAESRXe@f>^ssOX4<kaFSa`Xj_<|_`Q?ZJXIs&+p1)k2J_lC>
zs!Y`QY&$KQX=B0L(q%Uc3pIT#$JnU=vTuTS5K774)lO@Z1nO%)!``P~eW{V}SQD|a
zHbqJepa+1u%I>=exanujt?NZsntTl~%jk7+YLrr-C4;AMhCG8W!H?JYuM`0IEeUkj
zY``b%yL@LOw5u#pfvRvhQ}M6IR%5deQHiaF>lz_4szar_pDtDPEb6zaxrKBTkPmTp
zN#iHeCe_uoYysMS)2I{jv%g{)*ROmwEzR?^J*K`6vE@53sJ?)SUwSXOsB9bL?zNoB
zMAlX;!SOx=iu|1f)vu&QCrVWlEAl?rz)bzd*@U&GxN84E(MNLXAoZPcrwG0h<;aTt
zVz3ztwkhyAlRCUKB8qjkQ5?R!r;Z811`c27_I@J-M(dQL!JE1vN(;<8CW5b?Ps7QW
zcECMBpEuLaOjDzke1XGW)@xy#-2e!-*Vc=NpXfX^7w%(FQOm&ua>WT*_@;wn#hyV<
z%$_3w!vag-hv18@W=E^?{9|;@RsL0mkSF8)o*65RSFV|~Ph1NF6vQKKt|vFAD>_z+
zZ*AVf=EBa%uR2bPMwhSl=}HuCK?eoJZn9qm9CylH?wxeSTm{Qq1qpw(|0=4|$ldQ>
z5qWx61N7m&1wiL;d|jivz9YBjp$4)MCLi82Fh1cTi%E$3ee`aAX)u$-RHO`Ed_J_j
z6?ElGaC#Y@RTi~-KyG?+!I-J`ztjz^<Q)H>7RUe5+7O6P+Wlva3yq>a$IQO#r0lBG
z#{0ll<>P;rVu$L0#S(2#4Wn9a41t<V7~@wk8lr!N6}{$^)E~v9;x*yb<Un1PlL6y@
zEE3Gv4ies9AkFL(YFL=TS0DcoQXE3Dsn&*8&i%tj69xl?28BghK?^HGpBS061(jn)
zE1z&e+?w(%Qq>yR|6^EyQ2rL^aB-1nZGRp*f(sT&*mFo2{Wa(*HF$(;U|Ll#Oh-M6
z9T%ga6<m=_^^c+C=2wxJ#S4>8U=rpECDYl;ty2y4J(_X6L18+<9eQ8(wy70vPx$Uo
zXsQ|>A{$Fs@#a6PzvM++vARL6eF}G%4>A6~hU|<Hh(Y6<Zj668d>QZ#0QJ4yk-33t
z)9_FHb<;c?RQ#WM!h}MmvzW$@G>lu`7RO<OQR;zu>ju>HbexjGov+2RE#5+ijgW>M
zmx=#b;3O~68gxv5=@bi2!V-g|*wde+JuBdeD^(`VH)PD`JFFV3=Wfb7IL1@@@AAW6
zE2PIGuE!UYU~S5;XKG`O2L&sJK|f3r4}e)>Jp1XJ(f>@V>&lqRByiL}GClJtbfnQE
zPxkwWJ%;rLS<B_ih{&1${q2+{R@<a!hEQchotE=zS*4q9dEWflKS(%kb8|4m`*+4|
z@+$gg_|U~w^G^Gasq(EJ-)$K*M4`p>y266}{&p4hdDVDj-JsTzVww1!-yZVMhQCNr
z&zzX2&X2!L+g86I!MSoM*#U3AZ{^xoB|GGt-4h3W3)K4DEO!+*phEgL|IhOE(B$9!
zWVs>nvZrQV^RiFch!ZZ~`RnGqUlLEjY}1djfw<!5y(c|bjBtj2A0@ra9j|m9NGj*b
zTaI%@B>hY)7|N7u(q?9WT<w!tKefS;_A~dK*U4pJ>?^*%Yu)(ol38EVS(jU1&Qe)l
zIep_pe`c_T-kJ&lhF!qWCB0x>P?=i~r?gviu)~R>V&?TJ+Zik<P!XI(789cf&Wg0^
zF^C`My1HqWf5)X8(OFeX@^>ck^Hc)=w_~++UjlPLQsB_jM6w_tyGa^)EljC>PQ_85
zLFfRyCN3Ux7QOr<HL%&c$AxTty5itb)9GJRCBWIyv(2TTHQ9)IsU@W~tj`H4R~>hG
zNDAu1-#+Db4+!sw`X+Duh9c~Ap3>GhcGwZHWobSgihzhXvjeyUJyYwrkdRQjGEL3w
z8u`gCU1tg8&J6HmE$1cpluY&~>j|<^q|BNaV!YrQT;ET2%m_1Mo=R!{8);#Y#=KlX
znm;P-$xrK<a>MNTIb$=<u3)?bVoCrgmxd~za7+)j7S`hhX7VDBPN@!OGC&^&WP<Pm
zs*P@5G2CXC>x>&avCq9TW_WRB%BA)ubG&rW8|IsVju(jYHF~Y6r`%1GQqxRz2sjrR
zLJwGfoH8d^NQ>Av$XsyZ(hjsY$AWW#6$tsH={imxz>ZD%$V683NtKgzfU3anK;jrC
zAaTU`jE$MsK(o9J{*@Z>K*?Mbo`UF5i)%a`A8b-P#}h9A);u?yaj?~3C}v@;7nKxy
z=C6SjoM})~N?TPbnXC#@7}hzvm}x$;dpsVsskGgqJ3rJOk|+ej%1wm*C=mh=KfM1>
zH-~GZfMFt5@Tvv(dfuta=2pqI7MxdDEa>7?Ny!gANoOe)fn_m_IOgCv>q9xfF&z=p
zug9E<Cj*&7cg;!|J>v=HB(Z}!+gR1KjKGd)8|Zp}>J=N%@vZR-N({_SE|ADGQ|=NX
zT0+JoF2%{x#1uI7*!)!hI^~2Mkyn!d?WHEGuxwABr8UJ13}Cw0BJ@qinHSL}zBQKn
z{7_r#`SruexLZB0v#jvShsUUpY;WQwl05DXan8kM+)49GjI`}%N3d_?_RNrBMcNP7
z5PSb~#yXFeGyR-QVc+Vvxn62Ltg}Q)$1Q}i6asNq4j9+GKJYSKf~wn%fj%so)(?Vl
zPWc{Op%FbpqD2raUUn`Lh|DdA`()5?Nc;uWCT;H5GGUFE(&gP)e}t!`t`7XtY_?EU
zJk8Hp^Y=G)Te@*hQ%QEm<bv0B91u`4GYQ5>LdVh50<WD^BuwATCl6#}rqIChK$gCj
zVLxi9Mhji5PsDmnJ*mnhiZ7iRsCgrka7{2d&@Z)f>cKop8$c3@($Nm9G%N_l*%jH)
zn^YT=R>sJ>d=7t7TK>|ml!Ie0cpDa<-+&xJ-(A}O6|zIIY|MpQb*J1Wh}+{xs$G<I
z2@Kzb@5yV%XSr-wn#xSA1%S@?9(RApBv}WJ?W2TK6<2x#GnuDjZr~3B?u{>20gz6<
znF9jvxw4sF7xc&x8TPY}+fvDpYp({6loy8yfyYNURKsmh{f0Cxsq>z}zo<Z$ue%-M
z<zz3-!^k1qdN>@FPkSSW4mnTG^DvuU&gIqO5l4J;-OZ<p-dVx;bI3QU;Vv=9A^8C-
zUdFfiwla|}ulv#RWtB6g48Mm}X8A@;vqb&xyZyo}0>?i`sJwe(>f<V=ZbdiDx|zst
z&^D|SO+ACHEUhj~zbHN#`YXhMJMcPZzL5G;qOd0TmH3DES}$fLGD22bAm}qiZ3<A+
zmd(mYp0zqX1&&Knu29=W>Hxv*SC5zg*0tWRE<XgzA_UGOkipw6&pDUt_5|3Cj#Gd#
z8~A}Hm9Ul8yxV)jdk{L;?GAi&F0;WW+3iP}aG5odpEQZHkuSHD3HhYaN}8=AT@yrH
zef#j}#IfMb$WuC<g2Pg1@N^WD>EtdAH<^KQ8cyR<VE>5dS{qlMiw7VX6NP4}nf;Xg
zvLsKmg$Za)VEbA<>JFx<KJnwm;N(CK?sEh9arBB*&=$n^@VHl!jA%E`<MZDO=1dp+
z{-18-z8Y6_C*9TF2CfsPD(wOK8dBP%fexc>hWaKX?bp}kJS%*VHOax*k*bebgNCo?
zbqQvV#+3ZWX}PJJ9kwd@QdGaO*0X&RakHehn<}9ELvSnbRGPEnc6u!$*VKpu_FALS
z9j)3KHMgNb0hwfaa@dP>S8+-U0mn4;(^8GKaWghvnNcXz(f|4G@tZ++{2=W5V}g>8
zf0f^c`|R+?!3mC}kFNzALJIv0e9Y)Q?U|*91QUhCAJ2bv$Q}8sanc;M;fp7~FJi_7
z$)*u4uuaPUzV{Q$R6l`#ve@dERs`qV#D~${ZbF_nrrz-H0*Yu2e8_Qup&RV*58hdA
z>k8Q<W3smN>43O(VtDi4DW~g6!oc1u!)FZ*BfR1}T_or7j*l8Dn7k9{f)6K(Nx8-N
zBRzjQ(86w<2fcYbzbW_}9<kLtZEh^`K$|jsQtEvKPNQa4x$|h+J$VfsqNF(~Xf1B-
zI!#IO<T8u3;9}P=&rizrh>r&dx;#0U{rk0w%X~6{%yCK4l07(WQDU>@@z#Nj0zO^X
zc&T2Aq_{h8RgluIbu19`ts&!YGr0?RK$8O~(>A;Ph9>f2`j-b!(t^cZ#|>-SkXEkR
ztxWi}yOeOX<WMJ)F+Nrnw%$@I>jzdyID!cY)Ug;lwh`}D#Zt3B40@R{%rym&s8RAB
zh>wY}UXYBviG2GpvtO(@@sTj3MAm6J6+GD1<lw2L+_Z4t-tVilf`wyT3^*1Pc?*@0
z&VSbm0^aHH9vBrDDih)AV09y1REL(E^JT;*zI)k3p?|fI{s?3xwHen6TMi5&eq}sL
z3Tj$+Adz3CzT&f3ez3tJ>!BQmprh}2IHukMS~L$W*L&YS@iD}YBnwV@|1O)Q<)`$C
zh?;oQOfxo%oot2)!J$UoJ-PhlQ!vr%EGKuKF2KoMtivbzc<Efu;%>0<ShiGEE#S?@
zjw8^a#_h)qZ(1(LTw&1VX3^0{1)SF7#vJE!^je6SUQ}!aPF@w(7~Z>E#1?Iy;?Vxv
z`rPM1i%%BS$jp4{%6JZ&egpj0J7?1;`L~=O&8dd)VV!iifbo_M%xkbtcq|kSyOfNT
z0F75jyA)U+IAhDNzg<N-2zlK*IK1NI7YUpY`RRrgNR&lmR({<)*}=pH?j)qURpEJX
zo)1rdb?kM1HG{=-xB!zm`Z#V>Q!HQe;6%hipf#Dm`*n909`V+r>ZZcR8KRbqo9k}r
zf>2b?jt%Yj3M@TSp}J?rX(#c{`25j9P{a4sd4o}4_$POsaL57|0V&_Zy^Py+eAd#n
zqfVt=%Q1ytl%nZyJ&L4?jXkmJ#yM3wh{qL^L_g0V2LlSO(D&ldbk*tZ*$&#YK*nC?
zyD5bhW`>E*r#B-g;yle1zcwe0zcUs=M{_8uxc$+PB?n`fy2s|NPdnRYejCiB;#BO@
zp|o**uHxD@aImaBn?`3M*<pg<ohPB*J;ix<JJ5lgkh#$g)IKC~oDH{z7dE1Um3aX5
zzz>}zcAZHJN+W(fkicLVyO^xsw-Txs5*zZ}T_W!a)`;EgzL6xm)N)UBCVfKe^?jw8
zJkY{d>Lj}J{0%G`)XI|sp%AOXNjyzTZUdH|h=MlD=gwfow>bi)fI%51KboZph?|D!
z_&`>i&T39Nx>1YMo-Zi=bv{0(FYS*Mio$Rpv!!!pkK+i|?YpE@mt<XLUj-*!c|>oI
zqrT5RVJU&*r*fDA@%1qnooLEw;c5QMTDawW^WCj&j-LAW)utWXdAXxs%@M>DL2`mY
zFU2TmV&vBIymq#{+6zu*_jNNMwN;oVc0|Mh7V1$ZZ+PV=yn;2!q&45AwKjgZJn|~q
z7o%N<GG<lxc|zwR@GEd=ZCL2-vW}?jGFX@pWINape+Fv^y4gN+w<nU*JaxZCd?GpC
zit8#qH>#6UNVs_7%RuPc(2oF~&k~NF-$ZiVBpEwIQ6;tEHk1ZT*I5Q#{jw(tI-FOZ
zt%xkpHt1<&uK=Q|b?v7_0LCAuX{J~&{6PMr%3BE@sQa7)Rj94#C|EHymLGO*f`5<S
z)UG+N3YveJs5UOL&4JeTN}9u|`-iR@9&P(S`Gw=1Op|9)^E4+qahhRIv4fPEkf+w<
z>*8je97>m+QcVNQ2I-OEy3hoR)lWQw^i<YOTLc#F=a6qI72CBYw8#@kF<qBUg|FcL
znDeI9>EW5KN8z-ehWZ_4)xvz~P5Pwm0`iWql!9T?kVu?fq9(4eF&v4|dgn{PxEe0z
z<B9XG$e|QhziCujgc|lnWe$h5-(Y9<>vQIJ#~h35<_`|24kL*cYAHZfaxSJ=*FjcM
zvKvg@$zf+9jCDj|a>j2}*)If3cGSqaH?LO$5IxR84BuSNT{=3w9*sTYQWSEjW+^A?
z$;5&5gaf$Kds&E42V_$t;z0UY42%En>7;nAU-~M4)N$6pM2{M3Z0C}t&dpIaY@$ov
zqJ&}$BaXo<nDhm!wI;g9gaxTbX|-Fe+RhBII(M0NRAb<(H1ImIb_YNHj<tdFZ%VWE
z_ZyaJKbWLFcLEN(K*Mb?+5lOFckn)6b1^m1b-SAU)ZpN8P@?`SH|GLsNwZz;Z`=T?
z);IM^PZVor{^eQ=3}HuE$mCxT>T_wfeVuaHj1ZDrN_y;!-BoVDbbly6fXKZ+kP;v^
zQ}-1BcE--t8)<g*4PSFvuakr!A(-wI7G0w+J8~K{ga3-uTc#vL;!dbmQReNsh`m$;
ze=Fm*Rrilwhq!H=@_Q~e^mOgCdruzcfN*z3g4p~-M&ap`o5{#Mq*xKR^PTaZa@%VH
zDJS2Dca(x~!P>^*$Ys^b=GDQX%!IqW`RcQ_q%=3!z$(FVTVC^cxwD_nMmy3c=hS!f
zPW)@ys!rNW^sM`9dD`Riv;mhz6)FCt(Z65J<=zo%jTkg8Gx;>JxbO2pzn~S3_Za#`
z<rx(Ar%qzDi=iXt@pFbd(UZPJD*of-PJaqx7q&{-Phnn%MvGckrZfvz8V72%y)Omt
zDBpa(DsAXxTmD}6_~5GMZ%WP9Yjg4h1<8{Sg;$<x&)_5@Zp2-mRzqV+vFLSs&{HKw
zzNyPDX-8o6(<|VQYVn1J$Iyy`deV6te;1SJQWVI5Wjdybjb&2xz|`$cu3|89FAV?`
z0)do4`{Hu1ppm|ps)%>_yT~mi1gJ9>96@@0W8(IsaDX5{{not@R4&WN6UX17pVIZc
z+h?5-u-7~_O~pR6eHP@@7*`JP)4Oo~k^FAN+*n2l?`G0B($i6c;RU@1G)q3x#Rch-
zYsS{bbs6*(?p#`2dm!Y7O75g(vS!`^zo$P4`{U!8z`kEuS+jXeWO_aWRoSd`d0eY{
z7rxnH&kfx~1Z<;*E`HQ>b|plzDfqKAU4B>cb?3HHfQprQcU%wP1=8rgj~s-43zHrA
zF>`HwDpm3i=^Nr!hRtC%U+;Ppv3*C97bF2{D{uLOnwa*8m!Qg{lVV4|OtGwpU53nN
zRJA{`7m)1cJd*obb3N>>!Ju?3{jFQ*!r<J)94<0Mmh`#y01bKU6T=pDh)U|Aod-_%
zep1N(y_H-N$lJak&yf*de9JHIpm7~lG8#oZB`-cZx7HCAZEtN|w_Q{kSHRzmCa0Z-
z3IWkIAh|C7p2RgQl}Wfn!S(SOn@v&b!V0+=^AiTLghHPqrl|N!dHK@uiJ^tHIS}a<
zl5G-2W|hPIv$kV?51iBYPlov)GtPa6`7q@F;d*XAt=j)53vkbs?&Hh<XEW>nVtg+T
z{J%F^I{B`1r`cXKCMx_#8~5@syEM^}@%|2%gTr+D{{nmz{7ErdK6-%i9^e{|%RgpW
zUvk%a=2&lZ+ulH6Zzk#gpg^LpleFPy<J1xi7Seoz5WbI<e9j4dRyr18g!+|);-mFh
z>)Z{YEx-Q*6<;2zDqh;2A7>zp@NDohC=%T7#ezdt!aQ}nA+ViaaULgrp@wYJSMS+)
z{)up3I4U~!e7HE=mb*LYhOZ1NKWa2XwqX2XFxTb>N9SdI8ygQXHwVy*1M^xpQzKR)
z7^$-UzlDVoUBJjPFAgxkFBreJKL3t;P1y1Z<__g}bK@QE-qAZ+2w%b6B5{^Y^yR4u
zL2rf$JO6Xq?~DY80PK1EcD^6<3^b^cZ4C;>j()rl6c81rl$6Ua&7tPr%vN-ijk7@)
z|CjICFNig4;g)kzI~1_Z5YDU<YrhCD^?R6(6<10(G0NEZ>gZA+OyKdqM0TYX@2yb-
zBUh5P+f8(=I}ynjdj;8EU85p>LPC!~G_tSyQ|p(6x1Rqvk_w-<(iZ05r#?&B6CHcj
z=Ghq)&Z3}GC@#2cUum6%OSACv+b@XwrB6*^I>%2UV?Zr=OzAg4)VAtn>vyi><h+<{
z8@TnSaz1vE8~tZ!&tJOFM7<Ma;>q{`<<Pm!_GU)~Dyz0Ye$Tnb+Ca|{LBM_M?lrV!
zD=*<nT!%p@xZTr;<j|S8OK4p0TilW4=>wPD5UuZlT7WSXsOJ(3>`kr~IJ#8jFM{T3
zXtFF#>6~_^wDj)!!ioY&me3Zr9MxR7O$t&~Zl4?KzV8!&r^_4xcefsj4ky10PfBxj
zH+PmInijM!waQA;{3}zu{ke%xj%xrzM;Zx}BM?o_sEZMKOj>iMa^c?x+V8uiGxqse
zD6N8ak-u>^KXr7EZbaRjlaE_lP{2P^7~OOKBW-{@_nKXh-!j_~u^jYt-gBFx;{ro|
zZbxCf|NB3XZ~w9j;)4IJ?cGg~@verB@-4{`d%89(i>w}8e;?_TD<+wFJc>Q;r_Db{
zBQsUp0szcKpsn2*a$ILGF!KR3&m`P!91mH;)b}fA-&bVpgV5(p*Fzh(h1O#m;4z;L
zN1cifMsL5%iHs1$ORccVr9>wX3#)x+Y5eel?y&*mKA0xt8{Js0;Lzcg{|->Yxzo07
z2jKK$-0OLvtWn2@PE)Zc>01(i=$Fb4t9&8T7iF10Qe(jM6u$j&(reC*n+qYehABPj
z_ODZ@mqfO+dh7#T3@#?2Z%on%B4ysj3&kyrT!J`->;fT0R(C7S?jUMxGKz$trC}@)
z+}&vKlFCNq%jA=23|u^vWp<GVs!g3>74!&=D@?LOb85*w#2N1DH{Rr$qlr|uQL^N-
zQ2<a}=nNXsPkl7SR;ZdBx%W{!*&lHg4Hd>35iHeC`+SDrxCOuD-^jQUJrZR8z;ReV
zt~A_IMPSlE7?4<4n>zn=#Y?z9V=;}WBSq~!Z@I>%yF(|yQ?ur_EdA^|=~q|#M=8-%
zYkME>x<7p`HwAyy-~4E76GowNiY`++c4a7N;`0rny^MW|*rObVCeS-c?Q;$4PpcsA
zG~&GI2pHlE1)k*5K-x613lVMNC+Q$AvnW|aWXX4hxOKkusE3C0KMEy##QO9<{IdOm
zsXhK|DXTnqWlOa)O_e>_pOV~28%6hQRv;sY7tJs9>P=0~!l$<@FxPKuFVdpFH<AKh
zyI+^=u<i{<zZRWfiR@Dy%9F9`Hlb3DIQqWJp4ig=E0k6@y&y86wFmJ^?C$jPaQp={
z(D3G_u4GRT{_`yUk~+-#Vag)HS4QPIVXa;sy_w5&zb&gr$cJlAqa@qwR6hVOvLT}p
zn%Sd!oIkTV5PX5jy*}9=Crws(*icU}-Bv=e&;D$T#eMSc2W8?Fj=8)>>>h?U=OHk)
zN4(@${K-t?G*gWAZu^HpI0^+$_`?&v3|wLdjKdS5z3>Mn4JidN-mQENI11QV1op2L
zu0y13tatg(zbEhETrdxV9!TQWwQOMZjPfX8kNJdjL4_wt99y|&1;glY=Go1ninNOn
z{_@cA?3#!(R?|)ipQcL*GyIqB0lUk=YnOR8Xujlp*KPo|?sOZ{&&mx)(dYASx$Kaf
z!b8Si$t0tLyMFnx2VxyB@1jv@^o^4vP6wPLIYG5MTGZcW&`XbN+Ds}fHkvnWjFr{f
zGLvRTJeoU>I)m+%@GP__0QW|`H42@P^hdI{yRO$(%N&(AkAgF|fq(48gA;6M`n}w6
z*R;E8zU>?0&iB-&AtQD9oyr7Hj~SDlYD;kC=fJBsV$(6b=#X3Nth7&^yw|-x5BMEY
zt6#b9M|LTVR`)7d2<BZsjKDMy+bL?b+70TD;>pOZcpZc%<MZys<8;?}&=YpkhPgDC
zDlZuGL@OnQ%5G8`ancNk;BN)QK=9!YytOw!vH8ldQ5cycbWgg_9(JB51q`e(Kg8Z!
z_ljHydUwZKo}XSa5gDR*(@DknyiFlKILXi0)$&R2em3f-RR-m7AxQ!D`Rf5LcA<<Q
zRt$Ad4DAl7d2JnqNS251ieLi|0+tPTe(}aQW8`SuB4;fns2}w6Eq`%BmnQ?i_;+z{
zl!yDB@}lZ7SFmTlf+y}s=xmD9JnsDZiF_W5)&2-BMsm6AVl%G|JqbUU%xJ;+?U&m?
zlH+lQbDi>Y;GsvNC$OS7(WLXJI%_l<`HZ<x%7S7J(EH0867CH@*?JX2HLAcs&@n2B
z|EN=Fr8Px@+zz>P0%R@+2GwkZ9eKFPq7CP?hlPAWjlS3NU|7c@__^T4)adNs2O%F<
zEurXH`wc{d3sG<sx~ro*jvF2W-4wDAkiw58O!W-v@s~=IqG_uge89GxA!Qc-E}6)U
zcEg=6kZ2Cc9jbukv>a@<=5(;=VRS4Fdzv6-JiU=Wp+EqB!1Kg6QBy6dWTZx*uLSpN
zYJ9Ie56YF<Lh{ws1drmS8}nfY^x#stg(mN1ff*Ud$Wq}a<w4wA%b)pmI4lIi7kFO1
zd5f3CaV@$c%x~M78)x{tuwb9p9&oo3pa;I!$HyE}dpGW8F&*>sOak!MWaOo4(mmo+
zan4_GrCz@beE67K3Y+w*frTmUHwwD+o@oN+5gMH>!=Cv8AK~)0N{YO<bpur7vAX>3
zR@TYzh_qd7qfa?7_>=laO<lk)0W74|XJ9atZRhk(c4d@IIb{`_8)KC_<Tam`p#Ly~
z?xa_!c7)2}IU8mTr8JRCXu*FNy&%}>d@d>-`wS)aX3TM*-G2UZ0Fp2;VL<2}<iC(!
z_VjUB|6&Cw$y1@U=t^f$r#9L+k2pM^>2=3pq~A(JIPRZK{EJJFcSS&-2L7(sev*Wm
z&Y4dZ%sDA9ubwZ*@2HmIQ^NE51-xBVov&r*%cd^DNb+4jT*_eg=^UeoH+TF+wTQFO
z6+!maXZFrN2^qta<{fFMv)>gly7iF{b@q!3tBtYm$_@@f3`?yTb=|ZN)fvY+?$&7W
zADMsrQYX_68<&sqXbi@_=v$OK8j0h{iA?*VYGo?fTYF+Zp<377N}a{ha+>>N72x{*
zjAiO*`GpOYO!+j|J$a*7?WaG^;WrjUdWl;4d>o#*{G$Z1^j0+y32W(hlqvCr-e20-
z;5}tW!HqM`%ZWcH_~UA#<6PI;EM(;R>4kwB7Vv-|k4`<5@v|^f+cWw4`h@Vy2^p#u
zl2I>C$V$Lyn@N0pzX~W=hSEwnhE|-zHY|7V&0_zN_%FG*{#9i6x5Ab4#{A2NkzL2`
zzY0<P$x7`H*=>R;*VXYm@18R-)R_&Z)jtQNA9?5b;F;a~n1^dta2W=tQz5E6u8xtg
zr6gaqr>^;cXei8r)sz2=h4yEDQ)}$t_4M$sq6*Rc8)k-a=$DuA`OsvZ#iWZj!?@gL
zSm(BA+=3Shy$`tknq5MUzeox*m98yS3(*kw;NknhaJkKK&b2Y+u%jQ+R!^U(slI2K
zKO~z*I}z@36<s7ya4eY0uPsH2g)PS!0U!K^-}oBgGd<H+tOzTZ!*jj5_+7ioySWbk
z@VL>0yP?)lpEc|Y7=%!hHoWVVma+?4jYxmfc(b%~<CIXz>eHNEmD+Kr%M2-Gbj@>D
z5Cx(6D14XII2%M&q4~UehNJps{OQ&k`9>`itb46%^_}^J-=2?504-scQ~K@|3Jr?w
zD&CSiT*G(unL*!MU#})PB`u7+g|M6p)N-}ruh~!4sd>9(oBs^kS&`Hl@Sy2ToYgnZ
zAB*69!^Kof;<Ddk(9Gt)JaYZ5FyEM~TYp&!l`W9UkvnF<1(VF4K1pqCgn<0_u~nFB
z1GFy!G7eBVrnIC^jHrTVHSnjyX8GgYKP7|yMp!6-Utuy6Sj)y9)6o>PUxkeA6wEZj
zYj(ulKFG&w1puB%9(uK(O~YLF_RR=R6Xyz^fQH@XSPHmm_bgCjF!0s_Q#ID5w0$Yp
zxUh!_I@Bi_|0I(4`o&vMmrWWjy8-?E(kDo9qC&<Flt4+yoPUsqf{w+O<j<J<D-<$S
zHmnn6dV%HPv?{fXclF8~2O_0l^ICyjeky}D4O!pP+0g}2Kl^fdZW`Cdx{VTT&)^H*
z9@&~vpDho&4fI}8Z5u#UYZr~VDTR9lnI1{s@r!F@DTNnu`L*S5g}2?wECctw$O4W2
zMC5NacgitDU~K!ej&=SF>2(-HdRLn=cpXDf9Xo>}MK|e6RTT<imTi-T2}ZkpQND>z
z!uF<{?L@)r&>WksR0zw!qhBG<(I-}*&q{-7<Oi$a+H3X<)VyhRDi_>V<2YKammr2C
zahh!tH>5srLnyh>98Hm^fLXg^xuSS8feN;f_nYd2Q^`w|=HHntcuisi#$w)g^O*<t
z`n{76mh0S`bag@?_A+%k`4+IQdBEk@IxK~_ToJ!mWf)D9{`!a7b_MKon+dEVaa6~(
z8u=|xv|QkI&fkuW++GbI?Vah8J1)K_2_?ikBy*O2^CVVXtH6U?cmvDa&FgdD+pA8c
zL#h{08AP}+XMs};$I`y(b`Yq_S9D@+LN5zqOgfR|u%D($vz#3B37StJ5CP#W_j#$Z
zbGXD8&z1})5?>L2!84njIL66#_Pi5Xk=0H1Jdib6ov@HdiM~PPx$>*qcs12sPw601
zJnSZ!R|lT_j56Am+hA*R!M02wG<Ikutfg6XGfA>H_PUKyJWG0_U)Z%=2c&6o-RI~z
zqy{(kz6$)4`X<jtbz<V|9%MOg^j4?sQC7bc=CqfPNk1$&6Vq-IT6Z}0P)KwP)sQsu
zUyGA~uJ!F~=B-IQ9x)<qf)m*@Aw_6>&u@-e&3csINYoVJk3N<BO;b>4l6oXMJ(W~q
z@Zrp?^KiD@^4iOU#_9J)M~Fh@Q+64@>BJKTq4h9l(15ho255NC>O{!!YFh@SE<xAJ
zb=UhPy&b*T5GedM>!((F1jlCEr%Jq*<Ovx0W^>9s%?2VxfOf)Z6~|)|98sGiOvC)4
z%InQnpuO3sGS<_>^ZtPv8wwW)=g1zTt5ahLNNOKA_+<wFM3a0}78To|a+=2dVQe8s
zkZT53&}RUOe#&6PSWMO#)XfzT?>2(;+lNBNw|KYXe3CPlLsl(77k_u6sknqqO9mWw
z13yO(a=3J_mkd600T$!9C@pH^8BG8EK|<pb_?a6UH}Ts}u%iTkh6m4V!oa@l=Bk7H
zb5&mik-E#k^QD?BSK%`r*urxZOTz<Z@dt(DNnaocLH?4qQl#+5W=8zZm8a_=dmFUe
zEcLbHhUiOX8W+qa@}WK@@s)&@tHDU;2|kU7zy%2M%4g@sRI(ieX~^t!9Xwj+N_4S~
z&@80U!G@Fz*~^T2fg}#E{(ucQmjf@K5`Ha~)CANHZ;Z_5E$`_!vCR4-;3bWeoKHh*
z{ndSXFA?Ke*5mdixj%zdB$s&Ix*t<G<@VUe3=F*v8iW)n3)_?wHVg8t)jfYx4bHJ7
zPbf{;tunY4zp^WZA4^dLmDp8@cv<h1)HZ()a?Mo%zEp#WrM8=X;Z0S(>8#Fn{ClH&
zPJ`C9t@Mh%cCt3+6aq5H75a1D4CuX|u^J14C4HWENdk0Kv`qctG+gF<@89wx{^}Lk
zU5^~|j+b%GBIQ84UX*lK5^Tglawn2p<~NU5aK6H)I;i6gH|)Mc((Jz^-dv%?R1WT(
zDl2?J_xt>39e+&>a!{Jdh+6Mvff8p>TA-!{vG*r%X9NCc=qa#Mt9GF&<=0IzvP?Y3
zms@Q14MtOTqjm3Ve%Wlr_AgrZ{pVeu5nq1pX!^4xJx1)|mB?`=b=vWImH*VWHc*v+
zPeXQ2H=|}a=>ELat9u#F*HzK>{7sE}nHRME^vgr*&9}1VBK`z|0gBLHF735%;Xm^-
zIUG2`qM9Lk3E#Jv{aj)t7k-!R$$23k0frqc^qw`<bkAM#RoVj<J{i@v+kX@*vt2M%
z&IQ=$fb(<5;zl=(%>CO5n~n-|W1ErAqiJr&0Gw+6V~0|VrhM`EoOPm;NI^52FP7iK
zWyjI!)Tr>z$*?I~*WCKkG*tPN->a(zbHNOI{}3<)|8DN-R9-9gsqtvW1|C<X6R4dF
z-I*MuhHYx)+UM@qrW$7g7Zy8s-*<kc*ESF0vulaV_(@6l<yG-J?tfpZ9_RG%{I5^y
z@g{N2{_k(ODP#FUI1m5#04FTbQ2qPCgG&RuFh<{V6<}E1k$F_pHe~qyzjJOr&|IOq
zAL54Jo9&m^SuSs2@b83HO0MeW?B)OY=|R5GCtk)@?m~mMSi~wg@r_UPGj&bUA0qRy
z9%dnqJwk;?g_y|%hv`9jD*qi!GRfrop95dyv!Q#ZaReQ0xd^^PJIZ1l!w?8;2nI!V
z1IHW``kwg3RzeC74=}g%7<eP(LbCqlgz-_%z`s?tDsPf@{-^wX>bE-+Lu5njjJs5G
zOte|N{k|^orB=~8&dHV`UAICiGExsatq+P+xBpYi{m(xApSr`oGo4{2?lW0qh=)ZM
zELae|XzRts9@cW%ATsz}9qNg9%ca?m#D7mlYfzO`Xp0z%Z0jtw^xJc?YD)Cz&S{#@
zW^GM=yW5}q^snf2zM&@yEhH$x>SWzC*;z5traA0JzM;J7@I&L8aue&(1L@~H3*4pW
zwlJ>-p21sFFa83@e5V{w84xqvnqi1;$9tqXkIRMvt^2wG5dI<9>zo_<7AS3)Z_@Yc
zMJ}Mho?%Pd{8PV<sU^E<A}n$5*>^|9X46?W)7CAe<4{Gdjvd=ApEc7mXOzq-J2LII
zfzp4nWl??h)^;J@i-BjdO^<D(?xzrbz60W{m9HW#X#R8h67=$C#Y$_t)DWa)b&p)4
z*fMc++eL5Dn*G+1g5kRjZOhCoOU+w|^~8^p$D@gCO(K9~7uiSy)O{{JlD4?2F8u{O
z+aI)(Gq6Jo);Ha)ca$w~V1E`I^I;51$piLZYD!G)zK0|dWj`e=YpzUa1X|Xa=YfnO
z5((d*-zC^aJ%hGA0$8_$e7T+p_*EO-IclwFl00W1Jyk-;uXJmA265lPBa&SQ_lPgR
zoD20On6e}S!9eZIq!$?wCuw1}O7UX@sy=^vK3n_21^p$SvvC5ZkuO>U(x1PW4MFi^
zSOZx#s<gZt_BiR(>E_-P=Gstr1{h2w<t1q@S`SL<Chu^-=vBP!24tO1JK{_Sn)A7?
zVh>md+6Es5zP-!#<+DY(Pk04w$iV{58WZDQ)fhT-rjq^Ku#V7jrUyTB0#dW<4cEtG
zxQ(w0_&<$0dL_$p_&FI*T%-E#etJsts^mLozc$tsCj^P_7PXXFRe6a|M<P!KPE36n
z#P+~@yiWpu`>E%PrQH3BDSj_J76JK@OC&wy5cf1rvUEa~*U^!)!L&`~J*b}9CWeK=
z)CI8@($Hsy@TzT`YG6mx3Jqx-I%XQopRQ0OY<AbcB{!5fkd}yf$qcQn_j;ZAj{<(A
zI&xYSUO0Z>z%R2HJo^C5_&b*s<4KgFIdlnQ70PIMx~y^bc)>WbKWFkQG@IH4_FW*`
zdSEa8Re=Q5F6dF93bw-P%je(UD6w{My|6e%Uj|0o;jW>v(jI+r#D?4NkCXHehu$z-
z@OGCA{ndJuCC4iB!;qC8g5!Lk5$NMevdQc)Go9s~LB5e=aUObO+%tWXh_$=a$12P!
zgZ&aIxo08xoh8^i%glPZd>8n2vL0*vbnps;YIu?p&?Q=xIj_`{ET4qM=zr_&9sIy1
z3Cn|4x{A*6Qvf6h`eEE{*t+bbi_1wh;N=}{omV^knNmC8iMvq8%OUA}Mi15`C01BB
z9fzb}p&yL3O*#OCz!cWyt$4vl0E{E@vLdf}-pOc@b}V8ZCCjY~4FHI-JV<Rab)HFt
zT*1}mZfeX`N3T3hEzB~spij<sL8-eBh6{bOPi;>OCvoUuM<zAuZ1L&4yV!!|X3QsA
zT};znffa7ft3e1fblc1*)M<I%<KrrCF8S_hvRCna!+oVK-D#Qkg@8l&GQR5|C=D99
zYl*y#KWY%w4!QYJOgnLdZ2k4>Zs7SPdrzV=`H-XOAm4-l3(mQ5E%F;z0&9&tUPIRo
zlGSW{ScU(I8)+e<D2l3C=+JS)Y4`1>J%!7G=wb8M!ZUBpJ>EVBEfATc{F9yaRt&=f
zRgdfrHzxh0s3CO|O~8a_aMJAtFq|J3cUj&<=ZS)yxflX8#7OjLUaH$K<B*I=(cN|D
z)0bUet;pLz6_B&}W_SKIZ9t!++W_zpV=ZIz%3g?twd$^Z+dV%zX9`hIS@|I6V#s{Y
zGx`p+QJw2fmM%3c3I2k|fVrjIof&$iS-=iTKCYf4?BL7F{vvwk6q5}2F!cK=Y1UvJ
z+cL$`5bv`5y40?3M-c`E_q%g-k8KUV;<|&B-Jy4-x3-m7$vl2ECWU#)WiWvq&Zi-4
z{G`bR?H3*r2pAUF(vr8-Z`Z#c{SZhb&2=I(k!>eblkGw4mM|Vrqr=dQ@-XZFn)Jxg
zw2p}%CmUVzbi<Cniw*Nj#UKDU&F`n_scy3$kM%S~n*8?w-UE@%f*u)nvc1U@jrcOo
zP#?8nXM_>003QM#Qe^?2AM&GpOxdFG-kD1D;|p&Sq2i^XED!IZaw5j;k-3;}v%Wo7
z9N`5kov&S$6yHAgaq!@zuld;SMj}Z&k9<W+!I1K@O<<w+6>Ht&G?g#>Qu)_YTor6;
z-rgP?`TnJv5x}9{6(lfHo|`WmshRQ!pC)?UVb0R^!7d}&tpaX!Sm5T_O(9~q+{wC!
zw1Y&2@g~WaKMJG()&D)h<QMR(0=K{ij2IZh`-8#9C<xil*g!fM>rl7zvQm5zxE-3S
zWhBDhbxJ)TTc(r~TX}EAX}vhyyHCBW4qpWGSic}l>>(@{mQm2ITHFFJ=T!@iO`x9~
zx$B566$U_vtG~cmLwW22lJbH_U%CdG`aCD#s1etb4=Rk)>e$=;ldvlI!krERugO;%
zbbia3y2y~=&mcnfn(ZN<Z@@sOob%+)<U}$K1kbnMttS|J9=GoFB!!5m!-^zafN7TI
zHec?c`Ka~8n}Rh7A4f^f0t&8x%E^=XT~vHf$>C$DxYN)hQ-cTmq1X5!T%ZRwUr1#N
z=_P~56f9)AA&<=KZcR8K#jVo=Ff1qQ58MQJ-bP%pOZmavL7`9(^8BaP7LzCUK-8Rq
zQ!8Hn-0DDsGF#7<D1dyQx0nb=%a_HKSm^CVT`0PXzhHPHsEwq!2qW{zEV;hv@i{Lt
z!If<1{V>ns)e`Ev)K5t)_nx-l-awpTDv~=agIF3k&iXxMSRUg#fTlX1BPl%|%5;bJ
zw8*?_`R$kIWV1|#00gALOpaD~O^ZAmBvG_9Vg2U|fIROn#+m&&lAgOLCjgl^i>G<P
zhh&0dx@SSl^b{BITxM?Bd5V`@??B`Sp#mW{f5?_igK_5cnY^|8>f`ZWPEhg5ob7!T
z7`%2y+Q0SQWUuwqJE<Uk_%l+e<E{|vI&=h41UuP@yv6<6jdQVvV;+!Ig<VY@sa66I
zYk4+&IR`bPvGadFK|!bg{8v?4Fo6=if0x@sjrP;uJKu=5Rd?TrbWfa`To!<55ZpyX
z#6tz&(mD?7C(=)Vd0M~RCZ46;@TYxuefPnZ&pLYmV$9ic8||dl(*0mvhSeIu1IJ#k
z?Yz!E;+M@@43Hduj2)AVJBb-ZEkD}ef-)&or{5BB2cMX@YkqXMcNmZfU2W<qisba0
zIG2M6{Tz}GzzmBI$ViOtPmgUJFQ9jRVz}gX`*PblqZv$Jx(lMXr9)rdPMN$xy-1=x
zzJ@iZ${#Ajtj6eF$2Vx^Ls6wbXZ!1yc{PR)b!Q97iTQgxJ|w%h-^y?$uC(PJ(cg>h
zwuo%N-#kR47MA367~OBu4+|6fe^e_B=8cGVBW-x6nj2@(1u}~Z&5~^^t^0DxbgLBM
zT?#0si#Zj-<?Jx+_byF_{&$^6ffO$0qKD_ZLzi2xeEiFQL;kQ87D~SeK4uWM*>NTg
zuH(<$3EcK&Ee@Ut1|hwqR=}<K4Qe#WD|^a5W;^Yz$MOYh4BprFc?|oHfZUY)G|KV<
zlawryq;}?OrwQwbSnkl^hO3L=qjNBIClk5&uf(7fuxl~c=Hve2|6~E8OR$be29+m<
ztl+eg$MQ5|MjVoja~LVKvhtesV{Kxo{R+Ak<8lczOhcYmO{ufY{>5-PYh`PGP;J~J
z{Fm|%cOUQU5zS)QXTv8Wsp?NrepOpmKbHK=`7=rb<gW}uZB_`k4?+<VnD~>*$3D1s
zEdqfhJBaurlfq5ROy<kWD#S^DnTfA#JYiwyk)k!Xz{TllXtWsb=q}mDKI_5zJPWz=
zcEhcJa8TYgVkANH6_3>-+RDUa#o+hy`?}7I;LF+^&HN^!<~Qy>$`QzC?YYs6r9WGr
zXhrNcYK?;%73~>6hr(TZ6jnogc)hp6ux}RRLVXl3bb$cGb$z!#{`)g#U;CFRiDi#E
z#<}E}T?siqpCYS%4+S%y(~FUZ@f89Z289JNMO?eoGnj7F8KLy^C%!1&V2k{~t=gy;
zK9e-6(gIm^lft128^}w5HvOERg6M<_iuby>UOv9Y+`aDDI0*aT#ds1stnMzFd2c!F
zQ37LU+EP}M@oZ4?@29P69Ntk<p?Py6EFUIz<t(<rDo8cX!)M)MMRDU%VT&E~QIJGf
z%7KsEc&=9_p{n@suiB+svb^C4Ybz|uy5I+dgbnhdT!)Ds!MpYvLA`Htwef^CSD5zW
zPj89^DEabfwc9Q-%G26Ea?i~cxFPIYyDAhCJEsWbk9;6<2?w=!Cy-l0nJxtGU7O@j
z>EjUsw~xn^bX<q$5{VL4`)^hoQ4|a<=+K}I@W8cBzcG#vk5lQ&(>0d@2?V-FU<_te
z(D<syuOy$esAmapkG&xCRLO3ctn0RhaDo|rRa)PRYI}{s+j*6X3w*r1FARD2&UfO=
zHO_{~R_Xk~nb)f+sxKHTEi(7jr!<#OT4rv(tp}=`e{xs@xOH~`dq=Ds0$F^k%{gwg
zR^GT0|9wdD*#1aMkeNuTNo~3&Fy+fan>T$iQH`Vu_l<FNs`Al_5^%M3qkx5HD<o~i
zvANpidrzkv1-R|<aD!t|?ZakKi>9P8+0nWA-JgmyI5Q1Rp`VP0G<BiL+FX?9*VGAy
z8?WbUxyJz%g#<EML6qOWc!NkkY<51*jl{i6+LSwF=WmzIMyH&16|ZPRyS2eOp%j~!
z^D&e_qL~-+!xL0%%d>espu-cdn_pGI>3%Nb0V}4Ui*b@%cu#GLNKE0+9aC84Hv5?d
z3(MPS(K1a{2fk*@MS$gNgqfJONNv`{UCqq*KVqW8e0T4D)p%?+$OCF5652G)#dDzT
zP8EAM+p})jce<Oo>I<8Ho+h(oQ3CtwhkR?i7TYS4JD0&m=yXBe&+PkC_sTO*P=>G*
zy+_)<-mjT26jv`9g5Qb6zg74H4utj&j&7Ul2RAz~nYU<uzlv_FRMM^XmD%qYA+6ls
zvbs<2SYbJfrNmP!W`cCZx$Zzh5igixuYV$s<e_}PE|P`jTv~PZTCep@uQ@AyDSnuK
zzTEfqCdEgA3|~wmURUlrUVZJ=vt%MI(yki)T+IN8Y4{!Tencx5_1<7$Rn4<Lt{MF&
zfvf59L65++exbq8RJB7@WkVs1-X*ODAZ^ZzP`dK<{`(23AVCEHcRAHTBmM`KeBL$P
zm>h(jey7nqGNdur)f?XGFXW38_b|$=uFmObZz^nu@Fu^OnAgbk&QPYwuWURJUrbKb
z{d)qqb%zSI_%&}8h@0qv9StmYE1Rz=1@x9?RLudiw|2pmSNkOY3zBeC%Dtla2R{7!
zQ2&m*`N98BY|@%rr0pW15-3iJA-QbXj{Jwb#Eysl3sqXfSH@(K@UK<&Q&Bjz$FSG`
zvIcJIo`*oPe=r3lPb8m?2H`y#30I7?{AlHVpNS$awTxt>&dhvfaRblhJpPx?i2wJ9
z5YB9)AtRK*Am6yc<@8p}CNX?p^JuqR;=)>bh)kgXK}mA~g|G-M!N6#3GPh30kk9@4
z{V)DYgJ}OP3qjh)%CIp<M@Q^|^j^R(Wg9X~loj!$Lh2;)?t+Xb7QMLsg+zmV|2;8_
zd|#=DJs9CKy~|R`_H@TiAyM!puvExYNaEzdDvZV3LL_{Z6({yp`s;sq&S155_!HlS
zC2lNAL^&mjYW=KXT}p+gK>b%5;c(wsbC9R9Y=LHEwLx4h)^j<6Zgrt<15^XOY3gwb
zbdt5>{cw9_ysbjBWk8);3$hsz;M6aPwEwpIu~^|bjKAb8E!ojFq6*<BAQJiKOm9wm
zUJ$CRBe6VZ_P(9krXwcsG0ZWsci7@3Y)5%(NN!<VP}ut%?K^yKMjgVJF_|X)^>Hn)
zv_u7LPFO(~EQ6&8-B~Mis2unAI=j~Mc5!t2w&La7Pjh@}>lZL3C9Zh>3~XU^tot_7
zO~wmp64}x*CX}eI>$u!fJ-E~Q=7y&b@Smq|yx`ILfx>W8e%7QHw|moxfA*AvtYCNF
z<iAce>g`aRc<7B8K%I4+bZudpQrhWeEh*}ZsFGKtde+H8J`7r-h&DY~pfO7$@Ahd~
z)t+O&_e#P=jKZBnXGR=Gf{nxEsLN1Of$h<6eb0}=e^F(xe#@E{YdGV$J4XZ6gHojJ
zDWIB9>Aphj5E#7%kyrXODK7a-Z{94`G_X)4NCB4#4fW(42jCAS6c#$Pze$!jI9u|K
z4&?AzpJ+m=9G1&a&6*rht+)Ipbrp<UXEKG?8l%#t$8x>#OJ@e);{scFR8_+#(__A4
z5iHJPAMy4`YLgcz7vlvl{cJtAgo^r<hR^^VOKX6y470uisdzic>5#5gje1@Mc2p)Q
z8&T#3sg?eyBr5RX^cNxKBMs)`CA{qX_|u*)qg@I7`JaSAjvGe`4XeN--}dHuf`y?C
z_kH1yu~L#^^4S3&wt%vclQq@Z#=5fa{&E>rrJrUC*?;paj#X!e2ass`=PSEc(`&N`
zPD$&Hd`qJ3dF`QoNx^R85d_Lj>w&RZXoc=R(r0-1(i_`ivo@D4IX^D;bri0=Ovf_m
znRU$rT@LElN}i1eg4egH4cA($ataC}+qFySmNbG%4?G5h7w5x-S|Vn`176zU2{j;v
z6wP^e)~H%WdW)pauRgzZ4hN<=kv_<+m)^tLz)DWIoG+@?3#B^ig7`ycvFhb*$sTmf
z2!{$7)>5<shGYw~IMz=x&MYNXZM+S|l`zQrgbW7rskf)}A%_QapA;R8n*|2JEe=G8
zZ{`}nooV#2&a*vRd?xG%sTh8=jFy>q!vu4^69t-A^k5NI%5-trGMmY1pulpH41NK=
z-#eJVhU_+w=ZtswJP>E6{~Lw<vKi9i$BV?S^I%}&>F|*+OOcqYjaiIWGv9E{o0e`Y
z^43`2%}#}UW4bXDl<<h9;^FxQh6%H)x5+a22rWkj30v;XYph(^-F%$P)N(pLK&3i%
z?aqk5D<beDQ2)@8i|T$G3BY63)u(TpxBv4vmk=4I{K-D^c1$=hum1ny?5%^^`r>a<
zT#IXqI}|IW4eq71c#%SjOG_ylToR-d_o6KhEfjYT1P?BSLQ<UI9z0kcU;EuVZ|2V2
z_wv`7v-dgK=VUVbvp%1-)@RraV*^WMBe`LIeZ@s{-BpqBTjXlwm8v4s*j)g!9Mw+e
z%MG&Lnwe)-ofCV1^JlMkjAKZPmVAzx4eNb}^y?oOF&r0#BW7R-d<EbWK9hL}q6UAi
zhQCsVedVgXQ%*XvTL*Hjlv3)%m<)UN%L64hCM$?8jRj}(Hhw!wZ#W-8wJ~fsskUB>
zy@T&r3E{X@4!<0(l+(P>*(#}+{>nzA%$Jd5o5=_n%_R&>F*O2gn(4~vR%#5;k29ip
zI4#rvPNDO@&H8L!y4rx-mrSPB_gsrZm(P*f+ZqXG3Bv0DQRLo&<!3pg3vC8(`9pNU
zo9XrNS8-H2VLEJ*CQSo388lWCSjSLYw1grWLGdIh7!^ThIj0->g@_#EDsQM~Ff(>;
z4&1Z5O@uKDGu-pjUQ)qS<OsjGvzE8MB~A|Xm4XX)m{*}3rT902_<4^QxTekVB=)nH
zPY2ngo;~cN#HP4q>R9yE^1hH7iagb4zhaWOLJT=ir#)k@fAuu7kRf8`!y-*y7S0+U
zmc{lJ&|QbS<k^ue)0z}v0+4ALEjA=fLNJ%9qS)N+b(RjZ#lDJ68d0T5Arj$Ov<ZKL
zcf@ynzEqgx7I!#IXx*@~nbT^Ajh;>VxS<jUV~)0k63PQ>Zgjl*khiN_eGMD9*y0hH
z`s=>Q7YOZ-C1V^|vfDsYx!`F4hN{Z$uCb4a0yX7H;F8lwz!v2TBdbR`Zl<~QFPNkl
zT1QN8ISz|SlmP^$mfkJ&Q40EFDIRxD(19-l)7U`4UGpX!=WpCNaFN6ACWc+xBs<~l
zSS!=Dp$lO+qfeQL_jGe*izUs6ZC-Ah?c1<^-Ux|(iaHZ}bRmj`Ijj*>sHu#UkhYc4
z;Dv|)6}}xeBX8BRN$va?zZ91MB4F({U#o`g+l29V)P%j8a9k?cU%Mmk;{rDI1-<}^
zHCiD8Q~EeM#{-g5#16K~`5v22EvF#D05gKtAn<_{uN{k<-_hDS0YNVZT7WNKfN6H^
z^Y%|=ShMRqpzmoWD16?|h<)TuA%~Ysx<kaqhpg?W=k<)ftez;1-^X>g=WXVa3zl!B
z7kv9K6|`x6&cQ;PUzR6K*R}18!{P`r(Kfr_b>dMA{sxY~HMe|8C#D(}IqQt*758m%
zOef5`Hi?1SixtZ29R$m-x(@@{<dHsy2aJw=#-Y73kLoOo(NPHo*p2>ae&gXarwnEu
zn+e+OHt01Q3PL_H(*1cP#@DeF7^&R#c%BSg?eJc(xLyE#`JC@iiXwsjQNo~4g>JHJ
zstfj2iw%wo$TESg_S3qf2PiAK7_>H<LmXZTn+gp0wa6@dZl~~=>SX3bed(S(9^CsD
zW*Gb!+FiBhdU;ZWiDY5CpG<nR>=}2WLQQ745TR-MV}GfTonOg=+q1W|lQu}t0(wkV
zT+(>@T`R@32V0qCb#$L6Xhsp8iP7H6J=TsZZR$(e#%@#vpg67UYC3?FQtCrW=l&wk
zT-ip$FgSyYa1Knl+AkJU@AuCNX-`^v9;%zqeS@4I=dTKSZug;Z@l%|1NL{P+?P0uc
zbJ`PT2>VF64ktAfoZSYMpv4_8A%^X?^A)qfga^8rPR4nU?O1#Vj?;yz^trsmP%H`Y
zsX_(`nesKV=L`<f9<3l4K+t1$?*+?=&s$4FM%C5@26q<m;cg$&rLP;vDvi|Dg~$z$
ztLLsWLFhW`jal?syt!!RD4PV~`_!g0Tnv?CVs!F%lZuFMcS7w$=Y7P;PFz8M-|f$Z
zV4b5gUDuDx@7DgLKl6Iv;~Wn*dWh{nY=n2yFXKXJYUw+2?Xr%_NJ84<8?C<j#RTei
zs2nTzTDlYdO7-oalhbDFh=4c@nr7HKw4YxvbV06`-Wf4p_q!82fVb8(+&J32Gl-ln
zA48I~+YiVX+M5)kC5G=?8KsiWI-g%#kuikU2N<>C9%y4S>or{GK$w+_h-j(WixM8T
z(W4LwMSyMA&d=E%mJ`{o;+Eu5?Kf=Zm(3fye0G<Z&dPWu=xXR#&{x-cbvgTsRiZ#9
z7OvFp&@^{c>r(LX3z2187rHS!vKfca72lqLckw!rQ4ZSsF4vc4GSl+54<uK7s}FkF
zgj((ENL_B)eAh|2YXZ{>@SU+4*ox<~0neO=&!aX>3>lfv7`j`u8oh^Sij&rYkrz`2
z1_rYbojh;bi)qXvb2Q5@L2^jIUcl#t`zsQWJ4Tw!V~}7ojiq=g^fo%=rD^Wr3_YG9
zB@(<JJId1iasWuW%zVryU!BQQvfH2eK=vI~!sPWEP)E-=gV>xHjD*vxbvXyZYEr?j
zPnCPEYS3J8l{G1|T(Z`UzlILoIHAFqrF5{l_g*QfFwqf1N<9=}97Ap~1BBAeL}e;@
zpP3VmPbcv=rg21k0%4&s$j#d&pFr(hcET^Rt69U9xr+6V<bl<p@y8>&ehB(8Nud3U
zrTHHR60QMh3-r-B=q5BLF@z3KR~DE)io5)#<_{hI&RJ#I6$k3;p$Tilz13&|OLzPx
zLguM<!l*@AiDs5Zf9jjk(q}?-@cQjWw5MV(gcS_ihc2J82NV`0Iuk;Ob3jYq))MdQ
zR$noUVTub%oQ1kcX89pwt^u5~E^m*#(g%Nxhek)?-D2^_r%lEFf{A&={Bd#vok5mK
z_?C%oun%6yJ1v$82FY&Z-x1E_56?&zC>-A8n7T==NwGYWKI$Es<2gBZc;G;KWOE=j
zuwLI_YET3mH_gJdEj|t=#&5R(>)Ge{$bC;A?FCHk5JNb${gOozM*5Cg8+(}qo=GYz
zoZ^qZZdzIC88cOsv}Bw6aR}~Z0tOy6&B9$vVjBZ)eN&t?B`MI6PUtCyXLE&wJ5ZUe
zbK_0rf!+#l=5wRo*u0=~K9^LMk-cG{awnhp^q!Guo9SbbVbi--Oh!edN8mr8>%{>M
z2uQ#~`*OiG=2l7i%<XZWyg6#oE;D1^M2Uongun#^B#6FTZD^vsG)U@@$>K$u&I}ns
z>_7M#Pl_{$>iyV4;*xClRd3B6P|rS@7D-T}wK;jR@n+KLkICyTry;=hzQZiR!*v55
zjatr(k_Se=XKDY)mNtnrveUcY)R*@@My8FO^-}R(=0f6{3itKK8a=XvdSrdbr@dAS
zpA|H0BUEk2_D1@?HJPLR<{xdZ&(MUQzU$Md9Ec_G|7b_IX=5h6@)iskEUH&Eb##fq
ze(0ns|C&KXNPJ5*`#`Y4c@heNJ%g$QOPm^qm{!(@KVuX8Rm<zK|2RgRy328&#kaa7
z{`ngbqE=_A#^ux#Ig>NF!)R_Ct@9s$Oy5yLE4T}F%4D!xW2Fp7#C|YE59Vzn+D|HC
zStVlIG?;+8x}H$bO+!dsp=bNfhhGQ0B5;Ci<FK*mWiEOpns_G~&0ga8hU1czU0#nw
zqu=|k3>LqhoT;ws{?@+sWBX~6(|&C`TW`+uXV~7XVcPEcRinAnT}d0)Od$~}y0C3S
z)^eng0v4tAuirZcj01RoX4oZF)W-@;bA*h;q*s1Rw-wJ6kIel|V)!474<!4)#Pk30
zCjJ)<qBnMo^Ra|N#*6<*4pr}Rlq>(5ryBn#FV5`Jao)9$wY{*<OtcX*d;Aa32GRXX
zv+$;&=jYX@<w>A;yvi?@mCA4Rh|#v+F>>I$$IBZ_OAqmXadx@NKM9CAIotb#L&OUZ
zpJ=<Bd#noby=~Xj(A!ITmpzeyYZPO+Q4R_kcy*6?AKA(m4rgP`ohtt~bJ0lnFE2yQ
z3N3sX;4<HKGtY>T*x33ib_>1J2LHV>IMxT8zZM_W8vd(mRfSnWvRB*w(Sx=A5fN6f
zLXVs+{Qeqa%sJ{L+zc+;oxVu&_mkd{Ju=|qcneW%=m)Ag_!#n;m?rbz+GbNcvt&*w
zuh_txPaCzKr_437xS8XR@m!}~Qjf_wGzT2r{qQImdkx^&<D--t_K8%dyxE#qpX>&!
zOv4#lXzBAT@W3g6%De2>dLyxCO~k3-Y1|?Etk#If+I8V01XjU3_Hz-bB8n1mxEwPo
z1F3P2?d6YTuHw<9wKfNDtFy^>K5v;nXPk)?xmDl^PlxK6zCJZI`T7)SHu#+6jLiv|
zcnF%Qewke>xZ3=X%`SD5?~D#yfyhrdx-+H+$639)sdNxcHGFt$->vE<gkpFjOg;47
zqe$>_JhTC+U9K{DS+{mE1+Kom%WPS<bBZnaloh8l348GF+x$LTP!n3f_w>`B-aaKb
z=qUQ6!bPOQt5>+fgi`J@Je^RfA);I~I-h$CZ-`eK?9sUfYs|)JZoYb*C;D}~oEIF$
zajLQXVcT~$31q_*d8PQIs0HBYkyF=LvZ3d0?A=*XBC4M^gp!^&OpnTuzW;h4K!5E6
zr~ec8#Sd?0NV9Qo_RJeas-ft4H}Gh+XzN(T*j{M})v*&-bb9w6*~!-n#ZBE)@Ceg1
z>A0vIm!a9>=6<n$ukF5Z`a4mH@j=P8(j<Hbl-?ulV-i<1s&>A&xV^Hd+I}OYvFT98
z=Y-6-Xl5+disF4S|Hex=?M-yUO$L9(z(dE1ohH4|4EcAp{3QT&n|6|)UzAezpY%eb
zw{JKjkhz{GGd<q+XctSI9NhH|im7`Wq8U^PSvcvBl<>L)96qxoui$k&+K<3(kn51e
z8ty&KBCVxJZwp`;Cj%08<mHULw!}*p_v7NP9P-iVo5%VBmBOxxbTwUe_^u6qBD8q?
zf>Lm61Nb%vXVanRL)IS0j_c^2Y}t#T5LPyyEb(aS-?}jjbi}edfIHg@8Rzb2V@aBE
zSmN4vMK*zCdX3`jGI+aSju}G^n+z7-X}hJF*y#>!8e-5^Gy4u=y^-vD<GTFu<fb21
z;vOzS4(sYExwOH6jzpb2^T|@@2+Mba@|8YJ2w6hl&zd|DqT4tR?^nKSSaInV6&Llx
z$7j<Q_pw(r`I44F;1{B`?gzCa0#_5sy8_yh$9%l+9W)#Qj4R`v<qmKWFEzf#2Jc23
zq#)roS5m8<iTpnIV37_>Gvvk+qWRBc4!wRuRGD};yWVjIi?%I@tl4#3)*pCIj}xbe
z4T1Y_LIciZ>h6R3r4rWY@TrLhX0HTS_Bdb)Rt!SJFOQxd`pd|jN-fE|<za*@Bzn8!
z=4^a~_kpck9puk6^;|8i2(RlF2)c|-Ux_yeRD^vC15{Y`XI@9Z{0ywv$ea@PQs0jj
znJrs)6%ZiS1Dp}PpsdW>c*ugZzhu;k?d0Qq3G?unRl0#a{kXiA!S^qRS8Fyl{8aXp
z7`p1e%shFkCY}kie3FK!@6afEwHwjA-y+}jjrGX*HEmHSdVz81;iJ0^G=+(F*T{K$
zZC%w^1TA%h@#dxxiD|QO$1|wm;wx$=h2!umV88$JbGt*-=i&0>%$RpN*y40u0#ZP^
z-N3Zo#GzcZ8Vj+0-5M83_M)ef@Hn8vr|EN!1h%`^cj)l!nWl_Oa#gxwpBF3pZ=ORB
z3jB<)5G4}c`Nie0QFz&(*o~NtIfKXcqfxJU4mp-yoFFrgRd}O)%JL$_v}qe9bB7+g
zB-NgM&|DO^kB29g6V<)XgHy|>d+!Y&N0&=0E0m-TnFX74yC4vQPe&on>x)3D`Vwgt
z>Wcy%>R*PRoO;SV=k32dgf|DA<_j{v;5zd*OSt0Z8tbiA?G8<qkGkjZoPXLRu|x9q
zd;X@~SkY)a?|KRq6od=s$}5oKTc^AH(8QncX1#(wID>RfYZVr&v%Tldtn)pN!S1P&
z&u9ki^B%537MHQG4&vv|&w?LnFQuJ|&r!twro(<dx1kVx#A3NRag%3J`<l22g$f0C
zp`Op;1%yJhE^XP|@7ZreRtg0)F}gK!@NQyt5B$_HHrDC)UWQ^_rRk(<rhN)s=DhUY
zUGxUczTuw=vo<=6COi%JcCCDiS5-tTM-KZ+-okU}EM!_m8tKaSbq^OEh=Wdca!ce+
z^MwKZLmgj=ROB4=O5c+md#~fOE3+$u>z321JNHVEW}PGIWj8^j)qWR600@ovX!Db4
zDgSMP2Iy1wAtbA9FsUTdWIzk<fU>_oZ{Zi1^6-Lcrd7U4@da~+A)S(cdS%9B+o|Jv
zdcw^9l*>NCL%zkADwVWC0i_s91&{P5KhvprmPq5bQabMey}_+=DG;bu>=#3FPcRUN
zUHXwF8%<Q)iX<HY<K4LkU9sWuroLO1TPdC9IBQH;Y|SJd*Pf2LU*x6iE>bNXadtdx
zdhlZBl$_rpn$SHia^+#^v!CC?(&VGON@Aw`R;pS}txUNYzv8U<ceIyDC3fA6$AwC@
z_{NhtLDXY@k7l`hF`6}+8_k)*x`Kh$@gg!}(VR4);Xd1@s|CIz)E7SHGMeAjBGr%0
zg4VL25)ch{NeWsPqk#7!7kah0W5nD%u)9QFvo#6)9LpU0-L_n&7LjVZnb)D3#%Q&r
z^V+0kw872%ACP4RS)|3f4#O+XR^7Z6fKtOH!o8d+@CCJ6Cgq)0qbbn+#x(OV)mQG~
zn1c_GkB-kon1O(wTyn*-{^k0xXCD#kcdvGzD*@4mUQ6y4t95n~Qei$@&t*U1xy+Om
zIUsR$+tndzQgz)-Z0{rCyobTFFQiUTjA)Uom_0%6&n}=&QA~r`r=8Wy>8sq=YQ`!!
z3g%=kN%G60mHK(2B!%TuKVCuk%=!si854DEn-*o&iYzSBGiIG15w~&2<@L<&J%IU9
zYqM)hnO7YC@TloVz*|4Zg>z2S;bO%3(nP;D_Bo!L{YqMPyNs!t&bc@leWgmRkbW*s
z3RX`&a9A(LWly`Lf`u49DuZ!Wc(f?G6+$*{SBgmK!%ojMT2`(n+pENWl?pb*dUNvf
zw`FclRivOl#Rx~^LCvbohqRPOzYZ$2F*8dnR!)p$ukWnDAvSrAiTldtS6?iCN@ulp
z1Az1E60XtTZ3%<=*(0CaVh!5erstLh=~vwWa=9xe-S&vg&#q;)T%E5hd?;w4es)i2
zG&>`=6J4M>lw$g>z;flr0d~HdIhr;ZH&xgbtK$HC$8`(0b46l01jK6D{BWP9QsT+M
z3SZ)Cb%2yqotAnf#QkAFMP*I1jk=nqZuHV1jS|Wwpy4CoZG?C5KHvUbOF4IKyr6yl
z9XWFDwR#;z)Pw%>_0}jRT({3I*APcYh!DIo@Zvu%z+#sx(JF<6<E{f9iU!5OLyBv^
z@x%K`uPBy$Rom2V$HvLk7J;_wic`xyzwxI_X)at+XE43AKg54w%}^)a&9gC(<2M?g
zKT^zd2aQB+<hs-wB&P)#?O{0YNEoxw+4Icz@cnz;J8ng&FA^7t2iXj1UzD8>tcikR
zZpHYtJug<H-z3M#un=jrodZ^=t0W=c+;9{t1JgdV9v*v*1yTd1!y4Z)xgfMfx#sWf
zF&|dXU1@AOcLvL#hupOtRhZ8{W>bbCFMZ}XgB#mp?`(fsXZJhUd=RU0u#ZHSCo;P7
z8%>WOp6fsic%(zAZ8GV&c~ly4y&fo&<-o+J%X}Q{n??N{);_}7L!wWGVZ5WwJW(L_
zFK8BZv;jh5(S*+Lj6h#XM<PcA<7#h(qwZ8A%X{C96j5O|K_X(t5#WI1vz-MuC9$41
z`Z0jjVCG>A%?jT{#hG*mK9e8Q0NH5UVZ(A%$q~^_M0860vl{SP(p}p#?ffg@oNHOT
zthAMz&13mrR98VdHp0H2ev)fL1>)9_dxENFci&Fs=S{MFdsjyurl_v14WwpBXE*&l
zWFENprzkC7nH{J0qBhfrZ3EZ%)!Mr(w)Nk9?R`31sh2jKERQ1n9hG4%XK9x~X?iEM
zWgw@K3&&{BvR1YJE;Ds!J7J0I6pr;s0~|IlBMA?ZosJm)0#C>p>!EP~wUfM@A1<$b
zsbe*<TR;Pw+1JRAoqhLme445OCWF6U!;xf(aCGHh><6ZDeZ(gdCpFA_DS}9gG-jHd
z6M>!6z6dXuG8-d|;5*7==EmBS&X~uqmQrqC^?h*a6FzXV$=F%igS(VX6gqESJVvRN
zsR#t}%bN^NyJp1Zq!=4$12a8MjM)jqDWiLiCBP#}aAy}MuV?S%=_xmK=%l3`_&fvo
zMGF7KpNxn+2yE=pgjN??>TU<bl;6-^(%yCD;iNNY@LBv_p92^>5es)xR)0Plmn`yQ
zJ^fd#>Z&eZ_y5ADD00y6n~b|^)c*mTj+i|8lN(i=G5!NuGQTX+{=H<rB>nr&#p@Aw
z0fmI^Rvn8so(B)B1-$AVF`m`KoMNtqLX*F}BqAFxzqsVM!#$eo)=GHI9FFH&+Rb=Q
zs^jusW-UzZOtIY7@%|4Sy@Qesg#SMg>3=t|CjH-mXc)9X8pM)<V!L>23={^n#r$1}
zCh6V#uYUU`SvA;=Bwa}5z0jaNvBSNi;f`dUsAA9X-$$O{kl25wtCIakf>%k+gJdp^
z3_%aC^~1s`;(_u_T`pq_%jNfx;YDha>7YJnwnYc)ommVLcb8%WRP?W?V1+)H_#gf~
zZ&|3Yx@O_@#@cj#I(>Rqz7V#_uf-p&Fl8F=f1aU{;$OgeuKPB<lM+UujcOFP^yX7@
z_B!0W@|RSN3&~;*L1DMw1TZkJ!if(;{}LwLUE8GU_yNZS&3F1%AYfJQ$P;~!+NpOh
zY@>^bxqGn`4y>j-p0za?0A*0^e4&EgS=Br_cMCq%IOU;gY~%kP`y{rYgv~@ewZ#FB
zGau(P&utFfX)W`t`S~U1*?5~)%8#jK99}j{h(cHTm*aeo1JA`pM6dk3xG;7S@`IhC
z2?_+JJKpJjujf!Za%sww#2c6Brig1{C^z%`y(hA?CJ{$*L5x+5G)`;K(omLR$kN$}
zHTona3U(*eP?r-e$nk_57~X?yg7nAwYEl7{uho#oHi^b!tS~3w^kbBUne#7LlXKG0
z&g!qHfh8?afr@*O8gi*JnYdW=+kEpPfMhTX2PcLP(T6ZnQYilrS7}J^v|hi@-u6&z
zn??&PWb#bcQFP_h#DJmkv-oDx+Scy%u%~f{8_tSmgK3g_C8z8B>xBlg_ErJ;h#VK1
zgs=Eb-t)4EG?xV8o0`pN(G>vTr8ly=%)znv^i68~+Oe6__jsUzl|BguOsjX*$GKDc
zP^ciuuw^<mN5ZP2bX)DVE@y{;_wa;HzV&+16e5dLqk?sgt%<dZ^*$at7(led_=x5<
zFz9q<M9HrNfb<$|5`IPXI9xW4l@11$n;;L8Q^+arAbJE-eC_i!0n$#8j%^tiw9Cp6
z(1nI)ZVbrqoL~@ghkmOS-eN2*5_L(B$1Nd*<{QKL(h`(N{4s%vc*KUM=7|jwKux}w
zS#>+;aDow=ov5<TZj788%UFL`6zMy0`Rg>>DPYzThb`{LZ}5}{VQZ)CUE;O0by`4H
zPC?P8;Cd<7?98PFY`MzFYLVI;P*|PQ4wzr`RPJl>A9csMYD3;tzj5wZ;Q{6SY8Eu8
z4)=RoMUiN-+poKLRgeaQARwr2EYtk=M#aq4F43dz?W^~Uz6x>agvD9M=x^pKoi<Wf
zj@i0d!;M?hKpok|Pj~xV@P=!r)3={la@j8G0Zvvu%*`ynp1KbPhJB)i$&~Ne4x^qE
zW$*MgkuR{iWxDq6z-mfaW@-{L+0l_UVnyy+ew0>yJ6B~PQtoi6F+rL+@Dj2>JqFPi
zg$HxznF8uC$#ls&i=AJCv_i@&?tL<m?tH|?GPV&{;bagj6}&qLgg-p3z^RK%$<**g
zh`|h+B?meKURM+(N=wkWS1UUMcl&F2z~apQ71D%2uZA&)rfuT{cU(T2p`-E$tvhn|
zU)b#xCJd86T935gd;EjA`5E$a<R%g0wW!x0)GA`4sfTl4@Z8B(0jDs6nT5u?lJtWl
zn#oy*Gjk93OvXYINC2wB4%x<ilI9Y09Wnb@*@7I7UNx6cd^tpCIoRBur(&tul7=Bl
zwv+Dw(7|v8eii@`f`HWuTdjs;<4r$x?{XqM>b=(0^#e`*v`8<Zp?!8gxpQpg1>SxL
znXV<KV{D#267|MwiO#K=#xh_qU<oH}b-1d1iM#qESY-(e=Lj<4Go~=rt?Oa>lSP(w
zk}HTSYV@V(*#53RAXYzYVxkAE{kid8oM=vs{BsVHEj#(lWA}S2Kd#w=z{76$(VU8}
z^`Cezo{l*zd9<q@YGI#RiXP!kjS5%>u8w>*z<x^mT8~(LG*Ti~=9O(3at}f2mP3>n
zquc2&!fv7GT^zeR>l>t%%l)U9gyNYuu4vNhJl^t2rK#r`HYY0DuCF_05#*Nk*+n4f
z@QqpnQ~`Ffqn(b=z8>^v)A1Cn*;%|)_>FC*?M?p<;Oy}bX5S|FO;^v{@<|!*XhHfo
zh!B27mO&+)WE?d%@V-_}w(%wmrz>iy2`O{tX%-=Qd@XhXy}r=uXYs=tNU&D>5<BZ?
z>aCP2@&4z}&1rFHK<u;#*Vp-IYPYzgclVa|V?D{;vj(2aJ4bj9(v7zh9wxXqOP=le
zwpU<XcDPTJAdQbCLISbY8XW`Em@#QHYe=^c4vP$i*t@`)TPGp>H0)IX&aR0?8^^nv
z)l419YRF=npttOolBt8BqlbDwSq@IFWS=X+p4wyY+ASdV|H5Ul=PZ^AmzIwd(9!_@
zV(Sl!xM!jP92rLWW<L&+OQ%;O7SLCNkrH2HNEOOEf4?}Us;X?x@*zxmSq8#Q*ARK_
zS-wKA_!4|Au<qgX3)EseMu^2*t+CI%5!_gNv?sfnY~vB!lL$R{`@_R7gjAnLHvo0~
zZLdR(ya%z$I<yJ!!g6MsW+;iE$f~7m*l*e)b?;OiA(!PNqs2n_GxgKqAB%3Cdj#iN
z>{{#PZjsOp#e_4TZlFajIb8#G#jpCT+X4660_s9Ra%Cd7O-ny`BRpr$rN$A*K&46Q
z*2Y&L>_I4qL&0Gg`Nh-@0q8d}eZAYE|K*Of+>>rICmpc7QTaKx7h?AMK(_@TFXmn3
zQ?aV(7x=P`i0^mL+(2bY4@=IvXe-X3^OfYFQx^zpkm6c-k{ra(e{du)9LlRdiC>OT
zt7LM%d9EnsT*O6Mpp1E0gj#U-;A`b=gV>t09f$Q)#9JMS05v=4blcBSlVo!DWDch`
ze22usy3ib!7Cy5BygNE88BIUvTR|k>T~<vGWz27`ld7`SGRL0LGKE5R+ZquLvfaR%
z7>=$jevb*M(XW~9;6q^1B*HN3unwYx>fJ~y9NNlL?dXMNUWo({9un}cZ3(P9txU(b
zEvkvP&gSdnLGK(0f{*SWgzfv|16u{6S&anbis=+;KMiu7z(6r8R`Kpt$KNL$2gqdy
zLT%04R|=fYFP!ep#%UY~MQt1x9CLIG7C$(P*iaiiqSL*O&RU8n4LwJHur$$pCS&yb
zt{&I4A933n)OSg!d!3O}tiBZAqzp2rVmCvdirn&Lb+noliZA?Fq}K$YdIl6kazERs
z6PktwR;eCu-#7Rv7=XHd(gc&ySy~yl7*1i!FKDK|zC~r)Ufbe&2l1IV4&}hfTj@Xg
z%*bC5Hu|?~R@)7#_9(&fE$8|K8?H3W8A!5Ou|wQ*;B!2>)N+C+jiziyxi^tCw}hsd
zrdR-YzZ&qnL0J+he6!w##)+Z*LVag*B~kWnnUeMuNVAW~*zwQ{BJcnc_i{QoK2+Uk
zsla&o^!i1EjF#9+dfwKvxYOS76(i^FI$7nwj+?Te#+PaQ&-ruw5z-kJQwpNdqKc@D
z88Yt`_Iljx%+ESOFGS~wTM1vGesKN7tbC1s>RcuexI~}D?plQ13ZF=pU{ha+obQ@c
zvEUI2KGLzE1Qbo+iGl(wEl5NJHeh2cX(G*W$>J$cAMGlN3+|=-_8P6g?~9c|p!+!x
zB4do5*y~};RrZeQezhSnh`snzmgU8pBN}461N+RVk5BV;^!AuCj;vUms4`a#KqRX(
zpQ=Xj$7(5$$@rT|EF#YLXi3YgE?mp(t?lrXMZ+`<uFDwtN@y++ZyW6S>hJt_D9*NN
z04wnZIAc40;fpv2i{i3$(yR-wai*6AjD8|lxpOI@60cqwQ|uaSdNbfTr=NWnoIb!3
z-GONeoXkE0dCgdEMB;t)Dy_^T6KzlukmOz9A#u<zJnd_HO{8E|N$6UeUPSgC8s+OO
zy>YnEH2RErh!~RPHLfzyJxNY{{m|E>!VWkjrn{Tg3U5dcFCT|acUMh3=)Exj=X=?7
zJ6wMUsyY}?ZJLxNMab)yQ1n#KmbleE`Z0Ty^~FK&dd!9z(#As!qWm5iaH&`_V)*>f
zP)$eTerdv$6IZtWB=hXtBpw$|NnrrJ5|iBiuK+`tqYoPmc^}E3yz}M+T9@;^+5oyC
zIO-wj8Jko6npp4U42Ng=&av6dF~HaPjoj|hE@0S>4%rmDQQAiXeeEgjFae-zjBgO@
zd^oM!0F80>+@oovM0z1Ht(W#%{}4|9DP%d){euYp7wY&ozW-;KpVs7GHSj;xG37is
z&OZgF|8CMtZyDWA_%}L;%C@?2I4Zjyl)YT17pw@~`FBnu>AyI@&PwC9{jH6qrIp4|
z;DfZfD`@P{+P{=pXQqFttNR>7mX*9dSC?|;pg~tmCx`a2;PvelA*9wu_U4Sze^T^f
zEuPfUn<AcV&&I{_dh{Qj?VTi9>E9BYmT~mJ8Xg<eR#JptOcaP(BVlujv$uLhkKYdZ
zisc*mC2o92<e#geOv3(U^7`jyoq!?={P`}Hdn^OJgM@|-m+Zs1?o}y_iZSjjXB633
zKI)KkN4Nb8yvnVkseOhNeq3xJ`3oG~&$d+aq3u>i@Us$2|5SA0uz>m1p-i@og&)JY
zUA{vD;r-cfLMmsA4J=G;4Y8L@x;&W5S5OAk`3EywE{Z8+PJfu~Gx0U$JN73;yac2~
zH|v>UtyhwT{)If2VUn{<*eCM7EzTMf&n?_{3(BYd%o&=Qe=cy;34o41AEXBxl-rmr
zgndw$V>_NJvB?-e$j|)Pdp$eX_;JBpb*_0+GBuLw^6izRm-=b-CS&8%hKp~nU_}6{
zO7QH<GMAn4_}O3Gyth#KLgCrq#)$*@Kc(tRo~7^NoV5RJQ}PKKUjAOs27ptDkug`s
z4T|IMSwB!Q4~Pw6xz5sDl=K+jhG*==kgzzZD*{-o$&(W%Cw%R^rpLVB%Y(px`FFce
za&Z0q_=Ad_W2ZcIok5b;sKgbNY7~{>-Ji=k!>4S>_2VojqQ%EQ>3SjGX48Lf2eefq
z7Gr%p&Ks!%RJ1UDUD=YakqL=vpG9F(xevK}I4sGr+;J>%EaL-HFCO}9jKyKQ-?Q|P
z3zkruZ~zDYnVZl5GZ3^EK#;D&iZQ}cIV$qadMswUa-KaKdEAdxJ9cj7C)d;7v_K6Y
z92VL6^Eu}wx7vHcj?qtkX;;;))tpvLdGXx@^P|_yW-_nqXtM8|(H=V5r1V4PrEb%C
zz3$BDeF>}Hw-!z_m01}5dL{ne%uezv-VIBYY^m4MvQuekY#DxY<Hjy+RniWCS_k(1
zb}TMgk_x=3K0Y*u5yBbDT=Te!BFw1HTI}^6AVa{smVV~WI-8{>zKP%qi}WgV$1Gnf
zd3^PV?90l+@)FwRJKR?y#W+CBTf}0xWXSe*QT6gxaJ~c={&g9(tQ$nfPWji-(<W+;
zpB6kW;i$}J8X0Y`?}ClX>_S_k954~2vyCexpr?AcCbOejQoHhsC|s|H(d^3V#(SqF
zvK?7r-QlMLp`Jx1%v^q%5z4e>5y{DsVq7=)H9zppjWYXyY~GyE3m#8_@2#=WKKf%8
zIsekPhHp2W<aK7!T7N|L2&@0&n$RZ8`H7cmsTzX0yJN#iY>kW=<j8lKHxiZ$wUD?5
z%Q<01V)Ziv?&40}PX)-+y!t`bYMZZaIIeSYSe!Q_fmk*Er;B`hIB4AIJL9!KxJOW+
z+ha1(C?@42u@j{iFDzFMU~cXK{V$oRv6skY4uuEZSOP&CEJ1BVqDKc+tXyoei>`X!
z_`^Dg#Wxh^q1SF~J?j|Cm)0L|LgJX+6`}S-XONkrbmtU#vf$k&LbE)tQQwWgCb%oJ
zsDiEb!*vJbrwXS-ak*~9r4)=vcsl$-v@BS#Q0Uv-1M_g^s+^6=k&b{q;6`${C~&?U
zDHi~yrqjk1&6$RA?`I!iyX$N!gLFpaD>e>A3%cO(Sger@FQH>^3GPg*k=Hpv=mbe6
z%I;Ax;7(Kt$=bs{lhIxpLWAgq8-#IJkk|ePjgkIulkm6Ja4TncxlM;+LS~5AsH-(E
z)JIj=cOG!9Ifff|5zyUyB0WcdMfzU0NtoWlV0VOU_IpoT+*6baznRzwL~y`%OQYms
zH^gM|YCK_0&4(&U87`sj4gOjF4Sd1g#Agg00f(bwhuUX)IrlQFxlHu+w&QHIo8H#f
zvY_Khaf*U&NUPYe{VzRtwe>zZC}5wpJ)&IT8H?M%4wq5(?;QQuMSR_K_38<OP*&7D
z%FuG@<z)F}t8eFW-<*a>zoz8Z`wI|lcdv$2crc&Iu<f!9Q-@M154kVR0PpVVxX7qH
zU#`jHa&s#L5OmVA>L|x7*f?zR-6ZWPG3dpEFmoM%cHFOQ!QBFS4tsVpD`@o;vqoyE
z6+#%RW=8L#?+wnFtoMw^*AtP=4;dFh`vRiDM<GShuz1q5y{Jlt?7&C|y@L>M`3;i(
z_O)E&m~L}o3mPclmoEdzu<Etpk<t@!I(|gauZuQzaOQi8x2)i`{G^N>3!$PGGoQqc
z%BaS9J9E%_b#i;98%2NWc%rJ+Cs3typVj@HH6;aPzgN%^CI4crDP`LYt!d9TKUWc^
z)7eF-JqoYvT*KMyBDsVLm~@<%13$-;SyN7vp{w1MCeikAVlB_(ACdp6t@PEiuSp4`
zK;o-$%eL5W*tiLr=h3|;Pllq|ljy~UnylNjez#C8G`HgP+-cW}$mDT*U2Yp^!R=7A
ziZjmrh@1JHsj`o<cy2?-$d0J~0uXVs0&q#;=)6@Ou}`4wNRnI`w6X}%|E8{c!M|kL
z;~wj+#v24Cro|*_FWD1zRkScxlO%BYk<wzKY-xy&Iv8A!{7nFrtV(fB7YLcf&aX>9
zyBJWLe}>=8a37-evEn7hpMR3W3<r09B8HH1cbT}RB4RWAvhLv*hRzZJ*rKp$6%|&W
zUaM<s)f4cH2OeqL44vjZ<;Rf0uR4~np;{l6bg}C%e$NiY;<YcKG^M-{%>l7d(Y-p5
z5H@_*WuhmemvZ;v3?GKijB-K3pTN>|&jZ#W;HH<M6j8^640GCMIHJCHc!4<fhYxx3
z7{VoN5=e1*Pzn@c4xe!G9zMIKC*5RFM7Lsq5%O5lS7ACR&uXr-F>=C0Cw^y&w1vX?
z$Xa+>g0}oIY9+=_3gO{L={|?!DmEYrYT0DnU>E#cTWh44U7J--$^$Fn=o{p^RX7Y7
zSYyqmY2*(U_4Qtk3Q5M6>2|srk9I?4rJ7(LG__<k4;Y;-2PoxSG@*Ate@-tb?FhZ9
z=yA^|@&2VP@-R+>9^&xo-2OB#_8HCr^|jMfNL4pz0E)!Rp1Bn<x}9$c>v_G|L@bk`
zR7voZSQY?(Zrr$Ms1;mFzWllKGwvm8pN(LgbYtic6|S1a2+c+8da>ar?^tOxf*rc`
zMSe7@LC@u>K#2_lm#6+8<E5ffvUnEtWxhMdlI1-tvy&>zxb}}<J1W04l8O}_VrGxP
zKgLUEZ~JKP+a<p`dM(l^7a9<8QrMYlZDwtpm!wBHUVsr$-EI4LOL}|J04iF|kR8FS
z7$EL;+#?!nt&#mPK<@VD7H_xXR@06pCs=ueS*v%fFn>V%PgxNp`_e<S_Q!w{Bo(#e
z&EnZYwevf_#dG%OuV6re=>)^&2Zve7kH3v=Z^8Y7afT&6g{84hLw;vJ!kuy~!c76a
z6@ZZnePCY=3T?JguBAHP(&L9{%w7mv2ydTeLB0lR`Q3V-PJa6@F#RjIgg^X$2cwGr
zUv*v`^x)XczhgSNZpK?Z{M(*4-8pA(-vYHv|0f&$AEk=ap>l1%L1^Bnq3MadY3(uO
zzoa-I@86_2YfNyK=HdPxALRO8=Aujw5YSng#)e|$0v&%~lbIxy4FnUnwuXeCpI2ot
zLB;<gUule=|Lx+lvft^{XkrR#>Bu<{L7_{YNoB2cw~Fo`4B1B>ef;Eo(7tq2Bv6<d
zKl!ic&m5=6Ke4wrg$F>MZE5M6Q71mAyN%hmA>^2^2(A*>_A0K^k|MtSKF*yAEE$qk
z!uL;9?#y74++l*!Kf*Lpd1=6$8+~>SBRq@ME4#pJsr?;*G9xCYFXxP?KMgxdAIUAc
zA(zToLe}KkEK3i?FjI|M**3)RyDa+3k_Q{%lN5orROIyp(Ifiw<e>Y=&Q5a0gJ{uB
zKg6$qmN+{^!;0tZ$y4K}ErWF~SE7QB-(Py`oz-iJ#nUnCiikN2mb^2BnNRo5{=zJ-
zOFMqcDLMKv)c*o}_&#4GHO4ddKoSk`xD(*ay&m)!@>+s6;8~j-*7F`1DrlYCklIcp
zcQoF|%%pER`v*bPdqN*@f7+-Cb#{{Oxe(we>M>hy)fWik{I>n@1X>BuZ}4NN-kiH4
zlGX1WZHh0;i+{K<pNeDyJUFfyFwN2t;gTxH$uNK{a<^8f15)o7@E&HwPW|cW9W=av
zxs6;ixR{sI>^XhZp!PwAe>}r-C$c2$5DA({ZHvvJw<NN>$G#YZs{1_9wwqO^W+Jxw
zKH>UhPTYFm$FLwobA>+OxKgT(2{pD)P?-a44GVx6`n|3ZHY|U)?le5m#~b0hIP`I6
zfzr{(oI4{jLCckr(45yB-8MQ(Kn@|7I`7aP9{5}-wQNhbV{y3C$}~7~=kTEDMFb!4
zyoxBY(Zkp=xw>tt7{ydg;!E`sw8>LmGfVnMUu(MbzbRyqeCWFV>v1h}DKn8tf(^fq
zlNY?PU+t@RE$(fgh_+tx+`4PZClhj7KFLMbo(2m)6L-{G1}+Y?t_<vxgI)qeu3ccv
zoE@fjh=DaCuXcmh99p){)G1erRGejFczX2wNe=^;x=JR^qGpwNFP@mE1ve5iM|srP
zD%4F*N|QIoFMqp!GYUyrR2H+(jHt%J9Mqa_ctPc44n;Qo2A{pHS;@qCA5Bix^z6bE
zk7O1LNymrjbkTYTGkLsEpo_J3vi11@sW>#E!`-l2Rtw8a_`I}}PV9uMMEsNKAe)Gt
zhP_qHj*eE*3DnI^Z^TjlV!u&ni05i(AN!(6a{a!g?}A-Wb9X0hxx*R7bbNPn%nROi
z)`TR-iU)D^ZZawO`Lmzv;*AMg`Xm2HnVB2mKqb*4{Q}PAtk~$$)9({JOtUL?et26>
zsqQi3)?j{)!F~UE<G1gp=+Sou3ul~p7G425kcGN91THyqkpy~RYjA6wR{|lQa6`0&
z0%fnN@UL&_-H8;juDC2&4@o@%E!GRXW`mdz*yB^_lq~mZ>k%SgdYd&%t13nVpp2r?
zrU`fgU($x%L6nhH2|e0IiUzBdACAn3bgQci(GHRfZ>YQWvt^xTVaJTVW7raAb>(UT
zI7XBC9~U5s$6AtLg>&bvlVb;}c$us)9TP79o}p$gdv~Vo+_g))dTGgZTOs0u!x0hE
zJHUDGLm%hTHiZ-!A7*6-p2ZEWNh{OgfcM{2WG1S43LQ+DVR=a_+_j;C-OtJzhqSvs
z%Hh<OC$=uUqqUu8yE383WsSXyObTIE#~#uf2@W;OTyIm~x!EZ=WuAtwayiWlgFC%k
zzrx=nj~$a=KX-Gl+R!lHsR$00oPK`PS<~{^RGyJfibg@EEqin(jJaL-AX}uBMxR5<
zS<IJ7e%3M`_xro3+V`Vk&T=bapXYmvF`1zb$b=T(6!|YL13UIAnTMg?F&73Ag3=!L
zuo{=!F3~B(W|Z$NKFT2I0uN3hFD4++0mXL~XRg)7PFeTQ@S|Me>yc*F=8t6<|E=jr
zxitfJB)~b>oZIM@G?n?<fRxZ1c)fSE<7cVhCsHuNE-h6<sXXdY#cTgLA31t`P~Z7D
z-pt?-8tax+?niNruPaM9xRKpqici^o)Kc7<mjZw6#)%ZlMn83Jbvp-G>JELv`Mems
zg3rfmWwhsSVdX8ee;8)ajyISCw|cd_=|9~%PnJ1DduRIEJ2oK(jC7@S?Qi80BcptS
z!KTHCR~AY?^3_#*AK$YT>V(bn!^OwEnCk>2`&gm1KrMbbWNL-)po4(cCp;($r=juo
zoBOb#nu#x=WYPTBa8QhM(jzPX+t4iA8PE4ju6*~r&`(BdT58G^azCR|ESS8daRQt^
z7}>fG!<Y^pwDi~E4MNjt;!^KgjnCe_nO5}MVckcI+Reu7dm+=Pr@GgqRXM#>m##wS
zh-esJMl-2}9wkOlxBWd^H{g@n{GU9Zg704DC{n{S9$)`D<%MjwvO`knZ|h;P@o$Tx
ziqc9z#v3o0M7u^tjbCr|WpC9CR_)Aq_QlT8a2JLTEA75bSc4LZUOj$%NL8fG){!?x
z++Udc+oBt`%LJbJS*`Y57^@!Wk`HE_(?fOHfg!x6FP*$U=Je{00TCu2$-btpaA?iq
zDx<}HHMT;N-N3@LGq&N2b5LTDsQuM-k)Z+*?hiP{4Hb$<kygGL?D0KE?422aDc_{K
zZ_6F}Lu~4umegxZj_)#$YDNc+_oyCrSipg_D;`mFMUUkpS2>@Hd2ch>b2*NQD81zj
z_U^n2+l-oZ%^`|=EL%x>v(P%7P7+{257O&JY2Mv1qz;^3HF+AE6T5(Wke%U}KF3YM
z>U~(OBJ#!aE(5-L{&LfeMC`8H6#czcYiIK{;XXwU@+;0JbOSrGNHSPdA{|4QMWw9}
zE{P^6<WvZHA?*&-)1M&kj1N>l4D7qL3b?ep+n0PjBxn@gmYYy$j>OH*JSxhyFqBUD
z)v7h!<^vIP95F=#^oSu;JvC1K)HU{RF|D6lD1JJ0L(c@O;sNj{B2Ok-eu{Xju^oLe
z{c=R7HJ4E%hFCA;ioWj4f9zyaaJN3a#gQ+di5W(K0D1I`^pZm~9o@(o&y4I`BU$xP
zVIC8vG)3Tli_-qDEeZe6ImjU4%Lh__5Br6QU0YS282Ua3aeaxcDE`~2@Xp;&{=Ybg
zVR~Z&d-^TrcjJ+Z*1|u@MMt9lMk)F_w2OQ&XX3XIJZ<fBV7eA+eS{CxLqxH^XVuu$
z6WwUk;S+PU(aLB?@NMK@%R#OGEC*RPeL!!Pj<0llP?zHJ=E?k(6^Hw$gy-jLbv-9X
zI4<Vko{V#&ru-f=xx&9g%DeR9{(pfT&noV24$BIvy>r<)PL>IIGC};D(b7BFD&b(|
zwgCGPtCel;LC8NbCvXQ|gSYTpA!;`9X6BQRw&8K~sq^H!@h8&&_ZRi3r<;nCkYuAj
zvr4~f;jU6g7f!_Dj7ysfRB<2dz;AK9Vy<+&U2`gQ)H`-pG798!g@TJuq3@WOLK;j9
zjVb=Xbz_~Kg%8fw1ZUkwT5M|t<gJrDmK|cLXeB1<3Q?ZFLwd(Y3LChCC9X4gb&uj7
z!Y<j@Zl8__WE=fvUIWkO`lEborp%&eUnIKu%umTeixX;Iq6W>vUb;F$`t-btPt%C^
z3zava!k`sadHd`~R#K9lqBo1R=WS^d2U^NyGu~!7t+}GwX*D{CmtU8DGk%HI>}k!2
z<6WG*BRVi0pOr`!RZ5+T#cBNtNfvSWlu3J2Q2fY+YxE)4zFr;fK*<u@GqE?o?uv#F
zgxL)*`moNhW3YCy8J+E^tDV>p2UVP4;e!^U%R0Un@B1rXW<6G3bZfV(>tth7vhaUu
zEpz`U-G&yD9YS&?)-_$0?vOBPuG*SG-khp07Ot2OtiS(IXvj8xMuFia#0rdfcQYX9
zQM5GU4M@(2t@5{G17?vJ1`;yC%d2xdxi(MRmo{QxKVAN~gewKMkF4&m66_k@F}j;_
zUMYLu+gWABWUb6=ok68`=5D`$zD0V~JYb3Q^*3xt#|FgM5k6|9^A1b@0ms@W7F(9b
z2$LFlg`h1aSURBwTc+v^Wry|KA%ASr@4}_Ay}RBudjoy_9Pbyg5yU#qMCszZ`n@Fh
z6zM9KhdJi^+{cyJN;z{N<<HsJ>z@Z6S`zlRW5>L>oRdS2(BkkMJXug;bfNQ&3*KdZ
zBtWtR7}oxf97rgYxJ%wRrlfC~HBU%@8Trge*w39*D=e&if_+JTV#AK1@FH`I6=!dS
zv2vxP<GF^WJNCr*v6w03J`KQ02Uly1<98DD4YOoWX5Pa(CSu%umU4xgU6fBB$H4l?
zVqZi+5b3Fakx4M)J&7jGUuS$&O_Apb!n#Lr%xFj7p(STzSCqj-X?GR$!&hNlEFKcS
z_0a~wns5_4^F7Lr5_N{&_K_(#gKogZ&t*S2TagV1r;(y6nTCWfEmr9Gk|-&j7X=Jc
zB?vocM8yV0r?6f6jB`82SR=1x)_F~JmRQD$S?h37S6rfYM%O9KHsFdKw*}wfb~$2M
z7ON+r3P+L}n(6^y+`jXtA<VU;j=MAZTD8kR2MzGn&?5yF`+5WCT5Hi6#7uqC%V<?@
z$`T~)p{*xzL~^XAM`xwWve>07x1ZOum!oZ&m6(QhnOp|fnnyAOu&#835{K7am(nwR
z$DhnjL%vgT6bI6KcN;{CmnhAJ@{Nt4Z6;-2cyAr&bK=`BQz$FWoU!+Jo&1g&e0SWO
zD!MUj(~E|YLJ|J4c|2&M=q8^dH?$?4>+q}u{ro~@2+*+qE`5s-*4bE0&?8Yd>h*2h
zrF8E2cd)0(JDVA6`(}jAwL=M^aH6|rz}rNd&(`ai6pfp*C-}PUSc4l7+`2LRnaPoP
zvYU^V?OkRsNx}jMqZl~17;(_&Sfdv&D3__LDua&fI?ONq-~YbI`gZ0*s-K&Sy6y7f
zoQcg6%=+0+j+JQ?1H?(5>Vy6whDe>t9Ik&~L2Kbl<thZP1X35#45DY<k0x7NNnI3t
z%)C{zZLrip!C!tugO2z*0!oNW5UDjqkdOv@z+>!PjogdSXj3!NFP#MB!I{^iD1yyF
z%;G{8Kq9Wx{y~7E`ceD3p6A2bk0qnOSXgc_81=F6t>Ue>qs2VuBU`aOctqo2iOE8U
z)Mqcw>6ZKJgoaEHaeS~7JhF-y^iGp1EB`!S7+D8wxOxxFriFw*NcSRMP%FMvtvTp+
z*m`<cQQ&o7+5re^y4*@JxZ$T81LG{-qXnmKFJ5oZ6`)4}i)vs_gvIyEltmp0o4MgQ
zg{(c5@|~TV?b-S7-IqTuFWsu$v`dTT9Mf;o77Gh2r4j~V8clQC+{|f7u8#3(l71J6
z^WGhWuJeH#+hGgtW63hpXA9ckw$;~$PfCw|)m00VLiyHmi3Fu6-Vg)o5r6Vxs4xCV
z*lHE{h<yEHbTY?|?M*!xuVGyAzWjNfrfTgWub;(nZDQrPpMMhl4zd7IS<Bs1z!ckL
z+|rUNVi>M|rE>oC(AnNYhBT3miNIF=^Qv$gf%)yJC#$fR_(KsT2~S!E5%RKw{%H~4
zK#AU`hdKTaxSV8;@@#?}1{YmuZv+HKnm-PmZk+~|GTG|J0l(FHO>c3Z81|Xr1|F?7
z+uIEHT8O`(f1f+wQO!i#^spAZcieP?W;|;xCmglIq!&7&Y31#{IV{mx1GQm45ZSKs
z8AF32>&M>CbPXywUs6JbD9>|N<duzq6ZiJrxmr`k%bv(k2s*U%yi=OkZu`}!5$5(t
z^egwFlj`qLytKS7OEZG~L60&a#<b*~wTj)%<WsGdHesfl-G)7v#TieUR=}AXv#enL
zk1QaL%TIl0=I{#b+Q_)Y?~kX>FZla<U{CV>aZWz6X}OsX5@s6qo#bB?$2bY{W@P|T
zMw)M2L`|rAr@+?VBjP5%<H=VvZg@HtmY=T+i!g!t302kDI=L5Zp3c!*04@G--)J7y
z`Em?m{q^a`B9{I8;68gW;a>;rxZH<-pRf(WWBuzO=w3nxF4lCKn4VQW({T8~Z<P4m
zNgl4d>1B<je4O7h;?wT@y7d1#IkYNucd;zHjcuuV&O+eytaw3Ni0~eL%0fH(JI(*o
z-kC<TxrY6o+M8+(tqx|knrEV@xz(bmnW~zKqH3x+rexcuqNuqVq#D{9gAjA5v1T<(
z%u@)VrXZ0x>3+{y?|MI+^L{&@-h6u2O4fZn>t1*6-}V1r&vV^s6R=h3WL!XN7+4@#
zDKN0AFb$GipN*gf$&RB2s{&mS3=b|jfopAIPjnYq^w4~HTkCBLxL9Oeqq2D@#is4z
z@KG?>#5P<o*)GY(>?sXR`@z3=ms$sKEx||gYRtb6R=Rqt`!RzFtL3Y2Lr#S?GZXt6
z+Q9)ug$X%mIvN@&JvYV{Bh=sV5+)x<)l3HLSzO_sw(j$k%GHeUxuE>syy5LTPgHN$
z^Oj+pOY}(3rUB7WEN!Y2h0WZ9u9J5Y9QS;;JWmdj3;-A+;e~an<kr~5@Z{b}zeLaL
z;U3-#58TJR5zNE7jPZ!!JD4?8?e)k+PqcaME@ryR{$+Z5eF*F8JsHbbusBbHBzM+V
zq=kcM2>f;TUYWwT4=Wrc8Pi|q2?T{EE-V2N&{Ag2i?_9d2lB#$TvYo*r>i|jBB#%M
z!BZ!vmmQG@38YDp=`kIkt;JmDi4w*BxQeBU7aK?L+kc|h%(f`maAh%7P1$dLzD7TC
z&fUW{becGkQW8COVyXXRI0^rtZQMB2?slEDl^*{x3d>6l#Hb|ioxe^8(cnj0Uf!i1
zQQ2uarh5t!DzQ6I5^xmBEFAi_!Wj#=?Kv>-cBIxxJyODTW&x0ph6Kzr6>53#(+f;_
zP0)IS!5{o~nAK8@FsEMrRzIy~XD?$lWCXo)XK<%Bk}1WSJ#Y2<?~7r!)}neM7eR=h
zFpkIDVmAn7aO{h$x?@*vQG?+Jw}!3I!?pcy7FLL}F?;bE;5Vi%i<26-@za38m`LMo
zd?>Y3jk&DM!*Dy9a8s7VZ(4jO*Kyxc@6RK+&_s8;aO+2r9y$r(Bvn>5NKQmpnVYRd
zTSlUwqdteVT#7J4zFU^gBNUyUxF;0A5!7%0XV6V%w!VwSa~%oghn*_#2hA*Pj^8E4
zAK3Qo#Nds%&A1637h(0|^>?AmDMLO$@BuwS{1(HR;;7qSw@iw@gC8k4CDMy16|MXX
zQ@*#`l6`U6sMF^t+8mHt9HnNAU9MwfY)LBnlCsNfO@Qi0<6qwDsYQR9%^dVINk1)w
z!|1vDcnJh;rtvffo*T}azUjuj6Ky(gQ;V3ZAC{aNeses5XPkf8I}Eu9m7ynvX(rkC
zQH&%|#<+3L`udsdME(eSjo{+c+t$9#sDI8LaPgdlRReLDbe(`|yNJE*#g#XW_)JXp
z_r+pj*&0J3C~$q+D~K#o<E-s?CRy^v+g&dl3tCuni^pG`Cii?Pfbk3(iZHeur|$YC
z#8OXMG)|D_oc}&=H&og^z?ro1(_C4Nsgg}X$TsHWwuWqgV4pfO<~-~P8(3fx-XVm8
zr3k%TQ*)|>jb*jl-jFyLWTWFol5u%o8Cx1D!QKG{rYNIcrtoo@-gWTU1AvA`N>6Wt
z^e*r-tf_<WlHVRP<CWbQ>hn>xog7ke_2{46%`(rd#MTt}7rtcBOZ3_=zteeBS!Lc=
z%3`*Qc8X(qN}0`N?Q$V+5x`r0cNrs2xep~aeEu2}mJ1eS%I1~%x*ahY9F&=_6A*2%
zVO#Pz$Er6&;ArU39gZ3F^A5Ad1i-XhJwO{mu;b6rVq&r-Pkd3dCgbj^Wlfv@B=l!_
zA%r%xV6X#fNQkw(xHEewcj?0ZL)7k;RKyLAy<(zhUqPVIrq#28XNKz!dPj!VN(C?t
zW#^xCk1x*u>S1R*NA7*fim#6tzJlP7X!LmMw4;w^CE+UB!IF~~g0m*|vW2n*v7EK2
z?zc%;tzx2epTk^X2B+#bpKFagv8#w38=&&z6YWwEW0_z_qhD`ZAf_I%hPM@!Njv92
zC$T!Ut={v<__bFAu*bXh4DO_ax4Pp-(#hQ?;~%Zko1NrN`@Aq7_Kthd^hlL%HX?F?
zFJ@JR)m!^OpcZmSRI68E>|GZsuTryfc9}a#U{cRR$SouIomDH6jEjlNB^1F3e(6Hr
zr#E?H4ie+DN0?f+i)Jhw8|w{oqtwbG?>H~o$*R@Cs-%=0;-1^Ljbv%X8Y&ad<z59`
zXOpk@g=)vkH?oYkVmIa+r~YQ9Q-*h<zD~D0p8oMFpMie<uPnm}ND5BpoUX4a?mVBL
zhxqwP9lGJ(=2r4MZFS{pKT!Ny^ZeKT5U(e!E4{VrMDJQJ%+Q#3ERyZ&I(^&@X%tzc
z@PneyP@_lodAPgQG0kj5ejZyBqC{et9oP&I5l-}I)qp>%rTE^Z%PEvqCGgQ7-b{gO
z#x*5DqMc~HAmQFA3Dy0q&y|kzKSO4+K!0P(pKDC>=gxQejQLBvm^!e0G*F^gh<Gmp
z<yR)ni0ah7lb&}_6QH#Xvd_`(8lX(6hO?3!b$jnPD7cGcmK-S%L5K>H1Iu`Q4I7lZ
zlWnS4Kj+%l$lJ{;h#Wsi7?dMdM0Y$ad||&~hw?Q69Yp;8tO#=euQc5D-;%^8d3cqp
zWC)3^uBrY#Q8&NsQ0V_;*WFxdjZH8l8H?KErkf|rR~FbD2OOG`?ity9$)h7*JArvb
z-;NRp`xoJW`<GaMU)-mEyhQu^;y-D>Boa*X_pvJ)f}eSFgZ!(t&XK}IL-V5V!+&6%
zd*h?5Z^3|35G~F9R5?0UnrB))Kb~f3f>p=kuX?z<TVTG7ky71>UJR<LGow|i(-;%>
zn$AMPiPBwvg@f!8APr5G`rz-p!NlpMtnBe_w=MZ(Wbc@0QH(pXY`ZuzzaSr~Mcyk5
zJlo0uQMQsnXNL%5Ny8*YYA%q%38ZN!RzLkBRoB>Dp+^U+NY>U-nONAbERRETaAcuJ
zzgK4=b-B3wc&WL|GgUTV`(k5aCyn~sCpB|T*_=#4M?=*qcBj@s<3gGwQc6K%WJ9?y
zqO6T?m*{$!gFNHKU7_CJ6Heh@l@`z9WtR&3EpBC%l)@tF#(k`gtlZxhP5dNC=&P2>
zlbTpoR-IvowtDai#66KQ7bnrok_N95tg9qiFI?Q}r#%(|hV6OtvP36?tTm)0{Th{i
zdTu)uuuFT(jy3Zm;T5>X5;b&xbCub<WHsZY%6d`nfjcur_)E9fk#hqg<bMdQwGR$6
z%`WX-(dly~0sj)Yd0}SR_pT@A(K(8s5ebcz>_j@mTzt*{;RKAFzqx!q`|ILflu7Ei
zs)R`9{+&$7&ls0U5wT7_{$>CgRTG})ymR6$3K~Tq#VTP>EQhCC)nz{#trST{@s}?(
zR-4VGc7RfLXL@d$h02I@<tC%obZT7(cEQNrkjHi|-$k;>4YC!~y0Lg!K(_v+Jw7}_
znhG~(h!Ee2yHfFrtv-X<*Ott|>Z0V$Rb`>WEK8<`0QJnoBMl9g`1H^_St4EmT(X7Z
z7U~Z0vR8xm0Vc)Y!6FD3{Mq9BL_JT{Dgm%mB3;ROxEOo0+3L3QYMLeG;h4wW)3hss
zd);X-bzLaKfJPuim&#zy4|URvvk}$exv+xFEGi%kto7{UrtKh&qPh9PzL+KtmrZ!O
z2L5dtI!9$Xu0iRQYXf;9ZO1W^cbkCla7lIFYj39ZNNI)p_Dm@l;P9&|gsb*a-Z2D!
zm(b`8ne2f*;qdD?J~qKYh$P9@eBV+6DK!3bp>eJ}ViyD9j+D4Tq_xc}R_XhC;*(?w
ze7vwv<Ha!)%zQYx6D8@g^|p`^?yajJ3S;6L30`b+3-j8HDaT058E9Sp29wuP*6efK
zR&~3UJ_iu`N@z0kp}()>6Dk+h9O!csxAUhjrD6qGa2!TZa+*2FKl{=-7F{#uHT4(M
zhuS`!$EsnWEKhAPDeruGhHo`@V82{u^byVt>qtamKA1At>q6CxdC^TO@PZnV=Rt^~
zjH%3=XgRsDj3x$2nR2n$B%S>Fq}QY|h-0=swf$7^tLTk8FuwB=%QgZG<JQK2iEhc)
zCxn!Mt_Q6#nC~YSb-s!tYuCVwh}Qa8CwfX_5&8WeM`;k72*F9M)LiL`NH%A??uZ86
z^#-E_VoOVS-;SQ6kKI3JyRkOF*zNAcSU?b<P>{PaIsh>@^g0ezVd=Mju3dU@%iaM{
z5xkfp6waZl7`cQjtANRTrp*yu<^f!7yQkDO3Qs3rvmYLPoipnAc>O``PT-#t&`wYr
zBjdU8v#sNo$jAUm_K&9#w;VXwVR$y8H-FOlGLLmvL)dE2E9H=!+Jg-QJQ_}K9i?;c
zYU8wn7)hKR-eyQ}1!{bZnw~aq+;h3fDwFZYLfn-Js~5I&H)&ZvU197?+T7rV$=$Qm
z;RlP)o}k7Tr4o2zbL$5v1%FJ3zE(}E)Fw|vGPjhy#asAXNr2dKhR{*pJV7%((@}ne
z5H-hx2$XEkrTNs5^n19Ze$l5!bI_5Q>nzF#;u8Fhs=Io6P5RkrpjN9fSJHbi=jxqC
z%eMW5od(Y(NXna3%zHIISA5VbNl7i+a(9H*dUxDN$;F2Qu2YSY(*Yg~fSX7w+Q-~<
zyN^gL<-Cb*LEWVLpd13TCh6C}MyHCFuM>Y9LziPWxq$U8pmkg$<;RXlu%R6)=GKkH
zo7KG6xTbByR8d4KdAyBt{MZa1>*S={32*vgF;B!Sq%rc_Gs+%bgQcm}83pWaTiGyg
z!~RXXz{%FKj}f`wj9N|dp4@=>HEZmq7sQX{P(<-c*~>_dq}2%_xS0bs7TfMJlq>Xr
z(|s(cEz-5eE5wHs)%{V4rD-9@aJI=%{iKzp0YCSmda8Oi@(1AF5Y}`m3iOurvupiM
z75%>=^FK5t6-e)C*{G<Xe*P<}wg)&aCUNHl2UKbiqkc=ng-V}~5TR}BJ~dA2p1;Y!
zC&=(Glcws1O=OO?%+Y8rk8w+4pnqjR7J8nuv|RRRKR}q79z82@SM2c`Els<>{J$8B
zO>1o#-PUs00$-dymtAng9jrZSqnyT5wtGXuz|Xf<I`zn>V8^ZAMdLto$>*<q#pS46
z6#tit!Y&5MNTonib~F!XuKy=I*_(GJEw0#1p67K4*aFQL)05uCOO=@HR874^>zcmy
zv~KXlH@%U9O|#{;99~>AcrnY;Fy|?HVO%SPwWuk()S%S+S$&T=71vcfxx&AKPA}~a
z#MM~F%Ep45`*V^PtYh~`1w}=q+oC*^F_GP2Wf}f_h#UQucF2jtnyfBe*K<RqoxS3H
z5<0F?aoIiSs5uhT282F2;*zAlJs{-gtcr6$e8!4+TkLU(?qi?4_8dPM!qi|QA^MAS
zW$xy?w|Wad6OA$_RR*M}#;+GYYnK(k^>P$4TJbWxIPn+a!2v}xslM?EayDi<LAWT9
z(bdH~_jRrql31EdB8I80f^?@FbYS?dBl+O|B9Me=p5UN08u@!I0e!~ED9^kus6xqz
zJ3CJ*l`$WGog{cjJ%66sy#ln#Y|lB8$4XKEni~D?h7x>+-7K+}sEiRlwBy>*g~e8O
zgi3kbj69EfiApzMmtarleY{Z(ZiVldN)$Y%oBpn{_cjN;2Me7ze024y^^W1XqcF2D
zUN<>dJlDlz2^6eaD9GvDmnE%$TRsceKMxA94%KpzGqfEOVG2*5-8RufcQ=PhFkf-h
zvky8t5k|~MGuw$)!u_u~Zwl>%*crbD``B@h4V*SGOe-T6NucKlXyr(-dU#&Lh&Uz3
zl4m}>3W@kB^Cfj-Mm7)|_)vl`HW<t~?^e&;Y;Goc43OLN$F7`8Uck3DWt)_~0A+49
zPqzgq;_%LH847nr&j#BufV)5;9^mCzlNEdSmJ%<t@t)h*^;e7atBV#qr;mD$?nU`}
zozgqzIDyAJx*xn1RlW2!IpQD8-5$RKEZ2cj$zlTtf3?s8&lPTaR0XWtZ-GiFL$i+)
z^aG@bwE;2<A)lL`P|g+c8|lj46&%nfO|*`r=QYsI;a(G2G3|)*nMV0&Q+f=+EwJ}N
zA|S#z{Edk4uPffOd8<DsU5DB!H7g6mgU{C`J*%D>UAm}ynYb@$2`7#j;F@Z+lH)Uf
zvJn+ZK$5q72rmDJD6AzQ&Y(ZyP@l&hWEM5poaC63%it~j{6#AsBa+1iHNHi-968&M
zPn&|iW!iU#Hxzk4x@dqjG}?5YIAyE&@Xd`Z7*4{S+}b*dx@l;bkM$otu-wn)1hVU`
z`>|S=*6yE&f2crpGDY}_&F0J9pNdbZ<$ep4wz_Chq1$s~f@ED%)0pW|Tv_RvGADnv
zY(p8Nxt%;b_LD972;suh<v5Ez$_B~9h#RqbWB6d-i~l8NB$SuAJOs5LcE2Jp;dq%x
z6gVtQni3Tn0!hQR&u8nmzvRa<+%DWH2yI&-j#XBMUze_9rR($AK<V#L4Nq38%jYCs
zMHZXAuB_Wmo;6(LP~tr!Y;X%gXOs|A(kG}8bF%H`P5#G(P>%gQ@#%I9t2sHo$b?sr
zkY%DdXK=~qWxV8+D0XOY`9b=pDHJ70Uq53h74qkm>WOmGk}%*a*+{*X1neQF+BshF
z7nX7WLDfDKVXC~l4+>M*5=Yq*rYZ!KZHav$uOPsL8>bS39KNyNvu`<%bZE9+_8yFC
zt6l9WeJ?%}pjEX{J2Y-b*TzmiiJi=zHT9)-KG*={k%C)uCyQ9$6;!dC&l8G+4!KUh
z@W1KH{h0C2ZK*MefiFG5r{<?pT=xfVRF;|Eot*XiItRD*GKRbytM2(}K!RIDvr4jC
zU8l-fcezI*z2e6XJD6j#MN^{g=r38f?ke_aE(U20-IV95$7J}_9A6`jT~NbmCa%^>
zLo<ksz{~0ke4a8sr=nJO4|o3>jMhi_FR&kVHUK93i@l7{@$u*RItC-m@+dod?}1Wi
zPP_zo9K^EDvl(BTA}E7R{_h3PZ+o*`)+Ie$ec?cZ>Kn49{Z=O!t8_kc*;)|QyyRPw
z_oqrCmv>&?L4Lu72m|yC$E$A!?xHzORmDgp!z|=jpN{mcVx+FQ+4~=KG=Hz(`8_1G
z<41wx=DL<64!polBsA+0U%x4Zf+C7@j*%4nVrm_jVs?T3nmV?Cq7cXhgnojU%@wND
zdUl0MzV_#Uo>#RhW5dNitL{qln{%siqf6qsZtA+3zQ!1}`erVNDX@i5;b2EKW&b|5
zm;^)@@@aufdwpCZ><zhaq>Gv3_|N`}RBwlcRmiirDg8C~E>EX<*b54W9NphCRHS5I
z;bra05}bYj@5t#m3F_^w-y0}7pMANw5(7&lFgzX@YVemYdD87V@Gb#{dQ9k?a;onH
zS@*Pk)nKYiz$GDNHZhcL(nLXyCN$d0y|<Pde`eF&q)a8sc+We}q+W8X4$p{d{YAE>
zTv$I<&nN|p!w)m54?34qmkq=~5;o$=-~ayUJv=FKu>X@jYHT{H5};7|?!z?({4~|x
z#xmpyk<#KwGkZo<dL{8^<mIHt4@zYvpqU|gN&Y$+rwvTF0>82BMQ3dl<kgg3YAlgX
z&C62{=W=!f)Eb`y^q1@fW~hqfW$@;QCCVU`7is+!uWG9@shxIVo2z>1p%Pg^z^)0G
zz9V(7o%?{)q5}qf_rAYkJ1B8L;)?q-$I62Ftic<7Uc$+~0=W-M&K<_KV&YVUgpGKZ
z!+}D|+Um_pYyLefy3M}Llrq`;43PzBj4A4}EEgD6TQ}!zYq&e(YuK$o&50AfXwTac
z4})O&Hnc;UVD|oe%!qd%&k&zz<*s-^yvtWx&|(~N=S>P(o2o5(m-D2{$crqIOMH_W
z_iw<#X@hS5V(<3iB_erQg<+hhPMem5YKyn$4aR!~FB896)XC;X7u}I~7*F>5_MSk5
z9yQU@TNmC=?LZYLN2&?l#a+Dk<My{->x<oS8aYQQUD_OGzFasMM1O@HZPQII=+WmM
zQL^#TOb%W|eqJ48kjV}yS^;pqyGv0-4+wLf6^+&Ehvl`i3urzq-&Ne#Y&JC26)@g;
zR}EmozX{th_f}`w;7L`QaD@mIWGhD9J<^Xjlx0*WI$uLiD9NB}JjgLL8IJ-o%&z*2
z%!W7}`K8(b=f)dfIzB!g7)@JDH#qr(g{Rj93CvoXlVvZ$6aqp<4@bqd<Kxmy20LPC
z^9@Ug77_)IqHQW4QXZ6oG6LD8u}@;RmlEN^yl0$y4pdR`y!7I-!Y@Rvpn!@DLAd$G
z)9B+uL43*?<c*I^<%rSG;VJKv7u?fBB`+^Bamr3@82_hdNZ2=Rw#9lX%eM(<RMmrZ
z=^pygEacFu0NSt#-07KAxU$dTwlv`MDhHb-)zA>ej-GH87WPq`$5cU^4Npn;+1cT;
z#YC%98$S&{OLgWmF7Huws+*57eY{|ZT>EmlK`Z<^+o_}WDv#>g`n105c<?FsO8$y{
zpXQ<Auc)k5pUvPqv#Eu!nc;#-6r}>3bp+}-_7;dz-o<Ji{aT`e4Z+_9DG^){VcG?7
zDUY7KO2MemS?Cjtz73!UxDB-KFF##*@qO;aw7b@0%Zma#I)1iOw@*7~uk$~+LBSa~
zEiy<6v564b+YJ~#_X~gqZ7cqw=wBatF=^+E1}<;6xsAd<u8<FZ&6+rSJmTjdFF)OG
zOsM+ed+nJ0<D^d|Z&**?zx%zBWiBG(@`-CYWbK`#^%hAi{8`Yd>d<&sQmcdiqU{!F
z@bm5#r5IcMV@bUna3eqdUR1s0TuLDR(Eh1GkMj31X~ve@6H1WqosoyWbn?k4@y`v)
zYo1p-{;YcD;^D7p%+KZfiS?;K)U*a0@VLQ(>JGbvPDw{ie~2uwvSu6Y)&<{a_wP2*
zDBY5krP1T~Ef0PR2AAa7HP1Yc#eWsVVJBNyxxB)<zePp_ZCRz~r+!`K6hL3i(y6@7
z7c8CqD*c*&3SN~6;LM8-s%4@3emK+X2SudN;kxe9$in_8;51biIw_xp{kjM3*BbsB
zs&46r;P;&u1hWW}jDUkv>ikx8Yk#$}Xtugd9-Z5C?+3iz-oCIE#v7uiYV{Ag^Y(xm
zWgS{7of<lwla53AHH}g8{*x5-2DQ768hUee{6T=FI)fEj6p@dt$el8;14ITAyRHV1
zXQ$@z6#obN9DCD%pA5RtuAqFMg;<nFk{J9j-Rx4EKyKuPm)R1^PDKLrKGA)eSL);=
z=fe4m6CSTaJ3y*7L;0#kd%qmTrg!N6<i@eFBAsnGRltMu()4{Vxqk-ROKC8ss^K7V
zZ>&K#RC&w*zHrL)ce{|Kp~9jH2xFVPa!Q9Y^Fs}#qmj*!)MbC(uNyoE4FlbW@-K&6
zO2k|%RT17QoN>Kn70=YhYO_p=oo}vmX?zSqVzWrExD=1$#rxm1P}9VmLX!ryUP)~X
zZC~p(lYxeViBr{H4FLQs=evp&v`%Tw&E#{{Tl!-N=<pZLN?po@%(=;1Z-W9)1iwH3
zQQ5c;O#3DH@MpVykq+2S<$0DXvi)x9rc8~uy(f8FiPwz(aI<^k48B@$tL=%B`gmhg
z8rTtUmeC8@p58eoI4&NdW4b;!g#Ph4_*(!xxp99XUIXxxEzA?HYC6TNgoc0<2nQ6@
zCN!cjyUuD8VaNWKaPcJ}HQuop5DIbAI;oFbFsg$pwtZxl)z**$6^K#Jw>iooO<y=q
z-=^B0_{P)WpcNORW<f(x6Mn1WcQ(3gi`n8@Zwz=`Z0yL^&8nl_m34jnnWtOVzHsh@
z?3*_zr2<Hw!XWM2uLHk!Mu&iCXtqlw%^DR$bAzVxgFTA}=YpQ69ctmLPAs7c>+*RM
z`;KdWGM0ty)5#?%1-E^pTfLVIa(ldh{XG4@i?Y9f?|6PMf13ZMI!pb<|3yhtzxhwo
z_y1ku{hvXoGeGlS%ijMpC;va@#Ppe`iplRlG)Eumo?h^SKBkG7q}cwu(d+9NKdRJz
H@z4JP4@+@R

diff --git a/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg b/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg
deleted file mode 100644
index 6b60c1042f58..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/assets/reactlogo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<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>
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index 00b022899f65..8b79a30916fe 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -203,7 +203,7 @@ class FlamechartStackLayerView extends View {
         );
 
         if (trimmedName !== null) {
-          context.fillStyle = COLORS.PRIORITY_LABEL;
+          context.fillStyle = COLORS.FLAME_GRAPH_LABEL;
 
           // Prevent text from being drawn outside `viewableArea`
           const textOverflowsViewableArea = !rectEqualToRect(
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 7b0fb8726076..baaedebc64ca 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -41,34 +41,129 @@ export const FLAMECHART_FONT_SIZE = 10;
 export const FLAMECHART_FRAME_HEIGHT = 16;
 export const FLAMECHART_TEXT_PADDING = 3;
 
-export const COLORS = Object.freeze({
-  BACKGROUND: '#ffffff',
-  PRIORITY_BACKGROUND: '#ededf0',
-  PRIORITY_BORDER: '#d7d7db',
-  PRIORITY_LABEL: '#272727',
-  USER_TIMING: '#c9cacd',
-  USER_TIMING_HOVER: '#93959a',
-  REACT_IDLE: '#edf6ff',
-  REACT_IDLE_SELECTED: '#EDF6FF',
-  REACT_IDLE_HOVER: '#EDF6FF',
-  REACT_RENDER: '#9fc3f3',
-  REACT_RENDER_SELECTED: '#64A9F5',
-  REACT_RENDER_HOVER: '#2683E2',
-  REACT_COMMIT: '#ff718e',
-  REACT_COMMIT_SELECTED: '#FF5277',
-  REACT_COMMIT_HOVER: '#ed0030',
-  REACT_LAYOUT_EFFECTS: '#c88ff0',
-  REACT_LAYOUT_EFFECTS_SELECTED: '#934FC1',
-  REACT_LAYOUT_EFFECTS_HOVER: '#601593',
-  REACT_PASSIVE_EFFECTS: '#c88ff0',
-  REACT_PASSIVE_EFFECTS_SELECTED: '#934FC1',
-  REACT_PASSIVE_EFFECTS_HOVER: '#601593',
-  REACT_SCHEDULE: '#9fc3f3',
-  REACT_SCHEDULE_HOVER: '#2683E2',
-  REACT_SCHEDULE_CASCADING: '#ff718e',
-  REACT_SCHEDULE_CASCADING_HOVER: '#ed0030',
-  REACT_SUSPEND: '#a6e59f',
-  REACT_SUSPEND_HOVER: '#13bc00',
-  REACT_WORK_BORDER: '#ffffff',
-  TIME_MARKER_LABEL: '#18212b',
-});
+// TODO Replace this with "export let" vars
+export let COLORS = {
+  BACKGROUND: '',
+  PRIORITY_BACKGROUND: '',
+  PRIORITY_BORDER: '',
+  PRIORITY_LABEL: '',
+  FLAME_GRAPH_LABEL: '',
+  USER_TIMING: '',
+  USER_TIMING_HOVER: '',
+  REACT_IDLE: '',
+  REACT_IDLE_SELECTED: '',
+  REACT_IDLE_HOVER: '',
+  REACT_RENDER: '',
+  REACT_RENDER_SELECTED: '',
+  REACT_RENDER_HOVER: '',
+  REACT_COMMIT: '',
+  REACT_COMMIT_SELECTED: '',
+  REACT_COMMIT_HOVER: '',
+  REACT_LAYOUT_EFFECTS: '',
+  REACT_LAYOUT_EFFECTS_SELECTED: '',
+  REACT_LAYOUT_EFFECTS_HOVER: '',
+  REACT_PASSIVE_EFFECTS: '',
+  REACT_PASSIVE_EFFECTS_SELECTED: '',
+  REACT_PASSIVE_EFFECTS_HOVER: '',
+  REACT_RESIZE_BAR: '',
+  REACT_SCHEDULE: '',
+  REACT_SCHEDULE_HOVER: '',
+  REACT_SCHEDULE_CASCADING: '',
+  REACT_SCHEDULE_CASCADING_HOVER: '',
+  REACT_SUSPEND: '',
+  REACT_SUSPEND_HOVER: '',
+  REACT_WORK_BORDER: '',
+  TIME_MARKER_LABEL: '',
+};
+
+export function updateColorsToMatchTheme(): void {
+  const computedStyle = getComputedStyle((document.body: any));
+
+  COLORS = {
+    BACKGROUND: computedStyle.getPropertyValue('--color-background'),
+    PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-priority-background',
+    ),
+    PRIORITY_BORDER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-priority-border',
+    ),
+    PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
+    FLAME_GRAPH_LABEL: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-flame-graph-label',
+    ),
+    USER_TIMING: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-user-timing',
+    ),
+    USER_TIMING_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-user-timing-hover',
+    ),
+    REACT_IDLE: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-idle',
+    ),
+    REACT_IDLE_SELECTED: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-idle-selected',
+    ),
+    REACT_IDLE_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-idle-hover',
+    ),
+    REACT_RENDER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-render',
+    ),
+    REACT_RENDER_SELECTED: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-render-selected',
+    ),
+    REACT_RENDER_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-render-hover',
+    ),
+    REACT_COMMIT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-commit',
+    ),
+    REACT_COMMIT_SELECTED: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-commit-selected',
+    ),
+    REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-commit-hover',
+    ),
+    REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-layout-effects',
+    ),
+    REACT_LAYOUT_EFFECTS_SELECTED: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-layout-effects-selected',
+    ),
+    REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-layout-effects-hover',
+    ),
+    REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-passive-effects',
+    ),
+    REACT_PASSIVE_EFFECTS_SELECTED: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-passive-effects-selected',
+    ),
+    REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-passive-effects-hover',
+    ),
+    REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
+    REACT_SCHEDULE: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-schedule',
+    ),
+    REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-schedule-hover',
+    ),
+    REACT_SCHEDULE_CASCADING: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-schedule-cascading',
+    ),
+    REACT_SCHEDULE_CASCADING_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-schedule-cascading-hover',
+    ),
+    REACT_SUSPEND: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspend',
+    ),
+    REACT_SUSPEND_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspend-hover',
+    ),
+    REACT_WORK_BORDER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-work-border',
+    ),
+    TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
+  };
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/context/ContextMenu.css b/packages/react-devtools-scheduling-profiler/src/context/ContextMenu.css
deleted file mode 100644
index 60848641f494..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/context/ContextMenu.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.ContextMenu {
-  position: absolute;
-  border-radius: 0.125rem;
-  background-color: #ffffff;
-  border: 1px solid #ccc;
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-  font-size: 11px;
-  overflow: hidden;
-  z-index: 10000002;
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/context/ContextMenu.js b/packages/react-devtools-scheduling-profiler/src/context/ContextMenu.js
deleted file mode 100644
index 8b09ef1510dc..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/context/ContextMenu.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {RegistryContextType} from './Contexts';
-
-import * as React from 'react';
-import {useContext, useEffect, useLayoutEffect, useRef, useState} from 'react';
-import {createPortal} from 'react-dom';
-import {RegistryContext} from './Contexts';
-
-import styles from './ContextMenu.css';
-
-function repositionToFit(element: HTMLElement, pageX: number, pageY: number) {
-  const ownerWindow = element.ownerDocument.defaultView;
-  if (element !== null) {
-    if (pageY + element.offsetHeight >= ownerWindow.innerHeight) {
-      if (pageY - element.offsetHeight > 0) {
-        element.style.top = `${pageY - element.offsetHeight}px`;
-      } else {
-        element.style.top = '0px';
-      }
-    } else {
-      element.style.top = `${pageY}px`;
-    }
-
-    if (pageX + element.offsetWidth >= ownerWindow.innerWidth) {
-      if (pageX - element.offsetWidth > 0) {
-        element.style.left = `${pageX - element.offsetWidth}px`;
-      } else {
-        element.style.left = '0px';
-      }
-    } else {
-      element.style.left = `${pageX}px`;
-    }
-  }
-}
-
-const HIDDEN_STATE = {
-  data: null,
-  isVisible: false,
-  pageX: 0,
-  pageY: 0,
-};
-
-type Props = {|
-  children: (data: Object) => React$Node,
-  id: string,
-|};
-
-export default function ContextMenu({children, id}: Props) {
-  const {hideMenu, registerMenu} = useContext<RegistryContextType>(
-    RegistryContext,
-  );
-
-  const [state, setState] = useState(HIDDEN_STATE);
-
-  const bodyAccessorRef = useRef<HTMLDivElement | null>(null);
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    if (!bodyAccessorRef.current) {
-      return;
-    }
-    const ownerDocument = bodyAccessorRef.current.ownerDocument;
-    containerRef.current = ownerDocument.createElement('div');
-    if (ownerDocument.body) {
-      ownerDocument.body.appendChild(containerRef.current);
-    }
-    return () => {
-      if (ownerDocument.body && containerRef.current) {
-        ownerDocument.body.removeChild(containerRef.current);
-      }
-    };
-  }, [bodyAccessorRef, containerRef]);
-
-  useEffect(() => {
-    const showMenuFn = ({data, pageX, pageY}) => {
-      setState({data, isVisible: true, pageX, pageY});
-    };
-    const hideMenuFn = () => setState(HIDDEN_STATE);
-    return registerMenu(id, showMenuFn, hideMenuFn);
-  }, [id]);
-
-  useLayoutEffect(() => {
-    if (!state.isVisible || !containerRef.current) {
-      return;
-    }
-
-    const menu = menuRef.current;
-    if (!menu) {
-      return;
-    }
-
-    const hideUnlessContains: MouseEventHandler &
-      TouchEventHandler &
-      KeyboardEventHandler = event => {
-      if (event.target instanceof HTMLElement && !menu.contains(event.target)) {
-        hideMenu();
-      }
-    };
-
-    const ownerDocument = containerRef.current.ownerDocument;
-    ownerDocument.addEventListener('mousedown', hideUnlessContains);
-    ownerDocument.addEventListener('touchstart', hideUnlessContains);
-    ownerDocument.addEventListener('keydown', hideUnlessContains);
-
-    const ownerWindow = ownerDocument.defaultView;
-    ownerWindow.addEventListener('resize', hideMenu);
-
-    repositionToFit(menu, state.pageX, state.pageY);
-
-    return () => {
-      ownerDocument.removeEventListener('mousedown', hideUnlessContains);
-      ownerDocument.removeEventListener('touchstart', hideUnlessContains);
-      ownerDocument.removeEventListener('keydown', hideUnlessContains);
-
-      ownerWindow.removeEventListener('resize', hideMenu);
-    };
-  }, [state]);
-
-  if (!state.isVisible) {
-    return <div ref={bodyAccessorRef} />;
-  } else {
-    const container = containerRef.current;
-    if (container !== null) {
-      return createPortal(
-        <div ref={menuRef} className={styles.ContextMenu}>
-          {children(state.data)}
-        </div>,
-        container,
-      );
-    } else {
-      return null;
-    }
-  }
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.css b/packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.css
deleted file mode 100644
index 19fd8284a47c..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.ContextMenuItem {
-  display: flex;
-  align-items: center;
-  color: #333;
-  padding: 0.5rem 0.75rem;
-  cursor: default;
-  border-top: 1px solid #ccc;
-}
-.ContextMenuItem:first-of-type {
-  border-top: none;
-}
-.ContextMenuItem:hover,
-.ContextMenuItem:focus {
-  outline: 0;
-  background-color: rgba(0, 136, 250, 0.1);
-}
-.ContextMenuItem:active {
-  background-color: #0088fa;
-  color: #fff;
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.js b/packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.js
deleted file mode 100644
index 5750bd90cd18..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/context/ContextMenuItem.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {RegistryContextType} from './Contexts';
-
-import * as React from 'react';
-import {useContext} from 'react';
-import {RegistryContext} from './Contexts';
-
-import styles from './ContextMenuItem.css';
-
-type Props = {|
-  children: React$Node,
-  onClick: () => void,
-  title: string,
-|};
-
-export default function ContextMenuItem({children, onClick, title}: Props) {
-  const {hideMenu} = useContext<RegistryContextType>(RegistryContext);
-
-  const handleClick: MouseEventHandler = event => {
-    onClick();
-    hideMenu();
-  };
-
-  return (
-    <div
-      className={styles.ContextMenuItem}
-      onClick={handleClick}
-      onTouchEnd={handleClick}>
-      {children}
-    </div>
-  );
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/context/Contexts.js b/packages/react-devtools-scheduling-profiler/src/context/Contexts.js
deleted file mode 100644
index 46c742e06d0b..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/context/Contexts.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import {createContext} from 'react';
-
-export type ShowFn = ({|data: Object, pageX: number, pageY: number|}) => void;
-export type HideFn = () => void;
-export type OnChangeFn = boolean => void;
-
-const idToShowFnMap = new Map<string, ShowFn>();
-const idToHideFnMap = new Map<string, HideFn>();
-
-let currentHideFn: ?HideFn = null;
-let currentOnChange: ?OnChangeFn = null;
-
-function hideMenu() {
-  if (typeof currentHideFn === 'function') {
-    currentHideFn();
-
-    if (typeof currentOnChange === 'function') {
-      currentOnChange(false);
-    }
-  }
-
-  currentHideFn = null;
-  currentOnChange = null;
-}
-
-function showMenu({
-  data,
-  id,
-  onChange,
-  pageX,
-  pageY,
-}: {|
-  data: Object,
-  id: string,
-  onChange?: OnChangeFn,
-  pageX: number,
-  pageY: number,
-|}) {
-  const showFn = idToShowFnMap.get(id);
-  if (typeof showFn === 'function') {
-    // Prevent open menus from being left hanging.
-    hideMenu();
-
-    currentHideFn = idToHideFnMap.get(id);
-    showFn({data, pageX, pageY});
-
-    if (typeof onChange === 'function') {
-      currentOnChange = onChange;
-      onChange(true);
-    }
-  }
-}
-
-function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
-  if (idToShowFnMap.has(id)) {
-    throw Error(`Context menu with id "${id}" already registered.`);
-  }
-
-  idToShowFnMap.set(id, showFn);
-  idToHideFnMap.set(id, hideFn);
-
-  return function unregisterMenu() {
-    idToShowFnMap.delete(id);
-    idToHideFnMap.delete(id);
-  };
-}
-
-export type RegistryContextType = {|
-  hideMenu: typeof hideMenu,
-  showMenu: typeof showMenu,
-  registerMenu: typeof registerMenu,
-|};
-
-export const RegistryContext = createContext<RegistryContextType>({
-  hideMenu,
-  showMenu,
-  registerMenu,
-});
diff --git a/packages/react-devtools-scheduling-profiler/src/context/index.js b/packages/react-devtools-scheduling-profiler/src/context/index.js
deleted file mode 100644
index c903d4f88640..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/context/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import {RegistryContext} from './Contexts';
-import ContextMenu from './ContextMenu';
-import ContextMenuItem from './ContextMenuItem';
-import useContextMenu from './useContextMenu';
-
-export {RegistryContext, ContextMenu, ContextMenuItem, useContextMenu};
diff --git a/packages/react-devtools-scheduling-profiler/src/context/useContextMenu.js b/packages/react-devtools-scheduling-profiler/src/context/useContextMenu.js
deleted file mode 100644
index 467c138f62d8..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/context/useContextMenu.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {OnChangeFn, RegistryContextType} from './Contexts';
-
-import {useContext, useEffect} from 'react';
-import {RegistryContext} from './Contexts';
-
-export default function useContextMenu<T>({
-  data,
-  id,
-  onChange,
-  ref,
-}: {|
-  data: T,
-  id: string,
-  onChange: OnChangeFn,
-  ref: {+current: HTMLElement | null},
-|}) {
-  const {showMenu} = useContext<RegistryContextType>(RegistryContext);
-
-  useEffect(() => {
-    if (ref.current !== null) {
-      const handleContextMenu = (event: MouseEvent | TouchEvent) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        const pageX =
-          (event: any).pageX ||
-          (event.touches && (event: any).touches[0].pageX);
-        const pageY =
-          (event: any).pageY ||
-          (event.touches && (event: any).touches[0].pageY);
-
-        showMenu({data, id, onChange, pageX, pageY});
-      };
-
-      const trigger = ref.current;
-      trigger.addEventListener('contextmenu', handleContextMenu);
-
-      return () => {
-        trigger.removeEventListener('contextmenu', handleContextMenu);
-      };
-    }
-  }, [data, id, showMenu]);
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js b/packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js
new file mode 100644
index 000000000000..3c7e74326094
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {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 {ReactProfilerData} from './types';
+import type {ImportWorkerOutputData} from './import-worker/index';
+
+export type DataResource = Resource<void, File, ReactProfilerData | Error>;
+
+export default function createDataResourceFromImportedFile(
+  file: File,
+): DataResource {
+  return createResource(
+    () => {
+      return new Promise<ReactProfilerData | 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-scheduling-profiler/src/hooks.js b/packages/react-devtools-scheduling-profiler/src/hooks.js
deleted file mode 100644
index a9692010bed2..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/hooks.js
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import {
-  // $FlowFixMe
-  unstable_createMutableSource as createMutableSource,
-  useLayoutEffect,
-  // $FlowFixMe
-  unstable_useMutableSource as useMutableSource,
-} from 'react';
-
-import {
-  updateDisplayDensity,
-  updateThemeVariables,
-} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
-import {enableDarkMode} from './SchedulingProfilerFeatureFlags';
-
-export type BrowserTheme = 'dark' | 'light';
-
-const DARK_MODE_QUERY = '(prefers-color-scheme: dark)';
-
-const getSnapshot = window =>
-  window.matchMedia(DARK_MODE_QUERY).matches ? 'dark' : 'light';
-
-const darkModeMutableSource = createMutableSource(
-  window,
-  () => window.matchMedia(DARK_MODE_QUERY).matches,
-);
-
-const subscribe = (window, callback) => {
-  const mediaQueryList = window.matchMedia(DARK_MODE_QUERY);
-  mediaQueryList.addEventListener('change', callback);
-  return () => {
-    mediaQueryList.removeEventListener('change', callback);
-  };
-};
-
-export function useBrowserTheme(): void {
-  const theme = useMutableSource(darkModeMutableSource, getSnapshot, subscribe);
-
-  useLayoutEffect(() => {
-    const documentElements = [((document.documentElement: any): HTMLElement)];
-    if (enableDarkMode) {
-      switch (theme) {
-        case 'light':
-          updateThemeVariables('light', documentElements);
-          break;
-        case 'dark':
-          updateThemeVariables('dark', documentElements);
-          break;
-        default:
-          throw Error(`Unsupported theme value "${theme}"`);
-      }
-    } else {
-      updateThemeVariables('light', documentElements);
-    }
-  }, [theme]);
-}
-
-export function useDisplayDensity(): void {
-  useLayoutEffect(() => {
-    const documentElements = [((document.documentElement: any): HTMLElement)];
-    updateDisplayDensity('comfortable', documentElements);
-  }, []);
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/import.worker.js b/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
similarity index 65%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/import.worker.js
rename to packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
index 118490e2effe..1e0510b8539e 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/import.worker.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
@@ -10,7 +10,7 @@
 import 'regenerator-runtime/runtime';
 
 import type {TimelineEvent} from '@elg/speedscope';
-import type {ReactProfilerData} from '../types';
+import type {ImportWorkerOutputData} from './index';
 
 import preprocessData from './preprocessData';
 import {readInputData} from './readInputData';
@@ -18,18 +18,7 @@ import InvalidProfileError from './InvalidProfileError';
 
 declare var self: DedicatedWorkerGlobalScope;
 
-type ImportWorkerInputData = {|
-  file: File,
-|};
-
-export type ImportWorkerOutputData =
-  | {|status: 'SUCCESS', processedData: ReactProfilerData|}
-  | {|status: 'INVALID_PROFILE_ERROR', error: Error|}
-  | {|status: 'UNEXPECTED_ERROR', error: Error|};
-
-self.onmessage = async function(event: MessageEvent) {
-  const {file} = ((event.data: any): ImportWorkerInputData);
-
+export async function importFile(file: File): Promise<ImportWorkerOutputData> {
   try {
     const readFile = await readInputData(file);
     const events: TimelineEvent[] = JSON.parse(readFile);
@@ -37,21 +26,21 @@ self.onmessage = async function(event: MessageEvent) {
       throw new InvalidProfileError('No profiling data found in file.');
     }
 
-    self.postMessage({
+    return {
       status: 'SUCCESS',
       processedData: preprocessData(events),
-    });
+    };
   } catch (error) {
     if (error instanceof InvalidProfileError) {
-      self.postMessage({
+      return {
         status: 'INVALID_PROFILE_ERROR',
         error,
-      });
+      };
     } else {
-      self.postMessage({
+      return {
         status: 'UNEXPECTED_ERROR',
         error,
-      });
+      };
     }
   }
-};
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerFeatureFlags.js b/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.worker.js
similarity index 64%
rename from packages/react-devtools-scheduling-profiler/src/SchedulingProfilerFeatureFlags.js
rename to packages/react-devtools-scheduling-profiler/src/import-worker/importFile.worker.js
index 7558576c3178..b5088a839aed 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerFeatureFlags.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.worker.js
@@ -3,8 +3,8 @@
  *
  * 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 enableDarkMode = false;
+import * as importFileModule from './importFile';
+
+export const importFile = importFileModule.importFile;
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/index.js b/packages/react-devtools-scheduling-profiler/src/import-worker/index.js
new file mode 100644
index 000000000000..3ce3a0ff93da
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/index.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// 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 {ReactProfilerData} from '../types';
+
+type ImportFileModule = typeof importFileModule;
+
+const workerizedImportFile: ImportFileModule = window.Worker
+  ? WorkerizedImportFile()
+  : importFileModule;
+
+export type ImportWorkerOutputData =
+  | {|status: 'SUCCESS', processedData: ReactProfilerData|}
+  | {|status: 'INVALID_PROFILE_ERROR', error: Error|}
+  | {|status: 'UNEXPECTED_ERROR', error: Error|};
+
+export type importFileFunction = (file: File) => ImportWorkerOutputData;
+
+export const importFile = (file: File) => workerizedImportFile.importFile(file);
diff --git a/packages/react-devtools-scheduling-profiler/src/index.css b/packages/react-devtools-scheduling-profiler/src/index.css
deleted file mode 100644
index 0e798eef5071..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/index.css
+++ /dev/null
@@ -1,21 +0,0 @@
-html {
-  height: 100%;
-}
-
-body {
-  height: 100%;
-  margin: 0;
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-sans-normal);
-  background-color: var(--color-background);
-  color: var(--color-text);
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-.Container {
-  height: 100%;
-}
\ No newline at end of file
diff --git a/packages/react-devtools-scheduling-profiler/src/index.js b/packages/react-devtools-scheduling-profiler/src/index.js
deleted file mode 100644
index b10a2b07efd6..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import 'regenerator-runtime/runtime';
-
-import * as React from 'react';
-// $FlowFixMe Flow does not yet know about createRoot()
-import {createRoot} from 'react-dom';
-import nullthrows from 'nullthrows';
-import App from './App';
-
-import styles from './index.css';
-
-const container = document.createElement('div');
-container.className = styles.Container;
-container.id = 'root';
-
-const body = nullthrows(document.body, 'Expect document.body to exist');
-body.appendChild(container);
-
-createRoot(container).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
index 314be68e2888..c69b982c47cd 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
@@ -15,6 +15,7 @@ import type {
 } from './useCanvasInteraction';
 import type {Rect, Size} from './geometry';
 
+import {COLORS} from '../content-views/constants';
 import nullthrows from 'nullthrows';
 import {Surface} from './Surface';
 import {View} from './View';
@@ -38,14 +39,11 @@ type LayoutState = $ReadOnly<{|
 |}>;
 
 function getColorForBarState(state: ResizeBarState): string {
-  // Colors obtained from Firefox Profiler
   switch (state) {
     case 'normal':
-      return '#ccc';
     case 'hovered':
-      return '#bbb';
     case 'dragging':
-      return '#aaa';
+      return COLORS.REACT_RESIZE_BAR;
   }
   throw new Error(`Unknown resize bar state ${state}`);
 }
@@ -131,6 +129,7 @@ class ResizeBar extends View {
 }
 
 export class ResizableSplitView extends View {
+  _canvasRef: {current: HTMLCanvasElement | null};
   _resizingState: ResizingState | null = null;
   _layoutState: LayoutState;
 
@@ -139,9 +138,12 @@ export class ResizableSplitView extends View {
     frame: Rect,
     topSubview: View,
     bottomSubview: View,
+    canvasRef: {current: HTMLCanvasElement | null},
   ) {
     super(surface, frame, noopLayout);
 
+    this._canvasRef = canvasRef;
+
     this.addSubview(topSubview);
     this.addSubview(new ResizeBar(surface, frame));
     this.addSubview(bottomSubview);
@@ -279,6 +281,18 @@ export class ResizableSplitView extends View {
   }
 
   _handleMouseMove(interaction: MouseMoveInteraction) {
+    const cursorLocation = interaction.payload.location;
+    const resizeBarFrame = this._getResizeBar().frame;
+
+    const canvas = this._canvasRef.current;
+    if (canvas !== null) {
+      if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
+        canvas.style.cursor = 'ns-resize';
+      } else {
+        canvas.style.cursor = 'default';
+      }
+    }
+
     const {_resizingState} = this;
     if (_resizingState) {
       this._resizingState = {
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js b/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
index b08d9bbbbb46..3b374aebbee7 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
@@ -175,15 +175,16 @@ export function useCanvasInteraction(
       return false;
     };
 
-    document.addEventListener('mousemove', onDocumentMouseMove);
-    document.addEventListener('mouseup', onDocumentMouseUp);
+    const ownerDocument = canvas.ownerDocument;
+    ownerDocument.addEventListener('mousemove', onDocumentMouseMove);
+    ownerDocument.addEventListener('mouseup', onDocumentMouseUp);
 
     canvas.addEventListener('mousedown', onCanvasMouseDown);
     canvas.addEventListener('wheel', onCanvasWheel);
 
     return () => {
-      document.removeEventListener('mousemove', onDocumentMouseMove);
-      document.removeEventListener('mouseup', onDocumentMouseUp);
+      ownerDocument.removeEventListener('mousemove', onDocumentMouseMove);
+      ownerDocument.removeEventListener('mouseup', onDocumentMouseUp);
 
       canvas.removeEventListener('mousedown', onCanvasMouseDown);
       canvas.removeEventListener('wheel', onCanvasWheel);
diff --git a/packages/react-devtools-scheduling-profiler/vercel.json b/packages/react-devtools-scheduling-profiler/vercel.json
deleted file mode 100644
index 25f13ebe8852..000000000000
--- a/packages/react-devtools-scheduling-profiler/vercel.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "name": "react-devtools-scheduling-profiler"
-}
diff --git a/packages/react-devtools-scheduling-profiler/webpack.config.js b/packages/react-devtools-scheduling-profiler/webpack.config.js
deleted file mode 100644
index e30d4fda13db..000000000000
--- a/packages/react-devtools-scheduling-profiler/webpack.config.js
+++ /dev/null
@@ -1,128 +0,0 @@
-'use strict';
-
-const {resolve} = require('path');
-const {DefinePlugin} = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
-const {getVersionString} = require('./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 TARGET = process.env.TARGET;
-if (!TARGET) {
-  console.error('TARGET not set');
-  process.exit(1);
-}
-const shouldUseDevServer = TARGET === 'local';
-
-const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
-
-const DEVTOOLS_VERSION = getVersionString();
-
-const imageInlineSizeLimit = 10000;
-
-const babelOptions = {
-  configFile: resolve(
-    __dirname,
-    '..',
-    'react-devtools-shared',
-    'babel.config.js',
-  ),
-  plugins: shouldUseDevServer
-    ? [resolve(builtModulesDir, 'react-refresh/babel')]
-    : [],
-};
-
-const config = {
-  mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
-  entry: {
-    app: './src/index.js',
-  },
-  resolve: {
-    alias: {
-      react: resolve(builtModulesDir, 'react'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
-      'react-refresh': resolve(builtModulesDir, 'react-refresh'),
-      scheduler: resolve(builtModulesDir, 'scheduler'),
-    },
-  },
-  plugins: [
-    new DefinePlugin({
-      __DEV__,
-      __PROFILE__: false,
-      __EXPERIMENTAL__: true,
-      __VARIANT__: false,
-      'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
-    }),
-    new HtmlWebpackPlugin({
-      title: 'React Concurrent Mode Profiler',
-    }),
-    shouldUseDevServer && new ReactRefreshWebpackPlugin(),
-  ].filter(Boolean),
-  module: {
-    rules: [
-      {
-        test: /\.worker\.js$/,
-        use: [
-          'worker-loader',
-          {
-            loader: 'babel-loader',
-            options: babelOptions,
-          },
-        ],
-      },
-      {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        options: babelOptions,
-      },
-      {
-        test: /\.css$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              modules: {
-                localIdentName: '[local]___[hash:base64:5]',
-              },
-            },
-          },
-        ],
-      },
-      {
-        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-        loader: 'url-loader',
-        options: {
-          limit: imageInlineSizeLimit,
-          name: 'static/media/[name].[hash:8].[ext]',
-        },
-      },
-    ],
-  },
-};
-
-if (shouldUseDevServer) {
-  config.devServer = {
-    hot: true,
-    port: 8081,
-    clientLogLevel: 'warning',
-    stats: 'errors-only',
-  };
-} else {
-  config.output = {
-    path: resolve(__dirname, 'dist'),
-    filename: '[name].js',
-  };
-}
-
-module.exports = config;
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
index 20af7c096f05..4a8bca707339 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.css
@@ -1,7 +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;
 }
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
index 16a893c3cc44..466c4fdad6aa 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -54,7 +54,9 @@ type Props = {|
 |};
 
 export default function ContextMenu({children, id}: Props) {
-  const {registerMenu} = useContext<RegistryContextType>(RegistryContext);
+  const {hideMenu, registerMenu} = useContext<RegistryContextType>(
+    RegistryContext,
+  );
 
   const [state, setState] = useState(HIDDEN_STATE);
 
@@ -75,11 +77,11 @@ export default function ContextMenu({children, id}: Props) {
   }, []);
 
   useEffect(() => {
-    const showMenu = ({data, pageX, pageY}) => {
+    const showMenuFn = ({data, pageX, pageY}) => {
       setState({data, isVisible: true, pageX, pageY});
     };
-    const hideMenu = () => setState(HIDDEN_STATE);
-    return registerMenu(id, showMenu, hideMenu);
+    const hideMenuFn = () => setState(HIDDEN_STATE);
+    return registerMenu(id, showMenuFn, hideMenuFn);
   }, [id]);
 
   useLayoutEffect(() => {
@@ -92,21 +94,17 @@ export default function ContextMenu({children, id}: Props) {
     if (container !== null) {
       const hideUnlessContains = event => {
         if (!menu.contains(event.target)) {
-          setState(HIDDEN_STATE);
+          hideMenu();
         }
       };
 
-      const hide = event => {
-        setState(HIDDEN_STATE);
-      };
-
       const ownerDocument = container.ownerDocument;
       ownerDocument.addEventListener('mousedown', hideUnlessContains);
       ownerDocument.addEventListener('touchstart', hideUnlessContains);
       ownerDocument.addEventListener('keydown', hideUnlessContains);
 
       const ownerWindow = ownerDocument.defaultView;
-      ownerWindow.addEventListener('resize', hide);
+      ownerWindow.addEventListener('resize', hideMenu);
 
       repositionToFit(menu, state.pageX, state.pageY);
 
@@ -115,7 +113,7 @@ export default function ContextMenu({children, id}: Props) {
         ownerDocument.removeEventListener('touchstart', hideUnlessContains);
         ownerDocument.removeEventListener('keydown', hideUnlessContains);
 
-        ownerWindow.removeEventListener('resize', hide);
+        ownerWindow.removeEventListener('resize', hideMenu);
       };
     }
   }, [state]);
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
index 0d2e55106c89..e2caf6eefcaa 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
@@ -11,33 +11,53 @@ import {createContext} from 'react';
 
 export type ShowFn = ({|data: Object, pageX: number, pageY: number|}) => void;
 export type HideFn = () => void;
+export type OnChangeFn = boolean => void;
 
 const idToShowFnMap = new Map<string, ShowFn>();
 const idToHideFnMap = new Map<string, HideFn>();
 
-let currentHideFn = null;
+let currentHide: ?HideFn = null;
+let currentOnChange: ?OnChangeFn = null;
 
 function hideMenu() {
-  if (typeof currentHideFn === 'function') {
-    currentHideFn();
+  if (typeof currentHide === 'function') {
+    currentHide();
+
+    if (typeof currentOnChange === 'function') {
+      currentOnChange(false);
+    }
   }
+
+  currentHide = null;
+  currentOnChange = null;
 }
 
 function showMenu({
   data,
   id,
+  onChange,
   pageX,
   pageY,
 }: {|
   data: Object,
   id: string,
+  onChange?: OnChangeFn,
   pageX: number,
   pageY: number,
 |}) {
   const showFn = idToShowFnMap.get(id);
   if (typeof showFn === 'function') {
-    currentHideFn = idToHideFnMap.get(id);
+    // Prevent open menus from being left hanging.
+    hideMenu();
+
+    currentHide = idToHideFnMap.get(id);
+
     showFn({data, pageX, pageY});
+
+    if (typeof onChange === 'function') {
+      currentOnChange = onChange;
+      onChange(true);
+    }
   }
 }
 
@@ -56,14 +76,9 @@ function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
 }
 
 export type RegistryContextType = {|
-  hideMenu: () => void,
-  showMenu: ({|
-    data: Object,
-    id: string,
-    pageX: number,
-    pageY: number,
-  |}) => void,
-  registerMenu: (string, ShowFn, HideFn) => Function,
+  hideMenu: typeof hideMenu,
+  showMenu: typeof showMenu,
+  registerMenu: typeof registerMenu,
 |};
 
 export const RegistryContext = createContext<RegistryContextType>({
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
index 1c713bae73dd..150cb0766fc5 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
@@ -10,17 +10,19 @@
 import {useContext, useEffect} from 'react';
 import {RegistryContext} from './Contexts';
 
-import type {RegistryContextType} from './Contexts';
+import type {OnChangeFn, RegistryContextType} from './Contexts';
 import type {ElementRef} from 'react';
 
 export default function useContextMenu({
   data,
   id,
+  onChange,
   ref,
 }: {|
   data: Object,
   id: string,
-  ref: {current: ElementRef<'div'> | null},
+  onChange?: OnChangeFn,
+  ref: {current: ElementRef<*> | null},
 |}) {
   const {showMenu} = useContext<RegistryContextType>(RegistryContext);
 
@@ -37,7 +39,7 @@ export default function useContextMenu({
           (event: any).pageY ||
           (event.touches && (event: any).touches[0].pageY);
 
-        showMenu({data, id, pageX, pageY});
+        showMenu({data, id, onChange, pageX, pageY});
       };
 
       const trigger = ref.current;
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 59e10a5ef72e..16bc56ae64f0 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -62,6 +62,7 @@ type Config = {|
   isProfiling?: boolean,
   supportsNativeInspection?: boolean,
   supportsReloadAndProfile?: boolean,
+  supportsSchedulingProfiler?: boolean,
   supportsProfiling?: boolean,
   supportsTraceUpdates?: boolean,
 |};
@@ -159,6 +160,7 @@ export default class Store extends EventEmitter<{|
   _supportsNativeInspection: boolean = true;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
+  _supportsSchedulingProfiler: boolean = false;
   _supportsTraceUpdates: boolean = false;
 
   _unsupportedBridgeProtocol: BridgeProtocol | null = null;
@@ -193,6 +195,7 @@ export default class Store extends EventEmitter<{|
         supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
+        supportsSchedulingProfiler,
         supportsTraceUpdates,
       } = config;
       this._supportsNativeInspection = supportsNativeInspection !== false;
@@ -202,6 +205,9 @@ export default class Store extends EventEmitter<{|
       if (supportsReloadAndProfile) {
         this._supportsReloadAndProfile = true;
       }
+      if (supportsSchedulingProfiler) {
+        this._supportsSchedulingProfiler = true;
+      }
       if (supportsTraceUpdates) {
         this._supportsTraceUpdates = true;
       }
@@ -414,6 +420,10 @@ export default class Store extends EventEmitter<{|
     );
   }
 
+  get supportsSchedulingProfiler(): boolean {
+    return this._supportsSchedulingProfiler;
+  }
+
   get supportsTraceUpdates(): boolean {
     return this._supportsTraceUpdates;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index a7ea9178db2b..a2ada2bf7735 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -23,6 +23,7 @@ import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
+import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
 
 import type {InspectedElement} from './types';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -52,6 +53,8 @@ export function InspectedElementHooksTree({
 }: HooksTreeViewProps) {
   const {hooks, id} = inspectedElement;
 
+  const {loadHookNames: loadHookNamesFunction} = useContext(HookNamesContext);
+
   // 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(
@@ -82,16 +85,17 @@ export function InspectedElementHooksTree({
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          {(!parseHookNames || hookParsingFailed) && (
-            <Toggle
-              className={hookParsingFailed ? styles.ToggleError : null}
-              isChecked={parseHookNamesOptimistic}
-              isDisabled={parseHookNamesOptimistic || hookParsingFailed}
-              onChange={handleChange}
-              title={toggleTitle}>
-              <ButtonIcon type="parse-hook-names" />
-            </Toggle>
-          )}
+          {loadHookNamesFunction !== null &&
+            (!parseHookNames || hookParsingFailed) && (
+              <Toggle
+                className={hookParsingFailed ? styles.ToggleError : null}
+                isChecked={parseHookNamesOptimistic}
+                isDisabled={parseHookNamesOptimistic || hookParsingFailed}
+                onChange={handleChange}
+                title={toggleTitle}>
+                <ButtonIcon type="parse-hook-names" />
+              </Toggle>
+            )}
           <Button onClick={handleCopy} title="Copy to clipboard">
             <ButtonIcon type="copy" />
           </Button>
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 812ca916d8eb..3c768c11ab97 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -24,6 +24,7 @@ import {TreeContextController} from './Components/TreeContext';
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import HookNamesContext from './Components/HookNamesContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
+import {SchedulingProfilerContextController} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
@@ -218,36 +219,40 @@ export default function DevTools({
                 <HookNamesContext.Provider value={hookNamesContext}>
                   <TreeContextController>
                     <ProfilerContextController>
-                      <div className={styles.DevTools} ref={devToolsRef}>
-                        {showTabBar && (
-                          <div className={styles.TabBar}>
-                            <ReactLogo />
-                            <span className={styles.DevToolsVersion}>
-                              {process.env.DEVTOOLS_VERSION}
-                            </span>
-                            <div className={styles.Spacer} />
-                            <TabBar
-                              currentTab={tab}
-                              id="DevTools"
-                              selectTab={setTab}
-                              tabs={tabs}
-                              type="navigation"
+                      <SchedulingProfilerContextController>
+                        <div className={styles.DevTools} ref={devToolsRef}>
+                          {showTabBar && (
+                            <div className={styles.TabBar}>
+                              <ReactLogo />
+                              <span className={styles.DevToolsVersion}>
+                                {process.env.DEVTOOLS_VERSION}
+                              </span>
+                              <div className={styles.Spacer} />
+                              <TabBar
+                                currentTab={tab}
+                                id="DevTools"
+                                selectTab={setTab}
+                                tabs={tabs}
+                                type="navigation"
+                              />
+                            </div>
+                          )}
+                          <div
+                            className={styles.TabContent}
+                            hidden={tab !== 'components'}>
+                            <Components
+                              portalContainer={componentsPortalContainer}
+                            />
+                          </div>
+                          <div
+                            className={styles.TabContent}
+                            hidden={tab !== 'profiler'}>
+                            <Profiler
+                              portalContainer={profilerPortalContainer}
                             />
                           </div>
-                        )}
-                        <div
-                          className={styles.TabContent}
-                          hidden={tab !== 'components'}>
-                          <Components
-                            portalContainer={componentsPortalContainer}
-                          />
-                        </div>
-                        <div
-                          className={styles.TabContent}
-                          hidden={tab !== 'profiler'}>
-                          <Profiler portalContainer={profilerPortalContainer} />
                         </div>
-                      </div>
+                      </SchedulingProfilerContextController>
                     </ProfilerContextController>
                   </TreeContextController>
                 </HookNamesContext.Provider>
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index ffa297610bdf..c9ae931f5ee7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -21,6 +21,7 @@ export type IconType =
   | 'flame-chart'
   | 'profiler'
   | 'ranked-chart'
+  | 'scheduling-profiler'
   | 'search'
   | 'settings'
   | 'store-as-global-variable'
@@ -64,6 +65,9 @@ export default function Icon({className = '', type}: Props) {
     case 'ranked-chart':
       pathData = PATH_RANKED_CHART;
       break;
+    case 'scheduling-profiler':
+      pathData = PATH_SCHEDULING_PROFILER;
+      break;
     case 'search':
       pathData = PATH_SEARCH;
       break;
@@ -136,6 +140,11 @@ const PATH_FLAME_CHART = `
 
 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
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 9fda41499871..17027f6a0c4e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -16,6 +16,7 @@ import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import RootSelector from './RootSelector';
+import {SchedulingProfiler} from 'react-devtools-scheduling-profiler/src/SchedulingProfiler';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
 import ProfilingImportExportButtons from './ProfilingImportExportButtons';
@@ -26,6 +27,7 @@ import SettingsModal from 'react-devtools-shared/src/devtools/views/Settings/Set
 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 styles from './Profiler.css';
 
@@ -41,8 +43,12 @@ function Profiler(_: {||}) {
     supportsProfiling,
   } = useContext(ProfilerContext);
 
+  const {supportsSchedulingProfiler} = useContext(StoreContext);
+
+  let showRightColumn = true;
+
   let view = null;
-  if (didRecordCommits) {
+  if (didRecordCommits || selectedTabID === 'scheduling-profiler') {
     switch (selectedTabID) {
       case 'flame-chart':
         view = <CommitFlamegraph />;
@@ -50,6 +56,10 @@ function Profiler(_: {||}) {
       case 'ranked-chart':
         view = <CommitRanked />;
         break;
+      case 'scheduling-profiler':
+        view = <SchedulingProfiler />;
+        showRightColumn = false;
+        break;
       default:
         break;
     }
@@ -101,7 +111,9 @@ function Profiler(_: {||}) {
               currentTab={selectedTabID}
               id="Profiler"
               selectTab={selectTab}
-              tabs={tabs}
+              tabs={
+                supportsSchedulingProfiler ? tabsWithSchedulingProfiler : tabs
+              }
               type="profiler"
             />
             <RootSelector />
@@ -119,7 +131,7 @@ function Profiler(_: {||}) {
             <ModalDialog />
           </div>
         </div>
-        <div className={styles.RightColumn}>{sidebar}</div>
+        {showRightColumn && <div className={styles.RightColumn}>{sidebar}</div>}
         <SettingsModal />
       </div>
     </SettingsModalContextController>
@@ -141,6 +153,17 @@ const tabs = [
   },
 ];
 
+const tabsWithSchedulingProfiler = [
+  ...tabs,
+  null, // Divider/separator
+  {
+    id: 'scheduling-profiler',
+    icon: 'scheduling-profiler',
+    label: 'Scheduling',
+    title: 'Scheduling Profiler',
+  },
+];
+
 const NoProfilingData = () => (
   <div className={styles.Column}>
     <div className={styles.Header}>No profiling data has been recorded.</div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 48f9aa11eefd..3206fcb28f74 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -19,7 +19,8 @@ import {StoreContext} from '../context';
 
 import type {ProfilingDataFrontend} from './types';
 
-export type TabID = 'flame-chart' | 'ranked-chart';
+// TODO (scheduling profiler) Should this be its own context?
+export type TabID = 'flame-chart' | 'ranked-chart' | 'scheduling-profiler';
 
 export type Context = {|
   // Which tab is selected in the Profiler UI?
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index d6570dd5ab34..94cd201d4575 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -19,13 +19,17 @@ import {
   prepareProfilingDataFrontendFromExport,
 } from './utils';
 import {downloadFile} from '../utils';
+import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
 
 import styles from './ProfilingImportExportButtons.css';
 
 import type {ProfilingDataExport} from './types';
 
 export default function ProfilingImportExportButtons() {
-  const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
+  const {isProfiling, profilingData, rootID, selectedTabID} = useContext(
+    ProfilerContext,
+  );
+  const {importSchedulingProfilerData} = useContext(SchedulingProfilerContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
 
@@ -64,13 +68,13 @@ export default function ProfilingImportExportButtons() {
     }
   }, [rootID, profilingData]);
 
-  const uploadData = useCallback(() => {
+  const clickInputElement = useCallback(() => {
     if (inputRef.current !== null) {
       inputRef.current.click();
     }
   }, []);
 
-  const handleFiles = useCallback(() => {
+  const importProfilerData = useCallback(() => {
     const input = inputRef.current;
     if (input !== null && input.files.length > 0) {
       const fileReader = new FileReader();
@@ -104,6 +108,13 @@ export default function ProfilingImportExportButtons() {
     }
   }, [modalDialogDispatch, profilerStore]);
 
+  const importSchedulingProfilerDataWrapper = event => {
+    const input = inputRef.current;
+    if (input !== null && input.files.length > 0) {
+      importSchedulingProfilerData(input.files[0]);
+    }
+  };
+
   return (
     <Fragment>
       <div className={styles.VRule} />
@@ -111,18 +122,26 @@ export default function ProfilingImportExportButtons() {
         ref={inputRef}
         className={styles.Input}
         type="file"
-        onChange={handleFiles}
+        onChange={
+          selectedTabID === 'scheduling-profiler'
+            ? importSchedulingProfilerDataWrapper
+            : importProfilerData
+        }
         tabIndex={-1}
       />
       <a ref={downloadRef} className={styles.Input} />
       <Button
         disabled={isProfiling}
-        onClick={uploadData}
+        onClick={clickInputElement}
         title="Load profile...">
         <ButtonIcon type="import" />
       </Button>
       <Button
-        disabled={isProfiling || !profilerStore.didRecordCommits}
+        disabled={
+          isProfiling ||
+          !profilerStore.didRecordCommits ||
+          selectedTabID === 'scheduling-profiler'
+        }
         onClick={downloadData}
         title="Save profile...">
         <ButtonIcon type="export" />
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index be073adc5d8b..a8336ba170ea 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -411,11 +411,16 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-active', documentElements);
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
+  updateStyleHelper(theme, 'color-resize-bar', documentElements);
   updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
   updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
-  updateStyleHelper(theme, 'color-shadow', documentElements);
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-flame-graph-label',
+    documentElements,
+  );
   updateStyleHelper(
     theme,
     'color-selected-tree-highlight-active',
@@ -426,6 +431,137 @@ export function updateThemeVariables(
     'color-selected-tree-highlight-inactive',
     documentElements,
   );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-priority-background',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-priority-border',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-user-timing',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-user-timing-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-idle',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-idle-selected',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-idle-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-render',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-render-selected',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-render-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-commit',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-commit-selected',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-commit-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-layout-effects',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-layout-effects-selected',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-layout-effects-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-passive-effects',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-passive-effects-selected',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-passive-effects-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-schedule',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-schedule-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-schedule-cascading',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-schedule-cascading-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-suspend',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-suspend-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-work-border',
+    documentElements,
+  );
+  updateStyleHelper(theme, 'color-shadow', documentElements);
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
   updateStyleHelper(theme, 'color-text-invalid', documentElements);
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.css b/packages/react-devtools-shared/src/devtools/views/TabBar.css
index 57abadaecf55..96b30c3dbf55 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.css
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.css
@@ -85,6 +85,14 @@
 .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;
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index 18664dae86b7..608c660293a8 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -29,7 +29,7 @@ export type Props = {|
   disabled?: boolean,
   id: string,
   selectTab: (tabID: any) => void,
-  tabs: Array<TabInfo>,
+  tabs: Array<TabInfo | null>,
   type: 'navigation' | 'profiler' | 'settings',
 |};
 
@@ -41,8 +41,9 @@ export default function TabBar({
   tabs,
   type,
 }: Props) {
-  if (!tabs.some(tab => tab.id === currentTab)) {
-    selectTab(tabs[0].id);
+  if (!tabs.some(tab => tab !== null && tab.id === currentTab)) {
+    const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo);
+    selectTab(firstTab.id);
   }
 
   const onChange = useCallback(
@@ -88,7 +89,13 @@ export default function TabBar({
 
   return (
     <Fragment>
-      {tabs.map(({icon, id, label, title}) => {
+      {tabs.map(tab => {
+        if (tab === null) {
+          return <div className={styles.VRule} />;
+        }
+
+        const {icon, id, label, title} = tab;
+
         let button = (
           <label
             className={[
diff --git a/packages/react-devtools-shared/src/devtools/views/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Tooltip.css
index e06518219d70..fbe19ce3c96e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Tooltip.css
+++ b/packages/react-devtools-shared/src/devtools/views/Tooltip.css
@@ -6,6 +6,7 @@
   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/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 8b3db6ee0772..0c5b9a4f01d4 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -77,6 +77,34 @@
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
+  --light-color-resize-bar: #cccccc;
+  --light-color-scheduling-profiler-flame-graph-label: #000000;
+  --light-color-scheduling-profiler-priority-background: #ededf0;
+  --light-color-scheduling-profiler-priority-border: #d7d7db;
+  --light-color-scheduling-profiler-user-timing: #c9cacd;
+  --light-color-scheduling-profiler-user-timing-hover:#93959a;
+  --light-color-scheduling-profiler-react-idle: #edf6ff;
+  --light-color-scheduling-profiler-react-idle-selected:#EDF6FF;
+  --light-color-scheduling-profiler-react-idle-hover:#EDF6FF;
+  --light-color-scheduling-profiler-react-render: #9fc3f3;
+  --light-color-scheduling-profiler-react-render-selected:#64A9F5;
+  --light-color-scheduling-profiler-react-render-hover:#2683E2;
+  --light-color-scheduling-profiler-react-commit: #ff718e;
+  --light-color-scheduling-profiler-react-commit-selected:#FF5277;
+  --light-color-scheduling-profiler-react-commit-hover:#ed0030;
+  --light-color-scheduling-profiler-react-layout-effects:#c88ff0;
+  --light-color-scheduling-profiler-react-layout-effects-selected:#934FC1;
+  --light-color-scheduling-profiler-react-layout-effects-hover:#601593;
+  --light-color-scheduling-profiler-react-passive-effects:#c88ff0;
+  --light-color-scheduling-profiler-react-passive-effects-selected:#934FC1;
+  --light-color-scheduling-profiler-react-passive-effects-hover:#601593;
+  --light-color-scheduling-profiler-react-schedule: #9fc3f3;
+  --light-color-scheduling-profiler-react-schedule-hover:#2683E2;
+  --light-color-scheduling-profiler-react-schedule-cascading:#ff718e;
+  --light-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
+  --light-color-scheduling-profiler-react-suspend: #a6e59f;
+  --light-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --light-color-scheduling-profiler-react-work-border:#ffffff;
   --light-color-scroll-thumb: #c2c2c2;
   --light-color-scroll-track: #fafafa;
   --light-color-search-match: yellow;
@@ -146,7 +174,7 @@
   --dark-color-console-warning-border: #665500;
   --dark-color-console-warning-icon: #f4bd00;
   --dark-color-console-warning-text: #f5f2ed;
-  --dark-color-context-background: rgba(255,255,255,.9);
+  --dark-color-context-background: rgba(255,255,255,.95);
   --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
   --dark-color-context-background-selected: #0088fa;
   --dark-color-context-border: #eeeeee;
@@ -169,6 +197,34 @@
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;
+  --dark-color-resize-bar: #3d424a;
+  --dark-color-scheduling-profiler-flame-graph-label: #000000;
+  --dark-color-scheduling-profiler-priority-background: #1d2129;
+  --dark-color-scheduling-profiler-priority-border: #282c34;
+  --dark-color-scheduling-profiler-user-timing: #c9cacd;
+  --dark-color-scheduling-profiler-user-timing-hover:#93959a;
+  --dark-color-scheduling-profiler-react-idle: #3d485b;
+  --dark-color-scheduling-profiler-react-idle-selected:#465269;
+  --dark-color-scheduling-profiler-react-idle-hover:#465269;
+  --dark-color-scheduling-profiler-react-render: #9fc3f3;
+  --dark-color-scheduling-profiler-react-render-selected:#64A9F5;
+  --dark-color-scheduling-profiler-react-render-hover:#2683E2;
+  --dark-color-scheduling-profiler-react-commit: #ff718e;
+  --dark-color-scheduling-profiler-react-commit-selected:#FF5277;
+  --dark-color-scheduling-profiler-react-commit-hover:#ed0030;
+  --dark-color-scheduling-profiler-react-layout-effects:#c88ff0;
+  --dark-color-scheduling-profiler-react-layout-effects-selected:#934FC1;
+  --dark-color-scheduling-profiler-react-layout-effects-hover:#601593;
+  --dark-color-scheduling-profiler-react-passive-effects:#c88ff0;
+  --dark-color-scheduling-profiler-react-passive-effects-selected:#934FC1;
+  --dark-color-scheduling-profiler-react-passive-effects-hover:#601593;
+  --dark-color-scheduling-profiler-react-schedule: #9fc3f3;
+  --dark-color-scheduling-profiler-react-schedule-hover:#2683E2;
+  --dark-color-scheduling-profiler-react-schedule-cascading:#ff718e;
+  --dark-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
+  --dark-color-scheduling-profiler-react-suspend: #a6e59f;
+  --dark-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --dark-color-scheduling-profiler-react-work-border:#ffffff;
   --dark-color-scroll-thumb: #afb3b9;
   --dark-color-scroll-track: #313640;
   --dark-color-search-match: yellow;
@@ -184,7 +240,7 @@
   --dark-color-toggle-background-on: #178fb9;
   --dark-color-toggle-background-off: #777d88;
   --dark-color-toggle-text: #ffffff;
-  --dark-color-tooltip-background: rgba(255, 255, 255, 0.9);
+  --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
   --dark-color-tooltip-text: #000000;
 
   /* Font smoothing */
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 070dafeb1d8e..20d5d7b1cb0c 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -103,7 +103,14 @@ export function loadHookNames(
 
     let didTimeout = false;
 
-    loadHookNamesFunction(hooksTree).then(
+    const response = loadHookNamesFunction(hooksTree);
+    console.log(
+      'loadHookNamesFunction:',
+      loadHookNamesFunction,
+      '->',
+      response,
+    );
+    response.then(
       function onSuccess(hookNames) {
         if (didTimeout) {
           return;
diff --git a/yarn.lock b/yarn.lock
index 03daa69ff812..e124de2be665 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2236,6 +2236,11 @@
   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/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
@@ -2841,6 +2846,11 @@ ajv-keywords@^3.1.0, ajv-keywords@^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-merge-patch@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/ajv-merge-patch/-/ajv-merge-patch-4.1.0.tgz#cd580e5860ac53431d6aa901fa3d5e2eb2b74a6c"
@@ -2869,6 +2879,16 @@ ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+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@^6.5.5, ajv@^6.9.1:
   version "6.10.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
@@ -6768,6 +6788,14 @@ file-loader@^6.0.0:
     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-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"
@@ -12631,6 +12659,15 @@ schema-utils@^2.6.5, schema-utils@^2.6.6, schema-utils@^2.7.0:
     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"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -14877,6 +14914,14 @@ worker-loader@^3.0.2:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+worker-loader@^3.0.3:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.8.tgz#5fc5cda4a3d3163d9c274a4e3a811ce8b60dbb37"
+  integrity sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 workerize-loader@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/workerize-loader/-/workerize-loader-1.3.0.tgz#4995cf2ff2b45dd6dc60e4411e63f5ae2c704d36"

From c76e4dbbc1f18f8ba2c8f02d34cae9ad0954a7f0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 22 Jul 2021 16:11:37 -0400
Subject: [PATCH 0715/1603] Removed an accidental console.log from DevTools
 source code

---
 .../react-devtools-scheduling-profiler/src/CanvasPage.js  | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 9064065e541d..74f1866c20de 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -282,17 +282,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
   useCanvasInteraction(canvasRef, interactor);
 
-  const setIsContextMenuShownWrapper = (...args) => {
-    console.log('setIsContextMenuShown()', ...args);
-    setIsContextMenuShown(...args);
-  };
   useContextMenu({
     data: {
       data,
       hoveredEvent,
     },
     id: CONTEXT_MENU_ID,
-    onChange: setIsContextMenuShownWrapper,
+    onChange: setIsContextMenuShown,
     ref: canvasRef,
   });
 
@@ -419,7 +415,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
                   Copy component name
                 </ContextMenuItem>
               )}
-              {event !== null && (
+              {event !== null && event.componentStack && (
                 <ContextMenuItem
                   onClick={() => copy(event.componentStack)}
                   title="Copy component stack">

From 4758e4533e933d29b1c3a960794eef354800f786 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 26 Jul 2021 09:56:59 -0400
Subject: [PATCH 0716/1603] React Native: Export getInspectorDataForInstance
 API (#21572)

This PR exports a new top-level API, getInspectorDataForInstance, for React Native (both development and production). Although this change adds a new export to the DEV bundle, it only impacts the production bundle for internal builds (not what's published to NPM).
---
 .../react-native-renderer/src/ReactFabric.js  |   4 +
 .../src/ReactNativeFiberInspector.js          | 126 ++++++++++--------
 .../src/ReactNativeRenderer.js                |   4 +
 packages/shared/ReactFeatureFlags.js          |   3 +
 .../forks/ReactFeatureFlags.native-fb.js      |   2 +-
 .../forks/ReactFeatureFlags.native-oss.js     |   2 +-
 .../forks/ReactFeatureFlags.test-renderer.js  |   2 +-
 .../ReactFeatureFlags.test-renderer.native.js |   2 +-
 .../ReactFeatureFlags.test-renderer.www.js    |   2 +-
 .../shared/forks/ReactFeatureFlags.testing.js |   2 +-
 .../forks/ReactFeatureFlags.testing.www.js    |   2 +-
 .../shared/forks/ReactFeatureFlags.www.js     |   2 +-
 12 files changed, 90 insertions(+), 63 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 6fe3eeb12d24..744c1c178397 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -23,6 +23,7 @@ import {
   injectIntoDevTools,
   getPublicRootInstance,
 } from 'react-reconciler/src/ReactFiberReconciler';
+import {getInspectorDataForInstance} from './ReactNativeFiberInspector';
 
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {setBatchingImplementation} from './legacy-events/ReactGenericBatching';
@@ -260,6 +261,9 @@ export {
   unmountComponentAtNode,
   stopSurface,
   createPortal,
+  // This export is typically undefined in production builds.
+  // See the "enableGetInspectorDataForInstanceInProduction" flag.
+  getInspectorDataForInstance,
 };
 
 injectIntoDevTools({
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
index ba8474fef23e..9579384ef5e9 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -19,7 +19,7 @@ import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
 import invariant from 'shared/invariant';
 // Module provided by RN:
 import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
-
+import {enableGetInspectorDataForInstanceInProduction} from 'shared/ReactFeatureFlags';
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
 
 const emptyObject = {};
@@ -27,59 +27,16 @@ if (__DEV__) {
   Object.freeze(emptyObject);
 }
 
-let getInspectorDataForViewTag;
-let getInspectorDataForViewAtPoint;
-
-if (__DEV__) {
-  const traverseOwnerTreeUp = function(hierarchy, instance: any) {
-    if (instance) {
-      hierarchy.unshift(instance);
-      traverseOwnerTreeUp(hierarchy, instance._debugOwner);
-    }
-  };
-
-  const getOwnerHierarchy = function(instance: any) {
-    const hierarchy = [];
-    traverseOwnerTreeUp(hierarchy, instance);
-    return hierarchy;
-  };
-
-  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 getHostProps = function(fiber) {
-    const host = findCurrentHostFiber(fiber);
-    if (host) {
-      return host.memoizedProps || emptyObject;
-    }
-    return emptyObject;
-  };
-
-  const getHostNode = function(fiber: Fiber | null, findNodeHandle) {
-    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;
-  };
+let createHierarchy;
+let getHostNode;
+let getHostProps;
+let lastNonHostInstance;
+let getInspectorDataForInstance;
+let getOwnerHierarchy;
+let traverseOwnerTreeUp;
 
-  const createHierarchy = function(fiberHierarchy) {
+if (__DEV__ || enableGetInspectorDataForInstanceInProduction) {
+  createHierarchy = function(fiberHierarchy) {
     return fiberHierarchy.map(fiber => ({
       name: getComponentNameFromType(fiber.type),
       getInspectorData: findNodeHandle => {
@@ -108,7 +65,33 @@ if (__DEV__) {
     }));
   };
 
-  const getInspectorDataForInstance = function(closestInstance): InspectorData {
+  getHostNode = function(fiber: Fiber | null, findNodeHandle) {
+    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;
+  };
+
+  getHostProps = function(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 {
@@ -135,6 +118,35 @@ if (__DEV__) {
     };
   };
 
+  getOwnerHierarchy = function(instance: any) {
+    const hierarchy = [];
+    traverseOwnerTreeUp(hierarchy, instance);
+    return hierarchy;
+  };
+
+  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];
+  };
+
+  traverseOwnerTreeUp = function(hierarchy, instance: any) {
+    if (instance) {
+      hierarchy.unshift(instance);
+      traverseOwnerTreeUp(hierarchy, instance._debugOwner);
+    }
+  };
+}
+
+let getInspectorDataForViewTag;
+let getInspectorDataForViewAtPoint;
+
+if (__DEV__) {
   getInspectorDataForViewTag = function(viewTag: number): Object {
     const closestInstance = getClosestInstanceFromNode(viewTag);
 
@@ -258,4 +270,8 @@ if (__DEV__) {
   };
 }
 
-export {getInspectorDataForViewAtPoint, getInspectorDataForViewTag};
+export {
+  getInspectorDataForInstance,
+  getInspectorDataForViewAtPoint,
+  getInspectorDataForViewTag,
+};
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 3c3f234e0cb6..a60683b47b2e 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -36,6 +36,7 @@ import {
   UIManager,
   legacySendAccessibilityEvent,
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {getInspectorDataForInstance} from './ReactNativeFiberInspector';
 
 import {getClosestInstanceFromNode} from './ReactNativeComponentTree';
 import {
@@ -264,6 +265,9 @@ export {
   createPortal,
   batchedUpdates as unstable_batchedUpdates,
   Internals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+  // This export is typically undefined in production builds.
+  // See the "enableGetInspectorDataForInstanceInProduction" flag.
+  getInspectorDataForInstance,
 };
 
 injectIntoDevTools({
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 862a6bde9b26..a1689f64a5d8 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -105,6 +105,9 @@ export const enableNewReconciler = false;
 
 export const disableNativeComponentFrames = false;
 
+// Internal only.
+export const enableGetInspectorDataForInstanceInProduction = false;
+
 // Errors that are thrown while unmounting (or after in the case of passive effects)
 // should bypass any error boundaries that are also unmounting (or have unmounted)
 // and be handled by the nearest still-mounted boundary.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 76cfa7d18f3e..9e52536fbb36 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -47,7 +47,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-
+export const enableGetInspectorDataForInstanceInProduction = true;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index f8595c01b927..b34b583f1886 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -46,7 +46,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-
+export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 528f42ddc3cc..7357217b1691 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -46,7 +46,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-
+export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 6a70e11a4c55..10a05e52e152 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -46,7 +46,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-
+export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index ef095eef7e7b..617ec8f0bc18 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -46,7 +46,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-
+export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 58c6400b0aee..50e1c73f8dd2 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -46,7 +46,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-
+export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 0c3d15890b27..d16f6212c548 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -46,7 +46,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = true;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-
+export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index e028c9ddb8ef..dadf7972612f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -60,7 +60,7 @@ export const warnAboutDeprecatedLifecycles = true;
 export const disableLegacyContext = __EXPERIMENTAL__;
 export const warnAboutStringRefs = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
-
+export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 

From b1811ebf01e174fb1e12c7f748bf1ed8aeedef0b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 26 Jul 2021 10:36:16 -0400
Subject: [PATCH 0717/1603] [DevTools] Add native events to the scheduling
 profiler (#21947)

---
 .../src/CanvasPage.js                         |  59 +-
 .../src/EventTooltip.css                      |   3 +-
 .../src/EventTooltip.js                       |  59 +-
 .../src/content-views/NativeEventsView.js     | 224 ++++++++
 .../src/content-views/ReactEventsView.js      |  12 +-
 .../src/content-views/constants.js            |  16 +-
 .../src/content-views/index.js                |   1 +
 .../__tests__/preprocessData-test.internal.js |  78 +--
 .../src/import-worker/preprocessData.js       | 513 +++++++++---------
 .../src/types.js                              |  12 +-
 .../views/Settings/SettingsContext.js         |  10 +
 .../src/devtools/views/root.css               |   8 +-
 12 files changed, 679 insertions(+), 316 deletions(-)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 74f1866c20de..bbf98acb265d 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -44,6 +44,7 @@ import {
 } from './view-base';
 import {
   FlamechartView,
+  NativeEventsView,
   ReactEventsView,
   ReactMeasuresView,
   TimeAxisMarkersView,
@@ -126,6 +127,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
   const surfaceRef = useRef(new Surface());
   const userTimingMarksViewRef = useRef(null);
+  const nativeEventsViewRef = useRef(null);
   const reactEventsViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
@@ -176,6 +178,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       topContentStack.addSubview(userTimingMarksView);
     }
 
+    const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);
+    nativeEventsViewRef.current = nativeEventsView;
+    topContentStack.addSubview(nativeEventsView);
+
     const reactEventsView = new ReactEventsView(surface, defaultFrame, data);
     reactEventsViewRef.current = reactEventsView;
     topContentStack.addSubview(reactEventsView);
@@ -299,7 +305,24 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
           setHoveredEvent({
             userTimingMark,
-            event: null,
+            nativeEvent: null,
+            reactEvent: null,
+            flamechartStackFrame: null,
+            measure: null,
+            data,
+          });
+        }
+      };
+    }
+
+    const {current: nativeEventsView} = nativeEventsViewRef;
+    if (nativeEventsView) {
+      nativeEventsView.onHover = nativeEvent => {
+        if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
+          setHoveredEvent({
+            userTimingMark: null,
+            nativeEvent,
+            reactEvent: null,
             flamechartStackFrame: null,
             measure: null,
             data,
@@ -310,11 +333,12 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
 
     const {current: reactEventsView} = reactEventsViewRef;
     if (reactEventsView) {
-      reactEventsView.onHover = event => {
-        if (!hoveredEvent || hoveredEvent.event !== event) {
+      reactEventsView.onHover = reactEvent => {
+        if (!hoveredEvent || hoveredEvent.reactEvent !== reactEvent) {
           setHoveredEvent({
             userTimingMark: null,
-            event,
+            nativeEvent: null,
+            reactEvent,
             flamechartStackFrame: null,
             measure: null,
             data,
@@ -329,7 +353,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         if (!hoveredEvent || hoveredEvent.measure !== measure) {
           setHoveredEvent({
             userTimingMark: null,
-            event: null,
+            nativeEvent: null,
+            reactEvent: null,
             flamechartStackFrame: null,
             measure,
             data,
@@ -347,7 +372,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         ) {
           setHoveredEvent({
             userTimingMark: null,
-            event: null,
+            nativeEvent: null,
+            reactEvent: null,
             flamechartStackFrame,
             measure: null,
             data,
@@ -368,9 +394,18 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       );
     }
 
+    const {current: nativeEventsView} = nativeEventsViewRef;
+    if (nativeEventsView) {
+      nativeEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.nativeEvent : null,
+      );
+    }
+
     const {current: reactEventsView} = reactEventsViewRef;
     if (reactEventsView) {
-      reactEventsView.setHoveredEvent(hoveredEvent ? hoveredEvent.event : null);
+      reactEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.reactEvent : null,
+      );
     }
 
     const {current: reactMeasuresView} = reactMeasuresViewRef;
@@ -402,22 +437,22 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
             return null;
           }
           const {
-            event,
+            reactEvent,
             flamechartStackFrame,
             measure,
           } = contextData.hoveredEvent;
           return (
             <Fragment>
-              {event !== null && (
+              {reactEvent !== null && (
                 <ContextMenuItem
-                  onClick={() => copy(event.componentName)}
+                  onClick={() => copy(reactEvent.componentName)}
                   title="Copy component name">
                   Copy component name
                 </ContextMenuItem>
               )}
-              {event !== null && event.componentStack && (
+              {reactEvent !== null && reactEvent.componentStack && (
                 <ContextMenuItem
-                  onClick={() => copy(event.componentStack)}
+                  onClick={() => copy(reactEvent.componentStack)}
                   title="Copy component stack">
                   Copy component stack
                 </ContextMenuItem>
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
index b6503b7338c3..91e60bf13cfd 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
@@ -29,6 +29,7 @@
 .DetailsGridLabel {
   color: var(--color-dim);
   text-align: right;
+  white-space: nowrap;
 }
 
 .DetailsGridURL {
@@ -45,7 +46,7 @@
 .ComponentName {
   font-weight: bold;
   word-break: break-word;
-  margin-right: 0.4rem;
+  margin-right: 0.25rem;
 }
 
 .ComponentStack {
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 608309c4a3ca..ee77c85cc8da 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -10,6 +10,7 @@
 import type {Point} from './view-base';
 import type {
   FlamechartStackFrame,
+  NativeEvent,
   ReactEvent,
   ReactHoverContextInfo,
   ReactMeasure,
@@ -47,8 +48,8 @@ function trimmedString(string: string, length: number): string {
   return string;
 }
 
-function getReactEventLabel(type): string | null {
-  switch (type) {
+function getReactEventLabel(event: ReactEvent): string | null {
+  switch (event.type) {
     case 'schedule-render':
       return 'render scheduled';
     case 'schedule-state-update':
@@ -111,10 +112,22 @@ export default function EventTooltip({data, hoveredEvent, origin}: Props) {
     return null;
   }
 
-  const {event, measure, flamechartStackFrame, userTimingMark} = hoveredEvent;
+  const {
+    nativeEvent,
+    reactEvent,
+    measure,
+    flamechartStackFrame,
+    userTimingMark,
+  } = hoveredEvent;
 
-  if (event !== null) {
-    return <TooltipReactEvent event={event} tooltipRef={tooltipRef} />;
+  if (nativeEvent !== null) {
+    return (
+      <TooltipNativeEvent nativeEvent={nativeEvent} tooltipRef={tooltipRef} />
+    );
+  } else if (reactEvent !== null) {
+    return (
+      <TooltipReactEvent reactEvent={reactEvent} tooltipRef={tooltipRef} />
+    );
   } else if (measure !== null) {
     return (
       <TooltipReactMeasure
@@ -189,23 +202,47 @@ const TooltipFlamechartNode = ({
   );
 };
 
+const TooltipNativeEvent = ({
+  nativeEvent,
+  tooltipRef,
+}: {
+  nativeEvent: NativeEvent,
+  tooltipRef: Return<typeof useRef>,
+}) => {
+  const {duration, timestamp, type} = nativeEvent;
+
+  return (
+    <div className={styles.Tooltip} ref={tooltipRef}>
+      <span className={styles.ComponentName}>{trimmedString(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>
+  );
+};
+
 const TooltipReactEvent = ({
-  event,
+  reactEvent,
   tooltipRef,
 }: {
-  event: ReactEvent,
+  reactEvent: ReactEvent,
   tooltipRef: Return<typeof useRef>,
 }) => {
-  const label = getReactEventLabel(event.type);
-  const color = getReactEventColor(event);
+  const label = getReactEventLabel(reactEvent);
+  const color = getReactEventColor(reactEvent);
   if (!label || !color) {
     if (__DEV__) {
-      console.warn('Unexpected event type "%s"', event.type);
+      console.warn('Unexpected reactEvent type "%s"', reactEvent.type);
     }
     return null;
   }
 
-  const {componentName, componentStack, timestamp} = event;
+  const {componentName, componentStack, timestamp} = reactEvent;
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
new file mode 100644
index 000000000000..97d4369753a1
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -0,0 +1,224 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {NativeEvent, ReactProfilerData} from '../types';
+import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
+
+import {
+  positioningScaleFactor,
+  timestampToPosition,
+  positionToTimestamp,
+} from './utils/positioning';
+import {
+  View,
+  Surface,
+  rectContainsPoint,
+  rectIntersectsRect,
+  intersectionOfRects,
+} from '../view-base';
+import {
+  COLORS,
+  EVENT_ROW_PADDING,
+  EVENT_DIAMETER,
+  BORDER_SIZE,
+} from './constants';
+
+const EVENT_ROW_HEIGHT_FIXED =
+  EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;
+
+export class NativeEventsView extends View {
+  _profilerData: ReactProfilerData;
+  _intrinsicSize: Size;
+
+  _hoveredEvent: NativeEvent | null = null;
+  onHover: ((event: NativeEvent | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+    super(surface, frame);
+    this._profilerData = profilerData;
+
+    this._intrinsicSize = {
+      width: this._profilerData.duration,
+      height: EVENT_ROW_HEIGHT_FIXED,
+    };
+  }
+
+  desiredSize() {
+    return this._intrinsicSize;
+  }
+
+  setHoveredEvent(hoveredEvent: NativeEvent | null) {
+    if (this._hoveredEvent === hoveredEvent) {
+      return;
+    }
+    this._hoveredEvent = hoveredEvent;
+    this.setNeedsDisplay();
+  }
+
+  /**
+   * Draw a single `NativeEvent` as a circle in the canvas.
+   */
+  _drawSingleNativeEvent(
+    context: CanvasRenderingContext2D,
+    rect: Rect,
+    event: NativeEvent,
+    baseY: number,
+    scaleFactor: number,
+    showHoverHighlight: boolean,
+  ) {
+    const {frame} = this;
+    const {duration, timestamp} = event;
+
+    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: EVENT_DIAMETER},
+    };
+    if (!rectIntersectsRect(eventRect, rect)) {
+      return; // Not in view
+    }
+
+    const fillStyle = showHoverHighlight
+      ? COLORS.NATIVE_EVENT_HOVER
+      : COLORS.NATIVE_EVENT;
+
+    const drawableRect = intersectionOfRects(eventRect, rect);
+    context.beginPath();
+    context.fillStyle = fillStyle;
+    context.fillRect(
+      drawableRect.origin.x,
+      drawableRect.origin.y,
+      drawableRect.size.width,
+      drawableRect.size.height,
+    );
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {nativeEvents},
+      _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 + EVENT_ROW_PADDING;
+    const scaleFactor = positioningScaleFactor(
+      this._intrinsicSize.width,
+      frame,
+    );
+
+    nativeEvents.forEach(event => {
+      if (event === _hoveredEvent) {
+        // Draw the highlighted items on top so they stand out.
+        // This is helpful if there are multiple (overlapping) items close to each other.
+        this._drawSingleNativeEvent(
+          context,
+          visibleArea,
+          event,
+          baseY,
+          scaleFactor,
+          true,
+        );
+      } else {
+        this._drawSingleNativeEvent(
+          context,
+          visibleArea,
+          event,
+          baseY,
+          scaleFactor,
+          false,
+        );
+      }
+    });
+
+    // 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.PRIORITY_BORDER;
+      context.fillRect(
+        borderDrawableRect.origin.x,
+        borderDrawableRect.origin.y,
+        borderDrawableRect.size.width,
+        borderDrawableRect.size.height,
+      );
+    }
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction) {
+    const {frame, _intrinsicSize, onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const {nativeEvents} = this._profilerData;
+
+    const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
+    const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
+
+    // Find the event 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).
+    for (let index = nativeEvents.length - 1; index >= 0; index--) {
+      const nativeEvent = nativeEvents[index];
+      const {duration, timestamp} = nativeEvent;
+
+      if (
+        hoverTimestamp >= timestamp &&
+        hoverTimestamp <= timestamp + duration
+      ) {
+        onHover(nativeEvent);
+        return;
+      }
+    }
+
+    onHover(null);
+  }
+
+  handleInteraction(interaction: Interaction) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction);
+        break;
+    }
+  }
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
index fb60e54eb47c..e67f590f6bf1 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
@@ -100,6 +100,8 @@ export class ReactEventsView extends View {
     let fillStyle = null;
 
     switch (type) {
+      case 'native-event':
+        return;
       case 'schedule-render':
       case 'schedule-state-update':
       case 'schedule-force-update':
@@ -140,7 +142,7 @@ export class ReactEventsView extends View {
   draw(context: CanvasRenderingContext2D) {
     const {
       frame,
-      _profilerData: {events},
+      _profilerData: {reactEvents},
       _hoveredEvent,
       visibleArea,
     } = this;
@@ -162,7 +164,7 @@ export class ReactEventsView extends View {
 
     const highlightedEvents: ReactEvent[] = [];
 
-    events.forEach(event => {
+    reactEvents.forEach(event => {
       if (
         event === _hoveredEvent ||
         (_hoveredEvent &&
@@ -236,7 +238,7 @@ export class ReactEventsView extends View {
     }
 
     const {
-      _profilerData: {events},
+      _profilerData: {reactEvents},
     } = this;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
@@ -250,8 +252,8 @@ export class ReactEventsView extends View {
 
     // 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 = events.length - 1; index >= 0; index--) {
-      const event = events[index];
+    for (let index = reactEvents.length - 1; index >= 0; index--) {
+      const event = reactEvents[index];
       const {timestamp} = event;
 
       if (
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index baaedebc64ca..6581bed312c2 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -44,10 +44,12 @@ export const FLAMECHART_TEXT_PADDING = 3;
 // TODO Replace this with "export let" vars
 export let COLORS = {
   BACKGROUND: '',
+  FLAME_GRAPH_LABEL: '',
+  NATIVE_EVENT: '',
+  NATIVE_EVENT_HOVER: '',
   PRIORITY_BACKGROUND: '',
   PRIORITY_BORDER: '',
   PRIORITY_LABEL: '',
-  FLAME_GRAPH_LABEL: '',
   USER_TIMING: '',
   USER_TIMING_HOVER: '',
   REACT_IDLE: '',
@@ -81,6 +83,15 @@ export function updateColorsToMatchTheme(): void {
 
   COLORS = {
     BACKGROUND: computedStyle.getPropertyValue('--color-background'),
+    FLAME_GRAPH_LABEL: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-flame-graph-label',
+    ),
+    NATIVE_EVENT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-native-event',
+    ),
+    NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-native-event-hover',
+    ),
     PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-priority-background',
     ),
@@ -88,9 +99,6 @@ export function updateColorsToMatchTheme(): void {
       '--color-scheduling-profiler-priority-border',
     ),
     PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
-    FLAME_GRAPH_LABEL: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-flame-graph-label',
-    ),
     USER_TIMING: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-user-timing',
     ),
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
index e017b95e20ec..b50490b13ae9 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
@@ -8,6 +8,7 @@
  */
 
 export * from './FlamechartView';
+export * from './NativeEventsView';
 export * from './ReactEventsView';
 export * from './ReactMeasuresView';
 export * from './TimeAxisMarkersView';
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 128fdfb0f1dc..649d90246993 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -204,10 +204,11 @@ describe(preprocessData, () => {
 
     expect(preprocessData([cpuProfilerSample, randomSample])).toStrictEqual({
       duration: 0.002,
-      events: [],
       flamechart: [],
       measures: [],
+      nativeEvents: [],
       otherUserTimingMarks: [],
+      reactEvents: [],
       startTime: 1,
     });
   });
@@ -258,15 +259,6 @@ describe(preprocessData, () => {
       ]),
     ).toStrictEqual({
       duration: 0.008,
-      events: [
-        {
-          componentStack: '',
-          laneLabels: [],
-          lanes: [9],
-          timestamp: 0.002,
-          type: 'schedule-render',
-        },
-      ],
       flamechart: [],
       measures: [
         {
@@ -306,7 +298,17 @@ describe(preprocessData, () => {
           type: 'layout-effects',
         },
       ],
+      nativeEvents: [],
       otherUserTimingMarks: [],
+      reactEvents: [
+        {
+          componentStack: '',
+          laneLabels: [],
+          lanes: [9],
+          timestamp: 0.002,
+          type: 'schedule-render',
+        },
+      ],
       startTime: 1,
     });
   });
@@ -320,15 +322,6 @@ describe(preprocessData, () => {
     const userTimingData = createUserTimingData(clearedMarks);
     expect(preprocessData(userTimingData)).toStrictEqual({
       duration: 0.011,
-      events: [
-        {
-          componentStack: '',
-          laneLabels: ['Sync'],
-          lanes: [0],
-          timestamp: 0.005,
-          type: 'schedule-render',
-        },
-      ],
       flamechart: [],
       measures: [
         {
@@ -368,6 +361,7 @@ describe(preprocessData, () => {
           type: 'layout-effects',
         },
       ],
+      nativeEvents: [],
       otherUserTimingMarks: [
         {
           name: '__v3',
@@ -378,6 +372,15 @@ describe(preprocessData, () => {
           timestamp: 0.004,
         },
       ],
+      reactEvents: [
+        {
+          componentStack: '',
+          laneLabels: ['Sync'],
+          lanes: [0],
+          timestamp: 0.005,
+          type: 'schedule-render',
+        },
+      ],
       startTime: 1,
     });
   });
@@ -400,24 +403,6 @@ describe(preprocessData, () => {
     const userTimingData = createUserTimingData(clearedMarks);
     expect(preprocessData(userTimingData)).toStrictEqual({
       duration: 0.022,
-      events: [
-        {
-          componentStack: '',
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.005,
-          type: 'schedule-render',
-        },
-        {
-          componentName: 'App',
-          componentStack: '',
-          isCascading: false,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.013,
-          type: 'schedule-state-update',
-        },
-      ],
       flamechart: [],
       measures: [
         {
@@ -511,6 +496,7 @@ describe(preprocessData, () => {
           type: 'passive-effects',
         },
       ],
+      nativeEvents: [],
       otherUserTimingMarks: [
         {
           name: '__v3',
@@ -521,6 +507,24 @@ describe(preprocessData, () => {
           timestamp: 0.004,
         },
       ],
+      reactEvents: [
+        {
+          componentStack: '',
+          laneLabels: ['Default'],
+          lanes: [4],
+          timestamp: 0.005,
+          type: 'schedule-render',
+        },
+        {
+          componentName: 'App',
+          componentStack: '',
+          isCascading: false,
+          laneLabels: ['Default'],
+          lanes: [4],
+          timestamp: 0.013,
+          type: 'schedule-state-update',
+        },
+      ],
       startTime: 1,
     });
   });
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index da4153f677de..2140c40ce490 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -161,247 +161,275 @@ function processTimelineEvent(
   /** Intermediate processor state. May be mutated. */
   state: ProcessorState,
 ) {
-  const {cat, name, ts, ph} = event;
-  if (cat !== 'blink.user_timing') {
-    return;
-  }
-
-  const startTime = (ts - currentProfilerData.startTime) / 1000;
-
-  // React Events - schedule
-  if (name.startsWith('--schedule-render-')) {
-    const [laneBitmaskString, laneLabels, ...splitComponentStack] = name
-      .substr(18)
-      .split('-');
-    currentProfilerData.events.push({
-      type: 'schedule-render',
-      lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
-      laneLabels: laneLabels ? laneLabels.split(',') : [],
-      componentStack: splitComponentStack.join('-'),
-      timestamp: startTime,
-    });
-  } else if (name.startsWith('--schedule-forced-update-')) {
-    const [
-      laneBitmaskString,
-      laneLabels,
-      componentName,
-      ...splitComponentStack
-    ] = name.substr(25).split('-');
-    const isCascading = !!state.measureStack.find(
-      ({type}) => type === 'commit',
-    );
-    currentProfilerData.events.push({
-      type: 'schedule-force-update',
-      lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
-      laneLabels: laneLabels ? laneLabels.split(',') : [],
-      componentName,
-      componentStack: splitComponentStack.join('-'),
-      timestamp: startTime,
-      isCascading,
-    });
-  } else if (name.startsWith('--schedule-state-update-')) {
-    const [
-      laneBitmaskString,
-      laneLabels,
-      componentName,
-      ...splitComponentStack
-    ] = name.substr(24).split('-');
-    const isCascading = !!state.measureStack.find(
-      ({type}) => type === 'commit',
-    );
-    currentProfilerData.events.push({
-      type: 'schedule-state-update',
-      lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
-      laneLabels: laneLabels ? laneLabels.split(',') : [],
-      componentName,
-      componentStack: splitComponentStack.join('-'),
-      timestamp: startTime,
-      isCascading,
-    });
-  } // eslint-disable-line brace-style
-
-  // React Events - suspense
-  else if (name.startsWith('--suspense-suspend-')) {
-    const [id, componentName, ...splitComponentStack] = name
-      .substr(19)
-      .split('-');
-    currentProfilerData.events.push({
-      type: 'suspense-suspend',
-      id,
-      componentName,
-      componentStack: splitComponentStack.join('-'),
-      timestamp: startTime,
-    });
-  } else if (name.startsWith('--suspense-resolved-')) {
-    const [id, componentName, ...splitComponentStack] = name
-      .substr(20)
-      .split('-');
-    currentProfilerData.events.push({
-      type: 'suspense-resolved',
-      id,
-      componentName,
-      componentStack: splitComponentStack.join('-'),
-      timestamp: startTime,
-    });
-  } else if (name.startsWith('--suspense-rejected-')) {
-    const [id, componentName, ...splitComponentStack] = name
-      .substr(20)
-      .split('-');
-    currentProfilerData.events.push({
-      type: 'suspense-rejected',
-      id,
-      componentName,
-      componentStack: splitComponentStack.join('-'),
-      timestamp: startTime,
-    });
-  } // eslint-disable-line brace-style
-
-  // React Measures - render
-  else if (name.startsWith('--render-start-')) {
-    if (state.nextRenderShouldGenerateNewBatchID) {
-      state.nextRenderShouldGenerateNewBatchID = false;
-      state.batchUID = ((state.uidCounter++: any): BatchUID);
-    }
-    const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
-    const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
-    throwIfIncomplete('render', state.measureStack);
-    if (getLastType(state.measureStack) !== 'render-idle') {
-      markWorkStarted(
-        'render-idle',
-        startTime,
-        lanes,
-        laneLabels ? laneLabels.split(',') : [],
-        currentProfilerData,
-        state,
-      );
-    }
-    markWorkStarted(
-      'render',
-      startTime,
-      lanes,
-      laneLabels ? laneLabels.split(',') : [],
-      currentProfilerData,
-      state,
-    );
-  } else if (
-    name.startsWith('--render-stop') ||
-    name.startsWith('--render-yield')
-  ) {
-    markWorkCompleted(
-      'render',
-      startTime,
-      currentProfilerData,
-      state.measureStack,
-    );
-  } else if (name.startsWith('--render-cancel')) {
-    state.nextRenderShouldGenerateNewBatchID = true;
-    markWorkCompleted(
-      'render',
-      startTime,
-      currentProfilerData,
-      state.measureStack,
-    );
-    markWorkCompleted(
-      'render-idle',
-      startTime,
-      currentProfilerData,
-      state.measureStack,
-    );
-  } // eslint-disable-line brace-style
-
-  // React Measures - commits
-  else if (name.startsWith('--commit-start-')) {
-    state.nextRenderShouldGenerateNewBatchID = true;
-    const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
-    const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
-    markWorkStarted(
-      'commit',
-      startTime,
-      lanes,
-      laneLabels ? laneLabels.split(',') : [],
-      currentProfilerData,
-      state,
-    );
-  } else if (name.startsWith('--commit-stop')) {
-    markWorkCompleted(
-      'commit',
-      startTime,
-      currentProfilerData,
-      state.measureStack,
-    );
-    markWorkCompleted(
-      'render-idle',
-      startTime,
-      currentProfilerData,
-      state.measureStack,
-    );
-  } // eslint-disable-line brace-style
-
-  // React Measures - layout effects
-  else if (name.startsWith('--layout-effects-start-')) {
-    const [laneBitmaskString, laneLabels] = name.substr(23).split('-');
-    const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
-    markWorkStarted(
-      'layout-effects',
-      startTime,
-      lanes,
-      laneLabels ? laneLabels.split(',') : [],
-      currentProfilerData,
-      state,
-    );
-  } else if (name.startsWith('--layout-effects-stop')) {
-    markWorkCompleted(
-      'layout-effects',
-      startTime,
-      currentProfilerData,
-      state.measureStack,
-    );
-  } // eslint-disable-line brace-style
-
-  // React Measures - passive effects
-  else if (name.startsWith('--passive-effects-start-')) {
-    const [laneBitmaskString, laneLabels] = name.substr(24).split('-');
-    const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
-    markWorkStarted(
-      'passive-effects',
-      startTime,
-      lanes,
-      laneLabels ? laneLabels.split(',') : [],
-      currentProfilerData,
-      state,
-    );
-  } else if (name.startsWith('--passive-effects-stop')) {
-    markWorkCompleted(
-      'passive-effects',
-      startTime,
-      currentProfilerData,
-      state.measureStack,
-    );
-  } // eslint-disable-line brace-style
-
-  // Other user timing marks/measures
-  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.
-  } // eslint-disable-line brace-style
-
-  // Unrecognized event
-  else {
-    throw new InvalidProfileError(
-      `Unrecognized event ${JSON.stringify(
-        event,
-      )}! This is likely a bug in this profiler tool.`,
-    );
+  const {args, cat, name, ts, ph} = event;
+  switch (cat) {
+    case 'devtools.timeline':
+      if (name === 'EventDispatch') {
+        const type = args.data.type;
+
+        if (type.startsWith('react-')) {
+          const stackTrace = args.data.stackTrace;
+          if (stackTrace) {
+            const topFrame = stackTrace[stackTrace.length - 1];
+            if (topFrame.url.includes('node_modules/react-dom')) {
+              // Filter out fake React events dispatched by invokeGuardedCallbackDev.
+              return;
+            }
+          }
+        }
+
+        const startTime = (ts - currentProfilerData.startTime) / 1000;
+        const duration = event.dur / 1000;
+
+        // TODO (scheduling profiler) Should we filter out certain event types?
+        currentProfilerData.nativeEvents.push({
+          duration,
+          timestamp: startTime,
+          type,
+        });
+      }
+      break;
+    case 'blink.user_timing':
+      const startTime = (ts - currentProfilerData.startTime) / 1000;
+
+      // React Events - schedule
+      if (name.startsWith('--schedule-render-')) {
+        const [
+          laneBitmaskString,
+          laneLabels,
+          ...splitComponentStack
+        ] = name.substr(18).split('-');
+        currentProfilerData.reactEvents.push({
+          type: 'schedule-render',
+          lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          laneLabels: laneLabels ? laneLabels.split(',') : [],
+          componentStack: splitComponentStack.join('-'),
+          timestamp: startTime,
+        });
+      } else if (name.startsWith('--schedule-forced-update-')) {
+        const [
+          laneBitmaskString,
+          laneLabels,
+          componentName,
+          ...splitComponentStack
+        ] = name.substr(25).split('-');
+        const isCascading = !!state.measureStack.find(
+          ({type}) => type === 'commit',
+        );
+        currentProfilerData.reactEvents.push({
+          type: 'schedule-force-update',
+          lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          laneLabels: laneLabels ? laneLabels.split(',') : [],
+          componentName,
+          componentStack: splitComponentStack.join('-'),
+          timestamp: startTime,
+          isCascading,
+        });
+      } else if (name.startsWith('--schedule-state-update-')) {
+        const [
+          laneBitmaskString,
+          laneLabels,
+          componentName,
+          ...splitComponentStack
+        ] = name.substr(24).split('-');
+        const isCascading = !!state.measureStack.find(
+          ({type}) => type === 'commit',
+        );
+        currentProfilerData.reactEvents.push({
+          type: 'schedule-state-update',
+          lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
+          laneLabels: laneLabels ? laneLabels.split(',') : [],
+          componentName,
+          componentStack: splitComponentStack.join('-'),
+          timestamp: startTime,
+          isCascading,
+        });
+      } // eslint-disable-line brace-style
+
+      // React Events - suspense
+      else if (name.startsWith('--suspense-suspend-')) {
+        const [id, componentName, ...splitComponentStack] = name
+          .substr(19)
+          .split('-');
+        currentProfilerData.reactEvents.push({
+          type: 'suspense-suspend',
+          id,
+          componentName,
+          componentStack: splitComponentStack.join('-'),
+          timestamp: startTime,
+        });
+      } else if (name.startsWith('--suspense-resolved-')) {
+        const [id, componentName, ...splitComponentStack] = name
+          .substr(20)
+          .split('-');
+        currentProfilerData.reactEvents.push({
+          type: 'suspense-resolved',
+          id,
+          componentName,
+          componentStack: splitComponentStack.join('-'),
+          timestamp: startTime,
+        });
+      } else if (name.startsWith('--suspense-rejected-')) {
+        const [id, componentName, ...splitComponentStack] = name
+          .substr(20)
+          .split('-');
+        currentProfilerData.reactEvents.push({
+          type: 'suspense-rejected',
+          id,
+          componentName,
+          componentStack: splitComponentStack.join('-'),
+          timestamp: startTime,
+        });
+      } // eslint-disable-line brace-style
+
+      // React Measures - render
+      else if (name.startsWith('--render-start-')) {
+        if (state.nextRenderShouldGenerateNewBatchID) {
+          state.nextRenderShouldGenerateNewBatchID = false;
+          state.batchUID = ((state.uidCounter++: any): BatchUID);
+        }
+        const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
+        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        throwIfIncomplete('render', state.measureStack);
+        if (getLastType(state.measureStack) !== 'render-idle') {
+          markWorkStarted(
+            'render-idle',
+            startTime,
+            lanes,
+            laneLabels ? laneLabels.split(',') : [],
+            currentProfilerData,
+            state,
+          );
+        }
+        markWorkStarted(
+          'render',
+          startTime,
+          lanes,
+          laneLabels ? laneLabels.split(',') : [],
+          currentProfilerData,
+          state,
+        );
+      } else if (
+        name.startsWith('--render-stop') ||
+        name.startsWith('--render-yield')
+      ) {
+        markWorkCompleted(
+          'render',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } else if (name.startsWith('--render-cancel')) {
+        state.nextRenderShouldGenerateNewBatchID = true;
+        markWorkCompleted(
+          'render',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+        markWorkCompleted(
+          'render-idle',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } // eslint-disable-line brace-style
+
+      // React Measures - commits
+      else if (name.startsWith('--commit-start-')) {
+        state.nextRenderShouldGenerateNewBatchID = true;
+        const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
+        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        markWorkStarted(
+          'commit',
+          startTime,
+          lanes,
+          laneLabels ? laneLabels.split(',') : [],
+          currentProfilerData,
+          state,
+        );
+      } else if (name.startsWith('--commit-stop')) {
+        markWorkCompleted(
+          'commit',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+        markWorkCompleted(
+          'render-idle',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } // eslint-disable-line brace-style
+
+      // React Measures - layout effects
+      else if (name.startsWith('--layout-effects-start-')) {
+        const [laneBitmaskString, laneLabels] = name.substr(23).split('-');
+        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        markWorkStarted(
+          'layout-effects',
+          startTime,
+          lanes,
+          laneLabels ? laneLabels.split(',') : [],
+          currentProfilerData,
+          state,
+        );
+      } else if (name.startsWith('--layout-effects-stop')) {
+        markWorkCompleted(
+          'layout-effects',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } // eslint-disable-line brace-style
+
+      // React Measures - passive effects
+      else if (name.startsWith('--passive-effects-start-')) {
+        const [laneBitmaskString, laneLabels] = name.substr(24).split('-');
+        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        markWorkStarted(
+          'passive-effects',
+          startTime,
+          lanes,
+          laneLabels ? laneLabels.split(',') : [],
+          currentProfilerData,
+          state,
+        );
+      } else if (name.startsWith('--passive-effects-stop')) {
+        markWorkCompleted(
+          'passive-effects',
+          startTime,
+          currentProfilerData,
+          state.measureStack,
+        );
+      } // eslint-disable-line brace-style
+
+      // Other user timing marks/measures
+      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.
+      } // eslint-disable-line brace-style
+
+      // Unrecognized event
+      else {
+        throw new InvalidProfileError(
+          `Unrecognized event ${JSON.stringify(
+            event,
+          )}! This is likely a bug in this profiler tool.`,
+        );
+      }
+      break;
   }
 }
 
@@ -447,7 +475,8 @@ export default function preprocessData(
   const profilerData: ReactProfilerData = {
     startTime: 0,
     duration: 0,
-    events: [],
+    nativeEvents: [],
+    reactEvents: [],
     measures: [],
     flamechart,
     otherUserTimingMarks: [],
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 833df582a529..3047e7abae06 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -21,6 +21,12 @@ export type Milliseconds = number;
 
 export type ReactLane = number;
 
+export type NativeEvent = {|
+  +duration: Milliseconds,
+  +timestamp: Milliseconds,
+  +type: string,
+|};
+
 type BaseReactEvent = {|
   +componentName?: string,
   +componentStack?: string,
@@ -122,14 +128,16 @@ export type Flamechart = FlamechartStackLayer[];
 export type ReactProfilerData = {|
   startTime: number,
   duration: number,
-  events: ReactEvent[],
+  nativeEvents: NativeEvent[],
+  reactEvents: ReactEvent[],
   measures: ReactMeasure[],
   flamechart: Flamechart,
   otherUserTimingMarks: UserTimingMark[],
 |};
 
 export type ReactHoverContextInfo = {|
-  event: ReactEvent | null,
+  nativeEvent: NativeEvent | null,
+  reactEvent: ReactEvent | null,
   measure: ReactMeasure | null,
   data: $ReadOnly<ReactProfilerData> | null,
   flamechartStackFrame: FlamechartStackFrame | null,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index a8336ba170ea..8967cca0f221 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -421,6 +421,16 @@ export function updateThemeVariables(
     'color-scheduling-profiler-flame-graph-label',
     documentElements,
   );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-native-event',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-native-event-hover',
+    documentElements,
+  );
   updateStyleHelper(
     theme,
     'color-selected-tree-highlight-active',
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 0c5b9a4f01d4..13f67daba225 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -79,8 +79,10 @@
   --light-color-record-inactive: #0088fa;
   --light-color-resize-bar: #cccccc;
   --light-color-scheduling-profiler-flame-graph-label: #000000;
-  --light-color-scheduling-profiler-priority-background: #ededf0;
-  --light-color-scheduling-profiler-priority-border: #d7d7db;
+  --light-color-scheduling-profiler-native-event: #aaaaaa;
+  --light-color-scheduling-profiler-native-event-hover: #888888;
+  --light-color-scheduling-profiler-priority-background: #f6f6f6;
+  --light-color-scheduling-profiler-priority-border: #eeeeee;
   --light-color-scheduling-profiler-user-timing: #c9cacd;
   --light-color-scheduling-profiler-user-timing-hover:#93959a;
   --light-color-scheduling-profiler-react-idle: #edf6ff;
@@ -199,6 +201,8 @@
   --dark-color-record-inactive: #61dafb;
   --dark-color-resize-bar: #3d424a;
   --dark-color-scheduling-profiler-flame-graph-label: #000000;
+  --dark-color-scheduling-profiler-native-event: #aaaaaa;
+  --dark-color-scheduling-profiler-native-event-hover: #888888;
   --dark-color-scheduling-profiler-priority-background: #1d2129;
   --dark-color-scheduling-profiler-priority-border: #282c34;
   --dark-color-scheduling-profiler-user-timing: #c9cacd;

From 419cc9c3799bc296c3c2a2c93880826aca680886 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 26 Jul 2021 11:18:55 -0400
Subject: [PATCH 0718/1603] Fix: Hide new/updated nodes in already hidden tree
 (#21929)

When a new node is added to an already hidden Offscreen tree, we need
to schedule a visibility effect to hide it. Previously we would only
hide when the boundary initially switches from visible to hidden, which
meant that newly inserted nodes would be visible.

We need to do the same thing for nodes that are updated, because the
update might affect the DOM node's `style.display` property.

The implementation is to check the `subtreeFlags` for an Insertion or
Update effect.

This only affects Offscreen, not Suspense, because Suspense boundaries
cannot be updated while in their fallback (hidden) state.

And it only affects mutation mode, because in persistent mode we
implement hiding by cloning the host tree during the complete phase,
which already happens on every update.
---
 .../src/ReactFiberCompleteWork.new.js         |  26 +++-
 .../src/ReactFiberCompleteWork.old.js         |  26 +++-
 .../src/__tests__/ReactOffscreen-test.js      | 112 +++++++++++++-----
 3 files changed, 120 insertions(+), 44 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index b6feee098b4f..9416ac45dd4c 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -63,6 +63,7 @@ import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
   RefStatic,
+  Placement,
   Update,
   Visibility,
   NoFlags,
@@ -1369,13 +1370,26 @@ function completeWork(
         }
       }
 
-      // Don't bubble properties for hidden children.
-      if (
-        !nextIsHidden ||
-        includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) ||
-        (workInProgress.mode & ConcurrentMode) === NoMode
-      ) {
+      if (!nextIsHidden || (workInProgress.mode & ConcurrentMode) === NoMode) {
         bubbleProperties(workInProgress);
+      } else {
+        // Don't bubble properties for hidden children unless we're rendering
+        // at offscreen priority.
+        if (includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane))) {
+          bubbleProperties(workInProgress);
+          if (supportsMutation) {
+            // 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 (
+              workInProgress.tag !== LegacyHiddenComponent &&
+              workInProgress.subtreeFlags & (Placement | Update) &&
+              newProps.mode !== 'unstable-defer-without-hiding'
+            ) {
+              workInProgress.flags |= Visibility;
+            }
+          }
+        }
       }
 
       if (enableCache) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 612ad2db52c9..35d17f871ab9 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -63,6 +63,7 @@ import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
   Ref,
   RefStatic,
+  Placement,
   Update,
   Visibility,
   NoFlags,
@@ -1369,13 +1370,26 @@ function completeWork(
         }
       }
 
-      // Don't bubble properties for hidden children.
-      if (
-        !nextIsHidden ||
-        includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane)) ||
-        (workInProgress.mode & ConcurrentMode) === NoMode
-      ) {
+      if (!nextIsHidden || (workInProgress.mode & ConcurrentMode) === NoMode) {
         bubbleProperties(workInProgress);
+      } else {
+        // Don't bubble properties for hidden children unless we're rendering
+        // at offscreen priority.
+        if (includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane))) {
+          bubbleProperties(workInProgress);
+          if (supportsMutation) {
+            // 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 (
+              workInProgress.tag !== LegacyHiddenComponent &&
+              workInProgress.subtreeFlags & (Placement | Update) &&
+              newProps.mode !== 'unstable-defer-without-hiding'
+            ) {
+              workInProgress.flags |= Visibility;
+            }
+          }
+        }
       }
 
       if (enableCache) {
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 9f9225fea3ba..4dfd6459a33a 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -201,14 +201,7 @@ describe('ReactOffscreen', () => {
     });
     // No layout effect.
     expect(Scheduler).toHaveYielded(['Child']);
-    if (gate(flags => flags.persistent)) {
-      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
-    } else {
-      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
-      // mode. Until we do, it should only be used inside a host component
-      // wrapper whose visibility is toggled simultaneously.
-      expect(root).toMatchRenderedOutput(<span prop="Child" />);
-    }
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
 
     // Unhide the tree. The layout effect is mounted.
     await act(async () => {
@@ -255,14 +248,7 @@ describe('ReactOffscreen', () => {
       );
     });
     expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
-    if (gate(flags => flags.persistent)) {
-      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
-    } else {
-      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
-      // mode. Until we do, it should only be used inside a host component
-      // wrapper whose visibility is toggled simultaneously.
-      expect(root).toMatchRenderedOutput(<span prop="Child" />);
-    }
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
 
     // Unhide the tree. The layout effect is re-mounted.
     await act(async () => {
@@ -299,14 +285,7 @@ describe('ReactOffscreen', () => {
       );
     });
     expect(Scheduler).toHaveYielded(['Child']);
-    if (gate(flags => flags.persistent)) {
-      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
-    } else {
-      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
-      // mode. Until we do, it should only be used inside a host component
-      // wrapper whose visibility is toggled simultaneously.
-      expect(root).toMatchRenderedOutput(<span prop="Child" />);
-    }
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
 
     // Show the tree. The layout effect is mounted.
     await act(async () => {
@@ -328,14 +307,7 @@ describe('ReactOffscreen', () => {
       );
     });
     expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
-    if (gate(flags => flags.persistent)) {
-      expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
-    } else {
-      // TODO: Offscreen does not yet hide/unhide children correctly in mutation
-      // mode. Until we do, it should only be used inside a host component
-      // wrapper whose visibility is toggled simultaneously.
-      expect(root).toMatchRenderedOutput(<span prop="Child" />);
-    }
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
   });
 
   // @gate experimental || www
@@ -385,4 +357,80 @@ describe('ReactOffscreen', () => {
     });
     expect(Scheduler).toHaveYielded(['Unmount layout']);
   });
+
+  // @gate experimental || www
+  it('hides new insertions into an already hidden tree', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <span>Hi</span>
+        </Offscreen>,
+      );
+    });
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Insert a new node into the hidden tree
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <span>Hi</span>
+          <span>Something new</span>
+        </Offscreen>,
+      );
+    });
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span hidden={true}>Hi</span>
+        {/* This new node should also be hidden */}
+        <span hidden={true}>Something new</span>
+      </>,
+    );
+  });
+
+  // @gate experimental || www
+  it('hides updated nodes inside an already hidden tree', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <span>Hi</span>
+        </Offscreen>,
+      );
+    });
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Set the `hidden` prop to on an already hidden node
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <span hidden={false}>Hi</span>
+        </Offscreen>,
+      );
+    });
+    // It should still be hidden, because the Offscreen container overrides it
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Unhide the boundary
+    await act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <span hidden={true}>Hi</span>
+        </Offscreen>,
+      );
+    });
+    // It should still be hidden, because of the prop
+    expect(root).toMatchRenderedOutput(<span hidden={true}>Hi</span>);
+
+    // Remove the `hidden` prop
+    await act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <span>Hi</span>
+        </Offscreen>,
+      );
+    });
+    // Now it's visible
+    expect(root).toMatchRenderedOutput(<span>Hi</span>);
+  });
 });

From 392253a774f33c0b8e2e25757ca6d6aa0ab48fce Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 26 Jul 2021 16:17:08 -0400
Subject: [PATCH 0719/1603] [Fabric] Use container node to toggle the
 visibility of Offscreen and Suspense trees (#21960)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix type of Offscreen props argument

Fixes an oversight from a previous refactor. The fiber that wraps
a Suspense component's children used to be a Fragment but now it's on
Offscreen fiber, so its props type has changed. There's a special
hydration path where I forgot to update this. This isn't observable
because we don't ever end up rendering this particular fiber (because
the Suspense boundary is in its fallback state) but we should fix it
anyway to avoid a potential regression in the future.

* Extract createOffscreenFromFiber logic

...into a new method called `createWorkInProgressOffscreenFiber`. Just
for symmetry with `updateWorkInProgressOffscreenFiber`. Doesn't change
any behavior.

* [Fabric] Use container node to hide/show tree

This changes how we hide and show the contents of Offscreen boundaries
in the React Fabric renderer (persistent mode), and also Suspense
boundaries which use the same feature.=

The way it used to work was that when a boundary is hidden, in the
complete phase, instead of calling the normal `cloneInstance` method
inside `appendAllChildren`, we would call a forked method called
`cloneHiddenInstance` for each of the nearest host nodes within the
subtree. This design was largely based on how it works in React DOM
(mutation mode), where instead of cloning the nearest host nodes, we
mutate their `style.display` property.

The motivation for doing it this way in React DOM was because there's no
built-in browser API for hiding a collection of DOM nodes without
affecting their layout.

In Fabric, however, there is no such limitation, so we can instead wrap
in an extra host node and apply a hidden style.

The immediate motivation for this change is that Fabric on Android has a
view pooling mechanism for instances that relies on the assumption that
a current Fiber that is cloned and replaced by a new Fiber will never
appear in a future commit. When this assumption is broken, it may cause
crashes. In the current implementation, that can indeed happen when a
node that was previously hidden is toggled back to visible. Although
this change sidesteps the issue, we may introduce in other features in
the future that would benefit from being able to revert back to an older
node without cloning it again, such as animations.

The way I've implemented this is to insert an additional HostComponent
fiber as the child of each OffscreenComponent. The extra fiber is not
ideal — the way I'd prefer to do it is to attach the host instance to
the OffscreenComponent. However, the native Fabric implementation
currently expects a 1:1 correspondence between HostComponents and host
instances, so I've deferred that optimization to a future PR to derisk
fixing the Fabric pooling crash. I left a TODO in the host config with a
description of the remaining steps, but this alone should be sufficient
to unblock.
---
 .../src/ReactFabricHostConfig.js              |  50 +++--
 .../src/createReactNoop.js                    | 200 ++++++++++++++----
 .../react-reconciler/src/ReactFiber.new.js    |  25 ++-
 .../react-reconciler/src/ReactFiber.old.js    |  25 ++-
 .../src/ReactFiberBeginWork.new.js            | 167 +++++++++++++--
 .../src/ReactFiberBeginWork.old.js            | 167 +++++++++++++--
 .../src/ReactFiberCompleteWork.new.js         | 135 ++++++------
 .../src/ReactFiberCompleteWork.old.js         | 135 ++++++------
 .../ReactFiberHostConfigWithNoPersistence.js  |   4 +-
 .../src/ReactFiberOffscreenComponent.js       |   4 +-
 .../src/forks/ReactFiberHostConfig.custom.js  |   6 +-
 packages/shared/ReactTypes.js                 |   5 +
 12 files changed, 684 insertions(+), 239 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 842a33291fb0..39058e9ac5a3 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {ElementRef} from 'react';
 import type {
   HostComponent,
@@ -301,6 +302,9 @@ export function getChildHostContext(
     type === 'RCTText' ||
     type === 'RCTVirtualText';
 
+  // TODO: If this is an offscreen host container, we should reuse the
+  // parent context.
+
   if (prevIsInAParentText !== isInAParentText) {
     return {isInAParentText};
   } else {
@@ -413,30 +417,32 @@ export function cloneInstance(
   };
 }
 
-export function cloneHiddenInstance(
-  instance: Instance,
-  type: string,
-  props: Props,
-  internalInstanceHandle: Object,
-): Instance {
-  const viewConfig = instance.canonical.viewConfig;
-  const node = instance.node;
-  const updatePayload = create(
-    {style: {display: 'none'}},
-    viewConfig.validAttributes,
-  );
-  return {
-    node: cloneNodeWithNewProps(node, updatePayload),
-    canonical: instance.canonical,
-  };
+// TODO: These two methods should be replaced with `createOffscreenInstance` and
+// `cloneOffscreenInstance`. I did it this way for now because the offscreen
+// instance is stored on an extra HostComponent fiber instead of the
+// OffscreenComponent fiber, and I didn't want to add an extra check to the
+// generic HostComponent path. Instead we should use the OffscreenComponent
+// fiber, but currently Fabric expects a 1:1 correspondence between Fabric
+// instances and host fibers, so I'm leaving this optimization for later once
+// we can confirm this won't break any downstream expectations.
+export function getOffscreenContainerType(): string {
+  return 'RCTView';
 }
 
-export function cloneHiddenTextInstance(
-  instance: Instance,
-  text: string,
-  internalInstanceHandle: Object,
-): TextInstance {
-  throw new Error('Not yet implemented.');
+export function getOffscreenContainerProps(
+  mode: OffscreenMode,
+  children: ReactNodeList,
+): Props {
+  if (mode === 'hidden') {
+    return {
+      children,
+      style: {display: 'none'},
+    };
+  } else {
+    return {
+      children,
+    };
+  }
 }
 
 export function createContainerChildSet(container: Container): ChildSet {
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 652f32521c24..f6af7341c2e0 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -16,7 +16,7 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {UpdateQueue} from 'react-reconciler/src/ReactUpdateQueue';
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
@@ -258,6 +258,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       type: string,
       rootcontainerInstance: Container,
     ) {
+      if (type === 'offscreen') {
+        return parentHostContext;
+      }
       if (type === 'uppercase') {
         return UPPERCASE_CONTEXT;
       }
@@ -539,47 +542,18 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           container.children = newChildren;
         },
 
-        cloneHiddenInstance(
-          instance: Instance,
-          type: string,
-          props: Props,
-          internalInstanceHandle: Object,
-        ): Instance {
-          const clone = cloneInstance(
-            instance,
-            null,
-            type,
-            props,
-            props,
-            internalInstanceHandle,
-            true,
-            null,
-          );
-          clone.hidden = true;
-          return clone;
+        getOffscreenContainerType(): string {
+          return 'offscreen';
         },
 
-        cloneHiddenTextInstance(
-          instance: TextInstance,
-          text: string,
-          internalInstanceHandle: Object,
-        ): TextInstance {
-          const clone = {
-            text: instance.text,
-            id: instanceCounter++,
-            hidden: true,
-            context: instance.context,
+        getOffscreenContainerProps(
+          mode: OffscreenMode,
+          children: ReactNodeList,
+        ): Props {
+          return {
+            hidden: mode === 'hidden',
+            children,
           };
-          // Hide from unit tests
-          Object.defineProperty(clone, 'id', {
-            value: clone.id,
-            enumerable: false,
-          });
-          Object.defineProperty(clone, 'context', {
-            value: clone.context,
-            enumerable: false,
-          });
-          return clone;
         },
       };
 
@@ -646,7 +620,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
   function getChildren(root) {
     if (root) {
-      return root.children;
+      return useMutation
+        ? root.children
+        : removeOffscreenContainersFromChildren(root.children, false);
     } else {
       return null;
     }
@@ -654,12 +630,154 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
   function getPendingChildren(root) {
     if (root) {
-      return root.pendingChildren;
+      return useMutation
+        ? root.children
+        : removeOffscreenContainersFromChildren(root.pendingChildren, false);
     } else {
       return null;
     }
   }
 
+  function removeOffscreenContainersFromChildren(children, hideNearestNode) {
+    // Mutation mode and persistent mode have different outputs for Offscreen
+    // and Suspense trees. Persistent mode adds an additional host node wrapper,
+    // whereas mutation mode does not.
+    //
+    // This function removes the offscreen host wrappers so that the output is
+    // consistent. If the offscreen node is hidden, it transfers the hiddenness
+    // to the child nodes, to mimic how it works in mutation mode. That way our
+    // tests don't have to fork tree assertions.
+    //
+    // So, it takes a tree that looks like this:
+    //
+    //    <offscreen hidden={true}>
+    //      <span>A</span>
+    //      <span>B</span>
+    //    </offscren>
+    //
+    // And turns it into this:
+    //
+    //   <span hidden={true}>A</span>
+    //   <span hidden={true}>B</span>
+    //
+    // We don't mutate the original tree, but instead return a copy.
+    //
+    // This function is only used by our test assertions, via the `getChildren`
+    // and `getChildrenAsJSX` methods.
+    let didClone = false;
+    const newChildren = [];
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      const innerChildren = child.children;
+      if (innerChildren !== undefined) {
+        // This is a host instance instance
+        const instance: Instance = (child: any);
+        if (instance.type === 'offscreen') {
+          // This is an offscreen wrapper instance. Remove it from the tree
+          // and recursively return its children, as if it were a fragment.
+          didClone = true;
+          if (instance.text !== null) {
+            // If this offscreen tree contains only text, we replace it with
+            // a text child. Related to `shouldReplaceTextContent` feature.
+            const offscreenTextInstance: TextInstance = {
+              text: instance.text,
+              id: instanceCounter++,
+              hidden: hideNearestNode || instance.hidden,
+              context: instance.context,
+            };
+            // Hide from unit tests
+            Object.defineProperty(offscreenTextInstance, 'id', {
+              value: offscreenTextInstance.id,
+              enumerable: false,
+            });
+            Object.defineProperty(offscreenTextInstance, 'context', {
+              value: offscreenTextInstance.context,
+              enumerable: false,
+            });
+            newChildren.push(offscreenTextInstance);
+          } else {
+            // Skip the offscreen node and replace it with its children
+            const offscreenChildren = removeOffscreenContainersFromChildren(
+              innerChildren,
+              hideNearestNode || instance.hidden,
+            );
+            newChildren.push.apply(newChildren, offscreenChildren);
+          }
+        } else {
+          // This is a regular (non-offscreen) instance. If the nearest
+          // offscreen boundary is hidden, hide this node.
+          const hidden = hideNearestNode ? true : instance.hidden;
+          const clonedChildren = removeOffscreenContainersFromChildren(
+            instance.children,
+            // We never need to hide the children of this node, since if we're
+            // inside a hidden tree, then the hidden style will be applied to
+            // this node.
+            false,
+          );
+          if (
+            clonedChildren === instance.children &&
+            hidden === instance.hidden
+          ) {
+            // No changes. Reuse the original instance without cloning.
+            newChildren.push(instance);
+          } else {
+            didClone = true;
+            const clone: Instance = {
+              id: instance.id,
+              type: instance.type,
+              children: clonedChildren,
+              text: instance.text,
+              prop: instance.prop,
+              hidden: hideNearestNode ? true : instance.hidden,
+              context: instance.context,
+            };
+            Object.defineProperty(clone, 'id', {
+              value: clone.id,
+              enumerable: false,
+            });
+            Object.defineProperty(clone, 'text', {
+              value: clone.text,
+              enumerable: false,
+            });
+            Object.defineProperty(clone, 'context', {
+              value: clone.context,
+              enumerable: false,
+            });
+            newChildren.push(clone);
+          }
+        }
+      } else {
+        // This is a text instance
+        const textInstance: TextInstance = (child: any);
+        if (hideNearestNode) {
+          didClone = true;
+          const clone = {
+            text: textInstance.text,
+            id: textInstance.id,
+            hidden: textInstance.hidden || hideNearestNode,
+            context: textInstance.context,
+          };
+          Object.defineProperty(clone, 'id', {
+            value: clone.id,
+            enumerable: false,
+          });
+          Object.defineProperty(clone, 'context', {
+            value: clone.context,
+            enumerable: false,
+          });
+
+          newChildren.push(clone);
+        } else {
+          newChildren.push(textInstance);
+        }
+      }
+    }
+    // There are some tests that assume reference equality, so preserve it
+    // when possible. Alternatively, we could update the tests to compare the
+    // ids instead.
+    return didClone ? newChildren : children;
+  }
+
   function getChildrenAsJSX(root) {
     const children = childToJSX(getChildren(root), null);
     if (children === null) {
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index a18514c50c0f..cbbbaa623385 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -14,7 +14,7 @@ import type {RootTag} from './ReactRootTags';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes} from './ReactFiberLane.new';
-import type {SuspenseInstance} from './ReactFiberHostConfig';
+import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
 import invariant from 'shared/invariant';
@@ -27,6 +27,10 @@ import {
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
 } from 'shared/ReactFeatureFlags';
+import {
+  supportsPersistence,
+  getOffscreenContainerType,
+} from './ReactFiberHostConfig';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
 import {
@@ -585,6 +589,25 @@ export function createFiberFromTypeAndProps(
   return fiber;
 }
 
+export function createOffscreenHostContainerFiber(
+  props: Props,
+  fiberMode: TypeOfMode,
+  lanes: Lanes,
+  key: null | string,
+): Fiber {
+  if (supportsPersistence) {
+    const type = getOffscreenContainerType();
+    const fiber = createFiber(HostComponent, props, key, fiberMode);
+    fiber.elementType = type;
+    fiber.type = type;
+    fiber.lanes = lanes;
+    return fiber;
+  } else {
+    // Only implemented in persistent mode
+    invariant(false, 'Not implemented.');
+  }
+}
+
 export function createFiberFromElement(
   element: ReactElement,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 4fbbb5a00efc..6d99c6837ed2 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -14,7 +14,7 @@ import type {RootTag} from './ReactRootTags';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes} from './ReactFiberLane.old';
-import type {SuspenseInstance} from './ReactFiberHostConfig';
+import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
 import invariant from 'shared/invariant';
@@ -27,6 +27,10 @@ import {
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
 } from 'shared/ReactFeatureFlags';
+import {
+  supportsPersistence,
+  getOffscreenContainerType,
+} from './ReactFiberHostConfig';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
 import {
@@ -585,6 +589,25 @@ export function createFiberFromTypeAndProps(
   return fiber;
 }
 
+export function createOffscreenHostContainerFiber(
+  props: Props,
+  fiberMode: TypeOfMode,
+  lanes: Lanes,
+  key: null | string,
+): Fiber {
+  if (supportsPersistence) {
+    const type = getOffscreenContainerType();
+    const fiber = createFiber(HostComponent, props, key, fiberMode);
+    fiber.elementType = type;
+    fiber.type = type;
+    fiber.lanes = lanes;
+    return fiber;
+  } else {
+    // Only implemented in persistent mode
+    invariant(false, 'Not implemented.');
+  }
+}
+
 export function createFiberFromElement(
   element: ReactElement,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 50a5a81a1f09..0b0c763e4fec 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -9,8 +9,8 @@
 
 import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
-import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {MutableSource} from 'shared/ReactTypes';
 import type {
@@ -142,6 +142,9 @@ import {
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
+  supportsMutation,
+  supportsPersistence,
+  getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldError, shouldSuspend} from './ReactFiberReconciler';
@@ -199,6 +202,7 @@ import {
   createFiberFromFragment,
   createFiberFromOffscreen,
   createWorkInProgress,
+  createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.new';
 import {
@@ -224,6 +228,7 @@ import {
 } from './ReactFiberCacheComponent.new';
 import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.new';
+import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
@@ -728,8 +733,69 @@ function updateOffscreenComponent(
     workInProgress.updateQueue = spawnedCachePool;
   }
 
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
+  if (supportsPersistence) {
+    // In persistent mode, the offscreen children are wrapped in a host node.
+    // TODO: Optimize this to use the OffscreenComponent fiber instead of
+    // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
+    // or some other infra that expects a HostComponent.
+    const isHidden =
+      nextProps.mode === 'hidden' &&
+      workInProgress.tag !== LegacyHiddenComponent;
+    const offscreenContainer = reconcileOffscreenHostContainer(
+      current,
+      workInProgress,
+      isHidden,
+      nextChildren,
+      renderLanes,
+    );
+    return offscreenContainer;
+  }
+  if (supportsMutation) {
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    return workInProgress.child;
+  }
+  return null;
+}
+
+function reconcileOffscreenHostContainer(
+  currentOffscreen: Fiber | null,
+  offscreen: Fiber,
+  isHidden: boolean,
+  children: any,
+  renderLanes: Lanes,
+) {
+  const containerProps = getOffscreenContainerProps(
+    isHidden ? 'hidden' : 'visible',
+    children,
+  );
+  let hostContainer;
+  if (currentOffscreen === null) {
+    hostContainer = createOffscreenHostContainerFiber(
+      containerProps,
+      offscreen.mode,
+      renderLanes,
+      null,
+    );
+  } else {
+    const currentHostContainer = currentOffscreen.child;
+    if (currentHostContainer === null) {
+      hostContainer = createOffscreenHostContainerFiber(
+        containerProps,
+        offscreen.mode,
+        renderLanes,
+        null,
+      );
+      hostContainer.flags |= Placement;
+    } else {
+      hostContainer = createWorkInProgress(
+        currentHostContainer,
+        containerProps,
+      );
+    }
+  }
+  hostContainer.return = offscreen;
+  offscreen.child = hostContainer;
+  return hostContainer;
 }
 
 // Note: These happen to have identical begin phases, for now. We shouldn't hold
@@ -2112,11 +2178,10 @@ function mountSuspensePrimaryChildren(
     mode: 'visible',
     children: primaryChildren,
   };
-  const primaryChildFragment = createFiberFromOffscreen(
+  const primaryChildFragment = mountWorkInProgressOffscreenFiber(
     primaryChildProps,
     mode,
     renderLanes,
-    null,
   );
   primaryChildFragment.return = workInProgress;
   workInProgress.child = primaryChildFragment;
@@ -2149,6 +2214,21 @@ function mountSuspenseFallbackChildren(
     primaryChildFragment.childLanes = NoLanes;
     primaryChildFragment.pendingProps = primaryChildProps;
 
+    if (
+      supportsPersistence &&
+      (workInProgress.mode & ConcurrentMode) === NoMode
+    ) {
+      const isHidden = true;
+      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
+      const containerProps = {
+        hidden: isHidden,
+        primaryChildren,
+      };
+      offscreenContainer.pendingProps = containerProps;
+      offscreenContainer.memoizedProps = containerProps;
+      completeSuspendedOffscreenHostContainer(null, offscreenContainer);
+    }
+
     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
@@ -2167,11 +2247,10 @@ function mountSuspenseFallbackChildren(
       null,
     );
   } else {
-    primaryChildFragment = createFiberFromOffscreen(
+    primaryChildFragment = mountWorkInProgressOffscreenFiber(
       primaryChildProps,
       mode,
       NoLanes,
-      null,
     );
     fallbackChildFragment = createFiberFromFragment(
       fallbackChildren,
@@ -2188,7 +2267,17 @@ function mountSuspenseFallbackChildren(
   return fallbackChildFragment;
 }
 
-function createWorkInProgressOffscreenFiber(
+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,
 ) {
@@ -2207,7 +2296,7 @@ function updateSuspensePrimaryChildren(
   const currentFallbackChildFragment: Fiber | null =
     currentPrimaryChildFragment.sibling;
 
-  const primaryChildFragment = createWorkInProgressOffscreenFiber(
+  const primaryChildFragment = updateWorkInProgressOffscreenFiber(
     currentPrimaryChildFragment,
     {
       mode: 'visible',
@@ -2282,16 +2371,57 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
+    if (supportsPersistence) {
+      // In persistent mode, the offscreen children are wrapped in a host node.
+      // We need to complete it now, because we're going to skip over its normal
+      // complete phase and go straight to rendering the fallback.
+      const isHidden = true;
+      const currentOffscreenContainer = currentPrimaryChildFragment.child;
+      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
+      const containerProps = {
+        hidden: isHidden,
+        primaryChildren,
+      };
+      offscreenContainer.pendingProps = containerProps;
+      offscreenContainer.memoizedProps = containerProps;
+      completeSuspendedOffscreenHostContainer(
+        currentOffscreenContainer,
+        offscreenContainer,
+      );
+    }
+
     // 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 = createWorkInProgressOffscreenFiber(
+    primaryChildFragment = updateWorkInProgressOffscreenFiber(
       currentPrimaryChildFragment,
       primaryChildProps,
     );
 
+    if (supportsPersistence) {
+      // In persistent mode, the offscreen children are wrapped in a host node.
+      // We need to complete it now, because we're going to skip over its normal
+      // complete phase and go straight to rendering the fallback.
+      const currentOffscreenContainer = currentPrimaryChildFragment.child;
+      if (currentOffscreenContainer !== null) {
+        const isHidden = true;
+        const offscreenContainer = reconcileOffscreenHostContainer(
+          currentPrimaryChildFragment,
+          primaryChildFragment,
+          isHidden,
+          primaryChildren,
+          renderLanes,
+        );
+        offscreenContainer.memoizedProps = offscreenContainer.pendingProps;
+        completeSuspendedOffscreenHostContainer(
+          currentOffscreenContainer,
+          offscreenContainer,
+        );
+      }
+    }
+
     // 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.)
@@ -2355,16 +2485,19 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   fallbackChildren,
   renderLanes,
 ) {
-  const mode = workInProgress.mode;
-  const primaryChildFragment = createFiberFromOffscreen(
-    primaryChildren,
-    mode,
+  const fiberMode = workInProgress.mode;
+  const primaryChildProps: OffscreenProps = {
+    mode: 'visible',
+    children: primaryChildren,
+  };
+  const primaryChildFragment = mountWorkInProgressOffscreenFiber(
+    primaryChildProps,
+    fiberMode,
     NoLanes,
-    null,
   );
   const fallbackChildFragment = createFiberFromFragment(
     fallbackChildren,
-    mode,
+    fiberMode,
     renderLanes,
     null,
   );
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index fa0a9840e758..c54fc312f97a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -9,8 +9,8 @@
 
 import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
-import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
+import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {MutableSource} from 'shared/ReactTypes';
 import type {
@@ -142,6 +142,9 @@ import {
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
+  supportsMutation,
+  supportsPersistence,
+  getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldError, shouldSuspend} from './ReactFiberReconciler';
@@ -199,6 +202,7 @@ import {
   createFiberFromFragment,
   createFiberFromOffscreen,
   createWorkInProgress,
+  createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.old';
 import {
@@ -224,6 +228,7 @@ import {
 } from './ReactFiberCacheComponent.old';
 import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.old';
+import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
@@ -728,8 +733,69 @@ function updateOffscreenComponent(
     workInProgress.updateQueue = spawnedCachePool;
   }
 
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
+  if (supportsPersistence) {
+    // In persistent mode, the offscreen children are wrapped in a host node.
+    // TODO: Optimize this to use the OffscreenComponent fiber instead of
+    // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
+    // or some other infra that expects a HostComponent.
+    const isHidden =
+      nextProps.mode === 'hidden' &&
+      workInProgress.tag !== LegacyHiddenComponent;
+    const offscreenContainer = reconcileOffscreenHostContainer(
+      current,
+      workInProgress,
+      isHidden,
+      nextChildren,
+      renderLanes,
+    );
+    return offscreenContainer;
+  }
+  if (supportsMutation) {
+    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    return workInProgress.child;
+  }
+  return null;
+}
+
+function reconcileOffscreenHostContainer(
+  currentOffscreen: Fiber | null,
+  offscreen: Fiber,
+  isHidden: boolean,
+  children: any,
+  renderLanes: Lanes,
+) {
+  const containerProps = getOffscreenContainerProps(
+    isHidden ? 'hidden' : 'visible',
+    children,
+  );
+  let hostContainer;
+  if (currentOffscreen === null) {
+    hostContainer = createOffscreenHostContainerFiber(
+      containerProps,
+      offscreen.mode,
+      renderLanes,
+      null,
+    );
+  } else {
+    const currentHostContainer = currentOffscreen.child;
+    if (currentHostContainer === null) {
+      hostContainer = createOffscreenHostContainerFiber(
+        containerProps,
+        offscreen.mode,
+        renderLanes,
+        null,
+      );
+      hostContainer.flags |= Placement;
+    } else {
+      hostContainer = createWorkInProgress(
+        currentHostContainer,
+        containerProps,
+      );
+    }
+  }
+  hostContainer.return = offscreen;
+  offscreen.child = hostContainer;
+  return hostContainer;
 }
 
 // Note: These happen to have identical begin phases, for now. We shouldn't hold
@@ -2112,11 +2178,10 @@ function mountSuspensePrimaryChildren(
     mode: 'visible',
     children: primaryChildren,
   };
-  const primaryChildFragment = createFiberFromOffscreen(
+  const primaryChildFragment = mountWorkInProgressOffscreenFiber(
     primaryChildProps,
     mode,
     renderLanes,
-    null,
   );
   primaryChildFragment.return = workInProgress;
   workInProgress.child = primaryChildFragment;
@@ -2149,6 +2214,21 @@ function mountSuspenseFallbackChildren(
     primaryChildFragment.childLanes = NoLanes;
     primaryChildFragment.pendingProps = primaryChildProps;
 
+    if (
+      supportsPersistence &&
+      (workInProgress.mode & ConcurrentMode) === NoMode
+    ) {
+      const isHidden = true;
+      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
+      const containerProps = {
+        hidden: isHidden,
+        primaryChildren,
+      };
+      offscreenContainer.pendingProps = containerProps;
+      offscreenContainer.memoizedProps = containerProps;
+      completeSuspendedOffscreenHostContainer(null, offscreenContainer);
+    }
+
     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
@@ -2167,11 +2247,10 @@ function mountSuspenseFallbackChildren(
       null,
     );
   } else {
-    primaryChildFragment = createFiberFromOffscreen(
+    primaryChildFragment = mountWorkInProgressOffscreenFiber(
       primaryChildProps,
       mode,
       NoLanes,
-      null,
     );
     fallbackChildFragment = createFiberFromFragment(
       fallbackChildren,
@@ -2188,7 +2267,17 @@ function mountSuspenseFallbackChildren(
   return fallbackChildFragment;
 }
 
-function createWorkInProgressOffscreenFiber(
+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,
 ) {
@@ -2207,7 +2296,7 @@ function updateSuspensePrimaryChildren(
   const currentFallbackChildFragment: Fiber | null =
     currentPrimaryChildFragment.sibling;
 
-  const primaryChildFragment = createWorkInProgressOffscreenFiber(
+  const primaryChildFragment = updateWorkInProgressOffscreenFiber(
     currentPrimaryChildFragment,
     {
       mode: 'visible',
@@ -2282,16 +2371,57 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
+    if (supportsPersistence) {
+      // In persistent mode, the offscreen children are wrapped in a host node.
+      // We need to complete it now, because we're going to skip over its normal
+      // complete phase and go straight to rendering the fallback.
+      const isHidden = true;
+      const currentOffscreenContainer = currentPrimaryChildFragment.child;
+      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
+      const containerProps = {
+        hidden: isHidden,
+        primaryChildren,
+      };
+      offscreenContainer.pendingProps = containerProps;
+      offscreenContainer.memoizedProps = containerProps;
+      completeSuspendedOffscreenHostContainer(
+        currentOffscreenContainer,
+        offscreenContainer,
+      );
+    }
+
     // 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 = createWorkInProgressOffscreenFiber(
+    primaryChildFragment = updateWorkInProgressOffscreenFiber(
       currentPrimaryChildFragment,
       primaryChildProps,
     );
 
+    if (supportsPersistence) {
+      // In persistent mode, the offscreen children are wrapped in a host node.
+      // We need to complete it now, because we're going to skip over its normal
+      // complete phase and go straight to rendering the fallback.
+      const currentOffscreenContainer = currentPrimaryChildFragment.child;
+      if (currentOffscreenContainer !== null) {
+        const isHidden = true;
+        const offscreenContainer = reconcileOffscreenHostContainer(
+          currentPrimaryChildFragment,
+          primaryChildFragment,
+          isHidden,
+          primaryChildren,
+          renderLanes,
+        );
+        offscreenContainer.memoizedProps = offscreenContainer.pendingProps;
+        completeSuspendedOffscreenHostContainer(
+          currentOffscreenContainer,
+          offscreenContainer,
+        );
+      }
+    }
+
     // 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.)
@@ -2355,16 +2485,19 @@ function mountSuspenseFallbackAfterRetryWithoutHydrating(
   fallbackChildren,
   renderLanes,
 ) {
-  const mode = workInProgress.mode;
-  const primaryChildFragment = createFiberFromOffscreen(
-    primaryChildren,
-    mode,
+  const fiberMode = workInProgress.mode;
+  const primaryChildProps: OffscreenProps = {
+    mode: 'visible',
+    children: primaryChildren,
+  };
+  const primaryChildFragment = mountWorkInProgressOffscreenFiber(
+    primaryChildProps,
+    fiberMode,
     NoLanes,
-    null,
   );
   const fallbackChildFragment = createFiberFromFragment(
     fallbackChildren,
-    mode,
+    fiberMode,
     renderLanes,
     null,
   );
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 9416ac45dd4c..fea034edaa67 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -84,8 +84,6 @@ import {
   supportsMutation,
   supportsPersistence,
   cloneInstance,
-  cloneHiddenInstance,
-  cloneHiddenTextInstance,
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
@@ -200,12 +198,7 @@ let updateHostText;
 if (supportsMutation) {
   // Mutation mode
 
-  appendAllChildren = function(
-    parent: Instance,
-    workInProgress: Fiber,
-    needsVisibilityToggle: boolean,
-    isHidden: boolean,
-  ) {
+  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
     // 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;
@@ -293,49 +286,22 @@ if (supportsMutation) {
 } else if (supportsPersistence) {
   // Persistent host tree mode
 
-  appendAllChildren = function(
-    parent: Instance,
-    workInProgress: Fiber,
-    needsVisibilityToggle: boolean,
-    isHidden: boolean,
-  ) {
+  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
     // 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) {
       // eslint-disable-next-line no-labels
       branches: 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, node);
-        }
+        const instance = node.stateNode;
         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, node);
-        }
+        const instance = node.stateNode;
         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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -361,8 +327,6 @@ if (supportsMutation) {
   const appendAllChildrenToContainer = function(
     containerChildSet: ChildSet,
     workInProgress: Fiber,
-    needsVisibilityToggle: boolean,
-    isHidden: boolean,
   ) {
     // We only have the top Fiber that was created but we need recurse down its
     // children to find all the terminal nodes.
@@ -370,37 +334,15 @@ if (supportsMutation) {
     while (node !== null) {
       // eslint-disable-next-line no-labels
       branches: 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, node);
-        }
+        const instance = node.stateNode;
         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, node);
-        }
+        const instance = node.stateNode;
         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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -434,7 +376,7 @@ if (supportsMutation) {
       const container = portalOrRoot.containerInfo;
       const newChildSet = createContainerChildSet(container);
       // If children might have changed, we have to add them all to the set.
-      appendAllChildrenToContainer(newChildSet, workInProgress, false, false);
+      appendAllChildrenToContainer(newChildSet, workInProgress);
       portalOrRoot.pendingChildren = newChildSet;
       // Schedule an update on the container to swap out the container.
       markUpdate(workInProgress);
@@ -507,7 +449,7 @@ if (supportsMutation) {
       markUpdate(workInProgress);
     } else {
       // If children might have changed, we have to add them all to the set.
-      appendAllChildren(newInstance, workInProgress, false, false);
+      appendAllChildren(newInstance, workInProgress);
     }
   };
   updateHostText = function(
@@ -748,6 +690,65 @@ function bubbleProperties(completedWork: Fiber) {
   return didBailout;
 }
 
+export function completeSuspendedOffscreenHostContainer(
+  current: Fiber | null,
+  workInProgress: Fiber,
+) {
+  // This is a fork of the complete phase for HostComponent. We use it when
+  // a suspense tree is in its fallback state, because in that case the primary
+  // tree that includes the offscreen boundary is skipped over without a
+  // regular complete phase.
+  //
+  // We can optimize this path further by inlining the update logic for
+  // offscreen instances specifically, i.e. skipping the `prepareUpdate` call.
+  const rootContainerInstance = getRootHostContainer();
+  const type = workInProgress.type;
+  const newProps = workInProgress.memoizedProps;
+  if (current !== null) {
+    updateHostComponent(
+      current,
+      workInProgress,
+      type,
+      newProps,
+      rootContainerInstance,
+    );
+  } else {
+    const currentHostContext = getHostContext();
+    const instance = createInstance(
+      type,
+      newProps,
+      rootContainerInstance,
+      currentHostContext,
+      workInProgress,
+    );
+
+    appendAllChildren(instance, workInProgress);
+
+    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,
+        rootContainerInstance,
+        currentHostContext,
+      )
+    ) {
+      markUpdate(workInProgress);
+    }
+
+    if (workInProgress.ref !== null) {
+      // If there is a ref on a host node we need to schedule a callback
+      markRef(workInProgress);
+    }
+  }
+  bubbleProperties(workInProgress);
+}
+
 function completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -868,7 +869,7 @@ function completeWork(
             workInProgress,
           );
 
-          appendAllChildren(instance, workInProgress, false, false);
+          appendAllChildren(instance, workInProgress);
 
           workInProgress.stateNode = instance;
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 35d17f871ab9..4658938c9d5d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -84,8 +84,6 @@ import {
   supportsMutation,
   supportsPersistence,
   cloneInstance,
-  cloneHiddenInstance,
-  cloneHiddenTextInstance,
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
@@ -200,12 +198,7 @@ let updateHostText;
 if (supportsMutation) {
   // Mutation mode
 
-  appendAllChildren = function(
-    parent: Instance,
-    workInProgress: Fiber,
-    needsVisibilityToggle: boolean,
-    isHidden: boolean,
-  ) {
+  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
     // 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;
@@ -293,49 +286,22 @@ if (supportsMutation) {
 } else if (supportsPersistence) {
   // Persistent host tree mode
 
-  appendAllChildren = function(
-    parent: Instance,
-    workInProgress: Fiber,
-    needsVisibilityToggle: boolean,
-    isHidden: boolean,
-  ) {
+  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
     // 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) {
       // eslint-disable-next-line no-labels
       branches: 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, node);
-        }
+        const instance = node.stateNode;
         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, node);
-        }
+        const instance = node.stateNode;
         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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -361,8 +327,6 @@ if (supportsMutation) {
   const appendAllChildrenToContainer = function(
     containerChildSet: ChildSet,
     workInProgress: Fiber,
-    needsVisibilityToggle: boolean,
-    isHidden: boolean,
   ) {
     // We only have the top Fiber that was created but we need recurse down its
     // children to find all the terminal nodes.
@@ -370,37 +334,15 @@ if (supportsMutation) {
     while (node !== null) {
       // eslint-disable-next-line no-labels
       branches: 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, node);
-        }
+        const instance = node.stateNode;
         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, node);
-        }
+        const instance = node.stateNode;
         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, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -434,7 +376,7 @@ if (supportsMutation) {
       const container = portalOrRoot.containerInfo;
       const newChildSet = createContainerChildSet(container);
       // If children might have changed, we have to add them all to the set.
-      appendAllChildrenToContainer(newChildSet, workInProgress, false, false);
+      appendAllChildrenToContainer(newChildSet, workInProgress);
       portalOrRoot.pendingChildren = newChildSet;
       // Schedule an update on the container to swap out the container.
       markUpdate(workInProgress);
@@ -507,7 +449,7 @@ if (supportsMutation) {
       markUpdate(workInProgress);
     } else {
       // If children might have changed, we have to add them all to the set.
-      appendAllChildren(newInstance, workInProgress, false, false);
+      appendAllChildren(newInstance, workInProgress);
     }
   };
   updateHostText = function(
@@ -748,6 +690,65 @@ function bubbleProperties(completedWork: Fiber) {
   return didBailout;
 }
 
+export function completeSuspendedOffscreenHostContainer(
+  current: Fiber | null,
+  workInProgress: Fiber,
+) {
+  // This is a fork of the complete phase for HostComponent. We use it when
+  // a suspense tree is in its fallback state, because in that case the primary
+  // tree that includes the offscreen boundary is skipped over without a
+  // regular complete phase.
+  //
+  // We can optimize this path further by inlining the update logic for
+  // offscreen instances specifically, i.e. skipping the `prepareUpdate` call.
+  const rootContainerInstance = getRootHostContainer();
+  const type = workInProgress.type;
+  const newProps = workInProgress.memoizedProps;
+  if (current !== null) {
+    updateHostComponent(
+      current,
+      workInProgress,
+      type,
+      newProps,
+      rootContainerInstance,
+    );
+  } else {
+    const currentHostContext = getHostContext();
+    const instance = createInstance(
+      type,
+      newProps,
+      rootContainerInstance,
+      currentHostContext,
+      workInProgress,
+    );
+
+    appendAllChildren(instance, workInProgress);
+
+    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,
+        rootContainerInstance,
+        currentHostContext,
+      )
+    ) {
+      markUpdate(workInProgress);
+    }
+
+    if (workInProgress.ref !== null) {
+      // If there is a ref on a host node we need to schedule a callback
+      markRef(workInProgress);
+    }
+  }
+  bubbleProperties(workInProgress);
+}
+
 function completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -868,7 +869,7 @@ function completeWork(
             workInProgress,
           );
 
-          appendAllChildren(instance, workInProgress, false, false);
+          appendAllChildren(instance, workInProgress);
 
           workInProgress.stateNode = instance;
 
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
index d5f84cf43fd6..2dd44342a399 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
@@ -28,5 +28,5 @@ export const createContainerChildSet = shim;
 export const appendChildToContainerChildSet = shim;
 export const finalizeContainerChildren = shim;
 export const replaceContainerChildren = shim;
-export const cloneHiddenInstance = shim;
-export const cloneHiddenTextInstance = shim;
+export const getOffscreenContainerType = shim;
+export const getOffscreenContainerProps = shim;
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index acae8d206194..87e1eaa24454 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
@@ -18,7 +18,7 @@ export type OffscreenProps = {|
   //
   // Default mode is visible. Kind of a weird default for a component
   // called "Offscreen." Possible alt: <Visibility />?
-  mode?: 'hidden' | 'unstable-defer-without-hiding' | 'visible' | null | void,
+  mode?: OffscreenMode | null | void,
   children?: ReactNodeList,
 |};
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 6a6e9c5e040c..9dbaa47eb711 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -127,8 +127,10 @@ export const appendChildToContainerChildSet =
 export const finalizeContainerChildren =
   $$$hostConfig.finalizeContainerChildren;
 export const replaceContainerChildren = $$$hostConfig.replaceContainerChildren;
-export const cloneHiddenInstance = $$$hostConfig.cloneHiddenInstance;
-export const cloneHiddenTextInstance = $$$hostConfig.cloneHiddenTextInstance;
+export const getOffscreenContainerType =
+  $$$hostConfig.getOffscreenContainerType;
+export const getOffscreenContainerProps =
+  $$$hostConfig.getOffscreenContainerProps;
 
 // -------------------
 //     Hydration
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 03b70aae07e6..43f42bddb91d 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -166,3 +166,8 @@ export interface Thenable<+R> {
     onReject: (error: mixed) => void | Thenable<U> | U,
   ): void | Thenable<U>;
 }
+
+export type OffscreenMode =
+  | 'hidden'
+  | 'unstable-defer-without-hiding'
+  | 'visible';

From c21e8fccadc0e0351bc45c2df729c92807a647ef Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 26 Jul 2021 19:30:43 -0400
Subject: [PATCH 0720/1603] Scheduling profiler: Improve native events UI
 (#21966)

Also highlight events that have synchronous updates inside of them. (We may want to relax this highlighting later to not warn about event handlers that are still fast enough.)
---
 .../src/content-views/FlamechartView.js       |  14 +-
 .../src/content-views/NativeEventsView.js     | 224 ++++++++++++------
 .../src/content-views/ReactEventsView.js      |  14 +-
 .../src/content-views/ReactMeasuresView.js    |   2 +-
 .../src/content-views/TimeAxisMarkersView.js  |   4 +-
 .../src/content-views/UserTimingMarksView.js  |   6 +-
 .../src/content-views/constants.js            |  41 ++--
 .../src/import-worker/preprocessData.js       |  46 +++-
 .../src/types.js                              |   2 +
 .../views/Settings/SettingsContext.js         |  17 +-
 .../src/devtools/views/root.css               |  18 +-
 11 files changed, 265 insertions(+), 123 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index 8b79a30916fe..6b839a39f71c 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -32,9 +32,9 @@ import {
 } from './utils/positioning';
 import {
   COLORS,
-  FLAMECHART_FONT_SIZE,
+  FONT_SIZE,
   FLAMECHART_FRAME_HEIGHT,
-  FLAMECHART_TEXT_PADDING,
+  TEXT_PADDING,
   COLOR_HOVER_DIM_DELTA,
   BORDER_SIZE,
 } from './constants';
@@ -157,7 +157,7 @@ class FlamechartStackLayerView extends View {
 
     context.textAlign = 'left';
     context.textBaseline = 'middle';
-    context.font = `${FLAMECHART_FONT_SIZE}px sans-serif`;
+    context.font = `${FONT_SIZE}px sans-serif`;
 
     const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
 
@@ -195,15 +195,15 @@ class FlamechartStackLayerView extends View {
         drawableRect.size.height,
       );
 
-      if (width > FLAMECHART_TEXT_PADDING * 2) {
+      if (width > TEXT_PADDING * 2) {
         const trimmedName = trimFlamechartText(
           context,
           name,
-          width - FLAMECHART_TEXT_PADDING * 2 + (x < 0 ? x : 0),
+          width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
         );
 
         if (trimmedName !== null) {
-          context.fillStyle = COLORS.FLAME_GRAPH_LABEL;
+          context.fillStyle = COLORS.TEXT_COLOR;
 
           // Prevent text from being drawn outside `viewableArea`
           const textOverflowsViewableArea = !rectEqualToRect(
@@ -225,7 +225,7 @@ class FlamechartStackLayerView extends View {
 
           context.fillText(
             trimmedName,
-            nodeRect.origin.x + FLAMECHART_TEXT_PADDING - (x < 0 ? x : 0),
+            nodeRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),
             nodeRect.origin.y + FLAMECHART_FRAME_HEIGHT / 2,
           );
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
index 97d4369753a1..3666f6453973 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -11,9 +11,10 @@ import type {NativeEvent, ReactProfilerData} from '../types';
 import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
 
 import {
+  durationToWidth,
   positioningScaleFactor,
-  timestampToPosition,
   positionToTimestamp,
+  timestampToPosition,
 } from './utils/positioning';
 import {
   View,
@@ -24,28 +25,77 @@ import {
 } from '../view-base';
 import {
   COLORS,
-  EVENT_ROW_PADDING,
-  EVENT_DIAMETER,
+  TEXT_PADDING,
+  NATIVE_EVENT_HEIGHT,
+  FONT_SIZE,
   BORDER_SIZE,
 } from './constants';
 
-const EVENT_ROW_HEIGHT_FIXED =
-  EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;
+const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
+
+// TODO (scheduling profiler) Make this a reusable util
+const cachedFlamechartTextWidths = new Map();
+const trimFlamechartText = (
+  context: CanvasRenderingContext2D,
+  text: string,
+  width: number,
+) => {
+  for (let i = text.length - 1; i >= 0; i--) {
+    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
+
+    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);
+    if (measuredWidth == null) {
+      measuredWidth = context.measureText(trimmedText).width;
+      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);
+    }
+
+    if (measuredWidth <= width) {
+      return trimmedText;
+    }
+  }
+
+  return null;
+};
 
 export class NativeEventsView extends View {
-  _profilerData: ReactProfilerData;
+  _depthToNativeEvent: Map<number, NativeEvent[]>;
+  _hoveredEvent: NativeEvent | null = null;
   _intrinsicSize: Size;
+  _maxDepth: number = 0;
+  _profilerData: ReactProfilerData;
 
-  _hoveredEvent: NativeEvent | null = null;
   onHover: ((event: NativeEvent | null) => void) | null = null;
 
   constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
     super(surface, frame);
+
     this._profilerData = profilerData;
 
+    this._performPreflightComputations();
+    console.log(this._depthToNativeEvent);
+  }
+
+  _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 This is unnecessary.
+        this._depthToNativeEvent.get(depth).push(event);
+      }
+    });
+
     this._intrinsicSize = {
-      width: this._profilerData.duration,
-      height: EVENT_ROW_HEIGHT_FIXED,
+      width: duration,
+      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
     };
   }
 
@@ -73,7 +123,9 @@ export class NativeEventsView extends View {
     showHoverHighlight: boolean,
   ) {
     const {frame} = this;
-    const {duration, timestamp} = event;
+    const {depth, duration, highlight, timestamp, type} = event;
+
+    baseY += depth * ROW_WITH_BORDER_HEIGHT;
 
     const xStart = timestampToPosition(timestamp, scaleFactor, frame);
     const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
@@ -82,25 +134,60 @@ export class NativeEventsView extends View {
         x: xStart,
         y: baseY,
       },
-      size: {width: xStop - xStart, height: EVENT_DIAMETER},
+      size: {width: xStop - xStart, height: NATIVE_EVENT_HEIGHT},
     };
     if (!rectIntersectsRect(eventRect, rect)) {
       return; // Not in view
     }
 
-    const fillStyle = showHoverHighlight
-      ? COLORS.NATIVE_EVENT_HOVER
-      : COLORS.NATIVE_EVENT;
+    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;
+    if (highlight) {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.NATIVE_EVENT_WARNING_HOVER
+        : COLORS.NATIVE_EVENT_WARNING;
+    } 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,
     );
+
+    // Render event type label
+    context.textAlign = 'left';
+    context.textBaseline = 'middle';
+    context.font = `${FONT_SIZE}px sans-serif`;
+
+    if (width > TEXT_PADDING * 2) {
+      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
+      const trimmedName = trimFlamechartText(
+        context,
+        type,
+        width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
+      );
+
+      if (trimmedName !== null) {
+        context.fillStyle = highlight
+          ? COLORS.NATIVE_EVENT_WARNING_TEXT
+          : COLORS.TEXT_COLOR;
+
+        context.fillText(
+          trimmedName,
+          eventRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),
+          eventRect.origin.y + NATIVE_EVENT_HEIGHT / 2,
+        );
+      }
+    }
   }
 
   draw(context: CanvasRenderingContext2D) {
@@ -111,7 +198,7 @@ export class NativeEventsView extends View {
       visibleArea,
     } = this;
 
-    context.fillStyle = COLORS.BACKGROUND;
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
     context.fillRect(
       visibleArea.origin.x,
       visibleArea.origin.y,
@@ -120,57 +207,43 @@ export class NativeEventsView extends View {
     );
 
     // Draw events
-    const baseY = frame.origin.y + EVENT_ROW_PADDING;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
       frame,
     );
 
     nativeEvents.forEach(event => {
-      if (event === _hoveredEvent) {
-        // Draw the highlighted items on top so they stand out.
-        // This is helpful if there are multiple (overlapping) items close to each other.
-        this._drawSingleNativeEvent(
-          context,
-          visibleArea,
-          event,
-          baseY,
-          scaleFactor,
-          true,
-        );
-      } else {
-        this._drawSingleNativeEvent(
-          context,
-          visibleArea,
-          event,
-          baseY,
-          scaleFactor,
-          false,
-        );
-      }
+      this._drawSingleNativeEvent(
+        context,
+        visibleArea,
+        event,
+        frame.origin.y,
+        scaleFactor,
+        event === _hoveredEvent,
+      );
     });
 
-    // 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.PRIORITY_BORDER;
-      context.fillRect(
-        borderDrawableRect.origin.x,
-        borderDrawableRect.origin.y,
-        borderDrawableRect.size.width,
-        borderDrawableRect.size.height,
-      );
+    // 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)) {
+        context.fillStyle = COLORS.PRIORITY_BORDER;
+        context.fillRect(
+          visibleArea.origin.x,
+          frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,
+          visibleArea.size.width,
+          BORDER_SIZE,
+        );
+      }
     }
   }
 
@@ -189,25 +262,26 @@ export class NativeEventsView extends View {
       return;
     }
 
-    const {nativeEvents} = this._profilerData;
-
     const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
     const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
 
-    // Find the event 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).
-    for (let index = nativeEvents.length - 1; index >= 0; index--) {
-      const nativeEvent = nativeEvents[index];
-      const {duration, timestamp} = nativeEvent;
-
-      if (
-        hoverTimestamp >= timestamp &&
-        hoverTimestamp <= timestamp + duration
-      ) {
-        onHover(nativeEvent);
-        return;
+    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
+        ) {
+          onHover(nativeEvent);
+          return;
+        }
       }
     }
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
index e67f590f6bf1..f76df3bed559 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
@@ -25,13 +25,13 @@ import {
 } from '../view-base';
 import {
   COLORS,
-  EVENT_ROW_PADDING,
-  EVENT_DIAMETER,
+  TOP_ROW_PADDING,
+  REACT_EVENT_DIAMETER,
   BORDER_SIZE,
 } from './constants';
 
 const EVENT_ROW_HEIGHT_FIXED =
-  EVENT_ROW_PADDING + EVENT_DIAMETER + EVENT_ROW_PADDING;
+  TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;
 
 function isSuspenseEvent(event: ReactEvent): boolean %checks {
   return (
@@ -85,13 +85,13 @@ export class ReactEventsView extends View {
     const {timestamp, type} = event;
 
     const x = timestampToPosition(timestamp, scaleFactor, frame);
-    const radius = EVENT_DIAMETER / 2;
+    const radius = REACT_EVENT_DIAMETER / 2;
     const eventRect: Rect = {
       origin: {
         x: x - radius,
         y: baseY,
       },
-      size: {width: EVENT_DIAMETER, height: EVENT_DIAMETER},
+      size: {width: REACT_EVENT_DIAMETER, height: REACT_EVENT_DIAMETER},
     };
     if (!rectIntersectsRect(eventRect, rect)) {
       return; // Not in view
@@ -156,7 +156,7 @@ export class ReactEventsView extends View {
     );
 
     // Draw events
-    const baseY = frame.origin.y + EVENT_ROW_PADDING;
+    const baseY = frame.origin.y + TOP_ROW_PADDING;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
       frame,
@@ -246,7 +246,7 @@ export class ReactEventsView extends View {
     );
     const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
     const eventTimestampAllowance = widthToDuration(
-      EVENT_DIAMETER / 2,
+      REACT_EVENT_DIAMETER / 2,
       scaleFactor,
     );
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index 46fbe51bb8cd..61e804223a9e 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -54,7 +54,7 @@ export class ReactMeasuresView extends View {
 
   _performPreflightComputations() {
     this._lanesToRender = [];
-    this._laneToMeasures = new Map<ReactLane, ReactMeasure[]>();
+    this._laneToMeasures = new Map();
 
     for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {
       const measuresForLane = getMeasuresForLane(
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js b/packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js
index 4f5549428240..47913dbb2265 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js
@@ -25,7 +25,7 @@ import {
   COLORS,
   INTERVAL_TIMES,
   LABEL_SIZE,
-  MARKER_FONT_SIZE,
+  FONT_SIZE,
   MARKER_HEIGHT,
   MARKER_TEXT_PADDING,
   MARKER_TICK_HEIGHT,
@@ -129,7 +129,7 @@ export class TimeAxisMarkersView extends View {
       context.fillStyle = COLORS.TIME_MARKER_LABEL;
       context.textAlign = 'right';
       context.textBaseline = 'middle';
-      context.font = `${MARKER_FONT_SIZE}px sans-serif`;
+      context.font = `${FONT_SIZE}px sans-serif`;
       context.fillText(
         `${markerLabel}ms`,
         x - MARKER_TEXT_PADDING,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
index 4a73c48aae07..7a822716db6b 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
@@ -25,13 +25,13 @@ import {
 } from '../view-base';
 import {
   COLORS,
-  EVENT_ROW_PADDING,
+  TOP_ROW_PADDING,
   USER_TIMING_MARK_SIZE,
   BORDER_SIZE,
 } from './constants';
 
 const ROW_HEIGHT_FIXED =
-  EVENT_ROW_PADDING + USER_TIMING_MARK_SIZE + EVENT_ROW_PADDING;
+  TOP_ROW_PADDING + USER_TIMING_MARK_SIZE + TOP_ROW_PADDING;
 
 export class UserTimingMarksView extends View {
   _marks: UserTimingMark[];
@@ -125,7 +125,7 @@ export class UserTimingMarksView extends View {
     );
 
     // Draw marks
-    const baseY = frame.origin.y + EVENT_ROW_PADDING;
+    const baseY = frame.origin.y + TOP_ROW_PADDING;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
       frame,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 6581bed312c2..da3834892636 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -8,12 +8,19 @@
  */
 
 export const LABEL_SIZE = 80;
-export const LABEL_FONT_SIZE = 11;
 export const MARKER_HEIGHT = 20;
 export const MARKER_TICK_HEIGHT = 8;
-export const MARKER_FONT_SIZE = 10;
+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 REACT_EVENT_DIAMETER = 6;
+export const USER_TIMING_MARK_SIZE = 8;
+export const REACT_MEASURE_HEIGHT = 9;
+export const BORDER_SIZE = 1;
+export const FLAMECHART_FRAME_HEIGHT = 14;
+export const TEXT_PADDING = 3;
 
 export const INTERVAL_TIMES = [
   1,
@@ -31,22 +38,14 @@ export const INTERVAL_TIMES = [
 ];
 export const MIN_INTERVAL_SIZE_PX = 70;
 
-export const EVENT_ROW_PADDING = 4;
-export const EVENT_DIAMETER = 6;
-export const USER_TIMING_MARK_SIZE = 8;
-export const REACT_MEASURE_HEIGHT = 9;
-export const BORDER_SIZE = 1;
-
-export const FLAMECHART_FONT_SIZE = 10;
-export const FLAMECHART_FRAME_HEIGHT = 16;
-export const FLAMECHART_TEXT_PADDING = 3;
-
 // TODO Replace this with "export let" vars
 export let COLORS = {
   BACKGROUND: '',
-  FLAME_GRAPH_LABEL: '',
   NATIVE_EVENT: '',
   NATIVE_EVENT_HOVER: '',
+  NATIVE_EVENT_WARNING: '',
+  NATIVE_EVENT_WARNING_HOVER: '',
+  NATIVE_EVENT_WARNING_TEXT: '',
   PRIORITY_BACKGROUND: '',
   PRIORITY_BORDER: '',
   PRIORITY_LABEL: '',
@@ -75,6 +74,7 @@ export let COLORS = {
   REACT_SUSPEND: '',
   REACT_SUSPEND_HOVER: '',
   REACT_WORK_BORDER: '',
+  TEXT_COLOR: '',
   TIME_MARKER_LABEL: '',
 };
 
@@ -83,15 +83,21 @@ export function updateColorsToMatchTheme(): void {
 
   COLORS = {
     BACKGROUND: computedStyle.getPropertyValue('--color-background'),
-    FLAME_GRAPH_LABEL: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-flame-graph-label',
-    ),
     NATIVE_EVENT: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-native-event',
     ),
     NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-native-event-hover',
     ),
+    NATIVE_EVENT_WARNING: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-native-event-warning',
+    ),
+    NATIVE_EVENT_WARNING_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-native-event-warning-hover',
+    ),
+    NATIVE_EVENT_WARNING_TEXT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-native-event-warning-text',
+    ),
     PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-priority-background',
     ),
@@ -172,6 +178,9 @@ export function updateColorsToMatchTheme(): void {
     REACT_WORK_BORDER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-work-border',
     ),
+    TEXT_COLOR: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-text-color',
+    ),
     TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
   };
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 2140c40ce490..f3435745b37d 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -16,6 +16,7 @@ import type {
   Milliseconds,
   BatchUID,
   Flamechart,
+  NativeEvent,
   ReactLane,
   ReactMeasureType,
   ReactProfilerData,
@@ -39,6 +40,8 @@ type ProcessorState = {|
   measureStack: MeasureStackElement[],
 |};
 
+let nativeEventStack: Array<NativeEvent> = [];
+
 // Exported for tests
 export function getLanesFromTransportDecimalBitmask(
   laneBitmaskString: string,
@@ -178,15 +181,37 @@ function processTimelineEvent(
           }
         }
 
-        const startTime = (ts - currentProfilerData.startTime) / 1000;
+        const timestamp = (ts - currentProfilerData.startTime) / 1000;
         const duration = event.dur / 1000;
 
-        // TODO (scheduling profiler) Should we filter out certain event types?
-        currentProfilerData.nativeEvents.push({
+        let depth = 0;
+
+        while (nativeEventStack.length > 0) {
+          const prevNativeEvent = nativeEventStack[nativeEventStack.length - 1];
+          const prevStopTime =
+            prevNativeEvent.timestamp + prevNativeEvent.duration;
+
+          if (timestamp < prevStopTime) {
+            depth = prevNativeEvent.depth + 1;
+            break;
+          } else {
+            nativeEventStack.pop();
+          }
+        }
+
+        const nativeEvent = {
+          depth,
           duration,
-          timestamp: startTime,
+          highlight: false,
+          timestamp,
           type,
-        });
+        };
+
+        currentProfilerData.nativeEvents.push(nativeEvent);
+
+        // Keep track of curent event in case future ones overlap.
+        // We separate them into different vertical lanes in this case.
+        nativeEventStack.push(nativeEvent);
       }
       break;
     case 'blink.user_timing':
@@ -309,6 +334,15 @@ function processTimelineEvent(
           currentProfilerData,
           state,
         );
+
+        for (let i = 0; i < nativeEventStack.length; i++) {
+          const nativeEvent = nativeEventStack[i];
+          const stopTime = nativeEvent.timestamp + nativeEvent.duration;
+          if (stopTime > startTime) {
+            // Warn about sync updates that happen an event handler.
+            nativeEvent.highlight = true;
+          }
+        }
       } else if (
         name.startsWith('--render-stop') ||
         name.startsWith('--render-yield')
@@ -470,6 +504,8 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
 export default function preprocessData(
   timeline: TimelineEvent[],
 ): ReactProfilerData {
+  nativeEventStack = [];
+
   const flamechart = preprocessFlamechart(timeline);
 
   const profilerData: ReactProfilerData = {
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 3047e7abae06..ece7d6603415 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -22,7 +22,9 @@ export type Milliseconds = number;
 export type ReactLane = number;
 
 export type NativeEvent = {|
+  +depth: number,
   +duration: Milliseconds,
+  highlight: boolean,
   +timestamp: Milliseconds,
   +type: string,
 |};
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 8967cca0f221..e3fbec773ddc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -418,7 +418,7 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-search-match-current', documentElements);
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-flame-graph-label',
+    'color-scheduling-profiler-text-color',
     documentElements,
   );
   updateStyleHelper(
@@ -431,6 +431,21 @@ export function updateThemeVariables(
     'color-scheduling-profiler-native-event-hover',
     documentElements,
   );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-native-event-warning',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-native-event-warning-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-native-event-warning-text',
+    documentElements,
+  );
   updateStyleHelper(
     theme,
     'color-selected-tree-highlight-active',
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 13f67daba225..7d69b4536a70 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -78,9 +78,11 @@
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
   --light-color-resize-bar: #cccccc;
-  --light-color-scheduling-profiler-flame-graph-label: #000000;
-  --light-color-scheduling-profiler-native-event: #aaaaaa;
-  --light-color-scheduling-profiler-native-event-hover: #888888;
+  --light-color-scheduling-profiler-native-event: #ccc;
+  --light-color-scheduling-profiler-native-event-hover: #aaa;
+  --light-color-scheduling-profiler-native-event-warning: #ee1638;
+  --light-color-scheduling-profiler-native-event-warning-hover: #da1030;
+  --light-color-scheduling-profiler-native-event-warning-text: #fff;
   --light-color-scheduling-profiler-priority-background: #f6f6f6;
   --light-color-scheduling-profiler-priority-border: #eeeeee;
   --light-color-scheduling-profiler-user-timing: #c9cacd;
@@ -106,6 +108,7 @@
   --light-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
   --light-color-scheduling-profiler-react-suspend: #a6e59f;
   --light-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --light-color-scheduling-profiler-text-color: #000000;
   --light-color-scheduling-profiler-react-work-border:#ffffff;
   --light-color-scroll-thumb: #c2c2c2;
   --light-color-scroll-track: #fafafa;
@@ -200,9 +203,11 @@
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;
   --dark-color-resize-bar: #3d424a;
-  --dark-color-scheduling-profiler-flame-graph-label: #000000;
-  --dark-color-scheduling-profiler-native-event: #aaaaaa;
-  --dark-color-scheduling-profiler-native-event-hover: #888888;
+  --dark-color-scheduling-profiler-native-event: #b2b2b2;
+  --dark-color-scheduling-profiler-native-event-hover: #949494;
+  --dark-color-scheduling-profiler-native-event-warning: #ee1638;
+  --dark-color-scheduling-profiler-native-event-warning-hover: #da1030;
+  --dark-color-scheduling-profiler-native-event-warning-text: #fff;
   --dark-color-scheduling-profiler-priority-background: #1d2129;
   --dark-color-scheduling-profiler-priority-border: #282c34;
   --dark-color-scheduling-profiler-user-timing: #c9cacd;
@@ -228,6 +233,7 @@
   --dark-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
   --dark-color-scheduling-profiler-react-suspend: #a6e59f;
   --dark-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --dark-color-scheduling-profiler-text-color: #000000;
   --dark-color-scheduling-profiler-react-work-border:#ffffff;
   --dark-color-scroll-thumb: #afb3b9;
   --dark-color-scroll-track: #313640;

From d4d7864934025232e8bca5d2febec846ec1bd6e3 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Mon, 26 Jul 2021 21:02:06 -0700
Subject: [PATCH 0721/1603] Fix `ReactFabricHostComponent` methods if detached
 (#21967)

---
 .../src/ReactFabricHostConfig.js              |  40 ++--
 .../__tests__/ReactFabric-test.internal.js    | 175 ++++++++++++++++++
 2 files changed, 201 insertions(+), 14 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 39058e9ac5a3..ac7fb64d922c 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -137,17 +137,23 @@ class ReactFabricHostComponent {
   }
 
   measure(callback: MeasureOnSuccessCallback) {
-    fabricMeasure(
-      this._internalInstanceHandle.stateNode.node,
-      mountSafeCallback_NOT_REALLY_SAFE(this, callback),
-    );
+    const {stateNode} = this._internalInstanceHandle;
+    if (stateNode != null) {
+      fabricMeasure(
+        stateNode.node,
+        mountSafeCallback_NOT_REALLY_SAFE(this, callback),
+      );
+    }
   }
 
   measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
-    fabricMeasureInWindow(
-      this._internalInstanceHandle.stateNode.node,
-      mountSafeCallback_NOT_REALLY_SAFE(this, callback),
-    );
+    const {stateNode} = this._internalInstanceHandle;
+    if (stateNode != null) {
+      fabricMeasureInWindow(
+        stateNode.node,
+        mountSafeCallback_NOT_REALLY_SAFE(this, callback),
+      );
+    }
   }
 
   measureLayout(
@@ -168,12 +174,18 @@ class ReactFabricHostComponent {
       return;
     }
 
-    fabricMeasureLayout(
-      this._internalInstanceHandle.stateNode.node,
-      relativeToNativeNode._internalInstanceHandle.stateNode.node,
-      mountSafeCallback_NOT_REALLY_SAFE(this, onFail),
-      mountSafeCallback_NOT_REALLY_SAFE(this, onSuccess),
-    );
+    const toStateNode = this._internalInstanceHandle.stateNode;
+    const fromStateNode =
+      relativeToNativeNode._internalInstanceHandle.stateNode;
+
+    if (toStateNode != null && fromStateNode != null) {
+      fabricMeasureLayout(
+        toStateNode.node,
+        fromStateNode.node,
+        mountSafeCallback_NOT_REALLY_SAFE(this, onFail),
+        mountSafeCallback_NOT_REALLY_SAFE(this, onSuccess),
+      );
+    }
   }
 
   setNativeProps(nativeProps: Object) {
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index 6b776c085fd4..ebe763af02d0 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -414,6 +414,37 @@ describe('ReactFabric', () => {
     expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100, 0, 0);
   });
 
+  it('should no-op if calling measure on unmounted refs', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.measure.mockClear();
+
+    let viewRef;
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
+    const dangerouslyRetainedViewRef = viewRef;
+    act(() => {
+      ReactFabric.stopSurface(11);
+    });
+
+    expect(nativeFabricUIManager.measure).not.toBeCalled();
+    const successCallback = jest.fn();
+    dangerouslyRetainedViewRef.measure(successCallback);
+    expect(nativeFabricUIManager.measure).not.toBeCalled();
+    expect(successCallback).not.toBeCalled();
+  });
+
   it('should call FabricUIManager.measureInWindow on ref.measureInWindow', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -442,6 +473,37 @@ describe('ReactFabric', () => {
     expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100);
   });
 
+  it('should no-op if calling measureInWindow on unmounted refs', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.measureInWindow.mockClear();
+
+    let viewRef;
+    act(() => {
+      ReactFabric.render(
+        <View
+          ref={ref => {
+            viewRef = ref;
+          }}
+        />,
+        11,
+      );
+    });
+    const dangerouslyRetainedViewRef = viewRef;
+    act(() => {
+      ReactFabric.stopSurface(11);
+    });
+
+    expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
+    const successCallback = jest.fn();
+    dangerouslyRetainedViewRef.measureInWindow(successCallback);
+    expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
+    expect(successCallback).not.toBeCalled();
+  });
+
   it('should support ref in ref.measureLayout', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -480,6 +542,119 @@ describe('ReactFabric', () => {
     expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);
   });
 
+  it('should no-op if calling measureLayout on unmounted "from" ref', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.measureLayout.mockClear();
+
+    let viewRef;
+    let otherRef;
+    act(() => {
+      ReactFabric.render(
+        <View>
+          <View
+            foo="bar"
+            ref={ref => {
+              viewRef = ref;
+            }}
+          />
+          <View
+            ref={ref => {
+              otherRef = ref;
+            }}
+          />
+        </View>,
+        11,
+      );
+    });
+    const dangerouslyRetainedOtherRef = otherRef;
+    act(() => {
+      ReactFabric.render(
+        <View>
+          <View
+            foo="bar"
+            ref={ref => {
+              viewRef = ref;
+            }}
+          />
+          {null}
+        </View>,
+        11,
+      );
+    });
+
+    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    viewRef.measureLayout(
+      dangerouslyRetainedOtherRef,
+      successCallback,
+      failureCallback,
+    );
+    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
+    expect(successCallback).not.toBeCalled();
+    expect(failureCallback).not.toBeCalled();
+  });
+
+  it('should no-op if calling measureLayout on unmounted "to" ref', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    nativeFabricUIManager.measureLayout.mockClear();
+
+    let viewRef;
+    let otherRef;
+    act(() => {
+      ReactFabric.render(
+        <View>
+          <View
+            foo="bar"
+            ref={ref => {
+              viewRef = ref;
+            }}
+          />
+          <View
+            ref={ref => {
+              otherRef = ref;
+            }}
+          />
+        </View>,
+        11,
+      );
+    });
+    const dangerouslyRetainedViewRef = viewRef;
+    act(() => {
+      ReactFabric.render(
+        <View>
+          {null}
+          <View
+            ref={ref => {
+              otherRef = ref;
+            }}
+          />
+        </View>,
+        11,
+      );
+    });
+
+    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    dangerouslyRetainedViewRef.measureLayout(
+      otherRef,
+      successCallback,
+      failureCallback,
+    );
+    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
+    expect(successCallback).not.toBeCalled();
+    expect(failureCallback).not.toBeCalled();
+  });
+
   it('returns the correct instance and calls it in the callback', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},

From 4cc8ec64c2c853146f35ee3c7d072fe23847a006 Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Mon, 26 Jul 2021 23:45:26 -0700
Subject: [PATCH 0722/1603] Separate unit tests for ReactFabricHostComponent
 (#21969)

---
 .../__tests__/ReactFabric-test.internal.js    | 354 ------------------
 .../ReactFabricHostComponent-test.internal.js | 220 +++++++++++
 2 files changed, 220 insertions(+), 354 deletions(-)
 create mode 100644 packages/react-native-renderer/src/__tests__/ReactFabricHostComponent-test.internal.js

diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index ebe763af02d0..c7e4e3dee1b5 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -13,14 +13,9 @@
 let React;
 let ReactFabric;
 let createReactNativeComponentClass;
-let UIManager;
 let StrictMode;
-let TextInputState;
 let act;
 
-const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
-  'Warning: setNativeProps is not currently supported in Fabric';
-
 const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
   "Warning: dispatchCommand was called with a ref that isn't a " +
   'native component. Use React.forwardRef to get access to the underlying native component';
@@ -42,12 +37,8 @@ describe('ReactFabric', () => {
     React = require('react');
     StrictMode = React.StrictMode;
     ReactFabric = require('react-native-renderer/fabric');
-    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;
 
     act = require('jest-react').act;
   });
@@ -227,44 +218,6 @@ describe('ReactFabric', () => {
     ).toMatchSnapshot();
   });
 
-  it('should not call UIManager.updateView from ref.setNativeProps', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    UIManager.updateView.mockReset();
-
-    let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          foo="bar"
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
-    expect(UIManager.updateView).not.toBeCalled();
-
-    expect(() => {
-      viewRef.setNativeProps({});
-    }).toErrorDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
-      withoutStack: true,
-    });
-
-    expect(UIManager.updateView).not.toBeCalled();
-
-    expect(() => {
-      viewRef.setNativeProps({foo: 'baz'});
-    }).toErrorDev([SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE], {
-      withoutStack: true,
-    });
-    expect(UIManager.updateView).not.toBeCalled();
-  });
-
   it('should call dispatchCommand for native refs', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -386,275 +339,6 @@ describe('ReactFabric', () => {
     expect(nativeFabricUIManager.sendAccessibilityEvent).not.toBeCalled();
   });
 
-  it('should call FabricUIManager.measure on ref.measure', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    nativeFabricUIManager.measure.mockClear();
-
-    let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
-
-    expect(nativeFabricUIManager.measure).not.toBeCalled();
-    const successCallback = jest.fn();
-    viewRef.measure(successCallback);
-    expect(nativeFabricUIManager.measure).toHaveBeenCalledTimes(1);
-    expect(successCallback).toHaveBeenCalledTimes(1);
-    expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100, 0, 0);
-  });
-
-  it('should no-op if calling measure on unmounted refs', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    nativeFabricUIManager.measure.mockClear();
-
-    let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
-    const dangerouslyRetainedViewRef = viewRef;
-    act(() => {
-      ReactFabric.stopSurface(11);
-    });
-
-    expect(nativeFabricUIManager.measure).not.toBeCalled();
-    const successCallback = jest.fn();
-    dangerouslyRetainedViewRef.measure(successCallback);
-    expect(nativeFabricUIManager.measure).not.toBeCalled();
-    expect(successCallback).not.toBeCalled();
-  });
-
-  it('should call FabricUIManager.measureInWindow on ref.measureInWindow', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    nativeFabricUIManager.measureInWindow.mockClear();
-
-    let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
-
-    expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
-    const successCallback = jest.fn();
-    viewRef.measureInWindow(successCallback);
-    expect(nativeFabricUIManager.measureInWindow).toHaveBeenCalledTimes(1);
-    expect(successCallback).toHaveBeenCalledTimes(1);
-    expect(successCallback).toHaveBeenCalledWith(10, 10, 100, 100);
-  });
-
-  it('should no-op if calling measureInWindow on unmounted refs', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    nativeFabricUIManager.measureInWindow.mockClear();
-
-    let viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View
-          ref={ref => {
-            viewRef = ref;
-          }}
-        />,
-        11,
-      );
-    });
-    const dangerouslyRetainedViewRef = viewRef;
-    act(() => {
-      ReactFabric.stopSurface(11);
-    });
-
-    expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
-    const successCallback = jest.fn();
-    dangerouslyRetainedViewRef.measureInWindow(successCallback);
-    expect(nativeFabricUIManager.measureInWindow).not.toBeCalled();
-    expect(successCallback).not.toBeCalled();
-  });
-
-  it('should support ref in ref.measureLayout', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    nativeFabricUIManager.measureLayout.mockClear();
-
-    let viewRef;
-    let otherRef;
-    act(() => {
-      ReactFabric.render(
-        <View>
-          <View
-            foo="bar"
-            ref={ref => {
-              viewRef = ref;
-            }}
-          />
-          <View
-            ref={ref => {
-              otherRef = ref;
-            }}
-          />
-        </View>,
-        11,
-      );
-    });
-
-    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
-    const successCallback = jest.fn();
-    const failureCallback = jest.fn();
-    viewRef.measureLayout(otherRef, successCallback, failureCallback);
-    expect(nativeFabricUIManager.measureLayout).toHaveBeenCalledTimes(1);
-    expect(successCallback).toHaveBeenCalledTimes(1);
-    expect(successCallback).toHaveBeenCalledWith(1, 1, 100, 100);
-  });
-
-  it('should no-op if calling measureLayout on unmounted "from" ref', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    nativeFabricUIManager.measureLayout.mockClear();
-
-    let viewRef;
-    let otherRef;
-    act(() => {
-      ReactFabric.render(
-        <View>
-          <View
-            foo="bar"
-            ref={ref => {
-              viewRef = ref;
-            }}
-          />
-          <View
-            ref={ref => {
-              otherRef = ref;
-            }}
-          />
-        </View>,
-        11,
-      );
-    });
-    const dangerouslyRetainedOtherRef = otherRef;
-    act(() => {
-      ReactFabric.render(
-        <View>
-          <View
-            foo="bar"
-            ref={ref => {
-              viewRef = ref;
-            }}
-          />
-          {null}
-        </View>,
-        11,
-      );
-    });
-
-    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
-    const successCallback = jest.fn();
-    const failureCallback = jest.fn();
-    viewRef.measureLayout(
-      dangerouslyRetainedOtherRef,
-      successCallback,
-      failureCallback,
-    );
-    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
-    expect(successCallback).not.toBeCalled();
-    expect(failureCallback).not.toBeCalled();
-  });
-
-  it('should no-op if calling measureLayout on unmounted "to" ref', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    nativeFabricUIManager.measureLayout.mockClear();
-
-    let viewRef;
-    let otherRef;
-    act(() => {
-      ReactFabric.render(
-        <View>
-          <View
-            foo="bar"
-            ref={ref => {
-              viewRef = ref;
-            }}
-          />
-          <View
-            ref={ref => {
-              otherRef = ref;
-            }}
-          />
-        </View>,
-        11,
-      );
-    });
-    const dangerouslyRetainedViewRef = viewRef;
-    act(() => {
-      ReactFabric.render(
-        <View>
-          {null}
-          <View
-            ref={ref => {
-              otherRef = ref;
-            }}
-          />
-        </View>,
-        11,
-      );
-    });
-
-    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
-    const successCallback = jest.fn();
-    const failureCallback = jest.fn();
-    dangerouslyRetainedViewRef.measureLayout(
-      otherRef,
-      successCallback,
-      failureCallback,
-    );
-    expect(nativeFabricUIManager.measureLayout).not.toBeCalled();
-    expect(successCallback).not.toBeCalled();
-    expect(failureCallback).not.toBeCalled();
-  });
-
   it('returns the correct instance and calls it in the callback', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
@@ -1202,44 +886,6 @@ describe('ReactFabric', () => {
     expect(match).toBe(child._nativeTag);
   });
 
-  it('blur on host component calls TextInputState', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    const viewRef = React.createRef();
-    act(() => {
-      ReactFabric.render(<View ref={viewRef} />, 11);
-    });
-
-    expect(TextInputState.blurTextInput).not.toBeCalled();
-
-    viewRef.current.blur();
-
-    expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
-    expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
-  });
-
-  it('focus on host component calls TextInputState', () => {
-    const View = createReactNativeComponentClass('RCTView', () => ({
-      validAttributes: {foo: true},
-      uiViewClassName: 'RCTView',
-    }));
-
-    const viewRef = React.createRef();
-    act(() => {
-      ReactFabric.render(<View ref={viewRef} />, 11);
-    });
-
-    expect(TextInputState.focusTextInput).not.toBeCalled();
-
-    viewRef.current.focus();
-
-    expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
-    expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
-  });
-
   it('should no-op if calling sendAccessibilityEvent on unmounted refs', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {foo: true},
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabricHostComponent-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabricHostComponent-test.internal.js
new file mode 100644
index 000000000000..de19bf7fe81e
--- /dev/null
+++ b/packages/react-native-renderer/src/__tests__/ReactFabricHostComponent-test.internal.js
@@ -0,0 +1,220 @@
+/**
+ * (c) Facebook, Inc. and its affiliates. Confidential and proprietary.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+'use strict';
+
+import * as React from 'react';
+
+beforeEach(() => {
+  jest.resetModules();
+  jest.restoreAllMocks();
+
+  require('react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager');
+});
+
+/**
+ * Renders a sequence of mock views as dictated by `keyLists`. The `keyLists`
+ * argument is an array of arrays which determines the number of render passes,
+ * how many views will be rendered in each pass, and what the keys are for each
+ * of the views.
+ *
+ * If an element in `keyLists` is null, the entire root will be unmounted.
+ *
+ * The return value is an array of arrays with the resulting refs from rendering
+ * each corresponding array of keys.
+ *
+ * If the corresponding array of keys is null, the returned element at that
+ * index will also be null.
+ */
+function mockRenderKeys(keyLists) {
+  const ReactFabric = require('react-native-renderer/fabric');
+  const createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+    .ReactNativeViewConfigRegistry.register;
+  const {act} = require('jest-react');
+
+  const mockContainerTag = 11;
+  const MockView = createReactNativeComponentClass('RCTMockView', () => ({
+    validAttributes: {},
+    uiViewClassName: 'RCTMockView',
+  }));
+
+  return keyLists.map(keyList => {
+    if (Array.isArray(keyList)) {
+      const refs = keyList.map(key => undefined);
+      act(() => {
+        ReactFabric.render(
+          <MockView>
+            {keyList.map((key, index) => (
+              <MockView
+                key={key}
+                ref={ref => {
+                  refs[index] = ref;
+                }}
+              />
+            ))}
+          </MockView>,
+          mockContainerTag,
+        );
+      });
+      // Clone `refs` to ignore future passes.
+      return [...refs];
+    }
+    if (keyList == null) {
+      act(() => {
+        ReactFabric.stopSurface(mockContainerTag);
+      });
+      return null;
+    }
+    throw new TypeError(
+      `Invalid 'keyLists' element of type ${typeof keyList}.`,
+    );
+  });
+}
+
+describe('blur', () => {
+  test('blur() invokes TextInputState', () => {
+    const {
+      TextInputState,
+    } = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
+
+    const [[fooRef]] = mockRenderKeys([['foo']]);
+
+    fooRef.blur();
+
+    expect(TextInputState.blurTextInput.mock.calls).toEqual([[fooRef]]);
+  });
+});
+
+describe('focus', () => {
+  test('focus() invokes TextInputState', () => {
+    const {
+      TextInputState,
+    } = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
+
+    const [[fooRef]] = mockRenderKeys([['foo']]);
+
+    fooRef.focus();
+
+    expect(TextInputState.focusTextInput.mock.calls).toEqual([[fooRef]]);
+  });
+});
+
+describe('measure', () => {
+  test('component.measure(...) invokes callback', () => {
+    const [[fooRef]] = mockRenderKeys([['foo']]);
+
+    const callback = jest.fn();
+    fooRef.measure(callback);
+
+    expect(nativeFabricUIManager.measure).toHaveBeenCalledTimes(1);
+    expect(callback.mock.calls).toEqual([[10, 10, 100, 100, 0, 0]]);
+  });
+
+  test('unmounted.measure(...) does nothing', () => {
+    const [[fooRef]] = mockRenderKeys([['foo'], null]);
+
+    const callback = jest.fn();
+    fooRef.measure(callback);
+
+    expect(nativeFabricUIManager.measure).not.toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+});
+
+describe('measureInWindow', () => {
+  test('component.measureInWindow(...) invokes callback', () => {
+    const [[fooRef]] = mockRenderKeys([['foo']]);
+
+    const callback = jest.fn();
+    fooRef.measureInWindow(callback);
+
+    expect(nativeFabricUIManager.measureInWindow).toHaveBeenCalledTimes(1);
+    expect(callback.mock.calls).toEqual([[10, 10, 100, 100]]);
+  });
+
+  test('unmounted.measureInWindow(...) does nothing', () => {
+    const [[fooRef]] = mockRenderKeys([['foo'], null]);
+
+    const callback = jest.fn();
+    fooRef.measureInWindow(callback);
+
+    expect(nativeFabricUIManager.measureInWindow).not.toHaveBeenCalled();
+    expect(callback).not.toHaveBeenCalled();
+  });
+});
+
+describe('measureLayout', () => {
+  test('component.measureLayout(component, ...) invokes callback', () => {
+    const [[fooRef, barRef]] = mockRenderKeys([['foo', 'bar']]);
+
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    fooRef.measureLayout(barRef, successCallback, failureCallback);
+
+    expect(nativeFabricUIManager.measureLayout).toHaveBeenCalledTimes(1);
+    expect(successCallback.mock.calls).toEqual([[1, 1, 100, 100]]);
+  });
+
+  test('unmounted.measureLayout(component, ...) does nothing', () => {
+    const [[fooRef, barRef]] = mockRenderKeys([
+      ['foo', 'bar'],
+      ['foo', null],
+    ]);
+
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    fooRef.measureLayout(barRef, successCallback, failureCallback);
+
+    expect(nativeFabricUIManager.measureLayout).not.toHaveBeenCalled();
+    expect(successCallback).not.toHaveBeenCalled();
+  });
+
+  test('component.measureLayout(unmounted, ...) does nothing', () => {
+    const [[fooRef, barRef]] = mockRenderKeys([
+      ['foo', 'bar'],
+      [null, 'bar'],
+    ]);
+
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    fooRef.measureLayout(barRef, successCallback, failureCallback);
+
+    expect(nativeFabricUIManager.measureLayout).not.toHaveBeenCalled();
+    expect(successCallback).not.toHaveBeenCalled();
+  });
+
+  test('unmounted.measureLayout(unmounted, ...) does nothing', () => {
+    const [[fooRef, barRef]] = mockRenderKeys([['foo', 'bar'], null]);
+
+    const successCallback = jest.fn();
+    const failureCallback = jest.fn();
+    fooRef.measureLayout(barRef, successCallback, failureCallback);
+
+    expect(nativeFabricUIManager.measureLayout).not.toHaveBeenCalled();
+    expect(successCallback).not.toHaveBeenCalled();
+  });
+});
+
+describe('setNativeProps', () => {
+  test('setNativeProps(...) emits a warning', () => {
+    const {
+      UIManager,
+    } = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface');
+
+    const [[fooRef]] = mockRenderKeys([['foo']]);
+
+    expect(() => {
+      fooRef.setNativeProps({});
+    }).toErrorDev(
+      ['Warning: setNativeProps is not currently supported in Fabric'],
+      {
+        withoutStack: true,
+      },
+    );
+    expect(UIManager.updateView).not.toBeCalled();
+  });
+});

From 87239321b0609f7bf1edaaba6aab6be24d6717b1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 27 Jul 2021 12:23:01 -0400
Subject: [PATCH 0723/1603] Sceduling profiler: Added custom view cursors
 (#21970)

---
 .../src/CanvasPage.js                         | 10 ++-
 .../src/content-views/FlamechartView.js       | 26 ++++++-
 .../src/content-views/NativeEventsView.js     | 27 +++++--
 .../src/content-views/ReactEventsView.js      | 24 +++++-
 .../src/content-views/ReactMeasuresView.js    | 24 +++++-
 .../src/content-views/UserTimingMarksView.js  | 24 +++++-
 .../src/view-base/HorizontalPanAndZoomView.js | 53 +++++++++++--
 .../src/view-base/ResizableSplitView.js       | 74 ++++++++++++++-----
 .../src/view-base/Surface.js                  | 27 ++++++-
 .../src/view-base/View.js                     | 23 +++++-
 10 files changed, 257 insertions(+), 55 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index bbf98acb265d..2fe64b0c5651 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -273,10 +273,16 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
   }, [width, height]);
 
   const interactor = useCallback(interaction => {
-    if (canvasRef.current === null) {
+    const canvas = canvasRef.current;
+    if (canvas === null) {
       return;
     }
-    surfaceRef.current.handleInteraction(interaction);
+
+    const surface = surfaceRef.current;
+    surface.handleInteraction(interaction);
+
+    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.
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index 6b839a39f71c..99fbc761a008 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -12,7 +12,13 @@ import type {
   FlamechartStackFrame,
   FlamechartStackLayer,
 } from '../types';
-import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRef,
+} from '../view-base';
 
 import {
   ColorView,
@@ -240,7 +246,11 @@ class FlamechartStackLayerView extends View {
   /**
    * @private
    */
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(
+    interaction: MouseMoveInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const {_stackLayer, frame, _intrinsicSize, _onHover, visibleArea} = this;
     const {location} = interaction.payload;
     if (!_onHover || !rectContainsPoint(location, visibleArea)) {
@@ -259,6 +269,8 @@ class FlamechartStackLayerView extends View {
       const width = durationToWidth(duration, scaleFactor);
       const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
       if (x <= location.x && x + width >= location.x) {
+        this.currentCursor = 'pointer';
+        hoveredViewRef.current = this;
         _onHover(flamechartStackFrame);
         return;
       }
@@ -273,10 +285,16 @@ class FlamechartStackLayerView extends View {
     _onHover(null);
   }
 
-  handleInteraction(interaction: Interaction) {
+  _didGrab: boolean = false;
+
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction);
+        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
index 3666f6453973..53905e249287 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -8,7 +8,13 @@
  */
 
 import type {NativeEvent, ReactProfilerData} from '../types';
-import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRef,
+} from '../view-base';
 
 import {
   durationToWidth,
@@ -72,7 +78,6 @@ export class NativeEventsView extends View {
     this._profilerData = profilerData;
 
     this._performPreflightComputations();
-    console.log(this._depthToNativeEvent);
   }
 
   _performPreflightComputations() {
@@ -250,7 +255,11 @@ export class NativeEventsView extends View {
   /**
    * @private
    */
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(
+    interaction: MouseMoveInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const {frame, _intrinsicSize, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -279,6 +288,10 @@ export class NativeEventsView extends View {
           hoverTimestamp >= timestamp &&
           hoverTimestamp <= timestamp + duration
         ) {
+          this.currentCursor = 'pointer';
+
+          hoveredViewRef.current = this;
+
           onHover(nativeEvent);
           return;
         }
@@ -288,10 +301,14 @@ export class NativeEventsView extends View {
     onHover(null);
   }
 
-  handleInteraction(interaction: Interaction) {
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction);
+        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
index f76df3bed559..2c2c1d5e9917 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
@@ -8,7 +8,13 @@
  */
 
 import type {ReactEvent, ReactProfilerData} from '../types';
-import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRef,
+} from '../view-base';
 
 import {
   positioningScaleFactor,
@@ -225,7 +231,11 @@ export class ReactEventsView extends View {
   /**
    * @private
    */
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(
+    interaction: MouseMoveInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const {frame, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -260,6 +270,8 @@ export class ReactEventsView extends View {
         timestamp - eventTimestampAllowance <= hoverTimestamp &&
         hoverTimestamp <= timestamp + eventTimestampAllowance
       ) {
+        this.currentCursor = 'pointer';
+        hoveredViewRef.current = this;
         onHover(event);
         return;
       }
@@ -268,10 +280,14 @@ export class ReactEventsView extends View {
     onHover(null);
   }
 
-  handleInteraction(interaction: Interaction) {
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction);
+        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index 61e804223a9e..fc46a3b27047 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -8,7 +8,13 @@
  */
 
 import type {ReactLane, ReactMeasure, ReactProfilerData} from '../types';
-import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRef,
+} from '../view-base';
 
 import {
   durationToWidth,
@@ -250,7 +256,11 @@ export class ReactMeasuresView extends View {
   /**
    * @private
    */
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(
+    interaction: MouseMoveInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const {
       frame,
       _intrinsicSize,
@@ -300,6 +310,8 @@ export class ReactMeasuresView extends View {
         hoverTimestamp >= timestamp &&
         hoverTimestamp <= timestamp + duration
       ) {
+        this.currentCursor = 'pointer';
+        hoveredViewRef.current = this;
         onHover(measure);
         return;
       }
@@ -308,10 +320,14 @@ export class ReactMeasuresView extends View {
     onHover(null);
   }
 
-  handleInteraction(interaction: Interaction) {
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction);
+        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
index 7a822716db6b..7ac95c82253a 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
@@ -8,7 +8,13 @@
  */
 
 import type {UserTimingMark} from '../types';
-import type {Interaction, MouseMoveInteraction, Rect, Size} from '../view-base';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  Size,
+  ViewRef,
+} from '../view-base';
 
 import {
   positioningScaleFactor,
@@ -185,7 +191,11 @@ export class UserTimingMarksView extends View {
   /**
    * @private
    */
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(
+    interaction: MouseMoveInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const {frame, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -218,6 +228,8 @@ export class UserTimingMarksView extends View {
         timestamp - markTimestampAllowance <= hoverTimestamp &&
         hoverTimestamp <= timestamp + markTimestampAllowance
       ) {
+        this.currentCursor = 'pointer';
+        hoveredViewRef.current = this;
         onHover(mark);
         return;
       }
@@ -226,10 +238,14 @@ export class UserTimingMarksView extends View {
     onHover(null);
   }
 
-  handleInteraction(interaction: Interaction) {
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction);
+        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
index d294e4d0fa8a..706159ac40d1 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
@@ -19,6 +19,7 @@ import type {
 } from './useCanvasInteraction';
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
+import type {ViewRef} from './Surface';
 
 import {Surface} from './Surface';
 import {View} from './View';
@@ -155,13 +156,39 @@ export class HorizontalPanAndZoomView extends View {
     this._setScrollState(newState);
   }
 
-  _handleMouseDown(interaction: MouseDownInteraction) {
+  _handleMouseDown(
+    interaction: MouseDownInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     if (rectContainsPoint(interaction.payload.location, this.frame)) {
       this._isPanning = true;
+
+      activeViewRef.current = this;
+
+      this.currentCursor = 'grabbing';
     }
   }
 
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(
+    interaction: MouseMoveInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
+    const isHovered = rectContainsPoint(
+      interaction.payload.location,
+      this.frame,
+    );
+    if (isHovered) {
+      hoveredViewRef.current = this;
+    }
+
+    if (activeViewRef.current === this) {
+      this.currentCursor = 'grabbing';
+    } else if (isHovered) {
+      this.currentCursor = 'grab';
+    }
+
     if (!this._isPanning) {
       return;
     }
@@ -173,10 +200,18 @@ export class HorizontalPanAndZoomView extends View {
     this._setStateAndInformCallbacksIfChanged(newState);
   }
 
-  _handleMouseUp(interaction: MouseUpInteraction) {
+  _handleMouseUp(
+    interaction: MouseUpInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     if (this._isPanning) {
       this._isPanning = false;
     }
+
+    if (activeViewRef.current === this) {
+      activeViewRef.current = null;
+    }
   }
 
   _handleWheelPlain(interaction: WheelPlainInteraction) {
@@ -238,16 +273,20 @@ export class HorizontalPanAndZoomView extends View {
     this._setStateAndInformCallbacksIfChanged(newState);
   }
 
-  handleInteraction(interaction: Interaction) {
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousedown':
-        this._handleMouseDown(interaction);
+        this._handleMouseDown(interaction, activeViewRef, hoveredViewRef);
         break;
       case 'mousemove':
-        this._handleMouseMove(interaction);
+        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
         break;
       case 'mouseup':
-        this._handleMouseUp(interaction);
+        this._handleMouseUp(interaction, activeViewRef, hoveredViewRef);
         break;
       case 'wheel-plain':
         this._handleWheelPlain(interaction);
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
index c69b982c47cd..3b9edde41e78 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
@@ -14,6 +14,7 @@ import type {
   MouseUpInteraction,
 } from './useCanvasInteraction';
 import type {Rect, Size} from './geometry';
+import type {ViewRef} from './Surface';
 
 import {COLORS} from '../content-views/constants';
 import nullthrows from 'nullthrows';
@@ -82,28 +83,49 @@ class ResizeBar extends View {
     this._updateColor();
   }
 
-  _handleMouseDown(interaction: MouseDownInteraction) {
+  _handleMouseDown(
+    interaction: MouseDownInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
     );
     if (cursorInView) {
       this._setInteractionState('dragging');
+      activeViewRef.current = this;
     }
   }
 
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(
+    interaction: MouseMoveInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
     );
+
+    if (cursorInView || activeViewRef.current === this) {
+      this.currentCursor = 'ns-resize';
+    }
+    if (cursorInView) {
+      hoveredViewRef.current = this;
+    }
+
     if (this._interactionState === 'dragging') {
       return;
     }
     this._setInteractionState(cursorInView ? 'hovered' : 'normal');
   }
 
-  _handleMouseUp(interaction: MouseUpInteraction) {
+  _handleMouseUp(
+    interaction: MouseUpInteraction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
@@ -111,18 +133,26 @@ class ResizeBar extends View {
     if (this._interactionState === 'dragging') {
       this._setInteractionState(cursorInView ? 'hovered' : 'normal');
     }
+
+    if (activeViewRef.current === this) {
+      activeViewRef.current = null;
+    }
   }
 
-  handleInteraction(interaction: Interaction) {
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousedown':
-        this._handleMouseDown(interaction);
+        this._handleMouseDown(interaction, activeViewRef, hoveredViewRef);
         return;
       case 'mousemove':
-        this._handleMouseMove(interaction);
+        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
         return;
       case 'mouseup':
-        this._handleMouseUp(interaction);
+        this._handleMouseUp(interaction, activeViewRef, hoveredViewRef);
         return;
     }
   }
@@ -281,18 +311,6 @@ export class ResizableSplitView extends View {
   }
 
   _handleMouseMove(interaction: MouseMoveInteraction) {
-    const cursorLocation = interaction.payload.location;
-    const resizeBarFrame = this._getResizeBar().frame;
-
-    const canvas = this._canvasRef.current;
-    if (canvas !== null) {
-      if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
-        canvas.style.cursor = 'ns-resize';
-      } else {
-        canvas.style.cursor = 'default';
-      }
-    }
-
     const {_resizingState} = this;
     if (_resizingState) {
       this._resizingState = {
@@ -309,7 +327,23 @@ export class ResizableSplitView extends View {
     }
   }
 
-  handleInteraction(interaction: Interaction) {
+  _didGrab: boolean = false;
+
+  getCursorActiveSubView(interaction: Interaction): View | null {
+    const cursorLocation = interaction.payload.location;
+    const resizeBarFrame = this._getResizeBar().frame;
+    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
+      return this;
+    } else {
+      return null;
+    }
+  }
+
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
     switch (interaction.type) {
       case 'mousedown':
         this._handleMouseDown(interaction);
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
index eb4285da7be7..aa5943c107a9 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
@@ -10,11 +10,14 @@
 import type {Interaction} from './useCanvasInteraction';
 import type {Size} from './geometry';
 
+import {createRef} from 'react';
 import memoize from 'memoize-one';
 
 import {View} from './View';
 import {zeroPoint} from './geometry';
 
+export type ViewRef = {|current: View | null|};
+
 // hidpi canvas: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
 function configureRetinaCanvas(canvas, height, width) {
   const dpr: number = window.devicePixelRatio || 1;
@@ -48,9 +51,13 @@ const getCanvasContext = memoize(
  */
 export class Surface {
   rootView: ?View;
+
   _context: ?CanvasRenderingContext2D;
   _canvasSize: ?Size;
 
+  _activeViewRef: ViewRef = createRef();
+  _hoveredViewRef: ViewRef = createRef();
+
   setCanvas(canvas: HTMLCanvasElement, canvasSize: Size) {
     this._context = getCanvasContext(
       canvas,
@@ -80,10 +87,28 @@ export class Surface {
     rootView.displayIfNeeded(_context);
   }
 
+  getCurrentCursor(): string | null {
+    const activeView = this._activeViewRef.current;
+    if (activeView !== null) {
+      return activeView.currentCursor;
+    } else {
+      const hoveredView = this._hoveredViewRef.current;
+      if (hoveredView !== null) {
+        return hoveredView.currentCursor;
+      }
+    }
+
+    return null;
+  }
+
   handleInteraction(interaction: Interaction) {
     if (!this.rootView) {
       return;
     }
-    this.rootView.handleInteractionAndPropagateToSubviews(interaction);
+    this.rootView.handleInteractionAndPropagateToSubviews(
+      interaction,
+      this._activeViewRef,
+      this._hoveredViewRef,
+    );
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
index d92a55b6fe57..678ed4ee18f4 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
@@ -10,6 +10,7 @@
 import type {Interaction} from './useCanvasInteraction';
 import type {Rect, Size} from './geometry';
 import type {Layouter} from './layouter';
+import type {ViewRef} from './Surface';
 
 import {Surface} from './Surface';
 import {
@@ -28,6 +29,8 @@ import {noopLayout, viewsToLayout, collapseLayoutIntoViews} from './layouter';
  * subclasses.
  */
 export class View {
+  currentCursor: string | null = null;
+
   surface: Surface;
 
   frame: Rect;
@@ -253,7 +256,11 @@ export class View {
   // Internal note: Do not call directly! Use
   // `handleInteractionAndPropagateToSubviews` so that interactions are
   // propagated to subviews.
-  handleInteraction(interaction: Interaction) {}
+  handleInteraction(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {}
 
   /**
    * Handle an `interaction` and propagates it to all of this view's
@@ -265,10 +272,18 @@ export class View {
    * @see handleInteraction
    * @protected
    */
-  handleInteractionAndPropagateToSubviews(interaction: Interaction) {
-    this.handleInteraction(interaction);
+  handleInteractionAndPropagateToSubviews(
+    interaction: Interaction,
+    activeViewRef: ViewRef,
+    hoveredViewRef: ViewRef,
+  ) {
+    this.handleInteraction(interaction, activeViewRef, hoveredViewRef);
     this.subviews.forEach(subview =>
-      subview.handleInteractionAndPropagateToSubviews(interaction),
+      subview.handleInteractionAndPropagateToSubviews(
+        interaction,
+        activeViewRef,
+        hoveredViewRef,
+      ),
     );
   }
 }

From d95434082f9fe0c612d20a6779e78b818154653b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 27 Jul 2021 14:34:05 -0400
Subject: [PATCH 0724/1603] Scheduling profiler: UX tweaks (#21971)

---
 .../src/CanvasPage.js                         |  2 +-
 .../src/content-views/FlamechartView.js       | 18 ++-----
 .../src/content-views/NativeEventsView.js     | 18 ++-----
 .../src/content-views/ReactEventsView.js      | 18 ++-----
 .../src/content-views/ReactMeasuresView.js    | 18 ++-----
 .../src/content-views/UserTimingMarksView.js  | 18 ++-----
 .../src/view-base/HorizontalPanAndZoomView.js | 42 +++++-----------
 .../src/view-base/ResizableSplitView.js       | 48 ++++++-------------
 .../src/view-base/Surface.js                  | 30 +++++++-----
 .../src/view-base/View.js                     | 19 ++------
 10 files changed, 75 insertions(+), 156 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 2fe64b0c5651..e1aca3eb640c 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -507,7 +507,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           );
         }}
       </ContextMenu>
-      {!isContextMenuShown && (
+      {!isContextMenuShown && !surfaceRef.current.hasActiveView() && (
         <EventTooltip
           data={data}
           hoveredEvent={hoveredEvent}
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index 99fbc761a008..d84a057dd291 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -17,7 +17,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -246,11 +246,7 @@ class FlamechartStackLayerView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {_stackLayer, frame, _intrinsicSize, _onHover, visibleArea} = this;
     const {location} = interaction.payload;
     if (!_onHover || !rectContainsPoint(location, visibleArea)) {
@@ -270,7 +266,7 @@ class FlamechartStackLayerView extends View {
       const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
       if (x <= location.x && x + width >= location.x) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         _onHover(flamechartStackFrame);
         return;
       }
@@ -287,14 +283,10 @@ class FlamechartStackLayerView extends View {
 
   _didGrab: boolean = false;
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
index 53905e249287..9e764e51993f 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -255,11 +255,7 @@ export class NativeEventsView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {frame, _intrinsicSize, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -290,7 +286,7 @@ export class NativeEventsView extends View {
         ) {
           this.currentCursor = 'pointer';
 
-          hoveredViewRef.current = this;
+          viewRefs.hoveredView = this;
 
           onHover(nativeEvent);
           return;
@@ -301,14 +297,10 @@ export class NativeEventsView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
index 2c2c1d5e9917..6d35a5f1ca64 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -231,11 +231,7 @@ export class ReactEventsView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {frame, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -271,7 +267,7 @@ export class ReactEventsView extends View {
         hoverTimestamp <= timestamp + eventTimestampAllowance
       ) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         onHover(event);
         return;
       }
@@ -280,14 +276,10 @@ export class ReactEventsView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index fc46a3b27047..9bd032b08139 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -256,11 +256,7 @@ export class ReactMeasuresView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {
       frame,
       _intrinsicSize,
@@ -311,7 +307,7 @@ export class ReactMeasuresView extends View {
         hoverTimestamp <= timestamp + duration
       ) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         onHover(measure);
         return;
       }
@@ -320,14 +316,10 @@ export class ReactMeasuresView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
index 7ac95c82253a..92c82c119d2e 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   Rect,
   Size,
-  ViewRef,
+  ViewRefs,
 } from '../view-base';
 
 import {
@@ -191,11 +191,7 @@ export class UserTimingMarksView extends View {
   /**
    * @private
    */
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const {frame, onHover, visibleArea} = this;
     if (!onHover) {
       return;
@@ -229,7 +225,7 @@ export class UserTimingMarksView extends View {
         hoverTimestamp <= timestamp + markTimestampAllowance
       ) {
         this.currentCursor = 'pointer';
-        hoveredViewRef.current = this;
+        viewRefs.hoveredView = this;
         onHover(mark);
         return;
       }
@@ -238,14 +234,10 @@ export class UserTimingMarksView extends View {
     onHover(null);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
index 706159ac40d1..8d8f427596ce 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
@@ -19,7 +19,7 @@ import type {
 } from './useCanvasInteraction';
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
-import type {ViewRef} from './Surface';
+import type {ViewRefs} from './Surface';
 
 import {Surface} from './Surface';
 import {View} from './View';
@@ -156,34 +156,26 @@ export class HorizontalPanAndZoomView extends View {
     this._setScrollState(newState);
   }
 
-  _handleMouseDown(
-    interaction: MouseDownInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {
     if (rectContainsPoint(interaction.payload.location, this.frame)) {
       this._isPanning = true;
 
-      activeViewRef.current = this;
+      viewRefs.activeView = this;
 
       this.currentCursor = 'grabbing';
     }
   }
 
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const isHovered = rectContainsPoint(
       interaction.payload.location,
       this.frame,
     );
     if (isHovered) {
-      hoveredViewRef.current = this;
+      viewRefs.hoveredView = this;
     }
 
-    if (activeViewRef.current === this) {
+    if (viewRefs.activeView === this) {
       this.currentCursor = 'grabbing';
     } else if (isHovered) {
       this.currentCursor = 'grab';
@@ -200,17 +192,13 @@ export class HorizontalPanAndZoomView extends View {
     this._setStateAndInformCallbacksIfChanged(newState);
   }
 
-  _handleMouseUp(
-    interaction: MouseUpInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
     if (this._isPanning) {
       this._isPanning = false;
     }
 
-    if (activeViewRef.current === this) {
-      activeViewRef.current = null;
+    if (viewRefs.activeView === this) {
+      viewRefs.activeView = null;
     }
   }
 
@@ -273,20 +261,16 @@ export class HorizontalPanAndZoomView extends View {
     this._setStateAndInformCallbacksIfChanged(newState);
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousedown':
-        this._handleMouseDown(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseDown(interaction, viewRefs);
         break;
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         break;
       case 'mouseup':
-        this._handleMouseUp(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseUp(interaction, viewRefs);
         break;
       case 'wheel-plain':
         this._handleWheelPlain(interaction);
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
index 3b9edde41e78..177fe5f2c76d 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
@@ -14,7 +14,7 @@ import type {
   MouseUpInteraction,
 } from './useCanvasInteraction';
 import type {Rect, Size} from './geometry';
-import type {ViewRef} from './Surface';
+import type {ViewRefs} from './Surface';
 
 import {COLORS} from '../content-views/constants';
 import nullthrows from 'nullthrows';
@@ -83,36 +83,28 @@ class ResizeBar extends View {
     this._updateColor();
   }
 
-  _handleMouseDown(
-    interaction: MouseDownInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseDown(interaction: MouseDownInteraction, viewRefs: ViewRefs) {
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
     );
     if (cursorInView) {
       this._setInteractionState('dragging');
-      activeViewRef.current = this;
+      viewRefs.activeView = this;
     }
   }
 
-  _handleMouseMove(
-    interaction: MouseMoveInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
     );
 
-    if (cursorInView || activeViewRef.current === this) {
+    if (cursorInView || viewRefs.activeView === this) {
       this.currentCursor = 'ns-resize';
     }
     if (cursorInView) {
-      hoveredViewRef.current = this;
+      viewRefs.hoveredView = this;
     }
 
     if (this._interactionState === 'dragging') {
@@ -121,11 +113,7 @@ class ResizeBar extends View {
     this._setInteractionState(cursorInView ? 'hovered' : 'normal');
   }
 
-  _handleMouseUp(
-    interaction: MouseUpInteraction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
@@ -134,25 +122,21 @@ class ResizeBar extends View {
       this._setInteractionState(cursorInView ? 'hovered' : 'normal');
     }
 
-    if (activeViewRef.current === this) {
-      activeViewRef.current = null;
+    if (viewRefs.activeView === this) {
+      viewRefs.activeView = null;
     }
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousedown':
-        this._handleMouseDown(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseDown(interaction, viewRefs);
         return;
       case 'mousemove':
-        this._handleMouseMove(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseMove(interaction, viewRefs);
         return;
       case 'mouseup':
-        this._handleMouseUp(interaction, activeViewRef, hoveredViewRef);
+        this._handleMouseUp(interaction, viewRefs);
         return;
     }
   }
@@ -339,11 +323,7 @@ export class ResizableSplitView extends View {
     }
   }
 
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousedown':
         this._handleMouseDown(interaction);
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
index aa5943c107a9..074cc0296f93 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
@@ -10,13 +10,15 @@
 import type {Interaction} from './useCanvasInteraction';
 import type {Size} from './geometry';
 
-import {createRef} from 'react';
 import memoize from 'memoize-one';
 
 import {View} from './View';
 import {zeroPoint} from './geometry';
 
-export type ViewRef = {|current: View | null|};
+export type ViewRefs = {|
+  activeView: View | null,
+  hoveredView: View | null,
+|};
 
 // hidpi canvas: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
 function configureRetinaCanvas(canvas, height, width) {
@@ -55,8 +57,14 @@ export class Surface {
   _context: ?CanvasRenderingContext2D;
   _canvasSize: ?Size;
 
-  _activeViewRef: ViewRef = createRef();
-  _hoveredViewRef: ViewRef = createRef();
+  _viewRefs: ViewRefs = {
+    activeView: null,
+    hoveredView: null,
+  };
+
+  hasActiveView(): boolean {
+    return this._viewRefs.activeView !== null;
+  }
 
   setCanvas(canvas: HTMLCanvasElement, canvasSize: Size) {
     this._context = getCanvasContext(
@@ -88,17 +96,14 @@ export class Surface {
   }
 
   getCurrentCursor(): string | null {
-    const activeView = this._activeViewRef.current;
+    const {activeView, hoveredView} = this._viewRefs;
     if (activeView !== null) {
       return activeView.currentCursor;
+    } else if (hoveredView !== null) {
+      return hoveredView.currentCursor;
     } else {
-      const hoveredView = this._hoveredViewRef.current;
-      if (hoveredView !== null) {
-        return hoveredView.currentCursor;
-      }
+      return null;
     }
-
-    return null;
   }
 
   handleInteraction(interaction: Interaction) {
@@ -107,8 +112,7 @@ export class Surface {
     }
     this.rootView.handleInteractionAndPropagateToSubviews(
       interaction,
-      this._activeViewRef,
-      this._hoveredViewRef,
+      this._viewRefs,
     );
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
index 678ed4ee18f4..e3461c10536d 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
@@ -10,7 +10,7 @@
 import type {Interaction} from './useCanvasInteraction';
 import type {Rect, Size} from './geometry';
 import type {Layouter} from './layouter';
-import type {ViewRef} from './Surface';
+import type {ViewRefs} from './Surface';
 
 import {Surface} from './Surface';
 import {
@@ -256,11 +256,7 @@ export class View {
   // Internal note: Do not call directly! Use
   // `handleInteractionAndPropagateToSubviews` so that interactions are
   // propagated to subviews.
-  handleInteraction(
-    interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
-  ) {}
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {}
 
   /**
    * Handle an `interaction` and propagates it to all of this view's
@@ -274,16 +270,11 @@ export class View {
    */
   handleInteractionAndPropagateToSubviews(
     interaction: Interaction,
-    activeViewRef: ViewRef,
-    hoveredViewRef: ViewRef,
+    viewRefs: ViewRefs,
   ) {
-    this.handleInteraction(interaction, activeViewRef, hoveredViewRef);
+    this.handleInteraction(interaction, viewRefs);
     this.subviews.forEach(subview =>
-      subview.handleInteractionAndPropagateToSubviews(
-        interaction,
-        activeViewRef,
-        hoveredViewRef,
-      ),
+      subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs),
     );
   }
 }

From cdccdbe1710dec6b954b2294d165da5671cf6443 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 27 Jul 2021 17:22:44 -0400
Subject: [PATCH 0725/1603] Display warnings in tooltips for native events that
 render sync updates (#21975)

---
 .../src/CanvasPage.js                         |  1 +
 .../src/EventTooltip.js                       | 24 +++++++++++++++++--
 .../src/content-views/NativeEventsView.js     | 11 +++++----
 .../src/import-worker/preprocessData.js       | 11 ++++++---
 .../src/types.js                              |  2 +-
 .../src/utils/useSmartTooltip.js              | 20 ++++++++++++----
 6 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index e1aca3eb640c..eb6b746dec0c 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -509,6 +509,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       </ContextMenu>
       {!isContextMenuShown && !surfaceRef.current.hasActiveView() && (
         <EventTooltip
+          canvasRef={canvasRef}
           data={data}
           hoveredEvent={hoveredEvent}
           origin={mouseLocation}
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index ee77c85cc8da..3e9f36e44acf 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -28,6 +28,7 @@ import useSmartTooltip from './utils/useSmartTooltip';
 import styles from './EventTooltip.css';
 
 type Props = {|
+  canvasRef: {|current: HTMLCanvasElement | null|},
   data: ReactProfilerData,
   hoveredEvent: ReactHoverContextInfo | null,
   origin: Point,
@@ -102,8 +103,14 @@ function getReactMeasureLabel(type): string | null {
   }
 }
 
-export default function EventTooltip({data, hoveredEvent, origin}: Props) {
+export default function EventTooltip({
+  canvasRef,
+  data,
+  hoveredEvent,
+  origin,
+}: Props) {
   const tooltipRef = useSmartTooltip({
+    canvasRef,
     mouseX: origin.x,
     mouseY: origin.y,
   });
@@ -209,7 +216,19 @@ const TooltipNativeEvent = ({
   nativeEvent: NativeEvent,
   tooltipRef: Return<typeof useRef>,
 }) => {
-  const {duration, timestamp, type} = nativeEvent;
+  const {duration, timestamp, type, warnings} = nativeEvent;
+
+  const warningElements = [];
+  if (warnings !== null) {
+    warnings.forEach((warning, index) => {
+      warningElements.push(
+        <Fragment key={index}>
+          <div className={styles.DetailsGridLabel}>Warning:</div>
+          <div>{warning}</div>
+        </Fragment>,
+      );
+    });
+  }
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
@@ -221,6 +240,7 @@ const TooltipNativeEvent = ({
         <div>{formatTimestamp(timestamp)}</div>
         <div className={styles.DetailsGridLabel}>Duration:</div>
         <div>{formatDuration(duration)}</div>
+        {warningElements}
       </div>
     </div>
   );
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
index 9e764e51993f..82371d2f2fce 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -128,7 +128,7 @@ export class NativeEventsView extends View {
     showHoverHighlight: boolean,
   ) {
     const {frame} = this;
-    const {depth, duration, highlight, timestamp, type} = event;
+    const {depth, duration, timestamp, type, warnings} = event;
 
     baseY += depth * ROW_WITH_BORDER_HEIGHT;
 
@@ -152,7 +152,7 @@ export class NativeEventsView extends View {
 
     const drawableRect = intersectionOfRects(eventRect, rect);
     context.beginPath();
-    if (highlight) {
+    if (warnings !== null) {
       context.fillStyle = showHoverHighlight
         ? COLORS.NATIVE_EVENT_WARNING_HOVER
         : COLORS.NATIVE_EVENT_WARNING;
@@ -182,9 +182,10 @@ export class NativeEventsView extends View {
       );
 
       if (trimmedName !== null) {
-        context.fillStyle = highlight
-          ? COLORS.NATIVE_EVENT_WARNING_TEXT
-          : COLORS.TEXT_COLOR;
+        context.fillStyle =
+          warnings !== null
+            ? COLORS.NATIVE_EVENT_WARNING_TEXT
+            : COLORS.TEXT_COLOR;
 
         context.fillText(
           trimmedName,
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index f3435745b37d..12a5bb644a33 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -202,9 +202,9 @@ function processTimelineEvent(
         const nativeEvent = {
           depth,
           duration,
-          highlight: false,
           timestamp,
           type,
+          warnings: null,
         };
 
         currentProfilerData.nativeEvents.push(nativeEvent);
@@ -339,8 +339,13 @@ function processTimelineEvent(
           const nativeEvent = nativeEventStack[i];
           const stopTime = nativeEvent.timestamp + nativeEvent.duration;
           if (stopTime > startTime) {
-            // Warn about sync updates that happen an event handler.
-            nativeEvent.highlight = true;
+            const warning =
+              'An event handler scheduled a synchronous update with React.';
+            if (nativeEvent.warnings === null) {
+              nativeEvent.warnings = new Set([warning]);
+            } else {
+              nativeEvent.warnings.add(warning);
+            }
           }
         }
       } else if (
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index ece7d6603415..eb2ef87d407a 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -24,9 +24,9 @@ export type ReactLane = number;
 export type NativeEvent = {|
   +depth: number,
   +duration: Milliseconds,
-  highlight: boolean,
   +timestamp: Milliseconds,
   +type: string,
+  warnings: Set<string> | null,
 |};
 
 type BaseReactEvent = {|
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js b/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
index 8acfd882cba4..4afe1fe99ead 100644
--- a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
@@ -12,22 +12,32 @@ import {useLayoutEffect, useRef} from 'react';
 const TOOLTIP_OFFSET = 4;
 
 export default function useSmartTooltip({
+  canvasRef,
   mouseX,
   mouseY,
 }: {
+  canvasRef: {|current: HTMLCanvasElement | null|},
   mouseX: number,
   mouseY: number,
 }) {
   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 + element.offsetHeight >=
-        window.innerHeight
-      ) {
+      if (mouseY + TOOLTIP_OFFSET + 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.
@@ -45,7 +55,7 @@ export default function useSmartTooltip({
       }
 
       // Now let's check the horizontal position.
-      if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= window.innerWidth) {
+      if (mouseX + TOOLTIP_OFFSET + 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

From 321087d1343638e2d45e53971a7d8c384549940b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 27 Jul 2021 21:53:37 -0400
Subject: [PATCH 0726/1603] [Fizz] Don't add aborted segments to the
 completedSegments list (#21976)

* Don't add aborted segments to the completedSegments list

* Update error message to include aborted status
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 31 +++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  | 28 +++++++++++------
 scripts/error-codes/codes.json                |  2 +-
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 75a821b224d0..6a5ba954bda3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1447,4 +1447,35 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([theError]);
   });
+
+  // @gate experimental
+  it('should be able to abort the fallback if the main content finishes first', async () => {
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <Suspense fallback={<Text text="Loading Outer" />}>
+          <div>
+            <Suspense
+              fallback={
+                <div>
+                  <AsyncText text="Loading" />
+                  Inner
+                </div>
+              }>
+              <AsyncText text="Hello" />
+            </Suspense>
+          </div>
+        </Suspense>,
+        writable,
+      );
+      startWriting();
+    });
+    expect(getVisibleChildren(container)).toEqual('Loading Outer');
+    // We should have received a partial segment containing the a partial of the fallback.
+    expect(container.innerHTML).toContain('Inner');
+    await act(async () => {
+      resolveText('Hello');
+    });
+    // We should've been able to display the content without waiting for the rest of the fallback.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+  });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 47a0d23fd738..4b7eb46d94b4 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1408,7 +1408,11 @@ function finishedTask(
       // This must have been the last segment we were waiting on. This boundary is now complete.
       if (segment.parentFlushed) {
         // Our parent segment already flushed, so we need to schedule this segment to be emitted.
-        boundary.completedSegments.push(segment);
+        // 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) {
+          boundary.completedSegments.push(segment);
+        }
       }
       if (boundary.parentFlushed) {
         // The segment might be part of a segment that didn't flush yet, but if the boundary's
@@ -1423,14 +1427,18 @@ function finishedTask(
     } else {
       if (segment.parentFlushed) {
         // Our parent already flushed, so we need to schedule this segment to be emitted.
-        const completedSegments = boundary.completedSegments;
-        completedSegments.push(segment);
-        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);
+        // 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) {
+          const completedSegments = boundary.completedSegments;
+          completedSegments.push(segment);
+          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);
+            }
           }
         }
       }
@@ -1570,7 +1578,7 @@ function flushSubtree(
     default: {
       invariant(
         false,
-        'Errored or already flushed boundaries should not be flushed again. This is a bug in React.',
+        'Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.',
       );
     }
   }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 38de792d6998..950598f4c71f 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -378,7 +378,7 @@
   "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": "Errored or already flushed boundaries should not be flushed again. 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.",

From 9f88b5355ba21e06e0a3c4442c5199de354ed1cf Mon Sep 17 00:00:00 2001
From: Piotr Szulc <ps347277@students.mimuw.edu.pl>
Date: Wed, 28 Jul 2021 15:29:13 +0200
Subject: [PATCH 0727/1603] Devtools: Display as link if value is in specified
 protocols (#21964)

---
 .../devtools/views/Components/KeyValue.css    |  8 ++++++++
 .../src/devtools/views/Components/KeyValue.js | 19 +++++++++++++++++++
 .../devtools/views/Components/constants.js    |  6 ++++++
 3 files changed, 33 insertions(+)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/constants.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
index bca22c8786c6..0f6bee239d3d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.css
@@ -32,6 +32,14 @@
   flex: 1;
 }
 
+.Link {
+  color: var(--color-link);
+  white-space: pre;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
 .None {
   color: var(--color-dimmer);
   font-style: italic;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 39ba220efbc1..be45bab429dd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -24,6 +24,7 @@ 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 {InspectedElementContext} from './InspectedElementContext';
+import {PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE} from './constants';
 
 import type {InspectedElement} from './types';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -243,6 +244,16 @@ export default function KeyValue({
       displayValue = 'undefined';
     }
 
+    let shouldDisplayValueAsLink = false;
+    if (
+      dataType === 'string' &&
+      PROTOCOLS_SUPPORTED_AS_LINKS_IN_KEY_VALUE.some(protocolPrefix =>
+        value.startsWith(protocolPrefix),
+      )
+    ) {
+      shouldDisplayValueAsLink = true;
+    }
+
     children = (
       <div
         key="root"
@@ -259,6 +270,14 @@ export default function KeyValue({
             path={path}
             value={value}
           />
+        ) : shouldDisplayValueAsLink ? (
+          <a
+            className={styles.Link}
+            href={value}
+            target="_blank"
+            rel="noopener noreferrer">
+            {displayValue}
+          </a>
         ) : (
           <span className={styles.Value}>{displayValue}</span>
         )}
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 000000000000..f1fa5e9dd5bb
--- /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://',
+];

From d9dd96530f366f0e9062095a513f1b04e71ffaf0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 28 Jul 2021 19:05:01 -0400
Subject: [PATCH 0728/1603] Added testing instructions to devtools contributing
 guide

---
 packages/react-devtools/CONTRIBUTING.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 9aff37907625..3b9302200961 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -1,3 +1,4 @@
+
 Intrested in contributing to React DevTools, but not sure where to start? This is the place!
 
 # Install project dependencies
@@ -63,6 +64,16 @@ This will launch a standalone version of Chrome with the locally built React Dev
 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__) and [here](https://github.com/facebook/react/tree/main/packages/react-devtools-extensions/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!
 

From 34308b5adaffaf27501ba7a934b95478ba0aa327 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 29 Jul 2021 09:59:59 -0400
Subject: [PATCH 0729/1603] Tidy up early bailout logic at start of begin phase
 (#21852)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Extract early bailout to separate function

This block is getting hard to read so I moved it to a separate function.
I'm about to refactor the logic that wraps around this path.

Ideally this early bailout path would happen before the begin phase
phase. Perhaps during reconcilation of the parent fiber's children.

* Extract state and context check to separate function

The only reason we pass `updateLanes` to some begin functions is to
check if we can perform an early bail out. But this is also available
as `current.lanes`, so we can read it from there instead.

I think the only reason we didn't do it this way originally is because
components that have two phases — error and Suspense boundaries —
use `workInProgress.lanes` to prevent a bail out, since during the
initial render there is no `current`. But we can check the `DidCapture`
flag instead, which we use elsewhere to detect the second phase.
---
 .../src/ReactFiberBeginWork.new.js            | 503 +++++++++---------
 .../src/ReactFiberBeginWork.old.js            | 503 +++++++++---------
 .../src/ReactFiberThrow.new.js                |   2 +
 .../src/ReactFiberThrow.old.js                |   2 +
 4 files changed, 520 insertions(+), 490 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 0b0c763e4fec..dd8ccc025cf4 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -414,7 +414,6 @@ function updateMemoComponent(
   workInProgress: Fiber,
   Component: any,
   nextProps: any,
-  updateLanes: Lanes,
   renderLanes: Lanes,
 ): null | Fiber {
   if (current === null) {
@@ -442,7 +441,6 @@ function updateMemoComponent(
         workInProgress,
         resolvedType,
         nextProps,
-        updateLanes,
         renderLanes,
       );
     }
@@ -487,7 +485,11 @@ function updateMemoComponent(
     }
   }
   const currentChild = ((current.child: any): Fiber); // This is always exactly one child
-  if (!includesSomeLane(updateLanes, renderLanes)) {
+  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;
@@ -512,7 +514,6 @@ function updateSimpleMemoComponent(
   workInProgress: Fiber,
   Component: any,
   nextProps: any,
-  updateLanes: Lanes,
   renderLanes: Lanes,
 ): null | Fiber {
   // TODO: current can be non-null here even if the component
@@ -558,7 +559,7 @@ function updateSimpleMemoComponent(
       (__DEV__ ? workInProgress.type === current.type : true)
     ) {
       didReceiveUpdate = false;
-      if (!includesSomeLane(renderLanes, updateLanes)) {
+      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
@@ -806,7 +807,6 @@ const updateLegacyHiddenComponent = updateOffscreenComponent;
 function updateCacheComponent(
   current: Fiber | null,
   workInProgress: Fiber,
-  updateLanes: Lanes,
   renderLanes: Lanes,
 ) {
   if (!enableCache) {
@@ -828,7 +828,7 @@ function updateCacheComponent(
     pushCacheProvider(workInProgress, freshCache);
   } else {
     // Check for updates
-    if (includesSomeLane(renderLanes, updateLanes)) {
+    if (includesSomeLane(current.lanes, renderLanes)) {
       cloneUpdateQueue(current, workInProgress);
       processUpdateQueue(workInProgress, null, null, renderLanes);
     }
@@ -1372,7 +1372,6 @@ function mountLazyComponent(
   _current,
   workInProgress,
   elementType,
-  updateLanes,
   renderLanes,
 ) {
   if (_current !== null) {
@@ -1462,7 +1461,6 @@ function mountLazyComponent(
         workInProgress,
         Component,
         resolveDefaultProps(Component.type, resolvedProps), // The inner type can have defaults too
-        updateLanes,
         renderLanes,
       );
       return child;
@@ -3347,13 +3345,241 @@ function remountFiber(
   }
 }
 
+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.
+  if (enableLazyContextPropagation) {
+    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);
+      if (enableCache) {
+        const root: FiberRoot = workInProgress.stateNode;
+        const cache: Cache = current.memoizedState.cache;
+        pushCacheProvider(workInProgress, cache);
+        pushRootCachePool(root);
+      }
+      resetHydrationState();
+      break;
+    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._context;
+      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) {
+          // 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 SuspenseComponent: {
+      const state: SuspenseState | null = workInProgress.memoizedState;
+      if (state !== null) {
+        if (enableSuspenseServerRenderer) {
+          if (state.dehydrated !== null) {
+            pushSuspenseContext(
+              workInProgress,
+              setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+            );
+            // We know that this component will suspend again because if it has
+            // been unsuspended it has committed as a resolved Suspense component.
+            // If it needs to be retried, it should have work scheduled on it.
+            workInProgress.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
+          pushSuspenseContext(
+            workInProgress,
+            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+          );
+          // 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 {
+        pushSuspenseContext(
+          workInProgress,
+          setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+        );
+      }
+      break;
+    }
+    case SuspenseListComponent: {
+      const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
+
+      let hasChildWork = includesSomeLane(
+        renderLanes,
+        workInProgress.childLanes,
+      );
+
+      if (enableLazyContextPropagation && !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;
+      }
+      pushSuspenseContext(workInProgress, suspenseStackCursor.current);
+
+      if (hasChildWork) {
+        break;
+      } else {
+        // If none of the children had any work, that means that none of
+        // them got retried so they'll still be blocked in the same way
+        // as before. We can fast bail out.
+        return null;
+      }
+    }
+    case OffscreenComponent:
+    case LegacyHiddenComponent: {
+      // 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);
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        const cache: Cache = current.memoizedState.cache;
+        pushCacheProvider(workInProgress, cache);
+      }
+      break;
+    }
+  }
+  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+}
+
 function beginWork(
   current: Fiber | null,
   workInProgress: Fiber,
   renderLanes: Lanes,
 ): Fiber | null {
-  let updateLanes = workInProgress.lanes;
-
   if (__DEV__) {
     if (workInProgress._debugNeedsRemount && current !== null) {
       // This will restart the begin phase with a new fiber.
@@ -3373,17 +3599,6 @@ function beginWork(
   }
 
   if (current !== null) {
-    // TODO: The factoring of this block is weird.
-    if (
-      enableLazyContextPropagation &&
-      !includesSomeLane(renderLanes, updateLanes)
-    ) {
-      const dependencies = current.dependencies;
-      if (dependencies !== null && checkIfContextChanged(dependencies)) {
-        updateLanes = mergeLanes(updateLanes, renderLanes);
-      }
-    }
-
     const oldProps = current.memoizedProps;
     const newProps = workInProgress.pendingProps;
 
@@ -3396,221 +3611,27 @@ function beginWork(
       // 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 if (!includesSomeLane(renderLanes, updateLanes)) {
-      didReceiveUpdate = false;
-      // 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);
-          if (enableCache) {
-            const root: FiberRoot = workInProgress.stateNode;
-            const cache: Cache = current.memoizedState.cache;
-            pushCacheProvider(workInProgress, cache);
-            pushRootCachePool(root);
-          }
-          resetHydrationState();
-          break;
-        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._context;
-          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) {
-              // 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 SuspenseComponent: {
-          const state: SuspenseState | null = workInProgress.memoizedState;
-          if (state !== null) {
-            if (enableSuspenseServerRenderer) {
-              if (state.dehydrated !== null) {
-                pushSuspenseContext(
-                  workInProgress,
-                  setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-                );
-                // We know that this component will suspend again because if it has
-                // been unsuspended it has committed as a resolved Suspense component.
-                // If it needs to be retried, it should have work scheduled on it.
-                workInProgress.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
-              pushSuspenseContext(
-                workInProgress,
-                setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-              );
-              // 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 {
-            pushSuspenseContext(
-              workInProgress,
-              setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-            );
-          }
-          break;
-        }
-        case SuspenseListComponent: {
-          const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
-
-          let hasChildWork = includesSomeLane(
-            renderLanes,
-            workInProgress.childLanes,
-          );
-
-          if (enableLazyContextPropagation && !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;
-          }
-          pushSuspenseContext(workInProgress, suspenseStackCursor.current);
-
-          if (hasChildWork) {
-            break;
-          } else {
-            // If none of the children had any work, that means that none of
-            // them got retried so they'll still be blocked in the same way
-            // as before. We can fast bail out.
-            return null;
-          }
-        }
-        case OffscreenComponent:
-        case LegacyHiddenComponent: {
-          // 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);
-        }
-        case CacheComponent: {
-          if (enableCache) {
-            const cache: Cache = current.memoizedState.cache;
-            pushCacheProvider(workInProgress, cache);
-          }
-          break;
-        }
-      }
-      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     } 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.
@@ -3649,7 +3670,6 @@ function beginWork(
         current,
         workInProgress,
         elementType,
-        updateLanes,
         renderLanes,
       );
     }
@@ -3742,7 +3762,6 @@ function beginWork(
         workInProgress,
         type,
         resolvedProps,
-        updateLanes,
         renderLanes,
       );
     }
@@ -3752,7 +3771,6 @@ function beginWork(
         workInProgress,
         workInProgress.type,
         workInProgress.pendingProps,
-        updateLanes,
         renderLanes,
       );
     }
@@ -3788,12 +3806,7 @@ function beginWork(
     }
     case CacheComponent: {
       if (enableCache) {
-        return updateCacheComponent(
-          current,
-          workInProgress,
-          updateLanes,
-          renderLanes,
-        );
+        return updateCacheComponent(current, workInProgress, renderLanes);
       }
       break;
     }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index c54fc312f97a..bae769b1ce7d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -414,7 +414,6 @@ function updateMemoComponent(
   workInProgress: Fiber,
   Component: any,
   nextProps: any,
-  updateLanes: Lanes,
   renderLanes: Lanes,
 ): null | Fiber {
   if (current === null) {
@@ -442,7 +441,6 @@ function updateMemoComponent(
         workInProgress,
         resolvedType,
         nextProps,
-        updateLanes,
         renderLanes,
       );
     }
@@ -487,7 +485,11 @@ function updateMemoComponent(
     }
   }
   const currentChild = ((current.child: any): Fiber); // This is always exactly one child
-  if (!includesSomeLane(updateLanes, renderLanes)) {
+  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;
@@ -512,7 +514,6 @@ function updateSimpleMemoComponent(
   workInProgress: Fiber,
   Component: any,
   nextProps: any,
-  updateLanes: Lanes,
   renderLanes: Lanes,
 ): null | Fiber {
   // TODO: current can be non-null here even if the component
@@ -558,7 +559,7 @@ function updateSimpleMemoComponent(
       (__DEV__ ? workInProgress.type === current.type : true)
     ) {
       didReceiveUpdate = false;
-      if (!includesSomeLane(renderLanes, updateLanes)) {
+      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
@@ -806,7 +807,6 @@ const updateLegacyHiddenComponent = updateOffscreenComponent;
 function updateCacheComponent(
   current: Fiber | null,
   workInProgress: Fiber,
-  updateLanes: Lanes,
   renderLanes: Lanes,
 ) {
   if (!enableCache) {
@@ -828,7 +828,7 @@ function updateCacheComponent(
     pushCacheProvider(workInProgress, freshCache);
   } else {
     // Check for updates
-    if (includesSomeLane(renderLanes, updateLanes)) {
+    if (includesSomeLane(current.lanes, renderLanes)) {
       cloneUpdateQueue(current, workInProgress);
       processUpdateQueue(workInProgress, null, null, renderLanes);
     }
@@ -1372,7 +1372,6 @@ function mountLazyComponent(
   _current,
   workInProgress,
   elementType,
-  updateLanes,
   renderLanes,
 ) {
   if (_current !== null) {
@@ -1462,7 +1461,6 @@ function mountLazyComponent(
         workInProgress,
         Component,
         resolveDefaultProps(Component.type, resolvedProps), // The inner type can have defaults too
-        updateLanes,
         renderLanes,
       );
       return child;
@@ -3347,13 +3345,241 @@ function remountFiber(
   }
 }
 
+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.
+  if (enableLazyContextPropagation) {
+    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);
+      if (enableCache) {
+        const root: FiberRoot = workInProgress.stateNode;
+        const cache: Cache = current.memoizedState.cache;
+        pushCacheProvider(workInProgress, cache);
+        pushRootCachePool(root);
+      }
+      resetHydrationState();
+      break;
+    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._context;
+      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) {
+          // 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 SuspenseComponent: {
+      const state: SuspenseState | null = workInProgress.memoizedState;
+      if (state !== null) {
+        if (enableSuspenseServerRenderer) {
+          if (state.dehydrated !== null) {
+            pushSuspenseContext(
+              workInProgress,
+              setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+            );
+            // We know that this component will suspend again because if it has
+            // been unsuspended it has committed as a resolved Suspense component.
+            // If it needs to be retried, it should have work scheduled on it.
+            workInProgress.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
+          pushSuspenseContext(
+            workInProgress,
+            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+          );
+          // 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 {
+        pushSuspenseContext(
+          workInProgress,
+          setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+        );
+      }
+      break;
+    }
+    case SuspenseListComponent: {
+      const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
+
+      let hasChildWork = includesSomeLane(
+        renderLanes,
+        workInProgress.childLanes,
+      );
+
+      if (enableLazyContextPropagation && !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;
+      }
+      pushSuspenseContext(workInProgress, suspenseStackCursor.current);
+
+      if (hasChildWork) {
+        break;
+      } else {
+        // If none of the children had any work, that means that none of
+        // them got retried so they'll still be blocked in the same way
+        // as before. We can fast bail out.
+        return null;
+      }
+    }
+    case OffscreenComponent:
+    case LegacyHiddenComponent: {
+      // 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);
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        const cache: Cache = current.memoizedState.cache;
+        pushCacheProvider(workInProgress, cache);
+      }
+      break;
+    }
+  }
+  return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+}
+
 function beginWork(
   current: Fiber | null,
   workInProgress: Fiber,
   renderLanes: Lanes,
 ): Fiber | null {
-  let updateLanes = workInProgress.lanes;
-
   if (__DEV__) {
     if (workInProgress._debugNeedsRemount && current !== null) {
       // This will restart the begin phase with a new fiber.
@@ -3373,17 +3599,6 @@ function beginWork(
   }
 
   if (current !== null) {
-    // TODO: The factoring of this block is weird.
-    if (
-      enableLazyContextPropagation &&
-      !includesSomeLane(renderLanes, updateLanes)
-    ) {
-      const dependencies = current.dependencies;
-      if (dependencies !== null && checkIfContextChanged(dependencies)) {
-        updateLanes = mergeLanes(updateLanes, renderLanes);
-      }
-    }
-
     const oldProps = current.memoizedProps;
     const newProps = workInProgress.pendingProps;
 
@@ -3396,221 +3611,27 @@ function beginWork(
       // 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 if (!includesSomeLane(renderLanes, updateLanes)) {
-      didReceiveUpdate = false;
-      // 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);
-          if (enableCache) {
-            const root: FiberRoot = workInProgress.stateNode;
-            const cache: Cache = current.memoizedState.cache;
-            pushCacheProvider(workInProgress, cache);
-            pushRootCachePool(root);
-          }
-          resetHydrationState();
-          break;
-        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._context;
-          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) {
-              // 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 SuspenseComponent: {
-          const state: SuspenseState | null = workInProgress.memoizedState;
-          if (state !== null) {
-            if (enableSuspenseServerRenderer) {
-              if (state.dehydrated !== null) {
-                pushSuspenseContext(
-                  workInProgress,
-                  setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-                );
-                // We know that this component will suspend again because if it has
-                // been unsuspended it has committed as a resolved Suspense component.
-                // If it needs to be retried, it should have work scheduled on it.
-                workInProgress.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
-              pushSuspenseContext(
-                workInProgress,
-                setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-              );
-              // 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 {
-            pushSuspenseContext(
-              workInProgress,
-              setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-            );
-          }
-          break;
-        }
-        case SuspenseListComponent: {
-          const didSuspendBefore = (current.flags & DidCapture) !== NoFlags;
-
-          let hasChildWork = includesSomeLane(
-            renderLanes,
-            workInProgress.childLanes,
-          );
-
-          if (enableLazyContextPropagation && !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;
-          }
-          pushSuspenseContext(workInProgress, suspenseStackCursor.current);
-
-          if (hasChildWork) {
-            break;
-          } else {
-            // If none of the children had any work, that means that none of
-            // them got retried so they'll still be blocked in the same way
-            // as before. We can fast bail out.
-            return null;
-          }
-        }
-        case OffscreenComponent:
-        case LegacyHiddenComponent: {
-          // 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);
-        }
-        case CacheComponent: {
-          if (enableCache) {
-            const cache: Cache = current.memoizedState.cache;
-            pushCacheProvider(workInProgress, cache);
-          }
-          break;
-        }
-      }
-      return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
     } 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.
@@ -3649,7 +3670,6 @@ function beginWork(
         current,
         workInProgress,
         elementType,
-        updateLanes,
         renderLanes,
       );
     }
@@ -3742,7 +3762,6 @@ function beginWork(
         workInProgress,
         type,
         resolvedProps,
-        updateLanes,
         renderLanes,
       );
     }
@@ -3752,7 +3771,6 @@ function beginWork(
         workInProgress,
         workInProgress.type,
         workInProgress.pendingProps,
-        updateLanes,
         renderLanes,
       );
     }
@@ -3788,12 +3806,7 @@ function beginWork(
     }
     case CacheComponent: {
       if (enableCache) {
-        return updateCacheComponent(
-          current,
-          workInProgress,
-          updateLanes,
-          renderLanes,
-        );
+        return updateCacheComponent(current, workInProgress, renderLanes);
       }
       break;
     }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 398ae98abef6..874340a1eeaf 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -383,6 +383,8 @@ function throwException(
         attachPingListener(root, wakeable, rootRenderLanes);
 
         workInProgress.flags |= ShouldCapture;
+        // TODO: I think we can remove this, since we now use `DidCapture` in
+        // the begin phase to prevent an early bailout.
         workInProgress.lanes = rootRenderLanes;
 
         return;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 42e255793857..db11692c6ce3 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -383,6 +383,8 @@ function throwException(
         attachPingListener(root, wakeable, rootRenderLanes);
 
         workInProgress.flags |= ShouldCapture;
+        // TODO: I think we can remove this, since we now use `DidCapture` in
+        // the begin phase to prevent an early bailout.
         workInProgress.lanes = rootRenderLanes;
 
         return;

From 6f3fcbd6fac90d97f48a4c6e270b2124a333d714 Mon Sep 17 00:00:00 2001
From: Shubham Pandey <shubham9411@gmail.com>
Date: Fri, 30 Jul 2021 18:26:55 +0530
Subject: [PATCH 0730/1603] Some remaining instances of master to main (#21982)

Co-authored-by: Shubham Pandey <shubham.pandey@mfine.co>
---
 fixtures/attribute-behavior/README.md                     | 2 +-
 fixtures/concurrent/time-slicing/README.md                | 2 +-
 fixtures/devtools/regression/shared.js                    | 2 +-
 .../flow-typed/npm/react-test-renderer_v16.x.x.js         | 2 +-
 .../src/__tests__/profilingCache-test.js                  | 8 ++++----
 packages/react-devtools/CHANGELOG.md                      | 2 +-
 scripts/error-codes/extract-errors.js                     | 2 +-
 7 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/fixtures/attribute-behavior/README.md b/fixtures/attribute-behavior/README.md
index fbf2acfb5230..2411462f11aa 100644
--- a/fixtures/attribute-behavior/README.md
+++ b/fixtures/attribute-behavior/README.md
@@ -28,4 +28,4 @@ Right now, we use a purple outline to call out cases where the assigned property
 
 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/master/packages/cra-template/template/README.md).
+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/concurrent/time-slicing/README.md b/fixtures/concurrent/time-slicing/README.md
index a61670e8512d..2c2b90faa6cb 100644
--- a/fixtures/concurrent/time-slicing/README.md
+++ b/fixtures/concurrent/time-slicing/README.md
@@ -10,7 +10,7 @@ It depends on a local build of React and enables us to easily test async "time s
 
 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 master 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.
+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?
 
diff --git a/fixtures/devtools/regression/shared.js b/fixtures/devtools/regression/shared.js
index 055ba3d65e55..0010fd7ebbb5 100644
--- a/fixtures/devtools/regression/shared.js
+++ b/fixtures/devtools/regression/shared.js
@@ -32,7 +32,7 @@ if (typeof SchedulerTracing !== 'undefined') {
   trace = (_, __, callback) => callback();
 }
 
-// https://github.com/facebook/react/blob/master/CHANGELOG.md
+// https://github.com/facebook/react/blob/main/CHANGELOG.md
 switch (major) {
   case 16:
     switch (minor) {
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
index 585b215bf68e..cd2ae506d2ef 100644
--- 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
@@ -2,7 +2,7 @@
 // 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/main/types/react-test-renderer
+// Ported from: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-test-renderer
 
 'use strict';
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 2cf31e867b57..ace43294e931 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -672,7 +672,7 @@ describe('ProfilingCache', () => {
 
     const About = () => <div>About</div>;
 
-    // Mimics https://github.com/ReactTraining/react-router/blob/main/packages/react-router/modules/Router.js
+    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js
     function Router({children}) {
       const [path, setPath] = React.useState('/');
       return (
@@ -682,7 +682,7 @@ describe('ProfilingCache', () => {
       );
     }
 
-    // Mimics https://github.com/ReactTraining/react-router/blob/main/packages/react-router/modules/Switch.js
+    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Switch.js
     function Switch({children}) {
       return (
         <RouterContext.Consumer>
@@ -699,14 +699,14 @@ describe('ProfilingCache', () => {
       );
     }
 
-    // Mimics https://github.com/ReactTraining/react-router/blob/main/packages/react-router/modules/Route.js
+    // 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/main/packages/react-router-dom/modules/Link.js
+    // Mimics https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/Link.js
     function Link({children, path}) {
       return (
         <RouterContext.Consumer>
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index c3c92ea8e061..86aa2e2e61a8 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -66,7 +66,7 @@
 * 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/master/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:
+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">
     
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
index 4541a3eeeab6..58823cbe1687 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -18,7 +18,7 @@ const babylonOptions = {
   // As a parser, babylon has its own options and we can't directly
   // import/require a babel preset. It should be kept **the same** as
   // the `babel-plugin-syntax-*` ones specified in
-  // https://github.com/facebook/fbjs/blob/main/packages/babel-preset-fbjs/configure.js
+  // https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
   plugins: [
     'classProperties',
     'flow',

From f0d354efc60633800aa30555ab5d890bcdfac0ae Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 30 Jul 2021 15:47:40 -0400
Subject: [PATCH 0731/1603] [Fabric] Fix reparenting bug in legacy Suspense
 mount (#21995)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add reparenting invariant to React Noop

Fabric does not allow nodes to be reparented, so I added the equivalent
invariant to React Noop's so we can catch regressions.

This causes some tests to fail, which I'll fix in the next step.

* Fix: Use getOffscreenContainerProps

The type of these props is different per renderer. An oversight
from #21960. Unfortunately wasn't caught by Flow because fiber props
are `any`-typed.

* [Fabric] Fix reparenting in legacy Suspense mount

Fixes a weird case during legacy Suspense mount where the offscreen host
container of a tree that suspends during initial mount is recreated
instead of cloned, since there's no current fiber to clone from.

Fabric considers this a reparent even though the parent from the first
pass never committed.

Instead we can override the props from the first pass before the
container completes. It's a bit of a hack, but no more so than the rest
of the legacy root Suspense implementation — the hacks are designed
to make it usable by non-strict mode-compliant trees.
---
 .../src/createReactNoop.js                    | 42 +++++++++++++++++++
 .../src/ReactFiberBeginWork.new.js            | 22 ++--------
 .../src/ReactFiberBeginWork.old.js            | 22 ++--------
 .../src/ReactFiberThrow.new.js                | 24 +++++++++++
 .../src/ReactFiberThrow.old.js                | 24 +++++++++++
 5 files changed, 96 insertions(+), 38 deletions(-)

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index f6af7341c2e0..bc31a1c7c3ca 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -48,6 +48,7 @@ type Props = {
 type Instance = {|
   type: string,
   id: number,
+  parent: number,
   children: Array<Instance | TextInstance>,
   text: string | null,
   prop: any,
@@ -57,6 +58,7 @@ type Instance = {|
 type TextInstance = {|
   text: string,
   id: number,
+  parent: number,
   hidden: boolean,
   context: HostContext,
 |};
@@ -80,6 +82,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     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);
@@ -211,6 +218,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     const clone = {
       id: instance.id,
       type: type,
+      parent: instance.parent,
       children: keepChildren ? instance.children : [],
       text: shouldSetTextContent(type, newProps)
         ? computeText((newProps.children: any) + '', instance.context)
@@ -223,6 +231,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       value: clone.id,
       enumerable: false,
     });
+    Object.defineProperty(clone, 'parent', {
+      value: clone.parent,
+      enumerable: false,
+    });
     Object.defineProperty(clone, 'text', {
       value: clone.text,
       enumerable: false,
@@ -285,6 +297,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         id: instanceCounter++,
         type: type,
         children: [],
+        parent: -1,
         text: shouldSetTextContent(type, props)
           ? computeText((props.children: any) + '', hostContext)
           : null,
@@ -294,6 +307,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       };
       // 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,
@@ -313,6 +330,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       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);
     },
 
@@ -357,11 +379,16 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       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,
@@ -682,6 +709,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
             const offscreenTextInstance: TextInstance = {
               text: instance.text,
               id: instanceCounter++,
+              parent: instance.parent,
               hidden: hideNearestNode || instance.hidden,
               context: instance.context,
             };
@@ -690,6 +718,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
               value: offscreenTextInstance.id,
               enumerable: false,
             });
+            Object.defineProperty(offscreenTextInstance, 'parent', {
+              value: offscreenTextInstance.parent,
+              enumerable: false,
+            });
             Object.defineProperty(offscreenTextInstance, 'context', {
               value: offscreenTextInstance.context,
               enumerable: false,
@@ -725,6 +757,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
             const clone: Instance = {
               id: instance.id,
               type: instance.type,
+              parent: instance.parent,
               children: clonedChildren,
               text: instance.text,
               prop: instance.prop,
@@ -735,6 +768,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
               value: clone.id,
               enumerable: false,
             });
+            Object.defineProperty(clone, 'parent', {
+              value: clone.parent,
+              enumerable: false,
+            });
             Object.defineProperty(clone, 'text', {
               value: clone.text,
               enumerable: false,
@@ -754,6 +791,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           const clone = {
             text: textInstance.text,
             id: textInstance.id,
+            parent: textInstance.parent,
             hidden: textInstance.hidden || hideNearestNode,
             context: textInstance.context,
           };
@@ -761,6 +799,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
             value: clone.id,
             enumerable: false,
           });
+          Object.defineProperty(clone, 'parent', {
+            value: clone.parent,
+            enumerable: false,
+          });
           Object.defineProperty(clone, 'context', {
             value: clone.context,
             enumerable: false,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index dd8ccc025cf4..2321b97ff89e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2212,21 +2212,6 @@ function mountSuspenseFallbackChildren(
     primaryChildFragment.childLanes = NoLanes;
     primaryChildFragment.pendingProps = primaryChildProps;
 
-    if (
-      supportsPersistence &&
-      (workInProgress.mode & ConcurrentMode) === NoMode
-    ) {
-      const isHidden = true;
-      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
-      const containerProps = {
-        hidden: isHidden,
-        primaryChildren,
-      };
-      offscreenContainer.pendingProps = containerProps;
-      offscreenContainer.memoizedProps = containerProps;
-      completeSuspendedOffscreenHostContainer(null, offscreenContainer);
-    }
-
     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
@@ -2373,13 +2358,12 @@ function updateSuspenseFallbackChildren(
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
-      const isHidden = true;
       const currentOffscreenContainer = currentPrimaryChildFragment.child;
       const offscreenContainer: Fiber = (primaryChildFragment.child: any);
-      const containerProps = {
-        hidden: isHidden,
+      const containerProps = getOffscreenContainerProps(
+        'hidden',
         primaryChildren,
-      };
+      );
       offscreenContainer.pendingProps = containerProps;
       offscreenContainer.memoizedProps = containerProps;
       completeSuspendedOffscreenHostContainer(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index bae769b1ce7d..dc66340f70a5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2212,21 +2212,6 @@ function mountSuspenseFallbackChildren(
     primaryChildFragment.childLanes = NoLanes;
     primaryChildFragment.pendingProps = primaryChildProps;
 
-    if (
-      supportsPersistence &&
-      (workInProgress.mode & ConcurrentMode) === NoMode
-    ) {
-      const isHidden = true;
-      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
-      const containerProps = {
-        hidden: isHidden,
-        primaryChildren,
-      };
-      offscreenContainer.pendingProps = containerProps;
-      offscreenContainer.memoizedProps = containerProps;
-      completeSuspendedOffscreenHostContainer(null, offscreenContainer);
-    }
-
     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
@@ -2373,13 +2358,12 @@ function updateSuspenseFallbackChildren(
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
-      const isHidden = true;
       const currentOffscreenContainer = currentPrimaryChildFragment.child;
       const offscreenContainer: Fiber = (primaryChildFragment.child: any);
-      const containerProps = {
-        hidden: isHidden,
+      const containerProps = getOffscreenContainerProps(
+        'hidden',
         primaryChildren,
-      };
+      );
       offscreenContainer.pendingProps = containerProps;
       offscreenContainer.memoizedProps = containerProps;
       completeSuspendedOffscreenHostContainer(
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 874340a1eeaf..e7816b017e47 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -33,6 +33,10 @@ import {
   LifecycleEffectMask,
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
+import {
+  supportsPersistence,
+  getOffscreenContainerProps,
+} from './ReactFiberHostConfig';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -313,6 +317,26 @@ function throwException(
           // all lifecycle effect tags.
           sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
+          if (supportsPersistence) {
+            // Another legacy Suspense quirk. In persistent mode, if this is the
+            // initial mount, override the props of the host container to hide
+            // its contents.
+            const currentSuspenseBoundary = workInProgress.alternate;
+            if (currentSuspenseBoundary === null) {
+              const offscreenFiber: Fiber = (workInProgress.child: any);
+              const offscreenContainer = offscreenFiber.child;
+              if (offscreenContainer !== null) {
+                const children = offscreenContainer.memoizedProps.children;
+                const containerProps = getOffscreenContainerProps(
+                  'hidden',
+                  children,
+                );
+                offscreenContainer.pendingProps = containerProps;
+                offscreenContainer.memoizedProps = containerProps;
+              }
+            }
+          }
+
           if (sourceFiber.tag === ClassComponent) {
             const currentSourceFiber = sourceFiber.alternate;
             if (currentSourceFiber === null) {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index db11692c6ce3..70fda7bef55c 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -33,6 +33,10 @@ import {
   LifecycleEffectMask,
   ForceUpdateForLegacySuspense,
 } from './ReactFiberFlags';
+import {
+  supportsPersistence,
+  getOffscreenContainerProps,
+} from './ReactFiberHostConfig';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -313,6 +317,26 @@ function throwException(
           // all lifecycle effect tags.
           sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
+          if (supportsPersistence) {
+            // Another legacy Suspense quirk. In persistent mode, if this is the
+            // initial mount, override the props of the host container to hide
+            // its contents.
+            const currentSuspenseBoundary = workInProgress.alternate;
+            if (currentSuspenseBoundary === null) {
+              const offscreenFiber: Fiber = (workInProgress.child: any);
+              const offscreenContainer = offscreenFiber.child;
+              if (offscreenContainer !== null) {
+                const children = offscreenContainer.memoizedProps.children;
+                const containerProps = getOffscreenContainerProps(
+                  'hidden',
+                  children,
+                );
+                offscreenContainer.pendingProps = containerProps;
+                offscreenContainer.memoizedProps = containerProps;
+              }
+            }
+          }
+
           if (sourceFiber.tag === ClassComponent) {
             const currentSourceFiber = sourceFiber.alternate;
             if (currentSourceFiber === null) {

From b537247678ea44399573088b74f4cf11b8114743 Mon Sep 17 00:00:00 2001
From: Juan <juans.tejada@gmail.com>
Date: Fri, 30 Jul 2021 17:10:46 -0400
Subject: [PATCH 0732/1603] New devtools test for named hooks verifying case
 when hooks are used indirectly (#21996)

## Summary
Adds a new unit test to `parseHookNames-test` which verifies that we correctly give names to hooks when they are used indirectly:

e.g.
```
  const countState = useState(0);
  const count = countState[0];
  const setCount = countState[1];
```

Should produce `count` as the name.

## Test plan

```
yarn test
yarn test-build-devtools
yarn test-build-devtools parseHookNames
```
---
 .../ComponentUsingHooksIndirectly.js          | 44 ++++++++++++++
 .../__source__/__compiled__/bundle/index.js   | 59 +++++++++++++++----
 .../__compiled__/bundle/index.js.map          |  2 +-
 .../external/ComponentUsingHooksIndirectly.js | 45 ++++++++++++++
 .../ComponentUsingHooksIndirectly.js.map      |  1 +
 .../__source__/__compiled__/external/index.js |  8 +++
 .../__compiled__/external/index.js.map        |  2 +-
 .../inline/ComponentUsingHooksIndirectly.js   | 45 ++++++++++++++
 .../__source__/__compiled__/inline/index.js   | 10 +++-
 .../ComponentUsingHooksIndirectly.js          | 45 ++++++++++++++
 .../__compiled__/no-columns/index.js          | 10 +++-
 .../ComponentUsingHooksIndirectly.js          | 41 +++++++++++++
 .../src/__tests__/__source__/index.js         |  1 +
 .../src/__tests__/parseHookNames-test.js      | 33 +++++++++++
 14 files changed, 329 insertions(+), 17 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js

diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..869ba3f8ae70
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import React, {useEffect, 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-extensions/src/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
index 83756f2fce61..5c586ae7b229 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
@@ -16,8 +16,11 @@ var React__default = _interopDefault(React);
  * @flow
  */
 function Component() {
-  const [count, setCount] = React.useState(0);
-  const isDarkMode = useIsDarkMode();
+  const countState = React.useState(0);
+  const count = countState[0];
+  const setCount = countState[1];
+  const darkMode = useIsDarkMode();
+  const [isDarkMode] = darkMode;
   React.useEffect(() => {// ...
   }, []);
 
@@ -29,6 +32,35 @@ function Component() {
 }
 
 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, () => {}];
+}
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component$1() {
+  const [count, setCount] = React.useState(0);
+  const isDarkMode = useIsDarkMode$1();
+  React.useEffect(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", null, "Count: ", count), /*#__PURE__*/React__default.createElement("button", {
+    onClick: handleClick
+  }, "Update count"));
+}
+
+function useIsDarkMode$1() {
   const [isDarkMode] = React.useState(false);
   React.useEffect(function useEffectCreate() {// Here is where we may listen to a "theme" event...
   }, []);
@@ -58,7 +90,7 @@ function useTheme() {
  *
  * @flow
  */
-function Component$1() {
+function Component$2() {
   const theme = useTheme();
   return /*#__PURE__*/React__default.createElement("div", null, "theme: ", theme);
 }
@@ -73,7 +105,7 @@ function Component$1() {
  */
 const A = /*#__PURE__*/React.createContext(1);
 const B = /*#__PURE__*/React.createContext(2);
-function Component$2() {
+function Component$3() {
   const a = React.useContext(A);
   const b = React.useContext(B); // prettier-ignore
 
@@ -92,7 +124,7 @@ function Component$2() {
  * @flow
  */
 
-function Component$3() {
+function Component$4() {
   const [count, setCount] = React.useState(0);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
     onClick: () => setCount(count + 1)
@@ -107,7 +139,7 @@ function Component$3() {
  *
  * @flow
  */
-function Component$4() {
+function Component$5() {
   const [count, setCount] = React.useState(0);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
     onClick: () => setCount(count + 1)
@@ -122,7 +154,7 @@ function Component$4() {
  *
  * @flow
  */
-function Component$5() {
+function Component$6() {
   const [count] = require('react').useState(0);
 
   return count;
@@ -225,12 +257,13 @@ var ToDoList = /*#__PURE__*/Object.freeze({
   List: List
 });
 
-exports.ComponentWithCustomHook = Component;
-exports.ComponentWithExternalCustomHooks = Component$1;
-exports.ComponentWithMultipleHooksPerLine = Component$2;
-exports.ContainingStringSourceMappingURL = Component$3;
-exports.Example = Component$4;
-exports.InlineRequire = Component$5;
+exports.ComponentUsingHooksIndirectly = Component;
+exports.ComponentWithCustomHook = Component$1;
+exports.ComponentWithExternalCustomHooks = Component$2;
+exports.ComponentWithMultipleHooksPerLine = Component$3;
+exports.ContainingStringSourceMappingURL = Component$4;
+exports.Example = Component$5;
+exports.InlineRequire = Component$6;
 exports.ToDoList = ToDoList;
 exports.useTheme = useTheme;
 //# sourceMappingURL=index.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
index 2d9958a997aa..3b192b372c5f 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../ComponentWithMultipleHooksPerLine.js","../../ContainingStringSourceMappingURL.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","count","setCount","useState","isDarkMode","useIsDarkMode","useEffect","handleClick","React","useEffectCreate","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","A","B","a","b","c","d","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEAC,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBJ,UAAjB,CADF,eAEEI,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASF,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAeD,cAAQ,CAAC,KAAD,CAA7B;AAEAG,EAAAA,eAAS,CAAC,SAASG,eAAT,GAA2B;AAEpC,GAFQ,EAEN,EAFM,CAAT;AAIA,SAAOL,UAAP;AACD;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAASb,WAAT,GAAqB;AAC1B,QAAMa,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOJ,qDAAaK,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASX,WAAT,GAAqB;AAC1B,QAAMkB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;AASA;AAIA,AAAO,SAASrB,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoBC,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEK,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASD,WAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,IAAUqB,OAAO,CAAC,OAAD,CAAP,CAAiBnB,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOF,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASsB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCjC,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAACkC,KAAD,EAAQC,QAAR,IAAoBnC,cAAQ,CAAC,CACjC;AAACoC,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgBtC,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMI,WAAW,GAAGqB,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBrC,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMsC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAE5B;AAA/C,kBACEuB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"version":3,"file":"index.js","sources":["../../ComponentUsingHooksIndirectly.js","../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../ComponentWithMultipleHooksPerLine.js","../../ContainingStringSourceMappingURL.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","A","B","a","b","c","d","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;AC3CD;;;;;;;;AASA,AAEO,SAASP,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMK,UAAU,GAAGD,eAAa,EAAhC;AAEAE,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;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;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAAShB,WAAT,GAAqB;AAC1B,QAAMgB,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOL,qDAAaM,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASd,WAAT,GAAqB;AAC1B,QAAMqB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;AASA;AAIA,AAAO,SAASxB,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,IAAUsB,OAAO,CAAC,OAAD,CAAP,CAAiBvB,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOC,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASuB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCrC,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAACsC,KAAD,EAAQC,QAAR,IAAoBvC,cAAQ,CAAC,CACjC;AAACwC,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB1C,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMO,WAAW,GAAGsB,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBtC,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMuC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAE7B;AAA/C,kBACEwB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..6925712d17c7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 000000000000..1ab656bae7c8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
index e82af34d8b17..87af63cad0e4 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
@@ -3,6 +3,12 @@
 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 () {
@@ -47,6 +53,8 @@ Object.defineProperty(exports, "useTheme", {
 });
 exports.ToDoList = void 0;
 
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
 var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
 
 var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
index 4fea58e1227c..25adf562046c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 ComponentWithCustomHook} from './ComponentWithCustomHook';\nexport {Component as ComponentWithExternalCustomHooks} from './ComponentWithExternalCustomHooks';\nexport {Component as ComponentWithMultipleHooksPerLine} from './ComponentWithMultipleHooksPerLine';\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
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 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-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..48e0dcdfca8e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
index 186ab68d95aa..a15995f05bdf 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
@@ -3,6 +3,12 @@
 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 () {
@@ -47,6 +53,8 @@ Object.defineProperty(exports, "useTheme", {
 });
 exports.ToDoList = void 0;
 
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
 var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
 
 var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
@@ -70,4 +78,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..070a9cc7232c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBQyxVQUFBLEdBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsS0FBQSxHQUFBRCxVQUFBLENBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUUsUUFBQSxHQUFBRixVQUFBLENBQUEsQ0FBQSxDQUFBO0FBRUEsUUFBQUcsUUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFDQSxRQUFBLENBQUFDLFVBQUEsSUFBQUYsUUFBQTtBQUVBLHdCQUFBLE1BQUEsQ0FDQTtBQUNBLEdBRkEsRUFFQSxFQUZBOztBQUlBLFFBQUFHLFdBQUEsR0FBQSxNQUFBSixRQUFBLENBQUFELEtBQUEsR0FBQSxDQUFBLENBQUE7O0FBRUEsc0JBQ0EseUVBQ0EseURBQUFJLFVBQUEsQ0FEQSxlQUVBLHFEQUFBSixLQUFBLENBRkEsZUFHQTtBQUFBLElBQUEsT0FBQSxFQUFBSztBQUFBLG9CQUhBLENBREE7QUFPQTs7QUFFQSxTQUFBRixhQUFBLEdBQUE7QUFDQSxRQUFBRyxhQUFBLEdBQUEscUJBQUEsS0FBQSxDQUFBO0FBQ0EsUUFBQSxDQUFBRixVQUFBLElBQUFFLGFBQUE7QUFFQSx3QkFBQSxTQUFBQyxlQUFBLEdBQUEsQ0FDQTtBQUNBLEdBRkEsRUFFQSxFQUZBO0FBSUEsU0FBQSxDQUFBSCxVQUFBLEVBQUEsTUFBQSxDQUFBLENBQUEsQ0FBQTtBQUNBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
index 186ab68d95aa..a15995f05bdf 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
@@ -3,6 +3,12 @@
 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 () {
@@ -47,6 +53,8 @@ Object.defineProperty(exports, "useTheme", {
 });
 exports.ToDoList = void 0;
 
+var _ComponentUsingHooksIndirectly = require("./ComponentUsingHooksIndirectly");
+
 var _ComponentWithCustomHook = require("./ComponentWithCustomHook");
 
 var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHooks");
@@ -70,4 +78,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..25204dbc6174
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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-extensions/src/__tests__/__source__/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
index eca1ff83d71d..c57a616d227d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
@@ -7,6 +7,7 @@
  * @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';
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 67e57871e4a1..f730b27f914c 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -145,6 +145,13 @@ describe('parseHookNames', () => {
     ]);
   });
 
+  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 return null for custom hooks without explicit names', async () => {
     const Component = require('./__source__/__untransformed__/ComponentWithUnnamedCustomHooks')
       .Component;
@@ -228,6 +235,32 @@ describe('parseHookNames', () => {
       ); // simulated Webpack 'cheap-module-source-map'
     });
 
+    it('should work when code is using hooks indirectly', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'darkMode', // useDarkMode()
+          'isDarkMode', // useState()
+        ]);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/ComponentUsingHooksIndirectly',
+      ); // inline source map
+      await test(
+        './__source__/__compiled__/external/ComponentUsingHooksIndirectly',
+      ); // external source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ComponentUsingHooksIndirectly',
+      ); // bundle source map
+      await test(
+        './__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
     it('should work for external hooks', async () => {
       async function test(path, name = 'Component') {
         const Component = require(path)[name];

From 27bf6f9a832e4ccc20cfb5a81850ae8d4cc2f92b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 2 Aug 2021 09:23:48 -0400
Subject: [PATCH 0733/1603] Scheduling profiler UX changes (#21990)

---
 .../src/CanvasPage.js                         | 279 ++++++++----
 .../src/EventTooltip.css                      |  47 +-
 .../src/EventTooltip.js                       | 342 +++++++-------
 .../src/SchedulingProfiler.js                 |  14 +-
 .../src/content-views/FlamechartView.js       | 102 +----
 .../src/content-views/NativeEventsView.js     |  85 +---
 .../src/content-views/ReactMeasuresView.js    |  18 +-
 ...tEventsView.js => SchedulingEventsView.js} |  93 ++--
 .../src/content-views/SuspenseEventsView.js   | 368 +++++++++++++++
 .../src/content-views/UserTimingMarksView.js  |   8 +-
 .../src/content-views/constants.js            | 103 +++--
 .../src/content-views/index.js                |   3 +-
 .../src/content-views/utils/text.js           |  98 ++++
 .../__tests__/preprocessData-test.internal.js |  21 +-
 .../src/import-worker/preprocessData.js       | 286 +++++++-----
 .../src/types.js                              |  59 ++-
 .../src/utils/formatting.js                   |  30 ++
 .../src/utils/useSmartTooltip.js              |  19 +-
 .../{ColorView.js => BackgroundColorView.js}  |  26 +-
 .../src/view-base/HorizontalPanAndZoomView.js |  86 ++--
 .../src/view-base/ResizableSplitView.js       | 339 --------------
 .../src/view-base/ResizableView.js            | 418 ++++++++++++++++++
 .../src/view-base/Surface.js                  |   2 +-
 .../view-base/VerticalScrollOverflowView.js   |   3 +
 .../src/view-base/VerticalScrollView.js       |  62 ++-
 .../src/view-base/View.js                     |  32 +-
 .../src/view-base/geometry.js                 |  13 +
 .../src/view-base/index.js                    |   4 +-
 .../src/view-base/layouter.js                 |  12 +-
 .../src/view-base/useCanvasInteraction.js     |  62 ++-
 .../src/devtools/views/Profiler/Profiler.js   |  11 +-
 .../views/Profiler/ProfilerContext.js         |   5 +-
 .../views/Settings/SettingsContext.js         |  64 +--
 .../src/devtools/views/TabBar.js              |   2 +-
 .../src/devtools/views/root.css               | 107 ++---
 .../src/hookNamesCache.js                     |   9 +-
 .../src/ReactFiberThrow.new.js                |   2 +-
 .../src/ReactFiberThrow.old.js                |   2 +-
 .../src/SchedulingProfiler.js                 |  16 +-
 .../SchedulingProfiler-test.internal.js       |   8 +-
 40 files changed, 2005 insertions(+), 1255 deletions(-)
 rename packages/react-devtools-scheduling-profiler/src/content-views/{ReactEventsView.js => SchedulingEventsView.js} (73%)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/utils/formatting.js
 rename packages/react-devtools-scheduling-profiler/src/view-base/{ColorView.js => BackgroundColorView.js} (51%)
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index eb6b746dec0c..b35628a705d0 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -31,8 +31,9 @@ import {copy} from 'clipboard-js';
 import prettyMilliseconds from 'pretty-ms';
 
 import {
+  BackgroundColorView,
   HorizontalPanAndZoomView,
-  ResizableSplitView,
+  ResizableView,
   Surface,
   VerticalScrollView,
   View,
@@ -45,8 +46,9 @@ import {
 import {
   FlamechartView,
   NativeEventsView,
-  ReactEventsView,
   ReactMeasuresView,
+  SchedulingEventsView,
+  SuspenseEventsView,
   TimeAxisMarkersView,
   UserTimingMarksView,
 } from './content-views';
@@ -128,7 +130,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
   const surfaceRef = useRef(new Surface());
   const userTimingMarksViewRef = useRef(null);
   const nativeEventsViewRef = useRef(null);
-  const reactEventsViewRef = useRef(null);
+  const schedulingEventsViewRef = useRef(null);
+  const suspenseEventsViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
   const syncedHorizontalPanAndZoomViewsRef = useRef<HorizontalPanAndZoomView[]>(
@@ -152,21 +155,53 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       );
     };
 
-    // Top content
+    function createViewHelper(
+      view: View,
+      resizeLabel: string = '',
+      shouldScrollVertically: boolean = false,
+      shouldResizeVertically: boolean = false,
+    ): View {
+      let verticalScrollView = null;
+      if (shouldScrollVertically) {
+        verticalScrollView = new VerticalScrollView(
+          surface,
+          defaultFrame,
+          view,
+        );
+      }
+
+      const horizontalPanAndZoomView = new HorizontalPanAndZoomView(
+        surface,
+        defaultFrame,
+        verticalScrollView !== null ? verticalScrollView : view,
+        data.duration,
+        syncAllHorizontalPanAndZoomViewStates,
+      );
 
-    const topContentStack = new View(
-      surface,
-      defaultFrame,
-      verticallyStackedLayout,
-    );
+      syncedHorizontalPanAndZoomViewsRef.current.push(horizontalPanAndZoomView);
+
+      let viewToReturn = horizontalPanAndZoomView;
+      if (shouldResizeVertically) {
+        viewToReturn = new ResizableView(
+          surface,
+          defaultFrame,
+          horizontalPanAndZoomView,
+          canvasRef,
+          resizeLabel,
+        );
+      }
+
+      return viewToReturn;
+    }
 
     const axisMarkersView = new TimeAxisMarkersView(
       surface,
       defaultFrame,
       data.duration,
     );
-    topContentStack.addSubview(axisMarkersView);
+    const axisMarkersViewWrapper = createViewHelper(axisMarkersView);
 
+    let userTimingMarksViewWrapper = null;
     if (data.otherUserTimingMarks.length > 0) {
       const userTimingMarksView = new UserTimingMarksView(
         surface,
@@ -175,50 +210,50 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         data.duration,
       );
       userTimingMarksViewRef.current = userTimingMarksView;
-      topContentStack.addSubview(userTimingMarksView);
+      userTimingMarksViewWrapper = createViewHelper(userTimingMarksView);
     }
 
     const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);
     nativeEventsViewRef.current = nativeEventsView;
-    topContentStack.addSubview(nativeEventsView);
+    const nativeEventsViewWrapper = createViewHelper(
+      nativeEventsView,
+      'events',
+      true,
+      true,
+    );
 
-    const reactEventsView = new ReactEventsView(surface, defaultFrame, data);
-    reactEventsViewRef.current = reactEventsView;
-    topContentStack.addSubview(reactEventsView);
+    const schedulingEventsView = new SchedulingEventsView(
+      surface,
+      defaultFrame,
+      data,
+    );
+    schedulingEventsViewRef.current = schedulingEventsView;
+    const schedulingEventsViewWrapper = createViewHelper(schedulingEventsView);
 
-    const topContentHorizontalPanAndZoomView = new HorizontalPanAndZoomView(
+    const suspenseEventsView = new SuspenseEventsView(
       surface,
       defaultFrame,
-      topContentStack,
-      data.duration,
-      syncAllHorizontalPanAndZoomViewStates,
+      data,
     );
-    syncedHorizontalPanAndZoomViewsRef.current.push(
-      topContentHorizontalPanAndZoomView,
+    suspenseEventsViewRef.current = suspenseEventsView;
+    const suspenseEventsViewWrapper = createViewHelper(
+      suspenseEventsView,
+      'suspense',
+      true,
+      true,
     );
 
-    // Resizable content
-
     const reactMeasuresView = new ReactMeasuresView(
       surface,
       defaultFrame,
       data,
     );
     reactMeasuresViewRef.current = reactMeasuresView;
-    const reactMeasuresVerticalScrollView = new VerticalScrollView(
-      surface,
-      defaultFrame,
+    const reactMeasuresViewWrapper = createViewHelper(
       reactMeasuresView,
-    );
-    const reactMeasuresHorizontalPanAndZoomView = new HorizontalPanAndZoomView(
-      surface,
-      defaultFrame,
-      reactMeasuresVerticalScrollView,
-      data.duration,
-      syncAllHorizontalPanAndZoomViewStates,
-    );
-    syncedHorizontalPanAndZoomViewsRef.current.push(
-      reactMeasuresHorizontalPanAndZoomView,
+      'react',
+      true,
+      true,
     );
 
     const flamechartView = new FlamechartView(
@@ -228,30 +263,15 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       data.duration,
     );
     flamechartViewRef.current = flamechartView;
-    const flamechartVerticalScrollView = new VerticalScrollView(
-      surface,
-      defaultFrame,
+    const flamechartViewWrapper = createViewHelper(
       flamechartView,
-    );
-    const flamechartHorizontalPanAndZoomView = new HorizontalPanAndZoomView(
-      surface,
-      defaultFrame,
-      flamechartVerticalScrollView,
-      data.duration,
-      syncAllHorizontalPanAndZoomViewStates,
-    );
-    syncedHorizontalPanAndZoomViewsRef.current.push(
-      flamechartHorizontalPanAndZoomView,
-    );
-
-    const resizableContentStack = new ResizableSplitView(
-      surface,
-      defaultFrame,
-      reactMeasuresHorizontalPanAndZoomView,
-      flamechartHorizontalPanAndZoomView,
-      canvasRef,
+      '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,
@@ -260,8 +280,18 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         lastViewTakesUpRemainingSpaceLayout,
       ),
     );
-    rootView.addSubview(topContentHorizontalPanAndZoomView);
-    rootView.addSubview(resizableContentStack);
+    rootView.addSubview(axisMarkersViewWrapper);
+    if (userTimingMarksViewWrapper !== null) {
+      rootView.addSubview(userTimingMarksViewWrapper);
+    }
+    rootView.addSubview(nativeEventsViewWrapper);
+    rootView.addSubview(schedulingEventsViewWrapper);
+    rootView.addSubview(suspenseEventsViewWrapper);
+    rootView.addSubview(reactMeasuresViewWrapper);
+    rootView.addSubview(flamechartViewWrapper);
+
+    // If subviews are less than the available height, fill remaining height with a solid color.
+    rootView.addSubview(new BackgroundColorView(surface, defaultFrame));
 
     surfaceRef.current.rootView = rootView;
   }, [data]);
@@ -278,6 +308,39 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       return;
     }
 
+    // Wheel events should always hide the current toolltip.
+    switch (interaction.type) {
+      case 'wheel-control':
+      case 'wheel-meta':
+      case 'wheel-plain':
+      case 'wheel-shift':
+        setHoveredEvent(prevHoverEvent => {
+          if (prevHoverEvent === null) {
+            return prevHoverEvent;
+          } else if (
+            prevHoverEvent.flamechartStackFrame !== null ||
+            prevHoverEvent.measure !== null ||
+            prevHoverEvent.nativeEvent !== null ||
+            prevHoverEvent.schedulingEvent !== null ||
+            prevHoverEvent.suspenseEvent !== null ||
+            prevHoverEvent.userTimingMark !== null
+          ) {
+            return {
+              data: prevHoverEvent.data,
+              flamechartStackFrame: null,
+              measure: null,
+              nativeEvent: null,
+              schedulingEvent: null,
+              suspenseEvent: null,
+              userTimingMark: null,
+            };
+          } else {
+            return prevHoverEvent;
+          }
+        });
+        break;
+    }
+
     const surface = surfaceRef.current;
     surface.handleInteraction(interaction);
 
@@ -310,12 +373,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       userTimingMarksView.onHover = userTimingMark => {
         if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
           setHoveredEvent({
-            userTimingMark,
-            nativeEvent: null,
-            reactEvent: null,
+            data,
             flamechartStackFrame: null,
             measure: null,
-            data,
+            nativeEvent: null,
+            schedulingEvent: null,
+            suspenseEvent: null,
+            userTimingMark,
           });
         }
       };
@@ -326,28 +390,47 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       nativeEventsView.onHover = nativeEvent => {
         if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
           setHoveredEvent({
-            userTimingMark: null,
-            nativeEvent,
-            reactEvent: null,
+            data,
             flamechartStackFrame: null,
             measure: null,
-            data,
+            nativeEvent,
+            schedulingEvent: null,
+            suspenseEvent: null,
+            userTimingMark: null,
           });
         }
       };
     }
 
-    const {current: reactEventsView} = reactEventsViewRef;
-    if (reactEventsView) {
-      reactEventsView.onHover = reactEvent => {
-        if (!hoveredEvent || hoveredEvent.reactEvent !== reactEvent) {
+    const {current: schedulingEventsView} = schedulingEventsViewRef;
+    if (schedulingEventsView) {
+      schedulingEventsView.onHover = schedulingEvent => {
+        if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {
           setHoveredEvent({
-            userTimingMark: null,
-            nativeEvent: null,
-            reactEvent,
+            data,
             flamechartStackFrame: null,
             measure: null,
+            nativeEvent: null,
+            schedulingEvent,
+            suspenseEvent: null,
+            userTimingMark: null,
+          });
+        }
+      };
+    }
+
+    const {current: suspenseEventsView} = suspenseEventsViewRef;
+    if (suspenseEventsView) {
+      suspenseEventsView.onHover = suspenseEvent => {
+        if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {
+          setHoveredEvent({
             data,
+            flamechartStackFrame: null,
+            measure: null,
+            nativeEvent: null,
+            schedulingEvent: null,
+            suspenseEvent,
+            userTimingMark: null,
           });
         }
       };
@@ -358,12 +441,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       reactMeasuresView.onHover = measure => {
         if (!hoveredEvent || hoveredEvent.measure !== measure) {
           setHoveredEvent({
-            userTimingMark: null,
-            nativeEvent: null,
-            reactEvent: null,
+            data,
             flamechartStackFrame: null,
             measure,
-            data,
+            nativeEvent: null,
+            schedulingEvent: null,
+            suspenseEvent: null,
+            userTimingMark: null,
           });
         }
       };
@@ -377,12 +461,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           hoveredEvent.flamechartStackFrame !== flamechartStackFrame
         ) {
           setHoveredEvent({
-            userTimingMark: null,
-            nativeEvent: null,
-            reactEvent: null,
+            data,
             flamechartStackFrame,
             measure: null,
-            data,
+            nativeEvent: null,
+            schedulingEvent: null,
+            suspenseEvent: null,
+            userTimingMark: null,
           });
         }
       });
@@ -407,10 +492,17 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       );
     }
 
-    const {current: reactEventsView} = reactEventsViewRef;
-    if (reactEventsView) {
-      reactEventsView.setHoveredEvent(
-        hoveredEvent ? hoveredEvent.reactEvent : null,
+    const {current: schedulingEventsView} = schedulingEventsViewRef;
+    if (schedulingEventsView) {
+      schedulingEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.schedulingEvent : null,
+      );
+    }
+
+    const {current: suspenseEventsView} = suspenseEventsViewRef;
+    if (suspenseEventsView) {
+      suspenseEventsView.setHoveredEvent(
+        hoveredEvent ? hoveredEvent.suspenseEvent : null,
       );
     }
 
@@ -443,24 +535,25 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
             return null;
           }
           const {
-            reactEvent,
             flamechartStackFrame,
             measure,
+            schedulingEvent,
+            suspenseEvent,
           } = contextData.hoveredEvent;
           return (
             <Fragment>
-              {reactEvent !== null && (
+              {schedulingEvent !== null && (
                 <ContextMenuItem
-                  onClick={() => copy(reactEvent.componentName)}
+                  onClick={() => copy(schedulingEvent.componentName)}
                   title="Copy component name">
                   Copy component name
                 </ContextMenuItem>
               )}
-              {reactEvent !== null && reactEvent.componentStack && (
+              {suspenseEvent !== null && (
                 <ContextMenuItem
-                  onClick={() => copy(reactEvent.componentStack)}
-                  title="Copy component stack">
-                  Copy component stack
+                  onClick={() => copy(suspenseEvent.componentName)}
+                  title="Copy component name">
+                  Copy component name
                 </ContextMenuItem>
               )}
               {measure !== null && (
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
index 91e60bf13cfd..114d3fe7bbe1 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
@@ -1,6 +1,10 @@
 .Tooltip {
   position: fixed;
-  display: inline-block;
+}
+
+.TooltipSection,
+.TooltipWarningSection {
+  display: block;
   border-radius: 0.125rem;
   max-width: 300px;
   padding: 0.25rem;
@@ -12,11 +16,15 @@
   color: var(--color-tooltip-text);
   font-size: 11px;
 }
+.TooltipWarningSection {
+  margin-top: 0.25rem;
+  background-color: var(--color-warning-background);
+}
 
 .Divider {
   height: 1px;
   background-color: #aaa;
-  margin: 0.5rem 0;
+  margin: 0.25rem 0;
 }
 
 .DetailsGrid {
@@ -40,7 +48,6 @@
 
 .FlamechartStackFrameName {
   word-break: break-word;
-  margin-left: 0.4rem;
 }
 
 .ComponentName {
@@ -49,32 +56,20 @@
   margin-right: 0.25rem;
 }
 
-.ComponentStack {
-  overflow: hidden;
-  max-width: 35em;
-  max-height: 10em;
-  margin: 0;
-  font-size: 0.9em;
-  line-height: 1.5;
-  -webkit-mask-image: linear-gradient(
-    180deg,
-    var(--color-tooltip-background),
-    var(--color-tooltip-background) 5em,
-    transparent
-  );
-  mask-image: linear-gradient(
-    180deg,
-    var(--color-tooltip-background),
-    var(--color-tooltip-background) 5em,
-    transparent
-  );
-  white-space: pre;
-}
-
 .ReactMeasureLabel {
-  margin-left: 0.4rem;
 }
 
 .UserTimingLabel {
   word-break: break-word;
 }
+
+.NativeEventName {
+  font-weight: bold;
+  word-break: break-word;
+  margin-right: 0.25rem;
+}
+
+.InfoText,
+.WarningText {
+  color: var(--color-warning-text-color);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 3e9f36e44acf..d6019cb25443 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -11,18 +11,18 @@ import type {Point} from './view-base';
 import type {
   FlamechartStackFrame,
   NativeEvent,
-  ReactEvent,
   ReactHoverContextInfo,
   ReactMeasure,
   ReactProfilerData,
   Return,
+  SchedulingEvent,
+  SuspenseEvent,
   UserTimingMark,
 } from './types';
 
 import * as React from 'react';
-import {Fragment, useRef} from 'react';
-import prettyMilliseconds from 'pretty-ms';
-import {COLORS} from './content-views/constants';
+import {useRef} from 'react';
+import {formatDuration, formatTimestamp, trimString} from './utils/formatting';
 import {getBatchRange} from './utils/getBatchRange';
 import useSmartTooltip from './utils/useSmartTooltip';
 import styles from './EventTooltip.css';
@@ -34,22 +34,7 @@ type Props = {|
   origin: Point,
 |};
 
-function formatTimestamp(ms) {
-  return ms.toLocaleString(undefined, {minimumFractionDigits: 2}) + 'ms';
-}
-
-function formatDuration(ms) {
-  return prettyMilliseconds(ms, {millisecondsDecimalDigits: 3});
-}
-
-function trimmedString(string: string, length: number): string {
-  if (string.length > length) {
-    return `${string.substr(0, length - 1)}…`;
-  }
-  return string;
-}
-
-function getReactEventLabel(event: ReactEvent): string | null {
+function getSchedulingEventLabel(event: SchedulingEvent): string | null {
   switch (event.type) {
     case 'schedule-render':
       return 'render scheduled';
@@ -57,30 +42,6 @@ function getReactEventLabel(event: ReactEvent): string | null {
       return 'state update scheduled';
     case 'schedule-force-update':
       return 'force update scheduled';
-    case 'suspense-suspend':
-      return 'suspended';
-    case 'suspense-resolved':
-      return 'suspense resolved';
-    case 'suspense-rejected':
-      return 'suspense rejected';
-    default:
-      return null;
-  }
-}
-
-function getReactEventColor(event: ReactEvent): string | null {
-  switch (event.type) {
-    case 'schedule-render':
-      return COLORS.REACT_SCHEDULE_HOVER;
-    case 'schedule-state-update':
-    case 'schedule-force-update':
-      return event.isCascading
-        ? COLORS.REACT_SCHEDULE_CASCADING_HOVER
-        : COLORS.REACT_SCHEDULE_HOVER;
-    case 'suspense-suspend':
-    case 'suspense-resolved':
-    case 'suspense-rejected':
-      return COLORS.REACT_SUSPEND_HOVER;
     default:
       return null;
   }
@@ -89,15 +50,15 @@ function getReactEventColor(event: ReactEvent): string | null {
 function getReactMeasureLabel(type): string | null {
   switch (type) {
     case 'commit':
-      return 'commit';
+      return 'react commit';
     case 'render-idle':
-      return 'idle';
+      return 'react idle';
     case 'render':
-      return 'render';
+      return 'react render';
     case 'layout-effects':
-      return 'layout effects';
+      return 'react layout effects';
     case 'passive-effects':
-      return 'passive effects';
+      return 'react passive effects';
     default:
       return null;
   }
@@ -120,10 +81,11 @@ export default function EventTooltip({
   }
 
   const {
-    nativeEvent,
-    reactEvent,
-    measure,
     flamechartStackFrame,
+    measure,
+    nativeEvent,
+    schedulingEvent,
+    suspenseEvent,
     userTimingMark,
   } = hoveredEvent;
 
@@ -131,9 +93,19 @@ export default function EventTooltip({
     return (
       <TooltipNativeEvent nativeEvent={nativeEvent} tooltipRef={tooltipRef} />
     );
-  } else if (reactEvent !== null) {
+  } else if (schedulingEvent !== null) {
     return (
-      <TooltipReactEvent reactEvent={reactEvent} tooltipRef={tooltipRef} />
+      <TooltipSchedulingEvent
+        schedulingEvent={schedulingEvent}
+        tooltipRef={tooltipRef}
+      />
+    );
+  } else if (suspenseEvent !== null) {
+    return (
+      <TooltipSuspenseEvent
+        suspenseEvent={suspenseEvent}
+        tooltipRef={tooltipRef}
+      />
     );
   } else if (measure !== null) {
     return (
@@ -158,16 +130,6 @@ export default function EventTooltip({
   return null;
 }
 
-function formatComponentStack(componentStack: string): string {
-  const lines = componentStack.split('\n').map(line => line.trim());
-  lines.shift();
-
-  if (lines.length > 5) {
-    return lines.slice(0, 5).join('\n') + '\n...';
-  }
-  return lines.join('\n');
-}
-
 const TooltipFlamechartNode = ({
   stackFrame,
   tooltipRef,
@@ -175,35 +137,25 @@ const TooltipFlamechartNode = ({
   stackFrame: FlamechartStackFrame,
   tooltipRef: Return<typeof useRef>,
 }) => {
-  const {
-    name,
-    timestamp,
-    duration,
-    scriptUrl,
-    locationLine,
-    locationColumn,
-  } = stackFrame;
+  const {name, timestamp, duration, locationLine, locationColumn} = stackFrame;
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {formatDuration(duration)}
-      <span className={styles.FlamechartStackFrameName}>{name}</span>
-      <div className={styles.DetailsGrid}>
-        <div className={styles.DetailsGridLabel}>Timestamp:</div>
-        <div>{formatTimestamp(timestamp)}</div>
-        {scriptUrl && (
-          <>
-            <div className={styles.DetailsGridLabel}>Script URL:</div>
-            <div className={styles.DetailsGridURL}>{scriptUrl}</div>
-          </>
-        )}
-        {(locationLine !== undefined || locationColumn !== undefined) && (
-          <>
-            <div className={styles.DetailsGridLabel}>Location:</div>
-            <div>
-              line {locationLine}, column {locationColumn}
-            </div>
-          </>
-        )}
+      <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>
     </div>
   );
@@ -216,75 +168,142 @@ const TooltipNativeEvent = ({
   nativeEvent: NativeEvent,
   tooltipRef: Return<typeof useRef>,
 }) => {
-  const {duration, timestamp, type, warnings} = nativeEvent;
-
-  const warningElements = [];
-  if (warnings !== null) {
-    warnings.forEach((warning, index) => {
-      warningElements.push(
-        <Fragment key={index}>
-          <div className={styles.DetailsGridLabel}>Warning:</div>
-          <div>{warning}</div>
-        </Fragment>,
-      );
-    });
-  }
+  const {duration, timestamp, type, warning} = nativeEvent;
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      <span className={styles.ComponentName}>{trimmedString(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>
-        {warningElements}
+      <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>
+      )}
     </div>
   );
 };
 
-const TooltipReactEvent = ({
-  reactEvent,
+const TooltipSchedulingEvent = ({
+  schedulingEvent,
   tooltipRef,
 }: {
-  reactEvent: ReactEvent,
+  schedulingEvent: SchedulingEvent,
   tooltipRef: Return<typeof useRef>,
 }) => {
-  const label = getReactEventLabel(reactEvent);
-  const color = getReactEventColor(reactEvent);
-  if (!label || !color) {
+  const label = getSchedulingEventLabel(schedulingEvent);
+  if (!label) {
     if (__DEV__) {
-      console.warn('Unexpected reactEvent type "%s"', reactEvent.type);
+      console.warn(
+        'Unexpected schedulingEvent type "%s"',
+        schedulingEvent.type,
+      );
     }
     return null;
   }
 
-  const {componentName, componentStack, timestamp} = reactEvent;
+  let laneLabels = null;
+  let lanes = null;
+  switch (schedulingEvent.type) {
+    case 'schedule-render':
+    case 'schedule-state-update':
+    case 'schedule-force-update':
+      laneLabels = schedulingEvent.laneLabels;
+      lanes = schedulingEvent.lanes;
+      break;
+  }
+
+  const {componentName, timestamp, warning} = schedulingEvent;
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {componentName && (
-        <span className={styles.ComponentName} style={{color}}>
-          {trimmedString(componentName, 768)}
-        </span>
+      <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>
       )}
-      {label}
-      <div className={styles.Divider} />
-      <div className={styles.DetailsGrid}>
-        <div className={styles.DetailsGridLabel}>Timestamp:</div>
-        <div>{formatTimestamp(timestamp)}</div>
-        {componentStack && (
-          <Fragment>
-            <div className={styles.DetailsGridLabel}>Component stack:</div>
-            <pre className={styles.ComponentStack}>
-              {formatComponentStack(componentStack)}
-            </pre>
-          </Fragment>
+    </div>
+  );
+};
+
+const TooltipSuspenseEvent = ({
+  suspenseEvent,
+  tooltipRef,
+}: {
+  suspenseEvent: SuspenseEvent,
+  tooltipRef: Return<typeof useRef>,
+}) => {
+  const {
+    componentName,
+    duration,
+    phase,
+    resolution,
+    timestamp,
+    warning,
+  } = suspenseEvent;
+
+  let label = 'suspended';
+  if (phase !== null) {
+    label += ` during ${phase}`;
+  }
+
+  return (
+    <div className={styles.Tooltip} ref={tooltipRef}>
+      <div className={styles.TooltipSection}>
+        {componentName && (
+          <span className={styles.ComponentName}>
+            {trimString(componentName, 100)}
+          </span>
         )}
+        {label}
+        <div className={styles.Divider} />
+        <div className={styles.DetailsGrid}>
+          <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>
+      )}
     </div>
   );
 };
@@ -311,21 +330,28 @@ const TooltipReactMeasure = ({
 
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      {formatDuration(duration)}
-      <span className={styles.ReactMeasureLabel}>{label}</span>
-      <div className={styles.Divider} />
-      <div className={styles.DetailsGrid}>
-        <div className={styles.DetailsGridLabel}>Timestamp:</div>
-        <div>{formatTimestamp(timestamp)}</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 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>
     </div>
@@ -342,11 +368,13 @@ const TooltipUserTimingMark = ({
   const {name, timestamp} = mark;
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
-      <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 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>
     </div>
   );
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
index dff2398164fd..c7a7783694fb 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
@@ -41,8 +41,18 @@ export function SchedulingProfiler(_: {||}) {
   // The easiest way to guarangee this happens is to recreate the inner Canvas component.
   const [key, setKey] = useState<string>(theme);
   useLayoutEffect(() => {
-    updateColorsToMatchTheme();
-    setKey(deferredTheme);
+    const pollForTheme = () => {
+      if (updateColorsToMatchTheme()) {
+        clearInterval(intervalID);
+        setKey(deferredTheme);
+      }
+    };
+
+    const intervalID = setInterval(pollForTheme, 50);
+
+    return () => {
+      clearInterval(intervalID);
+    };
   }, [deferredTheme]);
 
   return (
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index d84a057dd291..57cd8ae1f30c 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -21,12 +21,11 @@ import type {
 } from '../view-base';
 
 import {
-  ColorView,
+  BackgroundColorView,
   Surface,
   View,
   layeredLayout,
   rectContainsPoint,
-  rectEqualToRect,
   intersectionOfRects,
   rectIntersectsRect,
   verticallyStackedLayout,
@@ -36,11 +35,10 @@ import {
   positioningScaleFactor,
   timestampToPosition,
 } from './utils/positioning';
+import {drawText} from './utils/text';
 import {
   COLORS,
-  FONT_SIZE,
   FLAMECHART_FRAME_HEIGHT,
-  TEXT_PADDING,
   COLOR_HOVER_DIM_DELTA,
   BORDER_SIZE,
 } from './constants';
@@ -71,29 +69,6 @@ function hoverColorForStackFrame(stackFrame: FlamechartStackFrame): string {
   return hslaColorToString(color);
 }
 
-const cachedFlamechartTextWidths = new Map();
-const trimFlamechartText = (
-  context: CanvasRenderingContext2D,
-  text: string,
-  width: number,
-) => {
-  for (let i = text.length - 1; i >= 0; i--) {
-    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
-
-    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);
-    if (measuredWidth == null) {
-      measuredWidth = context.measureText(trimmedText).width;
-      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);
-    }
-
-    if (measuredWidth <= width) {
-      return trimmedText;
-    }
-  }
-
-  return null;
-};
-
 class FlamechartStackLayerView extends View {
   /** Layer to display */
   _stackLayer: FlamechartStackLayer;
@@ -161,10 +136,6 @@ class FlamechartStackLayerView extends View {
       visibleArea.size.height,
     );
 
-    context.textAlign = 'left';
-    context.textBaseline = 'middle';
-    context.font = `${FONT_SIZE}px sans-serif`;
-
     const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
 
     for (let i = 0; i < _stackLayer.length; i++) {
@@ -201,45 +172,7 @@ class FlamechartStackLayerView extends View {
         drawableRect.size.height,
       );
 
-      if (width > TEXT_PADDING * 2) {
-        const trimmedName = trimFlamechartText(
-          context,
-          name,
-          width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
-        );
-
-        if (trimmedName !== null) {
-          context.fillStyle = COLORS.TEXT_COLOR;
-
-          // Prevent text from being drawn outside `viewableArea`
-          const textOverflowsViewableArea = !rectEqualToRect(
-            drawableRect,
-            nodeRect,
-          );
-          if (textOverflowsViewableArea) {
-            context.save();
-            context.beginPath();
-            context.rect(
-              drawableRect.origin.x,
-              drawableRect.origin.y,
-              drawableRect.size.width,
-              drawableRect.size.height,
-            );
-            context.closePath();
-            context.clip();
-          }
-
-          context.fillText(
-            trimmedName,
-            nodeRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),
-            nodeRect.origin.y + FLAMECHART_FRAME_HEIGHT / 2,
-          );
-
-          if (textOverflowsViewableArea) {
-            context.restore();
-          }
-        }
-      }
+      drawText(name, context, nodeRect, drawableRect, width);
     }
   }
 
@@ -262,13 +195,17 @@ class FlamechartStackLayerView extends View {
       const flamechartStackFrame = _stackLayer[currentIndex];
       const {timestamp, duration} = flamechartStackFrame;
 
-      const width = durationToWidth(duration, scaleFactor);
       const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
-      if (x <= location.x && x + width >= location.x) {
-        this.currentCursor = 'pointer';
-        viewRefs.hoveredView = this;
-        _onHover(flamechartStackFrame);
-        return;
+      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) {
@@ -336,10 +273,8 @@ export class FlamechartView extends View {
       return rowView;
     });
 
-    // Add a plain background view to prevent gaps from appearing between
-    // flamechartRowViews.
-    const colorView = new ColorView(surface, frame, COLORS.BACKGROUND);
-    this.addSubview(colorView);
+    // Add a plain background view to prevent gaps from appearing between flamechartRowViews.
+    this.addSubview(new BackgroundColorView(surface, frame));
     this.addSubview(this._verticalStackView);
   }
 
@@ -359,7 +294,12 @@ export class FlamechartView extends View {
 
   desiredSize() {
     // Ignore the wishes of the background color view
-    return this._verticalStackView.desiredSize();
+    const intrinsicSize = this._verticalStackView.desiredSize();
+    return {
+      ...intrinsicSize,
+      // Collapsed by default
+      maxInitialHeight: 0,
+    };
   }
 
   /**
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
index 82371d2f2fce..98e388c52a81 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -22,6 +22,8 @@ import {
   positionToTimestamp,
   timestampToPosition,
 } from './utils/positioning';
+import {drawText} from './utils/text';
+import {formatDuration} from '../utils/formatting';
 import {
   View,
   Surface,
@@ -29,40 +31,10 @@ import {
   rectIntersectsRect,
   intersectionOfRects,
 } from '../view-base';
-import {
-  COLORS,
-  TEXT_PADDING,
-  NATIVE_EVENT_HEIGHT,
-  FONT_SIZE,
-  BORDER_SIZE,
-} from './constants';
+import {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from './constants';
 
 const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
 
-// TODO (scheduling profiler) Make this a reusable util
-const cachedFlamechartTextWidths = new Map();
-const trimFlamechartText = (
-  context: CanvasRenderingContext2D,
-  text: string,
-  width: number,
-) => {
-  for (let i = text.length - 1; i >= 0; i--) {
-    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
-
-    let measuredWidth = cachedFlamechartTextWidths.get(trimmedText);
-    if (measuredWidth == null) {
-      measuredWidth = context.measureText(trimmedText).width;
-      cachedFlamechartTextWidths.set(trimmedText, measuredWidth);
-    }
-
-    if (measuredWidth <= width) {
-      return trimmedText;
-    }
-  }
-
-  return null;
-};
-
 export class NativeEventsView extends View {
   _depthToNativeEvent: Map<number, NativeEvent[]>;
   _hoveredEvent: NativeEvent | null = null;
@@ -117,7 +89,7 @@ export class NativeEventsView extends View {
   }
 
   /**
-   * Draw a single `NativeEvent` as a circle in the canvas.
+   * Draw a single `NativeEvent` as a box/span with text inside of it.
    */
   _drawSingleNativeEvent(
     context: CanvasRenderingContext2D,
@@ -128,7 +100,7 @@ export class NativeEventsView extends View {
     showHoverHighlight: boolean,
   ) {
     const {frame} = this;
-    const {depth, duration, timestamp, type, warnings} = event;
+    const {depth, duration, timestamp, type, warning} = event;
 
     baseY += depth * ROW_WITH_BORDER_HEIGHT;
 
@@ -152,10 +124,10 @@ export class NativeEventsView extends View {
 
     const drawableRect = intersectionOfRects(eventRect, rect);
     context.beginPath();
-    if (warnings !== null) {
+    if (warning !== null) {
       context.fillStyle = showHoverHighlight
-        ? COLORS.NATIVE_EVENT_WARNING_HOVER
-        : COLORS.NATIVE_EVENT_WARNING;
+        ? COLORS.WARNING_BACKGROUND_HOVER
+        : COLORS.WARNING_BACKGROUND;
     } else {
       context.fillStyle = showHoverHighlight
         ? COLORS.NATIVE_EVENT_HOVER
@@ -168,32 +140,9 @@ export class NativeEventsView extends View {
       drawableRect.size.height,
     );
 
-    // Render event type label
-    context.textAlign = 'left';
-    context.textBaseline = 'middle';
-    context.font = `${FONT_SIZE}px sans-serif`;
-
-    if (width > TEXT_PADDING * 2) {
-      const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
-      const trimmedName = trimFlamechartText(
-        context,
-        type,
-        width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
-      );
+    const label = `${type} - ${formatDuration(duration)}`;
 
-      if (trimmedName !== null) {
-        context.fillStyle =
-          warnings !== null
-            ? COLORS.NATIVE_EVENT_WARNING_TEXT
-            : COLORS.TEXT_COLOR;
-
-        context.fillText(
-          trimmedName,
-          eventRect.origin.x + TEXT_PADDING - (x < 0 ? x : 0),
-          eventRect.origin.y + NATIVE_EVENT_HEIGHT / 2,
-        );
-      }
-    }
+    drawText(label, context, eventRect, drawableRect, width);
   }
 
   draw(context: CanvasRenderingContext2D) {
@@ -242,12 +191,16 @@ export class NativeEventsView extends View {
         },
       };
       if (rectIntersectsRect(borderFrame, visibleArea)) {
+        const borderDrawableRect = intersectionOfRects(
+          borderFrame,
+          visibleArea,
+        );
         context.fillStyle = COLORS.PRIORITY_BORDER;
         context.fillRect(
-          visibleArea.origin.x,
-          frame.origin.y + (i + 1) * ROW_WITH_BORDER_HEIGHT - BORDER_SIZE,
-          visibleArea.size.width,
-          BORDER_SIZE,
+          borderDrawableRect.origin.x,
+          borderDrawableRect.origin.y,
+          borderDrawableRect.size.width,
+          borderDrawableRect.size.height,
         );
       }
     }
@@ -285,8 +238,6 @@ export class NativeEventsView extends View {
           hoverTimestamp >= timestamp &&
           hoverTimestamp <= timestamp + duration
         ) {
-          this.currentCursor = 'pointer';
-
           viewRefs.hoveredView = this;
 
           onHover(nativeEvent);
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index 9bd032b08139..96790b2a282e 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -12,7 +12,7 @@ import type {
   Interaction,
   MouseMoveInteraction,
   Rect,
-  Size,
+  SizeWithMaxHeight,
   ViewRefs,
 } from '../view-base';
 
@@ -34,6 +34,7 @@ import {COLORS, BORDER_SIZE, REACT_MEASURE_HEIGHT} from './constants';
 import {REACT_TOTAL_NUM_LANES} from '../constants';
 
 const REACT_LANE_HEIGHT = REACT_MEASURE_HEIGHT + BORDER_SIZE;
+const MAX_ROWS_TO_SHOW_INITIALLY = 5;
 
 function getMeasuresForLane(
   allMeasures: ReactMeasure[],
@@ -44,7 +45,7 @@ function getMeasuresForLane(
 
 export class ReactMeasuresView extends View {
   _profilerData: ReactProfilerData;
-  _intrinsicSize: Size;
+  _intrinsicSize: SizeWithMaxHeight;
 
   _lanesToRender: ReactLane[];
   _laneToMeasures: Map<ReactLane, ReactMeasure[]>;
@@ -77,6 +78,7 @@ export class ReactMeasuresView extends View {
     this._intrinsicSize = {
       width: this._profilerData.duration,
       height: this._lanesToRender.length * REACT_LANE_HEIGHT,
+      maxInitialHeight: MAX_ROWS_TO_SHOW_INITIALLY * REACT_LANE_HEIGHT,
     };
   }
 
@@ -132,7 +134,7 @@ export class ReactMeasuresView extends View {
       case 'commit':
         fillStyle = COLORS.REACT_COMMIT;
         hoveredFillStyle = COLORS.REACT_COMMIT_HOVER;
-        groupSelectedFillStyle = COLORS.REACT_COMMIT_SELECTED;
+        groupSelectedFillStyle = COLORS.REACT_COMMIT_HOVER;
         break;
       case 'render-idle':
         // We could render idle time as diagonal hashes.
@@ -140,22 +142,22 @@ export class ReactMeasuresView extends View {
         // color = context.createPattern(getIdlePattern(), 'repeat');
         fillStyle = COLORS.REACT_IDLE;
         hoveredFillStyle = COLORS.REACT_IDLE_HOVER;
-        groupSelectedFillStyle = COLORS.REACT_IDLE_SELECTED;
+        groupSelectedFillStyle = COLORS.REACT_IDLE_HOVER;
         break;
       case 'render':
         fillStyle = COLORS.REACT_RENDER;
         hoveredFillStyle = COLORS.REACT_RENDER_HOVER;
-        groupSelectedFillStyle = COLORS.REACT_RENDER_SELECTED;
+        groupSelectedFillStyle = COLORS.REACT_RENDER_HOVER;
         break;
       case 'layout-effects':
         fillStyle = COLORS.REACT_LAYOUT_EFFECTS;
         hoveredFillStyle = COLORS.REACT_LAYOUT_EFFECTS_HOVER;
-        groupSelectedFillStyle = COLORS.REACT_LAYOUT_EFFECTS_SELECTED;
+        groupSelectedFillStyle = COLORS.REACT_LAYOUT_EFFECTS_HOVER;
         break;
       case 'passive-effects':
         fillStyle = COLORS.REACT_PASSIVE_EFFECTS;
         hoveredFillStyle = COLORS.REACT_PASSIVE_EFFECTS_HOVER;
-        groupSelectedFillStyle = COLORS.REACT_PASSIVE_EFFECTS_SELECTED;
+        groupSelectedFillStyle = COLORS.REACT_PASSIVE_EFFECTS_HOVER;
         break;
       default:
         throw new Error(`Unexpected measure type "${type}"`);
@@ -306,7 +308,7 @@ export class ReactMeasuresView extends View {
         hoverTimestamp >= timestamp &&
         hoverTimestamp <= timestamp + duration
       ) {
-        this.currentCursor = 'pointer';
+        this.currentCursor = 'context-menu';
         viewRefs.hoveredView = this;
         onHover(measure);
         return;
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
similarity index 73%
rename from packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
rename to packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
index 6d35a5f1ca64..37ff0832e026 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactEvent, ReactProfilerData} from '../types';
+import type {SchedulingEvent, ReactProfilerData} from '../types';
 import type {
   Interaction,
   MouseMoveInteraction,
@@ -39,20 +39,12 @@ import {
 const EVENT_ROW_HEIGHT_FIXED =
   TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;
 
-function isSuspenseEvent(event: ReactEvent): boolean %checks {
-  return (
-    event.type === 'suspense-suspend' ||
-    event.type === 'suspense-resolved' ||
-    event.type === 'suspense-rejected'
-  );
-}
-
-export class ReactEventsView extends View {
+export class SchedulingEventsView extends View {
   _profilerData: ReactProfilerData;
   _intrinsicSize: Size;
 
-  _hoveredEvent: ReactEvent | null = null;
-  onHover: ((event: ReactEvent | null) => void) | null = null;
+  _hoveredEvent: SchedulingEvent | null = null;
+  onHover: ((event: SchedulingEvent | null) => void) | null = null;
 
   constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
     super(surface, frame);
@@ -68,7 +60,7 @@ export class ReactEventsView extends View {
     return this._intrinsicSize;
   }
 
-  setHoveredEvent(hoveredEvent: ReactEvent | null) {
+  setHoveredEvent(hoveredEvent: SchedulingEvent | null) {
     if (this._hoveredEvent === hoveredEvent) {
       return;
     }
@@ -77,18 +69,18 @@ export class ReactEventsView extends View {
   }
 
   /**
-   * Draw a single `ReactEvent` as a circle in the canvas.
+   * Draw a single `SchedulingEvent` as a circle in the canvas.
    */
-  _drawSingleReactEvent(
+  _drawSingleSchedulingEvent(
     context: CanvasRenderingContext2D,
     rect: Rect,
-    event: ReactEvent,
+    event: SchedulingEvent,
     baseY: number,
     scaleFactor: number,
     showHoverHighlight: boolean,
   ) {
     const {frame} = this;
-    const {timestamp, type} = event;
+    const {timestamp, type, warning} = event;
 
     const x = timestampToPosition(timestamp, scaleFactor, frame);
     const radius = REACT_EVENT_DIAMETER / 2;
@@ -105,34 +97,25 @@ export class ReactEventsView extends View {
 
     let fillStyle = null;
 
-    switch (type) {
-      case 'native-event':
-        return;
-      case 'schedule-render':
-      case 'schedule-state-update':
-      case 'schedule-force-update':
-        if (event.isCascading) {
-          fillStyle = showHoverHighlight
-            ? COLORS.REACT_SCHEDULE_CASCADING_HOVER
-            : COLORS.REACT_SCHEDULE_CASCADING;
-        } else {
+    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;
-      case 'suspense-suspend':
-      case 'suspense-resolved':
-      case 'suspense-rejected':
-        fillStyle = showHoverHighlight
-          ? COLORS.REACT_SUSPEND_HOVER
-          : COLORS.REACT_SUSPEND;
-        break;
-      default:
-        if (__DEV__) {
-          console.warn('Unexpected event type "%s"', type);
-        }
-        break;
+          break;
+        default:
+          if (__DEV__) {
+            console.warn('Unexpected event type "%s"', type);
+          }
+          break;
+      }
     }
 
     if (fillStyle !== null) {
@@ -148,7 +131,7 @@ export class ReactEventsView extends View {
   draw(context: CanvasRenderingContext2D) {
     const {
       frame,
-      _profilerData: {reactEvents},
+      _profilerData: {schedulingEvents},
       _hoveredEvent,
       visibleArea,
     } = this;
@@ -168,20 +151,14 @@ export class ReactEventsView extends View {
       frame,
     );
 
-    const highlightedEvents: ReactEvent[] = [];
+    const highlightedEvents: SchedulingEvent[] = [];
 
-    reactEvents.forEach(event => {
-      if (
-        event === _hoveredEvent ||
-        (_hoveredEvent &&
-          isSuspenseEvent(event) &&
-          isSuspenseEvent(_hoveredEvent) &&
-          event.id === _hoveredEvent.id)
-      ) {
+    schedulingEvents.forEach(event => {
+      if (event === _hoveredEvent) {
         highlightedEvents.push(event);
         return;
       }
-      this._drawSingleReactEvent(
+      this._drawSingleSchedulingEvent(
         context,
         visibleArea,
         event,
@@ -194,7 +171,7 @@ export class ReactEventsView extends View {
     // 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._drawSingleReactEvent(
+      this._drawSingleSchedulingEvent(
         context,
         visibleArea,
         event,
@@ -244,7 +221,7 @@ export class ReactEventsView extends View {
     }
 
     const {
-      _profilerData: {reactEvents},
+      _profilerData: {schedulingEvents},
     } = this;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
@@ -258,15 +235,15 @@ export class ReactEventsView extends View {
 
     // 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 = reactEvents.length - 1; index >= 0; index--) {
-      const event = reactEvents[index];
+    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';
+        this.currentCursor = 'context-menu';
         viewRefs.hoveredView = this;
         onHover(event);
         return;
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
new file mode 100644
index 000000000000..3d85ffd4e2dc
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
@@ -0,0 +1,368 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {SuspenseEvent, ReactProfilerData} from '../types';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  Rect,
+  SizeWithMaxHeight,
+  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: SizeWithMaxHeight;
+  _maxDepth: number = 0;
+  _profilerData: ReactProfilerData;
+
+  onHover: ((event: SuspenseEvent | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+    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 This is unnecessary.
+        this._depthToSuspenseEvent.get(depth).push(event);
+      }
+    });
+
+    this._intrinsicSize = {
+      width: duration,
+      height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
+      maxInitialHeight: ROW_WITH_BORDER_HEIGHT * MAX_ROWS_TO_SHOW_INITIALLY,
+    };
+  }
+
+  desiredSize() {
+    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,
+      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
+      }
+
+      const drawableRect = intersectionOfRects(suspenseRect, rect);
+
+      // Clip diamonds so they don't overflow if the view has been resized (smaller).
+      const region = new Path2D();
+      region.rect(
+        drawableRect.origin.x,
+        drawableRect.origin.y,
+        drawableRect.size.width,
+        drawableRect.size.height,
+      );
+      context.save();
+      context.clip(region);
+      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();
+      context.restore();
+    } 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 (componentName != null) {
+        label = `${componentName} ${label}`;
+      }
+      if (phase !== null) {
+        label += ` during ${phase}`;
+      }
+      if (resolution !== 'unresolved') {
+        label += ` - ${formatDuration(duration)}`;
+      }
+
+      drawText(label, context, eventRect, drawableRect, width);
+    }
+  }
+
+  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.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 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-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
index 92c82c119d2e..2249d3841ad7 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
@@ -209,7 +209,7 @@ export class UserTimingMarksView extends View {
       frame,
     );
     const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
-    const markTimestampAllowance = widthToDuration(
+    const timestampAllowance = widthToDuration(
       USER_TIMING_MARK_SIZE / 2,
       scaleFactor,
     );
@@ -221,10 +221,10 @@ export class UserTimingMarksView extends View {
       const {timestamp} = mark;
 
       if (
-        timestamp - markTimestampAllowance <= hoverTimestamp &&
-        hoverTimestamp <= timestamp + markTimestampAllowance
+        timestamp - timestampAllowance <= hoverTimestamp &&
+        hoverTimestamp <= timestamp + timestampAllowance
       ) {
-        this.currentCursor = 'pointer';
+        this.currentCursor = 'context-menu';
         viewRefs.hoveredView = this;
         onHover(mark);
         return;
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index da3834892636..27ce99a05a11 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -15,6 +15,8 @@ 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 = 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 = 9;
@@ -43,44 +45,51 @@ export let COLORS = {
   BACKGROUND: '',
   NATIVE_EVENT: '',
   NATIVE_EVENT_HOVER: '',
-  NATIVE_EVENT_WARNING: '',
-  NATIVE_EVENT_WARNING_HOVER: '',
-  NATIVE_EVENT_WARNING_TEXT: '',
   PRIORITY_BACKGROUND: '',
   PRIORITY_BORDER: '',
   PRIORITY_LABEL: '',
   USER_TIMING: '',
   USER_TIMING_HOVER: '',
   REACT_IDLE: '',
-  REACT_IDLE_SELECTED: '',
   REACT_IDLE_HOVER: '',
   REACT_RENDER: '',
-  REACT_RENDER_SELECTED: '',
   REACT_RENDER_HOVER: '',
   REACT_COMMIT: '',
-  REACT_COMMIT_SELECTED: '',
   REACT_COMMIT_HOVER: '',
   REACT_LAYOUT_EFFECTS: '',
-  REACT_LAYOUT_EFFECTS_SELECTED: '',
   REACT_LAYOUT_EFFECTS_HOVER: '',
   REACT_PASSIVE_EFFECTS: '',
-  REACT_PASSIVE_EFFECTS_SELECTED: '',
   REACT_PASSIVE_EFFECTS_HOVER: '',
   REACT_RESIZE_BAR: '',
+  REACT_RESIZE_BAR_ACTIVE: '',
+  REACT_RESIZE_BAR_BORDER: '',
+  REACT_RESIZE_BAR_DOT: '',
   REACT_SCHEDULE: '',
   REACT_SCHEDULE_HOVER: '',
-  REACT_SCHEDULE_CASCADING: '',
-  REACT_SCHEDULE_CASCADING_HOVER: '',
-  REACT_SUSPEND: '',
-  REACT_SUSPEND_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_WORK_BORDER: '',
+  SCROLL_CARET: '',
   TEXT_COLOR: '',
   TIME_MARKER_LABEL: '',
+  WARNING_BACKGROUND: '',
+  WARNING_BACKGROUND_HOVER: '',
+  WARNING_TEXT: '',
+  WARNING_TEXT_INVERED: '',
 };
 
-export function updateColorsToMatchTheme(): void {
+export function updateColorsToMatchTheme(): boolean {
   const computedStyle = getComputedStyle((document.body: any));
 
+  // Check to see if styles have been initialized...
+  if (computedStyle.getPropertyValue('--color-background') == null) {
+    return false;
+  }
+
   COLORS = {
     BACKGROUND: computedStyle.getPropertyValue('--color-background'),
     NATIVE_EVENT: computedStyle.getPropertyValue(
@@ -89,15 +98,6 @@ export function updateColorsToMatchTheme(): void {
     NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-native-event-hover',
     ),
-    NATIVE_EVENT_WARNING: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-native-event-warning',
-    ),
-    NATIVE_EVENT_WARNING_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-native-event-warning-hover',
-    ),
-    NATIVE_EVENT_WARNING_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-native-event-warning-text',
-    ),
     PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-priority-background',
     ),
@@ -114,73 +114,86 @@ export function updateColorsToMatchTheme(): void {
     REACT_IDLE: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-idle',
     ),
-    REACT_IDLE_SELECTED: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-idle-selected',
-    ),
     REACT_IDLE_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-idle-hover',
     ),
     REACT_RENDER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-render',
     ),
-    REACT_RENDER_SELECTED: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render-selected',
-    ),
     REACT_RENDER_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-render-hover',
     ),
     REACT_COMMIT: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-commit',
     ),
-    REACT_COMMIT_SELECTED: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-commit-selected',
-    ),
     REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-commit-hover',
     ),
     REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-layout-effects',
     ),
-    REACT_LAYOUT_EFFECTS_SELECTED: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-layout-effects-selected',
-    ),
     REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-layout-effects-hover',
     ),
     REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-passive-effects',
     ),
-    REACT_PASSIVE_EFFECTS_SELECTED: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-passive-effects-selected',
-    ),
     REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-passive-effects-hover',
     ),
     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-scheduling-profiler-react-schedule',
     ),
     REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-schedule-hover',
     ),
-    REACT_SCHEDULE_CASCADING: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-schedule-cascading',
+    REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspense-rejected',
+    ),
+    REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspense-rejected-hover',
+    ),
+    REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspense-resolved',
     ),
-    REACT_SCHEDULE_CASCADING_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-schedule-cascading-hover',
+    REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspense-resolved-hover',
     ),
-    REACT_SUSPEND: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspend',
+    REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspense-unresolved',
     ),
-    REACT_SUSPEND_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspend-hover',
+    REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-suspense-unresolved-hover',
     ),
     REACT_WORK_BORDER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-work-border',
     ),
+    SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
     TEXT_COLOR: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-text-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-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
index b50490b13ae9..588f3e5d7bd9 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
@@ -9,7 +9,8 @@
 
 export * from './FlamechartView';
 export * from './NativeEventsView';
-export * from './ReactEventsView';
 export * from './ReactMeasuresView';
+export * from './SchedulingEventsView';
+export * from './SuspenseEventsView';
 export * from './TimeAxisMarkersView';
 export * from './UserTimingMarksView';
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
new file mode 100644
index 000000000000..da14733bce62
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Rect} from '../../view-base';
+
+import {rectEqualToRect} from '../../view-base';
+import {COLORS, FONT_SIZE, TEXT_PADDING} from '../constants';
+
+const cachedTextWidths = new Map();
+
+export function trimText(
+  context: CanvasRenderingContext2D,
+  text: string,
+  width: number,
+): string | null {
+  for (let i = text.length - 1; i >= 0; i--) {
+    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
+
+    let measuredWidth = cachedTextWidths.get(trimmedText);
+    if (measuredWidth == null) {
+      measuredWidth = context.measureText(trimmedText).width;
+      cachedTextWidths.set(trimmedText, measuredWidth);
+    }
+
+    if (measuredWidth <= width) {
+      return trimmedText;
+    }
+  }
+
+  return null;
+}
+
+export function drawText(
+  text: string,
+  context: CanvasRenderingContext2D,
+  fullRect: Rect,
+  drawableRect: Rect,
+  availableWidth: number,
+  textAlign: 'left' | 'center' = 'left',
+  fillStyle: string = COLORS.TEXT_COLOR,
+): void {
+  if (availableWidth > TEXT_PADDING * 2) {
+    context.textAlign = textAlign;
+    context.textBaseline = 'middle';
+    context.font = `${FONT_SIZE}px sans-serif`;
+
+    const {x, y} = fullRect.origin;
+
+    const trimmedName = trimText(
+      context,
+      text,
+      availableWidth - 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 + availableWidth / 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-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 649d90246993..bb10bca4d855 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -208,8 +208,9 @@ describe(preprocessData, () => {
       measures: [],
       nativeEvents: [],
       otherUserTimingMarks: [],
-      reactEvents: [],
+      schedulingEvents: [],
       startTime: 1,
+      suspenseEvents: [],
     });
   });
 
@@ -300,16 +301,17 @@ describe(preprocessData, () => {
       ],
       nativeEvents: [],
       otherUserTimingMarks: [],
-      reactEvents: [
+      schedulingEvents: [
         {
-          componentStack: '',
           laneLabels: [],
           lanes: [9],
           timestamp: 0.002,
           type: 'schedule-render',
+          warning: null,
         },
       ],
       startTime: 1,
+      suspenseEvents: [],
     });
   });
 
@@ -372,16 +374,17 @@ describe(preprocessData, () => {
           timestamp: 0.004,
         },
       ],
-      reactEvents: [
+      schedulingEvents: [
         {
-          componentStack: '',
           laneLabels: ['Sync'],
           lanes: [0],
           timestamp: 0.005,
           type: 'schedule-render',
+          warning: null,
         },
       ],
       startTime: 1,
+      suspenseEvents: [],
     });
   });
 
@@ -507,25 +510,25 @@ describe(preprocessData, () => {
           timestamp: 0.004,
         },
       ],
-      reactEvents: [
+      schedulingEvents: [
         {
-          componentStack: '',
           laneLabels: ['Default'],
           lanes: [4],
           timestamp: 0.005,
           type: 'schedule-render',
+          warning: null,
         },
         {
           componentName: 'App',
-          componentStack: '',
-          isCascading: false,
           laneLabels: ['Default'],
           lanes: [4],
           timestamp: 0.013,
           type: 'schedule-state-update',
+          warning: null,
         },
       ],
       startTime: 1,
+      suspenseEvents: [],
     });
   });
 
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 12a5bb644a33..a365be120897 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -20,6 +20,7 @@ import type {
   ReactLane,
   ReactMeasureType,
   ReactProfilerData,
+  SuspenseEvent,
 } from '../types';
 
 import {REACT_TOTAL_NUM_LANES} from '../constants';
@@ -34,13 +35,25 @@ type MeasureStackElement = {|
 |};
 
 type ProcessorState = {|
-  nextRenderShouldGenerateNewBatchID: boolean,
   batchUID: BatchUID,
-  uidCounter: BatchUID,
   measureStack: MeasureStackElement[],
+  nativeEventStack: NativeEvent[],
+  nextRenderShouldGenerateNewBatchID: boolean,
+  uidCounter: BatchUID,
+  unresolvedSuspenseEvents: Map<string, SuspenseEvent>,
 |};
 
-let nativeEventStack: Array<NativeEvent> = [];
+const NATIVE_EVENT_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 nested update was scheduled during layout. These updates require React to re-render synchronously before the browser can paint.',
+  SUSPENDD_DURING_UPATE:
+    '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(
@@ -174,44 +187,54 @@ function processTimelineEvent(
           const stackTrace = args.data.stackTrace;
           if (stackTrace) {
             const topFrame = stackTrace[stackTrace.length - 1];
-            if (topFrame.url.includes('node_modules/react-dom')) {
+            if (topFrame.url.includes('/react-dom.')) {
               // Filter out fake React events dispatched by invokeGuardedCallbackDev.
               return;
             }
           }
         }
 
-        const timestamp = (ts - currentProfilerData.startTime) / 1000;
-        const duration = event.dur / 1000;
-
-        let depth = 0;
-
-        while (nativeEventStack.length > 0) {
-          const prevNativeEvent = nativeEventStack[nativeEventStack.length - 1];
-          const prevStopTime =
-            prevNativeEvent.timestamp + prevNativeEvent.duration;
-
-          if (timestamp < prevStopTime) {
-            depth = prevNativeEvent.depth + 1;
-            break;
-          } else {
-            nativeEventStack.pop();
+        // Reduce noise from events like DOMActivate, load/unload, etc. which are usually not relevant
+        if (
+          type.startsWith('blur') ||
+          type.startsWith('click') ||
+          type.startsWith('focus') ||
+          type.startsWith('mouse') ||
+          type.startsWith('pointer')
+        ) {
+          const timestamp = (ts - currentProfilerData.startTime) / 1000;
+          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,
-          warnings: null,
-        };
+          const nativeEvent = {
+            depth,
+            duration,
+            timestamp,
+            type,
+            warning: null,
+          };
 
-        currentProfilerData.nativeEvents.push(nativeEvent);
+          currentProfilerData.nativeEvents.push(nativeEvent);
 
-        // Keep track of curent event in case future ones overlap.
-        // We separate them into different vertical lanes in this case.
-        nativeEventStack.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);
+        }
       }
       break;
     case 'blink.user_timing':
@@ -219,92 +242,141 @@ function processTimelineEvent(
 
       // React Events - schedule
       if (name.startsWith('--schedule-render-')) {
-        const [
-          laneBitmaskString,
-          laneLabels,
-          ...splitComponentStack
-        ] = name.substr(18).split('-');
-        currentProfilerData.reactEvents.push({
+        const [laneBitmaskString, laneLabels] = name.substr(18).split('-');
+        currentProfilerData.schedulingEvents.push({
           type: 'schedule-render',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
           laneLabels: laneLabels ? laneLabels.split(',') : [],
-          componentStack: splitComponentStack.join('-'),
           timestamp: startTime,
+          warning: null,
         });
       } else if (name.startsWith('--schedule-forced-update-')) {
-        const [
-          laneBitmaskString,
-          laneLabels,
-          componentName,
-          ...splitComponentStack
-        ] = name.substr(25).split('-');
-        const isCascading = !!state.measureStack.find(
-          ({type}) => type === 'commit',
-        );
-        currentProfilerData.reactEvents.push({
+        const [laneBitmaskString, laneLabels, componentName] = name
+          .substr(25)
+          .split('-');
+
+        let warning = null;
+        if (state.measureStack.find(({type}) => type === 'commit')) {
+          // TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.
+          warning = WARNING_STRINGS.NESTED_UPDATE;
+        }
+
+        currentProfilerData.schedulingEvents.push({
           type: 'schedule-force-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
           laneLabels: laneLabels ? laneLabels.split(',') : [],
           componentName,
-          componentStack: splitComponentStack.join('-'),
           timestamp: startTime,
-          isCascading,
+          warning,
         });
       } else if (name.startsWith('--schedule-state-update-')) {
-        const [
-          laneBitmaskString,
-          laneLabels,
-          componentName,
-          ...splitComponentStack
-        ] = name.substr(24).split('-');
-        const isCascading = !!state.measureStack.find(
-          ({type}) => type === 'commit',
-        );
-        currentProfilerData.reactEvents.push({
+        const [laneBitmaskString, laneLabels, componentName] = name
+          .substr(24)
+          .split('-');
+
+        let warning = null;
+        if (state.measureStack.find(({type}) => type === 'commit')) {
+          // TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.
+          warning = WARNING_STRINGS.NESTED_UPDATE;
+        }
+
+        currentProfilerData.schedulingEvents.push({
           type: 'schedule-state-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
           laneLabels: laneLabels ? laneLabels.split(',') : [],
           componentName,
-          componentStack: splitComponentStack.join('-'),
           timestamp: startTime,
-          isCascading,
+          warning,
         });
       } // eslint-disable-line brace-style
 
       // React Events - suspense
       else if (name.startsWith('--suspense-suspend-')) {
-        const [id, componentName, ...splitComponentStack] = name
-          .substr(19)
-          .split('-');
-        currentProfilerData.reactEvents.push({
-          type: 'suspense-suspend',
-          id,
-          componentName,
-          componentStack: splitComponentStack.join('-'),
-          timestamp: startTime,
+        const [id, componentName, ...rest] = name.substr(19).split('-');
+
+        // Older versions of the scheduling profiler data didn't contain phase or lane values.
+        let phase = null;
+        let warning = null;
+        if (rest.length === 3) {
+          switch (rest[0]) {
+            case 'mount':
+            case 'update':
+              phase = rest[0];
+              break;
+          }
+
+          if (phase === 'update') {
+            const laneLabels = rest[2];
+            // HACK This is a bit gross but the numeric lane value might change between render versions.
+            if (!laneLabels.includes('Transition')) {
+              warning = WARNING_STRINGS.SUSPENDD_DURING_UPATE;
+            }
+          }
+        }
+
+        const availableDepths = new Array(
+          state.unresolvedSuspenseEvents.size + 1,
+        ).fill(true);
+        state.unresolvedSuspenseEvents.forEach(({depth}) => {
+          availableDepths[depth] = false;
         });
-      } else if (name.startsWith('--suspense-resolved-')) {
-        const [id, componentName, ...splitComponentStack] = name
-          .substr(20)
-          .split('-');
-        currentProfilerData.reactEvents.push({
-          type: 'suspense-resolved',
-          id,
+
+        let depth = 0;
+        for (let i = 0; i < availableDepths.length; i++) {
+          if (availableDepths[i]) {
+            depth = i;
+            break;
+          }
+        }
+
+        // TODO (scheduling profiler) 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 = {
           componentName,
-          componentStack: splitComponentStack.join('-'),
-          timestamp: startTime,
-        });
-      } else if (name.startsWith('--suspense-rejected-')) {
-        const [id, componentName, ...splitComponentStack] = name
-          .substr(20)
-          .split('-');
-        currentProfilerData.reactEvents.push({
-          type: 'suspense-rejected',
+          depth,
+          duration: null,
           id,
-          componentName,
-          componentStack: splitComponentStack.join('-'),
+          phase,
+          resolution: 'unresolved',
+          resuspendTimestamps: null,
           timestamp: startTime,
-        });
+          type: 'suspense',
+          warning,
+        };
+
+        currentProfilerData.suspenseEvents.push(suspenseEvent);
+        state.unresolvedSuspenseEvents.set(id, suspenseEvent);
+      } else if (name.startsWith('--suspense-resuspend-')) {
+        const [id] = name.substr(21).split('-');
+        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);
+        if (suspenseEvent != null) {
+          if (suspenseEvent.resuspendTimestamps === null) {
+            suspenseEvent.resuspendTimestamps = [startTime];
+          } else {
+            suspenseEvent.resuspendTimestamps.push(startTime);
+          }
+        }
+      } else if (name.startsWith('--suspense-resolved-')) {
+        const [id] = name.substr(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.substr(20).split('-');
+        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);
+        if (suspenseEvent != null) {
+          state.unresolvedSuspenseEvents.delete(id);
+
+          suspenseEvent.duration = startTime - suspenseEvent.timestamp;
+          suspenseEvent.resolution = 'rejected';
+        }
       } // eslint-disable-line brace-style
 
       // React Measures - render
@@ -335,17 +407,14 @@ function processTimelineEvent(
           state,
         );
 
-        for (let i = 0; i < nativeEventStack.length; i++) {
-          const nativeEvent = nativeEventStack[i];
+        for (let i = 0; i < state.nativeEventStack.length; i++) {
+          const nativeEvent = state.nativeEventStack[i];
           const stopTime = nativeEvent.timestamp + nativeEvent.duration;
-          if (stopTime > startTime) {
-            const warning =
-              'An event handler scheduled a synchronous update with React.';
-            if (nativeEvent.warnings === null) {
-              nativeEvent.warnings = new Set([warning]);
-            } else {
-              nativeEvent.warnings.add(warning);
-            }
+          if (
+            stopTime > startTime &&
+            nativeEvent.duration > NATIVE_EVENT_DURATION_THRESHOLD
+          ) {
+            nativeEvent.warning = WARNING_STRINGS.LONG_EVENT_HANDLER;
           }
         }
       } else if (
@@ -509,18 +578,17 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
 export default function preprocessData(
   timeline: TimelineEvent[],
 ): ReactProfilerData {
-  nativeEventStack = [];
-
   const flamechart = preprocessFlamechart(timeline);
 
   const profilerData: ReactProfilerData = {
-    startTime: 0,
     duration: 0,
-    nativeEvents: [],
-    reactEvents: [],
-    measures: [],
     flamechart,
+    measures: [],
+    nativeEvents: [],
     otherUserTimingMarks: [],
+    schedulingEvents: [],
+    startTime: 0,
+    suspenseEvents: [],
   };
 
   // Sort `timeline`. JSON Array Format trace events need not be ordered. See:
@@ -551,9 +619,11 @@ export default function preprocessData(
 
   const state: ProcessorState = {
     batchUID: 0,
-    uidCounter: 0,
-    nextRenderShouldGenerateNewBatchID: true,
     measureStack: [],
+    nativeEventStack: [],
+    nextRenderShouldGenerateNewBatchID: true,
+    uidCounter: 0,
+    unresolvedSuspenseEvents: new Map(),
   };
 
   timeline.forEach(event => processTimelineEvent(event, profilerData, state));
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index eb2ef87d407a..674dabdc8e93 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -26,13 +26,13 @@ export type NativeEvent = {|
   +duration: Milliseconds,
   +timestamp: Milliseconds,
   +type: string,
-  warnings: Set<string> | null,
+  warning: string | null,
 |};
 
 type BaseReactEvent = {|
   +componentName?: string,
-  +componentStack?: string,
   +timestamp: Milliseconds,
+  warning: string | null,
 |};
 
 type BaseReactScheduleEvent = {|
@@ -42,44 +42,33 @@ type BaseReactScheduleEvent = {|
 |};
 export type ReactScheduleRenderEvent = {|
   ...BaseReactScheduleEvent,
-  type: 'schedule-render',
+  +type: 'schedule-render',
 |};
 export type ReactScheduleStateUpdateEvent = {|
   ...BaseReactScheduleEvent,
-  type: 'schedule-state-update',
-  isCascading: boolean,
+  +type: 'schedule-state-update',
 |};
 export type ReactScheduleForceUpdateEvent = {|
   ...BaseReactScheduleEvent,
-  type: 'schedule-force-update',
-  isCascading: boolean,
+  +type: 'schedule-force-update',
 |};
 
-type BaseReactSuspenseEvent = {|
+export type SuspenseEvent = {|
   ...BaseReactEvent,
-  id: string,
-|};
-export type ReactSuspenseSuspendEvent = {|
-  ...BaseReactSuspenseEvent,
-  type: 'suspense-suspend',
-|};
-export type ReactSuspenseResolvedEvent = {|
-  ...BaseReactSuspenseEvent,
-  type: 'suspense-resolved',
-|};
-export type ReactSuspenseRejectedEvent = {|
-  ...BaseReactSuspenseEvent,
-  type: 'suspense-rejected',
+  depth: number,
+  duration: number | null,
+  +id: string,
+  +phase: 'mount' | 'update' | null,
+  resolution: 'rejected' | 'resolved' | 'unresolved',
+  resuspendTimestamps: Array<number> | null,
+  +type: 'suspense',
 |};
 
-export type ReactEvent =
+export type SchedulingEvent =
   | ReactScheduleRenderEvent
   | ReactScheduleStateUpdateEvent
-  | ReactScheduleForceUpdateEvent
-  | ReactSuspenseSuspendEvent
-  | ReactSuspenseResolvedEvent
-  | ReactSuspenseRejectedEvent;
-export type ReactEventType = $PropertyType<ReactEvent, 'type'>;
+  | ReactScheduleForceUpdateEvent;
+export type SchedulingEventType = $PropertyType<SchedulingEvent, 'type'>;
 
 export type ReactMeasureType =
   | 'commit'
@@ -128,20 +117,22 @@ export type FlamechartStackLayer = FlamechartStackFrame[];
 export type Flamechart = FlamechartStackLayer[];
 
 export type ReactProfilerData = {|
-  startTime: number,
   duration: number,
-  nativeEvents: NativeEvent[],
-  reactEvents: ReactEvent[],
-  measures: ReactMeasure[],
   flamechart: Flamechart,
+  measures: ReactMeasure[],
+  nativeEvents: NativeEvent[],
   otherUserTimingMarks: UserTimingMark[],
+  schedulingEvents: SchedulingEvent[],
+  startTime: number,
+  suspenseEvents: SuspenseEvent[],
 |};
 
 export type ReactHoverContextInfo = {|
-  nativeEvent: NativeEvent | null,
-  reactEvent: ReactEvent | null,
-  measure: ReactMeasure | null,
   data: $ReadOnly<ReactProfilerData> | null,
   flamechartStackFrame: FlamechartStackFrame | null,
+  measure: ReactMeasure | null,
+  nativeEvent: NativeEvent | null,
+  schedulingEvent: SchedulingEvent | null,
+  suspenseEvent: SuspenseEvent | null,
   userTimingMark: UserTimingMark | null,
 |};
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/formatting.js b/packages/react-devtools-scheduling-profiler/src/utils/formatting.js
new file mode 100644
index 000000000000..f5e589444236
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/utils/formatting.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import prettyMilliseconds from 'pretty-ms';
+
+export function formatTimestamp(ms: number) {
+  return (
+    ms.toLocaleString(undefined, {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1,
+    }) + 'ms'
+  );
+}
+
+export function formatDuration(ms: number) {
+  return prettyMilliseconds(ms, {millisecondsDecimalDigits: 1});
+}
+
+export function trimString(string: string, length: number): string {
+  if (string.length > length) {
+    return `${string.substr(0, length - 1)}…`;
+  }
+  return string;
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js b/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
index 4afe1fe99ead..bbf36acb95c1 100644
--- a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
@@ -9,7 +9,8 @@
 
 import {useLayoutEffect, useRef} from 'react';
 
-const TOOLTIP_OFFSET = 4;
+const TOOLTIP_OFFSET_BOTTOM = 10;
+const TOOLTIP_OFFSET_TOP = 5;
 
 export default function useSmartTooltip({
   canvasRef,
@@ -37,41 +38,41 @@ export default function useSmartTooltip({
     const element = ref.current;
     if (element !== null) {
       // Let's check the vertical position.
-      if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {
+      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 - element.offsetHeight > 0) {
+        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}px`;
+            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}px`;
+        element.style.top = `${mouseY + TOOLTIP_OFFSET_BOTTOM}px`;
       }
 
       // Now let's check the horizontal position.
-      if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {
+      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 - element.offsetWidth > 0) {
+        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}px`;
+            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}px`;
+        element.style.left = `${mouseX + TOOLTIP_OFFSET_BOTTOM}px`;
       }
     }
   }, [mouseX, mouseY, ref]);
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ColorView.js b/packages/react-devtools-scheduling-profiler/src/view-base/BackgroundColorView.js
similarity index 51%
rename from packages/react-devtools-scheduling-profiler/src/view-base/ColorView.js
rename to packages/react-devtools-scheduling-profiler/src/view-base/BackgroundColorView.js
index 551814eab6d3..bcacbd452640 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ColorView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/BackgroundColorView.js
@@ -7,33 +7,17 @@
  * @flow
  */
 
-import type {Rect} from './geometry';
-
-import {Surface} from './Surface';
 import {View} from './View';
+import {COLORS} from '../content-views/constants';
 
 /**
  * View that fills its visible area with a CSS color.
  */
-export class ColorView extends View {
-  _color: string;
-
-  constructor(surface: Surface, frame: Rect, color: string) {
-    super(surface, frame);
-    this._color = color;
-  }
-
-  setColor(color: string) {
-    if (this._color === color) {
-      return;
-    }
-    this._color = color;
-    this.setNeedsDisplay();
-  }
-
+export class BackgroundColorView extends View {
   draw(context: CanvasRenderingContext2D) {
-    const {_color, visibleArea} = this;
-    context.fillStyle = _color;
+    const {visibleArea} = this;
+
+    context.fillStyle = COLORS.BACKGROUND;
     context.fillRect(
       visibleArea.origin.x,
       visibleArea.origin.y,
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
index 8d8f427596ce..78d90e2495da 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
@@ -14,8 +14,6 @@ import type {
   MouseUpInteraction,
   WheelPlainInteraction,
   WheelWithShiftInteraction,
-  WheelWithControlInteraction,
-  WheelWithMetaInteraction,
 } from './useCanvasInteraction';
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
@@ -202,7 +200,7 @@ export class HorizontalPanAndZoomView extends View {
     }
   }
 
-  _handleWheelPlain(interaction: WheelPlainInteraction) {
+  _handleWheel(interaction: WheelPlainInteraction | WheelWithShiftInteraction) {
     const {
       location,
       delta: {deltaX, deltaY},
@@ -214,51 +212,41 @@ export class HorizontalPanAndZoomView extends View {
 
     const absDeltaX = Math.abs(deltaX);
     const absDeltaY = Math.abs(deltaY);
-    if (absDeltaY > absDeltaX) {
-      return; // Scrolling vertically
-    }
-    if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {
-      return;
-    }
-
-    const newState = translateState({
-      state: this._scrollState,
-      delta: -deltaX,
-      containerLength: this.frame.size.width,
-    });
-    this._setStateAndInformCallbacksIfChanged(newState);
-  }
-
-  _handleWheelZoom(
-    interaction:
-      | WheelWithShiftInteraction
-      | WheelWithControlInteraction
-      | WheelWithMetaInteraction,
-  ) {
-    const {
-      location,
-      delta: {deltaY},
-    } = interaction.payload;
 
-    if (!rectContainsPoint(location, this.frame)) {
-      return; // Not scrolling on view
-    }
-
-    const absDeltaY = Math.abs(deltaY);
-    if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {
-      return;
+    // 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._scrollState,
+        multiplier: 1 + 0.005 * -deltaY,
+        fixedPoint: location.x - this._scrollState.offset,
+
+        minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
+        maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
+        containerLength: this.frame.size.width,
+      });
+      this._setStateAndInformCallbacksIfChanged(newState);
+    } else {
+      if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {
+        return;
+      }
+
+      const newState = translateState({
+        state: this._scrollState,
+        delta: -deltaX,
+        containerLength: this.frame.size.width,
+      });
+      this._setStateAndInformCallbacksIfChanged(newState);
     }
-
-    const newState = zoomState({
-      state: this._scrollState,
-      multiplier: 1 + 0.005 * -deltaY,
-      fixedPoint: location.x - this._scrollState.offset,
-
-      minContentLength: this._intrinsicContentWidth * MIN_ZOOM_LEVEL,
-      maxContentLength: this._intrinsicContentWidth * MAX_ZOOM_LEVEL,
-      containerLength: this.frame.size.width,
-    });
-    this._setStateAndInformCallbacksIfChanged(newState);
   }
 
   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
@@ -273,12 +261,8 @@ export class HorizontalPanAndZoomView extends View {
         this._handleMouseUp(interaction, viewRefs);
         break;
       case 'wheel-plain':
-        this._handleWheelPlain(interaction);
-        break;
       case 'wheel-shift':
-      case 'wheel-control':
-      case 'wheel-meta':
-        this._handleWheelZoom(interaction);
+        this._handleWheel(interaction);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
deleted file mode 100644
index 177fe5f2c76d..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableSplitView.js
+++ /dev/null
@@ -1,339 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {
-  Interaction,
-  MouseDownInteraction,
-  MouseMoveInteraction,
-  MouseUpInteraction,
-} from './useCanvasInteraction';
-import type {Rect, Size} from './geometry';
-import type {ViewRefs} from './Surface';
-
-import {COLORS} from '../content-views/constants';
-import nullthrows from 'nullthrows';
-import {Surface} from './Surface';
-import {View} from './View';
-import {rectContainsPoint} from './geometry';
-import {layeredLayout, noopLayout} from './layouter';
-import {ColorView} from './ColorView';
-import {clamp} from './utils/clamp';
-
-type ResizeBarState = 'normal' | 'hovered' | 'dragging';
-
-type ResizingState = $ReadOnly<{|
-  /** Distance between top of resize bar and mouseY */
-  cursorOffsetInBarFrame: number,
-  /** Mouse's vertical coordinates relative to canvas */
-  mouseY: number,
-|}>;
-
-type LayoutState = $ReadOnly<{|
-  /** Resize bar's vertical position relative to resize view's frame.origin.y */
-  barOffsetY: number,
-|}>;
-
-function getColorForBarState(state: ResizeBarState): string {
-  switch (state) {
-    case 'normal':
-    case 'hovered':
-    case 'dragging':
-      return COLORS.REACT_RESIZE_BAR;
-  }
-  throw new Error(`Unknown resize bar state ${state}`);
-}
-
-class ResizeBar extends View {
-  _intrinsicContentSize: Size = {
-    width: 0,
-    height: 5,
-  };
-
-  _interactionState: ResizeBarState = 'normal';
-
-  constructor(surface: Surface, frame: Rect) {
-    super(surface, frame, layeredLayout);
-    this.addSubview(new ColorView(surface, frame, ''));
-    this._updateColor();
-  }
-
-  desiredSize() {
-    return this._intrinsicContentSize;
-  }
-
-  _getColorView(): ColorView {
-    return (this.subviews[0]: any);
-  }
-
-  _updateColor() {
-    this._getColorView().setColor(getColorForBarState(this._interactionState));
-  }
-
-  _setInteractionState(state: ResizeBarState) {
-    if (this._interactionState === state) {
-      return;
-    }
-    this._interactionState = state;
-    this._updateColor();
-  }
-
-  _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 (cursorInView || viewRefs.activeView === this) {
-      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);
-        return;
-      case 'mousemove':
-        this._handleMouseMove(interaction, viewRefs);
-        return;
-      case 'mouseup':
-        this._handleMouseUp(interaction, viewRefs);
-        return;
-    }
-  }
-}
-
-export class ResizableSplitView extends View {
-  _canvasRef: {current: HTMLCanvasElement | null};
-  _resizingState: ResizingState | null = null;
-  _layoutState: LayoutState;
-
-  constructor(
-    surface: Surface,
-    frame: Rect,
-    topSubview: View,
-    bottomSubview: View,
-    canvasRef: {current: HTMLCanvasElement | null},
-  ) {
-    super(surface, frame, noopLayout);
-
-    this._canvasRef = canvasRef;
-
-    this.addSubview(topSubview);
-    this.addSubview(new ResizeBar(surface, frame));
-    this.addSubview(bottomSubview);
-
-    const topSubviewDesiredSize = topSubview.desiredSize();
-    this._layoutState = {
-      barOffsetY: topSubviewDesiredSize ? topSubviewDesiredSize.height : 0,
-    };
-  }
-
-  _getTopSubview(): View {
-    return this.subviews[0];
-  }
-
-  _getResizeBar(): View {
-    return this.subviews[1];
-  }
-
-  _getBottomSubview(): View {
-    return this.subviews[2];
-  }
-
-  _getResizeBarDesiredSize(): Size {
-    return nullthrows(
-      this._getResizeBar().desiredSize(),
-      'Resize bar must have desired size',
-    );
-  }
-
-  desiredSize() {
-    const topSubviewDesiredSize = this._getTopSubview().desiredSize();
-    const resizeBarDesiredSize = this._getResizeBarDesiredSize();
-    const bottomSubviewDesiredSize = this._getBottomSubview().desiredSize();
-
-    const topSubviewDesiredWidth = topSubviewDesiredSize
-      ? topSubviewDesiredSize.width
-      : 0;
-    const bottomSubviewDesiredWidth = bottomSubviewDesiredSize
-      ? bottomSubviewDesiredSize.width
-      : 0;
-
-    const topSubviewDesiredHeight = topSubviewDesiredSize
-      ? topSubviewDesiredSize.height
-      : 0;
-    const bottomSubviewDesiredHeight = bottomSubviewDesiredSize
-      ? bottomSubviewDesiredSize.height
-      : 0;
-
-    return {
-      width: Math.max(
-        topSubviewDesiredWidth,
-        resizeBarDesiredSize.width,
-        bottomSubviewDesiredWidth,
-      ),
-      height:
-        topSubviewDesiredHeight +
-        resizeBarDesiredSize.height +
-        bottomSubviewDesiredHeight,
-    };
-  }
-
-  layoutSubviews() {
-    this._updateLayoutState();
-    this._updateSubviewFrames();
-    super.layoutSubviews();
-  }
-
-  _updateLayoutState() {
-    const {frame, visibleArea, _resizingState} = this;
-
-    const resizeBarDesiredSize = this._getResizeBarDesiredSize();
-    // Allow bar to travel to bottom of the visible area of this view but no further
-    const maxPossibleBarOffset =
-      visibleArea.size.height - resizeBarDesiredSize.height;
-    const topSubviewDesiredSize = this._getTopSubview().desiredSize();
-    const maxBarOffset = topSubviewDesiredSize
-      ? Math.min(maxPossibleBarOffset, topSubviewDesiredSize.height)
-      : maxPossibleBarOffset;
-
-    let proposedBarOffsetY = this._layoutState.barOffsetY;
-    // Update bar offset if dragging bar
-    if (_resizingState) {
-      const {mouseY, cursorOffsetInBarFrame} = _resizingState;
-      proposedBarOffsetY = mouseY - frame.origin.y - cursorOffsetInBarFrame;
-    }
-
-    this._layoutState = {
-      ...this._layoutState,
-      barOffsetY: clamp(0, maxBarOffset, proposedBarOffsetY),
-    };
-  }
-
-  _updateSubviewFrames() {
-    const {
-      frame: {
-        origin: {x, y},
-        size: {width, height},
-      },
-      _layoutState: {barOffsetY},
-    } = this;
-
-    const resizeBarDesiredSize = this._getResizeBarDesiredSize();
-
-    let currentY = y;
-
-    this._getTopSubview().setFrame({
-      origin: {x, y: currentY},
-      size: {width, height: barOffsetY},
-    });
-    currentY += this._getTopSubview().frame.size.height;
-
-    this._getResizeBar().setFrame({
-      origin: {x, y: currentY},
-      size: {width, height: resizeBarDesiredSize.height},
-    });
-    currentY += this._getResizeBar().frame.size.height;
-
-    this._getBottomSubview().setFrame({
-      origin: {x, y: currentY},
-      // Fill remaining height
-      size: {width, height: height + y - currentY},
-    });
-  }
-
-  _handleMouseDown(interaction: MouseDownInteraction) {
-    const cursorLocation = interaction.payload.location;
-    const resizeBarFrame = this._getResizeBar().frame;
-    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
-      const mouseY = cursorLocation.y;
-      this._resizingState = {
-        cursorOffsetInBarFrame: mouseY - resizeBarFrame.origin.y,
-        mouseY,
-      };
-    }
-  }
-
-  _handleMouseMove(interaction: MouseMoveInteraction) {
-    const {_resizingState} = this;
-    if (_resizingState) {
-      this._resizingState = {
-        ..._resizingState,
-        mouseY: interaction.payload.location.y,
-      };
-      this.setNeedsDisplay();
-    }
-  }
-
-  _handleMouseUp(interaction: MouseUpInteraction) {
-    if (this._resizingState) {
-      this._resizingState = null;
-    }
-  }
-
-  _didGrab: boolean = false;
-
-  getCursorActiveSubView(interaction: Interaction): View | null {
-    const cursorLocation = interaction.payload.location;
-    const resizeBarFrame = this._getResizeBar().frame;
-    if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
-      return this;
-    } else {
-      return null;
-    }
-  }
-
-  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
-    switch (interaction.type) {
-      case 'mousedown':
-        this._handleMouseDown(interaction);
-        return;
-      case 'mousemove':
-        this._handleMouseMove(interaction);
-        return;
-      case 'mouseup':
-        this._handleMouseUp(interaction);
-        return;
-    }
-  }
-}
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
new file mode 100644
index 000000000000..54a3b05c1a9c
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
@@ -0,0 +1,418 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {
+  ClickInteraction,
+  DoubleClickInteraction,
+  Interaction,
+  MouseDownInteraction,
+  MouseMoveInteraction,
+  MouseUpInteraction,
+} from './useCanvasInteraction';
+import type {Rect} 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 {intersectionOfRects, rectContainsPoint} from './geometry';
+import {noopLayout} from './layouter';
+import {clamp} from './utils/clamp';
+
+type ResizeBarState = 'normal' | 'hovered' | 'dragging';
+
+type ResizingState = $ReadOnly<{|
+  /** Distance between top of resize bar and mouseY */
+  cursorOffsetInBarFrame: number,
+  /** Mouse's vertical coordinates relative to canvas */
+  mouseY: number,
+|}>;
+
+type LayoutState = $ReadOnly<{|
+  /** Resize bar's vertical position relative to resize view's frame.origin.y */
+  barOffsetY: number,
+|}>;
+
+const RESIZE_BAR_DOT_RADIUS = 1;
+const RESIZE_BAR_DOT_SPACING = 4;
+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},
+};
+
+class ResizeBar 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() {
+    return this.showLabel
+      ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}
+      : {height: RESIZE_BAR_HEIGHT, width: 0};
+  }
+
+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
+    const {visibleArea} = this;
+    const {x, y} = visibleArea.origin;
+    const {width, height} = visibleArea.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: visibleArea.size.width,
+          height: visibleArea.size.height,
+        },
+      };
+
+      const drawableRect = intersectionOfRects(labelRect, this.visibleArea);
+
+      drawText(
+        this._label,
+        context,
+        labelRect,
+        drawableRect,
+        visibleArea.size.width,
+        'center',
+        COLORS.REACT_RESIZE_BAR_DOT,
+      );
+    } 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);
+        return;
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        return;
+      case 'mouseup':
+        this._handleMouseUp(interaction, viewRefs);
+        return;
+    }
+  }
+}
+
+export class ResizableView extends View {
+  _canvasRef: {current: HTMLCanvasElement | null};
+  _layoutState: LayoutState;
+  _resizeBar: ResizeBar;
+  _resizingState: ResizingState | null = null;
+  _subview: View;
+
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    subview: View,
+    canvasRef: {current: HTMLCanvasElement | null},
+    label: string,
+  ) {
+    super(surface, frame, noopLayout);
+
+    this._canvasRef = canvasRef;
+
+    this._subview = subview;
+    this._resizeBar = new ResizeBar(surface, frame, label);
+
+    this.addSubview(this._subview);
+    this.addSubview(this._resizeBar);
+
+    const subviewDesiredSize = subview.desiredSize();
+    this._updateLayoutStateAndResizeBar(
+      subviewDesiredSize.maxInitialHeight != null
+        ? Math.min(
+            subviewDesiredSize.maxInitialHeight,
+            subviewDesiredSize.height,
+          )
+        : subviewDesiredSize.height,
+    );
+  }
+
+  desiredSize() {
+    const resizeBarDesiredSize = this._resizeBar.desiredSize();
+
+    return {
+      width: this.frame.size.width,
+      height: this._layoutState.barOffsetY + resizeBarDesiredSize.height,
+    };
+  }
+
+  layoutSubviews() {
+    this._updateLayoutState();
+    this._updateSubviewFrames();
+
+    super.layoutSubviews();
+  }
+
+  _updateLayoutStateAndResizeBar(barOffsetY: number) {
+    if (barOffsetY <= RESIZE_BAR_WITH_LABEL_HEIGHT - RESIZE_BAR_HEIGHT) {
+      barOffsetY = 0;
+    }
+
+    this._layoutState = {
+      ...this._layoutState,
+      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) {
+    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();
+      }
+    }
+  }
+
+  _handleDoubleClick(interaction: DoubleClickInteraction) {
+    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();
+      }
+    }
+  }
+
+  _handleMouseDown(interaction: MouseDownInteraction) {
+    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,
+      };
+    }
+  }
+
+  _handleMouseMove(interaction: MouseMoveInteraction) {
+    const {_resizingState} = this;
+    if (_resizingState) {
+      this._resizingState = {
+        ..._resizingState,
+        mouseY: interaction.payload.location.y,
+      };
+      this.setNeedsDisplay();
+    }
+  }
+
+  _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) {
+    switch (interaction.type) {
+      case 'click':
+        this._handleClick(interaction);
+        return;
+      case 'double-click':
+        this._handleDoubleClick(interaction);
+        return;
+      case 'mousedown':
+        this._handleMouseDown(interaction);
+        return;
+      case 'mousemove':
+        this._handleMouseMove(interaction);
+        return;
+      case 'mouseup':
+        this._handleMouseUp(interaction);
+        return;
+    }
+  }
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
index 074cc0296f93..6cdaff1c6e75 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
@@ -92,7 +92,7 @@ export class Surface {
       origin: zeroPoint,
       size: _canvasSize,
     });
-    rootView.displayIfNeeded(_context);
+    rootView.displayIfNeeded(_context, this._viewRefs);
   }
 
   getCurrentCursor(): string | null {
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js
new file mode 100644
index 000000000000..7ddf6c184269
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js
@@ -0,0 +1,3 @@
+// TODO Vertically stack views (via verticallyStackedLayout).
+// If stacked views are taller than the available height, a vertical scrollbar will be shown on the side,
+// and width will be adjusted to subtract the width of the scrollbar.
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
index b01f33a9ca38..245b53aff718 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
@@ -12,10 +12,11 @@ import type {
   MouseDownInteraction,
   MouseMoveInteraction,
   MouseUpInteraction,
-  WheelPlainInteraction,
+  WheelWithShiftInteraction,
 } from './useCanvasInteraction';
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
+import type {ViewRefs} from './Surface';
 
 import {Surface} from './Surface';
 import {View} from './View';
@@ -26,6 +27,11 @@ import {
   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;
 
 export class VerticalScrollView extends View {
   _scrollState: ScrollState = {offset: 0, length: 0};
@@ -48,6 +54,54 @@ export class VerticalScrollView extends View {
     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();
+        }
+      }
+    }
+  }
+
   /**
    * Reference to the content view. This view is also the only view in
    * `this.subviews`.
@@ -103,7 +157,7 @@ export class VerticalScrollView extends View {
     }
   }
 
-  _handleWheelPlain(interaction: WheelPlainInteraction) {
+  _handleWheelShift(interaction: WheelWithShiftInteraction) {
     const {
       location,
       delta: {deltaX, deltaY},
@@ -141,8 +195,8 @@ export class VerticalScrollView extends View {
       case 'mouseup':
         this._handleMouseUp(interaction);
         break;
-      case 'wheel-plain':
-        this._handleWheelPlain(interaction);
+      case 'wheel-shift':
+        this._handleWheelShift(interaction);
         break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
index e3461c10536d..a43a733fd476 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
@@ -8,7 +8,7 @@
  */
 
 import type {Interaction} from './useCanvasInteraction';
-import type {Rect, Size} from './geometry';
+import type {Rect, Size, SizeWithMaxHeight} from './geometry';
 import type {Layouter} from './layouter';
 import type {ViewRefs} from './Surface';
 
@@ -140,7 +140,7 @@ export class View {
    *
    * Can be overridden by subclasses.
    */
-  desiredSize(): ?Size {
+  desiredSize(): Size | SizeWithMaxHeight {
     if (this._needsDisplay) {
       this.layoutSubviews();
     }
@@ -186,7 +186,7 @@ export class View {
    * 1. Lays out subviews with `layoutSubviews`.
    * 2. Draws content with `draw`.
    */
-  displayIfNeeded(context: CanvasRenderingContext2D) {
+  displayIfNeeded(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
     if (
       (this._needsDisplay || this._subviewsNeedDisplay) &&
       rectIntersectsRect(this.frame, this.visibleArea) &&
@@ -195,7 +195,7 @@ export class View {
       this.layoutSubviews();
       if (this._needsDisplay) this._needsDisplay = false;
       if (this._subviewsNeedDisplay) this._subviewsNeedDisplay = false;
-      this.draw(context);
+      this.draw(context, viewRefs);
     }
   }
 
@@ -239,11 +239,11 @@ export class View {
    *
    * @see displayIfNeeded
    */
-  draw(context: CanvasRenderingContext2D) {
+  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
     const {subviews, visibleArea} = this;
     subviews.forEach(subview => {
       if (rectIntersectsRect(visibleArea, subview.visibleArea)) {
-        subview.displayIfNeeded(context);
+        subview.displayIfNeeded(context, viewRefs);
       }
     });
   }
@@ -252,10 +252,9 @@ export class View {
    * Handle an `interaction`.
    *
    * To be overwritten by subclasses that wish to handle interactions.
+   *
+   * NOTE: Do not call directly! Use `handleInteractionAndPropagateToSubviews`
    */
-  // Internal note: Do not call directly! Use
-  // `handleInteractionAndPropagateToSubviews` so that interactions are
-  // propagated to subviews.
   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {}
 
   /**
@@ -272,9 +271,18 @@ export class View {
     interaction: Interaction,
     viewRefs: ViewRefs,
   ) {
+    const {subviews, visibleArea} = this;
+
+    if (visibleArea.size.height === 0) {
+      return;
+    }
+
     this.handleInteraction(interaction, viewRefs);
-    this.subviews.forEach(subview =>
-      subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs),
-    );
+
+    subviews.forEach(subview => {
+      if (rectIntersectsRect(visibleArea, subview.visibleArea)) {
+        subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs);
+      }
+    });
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
index b027b708f0cf..49c0d3981e72 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
@@ -9,6 +9,10 @@
 
 export type Point = $ReadOnly<{|x: number, y: number|}>;
 export type Size = $ReadOnly<{|width: number, height: number|}>;
+export type SizeWithMaxHeight = {|
+  ...Size,
+  maxInitialHeight?: number,
+|};
 export type Rect = $ReadOnly<{|origin: Point, size: Size|}>;
 
 /**
@@ -70,6 +74,15 @@ function boxToRect(box: Box): Rect {
 }
 
 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 !(
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/index.js b/packages/react-devtools-scheduling-profiler/src/view-base/index.js
index 9d432bed57da..b5455ce249f3 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/index.js
@@ -7,9 +7,9 @@
  * @flow
  */
 
-export * from './ColorView';
+export * from './BackgroundColorView';
 export * from './HorizontalPanAndZoomView';
-export * from './ResizableSplitView';
+export * from './ResizableView';
 export * from './Surface';
 export * from './VerticalScrollView';
 export * from './View';
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js b/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
index ca5ba1ebfdf4..58adb026c290 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
@@ -43,8 +43,7 @@ export function collapseLayoutIntoViews(layout: Layout) {
 export const noopLayout: Layouter = layout => layout;
 
 /**
- * Layer views on top of each other. All views' frames will be set to
- * `containerFrame`.
+ * Layer views on top of each other. All views' frames will be set to `containerFrame`.
  *
  * Equivalent to composing:
  * - `alignToContainerXLayout`,
@@ -52,12 +51,13 @@ export const noopLayout: Layouter = layout => layout;
  * - `containerWidthLayout`, and
  * - `containerHeightLayout`.
  */
-export const layeredLayout: Layouter = (layout, containerFrame) =>
-  layout.map(layoutInfo => ({...layoutInfo, frame: containerFrame}));
+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.
+ * 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;
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js b/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
index 3b374aebbee7..f22d8d7211f9 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
@@ -10,9 +10,23 @@
 import type {NormalizedWheelDelta} from './utils/normalizeWheel';
 import type {Point} from './geometry';
 
-import {useEffect} from 'react';
+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: {|
@@ -68,6 +82,8 @@ export type WheelWithMetaInteraction = {|
 |};
 
 export type Interaction =
+  | ClickInteraction
+  | DoubleClickInteraction
   | MouseDownInteraction
   | MouseMoveInteraction
   | MouseUpInteraction
@@ -99,6 +115,9 @@ 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) {
@@ -113,7 +132,38 @@ export function useCanvasInteraction(
       };
     }
 
+    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: {
@@ -124,6 +174,10 @@ export function useCanvasInteraction(
     };
 
     const onDocumentMouseMove: MouseEventHandler = event => {
+      if (isMouseDownRef.current) {
+        didMouseMoveWhileDownRef.current = true;
+      }
+
       interactor({
         type: 'mousemove',
         payload: {
@@ -134,6 +188,8 @@ export function useCanvasInteraction(
     };
 
     const onDocumentMouseUp: MouseEventHandler = event => {
+      isMouseDownRef.current = false;
+
       interactor({
         type: 'mouseup',
         payload: {
@@ -179,6 +235,8 @@ export function useCanvasInteraction(
     ownerDocument.addEventListener('mousemove', onDocumentMouseMove);
     ownerDocument.addEventListener('mouseup', onDocumentMouseUp);
 
+    canvas.addEventListener('click', onCanvasClick);
+    canvas.addEventListener('dblclick', onCanvasDoubleClick);
     canvas.addEventListener('mousedown', onCanvasMouseDown);
     canvas.addEventListener('wheel', onCanvasWheel);
 
@@ -186,6 +244,8 @@ export function useCanvasInteraction(
       ownerDocument.removeEventListener('mousemove', onDocumentMouseMove);
       ownerDocument.removeEventListener('mouseup', onDocumentMouseUp);
 
+      canvas.removeEventListener('click', onCanvasClick);
+      canvas.removeEventListener('dblclick', onCanvasDoubleClick);
       canvas.removeEventListener('mousedown', onCanvasMouseDown);
       canvas.removeEventListener('wheel', onCanvasWheel);
     };
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 17027f6a0c4e..f7c69755207c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -45,20 +45,21 @@ function Profiler(_: {||}) {
 
   const {supportsSchedulingProfiler} = useContext(StoreContext);
 
-  let showRightColumn = true;
+  let isLegacyProfilerSelected = false;
 
   let view = null;
   if (didRecordCommits || selectedTabID === 'scheduling-profiler') {
     switch (selectedTabID) {
       case 'flame-chart':
+        isLegacyProfilerSelected = true;
         view = <CommitFlamegraph />;
         break;
       case 'ranked-chart':
+        isLegacyProfilerSelected = true;
         view = <CommitRanked />;
         break;
       case 'scheduling-profiler':
         view = <SchedulingProfiler />;
-        showRightColumn = false;
         break;
       default:
         break;
@@ -119,7 +120,7 @@ function Profiler(_: {||}) {
             <RootSelector />
             <div className={styles.Spacer} />
             <SettingsModalContextToggle />
-            {didRecordCommits && (
+            {isLegacyProfilerSelected && didRecordCommits && (
               <Fragment>
                 <div className={styles.VRule} />
                 <SnapshotSelector />
@@ -131,7 +132,9 @@ function Profiler(_: {||}) {
             <ModalDialog />
           </div>
         </div>
-        {showRightColumn && <div className={styles.RightColumn}>{sidebar}</div>}
+        {isLegacyProfilerSelected && (
+          <div className={styles.RightColumn}>{sidebar}</div>
+        )}
         <SettingsModal />
       </div>
     </SettingsModalContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 3206fcb28f74..d5e43dc6a3d2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -212,7 +212,10 @@ function ProfilerContextController({children}: Props) {
   const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(
     null,
   );
-  const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
+  const [selectedTabID, selectTab] = useLocalStorage<TabID>(
+    'React::DevTools::Profiler::defaultTab',
+    'flame-chart',
+  );
 
   if (isProfiling) {
     batchedUpdates(() => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index e3fbec773ddc..ce4e68628f71 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -412,6 +412,9 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
   updateStyleHelper(theme, 'color-resize-bar', documentElements);
+  updateStyleHelper(theme, 'color-resize-bar-active', documentElements);
+  updateStyleHelper(theme, 'color-resize-bar-border', documentElements);
+  updateStyleHelper(theme, 'color-resize-bar-dot', documentElements);
   updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
   updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
@@ -431,21 +434,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-native-event-hover',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-warning',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-warning-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-warning-text',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-selected-tree-highlight-active',
@@ -481,11 +469,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-idle',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-idle-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-idle-hover',
@@ -496,11 +479,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-render',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-render-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-render-hover',
@@ -511,11 +489,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-commit',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-commit-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-commit-hover',
@@ -528,57 +501,57 @@ export function updateThemeVariables(
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-layout-effects-selected',
+    'color-scheduling-profiler-react-layout-effects-hover',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-layout-effects-hover',
+    'color-scheduling-profiler-react-passive-effects',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-passive-effects',
+    'color-scheduling-profiler-react-passive-effects-hover',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-passive-effects-selected',
+    'color-scheduling-profiler-react-schedule',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-passive-effects-hover',
+    'color-scheduling-profiler-react-schedule-hover',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-schedule',
+    'color-scheduling-profiler-react-suspense-rejected-event',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-schedule-hover',
+    'color-scheduling-profiler-react-suspense-rejected-hover',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-schedule-cascading',
+    'color-scheduling-profiler-react-suspense-resolved',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-schedule-cascading-hover',
+    'color-scheduling-profiler-react-suspense-resolved-hover',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-suspend',
+    'color-scheduling-profiler-react-suspense-unresolved',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-suspend-hover',
+    'color-scheduling-profiler-react-suspense-unresolved-hover',
     documentElements,
   );
   updateStyleHelper(
@@ -586,6 +559,7 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-work-border',
     documentElements,
   );
+  updateStyleHelper(theme, 'color-scroll-caret', documentElements);
   updateStyleHelper(theme, 'color-shadow', documentElements);
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
@@ -597,6 +571,14 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-toggle-text', documentElements);
   updateStyleHelper(theme, 'color-tooltip-background', documentElements);
   updateStyleHelper(theme, 'color-tooltip-text', documentElements);
+  updateStyleHelper(theme, 'color-warning-background', documentElements);
+  updateStyleHelper(theme, 'color-warning-background-hover', documentElements);
+  updateStyleHelper(theme, 'color-warning-text-color', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-warning-text-color-inverted',
+    documentElements,
+  );
 
   // Font smoothing varies based on the theme.
   updateStyleHelper(theme, 'font-smoothing', documentElements);
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index 608c660293a8..c195710a42b4 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -91,7 +91,7 @@ export default function TabBar({
     <Fragment>
       {tabs.map(tab => {
         if (tab === null) {
-          return <div className={styles.VRule} />;
+          return <div key="VRule" className={styles.VRule} />;
         }
 
         const {icon, id, label, title} = tab;
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 7d69b4536a70..e35a1c646787 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -77,46 +77,43 @@
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
-  --light-color-resize-bar: #cccccc;
+  --light-color-resize-bar: #eeeeee;
+  --light-color-resize-bar-active: #dcdcdc;
+  --light-color-resize-bar-border: #d1d1d1;
+  --light-color-resize-bar-dot: #333333;
   --light-color-scheduling-profiler-native-event: #ccc;
   --light-color-scheduling-profiler-native-event-hover: #aaa;
-  --light-color-scheduling-profiler-native-event-warning: #ee1638;
-  --light-color-scheduling-profiler-native-event-warning-hover: #da1030;
-  --light-color-scheduling-profiler-native-event-warning-text: #fff;
   --light-color-scheduling-profiler-priority-background: #f6f6f6;
   --light-color-scheduling-profiler-priority-border: #eeeeee;
   --light-color-scheduling-profiler-user-timing: #c9cacd;
-  --light-color-scheduling-profiler-user-timing-hover:#93959a;
-  --light-color-scheduling-profiler-react-idle: #edf6ff;
-  --light-color-scheduling-profiler-react-idle-selected:#EDF6FF;
-  --light-color-scheduling-profiler-react-idle-hover:#EDF6FF;
+  --light-color-scheduling-profiler-user-timing-hover: #93959a;
+  --light-color-scheduling-profiler-react-idle: #d3e5f6;
+  --light-color-scheduling-profiler-react-idle-hover: #c3d9ef;
   --light-color-scheduling-profiler-react-render: #9fc3f3;
-  --light-color-scheduling-profiler-react-render-selected:#64A9F5;
-  --light-color-scheduling-profiler-react-render-hover:#2683E2;
-  --light-color-scheduling-profiler-react-commit: #ff718e;
-  --light-color-scheduling-profiler-react-commit-selected:#FF5277;
-  --light-color-scheduling-profiler-react-commit-hover:#ed0030;
-  --light-color-scheduling-profiler-react-layout-effects:#c88ff0;
-  --light-color-scheduling-profiler-react-layout-effects-selected:#934FC1;
-  --light-color-scheduling-profiler-react-layout-effects-hover:#601593;
-  --light-color-scheduling-profiler-react-passive-effects:#c88ff0;
-  --light-color-scheduling-profiler-react-passive-effects-selected:#934FC1;
-  --light-color-scheduling-profiler-react-passive-effects-hover:#601593;
+  --light-color-scheduling-profiler-react-render-hover: #83afe9;
+  --light-color-scheduling-profiler-react-commit: #c88ff0;
+  --light-color-scheduling-profiler-react-commit-hover: #b281d6;
+  --light-color-scheduling-profiler-react-layout-effects: #b281d6;
+  --light-color-scheduling-profiler-react-layout-effects-hover: #9d71bd;
+  --light-color-scheduling-profiler-react-passive-effects: #b281d6;
+  --light-color-scheduling-profiler-react-passive-effects-hover: #9d71bd;
   --light-color-scheduling-profiler-react-schedule: #9fc3f3;
-  --light-color-scheduling-profiler-react-schedule-hover:#2683E2;
-  --light-color-scheduling-profiler-react-schedule-cascading:#ff718e;
-  --light-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
-  --light-color-scheduling-profiler-react-suspend: #a6e59f;
-  --light-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --light-color-scheduling-profiler-react-schedule-hover: #2683E2;
+  --light-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
+  --light-color-scheduling-profiler-react-suspense-rejected-hover: #ffdf37;
+  --light-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
+  --light-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
+  --light-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
+  --light-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
   --light-color-scheduling-profiler-text-color: #000000;
-  --light-color-scheduling-profiler-react-work-border:#ffffff;
+  --light-color-scheduling-profiler-react-work-border: #ffffff;
   --light-color-scroll-thumb: #c2c2c2;
   --light-color-scroll-track: #fafafa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
   --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
   --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
-  --light-color-shadow: rgba(0, 0, 0, 0.25);
+  --light-color-scroll-caret: rgba(150, 150, 150, 0.5);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
   --light-color-text-invalid: #ff0000;
@@ -127,6 +124,10 @@
   --light-color-toggle-text: #ffffff;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
+  --light-color-warning-background: #fb3655;
+  --light-color-warning-background-hover: #f82042;
+  --light-color-warning-text-color: #ffffff;
+  --light-color-warning-text-color-inverted: #fd4d69;
 
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
@@ -202,45 +203,43 @@
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;
-  --dark-color-resize-bar: #3d424a;
+  --dark-color-resize-bar: #282c34;
+  --dark-color-resize-bar-active: #31363f;
+  --dark-color-resize-bar-border: #3d424a;
+  --dark-color-resize-bar-dot: #cfd1d5;
   --dark-color-scheduling-profiler-native-event: #b2b2b2;
   --dark-color-scheduling-profiler-native-event-hover: #949494;
-  --dark-color-scheduling-profiler-native-event-warning: #ee1638;
-  --dark-color-scheduling-profiler-native-event-warning-hover: #da1030;
-  --dark-color-scheduling-profiler-native-event-warning-text: #fff;
   --dark-color-scheduling-profiler-priority-background: #1d2129;
   --dark-color-scheduling-profiler-priority-border: #282c34;
   --dark-color-scheduling-profiler-user-timing: #c9cacd;
-  --dark-color-scheduling-profiler-user-timing-hover:#93959a;
+  --dark-color-scheduling-profiler-user-timing-hover: #93959a;
   --dark-color-scheduling-profiler-react-idle: #3d485b;
-  --dark-color-scheduling-profiler-react-idle-selected:#465269;
-  --dark-color-scheduling-profiler-react-idle-hover:#465269;
-  --dark-color-scheduling-profiler-react-render: #9fc3f3;
-  --dark-color-scheduling-profiler-react-render-selected:#64A9F5;
-  --dark-color-scheduling-profiler-react-render-hover:#2683E2;
-  --dark-color-scheduling-profiler-react-commit: #ff718e;
-  --dark-color-scheduling-profiler-react-commit-selected:#FF5277;
-  --dark-color-scheduling-profiler-react-commit-hover:#ed0030;
-  --dark-color-scheduling-profiler-react-layout-effects:#c88ff0;
-  --dark-color-scheduling-profiler-react-layout-effects-selected:#934FC1;
-  --dark-color-scheduling-profiler-react-layout-effects-hover:#601593;
-  --dark-color-scheduling-profiler-react-passive-effects:#c88ff0;
-  --dark-color-scheduling-profiler-react-passive-effects-selected:#934FC1;
-  --dark-color-scheduling-profiler-react-passive-effects-hover:#601593;
-  --dark-color-scheduling-profiler-react-schedule: #9fc3f3;
-  --dark-color-scheduling-profiler-react-schedule-hover:#2683E2;
-  --dark-color-scheduling-profiler-react-schedule-cascading:#ff718e;
-  --dark-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
-  --dark-color-scheduling-profiler-react-suspend: #a6e59f;
-  --dark-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --dark-color-scheduling-profiler-react-idle-hover: #465269;
+  --dark-color-scheduling-profiler-react-render: #2683E2;
+  --dark-color-scheduling-profiler-react-render-hover: #1a76d4;
+  --dark-color-scheduling-profiler-react-commit: #731fad;
+  --dark-color-scheduling-profiler-react-commit-hover: #611b94;
+  --dark-color-scheduling-profiler-react-layout-effects: #611b94;
+  --dark-color-scheduling-profiler-react-layout-effects-hover: #51167a;
+  --dark-color-scheduling-profiler-react-passive-effects: #611b94;
+  --dark-color-scheduling-profiler-react-passive-effects-hover: #51167a;
+  --dark-color-scheduling-profiler-react-schedule: #2683E2;
+  --dark-color-scheduling-profiler-react-schedule-hover: #1a76d4;
+  --dark-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
+  --dark-color-scheduling-profiler-react-suspense-rejected-hover: #e4c00f;
+  --dark-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
+  --dark-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
+  --dark-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
+  --dark-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
   --dark-color-scheduling-profiler-text-color: #000000;
-  --dark-color-scheduling-profiler-react-work-border:#ffffff;
+  --dark-color-scheduling-profiler-react-work-border: #ffffff;
   --dark-color-scroll-thumb: #afb3b9;
   --dark-color-scroll-track: #313640;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
   --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
   --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
+  --dark-color-scroll-caret: #4f5766;
   --dark-color-shadow: rgba(0, 0, 0, 0.5);
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
@@ -252,6 +251,10 @@
   --dark-color-toggle-text: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
   --dark-color-tooltip-text: #000000;
+  --dark-color-warning-background: #ee1638;
+  --dark-color-warning-background-hover: #da1030;
+  --dark-color-warning-text-color: #ffffff;
+  --dark-color-warning-text-color-inverted: #ee1638;
 
   /* Font smoothing */
   --light-font-smoothing: auto;
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 20d5d7b1cb0c..070dafeb1d8e 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -103,14 +103,7 @@ export function loadHookNames(
 
     let didTimeout = false;
 
-    const response = loadHookNamesFunction(hooksTree);
-    console.log(
-      'loadHookNamesFunction:',
-      loadHookNamesFunction,
-      '->',
-      response,
-    );
-    response.then(
+    loadHookNamesFunction(hooksTree).then(
       function onSuccess(hookNames) {
         if (didTimeout) {
           return;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index e7816b017e47..cfe900de6580 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -244,7 +244,7 @@ function throwException(
     }
 
     if (enableSchedulingProfiler) {
-      markComponentSuspended(sourceFiber, wakeable);
+      markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);
     }
 
     // Reset the memoizedState to what it was before we attempted to render it.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 70fda7bef55c..d7f4803620ba 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -244,7 +244,7 @@ function throwException(
     }
 
     if (enableSchedulingProfiler) {
-      markComponentSuspended(sourceFiber, wakeable);
+      markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);
     }
 
     // Reset the memoizedState to what it was before we attempted to render it.
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 67baa02ea2e4..2ab49efe0e13 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -109,13 +109,23 @@ function getWakeableID(wakeable: Wakeable): number {
   return ((wakeableIDs.get(wakeable): any): number);
 }
 
-export function markComponentSuspended(fiber: Fiber, wakeable: Wakeable): void {
+export function markComponentSuspended(
+  fiber: Fiber,
+  wakeable: Wakeable,
+  lanes: Lanes,
+): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
+      const eventType = wakeableIDs.has(wakeable) ? 'resuspend' : 'suspend';
       const id = getWakeableID(wakeable);
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO Add component stack id
-      markAndClear(`--suspense-suspend-${id}-${componentName}`);
+      const phase = fiber.alternate === null ? 'mount' : 'update';
+      // TODO (scheduling profiler) Add component stack id if we re-add component stack info.
+      markAndClear(
+        `--suspense-${eventType}-${id}-${componentName}-${phase}-${formatLanes(
+          lanes,
+        )}`,
+      );
       wakeable.then(
         () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
         () => markAndClear(`--suspense-rejected-${id}-${componentName}`),
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index b5d544d0a48d..62da05e0e851 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -208,7 +208,7 @@ describe('SchedulingProfiler', () => {
       `--react-init-${ReactVersion}`,
       `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--suspense-suspend-0-Example',
+      '--suspense-suspend-0-Example-mount-1-Sync',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
@@ -239,7 +239,7 @@ describe('SchedulingProfiler', () => {
       `--react-init-${ReactVersion}`,
       `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--suspense-suspend-0-Example',
+      '--suspense-suspend-0-Example-mount-1-Sync',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
@@ -278,7 +278,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--suspense-suspend-0-Example',
+      '--suspense-suspend-0-Example-mount-16-Default',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
@@ -317,7 +317,7 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--suspense-suspend-0-Example',
+      '--suspense-suspend-0-Example-mount-16-Default',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,

From dfd9d6263654faff364a8990a19f69548cf35e92 Mon Sep 17 00:00:00 2001
From: Ilham Syahid S <ilhamsyahids@gmail.com>
Date: Mon, 2 Aug 2021 20:32:17 +0700
Subject: [PATCH 0734/1603] [DevTools] Optimize Images yarn command (part 2)
 (#21968)

---
 .../improveImages.mjs                         |   90 ++
 .../react-devtools-extensions/package.json    |   10 +
 yarn.lock                                     | 1392 ++++++++++++++++-
 3 files changed, 1460 insertions(+), 32 deletions(-)
 create mode 100644 packages/react-devtools-extensions/improveImages.mjs

diff --git a/packages/react-devtools-extensions/improveImages.mjs b/packages/react-devtools-extensions/improveImages.mjs
new file mode 100644
index 000000000000..385624a26bd0
--- /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/package.json b/packages/react-devtools-extensions/package.json
index 4600dde3f7c4..1b85e113cbf4 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -16,6 +16,7 @@
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",
+    "improve-images": "node ./improveImages.mjs",
     "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
   },
   "devDependencies": {
@@ -33,18 +34,27 @@
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
     "babel-preset-minify": "^0.5.1",
+    "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",
     "raw-loader": "^3.1.0",
     "rollup": "^1.19.4",
     "rollup-plugin-babel": "^4.0.1",
diff --git a/yarn.lock b/yarn.lock
index e124de2be665..fbb9f335e6a3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2095,6 +2095,11 @@
   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==
+
 "@sinonjs/commons@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.7.0.tgz#f90ffc52a2e519f018b13b6c4da03cbff36ebed6"
@@ -2116,6 +2121,11 @@
   dependencies:
     defer-to-connect "^1.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@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -2266,6 +2276,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.2.3.tgz#ef65165aea2924c9359205bf748865b8881753c0"
   integrity sha512-PijRCG/K3s3w1We6ynUKdxEc5AcuuH3NBmMDP8uvKVp6X43UY7NQlTzczakXP3DJR0F4dfNQIGjU2cUeRYs2AA==
 
+"@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/source-list-map@*":
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
@@ -3034,6 +3049,18 @@ aproba@^1.1.1:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
   integrity sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==
 
+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"
@@ -3154,7 +3181,7 @@ array-filter@~0.0.0:
   resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
   integrity sha1-fajPLiZijtcygDWB/SH2fKzS7uw=
 
-array-find-index@^1.0.2:
+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=
@@ -3764,6 +3791,11 @@ base64-js@^1.0.2:
   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"
@@ -3799,6 +3831,54 @@ big.js@^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"
@@ -3878,7 +3958,7 @@ bonjour@^3.5.0:
     multicast-dns "^6.0.1"
     multicast-dns-service-types "^1.1.0"
 
-boolbase@~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"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
@@ -4139,6 +4219,14 @@ buffer@^5.1.0:
     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"
+
 builtin-modules@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
@@ -4234,6 +4322,19 @@ cache-base@^1.0.1:
     union-value "^1.0.0"
     unset-value "^1.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"
@@ -4247,6 +4348,14 @@ cacheable-request@^6.0.0:
     normalize-url "^4.1.0"
     responselike "^1.0.2"
 
+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"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -4260,11 +4369,24 @@ camel-case@^4.1.1:
     pascal-case "^3.1.1"
     tslib "^1.10.0"
 
+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@5.3.1, camelcase@^5.0.0, camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
+camelcase@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
+  integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
+
 camelcase@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
@@ -4302,6 +4424,16 @@ caseless@~0.12.0:
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+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@2.4.2, chalk@2.x, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -4319,7 +4451,7 @@ chalk@4.1.0, chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^1.1.3:
+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=
@@ -4338,6 +4470,14 @@ chalk@^3.0.0:
     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"
+
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -4561,7 +4701,7 @@ clone-buffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
   integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg=
 
-clone-response@^1.0.2:
+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=
@@ -4597,6 +4737,15 @@ co@^4.6.0:
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
   integrity sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=
 
+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"
+
 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"
@@ -4691,7 +4840,7 @@ commander@^2.18.0, commander@^2.3.0, commander@^2.6.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
-commander@^2.20.0:
+commander@^2.20.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==
@@ -4823,6 +4972,11 @@ console-browserify@^1.1.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"
@@ -4833,7 +4987,7 @@ constants-browserify@^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:
+content-disposition@0.5.3, 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==
@@ -5055,7 +5209,7 @@ cross-spawn@^7.0.0:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-cross-spawn@^7.0.2:
+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==
@@ -5155,6 +5309,11 @@ css-loader@^4.2.1:
     schema-utils "^2.7.0"
     semver "^7.3.2"
 
+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@^1.1.0, css-select@~1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -5165,6 +5324,16 @@ css-select@^1.1.0, css-select@~1.2.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
+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-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"
@@ -5174,11 +5343,32 @@ css-selector-tokenizer@^0.7.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@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@^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@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -5189,6 +5379,13 @@ cssesc@^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"
+
 cssom@^0.4.4:
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.4.4.tgz#5a66cf93d2d0b661d80bf6a44fb65f5c2e4e0a10"
@@ -5206,6 +5403,13 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+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"
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -5319,7 +5523,7 @@ decamelize@3.2.0:
   dependencies:
     xregexp "^4.2.4"
 
-decamelize@^1.2.0:
+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=
@@ -5334,13 +5538,66 @@ decode-uri-component@^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:
+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-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"
+
 deep-assign@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/deep-assign/-/deep-assign-3.0.0.tgz#c8e4c4d401cba25550a2f0f486a2e75bc5f219a2"
@@ -5632,7 +5889,7 @@ domutils@1.5.1:
     dom-serializer "0"
     domelementtype "1"
 
-domutils@^1.5.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==
@@ -5662,6 +5919,41 @@ dot-prop@^5.2.0:
   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"
@@ -5864,7 +6156,7 @@ errno@^0.1.3, errno@~0.1.7:
   dependencies:
     prr "~1.0.1"
 
-error-ex@^1.3.1:
+error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@@ -5924,6 +6216,28 @@ es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
     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-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"
@@ -6389,6 +6703,17 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
+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"
+
 exec-sh@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
@@ -6435,6 +6760,28 @@ execa@^4.0.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"
+
+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"
@@ -6522,6 +6869,21 @@ express@^4.17.1:
     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"
@@ -6661,6 +7023,11 @@ fast-safe-stringify@^2.0.7:
   resolved "https://registry.yarnpkg.com/fast-safe-stringify/-/fast-safe-stringify-2.0.7.tgz#124aa885899261f68aedb42a7c080de9da608743"
   integrity sha512-Utm6CdzT+6xsDk2m8S6uL8VHxNwI6Jub+e9NYTcAms28T84pTa25GJQV9j0CY0N1rM8hK4x6grpF2BQf+2qwVA==
 
+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==
+
 fastparse@^1.1.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
@@ -6766,6 +7133,14 @@ figgy-pudding@^3.5.1:
   resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.2.tgz#b4eee8148abb01dcf1d1ac34367d59e12fa61d6e"
   integrity sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==
 
+figures@^1.3.5:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
+  integrity sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^4.1.0"
+
 figures@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
@@ -6796,6 +7171,46 @@ file-loader@^6.1.0:
     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"
@@ -6806,6 +7221,20 @@ filename-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
   integrity sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=
 
+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"
@@ -6861,6 +7290,14 @@ find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
     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"
@@ -6876,6 +7313,20 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.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"
+
 findup-sync@3.0.0, findup-sync@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-3.0.0.tgz#17b108f9ee512dfb7a5c7f3c8b27ea9e1a9c08d1"
@@ -7034,7 +7485,7 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-from2@^2.1.0:
+from2@^2.1.0, 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=
@@ -7152,16 +7603,45 @@ get-caller-file@^2.0.1:
   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-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, 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"
@@ -7176,6 +7656,11 @@ get-stream@^5.0.0, get-stream@^5.1.0:
   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"
@@ -7188,6 +7673,16 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+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"
@@ -7392,6 +7887,18 @@ globby@^11.0.1:
     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@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-6.1.0.tgz#f5a6d70e8395e21c858fb0489d64df02424d506c"
@@ -7461,6 +7968,49 @@ got@^6.7.1:
     unzip-response "^2.0.1"
     url-parse-lax "^1.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"
@@ -7488,6 +8038,11 @@ graceful-fs@^4.1.0, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
   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.15, 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"
@@ -7536,6 +8091,11 @@ has-ansi@^2.0.0:
   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"
@@ -7551,6 +8111,11 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+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"
@@ -7561,6 +8126,18 @@ has-symbols@^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-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"
@@ -7739,6 +8316,11 @@ http-browserify@^1.3.2:
     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, http-cache-semantics@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.0.3.tgz#495704773277eeef6e43f9ab2c2c7d259dda25c5"
@@ -7878,6 +8460,11 @@ human-signals@^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==
+
 humanize-ms@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/humanize-ms/-/humanize-ms-1.2.1.tgz#c46e3159a293f6b896da29316d8b6fe8bb79bbed"
@@ -7931,6 +8518,11 @@ ieee754@^1.1.12, ieee754@^1.1.4:
   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==
+
 iferr@^0.1.5:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
@@ -7953,6 +8545,53 @@ ignore@^5.1.4:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.1.8.tgz#f150a8b50a34289b33e22f5889abd4d8016f0e57"
   integrity sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==
 
+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"
+
 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"
@@ -7971,6 +8610,11 @@ import-lazy@^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-local@2.0.0, import-local@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
@@ -7992,6 +8636,13 @@ imurmurhash@^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"
+
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -8084,6 +8735,14 @@ interpret@^1.4.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
+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"
@@ -8141,6 +8800,14 @@ is-absolute@^0.2.5:
     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"
@@ -8160,6 +8827,11 @@ is-arrayish@^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.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"
@@ -8174,6 +8846,13 @@ is-binary-path@~2.1.0:
   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:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -8194,6 +8873,11 @@ is-callable@^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-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"
@@ -8291,6 +8975,11 @@ is-extglob@^2.1.0, is-extglob@^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"
@@ -8313,6 +9002,13 @@ is-generator-fn@^2.0.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@^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"
@@ -8350,6 +9046,11 @@ is-installed-globally@^0.3.1:
     global-dirs "^2.0.1"
     is-path-inside "^3.0.1"
 
+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-lambda@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-lambda/-/is-lambda-1.0.1.tgz#3d9877899e6a53efc0160504cde15f82e6f061d5"
@@ -8360,6 +9061,11 @@ is-mergeable-object@1.1.1:
   resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz#faaa3ed1cfce87d6f7d2f5885e92cc30af3e2ebf"
   integrity sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==
 
+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"
@@ -8370,6 +9076,11 @@ is-negative-zero@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.0.tgz#9553b121b0fac28869da9ed459e20c7543788461"
   integrity sha1-lVOxIbD6wohp2p7UWeIMdUN4hGE=
 
+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"
@@ -8380,6 +9091,11 @@ is-npm@^4.0.0:
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-4.0.0.tgz#c90dd8380696df87a7a6d823c20d0b12bbe3c84d"
   integrity sha512-96ECIfh9xtDDlPylNPXhzjsykHsMJZ18ASpaWzQyBr4YRTcVjUvzaHayDAES2oU/3KpljhHUjtSRNiDwi0F0ig==
 
+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@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-2.1.0.tgz#01fcbbb393463a548f2f466cce16dece49db908f"
@@ -8409,6 +9125,11 @@ is-obj@^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-cwd@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
@@ -8440,6 +9161,11 @@ is-path-inside@^3.0.1:
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.2.tgz#f5220fc82a3e233757291dddc9c5877f2a1f3017"
   integrity sha512-/2UGPSgmtqwo1ktx8NDHjuPwZWmHhO+gj0f93EkhLB5RgW9RZevWYYlIkS6zePc6U2WpOdQYIwHe9YC4DWEBVg==
 
+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"
@@ -8454,6 +9180,11 @@ is-plain-object@^3.0.0:
   dependencies:
     isobject "^4.0.0"
 
+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-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"
@@ -8488,6 +9219,14 @@ is-regex@^1.1.0, is-regex@^1.1.1:
   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"
@@ -8500,11 +9239,23 @@ is-relative@^0.2.1:
   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"
@@ -8520,6 +9271,18 @@ is-string@^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"
@@ -8527,6 +9290,13 @@ is-symbol@^1.0.2:
   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, is-typedarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
@@ -8539,7 +9309,14 @@ is-unc-path@^0.1.1:
   dependencies:
     unc-path-regex "^0.1.0"
 
-is-utf8@^0.2.1:
+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=
@@ -8667,6 +9444,14 @@ istanbul-reports@^3.0.2:
     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"
+
 jasmine-check@^1.0.0-rc.0:
   version "1.0.0-rc.0"
   resolved "https://registry.yarnpkg.com/jasmine-check/-/jasmine-check-1.0.0-rc.0.tgz#117728c150078ecf211986c5f164275b71e937a4"
@@ -9070,6 +9855,15 @@ jetpack-id@1.0.0:
   resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
   integrity sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y=
 
+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-select@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/js-select/-/js-select-0.6.0.tgz#c284e22824d5927aec962dcdf247174aefb0d190"
@@ -9300,6 +10094,11 @@ jszip@^2.4.0:
   dependencies:
     pako "~1.0.2"
 
+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"
@@ -9317,6 +10116,13 @@ jws@^3.2.2:
     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"
@@ -9474,6 +10280,17 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
   integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
 
+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-runner@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
@@ -9678,11 +10495,24 @@ log-driver@^1.2.7:
   resolved "https://registry.yarnpkg.com/log-driver/-/log-driver-1.2.7.tgz#63b95021f0702fedfa2c9bb0a24e7797d71871d8"
   integrity sha512-U7KCmLdqsGHBLeWqYlFA0V0Sl6P08EE1ZrmA9cxjUE0WVqT9qnyVDPz1kzpFEP0jdJuFnasWIfSd7fsaNXkpbg==
 
+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"
+
 loglevel@^1.6.6, loglevel@^1.6.8:
   version "1.6.8"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.8.tgz#8a25fb75d092230ecd4457270d80b54e28011171"
   integrity sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==
 
+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"
@@ -9690,6 +10520,14 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4
   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@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
@@ -9697,6 +10535,11 @@ lower-case@^2.0.1:
   dependencies:
     tslib "^1.10.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"
@@ -9707,6 +10550,16 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
+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@^4.0.1:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
@@ -9748,7 +10601,7 @@ magic-string@^0.25.2:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-make-dir@^1.0.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==
@@ -9810,11 +10663,16 @@ map-age-cleaner@^0.1.1, map-age-cleaner@^0.1.3:
   dependencies:
     p-defer "^1.0.0"
 
-map-cache@^0.2.2:
+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"
@@ -9850,6 +10708,16 @@ mdn-browser-compat-data@1.0.25:
   dependencies:
     extend "3.0.2"
 
+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"
@@ -9904,6 +10772,22 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+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.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -9988,6 +10872,11 @@ mime-db@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.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.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.24"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
@@ -10044,7 +10933,7 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@1.x, minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.5:
+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==
@@ -10469,7 +11358,7 @@ normalize-css-color@^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.5.0:
+normalize-package-data@^2.3.2, normalize-package-data@^2.3.4, normalize-package-data@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
   integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
@@ -10491,6 +11380,15 @@ normalize-path@^3.0.0, normalize-path@~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"
@@ -10503,7 +11401,7 @@ npm-bundled@^1.0.1, npm-bundled@^1.1.1:
   dependencies:
     npm-normalize-package-bin "^1.0.1"
 
-npm-conf@^1.1.3:
+npm-conf@^1.1.0, npm-conf@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/npm-conf/-/npm-conf-1.1.3.tgz#256cc47bd0e218c259c4e9550bf413bc2192aff9"
   integrity sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==
@@ -10569,14 +11467,14 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^4.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"
 
-nth-check@~1.0.1:
+nth-check@^1.0.2, nth-check@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.2.tgz#b2bd295c37e3dd58a3bf0700376663ba4d9cf05c"
   integrity sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==
@@ -10617,6 +11515,11 @@ object-copy@^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.7.0, object-inspect@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.8.0.tgz#df807e5ecf53a609cc6bfe93eac3cc7be5b3a9d0"
@@ -10654,6 +11557,16 @@ object.assign@^4.1.1:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
+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"
@@ -10662,6 +11575,15 @@ object.getownpropertydescriptors@^2.0.3:
     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.omit@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/object.omit/-/object.omit-2.0.1.tgz#1a9c744829f39dbb858c76ca3579ae2a54ebd1fa"
@@ -10677,6 +11599,15 @@ object.pick@^1.3.0:
   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"
@@ -10713,7 +11644,7 @@ once@~1.3.0:
   dependencies:
     wrappy "1"
 
-onetime@^5.1.0:
+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==
@@ -10773,6 +11704,15 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
+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"
@@ -10798,6 +11738,13 @@ os-browserify@~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-homedir@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
@@ -10857,6 +11804,16 @@ override-require@^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"
@@ -10872,11 +11829,30 @@ p-each-series@^2.1.0:
   resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.1.0.tgz#961c8dd3f195ea96c747e636b262b800a6b1af48"
   integrity sha512-ZuRs1miPT4HrjFa+9fRfOFXxGJfORgelKV9f9nNOWw2gl6gVsRaVDOQP0+MI0G0wGKns1Yacsu0GjOFbTK0JFQ==
 
+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-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.0.0, 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"
@@ -10910,6 +11886,13 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+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-map@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
@@ -10922,6 +11905,16 @@ p-map@^3.0.0:
   dependencies:
     aggregate-error "^3.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@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
@@ -10929,6 +11922,20 @@ p-retry@^3.0.1:
   dependencies:
     retry "^0.12.0"
 
+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-try@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
@@ -11036,6 +12043,15 @@ parse-diff@^0.5.1:
   resolved "https://registry.yarnpkg.com/parse-diff/-/parse-diff-0.5.1.tgz#18b3e82a0765ac1c8796e3854e475073a691c4fb"
   integrity sha512-/qXjo9x/pFa5bVk/ZXaJD0yr3Tf3Yp6MWWMr4vnUmumDrE0yoE6YDH2A8vmcCD/Ko3tW2o0X+zGYh2zMLXshsg==
 
+parse-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"
@@ -11070,6 +12086,13 @@ parse-json@5.0.0:
     json-parse-better-errors "^1.0.1"
     lines-and-columns "^1.1.6"
 
+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.0.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@@ -11147,6 +12170,13 @@ path-dirname@^1.0.0:
   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"
@@ -11182,11 +12212,32 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
+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-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-type@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
+  integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
+  dependencies:
+    graceful-fs "^4.1.2"
+    pify "^2.0.0"
+    pinkie-promise "^2.0.0"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -11216,6 +12267,11 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+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"
@@ -11236,7 +12292,7 @@ picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
-pify@^2.0.0:
+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=
@@ -11694,6 +12750,11 @@ pupa@^2.0.1:
   dependencies:
     escape-goat "^2.0.0"
 
+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"
@@ -11704,6 +12765,15 @@ qs@~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@^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.8.2:
   version "6.8.2"
   resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.8.2.tgz#36cb7e452ae11a4b5e9efee83375e0954407b2f6"
@@ -11906,6 +12976,14 @@ read-package-json-fast@^1.1.1:
     json-parse-even-better-errors "^2.0.1"
     npm-normalize-package-bin "^1.0.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@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
@@ -11915,6 +12993,15 @@ read-pkg-up@^7.0.1:
     read-pkg "^5.2.0"
     type-fest "^0.8.1"
 
+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@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
@@ -11988,6 +13075,11 @@ readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+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==
+
 readdir-scoped-modules@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
@@ -12026,6 +13118,14 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
+redent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
+  integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
+  dependencies:
+    indent-string "^2.1.0"
+    strip-indent "^1.0.1"
+
 regenerate-unicode-properties@^8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
@@ -12199,11 +13299,23 @@ repeat-string@^1.5.2, repeat-string@^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==
+
 request@2.88.0, request@^2.83.0, request@^2.88.0, request@~2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
@@ -12324,7 +13436,7 @@ resolve@^1.18.1:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
-responselike@^1.0.2:
+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=
@@ -12597,7 +13709,7 @@ sanitize-filename@^1.6.2:
   dependencies:
     truncate-utf8-bytes "^1.0.0"
 
-sax@>=0.6.0:
+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==
@@ -12668,6 +13780,13 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+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"
@@ -12699,7 +13818,19 @@ semver-diff@^3.1.1:
   dependencies:
     semver "^6.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+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.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -12900,7 +14031,7 @@ sign-addon@2.0.5:
     source-map-support "0.5.16"
     stream-to-promise "2.2.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2:
+signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
@@ -13017,6 +14148,27 @@ sonic-boom@^1.0.0:
     atomic-sleep "^1.0.0"
     flatstr "^1.0.12"
 
+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"
@@ -13186,6 +14338,15 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+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"
+
 sshpk@^1.7.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.1.tgz#130f5975eddad963f1d56f92b9ac6c51fa9f83eb"
@@ -13216,6 +14377,11 @@ ssri@^7.0.0, ssri@^7.0.1, ssri@^7.1.0:
     figgy-pudding "^3.5.1"
     minipass "^3.1.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.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
@@ -13304,6 +14470,11 @@ stream-to-promise@2.2.0:
     end-of-stream "~1.1.0"
     stream-to-array "~2.3.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=
+
 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"
@@ -13360,6 +14531,14 @@ string.prototype.trimend@^1.0.1:
     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"
@@ -13368,6 +14547,14 @@ string.prototype.trimstart@^1.0.1:
     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.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"
@@ -13440,6 +14627,20 @@ strip-bom@4.0.0, strip-bom@^4.0.0:
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878"
   integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w==
 
+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-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"
@@ -13450,6 +14651,13 @@ strip-final-newline@^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@^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@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
@@ -13465,11 +14673,25 @@ strip-json-comments@^3.1.0:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+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"
@@ -13535,6 +14757,25 @@ supports-hyperlinks@^2.0.0:
     has-flag "^4.0.0"
     supports-color "^7.0.0"
 
+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"
@@ -13575,7 +14816,7 @@ tar-fs@^1.8.1:
     pump "^1.0.0"
     tar-stream "^1.1.2"
 
-tar-stream@^1.1.2, tar-stream@^1.5.0:
+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==
@@ -13618,6 +14859,19 @@ targz@^1.0.1:
   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@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-1.2.0.tgz#458b83887f288fc56d6fffbfad262e26638efa69"
@@ -13740,7 +14994,7 @@ through2@~2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
-through@2, through@^2.3.6:
+through@2, 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=
@@ -13755,7 +15009,7 @@ time-stamp@^1.0.0:
   resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3"
   integrity sha1-dkpaEa9QVhkhsTPztE5hhofg9cM=
 
-timed-out@^4.0.0:
+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=
@@ -13859,6 +15113,14 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
+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"
@@ -13895,11 +15157,28 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
+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=
+
 traverse@0.4.x:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.4.6.tgz#d04b2280e4c792a5815429ef7b8b60c64c9ccc34"
   integrity sha1-0EsigOTHkqWBVCnve4tgxkyczDQ=
 
+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"
+
 truncate-utf8-bytes@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/truncate-utf8-bytes/-/truncate-utf8-bytes-1.0.2.tgz#405923909592d56f78a5818434b0b78489ca5f2b"
@@ -14041,7 +15320,25 @@ ua-parser-js@^0.7.18, ua-parser-js@^0.7.9:
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
   integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
 
-unc-path-regex@^0.1.0:
+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=
@@ -14145,6 +15442,11 @@ unpipe@1.0.0, unpipe@~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"
@@ -14264,6 +15566,11 @@ url-template@^2.0.8:
   resolved "https://registry.yarnpkg.com/url-template/-/url-template-2.0.8.tgz#fc565a3cccbff7730c775f5641f9555791439f21"
   integrity sha1-/FZaPMy/93MMd19WQflVV5FDnyE=
 
+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.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
@@ -14308,6 +15615,16 @@ util.promisify@1.0.0:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
 
+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"
@@ -14841,6 +16158,17 @@ when@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"
@@ -15198,7 +16526,7 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-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=

From d1a58da55d42cb1455d4f0da50f2e223723d3b2c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 2 Aug 2021 09:32:46 -0400
Subject: [PATCH 0735/1603] Optimized DevTools extension images

---
 .../icons/128-deadcode.png                    | Bin 5201 -> 2101 bytes
 .../icons/128-development.png                 | Bin 5201 -> 2101 bytes
 .../icons/128-disabled.png                    | Bin 4792 -> 1936 bytes
 .../icons/128-outdated.png                    | Bin 4162 -> 1992 bytes
 .../icons/128-production.png                  | Bin 4577 -> 1920 bytes
 .../icons/128-restricted.png                  | Bin 4792 -> 1936 bytes
 .../icons/128-unminified.png                  | Bin 5201 -> 2101 bytes
 .../icons/16-deadcode.png                     | Bin 638 -> 338 bytes
 .../icons/16-development.png                  | Bin 638 -> 338 bytes
 .../icons/16-disabled.png                     | Bin 494 -> 288 bytes
 .../icons/16-outdated.png                     | Bin 558 -> 313 bytes
 .../icons/16-production.png                   | Bin 546 -> 272 bytes
 .../icons/16-restricted.png                   | Bin 494 -> 288 bytes
 .../icons/16-unminified.png                   | Bin 638 -> 338 bytes
 .../icons/32-deadcode.png                     | Bin 1318 -> 561 bytes
 .../icons/32-development.png                  | Bin 1318 -> 561 bytes
 .../icons/32-disabled.png                     | Bin 1092 -> 490 bytes
 .../icons/32-outdated.png                     | Bin 1095 -> 550 bytes
 .../icons/32-production.png                   | Bin 1068 -> 474 bytes
 .../icons/32-restricted.png                   | Bin 1092 -> 490 bytes
 .../icons/32-unminified.png                   | Bin 1318 -> 561 bytes
 .../icons/48-deadcode.png                     | Bin 2001 -> 826 bytes
 .../icons/48-development.png                  | Bin 2001 -> 826 bytes
 .../icons/48-disabled.png                     | Bin 1564 -> 730 bytes
 .../icons/48-outdated.png                     | Bin 1570 -> 787 bytes
 .../icons/48-production.png                   | Bin 1674 -> 714 bytes
 .../icons/48-restricted.png                   | Bin 1564 -> 730 bytes
 .../icons/48-unminified.png                   | Bin 2001 -> 826 bytes
 28 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/packages/react-devtools-extensions/icons/128-deadcode.png b/packages/react-devtools-extensions/icons/128-deadcode.png
index b6ecc88e13ac082da3b82b48179b8a665fef6214..8eaefb2c0764f8522b63be4094b0200e4e8b390d 100644
GIT binary patch
delta 2099
zcmV-32+a4<D76rf8Gi!+008vhk@)}s0CiAIR7C&)0NF}7*-ALsN;ug{IN3@#BOf3x
zA|g5@BSj}AQ7R@}EGTC$DRVL_el;wKH!hVrFQ7d!tUofhLNvlfHO@yj*-ALuRYcxl
zQQ&M{<9BN1gLdbRgX)=&?4_LUu&D97wDZQn_R`Jx-P-!-=70V4^Z)<<o{%2|00006
zbW%=J06<WWpWpX{RaXE22Wd$}K~#9!?OWM`qbd+h&va|{%@tHMxcvVo-ne5?pb6>m
z<<?WTQ8^T~oGN6qY30xNkN*$l=ljn_l&^m}dWYd_9RIJsiu~=z|Mpjs?^WkN=-|s=
zQEEH*Srfp|(|`Z`Rprlm7TDY2&$<A9HvY=;KY*nG2&Kedd~d=c`bhvWuNuj-Xztb^
zew6LaRYpGqfELv#Wg2R34YNv=^dkV`3P=_%8@^UqU=BbUzn&TP-XKNp%!~nqCGy&;
zlx-mrZsa`g|BOumbXw*0hyhIpb9hXZ5Ip)HinQ^TfPb}s%D@aj2<Oo|L{*A5PI_Q`
zR87!oAu$7x%6g3Y!I)$x#pK4I(Lrtopc(7|E;6tTnZh<(T%id7g1>@vHkQ}F1RPlt
z0e)fvAXX?b=q6o~eyJ;tSX;8d6ZHU?atd)j?OYS|8U=C_0F8F>kWME7LgDVsZ^i%=
zo=iprWq+)D-UL9YdqKbYwI%2P5CZ_s>*u1BCfug#C0q`G8)$(2Du8^n0rHywDt(&L
z=KahRK%oZE#p5pNDG>1aSiHaubvz~My)pY8H&nWjFl<z*({5o3K(&TJo09V};#XCq
zu%W^@7clvH%YTYVIxfRs$ORF;ya{l=yu!0)WPh9uDf(gp17OR2<cz3N;0ufh3k1CZ
zP&P=0n*pB>19JfK=_}}SP+n9@;XGq84JNtFh?2GTRV$H1+L1xoz|(|wOI4bY(#G6!
z#>?t;;T&VMF9INysbnSqqO8y=dJyex`kG!1fTU`@CxJ3LmIa1^z6>DF!Apuq-Suew
z?SG*T8g)PnDa)kCli&paePuZ=WanB`TX42@9G6LJ`xFZn0+<e8iZQOx)|=fTM56s>
z<qQNFKwM7jClxXptMu6=5_44lpit9e{2c-a`Ed6m8Ye=8kguWH520)>M%6_ledD1X
zz%c!ig`(QiG3}=F{giMDe6p;txw1itrhm9vX&+F@f|dsxyd(o;WQ4$!0ERxx#8^n5
zdpWE^+|$l_%I@R>5>}_LQqoqyu;93X*;8JoqP08<S;xs5<OJ-HcchizeT57MkYO4c
z_)lk@LrC*>mLNNCI*YcIl&ks*F$N$~6?#GITvHdEjxQh}!rh6goDulr2GFWl>3>|)
zZq3O8auS9p(}*Syys(GCd^5G*R2}3ei|1OBxI@j{HLqx@DJeq<K%wFA#k>Lp70fh8
z>2#)>$<ihIe(`9%I~l-Ee8RoY@JtQ?XnT5{eF#5WhzJi{Eo<xPo1YK>)Ao~6=)N-m
z?B~B{eYAWHKnByG9>Cpt9YCy0bboy_h%N+hssFvcW&@<slu`Xw1Yc-`2hlC@*`&A|
zDpFl3^&=H-c(D&xuQh?Ko-+^$K%%Cb<E~9H6NqZX*yqLsj=EAu(B%e1n@rUwnNz`O
zgk@_?pqmUq08mvW(=FPRj!4O<zIYTaIJ)r}nvR*G@7`YTHpQ4G9p8luHh&t>GA$qI
z2?1nnMf*%pf@lZ{iDwG{_84g{kgnneqlBDFlq?eY9!kl;qDV_XIa;o6aC;XZjD<l_
zX*wP*FbbdoGFURx((+;dt>Upn%cDx2vTrtYiz`+&RRx_XOoR>CG9!TBb5*#!?d7;I
zro+28pqDp&<<g7@ZeL^(6MtqMf~<VG-k)+g+E{AnvXOV*TK28gBqz(NW6Gu7YQZCU
z9IC^iDE4#WZW|ivxXd|S-XDMv@}}w3tfWA=Zh8RLaafr;Duk~!C_=eEQt*^9k+hvB
z^L2dhsDg5Ot49=Na*w7dHN3kg131A@BzWZY{a!KrCW3VyceuC!z<;^pg7QK*CT+R^
z0H`gYTiD&{C<h+sj`rC#>k~HKo0GV2I#FbhPHsNPN3~ph-wXg7osdNA!I?tOL*O~e
zu4n{+V@+`9v{eQk*T$mJ`v3|>x#C=8T57wJYb;Q~g8c$TzuUVWpuIQOx4NA4){cp~
zEeHMnj>N}<IRH&t?0<rl276`2_PJfNK`?!T9OW1T&~5tMFq4~7_L)$m2Qa_?zelnT
zG>z@?>X~faY5_P{qvnECjwkQ4o7dAq6sCk7mJ@#mz!{En$5MjE9n1i@a$?#7z1Ww7
zt*({c-o96H@gXHl0@3}vx3<pbz2KzeqQcT#%>$95@7I@NJAY?~qy%qk=@h>dK&%PH
zov$4|$>bb?on3tMT##$*-@YncaW8c*-%ZB|A0S~%J$9{Sd00wtTCQ#gAV-@fNm(Z-
z_dFPwW8>`X>YD;ckoIA{bpbyZ0SL}*N?0)dvaf2zmPS`T=Kz7bl~aP}n*-=7^1P1)
zWT=)PPkN09Eq@2le?Y(!N@HOU6tWcHid*+n0Q?mFID(*2@#bF7$Nk}aar}>IVA7^U
zzh4%b$DaSX%mWA>^TW5vXYc<CfZFZH;U9QrxGt)K-UaZ?2^lY|oTrg$<M_CM|C#`p
zmHm>$_nQC?ng;zp0pRSdy|*TS_htRVZmS>nTm8V}>MTb-*FW^S`mx{j4?eGd^n3lo
d?`t0a{|}<;s&8DX6R-dP002ovPDHLkV1j^F_<H~V

literal 5201
zcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h
z1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!
zQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD
z=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!
z2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|
z`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|
z6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t
zcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x
za3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc
ztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*
z@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY
z32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1
zD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}
z)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b
zVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc
zs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY
zq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw
ze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>
z1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j
zMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s
z0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ
zHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;
z1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH
z*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E
z1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@
z20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=
zt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO
z^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#
zN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S
z((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D
z5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V
zMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy
z(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3
z9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O
zoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t
z;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p
zVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=
z;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2
z<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g
z)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G
zD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!
zNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{
zk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-
zX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv
zS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&
zF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu
zhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru
z9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi
zHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq
zhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=
z@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl
zt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq
zlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ
zxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N
zwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa
zKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L
zlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`
ztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY
z`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&
zZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!
zM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI
z>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g
z0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(
ziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!
z(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa
zQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C
zl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N
z_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O
z83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk
z2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P
z%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak
zk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d
zP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R
z3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|
z+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB
z&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY
zkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i
z252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg
zkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU
z^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;
zKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*
zEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y
zzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;
zWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY
zwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d
zi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD
z1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN
z@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8
z-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD
z27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6
z!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b
zF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10
ztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj
z*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v
zO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi
zNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g
ziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b
z;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM
z;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000
LNkvXXu0mjfgeJQI

diff --git a/packages/react-devtools-extensions/icons/128-development.png b/packages/react-devtools-extensions/icons/128-development.png
index b6ecc88e13ac082da3b82b48179b8a665fef6214..8eaefb2c0764f8522b63be4094b0200e4e8b390d 100644
GIT binary patch
delta 2099
zcmV-32+a4<D76rf8Gi!+008vhk@)}s0CiAIR7C&)0NF}7*-ALsN;ug{IN3@#BOf3x
zA|g5@BSj}AQ7R@}EGTC$DRVL_el;wKH!hVrFQ7d!tUofhLNvlfHO@yj*-ALuRYcxl
zQQ&M{<9BN1gLdbRgX)=&?4_LUu&D97wDZQn_R`Jx-P-!-=70V4^Z)<<o{%2|00006
zbW%=J06<WWpWpX{RaXE22Wd$}K~#9!?OWM`qbd+h&va|{%@tHMxcvVo-ne5?pb6>m
z<<?WTQ8^T~oGN6qY30xNkN*$l=ljn_l&^m}dWYd_9RIJsiu~=z|Mpjs?^WkN=-|s=
zQEEH*Srfp|(|`Z`Rprlm7TDY2&$<A9HvY=;KY*nG2&Kedd~d=c`bhvWuNuj-Xztb^
zew6LaRYpGqfELv#Wg2R34YNv=^dkV`3P=_%8@^UqU=BbUzn&TP-XKNp%!~nqCGy&;
zlx-mrZsa`g|BOumbXw*0hyhIpb9hXZ5Ip)HinQ^TfPb}s%D@aj2<Oo|L{*A5PI_Q`
zR87!oAu$7x%6g3Y!I)$x#pK4I(Lrtopc(7|E;6tTnZh<(T%id7g1>@vHkQ}F1RPlt
z0e)fvAXX?b=q6o~eyJ;tSX;8d6ZHU?atd)j?OYS|8U=C_0F8F>kWME7LgDVsZ^i%=
zo=iprWq+)D-UL9YdqKbYwI%2P5CZ_s>*u1BCfug#C0q`G8)$(2Du8^n0rHywDt(&L
z=KahRK%oZE#p5pNDG>1aSiHaubvz~My)pY8H&nWjFl<z*({5o3K(&TJo09V};#XCq
zu%W^@7clvH%YTYVIxfRs$ORF;ya{l=yu!0)WPh9uDf(gp17OR2<cz3N;0ufh3k1CZ
zP&P=0n*pB>19JfK=_}}SP+n9@;XGq84JNtFh?2GTRV$H1+L1xoz|(|wOI4bY(#G6!
z#>?t;;T&VMF9INysbnSqqO8y=dJyex`kG!1fTU`@CxJ3LmIa1^z6>DF!Apuq-Suew
z?SG*T8g)PnDa)kCli&paePuZ=WanB`TX42@9G6LJ`xFZn0+<e8iZQOx)|=fTM56s>
z<qQNFKwM7jClxXptMu6=5_44lpit9e{2c-a`Ed6m8Ye=8kguWH520)>M%6_ledD1X
zz%c!ig`(QiG3}=F{giMDe6p;txw1itrhm9vX&+F@f|dsxyd(o;WQ4$!0ERxx#8^n5
zdpWE^+|$l_%I@R>5>}_LQqoqyu;93X*;8JoqP08<S;xs5<OJ-HcchizeT57MkYO4c
z_)lk@LrC*>mLNNCI*YcIl&ks*F$N$~6?#GITvHdEjxQh}!rh6goDulr2GFWl>3>|)
zZq3O8auS9p(}*Syys(GCd^5G*R2}3ei|1OBxI@j{HLqx@DJeq<K%wFA#k>Lp70fh8
z>2#)>$<ihIe(`9%I~l-Ee8RoY@JtQ?XnT5{eF#5WhzJi{Eo<xPo1YK>)Ao~6=)N-m
z?B~B{eYAWHKnByG9>Cpt9YCy0bboy_h%N+hssFvcW&@<slu`Xw1Yc-`2hlC@*`&A|
zDpFl3^&=H-c(D&xuQh?Ko-+^$K%%Cb<E~9H6NqZX*yqLsj=EAu(B%e1n@rUwnNz`O
zgk@_?pqmUq08mvW(=FPRj!4O<zIYTaIJ)r}nvR*G@7`YTHpQ4G9p8luHh&t>GA$qI
z2?1nnMf*%pf@lZ{iDwG{_84g{kgnneqlBDFlq?eY9!kl;qDV_XIa;o6aC;XZjD<l_
zX*wP*FbbdoGFURx((+;dt>Upn%cDx2vTrtYiz`+&RRx_XOoR>CG9!TBb5*#!?d7;I
zro+28pqDp&<<g7@ZeL^(6MtqMf~<VG-k)+g+E{AnvXOV*TK28gBqz(NW6Gu7YQZCU
z9IC^iDE4#WZW|ivxXd|S-XDMv@}}w3tfWA=Zh8RLaafr;Duk~!C_=eEQt*^9k+hvB
z^L2dhsDg5Ot49=Na*w7dHN3kg131A@BzWZY{a!KrCW3VyceuC!z<;^pg7QK*CT+R^
z0H`gYTiD&{C<h+sj`rC#>k~HKo0GV2I#FbhPHsNPN3~ph-wXg7osdNA!I?tOL*O~e
zu4n{+V@+`9v{eQk*T$mJ`v3|>x#C=8T57wJYb;Q~g8c$TzuUVWpuIQOx4NA4){cp~
zEeHMnj>N}<IRH&t?0<rl276`2_PJfNK`?!T9OW1T&~5tMFq4~7_L)$m2Qa_?zelnT
zG>z@?>X~faY5_P{qvnECjwkQ4o7dAq6sCk7mJ@#mz!{En$5MjE9n1i@a$?#7z1Ww7
zt*({c-o96H@gXHl0@3}vx3<pbz2KzeqQcT#%>$95@7I@NJAY?~qy%qk=@h>dK&%PH
zov$4|$>bb?on3tMT##$*-@YncaW8c*-%ZB|A0S~%J$9{Sd00wtTCQ#gAV-@fNm(Z-
z_dFPwW8>`X>YD;ckoIA{bpbyZ0SL}*N?0)dvaf2zmPS`T=Kz7bl~aP}n*-=7^1P1)
zWT=)PPkN09Eq@2le?Y(!N@HOU6tWcHid*+n0Q?mFID(*2@#bF7$Nk}aar}>IVA7^U
zzh4%b$DaSX%mWA>^TW5vXYc<CfZFZH;U9QrxGt)K-UaZ?2^lY|oTrg$<M_CM|C#`p
zmHm>$_nQC?ng;zp0pRSdy|*TS_htRVZmS>nTm8V}>MTb-*FW^S`mx{j4?eGd^n3lo
d?`t0a{|}<;s&8DX6R-dP002ovPDHLkV1j^F_<H~V

literal 5201
zcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h
z1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!
zQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD
z=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!
z2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|
z`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|
z6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t
zcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x
za3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc
ztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*
z@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY
z32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1
zD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}
z)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b
zVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc
zs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY
zq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw
ze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>
z1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j
zMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s
z0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ
zHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;
z1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH
z*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E
z1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@
z20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=
zt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO
z^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#
zN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S
z((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D
z5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V
zMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy
z(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3
z9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O
zoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t
z;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p
zVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=
z;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2
z<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g
z)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G
zD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!
zNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{
zk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-
zX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv
zS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&
zF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu
zhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru
z9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi
zHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq
zhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=
z@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl
zt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq
zlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ
zxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N
zwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa
zKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L
zlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`
ztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY
z`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&
zZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!
zM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI
z>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g
z0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(
ziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!
z(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa
zQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C
zl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N
z_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O
z83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk
z2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P
z%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak
zk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d
zP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R
z3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|
z+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB
z&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY
zkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i
z252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg
zkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU
z^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;
zKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*
zEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y
zzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;
zWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY
zwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d
zi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD
z1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN
z@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8
z-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD
z27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6
z!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b
zF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10
ztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj
z*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v
zO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi
zNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g
ziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b
z;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM
z;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000
LNkvXXu0mjfgeJQI

diff --git a/packages/react-devtools-extensions/icons/128-disabled.png b/packages/react-devtools-extensions/icons/128-disabled.png
index 67b1c9a31a6dfe22567ce26e385b0be06022e3c2..eff8120d00eb449c37490b3033ed9d62d9382b76 100644
GIT binary patch
delta 1933
zcmV;82XgqhC6Eu08Gi!+008vhk@)}s07XztR7C&)000000000000000000000001G
zWo4C>m9eq0!^6YS(9qi2+Tr2h=jZ3_?CkLH@bvWb_xJbt`T6_%`~Cg>|Ns9)hx-8l
z000(rQchC<2M7-k7aAxxMN?vMevO-{x5m`s@&8V$TmS$D<bO#-K~#9!?OWM`n;;Z*
z+DTXiMDYJVwK0ma-K!ar`Z7GV6NJOv7wEcW{Q17!|KqrQ|LNlK^<Q^iF?{X&|Gi%_
z{)YX(?-z~lOV7X2;Ol<jnC0MhC4k#Q|L&KLKi5fMki*-x0B+s=;_(aMEC9wiyPuxh
zE5Y9hK-%d!Mt>uYrV=^$W%6YBn*eY(?Zaz|Or>UuhkgqHIc3ApbKB1(Bkcf+{pXX_
z)+M?!(=-F1zOwA(OIZ-nL~F<JPuU7!rK+8GBwTOeFr-8vL-@hzr?wEa0P>^_0L{-4
z6k_tRjI#jD?xZ0L75X*+x}>8Bo2f!hTr!b7X)v|{cz<p-WPel{8w?<u3ohCMfYp~^
ztBj5FFT_@O62b3V07!s{WIeQJfz^|(NLznG6LA0vJc10z9ucGWB%o~p@T6|tr1Qi;
z0P6nytr-BI$!tg9CH8#_0FNyYxIaq*27omHcrJfrr4VzgVHTbTU>hi)J_=ymWq^GW
zz=XRg)PL`rRsaqLu-fC*=>Z7ru`NEKhFF}^2W>Q;QA1FTqHV<lyIt1`0OBE8T=KYE
z{Am(^47p}spvu25@sCT~v8NyK1)|R0K2yGNs(Ve*><xK!VU`=fCH5&jB1FI!BBGih
z2m-*>HcVX%?6Da*0x+ga@W-asP2jNBD9K6U%YT|evPHgTA~J#QoTUv`_k3lQZwpGF
z;x;Plr`LzIwTSjb0BmX<rUig74kh$9&}n#14+CHtrh897>*!q#1AiHS9J58-FjqYm
zeH&n-F&jk6l_@^&$qN8NX1OzRRV|JtoJ$^O%b<1nN|BQQ((Qe0;~biAu1pZI{2G4%
zp??G*eIh?P@@Q(py^Dx_RQNE;>1*+O4uINi_8|6yu*l>iVfGNE&2A^1*uytVaRA%#
zy`nMM_3n1{aXp2mz!SFS#g(oaXvW;q!Jx8I0x5rtGEyAEQm!Uh3Iwp#SrTDk!S~wS
z39FU41J8o6*?swfT13^1W0!l+l1*-rJb#`=9dUMQNGgYR4O&^fu3+i_OpQWY{Ig0Y
zub1!kuzaPHt%fq8t{`gw1eEBJMY&QH6nRN9<rru%iuke1!YT<WS5mDZg`ZHBjER5=
z)ldRZu#WN4x2n?NkSu40Jn@*;ow`KS9Fn0WpH*C*OkDz8T1ijZC9Lc5da=0|r+=(O
z9)Ue07H8TV09w-vOVW}lQ3RIftr9JM<^U90PtqAraR7_jOlZ3GA^?+Zfdi132tWWN
z=ICfHRXBiPp<j{#HX&)0F7~JZP=$@8$Z2$44S`_G7pgXt09c`-8i^TL0icJ;wwrwi
z^T3v~tH<dxT6P)d3{)pMAi<Wa6Mu&maAiiW2mpud=gPG7P-Fz`;A+xcJ$jUd$L)%`
zS5bFg{=PQFwoi$T&o5J(<w;)?!{Cj9cp&((JZf{xH^gUa?$Ntt*&1p!MyVKvW=~Sn
z>uMpP<wZy);&?9{NSZk@R4ku7Gb)b>@7z|MWLKB>2*REixaqLsvB!-(6@RvE``p%K
zVfog7o2)Ftaxop1-DKnjqr8CZnWp0hiAmIe^@e5fy`Au?(<&xBrJRV;v$E-1re-V>
zZ)b#xPE9Ag5vOA*S&e&~99niRJLb0NR^QJghdd29^Qg)4^Ywuo!uTvYZDy{=8VK``
zgsZ{j8UAYp3R>1joYhJ}Re#y2fN#o@mQ(ZxHKJH}@+@GkPV#NY`M(2PB;r4>6`STN
z+1OSoB`tfuqkI0eJtLDv(doEWDkweCI6VTOb|qv&4fc3zXN}@CQp7eE*rEvj5V?rJ
zVbj2GS_aci?fc~n^q^l6G|*QkHZ?4O-tCaNbq;imcyr4JSYb7YLw{PD(r59%3P6KJ
zbRCC><0sm7VADrNq38gc=Mz1f6971pEV1oh@T?X9$O3j%1&QV2&E0c^ge&Jg+7~&|
zxBF@HI;~R;Sd92708v8#yf(-`3SdJ3Ut1J!0l<C^pjie`HQI~CBYKBKwAulQ*Y2=e
zEJLdrO1RLmURxMFc7K=3wca7&kdY6G_DF&tD6kyV?2ao(*e(>3J)NxF=j)r@@sev4
zX0G>fpCS}X%B!~S#O>xY-SbQlx5ipgp&w`^Q(;X2Xrbs^`Wzp4YqrJRCV806p8&8r
zy)C<7TedXPnovC0!qOI%Yy=Q45ZL|^4o5vu1!RUxn_F#J`F{}sj_;Q1>g9+EV_7w6
z;LQN;<+={CjSg<3GyovOx$P?u{PF&$URd;T=y9+nk8*lL@9zQdIN4lu7#|5IIWd{{
z+FGk6J+<`jGoN1o*FSc<{JG!d4<0Xn@_GHE*UO*%UjOj<`lsL5KYqXR`Tsv>6lFgz
TI1=Ch0000<MFvhpu0mjfRCcN1

literal 4792
zcmV;p5=ZTcP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU^T1iAfRCwC#on34eRT{_pK`90cRf%Gk
zR*fIo+TcfG6j0;Umc|&pSQalxG=XA_8na-$@CL=0ctMaGBt!~{CSJf26Af`IUKyoj
zjftY$C4NN<T||Plg|cl$WY3Ru%s73XnKLtI-g)WFlS~4A=biV=Isfx~KhLSH38y(z
zSEIS=Yf8G9=$yGG%{4J~iBzlnods_$7kx&7VPpyrkpP%)uDRu$%}6?9u2KIVf;+sq
zT>KeLv!~X4LIOa!^NT?Z=Bo3=L7h+Lmy2H<nme`TzXPDToRh*)vj>1VrM6#4V$J7x
z04S-LbO8X3<vbLY8tY2-Uu-c@SI$APsRTg5X;w84?(MhV?zsH&%jfa$;o;#^4?XnI
zz{N1$wzjs8*|TTQ|MABk2Tq?pJ$moG_x4xon280nRMUXI`s%Bdt*xyq=ggV2RQmjv
zUw#=FA0Hq1{`>FWyY05ydh;CX+O=!vJ^SplT`esw%P+a)l4W&ub@Q})M@L8ZeDTE>
zd#Vi#RRe$zKm2g%k|j&F%$hZ;)%H8T{r20bpMU;&&+gs3d!Bsq$)lAT>#MK6+PZ4h
zs`c~d&tDn$yFdN(Q_q403!X0l5ZLuM-gx7dG|ym%z4_*wuVe{?Gz%Z(VoyEw)QTND
zcAP3a09-77aECqj+;f{<PA;te<(FT6=87w>=yvr?0NdQ$ysppyU`IXv_~ZM-WM>jW
zG#Gii&V`Qf*=L`1End8Mi|rUECMGV(c<wifU`N=!Uw{4ex|?pgX-{FzK-j4^u}tKl
zLx<MX*4F;XyB>S&vG$KX`e+5a{MTQ9RargHy!F;wcaDvX?PT{R-SvE*=Y%aj<6u1R
zyz@>cV>HU(3a-Y+#!kk2{P^)#0HpNY>#x6lW76?m^c;ZQ|HKnd989w_qAUiF8}#+{
zt&XF8W6s@w|NT3|6jA{C<(FUf*l-yZdF$4#dnJx=<j9fdues)$p27j(<jIp8C7GIp
zEyAWdIyznmTQGLw)mLA=Ijv5@j{okv?_P;JMnJHA`}ThYxd{p(+@f$Iz-ZFTgMT}7
z=1gxAnaD0|XlPi%B5U_7T)1$3lt>sE8QBuH_^^7zwK|iG5vBCoZ@-;p{=pUChJ^wE
zELPgBufP8K3u&Iq4o4QVtEA88&Yjx@D-KRLpco$?->aE-h!J!T?DsU*1;CMXmj@nr
zV0obc(B9tOA=$<*Y<S$o*w~m^(&y|rEDu2Fm(Q9Wfvh+8-{s1KckI})9)TNn6bb-M
zO--$WjCN)Yu}iVB(I+%3!R)%dcpo+8%wzdz^e%l0Mqil*B%=f5CIWI%0%5no9S4ie
z!cWd3FI%>3S6p91mNxqN^XLCNZ6S;aSvWs{pWb-mjZ7kafNI~qeJeCuT$1-$J7_#-
zQ8iF50FYR2mVR;c0_3=+9Qqd@u;k&L^K_Cz03gVYZFgr{y`ZP3XHD2Wm}!;BIWXq#
zwBPXZ9ttS}qIRYWLfh}|?%o-853bot?8LKY&z`EO5-LneSeUjSv<~uO$Atwzm@nT2
z;o*x~d_M@fy1KSx8Kg0$<)T6ZAS{ySntu4<hi5bopBAYDEO3mhKp@%upMU=OP>}#o
zk(VW~LkvLrj3^wgW6eYa1e-Q(+E}SMsbor9Rq6n)<u1=dsgpj#P3(nW(fUaqk?w<Y
z3=R%<yMEVMvt|`r1WZm&9?jAWf^`$mm%M*i9Klp9qKR+>=~-=UZ5s(UI|e{&ULvt7
z05Cp2K1~GNaKjDDTs?n_At~C(L=z~Iz5_?l0!XBUxeD1zoUT$Lv1$N7!9-S?F)W*~
zZ}9KP`FG!acTJeb5zZj_B;X`bJ_K7bKx?((h%*`hRLcke=y0*SVA;}Vwq8Csgr*dd
z#gul8S6y{ghYd%p6y;JHMu6u0`Sa5z*oEAeK4VuKu5%QV&=R1%lIcha8{ynE*~W&;
zO!Iks^UXJXg#v)LD8WT1bZZk5=03mPz@(yCYdL}Z&OP_sv)9GA$r3g@w%=pj>|O(y
zqX3MEW>ip10(xFP04TSlP`q=&T^3B-gry@hVVhBlTrGt70Nez8%yraQ7Xu!sd7lR#
zd~kp8{`&g*_QG)hqj3)y00d3J<%UgP*wO41*99XLQL4<Cacy%Mk%1XW0*IOeU^qx$
zp5x680LW4%C&(TbE?hVx12I~>!<c}%Mg}V`0&uEad+oK$jj6V@lI+}L&6bXuMU@^K
zif0}r?-c<6vhVJ@?_PP?WtXk21Y5_e_tHx*?QxZ5goUwf+qV4@C|Epmjk*Gi2Zl=Z
z637$)1Y?X6*PX`1!+U46Z8~lI$KP>7QX(OWOD?_i(lxH%1<OOSBv`QR+qZWT%)wiD
z%PqGo!aBjRg>NJ6yOT!l63h~{xV+46`Lj{vHlI6pZuERYGK;(0O!!}Umh>BZCVh|J
z)V|~5I(hQs4(WHN6gl;Kh6Da3&3y1(<}{0UbLI(zP2y;w{*4f<EvuKjZYW0Vat-x#
z5|REsG&Hn1%bh~s0V!~Uf)^DqlIDZhgH1jp-(^mjTjtnho`Mq*0IMhTYP0A;g-0q9
zWs<4&lfKUcNHKoQEQ&ZPp~T`0lGrtMgAxFv-VyQA-rn9ty`+sU!5re+c9p%Hn0*+T
zcNgr>hK-Gljs4S1-fD?GO84`3NxW#RRJuQ_i+7R60GpQXKYRA<k>I_E6X{;&2oY#A
zr_4QTkn(+!ebMatzemY6Pj*EO(sqKhiP0uAtBd#1-aYuPaR8n~m*R72W7%GbM1ZD&
z`&rb96DN8$Y}l~FMkY%vGUy_e+^F7t6n(^z{hqe&|65#>OA|#wD@2;BFcBx|RxiHz
z;@T^(ys|q?#M<^hNF@S5rN;jJY%s32s_hcEjCYSFYW(-u>?n!b_{9_!hV8huXZfEY
z?cgLF%Nu``^^~ay2$T0|<&iX*o_VF2eUp=u|F(HH-;ZO4F_AVPhV_P-g@DtwzQT8T
zZ-*eTyD>~L(UhM!*Wlpb22G}Fz_Zz{+9E^|lWYTmFwP`>W((RVZV<K}wp`H~02<O0
z{8;EqNzd2VY?SjQYTULUNGiUxaRYQ$%BThcxScIGuCq}>NQ#s`b6G}>5{CjM1ZG6L
zc-O97>ynP!mT==nWf75PCMA<<<HoJ)$|pe%qx9P-i;q6~=nGci>!=&hKqc*y?isGj
zs6YMmQ>%7qymV9{g*NWEg!Ucfd80+G?YLcgDz!vb5@T&LnIi$PV8MdFNnWok8XjYc
z+2qLEOt>`eBm{`)2p)D1U}Qr?J&Oom7T(E^KmJ%;i-#Y6xH}a9v~FHfqa#;D55Ba!
zALP4?=Nm2%S-eV|Ak44NF3l>u%X1Yj(2)uNQa3MX-@bkCWd(pun>O`^O{C544?20$
zl1&pQSUb)y?Q^62W!eq&^y$<6QjjVY0HkhS9?Q$>MVLs=07$y~^CUc<+Gkm}ok`ks
zqAD9i81_9c=}yd(!gK{MmA%@iE`qHb)pUcb288_9;ta5~YMn^vy6di6uYGp=?YDPl
z`P*bv2mfZ%jVu%ZhYueXlPK@J^UkiUUL;C$z2lBMBCC5`D_bKYBazP|Cn8Mov^C3;
zZW<}|Oln3I3jjDdB(u!MHcm<;j)r{>7htlZo+CMxQkYr2X?A}cvn&Z|PM-q@4(v$<
z0L|pXHl_sI^^35uHqINH$+mSWMG<T?s;D$-_xr)^dgEx-&^F_?0swXM5*Oe{iFLbt
z84iE2R1#aGxBy}xEf>HX-M@c-sKbi|wE?89Qz`C-(W;@N#vRKFIC$`&+Cs$@2#{lv
z-Ku%mY>r!5XDCe%LYtCuT+Y(&*N(NZ1-Z@QYiApf91^GDrB&o9EE$2wT-uan?fE=c
zOUJeeL-T#xyhVRB%_hpJ<tTdT>0u%6nv6ohndJl2MC1gd%}tZSr{2qiC4<^drfsbP
zV6jcu(B{JfrWWE(n#0KahGjI_<}lQxNeYe1SY-m^q*c{~#MJ$O(l`WZTyb^}JDYc4
zoc@dF$H~;u#vCk8k>-m<j59yXXA~Dpm=2aKE7&H>CJqoJ7B5YbO%7hAF54VMEuGB<
zY&Hv@HX|#MD;U2vXY+)GZc*r{rQ>jjD2-h@Kx%Y!bXve^U|>MBceP5PtcdrK6jl_@
zpwC|maZ@a-Srt6ru=D-QUsyng=W@_S(rn;Vu>iD8Dq*7H;Jg6Zs$q?Xu^57GWG&<@
zIWedtlH8ko-?slxT4I5;29#P{UIKFv^i&)%Ka_tlUr|M+-U()Dy`D}=!&t=5&d!at
zO`k!ovC;b}52O7{Fuy)5Z$9k6$!*)VEy+4ssGWBhR+X&PG+?e#McmZX)D`DwT5Nn*
z=NdRI4<}HAuRd+}@2Dfz^QsTDDG}GcYxI|cX_8cUw@*I#WV7oyM<)FN(gFclN`gbM
z$&#N9YYiK+Jc<>$Y;*i8<9p<hM>^;eV0QP-jg5^RNf)0Sh%B2$WZEDCc1-}pMQ0Gi
z0xeaEaCylO5*M)9jY&x3I(}A8zJiP9R=lebHUD_)t+z5yfT>uIAg?!29C??N;2^`p
z!+%h`Y@0C}ouoCG3B@j!0xmA8(yd`C4gd)ZVFji|A;60DP{~El9RQx3eC@T@4i{;$
z+2z%CdU$Sq0*!22Chdma-rjX&Ba@1qw#ic7i|us`9U2<yKXBl{1+y(^!sh*cxp4qV
zsnX0pf6G|paeaOL{Hza}imRM@eS^_8=>4lHZ<0Bf)v>u%%>ksY+3XbQ-YKUCSFdDp
zddiy?AD38f)PiaN^JI3|B8L$UFr)kY0RU}nZE%5N0YEx8$77Rm$hUL)2L}h|X&Exa
zE^NJLQ`~8(1SC!$O=Fr#J(3G|eEbvuT7#3D*5<_-Bc*}GISUYuqS^Z#E|qqSIJSa+
z%d_4g7XV1P{jQFWB@Il9zM*VIC9>kU;;4D)GxQS|eS9TZpQj>NHI+d&IqWt>X&Gk&
zNuS}&(T;ub&KA~A8gp3<9Rz5eZSivffOJBb%LA2>^)#=LJ|mJR<tM-$q@C!=eaDu=
zkPTNX6bEp9ZVrhVTCM`tf<G?-uAsSk`}+D;yY|Ps;&vA;02&$^D#G$$+gg2`cS<<i
zK#K1}aFHzR^THn=Z_~KI6+Qj*)2p?!00DvKJ0J|3bxC)WSS*wX$jTFjQmCB;s3~8V
zlELF;U6NLHU1$JgNq|5*C0x?@F(tDc4@b<E0H`ow8AO4A#fMvDdFBAr)YLS;1VDhY
zY&ubGBpn}HC;&)ikjvxaCBn`|=?inZ;0M^cb?e?dz$hK4J!1hNnL$MJvidztJ+gUi
zJZ^x%GZ8Zs0XGYZ;b>t1AZfvd17tGcG*Hk?J!HOS9RLEGP9#Z)EaBka@;W~_7XV0F
zu-O$(U7`5)skG6;!=A#YDTaUm;JB_h(wbQ2)&4FQ0B8|0S51^)-^g+;>C~_7d)9$g
z=SXOn`bJl+T?}VQ)Xi(gSpkxFZq=$)>(f3LmJj>ZLaccBf~KBV=ct9G$qu4sFY0JG
z8)|83>9$ddXFLFoA3r|L&B~5Vs(isc*r~95P1&P>0}r2M=kqtRbEWp{o=D)hxUsRZ
zok=+r;>5NPcE$rh>o;thx#O4hMDxhD)$;g|@rMo_T4Pg24L}G2X$~WzhWu9C0~}E(
zrA#A4kE=q@B$QiLFvO14>g=P6CEyhI-FIJiRHYHmN|MLN^8sU2whkQQgAYFF(H7A=
z^-D`Lb9v~-MF#+_Y}&6Joj7r#*UO{BSAe-_d%|X#qtyItTU)%~PWBGD_Wl-C`W@%^
zxETomNUOI`L#}J+<MuzWr9A5ass;dIq987@qd0IPE0&5Jrzxb1!zl7*{kbcFej;fj
zO;=AAo(YAWW;v-mo8REKY>u|k6w+#0{Hoyqej9$#qD9ZxX2}AYW5<rYm)B$xU|PI*
z@k-m0cN9iWJgKHbFRBUvepX9ysK4QY=ePHYEsZVSmv!7eE*L2BGG=0{Kjn?_4i66x
zy#N0D{ndEdNmT-%q=M-HC6xdusRTetc>&;DISqxSa{yqnoQJ~FBmkHw=b^AP;Q^o&
z0|jLN9sr<`ay|-27uLMqhX%kfyPTIo(3z?0cL3B(DTDmKp`4!?P5(33?==YZL8YMN
z1T%i;|Dgb-R=Kg!T+ISNO1gLzz7fgfuZ{TPoT;m^1j9wS=#x`iT{ZRpFTen&T)1>{
Sp@}{K0000<MNUMnLSTaTkuNs@

diff --git a/packages/react-devtools-extensions/icons/128-outdated.png b/packages/react-devtools-extensions/icons/128-outdated.png
index 05792b762878cd366098a4afaabebd86480c38d3..ddf7cd16e2cfe7aa22c02e3a94ad5e90d46d00f2 100644
GIT binary patch
delta 1989
zcmV;$2Rit|Ajl7p8Gi!+008vhk@)}s0CG@FR7C&)03aYBARr(hARr(hARr(hARr(v
zEh8>2E;~CWJUl!}NGeK7N>)`ZSXfwOVlZZAW^r&cbaZroeKvxEf{ltgkdTm?mpz@G
zov5WitE;QIxw*r?M#sm;(9B8I)z#kGP2=O^>*rAM@$vceQ-A;e|8<vr&j0`b26R$R
zQvg6vkDuT7gjH7n00#d_L_t(|+U;B0Vw*4wZMP<IUFuRsTneGY0sj9N*92eWD>kI#
zWqR6DKnF=ay4XBCO!Dh#xBrK-d;0YN<?)|t=NKN9{@?pe<hRiOwBJacHhq6-gU9`b
za*c!CmH>9&>wj;*sr=e50!19|wgs?z*l#TV0Ym~I1*IiHaTjMfrIg_N0l;-XPSRD`
z%(bX!<i*9E0F>g1^N&?fZ_?s>0H{YpSm9M~UfO5t0hFUH9dQ|-I<91BEdZ>vcHqI4
z^<culi?`Af^;!Te_hx<z?^1$bx)D$%mDl+d9HtxtS$_wB8$fwIlYXXf;dL@Tq-jtW
zWr7(1(~FhbDsM%MOI-zj+n#DxnVf=F0k}P*HGUNOIv(R9`Wj=^5yN^50ARNpQ43cY
zcS>Kl1E^jDpt$+f@dxqJg>bbrN7U`n0B(9JXL8_f5bL6Lxf<R6v<AS<hPgZAFi1F+
z`~GfzA%8{y@H_wkVk#Eg9}mEr__{g$lMB}X2>TGv(k(R^>#hJ|E%0Li8WjWCPXS;7
z0Chy(r}I>}I0#FP2RwP7-enay-!2#HA5V<b`MvZbJdpJ={=q-*&jUUm@&(W#$@p$p
zv$a(0i{fbk^hnE0St^f203fb%Kn7r@<FNzLbANkkJz(Y2Y&7a5Ui&o8biAq_*t?1<
zu8vV9^=OxFqM)Oz0O<J`lae+q8@<xD70pRXHjXMvzmq*8v~I^(>04T4q8?dSlukue
z&Bg`N))5ui9Dr<GD{J}!Ty{Y_D+ydzECqlHm(RH`a&G}R_Pu@wUIxHu^sgSRN`g7%
zG=Cv?WqXp-MnuhA2)F@|#?VeP*z5EtK-_})(9|wh3jk!$_N<4GVNSj=7^;9xL7of%
zfl7yczj+A^slB2vbqE99R&bv@A<3oh`)MGRsTbk3M_}yIfG(x;M~feTdVMtrVsbUt
z;~cl6UPeBST7(7w+&P9ol`t!bnEI5`Nq;nkhYbK(?`pK=tF-1j;i{X4huElrt_g@m
zO^7rALciJQcGFAcW&~EQ-jwhXHIG{Z5P)cO3b$D^rVlHSM!y}>r&>i5w+0}9%GY8b
zK*F_KKR|%N)l~`r;%~BQ2eVgZmZ(Bk#{g*kBuDJritRjwtv|IX!)hE#9U`;zet!c1
z6I8L8SOZXmZYiwUq@w`n3^tligc^V#Z}3NgEa)md%n=%003bXtt@d#MP%vpP0??X4
z6$C)WNEWmKWZ}}3!~tld*B}58L|t3!DinlC22ecE`(Y!y#0@P&mSO+}fcgg=YS)HE
z5K)n200jUs?~QDXFu_6tfMmo8w|{YW`6JcK5i1$#=884|tOuxP?p{x;+9=38=@|8C
z2GA;^+O_e*!?WU#R_VZ9kW>jIXxD_|ku0|oK_)Cz2TL-XLV}K}SnLLkZK0RioeEPj
zJJ5hh{cswF^GkeRkg1Kq5&;q@l`Xo!({d{fe(N8G%ORmN0voVRA)krC`+w27wgA}Z
zZMextN^gi^XWC5FWdn0UkHbk5c0=b0!0?>Z9h25KWvGIs7P0XC;rfTq#Q8vGY{avM
z-i}Xj8|Q&7D(IoZMF1FHQzs;tGJ7Ud^MRmync3OoDD@Ag1v4UIO-WR}ORq;tlw1#u
z*c0RD0m$2;DOp~n4#nUS`G14}&dbJhBvC(f!0VvNpG5%Zv@2dzkz>-#<RB#;Hktv@
zC}zbut=m4{0dIpL$0Y!mRjOu$7f29G@94!Q4!V3CkH>R>jbg_2Zo-3vWB(#J=ob8k
z02?jZG3kte%kBB8;GoIzU(<hHk^y+OJg~k|#z!mKG(d2W7LTX9ZGT$jFh!uwPScWu
z^ab&n3ZV8?AQZGpt%IIF-2l$10Q?(|jU4FIj?v1?;07?fF9G1pJV@*rm#$&N$p^q@
zqs5!oJP?`d3<)4%6VNdYK&WTWdhfo>*$?3Id^Z4MDcE)DJK$f92V88l<_t+;O)1Sf
zh)11P7`&taU@-s;{eQ3yx)#LWxd0+E*(f3iahm?;%Mg~=yYPUV8kqX^I>;qosZ3ag
z#x|Dz7en3obow%WdQZ#+u5A}_pwH58)<K`<vbbV8q@`mA6^gTT_B6vN1bNI~{IyX`
zK|+1~qhk(oHUP|)hcPvw(G1E1ypGB8`w#;FvQf<Tz2<4zyMMY)PaUi!2um^`&#?gb
z_)zYm<+62dT}kq2X}Y|>zP^1~KcAujh#6r=^PDznSJSyRXF15hMzd$joks&a$L2qy
z^(!`-1%T~dg!y*kPVoSSLo5K}^lIRA|4#t`2iLFE6WWVB#_K=r;{jX`lUxrE^=*~U
z3;;i(^&gS|{63`o2e3VW%|CYA{Bys}KX}~ylh5rxdfoi9-|atq-u~0??LU6s^7H?{
XXjxY|0rlVu00000NkvXXu0mjf)q<+~

literal 4162
zcmV-I5WVk-P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU><Vi$9RCwC#U0sM3$rbKVQCS!nvY3rK
zE=*98C@ktjqA#Lxqald+`y!&7k!6h=SAEf#L?K`d2|h$43Hsu=S<n|n2lYV>W>yK&
z^+9F9SpwofbRiL8aF&1rA?dGoj<h{>>ZhyfR`u;Z&|c@>zJ0sveCM}Lo$5#=)YH?m
zCVg3*9!v3O(omIXC_M(!qkm{<=mK|A2g7(Uysu$;TY;fB1;Rk_gNXv>|2};=o*rGz
zxU~&|mp|@GX?S?}3JZXg`H=dbG~?B_v?#?uPYQzmaR3;T{D%4MPxJGdpd)AV|JsaA
zt?2vk2_}sF(btSe?I`1U$5^O$z8Q~N(%K1QaehPfq}2ex(q<fLOG{w_{@08{eQ827
z1PuThsxeK9^~M%0T9nM3IWs#z&!0a}9z1xE9r%BYG<WXY?0)e|bnDiw<niOj*%2c}
z<pW^wcJ11gtXQ!knKo@2dmcc5fjxKbT=xG^gnPujE?>Sp1FY(v`}+ElvuDpX01(mE
zty?qZ%LXx)fz<`7hydI@d-g=55uyOV;lqcM4I4ICT>}Gp^ypEqKp@83-YZPl#*G_;
zYOiPj0Leda;DEF1VNeeqJeWzEOI1%A$`t{yD_5=z?$1o@>gxJcNSlA^)F~~dK7IN$
znLd5G@?4w)2?f*c-Mg2(c=5v88O1$9-RnyC-Me?Q-=8vNiWF41*K60V)mH<YIddi(
zV9r*;wqLz^b)2V-@2p?H{uOVVlQP)bGTHzPg2Y4eRSd^Hf|2;0yhH=w0Ap`&FY7D7
z6u8t@l>q<-=jP3u!q31o9a|0nU~pA78NR`hBS(zFIrt?qfRWDu=Bv~=m=Cavu7~Hu
z^VSXku=^tEg8e>u@}zP6jq7pRgfz;wZQGR00+?_uPGa$WXeJXt5eP0{zWg$;k*9g{
z<^}Twf@K0lHWf@VWj^@`P^FM0ZXf{;P6~;3@7|qBKF54WI~+Gt<`Zx@N!Rr++6Dmm
z3|~=I+Yr?0;>C+un+oQ0AOPbzFQ1qP4Pq0&<Gw`qws7IXdI3PBsxh!GoFR&_IWUnb
zCcmNhH>X`(<rk2>)ESSq*8n2*>XM+Q!8pz&K;q$p$jkzm?mA&3dQQ=Jv^4-kD)08~
z+s=On8U+mG)Ha+wj`{FKWIlzBh7tiPlop6)I@p&NjKPNEW+KI4Jfe}RJ!_=_;4>Lw
zl6%+9LD-NFZC80GuoW5xUc4%b2sK?>dlTTB;O(C{aYC5{vYqLx8r22>s?@IOc?|$8
zsMW;~V5&*BO_echhcT%Q01)eQY8{@w$T1{yVOs6e0KkHLNF1b|D>gx#kAs^aLUIP0
zzz5BlGpF$ZL{jG(P*DAxw@-0CB#+A&%B~U9vsMlOqBz)PIurxU&FWFfnCd;Bk%8!0
zLluQYqXAq3fb--jAtaJ^Xa#Np$#rB9GWQ<^0DMk~!s+8Ye%a&@2op%$q?9YCP?Ycq
zSrQga6yQQCs4~dJ<1Z3dvyc08;SY$OGvpe9NihKc5>|GiM3(8p@8NS){OD>Zk==)8
zfrcqlwIquGo;-OH3;@Au0!0<U2+34+0aQ%{X$Mm=pm^n~jC`6fXq1tWk(cWgbyPWu
zPm2CT$jabgi$gJJMF7ALAOL`=R07`J-JLNvWaW&=j*ISx=KB%pK=aUo*8DSx#-dgx
z05mu_C{(c+Bw86<MWXvJf`e8Gi_BBV`hcJsK&0N=bv916045~06aZi_q+DlJk4xgp
zuw+u)s{0FF9O4}Sw1yr`cWJ|+Iyp0;<4l^8$ay1h(Q~@WiL?a(Y}U{h2ME%OPzkTp
zZ37`6S6%Fy`IH|32t)v<nnP+50iYl{p^hOk5Qpv);5-b(AYi?o&1x4~bH}M|TIC~>
zMl1~R<y0Y$AX+>^)yFb(f+SKA49F+=EI!pCXPH1+b%R5f`J4yb+1V+z*<3~r!13u(
zgJB|x1t2-+mHZEpCWxUp)EWRZ^9J>(W8-O6Ez~BYRWt!30}!N;n@zLH(CIpp-1<J*
zf>P1*(6aJM0{{<(CElvg4G#<E5YsW~LJ}@=f+$)Ly$|yuqE@L=+^>jn)K5S}qI(YQ
z{8<5jq+T^cMhzOU{F$4KA;+#r=)6@Vu89=1NGr2x+=?O06BM;mv27et=*}Re0YIfv
zGO4Epm5_FwI(v~s6{82v&H_BXRli81$!Z7k#Enx7>faauKr$B(=WQfZy@`rL!v!vX
zke7a2#}D9zt;RDvdi3a(1MlH8-4wLUA<X+i$bS?GLJ`aIun8v2hvaiApVsD=Sy@Aq
zCPkvb0}!}E3f<oWbK$Q*O^X1G_wX6c(d}9$a|r3aMSzM${c8h2R%1s4VY`x+TQ@H&
z^3Z80LF@lj&7O+39N$qTu(*Z~xM!$-k@Uyn{Tl%Q>X%D{LfyMqPsd$@%lP4Zm6?$>
zXR_6JDlI@+P~GPYMan*bkitWU4hcV7w{D#??;HL6L>@E80G)<Ud-v|O%1EM*AA0@W
zxN$@35SrZg&Ye4}wLF}2zI1EsY|Q|tEmS#lFvUde%glkwG1TpC#MJ~u3jnSP$5-g3
zGeEKsOqF~oOR8(>j)yM5qX7Vy+O_TGWg|@p8Fi${<<zszwN&9K?m0I5ucZN6oy3rJ
z-lUYWt`p~qbgo4WB&#I-#)+W(!}=mzo0F875-419$QHPj0Dy1eBrf*G4cz_d^b@WW
z0DLlnO2Ii>97}1qNyOySXYvXFF45xB!#2IP?xqbcLsXq>ap2SmS)&GkNOd92>7#BR
z$rDv=fvoyQ2fSs&Qx(aolwu~O3E(_iRmZI|q`M|SM+?Y2a#K=WixY_0rC$pG+_a~U
z?isqKMP~ttt7H}T{8hL8+5nK%!GQ@b*Ug)>kk{E_&bCrW);WZTOBGi^`axQoM&Us^
zIy!_-&a7Fpk|j%)WE(VLV<#IAx)@yme3(4Jq>N~?Wps2@YM(K|bm`Ki?EZ8%oGLOO
zRZX%@r)WvKXmco?$*M|)fhgqU5;Qb*s=NMPMBLOV1`$#y8cdiBl`~3H)+XkF3RqPP
zl+`F!LHe~d01+x#@W2ZeEExA0q<}nhtm1k2@S&0Ow`$d@aqsWnzdzF|kiw}`r;gJ=
z_)Xl8PK6DobSWK+?-exyB>v*Xi<!oO*3j`ojvYHD1RSnmyIozYsMN|J)y7H`I$^+d
zCP1J@iyDC1yyw*|x9L)d1`FJlcP5)&P3xSP{P7R7lJ9-DGyD6=7o*8fcRox8KmSjB
zCZMRARqfX?IEWIc4vzy%vG|jyIC&zQ26nmgsIIwkF-@LlKB)W6$;qGlzLfzZN)wPL
zsOHnBPqWTpp22X!wr}5_`3g|wdEnqPPW=~cFfG6=Y5}No+(#?40F{|>j-RgW|G~1Z
z<o)-)Auy#Avg798TH`=ESsY5`)+XgwwA&^YfE2%n&$!<HRGQ8?d%m47Zofm>J&Wl2
z)weT==V;jvKTCb7(RejLaq!_dVX>obvnGU(U_4%nbo}^n*1SOTh#XN!B*5Ww-kqzD
zq|GRF!@hSne?3|GqpvA6&7|Zn*N3YCfV>R^10dPNkTOIwg0pAOemTH-uNparO`A52
zQ^NordJmaIASMK7Rg_NvV0DXRzH<C#XKG$XbH4Lh^68x~GsiG`6Cg7UR3C3Uc|^;s
z0WyS{=o}_W2m9&~!1V?wMk^}%@Pjv#9UsilI``8%Bgy98e^eI$MfC|F*mexjAvlBi
zwf8Q11abL(lO4&ryC)~tue@#aEC>sInt~vWA^`&Q1awih9g<9UCI9WAo@DLn*NuJy
zCSci$&*I7h*b+qmRVGNi3G)%}n=+qr18^GK3IJphM8JUk#_S^!DzP+C5D_;+%G>@K
zrGINj>NogG4h3rzDQcQb?Ny8EV_JHJgWASYui#Ls-^8at(kGwsGfqCG%zt<D8_BUh
zebF9100=4KVq{>t#Vdu3<g{@qVK{*%V3D0K>j-9=^m#t=-{ky-XURzVO0;&(>uiF^
zM{+2b1`vgXWr{cQy@sG2IL8vEMK?>xW&32sF|wo&$Izeua%h}~|Ix?)O78r9J{v;r
zOTSZjAHdhH8LDmIbR!fFMBHW)GSv<HEsOI-T7jDlgcFGbQRM;PbJq+mC96}zC_4vE
zsp*n9*ln5f_B^Nh^EAS|5BkN=X0|5)T<w}coykNb+X2jUr!k$R&khUEUlvZ<IFwNU
z0JhqP3CM?&vMydC69f|>+iA>{K9s0_TS7vq?KFUEQtbeiXEp~4kZPwfVThaB=`u+l
zljIPhg-R!aTtomm$r{z(z_PuCx$mpUwVf9K##>I3L(u@hM+voTo*r6=dING!Uzvsu
zu5Gj`In*{`pf8f`4a}LM{NBPL?X!xuAji->xji(1Z}Xy?z%e;@T%0b+;&D<eqE1cK
zj_=z#o3#J{MFuLy(rTcxDj9a!gx-0lOBg<yBztU=L&0_qjcr>vVt!d)M3wXrnu}le
zBy+y~+AE2lEhVOY;dGX*9Et`2_}gbiFFbuN%V*1cNbQ!AbM`Lg`pNMWrIssW0(@!&
zgnGW1Pf4FvF6M9<dPcK*xUarLU_2M<xnRC+(g!79kX#%#OTx1ID3Kfr0sv9oA2otb
z<K(dwJY15;1@mo_KIi+NW%Yir-#FH67)<u<A8M&43IYI8-rr@lF!Bs2IN|aQhzMLT
z-!|#<(Z~ND4~h%V*jYlQFOt;{zEMp8kgc{Q)bFb{ws6(F!8Yl`sr=6^OaYux6D<(T
z2^3A#=rnv#NxiIr6m4wbf=rV>t)eU+vG1+;0U#<1&ri~rL=X55q@Dwh%Z)9{CVfPN
zVo}kxZRZl;l<KC4gB68>?%%&JEx?e~2+)Sqsujt&hU<PkCd<2I1Y7@`-~IDtq32g6
zWHX$Ued#VM3km?(d|7h`00EkUretYTX4<4#I=EvEC0sXYhGbnhJ2!aTuR{QUDmfGs
z03g{mbT&?=X#uB+<L9&3!zIDVL}(eM4?yHnJ%i!69zr}{Y2_FlKUs1}rKy4gfadFM
z7)FJlsQr&=OSURd6mtQz#@^IkQ(Km@8&;NcuD+}cb7B8gNu}UEfGDhkXOG@N`F1n3
z#vcdP5OST&TR{i`eXiJb#eDP@s2l(qs-X#Jr~yDj4FDPn1%RPu7-~yH0Kh;q4z;BL
z0HD7ahuTtq2mVb%!AE#$#-m>9Kc#Py6WH5~N9`!%c{WopJUl$ql~VfOMa{U>f{vup
zf8r$o#z1f-#Q@B}{APUGnogz6-%fwLGFO;_puf=sZ7=!T^KXosEFRMYpQQg?njT%v
zn6-z)mmX_L?dPdO_N_EJSd+f29s@%YB~*{;0|@m}#$Vu0`o91J0O>$DjDqRRa{vGU
M07*qoM6N<$f@qJob^rhX

diff --git a/packages/react-devtools-extensions/icons/128-production.png b/packages/react-devtools-extensions/icons/128-production.png
index b9327946441f529cd5510f8ee14b788f0aaea1df..91cb5b56b09953565346f66ee96d50743d36dfdd 100644
GIT binary patch
delta 1916
zcmV-?2ZQ+GBY+Q(8Gi!+008vhk@)}s07XztR7C&)03aYBARr(hARr(hARr(hARr(l
zD=jBAIx9d&E=p7~Rbe$>ZaHduJ#~pdf0jgwqeqmmOP{??smfBc*HymcS;_J6LhjuF
z000JbQchC<Kv0jL-}i)7R{#J8<Vi$9RCwC$TiJq}AQW}lNq<-cMDYJVwK0ma-K!ar
z`Z7GV6NJOv7wEcW{Q17!|KqrQ|LNlK^<Q^iF?{X&|Gi%_{)YX(?-z~lOV7X2;Ol<j
znC0MhC4k#Q|L&KLKi5fMki*-x0B+s=;_(aMEC9wiyPuxhE5Y9hK-%d!Mk9`<5;^!~
z@?`j%0B|?$!+&dvOr>UuhkgqHIc3ApbKB1(Bkcf+{pXX_)+M?!(=-F1zOwA(OIZ-n
zL~F<JPuU7!rK+8GBwTOeFr-8vL-@hzr?wEa0P>^_0L{-46k_tRjI#jD?xZ0L75X*+
zx}>8Bo2f!hTr!b7X)v|{cy2aie^eP83?Q2eF4_Ws)qj^@tBj5FFT_@O62b3V07!s{
zWIeQJfz^|(NLznG6LA0vJc10z9ucGWB%o~p@T6|tr1Qi;0P6nytr-BI$!tg9CH8#_
z0FNyYxIaq*27omHcrJfrr4VzgVHTbTU>hi)J_=ymWq^GWz=XRg)bE>C01gJQ+T+#f
z0SN4|Eq^|thFF}^2W>Q;QA1FTqHV<lyIt1`0OBE8T=KYE{Am(^47p}spvu25@sCT~
zv8NyK1)|R0K2yGNs(Ve*><xK!VU`=fCH5&jB1FI!BBGih2m-*>HcVX%?6Da*0x+ga
z@W-asP2jNBD9K6U%bG&6MZRVtGJ)=#r43g1e1Bz?ZwpGF;x;Plr`LzIwTSjb0BmX<
zrUig74kh$9&}n#14+CHtrh897>*!q#1AiHS9J58-FjqYmeH&n-F&jk6l_@^&$qN8N
zX1OzRRV|JtoJ$^O%b<1nN|BQQ((Qe0;~biAu1pZI{2G4%p#&g(B0oCvXllZ}i->(x
z_<u0U>1*+O4uINi_8|6yu*l>iVfGNE&2A^1*uytVaRA%#y`nMM_3n1{aXp2mz!SFS
z#g(oaXvW;q!Jx8I0x5rtGEyAEQm!Uh3Iwp#SrTDk!S~wS39FU41J8o6*?swfT13^1
zW0!l+l1*-rJf1}zadv7*Du;FrT3NlWV1McWOpQWY{Ig0Yub1!kuzaPHt%fq8t{`gw
z1eEBJMY&QH6nRN9<rru%iuke1!YT<WS5mDZg`ZHBjER5=)ldRZu#WN4x2n?NkSu40
zJn@*;ow`KS9Fn0WpH*C*OkDz8T1ijZC9Lc5da=0|r>sOCfjuJ@XWAS9TGI<l(tnaE
zQ3RIftr9JM<^U90PtqAraR7_jOlZ3GA^?+Zfdi132tWWN=ICfHRXBiPp<j{#HX&)0
zF7~JZP=$@8$Z2$44S`_G7pgXt09c`-8i^TL0icJ;wwrwi^T3v~tH<dxT6P)d3{)pM
zAi<Wa6NeUXWk#+D0Eg`7%Cz)QWPb$g;A+xcJ$jUd$L)%`S5bFg{=PQFwoi$T&o5J(
z<w;)?!{Cj9cp&((JZf{xH^gUa?$Ntt*&1p!MyVKvW=~Sn>uMpP<wZy);&?9{NSZk@
zR4ku7Gb)b>@7z|MWLKB>2*REixaqLsvB!-(6}D~r+}31a`PP4%tSrKEF@GJE-DKnj
zqr8CZnWp0hiAmIe^@e5fy`Au?(<&xBrJRV;v$E-1re-V>Z)b#xPE9Ag5vOA*S&e&~
z99niRJLb0NR^QJghdd29^Qg)4^Ywuo!uTvYZDy{=8VK``gsZ{j8UAYp3R>1joYhJ}
zRoSS3Z_1LEQ}hQlqF8wHEPr6GPV#NY`M(2PB;r4>6`STN+1OSoB`tfuqkI0eJtLDv
z(doEWDkweCI6VTOb|qv&4fc3zXN}@CQp7eE*rEvj5V?rJVbj2GS_aci?fc~n^q^l6
zG|*QkHZ?4O-tCaNbq;imcyr4JSYb7YLt2{BXYs!ZK!Zhe9fybGCx6;@VADrNq38gc
z=Mz1f6971pEV1oh@T?X9$O3j%1&QV2&E0c^ge&Jg+7~&|xBF@HI;~R;Sd92708v8#
zyf(-`3SdJ3Ut1J!0l<C^pjie`HQI~CBYKBKwAulQ*Y2=eEJLdrO1RLmURxMFc9+Vv
z-XY<Tkq?RXNP-|JuzwuX?2ao(*e(>3J)NxF=j)r@@sev4X0G>fpCS}X%B!~S#O>xY
z-SbQlx5ipgp&w`^Q(;X2Xrbs^`Wzp4YqrJRCV806p8&8ry)C<7TedXPnovC0!qOI%
zYy=Q45ZL|^4o5vu1!RUxn_F#J`4It*@0RQ8<%kMnSv6_k&2<3o<+={CjSg<3GyovO
zx$P?u{PF&$URd;T=y9+nk8*lL@9zQdIN4lu7#|5IIWd{{+FGk6J+<`jGoN1o*FSc<
z{JG!d4<0Xn@_GHE*UO*%UjOj<`lsL5KYqXR`Tsv>6lFgzI1=Ch0000<MNUMnLSTYP
CV3N`R

literal 4577
zcmV<75gzV|P)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU@gGod|RCwC#oo$RBRTal)x6ld|x)KV)
zqHIwFsX;VtLd1k(G!aZJCg2BXqEJbIsPuzEG=MLV7<`GK#$qB=5~_(Mk>vv~k<jv?
z@S#L41_Ud1MOx&gy5$`!;QVIyEYo?;xpQac&NI(GGbh>Zc3+<7&OQJ0de1p`By!Ni
z#KhV0r`7StD*hXFG@ocH{@4<KOioQr-ERHTh{1RmzM*6KP=Vos7zkUkKNwY*|Ks@6
z=8pM8MeuU-EN}Ot1sUce^%r;hHMDf<*x1;_^z`&(4*+J-(J_Dc>691*V=)Nsnezc=
zZT{wNZ(2oX;1h@su%X+J)=|Rqk=ao1cin!pl0G*&8|Qb_PFf8BR(1Q(T3R*Q#ry5f
z4~%wu&~EAg&~iFpkQcXj;)H0y!G|PYzwye8(aTehNAqF5d_G|Dq49bji~jfWi_r^@
zKGXrgmzJLX+31K>tD{3tTA}_N5WMn_$D@C5yD$D|Hg|Qv;zOc$tvDk(Y~?4C_40p<
zp1c2!=-Dlk0|y530B;S#LfF9fUwTcnXz9`3e}i<fu}|N5YxMeayZg3Q*7%-tFG;{!
zl%BqGV>ETk_d5V&r5@&2A%O7DP3vm~LKVhmwb-NIU7G;7^#BOL{H%mMb=&%&n~Q2c
z=A28Sqs}@%*lPmVzy18G#sRQkY;5e?O}#l1b;8%Kk46_R3ig_Z9Dj0j<R{OKUfaDh
zdUf|y<<~oG<r&dQSKkyZS-!&S_p$M4App2=>~N>U$nW9Lv{nNk`Ib6mBeCsiM-NFn
z_}CK?rwhj9`3wB*6YH-kr44wm_g!*L@;)wtiM-Eq_fPgjDZIu}XRV3eedhV9gUGu6
z_?0soH3f|U0Oo!4XLqSTLp7ozt40j6$&deVT_Nuq=|nTR0Hy)d1tzozubU+tLd;g{
zOaRUl>bflRA=D?o%V%ColQPT;AQ>4M@d5#$`rtR$n;{(%57VY@`GL2Id2`=?qdgDa
zotUPqxjQg66VKecseJ%A?xHJuHW_Jp@;5gWek~Y*6v1Rm8}R+b6DLM{w{J}tVwog>
z>2ff4{N#%0r5%4Ryhh%0-}Li|`AQRh0w5;Q)dV$?3Pu%b>a}WoOc?m^6`waVhT_m=
z-y0w<|JF^WKY|%~<U4DV^;NOgFj@;!^ZbmV0|1Vk78{3%;U&hl%n0B+`MTfE*<-QK
zmgc~0;HZVl;Nds)uIa>f0pJ}+j4RSH8SM3uQhW(3&Q3Gka?V8MBl#h{bPY&FvY(-;
zk+T3z+Uhvy5tWNapY=CH?ORmD87-=zeD-6gHGt*O*Fi{Jk+iF5k2;v|(gLmb0qRVK
zAa&UBJT1c-T>eAdj&W-MkX6V1$b?Bk$VGVh{ir$6-b3mhT4@6Mkq-xS_yR7P_`>CV
zk;JBA{(<%Z>L!=BpN$ThQpc?YK;2$289ra8${~=ex~D2N8TJhX0Qy<I<0{~I>b4tI
z{{yg~3F-oY27rF<NoxQA<BvJ#V$<Oxb!>%*fB>Ih7=>aWeSpw**Tuk@I>L=}9yv7w
z7Jx!l0d*$8f%cGLka+x>3Wwp@6fvie)<F~?3Vm3U1wd2MKTrTzvV3K**T;#o>?|r@
zBQ%1Q0J2^$l%{JP0BD$~OD&?ZHHno(kSpngX3&x}J~@Q>=m0hb0F4P+dN`!r_s#Ov
z?G$Q9zfA(5k<&o!Fr=yz=#o;YHE>n?r0G8oZB|1^w95;RZmZOhq~$#JKC-P{01&2R
zna<|;oRrBXir>KhQLUC4;eA|3zeNa;$r=F_AFn;TYp%pQ?_5LEbgk0>5Sx_+01Qn7
zKuX6@n|Vy`C*@Tk^K3I(XIJuBo@u6OwD%yal>opI%&J)$EoFm|lseO~wQXp;X4ant
ziKW?^t_^4m0G1yxtOqfc)@b@<u<wl_glN)E-A{Ecs@XSG>-XAlJez2F?+XBs>ZPZz
zPE>wB)H)#_Nu5xICajrCVht3$2T~jgFam~t%@U{;05iGtHI>vl4w4LoNKf3b`U;Vt
zyvm=lDqM>sSP#7jtWz`x&McqtW2!zoW#l2jTsr{r8X|p2rfFDVm5Uj5Hd~Si(hi3J
zB<15S4Or!PndkY}T^kcHgnqWskc=nM@{yn3l^ntPKCJdYBIVY@TJr=#&jrw4Uklj)
zWZr?1wjaKdJu{!+;$&~x<B(=FNN-@$Q2CAZ(by@c<@WmXz<VCNC)vy$H(ZhQ#$}sC
z`JUA=%LZth4PgHM%WG@3m-P1mfWtrb>7JkQ3@}vdI~-rVw&xjn9kj;o$(xh4zwydT
z$#c7y%iaPunoQ|43{gv22>{r+6Tg0aqVn??FO8p1tiL+>S~_d@?R`Ev@>A#bARb3(
z-}IiI?;row>(uwc?q`3$4r1LTrVbik*0Z*^V&-d(o7M;mSf;mcodW}31A3Us>$rRe
zo}Wlc5@%IH$<ZoOk7t~h6{GCx4_`hrVUQN$SUrJ64Vn$sB!rFY=Lk8gNfb4mjRven
zSgRF|J>pby+l3!DOV-k+2Od<ZS16?cq>b8=dKSI=jtxmG_4J>%<|1^_((xV@dC<|z
z67`tg$m70rrTSif{n0wJ<=fI+!Wj7|l8)th7R;(+?OFCbaQEE*k3DZ)k2LdMPyYIb
zTyukTKYQ<{L?aMUX#36gFiF1i4=QB>ea5DM+M?bn(vbD8c`vk#6lu7Qd3_xzOck$b
z#q3BQYxmhm>It>iVsFxiT9V$*zE6<|fcIiutlz3}6zx-V@KhlUz~l@ZJ&hz3;^B%&
zW8w$Iwwoy)y$zg)CIDbVwWD0r{!S0akH7!WwYMf~cR5+ub=E=mGS8Fu9F{}K-?MH2
za`<VzKWEKF{T0y&_(t!HwWT(I3Qfa%7Xg?z08smu<RkSUuWDX93oa1NMlSo}<*L*Y
zMdYb&n1G{NWD*%0IribxlCdr>5a19>(kHua)&-cdKLfPvS6Ko$tP22Wj$+a2V_r@m
zjJIm*VLU3TDp~b-Bz!bmi!|h^YSvwL2B9Qxd>le6T-DYcVh%!H2Q%i<H#MEB0i<0@
zlc11o)NdxCj~-rWgt>8P9M`&i2`S5Su8>I7ZdMwtb>kQpHIc5+T6=GvIqQs;)&Mvj
zR_GPFjanO@Vrh#!)o-o4DEXwceKlYmIen{;)n|^P7XUQXFQd{zlT6w4@xaThy9~)h
z@H}VGXVxF*8+GL+EFq`_04s^%E2(8DkGVe5ANoAsr)MGW93ovBR)^qdTEOQd(g^^o
zRJ+ci1;QNHM*2v9=wc3^*OL>ws^+Z<2(<9G5&*PmUZV2qBDn*gtn@cYE+*GKcBX6y
zK9B<<ET?ObnkqGN`3g-=0xJyw>fJ5hpe};RmIJ3%+YS=B8c%#2ve4l3@j09Tu(C<n
zdAA`cZ=-y=dqO)~zC)&68p<~;D=RdbQ2LyZIssrE)mAC@sv5qb0enKdkd7+Vx>cmV
zZY^NXL71!t0L!tFQ^7iz?*lBK%?{;tTOn2v=`Z?x#Wd#mW`$H`4KTBj8_fyVA@BNu
zI6SH9C!{x^sumz3$xC=iEu^n=o0n87Dlo2N@?cSbb;ca>!Y7!jIe1ov&8iMc6Qf_M
zR0{dDl%v-5WSK5Fz99EuzFi!9qxW-r9S8Fu)@2MhA7si%;8Z!}IQlbd)YpIPdzVI|
z2QKQV7~;Ugs=*VIn>zU0qW2L}V44@ZTQ!PrS1G-29&wkA+j-C9F1pIpI=ps~G`)8o
zfDD|qAux`T<tnvlno5_$6D!TC)!=E&<m51~zAkM#eCGvQT8NCGE1^}^8DxK{0kq5?
zQeX6prcgzYb^It2Np%d`K>Fr=iPsxneW9Yt)+a?5NV0DYo{O>6*S)%HXHtTV1j;)3
z5Xsp!d9zowj;lsdj(qvh_RCfFZV4Fbo;|Y69_#;0tSyUb;ZmJJKDM6?M{D@R&|1e0
zOre@MP24i3NjwtX?>1|zP$gR<VRbRNuC_`4tyNf(wfSX>a!RFwc|hrhb1j|+ciqL4
zR&73UyrtekM<YH0U|o8VRr}Tvw^sHpHeO2ZEs&*!1n^g>$SU0!f|}%EH3u#0^pH8k
z?j1b7ELn6~#ailLE1a}y@YuAnWzl7vFuI_$N+YXAQ7e1TngN7h{Oq;Sve>LpNb0(E
zRH6(_P1V~`gEWWA1TEh@J)1NWr{9;9fn`gbHT9ncly%`Ge^d8qq17Pj>PnW2sx;Nj
z^N<_xO%SnfA@4N^+8yj`vwV_IE^n6i(CXv!x^zQ4UtWv2MV9|kBqQnTQ}x9JSdxud
zV3BygWgi%`LUHIp;}gl(*^T9piijgCHM}3*eVL0LeTWHRnrf!!aeDg$`<V%9_euI-
z`i?#CveJ7Y(Fxk34((R!fCwI1x^b%Jz$IKm^+^&%(*i!yScWXElUC(26e7g4%8Z1%
zO<Lb(1j%fmBKEE<0TMEkY4RP$2otlFP%}4{*L%BXzemIL9RL~_LRIe0XOiq)Q{&<q
zDG76pXCG#=QqfJ$3T$jnpp{7B1P_%<ykB+5Qq#<qiJ{CFmar`w!Z!VUjR8QLnk_{P
z*^F9xWUM$@gHjuqK2P8SU&D14BGbgO!qAi!7$^;Zq*!*64=p_`ufwKVDPg41*YOnQ
zSpXB8UG%^!4f3q-1HfAc04**qlif;h989(<WPA=^(jlJ)0J(IcN@%9dNN(Nr@frX^
zOwA^PsA-8JcLBn9E8fRHsk%lDgiZE4Gy(ukx<XwaYcUBmn^(vRBdkj&EO1rPSm``N
z>oh<J^>5jG>rjULgJmM}ZW;?2wq^m^<XHSh0HAf-h8&x&T@5G1NuHK~LOW<7na{1`
zRRLgW#a3y6(D&w~FNe%h_AX)9-GEh{zB;wtyahnWOCnw5O0mi<;jY_3(IRz(XRW_J
zzMt7IB-pwO5D-|o12jn8E!}x$u~jCZu0#kn+`0?Ua=v6-Yh7e@UAGzlb&?ANntiq|
zldjVV>;TY*Ff$JXKED%!2I)4mp}jtSkg3Vk??3=RbIR(D42ZMyu5FR&piO{LyHI;*
z0icCJb>_nf^{D3cQN8^DftLEM+w2S!05mVSF11LEZ-shjA}cxo1a+0HY2a$gF>C|?
z{YZtvL>O=7{>9;Qg@|%7Mo6-TShflP*0r&r%z&tIR~xl3UcR;%z|pX;`S2lYoJ;GX
z0L>8$A#JF9mklSomz8?f;wl&kG5_H0^{w&Ri+)ki&Y(ibTez@idIn6>ZVU5Oty~Pj
z4P@4ccp5l3AJBT}`Q9`4Zpxj1fUok>j)zO-^Q|lI%G@9_?*YIAYtleVRo+b<SzG<y
z^VUTlxa>O9gvii_XMVpa_w`5v&(s92RDndx8tbMTnIab7by@?Rd@hh0N&p~1TB|p`
zcU;%<>h7IR#|SCqMlRZ^mn>i5G&QLFBK?9ecJKDB=G{DE7HDfnV`N+2vjC;-+cnKA
zR5er?YNRtL%|xwjI_(_MLM}E^O2d7pZdRF`kyhJQjbK)i<&x{PS#q_)x!T}c0RYJA
zx33yygzTX&I{(0zniy>}Z~%bvMxhkRFSw?eRVC~=8X-iu8uGrSc@F@e3n`mqd`KY3
z^wB|J{=fhr9m5}Uj{o)Oc<lHHO>HJxiy;ucE$^%opbk<!z(4^YEnyNNNH3rahLC1U
zY-dvkC>9uIvYGqm5oX%j9`n8ss{=qseWlTE3pxOF)B&KQHUnU)+lJQC6ad)L?L%v6
z3jmnx_Mx>jIl{kjD7ceP-F~!7{l~OSoWKjZ{b(H}JYT>+)6>&aV=={Fp4#n8E9m-I
z`hPJ8fLRdS6Jr1~a7wp7LruSmnLk&2xgh<M7zC4@CK!6j->>p^MEkASDO?qQ+R!<M
z!{hK_^JC`sg#06}zlwoycKnIUZB}()n3qh4;gd1rZ?}Hw{{jpEPJO6BgYGht00000
LNkvXXu0mjfqT|45

diff --git a/packages/react-devtools-extensions/icons/128-restricted.png b/packages/react-devtools-extensions/icons/128-restricted.png
index 67b1c9a31a6dfe22567ce26e385b0be06022e3c2..eff8120d00eb449c37490b3033ed9d62d9382b76 100644
GIT binary patch
delta 1933
zcmV;82XgqhC6Eu08Gi!+008vhk@)}s07XztR7C&)000000000000000000000001G
zWo4C>m9eq0!^6YS(9qi2+Tr2h=jZ3_?CkLH@bvWb_xJbt`T6_%`~Cg>|Ns9)hx-8l
z000(rQchC<2M7-k7aAxxMN?vMevO-{x5m`s@&8V$TmS$D<bO#-K~#9!?OWM`n;;Z*
z+DTXiMDYJVwK0ma-K!ar`Z7GV6NJOv7wEcW{Q17!|KqrQ|LNlK^<Q^iF?{X&|Gi%_
z{)YX(?-z~lOV7X2;Ol<jnC0MhC4k#Q|L&KLKi5fMki*-x0B+s=;_(aMEC9wiyPuxh
zE5Y9hK-%d!Mt>uYrV=^$W%6YBn*eY(?Zaz|Or>UuhkgqHIc3ApbKB1(Bkcf+{pXX_
z)+M?!(=-F1zOwA(OIZ-nL~F<JPuU7!rK+8GBwTOeFr-8vL-@hzr?wEa0P>^_0L{-4
z6k_tRjI#jD?xZ0L75X*+x}>8Bo2f!hTr!b7X)v|{cz<p-WPel{8w?<u3ohCMfYp~^
ztBj5FFT_@O62b3V07!s{WIeQJfz^|(NLznG6LA0vJc10z9ucGWB%o~p@T6|tr1Qi;
z0P6nytr-BI$!tg9CH8#_0FNyYxIaq*27omHcrJfrr4VzgVHTbTU>hi)J_=ymWq^GW
zz=XRg)PL`rRsaqLu-fC*=>Z7ru`NEKhFF}^2W>Q;QA1FTqHV<lyIt1`0OBE8T=KYE
z{Am(^47p}spvu25@sCT~v8NyK1)|R0K2yGNs(Ve*><xK!VU`=fCH5&jB1FI!BBGih
z2m-*>HcVX%?6Da*0x+ga@W-asP2jNBD9K6U%YT|evPHgTA~J#QoTUv`_k3lQZwpGF
z;x;Plr`LzIwTSjb0BmX<rUig74kh$9&}n#14+CHtrh897>*!q#1AiHS9J58-FjqYm
zeH&n-F&jk6l_@^&$qN8NX1OzRRV|JtoJ$^O%b<1nN|BQQ((Qe0;~biAu1pZI{2G4%
zp??G*eIh?P@@Q(py^Dx_RQNE;>1*+O4uINi_8|6yu*l>iVfGNE&2A^1*uytVaRA%#
zy`nMM_3n1{aXp2mz!SFS#g(oaXvW;q!Jx8I0x5rtGEyAEQm!Uh3Iwp#SrTDk!S~wS
z39FU41J8o6*?swfT13^1W0!l+l1*-rJb#`=9dUMQNGgYR4O&^fu3+i_OpQWY{Ig0Y
zub1!kuzaPHt%fq8t{`gw1eEBJMY&QH6nRN9<rru%iuke1!YT<WS5mDZg`ZHBjER5=
z)ldRZu#WN4x2n?NkSu40Jn@*;ow`KS9Fn0WpH*C*OkDz8T1ijZC9Lc5da=0|r+=(O
z9)Ue07H8TV09w-vOVW}lQ3RIftr9JM<^U90PtqAraR7_jOlZ3GA^?+Zfdi132tWWN
z=ICfHRXBiPp<j{#HX&)0F7~JZP=$@8$Z2$44S`_G7pgXt09c`-8i^TL0icJ;wwrwi
z^T3v~tH<dxT6P)d3{)pMAi<Wa6Mu&maAiiW2mpud=gPG7P-Fz`;A+xcJ$jUd$L)%`
zS5bFg{=PQFwoi$T&o5J(<w;)?!{Cj9cp&((JZf{xH^gUa?$Ntt*&1p!MyVKvW=~Sn
z>uMpP<wZy);&?9{NSZk@R4ku7Gb)b>@7z|MWLKB>2*REixaqLsvB!-(6@RvE``p%K
zVfog7o2)Ftaxop1-DKnjqr8CZnWp0hiAmIe^@e5fy`Au?(<&xBrJRV;v$E-1re-V>
zZ)b#xPE9Ag5vOA*S&e&~99niRJLb0NR^QJghdd29^Qg)4^Ywuo!uTvYZDy{=8VK``
zgsZ{j8UAYp3R>1joYhJ}Re#y2fN#o@mQ(ZxHKJH}@+@GkPV#NY`M(2PB;r4>6`STN
z+1OSoB`tfuqkI0eJtLDv(doEWDkweCI6VTOb|qv&4fc3zXN}@CQp7eE*rEvj5V?rJ
zVbj2GS_aci?fc~n^q^l6G|*QkHZ?4O-tCaNbq;imcyr4JSYb7YLw{PD(r59%3P6KJ
zbRCC><0sm7VADrNq38gc=Mz1f6971pEV1oh@T?X9$O3j%1&QV2&E0c^ge&Jg+7~&|
zxBF@HI;~R;Sd92708v8#yf(-`3SdJ3Ut1J!0l<C^pjie`HQI~CBYKBKwAulQ*Y2=e
zEJLdrO1RLmURxMFc7K=3wca7&kdY6G_DF&tD6kyV?2ao(*e(>3J)NxF=j)r@@sev4
zX0G>fpCS}X%B!~S#O>xY-SbQlx5ipgp&w`^Q(;X2Xrbs^`Wzp4YqrJRCV806p8&8r
zy)C<7TedXPnovC0!qOI%Yy=Q45ZL|^4o5vu1!RUxn_F#J`F{}sj_;Q1>g9+EV_7w6
z;LQN;<+={CjSg<3GyovOx$P?u{PF&$URd;T=y9+nk8*lL@9zQdIN4lu7#|5IIWd{{
z+FGk6J+<`jGoN1o*FSc<{JG!d4<0Xn@_GHE*UO*%UjOj<`lsL5KYqXR`Tsv>6lFgz
TI1=Ch0000<MFvhpu0mjfRCcN1

literal 4792
zcmV;p5=ZTcP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU^T1iAfRCwC#on34eRT{_pK`90cRf%Gk
zR*fIo+TcfG6j0;Umc|&pSQalxG=XA_8na-$@CL=0ctMaGBt!~{CSJf26Af`IUKyoj
zjftY$C4NN<T||Plg|cl$WY3Ru%s73XnKLtI-g)WFlS~4A=biV=Isfx~KhLSH38y(z
zSEIS=Yf8G9=$yGG%{4J~iBzlnods_$7kx&7VPpyrkpP%)uDRu$%}6?9u2KIVf;+sq
zT>KeLv!~X4LIOa!^NT?Z=Bo3=L7h+Lmy2H<nme`TzXPDToRh*)vj>1VrM6#4V$J7x
z04S-LbO8X3<vbLY8tY2-Uu-c@SI$APsRTg5X;w84?(MhV?zsH&%jfa$;o;#^4?XnI
zz{N1$wzjs8*|TTQ|MABk2Tq?pJ$moG_x4xon280nRMUXI`s%Bdt*xyq=ggV2RQmjv
zUw#=FA0Hq1{`>FWyY05ydh;CX+O=!vJ^SplT`esw%P+a)l4W&ub@Q})M@L8ZeDTE>
zd#Vi#RRe$zKm2g%k|j&F%$hZ;)%H8T{r20bpMU;&&+gs3d!Bsq$)lAT>#MK6+PZ4h
zs`c~d&tDn$yFdN(Q_q403!X0l5ZLuM-gx7dG|ym%z4_*wuVe{?Gz%Z(VoyEw)QTND
zcAP3a09-77aECqj+;f{<PA;te<(FT6=87w>=yvr?0NdQ$ysppyU`IXv_~ZM-WM>jW
zG#Gii&V`Qf*=L`1End8Mi|rUECMGV(c<wifU`N=!Uw{4ex|?pgX-{FzK-j4^u}tKl
zLx<MX*4F;XyB>S&vG$KX`e+5a{MTQ9RargHy!F;wcaDvX?PT{R-SvE*=Y%aj<6u1R
zyz@>cV>HU(3a-Y+#!kk2{P^)#0HpNY>#x6lW76?m^c;ZQ|HKnd989w_qAUiF8}#+{
zt&XF8W6s@w|NT3|6jA{C<(FUf*l-yZdF$4#dnJx=<j9fdues)$p27j(<jIp8C7GIp
zEyAWdIyznmTQGLw)mLA=Ijv5@j{okv?_P;JMnJHA`}ThYxd{p(+@f$Iz-ZFTgMT}7
z=1gxAnaD0|XlPi%B5U_7T)1$3lt>sE8QBuH_^^7zwK|iG5vBCoZ@-;p{=pUChJ^wE
zELPgBufP8K3u&Iq4o4QVtEA88&Yjx@D-KRLpco$?->aE-h!J!T?DsU*1;CMXmj@nr
zV0obc(B9tOA=$<*Y<S$o*w~m^(&y|rEDu2Fm(Q9Wfvh+8-{s1KckI})9)TNn6bb-M
zO--$WjCN)Yu}iVB(I+%3!R)%dcpo+8%wzdz^e%l0Mqil*B%=f5CIWI%0%5no9S4ie
z!cWd3FI%>3S6p91mNxqN^XLCNZ6S;aSvWs{pWb-mjZ7kafNI~qeJeCuT$1-$J7_#-
zQ8iF50FYR2mVR;c0_3=+9Qqd@u;k&L^K_Cz03gVYZFgr{y`ZP3XHD2Wm}!;BIWXq#
zwBPXZ9ttS}qIRYWLfh}|?%o-853bot?8LKY&z`EO5-LneSeUjSv<~uO$Atwzm@nT2
z;o*x~d_M@fy1KSx8Kg0$<)T6ZAS{ySntu4<hi5bopBAYDEO3mhKp@%upMU=OP>}#o
zk(VW~LkvLrj3^wgW6eYa1e-Q(+E}SMsbor9Rq6n)<u1=dsgpj#P3(nW(fUaqk?w<Y
z3=R%<yMEVMvt|`r1WZm&9?jAWf^`$mm%M*i9Klp9qKR+>=~-=UZ5s(UI|e{&ULvt7
z05Cp2K1~GNaKjDDTs?n_At~C(L=z~Iz5_?l0!XBUxeD1zoUT$Lv1$N7!9-S?F)W*~
zZ}9KP`FG!acTJeb5zZj_B;X`bJ_K7bKx?((h%*`hRLcke=y0*SVA;}Vwq8Csgr*dd
z#gul8S6y{ghYd%p6y;JHMu6u0`Sa5z*oEAeK4VuKu5%QV&=R1%lIcha8{ynE*~W&;
zO!Iks^UXJXg#v)LD8WT1bZZk5=03mPz@(yCYdL}Z&OP_sv)9GA$r3g@w%=pj>|O(y
zqX3MEW>ip10(xFP04TSlP`q=&T^3B-gry@hVVhBlTrGt70Nez8%yraQ7Xu!sd7lR#
zd~kp8{`&g*_QG)hqj3)y00d3J<%UgP*wO41*99XLQL4<Cacy%Mk%1XW0*IOeU^qx$
zp5x680LW4%C&(TbE?hVx12I~>!<c}%Mg}V`0&uEad+oK$jj6V@lI+}L&6bXuMU@^K
zif0}r?-c<6vhVJ@?_PP?WtXk21Y5_e_tHx*?QxZ5goUwf+qV4@C|Epmjk*Gi2Zl=Z
z637$)1Y?X6*PX`1!+U46Z8~lI$KP>7QX(OWOD?_i(lxH%1<OOSBv`QR+qZWT%)wiD
z%PqGo!aBjRg>NJ6yOT!l63h~{xV+46`Lj{vHlI6pZuERYGK;(0O!!}Umh>BZCVh|J
z)V|~5I(hQs4(WHN6gl;Kh6Da3&3y1(<}{0UbLI(zP2y;w{*4f<EvuKjZYW0Vat-x#
z5|REsG&Hn1%bh~s0V!~Uf)^DqlIDZhgH1jp-(^mjTjtnho`Mq*0IMhTYP0A;g-0q9
zWs<4&lfKUcNHKoQEQ&ZPp~T`0lGrtMgAxFv-VyQA-rn9ty`+sU!5re+c9p%Hn0*+T
zcNgr>hK-Gljs4S1-fD?GO84`3NxW#RRJuQ_i+7R60GpQXKYRA<k>I_E6X{;&2oY#A
zr_4QTkn(+!ebMatzemY6Pj*EO(sqKhiP0uAtBd#1-aYuPaR8n~m*R72W7%GbM1ZD&
z`&rb96DN8$Y}l~FMkY%vGUy_e+^F7t6n(^z{hqe&|65#>OA|#wD@2;BFcBx|RxiHz
z;@T^(ys|q?#M<^hNF@S5rN;jJY%s32s_hcEjCYSFYW(-u>?n!b_{9_!hV8huXZfEY
z?cgLF%Nu``^^~ay2$T0|<&iX*o_VF2eUp=u|F(HH-;ZO4F_AVPhV_P-g@DtwzQT8T
zZ-*eTyD>~L(UhM!*Wlpb22G}Fz_Zz{+9E^|lWYTmFwP`>W((RVZV<K}wp`H~02<O0
z{8;EqNzd2VY?SjQYTULUNGiUxaRYQ$%BThcxScIGuCq}>NQ#s`b6G}>5{CjM1ZG6L
zc-O97>ynP!mT==nWf75PCMA<<<HoJ)$|pe%qx9P-i;q6~=nGci>!=&hKqc*y?isGj
zs6YMmQ>%7qymV9{g*NWEg!Ucfd80+G?YLcgDz!vb5@T&LnIi$PV8MdFNnWok8XjYc
z+2qLEOt>`eBm{`)2p)D1U}Qr?J&Oom7T(E^KmJ%;i-#Y6xH}a9v~FHfqa#;D55Ba!
zALP4?=Nm2%S-eV|Ak44NF3l>u%X1Yj(2)uNQa3MX-@bkCWd(pun>O`^O{C544?20$
zl1&pQSUb)y?Q^62W!eq&^y$<6QjjVY0HkhS9?Q$>MVLs=07$y~^CUc<+Gkm}ok`ks
zqAD9i81_9c=}yd(!gK{MmA%@iE`qHb)pUcb288_9;ta5~YMn^vy6di6uYGp=?YDPl
z`P*bv2mfZ%jVu%ZhYueXlPK@J^UkiUUL;C$z2lBMBCC5`D_bKYBazP|Cn8Mov^C3;
zZW<}|Oln3I3jjDdB(u!MHcm<;j)r{>7htlZo+CMxQkYr2X?A}cvn&Z|PM-q@4(v$<
z0L|pXHl_sI^^35uHqINH$+mSWMG<T?s;D$-_xr)^dgEx-&^F_?0swXM5*Oe{iFLbt
z84iE2R1#aGxBy}xEf>HX-M@c-sKbi|wE?89Qz`C-(W;@N#vRKFIC$`&+Cs$@2#{lv
z-Ku%mY>r!5XDCe%LYtCuT+Y(&*N(NZ1-Z@QYiApf91^GDrB&o9EE$2wT-uan?fE=c
zOUJeeL-T#xyhVRB%_hpJ<tTdT>0u%6nv6ohndJl2MC1gd%}tZSr{2qiC4<^drfsbP
zV6jcu(B{JfrWWE(n#0KahGjI_<}lQxNeYe1SY-m^q*c{~#MJ$O(l`WZTyb^}JDYc4
zoc@dF$H~;u#vCk8k>-m<j59yXXA~Dpm=2aKE7&H>CJqoJ7B5YbO%7hAF54VMEuGB<
zY&Hv@HX|#MD;U2vXY+)GZc*r{rQ>jjD2-h@Kx%Y!bXve^U|>MBceP5PtcdrK6jl_@
zpwC|maZ@a-Srt6ru=D-QUsyng=W@_S(rn;Vu>iD8Dq*7H;Jg6Zs$q?Xu^57GWG&<@
zIWedtlH8ko-?slxT4I5;29#P{UIKFv^i&)%Ka_tlUr|M+-U()Dy`D}=!&t=5&d!at
zO`k!ovC;b}52O7{Fuy)5Z$9k6$!*)VEy+4ssGWBhR+X&PG+?e#McmZX)D`DwT5Nn*
z=NdRI4<}HAuRd+}@2Dfz^QsTDDG}GcYxI|cX_8cUw@*I#WV7oyM<)FN(gFclN`gbM
z$&#N9YYiK+Jc<>$Y;*i8<9p<hM>^;eV0QP-jg5^RNf)0Sh%B2$WZEDCc1-}pMQ0Gi
z0xeaEaCylO5*M)9jY&x3I(}A8zJiP9R=lebHUD_)t+z5yfT>uIAg?!29C??N;2^`p
z!+%h`Y@0C}ouoCG3B@j!0xmA8(yd`C4gd)ZVFji|A;60DP{~El9RQx3eC@T@4i{;$
z+2z%CdU$Sq0*!22Chdma-rjX&Ba@1qw#ic7i|us`9U2<yKXBl{1+y(^!sh*cxp4qV
zsnX0pf6G|paeaOL{Hza}imRM@eS^_8=>4lHZ<0Bf)v>u%%>ksY+3XbQ-YKUCSFdDp
zddiy?AD38f)PiaN^JI3|B8L$UFr)kY0RU}nZE%5N0YEx8$77Rm$hUL)2L}h|X&Exa
zE^NJLQ`~8(1SC!$O=Fr#J(3G|eEbvuT7#3D*5<_-Bc*}GISUYuqS^Z#E|qqSIJSa+
z%d_4g7XV1P{jQFWB@Il9zM*VIC9>kU;;4D)GxQS|eS9TZpQj>NHI+d&IqWt>X&Gk&
zNuS}&(T;ub&KA~A8gp3<9Rz5eZSivffOJBb%LA2>^)#=LJ|mJR<tM-$q@C!=eaDu=
zkPTNX6bEp9ZVrhVTCM`tf<G?-uAsSk`}+D;yY|Ps;&vA;02&$^D#G$$+gg2`cS<<i
zK#K1}aFHzR^THn=Z_~KI6+Qj*)2p?!00DvKJ0J|3bxC)WSS*wX$jTFjQmCB;s3~8V
zlELF;U6NLHU1$JgNq|5*C0x?@F(tDc4@b<E0H`ow8AO4A#fMvDdFBAr)YLS;1VDhY
zY&ubGBpn}HC;&)ikjvxaCBn`|=?inZ;0M^cb?e?dz$hK4J!1hNnL$MJvidztJ+gUi
zJZ^x%GZ8Zs0XGYZ;b>t1AZfvd17tGcG*Hk?J!HOS9RLEGP9#Z)EaBka@;W~_7XV0F
zu-O$(U7`5)skG6;!=A#YDTaUm;JB_h(wbQ2)&4FQ0B8|0S51^)-^g+;>C~_7d)9$g
z=SXOn`bJl+T?}VQ)Xi(gSpkxFZq=$)>(f3LmJj>ZLaccBf~KBV=ct9G$qu4sFY0JG
z8)|83>9$ddXFLFoA3r|L&B~5Vs(isc*r~95P1&P>0}r2M=kqtRbEWp{o=D)hxUsRZ
zok=+r;>5NPcE$rh>o;thx#O4hMDxhD)$;g|@rMo_T4Pg24L}G2X$~WzhWu9C0~}E(
zrA#A4kE=q@B$QiLFvO14>g=P6CEyhI-FIJiRHYHmN|MLN^8sU2whkQQgAYFF(H7A=
z^-D`Lb9v~-MF#+_Y}&6Joj7r#*UO{BSAe-_d%|X#qtyItTU)%~PWBGD_Wl-C`W@%^
zxETomNUOI`L#}J+<MuzWr9A5ass;dIq987@qd0IPE0&5Jrzxb1!zl7*{kbcFej;fj
zO;=AAo(YAWW;v-mo8REKY>u|k6w+#0{Hoyqej9$#qD9ZxX2}AYW5<rYm)B$xU|PI*
z@k-m0cN9iWJgKHbFRBUvepX9ysK4QY=ePHYEsZVSmv!7eE*L2BGG=0{Kjn?_4i66x
zy#N0D{ndEdNmT-%q=M-HC6xdusRTetc>&;DISqxSa{yqnoQJ~FBmkHw=b^AP;Q^o&
z0|jLN9sr<`ay|-27uLMqhX%kfyPTIo(3z?0cL3B(DTDmKp`4!?P5(33?==YZL8YMN
z1T%i;|Dgb-R=Kg!T+ISNO1gLzz7fgfuZ{TPoT;m^1j9wS=#x`iT{ZRpFTen&T)1>{
Sp@}{K0000<MNUMnLSTaTkuNs@

diff --git a/packages/react-devtools-extensions/icons/128-unminified.png b/packages/react-devtools-extensions/icons/128-unminified.png
index b6ecc88e13ac082da3b82b48179b8a665fef6214..8eaefb2c0764f8522b63be4094b0200e4e8b390d 100644
GIT binary patch
delta 2099
zcmV-32+a4<D76rf8Gi!+008vhk@)}s0CiAIR7C&)0NF}7*-ALsN;ug{IN3@#BOf3x
zA|g5@BSj}AQ7R@}EGTC$DRVL_el;wKH!hVrFQ7d!tUofhLNvlfHO@yj*-ALuRYcxl
zQQ&M{<9BN1gLdbRgX)=&?4_LUu&D97wDZQn_R`Jx-P-!-=70V4^Z)<<o{%2|00006
zbW%=J06<WWpWpX{RaXE22Wd$}K~#9!?OWM`qbd+h&va|{%@tHMxcvVo-ne5?pb6>m
z<<?WTQ8^T~oGN6qY30xNkN*$l=ljn_l&^m}dWYd_9RIJsiu~=z|Mpjs?^WkN=-|s=
zQEEH*Srfp|(|`Z`Rprlm7TDY2&$<A9HvY=;KY*nG2&Kedd~d=c`bhvWuNuj-Xztb^
zew6LaRYpGqfELv#Wg2R34YNv=^dkV`3P=_%8@^UqU=BbUzn&TP-XKNp%!~nqCGy&;
zlx-mrZsa`g|BOumbXw*0hyhIpb9hXZ5Ip)HinQ^TfPb}s%D@aj2<Oo|L{*A5PI_Q`
zR87!oAu$7x%6g3Y!I)$x#pK4I(Lrtopc(7|E;6tTnZh<(T%id7g1>@vHkQ}F1RPlt
z0e)fvAXX?b=q6o~eyJ;tSX;8d6ZHU?atd)j?OYS|8U=C_0F8F>kWME7LgDVsZ^i%=
zo=iprWq+)D-UL9YdqKbYwI%2P5CZ_s>*u1BCfug#C0q`G8)$(2Du8^n0rHywDt(&L
z=KahRK%oZE#p5pNDG>1aSiHaubvz~My)pY8H&nWjFl<z*({5o3K(&TJo09V};#XCq
zu%W^@7clvH%YTYVIxfRs$ORF;ya{l=yu!0)WPh9uDf(gp17OR2<cz3N;0ufh3k1CZ
zP&P=0n*pB>19JfK=_}}SP+n9@;XGq84JNtFh?2GTRV$H1+L1xoz|(|wOI4bY(#G6!
z#>?t;;T&VMF9INysbnSqqO8y=dJyex`kG!1fTU`@CxJ3LmIa1^z6>DF!Apuq-Suew
z?SG*T8g)PnDa)kCli&paePuZ=WanB`TX42@9G6LJ`xFZn0+<e8iZQOx)|=fTM56s>
z<qQNFKwM7jClxXptMu6=5_44lpit9e{2c-a`Ed6m8Ye=8kguWH520)>M%6_ledD1X
zz%c!ig`(QiG3}=F{giMDe6p;txw1itrhm9vX&+F@f|dsxyd(o;WQ4$!0ERxx#8^n5
zdpWE^+|$l_%I@R>5>}_LQqoqyu;93X*;8JoqP08<S;xs5<OJ-HcchizeT57MkYO4c
z_)lk@LrC*>mLNNCI*YcIl&ks*F$N$~6?#GITvHdEjxQh}!rh6goDulr2GFWl>3>|)
zZq3O8auS9p(}*Syys(GCd^5G*R2}3ei|1OBxI@j{HLqx@DJeq<K%wFA#k>Lp70fh8
z>2#)>$<ihIe(`9%I~l-Ee8RoY@JtQ?XnT5{eF#5WhzJi{Eo<xPo1YK>)Ao~6=)N-m
z?B~B{eYAWHKnByG9>Cpt9YCy0bboy_h%N+hssFvcW&@<slu`Xw1Yc-`2hlC@*`&A|
zDpFl3^&=H-c(D&xuQh?Ko-+^$K%%Cb<E~9H6NqZX*yqLsj=EAu(B%e1n@rUwnNz`O
zgk@_?pqmUq08mvW(=FPRj!4O<zIYTaIJ)r}nvR*G@7`YTHpQ4G9p8luHh&t>GA$qI
z2?1nnMf*%pf@lZ{iDwG{_84g{kgnneqlBDFlq?eY9!kl;qDV_XIa;o6aC;XZjD<l_
zX*wP*FbbdoGFURx((+;dt>Upn%cDx2vTrtYiz`+&RRx_XOoR>CG9!TBb5*#!?d7;I
zro+28pqDp&<<g7@ZeL^(6MtqMf~<VG-k)+g+E{AnvXOV*TK28gBqz(NW6Gu7YQZCU
z9IC^iDE4#WZW|ivxXd|S-XDMv@}}w3tfWA=Zh8RLaafr;Duk~!C_=eEQt*^9k+hvB
z^L2dhsDg5Ot49=Na*w7dHN3kg131A@BzWZY{a!KrCW3VyceuC!z<;^pg7QK*CT+R^
z0H`gYTiD&{C<h+sj`rC#>k~HKo0GV2I#FbhPHsNPN3~ph-wXg7osdNA!I?tOL*O~e
zu4n{+V@+`9v{eQk*T$mJ`v3|>x#C=8T57wJYb;Q~g8c$TzuUVWpuIQOx4NA4){cp~
zEeHMnj>N}<IRH&t?0<rl276`2_PJfNK`?!T9OW1T&~5tMFq4~7_L)$m2Qa_?zelnT
zG>z@?>X~faY5_P{qvnECjwkQ4o7dAq6sCk7mJ@#mz!{En$5MjE9n1i@a$?#7z1Ww7
zt*({c-o96H@gXHl0@3}vx3<pbz2KzeqQcT#%>$95@7I@NJAY?~qy%qk=@h>dK&%PH
zov$4|$>bb?on3tMT##$*-@YncaW8c*-%ZB|A0S~%J$9{Sd00wtTCQ#gAV-@fNm(Z-
z_dFPwW8>`X>YD;ckoIA{bpbyZ0SL}*N?0)dvaf2zmPS`T=Kz7bl~aP}n*-=7^1P1)
zWT=)PPkN09Eq@2le?Y(!N@HOU6tWcHid*+n0Q?mFID(*2@#bF7$Nk}aar}>IVA7^U
zzh4%b$DaSX%mWA>^TW5vXYc<CfZFZH;U9QrxGt)K-UaZ?2^lY|oTrg$<M_CM|C#`p
zmHm>$_nQC?ng;zp0pRSdy|*TS_htRVZmS>nTm8V}>MTb-*FW^S`mx{j4?eGd^n3lo
d?`t0a{|}<;s&8DX6R-dP002ovPDHLkV1j^F_<H~V

literal 5201
zcmV-X6t3%uP)<h;3K|Lk000e1NJLTq004jh004jp1^@s6!#-il0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU_^GQTORCwC#T}y0K*BL$@8$ZVe;}`>h
z1c)G66iZFI2%Cf|uyGccNNKA^ilAwUl!p|us8b25szhq&qC{#)71|Wqh^iG;!Hc?!
zQiZUAO;X8GrGzwugrqh@jE(KV#?PMbjE|W)^Pl@V=gz&JJ3kr?wrB3+od5Ct&s)VD
z=;N-3yZPHL{@Tu88(4*w5?$f1bNtnNf8WJ3x(`)pHXa*(yt3(K#SD8nBb-zJkRmq!
z2!DIGviW62*voep_ExU}_y-{Mdn)Ty)^vhvg1to=V1YX-n_vF4Ctnj(<=OmqD{GS|
z`Zh3u)BwjT>ybDTdtSBR>Yc8vM<Qu=YQfL1P%>#37+`y49TH31Qx$(d+3|r?Wet)|
z6$VH+)x`PY>Nag=)lJRf|FhXKcKh-tY$;qX-c#vje!Z92-1s=V_2CB<2JlKPJ054t
zcXY9atq+oa2NPgn$1k2|;}_0Ht3I33EWPbfmVWpV*4X)=_*qAzXaCM$eX(N(!~y2x
za3PI+!#nmLV9Pqzc>c~@cAVYh3p>*L7dCxupk&vIYi#@eGlE(D(lEc)>&ITNFn}uc
ztNG@e5F~8qPj83H2qqh^YO$-YJSP}9@eE*N^Hm8OI{7=Riwo7>_S6qq>#pxwJ0=)*
z@W`u?GeGr=o7ep;s*^*a?ml>!Rn^v7J7&WJ-(V}co?ug7elA|7l-~9TTmRad!bEwY
z32x(OG6RAEYg*eJ0OJ-mof(WA*hZ=WAo)6ViiLzU=L0=RVm)8DCcY^EUT$~+-yJ-1
zD3CV5xmNE#C>X$rU~&LRA<^n);ux*n-xHdH0*JV-%X@c6Y6>D_0BqjI-~WyL8&o3}
z)YM~;i~PSsJ-*O4+_<#|4m&a!#h^~i1TBK&ssuoY<0Os&+V{Og+ElNbud3<xAHC$b
zVE~B02Bw$<5|3l~y+$y>rsJoJGy$~6=Py2;JPgqB{Eu06y17VYe|_Rj-^YTjhbzdc
zs<gHmzlYt;zJHO;Pfux062P7lz#KSykWGI4AK%xAbIuIkC^9L)38Vk&i_8o}5(<VY
zq@?xwZ_WH;NI0ZP2dpHZQ_r1K(MPp-1e^2aE6)pcZL(3&8kCy~JQG<kD;fsaLi)xw
ze0b?&>r^zD@7`bkanT-2`>eweu=N0Hwjy{VguSP*L0K~ZCH;PFsuMv<fhBZ)w%l}>
z1syn(D*q~%e4FZ-VkAG&PumnpE}(JiH%ZC0O<<}Su2t3^JX{36@bfyZ_H`5ljC$2j
zMX?KyF^00y02EDLz7)!FA#r}fu2Or1vHAICB`y>j3=k#?hSb51yJ;C*gA;xT8yF{s
z0aSHd3KvKOgkJ4&{7i<U{8EHwCy8^&x`#xXfZHLdf0gMF-E*Q<`(7%EB*q~N7&{CQ
zHaVev)jNpNElVT=gpGm`;q$twG702V-DB(quUegK1}J6q4nn)S2p?kllsX2pKof+;
z1eD)Dof$|D1I(1@X0h?8;Gqa%U4)KxE+Uu!n4lbmB9<7yw%v8wK)87_1q;-VngJaH
z*{lMRRI_SLT$VjPCcvf}BoRNQ!gCv57$Qa%Qdg*nw6$ANh^YyPO8TQ?fXrYq5bU%E
z1OehmJIfauDxV@~1YH0~cRX8~ZYGm32B7?YTgVtHo03==2y*hlp&6(^ke3*O5dch@
z20*t=v1DwqB3<noyYDs1=L8DdEr3GmJ}He@DvBf<NTozgL7<bAV&jn&bgK3##02k=
zt|PPy5;-OvNmM3uqW^<rF@W3@b<>fb_fmKv%f2LTz@h?K>+Cen<COaKLtrwQ&4cQO
z^x_>1hK#0Ln3vW714(3nOGONT4b5i&SvrPAbKB%nl8jt7Y-J?Yz`ac_XdN)RyeH8#
zN+iOf!~l_M0F`8I95x%99%eW;G*HE_84RL^w{<lDxB8>44Ty{ZbU2_~6EV7c$6R(S
z((5XDUqE`Hs|O2GN_8$(vnQ!2v8lne0eD8y@?H`KfK=zYcpfi_T1Qk5ZR57`?zm=D
z5>rfpbIgv9Sz{Q<45gYS5Gn)6Sh|T?pI!h`w?F%&VB&_ZuMiUCR{0ameS47fB(P!V
zMZk4}36^o~0Wgce7I2K|y`zlWCNqc50B#MDUPw;U(79Dkn-ONSrLLWALKL1p@2CMy
z(#yCXgsO+n{Mq`wrEG3I0xjr&LkiaG%~Cfso6SkN?q)kQy?eIj0#L`NTsGhtw}cV3
z9-|&5TdXZ#Q?a&ujcuAyD+~Zt>~-UD!?<y%=}V7q6Y5Rp4pM{#pzN*e)(so1>Dt%O
zoT|Hb%2a`okbC&=cXo=lvtbWoZt@wybV`XNqvlXK-~npUZODUY{QSe4;--Oi<?x2t
z;UTu7Yj@#ArJKcPW`}PSEx_8IL*%)@Q0nKyAY3<Wd+qvri>`TodYbh2sYX~dgx-4p
zVvZRy1LFU%_rN;yQ&Wz)5!^pC4hB<AeE4r8t(P*9dLU!B-h7l@efEPV#0F6=j;<$=
z;&2prP*MizDdnUMXaQ=`A)Tsr(lx^BQqQ@e7CFtJD_P4oJ=g=2dWAq5K(<lqq#hT2
z<FD_CR%&pz8;4?nFxsVH;nr_pH%`4%u#g=u^pNMm00>>ncUY#Ns<w`7MTZwKcK+-g
z)3E2cB54N0e|_RNj_1JrK%0#8ofet}lToPk#_yUR*(qA%gLEAEiUfKYn*y%&i&h~G
zD!RtGparC)ta3>6dOg>*=~>o0bc^+8r`YAm>4Lv)s$a%Bn`+svwno;mtlASGY<aA!
zNV<h;&P!@xj$o0LUp()N*>EnbDZDFPjib;$-1YQ3c*>UvfW6mkKDZC6J_r)mnE{M{
zk!~MlYVbX;ZCu9&$JpLW*V&n&Y|-X}@H_kspTTFnngSZAKC@`Xbm%{b)^VGE5M<(-
zX9mE5b@m=o4?ox>t3~zA%W$z=P%7f*M%meU_QIz_VspI`K8x?*yKcaiQoFcrIlqWv
zS`)nDHva(U_2VIUVgN|J?x0XPUS{vO(M`<_t^37MlJT(cZlO|aV9%8sq{O=szJu?&
zF+oPdgiy)Ub=zn>b?ab;x%3*Eb_Id5U5WxAHruEHdUWm;MPL5JeQ?8x%s9I+HW~Pu
zhG*v3G~fS+(skO;!1a_h3vzQt{&AY!#H;U&kXX2N^1c9!Z2?wbiTrct149*z1_pru
z9y-^{b{jR!fESlWH)}@)e16ovlR0n$hA@H9kknklTMGdy;26v|v>mC05K=h@tRtAi
zHMr#J??2W>MzO*ec#OsJf+MitZUnS%i`<SSqk2wN$GEq!hD7U*yTU_Liz5T*f*2zq
zhFsk?*NgOn;Of~TFUL}~AvDm3+0w)&z+4ottoM+KbYXxkTH6yAAs6nXCcQ|%1aY>=
z@3GE~ObB-pAQJCxK++ZyP~M0U1L%-sm_>~882~2IA2q#|7e^3S<VH61a|Xp0u^bRl
zt;wpzp(5Cgp!Tz~b8M+l$_?D;ut8XaP1eO6pwb#69I57oKAoH?`kj~1vMEt1bT7Gq
zlylVSk|r?pXlOU$hFo<~L6s2Ow?%%AMFGF9O|_wJel8YJER>TTB91N$K*#7!%DvoZ
zxl0&RhFRUH)8eA5$2!B^!Y4n<utQ&r2*8&Q^7?O06-j^C8UV#8UObaP7=Uv5WLD5N
zwRo%=)@8)<3Bem%q#i4`>2o5=_^YpOvOS+%XD6?ZllDJs>DP5bPiS02-wdEDRl-Sa
zKI<nZ{awa5Az$*k+nS883CGBnV4!-{EySju%#5?2UmXcm6Hx-=)D3OT3%I7qG249L
zlPC%y0G_VSPgfn3PfxX{jj#Z|yKi-2E&>~^BMSZ7#3EkT9<dUy8AneHfFOe|0D}v`
ztbJ2Vpq=D}VhD{HLY~5jnyRbV;SDPTZ34c7@2UU~>fb9hRj2rI>~`Pf%<lp1=8MPY
z`N+<CjsxJJI#2=0MWw1qZ5owxkY&@lA`_|xk79y1?rZa94)9rg2j9IT-Sec1ccS|&
zZ$8!+HGn!{fz)Sw<{Ny~1nSa{AX%G+O4XTbgT8v+;liwZ@@Z0)p$Zr2Q?E66Izmc!
zM{5JC;{T@RbE#fc;vZe!z<SoN;P3T{YR}abWVrqJL%<8$TIyMAjaj@6_r3b%17eMI
z>2V0lS3lkFJJlShGsuhW2MQfJ`L?J2Hmc(Wz!N2A`Glv8Q4){3`mp-wu!(T@g60+g
z0$)>1i66lL)^UsJdwn35kqJ<_P4>e%`Ri!ka(WhzQxuCzIO%HeIxKr5k}izh7Nub(
ziKTv@xIq;Hr<sEIJDA_3A}erX2r6N~2vE&xNw<pbVY>j>YS-N>OhbMHhfe)xj{dT!
z(F5iHCPvi)LM;X?i`H%Y(ScER>gz0<o;T0rU7nm_J6ANa+EkTm6fw<#qx_tB(imSa
zQT9!EN2o3`eLAX@=1{MyDxY)3uq7_#z!Pd<hf@Ff45fSEB);R8EkqPA&B2`-okI*C
zl8(&}BboEms<d!Ri(SWgku5wsJR!^tJcpO>Ue2~P*O8_V>t^%023EU+0ag&JH=X|N
z_K0;frQ|aW7UkyIKJo6v09at;=c6EO?1|0oi=G9p1u+H6Jb*cmZ)sordHq5sv{y_O
z83Wj21UXnq9kP_~3(J8GehO0|-G{yyW>L|O6%E2G=pD*BRvCd=PCc-yK<kB72NCLk
z2wXU_dp0J6h*4~r0g>U7F@d@9F<%|Qh}Szs@^qV#3ntYFb^X@hXkbw1Ck~-TAj6`P
z%?OgSfsjhJkx8VUxr+^g9fwb!AH*?X0Ch8P4kUlVzzJ{}p(XGt6_spC7)qu^cQ9Ak
zk{L{T+*LOb>K&OmxiQ<C>qRDRTT7i$I#y*Q{QN9u2%O8NX#k_y4jadc0aRwdd^{5d
zP{*snuI5W6Qnh#;8@$u_IUYc2MS(|q@rJ<+m{cCav~;&Mier_cVklM&Ab?^g-Rz0R
z3OO0nbjZ>jKYTiHFbA6q?UL`73Ac{Bbp6@j11a$RZi_VwOO64ke1fcRSG#`mN5<A|
z+{~)e>7uc+kfi>Q>hO;ZjIz$gy9&&~)&+YV6c7TB?Bw64uu3vC05vsR<Ks%Ea2leB
z&48-MhFln(6n?fXlBL~hAP2#npn)TNhdO4dDYCL~D#mRZ-2#XLVn-0=jr;E6|8KEY
zkbwxI%2c_kqei1+mZE7SmJFcA^KDPf1~XuDkk>!;K*vIOwLb9iWZ4&G%Y%YASyz}i
z252OweT4V;SlC&Zh=cd65X=As9)w_CsIu>UYgz(d+lA5F$<zQUO_pfN7ns4s?!HBg
zkAa5}wD>cT8i0C2SScT<-0g7?l+LB3kpF&eVuHJ=GZhU`>gVQ|sBLHg6}*|0p+gJU
z^jc!i0C9K{h>6-3fbcpE2!r4YfJ>yQ@j{4M?KUbq2B?q8Q$gS+26y4IMN(^uFK|3;
zKA7OikFJSwv}1&}DN7SjiiaamuA+%+c!Wp@0bkgPJ;>RGhprBnKLbQTP~#>j9HD2*
zEqvB;F26s-Q8S5T0I1qmuH5il8$c1278Yq}kD3LT0j3C_*WrhtaSJb06PHav!lx7y
zzty?{8_WbvqT2p_YnnZ2m(IpoVK!t)85#vG=Hi{d;9VTNr?tEo06`zMUeM;_<8=f;
zWn*?=F(ACfx>q(8WcILeNEW$i85FFj+C#LIx0kUSNCkarLY)8OHZK^U4auXR;0@XY
zwSq-}aAlKYzzM3ol;vNsVE`)W6Xx8Ze{$DKR}g{?kVT&+;O(q9$4s$XxJvI9Mx6?d
zi~(i{1_*QbQ+95Sls;q#@sg_B4|t<Z%qYoVRKN+^CJq%rkuZSnv9Y$sz^TXDAu4ZD
z1&a@<r_?VPB50mK*9WKuoFwzbfs7s+WkM(quW4;lfMD8q3MsmbSHFC4@sTUyTztXN
z@{M<tVZE@nMccBCzP!$+I`-b^WT3u4st*w7%8i!EnTQwp`JE<^CxQV|wY9A2p@$X8
z-9kPs%nQjUm@V(xEoK$q89SI8AOR;fAF9|3(8Gp(D;<mpvUBqbOjM}$!Bl<26JqnD
z27a*!1nDFl)5rWIi||>@7eE7LzH2ESF?Zl_V6y^Hh-#uB<^ZlAl_x-NV4OBTQU;J6
z!j%2S11j7=AwGv86&Ov^su?aRKNFO&`9agP#|Fj-;914uMkRlIyt+YX^3;)NA-`~b
zF+y0gFcA}7MP4M^WO4=w(Kw8T3CcXLZCn{?(}x#|G!%@DMRTW4f*UkX3v(k|J@g10
ztAwyD%mbJM+Tq&Nte73tluEHp4K?CDhc#;0QlQAM5_14hAJAYS4gj+Pskikg8!8Kj
z*gaHvN6c*bl4StUSBH9BA4plsjR#Q^K_S_3wBt*j0mS29U+od5z|Z5+MaMDsCTu^v
zO4@&w!k+t^SO$;;Jb)LvhS54E`vJiax5Z$HF_B3W&kXGUAk<1?O8uLJi7O1?gCNmi
zNVOlz6#4O~B?Ii1L>wUQ1T<eL{dHw|pA`ns5Yo6ZoQwBo4JwG^OpykHDijY5aHX;g
ziKQ!GfOC~~NGzQL1N2tbA+gje!de^$e8%54RMsO|>i_<}iyNgEu(z@viKD%XZXo9b
z;DFaFYmyjxePPd8L1u%Sg5&&cPi1||nojV|-<$6SF4DpuDw?3YCBMMjletZ<3AXdM
z;}u|7K7bE4U#fjq2FPQCZvM85zqVJHVM%T}HoTW_{2ASc{x84)?5Ek@&+CHc00000
LNkvXXu0mjfgeJQI

diff --git a/packages/react-devtools-extensions/icons/16-deadcode.png b/packages/react-devtools-extensions/icons/16-deadcode.png
index 33d99798e07b27bd48862e9d5779206bc96f9e4b..1017fdab45638186ccfd70ddd059cfb08a8210dc 100644
GIT binary patch
delta 322
zcmV-I0lohI1kwVK8Gi!+001a04^sdD0A^53R7KfJI3ph*E+Qg2BqK#9C0r~hXD=y!
zH7toYE|oejpgl3HKQgyMG{QwS!+UbhM>p4XXxU0Q+f_u~VNu|0UE_CZ<%4$Tj)Ur%
zkL;zK?y#uwyR`Gh!S>S4_}$w2=;r<O^Z)<<9^VXP00001bbnG#Q_o912S)$^0Gdfe
zK~xyiRnOTHgCGnAP@-1EVr^JtsTlnKpR~AiY+jh08IoMa@UPh3Tc;4Ux4V>niR63^
z*_;p@Y9dwM6Fj<QnJ`QTs6e!)v=T*Cz)@V2mom)xI|`Z33O^(P<m-((7tjZY=81-`
zFIIF7a539+Xgh2x7%C9g+JMM`chHW%JJh3wq3(tQOpXcrijP+oG*+SP?{RPOH#a5{
U6&(`IivR!s07*qoM6N<$g65o#$p8QV

delta 624
zcmV-$0+0RD0{#S$8Gi-<001BJ|6u?C02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00JOML_t(|+MH8OOcPNM{<_<`{kJH!SRp1gaDxy|_TmLj<sh6i;p9aV
z@c?*{01>??7h@v+#DqvlfRK<7W8{PfykJOx2E#!K>&XxnN`Dcyw$OI*&A_gumWz{2
zc6Q#IdEfWFdA4t{t4jdt@qZSVii_Q~4e&QLL-Kg7oFjA*W!G=;T9MUD#l^wf9Z(|G
zxcp*-8&M&}lGlfD-vF-_n!WJHRo8&z`w8sMe8i6URz7*jdG%H+jFir?5~;zyx@y%(
z#hBz{=q`bVihs!6b$_87slCz&OwIuTnVfj1zb<kv+&h5m#yZEk*!O#R(L%%sh%56H
zi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)Vifn*ws_Ov&>MK8*HAt+
z4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1AqOw<Tffgdl`Np){284tMDZ>
zoJ(q`^(dH5rnyPzj0`QCNA!LV62q^N6;y3v5)aL;Wi2=1Z;V0z@)_L^A7O59AE~^7
zcQrvlC&6*orL$-Xxc<FHQ`Oy1(<~ruY&q}d+{{iIZNZ~kT238^Mu(@*fpN@@5UJ@L
zLJk?DnrV)xU*S07bU-(Z(vzsq&7$h*E7*k=PBF55589c=v!A~h#o(24cx2m&11$|q
zqgj_dK4jGIOiRt=utCE4l#(|@2;zk=vT)AHB2GK|Y0vqO00RKIh}93UubI050000<
KMNUMnLSTYd7cO1^

diff --git a/packages/react-devtools-extensions/icons/16-development.png b/packages/react-devtools-extensions/icons/16-development.png
index 33d99798e07b27bd48862e9d5779206bc96f9e4b..1017fdab45638186ccfd70ddd059cfb08a8210dc 100644
GIT binary patch
delta 322
zcmV-I0lohI1kwVK8Gi!+001a04^sdD0A^53R7KfJI3ph*E+Qg2BqK#9C0r~hXD=y!
zH7toYE|oejpgl3HKQgyMG{QwS!+UbhM>p4XXxU0Q+f_u~VNu|0UE_CZ<%4$Tj)Ur%
zkL;zK?y#uwyR`Gh!S>S4_}$w2=;r<O^Z)<<9^VXP00001bbnG#Q_o912S)$^0Gdfe
zK~xyiRnOTHgCGnAP@-1EVr^JtsTlnKpR~AiY+jh08IoMa@UPh3Tc;4Ux4V>niR63^
z*_;p@Y9dwM6Fj<QnJ`QTs6e!)v=T*Cz)@V2mom)xI|`Z33O^(P<m-((7tjZY=81-`
zFIIF7a539+Xgh2x7%C9g+JMM`chHW%JJh3wq3(tQOpXcrijP+oG*+SP?{RPOH#a5{
U6&(`IivR!s07*qoM6N<$g65o#$p8QV

delta 624
zcmV-$0+0RD0{#S$8Gi-<001BJ|6u?C02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00JOML_t(|+MH8OOcPNM{<_<`{kJH!SRp1gaDxy|_TmLj<sh6i;p9aV
z@c?*{01>??7h@v+#DqvlfRK<7W8{PfykJOx2E#!K>&XxnN`Dcyw$OI*&A_gumWz{2
zc6Q#IdEfWFdA4t{t4jdt@qZSVii_Q~4e&QLL-Kg7oFjA*W!G=;T9MUD#l^wf9Z(|G
zxcp*-8&M&}lGlfD-vF-_n!WJHRo8&z`w8sMe8i6URz7*jdG%H+jFir?5~;zyx@y%(
z#hBz{=q`bVihs!6b$_87slCz&OwIuTnVfj1zb<kv+&h5m#yZEk*!O#R(L%%sh%56H
zi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)Vifn*ws_Ov&>MK8*HAt+
z4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1AqOw<Tffgdl`Np){284tMDZ>
zoJ(q`^(dH5rnyPzj0`QCNA!LV62q^N6;y3v5)aL;Wi2=1Z;V0z@)_L^A7O59AE~^7
zcQrvlC&6*orL$-Xxc<FHQ`Oy1(<~ruY&q}d+{{iIZNZ~kT238^Mu(@*fpN@@5UJ@L
zLJk?DnrV)xU*S07bU-(Z(vzsq&7$h*E7*k=PBF55589c=v!A~h#o(24cx2m&11$|q
zqgj_dK4jGIOiRt=utCE4l#(|@2;zk=vT)AHB2GK|Y0vqO00RKIh}93UubI050000<
KMNUMnLSTYd7cO1^

diff --git a/packages/react-devtools-extensions/icons/16-disabled.png b/packages/react-devtools-extensions/icons/16-disabled.png
index 2f0317ea3fd6b7933988fb03624d7fa0d1981d36..5426c9fb4d3427c772b9c64b383ce952d2a75a96 100644
GIT binary patch
delta 272
zcmV+r0q_3q1E2zs8Gi!+001a04^sdD05(ueR7C&)00000Wo2cRm6frvvBSf|(9qD@
z+S=ja;pgY)?Ck9D@bL8X^!NAo`T6<#`}_U<{r~^}FB^G;0000HbW%=J6&ffvMN?vM
zevO-{x5m`s@ldB>p8x;=h)G02R2b7$&p{RgAqWFdBO;>Jz<>QO+eK$OEzAENfs}&3
zDFp!3Dj-7vpa9S_X(K$^1#S?s!tI6uJEz0@2da~~capOL1;&|snEERw4Mn12(J~ts
zBv2#-i<+riX#B3U<|h{Q3f-BRo8vy~=!Xg)&mTg{11%<d=M1?3O)F5fJ#~NTzX2!|
W1?dqx9k~Di00{s|MNUMnLSTaA1bU+Y

delta 479
zcmV<50U-XM0`3El8Gi-<001BJ|6u?C02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00EFmL_t(|+N4uGYr;?zje!zeQV4V@>0WSgD|XN9Q0bVVt&>ZCf&ZXm
zrfhDdQ>OlaXlE0e#m!ofKoAv)m@oUzqc=R$kD<MA$>ZL4?ti`K+`O73Nhi#Yq`z4z
zSHZ69wkDIwb+_A9DP~#L*>pO+L#|SQV^7K1g{$3e_Zmf!ou=s<D|F9*{XEZC^ZEP%
zU&nC_5pz%gmjJ?<b-h3lIGg6YnkSd5q!dNrqZ@|NDvDwa@AZ0@l#k<hUB&Q9=z<Q^
zb<b?O-M+warhho-(L^N$j73QTf;-~S1%)@8%`-F*_2C7;6$z@kTrMB!!v51B9Ae0k
zKENDk&}=r3MP6YT&giUZnkwdWU00blt5SoXD4;VO6tG@&r3pdpV2z@PB%El7A&0`>
zuF<w_z8*HkQ@vjAc%FBgBuS8E*=#r*b`V3Zy23C20aycZZllpCkY$;3_kI8Uw+B&<
z1HR&_#^dn~ob*8s8xS!y5`v5sX+ZVCU=R>3JS@{R8;iwa-EOx7@qX>U&-p`u0RRNq
Vi)u@!L2dv5002ovPDHLkV1h#p;GqBj

diff --git a/packages/react-devtools-extensions/icons/16-outdated.png b/packages/react-devtools-extensions/icons/16-outdated.png
index aa42bfe0b4e0c791fa1bb7f48e989729028bf481..9108d151cc6bf1137c05057a717a31cc72e401cb 100644
GIT binary patch
delta 297
zcmV+^0oMMm1i1o`8Gi!+001a04^sdD08~&+R7D^lARr(hE-fQ2E-pJeCOkYmN=iyr
zRV`RpSY~Esad0zqbaa1xHiCkJjfy&ukdU37ovW*>wX#FGxw*&3$JN!<-r7y$<Kye+
zQ1S8c`Ser&|NnW%xNQIc00DGTPE*fIJqJes005IoL_t&-(|=XZTM~mH3<Xdl1wo2H
z1+Rhq@3VrBY4ewpNiugB=&y#}YbS`L(_LDh1FYr1>H=>`0D`=`!I90`v_S_E08WVk
z-N7Q%<dpI&_oMPyj!?BK#1mN3+CW2|Zw=zP5~t5|G}T&JY-N7lnhZUcWgBmhu;X6#
vvUE@!VCY@SRwDKer1TN)HMP3p{>1+Rlk*7$s*O2y00000NkvXXu0mjf#36-J

delta 544
zcmV+*0^j|)0<Hv*8Gi-<001BJ|6u?C02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00GcRL_t(|+N4vlO9EjOf1c${9ZnUUf~yV^w77^+;37Aji-S1|L0E$n
zf)Kd5X(2g?n=Y;voPU6lLoMA9cta;OhF;4Farqv6dY(@8gMW|vzW2S~d++zYcdkGn
z@C*Ql@Hf1;y<YFV-4cmJARdpyXfy)TG|A@k`5>800?+d>9*^zr`<#<pEEYi&Md)_B
zM8bu8wAJf%2!%o`C2TnZG@DK6bUIL}REUU(Mx!vDPQfq?@=;ZF!Qq^u1VNxL%0Ln>
zBr)LG4%fVi7Jnn=aycThGs}c!Gh#lUhrwX5DgkvOSy2>f7&`QNy@ewN4F-c$iJeRV
zkbvYwB0*U&Gjn7;z&lx%DS;ClE0<|!-%WkN#ya8VIPON%G^kdqq*an6(mtEbpj<9P
ztJQ*7EJoGo?+O&I{qXSkwTysG#1#&Qtwy6^>AG(9`+t4Qj>%*~_u89encuQ?d2wVh
z9%p|Zd}o}4R4N78Y?dm)$;180@ivGD9=NN0!ui<&2s`f0bHIRP)Q-B<*C7<H{A52(
z?^2*ldT)IavCHjto5mKOu2d?KEi)&vjE3<;dkl12`&bSV12&Qk5gQ&+^vtvJYgIlC
i4GQqD-x>K=fB^u-^5Il8&kzd$0000<MNUMnLSTY2-So=<

diff --git a/packages/react-devtools-extensions/icons/16-production.png b/packages/react-devtools-extensions/icons/16-production.png
index 1c253dca5d56d6a309c5854b8a82266dfce01aba..fb7e5a92c04c9f608da3b3ad15b363d6befcce88 100644
GIT binary patch
delta 255
zcmV<b0094@1dsxd8Gi!+001a04^sdD05(ueR7D^lARr(hBr7c^H99LmM=nZKGF4$U
zUv4>Sdp&iDK!27*ilaxAuuGr4PN~XLwAWR><XOq_kg*WE00001bW%=J&r3ZAM*si-
zh)G02R2b7$&p{RgAqWFdBO;>J!2K`VMQ1uK%l{sMl!Cu01$Y3|Dj-7vpa9S_X(K$^
z1#S?s!tI6uJEz0@2da~~capOL1;&|snEERw4Mn12(J~tsBv2#-i<+riX#B3U<|h{Q
z3f-BRo8vy~=!Xg)&mTg{11%<d=M1?3O)F5fJ#~NTzX2!|1?dqx9k~Di002ovPDHLk
FV1hR2UY-B|

delta 532
zcmV+v0_**d0-^+v8Gi-<001BJ|6u?C02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00G2FL_t(|+N4uGNJ3E*KK_uTX|F&+EqX#_D2PK&1<}xuLoL}-5VRRY
zOVm^eO*z$4lS5DhxivUN(yU-O1X6<)B%xR+3YAfQ2d=!HO@DRZ^6ow7o^!tQ-S25+
zSxys?kN#%YT6MC;Jwn#;Y0{g_O`pMPCtF~iV=D7$)yeYWI+^5Q^6s8-AtYk2H(AKF
zw%3TcepJva51k%A<>SXxxH{*rXFJON^vV>~s}<fG`(0GcWt%x#H6{TaXpn@Zg#KBp
z{Ek2*+5!u_Fn@RXCdEELe=9ukUS~A3Um(&+k`%_QL#q+KB>6_EcAw=DDz_ObB@^^s
z%=6`TyOU$!2?em%qZ1rrP9PER2bOm@F|#qpgubK_lsk%WaS#ixnj8R{(gft+VrU|`
z(3#tG;g8oMcQaTW)H4}mXt?ljx=+s+G3xS-F((~^UVkz=oaC5UqPv4lZlY-@@k>+%
zd4P(5S~MUIMF2k^KWTjh!7Ao@j2%+9e}Z~vLtGf$P@pduYSD6w4(io1e<2p}v`Ri&
zbfY|!l9%M(iZT~K0LEcZB%TxF;YF0z<Ukm-4%R`W7z;=sVGyg7u_*Ab-}zgB0RRc4
W!;3a9l@0d*0000<MNUMnLSTX?2kV>w

diff --git a/packages/react-devtools-extensions/icons/16-restricted.png b/packages/react-devtools-extensions/icons/16-restricted.png
index 2f0317ea3fd6b7933988fb03624d7fa0d1981d36..5426c9fb4d3427c772b9c64b383ce952d2a75a96 100644
GIT binary patch
delta 272
zcmV+r0q_3q1E2zs8Gi!+001a04^sdD05(ueR7C&)00000Wo2cRm6frvvBSf|(9qD@
z+S=ja;pgY)?Ck9D@bL8X^!NAo`T6<#`}_U<{r~^}FB^G;0000HbW%=J6&ffvMN?vM
zevO-{x5m`s@ldB>p8x;=h)G02R2b7$&p{RgAqWFdBO;>Jz<>QO+eK$OEzAENfs}&3
zDFp!3Dj-7vpa9S_X(K$^1#S?s!tI6uJEz0@2da~~capOL1;&|snEERw4Mn12(J~ts
zBv2#-i<+riX#B3U<|h{Q3f-BRo8vy~=!Xg)&mTg{11%<d=M1?3O)F5fJ#~NTzX2!|
W1?dqx9k~Di00{s|MNUMnLSTaA1bU+Y

delta 479
zcmV<50U-XM0`3El8Gi-<001BJ|6u?C02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00EFmL_t(|+N4uGYr;?zje!zeQV4V@>0WSgD|XN9Q0bVVt&>ZCf&ZXm
zrfhDdQ>OlaXlE0e#m!ofKoAv)m@oUzqc=R$kD<MA$>ZL4?ti`K+`O73Nhi#Yq`z4z
zSHZ69wkDIwb+_A9DP~#L*>pO+L#|SQV^7K1g{$3e_Zmf!ou=s<D|F9*{XEZC^ZEP%
zU&nC_5pz%gmjJ?<b-h3lIGg6YnkSd5q!dNrqZ@|NDvDwa@AZ0@l#k<hUB&Q9=z<Q^
zb<b?O-M+warhho-(L^N$j73QTf;-~S1%)@8%`-F*_2C7;6$z@kTrMB!!v51B9Ae0k
zKENDk&}=r3MP6YT&giUZnkwdWU00blt5SoXD4;VO6tG@&r3pdpV2z@PB%El7A&0`>
zuF<w_z8*HkQ@vjAc%FBgBuS8E*=#r*b`V3Zy23C20aycZZllpCkY$;3_kI8Uw+B&<
z1HR&_#^dn~ob*8s8xS!y5`v5sX+ZVCU=R>3JS@{R8;iwa-EOx7@qX>U&-p`u0RRNq
Vi)u@!L2dv5002ovPDHLkV1h#p;GqBj

diff --git a/packages/react-devtools-extensions/icons/16-unminified.png b/packages/react-devtools-extensions/icons/16-unminified.png
index 33d99798e07b27bd48862e9d5779206bc96f9e4b..1017fdab45638186ccfd70ddd059cfb08a8210dc 100644
GIT binary patch
delta 322
zcmV-I0lohI1kwVK8Gi!+001a04^sdD0A^53R7KfJI3ph*E+Qg2BqK#9C0r~hXD=y!
zH7toYE|oejpgl3HKQgyMG{QwS!+UbhM>p4XXxU0Q+f_u~VNu|0UE_CZ<%4$Tj)Ur%
zkL;zK?y#uwyR`Gh!S>S4_}$w2=;r<O^Z)<<9^VXP00001bbnG#Q_o912S)$^0Gdfe
zK~xyiRnOTHgCGnAP@-1EVr^JtsTlnKpR~AiY+jh08IoMa@UPh3Tc;4Ux4V>niR63^
z*_;p@Y9dwM6Fj<QnJ`QTs6e!)v=T*Cz)@V2mom)xI|`Z33O^(P<m-((7tjZY=81-`
zFIIF7a539+Xgh2x7%C9g+JMM`chHW%JJh3wq3(tQOpXcrijP+oG*+SP?{RPOH#a5{
U6&(`IivR!s07*qoM6N<$g65o#$p8QV

delta 624
zcmV-$0+0RD0{#S$8Gi-<001BJ|6u?C02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00JOML_t(|+MH8OOcPNM{<_<`{kJH!SRp1gaDxy|_TmLj<sh6i;p9aV
z@c?*{01>??7h@v+#DqvlfRK<7W8{PfykJOx2E#!K>&XxnN`Dcyw$OI*&A_gumWz{2
zc6Q#IdEfWFdA4t{t4jdt@qZSVii_Q~4e&QLL-Kg7oFjA*W!G=;T9MUD#l^wf9Z(|G
zxcp*-8&M&}lGlfD-vF-_n!WJHRo8&z`w8sMe8i6URz7*jdG%H+jFir?5~;zyx@y%(
z#hBz{=q`bVihs!6b$_87slCz&OwIuTnVfj1zb<kv+&h5m#yZEk*!O#R(L%%sh%56H
zi&U7?*0K5aIc7WVuqVcb7`7~QAT#x01XOTA2xsyn3Iu;)Vifn*ws_Ov&>MK8*HAt+
z4rwLM`cM<n%F@8>Udq%=7LO-CU}b*ZqMO%`w2<$H1AqOw<Tffgdl`Np){284tMDZ>
zoJ(q`^(dH5rnyPzj0`QCNA!LV62q^N6;y3v5)aL;Wi2=1Z;V0z@)_L^A7O59AE~^7
zcQrvlC&6*orL$-Xxc<FHQ`Oy1(<~ruY&q}d+{{iIZNZ~kT238^Mu(@*fpN@@5UJ@L
zLJk?DnrV)xU*S07bU-(Z(vzsq&7$h*E7*k=PBF55589c=v!A~h#o(24cx2m&11$|q
zqgj_dK4jGIOiRt=utCE4l#(|@2;zk=vT)AHB2GK|Y0vqO00RKIh}93UubI050000<
KMNUMnLSTYd7cO1^

diff --git a/packages/react-devtools-extensions/icons/32-deadcode.png b/packages/react-devtools-extensions/icons/32-deadcode.png
index c4a6bda3e6a6d0df9388f3beff37e254a91df25c..2376a50e3e9ad3eecc30e947bbc95d7478043b97 100644
GIT binary patch
delta 547
zcmV+;0^I$k3b6!`8Gi!+002a!ipBr{0BKN6R7KfJIN3@#BOf3xA|g5@BSj}AQ7R@}
zEGTC$DRVL_el;wKH!hVrFQ7d!tUofhLNvlfHO@yj*-ALuRYcxlQQ&M{<9BN1gLdbR
zgX)=&?4_LUu&D97wDZQn_R`Jx-P-!-=Kb{Z|NsB@Fhi#R0Dk}ibW%=J5Wi=SadZFx
z0d+}4K~y-)g_G-&gCGordvUv#swkipP>{U;Lv9kfotAOh{7{E{l9LlS9FFQk91oxK
zM5r(E1dLy;$)A%CUYCGL5CLf21V|A!T>u_Nr9H%PO35lU!(0F%@a73O;zFA%fxKV=
zrk5XH0Z-2{#ebBzdRX>K=q;HM_}^5PaOv*W4LD+OrATclmmoNdh#yEf^8~OxSYgpy
zZr-G*!nS5t2rv;Aqt?yAU3Ef8Y{i0CW`U>~h-p-04XTqT45^}9Ms_6-FhUlb&;da}
zt<<f1*t-jezCYb~X<<NxH02WUQQ|^n*jCSgeu%W#yMIKH4MJ1`8~bn5(X3aE1L}pi
z&@NT;)7bgNsF{rNZA~Jwl8Y>?hRIHCMX6@M*Lf&rvF7p0AIg!6ww&gg-yP<z3U!=+
zyLTYZe_)9{V)dnYFA-U+INwO1s;lx;lL=;_IxJw2C7}60km>E|D%zckqph=i97MH$
lv!2n*cO2mB<^6X3{{RSZOSx|jqC)@x002ovPDHLkV1gPL02}}S

delta 1310
zcmV+(1>yR!1f~j*8Gi-<0047(dh`GQ02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00hWML_t(|+Qe5~Xj5kxesfO#nw&IEW7||MTPrQXrZBxRH|;Lmjb5z1
z*aXW4V^YCQ*mkpCD9G$Z9cT-igNbf1=wLT%H<(^51L;k7vwsTf)s%M3-?Uw9o8+WT
zViLdSO}}_fdQ4&*^M%7nzI^BXdEV!Jz7yMDhYmCm(WJOur~lWki)%o6LBVM==A`n1
zf|ru8SKHxeYp13+kC3Caoz~}ODf#;}Wfvb<?)B{1N8WHRxx2b)W8oIXCN5K6PgeAA
z6C5a13jWd;-+z(f)hI0-x`boc%1=L-oMT_;<5Sci62KY~#9rM0Ir(nIBq}0+$`Kq+
zkN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!#UsDemjIvy><A7+B?zL=
zOmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3x5z?R&K?MM@tU`Qm;K<0y2ov
z&|kCyl>-%^VYLtTG{V-LfP0g8#)P(?D)t<(-x)r^Ydbc1U{17$vP;p5{_WM^2jMg^
zT5#s-?B?oaUpv3~v9uQxfQiZL34RWhBe7}-SdJkc^a~dA{2NFFxbYi^S<VgZKrbgJ
z_eevVpnn}8rByPf1dL+_OA5B5dOW-&h=vMbR<kWNL(YE3=tZ&%@j?RdVWl51^<?+X
zGt$A%&&Epu?~e@A+O<iB-o5)(Qd}<nZE<{rozCeQima{ETq;AFs*pdOqCzIa^N#@j
zLjx55?J6yfjqqI+#WjgF@BT0)rhlbEHe*Hr*?%JmkV?+IQBYuj{?70Rw6O7rKAiv8
zgus`(wo#Yc&VB&7qcy}88+}2%Ffr+co9w4VLi7$-?E5RG2c)314t>P!iA`MLwVA}m
zmR?T9boyk6pW&a1rD&H(W{=moML*VrKiT4%#;{gvbE>qM&GB_98mD=Il9j1tdZ9?B
z0)Jkq@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvSu*mp6YJTe-=0f`K
zqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)G>BKA|44D7E`Gi>
z0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;p?~jDMk`Y&Fd1RjR#K+mFiZ)i<HEf-ITaiA
zw6_WW5$0J<LWJPurx~F8`TRMWiEnUq6H8C#`RXennpjSn)?_P&1VWgQnxz=f11bbZ
z5_iSOU`phKum-H=OwUAC*QvkROOcgzCL+u$5IEft5O-UBhY_^DD7&*<J?>$ji+{fD
zY1y26M``cZ(FETITc5C8&*kaQRHpvZP}MZbC9Pkl0O|3N&lC(TIM~!+nt%&pGS1#!
zWz_0Aj&ZtKnVu_fz;ZDH{DUo;VLV-==kukuJW~Rw9%q3SNv9s_EH)sR(VzuTKp@fP
zP+1*EUvB2_mMF_Hv}9-?Sekth5PzhEEMpuy|Cpw?w|Qx|$H5aZlSuP3sI;rWL5Bk#
z+ApdP*p>QUNTAzzC%|DO4<t;8QOP9RVf{gGiSf91sa5}WR89cFaJWF26wOEZWP+0_
ze;0rX0`4ILDQmTge@tpMzz$MAO>C--;q~V}2}Skw1V?NnFz{a_QSaaL#}@(&0FmNf
U5G=%XfdBvi07*qoM6N<$f-B2;p8x;=

diff --git a/packages/react-devtools-extensions/icons/32-development.png b/packages/react-devtools-extensions/icons/32-development.png
index c4a6bda3e6a6d0df9388f3beff37e254a91df25c..2376a50e3e9ad3eecc30e947bbc95d7478043b97 100644
GIT binary patch
delta 547
zcmV+;0^I$k3b6!`8Gi!+002a!ipBr{0BKN6R7KfJIN3@#BOf3xA|g5@BSj}AQ7R@}
zEGTC$DRVL_el;wKH!hVrFQ7d!tUofhLNvlfHO@yj*-ALuRYcxlQQ&M{<9BN1gLdbR
zgX)=&?4_LUu&D97wDZQn_R`Jx-P-!-=Kb{Z|NsB@Fhi#R0Dk}ibW%=J5Wi=SadZFx
z0d+}4K~y-)g_G-&gCGordvUv#swkipP>{U;Lv9kfotAOh{7{E{l9LlS9FFQk91oxK
zM5r(E1dLy;$)A%CUYCGL5CLf21V|A!T>u_Nr9H%PO35lU!(0F%@a73O;zFA%fxKV=
zrk5XH0Z-2{#ebBzdRX>K=q;HM_}^5PaOv*W4LD+OrATclmmoNdh#yEf^8~OxSYgpy
zZr-G*!nS5t2rv;Aqt?yAU3Ef8Y{i0CW`U>~h-p-04XTqT45^}9Ms_6-FhUlb&;da}
zt<<f1*t-jezCYb~X<<NxH02WUQQ|^n*jCSgeu%W#yMIKH4MJ1`8~bn5(X3aE1L}pi
z&@NT;)7bgNsF{rNZA~Jwl8Y>?hRIHCMX6@M*Lf&rvF7p0AIg!6ww&gg-yP<z3U!=+
zyLTYZe_)9{V)dnYFA-U+INwO1s;lx;lL=;_IxJw2C7}60km>E|D%zckqph=i97MH$
lv!2n*cO2mB<^6X3{{RSZOSx|jqC)@x002ovPDHLkV1gPL02}}S

delta 1310
zcmV+(1>yR!1f~j*8Gi-<0047(dh`GQ02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00hWML_t(|+Qe5~Xj5kxesfO#nw&IEW7||MTPrQXrZBxRH|;Lmjb5z1
z*aXW4V^YCQ*mkpCD9G$Z9cT-igNbf1=wLT%H<(^51L;k7vwsTf)s%M3-?Uw9o8+WT
zViLdSO}}_fdQ4&*^M%7nzI^BXdEV!Jz7yMDhYmCm(WJOur~lWki)%o6LBVM==A`n1
zf|ru8SKHxeYp13+kC3Caoz~}ODf#;}Wfvb<?)B{1N8WHRxx2b)W8oIXCN5K6PgeAA
z6C5a13jWd;-+z(f)hI0-x`boc%1=L-oMT_;<5Sci62KY~#9rM0Ir(nIBq}0+$`Kq+
zkN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!#UsDemjIvy><A7+B?zL=
zOmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3x5z?R&K?MM@tU`Qm;K<0y2ov
z&|kCyl>-%^VYLtTG{V-LfP0g8#)P(?D)t<(-x)r^Ydbc1U{17$vP;p5{_WM^2jMg^
zT5#s-?B?oaUpv3~v9uQxfQiZL34RWhBe7}-SdJkc^a~dA{2NFFxbYi^S<VgZKrbgJ
z_eevVpnn}8rByPf1dL+_OA5B5dOW-&h=vMbR<kWNL(YE3=tZ&%@j?RdVWl51^<?+X
zGt$A%&&Epu?~e@A+O<iB-o5)(Qd}<nZE<{rozCeQima{ETq;AFs*pdOqCzIa^N#@j
zLjx55?J6yfjqqI+#WjgF@BT0)rhlbEHe*Hr*?%JmkV?+IQBYuj{?70Rw6O7rKAiv8
zgus`(wo#Yc&VB&7qcy}88+}2%Ffr+co9w4VLi7$-?E5RG2c)314t>P!iA`MLwVA}m
zmR?T9boyk6pW&a1rD&H(W{=moML*VrKiT4%#;{gvbE>qM&GB_98mD=Il9j1tdZ9?B
z0)Jkq@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvSu*mp6YJTe-=0f`K
zqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)G>BKA|44D7E`Gi>
z0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;p?~jDMk`Y&Fd1RjR#K+mFiZ)i<HEf-ITaiA
zw6_WW5$0J<LWJPurx~F8`TRMWiEnUq6H8C#`RXennpjSn)?_P&1VWgQnxz=f11bbZ
z5_iSOU`phKum-H=OwUAC*QvkROOcgzCL+u$5IEft5O-UBhY_^DD7&*<J?>$ji+{fD
zY1y26M``cZ(FETITc5C8&*kaQRHpvZP}MZbC9Pkl0O|3N&lC(TIM~!+nt%&pGS1#!
zWz_0Aj&ZtKnVu_fz;ZDH{DUo;VLV-==kukuJW~Rw9%q3SNv9s_EH)sR(VzuTKp@fP
zP+1*EUvB2_mMF_Hv}9-?Sekth5PzhEEMpuy|Cpw?w|Qx|$H5aZlSuP3sI;rWL5Bk#
z+ApdP*p>QUNTAzzC%|DO4<t;8QOP9RVf{gGiSf91sa5}WR89cFaJWF26wOEZWP+0_
ze;0rX0`4ILDQmTge@tpMzz$MAO>C--;q~V}2}Skw1V?NnFz{a_QSaaL#}@(&0FmNf
U5G=%XfdBvi07*qoM6N<$f-B2;p8x;=

diff --git a/packages/react-devtools-extensions/icons/32-disabled.png b/packages/react-devtools-extensions/icons/32-disabled.png
index 7c750453238885d1cba45da238abc82ae0fcfa06..3c984726dadc252e9ea853bf4985c06c364bd583 100644
GIT binary patch
delta 475
zcmV<10VMv!2<iin8Gi!+002a!ipBr{069=hR7C&)000000001GWo4C>m9eq0!^6YS
z(9qi2+Tr2h=jZ3_?CkLH@bvWb_xJbt`T6_%`~Cg>|Ns9a8$rte000tnQchC>6dEWu
zMN?vMevO-{x5m`s@r1iEjsO4wPDw;TR5;6pQ(2NjAqY%x-+xfJ|6vC(lX_(~J}e4b
zp&Pi}?(oI#x9|6gfFJe*_%@2)Zfw}x3Gl>|S>qm=CNFmY8V7KVXNW`vAagzdi1s<j
zN0w;S6R-n?IbI%I0Zq?9lgP4Tf0x27@`3Fwohd4%Iu@HvtY?v~=p8Xuu_=zAs(%86
z9uMwrZStNb;C~uh6$SXo-NRUw6Qt3jP$}HNcb?7wlLDwTQeDy#0xUgL6;wdrT`-9P
zLjhI5_>lJ_U|Fae0FdHNF(E1!?}SA%S(^deqsSuMLlt(FGj&MF{hwylUJuc6(_{=t
zi&wq~mA8ls#kM=rAvMRM8X~HmIdVCAF^t&cka(Ea&Qxw%*b&im@8@CnU&!Y712d+c
zNq#U@V4VY_B4~U3Ze4j9T4w`M_w496yey6@wLEsg<)?cAd|bVs%lm8n{{RTf7_2~E
RY&HM@002ovPDHLkV1jBR-%<bo

delta 1082
zcmV-A1jYO61H=fB8Gi-<0047(dh`GQ02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00ZVpL_t(|+Qe7AOIuMCk1sJQ5|vO?LaK;MXb`g%MaQ-xZWRZ|Ru^@s
zisB#!|9~I}f{^Iasa6C*sO?lxn&My`+74m{lYk%9U`@m%YJcqcS&!UY-+R#r=D^K+
zx%b@jeSY`8JcGfY(6G`l8y=UEG$MKQ^CSn#Z;ViKs2pTgGI2~zO+7t0I2ez`Vl&&@
z+g<pt#k;by(g5Dm)6;o8ySuwf?qY>aYml<%7Z(?QFNqR~#LvrXBH>;V?hyG%={Kx_
zpLx&D&VnMJ#(&UWgdzx9TwHvC{}9G=P=a~#`ZbhdP=v;K@8;&_JMiI|wE^%7L!K9v
zvN4E)%!df<?Cf~-bY!f7qoX6gJlEXZ><@>-9z{{Ea=f;-=I-t74at1x=jY+Fva$v}
z`56t!&(FVANECXf-EJRDCX>HXsnl^}W8<t=!BKQV4}UVCxVYFU{)eL0*47!k`+UB)
zOG``bh{WXN<m{~;Gn<{1!myrvQ>O5jmzQ^KY;3etR8%-E7R$4Of&!<>WV&j_o}QlX
z%v)Gk*g)QXK}4`G8jXfv7@m4M^0*RZFGoj5J8U*v7b^onIE2RIalc#}R;%?DJZ7F7
zsG~GRB7c$33kwT#YITy<1!9|l2z)-_Ny<K84OOkx+l(3L2<{;8vJ5r+NNYm~U;u$a
zZYv1jcETE^;|=EV#2R?fmY4$$fQO$@$g;u5Eh`!E{{;*1fI&wF6cA$qlwV53`(Ug*
zC*y~NEe0DHu|W$o7;xBAF|16ymkm|}FcDqv41Yw~5*4pqW4=VS2w^ciWiQoIzy$^#
z(R=Jeo{?LQmRK)5<l0E90c_SQLf*`W3(|(LV=yllDtKTB<Z#XKX~}b{hY^f`5cvp(
z5!{AY(`rM`J&fasa#7-`b~0)L(a_LPOHED9fCxmwArrzuBj;R=_vGYcd24Iyqs!%5
zzJD_kGEp=JD=RApR##WstE#G;gmk4M;sNCt^F@RN{O;}Tg_@e0=7YhYySlpCm(`63
zp;v1sP7OlMm;hciKB?gDcONhsjitz=Jm1&X*NzCZwYAOH)zwWP68%InA9&=`^xnrY
z<@#8j^Lo9<fk42Guwzh%_%N3ZUg#PC?|+Mmif(y;<GHrBb{rmJ;2k$&H86V6h2-$?
z(2oM6_UYg&Iu+SOeSQ55I$?Tx`XvV5QE*t}Ydfy+=!*UQeSg;1a_)T@_0-M`5kF+)
z)Eh?nv1nPgzP_H=-QArdkN;3N{Gf})^6>C*e`jasSDDx2@%YJz_YQ|6Kt}%t?=#5A
zh#NBQeIt5IQm(&Jb45v{Ab$OUYRtvw`9A>$0RIdr8Dx%^!2kdN07*qoM6N<$f+9c?
A0ssI2

diff --git a/packages/react-devtools-extensions/icons/32-outdated.png b/packages/react-devtools-extensions/icons/32-outdated.png
index 6eae901bf058833312c3ccd677300e26f08bc3fb..a72807b3af3fcfbc612908eb1d00d2f2f187fb30 100644
GIT binary patch
delta 536
zcmV+z0_Xk52&M#(8Gi!+002a!ipBr{0A^53R7D^lARr(hARr(vEh8>2E;~CWJUl!}
zNGeK7N>)`ZSXfwQW@d44Gjw!xe|<KBf`W~TI*^c%nwLGDot>zqK&z{(wX#FGxw*r?
zM#sm;(9B8I)z#kGP2=O^>*rAM@$vceQ~&?}aW^}e00002bbnG#QxLyrk8yMW00C`D
zL_t(I%Y~ECcH<xnM3X6H6}w(r>#{aWh&2EIlYOvHLfvjNPn^RAi4k);o$-Utr=RzM
z^9fIM2PEY=Zp&`YDIS4n%w!5c%(Oxa2VkZkD65Fs7%*@=067DIn6U@|)N}+C05FnW
zbD#y%c0;kP`hQm-0|?bbSOB2v0Z<N_D@l@N(PNWwt|X0%s%oZ@lm-ZiT$n<wVY8&5
z)W#?=YQSR39-XRS<jB+j)davmW(Y|N>Z1Zq==Oe$9h4*!hV3OgAXESdcR(?4Xs21M
z-%6CdM5y)CxI<wQ<f<GXssd$?*XdW|gBlB$ST~m=Gk@^c*Vd>o6q01kIp=B-7k9sW
zw%WQ;3oU2k2&}&P^_%}tOnNTBoBzY=Z(qk9&8!6A>MK^iy|lm#02pWynB0B3xlb)n
z0H8M$;N`Xhx7P<SazIQh0l*)3zh18H{{8@hk+kg_`9n=`qUyM3;rDb`1N=97Ps95x
a{vWcODG?#dTYyyn0000<MNUMnLSTYN{qYL`

delta 1085
zcmV-D1j75K1jh)F8Gi-<0047(dh`GQ02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00ZesL_t(|+QgSnNK{c2#;<=c2pk5&2^@m~p+rI#Q8Nn#A)Ji}Np4(N
zqZ=^_R}ut5AVuj$mu?)wg&QFVhfo(Ov(PC57wJ^sYP3bVQGX+tBBuAdbspE}n|U)X
zoDUvv-n;j{@0{=axpyi;p^#rG_1d~R)cIo7x_YYoe*fDtkb{tQMJmfgF6gNCn$g_c
ztOf=KR6|39+TPw)@pxSA?(VwIjYJ}<v$IpLVb1jQbl$mw3M&V4`350PBofN!^Qn!E
z4NU+R78ca__<y)MIy$oFO-@egao$0S5&Uj%Z@1^Up|X&5cn*12SC{JR>r<_*t=g;J
z-d=4OBwX?vqabAd=;)|k%iJ?7Fh4)9?~psgB4dyc8VI?YNG6k7ImXVU07#`$r`|z?
z5|9Htcaj4_L3j$m(|}+w=$e=#BO{uW_|DAC*v6C!Pk#fP9zX;kKw84XI|+$%t($@-
zs=egLQxb`fg~MTe7o$i%Qx%?(J)KV5@)xRryh+GHDj*t-o=|{~;qCJBvL-QsaZ-k6
zIH(A>{BTu(g=1r5cIiNb0aEvP2m#VNJ(He+=a5SOC`5k304XgNk>Rtmvvz`^#NOVX
zCK(zU(tq#qRvHtAN@d`{;NYPC9)^3t4goa_IZ0(&jT&@0Kut3)@irk+^BoDBm;81W
z;0cTHz_|b~L~h0binw)6a}M9}BDW0?0=HT&w!R6G2{x^w`+!(0nQww;F@pF?%$?vJ
z^C(*qv6%P+4kS<cvADRX$w(l=fk*rM`!*>ab$@qv>-TGGYiea>MI9U*=w2bMczAeN
ze}gL7+1atWXpM^XUslJ*f2_H`^Bha8Bs8z7sj1xI;b9JJZEflM($Z3{t*tGW$z=3c
zOG``6xsGwLzP@h1OT4+A%l^2VOTLSqnlG1YBSK0%AtYqH+a}{YXrP*G-HhG3S*zya
zSAXsC{(-OR{fFcHAuy56X0@b&KtLN1i^X*3+uYpLB#n)Y`c8<Xht$>8sfmdR9Uk!F
zS;z{(1x?C5e5+Qyn)_bbW<-0%5bB@CWQFHMZ4-NPL)tTQK+l~^T7mTEpSI`0`WpSd
z<lWHiOh-4A0}D+`4kUs{59;-u<TLT)@qZQNtF0={0Jq%?qwrqJQ`)nT<1Ii1o|~F3
z{>v?k{JvEcB^e<7-q{-{Pe^Iaq7nr6`U3^O$2jF#lmXN_2`0OvoPOD$AmspRw%do6
zx2D8<-+rl-6@N1nj7x|-52Z*fo0J(65|4y*;>)KSMIXhkUH|BPB7%&p7X^4WH#R3H
zp1;gk9#*STP*8#MK;{2`spY~d2K1E42>ti`uK)u8e{M?PT_jMQ00000NkvXXu0mjf
Dd}$0c

diff --git a/packages/react-devtools-extensions/icons/32-production.png b/packages/react-devtools-extensions/icons/32-production.png
index 9192719e5b50fcf214b3b5ea8095ff344f60e45a..d730dc4f594704ba6c546a2e7e4c654646bcf2c1 100644
GIT binary patch
delta 459
zcmV;+0W|)s2-*XX8Gi!+002a!ipBr{069=hR7D^lARr(hARr(lD=jBAIx9d&E=p7~
zRbe$>ZaHduJ#~pdf0jgwqeqmmOP{??smfBc*HymcS;_II8EFy#0007XQchD4zh{qe
zbN~PWPDw;TR5;6pQ(2NjAqY%x-%z;!VFxgidSx~~EDBqp8-KXn?(oI#x9|6gfFJe*
z_%@2)Zfw}x3Gl>|S>qm=CNFmY8V7KVXNW`vAagzdi1s<jN0w;S6R-n?IbI%I0Zq?9
zlgP4Tf0x27@`3Fwohd4%Iu@HvtY?v~=p8Xuu_=zAs(%869uMwrZStNb;2K*M1^CI`
z!&sFQq|u{LDSzC+cb?7wlLDwTQeDy#0xUgL6;wdrT`-9PLjhI5_>lJ_U|Fae0FdHN
zF(E1!?}SA%S(^deqsSuMLlt(FGj&MF{hwylUJuc6(_{=ti&wq~mA8ls#kM=rAvMRM
z8X~HmIdVCAF^t&cka(Ea&Td-R5z%z-=VA9>$maJ0GeoAINq#U@V4VY_B4~U3Ze4j9
zT4w`M_w496yey6@wLEsg<)?cAd|bVs%lm8n{{RTf7_2~EY&HM@002ovPDHLkV1imQ
B#0UTY

delta 1058
zcmV+-1l{}E1FQ&;8Gi-<0047(dh`GQ02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00YiRL_t(|+QgSlNK{c2$M1|ohJ!K&V;^HRL}3}&2MU1;HE3arRL~X~
z1WAxV;3A3^_Pr@u1VyvSMUa~e!WK=7KwY&^2m%G6!st^63x5?Q)3W!wc*ghMyqTvj
zYz|!BaNl|7{_i>e^S^g|(P%WJlzM86YW07u*BA{sp-?EEg~hR`F%I~%w76Jxz|A8!
zyh&|5d|W>#hx*m`{vI`(_~PhWP+G3mRUA~oXo;F08CIX3#MJ!sRL1x|g98hh7B9Q`
zSOtRlIv|0uuYb=wEy3~Ie&)Icz#IVa<@x5q(TpH6W`LcuI6(lw@8ZT*W4>80_Ab`0
za`N(3$+<h)f8^mU4Gs%e9nqi)%WG7k@0qs@?7rNgpMzIhQc^98N_K{Cx22S3|Gl_g
z{9{)vEdak82PTIG9Oozji_6ZPc)=WCGnp#@QfxQsOMfZYIrSwQ0>%l%KLHTpB}o%p
zsyS&Ny4GTuGh5!)5?25LxAbqQZ8ln~#sIQY2LuqTml~USLC5@_nbP0=9Q&++@mz5m
z@*ymi{ud+Nykh}7H()#9#7B%W{TS#`W4+yu*{}dGw;6`$uzQ#c(bys8)Z3yN())A}
za{wTQlYf3_ju~gc6$!BGVl25J^&NfLrBk23qfGhN<mz|yz69NJtW6c}t<(W$J`Agc
zxmi_IU8l>i{!o*SgFnweut3j+_Ef6zS1;6`xnI@{fF2N#iUq_(P=pg`0*l*8Ct?LJ
zq--*0*AKvow)lnVjBoKy%Lf?fC1oNg;i|fnT7Pl|n0)|ikHsAE%-Y~ztz*tiUOT~4
zbO5B%a(3mS1oBbz#Q8-sJ+k<aAy|%|_y9o2w{*5N>v(crSV%~#kj6;;Nwu~pqCr8X
z%}uSEfUp;W!E$^Va}(nl`1=Pp^n9egMTHDfzP;aWY@|Z@e7<BSZ9CPTBqsi8+mPNT
z6MyC-m>{qjq9V<&&(=D&Ap`^vElVa4E;hkC0KyOZ$(UA%5EgdtR7--{MFl@6U%)5&
zy7hC}Qq1l^N-2sPPwSQ;6ZEnu9+{w>MDxuGiTnZ(F_K%9r?Y^-5>%v@G*SvckZN{K
zZ?g#EWj0Ef8;*ECjM$aabqcZCcQ>v|FMo9;7lI>pqyF~Obj8OpL7Ym&?g7Z4E!{4k
zo&XS(GNh_rjb=IT8T@v-`3U<x1AsuJ5b-eIeyO>fdJG{P@1zqD9ez&?_ItmUlU_Nb
z%vs^guwOK3S<w$O2?6LCfcbJl3(ikZS`Mdl`a%1;`7Rs4YMX!YUuw3j7XS@e0vn<K
cp8pkK0Q6TxNg>nX(f|Me07*qoM6N<$f{z;U&j0`b

diff --git a/packages/react-devtools-extensions/icons/32-restricted.png b/packages/react-devtools-extensions/icons/32-restricted.png
index 7c750453238885d1cba45da238abc82ae0fcfa06..3c984726dadc252e9ea853bf4985c06c364bd583 100644
GIT binary patch
delta 475
zcmV<10VMv!2<iin8Gi!+002a!ipBr{069=hR7C&)000000001GWo4C>m9eq0!^6YS
z(9qi2+Tr2h=jZ3_?CkLH@bvWb_xJbt`T6_%`~Cg>|Ns9a8$rte000tnQchC>6dEWu
zMN?vMevO-{x5m`s@r1iEjsO4wPDw;TR5;6pQ(2NjAqY%x-+xfJ|6vC(lX_(~J}e4b
zp&Pi}?(oI#x9|6gfFJe*_%@2)Zfw}x3Gl>|S>qm=CNFmY8V7KVXNW`vAagzdi1s<j
zN0w;S6R-n?IbI%I0Zq?9lgP4Tf0x27@`3Fwohd4%Iu@HvtY?v~=p8Xuu_=zAs(%86
z9uMwrZStNb;C~uh6$SXo-NRUw6Qt3jP$}HNcb?7wlLDwTQeDy#0xUgL6;wdrT`-9P
zLjhI5_>lJ_U|Fae0FdHNF(E1!?}SA%S(^deqsSuMLlt(FGj&MF{hwylUJuc6(_{=t
zi&wq~mA8ls#kM=rAvMRM8X~HmIdVCAF^t&cka(Ea&Qxw%*b&im@8@CnU&!Y712d+c
zNq#U@V4VY_B4~U3Ze4j9T4w`M_w496yey6@wLEsg<)?cAd|bVs%lm8n{{RTf7_2~E
RY&HM@002ovPDHLkV1jBR-%<bo

delta 1082
zcmV-A1jYO61H=fB8Gi-<0047(dh`GQ02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00ZVpL_t(|+Qe7AOIuMCk1sJQ5|vO?LaK;MXb`g%MaQ-xZWRZ|Ru^@s
zisB#!|9~I}f{^Iasa6C*sO?lxn&My`+74m{lYk%9U`@m%YJcqcS&!UY-+R#r=D^K+
zx%b@jeSY`8JcGfY(6G`l8y=UEG$MKQ^CSn#Z;ViKs2pTgGI2~zO+7t0I2ez`Vl&&@
z+g<pt#k;by(g5Dm)6;o8ySuwf?qY>aYml<%7Z(?QFNqR~#LvrXBH>;V?hyG%={Kx_
zpLx&D&VnMJ#(&UWgdzx9TwHvC{}9G=P=a~#`ZbhdP=v;K@8;&_JMiI|wE^%7L!K9v
zvN4E)%!df<?Cf~-bY!f7qoX6gJlEXZ><@>-9z{{Ea=f;-=I-t74at1x=jY+Fva$v}
z`56t!&(FVANECXf-EJRDCX>HXsnl^}W8<t=!BKQV4}UVCxVYFU{)eL0*47!k`+UB)
zOG``bh{WXN<m{~;Gn<{1!myrvQ>O5jmzQ^KY;3etR8%-E7R$4Of&!<>WV&j_o}QlX
z%v)Gk*g)QXK}4`G8jXfv7@m4M^0*RZFGoj5J8U*v7b^onIE2RIalc#}R;%?DJZ7F7
zsG~GRB7c$33kwT#YITy<1!9|l2z)-_Ny<K84OOkx+l(3L2<{;8vJ5r+NNYm~U;u$a
zZYv1jcETE^;|=EV#2R?fmY4$$fQO$@$g;u5Eh`!E{{;*1fI&wF6cA$qlwV53`(Ug*
zC*y~NEe0DHu|W$o7;xBAF|16ymkm|}FcDqv41Yw~5*4pqW4=VS2w^ciWiQoIzy$^#
z(R=Jeo{?LQmRK)5<l0E90c_SQLf*`W3(|(LV=yllDtKTB<Z#XKX~}b{hY^f`5cvp(
z5!{AY(`rM`J&fasa#7-`b~0)L(a_LPOHED9fCxmwArrzuBj;R=_vGYcd24Iyqs!%5
zzJD_kGEp=JD=RApR##WstE#G;gmk4M;sNCt^F@RN{O;}Tg_@e0=7YhYySlpCm(`63
zp;v1sP7OlMm;hciKB?gDcONhsjitz=Jm1&X*NzCZwYAOH)zwWP68%InA9&=`^xnrY
z<@#8j^Lo9<fk42Guwzh%_%N3ZUg#PC?|+Mmif(y;<GHrBb{rmJ;2k$&H86V6h2-$?
z(2oM6_UYg&Iu+SOeSQ55I$?Tx`XvV5QE*t}Ydfy+=!*UQeSg;1a_)T@_0-M`5kF+)
z)Eh?nv1nPgzP_H=-QArdkN;3N{Gf})^6>C*e`jasSDDx2@%YJz_YQ|6Kt}%t?=#5A
zh#NBQeIt5IQm(&Jb45v{Ab$OUYRtvw`9A>$0RIdr8Dx%^!2kdN07*qoM6N<$f+9c?
A0ssI2

diff --git a/packages/react-devtools-extensions/icons/32-unminified.png b/packages/react-devtools-extensions/icons/32-unminified.png
index c4a6bda3e6a6d0df9388f3beff37e254a91df25c..2376a50e3e9ad3eecc30e947bbc95d7478043b97 100644
GIT binary patch
delta 547
zcmV+;0^I$k3b6!`8Gi!+002a!ipBr{0BKN6R7KfJIN3@#BOf3xA|g5@BSj}AQ7R@}
zEGTC$DRVL_el;wKH!hVrFQ7d!tUofhLNvlfHO@yj*-ALuRYcxlQQ&M{<9BN1gLdbR
zgX)=&?4_LUu&D97wDZQn_R`Jx-P-!-=Kb{Z|NsB@Fhi#R0Dk}ibW%=J5Wi=SadZFx
z0d+}4K~y-)g_G-&gCGordvUv#swkipP>{U;Lv9kfotAOh{7{E{l9LlS9FFQk91oxK
zM5r(E1dLy;$)A%CUYCGL5CLf21V|A!T>u_Nr9H%PO35lU!(0F%@a73O;zFA%fxKV=
zrk5XH0Z-2{#ebBzdRX>K=q;HM_}^5PaOv*W4LD+OrATclmmoNdh#yEf^8~OxSYgpy
zZr-G*!nS5t2rv;Aqt?yAU3Ef8Y{i0CW`U>~h-p-04XTqT45^}9Ms_6-FhUlb&;da}
zt<<f1*t-jezCYb~X<<NxH02WUQQ|^n*jCSgeu%W#yMIKH4MJ1`8~bn5(X3aE1L}pi
z&@NT;)7bgNsF{rNZA~Jwl8Y>?hRIHCMX6@M*Lf&rvF7p0AIg!6ww&gg-yP<z3U!=+
zyLTYZe_)9{V)dnYFA-U+INwO1s;lx;lL=;_IxJw2C7}60km>E|D%zckqph=i97MH$
lv!2n*cO2mB<^6X3{{RSZOSx|jqC)@x002ovPDHLkV1gPL02}}S

delta 1310
zcmV+(1>yR!1f~j*8Gi-<0047(dh`GQ02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00hWML_t(|+Qe5~Xj5kxesfO#nw&IEW7||MTPrQXrZBxRH|;Lmjb5z1
z*aXW4V^YCQ*mkpCD9G$Z9cT-igNbf1=wLT%H<(^51L;k7vwsTf)s%M3-?Uw9o8+WT
zViLdSO}}_fdQ4&*^M%7nzI^BXdEV!Jz7yMDhYmCm(WJOur~lWki)%o6LBVM==A`n1
zf|ru8SKHxeYp13+kC3Caoz~}ODf#;}Wfvb<?)B{1N8WHRxx2b)W8oIXCN5K6PgeAA
z6C5a13jWd;-+z(f)hI0-x`boc%1=L-oMT_;<5Sci62KY~#9rM0Ir(nIBq}0+$`Kq+
zkN`dh2ai!etfSiK*jZA&KH7fz9PeMgG|tJv8V?@kq_l7!#UsDemjIvy><A7+B?zL=
zOmonV(XUGA+#mVW)EWd09(|wDsboqu4y5L8Sgg%*3x5z?R&K?MM@tU`Qm;K<0y2ov
z&|kCyl>-%^VYLtTG{V-LfP0g8#)P(?D)t<(-x)r^Ydbc1U{17$vP;p5{_WM^2jMg^
zT5#s-?B?oaUpv3~v9uQxfQiZL34RWhBe7}-SdJkc^a~dA{2NFFxbYi^S<VgZKrbgJ
z_eevVpnn}8rByPf1dL+_OA5B5dOW-&h=vMbR<kWNL(YE3=tZ&%@j?RdVWl51^<?+X
zGt$A%&&Epu?~e@A+O<iB-o5)(Qd}<nZE<{rozCeQima{ETq;AFs*pdOqCzIa^N#@j
zLjx55?J6yfjqqI+#WjgF@BT0)rhlbEHe*Hr*?%JmkV?+IQBYuj{?70Rw6O7rKAiv8
zgus`(wo#Yc&VB&7qcy}88+}2%Ffr+co9w4VLi7$-?E5RG2c)314t>P!iA`MLwVA}m
zmR?T9boyk6pW&a1rD&H(W{=moML*VrKiT4%#;{gvbE>qM&GB_98mD=Il9j1tdZ9?B
z0)Jkq@kT=nB&%Bl60oq(y~Q!s#_p}rdpDQ)``)tZVek)s^1LvSu*mp6YJTe-=0f`K
zqRIu29wVF6Ne@MP@GykMb9<h`jcy7!6b^Je)F^n7W$2~#`Q40)G>BKA|44D7E`Gi>
z0kE>j&Ma#H5<x<qz54_@Hv~T}ldty;p?~jDMk`Y&Fd1RjR#K+mFiZ)i<HEf-ITaiA
zw6_WW5$0J<LWJPurx~F8`TRMWiEnUq6H8C#`RXennpjSn)?_P&1VWgQnxz=f11bbZ
z5_iSOU`phKum-H=OwUAC*QvkROOcgzCL+u$5IEft5O-UBhY_^DD7&*<J?>$ji+{fD
zY1y26M``cZ(FETITc5C8&*kaQRHpvZP}MZbC9Pkl0O|3N&lC(TIM~!+nt%&pGS1#!
zWz_0Aj&ZtKnVu_fz;ZDH{DUo;VLV-==kukuJW~Rw9%q3SNv9s_EH)sR(VzuTKp@fP
zP+1*EUvB2_mMF_Hv}9-?Sekth5PzhEEMpuy|Cpw?w|Qx|$H5aZlSuP3sI;rWL5Bk#
z+ApdP*p>QUNTAzzC%|DO4<t;8QOP9RVf{gGiSf91sa5}WR89cFaJWF26wOEZWP+0_
ze;0rX0`4ILDQmTge@tpMzz$MAO>C--;q~V}2}Skw1V?NnFz{a_QSaaL#}@(&0FmNf
U5G=%XfdBvi07*qoM6N<$f-B2;p8x;=

diff --git a/packages/react-devtools-extensions/icons/48-deadcode.png b/packages/react-devtools-extensions/icons/48-deadcode.png
index f3224021a560c7d543178c3159c05cee9eebac9f..01eeb6e85c8c9f27ee61acb14827d07423eca4a1 100644
GIT binary patch
delta 814
zcmV+}1JV4^54r}B8Gi!+003az3AF$K0B=xCR7C&)0NF}7*-ALsN;o4QATA;zIwT`S
zCnZrTCR{8iXD=ypGAn*HEQvQRl{zn=Ju$35GPgoB!bLUCM>p9@INMc3-eFPTY+d7b
zYUP7==Z=HwnUCzHobIrw@w>G1#=-W|&G_Bg`sn8U^z;A!|9?DsNpk=I00eYWPE!CN
zukVudf3*Mr0(MD6K~zY`t(NPWqaX~1ZAY!OW7jI6ctptkU*m?8*lz8t&u)HHrMwAA
zKF}ySoylL@`4mN`FLJ=XPSKehvU5ZZ+P?vGkg$wR80cmNa@YqJFg7#$$fbQA_kbQ?
zX!!)7Ivs8XkbiyC;B&JBEMTHDoH-GO;p}3>Q;019K-W-<0_7ZY5buEo7Ju6+L>x^R
z$oD`SJTVPyBL4)?1*Fcy18O%1cQfPqJAnR=$U8|70NnhxpOeP=ankT%#6}1O0x#ph
z8#2PM15Dsr`)tau?HORBosGU#*BZliNMQ!$$X)<88Gl!LO%NPn@)UDX_y<gE3-mZN
zahxz<BB23Pp(+Fp8iDlzn4Cg8kgcgroo88I8;#%qTLtC-EMR9n8gb+NBt}b+kTA<-
z6&SYw4Q0@opuapemSfXUfL`3A(Nv^62|<4*Zf1cDZ>zM}{J8>jm6Pe}2Ds}uUgi!U
zYHg)nQh&Qy(j~vf_prZ&1A1S2Oj_zupLD4&l`HXVca$%yXxFlGUslUK?D>HL;GuE&
z2%@6`BcY&NM)$;LQkS})%~l$8R7NyCqiR6lmSuK2+C5L=vg=;OM|*cF^`v;%I#soY
zuJv1aV`mU*G1bJ(EJ<OeU#brqh%}TG7wb1AB!Bf9c?&4;s;|BcQIOJR@zWvTn~ko`
zHLrGn&2ds0*Ee^KgQA{*uytxDrw7rCOH-q(4@-I^u27kgNkyvqebP?)^gGUKoA<A+
zUSEM(?=~!~7)VK+X49J7>OBC3H}eiRuVNwZ?@#Zz$%<pL>MO9E<>T{Pv=c(~zI#_p
s;3v>)_m<ZG<vo4))8X*P$<fcB-(A1ES1Zxc8~^|S07*qoM6N<$g4Fzfj{pDw

delta 1998
zcmV;<2Qm1%2GI|Y8Gi-<00374`G)`i02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00(nPL_t(|+SFQ0Y*b|wKE2b<OlPLgp$`xQs|6OcNnt}{f(u~-3(CSr
zXku(YNDvdoO<7Piz=CcpiD)8fAQFs56U)M`aMMk@ktS3VOMj&z5BstY`kHp85C8AX
zoa^n(y?5reOyZp6W~TGsd*?f^?|lEA=8&?!gL}8Bmo{}YP<B|mIzl@-x*z1k!S|@6
zn6k?z)lsL#BcE;HDUP{K%c8O|vj&Z_+;W{>p!ow-((on~zIu@IDmK!>KtIj(-l3`6
zKk@r?tZ@G!3V-a~N50zKe81@MAWi+;L1Q<+bnF0{c*V&DTR-`lJXO`EYcpM)H2TG5
z24rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=WEfC;na#ZVMQ5{hrkP&0n
zDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEq@6zc%(ZzGDwlff6+{LCzn88
z`9^jSKoMnpj@QlSFSBFf_}>?sX}<3_TACQ=1Lt8K=dMH}H1|t)W-=hrpJ@L!X$?^Y
zFhsHJ#2JpLr)oQcLI##+XXw${Q<l+1`Q+E^Ca*<#TK1$<@BjcXRt6xC&%Vp&;2MC(
zH3LmYY=28b)^f`?X2t=RzkpwtXQxx1i_%IoJEtXsFslY%w*yXScGJ05ogO87m7#NK
zU7yO)H9H`TfjYG_unhnM2zp|u?V`^8=npIN#qYZ?a4+*2Ky=M4*mzv0%AvLkT-TsQ
zFb@pP?Xw5~=s4q(IIOaO41n@5v=C|3EZBx8bbma;h(6vU8~8jN&mL@3ODjE9PT?Fx
z8)XJZC9`wAJ(+U=UzT4(JWWyOb{R63n(@8SQM1}#o|$&!KuRfr2p6j_#I!YI2t-#h
z01%kMixyG>8ABOKFcwD!O?wJ!7;c!>R<b0e0{|O5dW@UT7$vEHG^msj^brg?26Mp9
zkbgP!3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8&adV1h@y^DftTi%
zKmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6Rc{pWmPfY8mi5XF#
z1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXgnw%N9&&3rtaVl*5%TZZOZhu@sS@nb?=h?>
z7tWdKE1WO-%F+ScNIV69|8xDbq``tz!a-M{K+g~y9sl8m4*u=_QR)jvX*jyX$H4p|
zbxefmP>GM7fRMwrxQC`DJc6}2GDPFw-$-ig>CW5y3I~w&g+KfCV6I{zBRh;H$baF)
zn_|t_8`uMgeLgg$oLEk}4xeG|{pX7GXfG*QA{xkJBjQk6xhncB6cqzX8L#RAZ=6Zw
z0y{IV!x>|Pji`uQnQ;x1{bAql)O2r@+Q;Tn?g1pAiA<<DnY4+*ZY|==XuYa8VkH($
zd9Ky>XvT<0y<^X7zo$L8YDgL7L4SFk%knx|JAHqQK7R6)x~3NR?^?e*r31mE$Mv~m
znE}~UgOjaj3)zwSm(mF~9@E!PRu+=qm7G|7hBZVT5eGYUP0#aMjg14MZbcxDB<z{B
z#M+ix!^GTj>C+_f6{vqj2R|HFn#h8PIKL~0u2+}Q{^ER&EDpTKXRz~+CVx#De8uwV
zMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L>^yiLR9Ro>
zW#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJni^CKXP1=t
zLX?m_?3JaDt`1G>&3RwV0e>^#MgzTK;B`$e@VTwqO6ldpM^-V=n#3Hy!-?1?-JGjM
z1Az`vGF9GOI{RRp0U7Pu_A&}+8V@=<hw2Nw>=4Rv-EtZc<>;ydeSzjiDaoc?bP$^J
zsv1<%u%>e$vP2br7d4gz^mC0?<;|m(=ZmSrhRN2oACN~Ln7sdqx_@eR2uyN9u?*P7
ziq}D%$U;NVN4Lgic?K8_e<MQ~+fs@GH8O$mF$;iQc`?W!8_SdX1^`iJQuAhVL#Q<)
z4oEYn+GL;vP$p&r>gMPSGfhpLViWCdd^%@rQ}5)lN5~?|aKdUGB?x^a8tIukkShAd
z;nb#T-ptxn{X=4NrhgJj4WHpa7P`|YC&#}Jc+z-w32@DdMiFgcq(s^T3tduN-%#r3
zNXz=A7fN*p(rIXIE#+h91o{Mx2tcTDNC-5yS*>Gef$L9J#?&pQu}~;p)0qQ~9<M_#
zxVLQON9>RhiJ95de1URHH_%J>e`W9}56B9<mz|l>`sSi^pnup$JAHXHySze86$O00
z6LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa;~tRT
z!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(l&LVy
zv#>R}k4W1oL`T!%=8l1`^||R;n&V$7|8E8wZO>x-?QkGOv45P%HUs96hJRU6Z|brv
g6Tn&r?EeZd06w1z10F&2!~g&Q07*qoM6N<$f{1~>x&QzG

diff --git a/packages/react-devtools-extensions/icons/48-development.png b/packages/react-devtools-extensions/icons/48-development.png
index f3224021a560c7d543178c3159c05cee9eebac9f..01eeb6e85c8c9f27ee61acb14827d07423eca4a1 100644
GIT binary patch
delta 814
zcmV+}1JV4^54r}B8Gi!+003az3AF$K0B=xCR7C&)0NF}7*-ALsN;o4QATA;zIwT`S
zCnZrTCR{8iXD=ypGAn*HEQvQRl{zn=Ju$35GPgoB!bLUCM>p9@INMc3-eFPTY+d7b
zYUP7==Z=HwnUCzHobIrw@w>G1#=-W|&G_Bg`sn8U^z;A!|9?DsNpk=I00eYWPE!CN
zukVudf3*Mr0(MD6K~zY`t(NPWqaX~1ZAY!OW7jI6ctptkU*m?8*lz8t&u)HHrMwAA
zKF}ySoylL@`4mN`FLJ=XPSKehvU5ZZ+P?vGkg$wR80cmNa@YqJFg7#$$fbQA_kbQ?
zX!!)7Ivs8XkbiyC;B&JBEMTHDoH-GO;p}3>Q;019K-W-<0_7ZY5buEo7Ju6+L>x^R
z$oD`SJTVPyBL4)?1*Fcy18O%1cQfPqJAnR=$U8|70NnhxpOeP=ankT%#6}1O0x#ph
z8#2PM15Dsr`)tau?HORBosGU#*BZliNMQ!$$X)<88Gl!LO%NPn@)UDX_y<gE3-mZN
zahxz<BB23Pp(+Fp8iDlzn4Cg8kgcgroo88I8;#%qTLtC-EMR9n8gb+NBt}b+kTA<-
z6&SYw4Q0@opuapemSfXUfL`3A(Nv^62|<4*Zf1cDZ>zM}{J8>jm6Pe}2Ds}uUgi!U
zYHg)nQh&Qy(j~vf_prZ&1A1S2Oj_zupLD4&l`HXVca$%yXxFlGUslUK?D>HL;GuE&
z2%@6`BcY&NM)$;LQkS})%~l$8R7NyCqiR6lmSuK2+C5L=vg=;OM|*cF^`v;%I#soY
zuJv1aV`mU*G1bJ(EJ<OeU#brqh%}TG7wb1AB!Bf9c?&4;s;|BcQIOJR@zWvTn~ko`
zHLrGn&2ds0*Ee^KgQA{*uytxDrw7rCOH-q(4@-I^u27kgNkyvqebP?)^gGUKoA<A+
zUSEM(?=~!~7)VK+X49J7>OBC3H}eiRuVNwZ?@#Zz$%<pL>MO9E<>T{Pv=c(~zI#_p
s;3v>)_m<ZG<vo4))8X*P$<fcB-(A1ES1Zxc8~^|S07*qoM6N<$g4Fzfj{pDw

delta 1998
zcmV;<2Qm1%2GI|Y8Gi-<00374`G)`i02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00(nPL_t(|+SFQ0Y*b|wKE2b<OlPLgp$`xQs|6OcNnt}{f(u~-3(CSr
zXku(YNDvdoO<7Piz=CcpiD)8fAQFs56U)M`aMMk@ktS3VOMj&z5BstY`kHp85C8AX
zoa^n(y?5reOyZp6W~TGsd*?f^?|lEA=8&?!gL}8Bmo{}YP<B|mIzl@-x*z1k!S|@6
zn6k?z)lsL#BcE;HDUP{K%c8O|vj&Z_+;W{>p!ow-((on~zIu@IDmK!>KtIj(-l3`6
zKk@r?tZ@G!3V-a~N50zKe81@MAWi+;L1Q<+bnF0{c*V&DTR-`lJXO`EYcpM)H2TG5
z24rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=WEfC;na#ZVMQ5{hrkP&0n
zDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEq@6zc%(ZzGDwlff6+{LCzn88
z`9^jSKoMnpj@QlSFSBFf_}>?sX}<3_TACQ=1Lt8K=dMH}H1|t)W-=hrpJ@L!X$?^Y
zFhsHJ#2JpLr)oQcLI##+XXw${Q<l+1`Q+E^Ca*<#TK1$<@BjcXRt6xC&%Vp&;2MC(
zH3LmYY=28b)^f`?X2t=RzkpwtXQxx1i_%IoJEtXsFslY%w*yXScGJ05ogO87m7#NK
zU7yO)H9H`TfjYG_unhnM2zp|u?V`^8=npIN#qYZ?a4+*2Ky=M4*mzv0%AvLkT-TsQ
zFb@pP?Xw5~=s4q(IIOaO41n@5v=C|3EZBx8bbma;h(6vU8~8jN&mL@3ODjE9PT?Fx
z8)XJZC9`wAJ(+U=UzT4(JWWyOb{R63n(@8SQM1}#o|$&!KuRfr2p6j_#I!YI2t-#h
z01%kMixyG>8ABOKFcwD!O?wJ!7;c!>R<b0e0{|O5dW@UT7$vEHG^msj^brg?26Mp9
zkbgP!3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8&adV1h@y^DftTi%
zKmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6Rc{pWmPfY8mi5XF#
z1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXgnw%N9&&3rtaVl*5%TZZOZhu@sS@nb?=h?>
z7tWdKE1WO-%F+ScNIV69|8xDbq``tz!a-M{K+g~y9sl8m4*u=_QR)jvX*jyX$H4p|
zbxefmP>GM7fRMwrxQC`DJc6}2GDPFw-$-ig>CW5y3I~w&g+KfCV6I{zBRh;H$baF)
zn_|t_8`uMgeLgg$oLEk}4xeG|{pX7GXfG*QA{xkJBjQk6xhncB6cqzX8L#RAZ=6Zw
z0y{IV!x>|Pji`uQnQ;x1{bAql)O2r@+Q;Tn?g1pAiA<<DnY4+*ZY|==XuYa8VkH($
zd9Ky>XvT<0y<^X7zo$L8YDgL7L4SFk%knx|JAHqQK7R6)x~3NR?^?e*r31mE$Mv~m
znE}~UgOjaj3)zwSm(mF~9@E!PRu+=qm7G|7hBZVT5eGYUP0#aMjg14MZbcxDB<z{B
z#M+ix!^GTj>C+_f6{vqj2R|HFn#h8PIKL~0u2+}Q{^ER&EDpTKXRz~+CVx#De8uwV
zMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L>^yiLR9Ro>
zW#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJni^CKXP1=t
zLX?m_?3JaDt`1G>&3RwV0e>^#MgzTK;B`$e@VTwqO6ldpM^-V=n#3Hy!-?1?-JGjM
z1Az`vGF9GOI{RRp0U7Pu_A&}+8V@=<hw2Nw>=4Rv-EtZc<>;ydeSzjiDaoc?bP$^J
zsv1<%u%>e$vP2br7d4gz^mC0?<;|m(=ZmSrhRN2oACN~Ln7sdqx_@eR2uyN9u?*P7
ziq}D%$U;NVN4Lgic?K8_e<MQ~+fs@GH8O$mF$;iQc`?W!8_SdX1^`iJQuAhVL#Q<)
z4oEYn+GL;vP$p&r>gMPSGfhpLViWCdd^%@rQ}5)lN5~?|aKdUGB?x^a8tIukkShAd
z;nb#T-ptxn{X=4NrhgJj4WHpa7P`|YC&#}Jc+z-w32@DdMiFgcq(s^T3tduN-%#r3
zNXz=A7fN*p(rIXIE#+h91o{Mx2tcTDNC-5yS*>Gef$L9J#?&pQu}~;p)0qQ~9<M_#
zxVLQON9>RhiJ95de1URHH_%J>e`W9}56B9<mz|l>`sSi^pnup$JAHXHySze86$O00
z6LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa;~tRT
z!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(l&LVy
zv#>R}k4W1oL`T!%=8l1`^||R;n&V$7|8E8wZO>x-?QkGOv45P%HUs96hJRU6Z|brv
g6Tn&r?EeZd06w1z10F&2!~g&Q07*qoM6N<$f{1~>x&QzG

diff --git a/packages/react-devtools-extensions/icons/48-disabled.png b/packages/react-devtools-extensions/icons/48-disabled.png
index 372b6e00e88a85c08ccfa020e8db75b31b429a5b..43cc19e3643dd4f08dbdba1cd9eb7215800bf8b6 100644
GIT binary patch
delta 717
zcmV;;0y6!a4B7>d8Gi!+003az3AF$K06$PnR7C&)0000000000000000A*!mm6esT
zv9ZI$!_d&s+S=OT;o;}!=j`n4@bK{T^z`@l_xbtx`}_O-{r&&{|0_t7*#H0l6m(Kf
zQvd@J7#b)yMN?vMevO-{x5m`s@kmNv@Bjb;Hc3Q5R7l6AmVeuJ;~)%0lZ-G|V;SxL
z|JHc`U(&{Dv&u`rWJ`dK1h?D$A-`^q`|WoBCm*zb_uE50YLA<I*!~8%(pYDId`OGY
z$~CY8z%un=Y<)am0U1h&6)cH}TcBm{EBFgwrHF`33sjj_`cU-A#Tfv%yIKt!h9mkK
z@T^-m7_5VqiGTJQ2#2M~IB0>N0JqYh?toqHVRRPEC&=GCUu?QS6e$qiZ(5WnK9(6w
z4F#J^^fFT}fXWE%bF*!2&%iYIf2(0Bgb+f=&=i0+PhWtk0tQh$hrtDNQZNJRbOy3P
zjj~WgPXTboEJ~4B!SVsrq0mGN5Jdcf)k!2nfN2-l0DlUkZV_M+@djW{q+y%K46y_5
zIED&LBFml!fz6o6OzS{6wBozpah@t7in(KQ2iz_vR7C6mTHivC_yENAP*x!HA0Ue)
z*e6$X0C_ul2Mz7&hSiBP){zZPdq!=?s$oCYDB@<->_iGS8Bs)%VetrDGSK9dES2VV
zxj>Oh^?$R$>d(?}bKhv5oE<r@Gzon}EqxWA%j+gi=2A*2rS5vI;ibH1+WKAGy1th8
zNFec{7^tekn!+TKkL>;e*oaYtB2u@)^e(4Ir$9=(h}>0~IhB)&ooetkaHLLyMSceM
zi3B6CZvortdV#8YZpV}7XJF~e@CtJmn15gH14b+{E!%3M!IHBc8S(AP8d|7BeQu1?
z^(~rIHJ|KFdC`-O{(kNL3i$Zx@bTm1)925B0V_v4oTdKj00000NkvXXu0mjfkPKUp

delta 1558
zcmV+x2I=|Q1)L0!8Gi-<00374`G)`i02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00q8DL_t(|+T2>nPn$;+H^yv2U<#Bajo|_)5eK+MMB-Q_2P6)u;NBPs
ziA!m(s5E~-%83ih9{}nF2~nq4AmqprD-wtUkcy>HFpDsY?SH(V>leLDX1>M7Y2A@V
ze9SlVzPG>M8_4tgGxBNrX%>5OV?=32XvXqV%zsVO>&dMVr}-C{|B7aTC-(-F@AKx6
z+vrBI*OTMJwE%s6edW8myFcCB+`LI75`SJ@UHx%*c=%#wW~S9CjrH~Qp7Znb$yhA*
z4m3auG}9I0o`0K348Khn1~K*f=;-Jp)7j<a<?o5vZPR&D#JF32TnVtXwe>T9j5PLg
zet!NLm^wK*nc{WQYJ@cWgFHu8djR2h4}<_Mvf8(p@;rXengFbQFt5IY<|UJ0ir1yp
zbZ0RyFE3xGX$9w-nF(mriIu=OEW(zt(k?8CeGtSAPk)Ysn1l5C`Z_#5K7MN2*Vx!N
zv9Pf4T|6E?Ei5c-^?JSKIMd(X|ERmWJ8U|)xVV^n=kxjQXC(_&R#uiL%O5djw|8}Q
z^}V`gB{assz`#yQfIwE$sFO4s3<f8m`P<vuBvY^i#l(mseBeMqX$jET*}0S~eZ|Ec
zR{KV1fPY~yGB-E(d}Cu{5bJ)wzlY)@XgWt3t%F@O>lT2Pb?YcbrKP1$@w~RSHVB_@
zX=$0>+uQpUYYhzzFPKqvl$DkF(*;ELoNlHJ@f$3#va<5Ly}dnzz^0%L)YjIv78Dee
zS5;L7*$tpc4&rDuy2O^lyW`{IX{rUM`}_N0vVY1B1VuH+c?eryU;i>I0>F>q3h-^W
z!REyGA?)_{_AoNpoe4mNDA3#68zjb`=$M9fS<_%*b8~Z;G`pjtMK06|H^MWNK=ZvW
zrtmHjiM*PcnwsG3<Qfa1g31!l#fYC#c(4z}iPuoX><SN8YtZ6?i0aI1@*7;yt?-q{
zRDVq+ArN7PnE{3b3;|Geom5UR&9oUdFb$@u!&er{`E)@Z)S*iNH3nn=bG#SNya!g1
znpU+a;fAE4e#?Zfi~_JJF;qk;HK>Epl6ln)RF}bISj~H_EGPwLPxwp#X<9p9R%1hI
zPHM~w?@P^FDU2u1vgNe`NP>2LECW|HYk$IGs7RB2U$u_iH*L|VsnV*z4x^~3D3C6e
zVdRMvOoh?15~E<+rcrhwQ`2E`AsN8xJ2|9lax$=Mbkt@_(=X_Q#S{lJh&d1?QN)8T
zh`|86iHtX9Oyk=hzb9Qy(-fJti-S_TR%ujb2YeJkhx3?FhV*e+xTL^phQYUFM}Mcu
zK>9)^53(RwliFYlvA__>E)dy5s@pIP{Dg)fy!<|_WYLbAE2c_F^=B}ntE^U&6~Hb7
zE1Kd4d+gGyEto?_8X6kvsjI8&0cf*Al6XEkI+_4f*6k}PDY*|cYllkD&dx&APfT+Y
zb!TvzF+0#AH|=);qtQD+0ifp=PJjE{e2luSB*Wow_!l%Zd|QFK(A3oQxTdBi$d&-i
z{^S-m1)ISvx!(jJH=2Kj%V;+NwaG%Rl;TPN);M2*V2G=dCCU=vwzjs(RP(dMofR4(
z2moz|LZLz3^$KY|OagpX81K}Da1on4l$ZC7X%G5hikBbp%nf~WbMpxQj(;B66l-H+
zWAE(fXDk4;n4h2j&`Im526uIJ^>C&N%J^1-?|Q68MMcFR_A&Dp7Z)Kr=D*nA2b^Rc
z-2cn|nbPNDijSxNx&Vwct^SyS7+{~L#(Wyt2$n!_TU~6ifNn3gT-{D{vm!e%iPyQx
zs#RIVS2|emMXuK+c!LlCSAQt=vI{eTF04sdf-`_4m{M??8;HyVu*3U!X9ei+&g#4!
z?nw&^nSwMB2z<me2L}hC+1c4wPA;MNvaGAC>j}Y<4ob;>LYq5Iu}?;I;D7OF*8ida
z(H!PK3IXt6AMqSy9y~|z&mOpExlAEbU#@7L=HE199|RZxa;MhCCl6UgnE(I)07*qo
IM6N<$g7o(D5C8xG

diff --git a/packages/react-devtools-extensions/icons/48-outdated.png b/packages/react-devtools-extensions/icons/48-outdated.png
index 342fedea1ed508bd7cabe8c80b5761f9d03220a9..4a86731fb886cc0c467bc53bffb6de8211064d9d 100644
GIT binary patch
delta 774
zcmV+h1Nr=-43h?s8Gi!+003az3AF$K0BKN6R7C&)03aYBARr(hARr(hATBK<E-o%R
zJ0?6lJV{6@N=iyrRV`RpSY%=_W@ct_a5Hptbboy|f`WpLiaL;xke!{KsHH%wtE;uL
zL%F%R!@owy$H&#x)!y1o<KyG&=TPzS@%i*q|Ns9`aFUAv0Dk}kbW%=J03fgLlJtMI
z00072Nkl<ZNXMmC>zbn=47DAHQp&oH)iM@JA@Bc?8v<y(b;ob=qxHfeImt<|C=SQ+
z$96mv#o?peVIPO$Snjf8QSP+g0hn^&lpG(_y#w2B0+<0ZE#iG;<GtDfGytuXox?wJ
z2e`YGJ%HQ*7=Kz=GF;NL;I3uizMr^w1pu%VI)FhoY2ymaIzWIOE-@^_Gc|y9fCQZ{
zc>u7{^OgrQrpr0#{|6Xf^x#Alb2SZh0f=F@09F1a(s~1+afPf~%)i5uVOm|+RsxaT
z1^^?06?0Ip0fdUHH5Q<fWLOTX!!y1Fi15OOs0BciUw<la3?s5jEp<U+0%Pis$XHkA
z@IgPJ5CKS2agv0sNNP-Jtr*Es0*E;P_ph@ENX(4rU^t~k%68rle2iK}hHB^o+<&B$
z0dg$8h~1)7BhjT}D*!g=FRdB?c1oE5l#5(C;yi{_Pm7R9H(6&q)Iz_Ie%WiDRwD^%
zB}p!)wSSEaF6VjSs?abEH<%Fxc3{b)>#O&txinZCmDF(l5{0H3oSxp_mf~Zz8T8q;
zWGW7rn@78>$s40FQ)LHV=dj-2*Bb~o6f#7owKi!E-2L<V?fsuObEzUZptghRE@5~4
zdAu6}sK%;EihLx1|9Ur<s97mle|-i#Ki>eDO@A}{6I1FRm#@J4ItOrY!?}=W{MC>4
zJZ;UTz#*<D2k0T<Zp*aNbd+Wodbd=AOZ0J`0WgrhYOonx9C_s_1#^G+p?Z@uF84uJ
z-zx*M#VJ~2g`2Ts&iAQ(|N7Yd5n%VH!|sohy`Mk-0I&aPj`%{d8~^|S07*qoM6N<$
Ef;=%~6aWAK

delta 1564
zcmV+%2IKjY2BHj*8Gi-<00374`G)`i02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00qQJL_t(|+U%N7NE}xj$6t*^QW{wZwlr%Xr&gs!JS2J%Ayj+t&;-4B
zFhMUuNKp^c5)cYfTJR91CE!JA1A5Wc9z0Y_4tmj+Qly}vAb<9tDbyB%3xx`$na_*g
z<vGsV-Pzf+UFZ*nU1#3B`F?-z`}^}|tu%pM4lMY%7aZ43dDvob4F4S13&-Gp2#%B~
zFMARkO%=zUFE{Y!81p?=;BQmLR$<EAViTyYt~TT2<7RVn)9mi<+E4y&X=y2Vj_&Sm
zGc`4ponvin&3_CH4HZQomV^L5H#cV*8X6+6udlD0v9U3;wY3#_y`!VUjE;_)+S=O4
z>+|#TW@KdK`4Q;v@3#Q3$;n9z7;A5Dw_b&yu1!o#oFLA9jKTKy_RPY<LiYZ?zCKG1
z>*?vqo-a9prKKh7{V+gRS^~1Xyqxu>yK3A!Jw0s>4}T9&+>fNVH|{FLB7k18#>U1|
z09<`T1Vc*51#*lZ7#Q$+7x0kap3ctB(g(3T$nyKZOUD3U4EF$DpmIq=*L?Ann1J*R
zfqWK4Fc;}Ut|um-2Z%^6qDVoq(Mm{G|5_bTYRtF90A&oo$tVg)G@dKhyAplwmDrcZ
z0jMklaDPaXjmSLM;NW2Px^K?71S;bUCeWz3c#8+|od<KI)9GxU$NS`cq~xxiR;anT
z*<>;qd!Bjt)C%~DU`Yrl4geu=zBq7W#g!fBDTuzgx3{-TOMr)~QVNs{j#W{*1O(FY
zWfWFQ!Hnm%ite0os&GyMfI<dtlg0z3Rf-b&W`7(NT2+>FxeWQJ?O+bb5<A3)NF@$p
zfCEb4Rh(K|TeAQGqOsC0EkZt{*#k5L0FBkx*Js<0xK<gJ1{I6|$E&VaR#sN5oH#Z%
zHnJoE7H;0$%p%|%%*l0PLGxiWc!}C+O{z2qfv5nbkN35~T&KSe7d(Kof{G8uKv1gz
zNq?>vUC5YB;PF-zcmWAtQ=XR-qN=r4MdlL5W@cuRRbsa|<<qkJFvz$P^A)-9HL{H|
zPLxv;1#uz$P9cB`t>}PH+{}?hG>Ni<&!`JBf;gONedb;xQHVgX@;O03*+E-JU*p9?
zl{Ey&C9G@{6+6mQZag5@xVhgeAtsX+0e|Jz0(a*m@Cro6=)AHG^GN4>cQX(UQss6N
z0Cx4tc~f8aVzMnIV5kSuI`Se%Q)uXcsJ?g;!m1k((oQU&?n$9hoBwxjUo>}aziPi<
zd;3STzkigMz?oDk^+EXL&d!dRot-sDM@JSc4{d8}v!1J|sj*{LS69u!!GSGi5P#r&
zRaKQepUZFn^Ff$aLY7XSH6ML=Ihdp3SZ0;xn}<)5Z|YeER)oMUWWUO)&?-ln+j56r
zpL`sEzwyq66XSdPelp*Fmnq#_30E%KDi&jqbXyNJzc^oiY8>DpQL_Dj(jLL<zC~b_
z2xL|%sx9W6yI~0j?%nsE&3l;n%YS_S;8#;uch0<ZEoB3m&s<W9wWU->a(7L92Q0zp
zzL26xLna&=AGKcqBnS5B(I4iM`;X0M0f{WR_b-)xPwdMyWGS^F<auI;z?bf$-kYNR
zT$a9g*4*lSIk|-7{d_wnK&sfeso1SCvK!YgSb+KLPLN)|T>RZi>>v4k0DqYf=mHOL
zH)w5KoIew2|57MRRUH?ybEn4M>U|~I3aH!{l6mmH+o(motOXFj!g6^q^IGJbHv<`c
z@zrmqid#io0(do72a5K!arc1-_{|7i?>|1WY4g+jzeL_crA{Ov>EGR$xG_TSq)id2
z()XI2%o6s#C9wae&HWpm;(tY<3-?K}3Yq)roQy+%#A@&Zhk{(G(zijUWqA1Yo8D(Y
zfLQPaceuF4{*}_*^hdo~_qEee4O_AH`WxRDSBaHjXyCfKx=s`=JYGm&PgT8o<)xy*
zhg0eQzZ3r#2rQN{{zV83n`i$xQEmq2;R^m`CHT@*W-9^KCa^yhU=;u`wPP2URiDEE
O0000<MNUMnLSTXpPW2D~

diff --git a/packages/react-devtools-extensions/icons/48-production.png b/packages/react-devtools-extensions/icons/48-production.png
index 9aac93a622bfab260839911f5d7daa1b47c7c839..07af622e458a750f987946942f984062f9bdc661 100644
GIT binary patch
delta 701
zcmV;u0z&<Y4ax<O8Gi!+003az3AF$K06$PnR7C&)03aYBARr(hARr(hAS5d-Cp9`N
zKu0c0R5DdzHD7KyYI{9(i9mmrM2e$Fl(0*my-umhQnc4qzT{cS@ia<8umAu61awkP
zQve{Z?~?R?wEzGDHc3Q5R7l6AmfLpYAPhy5j4)SY8SVf7)_-{bU(&{Dv&u`rWJ`dK
z1h?D$A-`^q`|WoBCm*zb_uE50YLA<I*!~8%(pYDId`OGY$~CY8z%un=Y<)am0U1h&
z6)cH}TcBm{EBFgwrHF`33sjj_`cU-A#Tfv%yIKt!h9mkK@T^-m7_5VqiS`-@ho#9l
zXn~&qx6+{QfPY=?VRRPEC&=GCUu?QS6e$qiZ(5WnK9(6w4F#J^^fFT}fXWE%bF*!2
z&%iYIf2(0Bgb+f=&=i0+PhWtk0tQh$hrtDNQZNJRbOy3Pjj~WgPXTboEJ~4B!SVsr
zq0mGN5Jdcf)k!2nfN2-l01BjT5nvJV24GI4VVlPcv3~>ZIED&LBFml!fz6o6OzS{6
zwBozpah@t7in(KQ2iz_vR7C6mTHivC_yENAP*x!HA0Ue)*e6$X0C_ul2Mz7&hSiBP
z){zZPdq!=?s$oCYDB@<->_iGS8Bs)%VetrDGSK9dES2VVxj>Oh^|Qh1&(d&n-)Nqk
z9XYQw34eV<EqxWA%j+gi=2A*2rS5vI;ibH1+WKAGy1th8NFec{7^tekn!+TKkL>;e
z*oaYtB2u@)^e(4Ir$9=(h}>0~IhB)&ooetkaHLLyMSceMi3B6CZvortdV#8YZpV}7
zXJF~e@CtJmn15gH11vEu+iIf0lCvHe@$JeQS~jRdeQu1?^(~rIHJ|KFdC`-O{(kNL
j3i$Zx@bTm1)925B0V_v4oTdKj00000NkvXXu0mjf<|0BO

delta 1668
zcmV-~27CF+1&R%j8Gi-<00374`G)`i02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00t~cL_t(|+SHm$Y*bYk#}7p*wkb@I5^*rp2Nv6eP(wFjg0iA4EDLlY
zO-!f@N;KBQKwQ)p3xkiS(O5S~G_VmCr3)GpBbun25{VkB6@N`i#A1qI1&h+Ecz>t;
z-<+Ab=gz&;j$yv!W~MXe@jd_N|DEYP6G%fK!OLsGv&B?~^aan8BZ17DQT{~mWK3nr
zc<{8$&tx+DgEwnU<;g;lhX`CX6)aVz!sWWu6Kd<s^35Hle!~N%y8dP}F*0l}4jnh=
zK0RXJClTf@X@A{l7B#K2>s>iF8qDuEKOO2#Z9wW2TC?{9Q`^uO`Q3%VV`k*Nm#jij
zvZVEX)9}bHYj~8LJ$lg2FPj0&H*d2FAZHH0V}3t5Xg!EG@hbB7#3ic)9(AL3d)FRo
z0D^&Mj~=j*n_jmgod5OihZ08;0fnARI{3Cnd(48&Qh%#F;YN`^M@OvZQMkH3Yomif
z3zuc>=Xm?Br+dxf=5?Xr!>@FkKTdsPrpC|PhjELWTkY6?rzXw#SD%-s29!E@FJCYQ
z#S|qxTC=jzDn$f{%+L#+UhlFdHQ`IoS)-5^Mgf%Z33+_-`A$2AIVjJZ6OXsWriQ-r
z)yJ$2n15eWXJ7xhe5vTzs3MLt+MQE21Jb~3<5RDP@TlnBv2#zN`Na$^*#IF1c^W66
z4GN<OHSxpSJt6i}A3o8#mroCuKLU6+N^W_uD}>4)dwXnNgH9liWxYXh`yAj~b52o+
zD4+lj(1)kV+1iHHwnpS(ybrb$4HQ%K5Yh{ysDGu2k?(ApVd$c!)|^O}<sc)ENd-1d
zTWm>kA7eQLL9#hB07da8sS%|#9s}=%^>I{!i0LF}3{O-_@i`IZZ1AmB)Buzvr**`;
zUP35Pr4jrHN#Z?H2xqVsX9KV7vtsLx5P{r!5XtiyQsv`3C?(}t1ce8;-)ohg_U7ua
zFn@IrB?&#nEk~@_+LePqzYH9-d$5<d6gr@b55Wq!5P6<$-)^cFR9j`geQ~E<49;UM
zzJ7t_I-=5e4>|S5?i}2QH{JQfUYmY3*<0;c3Ky<(b?S=AtX*&FR;{rqs5O9G#zgTe
z#*1HhQ%IrIVlJa};jZ=F&kATXUX$`o&wuPIfJHZDkh|X+uuf1kFc2nMj0G!o3sQ(h
zZfe^W=5mzsQY8O7m&215QJC(gj2z_VdlW%*`IXXBh7=eeB+-O8aW}&lx4?9e#SucG
zmoOiv{C50U?4ERdQCz92lv7c}E^5IvTt;)*&s{TatQUpwhBl}0;$+!<?KvFA#eecR
zPhJ@OIHxamm2%gN5~W}MNu3jcGlzR;2Ji5~7TyxPDs_Y+2$&re1@R)S;li&B^6l6B
z?7om7=J(7wFiM*TR0+0d^K@cLZoFrcg;74E5b+$Ighc{>z~I<NhXS~*4&ZV!?0-+c
z|8i(pc1x#SUtL=LhIZSkY7I9^w11;F1Tf54&XD{F6r2M<)btVGYA2!~h9Hx_j+&JZ
zcUy&t*7+|!3=Ia;@h~{AzLvjva15U*mpP4*(f<8*Kh6o(kipsZPO~aFLzb@JWX~g_
z^!=;dkwni+B?NnTA*!eeC7a{%mNy6Nm?YOCqysgBqF+ANX5Ztas1#xhDSzpM^h9J%
zIZv2<4Y$jYFv8b%;(cGPyK4aiW1k#JM6FZNX$p_x#xrW#=YmF)`@kscrKQs)U8^X4
z^ckB|C!FMpM85X~wbP{UKnM;32pm(}uqz~qWif!$+J!#%JqpudsX+N#cb#hJg(Oke
zE2Unmq%uI>^>K5eLjTJ-!hiGE*v~l_Pvm@eLu%%WT^h{#cDfi<!0RejYQ`<@I5bIn
zol^3xM6ni6Op|d^UboiQ#19-vkSCw#kQQ+)^?x%!VU9BbUZkQWWhiFd*2P_H$-p#M
z>!}S8G`fw68yQYnb#&xBsl-LEa-W(IF)Qr4I?8`9L@J<w@|q@tGkpMZCl3lL^Ltmm
z*F~4+UmO~o`EFx~KG2IKbykuA?&Vf=*VJ!|)rTme(Z2b<K739MP?5R~2#tzZY|>7Q
zh`@Mti=CAF%!vWll2rWf#2C<5!TR@A{6BkC@h>a9sjx_(YYV#nC%^!FQpX1EfYwO>
O0000<MNUMnLSTZH5+OPO

diff --git a/packages/react-devtools-extensions/icons/48-restricted.png b/packages/react-devtools-extensions/icons/48-restricted.png
index 372b6e00e88a85c08ccfa020e8db75b31b429a5b..43cc19e3643dd4f08dbdba1cd9eb7215800bf8b6 100644
GIT binary patch
delta 717
zcmV;;0y6!a4B7>d8Gi!+003az3AF$K06$PnR7C&)0000000000000000A*!mm6esT
zv9ZI$!_d&s+S=OT;o;}!=j`n4@bK{T^z`@l_xbtx`}_O-{r&&{|0_t7*#H0l6m(Kf
zQvd@J7#b)yMN?vMevO-{x5m`s@kmNv@Bjb;Hc3Q5R7l6AmVeuJ;~)%0lZ-G|V;SxL
z|JHc`U(&{Dv&u`rWJ`dK1h?D$A-`^q`|WoBCm*zb_uE50YLA<I*!~8%(pYDId`OGY
z$~CY8z%un=Y<)am0U1h&6)cH}TcBm{EBFgwrHF`33sjj_`cU-A#Tfv%yIKt!h9mkK
z@T^-m7_5VqiGTJQ2#2M~IB0>N0JqYh?toqHVRRPEC&=GCUu?QS6e$qiZ(5WnK9(6w
z4F#J^^fFT}fXWE%bF*!2&%iYIf2(0Bgb+f=&=i0+PhWtk0tQh$hrtDNQZNJRbOy3P
zjj~WgPXTboEJ~4B!SVsrq0mGN5Jdcf)k!2nfN2-l0DlUkZV_M+@djW{q+y%K46y_5
zIED&LBFml!fz6o6OzS{6wBozpah@t7in(KQ2iz_vR7C6mTHivC_yENAP*x!HA0Ue)
z*e6$X0C_ul2Mz7&hSiBP){zZPdq!=?s$oCYDB@<->_iGS8Bs)%VetrDGSK9dES2VV
zxj>Oh^?$R$>d(?}bKhv5oE<r@Gzon}EqxWA%j+gi=2A*2rS5vI;ibH1+WKAGy1th8
zNFec{7^tekn!+TKkL>;e*oaYtB2u@)^e(4Ir$9=(h}>0~IhB)&ooetkaHLLyMSceM
zi3B6CZvortdV#8YZpV}7XJF~e@CtJmn15gH14b+{E!%3M!IHBc8S(AP8d|7BeQu1?
z^(~rIHJ|KFdC`-O{(kNL3i$Zx@bTm1)925B0V_v4oTdKj00000NkvXXu0mjfkPKUp

delta 1558
zcmV+x2I=|Q1)L0!8Gi-<00374`G)`i02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00q8DL_t(|+T2>nPn$;+H^yv2U<#Bajo|_)5eK+MMB-Q_2P6)u;NBPs
ziA!m(s5E~-%83ih9{}nF2~nq4AmqprD-wtUkcy>HFpDsY?SH(V>leLDX1>M7Y2A@V
ze9SlVzPG>M8_4tgGxBNrX%>5OV?=32XvXqV%zsVO>&dMVr}-C{|B7aTC-(-F@AKx6
z+vrBI*OTMJwE%s6edW8myFcCB+`LI75`SJ@UHx%*c=%#wW~S9CjrH~Qp7Znb$yhA*
z4m3auG}9I0o`0K348Khn1~K*f=;-Jp)7j<a<?o5vZPR&D#JF32TnVtXwe>T9j5PLg
zet!NLm^wK*nc{WQYJ@cWgFHu8djR2h4}<_Mvf8(p@;rXengFbQFt5IY<|UJ0ir1yp
zbZ0RyFE3xGX$9w-nF(mriIu=OEW(zt(k?8CeGtSAPk)Ysn1l5C`Z_#5K7MN2*Vx!N
zv9Pf4T|6E?Ei5c-^?JSKIMd(X|ERmWJ8U|)xVV^n=kxjQXC(_&R#uiL%O5djw|8}Q
z^}V`gB{assz`#yQfIwE$sFO4s3<f8m`P<vuBvY^i#l(mseBeMqX$jET*}0S~eZ|Ec
zR{KV1fPY~yGB-E(d}Cu{5bJ)wzlY)@XgWt3t%F@O>lT2Pb?YcbrKP1$@w~RSHVB_@
zX=$0>+uQpUYYhzzFPKqvl$DkF(*;ELoNlHJ@f$3#va<5Ly}dnzz^0%L)YjIv78Dee
zS5;L7*$tpc4&rDuy2O^lyW`{IX{rUM`}_N0vVY1B1VuH+c?eryU;i>I0>F>q3h-^W
z!REyGA?)_{_AoNpoe4mNDA3#68zjb`=$M9fS<_%*b8~Z;G`pjtMK06|H^MWNK=ZvW
zrtmHjiM*PcnwsG3<Qfa1g31!l#fYC#c(4z}iPuoX><SN8YtZ6?i0aI1@*7;yt?-q{
zRDVq+ArN7PnE{3b3;|Geom5UR&9oUdFb$@u!&er{`E)@Z)S*iNH3nn=bG#SNya!g1
znpU+a;fAE4e#?Zfi~_JJF;qk;HK>Epl6ln)RF}bISj~H_EGPwLPxwp#X<9p9R%1hI
zPHM~w?@P^FDU2u1vgNe`NP>2LECW|HYk$IGs7RB2U$u_iH*L|VsnV*z4x^~3D3C6e
zVdRMvOoh?15~E<+rcrhwQ`2E`AsN8xJ2|9lax$=Mbkt@_(=X_Q#S{lJh&d1?QN)8T
zh`|86iHtX9Oyk=hzb9Qy(-fJti-S_TR%ujb2YeJkhx3?FhV*e+xTL^phQYUFM}Mcu
zK>9)^53(RwliFYlvA__>E)dy5s@pIP{Dg)fy!<|_WYLbAE2c_F^=B}ntE^U&6~Hb7
zE1Kd4d+gGyEto?_8X6kvsjI8&0cf*Al6XEkI+_4f*6k}PDY*|cYllkD&dx&APfT+Y
zb!TvzF+0#AH|=);qtQD+0ifp=PJjE{e2luSB*Wow_!l%Zd|QFK(A3oQxTdBi$d&-i
z{^S-m1)ISvx!(jJH=2Kj%V;+NwaG%Rl;TPN);M2*V2G=dCCU=vwzjs(RP(dMofR4(
z2moz|LZLz3^$KY|OagpX81K}Da1on4l$ZC7X%G5hikBbp%nf~WbMpxQj(;B66l-H+
zWAE(fXDk4;n4h2j&`Im526uIJ^>C&N%J^1-?|Q68MMcFR_A&Dp7Z)Kr=D*nA2b^Rc
z-2cn|nbPNDijSxNx&Vwct^SyS7+{~L#(Wyt2$n!_TU~6ifNn3gT-{D{vm!e%iPyQx
zs#RIVS2|emMXuK+c!LlCSAQt=vI{eTF04sdf-`_4m{M??8;HyVu*3U!X9ei+&g#4!
z?nw&^nSwMB2z<me2L}hC+1c4wPA;MNvaGAC>j}Y<4ob;>LYq5Iu}?;I;D7OF*8ida
z(H!PK3IXt6AMqSy9y~|z&mOpExlAEbU#@7L=HE199|RZxa;MhCCl6UgnE(I)07*qo
IM6N<$g7o(D5C8xG

diff --git a/packages/react-devtools-extensions/icons/48-unminified.png b/packages/react-devtools-extensions/icons/48-unminified.png
index f3224021a560c7d543178c3159c05cee9eebac9f..01eeb6e85c8c9f27ee61acb14827d07423eca4a1 100644
GIT binary patch
delta 814
zcmV+}1JV4^54r}B8Gi!+003az3AF$K0B=xCR7C&)0NF}7*-ALsN;o4QATA;zIwT`S
zCnZrTCR{8iXD=ypGAn*HEQvQRl{zn=Ju$35GPgoB!bLUCM>p9@INMc3-eFPTY+d7b
zYUP7==Z=HwnUCzHobIrw@w>G1#=-W|&G_Bg`sn8U^z;A!|9?DsNpk=I00eYWPE!CN
zukVudf3*Mr0(MD6K~zY`t(NPWqaX~1ZAY!OW7jI6ctptkU*m?8*lz8t&u)HHrMwAA
zKF}ySoylL@`4mN`FLJ=XPSKehvU5ZZ+P?vGkg$wR80cmNa@YqJFg7#$$fbQA_kbQ?
zX!!)7Ivs8XkbiyC;B&JBEMTHDoH-GO;p}3>Q;019K-W-<0_7ZY5buEo7Ju6+L>x^R
z$oD`SJTVPyBL4)?1*Fcy18O%1cQfPqJAnR=$U8|70NnhxpOeP=ankT%#6}1O0x#ph
z8#2PM15Dsr`)tau?HORBosGU#*BZliNMQ!$$X)<88Gl!LO%NPn@)UDX_y<gE3-mZN
zahxz<BB23Pp(+Fp8iDlzn4Cg8kgcgroo88I8;#%qTLtC-EMR9n8gb+NBt}b+kTA<-
z6&SYw4Q0@opuapemSfXUfL`3A(Nv^62|<4*Zf1cDZ>zM}{J8>jm6Pe}2Ds}uUgi!U
zYHg)nQh&Qy(j~vf_prZ&1A1S2Oj_zupLD4&l`HXVca$%yXxFlGUslUK?D>HL;GuE&
z2%@6`BcY&NM)$;LQkS})%~l$8R7NyCqiR6lmSuK2+C5L=vg=;OM|*cF^`v;%I#soY
zuJv1aV`mU*G1bJ(EJ<OeU#brqh%}TG7wb1AB!Bf9c?&4;s;|BcQIOJR@zWvTn~ko`
zHLrGn&2ds0*Ee^KgQA{*uytxDrw7rCOH-q(4@-I^u27kgNkyvqebP?)^gGUKoA<A+
zUSEM(?=~!~7)VK+X49J7>OBC3H}eiRuVNwZ?@#Zz$%<pL>MO9E<>T{Pv=c(~zI#_p
s;3v>)_m<ZG<vo4))8X*P$<fcB-(A1ES1Zxc8~^|S07*qoM6N<$g4Fzfj{pDw

delta 1998
zcmV;<2Qm1%2GI|Y8Gi-<00374`G)`i02y>eSaefwW^{L9a%BKPWN%_+AW3auXJt}l
zVPtu6$z?nM00(nPL_t(|+SFQ0Y*b|wKE2b<OlPLgp$`xQs|6OcNnt}{f(u~-3(CSr
zXku(YNDvdoO<7Piz=CcpiD)8fAQFs56U)M`aMMk@ktS3VOMj&z5BstY`kHp85C8AX
zoa^n(y?5reOyZp6W~TGsd*?f^?|lEA=8&?!gL}8Bmo{}YP<B|mIzl@-x*z1k!S|@6
zn6k?z)lsL#BcE;HDUP{K%c8O|vj&Z_+;W{>p!ow-((on~zIu@IDmK!>KtIj(-l3`6
zKk@r?tZ@G!3V-a~N50zKe81@MAWi+;L1Q<+bnF0{c*V&DTR-`lJXO`EYcpM)H2TG5
z24rS|`h8UP&KY*x%qDJqN26CSXD$OJhu_e_kA3qMh40=WEfC;na#ZVMQ5{hrkP&0n
zDnl*24ugY}3M?`w_r>*ib&^S#>%HpDAEkS8#p!0sEq@6zc%(ZzGDwlff6+{LCzn88
z`9^jSKoMnpj@QlSFSBFf_}>?sX}<3_TACQ=1Lt8K=dMH}H1|t)W-=hrpJ@L!X$?^Y
zFhsHJ#2JpLr)oQcLI##+XXw${Q<l+1`Q+E^Ca*<#TK1$<@BjcXRt6xC&%Vp&;2MC(
zH3LmYY=28b)^f`?X2t=RzkpwtXQxx1i_%IoJEtXsFslY%w*yXScGJ05ogO87m7#NK
zU7yO)H9H`TfjYG_unhnM2zp|u?V`^8=npIN#qYZ?a4+*2Ky=M4*mzv0%AvLkT-TsQ
zFb@pP?Xw5~=s4q(IIOaO41n@5v=C|3EZBx8bbma;h(6vU8~8jN&mL@3ODjE9PT?Fx
z8)XJZC9`wAJ(+U=UzT4(JWWyOb{R63n(@8SQM1}#o|$&!KuRfr2p6j_#I!YI2t-#h
z01%kMixyG>8ABOKFcwD!O?wJ!7;c!>R<b0e0{|O5dW@UT7$vEHG^msj^brg?26Mp9
zkbgP!3GRj2fLHVmzDu%T>@n#fD@Qad%>z&Z9ybBtKVCn;pkvY8&adV1h@y^DftTi%
zKmd4*f$H=ji0{C6iIxHeV6kGbBrOEKE`9AS%5l3H?2`{e>Si6Rc{pWmPfY8mi5XF#
z1;kM62l@b;U0R_lgHv>Ce2#8UhUxBXgnw%N9&&3rtaVl*5%TZZOZhu@sS@nb?=h?>
z7tWdKE1WO-%F+ScNIV69|8xDbq``tz!a-M{K+g~y9sl8m4*u=_QR)jvX*jyX$H4p|
zbxefmP>GM7fRMwrxQC`DJc6}2GDPFw-$-ig>CW5y3I~w&g+KfCV6I{zBRh;H$baF)
zn_|t_8`uMgeLgg$oLEk}4xeG|{pX7GXfG*QA{xkJBjQk6xhncB6cqzX8L#RAZ=6Zw
z0y{IV!x>|Pji`uQnQ;x1{bAql)O2r@+Q;Tn?g1pAiA<<DnY4+*ZY|==XuYa8VkH($
zd9Ky>XvT<0y<^X7zo$L8YDgL7L4SFk%knx|JAHqQK7R6)x~3NR?^?e*r31mE$Mv~m
znE}~UgOjaj3)zwSm(mF~9@E!PRu+=qm7G|7hBZVT5eGYUP0#aMjg14MZbcxDB<z{B
z#M+ix!^GTj>C+_f6{vqj2R|HFn#h8PIKL~0u2+}Q{^ER&EDpTKXRz~+CVx#De8uwV
zMb)(*^}#0s(RL1iXQPVJAlTfSxAIM5``H`@UDkAp>v3F7M^K!IIq!~L>^yiLR9Ro>
zW#BmQzH@4xS{_cAGSuV9BA+MDfPyRBE*_G=0MHn2VH2TeDJ5i57AXhJni^CKXP1=t
zLX?m_?3JaDt`1G>&3RwV0e>^#MgzTK;B`$e@VTwqO6ldpM^-V=n#3Hy!-?1?-JGjM
z1Az`vGF9GOI{RRp0U7Pu_A&}+8V@=<hw2Nw>=4Rv-EtZc<>;ydeSzjiDaoc?bP$^J
zsv1<%u%>e$vP2br7d4gz^mC0?<;|m(=ZmSrhRN2oACN~Ln7sdqx_@eR2uyN9u?*P7
ziq}D%$U;NVN4Lgic?K8_e<MQ~+fs@GH8O$mF$;iQc`?W!8_SdX1^`iJQuAhVL#Q<)
z4oEYn+GL;vP$p&r>gMPSGfhpLViWCdd^%@rQ}5)lN5~?|aKdUGB?x^a8tIukkShAd
z;nb#T-ptxn{X=4NrhgJj4WHpa7P`|YC&#}Jc+z-w32@DdMiFgcq(s^T3tduN-%#r3
zNXz=A7fN*p(rIXIE#+h91o{Mx2tcTDNC-5yS*>Gef$L9J#?&pQu}~;p)0qQ~9<M_#
zxVLQON9>RhiJ95de1URHH_%J>e`W9}56B9<mz|l>`sSi^pnup$JAHXHySze86$O00
z6LaJMp5<dA!wFC-bdOi<Yaw-^TcC@uF@kd&BH`6TDnCzg|LUd$XmM~)z~dOa;~tRT
z!sOQ&QJ}_M6XdQLQ;GIRnIJQm%IFWsj`f)1tFhU~<G&)qrUp})Rjds|^~QA(l&LVy
zv#>R}k4W1oL`T!%=8l1`^||R;n&V$7|8E8wZO>x-?QkGOv45P%HUs96hJRU6Z|brv
g6Tn&r?EeZd06w1z10F&2!~g&Q07*qoM6N<$f{1~>x&QzG


From d3f8747c8df098def311ee16d7b36aa1d0976f72 Mon Sep 17 00:00:00 2001
From: Ryota Murakami <dojce1048@gmail.com>
Date: Mon, 2 Aug 2021 22:51:53 +0900
Subject: [PATCH 0736/1603] [DevTools] Disable sizeBot on DevTools Rull Request
 (#21885)

* [DevTools] Disable sizeBot on DevTools Rull Request

Because DevTools code doesn't affect production bundle size.
Meaningless sizeBot comment give us frastration within Pull Request discussion.

* Revert "[DevTools] Disable sizeBot on DevTools Rull Request"

This reverts commit a43aab9207d4abc85b60c22b21a374fc54b1c6ea.

* check whether devtools package file only committed
---
 dangerfile.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/dangerfile.js b/dangerfile.js
index 515e09536e23..fbdd85ae44f5 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -113,6 +113,17 @@ function row(result) {
     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.

From e3b76a85c5233fad6f411c14e88ac4a61af800fb Mon Sep 17 00:00:00 2001
From: houssemchebeb <59608551+houssemchebeb@users.noreply.github.com>
Date: Mon, 2 Aug 2021 16:20:04 +0100
Subject: [PATCH 0737/1603] Devtools: Refactor imperative theme code (#21950)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../src/SchedulingProfiler.js                 |   7 +-
 .../src/content-views/constants.js            |   4 +-
 .../react-devtools-shared/src/constants.js    | 311 +++++++++++++++--
 .../src/devtools/views/DevTools.js            |  61 ++--
 .../views/Settings/SettingsContext.js         | 328 +-----------------
 .../src/devtools/views/ThemeProvider.js       |  29 ++
 .../src/devtools/views/portaledContent.js     |  10 +-
 .../src/devtools/views/root.css               | 260 +-------------
 8 files changed, 375 insertions(+), 635 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ThemeProvider.js

diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
index c7a7783694fb..760bbeead7d4 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
@@ -15,6 +15,7 @@ import {
   useContext,
   useDeferredValue,
   useLayoutEffect,
+  useRef,
   useState,
 } from 'react';
 import {SettingsContext} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
@@ -30,6 +31,8 @@ export function SchedulingProfiler(_: {||}) {
     SchedulingProfilerContext,
   );
 
+  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.
@@ -42,7 +45,7 @@ export function SchedulingProfiler(_: {||}) {
   const [key, setKey] = useState<string>(theme);
   useLayoutEffect(() => {
     const pollForTheme = () => {
-      if (updateColorsToMatchTheme()) {
+      if (updateColorsToMatchTheme(((ref.current: any): HTMLDivElement))) {
         clearInterval(intervalID);
         setKey(deferredTheme);
       }
@@ -56,7 +59,7 @@ export function SchedulingProfiler(_: {||}) {
   }, [deferredTheme]);
 
   return (
-    <div className={styles.Content}>
+    <div className={styles.Content} ref={ref}>
       {schedulingProfilerData ? (
         <Suspense fallback={<ProcessingData />}>
           <DataResourceComponent
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 27ce99a05a11..214cf26d7bfa 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -82,8 +82,8 @@ export let COLORS = {
   WARNING_TEXT_INVERED: '',
 };
 
-export function updateColorsToMatchTheme(): boolean {
-  const computedStyle = getComputedStyle((document.body: any));
+export function updateColorsToMatchTheme(element: Element): boolean {
+  const computedStyle = getComputedStyle(element);
 
   // Check to see if styles have been initialized...
   if (computedStyle.getPropertyValue('--color-background') == null) {
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 10750fa7d773..1e062b23a641 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -55,33 +55,296 @@ export const UNSUPPORTED_VERSION_URL =
 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': '#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': 'rgba(0, 0, 0, 0.1)',
+    '--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-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-scheduling-profiler-native-event': '#ccc',
+    '--color-scheduling-profiler-native-event-hover': '#aaa',
+    '--color-scheduling-profiler-priority-background': '#f6f6f6',
+    '--color-scheduling-profiler-priority-border': '#eeeeee',
+    '--color-scheduling-profiler-user-timing': '#c9cacd',
+    '--color-scheduling-profiler-user-timing-hover': '#93959a',
+    '--color-scheduling-profiler-react-idle': '#d3e5f6',
+    '--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
+    '--color-scheduling-profiler-react-render': '#9fc3f3',
+    '--color-scheduling-profiler-react-render-hover': '#83afe9',
+    '--color-scheduling-profiler-react-commit': '#c88ff0',
+    '--color-scheduling-profiler-react-commit-hover': '#b281d6',
+    '--color-scheduling-profiler-react-layout-effects': '#b281d6',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
+    '--color-scheduling-profiler-react-passive-effects': '#b281d6',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
+    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
+    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
+    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
+    '--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
+    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
+    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
+    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
+    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
+    '--color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scroll-thumb': '#c2c2c2',
+    '--color-scroll-track': '#fafafa',
+    '--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-tooltip-background': 'rgba(0, 0, 0, 0.9)',
+    '--color-tooltip-text': '#ffffff',
+    '--color-warning-background': '#fb3655',
+    '--color-warning-background-hover': '#f82042',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#fd4d69',
+  },
+  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': '#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': 'rgba(255, 255, 255, 0.25)',
+    '--color-component-badge-background-inverted': 'rgba(0, 0, 0, 0.25)',
+    '--color-component-badge-count': '#8f949d',
+    '--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
+    '--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-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-scheduling-profiler-native-event': '#b2b2b2',
+    '--color-scheduling-profiler-native-event-hover': '#949494',
+    '--color-scheduling-profiler-priority-background': '#1d2129',
+    '--color-scheduling-profiler-priority-border': '#282c34',
+    '--color-scheduling-profiler-user-timing': '#c9cacd',
+    '--color-scheduling-profiler-user-timing-hover': '#93959a',
+    '--color-scheduling-profiler-react-idle': '#3d485b',
+    '--color-scheduling-profiler-react-idle-hover': '#465269',
+    '--color-scheduling-profiler-react-render': '#2683E2',
+    '--color-scheduling-profiler-react-render-hover': '#1a76d4',
+    '--color-scheduling-profiler-react-commit': '#731fad',
+    '--color-scheduling-profiler-react-commit-hover': '#611b94',
+    '--color-scheduling-profiler-react-layout-effects': '#611b94',
+    '--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
+    '--color-scheduling-profiler-react-passive-effects': '#611b94',
+    '--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
+    '--color-scheduling-profiler-react-schedule': '#2683E2',
+    '--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
+    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
+    '--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
+    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
+    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
+    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
+    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
+    '--color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scroll-thumb': '#afb3b9',
+    '--color-scroll-track': '#313640',
+    '--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-tooltip-background': 'rgba(255, 255, 255, 0.95)',
+    '--color-tooltip-text': '#000000',
+    '--color-warning-background': '#ee1638',
+    '--color-warning-background-hover': '#da1030',
+    '--color-warning-text-color': '#ffffff',
+    '--color-warning-text-color-inverted': '#ee1638',
+  },
+  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
 //
-// Extracting during build time avoids a temporarily invalid state for the inline target.
 // Sometimes the inline target is rendered before root styles are applied,
 // which would result in e.g. NaN itemSize being passed to react-window list.
-//
-let COMFORTABLE_LINE_HEIGHT;
-let COMPACT_LINE_HEIGHT;
-
-try {
-  // $FlowFixMe
-  const rawStyleString = require('!!raw-loader!react-devtools-shared/src/devtools/views/root.css')
-    .default;
-
-  const extractVar = varName => {
-    const regExp = new RegExp(`${varName}: ([0-9]+)`);
-    const match = rawStyleString.match(regExp);
-    return parseInt(match[1], 10);
-  };
-
-  COMFORTABLE_LINE_HEIGHT = extractVar('comfortable-line-height-data');
-  COMPACT_LINE_HEIGHT = extractVar('compact-line-height-data');
-} catch (error) {
-  // We can't use the Webpack loader syntax in the context of Jest,
-  // so tests need some reasonably meaningful fallback value.
-  COMFORTABLE_LINE_HEIGHT = 15;
-  COMPACT_LINE_HEIGHT = 10;
-}
+const COMFORTABLE_LINE_HEIGHT = parseInt(
+  THEME_STYLES.comfortable['--line-height-data'],
+  10,
+);
+const COMPACT_LINE_HEIGHT = parseInt(
+  THEME_STYLES.compact['--line-height-data'],
+  10,
+);
 
 export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 3c768c11ab97..190fa7917a57 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -31,6 +31,7 @@ import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
+import ThemeProvider from './ThemeProvider';
 
 import styles from './DevTools.css';
 
@@ -220,38 +221,40 @@ export default function DevTools({
                   <TreeContextController>
                     <ProfilerContextController>
                       <SchedulingProfilerContextController>
-                        <div className={styles.DevTools} ref={devToolsRef}>
-                          {showTabBar && (
-                            <div className={styles.TabBar}>
-                              <ReactLogo />
-                              <span className={styles.DevToolsVersion}>
-                                {process.env.DEVTOOLS_VERSION}
-                              </span>
-                              <div className={styles.Spacer} />
-                              <TabBar
-                                currentTab={tab}
-                                id="DevTools"
-                                selectTab={setTab}
-                                tabs={tabs}
-                                type="navigation"
+                        <ThemeProvider>
+                          <div className={styles.DevTools} ref={devToolsRef}>
+                            {showTabBar && (
+                              <div className={styles.TabBar}>
+                                <ReactLogo />
+                                <span className={styles.DevToolsVersion}>
+                                  {process.env.DEVTOOLS_VERSION}
+                                </span>
+                                <div className={styles.Spacer} />
+                                <TabBar
+                                  currentTab={tab}
+                                  id="DevTools"
+                                  selectTab={setTab}
+                                  tabs={tabs}
+                                  type="navigation"
+                                />
+                              </div>
+                            )}
+                            <div
+                              className={styles.TabContent}
+                              hidden={tab !== 'components'}>
+                              <Components
+                                portalContainer={componentsPortalContainer}
+                              />
+                            </div>
+                            <div
+                              className={styles.TabContent}
+                              hidden={tab !== 'profiler'}>
+                              <Profiler
+                                portalContainer={profilerPortalContainer}
                               />
                             </div>
-                          )}
-                          <div
-                            className={styles.TabContent}
-                            hidden={tab !== 'components'}>
-                            <Components
-                              portalContainer={componentsPortalContainer}
-                            />
-                          </div>
-                          <div
-                            className={styles.TabContent}
-                            hidden={tab !== 'profiler'}>
-                            <Profiler
-                              portalContainer={profilerPortalContainer}
-                            />
                           </div>
-                        </div>
+                        </ThemeProvider>
                       </SchedulingProfilerContextController>
                     </ProfilerContextController>
                   </TreeContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index ce4e68628f71..a433ac220ffe 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -55,6 +55,8 @@ type Context = {|
   theme: Theme,
   setTheme(value: Theme): void,
 
+  browserTheme: Theme,
+
   traceUpdatesEnabled: boolean,
   setTraceUpdatesEnabled: (value: boolean) => void,
 |};
@@ -198,6 +200,7 @@ function SettingsContextController({
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
       theme,
+      browserTheme,
       traceUpdatesEnabled,
     }),
     [
@@ -214,6 +217,7 @@ function SettingsContextController({
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
       theme,
+      browserTheme,
       traceUpdatesEnabled,
     ],
   );
@@ -251,26 +255,6 @@ export function updateDisplayDensity(
   displayDensity: DisplayDensity,
   documentElements: DocumentElements,
 ): void {
-  updateStyleHelper(
-    displayDensity,
-    'font-size-monospace-normal',
-    documentElements,
-  );
-  updateStyleHelper(
-    displayDensity,
-    'font-size-monospace-large',
-    documentElements,
-  );
-  updateStyleHelper(
-    displayDensity,
-    'font-size-monospace-small',
-    documentElements,
-  );
-  updateStyleHelper(displayDensity, 'font-size-sans-normal', documentElements);
-  updateStyleHelper(displayDensity, 'font-size-sans-large', documentElements);
-  updateStyleHelper(displayDensity, 'font-size-sans-small', documentElements);
-  updateStyleHelper(displayDensity, 'line-height-data', documentElements);
-
   // Sizes and paddings/margins are all rem-based,
   // so update the root font-size as well when the display preference changes.
   const computedStyle = getComputedStyle((document.body: any));
@@ -285,304 +269,6 @@ export function updateThemeVariables(
   theme: Theme,
   documentElements: DocumentElements,
 ): void {
-  updateStyleHelper(theme, 'color-attribute-name', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-attribute-name-not-editable',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-attribute-name-inverted', documentElements);
-  updateStyleHelper(theme, 'color-attribute-value', documentElements);
-  updateStyleHelper(theme, 'color-attribute-value-inverted', documentElements);
-  updateStyleHelper(theme, 'color-attribute-editable-value', documentElements);
-  updateStyleHelper(theme, 'color-background', documentElements);
-  updateStyleHelper(theme, 'color-background-hover', documentElements);
-  updateStyleHelper(theme, 'color-background-inactive', documentElements);
-  updateStyleHelper(theme, 'color-background-invalid', documentElements);
-  updateStyleHelper(theme, 'color-background-selected', documentElements);
-  updateStyleHelper(theme, 'color-border', documentElements);
-  updateStyleHelper(theme, 'color-button-background', documentElements);
-  updateStyleHelper(theme, 'color-button-background-focus', documentElements);
-  updateStyleHelper(theme, 'color-button', documentElements);
-  updateStyleHelper(theme, 'color-button-active', documentElements);
-  updateStyleHelper(theme, 'color-button-disabled', documentElements);
-  updateStyleHelper(theme, 'color-button-focus', documentElements);
-  updateStyleHelper(theme, 'color-button-hover', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-fill',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-fill-text',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-pattern',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-commit-did-not-render-pattern-text',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-commit-gradient-0', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-1', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-2', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-3', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-4', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-5', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-6', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-7', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-8', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-9', documentElements);
-  updateStyleHelper(theme, 'color-commit-gradient-text', documentElements);
-  updateStyleHelper(theme, 'color-component-name', documentElements);
-  updateStyleHelper(theme, 'color-component-name-inverted', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-component-badge-background',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-component-badge-background-inverted',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-component-badge-count', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-component-badge-count-inverted',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-console-error-badge-text', documentElements);
-  updateStyleHelper(theme, 'color-console-error-background', documentElements);
-  updateStyleHelper(theme, 'color-console-error-border', documentElements);
-  updateStyleHelper(theme, 'color-console-error-icon', documentElements);
-  updateStyleHelper(theme, 'color-console-error-text', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-console-warning-badge-text',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-console-warning-background',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-console-warning-border', documentElements);
-  updateStyleHelper(theme, 'color-console-warning-icon', documentElements);
-  updateStyleHelper(theme, 'color-console-warning-text', documentElements);
-  updateStyleHelper(theme, 'color-context-border', documentElements);
-  updateStyleHelper(theme, 'color-context-background', documentElements);
-  updateStyleHelper(theme, 'color-context-background-hover', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-context-background-selected',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-context-border', documentElements);
-  updateStyleHelper(theme, 'color-context-text', documentElements);
-  updateStyleHelper(theme, 'color-context-text-selected', documentElements);
-  updateStyleHelper(theme, 'color-dim', documentElements);
-  updateStyleHelper(theme, 'color-dimmer', documentElements);
-  updateStyleHelper(theme, 'color-dimmest', documentElements);
-  updateStyleHelper(theme, 'color-error-background', documentElements);
-  updateStyleHelper(theme, 'color-error-border', documentElements);
-  updateStyleHelper(theme, 'color-error-text', documentElements);
-  updateStyleHelper(theme, 'color-expand-collapse-toggle', documentElements);
-  updateStyleHelper(theme, 'color-link', documentElements);
-  updateStyleHelper(theme, 'color-modal-background', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-bridge-version-npm-background',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-bridge-version-npm-text', documentElements);
-  updateStyleHelper(theme, 'color-bridge-version-number', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-primitive-hook-badge-background',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-primitive-hook-badge-text', documentElements);
-  updateStyleHelper(theme, 'color-record-active', documentElements);
-  updateStyleHelper(theme, 'color-record-hover', documentElements);
-  updateStyleHelper(theme, 'color-record-inactive', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar-active', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar-border', documentElements);
-  updateStyleHelper(theme, 'color-resize-bar-dot', documentElements);
-  updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
-  updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
-  updateStyleHelper(theme, 'color-search-match', documentElements);
-  updateStyleHelper(theme, 'color-search-match-current', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-text-color',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-selected-tree-highlight-active',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-selected-tree-highlight-inactive',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-priority-background',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-priority-border',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-user-timing',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-user-timing-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-idle',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-idle-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-render',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-render-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-commit',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-commit-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-layout-effects',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-layout-effects-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-passive-effects',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-passive-effects-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-schedule',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-schedule-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-rejected-event',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-rejected-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-resolved',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-resolved-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-unresolved',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-suspense-unresolved-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-work-border',
-    documentElements,
-  );
-  updateStyleHelper(theme, 'color-scroll-caret', documentElements);
-  updateStyleHelper(theme, 'color-shadow', documentElements);
-  updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
-  updateStyleHelper(theme, 'color-text', documentElements);
-  updateStyleHelper(theme, 'color-text-invalid', documentElements);
-  updateStyleHelper(theme, 'color-text-selected', documentElements);
-  updateStyleHelper(theme, 'color-toggle-background-invalid', documentElements);
-  updateStyleHelper(theme, 'color-toggle-background-on', documentElements);
-  updateStyleHelper(theme, 'color-toggle-background-off', documentElements);
-  updateStyleHelper(theme, 'color-toggle-text', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
-  updateStyleHelper(theme, 'color-warning-background', documentElements);
-  updateStyleHelper(theme, 'color-warning-background-hover', documentElements);
-  updateStyleHelper(theme, 'color-warning-text-color', documentElements);
-  updateStyleHelper(
-    theme,
-    'color-warning-text-color-inverted',
-    documentElements,
-  );
-
-  // Font smoothing varies based on the theme.
-  updateStyleHelper(theme, 'font-smoothing', documentElements);
-
   // Update scrollbar color to match theme.
   // this CSS property is currently only supported in Firefox,
   // but it makes a significant UI improvement in dark mode.
@@ -591,6 +277,12 @@ export function updateThemeVariables(
     // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
     documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
   });
+
+  // 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 we need to also set @reach/tooltip specific styles on the root.
+  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
+  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 }
 
 export {SettingsContext, SettingsContextController};
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 000000000000..8fb93469ad4a
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {useContext, useMemo} from 'react';
+import {SettingsContext} from './Settings/SettingsContext';
+import {THEME_STYLES} from '../../constants';
+
+export default function ThemeProvider({children}: {|children: React$Node|}) {
+  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+
+  const style = useMemo(
+    () => ({
+      width: '100%',
+      height: '100%',
+      ...THEME_STYLES[displayDensity],
+      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
+    }),
+    [theme, browserTheme, displayDensity],
+  );
+
+  return <div style={style}>{children}</div>;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
index 4d7cdde32c95..b95fa6e22c09 100644
--- a/packages/react-devtools-shared/src/devtools/views/portaledContent.js
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -12,6 +12,7 @@ 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, ...};
 
@@ -21,12 +22,19 @@ export default function portaledContent(
   return function PortaledContent({portalContainer, ...rest}: Props) {
     const store = useContext(StoreContext);
 
-    const children = (
+    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>{children}</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
index e35a1c646787..c6c7ffd586e7 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -1,283 +1,25 @@
 :root {
-  /**
-   * IMPORTANT: When new theme variables are added below– also add them to SettingsContext updateThemeVariables()
-   */
 
   /* Light theme */
-  --light-color-attribute-name: #ef6632;
-  --light-color-attribute-name-not-editable: #23272f;
-  --light-color-attribute-name-inverted: rgba(255, 255, 255, 0.7);
-  --light-color-attribute-value: #1a1aa6;
-  --light-color-attribute-value-inverted: #ffffff;
-  --light-color-attribute-editable-value: #1a1aa6;
-  --light-color-background: #ffffff;
-  --light-color-background-hover: rgba(0, 136, 250, 0.1);
-  --light-color-background-inactive: #e5e5e5;
-  --light-color-background-invalid: #fff0f0;
-  --light-color-background-selected: #0088fa;
-  --light-color-button-background: #ffffff;
-  --light-color-button-background-focus: #ededed;
-  --light-color-button: #5f6673;
-  --light-color-button-disabled: #cfd1d5;
-  --light-color-button-active: #0088fa;
-  --light-color-button-focus: #23272f;
-  --light-color-button-hover: #23272f;
-  --light-color-border: #eeeeee;
-  --light-color-commit-did-not-render-fill: #cfd1d5;
-  --light-color-commit-did-not-render-fill-text: #000000;
-  --light-color-commit-did-not-render-pattern: #cfd1d5;
-  --light-color-commit-did-not-render-pattern-text: #333333;
-  --light-color-commit-gradient-0: #37afa9;
-  --light-color-commit-gradient-1: #63b19e;
-  --light-color-commit-gradient-2: #80b393;
-  --light-color-commit-gradient-3: #97b488;
-  --light-color-commit-gradient-4: #abb67d;
-  --light-color-commit-gradient-5: #beb771;
-  --light-color-commit-gradient-6: #cfb965;
-  --light-color-commit-gradient-7: #dfba57;
-  --light-color-commit-gradient-8: #efbb49;
-  --light-color-commit-gradient-9: #febc38;
-  --light-color-commit-gradient-text: #000000;
-  --light-color-component-name: #6a51b2;
-  --light-color-component-name-inverted: #ffffff;
-  --light-color-component-badge-background: rgba(0, 0, 0, 0.1);
-  --light-color-component-badge-background-inverted: rgba(255, 255, 255, 0.25);
-  --light-color-component-badge-count: #777d88;
-  --light-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
-  --light-color-console-error-badge-text: #ffffff;
-  --light-color-console-error-background: #fff0f0;
-  --light-color-console-error-border: #ffd6d6;
-  --light-color-console-error-icon: #eb3941;
-  --light-color-console-error-text: #fe2e31;
-  --light-color-console-warning-badge-text: #000000;
-  --light-color-console-warning-background: #fffbe5;
-  --light-color-console-warning-border: #fff5c1;
-  --light-color-console-warning-icon: #f4bd00;
-  --light-color-console-warning-text: #64460c;
-  --light-color-context-background: rgba(0,0,0,.9);
-  --light-color-context-background-hover: rgba(255, 255, 255, 0.1);
-  --light-color-context-background-selected: #178fb9;
-  --light-color-context-border: #3d424a;
-  --light-color-context-text: #ffffff;
-  --light-color-context-text-selected: #ffffff;
-  --light-color-dim: #777d88;
-  --light-color-dimmer: #cfd1d5;
-  --light-color-dimmest: #eff0f1;
-  --light-color-error-background: hsl(0, 100%, 97%);
-  --light-color-error-border: hsl(0, 100%, 92%);
-  --light-color-error-text: #ff0000;
-  --light-color-expand-collapse-toggle: #777d88;
-  --light-color-link: #0000ff;
-  --light-color-modal-background: rgba(255, 255, 255, 0.75);
-  --light-color-bridge-version-npm-background: #eff0f1;
-  --light-color-bridge-version-npm-text: #000000;
-  --light-color-bridge-version-number: #0088fa;
-  --light-color-primitive-hook-badge-background: #e5e5e5;
-  --light-color-primitive-hook-badge-text: #5f6673;
-  --light-color-record-active: #fc3a4b;
-  --light-color-record-hover: #3578e5;
-  --light-color-record-inactive: #0088fa;
-  --light-color-resize-bar: #eeeeee;
-  --light-color-resize-bar-active: #dcdcdc;
-  --light-color-resize-bar-border: #d1d1d1;
-  --light-color-resize-bar-dot: #333333;
-  --light-color-scheduling-profiler-native-event: #ccc;
-  --light-color-scheduling-profiler-native-event-hover: #aaa;
-  --light-color-scheduling-profiler-priority-background: #f6f6f6;
-  --light-color-scheduling-profiler-priority-border: #eeeeee;
-  --light-color-scheduling-profiler-user-timing: #c9cacd;
-  --light-color-scheduling-profiler-user-timing-hover: #93959a;
-  --light-color-scheduling-profiler-react-idle: #d3e5f6;
-  --light-color-scheduling-profiler-react-idle-hover: #c3d9ef;
-  --light-color-scheduling-profiler-react-render: #9fc3f3;
-  --light-color-scheduling-profiler-react-render-hover: #83afe9;
-  --light-color-scheduling-profiler-react-commit: #c88ff0;
-  --light-color-scheduling-profiler-react-commit-hover: #b281d6;
-  --light-color-scheduling-profiler-react-layout-effects: #b281d6;
-  --light-color-scheduling-profiler-react-layout-effects-hover: #9d71bd;
-  --light-color-scheduling-profiler-react-passive-effects: #b281d6;
-  --light-color-scheduling-profiler-react-passive-effects-hover: #9d71bd;
-  --light-color-scheduling-profiler-react-schedule: #9fc3f3;
-  --light-color-scheduling-profiler-react-schedule-hover: #2683E2;
-  --light-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
-  --light-color-scheduling-profiler-react-suspense-rejected-hover: #ffdf37;
-  --light-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
-  --light-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
-  --light-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
-  --light-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
-  --light-color-scheduling-profiler-text-color: #000000;
-  --light-color-scheduling-profiler-react-work-border: #ffffff;
   --light-color-scroll-thumb: #c2c2c2;
   --light-color-scroll-track: #fafafa;
-  --light-color-search-match: yellow;
-  --light-color-search-match-current: #f7923b;
-  --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
-  --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
-  --light-color-scroll-caret: rgba(150, 150, 150, 0.5);
-  --light-color-tab-selected-border: #0088fa;
-  --light-color-text: #000000;
-  --light-color-text-invalid: #ff0000;
-  --light-color-text-selected: #ffffff;
-  --light-color-toggle-background-invalid: #fc3a4b;
-  --light-color-toggle-background-on: #0088fa;
-  --light-color-toggle-background-off: #cfd1d5;
-  --light-color-toggle-text: #ffffff;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
-  --light-color-warning-background: #fb3655;
-  --light-color-warning-background-hover: #f82042;
-  --light-color-warning-text-color: #ffffff;
-  --light-color-warning-text-color-inverted: #fd4d69;
 
   /* Dark theme */
-  --dark-color-attribute-name: #9d87d2;
-  --dark-color-attribute-name-not-editable: #ededed;
-  --dark-color-attribute-name-inverted: #282828;
-  --dark-color-attribute-value: #cedae0;
-  --dark-color-attribute-value-inverted: #ffffff;
-  --dark-color-attribute-editable-value: yellow;
-  --dark-color-background: #282c34;
-  --dark-color-background-hover: rgba(255, 255, 255, 0.1);
-  --dark-color-background-inactive: #3d424a;
-  --dark-color-background-invalid: #5c0000;
-  --dark-color-background-selected: #178fb9;
-  --dark-color-button-background: #282c34;
-  --dark-color-button-background-focus: #3d424a;
-  --dark-color-button: #afb3b9;
-  --dark-color-button-active: #61dafb;
-  --dark-color-button-disabled: #4f5766;
-  --dark-color-button-focus: #a2e9fc;
-  --dark-color-button-hover: #ededed;
-  --dark-color-border: #3d424a;
-  --dark-color-commit-did-not-render-fill: #777d88;
-  --dark-color-commit-did-not-render-fill-text: #000000;
-  --dark-color-commit-did-not-render-pattern: #666c77;
-  --dark-color-commit-did-not-render-pattern-text: #ffffff;
-  --dark-color-commit-gradient-0: #37afa9;
-  --dark-color-commit-gradient-1: #63b19e;
-  --dark-color-commit-gradient-2: #80b393;
-  --dark-color-commit-gradient-3: #97b488;
-  --dark-color-commit-gradient-4: #abb67d;
-  --dark-color-commit-gradient-5: #beb771;
-  --dark-color-commit-gradient-6: #cfb965;
-  --dark-color-commit-gradient-7: #dfba57;
-  --dark-color-commit-gradient-8: #efbb49;
-  --dark-color-commit-gradient-9: #febc38;
-  --dark-color-commit-gradient-text: #000000;
-  --dark-color-component-name: #61dafb;
-  --dark-color-component-name-inverted: #282828;
-  --dark-color-component-badge-background: rgba(255, 255, 255, 0.25);
-  --dark-color-component-badge-background-inverted: rgba(0, 0, 0, 0.25);
-  --dark-color-component-badge-count: #8f949d;
-  --dark-color-component-badge-count-inverted: rgba(255, 255, 255, 0.7);
-  --dark-color-console-error-badge-text: #000000;
-  --dark-color-console-error-background: #290000;
-  --dark-color-console-error-border: #5c0000;
-  --dark-color-console-error-icon: #eb3941;
-  --dark-color-console-error-text: #fc7f7f;
-  --dark-color-console-warning-badge-text: #000000;
-  --dark-color-console-warning-background: #332b00;
-  --dark-color-console-warning-border: #665500;
-  --dark-color-console-warning-icon: #f4bd00;
-  --dark-color-console-warning-text: #f5f2ed;
-  --dark-color-context-background: rgba(255,255,255,.95);
-  --dark-color-context-background-hover: rgba(0, 136, 250, 0.1);
-  --dark-color-context-background-selected: #0088fa;
-  --dark-color-context-border: #eeeeee;
-  --dark-color-context-text: #000000;
-  --dark-color-context-text-selected: #ffffff;
-  --dark-color-dim: #8f949d;
-  --dark-color-dimmer: #777d88;
-  --dark-color-dimmest: #4f5766;
-  --dark-color-error-background: #200;
-  --dark-color-error-border: #900;
-  --dark-color-error-text: #f55;
-  --dark-color-expand-collapse-toggle: #8f949d;
-  --dark-color-link: #61dafb;
-  --dark-color-modal-background: rgba(0, 0, 0, 0.75);
-  --dark-color-bridge-version-npm-background: rgba(0, 0, 0, 0.25);
-  --dark-color-bridge-version-npm-text: #ffffff;
-  --dark-color-bridge-version-number: yellow;
-  --dark-color-primitive-hook-badge-background: rgba(0, 0, 0, 0.25);
-  --dark-color-primitive-hook-badge-text: rgba(255, 255, 255, 0.7);
-  --dark-color-record-active: #fc3a4b;
-  --dark-color-record-hover: #a2e9fc;
-  --dark-color-record-inactive: #61dafb;
-  --dark-color-resize-bar: #282c34;
-  --dark-color-resize-bar-active: #31363f;
-  --dark-color-resize-bar-border: #3d424a;
-  --dark-color-resize-bar-dot: #cfd1d5;
-  --dark-color-scheduling-profiler-native-event: #b2b2b2;
-  --dark-color-scheduling-profiler-native-event-hover: #949494;
-  --dark-color-scheduling-profiler-priority-background: #1d2129;
-  --dark-color-scheduling-profiler-priority-border: #282c34;
-  --dark-color-scheduling-profiler-user-timing: #c9cacd;
-  --dark-color-scheduling-profiler-user-timing-hover: #93959a;
-  --dark-color-scheduling-profiler-react-idle: #3d485b;
-  --dark-color-scheduling-profiler-react-idle-hover: #465269;
-  --dark-color-scheduling-profiler-react-render: #2683E2;
-  --dark-color-scheduling-profiler-react-render-hover: #1a76d4;
-  --dark-color-scheduling-profiler-react-commit: #731fad;
-  --dark-color-scheduling-profiler-react-commit-hover: #611b94;
-  --dark-color-scheduling-profiler-react-layout-effects: #611b94;
-  --dark-color-scheduling-profiler-react-layout-effects-hover: #51167a;
-  --dark-color-scheduling-profiler-react-passive-effects: #611b94;
-  --dark-color-scheduling-profiler-react-passive-effects-hover: #51167a;
-  --dark-color-scheduling-profiler-react-schedule: #2683E2;
-  --dark-color-scheduling-profiler-react-schedule-hover: #1a76d4;
-  --dark-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
-  --dark-color-scheduling-profiler-react-suspense-rejected-hover: #e4c00f;
-  --dark-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
-  --dark-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
-  --dark-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
-  --dark-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
-  --dark-color-scheduling-profiler-text-color: #000000;
-  --dark-color-scheduling-profiler-react-work-border: #ffffff;
   --dark-color-scroll-thumb: #afb3b9;
   --dark-color-scroll-track: #313640;
-  --dark-color-search-match: yellow;
-  --dark-color-search-match-current: #f7923b;
-  --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
-  --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
-  --dark-color-scroll-caret: #4f5766;
-  --dark-color-shadow: rgba(0, 0, 0, 0.5);
-  --dark-color-tab-selected-border: #178fb9;
-  --dark-color-text: #ffffff;
-  --dark-color-text-invalid: #ff8080;
-  --dark-color-text-selected: #ffffff;
-  --dark-color-toggle-background-invalid: #fc3a4b;
-  --dark-color-toggle-background-on: #178fb9;
-  --dark-color-toggle-background-off: #777d88;
-  --dark-color-toggle-text: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
   --dark-color-tooltip-text: #000000;
-  --dark-color-warning-background: #ee1638;
-  --dark-color-warning-background-hover: #da1030;
-  --dark-color-warning-text-color: #ffffff;
-  --dark-color-warning-text-color-inverted: #ee1638;
 
   /* Font smoothing */
-  --light-font-smoothing: auto;
-  --dark-font-smoothing: antialiased;
   --font-smoothing: auto;
 
   /* Compact density */
-  --compact-font-size-monospace-small: 9px;
-  --compact-font-size-monospace-normal: 11px;
-  --compact-font-size-monospace-large: 15px;
-  --compact-font-size-sans-small: 10px;
-  --compact-font-size-sans-normal: 12px;
-  --compact-font-size-sans-large: 14px;
   --compact-line-height-data: 18px;
   --compact-root-font-size: 16px;
 
   /* Comfortable density */
-  --comfortable-font-size-monospace-small: 10px;
-  --comfortable-font-size-monospace-normal: 13px;
-  --comfortable-font-size-monospace-large: 17px;
-  --comfortable-font-size-sans-small: 12px;
-  --comfortable-font-size-sans-normal: 14px;
-  --comfortable-font-size-sans-large: 16px;
   --comfortable-line-height-data: 22px;
   --comfortable-root-font-size: 20px;
 
@@ -286,4 +28,4 @@
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
+}
\ No newline at end of file

From 42251331d8f7a997a018d75370f5216bb7552819 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 2 Aug 2021 14:30:43 -0400
Subject: [PATCH 0738/1603] DevTools: Scheduling profiler (#22006)

---
 .../src/CanvasPage.js                         | 31 +++++++++++--------
 .../src/content-views/NativeEventsView.js     |  6 ++--
 .../src/content-views/ReactMeasuresView.js    |  5 +--
 .../src/content-views/SuspenseEventsView.js   |  4 +--
 .../src/content-views/UserTimingMarksView.js  |  1 -
 .../src/view-base/ResizableView.js            | 27 +++++++++++++---
 .../src/view-base/View.js                     |  4 +--
 .../src/view-base/geometry.js                 |  8 ++++-
 .../react-devtools-shared/src/constants.js    | 24 +++++++++-----
 .../src/devtools/ContextMenu/ContextMenu.js   | 14 ++++++---
 .../src/devtools/views/DevTools.js            |  5 ++-
 .../src/devtools/views/portaledContent.js     | 10 +++++-
 .../src/devtools/views/root.css               |  5 +++
 13 files changed, 100 insertions(+), 44 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index b35628a705d0..05700d6431d0 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -230,18 +230,21 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
     schedulingEventsViewRef.current = schedulingEventsView;
     const schedulingEventsViewWrapper = createViewHelper(schedulingEventsView);
 
-    const suspenseEventsView = new SuspenseEventsView(
-      surface,
-      defaultFrame,
-      data,
-    );
-    suspenseEventsViewRef.current = suspenseEventsView;
-    const suspenseEventsViewWrapper = createViewHelper(
-      suspenseEventsView,
-      'suspense',
-      true,
-      true,
-    );
+    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,
@@ -286,7 +289,9 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
     }
     rootView.addSubview(nativeEventsViewWrapper);
     rootView.addSubview(schedulingEventsViewWrapper);
-    rootView.addSubview(suspenseEventsViewWrapper);
+    if (suspenseEventsViewWrapper !== null) {
+      rootView.addSubview(suspenseEventsViewWrapper);
+    }
     rootView.addSubview(reactMeasuresViewWrapper);
     rootView.addSubview(flamechartViewWrapper);
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
index 98e388c52a81..34424e7b5b81 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -10,9 +10,9 @@
 import type {NativeEvent, ReactProfilerData} from '../types';
 import type {
   Interaction,
+  IntrinsicSize,
   MouseMoveInteraction,
   Rect,
-  Size,
   ViewRefs,
 } from '../view-base';
 
@@ -38,7 +38,7 @@ const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
 export class NativeEventsView extends View {
   _depthToNativeEvent: Map<number, NativeEvent[]>;
   _hoveredEvent: NativeEvent | null = null;
-  _intrinsicSize: Size;
+  _intrinsicSize: IntrinsicSize;
   _maxDepth: number = 0;
   _profilerData: ReactProfilerData;
 
@@ -73,6 +73,7 @@ export class NativeEventsView extends View {
     this._intrinsicSize = {
       width: duration,
       height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
+      hideScrollBarIfLessThanHeight: ROW_WITH_BORDER_HEIGHT,
     };
   }
 
@@ -239,7 +240,6 @@ export class NativeEventsView extends View {
           hoverTimestamp <= timestamp + duration
         ) {
           viewRefs.hoveredView = this;
-
           onHover(nativeEvent);
           return;
         }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index 96790b2a282e..f8e4cb99b94c 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -10,9 +10,9 @@
 import type {ReactLane, ReactMeasure, ReactProfilerData} from '../types';
 import type {
   Interaction,
+  IntrinsicSize,
   MouseMoveInteraction,
   Rect,
-  SizeWithMaxHeight,
   ViewRefs,
 } from '../view-base';
 
@@ -45,7 +45,7 @@ function getMeasuresForLane(
 
 export class ReactMeasuresView extends View {
   _profilerData: ReactProfilerData;
-  _intrinsicSize: SizeWithMaxHeight;
+  _intrinsicSize: IntrinsicSize;
 
   _lanesToRender: ReactLane[];
   _laneToMeasures: Map<ReactLane, ReactMeasure[]>;
@@ -78,6 +78,7 @@ export class ReactMeasuresView extends View {
     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,
     };
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
index 3d85ffd4e2dc..5b0d0f2d51c3 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
@@ -10,9 +10,9 @@
 import type {SuspenseEvent, ReactProfilerData} from '../types';
 import type {
   Interaction,
+  IntrinsicSize,
   MouseMoveInteraction,
   Rect,
-  SizeWithMaxHeight,
   ViewRefs,
 } from '../view-base';
 
@@ -45,7 +45,7 @@ const MAX_ROWS_TO_SHOW_INITIALLY = 3;
 export class SuspenseEventsView extends View {
   _depthToSuspenseEvent: Map<number, SuspenseEvent[]>;
   _hoveredEvent: SuspenseEvent | null = null;
-  _intrinsicSize: SizeWithMaxHeight;
+  _intrinsicSize: IntrinsicSize;
   _maxDepth: number = 0;
   _profilerData: ReactProfilerData;
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
index 2249d3841ad7..36c24091ac0a 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
@@ -224,7 +224,6 @@ export class UserTimingMarksView extends View {
         timestamp - timestampAllowance <= hoverTimestamp &&
         hoverTimestamp <= timestamp + timestampAllowance
       ) {
-        this.currentCursor = 'context-menu';
         viewRefs.hoveredView = this;
         onHover(mark);
         return;
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
index 54a3b05c1a9c..80527a193cb5 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
@@ -255,12 +255,21 @@ export class ResizableView extends View {
   }
 
   desiredSize() {
-    const resizeBarDesiredSize = this._resizeBar.desiredSize();
+    const subviewDesiredSize = this._subview.desiredSize();
 
-    return {
-      width: this.frame.size.width,
-      height: this._layoutState.barOffsetY + resizeBarDesiredSize.height,
-    };
+    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() {
@@ -270,6 +279,14 @@ export class ResizableView extends View {
     super.layoutSubviews();
   }
 
+  _shouldRenderResizeBar() {
+    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;
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
index a43a733fd476..206721cdd39c 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
@@ -8,7 +8,7 @@
  */
 
 import type {Interaction} from './useCanvasInteraction';
-import type {Rect, Size, SizeWithMaxHeight} from './geometry';
+import type {IntrinsicSize, Rect, Size} from './geometry';
 import type {Layouter} from './layouter';
 import type {ViewRefs} from './Surface';
 
@@ -140,7 +140,7 @@ export class View {
    *
    * Can be overridden by subclasses.
    */
-  desiredSize(): Size | SizeWithMaxHeight {
+  desiredSize(): Size | IntrinsicSize {
     if (this._needsDisplay) {
       this.layoutSubviews();
     }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
index 49c0d3981e72..054d8c3e75fe 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
@@ -9,8 +9,14 @@
 
 export type Point = $ReadOnly<{|x: number, y: number|}>;
 export type Size = $ReadOnly<{|width: number, height: number|}>;
-export type SizeWithMaxHeight = {|
+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|}>;
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 1e062b23a641..a4b742a3fb64 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -165,8 +165,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
     '--color-scheduling-profiler-text-color': '#000000',
     '--color-scheduling-profiler-react-work-border': '#ffffff',
-    '--color-scroll-thumb': '#c2c2c2',
-    '--color-scroll-track': '#fafafa',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
@@ -180,12 +178,18 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-toggle-background-on': '#0088fa',
     '--color-toggle-background-off': '#cfd1d5',
     '--color-toggle-text': '#ffffff',
-    '--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
-    '--color-tooltip-text': '#ffffff',
     '--color-warning-background': '#fb3655',
     '--color-warning-background-hover': '#f82042',
     '--color-warning-text-color': '#ffffff',
     '--color-warning-text-color-inverted': '#fd4d69',
+
+    // 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',
   },
   dark: {
     '--color-attribute-name': '#9d87d2',
@@ -291,8 +295,6 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
     '--color-scheduling-profiler-text-color': '#000000',
     '--color-scheduling-profiler-react-work-border': '#ffffff',
-    '--color-scroll-thumb': '#afb3b9',
-    '--color-scroll-track': '#313640',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
@@ -307,12 +309,18 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-toggle-background-on': '#178fb9',
     '--color-toggle-background-off': '#777d88',
     '--color-toggle-text': '#ffffff',
-    '--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
-    '--color-tooltip-text': '#000000',
     '--color-warning-background': '#ee1638',
     '--color-warning-background-hover': '#da1030',
     '--color-warning-text-color': '#ffffff',
     '--color-warning-text-color-inverted': '#ee1638',
+
+    // 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',
   },
   compact: {
     '--font-size-monospace-small': '9px',
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
index 466c4fdad6aa..90be1883612a 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -68,11 +68,15 @@ export default function ContextMenu({children, id}: Props) {
     const element = bodyAccessorRef.current;
     if (element !== null) {
       const ownerDocument = element.ownerDocument;
-      containerRef.current = ownerDocument.createElement('div');
-      ownerDocument.body.appendChild(containerRef.current);
-      return () => {
-        ownerDocument.body.removeChild(containerRef.current);
-      };
+      containerRef.current = ownerDocument.querySelector(
+        '[data-react-devtools-portal-root]',
+      );
+
+      if (containerRef.current == null) {
+        console.warn(
+          'DevTools tooltip root node not found; context menus will be disabled.',
+        );
+      }
     }
   }, []);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 190fa7917a57..8f1ccc554037 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -222,7 +222,10 @@ export default function DevTools({
                     <ProfilerContextController>
                       <SchedulingProfilerContextController>
                         <ThemeProvider>
-                          <div className={styles.DevTools} ref={devToolsRef}>
+                          <div
+                            className={styles.DevTools}
+                            ref={devToolsRef}
+                            data-react-devtools-portal-root={true}>
                             {showTabBar && (
                               <div className={styles.TabBar}>
                                 <ReactLogo />
diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
index b95fa6e22c09..1a59ff59d212 100644
--- a/packages/react-devtools-shared/src/devtools/views/portaledContent.js
+++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js
@@ -32,7 +32,15 @@ export default function portaledContent(
       // 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>{children}</ThemeProvider>;
+      children = (
+        <ThemeProvider>
+          <div
+            data-react-devtools-portal-root={true}
+            style={{width: '100vw', height: '100vh'}}>
+            {children}
+          </div>
+        </ThemeProvider>
+      );
     }
 
     return portalContainer != null
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index c6c7ffd586e7..9bb749ff2370 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -1,4 +1,9 @@
 :root {
+  /**
+   * The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants'
+   * They are repeated here 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).
+   */
 
   /* Light theme */
   --light-color-scroll-thumb: #c2c2c2;

From 3a1dc3ec8543cbfaf57f5d46d1db070d0555015b Mon Sep 17 00:00:00 2001
From: Kevin Chavez <mr.kev@me.com>
Date: Tue, 3 Aug 2021 07:55:15 -0500
Subject: [PATCH 0739/1603] Switch on enableProfilerChangedHookIndices flag for
 OSS devtools builds (#22011)

---
 .../src/config/DevToolsFeatureFlags.extension-oss.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index 4d1b1472bba6..f3457dae71d0 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -13,7 +13,7 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-export const enableProfilerChangedHookIndices = false;
+export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = false;
 
 /************************************************************************

From b54f36f2b6eba4ae722bea56d4081a920fc9ad74 Mon Sep 17 00:00:00 2001
From: Vyacheslav 'SLEL' Solomin <slel64222@gmail.com>
Date: Tue, 3 Aug 2021 18:50:00 +0300
Subject: [PATCH 0740/1603] [DevTools] Fix: highlight updates with memoized
 components (#22008)

---
 packages/react-devtools-shared/src/backend/renderer.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index ee772fda860a..e1772fdf47cb 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2179,7 +2179,9 @@ export function attach(
         if (
           elementType === ElementTypeFunction ||
           elementType === ElementTypeClass ||
-          elementType === ElementTypeContext
+          elementType === ElementTypeContext ||
+          elementType === ElementTypeMemo ||
+          elementType === ElementTypeForwardRef
         ) {
           // Otherwise if this is a traced ancestor, flag for the nearest host descendant(s).
           traceNearestHostComponentUpdate = didFiberRender(

From e3049bb850d8d6395f67d4171870a686e08c3dbd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 3 Aug 2021 13:03:29 -0400
Subject: [PATCH 0741/1603] DevTools scheduling profiler: Add React component
 measures (#22013)

---
 .../src/CanvasPage.js                         |  53 +++++
 .../src/EventTooltip.js                       |  43 +++-
 .../src/SchedulingProfilerContext.js          |   7 +
 .../content-views/ComponentMeasuresView.js    | 222 ++++++++++++++++++
 .../src/content-views/FlamechartView.js       |  26 +-
 .../src/content-views/NativeEventsView.js     |   2 +-
 .../src/content-views/SuspenseEventsView.js   |   2 +-
 .../src/content-views/constants.js            |  12 +
 .../src/content-views/index.js                |   1 +
 .../src/content-views/utils/text.js           |   7 +-
 .../__tests__/preprocessData-test.internal.js |  45 ++--
 .../src/import-worker/preprocessData.js       |  32 ++-
 .../src/types.js                              |   9 +
 .../src/view-base/ResizableView.js            |   1 -
 .../react-devtools-shared/src/constants.js    |   4 +-
 .../Profiler/ClearProfilingDataButton.js      |  27 ++-
 .../src/devtools/views/Profiler/Profiler.js   |  12 +-
 .../views/Profiler/ReloadAndProfileButton.js  |   8 +-
 .../src/ReactFiberBeginWork.new.js            |  37 ++-
 .../src/ReactFiberBeginWork.old.js            |  37 ++-
 .../src/ReactFiberThrow.new.js                |   6 +-
 .../src/ReactFiberThrow.old.js                |   6 +-
 .../src/SchedulingProfiler.js                 |  17 ++
 .../SchedulingProfiler-test.internal.js       |  26 ++
 24 files changed, 603 insertions(+), 39 deletions(-)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 05700d6431d0..e699959013b7 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -44,6 +44,7 @@ import {
   zeroPoint,
 } from './view-base';
 import {
+  ComponentMeasuresView,
   FlamechartView,
   NativeEventsView,
   ReactMeasuresView,
@@ -132,6 +133,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
   const nativeEventsViewRef = useRef(null);
   const schedulingEventsViewRef = useRef(null);
   const suspenseEventsViewRef = useRef(null);
+  const componentMeasuresViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
   const syncedHorizontalPanAndZoomViewsRef = useRef<HorizontalPanAndZoomView[]>(
@@ -259,6 +261,17 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       true,
     );
 
+    let componentMeasuresViewWrapper = null;
+    if (data.componentMeasures.length > 0) {
+      const componentMeasuresView = new ComponentMeasuresView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      componentMeasuresViewRef.current = componentMeasuresView;
+      componentMeasuresViewWrapper = createViewHelper(componentMeasuresView);
+    }
+
     const flamechartView = new FlamechartView(
       surface,
       defaultFrame,
@@ -293,6 +306,9 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       rootView.addSubview(suspenseEventsViewWrapper);
     }
     rootView.addSubview(reactMeasuresViewWrapper);
+    if (componentMeasuresViewWrapper !== null) {
+      rootView.addSubview(componentMeasuresViewWrapper);
+    }
     rootView.addSubview(flamechartViewWrapper);
 
     // If subviews are less than the available height, fill remaining height with a solid color.
@@ -323,6 +339,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           if (prevHoverEvent === null) {
             return prevHoverEvent;
           } else if (
+            prevHoverEvent.componentMeasure !== null ||
             prevHoverEvent.flamechartStackFrame !== null ||
             prevHoverEvent.measure !== null ||
             prevHoverEvent.nativeEvent !== null ||
@@ -331,6 +348,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
             prevHoverEvent.userTimingMark !== null
           ) {
             return {
+              componentMeasure: null,
               data: prevHoverEvent.data,
               flamechartStackFrame: null,
               measure: null,
@@ -378,6 +396,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       userTimingMarksView.onHover = userTimingMark => {
         if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
           setHoveredEvent({
+            componentMeasure: null,
             data,
             flamechartStackFrame: null,
             measure: null,
@@ -395,6 +414,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       nativeEventsView.onHover = nativeEvent => {
         if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
           setHoveredEvent({
+            componentMeasure: null,
             data,
             flamechartStackFrame: null,
             measure: null,
@@ -412,6 +432,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       schedulingEventsView.onHover = schedulingEvent => {
         if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {
           setHoveredEvent({
+            componentMeasure: null,
             data,
             flamechartStackFrame: null,
             measure: null,
@@ -429,6 +450,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       suspenseEventsView.onHover = suspenseEvent => {
         if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {
           setHoveredEvent({
+            componentMeasure: null,
             data,
             flamechartStackFrame: null,
             measure: null,
@@ -446,6 +468,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       reactMeasuresView.onHover = measure => {
         if (!hoveredEvent || hoveredEvent.measure !== measure) {
           setHoveredEvent({
+            componentMeasure: null,
             data,
             flamechartStackFrame: null,
             measure,
@@ -458,6 +481,27 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       };
     }
 
+    const {current: componentMeasuresView} = componentMeasuresViewRef;
+    if (componentMeasuresView) {
+      componentMeasuresView.onHover = componentMeasure => {
+        if (
+          !hoveredEvent ||
+          hoveredEvent.componentMeasure !== componentMeasure
+        ) {
+          setHoveredEvent({
+            componentMeasure,
+            data,
+            flamechartStackFrame: null,
+            measure: null,
+            nativeEvent: null,
+            schedulingEvent: null,
+            suspenseEvent: null,
+            userTimingMark: null,
+          });
+        }
+      };
+    }
+
     const {current: flamechartView} = flamechartViewRef;
     if (flamechartView) {
       flamechartView.setOnHover(flamechartStackFrame => {
@@ -466,6 +510,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           hoveredEvent.flamechartStackFrame !== flamechartStackFrame
         ) {
           setHoveredEvent({
+            componentMeasure: null,
             data,
             flamechartStackFrame,
             measure: null,
@@ -540,6 +585,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
             return null;
           }
           const {
+            componentMeasure,
             flamechartStackFrame,
             measure,
             schedulingEvent,
@@ -547,6 +593,13 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           } = contextData.hoveredEvent;
           return (
             <Fragment>
+              {componentMeasure !== null && (
+                <ContextMenuItem
+                  onClick={() => copy(componentMeasure.componentName)}
+                  title="Copy component name">
+                  Copy component name
+                </ContextMenuItem>
+              )}
               {schedulingEvent !== null && (
                 <ContextMenuItem
                   onClick={() => copy(schedulingEvent.componentName)}
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index d6019cb25443..80935bd69be6 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -11,6 +11,7 @@ import type {Point} from './view-base';
 import type {
   FlamechartStackFrame,
   NativeEvent,
+  ReactComponentMeasure,
   ReactHoverContextInfo,
   ReactMeasure,
   ReactProfilerData,
@@ -81,6 +82,7 @@ export default function EventTooltip({
   }
 
   const {
+    componentMeasure,
     flamechartStackFrame,
     measure,
     nativeEvent,
@@ -89,7 +91,14 @@ export default function EventTooltip({
     userTimingMark,
   } = hoveredEvent;
 
-  if (nativeEvent !== null) {
+  if (componentMeasure !== null) {
+    return (
+      <TooltipReactComponentMeasure
+        componentMeasure={componentMeasure}
+        tooltipRef={tooltipRef}
+      />
+    );
+  } else if (nativeEvent !== null) {
     return (
       <TooltipNativeEvent nativeEvent={nativeEvent} tooltipRef={tooltipRef} />
     );
@@ -130,6 +139,38 @@ export default function EventTooltip({
   return null;
 }
 
+const TooltipReactComponentMeasure = ({
+  componentMeasure,
+  tooltipRef,
+}: {
+  componentMeasure: ReactComponentMeasure,
+  tooltipRef: Return<typeof useRef>,
+}) => {
+  const {componentName, duration, timestamp, warning} = componentMeasure;
+
+  const label = `${componentName} rendered`;
+
+  return (
+    <div className={styles.Tooltip} ref={tooltipRef}>
+      <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>
+      )}
+    </div>
+  );
+};
+
 const TooltipFlamechartNode = ({
   stackFrame,
   tooltipRef,
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
index e6638ce728d8..dc95fc31a9da 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
@@ -14,6 +14,7 @@ import createDataResourceFromImportedFile from './createDataResourceFromImported
 import type {DataResource} from './createDataResourceFromImportedFile';
 
 export type Context = {|
+  clearSchedulingProfilerData: () => void,
   importSchedulingProfilerData: (file: File) => void,
   schedulingProfilerData: DataResource | null,
 |};
@@ -33,6 +34,10 @@ function SchedulingProfilerContextController({children}: Props) {
     setSchedulingProfilerData,
   ] = useState<DataResource | null>(null);
 
+  const clearSchedulingProfilerData = useCallback(() => {
+    setSchedulingProfilerData(null);
+  }, []);
+
   const importSchedulingProfilerData = useCallback((file: File) => {
     setSchedulingProfilerData(createDataResourceFromImportedFile(file));
   }, []);
@@ -41,11 +46,13 @@ function SchedulingProfilerContextController({children}: Props) {
 
   const value = useMemo(
     () => ({
+      clearSchedulingProfilerData,
       importSchedulingProfilerData,
       schedulingProfilerData,
       // TODO (scheduling profiler)
     }),
     [
+      clearSchedulingProfilerData,
       importSchedulingProfilerData,
       schedulingProfilerData,
       // TODO (scheduling profiler)
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
new file mode 100644
index 000000000000..4d9ecfa5d17e
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
@@ -0,0 +1,222 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactComponentMeasure, ReactProfilerData} 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 ComponentMeasuresView extends View {
+  _hoveredComponentMeasure: ReactComponentMeasure | null = null;
+  _intrinsicSize: IntrinsicSize;
+  _profilerData: ReactProfilerData;
+
+  onHover: ((event: ReactComponentMeasure | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+    super(surface, frame);
+
+    this._profilerData = profilerData;
+
+    this._intrinsicSize = {
+      width: profilerData.duration,
+      height: ROW_WITH_BORDER_HEIGHT,
+    };
+  }
+
+  desiredSize() {
+    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, 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
+    }
+
+    const drawableRect = intersectionOfRects(componentMeasureRect, rect);
+    context.beginPath();
+    if (warning !== null) {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.WARNING_BACKGROUND_HOVER
+        : COLORS.WARNING_BACKGROUND;
+    } else {
+      context.fillStyle = showHoverHighlight
+        ? COLORS.REACT_COMPONENT_MEASURE_HOVER
+        : COLORS.REACT_COMPONENT_MEASURE;
+    }
+    context.fillRect(
+      drawableRect.origin.x,
+      drawableRect.origin.y,
+      drawableRect.size.width,
+      drawableRect.size.height,
+    );
+
+    const label = `${componentName} rendered - ${formatDuration(duration)}`;
+
+    drawText(label, context, componentMeasureRect, drawableRect);
+
+    return true;
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    const {
+      frame,
+      _profilerData: {componentMeasures},
+      _hoveredComponentMeasure,
+      visibleArea,
+    } = this;
+
+    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,
+        'center',
+        COLORS.TEXT_DIM_COLOR,
+      );
+    }
+
+    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-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index 57cd8ae1f30c..86f411a5b6e2 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -128,7 +128,7 @@ class FlamechartStackLayerView extends View {
       visibleArea,
     } = this;
 
-    context.fillStyle = COLORS.BACKGROUND;
+    context.fillStyle = COLORS.PRIORITY_BACKGROUND;
     context.fillRect(
       visibleArea.origin.x,
       visibleArea.origin.y,
@@ -172,7 +172,29 @@ class FlamechartStackLayerView extends View {
         drawableRect.size.height,
       );
 
-      drawText(name, context, nodeRect, drawableRect, width);
+      drawText(name, context, nodeRect, drawableRect);
+    }
+
+    // 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,
+      );
     }
   }
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
index 34424e7b5b81..29e2535de6ab 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
@@ -143,7 +143,7 @@ export class NativeEventsView extends View {
 
     const label = `${type} - ${formatDuration(duration)}`;
 
-    drawText(label, context, eventRect, drawableRect, width);
+    drawText(label, context, eventRect, drawableRect);
   }
 
   draw(context: CanvasRenderingContext2D) {
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
index 5b0d0f2d51c3..db234e4cebec 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
@@ -231,7 +231,7 @@ export class SuspenseEventsView extends View {
         label += ` - ${formatDuration(duration)}`;
       }
 
-      drawText(label, context, eventRect, drawableRect, width);
+      drawText(label, context, eventRect, drawableRect);
     }
   }
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 214cf26d7bfa..ec8fec8d1e46 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -50,6 +50,8 @@ export let COLORS = {
   PRIORITY_LABEL: '',
   USER_TIMING: '',
   USER_TIMING_HOVER: '',
+  REACT_COMPONENT_MEASURE: '',
+  REACT_COMPONENT_MEASURE_HOVER: '',
   REACT_IDLE: '',
   REACT_IDLE_HOVER: '',
   REACT_RENDER: '',
@@ -75,6 +77,7 @@ export let COLORS = {
   REACT_WORK_BORDER: '',
   SCROLL_CARET: '',
   TEXT_COLOR: '',
+  TEXT_DIM_COLOR: '',
   TIME_MARKER_LABEL: '',
   WARNING_BACKGROUND: '',
   WARNING_BACKGROUND_HOVER: '',
@@ -111,6 +114,12 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     USER_TIMING_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-user-timing-hover',
     ),
+    REACT_COMPONENT_MEASURE: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-render',
+    ),
+    REACT_COMPONENT_MEASURE_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-render-hover',
+    ),
     REACT_IDLE: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-idle',
     ),
@@ -182,6 +191,9 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     TEXT_COLOR: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-text-color',
     ),
+    TEXT_DIM_COLOR: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-text-dim-color',
+    ),
     TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
     WARNING_BACKGROUND: computedStyle.getPropertyValue(
       '--color-warning-background',
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
index 588f3e5d7bd9..fc1f4eabd422 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+export * from './ComponentMeasuresView';
 export * from './FlamechartView';
 export * from './NativeEventsView';
 export * from './ReactMeasuresView';
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
index da14733bce62..229b9f50f8dc 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
@@ -41,11 +41,10 @@ export function drawText(
   context: CanvasRenderingContext2D,
   fullRect: Rect,
   drawableRect: Rect,
-  availableWidth: number,
   textAlign: 'left' | 'center' = 'left',
   fillStyle: string = COLORS.TEXT_COLOR,
 ): void {
-  if (availableWidth > TEXT_PADDING * 2) {
+  if (fullRect.size.width > TEXT_PADDING * 2) {
     context.textAlign = textAlign;
     context.textBaseline = 'middle';
     context.font = `${FONT_SIZE}px sans-serif`;
@@ -55,7 +54,7 @@ export function drawText(
     const trimmedName = trimText(
       context,
       text,
-      availableWidth - TEXT_PADDING * 2 + (x < 0 ? x : 0),
+      fullRect.size.width - TEXT_PADDING * 2 + (x < 0 ? x : 0),
     );
 
     if (trimmedName !== null) {
@@ -81,7 +80,7 @@ export function drawText(
 
       let textX;
       if (textAlign === 'center') {
-        textX = x + availableWidth / 2 + TEXT_PADDING - (x < 0 ? x : 0);
+        textX = x + fullRect.size.width / 2 + TEXT_PADDING - (x < 0 ? x : 0);
       } else {
         textX = x + TEXT_PADDING - (x < 0 ? x : 0);
       }
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index bb10bca4d855..f47200c6f0e2 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -203,6 +203,7 @@ describe(preprocessData, () => {
     });
 
     expect(preprocessData([cpuProfilerSample, randomSample])).toStrictEqual({
+      componentMeasures: [],
       duration: 0.002,
       flamechart: [],
       measures: [],
@@ -259,6 +260,7 @@ describe(preprocessData, () => {
         }),
       ]),
     ).toStrictEqual({
+      componentMeasures: [],
       duration: 0.008,
       flamechart: [],
       measures: [
@@ -323,6 +325,7 @@ describe(preprocessData, () => {
 
     const userTimingData = createUserTimingData(clearedMarks);
     expect(preprocessData(userTimingData)).toStrictEqual({
+      componentMeasures: [],
       duration: 0.011,
       flamechart: [],
       measures: [
@@ -405,13 +408,27 @@ describe(preprocessData, () => {
 
     const userTimingData = createUserTimingData(clearedMarks);
     expect(preprocessData(userTimingData)).toStrictEqual({
-      duration: 0.022,
+      componentMeasures: [
+        {
+          componentName: 'App',
+          duration: 0.001,
+          timestamp: 0.007,
+          warning: null,
+        },
+        {
+          componentName: 'App',
+          duration: 0.0010000000000000009,
+          timestamp: 0.018,
+          warning: null,
+        },
+      ],
+      duration: 0.026,
       flamechart: [],
       measures: [
         {
           batchUID: 0,
           depth: 0,
-          duration: 0.004999999999999999,
+          duration: 0.006999999999999999,
           laneLabels: ['Default'],
           lanes: [4],
           timestamp: 0.006,
@@ -420,7 +437,7 @@ describe(preprocessData, () => {
         {
           batchUID: 0,
           depth: 0,
-          duration: 0.001,
+          duration: 0.002999999999999999,
           laneLabels: ['Default'],
           lanes: [4],
           timestamp: 0.006,
@@ -432,7 +449,7 @@ describe(preprocessData, () => {
           duration: 0.002999999999999999,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.008,
+          timestamp: 0.01,
           type: 'commit',
         },
         {
@@ -441,7 +458,7 @@ describe(preprocessData, () => {
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.009,
+          timestamp: 0.011,
           type: 'layout-effects',
         },
         {
@@ -450,25 +467,25 @@ describe(preprocessData, () => {
           duration: 0.002,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.012,
+          timestamp: 0.014,
           type: 'passive-effects',
         },
         {
           batchUID: 1,
           depth: 0,
-          duration: 0.005000000000000001,
+          duration: 0.006999999999999999,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.015,
+          timestamp: 0.017,
           type: 'render-idle',
         },
         {
           batchUID: 1,
           depth: 0,
-          duration: 0.0010000000000000009,
+          duration: 0.002999999999999999,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.015,
+          timestamp: 0.017,
           type: 'render',
         },
         {
@@ -477,7 +494,7 @@ describe(preprocessData, () => {
           duration: 0.002999999999999999,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.017,
+          timestamp: 0.021,
           type: 'commit',
         },
         {
@@ -486,7 +503,7 @@ describe(preprocessData, () => {
           duration: 0.0010000000000000009,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.018,
+          timestamp: 0.022,
           type: 'layout-effects',
         },
         {
@@ -495,7 +512,7 @@ describe(preprocessData, () => {
           duration: 0.0009999999999999974,
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.021,
+          timestamp: 0.025,
           type: 'passive-effects',
         },
       ],
@@ -522,7 +539,7 @@ describe(preprocessData, () => {
           componentName: 'App',
           laneLabels: ['Default'],
           lanes: [4],
-          timestamp: 0.013,
+          timestamp: 0.015,
           type: 'schedule-state-update',
           warning: null,
         },
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index a365be120897..d3d47e111bca 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -18,6 +18,7 @@ import type {
   Flamechart,
   NativeEvent,
   ReactLane,
+  ReactComponentMeasure,
   ReactMeasureType,
   ReactProfilerData,
   SuspenseEvent,
@@ -36,6 +37,7 @@ type MeasureStackElement = {|
 
 type ProcessorState = {|
   batchUID: BatchUID,
+  currentReactComponentMeasure: ReactComponentMeasure | null,
   measureStack: MeasureStackElement[],
   nativeEventStack: NativeEvent[],
   nextRenderShouldGenerateNewBatchID: boolean,
@@ -240,8 +242,32 @@ function processTimelineEvent(
     case 'blink.user_timing':
       const startTime = (ts - currentProfilerData.startTime) / 1000;
 
-      // React Events - schedule
-      if (name.startsWith('--schedule-render-')) {
+      if (name.startsWith('--component-render-start-')) {
+        const [componentName] = name.substr(25).split('-');
+
+        if (state.currentReactComponentMeasure !== null) {
+          console.error(
+            'Render started while another render in progress:',
+            state.currentReactComponentMeasure,
+          );
+        }
+
+        state.currentReactComponentMeasure = {
+          componentName,
+          timestamp: startTime,
+          duration: 0,
+          warning: null,
+        };
+      } else if (name === '--component-render-stop') {
+        if (state.currentReactComponentMeasure !== null) {
+          const componentMeasure = state.currentReactComponentMeasure;
+          componentMeasure.duration = startTime - componentMeasure.timestamp;
+
+          state.currentReactComponentMeasure = null;
+
+          currentProfilerData.componentMeasures.push(componentMeasure);
+        }
+      } else if (name.startsWith('--schedule-render-')) {
         const [laneBitmaskString, laneLabels] = name.substr(18).split('-');
         currentProfilerData.schedulingEvents.push({
           type: 'schedule-render',
@@ -581,6 +607,7 @@ export default function preprocessData(
   const flamechart = preprocessFlamechart(timeline);
 
   const profilerData: ReactProfilerData = {
+    componentMeasures: [],
     duration: 0,
     flamechart,
     measures: [],
@@ -619,6 +646,7 @@ export default function preprocessData(
 
   const state: ProcessorState = {
     batchUID: 0,
+    currentReactComponentMeasure: null,
     measureStack: [],
     nativeEventStack: [],
     nextRenderShouldGenerateNewBatchID: true,
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 674dabdc8e93..106e4048363a 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -91,6 +91,13 @@ export type ReactMeasure = {|
   +depth: number,
 |};
 
+export type ReactComponentMeasure = {|
+  +componentName: string,
+  duration: Milliseconds,
+  +timestamp: Milliseconds,
+  warning: string | null,
+|};
+
 /**
  * A flamechart stack frame belonging to a stack trace.
  */
@@ -117,6 +124,7 @@ export type FlamechartStackLayer = FlamechartStackFrame[];
 export type Flamechart = FlamechartStackLayer[];
 
 export type ReactProfilerData = {|
+  componentMeasures: ReactComponentMeasure[],
   duration: number,
   flamechart: Flamechart,
   measures: ReactMeasure[],
@@ -128,6 +136,7 @@ export type ReactProfilerData = {|
 |};
 
 export type ReactHoverContextInfo = {|
+  componentMeasure: ReactComponentMeasure | null,
   data: $ReadOnly<ReactProfilerData> | null,
   flamechartStackFrame: FlamechartStackFrame | null,
   measure: ReactMeasure | null,
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
index 80527a193cb5..1b99d20a54c3 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
@@ -110,7 +110,6 @@ class ResizeBar extends View {
         context,
         labelRect,
         drawableRect,
-        visibleArea.size.width,
         'center',
         COLORS.REACT_RESIZE_BAR_DOT,
       );
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index a4b742a3fb64..8afcf85d4151 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -164,6 +164,7 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
     '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
     '--color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-text-dim-color': '#ccc',
     '--color-scheduling-profiler-react-work-border': '#ffffff',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
@@ -293,7 +294,8 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
     '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
     '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
-    '--color-scheduling-profiler-text-color': '#000000',
+    '--color-scheduling-profiler-text-color': '#282c34',
+    '--color-scheduling-profiler-text-dim-color': '#555b66',
     '--color-scheduling-profiler-react-work-border': '#ffffff',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index f07d4e7d778c..a6abd38712f0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -8,22 +8,41 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext} from 'react';
+import {useContext} from 'react';
 import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
+import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
-  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
+  const {didRecordCommits, isProfiling, selectedTabID} = useContext(
+    ProfilerContext,
+  );
+  const {clearSchedulingProfilerData, schedulingProfilerData} = useContext(
+    SchedulingProfilerContext,
+  );
   const {profilerStore} = store;
 
-  const clear = useCallback(() => profilerStore.clear(), [profilerStore]);
+  let doesHaveData = false;
+  if (selectedTabID === 'scheduling-profiler') {
+    doesHaveData = schedulingProfilerData !== null;
+  } else {
+    doesHaveData = didRecordCommits;
+  }
+
+  const clear = () => {
+    if (selectedTabID === 'scheduling-profiler') {
+      clearSchedulingProfilerData();
+    } else {
+      profilerStore.clear();
+    }
+  };
 
   return (
     <Button
-      disabled={isProfiling || !didRecordCommits}
+      disabled={isProfiling || !doesHaveData}
       onClick={clear}
       title="Clear profiling data">
       <ButtonIcon type="clear" />
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index f7c69755207c..2973fbf39585 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -103,8 +103,16 @@ function Profiler(_: {||}) {
       <div className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
-            <RecordToggle disabled={!supportsProfiling} />
-            <ReloadAndProfileButton />
+            <RecordToggle
+              disabled={
+                !supportsProfiling || selectedTabID === 'scheduling-profiler'
+              }
+            />
+            <ReloadAndProfileButton
+              disabled={
+                selectedTabID === 'scheduling-profiler' || !supportsProfiling
+              }
+            />
             <ClearProfilingDataButton />
             <ProfilingImportExportButtons />
             <div className={styles.VRule} />
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
index a54804bdce7e..6d7443698a1b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -19,7 +19,11 @@ type SubscriptionData = {|
   supportsReloadAndProfile: boolean,
 |};
 
-export default function ReloadAndProfileButton() {
+export default function ReloadAndProfileButton({
+  disabled,
+}: {|
+  disabled: boolean,
+|}) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -61,7 +65,7 @@ export default function ReloadAndProfileButton() {
 
   return (
     <Button
-      disabled={!store.supportsProfiling}
+      disabled={disabled}
       onClick={reloadAndProfile}
       title="Reload and start profiling">
       <ButtonIcon type="reload" />
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 2321b97ff89e..a687e9d16315 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -31,7 +31,10 @@ import type {
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 
 import checkPropTypes from 'shared/checkPropTypes';
-
+import {
+  markComponentRenderStarted,
+  markComponentRenderStopped,
+} from './SchedulingProfiler';
 import {
   IndeterminateComponent,
   FunctionComponent,
@@ -85,6 +88,7 @@ import {
   enableCache,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enableSchedulingProfiler,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
@@ -357,6 +361,9 @@ function updateForwardRef(
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
   prepareToReadContext(workInProgress, renderLanes);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
     setIsRendering(true);
@@ -397,6 +404,9 @@ function updateForwardRef(
       renderLanes,
     );
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
 
   if (current !== null && !didReceiveUpdate) {
     bailoutHooks(current, workInProgress, renderLanes);
@@ -958,6 +968,9 @@ function updateFunctionComponent(
 
   let nextChildren;
   prepareToReadContext(workInProgress, renderLanes);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
     setIsRendering(true);
@@ -998,6 +1011,9 @@ function updateFunctionComponent(
       renderLanes,
     );
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
 
   if (current !== null && !didReceiveUpdate) {
     bailoutHooks(current, workInProgress, renderLanes);
@@ -1177,6 +1193,9 @@ function finishClassComponent(
       stopProfilerTimerIfRunning(workInProgress);
     }
   } else {
+    if (enableSchedulingProfiler) {
+      markComponentRenderStarted(workInProgress);
+    }
     if (__DEV__) {
       setIsRendering(true);
       nextChildren = instance.render();
@@ -1195,6 +1214,9 @@ function finishClassComponent(
     } else {
       nextChildren = instance.render();
     }
+    if (enableSchedulingProfiler) {
+      markComponentRenderStopped();
+    }
   }
 
   // React DevTools reads this flag.
@@ -1567,6 +1589,9 @@ function mountIndeterminateComponent(
   prepareToReadContext(workInProgress, renderLanes);
   let value;
 
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   if (__DEV__) {
     if (
       Component.prototype &&
@@ -1610,6 +1635,10 @@ function mountIndeterminateComponent(
       renderLanes,
     );
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
 
@@ -3195,6 +3224,9 @@ function updateContextConsumer(
 
   prepareToReadContext(workInProgress, renderLanes);
   const newValue = readContext(context);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   let newChildren;
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
@@ -3204,6 +3236,9 @@ function updateContextConsumer(
   } else {
     newChildren = render(newValue);
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
 
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index dc66340f70a5..a1153497c5cd 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -31,7 +31,10 @@ import type {
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 
 import checkPropTypes from 'shared/checkPropTypes';
-
+import {
+  markComponentRenderStarted,
+  markComponentRenderStopped,
+} from './SchedulingProfiler';
 import {
   IndeterminateComponent,
   FunctionComponent,
@@ -85,6 +88,7 @@ import {
   enableCache,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enableSchedulingProfiler,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
@@ -357,6 +361,9 @@ function updateForwardRef(
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
   prepareToReadContext(workInProgress, renderLanes);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
     setIsRendering(true);
@@ -397,6 +404,9 @@ function updateForwardRef(
       renderLanes,
     );
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
 
   if (current !== null && !didReceiveUpdate) {
     bailoutHooks(current, workInProgress, renderLanes);
@@ -958,6 +968,9 @@ function updateFunctionComponent(
 
   let nextChildren;
   prepareToReadContext(workInProgress, renderLanes);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
     setIsRendering(true);
@@ -998,6 +1011,9 @@ function updateFunctionComponent(
       renderLanes,
     );
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
 
   if (current !== null && !didReceiveUpdate) {
     bailoutHooks(current, workInProgress, renderLanes);
@@ -1177,6 +1193,9 @@ function finishClassComponent(
       stopProfilerTimerIfRunning(workInProgress);
     }
   } else {
+    if (enableSchedulingProfiler) {
+      markComponentRenderStarted(workInProgress);
+    }
     if (__DEV__) {
       setIsRendering(true);
       nextChildren = instance.render();
@@ -1195,6 +1214,9 @@ function finishClassComponent(
     } else {
       nextChildren = instance.render();
     }
+    if (enableSchedulingProfiler) {
+      markComponentRenderStopped();
+    }
   }
 
   // React DevTools reads this flag.
@@ -1567,6 +1589,9 @@ function mountIndeterminateComponent(
   prepareToReadContext(workInProgress, renderLanes);
   let value;
 
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   if (__DEV__) {
     if (
       Component.prototype &&
@@ -1610,6 +1635,10 @@ function mountIndeterminateComponent(
       renderLanes,
     );
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
 
@@ -3195,6 +3224,9 @@ function updateContextConsumer(
 
   prepareToReadContext(workInProgress, renderLanes);
   const newValue = readContext(context);
+  if (enableSchedulingProfiler) {
+    markComponentRenderStarted(workInProgress);
+  }
   let newChildren;
   if (__DEV__) {
     ReactCurrentOwner.current = workInProgress;
@@ -3204,6 +3236,9 @@ function updateContextConsumer(
   } else {
     newChildren = render(newValue);
   }
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+  }
 
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index cfe900de6580..79b0ed6bc39e 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -70,7 +70,10 @@ import {
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.new';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
-import {markComponentSuspended} from './SchedulingProfiler';
+import {
+  markComponentRenderStopped,
+  markComponentSuspended,
+} from './SchedulingProfiler';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {
   SyncLane,
@@ -244,6 +247,7 @@ function throwException(
     }
 
     if (enableSchedulingProfiler) {
+      markComponentRenderStopped();
       markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index d7f4803620ba..9c2df828f817 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -70,7 +70,10 @@ import {
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.old';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
-import {markComponentSuspended} from './SchedulingProfiler';
+import {
+  markComponentRenderStopped,
+  markComponentSuspended,
+} from './SchedulingProfiler';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {
   SyncLane,
@@ -244,6 +247,7 @@ function throwException(
     }
 
     if (enableSchedulingProfiler) {
+      markComponentRenderStopped();
       markComponentSuspended(sourceFiber, wakeable, rootRenderLanes);
     }
 
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 2ab49efe0e13..fc7a7499c601 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -97,6 +97,23 @@ export function markCommitStopped(): void {
   }
 }
 
+export function markComponentRenderStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      markAndClear(`--component-render-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentRenderStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-render-stop');
+    }
+  }
+}
+
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
 // $FlowFixMe: Flow cannot handle polymorphic WeakMaps
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 62da05e0e851..4b496b732a21 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -174,6 +174,8 @@ describe('SchedulingProfiler', () => {
         `--react-init-${ReactVersion}`,
         `--schedule-render-${formatLanes(ReactFiberLane.TransitionLane1)}`,
         `--render-start-${formatLanes(ReactFiberLane.TransitionLane1)}`,
+        '--component-render-start-Foo',
+        '--component-render-stop',
         '--render-yield',
       ]);
     } else {
@@ -208,6 +210,8 @@ describe('SchedulingProfiler', () => {
       `--react-init-${ReactVersion}`,
       `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--suspense-suspend-0-Example-mount-1-Sync',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
@@ -239,6 +243,8 @@ describe('SchedulingProfiler', () => {
       `--react-init-${ReactVersion}`,
       `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--suspense-suspend-0-Example-mount-1-Sync',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
@@ -278,6 +284,8 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--suspense-suspend-0-Example-mount-16-Default',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
@@ -317,6 +325,8 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--suspense-suspend-0-Example-mount-16-Default',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
@@ -356,12 +366,16 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,
       '--layout-effects-stop',
       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--commit-stop',
@@ -393,6 +407,8 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
@@ -401,6 +417,8 @@ describe('SchedulingProfiler', () => {
       )}-Example`,
       '--layout-effects-stop',
       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--commit-stop',
@@ -495,12 +513,16 @@ describe('SchedulingProfiler', () => {
 
     expectMarksToEqual([
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,
       '--layout-effects-stop',
       `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
       '--commit-stop',
@@ -528,6 +550,8 @@ describe('SchedulingProfiler', () => {
       `--react-init-${ReactVersion}`,
       `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
@@ -539,6 +563,8 @@ describe('SchedulingProfiler', () => {
       )}-Example`,
       '--passive-effects-stop',
       `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
+      '--component-render-start-Example',
+      '--component-render-stop',
       '--render-stop',
       `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
       '--commit-stop',

From 8a37b0ef3fee66504975777ca30d62b4121534b7 Mon Sep 17 00:00:00 2001
From: "Sinan Sonmez (Chaush)" <37421564+sinansonmez@users.noreply.github.com>
Date: Tue, 3 Aug 2021 20:05:20 +0200
Subject: [PATCH 0742/1603] typos fixed (#21955)

---
 packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js | 2 +-
 packages/react-devtools-extensions/src/astUtils.js       | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index d40aaba421d3..96e7adc646c8 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -753,7 +753,7 @@ export default {
             if (
               isUsedOutsideOfHook &&
               construction.type === 'Variable' &&
-              // Objects may be mutated ater construction, which would make this
+              // 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'
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 87a4f47dcaea..4b4d87c4f630 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -41,7 +41,7 @@ function checkNodeLocation(
   }
 
   if (column !== null) {
-    // Column numbers are representated differently between tools/engines.
+    // 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,
@@ -359,7 +359,7 @@ function isPotentialHookDeclaration(path: NodePath): boolean {
   return false;
 }
 
-/// Check whether 'node' is hook decalration of form useState(0); OR React.useState(0);
+/// 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 ||

From 215db465a228955cfbb9d51cc68ed9390bfc353a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 3 Aug 2021 22:26:49 -0400
Subject: [PATCH 0743/1603] [Fabric] Add `flex: 1` to Offscreen view container
 (#22019)

Without this style property, the layout of the children is messed up.

The goal is for the container view to have no layout at all. It should
be a completely transparent wrapper, except for when we set `display:
none` to hide its contents. On the web, the equivalent (at least in the
spec) is `display: contents`.

After some initial testing, this seems to be close enough to the desired
behavior that we can ship it. We'll try rolling it out behind a flag.
---
 packages/react-native-renderer/src/ReactFabricHostConfig.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index ac7fb64d922c..db9e5039f537 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -453,6 +453,9 @@ export function getOffscreenContainerProps(
   } else {
     return {
       children,
+      style: {
+        flex: 1,
+      },
     };
   }
 }

From 19092ac8c354b92c2e0e27b73f391571ad452505 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 3 Aug 2021 22:30:20 -0400
Subject: [PATCH 0744/1603] Re-add old Fabric Offscreen impl behind flag
 (#22018)

* Re-add old Fabric Offscreen impl behind flag

There's a chance that #21960 will affect layout in a way that we don't
expect, so I'm adding back the old implementation so we can toggle the
feature with a flag.

The flag should read from the ReactNativeFeatureFlags shim so that we
can change it at runtime. I'll do that separately.

* Import dynamic RN flags from external module

Internal feature flags that we wish to control with a GK can now be
imported from an external module, which I've called
"ReactNativeInternalFeatureFlags".

We'll need to add this module to the downstream repo.

We can't yet use this in our tests, because we don't have a test
configuration that runs against the React Native feature flags fork. We
should set up that up the same way we did for www.
---
 .../src/ReactFabricHostConfig.js              | 26 ++++++
 .../src/createReactNoop.js                    | 48 ++++++++++
 .../src/ReactFiberBeginWork.new.js            | 12 ++-
 .../src/ReactFiberBeginWork.old.js            | 12 ++-
 .../src/ReactFiberCompleteWork.new.js         | 87 ++++++++++++++++---
 .../src/ReactFiberCompleteWork.old.js         | 87 ++++++++++++++++---
 .../ReactFiberHostConfigWithNoPersistence.js  |  2 +
 .../src/ReactFiberThrow.new.js                |  3 +-
 .../src/ReactFiberThrow.old.js                |  3 +-
 .../src/forks/ReactFiberHostConfig.custom.js  |  2 +
 packages/shared/ReactFeatureFlags.js          |  2 +
 .../ReactFeatureFlags.native-fb-dynamic.js    | 29 +++++++
 .../forks/ReactFeatureFlags.native-fb.js      |  8 ++
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  2 +
 scripts/flow/config/flowconfig                |  1 +
 scripts/flow/xplat.js                         | 12 +++
 scripts/rollup/bundles.js                     | 23 +++--
 scripts/rollup/modules.js                     |  2 +
 25 files changed, 324 insertions(+), 44 deletions(-)
 create mode 100644 packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
 create mode 100644 scripts/flow/xplat.js

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index db9e5039f537..8ca9401597dd 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -460,6 +460,32 @@ export function getOffscreenContainerProps(
   }
 }
 
+export function cloneHiddenInstance(
+  instance: Instance,
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+): Instance {
+  const viewConfig = instance.canonical.viewConfig;
+  const node = instance.node;
+  const updatePayload = create(
+    {style: {display: 'none'}},
+    viewConfig.validAttributes,
+  );
+  return {
+    node: cloneNodeWithNewProps(node, updatePayload),
+    canonical: instance.canonical,
+  };
+}
+
+export function cloneHiddenTextInstance(
+  instance: Instance,
+  text: string,
+  internalInstanceHandle: Object,
+): TextInstance {
+  throw new Error('Not yet implemented.');
+}
+
 export function createContainerChildSet(container: Container): ChildSet {
   return createChildNodeSet(container);
 }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index bc31a1c7c3ca..9e2c1ba7f876 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -582,6 +582,54 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
             children,
           };
         },
+
+        cloneHiddenInstance(
+          instance: Instance,
+          type: string,
+          props: Props,
+          internalInstanceHandle: Object,
+        ): Instance {
+          const clone = cloneInstance(
+            instance,
+            null,
+            type,
+            props,
+            props,
+            internalInstanceHandle,
+            true,
+            null,
+          );
+          clone.hidden = true;
+          return clone;
+        },
+
+        cloneHiddenTextInstance(
+          instance: TextInstance,
+          text: string,
+          internalInstanceHandle: Object,
+        ): 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);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index a687e9d16315..9c5ca0700855 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -89,6 +89,7 @@ import {
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
@@ -146,7 +147,6 @@ import {
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
-  supportsMutation,
   supportsPersistence,
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
@@ -744,7 +744,7 @@ function updateOffscreenComponent(
     workInProgress.updateQueue = spawnedCachePool;
   }
 
-  if (supportsPersistence) {
+  if (enablePersistentOffscreenHostContainer && supportsPersistence) {
     // In persistent mode, the offscreen children are wrapped in a host node.
     // TODO: Optimize this to use the OffscreenComponent fiber instead of
     // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
@@ -760,12 +760,10 @@ function updateOffscreenComponent(
       renderLanes,
     );
     return offscreenContainer;
-  }
-  if (supportsMutation) {
+  } else {
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
-  return null;
 }
 
 function reconcileOffscreenHostContainer(
@@ -2383,7 +2381,7 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
@@ -2411,7 +2409,7 @@ function updateSuspenseFallbackChildren(
       primaryChildProps,
     );
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index a1153497c5cd..2e6448d338f8 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -89,6 +89,7 @@ import {
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
@@ -146,7 +147,6 @@ import {
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
-  supportsMutation,
   supportsPersistence,
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
@@ -744,7 +744,7 @@ function updateOffscreenComponent(
     workInProgress.updateQueue = spawnedCachePool;
   }
 
-  if (supportsPersistence) {
+  if (enablePersistentOffscreenHostContainer && supportsPersistence) {
     // In persistent mode, the offscreen children are wrapped in a host node.
     // TODO: Optimize this to use the OffscreenComponent fiber instead of
     // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
@@ -760,12 +760,10 @@ function updateOffscreenComponent(
       renderLanes,
     );
     return offscreenContainer;
-  }
-  if (supportsMutation) {
+  } else {
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
-  return null;
 }
 
 function reconcileOffscreenHostContainer(
@@ -2383,7 +2381,7 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
@@ -2411,7 +2409,7 @@ function updateSuspenseFallbackChildren(
       primaryChildProps,
     );
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index fea034edaa67..9eff02536d5f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -84,6 +84,8 @@ import {
   supportsMutation,
   supportsPersistence,
   cloneInstance,
+  cloneHiddenInstance,
+  cloneHiddenTextInstance,
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
@@ -128,6 +130,7 @@ import {
   enableProfilerTimer,
   enableCache,
   enableSuspenseLayoutEffectSemantics,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import {
   renderDidSuspend,
@@ -198,7 +201,12 @@ let updateHostText;
 if (supportsMutation) {
   // Mutation mode
 
-  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
+  appendAllChildren = function(
+    parent: Instance,
+    workInProgress: Fiber,
+    needsVisibilityToggle: boolean,
+    isHidden: boolean,
+  ) {
     // 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;
@@ -286,22 +294,53 @@ if (supportsMutation) {
 } else if (supportsPersistence) {
   // Persistent host tree mode
 
-  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
+  appendAllChildren = function(
+    parent: Instance,
+    workInProgress: Fiber,
+    needsVisibilityToggle: boolean,
+    isHidden: boolean,
+  ) {
     // 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) {
       // eslint-disable-next-line no-labels
       branches: if (node.tag === HostComponent) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendInitialChild(parent, instance);
       } else if (node.tag === HostText) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendInitialChild(parent, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
         // 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;
+        }
+        if (enablePersistentOffscreenHostContainer) {
+          appendAllChildren(parent, node, false, false);
+        } else {
+          appendAllChildren(parent, node, true, true);
+        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -327,6 +366,8 @@ if (supportsMutation) {
   const appendAllChildrenToContainer = function(
     containerChildSet: ChildSet,
     workInProgress: Fiber,
+    needsVisibilityToggle: boolean,
+    isHidden: boolean,
   ) {
     // We only have the top Fiber that was created but we need recurse down its
     // children to find all the terminal nodes.
@@ -334,15 +375,41 @@ if (supportsMutation) {
     while (node !== null) {
       // eslint-disable-next-line no-labels
       branches: if (node.tag === HostComponent) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendChildToContainerChildSet(containerChildSet, instance);
       } else if (node.tag === HostText) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendChildToContainerChildSet(containerChildSet, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
         // 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;
+        }
+        if (enablePersistentOffscreenHostContainer) {
+          appendAllChildrenToContainer(containerChildSet, node, false, false);
+        } else {
+          appendAllChildrenToContainer(containerChildSet, node, true, true);
+        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -376,7 +443,7 @@ if (supportsMutation) {
       const container = portalOrRoot.containerInfo;
       const newChildSet = createContainerChildSet(container);
       // If children might have changed, we have to add them all to the set.
-      appendAllChildrenToContainer(newChildSet, workInProgress);
+      appendAllChildrenToContainer(newChildSet, workInProgress, false, false);
       portalOrRoot.pendingChildren = newChildSet;
       // Schedule an update on the container to swap out the container.
       markUpdate(workInProgress);
@@ -449,7 +516,7 @@ if (supportsMutation) {
       markUpdate(workInProgress);
     } else {
       // If children might have changed, we have to add them all to the set.
-      appendAllChildren(newInstance, workInProgress);
+      appendAllChildren(newInstance, workInProgress, false, false);
     }
   };
   updateHostText = function(
@@ -722,7 +789,7 @@ export function completeSuspendedOffscreenHostContainer(
       workInProgress,
     );
 
-    appendAllChildren(instance, workInProgress);
+    appendAllChildren(instance, workInProgress, false, false);
 
     workInProgress.stateNode = instance;
 
@@ -869,7 +936,7 @@ function completeWork(
             workInProgress,
           );
 
-          appendAllChildren(instance, workInProgress);
+          appendAllChildren(instance, workInProgress, false, false);
 
           workInProgress.stateNode = instance;
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 4658938c9d5d..b8011b7dcb4b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -84,6 +84,8 @@ import {
   supportsMutation,
   supportsPersistence,
   cloneInstance,
+  cloneHiddenInstance,
+  cloneHiddenTextInstance,
   createContainerChildSet,
   appendChildToContainerChildSet,
   finalizeContainerChildren,
@@ -128,6 +130,7 @@ import {
   enableProfilerTimer,
   enableCache,
   enableSuspenseLayoutEffectSemantics,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import {
   renderDidSuspend,
@@ -198,7 +201,12 @@ let updateHostText;
 if (supportsMutation) {
   // Mutation mode
 
-  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
+  appendAllChildren = function(
+    parent: Instance,
+    workInProgress: Fiber,
+    needsVisibilityToggle: boolean,
+    isHidden: boolean,
+  ) {
     // 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;
@@ -286,22 +294,53 @@ if (supportsMutation) {
 } else if (supportsPersistence) {
   // Persistent host tree mode
 
-  appendAllChildren = function(parent: Instance, workInProgress: Fiber) {
+  appendAllChildren = function(
+    parent: Instance,
+    workInProgress: Fiber,
+    needsVisibilityToggle: boolean,
+    isHidden: boolean,
+  ) {
     // 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) {
       // eslint-disable-next-line no-labels
       branches: if (node.tag === HostComponent) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendInitialChild(parent, instance);
       } else if (node.tag === HostText) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendInitialChild(parent, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
         // 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;
+        }
+        if (enablePersistentOffscreenHostContainer) {
+          appendAllChildren(parent, node, false, false);
+        } else {
+          appendAllChildren(parent, node, true, true);
+        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -327,6 +366,8 @@ if (supportsMutation) {
   const appendAllChildrenToContainer = function(
     containerChildSet: ChildSet,
     workInProgress: Fiber,
+    needsVisibilityToggle: boolean,
+    isHidden: boolean,
   ) {
     // We only have the top Fiber that was created but we need recurse down its
     // children to find all the terminal nodes.
@@ -334,15 +375,41 @@ if (supportsMutation) {
     while (node !== null) {
       // eslint-disable-next-line no-labels
       branches: if (node.tag === HostComponent) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendChildToContainerChildSet(containerChildSet, instance);
       } else if (node.tag === HostText) {
-        const instance = node.stateNode;
+        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, node);
+        }
         appendChildToContainerChildSet(containerChildSet, instance);
       } else if (node.tag === HostPortal) {
         // If we have a portal child, then we don't want to traverse
         // down its children. Instead, we'll get insertions from each child in
         // 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;
+        }
+        if (enablePersistentOffscreenHostContainer) {
+          appendAllChildrenToContainer(containerChildSet, node, false, false);
+        } else {
+          appendAllChildrenToContainer(containerChildSet, node, true, true);
+        }
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -376,7 +443,7 @@ if (supportsMutation) {
       const container = portalOrRoot.containerInfo;
       const newChildSet = createContainerChildSet(container);
       // If children might have changed, we have to add them all to the set.
-      appendAllChildrenToContainer(newChildSet, workInProgress);
+      appendAllChildrenToContainer(newChildSet, workInProgress, false, false);
       portalOrRoot.pendingChildren = newChildSet;
       // Schedule an update on the container to swap out the container.
       markUpdate(workInProgress);
@@ -449,7 +516,7 @@ if (supportsMutation) {
       markUpdate(workInProgress);
     } else {
       // If children might have changed, we have to add them all to the set.
-      appendAllChildren(newInstance, workInProgress);
+      appendAllChildren(newInstance, workInProgress, false, false);
     }
   };
   updateHostText = function(
@@ -722,7 +789,7 @@ export function completeSuspendedOffscreenHostContainer(
       workInProgress,
     );
 
-    appendAllChildren(instance, workInProgress);
+    appendAllChildren(instance, workInProgress, false, false);
 
     workInProgress.stateNode = instance;
 
@@ -869,7 +936,7 @@ function completeWork(
             workInProgress,
           );
 
-          appendAllChildren(instance, workInProgress);
+          appendAllChildren(instance, workInProgress, false, false);
 
           workInProgress.stateNode = instance;
 
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
index 2dd44342a399..824cdeacc73f 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
@@ -30,3 +30,5 @@ export const finalizeContainerChildren = shim;
 export const replaceContainerChildren = shim;
 export const getOffscreenContainerType = shim;
 export const getOffscreenContainerProps = shim;
+export const cloneHiddenInstance = shim;
+export const cloneHiddenTextInstance = shim;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 79b0ed6bc39e..67ac620e80d8 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -44,6 +44,7 @@ import {
   enableSchedulingProfiler,
   enableLazyContextPropagation,
   enableUpdaterTracking,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -321,7 +322,7 @@ function throwException(
           // all lifecycle effect tags.
           sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
-          if (supportsPersistence) {
+          if (supportsPersistence && enablePersistentOffscreenHostContainer) {
             // Another legacy Suspense quirk. In persistent mode, if this is the
             // initial mount, override the props of the host container to hide
             // its contents.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 9c2df828f817..6309e20d9e62 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -44,6 +44,7 @@ import {
   enableSchedulingProfiler,
   enableLazyContextPropagation,
   enableUpdaterTracking,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -321,7 +322,7 @@ function throwException(
           // all lifecycle effect tags.
           sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
-          if (supportsPersistence) {
+          if (supportsPersistence && enablePersistentOffscreenHostContainer) {
             // Another legacy Suspense quirk. In persistent mode, if this is the
             // initial mount, override the props of the host container to hide
             // its contents.
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 9dbaa47eb711..1cc10a78cb01 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -131,6 +131,8 @@ export const getOffscreenContainerType =
   $$$hostConfig.getOffscreenContainerType;
 export const getOffscreenContainerProps =
   $$$hostConfig.getOffscreenContainerProps;
+export const cloneHiddenInstance = $$$hostConfig.cloneHiddenInstance;
+export const cloneHiddenTextInstance = $$$hostConfig.cloneHiddenTextInstance;
 
 // -------------------
 //     Hydration
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index a1689f64a5d8..6df5af24d953 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -173,3 +173,5 @@ export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 
 export const allowConcurrentByDefault = false;
+
+export const enablePersistentOffscreenHostContainer = false;
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 000000000000..63f75e83b765
--- /dev/null
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+import typeof * as ExportsType from './ReactFeatureFlags.native-fb-dynamic';
+import typeof * as DynamicFlagsType from 'ReactNativeInternalFeatureFlags';
+
+// 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
+// update the test configuration.
+
+export const enablePersistentOffscreenHostContainer = __VARIANT__;
+
+// Flow magic to verify the exports of this file match the original version.
+// eslint-disable-next-line no-unused-vars
+type Check<_X, Y: _X, X: Y = _X> = null;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<ExportsType, DynamicFlagsType>);
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 9e52536fbb36..f6ab60d3ed64 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -10,6 +10,14 @@
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as ExportsType from './ReactFeatureFlags.native-fb';
 
+// Re-export dynamic flags from the internal module. Intentionally using *
+// because this import is compiled to a `require` call.
+import * as dynamicFlags from 'ReactNativeInternalFeatureFlags';
+
+// 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 {enablePersistentOffscreenHostContainer} = dynamicFlags;
+
 // The rest of the flags are static for better dead code elimination.
 export const enableDebugTracing = false;
 export const enableSchedulingProfiler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index b34b583f1886..5bcc6097447a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -59,6 +59,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
+export const enablePersistentOffscreenHostContainer = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 7357217b1691..4a897ec77e46 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -59,6 +59,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
+export const enablePersistentOffscreenHostContainer = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 10a05e52e152..48df0a41a08b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -59,6 +59,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
+export const enablePersistentOffscreenHostContainer = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 617ec8f0bc18..481cf6b023ac 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -59,6 +59,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
+export const enablePersistentOffscreenHostContainer = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 50e1c73f8dd2..48971f129b7b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -59,6 +59,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
+export const enablePersistentOffscreenHostContainer = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index d16f6212c548..c11a7757fa3c 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -59,6 +59,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
+export const enablePersistentOffscreenHostContainer = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 591193ebb777..72ae2f2c5b47 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -59,3 +59,4 @@ export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const allowConcurrentByDefault = true;
+export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index dadf7972612f..d514e15e8827 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -94,6 +94,8 @@ export const allowConcurrentByDefault = true;
 
 export const deletedTreeCleanUpLevel = 3;
 
+export const enablePersistentOffscreenHostContainer = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index ada7f2207be5..2ace94c2d7cb 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -34,6 +34,7 @@
 ./scripts/flow/react-devtools.js
 ./scripts/flow/react-native-host-hooks.js
 ./scripts/flow/react-relay-hooks.js
+./scripts/flow/xplat.js
 
 [lints]
 untyped-type-import=error
diff --git a/scripts/flow/xplat.js b/scripts/flow/xplat.js
new file mode 100644
index 000000000000..c013af3e125d
--- /dev/null
+++ b/scripts/flow/xplat.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+declare module 'ReactNativeInternalFeatureFlags' {
+  declare export var enablePersistentOffscreenHostContainer: boolean;
+}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index fb64c0e6e07f..54c0552ba564 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -79,7 +79,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react',
     global: 'React',
-    externals: [],
+    externals: ['ReactNativeInternalFeatureFlags'],
   },
 
   /******* Isomorphic Shared Subset *******/
@@ -105,7 +105,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-runtime',
     global: 'JSXRuntime',
-    externals: ['react'],
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
   /******* React JSX DEV Runtime *******/
@@ -124,7 +124,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-dev-runtime',
     global: 'JSXDEVRuntime',
-    externals: ['react'],
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
   /******* React Fetch Browser (experimental, new) *******/
@@ -372,6 +372,7 @@ const bundles = [
       'react',
       'ReactFlightNativeRelayServerIntegration',
       'JSResourceReferenceImpl',
+      'ReactNativeInternalFeatureFlags',
     ],
   },
 
@@ -385,6 +386,7 @@ const bundles = [
       'react',
       'ReactFlightNativeRelayClientIntegration',
       'JSResourceReferenceImpl',
+      'ReactNativeInternalFeatureFlags',
     ],
   },
 
@@ -432,7 +434,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
-    externals: ['react-native'],
+    externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -462,7 +464,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
-    externals: ['react-native'],
+    externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -499,7 +501,12 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-test-renderer',
     global: 'ReactTestRenderer',
-    externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
+    externals: [
+      'react',
+      'scheduler',
+      'scheduler/unstable_mock',
+      'ReactNativeInternalFeatureFlags',
+    ],
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -692,7 +699,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler',
     global: 'Scheduler',
-    externals: [],
+    externals: ['ReactNativeInternalFeatureFlags'],
   },
 
   /******* React Scheduler Mock (experimental) *******/
@@ -710,7 +717,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler/unstable_mock',
     global: 'SchedulerMock',
-    externals: [],
+    externals: ['ReactNativeInternalFeatureFlags'],
   },
 
   /******* React Scheduler Post Task (experimental) *******/
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
index b56f4231e2ef..2461e28850cc 100644
--- a/scripts/rollup/modules.js
+++ b/scripts/rollup/modules.js
@@ -21,6 +21,7 @@ const importSideEffects = Object.freeze({
   'react-fetch/node': 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,
 });
 
 // Bundles exporting globals that other modules rely on.
@@ -31,6 +32,7 @@ const knownGlobals = Object.freeze({
   'react-interactions/events/tap': 'ReactEventsTap',
   scheduler: 'Scheduler',
   'scheduler/unstable_mock': 'SchedulerMock',
+  ReactNativeInternalFeatureFlags: 'ReactNativeInternalFeatureFlags',
 });
 
 // Given ['react'] in bundle externals, returns { 'react': 'React' }.

From a8725a3e628e8e75d408101e5565b2d2af3902c3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 5 Aug 2021 13:50:39 -0400
Subject: [PATCH 0745/1603] Scheduling profiler: Added lane labels and
 durations to React measures (#22029)

---
 .../src/EventTooltip.js                       |  13 +-
 .../src/constants.js                          |   3 +
 .../content-views/ComponentMeasuresView.js    |   3 +-
 .../src/content-views/ReactMeasuresView.js    |  56 +-
 .../src/content-views/constants.js            |  18 +-
 .../src/content-views/utils/text.js           |  39 +-
 .../__tests__/preprocessData-test.internal.js | 809 +++++++++++-------
 .../src/import-worker/preprocessData.js       | 124 +--
 .../src/types.js                              |   8 +-
 .../src/view-base/ResizableView.js            |  12 +-
 .../react-devtools-shared/src/constants.js    |   8 +
 .../src/ReactFiberLane.new.js                 |  54 +-
 .../src/ReactFiberLane.old.js                 |  54 +-
 .../src/SchedulingProfiler.js                 |  92 +-
 .../SchedulingProfiler-test.internal.js       | 628 ++++++++------
 .../SchedulingProfilerLabels-test.internal.js | 154 ++--
 16 files changed, 1297 insertions(+), 778 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 80935bd69be6..8f3c2e2c0b1b 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -105,6 +105,7 @@ export default function EventTooltip({
   } else if (schedulingEvent !== null) {
     return (
       <TooltipSchedulingEvent
+        data={data}
         schedulingEvent={schedulingEvent}
         tooltipRef={tooltipRef}
       />
@@ -234,9 +235,11 @@ const TooltipNativeEvent = ({
 };
 
 const TooltipSchedulingEvent = ({
+  data,
   schedulingEvent,
   tooltipRef,
 }: {
+  data: ReactProfilerData,
   schedulingEvent: SchedulingEvent,
   tooltipRef: Return<typeof useRef>,
 }) => {
@@ -257,8 +260,10 @@ const TooltipSchedulingEvent = ({
     case 'schedule-render':
     case 'schedule-state-update':
     case 'schedule-force-update':
-      laneLabels = schedulingEvent.laneLabels;
       lanes = schedulingEvent.lanes;
+      laneLabels = lanes.map(
+        lane => ((data.laneToLabelMap.get(lane): any): string),
+      );
       break;
   }
 
@@ -366,9 +371,13 @@ const TooltipReactMeasure = ({
     return null;
   }
 
-  const {batchUID, duration, timestamp, lanes, laneLabels} = measure;
+  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.Tooltip} ref={tooltipRef}>
       <div className={styles.TooltipSection}>
diff --git a/packages/react-devtools-scheduling-profiler/src/constants.js b/packages/react-devtools-scheduling-profiler/src/constants.js
index 2e463ae632d9..e29b8901d81f 100644
--- a/packages/react-devtools-scheduling-profiler/src/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/constants.js
@@ -13,3 +13,6 @@ export {
 } from 'react-devtools-shared/src/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;
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
index 4d9ecfa5d17e..c7de8f8897c5 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
@@ -161,8 +161,7 @@ export class ComponentMeasuresView extends View {
         context,
         visibleArea,
         visibleArea,
-        'center',
-        COLORS.TEXT_DIM_COLOR,
+        {fillStyle: COLORS.TEXT_DIM_COLOR, textAlign: 'center'},
       );
     }
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index f8e4cb99b94c..976e37ebb9d3 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -16,6 +16,8 @@ import type {
   ViewRefs,
 } from '../view-base';
 
+import {formatDuration} from '../utils/formatting';
+import {drawText} from './utils/text';
 import {
   durationToWidth,
   positioningScaleFactor,
@@ -102,17 +104,19 @@ export class ReactMeasuresView extends View {
     context: CanvasRenderingContext2D,
     rect: Rect,
     measure: ReactMeasure,
+    nextMeasure: ReactMeasure | null,
     baseY: number,
     scaleFactor: number,
     showGroupHighlight: boolean,
     showHoverHighlight: boolean,
   ) {
-    const {frame} = this;
+    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.
@@ -131,11 +135,29 @@ export class ReactMeasuresView extends View {
       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) {
+          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.
@@ -149,22 +171,24 @@ export class ReactMeasuresView extends View {
         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}"`);
     }
 
-    const drawableRect = intersectionOfRects(measureRect, rect);
     context.fillStyle = showHoverHighlight
       ? hoveredFillStyle
       : showGroupHighlight
@@ -176,6 +200,12 @@ export class ReactMeasuresView extends View {
       drawableRect.size.width,
       drawableRect.size.height,
     );
+
+    if (textFillStyle !== null) {
+      drawText(formatDuration(duration), context, textRect, visibleArea, {
+        fillStyle: textFillStyle,
+      });
+    }
   }
 
   draw(context: CanvasRenderingContext2D) {
@@ -211,6 +241,27 @@ export class ReactMeasuresView extends View {
         );
       }
 
+      // Render lane labels
+      const label = this._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];
@@ -222,6 +273,7 @@ export class ReactMeasuresView extends View {
           context,
           visibleArea,
           measure,
+          measuresForLane[j + 1] || null,
           baseY,
           scaleFactor,
           showGroupHighlight,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index ec8fec8d1e46..6cda416ad8bb 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -19,7 +19,7 @@ export const SUSPENSE_EVENT_HEIGHT = 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 = 9;
+export const REACT_MEASURE_HEIGHT = 14;
 export const BORDER_SIZE = 1;
 export const FLAMECHART_FRAME_HEIGHT = 14;
 export const TEXT_PADDING = 3;
@@ -56,12 +56,16 @@ export let COLORS = {
   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: '',
@@ -132,24 +136,36 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     REACT_RENDER_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-render-hover',
     ),
+    REACT_RENDER_TEXT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-render-text',
+    ),
     REACT_COMMIT: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-commit',
     ),
     REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-commit-hover',
     ),
+    REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-commit-text',
+    ),
     REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-layout-effects',
     ),
     REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-layout-effects-hover',
     ),
+    REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-layout-effects-text',
+    ),
     REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-passive-effects',
     ),
     REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-passive-effects-hover',
     ),
+    REACT_PASSIVE_EFFECTS_TEXT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-react-passive-effects-text',
+    ),
     REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
     REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(
       '--color-resize-bar-active',
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
index 229b9f50f8dc..4cd7d9482158 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
@@ -14,6 +14,19 @@ import {COLORS, FONT_SIZE, TEXT_PADDING} from '../constants';
 
 const cachedTextWidths = new Map();
 
+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,
@@ -21,14 +34,7 @@ export function trimText(
 ): string | null {
   for (let i = text.length - 1; i >= 0; i--) {
     const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
-
-    let measuredWidth = cachedTextWidths.get(trimmedText);
-    if (measuredWidth == null) {
-      measuredWidth = context.measureText(trimmedText).width;
-      cachedTextWidths.set(trimmedText, measuredWidth);
-    }
-
-    if (measuredWidth <= width) {
+    if (getTextWidth(context, trimmedText) <= width) {
       return trimmedText;
     }
   }
@@ -36,18 +42,29 @@ export function trimText(
   return null;
 }
 
+type TextConfig = {|
+  fillStyle?: string,
+  fontSize?: number,
+  textAlign?: 'left' | 'center',
+|};
+
 export function drawText(
   text: string,
   context: CanvasRenderingContext2D,
   fullRect: Rect,
   drawableRect: Rect,
-  textAlign: 'left' | 'center' = 'left',
-  fillStyle: string = COLORS.TEXT_COLOR,
+  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 = `${FONT_SIZE}px sans-serif`;
+    context.font = `${fontSize}px sans-serif`;
 
     const {x, y} = fullRect.origin;
 
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index f47200c6f0e2..f08dcd2512b1 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -7,10 +7,15 @@
 
 'use strict';
 
+import {getLaneLabels} from 'react-reconciler/src/SchedulingProfiler';
 import preprocessData, {
   getLanesFromTransportDecimalBitmask,
 } from '../preprocessData';
-import {REACT_TOTAL_NUM_LANES} from '../../constants';
+import {
+  REACT_TOTAL_NUM_LANES,
+  SCHEDULING_PROFILER_VERSION,
+} from '../../constants';
+import REACT_VERSION from 'shared/ReactVersion';
 
 describe(getLanesFromTransportDecimalBitmask, () => {
   it('should return array of lane numbers from bitmask string', () => {
@@ -109,6 +114,35 @@ describe(preprocessData, () => {
     };
   }
 
+  function createProfilerVersionEntry() {
+    return createUserTimingEntry({
+      cat: 'blink.user_timing',
+      name: '--profiler-version-' + SCHEDULING_PROFILER_VERSION,
+    });
+  }
+
+  function createReactVersionEntry() {
+    return createUserTimingEntry({
+      cat: 'blink.user_timing',
+      name: '--react-version-' + REACT_VERSION,
+    });
+  }
+
+  function createLaneLabelsEntry() {
+    return createUserTimingEntry({
+      cat: 'blink.user_timing',
+      name: '--react-lane-labels-' + getLaneLabels().join(','),
+    });
+  }
+
+  function createBoilerplateEntries() {
+    return [
+      createProfilerVersionEntry(),
+      createReactVersionEntry(),
+      createLaneLabelsEntry(),
+    ];
+  }
+
   function createUserTimingData(sampleMarks) {
     const cpuProfilerSample = createUserTimingEntry({
       args: {data: {startTime: ++startTime}},
@@ -192,7 +226,6 @@ describe(preprocessData, () => {
       name: 'Profile',
       ph: 'P',
     });
-
     const randomSample = createUserTimingEntry({
       dur: 100,
       tdur: 200,
@@ -202,20 +235,62 @@ describe(preprocessData, () => {
       args: {},
     });
 
-    expect(preprocessData([cpuProfilerSample, randomSample])).toStrictEqual({
-      componentMeasures: [],
-      duration: 0.002,
-      flamechart: [],
-      measures: [],
-      nativeEvents: [],
-      otherUserTimingMarks: [],
-      schedulingEvents: [],
-      startTime: 1,
-      suspenseEvents: [],
-    });
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      const data = preprocessData([
+        ...createBoilerplateEntries(),
+        cpuProfilerSample,
+        randomSample,
+      ]);
+      expect(data).toMatchInlineSnapshot(`
+        Object {
+          "componentMeasures": Array [],
+          "duration": 0.005,
+          "flamechart": Array [],
+          "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",
+          },
+          "measures": Array [],
+          "nativeEvents": Array [],
+          "otherUserTimingMarks": Array [],
+          "reactVersion": "17.0.3",
+          "schedulingEvents": Array [],
+          "startTime": 1,
+          "suspenseEvents": Array [],
+        }
+      `);
+    }
   });
 
-  // NOTE This test doesn't have to be gated because it has hard-coded profiler samples.
   it('should process legacy data format (before lane labels were added)', () => {
     const cpuProfilerSample = createUserTimingEntry({
       args: {data: {startTime: ++startTime}},
@@ -225,10 +300,11 @@ describe(preprocessData, () => {
       ph: 'P',
     });
 
-    expect(
+    if (gate(flags => flags.enableSchedulingProfiler)) {
       // Data below is hard-coded based on an older profile sample.
       // Should be fine since this is explicitly a legacy-format test.
-      preprocessData([
+      const data = preprocessData([
+        ...createBoilerplateEntries(),
         cpuProfilerSample,
         createUserTimingEntry({
           cat: 'blink.user_timing',
@@ -258,140 +334,220 @@ describe(preprocessData, () => {
           cat: 'blink.user_timing',
           name: '--commit-stop',
         }),
-      ]),
-    ).toStrictEqual({
-      componentMeasures: [],
-      duration: 0.008,
-      flamechart: [],
-      measures: [
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.005,
-          laneLabels: [],
-          lanes: [9],
-          timestamp: 0.003,
-          type: 'render-idle',
-        },
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.001,
-          laneLabels: [],
-          lanes: [9],
-          timestamp: 0.003,
-          type: 'render',
-        },
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.003,
-          laneLabels: [],
-          lanes: [9],
-          timestamp: 0.005,
-          type: 'commit',
+      ]);
+      expect(data).toMatchInlineSnapshot(`
+      Object {
+        "componentMeasures": Array [],
+        "duration": 0.011,
+        "flamechart": Array [],
+        "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",
         },
-        {
-          batchUID: 0,
-          depth: 1,
-          duration: 0.001,
-          laneLabels: [],
-          lanes: [9],
-          timestamp: 0.006,
-          type: 'layout-effects',
-        },
-      ],
-      nativeEvents: [],
-      otherUserTimingMarks: [],
-      schedulingEvents: [
-        {
-          laneLabels: [],
-          lanes: [9],
-          timestamp: 0.002,
-          type: 'schedule-render',
-          warning: null,
-        },
-      ],
-      startTime: 1,
-      suspenseEvents: [],
-    });
+        "measures": Array [
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.004999999999999999,
+            "lanes": Array [
+              9,
+            ],
+            "timestamp": 0.006,
+            "type": "render-idle",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.001,
+            "lanes": Array [
+              9,
+            ],
+            "timestamp": 0.006,
+            "type": "render",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.002999999999999999,
+            "lanes": Array [
+              9,
+            ],
+            "timestamp": 0.008,
+            "type": "commit",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 1,
+            "duration": 0.0010000000000000009,
+            "lanes": Array [
+              9,
+            ],
+            "timestamp": 0.009,
+            "type": "layout-effects",
+          },
+        ],
+        "nativeEvents": Array [],
+        "otherUserTimingMarks": Array [],
+        "reactVersion": "17.0.3",
+        "schedulingEvents": Array [
+          Object {
+            "lanes": Array [
+              9,
+            ],
+            "timestamp": 0.005,
+            "type": "schedule-render",
+            "warning": null,
+          },
+        ],
+        "startTime": 1,
+        "suspenseEvents": Array [],
+      }
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should process a sample legacy render sequence', () => {
     ReactDOM.render(<div />, document.createElement('div'));
 
-    const reactVersion = require('shared/ReactVersion').default;
-
-    const userTimingData = createUserTimingData(clearedMarks);
-    expect(preprocessData(userTimingData)).toStrictEqual({
-      componentMeasures: [],
-      duration: 0.011,
-      flamechart: [],
-      measures: [
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.004999999999999999,
-          laneLabels: ['Sync'],
-          lanes: [0],
-          timestamp: 0.006,
-          type: 'render-idle',
-        },
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.001,
-          laneLabels: ['Sync'],
-          lanes: [0],
-          timestamp: 0.006,
-          type: 'render',
-        },
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.002999999999999999,
-          laneLabels: ['Sync'],
-          lanes: [0],
-          timestamp: 0.008,
-          type: 'commit',
-        },
-        {
-          batchUID: 0,
-          depth: 1,
-          duration: 0.0010000000000000009,
-          laneLabels: ['Sync'],
-          lanes: [0],
-          timestamp: 0.009,
-          type: 'layout-effects',
-        },
-      ],
-      nativeEvents: [],
-      otherUserTimingMarks: [
-        {
-          name: '__v3',
-          timestamp: 0.003,
-        },
-        {
-          name: `--react-init-${reactVersion}`,
-          timestamp: 0.004,
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      const data = preprocessData([
+        ...createBoilerplateEntries(),
+        ...createUserTimingData(clearedMarks),
+      ]);
+      expect(data).toMatchInlineSnapshot(`
+      Object {
+        "componentMeasures": Array [],
+        "duration": 0.013,
+        "flamechart": Array [],
+        "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",
         },
-      ],
-      schedulingEvents: [
-        {
-          laneLabels: ['Sync'],
-          lanes: [0],
-          timestamp: 0.005,
-          type: 'schedule-render',
-          warning: null,
-        },
-      ],
-      startTime: 1,
-      suspenseEvents: [],
-    });
+        "measures": Array [
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.008,
+            "lanes": Array [
+              0,
+            ],
+            "timestamp": 0.005,
+            "type": "render-idle",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.001,
+            "lanes": Array [
+              0,
+            ],
+            "timestamp": 0.005,
+            "type": "render",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.005999999999999999,
+            "lanes": Array [
+              0,
+            ],
+            "timestamp": 0.007,
+            "type": "commit",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 1,
+            "duration": 0.0010000000000000009,
+            "lanes": Array [
+              0,
+            ],
+            "timestamp": 0.011,
+            "type": "layout-effects",
+          },
+        ],
+        "nativeEvents": Array [],
+        "otherUserTimingMarks": Array [
+          Object {
+            "name": "__v3",
+            "timestamp": 0.003,
+          },
+        ],
+        "reactVersion": "17.0.3",
+        "schedulingEvents": Array [
+          Object {
+            "lanes": Array [
+              0,
+            ],
+            "timestamp": 0.004,
+            "type": "schedule-render",
+            "warning": null,
+          },
+        ],
+        "startTime": 4,
+        "suspenseEvents": Array [],
+      }
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should process a sample createRoot render sequence', () => {
     function App() {
       const [didMount, setDidMount] = React.useState(false);
@@ -403,150 +559,199 @@ describe(preprocessData, () => {
       return true;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
-    act(() => root.render(<App />));
-
-    const userTimingData = createUserTimingData(clearedMarks);
-    expect(preprocessData(userTimingData)).toStrictEqual({
-      componentMeasures: [
-        {
-          componentName: 'App',
-          duration: 0.001,
-          timestamp: 0.007,
-          warning: null,
-        },
-        {
-          componentName: 'App',
-          duration: 0.0010000000000000009,
-          timestamp: 0.018,
-          warning: null,
-        },
-      ],
-      duration: 0.026,
-      flamechart: [],
-      measures: [
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.006999999999999999,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.006,
-          type: 'render-idle',
-        },
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.002999999999999999,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.006,
-          type: 'render',
-        },
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.002999999999999999,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.01,
-          type: 'commit',
-        },
-        {
-          batchUID: 0,
-          depth: 1,
-          duration: 0.0010000000000000009,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.011,
-          type: 'layout-effects',
-        },
-        {
-          batchUID: 0,
-          depth: 0,
-          duration: 0.002,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.014,
-          type: 'passive-effects',
-        },
-        {
-          batchUID: 1,
-          depth: 0,
-          duration: 0.006999999999999999,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.017,
-          type: 'render-idle',
-        },
-        {
-          batchUID: 1,
-          depth: 0,
-          duration: 0.002999999999999999,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.017,
-          type: 'render',
-        },
-        {
-          batchUID: 1,
-          depth: 0,
-          duration: 0.002999999999999999,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.021,
-          type: 'commit',
-        },
-        {
-          batchUID: 1,
-          depth: 1,
-          duration: 0.0010000000000000009,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.022,
-          type: 'layout-effects',
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      const root = ReactDOM.createRoot(document.createElement('div'));
+      act(() => root.render(<App />));
+
+      const data = preprocessData([
+        ...createBoilerplateEntries(),
+        ...createUserTimingData(clearedMarks),
+      ]);
+      expect(data).toMatchInlineSnapshot(`
+      Object {
+        "componentMeasures": Array [
+          Object {
+            "componentName": "App",
+            "duration": 0.001,
+            "timestamp": 0.006,
+            "warning": null,
+          },
+          Object {
+            "componentName": "App",
+            "duration": 0.0010000000000000009,
+            "timestamp": 0.02,
+            "warning": null,
+          },
+        ],
+        "duration": 0.031,
+        "flamechart": Array [],
+        "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",
         },
-        {
-          batchUID: 1,
-          depth: 0,
-          duration: 0.0009999999999999974,
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.025,
-          type: 'passive-effects',
-        },
-      ],
-      nativeEvents: [],
-      otherUserTimingMarks: [
-        {
-          name: '__v3',
-          timestamp: 0.003,
-        },
-        {
-          name: '--react-init-17.0.3',
-          timestamp: 0.004,
-        },
-      ],
-      schedulingEvents: [
-        {
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.005,
-          type: 'schedule-render',
-          warning: null,
-        },
-        {
-          componentName: 'App',
-          laneLabels: ['Default'],
-          lanes: [4],
-          timestamp: 0.015,
-          type: 'schedule-state-update',
-          warning: null,
-        },
-      ],
-      startTime: 1,
-      suspenseEvents: [],
-    });
+        "measures": Array [
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.009999999999999998,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.005,
+            "type": "render-idle",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.003,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.005,
+            "type": "render",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.006,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.009,
+            "type": "commit",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 1,
+            "duration": 0.0010000000000000009,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.013,
+            "type": "layout-effects",
+          },
+          Object {
+            "batchUID": 0,
+            "depth": 0,
+            "duration": 0.0019999999999999983,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.016,
+            "type": "passive-effects",
+          },
+          Object {
+            "batchUID": 1,
+            "depth": 0,
+            "duration": 0.010000000000000002,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.019,
+            "type": "render-idle",
+          },
+          Object {
+            "batchUID": 1,
+            "depth": 0,
+            "duration": 0.002999999999999999,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.019,
+            "type": "render",
+          },
+          Object {
+            "batchUID": 1,
+            "depth": 0,
+            "duration": 0.006000000000000002,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.023,
+            "type": "commit",
+          },
+          Object {
+            "batchUID": 1,
+            "depth": 1,
+            "duration": 0.0010000000000000009,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.027,
+            "type": "layout-effects",
+          },
+          Object {
+            "batchUID": 1,
+            "depth": 0,
+            "duration": 0.0010000000000000009,
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.03,
+            "type": "passive-effects",
+          },
+        ],
+        "nativeEvents": Array [],
+        "otherUserTimingMarks": Array [
+          Object {
+            "name": "__v3",
+            "timestamp": 0.003,
+          },
+        ],
+        "reactVersion": "17.0.3",
+        "schedulingEvents": Array [
+          Object {
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.004,
+            "type": "schedule-render",
+            "warning": null,
+          },
+          Object {
+            "componentName": "App",
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.017,
+            "type": "schedule-state-update",
+            "warning": null,
+          },
+        ],
+        "startTime": 4,
+        "suspenseEvents": Array [],
+      }
+    `);
+    }
   });
 
   // @gate enableSchedulingProfiler
@@ -560,7 +765,7 @@ describe(preprocessData, () => {
     const invalidUserTimingData = createUserTimingData(invalidMarks);
 
     const error = spyOnDevAndProd(console, 'error');
-    preprocessData(invalidUserTimingData);
+    preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
     expect(error).toHaveBeenCalled();
   });
 
@@ -575,7 +780,7 @@ describe(preprocessData, () => {
     const invalidUserTimingData = createUserTimingData(invalidMarks);
 
     const error = spyOnDevAndProd(console, 'error');
-    preprocessData(invalidUserTimingData);
+    preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
     expect(error).toHaveBeenCalled();
   });
 
@@ -606,20 +811,26 @@ describe(preprocessData, () => {
       }),
     );
 
-    expect(preprocessData(userTimingData).otherUserTimingMarks).toStrictEqual([
-      {
-        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,
-      },
+    const data = preprocessData([
+      ...createBoilerplateEntries(),
+      ...userTimingData,
     ]);
+    expect(data.otherUserTimingMarks).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "name": "VCWithoutImage: root",
+          "timestamp": 0.003,
+        },
+        Object {
+          "name": "--a-mark-that-looks-like-one-of-ours",
+          "timestamp": 0.004,
+        },
+        Object {
+          "name": "Some other mark",
+          "timestamp": 0.005,
+        },
+      ]
+    `);
   });
 
   // TODO: Add test for flamechart parsing
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index d3d47e111bca..36beebac0b13 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -17,6 +17,7 @@ import type {
   BatchUID,
   Flamechart,
   NativeEvent,
+  Phase,
   ReactLane,
   ReactComponentMeasure,
   ReactMeasureType,
@@ -24,7 +25,7 @@ import type {
   SuspenseEvent,
 } from '../types';
 
-import {REACT_TOTAL_NUM_LANES} from '../constants';
+import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
 import InvalidProfileError from './InvalidProfileError';
 
 type MeasureStackElement = {|
@@ -52,7 +53,7 @@ const WARNING_STRINGS = {
     'An event handler scheduled a big update with React. Consider using the Transition API to defer some of this work.',
   NESTED_UPDATE:
     'A nested update was scheduled during layout. These updates require React to re-render synchronously before the browser can paint.',
-  SUSPENDD_DURING_UPATE:
+  SUSPEND_DURING_UPATE:
     '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.",
 };
@@ -80,6 +81,23 @@ export function getLanesFromTransportDecimalBitmask(
   return lanes;
 }
 
+const laneToLabelMap: Map<number, string> = new Map();
+function updateLaneToLabelMap(laneLabelTuplesString: string): void {
+  // These marks appear multiple times in the data;
+  // We only need to extact them once.
+  if (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).
+      laneToLabelMap.set(laneIndex, laneLabelTuples[laneIndex]);
+    }
+  }
+}
+
+let profilerVersion = null;
+
 function getLastType(stack: $PropertyType<ProcessorState, 'measureStack'>) {
   if (stack.length > 0) {
     const {type} = stack[stack.length - 1];
@@ -100,7 +118,6 @@ function markWorkStarted(
   type: ReactMeasureType,
   startTime: Milliseconds,
   lanes: ReactLane[],
-  laneLabels: Array<string>,
   currentProfilerData: ReactProfilerData,
   state: ProcessorState,
 ) {
@@ -115,7 +132,6 @@ function markWorkStarted(
     batchUID,
     depth,
     lanes,
-    laneLabels,
     timestamp: startTime,
     duration: 0,
   });
@@ -242,7 +258,21 @@ function processTimelineEvent(
     case 'blink.user_timing':
       const startTime = (ts - currentProfilerData.startTime) / 1000;
 
-      if (name.startsWith('--component-render-start-')) {
+      if (name.startsWith('--react-version-')) {
+        const [reactVersion] = name.substr(16).split('-');
+        currentProfilerData.reactVersion = reactVersion;
+      } else if (name.startsWith('--profiler-version-')) {
+        const [versionString] = name.substr(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.substr(20).split('-');
+        updateLaneToLabelMap(laneLabelTuplesString);
+      } else if (name.startsWith('--component-render-start-')) {
         const [componentName] = name.substr(25).split('-');
 
         if (state.currentReactComponentMeasure !== null) {
@@ -268,48 +298,44 @@ function processTimelineEvent(
           currentProfilerData.componentMeasures.push(componentMeasure);
         }
       } else if (name.startsWith('--schedule-render-')) {
-        const [laneBitmaskString, laneLabels] = name.substr(18).split('-');
+        const [laneBitmaskString] = name.substr(18).split('-');
+
         currentProfilerData.schedulingEvents.push({
           type: 'schedule-render',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
-          laneLabels: laneLabels ? laneLabels.split(',') : [],
           timestamp: startTime,
           warning: null,
         });
       } else if (name.startsWith('--schedule-forced-update-')) {
-        const [laneBitmaskString, laneLabels, componentName] = name
-          .substr(25)
-          .split('-');
+        const [laneBitmaskString, componentName] = name.substr(25).split('-');
 
         let warning = null;
         if (state.measureStack.find(({type}) => type === 'commit')) {
           // TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.
+          // This might be easier to do if we separated warnings into a second pass.
           warning = WARNING_STRINGS.NESTED_UPDATE;
         }
 
         currentProfilerData.schedulingEvents.push({
           type: 'schedule-force-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
-          laneLabels: laneLabels ? laneLabels.split(',') : [],
           componentName,
           timestamp: startTime,
           warning,
         });
       } else if (name.startsWith('--schedule-state-update-')) {
-        const [laneBitmaskString, laneLabels, componentName] = name
-          .substr(24)
-          .split('-');
+        const [laneBitmaskString, componentName] = name.substr(24).split('-');
 
         let warning = null;
         if (state.measureStack.find(({type}) => type === 'commit')) {
           // TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.
+          // This might be easier to do if we separated warnings into a second pass.
           warning = WARNING_STRINGS.NESTED_UPDATE;
         }
 
         currentProfilerData.schedulingEvents.push({
           type: 'schedule-state-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
-          laneLabels: laneLabels ? laneLabels.split(',') : [],
           componentName,
           timestamp: startTime,
           warning,
@@ -318,25 +344,18 @@ function processTimelineEvent(
 
       // React Events - suspense
       else if (name.startsWith('--suspense-suspend-')) {
-        const [id, componentName, ...rest] = name.substr(19).split('-');
+        const [id, componentName, phase, laneBitmaskString] = name
+          .substr(19)
+          .split('-');
+        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
 
-        // Older versions of the scheduling profiler data didn't contain phase or lane values.
-        let phase = null;
+        // TODO It's possible we don't have lane-to-label mapping yet (since it's logged during commit phase)
+        // We may need to do this sort of error checking in a separate pass.
         let warning = null;
-        if (rest.length === 3) {
-          switch (rest[0]) {
-            case 'mount':
-            case 'update':
-              phase = rest[0];
-              break;
-          }
-
-          if (phase === 'update') {
-            const laneLabels = rest[2];
-            // HACK This is a bit gross but the numeric lane value might change between render versions.
-            if (!laneLabels.includes('Transition')) {
-              warning = WARNING_STRINGS.SUSPENDD_DURING_UPATE;
-            }
+        if (phase === 'update') {
+          // HACK This is a bit gross but the numeric lane value might change between render versions.
+          if (lanes.some(lane => laneToLabelMap.get(lane) === 'Transition')) {
+            warning = WARNING_STRINGS.SUSPEND_DURING_UPATE;
           }
         }
 
@@ -365,7 +384,7 @@ function processTimelineEvent(
           depth,
           duration: null,
           id,
-          phase,
+          phase: ((phase: any): Phase),
           resolution: 'unresolved',
           resuspendTimestamps: null,
           timestamp: startTime,
@@ -411,15 +430,14 @@ function processTimelineEvent(
           state.nextRenderShouldGenerateNewBatchID = false;
           state.batchUID = ((state.uidCounter++: any): BatchUID);
         }
-        const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
-        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        const [laneBitmaskString] = name.substr(15).split('-');
+
         throwIfIncomplete('render', state.measureStack);
         if (getLastType(state.measureStack) !== 'render-idle') {
           markWorkStarted(
             'render-idle',
             startTime,
-            lanes,
-            laneLabels ? laneLabels.split(',') : [],
+            getLanesFromTransportDecimalBitmask(laneBitmaskString),
             currentProfilerData,
             state,
           );
@@ -427,8 +445,7 @@ function processTimelineEvent(
         markWorkStarted(
           'render',
           startTime,
-          lanes,
-          laneLabels ? laneLabels.split(',') : [],
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
           currentProfilerData,
           state,
         );
@@ -472,13 +489,12 @@ function processTimelineEvent(
       // React Measures - commits
       else if (name.startsWith('--commit-start-')) {
         state.nextRenderShouldGenerateNewBatchID = true;
-        const [laneBitmaskString, laneLabels] = name.substr(15).split('-');
-        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        const [laneBitmaskString] = name.substr(15).split('-');
+
         markWorkStarted(
           'commit',
           startTime,
-          lanes,
-          laneLabels ? laneLabels.split(',') : [],
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
           currentProfilerData,
           state,
         );
@@ -499,13 +515,12 @@ function processTimelineEvent(
 
       // React Measures - layout effects
       else if (name.startsWith('--layout-effects-start-')) {
-        const [laneBitmaskString, laneLabels] = name.substr(23).split('-');
-        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        const [laneBitmaskString] = name.substr(23).split('-');
+
         markWorkStarted(
           'layout-effects',
           startTime,
-          lanes,
-          laneLabels ? laneLabels.split(',') : [],
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
           currentProfilerData,
           state,
         );
@@ -520,13 +535,12 @@ function processTimelineEvent(
 
       // React Measures - passive effects
       else if (name.startsWith('--passive-effects-start-')) {
-        const [laneBitmaskString, laneLabels] = name.substr(24).split('-');
-        const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
+        const [laneBitmaskString] = name.substr(24).split('-');
+
         markWorkStarted(
           'passive-effects',
           startTime,
-          lanes,
-          laneLabels ? laneLabels.split(',') : [],
+          getLanesFromTransportDecimalBitmask(laneBitmaskString),
           currentProfilerData,
           state,
         );
@@ -610,9 +624,11 @@ export default function preprocessData(
     componentMeasures: [],
     duration: 0,
     flamechart,
+    laneToLabelMap,
     measures: [],
     nativeEvents: [],
     otherUserTimingMarks: [],
+    reactVersion: null,
     schedulingEvents: [],
     startTime: 0,
     suspenseEvents: [],
@@ -656,6 +672,12 @@ export default function preprocessData(
 
   timeline.forEach(event => processTimelineEvent(event, profilerData, state));
 
+  if (profilerVersion === null) {
+    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) {
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 106e4048363a..edd683043a56 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -38,7 +38,6 @@ type BaseReactEvent = {|
 type BaseReactScheduleEvent = {|
   ...BaseReactEvent,
   +lanes: ReactLane[],
-  +laneLabels: string[],
 |};
 export type ReactScheduleRenderEvent = {|
   ...BaseReactScheduleEvent,
@@ -53,12 +52,14 @@ export type ReactScheduleForceUpdateEvent = {|
   +type: 'schedule-force-update',
 |};
 
+export type Phase = 'mount' | 'update';
+
 export type SuspenseEvent = {|
   ...BaseReactEvent,
   depth: number,
   duration: number | null,
   +id: string,
-  +phase: 'mount' | 'update' | null,
+  +phase: Phase | null,
   resolution: 'rejected' | 'resolved' | 'unresolved',
   resuspendTimestamps: Array<number> | null,
   +type: 'suspense',
@@ -84,7 +85,6 @@ export type BatchUID = number;
 export type ReactMeasure = {|
   +type: ReactMeasureType,
   +lanes: ReactLane[],
-  +laneLabels: string[],
   +timestamp: Milliseconds,
   +duration: Milliseconds,
   +batchUID: BatchUID,
@@ -127,9 +127,11 @@ export type ReactProfilerData = {|
   componentMeasures: ReactComponentMeasure[],
   duration: number,
   flamechart: Flamechart,
+  laneToLabelMap: Map<ReactLane, string>,
   measures: ReactMeasure[],
   nativeEvents: NativeEvent[],
   otherUserTimingMarks: UserTimingMark[],
+  reactVersion: string | null,
   schedulingEvents: SchedulingEvent[],
   startTime: number,
   suspenseEvents: SuspenseEvent[],
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
index 1b99d20a54c3..8394bcf10577 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
@@ -105,14 +105,10 @@ class ResizeBar extends View {
 
       const drawableRect = intersectionOfRects(labelRect, this.visibleArea);
 
-      drawText(
-        this._label,
-        context,
-        labelRect,
-        drawableRect,
-        'center',
-        COLORS.REACT_RESIZE_BAR_DOT,
-      );
+      drawText(this._label, context, labelRect, drawableRect, {
+        fillStyle: COLORS.REACT_RESIZE_BAR_DOT,
+        textAlign: 'center',
+      });
     } else {
       // Otherwise draw horizontally centered resize bar dots
       context.beginPath();
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 8afcf85d4151..2476ce32839d 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -149,12 +149,16 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
     '--color-scheduling-profiler-react-render': '#9fc3f3',
     '--color-scheduling-profiler-react-render-hover': '#83afe9',
+    '--color-scheduling-profiler-react-render-text': '#11365e',
     '--color-scheduling-profiler-react-commit': '#c88ff0',
     '--color-scheduling-profiler-react-commit-hover': '#b281d6',
+    '--color-scheduling-profiler-react-commit-text': '#3e2c4a',
     '--color-scheduling-profiler-react-layout-effects': '#b281d6',
     '--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
+    '--color-scheduling-profiler-react-layout-effects-text': '#3e2c4a',
     '--color-scheduling-profiler-react-passive-effects': '#b281d6',
     '--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
+    '--color-scheduling-profiler-react-passive-effects-text': '#3e2c4a',
     '--color-scheduling-profiler-react-schedule': '#9fc3f3',
     '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
     '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
@@ -280,12 +284,16 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-idle-hover': '#465269',
     '--color-scheduling-profiler-react-render': '#2683E2',
     '--color-scheduling-profiler-react-render-hover': '#1a76d4',
+    '--color-scheduling-profiler-react-render-text': '#11365e',
     '--color-scheduling-profiler-react-commit': '#731fad',
     '--color-scheduling-profiler-react-commit-hover': '#611b94',
+    '--color-scheduling-profiler-react-commit-text': '#e5c1ff',
     '--color-scheduling-profiler-react-layout-effects': '#611b94',
     '--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
+    '--color-scheduling-profiler-react-layout-effects-text': '#e5c1ff',
     '--color-scheduling-profiler-react-passive-effects': '#611b94',
     '--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
+    '--color-scheduling-profiler-react-passive-effects-text': '#e5c1ff',
     '--color-scheduling-profiler-react-schedule': '#2683E2',
     '--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
     '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 59e04b1865d4..2ad6b6a69a49 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -25,7 +25,7 @@ import {
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 
-// Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
+// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
 export const TotalLanes = 31;
@@ -80,46 +80,44 @@ export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000
 
 // This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
 // It should be kept in sync with the Lanes values above.
-export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
+export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
-    const labels = [];
-    if (lanes & SyncLane) {
-      labels.push('Sync');
+    if (lane & SyncLane) {
+      return 'Sync';
     }
-    if (lanes & InputContinuousHydrationLane) {
-      labels.push('InputContinuousHydration');
+    if (lane & InputContinuousHydrationLane) {
+      return 'InputContinuousHydration';
     }
-    if (lanes & InputContinuousLane) {
-      labels.push('InputContinuous');
+    if (lane & InputContinuousLane) {
+      return 'InputContinuous';
     }
-    if (lanes & DefaultHydrationLane) {
-      labels.push('DefaultHydration');
+    if (lane & DefaultHydrationLane) {
+      return 'DefaultHydration';
     }
-    if (lanes & DefaultLane) {
-      labels.push('Default');
+    if (lane & DefaultLane) {
+      return 'Default';
     }
-    if (lanes & TransitionHydrationLane) {
-      labels.push('TransitionHydration');
+    if (lane & TransitionHydrationLane) {
+      return 'TransitionHydration';
     }
-    if (lanes & TransitionLanes) {
-      labels.push('Transition(s)');
+    if (lane & TransitionLanes) {
+      return 'Transition';
     }
-    if (lanes & RetryLanes) {
-      labels.push('Retry(s)');
+    if (lane & RetryLanes) {
+      return 'Retry';
     }
-    if (lanes & SelectiveHydrationLane) {
-      labels.push('SelectiveHydration');
+    if (lane & SelectiveHydrationLane) {
+      return 'SelectiveHydration';
     }
-    if (lanes & IdleHydrationLane) {
-      labels.push('IdleHydration');
+    if (lane & IdleHydrationLane) {
+      return 'IdleHydration';
     }
-    if (lanes & IdleLane) {
-      labels.push('Idle');
+    if (lane & IdleLane) {
+      return 'Idle';
     }
-    if (lanes & OffscreenLane) {
-      labels.push('Offscreen');
+    if (lane & OffscreenLane) {
+      return 'Offscreen';
     }
-    return labels;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 458d3ec6290e..3e704f54e676 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -25,7 +25,7 @@ import {
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 
-// Lane values below should be kept in sync with getLabelsForLanes(), used by react-devtools-scheduling-profiler.
+// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
 
 export const TotalLanes = 31;
@@ -80,46 +80,44 @@ export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000
 
 // This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
 // It should be kept in sync with the Lanes values above.
-export function getLabelsForLanes(lanes: Lanes): Array<string> | void {
+export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
-    const labels = [];
-    if (lanes & SyncLane) {
-      labels.push('Sync');
+    if (lane & SyncLane) {
+      return 'Sync';
     }
-    if (lanes & InputContinuousHydrationLane) {
-      labels.push('InputContinuousHydration');
+    if (lane & InputContinuousHydrationLane) {
+      return 'InputContinuousHydration';
     }
-    if (lanes & InputContinuousLane) {
-      labels.push('InputContinuous');
+    if (lane & InputContinuousLane) {
+      return 'InputContinuous';
     }
-    if (lanes & DefaultHydrationLane) {
-      labels.push('DefaultHydration');
+    if (lane & DefaultHydrationLane) {
+      return 'DefaultHydration';
     }
-    if (lanes & DefaultLane) {
-      labels.push('Default');
+    if (lane & DefaultLane) {
+      return 'Default';
     }
-    if (lanes & TransitionHydrationLane) {
-      labels.push('TransitionHydration');
+    if (lane & TransitionHydrationLane) {
+      return 'TransitionHydration';
     }
-    if (lanes & TransitionLanes) {
-      labels.push('Transition(s)');
+    if (lane & TransitionLanes) {
+      return 'Transition';
     }
-    if (lanes & RetryLanes) {
-      labels.push('Retry(s)');
+    if (lane & RetryLanes) {
+      return 'Retry';
     }
-    if (lanes & SelectiveHydrationLane) {
-      labels.push('SelectiveHydration');
+    if (lane & SelectiveHydrationLane) {
+      return 'SelectiveHydration';
     }
-    if (lanes & IdleHydrationLane) {
-      labels.push('IdleHydration');
+    if (lane & IdleHydrationLane) {
+      return 'IdleHydration';
     }
-    if (lanes & IdleLane) {
-      labels.push('Idle');
+    if (lane & IdleLane) {
+      return 'Idle';
     }
-    if (lanes & OffscreenLane) {
-      labels.push('Offscreen');
+    if (lane & OffscreenLane) {
+      return 'Offscreen';
     }
-    return labels;
   }
 }
 
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index fc7a7499c601..b4e7f83d3a15 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -17,13 +17,22 @@ import {
 } from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-scheduling-profiler/src/constants';
 
-import {getLabelsForLanes as getLabelsForLanes_old} from 'react-reconciler/src/ReactFiberLane.old';
-import {getLabelsForLanes as getLabelsForLanes_new} from 'react-reconciler/src/ReactFiberLane.new';
+import {
+  getLabelForLane as getLabelForLane_old,
+  TotalLanes as TotalLanes_old,
+} from 'react-reconciler/src/ReactFiberLane.old';
+import {
+  getLabelForLane as getLabelForLane_new,
+  TotalLanes as TotalLanes_new,
+} from 'react-reconciler/src/ReactFiberLane.new';
 
-const getLabelsForLanes = enableNewReconciler
-  ? getLabelsForLanes_new
-  : getLabelsForLanes_old;
+const getLabelForLane = enableNewReconciler
+  ? getLabelForLane_new
+  : getLabelForLane_old;
+
+const TotalLanes = enableNewReconciler ? TotalLanes_new : TotalLanes_old;
 
 /**
  * If performance exists and supports the subset of the User Timing API that we
@@ -59,14 +68,24 @@ if (enableSchedulingProfiler) {
   }
 }
 
-export function formatLanes(laneOrLanes: Lane | Lanes): string {
-  let labels = getLabelsForLanes(laneOrLanes);
-  if (labels != null) {
-    labels = labels.sort().join(',');
-  } else {
-    labels = '';
+const laneLabels: Array<string> = [];
+
+export function getLaneLabels(): Array<string> {
+  if (laneLabels.length === 0) {
+    let lane = 1;
+    for (let index = 0; index < TotalLanes; index++) {
+      laneLabels.push(((getLabelForLane(lane): any): string));
+
+      lane *= 2;
+    }
   }
-  return `${laneOrLanes}-${labels}`;
+  return laneLabels;
+}
+
+function markLaneToLabelMetadata() {
+  getLaneLabels();
+
+  markAndClear(`--react-lane-labels-${laneLabels.join(',')}`);
 }
 
 function markAndClear(name) {
@@ -74,17 +93,27 @@ function markAndClear(name) {
   performance.clearMarks(name);
 }
 
-// Create a mark on React initialization
-if (enableSchedulingProfiler) {
-  if (supportsUserTimingV3) {
-    markAndClear(`--react-init-${ReactVersion}`);
-  }
+function markVersionMetadata() {
+  markAndClear(`--react-version-${ReactVersion}`);
+  markAndClear(`--profiler-version-${SCHEDULING_PROFILER_VERSION}`);
 }
 
 export function markCommitStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
-      markAndClear(`--commit-start-${formatLanes(lanes)}`);
+      markAndClear(`--commit-start-${lanes}`);
+
+      // Certain types of metadata should be logged infrequently.
+      // Normally we would log this during module init,
+      // but there's no guarantee a user is profiling at that time.
+      // Commits happen infrequently (less than renders or state updates)
+      // so we log this extra information along with a commit.
+      // It will likely be logged more than once but that's okay.
+      //
+      // TODO Once DevTools supports starting/stopping the profiler,
+      // we can log this data only once (when started) and remove the per-commit logging.
+      markVersionMetadata();
+      markLaneToLabelMetadata();
     }
   }
 }
@@ -101,6 +130,7 @@ export function markComponentRenderStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
       markAndClear(`--component-render-start-${componentName}`);
     }
   }
@@ -137,11 +167,9 @@ export function markComponentSuspended(
       const id = getWakeableID(wakeable);
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
       const phase = fiber.alternate === null ? 'mount' : 'update';
-      // TODO (scheduling profiler) Add component stack id if we re-add component stack info.
+      // TODO (scheduling profiler) Add component stack id
       markAndClear(
-        `--suspense-${eventType}-${id}-${componentName}-${phase}-${formatLanes(
-          lanes,
-        )}`,
+        `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}`,
       );
       wakeable.then(
         () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
@@ -154,7 +182,7 @@ export function markComponentSuspended(
 export function markLayoutEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
-      markAndClear(`--layout-effects-start-${formatLanes(lanes)}`);
+      markAndClear(`--layout-effects-start-${lanes}`);
     }
   }
 }
@@ -170,7 +198,7 @@ export function markLayoutEffectsStopped(): void {
 export function markPassiveEffectsStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
-      markAndClear(`--passive-effects-start-${formatLanes(lanes)}`);
+      markAndClear(`--passive-effects-start-${lanes}`);
     }
   }
 }
@@ -186,7 +214,7 @@ export function markPassiveEffectsStopped(): void {
 export function markRenderStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
-      markAndClear(`--render-start-${formatLanes(lanes)}`);
+      markAndClear(`--render-start-${lanes}`);
     }
   }
 }
@@ -210,7 +238,7 @@ export function markRenderStopped(): void {
 export function markRenderScheduled(lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
-      markAndClear(`--schedule-render-${formatLanes(lane)}`);
+      markAndClear(`--schedule-render-${lane}`);
     }
   }
 }
@@ -219,10 +247,8 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO Add component stack id
-      markAndClear(
-        `--schedule-forced-update-${formatLanes(lane)}-${componentName}`,
-      );
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
     }
   }
 }
@@ -231,10 +257,8 @@ export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO Add component stack id
-      markAndClear(
-        `--schedule-state-update-${formatLanes(lane)}-${componentName}`,
-      );
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--schedule-state-update-${lane}-${componentName}`);
     }
   }
 }
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 4b496b732a21..8680d19b710b 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -10,17 +10,6 @@
 
 'use strict';
 
-// This test is *.internal so that it can import this shared file.
-import ReactVersion from 'shared/ReactVersion';
-
-// Hard-coding because importing will not work with bundle tests and to
-// avoid leaking exports for lanes that are only imported in this test.
-const ReactFiberLane = {
-  SyncLane: /*        */ 0b0000000000000000000000000000001,
-  DefaultLane: /*     */ 0b0000000000000000000000000010000,
-  TransitionLane1: /* */ 0b0000000000000000000000001000000,
-};
-
 describe('SchedulingProfiler', () => {
   let React;
   let ReactTestRenderer;
@@ -30,7 +19,6 @@ describe('SchedulingProfiler', () => {
 
   let clearedMarks;
   let featureDetectionMarkName = null;
-  let formatLanes;
   let marks;
 
   function createUserTimingPolyfill() {
@@ -63,16 +51,10 @@ describe('SchedulingProfiler', () => {
     clearedMarks.splice(0);
   }
 
-  function expectMarksToContain(expectedMarks) {
-    expect(clearedMarks).toContain(expectedMarks);
-  }
-
-  function expectMarksToEqual(expectedMarks) {
-    expect(
-      clearedMarks[0] === featureDetectionMarkName
-        ? clearedMarks.slice(1)
-        : clearedMarks,
-    ).toEqual(expectedMarks);
+  function getMarks() {
+    return clearedMarks[0] === featureDetectionMarkName
+      ? clearedMarks.slice(1)
+      : clearedMarks;
   }
 
   beforeEach(() => {
@@ -88,9 +70,6 @@ describe('SchedulingProfiler', () => {
 
     Scheduler = require('scheduler');
     act = require('jest-react').act;
-
-    const SchedulingProfiler = require('react-reconciler/src/SchedulingProfiler');
-    formatLanes = SchedulingProfiler.formatLanes;
   });
 
   afterEach(() => {
@@ -103,54 +82,62 @@ describe('SchedulingProfiler', () => {
   // @gate !enableSchedulingProfiler
   it('should not mark if enableSchedulingProfiler is false', () => {
     ReactTestRenderer.create(<div />);
-    expectMarksToEqual([]);
+    expect(getMarks()).toEqual([]);
   });
 
-  // @gate enableSchedulingProfiler
-  it('should log React version on initialization', () => {
-    expectMarksToEqual([`--react-init-${ReactVersion}`]);
-  });
-
-  // @gate enableSchedulingProfiler
   it('should mark sync render without suspends or state updates', () => {
     ReactTestRenderer.create(<div />);
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
-      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--layout-effects-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-1",
+        "--render-start-1",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark concurrent render without suspends or state updates', () => {
     ReactTestRenderer.create(<div />, {unstable_isConcurrent: true});
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expectMarksToEqual([
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--layout-effects-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark render yields', async () => {
     function Bar() {
       Scheduler.unstable_yieldValue('Bar');
@@ -170,30 +157,31 @@ describe('SchedulingProfiler', () => {
       // Do one step of work.
       expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
 
-      expectMarksToEqual([
-        `--react-init-${ReactVersion}`,
-        `--schedule-render-${formatLanes(ReactFiberLane.TransitionLane1)}`,
-        `--render-start-${formatLanes(ReactFiberLane.TransitionLane1)}`,
-        '--component-render-start-Foo',
-        '--component-render-stop',
-        '--render-yield',
-      ]);
+      if (gate(flags => flags.enableSchedulingProfiler)) {
+        expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-64",
+          "--render-start-64",
+          "--component-render-start-Foo",
+          "--component-render-stop",
+          "--render-yield",
+        ]
+      `);
+      }
     } else {
       ReactNoop.render(<Foo />);
 
       // Do one step of work.
       expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
 
-      expectMarksToEqual([
-        `--react-init-${ReactVersion}`,
-        `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-        `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-        '--render-yield',
-      ]);
+      if (gate(flags => flags.enableSchedulingProfiler)) {
+        expect(getMarks()).toMatchInlineSnapshot(`
+        Array []
+      `);
+      }
     }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark sync render with suspense that resolves', async () => {
     const fakeSuspensePromise = Promise.resolve(true);
     function Example() {
@@ -206,27 +194,38 @@ describe('SchedulingProfiler', () => {
       </React.Suspense>,
     );
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
-      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--suspense-suspend-0-Example-mount-1-Sync',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--layout-effects-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-1",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-1",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     await fakeSuspensePromise;
-    expectMarksToEqual(['--suspense-resolved-0-Example']);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--suspense-resolved-0-Example",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark sync render with suspense that rejects', async () => {
     const fakeSuspensePromise = Promise.reject(new Error('error'));
     function Example() {
@@ -239,27 +238,38 @@ describe('SchedulingProfiler', () => {
       </React.Suspense>,
     );
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
-      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--suspense-suspend-0-Example-mount-1-Sync',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--layout-effects-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-1",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-1",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     await expect(fakeSuspensePromise).rejects.toThrow();
-    expectMarksToEqual(['--suspense-rejected-0-Example']);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--suspense-rejected-0-Example",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark concurrent render with suspense that resolves', async () => {
     const fakeSuspensePromise = Promise.resolve(true);
     function Example() {
@@ -273,34 +283,49 @@ describe('SchedulingProfiler', () => {
       {unstable_isConcurrent: true},
     );
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expectMarksToEqual([
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--suspense-suspend-0-Example-mount-16-Default',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--layout-effects-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-16",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     await fakeSuspensePromise;
-    expectMarksToEqual(['--suspense-resolved-0-Example']);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--suspense-resolved-0-Example",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark concurrent render with suspense that rejects', async () => {
     const fakeSuspensePromise = Promise.reject(new Error('error'));
     function Example() {
@@ -314,34 +339,49 @@ describe('SchedulingProfiler', () => {
       {unstable_isConcurrent: true},
     );
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expectMarksToEqual([
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--suspense-suspend-0-Example-mount-16-Default',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--layout-effects-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-16",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     await expect(fakeSuspensePromise).rejects.toThrow();
-    expectMarksToEqual(['--suspense-rejected-0-Example']);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--suspense-rejected-0-Example",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark cascading class component state updates', () => {
     class Example extends React.Component {
       state = {didMount: false};
@@ -355,35 +395,47 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expectMarksToEqual([
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,
-      '--layout-effects-stop',
-      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--commit-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--schedule-state-update-1-Example",
+        "--layout-effects-stop",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark cascading class component force updates', () => {
     class Example extends React.Component {
       componentDidMount() {
@@ -396,37 +448,47 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expectMarksToEqual([
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--schedule-forced-update-${formatLanes(
-        ReactFiberLane.SyncLane,
-      )}-Example`,
-      '--layout-effects-stop',
-      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--commit-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--schedule-forced-update-1-Example",
+        "--layout-effects-stop",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark render phase state updates for class component', () => {
     class Example extends React.Component {
       state = {didRender: false};
@@ -440,10 +502,13 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
@@ -451,14 +516,26 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    expectMarksToContain(
-      `--schedule-state-update-${formatLanes(
-        ReactFiberLane.DefaultLane,
-      )}-Example`,
-    );
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--schedule-state-update-16-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark render phase force updates for class component', () => {
     class Example extends React.Component {
       state = {didRender: false};
@@ -472,10 +549,13 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
@@ -483,14 +563,26 @@ describe('SchedulingProfiler', () => {
       expect(Scheduler).toFlushUntilNextPaint([]);
     }).toErrorDev('Cannot update during an existing state transition');
 
-    expectMarksToContain(
-      `--schedule-forced-update-${formatLanes(
-        ReactFiberLane.DefaultLane,
-      )}-Example`,
-    );
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--schedule-forced-update-16-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark cascading layout updates', () => {
     function Example() {
       const [didMount, setDidMount] = React.useState(false);
@@ -502,37 +594,49 @@ describe('SchedulingProfiler', () => {
 
     ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
 
     clearPendingMarks();
 
     expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expectMarksToEqual([
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`,
-      '--layout-effects-stop',
-      `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`,
-      '--commit-stop',
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--schedule-state-update-1-Example",
+        "--layout-effects-stop",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 
   // This test is coupled to lane implementation details, so I'm disabling it in
   // the new fork until it stabilizes so we don't have to repeatedly update it.
-  // @gate enableSchedulingProfiler
   it('should mark cascading passive updates', () => {
     function Example() {
       const [didMount, setDidMount] = React.useState(false);
@@ -546,32 +650,38 @@ describe('SchedulingProfiler', () => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
-    expectMarksToEqual([
-      `--react-init-${ReactVersion}`,
-      `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--layout-effects-stop',
-      '--commit-stop',
-      `--passive-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      `--schedule-state-update-${formatLanes(
-        ReactFiberLane.DefaultLane,
-      )}-Example`,
-      '--passive-effects-stop',
-      `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--component-render-start-Example',
-      '--component-render-stop',
-      '--render-stop',
-      `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      '--commit-stop',
-    ]);
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+        "--passive-effects-start-16",
+        "--schedule-state-update-16-Example",
+        "--passive-effects-stop",
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('should mark render phase updates', () => {
     function Example() {
       const [didRender, setDidRender] = React.useState(false);
@@ -585,10 +695,24 @@ describe('SchedulingProfiler', () => {
       ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
     });
 
-    expectMarksToContain(
-      `--schedule-state-update-${formatLanes(
-        ReactFiberLane.DefaultLane,
-      )}-Example`,
-    );
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--schedule-state-update-16-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-17.0.3",
+        "--profiler-version-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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index 226607eaed2e..09fdb95b01e6 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -15,12 +15,10 @@
 describe('SchedulingProfiler labels', () => {
   let React;
   let ReactDOM;
-  let ReactFiberLane;
 
   let act;
   let clearedMarks;
   let featureDetectionMarkName = null;
-  let formatLanes;
   let marks;
 
   function polyfillJSDomUserTiming() {
@@ -75,14 +73,6 @@ describe('SchedulingProfiler labels', () => {
 
     const TestUtils = require('react-dom/test-utils');
     act = TestUtils.act;
-
-    const SchedulingProfiler = require('react-reconciler/src/SchedulingProfiler');
-    formatLanes = SchedulingProfiler.formatLanes;
-
-    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFiberLane = ReactFeatureFlags.enableNewReconciler
-      ? require('react-reconciler/src/ReactFiberLane.new')
-      : require('react-reconciler/src/ReactFiberLane.old');
   });
 
   afterEach(() => {
@@ -92,29 +82,45 @@ describe('SchedulingProfiler labels', () => {
     delete global.performance;
   });
 
-  // @gate enableSchedulingProfiler
   it('regression test SyncLane', () => {
     ReactDOM.render(<div />, document.createElement('div'));
-    expect(clearedMarks).toContain(
-      `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`,
-    );
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "__v3",
+        "--schedule-render-1",
+        "--render-start-1",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('regression test DefaultLane', () => {
-    const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
-
-    act(() => {
-      root.render(<div />);
-      expect(clearedMarks).toContain(
-        `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`,
-      );
-    });
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      act(() => {
+        const container = document.createElement('div');
+        const root = ReactDOM.createRoot(container);
+
+        root.render(<div />);
+        expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "__v3",
+          "--schedule-render-16",
+        ]
+      `);
+      });
+    }
   });
 
-  // @gate enableSchedulingProfiler
-  // @gate !enableLegacyFBSupport
   it('regression test InputDiscreteLane', () => {
     const container = document.createElement('div');
     const root = ReactDOM.createRoot(container);
@@ -128,24 +134,41 @@ describe('SchedulingProfiler labels', () => {
       return <button ref={targetRef} onClick={handleClick} />;
     }
 
-    act(() => {
-      root.render(<App />);
-    });
-
-    clearedMarks.splice(0);
-
-    act(() => {
-      targetRef.current.click();
-    });
-    expect(clearedMarks).toContain(
-      `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-App`,
-    );
+    if (
+      gate(
+        flags => flags.enableSchedulingProfiler && !flags.enableLegacyFBSupport,
+      )
+    ) {
+      act(() => {
+        root.render(<App />);
+      });
+
+      clearedMarks.splice(0);
+
+      act(() => {
+        targetRef.current.click();
+      });
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-state-update-1-App",
+        "--render-start-1",
+        "--component-render-start-App",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-17.0.3",
+        "--profiler-version-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",
+      ]
+    `);
+    }
   });
 
-  // @gate enableSchedulingProfiler
   it('regression test InputContinuousLane', () => {
-    const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
     const targetRef = React.createRef(null);
 
     function App() {
@@ -154,21 +177,38 @@ describe('SchedulingProfiler labels', () => {
       return <div ref={targetRef} onMouseOver={handleMouseOver} />;
     }
 
-    act(() => {
-      root.render(<App />);
-    });
-
-    clearedMarks.splice(0);
-
-    act(() => {
-      const event = document.createEvent('MouseEvents');
-      event.initEvent('mouseover', true, true);
-      dispatchAndSetCurrentEvent(targetRef.current, event);
-    });
-    expect(clearedMarks).toContain(
-      `--schedule-state-update-${formatLanes(
-        ReactFiberLane.InputContinuousLane,
-      )}-App`,
-    );
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container);
+
+      act(() => {
+        root.render(<App />);
+      });
+
+      clearedMarks.splice(0);
+
+      act(() => {
+        const event = document.createEvent('MouseEvents');
+        event.initEvent('mouseover', true, true);
+        dispatchAndSetCurrentEvent(targetRef.current, event);
+      });
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-state-update-4-App",
+        "--render-start-4",
+        "--component-render-start-App",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-4",
+        "--react-version-17.0.3",
+        "--profiler-version-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-4",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+    }
   });
 });

From b9934d6db5d3f5ad94929f0d05b901c3999d34e3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 5 Aug 2021 16:36:59 -0400
Subject: [PATCH 0746/1603] [DevTools] Hook names are correctly extracted when
 parsing nested hook calls (#22037)

## Summary

This commit fixes an issue where DevTools would currently not correctly extract the hook names for a hook call when the hook call was nested under *another* hook call, e.g.:

```javascript
function Component() {
  const InnerComponent = useMemo(() => () => {
    const [state, setState] = useState(0);

    return state;
  });
  return null;
};
```

Although it seems pretty rare to encounter this case in actual product code, DevTools wasn't handling it correctly:

**Expected Names:**
- `InnerComponent` for the `useMemo()` call.
- `state` for the `useState()` call.

**Actual**
- `InnerComponent` for the `useMemo()` call.
- `InnerComponent` for the `useState()` call.

The reason that we were extracting the name for the nested hook call incorrectly is that the `checkNodeLocation` function (which attempts to check if the location of the hook matches the location in the original source code), was too "lenient" and would return a match even if the start lines of the locations didn't match.

Specifically, for our example, it would consider that the location of the outer hook call "matched" the location of the inner hook call (even though they were on different lines), and would then return the wrong hook name.


### Fix

The fix in this commit is to update the `checkNodeLocation` function to more strictly check for matching start lines. The assumption here is that if 2 locations are on different starting lines, they can't possibly correspond to the same hook call.

## Test Plan

- yarn flow
- Tests still pass
  - yarn test
  - yarn test-build-devtools
- new regression tests added
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).
![image](https://user-images.githubusercontent.com/1271509/128409571-d62e0a74-6b7b-4c3f-ad86-6799ecd71962.png)

![image](https://user-images.githubusercontent.com/1271509/128409943-f898f27b-67ab-4260-a931-40d9c1942395.png)

![image](https://user-images.githubusercontent.com/1271509/128410326-79a0f822-55b1-4b90-a9b9-78f13fa0b5c5.png)
---
 .../__source__/ComponentWithNestedHooks.js    | 22 ++++++++++
 .../__source__/__compiled__/bundle/index.js   | 41 +++++++++++++++---
 .../__compiled__/bundle/index.js.map          |  2 +-
 .../external/ComponentWithNestedHooks.js      | 28 ++++++++++++
 .../external/ComponentWithNestedHooks.js.map  |  1 +
 .../__source__/__compiled__/external/index.js |  8 ++++
 .../__compiled__/external/index.js.map        |  2 +-
 .../inline/ComponentWithNestedHooks.js        | 28 ++++++++++++
 .../__source__/__compiled__/inline/index.js   | 10 ++++-
 .../no-columns/ComponentWithNestedHooks.js    | 28 ++++++++++++
 .../__compiled__/no-columns/index.js          | 10 ++++-
 .../ComponentWithNestedHooks.js               | 22 ++++++++++
 .../src/__tests__/__source__/index.js         |  1 +
 .../src/__tests__/parseHookNames-test.js      | 43 +++++++++++++++++++
 .../react-devtools-extensions/src/astUtils.js |  2 +-
 15 files changed, 237 insertions(+), 11 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js

diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..f40024a5b709
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithNestedHooks.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+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-extensions/src/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
index 5c586ae7b229..461040feb25e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
@@ -124,7 +124,35 @@ function Component$3() {
  * @flow
  */
 
-function Component$4() {
+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;
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+function Component$5() {
   const [count, setCount] = React.useState(0);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
     onClick: () => setCount(count + 1)
@@ -139,7 +167,7 @@ function Component$4() {
  *
  * @flow
  */
-function Component$5() {
+function Component$6() {
   const [count, setCount] = React.useState(0);
   return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
     onClick: () => setCount(count + 1)
@@ -154,7 +182,7 @@ function Component$5() {
  *
  * @flow
  */
-function Component$6() {
+function Component$7() {
   const [count] = require('react').useState(0);
 
   return count;
@@ -261,9 +289,10 @@ exports.ComponentUsingHooksIndirectly = Component;
 exports.ComponentWithCustomHook = Component$1;
 exports.ComponentWithExternalCustomHooks = Component$2;
 exports.ComponentWithMultipleHooksPerLine = Component$3;
-exports.ContainingStringSourceMappingURL = Component$4;
-exports.Example = Component$5;
-exports.InlineRequire = Component$6;
+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-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
index 3b192b372c5f..75dabacdab28 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../ComponentUsingHooksIndirectly.js","../../ComponentWithCustomHook.js","../../useTheme.js","../../ComponentWithExternalCustomHooks.js","../../ComponentWithMultipleHooksPerLine.js","../../ContainingStringSourceMappingURL.js","../../Example.js","../../InlineRequire.js","../../ToDoList.js"],"sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","A","B","a","b","c","d","require","ListItem","item","removeItem","toggleItem","handleDelete","useCallback","handleToggle","React.createElement","isComplete","text","List","props","newItemText","setNewItemText","items","setItems","id","uid","setUID","handleKeyPress","event","key","handleChange","currentTarget","value","itemToRemove","filter","itemToToggle","index","findIndex","slice","concat","Fragment","map"],"mappings":";;;;;;;;;AAAA;;;;;;;;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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;AC3CD;;;;;;;;AASA,AAEO,SAASP,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMK,UAAU,GAAGD,eAAa,EAAhC;AAEAE,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;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;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAAShB,WAAT,GAAqB;AAC1B,QAAMgB,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOL,qDAAaM,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASd,WAAT,GAAqB;AAC1B,QAAMqB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;AASA;AAIA,AAAO,SAASxB,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,IAAUsB,OAAO,CAAC,OAAD,CAAP,CAAiBvB,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOC,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAASuB,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcC,KAAd,EAAqB;AAC1B,QAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCrC,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAACsC,KAAD,EAAQC,QAAR,IAAoBvC,cAAQ,CAAC,CACjC;AAACwC,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,CAAD,CAAlC;AAKA,QAAM,CAACQ,GAAD,EAAMC,MAAN,IAAgB1C,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMO,WAAW,GAAGsB,iBAAW,CAAC,MAAM;AACpC,QAAIO,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,GAb8B,EAa5B,CAACD,WAAD,EAAcE,KAAd,EAAqBG,GAArB,CAb4B,CAA/B;AAeA,QAAME,cAAc,GAAGd,iBAAW,CAChCe,KAAK,IAAI;AACP,QAAIA,KAAK,CAACC,GAAN,KAAc,OAAlB,EAA2B;AACzBtC,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAMuC,YAAY,GAAGjB,iBAAW,CAC9Be,KAAK,IAAI;AACPP,IAAAA,cAAc,CAACO,KAAK,CAACG,aAAN,CAAoBC,KAArB,CAAd;AACD,GAH6B,EAI9B,CAACX,cAAD,CAJ8B,CAAhC;AAOA,QAAMX,UAAU,GAAGG,iBAAW,CAC5BoB,YAAY,IAAIV,QAAQ,CAACD,KAAK,CAACY,MAAN,CAAazB,IAAI,IAAIA,IAAI,KAAKwB,YAA9B,CAAD,CADI,EAE5B,CAACX,KAAD,CAF4B,CAA9B;AAKA,QAAMX,UAAU,GAAGE,iBAAW,CAC5BsB,YAAY,IAAI;AACd;AACA;AACA,UAAMC,KAAK,GAAGd,KAAK,CAACe,SAAN,CAAgB5B,IAAI,IAAIA,IAAI,CAACe,EAAL,KAAYW,YAAY,CAACX,EAAjD,CAAd;AAEAD,IAAAA,QAAQ,CACND,KAAK,CACFgB,KADH,CACS,CADT,EACYF,KADZ,EAEGG,MAFH,CAEU,EACN,GAAGJ,YADG;AAENnB,MAAAA,UAAU,EAAE,CAACmB,YAAY,CAACnB;AAFpB,KAFV,EAMGuB,MANH,CAMUjB,KAAK,CAACgB,KAAN,CAAYF,KAAK,GAAG,CAApB,CANV,CADM,CAAR;AASD,GAf2B,EAgB5B,CAACd,KAAD,CAhB4B,CAA9B;AAmBA,sBACEP,oBAACyB,cAAD,qBACEzB,uCADF,eAEEA;AACE,IAAA,IAAI,EAAC,MADP;AAEE,IAAA,WAAW,EAAC,kBAFd;AAGE,IAAA,KAAK,EAAEK,WAHT;AAIE,IAAA,QAAQ,EAAEU,YAJZ;AAKE,IAAA,UAAU,EAAEH;AALd,IAFF,eASEZ;AAAQ,IAAA,QAAQ,EAAEK,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAE7B;AAA/C,kBACEwB;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGO,KAAK,CAACmB,GAAN,CAAUhC,IAAI,iBACbM,oBAAC,QAAD;AACE,IAAA,GAAG,EAAEN,IAAI,CAACe,EADZ;AAEE,IAAA,IAAI,EAAEf,IAFR;AAGE,IAAA,UAAU,EAAEC,UAHd;AAIE,IAAA,UAAU,EAAEC;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"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) Facebook, Inc. and its 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) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","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":";;;;;;;;;AAAA;;;;;;;;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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;AC3CD;;;;;;;;AASA,AAEO,SAASP,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMK,UAAU,GAAGD,eAAa,EAAhC;AAEAE,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;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;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAAShB,WAAT,GAAqB;AAC1B,QAAMgB,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOL,qDAAaM,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASd,WAAT,GAAqB;AAC1B,QAAMqB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;;AAQA,MAAM;AAACC,EAAAA,OAAD;AAAUvB,EAAAA;AAAV,IAAsBwB,cAA5B;;AAEA,SAAS1B,WAAT,CAAmB2B,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGH,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACI,KAAD,IAAU3B,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAO2B,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAED,4BAAc,GAAG;AAAC5B,aAAAA;AAAD,CAAjB;;;ACrBA;;;;;;;;AASA;AAIA,AAAO,SAASA,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,IAAU4B,OAAO,CAAC,OAAD,CAAP,CAAiB7B,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOC,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAAS6B,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcf,KAAd,EAAqB;AAC1B,QAAM,CAACgB,WAAD,EAAcC,cAAd,IAAgC1C,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAAC2C,KAAD,EAAQC,QAAR,IAAoB5C,cAAQ,CAAC,CACjC;AAAC6C,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,IAAgB/C,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMO,WAAW,GAAG4B,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;AACzB3C,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAM4C,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,qBACExB,uCADF,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;AALd,IAFF,eASEX;AAAQ,IAAA,QAAQ,EAAEI,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAElC;AAA/C,kBACE8B;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGM,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..3cfed69078a8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map
new file mode 100644
index 000000000000..d14af6f10ebb
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
index 87af63cad0e4..a0f706b19fba 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
     return _ComponentWithMultipleHooksPerLine.Component;
   }
 });
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
 Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
   enumerable: true,
   get: function () {
@@ -61,6 +67,8 @@ var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHo
 
 var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
 
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
 var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
 
 var _Example = require("./Example");
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
index 25adf562046c..d711956304c3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 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
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..e119f7fb6015
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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-extensions/src/__tests__/__source__/__compiled__/inline/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
index a15995f05bdf..781552cbc211 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
     return _ComponentWithMultipleHooksPerLine.Component;
   }
 });
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
 Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
   enumerable: true,
   get: function () {
@@ -61,6 +67,8 @@ var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHo
 
 var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
 
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
 var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
 
 var _Example = require("./Example");
@@ -78,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..7d715c36305d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
index a15995f05bdf..781552cbc211 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "ComponentWithMultipleHooksPerLine", {
     return _ComponentWithMultipleHooksPerLine.Component;
   }
 });
+Object.defineProperty(exports, "ComponentWithNestedHooks", {
+  enumerable: true,
+  get: function () {
+    return _ComponentWithNestedHooks.Component;
+  }
+});
 Object.defineProperty(exports, "ContainingStringSourceMappingURL", {
   enumerable: true,
   get: function () {
@@ -61,6 +67,8 @@ var _ComponentWithExternalCustomHooks = require("./ComponentWithExternalCustomHo
 
 var _ComponentWithMultipleHooksPerLine = require("./ComponentWithMultipleHooksPerLine");
 
+var _ComponentWithNestedHooks = require("./ComponentWithNestedHooks");
+
 var _ContainingStringSourceMappingURL = require("./ContainingStringSourceMappingURL");
 
 var _Example = require("./Example");
@@ -78,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkx9IGZyb20gJy4vQ29udGFpbmluZ1N0cmluZ1NvdXJjZU1hcHBpbmdVUkwnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgRXhhbXBsZX0gZnJvbSAnLi9FeGFtcGxlJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIElubGluZVJlcXVpcmV9IGZyb20gJy4vSW5saW5lUmVxdWlyZSc7XG5pbXBvcnQgKiBhcyBUb0RvTGlzdCBmcm9tICcuL1RvRG9MaXN0JztcbmV4cG9ydCB7VG9Eb0xpc3R9O1xuZXhwb3J0IHtkZWZhdWx0IGFzIHVzZVRoZW1lfSBmcm9tICcuL3VzZVRoZW1lJztcbiJdfQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..3b78d8ee8b74
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+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-extensions/src/__tests__/__source__/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
index c57a616d227d..3b7594adf30e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/index.js
@@ -11,6 +11,7 @@ export {Component as ComponentUsingHooksIndirectly} from './ComponentUsingHooksI
 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';
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index f730b27f914c..110eee269205 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -152,6 +152,20 @@ describe('parseHookNames', () => {
     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;
@@ -261,6 +275,35 @@ describe('parseHookNames', () => {
       ); // simulated Webpack 'cheap-module-source-map'
     });
 
+    it('should work when code is using nested hooks', async () => {
+      async function test(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 test('./__source__/__compiled__/inline/ComponentWithNestedHooks'); // inline source map
+      await test('./__source__/__compiled__/external/ComponentWithNestedHooks'); // external source map
+      await test(
+        './__source__/__compiled__/bundle',
+        'ComponentWithNestedHooks',
+      ); // bundle source map
+      await test(
+        './__source__/__compiled__/no-columns/ComponentWithNestedHooks',
+      ); // simulated Webpack 'cheap-module-source-map'
+    });
+
     it('should work for external hooks', async () => {
       async function test(path, name = 'Component') {
         const Component = require(path)[name];
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 4b4d87c4f630..64aaf1fb0371 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -36,7 +36,7 @@ function checkNodeLocation(
 ): boolean {
   const {start, end} = path.node.loc;
 
-  if (line < start.line || line > end.line) {
+  if (line !== start.line) {
     return false;
   }
 

From 5660c52b89ec19eec36a974e4ff16908b1dbba3c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 6 Aug 2021 14:57:52 -0400
Subject: [PATCH 0747/1603] Scheduling Profiler: Improve warnings and add unit
 tests (#22038)

* Scheduling Profiler: Updated instructions to mentioned v18+ requirement

* Moved long-event warning to post processing

This lets us rule out non-React work or React work that started before the event and finished quickly during the event.

Also added unit tests for this warning and the various cases.

* Moved long-event warning to post processing

This lets us rule out non-React work or React work that started before the event and finished quickly during the event.

Also added unit tests for this warning and the various cases.

* Updated nested update warning text

* Udpate warning about suspending outside of a transition

Handle edge case where component suspends before the first commit (and label metadata) has been logged.

Add unit tests.

* Fixed logic error in getBatchRange() with minStartTime

* PR feedback: Combined a conditional statement
---
 .../src/SchedulingProfiler.css                |    1 +
 .../src/SchedulingProfiler.js                 |    2 +-
 .../__tests__/preprocessData-test.internal.js | 1271 +++++++++++------
 .../src/import-worker/preprocessData.js       |  132 +-
 .../src/utils/getBatchRange.js                |   14 +-
 5 files changed, 977 insertions(+), 443 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
index 5be33714a8f9..9a0d35c81833 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
@@ -54,6 +54,7 @@
 .WelcomeInstructionsListItemLink {
   color: var(--color-link);
   margin-left: 0.25rem;
+  margin-right: 0.25rem;
 }
 
 .ImportButtonLabel {
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
index 760bbeead7d4..9b3220c5ae1b 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
@@ -86,7 +86,7 @@ const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
         target="_blank">
         profiling build of ReactDOM
       </a>
-      .
+      (version 18 or newer).
     </li>
     <li className={styles.WelcomeInstructionsListItem}>
       Open the "Performance" tab in Chrome and record some performance data.
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index f08dcd2512b1..4c59a68efe3b 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -60,6 +60,7 @@ describe(getLanesFromTransportDecimalBitmask, () => {
 describe(preprocessData, () => {
   let React;
   let ReactDOM;
+  let Scheduler;
 
   let act;
   let clearedMarks;
@@ -135,6 +136,26 @@ describe(preprocessData, () => {
     });
   }
 
+  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(),
@@ -144,13 +165,7 @@ describe(preprocessData, () => {
   }
 
   function createUserTimingData(sampleMarks) {
-    const cpuProfilerSample = createUserTimingEntry({
-      args: {data: {startTime: ++startTime}},
-      cat: 'disabled-by-default-v8.cpu_profiler',
-      id: '0x1',
-      name: 'Profile',
-      ph: 'P',
-    });
+    const cpuProfilerSample = creactCpuProfilerSample();
 
     const randomSample = createUserTimingEntry({
       dur: 100,
@@ -168,7 +183,7 @@ describe(preprocessData, () => {
         pid: ++pid,
         tid: ++tid,
         ts: ++startTime,
-        args: {data: {navigationId: 'fake-navigation-id'}},
+        args: {data: {}},
         cat: 'blink.user_timing',
         name: markName,
         ph: 'R',
@@ -185,6 +200,7 @@ describe(preprocessData, () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
 
     const TestUtils = require('react-dom/test-utils');
     act = TestUtils.act;
@@ -219,13 +235,7 @@ describe(preprocessData, () => {
   });
 
   it('should return empty data given a timeline with no React scheduling profiling marks', () => {
-    const cpuProfilerSample = createUserTimingEntry({
-      args: {data: {startTime: ++startTime}},
-      cat: 'disabled-by-default-v8.cpu_profiler',
-      id: '0x1',
-      name: 'Profile',
-      ph: 'P',
-    });
+    const cpuProfilerSample = creactCpuProfilerSample();
     const randomSample = createUserTimingEntry({
       dur: 100,
       tdur: 200,
@@ -292,13 +302,7 @@ describe(preprocessData, () => {
   });
 
   it('should process legacy data format (before lane labels were added)', () => {
-    const cpuProfilerSample = createUserTimingEntry({
-      args: {data: {startTime: ++startTime}},
-      cat: 'disabled-by-default-v8.cpu_profiler',
-      id: '0x1',
-      name: 'Profile',
-      ph: 'P',
-    });
+    const cpuProfilerSample = creactCpuProfilerSample();
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       // Data below is hard-coded based on an older profile sample.
@@ -336,102 +340,102 @@ describe(preprocessData, () => {
         }),
       ]);
       expect(data).toMatchInlineSnapshot(`
-      Object {
-        "componentMeasures": Array [],
-        "duration": 0.011,
-        "flamechart": Array [],
-        "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",
-        },
-        "measures": Array [
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.004999999999999999,
-            "lanes": Array [
-              9,
-            ],
-            "timestamp": 0.006,
-            "type": "render-idle",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.001,
-            "lanes": Array [
-              9,
-            ],
-            "timestamp": 0.006,
-            "type": "render",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.002999999999999999,
-            "lanes": Array [
-              9,
-            ],
-            "timestamp": 0.008,
-            "type": "commit",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 1,
-            "duration": 0.0010000000000000009,
-            "lanes": Array [
-              9,
-            ],
-            "timestamp": 0.009,
-            "type": "layout-effects",
-          },
-        ],
-        "nativeEvents": Array [],
-        "otherUserTimingMarks": Array [],
-        "reactVersion": "17.0.3",
-        "schedulingEvents": Array [
-          Object {
-            "lanes": Array [
-              9,
-            ],
-            "timestamp": 0.005,
-            "type": "schedule-render",
-            "warning": null,
-          },
-        ],
-        "startTime": 1,
-        "suspenseEvents": Array [],
-      }
-    `);
+              Object {
+                "componentMeasures": Array [],
+                "duration": 0.011,
+                "flamechart": Array [],
+                "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",
+                },
+                "measures": Array [
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.004999999999999999,
+                    "lanes": Array [
+                      9,
+                    ],
+                    "timestamp": 0.006,
+                    "type": "render-idle",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.001,
+                    "lanes": Array [
+                      9,
+                    ],
+                    "timestamp": 0.006,
+                    "type": "render",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.002999999999999999,
+                    "lanes": Array [
+                      9,
+                    ],
+                    "timestamp": 0.008,
+                    "type": "commit",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 1,
+                    "duration": 0.0010000000000000009,
+                    "lanes": Array [
+                      9,
+                    ],
+                    "timestamp": 0.009,
+                    "type": "layout-effects",
+                  },
+                ],
+                "nativeEvents": Array [],
+                "otherUserTimingMarks": Array [],
+                "reactVersion": "17.0.3",
+                "schedulingEvents": Array [
+                  Object {
+                    "lanes": Array [
+                      9,
+                    ],
+                    "timestamp": 0.005,
+                    "type": "schedule-render",
+                    "warning": null,
+                  },
+                ],
+                "startTime": 1,
+                "suspenseEvents": Array [],
+              }
+          `);
     }
   });
 
@@ -444,107 +448,107 @@ describe(preprocessData, () => {
         ...createUserTimingData(clearedMarks),
       ]);
       expect(data).toMatchInlineSnapshot(`
-      Object {
-        "componentMeasures": Array [],
-        "duration": 0.013,
-        "flamechart": Array [],
-        "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",
-        },
-        "measures": Array [
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.008,
-            "lanes": Array [
-              0,
-            ],
-            "timestamp": 0.005,
-            "type": "render-idle",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.001,
-            "lanes": Array [
-              0,
-            ],
-            "timestamp": 0.005,
-            "type": "render",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.005999999999999999,
-            "lanes": Array [
-              0,
-            ],
-            "timestamp": 0.007,
-            "type": "commit",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 1,
-            "duration": 0.0010000000000000009,
-            "lanes": Array [
-              0,
-            ],
-            "timestamp": 0.011,
-            "type": "layout-effects",
-          },
-        ],
-        "nativeEvents": Array [],
-        "otherUserTimingMarks": Array [
-          Object {
-            "name": "__v3",
-            "timestamp": 0.003,
-          },
-        ],
-        "reactVersion": "17.0.3",
-        "schedulingEvents": Array [
-          Object {
-            "lanes": Array [
-              0,
-            ],
-            "timestamp": 0.004,
-            "type": "schedule-render",
-            "warning": null,
-          },
-        ],
-        "startTime": 4,
-        "suspenseEvents": Array [],
-      }
-    `);
+              Object {
+                "componentMeasures": Array [],
+                "duration": 0.013,
+                "flamechart": Array [],
+                "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",
+                },
+                "measures": Array [
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.008,
+                    "lanes": Array [
+                      0,
+                    ],
+                    "timestamp": 0.005,
+                    "type": "render-idle",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.001,
+                    "lanes": Array [
+                      0,
+                    ],
+                    "timestamp": 0.005,
+                    "type": "render",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.005999999999999999,
+                    "lanes": Array [
+                      0,
+                    ],
+                    "timestamp": 0.007,
+                    "type": "commit",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 1,
+                    "duration": 0.0010000000000000009,
+                    "lanes": Array [
+                      0,
+                    ],
+                    "timestamp": 0.011,
+                    "type": "layout-effects",
+                  },
+                ],
+                "nativeEvents": Array [],
+                "otherUserTimingMarks": Array [
+                  Object {
+                    "name": "__v3",
+                    "timestamp": 0.003,
+                  },
+                ],
+                "reactVersion": "17.0.3",
+                "schedulingEvents": Array [
+                  Object {
+                    "lanes": Array [
+                      0,
+                    ],
+                    "timestamp": 0.004,
+                    "type": "schedule-render",
+                    "warning": null,
+                  },
+                ],
+                "startTime": 4,
+                "suspenseEvents": Array [],
+              }
+          `);
     }
   });
 
@@ -568,189 +572,189 @@ describe(preprocessData, () => {
         ...createUserTimingData(clearedMarks),
       ]);
       expect(data).toMatchInlineSnapshot(`
-      Object {
-        "componentMeasures": Array [
-          Object {
-            "componentName": "App",
-            "duration": 0.001,
-            "timestamp": 0.006,
-            "warning": null,
-          },
-          Object {
-            "componentName": "App",
-            "duration": 0.0010000000000000009,
-            "timestamp": 0.02,
-            "warning": null,
-          },
-        ],
-        "duration": 0.031,
-        "flamechart": Array [],
-        "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",
-        },
-        "measures": Array [
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.009999999999999998,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.005,
-            "type": "render-idle",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.003,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.005,
-            "type": "render",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.006,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.009,
-            "type": "commit",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 1,
-            "duration": 0.0010000000000000009,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.013,
-            "type": "layout-effects",
-          },
-          Object {
-            "batchUID": 0,
-            "depth": 0,
-            "duration": 0.0019999999999999983,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.016,
-            "type": "passive-effects",
-          },
-          Object {
-            "batchUID": 1,
-            "depth": 0,
-            "duration": 0.010000000000000002,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.019,
-            "type": "render-idle",
-          },
-          Object {
-            "batchUID": 1,
-            "depth": 0,
-            "duration": 0.002999999999999999,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.019,
-            "type": "render",
-          },
-          Object {
-            "batchUID": 1,
-            "depth": 0,
-            "duration": 0.006000000000000002,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.023,
-            "type": "commit",
-          },
-          Object {
-            "batchUID": 1,
-            "depth": 1,
-            "duration": 0.0010000000000000009,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.027,
-            "type": "layout-effects",
-          },
-          Object {
-            "batchUID": 1,
-            "depth": 0,
-            "duration": 0.0010000000000000009,
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.03,
-            "type": "passive-effects",
-          },
-        ],
-        "nativeEvents": Array [],
-        "otherUserTimingMarks": Array [
-          Object {
-            "name": "__v3",
-            "timestamp": 0.003,
-          },
-        ],
-        "reactVersion": "17.0.3",
-        "schedulingEvents": Array [
-          Object {
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.004,
-            "type": "schedule-render",
-            "warning": null,
-          },
-          Object {
-            "componentName": "App",
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.017,
-            "type": "schedule-state-update",
-            "warning": null,
-          },
-        ],
-        "startTime": 4,
-        "suspenseEvents": Array [],
-      }
-    `);
+              Object {
+                "componentMeasures": Array [
+                  Object {
+                    "componentName": "App",
+                    "duration": 0.001,
+                    "timestamp": 0.006,
+                    "warning": null,
+                  },
+                  Object {
+                    "componentName": "App",
+                    "duration": 0.0010000000000000009,
+                    "timestamp": 0.02,
+                    "warning": null,
+                  },
+                ],
+                "duration": 0.031,
+                "flamechart": Array [],
+                "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",
+                },
+                "measures": Array [
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.009999999999999998,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.005,
+                    "type": "render-idle",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.003,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.005,
+                    "type": "render",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.006,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.009,
+                    "type": "commit",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 1,
+                    "duration": 0.0010000000000000009,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.013,
+                    "type": "layout-effects",
+                  },
+                  Object {
+                    "batchUID": 0,
+                    "depth": 0,
+                    "duration": 0.0019999999999999983,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.016,
+                    "type": "passive-effects",
+                  },
+                  Object {
+                    "batchUID": 1,
+                    "depth": 0,
+                    "duration": 0.010000000000000002,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.019,
+                    "type": "render-idle",
+                  },
+                  Object {
+                    "batchUID": 1,
+                    "depth": 0,
+                    "duration": 0.002999999999999999,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.019,
+                    "type": "render",
+                  },
+                  Object {
+                    "batchUID": 1,
+                    "depth": 0,
+                    "duration": 0.006000000000000002,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.023,
+                    "type": "commit",
+                  },
+                  Object {
+                    "batchUID": 1,
+                    "depth": 1,
+                    "duration": 0.0010000000000000009,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.027,
+                    "type": "layout-effects",
+                  },
+                  Object {
+                    "batchUID": 1,
+                    "depth": 0,
+                    "duration": 0.0010000000000000009,
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.03,
+                    "type": "passive-effects",
+                  },
+                ],
+                "nativeEvents": Array [],
+                "otherUserTimingMarks": Array [
+                  Object {
+                    "name": "__v3",
+                    "timestamp": 0.003,
+                  },
+                ],
+                "reactVersion": "17.0.3",
+                "schedulingEvents": Array [
+                  Object {
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.004,
+                    "type": "schedule-render",
+                    "warning": null,
+                  },
+                  Object {
+                    "componentName": "App",
+                    "lanes": Array [
+                      4,
+                    ],
+                    "timestamp": 0.017,
+                    "type": "schedule-state-update",
+                    "warning": null,
+                  },
+                ],
+                "startTime": 4,
+                "suspenseEvents": Array [],
+              }
+          `);
     }
   });
 
@@ -833,5 +837,468 @@ describe(preprocessData, () => {
     `);
   });
 
+  describe('warnings', () => {
+    describe('long event handlers', () => {
+      it('should not warn when React scedules a (sync) update inside of a short event handler', () => {
+        function App() {
+          return null;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const testMarks = [
+            creactCpuProfilerSample(),
+            ...createBoilerplateEntries(),
+            createNativeEventEntry('click', 5),
+          ];
+
+          clearedMarks.splice(0);
+
+          ReactDOM.render(<App />, document.createElement('div'));
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = preprocessData(testMarks);
+          const event = data.nativeEvents.find(({type}) => type === 'click');
+          expect(event.warning).toBe(null);
+        }
+      });
+
+      it('should not warn about long events if the cause was non-React JavaScript', () => {
+        function App() {
+          return null;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const testMarks = [
+            creactCpuProfilerSample(),
+            ...createBoilerplateEntries(),
+            createNativeEventEntry('click', 25000),
+          ];
+
+          startTime += 2000;
+
+          clearedMarks.splice(0);
+
+          ReactDOM.render(<App />, document.createElement('div'));
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = preprocessData(testMarks);
+          const event = data.nativeEvents.find(({type}) => type === 'click');
+          expect(event.warning).toBe(null);
+        }
+      });
+
+      it('should warn when React scedules a long (sync) update inside of an event', () => {
+        function App() {
+          return null;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const testMarks = [
+            creactCpuProfilerSample(),
+            ...createBoilerplateEntries(),
+            createNativeEventEntry('click', 25000),
+          ];
+
+          clearedMarks.splice(0);
+
+          ReactDOM.render(<App />, document.createElement('div'));
+
+          clearedMarks.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 = 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."`,
+          );
+        }
+      });
+
+      it('should not warn when React finishes a previously long (async) update with a short (sync) update inside of an event', () => {
+        function Yield({id, value}) {
+          Scheduler.unstable_yieldValue(`${id}:${value}`);
+          return null;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const testMarks = [
+            creactCpuProfilerSample(),
+            ...createBoilerplateEntries(),
+          ];
+
+          // Advance the clock by some arbitrary amount.
+          startTime += 50000;
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+
+          React.startTransition(() => {
+            // Start rendering an async update (but don't finish).
+            root.render(
+              <>
+                <Yield id="A" value={1} />
+                <Yield id="B" value={1} />
+              </>,
+            );
+            expect(Scheduler).toFlushAndYieldThrough(['A:1']);
+
+            testMarks.push(...createUserTimingData(clearedMarks));
+            clearedMarks.splice(0);
+
+            // 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} />
+                </>,
+              );
+            });
+          });
+
+          expect(Scheduler).toHaveYielded(['A:2', 'B:2']);
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = preprocessData(testMarks);
+          const event = data.nativeEvents.find(({type}) => type === 'click');
+          expect(event.warning).toBe(null);
+        }
+      });
+    });
+
+    describe('nested updates', () => {
+      it('should not warn about short nested (state) updates during layout effects', () => {
+        function Component() {
+          const [didMount, setDidMount] = React.useState(false);
+          Scheduler.unstable_yieldValue(
+            `Component ${didMount ? 'update' : 'mount'}`,
+          );
+          React.useLayoutEffect(() => {
+            setDidMount(true);
+          }, []);
+          return didMount;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const data = preprocessData([
+            ...createBoilerplateEntries(),
+            ...createUserTimingData(clearedMarks),
+          ]);
+
+          const event = data.schedulingEvents.find(
+            ({type}) => type === 'schedule-state-update',
+          );
+          expect(event.warning).toBe(null);
+        }
+      });
+
+      it('should not warn about short (forced) updates during layout effects', () => {
+        class Component extends React.Component {
+          _didMount: boolean = false;
+          componentDidMount() {
+            this._didMount = true;
+            this.forceUpdate();
+          }
+          render() {
+            Scheduler.unstable_yieldValue(
+              `Component ${this._didMount ? 'update' : 'mount'}`,
+            );
+            return null;
+          }
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const data = preprocessData([
+            ...createBoilerplateEntries(),
+            ...createUserTimingData(clearedMarks),
+          ]);
+
+          const event = data.schedulingEvents.find(
+            ({type}) => type === 'schedule-force-update',
+          );
+          expect(event.warning).toBe(null);
+        }
+      });
+
+      it('should warn about long nested (state) updates during layout effects', () => {
+        function Component() {
+          const [didMount, setDidMount] = React.useState(false);
+          Scheduler.unstable_yieldValue(
+            `Component ${didMount ? 'update' : 'mount'}`,
+          );
+          // Fake a long render
+          startTime += 20000;
+          React.useLayoutEffect(() => {
+            setDidMount(true);
+          }, []);
+          return didMount;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.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 = 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)."`,
+          );
+        }
+      });
+
+      it('should warn about long nested (forced) updates during layout effects', () => {
+        class Component extends React.Component {
+          _didMount: boolean = false;
+          componentDidMount() {
+            this._didMount = true;
+            this.forceUpdate();
+          }
+          render() {
+            Scheduler.unstable_yieldValue(
+              `Component ${this._didMount ? 'update' : 'mount'}`,
+            );
+            return null;
+          }
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.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 = 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)."`,
+          );
+        }
+      });
+    });
+
+    describe('suspend during an update', () => {
+      // This also tests an edge case where the a component suspends while profiling
+      // before the first commit is logged (so the lane-to-labels map will not yet exist).
+      it('should warn about suspending during an udpate', () => {
+        let promise = null;
+        let resolvedValue = null;
+        function readValue(value) {
+          if (resolvedValue !== null) {
+            return resolvedValue;
+          } else if (promise === null) {
+            promise = Promise.resolve(true).then(() => {
+              resolvedValue = value;
+            });
+          }
+          throw promise;
+        }
+
+        function Component({shouldSuspend}) {
+          Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
+          if (shouldSuspend) {
+            readValue(123);
+          }
+          return null;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          // Mount and commit the app
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() =>
+            root.render(
+              <React.Suspense fallback="Loading...">
+                <Component shouldSuspend={false} />
+              </React.Suspense>,
+            ),
+          );
+
+          clearedMarks.splice(0);
+
+          const testMarks = [creactCpuProfilerSample()];
+
+          // Start profiling and suspend during a render.
+          act(() =>
+            root.render(
+              <React.Suspense fallback="Loading...">
+                <Component shouldSuspend={true} />
+              </React.Suspense>,
+            ),
+          );
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = 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."`,
+          );
+        }
+      });
+
+      it('should not warn about suspending during an transition', async () => {
+        let promise = null;
+        let resolvedValue = null;
+        function readValue(value) {
+          if (resolvedValue !== null) {
+            return resolvedValue;
+          } else if (promise === null) {
+            promise = Promise.resolve(true).then(() => {
+              resolvedValue = value;
+            });
+          }
+          throw promise;
+        }
+
+        function Component({shouldSuspend}) {
+          Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
+          if (shouldSuspend) {
+            readValue(123);
+          }
+          return null;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          // Mount and commit the app
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() =>
+            root.render(
+              <React.Suspense fallback="Loading...">
+                <Component shouldSuspend={false} />
+              </React.Suspense>,
+            ),
+          );
+
+          clearedMarks.splice(0);
+
+          const testMarks = [creactCpuProfilerSample()];
+
+          // Start profiling and suspend during a render.
+          await act(async () =>
+            React.startTransition(() =>
+              root.render(
+                <React.Suspense fallback="Loading...">
+                  <Component shouldSuspend={true} />
+                </React.Suspense>,
+              ),
+            ),
+          );
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = preprocessData(testMarks);
+          expect(data.suspenseEvents).toHaveLength(1);
+          expect(data.suspenseEvents[0].warning).toBe(null);
+        }
+      });
+    });
+  });
+
   // TODO: Add test for flamechart parsing
 });
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 36beebac0b13..92695a5da010 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -22,11 +22,13 @@ import type {
   ReactComponentMeasure,
   ReactMeasureType,
   ReactProfilerData,
+  SchedulingEvent,
   SuspenseEvent,
 } from '../types';
 
 import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
 import InvalidProfileError from './InvalidProfileError';
+import {getBatchRange} from '../utils/getBatchRange';
 
 type MeasureStackElement = {|
   type: ReactMeasureType,
@@ -42,6 +44,12 @@ type ProcessorState = {|
   measureStack: MeasureStackElement[],
   nativeEventStack: NativeEvent[],
   nextRenderShouldGenerateNewBatchID: boolean,
+  potentialLongEvents: Array<[NativeEvent, BatchUID]>,
+  potentialLongNestedUpdate: SchedulingEvent | null,
+  potentialLongNestedUpdates: Array<[SchedulingEvent, BatchUID]>,
+  potentialSuspenseEventsOutsideOfTransition: Array<
+    [SuspenseEvent, ReactLane[]],
+  >,
   uidCounter: BatchUID,
   unresolvedSuspenseEvents: Map<string, SuspenseEvent>,
 |};
@@ -52,7 +60,9 @@ 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 nested update was scheduled during layout. These updates require React to re-render synchronously before the browser can paint.',
+    '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_UPATE:
     '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.",
@@ -309,37 +319,39 @@ function processTimelineEvent(
       } else if (name.startsWith('--schedule-forced-update-')) {
         const [laneBitmaskString, componentName] = name.substr(25).split('-');
 
-        let warning = null;
-        if (state.measureStack.find(({type}) => type === 'commit')) {
-          // TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.
-          // This might be easier to do if we separated warnings into a second pass.
-          warning = WARNING_STRINGS.NESTED_UPDATE;
-        }
-
-        currentProfilerData.schedulingEvents.push({
+        const forceUpdateEvent = {
           type: 'schedule-force-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
           componentName,
           timestamp: startTime,
-          warning,
-        });
-      } else if (name.startsWith('--schedule-state-update-')) {
-        const [laneBitmaskString, componentName] = name.substr(24).split('-');
+          warning: null,
+        };
 
-        let 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')) {
-          // TODO (scheduling profiler) Only warn if the subsequent update is longer than some threshold.
-          // This might be easier to do if we separated warnings into a second pass.
-          warning = WARNING_STRINGS.NESTED_UPDATE;
+          state.potentialLongNestedUpdate = forceUpdateEvent;
         }
 
-        currentProfilerData.schedulingEvents.push({
+        currentProfilerData.schedulingEvents.push(forceUpdateEvent);
+      } else if (name.startsWith('--schedule-state-update-')) {
+        const [laneBitmaskString, componentName] = name.substr(24).split('-');
+
+        const stateUpdateEvent = {
           type: 'schedule-state-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
           componentName,
           timestamp: startTime,
-          warning,
-        });
+          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);
       } // eslint-disable-line brace-style
 
       // React Events - suspense
@@ -349,16 +361,6 @@ function processTimelineEvent(
           .split('-');
         const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
 
-        // TODO It's possible we don't have lane-to-label mapping yet (since it's logged during commit phase)
-        // We may need to do this sort of error checking in a separate pass.
-        let warning = null;
-        if (phase === 'update') {
-          // HACK This is a bit gross but the numeric lane value might change between render versions.
-          if (lanes.some(lane => laneToLabelMap.get(lane) === 'Transition')) {
-            warning = WARNING_STRINGS.SUSPEND_DURING_UPATE;
-          }
-        }
-
         const availableDepths = new Array(
           state.unresolvedSuspenseEvents.size + 1,
         ).fill(true);
@@ -389,9 +391,20 @@ function processTimelineEvent(
           resuspendTimestamps: null,
           timestamp: startTime,
           type: 'suspense',
-          warning,
+          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-resuspend-')) {
@@ -430,6 +443,17 @@ function processTimelineEvent(
           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.substr(15).split('-');
 
         throwIfIncomplete('render', state.measureStack);
@@ -453,11 +477,14 @@ function processTimelineEvent(
         for (let i = 0; i < state.nativeEventStack.length; i++) {
           const nativeEvent = state.nativeEventStack[i];
           const stopTime = nativeEvent.timestamp + nativeEvent.duration;
-          if (
-            stopTime > startTime &&
-            nativeEvent.duration > NATIVE_EVENT_DURATION_THRESHOLD
-          ) {
-            nativeEvent.warning = WARNING_STRINGS.LONG_EVENT_HANDLER;
+
+          // 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 (
@@ -666,6 +693,10 @@ export default function preprocessData(
     measureStack: [],
     nativeEventStack: [],
     nextRenderShouldGenerateNewBatchID: true,
+    potentialLongEvents: [],
+    potentialLongNestedUpdate: null,
+    potentialLongNestedUpdates: [],
+    potentialSuspenseEventsOutsideOfTransition: [],
     uidCounter: 0,
     unresolvedSuspenseEvents: new Map(),
   };
@@ -684,5 +715,34 @@ export default function preprocessData(
     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 > NATIVE_EVENT_DURATION_THRESHOLD) {
+      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 => laneToLabelMap.get(lane) === 'Transition')) {
+        suspenseEvent.warning = WARNING_STRINGS.SUSPEND_DURING_UPATE;
+      }
+    },
+  );
+
   return profilerData;
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js b/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
index cba61a47161a..0d977e0390e7 100644
--- a/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
+++ b/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
@@ -14,6 +14,7 @@ import type {BatchUID, Milliseconds, ReactProfilerData} from '../types';
 function unmemoizedGetBatchRange(
   batchUID: BatchUID,
   data: ReactProfilerData,
+  minStartTime?: ?number,
 ): [Milliseconds, Milliseconds] {
   const {measures} = data;
 
@@ -22,18 +23,23 @@ function unmemoizedGetBatchRange(
 
   let i = 0;
 
+  // Find the first measure in the current batch.
   for (i; i < measures.length; i++) {
     const measure = measures[i];
     if (measure.batchUID === batchUID) {
-      startTime = measure.timestamp;
-      break;
+      if (minStartTime == null || measure.timestamp >= minStartTime) {
+        startTime = measure.timestamp;
+        break;
+      }
     }
   }
 
+  // Find the last measure in the current batch.
   for (i; i < measures.length; i++) {
     const measure = measures[i];
-    stopTime = measure.timestamp;
-    if (measure.batchUID !== batchUID) {
+    if (measure.batchUID === batchUID) {
+      stopTime = measure.timestamp;
+    } else {
       break;
     }
   }

From 2edf449803378b5c58168727d4f123de3ba5d37f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 6 Aug 2021 15:03:35 -0400
Subject: [PATCH 0748/1603] Scheduling Profiler: Renamed a misnamed variable

---
 .../src/import-worker/preprocessData.js                        | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 92695a5da010..532251ce5a3e 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -55,6 +55,7 @@ type ProcessorState = {|
 |};
 
 const NATIVE_EVENT_DURATION_THRESHOLD = 20;
+const NESTED_UPDATE_DURATION_THRESHOLD = 20;
 
 const WARNING_STRINGS = {
   LONG_EVENT_HANDLER:
@@ -731,7 +732,7 @@ export default function preprocessData(
   state.potentialLongNestedUpdates.forEach(([schedulingEvent, batchUID]) => {
     // See how long the subsequent batch of React work was.
     const [startTime, stopTime] = getBatchRange(batchUID, profilerData);
-    if (stopTime - startTime > NATIVE_EVENT_DURATION_THRESHOLD) {
+    if (stopTime - startTime > NESTED_UPDATE_DURATION_THRESHOLD) {
       schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE;
     }
   });

From 64931821a9df262f2b6475404d025bcff97c3e0a Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Sun, 8 Aug 2021 22:58:50 +0300
Subject: [PATCH 0749/1603] Fix typo in parseHookNames.js (#22042)

representated -> represented
---
 .../src/parseHookNames/parseHookNames.js                      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index f68c37135b8b..8bae59ce461b 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -391,7 +391,7 @@ function findHookNames(
       const position = sourceConsumer.originalPositionFor({
         line: lineNumber,
 
-        // Column numbers are representated differently between tools/engines.
+        // Column numbers are represented differently between tools/engines.
         // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
         // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
         column: columnNumber - 1,
@@ -490,7 +490,7 @@ async function parseSourceAST(
       const {source} = sourceConsumer.originalPositionFor({
         line: lineNumber,
 
-        // Column numbers are representated differently between tools/engines.
+        // Column numbers are represented differently between tools/engines.
         // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
         // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
         column: columnNumber - 1,

From ecd73e17bcdecc092cb56259999787d832d6510a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 9 Aug 2021 15:45:12 -0400
Subject: [PATCH 0750/1603] Enable enableSuspenseLayoutEffectSemantics flag
 statically for Facebook (#22050)

---
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js | 1 -
 packages/shared/forks/ReactFeatureFlags.www.js         | 3 ++-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 72ae2f2c5b47..23a7e321e60e 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -18,7 +18,6 @@ export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
-export const enableSuspenseLayoutEffectSemantics = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index d514e15e8827..39c359e2fc68 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -26,7 +26,6 @@ export const {
   enableDebugTracing,
   skipUnmountedBoundaries,
   createRootStrictEffectsByDefault,
-  enableSuspenseLayoutEffectSemantics,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,
   disableSchedulerTimeoutInWorkLoop,
@@ -47,6 +46,8 @@ export const enableProfilerNestedUpdateScheduledHook =
   __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
 export const enableUpdaterTracking = __PROFILE__;
 
+export const enableSuspenseLayoutEffectSemantics = true;
+
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =
   __PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler;

From 5634ed16aaba4a507844f0502953abcf40e3a165 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 9 Aug 2021 17:11:33 -0400
Subject: [PATCH 0751/1603] Scheduling Profiler: Misc UX and performance
 improvements (#22043)

---
 .../src/CanvasPage.js                         |  126 +-
 .../src/SchedulingProfiler.js                 |   14 +-
 .../src/SchedulingProfilerContext.js          |   39 +-
 .../src/content-views/ReactMeasuresView.js    |   30 +-
 .../__tests__/preprocessData-test.internal.js | 1061 +++++++++++------
 .../src/import-worker/preprocessData.js       |   58 +-
 .../src/types.js                              |   21 +-
 .../src/utils/getBatchRange.js                |   42 +-
 .../src/view-base/HorizontalPanAndZoomView.js |  147 +--
 .../src/view-base/ResizableView.js            |   64 +-
 .../src/view-base/VerticalScrollView.js       |   93 +-
 .../src/view-base/utils/scrollState.js        |    4 +-
 12 files changed, 1076 insertions(+), 623 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index e699959013b7..59939cd94869 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -7,19 +7,18 @@
  * @flow
  */
 
-import type {
-  Point,
-  HorizontalPanAndZoomViewOnChangeCallback,
-} from './view-base';
+import type {Point} from './view-base';
 import type {
   ReactHoverContextInfo,
   ReactProfilerData,
   ReactMeasure,
+  ViewState,
 } from './types';
 
 import * as React from 'react';
 import {
   Fragment,
+  useContext,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -54,12 +53,14 @@ import {
   UserTimingMarksView,
 } from './content-views';
 import {COLORS} from './content-views/constants';
-
+import {clampState, moveStateToRange} from './view-base/utils/scrollState';
 import EventTooltip from './EventTooltip';
+import {RegistryContext} from 'react-devtools-shared/src/devtools/ContextMenu/Contexts';
 import ContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenu';
 import ContextMenuItem from 'react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem';
 import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useContextMenu';
 import {getBatchRange} from './utils/getBatchRange';
+import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
 
 import styles from './CanvasPage.css';
 
@@ -67,16 +68,22 @@ const CONTEXT_MENU_ID = 'canvas';
 
 type Props = {|
   profilerData: ReactProfilerData,
+  viewState: ViewState,
 |};
 
-function CanvasPage({profilerData}: Props) {
+function CanvasPage({profilerData, viewState}: Props) {
   return (
     <div
       className={styles.CanvasPage}
       style={{backgroundColor: COLORS.BACKGROUND}}>
       <AutoSizer>
         {({height, width}: {height: number, width: number}) => (
-          <AutoSizedCanvas data={profilerData} height={height} width={width} />
+          <AutoSizedCanvas
+            data={profilerData}
+            height={height}
+            viewState={viewState}
+            width={width}
+          />
         )}
       </AutoSizer>
     </div>
@@ -98,27 +105,43 @@ const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {
   );
 };
 
-// TODO (scheduling profiler) Why is the "zoom" feature so much slower than normal rendering?
 const zoomToBatch = (
   data: ReactProfilerData,
   measure: ReactMeasure,
-  syncedHorizontalPanAndZoomViews: HorizontalPanAndZoomView[],
+  viewState: ViewState,
+  width: number,
 ) => {
   const {batchUID} = measure;
-  const [startTime, stopTime] = getBatchRange(batchUID, data);
-  syncedHorizontalPanAndZoomViews.forEach(syncedView =>
-    // Using time as range works because the views' intrinsic content size is based on time.
-    syncedView.zoomToRange(startTime, stopTime),
-  );
+  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);
 };
 
 type AutoSizedCanvasProps = {|
   data: ReactProfilerData,
   height: number,
+  viewState: ViewState,
   width: number,
 |};
 
-function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
+function AutoSizedCanvas({
+  data,
+  height,
+  viewState,
+  width,
+}: AutoSizedCanvasProps) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
   const [isContextMenuShown, setIsContextMenuShown] = useState<boolean>(false);
@@ -136,30 +159,31 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
   const componentMeasuresViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
-  const syncedHorizontalPanAndZoomViewsRef = useRef<HorizontalPanAndZoomView[]>(
-    [],
-  );
+
+  const {hideMenu: hideContextMenu} = useContext(RegistryContext);
 
   useLayoutEffect(() => {
     const surface = surfaceRef.current;
     const defaultFrame = {origin: zeroPoint, size: {width, height}};
 
-    // Clear synced views
-    syncedHorizontalPanAndZoomViewsRef.current = [];
+    // Auto hide context menu when panning.
+    viewState.onHorizontalScrollStateChange(scrollState => {
+      hideContextMenu();
+    });
 
-    const syncAllHorizontalPanAndZoomViewStates: HorizontalPanAndZoomViewOnChangeCallback = (
-      newState,
-      triggeringView?: HorizontalPanAndZoomView,
-    ) => {
-      syncedHorizontalPanAndZoomViewsRef.current.forEach(
-        syncedView =>
-          triggeringView !== syncedView && syncedView.setScrollState(newState),
-      );
-    };
+    // 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,
-      resizeLabel: string = '',
+      label: string,
       shouldScrollVertically: boolean = false,
       shouldResizeVertically: boolean = false,
     ): View {
@@ -169,6 +193,8 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
           surface,
           defaultFrame,
           view,
+          viewState,
+          label,
         );
       }
 
@@ -177,23 +203,22 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         defaultFrame,
         verticalScrollView !== null ? verticalScrollView : view,
         data.duration,
-        syncAllHorizontalPanAndZoomViewStates,
+        viewState,
       );
 
-      syncedHorizontalPanAndZoomViewsRef.current.push(horizontalPanAndZoomView);
-
-      let viewToReturn = horizontalPanAndZoomView;
+      let resizableView = null;
       if (shouldResizeVertically) {
-        viewToReturn = new ResizableView(
+        resizableView = new ResizableView(
           surface,
           defaultFrame,
           horizontalPanAndZoomView,
+          viewState,
           canvasRef,
-          resizeLabel,
+          label,
         );
       }
 
-      return viewToReturn;
+      return resizableView || horizontalPanAndZoomView;
     }
 
     const axisMarkersView = new TimeAxisMarkersView(
@@ -201,7 +226,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       defaultFrame,
       data.duration,
     );
-    const axisMarkersViewWrapper = createViewHelper(axisMarkersView);
+    const axisMarkersViewWrapper = createViewHelper(axisMarkersView, 'time');
 
     let userTimingMarksViewWrapper = null;
     if (data.otherUserTimingMarks.length > 0) {
@@ -212,7 +237,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         data.duration,
       );
       userTimingMarksViewRef.current = userTimingMarksView;
-      userTimingMarksViewWrapper = createViewHelper(userTimingMarksView);
+      userTimingMarksViewWrapper = createViewHelper(
+        userTimingMarksView,
+        'user timing api',
+      );
     }
 
     const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);
@@ -230,7 +258,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       data,
     );
     schedulingEventsViewRef.current = schedulingEventsView;
-    const schedulingEventsViewWrapper = createViewHelper(schedulingEventsView);
+    const schedulingEventsViewWrapper = createViewHelper(
+      schedulingEventsView,
+      'react updates',
+    );
 
     let suspenseEventsViewWrapper = null;
     if (data.suspenseEvents.length > 0) {
@@ -256,7 +287,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
     reactMeasuresViewRef.current = reactMeasuresView;
     const reactMeasuresViewWrapper = createViewHelper(
       reactMeasuresView,
-      'react',
+      'react scheduling',
       true,
       true,
     );
@@ -269,7 +300,10 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
         data,
       );
       componentMeasuresViewRef.current = componentMeasuresView;
-      componentMeasuresViewWrapper = createViewHelper(componentMeasuresView);
+      componentMeasuresViewWrapper = createViewHelper(
+        componentMeasuresView,
+        'react components',
+      );
     }
 
     const flamechartView = new FlamechartView(
@@ -329,7 +363,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
       return;
     }
 
-    // Wheel events should always hide the current toolltip.
+    // Wheel events should always hide the current tooltip.
     switch (interaction.type) {
       case 'wheel-control':
       case 'wheel-meta':
@@ -617,11 +651,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
               {measure !== null && (
                 <ContextMenuItem
                   onClick={() =>
-                    zoomToBatch(
-                      contextData.data,
-                      measure,
-                      syncedHorizontalPanAndZoomViewsRef.current,
-                    )
+                    zoomToBatch(contextData.data, measure, viewState, width)
                   }
                   title="Zoom to batch">
                   Zoom to batch
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
index 9b3220c5ae1b..98cd61d31244 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
@@ -8,6 +8,7 @@
  */
 
 import type {DataResource} from './createDataResourceFromImportedFile';
+import type {ViewState} from './types';
 
 import * as React from 'react';
 import {
@@ -27,9 +28,11 @@ import CanvasPage from './CanvasPage';
 import styles from './SchedulingProfiler.css';
 
 export function SchedulingProfiler(_: {||}) {
-  const {importSchedulingProfilerData, schedulingProfilerData} = useContext(
-    SchedulingProfilerContext,
-  );
+  const {
+    importSchedulingProfilerData,
+    schedulingProfilerData,
+    viewState,
+  } = useContext(SchedulingProfilerContext);
 
   const ref = useRef(null);
 
@@ -66,6 +69,7 @@ export function SchedulingProfiler(_: {||}) {
             dataResource={schedulingProfilerData}
             key={key}
             onFileSelect={importSchedulingProfilerData}
+            viewState={viewState}
           />
         </Suspense>
       ) : (
@@ -130,9 +134,11 @@ const CouldNotLoadProfile = ({error, onFileSelect}) => (
 const DataResourceComponent = ({
   dataResource,
   onFileSelect,
+  viewState,
 }: {|
   dataResource: DataResource,
   onFileSelect: (file: File) => void,
+  viewState: ViewState,
 |}) => {
   const dataOrError = dataResource.read();
   if (dataOrError instanceof Error) {
@@ -140,5 +146,5 @@ const DataResourceComponent = ({
       <CouldNotLoadProfile error={dataOrError} onFileSelect={onFileSelect} />
     );
   }
-  return <CanvasPage profilerData={dataOrError} />;
+  return <CanvasPage profilerData={dataOrError} viewState={viewState} />;
 };
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js b/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
index dc95fc31a9da..ff81482c09e7 100644
--- a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
+++ b/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
@@ -11,12 +11,14 @@ import * as React from 'react';
 import {createContext, useCallback, useMemo, useState} from 'react';
 import createDataResourceFromImportedFile from './createDataResourceFromImportedFile';
 
+import type {HorizontalScrollStateChangeCallback, ViewState} from './types';
 import type {DataResource} from './createDataResourceFromImportedFile';
 
 export type Context = {|
   clearSchedulingProfilerData: () => void,
   importSchedulingProfilerData: (file: File) => void,
   schedulingProfilerData: DataResource | null,
+  viewState: ViewState,
 |};
 
 const SchedulingProfilerContext = createContext<Context>(
@@ -42,20 +44,51 @@ function SchedulingProfilerContextController({children}: Props) {
     setSchedulingProfilerData(createDataResourceFromImportedFile(file));
   }, []);
 
-  // TODO (scheduling profiler) Start/stop time ref here?
+  // Recreate view state any time new profiling data is imported.
+  const viewState = useMemo<ViewState>(() => {
+    const horizontalScrollStateChangeCallbacks: Set<HorizontalScrollStateChangeCallback> = new Set();
+
+    const horizontalScrollState = {
+      offset: 0,
+      length: 0,
+    };
+
+    return {
+      horizontalScrollState,
+      onHorizontalScrollStateChange: callback => {
+        horizontalScrollStateChangeCallbacks.add(callback);
+      },
+      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);
+        });
+      },
+      viewToMutableViewStateMap: new Map(),
+    };
+  }, [schedulingProfilerData]);
 
   const value = useMemo(
     () => ({
       clearSchedulingProfilerData,
       importSchedulingProfilerData,
       schedulingProfilerData,
-      // TODO (scheduling profiler)
+      viewState,
     }),
     [
       clearSchedulingProfilerData,
       importSchedulingProfilerData,
       schedulingProfilerData,
-      // TODO (scheduling profiler)
+      viewState,
     ],
   );
 
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index 976e37ebb9d3..7009356b4ce4 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -38,21 +38,12 @@ import {REACT_TOTAL_NUM_LANES} from '../constants';
 const REACT_LANE_HEIGHT = REACT_MEASURE_HEIGHT + BORDER_SIZE;
 const MAX_ROWS_TO_SHOW_INITIALLY = 5;
 
-function getMeasuresForLane(
-  allMeasures: ReactMeasure[],
-  lane: ReactLane,
-): ReactMeasure[] {
-  return allMeasures.filter(measure => measure.lanes.includes(lane));
-}
-
 export class ReactMeasuresView extends View {
-  _profilerData: ReactProfilerData;
   _intrinsicSize: IntrinsicSize;
-
   _lanesToRender: ReactLane[];
-  _laneToMeasures: Map<ReactLane, ReactMeasure[]>;
-
+  _profilerData: ReactProfilerData;
   _hoveredMeasure: ReactMeasure | null = null;
+
   onHover: ((measure: ReactMeasure | null) => void) | null = null;
 
   constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
@@ -63,17 +54,14 @@ export class ReactMeasuresView extends View {
 
   _performPreflightComputations() {
     this._lanesToRender = [];
-    this._laneToMeasures = new Map();
 
     for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {
-      const measuresForLane = getMeasuresForLane(
-        this._profilerData.measures,
+      const measuresForLane = this._profilerData.laneToReactMeasureMap.get(
         lane,
       );
       // Only show lanes with measures
-      if (measuresForLane.length) {
+      if (measuresForLane != null && measuresForLane.length > 0) {
         this._lanesToRender.push(lane);
-        this._laneToMeasures.set(lane, measuresForLane);
       }
     }
 
@@ -213,7 +201,7 @@ export class ReactMeasuresView extends View {
       frame,
       _hoveredMeasure,
       _lanesToRender,
-      _laneToMeasures,
+      _profilerData,
       visibleArea,
     } = this;
 
@@ -233,7 +221,7 @@ export class ReactMeasuresView extends View {
     for (let i = 0; i < _lanesToRender.length; i++) {
       const lane = _lanesToRender[i];
       const baseY = frame.origin.y + i * REACT_LANE_HEIGHT;
-      const measuresForLane = _laneToMeasures.get(lane);
+      const measuresForLane = _profilerData.laneToReactMeasureMap.get(lane);
 
       if (!measuresForLane) {
         throw new Error(
@@ -242,7 +230,7 @@ export class ReactMeasuresView extends View {
       }
 
       // Render lane labels
-      const label = this._profilerData.laneToLabelMap.get(lane);
+      const label = _profilerData.laneToLabelMap.get(lane);
       if (label == null) {
         console.warn(`Could not find label for lane ${lane}.`);
       } else {
@@ -316,8 +304,8 @@ export class ReactMeasuresView extends View {
       frame,
       _intrinsicSize,
       _lanesToRender,
-      _laneToMeasures,
       onHover,
+      _profilerData,
       visibleArea,
     } = this;
     if (!onHover) {
@@ -347,7 +335,7 @@ export class ReactMeasuresView extends View {
     // 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 = _laneToMeasures.get(lane);
+    const measures = _profilerData.laneToReactMeasureMap.get(lane);
     if (!measures) {
       onHover(null);
       return;
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 4c59a68efe3b..0fa434b9489d 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -253,6 +253,7 @@ describe(preprocessData, () => {
       ]);
       expect(data).toMatchInlineSnapshot(`
         Object {
+          "batchUIDToMeasuresMap": Map {},
           "componentMeasures": Array [],
           "duration": 0.005,
           "flamechart": Array [],
@@ -289,7 +290,39 @@ describe(preprocessData, () => {
             29 => "Idle",
             30 => "Offscreen",
           },
-          "measures": Array [],
+          "laneToReactMeasureMap": Map {
+            0 => Array [],
+            1 => Array [],
+            2 => Array [],
+            3 => Array [],
+            4 => Array [],
+            5 => Array [],
+            6 => Array [],
+            7 => Array [],
+            8 => Array [],
+            9 => Array [],
+            10 => Array [],
+            11 => Array [],
+            12 => Array [],
+            13 => Array [],
+            14 => Array [],
+            15 => Array [],
+            16 => Array [],
+            17 => Array [],
+            18 => Array [],
+            19 => Array [],
+            20 => Array [],
+            21 => Array [],
+            22 => Array [],
+            23 => Array [],
+            24 => Array [],
+            25 => Array [],
+            26 => Array [],
+            27 => Array [],
+            28 => Array [],
+            29 => Array [],
+            30 => Array [],
+          },
           "nativeEvents": Array [],
           "otherUserTimingMarks": Array [],
           "reactVersion": "17.0.3",
@@ -340,102 +373,178 @@ describe(preprocessData, () => {
         }),
       ]);
       expect(data).toMatchInlineSnapshot(`
+        Object {
+          "batchUIDToMeasuresMap": Map {
+            0 => Array [
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.004999999999999999,
+                "lanes": Array [
+                  9,
+                ],
+                "timestamp": 0.006,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.001,
+                "lanes": Array [
+                  9,
+                ],
+                "timestamp": 0.006,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.002999999999999999,
+                "lanes": Array [
+                  9,
+                ],
+                "timestamp": 0.008,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  9,
+                ],
+                "timestamp": 0.009,
+                "type": "layout-effects",
+              },
+            ],
+          },
+          "componentMeasures": Array [],
+          "duration": 0.011,
+          "flamechart": Array [],
+          "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 => Array [],
+            1 => Array [],
+            2 => Array [],
+            3 => Array [],
+            4 => Array [],
+            5 => Array [],
+            6 => Array [],
+            7 => Array [],
+            8 => Array [],
+            9 => Array [
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.004999999999999999,
+                "lanes": Array [
+                  9,
+                ],
+                "timestamp": 0.006,
+                "type": "render-idle",
+              },
               Object {
-                "componentMeasures": Array [],
-                "duration": 0.011,
-                "flamechart": Array [],
-                "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",
-                },
-                "measures": Array [
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.004999999999999999,
-                    "lanes": Array [
-                      9,
-                    ],
-                    "timestamp": 0.006,
-                    "type": "render-idle",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.001,
-                    "lanes": Array [
-                      9,
-                    ],
-                    "timestamp": 0.006,
-                    "type": "render",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.002999999999999999,
-                    "lanes": Array [
-                      9,
-                    ],
-                    "timestamp": 0.008,
-                    "type": "commit",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 1,
-                    "duration": 0.0010000000000000009,
-                    "lanes": Array [
-                      9,
-                    ],
-                    "timestamp": 0.009,
-                    "type": "layout-effects",
-                  },
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.001,
+                "lanes": Array [
+                  9,
                 ],
-                "nativeEvents": Array [],
-                "otherUserTimingMarks": Array [],
-                "reactVersion": "17.0.3",
-                "schedulingEvents": Array [
-                  Object {
-                    "lanes": Array [
-                      9,
-                    ],
-                    "timestamp": 0.005,
-                    "type": "schedule-render",
-                    "warning": null,
-                  },
+                "timestamp": 0.006,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.002999999999999999,
+                "lanes": Array [
+                  9,
+                ],
+                "timestamp": 0.008,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  9,
                 ],
-                "startTime": 1,
-                "suspenseEvents": Array [],
-              }
-          `);
+                "timestamp": 0.009,
+                "type": "layout-effects",
+              },
+            ],
+            10 => Array [],
+            11 => Array [],
+            12 => Array [],
+            13 => Array [],
+            14 => Array [],
+            15 => Array [],
+            16 => Array [],
+            17 => Array [],
+            18 => Array [],
+            19 => Array [],
+            20 => Array [],
+            21 => Array [],
+            22 => Array [],
+            23 => Array [],
+            24 => Array [],
+            25 => Array [],
+            26 => Array [],
+            27 => Array [],
+            28 => Array [],
+            29 => Array [],
+            30 => Array [],
+          },
+          "nativeEvents": Array [],
+          "otherUserTimingMarks": Array [],
+          "reactVersion": "17.0.3",
+          "schedulingEvents": Array [
+            Object {
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.005,
+              "type": "schedule-render",
+              "warning": null,
+            },
+          ],
+          "startTime": 1,
+          "suspenseEvents": Array [],
+        }
+      `);
     }
   });
 
@@ -448,107 +557,183 @@ describe(preprocessData, () => {
         ...createUserTimingData(clearedMarks),
       ]);
       expect(data).toMatchInlineSnapshot(`
+        Object {
+          "batchUIDToMeasuresMap": Map {
+            0 => Array [
               Object {
-                "componentMeasures": Array [],
-                "duration": 0.013,
-                "flamechart": Array [],
-                "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",
-                },
-                "measures": Array [
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.008,
-                    "lanes": Array [
-                      0,
-                    ],
-                    "timestamp": 0.005,
-                    "type": "render-idle",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.001,
-                    "lanes": Array [
-                      0,
-                    ],
-                    "timestamp": 0.005,
-                    "type": "render",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.005999999999999999,
-                    "lanes": Array [
-                      0,
-                    ],
-                    "timestamp": 0.007,
-                    "type": "commit",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 1,
-                    "duration": 0.0010000000000000009,
-                    "lanes": Array [
-                      0,
-                    ],
-                    "timestamp": 0.011,
-                    "type": "layout-effects",
-                  },
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.008,
+                "lanes": Array [
+                  0,
                 ],
-                "nativeEvents": Array [],
-                "otherUserTimingMarks": Array [
-                  Object {
-                    "name": "__v3",
-                    "timestamp": 0.003,
-                  },
+                "timestamp": 0.005,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.001,
+                "lanes": Array [
+                  0,
+                ],
+                "timestamp": 0.005,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.005999999999999999,
+                "lanes": Array [
+                  0,
                 ],
-                "reactVersion": "17.0.3",
-                "schedulingEvents": Array [
-                  Object {
-                    "lanes": Array [
-                      0,
-                    ],
-                    "timestamp": 0.004,
-                    "type": "schedule-render",
-                    "warning": null,
-                  },
+                "timestamp": 0.007,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  0,
                 ],
-                "startTime": 4,
-                "suspenseEvents": Array [],
-              }
-          `);
+                "timestamp": 0.011,
+                "type": "layout-effects",
+              },
+            ],
+          },
+          "componentMeasures": Array [],
+          "duration": 0.013,
+          "flamechart": Array [],
+          "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 => Array [
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.008,
+                "lanes": Array [
+                  0,
+                ],
+                "timestamp": 0.005,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.001,
+                "lanes": Array [
+                  0,
+                ],
+                "timestamp": 0.005,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.005999999999999999,
+                "lanes": Array [
+                  0,
+                ],
+                "timestamp": 0.007,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  0,
+                ],
+                "timestamp": 0.011,
+                "type": "layout-effects",
+              },
+            ],
+            1 => Array [],
+            2 => Array [],
+            3 => Array [],
+            4 => Array [],
+            5 => Array [],
+            6 => Array [],
+            7 => Array [],
+            8 => Array [],
+            9 => Array [],
+            10 => Array [],
+            11 => Array [],
+            12 => Array [],
+            13 => Array [],
+            14 => Array [],
+            15 => Array [],
+            16 => Array [],
+            17 => Array [],
+            18 => Array [],
+            19 => Array [],
+            20 => Array [],
+            21 => Array [],
+            22 => Array [],
+            23 => Array [],
+            24 => Array [],
+            25 => Array [],
+            26 => Array [],
+            27 => Array [],
+            28 => Array [],
+            29 => Array [],
+            30 => Array [],
+          },
+          "nativeEvents": Array [],
+          "otherUserTimingMarks": Array [
+            Object {
+              "name": "__v3",
+              "timestamp": 0.003,
+            },
+          ],
+          "reactVersion": "17.0.3",
+          "schedulingEvents": Array [
+            Object {
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.004,
+              "type": "schedule-render",
+              "warning": null,
+            },
+          ],
+          "startTime": 4,
+          "suspenseEvents": Array [],
+        }
+      `);
     }
   });
 
@@ -572,189 +757,327 @@ describe(preprocessData, () => {
         ...createUserTimingData(clearedMarks),
       ]);
       expect(data).toMatchInlineSnapshot(`
+        Object {
+          "batchUIDToMeasuresMap": Map {
+            0 => Array [
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.009999999999999998,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.005,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.003,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.005,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.006,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.009,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.013,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.0019999999999999983,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.016,
+                "type": "passive-effects",
+              },
+            ],
+            1 => Array [
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.010000000000000002,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.019,
+                "type": "render-idle",
+              },
               Object {
-                "componentMeasures": Array [
-                  Object {
-                    "componentName": "App",
-                    "duration": 0.001,
-                    "timestamp": 0.006,
-                    "warning": null,
-                  },
-                  Object {
-                    "componentName": "App",
-                    "duration": 0.0010000000000000009,
-                    "timestamp": 0.02,
-                    "warning": null,
-                  },
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.002999999999999999,
+                "lanes": Array [
+                  4,
                 ],
-                "duration": 0.031,
-                "flamechart": Array [],
-                "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",
-                },
-                "measures": Array [
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.009999999999999998,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.005,
-                    "type": "render-idle",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.003,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.005,
-                    "type": "render",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.006,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.009,
-                    "type": "commit",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 1,
-                    "duration": 0.0010000000000000009,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.013,
-                    "type": "layout-effects",
-                  },
-                  Object {
-                    "batchUID": 0,
-                    "depth": 0,
-                    "duration": 0.0019999999999999983,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.016,
-                    "type": "passive-effects",
-                  },
-                  Object {
-                    "batchUID": 1,
-                    "depth": 0,
-                    "duration": 0.010000000000000002,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.019,
-                    "type": "render-idle",
-                  },
-                  Object {
-                    "batchUID": 1,
-                    "depth": 0,
-                    "duration": 0.002999999999999999,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.019,
-                    "type": "render",
-                  },
-                  Object {
-                    "batchUID": 1,
-                    "depth": 0,
-                    "duration": 0.006000000000000002,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.023,
-                    "type": "commit",
-                  },
-                  Object {
-                    "batchUID": 1,
-                    "depth": 1,
-                    "duration": 0.0010000000000000009,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.027,
-                    "type": "layout-effects",
-                  },
-                  Object {
-                    "batchUID": 1,
-                    "depth": 0,
-                    "duration": 0.0010000000000000009,
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.03,
-                    "type": "passive-effects",
-                  },
+                "timestamp": 0.019,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.006000000000000002,
+                "lanes": Array [
+                  4,
                 ],
-                "nativeEvents": Array [],
-                "otherUserTimingMarks": Array [
-                  Object {
-                    "name": "__v3",
-                    "timestamp": 0.003,
-                  },
+                "timestamp": 0.023,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  4,
                 ],
-                "reactVersion": "17.0.3",
-                "schedulingEvents": Array [
-                  Object {
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.004,
-                    "type": "schedule-render",
-                    "warning": null,
-                  },
-                  Object {
-                    "componentName": "App",
-                    "lanes": Array [
-                      4,
-                    ],
-                    "timestamp": 0.017,
-                    "type": "schedule-state-update",
-                    "warning": null,
-                  },
+                "timestamp": 0.027,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  4,
                 ],
-                "startTime": 4,
-                "suspenseEvents": Array [],
-              }
-          `);
+                "timestamp": 0.03,
+                "type": "passive-effects",
+              },
+            ],
+          },
+          "componentMeasures": Array [
+            Object {
+              "componentName": "App",
+              "duration": 0.001,
+              "timestamp": 0.006,
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0.0010000000000000009,
+              "timestamp": 0.02,
+              "warning": null,
+            },
+          ],
+          "duration": 0.031,
+          "flamechart": Array [],
+          "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 => Array [],
+            1 => Array [],
+            2 => Array [],
+            3 => Array [],
+            4 => Array [
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.009999999999999998,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.005,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.003,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.005,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.006,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.009,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.013,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 0,
+                "depth": 0,
+                "duration": 0.0019999999999999983,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.016,
+                "type": "passive-effects",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.010000000000000002,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.019,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.002999999999999999,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.019,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.006000000000000002,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.023,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.027,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0.0010000000000000009,
+                "lanes": Array [
+                  4,
+                ],
+                "timestamp": 0.03,
+                "type": "passive-effects",
+              },
+            ],
+            5 => Array [],
+            6 => Array [],
+            7 => Array [],
+            8 => Array [],
+            9 => Array [],
+            10 => Array [],
+            11 => Array [],
+            12 => Array [],
+            13 => Array [],
+            14 => Array [],
+            15 => Array [],
+            16 => Array [],
+            17 => Array [],
+            18 => Array [],
+            19 => Array [],
+            20 => Array [],
+            21 => Array [],
+            22 => Array [],
+            23 => Array [],
+            24 => Array [],
+            25 => Array [],
+            26 => Array [],
+            27 => Array [],
+            28 => Array [],
+            29 => Array [],
+            30 => Array [],
+          },
+          "nativeEvents": Array [],
+          "otherUserTimingMarks": Array [
+            Object {
+              "name": "__v3",
+              "timestamp": 0.003,
+            },
+          ],
+          "reactVersion": "17.0.3",
+          "schedulingEvents": Array [
+            Object {
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.004,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.017,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ],
+          "startTime": 4,
+          "suspenseEvents": Array [],
+        }
+      `);
     }
   });
 
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 532251ce5a3e..5adb7f89b770 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -13,13 +13,14 @@ import {
 } from '@elg/speedscope';
 import type {TimelineEvent} from '@elg/speedscope';
 import type {
-  Milliseconds,
   BatchUID,
   Flamechart,
+  Milliseconds,
   NativeEvent,
   Phase,
   ReactLane,
   ReactComponentMeasure,
+  ReactMeasure,
   ReactMeasureType,
   ReactProfilerData,
   SchedulingEvent,
@@ -33,7 +34,7 @@ import {getBatchRange} from '../utils/getBatchRange';
 type MeasureStackElement = {|
   type: ReactMeasureType,
   depth: number,
-  index: number,
+  measure: ReactMeasure,
   startTime: Milliseconds,
   stopTime?: Milliseconds,
 |};
@@ -92,17 +93,19 @@ export function getLanesFromTransportDecimalBitmask(
   return lanes;
 }
 
-const laneToLabelMap: Map<number, string> = new Map();
-function updateLaneToLabelMap(laneLabelTuplesString: string): void {
+function updateLaneToLabelMap(
+  profilerData: ReactProfilerData,
+  laneLabelTuplesString: string,
+): void {
   // These marks appear multiple times in the data;
   // We only need to extact them once.
-  if (laneToLabelMap.size === 0) {
+  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).
-      laneToLabelMap.set(laneIndex, laneLabelTuples[laneIndex]);
+      profilerData.laneToLabelMap.set(laneIndex, laneLabelTuples[laneIndex]);
     }
   }
 }
@@ -133,18 +136,32 @@ function markWorkStarted(
   state: ProcessorState,
 ) {
   const {batchUID, measureStack} = state;
-  const index = currentProfilerData.measures.length;
   const depth = getDepth(measureStack);
 
-  state.measureStack.push({depth, index, startTime, type});
-
-  currentProfilerData.measures.push({
+  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);
   });
 }
 
@@ -174,8 +191,7 @@ function markWorkCompleted(
     );
   }
 
-  const {index, startTime} = stack.pop();
-  const measure = currentProfilerData.measures[index];
+  const {measure, startTime} = stack.pop();
   if (!measure) {
     console.error('Could not find matching measure for type "%s".', type);
   }
@@ -282,7 +298,7 @@ function processTimelineEvent(
         }
       } else if (name.startsWith('--react-lane-labels-')) {
         const [laneLabelTuplesString] = name.substr(20).split('-');
-        updateLaneToLabelMap(laneLabelTuplesString);
+        updateLaneToLabelMap(currentProfilerData, laneLabelTuplesString);
       } else if (name.startsWith('--component-render-start-')) {
         const [componentName] = name.substr(25).split('-');
 
@@ -648,12 +664,18 @@ export default function preprocessData(
 ): ReactProfilerData {
   const flamechart = preprocessFlamechart(timeline);
 
+  const laneToReactMeasureMap = new Map();
+  for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {
+    laneToReactMeasureMap.set(lane, []);
+  }
+
   const profilerData: ReactProfilerData = {
+    batchUIDToMeasuresMap: new Map(),
     componentMeasures: [],
     duration: 0,
     flamechart,
-    laneToLabelMap,
-    measures: [],
+    laneToLabelMap: new Map(),
+    laneToReactMeasureMap,
     nativeEvents: [],
     otherUserTimingMarks: [],
     reactVersion: null,
@@ -739,7 +761,11 @@ export default function preprocessData(
   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 => laneToLabelMap.get(lane) === 'Transition')) {
+      if (
+        !lanes.some(
+          lane => profilerData.laneToLabelMap.get(lane) === 'Transition',
+        )
+      ) {
         suspenseEvent.warning = WARNING_STRINGS.SUSPEND_DURING_UPATE;
       }
     },
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index edd683043a56..761033f2cdda 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-// Type utilities
+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
@@ -123,12 +123,29 @@ export type FlamechartStackLayer = FlamechartStackFrame[];
 
 export type Flamechart = FlamechartStackLayer[];
 
+export type HorizontalScrollStateChangeCallback = (
+  scrollState: ScrollState,
+) => 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,
+  updateHorizontalScrollState: (scrollState: ScrollState) => void,
+  viewToMutableViewStateMap: Map<string, mixed>,
+|};
+
 export type ReactProfilerData = {|
+  batchUIDToMeasuresMap: Map<BatchUID, ReactMeasure[]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
   flamechart: Flamechart,
   laneToLabelMap: Map<ReactLane, string>,
-  measures: ReactMeasure[],
+  laneToReactMeasureMap: Map<ReactLane, ReactMeasure[]>,
   nativeEvents: NativeEvent[],
   otherUserTimingMarks: UserTimingMark[],
   reactVersion: string | null,
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js b/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
index 0d977e0390e7..840a105f8d68 100644
--- a/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
+++ b/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
@@ -9,37 +9,35 @@
 
 import memoize from 'memoize-one';
 
-import type {BatchUID, Milliseconds, ReactProfilerData} from '../types';
+import type {
+  BatchUID,
+  Milliseconds,
+  ReactMeasure,
+  ReactProfilerData,
+} from '../types';
 
 function unmemoizedGetBatchRange(
   batchUID: BatchUID,
   data: ReactProfilerData,
-  minStartTime?: ?number,
+  minStartTime?: number = 0,
 ): [Milliseconds, Milliseconds] {
-  const {measures} = data;
-
-  let startTime = 0;
-  let stopTime = Infinity;
+  const measures = data.batchUIDToMeasuresMap.get(batchUID);
+  if (measures == null || measures.length === 0) {
+    throw Error(`Could not find measures with batch UID "${batchUID}"`);
+  }
 
-  let i = 0;
+  const lastMeasure = ((measures[measures.length - 1]: any): ReactMeasure);
+  const stopTime = lastMeasure.timestamp + lastMeasure.duration;
 
-  // Find the first measure in the current batch.
-  for (i; i < measures.length; i++) {
-    const measure = measures[i];
-    if (measure.batchUID === batchUID) {
-      if (minStartTime == null || measure.timestamp >= minStartTime) {
-        startTime = measure.timestamp;
-        break;
-      }
-    }
+  if (stopTime < minStartTime) {
+    return [0, 0];
   }
 
-  // Find the last measure in the current batch.
-  for (i; i < measures.length; i++) {
-    const measure = measures[i];
-    if (measure.batchUID === batchUID) {
-      stopTime = measure.timestamp;
-    } else {
+  let startTime = minStartTime;
+  for (let index = 0; index < measures.length; index++) {
+    const measure = measures[index];
+    if (measure.timestamp >= minStartTime) {
+      startTime = measure.timestamp;
       break;
     }
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
index 78d90e2495da..5519599f12dc 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
@@ -18,6 +18,7 @@ import type {
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
 import type {ViewRefs} from './Surface';
+import type {ViewState} from '../types';
 
 import {Surface} from './Surface';
 import {View} from './View';
@@ -30,96 +31,84 @@ import {
   zoomState,
 } from './utils/scrollState';
 import {
-  DEFAULT_ZOOM_LEVEL,
   MAX_ZOOM_LEVEL,
   MIN_ZOOM_LEVEL,
   MOVE_WHEEL_DELTA_THRESHOLD,
 } from './constants';
 
-export type HorizontalPanAndZoomViewOnChangeCallback = (
-  state: ScrollState,
-  view: HorizontalPanAndZoomView,
-) => void;
-
 export class HorizontalPanAndZoomView extends View {
+  _contentView: View;
   _intrinsicContentWidth: number;
   _isPanning = false;
-  _scrollState: ScrollState = {offset: 0, length: 0};
-  _onStateChange: HorizontalPanAndZoomViewOnChangeCallback = () => {};
+  _viewState: ViewState;
 
   constructor(
     surface: Surface,
     frame: Rect,
     contentView: View,
     intrinsicContentWidth: number,
-    onStateChange?: HorizontalPanAndZoomViewOnChangeCallback,
+    viewState: ViewState,
   ) {
     super(surface, frame);
-    this.addSubview(contentView);
-    this._intrinsicContentWidth = intrinsicContentWidth;
-    this._setScrollState({
-      offset: 0,
-      length: intrinsicContentWidth * DEFAULT_ZOOM_LEVEL,
-    });
-    if (onStateChange) this._onStateChange = onStateChange;
-  }
 
-  setFrame(newFrame: Rect) {
-    super.setFrame(newFrame);
+    this._contentView = contentView;
+    this._intrinsicContentWidth = intrinsicContentWidth;
+    this._viewState = viewState;
 
-    // Revalidate scrollState
-    this._setStateAndInformCallbacksIfChanged(this._scrollState);
-  }
+    viewState.onHorizontalScrollStateChange(scrollState => {
+      this.zoomToRange(scrollState.offset, scrollState.length);
+    });
 
-  setScrollState(proposedState: ScrollState) {
-    this._setScrollState(proposedState);
+    this.addSubview(contentView);
   }
 
   /**
-   * Just sets scroll state. Use `_setStateAndInformCallbacksIfChanged` if this
-   * view's callbacks should also be called.
+   * Just sets scroll state.
+   * Use `_setStateAndInformCallbacksIfChanged` if this view's callbacks should also be called.
    *
    * @returns Whether state was changed
    * @private
    */
-  _setScrollState(proposedState: ScrollState): boolean {
+  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._scrollState)) {
-      return false;
+    if (
+      !areScrollStatesEqual(clampedState, this._viewState.horizontalScrollState)
+    ) {
+      this.setNeedsDisplay();
     }
-    this._scrollState = clampedState;
-    this.setNeedsDisplay();
-    return true;
   }
 
   /**
-   * @private
+   * 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.
    */
-  _setStateAndInformCallbacksIfChanged(proposedState: ScrollState) {
-    if (this._setScrollState(proposedState)) {
-      this._onStateChange(this._scrollState, this);
-    }
+  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() {
     return this._contentView.desiredSize();
   }
 
-  /**
-   * Reference to the content view. This view is also the only view in
-   * `this.subviews`.
-   */
-  get _contentView() {
-    return this.subviews[0];
-  }
-
   layoutSubviews() {
-    const {offset, length} = this._scrollState;
+    const {offset, length} = this._viewState.horizontalScrollState;
     const proposedFrame = {
       origin: {
         x: this.frame.origin.x + offset,
@@ -134,24 +123,22 @@ export class HorizontalPanAndZoomView extends View {
     super.layoutSubviews();
   }
 
-  /**
-   * 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._scrollState,
-      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);
+  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) {
@@ -183,11 +170,11 @@ export class HorizontalPanAndZoomView extends View {
       return;
     }
     const newState = translateState({
-      state: this._scrollState,
+      state: this._viewState.horizontalScrollState,
       delta: interaction.payload.event.movementX,
       containerLength: this.frame.size.width,
     });
-    this._setStateAndInformCallbacksIfChanged(newState);
+    this._viewState.updateHorizontalScrollState(newState);
   }
 
   _handleMouseUp(interaction: MouseUpInteraction, viewRefs: ViewRefs) {
@@ -226,44 +213,26 @@ export class HorizontalPanAndZoomView extends View {
       }
 
       const newState = zoomState({
-        state: this._scrollState,
+        state: this._viewState.horizontalScrollState,
         multiplier: 1 + 0.005 * -deltaY,
-        fixedPoint: location.x - this._scrollState.offset,
+        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._setStateAndInformCallbacksIfChanged(newState);
+      this._viewState.updateHorizontalScrollState(newState);
     } else {
       if (absDeltaX < MOVE_WHEEL_DELTA_THRESHOLD) {
         return;
       }
 
       const newState = translateState({
-        state: this._scrollState,
+        state: this._viewState.horizontalScrollState,
         delta: -deltaX,
         containerLength: this.frame.size.width,
       });
-      this._setStateAndInformCallbacksIfChanged(newState);
-    }
-  }
-
-  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;
+      this._viewState.updateHorizontalScrollState(newState);
     }
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
index 8394bcf10577..1f0f890ce38e 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
@@ -17,6 +17,7 @@ import type {
 } from './useCanvasInteraction';
 import type {Rect} from './geometry';
 import type {ViewRefs} from './Surface';
+import type {ViewState} from '../types';
 
 import {BORDER_SIZE, COLORS} from '../content-views/constants';
 import {drawText} from '../content-views/utils/text';
@@ -35,10 +36,10 @@ type ResizingState = $ReadOnly<{|
   mouseY: number,
 |}>;
 
-type LayoutState = $ReadOnly<{|
+type LayoutState = {|
   /** Resize bar's vertical position relative to resize view's frame.origin.y */
   barOffsetY: number,
-|}>;
+|};
 
 const RESIZE_BAR_DOT_RADIUS = 1;
 const RESIZE_BAR_DOT_SPACING = 4;
@@ -217,36 +218,33 @@ class ResizeBar extends View {
 export class ResizableView extends View {
   _canvasRef: {current: HTMLCanvasElement | null};
   _layoutState: LayoutState;
+  _mutableViewStateKey: string;
   _resizeBar: ResizeBar;
   _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 ResizeBar(surface, frame, label);
+    this._viewState = viewState;
 
     this.addSubview(this._subview);
     this.addSubview(this._resizeBar);
 
-    const subviewDesiredSize = subview.desiredSize();
-    this._updateLayoutStateAndResizeBar(
-      subviewDesiredSize.maxInitialHeight != null
-        ? Math.min(
-            subviewDesiredSize.maxInitialHeight,
-            subviewDesiredSize.height,
-          )
-        : subviewDesiredSize.height,
-    );
+    this._restoreMutableViewState();
   }
 
   desiredSize() {
@@ -274,6 +272,35 @@ export class ResizableView extends View {
     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() {
     const subviewDesiredSize = this._subview.desiredSize();
     return subviewDesiredSize.hideScrollBarIfLessThanHeight != null
@@ -287,10 +314,7 @@ export class ResizableView extends View {
       barOffsetY = 0;
     }
 
-    this._layoutState = {
-      ...this._layoutState,
-      barOffsetY,
-    };
+    this._layoutState.barOffsetY = barOffsetY;
 
     this._resizeBar.showLabel = barOffsetY === 0;
   }
@@ -341,6 +365,10 @@ export class ResizableView extends View {
   }
 
   _handleClick(interaction: ClickInteraction) {
+    if (!this._shouldRenderResizeBar()) {
+      return;
+    }
+
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
@@ -356,6 +384,10 @@ export class ResizableView extends View {
   }
 
   _handleDoubleClick(interaction: DoubleClickInteraction) {
+    if (!this._shouldRenderResizeBar()) {
+      return;
+    }
+
     const cursorInView = rectContainsPoint(
       interaction.payload.location,
       this.frame,
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
index 245b53aff718..3f2f77591216 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
@@ -17,6 +17,7 @@ import type {
 import type {Rect} from './geometry';
 import type {ScrollState} from './utils/scrollState';
 import type {ViewRefs} from './Surface';
+import type {ViewState} from '../types';
 
 import {Surface} from './Surface';
 import {View} from './View';
@@ -34,13 +35,33 @@ const CARET_WIDTH = 5;
 const CARET_HEIGHT = 3;
 
 export class VerticalScrollView extends View {
-  _scrollState: ScrollState = {offset: 0, length: 0};
-  _isPanning = false;
-
-  constructor(surface: Surface, frame: Rect, contentView: View) {
+  _contentView: View;
+  _isPanning: boolean;
+  _mutableViewStateKey: string;
+  _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._scrollState = {
+      offset: 0,
+      length: 0,
+    };
+    this._viewState = viewState;
+
     this.addSubview(contentView);
-    this._setScrollState(this._scrollState);
+
+    this._restoreMutableViewState();
   }
 
   setFrame(newFrame: Rect) {
@@ -102,14 +123,6 @@ export class VerticalScrollView extends View {
     }
   }
 
-  /**
-   * Reference to the content view. This view is also the only view in
-   * `this.subviews`.
-   */
-  get _contentView() {
-    return this.subviews[0];
-  }
-
   layoutSubviews() {
     const {offset} = this._scrollState;
     const desiredSize = this._contentView.desiredSize();
@@ -133,6 +146,23 @@ export class VerticalScrollView extends View {
     super.layoutSubviews();
   }
 
+  handleInteraction(interaction: Interaction) {
+    switch (interaction.type) {
+      case 'mousedown':
+        this._handleMouseDown(interaction);
+        break;
+      case 'mousemove':
+        this._handleMouseMove(interaction);
+        break;
+      case 'mouseup':
+        this._handleMouseUp(interaction);
+        break;
+      case 'wheel-shift':
+        this._handleWheelShift(interaction);
+        break;
+    }
+  }
+
   _handleMouseDown(interaction: MouseDownInteraction) {
     if (rectContainsPoint(interaction.payload.location, this.frame)) {
       this._isPanning = true;
@@ -184,21 +214,21 @@ export class VerticalScrollView extends View {
     this._setScrollState(newState);
   }
 
-  handleInteraction(interaction: Interaction) {
-    switch (interaction.type) {
-      case 'mousedown':
-        this._handleMouseDown(interaction);
-        break;
-      case 'mousemove':
-        this._handleMouseMove(interaction);
-        break;
-      case 'mouseup':
-        this._handleMouseUp(interaction);
-        break;
-      case 'wheel-shift':
-        this._handleWheelShift(interaction);
-        break;
+  _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();
   }
 
   /**
@@ -212,10 +242,11 @@ export class VerticalScrollView extends View {
       maxContentLength: height,
       containerLength: this.frame.size.height,
     });
-    if (areScrollStatesEqual(clampedState, this._scrollState)) {
-      return;
+    if (!areScrollStatesEqual(clampedState, this._scrollState)) {
+      this._scrollState.offset = clampedState.offset;
+      this._scrollState.length = clampedState.length;
+
+      this.setNeedsDisplay();
     }
-    this._scrollState = clampedState;
-    this.setNeedsDisplay();
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js b/packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js
index e7f73a86d33f..9e9bdb4919f3 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js
@@ -18,10 +18,10 @@ import {clamp} from './clamp';
  *     |<-------------------length------------------->|
  * ```
  */
-export type ScrollState = $ReadOnly<{|
+export type ScrollState = {|
   offset: number,
   length: number,
-|}>;
+|};
 
 function clampOffset(state: ScrollState, containerLength: number): ScrollState {
   return {

From da627ded867c882290776b4477250b6b312b77b4 Mon Sep 17 00:00:00 2001
From: Byron Luk <byronluk@gmail.com>
Date: Tue, 10 Aug 2021 11:16:54 -0700
Subject: [PATCH 0752/1603] Devtools/function context change (#22047)

---
 .../__snapshots__/profilingCache-test.js.snap | 211 +++++++++++++++---
 .../src/__tests__/profilingCache-test.js      |  34 ++-
 .../src/backend/renderer.js                   |  76 +++++--
 .../src/app/InspectableElements/Contexts.js   | 137 +++++++++++-
 4 files changed, 396 insertions(+), 62 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 2ab8751e3cbc..8818c8dfb33f 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -2485,7 +2485,7 @@ Object {
 exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 0 1`] = `
 Object {
   "changeDescriptions": Map {
-    3 => Object {
+    4 => Object {
       "context": null,
       "didHooksChange": false,
       "isFirstMount": true,
@@ -2499,11 +2499,13 @@ Object {
     1 => 0,
     2 => 0,
     3 => 0,
+    4 => 0,
   },
   "fiberSelfDurations": Map {
     1 => 0,
     2 => 0,
     3 => 0,
+    4 => 0,
   },
   "passiveEffectDuration": 0,
   "priorityLevel": "Immediate",
@@ -2523,8 +2525,8 @@ Object {
 exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 1 1`] = `
 Object {
   "changeDescriptions": Map {
-    3 => Object {
-      "context": null,
+    4 => Object {
+      "context": false,
       "didHooksChange": false,
       "isFirstMount": false,
       "props": Array [
@@ -2536,11 +2538,13 @@ Object {
   "duration": 0,
   "effectDuration": null,
   "fiberActualDurations": Map {
+    4 => 0,
     3 => 0,
     2 => 0,
     1 => 0,
   },
   "fiberSelfDurations": Map {
+    4 => 0,
     3 => 0,
     2 => 0,
     1 => 0,
@@ -2563,8 +2567,8 @@ Object {
 exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 2 1`] = `
 Object {
   "changeDescriptions": Map {
-    3 => Object {
-      "context": null,
+    4 => Object {
+      "context": false,
       "didHooksChange": true,
       "isFirstMount": false,
       "props": Array [],
@@ -2574,10 +2578,10 @@ Object {
   "duration": 0,
   "effectDuration": null,
   "fiberActualDurations": Map {
-    3 => 0,
+    4 => 0,
   },
   "fiberSelfDurations": Map {
-    3 => 0,
+    4 => 0,
   },
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
@@ -2586,7 +2590,7 @@ Object {
     Object {
       "displayName": "Component",
       "hocDisplayNames": null,
-      "id": 3,
+      "id": 4,
       "key": null,
       "type": 5,
     },
@@ -2597,8 +2601,8 @@ Object {
 exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 3 1`] = `
 Object {
   "changeDescriptions": Map {
-    3 => Object {
-      "context": null,
+    4 => Object {
+      "context": false,
       "didHooksChange": true,
       "isFirstMount": false,
       "props": Array [],
@@ -2608,10 +2612,10 @@ Object {
   "duration": 0,
   "effectDuration": null,
   "fiberActualDurations": Map {
-    3 => 0,
+    4 => 0,
   },
   "fiberSelfDurations": Map {
-    3 => 0,
+    4 => 0,
   },
   "passiveEffectDuration": null,
   "priorityLevel": "Immediate",
@@ -2620,7 +2624,7 @@ Object {
     Object {
       "displayName": "Component",
       "hocDisplayNames": null,
-      "id": 3,
+      "id": 4,
       "key": null,
       "type": 5,
     },
@@ -2631,8 +2635,48 @@ Object {
 exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 4 1`] = `
 Object {
   "changeDescriptions": Map {
-    3 => Object {
-      "context": null,
+    4 => Object {
+      "context": true,
+      "didHooksChange": false,
+      "isFirstMount": false,
+      "props": Array [],
+      "state": null,
+    },
+  },
+  "duration": 0,
+  "effectDuration": null,
+  "fiberActualDurations": Map {
+    4 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "fiberSelfDurations": Map {
+    4 => 0,
+    3 => 0,
+    2 => 0,
+    1 => 0,
+  },
+  "passiveEffectDuration": null,
+  "priorityLevel": "Immediate",
+  "timestamp": 0,
+  "updaters": Array [
+    Object {
+      "displayName": "Anonymous",
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+  ],
+}
+`;
+
+exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 5 1`] = `
+Object {
+  "changeDescriptions": Map {
+    4 => Object {
+      "context": true,
       "didHooksChange": false,
       "isFirstMount": false,
       "props": Array [],
@@ -2642,11 +2686,13 @@ Object {
   "duration": 0,
   "effectDuration": null,
   "fiberActualDurations": Map {
+    4 => 0,
     3 => 0,
     2 => 0,
     1 => 0,
   },
   "fiberSelfDurations": Map {
+    4 => 0,
     3 => 0,
     2 => 0,
     1 => 0,
@@ -2674,7 +2720,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -2699,6 +2745,10 @@ Object {
               3,
               0,
             ],
+            Array [
+              4,
+              0,
+            ],
           ],
           "fiberSelfDurations": Array [
             Array [
@@ -2713,6 +2763,10 @@ Object {
               3,
               0,
             ],
+            Array [
+              4,
+              0,
+            ],
           ],
           "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
@@ -2730,9 +2784,9 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
-                "context": null,
+                "context": false,
                 "didHooksChange": false,
                 "isFirstMount": false,
                 "props": Array [
@@ -2745,6 +2799,10 @@ Object {
           "duration": 0,
           "effectDuration": null,
           "fiberActualDurations": Array [
+            Array [
+              4,
+              0,
+            ],
             Array [
               3,
               0,
@@ -2759,6 +2817,10 @@ Object {
             ],
           ],
           "fiberSelfDurations": Array [
+            Array [
+              4,
+              0,
+            ],
             Array [
               3,
               0,
@@ -2788,9 +2850,9 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
-                "context": null,
+                "context": false,
                 "didHooksChange": true,
                 "isFirstMount": false,
                 "props": Array [],
@@ -2802,13 +2864,13 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
           ],
@@ -2819,7 +2881,7 @@ Object {
             Object {
               "displayName": "Component",
               "hocDisplayNames": null,
-              "id": 3,
+              "id": 4,
               "key": null,
               "type": 5,
             },
@@ -2828,9 +2890,9 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              3,
+              4,
               Object {
-                "context": null,
+                "context": false,
                 "didHooksChange": true,
                 "isFirstMount": false,
                 "props": Array [],
@@ -2842,13 +2904,13 @@ Object {
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
           ],
           "fiberSelfDurations": Array [
             Array [
-              3,
+              4,
               0,
             ],
           ],
@@ -2859,7 +2921,7 @@ Object {
             Object {
               "displayName": "Component",
               "hocDisplayNames": null,
-              "id": 3,
+              "id": 4,
               "key": null,
               "type": 5,
             },
@@ -2867,10 +2929,74 @@ Object {
         },
         Object {
           "changeDescriptions": Array [
+            Array [
+              4,
+              Object {
+                "context": true,
+                "didHooksChange": false,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 0,
+          "effectDuration": null,
+          "fiberActualDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              4,
+              0,
+            ],
             Array [
               3,
+              0,
+            ],
+            Array [
+              2,
+              0,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "passiveEffectDuration": null,
+          "priorityLevel": "Immediate",
+          "timestamp": 0,
+          "updaters": Array [
+            Object {
+              "displayName": "Anonymous",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              4,
               Object {
-                "context": null,
+                "context": true,
                 "didHooksChange": false,
                 "isFirstMount": false,
                 "props": Array [],
@@ -2881,6 +3007,10 @@ Object {
           "duration": 0,
           "effectDuration": null,
           "fiberActualDurations": Array [
+            Array [
+              4,
+              0,
+            ],
             Array [
               3,
               0,
@@ -2895,6 +3025,10 @@ Object {
             ],
           ],
           "fiberSelfDurations": Array [
+            Array [
+              4,
+              0,
+            ],
             Array [
               3,
               0,
@@ -2973,14 +3107,29 @@ Object {
           0,
           1,
           3,
-          5,
           2,
-          0,
           2,
           0,
+          1,
+          0,
+          4,
+          3,
+          0,
+          1,
           4,
+          5,
           3,
           0,
+          2,
+          0,
+          4,
+          4,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
         ],
         Array [
           1,
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index ace43294e931..bbb5c6ffaf03 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -311,6 +311,7 @@ describe('ProfilingCache', () => {
 
   it('should properly detect changed hooks', () => {
     const Context = React.createContext(0);
+    const Context2 = React.createContext(0);
 
     function reducer(state, action) {
       switch (action.type) {
@@ -332,6 +333,7 @@ describe('ProfilingCache', () => {
       // This hook's return value may change between renders,
       // but the hook itself isn't stateful.
       React.useContext(Context);
+      React.useContext(Context2);
 
       // These hooks and their dependencies may not change between renders.
       // We're using them to ensure that they don't trigger false positives.
@@ -351,7 +353,9 @@ describe('ProfilingCache', () => {
     utils.act(() =>
       legacyRender(
         <Context.Provider value={true}>
-          <Component count={1} />
+          <Context2.Provider value={true}>
+            <Component count={1} />
+          </Context2.Provider>
         </Context.Provider>,
         container,
       ),
@@ -361,7 +365,9 @@ describe('ProfilingCache', () => {
     utils.act(() =>
       legacyRender(
         <Context.Provider value={true}>
-          <Component count={2} />
+          <Context2.Provider value={true}>
+            <Component count={2} />
+          </Context2.Provider>
         </Context.Provider>,
         container,
       ),
@@ -373,17 +379,29 @@ describe('ProfilingCache', () => {
     // Fourth render has a changed state hook
     utils.act(() => setState('def'));
 
-    // Fifth render has a changed context value, but no changed hook.
-    // Technically, DevTools will miss this "context" change since it only tracks legacy context.
+    // Fifth render has a changed context value for context 1, but no changed hook.
     utils.act(() =>
       legacyRender(
         <Context.Provider value={false}>
-          <Component count={2} />
+          <Context2.Provider value={true}>
+            <Component count={2} />
+          </Context2.Provider>
         </Context.Provider>,
         container,
       ),
     );
 
+    // Sixth render has another changed context value for context 2, but no changed hook.
+    utils.act(() =>
+      legacyRender(
+        <Context.Provider value={false}>
+          <Context2.Provider value={false}>
+            <Component count={2} />
+          </Context2.Provider>
+        </Context.Provider>,
+        container,
+      ),
+    );
     utils.act(() => store.profilerStore.stopProfiling());
 
     const allCommitData = [];
@@ -403,7 +421,7 @@ describe('ProfilingCache', () => {
 
     const rootID = store.roots[0];
 
-    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
+    for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
       utils.act(() => {
         TestRenderer.create(
           <Validator
@@ -415,12 +433,12 @@ describe('ProfilingCache', () => {
       });
     }
 
-    expect(allCommitData).toHaveLength(5);
+    expect(allCommitData).toHaveLength(6);
 
     // Export and re-import profile data and make sure it is retained.
     utils.exportImportHelper(bridge, store);
 
-    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
+    for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
       utils.act(() => {
         TestRenderer.create(
           <Validator
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index e1772fdf47cb..62341ce300ec 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -960,6 +960,7 @@ export function attach(
 
     return false;
   }
+
   // NOTICE Keep in sync with shouldFilterFiber() and other get*ForFiber methods
   function getElementTypeForFiber(fiber: Fiber): ElementType {
     const {type, tag} = fiber;
@@ -1236,6 +1237,7 @@ export function attach(
 
   function updateContextsForFiber(fiber: Fiber) {
     switch (getElementTypeForFiber(fiber)) {
+      case ElementTypeFunction:
       case ElementTypeClass:
         if (idToContextsMap !== null) {
           const id = getFiberIDThrows(fiber);
@@ -1254,11 +1256,12 @@ export function attach(
   const NO_CONTEXT = {};
 
   function getContextsForFiber(fiber: Fiber): [Object, any] | null {
+    let legacyContext = NO_CONTEXT;
+    let modernContext = NO_CONTEXT;
+
     switch (getElementTypeForFiber(fiber)) {
       case ElementTypeClass:
         const instance = fiber.stateNode;
-        let legacyContext = NO_CONTEXT;
-        let modernContext = NO_CONTEXT;
         if (instance != null) {
           if (
             instance.constructor &&
@@ -1272,6 +1275,13 @@ export function attach(
             }
           }
         }
+        return [legacyContext, modernContext];
+      case ElementTypeFunction:
+        const dependencies = fiber.dependencies;
+        if (dependencies && dependencies.firstContext) {
+          modernContext = dependencies.firstContext;
+        }
+
         return [legacyContext, modernContext];
       default:
         return null;
@@ -1291,31 +1301,50 @@ export function attach(
   }
 
   function getContextChangedKeys(fiber: Fiber): null | boolean | Array<string> {
-    switch (getElementTypeForFiber(fiber)) {
-      case ElementTypeClass:
-        if (idToContextsMap !== null) {
-          const id = getFiberIDThrows(fiber);
-          const prevContexts = idToContextsMap.has(id)
-            ? idToContextsMap.get(id)
-            : null;
-          const nextContexts = getContextsForFiber(fiber);
+    if (idToContextsMap !== null) {
+      const id = getFiberIDThrows(fiber);
+      const prevContexts = idToContextsMap.has(id)
+        ? idToContextsMap.get(id)
+        : null;
+      const nextContexts = getContextsForFiber(fiber);
 
-          if (prevContexts == null || nextContexts == null) {
-            return null;
+      if (prevContexts == null || nextContexts == null) {
+        return null;
+      }
+
+      const [prevLegacyContext, prevModernContext] = prevContexts;
+      const [nextLegacyContext, nextModernContext] = nextContexts;
+
+      switch (getElementTypeForFiber(fiber)) {
+        case ElementTypeClass:
+          if (prevContexts && nextContexts) {
+            if (nextLegacyContext !== NO_CONTEXT) {
+              return getChangedKeys(prevLegacyContext, nextLegacyContext);
+            } else if (nextModernContext !== NO_CONTEXT) {
+              return prevModernContext !== nextModernContext;
+            }
           }
+          break;
+        case ElementTypeFunction:
+          if (nextModernContext !== NO_CONTEXT) {
+            let prevContext = prevModernContext;
+            let nextContext = nextModernContext;
+
+            while (prevContext && nextContext) {
+              if (!is(prevContext.memoizedValue, nextContext.memoizedValue)) {
+                return true;
+              }
 
-          const [prevLegacyContext, prevModernContext] = prevContexts;
-          const [nextLegacyContext, nextModernContext] = nextContexts;
+              prevContext = prevContext.next;
+              nextContext = nextContext.next;
+            }
 
-          if (nextLegacyContext !== NO_CONTEXT) {
-            return getChangedKeys(prevLegacyContext, nextLegacyContext);
-          } else if (nextModernContext !== NO_CONTEXT) {
-            return prevModernContext !== nextModernContext;
+            return false;
           }
-        }
-        break;
-      default:
-        break;
+          break;
+        default:
+          break;
+      }
     }
     return null;
   }
@@ -2859,6 +2888,7 @@ export function attach(
     // Otherwise B has to be current branch.
     return alternate;
   }
+
   // END copied code
 
   function prepareViewAttributeSource(
@@ -3860,6 +3890,7 @@ export function attach(
   // Map of id and its force error status: true (error), false (toggled off),
   // null (do nothing)
   const forceErrorForFiberIDs = new Map();
+
   function shouldErrorFiberAccordingToMap(fiber) {
     if (typeof setErrorHandler !== 'function') {
       throw new Error(
@@ -3924,6 +3955,7 @@ export function attach(
   }
 
   const forceFallbackForSuspenseIDs = new Set();
+
   function shouldSuspendFiberAccordingToSet(fiber) {
     const maybeID = getFiberIDUnsafe(((fiber: any): Fiber));
     return maybeID !== null && forceFallbackForSuspenseIDs.has(maybeID);
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
index 8d9af3f22d45..39c03547fe9c 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {createContext, Component, useContext} from 'react';
+import {createContext, Component, useContext, useState} from 'react';
 import PropTypes from 'prop-types';
 
 function someNamedFunction() {}
@@ -73,6 +73,43 @@ class LegacyContextConsumer extends Component<any> {
   }
 }
 
+class LegacyContextProviderWithUpdates extends Component<any> {
+  constructor(props) {
+    super(props);
+    this.state = {type: 'desktop'};
+  }
+
+  getChildContext() {
+    return {type: this.state.type};
+  }
+
+  handleChange = event => {
+    this.setState({type: event.target.value});
+  };
+
+  render() {
+    return (
+      <>
+        <LegacyFunctionalContextConsumer />
+        <div>
+          <input value={this.state.type} onChange={this.handleChange} />
+        </div>
+      </>
+    );
+  }
+}
+
+LegacyContextProviderWithUpdates.childContextTypes = {
+  type: PropTypes.string,
+};
+
+function LegacyFunctionalContextConsumer(props, context) {
+  return formatContextForDisplay('LegacyFunctionContextConsumer', context.type);
+}
+LegacyFunctionalContextConsumer.contextTypes = {
+  type: PropTypes.string,
+};
+
 const ModernContext = createContext();
 ModernContext.displayName = 'ModernContext';
 const ArrayContext = createContext(contextData.array);
@@ -105,6 +142,101 @@ function FunctionalContextConsumer() {
   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');
+
+  const handleChange = e => setString(e.target.value);
+  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) {
+    super(props);
+    this.setString = string => {
+      this.setState({string});
+    };
+
+    this.state = {
+      string: contextData.string,
+      setString: this.setString,
+    };
+  }
+
+  render() {
+    return (
+      <StringContextWithUpdates.Provider value={this.state}>
+        <ModernClassContextConsumerWithUpdates />
+      </StringContextWithUpdates.Provider>
+    );
+  }
+}
+
+class ModernClassContextConsumerWithUpdates extends Component<any> {
+  render() {
+    return (
+      <StringContextWithUpdates.Consumer>
+        {({string, setString}) => (
+          <>
+            {formatContextForDisplay(
+              'ModernClassContextConsumerWithUpdates',
+              string,
+            )}
+            <input value={string} onChange={e => setString(e.target.value)} />
+          </>
+        )}
+      </StringContextWithUpdates.Consumer>
+    );
+  }
+}
+
 export default function Contexts() {
   return (
     <div>
@@ -113,6 +245,7 @@ export default function Contexts() {
         <LegacyContextProvider>
           <LegacyContextConsumer />
         </LegacyContextProvider>
+        <LegacyContextProviderWithUpdates />
         <ModernContext.Provider value={contextData}>
           <ModernContext.Consumer>
             {value => formatContextForDisplay('ModernContext.Consumer', value)}
@@ -120,6 +253,8 @@ export default function Contexts() {
           <ModernContextType />
         </ModernContext.Provider>
         <FunctionalContextConsumer />
+        <FunctionalContextProviderWithContextUpdates />
+        <ModernClassContextProviderWithUpdates />
         <ArrayContext.Consumer>
           {value => formatContextForDisplay('ArrayContext.Consumer', value)}
         </ArrayContext.Consumer>

From e9b2028b3280c15138bd92b0d27ffa066de3d5ca Mon Sep 17 00:00:00 2001
From: Sota <5866096+sota000@users.noreply.github.com>
Date: Tue, 10 Aug 2021 13:14:11 -0700
Subject: [PATCH 0753/1603] Show a soft error when a text string or number is
 supplied as a child to non text wrappers (#21953)

* Show soft errors when a text string or number is supplied as a child instead of throwing an error

* bring __DEV__ check first so that things inside get removed in prod.

* fix lint
---
 .../src/ReactFabricHostConfig.js                      | 11 +++++------
 .../src/ReactNativeHostConfig.js                      | 10 +++++-----
 .../src/__tests__/ReactFabric-test.internal.js        |  6 +++---
 .../src/__tests__/ReactNativeMount-test.internal.js   | 10 +++++-----
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 8ca9401597dd..c71a9050211c 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -22,8 +22,6 @@ import type {
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
-import invariant from 'shared/invariant';
-
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
 import {
@@ -264,10 +262,11 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  invariant(
-    hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
-  );
+  if (__DEV__) {
+    if (!hostContext.isInAParentText) {
+      console.error('Text strings must be rendered within a <Text> component.');
+    }
+  }
 
   const tag = nextReactTag;
   nextReactTag += 2;
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 205f8189b7a7..63337a04df1a 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -147,11 +147,11 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  invariant(
-    hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
-  );
-
+  if (__DEV__) {
+    if (!hostContext.isInAParentText) {
+      console.error('Text strings must be rendered within a <Text> component.');
+    }
+  }
   const tag = allocateTag();
 
   UIManager.createView(
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index c7e4e3dee1b5..9f2851382af4 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -524,7 +524,7 @@ describe('ReactFabric', () => {
     });
   });
 
-  it('should throw for text not inside of a <Text> ancestor', () => {
+  it('should console error for text not inside of a <Text> ancestor', () => {
     const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTScrollView',
@@ -542,7 +542,7 @@ describe('ReactFabric', () => {
       act(() => {
         ReactFabric.render(<View>this should warn</View>, 11);
       });
-    }).toThrow('Text strings must be rendered within a <Text> component.');
+    }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
 
     expect(() => {
       act(() => {
@@ -553,7 +553,7 @@ describe('ReactFabric', () => {
           11,
         );
       });
-    }).toThrow('Text strings must be rendered within a <Text> component.');
+    }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
index 9026bef79376..4d1ffce09fe3 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -473,7 +473,7 @@ describe('ReactNative', () => {
     );
   });
 
-  it('should throw for text not inside of a <Text> ancestor', () => {
+  it('should console error for text not inside of a <Text> ancestor', () => {
     const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTScrollView',
@@ -487,9 +487,9 @@ describe('ReactNative', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
-      'Text strings must be rendered within a <Text> component.',
-    );
+    expect(() =>
+      ReactNative.render(<View>this should warn</View>, 11),
+    ).toErrorDev(['Text strings must be rendered within a <Text> component.']);
 
     expect(() =>
       ReactNative.render(
@@ -498,7 +498,7 @@ describe('ReactNative', () => {
         </Text>,
         11,
       ),
-    ).toThrow('Text strings must be rendered within a <Text> component.');
+    ).toErrorDev(['Text strings must be rendered within a <Text> component.']);
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {

From 88d121899aca8fec537003360010f077f0880541 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 11 Aug 2021 10:46:19 -0400
Subject: [PATCH 0754/1603] [DevTools] Support extended source maps with named
 hooks information (#22010)

## Summary

Adds support for statically extracting names for hook calls from source code, and extending source maps with that information so that DevTools does not have to directly parse source code at runtime, which will speed up the Named Hooks feature and allow it to be enabled by default.

Specifically, this PR includes the following parts:

- [x] Adding logic to statically extract relevant hook names from the parsed source code (i.e. the babel ast). Note that this logic differs slightly from the existing logic in that the existing logic also uses runtime information from DevTools (such as whether given hooks are a custom hook) to extract names for hooks, whereas this code is meant to run entirely at build time, so it does not rely on that information.
- [x] Generating an encoded "hook map", which encodes the information about a hooks *original* source location, and it's corresponding name. This "hook map" will be used to generate extended source maps, included tentatively under an extra `x_react_hook_map` field. The map itself is formatted and encoded in a very similar way as how the `names` and `mappings` fields of a standard source map are encoded ( = Base64 VLQ delta coding representing offsets into a string array), and how the "function map" in Metro is encoded, as suggested in #21782. Note that this initial version uses a very basic format, and we are not implementing our own custom encoding, but reusing the `encode` function from `sourcemap-codec`.
- [x] Updating the logic in `parseHookNames` to check if the source maps have been extended with the hook map information, and if so use that information to extract the hook names without loading the original source code. In this PR we are manually generating extended source maps in our tests in order to test that this functionality works as expected, even though we are not actually generating the extended source maps in production.

The second stage of this work, which will likely need to occur outside this repo, is to update bundlers such as Metro to use these new primitives to actually generate source maps that DevTools can use.

### Follow-ups

- Enable named hooks by default when extended source maps are present
- Support looking up hook names when column numbers are not present in source map.
- Measure performance improvement of using extended source maps (manual testing suggests ~4 to 5x faster)
- Update relevant bundlers to generate extended source maps.

## Test Plan

- yarn flow
- Tests still pass
  - yarn test
  - yarn test-build-devtools
- Named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, facebook).
- For new functionality:
  - New tests for statically extracting hook names.
  - New tests for using extended source maps to look up hook names at runtime.
---
 .../react-devtools-extensions/package.json    |   4 +-
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../ComponentWithCustomHook.js                |  41 +++
 .../ComponentWithCustomHook.js.map            |   1 +
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../ComponentWithMultipleHooksPerLine.js.map  |   1 +
 .../ComponentWithNestedHooks.js               |  28 ++
 .../ComponentWithNestedHooks.js.map           |   1 +
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../external/fb-sources-extended/Example.js   |  28 ++
 .../fb-sources-extended/Example.js.map        |   1 +
 .../fb-sources-extended/InlineRequire.js      |  21 ++
 .../fb-sources-extended/InlineRequire.js.map  |   1 +
 .../external/fb-sources-extended/ToDoList.js  | 106 +++++++
 .../fb-sources-extended/ToDoList.js.map       |   1 +
 .../external/fb-sources-extended/index.js     |  89 ++++++
 .../external/fb-sources-extended/index.js.map |   1 +
 .../external/fb-sources-extended/useTheme.js  |  27 ++
 .../fb-sources-extended/useTheme.js.map       |   1 +
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../ComponentWithCustomHook.js                |  41 +++
 .../ComponentWithCustomHook.js.map            |   1 +
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../ComponentWithMultipleHooksPerLine.js.map  |   1 +
 .../ComponentWithNestedHooks.js               |  28 ++
 .../ComponentWithNestedHooks.js.map           |   1 +
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../react-sources-extended/Example.js         |  28 ++
 .../react-sources-extended/Example.js.map     |   1 +
 .../react-sources-extended/InlineRequire.js   |  21 ++
 .../InlineRequire.js.map                      |   1 +
 .../react-sources-extended/ToDoList.js        | 106 +++++++
 .../react-sources-extended/ToDoList.js.map    |   1 +
 .../external/react-sources-extended/index.js  |  89 ++++++
 .../react-sources-extended/index.js.map       |   1 +
 .../react-sources-extended/useTheme.js        |  27 ++
 .../react-sources-extended/useTheme.js.map    |   1 +
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../ComponentWithCustomHook.js                |  41 +++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../ComponentWithNestedHooks.js               |  28 ++
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../inline/fb-sources-extended/Example.js     |  28 ++
 .../fb-sources-extended/InlineRequire.js      |  21 ++
 .../inline/fb-sources-extended/ToDoList.js    | 106 +++++++
 .../inline/fb-sources-extended/index.js       |  89 ++++++
 .../inline/fb-sources-extended/useTheme.js    |  27 ++
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../ComponentWithCustomHook.js                |  41 +++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../ComponentWithNestedHooks.js               |  28 ++
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../inline/react-sources-extended/Example.js  |  28 ++
 .../react-sources-extended/InlineRequire.js   |  21 ++
 .../inline/react-sources-extended/ToDoList.js | 106 +++++++
 .../inline/react-sources-extended/index.js    |  89 ++++++
 .../inline/react-sources-extended/useTheme.js |  27 ++
 .../src/__tests__/generateHookMap-test.js     | 212 +++++++++++++
 .../__tests__/getHookNameForLocation-test.js  | 264 ++++++++++++++++
 .../src/__tests__/parseHookNames-test.js      | 292 ++++++++++++++++++
 .../src/__tests__/updateMockSourceMaps.js     |  98 +++++-
 .../react-devtools-extensions/src/astUtils.js | 228 +++++++++++++-
 .../src/generateHookMap.js                    | 123 ++++++++
 .../src/getHookNameForLocation.js             | 274 ++++++++++++++++
 .../src/parseHookNames/parseHookNames.js      |  90 +++++-
 scripts/flow/config/flowconfig                |   1 +
 yarn.lock                                     |  70 ++++-
 77 files changed, 3525 insertions(+), 33 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js
 create mode 100644 packages/react-devtools-extensions/src/generateHookMap.js
 create mode 100644 packages/react-devtools-extensions/src/getHookNameForLocation.js

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 1b85e113cbf4..35334517cf7d 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -17,10 +17,12 @@
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",
     "improve-images": "node ./improveImages.mjs",
-    "update-mock-source-maps": "node ./src/__tests__/updateMockSourceMaps.js"
+    "update-mock-source-maps": "babel-node --presets=@babel/preset-env,@babel/preset-flow ./src/__tests__/updateMockSourceMaps.js"
   },
   "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",
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..6925712d17c7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 000000000000..f8e72b2f1262
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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_fb_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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..e326d7a4962d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
new file mode 100644
index 000000000000..1e55e029876c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_fb_sources":[[null,{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..05aedb938b71
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 000000000000..b09f62f6e0ba
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..c657f3eb5455
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 000000000000..96ff387bccc6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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_fb_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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..3cfed69078a8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
new file mode 100644
index 000000000000..d894f112fe2a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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_fb_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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..0fc2c078ca12
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 000000000000..bed33eccdea3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
new file mode 100644
index 000000000000..19134738824b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
new file mode 100644
index 000000000000..799ee59c1d70
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
new file mode 100644
index 000000000000..388aeda62b30
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
new file mode 100644
index 000000000000..635462c6c117
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
new file mode 100644
index 000000000000..a6eb863b661f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
new file mode 100644
index 000000000000..b06880d9253c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
new file mode 100644
index 000000000000..a0f706b19fba
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
new file mode 100644
index 000000000000..ed73e714bec4
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
new file mode 100644
index 000000000000..95bb454253ec
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
new file mode 100644
index 000000000000..e5129095bfcd
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..6925712d17c7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 000000000000..0740333a06d7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..e326d7a4962d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
new file mode 100644
index 000000000000..53b09d9ef25b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_react_sources":[[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..05aedb938b71
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 000000000000..5c01a8334dbc
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..c657f3eb5455
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 000000000000..f6a743e1cebf
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..3cfed69078a8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
new file mode 100644
index 000000000000..b633971efcc7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..0fc2c078ca12
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 000000000000..fdca45ffcf12
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
new file mode 100644
index 000000000000..19134738824b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
new file mode 100644
index 000000000000..614e8ec7bc7e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
new file mode 100644
index 000000000000..388aeda62b30
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
new file mode 100644
index 000000000000..f4b2ac45fff3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
new file mode 100644
index 000000000000..a6eb863b661f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
new file mode 100644
index 000000000000..5499d109beec
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
new file mode 100644
index 000000000000..a0f706b19fba
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
new file mode 100644
index 000000000000..fe3a9c29b752
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
new file mode 100644
index 000000000000..95bb454253ec
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
new file mode 100644
index 000000000000..bc7ae9fddd8a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..ee19fdf9ba3d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImRhcmtNb2RlIiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YXFCQ0EsQVdEQTtpQmJFQSxBZUZBO29DVkdBLEFlSEEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..ac7f10f99e8b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJpc0RhcmtNb2RlIl0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBO2NsQkVBLEFlRkE7Z0NiRUEsQWVGQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..a88a83c4078f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJ0aGVtZSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y2dCQ0EsQVVEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..747e2ccd42b7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X2ZiX3NvdXJjZXMiOltbbnVsbCx7Im5hbWVzIjpbIjxuby1ob29rPiIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiJDQUFEO2dCWUNBLEFhREE7aUJiRUEsQWFGQTtvQmJHQSxBYUhBLEFNSUEsQWFKQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..c7736181d435
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiSW5uZXJDb21wb25lbnQiLCJzdGF0ZSJdLCJtYXBwaW5ncyI6IkNBQUQ7WXlCQ0E7YUxDQSxBV0RBO2dCM0JEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..d5520ecc3230
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7ZTRCQ0EsQVdEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
new file mode 100644
index 000000000000..583fd413e41f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZiX3NvdXJjZXMiOltbbnVsbCx7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50Il0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
new file mode 100644
index 000000000000..e95e996016dd
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+Il0sIm1hcHBpbmdzIjoiQ0FBRCJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
new file mode 100644
index 000000000000..35f3c827f402
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwibmV3SXRlbVRleHQiLCJpdGVtcyIsInVpZCIsImhhbmRsZUNsaWNrIiwiaGFuZGxlS2V5UHJlc3MiLCJoYW5kbGVDaGFuZ2UiLCJyZW1vdmVJdGVtIiwidG9nZ2xlSXRlbSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y3VCQ0E7Z0JDREE7a0JERUE7b0JDRkE7c0NnQkdBLEFZSEE7dUN4QklBOzJDeEJKQTs0Q29CS0EsQVdMQTs4Q2JNQTsyRFNOQTs2RE5PQTtvRXRCUEE7c0VvQlFBOzJFcEJSQTs2RWtCU0E7Z0ZsQlRBO2tGa0JVQTttR2xCVkEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
new file mode 100644
index 000000000000..671a6e4bfdf8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+Il0sIm1hcHBpbmdzIjoiQ0FBRCJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
new file mode 100644
index 000000000000..16d4789500b8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2VnQkNBLEF3QkRBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..f4d3572ad694
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..d9aea69a221d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..7e525c715238
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..c79712b13704
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..d9394fd366ea
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..6e446dd87e94
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
new file mode 100644
index 000000000000..40e7fbf0b428
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js
new file mode 100644
index 000000000000..a215395840d7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
new file mode 100644
index 000000000000..0c7a15e919ec
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
new file mode 100644
index 000000000000..d0e793c8f72b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js
new file mode 100644
index 000000000000..44d321d6a6b1
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/generateHookMap-test.js b/packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js
new file mode 100644
index 000000000000..88393b0f1db2
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js
@@ -0,0 +1,212 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {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(`
+    Object {
+      "mappings": "CAAD;KYCA,AgBDA;MREA,AWFA;SnBGA,AaHA,AMIA,AaJA;WpBKA,AiCLA;Y7CMA,AYNA",
+      "names": Array [
+        "<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(`
+    Object {
+      "mappings": "CAAD;MgBCA,AUDA;OFEA,AUFA",
+      "names": Array [
+        "<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(`
+    Object {
+      "mappings": "CAAD;KyBCA;MKCA,AWDA;SrCDA",
+      "names": Array [
+        "<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(`
+    Object {
+      "mappings": "CAAD;MwBCA,AWDA",
+      "names": Array [
+        "<no-hook>",
+        "val",
+      ],
+    }
+  `);
+  });
+});
diff --git a/packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js b/packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js
new file mode 100644
index 000000000000..7b215fc6de78
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js
@@ -0,0 +1,264 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {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-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 110eee269205..52032b372310 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -421,6 +421,298 @@ describe('parseHookNames', () => {
       ); // simulated Webpack 'cheap-module-source-map'
     });
   });
+
+  describe('extended source maps', () => {
+    let parseMock;
+
+    beforeEach(() => {
+      parseMock = jest.fn();
+      jest.mock('@babel/parser', () => {
+        const actual = jest.requireActual('@babel/parser');
+        const parse = (...args) => {
+          parseMock();
+          return actual.parse(...args);
+        };
+        return {
+          parse,
+          ...actual,
+        };
+      });
+    });
+
+    it('should work for simple components', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/Example'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/Example',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/Example',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/Example',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/Example',
+      ); // x_react_sources extended external 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 test(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(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/ToDoList'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ToDoList',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ToDoList',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ToDoList',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ToDoList',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work for custom hook', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'isDarkMode', // useIsDarkMode()
+          'isDarkMode', // useIsDarkMode -> useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/ComponentWithCustomHook'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook',
+      ); // x_react_sources extended external 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 test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+          'darkMode', // useDarkMode()
+          'isDarkMode', // useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended external 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 test(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(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+
+    it('should work for external hooks', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'theme', // useTheme()
+          'theme', // useContext()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      // 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 test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended external 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 test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'a', // useContext()
+          'b', // useContext()
+          'c', // useContext()
+          'd', // useContext()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended external 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).
+    xit('should work for inline requires', async () => {
+      async function test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      await test('./__source__/InlineRequire'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/InlineRequire',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/InlineRequire',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/InlineRequire',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/InlineRequire',
+      ); // x_react_sources extended external 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 test(path, name = 'Component') {
+        const Component = require(path)[name];
+        const hookNames = await getHookNamesForComponent(Component);
+        expectHookNamesToEqual(hookNames, [
+          'count', // useState()
+        ]);
+        expect(parseMock).toHaveBeenCalledTimes(0);
+      }
+
+      // We expect the inline sourceMappingURL to be invalid in this case; mute the warning.
+      console.warn = () => {};
+
+      await test('./__source__/ContainingStringSourceMappingURL'); // original source (uncompiled)
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_fb_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_fb_sources extended external source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended inline source map
+      await test(
+        './__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended external source map
+      // TODO test no-columns and bundle cases with extended source maps
+    });
+  });
 });
 
 describe('parseHookNames worker', () => {
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
index 6906abf52c92..6e8b8bdff596 100644
--- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -15,6 +15,8 @@ const commonjs = require('rollup-plugin-commonjs');
 const jsx = require('acorn-jsx');
 const rollupResolve = require('rollup-plugin-node-resolve');
 const {encode, decode} = require('sourcemap-codec');
+const {generateEncodedHookMap} = require('../generateHookMap');
+const {parse} = require('@babel/parser');
 
 const sourceDir = resolve(__dirname, '__source__');
 const buildRoot = resolve(sourceDir, '__compiled__');
@@ -22,6 +24,19 @@ const externalDir = resolve(buildRoot, 'external');
 const inlineDir = resolve(buildRoot, 'inline');
 const bundleDir = resolve(buildRoot, 'bundle');
 const noColumnsDir = resolve(buildRoot, 'no-columns');
+const inlineFbSourcesExtendedDir = resolve(inlineDir, 'fb-sources-extended');
+const externalFbSourcesExtendedDir = resolve(
+  externalDir,
+  'fb-sources-extended',
+);
+const inlineReactSourcesExtendedDir = resolve(
+  inlineDir,
+  'react-sources-extended',
+);
+const externalReactSourcesExtendedDir = resolve(
+  externalDir,
+  'react-sources-extended',
+);
 
 // Remove previous builds
 emptyDirSync(buildRoot);
@@ -29,6 +44,10 @@ mkdirSync(externalDir);
 mkdirSync(inlineDir);
 mkdirSync(bundleDir);
 mkdirSync(noColumnsDir);
+mkdirSync(inlineFbSourcesExtendedDir);
+mkdirSync(externalFbSourcesExtendedDir);
+mkdirSync(inlineReactSourcesExtendedDir);
+mkdirSync(externalReactSourcesExtendedDir);
 
 function compile(fileName) {
   const code = readFileSync(resolve(sourceDir, fileName), 'utf8');
@@ -63,6 +82,15 @@ function compile(fileName) {
     '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.
@@ -82,16 +110,7 @@ function compile(fileName) {
   );
   const encodedMappings = encode(decodedMappings);
 
-  // Generate compiled output with external inline base64 source maps
-  writeFileSync(
-    resolve(inlineDir, fileName),
-    transformed.code +
-      '\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,' +
-      btoa(JSON.stringify(sourceMap)),
-    'utf8',
-  );
-
-  // Generate compiled output with external inline base64 source maps without column numbers
+  // Generate compiled output with inline base64 source maps without column numbers
   writeFileSync(
     resolve(noColumnsDir, fileName),
     transformed.code +
@@ -104,6 +123,65 @@ function compile(fileName) {
       ),
     '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_fb_sources extension field, the first item
+    // for a given source is reserved for the Function Map, and the
+    // Hook Map is added as the second item.
+    x_fb_sources: [[null, encodedHookMap]],
+  };
+  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]],
+  };
+
+  // Using the x_fb_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`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesExtendedDir, `${fileName}.map`),
+    JSON.stringify(fbSourcesExtendedSourceMap),
+    '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`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesExtendedDir, `${fileName}.map`),
+    JSON.stringify(reactSourcesExtendedSourceMap),
+    'utf8',
+  );
 }
 
 async function bundle() {
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 64aaf1fb0371..818ec578a87c 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -12,6 +12,11 @@ import {File} from '@babel/types';
 
 import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
 
+export type Position = {|
+  line: number,
+  column: number,
+|};
+
 export type SourceConsumer = any;
 
 export type SourceFileASTWithHookDetails = {
@@ -20,12 +25,16 @@ export type SourceFileASTWithHookDetails = {
   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
@@ -51,7 +60,6 @@ function checkNodeLocation(
     //
     // 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)
@@ -284,13 +292,209 @@ function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
   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 = [];
+  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 declartions 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 assinging 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 node = path.node.init;
-  if (node.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
+  const nodeInit = path.node.init;
+  if (nodeInit == null || nodeInit.type !== AST_NODE_TYPES.CALL_EXPRESSION) {
     return false;
   }
-  const callee = node.callee;
+  const callee = nodeInit.callee;
   return isHook(callee);
 }
 
@@ -370,10 +574,12 @@ function isReactFunction(node: Node, functionName: string): boolean {
 }
 
 // Check if 'path' is either State or Reducer hook
-function isStateOrReducerHook(path: NodePath): boolean {
+function isBuiltInHookThatReturnsTuple(path: NodePath): boolean {
   const callee = path.node.init.callee;
   return (
-    isReactFunction(callee, 'useState') || isReactFunction(callee, 'useReducer')
+    isReactFunction(callee, 'useState') ||
+    isReactFunction(callee, 'useReducer') ||
+    isReactFunction(callee, 'useTransition')
   );
 }
 
@@ -394,9 +600,17 @@ function nodeContainsHookVariableName(hookNode: NodePath): boolean {
   const node = hookNode.node.id;
   if (
     node.type === AST_NODE_TYPES.ARRAY_PATTERN ||
-    (node.type === AST_NODE_TYPES.IDENTIFIER && !isStateOrReducerHook(hookNode))
+    (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-extensions/src/generateHookMap.js b/packages/react-devtools-extensions/src/generateHookMap.js
new file mode 100644
index 000000000000..d57bbb606385
--- /dev/null
+++ b/packages/react-devtools-extensions/src/generateHookMap.js
@@ -0,0 +1,123 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {getHookNamesMappingFromAST} from './astUtils';
+import {encode, decode} from 'sourcemap-codec';
+import {File} from '@babel/types';
+
+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 = [];
+
+  let currentLine = 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-extensions/src/getHookNameForLocation.js b/packages/react-devtools-extensions/src/getHookNameForLocation.js
new file mode 100644
index 000000000000..c65c5fb5a802
--- /dev/null
+++ b/packages/react-devtools-extensions/src/getHookNameForLocation.js
@@ -0,0 +1,274 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-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-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 8bae59ce461b..78e0b7ef66f2 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -14,7 +14,10 @@ import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
+import {decodeHookMap} from '../generateHookMap';
+import {getHookNameForLocation} from '../getHookNameForLocation';
 
+import type {HookMap} from '../generateHookMap';
 import type {
   HooksNode,
   HookSource,
@@ -26,10 +29,15 @@ import type {SourceConsumer} from '../astUtils';
 
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const MAX_SOURCE_LENGTH = 100_000_000;
+const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
+const FB_SOURCES_EXTENSION_KEY = 'x_fb_sources';
 
 type AST = mixed;
 
 type HookSourceData = {|
+  // Hook map extracted from extended source map
+  hookMap: HookMap | null,
+
   // Generated by react-debug-tools.
   hookSource: HookSource,
 
@@ -128,6 +136,7 @@ export async function parseHookNames(
       const runtimeSourceURL = ((hookSource.fileName: any): string);
 
       const hookSourceData: HookSourceData = {
+        hookMap: null,
         hookSource,
         originalSourceAST: null,
         originalSourceCode: null,
@@ -244,12 +253,16 @@ function extractAndLoadSourceMaps(
 
           // 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"
-          const match = parsed.sources.find(
+          const sourceIndex = parsed.sources.findIndex(
             source =>
               source === 'Inline Babel script' ||
               runtimeSourceURL.endsWith(source),
           );
-          if (match) {
+          if (sourceIndex !== -1) {
+            const hookMap = extractHookMapFromSourceMap(parsed, sourceIndex);
+            if (hookMap != null) {
+              hookSourceData.hookMap = hookMap;
+            }
             setPromises.push(
               new SourceMapConsumer(parsed).then(sourceConsumer => {
                 hookSourceData.sourceConsumer = sourceConsumer;
@@ -288,9 +301,22 @@ function extractAndLoadSourceMaps(
           const fetchPromise =
             fetchPromises.get(url) ||
             fetchFile(url).then(
-              sourceMapContents =>
-                new SourceMapConsumer(JSON.parse(sourceMapContents)),
-
+              sourceMapContents => {
+                const parsed = JSON.parse(sourceMapContents);
+                const sourceIndex = parsed.sources.findIndex(source =>
+                  runtimeSourceURL.endsWith(source),
+                );
+                if (sourceIndex !== -1) {
+                  const hookMap = extractHookMapFromSourceMap(
+                    parsed,
+                    sourceIndex,
+                  );
+                  if (hookMap != null) {
+                    hookSourceData.hookMap = hookMap;
+                  }
+                }
+                return new SourceMapConsumer(parsed);
+              },
               // 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".
@@ -414,13 +440,24 @@ function findHookNames(
       return null;
     }
 
-    const name = getHookName(
-      hook,
-      hookSourceData.originalSourceAST,
-      ((hookSourceData.originalSourceCode: any): string),
-      ((originalSourceLineNumber: any): number),
-      originalSourceColumnNumber,
-    );
+    let name;
+    if (hookSourceData.hookMap != null) {
+      name = getHookNameForLocation(
+        {
+          line: originalSourceLineNumber,
+          column: originalSourceColumnNumber,
+        },
+        hookSourceData.hookMap,
+      );
+    } else {
+      name = getHookName(
+        hook,
+        hookSourceData.originalSourceAST,
+        ((hookSourceData.originalSourceCode: any): string),
+        ((originalSourceLineNumber: any): number),
+        originalSourceColumnNumber,
+      );
+    }
 
     if (__DEBUG__) {
       console.log(`findHookNames() Found name "${name || '-'}"`);
@@ -475,6 +512,12 @@ async function parseSourceAST(
       // Use cached metadata.
       return;
     }
+    if (hookSourceData.hookMap != null) {
+      // 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;
+    }
 
     const {sourceConsumer} = hookSourceData;
     const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
@@ -618,6 +661,29 @@ function updateLruCache(
   return Promise.resolve();
 }
 
+function extractHookMapFromSourceMap(
+  sourcemap,
+  sourceIndex: number,
+): HookMap | null {
+  let hookMap;
+  if (sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY)) {
+    // When using the x_react_sources extension field, the first item
+    // for a given source is reserved for the Hook Map, which is why
+    // we look up the index at position 0.
+    hookMap = sourcemap[REACT_SOURCES_EXTENSION_KEY][sourceIndex][0];
+  } else if (sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY)) {
+    // When using the x_fb_sources extension field, the first item
+    // for a given source is reserved for the Function Map, and the
+    // Hook Map is added as the second item, which is why we look up
+    // the index at position 1.
+    hookMap = sourcemap[FB_SOURCES_EXTENSION_KEY][sourceIndex][1];
+  }
+  if (hookMap != null) {
+    return decodeHookMap(hookMap);
+  }
+  return null;
+}
+
 export function purgeCachedMetadata(): void {
   originalURLToMetadataCache.reset();
   runtimeURLToMetadataCache.reset();
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 2ace94c2d7cb..453c8406d061 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -43,6 +43,7 @@ untyped-type-import=error
 server.max_workers=4
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
+esproposal.optional_chaining=enable
 
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%
diff --git a/yarn.lock b/yarn.lock
index fbb9f335e6a3..a5134686016b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -546,6 +546,18 @@
     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.1.0", "@babel/parser@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.3.tgz#790874091d2001c9be6ec426c2eed47bc7679081"
@@ -561,6 +573,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0"
   integrity sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==
 
+"@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.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
@@ -1420,6 +1437,17 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
+"@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-corejs2@^7.2.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs2/-/runtime-corejs2-7.8.3.tgz#b62a61e0c41a90d2d91181fda6de21cecd3a9734"
@@ -4701,6 +4729,15 @@ clone-buffer@^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"
@@ -5066,6 +5103,11 @@ core-js@^2.4.1, core-js@^2.6.5:
   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.5:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
@@ -11210,6 +11252,14 @@ node-cleanup@^2.1.2:
   resolved "https://registry.yarnpkg.com/node-cleanup/-/node-cleanup-2.1.2.tgz#7ac19abd297e09a7f72a71545d951b517e4dde2c"
   integrity sha1-esGavSl+Caf3KnFUXZUbUX5N3iw=
 
+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.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
@@ -12353,7 +12403,7 @@ pinpoint@^1.1.0:
   resolved "https://registry.yarnpkg.com/pinpoint/-/pinpoint-1.1.0.tgz#0cf7757a6977f1bf7f6a32207b709e377388e874"
   integrity sha1-DPd1eml38b9/ajIge3CeN3OI6HQ=
 
-pirates@^4.0.1:
+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==
@@ -13830,7 +13880,7 @@ semver-truncate@^1.1.2:
   dependencies:
     semver "^5.3.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0:
+"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -13957,6 +14007,13 @@ sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
     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"
@@ -14193,7 +14250,7 @@ source-map-support@0.5.16:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@0.5.19, source-map-support@^0.5.17, source-map-support@~0.5.12:
+source-map-support@0.5.19, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.12:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -15690,6 +15747,13 @@ v8-to-istanbul@^7.0.0:
     convert-source-map "^1.6.0"
     source-map "^0.7.3"
 
+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"

From 280e3f936f89583b44e10f29ed0ed0155b50ab8a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 11 Aug 2021 14:19:45 -0400
Subject: [PATCH 0755/1603] DevTools: Scheduling profiler: Add vertical scroll
 bar (#22005)

Co-authored-by: E-Liang Tan <eliang@eliangtan.com>
---
 .../src/CanvasPage.js                         |  31 ++-
 .../src/import-worker/preprocessData.js       |   6 +-
 .../view-base/VerticalScrollOverflowView.js   |   3 -
 .../src/view-base/VerticalScrollView.js       |  76 ++++--
 .../src/view-base/View.js                     |  54 ++++-
 .../src/view-base/index.js                    |   3 +-
 .../src/view-base/layouter.js                 |  44 ----
 .../{ => resizable}/ResizableView.js          | 218 +++--------------
 .../src/view-base/resizable/ResizeBarView.js  | 193 +++++++++++++++
 .../src/view-base/resizable/index.js          |  11 +
 .../VerticalScrollBarView.js                  | 219 ++++++++++++++++++
 .../VerticalScrollOverflowView.js             |  91 ++++++++
 .../vertical-scroll-overflow/index.js         |  11 +
 .../withVerticalScrollbarLayout.js            |  55 +++++
 14 files changed, 731 insertions(+), 284 deletions(-)
 delete mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js
 rename packages/react-devtools-scheduling-profiler/src/view-base/{ => resizable}/ResizableView.js (56%)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/resizable/index.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 59939cd94869..2681eb7c876c 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -30,14 +30,12 @@ import {copy} from 'clipboard-js';
 import prettyMilliseconds from 'pretty-ms';
 
 import {
-  BackgroundColorView,
   HorizontalPanAndZoomView,
   ResizableView,
+  VerticalScrollOverflowView,
   Surface,
   VerticalScrollView,
   View,
-  createComposedLayout,
-  lastViewTakesUpRemainingSpaceLayout,
   useCanvasInteraction,
   verticallyStackedLayout,
   zeroPoint,
@@ -325,10 +323,9 @@ function AutoSizedCanvas({
     const rootView = new View(
       surface,
       defaultFrame,
-      createComposedLayout(
-        verticallyStackedLayout,
-        lastViewTakesUpRemainingSpaceLayout,
-      ),
+      verticallyStackedLayout,
+      defaultFrame,
+      COLORS.BACKGROUND,
     );
     rootView.addSubview(axisMarkersViewWrapper);
     if (userTimingMarksViewWrapper !== null) {
@@ -345,10 +342,14 @@ function AutoSizedCanvas({
     }
     rootView.addSubview(flamechartViewWrapper);
 
-    // If subviews are less than the available height, fill remaining height with a solid color.
-    rootView.addSubview(new BackgroundColorView(surface, defaultFrame));
+    const verticalScrollOverflowView = new VerticalScrollOverflowView(
+      surface,
+      defaultFrame,
+      rootView,
+      viewState,
+    );
 
-    surfaceRef.current.rootView = rootView;
+    surfaceRef.current.rootView = verticalScrollOverflowView;
   }, [data]);
 
   useLayoutEffect(() => {
@@ -401,6 +402,16 @@ function AutoSizedCanvas({
     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
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 5adb7f89b770..a356ad96885e 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -241,9 +241,11 @@ function processTimelineEvent(
 
         // Reduce noise from events like DOMActivate, load/unload, etc. which are usually not relevant
         if (
-          type.startsWith('blur') ||
-          type.startsWith('click') ||
+          type === 'blur' ||
+          type === 'click' ||
+          type === 'input' ||
           type.startsWith('focus') ||
+          type.startsWith('key') ||
           type.startsWith('mouse') ||
           type.startsWith('pointer')
         ) {
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js
deleted file mode 100644
index 7ddf6c184269..000000000000
--- a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollOverflowView.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// TODO Vertically stack views (via verticallyStackedLayout).
-// If stacked views are taller than the available height, a vertical scrollbar will be shown on the side,
-// and width will be adjusted to subtract the width of the scrollbar.
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
index 3f2f77591216..a78e88425faa 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
@@ -34,10 +34,16 @@ 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;
 
@@ -53,6 +59,7 @@ export class VerticalScrollView extends View {
     this._contentView = contentView;
     this._isPanning = false;
     this._mutableViewStateKey = label + ':VerticalScrollView';
+    this._onChangeCallback = null;
     this._scrollState = {
       offset: 0,
       length: 0,
@@ -146,26 +153,45 @@ export class VerticalScrollView extends View {
     super.layoutSubviews();
   }
 
-  handleInteraction(interaction: Interaction) {
+  handleInteraction(interaction: Interaction): ?boolean {
     switch (interaction.type) {
       case 'mousedown':
-        this._handleMouseDown(interaction);
-        break;
+        return this._handleMouseDown(interaction);
       case 'mousemove':
-        this._handleMouseMove(interaction);
-        break;
+        return this._handleMouseMove(interaction);
       case 'mouseup':
-        this._handleMouseUp(interaction);
-        break;
+        return this._handleMouseUp(interaction);
       case 'wheel-shift':
-        this._handleWheelShift(interaction);
-        break;
+        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)) {
-      this._isPanning = true;
+      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;
+      }
     }
   }
 
@@ -179,6 +205,7 @@ export class VerticalScrollView extends View {
       containerLength: this.frame.size.height,
     });
     this._setScrollState(newState);
+    return true;
   }
 
   _handleMouseUp(interaction: MouseUpInteraction) {
@@ -187,31 +214,27 @@ export class VerticalScrollView extends View {
     }
   }
 
-  _handleWheelShift(interaction: WheelWithShiftInteraction) {
+  _handleWheelShift(interaction: WheelWithShiftInteraction): boolean {
     const {
       location,
       delta: {deltaX, deltaY},
     } = interaction.payload;
+
     if (!rectContainsPoint(location, this.frame)) {
-      return; // Not scrolling on view
+      return false; // Not scrolling on view
     }
 
     const absDeltaX = Math.abs(deltaX);
     const absDeltaY = Math.abs(deltaY);
     if (absDeltaX > absDeltaY) {
-      return; // Scrolling horizontally
+      return false; // Scrolling horizontally
     }
 
     if (absDeltaY < MOVE_WHEEL_DELTA_THRESHOLD) {
-      return;
+      return false; // Movement was too small and should be ignored.
     }
 
-    const newState = translateState({
-      state: this._scrollState,
-      delta: -deltaY,
-      containerLength: this.frame.size.height,
-    });
-    this._setScrollState(newState);
+    return this.scrollBy(deltaY);
   }
 
   _restoreMutableViewState() {
@@ -231,10 +254,7 @@ export class VerticalScrollView extends View {
     this.setNeedsDisplay();
   }
 
-  /**
-   * @private
-   */
-  _setScrollState(proposedState: ScrollState) {
+  _setScrollState(proposedState: ScrollState): boolean {
     const height = this._contentView.frame.size.height;
     const clampedState = clampState({
       state: proposedState,
@@ -247,6 +267,14 @@ export class VerticalScrollView extends View {
       this._scrollState.length = clampedState.length;
 
       this.setNeedsDisplay();
+
+      if (this._onChangeCallback !== null) {
+        this._onChangeCallback(clampedState, this.frame.size.height);
+      }
+
+      return true;
     }
+
+    return false;
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
index 206721cdd39c..b78af9d1e24a 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
@@ -29,6 +29,8 @@ import {noopLayout, viewsToLayout, collapseLayoutIntoViews} from './layouter';
  * subclasses.
  */
 export class View {
+  _backgroundColor: string | null;
+
   currentCursor: string | null = null;
 
   surface: Surface;
@@ -70,7 +72,9 @@ export class View {
     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;
@@ -246,6 +250,20 @@ export class View {
         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,
+        );
+      }
+    }
   }
 
   /**
@@ -255,7 +273,7 @@ export class View {
    *
    * NOTE: Do not call directly! Use `handleInteractionAndPropagateToSubviews`
    */
-  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {}
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs): ?boolean {}
 
   /**
    * Handle an `interaction` and propagates it to all of this view's
@@ -270,19 +288,39 @@ export class View {
   handleInteractionAndPropagateToSubviews(
     interaction: Interaction,
     viewRefs: ViewRefs,
-  ) {
+  ): boolean {
     const {subviews, visibleArea} = this;
 
     if (visibleArea.size.height === 0) {
-      return;
+      return false;
     }
 
-    this.handleInteraction(interaction, viewRefs);
-
-    subviews.forEach(subview => {
+    // 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)) {
-        subview.handleInteractionAndPropagateToSubviews(interaction, viewRefs);
+        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-scheduling-profiler/src/view-base/index.js b/packages/react-devtools-scheduling-profiler/src/view-base/index.js
index b5455ce249f3..3abaf63e21b2 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/index.js
@@ -9,10 +9,11 @@
 
 export * from './BackgroundColorView';
 export * from './HorizontalPanAndZoomView';
-export * from './ResizableView';
 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-scheduling-profiler/src/view-base/layouter.js b/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
index 58adb026c290..8f6341270e06 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
@@ -206,50 +206,6 @@ export const atLeastContainerHeightLayout: Layouter = (
   }));
 };
 
-/**
- * Forces last view to take up the space below the second-last view.
- * Intended to be used with a vertical stack layout.
- */
-export const lastViewTakesUpRemainingSpaceLayout: Layouter = (
-  layout,
-  containerFrame,
-) => {
-  if (layout.length === 0) {
-    // Nothing to do
-    return layout;
-  }
-
-  if (layout.length === 1) {
-    // No second-last view; the view should just take up the container height
-    return containerHeightLayout(layout, containerFrame);
-  }
-
-  const layoutInfoToPassThrough = layout.slice(0, layout.length - 1);
-  const secondLastLayoutInfo =
-    layoutInfoToPassThrough[layoutInfoToPassThrough.length - 1];
-
-  const remainingHeight =
-    containerFrame.size.height -
-    secondLastLayoutInfo.frame.origin.y -
-    secondLastLayoutInfo.frame.size.height;
-  const height = Math.max(remainingHeight, 0); // Prevent negative heights
-
-  const lastLayoutInfo = layout[layout.length - 1];
-  return [
-    ...layoutInfoToPassThrough,
-    {
-      ...lastLayoutInfo,
-      frame: {
-        origin: lastLayoutInfo.frame.origin,
-        size: {
-          width: lastLayoutInfo.frame.size.width,
-          height,
-        },
-      },
-    },
-  ];
-};
-
 /**
  * Create a layouter that applies each layouter in `layouters` in sequence.
  */
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js b/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizableView.js
similarity index 56%
rename from packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
rename to packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizableView.js
index 1f0f890ce38e..b56422f715a5 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/ResizableView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizableView.js
@@ -14,20 +14,17 @@ import type {
   MouseDownInteraction,
   MouseMoveInteraction,
   MouseUpInteraction,
-} from './useCanvasInteraction';
-import type {Rect} from './geometry';
-import type {ViewRefs} from './Surface';
-import type {ViewState} from '../types';
-
-import {BORDER_SIZE, COLORS} from '../content-views/constants';
-import {drawText} from '../content-views/utils/text';
-import {Surface} from './Surface';
-import {View} from './View';
-import {intersectionOfRects, rectContainsPoint} from './geometry';
-import {noopLayout} from './layouter';
-import {clamp} from './utils/clamp';
-
-type ResizeBarState = 'normal' | 'hovered' | 'dragging';
+} 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 */
@@ -41,8 +38,6 @@ type LayoutState = {|
   barOffsetY: number,
 |};
 
-const RESIZE_BAR_DOT_RADIUS = 1;
-const RESIZE_BAR_DOT_SPACING = 4;
 const RESIZE_BAR_HEIGHT = 8;
 const RESIZE_BAR_WITH_LABEL_HEIGHT = 16;
 
@@ -51,175 +46,11 @@ const HIDDEN_RECT = {
   size: {width: 0, height: 0},
 };
 
-class ResizeBar 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() {
-    return this.showLabel
-      ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}
-      : {height: RESIZE_BAR_HEIGHT, width: 0};
-  }
-
-  draw(context: CanvasRenderingContext2D, viewRefs: ViewRefs) {
-    const {visibleArea} = this;
-    const {x, y} = visibleArea.origin;
-    const {width, height} = visibleArea.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: visibleArea.size.width,
-          height: visibleArea.size.height,
-        },
-      };
-
-      const drawableRect = intersectionOfRects(labelRect, this.visibleArea);
-
-      drawText(this._label, context, labelRect, drawableRect, {
-        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);
-        return;
-      case 'mousemove':
-        this._handleMouseMove(interaction, viewRefs);
-        return;
-      case 'mouseup':
-        this._handleMouseUp(interaction, viewRefs);
-        return;
-    }
-  }
-}
-
 export class ResizableView extends View {
   _canvasRef: {current: HTMLCanvasElement | null};
   _layoutState: LayoutState;
   _mutableViewStateKey: string;
-  _resizeBar: ResizeBar;
+  _resizeBar: ResizeBarView;
   _resizingState: ResizingState | null = null;
   _subview: View;
   _viewState: ViewState;
@@ -238,7 +69,7 @@ export class ResizableView extends View {
     this._layoutState = {barOffsetY: 0};
     this._mutableViewStateKey = label + ':ResizableView';
     this._subview = subview;
-    this._resizeBar = new ResizeBar(surface, frame, label);
+    this._resizeBar = new ResizeBarView(surface, frame, label);
     this._viewState = viewState;
 
     this.addSubview(this._subview);
@@ -379,6 +210,8 @@ export class ResizableView extends View {
         const subviewDesiredSize = this._subview.desiredSize();
         this._updateLayoutStateAndResizeBar(subviewDesiredSize.height);
         this.setNeedsDisplay();
+
+        return true;
       }
     }
   }
@@ -397,6 +230,8 @@ export class ResizableView extends View {
         // Double clicking on the expanded view should collapse.
         this._updateLayoutStateAndResizeBar(0);
         this.setNeedsDisplay();
+
+        return true;
       }
     }
   }
@@ -410,6 +245,8 @@ export class ResizableView extends View {
         cursorOffsetInBarFrame: mouseY - resizeBarFrame.origin.y,
         mouseY,
       };
+
+      return true;
     }
   }
 
@@ -421,6 +258,8 @@ export class ResizableView extends View {
         mouseY: interaction.payload.location.y,
       };
       this.setNeedsDisplay();
+
+      return true;
     }
   }
 
@@ -443,20 +282,15 @@ export class ResizableView extends View {
   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'click':
-        this._handleClick(interaction);
-        return;
+        return this._handleClick(interaction);
       case 'double-click':
-        this._handleDoubleClick(interaction);
-        return;
+        return this._handleDoubleClick(interaction);
       case 'mousedown':
-        this._handleMouseDown(interaction);
-        return;
+        return this._handleMouseDown(interaction);
       case 'mousemove':
-        this._handleMouseMove(interaction);
-        return;
+        return this._handleMouseMove(interaction);
       case 'mouseup':
-        this._handleMouseUp(interaction);
-        return;
+        return this._handleMouseUp(interaction);
     }
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js b/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js
new file mode 100644
index 000000000000..d4924edf6d31
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js
@@ -0,0 +1,193 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {
+  Interaction,
+  MouseDownInteraction,
+  MouseMoveInteraction,
+  MouseUpInteraction,
+} from '../useCanvasInteraction';
+import type {Rect} 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() {
+    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-scheduling-profiler/src/view-base/resizable/index.js b/packages/react-devtools-scheduling-profiler/src/view-base/resizable/index.js
new file mode 100644
index 000000000000..9acb4abaf97a
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/resizable/index.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './ResizableView';
+export * from './ResizeBarView';
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
new file mode 100644
index 000000000000..0195e0a7968a
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
@@ -0,0 +1,219 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Interaction} from '../useCanvasInteraction';
+import type {Rect} from '../geometry';
+import type {Surface, ViewRefs} from '../Surface';
+import type {
+  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() {
+    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-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
new file mode 100644
index 000000000000..37f96f16c244
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import 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,
+  ) => {
+    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-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js
new file mode 100644
index 000000000000..ffb8e5a9df0b
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './VerticalScrollBarView';
+export * from './VerticalScrollOverflowView';
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
new file mode 100644
index 000000000000..f17266b5d409
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {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 = {
+    ...contentLayoutInfo,
+    frame: {
+      origin: contentLayoutInfo.view.frame.origin,
+      size: {
+        width: containerFrame.size.width - scrollbarWidth,
+        height: containerFrame.size.height,
+      },
+    },
+  };
+  const laidOutScrollbarLayoutInfo = {
+    ...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];
+};

From ad150533d6b114bb5dfc51d103b2c8044ce52790 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 11 Aug 2021 14:43:25 -0400
Subject: [PATCH 0756/1603] Updated @reach packages to fix unmount bug (#22075)

---
 .../package.json                              |   4 +-
 packages/react-devtools-shared/package.json   |   4 +-
 yarn.lock                                     | 249 +++++++-----------
 3 files changed, 96 insertions(+), 161 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 55b66341bee7..dc3b97dbf859 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -14,8 +14,8 @@
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.1",
-    "@reach/menu-button": "^0.11.2",
-    "@reach/tooltip": "^0.11.2",
+    "@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",
diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index 808d8d5d343e..9f21b9f21450 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -10,8 +10,8 @@
     "@babel/parser": "^7.12.5",
     "@babel/runtime": "^7.11.2",
     "@babel/traverse": "^7.12.5",
-    "@reach/menu-button": "^0.1.17",
-    "@reach/tooltip": "^0.2.2",
+    "@reach/menu-button": "^0.16.1",
+    "@reach/tooltip": "^0.16.0",
     "clipboard-js": "^0.3.6",
     "json5": "^2.1.3",
     "local-storage-fallback": "^4.1.1",
diff --git a/yarn.lock b/yarn.lock
index a5134686016b..5ff9b86dbf0c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1956,167 +1956,109 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
-"@reach/auto-id@0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.11.2.tgz#c66a905c5401d1ac3da8d26165b8d27d6e778fa6"
-  integrity sha512-YZ21b0Kb88wJ0t7QjSznWOYskARQMnmXY9Y2XZ5RyYcZ2krT4s3+ghghpfaPs6BKcrZDonZCrU65OFDJPa1jAw==
-  dependencies:
-    "@reach/utils" "0.11.2"
-    tslib "^2.0.0"
-
-"@reach/auto-id@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
-  integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
-
-"@reach/component-component@0.1.3", "@reach/component-component@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
-  integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg==
-
-"@reach/descendants@0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/descendants/-/descendants-0.11.2.tgz#49ea1b5eb91aba8ae6dce57f6575c38aff1f9756"
-  integrity sha512-63Wdx32/RyjGRJc4UZKK7F1sIrb6jeGkDwvQH0hv0lRAhEjsiSQ1t2JTYDml3testFP48J0B2xS7JzNeY0zoQw==
-  dependencies:
-    "@reach/utils" "0.11.2"
-    tslib "^2.0.0"
-
-"@reach/menu-button@^0.1.17":
-  version "0.1.18"
-  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.1.18.tgz#cb9e3bf1c2a2bdb5d618697b87ad353dfbca123e"
-  integrity sha512-MGdN8SWaQ0u0xj6KWUnK9fFc1VBg8NhNnFhEd2sp3D56XJcr08HU5GeVq/MFf5C97mxRnIPIKGnMPPeGAn9OFA==
-  dependencies:
-    "@reach/component-component" "0.1.3"
-    "@reach/portal" "^0.2.1"
-    "@reach/rect" "0.2.1"
-    "@reach/utils" "^0.2.3"
-    "@reach/window-size" "^0.1.4"
-    warning "^4.0.2"
-
-"@reach/menu-button@^0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/menu-button/-/menu-button-0.11.2.tgz#7c1a955431b6b5c25e77eeaceac347bfc728bee9"
-  integrity sha512-8fU8Gp7wBBhMBFSGxuF62HSdjgaib+NXEM+MhOIYcAacDnP8cxkpvag/Nm/7cMdV/O5JRuuZBralG854AxaO2g==
-  dependencies:
-    "@reach/auto-id" "0.11.2"
-    "@reach/descendants" "0.11.2"
-    "@reach/popover" "0.11.2"
-    "@reach/utils" "0.11.2"
+"@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"
-    tslib "^2.0.0"
+    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/observe-rect@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.0.3.tgz#2ea3dcc369ab22bd9f050a92ea319321356a61e8"
-  integrity sha1-LqPcw2mrIr2fBQqS6jGTITVqYeg=
-
-"@reach/popover@0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/popover/-/popover-0.11.2.tgz#d7d14d8d74b0a376e31dd9a3223d16802360e0d3"
-  integrity sha512-fB5lScg7Sfu3k0c+bjX7QbnFOJ1nsCWYGvrH1M9qlQolWM6gSJcD+ANnEHIb/wF85zuxzgdxZY5bjTj0RZc6Lg==
+"@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.11.2"
-    "@reach/rect" "0.11.2"
-    "@reach/utils" "0.11.2"
+    "@reach/portal" "0.16.0"
+    "@reach/rect" "0.16.0"
+    "@reach/utils" "0.16.0"
     tabbable "^4.0.0"
-    tslib "^2.0.0"
-
-"@reach/portal@0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.11.2.tgz#19a671be9ff010a345892b81e710cb6e4d9f9762"
-  integrity sha512-/53A/rY5oX2Y7D5TpvsP+V5cSd+4MPY6f21mAmVn4DCVwpkCFOlJ059ZL7ixS85M0Jz48YQnnvBJUqwkxqUG/g==
-  dependencies:
-    "@reach/utils" "0.11.2"
-    tslib "^2.0.0"
+    tslib "^2.3.0"
 
-"@reach/portal@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.1.tgz#07720b999e0063a9e179c14dbdc60fd991cfc9fa"
-  integrity sha512-pUQ0EtCcYm4ormEjJmdk4uzZCxOpaRHB8FDKJXy6q6GqRqQwZ4lAT1f2Tvw0DAmULmyZTpe1/heXY27Tdnct+Q==
+"@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/component-component" "^0.1.3"
+    "@reach/utils" "0.16.0"
+    tslib "^2.3.0"
 
-"@reach/rect@0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.11.2.tgz#bc92f97f87e81d1307054fd41c40874d3fbf5491"
-  integrity sha512-eoUWayAADi1ITtrc+8jN9NsBTUkfpORkOs5bQb4RnR6UA/3zlxo5VPuxWgWAG0BCohZlqsxg7NpvckNAyaiAAQ==
+"@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.11.2"
-    prop-types "^15.7.2"
-    tslib "^2.0.0"
-
-"@reach/rect@0.2.1", "@reach/rect@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
-  integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
-  dependencies:
-    "@reach/component-component" "^0.1.3"
-    "@reach/observe-rect" "^1.0.3"
-
-"@reach/tooltip@^0.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.11.2.tgz#db5c11fa72995801baac157db46f5bb6cacd494b"
-  integrity sha512-aTi3aLkRZMHrNiHt84vnyTWNj84rPdGYkxAfaFpxgkaKpos3XmaOPiR+n/3YzQUoJXISuw8mZezcrDtsSpr3aA==
-  dependencies:
-    "@reach/auto-id" "0.11.2"
-    "@reach/portal" "0.11.2"
-    "@reach/rect" "0.11.2"
-    "@reach/utils" "0.11.2"
-    "@reach/visually-hidden" "0.11.1"
+    "@reach/utils" "0.16.0"
     prop-types "^15.7.2"
-    tslib "^2.0.0"
-
-"@reach/tooltip@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.2.2.tgz#a861ce38269b586597ab40417323b33d3d6dc927"
-  integrity sha512-afcfqH6EzDHmwTB6g1k0dSbkyT0s9KPIi5bX56nNuldsCIasImFFYDjRZLhFcuxjskwIsHAi06yC3GV6mtcRxw==
-  dependencies:
-    "@reach/auto-id" "0.2.0"
-    "@reach/portal" "^0.2.1"
-    "@reach/rect" "^0.2.1"
-    "@reach/utils" "^0.2.3"
-    "@reach/visually-hidden" "^0.1.4"
+    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.11.2":
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.11.2.tgz#be1f03650db56fd67a16d3fc70e5262cdb139cec"
-  integrity sha512-fBTolYj+rKTROXmf0zHO0rCWSvw7J0ALmYj5QxW4DmITMOH5uyRuWDWOfqohIGFbOtF/sum50WTB3tvx76d+Aw==
+"@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:
-    "@types/warning" "^3.0.0"
-    tslib "^2.0.0"
-    warning "^4.0.3"
+    tiny-warning "^1.0.3"
+    tslib "^2.3.0"
 
-"@reach/utils@^0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.3.tgz#820f6a6af4301b4c5065cfc04bb89e6a3d1d723f"
-  integrity sha512-zM9rA8jDchr05giMhL95dPeYkK67cBQnIhCVrOKKqgWGsv+2GE/HZqeptvU4zqs0BvIqsThwov+YxVNVh5csTQ==
-
-"@reach/visually-hidden@0.11.1":
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.11.1.tgz#3d7a5742acf18372f35b9e216680edd8073f35e3"
-  integrity sha512-TZZNSttor2jG6ZPGI35s/8G0FNSz49QrJIhAZbnUqHyPf3+jtNqAC0dOWW8Nuk+mApDDDVYd2KZ9P2vnzllNnQ==
+"@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:
-    tslib "^2.0.0"
-
-"@reach/visually-hidden@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
-  integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
-
-"@reach/window-size@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@reach/window-size/-/window-size-0.1.4.tgz#3257b646548f61c2708a661a683620fbe0a706cb"
-  integrity sha512-JZshEuGsLvi6fUIJ7Unx12yNeM5SmqWjber2MLr9tfwf1hpNv73EiPBOIJyV0DjW7GXzjcOEvwnqysm59s2s/A==
-  dependencies:
-    "@reach/component-component" "^0.1.3"
+    prop-types "^15.7.2"
+    tslib "^2.3.0"
 
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
@@ -2331,11 +2273,6 @@
   dependencies:
     source-map "^0.6.1"
 
-"@types/warning@^3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52"
-  integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI=
-
 "@types/webpack-sources@*":
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.2.tgz#5d3d4dea04008a779a90135ff96fb5c0c9e6292c"
@@ -15085,6 +15022,11 @@ timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+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==
+
 tmp@0.1.0, tmp@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.1.0.tgz#ee434a4e22543082e294ba6201dcc6eafefa2877"
@@ -15269,10 +15211,10 @@ tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.2.tgz#9c79d83272c9a7aaf166f73915c9667ecdde3cc9"
   integrity sha512-tTSkux6IGPnUGUd1XAZHcpu85MOkIl5zX49pO+jfsie3eP0B6pyhOlLXm3cAC6T7s+euSDDUUV+Acop5WmtkVg==
 
-tslib@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
-  integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
+tslib@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
 tsutils@^3.17.1:
   version "3.17.1"
@@ -15852,13 +15794,6 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.2, warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
-  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"

From 531c97ef7a2167eac82c16bfd8cccb5eaba71f27 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 11 Aug 2021 15:46:22 -0400
Subject: [PATCH 0757/1603] [DevTools] Updated source map extension format +
 more precise types (#22073)

## Summary

Follow up from https://github.com/facebook/react/pull/22010.

As suggested by @motiz88, update the way the react sources metadata is stored within the fb sources metadata. Specifically,  instead of `x_facebook_sources` directly containing a hook map in the second position of the metadata tuple for a given source, it contains the react sources metadata itself, which is also a tuple of react sources metadata for a given source, and which contains the hook map in the first position. This way the react sources metadata tuple can be extended to contain more react-specific metadata without taking up more positions in the top-level facebook sources metadata.

As part of this change:
- Adds more precise Flow types, mostly borrowed from Metro
- Fixes the facebook sources field name (we were using `x_fb_sources` but it should be `x_facebook_sources`

## Test Plan

- yarn flow
- yarn test
- yarn test-build-devtools
---
 .../src/SourceMapTypes.js                     | 50 +++++++++++++++++++
 .../ComponentUsingHooksIndirectly.js.map      |  2 +-
 .../ComponentWithCustomHook.js.map            |  2 +-
 .../ComponentWithExternalCustomHooks.js.map   |  2 +-
 .../ComponentWithMultipleHooksPerLine.js.map  |  2 +-
 .../ComponentWithNestedHooks.js.map           |  2 +-
 .../ContainingStringSourceMappingURL.js.map   |  2 +-
 .../fb-sources-extended/Example.js.map        |  2 +-
 .../fb-sources-extended/InlineRequire.js.map  |  2 +-
 .../fb-sources-extended/ToDoList.js.map       |  2 +-
 .../external/fb-sources-extended/index.js.map |  2 +-
 .../fb-sources-extended/useTheme.js.map       |  2 +-
 .../ComponentUsingHooksIndirectly.js          |  2 +-
 .../ComponentWithCustomHook.js                |  2 +-
 .../ComponentWithExternalCustomHooks.js       |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      |  2 +-
 .../ComponentWithNestedHooks.js               |  2 +-
 .../ContainingStringSourceMappingURL.js       |  2 +-
 .../inline/fb-sources-extended/Example.js     |  2 +-
 .../fb-sources-extended/InlineRequire.js      |  2 +-
 .../inline/fb-sources-extended/ToDoList.js    |  2 +-
 .../inline/fb-sources-extended/index.js       |  2 +-
 .../inline/fb-sources-extended/useTheme.js    |  2 +-
 .../src/__tests__/updateMockSourceMaps.js     |  9 ++--
 .../src/parseHookNames/parseHookNames.js      | 33 ++++++++----
 25 files changed, 100 insertions(+), 36 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/SourceMapTypes.js

diff --git a/packages/react-devtools-extensions/src/SourceMapTypes.js b/packages/react-devtools-extensions/src/SourceMapTypes.js
new file mode 100644
index 000000000000..6e6d62580d2a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/SourceMapTypes.js
@@ -0,0 +1,50 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @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,
+|};
+
+export type IndexMapSection = {
+  map: IndexMap | BasicSourceMap,
+  offset: {
+    line: number,
+    column: number,
+    ...
+  },
+  ...
+};
+
+export type IndexMap = {|
+  +file?: string,
+  +mappings?: void, // avoids SourceMap being a disjoint union
+  +sourcesContent?: void,
+  +sections: Array<IndexMapSection>,
+  +version: number,
+  +x_facebook_sources?: FBSourcesArray,
+  +x_react_sources?: ReactSourcesArray,
+|};
+
+export type MixedSourceMap = IndexMap | BasicSourceMap;
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
index f8e72b2f1262..de5208204af8 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","count","darkMode","isDarkMode"],"mappings":"CAAD;aqBCA,AWDA;iBbEA,AeFA;oCVGA,AeHA"}]]}
\ No newline at end of file
+{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
index 1e55e029876c..4c08ae088e7a 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_fb_sources":[[null,{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}
\ No newline at end of file
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
index b09f62f6e0ba..5621baa48ea9 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","theme"],"mappings":"CAAD;cgBCA,AUDA"}]]}
\ No newline at end of file
+{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
index 96ff387bccc6..4fdb94d4e6d5 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
@@ -1 +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) Facebook, Inc. and its 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_fb_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
+{"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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
index d894f112fe2a..f23f8e4d7f7b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
@@ -1 +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) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","InnerComponent","state"],"mappings":"CAAD;YyBCA;aLCA,AWDA;gB3BDA"}]]}
\ No newline at end of file
+{"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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
index bed33eccdea3..76c87abcc9a6 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","count"],"mappings":"CAAD;e4BCA,AWDA"}]]}
\ No newline at end of file
+{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
index 799ee59c1d70..053145cb5cc3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
@@ -1 +1 @@
-{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","count"],"mappings":"CAAD;a4BCA,AWDA"}]]}
\ No newline at end of file
+{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
index 635462c6c117..d269cb68b0c5 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
@@ -1 +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) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
+{"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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
index b06880d9253c..d52ec3f61a40 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
@@ -1 +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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_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
+{"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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
index ed73e714bec4..c3608bca5ff8 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>"],"mappings":"CAAD"}]]}
\ No newline at end of file
+{"version":3,"sources":["index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
index e5129095bfcd..722c2ea7b727 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
@@ -1 +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) Facebook, Inc. and its 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_fb_sources":[[null,{"names":["<no-hook>","theme"],"mappings":"CAAD;egBCA,AwBDA"}]]}
\ No newline at end of file
+{"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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
index ee19fdf9ba3d..f52ded8d12ad 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -42,4 +42,4 @@ function useIsDarkMode() {
   }, []);
   return [isDarkMode, () => {}];
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImRhcmtNb2RlIiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YXFCQ0EsQVdEQTtpQmJFQSxBZUZBO29DVkdBLEFlSEEifV1dfQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
index ac7f10f99e8b..d9e67330d397 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
@@ -38,4 +38,4 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJpc0RhcmtNb2RlIl0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBO2NsQkVBLEFlRkE7Z0NiRUEsQWVGQSJ9XV19
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
index a88a83c4078f..f6bb85b26051 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
@@ -23,4 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJ0aGVtZSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y2dCQ0EsQVVEQSJ9XV19
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
index 747e2ccd42b7..8656dfb2097e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -27,4 +27,4 @@ function Component() {
 
   return a + b + c + d;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X2ZiX3NvdXJjZXMiOltbbnVsbCx7Im5hbWVzIjpbIjxuby1ob29rPiIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiJDQUFEO2dCWUNBLEFhREE7aUJiRUEsQWFGQTtvQmJHQSxBYUhBLEFNSUEsQWFKQSJ9XV19
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZS5qcyJdLCJuYW1lcyI6WyJBIiwiQiIsIkNvbXBvbmVudCIsImEiLCJiIiwiYyIsImQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7QUFUQTs7Ozs7Ozs7QUFXQSxNQUFNQSxDQUFDLGdCQUFHLDBCQUFjLENBQWQsQ0FBVjtBQUNBLE1BQU1DLENBQUMsZ0JBQUcsMEJBQWMsQ0FBZCxDQUFWOztBQUVPLFNBQVNDLFNBQVQsR0FBcUI7QUFDMUIsUUFBTUMsQ0FBQyxHQUFHLHVCQUFXSCxDQUFYLENBQVY7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdILENBQVgsQ0FBVixDQUYwQixDQUkxQjs7QUFDQSxRQUFNSSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBVjtBQUFBLFFBQXlCTSxDQUFDLEdBQUcsdUJBQVdMLENBQVgsQ0FBN0IsQ0FMMEIsQ0FLa0I7O0FBRTVDLFNBQU9FLENBQUMsR0FBR0MsQ0FBSixHQUFRQyxDQUFSLEdBQVlDLENBQW5CO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0fSBmcm9tICdyZWFjdCc7XG5cbmNvbnN0IEEgPSBjcmVhdGVDb250ZXh0KDEpO1xuY29uc3QgQiA9IGNyZWF0ZUNvbnRleHQoMik7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IGEgPSB1c2VDb250ZXh0KEEpO1xuICBjb25zdCBiID0gdXNlQ29udGV4dChCKTtcblxuICAvLyBwcmV0dGllci1pZ25vcmVcbiAgY29uc3QgYyA9IHVzZUNvbnRleHQoQSksIGQgPSB1c2VDb250ZXh0KEIpOyAvLyBlc2xpbnQtZGlzYWJsZS1saW5lIG9uZS12YXJcblxuICByZXR1cm4gYSArIGIgKyBjICsgZDtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJhIiwiYiIsImMiLCJkIl0sIm1hcHBpbmdzIjoiQ0FBRDtnQllDQSxBYURBO2lCYkVBLEFhRkE7b0JiR0EsQWFIQSxBTUlBLEFhSkEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
index c7736181d435..96bf34919c5f 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
@@ -25,4 +25,4 @@ function Component(props) {
 module.exports = {
   Component
 };
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiSW5uZXJDb21wb25lbnQiLCJzdGF0ZSJdLCJtYXBwaW5ncyI6IkNBQUQ7WXlCQ0E7YUxDQSxBV0RBO2dCM0JEQSJ9XV19
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhOZXN0ZWRIb29rcy5qcyJdLCJuYW1lcyI6WyJ1c2VNZW1vIiwidXNlU3RhdGUiLCJyZXF1aXJlIiwiQ29tcG9uZW50IiwicHJvcHMiLCJJbm5lckNvbXBvbmVudCIsInN0YXRlIiwiY2FsbGJhY2siLCJtb2R1bGUiLCJleHBvcnRzIl0sIm1hcHBpbmdzIjoiOztBQUFBOzs7Ozs7OztBQVFBLE1BQU07QUFBQ0EsRUFBQUEsT0FBRDtBQUFVQyxFQUFBQTtBQUFWLElBQXNCQyxPQUFPLENBQUMsT0FBRCxDQUFuQzs7QUFFQSxTQUFTQyxTQUFULENBQW1CQyxLQUFuQixFQUEwQjtBQUN4QixRQUFNQyxjQUFjLEdBQUdMLE9BQU8sQ0FBQyxNQUFNLE1BQU07QUFDekMsVUFBTSxDQUFDTSxLQUFELElBQVVMLFFBQVEsQ0FBQyxDQUFELENBQXhCO0FBRUEsV0FBT0ssS0FBUDtBQUNELEdBSjZCLENBQTlCO0FBS0FGLEVBQUFBLEtBQUssQ0FBQ0csUUFBTixDQUFlRixjQUFmO0FBRUEsU0FBTyxJQUFQO0FBQ0Q7O0FBRURHLE1BQU0sQ0FBQ0MsT0FBUCxHQUFpQjtBQUFDTixFQUFBQTtBQUFELENBQWpCIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5jb25zdCB7dXNlTWVtbywgdXNlU3RhdGV9ID0gcmVxdWlyZSgncmVhY3QnKTtcblxuZnVuY3Rpb24gQ29tcG9uZW50KHByb3BzKSB7XG4gIGNvbnN0IElubmVyQ29tcG9uZW50ID0gdXNlTWVtbygoKSA9PiAoKSA9PiB7XG4gICAgY29uc3QgW3N0YXRlXSA9IHVzZVN0YXRlKDApO1xuXG4gICAgcmV0dXJuIHN0YXRlO1xuICB9KTtcbiAgcHJvcHMuY2FsbGJhY2soSW5uZXJDb21wb25lbnQpO1xuXG4gIHJldHVybiBudWxsO1xufVxuXG5tb2R1bGUuZXhwb3J0cyA9IHtDb21wb25lbnR9O1xuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsIklubmVyQ29tcG9uZW50Iiwic3RhdGUiXSwibWFwcGluZ3MiOiJDQUFEO1l5QkNBO2FMQ0EsQVdEQTtnQjNCREEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
index d5520ecc3230..fa3cc5d44bd3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
@@ -26,4 +26,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9mYl9zb3VyY2VzIjpbW251bGwseyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7ZTRCQ0EsQVdEQSJ9XV19
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
index 583fd413e41f..68198fdf3dd5 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
@@ -25,4 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZiX3NvdXJjZXMiOltbbnVsbCx7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50Il0sIm1hcHBpbmdzIjoiQ0FBRDthNEJDQSxBV0RBIn1dXX0=
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
index e95e996016dd..83ea8230ba98 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
@@ -18,4 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+Il0sIm1hcHBpbmdzIjoiQ0FBRCJ9XV19
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIklubGluZVJlcXVpcmUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJyZXF1aXJlIiwidXNlU3RhdGUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7QUFTTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxJQUFVQyxPQUFPLENBQUMsT0FBRCxDQUFQLENBQWlCQyxRQUFqQixDQUEwQixDQUExQixDQUFoQjs7QUFFQSxTQUFPRixLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50XSA9IHJlcXVpcmUoJ3JlYWN0JykudXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIGNvdW50O1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
index 35f3c827f402..574e1d5ae33c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
@@ -103,4 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwibmV3SXRlbVRleHQiLCJpdGVtcyIsInVpZCIsImhhbmRsZUNsaWNrIiwiaGFuZGxlS2V5UHJlc3MiLCJoYW5kbGVDaGFuZ2UiLCJyZW1vdmVJdGVtIiwidG9nZ2xlSXRlbSJdLCJtYXBwaW5ncyI6IkNBQUQ7Y3VCQ0E7Z0JDREE7a0JERUE7b0JDRkE7c0NnQkdBLEFZSEE7dUN4QklBOzJDeEJKQTs0Q29CS0EsQVdMQTs4Q2JNQTsyRFNOQTs2RE5PQTtvRXRCUEE7c0VvQlFBOzJFcEJSQTs2RWtCU0E7Z0ZsQlRBO2tGa0JVQTttR2xCVkEifV1dfQ==
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
index 671a6e4bfdf8..0f753fd3ebd2 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
@@ -86,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+Il0sIm1hcHBpbmdzIjoiQ0FBRCJ9XV19
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFTQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7QUFDQTs7OztBQUVBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5fSBmcm9tICcuL0NvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5JztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhDdXN0b21Ib29rfSBmcm9tICcuL0NvbXBvbmVudFdpdGhDdXN0b21Ib29rJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzJztcbmV4cG9ydCB7Q29tcG9uZW50IGFzIENvbXBvbmVudFdpdGhNdWx0aXBsZUhvb2tzUGVyTGluZX0gZnJvbSAnLi9Db21wb25lbnRXaXRoTXVsdGlwbGVIb29rc1BlckxpbmUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgQ29tcG9uZW50V2l0aE5lc3RlZEhvb2tzfSBmcm9tICcuL0NvbXBvbmVudFdpdGhOZXN0ZWRIb29rcyc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBDb250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTH0gZnJvbSAnLi9Db250YWluaW5nU3RyaW5nU291cmNlTWFwcGluZ1VSTCc7XG5leHBvcnQge0NvbXBvbmVudCBhcyBFeGFtcGxlfSBmcm9tICcuL0V4YW1wbGUnO1xuZXhwb3J0IHtDb21wb25lbnQgYXMgSW5saW5lUmVxdWlyZX0gZnJvbSAnLi9JbmxpbmVSZXF1aXJlJztcbmltcG9ydCAqIGFzIFRvRG9MaXN0IGZyb20gJy4vVG9Eb0xpc3QnO1xuZXhwb3J0IHtUb0RvTGlzdH07XG5leHBvcnQge2RlZmF1bHQgYXMgdXNlVGhlbWV9IGZyb20gJy4vdXNlVGhlbWUnO1xuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiJdLCJtYXBwaW5ncyI6IkNBQUQifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
index 16d4789500b8..43c7be71d36a 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
@@ -24,4 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfZmJfc291cmNlcyI6W1tudWxsLHsibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2VnQkNBLEF3QkRBIn1dXX0=
\ No newline at end of file
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInVzZVRoZW1lLmpzIl0sIm5hbWVzIjpbIlRoZW1lQ29udGV4dCIsInVzZVRoZW1lIiwidGhlbWUiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBU0E7O0FBVEE7Ozs7Ozs7O0FBV08sTUFBTUEsWUFBWSxnQkFBRywwQkFBYyxRQUFkLENBQXJCOzs7QUFFUSxTQUFTQyxRQUFULEdBQW9CO0FBQ2pDLFFBQU1DLEtBQUssR0FBRyx1QkFBV0YsWUFBWCxDQUFkO0FBQ0EsNEJBQWNFLEtBQWQ7QUFDQSxTQUFPQSxLQUFQO0FBQ0QiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IHtjcmVhdGVDb250ZXh0LCB1c2VDb250ZXh0LCB1c2VEZWJ1Z1ZhbHVlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBUaGVtZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KCdicmlnaHQnKTtcblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gdXNlVGhlbWUoKSB7XG4gIGNvbnN0IHRoZW1lID0gdXNlQ29udGV4dChUaGVtZUNvbnRleHQpO1xuICB1c2VEZWJ1Z1ZhbHVlKHRoZW1lKTtcbiAgcmV0dXJuIHRoZW1lO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsInRoZW1lIl0sIm1hcHBpbmdzIjoiQ0FBRDtlZ0JDQSxBd0JEQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
index 6e8b8bdff596..48f947dfec11 100644
--- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -133,10 +133,11 @@ function compile(fileName) {
   const encodedHookMap = generateEncodedHookMap(parsed);
   const fbSourcesExtendedSourceMap = {
     ...sourceMap,
-    // When using the x_fb_sources extension field, the first item
+    // When using the x_facebook_sources extension field, the first item
     // for a given source is reserved for the Function Map, and the
-    // Hook Map is added as the second item.
-    x_fb_sources: [[null, encodedHookMap]],
+    // React sources metadata (which includes the Hook Map) is added as
+    // the second item.
+    x_facebook_sources: [[null, [encodedHookMap]]],
   };
   const reactSourcesExtendedSourceMap = {
     ...sourceMap,
@@ -145,7 +146,7 @@ function compile(fileName) {
     x_react_sources: [[encodedHookMap]],
   };
 
-  // Using the x_fb_sources field
+  // Using the x_facebook_sources field
   writeFileSync(
     resolve(inlineFbSourcesExtendedDir, fileName),
     transformed.code +
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 78e0b7ef66f2..edaf1a5e0ea1 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -17,6 +17,7 @@ import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache
 import {decodeHookMap} from '../generateHookMap';
 import {getHookNameForLocation} from '../getHookNameForLocation';
 
+import type {MixedSourceMap} from '../SourceMapTypes';
 import type {HookMap} from '../generateHookMap';
 import type {
   HooksNode,
@@ -30,7 +31,7 @@ import type {SourceConsumer} from '../astUtils';
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const MAX_SOURCE_LENGTH = 100_000_000;
 const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
-const FB_SOURCES_EXTENSION_KEY = 'x_fb_sources';
+const FB_SOURCES_EXTENSION_KEY = 'x_facebook_sources';
 
 type AST = mixed;
 
@@ -662,22 +663,34 @@ function updateLruCache(
 }
 
 function extractHookMapFromSourceMap(
-  sourcemap,
+  sourcemap: MixedSourceMap,
   sourceIndex: number,
 ): HookMap | null {
-  let hookMap;
-  if (sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY)) {
+  let reactMetadataForSource;
+  if (
+    sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY) &&
+    sourcemap[REACT_SOURCES_EXTENSION_KEY] != null
+  ) {
     // When using the x_react_sources extension field, the first item
     // for a given source is reserved for the Hook Map, which is why
     // we look up the index at position 0.
-    hookMap = sourcemap[REACT_SOURCES_EXTENSION_KEY][sourceIndex][0];
-  } else if (sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY)) {
-    // When using the x_fb_sources extension field, the first item
+    reactMetadataForSource =
+      sourcemap[REACT_SOURCES_EXTENSION_KEY][sourceIndex];
+  } else if (
+    sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY) &&
+    sourcemap[FB_SOURCES_EXTENSION_KEY] != null
+  ) {
+    // When using the x_facebook_sources extension field, the first item
     // for a given source is reserved for the Function Map, and the
-    // Hook Map is added as the second item, which is why we look up
-    // the index at position 1.
-    hookMap = sourcemap[FB_SOURCES_EXTENSION_KEY][sourceIndex][1];
+    // React sources metadata (which includes the Hook Map) is added as
+    // the second item, which is why we look up the index at position 1.
+    const fbMetadataForSource =
+      sourcemap[FB_SOURCES_EXTENSION_KEY][sourceIndex];
+    reactMetadataForSource =
+      fbMetadataForSource != null ? fbMetadataForSource[1] : null;
   }
+  const hookMap =
+    reactMetadataForSource != null ? reactMetadataForSource[0] : null;
   if (hookMap != null) {
     return decodeHookMap(hookMap);
   }

From c6f2188ed6e8d44c73e61aa1ebfd10c9e066d5b3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 11 Aug 2021 16:47:20 -0400
Subject: [PATCH 0758/1603] DevTools 4.14.0 -> 4.15.0

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 ++--
 .../edge/manifest.json                        |  4 ++--
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 .../package.json                              |  2 +-
 packages/react-devtools/CHANGELOG.md          | 22 +++++++++++++++++++
 packages/react-devtools/package.json          |  4 ++--
 8 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 8798d6136775..19db91988b1a 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 23a791281bec..a6bdb2d93195 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.14.0",
-  "version_name": "4.14.0",
+  "version": "4.15.0",
+  "version_name": "4.15.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 7582056dc56e..822f57066b7c 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.14.0",
-  "version_name": "4.14.0",
+  "version": "4.15.0",
+  "version_name": "4.15.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 44327c8566f7..d742822b05e0 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.14.0",
+  "version": "4.15.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 21efaf2bbd9a..4988ab54f2a5 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index dc3b97dbf859..17b4e247716e 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 86aa2e2e61a8..6bcee56c1936 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,28 @@
   <!-- Upcoming changes go here -->
 </details>
 
+
+## 4.15.0 (August 11, 2021)
+
+#### Features
+* Added new scheduling profiler tool ([bvaughn](https://github.com/bvaughn) 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)).
+
 ## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 81d9be15c87c..1a64d331fcf7 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.14.0",
+    "react-devtools-core": "4.15.0",
     "update-notifier": "^2.1.0"
   }
 }

From ef582fbea13052a1b667eab8c6d339c39f51c5e6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 11 Aug 2021 17:48:37 -0400
Subject: [PATCH 0759/1603] Added taneliang and kartikcho to scheduling
 profiler credits

---
 packages/react-devtools/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 6bcee56c1936..32ffcdddd718 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -13,7 +13,7 @@
 ## 4.15.0 (August 11, 2021)
 
 #### Features
-* Added new scheduling profiler tool ([bvaughn](https://github.com/bvaughn) 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)).
+* 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)).

From 07e58658c9bb182eab436c5fe9e1e66078ea0b19 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Aug 2021 10:43:56 -0400
Subject: [PATCH 0760/1603] Add script to generate DevTools changelog text
 (#22077)

---
 package.json                               |  1 +
 packages/react-devtools/get-commit-list.js | 66 ++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 packages/react-devtools/get-commit-list.js

diff --git a/package.json b/package.json
index 1bf9be46f889..2a3c967050d6 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
     "extract-errors": "yarn build --type=dev --extract-errors",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
     "debug-test": "yarn test --deprecated 'yarn test --debug'",
+    "generate-devtools-changelog": "node packages/react-devtools/get-commit-list.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",
diff --git a/packages/react-devtools/get-commit-list.js b/packages/react-devtools/get-commit-list.js
new file mode 100644
index 000000000000..d621ed916c5f
--- /dev/null
+++ b/packages/react-devtools/get-commit-list.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 readline = require('readline');
+
+const PULL_REQUEST_BASE_URL = 'https://github.com/facebook/react/pull/';
+
+const hashes = [];
+const lines = execSync(`
+  git log --max-count=5 --topo-order --pretty=format:'%H:::%s:::%as' HEAD -- packages/react-devtools-core/package.json
+`)
+  .toString()
+  .trim()
+  .split('\n');
+lines.forEach((line, index) => {
+  const [hash, message, date] = line.split(':::');
+  hashes.push(hash);
+  console.log(
+    `\x1b[1m(${index + 1})\x1b[0m ${message} \x1b[2m(${date})\x1b[0m`,
+  );
+});
+
+const prompt = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+});
+prompt.question(
+  '\n' +
+    '\x1b[1m' +
+    'Which of the commits above marks the last DevTools release?' +
+    '\x1b[0m ',
+  numberString => {
+    const hashIndex = parseInt(numberString, 10) - 1;
+    const hash = hashes[hashIndex];
+
+    let formattedLog = '';
+
+    const rawLog = execSync(`
+    git log --topo-order --pretty=format:'%s' ${hash}...HEAD -- packages/react-devtools*
+  `)
+      .toString()
+      .trim();
+    rawLog.split('\n').forEach(line => {
+      line = line.replace('[DevTools] ', '');
+
+      const match = line.match(/(.+) \(#([0-9]+)\)/);
+      if (match !== null) {
+        const title = match[1];
+        const pr = match[2];
+
+        formattedLog += `\n* ${title} \x1b[31m([USERNAME](https://github.com/USERNAME)\x1b[0m in [#${pr}](\x1b[4m\x1b[34m${PULL_REQUEST_BASE_URL}${pr}\x1b[0m))`;
+      } else {
+        formattedLog += `\n* ${line}`;
+      }
+    });
+
+    console.log(formattedLog);
+
+    prompt.close();
+  },
+);

From c2bb97533716469c197353a2dbcb0ee5c54263be Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Aug 2021 11:02:30 -0400
Subject: [PATCH 0761/1603] Added Scheduling Profiler notes and videos to the
 DevTools CHANGELOG

---
 packages/react-devtools/CHANGELOG.md | 61 ++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 32ffcdddd718..24667ce08b97 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -31,6 +31,67 @@
 * 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))

From 82583617b7842008f537653ffb3fae4858213b00 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Aug 2021 11:03:33 -0400
Subject: [PATCH 0762/1603] Updated DevTools CHANGELOG

Fixed header typo
---
 packages/react-devtools/CHANGELOG.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 24667ce08b97..292913a64c44 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -51,14 +51,14 @@ https://user-images.githubusercontent.com/29597/128971757-612f232f-c64f-4447-a76
 
 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?
+###### 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?
+###### 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.
 
@@ -68,7 +68,7 @@ https://user-images.githubusercontent.com/29597/129054366-2700e7e8-0172-4f61-945
 
 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?
+###### 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.
 
@@ -76,7 +76,7 @@ React profiling tools have previously focused on only reporting what React (or R
 
 https://user-images.githubusercontent.com/29597/128971952-7c4e7e11-f4fb-497e-b643-4d9b3994b590.mp4
 
-####### What can you do to improve performance?
+###### 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.
 

From e4e8226c625220944819c9237346569f09ad90a9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 12 Aug 2021 20:41:56 -0400
Subject: [PATCH 0763/1603] Fixed Components tree indentation bug for Chrome
 extension (#22083)

By upgrading react-virtualized-auto-sizer to 1.0.6

See https://github.com/bvaughn/react-virtualized-auto-sizer/pull/39
---
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools-shared/package.json              | 2 +-
 yarn.lock                                                | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 17b4e247716e..633a8a9e91d9 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -9,7 +9,7 @@
     "memoize-one": "^5.1.1",
     "nullthrows": "^1.1.1",
     "pretty-ms": "^7.0.0",
-    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-virtualized-auto-sizer": "^1.0.6",
     "regenerator-runtime": "^0.13.7"
   },
   "devDependencies": {
diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index 9f21b9f21450..d59dc05225ca 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -17,7 +17,7 @@
     "local-storage-fallback": "^4.1.1",
     "lodash.throttle": "^4.1.1",
     "memoize-one": "^3.1.1",
-    "react-virtualized-auto-sizer": "^1.0.2",
+    "react-virtualized-auto-sizer": "^1.0.6",
     "semver": "^6.3.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 5ff9b86dbf0c..02d3f3bc0183 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12941,10 +12941,10 @@ react-timer-mixin@^0.13.4:
   resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
   integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
 
-react-virtualized-auto-sizer@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz#a61dd4f756458bbf63bd895a92379f9b70f803bd"
-  integrity sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==
+react-virtualized-auto-sizer@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
+  integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
 
 react@^16.13.1:
   version "16.13.1"

From 54e170c79493dea734b95b0fddbf8f0bfc99bff7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 13 Aug 2021 17:14:29 -0400
Subject: [PATCH 0764/1603] [DevTools] Add screenshots to Scheduling Profiler
 (#22088)

---
 .../src/CanvasPage.js                         |  44 ++++
 .../src/EventTooltip.js                       |  21 ++
 .../src/content-views/SnapshotsView.js        | 208 ++++++++++++++++++
 .../src/content-views/constants.js            |   1 +
 .../src/content-views/index.js                |   1 +
 .../__tests__/preprocessData-test.internal.js |  80 +++----
 .../src/import-worker/importFile.js           |   4 +-
 .../src/import-worker/preprocessData.js       |  47 +++-
 .../src/types.js                              |  10 +
 9 files changed, 375 insertions(+), 41 deletions(-)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 2681eb7c876c..83de9a2d2d59 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -46,6 +46,7 @@ import {
   NativeEventsView,
   ReactMeasuresView,
   SchedulingEventsView,
+  SnapshotsView,
   SuspenseEventsView,
   TimeAxisMarkersView,
   UserTimingMarksView,
@@ -157,6 +158,7 @@ function AutoSizedCanvas({
   const componentMeasuresViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
+  const snapshotsViewRef = useRef(null);
 
   const {hideMenu: hideContextMenu} = useContext(RegistryContext);
 
@@ -304,6 +306,18 @@ function AutoSizedCanvas({
       );
     }
 
+    let snapshotsViewWrapper = null;
+    if (data.snapshots.length > 0) {
+      const snapshotsView = new SnapshotsView(surface, defaultFrame, data);
+      snapshotsViewRef.current = snapshotsView;
+      snapshotsViewWrapper = createViewHelper(
+        snapshotsView,
+        'snapshots',
+        true,
+        true,
+      );
+    }
+
     const flamechartView = new FlamechartView(
       surface,
       defaultFrame,
@@ -340,6 +354,9 @@ function AutoSizedCanvas({
     if (componentMeasuresViewWrapper !== null) {
       rootView.addSubview(componentMeasuresViewWrapper);
     }
+    if (snapshotsViewWrapper !== null) {
+      rootView.addSubview(snapshotsViewWrapper);
+    }
     rootView.addSubview(flamechartViewWrapper);
 
     const verticalScrollOverflowView = new VerticalScrollOverflowView(
@@ -389,6 +406,7 @@ function AutoSizedCanvas({
               measure: null,
               nativeEvent: null,
               schedulingEvent: null,
+              snapshot: null,
               suspenseEvent: null,
               userTimingMark: null,
             };
@@ -447,6 +465,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark,
           });
@@ -465,6 +484,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -483,6 +503,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -501,6 +522,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent,
             userTimingMark: null,
           });
@@ -519,6 +541,7 @@ function AutoSizedCanvas({
             measure,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -540,6 +563,26 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
+            suspenseEvent: null,
+            userTimingMark: null,
+          });
+        }
+      };
+    }
+
+    const {current: snapshotsView} = snapshotsViewRef;
+    if (snapshotsView) {
+      snapshotsView.onHover = snapshot => {
+        if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {
+          setHoveredEvent({
+            componentMeasure: null,
+            data,
+            flamechartStackFrame: null,
+            measure: null,
+            nativeEvent: null,
+            schedulingEvent: null,
+            snapshot,
             suspenseEvent: null,
             userTimingMark: null,
           });
@@ -561,6 +604,7 @@ function AutoSizedCanvas({
             measure: null,
             nativeEvent: null,
             schedulingEvent: null,
+            snapshot: null,
             suspenseEvent: null,
             userTimingMark: null,
           });
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 8f3c2e2c0b1b..df53f1a0ef68 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -17,6 +17,7 @@ import type {
   ReactProfilerData,
   Return,
   SchedulingEvent,
+  Snapshot,
   SuspenseEvent,
   UserTimingMark,
 } from './types';
@@ -87,6 +88,7 @@ export default function EventTooltip({
     measure,
     nativeEvent,
     schedulingEvent,
+    snapshot,
     suspenseEvent,
     userTimingMark,
   } = hoveredEvent;
@@ -110,6 +112,8 @@ export default function EventTooltip({
         tooltipRef={tooltipRef}
       />
     );
+  } else if (snapshot !== null) {
+    return <TooltipSnapshot snapshot={snapshot} tooltipRef={tooltipRef} />;
   } else if (suspenseEvent !== null) {
     return (
       <TooltipSuspenseEvent
@@ -301,6 +305,23 @@ const TooltipSchedulingEvent = ({
   );
 };
 
+const TooltipSnapshot = ({
+  snapshot,
+  tooltipRef,
+}: {
+  snapshot: Snapshot,
+  tooltipRef: Return<typeof useRef>,
+}) => {
+  return (
+    <div className={styles.Tooltip} ref={tooltipRef}>
+      <img
+        src={snapshot.imageSource}
+        style={{width: snapshot.width / 2, height: snapshot.height / 2}}
+      />
+    </div>
+  );
+};
+
 const TooltipSuspenseEvent = ({
   suspenseEvent,
   tooltipRef,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
new file mode 100644
index 000000000000..1d27ff89d62e
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
@@ -0,0 +1,208 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Snapshot, ReactProfilerData} from '../types';
+import type {
+  Interaction,
+  MouseMoveInteraction,
+  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_HEIGHT} from './constants';
+
+type OnHover = (node: Snapshot | null) => void;
+
+export class SnapshotsView extends View {
+  _intrinsicSize: Size;
+  _profilerData: ReactProfilerData;
+
+  onHover: OnHover | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+    super(surface, frame);
+
+    this._intrinsicSize = {
+      width: profilerData.duration,
+      height: SNAPSHOT_HEIGHT,
+    };
+    this._profilerData = profilerData;
+  }
+
+  desiredSize() {
+    return this._intrinsicSize;
+  }
+
+  draw(context: CanvasRenderingContext2D) {
+    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 occured,
+    // draw them at fixed intervals and just show the nearest one.
+    while (x < visibleArea.origin.x + visibleArea.size.width) {
+      const snapshot = this._findClosestSnapshot(x);
+
+      const scaledHeight = SNAPSHOT_HEIGHT;
+      const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) / 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;
+    }
+  }
+
+  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+    switch (interaction.type) {
+      case 'mousemove':
+        this._handleMouseMove(interaction, viewRefs);
+        break;
+    }
+  }
+
+  _drawSnapshotImage(
+    context: CanvasRenderingContext2D,
+    snapshot: Snapshot,
+    imageRect: Rect,
+  ) {
+    const visibleArea = this.visibleArea;
+
+    // Prevent snapshot from visibly overflowing its container when clipped.
+    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();
+    }
+
+    // $FlowFixMe 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,
+      imageRect.origin.y,
+
+      // Scaled image size
+      imageRect.size.width,
+      imageRect.size.height,
+    );
+
+    if (shouldClip) {
+      context.restore();
+    }
+  }
+
+  _findClosestSnapshot(x: number): Snapshot {
+    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];
+  }
+
+  /**
+   * @private
+   */
+  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+    const {onHover, visibleArea} = this;
+    if (!onHover) {
+      return;
+    }
+
+    const {location} = interaction.payload;
+    if (!rectContainsPoint(location, visibleArea)) {
+      onHover(null);
+      return;
+    }
+
+    const snapshot = this._findClosestSnapshot(location.x);
+    if (snapshot) {
+      this.currentCursor = 'context-menu';
+      viewRefs.hoveredView = this;
+      onHover(snapshot);
+    } else {
+      onHover(null);
+    }
+  }
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 6cda416ad8bb..fe42bc16f1c8 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -23,6 +23,7 @@ export const REACT_MEASURE_HEIGHT = 14;
 export const BORDER_SIZE = 1;
 export const FLAMECHART_FRAME_HEIGHT = 14;
 export const TEXT_PADDING = 3;
+export const SNAPSHOT_HEIGHT = 50;
 
 export const INTERVAL_TIMES = [
   1,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
index fc1f4eabd422..91ab47bfd46c 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
@@ -12,6 +12,7 @@ export * from './FlamechartView';
 export * from './NativeEventsView';
 export * from './ReactMeasuresView';
 export * from './SchedulingEventsView';
+export * from './SnapshotsView';
 export * from './SuspenseEventsView';
 export * from './TimeAxisMarkersView';
 export * from './UserTimingMarksView';
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 0fa434b9489d..f5267e8d06aa 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -17,7 +17,7 @@ import {
 } from '../../constants';
 import REACT_VERSION from 'shared/ReactVersion';
 
-describe(getLanesFromTransportDecimalBitmask, () => {
+describe('getLanesFromTransportDecimalBitmask', () => {
   it('should return array of lane numbers from bitmask string', () => {
     expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
     expect(getLanesFromTransportDecimalBitmask('512')).toEqual([9]);
@@ -57,7 +57,7 @@ describe(getLanesFromTransportDecimalBitmask, () => {
   });
 });
 
-describe(preprocessData, () => {
+describe('preprocessData', () => {
   let React;
   let ReactDOM;
   let Scheduler;
@@ -217,11 +217,11 @@ describe(preprocessData, () => {
     delete global.performance;
   });
 
-  it('should throw given an empty timeline', () => {
-    expect(() => preprocessData([])).toThrow();
+  it('should throw given an empty timeline', async () => {
+    await expect(async () => preprocessData([])).rejects.toThrow();
   });
 
-  it('should throw given a timeline with no Profile event', () => {
+  it('should throw given a timeline with no Profile event', async () => {
     const randomSample = createUserTimingEntry({
       dur: 100,
       tdur: 200,
@@ -231,10 +231,10 @@ describe(preprocessData, () => {
       args: {},
     });
 
-    expect(() => preprocessData([randomSample])).toThrow();
+    await expect(async () => preprocessData([randomSample])).rejects.toThrow();
   });
 
-  it('should return empty data given a timeline with no React scheduling profiling marks', () => {
+  it('should return empty data given a timeline with no React scheduling profiling marks', async () => {
     const cpuProfilerSample = creactCpuProfilerSample();
     const randomSample = createUserTimingEntry({
       dur: 100,
@@ -246,7 +246,7 @@ describe(preprocessData, () => {
     });
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
-      const data = preprocessData([
+      const data = await preprocessData([
         ...createBoilerplateEntries(),
         cpuProfilerSample,
         randomSample,
@@ -327,6 +327,7 @@ describe(preprocessData, () => {
           "otherUserTimingMarks": Array [],
           "reactVersion": "17.0.3",
           "schedulingEvents": Array [],
+          "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
         }
@@ -334,13 +335,13 @@ describe(preprocessData, () => {
     }
   });
 
-  it('should process legacy data format (before lane labels were added)', () => {
+  it('should process legacy data format (before lane labels were added)', async () => {
     const cpuProfilerSample = creactCpuProfilerSample();
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       // Data below is hard-coded based on an older profile sample.
       // Should be fine since this is explicitly a legacy-format test.
-      const data = preprocessData([
+      const data = await preprocessData([
         ...createBoilerplateEntries(),
         cpuProfilerSample,
         createUserTimingEntry({
@@ -541,6 +542,7 @@ describe(preprocessData, () => {
               "warning": null,
             },
           ],
+          "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
         }
@@ -548,11 +550,11 @@ describe(preprocessData, () => {
     }
   });
 
-  it('should process a sample legacy render sequence', () => {
+  it('should process a sample legacy render sequence', async () => {
     ReactDOM.render(<div />, document.createElement('div'));
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
-      const data = preprocessData([
+      const data = await preprocessData([
         ...createBoilerplateEntries(),
         ...createUserTimingData(clearedMarks),
       ]);
@@ -730,6 +732,7 @@ describe(preprocessData, () => {
               "warning": null,
             },
           ],
+          "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
         }
@@ -737,7 +740,7 @@ describe(preprocessData, () => {
     }
   });
 
-  it('should process a sample createRoot render sequence', () => {
+  it('should process a sample createRoot render sequence', async () => {
     function App() {
       const [didMount, setDidMount] = React.useState(false);
       React.useEffect(() => {
@@ -752,7 +755,7 @@ describe(preprocessData, () => {
       const root = ReactDOM.createRoot(document.createElement('div'));
       act(() => root.render(<App />));
 
-      const data = preprocessData([
+      const data = await preprocessData([
         ...createBoilerplateEntries(),
         ...createUserTimingData(clearedMarks),
       ]);
@@ -1074,6 +1077,7 @@ describe(preprocessData, () => {
               "warning": null,
             },
           ],
+          "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
         }
@@ -1082,7 +1086,7 @@ describe(preprocessData, () => {
   });
 
   // @gate enableSchedulingProfiler
-  it('should error if events and measures are incomplete', () => {
+  it('should error if events and measures are incomplete', async () => {
     const container = document.createElement('div');
     ReactDOM.render(<div />, container);
 
@@ -1097,7 +1101,7 @@ describe(preprocessData, () => {
   });
 
   // @gate enableSchedulingProfiler
-  it('should error if work is completed without being started', () => {
+  it('should error if work is completed without being started', async () => {
     const container = document.createElement('div');
     ReactDOM.render(<div />, container);
 
@@ -1111,7 +1115,7 @@ describe(preprocessData, () => {
     expect(error).toHaveBeenCalled();
   });
 
-  it('should populate other user timing marks', () => {
+  it('should populate other user timing marks', async () => {
     const userTimingData = createUserTimingData([]);
     userTimingData.push(
       createUserTimingEntry({
@@ -1138,7 +1142,7 @@ describe(preprocessData, () => {
       }),
     );
 
-    const data = preprocessData([
+    const data = await preprocessData([
       ...createBoilerplateEntries(),
       ...userTimingData,
     ]);
@@ -1162,7 +1166,7 @@ describe(preprocessData, () => {
 
   describe('warnings', () => {
     describe('long event handlers', () => {
-      it('should not warn when React scedules a (sync) update inside of a short event handler', () => {
+      it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
         function App() {
           return null;
         }
@@ -1180,13 +1184,13 @@ describe(preprocessData, () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = preprocessData(testMarks);
+          const data = await preprocessData(testMarks);
           const event = data.nativeEvents.find(({type}) => type === 'click');
           expect(event.warning).toBe(null);
         }
       });
 
-      it('should not warn about long events if the cause was non-React JavaScript', () => {
+      it('should not warn about long events if the cause was non-React JavaScript', async () => {
         function App() {
           return null;
         }
@@ -1206,13 +1210,13 @@ describe(preprocessData, () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = preprocessData(testMarks);
+          const data = await preprocessData(testMarks);
           const event = data.nativeEvents.find(({type}) => type === 'click');
           expect(event.warning).toBe(null);
         }
       });
 
-      it('should warn when React scedules a long (sync) update inside of an event', () => {
+      it('should warn when React scedules a long (sync) update inside of an event', async () => {
         function App() {
           return null;
         }
@@ -1245,7 +1249,7 @@ describe(preprocessData, () => {
             });
           });
 
-          const data = preprocessData(testMarks);
+          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."`,
@@ -1253,7 +1257,7 @@ describe(preprocessData, () => {
         }
       });
 
-      it('should not warn when React finishes a previously long (async) update with a short (sync) update inside of an event', () => {
+      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.unstable_yieldValue(`${id}:${value}`);
           return null;
@@ -1303,7 +1307,7 @@ describe(preprocessData, () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = preprocessData(testMarks);
+          const data = await preprocessData(testMarks);
           const event = data.nativeEvents.find(({type}) => type === 'click');
           expect(event.warning).toBe(null);
         }
@@ -1311,7 +1315,7 @@ describe(preprocessData, () => {
     });
 
     describe('nested updates', () => {
-      it('should not warn about short nested (state) updates during layout effects', () => {
+      it('should not warn about short nested (state) updates during layout effects', async () => {
         function Component() {
           const [didMount, setDidMount] = React.useState(false);
           Scheduler.unstable_yieldValue(
@@ -1334,7 +1338,7 @@ describe(preprocessData, () => {
             'Component update',
           ]);
 
-          const data = preprocessData([
+          const data = await preprocessData([
             ...createBoilerplateEntries(),
             ...createUserTimingData(clearedMarks),
           ]);
@@ -1346,7 +1350,7 @@ describe(preprocessData, () => {
         }
       });
 
-      it('should not warn about short (forced) updates during layout effects', () => {
+      it('should not warn about short (forced) updates during layout effects', async () => {
         class Component extends React.Component {
           _didMount: boolean = false;
           componentDidMount() {
@@ -1372,7 +1376,7 @@ describe(preprocessData, () => {
             'Component update',
           ]);
 
-          const data = preprocessData([
+          const data = await preprocessData([
             ...createBoilerplateEntries(),
             ...createUserTimingData(clearedMarks),
           ]);
@@ -1384,7 +1388,7 @@ describe(preprocessData, () => {
         }
       });
 
-      it('should warn about long nested (state) updates during layout effects', () => {
+      it('should warn about long nested (state) updates during layout effects', async () => {
         function Component() {
           const [didMount, setDidMount] = React.useState(false);
           Scheduler.unstable_yieldValue(
@@ -1429,7 +1433,7 @@ describe(preprocessData, () => {
             });
           });
 
-          const data = preprocessData([
+          const data = await preprocessData([
             cpuProfilerSample,
             ...createBoilerplateEntries(),
             ...testMarks,
@@ -1444,7 +1448,7 @@ describe(preprocessData, () => {
         }
       });
 
-      it('should warn about long nested (forced) updates during layout effects', () => {
+      it('should warn about long nested (forced) updates during layout effects', async () => {
         class Component extends React.Component {
           _didMount: boolean = false;
           componentDidMount() {
@@ -1490,7 +1494,7 @@ describe(preprocessData, () => {
             });
           });
 
-          const data = preprocessData([
+          const data = await preprocessData([
             cpuProfilerSample,
             ...createBoilerplateEntries(),
             ...testMarks,
@@ -1509,7 +1513,7 @@ describe(preprocessData, () => {
     describe('suspend during an update', () => {
       // This also tests an edge case where the a component suspends while profiling
       // before the first commit is logged (so the lane-to-labels map will not yet exist).
-      it('should warn about suspending during an udpate', () => {
+      it('should warn about suspending during an udpate', async () => {
         let promise = null;
         let resolvedValue = null;
         function readValue(value) {
@@ -1557,7 +1561,7 @@ describe(preprocessData, () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = preprocessData(testMarks);
+          const 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."`,
@@ -1615,7 +1619,7 @@ describe(preprocessData, () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = preprocessData(testMarks);
+          const data = await preprocessData(testMarks);
           expect(data.suspenseEvents).toHaveLength(1);
           expect(data.suspenseEvents[0].warning).toBe(null);
         }
@@ -1623,5 +1627,7 @@ describe(preprocessData, () => {
     });
   });
 
+  // TODO: Add test for snapshot base64 parsing
+
   // TODO: Add test for flamechart parsing
 });
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js b/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
index 1e0510b8539e..61301aa331b3 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
@@ -26,9 +26,11 @@ export async function importFile(file: File): Promise<ImportWorkerOutputData> {
       throw new InvalidProfileError('No profiling data found in file.');
     }
 
+    const processedData = await preprocessData(events);
+
     return {
       status: 'SUCCESS',
-      processedData: preprocessData(events),
+      processedData,
     };
   } catch (error) {
     if (error instanceof InvalidProfileError) {
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index a356ad96885e..9d6e56035ab8 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -26,7 +26,6 @@ import type {
   SchedulingEvent,
   SuspenseEvent,
 } from '../types';
-
 import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
 import InvalidProfileError from './InvalidProfileError';
 import {getBatchRange} from '../utils/getBatchRange';
@@ -40,6 +39,7 @@ type MeasureStackElement = {|
 |};
 
 type ProcessorState = {|
+  asyncProcessingPromises: Promise<any>[],
   batchUID: BatchUID,
   currentReactComponentMeasure: ReactComponentMeasure | null,
   measureStack: MeasureStackElement[],
@@ -224,6 +224,41 @@ function processTimelineEvent(
 ) {
   const {args, cat, name, ts, ph} = event;
   switch (cat) {
+    case 'disabled-by-default-devtools.screenshot':
+      const encodedSnapshot = args.snapshot; // Base 64 encoded
+
+      const snapshot = {
+        height: 0,
+        image: null,
+        imageSource: `data:image/png;base64,${encodedSnapshot}`,
+        timestamp: (ts - currentProfilerData.startTime) / 1000,
+        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 createImageBitmap
+          createImageBitmap(blob).then(bitmap => {
+            snapshot.height = bitmap.height;
+            snapshot.width = bitmap.width;
+
+            resolveFn();
+          });
+        });
+
+      currentProfilerData.snapshots.push(snapshot);
+      break;
     case 'devtools.timeline':
       if (name === 'EventDispatch') {
         const type = args.data.type;
@@ -661,9 +696,9 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
   return flamechart;
 }
 
-export default function preprocessData(
+export default async function preprocessData(
   timeline: TimelineEvent[],
-): ReactProfilerData {
+): Promise<ReactProfilerData> {
   const flamechart = preprocessFlamechart(timeline);
 
   const laneToReactMeasureMap = new Map();
@@ -682,6 +717,7 @@ export default function preprocessData(
     otherUserTimingMarks: [],
     reactVersion: null,
     schedulingEvents: [],
+    snapshots: [],
     startTime: 0,
     suspenseEvents: [],
   };
@@ -713,6 +749,7 @@ export default function preprocessData(
     (timeline[timeline.length - 1].ts - profilerData.startTime) / 1000;
 
   const state: ProcessorState = {
+    asyncProcessingPromises: [],
     batchUID: 0,
     currentReactComponentMeasure: null,
     measureStack: [],
@@ -773,5 +810,9 @@ export default function preprocessData(
     },
   );
 
+  // 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);
+
   return profilerData;
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 761033f2cdda..637d95714106 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -115,6 +115,14 @@ export type UserTimingMark = {|
   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.
@@ -150,6 +158,7 @@ export type ReactProfilerData = {|
   otherUserTimingMarks: UserTimingMark[],
   reactVersion: string | null,
   schedulingEvents: SchedulingEvent[],
+  snapshots: Snapshot[],
   startTime: number,
   suspenseEvents: SuspenseEvent[],
 |};
@@ -162,5 +171,6 @@ export type ReactHoverContextInfo = {|
   nativeEvent: NativeEvent | null,
   schedulingEvent: SchedulingEvent | null,
   suspenseEvent: SuspenseEvent | null,
+  snapshot: Snapshot | null,
   userTimingMark: UserTimingMark | null,
 |};

From 89910635f7832382a9431615855cedfd2ba70396 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sat, 14 Aug 2021 11:10:36 -0400
Subject: [PATCH 0765/1603] Scheduling Profiler: Inline snapshots (#22091)

---
 .../src/EventTooltip.css                      |  5 ++-
 .../src/EventTooltip.js                       |  1 +
 .../src/content-views/SnapshotsView.js        | 39 ++++++++++++-------
 .../src/content-views/constants.js            |  2 +-
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
index 114d3fe7bbe1..af8c82e6308d 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
@@ -11,7 +11,6 @@
   user-select: none;
   pointer-events: none;
   background-color: var(--color-tooltip-background);
-  border: 1px solid var(border);
   box-shadow: 1px 1px 2px var(--color-shadow);
   color: var(--color-tooltip-text);
   font-size: 11px;
@@ -72,4 +71,8 @@
 .InfoText,
 .WarningText {
   color: var(--color-warning-text-color);
+}
+
+.Image {
+  border: 1px solid var(--color-border);
 }
\ No newline at end of file
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index df53f1a0ef68..648bbcc56bb6 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -315,6 +315,7 @@ const TooltipSnapshot = ({
   return (
     <div className={styles.Tooltip} ref={tooltipRef}>
       <img
+        className={styles.Image}
         src={snapshot.imageSource}
         style={{width: snapshot.width / 2, height: snapshot.height / 2}}
       />
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
index 1d27ff89d62e..545789350eea 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
@@ -10,7 +10,7 @@
 import type {Snapshot, ReactProfilerData} from '../types';
 import type {
   Interaction,
-  MouseMoveInteraction,
+  Point,
   Rect,
   Size,
   Surface,
@@ -67,6 +67,10 @@ export class SnapshotsView extends View {
     // 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 = SNAPSHOT_HEIGHT;
       const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) / snapshot.height;
@@ -97,7 +101,11 @@ export class SnapshotsView extends View {
   handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
     switch (interaction.type) {
       case 'mousemove':
-        this._handleMouseMove(interaction, viewRefs);
+      case 'wheel-control':
+      case 'wheel-meta':
+      case 'wheel-plain':
+      case 'wheel-shift':
+        this._updateHover(interaction.payload.location, viewRefs);
         break;
     }
   }
@@ -125,6 +133,14 @@ export class SnapshotsView extends View {
       context.clip();
     }
 
+    context.fillStyle = COLORS.REACT_RESIZE_BAR_BORDER;
+    context.fillRect(
+      imageRect.origin.x,
+      imageRect.origin.y,
+      imageRect.size.width,
+      imageRect.size.height,
+    );
+
     // $FlowFixMe Flow doesn't know about the 9 argument variant of drawImage()
     context.drawImage(
       snapshot.image,
@@ -138,12 +154,12 @@ export class SnapshotsView extends View {
       snapshot.height,
 
       // Canvas coordinates
-      imageRect.origin.x,
-      imageRect.origin.y,
+      imageRect.origin.x + BORDER_SIZE,
+      imageRect.origin.y + BORDER_SIZE,
 
       // Scaled image size
-      imageRect.size.width,
-      imageRect.size.height,
+      imageRect.size.width - BORDER_SIZE * 2,
+      imageRect.size.height - BORDER_SIZE * 2,
     );
 
     if (shouldClip) {
@@ -151,7 +167,7 @@ export class SnapshotsView extends View {
     }
   }
 
-  _findClosestSnapshot(x: number): Snapshot {
+  _findClosestSnapshot(x: number): Snapshot | null {
     const frame = this.frame;
     const scaleFactor = positioningScaleFactor(
       this._intrinsicSize.width,
@@ -178,28 +194,25 @@ export class SnapshotsView extends View {
       }
     }
 
-    return snapshots[stopIndex];
+    return snapshots[stopIndex] || null;
   }
 
   /**
    * @private
    */
-  _handleMouseMove(interaction: MouseMoveInteraction, viewRefs: ViewRefs) {
+  _updateHover(location: Point, viewRefs: ViewRefs) {
     const {onHover, visibleArea} = this;
     if (!onHover) {
       return;
     }
 
-    const {location} = interaction.payload;
     if (!rectContainsPoint(location, visibleArea)) {
       onHover(null);
       return;
     }
 
     const snapshot = this._findClosestSnapshot(location.x);
-    if (snapshot) {
-      this.currentCursor = 'context-menu';
-      viewRefs.hoveredView = this;
+    if (snapshot !== null) {
       onHover(snapshot);
     } else {
       onHover(null);
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index fe42bc16f1c8..338ca1e5d163 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -23,7 +23,7 @@ export const REACT_MEASURE_HEIGHT = 14;
 export const BORDER_SIZE = 1;
 export const FLAMECHART_FRAME_HEIGHT = 14;
 export const TEXT_PADDING = 3;
-export const SNAPSHOT_HEIGHT = 50;
+export const SNAPSHOT_HEIGHT = 35;
 
 export const INTERVAL_TIMES = [
   1,

From bc4e75112195429b3d76c21caad86abc607cc8b8 Mon Sep 17 00:00:00 2001
From: Tommy Groshong <1794859+tgroshon@users.noreply.github.com>
Date: Sun, 15 Aug 2021 17:25:22 -0400
Subject: [PATCH 0766/1603] Typo: 'occured' -> 'occurred' in comment (#22094)

---
 .../src/content-views/SnapshotsView.js                          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
index 545789350eea..c0d48e0616b1 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
@@ -63,7 +63,7 @@ export class SnapshotsView extends View {
 
     let x = visibleArea.origin.x;
 
-    // Rather than drawing each snapshot where it occured,
+    // 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);

From 55d01aa0f391f62e697031c51d058405049eabc2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 16 Aug 2021 13:20:07 -0400
Subject: [PATCH 0767/1603] Scheduling profiler: Canvas views clip by default
 (#22100)

---
 .../src/content-views/SnapshotsView.js          |  1 +
 .../src/content-views/SuspenseEventsView.js     | 13 -------------
 .../src/view-base/View.js                       | 17 +++++++++++++++++
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
index c0d48e0616b1..fbaa7c5d8357 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
@@ -118,6 +118,7 @@ export class SnapshotsView extends View {
     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);
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
index db234e4cebec..b7237079c5d5 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
@@ -168,18 +168,6 @@ export class SuspenseEventsView extends View {
         return; // Not in view
       }
 
-      const drawableRect = intersectionOfRects(suspenseRect, rect);
-
-      // Clip diamonds so they don't overflow if the view has been resized (smaller).
-      const region = new Path2D();
-      region.rect(
-        drawableRect.origin.x,
-        drawableRect.origin.y,
-        drawableRect.size.width,
-        drawableRect.size.height,
-      );
-      context.save();
-      context.clip(region);
       context.beginPath();
       context.fillStyle = fillStyle;
       context.moveTo(xStart, y - halfSize);
@@ -187,7 +175,6 @@ export class SuspenseEventsView extends View {
       context.lineTo(xStart, y + halfSize);
       context.lineTo(xStart - halfSize, y);
       context.fill();
-      context.restore();
     } else {
       const xStop = timestampToPosition(
         timestamp + duration,
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
index b78af9d1e24a..8dcda731efbc 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
@@ -199,7 +199,24 @@ export class View {
       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();
     }
   }
 

From f6ec4661dbd76c53ab23f3b1565012b9df0a6ff0 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 16 Aug 2021 13:46:46 -0700
Subject: [PATCH 0768/1603] make parseHookNames a separate bundle (#22102)

---
 .../src/__tests__/parseHookNames-test.js      | 22 +----------
 .../react-devtools-extensions/src/main.js     | 38 ++++++++++---------
 .../src/parseHookNames/index.js               |  8 +---
 .../webpack.config.js                         |  1 +
 4 files changed, 25 insertions(+), 44 deletions(-)

diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 52032b372310..272f5ddf5a52 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -62,7 +62,7 @@ describe('parseHookNames', () => {
 
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
-    parseHookNames = require('../parseHookNames').parseHookNames;
+    parseHookNames = require('../parseHookNames/parseHookNames').parseHookNames;
 
     // Jest (jest-runner?) configures Errors to automatically account for source maps.
     // This changes behavior between our tests and the browser.
@@ -718,22 +718,13 @@ describe('parseHookNames', () => {
 describe('parseHookNames worker', () => {
   let inspectHooks;
   let parseHookNames;
-  let originalParseHookNamesMock;
   let workerizedParseHookNamesMock;
 
   beforeEach(() => {
     window.Worker = undefined;
 
-    originalParseHookNamesMock = jest.fn();
     workerizedParseHookNamesMock = jest.fn();
 
-    jest.mock('../parseHookNames/parseHookNames.js', () => {
-      return {
-        __esModule: true,
-        parseHookNames: originalParseHookNamesMock,
-      };
-    });
-
     jest.mock('../parseHookNames/parseHookNames.worker.js', () => {
       return {
         __esModule: true,
@@ -757,7 +748,7 @@ describe('parseHookNames worker', () => {
     return hookNames;
   }
 
-  it('should use worker when available', async () => {
+  it('should use worker', async () => {
     const Component = require('./__source__/__untransformed__/ComponentWithUseState')
       .Component;
 
@@ -769,13 +760,4 @@ describe('parseHookNames worker', () => {
     await getHookNamesForComponent(Component);
     expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(1);
   });
-
-  it('should use main thread when worker is not available', async () => {
-    const Component = require('./__source__/__untransformed__/ComponentWithUseState')
-      .Component;
-
-    await getHookNamesForComponent(Component);
-    expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(0);
-    expect(originalParseHookNamesMock).toHaveBeenCalledTimes(1);
-  });
 });
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 514e48514d78..7cb92c27b6cb 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -12,7 +12,6 @@ import {
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
 } from 'react-devtools-shared/src/utils';
-import {parseHookNames, purgeCachedMetadata} from './parseHookNames';
 import {
   localStorageGetItem,
   localStorageRemoveItem,
@@ -210,23 +209,26 @@ function createPanelIfReactLoaded() {
 
         render = (overrideTab = mostRecentOverrideTab) => {
           mostRecentOverrideTab = overrideTab;
-
-          root.render(
-            createElement(DevTools, {
-              bridge,
-              browserTheme: getBrowserTheme(),
-              componentsPortalContainer,
-              enabledInspectedElementContextMenu: true,
-              loadHookNames: parseHookNames,
-              overrideTab,
-              profilerPortalContainer,
-              purgeCachedHookNamesMetadata: purgeCachedMetadata,
-              showTabBar: false,
-              store,
-              warnIfUnsupportedVersionDetected: true,
-              viewAttributeSourceFunction,
-              viewElementSourceFunction,
-            }),
+          import('./parseHookNames').then(
+            ({parseHookNames, purgeCachedMetadata}) => {
+              root.render(
+                createElement(DevTools, {
+                  bridge,
+                  browserTheme: getBrowserTheme(),
+                  componentsPortalContainer,
+                  enabledInspectedElementContextMenu: true,
+                  loadHookNames: parseHookNames,
+                  overrideTab,
+                  profilerPortalContainer,
+                  purgeCachedHookNamesMetadata: purgeCachedMetadata,
+                  showTabBar: false,
+                  store,
+                  warnIfUnsupportedVersionDetected: true,
+                  viewAttributeSourceFunction,
+                  viewElementSourceFunction,
+                }),
+              );
+            },
           );
         };
 
diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js
index ed178c3f200b..79b2cf1aae54 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/index.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/index.js
@@ -12,17 +12,13 @@
 // This file uses workerize to load ./parseHookNames.worker as a webworker and instanciates it,
 // exposing flow typed functions that can be used on other files.
 
-import * as parseHookNamesModule from './parseHookNames';
 import WorkerizedParseHookNames from './parseHookNames.worker';
-
-type ParseHookNamesModule = typeof parseHookNamesModule;
+import typeof * as ParseHookNamesModule from './parseHookNames';
 
 // $FlowFixMe
 const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
 
-const workerizedParseHookNames: ParseHookNamesModule = window.Worker
-  ? WorkerizedParseHookNames()
-  : parseHookNamesModule;
+const workerizedParseHookNames: ParseHookNamesModule = WorkerizedParseHookNames();
 
 type ParseHookNames = $PropertyType<ParseHookNamesModule, 'parseHookNames'>;
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index b3a92762ae6c..664ec8267c35 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -41,6 +41,7 @@ module.exports = {
   },
   output: {
     path: __dirname + '/build',
+    publicPath: '/build/',
     filename: '[name].js',
   },
   node: {

From 152ecce117d29ee2b3823f6c46b890f2f06ee8cd Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 16 Aug 2021 14:55:47 -0700
Subject: [PATCH 0769/1603] DevTools 4.15.0 -> 4.16.0 (#22104)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 7 +++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 19db91988b1a..36d083d47e02 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index a6bdb2d93195..94fb4a5b221c 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.15.0",
-  "version_name": "4.15.0",
+  "version": "4.16.0",
+  "version_name": "4.16.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 822f57066b7c..e3291f353cae 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.15.0",
-  "version_name": "4.15.0",
+  "version": "4.16.0",
+  "version_name": "4.16.0",
 
   "minimum_chrome_version": "60",
 
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index d742822b05e0..e5c5deaaabca 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.15.0",
+  "version": "4.16.0",
 
   "applications": {
     "gecko": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 4988ab54f2a5..a6fcd41b45f2 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 633a8a9e91d9..3c8900c0d8fb 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 292913a64c44..dd5d09b5e63b 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -9,6 +9,13 @@
   <!-- Upcoming changes go here -->
 </details>
 
+## 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)
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 1a64d331fcf7..74f14f99fa3e 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.15.0",
+    "react-devtools-core": "4.16.0",
     "update-notifier": "^2.1.0"
   }
 }

From aebf3b456b320a931c7a292f9c5948ee57c8174f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 16 Aug 2021 18:48:50 -0400
Subject: [PATCH 0770/1603] [Scheduler] Check for continuous input events
 (#22107)

* [Scheduler] Track start of current chunk

Currently in `shouldYield`, we compare the current time to a deadline
that is pre-computed at the beginning of the current chunk.

However, since we use different deadlines depending on whether an input
event is pending, it makes more sense to track the start of the current
chunk and check how much time has elapsed since then.

Doesn't change any behavior, just refactors the logic.

* [Scheduler] Check for continuous input events

`isInputPending` supports a `includeContinuous` option. When set to
`true`, the method will check for pending continuous inputs, like
`mousemove`, in addition to discrete ones, like `click`.

We will only check for pending continuous inputs if we've blocked the
main thread for a non-neglible amount of time. If we've only blocked
the main thread for, say, a few frames, then we'll only check for
discrete inputs.

I wrote a test for this but didn't include it because we haven't yet set
up the `gate` flag infra to work with Scheduler feature flags. For now,
I ran the test locally.

* Review nits
---
 packages/scheduler/src/forks/Scheduler.js | 98 +++++++++++++----------
 1 file changed, 57 insertions(+), 41 deletions(-)

diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index 8d1f1f994fe8..c32ef04ca392 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -91,6 +91,15 @@ const localClearTimeout =
 const localSetImmediate =
   typeof setImmediate !== 'undefined' ? setImmediate : null; // IE and Node.js + jsdom
 
+const isInputPending =
+  typeof navigator !== 'undefined' &&
+  navigator.scheduling !== undefined &&
+  navigator.scheduling.isInputPending !== undefined
+    ? navigator.scheduling.isInputPending.bind(navigator.scheduling)
+    : null;
+
+const continuousOptions = {includeContinuous: true};
+
 function advanceTimers(currentTime) {
   // Check for tasks that are no longer delayed and add them to the queue.
   let timer = peek(timerQueue);
@@ -418,49 +427,57 @@ let taskTimeoutID = -1;
 // thread, like user events. By default, it yields multiple times per frame.
 // It does not attempt to align with frame boundaries, since most tasks don't
 // need to be frame aligned; for those that do, use requestAnimationFrame.
-let yieldInterval = 5;
-let deadline = 0;
+// TODO: Make these configurable
+let frameInterval = 5;
+const continuousInputInterval = 50;
+const maxInterval = 300;
+let startTime = -1;
 
-// TODO: Make this configurable
-// TODO: Adjust this based on priority?
-const maxYieldInterval = 300;
 let needsPaint = false;
 
 function shouldYieldToHost() {
-  if (
-    enableIsInputPending &&
-    navigator !== undefined &&
-    navigator.scheduling !== undefined &&
-    navigator.scheduling.isInputPending !== undefined
-  ) {
-    const scheduling = navigator.scheduling;
-    const currentTime = getCurrentTime();
-    if (currentTime >= deadline) {
-      // There's no time left. We may want to yield control of the main
-      // thread, so the browser can perform high priority tasks. The main ones
-      // are painting and user input. If there's a pending paint or a pending
-      // input, then we should yield. But if there's neither, then we can
-      // yield less often while remaining responsive. We'll eventually yield
-      // regardless, since there could be a pending paint that wasn't
-      // accompanied by a call to `requestPaint`, or other main thread tasks
-      // like network events.
-      if (needsPaint || scheduling.isInputPending()) {
-        // There is either a pending paint or a pending input.
-        return true;
+  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;
+  }
+
+  // The main thread has been blocked for a non-negligible amount of time. We
+  // may want to yield control of the main thread, so the browser can perform
+  // high priority tasks. The main ones are painting and user input. If there's
+  // a pending paint or a pending input, then we should yield. But if there's
+  // neither, then we can yield less often while remaining responsive. We'll
+  // eventually yield regardless, since there could be a pending paint that
+  // wasn't accompanied by a call to `requestPaint`, or other main thread tasks
+  // like network events.
+  if (enableIsInputPending) {
+    if (needsPaint) {
+      // There's a pending paint (signaled by `requestPaint`). Yield now.
+      return true;
+    }
+    if (timeElapsed < continuousInputInterval) {
+      // We haven't blocked the thread for that long. Only yield if there's a
+      // pending discrete input (e.g. click). It's OK if there's pending
+      // continuous input (e.g. mouseover).
+      if (isInputPending !== null) {
+        return isInputPending();
+      }
+    } else if (timeElapsed < maxInterval) {
+      // Yield if there's either a pending discrete or continuous input.
+      if (isInputPending !== null) {
+        return isInputPending(continuousOptions);
       }
-      // There's no pending input. Only yield if we've reached the max
-      // yield interval.
-      const timeElapsed = currentTime - (deadline - yieldInterval);
-      return timeElapsed >= maxYieldInterval;
     } else {
-      // There's still time left in the frame.
-      return false;
+      // We've blocked the thread for a long time. Even if there's no pending
+      // input, there may be some other scheduled work that we don't know about,
+      // like a network event. Yield now.
+      return true;
     }
-  } else {
-    // `isInputPending` is not available. Since we have no way of knowing if
-    // there's pending input, always yield at the end of the frame.
-    return getCurrentTime() >= deadline;
   }
+
+  // `isInputPending` isn't available. Yield now.
+  return true;
 }
 
 function requestPaint() {
@@ -486,20 +503,19 @@ function forceFrameRate(fps) {
     return;
   }
   if (fps > 0) {
-    yieldInterval = Math.floor(1000 / fps);
+    frameInterval = Math.floor(1000 / fps);
   } else {
     // reset the framerate
-    yieldInterval = 5;
+    frameInterval = 5;
   }
 }
 
 const performWorkUntilDeadline = () => {
   if (scheduledHostCallback !== null) {
     const currentTime = getCurrentTime();
-    // Yield after `yieldInterval` ms, regardless of where we are in the vsync
-    // cycle. This means there's always time remaining at the beginning of
-    // the message event.
-    deadline = currentTime + yieldInterval;
+    // Keep track of the start time so we can measure how long the main thread
+    // has been blocked.
+    startTime = currentTime;
     const hasTimeRemaining = true;
 
     // If a scheduler task throws, exit the current browser task so the

From 424fe587087d05302259d6d5ebb359675387f3b1 Mon Sep 17 00:00:00 2001
From: Sota <5866096+sota000@users.noreply.github.com>
Date: Mon, 16 Aug 2021 17:53:23 -0700
Subject: [PATCH 0771/1603] Revert "Show a soft error when a text string or
 number is supplied as a child to non text wrappers (#21953)" (#22108)

This reverts commit e9b2028b3280c15138bd92b0d27ffa066de3d5ca.
---
 .../src/ReactFabricHostConfig.js                      | 11 ++++++-----
 .../src/ReactNativeHostConfig.js                      | 10 +++++-----
 .../src/__tests__/ReactFabric-test.internal.js        |  6 +++---
 .../src/__tests__/ReactNativeMount-test.internal.js   | 10 +++++-----
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index c71a9050211c..8ca9401597dd 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -22,6 +22,8 @@ import type {
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
+import invariant from 'shared/invariant';
+
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
 import {
@@ -262,11 +264,10 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  if (__DEV__) {
-    if (!hostContext.isInAParentText) {
-      console.error('Text strings must be rendered within a <Text> component.');
-    }
-  }
+  invariant(
+    hostContext.isInAParentText,
+    'Text strings must be rendered within a <Text> component.',
+  );
 
   const tag = nextReactTag;
   nextReactTag += 2;
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 63337a04df1a..205f8189b7a7 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -147,11 +147,11 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  if (__DEV__) {
-    if (!hostContext.isInAParentText) {
-      console.error('Text strings must be rendered within a <Text> component.');
-    }
-  }
+  invariant(
+    hostContext.isInAParentText,
+    'Text strings must be rendered within a <Text> component.',
+  );
+
   const tag = allocateTag();
 
   UIManager.createView(
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index 9f2851382af4..c7e4e3dee1b5 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -524,7 +524,7 @@ describe('ReactFabric', () => {
     });
   });
 
-  it('should console error for text not inside of a <Text> ancestor', () => {
+  it('should throw for text not inside of a <Text> ancestor', () => {
     const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTScrollView',
@@ -542,7 +542,7 @@ describe('ReactFabric', () => {
       act(() => {
         ReactFabric.render(<View>this should warn</View>, 11);
       });
-    }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
+    }).toThrow('Text strings must be rendered within a <Text> component.');
 
     expect(() => {
       act(() => {
@@ -553,7 +553,7 @@ describe('ReactFabric', () => {
           11,
         );
       });
-    }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
+    }).toThrow('Text strings must be rendered within a <Text> component.');
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {
diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
index 4d1ffce09fe3..9026bef79376 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -473,7 +473,7 @@ describe('ReactNative', () => {
     );
   });
 
-  it('should console error for text not inside of a <Text> ancestor', () => {
+  it('should throw for text not inside of a <Text> ancestor', () => {
     const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTScrollView',
@@ -487,9 +487,9 @@ describe('ReactNative', () => {
       uiViewClassName: 'RCTView',
     }));
 
-    expect(() =>
-      ReactNative.render(<View>this should warn</View>, 11),
-    ).toErrorDev(['Text strings must be rendered within a <Text> component.']);
+    expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
+      'Text strings must be rendered within a <Text> component.',
+    );
 
     expect(() =>
       ReactNative.render(
@@ -498,7 +498,7 @@ describe('ReactNative', () => {
         </Text>,
         11,
       ),
-    ).toErrorDev(['Text strings must be rendered within a <Text> component.']);
+    ).toThrow('Text strings must be rendered within a <Text> component.');
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {

From bd255700d73ed5fa88f9e32fa4b43623679adf0c Mon Sep 17 00:00:00 2001
From: Sota <5866096+sota000@users.noreply.github.com>
Date: Mon, 16 Aug 2021 18:43:24 -0700
Subject: [PATCH 0772/1603] Show a soft error when a text string or number is
 supplied as a child to non text wrappers (#22109)

---
 .../src/ReactFabricHostConfig.js                      | 11 +++++------
 .../src/__tests__/ReactFabric-test.internal.js        |  6 +++---
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 8ca9401597dd..c71a9050211c 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -22,8 +22,6 @@ import type {
 import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
-import invariant from 'shared/invariant';
-
 import {dispatchEvent} from './ReactFabricEventEmitter';
 
 import {
@@ -264,10 +262,11 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  invariant(
-    hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
-  );
+  if (__DEV__) {
+    if (!hostContext.isInAParentText) {
+      console.error('Text strings must be rendered within a <Text> component.');
+    }
+  }
 
   const tag = nextReactTag;
   nextReactTag += 2;
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index c7e4e3dee1b5..9f2851382af4 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -524,7 +524,7 @@ describe('ReactFabric', () => {
     });
   });
 
-  it('should throw for text not inside of a <Text> ancestor', () => {
+  it('should console error for text not inside of a <Text> ancestor', () => {
     const ScrollView = createReactNativeComponentClass('RCTScrollView', () => ({
       validAttributes: {},
       uiViewClassName: 'RCTScrollView',
@@ -542,7 +542,7 @@ describe('ReactFabric', () => {
       act(() => {
         ReactFabric.render(<View>this should warn</View>, 11);
       });
-    }).toThrow('Text strings must be rendered within a <Text> component.');
+    }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
 
     expect(() => {
       act(() => {
@@ -553,7 +553,7 @@ describe('ReactFabric', () => {
           11,
         );
       });
-    }).toThrow('Text strings must be rendered within a <Text> component.');
+    }).toErrorDev(['Text strings must be rendered within a <Text> component.']);
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {

From 9eb2aaaf8181743481bdce955ab3b5e9bbacac90 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 18 Aug 2021 01:40:55 -0400
Subject: [PATCH 0773/1603] Fixed ReactSharedInternals export in UMD bundle
 (#22117)

---
 packages/react/src/forks/ReactSharedInternals.umd.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react/src/forks/ReactSharedInternals.umd.js b/packages/react/src/forks/ReactSharedInternals.umd.js
index 2620c61d92e6..5dcfbb5650e6 100644
--- a/packages/react/src/forks/ReactSharedInternals.umd.js
+++ b/packages/react/src/forks/ReactSharedInternals.umd.js
@@ -8,6 +8,7 @@
 import assign from 'object-assign';
 import * as Scheduler from 'scheduler';
 import ReactCurrentDispatcher from '../ReactCurrentDispatcher';
+import ReactCurrentActQueue from '../ReactCurrentActQueue';
 import ReactCurrentOwner from '../ReactCurrentOwner';
 import ReactDebugCurrentFrame from '../ReactDebugCurrentFrame';
 import ReactCurrentBatchConfig from '../ReactCurrentBatchConfig';
@@ -28,6 +29,7 @@ const ReactSharedInternals = {
 };
 
 if (__DEV__) {
+  ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue;
   ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;
 }
 

From f51579fffeac46a783f765786f5287644b1fa7eb Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 18 Aug 2021 12:17:59 -0400
Subject: [PATCH 0774/1603] Scheduling Profiler: Add network measures (#22112)

---
 .../src/CanvasPage.js                         | 106 +++++-
 .../src/EventTooltip.css                      |  15 +-
 .../src/EventTooltip.js                       |  49 +++
 .../src/content-views/NetworkMeasuresView.js  | 337 ++++++++++++++++++
 .../src/content-views/constants.js            |  19 +-
 .../src/content-views/index.js                |   1 +
 .../src/content-views/utils/text.js           |  28 +-
 .../__tests__/preprocessData-test.internal.js |   4 +
 .../src/import-worker/preprocessData.js       | 332 ++++++++++++-----
 .../src/types.js                              |  16 +-
 .../src/view-base/HorizontalPanAndZoomView.js |  11 +-
 .../src/view-base/Surface.js                  |  55 ++-
 .../src/view-base/VerticalScrollView.js       |  27 +-
 .../react-devtools-shared/src/constants.js    |   8 +
 14 files changed, 872 insertions(+), 136 deletions(-)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 83de9a2d2d59..db3d3cda4ee6 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -44,6 +44,7 @@ import {
   ComponentMeasuresView,
   FlamechartView,
   NativeEventsView,
+  NetworkMeasuresView,
   ReactMeasuresView,
   SchedulingEventsView,
   SnapshotsView,
@@ -128,6 +129,18 @@ const zoomToBatch = (
   viewState.updateHorizontalScrollState(scrollState);
 };
 
+const EMPTY_CONTEXT_INFO: ReactHoverContextInfo = {
+  componentMeasure: null,
+  flamechartStackFrame: null,
+  measure: null,
+  nativeEvent: null,
+  networkMeasure: null,
+  schedulingEvent: null,
+  snapshot: null,
+  suspenseEvent: null,
+  userTimingMark: null,
+};
+
 type AutoSizedCanvasProps = {|
   data: ReactProfilerData,
   height: number,
@@ -150,7 +163,12 @@ function AutoSizedCanvas({
     setHoveredEvent,
   ] = useState<ReactHoverContextInfo | null>(null);
 
-  const surfaceRef = useRef(new Surface());
+  const resetHoveredEvent = useCallback(
+    () => setHoveredEvent(EMPTY_CONTEXT_INFO),
+    [],
+  );
+
+  const surfaceRef = useRef(new Surface(resetHoveredEvent));
   const userTimingMarksViewRef = useRef(null);
   const nativeEventsViewRef = useRef(null);
   const schedulingEventsViewRef = useRef(null);
@@ -158,6 +176,7 @@ function AutoSizedCanvas({
   const componentMeasuresViewRef = useRef(null);
   const reactMeasuresViewRef = useRef(null);
   const flamechartViewRef = useRef(null);
+  const networkMeasuresViewRef = useRef(null);
   const snapshotsViewRef = useRef(null);
 
   const {hideMenu: hideContextMenu} = useContext(RegistryContext);
@@ -318,6 +337,22 @@ function AutoSizedCanvas({
       );
     }
 
+    let networkMeasuresViewWrapper = null;
+    if (data.snapshots.length > 0) {
+      const networkMeasuresView = new NetworkMeasuresView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      networkMeasuresViewRef.current = networkMeasuresView;
+      networkMeasuresViewWrapper = createViewHelper(
+        networkMeasuresView,
+        'network',
+        true,
+        true,
+      );
+    }
+
     const flamechartView = new FlamechartView(
       surface,
       defaultFrame,
@@ -357,6 +392,9 @@ function AutoSizedCanvas({
     if (snapshotsViewWrapper !== null) {
       rootView.addSubview(snapshotsViewWrapper);
     }
+    if (networkMeasuresViewWrapper !== null) {
+      rootView.addSubview(networkMeasuresViewWrapper);
+    }
     rootView.addSubview(flamechartViewWrapper);
 
     const verticalScrollOverflowView = new VerticalScrollOverflowView(
@@ -395,16 +433,18 @@ function AutoSizedCanvas({
             prevHoverEvent.flamechartStackFrame !== null ||
             prevHoverEvent.measure !== null ||
             prevHoverEvent.nativeEvent !== null ||
+            prevHoverEvent.networkMeasure !== null ||
             prevHoverEvent.schedulingEvent !== null ||
+            prevHoverEvent.snapshot !== null ||
             prevHoverEvent.suspenseEvent !== null ||
             prevHoverEvent.userTimingMark !== null
           ) {
             return {
               componentMeasure: null,
-              data: prevHoverEvent.data,
               flamechartStackFrame: null,
               measure: null,
               nativeEvent: null,
+              networkMeasure: null,
               schedulingEvent: null,
               snapshot: null,
               suspenseEvent: null,
@@ -460,10 +500,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -479,10 +519,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -498,10 +538,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent,
             snapshot: null,
             suspenseEvent: null,
@@ -517,10 +557,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent,
@@ -536,10 +576,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.measure !== measure) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -558,10 +598,10 @@ function AutoSizedCanvas({
         ) {
           setHoveredEvent({
             componentMeasure,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -577,10 +617,10 @@ function AutoSizedCanvas({
         if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame: null,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot,
             suspenseEvent: null,
@@ -599,10 +639,10 @@ function AutoSizedCanvas({
         ) {
           setHoveredEvent({
             componentMeasure: null,
-            data,
             flamechartStackFrame,
             measure: null,
             nativeEvent: null,
+            networkMeasure: null,
             schedulingEvent: null,
             snapshot: null,
             suspenseEvent: null,
@@ -611,53 +651,79 @@ function AutoSizedCanvas({
         }
       });
     }
+
+    const {current: networkMeasuresView} = networkMeasuresViewRef;
+    if (networkMeasuresView) {
+      networkMeasuresView.onHover = networkMeasure => {
+        if (!hoveredEvent || hoveredEvent.networkMeasure !== networkMeasure) {
+          setHoveredEvent({
+            componentMeasure: null,
+            flamechartStackFrame: null,
+            measure: null,
+            nativeEvent: null,
+            networkMeasure,
+            schedulingEvent: null,
+            snapshot: null,
+            suspenseEvent: null,
+            userTimingMark: null,
+          });
+        }
+      };
+    }
   }, [
     hoveredEvent,
     data, // Attach onHover callbacks when views are re-created on data change
   ]);
 
   useLayoutEffect(() => {
-    const {current: userTimingMarksView} = userTimingMarksViewRef;
+    const userTimingMarksView = userTimingMarksViewRef.current;
     if (userTimingMarksView) {
       userTimingMarksView.setHoveredMark(
         hoveredEvent ? hoveredEvent.userTimingMark : null,
       );
     }
 
-    const {current: nativeEventsView} = nativeEventsViewRef;
+    const nativeEventsView = nativeEventsViewRef.current;
     if (nativeEventsView) {
       nativeEventsView.setHoveredEvent(
         hoveredEvent ? hoveredEvent.nativeEvent : null,
       );
     }
 
-    const {current: schedulingEventsView} = schedulingEventsViewRef;
+    const schedulingEventsView = schedulingEventsViewRef.current;
     if (schedulingEventsView) {
       schedulingEventsView.setHoveredEvent(
         hoveredEvent ? hoveredEvent.schedulingEvent : null,
       );
     }
 
-    const {current: suspenseEventsView} = suspenseEventsViewRef;
+    const suspenseEventsView = suspenseEventsViewRef.current;
     if (suspenseEventsView) {
       suspenseEventsView.setHoveredEvent(
         hoveredEvent ? hoveredEvent.suspenseEvent : null,
       );
     }
 
-    const {current: reactMeasuresView} = reactMeasuresViewRef;
+    const reactMeasuresView = reactMeasuresViewRef.current;
     if (reactMeasuresView) {
       reactMeasuresView.setHoveredMeasure(
         hoveredEvent ? hoveredEvent.measure : null,
       );
     }
 
-    const {current: flamechartView} = flamechartViewRef;
+    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
@@ -677,6 +743,7 @@ function AutoSizedCanvas({
             componentMeasure,
             flamechartStackFrame,
             measure,
+            networkMeasure,
             schedulingEvent,
             suspenseEvent,
           } = contextData.hoveredEvent;
@@ -689,6 +756,13 @@ function AutoSizedCanvas({
                   Copy component name
                 </ContextMenuItem>
               )}
+              {networkMeasure !== null && (
+                <ContextMenuItem
+                  onClick={() => copy(networkMeasure.url)}
+                  title="Copy URL">
+                  Copy URL
+                </ContextMenuItem>
+              )}
               {schedulingEvent !== null && (
                 <ContextMenuItem
                   onClick={() => copy(schedulingEvent.componentName)}
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
index af8c82e6308d..5ed92c546274 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
@@ -3,10 +3,10 @@
 }
 
 .TooltipSection,
-.TooltipWarningSection {
+.TooltipWarningSection,
+.SingleLineTextSection {
   display: block;
   border-radius: 0.125rem;
-  max-width: 300px;
   padding: 0.25rem;
   user-select: none;
   pointer-events: none;
@@ -19,6 +19,13 @@
   margin-top: 0.25rem;
   background-color: var(--color-warning-background);
 }
+.TooltipSection,
+.TooltipWarningSection {
+  max-width: 300px;
+}
+.SingleLineTextSection {
+  white-space: nowrap;
+}
 
 .Divider {
   height: 1px;
@@ -75,4 +82,8 @@
 
 .Image {
   border: 1px solid var(--color-border);
+}
+
+.DimText {
+  color: var(--color-dim);
 }
\ No newline at end of file
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 648bbcc56bb6..84531e5b879c 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -11,6 +11,7 @@ import type {Point} from './view-base';
 import type {
   FlamechartStackFrame,
   NativeEvent,
+  NetworkMeasure,
   ReactComponentMeasure,
   ReactHoverContextInfo,
   ReactMeasure,
@@ -29,6 +30,8 @@ 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: ReactProfilerData,
@@ -87,6 +90,7 @@ export default function EventTooltip({
     flamechartStackFrame,
     measure,
     nativeEvent,
+    networkMeasure,
     schedulingEvent,
     snapshot,
     suspenseEvent,
@@ -104,6 +108,13 @@ export default function EventTooltip({
     return (
       <TooltipNativeEvent nativeEvent={nativeEvent} tooltipRef={tooltipRef} />
     );
+  } else if (networkMeasure !== null) {
+    return (
+      <TooltipNetworkMeasure
+        networkMeasure={networkMeasure}
+        tooltipRef={tooltipRef}
+      />
+    );
   } else if (schedulingEvent !== null) {
     return (
       <TooltipSchedulingEvent
@@ -238,6 +249,44 @@ const TooltipNativeEvent = ({
   );
 };
 
+const TooltipNetworkMeasure = ({
+  networkMeasure,
+  tooltipRef,
+}: {
+  networkMeasure: NetworkMeasure,
+  tooltipRef: Return<typeof useRef>,
+}) => {
+  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.substr(0, half) + '…' + url.substr(url.length - half);
+  }
+
+  const timestampBegin = sendRequestTimestamp;
+  const timestampEnd = finishTimestamp || lastReceivedDataTimestamp;
+  const duration =
+    timestampEnd > 0
+      ? formatDuration(finishTimestamp - timestampBegin)
+      : '(incomplete)';
+
+  return (
+    <div className={styles.Tooltip} ref={tooltipRef}>
+      <div className={styles.SingleLineTextSection}>
+        {duration} <span className={styles.DimText}>{priority}</span>{' '}
+        {urlToDisplay}
+      </div>
+    </div>
+  );
+};
+
 const TooltipSchedulingEvent = ({
   data,
   schedulingEvent,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js
new file mode 100644
index 000000000000..321bfcca1d5a
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js
@@ -0,0 +1,337 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {NetworkMeasure, ReactProfilerData} 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: ReactProfilerData;
+
+  onHover: ((event: NetworkMeasure | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+    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 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() {
+    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-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 338ca1e5d163..48ba22aed30a 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+export const DPR: number = window.devicePixelRatio || 1;
 export const LABEL_SIZE = 80;
 export const MARKER_HEIGHT = 20;
 export const MARKER_TICK_HEIGHT = 8;
@@ -20,7 +21,7 @@ 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;
+export const BORDER_SIZE = 1 / DPR;
 export const FLAMECHART_FRAME_HEIGHT = 14;
 export const TEXT_PADDING = 3;
 export const SNAPSHOT_HEIGHT = 35;
@@ -46,6 +47,10 @@ export let COLORS = {
   BACKGROUND: '',
   NATIVE_EVENT: '',
   NATIVE_EVENT_HOVER: '',
+  NETWORK_PRIMARY: '',
+  NETWORK_PRIMARY_HOVER: '',
+  NETWORK_SECONDARY: '',
+  NETWORK_SECONDARY_HOVER: '',
   PRIORITY_BACKGROUND: '',
   PRIORITY_BORDER: '',
   PRIORITY_LABEL: '',
@@ -106,6 +111,18 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-native-event-hover',
     ),
+    NETWORK_PRIMARY: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-network-primary',
+    ),
+    NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-network-primary-hover',
+    ),
+    NETWORK_SECONDARY: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-network-secondary',
+    ),
+    NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-network-secondary-hover',
+    ),
     PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-priority-background',
     ),
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
index 91ab47bfd46c..21c8cb570b35 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
@@ -10,6 +10,7 @@
 export * from './ComponentMeasuresView';
 export * from './FlamechartView';
 export * from './NativeEventsView';
+export * from './NetworkMeasuresView';
 export * from './ReactMeasuresView';
 export * from './SchedulingEventsView';
 export * from './SnapshotsView';
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
index 4cd7d9482158..9351d1685ff7 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
@@ -32,14 +32,34 @@ export function trimText(
   text: string,
   width: number,
 ): string | null {
-  for (let i = text.length - 1; i >= 0; i--) {
-    const trimmedText = i === text.length - 1 ? text : text.substr(0, i) + '…';
+  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.substr(0, currentIndex) + '…';
+
     if (getTextWidth(context, trimmedText) <= width) {
-      return trimmedText;
+      if (longestValidIndex < currentIndex) {
+        longestValidIndex = currentIndex;
+        longestValidText = trimmedText;
+      }
+
+      startIndex = currentIndex + 1;
+    } else {
+      stopIndex = currentIndex - 1;
     }
   }
 
-  return null;
+  return longestValidText;
 }
 
 type TextConfig = {|
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index f5267e8d06aa..3481068f471b 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -324,6 +324,7 @@ describe('preprocessData', () => {
             30 => Array [],
           },
           "nativeEvents": Array [],
+          "networkMeasures": Array [],
           "otherUserTimingMarks": Array [],
           "reactVersion": "17.0.3",
           "schedulingEvents": Array [],
@@ -530,6 +531,7 @@ describe('preprocessData', () => {
             30 => Array [],
           },
           "nativeEvents": Array [],
+          "networkMeasures": Array [],
           "otherUserTimingMarks": Array [],
           "reactVersion": "17.0.3",
           "schedulingEvents": Array [
@@ -715,6 +717,7 @@ describe('preprocessData', () => {
             30 => Array [],
           },
           "nativeEvents": Array [],
+          "networkMeasures": Array [],
           "otherUserTimingMarks": Array [
             Object {
               "name": "__v3",
@@ -1051,6 +1054,7 @@ describe('preprocessData', () => {
             30 => Array [],
           },
           "nativeEvents": Array [],
+          "networkMeasures": Array [],
           "otherUserTimingMarks": Array [
             Object {
               "name": "__v3",
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 9d6e56035ab8..a7545ef1b7a1 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -17,6 +17,7 @@ import type {
   Flamechart,
   Milliseconds,
   NativeEvent,
+  NetworkMeasure,
   Phase,
   ReactLane,
   ReactComponentMeasure,
@@ -51,6 +52,7 @@ type ProcessorState = {|
   potentialSuspenseEventsOutsideOfTransition: Array<
     [SuspenseEvent, ReactLane[]],
   >,
+  requestIdToNetworkMeasureMap: Map<string, NetworkMeasure>,
   uidCounter: BatchUID,
   unresolvedSuspenseEvents: Map<string, SuspenseEvent>,
 |};
@@ -215,6 +217,205 @@ function throwIfIncomplete(
   }
 }
 
+function processEventDispatch(
+  event: TimelineEvent,
+  timestamp: Milliseconds,
+  profilerData: ReactProfilerData,
+  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: ReactProfilerData,
+  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: ReactProfilerData,
+  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: ReactProfilerData,
+  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: ReactProfilerData,
+  state: ProcessorState,
+) {
+  const encodedSnapshot = event.args.snapshot; // Base 64 encoded
+
+  const 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 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: ReactProfilerData,
+  state: ProcessorState,
+) {
+  const data = event.args.data;
+  const requestId = data.requestId;
+
+  const availableDepths = new Array(
+    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. */
@@ -222,106 +423,49 @@ function processTimelineEvent(
   /** Intermediate processor state. May be mutated. */
   state: ProcessorState,
 ) {
-  const {args, cat, name, ts, ph} = event;
-  switch (cat) {
-    case 'disabled-by-default-devtools.screenshot':
-      const encodedSnapshot = args.snapshot; // Base 64 encoded
-
-      const snapshot = {
-        height: 0,
-        image: null,
-        imageSource: `data:image/png;base64,${encodedSnapshot}`,
-        timestamp: (ts - currentProfilerData.startTime) / 1000,
-        width: 0,
-      };
-
-      // Delay processing until we've extracted snapshot dimensions.
-      let resolveFn = ((null: any): Function);
-      state.asyncProcessingPromises.push(
-        new Promise(resolve => {
-          resolveFn = resolve;
-        }),
-      );
+  const {cat, name, ts, ph} = event;
 
-      // 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 createImageBitmap
-          createImageBitmap(blob).then(bitmap => {
-            snapshot.height = bitmap.height;
-            snapshot.width = bitmap.width;
-
-            resolveFn();
-          });
-        });
+  const startTime = (ts - currentProfilerData.startTime) / 1000;
 
-      currentProfilerData.snapshots.push(snapshot);
+  switch (cat) {
+    case 'disabled-by-default-devtools.screenshot':
+      processScreenshot(event, startTime, currentProfilerData, state);
       break;
     case 'devtools.timeline':
-      if (name === 'EventDispatch') {
-        const type = args.data.type;
-
-        if (type.startsWith('react-')) {
-          const stackTrace = args.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 timestamp = (ts - currentProfilerData.startTime) / 1000;
-          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,
-          };
-
-          currentProfilerData.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);
-        }
+      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':
-      const startTime = (ts - currentProfilerData.startTime) / 1000;
-
       if (name.startsWith('--react-version-')) {
         const [reactVersion] = name.substr(16).split('-');
         currentProfilerData.reactVersion = reactVersion;
@@ -714,6 +858,7 @@ export default async function preprocessData(
     laneToLabelMap: new Map(),
     laneToReactMeasureMap,
     nativeEvents: [],
+    networkMeasures: [],
     otherUserTimingMarks: [],
     reactVersion: null,
     schedulingEvents: [],
@@ -759,6 +904,7 @@ export default async function preprocessData(
     potentialLongNestedUpdate: null,
     potentialLongNestedUpdates: [],
     potentialSuspenseEventsOutsideOfTransition: [],
+    requestIdToNetworkMeasureMap: new Map(),
     uidCounter: 0,
     unresolvedSuspenseEvents: new Map(),
   };
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 637d95714106..073f4e1fbff1 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -91,6 +91,19 @@ export type ReactMeasure = {|
   +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 ReactComponentMeasure = {|
   +componentName: string,
   duration: Milliseconds,
@@ -155,6 +168,7 @@ export type ReactProfilerData = {|
   laneToLabelMap: Map<ReactLane, string>,
   laneToReactMeasureMap: Map<ReactLane, ReactMeasure[]>,
   nativeEvents: NativeEvent[],
+  networkMeasures: NetworkMeasure[],
   otherUserTimingMarks: UserTimingMark[],
   reactVersion: string | null,
   schedulingEvents: SchedulingEvent[],
@@ -165,10 +179,10 @@ export type ReactProfilerData = {|
 
 export type ReactHoverContextInfo = {|
   componentMeasure: ReactComponentMeasure | null,
-  data: $ReadOnly<ReactProfilerData> | null,
   flamechartStackFrame: FlamechartStackFrame | null,
   measure: ReactMeasure | null,
   nativeEvent: NativeEvent | null,
+  networkMeasure: NetworkMeasure | null,
   schedulingEvent: SchedulingEvent | null,
   suspenseEvent: SuspenseEvent | null,
   snapshot: Snapshot | null,
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
index 5519599f12dc..2a998493eda1 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
@@ -156,7 +156,7 @@ export class HorizontalPanAndZoomView extends View {
       interaction.payload.location,
       this.frame,
     );
-    if (isHovered) {
+    if (isHovered && viewRefs.hoveredView === null) {
       viewRefs.hoveredView = this;
     }
 
@@ -169,9 +169,16 @@ export class HorizontalPanAndZoomView extends View {
     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: interaction.payload.event.movementX,
+      delta: movementX,
       containerLength: this.frame.size.width,
     });
     this._viewState.updateHorizontalScrollState(newState);
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
index 6cdaff1c6e75..2a5774db3197 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactHoverContextInfo} from '../types';
 import type {Interaction} from './useCanvasInteraction';
 import type {Size} from './geometry';
 
@@ -14,6 +15,7 @@ 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,
@@ -22,12 +24,10 @@ export type ViewRefs = {|
 
 // hidpi canvas: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
 function configureRetinaCanvas(canvas, height, width) {
-  const dpr: number = window.devicePixelRatio || 1;
-  canvas.width = width * dpr;
-  canvas.height = height * dpr;
+  canvas.width = width * DPR;
+  canvas.height = height * DPR;
   canvas.style.width = `${width}px`;
   canvas.style.height = `${height}px`;
-  return dpr;
 }
 
 const getCanvasContext = memoize(
@@ -39,14 +39,19 @@ const getCanvasContext = memoize(
   ): CanvasRenderingContext2D => {
     const context = canvas.getContext('2d', {alpha: false});
     if (scaleCanvas) {
-      const dpr = configureRetinaCanvas(canvas, height, width);
+      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);
+      context.scale(DPR, DPR);
     }
     return context;
   },
 );
 
+type ResetHoveredEventFn = (
+  partialState: $Shape<ReactHoverContextInfo>,
+) => void;
+
 /**
  * Represents the canvas surface and a view heirarchy. A surface is also the
  * place where all interactions enter the view heirarchy.
@@ -57,11 +62,17 @@ export class Surface {
   _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;
   }
@@ -107,12 +118,32 @@ export class Surface {
   }
 
   handleInteraction(interaction: Interaction) {
-    if (!this.rootView) {
-      return;
+    const rootView = this.rootView;
+    if (rootView != null) {
+      const viewRefs = this._viewRefs;
+      switch (interaction.type) {
+        case 'mousemove':
+          // Clean out the hovered view before processing a new mouse move 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;
+      }
     }
-    this.rootView.handleInteractionAndPropagateToSubviews(
-      interaction,
-      this._viewRefs,
-    );
   }
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
index a78e88425faa..d54907da1a8d 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
@@ -199,12 +199,20 @@ export class VerticalScrollView extends View {
     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;
   }
 
@@ -255,12 +263,14 @@ export class VerticalScrollView extends View {
   }
 
   _setScrollState(proposedState: ScrollState): boolean {
-    const height = this._contentView.frame.size.height;
+    const contentHeight = this._contentView.frame.size.height;
+    const containerHeight = this.frame.size.height;
+
     const clampedState = clampState({
       state: proposedState,
-      minContentLength: height,
-      maxContentLength: height,
-      containerLength: this.frame.size.height,
+      minContentLength: contentHeight,
+      maxContentLength: contentHeight,
+      containerLength: containerHeight,
     });
     if (!areScrollStatesEqual(clampedState, this._scrollState)) {
       this._scrollState.offset = clampedState.offset;
@@ -275,6 +285,13 @@ export class VerticalScrollView extends View {
       return true;
     }
 
-    return false;
+    // 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 fitst the contnet (no scrolling).
+    if (contentHeight === containerHeight) {
+      return false;
+    }
+
+    return true;
   }
 }
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 2476ce32839d..04962c204e28 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -141,6 +141,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-dot': '#333333',
     '--color-scheduling-profiler-native-event': '#ccc',
     '--color-scheduling-profiler-native-event-hover': '#aaa',
+    '--color-scheduling-profiler-network-primary': '#fcf3dc',
+    '--color-scheduling-profiler-network-primary-hover': '#f0e7d1',
+    '--color-scheduling-profiler-network-secondary': '#efc457',
+    '--color-scheduling-profiler-network-secondary-hover': '#e3ba52',
     '--color-scheduling-profiler-priority-background': '#f6f6f6',
     '--color-scheduling-profiler-priority-border': '#eeeeee',
     '--color-scheduling-profiler-user-timing': '#c9cacd',
@@ -276,6 +280,10 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-dot': '#cfd1d5',
     '--color-scheduling-profiler-native-event': '#b2b2b2',
     '--color-scheduling-profiler-native-event-hover': '#949494',
+    '--color-scheduling-profiler-network-primary': '#fcf3dc',
+    '--color-scheduling-profiler-network-primary-hover': '#e3dbc5',
+    '--color-scheduling-profiler-network-secondary': '#efc457',
+    '--color-scheduling-profiler-network-secondary-hover': '#d6af4d',
     '--color-scheduling-profiler-priority-background': '#1d2129',
     '--color-scheduling-profiler-priority-border': '#282c34',
     '--color-scheduling-profiler-user-timing': '#c9cacd',

From 6abda7f4f24a955aa79a145f91dafae2805735ad Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 18 Aug 2021 14:30:31 -0400
Subject: [PATCH 0775/1603] [DevTools] Access metadata in source maps correctly
 accounting for different formats (#22096)

## Summary

Follow up from https://github.com/facebook/react/pull/22010.

The initial implementation of named hooks and for looking up hook name metadata in an extended source map both assumed that the source maps would always have a `sources` field available, and didn't account for the source maps in the [Index Map](https://sourcemaps.info/spec.html#h.535es3xeprgt) format, which contain a list of `sections` and don't have the `source` field available directly.

In order to properly access metadata in extended source maps, this commit:

-  Adds a new `SourceMapMetadataConsumer` api, which is a fork / very similar in structure to the corresponding [consumer in Metro](https://github.com/facebook/metro/blob/2b44ec39b4bca93e3e1cf1f268b4be66f894924a/packages/metro-symbolicate/src/SourceMetadataMapConsumer.js#L56) (as specified by @motiz88 in https://github.com/facebook/react/issues/21782.
- Updates `parseHookNames` to use this new api

## Test Plan

- yarn flow
- yarn test
- yarn test-build-devtools
- added new regression tests covering the index map format
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).
---
 .../src/SourceMapMetadataConsumer.js          | 197 +++++++++++++
 .../src/SourceMapTypes.js                     |  10 +-
 .../src/SourceMapUtils.js                     |  34 +++
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../index-map/ComponentWithCustomHook.js      |  41 +++
 .../index-map/ComponentWithCustomHook.js.map  |   1 +
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../ComponentWithMultipleHooksPerLine.js.map  |   1 +
 .../index-map/ComponentWithNestedHooks.js     |  28 ++
 .../index-map/ComponentWithNestedHooks.js.map |   1 +
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../fb-sources-extended/index-map/Example.js  |  28 ++
 .../index-map/Example.js.map                  |   1 +
 .../index-map/InlineRequire.js                |  21 ++
 .../index-map/InlineRequire.js.map            |   1 +
 .../fb-sources-extended/index-map/ToDoList.js | 106 +++++++
 .../index-map/ToDoList.js.map                 |   1 +
 .../fb-sources-extended/index-map/index.js    |  89 ++++++
 .../index-map/index.js.map                    |   1 +
 .../fb-sources-extended/index-map/useTheme.js |  27 ++
 .../index-map/useTheme.js.map                 |   1 +
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../index-map/ComponentWithCustomHook.js      |  41 +++
 .../index-map/ComponentWithCustomHook.js.map  |   1 +
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../ComponentWithMultipleHooksPerLine.js.map  |   1 +
 .../index-map/ComponentWithNestedHooks.js     |  28 ++
 .../index-map/ComponentWithNestedHooks.js.map |   1 +
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../external/index-map/Example.js             |  28 ++
 .../external/index-map/Example.js.map         |   1 +
 .../external/index-map/InlineRequire.js       |  21 ++
 .../external/index-map/InlineRequire.js.map   |   1 +
 .../external/index-map/ToDoList.js            | 106 +++++++
 .../external/index-map/ToDoList.js.map        |   1 +
 .../__compiled__/external/index-map/index.js  |  89 ++++++
 .../external/index-map/index.js.map           |   1 +
 .../external/index-map/useTheme.js            |  27 ++
 .../external/index-map/useTheme.js.map        |   1 +
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../index-map/ComponentWithCustomHook.js      |  41 +++
 .../index-map/ComponentWithCustomHook.js.map  |   1 +
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../ComponentWithMultipleHooksPerLine.js.map  |   1 +
 .../index-map/ComponentWithNestedHooks.js     |  28 ++
 .../index-map/ComponentWithNestedHooks.js.map |   1 +
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../index-map/Example.js                      |  28 ++
 .../index-map/Example.js.map                  |   1 +
 .../index-map/InlineRequire.js                |  21 ++
 .../index-map/InlineRequire.js.map            |   1 +
 .../index-map/ToDoList.js                     | 106 +++++++
 .../index-map/ToDoList.js.map                 |   1 +
 .../react-sources-extended/index-map/index.js |  89 ++++++
 .../index-map/index.js.map                    |   1 +
 .../index-map/useTheme.js                     |  27 ++
 .../index-map/useTheme.js.map                 |   1 +
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../index-map/ComponentWithCustomHook.js      |  41 +++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../index-map/ComponentWithNestedHooks.js     |  28 ++
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../fb-sources-extended/index-map/Example.js  |  28 ++
 .../index-map/InlineRequire.js                |  21 ++
 .../fb-sources-extended/index-map/ToDoList.js | 106 +++++++
 .../fb-sources-extended/index-map/index.js    |  89 ++++++
 .../fb-sources-extended/index-map/useTheme.js |  27 ++
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../index-map/ComponentWithCustomHook.js      |  41 +++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../index-map/ComponentWithNestedHooks.js     |  28 ++
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../__compiled__/inline/index-map/Example.js  |  28 ++
 .../inline/index-map/InlineRequire.js         |  21 ++
 .../__compiled__/inline/index-map/ToDoList.js | 106 +++++++
 .../__compiled__/inline/index-map/index.js    |  89 ++++++
 .../__compiled__/inline/index-map/useTheme.js |  27 ++
 .../ComponentUsingHooksIndirectly.js          |  45 +++
 .../index-map/ComponentWithCustomHook.js      |  41 +++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |  30 ++
 .../index-map/ComponentWithNestedHooks.js     |  28 ++
 .../ContainingStringSourceMappingURL.js       |  29 ++
 .../index-map/Example.js                      |  28 ++
 .../index-map/InlineRequire.js                |  21 ++
 .../index-map/ToDoList.js                     | 106 +++++++
 .../react-sources-extended/index-map/index.js |  89 ++++++
 .../index-map/useTheme.js                     |  27 ++
 .../src/__tests__/parseHookNames-test.js      | 263 +++++++++++++++---
 .../src/__tests__/updateMockSourceMaps.js     | 126 ++++++++-
 .../src/parseHookNames/parseHookNames.js      | 182 +++++-------
 105 files changed, 3505 insertions(+), 160 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
 create mode 100644 packages/react-devtools-extensions/src/SourceMapUtils.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js
 create mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js

diff --git a/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js b/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
new file mode 100644
index 000000000000..e42fd9e0bc46
--- /dev/null
+++ b/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
@@ -0,0 +1,197 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @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/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@0.8.0-beta.0's SourceMapConsumer.
+ * By default, source names are normalized using the same logic that the
+ * `source-map@0.8.0-beta.0` 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;
+
+  // eslint-disable-next-line react-internal/no-primitive-constructors
+  source = String(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) {
+    if (source == null) {
+      return null;
+    }
+    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();
+      indexSourceMap.sections.forEach(section => {
+        const metadataMapForIndexMap = this._getMetadataObjectsBySourceNames(
+          section.map,
+        );
+        metadataMapForIndexMap.forEach((value, key) => {
+          metadataMap.set(key, value);
+        });
+      });
+      return metadataMap;
+    }
+
+    const 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-extensions/src/SourceMapTypes.js b/packages/react-devtools-extensions/src/SourceMapTypes.js
index 6e6d62580d2a..744cc7d30925 100644
--- a/packages/react-devtools-extensions/src/SourceMapTypes.js
+++ b/packages/react-devtools-extensions/src/SourceMapTypes.js
@@ -27,8 +27,8 @@ export type BasicSourceMap = {|
   +x_react_sources?: ReactSourcesArray,
 |};
 
-export type IndexMapSection = {
-  map: IndexMap | BasicSourceMap,
+export type IndexSourceMapSection = {
+  map: IndexSourceMap | BasicSourceMap,
   offset: {
     line: number,
     column: number,
@@ -37,14 +37,14 @@ export type IndexMapSection = {
   ...
 };
 
-export type IndexMap = {|
+export type IndexSourceMap = {|
   +file?: string,
   +mappings?: void, // avoids SourceMap being a disjoint union
   +sourcesContent?: void,
-  +sections: Array<IndexMapSection>,
+  +sections: Array<IndexSourceMapSection>,
   +version: number,
   +x_facebook_sources?: FBSourcesArray,
   +x_react_sources?: ReactSourcesArray,
 |};
 
-export type MixedSourceMap = IndexMap | BasicSourceMap;
+export type MixedSourceMap = IndexSourceMap | BasicSourceMap;
diff --git a/packages/react-devtools-extensions/src/SourceMapUtils.js b/packages/react-devtools-extensions/src/SourceMapUtils.js
new file mode 100644
index 000000000000..008a1821487e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/SourceMapUtils.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..6925712d17c7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 000000000000..376b695484d0
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..e326d7a4962d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
new file mode 100644
index 000000000000..a353f2d57c94
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..05aedb938b71
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 000000000000..205496418958
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..c657f3eb5455
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 000000000000..5ea03655141e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..3cfed69078a8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map
new file mode 100644
index 000000000000..0e464041fa29
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..0fc2c078ca12
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 000000000000..6dbada848ae7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
new file mode 100644
index 000000000000..19134738824b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
new file mode 100644
index 000000000000..bb88b19f6f3f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 000000000000..388aeda62b30
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map
new file mode 100644
index 000000000000..3e5f5eadbccd
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
new file mode 100644
index 000000000000..a6eb863b661f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
new file mode 100644
index 000000000000..ca334da52348
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
new file mode 100644
index 000000000000..a0f706b19fba
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map
new file mode 100644
index 000000000000..774200ec8e40
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
new file mode 100644
index 000000000000..95bb454253ec
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map
new file mode 100644
index 000000000000..53e07b1b9c3c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..6925712d17c7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 000000000000..4d9e81529d3d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..e326d7a4962d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
new file mode 100644
index 000000000000..420fcfb55606
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..05aedb938b71
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 000000000000..b4dbf9e15ec1
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..c657f3eb5455
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 000000000000..31ecd2d51adb
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..3cfed69078a8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map
new file mode 100644
index 000000000000..d73452228759
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..0fc2c078ca12
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 000000000000..7b95325ab179
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
new file mode 100644
index 000000000000..19134738824b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map
new file mode 100644
index 000000000000..16875ee93d81
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
new file mode 100644
index 000000000000..388aeda62b30
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map
new file mode 100644
index 000000000000..fb426f5709cf
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
new file mode 100644
index 000000000000..a6eb863b661f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
new file mode 100644
index 000000000000..af4b94acaccb
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js
new file mode 100644
index 000000000000..a0f706b19fba
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js.map
new file mode 100644
index 000000000000..d59810b5e2d7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js
new file mode 100644
index 000000000000..95bb454253ec
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map
new file mode 100644
index 000000000000..414389d32d04
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..6925712d17c7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
new file mode 100644
index 000000000000..30c31a58f809
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..e326d7a4962d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
new file mode 100644
index 000000000000..8a1b03d5ecb9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_react_sources":[[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}}]}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..05aedb938b71
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
new file mode 100644
index 000000000000..7ea1aae90dbd
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..c657f3eb5455
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
new file mode 100644
index 000000000000..0997c5427a1b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..3cfed69078a8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map
new file mode 100644
index 000000000000..76a6e4b84fd7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..0fc2c078ca12
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
new file mode 100644
index 000000000000..af99c1269ad9
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
new file mode 100644
index 000000000000..19134738824b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=Example.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
new file mode 100644
index 000000000000..db5732f03e8c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 000000000000..388aeda62b30
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count] = require('react').useState(0);
+
+  return count;
+}
+//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map
new file mode 100644
index 000000000000..226c9067d5af
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
new file mode 100644
index 000000000000..a6eb863b661f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
new file mode 100644
index 000000000000..6b8439351a94
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
new file mode 100644
index 000000000000..a0f706b19fba
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map
new file mode 100644
index 000000000000..ee8de07dd2b3
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
new file mode 100644
index 000000000000..95bb454253ec
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map
new file mode 100644
index 000000000000..e3faa6662447
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..28a330be5c3d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..2b884ae76bf6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..5e0f5e80aa1a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..e1a5c7634e41
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..ffb582426e5e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..44f936afc1da
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
new file mode 100644
index 000000000000..089cced4b731
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 000000000000..e9293ce11d4f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
new file mode 100644
index 000000000000..373a057298c1
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js
new file mode 100644
index 000000000000..59d6d5140c80
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js
new file mode 100644
index 000000000000..ea4be9035be5
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..9a692ae23722
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..864e75084321
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..2203d38c8009
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..622c40411ed6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..ecb11d4a9094
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..706ed20eea9c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js
new file mode 100644
index 000000000000..4d1ee2e349d7
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
new file mode 100644
index 000000000000..aadb2b3b5c9d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
new file mode 100644
index 000000000000..d509cfdb33ef
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/index.js
new file mode 100644
index 000000000000..4f1023a79fd6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
new file mode 100644
index 000000000000..e4c71f07ae71
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
new file mode 100644
index 000000000000..e873b766dc3d
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
new file mode 100644
index 000000000000..f930dc472bd8
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  const isDarkMode = useIsDarkMode();
+  (0, _react.useEffect)(() => {// ...
+  }, []);
+
+  const handleClick = () => setCount(count + 1);
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: handleClick
+  }, "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;
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
new file mode 100644
index 000000000000..3a70b896352c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const theme = (0, _useTheme.default)();
+  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
new file mode 100644
index 000000000000..b9e998a35baf
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js
new file mode 100644
index 000000000000..cde7af4fe5ab
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -0,0 +1,28 @@
+"use strict";
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const {
+  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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
new file mode 100644
index 000000000000..fe2aacab6f5a
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+// ?sourceMappingURL=([^\s'"]+)/gm
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
new file mode 100644
index 000000000000..f0aad76c791b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = Component;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function Component() {
+  const [count, setCount] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCount(count + 1)
+  }, "Click me"));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js
new file mode 100644
index 000000000000..d78461f7c35f
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
new file mode 100644
index 000000000000..f76552e16149
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListItem = ListItem;
+exports.List = List;
+
+var React = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+function 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", null, /*#__PURE__*/React.createElement("button", {
+    onClick: handleDelete
+  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+    checked: item.isComplete,
+    onChange: handleToggle,
+    type: "checkbox"
+  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+    type: "text",
+    placeholder: "New list item...",
+    value: newItemText,
+    onChange: handleChange,
+    onKeyPress: handleKeyPress
+  }), /*#__PURE__*/React.createElement("button", {
+    disabled: newItemText === '',
+    onClick: handleClick
+  }, /*#__PURE__*/React.createElement("span", {
+    role: "img",
+    "aria-label": "Add item"
+  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    key: item.id,
+    item: item,
+    removeItem: removeItem,
+    toggleItem: toggleItem
+  }))));
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js
new file mode 100644
index 000000000000..e1b808404583
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js
new file mode 100644
index 000000000000..ccef36349931
--- /dev/null
+++ b/packages/react-devtools-extensions/src/__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) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+const 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-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index 272f5ddf5a52..cd61bea06cd2 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -193,6 +193,8 @@ describe('parseHookNames', () => {
       await test('./__source__/Example'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/Example'); // inline source map
       await test('./__source__/__compiled__/external/Example'); // external source map
+      await test('./__source__/__compiled__/inline/index-map/Example'); // inline index map source map
+      await test('./__source__/__compiled__/external/index-map/Example'); // external index map source map
       await test('./__source__/__compiled__/bundle/index', 'Example'); // bundle source map
       await test('./__source__/__compiled__/no-columns/Example'); // simulated Webpack 'cheap-module-source-map'
     });
@@ -225,6 +227,8 @@ describe('parseHookNames', () => {
       await test('./__source__/ToDoList'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/ToDoList'); // inline source map
       await test('./__source__/__compiled__/external/ToDoList'); // external source map
+      await test('./__source__/__compiled__/inline/index-map/ToDoList'); // inline index map source map
+      await test('./__source__/__compiled__/external/index-map/ToDoList'); // external index map source map
       await test('./__source__/__compiled__/bundle', 'ToDoList'); // bundle source map
       await test('./__source__/__compiled__/no-columns/ToDoList'); // simulated Webpack 'cheap-module-source-map'
     });
@@ -243,6 +247,12 @@ describe('parseHookNames', () => {
       await test('./__source__/ComponentWithCustomHook'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/ComponentWithCustomHook'); // inline source map
       await test('./__source__/__compiled__/external/ComponentWithCustomHook'); // external source map
+      await test(
+        './__source__/__compiled__/inline/index-map/ComponentWithCustomHook',
+      ); // inline index map source map
+      await test(
+        './__source__/__compiled__/external/index-map/ComponentWithCustomHook',
+      ); // external index map source map
       await test('./__source__/__compiled__/bundle', 'ComponentWithCustomHook'); // bundle source map
       await test(
         './__source__/__compiled__/no-columns/ComponentWithCustomHook',
@@ -266,6 +276,12 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ComponentUsingHooksIndirectly',
       ); // external source map
+      await test(
+        './__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly',
+      ); // inline index map source map
+      await test(
+        './__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly',
+      ); // external index map source map
       await test(
         './__source__/__compiled__/bundle',
         'ComponentUsingHooksIndirectly',
@@ -295,6 +311,12 @@ describe('parseHookNames', () => {
 
       await test('./__source__/__compiled__/inline/ComponentWithNestedHooks'); // inline source map
       await test('./__source__/__compiled__/external/ComponentWithNestedHooks'); // external source map
+      await test(
+        './__source__/__compiled__/inline/index-map/ComponentWithNestedHooks',
+      ); // inline index map source map
+      await test(
+        './__source__/__compiled__/external/index-map/ComponentWithNestedHooks',
+      ); // external index map source map
       await test(
         './__source__/__compiled__/bundle',
         'ComponentWithNestedHooks',
@@ -323,6 +345,12 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ComponentWithExternalCustomHooks',
       ); // external source map
+      await test(
+        './__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks',
+      ); // inline index map source map
+      await test(
+        './__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks',
+      ); // external index map source map
       await test(
         './__source__/__compiled__/bundle',
         'ComponentWithExternalCustomHooks',
@@ -350,6 +378,12 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ComponentWithMultipleHooksPerLine',
       ); // external source map
+      await test(
+        './__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine',
+      ); // inline index map source map
+      await test(
+        './__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine',
+      ); // external index map source map
       await test(
         './__source__/__compiled__/bundle',
         'ComponentWithMultipleHooksPerLine',
@@ -389,6 +423,8 @@ describe('parseHookNames', () => {
       await test('./__source__/InlineRequire'); // original source (uncompiled)
       await test('./__source__/__compiled__/inline/InlineRequire'); // inline source map
       await test('./__source__/__compiled__/external/InlineRequire'); // external source map
+      await test('./__source__/__compiled__/inline/index-map/InlineRequire'); // inline index map source map
+      await test('./__source__/__compiled__/external/index-map/InlineRequire'); // external index map source map
       await test('./__source__/__compiled__/bundle', 'InlineRequire'); // bundle source map
       await test('./__source__/__compiled__/no-columns/InlineRequire'); // simulated Webpack 'cheap-module-source-map'
     });
@@ -412,6 +448,12 @@ describe('parseHookNames', () => {
       await test(
         './__source__/__compiled__/external/ContainingStringSourceMappingURL',
       ); // external source map
+      await test(
+        './__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL',
+      ); // inline index map source map
+      await test(
+        './__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL',
+      ); // external index map source map
       await test(
         './__source__/__compiled__/bundle',
         'ContainingStringSourceMappingURL',
@@ -423,21 +465,11 @@ describe('parseHookNames', () => {
   });
 
   describe('extended source maps', () => {
-    let parseMock;
-
     beforeEach(() => {
-      parseMock = jest.fn();
-      jest.mock('@babel/parser', () => {
-        const actual = jest.requireActual('@babel/parser');
-        const parse = (...args) => {
-          parseMock();
-          return actual.parse(...args);
-        };
-        return {
-          parse,
-          ...actual,
-        };
-      });
+      const babelParser = require('@babel/parser');
+      const generateHookMapModule = require('../generateHookMap');
+      jest.spyOn(babelParser, 'parse');
+      jest.spyOn(generateHookMapModule, 'decodeHookMap');
     });
 
     it('should work for simple components', async () => {
@@ -447,22 +479,37 @@ describe('parseHookNames', () => {
         expectHookNamesToEqual(hookNames, [
           'count', // useState
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
       }
 
-      await test('./__source__/Example'); // original source (uncompiled)
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/Example',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/Example',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/Example',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/Example',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/Example',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/Example',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/Example',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -490,22 +537,37 @@ describe('parseHookNames', () => {
           'handleToggle', // useCallback
         ]);
 
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
       }
 
-      await test('./__source__/ToDoList'); // original source (uncompiled)
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/ToDoList',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/ToDoList',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/ToDoList',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/ToDoList',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -518,22 +580,37 @@ describe('parseHookNames', () => {
           'isDarkMode', // useIsDarkMode()
           'isDarkMode', // useIsDarkMode -> useState()
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
       }
 
-      await test('./__source__/ComponentWithCustomHook'); // original source (uncompiled)
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -546,21 +623,37 @@ describe('parseHookNames', () => {
           'darkMode', // useDarkMode()
           'isDarkMode', // useState()
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
       }
 
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -580,21 +673,37 @@ describe('parseHookNames', () => {
         expectHookNamesToEqual(innerHookNames, [
           'state', // useState()
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
       }
 
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -606,7 +715,8 @@ describe('parseHookNames', () => {
           'theme', // useTheme()
           'theme', // useContext()
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        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,
@@ -614,16 +724,31 @@ describe('parseHookNames', () => {
 
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -637,21 +762,37 @@ describe('parseHookNames', () => {
           'c', // useContext()
           'd', // useContext()
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
       }
 
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -665,22 +806,37 @@ describe('parseHookNames', () => {
         expectHookNamesToEqual(hookNames, [
           'count', // useState()
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
+        expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
       }
 
-      await test('./__source__/InlineRequire'); // original source (uncompiled)
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/InlineRequire',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/InlineRequire',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/InlineRequire',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/InlineRequire',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
 
@@ -691,25 +847,40 @@ describe('parseHookNames', () => {
         expectHookNamesToEqual(hookNames, [
           'count', // useState()
         ]);
-        expect(parseMock).toHaveBeenCalledTimes(0);
+        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 test('./__source__/ContainingStringSourceMappingURL'); // original source (uncompiled)
       await test(
         './__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL',
-      ); // x_fb_sources extended inline source map
+      ); // x_facebook_sources extended inline source map
       await test(
         './__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL',
-      ); // x_fb_sources extended external source map
+      ); // x_facebook_sources extended external source map
       await test(
         './__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL',
       ); // x_react_sources extended inline source map
       await test(
         './__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL',
       ); // x_react_sources extended external source map
+
+      // Using index map format for source maps
+      await test(
+        './__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL',
+      ); // x_facebook_sources extended inline index map source map
+      await test(
+        './__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL',
+      ); // x_facebook_sources extended external index map source map
+      await test(
+        './__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL',
+      ); // x_react_sources extended inline index map source map
+      await test(
+        './__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
     });
   });
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
index 48f947dfec11..7af2a949067c 100644
--- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -24,11 +24,21 @@ 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',
@@ -37,6 +47,14 @@ const externalReactSourcesExtendedDir = resolve(
   externalDir,
   'react-sources-extended',
 );
+const inlineReactSourcesIndexMapExtendedDir = resolve(
+  inlineReactSourcesExtendedDir,
+  'index-map',
+);
+const externalReactSourcesIndexMapExtendedDir = resolve(
+  externalReactSourcesExtendedDir,
+  'index-map',
+);
 
 // Remove previous builds
 emptyDirSync(buildRoot);
@@ -44,10 +62,16 @@ 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');
@@ -124,8 +148,44 @@ function compile(fileName) {
     'utf8',
   );
 
-  // Generate compiled output with an extended sourcemap that
-  // includes a map of hook names.
+  // 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`,
+    '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'],
@@ -139,12 +199,38 @@ function compile(fileName) {
     // 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(
@@ -164,6 +250,24 @@ function compile(fileName) {
     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`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalFbSourcesIndexMapExtendedDir, `${fileName}.map`),
+    JSON.stringify(fbSourcesExtendedIndexMap),
+    'utf8',
+  );
 
   // Using the x_react_sources field
   writeFileSync(
@@ -183,6 +287,24 @@ function compile(fileName) {
     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`,
+    'utf8',
+  );
+  writeFileSync(
+    resolve(externalReactSourcesIndexMapExtendedDir, `${fileName}.map`),
+    JSON.stringify(reactSourcesExtendedIndexMap),
+    'utf8',
+  );
 }
 
 async function bundle() {
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index edaf1a5e0ea1..9f1faa8aafd2 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -14,11 +14,9 @@ import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
-import {decodeHookMap} from '../generateHookMap';
-import {getHookNameForLocation} from '../getHookNameForLocation';
+import {sourceMapIncludesSource} from '../SourceMapUtils';
+import {SourceMapMetadataConsumer} from '../SourceMapMetadataConsumer';
 
-import type {MixedSourceMap} from '../SourceMapTypes';
-import type {HookMap} from '../generateHookMap';
 import type {
   HooksNode,
   HookSource,
@@ -30,18 +28,16 @@ import type {SourceConsumer} from '../astUtils';
 
 const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const MAX_SOURCE_LENGTH = 100_000_000;
-const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
-const FB_SOURCES_EXTENSION_KEY = 'x_facebook_sources';
 
 type AST = mixed;
 
 type HookSourceData = {|
-  // Hook map extracted from extended source map
-  hookMap: HookMap | null,
-
   // Generated by react-debug-tools.
   hookSource: HookSource,
 
+  // 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,
 
@@ -68,6 +64,7 @@ type HookSourceData = {|
 
 type CachedRuntimeCodeMetadata = {|
   sourceConsumer: SourceConsumer | null,
+  metadataConsumer: SourceMapMetadataConsumer | null,
 |};
 
 const runtimeURLToMetadataCache: LRUCache<
@@ -137,8 +134,8 @@ export async function parseHookNames(
       const runtimeSourceURL = ((hookSource.fileName: any): string);
 
       const hookSourceData: HookSourceData = {
-        hookMap: null,
         hookSource,
+        metadataConsumer: null,
         originalSourceAST: null,
         originalSourceCode: null,
         originalSourceURL: null,
@@ -162,6 +159,7 @@ export async function parseHookNames(
           console.groupEnd();
         }
         hookSourceData.sourceConsumer = runtimeMetadata.sourceConsumer;
+        hookSourceData.metadataConsumer = runtimeMetadata.metadataConsumer;
       }
 
       locationKeyToHookSourceData.set(locationKey, hookSourceData);
@@ -213,8 +211,11 @@ function extractAndLoadSourceMaps(
 
   const setPromises = [];
   locationKeyToHookSourceData.forEach(hookSourceData => {
-    if (hookSourceData.sourceConsumer != null) {
-      // Use cached source map consumer.
+    if (
+      hookSourceData.sourceConsumer != null &&
+      hookSourceData.metadataConsumer != null
+    ) {
+      // Use cached source map and metadata consumers.
       return;
     }
 
@@ -230,8 +231,8 @@ function extractAndLoadSourceMaps(
       for (let i = 0; i < sourceMappingURLs.length; i++) {
         const {runtimeSourceURL} = hookSourceData;
         const sourceMappingURL = sourceMappingURLs[i];
-        const index = sourceMappingURL.indexOf('base64,');
-        if (index >= 0) {
+        const hasInlineSourceMap = sourceMappingURL.indexOf('base64,') >= 0;
+        if (hasInlineSourceMap) {
           // 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.
 
@@ -254,16 +255,10 @@ function extractAndLoadSourceMaps(
 
           // 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"
-          const sourceIndex = parsed.sources.findIndex(
-            source =>
-              source === 'Inline Babel script' ||
-              runtimeSourceURL.endsWith(source),
-          );
-          if (sourceIndex !== -1) {
-            const hookMap = extractHookMapFromSourceMap(parsed, sourceIndex);
-            if (hookMap != null) {
-              hookSourceData.hookMap = hookMap;
-            }
+          if (sourceMapIncludesSource(parsed, runtimeSourceURL)) {
+            hookSourceData.metadataConsumer = new SourceMapMetadataConsumer(
+              parsed,
+            );
             setPromises.push(
               new SourceMapConsumer(parsed).then(sourceConsumer => {
                 hookSourceData.sourceConsumer = sourceConsumer;
@@ -304,19 +299,10 @@ function extractAndLoadSourceMaps(
             fetchFile(url).then(
               sourceMapContents => {
                 const parsed = JSON.parse(sourceMapContents);
-                const sourceIndex = parsed.sources.findIndex(source =>
-                  runtimeSourceURL.endsWith(source),
-                );
-                if (sourceIndex !== -1) {
-                  const hookMap = extractHookMapFromSourceMap(
-                    parsed,
-                    sourceIndex,
-                  );
-                  if (hookMap != null) {
-                    hookSourceData.hookMap = hookMap;
-                  }
-                }
-                return new SourceMapConsumer(parsed);
+                return new SourceMapConsumer(parsed).then(sourceConsumer => ({
+                  sourceConsumer,
+                  metadataConsumer: new SourceMapMetadataConsumer(parsed),
+                }));
               },
               // 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,
@@ -334,8 +320,10 @@ function extractAndLoadSourceMaps(
 
           fetchPromises.set(url, fetchPromise);
           setPromises.push(
-            fetchPromise.then(sourceConsumer => {
-              hookSourceData.sourceConsumer = sourceConsumer;
+            fetchPromise.then(result => {
+              hookSourceData.metadataConsumer =
+                result?.metadataConsumer ?? null;
+              hookSourceData.sourceConsumer = result?.sourceConsumer ?? null;
             }),
           );
           break;
@@ -404,7 +392,7 @@ function findHookNames(
       return null; // Should not be reachable.
     }
 
-    const sourceConsumer = hookSourceData.sourceConsumer;
+    const {originalSourceURL, sourceConsumer} = hookSourceData;
 
     let originalSourceColumnNumber;
     let originalSourceLineNumber;
@@ -435,22 +423,24 @@ function findHookNames(
     }
 
     if (
-      originalSourceLineNumber === null ||
-      originalSourceColumnNumber === null
+      originalSourceLineNumber == null ||
+      originalSourceColumnNumber == null ||
+      originalSourceURL == null
     ) {
       return null;
     }
 
     let name;
-    if (hookSourceData.hookMap != null) {
-      name = getHookNameForLocation(
-        {
-          line: originalSourceLineNumber,
-          column: originalSourceColumnNumber,
-        },
-        hookSourceData.hookMap,
-      );
-    } else {
+    const {metadataConsumer} = hookSourceData;
+    if (metadataConsumer != null) {
+      name = metadataConsumer.hookNameFor({
+        line: originalSourceLineNumber,
+        column: originalSourceColumnNumber,
+        source: originalSourceURL,
+      });
+    }
+
+    if (name == null) {
       name = getHookName(
         hook,
         hookSourceData.originalSourceAST,
@@ -513,16 +503,12 @@ async function parseSourceAST(
       // Use cached metadata.
       return;
     }
-    if (hookSourceData.hookMap != null) {
-      // 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;
-    }
 
-    const {sourceConsumer} = hookSourceData;
+    const {metadataConsumer, sourceConsumer} = hookSourceData;
     const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
-    let originalSourceURL, originalSourceCode;
+    let hasHookMap = false;
+    let originalSourceURL;
+    let originalSourceCode;
     if (sourceConsumer !== null) {
       // Parse and extract the AST from the source map.
       const {lineNumber, columnNumber} = hookSourceData.hookSource;
@@ -563,6 +549,13 @@ async function parseSourceAST(
         console.log(originalSourceCode);
         console.groupEnd();
       }
+
+      if (
+        metadataConsumer != null &&
+        metadataConsumer.hasHookMap(originalSourceURL)
+      ) {
+        hasHookMap = true;
+      }
     } else {
       // There's no source map to parse here so we can just parse the original source itself.
       originalSourceCode = runtimeSourceCode;
@@ -574,6 +567,13 @@ async function parseSourceAST(
     hookSourceData.originalSourceCode = originalSourceCode;
     hookSourceData.originalSourceURL = originalSourceURL;
 
+    if (hasHookMap) {
+      // 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;
+    }
+
     // 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);
@@ -645,58 +645,26 @@ function isUnnamedBuiltInHook(hook: HooksNode) {
 function updateLruCache(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
 ): Promise<*> {
-  locationKeyToHookSourceData.forEach(({sourceConsumer, runtimeSourceURL}) => {
-    // Only set once to avoid triggering eviction/cleanup code.
-    if (!runtimeURLToMetadataCache.has(runtimeSourceURL)) {
-      if (__DEBUG__) {
-        console.log(
-          `updateLruCache() Caching runtime metadata for "${runtimeSourceURL}"`,
-        );
-      }
+  locationKeyToHookSourceData.forEach(
+    ({metadataConsumer, sourceConsumer, runtimeSourceURL}) => {
+      // Only set once to avoid triggering eviction/cleanup code.
+      if (!runtimeURLToMetadataCache.has(runtimeSourceURL)) {
+        if (__DEBUG__) {
+          console.log(
+            `updateLruCache() Caching runtime metadata for "${runtimeSourceURL}"`,
+          );
+        }
 
-      runtimeURLToMetadataCache.set(runtimeSourceURL, {
-        sourceConsumer,
-      });
-    }
-  });
+        runtimeURLToMetadataCache.set(runtimeSourceURL, {
+          metadataConsumer,
+          sourceConsumer,
+        });
+      }
+    },
+  );
   return Promise.resolve();
 }
 
-function extractHookMapFromSourceMap(
-  sourcemap: MixedSourceMap,
-  sourceIndex: number,
-): HookMap | null {
-  let reactMetadataForSource;
-  if (
-    sourcemap.hasOwnProperty(REACT_SOURCES_EXTENSION_KEY) &&
-    sourcemap[REACT_SOURCES_EXTENSION_KEY] != null
-  ) {
-    // When using the x_react_sources extension field, the first item
-    // for a given source is reserved for the Hook Map, which is why
-    // we look up the index at position 0.
-    reactMetadataForSource =
-      sourcemap[REACT_SOURCES_EXTENSION_KEY][sourceIndex];
-  } else if (
-    sourcemap.hasOwnProperty(FB_SOURCES_EXTENSION_KEY) &&
-    sourcemap[FB_SOURCES_EXTENSION_KEY] != null
-  ) {
-    // 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, which is why we look up the index at position 1.
-    const fbMetadataForSource =
-      sourcemap[FB_SOURCES_EXTENSION_KEY][sourceIndex];
-    reactMetadataForSource =
-      fbMetadataForSource != null ? fbMetadataForSource[1] : null;
-  }
-  const hookMap =
-    reactMetadataForSource != null ? reactMetadataForSource[0] : null;
-  if (hookMap != null) {
-    return decodeHookMap(hookMap);
-  }
-  return null;
-}
-
 export function purgeCachedMetadata(): void {
   originalURLToMetadataCache.reset();
   runtimeURLToMetadataCache.reset();

From 7ed0706d7ec9907e8fd19c4cf0e8625733cf2a1c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 18 Aug 2021 21:50:02 +0100
Subject: [PATCH 0776/1603] Remove the warning for setState on unmounted
 components (#22114)

* Remove warning for setState on unmounted components

* Trigger CI
---
 .../__tests__/ReactCompositeComponent-test.js |  28 +----
 .../src/ReactFiberWorkLoop.new.js             | 103 ------------------
 .../src/ReactFiberWorkLoop.old.js             | 103 ------------------
 .../ReactHooksWithNoopRenderer-test.js        |  69 ++----------
 4 files changed, 12 insertions(+), 291 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
index 1c02667d7bc9..d4eec830da3a 100644
--- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js
@@ -307,7 +307,7 @@ describe('ReactCompositeComponent', () => {
     ReactDOM.render(<MyComponent />, container2);
   });
 
-  it('should warn about `forceUpdate` on unmounted components', () => {
+  it('should not warn about `forceUpdate` on unmounted components', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -325,19 +325,11 @@ describe('ReactCompositeComponent', () => {
 
     ReactDOM.unmountComponentAtNode(container);
 
-    expect(() => instance.forceUpdate()).toErrorDev(
-      "Warning: Can't perform a React state update on an unmounted " +
-        'component. This is a no-op, but it indicates a memory leak in your ' +
-        'application. To fix, cancel all subscriptions and asynchronous ' +
-        'tasks in the componentWillUnmount method.\n' +
-        '    in Component (at **)',
-    );
-
-    // No additional warning should be recorded
+    instance.forceUpdate();
     instance.forceUpdate();
   });
 
-  it('should warn about `setState` on unmounted components', () => {
+  it('should not warn about `setState` on unmounted components', () => {
     const container = document.createElement('div');
     document.body.appendChild(container);
 
@@ -365,22 +357,10 @@ describe('ReactCompositeComponent', () => {
     expect(renders).toBe(1);
 
     instance.setState({value: 1});
-
     expect(renders).toBe(2);
 
     ReactDOM.render(<div />, container);
-
-    expect(() => {
-      instance.setState({value: 2});
-    }).toErrorDev(
-      "Warning: Can't perform a React state update on an unmounted " +
-        'component. This is a no-op, but it indicates a memory leak in your ' +
-        'application. To fix, cancel all subscriptions and asynchronous ' +
-        'tasks in the componentWillUnmount method.\n' +
-        '    in Component (at **)\n' +
-        '    in span',
-    );
-
+    instance.setState({value: 2});
     expect(renders).toBe(2);
   });
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 065d17fcc753..7797448a82e9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -12,7 +12,6 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
-import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Flags} from './ReactFiberFlags';
 
 import {
@@ -53,10 +52,6 @@ import {
   scheduleSyncCallback,
   scheduleLegacySyncCallback,
 } from './ReactFiberSyncTaskQueue.new';
-import {
-  NoFlags as NoHookEffect,
-  Passive as HookPassive,
-} from './ReactHookEffectTags';
 import {
   logCommitStarted,
   logCommitStopped,
@@ -119,7 +114,6 @@ import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
   Placement,
-  PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
@@ -344,10 +338,6 @@ let nestedPassiveUpdateCount: number = 0;
 let currentEventTime: number = NoTimestamp;
 let currentEventTransitionLane: Lanes = NoLanes;
 
-// Dev only flag that tracks if passive effects are currently being flushed.
-// We warn about state updates for unmounted components differently in this case.
-let isFlushingPassiveEffects = false;
-
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -454,7 +444,6 @@ export function scheduleUpdateOnFiber(
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
-    warnAboutUpdateOnUnmountedFiberInDEV(fiber);
     return null;
   }
 
@@ -2048,10 +2037,6 @@ function flushPassiveEffectsImpl() {
     markPassiveEffectsStarted(lanes);
   }
 
-  if (__DEV__) {
-    isFlushingPassiveEffects = true;
-  }
-
   const prevExecutionContext = executionContext;
   executionContext |= CommitContext;
 
@@ -2068,10 +2053,6 @@ function flushPassiveEffectsImpl() {
     }
   }
 
-  if (__DEV__) {
-    isFlushingPassiveEffects = false;
-  }
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logPassiveEffectsStopped();
@@ -2503,90 +2484,6 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
   }
 }
 
-let didWarnStateUpdateForUnmountedComponent: Set<string> | null = null;
-function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
-  if (__DEV__) {
-    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;
-    }
-
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      const updateQueue: FunctionComponentUpdateQueue | null = (fiber.updateQueue: any);
-      if (updateQueue !== null) {
-        const lastEffect = updateQueue.lastEffect;
-        if (lastEffect !== null) {
-          const firstEffect = lastEffect.next;
-
-          let effect = firstEffect;
-          do {
-            if (effect.destroy !== undefined) {
-              if ((effect.tag & HookPassive) !== NoHookEffect) {
-                return;
-              }
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
-        }
-      }
-    }
-    // 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 (didWarnStateUpdateForUnmountedComponent !== null) {
-      if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {
-        return;
-      }
-      didWarnStateUpdateForUnmountedComponent.add(componentName);
-    } else {
-      didWarnStateUpdateForUnmountedComponent = new Set([componentName]);
-    }
-
-    if (isFlushingPassiveEffects) {
-      // Do not warn if we are currently flushing passive effects!
-      //
-      // React can't directly detect a memory leak, but there are some clues that warn about one.
-      // One of these clues is when an unmounted React component tries to update its state.
-      // For example, if a component forgets to remove an event listener when unmounting,
-      // that listener may be called later and try to update state,
-      // at which point React would warn about the potential leak.
-      //
-      // Warning signals are the most useful when they're strong.
-      // (So we should avoid false positive warnings.)
-      // Updating state from within an effect cleanup function is sometimes a necessary pattern, e.g.:
-      // 1. Updating an ancestor that a component had registered itself with on mount.
-      // 2. Resetting state when a component is hidden after going offscreen.
-    } else {
-      const previousFiber = ReactCurrentFiberCurrent;
-      try {
-        setCurrentDebugFiberInDEV(fiber);
-        console.error(
-          "Can't perform a React state update on an unmounted component. This " +
-            'is a no-op, but it indicates a memory leak in your application. To ' +
-            'fix, cancel all subscriptions and asynchronous tasks in %s.',
-          tag === ClassComponent
-            ? 'the componentWillUnmount method'
-            : 'a useEffect cleanup function',
-        );
-      } finally {
-        if (previousFiber) {
-          setCurrentDebugFiberInDEV(fiber);
-        } else {
-          resetCurrentDebugFiberInDEV();
-        }
-      }
-    }
-  }
-}
-
 let beginWork;
 if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
   const dummyFiber = null;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 710e853ce4fd..163692456231 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -12,7 +12,6 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {StackCursor} from './ReactFiberStack.old';
-import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Flags} from './ReactFiberFlags';
 
 import {
@@ -53,10 +52,6 @@ import {
   scheduleSyncCallback,
   scheduleLegacySyncCallback,
 } from './ReactFiberSyncTaskQueue.old';
-import {
-  NoFlags as NoHookEffect,
-  Passive as HookPassive,
-} from './ReactHookEffectTags';
 import {
   logCommitStarted,
   logCommitStopped,
@@ -119,7 +114,6 @@ import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
   Placement,
-  PassiveStatic,
   Incomplete,
   HostEffectMask,
   Hydrating,
@@ -344,10 +338,6 @@ let nestedPassiveUpdateCount: number = 0;
 let currentEventTime: number = NoTimestamp;
 let currentEventTransitionLane: Lanes = NoLanes;
 
-// Dev only flag that tracks if passive effects are currently being flushed.
-// We warn about state updates for unmounted components differently in this case.
-let isFlushingPassiveEffects = false;
-
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -454,7 +444,6 @@ export function scheduleUpdateOnFiber(
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
-    warnAboutUpdateOnUnmountedFiberInDEV(fiber);
     return null;
   }
 
@@ -2048,10 +2037,6 @@ function flushPassiveEffectsImpl() {
     markPassiveEffectsStarted(lanes);
   }
 
-  if (__DEV__) {
-    isFlushingPassiveEffects = true;
-  }
-
   const prevExecutionContext = executionContext;
   executionContext |= CommitContext;
 
@@ -2068,10 +2053,6 @@ function flushPassiveEffectsImpl() {
     }
   }
 
-  if (__DEV__) {
-    isFlushingPassiveEffects = false;
-  }
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logPassiveEffectsStopped();
@@ -2503,90 +2484,6 @@ function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
   }
 }
 
-let didWarnStateUpdateForUnmountedComponent: Set<string> | null = null;
-function warnAboutUpdateOnUnmountedFiberInDEV(fiber) {
-  if (__DEV__) {
-    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;
-    }
-
-    if ((fiber.flags & PassiveStatic) !== NoFlags) {
-      const updateQueue: FunctionComponentUpdateQueue | null = (fiber.updateQueue: any);
-      if (updateQueue !== null) {
-        const lastEffect = updateQueue.lastEffect;
-        if (lastEffect !== null) {
-          const firstEffect = lastEffect.next;
-
-          let effect = firstEffect;
-          do {
-            if (effect.destroy !== undefined) {
-              if ((effect.tag & HookPassive) !== NoHookEffect) {
-                return;
-              }
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
-        }
-      }
-    }
-    // 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 (didWarnStateUpdateForUnmountedComponent !== null) {
-      if (didWarnStateUpdateForUnmountedComponent.has(componentName)) {
-        return;
-      }
-      didWarnStateUpdateForUnmountedComponent.add(componentName);
-    } else {
-      didWarnStateUpdateForUnmountedComponent = new Set([componentName]);
-    }
-
-    if (isFlushingPassiveEffects) {
-      // Do not warn if we are currently flushing passive effects!
-      //
-      // React can't directly detect a memory leak, but there are some clues that warn about one.
-      // One of these clues is when an unmounted React component tries to update its state.
-      // For example, if a component forgets to remove an event listener when unmounting,
-      // that listener may be called later and try to update state,
-      // at which point React would warn about the potential leak.
-      //
-      // Warning signals are the most useful when they're strong.
-      // (So we should avoid false positive warnings.)
-      // Updating state from within an effect cleanup function is sometimes a necessary pattern, e.g.:
-      // 1. Updating an ancestor that a component had registered itself with on mount.
-      // 2. Resetting state when a component is hidden after going offscreen.
-    } else {
-      const previousFiber = ReactCurrentFiberCurrent;
-      try {
-        setCurrentDebugFiberInDEV(fiber);
-        console.error(
-          "Can't perform a React state update on an unmounted component. This " +
-            'is a no-op, but it indicates a memory leak in your application. To ' +
-            'fix, cancel all subscriptions and asynchronous tasks in %s.',
-          tag === ClassComponent
-            ? 'the componentWillUnmount method'
-            : 'a useEffect cleanup function',
-        );
-      } finally {
-        if (previousFiber) {
-          setCurrentDebugFiberInDEV(fiber);
-        } else {
-          resetCurrentDebugFiberInDEV();
-        }
-      }
-    }
-  }
-}
-
 let beginWork;
 if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
   const dummyFiber = null;
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 8fe9b19815eb..1cb098f93b7a 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -360,7 +360,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(firstUpdater).toBe(secondUpdater);
     });
 
-    it('warns on set after unmount', () => {
+    it('does not warn on set after unmount', () => {
       let _updateCount;
       function Counter(props, ref) {
         const [, updateCount] = useState(0);
@@ -372,49 +372,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toFlushWithoutYielding();
       ReactNoop.render(null);
       expect(Scheduler).toFlushWithoutYielding();
-      expect(() => act(() => _updateCount(1))).toErrorDev(
-        "Warning: Can't perform a React state update on an unmounted " +
-          'component. This is a no-op, but it indicates a memory leak in your ' +
-          'application. To fix, cancel all subscriptions and asynchronous ' +
-          'tasks in a useEffect cleanup function.\n' +
-          '    in Counter (at **)',
-      );
-    });
-
-    it('dedupes the warning by component name', () => {
-      let _updateCountA;
-      function CounterA(props, ref) {
-        const [, updateCount] = useState(0);
-        _updateCountA = updateCount;
-        return null;
-      }
-      let _updateCountB;
-      function CounterB(props, ref) {
-        const [, updateCount] = useState(0);
-        _updateCountB = updateCount;
-        return null;
-      }
-
-      ReactNoop.render([<CounterA key="A" />, <CounterB key="B" />]);
-      expect(Scheduler).toFlushWithoutYielding();
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(() => act(() => _updateCountA(1))).toErrorDev(
-        "Warning: Can't perform a React state update on an unmounted " +
-          'component. This is a no-op, but it indicates a memory leak in your ' +
-          'application. To fix, cancel all subscriptions and asynchronous ' +
-          'tasks in a useEffect cleanup function.\n' +
-          '    in CounterA (at **)',
-      );
-      // already cached so this logs no error
-      act(() => _updateCountA(2));
-      expect(() => act(() => _updateCountB(1))).toErrorDev(
-        "Warning: Can't perform a React state update on an unmounted " +
-          'component. This is a no-op, but it indicates a memory leak in your ' +
-          'application. To fix, cancel all subscriptions and asynchronous ' +
-          'tasks in a useEffect cleanup function.\n' +
-          '    in CounterB (at **)',
-      );
+      act(() => _updateCount(1));
     });
 
     it('works with memo', () => {
@@ -1401,7 +1359,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    it('warns about state updates for unmounted components with no pending passive unmounts', () => {
+    it('does not warn about state updates for unmounted components with no pending passive unmounts', () => {
       let completePendingRequest = null;
       function Component() {
         Scheduler.unstable_yieldValue('Component');
@@ -1432,13 +1390,11 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(Scheduler).toFlushAndYieldThrough(['layout destroy']);
 
         // Simulate an XHR completing.
-        expect(completePendingRequest).toErrorDev(
-          "Warning: Can't perform a React state update on an unmounted component.",
-        );
+        completePendingRequest();
       });
     });
 
-    it('still warns if there are pending passive unmount effects but not for the current fiber', () => {
+    it('does not warn if there are pending passive unmount effects but not for the current fiber', () => {
       let completePendingRequest = null;
       function ComponentWithXHR() {
         Scheduler.unstable_yieldValue('Component');
@@ -1492,13 +1448,11 @@ describe('ReactHooksWithNoopRenderer', () => {
         expect(Scheduler).toFlushAndYieldThrough(['a:layout destroy']);
 
         // Simulate an XHR completing in the component without a pending passive effect..
-        expect(completePendingRequest).toErrorDev(
-          "Warning: Can't perform a React state update on an unmounted component.",
-        );
+        completePendingRequest();
       });
     });
 
-    it('warns if there are updates after pending passive unmount effects have been flushed', () => {
+    it('does not warn if there are updates after pending passive unmount effects have been flushed', () => {
       let updaterFunction;
 
       function Component() {
@@ -1529,14 +1483,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toFlushAndYield(['passive destroy']);
 
       act(() => {
-        expect(() => {
-          updaterFunction(true);
-        }).toErrorDev(
-          "Warning: Can't perform a React state update on an unmounted component. " +
-            'This is a no-op, but it indicates a memory leak in your application. ' +
-            'To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.\n' +
-            '    in Component (at **)',
-        );
+        updaterFunction(true);
       });
     });
 

From f1db9c30cc42b4fa8df748a31180b2a68f563e0f Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 18 Aug 2021 18:17:29 -0400
Subject: [PATCH 0777/1603] [DevTools] Support object destructuring pattern
 without runtime errors (#22128)

## Summary

Before this commit, if a hook returned an object and we declared a variable using object destructuring on the returned value, we would produce a runtime error. This was detected via internal testing.

This commit fixes that and adds regression tests.


## Test Plan

- yarn flow
- yarn test
- yarn test-build-devtools
- added new regression tests
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).
---
 .../src/SourceMapMetadataConsumer.js               |  4 ++--
 .../__source__/ComponentWithCustomHook.js          |  9 ++++++++-
 .../__source__/__compiled__/bundle/index.js        | 12 +++++++++++-
 .../__source__/__compiled__/bundle/index.js.map    |  2 +-
 .../external/ComponentWithCustomHook.js            | 12 +++++++++++-
 .../external/ComponentWithCustomHook.js.map        |  2 +-
 .../fb-sources-extended/ComponentWithCustomHook.js | 12 +++++++++++-
 .../ComponentWithCustomHook.js.map                 |  2 +-
 .../index-map/ComponentWithCustomHook.js           | 12 +++++++++++-
 .../index-map/ComponentWithCustomHook.js.map       |  2 +-
 .../external/index-map/ComponentWithCustomHook.js  | 12 +++++++++++-
 .../index-map/ComponentWithCustomHook.js.map       |  2 +-
 .../ComponentWithCustomHook.js                     | 12 +++++++++++-
 .../ComponentWithCustomHook.js.map                 |  2 +-
 .../index-map/ComponentWithCustomHook.js           | 12 +++++++++++-
 .../index-map/ComponentWithCustomHook.js.map       |  2 +-
 .../__compiled__/inline/ComponentWithCustomHook.js | 14 ++++++++++++--
 .../fb-sources-extended/ComponentWithCustomHook.js | 14 ++++++++++++--
 .../index-map/ComponentWithCustomHook.js           | 14 ++++++++++++--
 .../inline/index-map/ComponentWithCustomHook.js    | 14 ++++++++++++--
 .../ComponentWithCustomHook.js                     | 14 ++++++++++++--
 .../index-map/ComponentWithCustomHook.js           | 14 ++++++++++++--
 .../no-columns/ComponentWithCustomHook.js          | 14 ++++++++++++--
 .../ComponentWithUnnamedCustomHooks.js             | 14 ++++++++++----
 .../src/__tests__/parseHookNames-test.js           |  3 +++
 packages/react-devtools-extensions/src/astUtils.js |  7 ++++---
 26 files changed, 195 insertions(+), 38 deletions(-)

diff --git a/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js b/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
index e42fd9e0bc46..d2176201c408 100644
--- a/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
+++ b/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
@@ -89,9 +89,9 @@ export class SourceMapMetadataConsumer {
     return getHookNameForLocation({line, column}, hookMap);
   }
 
-  hasHookMap(source: ?string) {
+  hasHookMap(source: ?string): boolean {
     if (source == null) {
-      return null;
+      return false;
     }
     return this._getHookMapForSource(source) != null;
   }
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
index 311876ffc515..33ac11e99e36 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
@@ -7,11 +7,12 @@
  * @flow
  */
 
-import React, {useEffect, useState} from 'react';
+import React, {useDebugValue, useEffect, useState} from 'react';
 
 export function Component() {
   const [count, setCount] = useState(0);
   const isDarkMode = useIsDarkMode();
+  const {foo} = useFoo();
 
   useEffect(() => {
     // ...
@@ -23,6 +24,7 @@ export function Component() {
     <>
       <div>Dark mode? {isDarkMode}</div>
       <div>Count: {count}</div>
+      <div>Foo: {foo}</div>
       <button onClick={handleClick}>Update count</button>
     </>
   );
@@ -37,3 +39,8 @@ function useIsDarkMode() {
 
   return isDarkMode;
 }
+
+function useFoo() {
+  useDebugValue('foo');
+  return {foo: true};
+}
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
index 461040feb25e..ac1230e138fe 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
@@ -50,12 +50,15 @@ function useIsDarkMode() {
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", null, "Count: ", count), /*#__PURE__*/React__default.createElement("button", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", null, "Count: ", count), /*#__PURE__*/React__default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/React__default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -67,6 +70,13 @@ function useIsDarkMode$1() {
   return isDarkMode;
 }
 
+function useFoo() {
+  React.useDebugValue('foo');
+  return {
+    foo: true
+  };
+}
+
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
index 75dabacdab28..084db3b87159 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -1 +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) Facebook, Inc. and its 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) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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","/**\n * Copyright (c) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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","ThemeContext","createContext","useTheme","theme","useContext","useDebugValue","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":";;;;;;;;;AAAA;;;;;;;;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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;AC3CD;;;;;;;;AASA,AAEO,SAASP,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AACA,QAAMK,UAAU,GAAGD,eAAa,EAAhC;AAEAE,EAAAA,eAAS,CAAC,MAAM;AAEf,GAFQ,EAEN,EAFM,CAAT;;AAIA,QAAMC,WAAW,GAAG,MAAML,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACEO,yEACEA,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,oBAHF,CADF;AAOD;;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;;ACtCD;;;;;;;;AASA,AAEO,MAAMM,YAAY,gBAAGC,mBAAa,CAAC,QAAD,CAAlC;AAEP,AAAe,SAASC,QAAT,GAAoB;AACjC,QAAMC,KAAK,GAAGC,gBAAU,CAACJ,YAAD,CAAxB;AACAK,EAAAA,mBAAa,CAACF,KAAD,CAAb;AACA,SAAOA,KAAP;AACD;;ACjBD;;;;;;;;AASA,AAGO,SAAShB,WAAT,GAAqB;AAC1B,QAAMgB,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOL,qDAAaM,KAAb,CAAP;AACD;;AChBD;;;;;;;;AASA,AAEA,MAAMG,CAAC,gBAAGL,mBAAa,CAAC,CAAD,CAAvB;AACA,MAAMM,CAAC,gBAAGN,mBAAa,CAAC,CAAD,CAAvB;AAEA,AAAO,SAASd,WAAT,GAAqB;AAC1B,QAAMqB,CAAC,GAAGJ,gBAAU,CAACE,CAAD,CAApB;AACA,QAAMG,CAAC,GAAGL,gBAAU,CAACG,CAAD,CAApB,CAF0B;;AAK1B,QAAMG,CAAC,GAAGN,gBAAU,CAACE,CAAD,CAApB;AAAA,QAAyBK,CAAC,GAAGP,gBAAU,CAACG,CAAD,CAAvC,CAL0B;;AAO1B,SAAOC,CAAC,GAAGC,CAAJ,GAAQC,CAAR,GAAYC,CAAnB;AACD;;ACtBD;;;;;;;;;AAQA,MAAM;AAACC,EAAAA,OAAD;AAAUvB,EAAAA;AAAV,IAAsBwB,cAA5B;;AAEA,SAAS1B,WAAT,CAAmB2B,KAAnB,EAA0B;AACxB,QAAMC,cAAc,GAAGH,OAAO,CAAC,MAAM,MAAM;AACzC,UAAM,CAACI,KAAD,IAAU3B,QAAQ,CAAC,CAAD,CAAxB;AAEA,WAAO2B,KAAP;AACD,GAJ6B,CAA9B;AAKAF,EAAAA,KAAK,CAACG,QAAN,CAAeF,cAAf;AAEA,SAAO,IAAP;AACD;;AAED,4BAAc,GAAG;AAAC5B,aAAAA;AAAD,CAAjB;;;ACrBA;;;;;;;;AASA;AAIA,AAAO,SAASA,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACpBD;;;;;;;;AASA,AAAO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,IAAU4B,OAAO,CAAC,OAAD,CAAP,CAAiB7B,QAAjB,CAA0B,CAA1B,CAAhB;;AAEA,SAAOC,KAAP;AACD;;ACbD;;;;;;;;AASA,AAGO,SAAS6B,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,IADF,EAKK,GALL,EAMGL,IAAI,CAACQ,IANR,CAFF,CADF;AAaD;AAED,AAAO,SAASC,IAAT,CAAcf,KAAd,EAAqB;AAC1B,QAAM,CAACgB,WAAD,EAAcC,cAAd,IAAgC1C,cAAQ,CAAC,EAAD,CAA9C;AACA,QAAM,CAAC2C,KAAD,EAAQC,QAAR,IAAoB5C,cAAQ,CAAC,CACjC;AAAC6C,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,IAAgB/C,cAAQ,CAAC,CAAD,CAA9B;AAEA,QAAMO,WAAW,GAAG4B,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;AACzB3C,MAAAA,WAAW;AACZ;AACF,GAL+B,EAMhC,CAACA,WAAD,CANgC,CAAlC;AASA,QAAM4C,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,qBACExB,uCADF,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;AALd,IAFF,eASEX;AAAQ,IAAA,QAAQ,EAAEI,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAElC;AAA/C,kBACE8B;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGM,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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":";;;;;;;;;AAAA;;;;;;;;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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;AC3CD;;;;;;;;AASA,AAEO,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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO,mDAAWG,GAAX,CAHF,eAIEH;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;ACjBD;;;;;;;;AASA,AAGO,SAASnB,WAAT,GAAqB;AAC1B,QAAMmB,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOR,qDAAaS,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;;;ACrBA;;;;;;;;AASA;AAIA,AAAO,SAASA,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,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;;ACbD;;;;;;;;AASA,AAGO,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACExB,uCADF,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;AALd,IAFF,eASEX;AAAQ,IAAA,QAAQ,EAAEI,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEpC;AAA/C,kBACEgC;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGM,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
index e326d7a4962d..a5f54607fdd3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
 //# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
index 3ebcb084abc1..366d2bbe9c3f 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"]}
\ No newline at end of file
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
index e326d7a4962d..a5f54607fdd3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
 //# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
index 4c08ae088e7a..70e64f3ffef4 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]]}
\ No newline at end of file
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
index e326d7a4962d..a5f54607fdd3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
 //# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
index a353f2d57c94..437afb5d176b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_facebook_sources":[[null,[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]]}}]}
\ No newline at end of file
+{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
index e326d7a4962d..a5f54607fdd3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
 //# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
index 420fcfb55606..b5237fdc5262 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"]}}]}
\ No newline at end of file
+{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
index e326d7a4962d..a5f54607fdd3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
 //# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
index 53b09d9ef25b..6316235dd692 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_react_sources":[[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}
\ No newline at end of file
+{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
index e326d7a4962d..a5f54607fdd3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
 //# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
index 8a1b03d5ecb9..aa2ed7916ca6 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
@@ -1 +1 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AACA,QAAMC,UAAU,GAAGC,aAAa,EAAhC;AAEA,wBAAU,MAAM,CACd;AACD,GAFD,EAEG,EAFH;;AAIA,QAAMC,WAAW,GAAG,MAAMH,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAlC;;AAEA,sBACE,yEACE,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEI;AAAjB,oBAHF,CADF;AAOD;;AAED,SAASD,aAAT,GAAyB;AACvB,QAAM,CAACD,UAAD,IAAe,qBAAS,KAAT,CAArB;AAEA,wBAAU,SAASG,eAAT,GAA2B,CACnC;AACD,GAFD,EAEG,EAFH;AAIA,SAAOH,UAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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 [count, setCount] = useState(0);\n  const isDarkMode = useIsDarkMode();\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 [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"],"x_react_sources":[[{"names":["<no-hook>","count","isDarkMode"],"mappings":"CAAD;a4BCA,AWDA;clBEA,AeFA;gCbEA,AeFA"}]]}}]}
\ No newline at end of file
+{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
index a382725a5384..4980f8628700 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl19
\ No newline at end of file
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
index d9e67330d397..d0c03c0aa6f4 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dXX0=
\ No newline at end of file
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
index 2b884ae76bf6..ec3994ae7325 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dXX19XX0=
\ No newline at end of file
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
index 864e75084321..ebf7a859698e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl19fV19
\ No newline at end of file
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
index d9aea69a221d..fd03b04ae2dd 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dfQ==
\ No newline at end of file
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
index f930dc472bd8..91ce40de08ee 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUVBLHdCQUFVLE1BQU0sQ0FDZDtBQUNELEdBRkQsRUFFRyxFQUZIOztBQUlBLFFBQU1DLFdBQVcsR0FBRyxNQUFNSCxRQUFRLENBQUNELEtBQUssR0FBRyxDQUFULENBQWxDOztBQUVBLHNCQUNFLHlFQUNFLHlEQUFpQkUsVUFBakIsQ0FERixlQUVFLHFEQUFhRixLQUFiLENBRkYsZUFHRTtBQUFRLElBQUEsT0FBTyxFQUFFSTtBQUFqQixvQkFIRixDQURGO0FBT0Q7O0FBRUQsU0FBU0QsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0csZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0gsVUFBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImNvdW50IiwiaXNEYXJrTW9kZSJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQTtjbEJFQSxBZUZBO2dDYkVBLEFlRkEifV1dfX1dfQ==
\ No newline at end of file
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
index 07c3317e87d3..51f7c36c23ef 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
@@ -22,12 +22,15 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
     onClick: handleClick
   }, "Update count"));
 }
@@ -38,4 +41,11 @@ function useIsDarkMode() {
   }, []);
   return isDarkMode;
 }
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsVUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFFQSx3QkFBQSxNQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTs7QUFJQSxRQUFBQyxXQUFBLEdBQUEsTUFBQUgsUUFBQSxDQUFBRCxLQUFBLEdBQUEsQ0FBQSxDQUFBOztBQUVBLHNCQUNBLHlFQUNBLHlEQUFBRSxVQUFBLENBREEsZUFFQSxxREFBQUYsS0FBQSxDQUZBLGVBR0E7QUFBQSxJQUFBLE9BQUEsRUFBQUk7QUFBQSxvQkFIQSxDQURBO0FBT0E7O0FBRUEsU0FBQUQsYUFBQSxHQUFBO0FBQ0EsUUFBQSxDQUFBRCxVQUFBLElBQUEscUJBQUEsS0FBQSxDQUFBO0FBRUEsd0JBQUEsU0FBQUcsZUFBQSxHQUFBLENBQ0E7QUFDQSxHQUZBLEVBRUEsRUFGQTtBQUlBLFNBQUFILFVBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gdXNlU3RhdGUoZmFsc2UpO1xuXG4gIHVzZUVmZmVjdChmdW5jdGlvbiB1c2VFZmZlY3RDcmVhdGUoKSB7XG4gICAgLy8gSGVyZSBpcyB3aGVyZSB3ZSBtYXkgbGlzdGVuIHRvIGEgXCJ0aGVtZVwiIGV2ZW50Li4uXG4gIH0sIFtdKTtcblxuICByZXR1cm4gaXNEYXJrTW9kZTtcbn1cbiJdfQ==
\ No newline at end of file
+
+function useFoo() {
+  (0, _react.useDebugValue)('foo');
+  return {
+    foo: true
+  };
+}
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsVUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFDQSxRQUFBO0FBQUFDLElBQUFBO0FBQUEsTUFBQUMsTUFBQSxFQUFBO0FBRUEsd0JBQUEsTUFBQSxDQUNBO0FBQ0EsR0FGQSxFQUVBLEVBRkE7O0FBSUEsUUFBQUMsV0FBQSxHQUFBLE1BQUFMLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUEsQ0FBQTs7QUFFQSxzQkFDQSx5RUFDQSx5REFBQUUsVUFBQSxDQURBLGVBRUEscURBQUFGLEtBQUEsQ0FGQSxlQUdBLG1EQUFBSSxHQUFBLENBSEEsZUFJQTtBQUFBLElBQUEsT0FBQSxFQUFBRTtBQUFBLG9CQUpBLENBREE7QUFRQTs7QUFFQSxTQUFBSCxhQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFELFVBQUEsSUFBQSxxQkFBQSxLQUFBLENBQUE7QUFFQSx3QkFBQSxTQUFBSyxlQUFBLEdBQUEsQ0FDQTtBQUNBLEdBRkEsRUFFQSxFQUZBO0FBSUEsU0FBQUwsVUFBQTtBQUNBOztBQUVBLFNBQUFHLE1BQUEsR0FBQTtBQUNBLDRCQUFBLEtBQUE7QUFDQSxTQUFBO0FBQUFELElBQUFBLEdBQUEsRUFBQTtBQUFBLEdBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
index ee55f33d73a8..984830dfca50 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
@@ -12,18 +12,24 @@ const {useDebugValue} = require('react');
 function Component(props) {
   useCustomHookOne();
   const [bar] = useCustomHookTwo();
-  return bar;
+  const {foo} = useCustomHookThree();
+  return `${bar}-${foo}`;
 }
 
 function useCustomHookOne() {
   // DebugValue hook should not appear in log.
-  useDebugValue('example');
+  useDebugValue('example1');
 }
 
 function useCustomHookTwo() {
   // DebugValue hook should not appear in log.
-  useDebugValue('example');
+  useDebugValue('example2');
   return [true];
 }
 
-module.exports = {Component};
\ No newline at end of file
+function useCustomHookThree() {
+  useDebugValue('example3');
+  return {foo: true};
+}
+
+module.exports = {Component};
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index cd61bea06cd2..f7e340df20b7 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -173,6 +173,7 @@ describe('parseHookNames', () => {
     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.
     ]);
   });
 
@@ -241,6 +242,7 @@ describe('parseHookNames', () => {
           'count', // useState()
           'isDarkMode', // useIsDarkMode()
           'isDarkMode', // useIsDarkMode -> useState()
+          null, // useFoo()
         ]);
       }
 
@@ -579,6 +581,7 @@ describe('parseHookNames', () => {
           'count', // useState()
           'isDarkMode', // useIsDarkMode()
           'isDarkMode', // useIsDarkMode -> useState()
+          null, // isFoo()
         ]);
         expect(require('@babel/parser').parse).toHaveBeenCalledTimes(0);
         expect(require('../generateHookMap').decodeHookMap).toHaveBeenCalled();
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 818ec578a87c..072dc9a6179c 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -78,9 +78,10 @@ function filterMemberNodesOfTargetHook(
 ): boolean {
   const targetHookName = targetHookNode.node.id.name;
   return (
-    targetHookName ===
+    targetHookName != null &&
+    (targetHookName ===
       (hookNode.node.init.object && hookNode.node.init.object.name) ||
-    targetHookName === hookNode.node.init.name
+      targetHookName === hookNode.node.init.name)
   );
 }
 
@@ -276,7 +277,7 @@ function getHookVariableName(
       return hook.node.id.name;
 
     default:
-      throw new Error(`Invalid node type: ${nodeType}`);
+      return null;
   }
 }
 

From 42ef45b1294ec4f0ee0f5318dc24721ba226852e Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 18 Aug 2021 18:26:57 -0400
Subject: [PATCH 0778/1603] [DevTools] Using array destructuring without
 assigning first variable does not error (#22129)

## Summary

Before this commit, if a hook returned an array the was destructured, but without assigning a variable to the first element in the array, this would produce an error. This was detected via internal testing.

This commit fixes that and adds regression tests.


## Test Plan

- yarn flow
- yarn test
- yarn test-build-devtools
- added new regression tests
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).
---
 .../__source__/__untransformed__/ComponentWithUseState.js      | 3 ++-
 .../src/__tests__/parseHookNames-test.js                       | 2 +-
 packages/react-devtools-extensions/src/astUtils.js             | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
index cf50881bd87b..91b77db04097 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
@@ -14,7 +14,8 @@ 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};
\ No newline at end of file
+module.exports = {Component};
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index f7e340df20b7..bba4a78b1047 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -95,7 +95,7 @@ describe('parseHookNames', () => {
     const Component = require('./__source__/__untransformed__/ComponentWithUseState')
       .Component;
     const hookNames = await getHookNamesForComponent(Component);
-    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz']);
+    expectHookNamesToEqual(hookNames, ['foo', 'bar', 'baz', null]);
   });
 
   it('should parse names for useReducer()', async () => {
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 072dc9a6179c..3b2e8c52d102 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -271,7 +271,7 @@ function getHookVariableName(
   const nodeType = hook.node.id.type;
   switch (nodeType) {
     case AST_NODE_TYPES.ARRAY_PATTERN:
-      return !isCustomHook ? hook.node.id.elements[0].name : null;
+      return !isCustomHook ? hook.node.id.elements[0]?.name ?? null : null;
 
     case AST_NODE_TYPES.IDENTIFIER:
       return hook.node.id.name;

From aa25824f3ebbdbbea01be48417f2f99251be1a12 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 18 Aug 2021 19:51:34 -0400
Subject: [PATCH 0779/1603] Scheduling profiler: Fix tooltip wheel event
 regression (#22130)

Panning horizontally via mouse wheel used to allow you to scrub over snapshot images. This was accidentally broken by a recent change. The core of the fix for this was to update `useSmartTooltip()` to remove the dependencies array so that a newly rendered tooltip is positioned even if the mouseX/mouseY coordinates don't change (as they don't when panning via wheel).

I also cleaned a couple of unrelated things up while doing this:
* Consolidated hover reset logic formerly split between `CanvasPage` and `Surface` into the `Surface` `handleInteraction()` function.
* Cleaned up redundant ref setting code in EventTooltip.
---
 .../src/CanvasPage.js                         |  38 ---
 .../src/EventTooltip.js                       | 252 +++++++-----------
 .../src/utils/useSmartTooltip.js              |   2 +-
 .../src/view-base/Surface.js                  |  13 +-
 4 files changed, 102 insertions(+), 203 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index db3d3cda4ee6..710d9cf03eed 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -419,44 +419,6 @@ function AutoSizedCanvas({
       return;
     }
 
-    // Wheel events should always hide the current tooltip.
-    switch (interaction.type) {
-      case 'wheel-control':
-      case 'wheel-meta':
-      case 'wheel-plain':
-      case 'wheel-shift':
-        setHoveredEvent(prevHoverEvent => {
-          if (prevHoverEvent === null) {
-            return prevHoverEvent;
-          } else if (
-            prevHoverEvent.componentMeasure !== null ||
-            prevHoverEvent.flamechartStackFrame !== null ||
-            prevHoverEvent.measure !== null ||
-            prevHoverEvent.nativeEvent !== null ||
-            prevHoverEvent.networkMeasure !== null ||
-            prevHoverEvent.schedulingEvent !== null ||
-            prevHoverEvent.snapshot !== null ||
-            prevHoverEvent.suspenseEvent !== null ||
-            prevHoverEvent.userTimingMark !== null
-          ) {
-            return {
-              componentMeasure: null,
-              flamechartStackFrame: null,
-              measure: null,
-              nativeEvent: null,
-              networkMeasure: null,
-              schedulingEvent: null,
-              snapshot: null,
-              suspenseEvent: null,
-              userTimingMark: null,
-            };
-          } else {
-            return prevHoverEvent;
-          }
-        });
-        break;
-    }
-
     const surface = surfaceRef.current;
     surface.handleInteraction(interaction);
 
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 84531e5b879c..5a8cf625f943 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -16,7 +16,6 @@ import type {
   ReactHoverContextInfo,
   ReactMeasure,
   ReactProfilerData,
-  Return,
   SchedulingEvent,
   Snapshot,
   SuspenseEvent,
@@ -24,7 +23,6 @@ import type {
 } from './types';
 
 import * as React from 'react';
-import {useRef} from 'react';
 import {formatDuration, formatTimestamp, trimString} from './utils/formatting';
 import {getBatchRange} from './utils/getBatchRange';
 import useSmartTooltip from './utils/useSmartTooltip';
@@ -75,7 +73,7 @@ export default function EventTooltip({
   hoveredEvent,
   origin,
 }: Props) {
-  const tooltipRef = useSmartTooltip({
+  const ref = useSmartTooltip({
     canvasRef,
     mouseX: origin.x,
     mouseY: origin.y,
@@ -97,77 +95,53 @@ export default function EventTooltip({
     userTimingMark,
   } = hoveredEvent;
 
+  let content = null;
   if (componentMeasure !== null) {
-    return (
-      <TooltipReactComponentMeasure
-        componentMeasure={componentMeasure}
-        tooltipRef={tooltipRef}
-      />
+    content = (
+      <TooltipReactComponentMeasure componentMeasure={componentMeasure} />
     );
   } else if (nativeEvent !== null) {
-    return (
-      <TooltipNativeEvent nativeEvent={nativeEvent} tooltipRef={tooltipRef} />
-    );
+    content = <TooltipNativeEvent nativeEvent={nativeEvent} />;
   } else if (networkMeasure !== null) {
-    return (
-      <TooltipNetworkMeasure
-        networkMeasure={networkMeasure}
-        tooltipRef={tooltipRef}
-      />
-    );
+    content = <TooltipNetworkMeasure networkMeasure={networkMeasure} />;
   } else if (schedulingEvent !== null) {
-    return (
-      <TooltipSchedulingEvent
-        data={data}
-        schedulingEvent={schedulingEvent}
-        tooltipRef={tooltipRef}
-      />
+    content = (
+      <TooltipSchedulingEvent data={data} schedulingEvent={schedulingEvent} />
     );
   } else if (snapshot !== null) {
-    return <TooltipSnapshot snapshot={snapshot} tooltipRef={tooltipRef} />;
+    content = <TooltipSnapshot snapshot={snapshot} />;
   } else if (suspenseEvent !== null) {
-    return (
-      <TooltipSuspenseEvent
-        suspenseEvent={suspenseEvent}
-        tooltipRef={tooltipRef}
-      />
-    );
+    content = <TooltipSuspenseEvent suspenseEvent={suspenseEvent} />;
   } else if (measure !== null) {
-    return (
-      <TooltipReactMeasure
-        data={data}
-        measure={measure}
-        tooltipRef={tooltipRef}
-      />
-    );
+    content = <TooltipReactMeasure data={data} measure={measure} />;
   } else if (flamechartStackFrame !== null) {
-    return (
-      <TooltipFlamechartNode
-        stackFrame={flamechartStackFrame}
-        tooltipRef={tooltipRef}
-      />
-    );
+    content = <TooltipFlamechartNode stackFrame={flamechartStackFrame} />;
   } else if (userTimingMark !== null) {
+    content = <TooltipUserTimingMark mark={userTimingMark} />;
+  }
+
+  if (content !== null) {
     return (
-      <TooltipUserTimingMark mark={userTimingMark} tooltipRef={tooltipRef} />
+      <div className={styles.Tooltip} ref={ref}>
+        {content}
+      </div>
     );
+  } else {
+    return null;
   }
-  return null;
 }
 
 const TooltipReactComponentMeasure = ({
   componentMeasure,
-  tooltipRef,
-}: {
+}: {|
   componentMeasure: ReactComponentMeasure,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+|}) => {
   const {componentName, duration, timestamp, warning} = componentMeasure;
 
   const label = `${componentName} rendered`;
 
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
+    <>
       <div className={styles.TooltipSection}>
         {trimString(label, 768)}
         <div className={styles.Divider} />
@@ -183,52 +157,42 @@ const TooltipReactComponentMeasure = ({
           <div className={styles.WarningText}>{warning}</div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 
 const TooltipFlamechartNode = ({
   stackFrame,
-  tooltipRef,
-}: {
+}: {|
   stackFrame: FlamechartStackFrame,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+|}) => {
   const {name, timestamp, duration, locationLine, locationColumn} = stackFrame;
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
-      <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 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,
-  tooltipRef,
-}: {
-  nativeEvent: NativeEvent,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+const TooltipNativeEvent = ({nativeEvent}: {|nativeEvent: NativeEvent|}) => {
   const {duration, timestamp, type, warning} = nativeEvent;
 
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
+    <>
       <div className={styles.TooltipSection}>
         <span className={styles.NativeEventName}>{trimString(type, 768)}</span>
         event
@@ -245,17 +209,15 @@ const TooltipNativeEvent = ({
           <div className={styles.WarningText}>{warning}</div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 
 const TooltipNetworkMeasure = ({
   networkMeasure,
-  tooltipRef,
-}: {
+}: {|
   networkMeasure: NetworkMeasure,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+|}) => {
   const {
     finishTimestamp,
     lastReceivedDataTimestamp,
@@ -278,11 +240,9 @@ const TooltipNetworkMeasure = ({
       : '(incomplete)';
 
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
-      <div className={styles.SingleLineTextSection}>
-        {duration} <span className={styles.DimText}>{priority}</span>{' '}
-        {urlToDisplay}
-      </div>
+    <div className={styles.SingleLineTextSection}>
+      {duration} <span className={styles.DimText}>{priority}</span>{' '}
+      {urlToDisplay}
     </div>
   );
 };
@@ -290,12 +250,10 @@ const TooltipNetworkMeasure = ({
 const TooltipSchedulingEvent = ({
   data,
   schedulingEvent,
-  tooltipRef,
-}: {
+}: {|
   data: ReactProfilerData,
   schedulingEvent: SchedulingEvent,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+|}) => {
   const label = getSchedulingEventLabel(schedulingEvent);
   if (!label) {
     if (__DEV__) {
@@ -323,7 +281,7 @@ const TooltipSchedulingEvent = ({
   const {componentName, timestamp, warning} = schedulingEvent;
 
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
+    <>
       <div className={styles.TooltipSection}>
         {componentName && (
           <span className={styles.ComponentName}>
@@ -350,35 +308,25 @@ const TooltipSchedulingEvent = ({
           <div className={styles.WarningText}>{warning}</div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 
-const TooltipSnapshot = ({
-  snapshot,
-  tooltipRef,
-}: {
-  snapshot: Snapshot,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+const TooltipSnapshot = ({snapshot}: {|snapshot: Snapshot|}) => {
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
-      <img
-        className={styles.Image}
-        src={snapshot.imageSource}
-        style={{width: snapshot.width / 2, height: snapshot.height / 2}}
-      />
-    </div>
+    <img
+      className={styles.Image}
+      src={snapshot.imageSource}
+      style={{width: snapshot.width / 2, height: snapshot.height / 2}}
+    />
   );
 };
 
 const TooltipSuspenseEvent = ({
   suspenseEvent,
-  tooltipRef,
-}: {
+}: {|
   suspenseEvent: SuspenseEvent,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+|}) => {
   const {
     componentName,
     duration,
@@ -394,7 +342,7 @@ const TooltipSuspenseEvent = ({
   }
 
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
+    <>
       <div className={styles.TooltipSection}>
         {componentName && (
           <span className={styles.ComponentName}>
@@ -421,19 +369,17 @@ const TooltipSuspenseEvent = ({
           <div className={styles.WarningText}>{warning}</div>
         </div>
       )}
-    </div>
+    </>
   );
 };
 
 const TooltipReactMeasure = ({
   data,
   measure,
-  tooltipRef,
-}: {
+}: {|
   data: ReactProfilerData,
   measure: ReactMeasure,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+|}) => {
   const label = getReactMeasureLabel(measure.type);
   if (!label) {
     if (__DEV__) {
@@ -450,52 +396,42 @@ const TooltipReactMeasure = ({
   );
 
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
-      <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 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,
-  tooltipRef,
-}: {
-  mark: UserTimingMark,
-  tooltipRef: Return<typeof useRef>,
-}) => {
+const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => {
   const {name, timestamp} = mark;
   return (
-    <div className={styles.Tooltip} ref={tooltipRef}>
-      <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 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>
   );
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js b/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
index bbf36acb95c1..16cdec365f61 100644
--- a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
@@ -75,7 +75,7 @@ export default function useSmartTooltip({
         element.style.left = `${mouseX + TOOLTIP_OFFSET_BOTTOM}px`;
       }
     }
-  }, [mouseX, mouseY, ref]);
+  });
 
   return ref;
 }
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
index 2a5774db3197..48cebd9cf1b6 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {ReactHoverContextInfo} from '../types';
 import type {Interaction} from './useCanvasInteraction';
 import type {Size} from './geometry';
 
@@ -48,9 +47,7 @@ const getCanvasContext = memoize(
   },
 );
 
-type ResetHoveredEventFn = (
-  partialState: $Shape<ReactHoverContextInfo>,
-) => void;
+type ResetHoveredEventFn = () => void;
 
 /**
  * Represents the canvas surface and a view heirarchy. A surface is also the
@@ -123,7 +120,11 @@ export class Surface {
       const viewRefs = this._viewRefs;
       switch (interaction.type) {
         case 'mousemove':
-          // Clean out the hovered view before processing a new mouse move interaction.
+        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;
 
@@ -134,7 +135,7 @@ export class Surface {
 
           // If a previously hovered view is no longer hovered, update the outer state.
           if (hoveredView !== null && viewRefs.hoveredView === null) {
-            this._resetHoveredEvent({});
+            this._resetHoveredEvent();
           }
           break;
         default:

From 64f83a6fd24ddfcc74607e0e55b3fc9fe0d3c9b3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 19 Aug 2021 11:25:38 -0400
Subject: [PATCH 0780/1603] Replace "source-map" library with "source-map-js"
 (#22126)

---
 packages/react-devtools-extensions/build.js   |  6 -----
 .../chrome/manifest.json                      |  3 +--
 .../edge/manifest.json                        |  3 +--
 .../firefox/manifest.json                     |  3 +--
 .../react-devtools-extensions/package.json    |  2 +-
 .../src/SourceMapMetadataConsumer.js          | 21 +++++++++++++----
 .../src/__tests__/parseHookNames-test.js      | 23 -------------------
 .../src/parseHookNames/index.js               |  7 +-----
 .../src/parseHookNames/parseHookNames.js      | 22 +++++-------------
 yarn.lock                                     | 12 ++++------
 10 files changed, 32 insertions(+), 70 deletions(-)

diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
index afd4b6fd23b0..76b7aee68cb3 100644
--- a/packages/react-devtools-extensions/build.js
+++ b/packages/react-devtools-extensions/build.js
@@ -93,12 +93,6 @@ const build = async (tempPath, manifestPath) => {
     STATIC_FILES.map(file => copy(join(__dirname, file), join(zipPath, file))),
   );
 
-  // The "source-map" library requires this chunk of WASM to be bundled at runtime.
-  await copy(
-    join(__dirname, 'node_modules', 'source-map', 'lib', 'mappings.wasm'),
-    join(zipPath, 'mappings.wasm'),
-  );
-
   const commit = getGitCommit();
   const dateString = new Date().toLocaleDateString();
   const manifest = JSON.parse(readFileSync(copiedManifestPath).toString());
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 94fb4a5b221c..36119681dc3e 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -32,8 +32,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "mappings.wasm"
+    "build/renderer.js"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index e3291f353cae..65ab76b74d16 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -32,8 +32,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "mappings.wasm"
+    "build/renderer.js"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index e5c5deaaabca..dbabb5978cbd 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -37,8 +37,7 @@
     "main.html",
     "panel.html",
     "build/react_devtools_backend.js",
-    "build/renderer.js",
-    "mappings.wasm"
+    "build/renderer.js"
   ],
 
   "background": {
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 35334517cf7d..99c1eaf0868e 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -62,7 +62,7 @@
     "rollup-plugin-babel": "^4.0.1",
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-node-resolve": "^2.1.1",
-    "source-map": "^0.8.0-beta.0",
+    "source-map-js": "^0.6.2",
     "sourcemap-codec": "^1.4.8",
     "style-loader": "^0.23.1",
     "webpack": "^4.43.0",
diff --git a/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js b/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
index d2176201c408..250192c7fa4b 100644
--- a/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
+++ b/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
@@ -15,7 +15,7 @@ import type {
   MixedSourceMap,
 } from './SourceMapTypes';
 import type {HookMap} from './generateHookMap';
-import * as util from 'source-map/lib/util';
+import * as util from 'source-map-js/lib/util';
 import {decodeHookMap} from './generateHookMap';
 import {getHookNameForLocation} from './getHookNameForLocation';
 
@@ -27,10 +27,9 @@ const REACT_SOURCES_EXTENSION_KEY = 'x_react_sources';
 const FB_SOURCES_EXTENSION_KEY = 'x_facebook_sources';
 
 /**
- * Extracted from the logic in source-map@0.8.0-beta.0's SourceMapConsumer.
- * By default, source names are normalized using the same logic that the
- * `source-map@0.8.0-beta.0` package uses internally. This is crucial for keeping the
- * sources list in sync with a `SourceMapConsumer` instance.
+ * 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,
@@ -41,6 +40,18 @@ function normalizeSourcePath(
 
   // eslint-disable-next-line react-internal/no-primitive-constructors
   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);
 }
 
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index bba4a78b1047..a5fe6fb25802 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -25,23 +25,6 @@ function requireText(path, encoding) {
   }
 }
 
-const chromeGlobal = {
-  extension: {
-    getURL: jest.fn((...args) => {
-      const {join} = require('path');
-      return join(
-        __dirname,
-        '..',
-        '..',
-        'node_modules',
-        'source-map',
-        'lib',
-        'mappings.wasm',
-      );
-    }),
-  },
-};
-
 describe('parseHookNames', () => {
   let fetchMock;
   let inspectHooks;
@@ -57,9 +40,6 @@ describe('parseHookNames', () => {
     fetchMock = require('jest-fetch-mock');
     fetchMock.enableMocks();
 
-    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
-    global.chrome = chromeGlobal;
-
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
     parseHookNames = require('../parseHookNames/parseHookNames').parseHookNames;
@@ -908,9 +888,6 @@ describe('parseHookNames worker', () => {
       };
     });
 
-    // Mock out portion of browser API used by parseHookNames to initialize "source-map".
-    global.chrome = chromeGlobal;
-
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
     parseHookNames = require('../parseHookNames').parseHookNames;
diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js
index 79b2cf1aae54..643655ae757e 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/index.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/index.js
@@ -1,5 +1,3 @@
-/* global chrome */
-
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -15,14 +13,11 @@
 import WorkerizedParseHookNames from './parseHookNames.worker';
 import typeof * as ParseHookNamesModule from './parseHookNames';
 
-// $FlowFixMe
-const wasmMappingsURL = chrome.extension.getURL('mappings.wasm');
-
 const workerizedParseHookNames: ParseHookNamesModule = WorkerizedParseHookNames();
 
 type ParseHookNames = $PropertyType<ParseHookNamesModule, 'parseHookNames'>;
 
 export const parseHookNames: ParseHookNames = hooksTree =>
-  workerizedParseHookNames.parseHookNames(hooksTree, wasmMappingsURL);
+  workerizedParseHookNames.parseHookNames(hooksTree);
 
 export const purgeCachedMetadata = workerizedParseHookNames.purgeCachedMetadata;
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 9f1faa8aafd2..23364ba68e91 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -9,7 +9,7 @@
 
 import {parse} from '@babel/parser';
 import LRU from 'lru-cache';
-import {SourceMapConsumer} from 'source-map';
+import {SourceMapConsumer} from 'source-map-js';
 import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
@@ -107,7 +107,6 @@ const originalURLToMetadataCache: LRUCache<
 
 export async function parseHookNames(
   hooksTree: HooksTree,
-  wasmMappingsURL: string,
 ): Thenable<HookNames | null> {
   const hooksList: Array<HooksNode> = [];
   flattenHooksList(hooksTree, hooksList);
@@ -167,9 +166,7 @@ export async function parseHookNames(
   }
 
   return loadSourceFiles(locationKeyToHookSourceData)
-    .then(() =>
-      extractAndLoadSourceMaps(locationKeyToHookSourceData, wasmMappingsURL),
-    )
+    .then(() => extractAndLoadSourceMaps(locationKeyToHookSourceData))
     .then(() => parseSourceAST(locationKeyToHookSourceData))
     .then(() => updateLruCache(locationKeyToHookSourceData))
     .then(() => findHookNames(hooksList, locationKeyToHookSourceData));
@@ -191,7 +188,6 @@ function decodeBase64String(encoded: string): Object {
 
 function extractAndLoadSourceMaps(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
-  wasmMappingsURL: string,
 ): Promise<*> {
   // SourceMapConsumer.initialize() does nothing when running in Node (aka Jest)
   // because the wasm file is automatically read from the file system
@@ -202,8 +198,6 @@ function extractAndLoadSourceMaps(
         'extractAndLoadSourceMaps() Initializing source-map library ...',
       );
     }
-
-    SourceMapConsumer.initialize({'lib/mappings.wasm': wasmMappingsURL});
   }
 
   // Deduplicate fetches, since there can be multiple location keys per source map.
@@ -259,11 +253,7 @@ function extractAndLoadSourceMaps(
             hookSourceData.metadataConsumer = new SourceMapMetadataConsumer(
               parsed,
             );
-            setPromises.push(
-              new SourceMapConsumer(parsed).then(sourceConsumer => {
-                hookSourceData.sourceConsumer = sourceConsumer;
-              }),
-            );
+            hookSourceData.sourceConsumer = new SourceMapConsumer(parsed);
             break;
           }
         } else {
@@ -299,10 +289,10 @@ function extractAndLoadSourceMaps(
             fetchFile(url).then(
               sourceMapContents => {
                 const parsed = JSON.parse(sourceMapContents);
-                return new SourceMapConsumer(parsed).then(sourceConsumer => ({
-                  sourceConsumer,
+                return {
+                  sourceConsumer: new SourceMapConsumer(parsed),
                   metadataConsumer: new SourceMapMetadataConsumer(parsed),
-                }));
+                };
               },
               // 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,
diff --git a/yarn.lock b/yarn.lock
index 02d3f3bc0183..1e67ccb08dde 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -14168,6 +14168,11 @@ source-list-map@^2.0.0:
   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-resolve@^0.5.0:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -14223,13 +14228,6 @@ source-map@^0.7.3:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-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.1, sourcemap-codec@^1.4.4, sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"

From d54be90be658afca13c3f882ff28de14e0bd35ad Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 20 Aug 2021 09:56:20 -0400
Subject: [PATCH 0781/1603] Set up test infra for dynamic Scheduler flags
 (#22139)

I copied the set up we use for React.

In the www-variant test job, the Scheduler `__VARIANT__` flags will be
`true`. When writing a test, we can read the value of the flag with the
`gate` pragma and method.

Note: Since these packages are currently released in lockstep, maybe we
should remove SchedulerFeatureFlags and use ReactFeatureFlags for both.
---
 packages/scheduler/src/SchedulerFeatureFlags.js |  2 +-
 .../forks/SchedulerFeatureFlags.www-dynamic.js  | 17 +++++++++++++++++
 .../src/forks/SchedulerFeatureFlags.www.js      |  5 ++++-
 scripts/jest/TestFlags.js                       |  6 ++++++
 scripts/jest/setupTests.www.js                  | 15 +++++++++++++++
 5 files changed, 43 insertions(+), 2 deletions(-)
 create mode 100644 packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js

diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index 57c9d151879c..9b9deeb63ec1 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -8,4 +8,4 @@
 
 export const enableSchedulerDebugging = false;
 export const enableIsInputPending = false;
-export const enableProfiling = __VARIANT__;
+export const enableProfiling = 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 000000000000..086762d7b707
--- /dev/null
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// 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 enableIsInputPending = __VARIANT__;
+export const enableSchedulerDebugging = __VARIANT__;
+export const enableProfiling = __VARIANT__;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index 9fd86c7f94b2..9087af8b22f7 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -6,10 +6,13 @@
  *
  */
 
+const dynamicFeatureFlags = require('SchedulerFeatureFlags');
+
+// Re-export dynamic flags from the www version.
 export const {
   enableIsInputPending,
   enableSchedulerDebugging,
   enableProfiling: enableProfilingFeatureFlag,
-} = require('SchedulerFeatureFlags');
+} = dynamicFeatureFlags;
 
 export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 45391b75f414..9e9a531b0b3b 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -57,6 +57,7 @@ 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 releaseChannel = www
@@ -81,6 +82,11 @@ function getTestFlags() {
       source: !process.env.IS_BUILD,
       www,
 
+      // 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,
     },
diff --git a/scripts/jest/setupTests.www.js b/scripts/jest/setupTests.www.js
index e303d9fee22a..c0058cb6e084 100644
--- a/scripts/jest/setupTests.www.js
+++ b/scripts/jest/setupTests.www.js
@@ -19,4 +19,19 @@ jest.mock('shared/ReactFeatureFlags', () => {
   return wwwFlags;
 });
 
+jest.mock('scheduler/src/SchedulerFeatureFlags', () => {
+  const schedulerSrcPath = process.cwd() + '/packages/scheduler';
+  jest.mock(
+    'SchedulerFeatureFlags',
+    () =>
+      jest.requireActual(
+        schedulerSrcPath + '/src/forks/SchedulerFeatureFlags.www-dynamic'
+      ),
+    {virtual: true}
+  );
+  return jest.requireActual(
+    schedulerSrcPath + '/src/forks/SchedulerFeatureFlags.www'
+  );
+});
+
 global.__WWW__ = true;

From 986d0e61d7085d4b8eea0386235d1b5ca9f47349 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 20 Aug 2021 09:57:29 -0400
Subject: [PATCH 0782/1603] [Scheduler] Add tests for isInputPending (#22140)

This feature was already implemented but we didn't have any tests. So
I wrote some.
---
 .../scheduler/src/__tests__/Scheduler-test.js | 218 +++++++++++++++++-
 1 file changed, 217 insertions(+), 1 deletion(-)

diff --git a/packages/scheduler/src/__tests__/Scheduler-test.js b/packages/scheduler/src/__tests__/Scheduler-test.js
index 29abe65c1eae..6df0a3ba1d24 100644
--- a/packages/scheduler/src/__tests__/Scheduler-test.js
+++ b/packages/scheduler/src/__tests__/Scheduler-test.js
@@ -17,6 +17,7 @@ let runtime;
 let performance;
 let cancelCallback;
 let scheduleCallback;
+let requestPaint;
 let NormalPriority;
 
 // The Scheduler implementation uses browser APIs like `MessageChannel` and
@@ -40,6 +41,7 @@ describe('SchedulerBrowser', () => {
     cancelCallback = Scheduler.unstable_cancelCallback;
     scheduleCallback = Scheduler.unstable_scheduleCallback;
     NormalPriority = Scheduler.unstable_NormalPriority;
+    requestPaint = Scheduler.unstable_requestPaint;
   });
 
   afterEach(() => {
@@ -52,6 +54,9 @@ describe('SchedulerBrowser', () => {
 
   function installMockBrowserRuntime() {
     let hasPendingMessageEvent = false;
+    let isFiringMessageEvent = false;
+    let hasPendingDiscreteEvent = false;
+    let hasPendingContinuousEvent = false;
 
     let timerIDCounter = 0;
     // let timerIDs = new Map();
@@ -94,6 +99,23 @@ describe('SchedulerBrowser', () => {
       this.port2 = port2;
     };
 
+    const scheduling = {
+      isInputPending(options) {
+        if (this !== scheduling) {
+          throw new Error(
+            'isInputPending called with incorrect `this` context',
+          );
+        }
+
+        return (
+          hasPendingDiscreteEvent ||
+          (options && options.includeContinuous && hasPendingContinuousEvent)
+        );
+      },
+    };
+
+    global.navigator = {scheduling};
+
     function ensureLogIsEmpty() {
       if (eventLog.length !== 0) {
         throw Error('Log is not empty. Call assertLog before continuing.');
@@ -102,6 +124,9 @@ describe('SchedulerBrowser', () => {
     function advanceTime(ms) {
       currentTime += ms;
     }
+    function resetTime() {
+      currentTime = 0;
+    }
     function fireMessageEvent() {
       ensureLogIsEmpty();
       if (!hasPendingMessageEvent) {
@@ -110,7 +135,35 @@ describe('SchedulerBrowser', () => {
       hasPendingMessageEvent = false;
       const onMessage = port1.onmessage;
       log('Message Event');
-      onMessage();
+
+      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);
@@ -125,10 +178,13 @@ describe('SchedulerBrowser', () => {
     }
     return {
       advanceTime,
+      resetTime,
       fireMessageEvent,
       log,
       isLogEmpty,
       assertLog,
+      scheduleDiscreteEvent,
+      scheduleContinuousEvent,
     };
   }
 
@@ -144,6 +200,8 @@ describe('SchedulerBrowser', () => {
   it('task with continuation', () => {
     scheduleCallback(NormalPriority, () => {
       runtime.log('Task');
+      // Request paint so that we yield at the end of the frame interval
+      requestPaint();
       while (!Scheduler.unstable_shouldYield()) {
         runtime.advanceTime(1);
       }
@@ -259,4 +317,162 @@ describe('SchedulerBrowser', () => {
     runtime.fireMessageEvent();
     runtime.assertLog(['Message Event', 'B']);
   });
+
+  it('when isInputPending is available, we can wait longer before yielding', () => {
+    function blockUntilSchedulerAsksToYield() {
+      while (!Scheduler.unstable_shouldYield()) {
+        runtime.advanceTime(1);
+      }
+      runtime.log(`Yield at ${performance.now()}ms`);
+    }
+
+    // First show what happens when we don't request a paint
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task with no pending input');
+      blockUntilSchedulerAsksToYield();
+    });
+    runtime.assertLog(['Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Task with no pending input',
+      // Even though there's no input, eventually Scheduler will yield
+      // regardless in case there's a pending main thread task we don't know
+      // about, like a network event.
+      gate(flags =>
+        flags.enableIsInputPending
+          ? 'Yield at 300ms'
+          : // When isInputPending is disabled, we always yield quickly
+            'Yield at 5ms',
+      ),
+    ]);
+
+    runtime.resetTime();
+
+    // Now do the same thing, but while the task is running, simulate an
+    // input event.
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task with pending input');
+      runtime.scheduleDiscreteEvent();
+      blockUntilSchedulerAsksToYield();
+    });
+    runtime.assertLog(['Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Task with pending input',
+      // This time we yielded quickly to unblock the discrete event.
+      'Yield at 5ms',
+      'Discrete Event',
+    ]);
+  });
+
+  it(
+    'isInputPending will also check for continuous inputs, but after a ' +
+      'slightly larger threshold',
+    () => {
+      function blockUntilSchedulerAsksToYield() {
+        while (!Scheduler.unstable_shouldYield()) {
+          runtime.advanceTime(1);
+        }
+        runtime.log(`Yield at ${performance.now()}ms`);
+      }
+
+      // First show what happens when we don't request a paint
+      scheduleCallback(NormalPriority, () => {
+        runtime.log('Task with no pending input');
+        blockUntilSchedulerAsksToYield();
+      });
+      runtime.assertLog(['Post Message']);
+
+      runtime.fireMessageEvent();
+      runtime.assertLog([
+        'Message Event',
+        'Task with no pending input',
+        // Even though there's no input, eventually Scheduler will yield
+        // regardless in case there's a pending main thread task we don't know
+        // about, like a network event.
+        gate(flags =>
+          flags.enableIsInputPending
+            ? 'Yield at 300ms'
+            : // When isInputPending is disabled, we always yield quickly
+              'Yield at 5ms',
+        ),
+      ]);
+
+      runtime.resetTime();
+
+      // Now do the same thing, but while the task is running, simulate a
+      // continuous input event.
+      scheduleCallback(NormalPriority, () => {
+        runtime.log('Task with continuous input');
+        runtime.scheduleContinuousEvent();
+        blockUntilSchedulerAsksToYield();
+      });
+      runtime.assertLog(['Post Message']);
+
+      runtime.fireMessageEvent();
+      runtime.assertLog([
+        'Message Event',
+        'Task with continuous input',
+        // This time we yielded quickly to unblock the continuous event. But not
+        // as quickly as for a discrete event.
+        gate(flags =>
+          flags.enableIsInputPending
+            ? 'Yield at 50ms'
+            : // When isInputPending is disabled, we always yield quickly
+              'Yield at 5ms',
+        ),
+        'Continuous Event',
+      ]);
+    },
+  );
+
+  it('requestPaint forces a yield at the end of the next frame interval', () => {
+    function blockUntilSchedulerAsksToYield() {
+      while (!Scheduler.unstable_shouldYield()) {
+        runtime.advanceTime(1);
+      }
+      runtime.log(`Yield at ${performance.now()}ms`);
+    }
+
+    // First show what happens when we don't request a paint
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task with no paint');
+      blockUntilSchedulerAsksToYield();
+    });
+    runtime.assertLog(['Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Task with no paint',
+      gate(flags =>
+        flags.enableIsInputPending
+          ? 'Yield at 300ms'
+          : // When isInputPending is disabled, we always yield quickly
+            'Yield at 5ms',
+      ),
+    ]);
+
+    runtime.resetTime();
+
+    // Now do the same thing, but call requestPaint inside the task
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Task with paint');
+      requestPaint();
+      blockUntilSchedulerAsksToYield();
+    });
+    runtime.assertLog(['Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Task with paint',
+      // This time we yielded quickly (5ms) because we requested a paint.
+      'Yield at 5ms',
+    ]);
+  });
 });

From b6ff9ad1630b4f1d7cb98e9b9ec46bca315bb302 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 20 Aug 2021 17:55:42 +0200
Subject: [PATCH 0783/1603] DevTools: update error indices when elements are
 added/removed (#22144)

---
 .../src/__tests__/treeContext-test.js         | 58 +++++++++++++++++++
 .../src/devtools/store.js                     | 12 ++++
 2 files changed, 70 insertions(+)

diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 0db248c01786..30d21c0335dd 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -2119,6 +2119,64 @@ describe('TreeListContext', () => {
       `);
     });
 
+    it('should update correctly when elements are added/removed', () => {
+      const container = document.createElement('div');
+      let errored = false;
+      function ErrorOnce() {
+        if (!errored) {
+          errored = true;
+          console.error('test-only:one-time-error');
+        }
+        return null;
+      }
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          legacyRender(
+            <React.Fragment>
+              <ErrorOnce key="error" />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      let renderer;
+      utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
+      expect(state).toMatchInlineSnapshot(`
+        ✕ 1, ⚠ 0
+        [root]
+             <ErrorOnce key="error"> ✕
+      `);
+
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          legacyRender(
+            <React.Fragment>
+              <Child />
+              <ErrorOnce key="error" />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      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 select and auto-expand parts components within hidden parts of the tree', () => {
       const Wrapper = ({children}) => children;
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 16bc56ae64f0..7cd5c41e8b0d 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -1187,6 +1187,18 @@ export default class Store extends EventEmitter<{|
       console.groupEnd();
     }
 
+    const indicesOfCachedErrorsOrWarningsAreStale =
+      !haveErrorsOrWarningsChanged &&
+      (addedElementIDs.length > 0 || removedElementIDs.size > 0);
+    if (indicesOfCachedErrorsOrWarningsAreStale) {
+      this._cachedErrorAndWarningTuples.forEach(entry => {
+        const index = this.getIndexOfElementID(entry.id);
+        if (index !== null) {
+          entry.index = index;
+        }
+      });
+    }
+
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 

From 75a3e9fa4074b4b18ee95398ceabc361a6c9f82e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 20 Aug 2021 12:53:28 -0400
Subject: [PATCH 0784/1603] DevTools: Reset cached indices in Store after
 elements reordered (#22147)

---
 .../src/__tests__/treeContext-test.js         | 105 ++++++++++++++++++
 .../src/devtools/store.js                     |  70 ++++++------
 2 files changed, 139 insertions(+), 36 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 30d21c0335dd..36f14d8c7d66 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -2177,6 +2177,111 @@ describe('TreeListContext', () => {
       `);
     });
 
+    it('should update correctly when elements are re-ordered', () => {
+      const container = document.createElement('div');
+      function ErrorOnce() {
+        const didErroRef = React.useRef(false);
+        if (!didErroRef.current) {
+          didErroRef.current = true;
+          console.error('test-only:one-time-error');
+        }
+        return null;
+      }
+      withErrorsOrWarningsIgnored(['test-only:'], () =>
+        utils.act(() =>
+          legacyRender(
+            <React.Fragment>
+              <Child key="A" />
+              <ErrorOnce key="B" />
+              <Child key="C" />
+              <ErrorOnce key="D" />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+
+      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(() =>
+          legacyRender(
+            <React.Fragment>
+              <ErrorOnce key="B" />
+              <Child key="A" />
+              <ErrorOnce key="D" />
+              <Child key="C" />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+      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(() =>
+          legacyRender(
+            <React.Fragment>
+              <ErrorOnce key="D" />
+              <ErrorOnce key="B" />
+              <Child key="A" />
+              <Child key="C" />
+            </React.Fragment>,
+            container,
+          ),
+        ),
+      );
+      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;
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 7cd5c41e8b0d..217abe7f7277 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -57,6 +57,8 @@ const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
 const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
   'React::DevTools::recordChangeDescriptions';
 
+type ErrorAndWarningTuples = Array<{|id: number, index: number|}>;
+
 type Config = {|
   checkBridgeProtocolCompatibility?: boolean,
   isProfiling?: boolean,
@@ -94,7 +96,7 @@ export default class Store extends EventEmitter<{|
   // Computed whenever _errorsAndWarnings Map changes.
   _cachedErrorCount: number = 0;
   _cachedWarningCount: number = 0;
-  _cachedErrorAndWarningTuples: Array<{|id: number, index: number|}> = [];
+  _cachedErrorAndWarningTuples: ErrorAndWarningTuples | null = null;
 
   // Should new nodes be collapsed by default when added to the tree?
   _collapseNodesByDefault: boolean = true;
@@ -510,7 +512,34 @@ export default class Store extends EventEmitter<{|
 
   // Returns a tuple of [id, index]
   getElementsWithErrorsAndWarnings(): Array<{|id: number, index: number|}> {
-    return this._cachedErrorAndWarningTuples;
+    if (this._cachedErrorAndWarningTuples !== null) {
+      return this._cachedErrorAndWarningTuples;
+    } else {
+      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(
@@ -1124,6 +1153,9 @@ export default class Store extends EventEmitter<{|
 
     this._revision++;
 
+    // Any time the tree changes (e.g. elements added, removed, or reordered) cached inidices may be invalid.
+    this._cachedErrorAndWarningTuples = null;
+
     if (haveErrorsOrWarningsChanged) {
       let errorCount = 0;
       let warningCount = 0;
@@ -1135,28 +1167,6 @@ export default class Store extends EventEmitter<{|
 
       this._cachedErrorCount = errorCount;
       this._cachedWarningCount = warningCount;
-
-      const errorAndWarningTuples: Array<{|id: number, index: number|}> = [];
-
-      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});
-        }
-      });
-
-      this._cachedErrorAndWarningTuples = errorAndWarningTuples;
     }
 
     if (haveRootsChanged) {
@@ -1187,18 +1197,6 @@ export default class Store extends EventEmitter<{|
       console.groupEnd();
     }
 
-    const indicesOfCachedErrorsOrWarningsAreStale =
-      !haveErrorsOrWarningsChanged &&
-      (addedElementIDs.length > 0 || removedElementIDs.size > 0);
-    if (indicesOfCachedErrorsOrWarningsAreStale) {
-      this._cachedErrorAndWarningTuples.forEach(entry => {
-        const index = this.getIndexOfElementID(entry.id);
-        if (index !== null) {
-          entry.index = index;
-        }
-      });
-    }
-
     this.emit('mutated', [addedElementIDs, removedElementIDs]);
   };
 

From 83205c0aea3226eac063910bab128f3258d7c7dc Mon Sep 17 00:00:00 2001
From: Holger Benl <hbenl@evandor.de>
Date: Fri, 20 Aug 2021 18:55:50 +0200
Subject: [PATCH 0785/1603] [DevTools] Add options for disabling some features
 (#22136)

---
 .../react-devtools-inline/src/frontend.js     |   7 +-
 .../views/Components/InspectedElement.js      |  46 ++++--
 .../Components/InspectedElementPropsTree.js   |   6 +-
 .../InspectedElementSuspenseToggle.js         |   6 +-
 .../src/devtools/views/Components/KeyValue.js |  26 +--
 .../src/devtools/views/Components/Tree.js     |  13 +-
 .../src/devtools/views/DevTools.js            | 152 +++++++++++-------
 .../src/devtools/views/context.js             |  18 +++
 8 files changed, 184 insertions(+), 90 deletions(-)

diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index d9645999b3f0..79bda7ecd8fb 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -20,11 +20,16 @@ import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export function createStore(bridge: FrontendBridge): Store {
+type Config = {|
+  supportsNativeInspection?: boolean,
+|};
+
+export function createStore(bridge: FrontendBridge, config?: Config): Store {
   return new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
     supportsSchedulingProfiler: true,
+    supportsNativeInspection: config?.supportsNativeInspection !== false,
   });
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index d0774d95f961..f63da7b54a67 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {useCallback, useContext} from 'react';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
-import {BridgeContext, StoreContext} from '../context';
+import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {ModalDialogContext} from '../ModalDialog';
@@ -37,6 +37,12 @@ export default function InspectedElementWrapper(_: Props) {
   );
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const {
+    hideToggleErrorAction,
+    hideToggleSuspenseAction,
+    hideLogAction,
+    hideViewSourceAction,
+  } = useContext(OptionsContext);
   const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
   const {
@@ -108,10 +114,14 @@ export default function InspectedElementWrapper(_: Props) {
     inspectedElement.state != null;
 
   const canToggleError =
-    inspectedElement != null && inspectedElement.canToggleError;
+    !hideToggleErrorAction &&
+    inspectedElement != null &&
+    inspectedElement.canToggleError;
 
   const canToggleSuspense =
-    inspectedElement != null && inspectedElement.canToggleSuspense;
+    !hideToggleSuspenseAction &&
+    inspectedElement != null &&
+    inspectedElement.canToggleSuspense;
 
   const toggleErrored = useCallback(() => {
     if (inspectedElement == null || targetErrorBoundaryID == null) {
@@ -248,19 +258,23 @@ export default function InspectedElementWrapper(_: Props) {
             <ButtonIcon type="view-dom" />
           </Button>
         )}
-        <Button
-          className={styles.IconButton}
-          onClick={logElement}
-          title="Log this component data to the console">
-          <ButtonIcon type="log-data" />
-        </Button>
-        <Button
-          className={styles.IconButton}
-          disabled={!canViewSource}
-          onClick={viewSource}
-          title="View source for this element">
-          <ButtonIcon type="view-source" />
-        </Button>
+        {!hideLogAction && (
+          <Button
+            className={styles.IconButton}
+            onClick={logElement}
+            title="Log this component data to the console">
+            <ButtonIcon type="log-data" />
+          </Button>
+        )}
+        {!hideViewSourceAction && (
+          <Button
+            className={styles.IconButton}
+            disabled={!canViewSource}
+            onClick={viewSource}
+            title="View source for this element">
+            <ButtonIcon type="view-source" />
+          </Button>
+        )}
       </div>
 
       {inspectedElement === null && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index 7b6569cd32ce..1673b5f9b192 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -9,6 +9,7 @@
 
 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';
@@ -35,6 +36,8 @@ export default function InspectedElementPropsTree({
   inspectedElement,
   store,
 }: Props) {
+  const {readOnly} = React.useContext(OptionsContext);
+
   const {
     canEditFunctionProps,
     canEditFunctionPropsDeletePaths,
@@ -45,7 +48,8 @@ export default function InspectedElementPropsTree({
 
   const canDeletePaths =
     type === ElementTypeClass || canEditFunctionPropsDeletePaths;
-  const canEditValues = type === ElementTypeClass || canEditFunctionProps;
+  const canEditValues =
+    !readOnly && (type === ElementTypeClass || canEditFunctionProps);
   const canRenamePaths =
     type === ElementTypeClass || canEditFunctionPropsRenamePaths;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
index d486116bb84f..0b0ce0ecac8a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
@@ -8,6 +8,7 @@
  */
 
 import * as React from 'react';
+import {OptionsContext} from '../context';
 import EditableValue from './EditableValue';
 import Store from '../../store';
 import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
@@ -27,7 +28,10 @@ export default function InspectedElementSuspenseToggle({
   inspectedElement,
   store,
 }: Props) {
-  const {canToggleSuspense, id, state, type} = inspectedElement;
+  const {readOnly} = React.useContext(OptionsContext);
+
+  const {id, state, type} = inspectedElement;
+  const canToggleSuspense = !readOnly && inspectedElement.canToggleSuspense;
 
   if (type !== ElementTypeSuspense) {
     return null;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index be45bab429dd..f09c9f3d602d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -9,6 +9,7 @@
 
 import * as React from 'react';
 import {useTransition, useContext, useRef, useState} from 'react';
+import {OptionsContext} from '../context';
 import EditableName from './EditableName';
 import EditableValue from './EditableValue';
 import NewArrayValue from './NewArrayValue';
@@ -74,6 +75,11 @@ export default function KeyValue({
   store,
   value,
 }: KeyValueProps) {
+  const {readOnly: readOnlyGlobalFlag} = useContext(OptionsContext);
+  canDeletePaths = !readOnlyGlobalFlag && canDeletePaths;
+  canEditValues = !readOnlyGlobalFlag && canEditValues;
+  canRenamePaths = !readOnlyGlobalFlag && canRenamePaths;
+
   const {id} = inspectedElement;
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -82,10 +88,10 @@ export default function KeyValue({
   const {inspectPaths} = useContext(InspectedElementContext);
 
   let isInspectable = false;
-  let isReadOnly = false;
+  let isReadOnlyBasedOnMetadata = false;
   if (value !== null && typeof value === 'object') {
     isInspectable = value[meta.inspectable] && value[meta.size] !== 0;
-    isReadOnly = value[meta.readonly];
+    isReadOnlyBasedOnMetadata = value[meta.readonly];
   }
 
   const [isInspectPathsPending, startInspectPathsTransition] = useTransition();
@@ -330,9 +336,9 @@ export default function KeyValue({
           key={index}
           alphaSort={alphaSort}
           bridge={bridge}
-          canDeletePaths={canDeletePaths && !isReadOnly}
-          canEditValues={canEditValues && !isReadOnly}
-          canRenamePaths={canRenamePaths && !isReadOnly}
+          canDeletePaths={canDeletePaths && !isReadOnlyBasedOnMetadata}
+          canEditValues={canEditValues && !isReadOnlyBasedOnMetadata}
+          canRenamePaths={canRenamePaths && !isReadOnlyBasedOnMetadata}
           canRenamePathsAtDepth={canRenamePathsAtDepth}
           depth={depth + 1}
           element={element}
@@ -348,7 +354,7 @@ export default function KeyValue({
         />
       ));
 
-      if (canEditValues && !isReadOnly) {
+      if (canEditValues && !isReadOnlyBasedOnMetadata) {
         children.push(
           <NewArrayValue
             key="NewKeyValue"
@@ -404,9 +410,9 @@ export default function KeyValue({
           key={key}
           alphaSort={alphaSort}
           bridge={bridge}
-          canDeletePaths={canDeletePaths && !isReadOnly}
-          canEditValues={canEditValues && !isReadOnly}
-          canRenamePaths={canRenamePaths && !isReadOnly}
+          canDeletePaths={canDeletePaths && !isReadOnlyBasedOnMetadata}
+          canEditValues={canEditValues && !isReadOnlyBasedOnMetadata}
+          canRenamePaths={canRenamePaths && !isReadOnlyBasedOnMetadata}
           canRenamePathsAtDepth={canRenamePathsAtDepth}
           depth={depth + 1}
           element={element}
@@ -421,7 +427,7 @@ export default function KeyValue({
         />
       ));
 
-      if (canEditValues && !isReadOnly) {
+      if (canEditValues && !isReadOnlyBasedOnMetadata) {
         children.push(
           <NewKeyValue
             key="NewKeyValue"
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 629bc0f72113..061ea131a9bf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -23,7 +23,7 @@ import {FixedSizeList} from 'react-window';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import Icon from '../Icon';
 import {SettingsContext} from '../Settings/SettingsContext';
-import {BridgeContext, StoreContext} from '../context';
+import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
@@ -62,6 +62,7 @@ export default function Tree(props: Props) {
   } = useContext(TreeStateContext);
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
+  const {hideSettings} = useContext(OptionsContext);
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(
     false,
   );
@@ -344,11 +345,11 @@ export default function Tree(props: Props) {
           <Suspense fallback={<Loading />}>
             {ownerID !== null ? <OwnersStack /> : <SearchInput />}
           </Suspense>
-          <div className={styles.VRule} />
           {showInlineWarningsAndErrors &&
             ownerID === null &&
             (errors > 0 || warnings > 0) && (
               <React.Fragment>
+                <div className={styles.VRule} />
                 {errors > 0 && (
                   <div className={styles.IconAndCount}>
                     <Icon className={styles.ErrorIcon} type="error" />
@@ -376,10 +377,14 @@ export default function Tree(props: Props) {
                   title="Clear all errors and warnings">
                   <ButtonIcon type="clear" />
                 </Button>
-                <div className={styles.VRule} />
               </React.Fragment>
             )}
-          <SettingsModalContextToggle />
+          {!hideSettings && (
+            <Fragment>
+              <div className={styles.VRule} />
+              <SettingsModalContextToggle />
+            </Fragment>
+          )}
         </div>
         <div
           className={styles.AutoSizerWrapper}
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 8f1ccc554037..17a88d44cb5b 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -15,7 +15,12 @@ import '@reach/tooltip/styles.css';
 import * as React from 'react';
 import {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import Store from '../store';
-import {BridgeContext, ContextMenuContext, StoreContext} from './context';
+import {
+  BridgeContext,
+  ContextMenuContext,
+  StoreContext,
+  OptionsContext,
+} from './context';
 import Components from './Components/Components';
 import Profiler from './Profiler/Profiler';
 import TabBar from './TabBar';
@@ -74,6 +79,12 @@ export type Props = {|
   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.
@@ -126,6 +137,12 @@ export default function DevTools({
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
   viewElementSourceFunction,
+  readOnly,
+  hideSettings,
+  hideToggleErrorAction,
+  hideToggleSuspenseAction,
+  hideLogAction,
+  hideViewSourceAction,
 }: Props) {
   const [currentTab, setTab] = useLocalStorage<TabID>(
     'React::DevTools::defaultTab',
@@ -138,6 +155,25 @@ export default function DevTools({
     tab = overrideTab;
   }
 
+  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,
@@ -210,65 +246,67 @@ export default function DevTools({
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
-        <ContextMenuContext.Provider value={contextMenu}>
-          <ModalDialogContextController>
-            <SettingsContextController
-              browserTheme={browserTheme}
-              componentsPortalContainer={componentsPortalContainer}
-              profilerPortalContainer={profilerPortalContainer}>
-              <ViewElementSourceContext.Provider value={viewElementSource}>
-                <HookNamesContext.Provider value={hookNamesContext}>
-                  <TreeContextController>
-                    <ProfilerContextController>
-                      <SchedulingProfilerContextController>
-                        <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={setTab}
-                                  tabs={tabs}
-                                  type="navigation"
+        <OptionsContext.Provider value={options}>
+          <ContextMenuContext.Provider value={contextMenu}>
+            <ModalDialogContextController>
+              <SettingsContextController
+                browserTheme={browserTheme}
+                componentsPortalContainer={componentsPortalContainer}
+                profilerPortalContainer={profilerPortalContainer}>
+                <ViewElementSourceContext.Provider value={viewElementSource}>
+                  <HookNamesContext.Provider value={hookNamesContext}>
+                    <TreeContextController>
+                      <ProfilerContextController>
+                        <SchedulingProfilerContextController>
+                          <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={setTab}
+                                    tabs={tabs}
+                                    type="navigation"
+                                  />
+                                </div>
+                              )}
+                              <div
+                                className={styles.TabContent}
+                                hidden={tab !== 'components'}>
+                                <Components
+                                  portalContainer={componentsPortalContainer}
+                                />
+                              </div>
+                              <div
+                                className={styles.TabContent}
+                                hidden={tab !== 'profiler'}>
+                                <Profiler
+                                  portalContainer={profilerPortalContainer}
                                 />
                               </div>
-                            )}
-                            <div
-                              className={styles.TabContent}
-                              hidden={tab !== 'components'}>
-                              <Components
-                                portalContainer={componentsPortalContainer}
-                              />
-                            </div>
-                            <div
-                              className={styles.TabContent}
-                              hidden={tab !== 'profiler'}>
-                              <Profiler
-                                portalContainer={profilerPortalContainer}
-                              />
                             </div>
-                          </div>
-                        </ThemeProvider>
-                      </SchedulingProfilerContextController>
-                    </ProfilerContextController>
-                  </TreeContextController>
-                </HookNamesContext.Provider>
-              </ViewElementSourceContext.Provider>
-            </SettingsContextController>
-            <UnsupportedBridgeProtocolDialog />
-            {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
-            {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
-          </ModalDialogContextController>
-        </ContextMenuContext.Provider>
+                          </ThemeProvider>
+                        </SchedulingProfilerContextController>
+                      </ProfilerContextController>
+                    </TreeContextController>
+                  </HookNamesContext.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/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
index a26d704cd28a..169811b7b901 100644
--- a/packages/react-devtools-shared/src/devtools/views/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -31,3 +31,21 @@ export const ContextMenuContext = createContext<ContextMenuContextType>({
   viewAttributeSourceFunction: null,
 });
 ContextMenuContext.displayName = 'ContextMenuContext';
+
+export type OptionsContextType = {|
+  readOnly: boolean,
+  hideSettings: boolean,
+  hideToggleErrorAction: boolean,
+  hideToggleSuspenseAction: boolean,
+  hideLogAction: boolean,
+  hideViewSourceAction: boolean,
+|};
+
+export const OptionsContext = createContext<OptionsContextType>({
+  readOnly: false,
+  hideSettings: false,
+  hideToggleErrorAction: false,
+  hideToggleSuspenseAction: false,
+  hideLogAction: false,
+  hideViewSourceAction: false,
+});

From 9e8fe11e118c07713c7af4458b70aae57c889394 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 20 Aug 2021 18:04:30 -0400
Subject: [PATCH 0786/1603] [DevTools] Keep query params in extracted source
 map urls (#22148)

## Summary

Our current logic for extracting source map urls assumed that the url contained no query params (e.g. `?foo=bar`), and when extracting the url we would cut off the query params. I noticed this during internal testing, since removing the query params would cause loading source maps to fail.

This commit fixes that behavior by ensuring that our regex captures the full url, including query params.

## Test Plan

- yarn flow
- yarn test
- yarn test-build-devtools
- added new regression tests
- named hooks still work on manual test of browser extension on a few different apps (code sandbox, create-react-app, internally).
---
 .../external/ComponentUsingHooksIndirectly.js |  2 +-
 .../external/ComponentWithCustomHook.js       |  2 +-
 .../ComponentWithExternalCustomHooks.js       |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      |  2 +-
 .../external/ComponentWithNestedHooks.js      |  2 +-
 .../ContainingStringSourceMappingURL.js       |  2 +-
 .../__compiled__/external/Example.js          |  2 +-
 .../__compiled__/external/InlineRequire.js    |  2 +-
 .../__compiled__/external/ToDoList.js         |  2 +-
 .../ComponentUsingHooksIndirectly.js          |  2 +-
 .../ComponentWithCustomHook.js                |  2 +-
 .../ComponentWithExternalCustomHooks.js       |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      |  2 +-
 .../ComponentWithNestedHooks.js               |  2 +-
 .../ContainingStringSourceMappingURL.js       |  2 +-
 .../external/fb-sources-extended/Example.js   |  2 +-
 .../fb-sources-extended/InlineRequire.js      |  2 +-
 .../external/fb-sources-extended/ToDoList.js  |  2 +-
 .../ComponentUsingHooksIndirectly.js          |  2 +-
 .../index-map/ComponentWithCustomHook.js      |  2 +-
 .../ComponentWithExternalCustomHooks.js       |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      |  2 +-
 .../index-map/ComponentWithNestedHooks.js     |  2 +-
 .../ContainingStringSourceMappingURL.js       |  2 +-
 .../fb-sources-extended/index-map/Example.js  |  2 +-
 .../index-map/InlineRequire.js                |  2 +-
 .../fb-sources-extended/index-map/ToDoList.js |  2 +-
 .../fb-sources-extended/index-map/index.js    |  2 +-
 .../fb-sources-extended/index-map/useTheme.js |  2 +-
 .../external/fb-sources-extended/index.js     |  2 +-
 .../external/fb-sources-extended/useTheme.js  |  2 +-
 .../ComponentUsingHooksIndirectly.js          |  2 +-
 .../index-map/ComponentWithCustomHook.js      |  2 +-
 .../ComponentWithExternalCustomHooks.js       |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      |  2 +-
 .../index-map/ComponentWithNestedHooks.js     |  2 +-
 .../ContainingStringSourceMappingURL.js       |  2 +-
 .../external/index-map/Example.js             |  2 +-
 .../external/index-map/InlineRequire.js       |  2 +-
 .../external/index-map/ToDoList.js            |  2 +-
 .../__compiled__/external/index-map/index.js  |  2 +-
 .../external/index-map/useTheme.js            |  2 +-
 .../__source__/__compiled__/external/index.js |  2 +-
 .../ComponentUsingHooksIndirectly.js          |  2 +-
 .../ComponentWithCustomHook.js                |  2 +-
 .../ComponentWithExternalCustomHooks.js       |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      |  2 +-
 .../ComponentWithNestedHooks.js               |  2 +-
 .../ContainingStringSourceMappingURL.js       |  2 +-
 .../react-sources-extended/Example.js         |  2 +-
 .../react-sources-extended/InlineRequire.js   |  2 +-
 .../react-sources-extended/ToDoList.js        |  2 +-
 .../ComponentUsingHooksIndirectly.js          |  2 +-
 .../index-map/ComponentWithCustomHook.js      |  2 +-
 .../ComponentWithExternalCustomHooks.js       |  2 +-
 .../ComponentWithMultipleHooksPerLine.js      |  2 +-
 .../index-map/ComponentWithNestedHooks.js     |  2 +-
 .../ContainingStringSourceMappingURL.js       |  2 +-
 .../index-map/Example.js                      |  2 +-
 .../index-map/InlineRequire.js                |  2 +-
 .../index-map/ToDoList.js                     |  2 +-
 .../react-sources-extended/index-map/index.js |  2 +-
 .../index-map/useTheme.js                     |  2 +-
 .../external/react-sources-extended/index.js  |  2 +-
 .../react-sources-extended/useTheme.js        |  2 +-
 .../__compiled__/external/useTheme.js         |  2 +-
 .../src/__tests__/parseHookNames-test.js      | 10 +++++-
 .../src/__tests__/updateMockSourceMaps.js     | 18 ++++++----
 .../src/parseHookNames/parseHookNames.js      | 33 ++++++++++++-------
 69 files changed, 109 insertions(+), 84 deletions(-)

diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
index 6925712d17c7..fd8c1cdadf35 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
@@ -42,4 +42,4 @@ function useIsDarkMode() {
   }, []);
   return [isDarkMode, () => {}];
 }
-//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
index a5f54607fdd3..e9441c46a401 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
@@ -48,4 +48,4 @@ function useFoo() {
     foo: true
   };
 }
-//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
index 05aedb938b71..2a3f24cad910 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
@@ -23,4 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
index c657f3eb5455..e569ffa7d850 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
@@ -27,4 +27,4 @@ function Component() {
 
   return a + b + c + d;
 }
-//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
index 3cfed69078a8..ec85bcad867e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
@@ -25,4 +25,4 @@ function Component(props) {
 module.exports = {
   Component
 };
-//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
index 0fc2c078ca12..ffa5f98aeaf9 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
@@ -26,4 +26,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
index 19134738824b..2ab9daad9b7b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
@@ -25,4 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=Example.js.map
\ No newline at end of file
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
index 388aeda62b30..b9b234f86bdb 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
@@ -18,4 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
index a6eb863b661f..d506efef4769 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
@@ -103,4 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
index 6925712d17c7..fd8c1cdadf35 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
@@ -42,4 +42,4 @@ function useIsDarkMode() {
   }, []);
   return [isDarkMode, () => {}];
 }
-//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
index a5f54607fdd3..e9441c46a401 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
@@ -48,4 +48,4 @@ function useFoo() {
     foo: true
   };
 }
-//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
index 05aedb938b71..2a3f24cad910 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
@@ -23,4 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
index c657f3eb5455..e569ffa7d850 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -27,4 +27,4 @@ function Component() {
 
   return a + b + c + d;
 }
-//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
index 3cfed69078a8..ec85bcad867e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
@@ -25,4 +25,4 @@ function Component(props) {
 module.exports = {
   Component
 };
-//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
index 0fc2c078ca12..ffa5f98aeaf9 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
@@ -26,4 +26,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
index 19134738824b..2ab9daad9b7b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
@@ -25,4 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=Example.js.map
\ No newline at end of file
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
index 388aeda62b30..b9b234f86bdb 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
@@ -18,4 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
index a6eb863b661f..d506efef4769 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
@@ -103,4 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
index 6925712d17c7..fd8c1cdadf35 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -42,4 +42,4 @@ function useIsDarkMode() {
   }, []);
   return [isDarkMode, () => {}];
 }
-//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
index a5f54607fdd3..e9441c46a401 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -48,4 +48,4 @@ function useFoo() {
     foo: true
   };
 }
-//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
index 05aedb938b71..2a3f24cad910 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
@@ -23,4 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
index c657f3eb5455..e569ffa7d850 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
@@ -27,4 +27,4 @@ function Component() {
 
   return a + b + c + d;
 }
-//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
index 3cfed69078a8..ec85bcad867e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -25,4 +25,4 @@ function Component(props) {
 module.exports = {
   Component
 };
-//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
index 0fc2c078ca12..ffa5f98aeaf9 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -26,4 +26,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
index 19134738824b..2ab9daad9b7b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
@@ -25,4 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=Example.js.map
\ No newline at end of file
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
index 388aeda62b30..b9b234f86bdb 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
@@ -18,4 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
index a6eb863b661f..d506efef4769 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
@@ -103,4 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
index a0f706b19fba..d2e562169987 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
@@ -86,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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
\ No newline at end of file
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
index 95bb454253ec..5cabcdde5f6d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
@@ -24,4 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=useTheme.js.map
\ No newline at end of file
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
index a0f706b19fba..d2e562169987 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
@@ -86,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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
\ No newline at end of file
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
index 95bb454253ec..5cabcdde5f6d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
@@ -24,4 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=useTheme.js.map
\ No newline at end of file
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
index 6925712d17c7..fd8c1cdadf35 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
@@ -42,4 +42,4 @@ function useIsDarkMode() {
   }, []);
   return [isDarkMode, () => {}];
 }
-//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
index a5f54607fdd3..e9441c46a401 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
@@ -48,4 +48,4 @@ function useFoo() {
     foo: true
   };
 }
-//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
index 05aedb938b71..2a3f24cad910 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
@@ -23,4 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
index c657f3eb5455..e569ffa7d850 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
@@ -27,4 +27,4 @@ function Component() {
 
   return a + b + c + d;
 }
-//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
index 3cfed69078a8..ec85bcad867e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
@@ -25,4 +25,4 @@ function Component(props) {
 module.exports = {
   Component
 };
-//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
index 0fc2c078ca12..ffa5f98aeaf9 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
@@ -26,4 +26,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
index 19134738824b..2ab9daad9b7b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
@@ -25,4 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=Example.js.map
\ No newline at end of file
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
index 388aeda62b30..b9b234f86bdb 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
@@ -18,4 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
index a6eb863b661f..d506efef4769 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
@@ -103,4 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js
index a0f706b19fba..d2e562169987 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js
@@ -86,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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
\ No newline at end of file
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js
index 95bb454253ec..5cabcdde5f6d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js
@@ -24,4 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=useTheme.js.map
\ No newline at end of file
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
index a0f706b19fba..d2e562169987 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
@@ -86,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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
\ No newline at end of file
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
index 6925712d17c7..fd8c1cdadf35 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
@@ -42,4 +42,4 @@ function useIsDarkMode() {
   }, []);
   return [isDarkMode, () => {}];
 }
-//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
index a5f54607fdd3..e9441c46a401 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
@@ -48,4 +48,4 @@ function useFoo() {
     foo: true
   };
 }
-//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
index 05aedb938b71..2a3f24cad910 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
@@ -23,4 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
index c657f3eb5455..e569ffa7d850 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -27,4 +27,4 @@ function Component() {
 
   return a + b + c + d;
 }
-//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
index 3cfed69078a8..ec85bcad867e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
@@ -25,4 +25,4 @@ function Component(props) {
 module.exports = {
   Component
 };
-//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
index 0fc2c078ca12..ffa5f98aeaf9 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
@@ -26,4 +26,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
index 19134738824b..2ab9daad9b7b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
@@ -25,4 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=Example.js.map
\ No newline at end of file
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
index 388aeda62b30..b9b234f86bdb 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
@@ -18,4 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
index a6eb863b661f..d506efef4769 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
@@ -103,4 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
index 6925712d17c7..fd8c1cdadf35 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -42,4 +42,4 @@ function useIsDarkMode() {
   }, []);
   return [isDarkMode, () => {}];
 }
-//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentUsingHooksIndirectly.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
index a5f54607fdd3..e9441c46a401 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
@@ -48,4 +48,4 @@ function useFoo() {
     foo: true
   };
 }
-//# sourceMappingURL=ComponentWithCustomHook.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithCustomHook.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
index 05aedb938b71..2a3f24cad910 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
@@ -23,4 +23,4 @@ function Component() {
   const theme = (0, _useTheme.default)();
   return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
 }
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
index c657f3eb5455..e569ffa7d850 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
@@ -27,4 +27,4 @@ function Component() {
 
   return a + b + c + d;
 }
-//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithMultipleHooksPerLine.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
index 3cfed69078a8..ec85bcad867e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -25,4 +25,4 @@ function Component(props) {
 module.exports = {
   Component
 };
-//# sourceMappingURL=ComponentWithNestedHooks.js.map
\ No newline at end of file
+//# sourceMappingURL=ComponentWithNestedHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
index 0fc2c078ca12..ffa5f98aeaf9 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
@@ -26,4 +26,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map
\ No newline at end of file
+//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
index 19134738824b..2ab9daad9b7b 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
@@ -25,4 +25,4 @@ function Component() {
     onClick: () => setCount(count + 1)
   }, "Click me"));
 }
-//# sourceMappingURL=Example.js.map
\ No newline at end of file
+//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
index 388aeda62b30..b9b234f86bdb 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
@@ -18,4 +18,4 @@ function Component() {
 
   return count;
 }
-//# sourceMappingURL=InlineRequire.js.map
\ No newline at end of file
+//# sourceMappingURL=InlineRequire.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
index a6eb863b661f..d506efef4769 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
@@ -103,4 +103,4 @@ function List(props) {
     toggleItem: toggleItem
   }))));
 }
-//# sourceMappingURL=ToDoList.js.map
\ No newline at end of file
+//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
index a0f706b19fba..d2e562169987 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
@@ -86,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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
\ No newline at end of file
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
index 95bb454253ec..5cabcdde5f6d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
@@ -24,4 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=useTheme.js.map
\ No newline at end of file
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
index a0f706b19fba..d2e562169987 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
@@ -86,4 +86,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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
\ No newline at end of file
+//# sourceMappingURL=index.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
index 95bb454253ec..5cabcdde5f6d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
@@ -24,4 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=useTheme.js.map
\ No newline at end of file
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
index 95bb454253ec..5cabcdde5f6d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
+++ b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
@@ -24,4 +24,4 @@ function useTheme() {
   (0, _react.useDebugValue)(theme);
   return theme;
 }
-//# sourceMappingURL=useTheme.js.map
\ No newline at end of file
+//# sourceMappingURL=useTheme.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index a5fe6fb25802..dd500bbfb2ea 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -57,7 +57,15 @@ describe('parseHookNames', () => {
     };
 
     fetchMock.mockIf(/.+$/, request => {
-      return requireText(request.url, 'utf8');
+      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');
     });
   });
 
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
index 7af2a949067c..48ddcbe3907a 100644
--- a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
+++ b/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
@@ -97,7 +97,8 @@ function compile(fileName) {
   // Generate compiled output with external source maps
   writeFileSync(
     resolve(externalDir, fileName),
-    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
     'utf8',
   );
   writeFileSync(
@@ -167,7 +168,8 @@ function compile(fileName) {
   // Generate compiled output using external source maps using index map format
   writeFileSync(
     resolve(externalIndexMapDir, fileName),
-    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
     'utf8',
   );
   writeFileSync(
@@ -242,7 +244,8 @@ function compile(fileName) {
   );
   writeFileSync(
     resolve(externalFbSourcesExtendedDir, fileName),
-    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
     'utf8',
   );
   writeFileSync(
@@ -260,7 +263,8 @@ function compile(fileName) {
   );
   writeFileSync(
     resolve(externalFbSourcesIndexMapExtendedDir, fileName),
-    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
     'utf8',
   );
   writeFileSync(
@@ -279,7 +283,8 @@ function compile(fileName) {
   );
   writeFileSync(
     resolve(externalReactSourcesExtendedDir, fileName),
-    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
     'utf8',
   );
   writeFileSync(
@@ -297,7 +302,8 @@ function compile(fileName) {
   );
   writeFileSync(
     resolve(externalReactSourcesIndexMapExtendedDir, fileName),
-    transformed.code + `\n//# sourceMappingURL=${fileName}.map`,
+    transformed.code +
+      `\n//# sourceMappingURL=${fileName}.map?foo=bar&param=some_value`,
     'utf8',
   );
   writeFileSync(
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 23364ba68e91..ec7a57a0a714 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -26,7 +26,6 @@ import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
 import type {Thenable} from 'shared/ReactTypes';
 import type {SourceConsumer} from '../astUtils';
 
-const SOURCE_MAP_REGEX = / ?sourceMappingURL=([^\s'"]+)/gm;
 const MAX_SOURCE_LENGTH = 100_000_000;
 
 type AST = mixed;
@@ -213,18 +212,20 @@ function extractAndLoadSourceMaps(
       return;
     }
 
+    const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
     const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
-    const sourceMappingURLs = runtimeSourceCode.match(SOURCE_MAP_REGEX);
-    if (sourceMappingURLs == null) {
+    let sourceMappingURLMatch = sourceMapRegex.exec(runtimeSourceCode);
+    if (sourceMappingURLMatch == null) {
       // Maybe file has not been transformed; we'll try to parse it as-is in parseSourceAST().
 
       if (__DEBUG__) {
         console.log('extractAndLoadSourceMaps() No source map found');
       }
     } else {
-      for (let i = 0; i < sourceMappingURLs.length; i++) {
+      const externalSourceMapURLs = [];
+      while (sourceMappingURLMatch != null) {
         const {runtimeSourceURL} = hookSourceData;
-        const sourceMappingURL = sourceMappingURLs[i];
+        const sourceMappingURL = sourceMappingURLMatch[1];
         const hasInlineSourceMap = sourceMappingURL.indexOf('base64,') >= 0;
         if (hasInlineSourceMap) {
           // TODO (named hooks) deduplicate parsing in this branch (similar to fetching in the other branch)
@@ -257,19 +258,30 @@ function extractAndLoadSourceMaps(
             break;
           }
         } else {
-          let url = sourceMappingURLs[i].split('=')[1];
+          externalSourceMapURLs.push(sourceMappingURL);
+        }
+
+        sourceMappingURLMatch = sourceMapRegex.exec(runtimeSourceCode);
+      }
 
-          if (i !== sourceMappingURLs.length - 1) {
+      const foundInlineSourceMap =
+        hookSourceData.sourceConsumer != null &&
+        hookSourceData.metadataConsumer != null;
+      if (!foundInlineSourceMap) {
+        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 "${url}"`,
+              `More than one external source map detected in the source file; skipping "${sourceMappingURL}"`,
             );
-            continue;
+            return;
           }
 
+          const {runtimeSourceURL} = hookSourceData;
+          let url = sourceMappingURL;
           if (!url.startsWith('http') && !url.startsWith('/')) {
             // Resolve paths relative to the location of the file name
             const lastSlashIdx = runtimeSourceURL.lastIndexOf('/');
@@ -316,8 +328,7 @@ function extractAndLoadSourceMaps(
               hookSourceData.sourceConsumer = result?.sourceConsumer ?? null;
             }),
           );
-          break;
-        }
+        });
       }
     }
   });

From f5e529176eb676caa4ac0577f83efd5e464b3ccf Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Sun, 22 Aug 2021 20:37:36 +0300
Subject: [PATCH 0787/1603] Fix typo in preprocessData.js (#22150)

Fix typo:

SUSPEND_DURING_UPATE  ->  SUSPEND_DURING_UPDATE
---
 .../src/import-worker/preprocessData.js                       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index a7545ef1b7a1..75cb6f5f442a 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -67,7 +67,7 @@ const WARNING_STRINGS = {
     '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_UPATE:
+  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.",
 };
@@ -951,7 +951,7 @@ export default async function preprocessData(
           lane => profilerData.laneToLabelMap.get(lane) === 'Transition',
         )
       ) {
-        suspenseEvent.warning = WARNING_STRINGS.SUSPEND_DURING_UPATE;
+        suspenseEvent.warning = WARNING_STRINGS.SUSPEND_DURING_UPDATE;
       }
     },
   );

From fc3b6a4118de30ae76f67c2be3d463679c11f4b7 Mon Sep 17 00:00:00 2001
From: Bowen <bowen31337@users.noreply.github.com>
Date: Mon, 23 Aug 2021 04:11:35 +1000
Subject: [PATCH 0788/1603] Fix a few typos (#22154)

Co-authored-by: Bowen Li <bowen31337@gmail.com>
---
 .../src/ReactFiberBeginWork.new.js                 |  4 ++--
 .../src/ReactFiberBeginWork.old.js                 |  4 ++--
 .../src/ReactFiberCommitWork.new.js                |  2 +-
 .../src/ReactFiberCommitWork.old.js                |  2 +-
 .../src/ReactFiberCompleteWork.new.js              | 14 +++++++-------
 .../src/ReactFiberCompleteWork.old.js              | 14 +++++++-------
 packages/react-reconciler/src/ReactFiberFlags.js   |  4 ++--
 .../react-reconciler/src/ReactFiberHooks.new.js    | 12 ++++++------
 .../react-reconciler/src/ReactFiberHooks.old.js    | 12 ++++++------
 .../src/ReactFiberInterleavedUpdates.new.js        |  2 +-
 .../src/ReactFiberInterleavedUpdates.old.js        |  2 +-
 .../src/ReactFiberNewContext.new.js                |  6 +++---
 .../src/ReactFiberNewContext.old.js                |  6 +++---
 .../src/ReactFiberReconciler.new.js                |  2 +-
 .../src/ReactFiberReconciler.old.js                |  2 +-
 .../src/ReactFiberSyncTaskQueue.new.js             |  2 +-
 .../src/ReactFiberSyncTaskQueue.old.js             |  2 +-
 .../react-reconciler/src/ReactUpdateQueue.new.js   |  2 +-
 .../react-reconciler/src/ReactUpdateQueue.old.js   |  2 +-
 .../src/__tests__/ReactEffectOrdering-test.js      |  4 ++--
 .../__tests__/ReactHooksWithNoopRenderer-test.js   |  2 +-
 .../__tests__/useMutableSource-test.internal.js    | 10 +++++-----
 packages/react/src/ReactAct.js                     |  2 +-
 packages/scheduler/src/forks/Scheduler.js          |  2 +-
 packages/scheduler/src/forks/SchedulerMock.js      |  2 +-
 25 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 9c5ca0700855..cadf7d252d83 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1901,7 +1901,7 @@ function shouldRemainOnFallback(
   if (current !== null) {
     const suspenseState: SuspenseState = current.memoizedState;
     if (suspenseState === null) {
-      // Currently showing content. Don't hide it, even if ForceSuspenseFallack
+      // 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.
@@ -1973,7 +1973,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   pushSuspenseContext(workInProgress, suspenseContext);
 
   // OK, the next part is confusing. We're about to reconcile the Suspense
-  // boundary's children. This involves some custom reconcilation logic. Two
+  // 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
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 2e6448d338f8..962f592a3255 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1901,7 +1901,7 @@ function shouldRemainOnFallback(
   if (current !== null) {
     const suspenseState: SuspenseState = current.memoizedState;
     if (suspenseState === null) {
-      // Currently showing content. Don't hide it, even if ForceSuspenseFallack
+      // 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.
@@ -1973,7 +1973,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   pushSuspenseContext(workInProgress, suspenseContext);
 
   // OK, the next part is confusing. We're about to reconcile the Suspense
-  // boundary's children. This involves some custom reconcilation logic. Two
+  // 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
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index f9d9ad39999f..b38b888fd402 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2095,7 +2095,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
   // TODO: The factoring of this phase could probably be improved. Consider
   // switching on the type of work before checking the flags. That's what
   // we do in all the other phases. I think this one is only different
-  // because of the shared reconcilation logic below.
+  // because of the shared reconciliation logic below.
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 60c230cd251b..2bae266c60dc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2095,7 +2095,7 @@ function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
   // TODO: The factoring of this phase could probably be improved. Consider
   // switching on the type of work before checking the flags. That's what
   // we do in all the other phases. I think this one is only different
-  // because of the shared reconcilation logic below.
+  // because of the shared reconciliation logic below.
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 9eff02536d5f..1382439f1ee7 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1231,7 +1231,7 @@ function completeWork(
 
                 // If this is a newly suspended tree, it might not get committed as
                 // part of the second pass. In that case nothing will subscribe to
-                // its thennables. Instead, we'll transfer its thennables to the
+                // 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
@@ -1241,9 +1241,9 @@ function completeWork(
                 // 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 newThennables = suspended.updateQueue;
-                if (newThennables !== null) {
-                  workInProgress.updateQueue = newThennables;
+                const newThenables = suspended.updateQueue;
+                if (newThenables !== null) {
+                  workInProgress.updateQueue = newThenables;
                   workInProgress.flags |= Update;
                 }
 
@@ -1303,9 +1303,9 @@ function completeWork(
 
             // 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 newThennables = suspended.updateQueue;
-            if (newThennables !== null) {
-              workInProgress.updateQueue = newThennables;
+            const newThenables = suspended.updateQueue;
+            if (newThenables !== null) {
+              workInProgress.updateQueue = newThenables;
               workInProgress.flags |= Update;
             }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index b8011b7dcb4b..746e3d4b572d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1231,7 +1231,7 @@ function completeWork(
 
                 // If this is a newly suspended tree, it might not get committed as
                 // part of the second pass. In that case nothing will subscribe to
-                // its thennables. Instead, we'll transfer its thennables to the
+                // 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
@@ -1241,9 +1241,9 @@ function completeWork(
                 // 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 newThennables = suspended.updateQueue;
-                if (newThennables !== null) {
-                  workInProgress.updateQueue = newThennables;
+                const newThenables = suspended.updateQueue;
+                if (newThenables !== null) {
+                  workInProgress.updateQueue = newThenables;
                   workInProgress.flags |= Update;
                 }
 
@@ -1303,9 +1303,9 @@ function completeWork(
 
             // 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 newThennables = suspended.updateQueue;
-            if (newThennables !== null) {
-              workInProgress.updateQueue = newThennables;
+            const newThenables = suspended.updateQueue;
+            if (newThenables !== null) {
+              workInProgress.updateQueue = newThenables;
               workInProgress.flags |= Update;
             }
 
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index ce6460b02367..c85be46427cf 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -62,7 +62,7 @@ export const MountPassiveDev = /*              */ 0b10000000000000000000000;
 // don't contain effects, by checking subtreeFlags.
 
 export const BeforeMutationMask =
-  // TODO: Remove Update flag from before mutation phase by re-landing Visiblity
+  // TODO: Remove Update flag from before mutation phase by re-landing Visibility
   // flag logic (see #20043)
   Update |
   Snapshot |
@@ -88,6 +88,6 @@ export const LayoutMask = Update | Callback | Ref | Visibility;
 export const PassiveMask = Passive | ChildDeletion;
 
 // Union of tags that don't get reset on clones.
-// This allows certain concepts to persist without recalculting them,
+// 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;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index b195a0cb5748..7e86ac98bfaa 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -449,7 +449,7 @@ export function renderWithHooks<Props, SecondArg>(
   }
 
   // We can assume the previous dispatcher is always this one, since we set it
-  // at the beginning of the render phase and there's no re-entrancy.
+  // at the beginning of the render phase and there's no re-entrance.
   ReactCurrentDispatcher.current = ContextOnlyDispatcher;
 
   if (__DEV__) {
@@ -553,7 +553,7 @@ export function bailoutHooks(
 
 export function resetHooksAfterThrow(): void {
   // We can assume the previous dispatcher is always this one, since we set it
-  // at the beginning of the render phase and there's no re-entrancy.
+  // at the beginning of the render phase and there's no re-entrance.
   ReactCurrentDispatcher.current = ContextOnlyDispatcher;
 
   if (didScheduleRenderPhaseUpdate) {
@@ -934,7 +934,7 @@ type MutableSourceMemoizedState<Source, Snapshot> = {|
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 |};
 
-function readFromUnsubcribedMutableSource<Source, Snapshot>(
+function readFromUnsubscribedMutableSource<Source, Snapshot>(
   root: FiberRoot,
   source: MutableSource<Source>,
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
@@ -1074,7 +1074,7 @@ function useMutableSource<Source, Snapshot>(
 
   // eslint-disable-next-line prefer-const
   let [currentSnapshot, setSnapshot] = dispatcher.useState(() =>
-    readFromUnsubcribedMutableSource(root, source, getSnapshot),
+    readFromUnsubscribedMutableSource(root, source, getSnapshot),
   );
   let snapshot = currentSnapshot;
 
@@ -1208,7 +1208,7 @@ function useMutableSource<Source, Snapshot>(
     ): any);
     stateHook.queue = newQueue;
     stateHook.baseQueue = null;
-    snapshot = readFromUnsubcribedMutableSource(root, source, getSnapshot);
+    snapshot = readFromUnsubscribedMutableSource(root, source, getSnapshot);
     stateHook.memoizedState = stateHook.baseState = snapshot;
   }
 
@@ -1949,7 +1949,7 @@ function dispatchAction<S, A>(
         // This is the first update. Create a circular list.
         update.next = update;
         // At the end of the current render, this queue's interleaved updates will
-        // be transfered to the pending queue.
+        // be transferred to the pending queue.
         pushInterleavedQueue(queue);
       } else {
         update.next = interleaved.next;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 7c51c43ad2e7..cc5fa6149a00 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -449,7 +449,7 @@ export function renderWithHooks<Props, SecondArg>(
   }
 
   // We can assume the previous dispatcher is always this one, since we set it
-  // at the beginning of the render phase and there's no re-entrancy.
+  // at the beginning of the render phase and there's no re-entrance.
   ReactCurrentDispatcher.current = ContextOnlyDispatcher;
 
   if (__DEV__) {
@@ -553,7 +553,7 @@ export function bailoutHooks(
 
 export function resetHooksAfterThrow(): void {
   // We can assume the previous dispatcher is always this one, since we set it
-  // at the beginning of the render phase and there's no re-entrancy.
+  // at the beginning of the render phase and there's no re-entrance.
   ReactCurrentDispatcher.current = ContextOnlyDispatcher;
 
   if (didScheduleRenderPhaseUpdate) {
@@ -934,7 +934,7 @@ type MutableSourceMemoizedState<Source, Snapshot> = {|
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 |};
 
-function readFromUnsubcribedMutableSource<Source, Snapshot>(
+function readFromUnsubscribedMutableSource<Source, Snapshot>(
   root: FiberRoot,
   source: MutableSource<Source>,
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
@@ -1074,7 +1074,7 @@ function useMutableSource<Source, Snapshot>(
 
   // eslint-disable-next-line prefer-const
   let [currentSnapshot, setSnapshot] = dispatcher.useState(() =>
-    readFromUnsubcribedMutableSource(root, source, getSnapshot),
+    readFromUnsubscribedMutableSource(root, source, getSnapshot),
   );
   let snapshot = currentSnapshot;
 
@@ -1208,7 +1208,7 @@ function useMutableSource<Source, Snapshot>(
     ): any);
     stateHook.queue = newQueue;
     stateHook.baseQueue = null;
-    snapshot = readFromUnsubcribedMutableSource(root, source, getSnapshot);
+    snapshot = readFromUnsubscribedMutableSource(root, source, getSnapshot);
     stateHook.memoizedState = stateHook.baseState = snapshot;
   }
 
@@ -1949,7 +1949,7 @@ function dispatchAction<S, A>(
         // This is the first update. Create a circular list.
         update.next = update;
         // At the end of the current render, this queue's interleaved updates will
-        // be transfered to the pending queue.
+        // be transferred to the pending queue.
         pushInterleavedQueue(queue);
       } else {
         update.next = interleaved.next;
diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
index 2b8cf9529ddd..65460c7658ab 100644
--- a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
@@ -12,7 +12,7 @@ import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.new';
 
 // An array of all update queues that received updates during the current
 // render. When this render exits, either because it finishes or because it is
-// interrupted, the interleaved updates will be transfered onto the main part
+// interrupted, the interleaved updates will be transferred onto the main part
 // of the queue.
 let interleavedQueues: Array<
   HookQueue<any, any> | ClassQueue<any>,
diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
index 20096794461f..5fd769684ebd 100644
--- a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
@@ -12,7 +12,7 @@ import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.old';
 
 // An array of all update queues that received updates during the current
 // render. When this render exits, either because it finishes or because it is
-// interrupted, the interleaved updates will be transfered onto the main part
+// interrupted, the interleaved updates will be transferred onto the main part
 // of the queue.
 let interleavedQueues: Array<
   HookQueue<any, any> | ClassQueue<any>,
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 6195532d6127..421351b3bda5 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -192,7 +192,7 @@ function propagateContextChange_eager<T>(
   context: ReactContext<T>,
   renderLanes: Lanes,
 ): void {
-  // Only used by eager implemenation
+  // Only used by eager implementation
   if (enableLazyContextPropagation) {
     return;
   }
@@ -322,7 +322,7 @@ function propagateContextChanges<T>(
   renderLanes: Lanes,
   forcePropagateEntireTree: boolean,
 ): void {
-  // Only used by lazy implemenation
+  // Only used by lazy implementation
   if (!enableLazyContextPropagation) {
     return;
   }
@@ -351,7 +351,7 @@ function propagateContextChanges<T>(
           if (dependency.context === context) {
             // Match! Schedule an update on this fiber.
 
-            // In the lazy implemenation, don't mark a dirty flag on the
+            // 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
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 110e65d688d2..24fd5f6e4331 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -192,7 +192,7 @@ function propagateContextChange_eager<T>(
   context: ReactContext<T>,
   renderLanes: Lanes,
 ): void {
-  // Only used by eager implemenation
+  // Only used by eager implementation
   if (enableLazyContextPropagation) {
     return;
   }
@@ -322,7 +322,7 @@ function propagateContextChanges<T>(
   renderLanes: Lanes,
   forcePropagateEntireTree: boolean,
 ): void {
-  // Only used by lazy implemenation
+  // Only used by lazy implementation
   if (!enableLazyContextPropagation) {
     return;
   }
@@ -351,7 +351,7 @@ function propagateContextChanges<T>(
           if (dependency.context === context) {
             // Match! Schedule an update on this fiber.
 
-            // In the lazy implemenation, don't mark a dirty flag on the
+            // 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
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 7ab995a5fcb0..90503a183d94 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -381,7 +381,7 @@ function markRetryLaneImpl(fiber: Fiber, retryLane: Lane) {
   }
 }
 
-// Increases the priority of thennables when they resolve within this boundary.
+// Increases the priority of thenables when they resolve within this boundary.
 function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   markRetryLaneImpl(fiber, retryLane);
   const alternate = fiber.alternate;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index da127689c7c6..2608bc260264 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -381,7 +381,7 @@ function markRetryLaneImpl(fiber: Fiber, retryLane: Lane) {
   }
 }
 
-// Increases the priority of thennables when they resolve within this boundary.
+// Increases the priority of thenables when they resolve within this boundary.
 function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   markRetryLaneImpl(fiber, retryLane);
   const alternate = fiber.alternate;
diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
index 651825160302..0f72c3fbc863 100644
--- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
@@ -50,7 +50,7 @@ export function flushSyncCallbacksOnlyInLegacyMode() {
 
 export function flushSyncCallbacks() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
-    // Prevent re-entrancy.
+    // Prevent re-entrance.
     isFlushingSyncQueue = true;
     let i = 0;
     const previousUpdatePriority = getCurrentUpdatePriority();
diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
index 52b4b5d44b64..56422a38b137 100644
--- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
@@ -50,7 +50,7 @@ export function flushSyncCallbacksOnlyInLegacyMode() {
 
 export function flushSyncCallbacks() {
   if (!isFlushingSyncQueue && syncQueue !== null) {
-    // Prevent re-entrancy.
+    // Prevent re-entrance.
     isFlushingSyncQueue = true;
     let i = 0;
     const previousUpdatePriority = getCurrentUpdatePriority();
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index 06ee95a92c70..0b694d8f68ed 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -230,7 +230,7 @@ export function enqueueUpdate<State>(
       // This is the first update. Create a circular list.
       update.next = update;
       // At the end of the current render, this queue's interleaved updates will
-      // be transfered to the pending queue.
+      // be transferred to the pending queue.
       pushInterleavedQueue(sharedQueue);
     } else {
       update.next = interleaved.next;
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 520f993fbd81..9456a0a7c970 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -230,7 +230,7 @@ export function enqueueUpdate<State>(
       // This is the first update. Create a circular list.
       update.next = update;
       // At the end of the current render, this queue's interleaved updates will
-      // be transfered to the pending queue.
+      // be transferred to the pending queue.
       pushInterleavedQueue(sharedQueue);
     } else {
       update.next = interleaved.next;
diff --git a/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js b/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
index 05a8b84a7f78..5c5616eaca4d 100644
--- a/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactEffectOrdering-test.js
@@ -32,7 +32,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     useLayoutEffect = React.useLayoutEffect;
   });
 
-  test('layout unmmouts on deletion are fired in parent -> child order', async () => {
+  test('layout unmounts on deletion are fired in parent -> child order', async () => {
     const root = ReactNoop.createRoot();
 
     function Parent() {
@@ -59,7 +59,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     expect(Scheduler).toHaveYielded(['Unmount parent', 'Unmount child']);
   });
 
-  test('passive unmmouts on deletion are fired in parent -> child order', async () => {
+  test('passive unmounts on deletion are fired in parent -> child order', async () => {
     const root = ReactNoop.createRoot();
 
     function Parent() {
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 1cb098f93b7a..64207dcaa470 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1517,7 +1517,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    it('does not show a warning when a component updates a childs state from within passive unmount function', () => {
+    it('does not show a warning when a component updates a child state from within passive unmount function', () => {
       function Parent() {
         Scheduler.unstable_yieldValue('Parent');
         const updaterRef = useRef(null);
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index 1b56f3fc125c..c9988b4fc28a 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -179,7 +179,7 @@ describe('useMutableSource', () => {
       source.value = 'two';
       expect(Scheduler).toFlushAndYieldThrough(['a:two', 'b:two']);
 
-      // Umounting a component should remove its subscription.
+      // Unmounting a component should remove its subscription.
       ReactNoop.renderToRootWithID(
         <>
           <Component
@@ -196,7 +196,7 @@ describe('useMutableSource', () => {
       ReactNoop.flushPassiveEffects();
       expect(source.listenerCount).toBe(1);
 
-      // Umounting a root should remove the remaining event listeners
+      // Unmounting a root should remove the remaining event listeners
       ReactNoop.unmountRootWithID('root');
       expect(Scheduler).toFlushAndYield([]);
       ReactNoop.flushPassiveEffects();
@@ -1789,7 +1789,7 @@ describe('useMutableSource', () => {
 
   if (__DEV__) {
     // See https://github.com/facebook/react/issues/19948
-    describe('side effecte detection', () => {
+    describe('side effects detection', () => {
       it('should throw if a mutable source is mutated during render', () => {
         const source = createSource(0);
         const mutableSource = createMutableSource(
@@ -1805,7 +1805,7 @@ describe('useMutableSource', () => {
             defaultSubscribe,
           );
           Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
-          // Note that mutating an exeternal value during render is a side effect and is not supported.
+          // Note that mutating an external value during render is a side effect and is not supported.
           source.value = mutatedValueInRender++;
           return null;
         }
@@ -1848,7 +1848,7 @@ describe('useMutableSource', () => {
             defaultSubscribe,
           );
           Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
-          // Note that mutating an exeternal value during render is a side effect and is not supported.
+          // Note that mutating an external value during render is a side effect and is not supported.
           if (value === 'initial') {
             source.value = 'updated';
           }
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
index 1dc2d8fcd40b..586c99d2a375 100644
--- a/packages/react/src/ReactAct.js
+++ b/packages/react/src/ReactAct.js
@@ -203,7 +203,7 @@ let isFlushing = false;
 function flushActQueue(queue) {
   if (__DEV__) {
     if (!isFlushing) {
-      // Prevent re-entrancy.
+      // Prevent re-entrance.
       isFlushing = true;
       let i = 0;
       try {
diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index c32ef04ca392..2ffa20688bc4 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -78,7 +78,7 @@ var isSchedulerPaused = false;
 var currentTask = null;
 var currentPriorityLevel = NormalPriority;
 
-// This is set while performing work, to prevent re-entrancy.
+// This is set while performing work, to prevent re-entrance.
 var isPerformingWork = false;
 
 var isHostCallbackScheduled = false;
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 9d97c425308e..a229342d27fd 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -62,7 +62,7 @@ var isSchedulerPaused = false;
 var currentTask = null;
 var currentPriorityLevel = NormalPriority;
 
-// This is set while performing work, to prevent re-entrancy.
+// This is set while performing work, to prevent re-entrance.
 var isPerformingWork = false;
 
 var isHostCallbackScheduled = false;

From 4df10c58716a0118d753ac314dcb88f06b6d5a3d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Sun, 22 Aug 2021 16:53:07 -0400
Subject: [PATCH 0789/1603] Yarn replace-fork should not silently error
 (#22156)

---
 scripts/merge-fork/replace-fork.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/scripts/merge-fork/replace-fork.js b/scripts/merge-fork/replace-fork.js
index 0c68172cde8f..15a6f6998bb4 100644
--- a/scripts/merge-fork/replace-fork.js
+++ b/scripts/merge-fork/replace-fork.js
@@ -22,7 +22,15 @@ async function main() {
   await Promise.all(oldFilenames.map(unforkFile));
 
   // Use ESLint to autofix imports
-  spawnSync('yarn', ['linc', '--fix']);
+  const spawn = spawnSync('yarn', ['linc', '--fix'], {
+    stdio: ['inherit', 'inherit', 'pipe'],
+  });
+  if (spawn.stderr.toString() !== '') {
+    spawnSync('git', ['checkout', '.']);
+
+    console.log(Error(spawn.stderr));
+    process.exitCode = 1;
+  }
 }
 
 async function unforkFile(oldFilename) {

From 0da5ad09db7ac8c0f86142f7e5ff1f72e6d33810 Mon Sep 17 00:00:00 2001
From: Junaid Farooq <junaid@yarikul.in>
Date: Mon, 23 Aug 2021 20:25:37 +0530
Subject: [PATCH 0790/1603] Renames master to main in fixtures/flight webpack
 config file (#21998)

---
 fixtures/flight/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
index 2d4bbe74f614..abcff50d4d18 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -608,7 +608,7 @@ module.exports = function(webpackEnv) {
       // This is necessary to emit hot updates (CSS and Fast Refresh):
       isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Experimental hot reloading for React .
-      // https://github.com/facebook/react/tree/master/packages/react-refresh
+      // https://github.com/facebook/react/tree/main/packages/react-refresh
       isEnvDevelopment &&
         shouldUseReactRefresh &&
         new ReactRefreshWebpackPlugin({

From bd5bf555e1167e7088a4391e5cd419dccb39714c Mon Sep 17 00:00:00 2001
From: Byron Luk <byronluk@gmail.com>
Date: Mon, 23 Aug 2021 08:01:00 -0700
Subject: [PATCH 0791/1603] add more detailed error handling if profiling data
 does not have any React marks (#22157)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
---
 .../__tests__/preprocessData-test.internal.js | 23 +++++++++++++++++++
 .../src/import-worker/preprocessData.js       | 14 +++++++++++
 2 files changed, 37 insertions(+)

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 3481068f471b..3ea5051bcf53 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -234,6 +234,29 @@ describe('preprocessData', () => {
     await expect(async () => preprocessData([randomSample])).rejects.toThrow();
   });
 
+  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',
+    );
+  });
+
+  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',
+    );
+  });
+
   it('should return empty data given a timeline with no React scheduling profiling marks', async () => {
     const cpuProfilerSample = creactCpuProfilerSample();
     const randomSample = createUserTimingEntry({
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 75cb6f5f442a..5b1ec5636f07 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -912,6 +912,20 @@ export default async function preprocessData(
   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.`,
     );

From edfe50510b4129295cbe49f05d7b94bbfc48da5b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 23 Aug 2021 19:22:31 -0400
Subject: [PATCH 0792/1603] DevTools: Replaced WeakMap with LRU for inspected
 element cache (#22160)

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 thid 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.
---
 .../src/__tests__/inspectedElement-test.js    | 54 +++++++++++++++++++
 .../src/inspectedElementCache.js              |  5 +-
 .../src/inspectedElementMutableSource.js      | 38 ++++++++-----
 packages/react-devtools-shared/src/types.js   |  1 +
 4 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 886a54ceeec1..4586e34e32e1 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -1895,6 +1895,60 @@ describe('InspectedElement', () => {
     `);
   });
 
+  // Regression test for github.com/facebook/react/issues/22099
+  it('should not error when an unchanged component is re-inspected after component filters changed', async () => {
+    const Example = () => <div />;
+
+    const container = document.createElement('div');
+    await utils.actAsync(() => legacyRender(<Example />, container));
+
+    // Select/inspect element
+    let inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": Object {},
+        "state": null,
+      }
+    `);
+
+    await utils.actAsync(async () => {
+      // Ignore transient warning this causes
+      utils.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 defaultSelectedElementID 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.
+    testRendererInstance = TestRenderer.create(null, {
+      unstable_isConcurrent: true,
+    });
+
+    // Select/inspect the same element again
+    inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement).toMatchInlineSnapshot(`
+      Object {
+        "context": null,
+        "events": undefined,
+        "hooks": null,
+        "id": 2,
+        "owners": null,
+        "props": Object {},
+        "state": null,
+      }
+    `);
+  });
+
   describe('$r', () => {
     it('should support function components', async () => {
       const Example = () => {
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index f5d1ba5b9884..820a2a59a18b 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -88,7 +88,6 @@ export function inspectElement(
 ): InspectedElementFrontend | null {
   const map = getRecordMap();
   let record = map.get(element);
-
   if (!record) {
     const callbacks = new Set();
     const wakeable: Wakeable = {
@@ -110,7 +109,7 @@ export function inspectElement(
     if (rendererID == null) {
       const rejectedRecord = ((newRecord: any): RejectedRecord);
       rejectedRecord.status = Rejected;
-      rejectedRecord.value = `Could not inspect element with id "${element.id}"`;
+      rejectedRecord.value = `Could not inspect element with id "${element.id}". No renderer found.`;
 
       map.set(element, record);
 
@@ -134,7 +133,7 @@ export function inspectElement(
         if (newRecord.status === Pending) {
           const rejectedRecord = ((newRecord: any): RejectedRecord);
           rejectedRecord.status = Rejected;
-          rejectedRecord.value = `Could not inspect element with id "${element.id}"`;
+          rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
           wake();
         }
       },
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index f53ab6398b08..d0c288000595 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import LRU from 'lru-cache';
 import {
   convertInspectedElementBackendToFrontend,
   hydrateHelper,
@@ -14,6 +15,7 @@ import {
 } from 'react-devtools-shared/src/backendAPI';
 import {fillInPath} from 'react-devtools-shared/src/hydration';
 
+import type {LRUCache} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {
   InspectElementFullData,
@@ -25,15 +27,21 @@ import type {
   InspectedElementResponseType,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
 
-// Map an Element in the Store to the most recent copy of its inspected data.
-// As updates comes from the backend, inspected data is updated.
-// Both this map and the inspected objects in it are mutable.
-// They should never be read from directly during render;
-// Use a Suspense cache to ensure that transitions work correctly and there is no tearing.
-const inspectedElementMap: WeakMap<
-  Element,
+// 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 thid 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 WeakMap();
+> = new LRU({
+  max: 25,
+});
 
 type Path = Array<string | number>;
 
@@ -66,16 +74,18 @@ export function inspectElement({
     switch (type) {
       case 'no-change':
         // This is a no-op for the purposes of our cache.
-        inspectedElement = inspectedElementMap.get(element);
+        inspectedElement = inspectedElementCache.get(element.id);
         if (inspectedElement != null) {
           return [inspectedElement, type];
         }
-        break;
+
+        // 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.
-        inspectedElementMap.delete(element);
+        inspectedElementCache.remove(element.id);
 
         throw Error(`Element "${id}" not found`);
 
@@ -88,7 +98,7 @@ export function inspectElement({
           fullData.value,
         );
 
-        inspectedElementMap.set(element, inspectedElement);
+        inspectedElementCache.set(element.id, inspectedElement);
 
         return [inspectedElement, type];
 
@@ -98,7 +108,7 @@ export function inspectElement({
 
         // A path has been hydrated.
         // Merge it with the latest copy we have locally and resolve with the merged value.
-        inspectedElement = inspectedElementMap.get(element) || null;
+        inspectedElement = inspectedElementCache.get(element.id) || null;
         if (inspectedElement !== null) {
           // Clone element
           inspectedElement = {...inspectedElement};
@@ -111,7 +121,7 @@ export function inspectElement({
             hydrateHelper(value, ((path: any): Path)),
           );
 
-          inspectedElementMap.set(element, inspectedElement);
+          inspectedElementCache.set(element.id, inspectedElement);
 
           return [inspectedElement, type];
         }
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index 695dc95163fd..fbde156a5c10 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -87,6 +87,7 @@ export type HookNames = Map<HookSourceLocationKey, HookName>;
 export type LRUCache<K, V> = {|
   get: (key: K) => V,
   has: (key: K) => boolean,
+  remove: (key: K) => void,
   reset: () => void,
   set: (key: K, value: V) => void,
 |};

From b0b53ae2c1f38a7bf82b537dafb5f60f1bf14d0d Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 24 Aug 2021 12:47:51 -0400
Subject: [PATCH 0793/1603] Add feature flags for scheduler experiments
 (#22105)

---
 packages/scheduler/src/SchedulerFeatureFlags.js   |  3 +++
 packages/scheduler/src/forks/Scheduler.js         | 15 ++++++++-------
 .../forks/SchedulerFeatureFlags.www-dynamic.js    |  3 +++
 .../src/forks/SchedulerFeatureFlags.www.js        |  3 +++
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index 9b9deeb63ec1..0e82d57d34f1 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -9,3 +9,6 @@
 export const enableSchedulerDebugging = false;
 export const enableIsInputPending = false;
 export const enableProfiling = false;
+export const enableIsInputPendingContinuous = false;
+export const frameYieldMs = 5;
+export const continuousYieldMs = 50;
diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index 2ffa20688bc4..5cddcaae927e 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -11,6 +11,10 @@
 import {
   enableSchedulerDebugging,
   enableProfiling,
+  enableIsInputPending,
+  enableIsInputPendingContinuous,
+  frameYieldMs,
+  continuousYieldMs,
 } from '../SchedulerFeatureFlags';
 
 import {push, pop, peek} from '../SchedulerMinHeap';
@@ -36,8 +40,6 @@ import {
   startLoggingProfilingEvents,
 } from '../SchedulerProfiling';
 
-import {enableIsInputPending} from '../SchedulerFeatureFlags';
-
 let getCurrentTime;
 const hasPerformanceNow =
   typeof performance === 'object' && typeof performance.now === 'function';
@@ -98,7 +100,7 @@ const isInputPending =
     ? navigator.scheduling.isInputPending.bind(navigator.scheduling)
     : null;
 
-const continuousOptions = {includeContinuous: true};
+const continuousOptions = {includeContinuous: enableIsInputPendingContinuous};
 
 function advanceTimers(currentTime) {
   // Check for tasks that are no longer delayed and add them to the queue.
@@ -427,9 +429,8 @@ let taskTimeoutID = -1;
 // 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.
-// TODO: Make these configurable
-let frameInterval = 5;
-const continuousInputInterval = 50;
+let frameInterval = frameYieldMs;
+const continuousInputInterval = continuousYieldMs;
 const maxInterval = 300;
 let startTime = -1;
 
@@ -506,7 +507,7 @@ function forceFrameRate(fps) {
     frameInterval = Math.floor(1000 / fps);
   } else {
     // reset the framerate
-    frameInterval = 5;
+    frameInterval = frameYieldMs;
   }
 }
 
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
index 086762d7b707..9615918d127d 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
@@ -15,3 +15,6 @@
 export const enableIsInputPending = __VARIANT__;
 export const enableSchedulerDebugging = __VARIANT__;
 export const enableProfiling = __VARIANT__;
+export const enableIsInputPendingContinuous = __VARIANT__;
+export const frameYieldMs = 5;
+export const continuousYieldMs = 50;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index 9087af8b22f7..00e9b0ff6557 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -13,6 +13,9 @@ export const {
   enableIsInputPending,
   enableSchedulerDebugging,
   enableProfiling: enableProfilingFeatureFlag,
+  enableIsInputPendingContinuous,
+  frameYieldMs,
+  continuousYieldMs,
 } = dynamicFeatureFlags;
 
 export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;

From 76bbad3e34bc3403ddbe59e12845e8643dbb8d9f Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 24 Aug 2021 13:03:07 -0400
Subject: [PATCH 0794/1603] Add maxYieldMs feature flag in Scheduler (#22165)

---
 packages/scheduler/src/SchedulerFeatureFlags.js                | 1 +
 packages/scheduler/src/forks/Scheduler.js                      | 3 ++-
 .../scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js   | 1 +
 packages/scheduler/src/forks/SchedulerFeatureFlags.www.js      | 1 +
 4 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/scheduler/src/SchedulerFeatureFlags.js b/packages/scheduler/src/SchedulerFeatureFlags.js
index 0e82d57d34f1..8bcdfa4498ef 100644
--- a/packages/scheduler/src/SchedulerFeatureFlags.js
+++ b/packages/scheduler/src/SchedulerFeatureFlags.js
@@ -12,3 +12,4 @@ export const enableProfiling = false;
 export const enableIsInputPendingContinuous = false;
 export const frameYieldMs = 5;
 export const continuousYieldMs = 50;
+export const maxYieldMs = 300;
diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index 5cddcaae927e..0b7c54c10ba8 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -15,6 +15,7 @@ import {
   enableIsInputPendingContinuous,
   frameYieldMs,
   continuousYieldMs,
+  maxYieldMs,
 } from '../SchedulerFeatureFlags';
 
 import {push, pop, peek} from '../SchedulerMinHeap';
@@ -431,7 +432,7 @@ let taskTimeoutID = -1;
 // need to be frame aligned; for those that do, use requestAnimationFrame.
 let frameInterval = frameYieldMs;
 const continuousInputInterval = continuousYieldMs;
-const maxInterval = 300;
+const maxInterval = maxYieldMs;
 let startTime = -1;
 
 let needsPaint = false;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
index 9615918d127d..30a94e4d78f3 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www-dynamic.js
@@ -18,3 +18,4 @@ export const enableProfiling = __VARIANT__;
 export const enableIsInputPendingContinuous = __VARIANT__;
 export const frameYieldMs = 5;
 export const continuousYieldMs = 50;
+export const maxYieldMs = 300;
diff --git a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
index 00e9b0ff6557..e3731d3c566b 100644
--- a/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
+++ b/packages/scheduler/src/forks/SchedulerFeatureFlags.www.js
@@ -16,6 +16,7 @@ export const {
   enableIsInputPendingContinuous,
   frameYieldMs,
   continuousYieldMs,
+  maxYieldMs,
 } = dynamicFeatureFlags;
 
 export const enableProfiling = __PROFILE__ && enableProfilingFeatureFlag;

From b5fbf5464b7af9c0ba5d7eb32a03f0a17e54a413 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 24 Aug 2021 14:05:50 -0400
Subject: [PATCH 0795/1603] Automated DevTools release process (#22161)

---
 package.json                                  |   1 -
 .../chrome/manifest.json                      |  27 +-
 .../edge/manifest.json                        |  27 +-
 .../firefox/manifest.json                     |  28 +-
 packages/react-devtools/CHANGELOG.md          |   9 +-
 packages/react-devtools/get-commit-list.js    |  66 ---
 scripts/devtools/.gitignore                   |   1 +
 scripts/devtools/README.md                    |   0
 scripts/devtools/package.json                 |  16 +
 scripts/devtools/release.js                   | 553 ++++++++++++++++++
 scripts/devtools/yarn.lock                    | 529 +++++++++++++++++
 11 files changed, 1143 insertions(+), 114 deletions(-)
 delete mode 100644 packages/react-devtools/get-commit-list.js
 create mode 100644 scripts/devtools/.gitignore
 create mode 100644 scripts/devtools/README.md
 create mode 100644 scripts/devtools/package.json
 create mode 100755 scripts/devtools/release.js
 create mode 100644 scripts/devtools/yarn.lock

diff --git a/package.json b/package.json
index 2a3c967050d6..1bf9be46f889 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,6 @@
     "extract-errors": "yarn build --type=dev --extract-errors",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
     "debug-test": "yarn test --deprecated 'yarn test --debug'",
-    "generate-devtools-changelog": "node packages/react-devtools/get-commit-list.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",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 36119681dc3e..4a857a289817 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -4,16 +4,13 @@
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
   "version": "4.16.0",
   "version_name": "4.16.0",
-
   "minimum_chrome_version": "60",
-
   "icons": {
     "16": "icons/16-production.png",
     "32": "icons/32-production.png",
     "48": "icons/48-production.png",
     "128": "icons/128-production.png"
   },
-
   "browser_action": {
     "default_icon": {
       "16": "icons/16-disabled.png",
@@ -21,12 +18,9 @@
       "48": "icons/48-disabled.png",
       "128": "icons/128-disabled.png"
     },
-
     "default_popup": "popups/disabled.html"
   },
-
   "devtools_page": "main.html",
-
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "web_accessible_resources": [
     "main.html",
@@ -34,18 +28,25 @@
     "build/react_devtools_backend.js",
     "build/renderer.js"
   ],
-
   "background": {
-    "scripts": ["build/background.js"],
+    "scripts": [
+      "build/background.js"
+    ],
     "persistent": false
   },
-
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
-
+  "permissions": [
+    "file:///*",
+    "http://*/*",
+    "https://*/*"
+  ],
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["build/injectGlobalHook.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/injectGlobalHook.js"
+      ],
       "run_at": "document_start"
     }
   ]
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 65ab76b74d16..a2bc5047e6c3 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -4,16 +4,13 @@
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
   "version": "4.16.0",
   "version_name": "4.16.0",
-
   "minimum_chrome_version": "60",
-
   "icons": {
     "16": "icons/16-production.png",
     "32": "icons/32-production.png",
     "48": "icons/48-production.png",
     "128": "icons/128-production.png"
   },
-
   "browser_action": {
     "default_icon": {
       "16": "icons/16-disabled.png",
@@ -21,12 +18,9 @@
       "48": "icons/48-disabled.png",
       "128": "icons/128-disabled.png"
     },
-
     "default_popup": "popups/disabled.html"
   },
-
   "devtools_page": "main.html",
-
   "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
   "web_accessible_resources": [
     "main.html",
@@ -34,18 +28,25 @@
     "build/react_devtools_backend.js",
     "build/renderer.js"
   ],
-
   "background": {
-    "scripts": ["build/background.js"],
+    "scripts": [
+      "build/background.js"
+    ],
     "persistent": false
   },
-
-  "permissions": ["file:///*", "http://*/*", "https://*/*"],
-
+  "permissions": [
+    "file:///*",
+    "http://*/*",
+    "https://*/*"
+  ],
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["build/injectGlobalHook.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/injectGlobalHook.js"
+      ],
       "run_at": "document_start"
     }
   ]
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index dbabb5978cbd..2649deb0f58e 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -3,21 +3,18 @@
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
   "version": "4.16.0",
-
   "applications": {
     "gecko": {
       "id": "@react-devtools",
       "strict_min_version": "55.0"
     }
   },
-
   "icons": {
     "16": "icons/16-production.png",
     "32": "icons/32-production.png",
     "48": "icons/48-production.png",
     "128": "icons/128-production.png"
   },
-
   "browser_action": {
     "default_icon": {
       "16": "icons/16-disabled.png",
@@ -25,13 +22,10 @@
       "48": "icons/48-disabled.png",
       "128": "icons/128-disabled.png"
     },
-
     "default_popup": "popups/disabled.html",
     "browser_style": true
   },
-
   "devtools_page": "main.html",
-
   "content_security_policy": "script-src 'self' 'unsafe-eval' blob:; object-src 'self'",
   "web_accessible_resources": [
     "main.html",
@@ -39,17 +33,25 @@
     "build/react_devtools_backend.js",
     "build/renderer.js"
   ],
-
   "background": {
-    "scripts": ["build/background.js"]
+    "scripts": [
+      "build/background.js"
+    ]
   },
-
-  "permissions": ["file:///*", "http://*/*", "https://*/*", "clipboardWrite"],
-
+  "permissions": [
+    "file:///*",
+    "http://*/*",
+    "https://*/*",
+    "clipboardWrite"
+  ],
   "content_scripts": [
     {
-      "matches": ["<all_urls>"],
-      "js": ["build/injectGlobalHook.js"],
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "build/injectGlobalHook.js"
+      ],
       "run_at": "document_start"
     }
   ]
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index dd5d09b5e63b..bcf5ccb87c51 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -1,13 +1,6 @@
 # React DevTools changelog
 
-<details>
-  <summary>
-    Changes that have landed in main but are not yet released.
-    Click to see more.
-  </summary>
-
-  <!-- Upcoming changes go here -->
-</details>
+<!-- RELEASE_SCRIPT_TOKEN -->
 
 ## 4.16.0 (August 16, 2021)
 #### Features
diff --git a/packages/react-devtools/get-commit-list.js b/packages/react-devtools/get-commit-list.js
deleted file mode 100644
index d621ed916c5f..000000000000
--- a/packages/react-devtools/get-commit-list.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-const {execSync} = require('child_process');
-const readline = require('readline');
-
-const PULL_REQUEST_BASE_URL = 'https://github.com/facebook/react/pull/';
-
-const hashes = [];
-const lines = execSync(`
-  git log --max-count=5 --topo-order --pretty=format:'%H:::%s:::%as' HEAD -- packages/react-devtools-core/package.json
-`)
-  .toString()
-  .trim()
-  .split('\n');
-lines.forEach((line, index) => {
-  const [hash, message, date] = line.split(':::');
-  hashes.push(hash);
-  console.log(
-    `\x1b[1m(${index + 1})\x1b[0m ${message} \x1b[2m(${date})\x1b[0m`,
-  );
-});
-
-const prompt = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout,
-});
-prompt.question(
-  '\n' +
-    '\x1b[1m' +
-    'Which of the commits above marks the last DevTools release?' +
-    '\x1b[0m ',
-  numberString => {
-    const hashIndex = parseInt(numberString, 10) - 1;
-    const hash = hashes[hashIndex];
-
-    let formattedLog = '';
-
-    const rawLog = execSync(`
-    git log --topo-order --pretty=format:'%s' ${hash}...HEAD -- packages/react-devtools*
-  `)
-      .toString()
-      .trim();
-    rawLog.split('\n').forEach(line => {
-      line = line.replace('[DevTools] ', '');
-
-      const match = line.match(/(.+) \(#([0-9]+)\)/);
-      if (match !== null) {
-        const title = match[1];
-        const pr = match[2];
-
-        formattedLog += `\n* ${title} \x1b[31m([USERNAME](https://github.com/USERNAME)\x1b[0m in [#${pr}](\x1b[4m\x1b[34m${PULL_REQUEST_BASE_URL}${pr}\x1b[0m))`;
-      } else {
-        formattedLog += `\n* ${line}`;
-      }
-    });
-
-    console.log(formattedLog);
-
-    prompt.close();
-  },
-);
diff --git a/scripts/devtools/.gitignore b/scripts/devtools/.gitignore
new file mode 100644
index 000000000000..c8d23da2ed4e
--- /dev/null
+++ b/scripts/devtools/.gitignore
@@ -0,0 +1 @@
+.progress-estimator
\ No newline at end of file
diff --git a/scripts/devtools/README.md b/scripts/devtools/README.md
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/scripts/devtools/package.json b/scripts/devtools/package.json
new file mode 100644
index 000000000000..2188210b2392
--- /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/release.js b/scripts/devtools/release.js
new file mode 100755
index 000000000000..d403c0cd0246
--- /dev/null
+++ b/scripts/devtools/release.js
@@ -0,0 +1,553 @@
+#!/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 {homedir} = require('os');
+const createLogger = require('progress-estimator');
+const {join} = require('path');
+const semver = require('semver');
+
+const PACKAGE_PATHS = [
+  'packages/react-devtools/package.json',
+  'packages/react-devtools-core/package.json',
+  'packages/react-devtools-inline/package.json',
+  'packages/react-devtools-scheduling-profiler/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 logger = createLogger({
+  storagePath: join(__dirname, '.progress-estimator'),
+});
+
+// This is the primary control function for this script.
+async function main() {
+  await checkNPMPermissions();
+
+  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}.${patch}`
+      : `${major}.${minor}.${patch + 1}`;
+
+  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('');
+
+  const sha = await getPreviousCommitSha();
+  const commitLog = await getCommitLog(sha);
+
+  updateChangelog(nextVersion, commitLog);
+
+  await reviewChangelogPrompt();
+
+  await commitPendingChanges(previousVersion, nextVersion);
+
+  const archivePath = await archiveGitRevision();
+  const buildID = await downloadLatestReactBuild();
+
+  await buildAndTestInlinePackage();
+  await buildAndTestStandalonePackage();
+  await buildAndTestExtensions();
+
+  await publishToNPM();
+
+  await printFinalInstructions(buildID, archivePath);
+}
+
+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 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 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 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.bold('Insufficient NPM permissions'));
+    console.error('');
+    console.error(
+      `NPM user {underline ${currentUser}} is not an owner for: ${chalk.bold(
+        failedProjects.join(', ')
+      )}`
+    );
+    console.error(
+      'Please contact a React team member to be added to the above project(s).'
+    );
+    process.exit(1);
+  }
+}
+
+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 confirmContinue() {
+  console.log('');
+
+  const {confirm} = await inquirer.prompt({
+    name: 'confirm',
+    type: 'confirm',
+    message: 'Continue the release?',
+  });
+  if (!confirm) {
+    process.exit(0);
+  }
+
+  console.log('');
+}
+
+async function downloadLatestReactBuild() {
+  const releaseScriptPath = join(ROOT_PATH, 'scripts', 'release');
+  const installPromise = exec('yarn install', {cwd: releaseScriptPath});
+
+  await logger(installPromise, 'Installing release script dependencies.', {
+    estimate: 5000,
+  });
+
+  console.log('');
+
+  const {commit} = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'commit',
+      message: 'Which React version (commit) should be used?',
+      default: 'main',
+    },
+  ]);
+  console.log('');
+
+  const downloadScriptPath = join(
+    releaseScriptPath,
+    'download-experimental-build.js'
+  );
+  const downloadPromise = execRead(
+    `"${downloadScriptPath}" --commit=${commit}`
+  );
+
+  const output = await logger(
+    downloadPromise,
+    'Downloading React artifacts from CI.',
+    {estimate: 15000}
+  );
+
+  const match = output.match('--build=([0-9]+)');
+  if (match.length === 0) {
+    console.error(`No build ID found in "${output}"`);
+    process.exit(1);
+  }
+
+  const buildID = match[1];
+
+  console.log('');
+  console.log(`Downloaded artiacts for CI build ${chalk.bold(buildID)}.`);
+
+  await confirmContinue();
+
+  return buildID;
+}
+
+async function execRead(command, options) {
+  const {stdout} = await exec(command, options);
+
+  return stdout.trim();
+}
+
+async function getCommitLog(sha) {
+  let formattedLog = '';
+
+  const rawLog = await execRead(`
+    git log --topo-order --pretty=format:'%s' ${sha}...HEAD -- packages/react-devtools*
+  `);
+  rawLog.split('\n').forEach(line => {
+    line = line.replace('[DevTools] ', '');
+
+    const match = line.match(/(.+) \(#([0-9]+)\)/);
+    if (match !== null) {
+      const title = match[1];
+      const pr = match[2];
+
+      formattedLog += `\n* ${title} ([USERNAME](https://github.com/USERNAME) in [#${pr}](${PULL_REQUEST_BASE_URL}${pr}))`;
+    } else {
+      formattedLog += `\n* ${line}`;
+    }
+  });
+
+  return formattedLog;
+}
+
+async function getPreviousCommitSha() {
+  const choices = [];
+
+  const lines = await execRead(`
+    git log --max-count=5 --topo-order --pretty=format:'%H:::%s:::%as' HEAD -- ${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;
+}
+
+async function printFinalInstructions(buildID, 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(`  Build id: ${chalk.bold(buildID)}`);
+  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(`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);
+
+    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,
+        }
+      );
+    }
+  }
+}
+
+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. Organize the list into Features vs Bugfixes');
+  console.log('  1. Filter out any non-user-visible changes (e.g. typo fixes)');
+  console.log('  1. Combine related PRs into a single bullet list.');
+  console.log(
+    '  1. 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 = `## ${nextVersion} (${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/yarn.lock b/scripts/devtools/yarn.lock
new file mode 100644
index 000000000000..37c759ab79f0
--- /dev/null
+++ b/scripts/devtools/yarn.lock
@@ -0,0 +1,529 @@
+# 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==
+
+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==
+
+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==
+
+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"
+
+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=
+
+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"
+
+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"
+
+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"
+
+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"

From 582858083ee5de37e32f5a6b72654415774ad162 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 24 Aug 2021 11:12:42 -0700
Subject: [PATCH 0796/1603] React DevTools 4.16.0 -> 4.17.0

---
 packages/react-devtools-core/package.json          |  2 +-
 .../react-devtools-extensions/chrome/manifest.json |  4 ++--
 .../react-devtools-extensions/edge/manifest.json   |  4 ++--
 .../firefox/manifest.json                          |  2 +-
 packages/react-devtools-inline/package.json        |  2 +-
 .../package.json                                   |  2 +-
 packages/react-devtools/CHANGELOG.md               | 14 ++++++++++++++
 packages/react-devtools/package.json               |  4 ++--
 8 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 36d083d47e02..c0abc6a047c5 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 4a857a289817..6c9b44cef7ee 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.16.0",
-  "version_name": "4.16.0",
+  "version": "4.17.0",
+  "version_name": "4.17.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index a2bc5047e6c3..701d6fdad800 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.16.0",
-  "version_name": "4.16.0",
+  "version": "4.17.0",
+  "version_name": "4.17.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 2649deb0f58e..2f3577b7f65e 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index a6fcd41b45f2..feb537a91cdd 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 3c8900c0d8fb..64f208e7a63b 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index bcf5ccb87c51..8632862c1ef4 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 74f14f99fa3e..d8ad857ea3f4 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.16.0",
+    "react-devtools-core": "4.17.0",
     "update-notifier": "^2.1.0"
   }
 }

From b9964684bd8c909fc3d88f1cd47aa1f45ea7ba32 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 24 Aug 2021 18:59:34 -0400
Subject: [PATCH 0797/1603] DevTools release script updates: (#22170)

---
 scripts/devtools/.gitignore         |   3 +-
 scripts/devtools/README.md          |  30 ++
 scripts/devtools/build-and-test.js  | 221 +++++++++++
 scripts/devtools/configuration.js   |  46 +++
 scripts/devtools/prepare-release.js | 254 +++++++++++++
 scripts/devtools/publish-release.js | 116 ++++++
 scripts/devtools/release.js         | 553 ----------------------------
 scripts/devtools/utils.js           | 128 +++++++
 8 files changed, 797 insertions(+), 554 deletions(-)
 create mode 100755 scripts/devtools/build-and-test.js
 create mode 100644 scripts/devtools/configuration.js
 create mode 100755 scripts/devtools/prepare-release.js
 create mode 100755 scripts/devtools/publish-release.js
 delete mode 100755 scripts/devtools/release.js
 create mode 100644 scripts/devtools/utils.js

diff --git a/scripts/devtools/.gitignore b/scripts/devtools/.gitignore
index c8d23da2ed4e..c0a5522d94df 100644
--- a/scripts/devtools/.gitignore
+++ b/scripts/devtools/.gitignore
@@ -1 +1,2 @@
-.progress-estimator
\ No newline at end of file
+.build-metadata
+.progress-estimator
diff --git a/scripts/devtools/README.md b/scripts/devtools/README.md
index e69de29bb2d1..7f2410c3664e 100644
--- a/scripts/devtools/README.md
+++ 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 000000000000..cfd41bd809ae
--- /dev/null
+++ b/scripts/devtools/build-and-test.js
@@ -0,0 +1,221 @@
+#!/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 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 buildID = await downloadLatestReactBuild();
+
+  await buildAndTestInlinePackage();
+  await buildAndTestStandalonePackage();
+  await buildAndTestExtensions();
+
+  saveBuildMetadata({archivePath, buildID});
+
+  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 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 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 {commit} = await inquirer.prompt([
+    {
+      type: 'input',
+      name: 'commit',
+      message: 'Which React version (commit) should be used?',
+      default: 'main',
+    },
+  ]);
+  console.log('');
+
+  const downloadScriptPath = join(
+    releaseScriptPath,
+    'download-experimental-build.js'
+  );
+  const downloadPromise = execRead(
+    `"${downloadScriptPath}" --commit=${commit}`
+  );
+
+  const output = await logger(
+    downloadPromise,
+    'Downloading React artifacts from CI.',
+    {estimate: 15000}
+  );
+
+  const match = output.match('--build=([0-9]+)');
+  if (match.length === 0) {
+    console.error(chalk.red(`No build ID found in "${output}"`));
+    process.exit(1);
+  }
+
+  const buildID = match[1];
+
+  console.log('');
+  console.log(`Downloaded artiacts for CI build ${chalk.bold(buildID)}.`);
+
+  return buildID;
+}
+
+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 000000000000..e90b764b3619
--- /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-scheduling-profiler/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/prepare-release.js b/scripts/devtools/prepare-release.js
new file mode 100755
index 000000000000..5905eec621ad
--- /dev/null
+++ b/scripts/devtools/prepare-release.js
@@ -0,0 +1,254 @@
+#!/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 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}.${patch}`
+      : `${major}.${minor}.${patch + 1}`;
+
+  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('');
+
+  const sha = await getPreviousCommitSha();
+  const commitLog = await getCommitLog(sha);
+
+  updateChangelog(nextVersion, commitLog);
+
+  await reviewChangelogPrompt();
+
+  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 formattedLog = '';
+
+  const rawLog = await execRead(`
+    git log --topo-order --pretty=format:'%s' ${sha}...HEAD -- packages/react-devtools*
+  `);
+  rawLog.split('\n').forEach(line => {
+    line = line.replace('[DevTools] ', '');
+
+    const match = line.match(/(.+) \(#([0-9]+)\)/);
+    if (match !== null) {
+      const title = match[1];
+      const pr = match[2];
+
+      formattedLog += `\n* ${title} ([USERNAME](https://github.com/USERNAME) in [#${pr}](${PULL_REQUEST_BASE_URL}${pr}))`;
+    } else {
+      formattedLog += `\n* ${line}`;
+    }
+  });
+
+  return formattedLog;
+}
+
+async function getPreviousCommitSha() {
+  const choices = [];
+
+  const lines = await execRead(`
+    git log --max-count=5 --topo-order --pretty=format:'%H:::%s:::%as' HEAD -- ${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. Organize the list into Features vs Bugfixes');
+  console.log('  1. Filter out any non-user-visible changes (e.g. typo fixes)');
+  console.log('  1. Combine related PRs into a single bullet list.');
+  console.log(
+    '  1. 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 = `## ${nextVersion} (${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 000000000000..5fcfe89cb7ef
--- /dev/null
+++ b/scripts/devtools/publish-release.js
@@ -0,0 +1,116 @@
+#!/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, buildID} = readSavedBuildMetadata();
+
+  await checkNPMPermissions();
+
+  await publishToNPM();
+
+  await printFinalInstructions(buildID, archivePath);
+}
+
+async function printFinalInstructions(buildID, 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(`  Build id: ${chalk.bold(buildID)}`);
+  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 info = await execRead(`npm view ${npmPackage}@${version}`);
+    if (info) {
+      console.log('');
+      console.log(
+        `${npmPackage} version ${chalk.bold(
+          version
+        )} has already been published.`
+      );
+
+      await confirm('Is this expected?');
+    }
+
+    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/release.js b/scripts/devtools/release.js
deleted file mode 100755
index d403c0cd0246..000000000000
--- a/scripts/devtools/release.js
+++ /dev/null
@@ -1,553 +0,0 @@
-#!/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 {homedir} = require('os');
-const createLogger = require('progress-estimator');
-const {join} = require('path');
-const semver = require('semver');
-
-const PACKAGE_PATHS = [
-  'packages/react-devtools/package.json',
-  'packages/react-devtools-core/package.json',
-  'packages/react-devtools-inline/package.json',
-  'packages/react-devtools-scheduling-profiler/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 logger = createLogger({
-  storagePath: join(__dirname, '.progress-estimator'),
-});
-
-// This is the primary control function for this script.
-async function main() {
-  await checkNPMPermissions();
-
-  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}.${patch}`
-      : `${major}.${minor}.${patch + 1}`;
-
-  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('');
-
-  const sha = await getPreviousCommitSha();
-  const commitLog = await getCommitLog(sha);
-
-  updateChangelog(nextVersion, commitLog);
-
-  await reviewChangelogPrompt();
-
-  await commitPendingChanges(previousVersion, nextVersion);
-
-  const archivePath = await archiveGitRevision();
-  const buildID = await downloadLatestReactBuild();
-
-  await buildAndTestInlinePackage();
-  await buildAndTestStandalonePackage();
-  await buildAndTestExtensions();
-
-  await publishToNPM();
-
-  await printFinalInstructions(buildID, archivePath);
-}
-
-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 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 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 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.bold('Insufficient NPM permissions'));
-    console.error('');
-    console.error(
-      `NPM user {underline ${currentUser}} is not an owner for: ${chalk.bold(
-        failedProjects.join(', ')
-      )}`
-    );
-    console.error(
-      'Please contact a React team member to be added to the above project(s).'
-    );
-    process.exit(1);
-  }
-}
-
-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 confirmContinue() {
-  console.log('');
-
-  const {confirm} = await inquirer.prompt({
-    name: 'confirm',
-    type: 'confirm',
-    message: 'Continue the release?',
-  });
-  if (!confirm) {
-    process.exit(0);
-  }
-
-  console.log('');
-}
-
-async function downloadLatestReactBuild() {
-  const releaseScriptPath = join(ROOT_PATH, 'scripts', 'release');
-  const installPromise = exec('yarn install', {cwd: releaseScriptPath});
-
-  await logger(installPromise, 'Installing release script dependencies.', {
-    estimate: 5000,
-  });
-
-  console.log('');
-
-  const {commit} = await inquirer.prompt([
-    {
-      type: 'input',
-      name: 'commit',
-      message: 'Which React version (commit) should be used?',
-      default: 'main',
-    },
-  ]);
-  console.log('');
-
-  const downloadScriptPath = join(
-    releaseScriptPath,
-    'download-experimental-build.js'
-  );
-  const downloadPromise = execRead(
-    `"${downloadScriptPath}" --commit=${commit}`
-  );
-
-  const output = await logger(
-    downloadPromise,
-    'Downloading React artifacts from CI.',
-    {estimate: 15000}
-  );
-
-  const match = output.match('--build=([0-9]+)');
-  if (match.length === 0) {
-    console.error(`No build ID found in "${output}"`);
-    process.exit(1);
-  }
-
-  const buildID = match[1];
-
-  console.log('');
-  console.log(`Downloaded artiacts for CI build ${chalk.bold(buildID)}.`);
-
-  await confirmContinue();
-
-  return buildID;
-}
-
-async function execRead(command, options) {
-  const {stdout} = await exec(command, options);
-
-  return stdout.trim();
-}
-
-async function getCommitLog(sha) {
-  let formattedLog = '';
-
-  const rawLog = await execRead(`
-    git log --topo-order --pretty=format:'%s' ${sha}...HEAD -- packages/react-devtools*
-  `);
-  rawLog.split('\n').forEach(line => {
-    line = line.replace('[DevTools] ', '');
-
-    const match = line.match(/(.+) \(#([0-9]+)\)/);
-    if (match !== null) {
-      const title = match[1];
-      const pr = match[2];
-
-      formattedLog += `\n* ${title} ([USERNAME](https://github.com/USERNAME) in [#${pr}](${PULL_REQUEST_BASE_URL}${pr}))`;
-    } else {
-      formattedLog += `\n* ${line}`;
-    }
-  });
-
-  return formattedLog;
-}
-
-async function getPreviousCommitSha() {
-  const choices = [];
-
-  const lines = await execRead(`
-    git log --max-count=5 --topo-order --pretty=format:'%H:::%s:::%as' HEAD -- ${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;
-}
-
-async function printFinalInstructions(buildID, 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(`  Build id: ${chalk.bold(buildID)}`);
-  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(`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);
-
-    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,
-        }
-      );
-    }
-  }
-}
-
-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. Organize the list into Features vs Bugfixes');
-  console.log('  1. Filter out any non-user-visible changes (e.g. typo fixes)');
-  console.log('  1. Combine related PRs into a single bullet list.');
-  console.log(
-    '  1. 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 = `## ${nextVersion} (${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/utils.js b/scripts/devtools/utils.js
new file mode 100644
index 000000000000..17d0c1f40eb3
--- /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, buildID} = readJsonSync(path);
+
+  return {archivePath, buildID};
+}
+
+function saveBuildMetadata({archivePath, buildID}) {
+  const path = join(BUILD_METADATA_TEMP_DIRECTORY, 'metadata');
+
+  if (!existsSync(BUILD_METADATA_TEMP_DIRECTORY)) {
+    mkdirSync(BUILD_METADATA_TEMP_DIRECTORY);
+  }
+
+  writeJsonSync(path, {archivePath, buildID}, {spaces: 2});
+}
+
+module.exports = {
+  checkNPMPermissions,
+  clear,
+  confirm,
+  confirmContinue,
+  execRead,
+  logger,
+  readSavedBuildMetadata,
+  saveBuildMetadata,
+};

From 8456457c8d7766984b1bc030b14efb890ef47be2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 25 Aug 2021 15:39:15 -0400
Subject: [PATCH 0798/1603] Added performance timings to DevTools named hooks
 parsing (#22173)

---
 .../react-devtools-extensions/src/astUtils.js |  40 +++-
 .../src/parseHookNames/parseHookNames.js      | 171 +++++++++++++++++-
 .../react-devtools-shared/src/constants.js    |   3 +
 3 files changed, 203 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index 3b2e8c52d102..f7ffea3df8e7 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import {__PERFORMANCE_PROFILE__} from 'react-devtools-shared/src/constants';
 import traverse, {NodePath, Node} from '@babel/traverse';
 import {File} from '@babel/types';
 
@@ -27,6 +28,15 @@ export type SourceFileASTWithHookDetails = {
 
 export const NO_HOOK_NAME = '<no-hook>';
 
+function mark(markName: string): void {
+  performance.mark(markName + '-start');
+}
+
+function measure(markName: string): void {
+  performance.mark(markName + '-end');
+  performance.measure(markName, markName + '-start', markName + '-end');
+}
+
 const AST_NODE_TYPES = Object.freeze({
   PROGRAM: 'Program',
   CALL_EXPRESSION: 'CallExpression',
@@ -131,7 +141,13 @@ export function getHookName(
   originalSourceLineNumber: number,
   originalSourceColumnNumber: number,
 ): string | null {
+  if (__PERFORMANCE_PROFILE__) {
+    mark('getPotentialHookDeclarationsFromAST(originalSourceAST)');
+  }
   const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST);
+  if (__PERFORMANCE_PROFILE__) {
+    measure('getPotentialHookDeclarationsFromAST(originalSourceAST)');
+  }
 
   let potentialReactHookASTNode = null;
   if (originalSourceColumnNumber === 0) {
@@ -144,6 +160,7 @@ export function getHookName(
         node,
         originalSourceLineNumber,
       );
+
       const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
       return nodeLocationCheck && hookDeclaractionCheck;
     });
@@ -158,6 +175,7 @@ export function getHookName(
         originalSourceLineNumber,
         originalSourceColumnNumber,
       );
+
       const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
       return nodeLocationCheck && hookDeclaractionCheck;
     });
@@ -170,17 +188,31 @@ export function getHookName(
   // nodesAssociatedWithReactHookASTNode could directly be used to obtain the hook variable name
   // depending on the type of potentialReactHookASTNode
   try {
+    if (__PERFORMANCE_PROFILE__) {
+      mark('getFilteredHookASTNodes()');
+    }
     const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes(
       potentialReactHookASTNode,
       hooksFromAST,
       originalSourceCode,
     );
+    if (__PERFORMANCE_PROFILE__) {
+      measure('getFilteredHookASTNodes()');
+    }
 
-    return getHookNameFromNode(
+    if (__PERFORMANCE_PROFILE__) {
+      mark('getHookNameFromNode()');
+    }
+    const name = getHookNameFromNode(
       hook,
       nodesAssociatedWithReactHookASTNode,
       potentialReactHookASTNode,
     );
+    if (__PERFORMANCE_PROFILE__) {
+      measure('getHookNameFromNode()');
+    }
+
+    return name;
   } catch (error) {
     console.error(error);
     return null;
@@ -283,6 +315,9 @@ function getHookVariableName(
 
 function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
   const potentialHooksFound: NodePath[] = [];
+  if (__PERFORMANCE_PROFILE__) {
+    mark('traverse(sourceAST)');
+  }
   traverse(sourceAST, {
     enter(path) {
       if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {
@@ -290,6 +325,9 @@ function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
       }
     },
   });
+  if (__PERFORMANCE_PROFILE__) {
+    measure('traverse(sourceAST)');
+  }
   return potentialHooksFound;
 }
 
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index ec7a57a0a714..6ea73e77ec04 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -12,7 +12,10 @@ import LRU from 'lru-cache';
 import {SourceMapConsumer} from 'source-map-js';
 import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  __DEBUG__,
+  __PERFORMANCE_PROFILE__,
+} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {sourceMapIncludesSource} from '../SourceMapUtils';
 import {SourceMapMetadataConsumer} from '../SourceMapMetadataConsumer';
@@ -26,6 +29,15 @@ import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
 import type {Thenable} from 'shared/ReactTypes';
 import type {SourceConsumer} from '../astUtils';
 
+function mark(markName: string): void {
+  performance.mark(markName + '-start');
+}
+
+function measure(markName: string): void {
+  performance.mark(markName + '-end');
+  performance.measure(markName, markName + '-start', markName + '-end');
+}
+
 const MAX_SOURCE_LENGTH = 100_000_000;
 
 type AST = mixed;
@@ -107,8 +119,15 @@ const originalURLToMetadataCache: LRUCache<
 export async function parseHookNames(
   hooksTree: HooksTree,
 ): Thenable<HookNames | null> {
+  if (__PERFORMANCE_PROFILE__) {
+    mark('parseHookNames()');
+    mark('flattenHooksList()');
+  }
   const hooksList: Array<HooksNode> = [];
   flattenHooksList(hooksTree, hooksList);
+  if (__PERFORMANCE_PROFILE__) {
+    measure('flattenHooksList()');
+  }
 
   if (__DEBUG__) {
     console.log('parseHookNames() hooksList:', hooksList);
@@ -164,11 +183,56 @@ export async function parseHookNames(
     }
   }
 
-  return loadSourceFiles(locationKeyToHookSourceData)
-    .then(() => extractAndLoadSourceMaps(locationKeyToHookSourceData))
-    .then(() => parseSourceAST(locationKeyToHookSourceData))
-    .then(() => updateLruCache(locationKeyToHookSourceData))
-    .then(() => findHookNames(hooksList, locationKeyToHookSourceData));
+  if (__PERFORMANCE_PROFILE__) {
+    mark('loadSourceFiles()');
+  }
+
+  let promise = loadSourceFiles(locationKeyToHookSourceData);
+  if (__PERFORMANCE_PROFILE__) {
+    promise = promise.then(data => {
+      mark('extractAndLoadSourceMaps()');
+      measure('loadSourceFiles()');
+      return data;
+    });
+  }
+  promise = promise.then(() =>
+    extractAndLoadSourceMaps(locationKeyToHookSourceData),
+  );
+  if (__PERFORMANCE_PROFILE__) {
+    promise = promise.then(data => {
+      mark('parseSourceAST()');
+      measure('extractAndLoadSourceMaps()');
+      return data;
+    });
+  }
+  promise = promise.then(() => parseSourceAST(locationKeyToHookSourceData));
+  if (__PERFORMANCE_PROFILE__) {
+    promise = promise.then(data => {
+      mark('updateLruCache()');
+      measure('parseSourceAST()');
+      return data;
+    });
+  }
+  promise = promise.then(() => updateLruCache(locationKeyToHookSourceData));
+  if (__PERFORMANCE_PROFILE__) {
+    promise = promise.then(data => {
+      mark('findHookNames()');
+      measure('updateLruCache()');
+      return data;
+    });
+  }
+  promise = promise.then(() =>
+    findHookNames(hooksList, locationKeyToHookSourceData),
+  );
+  if (__PERFORMANCE_PROFILE__) {
+    promise = promise.then(data => {
+      measure('findHookNames()');
+      measure('parseHookNames()');
+      return data;
+    });
+  }
+
+  return promise;
 }
 
 function decodeBase64String(encoded: string): Object {
@@ -214,7 +278,15 @@ function extractAndLoadSourceMaps(
 
     const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
     const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
+
+    if (__PERFORMANCE_PROFILE__) {
+      mark('sourceMapRegex.exec(runtimeSourceCode)');
+    }
     let sourceMappingURLMatch = sourceMapRegex.exec(runtimeSourceCode);
+    if (__PERFORMANCE_PROFILE__) {
+      measure('sourceMapRegex.exec(runtimeSourceCode)');
+    }
+
     if (sourceMappingURLMatch == null) {
       // Maybe file has not been transformed; we'll try to parse it as-is in parseSourceAST().
 
@@ -237,8 +309,21 @@ function extractAndLoadSourceMaps(
           const trimmed = ((sourceMappingURL.match(
             /base64,([a-zA-Z0-9+\/=]+)/,
           ): any): Array<string>)[1];
+          if (__PERFORMANCE_PROFILE__) {
+            mark('decodeBase64String()');
+          }
           const decoded = decodeBase64String(trimmed);
+          if (__PERFORMANCE_PROFILE__) {
+            measure('decodeBase64String()');
+          }
+
+          if (__PERFORMANCE_PROFILE__) {
+            mark('JSON.parse(decoded)');
+          }
           const parsed = JSON.parse(decoded);
+          if (__PERFORMANCE_PROFILE__) {
+            measure('JSON.parse(decoded)');
+          }
 
           if (__DEBUG__) {
             console.groupCollapsed(
@@ -251,10 +336,20 @@ function extractAndLoadSourceMaps(
           // 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(parsed, runtimeSourceURL)) {
+            if (__PERFORMANCE_PROFILE__) {
+              mark('new SourceMapMetadataConsumer(parsed)');
+            }
             hookSourceData.metadataConsumer = new SourceMapMetadataConsumer(
               parsed,
             );
+            if (__PERFORMANCE_PROFILE__) {
+              measure('new SourceMapMetadataConsumer(parsed)');
+              mark('new SourceMapConsumer(parsed)');
+            }
             hookSourceData.sourceConsumer = new SourceMapConsumer(parsed);
+            if (__PERFORMANCE_PROFILE__) {
+              measure('new SourceMapConsumer(parsed)');
+            }
             break;
           }
         } else {
@@ -300,11 +395,31 @@ function extractAndLoadSourceMaps(
             fetchPromises.get(url) ||
             fetchFile(url).then(
               sourceMapContents => {
+                if (__PERFORMANCE_PROFILE__) {
+                  mark('JSON.parse(sourceMapContents)');
+                }
                 const parsed = JSON.parse(sourceMapContents);
-                return {
-                  sourceConsumer: new SourceMapConsumer(parsed),
-                  metadataConsumer: new SourceMapMetadataConsumer(parsed),
-                };
+                if (__PERFORMANCE_PROFILE__) {
+                  measure('JSON.parse(sourceMapContents)');
+                }
+
+                if (__PERFORMANCE_PROFILE__) {
+                  mark('SourceMapConsumer(parsed)');
+                }
+                const sourceConsumer = new SourceMapConsumer(parsed);
+                if (__PERFORMANCE_PROFILE__) {
+                  measure('SourceMapConsumer(parsed)');
+                }
+
+                if (__PERFORMANCE_PROFILE__) {
+                  mark('SourceMapMetadataConsumer(parsed)');
+                }
+                const metadataConsumer = new SourceMapMetadataConsumer(parsed);
+                if (__PERFORMANCE_PROFILE__) {
+                  measure('SourceMapMetadataConsumer(parsed)');
+                }
+
+                return {sourceConsumer, metadataConsumer};
               },
               // 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,
@@ -404,6 +519,9 @@ function findHookNames(
       originalSourceColumnNumber = columnNumber;
       originalSourceLineNumber = lineNumber;
     } else {
+      if (__PERFORMANCE_PROFILE__) {
+        mark('sourceConsumer.originalPositionFor()');
+      }
       const position = sourceConsumer.originalPositionFor({
         line: lineNumber,
 
@@ -412,6 +530,9 @@ function findHookNames(
         // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
         column: columnNumber - 1,
       });
+      if (__PERFORMANCE_PROFILE__) {
+        measure('sourceConsumer.originalPositionFor()');
+      }
 
       originalSourceColumnNumber = position.column;
       originalSourceLineNumber = position.line;
@@ -434,14 +555,23 @@ function findHookNames(
     let name;
     const {metadataConsumer} = hookSourceData;
     if (metadataConsumer != null) {
+      if (__PERFORMANCE_PROFILE__) {
+        mark('metadataConsumer.hookNameFor()');
+      }
       name = metadataConsumer.hookNameFor({
         line: originalSourceLineNumber,
         column: originalSourceColumnNumber,
         source: originalSourceURL,
       });
+      if (__PERFORMANCE_PROFILE__) {
+        measure('metadataConsumer.hookNameFor()');
+      }
     }
 
     if (name == null) {
+      if (__PERFORMANCE_PROFILE__) {
+        mark('getHookName()');
+      }
       name = getHookName(
         hook,
         hookSourceData.originalSourceAST,
@@ -449,6 +579,9 @@ function findHookNames(
         ((originalSourceLineNumber: any): number),
         originalSourceColumnNumber,
       );
+      if (__PERFORMANCE_PROFILE__) {
+        measure('getHookName()');
+      }
     }
 
     if (__DEBUG__) {
@@ -516,6 +649,9 @@ async function parseSourceAST(
       if (lineNumber == null || columnNumber == null) {
         throw Error('Hook source code location not found.');
       }
+      if (__PERFORMANCE_PROFILE__) {
+        mark('sourceConsumer.originalPositionFor()');
+      }
       // Now that the source map has been loaded,
       // extract the original source for later.
       const {source} = sourceConsumer.originalPositionFor({
@@ -526,6 +662,9 @@ async function parseSourceAST(
         // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
         column: columnNumber - 1,
       });
+      if (__PERFORMANCE_PROFILE__) {
+        measure('sourceConsumer.originalPositionFor()');
+      }
 
       if (source == null) {
         // TODO (named hooks) maybe fall back to the runtime source instead of throwing?
@@ -538,10 +677,16 @@ async function parseSourceAST(
       // It can be relative if the source map specifies it that way,
       // but we use it as a cache key across different source maps and there can be collisions.
       originalSourceURL = (source: string);
+      if (__PERFORMANCE_PROFILE__) {
+        mark('sourceConsumer.sourceContentFor()');
+      }
       originalSourceCode = (sourceConsumer.sourceContentFor(
         source,
         true,
       ): string);
+      if (__PERFORMANCE_PROFILE__) {
+        measure('sourceConsumer.sourceContentFor()');
+      }
 
       if (__DEBUG__) {
         console.groupCollapsed(
@@ -595,10 +740,16 @@ async function parseSourceAST(
         originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
 
       // TODO (named hooks) Parsing should ideally be done off of the main thread.
+      if (__PERFORMANCE_PROFILE__) {
+        mark('[@babel/parser] parse(originalSourceCode)');
+      }
       const originalSourceAST = parse(originalSourceCode, {
         sourceType: 'unambiguous',
         plugins: ['jsx', plugin],
       });
+      if (__PERFORMANCE_PROFILE__) {
+        measure('[@babel/parser] parse(originalSourceCode)');
+      }
       hookSourceData.originalSourceAST = originalSourceAST;
       if (__DEBUG__) {
         console.log(
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 04962c204e28..2b6c3b6f0539 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -10,6 +10,9 @@
 // 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;

From 60a30cf32e1f974b82f0c7da9d8a03822e5b5208 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 25 Aug 2021 15:35:38 -0700
Subject: [PATCH 0799/1603] Console Logging for StrictMode Double Rendering
 (#22030)

React currently suppress console logs in StrictMode during double rendering. However, this causes a lot of confusion. This PR moves the console suppression logic from React into React Devtools. Now by default, we no longer suppress console logs. Instead, we gray out the logs in console during double render. We also add a setting in React Devtools to allow developers to hide console logs during double render if they choose.
---
 .../react-devtools-core/src/standalone.js     |   4 +
 .../react-devtools-core/webpack.backend.js    |  12 ++
 .../react-devtools-core/webpack.standalone.js |  12 ++
 .../src/injectGlobalHook.js                   |   3 +
 .../react-devtools-extensions/src/main.js     |   7 +
 .../react-devtools-extensions/src/utils.js    |   4 +-
 packages/react-devtools-extensions/utils.js   |  13 ++
 .../webpack.backend.js                        |  19 +-
 .../webpack.config.js                         |  17 +-
 packages/react-devtools-inline/README.md      |   9 +-
 packages/react-devtools-inline/src/backend.js |   3 +
 .../react-devtools-inline/src/frontend.js     |   2 +
 .../react-devtools-inline/webpack.config.js   |  12 ++
 .../src/__tests__/console-test.js             |  91 ++++++++-
 .../src/__tests__/setupEnv.js                 |  16 ++
 .../src/backend/agent.js                      |  29 ++-
 .../src/backend/console.js                    | 165 ++++++++++-----
 .../src/backend/renderer.js                   |  22 +-
 .../src/backend/types.js                      |   2 +
 .../src/backend/utils.js                      |   1 +
 packages/react-devtools-shared/src/bridge.js  |   3 +
 .../react-devtools-shared/src/constants.js    |   3 +
 .../views/Settings/DebuggingSettings.js       |  15 +-
 .../views/Settings/SettingsContext.js         |  19 ++
 .../views/Settings/SettingsShared.css         |   3 +-
 packages/react-devtools-shared/src/hook.js    | 188 +++++++++++++++++-
 packages/react-devtools-shared/src/utils.js   |  20 ++
 .../react-devtools-shell/src/app/console.js   |   4 +
 .../react-devtools-shell/src/app/index.js     |   3 +-
 packages/react-devtools-shell/src/devtools.js |  14 +-
 .../react-devtools-shell/webpack.config.js    |  12 ++
 .../src/ReactFiberBeginWork.new.js            |  24 ++-
 .../src/ReactFiberBeginWork.old.js            |  24 ++-
 .../src/ReactFiberClassComponent.new.js       |  14 +-
 .../src/ReactFiberClassComponent.old.js       |  14 +-
 .../src/ReactFiberHooks.new.js                |   7 +-
 .../src/ReactFiberHooks.old.js                |   7 +-
 .../src/ReactFiberReconciler.js               |  11 +
 .../src/ReactFiberReconciler.new.js           |  21 ++
 .../src/ReactFiberReconciler.old.js           |  21 ++
 .../src/ReactUpdateQueue.new.js               |  11 +-
 .../src/ReactUpdateQueue.old.js               |  11 +-
 packages/react-reconciler/src/Scheduler.js    |   6 +
 .../src/__tests__/ReactStrictMode-test.js     |  26 +--
 packages/scheduler/src/forks/SchedulerMock.js |  11 +-
 packages/shared/consoleWithStackDev.js        |  15 +-
 packages/shared/forks/Scheduler.umd.js        |   7 +-
 .../shared/forks/consoleWithStackDev.www.js   |  15 +-
 scripts/flow/react-devtools.js                |   7 +
 49 files changed, 799 insertions(+), 180 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 2e9e6a1056bf..35d21b3a8a2e 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -21,6 +21,7 @@ import {
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
+  getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 import {Server} from 'ws';
 import {join} from 'path';
@@ -310,6 +311,9 @@ function startServer(
       )};
       window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
         getShowInlineWarningsAndErrors(),
+      )};
+      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
+        getHideConsoleLogsInStrictMode(),
       )};`;
 
     response.end(
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 9b09448c55b2..4a034b33bd67 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -60,6 +66,12 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   optimization: {
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 4d1f8544047c..e7d2d3af8977 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -67,6 +73,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index 980fe21f96d5..e34197af3549 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -88,6 +88,9 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
 
 // Inject a __REACT_DEVTOOLS_GLOBAL_HOOK__ global for React to interact with.
 // Only do this for HTML documents though, to avoid e.g. breaking syntax highlighting for XML docs.
+// We need to inject this code because content scripts (ie injectGlobalHook.js) don't have access
+// to the webpage's window, so in order to access front end settings
+// and communicate with React, we must inject this code into the webpage
 if ('text/html' === document.contentType) {
   injectCode(
     ';(' +
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 7cb92c27b6cb..06c227d7e4cb 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -11,6 +11,7 @@ import {
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
+  getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 import {
   localStorageGetItem,
@@ -42,6 +43,12 @@ function syncSavedPreferences() {
     )};
     window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = ${JSON.stringify(
       getShowInlineWarningsAndErrors(),
+    )};
+    window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = ${JSON.stringify(
+      getHideConsoleLogsInStrictMode(),
+    )};
+    window.__REACT_DEVTOOLS_BROWSER_THEME__ = ${JSON.stringify(
+      getBrowserTheme(),
     )};`,
   );
 }
diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
index 4fc27de2ee6a..2c67e2cf047b 100644
--- a/packages/react-devtools-extensions/src/utils.js
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -1,5 +1,7 @@
 /* global chrome */
 
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+
 const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
 
 export type BrowserName = 'Chrome' | 'Firefox';
@@ -8,8 +10,6 @@ export function getBrowserName(): BrowserName {
   return IS_CHROME ? 'Chrome' : 'Firefox';
 }
 
-export type BrowserTheme = 'dark' | 'light';
-
 export function getBrowserTheme(): BrowserTheme {
   if (IS_CHROME) {
     // chrome.devtools.panels added in Chrome 18.
diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
index 1babd93f568e..a096b39b2283 100644
--- a/packages/react-devtools-extensions/utils.js
+++ b/packages/react-devtools-extensions/utils.js
@@ -9,6 +9,13 @@ const {execSync} = require('child_process');
 const {readFileSync} = require('fs');
 const {resolve} = require('path');
 
+const DARK_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.5)';
+const DARK_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.5)';
+const DARK_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.5)';
+const LIGHT_MODE_DIMMED_WARNING_COLOR = 'rgba(250, 180, 50, 0.75)';
+const LIGHT_MODE_DIMMED_ERROR_COLOR = 'rgba(250, 123, 130, 0.75)';
+const LIGHT_MODE_DIMMED_LOG_COLOR = 'rgba(125, 125, 125, 0.75)';
+
 const GITHUB_URL = 'https://github.com/facebook/react';
 
 function getGitCommit() {
@@ -36,6 +43,12 @@ function getVersionString() {
 }
 
 module.exports = {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getGitCommit,
   getVersionString,
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index 6f5a1d386093..1644d0b9843e 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -2,7 +2,16 @@
 
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
-const {GITHUB_URL, getVersionString} = require('./utils');
+const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
+  GITHUB_URL,
+  getVersionString,
+} = require('./utils');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 
 const NODE_ENV = process.env.NODE_ENV;
@@ -54,10 +63,16 @@ module.exports = {
     new DefinePlugin({
       __DEV__: true,
       __PROFILE__: false,
-      __EXPERIMENTAL__: true,
+      __DEV____DEV__: true,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 664ec8267c35..7f9e632ffab1 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -2,7 +2,16 @@
 
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
-const {GITHUB_URL, getVersionString} = require('./utils');
+const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
+  GITHUB_URL,
+  getVersionString,
+} = require('./utils');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
 
 const NODE_ENV = process.env.NODE_ENV;
@@ -76,6 +85,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 22cff37fb750..88b2c93b7cb0 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -83,14 +83,15 @@ const { contentWindow } = iframe;
 // This must be called before React is loaded into that frame.
 initializeBackend(contentWindow);
 
-// React application can be injected into <iframe> at any time now...
-// Note that this would need to be done via <script> tag injection,
-// as setting the src of the <iframe> would load a new page (without the injected backend).
-
 // Initialize DevTools UI to listen to the hook we just installed.
 // This returns a React component we can render anywhere in the parent window.
+// 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 either ReactDOM.createRoot()
 // or ReactDOM.createSyncRoot() to render this component.
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index 7a5bd57b928e..a6466d82709f 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -25,12 +25,14 @@ function startActivation(contentWindow: window) {
           breakOnConsoleErrors,
           componentFilters,
           showInlineWarningsAndErrors,
+          hideConsoleLogsInStrictMode,
         } = data;
 
         contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
         contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
         contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
         contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
+        contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
 
         // TRICKY
         // The backend entry point may be required in the context of an iframe or the parent window.
@@ -43,6 +45,7 @@ function startActivation(contentWindow: window) {
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
           window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
           window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
+          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
         }
 
         finishActivation(contentWindow);
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 79bda7ecd8fb..0249fb878f9b 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -10,6 +10,7 @@ import {
   getBreakOnConsoleErrors,
   getSavedComponentFilters,
   getShowInlineWarningsAndErrors,
+  getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
 import {
   MESSAGE_TYPE_GET_SAVED_PREFERENCES,
@@ -88,6 +89,7 @@ export function initialize(
             breakOnConsoleErrors: getBreakOnConsoleErrors(),
             componentFilters: getSavedComponentFilters(),
             showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
+            hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
           },
           '*',
         );
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 040cc629b822..169484f8cc27 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -70,6 +76,12 @@ module.exports = {
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 3d539f286aa9..b79301f4f4b5 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -9,6 +9,7 @@
 
 describe('console', () => {
   let React;
+  let ReactDOM;
   let act;
   let fakeConsole;
   let legacyRender;
@@ -48,6 +49,7 @@ describe('console', () => {
       appendComponentStack: true,
       breakOnWarn: false,
       showInlineWarningsAndErrors: false,
+      hideDoubleLogsInStrictLegacy: false,
     });
 
     const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
@@ -58,6 +60,7 @@ describe('console', () => {
     };
 
     React = require('react');
+    ReactDOM = require('react-dom');
 
     const utils = require('./utils');
     act = utils.act;
@@ -73,10 +76,10 @@ describe('console', () => {
     );
   }
 
-  it('should not patch console methods that do not receive component stacks', () => {
+  it('should not patch console methods that are not explicitly overriden', () => {
     expect(fakeConsole.error).not.toBe(mockError);
     expect(fakeConsole.info).toBe(mockInfo);
-    expect(fakeConsole.log).toBe(mockLog);
+    expect(fakeConsole.log).not.toBe(mockLog);
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
@@ -465,4 +468,88 @@ describe('console', () => {
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toBe('Symbol:');
   });
+
+  it('should double log if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    function App() {
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return <div />;
+    }
+
+    patchConsole({
+      appendComponentStack: false,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
+      hideConsoleLogsInStrictMode: false,
+    });
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockLog.mock.calls[1]).toHaveLength(2);
+    expect(mockLog.mock.calls[1][0]).toBe('%clog');
+
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('%cwarn');
+
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('%cerror');
+  });
+
+  it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    function App() {
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return <div />;
+    }
+
+    patchConsole({
+      appendComponentStack: false,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
+      hideConsoleLogsInStrictMode: true,
+    });
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/setupEnv.js b/packages/react-devtools-shared/src/__tests__/setupEnv.js
index 7bbb69362841..e8b0fa74c811 100644
--- a/packages/react-devtools-shared/src/__tests__/setupEnv.js
+++ b/packages/react-devtools-shared/src/__tests__/setupEnv.js
@@ -1,5 +1,14 @@
 'use strict';
 
+const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
+} = require('react-devtools-extensions/utils');
+
 // DevTools stores preferences between sessions in localStorage
 if (!global.hasOwnProperty('localStorage')) {
   global.localStorage = require('local-storage-fallback').default;
@@ -8,3 +17,10 @@ if (!global.hasOwnProperty('localStorage')) {
 // Mimic the global we set with Webpack's DefinePlugin
 global.__DEV__ = process.env.NODE_ENV !== 'production';
 global.__TEST__ = true;
+
+global.process.env.DARK_MODE_DIMMED_WARNING_COLOR = DARK_MODE_DIMMED_WARNING_COLOR;
+global.process.env.DARK_MODE_DIMMED_ERROR_COLOR = DARK_MODE_DIMMED_ERROR_COLOR;
+global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
+global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR = LIGHT_MODE_DIMMED_WARNING_COLOR;
+global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR = LIGHT_MODE_DIMMED_ERROR_COLOR;
+global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index f5a91e0d7c16..9eea501cbdd0 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -25,7 +25,7 @@ import {
   initialize as setupTraceUpdates,
   toggleEnabled as setTraceUpdatesEnabled,
 } from './views/TraceUpdates';
-import {patch as patchConsole, unpatch as unpatchConsole} from './console';
+import {patch as patchConsole} from './console';
 import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
 
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
@@ -40,6 +40,7 @@ import type {
 } from './types';
 import type {ComponentFilter} from '../types';
 import {isSynchronousXHRSupported} from './utils';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -635,28 +636,26 @@ export default class Agent extends EventEmitter<{|
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
   }: {|
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
     showInlineWarningsAndErrors: boolean,
+    hideConsoleLogsInStrictMode: boolean,
+    browserTheme: BrowserTheme,
   |}) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
-    // then install or uninstall the console overrides.
+    // then reinstall the console overrides.
     // It's safe to call these methods multiple times, so we don't need to worry about that.
-    if (
-      appendComponentStack ||
-      breakOnConsoleErrors ||
-      showInlineWarningsAndErrors
-    ) {
-      patchConsole({
-        appendComponentStack,
-        breakOnConsoleErrors,
-        showInlineWarningsAndErrors,
-      });
-    } else {
-      unpatchConsole();
-    }
+    patchConsole({
+      appendComponentStack,
+      breakOnConsoleErrors,
+      showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+      browserTheme,
+    });
   };
 
   updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index fcfb944bce23..c6449c8d22fa 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -9,11 +9,14 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+import {format} from './utils';
 
 import {getInternalReactConstants} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 
-const APPEND_STACK_TO_METHODS = ['error', 'trace', 'warn'];
+const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
+const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
 
 // React's custom built component stack strings match "\s{4}in"
 // Chrome's prefix matches "\s{4}at"
@@ -39,6 +42,7 @@ const injectedRenderers: Map<
     getCurrentFiber: () => Fiber | null,
     onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
+    getIsStrictMode: ?() => boolean,
   |},
 > = new Map();
 
@@ -50,6 +54,11 @@ for (const method in console) {
 
 let unpatchFn: null | (() => void) = null;
 
+let isNode = false;
+try {
+  isNode = this === global;
+} catch (error) {}
+
 // Enables e.g. Jest tests to inject a mock console object.
 export function dangerous_setTargetConsoleForTesting(
   targetConsoleForTesting: Object,
@@ -72,6 +81,7 @@ export function registerRenderer(
   const {
     currentDispatcherRef,
     getCurrentFiber,
+    getIsStrictMode,
     findFiberByHostInstance,
     version,
   } = renderer;
@@ -89,6 +99,7 @@ export function registerRenderer(
     injectedRenderers.set(renderer, {
       currentDispatcherRef,
       getCurrentFiber,
+      getIsStrictMode,
       workTagMap: ReactTypeOfWork,
       onErrorOrWarning,
     });
@@ -99,24 +110,31 @@ const consoleSettingsRef = {
   appendComponentStack: false,
   breakOnConsoleErrors: false,
   showInlineWarningsAndErrors: false,
+  hideConsoleLogsInStrictMode: false,
 };
 
 // Patches console methods to append component stack for the current fiber.
 // Call unpatch() to remove the injected behavior.
+// NOTE: KEEP IN SYNC with src/hook.js:patchConsoleForInitialRenderInExtension
 export function patch({
   appendComponentStack,
   breakOnConsoleErrors,
   showInlineWarningsAndErrors,
+  hideConsoleLogsInStrictMode,
+  browserTheme,
 }: {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+  browserTheme: BrowserTheme,
 }): void {
   // Settings may change after we've patched the console.
   // Using a shared ref allows the patch function to read the latest values.
   consoleSettingsRef.appendComponentStack = appendComponentStack;
   consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
   consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors;
+  consoleSettingsRef.hideConsoleLogsInStrictMode = hideConsoleLogsInStrictMode;
 
   if (unpatchFn !== null) {
     // Don't patch twice.
@@ -134,68 +152,78 @@ export function patch({
     }
   };
 
-  APPEND_STACK_TO_METHODS.forEach(method => {
+  OVERRIDE_CONSOLE_METHODS.forEach(method => {
     try {
-      const originalMethod = (originalConsoleMethods[method] =
-        targetConsole[method]);
+      const originalMethod = (originalConsoleMethods[method] = targetConsole[
+        method
+      ].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+        ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+        : targetConsole[method]);
 
       const overrideMethod = (...args) => {
         let shouldAppendWarningStack = false;
-        if (consoleSettingsRef.appendComponentStack) {
-          const lastArg = args.length > 0 ? args[args.length - 1] : null;
-          const alreadyHasComponentStack =
-            typeof lastArg === 'string' && isStringComponentStack(lastArg);
-
-          // If we are ever called with a string that already has a component stack,
-          // e.g. a React error/warning, don't append a second stack.
-          shouldAppendWarningStack = !alreadyHasComponentStack;
+        if (method !== 'log') {
+          if (consoleSettingsRef.appendComponentStack) {
+            const lastArg = args.length > 0 ? args[args.length - 1] : null;
+            const alreadyHasComponentStack =
+              typeof lastArg === 'string' && isStringComponentStack(lastArg);
+
+            // If we are ever called with a string that already has a component stack,
+            // e.g. a React error/warning, don't append a second stack.
+            shouldAppendWarningStack = !alreadyHasComponentStack;
+          }
         }
 
         const shouldShowInlineWarningsAndErrors =
           consoleSettingsRef.showInlineWarningsAndErrors &&
           (method === 'error' || method === 'warn');
 
-        if (shouldAppendWarningStack || shouldShowInlineWarningsAndErrors) {
-          // 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 {
-            currentDispatcherRef,
-            getCurrentFiber,
-            onErrorOrWarning,
-            workTagMap,
-          } of injectedRenderers.values()) {
-            const current: ?Fiber = getCurrentFiber();
-            if (current != null) {
-              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 (typeof onErrorOrWarning === 'function') {
-                    onErrorOrWarning(
-                      current,
-                      ((method: any): 'error' | 'warn'),
-                      // Copy args before we mutate them (e.g. adding the component stack)
-                      args.slice(),
-                    );
-                  }
-                }
+        let isInStrictMode = false;
 
-                if (shouldAppendWarningStack) {
-                  const componentStack = getStackByFiberInDevAndProd(
-                    workTagMap,
+        // 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 {
+          currentDispatcherRef,
+          getCurrentFiber,
+          onErrorOrWarning,
+          workTagMap,
+          getIsStrictMode,
+        } of injectedRenderers.values()) {
+          const current: ?Fiber = getCurrentFiber();
+          if (current != null) {
+            try {
+              if (typeof getIsStrictMode === 'function' && getIsStrictMode()) {
+                isInStrictMode = true;
+              }
+
+              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 (typeof onErrorOrWarning === 'function') {
+                  onErrorOrWarning(
                     current,
-                    currentDispatcherRef,
+                    ((method: any): 'error' | 'warn'),
+                    // Copy args before we mutate them (e.g. adding the component stack)
+                    args.slice(),
                   );
-                  if (componentStack !== '') {
-                    args.push(componentStack);
-                  }
                 }
-              } catch (error) {
-                // Don't let a DevTools or React internal error interfere with logging.
-              } finally {
-                break;
               }
+
+              if (shouldAppendWarningStack) {
+                const componentStack = getStackByFiberInDevAndProd(
+                  workTagMap,
+                  current,
+                  currentDispatcherRef,
+                );
+                if (componentStack !== '') {
+                  args.push(componentStack);
+                }
+              }
+            } catch (error) {
+              // Don't let a DevTools or React internal error interfere with logging.
+            } finally {
+              break;
             }
           }
         }
@@ -209,7 +237,46 @@ export function patch({
           debugger;
         }
 
-        originalMethod(...args);
+        if (isInStrictMode) {
+          if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
+            // Dim the text color of the double logs if we're not
+            // hiding them.
+            if (isNode) {
+              originalMethod(DIMMED_NODE_CONSOLE_COLOR, format(...args));
+            } else {
+              let color;
+              switch (method) {
+                case 'warn':
+                  color =
+                    browserTheme === 'light'
+                      ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                      : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+                  break;
+                case 'error':
+                  color =
+                    browserTheme === 'light'
+                      ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                      : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+                  break;
+                case 'log':
+                default:
+                  color =
+                    browserTheme === 'light'
+                      ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                      : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+                  break;
+              }
+
+              if (color) {
+                originalMethod(`%c${format(...args)}`, `color: ${color}`);
+              } else {
+                throw Error('Console color is not defined');
+              }
+            }
+          }
+        } else {
+          originalMethod(...args);
+        }
       };
 
       overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 62341ce300ec..3f03315fa5ce 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -740,17 +740,17 @@ export function attach(
       window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
     const showInlineWarningsAndErrors =
       window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-    if (
-      appendComponentStack ||
-      breakOnConsoleErrors ||
-      showInlineWarningsAndErrors
-    ) {
-      patchConsole({
-        appendComponentStack,
-        breakOnConsoleErrors,
-        showInlineWarningsAndErrors,
-      });
-    }
+    const hideConsoleLogsInStrictMode =
+      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+    const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
+
+    patchConsole({
+      appendComponentStack,
+      breakOnConsoleErrors,
+      showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+      browserTheme,
+    });
   }
 
   const debug = (
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 27bbc8ce253c..0a7166d04098 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -136,6 +136,8 @@ export type ReactRenderer = {
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
   getCurrentFiber?: () => Fiber | null,
+
+  getIsStrictMode?: () => boolean,
   // 17.0.2+
   reconcilerVersion?: string,
   // Uniquely identifies React DOM v15.
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 60fabfa03c89..4b40645595d1 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -159,6 +159,7 @@ export function serializeToString(data: any): string {
 // 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
+// NOTE: KEEP IN SYNC with src/hook.js
 export function format(
   maybeMessage: any,
   ...inputArgs: $ReadOnlyArray<any>
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index cfcfa79e1f2d..ae5abf7c4f2b 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -17,6 +17,7 @@ import type {
   RendererID,
 } from 'react-devtools-shared/src/backend/types';
 import type {StyleAndLayout as StyleAndLayoutPayload} from 'react-devtools-shared/src/backend/NativeStyleEditor/types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const BATCH_DURATION = 100;
 
@@ -164,6 +165,8 @@ type UpdateConsolePatchSettingsParams = {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+  browserTheme: BrowserTheme,
 |};
 
 export type BackendEvents = {|
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 2b6c3b6f0539..29d805890ded 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -47,6 +47,9 @@ export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
 export const LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY =
   'React::DevTools::traceUpdatesEnabled';
 
+export const LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE =
+  'React::DevTools::hideConsoleLogsInStrictMode';
+
 export const PROFILER_EXPORT_VERSION = 5;
 
 export const CHANGE_LOG_URL =
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index 8d5da190be45..46b8b343721f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -17,10 +17,12 @@ export default function DebuggingSettings(_: {||}) {
   const {
     appendComponentStack,
     breakOnConsoleErrors,
+    hideConsoleLogsInStrictMode,
     setAppendComponentStack,
     setBreakOnConsoleErrors,
     setShowInlineWarningsAndErrors,
     showInlineWarningsAndErrors,
+    sethideConsoleLogsInStrictMode,
   } = useContext(SettingsContext);
 
   return (
@@ -64,8 +66,17 @@ export default function DebuggingSettings(_: {||}) {
         </label>
       </div>
 
-      <div className={styles.ConsoleAPIWarning}>
-        These settings require DevTools to override native console APIs.
+      <div className={styles.Setting}>
+        <label>
+          <input
+            type="checkbox"
+            checked={hideConsoleLogsInStrictMode}
+            onChange={({currentTarget}) =>
+              sethideConsoleLogsInStrictMode(currentTarget.checked)
+            }
+          />{' '}
+          Hide logs during second render in Strict Mode
+        </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
index a433ac220ffe..7f8cfe614b0c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -23,6 +23,7 @@ import {
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+  LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from 'react-devtools-shared/src/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
@@ -49,6 +50,9 @@ type Context = {|
   parseHookNames: boolean,
   setParseHookNames: (value: boolean) => void,
 
+  hideConsoleLogsInStrictMode: boolean,
+  sethideConsoleLogsInStrictMode: (value: boolean) => void,
+
   showInlineWarningsAndErrors: boolean,
   setShowInlineWarningsAndErrors: (value: boolean) => void,
 
@@ -104,6 +108,13 @@ function SettingsContextController({
     LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
     false,
   );
+  const [
+    hideConsoleLogsInStrictMode,
+    sethideConsoleLogsInStrictMode,
+  ] = useLocalStorage<boolean>(
+    LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
+    false,
+  );
   const [
     showInlineWarningsAndErrors,
     setShowInlineWarningsAndErrors,
@@ -169,12 +180,16 @@ function SettingsContextController({
       appendComponentStack,
       breakOnConsoleErrors,
       showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+      browserTheme,
     });
   }, [
     bridge,
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
   ]);
 
   useEffect(() => {
@@ -199,6 +214,8 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
+      sethideConsoleLogsInStrictMode,
+      hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
       traceUpdatesEnabled,
@@ -216,6 +233,8 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
+      sethideConsoleLogsInStrictMode,
+      hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
       traceUpdatesEnabled,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index 58ad5d15d37a..3ddaf1390770 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -128,8 +128,7 @@
   background-color: var(--color-toggle-text);
 }
 
-.ReleaseNotes,
-.ConsoleAPIWarning {
+.ReleaseNotes {
   width: 100%;
   background-color: var(--color-background-hover);
   padding: 0.25rem 0.5rem;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 4ba54fe31085..8ef821967d6d 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -2,11 +2,16 @@
  * Install the hook on window, which is an event emitter.
  * Note because Chrome content scripts cannot directly modify the window object,
  * we are evaling this function by inserting a script tag.
- * That's why we have to inline the whole event emitter implementation here.
+ * That's why we have to inline the whole event emitter implementation,
+ * the string format implementation, and part of the console implementation here.
  *
  * @flow
  */
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactRenderer} from './backend/types';
+import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+
 import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
@@ -152,6 +157,158 @@ export function installHook(target: any): DevToolsHook | null {
     } catch (err) {}
   }
 
+  // NOTE: KEEP IN SYNC with src/backend/utils.js
+  function format(
+    maybeMessage: any,
+    ...inputArgs: $ReadOnlyArray<any>
+  ): string {
+    const args = inputArgs.slice();
+
+    // Symbols cannot be concatenated with Strings.
+    let formatted: string =
+      typeof maybeMessage === 'symbol'
+        ? maybeMessage.toString()
+        : '' + maybeMessage;
+
+    // If the first argument is a string, check for substitutions.
+    if (typeof maybeMessage === 'string') {
+      if (args.length) {
+        const REGEXP = /(%?)(%([jds]))/g;
+
+        formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+          let arg = args.shift();
+          switch (flag) {
+            case 's':
+              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++) {
+        const arg = args[i];
+
+        // Symbols cannot be concatenated with Strings.
+        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+      }
+    }
+
+    // Update escaped %% values.
+    formatted = formatted.replace(/%{2,2}/g, '%');
+
+    return '' + formatted;
+  }
+
+  // NOTE: KEEP IN SYNC with src/backend/console.js:patch
+  function patchConsoleForInitialRenderInExtension(
+    renderer: ReactRenderer,
+    {
+      hideConsoleLogsInStrictMode,
+      browserTheme,
+    }: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
+  ): void {
+    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+
+    if (__EXTENSION__) {
+      const targetConsole = console;
+
+      const originalConsoleMethods = {};
+
+      overrideConsoleMethods.forEach(method => {
+        try {
+          const originalMethod = (originalConsoleMethods[
+            method
+          ] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+            ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+            : targetConsole[method]);
+
+          const overrideMethod = (...args) => {
+            let isInStrictMode = false;
+
+            // 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?)
+            const {getCurrentFiber, getIsStrictMode} = renderer;
+            if (typeof getCurrentFiber !== 'function') {
+              return;
+            }
+
+            const current: ?Fiber = getCurrentFiber();
+            if (current != null) {
+              try {
+                if (
+                  typeof getIsStrictMode === 'function' &&
+                  getIsStrictMode()
+                ) {
+                  isInStrictMode = true;
+                }
+              } catch (error) {
+                // Don't let a DevTools or React internal error interfere with logging.
+              }
+            }
+
+            if (isInStrictMode) {
+              if (!hideConsoleLogsInStrictMode) {
+                // Dim the text color of the double logs if we're not
+                // hiding them.
+                let color;
+                switch (method) {
+                  case 'warn':
+                    color =
+                      browserTheme === 'light'
+                        ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                        : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+                    break;
+                  case 'error':
+                    color =
+                      browserTheme === 'light'
+                        ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                        : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+                    break;
+                  case 'log':
+                  default:
+                    color =
+                      browserTheme === 'light'
+                        ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                        : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+                    break;
+                }
+
+                if (color) {
+                  originalMethod(`%c${format(...args)}`, `color: ${color}`);
+                } else {
+                  throw Error('Console color is not defined');
+                }
+              }
+            } else {
+              originalMethod(...args);
+            }
+          };
+
+          overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+          originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
+
+          // $FlowFixMe property error|warn is not writable.
+          targetConsole[method] = overrideMethod;
+        } catch (error) {}
+      });
+    }
+  }
+
   let uidCounter = 0;
 
   function inject(renderer) {
@@ -164,19 +321,22 @@ export function installHook(target: any): DevToolsHook | null {
 
     // Patching the console enables DevTools to do a few useful things:
     // * Append component stacks to warnings and error messages
+    // * Disabling or marking logs during a double render in Strict Mode
     // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
     //
     // For React Native, we intentionally patch early (during injection).
     // This provides React Native developers with components stacks even if they don't run DevTools.
+    //
     // This won't work for DOM though, since this entire file is eval'ed and inserted as a script tag.
-    // In that case, we'll patch later (when the frontend attaches).
+    // In that case, we'll only patch parts of the console that are needed during the first render
+    // and patch everything else later (when the frontend attaches).
     //
     // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
     //
     // Note that because this function is inlined, this conditional check must only use static booleans.
     // Otherwise the extension will throw with an undefined error.
     // (See comments in the try/catch below for more context on inlining.)
-    if (!__EXTENSION__ && !__TEST__) {
+    if (!__TEST__) {
       try {
         const appendComponentStack =
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
@@ -184,6 +344,9 @@ export function installHook(target: any): DevToolsHook | null {
           window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
         const showInlineWarningsAndErrors =
           window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
+        const hideConsoleLogsInStrictMode =
+          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
 
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
@@ -192,16 +355,19 @@ export function installHook(target: any): DevToolsHook | null {
         // but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)
         // and the object itself will be undefined as well for the reasons mentioned above,
         // so we use try/catch instead.
-        if (
-          appendComponentStack ||
-          breakOnConsoleErrors ||
-          showInlineWarningsAndErrors
-        ) {
+        if (!__EXTENSION__) {
           registerRendererWithConsole(renderer);
           patchConsole({
             appendComponentStack,
             breakOnConsoleErrors,
             showInlineWarningsAndErrors,
+            hideConsoleLogsInStrictMode,
+            browserTheme,
+          });
+        } else {
+          patchConsoleForInitialRenderInExtension(renderer, {
+            hideConsoleLogsInStrictMode,
+            browserTheme,
           });
         }
       } catch (error) {}
@@ -215,7 +381,11 @@ export function installHook(target: any): DevToolsHook | null {
       hook.rendererInterfaces.set(id, rendererInterface);
     }
 
-    hook.emit('renderer', {id, renderer, reactBuildType});
+    hook.emit('renderer', {
+      id,
+      renderer,
+      reactBuildType,
+    });
 
     return id;
   }
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 573679f635ab..901aecbac6d0 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -37,6 +37,7 @@ import {
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
+  LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from './constants';
 import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
@@ -317,6 +318,25 @@ export function setBreakOnConsoleErrors(value: boolean): void {
   );
 }
 
+export function getHideConsoleLogsInStrictMode(): boolean {
+  try {
+    const raw = localStorageGetItem(
+      LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
+    );
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return false;
+}
+
+export function sethideConsoleLogsInStrictMode(value: boolean): void {
+  localStorageSetItem(
+    LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
+    JSON.stringify(value),
+  );
+}
+
 export function getShowInlineWarningsAndErrors(): boolean {
   try {
     const raw = localStorageGetItem(
diff --git a/packages/react-devtools-shell/src/app/console.js b/packages/react-devtools-shell/src/app/console.js
index 39ee34ee5a50..9f1244bf164e 100644
--- a/packages/react-devtools-shell/src/app/console.js
+++ b/packages/react-devtools-shell/src/app/console.js
@@ -37,3 +37,7 @@ export function ignoreErrors(errorsToIgnore: Array<string>): void {
 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/index.js b/packages/react-devtools-shell/src/app/index.js
index d00ffde4a5de..805cd0a2a707 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -19,7 +19,7 @@ import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import ErrorBoundaries from './ErrorBoundaries';
 import SuspenseTree from './SuspenseTree';
-import {ignoreErrors, ignoreWarnings} from './console';
+import {ignoreErrors, ignoreLogs, ignoreWarnings} from './console';
 
 import './styles.css';
 
@@ -32,6 +32,7 @@ ignoreErrors([
   'Warning: %s is deprecated in StrictMode.', // findDOMNode
 ]);
 ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
+ignoreLogs([]);
 
 const roots = [];
 
diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/devtools.js
index 4879e719c880..fda4c91b74ff 100644
--- a/packages/react-devtools-shell/src/devtools.js
+++ b/packages/react-devtools-shell/src/devtools.js
@@ -19,6 +19,14 @@ 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;
@@ -45,12 +53,6 @@ mountButton.addEventListener('click', function() {
 inject('dist/app.js', () => {
   initDevTools({
     connect(cb) {
-      const DevTools = initializeFrontend(contentWindow);
-
-      // Activate the backend only once the DevTools frontend Store has been initialized.
-      // Otherwise the Store may miss important initial tree op codes.
-      activateBackend(contentWindow);
-
       const root = createRoot(container);
       root.render(
         createElement(DevTools, {
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 41fd6fa2666f..e60a004a3b39 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -1,6 +1,12 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
 const {
+  DARK_MODE_DIMMED_WARNING_COLOR,
+  DARK_MODE_DIMMED_ERROR_COLOR,
+  DARK_MODE_DIMMED_LOG_COLOR,
+  LIGHT_MODE_DIMMED_WARNING_COLOR,
+  LIGHT_MODE_DIMMED_ERROR_COLOR,
+  LIGHT_MODE_DIMMED_LOG_COLOR,
   GITHUB_URL,
   getVersionString,
 } = require('react-devtools-extensions/utils');
@@ -59,6 +65,12 @@ const config = {
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-shell"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
+      'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
     }),
   ],
   module: {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index cadf7d252d83..d9874bba3411 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -151,7 +151,11 @@ import {
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {shouldError, shouldSuspend} from './ReactFiberReconciler';
+import {
+  shouldError,
+  shouldSuspend,
+  setIsStrictModeForDevtools,
+} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.new';
 import {
   suspenseStackCursor,
@@ -235,8 +239,6 @@ import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 let didReceiveUpdate: boolean = false;
@@ -379,7 +381,7 @@ function updateForwardRef(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -390,7 +392,7 @@ function updateForwardRef(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -984,7 +986,7 @@ function updateFunctionComponent(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -995,7 +997,7 @@ function updateFunctionComponent(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -1201,11 +1203,11 @@ function finishClassComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           instance.render();
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       setIsRendering(false);
@@ -1741,7 +1743,7 @@ function mountIndeterminateComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           value = renderWithHooks(
             null,
@@ -1752,7 +1754,7 @@ function mountIndeterminateComponent(
             renderLanes,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 962f592a3255..74037fbe966f 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -151,7 +151,11 @@ import {
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {shouldError, shouldSuspend} from './ReactFiberReconciler';
+import {
+  shouldError,
+  shouldSuspend,
+  setIsStrictModeForDevtools,
+} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.old';
 import {
   suspenseStackCursor,
@@ -235,8 +239,6 @@ import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
 let didReceiveUpdate: boolean = false;
@@ -379,7 +381,7 @@ function updateForwardRef(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -390,7 +392,7 @@ function updateForwardRef(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -984,7 +986,7 @@ function updateFunctionComponent(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         nextChildren = renderWithHooks(
           current,
@@ -995,7 +997,7 @@ function updateFunctionComponent(
           renderLanes,
         );
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     setIsRendering(false);
@@ -1201,11 +1203,11 @@ function finishClassComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           instance.render();
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       setIsRendering(false);
@@ -1741,7 +1743,7 @@ function mountIndeterminateComponent(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           value = renderWithHooks(
             null,
@@ -1752,7 +1754,7 @@ function mountIndeterminateComponent(
             renderLanes,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 3d10472c0441..490fa5f430f2 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -38,6 +38,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
@@ -75,7 +76,6 @@ import {
 } from './ReactFiberWorkLoop.new';
 import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 import {
   markForceUpdateScheduled,
   markStateUpdateScheduled,
@@ -175,12 +175,12 @@ function applyDerivedStateFromProps(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         // Invoke the function an extra time to help detect side-effects.
         partialState = getDerivedStateFromProps(nextProps, prevState);
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     warnOnUndefinedDerivedState(ctor, partialState);
@@ -328,7 +328,7 @@ function checkShouldComponentUpdate(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           // Invoke the function an extra time to help detect side-effects.
           shouldUpdate = instance.shouldComponentUpdate(
@@ -337,7 +337,7 @@ function checkShouldComponentUpdate(
             nextContext,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       if (shouldUpdate === undefined) {
@@ -662,11 +662,11 @@ function constructClassInstance(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         instance = new ctor(props, context); // eslint-disable-line no-new
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index ab80913c7b6b..8c08eb581892 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -38,6 +38,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
@@ -75,7 +76,6 @@ import {
 } from './ReactFiberWorkLoop.old';
 import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 import {
   markForceUpdateScheduled,
   markStateUpdateScheduled,
@@ -175,12 +175,12 @@ function applyDerivedStateFromProps(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         // Invoke the function an extra time to help detect side-effects.
         partialState = getDerivedStateFromProps(nextProps, prevState);
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
     warnOnUndefinedDerivedState(ctor, partialState);
@@ -328,7 +328,7 @@ function checkShouldComponentUpdate(
         debugRenderPhaseSideEffectsForStrictMode &&
         workInProgress.mode & StrictLegacyMode
       ) {
-        disableLogs();
+        setIsStrictModeForDevtools(true);
         try {
           // Invoke the function an extra time to help detect side-effects.
           shouldUpdate = instance.shouldComponentUpdate(
@@ -337,7 +337,7 @@ function checkShouldComponentUpdate(
             nextContext,
           );
         } finally {
-          reenableLogs();
+          setIsStrictModeForDevtools(false);
         }
       }
       if (shouldUpdate === undefined) {
@@ -662,11 +662,11 @@ function constructClassInstance(
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
     ) {
-      disableLogs();
+      setIsStrictModeForDevtools(true);
       try {
         instance = new ctor(props, context); // eslint-disable-line no-new
       } finally {
-        reenableLogs();
+        setIsStrictModeForDevtools(false);
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 7e86ac98bfaa..b19530e24b5d 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -113,6 +113,7 @@ import {
   entangleTransitions,
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
+import {getIsStrictModeForDevtools} from './ReactFiberReconciler.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1021,9 +1022,9 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
     // dev, we can present a more accurate error message.
     if (__DEV__) {
       // eslint-disable-next-line react-internal/no-production-logging
-      if (console.log.__reactDisabledLog) {
-        // If the logs are disabled, this is the dev-only double render. This is
-        // only reachable if there was a mutation during render. Show a helpful
+      if (getIsStrictModeForDevtools()) {
+        // If getIsStrictModeForDevtools is true, this is the dev-only double render
+        // This is only reachable if there was a mutation during render. Show a helpful
         // error message.
         //
         // Something interesting to note: because we only double render in
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index cc5fa6149a00..fb1e9b86883a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -113,6 +113,7 @@ import {
   entangleTransitions,
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
+import {getIsStrictModeForDevtools} from './ReactFiberReconciler.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1021,9 +1022,9 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
     // dev, we can present a more accurate error message.
     if (__DEV__) {
       // eslint-disable-next-line react-internal/no-production-logging
-      if (console.log.__reactDisabledLog) {
-        // If the logs are disabled, this is the dev-only double render. This is
-        // only reachable if there was a mutation during render. Show a helpful
+      if (getIsStrictModeForDevtools()) {
+        // If getIsStrictModeForDevtools is true, this is the dev-only double render
+        // This is only reachable if there was a mutation during render. Show a helpful
         // error message.
         //
         // Something interesting to note: because we only double render in
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index d25783164e98..033b9eb0adbe 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -49,6 +49,8 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdatePriority as getCurrentUpdatePriority_old,
+  getIsStrictModeForDevtools as getIsStrictModeForDevtools_old,
+  setIsStrictModeForDevtools as setIsStrictModeForDevtools_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -86,6 +88,8 @@ import {
   registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdatePriority as getCurrentUpdatePriority_new,
+  getIsStrictModeForDevtools as getIsStrictModeForDevtools_new,
+  setIsStrictModeForDevtools as setIsStrictModeForDevtools_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -190,3 +194,10 @@ export const registerMutableSourceForHydration = enableNewReconciler
 export const runWithPriority = enableNewReconciler
   ? runWithPriority_new
   : runWithPriority_old;
+
+export const getIsStrictModeForDevtools = enableNewReconciler
+  ? getIsStrictModeForDevtools_new
+  : getIsStrictModeForDevtools_old;
+export const setIsStrictModeForDevtools = enableNewReconciler
+  ? setIsStrictModeForDevtools_new
+  : setIsStrictModeForDevtools_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 90503a183d94..8760466c8cf7 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -105,6 +105,9 @@ export {
   observeVisibleRects,
 } from './ReactTestSelectors';
 
+import * as Scheduler from './Scheduler';
+import {setSuppressWarning} from 'shared/consoleWithStackDev';
+
 type OpaqueRoot = FiberRoot;
 
 // 0 is PROD, 1 is DEV.
@@ -458,6 +461,8 @@ export function shouldSuspend(fiber: Fiber): boolean {
   return shouldSuspendImpl(fiber);
 }
 
+let isStrictMode = false;
+
 let overrideHookState = null;
 let overrideHookStateDeletePath = null;
 let overrideHookStateRenamePath = null;
@@ -707,6 +712,21 @@ function getCurrentFiberForDevTools() {
   return ReactCurrentFiberCurrent;
 }
 
+export function getIsStrictModeForDevtools() {
+  return isStrictMode;
+}
+
+export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
+  // We're in a test because Scheduler.unstable_yieldValue only exists
+  // in SchedulerMock. To reduce the noise in strict mode tests,
+  // suppress warnings and disable scheduler yielding during the double render
+  if (typeof Scheduler.unstable_yieldValue === 'function') {
+    Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
+    setSuppressWarning(newIsStrictMode);
+  }
+  isStrictMode = newIsStrictMode;
+}
+
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
   const {findFiberByHostInstance} = devToolsConfig;
   const {ReactCurrentDispatcher} = ReactSharedInternals;
@@ -736,6 +756,7 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
+    getIsStrictMode: __DEV__ ? getIsStrictModeForDevtools : null,
     // Enables DevTools to detect reconciler version rather than renderer version
     // which may not match for third party renderers.
     reconcilerVersion: ReactVersion,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 2608bc260264..687a9d7b0e80 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -105,6 +105,9 @@ export {
   observeVisibleRects,
 } from './ReactTestSelectors';
 
+import * as Scheduler from './Scheduler';
+import {setSuppressWarning} from 'shared/consoleWithStackDev';
+
 type OpaqueRoot = FiberRoot;
 
 // 0 is PROD, 1 is DEV.
@@ -458,6 +461,8 @@ export function shouldSuspend(fiber: Fiber): boolean {
   return shouldSuspendImpl(fiber);
 }
 
+let isStrictMode = false;
+
 let overrideHookState = null;
 let overrideHookStateDeletePath = null;
 let overrideHookStateRenamePath = null;
@@ -707,6 +712,21 @@ function getCurrentFiberForDevTools() {
   return ReactCurrentFiberCurrent;
 }
 
+export function getIsStrictModeForDevtools() {
+  return isStrictMode;
+}
+
+export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
+  // We're in a test because Scheduler.unstable_yieldValue only exists
+  // in SchedulerMock. To reduce the noise in strict mode tests,
+  // suppress warnings and disable scheduler yielding during the double render
+  if (typeof Scheduler.unstable_yieldValue === 'function') {
+    Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
+    setSuppressWarning(newIsStrictMode);
+  }
+  isStrictMode = newIsStrictMode;
+}
+
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
   const {findFiberByHostInstance} = devToolsConfig;
   const {ReactCurrentDispatcher} = ReactSharedInternals;
@@ -736,6 +756,7 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
+    getIsStrictMode: __DEV__ ? getIsStrictModeForDevtools : null,
     // Enables DevTools to detect reconciler version rather than renderer version
     // which may not match for third party renderers.
     reconcilerVersion: ReactVersion,
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index 0b694d8f68ed..a42384322fcd 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -110,11 +110,10 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import invariant from 'shared/invariant';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -394,11 +393,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
@@ -427,11 +426,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 9456a0a7c970..724dfa0d7171 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -110,11 +110,10 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
+import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
 
 import invariant from 'shared/invariant';
 
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -394,11 +393,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
@@ -427,11 +426,11 @@ function getStateFromUpdate<State>(
             debugRenderPhaseSideEffectsForStrictMode &&
             workInProgress.mode & StrictLegacyMode
           ) {
-            disableLogs();
+            setIsStrictModeForDevtools(true);
             try {
               payload.call(instance, prevState, nextProps);
             } finally {
-              reenableLogs();
+              setIsStrictModeForDevtools(false);
             }
           }
           exitDisallowedContextReadInDEV();
diff --git a/packages/react-reconciler/src/Scheduler.js b/packages/react-reconciler/src/Scheduler.js
index dabb5baaf64b..2176247f002d 100644
--- a/packages/react-reconciler/src/Scheduler.js
+++ b/packages/react-reconciler/src/Scheduler.js
@@ -26,3 +26,9 @@ 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 unstable_yieldValue = Scheduler.unstable_yieldValue;
+export const unstable_setDisableYieldValue =
+  Scheduler.unstable_setDisableYieldValue;
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 5bd16f9c544d..3676d5719a0c 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -893,8 +893,8 @@ describe('context legacy', () => {
     ReactDOM.render(<Root />, container);
   });
 
-  describe('disableLogs', () => {
-    it('disables logs once for class double render', () => {
+  describe('logging', () => {
+    it('does not disable logs for class double render', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -915,14 +915,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(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('disables logs once for class double ctor', () => {
+    it('does not disable logs for class double ctor', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -946,14 +946,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(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('disables logs once for class double getDerivedStateFromProps', () => {
+    it('does not disable logs for class double getDerivedStateFromProps', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -978,14 +978,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(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('disables logs once for class double shouldComponentUpdate', () => {
+    it('does not disable logs for class double shouldComponentUpdate', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -1017,14 +1017,14 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(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('disables logs once for class state updaters', () => {
+    it('does not disable logs for class state updaters', () => {
       spyOnDevAndProd(console, 'log');
 
       let inst;
@@ -1051,14 +1051,14 @@ describe('context legacy', () => {
       });
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(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('disables logs once for function double render', () => {
+    it('does not disable logs for function double render', () => {
       spyOnDevAndProd(console, 'log');
 
       let count = 0;
@@ -1077,7 +1077,7 @@ describe('context legacy', () => {
       );
 
       expect(count).toBe(__DEV__ ? 2 : 1);
-      expect(console.log).toBeCalledTimes(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.
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index a229342d27fd..21c258a6b528 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -79,6 +79,12 @@ let isFlushing: boolean = false;
 let needsPaint: boolean = false;
 let shouldYieldForPaint: boolean = false;
 
+var disableYieldValue = false;
+
+function setDisableYieldValue(newValue) {
+  disableYieldValue = newValue;
+}
+
 function advanceTimers(currentTime) {
   // Check for tasks that are no longer delayed and add them to the queue.
   let timer = peek(timerQueue);
@@ -570,7 +576,7 @@ function unstable_flushAll(): void {
 
 function unstable_yieldValue(value: mixed): void {
   // eslint-disable-next-line react-internal/no-production-logging
-  if (console.log.name === 'disabledLog') {
+  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;
@@ -584,7 +590,7 @@ function unstable_yieldValue(value: mixed): void {
 
 function unstable_advanceTime(ms: number) {
   // eslint-disable-next-line react-internal/no-production-logging
-  if (console.log.name === 'disabledLog') {
+  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;
@@ -629,6 +635,7 @@ export {
   unstable_yieldValue,
   unstable_advanceTime,
   reset,
+  setDisableYieldValue as unstable_setDisableYieldValue,
 };
 
 export const unstable_Profiling = enableProfiling
diff --git a/packages/shared/consoleWithStackDev.js b/packages/shared/consoleWithStackDev.js
index 72c7e76273a7..20adcc9f3539 100644
--- a/packages/shared/consoleWithStackDev.js
+++ b/packages/shared/consoleWithStackDev.js
@@ -7,6 +7,13 @@
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
+let suppressWarning = false;
+export function setSuppressWarning(newSuppressWarning) {
+  if (__DEV__) {
+    suppressWarning = newSuppressWarning;
+  }
+}
+
 // In DEV, calls to console.warn and console.error get replaced
 // by calls to these methods by a Babel plugin.
 //
@@ -15,13 +22,17 @@ import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 export function warn(format, ...args) {
   if (__DEV__) {
-    printWarning('warn', format, args);
+    if (!suppressWarning) {
+      printWarning('warn', format, args);
+    }
   }
 }
 
 export function error(format, ...args) {
   if (__DEV__) {
-    printWarning('error', format, args);
+    if (!suppressWarning) {
+      printWarning('error', format, args);
+    }
   }
 }
 
diff --git a/packages/shared/forks/Scheduler.umd.js b/packages/shared/forks/Scheduler.umd.js
index d836bba49ab3..133f169c54d4 100644
--- a/packages/shared/forks/Scheduler.umd.js
+++ b/packages/shared/forks/Scheduler.umd.js
@@ -31,8 +31,11 @@ const {
   unstable_forceFrameRate,
 
   // this doesn't actually exist on the scheduler, but it *does*
-  // on scheduler/unstable_mock, which we'll need inside act().
+  // on scheduler/unstable_mock, which we'll need inside act()
+  // and for internal testing
   unstable_flushAllWithoutAsserting,
+  unstable_yieldValue,
+  unstable_setDisableYieldValue,
 } = ReactInternals.Scheduler;
 
 export {
@@ -54,4 +57,6 @@ export {
   unstable_IdlePriority,
   unstable_forceFrameRate,
   unstable_flushAllWithoutAsserting,
+  unstable_yieldValue,
+  unstable_setDisableYieldValue,
 };
diff --git a/packages/shared/forks/consoleWithStackDev.www.js b/packages/shared/forks/consoleWithStackDev.www.js
index 19acc6f9ec9a..a56faeb48567 100644
--- a/packages/shared/forks/consoleWithStackDev.www.js
+++ b/packages/shared/forks/consoleWithStackDev.www.js
@@ -8,15 +8,26 @@
 // This refers to a WWW module.
 const warningWWW = require('warning');
 
+let suppressWarning = false;
+export function setSuppressWarning(newSuppressWarning) {
+  if (__DEV__) {
+    suppressWarning = newSuppressWarning;
+  }
+}
+
 export function warn(format, ...args) {
   if (__DEV__) {
-    printWarning('warn', format, args);
+    if (!suppressWarning) {
+      printWarning('warn', format, args);
+    }
   }
 }
 
 export function error(format, ...args) {
   if (__DEV__) {
-    printWarning('error', format, args);
+    if (!suppressWarning) {
+      printWarning('error', format, args);
+    }
   }
 }
 
diff --git a/scripts/flow/react-devtools.js b/scripts/flow/react-devtools.js
index c8a8789de4ef..97b3f286ab98 100644
--- a/scripts/flow/react-devtools.js
+++ b/scripts/flow/react-devtools.js
@@ -9,3 +9,10 @@
 
 declare var __EXTENSION__: boolean;
 declare var __TEST__: boolean;
+
+declare var DARK_MODE_DIMMED_WARNING_COLOR: string;
+declare var DARK_MODE_DIMMED_ERROR_COLOR: string;
+declare var DARK_MODE_DIMMED_LOG_COLOR: string;
+declare var LIGHT_MODE_DIMMED_WARNING_COLOR: string;
+declare var LIGHT_MODE_DIMMED_ERROR_COLOR: string;
+declare var LIGHT_MODE_DIMMED_LOG_COLOR: string;

From 2bf2e76d366439766ab6b4acb851a65963490920 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 26 Aug 2021 09:19:00 -0400
Subject: [PATCH 0800/1603] Add performance marksf or individual fetch()
 requests (#22176)

---
 .../src/parseHookNames/parseHookNames.js         | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 6ea73e77ec04..5337eb4aff3c 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -451,6 +451,10 @@ function extractAndLoadSourceMaps(
 }
 
 function fetchFile(url: string): Promise<string> {
+  if (__PERFORMANCE_PROFILE__) {
+    mark('fetchFile("' + url + '")');
+  }
+
   return new Promise((resolve, reject) => {
     fetch(url).then(
       response => {
@@ -458,18 +462,27 @@ function fetchFile(url: string): Promise<string> {
           response
             .text()
             .then(text => {
+              if (__PERFORMANCE_PROFILE__) {
+                measure('fetchFile("' + url + '")');
+              }
               resolve(text);
             })
             .catch(error => {
               if (__DEBUG__) {
                 console.log(`fetchFile() Could not read text for url "${url}"`);
               }
+              if (__PERFORMANCE_PROFILE__) {
+                measure('fetchFile("' + url + '")');
+              }
               reject(null);
             });
         } else {
           if (__DEBUG__) {
             console.log(`fetchFile() Got bad response for url "${url}"`);
           }
+          if (__PERFORMANCE_PROFILE__) {
+            measure('fetchFile("' + url + '")');
+          }
           reject(null);
         }
       },
@@ -477,6 +490,9 @@ function fetchFile(url: string): Promise<string> {
         if (__DEBUG__) {
           console.log(`fetchFile() Could not fetch file: ${error.message}`);
         }
+        if (__PERFORMANCE_PROFILE__) {
+          measure('fetchFile("' + url + '")');
+        }
         reject(null);
       },
     );

From 0ba0564aeea73b496264b6b2031b990a783cc142 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 26 Aug 2021 13:05:15 -0400
Subject: [PATCH 0801/1603] [DevTools] Add utils for perfomance marks (#22180)

---
 .../react-devtools-extensions/src/astUtils.js |  78 ++--
 .../src/parseHookNames/parseHookNames.js      | 395 +++++++-----------
 .../src/PerformanceMarks.js                   |  59 +++
 3 files changed, 240 insertions(+), 292 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/PerformanceMarks.js

diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-extensions/src/astUtils.js
index f7ffea3df8e7..05c6391941d7 100644
--- a/packages/react-devtools-extensions/src/astUtils.js
+++ b/packages/react-devtools-extensions/src/astUtils.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {__PERFORMANCE_PROFILE__} from 'react-devtools-shared/src/constants';
+import {withSyncPerformanceMark} from 'react-devtools-shared/src/PerformanceMarks';
 import traverse, {NodePath, Node} from '@babel/traverse';
 import {File} from '@babel/types';
 
@@ -28,15 +28,6 @@ export type SourceFileASTWithHookDetails = {
 
 export const NO_HOOK_NAME = '<no-hook>';
 
-function mark(markName: string): void {
-  performance.mark(markName + '-start');
-}
-
-function measure(markName: string): void {
-  performance.mark(markName + '-end');
-  performance.measure(markName, markName + '-start', markName + '-end');
-}
-
 const AST_NODE_TYPES = Object.freeze({
   PROGRAM: 'Program',
   CALL_EXPRESSION: 'CallExpression',
@@ -141,13 +132,10 @@ export function getHookName(
   originalSourceLineNumber: number,
   originalSourceColumnNumber: number,
 ): string | null {
-  if (__PERFORMANCE_PROFILE__) {
-    mark('getPotentialHookDeclarationsFromAST(originalSourceAST)');
-  }
-  const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST);
-  if (__PERFORMANCE_PROFILE__) {
-    measure('getPotentialHookDeclarationsFromAST(originalSourceAST)');
-  }
+  const hooksFromAST = withSyncPerformanceMark(
+    'getPotentialHookDeclarationsFromAST(originalSourceAST)',
+    () => getPotentialHookDeclarationsFromAST(originalSourceAST),
+  );
 
   let potentialReactHookASTNode = null;
   if (originalSourceColumnNumber === 0) {
@@ -188,29 +176,23 @@ export function getHookName(
   // nodesAssociatedWithReactHookASTNode could directly be used to obtain the hook variable name
   // depending on the type of potentialReactHookASTNode
   try {
-    if (__PERFORMANCE_PROFILE__) {
-      mark('getFilteredHookASTNodes()');
-    }
-    const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes(
-      potentialReactHookASTNode,
-      hooksFromAST,
-      originalSourceCode,
+    const nodesAssociatedWithReactHookASTNode = withSyncPerformanceMark(
+      'getFilteredHookASTNodes()',
+      () =>
+        getFilteredHookASTNodes(
+          potentialReactHookASTNode,
+          hooksFromAST,
+          originalSourceCode,
+        ),
     );
-    if (__PERFORMANCE_PROFILE__) {
-      measure('getFilteredHookASTNodes()');
-    }
 
-    if (__PERFORMANCE_PROFILE__) {
-      mark('getHookNameFromNode()');
-    }
-    const name = getHookNameFromNode(
-      hook,
-      nodesAssociatedWithReactHookASTNode,
-      potentialReactHookASTNode,
+    const name = withSyncPerformanceMark('getHookNameFromNode()', () =>
+      getHookNameFromNode(
+        hook,
+        nodesAssociatedWithReactHookASTNode,
+        potentialReactHookASTNode,
+      ),
     );
-    if (__PERFORMANCE_PROFILE__) {
-      measure('getHookNameFromNode()');
-    }
 
     return name;
   } catch (error) {
@@ -315,19 +297,15 @@ function getHookVariableName(
 
 function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
   const potentialHooksFound: NodePath[] = [];
-  if (__PERFORMANCE_PROFILE__) {
-    mark('traverse(sourceAST)');
-  }
-  traverse(sourceAST, {
-    enter(path) {
-      if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {
-        potentialHooksFound.push(path);
-      }
-    },
-  });
-  if (__PERFORMANCE_PROFILE__) {
-    measure('traverse(sourceAST)');
-  }
+  withSyncPerformanceMark('traverse(sourceAST)', () =>
+    traverse(sourceAST, {
+      enter(path) {
+        if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {
+          potentialHooksFound.push(path);
+        }
+      },
+    }),
+  );
   return potentialHooksFound;
 }
 
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
index 5337eb4aff3c..9afd3dea034a 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
@@ -12,13 +12,15 @@ import LRU from 'lru-cache';
 import {SourceMapConsumer} from 'source-map-js';
 import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
-import {
-  __DEBUG__,
-  __PERFORMANCE_PROFILE__,
-} from 'react-devtools-shared/src/constants';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {sourceMapIncludesSource} from '../SourceMapUtils';
 import {SourceMapMetadataConsumer} from '../SourceMapMetadataConsumer';
+import {
+  withAsyncPerformanceMark,
+  withCallbackPerformanceMark,
+  withSyncPerformanceMark,
+} from 'react-devtools-shared/src/PerformanceMarks';
 
 import type {
   HooksNode,
@@ -26,18 +28,8 @@ import type {
   HooksTree,
 } from 'react-debug-tools/src/ReactDebugHooks';
 import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
-import type {Thenable} from 'shared/ReactTypes';
 import type {SourceConsumer} from '../astUtils';
 
-function mark(markName: string): void {
-  performance.mark(markName + '-start');
-}
-
-function measure(markName: string): void {
-  performance.mark(markName + '-end');
-  performance.measure(markName, markName + '-start', markName + '-end');
-}
-
 const MAX_SOURCE_LENGTH = 100_000_000;
 
 type AST = mixed;
@@ -118,17 +110,20 @@ const originalURLToMetadataCache: LRUCache<
 
 export async function parseHookNames(
   hooksTree: HooksTree,
-): Thenable<HookNames | null> {
-  if (__PERFORMANCE_PROFILE__) {
-    mark('parseHookNames()');
-    mark('flattenHooksList()');
-  }
+): Promise<HookNames | null> {
   const hooksList: Array<HooksNode> = [];
-  flattenHooksList(hooksTree, hooksList);
-  if (__PERFORMANCE_PROFILE__) {
-    measure('flattenHooksList()');
-  }
+  withSyncPerformanceMark('flattenHooksList()', () => {
+    flattenHooksList(hooksTree, hooksList);
+  });
+
+  return withAsyncPerformanceMark('parseHookNames()', () =>
+    parseHookNamesImpl(hooksList),
+  );
+}
 
+async function parseHookNamesImpl(
+  hooksList: HooksNode[],
+): Promise<HookNames | null> {
   if (__DEBUG__) {
     console.log('parseHookNames() hooksList:', hooksList);
   }
@@ -183,56 +178,25 @@ export async function parseHookNames(
     }
   }
 
-  if (__PERFORMANCE_PROFILE__) {
-    mark('loadSourceFiles()');
-  }
+  await withAsyncPerformanceMark('loadSourceFiles()', () =>
+    loadSourceFiles(locationKeyToHookSourceData),
+  );
 
-  let promise = loadSourceFiles(locationKeyToHookSourceData);
-  if (__PERFORMANCE_PROFILE__) {
-    promise = promise.then(data => {
-      mark('extractAndLoadSourceMaps()');
-      measure('loadSourceFiles()');
-      return data;
-    });
-  }
-  promise = promise.then(() =>
+  await withAsyncPerformanceMark('extractAndLoadSourceMaps()', () =>
     extractAndLoadSourceMaps(locationKeyToHookSourceData),
   );
-  if (__PERFORMANCE_PROFILE__) {
-    promise = promise.then(data => {
-      mark('parseSourceAST()');
-      measure('extractAndLoadSourceMaps()');
-      return data;
-    });
-  }
-  promise = promise.then(() => parseSourceAST(locationKeyToHookSourceData));
-  if (__PERFORMANCE_PROFILE__) {
-    promise = promise.then(data => {
-      mark('updateLruCache()');
-      measure('parseSourceAST()');
-      return data;
-    });
-  }
-  promise = promise.then(() => updateLruCache(locationKeyToHookSourceData));
-  if (__PERFORMANCE_PROFILE__) {
-    promise = promise.then(data => {
-      mark('findHookNames()');
-      measure('updateLruCache()');
-      return data;
-    });
-  }
-  promise = promise.then(() =>
-    findHookNames(hooksList, locationKeyToHookSourceData),
+
+  withSyncPerformanceMark('parseSourceAST()', () =>
+    parseSourceAST(locationKeyToHookSourceData),
   );
-  if (__PERFORMANCE_PROFILE__) {
-    promise = promise.then(data => {
-      measure('findHookNames()');
-      measure('parseHookNames()');
-      return data;
-    });
-  }
 
-  return promise;
+  withSyncPerformanceMark('updateLruCache()', () =>
+    updateLruCache(locationKeyToHookSourceData),
+  );
+
+  return withSyncPerformanceMark('findHookNames()', () =>
+    findHookNames(hooksList, locationKeyToHookSourceData),
+  );
 }
 
 function decodeBase64String(encoded: string): Object {
@@ -279,13 +243,10 @@ function extractAndLoadSourceMaps(
     const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
     const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
 
-    if (__PERFORMANCE_PROFILE__) {
-      mark('sourceMapRegex.exec(runtimeSourceCode)');
-    }
-    let sourceMappingURLMatch = sourceMapRegex.exec(runtimeSourceCode);
-    if (__PERFORMANCE_PROFILE__) {
-      measure('sourceMapRegex.exec(runtimeSourceCode)');
-    }
+    let sourceMappingURLMatch = withSyncPerformanceMark(
+      'sourceMapRegex.exec(runtimeSourceCode)',
+      () => sourceMapRegex.exec(runtimeSourceCode),
+    );
 
     if (sourceMappingURLMatch == null) {
       // Maybe file has not been transformed; we'll try to parse it as-is in parseSourceAST().
@@ -309,21 +270,13 @@ function extractAndLoadSourceMaps(
           const trimmed = ((sourceMappingURL.match(
             /base64,([a-zA-Z0-9+\/=]+)/,
           ): any): Array<string>)[1];
-          if (__PERFORMANCE_PROFILE__) {
-            mark('decodeBase64String()');
-          }
-          const decoded = decodeBase64String(trimmed);
-          if (__PERFORMANCE_PROFILE__) {
-            measure('decodeBase64String()');
-          }
+          const decoded = withSyncPerformanceMark('decodeBase64String()', () =>
+            decodeBase64String(trimmed),
+          );
 
-          if (__PERFORMANCE_PROFILE__) {
-            mark('JSON.parse(decoded)');
-          }
-          const parsed = JSON.parse(decoded);
-          if (__PERFORMANCE_PROFILE__) {
-            measure('JSON.parse(decoded)');
-          }
+          const parsed = withSyncPerformanceMark('JSON.parse(decoded)', () =>
+            JSON.parse(decoded),
+          );
 
           if (__DEBUG__) {
             console.groupCollapsed(
@@ -336,27 +289,24 @@ function extractAndLoadSourceMaps(
           // 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(parsed, runtimeSourceURL)) {
-            if (__PERFORMANCE_PROFILE__) {
-              mark('new SourceMapMetadataConsumer(parsed)');
-            }
-            hookSourceData.metadataConsumer = new SourceMapMetadataConsumer(
-              parsed,
+            hookSourceData.metadataConsumer = withSyncPerformanceMark(
+              'new SourceMapMetadataConsumer(parsed)',
+              () => new SourceMapMetadataConsumer(parsed),
+            );
+            hookSourceData.sourceConsumer = withSyncPerformanceMark(
+              'new SourceMapConsumer(parsed)',
+              () => new SourceMapConsumer(parsed),
             );
-            if (__PERFORMANCE_PROFILE__) {
-              measure('new SourceMapMetadataConsumer(parsed)');
-              mark('new SourceMapConsumer(parsed)');
-            }
-            hookSourceData.sourceConsumer = new SourceMapConsumer(parsed);
-            if (__PERFORMANCE_PROFILE__) {
-              measure('new SourceMapConsumer(parsed)');
-            }
             break;
           }
         } else {
           externalSourceMapURLs.push(sourceMappingURL);
         }
 
-        sourceMappingURLMatch = sourceMapRegex.exec(runtimeSourceCode);
+        sourceMappingURLMatch = withSyncPerformanceMark(
+          'sourceMapRegex.exec(runtimeSourceCode)',
+          () => sourceMapRegex.exec(runtimeSourceCode),
+        );
       }
 
       const foundInlineSourceMap =
@@ -395,29 +345,20 @@ function extractAndLoadSourceMaps(
             fetchPromises.get(url) ||
             fetchFile(url).then(
               sourceMapContents => {
-                if (__PERFORMANCE_PROFILE__) {
-                  mark('JSON.parse(sourceMapContents)');
-                }
-                const parsed = JSON.parse(sourceMapContents);
-                if (__PERFORMANCE_PROFILE__) {
-                  measure('JSON.parse(sourceMapContents)');
-                }
+                const parsed = withSyncPerformanceMark(
+                  'JSON.parse(sourceMapContents)',
+                  () => JSON.parse(sourceMapContents),
+                );
 
-                if (__PERFORMANCE_PROFILE__) {
-                  mark('SourceMapConsumer(parsed)');
-                }
-                const sourceConsumer = new SourceMapConsumer(parsed);
-                if (__PERFORMANCE_PROFILE__) {
-                  measure('SourceMapConsumer(parsed)');
-                }
+                const sourceConsumer = withSyncPerformanceMark(
+                  'new SourceMapConsumer(parsed)',
+                  () => new SourceMapConsumer(parsed),
+                );
 
-                if (__PERFORMANCE_PROFILE__) {
-                  mark('SourceMapMetadataConsumer(parsed)');
-                }
-                const metadataConsumer = new SourceMapMetadataConsumer(parsed);
-                if (__PERFORMANCE_PROFILE__) {
-                  measure('SourceMapMetadataConsumer(parsed)');
-                }
+                const metadataConsumer = withSyncPerformanceMark(
+                  'new SourceMapMetadataConsumer(parsed)',
+                  () => new SourceMapMetadataConsumer(parsed),
+                );
 
                 return {sourceConsumer, metadataConsumer};
               },
@@ -451,51 +392,43 @@ function extractAndLoadSourceMaps(
 }
 
 function fetchFile(url: string): Promise<string> {
-  if (__PERFORMANCE_PROFILE__) {
-    mark('fetchFile("' + url + '")');
-  }
-
-  return new Promise((resolve, reject) => {
-    fetch(url).then(
-      response => {
-        if (response.ok) {
-          response
-            .text()
-            .then(text => {
-              if (__PERFORMANCE_PROFILE__) {
-                measure('fetchFile("' + url + '")');
-              }
-              resolve(text);
-            })
-            .catch(error => {
-              if (__DEBUG__) {
-                console.log(`fetchFile() Could not read text for url "${url}"`);
-              }
-              if (__PERFORMANCE_PROFILE__) {
-                measure('fetchFile("' + url + '")');
-              }
-              reject(null);
-            });
-        } else {
-          if (__DEBUG__) {
-            console.log(`fetchFile() Got bad response for url "${url}"`);
+  return withCallbackPerformanceMark('fetchFile("' + url + '")', done => {
+    return new Promise((resolve, reject) => {
+      fetch(url).then(
+        response => {
+          if (response.ok) {
+            response
+              .text()
+              .then(text => {
+                done();
+                resolve(text);
+              })
+              .catch(error => {
+                if (__DEBUG__) {
+                  console.log(
+                    `fetchFile() Could not read text for url "${url}"`,
+                  );
+                }
+                done();
+                reject(null);
+              });
+          } else {
+            if (__DEBUG__) {
+              console.log(`fetchFile() Got bad response for url "${url}"`);
+            }
+            done();
+            reject(null);
           }
-          if (__PERFORMANCE_PROFILE__) {
-            measure('fetchFile("' + url + '")');
+        },
+        error => {
+          if (__DEBUG__) {
+            console.log(`fetchFile() Could not fetch file: ${error.message}`);
           }
+          done();
           reject(null);
-        }
-      },
-      error => {
-        if (__DEBUG__) {
-          console.log(`fetchFile() Could not fetch file: ${error.message}`);
-        }
-        if (__PERFORMANCE_PROFILE__) {
-          measure('fetchFile("' + url + '")');
-        }
-        reject(null);
-      },
-    );
+        },
+      );
+    });
   });
 }
 
@@ -535,20 +468,18 @@ function findHookNames(
       originalSourceColumnNumber = columnNumber;
       originalSourceLineNumber = lineNumber;
     } else {
-      if (__PERFORMANCE_PROFILE__) {
-        mark('sourceConsumer.originalPositionFor()');
-      }
-      const position = sourceConsumer.originalPositionFor({
-        line: lineNumber,
-
-        // Column numbers are represented differently between tools/engines.
-        // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
-        // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
-        column: columnNumber - 1,
-      });
-      if (__PERFORMANCE_PROFILE__) {
-        measure('sourceConsumer.originalPositionFor()');
-      }
+      const position = withSyncPerformanceMark(
+        'sourceConsumer.originalPositionFor()',
+        () =>
+          sourceConsumer.originalPositionFor({
+            line: lineNumber,
+
+            // Column numbers are represented differently between tools/engines.
+            // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
+            // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
+            column: columnNumber - 1,
+          }),
+      );
 
       originalSourceColumnNumber = position.column;
       originalSourceLineNumber = position.line;
@@ -571,33 +502,25 @@ function findHookNames(
     let name;
     const {metadataConsumer} = hookSourceData;
     if (metadataConsumer != null) {
-      if (__PERFORMANCE_PROFILE__) {
-        mark('metadataConsumer.hookNameFor()');
-      }
-      name = metadataConsumer.hookNameFor({
-        line: originalSourceLineNumber,
-        column: originalSourceColumnNumber,
-        source: originalSourceURL,
-      });
-      if (__PERFORMANCE_PROFILE__) {
-        measure('metadataConsumer.hookNameFor()');
-      }
+      name = withSyncPerformanceMark('metadataConsumer.hookNameFor()', () =>
+        metadataConsumer.hookNameFor({
+          line: originalSourceLineNumber,
+          column: originalSourceColumnNumber,
+          source: originalSourceURL,
+        }),
+      );
     }
 
     if (name == null) {
-      if (__PERFORMANCE_PROFILE__) {
-        mark('getHookName()');
-      }
-      name = getHookName(
-        hook,
-        hookSourceData.originalSourceAST,
-        ((hookSourceData.originalSourceCode: any): string),
-        ((originalSourceLineNumber: any): number),
-        originalSourceColumnNumber,
+      name = withSyncPerformanceMark('getHookName()', () =>
+        getHookName(
+          hook,
+          hookSourceData.originalSourceAST,
+          ((hookSourceData.originalSourceCode: any): string),
+          ((originalSourceLineNumber: any): number),
+          originalSourceColumnNumber,
+        ),
       );
-      if (__PERFORMANCE_PROFILE__) {
-        measure('getHookName()');
-      }
     }
 
     if (__DEBUG__) {
@@ -645,9 +568,9 @@ function loadSourceFiles(
   return Promise.all(setPromises);
 }
 
-async function parseSourceAST(
+function parseSourceAST(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
-): Promise<*> {
+): void {
   locationKeyToHookSourceData.forEach(hookSourceData => {
     if (hookSourceData.originalSourceAST !== null) {
       // Use cached metadata.
@@ -665,22 +588,20 @@ async function parseSourceAST(
       if (lineNumber == null || columnNumber == null) {
         throw Error('Hook source code location not found.');
       }
-      if (__PERFORMANCE_PROFILE__) {
-        mark('sourceConsumer.originalPositionFor()');
-      }
       // Now that the source map has been loaded,
       // extract the original source for later.
-      const {source} = sourceConsumer.originalPositionFor({
-        line: lineNumber,
-
-        // Column numbers are represented differently between tools/engines.
-        // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
-        // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
-        column: columnNumber - 1,
-      });
-      if (__PERFORMANCE_PROFILE__) {
-        measure('sourceConsumer.originalPositionFor()');
-      }
+      const {source} = withSyncPerformanceMark(
+        'sourceConsumer.originalPositionFor()',
+        () =>
+          sourceConsumer.originalPositionFor({
+            line: lineNumber,
+
+            // Column numbers are represented differently between tools/engines.
+            // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
+            // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
+            column: columnNumber - 1,
+          }),
+      );
 
       if (source == null) {
         // TODO (named hooks) maybe fall back to the runtime source instead of throwing?
@@ -693,16 +614,10 @@ async function parseSourceAST(
       // It can be relative if the source map specifies it that way,
       // but we use it as a cache key across different source maps and there can be collisions.
       originalSourceURL = (source: string);
-      if (__PERFORMANCE_PROFILE__) {
-        mark('sourceConsumer.sourceContentFor()');
-      }
-      originalSourceCode = (sourceConsumer.sourceContentFor(
-        source,
-        true,
-      ): string);
-      if (__PERFORMANCE_PROFILE__) {
-        measure('sourceConsumer.sourceContentFor()');
-      }
+      originalSourceCode = withSyncPerformanceMark(
+        'sourceConsumer.sourceContentFor()',
+        () => (sourceConsumer.sourceContentFor(source, true): string),
+      );
 
       if (__DEBUG__) {
         console.groupCollapsed(
@@ -756,16 +671,14 @@ async function parseSourceAST(
         originalSourceCode.indexOf('@flow') > 0 ? 'flow' : 'typescript';
 
       // TODO (named hooks) Parsing should ideally be done off of the main thread.
-      if (__PERFORMANCE_PROFILE__) {
-        mark('[@babel/parser] parse(originalSourceCode)');
-      }
-      const originalSourceAST = parse(originalSourceCode, {
-        sourceType: 'unambiguous',
-        plugins: ['jsx', plugin],
-      });
-      if (__PERFORMANCE_PROFILE__) {
-        measure('[@babel/parser] parse(originalSourceCode)');
-      }
+      const originalSourceAST = withSyncPerformanceMark(
+        '[@babel/parser] parse(originalSourceCode)',
+        () =>
+          parse(originalSourceCode, {
+            sourceType: 'unambiguous',
+            plugins: ['jsx', plugin],
+          }),
+      );
       hookSourceData.originalSourceAST = originalSourceAST;
       if (__DEBUG__) {
         console.log(
@@ -778,7 +691,6 @@ async function parseSourceAST(
       });
     }
   });
-  return Promise.resolve();
 }
 
 function flattenHooksList(
@@ -812,7 +724,7 @@ function isUnnamedBuiltInHook(hook: HooksNode) {
 
 function updateLruCache(
   locationKeyToHookSourceData: Map<string, HookSourceData>,
-): Promise<*> {
+): void {
   locationKeyToHookSourceData.forEach(
     ({metadataConsumer, sourceConsumer, runtimeSourceURL}) => {
       // Only set once to avoid triggering eviction/cleanup code.
@@ -830,7 +742,6 @@ function updateLruCache(
       }
     },
   );
-  return Promise.resolve();
 }
 
 export function purgeCachedMetadata(): void {
diff --git a/packages/react-devtools-shared/src/PerformanceMarks.js b/packages/react-devtools-shared/src/PerformanceMarks.js
new file mode 100644
index 000000000000..0c94b9d4f259
--- /dev/null
+++ b/packages/react-devtools-shared/src/PerformanceMarks.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import {__PERFORMANCE_PROFILE__} from './constants';
+
+function mark(markName: string): void {
+  performance.mark(markName + '-start');
+}
+
+function measure(markName: string): void {
+  performance.mark(markName + '-end');
+  performance.measure(markName, markName + '-start', markName + '-end');
+}
+
+export async function withAsyncPerformanceMark<TReturn>(
+  markName: string,
+  callback: () => Promise<TReturn>,
+): Promise<TReturn> {
+  if (__PERFORMANCE_PROFILE__) {
+    mark(markName);
+    const result = await callback();
+    measure(markName);
+    return result;
+  }
+  return callback();
+}
+
+export function withSyncPerformanceMark<TReturn>(
+  markName: string,
+  callback: () => TReturn,
+): TReturn {
+  if (__PERFORMANCE_PROFILE__) {
+    mark(markName);
+    const result = callback();
+    measure(markName);
+    return result;
+  }
+  return callback();
+}
+
+export function withCallbackPerformanceMark<TReturn>(
+  markName: string,
+  callback: (done: () => void) => TReturn,
+): TReturn {
+  if (__PERFORMANCE_PROFILE__) {
+    mark(markName);
+    const done = () => {
+      measure(markName);
+    };
+    return callback(done);
+  }
+  return callback(() => {});
+}

From 8723e772b98d1a61aa0170981483c4da1e9237c5 Mon Sep 17 00:00:00 2001
From: Matt Hargett <plaztiksyke@gmail.com>
Date: Thu, 26 Aug 2021 12:35:06 -0700
Subject: [PATCH 0802/1603] Fix a string interpolation typo in ReactHooks test
 (#22174)

---
 .../src/__tests__/ReactHooks-test.internal.js               | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
index 53fb9c07589e..9e39b35fc1ba 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -1591,8 +1591,7 @@ describe('ReactHooks', () => {
         }
       });
 
-      it(`warns when more hooks (${(hookNameA,
-      hookNameB)}) are used during update than mount`, () => {
+      it(`warns when more hooks (${hookNameA}, ${hookNameB}) are used during update than mount`, () => {
         function App(props) {
           /* eslint-disable no-unused-vars */
           if (props.update) {
@@ -1646,8 +1645,7 @@ describe('ReactHooks', () => {
         .replace('use', '')
         .replace('Helper', '');
 
-      it(`warns when fewer hooks (${(hookNameA,
-      hookNameB)}) are used during update than mount`, () => {
+      it(`warns when fewer hooks (${hookNameA}, ${hookNameB}) are used during update than mount`, () => {
         function App(props) {
           /* eslint-disable no-unused-vars */
           if (props.update) {

From 46a0f050aacd8b2159b8db99b599a4b69e682189 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 28 Aug 2021 16:57:47 -0400
Subject: [PATCH 0803/1603] Set up use-sync-external-store package (#22202)

This package will be a shim for the built-in useSyncExternalStore API
(not yet implemented).
---
 ReactVersions.js                              |  1 +
 packages/use-sync-external-store/README.md    |  5 +++++
 packages/use-sync-external-store/index.js     | 12 +++++++++++
 packages/use-sync-external-store/npm/index.js |  7 +++++++
 packages/use-sync-external-store/package.json | 21 +++++++++++++++++++
 .../__tests__/useSyncExternalStore-test.js    | 14 +++++++++++++
 .../src/useSyncExternalStore.js               | 12 +++++++++++
 scripts/rollup/bundles.js                     |  9 ++++++++
 8 files changed, 81 insertions(+)
 create mode 100644 packages/use-sync-external-store/README.md
 create mode 100644 packages/use-sync-external-store/index.js
 create mode 100644 packages/use-sync-external-store/npm/index.js
 create mode 100644 packages/use-sync-external-store/package.json
 create mode 100644 packages/use-sync-external-store/src/__tests__/useSyncExternalStore-test.js
 create mode 100644 packages/use-sync-external-store/src/useSyncExternalStore.js

diff --git a/ReactVersions.js b/ReactVersions.js
index 95d4bd8b7c27..2ce7680f0191 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -47,6 +47,7 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
+  'use-sync-external-store',
 ];
 
 module.exports = {
diff --git a/packages/use-sync-external-store/README.md b/packages/use-sync-external-store/README.md
new file mode 100644
index 000000000000..c799272a93ef
--- /dev/null
+++ b/packages/use-sync-external-store/README.md
@@ -0,0 +1,5 @@
+# use-sync-external-store
+
+Backwards compatible shim for React's `useSyncExternalStore`. Works with any React that supports hooks.
+
+Until `useSyncExternalStore` is documented, refer to 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 000000000000..ff57d66d841b
--- /dev/null
+++ b/packages/use-sync-external-store/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * 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 000000000000..a9d619acec0a
--- /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.min.js');
+} else {
+  module.exports = require('./cjs/use-sync-external-store.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 000000000000..cc9a7c3a393c
--- /dev/null
+++ b/packages/use-sync-external-store/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "use-sync-external-store",
+  "description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.",
+  "version": "0.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/facebook/react.git",
+    "directory": "packages/use-sync-external-store"
+  },
+  "files": [
+    "LICENSE",
+    "README.md",
+    "build-info.json",
+    "index.js",
+    "cjs/"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0"
+  }
+}
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStore-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStore-test.js
new file mode 100644
index 000000000000..be6eeb5caf8c
--- /dev/null
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStore-test.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+describe('useSyncExternalStore', () => {
+  test('TODO', () => {});
+});
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 000000000000..8967bff10d33
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export function useSyncExternalStore() {
+  throw new Error('Not yet implemented');
+}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 54c0552ba564..7e87f4cc355e 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -684,6 +684,15 @@ const bundles = [
     externals: ['react'],
   },
 
+  /******* Shim for useSyncExternalState *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store',
+    global: 'useSyncExternalStore',
+    externals: ['react'],
+  },
+
   /******* React Scheduler (experimental) *******/
   {
     bundleTypes: [

From 5037b4e2e6e3f9136cdc52581828f59e7dcd2043 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 30 Aug 2021 21:44:12 +0200
Subject: [PATCH 0804/1603] devtools: Don't display hook index of useContext
 (#22200)

---
 .../views/Components/InspectedElementHooksTree.js      |  2 +-
 .../src/app/InspectableElements/CustomHooks.js         | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index a2ada2bf7735..b478aeb44129 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -222,7 +222,7 @@ function HookView({
 
   let name = hook.name;
   if (enableProfilerChangedHookIndices) {
-    if (!isCustomHook) {
+    if (hookID !== null) {
       name = (
         <>
           <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
index 461535cf4b48..c04496544540 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
@@ -9,10 +9,12 @@
 
 import * as React from 'react';
 import {
+  createContext,
   forwardRef,
   Fragment,
   memo,
   useCallback,
+  useContext,
   useDebugValue,
   useEffect,
   useState,
@@ -64,8 +66,13 @@ function useDeepHookF() {
   useDebugValue('useDeepHookF');
 }
 
+const ContextA = createContext('A');
+const ContextB = createContext('B');
+
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   const [count, updateCount] = useState(0);
+  // eslint-disable-next-line no-unused-vars
+  const contextValueA = useContext(ContextA);
 
   // eslint-disable-next-line no-unused-vars
   const [_, __] = useState(object);
@@ -85,6 +92,9 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   // Tests nested custom hooks
   useNestedOuterHook();
 
+  // eslint-disable-next-line no-unused-vars
+  const contextValueB = useContext(ContextB);
+
   // Verify deep nesting doesn't break
   useDeepHookA();
 

From 36f0005b994aa429d4d8f7ac6c1cab3cacf76385 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 30 Aug 2021 14:12:52 -0700
Subject: [PATCH 0805/1603] added react native feature flags (#22199)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lunaruan commented 3 days ago •
This PR adds separate DevTools feature flag configurations for react-devtools-core. It also breaks the builds down into facebook specific and open source flags so we can experiment in React Native.

Tested yarn build:standalone, yarn build:backend, yarn build:standalone:fb, and yarn build:backend:fb and inspected the output to make sure each package used the correct feature flags (the first two use core-oss and the latter two use fb-oss.
---
 packages/react-devtools-core/package.json     |  2 ++
 .../react-devtools-core/webpack.backend.js    |  4 ++-
 .../react-devtools-core/webpack.standalone.js |  5 +++-
 packages/react-devtools-shared/buildUtils.js  | 10 +++++--
 .../config/DevToolsFeatureFlags.core-fb.js    | 30 +++++++++++++++++++
 .../config/DevToolsFeatureFlags.core-oss.js   | 30 +++++++++++++++++++
 6 files changed, 77 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
 create mode 100644 packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index c0abc6a047c5..d5cc778ec011 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -18,7 +18,9 @@
   "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"
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 4a034b33bd67..0236c4ab30ea 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -24,6 +24,8 @@ 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',
@@ -47,7 +49,7 @@ module.exports = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
-      'react-devtools-feature-flags': resolveFeatureFlags('core/backend'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index e7d2d3af8977..8f17efe9c28b 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -24,6 +24,9 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const featureFlagTarget =
+  process.env.FEATURE_FLAG_TARGET || 'core/standalone-oss';
+
 const babelOptions = {
   configFile: resolve(
     __dirname,
@@ -50,7 +53,7 @@ module.exports = {
     alias: {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
-      'react-devtools-feature-flags': resolveFeatureFlags('core/standalone'),
+      'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
diff --git a/packages/react-devtools-shared/buildUtils.js b/packages/react-devtools-shared/buildUtils.js
index 036c94386a14..9d4850dec9ff 100644
--- a/packages/react-devtools-shared/buildUtils.js
+++ b/packages/react-devtools-shared/buildUtils.js
@@ -11,12 +11,18 @@ const {resolve} = require('path');
 function resolveFeatureFlags(target) {
   let flagsPath;
   switch (target) {
-    case 'core/backend':
-    case 'core/standalone':
     case 'inline':
     case 'shell':
       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;
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 000000000000..3b06e2308e2c
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/************************************************************************
+ * 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 enableProfilerChangedHookIndices = true;
+export const isInternalFacebookBuild = 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';
+
+// eslint-disable-next-line no-unused-vars
+type Check<_X, Y: _X, X: Y = _X> = null;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<ExportsType, FeatureFlagsType>);
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 000000000000..d710b6546e05
--- /dev/null
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/************************************************************************
+ * 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 enableProfilerChangedHookIndices = false;
+export const isInternalFacebookBuild = 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';
+
+// eslint-disable-next-line no-unused-vars
+type Check<_X, Y: _X, X: Y = _X> = null;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<ExportsType, FeatureFlagsType>);

From 597ecd6a0ceebef63edc4c6bc501fe3695790fc6 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 30 Aug 2021 14:37:49 -0700
Subject: [PATCH 0806/1603] [DevTools] Throw error in console without
 interfering with logs (#22175)

---
 .../src/__tests__/console-test.js             | 112 ++++++++++++++++--
 .../src/backend/console.js                    |   3 +
 2 files changed, 103 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index b79301f4f4b5..4c4bbb17a233 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -6,20 +6,19 @@
  *
  * @flow
  */
+let React;
+let ReactDOM;
+let act;
+let fakeConsole;
+let legacyRender;
+let mockError;
+let mockInfo;
+let mockLog;
+let mockWarn;
+let patchConsole;
+let unpatchConsole;
 
 describe('console', () => {
-  let React;
-  let ReactDOM;
-  let act;
-  let fakeConsole;
-  let legacyRender;
-  let mockError;
-  let mockInfo;
-  let mockLog;
-  let mockWarn;
-  let patchConsole;
-  let unpatchConsole;
-
   beforeEach(() => {
     jest.resetModules();
 
@@ -553,3 +552,92 @@ describe('console', () => {
     expect(mockError.mock.calls[0][0]).toBe('error');
   });
 });
+
+describe('console error', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    const Console = require('react-devtools-shared/src/backend/console');
+    patchConsole = Console.patch;
+    unpatchConsole = Console.unpatch;
+
+    // Patch a fake console so we can verify with tests below.
+    // Patching the real console is too complicated,
+    // because Jest itself has hooks into it as does our test env setup.
+    mockError = jest.fn();
+    mockInfo = jest.fn();
+    mockLog = jest.fn();
+    mockWarn = jest.fn();
+    fakeConsole = {
+      error: mockError,
+      info: mockInfo,
+      log: mockLog,
+      warn: mockWarn,
+    };
+
+    Console.dangerous_setTargetConsoleForTesting(fakeConsole);
+
+    // Note the Console module only patches once,
+    // so it's important to patch the test console before injection.
+    patchConsole({
+      appendComponentStack: true,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
+      hideDoubleLogsInStrictLegacy: false,
+    });
+
+    const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
+      internals.getIsStrictMode = () => {
+        throw Error('foo');
+      };
+      inject(internals);
+
+      Console.registerRenderer(internals);
+    };
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    const utils = require('./utils');
+    act = utils.act;
+    legacyRender = utils.legacyRender;
+  });
+
+  it('error in console log throws without interfering with logging', () => {
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    function App() {
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return <div />;
+    }
+
+    patchConsole({
+      appendComponentStack: true,
+      breakOnWarn: false,
+      showInlineWarningsAndErrors: false,
+      hideConsoleLogsInStrictMode: false,
+    });
+
+    expect(() => {
+      act(() => {
+        root.render(<App />);
+      });
+    }).toThrowError('foo');
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+  });
+});
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index c6449c8d22fa..849f9ee373a2 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -222,6 +222,9 @@ export function patch({
               }
             } catch (error) {
               // Don't let a DevTools or React internal error interfere with logging.
+              setTimeout(() => {
+                throw error;
+              }, 0);
             } finally {
               break;
             }

From 67f38366a570f292d51614ffa450af10628f6681 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 30 Aug 2021 15:16:53 -0700
Subject: [PATCH 0807/1603] Add consoleManagedByDevToolsDuringStrictMode
 feature flag in DevTools #22215

---
 .../src/backend/console.js                    |   3 +-
 .../config/DevToolsFeatureFlags.core-fb.js    |   2 +
 .../config/DevToolsFeatureFlags.core-oss.js   |   2 +
 .../config/DevToolsFeatureFlags.default.js    |   2 +
 .../DevToolsFeatureFlags.extension-fb.js      |   2 +
 .../DevToolsFeatureFlags.extension-oss.js     |   2 +
 packages/react-devtools-shared/src/hook.js    | 255 +++++++++---------
 7 files changed, 144 insertions(+), 124 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 849f9ee373a2..26168f8d3d46 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -14,6 +14,7 @@ import {format} from './utils';
 
 import {getInternalReactConstants} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
+import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 
 const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
 const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
@@ -240,7 +241,7 @@ export function patch({
           debugger;
         }
 
-        if (isInStrictMode) {
+        if (consoleManagedByDevToolsDuringStrictMode && isInStrictMode) {
           if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
             // Dim the text color of the double logs if we're not
             // hiding them.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index 3b06e2308e2c..4da6aef3441b 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index d710b6546e05..e6144b7e4f3a 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index b9d3ba23e56e..081342371264 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -15,3 +15,5 @@
 
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
+
+export const consoleManagedByDevToolsDuringStrictMode = true;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
index 104cf263091a..ba593ffe72c1 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index f3457dae71d0..c1bb06855d19 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -16,6 +16,8 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 /************************************************************************
  * Do not edit the code below.
  * It ensures this fork exports the same types as the default flags file.
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 8ef821967d6d..28cfd027afe4 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -16,6 +16,7 @@ import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
+import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
@@ -162,56 +163,60 @@ export function installHook(target: any): DevToolsHook | null {
     maybeMessage: any,
     ...inputArgs: $ReadOnlyArray<any>
   ): string {
-    const args = inputArgs.slice();
-
-    // Symbols cannot be concatenated with Strings.
-    let formatted: string =
-      typeof maybeMessage === 'symbol'
-        ? maybeMessage.toString()
-        : '' + maybeMessage;
+    if (consoleManagedByDevToolsDuringStrictMode) {
+      const args = inputArgs.slice();
+
+      // Symbols cannot be concatenated with Strings.
+      let formatted: string =
+        typeof maybeMessage === 'symbol'
+          ? maybeMessage.toString()
+          : '' + maybeMessage;
+
+      // If the first argument is a string, check for substitutions.
+      if (typeof maybeMessage === 'string') {
+        if (args.length) {
+          const REGEXP = /(%?)(%([jds]))/g;
+
+          formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+            let arg = args.shift();
+            switch (flag) {
+              case 's':
+                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;
+          });
+        }
+      }
 
-    // If the first argument is a string, check for substitutions.
-    if (typeof maybeMessage === 'string') {
+      // Arguments that remain after formatting.
       if (args.length) {
-        const REGEXP = /(%?)(%([jds]))/g;
-
-        formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
-          let arg = args.shift();
-          switch (flag) {
-            case 's':
-              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;
-        });
+        for (let i = 0; i < args.length; i++) {
+          const arg = args[i];
+
+          // Symbols cannot be concatenated with Strings.
+          formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+        }
       }
-    }
 
-    // Arguments that remain after formatting.
-    if (args.length) {
-      for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
+      // Update escaped %% values.
+      formatted = formatted.replace(/%{2,2}/g, '%');
 
-        // Symbols cannot be concatenated with Strings.
-        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
-      }
+      return '' + formatted;
     }
 
-    // Update escaped %% values.
-    formatted = formatted.replace(/%{2,2}/g, '%');
-
-    return '' + formatted;
+    return '';
   }
 
   // NOTE: KEEP IN SYNC with src/backend/console.js:patch
@@ -222,90 +227,92 @@ export function installHook(target: any): DevToolsHook | null {
       browserTheme,
     }: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
   ): void {
-    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
-
-    if (__EXTENSION__) {
-      const targetConsole = console;
-
-      const originalConsoleMethods = {};
-
-      overrideConsoleMethods.forEach(method => {
-        try {
-          const originalMethod = (originalConsoleMethods[
-            method
-          ] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-            ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-            : targetConsole[method]);
-
-          const overrideMethod = (...args) => {
-            let isInStrictMode = false;
-
-            // 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?)
-            const {getCurrentFiber, getIsStrictMode} = renderer;
-            if (typeof getCurrentFiber !== 'function') {
-              return;
-            }
-
-            const current: ?Fiber = getCurrentFiber();
-            if (current != null) {
-              try {
-                if (
-                  typeof getIsStrictMode === 'function' &&
-                  getIsStrictMode()
-                ) {
-                  isInStrictMode = true;
-                }
-              } catch (error) {
-                // Don't let a DevTools or React internal error interfere with logging.
+    if (consoleManagedByDevToolsDuringStrictMode) {
+      const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+
+      if (__EXTENSION__) {
+        const targetConsole = console;
+
+        const originalConsoleMethods = {};
+
+        overrideConsoleMethods.forEach(method => {
+          try {
+            const originalMethod = (originalConsoleMethods[
+              method
+            ] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+              ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+              : targetConsole[method]);
+
+            const overrideMethod = (...args) => {
+              let isInStrictMode = false;
+
+              // 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?)
+              const {getCurrentFiber, getIsStrictMode} = renderer;
+              if (typeof getCurrentFiber !== 'function') {
+                return;
               }
-            }
 
-            if (isInStrictMode) {
-              if (!hideConsoleLogsInStrictMode) {
-                // Dim the text color of the double logs if we're not
-                // hiding them.
-                let color;
-                switch (method) {
-                  case 'warn':
-                    color =
-                      browserTheme === 'light'
-                        ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
-                        : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
-                    break;
-                  case 'error':
-                    color =
-                      browserTheme === 'light'
-                        ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
-                        : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
-                    break;
-                  case 'log':
-                  default:
-                    color =
-                      browserTheme === 'light'
-                        ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
-                        : process.env.DARK_MODE_DIMMED_LOG_COLOR;
-                    break;
+              const current: ?Fiber = getCurrentFiber();
+              if (current != null) {
+                try {
+                  if (
+                    typeof getIsStrictMode === 'function' &&
+                    getIsStrictMode()
+                  ) {
+                    isInStrictMode = true;
+                  }
+                } catch (error) {
+                  // Don't let a DevTools or React internal error interfere with logging.
                 }
+              }
 
-                if (color) {
-                  originalMethod(`%c${format(...args)}`, `color: ${color}`);
-                } else {
-                  throw Error('Console color is not defined');
+              if (isInStrictMode) {
+                if (!hideConsoleLogsInStrictMode) {
+                  // Dim the text color of the double logs if we're not
+                  // hiding them.
+                  let color;
+                  switch (method) {
+                    case 'warn':
+                      color =
+                        browserTheme === 'light'
+                          ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                          : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+                      break;
+                    case 'error':
+                      color =
+                        browserTheme === 'light'
+                          ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                          : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+                      break;
+                    case 'log':
+                    default:
+                      color =
+                        browserTheme === 'light'
+                          ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                          : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+                      break;
+                  }
+
+                  if (color) {
+                    originalMethod(`%c${format(...args)}`, `color: ${color}`);
+                  } else {
+                    throw Error('Console color is not defined');
+                  }
                 }
+              } else {
+                originalMethod(...args);
               }
-            } else {
-              originalMethod(...args);
-            }
-          };
+            };
 
-          overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
-          originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
+            overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+            originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
 
-          // $FlowFixMe property error|warn is not writable.
-          targetConsole[method] = overrideMethod;
-        } catch (error) {}
-      });
+            // $FlowFixMe property error|warn is not writable.
+            targetConsole[method] = overrideMethod;
+          } catch (error) {}
+        });
+      }
     }
   }
 
@@ -365,10 +372,12 @@ export function installHook(target: any): DevToolsHook | null {
             browserTheme,
           });
         } else {
-          patchConsoleForInitialRenderInExtension(renderer, {
-            hideConsoleLogsInStrictMode,
-            browserTheme,
-          });
+          if (consoleManagedByDevToolsDuringStrictMode) {
+            patchConsoleForInitialRenderInExtension(renderer, {
+              hideConsoleLogsInStrictMode,
+              browserTheme,
+            });
+          }
         }
       } catch (error) {}
     }

From 9fc04eaf3fb701cdc14f57d5aed48f3126af6c94 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 1 Sep 2021 14:10:07 -0400
Subject: [PATCH 0808/1603] DevTools: Improve named hooks network caching
 (#22198)

While testing the recently-launched named hooks feature, I noticed that one of the two big performance bottlenecks is fetching the source file. This was unexpected since the source file has already been loaded by the page. (After all, DevTools is inspecting a component defined in that same file.)

To address this, I made the following changes:
- [x] Keep CPU bound work (parsing source map and AST) in a worker so it doesn't block the main thread but move I/O bound code (fetching files) to the main thread.
- [x] Inject a function into the page (as part of the content script) to fetch cached files for the extension. Communicate with this function using `eval()` (to send it messages) and `chrome.runtime.sendMessage()` to return its responses to the extension).

With the above changes in place, the extension gets cached responses from a lot of sites- but not Facebook. This seems to be due to the following:
* Facebook's response headers include [`vary: 'Origin'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary).
* The `fetch` made from the content script does not include an `Origin` request header.

To reduce the impact of cases where we can't re-use the Network cache, this PR also makes additional changes:
- [x] Use `devtools.network.onRequestFinished` to (pre)cache resources as the page loads them. This allows us to avoid requesting a resource that's already been loaded in most cases.
- [x] In case DevTools was opened _after_ some requests were made, we also now pre-fetch (and cache in memory) source files when a component is selected (if it has hooks). If the component's hooks are later evaluated, the source map will be faster to access. (Note that in many cases, this prefetch is very fast since it is returned from the disk cache.)

With the above changes, we've reduced the time spent in `loadSourceFiles` to nearly nothing.
---
 .../src/__tests__/parseHookNames-test.js      |  70 +-
 .../src/background.js                         |  17 +-
 .../src/injectGlobalHook.js                   |  79 +-
 .../react-devtools-extensions/src/main.js     |  85 +-
 .../src/parseHookNames/index.js               |  58 +-
 .../parseHookNames/loadSourceAndMetadata.js   | 570 +++++++++++++
 .../src/parseHookNames/parseHookNames.js      | 750 ------------------
 .../parseHookNames/parseHookNames.worker.js   |  11 -
 .../parseHookNames/parseSourceAndMetadata.js  | 458 +++++++++++
 .../parseSourceAndMetadata.worker.js          |  13 +
 .../src/PerformanceMarks.js                   |  15 +-
 .../views/Components/HookNamesContext.js      |   6 +
 .../Components/InspectedElementContext.js     |  19 +
 .../src/devtools/views/DevTools.js            |  18 +-
 .../src/hookNamesCache.js                     |  11 +-
 15 files changed, 1364 insertions(+), 816 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/parseHookNames/loadSourceAndMetadata.js
 delete mode 100644 packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
 delete mode 100644 packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
 create mode 100644 packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js
 create mode 100644 packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.worker.js

diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
index dd500bbfb2ea..842cb78c0572 100644
--- a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
@@ -25,6 +25,23 @@ function requireText(path, encoding) {
   }
 }
 
+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;
@@ -37,12 +54,32 @@ describe('parseHookNames', () => {
       console.trace('source-map-support');
     });
 
-    fetchMock = require('jest-fetch-mock');
-    fetchMock.enableMocks();
+    fetchMock = initFetchMock();
 
     inspectHooks = require('react-debug-tools/src/ReactDebugHooks')
       .inspectHooks;
-    parseHookNames = require('../parseHookNames/parseHookNames').parseHookNames;
+
+    // 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.
@@ -55,18 +92,6 @@ describe('parseHookNames', () => {
     Error.prepareStackTrace = (error, trace) => {
       return error.stack;
     };
-
-    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');
-    });
   });
 
   afterEach(() => {
@@ -880,18 +905,20 @@ describe('parseHookNames', () => {
 describe('parseHookNames worker', () => {
   let inspectHooks;
   let parseHookNames;
-  let workerizedParseHookNamesMock;
+  let workerizedParseSourceAndMetadataMock;
 
   beforeEach(() => {
     window.Worker = undefined;
 
-    workerizedParseHookNamesMock = jest.fn();
+    workerizedParseSourceAndMetadataMock = jest.fn();
 
-    jest.mock('../parseHookNames/parseHookNames.worker.js', () => {
+    initFetchMock();
+
+    jest.mock('../parseHookNames/parseSourceAndMetadata.worker.js', () => {
       return {
         __esModule: true,
         default: () => ({
-          parseHookNames: workerizedParseHookNamesMock,
+          parseSourceAndMetadata: workerizedParseSourceAndMetadataMock,
         }),
       };
     });
@@ -912,11 +939,12 @@ describe('parseHookNames worker', () => {
       .Component;
 
     window.Worker = true;
-    // resets module so mocked worker instance can be updated
+
+    // Reset module so mocked worker instance can be updated.
     jest.resetModules();
     parseHookNames = require('../parseHookNames').parseHookNames;
 
     await getHookNamesForComponent(Component);
-    expect(workerizedParseHookNamesMock).toHaveBeenCalledTimes(1);
+    expect(workerizedParseSourceAndMetadataMock).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index cfe5e3c7a973..9e09513b78fb 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -117,14 +117,27 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 });
 
 chrome.runtime.onMessage.addListener((request, sender) => {
-  if (sender.tab) {
+  const tab = sender.tab;
+  if (tab) {
+    const id = tab.id;
     // This is sent from the hook content script.
     // It tells us a renderer has attached.
     if (request.hasDetectedReact) {
       // We use browserAction instead of pageAction because this lets us
       // display a custom default popup when React is *not* detected.
       // It is specified in the manifest.
-      setIconAndPopup(request.reactBuildType, sender.tab.id);
+      setIconAndPopup(request.reactBuildType, id);
+    } else {
+      switch (request.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 extension.
+          const devtools = ports[id]?.devtools;
+          if (devtools) {
+            devtools.postMessage(request);
+          }
+          break;
+      }
     }
   }
 });
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index e34197af3549..701d4927487d 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -23,21 +23,66 @@ let lastDetectionResult;
 // (it will be injected directly into the page).
 // So instead, the hook will use postMessage() to pass message to us here.
 // And when this happens, we'll send a message to the "background page".
-window.addEventListener('message', function(evt) {
-  if (evt.source !== window || !evt.data) {
+window.addEventListener('message', function onMessage({data, source}) {
+  if (source !== window || !data) {
     return;
   }
-  if (evt.data.source === 'react-devtools-detector') {
-    lastDetectionResult = {
-      hasDetectedReact: true,
-      reactBuildType: evt.data.reactBuildType,
-    };
-    chrome.runtime.sendMessage(lastDetectionResult);
-  } else if (evt.data.source === 'react-devtools-inject-backend') {
-    const script = document.createElement('script');
-    script.src = chrome.runtime.getURL('build/react_devtools_backend.js');
-    document.documentElement.appendChild(script);
-    script.parentNode.removeChild(script);
+
+  switch (data.source) {
+    case 'react-devtools-detector':
+      lastDetectionResult = {
+        hasDetectedReact: true,
+        reactBuildType: data.reactBuildType,
+      };
+      chrome.runtime.sendMessage(lastDetectionResult);
+      break;
+    case 'react-devtools-extension':
+      if (data.payload?.type === 'fetch-file-with-cache') {
+        const url = data.payload.url;
+
+        const reject = value => {
+          chrome.runtime.sendMessage({
+            source: 'react-devtools-content-script',
+            payload: {
+              type: 'fetch-file-with-cache-error',
+              url,
+              value,
+            },
+          });
+        };
+
+        const resolve = value => {
+          chrome.runtime.sendMessage({
+            source: 'react-devtools-content-script',
+            payload: {
+              type: 'fetch-file-with-cache-complete',
+              url,
+              value,
+            },
+          });
+        };
+
+        fetch(url, {cache: 'force-cache'}).then(
+          response => {
+            if (response.ok) {
+              response
+                .text()
+                .then(text => resolve(text))
+                .catch(error => reject(null));
+            } else {
+              reject(null);
+            }
+          },
+          error => reject(null),
+        );
+      }
+      break;
+    case 'react-devtools-inject-backend':
+      const script = document.createElement('script');
+      script.src = chrome.runtime.getURL('build/react_devtools_backend.js');
+      document.documentElement.appendChild(script);
+      script.parentNode.removeChild(script);
+      break;
   }
 });
 
@@ -45,18 +90,18 @@ window.addEventListener('message', function(evt) {
 // while navigating the history to a document that has not been destroyed yet,
 // replay the last detection result if the content script is active and the
 // document has been hidden and shown again.
-window.addEventListener('pageshow', function(evt) {
-  if (!lastDetectionResult || evt.target !== window.document) {
+window.addEventListener('pageshow', function({target}) {
+  if (!lastDetectionResult || target !== window.document) {
     return;
   }
   chrome.runtime.sendMessage(lastDetectionResult);
 });
 
 const detectReact = `
-window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function(evt) {
+window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType}) {
   window.postMessage({
     source: 'react-devtools-detector',
-    reactBuildType: evt.reactBuildType,
+    reactBuildType,
   }, '*');
 });
 `;
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 06c227d7e4cb..43ef1a1b2686 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -25,6 +25,27 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
 
 const isChrome = getBrowserName() === 'Chrome';
 
+const cachedNetworkEvents = new Map();
+
+// Cache JavaScript resources as the page loads them.
+// This helps avoid unnecessary duplicate requests when hook names are parsed.
+// Responses with a Vary: 'Origin' might not match future requests.
+// This lets us avoid a possible (expensive) cache miss.
+// For more info see: github.com/facebook/react/pull/22198
+chrome.devtools.network.onRequestFinished.addListener(
+  function onRequestFinished(event) {
+    if (event.request.method === 'GET') {
+      switch (event.response.content.mimeType) {
+        case 'application/javascript':
+        case 'application/x-javascript':
+        case 'text/javascript':
+          cachedNetworkEvents.set(event.request.url, event);
+          break;
+      }
+    }
+  },
+);
+
 let panelCreated = false;
 
 // The renderer interface can't read saved component filters directly,
@@ -212,20 +233,76 @@ function createPanelIfReactLoaded() {
           }
         };
 
+        // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
+        // never reaches the chrome.runtime.onMessage event listener.
+        let fetchFileWithCaching = null;
+        if (isChrome) {
+          // Fetching files from the extension won't make use of the network cache
+          // for resources that have already been loaded by the page.
+          // This helper function allows the extension to request files to be fetched
+          // by the content script (running in the page) to increase the likelihood of a cache hit.
+          fetchFileWithCaching = url => {
+            const event = cachedNetworkEvents.get(url);
+            if (event != null) {
+              // If this resource has already been cached locally,
+              // skip the network queue (which might not be a cache hit anyway)
+              // and just use the cached response.
+              return new Promise(resolve => {
+                event.getContent(content => resolve(content));
+              });
+            }
+
+            // If DevTools was opened after the page started loading,
+            // we may have missed some requests.
+            // So fall back to a fetch() and hope we get a cached response.
+
+            return new Promise((resolve, reject) => {
+              function onPortMessage({payload, source}) {
+                if (source === 'react-devtools-content-script') {
+                  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);
+
+              chrome.devtools.inspectedWindow.eval(`
+                window.postMessage({
+                  source: 'react-devtools-extension',
+                  payload: {
+                    type: 'fetch-file-with-cache',
+                    url: "${url}",
+                  },
+                });
+              `);
+            });
+          };
+        }
+
         root = createRoot(document.createElement('div'));
 
         render = (overrideTab = mostRecentOverrideTab) => {
           mostRecentOverrideTab = overrideTab;
           import('./parseHookNames').then(
-            ({parseHookNames, purgeCachedMetadata}) => {
+            ({parseHookNames, prefetchSourceFiles, purgeCachedMetadata}) => {
               root.render(
                 createElement(DevTools, {
                   bridge,
                   browserTheme: getBrowserTheme(),
                   componentsPortalContainer,
                   enabledInspectedElementContextMenu: true,
+                  fetchFileWithCaching,
                   loadHookNames: parseHookNames,
                   overrideTab,
+                  prefetchSourceFiles,
                   profilerPortalContainer,
                   purgeCachedHookNamesMetadata: purgeCachedMetadata,
                   showTabBar: false,
@@ -366,6 +443,9 @@ function createPanelIfReactLoaded() {
 
       // Re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+        // Clear cached requests when a new page is opened.
+        cachedNetworkEvents.clear();
+
         // Re-initialize saved filters on navigation,
         // since global values stored on window get reset in this case.
         syncSavedPreferences();
@@ -382,6 +462,9 @@ function createPanelIfReactLoaded() {
 
 // Load (or reload) the DevTools extension when the user navigates to a new page.
 function checkPageForReact() {
+  // Clear cached requests when a new page is opened.
+  cachedNetworkEvents.clear();
+
   syncSavedPreferences();
   createPanelIfReactLoaded();
 }
diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-extensions/src/parseHookNames/index.js
index 643655ae757e..eae8440399c7 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/index.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/index.js
@@ -7,17 +7,59 @@
  * @flow
  */
 
-// This file uses workerize to load ./parseHookNames.worker as a webworker and instanciates it,
-// exposing flow typed functions that can be used on other files.
+import type {HookSourceAndMetadata} from './loadSourceAndMetadata';
+import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
+import type {HookNames} from 'react-devtools-shared/src/types';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-import WorkerizedParseHookNames from './parseHookNames.worker';
-import typeof * as ParseHookNamesModule from './parseHookNames';
+import {withAsyncPerformanceMark} from 'react-devtools-shared/src/PerformanceMarks';
+import WorkerizedParseSourceAndMetadata from './parseSourceAndMetadata.worker';
+import typeof * as ParseSourceAndMetadataModule from './parseSourceAndMetadata';
+import {
+  flattenHooksList,
+  loadSourceAndMetadata,
+  prefetchSourceFiles,
+} from './loadSourceAndMetadata';
 
-const workerizedParseHookNames: ParseHookNamesModule = WorkerizedParseHookNames();
+const workerizedParseHookNames: ParseSourceAndMetadataModule = WorkerizedParseSourceAndMetadata();
 
-type ParseHookNames = $PropertyType<ParseHookNamesModule, 'parseHookNames'>;
+export {prefetchSourceFiles};
 
-export const parseHookNames: ParseHookNames = hooksTree =>
-  workerizedParseHookNames.parseHookNames(hooksTree);
+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 = new Map();
+
+export async function parseHookNames(
+  hooksTree: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+): Promise<HookNames | null> {
+  return withAsyncPerformanceMark('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-extensions/src/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-extensions/src/parseHookNames/loadSourceAndMetadata.js
new file mode 100644
index 000000000000..dad3b864636b
--- /dev/null
+++ b/packages/react-devtools-extensions/src/parseHookNames/loadSourceAndMetadata.js
@@ -0,0 +1,570 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 LRU from 'lru-cache';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
+import {sourceMapIncludesSource} from '../SourceMapUtils';
+import {
+  withAsyncPerformanceMark,
+  withCallbackPerformanceMark,
+  withSyncPerformanceMark,
+} from 'react-devtools-shared/src/PerformanceMarks';
+
+import type {LRUCache} from 'react-devtools-shared/src/types';
+import type {
+  HooksNode,
+  HookSource,
+  HooksTree,
+} from 'react-debug-tools/src/ReactDebugHooks';
+import type {MixedSourceMap} from 'react-devtools-extensions/src/SourceMapTypes';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
+
+// 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'};
+
+const MAX_SOURCE_LENGTH = 100_000_000;
+
+// Fetch requests originated from an extension might not have origin headers
+// which may prevent subsequent requests from using cached responses
+// if the server returns a Vary: 'Origin' header
+// so this cache will temporarily store pre-fetches sources in memory.
+const prefetchedSources: LRUCache<string, string> = new LRU({
+  max: 15,
+});
+
+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 withAsyncPerformanceMark('loadSourceAndMetadata()', async () => {
+    const locationKeyToHookSourceAndMetadata = withSyncPerformanceMark(
+      'initializeHookSourceAndMetadata',
+      () => initializeHookSourceAndMetadata(hooksList),
+    );
+
+    await withAsyncPerformanceMark('loadSourceFiles()', () =>
+      loadSourceFiles(locationKeyToHookSourceAndMetadata, fetchFileWithCaching),
+    );
+
+    await withAsyncPerformanceMark('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 {
+  if (typeof atob === 'function') {
+    return atob(encoded);
+  } else if (
+    typeof Buffer !== 'undefined' &&
+    Buffer !== null &&
+    typeof Buffer.from === 'function'
+  ) {
+    return Buffer.from(encoded, 'base64');
+  } else {
+    throw Error('Cannot decode base64 string');
+  }
+}
+
+function extractAndLoadSourceMapJSON(
+  locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
+): Promise<*> {
+  // Deduplicate fetches, since there can be multiple location keys per source map.
+  const dedupedFetchPromises = new Map();
+
+  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 = withSyncPerformanceMark(
+      '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) {
+          // 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 = withSyncPerformanceMark('decodeBase64String()', () =>
+            decodeBase64String(trimmed),
+          );
+
+          const sourceMapJSON = withSyncPerformanceMark(
+            '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;
+          }
+        } else {
+          externalSourceMapURLs.push(sourceMappingURL);
+        }
+
+        // If the first source map we found wasn't a match, check for more.
+        sourceMappingURLMatch = withSyncPerformanceMark(
+          '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 = withSyncPerformanceMark(
+                  '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 withCallbackPerformanceMark(`${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 = [];
+  withSyncPerformanceMark('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<*> {
+  // Deduplicate fetches, since there can be multiple location keys per file.
+  const dedupedFetchPromises = new Map();
+
+  const setterPromises = [];
+  locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
+    const {runtimeSourceURL} = hookSourceAndMetadata;
+
+    const prefetchedSourceCode = prefetchedSources.get(runtimeSourceURL);
+    if (prefetchedSourceCode != null) {
+      hookSourceAndMetadata.runtimeSourceCode = prefetchedSourceCode;
+    } else {
+      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 withAsyncPerformanceMark(
+            `fetchFileWithCaching("${url}")`,
+            () => {
+              return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
+            },
+          );
+        };
+      }
+
+      const fetchPromise =
+        dedupedFetchPromises.get(runtimeSourceURL) ||
+        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;
+        });
+      dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);
+
+      setterPromises.push(
+        fetchPromise.then(runtimeSourceCode => {
+          hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
+        }),
+      );
+    }
+  });
+
+  return Promise.all(setterPromises);
+}
+
+export function prefetchSourceFiles(
+  hooksTree: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+): void {
+  // Deduplicate fetches, since there can be multiple location keys per source map.
+  const dedupedFetchPromises = new Set();
+
+  let fetchFileFunction = null;
+  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 withAsyncPerformanceMark(
+        `[pre] fetchFileWithCaching("${url}")`,
+        () => {
+          return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
+        },
+      );
+    };
+  } else {
+    fetchFileFunction = url => fetchFile(url, '[pre] fetchFile');
+  }
+
+  const hooksQueue = Array.from(hooksTree);
+
+  for (let i = 0; i < hooksQueue.length; i++) {
+    const hook = hooksQueue.pop();
+    if (isUnnamedBuiltInHook(hook)) {
+      continue;
+    }
+
+    const hookSource = hook.hookSource;
+    if (hookSource == null) {
+      continue;
+    }
+
+    const runtimeSourceURL = ((hookSource.fileName: any): string);
+
+    if (prefetchedSources.has(runtimeSourceURL)) {
+      // If we've already fetched this source, skip it.
+      continue;
+    }
+
+    if (!dedupedFetchPromises.has(runtimeSourceURL)) {
+      dedupedFetchPromises.add(runtimeSourceURL);
+
+      fetchFileFunction(runtimeSourceURL).then(text => {
+        prefetchedSources.set(runtimeSourceURL, text);
+      });
+    }
+
+    if (hook.subHooks.length > 0) {
+      hooksQueue.push(...hook.subHooks);
+    }
+  }
+}
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
deleted file mode 100644
index 9afd3dea034a..000000000000
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.js
+++ /dev/null
@@ -1,750 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import {parse} from '@babel/parser';
-import LRU from 'lru-cache';
-import {SourceMapConsumer} from 'source-map-js';
-import {getHookName} from '../astUtils';
-import {areSourceMapsAppliedToErrors} from '../ErrorTester';
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
-import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
-import {sourceMapIncludesSource} from '../SourceMapUtils';
-import {SourceMapMetadataConsumer} from '../SourceMapMetadataConsumer';
-import {
-  withAsyncPerformanceMark,
-  withCallbackPerformanceMark,
-  withSyncPerformanceMark,
-} from 'react-devtools-shared/src/PerformanceMarks';
-
-import type {
-  HooksNode,
-  HookSource,
-  HooksTree,
-} from 'react-debug-tools/src/ReactDebugHooks';
-import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
-import type {SourceConsumer} from '../astUtils';
-
-const MAX_SOURCE_LENGTH = 100_000_000;
-
-type AST = mixed;
-
-type HookSourceData = {|
-  // Generated by react-debug-tools.
-  hookSource: HookSource,
-
-  // 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,
-
-  // 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,
-
-  // APIs from source-map for parsing source maps (if detected).
-  sourceConsumer: SourceConsumer | null,
-
-  // External URL of source map.
-  // Sources without source maps (or with inline source maps) won't have this.
-  sourceMapURL: string | null,
-|};
-
-type CachedRuntimeCodeMetadata = {|
-  sourceConsumer: SourceConsumer | null,
-  metadataConsumer: SourceMapMetadataConsumer | null,
-|};
-
-const runtimeURLToMetadataCache: LRUCache<
-  string,
-  CachedRuntimeCodeMetadata,
-> = new LRU({
-  max: 50,
-  dispose: (runtimeSourceURL: string, metadata: CachedRuntimeCodeMetadata) => {
-    if (__DEBUG__) {
-      console.log(
-        `runtimeURLToMetadataCache.dispose() Evicting cached metadata for "${runtimeSourceURL}"`,
-      );
-    }
-
-    const sourceConsumer = metadata.sourceConsumer;
-    if (sourceConsumer !== null) {
-      sourceConsumer.destroy();
-    }
-  },
-});
-
-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 parseHookNames(
-  hooksTree: HooksTree,
-): Promise<HookNames | null> {
-  const hooksList: Array<HooksNode> = [];
-  withSyncPerformanceMark('flattenHooksList()', () => {
-    flattenHooksList(hooksTree, hooksList);
-  });
-
-  return withAsyncPerformanceMark('parseHookNames()', () =>
-    parseHookNamesImpl(hooksList),
-  );
-}
-
-async function parseHookNamesImpl(
-  hooksList: HooksNode[],
-): Promise<HookNames | null> {
-  if (__DEBUG__) {
-    console.log('parseHookNames() hooksList:', hooksList);
-  }
-
-  // Create map of unique source locations (file names plus line and column numbers) to metadata about hooks.
-  const locationKeyToHookSourceData: Map<string, HookSourceData> = 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 (!locationKeyToHookSourceData.has(locationKey)) {
-      // Can't be null because getHookSourceLocationKey() would have thrown
-      const runtimeSourceURL = ((hookSource.fileName: any): string);
-
-      const hookSourceData: HookSourceData = {
-        hookSource,
-        metadataConsumer: null,
-        originalSourceAST: null,
-        originalSourceCode: null,
-        originalSourceURL: null,
-        runtimeSourceCode: null,
-        runtimeSourceURL,
-        sourceConsumer: null,
-        sourceMapURL: null,
-      };
-
-      // 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(
-        hookSourceData.runtimeSourceURL,
-      );
-      if (runtimeMetadata != null) {
-        if (__DEBUG__) {
-          console.groupCollapsed(
-            `parseHookNames() Found cached runtime metadata for file "${hookSourceData.runtimeSourceURL}"`,
-          );
-          console.log(runtimeMetadata);
-          console.groupEnd();
-        }
-        hookSourceData.sourceConsumer = runtimeMetadata.sourceConsumer;
-        hookSourceData.metadataConsumer = runtimeMetadata.metadataConsumer;
-      }
-
-      locationKeyToHookSourceData.set(locationKey, hookSourceData);
-    }
-  }
-
-  await withAsyncPerformanceMark('loadSourceFiles()', () =>
-    loadSourceFiles(locationKeyToHookSourceData),
-  );
-
-  await withAsyncPerformanceMark('extractAndLoadSourceMaps()', () =>
-    extractAndLoadSourceMaps(locationKeyToHookSourceData),
-  );
-
-  withSyncPerformanceMark('parseSourceAST()', () =>
-    parseSourceAST(locationKeyToHookSourceData),
-  );
-
-  withSyncPerformanceMark('updateLruCache()', () =>
-    updateLruCache(locationKeyToHookSourceData),
-  );
-
-  return withSyncPerformanceMark('findHookNames()', () =>
-    findHookNames(hooksList, locationKeyToHookSourceData),
-  );
-}
-
-function decodeBase64String(encoded: string): Object {
-  if (typeof atob === 'function') {
-    return atob(encoded);
-  } else if (
-    typeof Buffer !== 'undefined' &&
-    Buffer !== null &&
-    typeof Buffer.from === 'function'
-  ) {
-    return Buffer.from(encoded, 'base64');
-  } else {
-    throw Error('Cannot decode base64 string');
-  }
-}
-
-function extractAndLoadSourceMaps(
-  locationKeyToHookSourceData: Map<string, HookSourceData>,
-): Promise<*> {
-  // SourceMapConsumer.initialize() does nothing when running in Node (aka Jest)
-  // because the wasm file is automatically read from the file system
-  // so we can avoid triggering a warning message about this.
-  if (!__TEST__) {
-    if (__DEBUG__) {
-      console.log(
-        'extractAndLoadSourceMaps() Initializing source-map library ...',
-      );
-    }
-  }
-
-  // Deduplicate fetches, since there can be multiple location keys per source map.
-  const fetchPromises = new Map();
-
-  const setPromises = [];
-  locationKeyToHookSourceData.forEach(hookSourceData => {
-    if (
-      hookSourceData.sourceConsumer != null &&
-      hookSourceData.metadataConsumer != null
-    ) {
-      // Use cached source map and metadata consumers.
-      return;
-    }
-
-    const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
-    const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
-
-    let sourceMappingURLMatch = withSyncPerformanceMark(
-      'sourceMapRegex.exec(runtimeSourceCode)',
-      () => sourceMapRegex.exec(runtimeSourceCode),
-    );
-
-    if (sourceMappingURLMatch == null) {
-      // Maybe file has not been transformed; we'll try to parse it as-is in parseSourceAST().
-
-      if (__DEBUG__) {
-        console.log('extractAndLoadSourceMaps() No source map found');
-      }
-    } else {
-      const externalSourceMapURLs = [];
-      while (sourceMappingURLMatch != null) {
-        const {runtimeSourceURL} = hookSourceData;
-        const sourceMappingURL = sourceMappingURLMatch[1];
-        const hasInlineSourceMap = sourceMappingURL.indexOf('base64,') >= 0;
-        if (hasInlineSourceMap) {
-          // 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 = withSyncPerformanceMark('decodeBase64String()', () =>
-            decodeBase64String(trimmed),
-          );
-
-          const parsed = withSyncPerformanceMark('JSON.parse(decoded)', () =>
-            JSON.parse(decoded),
-          );
-
-          if (__DEBUG__) {
-            console.groupCollapsed(
-              'extractAndLoadSourceMaps() Inline source map',
-            );
-            console.log(parsed);
-            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(parsed, runtimeSourceURL)) {
-            hookSourceData.metadataConsumer = withSyncPerformanceMark(
-              'new SourceMapMetadataConsumer(parsed)',
-              () => new SourceMapMetadataConsumer(parsed),
-            );
-            hookSourceData.sourceConsumer = withSyncPerformanceMark(
-              'new SourceMapConsumer(parsed)',
-              () => new SourceMapConsumer(parsed),
-            );
-            break;
-          }
-        } else {
-          externalSourceMapURLs.push(sourceMappingURL);
-        }
-
-        sourceMappingURLMatch = withSyncPerformanceMark(
-          'sourceMapRegex.exec(runtimeSourceCode)',
-          () => sourceMapRegex.exec(runtimeSourceCode),
-        );
-      }
-
-      const foundInlineSourceMap =
-        hookSourceData.sourceConsumer != null &&
-        hookSourceData.metadataConsumer != null;
-      if (!foundInlineSourceMap) {
-        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} = hookSourceData;
-          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}`;
-            }
-          }
-
-          hookSourceData.sourceMapURL = url;
-
-          const fetchPromise =
-            fetchPromises.get(url) ||
-            fetchFile(url).then(
-              sourceMapContents => {
-                const parsed = withSyncPerformanceMark(
-                  'JSON.parse(sourceMapContents)',
-                  () => JSON.parse(sourceMapContents),
-                );
-
-                const sourceConsumer = withSyncPerformanceMark(
-                  'new SourceMapConsumer(parsed)',
-                  () => new SourceMapConsumer(parsed),
-                );
-
-                const metadataConsumer = withSyncPerformanceMark(
-                  'new SourceMapMetadataConsumer(parsed)',
-                  () => new SourceMapMetadataConsumer(parsed),
-                );
-
-                return {sourceConsumer, metadataConsumer};
-              },
-              // 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 (!fetchPromises.has(url)) {
-              console.log(
-                `extractAndLoadSourceMaps() External source map "${url}"`,
-              );
-            }
-          }
-
-          fetchPromises.set(url, fetchPromise);
-          setPromises.push(
-            fetchPromise.then(result => {
-              hookSourceData.metadataConsumer =
-                result?.metadataConsumer ?? null;
-              hookSourceData.sourceConsumer = result?.sourceConsumer ?? null;
-            }),
-          );
-        });
-      }
-    }
-  });
-  return Promise.all(setPromises);
-}
-
-function fetchFile(url: string): Promise<string> {
-  return withCallbackPerformanceMark('fetchFile("' + url + '")', done => {
-    return new Promise((resolve, reject) => {
-      fetch(url).then(
-        response => {
-          if (response.ok) {
-            response
-              .text()
-              .then(text => {
-                done();
-                resolve(text);
-              })
-              .catch(error => {
-                if (__DEBUG__) {
-                  console.log(
-                    `fetchFile() Could not read text for url "${url}"`,
-                  );
-                }
-                done();
-                reject(null);
-              });
-          } else {
-            if (__DEBUG__) {
-              console.log(`fetchFile() Got bad response for url "${url}"`);
-            }
-            done();
-            reject(null);
-          }
-        },
-        error => {
-          if (__DEBUG__) {
-            console.log(`fetchFile() Could not fetch file: ${error.message}`);
-          }
-          done();
-          reject(null);
-        },
-      );
-    });
-  });
-}
-
-function findHookNames(
-  hooksList: Array<HooksNode>,
-  locationKeyToHookSourceData: Map<string, HookSourceData>,
-): 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 hookSourceData = locationKeyToHookSourceData.get(locationKey);
-    if (!hookSourceData) {
-      return null; // Should not be reachable.
-    }
-
-    const {lineNumber, columnNumber} = hookSource;
-    if (!lineNumber || !columnNumber) {
-      return null; // Should not be reachable.
-    }
-
-    const {originalSourceURL, sourceConsumer} = hookSourceData;
-
-    let originalSourceColumnNumber;
-    let originalSourceLineNumber;
-    if (areSourceMapsAppliedToErrors() || !sourceConsumer) {
-      // 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;
-    } else {
-      const position = withSyncPerformanceMark(
-        'sourceConsumer.originalPositionFor()',
-        () =>
-          sourceConsumer.originalPositionFor({
-            line: lineNumber,
-
-            // Column numbers are represented differently between tools/engines.
-            // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
-            // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
-            column: columnNumber - 1,
-          }),
-      );
-
-      originalSourceColumnNumber = position.column;
-      originalSourceLineNumber = position.line;
-    }
-
-    if (__DEBUG__) {
-      console.log(
-        `findHookNames() mapped line ${lineNumber}->${originalSourceLineNumber} and column ${columnNumber}->${originalSourceColumnNumber}`,
-      );
-    }
-
-    if (
-      originalSourceLineNumber == null ||
-      originalSourceColumnNumber == null ||
-      originalSourceURL == null
-    ) {
-      return null;
-    }
-
-    let name;
-    const {metadataConsumer} = hookSourceData;
-    if (metadataConsumer != null) {
-      name = withSyncPerformanceMark('metadataConsumer.hookNameFor()', () =>
-        metadataConsumer.hookNameFor({
-          line: originalSourceLineNumber,
-          column: originalSourceColumnNumber,
-          source: originalSourceURL,
-        }),
-      );
-    }
-
-    if (name == null) {
-      name = withSyncPerformanceMark('getHookName()', () =>
-        getHookName(
-          hook,
-          hookSourceData.originalSourceAST,
-          ((hookSourceData.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 loadSourceFiles(
-  locationKeyToHookSourceData: Map<string, HookSourceData>,
-): Promise<*> {
-  // Deduplicate fetches, since there can be multiple location keys per file.
-  const fetchPromises = new Map();
-
-  const setPromises = [];
-  locationKeyToHookSourceData.forEach(hookSourceData => {
-    const {runtimeSourceURL} = hookSourceData;
-    const fetchPromise =
-      fetchPromises.get(runtimeSourceURL) ||
-      fetchFile(runtimeSourceURL).then(runtimeSourceCode => {
-        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;
-      });
-    fetchPromises.set(runtimeSourceURL, fetchPromise);
-    setPromises.push(
-      fetchPromise.then(runtimeSourceCode => {
-        hookSourceData.runtimeSourceCode = runtimeSourceCode;
-      }),
-    );
-  });
-  return Promise.all(setPromises);
-}
-
-function parseSourceAST(
-  locationKeyToHookSourceData: Map<string, HookSourceData>,
-): void {
-  locationKeyToHookSourceData.forEach(hookSourceData => {
-    if (hookSourceData.originalSourceAST !== null) {
-      // Use cached metadata.
-      return;
-    }
-
-    const {metadataConsumer, sourceConsumer} = hookSourceData;
-    const runtimeSourceCode = ((hookSourceData.runtimeSourceCode: any): string);
-    let hasHookMap = false;
-    let originalSourceURL;
-    let originalSourceCode;
-    if (sourceConsumer !== null) {
-      // Parse and extract the AST from the source map.
-      const {lineNumber, columnNumber} = hookSourceData.hookSource;
-      if (lineNumber == null || columnNumber == null) {
-        throw Error('Hook source code location not found.');
-      }
-      // Now that the source map has been loaded,
-      // extract the original source for later.
-      const {source} = withSyncPerformanceMark(
-        'sourceConsumer.originalPositionFor()',
-        () =>
-          sourceConsumer.originalPositionFor({
-            line: lineNumber,
-
-            // Column numbers are represented differently between tools/engines.
-            // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
-            // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
-            column: columnNumber - 1,
-          }),
-      );
-
-      if (source == null) {
-        // TODO (named hooks) maybe fall back to the runtime source instead of throwing?
-        throw new Error(
-          'Could not map hook runtime location to original source location',
-        );
-      }
-
-      // TODO (named hooks) maybe canonicalize this URL somehow?
-      // It can be relative if the source map specifies it that way,
-      // but we use it as a cache key across different source maps and there can be collisions.
-      originalSourceURL = (source: string);
-      originalSourceCode = withSyncPerformanceMark(
-        'sourceConsumer.sourceContentFor()',
-        () => (sourceConsumer.sourceContentFor(source, true): string),
-      );
-
-      if (__DEBUG__) {
-        console.groupCollapsed(
-          'parseSourceAST() Extracted source code from source map',
-        );
-        console.log(originalSourceCode);
-        console.groupEnd();
-      }
-
-      if (
-        metadataConsumer != null &&
-        metadataConsumer.hasHookMap(originalSourceURL)
-      ) {
-        hasHookMap = true;
-      }
-    } else {
-      // 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 = hookSourceData.runtimeSourceURL;
-    }
-
-    hookSourceData.originalSourceCode = originalSourceCode;
-    hookSourceData.originalSourceURL = originalSourceURL;
-
-    if (hasHookMap) {
-      // 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;
-    }
-
-    // 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();
-      }
-      hookSourceData.originalSourceAST = sourceMetadata.originalSourceAST;
-      hookSourceData.originalSourceCode = sourceMetadata.originalSourceCode;
-    } else {
-      // 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) Parsing should ideally be done off of the main thread.
-      const originalSourceAST = withSyncPerformanceMark(
-        '[@babel/parser] parse(originalSourceCode)',
-        () =>
-          parse(originalSourceCode, {
-            sourceType: 'unambiguous',
-            plugins: ['jsx', plugin],
-          }),
-      );
-      hookSourceData.originalSourceAST = originalSourceAST;
-      if (__DEBUG__) {
-        console.log(
-          `parseSourceAST() Caching source metadata for "${originalSourceURL}"`,
-        );
-      }
-      originalURLToMetadataCache.set(originalSourceURL, {
-        originalSourceAST,
-        originalSourceCode,
-      });
-    }
-  });
-}
-
-function flattenHooksList(
-  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('flattenHooksList() Skipping unnamed hook', hook);
-      }
-      continue;
-    }
-
-    hooksList.push(hook);
-    if (hook.subHooks.length > 0) {
-      flattenHooksList(hook.subHooks, hooksList);
-    }
-  }
-}
-
-// 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 updateLruCache(
-  locationKeyToHookSourceData: Map<string, HookSourceData>,
-): void {
-  locationKeyToHookSourceData.forEach(
-    ({metadataConsumer, sourceConsumer, runtimeSourceURL}) => {
-      // Only set once to avoid triggering eviction/cleanup code.
-      if (!runtimeURLToMetadataCache.has(runtimeSourceURL)) {
-        if (__DEBUG__) {
-          console.log(
-            `updateLruCache() Caching runtime metadata for "${runtimeSourceURL}"`,
-          );
-        }
-
-        runtimeURLToMetadataCache.set(runtimeSourceURL, {
-          metadataConsumer,
-          sourceConsumer,
-        });
-      }
-    },
-  );
-}
-
-export function purgeCachedMetadata(): void {
-  originalURLToMetadataCache.reset();
-  runtimeURLToMetadataCache.reset();
-}
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js b/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
deleted file mode 100644
index c89f11a55db2..000000000000
--- a/packages/react-devtools-extensions/src/parseHookNames/parseHookNames.worker.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import * as parseHookNamesModule from './parseHookNames';
-
-export const parseHookNames = parseHookNamesModule.parseHookNames;
-export const purgeCachedMetadata = parseHookNamesModule.purgeCachedMetadata;
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js
new file mode 100644
index 000000000000..143498c7e54c
--- /dev/null
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js
@@ -0,0 +1,458 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 {SourceMapConsumer} from 'source-map-js';
+import {getHookName} from '../astUtils';
+import {areSourceMapsAppliedToErrors} from '../ErrorTester';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
+import {SourceMapMetadataConsumer} from '../SourceMapMetadataConsumer';
+import {
+  withAsyncPerformanceMark,
+  withSyncPerformanceMark,
+} from 'react-devtools-shared/src/PerformanceMarks';
+
+import type {
+  HooksList,
+  LocationKeyToHookSourceAndMetadata,
+} from './loadSourceAndMetadata';
+import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
+import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
+import type {SourceConsumer} from '../astUtils';
+
+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,
+
+  // APIs from source-map for parsing source maps (if detected).
+  sourceConsumer: SourceConsumer | null,
+|};
+
+type LocationKeyToHookParsedMetadata = Map<string, HookParsedMetadata>;
+
+type CachedRuntimeCodeMetadata = {|
+  sourceConsumer: SourceConsumer | null,
+  metadataConsumer: SourceMapMetadataConsumer | null,
+|};
+
+const runtimeURLToMetadataCache: LRUCache<
+  string,
+  CachedRuntimeCodeMetadata,
+> = new LRU({
+  max: 50,
+  dispose: (runtimeSourceURL: string, metadata: CachedRuntimeCodeMetadata) => {
+    if (__DEBUG__) {
+      console.log(
+        `runtimeURLToMetadataCache.dispose() Evicting cached metadata for "${runtimeSourceURL}"`,
+      );
+    }
+
+    const sourceConsumer = metadata.sourceConsumer;
+    if (sourceConsumer !== null) {
+      sourceConsumer.destroy();
+    }
+  },
+});
+
+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 withAsyncPerformanceMark('parseSourceAndMetadata()', async () => {
+    const locationKeyToHookParsedMetadata = withSyncPerformanceMark(
+      'initializeHookParsedMetadata',
+      () => initializeHookParsedMetadata(locationKeyToHookSourceAndMetadata),
+    );
+
+    withSyncPerformanceMark('parseSourceMaps', () =>
+      parseSourceMaps(
+        locationKeyToHookSourceAndMetadata,
+        locationKeyToHookParsedMetadata,
+      ),
+    );
+
+    withSyncPerformanceMark('parseSourceAST()', () =>
+      parseSourceAST(
+        locationKeyToHookSourceAndMetadata,
+        locationKeyToHookParsedMetadata,
+      ),
+    );
+
+    return withSyncPerformanceMark('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, sourceConsumer} = hookParsedMetadata;
+
+    let originalSourceColumnNumber;
+    let originalSourceLineNumber;
+    if (areSourceMapsAppliedToErrors() || !sourceConsumer) {
+      // 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;
+    } else {
+      // TODO (named hooks) Refactor this read, github.com/facebook/react/pull/22181
+      const position = withSyncPerformanceMark(
+        'sourceConsumer.originalPositionFor()',
+        () =>
+          sourceConsumer.originalPositionFor({
+            line: lineNumber,
+
+            // Column numbers are represented differently between tools/engines.
+            // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
+            // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
+            column: columnNumber - 1,
+          }),
+      );
+
+      originalSourceColumnNumber = position.column;
+      originalSourceLineNumber = position.line;
+    }
+
+    if (__DEBUG__) {
+      console.log(
+        `findHookNames() mapped line ${lineNumber}->${originalSourceLineNumber} and column ${columnNumber}->${originalSourceColumnNumber}`,
+      );
+    }
+
+    if (
+      originalSourceLineNumber == null ||
+      originalSourceColumnNumber == null ||
+      originalSourceURL == null
+    ) {
+      return null;
+    }
+
+    let name;
+    const {metadataConsumer} = hookParsedMetadata;
+    if (metadataConsumer != null) {
+      name = withSyncPerformanceMark('metadataConsumer.hookNameFor()', () =>
+        metadataConsumer.hookNameFor({
+          line: originalSourceLineNumber,
+          column: originalSourceColumnNumber,
+          source: originalSourceURL,
+        }),
+      );
+    }
+
+    if (name == null) {
+      name = withSyncPerformanceMark('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,
+        sourceConsumer: null,
+      };
+
+      locationKeyToHookParsedMetadata.set(locationKey, hookParsedMetadata);
+
+      const runtimeSourceURL = hookSourceAndMetadata.runtimeSourceURL;
+
+      // 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.sourceConsumer = runtimeMetadata.sourceConsumer;
+        hookParsedMetadata.metadataConsumer = runtimeMetadata.metadataConsumer;
+      }
+    },
+  );
+
+  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;
+      }
+
+      const {metadataConsumer, sourceConsumer} = hookParsedMetadata;
+      const runtimeSourceCode = ((hookSourceAndMetadata.runtimeSourceCode: any): string);
+      let hasHookMap = false;
+      let originalSourceURL;
+      let originalSourceCode;
+      if (sourceConsumer !== null) {
+        // Parse and extract the AST from the source map.
+        const {lineNumber, columnNumber} = hookSourceAndMetadata.hookSource;
+        if (lineNumber == null || columnNumber == null) {
+          throw Error('Hook source code location not found.');
+        }
+        // Now that the source map has been loaded,
+        // extract the original source for later.
+        // TODO (named hooks) Refactor this read, github.com/facebook/react/pull/22181
+        const {source} = withSyncPerformanceMark(
+          'sourceConsumer.originalPositionFor()',
+          () =>
+            sourceConsumer.originalPositionFor({
+              line: lineNumber,
+
+              // Column numbers are represented differently between tools/engines.
+              // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
+              // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
+              column: columnNumber - 1,
+            }),
+        );
+
+        if (source == null) {
+          // TODO (named hooks) maybe fall back to the runtime source instead of throwing?
+          throw new Error(
+            'Could not map hook runtime location to original source location',
+          );
+        }
+
+        // TODO (named hooks) maybe canonicalize this URL somehow?
+        // It can be relative if the source map specifies it that way,
+        // but we use it as a cache key across different source maps and there can be collisions.
+        originalSourceURL = (source: string);
+        originalSourceCode = withSyncPerformanceMark(
+          'sourceConsumer.sourceContentFor()',
+          () => (sourceConsumer.sourceContentFor(source, true): string),
+        );
+
+        if (__DEBUG__) {
+          console.groupCollapsed(
+            'parseSourceAST() Extracted source code from source map',
+          );
+          console.log(originalSourceCode);
+          console.groupEnd();
+        }
+
+        if (
+          metadataConsumer != null &&
+          metadataConsumer.hasHookMap(originalSourceURL)
+        ) {
+          hasHookMap = true;
+        }
+      } else {
+        // 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;
+      }
+
+      hookParsedMetadata.originalSourceCode = originalSourceCode;
+      hookParsedMetadata.originalSourceURL = originalSourceURL;
+
+      if (hasHookMap) {
+        // 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;
+      }
+
+      // 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 {
+        // 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().
+        const originalSourceAST = withSyncPerformanceMark(
+          '[@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,
+        });
+      }
+    },
+  );
+}
+
+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 sourceMapJSON = hookSourceAndMetadata.sourceMapJSON;
+      if (sourceMapJSON != null) {
+        hookParsedMetadata.metadataConsumer = withSyncPerformanceMark(
+          'new SourceMapMetadataConsumer(sourceMapJSON)',
+          () => new SourceMapMetadataConsumer(sourceMapJSON),
+        );
+        hookParsedMetadata.sourceConsumer = withSyncPerformanceMark(
+          'new SourceMapConsumer(sourceMapJSON)',
+          () => new SourceMapConsumer(sourceMapJSON),
+        );
+
+        const runtimeSourceURL = hookSourceAndMetadata.runtimeSourceURL;
+
+        // Only set once to avoid triggering eviction/cleanup code.
+        if (!runtimeURLToMetadataCache.has(runtimeSourceURL)) {
+          if (__DEBUG__) {
+            console.log(
+              `parseSourceMaps() Caching runtime metadata for "${runtimeSourceURL}"`,
+            );
+          }
+
+          runtimeURLToMetadataCache.set(runtimeSourceURL, {
+            metadataConsumer: hookParsedMetadata.metadataConsumer,
+            sourceConsumer: hookParsedMetadata.sourceConsumer,
+          });
+        }
+      }
+    },
+  );
+}
+
+export function purgeCachedMetadata(): void {
+  originalURLToMetadataCache.reset();
+  runtimeURLToMetadataCache.reset();
+}
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.worker.js b/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.worker.js
new file mode 100644
index 000000000000..b2e0f2142584
--- /dev/null
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.worker.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as parseSourceAndMetadataModule from './parseSourceAndMetadata';
+
+export const parseSourceAndMetadata =
+  parseSourceAndMetadataModule.parseSourceAndMetadata;
+export const purgeCachedMetadata =
+  parseSourceAndMetadataModule.purgeCachedMetadata;
diff --git a/packages/react-devtools-shared/src/PerformanceMarks.js b/packages/react-devtools-shared/src/PerformanceMarks.js
index 0c94b9d4f259..e702d3923f1d 100644
--- a/packages/react-devtools-shared/src/PerformanceMarks.js
+++ b/packages/react-devtools-shared/src/PerformanceMarks.js
@@ -9,13 +9,22 @@
 
 import {__PERFORMANCE_PROFILE__} from './constants';
 
+const supportsUserTiming =
+  typeof performance !== 'undefined' &&
+  typeof performance.mark === 'function' &&
+  typeof performance.clearMarks === 'function';
+
 function mark(markName: string): void {
-  performance.mark(markName + '-start');
+  if (supportsUserTiming) {
+    performance.mark(markName + '-start');
+  }
 }
 
 function measure(markName: string): void {
-  performance.mark(markName + '-end');
-  performance.measure(markName, markName + '-start', markName + '-end');
+  if (supportsUserTiming) {
+    performance.mark(markName + '-end');
+    performance.measure(markName, markName + '-start', markName + '-end');
+  }
 }
 
 export async function withAsyncPerformanceMark<TReturn>(
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
index bcd0f940751b..f9f295c7eb43 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
@@ -2,17 +2,23 @@
 
 import {createContext} from 'react';
 import type {
+  FetchFileWithCaching,
   LoadHookNamesFunction,
+  PrefetchSourceFiles,
   PurgeCachedHookNamesMetadata,
 } from '../DevTools';
 
 export type Context = {
+  fetchFileWithCaching: FetchFileWithCaching | null,
   loadHookNames: LoadHookNamesFunction | null,
+  prefetchSourceFiles: PrefetchSourceFiles | null,
   purgeCachedMetadata: PurgeCachedHookNamesMetadata | null,
 };
 
 const HookNamesContext = createContext<Context>({
+  fetchFileWithCaching: null,
   loadHookNames: null,
+  prefetchSourceFiles: null,
   purgeCachedMetadata: null,
 });
 HookNamesContext.displayName = 'HookNamesContext';
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index e7b15b3f3dc5..967196a3b905 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -16,6 +16,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import {TreeStateContext} from './TreeContext';
@@ -64,7 +65,9 @@ export type Props = {|
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
   const {
+    fetchFileWithCaching,
     loadHookNames: loadHookNamesFunction,
+    prefetchSourceFiles,
     purgeCachedMetadata,
   } = useContext(HookNamesContext);
   const bridge = useContext(BridgeContext);
@@ -126,6 +129,7 @@ export function InspectedElementContextController({children}: Props) {
           element,
           inspectedElement.hooks,
           loadHookNamesFunction,
+          fetchFileWithCaching,
         );
       }
     }
@@ -151,6 +155,21 @@ export function InspectedElementContextController({children}: Props) {
     [setState, state],
   );
 
+  const inspectedElementRef = useRef(null);
+  useEffect(() => {
+    if (
+      inspectedElement !== null &&
+      inspectedElement.hooks !== null &&
+      inspectedElementRef.current !== inspectedElement
+    ) {
+      inspectedElementRef.current = inspectedElement;
+
+      if (typeof prefetchSourceFiles === 'function') {
+        prefetchSourceFiles(inspectedElement.hooks, fetchFileWithCaching);
+      }
+    }
+  }, [inspectedElement, prefetchSourceFiles]);
+
   useEffect(() => {
     if (typeof purgeCachedMetadata === 'function') {
       // When Fast Refresh updates a component, any cached AST metadata may be invalid.
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 17a88d44cb5b..a1280d14bd22 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -51,6 +51,11 @@ import type {Thenable} from '../cache';
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
 
+export type FetchFileWithCaching = (url: string) => Promise<string>;
+export type PrefetchSourceFiles = (
+  hooksTree: HooksTree,
+  fetchFileWithCaching: FetchFileWithCaching | null,
+) => void;
 export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
@@ -101,7 +106,9 @@ export type Props = {|
   // 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,
   loadHookNames?: ?LoadHookNamesFunction,
+  prefetchSourceFiles?: ?PrefetchSourceFiles,
   purgeCachedHookNamesMetadata?: ?PurgeCachedHookNamesMetadata,
 |};
 
@@ -127,9 +134,11 @@ export default function DevTools({
   componentsPortalContainer,
   defaultTab = 'components',
   enabledInspectedElementContextMenu = false,
+  fetchFileWithCaching,
   loadHookNames,
   overrideTab,
   profilerPortalContainer,
+  prefetchSourceFiles,
   purgeCachedHookNamesMetadata,
   showTabBar = false,
   store,
@@ -192,10 +201,17 @@ export default function DevTools({
 
   const hookNamesContext = useMemo(
     () => ({
+      fetchFileWithCaching: fetchFileWithCaching || null,
       loadHookNames: loadHookNames || null,
+      prefetchSourceFiles: prefetchSourceFiles || null,
       purgeCachedMetadata: purgeCachedHookNamesMetadata || null,
     }),
-    [loadHookNames, purgeCachedHookNamesMetadata],
+    [
+      fetchFileWithCaching,
+      loadHookNames,
+      prefetchSourceFiles,
+      purgeCachedHookNamesMetadata,
+    ],
   );
 
   const devToolsRef = useRef<HTMLElement | null>(null);
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 070dafeb1d8e..6edbc0e30a12 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -17,6 +17,7 @@ import type {
   HookSourceLocationKey,
 } from 'react-devtools-shared/src/types';
 import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 const TIMEOUT = 30000;
 
@@ -53,6 +54,11 @@ function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
   }
 }
 
+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.
@@ -67,7 +73,8 @@ export function hasAlreadyLoadedHookNames(element: Element): boolean {
 export function loadHookNames(
   element: Element,
   hooksTree: HooksTree,
-  loadHookNamesFunction: (hookLog: HooksTree) => Thenable<HookNames>,
+  loadHookNamesFunction: LoadHookNamesFunction,
+  fetchFileWithCaching: FetchFileWithCaching | null,
 ): HookNames | null {
   let record = map.get(element);
 
@@ -103,7 +110,7 @@ export function loadHookNames(
 
     let didTimeout = false;
 
-    loadHookNamesFunction(hooksTree).then(
+    loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
       function onSuccess(hookNames) {
         if (didTimeout) {
           return;

From fc40f02adb2d11e4936cc31119c7a45acc471a7a Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 1 Sep 2021 11:56:52 -0700
Subject: [PATCH 0809/1603] Add consoleManagedByDevToolsDuringStrictMode
 feature flag in React Reconciler (#22196)

---
 .../src/ReactFiberReconciler.new.js           |  29 +-
 .../src/ReactFiberReconciler.old.js           |  29 +-
 .../src/__tests__/ReactStrictMode-test.js     | 512 ++++++++++++------
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   2 +
 .../forks/ReactFeatureFlags.native-oss.js     |   2 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   2 +
 .../ReactFeatureFlags.test-renderer.native.js |   2 +
 .../ReactFeatureFlags.test-renderer.www.js    |   2 +
 .../shared/forks/ReactFeatureFlags.testing.js |   2 +
 .../forks/ReactFeatureFlags.testing.www.js    |   2 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   2 +
 .../shared/forks/ReactFeatureFlags.www.js     |   2 +
 13 files changed, 418 insertions(+), 172 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 8760466c8cf7..06acfa11cbc3 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -35,7 +35,10 @@ import {
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
-import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
+import {
+  enableSchedulingProfiler,
+  consoleManagedByDevToolsDuringStrictMode,
+} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
@@ -107,6 +110,7 @@ export {
 
 import * as Scheduler from './Scheduler';
 import {setSuppressWarning} from 'shared/consoleWithStackDev';
+import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
 type OpaqueRoot = FiberRoot;
 
@@ -717,14 +721,23 @@ export function getIsStrictModeForDevtools() {
 }
 
 export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
-  // We're in a test because Scheduler.unstable_yieldValue only exists
-  // in SchedulerMock. To reduce the noise in strict mode tests,
-  // suppress warnings and disable scheduler yielding during the double render
-  if (typeof Scheduler.unstable_yieldValue === 'function') {
-    Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
-    setSuppressWarning(newIsStrictMode);
-  }
   isStrictMode = newIsStrictMode;
+
+  if (consoleManagedByDevToolsDuringStrictMode) {
+    // We're in a test because Scheduler.unstable_yieldValue only exists
+    // in SchedulerMock. To reduce the noise in strict mode tests,
+    // suppress warnings and disable scheduler yielding during the double render
+    if (typeof Scheduler.unstable_yieldValue === 'function') {
+      Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
+      setSuppressWarning(newIsStrictMode);
+    }
+  } else {
+    if (newIsStrictMode) {
+      disableLogs();
+    } else {
+      reenableLogs();
+    }
+  }
 }
 
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 687a9d7b0e80..5a75a312c42b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -35,7 +35,10 @@ import {
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
-import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
+import {
+  enableSchedulingProfiler,
+  consoleManagedByDevToolsDuringStrictMode,
+} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
@@ -107,6 +110,7 @@ export {
 
 import * as Scheduler from './Scheduler';
 import {setSuppressWarning} from 'shared/consoleWithStackDev';
+import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
 type OpaqueRoot = FiberRoot;
 
@@ -717,14 +721,23 @@ export function getIsStrictModeForDevtools() {
 }
 
 export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
-  // We're in a test because Scheduler.unstable_yieldValue only exists
-  // in SchedulerMock. To reduce the noise in strict mode tests,
-  // suppress warnings and disable scheduler yielding during the double render
-  if (typeof Scheduler.unstable_yieldValue === 'function') {
-    Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
-    setSuppressWarning(newIsStrictMode);
-  }
   isStrictMode = newIsStrictMode;
+
+  if (consoleManagedByDevToolsDuringStrictMode) {
+    // We're in a test because Scheduler.unstable_yieldValue only exists
+    // in SchedulerMock. To reduce the noise in strict mode tests,
+    // suppress warnings and disable scheduler yielding during the double render
+    if (typeof Scheduler.unstable_yieldValue === 'function') {
+      Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
+      setSuppressWarning(newIsStrictMode);
+    }
+  } else {
+    if (newIsStrictMode) {
+      disableLogs();
+    } else {
+      reenableLogs();
+    }
+  }
 }
 
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 3676d5719a0c..84fbead1f492 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -15,6 +15,8 @@ let ReactDOMServer;
 let Scheduler;
 let PropTypes;
 
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+
 describe('ReactStrictMode', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -893,195 +895,393 @@ describe('context legacy', () => {
     ReactDOM.render(<Root />, container);
   });
 
-  describe('logging', () => {
-    it('does not disable logs for class double render', () => {
-      spyOnDevAndProd(console, 'log');
+  describe('console logs logging', () => {
+    beforeEach(() => {
+      jest.resetModules();
+      React = require('react');
+      ReactDOM = require('react-dom');
+    });
 
-      let count = 0;
-      class Foo extends React.Component {
-        render() {
-          count++;
-          console.log('foo ' + count);
-          return null;
+    if (ReactFeatureFlags.consoleManagedByDevToolsDuringStrictMode) {
+      it('does not disable logs for class double render', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        class Foo extends React.Component {
+          render() {
+            count++;
+            console.log('foo ' + count);
+            return null;
+          }
         }
-      }
 
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <React.StrictMode>
-          <Foo />
-        </React.StrictMode>,
-        container,
-      );
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
 
-      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');
-    });
+        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', () => {
-      spyOnDevAndProd(console, 'log');
+      it('does not disable logs for class double ctor', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        class Foo extends React.Component {
+          constructor(props) {
+            super(props);
+            count++;
+            console.log('foo ' + count);
+          }
+          render() {
+            return null;
+          }
+        }
 
-      let count = 0;
-      class Foo extends React.Component {
-        constructor(props) {
-          super(props);
-          count++;
-          console.log('foo ' + count);
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+
+        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', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        class Foo extends React.Component {
+          state = {};
+          static getDerivedStateFromProps() {
+            count++;
+            console.log('foo ' + count);
+            return {};
+          }
+          render() {
+            return null;
+          }
         }
-        render() {
-          return null;
+
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+
+        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', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        class Foo extends React.Component {
+          state = {};
+          shouldComponentUpdate() {
+            count++;
+            console.log('foo ' + count);
+            return {};
+          }
+          render() {
+            return null;
+          }
         }
-      }
 
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <React.StrictMode>
-          <Foo />
-        </React.StrictMode>,
-        container,
-      );
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+        // Trigger sCU:
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
 
-      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');
-    });
+        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', () => {
-      spyOnDevAndProd(console, 'log');
+      it('does not disable logs for class state updaters', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let inst;
+        let count = 0;
+        class Foo extends React.Component {
+          state = {};
+          render() {
+            inst = this;
+            return null;
+          }
+        }
 
-      let count = 0;
-      class Foo extends React.Component {
-        state = {};
-        static getDerivedStateFromProps() {
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+        inst.setState(() => {
           count++;
           console.log('foo ' + count);
           return {};
-        }
-        render() {
+        });
+
+        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', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        function Foo() {
+          count++;
+          console.log('foo ' + count);
           return null;
         }
-      }
 
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <React.StrictMode>
-          <Foo />
-        </React.StrictMode>,
-        container,
-      );
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
 
-      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');
-    });
+        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');
+      });
+    } else {
+      it('disable logs for class double render', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        class Foo extends React.Component {
+          render() {
+            count++;
+            console.log('foo ' + count);
+            return null;
+          }
+        }
 
-    it('does not disable logs for class double shouldComponentUpdate', () => {
-      spyOnDevAndProd(console, 'log');
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
 
-      let count = 0;
-      class Foo extends React.Component {
-        state = {};
-        shouldComponentUpdate() {
-          count++;
-          console.log('foo ' + count);
-          return {};
-        }
-        render() {
-          return null;
+        expect(count).toBe(__DEV__ ? 2 : 1);
+        expect(console.log).toBeCalledTimes(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('disables logs for class double ctor', () => {
+        spyOnDevAndProd(console, 'log');
+
+        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');
-      ReactDOM.render(
-        <React.StrictMode>
-          <Foo />
-        </React.StrictMode>,
-        container,
-      );
-      // Trigger sCU:
-      ReactDOM.render(
-        <React.StrictMode>
-          <Foo />
-        </React.StrictMode>,
-        container,
-      );
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
 
-      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');
-    });
+        expect(count).toBe(__DEV__ ? 2 : 1);
+        expect(console.log).toBeCalledTimes(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', () => {
-      spyOnDevAndProd(console, 'log');
+      it('disable logs for class double getDerivedStateFromProps', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        class Foo extends React.Component {
+          state = {};
+          static getDerivedStateFromProps() {
+            count++;
+            console.log('foo ' + count);
+            return {};
+          }
+          render() {
+            return null;
+          }
+        }
 
-      let inst;
-      let count = 0;
-      class Foo extends React.Component {
-        state = {};
-        render() {
-          inst = this;
-          return null;
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+
+        expect(count).toBe(__DEV__ ? 2 : 1);
+        expect(console.log).toBeCalledTimes(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('disable logs for class double shouldComponentUpdate', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let count = 0;
+        class Foo extends React.Component {
+          state = {};
+          shouldComponentUpdate() {
+            count++;
+            console.log('foo ' + count);
+            return {};
+          }
+          render() {
+            return null;
+          }
         }
-      }
 
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <React.StrictMode>
-          <Foo />
-        </React.StrictMode>,
-        container,
-      );
-      inst.setState(() => {
-        count++;
-        console.log('foo ' + count);
-        return {};
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+        // Trigger sCU:
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+
+        expect(count).toBe(__DEV__ ? 2 : 1);
+        expect(console.log).toBeCalledTimes(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');
       });
 
-      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('disable logs for class state updaters', () => {
+        spyOnDevAndProd(console, 'log');
+
+        let inst;
+        let count = 0;
+        class Foo extends React.Component {
+          state = {};
+          render() {
+            inst = this;
+            return null;
+          }
+        }
 
-    it('does not disable logs for function double render', () => {
-      spyOnDevAndProd(console, 'log');
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+        inst.setState(() => {
+          count++;
+          console.log('foo ' + count);
+          return {};
+        });
+
+        expect(count).toBe(__DEV__ ? 2 : 1);
+        expect(console.log).toBeCalledTimes(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');
+      });
 
-      let count = 0;
-      function Foo() {
-        count++;
-        console.log('foo ' + count);
-        return null;
-      }
+      it('disable logs for function double render', () => {
+        spyOnDevAndProd(console, 'log');
 
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <React.StrictMode>
-          <Foo />
-        </React.StrictMode>,
-        container,
-      );
+        let count = 0;
+        function Foo() {
+          count++;
+          console.log('foo ' + count);
+          return null;
+        }
 
-      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');
-    });
+        const container = document.createElement('div');
+        ReactDOM.render(
+          <React.StrictMode>
+            <Foo />
+          </React.StrictMode>,
+          container,
+        );
+
+        expect(count).toBe(__DEV__ ? 2 : 1);
+        expect(console.log).toBeCalledTimes(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');
+      });
+    }
   });
 });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 6df5af24d953..62da534e058a 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -175,3 +175,5 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 
 export const enablePersistentOffscreenHostContainer = false;
+
+export const consoleManagedByDevToolsDuringStrictMode = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f6ab60d3ed64..745b3d914dd4 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -69,6 +69,8 @@ export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 5bcc6097447a..c3f9560c0b62 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -61,6 +61,8 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 4a897ec77e46..3aea892af594 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -61,6 +61,8 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 48df0a41a08b..f67a9df1b943 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -61,6 +61,8 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 481cf6b023ac..a7f819a9d4ca 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -61,6 +61,8 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 48971f129b7b..d3908d9c024b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -61,6 +61,8 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index c11a7757fa3c..6c7dd08cb9e7 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -61,6 +61,8 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 23a7e321e60e..a9563d3b44a3 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -59,3 +59,5 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
+
+export const consoleManagedByDevToolsDuringStrictMode = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 39c359e2fc68..3986cf94427a 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -97,6 +97,8 @@ export const deletedTreeCleanUpLevel = 3;
 
 export const enablePersistentOffscreenHostContainer = false;
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From ac8fc34e61d797b0ff88765c05811fe2e21aad79 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 1 Sep 2021 12:16:00 -0700
Subject: [PATCH 0810/1603] remove dist folder in release script for standalone
 and inline before building (#22232)

---
 scripts/devtools/build-and-test.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/scripts/devtools/build-and-test.js b/scripts/devtools/build-and-test.js
index cfd41bd809ae..cfa7a7cfd1d6 100755
--- a/scripts/devtools/build-and-test.js
+++ b/scripts/devtools/build-and-test.js
@@ -93,6 +93,9 @@ async function buildAndTestExtensions() {
 
 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(
@@ -133,6 +136,9 @@ async function buildAndTestInlinePackage() {
     'packages',
     'react-devtools-inline'
   );
+  const inlinePackageDest = join(inlinePackagePath, 'dist');
+
+  await exec(`rm -rf ${inlinePackageDest}`);
   const buildPromise = exec('yarn build', {cwd: inlinePackagePath});
 
   await logger(

From 2b7214033e6ba15f2616012f39ae1f1ee0e573a3 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 1 Sep 2021 12:56:39 -0700
Subject: [PATCH 0811/1603] [DevTools] Fix Issue in release script where
 commits for the last DevTools release are undefined #22233

---
 scripts/devtools/prepare-release.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/devtools/prepare-release.js b/scripts/devtools/prepare-release.js
index 5905eec621ad..0fc8fc841f55 100755
--- a/scripts/devtools/prepare-release.js
+++ b/scripts/devtools/prepare-release.js
@@ -115,8 +115,12 @@ async function getPreviousCommitSha() {
   const choices = [];
 
   const lines = await execRead(`
-    git log --max-count=5 --topo-order --pretty=format:'%H:::%s:::%as' HEAD -- ${PACKAGE_PATHS[0]}
+    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({

From 3385b377f715af2a02ab00c0fa7dd3933d73a13a Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 1 Sep 2021 13:39:36 -0700
Subject: [PATCH 0812/1603] React DevTools 4.17.0 -> 4.18.0 (#22234)

---
 packages/react-devtools-core/package.json            |  2 +-
 .../react-devtools-extensions/chrome/manifest.json   |  4 ++--
 .../react-devtools-extensions/edge/manifest.json     |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json  |  2 +-
 packages/react-devtools-inline/package.json          |  2 +-
 .../react-devtools-scheduling-profiler/package.json  |  2 +-
 packages/react-devtools/CHANGELOG.md                 | 12 ++++++++++++
 packages/react-devtools/package.json                 |  4 ++--
 8 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index d5cc778ec011..4d1ebdd9db8a 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 6c9b44cef7ee..ba5dd667cdd2 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.17.0",
-  "version_name": "4.17.0",
+  "version": "4.18.0",
+  "version_name": "4.18.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 701d6fdad800..0fdb82088c95 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.17.0",
-  "version_name": "4.17.0",
+  "version": "4.18.0",
+  "version_name": "4.18.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 2f3577b7f65e..7ef9d847b15f 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index feb537a91cdd..8b2e745a8585 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 64f208e7a63b..98a386ba1949 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 8632862c1ef4..2ca3d246f733 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index d8ad857ea3f4..12f93895780c 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.17.0",
+  "version": "4.18.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.17.0",
+    "react-devtools-core": "4.18.0",
     "update-notifier": "^2.1.0"
   }
 }

From 1314299c7f70914d61d8e1cef56767f112110674 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 1 Sep 2021 20:52:38 -0400
Subject: [PATCH 0813/1603] Initial shim of useSyncExternalStore (#22211)

This sets up an initial shim implementation of useSyncExternalStore,
via the use-sync-external-store package. It's designed to mimic the
behavior of the built-in API, but is backwards compatible to any version
of React that supports hooks.

I have not yet implemented the built-in API, but once it exists, the
use-sync-external-store package will always prefer that one. Library
authors can depend on the shim and trust that their users get the
correct implementation.

See https://github.com/reactwg/react-18/discussions/86 for background
on the API.

The tests I've added here are designed to run against both the shim and
built-in implementation, using our variant test flag feature. Tests that
only apply to concurrent roots will live in a separate suite.
---
 .../useSyncExternalStore-test.js => extra.js} |   6 +-
 packages/use-sync-external-store/npm/extra.js |   7 +
 packages/use-sync-external-store/package.json |   1 +
 .../useSyncExternalStoreShared-test.js        | 621 ++++++++++++++++++
 .../src/useSyncExternalStore.js               | 130 +++-
 .../src/useSyncExternalStoreExtra.js          |  76 +++
 scripts/rollup/bundles.js                     |  11 +-
 7 files changed, 845 insertions(+), 7 deletions(-)
 rename packages/use-sync-external-store/{src/__tests__/useSyncExternalStore-test.js => extra.js} (69%)
 create mode 100644 packages/use-sync-external-store/npm/extra.js
 create mode 100644 packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
 create mode 100644 packages/use-sync-external-store/src/useSyncExternalStoreExtra.js

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStore-test.js b/packages/use-sync-external-store/extra.js
similarity index 69%
rename from packages/use-sync-external-store/src/__tests__/useSyncExternalStore-test.js
rename to packages/use-sync-external-store/extra.js
index be6eeb5caf8c..90d48eb4641b 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStore-test.js
+++ b/packages/use-sync-external-store/extra.js
@@ -4,11 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @emails react-core
+ * @flow
  */
 
 'use strict';
 
-describe('useSyncExternalStore', () => {
-  test('TODO', () => {});
-});
+export * from './src/useSyncExternalStoreExtra';
diff --git a/packages/use-sync-external-store/npm/extra.js b/packages/use-sync-external-store/npm/extra.js
new file mode 100644
index 000000000000..468dd518ac1f
--- /dev/null
+++ b/packages/use-sync-external-store/npm/extra.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/use-sync-external-store-extra.production.min.js');
+} else {
+  module.exports = require('./cjs/use-sync-external-store-extra.development.js');
+}
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index cc9a7c3a393c..7f5e5b0e8c0d 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -12,6 +12,7 @@
     "README.md",
     "build-info.json",
     "index.js",
+    "extra.js",
     "cjs/"
   ],
   "license": "MIT",
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 000000000000..8db73a8e8c77
--- /dev/null
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -0,0 +1,621 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let useSyncExternalStore;
+let useSyncExternalStoreExtra;
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let useState;
+let useEffect;
+let useLayoutEffect;
+
+// 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();
+
+    // Remove the built-in API from the React exports to force the package to
+    // use the shim.
+    // TODO: Don't do this during a variant test run. That way these tests run
+    // against both the shim and the built-in implementation.
+    jest.mock('react', () => {
+      // eslint-disable-next-line no-unused-vars
+      const {startTransition, ...otherExports} = jest.requireActual('react');
+      return otherExports;
+    });
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    useState = React.useState;
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+
+    const internalAct = require('jest-react').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(() => ReactNoop.batchedUpdates(cb));
+
+    useSyncExternalStore = require('use-sync-external-store')
+      .useSyncExternalStore;
+    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
+      .useSyncExternalStoreExtra;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  function createRoot(element) {
+    // This wrapper function exists so we can test both legacy roots and
+    // concurrent roots.
+    //
+    // TODO: Once the built-in API exists, conditionally test the concurrent
+    // root API, too.
+    const root = ReactNoop.createLegacyRoot();
+    act(() => {
+      root.render(element);
+    });
+    return root;
+  }
+
+  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;
+      },
+    };
+  }
+
+  test('basic usage', () => {
+    const store = createExternalStore('Initial');
+
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, store.getState);
+      return <Text text={text} />;
+    }
+
+    const root = createRoot(<App />);
+
+    expect(Scheduler).toHaveYielded(['Initial']);
+    expect(root).toMatchRenderedOutput('Initial');
+
+    act(() => {
+      store.set('Updated');
+    });
+    expect(Scheduler).toHaveYielded(['Updated']);
+    expect(root).toMatchRenderedOutput('Updated');
+  });
+
+  test('skips re-rendering if nothing changes', () => {
+    const store = createExternalStore('Initial');
+
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, store.getState);
+      return <Text text={text} />;
+    }
+
+    const root = createRoot(<App />);
+
+    expect(Scheduler).toHaveYielded(['Initial']);
+    expect(root).toMatchRenderedOutput('Initial');
+
+    // Update to the same value
+    act(() => {
+      store.set('Initial');
+    });
+    // Should not re-render
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Initial');
+  });
+
+  test('switch to a different store', () => {
+    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 <Text text={value} />;
+    }
+
+    const root = createRoot(<App />);
+
+    expect(Scheduler).toHaveYielded([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    act(() => {
+      storeA.set(1);
+    });
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Switch stores
+    act(() => {
+      // This update will be disregarded
+      storeA.set(2);
+      setStore(storeB);
+    });
+    // Now reading from B instead of A
+    expect(Scheduler).toHaveYielded([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Update A
+    act(() => {
+      storeA.set(3);
+    });
+    // Nothing happened, because we're no longer subscribed to A
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Update B
+    act(() => {
+      storeB.set(1);
+    });
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  test('selecting a specific value inside getSnapshot', () => {
+    const store = createExternalStore({a: 0, b: 0});
+
+    function A() {
+      const a = useSyncExternalStore(store.subscribe, () => store.getState().a);
+      return <Text text={'A' + a} />;
+    }
+    function B() {
+      const b = useSyncExternalStore(store.subscribe, () => store.getState().b);
+      return <Text text={'B' + b} />;
+    }
+
+    function App() {
+      return (
+        <>
+          <A />
+          <B />
+        </>
+      );
+    }
+
+    const root = createRoot(<App />);
+
+    expect(Scheduler).toHaveYielded(['A0', 'B0']);
+    expect(root).toMatchRenderedOutput('A0B0');
+
+    // Update b but not a
+    act(() => {
+      store.set({a: 0, b: 1});
+    });
+    // Only b re-renders
+    expect(Scheduler).toHaveYielded(['B1']);
+    expect(root).toMatchRenderedOutput('A0B1');
+
+    // Update a but not b
+    act(() => {
+      store.set({a: 1, b: 1});
+    });
+    // Only a re-renders
+    expect(Scheduler).toHaveYielded(['A1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+  });
+
+  test(
+    "compares to current state before bailing out, even when there's a " +
+      'mutation in between the sync and passive effects',
+    () => {
+      const store = createExternalStore(0);
+
+      function App() {
+        const value = useSyncExternalStore(store.subscribe, store.getState);
+        useEffect(() => {
+          Scheduler.unstable_yieldValue('Passive effect: ' + value);
+        }, [value]);
+        return <Text text={value} />;
+      }
+
+      const root = createRoot(<App />);
+      expect(Scheduler).toHaveYielded([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);
+      expect(Scheduler).toHaveYielded([
+        1,
+        // Passive effect hasn't fired yet
+      ]);
+      expect(root).toMatchRenderedOutput('1');
+
+      // Flip the store state back to the previous value.
+      store.set(0);
+      expect(Scheduler).toHaveYielded([
+        '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(root).toMatchRenderedOutput('0');
+    },
+  );
+
+  test('mutating the store in between render and commit when getSnapshot has changed', () => {
+    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.unstable_yieldValue('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 <Text text={label + value} />;
+    }
+
+    let setStep;
+    function App() {
+      const [step, _setStep] = useState(0);
+      setStep = _setStep;
+      return (
+        <>
+          <Child1 step={step} />
+          <Child2 step={step} />
+        </>
+      );
+    }
+
+    const root = createRoot(<App />);
+    expect(Scheduler).toHaveYielded(['A1']);
+    expect(root).toMatchRenderedOutput('A1');
+
+    act(() => {
+      // Change getSnapshot and update the store in the same batch
+      setStep(1);
+    });
+    expect(Scheduler).toHaveYielded([
+      '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(root).toMatchRenderedOutput('B2');
+  });
+
+  test('mutating the store in between render and commit when getSnapshot has _not_ changed', () => {
+    // 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.unstable_yieldValue('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 <Text text={'A' + value} />;
+    }
+
+    let setStep;
+    function App() {
+      const [step, _setStep] = useState(0);
+      setStep = _setStep;
+      return (
+        <>
+          <Child1 step={step} />
+          <Child2 step={step} />
+        </>
+      );
+    }
+
+    const root = createRoot(<App />);
+    expect(Scheduler).toHaveYielded(['A1']);
+    expect(root).toMatchRenderedOutput('A1');
+
+    // This will cause a layout effect, and in the layout effect we'll update
+    // the store
+    act(() => {
+      setStep(1);
+    });
+    expect(Scheduler).toHaveYielded([
+      '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(root).toMatchRenderedOutput('A1');
+  });
+
+  test("does not bail out if the previous update hasn't finished yet", () => {
+    const store = createExternalStore(0);
+
+    function Child1() {
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      useLayoutEffect(() => {
+        if (value === 1) {
+          Scheduler.unstable_yieldValue('Reset back to 0');
+          store.set(0);
+        }
+      }, [value]);
+      return <Text text={value} />;
+    }
+
+    function Child2() {
+      const value = useSyncExternalStore(store.subscribe, store.getState);
+      return <Text text={value} />;
+    }
+
+    const root = createRoot(
+      <>
+        <Child1 />
+        <Child2 />
+      </>,
+    );
+    expect(Scheduler).toHaveYielded([0, 0]);
+    expect(root).toMatchRenderedOutput('00');
+
+    act(() => {
+      store.set(1);
+    });
+    expect(Scheduler).toHaveYielded([1, 1, 'Reset back to 0', 0, 0]);
+    expect(root).toMatchRenderedOutput('00');
+  });
+
+  test('uses the latest getSnapshot, even if it changed in the same batch as a store update', () => {
+    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 <Text text={text} />;
+    }
+
+    const root = createRoot(<App />);
+    expect(Scheduler).toHaveYielded([0]);
+
+    // Update the store and getSnapshot at the same time
+    act(() => {
+      setGetSnapshot(() => getSnapshotB);
+      store.set({a: 1, b: 2});
+    });
+    // It should read from B instead of A
+    expect(Scheduler).toHaveYielded([2]);
+    expect(root).toMatchRenderedOutput('2');
+  });
+
+  test('handles errors thrown by getSnapshot or isEqual', () => {
+    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 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;
+        },
+        {
+          isEqual: (a, b) => {
+            if (a.throwInIsEqual || b.throwInIsEqual) {
+              throw new Error('Error in isEqual');
+            }
+            return a.value === b.value;
+          },
+        },
+      );
+      return <Text text={value} />;
+    }
+
+    const errorBoundary = React.createRef(null);
+    const root = createRoot(
+      <ErrorBoundary ref={errorBoundary}>
+        <App />
+      </ErrorBoundary>,
+    );
+    expect(Scheduler).toHaveYielded([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Update that throws in a getSnapshot. We can catch it with an error boundary.
+    act(() => {
+      store.set({value: 1, throwInGetSnapshot: true, throwInIsEqual: false});
+    });
+    expect(Scheduler).toHaveYielded(['Error in getSnapshot']);
+    expect(root).toMatchRenderedOutput('Error in getSnapshot');
+
+    // Clear the error.
+    act(() => {
+      store.set({value: 1, throwInGetSnapshot: false, throwInIsEqual: false});
+      errorBoundary.current.setState({error: null});
+    });
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Update that throws in isEqual. Since isEqual only prevents a bail out,
+    // we don't need to surface an error. But we do have to re-render.
+    act(() => {
+      store.set({value: 1, throwInGetSnapshot: false, throwInIsEqual: true});
+    });
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+  });
+
+  describe('extra features implemented in user-space', () => {
+    test('memoized selectors are only called once per update', () => {
+      const store = createExternalStore({a: 0, b: 0});
+
+      function selector(state) {
+        Scheduler.unstable_yieldValue('Selector');
+        return state.a;
+      }
+
+      function App() {
+        Scheduler.unstable_yieldValue('App');
+        const a = useSyncExternalStoreExtra(
+          store.subscribe,
+          store.getState,
+          selector,
+        );
+        return <Text text={'A' + a} />;
+      }
+
+      const root = createRoot(<App />);
+
+      expect(Scheduler).toHaveYielded(['App', 'Selector', 'A0']);
+      expect(root).toMatchRenderedOutput('A0');
+
+      // Update the store
+      act(() => {
+        store.set({a: 1, b: 0});
+      });
+      expect(Scheduler).toHaveYielded([
+        // 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(root).toMatchRenderedOutput('A1');
+    });
+
+    test('Using isEqual to bailout', () => {
+      const store = createExternalStore({a: 0, b: 0});
+
+      function A() {
+        const {a} = useSyncExternalStoreExtra(
+          store.subscribe,
+          store.getState,
+          state => ({a: state.a}),
+          (state1, state2) => state1.a === state2.a,
+        );
+        return <Text text={'A' + a} />;
+      }
+      function B() {
+        const {b} = useSyncExternalStoreExtra(
+          store.subscribe,
+          store.getState,
+          state => {
+            return {b: state.b};
+          },
+          (state1, state2) => state1.b === state2.b,
+        );
+        return <Text text={'B' + b} />;
+      }
+
+      function App() {
+        return (
+          <>
+            <A />
+            <B />
+          </>
+        );
+      }
+
+      const root = createRoot(<App />);
+
+      expect(Scheduler).toHaveYielded(['A0', 'B0']);
+      expect(root).toMatchRenderedOutput('A0B0');
+
+      // Update b but not a
+      act(() => {
+        store.set({a: 0, b: 1});
+      });
+      // Only b re-renders
+      expect(Scheduler).toHaveYielded(['B1']);
+      expect(root).toMatchRenderedOutput('A0B1');
+
+      // Update a but not b
+      act(() => {
+        store.set({a: 1, b: 1});
+      });
+      // Only a re-renders
+      expect(Scheduler).toHaveYielded(['A1']);
+      expect(root).toMatchRenderedOutput('A1B1');
+    });
+  });
+});
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 8967bff10d33..55853f6e9b8a 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -7,6 +7,132 @@
  * @flow
  */
 
-export function useSyncExternalStore() {
-  throw new Error('Not yet implemented');
+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,
+
+  // $FlowFixMe - useSyncExternalStore not yet part of React Flow types
+  useSyncExternalStore: builtInAPI,
+} = React;
+
+// Prefer the built-in API, if it exists. If it doesn't exist, then we assume
+// we're in version 16 or 17, so rendering is always synchronous. The shim
+// does not support concurrent rendering, only the built-in API.
+export const useSyncExternalStore =
+  builtInAPI !== undefined ? builtInAPI : useSyncExternalStore_shim;
+
+let didWarnOld18Alpha = 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.
+function useSyncExternalStore_shim<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  if (__DEV__) {
+    if (!didWarnOld18Alpha) {
+      if (React.startTransition !== undefined) {
+        didWarnOld18Alpha = true;
+        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();
+
+  // 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.
+  // TODO: Circumvent SSR warning
+  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(inst) {
+  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/useSyncExternalStoreExtra.js b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
new file mode 100644
index 000000000000..905bc67c462b
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import is from 'shared/objectIs';
+import {useSyncExternalStore} from 'use-sync-external-store';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+const {useMemo, useDebugValue} = React;
+
+// Same as useSyncExternalStore, but supports selector and isEqual arguments.
+export function useSyncExternalStoreExtra<Snapshot, Selection>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => Snapshot,
+  selector: (snapshot: Snapshot) => Selection,
+  isEqual?: (a: Selection, b: Selection) => boolean,
+): Selection {
+  const getSnapshotWithMemoizedSelector = 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;
+    return () => {
+      const nextSnapshot = getSnapshot();
+
+      if (!hasMemo) {
+        // The first time the hook is called, there is no memoized result.
+        hasMemo = true;
+        memoizedSnapshot = nextSnapshot;
+        const nextSelection = selector(nextSnapshot);
+        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.
+      memoizedSnapshot = nextSnapshot;
+      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)) {
+        return prevSelection;
+      }
+
+      memoizedSelection = nextSelection;
+      return nextSelection;
+    };
+  }, [getSnapshot, selector, isEqual]);
+  const value = useSyncExternalStore(
+    subscribe,
+    getSnapshotWithMemoizedSelector,
+  );
+  useDebugValue(value);
+  return value;
+}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 7e87f4cc355e..047d27e91807 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -684,7 +684,7 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* Shim for useSyncExternalState *******/
+  /******* Shim for useSyncExternalStore *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
@@ -693,6 +693,15 @@ const bundles = [
     externals: ['react'],
   },
 
+  /******* Shim for useSyncExternalStore (+ extra user-space features) *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/extra',
+    global: 'useSyncExternalStoreExtra',
+    externals: ['react', 'use-sync-external-store'],
+  },
+
   /******* React Scheduler (experimental) *******/
   {
     bundleTypes: [

From 99f9de9a6ae07fe4e34b96c1a931e8b403409bfd Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Mon, 6 Sep 2021 21:58:46 +0300
Subject: [PATCH 0814/1603] Fix typo in ReactDOMServerFormatConfig.js (#22203)

Fix typo:

TOOD -> TODO
---
 packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 9232106aac36..58ddbeea3f7b 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1706,7 +1706,7 @@ export function writeEndSegment(
 //   // Clear all the existing children. This is complicated because
 //   // there can be embedded Suspense boundaries in the fallback.
 //   // This is similar to clearSuspenseBoundary in ReactDOMHostConfig.
-//   // TOOD: We could avoid this if we never emitted suspense boundaries in fallback trees.
+//   // 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 = suspenseNode.parentNode;
 //   let node = suspenseNode.nextSibling;

From 6a56ea89bcd72b3186553d48d7101b8d421fdfc6 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 6 Sep 2021 20:03:12 +0100
Subject: [PATCH 0815/1603] Bump tar from 5.0.5 to 5.0.11 (#22223)

Bumps [tar](https://github.com/npm/node-tar) from 5.0.5 to 5.0.11.
- [Release notes](https://github.com/npm/node-tar/releases)
- [Changelog](https://github.com/npm/node-tar/blob/main/CHANGELOG.md)
- [Commits](https://github.com/npm/node-tar/compare/v5.0.5...v5.0.11)

---
updated-dependencies:
- dependency-name: tar
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 48 +++++++++++++++++++++---------------------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 1e67ccb08dde..121c6f6155e8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4508,12 +4508,7 @@ chokidar@^3.4.1:
   optionalDependencies:
     fsevents "~2.1.2"
 
-chownr@^1.0.1, chownr@^1.1.2, chownr@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
-  integrity sha512-i70fVHhmV3DtTl6nqvZOnIjbY0Pe4kAUjwHj8z0zAdgBtYrJyYwLKCCuRBQ5ppkyL0AkN7HKRnETdmdp1zqNXw==
-
-chownr@^1.1.1:
+chownr@^1.0.1, chownr@^1.1.1, chownr@^1.1.2, chownr@^1.1.3, chownr@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b"
   integrity sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==
@@ -6394,7 +6389,6 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
-  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"
@@ -7500,7 +7494,7 @@ fs-extra@^8.1.0:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-minipass@^2.0.0:
+fs-minipass@^2.0.0, fs-minipass@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
   integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
@@ -10970,17 +10964,17 @@ minipass-sized@^1.0.3:
   dependencies:
     minipass "^3.0.0"
 
-minipass@^3.0.0, minipass@^3.0.1, minipass@^3.1.0, minipass@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.1.tgz#7607ce778472a185ad6d89082aa2070f79cedcd5"
-  integrity sha512-UFqVihv6PQgwj8/yTGvl9kPz7xIAY+R5z6XYjRInD3Gk3qx6QGSD6zEcpeG4Dy/lQnv1J6zv8ejV90hyYIKf3w==
+minipass@^3.0.0, minipass@^3.0.1, minipass@^3.1.0, minipass@^3.1.1, minipass@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
+  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
   dependencies:
     yallist "^4.0.0"
 
-minizlib@^2.0.0, minizlib@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.0.tgz#fd52c645301ef09a63a2c209697c294c6ce02cf3"
-  integrity sha512-EzTZN/fjSvifSX0SlqUERCN39o6T40AMarPbv0MrarSFtIITCBh7bi+dU8nxGFHuqs9jdIAeoYoKuQAAASsPPA==
+minizlib@^2.0.0, minizlib@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
+  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
   dependencies:
     minipass "^3.0.0"
     yallist "^4.0.0"
@@ -11009,7 +11003,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.1, mkdirp@^0.5.1, mkdirp@~0.5.1:
+mkdirp@0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   integrity sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=
@@ -11021,7 +11015,7 @@ mkdirp@1.0.4:
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
 
-mkdirp@^0.5.0, mkdirp@^0.5.3, mkdirp@^0.5.5:
+mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, 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==
@@ -14833,15 +14827,15 @@ tar-stream@^2.1.0:
     readable-stream "^3.1.1"
 
 tar@^5.0.5:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-5.0.5.tgz#03fcdb7105bc8ea3ce6c86642b9c942495b04f93"
-  integrity sha512-MNIgJddrV2TkuwChwcSNds/5E9VijOiw7kAc1y5hTNJoLDSuIyid2QtLYiCYNnICebpuvjhPQZsXwUL0O3l7OQ==
-  dependencies:
-    chownr "^1.1.3"
-    fs-minipass "^2.0.0"
-    minipass "^3.0.0"
-    minizlib "^2.1.0"
-    mkdirp "^0.5.0"
+  version "5.0.11"
+  resolved "https://registry.yarnpkg.com/tar/-/tar-5.0.11.tgz#f6e972e26960f71387c88e4313b202889be09292"
+  integrity sha512-E6q48d5y4XSCD+Xmwc0yc8lXuyDK38E0FB8N4S/drQRtXOMUhfhDxbB0xr2KKDhNfO51CFmoa6Oz00nAkWsjnA==
+  dependencies:
+    chownr "^1.1.4"
+    fs-minipass "^2.1.0"
+    minipass "^3.1.3"
+    minizlib "^2.1.2"
+    mkdirp "^0.5.5"
     yallist "^4.0.0"
 
 targz@^1.0.1:

From c46c0733e2bebb298fc3294256c678b27d1cc640 Mon Sep 17 00:00:00 2001
From: Kausik S S <75879688+k1499@users.noreply.github.com>
Date: Tue, 7 Sep 2021 00:35:15 +0530
Subject: [PATCH 0816/1603] Typo fixed (#22171)

---
 packages/react-devtools/CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 2ca3d246f733..d858072a8d7b 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -185,7 +185,7 @@ Learn more about this change at [fb.me/devtools-unsupported-bridge-protocol](htt
 
 ## 4.12.4 (April 19, 2021)
 #### Bugfix
-* Remove `@octokit/rest` depedency because of a problem with transitive dependencies ([bvaughn](https://github.com/bvaughn) in [#21317](https://github.com/facebook/react/pull/21317))
+* 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

From 380284a2b4a1c431b197d7cac7bfaa7930ed102e Mon Sep 17 00:00:00 2001
From: Mahyar Ebadi <42976936+mahyareb@users.noreply.github.com>
Date: Mon, 6 Sep 2021 12:12:51 -0700
Subject: [PATCH 0817/1603] Add aria-description to the list of known ARIA
 attributes (#22142)

* Update validAriaProperties.js

https://w3c.github.io/aria/#aria-description is a valid aria property.

* Sort alphabetically

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 packages/react-dom/src/shared/validAriaProperties.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-dom/src/shared/validAriaProperties.js b/packages/react-dom/src/shared/validAriaProperties.js
index 36875e765119..bfe7b73e2aed 100644
--- a/packages/react-dom/src/shared/validAriaProperties.js
+++ b/packages/react-dom/src/shared/validAriaProperties.js
@@ -7,6 +7,7 @@
 
 const ariaProperties = {
   'aria-current': 0, // state
+  'aria-description': 0,
   'aria-details': 0,
   'aria-disabled': 0, // state
   'aria-hidden': 0, // state

From 0c0d1ddae4be922f800705ae686fbb887184b38b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Mon, 6 Sep 2021 21:17:51 +0200
Subject: [PATCH 0818/1603] feat(eslint-plugin-react-hooks): support ESLint 8.x
 (#22248)

---
 .eslintrc.js                                  | 12 +++
 package.json                                  |  1 +
 .../ESLintRuleExhaustiveDeps-test.js          | 14 +++
 .../eslint-plugin-react-hooks/package.json    |  5 +-
 .../src/ExhaustiveDeps.js                     |  2 +-
 .../src/RulesOfHooks.js                       |  1 -
 yarn.lock                                     | 86 ++++++++++++++++++-
 7 files changed, 116 insertions(+), 5 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 85f3cfc294a0..62db4c47c000 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -182,6 +182,18 @@ module.exports = {
         'jsx-a11y/tabindex-no-positive': OFF,
       },
     },
+    {
+      files: ['packages/eslint-plugin-react-hooks/src/*.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',
diff --git a/package.json b/package.json
index 1bf9be46f889..0d8a306515d0 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "eslint-config-fbjs": "^3.1.1",
     "eslint-config-prettier": "^6.9.0",
     "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-eslint-plugin": "^3.5.3",
     "eslint-plugin-flowtype": "^2.25.0",
     "eslint-plugin-jest": "^22.15.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index bde0c1cfa35e..4b6b3370e8b2 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -8146,4 +8146,18 @@ describe('react-hooks', () => {
       ...testsTypescriptEslintParser.invalid,
     ],
   });
+
+  new ESLintTester({
+    parser: require.resolve('@typescript-eslint/parser-v5'),
+    parserOptions,
+  }).run('parser: @typescript-eslint/parser@^5.0.0-0', ReactHooksESLintRule, {
+    valid: [
+      ...testsTypescriptEslintParserV4.valid,
+      ...testsTypescriptEslintParser.valid,
+    ],
+    invalid: [
+      ...testsTypescriptEslintParserV4.invalid,
+      ...testsTypescriptEslintParser.invalid,
+    ],
+  });
 });
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index a33566047c73..1cda188fc5dc 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -29,11 +29,12 @@
   },
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
-    "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+    "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
   },
   "devDependencies": {
     "@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-v4": "npm:@typescript-eslint/parser@^4.1.0",
+    "@typescript-eslint/parser-v5": "npm:@typescript-eslint/parser@^5.0.0-0"
   }
 }
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 96e7adc646c8..21d48141717c 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -15,11 +15,11 @@ export default {
     docs: {
       description:
         'verifies the list of dependencies for Hooks like useEffect and similar',
-      category: 'Best Practices',
       recommended: true,
       url: 'https://github.com/facebook/react/issues/14920',
     },
     fixable: 'code',
+    hasSuggestions: true,
     schema: [
       {
         type: 'object',
diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
index 66e2d8edba56..1273bf1d0c71 100644
--- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -109,7 +109,6 @@ export default {
     type: 'problem',
     docs: {
       description: 'enforces the Rules of Hooks',
-      category: 'Possible Errors',
       recommended: true,
       url: 'https://reactjs.org/docs/hooks-rules.html',
     },
diff --git a/yarn.lock b/yarn.lock
index 121c6f6155e8..bd2d7d8fb7e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2367,6 +2367,16 @@
     "@typescript-eslint/typescript-estree" "4.1.0"
     debug "^4.1.1"
 
+"@typescript-eslint/parser-v5@npm:@typescript-eslint/parser@^5.0.0-0":
+  version "5.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.0.0-alpha.25.tgz#d966eb8b2cf97f0134a5589791017e0a720bb995"
+  integrity sha512-e0Q2fWVXle8l9pCCV2K/pQrn0Wyp8nV/Gp8AbEUqP6xLfgrOxejzcERP9y5x1rnwrp7pPXZhticsNLjqljhh6w==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.0.0-alpha.25+faf2d1d2"
+    "@typescript-eslint/types" "5.0.0-alpha.25+faf2d1d2"
+    "@typescript-eslint/typescript-estree" "5.0.0-alpha.25+faf2d1d2"
+    debug "^4.3.1"
+
 "@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"
@@ -2375,6 +2385,14 @@
     "@typescript-eslint/types" "4.1.0"
     "@typescript-eslint/visitor-keys" "4.1.0"
 
+"@typescript-eslint/scope-manager@5.0.0-alpha.25+faf2d1d2":
+  version "5.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.0.0-alpha.25.tgz#eb90cb682f6a3a14ba9afc4bd7c1f66cf362e1b0"
+  integrity sha512-tZumo5HziFbOI+unwQ7Xgimn4FHltg20TCxVCU2tl7YyFhiQl1WxnmhU7/1MUNWXzK9RA88MRKvUON1lgK1FLw==
+  dependencies:
+    "@typescript-eslint/types" "5.0.0-alpha.25+faf2d1d2"
+    "@typescript-eslint/visitor-keys" "5.0.0-alpha.25+faf2d1d2"
+
 "@typescript-eslint/types@3.10.1":
   version "3.10.1"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
@@ -2385,6 +2403,11 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.1.0.tgz#edbd3fec346f34e13ce7aa176b03b497a32c496a"
   integrity sha512-rkBqWsO7m01XckP9R2YHVN8mySOKKY2cophGM8K5uDK89ArCgahItQYdbg/3n8xMxzu2elss+an1TphlUpDuJw==
 
+"@typescript-eslint/types@5.0.0-alpha.25+faf2d1d2":
+  version "5.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.0.0-alpha.25.tgz#2c5aaaee8d41d08fbb91193cc6df482374700b2e"
+  integrity sha512-M9PZ+m1vD+UaBt+9hJ1bXTA94s4fvY3fOQkwYxrtreqqdzaiNcW8F5GAO3dthzmS+6II+XAsWfCQzCoBvoiOrw==
+
 "@typescript-eslint/typescript-estree@1.13.0":
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-1.13.0.tgz#8140f17d0f60c03619798f1d628b8434913dc32e"
@@ -2434,6 +2457,19 @@
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@typescript-eslint/typescript-estree@5.0.0-alpha.25+faf2d1d2":
+  version "5.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.0.0-alpha.25.tgz#1e9ad3464c93fffb1b17d8cc3e2523ae6add930b"
+  integrity sha512-EIEX4TSWGIBBi9DMZd8FZoI52Ua6hkHj2T8ah83BEBVMS9wCJDZyryuw0PHTesA2ZB5yiQbtNQrrODLJxz1hAw==
+  dependencies:
+    "@typescript-eslint/types" "5.0.0-alpha.25+faf2d1d2"
+    "@typescript-eslint/visitor-keys" "5.0.0-alpha.25+faf2d1d2"
+    debug "^4.3.1"
+    globby "^11.0.3"
+    is-glob "^4.0.1"
+    semver "^7.3.5"
+    tsutils "^3.21.0"
+
 "@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"
@@ -2449,6 +2485,14 @@
     "@typescript-eslint/types" "4.1.0"
     eslint-visitor-keys "^2.0.0"
 
+"@typescript-eslint/visitor-keys@5.0.0-alpha.25+faf2d1d2":
+  version "5.0.0-alpha.25"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.0.0-alpha.25.tgz#0b4a909d4020094e638dee1ff72e12d24783c94b"
+  integrity sha512-vh5AIlr3wxkhFMreop5Y1Wi5Sc9oK03J8+SiyKMEEAqwWmk6e2ryHr1001oWRuK4e6d/CjVNa73omERCWcTXTg==
+  dependencies:
+    "@typescript-eslint/types" "5.0.0-alpha.25+faf2d1d2"
+    eslint-visitor-keys "^3.0.0"
+
 "@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"
@@ -5485,6 +5529,13 @@ debug@^3.1.0, debug@^3.1.1, debug@^3.2.5, debug@^3.2.6:
   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"
+
 debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
@@ -6341,6 +6392,13 @@ eslint-plugin-babel@^5.3.0:
   dependencies:
     eslint-rule-composer "^0.3.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-flowtype@^2.25.0:
   version "2.50.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz#61379d6dce1d010370acd6681740fd913d68175f"
@@ -6464,6 +6522,11 @@ eslint-visitor-keys@^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.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.0.0.tgz#e32e99c6cdc2eb063f204eda5db67bfe58bb4186"
+  integrity sha512-mJOZa35trBTb3IyRmo8xmKBZlxf+N7OnUl4+ZhJHs/r+0770Wh/LEACE2pqMGMe27G/4y8P2bYGk4J70IC5k1Q==
+
 eslint@5.16.0:
   version "5.16.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
@@ -10548,6 +10611,13 @@ lru-cache@^5.1.1:
   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"
+
 macos-release@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/macos-release/-/macos-release-2.3.0.tgz#eb1930b036c0800adebccd5f17bc4c12de8bb71f"
@@ -11049,7 +11119,7 @@ ms@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.0.0, ms@^2.1.1:
+ms@2.1.2, ms@^2.0.0, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
@@ -13841,6 +13911,13 @@ semver@^7.0.0, semver@^7.1.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.1.1.tgz#29104598a197d6cbe4733eeecbe968f7b43a9667"
   integrity sha512-WfuG+fl6eh3eZ2qAf6goB7nhiCd7NPXhmyFxigB/TOkQyeLP8w8GsVehvtGNtnNmyboz4TgeK40B1Kbql/8c5A==
 
+semver@^7.3.5:
+  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"
@@ -15215,6 +15292,13 @@ tsutils@^3.17.1:
   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"

From cdb08ebe0ac18b5afe1b5b587e8d0968bb754a60 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 6 Sep 2021 20:36:24 +0100
Subject: [PATCH 0819/1603] Update PULL_REQUEST_TEMPLATE.md

---
 .github/PULL_REQUEST_TEMPLATE.md | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 27d6a428c044..898efad264ec 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -20,8 +20,13 @@
 
 ## Summary
 
-<!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? -->
+<!--
+ Explain the **motivation** for making this change. What existing problem does the pull request solve?
+-->
 
-## Test Plan
+## How did you test your 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. -->
+<!--
+  Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface.
+  If you leave this empty, your PR will very likely be closed.
+-->

From 6f64eb5aa0cd8d56e71cb3338c9bc49c9d5f32d2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 6 Sep 2021 20:36:46 +0100
Subject: [PATCH 0820/1603] Update PULL_REQUEST_TEMPLATE.md

---
 .github/PULL_REQUEST_TEMPLATE.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 898efad264ec..15ea79cb5c76 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -24,7 +24,7 @@
  Explain the **motivation** for making this change. What existing problem does the pull request solve?
 -->
 
-## How did you test your change?
+## 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.

From b394c38e880e1b3ee7ed03b26bc7c24f61827dbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= <info@michaeldeboey.be>
Date: Mon, 6 Sep 2021 21:42:40 +0200
Subject: [PATCH 0821/1603] feat(eslint-plugin-react-internal): support ESLint
 8.x (#22249)

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 .eslintrc.js                                  |   5 +-
 .../__tests__/invariant-args-test.internal.js |   2 +-
 .../no-cross-fork-imports-test.internal.js    |   2 +-
 .../no-cross-fork-types-test.internal.js      |   2 +-
 ...no-primitive-constructors-test.internal.js |   2 +-
 .../no-production-logging-test.internal.js    |   2 +-
 ...-warn-dev-within-to-throw-test.internal.js |   2 +-
 .../__tests__/warning-args-test.internal.js   |   2 +-
 scripts/eslint-rules/invariant-args.js        | 151 +++++++++---------
 scripts/eslint-rules/no-cross-fork-types.js   |   1 -
 .../eslint-rules/no-primitive-constructors.js |  75 +++++----
 scripts/eslint-rules/no-production-logging.js |   1 +
 .../no-to-warn-dev-within-to-throw.js         |  47 +++---
 scripts/eslint-rules/warning-args.js          | 139 ++++++++--------
 14 files changed, 226 insertions(+), 207 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 62db4c47c000..a155becfafb6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -183,7 +183,10 @@ module.exports = {
       },
     },
     {
-      files: ['packages/eslint-plugin-react-hooks/src/*.js'],
+      files: [
+        'scripts/eslint-rules/*.js',
+        'packages/eslint-plugin-react-hooks/src/*.js'
+      ],
       plugins: ['eslint-plugin'],
       rules: {
         'eslint-plugin/prefer-object-rule': ERROR,
diff --git a/scripts/eslint-rules/__tests__/invariant-args-test.internal.js b/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
index eb84d8dd45a9..c36171a62c1d 100644
--- a/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
+++ b/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const rule = require('../invariant-args');
-const RuleTester = require('eslint').RuleTester;
+const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester();
 
 ruleTester.run('eslint-rules/invariant-args', rule, {
diff --git a/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js b/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js
index 2adfc9a9f9cd..40ba3a2b42e5 100644
--- a/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-cross-fork-imports-test.internal.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const rule = require('../no-cross-fork-imports');
-const RuleTester = require('eslint').RuleTester;
+const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester({
   parserOptions: {
     ecmaVersion: 8,
diff --git a/scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js b/scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js
index 93a3c7e663e4..daf40a1bd22c 100644
--- a/scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-cross-fork-types-test.internal.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const rule = require('../no-cross-fork-types');
-const RuleTester = require('eslint').RuleTester;
+const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester({
   parserOptions: {
     ecmaVersion: 8,
diff --git a/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
index c440b30920f3..67cee01439a2 100644
--- a/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const rule = require('../no-primitive-constructors');
-const RuleTester = require('eslint').RuleTester;
+const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester();
 
 ruleTester.run('eslint-rules/no-primitive-constructors', rule, {
diff --git a/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js b/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js
index 81dc18b7e639..ea5c2fc8a2ab 100644
--- a/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-production-logging-test.internal.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const rule = require('../no-production-logging');
-const RuleTester = require('eslint').RuleTester;
+const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester();
 
 ruleTester.run('no-production-logging', rule, {
diff --git a/scripts/eslint-rules/__tests__/no-to-warn-dev-within-to-throw-test.internal.js b/scripts/eslint-rules/__tests__/no-to-warn-dev-within-to-throw-test.internal.js
index 3a0da89f04fb..35c7bc2e8481 100644
--- a/scripts/eslint-rules/__tests__/no-to-warn-dev-within-to-throw-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-to-warn-dev-within-to-throw-test.internal.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const rule = require('../no-to-warn-dev-within-to-throw');
-const RuleTester = require('eslint').RuleTester;
+const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester();
 
 ruleTester.run('eslint-rules/no-to-warn-dev-within-to-throw', rule, {
diff --git a/scripts/eslint-rules/__tests__/warning-args-test.internal.js b/scripts/eslint-rules/__tests__/warning-args-test.internal.js
index 66f51fc717c5..e8cdc9161cae 100644
--- a/scripts/eslint-rules/__tests__/warning-args-test.internal.js
+++ b/scripts/eslint-rules/__tests__/warning-args-test.internal.js
@@ -10,7 +10,7 @@
 'use strict';
 
 const rule = require('../warning-args');
-const RuleTester = require('eslint').RuleTester;
+const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester();
 
 ruleTester.run('eslint-rules/warning-args', rule, {
diff --git a/scripts/eslint-rules/invariant-args.js b/scripts/eslint-rules/invariant-args.js
index 4f1b336f600d..dd1bb201ec1f 100644
--- a/scripts/eslint-rules/invariant-args.js
+++ b/scripts/eslint-rules/invariant-args.js
@@ -24,83 +24,86 @@ Object.keys(existingErrorMap).forEach(key =>
  * argument.
  */
 
-module.exports = function(context) {
-  // we also allow literal strings and concatenated literal strings
-  function getLiteralString(node) {
-    if (node.type === 'Literal' && typeof node.value === 'string') {
-      return node.value;
-    } else if (node.type === 'BinaryExpression' && node.operator === '+') {
-      const l = getLiteralString(node.left);
-      const r = getLiteralString(node.right);
-      if (l !== null && r !== null) {
-        return l + r;
+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 null;
-  }
 
-  return {
-    CallExpression: function(node) {
-      // This could be a little smarter by checking context.getScope() to see
-      // how warning/invariant was defined.
-      const isInvariant =
-        node.callee.type === 'Identifier' && node.callee.name === 'invariant';
-      if (!isInvariant) {
-        return;
-      }
-      if (node.arguments.length < 2) {
-        context.report(node, '{{name}} takes at least two arguments', {
-          name: node.callee.name,
-        });
-        return;
-      }
-      const format = getLiteralString(node.arguments[1]);
-      if (format === null) {
-        context.report(
-          node,
-          'The second argument to {{name}} must be a string literal',
-          {name: node.callee.name}
-        );
-        return;
-      }
-      if (format.length < 10 || /^[s\W]*$/.test(format)) {
-        context.report(
-          node,
-          'The {{name}} format should be able to uniquely identify this ' +
-            '{{name}}. Please, use a more descriptive format than: {{format}}',
-          {name: node.callee.name, format: format}
-        );
-        return;
-      }
-      // count the number of formatting substitutions, plus the first two args
-      const expectedNArgs = (format.match(/%s/g) || []).length + 2;
-      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,
+    return {
+      CallExpression: function(node) {
+        // This could be a little smarter by checking context.getScope() to see
+        // how warning/invariant was defined.
+        const isInvariant =
+          node.callee.type === 'Identifier' && node.callee.name === 'invariant';
+        if (!isInvariant) {
+          return;
+        }
+        if (node.arguments.length < 2) {
+          context.report(node, '{{name}} takes at least two arguments', {
             name: node.callee.name,
-            length: node.arguments.length,
-          }
-        );
-      }
+          });
+          return;
+        }
+        const format = getLiteralString(node.arguments[1]);
+        if (format === null) {
+          context.report(
+            node,
+            'The second argument to {{name}} must be a string literal',
+            {name: node.callee.name}
+          );
+          return;
+        }
+        if (format.length < 10 || /^[s\W]*$/.test(format)) {
+          context.report(
+            node,
+            'The {{name}} format should be able to uniquely identify this ' +
+              '{{name}}. Please, use a more descriptive format than: {{format}}',
+            {name: node.callee.name, format: format}
+          );
+          return;
+        }
+        // count the number of formatting substitutions, plus the first two args
+        const expectedNArgs = (format.match(/%s/g) || []).length + 2;
+        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: node.callee.name,
+              length: node.arguments.length,
+            }
+          );
+        }
 
-      if (!messages.has(format)) {
-        context.report(
-          node,
-          'Error message does not have a corresponding production ' +
-            'error code.\n\n' +
-            'Run `yarn extract-errors` to add the message to error code ' +
-            'map, so it can be stripped from the production builds. ' +
-            "Alternatively, if you're updating an existing error " +
-            'message, you can modify ' +
-            '`scripts/error-codes/codes.json` directly.'
-        );
-      }
-    },
-  };
+        if (!messages.has(format)) {
+          context.report(
+            node,
+            'Error message does not have a corresponding production ' +
+              'error code.\n\n' +
+              'Run `yarn extract-errors` to add the message to error code ' +
+              'map, so it can be stripped from the production builds. ' +
+              "Alternatively, if you're updating an existing error " +
+              'message, you can modify ' +
+              '`scripts/error-codes/codes.json` directly.'
+          );
+        }
+      },
+    };
+  },
 };
-
-module.exports.schema = [];
diff --git a/scripts/eslint-rules/no-cross-fork-types.js b/scripts/eslint-rules/no-cross-fork-types.js
index eaa9f07d74e0..1590178f7792 100644
--- a/scripts/eslint-rules/no-cross-fork-types.js
+++ b/scripts/eslint-rules/no-cross-fork-types.js
@@ -46,7 +46,6 @@ function warnIfOldField(context, oldFields, identifier) {
 module.exports = {
   meta: {
     type: 'problem',
-    fixable: 'code',
   },
   create(context) {
     const sourceFilename = context.getFilename();
diff --git a/scripts/eslint-rules/no-primitive-constructors.js b/scripts/eslint-rules/no-primitive-constructors.js
index 51ddde284e74..bbba8ccd54fd 100644
--- a/scripts/eslint-rules/no-primitive-constructors.js
+++ b/scripts/eslint-rules/no-primitive-constructors.js
@@ -9,42 +9,47 @@
 
 'use strict';
 
-module.exports = function(context) {
-  function report(node, name, msg) {
-    context.report(node, `Do not use the ${name} constructor. ${msg}`);
-  }
+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':
-        report(
-          node,
-          name,
-          'To cast a value to a string, concat it with the empty string ' +
-            "(unless it's a symbol, which has different semantics): " +
-            "'' + value"
-        );
-        break;
-      case 'Number':
-        report(
-          node,
-          name,
-          'To cast a value to a number, use the plus operator: +value'
-        );
-        break;
+    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':
+          report(
+            node,
+            name,
+            'To cast a value to a string, concat it with the empty string ' +
+              "(unless it's a symbol, which has different semantics): " +
+              "'' + value"
+          );
+          break;
+        case 'Number':
+          report(
+            node,
+            name,
+            'To cast a value to a number, use the plus operator: +value'
+          );
+          break;
+      }
     }
-  }
 
-  return {
-    CallExpression: check,
-    NewExpression: check,
-  };
+    return {
+      CallExpression: check,
+      NewExpression: check,
+    };
+  },
 };
diff --git a/scripts/eslint-rules/no-production-logging.js b/scripts/eslint-rules/no-production-logging.js
index ae6d909f1942..26f72db39c14 100644
--- a/scripts/eslint-rules/no-production-logging.js
+++ b/scripts/eslint-rules/no-production-logging.js
@@ -12,6 +12,7 @@
 module.exports = {
   meta: {
     fixable: 'code',
+    schema: [],
   },
   create: function(context) {
     function isInDEVBlock(node) {
diff --git a/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js b/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js
index ff83f4e1bced..dd272ad4f686 100644
--- a/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js
+++ b/scripts/eslint-rules/no-to-warn-dev-within-to-throw.js
@@ -9,28 +9,33 @@
 
 'use strict';
 
-module.exports = function(context) {
-  return {
-    Identifier(node) {
-      if (node.name === 'toWarnDev' || node.name === 'toErrorDev') {
-        let current = node;
-        while (current.parent) {
-          if (current.type === 'CallExpression') {
-            if (
-              current &&
-              current.callee &&
-              current.callee.property &&
-              current.callee.property.name === 'toThrow'
-            ) {
-              context.report(
-                node,
-                node.name + '() matcher should not be nested'
-              );
+module.exports = {
+  meta: {
+    schema: [],
+  },
+  create(context) {
+    return {
+      Identifier(node) {
+        if (node.name === 'toWarnDev' || node.name === 'toErrorDev') {
+          let current = node;
+          while (current.parent) {
+            if (current.type === 'CallExpression') {
+              if (
+                current &&
+                current.callee &&
+                current.callee.property &&
+                current.callee.property.name === 'toThrow'
+              ) {
+                context.report(
+                  node,
+                  node.name + '() matcher should not be nested'
+                );
+              }
             }
+            current = current.parent;
           }
-          current = current.parent;
         }
-      }
-    },
-  };
+      },
+    };
+  },
 };
diff --git a/scripts/eslint-rules/warning-args.js b/scripts/eslint-rules/warning-args.js
index b3cd6cbc3805..41a709c67774 100644
--- a/scripts/eslint-rules/warning-args.js
+++ b/scripts/eslint-rules/warning-args.js
@@ -24,76 +24,79 @@ Object.keys(existingErrorMap).forEach(key =>
  * argument.
  */
 
-module.exports = function(context) {
-  // we also allow literal strings and concatenated literal strings
-  function getLiteralString(node) {
-    if (node.type === 'Literal' && typeof node.value === 'string') {
-      return node.value;
-    } else if (node.type === 'BinaryExpression' && node.operator === '+') {
-      const l = getLiteralString(node.left);
-      const r = getLiteralString(node.right);
-      if (l !== null && r !== null) {
-        return l + r;
+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 null;
-  }
 
-  return {
-    CallExpression: function(node) {
-      // This could be a little smarter by checking context.getScope() to see
-      // how warning/invariant was defined.
-      const isWarning =
-        node.callee.type === 'MemberExpression' &&
-        node.callee.object.type === 'Identifier' &&
-        node.callee.object.name === 'console' &&
-        node.callee.property.type === 'Identifier' &&
-        (node.callee.property.name === 'error' ||
-          node.callee.property.name === 'warn');
-      if (!isWarning) {
-        return;
-      }
-      const name = 'console.' + node.callee.property.name;
-      if (node.arguments.length < 1) {
-        context.report(node, '{{name}} takes at least one argument', {
-          name,
-        });
-        return;
-      }
-      const format = getLiteralString(node.arguments[0]);
-      if (format === null) {
-        context.report(
-          node,
-          'The first argument to {{name}} must be a string literal',
-          {name}
-        );
-        return;
-      }
-      if (format.length < 10 || /^[s\W]*$/.test(format)) {
-        context.report(
-          node,
-          'The {{name}} format should be able to uniquely identify this ' +
-            'warning. Please, use a more descriptive format than: {{format}}',
-          {name, format}
-        );
-        return;
-      }
-      // count the number of formatting substitutions, plus the first two args
-      const expectedNArgs = (format.match(/%s/g) || []).length + 1;
-      if (node.arguments.length !== expectedNArgs) {
-        context.report(
-          node,
-          'Expected {{expectedNArgs}} arguments in call to {{name}} based on ' +
-            'the number of "%s" substitutions, but got {{length}}',
-          {
-            expectedNArgs: expectedNArgs,
+    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,
-            length: node.arguments.length,
-          }
-        );
-      }
-    },
-  };
+          });
+          return;
+        }
+        const format = getLiteralString(node.arguments[0]);
+        if (format === null) {
+          context.report(
+            node,
+            'The first argument to {{name}} must be a string literal',
+            {name}
+          );
+          return;
+        }
+        if (format.length < 10 || /^[s\W]*$/.test(format)) {
+          context.report(
+            node,
+            'The {{name}} format should be able to uniquely identify this ' +
+              'warning. Please, use a more descriptive format than: {{format}}',
+            {name, format}
+          );
+          return;
+        }
+        // count the number of formatting substitutions, plus the first two args
+        const expectedNArgs = (format.match(/%s/g) || []).length + 1;
+        if (node.arguments.length !== expectedNArgs) {
+          context.report(
+            node,
+            'Expected {{expectedNArgs}} arguments in call to {{name}} based on ' +
+              'the number of "%s" substitutions, but got {{length}}',
+            {
+              expectedNArgs: expectedNArgs,
+              name,
+              length: node.arguments.length,
+            }
+          );
+        }
+      },
+    };
+  },
 };
-
-module.exports.schema = [];

From 37abc9941835e483e609366fe3dba1463eddd9d9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 6 Sep 2021 21:00:36 +0100
Subject: [PATCH 0822/1603] Build ReactDOMServer on CodeSandbox CI (#22255)

---
 .codesandbox/ci.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 8750763b5c21..e0a23e13761b 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,6 +1,6 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/server,react-dom/test-utils,scheduler/index,react/jsx-runtime,react/jsx-dev-runtime",
+  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/src/server,react-dom/test-utils,scheduler/index,react/jsx-runtime,react/jsx-dev-runtime",
   "node": "12",
   "publishDirectory": {
     "react": "build/node_modules/react",

From 6d6bba5bfc4f62da38ae5ae2c24748cbaa10e6a9 Mon Sep 17 00:00:00 2001
From: Ikko Ashimine <eltociear@gmail.com>
Date: Tue, 7 Sep 2021 05:16:05 +0900
Subject: [PATCH 0823/1603] Fix typo in ReactUpdatePriority-test.js (#21958)

continous -> continuous
---
 .../react-reconciler/src/__tests__/ReactUpdatePriority-test.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
index a63beb1ed5db..4e3b44df255d 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
@@ -124,7 +124,7 @@ describe('ReactUpdatePriority', () => {
       });
     });
     expect(Scheduler).toHaveYielded([
-      // Because the hide update has continous priority, it should interrupt the
+      // 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

From b8884de24e2ca7ff2c05d9c5e9d06470816b60c2 Mon Sep 17 00:00:00 2001
From: Jianhua Zheng <michael2ib1989@gmail.com>
Date: Tue, 7 Sep 2021 04:20:33 +0800
Subject: [PATCH 0824/1603] break up import keyword to avoid being accidentally
 parsed as dynamic import statement in external code (#21918)

Co-authored-by: zhengjianhua <zhengjianhua.michael@bytedance.com>
---
 packages/react/src/ReactLazy.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index 0bc05df6411c..a132e1b5691f 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -88,7 +88,8 @@ function lazyInitializer<T>(payload: Payload<T>): T {
     if (__DEV__) {
       if (moduleObject === undefined) {
         console.error(
-          'lazy: Expected the result of a dynamic import() call. ' +
+          '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' +
@@ -101,7 +102,8 @@ function lazyInitializer<T>(payload: Payload<T>): T {
     if (__DEV__) {
       if (!('default' in moduleObject)) {
         console.error(
-          'lazy: Expected the result of a dynamic import() call. ' +
+          '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' +

From d1f51f34535d00b5985744b0acb45c7f35ab90c6 Mon Sep 17 00:00:00 2001
From: Ryota Murakami <dojce1048@gmail.com>
Date: Tue, 7 Sep 2021 05:23:13 +0900
Subject: [PATCH 0825/1603] [package:react-dom] updateREADME's Class Component
 to Function Component (#21829)

* [package:react-dom] updateREADME's Class Component to Function Component

* Update README.md

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 packages/react-dom/README.md | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/README.md b/packages/react-dom/README.md
index 2652912f9992..f31dc407837b 100644
--- a/packages/react-dom/README.md
+++ b/packages/react-dom/README.md
@@ -16,10 +16,8 @@ npm install react react-dom
 var React = require('react');
 var ReactDOM = require('react-dom');
 
-class MyComponent extends React.Component {
-  render() {
-    return <div>Hello World</div>;
-  }
+function MyComponent() {
+  return <div>Hello World</div>;
 }
 
 ReactDOM.render(<MyComponent />, node);
@@ -31,10 +29,8 @@ ReactDOM.render(<MyComponent />, node);
 var React = require('react');
 var ReactDOMServer = require('react-dom/server');
 
-class MyComponent extends React.Component {
-  render() {
-    return <div>Hello World</div>;
-  }
+function MyComponent() {
+  return <div>Hello World</div>;
 }
 
 ReactDOMServer.renderToString(<MyComponent />);

From 771da6e27ba196cd0c5f3472164a0221b4d8a690 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 7 Sep 2021 07:54:34 +0100
Subject: [PATCH 0826/1603] Update PULL_REQUEST_TEMPLATE.md

---
 .github/PULL_REQUEST_TEMPLATE.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 15ea79cb5c76..21ff46dbab29 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -28,5 +28,6 @@
 
 <!--
   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.
 -->

From abbc79d6fdaf4802951f52270b757c068cebe826 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 7 Sep 2021 10:39:55 -0400
Subject: [PATCH 0827/1603] [DevTools] Only call originalPositionFor once
 (#22181)

---
 .../parseHookNames/parseSourceAndMetadata.js  | 114 ++++++++++--------
 1 file changed, 66 insertions(+), 48 deletions(-)

diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js
index 143498c7e54c..967576d659f1 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js
+++ b/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js
@@ -47,6 +47,12 @@ type HookParsedMetadata = {|
   // 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,
+
   // APIs from source-map for parsing source maps (if detected).
   sourceConsumer: SourceConsumer | null,
 |};
@@ -151,47 +157,18 @@ function findHookNames(
       return null; // Should not be reachable.
     }
 
-    const {originalSourceURL, sourceConsumer} = hookParsedMetadata;
-
-    let originalSourceColumnNumber;
-    let originalSourceLineNumber;
-    if (areSourceMapsAppliedToErrors() || !sourceConsumer) {
-      // 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;
-    } else {
-      // TODO (named hooks) Refactor this read, github.com/facebook/react/pull/22181
-      const position = withSyncPerformanceMark(
-        'sourceConsumer.originalPositionFor()',
-        () =>
-          sourceConsumer.originalPositionFor({
-            line: lineNumber,
-
-            // Column numbers are represented differently between tools/engines.
-            // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
-            // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
-            column: columnNumber - 1,
-          }),
-      );
-
-      originalSourceColumnNumber = position.column;
-      originalSourceLineNumber = position.line;
-    }
-
-    if (__DEBUG__) {
-      console.log(
-        `findHookNames() mapped line ${lineNumber}->${originalSourceLineNumber} and column ${columnNumber}->${originalSourceColumnNumber}`,
-      );
-    }
+    const {
+      originalSourceURL,
+      originalSourceColumnNumber,
+      originalSourceLineNumber,
+    } = hookParsedMetadata;
 
     if (
       originalSourceLineNumber == null ||
       originalSourceColumnNumber == null ||
       originalSourceURL == null
     ) {
-      return null;
+      return null; // Should not be reachable.
     }
 
     let name;
@@ -241,6 +218,8 @@ function initializeHookParsedMetadata(
         originalSourceAST: null,
         originalSourceCode: null,
         originalSourceURL: null,
+        originalSourceLineNumber: null,
+        originalSourceColumnNumber: null,
         sourceConsumer: null,
       };
 
@@ -286,21 +265,45 @@ function parseSourceAST(
         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, sourceConsumer} = hookParsedMetadata;
       const runtimeSourceCode = ((hookSourceAndMetadata.runtimeSourceCode: any): string);
       let hasHookMap = false;
       let originalSourceURL;
       let originalSourceCode;
-      if (sourceConsumer !== null) {
+      let originalSourceColumnNumber;
+      let originalSourceLineNumber;
+      if (areSourceMapsAppliedToErrors() || sourceConsumer == 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 {
         // Parse and extract the AST from the source map.
-        const {lineNumber, columnNumber} = hookSourceAndMetadata.hookSource;
-        if (lineNumber == null || columnNumber == null) {
-          throw Error('Hook source code location not found.');
-        }
         // Now that the source map has been loaded,
         // extract the original source for later.
         // TODO (named hooks) Refactor this read, github.com/facebook/react/pull/22181
-        const {source} = withSyncPerformanceMark(
+        const {column, line, source} = withSyncPerformanceMark(
           'sourceConsumer.originalPositionFor()',
           () =>
             sourceConsumer.originalPositionFor({
@@ -320,6 +323,8 @@ function parseSourceAST(
           );
         }
 
+        originalSourceColumnNumber = column;
+        originalSourceLineNumber = line;
         // TODO (named hooks) maybe canonicalize this URL somehow?
         // It can be relative if the source map specifies it that way,
         // but we use it as a cache key across different source maps and there can be collisions.
@@ -331,7 +336,7 @@ function parseSourceAST(
 
         if (__DEBUG__) {
           console.groupCollapsed(
-            'parseSourceAST() Extracted source code from source map',
+            `parseSourceAST() Extracted source code from source map for "${originalSourceURL}"`,
           );
           console.log(originalSourceCode);
           console.groupEnd();
@@ -343,24 +348,37 @@ function parseSourceAST(
         ) {
           hasHookMap = true;
         }
-      } else {
-        // 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;
+      }
+
+      if (__DEBUG__) {
+        console.log(
+          `parseSourceAST() mapped line ${lineNumber}->${originalSourceLineNumber} and column ${columnNumber}->${originalSourceColumnNumber}`,
+        );
       }
 
       hookParsedMetadata.originalSourceCode = originalSourceCode;
       hookParsedMetadata.originalSourceURL = originalSourceURL;
+      hookParsedMetadata.originalSourceLineNumber = originalSourceLineNumber;
+      hookParsedMetadata.originalSourceColumnNumber = 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);

From e07039bb61e3d006ad552ab7754acbc91f7b8619 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 Sep 2021 11:44:49 -0400
Subject: [PATCH 0828/1603] Moved named hooks code (and tests) from
 react-devtools-extensions to react-devtools-shared (#22260)

---
 .eslintignore                                 |   4 +-
 .prettierignore                               |   4 +-
 .../react-devtools-extensions/package.json    |   5 +-
 .../ComponentUsingHooksIndirectly.js.map      |   1 -
 .../external/ComponentWithCustomHook.js.map   |   1 -
 .../ComponentWithExternalCustomHooks.js.map   |   1 -
 .../ContainingStringSourceMappingURL.js.map   |   1 -
 .../__compiled__/external/Example.js.map      |   1 -
 .../__compiled__/external/ToDoList.js.map     |   1 -
 .../ComponentUsingHooksIndirectly.js.map      |   1 -
 .../ComponentWithCustomHook.js.map            |   1 -
 .../ComponentWithExternalCustomHooks.js.map   |   1 -
 .../ContainingStringSourceMappingURL.js.map   |   1 -
 .../fb-sources-extended/Example.js.map        |   1 -
 .../fb-sources-extended/ToDoList.js.map       |   1 -
 .../ComponentUsingHooksIndirectly.js.map      |   1 -
 .../index-map/ComponentWithCustomHook.js.map  |   1 -
 .../ComponentWithExternalCustomHooks.js.map   |   1 -
 .../ContainingStringSourceMappingURL.js.map   |   1 -
 .../index-map/Example.js.map                  |   1 -
 .../index-map/ToDoList.js.map                 |   1 -
 .../ComponentUsingHooksIndirectly.js.map      |   1 -
 .../index-map/ComponentWithCustomHook.js.map  |   1 -
 .../ComponentWithExternalCustomHooks.js.map   |   1 -
 .../ContainingStringSourceMappingURL.js.map   |   1 -
 .../external/index-map/Example.js.map         |   1 -
 .../external/index-map/ToDoList.js.map        |   1 -
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../ComponentUsingHooksIndirectly.js.map      |   1 -
 .../ComponentWithCustomHook.js                |  51 ----
 .../ComponentWithCustomHook.js.map            |   1 -
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ComponentWithExternalCustomHooks.js.map   |   1 -
 .../ComponentWithMultipleHooksPerLine.js      |  30 ---
 .../ComponentWithNestedHooks.js               |  28 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../ContainingStringSourceMappingURL.js.map   |   1 -
 .../react-sources-extended/Example.js         |  28 --
 .../react-sources-extended/Example.js.map     |   1 -
 .../react-sources-extended/InlineRequire.js   |  21 --
 .../react-sources-extended/ToDoList.js        | 106 --------
 .../react-sources-extended/ToDoList.js.map    |   1 -
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../ComponentUsingHooksIndirectly.js.map      |   1 -
 .../index-map/ComponentWithCustomHook.js      |  51 ----
 .../index-map/ComponentWithCustomHook.js.map  |   1 -
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ComponentWithExternalCustomHooks.js.map   |   1 -
 .../ComponentWithMultipleHooksPerLine.js      |  30 ---
 .../index-map/ComponentWithNestedHooks.js     |  28 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../ContainingStringSourceMappingURL.js.map   |   1 -
 .../index-map/Example.js                      |  28 --
 .../index-map/Example.js.map                  |   1 -
 .../index-map/InlineRequire.js                |  21 --
 .../index-map/ToDoList.js                     | 106 --------
 .../index-map/ToDoList.js.map                 |   1 -
 .../react-sources-extended/useTheme.js        |  27 --
 .../__compiled__/external/useTheme.js         |  27 --
 .../inline/ComponentUsingHooksIndirectly.js   |  45 ----
 .../inline/ComponentWithCustomHook.js         |  51 ----
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../__source__/__compiled__/inline/Example.js |  28 --
 .../__compiled__/inline/ToDoList.js           | 106 --------
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../ComponentWithCustomHook.js                |  51 ----
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../inline/fb-sources-extended/Example.js     |  28 --
 .../inline/fb-sources-extended/ToDoList.js    | 106 --------
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../index-map/ComponentWithCustomHook.js      |  51 ----
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../fb-sources-extended/index-map/Example.js  |  28 --
 .../fb-sources-extended/index-map/ToDoList.js | 106 --------
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../index-map/ComponentWithCustomHook.js      |  51 ----
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../__compiled__/inline/index-map/Example.js  |  28 --
 .../__compiled__/inline/index-map/ToDoList.js | 106 --------
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../ComponentWithCustomHook.js                |  51 ----
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../inline/react-sources-extended/Example.js  |  28 --
 .../inline/react-sources-extended/ToDoList.js | 106 --------
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../index-map/ComponentWithCustomHook.js      |  51 ----
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../index-map/Example.js                      |  28 --
 .../index-map/ToDoList.js                     | 106 --------
 .../ComponentUsingHooksIndirectly.js          |  45 ----
 .../no-columns/ComponentWithCustomHook.js     |  51 ----
 .../ComponentWithExternalCustomHooks.js       |  26 --
 .../ContainingStringSourceMappingURL.js       |  29 ---
 .../__compiled__/no-columns/Example.js        |  28 --
 .../__compiled__/no-columns/ToDoList.js       | 106 --------
 .../react-devtools-extensions/src/main.js     |   2 +-
 packages/react-devtools-shared/package.json   |   5 +
 .../src/hooks}/ErrorTester.js                 |   0
 .../src/hooks}/ErrorTesterCompiled.js         |   8 +-
 .../src/hooks}/SourceMapMetadataConsumer.js   |   0
 .../src/hooks}/SourceMapTypes.js              |   0
 .../src/hooks}/SourceMapUtils.js              |   0
 .../ComponentUsingHooksIndirectly.js          |   0
 .../__source__/ComponentWithCustomHook.js     |   0
 .../ComponentWithExternalCustomHooks.js       |   0
 .../ComponentWithMultipleHooksPerLine.js      |   0
 .../__source__/ComponentWithNestedHooks.js    |   0
 .../ContainingStringSourceMappingURL.js       |   0
 .../hooks}/__tests__/__source__/Example.js    |   0
 .../__tests__/__source__/InlineRequire.js     |   0
 .../src/hooks}/__tests__/__source__/README.md |   0
 .../hooks}/__tests__/__source__/ToDoList.js   |   0
 .../__source__/__compiled__/bundle/index.js   | 240 ++++++++++++------
 .../__compiled__/bundle/index.js.map          |   2 +-
 .../ComponentUsingHooksIndirectly.js          |  31 ++-
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../external/ComponentWithCustomHook.js       |  37 ++-
 .../external/ComponentWithCustomHook.js.map   |   1 +
 .../ComponentWithExternalCustomHooks.js       |  18 +-
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../ComponentWithMultipleHooksPerLine.js.map  |   0
 .../external}/ComponentWithNestedHooks.js     |   2 +-
 .../external/ComponentWithNestedHooks.js.map  |   0
 .../ContainingStringSourceMappingURL.js       |  31 ++-
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../__compiled__/external}/Example.js         |  31 ++-
 .../__compiled__/external/Example.js.map      |   1 +
 .../__compiled__/external}/InlineRequire.js   |   2 +-
 .../external/InlineRequire.js.map             |   0
 .../__compiled__/external}/ToDoList.js        |  90 +++++--
 .../__compiled__/external/ToDoList.js.map     |   1 +
 .../ComponentUsingHooksIndirectly.js          |  31 ++-
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../ComponentWithCustomHook.js                |  37 ++-
 .../ComponentWithCustomHook.js.map            |   1 +
 .../ComponentWithExternalCustomHooks.js       |  18 +-
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../ComponentWithMultipleHooksPerLine.js.map  |   0
 .../ComponentWithNestedHooks.js               |   2 +-
 .../ComponentWithNestedHooks.js.map           |   0
 .../ContainingStringSourceMappingURL.js       |  31 ++-
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../external/fb-sources-extended}/Example.js  |  31 ++-
 .../fb-sources-extended/Example.js.map        |   1 +
 .../fb-sources-extended/InlineRequire.js      |   2 +-
 .../fb-sources-extended/InlineRequire.js.map  |   0
 .../external/fb-sources-extended}/ToDoList.js |  90 +++++--
 .../fb-sources-extended/ToDoList.js.map       |   1 +
 .../ComponentUsingHooksIndirectly.js          |  31 ++-
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../index-map/ComponentWithCustomHook.js      |  37 ++-
 .../index-map/ComponentWithCustomHook.js.map  |   1 +
 .../ComponentWithExternalCustomHooks.js       |  18 +-
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../ComponentWithMultipleHooksPerLine.js.map  |   0
 .../index-map}/ComponentWithNestedHooks.js    |   2 +-
 .../index-map/ComponentWithNestedHooks.js.map |   0
 .../ContainingStringSourceMappingURL.js       |  31 ++-
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../fb-sources-extended/index-map}/Example.js |  31 ++-
 .../index-map/Example.js.map                  |   1 +
 .../index-map/InlineRequire.js                |   2 +-
 .../index-map/InlineRequire.js.map            |   0
 .../index-map}/ToDoList.js                    |  90 +++++--
 .../index-map/ToDoList.js.map                 |   1 +
 .../fb-sources-extended/index-map/index.js    |   0
 .../index-map/index.js.map                    |   0
 .../index-map}/useTheme.js                    |   2 +-
 .../index-map/useTheme.js.map                 |   0
 .../external/fb-sources-extended/index.js     |   0
 .../external/fb-sources-extended/index.js.map |   0
 .../external/fb-sources-extended}/useTheme.js |   2 +-
 .../fb-sources-extended/useTheme.js.map       |   0
 .../ComponentUsingHooksIndirectly.js          |  31 ++-
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../index-map}/ComponentWithCustomHook.js     |  37 ++-
 .../index-map/ComponentWithCustomHook.js.map  |   1 +
 .../ComponentWithExternalCustomHooks.js       |  18 +-
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../ComponentWithMultipleHooksPerLine.js.map  |   0
 .../index-map/ComponentWithNestedHooks.js     |   2 +-
 .../index-map/ComponentWithNestedHooks.js.map |   0
 .../ContainingStringSourceMappingURL.js       |  31 ++-
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../external/index-map}/Example.js            |  31 ++-
 .../external/index-map/Example.js.map         |   1 +
 .../external/index-map}/InlineRequire.js      |   2 +-
 .../external/index-map/InlineRequire.js.map   |   0
 .../external}/index-map/ToDoList.js           |  90 +++++--
 .../external/index-map/ToDoList.js.map        |   1 +
 .../__compiled__/external/index-map/index.js  |   0
 .../external/index-map/index.js.map           |   0
 .../external/index-map/useTheme.js            |   2 +-
 .../external/index-map/useTheme.js.map        |   0
 .../__source__/__compiled__/external/index.js |   0
 .../__compiled__/external/index.js.map        |   0
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../ComponentWithCustomHook.js                |  68 +++++
 .../ComponentWithCustomHook.js.map            |   1 +
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |  30 +++
 .../ComponentWithMultipleHooksPerLine.js.map  |   0
 .../ComponentWithNestedHooks.js               |  28 ++
 .../ComponentWithNestedHooks.js.map           |   0
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../react-sources-extended/Example.js         |  39 +++
 .../react-sources-extended/Example.js.map     |   1 +
 .../react-sources-extended/InlineRequire.js   |  21 ++
 .../InlineRequire.js.map                      |   0
 .../react-sources-extended/ToDoList.js        | 160 ++++++++++++
 .../react-sources-extended/ToDoList.js.map    |   1 +
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../ComponentUsingHooksIndirectly.js.map      |   1 +
 .../index-map/ComponentWithCustomHook.js      |  68 +++++
 .../index-map/ComponentWithCustomHook.js.map  |   1 +
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithExternalCustomHooks.js.map   |   1 +
 .../ComponentWithMultipleHooksPerLine.js      |  30 +++
 .../ComponentWithMultipleHooksPerLine.js.map  |   0
 .../index-map/ComponentWithNestedHooks.js     |  28 ++
 .../index-map/ComponentWithNestedHooks.js.map |   0
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../ContainingStringSourceMappingURL.js.map   |   1 +
 .../index-map/Example.js                      |  39 +++
 .../index-map/Example.js.map                  |   1 +
 .../index-map/InlineRequire.js                |  21 ++
 .../index-map/InlineRequire.js.map            |   0
 .../index-map/ToDoList.js                     | 160 ++++++++++++
 .../index-map/ToDoList.js.map                 |   1 +
 .../react-sources-extended/index-map/index.js |   0
 .../index-map/index.js.map                    |   0
 .../index-map/useTheme.js                     |   2 +-
 .../index-map/useTheme.js.map                 |   0
 .../external/react-sources-extended/index.js  |   0
 .../react-sources-extended/index.js.map       |   0
 .../react-sources-extended/useTheme.js        |  27 ++
 .../react-sources-extended/useTheme.js.map    |   0
 .../__compiled__/external/useTheme.js         |  27 ++
 .../__compiled__/external/useTheme.js.map     |   0
 .../inline/ComponentUsingHooksIndirectly.js   |  56 ++++
 .../inline/ComponentWithCustomHook.js         |  68 +++++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../inline/ComponentWithNestedHooks.js        |   2 +-
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../__source__/__compiled__/inline/Example.js |  39 +++
 .../__compiled__/inline/InlineRequire.js      |   2 +-
 .../__compiled__/inline/ToDoList.js           | 160 ++++++++++++
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../ComponentWithCustomHook.js                |  68 +++++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../ComponentWithNestedHooks.js               |   2 +-
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../inline/fb-sources-extended/Example.js     |  39 +++
 .../fb-sources-extended/InlineRequire.js      |   2 +-
 .../inline/fb-sources-extended/ToDoList.js    | 160 ++++++++++++
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../index-map/ComponentWithCustomHook.js      |  68 +++++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../index-map/ComponentWithNestedHooks.js     |   2 +-
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../fb-sources-extended/index-map/Example.js  |  39 +++
 .../index-map/InlineRequire.js                |   2 +-
 .../fb-sources-extended/index-map/ToDoList.js | 160 ++++++++++++
 .../fb-sources-extended/index-map/index.js    |   0
 .../fb-sources-extended/index-map/useTheme.js |   2 +-
 .../inline/fb-sources-extended/index.js       |   0
 .../inline/fb-sources-extended/useTheme.js    |   2 +-
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../index-map/ComponentWithCustomHook.js      |  68 +++++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../index-map/ComponentWithNestedHooks.js     |   2 +-
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../__compiled__/inline/index-map/Example.js  |  39 +++
 .../inline/index-map/InlineRequire.js         |   2 +-
 .../__compiled__/inline/index-map/ToDoList.js | 160 ++++++++++++
 .../__compiled__/inline/index-map/index.js    |   0
 .../__compiled__/inline/index-map/useTheme.js |   2 +-
 .../__source__/__compiled__/inline/index.js   |   0
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../ComponentWithCustomHook.js                |  68 +++++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../ComponentWithNestedHooks.js               |   2 +-
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../inline/react-sources-extended/Example.js  |  39 +++
 .../react-sources-extended/InlineRequire.js   |   2 +-
 .../inline/react-sources-extended/ToDoList.js | 160 ++++++++++++
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../index-map/ComponentWithCustomHook.js      |  68 +++++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../index-map/ComponentWithNestedHooks.js     |   2 +-
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../index-map/Example.js                      |  39 +++
 .../index-map/InlineRequire.js                |   2 +-
 .../index-map/ToDoList.js                     | 160 ++++++++++++
 .../react-sources-extended/index-map/index.js |   0
 .../index-map/useTheme.js                     |   2 +-
 .../inline/react-sources-extended/index.js    |   0
 .../inline/react-sources-extended/useTheme.js |   2 +-
 .../__compiled__/inline/useTheme.js           |   2 +-
 .../ComponentUsingHooksIndirectly.js          |  56 ++++
 .../no-columns/ComponentWithCustomHook.js     |  68 +++++
 .../ComponentWithExternalCustomHooks.js       |  26 ++
 .../ComponentWithMultipleHooksPerLine.js      |   2 +-
 .../no-columns/ComponentWithNestedHooks.js    |   2 +-
 .../ContainingStringSourceMappingURL.js       |  40 +++
 .../__compiled__/no-columns/Example.js        |  39 +++
 .../__compiled__/no-columns/InlineRequire.js  |   2 +-
 .../__compiled__/no-columns/ToDoList.js       | 160 ++++++++++++
 .../__compiled__/no-columns/index.js          |   0
 .../__compiled__/no-columns/useTheme.js       |   2 +-
 .../ComponentUsingHooksIndirectly.js          |   0
 .../ComponentWithExternalUseEffect.js         |   0
 .../ComponentWithNamedCustomHooks.js          |   0
 .../ComponentWithNestedHooks.js               |   0
 .../ComponentWithUnnamedCustomHooks.js        |   0
 .../ComponentWithUseEffect.js                 |   0
 .../ComponentWithUseReducer.js                |   0
 .../ComponentWithUseState.js                  |   0
 .../__source__/__untransformed__/README.md    |   0
 .../__source__/__untransformed__/useCustom.js |   0
 .../src/hooks}/__tests__/__source__/index.js  |   0
 .../hooks}/__tests__/__source__/useTheme.js   |   0
 .../hooks}/__tests__/generateHookMap-test.js  |   0
 .../__tests__/getHookNameForLocation-test.js  |   0
 .../hooks}/__tests__/parseHookNames-test.js   |   0
 .../hooks}/__tests__/updateMockSourceMaps.js  |   0
 .../src/hooks}/astUtils.js                    |   0
 .../src/hooks}/generateHookMap.js             |   0
 .../src/hooks}/getHookNameForLocation.js      |   0
 .../src/hooks}/parseHookNames/index.js        |   0
 .../parseHookNames/loadSourceAndMetadata.js   |   2 +-
 .../parseHookNames/parseSourceAndMetadata.js  |   0
 .../parseSourceAndMetadata.worker.js          |   0
 scripts/jest/config.build-devtools.js         |   3 +-
 353 files changed, 4664 insertions(+), 3213 deletions(-)
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js
 delete mode 100644 packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/ErrorTester.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/ErrorTesterCompiled.js (93%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/SourceMapMetadataConsumer.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/SourceMapTypes.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/SourceMapUtils.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/ComponentUsingHooksIndirectly.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/ComponentWithCustomHook.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/ComponentWithExternalCustomHooks.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/ComponentWithMultipleHooksPerLine.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/ComponentWithNestedHooks.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/ContainingStringSourceMappingURL.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/Example.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/InlineRequire.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/README.md (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/ToDoList.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/bundle/index.js (55%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/bundle/index.js.map (59%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/ComponentUsingHooksIndirectly.js (79%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js (73%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js (62%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/ComponentWithMultipleHooksPerLine.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/ComponentWithNestedHooks.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/ContainingStringSourceMappingURL.js (70%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/Example.js (69%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/InlineRequire.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/InlineRequire.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/ToDoList.js (65%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js (79%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/ComponentWithCustomHook.js (73%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/ComponentWithExternalCustomHooks.js (62%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/ComponentWithMultipleHooksPerLine.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/ComponentWithNestedHooks.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/ContainingStringSourceMappingURL.js (70%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/Example.js (69%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/ToDoList.js (65%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map}/ComponentUsingHooksIndirectly.js (79%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/index-map/ComponentWithCustomHook.js (73%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map}/ComponentWithExternalCustomHooks.js (62%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/index-map/ComponentWithMultipleHooksPerLine.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map}/ComponentWithNestedHooks.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js (70%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map}/Example.js (69%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/index-map/InlineRequire.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map}/ToDoList.js (65%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map}/useTheme.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended}/useTheme.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js (79%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map}/ComponentWithCustomHook.js (73%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js (62%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map}/ComponentWithMultipleHooksPerLine.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js (70%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map}/Example.js (69%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js.map
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map}/InlineRequire.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map (100%)
 rename packages/{react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended => react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external}/index-map/ToDoList.js (65%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/index.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/useTheme.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/index.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js (98%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/external/useTheme.js.map (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/Example.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/InlineRequire.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ToDoList.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/Example.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/index-map/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/index-map/useTheme.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/index.js (100%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/inline/useTheme.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/Example.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/no-columns/InlineRequire.js (99%)
 create mode 100644 packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ToDoList.js
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/no-columns/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__compiled__/no-columns/useTheme.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/ComponentWithUseState.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/README.md (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/__untransformed__/useCustom.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/__source__/useTheme.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/generateHookMap-test.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/getHookNameForLocation-test.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/parseHookNames-test.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/__tests__/updateMockSourceMaps.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/astUtils.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/generateHookMap.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/getHookNameForLocation.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/parseHookNames/index.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/parseHookNames/loadSourceAndMetadata.js (99%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/parseHookNames/parseSourceAndMetadata.js (100%)
 rename packages/{react-devtools-extensions/src => react-devtools-shared/src/hooks}/parseHookNames/parseSourceAndMetadata.worker.js (100%)

diff --git a/.eslintignore b/.eslintignore
index 215132a8225e..71794edf6703 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -20,10 +20,10 @@ 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/__tests__/__source__/__compiled__/
-packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 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-scheduling-profiler/dist
 packages/react-devtools-scheduling-profiler/static
diff --git a/.prettierignore b/.prettierignore
index adf1716fd4fa..50ccffa6a67f 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -2,10 +2,10 @@ 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/__tests__/__source__/__compiled__/
-packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/
 packages/react-devtools-extensions/src/ErrorTesterCompiled.js
 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-scheduling-profiler/dist
 packages/react-devtools-scheduling-profiler/static
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 99c1eaf0868e..a2642788b5f4 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -16,8 +16,7 @@
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",
     "test:edge": "node ./edge/test",
-    "improve-images": "node ./improveImages.mjs",
-    "update-mock-source-maps": "babel-node --presets=@babel/preset-env,@babel/preset-flow ./src/__tests__/updateMockSourceMaps.js"
+    "improve-images": "node ./improveImages.mjs"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -27,8 +26,6 @@
     "@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-env": "^7.11.0",
-    "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "acorn-jsx": "^5.2.0",
     "archiver": "^3.0.0",
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
deleted file mode 100644
index 1ab656bae7c8..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
deleted file mode 100644
index 366d2bbe9c3f..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
deleted file mode 100644
index a4afacf044c9..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
deleted file mode 100644
index 26ff682d745a..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map
deleted file mode 100644
index a3616e735c26..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js.map
deleted file mode 100644
index 2408485245a6..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
deleted file mode 100644
index de5208204af8..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
deleted file mode 100644
index 70e64f3ffef4..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
deleted file mode 100644
index 5621baa48ea9..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
deleted file mode 100644
index 76c87abcc9a6..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
deleted file mode 100644
index 053145cb5cc3..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
deleted file mode 100644
index d52ec3f61a40..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
deleted file mode 100644
index 376b695484d0..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
deleted file mode 100644
index 437afb5d176b..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
deleted file mode 100644
index 205496418958..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
deleted file mode 100644
index 6dbada848ae7..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
deleted file mode 100644
index bb88b19f6f3f..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
deleted file mode 100644
index ca334da52348..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
deleted file mode 100644
index 4d9e81529d3d..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
deleted file mode 100644
index b5237fdc5262..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
deleted file mode 100644
index b4dbf9e15ec1..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
deleted file mode 100644
index 7b95325ab179..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map
deleted file mode 100644
index 16875ee93d81..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
deleted file mode 100644
index af4b94acaccb..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index fd8c1cdadf35..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
deleted file mode 100644
index 0740333a06d7..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentUsingHooksIndirectly.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentUsingHooksIndirectly.js"],"names":["Component","countState","count","setCount","darkMode","useIsDarkMode","isDarkMode","handleClick","darkModeState","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
deleted file mode 100644
index e9441c46a401..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
deleted file mode 100644
index 6316235dd692..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithCustomHook.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentWithCustomHook.js"],"names":["Component","count","setCount","isDarkMode","useIsDarkMode","foo","useFoo","handleClick","useEffectCreate"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index 2a3f24cad910..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
deleted file mode 100644
index 5c01a8334dbc..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithExternalCustomHooks.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
deleted file mode 100644
index e569ffa7d850..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js
+++ /dev/null
@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = require("react");
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-const 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
deleted file mode 100644
index ec85bcad867e..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-const {
-  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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
deleted file mode 100644
index ffa5f98aeaf9..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
deleted file mode 100644
index fdca45ffcf12..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ContainingStringSourceMappingURL.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
deleted file mode 100644
index 2ab9daad9b7b..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
deleted file mode 100644
index 614e8ec7bc7e..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/Example.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
deleted file mode 100644
index b9b234f86bdb..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js
+++ /dev/null
@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
deleted file mode 100644
index d506efef4769..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
deleted file mode 100644
index 5499d109beec..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ToDoList.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index fd8c1cdadf35..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
deleted file mode 100644
index 30c31a58f809..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBI,UAAjB,CADF,eAEE,qDAAaJ,KAAb,CAFF,eAGE;AAAQ,IAAA,OAAO,EAAEK;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
deleted file mode 100644
index e9441c46a401..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
deleted file mode 100644
index aa2ed7916ca6..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithCustomHook.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAWO,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,yDAAiBE,UAAjB,CADF,eAEE,qDAAaF,KAAb,CAFF,eAGE,mDAAWI,GAAX,CAHF,eAIE;AAAQ,IAAA,OAAO,EAAEE;AAAjB,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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index 2a3f24cad910..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=ComponentWithExternalCustomHooks.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
deleted file mode 100644
index 7ea1aae90dbd..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ComponentWithExternalCustomHooks.js"],"names":["Component","theme"],"mappings":";;;;;;;AASA;;AACA;;;;AAVA;;;;;;;;AAYO,SAASA,SAAT,GAAqB;AAC1B,QAAMC,KAAK,GAAG,wBAAd;AAEA,sBAAO,qDAAaA,KAAb,CAAP;AACD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
deleted file mode 100644
index e569ffa7d850..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
+++ /dev/null
@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = require("react");
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-const 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
deleted file mode 100644
index ec85bcad867e..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-const {
-  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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
deleted file mode 100644
index ffa5f98aeaf9..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=ContainingStringSourceMappingURL.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
deleted file mode 100644
index af99c1269ad9..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ContainingStringSourceMappingURL.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["ContainingStringSourceMappingURL.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWA;AAEO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
deleted file mode 100644
index 2ab9daad9b7b..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=Example.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
deleted file mode 100644
index db5732f03e8c..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/Example.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sections":[{"offset":{"line":0,"column":0},"map":{"version":3,"sources":["Example.js"],"names":["Component","count","setCount"],"mappings":";;;;;;;AASA;;;;;;AATA;;;;;;;;AAWO,SAASA,SAAT,GAAqB;AAC1B,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAAS,CAAT,CAA1B;AAEA,sBACE,uDACE,wDAAgBD,KAAhB,WADF,eAEE;AAAQ,IAAA,OAAO,EAAE,MAAMC,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
deleted file mode 100644
index b9b234f86bdb..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js
+++ /dev/null
@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
deleted file mode 100644
index d506efef4769..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=ToDoList.js.map?foo=bar&param=some_value
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
deleted file mode 100644
index 6b8439351a94..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ToDoList.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"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;;;;;;AATA;;;;;;;;AAYO,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,6CACE;AAAQ,IAAA,OAAO,EAAEC;AAAjB,cADF,eAEE,gDACE;AACE,IAAA,OAAO,EAAEH,IAAI,CAACK,UADhB;AAEE,IAAA,QAAQ,EAAED,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACE,uCADF,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;AALd,IAFF,eASE;AAAQ,IAAA,QAAQ,EAAER,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEO;AAA/C,kBACE;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcE,gCACGL,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD","sourcesContent":["/**\n * Copyright (c) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
deleted file mode 100644
index 5cabcdde5f6d..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js
+++ /dev/null
@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useTheme;
-exports.ThemeContext = void 0;
-
-var _react = require("react");
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-const 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-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
deleted file mode 100644
index 5cabcdde5f6d..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js
+++ /dev/null
@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useTheme;
-exports.ThemeContext = void 0;
-
-var _react = require("react");
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-const 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-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index 48e0dcdfca8e..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
deleted file mode 100644
index 4980f8628700..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index fc925fdd5c2d..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
deleted file mode 100644
index daeaa1e06053..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
deleted file mode 100644
index 1902dd97ec68..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
deleted file mode 100644
index a5a2b216cf73..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index f52ded8d12ad..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
deleted file mode 100644
index d0c03c0aa6f4..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index f6bb85b26051..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
deleted file mode 100644
index fa3cc5d44bd3..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
deleted file mode 100644
index 68198fdf3dd5..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
deleted file mode 100644
index 574e1d5ae33c..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index 28a330be5c3d..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
deleted file mode 100644
index ec3994ae7325..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index 5e0f5e80aa1a..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
deleted file mode 100644
index 44f936afc1da..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9mYWNlYm9va19zb3VyY2VzIjpbW251bGwsW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
deleted file mode 100644
index 089cced4b731..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X2ZhY2Vib29rX3NvdXJjZXMiOltbbnVsbCxbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
deleted file mode 100644
index 373a057298c1..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfZmFjZWJvb2tfc291cmNlcyI6W1tudWxsLFt7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index 9a692ae23722..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
deleted file mode 100644
index ebf7a859698e..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index 2203d38c8009..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
deleted file mode 100644
index 706ed20eea9c..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js
deleted file mode 100644
index 4d1ee2e349d7..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
deleted file mode 100644
index d509cfdb33ef..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index f4d3572ad694..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
deleted file mode 100644
index fd03b04ae2dd..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index 7e525c715238..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
deleted file mode 100644
index 6e446dd87e94..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
deleted file mode 100644
index 40e7fbf0b428..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
deleted file mode 100644
index 0c7a15e919ec..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index e873b766dc3d..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLFVBQVUsR0FBRyxxQkFBUyxDQUFULENBQW5CO0FBQ0EsUUFBTUMsS0FBSyxHQUFHRCxVQUFVLENBQUMsQ0FBRCxDQUF4QjtBQUNBLFFBQU1FLFFBQVEsR0FBR0YsVUFBVSxDQUFDLENBQUQsQ0FBM0I7QUFFQSxRQUFNRyxRQUFRLEdBQUdDLGFBQWEsRUFBOUI7QUFDQSxRQUFNLENBQUNDLFVBQUQsSUFBZUYsUUFBckI7QUFFQSx3QkFBVSxNQUFNLENBQ2Q7QUFDRCxHQUZELEVBRUcsRUFGSDs7QUFJQSxRQUFNRyxXQUFXLEdBQUcsTUFBTUosUUFBUSxDQUFDRCxLQUFLLEdBQUcsQ0FBVCxDQUFsQzs7QUFFQSxzQkFDRSx5RUFDRSx5REFBaUJJLFVBQWpCLENBREYsZUFFRSxxREFBYUosS0FBYixDQUZGLGVBR0U7QUFBUSxJQUFBLE9BQU8sRUFBRUs7QUFBakIsb0JBSEYsQ0FERjtBQU9EOztBQUVELFNBQVNGLGFBQVQsR0FBeUI7QUFDdkIsUUFBTUcsYUFBYSxHQUFHLHFCQUFTLEtBQVQsQ0FBdEI7QUFDQSxRQUFNLENBQUNGLFVBQUQsSUFBZUUsYUFBckI7QUFFQSx3QkFBVSxTQUFTQyxlQUFULEdBQTJCLENBQ25DO0FBQ0QsR0FGRCxFQUVHLEVBRkg7QUFJQSxTQUFPLENBQUNILFVBQUQsRUFBYSxNQUFNLENBQUUsQ0FBckIsQ0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiLCJkYXJrTW9kZSIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2FxQkNBLEFXREE7aUJiRUEsQWVGQTtvQ1ZHQSxBZUhBIn1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
deleted file mode 100644
index 91ce40de08ee..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdPLFNBQVNBLFNBQVQsR0FBcUI7QUFDMUIsUUFBTSxDQUFDQyxLQUFELEVBQVFDLFFBQVIsSUFBb0IscUJBQVMsQ0FBVCxDQUExQjtBQUNBLFFBQU1DLFVBQVUsR0FBR0MsYUFBYSxFQUFoQztBQUNBLFFBQU07QUFBQ0MsSUFBQUE7QUFBRCxNQUFRQyxNQUFNLEVBQXBCO0FBRUEsd0JBQVUsTUFBTSxDQUNkO0FBQ0QsR0FGRCxFQUVHLEVBRkg7O0FBSUEsUUFBTUMsV0FBVyxHQUFHLE1BQU1MLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQsQ0FBbEM7O0FBRUEsc0JBQ0UseUVBQ0UseURBQWlCRSxVQUFqQixDQURGLGVBRUUscURBQWFGLEtBQWIsQ0FGRixlQUdFLG1EQUFXSSxHQUFYLENBSEYsZUFJRTtBQUFRLElBQUEsT0FBTyxFQUFFRTtBQUFqQixvQkFKRixDQURGO0FBUUQ7O0FBRUQsU0FBU0gsYUFBVCxHQUF5QjtBQUN2QixRQUFNLENBQUNELFVBQUQsSUFBZSxxQkFBUyxLQUFULENBQXJCO0FBRUEsd0JBQVUsU0FBU0ssZUFBVCxHQUEyQixDQUNuQztBQUNELEdBRkQsRUFFRyxFQUZIO0FBSUEsU0FBT0wsVUFBUDtBQUNEOztBQUVELFNBQVNHLE1BQVQsR0FBa0I7QUFDaEIsNEJBQWMsS0FBZDtBQUNBLFNBQU87QUFBQ0QsSUFBQUEsR0FBRyxFQUFFO0FBQU4sR0FBUDtBQUNEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZURlYnVnVmFsdWUsIHVzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcbiAgY29uc3QgaXNEYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3Qge2Zvb30gPSB1c2VGb28oKTtcblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIC8vIC4uLlxuICB9LCBbXSk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSAoKSA9PiBzZXRDb3VudChjb3VudCArIDEpO1xuXG4gIHJldHVybiAoXG4gICAgPD5cbiAgICAgIDxkaXY+RGFyayBtb2RlPyB7aXNEYXJrTW9kZX08L2Rpdj5cbiAgICAgIDxkaXY+Q291bnQ6IHtjb3VudH08L2Rpdj5cbiAgICAgIDxkaXY+Rm9vOiB7Zm9vfTwvZGl2PlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVDbGlja30+VXBkYXRlIGNvdW50PC9idXR0b24+XG4gICAgPC8+XG4gICk7XG59XG5cbmZ1bmN0aW9uIHVzZUlzRGFya01vZGUoKSB7XG4gIGNvbnN0IFtpc0RhcmtNb2RlXSA9IHVzZVN0YXRlKGZhbHNlKTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIGlzRGFya01vZGU7XG59XG5cbmZ1bmN0aW9uIHVzZUZvbygpIHtcbiAgdXNlRGVidWdWYWx1ZSgnZm9vJyk7XG4gIHJldHVybiB7Zm9vOiB0cnVlfTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCIsImlzRGFya01vZGUiXSwibWFwcGluZ3MiOiJDQUFEO2E0QkNBLEFXREE7Y2xCRUEsQWVGQTtrQ2JFQSJ9XV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index 3a70b896352c..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU1DLEtBQUssR0FBRyx3QkFBZDtBQUVBLHNCQUFPLHFEQUFhQSxLQUFiLENBQVA7QUFDRCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHVzZVRoZW1lIGZyb20gJy4vdXNlVGhlbWUnO1xuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgcmV0dXJuIDxkaXY+dGhlbWU6IHt0aGVtZX08L2Rpdj47XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwidGhlbWUiXSwibWFwcGluZ3MiOiJDQUFEO2NnQkNBLEFVREEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
deleted file mode 100644
index fe2aacab6f5a..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbi8vID9zb3VyY2VNYXBwaW5nVVJMPShbXlxccydcIl0rKS9nbVxuXG5leHBvcnQgZnVuY3Rpb24gQ29tcG9uZW50KCkge1xuICBjb25zdCBbY291bnQsIHNldENvdW50XSA9IHVzZVN0YXRlKDApO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdj5cbiAgICAgIDxwPllvdSBjbGlja2VkIHtjb3VudH0gdGltZXM8L3A+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9eygpID0+IHNldENvdW50KGNvdW50ICsgMSl9PkNsaWNrIG1lPC9idXR0b24+XG4gICAgPC9kaXY+XG4gICk7XG59XG4iXSwieF9yZWFjdF9zb3VyY2VzIjpbW3sibmFtZXMiOlsiPG5vLWhvb2s+IiwiY291bnQiXSwibWFwcGluZ3MiOiJDQUFEO2U0QkNBLEFXREEifV1dfX1dfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
deleted file mode 100644
index f0aad76c791b..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXTyxTQUFTQSxTQUFULEdBQXFCO0FBQzFCLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLHFCQUFTLENBQVQsQ0FBMUI7QUFFQSxzQkFDRSx1REFDRSx3REFBZ0JELEtBQWhCLFdBREYsZUFFRTtBQUFRLElBQUEsT0FBTyxFQUFFLE1BQU1DLFFBQVEsQ0FBQ0QsS0FBSyxHQUFHLENBQVQ7QUFBL0IsZ0JBRkYsQ0FERjtBQU1EIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdLCJ4X3JlYWN0X3NvdXJjZXMiOltbeyJuYW1lcyI6WyI8bm8taG9vaz4iLCJjb3VudCJdLCJtYXBwaW5ncyI6IkNBQUQ7YTRCQ0EsQVdEQSJ9XV19fV19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
deleted file mode 100644
index f76552e16149..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzZWN0aW9ucyI6W3sib2Zmc2V0Ijp7ImxpbmUiOjAsImNvbHVtbiI6MH0sIm1hcCI6eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWU8sU0FBU0EsUUFBVCxDQUFrQjtBQUFDQyxFQUFBQSxJQUFEO0FBQU9DLEVBQUFBLFVBQVA7QUFBbUJDLEVBQUFBO0FBQW5CLENBQWxCLEVBQWtEO0FBQ3ZELFFBQU1DLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNELElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0MsVUFBUCxDQUZrQixDQUFyQjtBQUlBLFFBQU1HLFlBQVksR0FBRyx1QkFBWSxNQUFNO0FBQ3JDRixJQUFBQSxVQUFVLENBQUNGLElBQUQsQ0FBVjtBQUNELEdBRm9CLEVBRWxCLENBQUNBLElBQUQsRUFBT0UsVUFBUCxDQUZrQixDQUFyQjtBQUlBLHNCQUNFLDZDQUNFO0FBQVEsSUFBQSxPQUFPLEVBQUVDO0FBQWpCLGNBREYsZUFFRSxnREFDRTtBQUNFLElBQUEsT0FBTyxFQUFFSCxJQUFJLENBQUNLLFVBRGhCO0FBRUUsSUFBQSxRQUFRLEVBQUVELFlBRlo7QUFHRSxJQUFBLElBQUksRUFBQztBQUhQLElBREYsRUFLSyxHQUxMLEVBTUdKLElBQUksQ0FBQ00sSUFOUixDQUZGLENBREY7QUFhRDs7QUFFTSxTQUFTQyxJQUFULENBQWNDLEtBQWQsRUFBcUI7QUFDMUIsUUFBTSxDQUFDQyxXQUFELEVBQWNDLGNBQWQsSUFBZ0Msb0JBQVMsRUFBVCxDQUF0QztBQUNBLFFBQU0sQ0FBQ0MsS0FBRCxFQUFRQyxRQUFSLElBQW9CLG9CQUFTLENBQ2pDO0FBQUNDLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRGlDLEVBRWpDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxJQUFwQjtBQUEwQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWhDLEdBRmlDLEVBR2pDO0FBQUNPLElBQUFBLEVBQUUsRUFBRSxDQUFMO0FBQVFSLElBQUFBLFVBQVUsRUFBRSxLQUFwQjtBQUEyQkMsSUFBQUEsSUFBSSxFQUFFO0FBQWpDLEdBSGlDLENBQVQsQ0FBMUI7QUFLQSxRQUFNLENBQUNRLEdBQUQsRUFBTUMsTUFBTixJQUFnQixvQkFBUyxDQUFULENBQXRCO0FBRUEsUUFBTUMsV0FBVyxHQUFHLHVCQUFZLE1BQU07QUFDcEMsUUFBSVAsV0FBVyxLQUFLLEVBQXBCLEVBQXdCO0FBQ3RCRyxNQUFBQSxRQUFRLENBQUMsQ0FDUCxHQUFHRCxLQURJLEVBRVA7QUFDRUUsUUFBQUEsRUFBRSxFQUFFQyxHQUROO0FBRUVULFFBQUFBLFVBQVUsRUFBRSxLQUZkO0FBR0VDLFFBQUFBLElBQUksRUFBRUc7QUFIUixPQUZPLENBQUQsQ0FBUjtBQVFBTSxNQUFBQSxNQUFNLENBQUNELEdBQUcsR0FBRyxDQUFQLENBQU47QUFDQUosTUFBQUEsY0FBYyxDQUFDLEVBQUQsQ0FBZDtBQUNEO0FBQ0YsR0FibUIsRUFhakIsQ0FBQ0QsV0FBRCxFQUFjRSxLQUFkLEVBQXFCRyxHQUFyQixDQWJpQixDQUFwQjtBQWVBLFFBQU1HLGNBQWMsR0FBRyx1QkFDckJDLEtBQUssSUFBSTtBQUNQLFFBQUlBLEtBQUssQ0FBQ0MsR0FBTixLQUFjLE9BQWxCLEVBQTJCO0FBQ3pCSCxNQUFBQSxXQUFXO0FBQ1o7QUFDRixHQUxvQixFQU1yQixDQUFDQSxXQUFELENBTnFCLENBQXZCO0FBU0EsUUFBTUksWUFBWSxHQUFHLHVCQUNuQkYsS0FBSyxJQUFJO0FBQ1BSLElBQUFBLGNBQWMsQ0FBQ1EsS0FBSyxDQUFDRyxhQUFOLENBQW9CQyxLQUFyQixDQUFkO0FBQ0QsR0FIa0IsRUFJbkIsQ0FBQ1osY0FBRCxDQUptQixDQUFyQjtBQU9BLFFBQU1ULFVBQVUsR0FBRyx1QkFDakJzQixZQUFZLElBQUlYLFFBQVEsQ0FBQ0QsS0FBSyxDQUFDYSxNQUFOLENBQWF4QixJQUFJLElBQUlBLElBQUksS0FBS3VCLFlBQTlCLENBQUQsQ0FEUCxFQUVqQixDQUFDWixLQUFELENBRmlCLENBQW5CO0FBS0EsUUFBTVQsVUFBVSxHQUFHLHVCQUNqQnVCLFlBQVksSUFBSTtBQUNkO0FBQ0E7QUFDQSxVQUFNQyxLQUFLLEdBQUdmLEtBQUssQ0FBQ2dCLFNBQU4sQ0FBZ0IzQixJQUFJLElBQUlBLElBQUksQ0FBQ2EsRUFBTCxLQUFZWSxZQUFZLENBQUNaLEVBQWpELENBQWQ7QUFFQUQsSUFBQUEsUUFBUSxDQUNORCxLQUFLLENBQ0ZpQixLQURILENBQ1MsQ0FEVCxFQUNZRixLQURaLEVBRUdHLE1BRkgsQ0FFVSxFQUNOLEdBQUdKLFlBREc7QUFFTnBCLE1BQUFBLFVBQVUsRUFBRSxDQUFDb0IsWUFBWSxDQUFDcEI7QUFGcEIsS0FGVixFQU1Hd0IsTUFOSCxDQU1VbEIsS0FBSyxDQUFDaUIsS0FBTixDQUFZRixLQUFLLEdBQUcsQ0FBcEIsQ0FOVixDQURNLENBQVI7QUFTRCxHQWZnQixFQWdCakIsQ0FBQ2YsS0FBRCxDQWhCaUIsQ0FBbkI7QUFtQkEsc0JBQ0Usb0JBQUMsY0FBRCxxQkFDRSx1Q0FERixlQUVFO0FBQ0UsSUFBQSxJQUFJLEVBQUMsTUFEUDtBQUVFLElBQUEsV0FBVyxFQUFDLGtCQUZkO0FBR0UsSUFBQSxLQUFLLEVBQUVGLFdBSFQ7QUFJRSxJQUFBLFFBQVEsRUFBRVcsWUFKWjtBQUtFLElBQUEsVUFBVSxFQUFFSDtBQUxkLElBRkYsZUFTRTtBQUFRLElBQUEsUUFBUSxFQUFFUixXQUFXLEtBQUssRUFBbEM7QUFBc0MsSUFBQSxPQUFPLEVBQUVPO0FBQS9DLGtCQUNFO0FBQU0sSUFBQSxJQUFJLEVBQUMsS0FBWDtBQUFpQixrQkFBVztBQUE1QixXQURGLENBVEYsZUFjRSxnQ0FDR0wsS0FBSyxDQUFDbUIsR0FBTixDQUFVOUIsSUFBSSxpQkFDYixvQkFBQyxRQUFEO0FBQ0UsSUFBQSxHQUFHLEVBQUVBLElBQUksQ0FBQ2EsRUFEWjtBQUVFLElBQUEsSUFBSSxFQUFFYixJQUZSO0FBR0UsSUFBQSxVQUFVLEVBQUVDLFVBSGQ7QUFJRSxJQUFBLFVBQVUsRUFBRUM7QUFKZCxJQURELENBREgsQ0FkRixDQURGO0FBMkJEIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7RnJhZ21lbnQsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZX0gZnJvbSAncmVhY3QnO1xuXG5leHBvcnQgZnVuY3Rpb24gTGlzdEl0ZW0oe2l0ZW0sIHJlbW92ZUl0ZW0sIHRvZ2dsZUl0ZW19KSB7XG4gIGNvbnN0IGhhbmRsZURlbGV0ZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICByZW1vdmVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgcmVtb3ZlSXRlbV0pO1xuXG4gIGNvbnN0IGhhbmRsZVRvZ2dsZSA9IHVzZUNhbGxiYWNrKCgpID0+IHtcbiAgICB0b2dnbGVJdGVtKGl0ZW0pO1xuICB9LCBbaXRlbSwgdG9nZ2xlSXRlbV0pO1xuXG4gIHJldHVybiAoXG4gICAgPGxpPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXtoYW5kbGVEZWxldGV9PkRlbGV0ZTwvYnV0dG9uPlxuICAgICAgPGxhYmVsPlxuICAgICAgICA8aW5wdXRcbiAgICAgICAgICBjaGVja2VkPXtpdGVtLmlzQ29tcGxldGV9XG4gICAgICAgICAgb25DaGFuZ2U9e2hhbmRsZVRvZ2dsZX1cbiAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAvPnsnICd9XG4gICAgICAgIHtpdGVtLnRleHR9XG4gICAgICA8L2xhYmVsPlxuICAgIDwvbGk+XG4gICk7XG59XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0KHByb3BzKSB7XG4gIGNvbnN0IFtuZXdJdGVtVGV4dCwgc2V0TmV3SXRlbVRleHRdID0gdXNlU3RhdGUoJycpO1xuICBjb25zdCBbaXRlbXMsIHNldEl0ZW1zXSA9IHVzZVN0YXRlKFtcbiAgICB7aWQ6IDEsIGlzQ29tcGxldGU6IHRydWUsIHRleHQ6ICdGaXJzdCd9LFxuICAgIHtpZDogMiwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ1NlY29uZCd9LFxuICAgIHtpZDogMywgaXNDb21wbGV0ZTogZmFsc2UsIHRleHQ6ICdUaGlyZCd9LFxuICBdKTtcbiAgY29uc3QgW3VpZCwgc2V0VUlEXSA9IHVzZVN0YXRlKDQpO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIGlmIChuZXdJdGVtVGV4dCAhPT0gJycpIHtcbiAgICAgIHNldEl0ZW1zKFtcbiAgICAgICAgLi4uaXRlbXMsXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogdWlkLFxuICAgICAgICAgIGlzQ29tcGxldGU6IGZhbHNlLFxuICAgICAgICAgIHRleHQ6IG5ld0l0ZW1UZXh0LFxuICAgICAgICB9LFxuICAgICAgXSk7XG4gICAgICBzZXRVSUQodWlkICsgMSk7XG4gICAgICBzZXROZXdJdGVtVGV4dCgnJyk7XG4gICAgfVxuICB9LCBbbmV3SXRlbVRleHQsIGl0ZW1zLCB1aWRdKTtcblxuICBjb25zdCBoYW5kbGVLZXlQcmVzcyA9IHVzZUNhbGxiYWNrKFxuICAgIGV2ZW50ID0+IHtcbiAgICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicpIHtcbiAgICAgICAgaGFuZGxlQ2xpY2soKTtcbiAgICAgIH1cbiAgICB9LFxuICAgIFtoYW5kbGVDbGlja10sXG4gICk7XG5cbiAgY29uc3QgaGFuZGxlQ2hhbmdlID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgc2V0TmV3SXRlbVRleHQoZXZlbnQuY3VycmVudFRhcmdldC52YWx1ZSk7XG4gICAgfSxcbiAgICBbc2V0TmV3SXRlbVRleHRdLFxuICApO1xuXG4gIGNvbnN0IHJlbW92ZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9SZW1vdmUgPT4gc2V0SXRlbXMoaXRlbXMuZmlsdGVyKGl0ZW0gPT4gaXRlbSAhPT0gaXRlbVRvUmVtb3ZlKSksXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICBjb25zdCB0b2dnbGVJdGVtID0gdXNlQ2FsbGJhY2soXG4gICAgaXRlbVRvVG9nZ2xlID0+IHtcbiAgICAgIC8vIERvbnQgdXNlIGluZGV4T2YoKVxuICAgICAgLy8gYmVjYXVzZSBlZGl0aW5nIHByb3BzIGluIERldlRvb2xzIGNyZWF0ZXMgYSBuZXcgT2JqZWN0LlxuICAgICAgY29uc3QgaW5kZXggPSBpdGVtcy5maW5kSW5kZXgoaXRlbSA9PiBpdGVtLmlkID09PSBpdGVtVG9Ub2dnbGUuaWQpO1xuXG4gICAgICBzZXRJdGVtcyhcbiAgICAgICAgaXRlbXNcbiAgICAgICAgICAuc2xpY2UoMCwgaW5kZXgpXG4gICAgICAgICAgLmNvbmNhdCh7XG4gICAgICAgICAgICAuLi5pdGVtVG9Ub2dnbGUsXG4gICAgICAgICAgICBpc0NvbXBsZXRlOiAhaXRlbVRvVG9nZ2xlLmlzQ29tcGxldGUsXG4gICAgICAgICAgfSlcbiAgICAgICAgICAuY29uY2F0KGl0ZW1zLnNsaWNlKGluZGV4ICsgMSkpLFxuICAgICAgKTtcbiAgICB9LFxuICAgIFtpdGVtc10sXG4gICk7XG5cbiAgcmV0dXJuIChcbiAgICA8RnJhZ21lbnQ+XG4gICAgICA8aDE+TGlzdDwvaDE+XG4gICAgICA8aW5wdXRcbiAgICAgICAgdHlwZT1cInRleHRcIlxuICAgICAgICBwbGFjZWhvbGRlcj1cIk5ldyBsaXN0IGl0ZW0uLi5cIlxuICAgICAgICB2YWx1ZT17bmV3SXRlbVRleHR9XG4gICAgICAgIG9uQ2hhbmdlPXtoYW5kbGVDaGFuZ2V9XG4gICAgICAgIG9uS2V5UHJlc3M9e2hhbmRsZUtleVByZXNzfVxuICAgICAgLz5cbiAgICAgIDxidXR0b24gZGlzYWJsZWQ9e25ld0l0ZW1UZXh0ID09PSAnJ30gb25DbGljaz17aGFuZGxlQ2xpY2t9PlxuICAgICAgICA8c3BhbiByb2xlPVwiaW1nXCIgYXJpYS1sYWJlbD1cIkFkZCBpdGVtXCI+XG4gICAgICAgICAgQWRkXG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsPlxuICAgICAgICB7aXRlbXMubWFwKGl0ZW0gPT4gKFxuICAgICAgICAgIDxMaXN0SXRlbVxuICAgICAgICAgICAga2V5PXtpdGVtLmlkfVxuICAgICAgICAgICAgaXRlbT17aXRlbX1cbiAgICAgICAgICAgIHJlbW92ZUl0ZW09e3JlbW92ZUl0ZW19XG4gICAgICAgICAgICB0b2dnbGVJdGVtPXt0b2dnbGVJdGVtfVxuICAgICAgICAgIC8+XG4gICAgICAgICkpfVxuICAgICAgPC91bD5cbiAgICA8L0ZyYWdtZW50PlxuICApO1xufVxuIl0sInhfcmVhY3Rfc291cmNlcyI6W1t7Im5hbWVzIjpbIjxuby1ob29rPiIsImhhbmRsZURlbGV0ZSIsImhhbmRsZVRvZ2dsZSIsIm5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJ1aWQiLCJoYW5kbGVDbGljayIsImhhbmRsZUtleVByZXNzIiwiaGFuZGxlQ2hhbmdlIiwicmVtb3ZlSXRlbSIsInRvZ2dsZUl0ZW0iXSwibWFwcGluZ3MiOiJDQUFEO2N1QkNBO2dCQ0RBO2tCREVBO29CQ0ZBO3NDZ0JHQSxBWUhBO3VDeEJJQTsyQ3hCSkE7NENvQktBLEFXTEE7OENiTUE7MkRTTkE7NkROT0E7b0V0QlBBO3NFb0JRQTsyRXBCUkE7NkVrQlNBO2dGbEJUQTtrRmtCVUE7bUdsQlZBIn1dXX19XX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
deleted file mode 100644
index 070a9cc7232c..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentUsingHooksIndirectly.js
+++ /dev/null
@@ -1,45 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFVzaW5nSG9va3NJbmRpcmVjdGx5LmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50U3RhdGUiLCJjb3VudCIsInNldENvdW50IiwiZGFya01vZGUiLCJ1c2VJc0RhcmtNb2RlIiwiaXNEYXJrTW9kZSIsImhhbmRsZUNsaWNrIiwiZGFya01vZGVTdGF0ZSIsInVzZUVmZmVjdENyZWF0ZSJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBQyxVQUFBLEdBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsS0FBQSxHQUFBRCxVQUFBLENBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUUsUUFBQSxHQUFBRixVQUFBLENBQUEsQ0FBQSxDQUFBO0FBRUEsUUFBQUcsUUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFDQSxRQUFBLENBQUFDLFVBQUEsSUFBQUYsUUFBQTtBQUVBLHdCQUFBLE1BQUEsQ0FDQTtBQUNBLEdBRkEsRUFFQSxFQUZBOztBQUlBLFFBQUFHLFdBQUEsR0FBQSxNQUFBSixRQUFBLENBQUFELEtBQUEsR0FBQSxDQUFBLENBQUE7O0FBRUEsc0JBQ0EseUVBQ0EseURBQUFJLFVBQUEsQ0FEQSxlQUVBLHFEQUFBSixLQUFBLENBRkEsZUFHQTtBQUFBLElBQUEsT0FBQSxFQUFBSztBQUFBLG9CQUhBLENBREE7QUFPQTs7QUFFQSxTQUFBRixhQUFBLEdBQUE7QUFDQSxRQUFBRyxhQUFBLEdBQUEscUJBQUEsS0FBQSxDQUFBO0FBQ0EsUUFBQSxDQUFBRixVQUFBLElBQUFFLGFBQUE7QUFFQSx3QkFBQSxTQUFBQyxlQUFBLEdBQUEsQ0FDQTtBQUNBLEdBRkEsRUFFQSxFQUZBO0FBSUEsU0FBQSxDQUFBSCxVQUFBLEVBQUEsTUFBQSxDQUFBLENBQUEsQ0FBQTtBQUNBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBDb3B5cmlnaHQgKGMpIEZhY2Vib29rLCBJbmMuIGFuZCBpdHMgYWZmaWxpYXRlcy5cbiAqXG4gKiBUaGlzIHNvdXJjZSBjb2RlIGlzIGxpY2Vuc2VkIHVuZGVyIHRoZSBNSVQgbGljZW5zZSBmb3VuZCBpbiB0aGVcbiAqIExJQ0VOU0UgZmlsZSBpbiB0aGUgcm9vdCBkaXJlY3Rvcnkgb2YgdGhpcyBzb3VyY2UgdHJlZS5cbiAqXG4gKiBAZmxvd1xuICovXG5cbmltcG9ydCBSZWFjdCwge3VzZUVmZmVjdCwgdXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgY291bnRTdGF0ZSA9IHVzZVN0YXRlKDApO1xuICBjb25zdCBjb3VudCA9IGNvdW50U3RhdGVbMF07XG4gIGNvbnN0IHNldENvdW50ID0gY291bnRTdGF0ZVsxXTtcblxuICBjb25zdCBkYXJrTW9kZSA9IHVzZUlzRGFya01vZGUoKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGU7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZUNsaWNrfT5VcGRhdGUgY291bnQ8L2J1dHRvbj5cbiAgICA8Lz5cbiAgKTtcbn1cblxuZnVuY3Rpb24gdXNlSXNEYXJrTW9kZSgpIHtcbiAgY29uc3QgZGFya01vZGVTdGF0ZSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgY29uc3QgW2lzRGFya01vZGVdID0gZGFya01vZGVTdGF0ZTtcblxuICB1c2VFZmZlY3QoZnVuY3Rpb24gdXNlRWZmZWN0Q3JlYXRlKCkge1xuICAgIC8vIEhlcmUgaXMgd2hlcmUgd2UgbWF5IGxpc3RlbiB0byBhIFwidGhlbWVcIiBldmVudC4uLlxuICB9LCBbXSk7XG5cbiAgcmV0dXJuIFtpc0RhcmtNb2RlLCAoKSA9PiB7fV07XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
deleted file mode 100644
index 51f7c36c23ef..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithCustomHook.js
+++ /dev/null
@@ -1,51 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
-  }, "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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhDdXN0b21Ib29rLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiLCJpc0RhcmtNb2RlIiwidXNlSXNEYXJrTW9kZSIsImZvbyIsInVzZUZvbyIsImhhbmRsZUNsaWNrIiwidXNlRWZmZWN0Q3JlYXRlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7Ozs7OztBQVRBOzs7Ozs7OztBQVdBLFNBQUFBLFNBQUEsR0FBQTtBQUNBLFFBQUEsQ0FBQUMsS0FBQSxFQUFBQyxRQUFBLElBQUEscUJBQUEsQ0FBQSxDQUFBO0FBQ0EsUUFBQUMsVUFBQSxHQUFBQyxhQUFBLEVBQUE7QUFDQSxRQUFBO0FBQUFDLElBQUFBO0FBQUEsTUFBQUMsTUFBQSxFQUFBO0FBRUEsd0JBQUEsTUFBQSxDQUNBO0FBQ0EsR0FGQSxFQUVBLEVBRkE7O0FBSUEsUUFBQUMsV0FBQSxHQUFBLE1BQUFMLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUEsQ0FBQTs7QUFFQSxzQkFDQSx5RUFDQSx5REFBQUUsVUFBQSxDQURBLGVBRUEscURBQUFGLEtBQUEsQ0FGQSxlQUdBLG1EQUFBSSxHQUFBLENBSEEsZUFJQTtBQUFBLElBQUEsT0FBQSxFQUFBRTtBQUFBLG9CQUpBLENBREE7QUFRQTs7QUFFQSxTQUFBSCxhQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFELFVBQUEsSUFBQSxxQkFBQSxLQUFBLENBQUE7QUFFQSx3QkFBQSxTQUFBSyxlQUFBLEdBQUEsQ0FDQTtBQUNBLEdBRkEsRUFFQSxFQUZBO0FBSUEsU0FBQUwsVUFBQTtBQUNBOztBQUVBLFNBQUFHLE1BQUEsR0FBQTtBQUNBLDRCQUFBLEtBQUE7QUFDQSxTQUFBO0FBQUFELElBQUFBLEdBQUEsRUFBQTtBQUFBLEdBQUE7QUFDQSIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQ29weXJpZ2h0IChjKSBGYWNlYm9vaywgSW5jLiBhbmQgaXRzIGFmZmlsaWF0ZXMuXG4gKlxuICogVGhpcyBzb3VyY2UgY29kZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgTUlUIGxpY2Vuc2UgZm91bmQgaW4gdGhlXG4gKiBMSUNFTlNFIGZpbGUgaW4gdGhlIHJvb3QgZGlyZWN0b3J5IG9mIHRoaXMgc291cmNlIHRyZWUuXG4gKlxuICogQGZsb3dcbiAqL1xuXG5pbXBvcnQgUmVhY3QsIHt1c2VEZWJ1Z1ZhbHVlLCB1c2VFZmZlY3QsIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG4gIGNvbnN0IGlzRGFya01vZGUgPSB1c2VJc0RhcmtNb2RlKCk7XG4gIGNvbnN0IHtmb299ID0gdXNlRm9vKCk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICAvLyAuLi5cbiAgfSwgW10pO1xuXG4gIGNvbnN0IGhhbmRsZUNsaWNrID0gKCkgPT4gc2V0Q291bnQoY291bnQgKyAxKTtcblxuICByZXR1cm4gKFxuICAgIDw+XG4gICAgICA8ZGl2PkRhcmsgbW9kZT8ge2lzRGFya01vZGV9PC9kaXY+XG4gICAgICA8ZGl2PkNvdW50OiB7Y291bnR9PC9kaXY+XG4gICAgICA8ZGl2PkZvbzoge2Zvb308L2Rpdj5cbiAgICAgIDxidXR0b24gb25DbGljaz17aGFuZGxlQ2xpY2t9PlVwZGF0ZSBjb3VudDwvYnV0dG9uPlxuICAgIDwvPlxuICApO1xufVxuXG5mdW5jdGlvbiB1c2VJc0RhcmtNb2RlKCkge1xuICBjb25zdCBbaXNEYXJrTW9kZV0gPSB1c2VTdGF0ZShmYWxzZSk7XG5cbiAgdXNlRWZmZWN0KGZ1bmN0aW9uIHVzZUVmZmVjdENyZWF0ZSgpIHtcbiAgICAvLyBIZXJlIGlzIHdoZXJlIHdlIG1heSBsaXN0ZW4gdG8gYSBcInRoZW1lXCIgZXZlbnQuLi5cbiAgfSwgW10pO1xuXG4gIHJldHVybiBpc0RhcmtNb2RlO1xufVxuXG5mdW5jdGlvbiB1c2VGb28oKSB7XG4gIHVzZURlYnVnVmFsdWUoJ2ZvbycpO1xuICByZXR1cm4ge2ZvbzogdHJ1ZX07XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
deleted file mode 100644
index 63c7ec8d8ef9..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithExternalCustomHooks.js
+++ /dev/null
@@ -1,26 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _useTheme = _interopRequireDefault(require("./useTheme"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbXBvbmVudFdpdGhFeHRlcm5hbEN1c3RvbUhvb2tzLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsInRoZW1lIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBU0E7O0FBQ0E7Ozs7QUFWQTs7Ozs7Ozs7QUFZQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBQyxLQUFBLEdBQUEsd0JBQUE7QUFFQSxzQkFBQSxxREFBQUEsS0FBQSxDQUFBO0FBQ0EiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB1c2VUaGVtZSBmcm9tICcuL3VzZVRoZW1lJztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgdGhlbWUgPSB1c2VUaGVtZSgpO1xuXG4gIHJldHVybiA8ZGl2PnRoZW1lOiB7dGhlbWV9PC9kaXY+O1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
deleted file mode 100644
index a05ba5ba6982..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ContainingStringSourceMappingURL.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
-// ?sourceMappingURL=([^\s'"]+)/gm
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNvbnRhaW5pbmdTdHJpbmdTb3VyY2VNYXBwaW5nVVJMLmpzIl0sIm5hbWVzIjpbIkNvbXBvbmVudCIsImNvdW50Iiwic2V0Q291bnQiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBV0E7QUFFQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuLy8gP3NvdXJjZU1hcHBpbmdVUkw9KFteXFxzJ1wiXSspL2dtXG5cbmV4cG9ydCBmdW5jdGlvbiBDb21wb25lbnQoKSB7XG4gIGNvbnN0IFtjb3VudCwgc2V0Q291bnRdID0gdXNlU3RhdGUoMCk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2PlxuICAgICAgPHA+WW91IGNsaWNrZWQge2NvdW50fSB0aW1lczwvcD5cbiAgICAgIDxidXR0b24gb25DbGljaz17KCkgPT4gc2V0Q291bnQoY291bnQgKyAxKX0+Q2xpY2sgbWU8L2J1dHRvbj5cbiAgICA8L2Rpdj5cbiAgKTtcbn1cbiJdfQ==
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js
deleted file mode 100644
index 6d668eaac8a1..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/Example.js
+++ /dev/null
@@ -1,28 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Component = Component;
-
-var _react = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function Component() {
-  const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
-  }, "Click me"));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkV4YW1wbGUuanMiXSwibmFtZXMiOlsiQ29tcG9uZW50IiwiY291bnQiLCJzZXRDb3VudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQVNBOzs7Ozs7QUFUQTs7Ozs7Ozs7QUFXQSxTQUFBQSxTQUFBLEdBQUE7QUFDQSxRQUFBLENBQUFDLEtBQUEsRUFBQUMsUUFBQSxJQUFBLHFCQUFBLENBQUEsQ0FBQTtBQUVBLHNCQUNBLHVEQUNBLHdEQUFBRCxLQUFBLFdBREEsZUFFQTtBQUFBLElBQUEsT0FBQSxFQUFBLE1BQUFDLFFBQUEsQ0FBQUQsS0FBQSxHQUFBLENBQUE7QUFBQSxnQkFGQSxDQURBO0FBTUEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0IFJlYWN0LCB7dXNlU3RhdGV9IGZyb20gJ3JlYWN0JztcblxuZXhwb3J0IGZ1bmN0aW9uIENvbXBvbmVudCgpIHtcbiAgY29uc3QgW2NvdW50LCBzZXRDb3VudF0gPSB1c2VTdGF0ZSgwKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXY+XG4gICAgICA8cD5Zb3UgY2xpY2tlZCB7Y291bnR9IHRpbWVzPC9wPlxuICAgICAgPGJ1dHRvbiBvbkNsaWNrPXsoKSA9PiBzZXRDb3VudChjb3VudCArIDEpfT5DbGljayBtZTwvYnV0dG9uPlxuICAgIDwvZGl2PlxuICApO1xufVxuIl19
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js b/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js
deleted file mode 100644
index 3693681e1087..000000000000
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ToDoList.js
+++ /dev/null
@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ListItem = ListItem;
-exports.List = List;
-
-var React = _interopRequireWildcard(require("react"));
-
-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; }
-
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-function 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", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    checked: item.isComplete,
-    onChange: handleToggle,
-    type: "checkbox"
-  }), ' ', 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, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
-    type: "text",
-    placeholder: "New list item...",
-    value: newItemText,
-    onChange: handleChange,
-    onKeyPress: handleKeyPress
-  }), /*#__PURE__*/React.createElement("button", {
-    disabled: newItemText === '',
-    onClick: handleClick
-  }, /*#__PURE__*/React.createElement("span", {
-    role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
-    key: item.id,
-    item: item,
-    removeItem: removeItem,
-    toggleItem: toggleItem
-  }))));
-}
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRvRG9MaXN0LmpzIl0sIm5hbWVzIjpbIkxpc3RJdGVtIiwiaXRlbSIsInJlbW92ZUl0ZW0iLCJ0b2dnbGVJdGVtIiwiaGFuZGxlRGVsZXRlIiwiaGFuZGxlVG9nZ2xlIiwiaXNDb21wbGV0ZSIsInRleHQiLCJMaXN0IiwicHJvcHMiLCJuZXdJdGVtVGV4dCIsInNldE5ld0l0ZW1UZXh0IiwiaXRlbXMiLCJzZXRJdGVtcyIsImlkIiwidWlkIiwic2V0VUlEIiwiaGFuZGxlQ2xpY2siLCJoYW5kbGVLZXlQcmVzcyIsImV2ZW50Iiwia2V5IiwiaGFuZGxlQ2hhbmdlIiwiY3VycmVudFRhcmdldCIsInZhbHVlIiwiaXRlbVRvUmVtb3ZlIiwiZmlsdGVyIiwiaXRlbVRvVG9nZ2xlIiwiaW5kZXgiLCJmaW5kSW5kZXgiLCJzbGljZSIsImNvbmNhdCIsIm1hcCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7QUFTQTs7Ozs7O0FBVEE7Ozs7Ozs7O0FBWUEsU0FBQUEsUUFBQSxDQUFBO0FBQUFDLEVBQUFBLElBQUE7QUFBQUMsRUFBQUEsVUFBQTtBQUFBQyxFQUFBQTtBQUFBLENBQUEsRUFBQTtBQUNBLFFBQUFDLFlBQUEsR0FBQSx1QkFBQSxNQUFBO0FBQ0FGLElBQUFBLFVBQUEsQ0FBQUQsSUFBQSxDQUFBO0FBQ0EsR0FGQSxFQUVBLENBQUFBLElBQUEsRUFBQUMsVUFBQSxDQUZBLENBQUE7QUFJQSxRQUFBRyxZQUFBLEdBQUEsdUJBQUEsTUFBQTtBQUNBRixJQUFBQSxVQUFBLENBQUFGLElBQUEsQ0FBQTtBQUNBLEdBRkEsRUFFQSxDQUFBQSxJQUFBLEVBQUFFLFVBQUEsQ0FGQSxDQUFBO0FBSUEsc0JBQ0EsNkNBQ0E7QUFBQSxJQUFBLE9BQUEsRUFBQUM7QUFBQSxjQURBLGVBRUEsZ0RBQ0E7QUFDQSxJQUFBLE9BQUEsRUFBQUgsSUFBQSxDQUFBSyxVQURBO0FBRUEsSUFBQSxRQUFBLEVBQUFELFlBRkE7QUFHQSxJQUFBLElBQUEsRUFBQTtBQUhBLElBREEsRUFLQSxHQUxBLEVBTUFKLElBQUEsQ0FBQU0sSUFOQSxDQUZBLENBREE7QUFhQTs7QUFFQSxTQUFBQyxJQUFBLENBQUFDLEtBQUEsRUFBQTtBQUNBLFFBQUEsQ0FBQUMsV0FBQSxFQUFBQyxjQUFBLElBQUEsb0JBQUEsRUFBQSxDQUFBO0FBQ0EsUUFBQSxDQUFBQyxLQUFBLEVBQUFDLFFBQUEsSUFBQSxvQkFBQSxDQUNBO0FBQUFDLElBQUFBLEVBQUEsRUFBQSxDQUFBO0FBQUFSLElBQUFBLFVBQUEsRUFBQSxJQUFBO0FBQUFDLElBQUFBLElBQUEsRUFBQTtBQUFBLEdBREEsRUFFQTtBQUFBTyxJQUFBQSxFQUFBLEVBQUEsQ0FBQTtBQUFBUixJQUFBQSxVQUFBLEVBQUEsSUFBQTtBQUFBQyxJQUFBQSxJQUFBLEVBQUE7QUFBQSxHQUZBLEVBR0E7QUFBQU8sSUFBQUEsRUFBQSxFQUFBLENBQUE7QUFBQVIsSUFBQUEsVUFBQSxFQUFBLEtBQUE7QUFBQUMsSUFBQUEsSUFBQSxFQUFBO0FBQUEsR0FIQSxDQUFBLENBQUE7QUFLQSxRQUFBLENBQUFRLEdBQUEsRUFBQUMsTUFBQSxJQUFBLG9CQUFBLENBQUEsQ0FBQTtBQUVBLFFBQUFDLFdBQUEsR0FBQSx1QkFBQSxNQUFBO0FBQ0EsUUFBQVAsV0FBQSxLQUFBLEVBQUEsRUFBQTtBQUNBRyxNQUFBQSxRQUFBLENBQUEsQ0FDQSxHQUFBRCxLQURBLEVBRUE7QUFDQUUsUUFBQUEsRUFBQSxFQUFBQyxHQURBO0FBRUFULFFBQUFBLFVBQUEsRUFBQSxLQUZBO0FBR0FDLFFBQUFBLElBQUEsRUFBQUc7QUFIQSxPQUZBLENBQUEsQ0FBQTtBQVFBTSxNQUFBQSxNQUFBLENBQUFELEdBQUEsR0FBQSxDQUFBLENBQUE7QUFDQUosTUFBQUEsY0FBQSxDQUFBLEVBQUEsQ0FBQTtBQUNBO0FBQ0EsR0FiQSxFQWFBLENBQUFELFdBQUEsRUFBQUUsS0FBQSxFQUFBRyxHQUFBLENBYkEsQ0FBQTtBQWVBLFFBQUFHLGNBQUEsR0FBQSx1QkFDQUMsS0FBQSxJQUFBO0FBQ0EsUUFBQUEsS0FBQSxDQUFBQyxHQUFBLEtBQUEsT0FBQSxFQUFBO0FBQ0FILE1BQUFBLFdBQUE7QUFDQTtBQUNBLEdBTEEsRUFNQSxDQUFBQSxXQUFBLENBTkEsQ0FBQTtBQVNBLFFBQUFJLFlBQUEsR0FBQSx1QkFDQUYsS0FBQSxJQUFBO0FBQ0FSLElBQUFBLGNBQUEsQ0FBQVEsS0FBQSxDQUFBRyxhQUFBLENBQUFDLEtBQUEsQ0FBQTtBQUNBLEdBSEEsRUFJQSxDQUFBWixjQUFBLENBSkEsQ0FBQTtBQU9BLFFBQUFULFVBQUEsR0FBQSx1QkFDQXNCLFlBQUEsSUFBQVgsUUFBQSxDQUFBRCxLQUFBLENBQUFhLE1BQUEsQ0FBQXhCLElBQUEsSUFBQUEsSUFBQSxLQUFBdUIsWUFBQSxDQUFBLENBREEsRUFFQSxDQUFBWixLQUFBLENBRkEsQ0FBQTtBQUtBLFFBQUFULFVBQUEsR0FBQSx1QkFDQXVCLFlBQUEsSUFBQTtBQUNBO0FBQ0E7QUFDQSxVQUFBQyxLQUFBLEdBQUFmLEtBQUEsQ0FBQWdCLFNBQUEsQ0FBQTNCLElBQUEsSUFBQUEsSUFBQSxDQUFBYSxFQUFBLEtBQUFZLFlBQUEsQ0FBQVosRUFBQSxDQUFBO0FBRUFELElBQUFBLFFBQUEsQ0FDQUQsS0FBQSxDQUNBaUIsS0FEQSxDQUNBLENBREEsRUFDQUYsS0FEQSxFQUVBRyxNQUZBLENBRUEsRUFDQSxHQUFBSixZQURBO0FBRUFwQixNQUFBQSxVQUFBLEVBQUEsQ0FBQW9CLFlBQUEsQ0FBQXBCO0FBRkEsS0FGQSxFQU1Bd0IsTUFOQSxDQU1BbEIsS0FBQSxDQUFBaUIsS0FBQSxDQUFBRixLQUFBLEdBQUEsQ0FBQSxDQU5BLENBREEsQ0FBQTtBQVNBLEdBZkEsRUFnQkEsQ0FBQWYsS0FBQSxDQWhCQSxDQUFBO0FBbUJBLHNCQUNBLG9CQUFBLGNBQUEscUJBQ0EsdUNBREEsZUFFQTtBQUNBLElBQUEsSUFBQSxFQUFBLE1BREE7QUFFQSxJQUFBLFdBQUEsRUFBQSxrQkFGQTtBQUdBLElBQUEsS0FBQSxFQUFBRixXQUhBO0FBSUEsSUFBQSxRQUFBLEVBQUFXLFlBSkE7QUFLQSxJQUFBLFVBQUEsRUFBQUg7QUFMQSxJQUZBLGVBU0E7QUFBQSxJQUFBLFFBQUEsRUFBQVIsV0FBQSxLQUFBLEVBQUE7QUFBQSxJQUFBLE9BQUEsRUFBQU87QUFBQSxrQkFDQTtBQUFBLElBQUEsSUFBQSxFQUFBLEtBQUE7QUFBQSxrQkFBQTtBQUFBLFdBREEsQ0FUQSxlQWNBLGdDQUNBTCxLQUFBLENBQUFtQixHQUFBLENBQUE5QixJQUFBLGlCQUNBLG9CQUFBLFFBQUE7QUFDQSxJQUFBLEdBQUEsRUFBQUEsSUFBQSxDQUFBYSxFQURBO0FBRUEsSUFBQSxJQUFBLEVBQUFiLElBRkE7QUFHQSxJQUFBLFVBQUEsRUFBQUMsVUFIQTtBQUlBLElBQUEsVUFBQSxFQUFBQztBQUpBLElBREEsQ0FEQSxDQWRBLENBREE7QUEyQkEiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIENvcHlyaWdodCAoYykgRmFjZWJvb2ssIEluYy4gYW5kIGl0cyBhZmZpbGlhdGVzLlxuICpcbiAqIFRoaXMgc291cmNlIGNvZGUgaXMgbGljZW5zZWQgdW5kZXIgdGhlIE1JVCBsaWNlbnNlIGZvdW5kIGluIHRoZVxuICogTElDRU5TRSBmaWxlIGluIHRoZSByb290IGRpcmVjdG9yeSBvZiB0aGlzIHNvdXJjZSB0cmVlLlxuICpcbiAqIEBmbG93XG4gKi9cblxuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtGcmFnbWVudCwgdXNlQ2FsbGJhY2ssIHVzZVN0YXRlfSBmcm9tICdyZWFjdCc7XG5cbmV4cG9ydCBmdW5jdGlvbiBMaXN0SXRlbSh7aXRlbSwgcmVtb3ZlSXRlbSwgdG9nZ2xlSXRlbX0pIHtcbiAgY29uc3QgaGFuZGxlRGVsZXRlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHJlbW92ZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCByZW1vdmVJdGVtXSk7XG5cbiAgY29uc3QgaGFuZGxlVG9nZ2xlID0gdXNlQ2FsbGJhY2soKCkgPT4ge1xuICAgIHRvZ2dsZUl0ZW0oaXRlbSk7XG4gIH0sIFtpdGVtLCB0b2dnbGVJdGVtXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8bGk+XG4gICAgICA8YnV0dG9uIG9uQ2xpY2s9e2hhbmRsZURlbGV0ZX0+RGVsZXRlPC9idXR0b24+XG4gICAgICA8bGFiZWw+XG4gICAgICAgIDxpbnB1dFxuICAgICAgICAgIGNoZWNrZWQ9e2l0ZW0uaXNDb21wbGV0ZX1cbiAgICAgICAgICBvbkNoYW5nZT17aGFuZGxlVG9nZ2xlfVxuICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgIC8+eycgJ31cbiAgICAgICAge2l0ZW0udGV4dH1cbiAgICAgIDwvbGFiZWw+XG4gICAgPC9saT5cbiAgKTtcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIExpc3QocHJvcHMpIHtcbiAgY29uc3QgW25ld0l0ZW1UZXh0LCBzZXROZXdJdGVtVGV4dF0gPSB1c2VTdGF0ZSgnJyk7XG4gIGNvbnN0IFtpdGVtcywgc2V0SXRlbXNdID0gdXNlU3RhdGUoW1xuICAgIHtpZDogMSwgaXNDb21wbGV0ZTogdHJ1ZSwgdGV4dDogJ0ZpcnN0J30sXG4gICAge2lkOiAyLCBpc0NvbXBsZXRlOiB0cnVlLCB0ZXh0OiAnU2Vjb25kJ30sXG4gICAge2lkOiAzLCBpc0NvbXBsZXRlOiBmYWxzZSwgdGV4dDogJ1RoaXJkJ30sXG4gIF0pO1xuICBjb25zdCBbdWlkLCBzZXRVSURdID0gdXNlU3RhdGUoNCk7XG5cbiAgY29uc3QgaGFuZGxlQ2xpY2sgPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgaWYgKG5ld0l0ZW1UZXh0ICE9PSAnJykge1xuICAgICAgc2V0SXRlbXMoW1xuICAgICAgICAuLi5pdGVtcyxcbiAgICAgICAge1xuICAgICAgICAgIGlkOiB1aWQsXG4gICAgICAgICAgaXNDb21wbGV0ZTogZmFsc2UsXG4gICAgICAgICAgdGV4dDogbmV3SXRlbVRleHQsXG4gICAgICAgIH0sXG4gICAgICBdKTtcbiAgICAgIHNldFVJRCh1aWQgKyAxKTtcbiAgICAgIHNldE5ld0l0ZW1UZXh0KCcnKTtcbiAgICB9XG4gIH0sIFtuZXdJdGVtVGV4dCwgaXRlbXMsIHVpZF0pO1xuXG4gIGNvbnN0IGhhbmRsZUtleVByZXNzID0gdXNlQ2FsbGJhY2soXG4gICAgZXZlbnQgPT4ge1xuICAgICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VudGVyJykge1xuICAgICAgICBoYW5kbGVDbGljaygpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW2hhbmRsZUNsaWNrXSxcbiAgKTtcblxuICBjb25zdCBoYW5kbGVDaGFuZ2UgPSB1c2VDYWxsYmFjayhcbiAgICBldmVudCA9PiB7XG4gICAgICBzZXROZXdJdGVtVGV4dChldmVudC5jdXJyZW50VGFyZ2V0LnZhbHVlKTtcbiAgICB9LFxuICAgIFtzZXROZXdJdGVtVGV4dF0sXG4gICk7XG5cbiAgY29uc3QgcmVtb3ZlSXRlbSA9IHVzZUNhbGxiYWNrKFxuICAgIGl0ZW1Ub1JlbW92ZSA9PiBzZXRJdGVtcyhpdGVtcy5maWx0ZXIoaXRlbSA9PiBpdGVtICE9PSBpdGVtVG9SZW1vdmUpKSxcbiAgICBbaXRlbXNdLFxuICApO1xuXG4gIGNvbnN0IHRvZ2dsZUl0ZW0gPSB1c2VDYWxsYmFjayhcbiAgICBpdGVtVG9Ub2dnbGUgPT4ge1xuICAgICAgLy8gRG9udCB1c2UgaW5kZXhPZigpXG4gICAgICAvLyBiZWNhdXNlIGVkaXRpbmcgcHJvcHMgaW4gRGV2VG9vbHMgY3JlYXRlcyBhIG5ldyBPYmplY3QuXG4gICAgICBjb25zdCBpbmRleCA9IGl0ZW1zLmZpbmRJbmRleChpdGVtID0+IGl0ZW0uaWQgPT09IGl0ZW1Ub1RvZ2dsZS5pZCk7XG5cbiAgICAgIHNldEl0ZW1zKFxuICAgICAgICBpdGVtc1xuICAgICAgICAgIC5zbGljZSgwLCBpbmRleClcbiAgICAgICAgICAuY29uY2F0KHtcbiAgICAgICAgICAgIC4uLml0ZW1Ub1RvZ2dsZSxcbiAgICAgICAgICAgIGlzQ29tcGxldGU6ICFpdGVtVG9Ub2dnbGUuaXNDb21wbGV0ZSxcbiAgICAgICAgICB9KVxuICAgICAgICAgIC5jb25jYXQoaXRlbXMuc2xpY2UoaW5kZXggKyAxKSksXG4gICAgICApO1xuICAgIH0sXG4gICAgW2l0ZW1zXSxcbiAgKTtcblxuICByZXR1cm4gKFxuICAgIDxGcmFnbWVudD5cbiAgICAgIDxoMT5MaXN0PC9oMT5cbiAgICAgIDxpbnB1dFxuICAgICAgICB0eXBlPVwidGV4dFwiXG4gICAgICAgIHBsYWNlaG9sZGVyPVwiTmV3IGxpc3QgaXRlbS4uLlwiXG4gICAgICAgIHZhbHVlPXtuZXdJdGVtVGV4dH1cbiAgICAgICAgb25DaGFuZ2U9e2hhbmRsZUNoYW5nZX1cbiAgICAgICAgb25LZXlQcmVzcz17aGFuZGxlS2V5UHJlc3N9XG4gICAgICAvPlxuICAgICAgPGJ1dHRvbiBkaXNhYmxlZD17bmV3SXRlbVRleHQgPT09ICcnfSBvbkNsaWNrPXtoYW5kbGVDbGlja30+XG4gICAgICAgIDxzcGFuIHJvbGU9XCJpbWdcIiBhcmlhLWxhYmVsPVwiQWRkIGl0ZW1cIj5cbiAgICAgICAgICBBZGRcbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9idXR0b24+XG4gICAgICA8dWw+XG4gICAgICAgIHtpdGVtcy5tYXAoaXRlbSA9PiAoXG4gICAgICAgICAgPExpc3RJdGVtXG4gICAgICAgICAgICBrZXk9e2l0ZW0uaWR9XG4gICAgICAgICAgICBpdGVtPXtpdGVtfVxuICAgICAgICAgICAgcmVtb3ZlSXRlbT17cmVtb3ZlSXRlbX1cbiAgICAgICAgICAgIHRvZ2dsZUl0ZW09e3RvZ2dsZUl0ZW19XG4gICAgICAgICAgLz5cbiAgICAgICAgKSl9XG4gICAgICA8L3VsPlxuICAgIDwvRnJhZ21lbnQ+XG4gICk7XG59XG4iXX0=
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 43ef1a1b2686..f1283899feec 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -291,7 +291,7 @@ function createPanelIfReactLoaded() {
 
         render = (overrideTab = mostRecentOverrideTab) => {
           mostRecentOverrideTab = overrideTab;
-          import('./parseHookNames').then(
+          import('react-devtools-shared/src/hooks/parseHookNames').then(
             ({parseHookNames, prefetchSourceFiles, purgeCachedMetadata}) => {
               root.render(
                 createElement(DevTools, {
diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index d59dc05225ca..9d15ae7869d4 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -2,12 +2,17 @@
   "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.12.5",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-flow": "^7.10.4",
     "@babel/runtime": "^7.11.2",
     "@babel/traverse": "^7.12.5",
     "@reach/menu-button": "^0.16.1",
diff --git a/packages/react-devtools-extensions/src/ErrorTester.js b/packages/react-devtools-shared/src/hooks/ErrorTester.js
similarity index 100%
rename from packages/react-devtools-extensions/src/ErrorTester.js
rename to packages/react-devtools-shared/src/hooks/ErrorTester.js
diff --git a/packages/react-devtools-extensions/src/ErrorTesterCompiled.js b/packages/react-devtools-shared/src/hooks/ErrorTesterCompiled.js
similarity index 93%
rename from packages/react-devtools-extensions/src/ErrorTesterCompiled.js
rename to packages/react-devtools-shared/src/hooks/ErrorTesterCompiled.js
index 9bdbd8582dee..df4eb0797a70 100644
--- a/packages/react-devtools-extensions/src/ErrorTesterCompiled.js
+++ b/packages/react-devtools-shared/src/hooks/ErrorTesterCompiled.js
@@ -1,7 +1,7 @@
-"use strict";
+'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
+Object.defineProperty(exports, '__esModule', {
+  value: true,
 });
 exports.default = testErrorStack;
 exports.SOURCE_STACK_FRAME_LINE_NUMBER = void 0;
@@ -22,4 +22,4 @@ function testErrorStack() {
 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
\ No newline at end of file
+//# sourceURL=testErrorStack.js
diff --git a/packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
similarity index 100%
rename from packages/react-devtools-extensions/src/SourceMapMetadataConsumer.js
rename to packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
diff --git a/packages/react-devtools-extensions/src/SourceMapTypes.js b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
similarity index 100%
rename from packages/react-devtools-extensions/src/SourceMapTypes.js
rename to packages/react-devtools-shared/src/hooks/SourceMapTypes.js
diff --git a/packages/react-devtools-extensions/src/SourceMapUtils.js b/packages/react-devtools-shared/src/hooks/SourceMapUtils.js
similarity index 100%
rename from packages/react-devtools-extensions/src/SourceMapUtils.js
rename to packages/react-devtools-shared/src/hooks/SourceMapUtils.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentUsingHooksIndirectly.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/ComponentUsingHooksIndirectly.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentUsingHooksIndirectly.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithCustomHook.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithCustomHook.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithCustomHook.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithExternalCustomHooks.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithExternalCustomHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithExternalCustomHooks.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithMultipleHooksPerLine.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithNestedHooks.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/ComponentWithNestedHooks.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/ContainingStringSourceMappingURL.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/Example.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/Example.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/Example.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/InlineRequire.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/InlineRequire.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/README.md b/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/README.md
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/ToDoList.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js
similarity index 55%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js
index ac1230e138fe..a784dc153628 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js
@@ -7,14 +7,7 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
+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];
@@ -26,8 +19,25 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", null, "Count: ", count), /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
@@ -39,14 +49,7 @@ function useIsDarkMode() {
   return [isDarkMode, () => {}];
 }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
+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();
@@ -58,8 +61,31 @@ function Component$1() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/React__default.createElement("div", null, "Count: ", count), /*#__PURE__*/React__default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/React__default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
@@ -83,7 +109,7 @@ function useFoo() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/React.createContext('bright');
 function useTheme() {
@@ -92,17 +118,16 @@ function useTheme() {
   return theme;
 }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
+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", null, "theme: ", theme);
+  return /*#__PURE__*/React__default.createElement("div", {
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 16,
+      columnNumber: 10
+    }
+  }, "theme: ", theme);
 }
 
 /**
@@ -111,7 +136,7 @@ function Component$2() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/React.createContext(1);
 const B = /*#__PURE__*/React.createContext(2);
@@ -131,7 +156,7 @@ function Component$3() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 
 const {
@@ -153,34 +178,54 @@ var ComponentWithNestedHooks = {
 };
 var ComponentWithNestedHooks_1 = ComponentWithNestedHooks.Component;
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
+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", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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"));
 }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
+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", null, /*#__PURE__*/React__default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/React__default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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"));
 }
 
@@ -190,7 +235,7 @@ function Component$6() {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component$7() {
   const [count] = require('react').useState(0);
@@ -198,14 +243,7 @@ function Component$7() {
   return count;
 }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
+var _jsxFileName$5 = "/Users/bvaughn/Documents/git/react/packages/react-devtools-shared/src/hooks/__tests__/__source__/ToDoList.js";
 function ListItem({
   item,
   removeItem,
@@ -217,12 +255,34 @@ function ListItem({
   const handleToggle = React.useCallback(() => {
     toggleItem(item);
   }, [item, toggleItem]);
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+  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"
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 26,
+      columnNumber: 9
+    }
   }), ' ', item.text));
 }
 function List(props) {
@@ -269,23 +329,61 @@ function List(props) {
       isComplete: !itemToToggle.isComplete
     }).concat(items.slice(index + 1)));
   }, [items]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+  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
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 104,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement("button", {
     disabled: newItemText === '',
-    onClick: handleClick
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 111,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("span", {
     role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    "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
+    toggleItem: toggleItem,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 118,
+      columnNumber: 11
+    }
   }))));
 }
 
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js.map
similarity index 59%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js.map
index 084db3b87159..9727db1ba526 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/bundle/index.js.map
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/bundle/index.js.map
@@ -1 +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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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":";;;;;;;;;AAAA;;;;;;;;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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;AC3CD;;;;;;;;AASA,AAEO,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,yDAAiBH,UAAjB,CADF,eAEEG,qDAAaP,KAAb,CAFF,eAGEO,mDAAWG,GAAX,CAHF,eAIEH;AAAQ,IAAA,OAAO,EAAED;AAAjB,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;;ACjBD;;;;;;;;AASA,AAGO,SAASnB,WAAT,GAAqB;AAC1B,QAAMmB,KAAK,GAAGD,QAAQ,EAAtB;AAEA,sBAAOR,qDAAaS,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;;;ACrBA;;;;;;;;AASA;AAIA,AAAO,SAASA,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,gBAFF,CADF;AAMD;;ACtBD;;;;;;;;AASA,AAEO,SAASH,WAAT,GAAqB;AAC1B,QAAM,CAACG,KAAD,EAAQC,QAAR,IAAoBF,cAAQ,CAAC,CAAD,CAAlC;AAEA,sBACEQ,uDACEA,wDAAgBP,KAAhB,WADF,eAEEO;AAAQ,IAAA,OAAO,EAAE,MAAMN,QAAQ,CAACD,KAAK,GAAG,CAAT;AAA/B,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;;ACbD;;;;;;;;AASA,AAGO,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,6CACEA;AAAQ,IAAA,OAAO,EAAEH;AAAjB,cADF,eAEEG,gDACEA;AACE,IAAA,OAAO,EAAEN,IAAI,CAACO,UADhB;AAEE,IAAA,QAAQ,EAAEF,YAFZ;AAGE,IAAA,IAAI,EAAC;AAHP,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,qBACExB,uCADF,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;AALd,IAFF,eASEX;AAAQ,IAAA,QAAQ,EAAEI,WAAW,KAAK,EAAlC;AAAsC,IAAA,OAAO,EAAEpC;AAA/C,kBACEgC;AAAM,IAAA,IAAI,EAAC,KAAX;AAAiB,kBAAW;AAA5B,WADF,CATF,eAcEA,gCACGM,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;AAJd,IADD,CADH,CAdF,CADF;AA2BD;;;;;;;;;;;;;;;;;;;"}
\ No newline at end of file
+{"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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
similarity index 79%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
index fd8c1cdadf35..2e93ee9b1b68 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const countState = (0, _react.useState)(0);
   const count = countState[0];
@@ -30,8 +24,25 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..9183dd2ad5c5
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
similarity index 73%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
index e9441c46a401..02f3a9b7c8d8 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithCustomHook.js
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
   const isDarkMode = useIsDarkMode();
@@ -30,8 +24,31 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..95af8b213442
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
similarity index 62%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
index 2a3f24cad910..59566708dec5 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithExternalCustomHooks.js
@@ -9,18 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 
+var _jsxFileName = "";
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+  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 000000000000..6e897455967e
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
index e569ffa7d850..b457f1a10cf7 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
index ec85bcad867e..3b079a38a03a 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
@@ -6,7 +6,7 @@
  * 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,
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
similarity index 70%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
index ffa5f98aeaf9..f021ab071497 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
@@ -7,23 +7,34 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
 // ?sourceMappingURL=([^\s'"]+)/gm
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..9042c2eab995
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js
similarity index 69%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js
index 2ab9daad9b7b..90c65d8d135e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/Example.js
@@ -7,22 +7,33 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..1c2f0b6e245f
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js
index b9b234f86bdb..1422d9d0a42c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js.map
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/InlineRequire.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js
similarity index 65%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js
index d506efef4769..1d8c1f25b600 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/ToDoList.js
@@ -8,18 +8,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function ListItem({
   item,
   removeItem,
@@ -31,12 +25,34 @@ function ListItem({
   const handleToggle = (0, React.useCallback)(() => {
     toggleItem(item);
   }, [item, toggleItem]);
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+  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"
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
   }), ' ', item.text));
 }
 
@@ -84,23 +100,61 @@ function List(props) {
       isComplete: !itemToToggle.isComplete
     }).concat(items.slice(index + 1)));
   }, [items]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+  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
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement("button", {
     disabled: newItemText === '',
-    onClick: handleClick
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("span", {
     role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    "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
+    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 000000000000..5d9308b19da0
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 79%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentUsingHooksIndirectly.js
index fd8c1cdadf35..2e93ee9b1b68 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const countState = (0, _react.useState)(0);
   const count = countState[0];
@@ -30,8 +24,25 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..c9c67a4e4e36
--- /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) Facebook, Inc. and its 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-extensions/src/__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/ComponentWithCustomHook.js
similarity index 73%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
index e9441c46a401..02f3a9b7c8d8 100644
--- a/packages/react-devtools-extensions/src/__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/ComponentWithCustomHook.js
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
   const isDarkMode = useIsDarkMode();
@@ -30,8 +24,31 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..5c97923d82f4
--- /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) Facebook, Inc. and its 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-extensions/src/__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/ComponentWithExternalCustomHooks.js
similarity index 62%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
index 2a3f24cad910..59566708dec5 100644
--- a/packages/react-devtools-extensions/src/__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/ComponentWithExternalCustomHooks.js
@@ -9,18 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 
+var _jsxFileName = "";
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+  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 000000000000..9e1900b56ff2
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
index e569ffa7d850..b457f1a10cf7 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js.map
diff --git a/packages/react-devtools-extensions/src/__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/ComponentWithNestedHooks.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js
index ec85bcad867e..3b079a38a03a 100644
--- a/packages/react-devtools-extensions/src/__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/ComponentWithNestedHooks.js
@@ -6,7 +6,7 @@
  * 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,
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithNestedHooks.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
similarity index 70%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
index ffa5f98aeaf9..f021ab071497 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ContainingStringSourceMappingURL.js
@@ -7,23 +7,34 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
 // ?sourceMappingURL=([^\s'"]+)/gm
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..7e4ec882bd28
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
similarity index 69%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
index 2ab9daad9b7b..90c65d8d135e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/Example.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
@@ -7,22 +7,33 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..683d7d431f83
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js
index b9b234f86bdb..1422d9d0a42c 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/InlineRequire.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
similarity index 65%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
index d506efef4769..1d8c1f25b600 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ToDoList.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
@@ -8,18 +8,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function ListItem({
   item,
   removeItem,
@@ -31,12 +25,34 @@ function ListItem({
   const handleToggle = (0, React.useCallback)(() => {
     toggleItem(item);
   }, [item, toggleItem]);
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+  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"
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
   }), ' ', item.text));
 }
 
@@ -84,23 +100,61 @@ function List(props) {
       isComplete: !itemToToggle.isComplete
     }).concat(items.slice(index + 1)));
   }, [items]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+  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
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement("button", {
     disabled: newItemText === '',
-    onClick: handleClick
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("span", {
     role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    "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
+    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 000000000000..fba93827baad
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
similarity index 79%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
index fd8c1cdadf35..2e93ee9b1b68 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentUsingHooksIndirectly.js
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const countState = (0, _react.useState)(0);
   const count = countState[0];
@@ -30,8 +24,25 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..d5561d98758a
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
similarity index 73%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
index e9441c46a401..02f3a9b7c8d8 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithCustomHook.js
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
   const isDarkMode = useIsDarkMode();
@@ -30,8 +24,31 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..87bc40ea1f0b
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
similarity index 62%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
index 2a3f24cad910..59566708dec5 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithExternalCustomHooks.js
@@ -9,18 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 
+var _jsxFileName = "";
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+  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 000000000000..f66cc99ff89c
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
index e569ffa7d850..b457f1a10cf7 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
index ec85bcad867e..3b079a38a03a 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js
@@ -6,7 +6,7 @@
  * 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,
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ComponentWithNestedHooks.js.map
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 70%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ContainingStringSourceMappingURL.js
index ffa5f98aeaf9..f021ab071497 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -7,23 +7,34 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
 // ?sourceMappingURL=([^\s'"]+)/gm
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..b93796260257
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
similarity index 69%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
index 2ab9daad9b7b..90c65d8d135e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/Example.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/Example.js
@@ -7,22 +7,33 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..f9f5965d6721
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
index b9b234f86bdb..1422d9d0a42c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/InlineRequire.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
similarity index 65%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
index d506efef4769..1d8c1f25b600 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ToDoList.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
@@ -8,18 +8,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function ListItem({
   item,
   removeItem,
@@ -31,12 +25,34 @@ function ListItem({
   const handleToggle = (0, React.useCallback)(() => {
     toggleItem(item);
   }, [item, toggleItem]);
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+  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"
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
   }), ' ', item.text));
 }
 
@@ -84,23 +100,61 @@ function List(props) {
       isComplete: !itemToToggle.isComplete
     }).concat(items.slice(index + 1)));
   }, [items]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+  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
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement("button", {
     disabled: newItemText === '',
-    onClick: handleClick
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("span", {
     role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    "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
+    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 000000000000..b3f0914113dc
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/index.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
index 5cabcdde5f6d..da67596f8141 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js.map
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/index.js.map
diff --git a/packages/react-devtools-extensions/src/__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/useTheme.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js
index 5cabcdde5f6d..da67596f8141 100644
--- a/packages/react-devtools-extensions/src/__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/useTheme.js
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/fb-sources-extended/useTheme.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
similarity index 79%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
index fd8c1cdadf35..2e93ee9b1b68 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentUsingHooksIndirectly.js
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const countState = (0, _react.useState)(0);
   const count = countState[0];
@@ -30,8 +24,25 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..baba55e7aaed
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
similarity index 73%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
index e9441c46a401..02f3a9b7c8d8 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithCustomHook.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithCustomHook.js
@@ -7,18 +7,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
   const isDarkMode = useIsDarkMode();
@@ -30,8 +24,31 @@ function Component() {
 
   const handleClick = () => setCount(count + 1);
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, "Dark mode? ", isDarkMode), /*#__PURE__*/_react.default.createElement("div", null, "Count: ", count), /*#__PURE__*/_react.default.createElement("div", null, "Foo: ", foo), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: handleClick
+  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"));
 }
 
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 000000000000..ce735e492ed6
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
similarity index 62%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
index 2a3f24cad910..59566708dec5 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithExternalCustomHooks.js
@@ -9,18 +9,18 @@ var _react = _interopRequireDefault(require("react"));
 
 var _useTheme = _interopRequireDefault(require("./useTheme"));
 
+var _jsxFileName = "";
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const theme = (0, _useTheme.default)();
-  return /*#__PURE__*/_react.default.createElement("div", null, "theme: ", theme);
+  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 000000000000..1a4be245a129
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
index e569ffa7d850..b457f1a10cf7 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithMultipleHooksPerLine.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
index ec85bcad867e..3b079a38a03a 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js
@@ -6,7 +6,7 @@
  * 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,
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ComponentWithNestedHooks.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
similarity index 70%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
index ffa5f98aeaf9..f021ab071497 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ContainingStringSourceMappingURL.js
@@ -7,23 +7,34 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and 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
- */
 // ?sourceMappingURL=([^\s'"]+)/gm
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..17110ef7d630
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/Example.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js
similarity index 69%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js
index 2ab9daad9b7b..90c65d8d135e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/Example.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/Example.js
@@ -7,22 +7,33 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function Component() {
   const [count, setCount] = (0, _react.useState)(0);
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You clicked ", count, " times"), /*#__PURE__*/_react.default.createElement("button", {
-    onClick: () => setCount(count + 1)
+  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 000000000000..3ec5761b77d5
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
index b9b234f86bdb..1422d9d0a42c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/InlineRequire.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/InlineRequire.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
similarity index 65%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
index d506efef4769..1d8c1f25b600 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/fb-sources-extended/index-map/ToDoList.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/ToDoList.js
@@ -8,18 +8,12 @@ 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; }
 
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
 function ListItem({
   item,
   removeItem,
@@ -31,12 +25,34 @@ function ListItem({
   const handleToggle = (0, React.useCallback)(() => {
     toggleItem(item);
   }, [item, toggleItem]);
-  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("button", {
-    onClick: handleDelete
-  }, "Delete"), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+  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"
+    type: "checkbox",
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 26,
+      columnNumber: 9
+    }
   }), ' ', item.text));
 }
 
@@ -84,23 +100,61 @@ function List(props) {
       isComplete: !itemToToggle.isComplete
     }).concat(items.slice(index + 1)));
   }, [items]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "List"), /*#__PURE__*/React.createElement("input", {
+  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
+    onKeyPress: handleKeyPress,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 104,
+      columnNumber: 7
+    }
   }), /*#__PURE__*/React.createElement("button", {
     disabled: newItemText === '',
-    onClick: handleClick
+    onClick: handleClick,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 111,
+      columnNumber: 7
+    }
   }, /*#__PURE__*/React.createElement("span", {
     role: "img",
-    "aria-label": "Add item"
-  }, "Add")), /*#__PURE__*/React.createElement("ul", null, items.map(item => /*#__PURE__*/React.createElement(ListItem, {
+    "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
+    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 000000000000..58fa50888bfa
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/index.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/index.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js
index 5cabcdde5f6d..da67596f8141 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index-map/useTheme.js.map
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js.map
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/index.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/index.js.map
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 000000000000..2e93ee9b1b68
--- /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 000000000000..bcef3d968874
--- /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) Facebook, Inc. and its 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 000000000000..02f3a9b7c8d8
--- /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 000000000000..2cb37571951a
--- /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) Facebook, Inc. and its 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 000000000000..59566708dec5
--- /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 000000000000..6e9d81fbde3f
--- /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) Facebook, Inc. and its 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 000000000000..b457f1a10cf7
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithMultipleHooksPerLine.js.map
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 000000000000..3b079a38a03a
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/ComponentWithNestedHooks.js.map
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 000000000000..f021ab071497
--- /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 000000000000..676bca71b149
--- /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) Facebook, Inc. and its 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 000000000000..90c65d8d135e
--- /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 000000000000..2dc7d8b36302
--- /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) Facebook, Inc. and its 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 000000000000..1422d9d0a42c
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/InlineRequire.js.map
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 000000000000..1d8c1f25b600
--- /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 000000000000..632beaba6c45
--- /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) Facebook, Inc. and its 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 000000000000..2e93ee9b1b68
--- /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 000000000000..c2b364b5c9e3
--- /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) Facebook, Inc. and its 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 000000000000..02f3a9b7c8d8
--- /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 000000000000..ab68c2af722c
--- /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) Facebook, Inc. and its 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 000000000000..59566708dec5
--- /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 000000000000..c4d956a2be99
--- /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) Facebook, Inc. and its 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 000000000000..b457f1a10cf7
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js.map
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 000000000000..3b079a38a03a
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/ComponentWithNestedHooks.js.map
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 000000000000..f021ab071497
--- /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 000000000000..abd45e5a7e8b
--- /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) Facebook, Inc. and its 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 000000000000..90c65d8d135e
--- /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 000000000000..299e825d0f9c
--- /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) Facebook, Inc. and its 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 000000000000..1422d9d0a42c
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/InlineRequire.js.map
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 000000000000..1d8c1f25b600
--- /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 000000000000..0eda28cdba81
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/index.js.map
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 98%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js
index 5cabcdde5f6d..da67596f8141 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index-map/useTheme.js.map
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/index.js.map
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 000000000000..da67596f8141
--- /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) Facebook, Inc. and its 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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/react-sources-extended/useTheme.js.map
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 000000000000..da67596f8141
--- /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) Facebook, Inc. and its 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-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js.map b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js.map
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/external/useTheme.js.map
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/external/useTheme.js.map
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 000000000000..926a6dabdac7
--- /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 000000000000..0c80e4790cfe
--- /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 000000000000..32c9bee83857
--- /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-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
index 4b9037ab9cb2..796ce5cfee91 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithMultipleHooksPerLine.js
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
index e119f7fb6015..3c8fe8c59a0f 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/ComponentWithNestedHooks.js
@@ -6,7 +6,7 @@
  * 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,
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 000000000000..a30090ae4891
--- /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 000000000000..9a0d3bb203f7
--- /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-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/InlineRequire.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/InlineRequire.js
index 83458fd428fa..07e2f01741f0 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/InlineRequire.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/InlineRequire.js
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
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 000000000000..f8bb60fac02e
--- /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 000000000000..e3b87798f3b6
--- /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 000000000000..68e05ca77a3c
--- /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 000000000000..01dc8d114ac2
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithMultipleHooksPerLine.js
index 8656dfb2097e..e98a98e23182 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/ComponentWithNestedHooks.js
index 96bf34919c5f..f6a88f274270 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -6,7 +6,7 @@
  * 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,
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 000000000000..60f6de600487
--- /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 000000000000..24fd5f2146b1
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/InlineRequire.js
index 83ea8230ba98..6289266bc12a 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
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 000000000000..60355e08aa30
--- /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 000000000000..017f18fabb22
--- /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 000000000000..d17c19c4b832
--- /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 000000000000..e45008a1590c
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
index e1a5c7634e41..6b531d55133a 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/ComponentWithNestedHooks.js
index ffb582426e5e..caa080662a68 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -6,7 +6,7 @@
  * 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,
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 000000000000..a8769ab709e5
--- /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 000000000000..488613b24b93
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/InlineRequire.js
index e9293ce11d4f..d3eced648fd2 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
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 000000000000..dc124978bdba
--- /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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index-map/useTheme.js
index ea4be9035be5..b988df960dab 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/fb-sources-extended/useTheme.js
index 43c7be71d36a..6cc0bbb41aa1 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
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 000000000000..a398aa004003
--- /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 000000000000..33a51f995999
--- /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 000000000000..78b83cfae95c
--- /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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
index 622c40411ed6..687be826cb6d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithMultipleHooksPerLine.js
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
index ecb11d4a9094..abe1d2b345f3 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/ComponentWithNestedHooks.js
@@ -6,7 +6,7 @@
  * 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,
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 000000000000..6dde56f8b4c6
--- /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 000000000000..e0ef94e8f7d8
--- /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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
index aadb2b3b5c9d..90048ce54b5c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/InlineRequire.js
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
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 000000000000..f0aabdd955fd
--- /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-extensions/src/__tests__/__source__/__compiled__/inline/index-map/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/index.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/index.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
index e4c71f07ae71..5fe0a22e3348 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index-map/useTheme.js
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/index.js
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 000000000000..1b8fd83c6936
--- /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 000000000000..d8c13a720a3a
--- /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 000000000000..4c291c467019
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithMultipleHooksPerLine.js
index c79712b13704..fee144674550 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/ComponentWithNestedHooks.js
index d9394fd366ea..37ae381e92a9 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -6,7 +6,7 @@
  * 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,
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 000000000000..4221ec179c69
--- /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 000000000000..124b710ac22e
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/InlineRequire.js
index a215395840d7..aaa615945512 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
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 000000000000..c07d8d03d08b
--- /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 000000000000..8cee7130df05
--- /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 000000000000..d0f15fc054f4
--- /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 000000000000..aa954bd50ae9
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithMultipleHooksPerLine.js
index b9e998a35baf..b46f2a341e79 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/ComponentWithNestedHooks.js
index cde7af4fe5ab..86f2cb68133a 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -6,7 +6,7 @@
  * 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,
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 000000000000..027609f63dcb
--- /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 000000000000..0b362bd37197
--- /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-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/InlineRequire.js
index d78461f7c35f..ac2e63b8e654 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
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 000000000000..196adbf60176
--- /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-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index-map/useTheme.js
index ccef36349931..78aa7479dea3 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/index.js
diff --git a/packages/react-devtools-extensions/src/__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
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/react-sources-extended/useTheme.js
index 44d321d6a6b1..0ad9bce5d177 100644
--- a/packages/react-devtools-extensions/src/__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
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/useTheme.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/useTheme.js
index 0703c679363c..7b4120dc079d 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/inline/useTheme.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/inline/useTheme.js
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
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 000000000000..3b1a5ad57417
--- /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 000000000000..055244b33a7b
--- /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 000000000000..7f0b1b1104f8
--- /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-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
index b05cd188f468..c2ef3cc73e0a 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithMultipleHooksPerLine.js
@@ -13,7 +13,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const A = /*#__PURE__*/(0, _react.createContext)(1);
 const B = /*#__PURE__*/(0, _react.createContext)(2);
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
index 7d715c36305d..e18c2cdce92e 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/ComponentWithNestedHooks.js
@@ -6,7 +6,7 @@
  * 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,
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 000000000000..50d73d23db2e
--- /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 000000000000..aca089340fb2
--- /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-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
index 45f22810dfbe..863fc440b03c 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/InlineRequire.js
@@ -11,7 +11,7 @@ exports.Component = Component;
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 function Component() {
   const [count] = require('react').useState(0);
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 000000000000..c3efb4e4861e
--- /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-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/index.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/index.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/useTheme.js
similarity index 99%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/useTheme.js
index 7a1b76c59c00..30fab38360e0 100644
--- a/packages/react-devtools-extensions/src/__tests__/__source__/__compiled__/no-columns/useTheme.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__compiled__/no-columns/useTheme.js
@@ -14,7 +14,7 @@ var _react = require("react");
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * 
  */
 const ThemeContext = /*#__PURE__*/(0, _react.createContext)('bright');
 exports.ThemeContext = ThemeContext;
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentUsingHooksIndirectly.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithExternalUseEffect.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNamedCustomHooks.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithNestedHooks.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUnnamedCustomHooks.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseEffect.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseReducer.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseState.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/ComponentWithUseState.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/ComponentWithUseState.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/README.md b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/README.md
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/README.md
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/README.md
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/useCustom.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/useCustom.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/__untransformed__/useCustom.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/__untransformed__/useCustom.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/index.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/index.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/index.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/index.js
diff --git a/packages/react-devtools-extensions/src/__tests__/__source__/useTheme.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/useTheme.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/__source__/useTheme.js
rename to packages/react-devtools-shared/src/hooks/__tests__/__source__/useTheme.js
diff --git a/packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js b/packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/generateHookMap-test.js
rename to packages/react-devtools-shared/src/hooks/__tests__/generateHookMap-test.js
diff --git a/packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js b/packages/react-devtools-shared/src/hooks/__tests__/getHookNameForLocation-test.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/getHookNameForLocation-test.js
rename to packages/react-devtools-shared/src/hooks/__tests__/getHookNameForLocation-test.js
diff --git a/packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js b/packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/parseHookNames-test.js
rename to packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js
diff --git a/packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js b/packages/react-devtools-shared/src/hooks/__tests__/updateMockSourceMaps.js
similarity index 100%
rename from packages/react-devtools-extensions/src/__tests__/updateMockSourceMaps.js
rename to packages/react-devtools-shared/src/hooks/__tests__/updateMockSourceMaps.js
diff --git a/packages/react-devtools-extensions/src/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
similarity index 100%
rename from packages/react-devtools-extensions/src/astUtils.js
rename to packages/react-devtools-shared/src/hooks/astUtils.js
diff --git a/packages/react-devtools-extensions/src/generateHookMap.js b/packages/react-devtools-shared/src/hooks/generateHookMap.js
similarity index 100%
rename from packages/react-devtools-extensions/src/generateHookMap.js
rename to packages/react-devtools-shared/src/hooks/generateHookMap.js
diff --git a/packages/react-devtools-extensions/src/getHookNameForLocation.js b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
similarity index 100%
rename from packages/react-devtools-extensions/src/getHookNameForLocation.js
rename to packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
diff --git a/packages/react-devtools-extensions/src/parseHookNames/index.js b/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
similarity index 100%
rename from packages/react-devtools-extensions/src/parseHookNames/index.js
rename to packages/react-devtools-shared/src/hooks/parseHookNames/index.js
diff --git a/packages/react-devtools-extensions/src/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
similarity index 99%
rename from packages/react-devtools-extensions/src/parseHookNames/loadSourceAndMetadata.js
rename to packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
index dad3b864636b..bcfe573ee888 100644
--- a/packages/react-devtools-extensions/src/parseHookNames/loadSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
@@ -61,7 +61,7 @@ import type {
   HookSource,
   HooksTree,
 } from 'react-debug-tools/src/ReactDebugHooks';
-import type {MixedSourceMap} from 'react-devtools-extensions/src/SourceMapTypes';
+import type {MixedSourceMap} from '../SourceMapTypes';
 import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 // Prefer a cached albeit stale response to reduce download time.
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
similarity index 100%
rename from packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.js
rename to packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
diff --git a/packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.worker.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.worker.js
similarity index 100%
rename from packages/react-devtools-extensions/src/parseHookNames/parseSourceAndMetadata.worker.js
rename to packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.worker.js
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 5108c61aa402..7a57b72fb9bb 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -61,8 +61,7 @@ module.exports = Object.assign({}, baseConfig, {
     '/__compiled__/',
     '/__untransformed__/',
   ],
-  testRegex:
-    'packages/react-devtools-(extensions|shared)/src/__tests__/[^]+.test.js$',
+  testRegex: 'packages/react-devtools-shared/.+/__tests__/[^]+.test.js$',
   snapshotSerializers: [
     require.resolve(
       '../../packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js'

From 031abd24b62b7b0db2e8658ffce7728eb8592d32 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 7 Sep 2021 12:08:33 -0400
Subject: [PATCH 0829/1603] Add warning and test for useSyncExternalStore when
 getSnapshot isn't cached (#22262)

* add warning and test

* Wrap console error in __DEV__ flag

* prettier
---
 .../useSyncExternalStoreShared-test.js        | 26 +++++++++++++++++++
 .../src/useSyncExternalStore.js               | 11 ++++++++
 2 files changed, 37 insertions(+)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 8db73a8e8c77..3102087b8e90 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -618,4 +618,30 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A1B1');
     });
   });
+
+  test('Infinite loop if getSnapshot keeps returning new reference', () => {
+    const store = createExternalStore({});
+
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, () => ({}));
+      return <Text text={JSON.stringify(text)} />;
+    }
+
+    spyOnDev(console, 'error');
+
+    expect(() => {
+      act(() => {
+        createRoot(<App />);
+      });
+    }).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.',
+    );
+    if (__DEV__) {
+      expect(console.error.calls.argsFor(0)[0]).toMatch(
+        'The result of getSnapshot should be cached to avoid an infinite loop',
+      );
+    }
+  });
 });
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 55853f6e9b8a..8607c915eb72 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -29,6 +29,7 @@ export const useSyncExternalStore =
   builtInAPI !== undefined ? builtInAPI : useSyncExternalStore_shim;
 
 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
@@ -63,6 +64,16 @@ function useSyncExternalStore_shim<T>(
   // implementation details, most importantly that updates are
   // always synchronous.
   const value = getSnapshot();
+  if (__DEV__) {
+    if (!didWarnUncachedGetSnapshot) {
+      if (value !== getSnapshot()) {
+        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

From 77912d9a05d7a90287fabdec76486f25869b2981 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 7 Sep 2021 13:20:24 -0400
Subject: [PATCH 0830/1603] Wire up the native API for useSyncExternalStore
 (#22237)

Adds useSyncExternalStore to the internal dispatcher, and exports
the native API from the React package without yet implementing it.
---
 .../react-debug-tools/src/ReactDebugHooks.js  |   8 +
 .../src/server/ReactPartialRendererHooks.js   |   8 +
 .../src/ReactFiberHooks.new.js                |  77 +++++++++
 .../src/ReactFiberHooks.old.js                |  77 +++++++++
 .../src/ReactInternalTypes.js                 |   5 +
 packages/react-server/src/ReactFizzHooks.js   |   8 +
 .../react-server/src/ReactFlightServer.js     |   1 +
 .../src/ReactSuspenseTestUtils.js             |   1 +
 packages/react/index.classic.fb.js            |   2 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   2 +
 packages/react/index.modern.fb.js             |   2 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   8 +
 .../useSyncExternalStoreShared-test.js        | 162 +++++++++++-------
 .../src/useSyncExternalStore.js               |   6 +-
 scripts/jest/TestFlags.js                     |   2 +
 17 files changed, 311 insertions(+), 61 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 7d2679b319ce..0e2364f672b7 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -265,6 +265,13 @@ function useMutableSource<Source, Snapshot>(
   return value;
 }
 
+function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  throw new Error('Not yet implemented');
+}
+
 function useTransition(): [boolean, (() => void) => void] {
   // useTransition() composes multiple hooks internally.
   // Advance the current hook index the same number of times
@@ -326,6 +333,7 @@ const Dispatcher: DispatcherType = {
   useState,
   useTransition,
   useMutableSource,
+  useSyncExternalStore,
   useDeferredValue,
   useOpaqueIdentifier,
 };
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 433ab9ae078b..0712d9fee928 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -462,6 +462,13 @@ function useMutableSource<Source, Snapshot>(
   return getSnapshot(source._source);
 }
 
+function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  throw new Error('Not yet implemented');
+}
+
 function useDeferredValue<T>(value: T): T {
   resolveCurrentlyRenderingComponent();
   return value;
@@ -514,6 +521,7 @@ export const Dispatcher: DispatcherType = {
   useOpaqueIdentifier,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
+  useSyncExternalStore,
 };
 
 if (enableCache) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index b19530e24b5d..40beec7f8c74 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1242,6 +1242,20 @@ function updateMutableSource<Source, Snapshot>(
   return useMutableSource(hook, source, getSnapshot, subscribe);
 }
 
+function mountSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  throw new Error('Not yet implemented');
+}
+
+function updateSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  throw new Error('Not yet implemented');
+}
+
 function mountState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
@@ -2079,6 +2093,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useDeferredValue: throwInvalidHookError,
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
+  useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2104,6 +2119,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useDeferredValue: mountDeferredValue,
   useTransition: mountTransition,
   useMutableSource: mountMutableSource,
+  useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2129,6 +2145,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useDeferredValue: updateDeferredValue,
   useTransition: updateTransition,
   useMutableSource: updateMutableSource,
+  useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2154,6 +2171,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
+  useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2302,6 +2320,14 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      mountHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       mountHookTypesDev();
@@ -2426,6 +2452,14 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       updateHookTypesDev();
@@ -2550,6 +2584,14 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       updateHookTypesDev();
@@ -2675,6 +2717,14 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       updateHookTypesDev();
@@ -2813,6 +2863,15 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       warnInvalidHookAccess();
@@ -2952,6 +3011,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       warnInvalidHookAccess();
@@ -3092,6 +3160,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       warnInvalidHookAccess();
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index fb1e9b86883a..08c61e9b162f 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1242,6 +1242,20 @@ function updateMutableSource<Source, Snapshot>(
   return useMutableSource(hook, source, getSnapshot, subscribe);
 }
 
+function mountSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  throw new Error('Not yet implemented');
+}
+
+function updateSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  throw new Error('Not yet implemented');
+}
+
 function mountState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
@@ -2079,6 +2093,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useDeferredValue: throwInvalidHookError,
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
+  useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2104,6 +2119,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useDeferredValue: mountDeferredValue,
   useTransition: mountTransition,
   useMutableSource: mountMutableSource,
+  useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2129,6 +2145,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useDeferredValue: updateDeferredValue,
   useTransition: updateTransition,
   useMutableSource: updateMutableSource,
+  useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2154,6 +2171,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
+  useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2302,6 +2320,14 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      mountHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       mountHookTypesDev();
@@ -2426,6 +2452,14 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       updateHookTypesDev();
@@ -2550,6 +2584,14 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       updateHookTypesDev();
@@ -2675,6 +2717,14 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       updateHookTypesDev();
@@ -2813,6 +2863,15 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       warnInvalidHookAccess();
@@ -2952,6 +3011,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       warnInvalidHookAccess();
@@ -3092,6 +3160,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateMutableSource(source, getSnapshot, subscribe);
     },
+    useSyncExternalStore<T>(
+      subscribe: (() => void) => () => void,
+      getSnapshot: () => T,
+    ): T {
+      currentHookNameInDev = 'useSyncExternalStore';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateSyncExternalStore(subscribe, getSnapshot);
+    },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
       warnInvalidHookAccess();
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 5a4bc6237425..33bdb24af04d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -41,6 +41,7 @@ export type HookType =
   | 'useDeferredValue'
   | 'useTransition'
   | 'useMutableSource'
+  | 'useSyncExternalStore'
   | 'useOpaqueIdentifier'
   | 'useCacheRefresh';
 
@@ -304,6 +305,10 @@ export type Dispatcher = {|
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
     subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
   ): Snapshot,
+  useSyncExternalStore<T>(
+    subscribe: (() => void) => () => void,
+    getSnapshot: () => T,
+  ): T,
   useOpaqueIdentifier(): any,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
 
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 23a35c1803f7..51ea84e8c43d 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -461,6 +461,13 @@ function useMutableSource<Source, Snapshot>(
   return getSnapshot(source._source);
 }
 
+function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  throw new Error('Not yet implemented');
+}
+
 function useDeferredValue<T>(value: T): T {
   resolveCurrentlyRenderingComponent();
   return value;
@@ -509,6 +516,7 @@ export const Dispatcher: DispatcherType = {
   useOpaqueIdentifier,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
+  useSyncExternalStore,
 };
 
 if (enableCache) {
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index dd5b43df2d35..efac391833e8 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -827,6 +827,7 @@ const Dispatcher: DispatcherType = {
   useEffect: (unsupportedHook: any),
   useOpaqueIdentifier: (unsupportedHook: any),
   useMutableSource: (unsupportedHook: any),
+  useSyncExternalStore: (unsupportedHook: any),
   useCacheRefresh(): <T>(?() => T, ?T) => void {
     return unsupportedRefresh;
   },
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index 43c6c5184d2b..ca898150b7cd 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -44,6 +44,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useTransition: unsupported,
     useOpaqueIdentifier: unsupported,
     useMutableSource: unsupported,
+    useSyncExternalStore: unsupported,
     useCacheRefresh: unsupported,
   };
   // Not using async/await because we don't compile it.
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 653013c7b079..756f69f27133 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -51,6 +51,8 @@ export {
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
+  useSyncExternalStore,
+  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index ab90ea66bc11..230e94f3a528 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -45,6 +45,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
+  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.js b/packages/react/index.js
index 247d17ec01b8..c2285c6b0b31 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -70,6 +70,8 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource,
+  useSyncExternalStore,
+  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 4f316eacad8b..d87d7c891ee8 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -50,6 +50,8 @@ export {
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
+  useSyncExternalStore,
+  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 2b87d18b6c81..24421bd86c49 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -44,6 +44,7 @@ import {
   useLayoutEffect,
   useMemo,
   useMutableSource,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
@@ -93,6 +94,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 82bd886d8245..b284267b64e9 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -169,6 +169,14 @@ export function useMutableSource<Source, Snapshot>(
   return dispatcher.useMutableSource(source, getSnapshot, subscribe);
 }
 
+export function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useSyncExternalStore(subscribe, getSnapshot);
+}
+
 export function useCacheRefresh(): <T>(?() => T, ?T) => void {
   const dispatcher = resolveDispatcher();
   // $FlowFixMe This is unstable, thus optional
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 3102087b8e90..4bf0c4bc955a 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -29,11 +29,28 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     // use the shim.
     // TODO: Don't do this during a variant test run. That way these tests run
     // against both the shim and the built-in implementation.
-    jest.mock('react', () => {
-      // eslint-disable-next-line no-unused-vars
-      const {startTransition, ...otherExports} = jest.requireActual('react');
-      return otherExports;
-    });
+    if (gate(flags => flags.variant)) {
+      // We'll use the variant flag to represent the native implementation
+    } else {
+      // and the non-variant tests for the shim.
+      //
+      // 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 {
+          // eslint-disable-next-line no-unused-vars
+          startTransition: _,
+          // eslint-disable-next-line no-unused-vars
+          useSyncExternalStore: __,
+          ...otherExports
+        } = jest.requireActual('react');
+        return otherExports;
+      });
+    }
 
     React = require('react');
     ReactNoop = require('react-noop-renderer');
@@ -63,14 +80,17 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   function createRoot(element) {
     // This wrapper function exists so we can test both legacy roots and
     // concurrent roots.
-    //
-    // TODO: Once the built-in API exists, conditionally test the concurrent
-    // root API, too.
-    const root = ReactNoop.createLegacyRoot();
-    act(() => {
-      root.render(element);
-    });
-    return root;
+    if (gate(flags => flags.variant)) {
+      // 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 ReactNoop.createRoot();
+    } else {
+      return ReactNoop.createLegacyRoot();
+    }
   }
 
   function createExternalStore(initialState) {
@@ -96,6 +116,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     };
   }
 
+  // @gate !variant
   test('basic usage', () => {
     const store = createExternalStore('Initial');
 
@@ -104,7 +125,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={text} />;
     }
 
-    const root = createRoot(<App />);
+    const root = createRoot();
+    act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded(['Initial']);
     expect(root).toMatchRenderedOutput('Initial');
@@ -116,6 +138,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('Updated');
   });
 
+  // @gate !variant
   test('skips re-rendering if nothing changes', () => {
     const store = createExternalStore('Initial');
 
@@ -124,7 +147,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={text} />;
     }
 
-    const root = createRoot(<App />);
+    const root = createRoot();
+    act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded(['Initial']);
     expect(root).toMatchRenderedOutput('Initial');
@@ -138,6 +162,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('Initial');
   });
 
+  // @gate !variant
   test('switch to a different store', () => {
     const storeA = createExternalStore(0);
     const storeB = createExternalStore(0);
@@ -150,7 +175,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={value} />;
     }
 
-    const root = createRoot(<App />);
+    const root = createRoot();
+    act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded([0]);
     expect(root).toMatchRenderedOutput('0');
@@ -187,6 +213,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('1');
   });
 
+  // @gate !variant
   test('selecting a specific value inside getSnapshot', () => {
     const store = createExternalStore({a: 0, b: 0});
 
@@ -208,7 +235,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       );
     }
 
-    const root = createRoot(<App />);
+    const root = createRoot();
+    act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded(['A0', 'B0']);
     expect(root).toMatchRenderedOutput('A0B0');
@@ -230,6 +258,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('A1B1');
   });
 
+  // @gate !variant
   test(
     "compares to current state before bailing out, even when there's a " +
       'mutation in between the sync and passive effects',
@@ -244,7 +273,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         return <Text text={value} />;
       }
 
-      const root = createRoot(<App />);
+      const root = createRoot();
+      act(() => root.render(<App />));
       expect(Scheduler).toHaveYielded([0, 'Passive effect: 0']);
 
       // Schedule an update. We'll intentionally not use `act` so that we can
@@ -272,6 +302,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     },
   );
 
+  // @gate !variant
   test('mutating the store in between render and commit when getSnapshot has changed', () => {
     const store = createExternalStore({a: 1, b: 1});
 
@@ -312,7 +343,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       );
     }
 
-    const root = createRoot(<App />);
+    const root = createRoot();
+    act(() => root.render(<App />));
     expect(Scheduler).toHaveYielded(['A1']);
     expect(root).toMatchRenderedOutput('A1');
 
@@ -330,6 +362,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('B2');
   });
 
+  // @gate !variant
   test('mutating the store in between render and commit when getSnapshot has _not_ changed', () => {
     // Same as previous test, but `getSnapshot` does not change
     const store = createExternalStore({a: 1, b: 1});
@@ -368,7 +401,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       );
     }
 
-    const root = createRoot(<App />);
+    const root = createRoot();
+    act(() => root.render(<App />));
     expect(Scheduler).toHaveYielded(['A1']);
     expect(root).toMatchRenderedOutput('A1');
 
@@ -387,6 +421,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('A1');
   });
 
+  // @gate !variant
   test("does not bail out if the previous update hasn't finished yet", () => {
     const store = createExternalStore(0);
 
@@ -406,11 +441,14 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={value} />;
     }
 
-    const root = createRoot(
-      <>
-        <Child1 />
-        <Child2 />
-      </>,
+    const root = createRoot();
+    act(() =>
+      root.render(
+        <>
+          <Child1 />
+          <Child2 />
+        </>,
+      ),
     );
     expect(Scheduler).toHaveYielded([0, 0]);
     expect(root).toMatchRenderedOutput('00');
@@ -422,6 +460,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('00');
   });
 
+  // @gate !variant
   test('uses the latest getSnapshot, even if it changed in the same batch as a store update', () => {
     const store = createExternalStore({a: 0, b: 0});
 
@@ -436,7 +475,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={text} />;
     }
 
-    const root = createRoot(<App />);
+    const root = createRoot();
+    act(() => root.render(<App />));
     expect(Scheduler).toHaveYielded([0]);
 
     // Update the store and getSnapshot at the same time
@@ -449,6 +489,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('2');
   });
 
+  // @gate !variant
   test('handles errors thrown by getSnapshot or isEqual', () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
@@ -492,10 +533,13 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     }
 
     const errorBoundary = React.createRef(null);
-    const root = createRoot(
-      <ErrorBoundary ref={errorBoundary}>
-        <App />
-      </ErrorBoundary>,
+    const root = createRoot();
+    act(() =>
+      root.render(
+        <ErrorBoundary ref={errorBoundary}>
+          <App />
+        </ErrorBoundary>,
+      ),
     );
     expect(Scheduler).toHaveYielded([0]);
     expect(root).toMatchRenderedOutput('0');
@@ -524,7 +568,32 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('1');
   });
 
+  // @gate !variant
+  test('Infinite loop if getSnapshot keeps returning new reference', () => {
+    const store = createExternalStore({});
+
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, () => ({}));
+      return <Text text={JSON.stringify(text)} />;
+    }
+
+    spyOnDev(console, 'error');
+    const root = createRoot();
+
+    expect(() => act(() => root.render(<App />))).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.',
+    );
+    if (__DEV__) {
+      expect(console.error.calls.argsFor(0)[0]).toMatch(
+        'The result of getSnapshot should be cached to avoid an infinite loop',
+      );
+    }
+  });
+
   describe('extra features implemented in user-space', () => {
+    // @gate !variant
     test('memoized selectors are only called once per update', () => {
       const store = createExternalStore({a: 0, b: 0});
 
@@ -543,7 +612,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         return <Text text={'A' + a} />;
       }
 
-      const root = createRoot(<App />);
+      const root = createRoot();
+      act(() => root.render(<App />));
 
       expect(Scheduler).toHaveYielded(['App', 'Selector', 'A0']);
       expect(root).toMatchRenderedOutput('A0');
@@ -563,6 +633,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A1');
     });
 
+    // @gate !variant
     test('Using isEqual to bailout', () => {
       const store = createExternalStore({a: 0, b: 0});
 
@@ -596,7 +667,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         );
       }
 
-      const root = createRoot(<App />);
+      const root = createRoot();
+      act(() => root.render(<App />));
 
       expect(Scheduler).toHaveYielded(['A0', 'B0']);
       expect(root).toMatchRenderedOutput('A0B0');
@@ -618,30 +690,4 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A1B1');
     });
   });
-
-  test('Infinite loop if getSnapshot keeps returning new reference', () => {
-    const store = createExternalStore({});
-
-    function App() {
-      const text = useSyncExternalStore(store.subscribe, () => ({}));
-      return <Text text={JSON.stringify(text)} />;
-    }
-
-    spyOnDev(console, 'error');
-
-    expect(() => {
-      act(() => {
-        createRoot(<App />);
-      });
-    }).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.',
-    );
-    if (__DEV__) {
-      expect(console.error.calls.argsFor(0)[0]).toMatch(
-        'The result of getSnapshot should be cached to avoid an infinite loop',
-      );
-    }
-  });
 });
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 8607c915eb72..73cd7f808989 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -17,8 +17,6 @@ const {
   useEffect,
   useLayoutEffect,
   useDebugValue,
-
-  // $FlowFixMe - useSyncExternalStore not yet part of React Flow types
   useSyncExternalStore: builtInAPI,
 } = React;
 
@@ -26,7 +24,9 @@ const {
 // we're in version 16 or 17, so rendering is always synchronous. The shim
 // does not support concurrent rendering, only the built-in API.
 export const useSyncExternalStore =
-  builtInAPI !== undefined ? builtInAPI : useSyncExternalStore_shim;
+  builtInAPI !== undefined
+    ? ((builtInAPI: any): typeof useSyncExternalStore_shim)
+    : useSyncExternalStore_shim;
 
 let didWarnOld18Alpha = false;
 let didWarnUncachedGetSnapshot = false;
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 9e9a531b0b3b..9dbea6326dde 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -42,6 +42,8 @@ const environmentFlags = {
   // Similarly, should stable imply "classic"?
   stable: !__EXPERIMENTAL__,
 
+  variant: __VARIANT__,
+
   persistent: global.__PERSISTENT__ === true,
 
   // Use this for tests that are known to be broken.

From 06f98c168060ef0213526a1aee696a568cec7f54 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 7 Sep 2021 13:22:05 -0400
Subject: [PATCH 0831/1603] Implement useSyncExternalStore in Fiber (#22239)

This adds an initial implementation of useSyncExternalStore to the
fiber reconciler. It's mostly a copy-paste of the userspace
implementation, which is not ideal but is a good enough starting place.

The main change we'll want to make to this native implementation is to
move the tearing checks from the layout phase to an earlier, pre-commit
phase so that code that runs in the commit phase always observes a
consistent tree.

Follow-ups:

- Implement in Fizz
- Implement in old SSR renderer
- Implement in react-debug-hooks
---
 .../src/ReactFiberHooks.new.js                | 119 ++++++++++++++-
 .../src/ReactFiberHooks.old.js                | 119 ++++++++++++++-
 .../useSyncExternalStoreShared-test.js        | 143 +++++++++---------
 3 files changed, 305 insertions(+), 76 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 40beec7f8c74..d36c745dae98 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -51,6 +51,7 @@ import {
   markRootMutableRead,
 } from './ReactFiberLane.new';
 import {
+  DiscreteEventPriority,
   ContinuousEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
@@ -136,6 +137,7 @@ export type UpdateQueue<S, A> = {|
 
 let didWarnAboutMismatchedHooksForComponent;
 let didWarnAboutUseOpaqueIdentifier;
+let didWarnUncachedGetSnapshot;
 if (__DEV__) {
   didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
@@ -1246,14 +1248,127 @@ function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
 ): T {
-  throw new Error('Not yet implemented');
+  const hook = mountWorkInProgressHook();
+  return useSyncExternalStore(hook, subscribe, getSnapshot);
 }
 
 function updateSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
 ): T {
-  throw new Error('Not yet implemented');
+  const hook = updateWorkInProgressHook();
+  return useSyncExternalStore(hook, subscribe, getSnapshot);
+}
+
+function useSyncExternalStore<T>(
+  hook: Hook,
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  // TODO: This is a copy-paste of the userspace shim. We can improve the
+  // built-in implementation using lower-level APIs. We also intend to move
+  // the tearing checks to an earlier, pre-commit phase so that the layout
+  // effects always observe a consistent tree.
+
+  const dispatcher = ReactCurrentDispatcher.current;
+
+  // 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) {
+      if (value !== getSnapshot()) {
+        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] = dispatcher.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.
+  // TODO: Circumvent SSR warning
+  dispatcher.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.
+      const prevTransition = ReactCurrentBatchConfig.transition;
+      const prevPriority = getCurrentUpdatePriority();
+      ReactCurrentBatchConfig.transition = 0;
+      setCurrentUpdatePriority(DiscreteEventPriority);
+      forceUpdate({inst});
+      setCurrentUpdatePriority(prevPriority);
+      ReactCurrentBatchConfig.transition = prevTransition;
+    }
+  }, [subscribe, value, getSnapshot]);
+
+  dispatcher.useEffect(() => {
+    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.
+        const prevTransition = ReactCurrentBatchConfig.transition;
+        const prevPriority = getCurrentUpdatePriority();
+        ReactCurrentBatchConfig.transition = 0;
+        setCurrentUpdatePriority(DiscreteEventPriority);
+        forceUpdate({inst});
+        setCurrentUpdatePriority(prevPriority);
+        ReactCurrentBatchConfig.transition = prevTransition;
+      }
+    };
+    // Check for changes right before subscribing. Subsequent changes will be
+    // detected in the subscription handler.
+    handleStoreChange();
+    // Subscribe to the store and return a clean-up function.
+    return subscribe(handleStoreChange);
+  }, [subscribe]);
+
+  return value;
+}
+
+function checkIfSnapshotChanged(inst) {
+  const latestGetSnapshot = inst.getSnapshot;
+  const prevValue = inst.value;
+  try {
+    const nextValue = latestGetSnapshot();
+    return !is(prevValue, nextValue);
+  } catch (error) {
+    return true;
+  }
 }
 
 function mountState<S>(
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 08c61e9b162f..c062845d6dbd 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -51,6 +51,7 @@ import {
   markRootMutableRead,
 } from './ReactFiberLane.old';
 import {
+  DiscreteEventPriority,
   ContinuousEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
@@ -136,6 +137,7 @@ export type UpdateQueue<S, A> = {|
 
 let didWarnAboutMismatchedHooksForComponent;
 let didWarnAboutUseOpaqueIdentifier;
+let didWarnUncachedGetSnapshot;
 if (__DEV__) {
   didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
@@ -1246,14 +1248,127 @@ function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
 ): T {
-  throw new Error('Not yet implemented');
+  const hook = mountWorkInProgressHook();
+  return useSyncExternalStore(hook, subscribe, getSnapshot);
 }
 
 function updateSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
 ): T {
-  throw new Error('Not yet implemented');
+  const hook = updateWorkInProgressHook();
+  return useSyncExternalStore(hook, subscribe, getSnapshot);
+}
+
+function useSyncExternalStore<T>(
+  hook: Hook,
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+): T {
+  // TODO: This is a copy-paste of the userspace shim. We can improve the
+  // built-in implementation using lower-level APIs. We also intend to move
+  // the tearing checks to an earlier, pre-commit phase so that the layout
+  // effects always observe a consistent tree.
+
+  const dispatcher = ReactCurrentDispatcher.current;
+
+  // 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) {
+      if (value !== getSnapshot()) {
+        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] = dispatcher.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.
+  // TODO: Circumvent SSR warning
+  dispatcher.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.
+      const prevTransition = ReactCurrentBatchConfig.transition;
+      const prevPriority = getCurrentUpdatePriority();
+      ReactCurrentBatchConfig.transition = 0;
+      setCurrentUpdatePriority(DiscreteEventPriority);
+      forceUpdate({inst});
+      setCurrentUpdatePriority(prevPriority);
+      ReactCurrentBatchConfig.transition = prevTransition;
+    }
+  }, [subscribe, value, getSnapshot]);
+
+  dispatcher.useEffect(() => {
+    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.
+        const prevTransition = ReactCurrentBatchConfig.transition;
+        const prevPriority = getCurrentUpdatePriority();
+        ReactCurrentBatchConfig.transition = 0;
+        setCurrentUpdatePriority(DiscreteEventPriority);
+        forceUpdate({inst});
+        setCurrentUpdatePriority(prevPriority);
+        ReactCurrentBatchConfig.transition = prevTransition;
+      }
+    };
+    // Check for changes right before subscribing. Subsequent changes will be
+    // detected in the subscription handler.
+    handleStoreChange();
+    // Subscribe to the store and return a clean-up function.
+    return subscribe(handleStoreChange);
+  }, [subscribe]);
+
+  return value;
+}
+
+function checkIfSnapshotChanged(inst) {
+  const latestGetSnapshot = inst.getSnapshot;
+  const prevValue = inst.value;
+  try {
+    const nextValue = latestGetSnapshot();
+    return !is(prevValue, nextValue);
+  } catch (error) {
+    return true;
+  }
 }
 
 function mountState<S>(
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 4bf0c4bc955a..387440c053d4 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -116,8 +116,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     };
   }
 
-  // @gate !variant
-  test('basic usage', () => {
+  test('basic usage', async () => {
     const store = createExternalStore('Initial');
 
     function App() {
@@ -126,19 +125,18 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     }
 
     const root = createRoot();
-    act(() => root.render(<App />));
+    await act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded(['Initial']);
     expect(root).toMatchRenderedOutput('Initial');
 
-    act(() => {
+    await act(() => {
       store.set('Updated');
     });
     expect(Scheduler).toHaveYielded(['Updated']);
     expect(root).toMatchRenderedOutput('Updated');
   });
 
-  // @gate !variant
   test('skips re-rendering if nothing changes', () => {
     const store = createExternalStore('Initial');
 
@@ -162,8 +160,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('Initial');
   });
 
-  // @gate !variant
-  test('switch to a different store', () => {
+  test('switch to a different store', async () => {
     const storeA = createExternalStore(0);
     const storeB = createExternalStore(0);
 
@@ -176,29 +173,31 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     }
 
     const root = createRoot();
-    act(() => root.render(<App />));
+    await act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded([0]);
     expect(root).toMatchRenderedOutput('0');
 
-    act(() => {
+    await act(() => {
       storeA.set(1);
     });
     expect(Scheduler).toHaveYielded([1]);
     expect(root).toMatchRenderedOutput('1');
 
-    // Switch stores
+    // Switch stores and update in the same batch
     act(() => {
-      // This update will be disregarded
-      storeA.set(2);
-      setStore(storeB);
+      ReactNoop.flushSync(() => {
+        // This update will be disregarded
+        storeA.set(2);
+        setStore(storeB);
+      });
     });
     // Now reading from B instead of A
     expect(Scheduler).toHaveYielded([0]);
     expect(root).toMatchRenderedOutput('0');
 
     // Update A
-    act(() => {
+    await act(() => {
       storeA.set(3);
     });
     // Nothing happened, because we're no longer subscribed to A
@@ -206,15 +205,14 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('0');
 
     // Update B
-    act(() => {
+    await act(() => {
       storeB.set(1);
     });
     expect(Scheduler).toHaveYielded([1]);
     expect(root).toMatchRenderedOutput('1');
   });
 
-  // @gate !variant
-  test('selecting a specific value inside getSnapshot', () => {
+  test('selecting a specific value inside getSnapshot', async () => {
     const store = createExternalStore({a: 0, b: 0});
 
     function A() {
@@ -242,7 +240,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('A0B0');
 
     // Update b but not a
-    act(() => {
+    await act(() => {
       store.set({a: 0, b: 1});
     });
     // Only b re-renders
@@ -250,7 +248,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('A0B1');
 
     // Update a but not b
-    act(() => {
+    await act(() => {
       store.set({a: 1, b: 1});
     });
     // Only a re-renders
@@ -258,11 +256,13 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('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 !variant
   test(
     "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() {
@@ -302,7 +302,6 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     },
   );
 
-  // @gate !variant
   test('mutating the store in between render and commit when getSnapshot has changed', () => {
     const store = createExternalStore({a: 1, b: 1});
 
@@ -362,7 +361,6 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('B2');
   });
 
-  // @gate !variant
   test('mutating the store in between render and commit when getSnapshot has _not_ changed', () => {
     // Same as previous test, but `getSnapshot` does not change
     const store = createExternalStore({a: 1, b: 1});
@@ -421,8 +419,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('A1');
   });
 
-  // @gate !variant
-  test("does not bail out if the previous update hasn't finished yet", () => {
+  test("does not bail out if the previous update hasn't finished yet", async () => {
     const store = createExternalStore(0);
 
     function Child1() {
@@ -453,14 +450,13 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(Scheduler).toHaveYielded([0, 0]);
     expect(root).toMatchRenderedOutput('00');
 
-    act(() => {
+    await act(() => {
       store.set(1);
     });
     expect(Scheduler).toHaveYielded([1, 1, 'Reset back to 0', 0, 0]);
     expect(root).toMatchRenderedOutput('00');
   });
 
-  // @gate !variant
   test('uses the latest getSnapshot, even if it changed in the same batch as a store update', () => {
     const store = createExternalStore({a: 0, b: 0});
 
@@ -481,16 +477,17 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
     // Update the store and getSnapshot at the same time
     act(() => {
-      setGetSnapshot(() => getSnapshotB);
-      store.set({a: 1, b: 2});
+      ReactNoop.flushSync(() => {
+        setGetSnapshot(() => getSnapshotB);
+        store.set({a: 1, b: 2});
+      });
     });
     // It should read from B instead of A
     expect(Scheduler).toHaveYielded([2]);
     expect(root).toMatchRenderedOutput('2');
   });
 
-  // @gate !variant
-  test('handles errors thrown by getSnapshot or isEqual', () => {
+  test('handles errors thrown by getSnapshot', async () => {
     class ErrorBoundary extends React.Component {
       state = {error: null};
       static getDerivedStateFromError(error) {
@@ -511,24 +508,13 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
 
     function App() {
-      const {value} = useSyncExternalStore(
-        store.subscribe,
-        () => {
-          const state = store.getState();
-          if (state.throwInGetSnapshot) {
-            throw new Error('Error in getSnapshot');
-          }
-          return state;
-        },
-        {
-          isEqual: (a, b) => {
-            if (a.throwInIsEqual || b.throwInIsEqual) {
-              throw new Error('Error in isEqual');
-            }
-            return a.value === b.value;
-          },
-        },
-      );
+      const {value} = useSyncExternalStore(store.subscribe, () => {
+        const state = store.getState();
+        if (state.throwInGetSnapshot) {
+          throw new Error('Error in getSnapshot');
+        }
+        return state;
+      });
       return <Text text={value} />;
     }
 
@@ -545,30 +531,45 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     expect(root).toMatchRenderedOutput('0');
 
     // Update that throws in a getSnapshot. We can catch it with an error boundary.
-    act(() => {
+    await act(() => {
       store.set({value: 1, throwInGetSnapshot: true, throwInIsEqual: false});
     });
-    expect(Scheduler).toHaveYielded(['Error in getSnapshot']);
+    if (gate(flags => flags.variant)) {
+      expect(Scheduler).toHaveYielded([
+        'Error in getSnapshot',
+        // In a concurrent root, React renders a second time to attempt to
+        // recover from the error.
+        'Error in getSnapshot',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded(['Error in getSnapshot']);
+    }
     expect(root).toMatchRenderedOutput('Error in getSnapshot');
+  });
 
-    // Clear the error.
-    act(() => {
-      store.set({value: 1, throwInGetSnapshot: false, throwInIsEqual: false});
-      errorBoundary.current.setState({error: null});
-    });
-    expect(Scheduler).toHaveYielded([1]);
-    expect(root).toMatchRenderedOutput('1');
+  test('Infinite loop if getSnapshot keeps returning new reference', () => {
+    const store = createExternalStore({});
 
-    // Update that throws in isEqual. Since isEqual only prevents a bail out,
-    // we don't need to surface an error. But we do have to re-render.
-    act(() => {
-      store.set({value: 1, throwInGetSnapshot: false, throwInIsEqual: true});
-    });
-    expect(Scheduler).toHaveYielded([1]);
-    expect(root).toMatchRenderedOutput('1');
+    function App() {
+      const text = useSyncExternalStore(store.subscribe, () => ({}));
+      return <Text text={JSON.stringify(text)} />;
+    }
+
+    spyOnDev(console, 'error');
+    const root = createRoot();
+
+    expect(() => act(() => root.render(<App />))).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.',
+    );
+    if (__DEV__) {
+      expect(console.error.calls.argsFor(0)[0]).toMatch(
+        'The result of getSnapshot should be cached to avoid an infinite loop',
+      );
+    }
   });
 
-  // @gate !variant
   test('Infinite loop if getSnapshot keeps returning new reference', () => {
     const store = createExternalStore({});
 
@@ -593,8 +594,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   });
 
   describe('extra features implemented in user-space', () => {
-    // @gate !variant
-    test('memoized selectors are only called once per update', () => {
+    test('memoized selectors are only called once per update', async () => {
       const store = createExternalStore({a: 0, b: 0});
 
       function selector(state) {
@@ -619,7 +619,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A0');
 
       // Update the store
-      act(() => {
+      await act(() => {
         store.set({a: 1, b: 0});
       });
       expect(Scheduler).toHaveYielded([
@@ -633,8 +633,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A1');
     });
 
-    // @gate !variant
-    test('Using isEqual to bailout', () => {
+    test('Using isEqual to bailout', async () => {
       const store = createExternalStore({a: 0, b: 0});
 
       function A() {
@@ -674,7 +673,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A0B0');
 
       // Update b but not a
-      act(() => {
+      await act(() => {
         store.set({a: 0, b: 1});
       });
       // Only b re-renders
@@ -682,7 +681,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A0B1');
 
       // Update a but not b
-      act(() => {
+      await act(() => {
         store.set({a: 1, b: 1});
       });
       // Only a re-renders

From 8e80592a3ab2bdbd036f5af77c89fcf937b8f43b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 7 Sep 2021 13:27:01 -0400
Subject: [PATCH 0832/1603] Remove state queue from useSyncExternalStore
 (#22265)

The userspace shim of useSyncExternalStore uses a useState hook because
it's the only way to trigger a re-render. We don't actually use the
queue to store anything, because we read the current value directly
from the store.

In the native implementation, we can schedule an update on the fiber
directly, without the overhead of a queue.
---
 .../src/ReactFiberHooks.new.js                | 130 +++++++++---------
 .../src/ReactFiberHooks.old.js                | 130 +++++++++---------
 2 files changed, 136 insertions(+), 124 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d36c745dae98..4ca5ed10bc13 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -41,6 +41,7 @@ import {
 } from './ReactTypeOfMode';
 import {
   NoLane,
+  SyncLane,
   NoLanes,
   isSubsetOfLanes,
   mergeLanes,
@@ -49,9 +50,9 @@ import {
   isTransitionLane,
   markRootEntangled,
   markRootMutableRead,
+  NoTimestamp,
 } from './ReactFiberLane.new';
 import {
-  DiscreteEventPriority,
   ContinuousEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
@@ -147,7 +148,7 @@ export type Hook = {|
   memoizedState: any,
   baseState: any,
   baseQueue: Update<any, any> | null,
-  queue: UpdateQueue<any, any> | null,
+  queue: any,
   next: Hook | null,
 |};
 
@@ -159,6 +160,11 @@ export type Effect = {|
   next: Effect,
 |};
 
+type StoreInstance<T> = {|
+  value: T,
+  getSnapshot: () => T,
+|};
+
 export type FunctionComponentUpdateQueue = {|lastEffect: Effect | null|};
 
 type BasicStateAction<S> = (S => S) | S;
@@ -703,14 +709,15 @@ function mountReducer<S, I, A>(
     initialState = ((initialArg: any): S);
   }
   hook.memoizedState = hook.baseState = initialState;
-  const queue = (hook.queue = {
+  const queue: UpdateQueue<S, A> = {
     pending: null,
     interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: reducer,
     lastRenderedState: (initialState: any),
-  });
+  };
+  hook.queue = queue;
   const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
     null,
     currentlyRenderingFiber,
@@ -1196,7 +1203,7 @@ function useMutableSource<Source, Snapshot>(
     // So if there are interleaved updates, they get pushed to the older queue.
     // When this becomes current, the previous queue and dispatch method will be discarded,
     // including any interleaving updates that occur.
-    const newQueue = {
+    const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
       pending: null,
       interleaved: null,
       lanes: NoLanes,
@@ -1249,7 +1256,27 @@ function mountSyncExternalStore<T>(
   getSnapshot: () => T,
 ): T {
   const hook = mountWorkInProgressHook();
-  return useSyncExternalStore(hook, subscribe, getSnapshot);
+  // 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.
+  const nextSnapshot = getSnapshot();
+  if (__DEV__) {
+    if (!didWarnUncachedGetSnapshot) {
+      if (nextSnapshot !== getSnapshot()) {
+        console.error(
+          'The result of getSnapshot should be cached to avoid an infinite loop',
+        );
+        didWarnUncachedGetSnapshot = true;
+      }
+    }
+  }
+  hook.memoizedState = nextSnapshot;
+  const inst: StoreInstance<T> = {
+    value: nextSnapshot,
+    getSnapshot,
+  };
+  hook.queue = inst;
+  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
 }
 
 function updateSyncExternalStore<T>(
@@ -1257,29 +1284,13 @@ function updateSyncExternalStore<T>(
   getSnapshot: () => T,
 ): T {
   const hook = updateWorkInProgressHook();
-  return useSyncExternalStore(hook, subscribe, getSnapshot);
-}
-
-function useSyncExternalStore<T>(
-  hook: Hook,
-  subscribe: (() => void) => () => void,
-  getSnapshot: () => T,
-): T {
-  // TODO: This is a copy-paste of the userspace shim. We can improve the
-  // built-in implementation using lower-level APIs. We also intend to move
-  // the tearing checks to an earlier, pre-commit phase so that the layout
-  // effects always observe a consistent tree.
-
-  const dispatcher = ReactCurrentDispatcher.current;
-
-  // 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
+  // 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.
-  const value = getSnapshot();
+  const nextSnapshot = getSnapshot();
   if (__DEV__) {
     if (!didWarnUncachedGetSnapshot) {
-      if (value !== getSnapshot()) {
+      if (nextSnapshot !== getSnapshot()) {
         console.error(
           'The result of getSnapshot should be cached to avoid an infinite loop',
         );
@@ -1287,48 +1298,44 @@ function useSyncExternalStore<T>(
       }
     }
   }
+  const prevSnapshot = hook.memoizedState;
+  if (!is(prevSnapshot, nextSnapshot)) {
+    hook.memoizedState = nextSnapshot;
+    markWorkInProgressReceivedUpdate();
+  }
+  const inst = hook.queue;
+  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
+}
 
-  // 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] = dispatcher.useState({
-    inst: {value, getSnapshot},
-  });
+function useSyncExternalStore<T>(
+  hook: Hook,
+  inst: StoreInstance<T>,
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  nextSnapshot: T,
+): T {
+  const fiber = currentlyRenderingFiber;
+  const dispatcher = ReactCurrentDispatcher.current;
 
   // 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.
   // TODO: Circumvent SSR warning
   dispatcher.useLayoutEffect(() => {
-    inst.value = value;
+    inst.value = nextSnapshot;
     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.
+    // TODO: Move the tearing checks to an earlier, pre-commit phase so that the
+    // layout effects always observe a consistent tree.
     if (checkIfSnapshotChanged(inst)) {
       // Force a re-render.
-      const prevTransition = ReactCurrentBatchConfig.transition;
-      const prevPriority = getCurrentUpdatePriority();
-      ReactCurrentBatchConfig.transition = 0;
-      setCurrentUpdatePriority(DiscreteEventPriority);
-      forceUpdate({inst});
-      setCurrentUpdatePriority(prevPriority);
-      ReactCurrentBatchConfig.transition = prevTransition;
+      forceStoreRerender(fiber);
     }
-  }, [subscribe, value, getSnapshot]);
+  }, [subscribe, nextSnapshot, getSnapshot]);
 
   dispatcher.useEffect(() => {
     const handleStoreChange = () => {
@@ -1341,13 +1348,7 @@ function useSyncExternalStore<T>(
       // read from the store.
       if (checkIfSnapshotChanged(inst)) {
         // Force a re-render.
-        const prevTransition = ReactCurrentBatchConfig.transition;
-        const prevPriority = getCurrentUpdatePriority();
-        ReactCurrentBatchConfig.transition = 0;
-        setCurrentUpdatePriority(DiscreteEventPriority);
-        forceUpdate({inst});
-        setCurrentUpdatePriority(prevPriority);
-        ReactCurrentBatchConfig.transition = prevTransition;
+        forceStoreRerender(fiber);
       }
     };
     // Check for changes right before subscribing. Subsequent changes will be
@@ -1357,7 +1358,7 @@ function useSyncExternalStore<T>(
     return subscribe(handleStoreChange);
   }, [subscribe]);
 
-  return value;
+  return nextSnapshot;
 }
 
 function checkIfSnapshotChanged(inst) {
@@ -1371,6 +1372,10 @@ function checkIfSnapshotChanged(inst) {
   }
 }
 
+function forceStoreRerender(fiber) {
+  scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+}
+
 function mountState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
@@ -1380,14 +1385,15 @@ function mountState<S>(
     initialState = initialState();
   }
   hook.memoizedState = hook.baseState = initialState;
-  const queue = (hook.queue = {
+  const queue: UpdateQueue<S, BasicStateAction<S>> = {
     pending: null,
     interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
     lastRenderedState: (initialState: any),
-  });
+  };
+  hook.queue = queue;
   const dispatch: Dispatch<
     BasicStateAction<S>,
   > = (queue.dispatch = (dispatchAction.bind(
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index c062845d6dbd..c87e1458f0b3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -41,6 +41,7 @@ import {
 } from './ReactTypeOfMode';
 import {
   NoLane,
+  SyncLane,
   NoLanes,
   isSubsetOfLanes,
   mergeLanes,
@@ -49,9 +50,9 @@ import {
   isTransitionLane,
   markRootEntangled,
   markRootMutableRead,
+  NoTimestamp,
 } from './ReactFiberLane.old';
 import {
-  DiscreteEventPriority,
   ContinuousEventPriority,
   getCurrentUpdatePriority,
   setCurrentUpdatePriority,
@@ -147,7 +148,7 @@ export type Hook = {|
   memoizedState: any,
   baseState: any,
   baseQueue: Update<any, any> | null,
-  queue: UpdateQueue<any, any> | null,
+  queue: any,
   next: Hook | null,
 |};
 
@@ -159,6 +160,11 @@ export type Effect = {|
   next: Effect,
 |};
 
+type StoreInstance<T> = {|
+  value: T,
+  getSnapshot: () => T,
+|};
+
 export type FunctionComponentUpdateQueue = {|lastEffect: Effect | null|};
 
 type BasicStateAction<S> = (S => S) | S;
@@ -703,14 +709,15 @@ function mountReducer<S, I, A>(
     initialState = ((initialArg: any): S);
   }
   hook.memoizedState = hook.baseState = initialState;
-  const queue = (hook.queue = {
+  const queue: UpdateQueue<S, A> = {
     pending: null,
     interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: reducer,
     lastRenderedState: (initialState: any),
-  });
+  };
+  hook.queue = queue;
   const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
     null,
     currentlyRenderingFiber,
@@ -1196,7 +1203,7 @@ function useMutableSource<Source, Snapshot>(
     // So if there are interleaved updates, they get pushed to the older queue.
     // When this becomes current, the previous queue and dispatch method will be discarded,
     // including any interleaving updates that occur.
-    const newQueue = {
+    const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
       pending: null,
       interleaved: null,
       lanes: NoLanes,
@@ -1249,7 +1256,27 @@ function mountSyncExternalStore<T>(
   getSnapshot: () => T,
 ): T {
   const hook = mountWorkInProgressHook();
-  return useSyncExternalStore(hook, subscribe, getSnapshot);
+  // 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.
+  const nextSnapshot = getSnapshot();
+  if (__DEV__) {
+    if (!didWarnUncachedGetSnapshot) {
+      if (nextSnapshot !== getSnapshot()) {
+        console.error(
+          'The result of getSnapshot should be cached to avoid an infinite loop',
+        );
+        didWarnUncachedGetSnapshot = true;
+      }
+    }
+  }
+  hook.memoizedState = nextSnapshot;
+  const inst: StoreInstance<T> = {
+    value: nextSnapshot,
+    getSnapshot,
+  };
+  hook.queue = inst;
+  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
 }
 
 function updateSyncExternalStore<T>(
@@ -1257,29 +1284,13 @@ function updateSyncExternalStore<T>(
   getSnapshot: () => T,
 ): T {
   const hook = updateWorkInProgressHook();
-  return useSyncExternalStore(hook, subscribe, getSnapshot);
-}
-
-function useSyncExternalStore<T>(
-  hook: Hook,
-  subscribe: (() => void) => () => void,
-  getSnapshot: () => T,
-): T {
-  // TODO: This is a copy-paste of the userspace shim. We can improve the
-  // built-in implementation using lower-level APIs. We also intend to move
-  // the tearing checks to an earlier, pre-commit phase so that the layout
-  // effects always observe a consistent tree.
-
-  const dispatcher = ReactCurrentDispatcher.current;
-
-  // 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
+  // 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.
-  const value = getSnapshot();
+  const nextSnapshot = getSnapshot();
   if (__DEV__) {
     if (!didWarnUncachedGetSnapshot) {
-      if (value !== getSnapshot()) {
+      if (nextSnapshot !== getSnapshot()) {
         console.error(
           'The result of getSnapshot should be cached to avoid an infinite loop',
         );
@@ -1287,48 +1298,44 @@ function useSyncExternalStore<T>(
       }
     }
   }
+  const prevSnapshot = hook.memoizedState;
+  if (!is(prevSnapshot, nextSnapshot)) {
+    hook.memoizedState = nextSnapshot;
+    markWorkInProgressReceivedUpdate();
+  }
+  const inst = hook.queue;
+  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
+}
 
-  // 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] = dispatcher.useState({
-    inst: {value, getSnapshot},
-  });
+function useSyncExternalStore<T>(
+  hook: Hook,
+  inst: StoreInstance<T>,
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  nextSnapshot: T,
+): T {
+  const fiber = currentlyRenderingFiber;
+  const dispatcher = ReactCurrentDispatcher.current;
 
   // 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.
   // TODO: Circumvent SSR warning
   dispatcher.useLayoutEffect(() => {
-    inst.value = value;
+    inst.value = nextSnapshot;
     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.
+    // TODO: Move the tearing checks to an earlier, pre-commit phase so that the
+    // layout effects always observe a consistent tree.
     if (checkIfSnapshotChanged(inst)) {
       // Force a re-render.
-      const prevTransition = ReactCurrentBatchConfig.transition;
-      const prevPriority = getCurrentUpdatePriority();
-      ReactCurrentBatchConfig.transition = 0;
-      setCurrentUpdatePriority(DiscreteEventPriority);
-      forceUpdate({inst});
-      setCurrentUpdatePriority(prevPriority);
-      ReactCurrentBatchConfig.transition = prevTransition;
+      forceStoreRerender(fiber);
     }
-  }, [subscribe, value, getSnapshot]);
+  }, [subscribe, nextSnapshot, getSnapshot]);
 
   dispatcher.useEffect(() => {
     const handleStoreChange = () => {
@@ -1341,13 +1348,7 @@ function useSyncExternalStore<T>(
       // read from the store.
       if (checkIfSnapshotChanged(inst)) {
         // Force a re-render.
-        const prevTransition = ReactCurrentBatchConfig.transition;
-        const prevPriority = getCurrentUpdatePriority();
-        ReactCurrentBatchConfig.transition = 0;
-        setCurrentUpdatePriority(DiscreteEventPriority);
-        forceUpdate({inst});
-        setCurrentUpdatePriority(prevPriority);
-        ReactCurrentBatchConfig.transition = prevTransition;
+        forceStoreRerender(fiber);
       }
     };
     // Check for changes right before subscribing. Subsequent changes will be
@@ -1357,7 +1358,7 @@ function useSyncExternalStore<T>(
     return subscribe(handleStoreChange);
   }, [subscribe]);
 
-  return value;
+  return nextSnapshot;
 }
 
 function checkIfSnapshotChanged(inst) {
@@ -1371,6 +1372,10 @@ function checkIfSnapshotChanged(inst) {
   }
 }
 
+function forceStoreRerender(fiber) {
+  scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+}
+
 function mountState<S>(
   initialState: (() => S) | S,
 ): [S, Dispatch<BasicStateAction<S>>] {
@@ -1380,14 +1385,15 @@ function mountState<S>(
     initialState = initialState();
   }
   hook.memoizedState = hook.baseState = initialState;
-  const queue = (hook.queue = {
+  const queue: UpdateQueue<S, BasicStateAction<S>> = {
     pending: null,
     interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
     lastRenderedState: (initialState: any),
-  });
+  };
+  hook.queue = queue;
   const dispatch: Dispatch<
     BasicStateAction<S>,
   > = (queue.dispatch = (dispatchAction.bind(

From cfd81933286f3a63734ba0ac1650019487c402ff Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 7 Sep 2021 13:58:20 -0400
Subject: [PATCH 0833/1603] Add useSyncExternalStore to react-debug-tools
 (#22240)

Adds support for useSyncExternalStore to react-debug-tools, which in
turn adds support for React Devtools.

Test plan: I added a test to ReactHooksInspectionIntegration, based on
existing one for useMutableSource.
---
 .../react-debug-tools/src/ReactDebugHooks.js  | 14 +++++++-
 .../ReactHooksInspectionIntegration-test.js   | 33 +++++++++++++++++++
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 0e2364f672b7..131a0003dcec 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -269,7 +269,19 @@ function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
 ): T {
-  throw new Error('Not yet implemented');
+  // useSyncExternalStore() composes multiple hooks internally.
+  // Advance the current hook index the same number of times
+  // so that subsequent hooks have the right memoized state.
+  nextHook(); // SyncExternalStore
+  nextHook(); // LayoutEffect
+  nextHook(); // Effect
+  const value = getSnapshot();
+  hookLog.push({
+    primitive: 'SyncExternalStore',
+    stackError: new Error(),
+    value,
+  });
+  return value;
 }
 
 function useTransition(): [boolean, (() => void) => void] {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 1a35fd284c90..1c7cb7508840 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -878,4 +878,37 @@ describe('ReactHooksInspectionIntegration', () => {
       },
     ]);
   });
+
+  // @gate experimental || www
+  it('should support composite useSyncExternalStore hook', () => {
+    const useSyncExternalStore = React.unstable_useSyncExternalStore;
+    function Foo() {
+      const value = useSyncExternalStore(
+        () => () => {},
+        () => 'snapshot',
+      );
+      React.useMemo(() => 'memo', []);
+      return value;
+    }
+
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(tree).toEqual([
+      {
+        id: 0,
+        isStateEditable: false,
+        name: 'SyncExternalStore',
+        value: 'snapshot',
+        subHooks: [],
+      },
+      {
+        id: 1,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'memo',
+        subHooks: [],
+      },
+    ]);
+  });
 });

From 2f156eafb83d129a729947ac2bd7089d20b208ab Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 7 Sep 2021 19:51:12 +0100
Subject: [PATCH 0834/1603] Adjust consoleManagedByDevToolsDuringStrictMode
 feature flag (#22253)

---
 packages/shared/ReactFeatureFlags.js                            | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.js        | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js    | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.js              | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.www.js          | 2 +-
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js          | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 62da534e058a..618c32f1543a 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -176,4 +176,4 @@ export const allowConcurrentByDefault = false;
 
 export const enablePersistentOffscreenHostContainer = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = false;
+export const consoleManagedByDevToolsDuringStrictMode = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 3aea892af594..bd0d0cff3eef 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -61,7 +61,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = true;
+export const consoleManagedByDevToolsDuringStrictMode = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f67a9df1b943..e1fdf781654b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -61,7 +61,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = true;
+export const consoleManagedByDevToolsDuringStrictMode = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index a7f819a9d4ca..844d8665d3ce 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -61,7 +61,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = true;
+export const consoleManagedByDevToolsDuringStrictMode = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d3908d9c024b..09bb7152afc2 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -61,7 +61,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = true;
+export const consoleManagedByDevToolsDuringStrictMode = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 6c7dd08cb9e7..1437c04ef07a 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -61,7 +61,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = true;
+export const consoleManagedByDevToolsDuringStrictMode = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index a9563d3b44a3..e39892a106ec 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -60,4 +60,4 @@ export const enableSyncDefaultUpdates = __VARIANT__;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = true;
+export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;

From fbce2d52749ff64a156c3f9cd6eb32715bb76e37 Mon Sep 17 00:00:00 2001
From: Riley Shaw <rileyjshaw@users.noreply.github.com>
Date: Tue, 7 Sep 2021 15:28:19 -0700
Subject: [PATCH 0835/1603] Fix #21972: Add `onResize` event to video elements
 (#21973)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Fix #21972: Add `onResize` event to video elements

This is a simple fix for #21972 that adds support for the `onResize` media event.

I created a separate `videoEventTypes` array since I doubt anyone will want to add `onResize` to an audio event. It would simplify the code a bit to just add `resize` to the `mediaEventTypes` array, if that’s preferred.

Pre-commit checklist ([source](https://reactjs.org/docs/how-to-contribute.html#sending-a-pull-request))

✅ Fork the repository and create your branch from `main`.
✅ Run `yarn` in the repository root.
✅ If you’ve fixed a bug or added code that should be tested, add tests!
✅ Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development.
✅ Run `yarn test --prod` to test in the production environment.
✅ If you need a debugger, run `yarn debug-test --watch TestName`, open chrome://inspect, and press “Inspect”.
✅ Format your code with prettier (`yarn prettier`).
✅ Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files.
✅ Run the Flow typechecks (`yarn flow`).
✅ If you haven’t already, complete the CLA.

* Consolidate `videoEventTypes` array into `mediaEventTypes`
---
 .../components/fixtures/media-events/index.js    |  1 +
 .../src/__tests__/ReactDOMEventListener-test.js  |  2 ++
 .../__tests__/ReactDOMEventPropagation-test.js   | 16 ++++++++++++++++
 .../__snapshots__/ReactTestUtils-test.js.snap    |  1 +
 packages/react-dom/src/events/DOMEventNames.js   |  1 +
 .../react-dom/src/events/DOMEventProperties.js   |  1 +
 .../react-dom/src/events/DOMPluginEventSystem.js |  1 +
 .../src/events/ReactDOMEventListener.js          |  1 +
 .../react-dom/src/events/TopLevelEventTypes.js   |  1 +
 .../react-dom/src/test-utils/ReactTestUtils.js   |  1 +
 10 files changed, 26 insertions(+)

diff --git a/fixtures/dom/src/components/fixtures/media-events/index.js b/fixtures/dom/src/components/fixtures/media-events/index.js
index fda46dce8e06..cdb6147f86c8 100644
--- a/fixtures/dom/src/components/fixtures/media-events/index.js
+++ b/fixtures/dom/src/components/fixtures/media-events/index.js
@@ -21,6 +21,7 @@ export default class MediaEvents extends React.Component {
       onPlaying: false,
       onProgress: false,
       onRateChange: false,
+      onResize: false,
       onSeeked: false,
       onSeeking: false,
       onSuspend: false,
diff --git a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
index 42e73d58f154..f41ca857946a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventListener-test.js
@@ -388,6 +388,7 @@ describe('ReactDOMEventListener', () => {
       onPlaying() {},
       onProgress() {},
       onRateChange() {},
+      onResize() {},
       onSeeked() {},
       onSeeking() {},
       onStalled() {},
@@ -430,6 +431,7 @@ describe('ReactDOMEventListener', () => {
         case 'playing':
         case 'progress':
         case 'ratechange':
+        case 'resize':
         case 'seeked':
         case 'seeking':
         case 'stalled':
diff --git a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
index 06fb65722784..7c28b7bb905b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMEventPropagation-test.js
@@ -1095,6 +1095,22 @@ describe('ReactDOMEventListener', () => {
       });
     });
 
+    it('onResize', () => {
+      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', () => {
       testEmulatedBubblingEvent({
         type: 'video',
diff --git a/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap b/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
index 9f37f55219be..91b25eb20bc5 100644
--- a/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
+++ b/packages/react-dom/src/__tests__/__snapshots__/ReactTestUtils-test.js.snap
@@ -69,6 +69,7 @@ Array [
   "progress",
   "rateChange",
   "reset",
+  "resize",
   "scroll",
   "seeked",
   "seeking",
diff --git a/packages/react-dom/src/events/DOMEventNames.js b/packages/react-dom/src/events/DOMEventNames.js
index 2e14ddf7822b..92310e5128e9 100644
--- a/packages/react-dom/src/events/DOMEventNames.js
+++ b/packages/react-dom/src/events/DOMEventNames.js
@@ -86,6 +86,7 @@ export type DOMEventName =
   | 'progress'
   | 'ratechange'
   | 'reset'
+  | 'resize'
   | 'scroll'
   | 'seeked'
   | 'seeking'
diff --git a/packages/react-dom/src/events/DOMEventProperties.js b/packages/react-dom/src/events/DOMEventProperties.js
index a9b22ae8a3e2..a4ed6fcd575c 100644
--- a/packages/react-dom/src/events/DOMEventProperties.js
+++ b/packages/react-dom/src/events/DOMEventProperties.js
@@ -86,6 +86,7 @@ const simpleEventPluginEvents = [
   'progress',
   'rateChange',
   'reset',
+  'resize',
   'seeked',
   'seeking',
   'stalled',
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 0583916988e0..7f7f77183726 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -192,6 +192,7 @@ export const mediaEventTypes: Array<DOMEventName> = [
   'playing',
   'progress',
   'ratechange',
+  'resize',
   'seeked',
   'seeking',
   'stalled',
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index f3a7b974dfe9..d688521726c0 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -321,6 +321,7 @@ export function getEventPriority(domEventName: DOMEventName): * {
     case 'pointerup':
     case 'ratechange':
     case 'reset':
+    case 'resize':
     case 'seeked':
     case 'submit':
     case 'touchcancel':
diff --git a/packages/react-dom/src/events/TopLevelEventTypes.js b/packages/react-dom/src/events/TopLevelEventTypes.js
index 9b2a3e4f9a63..447ab030358d 100644
--- a/packages/react-dom/src/events/TopLevelEventTypes.js
+++ b/packages/react-dom/src/events/TopLevelEventTypes.js
@@ -71,6 +71,7 @@ export type TopLevelType =
   | 'progress'
   | 'ratechange'
   | 'reset'
+  | 'resize'
   | 'scroll'
   | 'seeked'
   | 'seeking'
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index f93c92a93767..bc913d160b68 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -642,6 +642,7 @@ const simulatedEventTypes = [
   'pointerUp',
   'rateChange',
   'reset',
+  'resize',
   'seeked',
   'submit',
   'touchCancel',

From d4d1dc085d1332fdd5025c292adcb5b39811e5b5 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 7 Sep 2021 23:28:38 +0100
Subject: [PATCH 0836/1603] Reorder VARIANT feature flags (#22266)

* Move variant tests up

* Add a comment
---
 .../forks/ReactFeatureFlags.www-dynamic.js    | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index e39892a106ec..366f1fd0a703 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -18,6 +18,13 @@ export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
+export const enableUseRefAccessWarning = __VARIANT__;
+export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
+export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
+export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
+export const enableLazyContextPropagation = __VARIANT__;
+export const enableSyncDefaultUpdates = __VARIANT__;
+export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
@@ -47,17 +54,9 @@ export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const enableTrustedTypesIntegration = false;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const disableNativeComponentFrames = false;
-
 export const createRootStrictEffectsByDefault = false;
 export const enableStrictEffects = false;
-export const enableUseRefAccessWarning = __VARIANT__;
-export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
-
-export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
-export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
-export const enableLazyContextPropagation = __VARIANT__;
-export const enableSyncDefaultUpdates = __VARIANT__;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
-
-export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
+// You probably *don't* want to add more hardcoded ones.
+// Instead, try to add them above with the __VARIANT__ value.

From 95d762e406bd37c07693e3a5ddbd0f75289e8c3f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Sep 2021 11:49:30 -0400
Subject: [PATCH 0837/1603] Remove duplicate test

Accidentally committed two copies of this test during a rebase.
---
 .../useSyncExternalStoreShared-test.js        | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 387440c053d4..a355dd15d826 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -570,29 +570,6 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     }
   });
 
-  test('Infinite loop if getSnapshot keeps returning new reference', () => {
-    const store = createExternalStore({});
-
-    function App() {
-      const text = useSyncExternalStore(store.subscribe, () => ({}));
-      return <Text text={JSON.stringify(text)} />;
-    }
-
-    spyOnDev(console, 'error');
-    const root = createRoot();
-
-    expect(() => act(() => root.render(<App />))).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.',
-    );
-    if (__DEV__) {
-      expect(console.error.calls.argsFor(0)[0]).toMatch(
-        'The result of getSnapshot should be cached to avoid an infinite loop',
-      );
-    }
-  });
-
   describe('extra features implemented in user-space', () => {
     test('memoized selectors are only called once per update', async () => {
       const store = createExternalStore({a: 0, b: 0});

From a3fde2358896e32201f49bc81acd2f228951ca84 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Wed, 8 Sep 2021 17:01:09 -0400
Subject: [PATCH 0838/1603] Detect subscriptions wrapped in startTransition
 (#22271)

* Detect subscriptions wrapped in startTransition
---
 .../src/ReactFiberHooks.new.js                | 18 ++++
 .../src/ReactFiberHooks.old.js                | 18 ++++
 .../src/ReactFiberWorkLoop.new.js             |  8 ++
 .../src/ReactFiberWorkLoop.old.js             |  8 ++
 packages/react/src/ReactCurrentBatchConfig.js | 14 ++-
 packages/react/src/ReactStartTransition.js    | 18 ++++
 .../__tests__/ReactStartTransition-test.js    | 91 +++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |  2 +
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  2 +-
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  2 +-
 17 files changed, 184 insertions(+), 4 deletions(-)
 create mode 100644 packages/react/src/__tests__/ReactStartTransition-test.js

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 4ca5ed10bc13..64a4b446ba51 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -116,6 +116,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {getIsStrictModeForDevtools} from './ReactFiberReconciler.new';
+import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1861,6 +1862,23 @@ function startTransition(setPending, callback) {
   } finally {
     setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
+    if (__DEV__) {
+      if (
+        prevTransition !== 1 &&
+        warnOnSubscriptionInsideStartTransition &&
+        ReactCurrentBatchConfig._updatedFibers
+      ) {
+        const updatedFibersCount = ReactCurrentBatchConfig._updatedFibers.size;
+        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.',
+          );
+        }
+        ReactCurrentBatchConfig._updatedFibers.clear();
+      }
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index c87e1458f0b3..11573e3b5e0a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -116,6 +116,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {getIsStrictModeForDevtools} from './ReactFiberReconciler.old';
+import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1861,6 +1862,23 @@ function startTransition(setPending, callback) {
   } finally {
     setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
+    if (__DEV__) {
+      if (
+        prevTransition !== 1 &&
+        warnOnSubscriptionInsideStartTransition &&
+        ReactCurrentBatchConfig._updatedFibers
+      ) {
+        const updatedFibersCount = ReactCurrentBatchConfig._updatedFibers.size;
+        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.',
+          );
+        }
+        ReactCurrentBatchConfig._updatedFibers.clear();
+      }
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7797448a82e9..01b5f4e8190a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -30,6 +30,7 @@ import {
   enableStrictEffects,
   skipUnmountedBoundaries,
   enableUpdaterTracking,
+  warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -385,6 +386,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
+    if (
+      __DEV__ &&
+      warnOnSubscriptionInsideStartTransition &&
+      ReactCurrentBatchConfig._updatedFibers
+    ) {
+      ReactCurrentBatchConfig._updatedFibers.add(fiber);
+    }
     // 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.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 163692456231..e5ee9f4bd7b4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -30,6 +30,7 @@ import {
   enableStrictEffects,
   skipUnmountedBoundaries,
   enableUpdaterTracking,
+  warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
@@ -385,6 +386,13 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
+    if (
+      __DEV__ &&
+      warnOnSubscriptionInsideStartTransition &&
+      ReactCurrentBatchConfig._updatedFibers
+    ) {
+      ReactCurrentBatchConfig._updatedFibers.add(fiber);
+    }
     // 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.
diff --git a/packages/react/src/ReactCurrentBatchConfig.js b/packages/react/src/ReactCurrentBatchConfig.js
index 9ba4a4c9c2c2..cca41ae4b349 100644
--- a/packages/react/src/ReactCurrentBatchConfig.js
+++ b/packages/react/src/ReactCurrentBatchConfig.js
@@ -7,12 +7,22 @@
  * @flow
  */
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+type BatchConfig = {
+  transition: number,
+  _updatedFibers?: Set<Fiber>,
+};
 /**
  * Keeps track of the current batch's configuration such as how long an update
  * should suspend for if it needs to.
  */
-const ReactCurrentBatchConfig = {
-  transition: (0: number),
+const ReactCurrentBatchConfig: BatchConfig = {
+  transition: 0,
 };
 
+if (__DEV__) {
+  ReactCurrentBatchConfig._updatedFibers = new Set();
+}
+
 export default ReactCurrentBatchConfig;
diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js
index afe1d2d282d5..3f9c9efe7149 100644
--- a/packages/react/src/ReactStartTransition.js
+++ b/packages/react/src/ReactStartTransition.js
@@ -8,6 +8,7 @@
  */
 
 import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
+import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 
 export function startTransition(scope: () => void) {
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -16,5 +17,22 @@ export function startTransition(scope: () => void) {
     scope();
   } finally {
     ReactCurrentBatchConfig.transition = prevTransition;
+    if (__DEV__) {
+      if (
+        prevTransition !== 1 &&
+        warnOnSubscriptionInsideStartTransition &&
+        ReactCurrentBatchConfig._updatedFibers
+      ) {
+        const updatedFibersCount = ReactCurrentBatchConfig._updatedFibers.size;
+        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.',
+          );
+        }
+        ReactCurrentBatchConfig._updatedFibers.clear();
+      }
+    }
   }
 }
diff --git a/packages/react/src/__tests__/ReactStartTransition-test.js b/packages/react/src/__tests__/ReactStartTransition-test.js
new file mode 100644
index 000000000000..94e45fb189e9
--- /dev/null
+++ b/packages/react/src/__tests__/ReactStartTransition-test.js
@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactTestRenderer;
+let act;
+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 = require('jest-react').act;
+    useState = React.useState;
+    useTransition = React.useTransition;
+  });
+
+  // @gate warnOnSubscriptionInsideStartTransition || !__DEV__
+  it('Warns if a suspicious number of fibers are updated inside startTransition', () => {
+    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;
+    };
+
+    act(() => {
+      ReactTestRenderer.create(<Component level={0} />, {
+        unstable_isConcurrent: true,
+      });
+    });
+
+    expect(() => {
+      act(() => {
+        React.startTransition(() => {
+          subs.forEach(setState => {
+            setState(state => state + 1);
+          });
+        });
+      });
+    }).toWarnDev(
+      [
+        '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},
+    );
+
+    expect(() => {
+      act(() => {
+        triggerHookTransition(() => {
+          subs.forEach(setState => {
+            setState(state => state + 1);
+          });
+        });
+      });
+    }).toWarnDev(
+      [
+        '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/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 618c32f1543a..f6eb72375f80 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -99,6 +99,8 @@ export const enableTrustedTypesIntegration = false;
 // a deprecated pattern we want to get rid of in the future
 export const warnAboutSpreadingKeyToJSX = false;
 
+export const warnOnSubscriptionInsideStartTransition = false;
+
 export const enableComponentStackLocations = true;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 745b3d914dd4..41122a6c5ff3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -48,6 +48,7 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index c3f9560c0b62..0bfe6f3fecc7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -39,6 +39,7 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index bd0d0cff3eef..c0b6eda1b038 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -39,6 +39,7 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e1fdf781654b..03d7ed0734d0 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -49,7 +49,7 @@ export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
-
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 844d8665d3ce..1618decf3843 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -39,6 +39,7 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 09bb7152afc2..cca9a0d71932 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -39,6 +39,7 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 1437c04ef07a..e1b633538cde 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -39,6 +39,7 @@ export const disableTextareaChildren = __EXPERIMENTAL__;
 export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 366f1fd0a703..d6a5c77b837d 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,6 +25,7 @@ export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
+export const warnOnSubscriptionInsideStartTransition = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 3986cf94427a..cd66a719143a 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,6 +31,7 @@ export const {
   disableSchedulerTimeoutInWorkLoop,
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
+  warnOnSubscriptionInsideStartTransition,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
@@ -56,7 +57,6 @@ export const enableSchedulingProfiler =
 // For now, we'll turn it on for everyone because it's *already* on for everyone in practice.
 // At least this will let us stop shipping <Profiler> implementation to all users.
 export const enableSchedulerDebugging = true;
-
 export const warnAboutDeprecatedLifecycles = true;
 export const disableLegacyContext = __EXPERIMENTAL__;
 export const warnAboutStringRefs = false;

From 4ce89a58dac5287a2c7fc454e86562297e97a6d9 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 9 Sep 2021 00:58:53 +0200
Subject: [PATCH 0839/1603] Test bad useEffect return value with noop-renderer
 (#22258)

* Test bad useEffect return value with noop-renderer

* Use previous "root"-approach

Tests should now be invariant under variants

* Add same test for layout effects
---
 .../src/__tests__/ReactHooks-test.internal.js | 36 -------
 .../ReactHooksWithNoopRenderer-test.js        | 96 +++++++++++++++++++
 2 files changed, 96 insertions(+), 36 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
index 9e39b35fc1ba..f82efce9ef94 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -727,42 +727,6 @@ describe('ReactHooks', () => {
     ReactTestRenderer.create(<App deps={undefined} />);
   });
 
-  it('assumes useEffect clean-up function is either a function or undefined', () => {
-    const {useLayoutEffect} = React;
-
-    function App(props) {
-      useLayoutEffect(() => {
-        return props.return;
-      });
-      return null;
-    }
-
-    const root1 = ReactTestRenderer.create(null);
-    expect(() => root1.update(<App return={17} />)).toErrorDev([
-      'Warning: An effect function must not return anything besides a ' +
-        'function, which is used for clean-up. You returned: 17',
-    ]);
-
-    const root2 = ReactTestRenderer.create(null);
-    expect(() => root2.update(<App return={null} />)).toErrorDev([
-      'Warning: An effect function must not return anything besides a ' +
-        'function, which is used for clean-up. You returned null. If your ' +
-        'effect does not require clean up, return undefined (or nothing).',
-    ]);
-
-    const root3 = ReactTestRenderer.create(null);
-    expect(() => root3.update(<App return={Promise.resolve()} />)).toErrorDev([
-      'Warning: An effect function must not return anything besides a ' +
-        'function, which is used for clean-up.\n\n' +
-        'It looks like you wrote useEffect(async () => ...) or returned a Promise.',
-    ]);
-
-    // Error on unmount because React assumes the value is a function
-    expect(() => {
-      root3.update(null);
-    }).toThrow('is not a function');
-  });
-
   it('does not forget render phase useState updates inside an effect', () => {
     const {useState, useEffect} = React;
 
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 64207dcaa470..342c8abf9a25 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2632,6 +2632,54 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
       expect(Scheduler).toHaveYielded(['layout destroy', 'passive destroy']);
     });
+
+    it('assumes passive effect destroy function is either a function or undefined', () => {
+      function App(props) {
+        useEffect(() => {
+          return props.return;
+        });
+        return null;
+      }
+
+      const root1 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root1.render(<App return={17} />);
+        }),
+      ).toErrorDev([
+        'Warning: An effect function must not return anything besides a ' +
+          'function, which is used for clean-up. You returned: 17',
+      ]);
+
+      const root2 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root2.render(<App return={null} />);
+        }),
+      ).toErrorDev([
+        'Warning: An effect function must not return anything besides a ' +
+          'function, which is used for clean-up. You returned null. If your ' +
+          'effect does not require clean up, return undefined (or nothing).',
+      ]);
+
+      const root3 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root3.render(<App return={Promise.resolve()} />);
+        }),
+      ).toErrorDev([
+        'Warning: An effect function must not return anything besides a ' +
+          'function, which is used for clean-up.\n\n' +
+          'It looks like you wrote useEffect(async () => ...) or returned a Promise.',
+      ]);
+
+      // Error on unmount because React assumes the value is a function
+      expect(() =>
+        act(() => {
+          root3.unmount();
+        }),
+      ).toThrow('is not a function');
+    });
   });
 
   describe('useLayoutEffect', () => {
@@ -2810,6 +2858,54 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
       expect(ReactNoop.getChildren()).toEqual([span('OuterFallback')]);
     });
+
+    it('assumes layout effect destroy function is either a function or undefined', () => {
+      function App(props) {
+        useLayoutEffect(() => {
+          return props.return;
+        });
+        return null;
+      }
+
+      const root1 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root1.render(<App return={17} />);
+        }),
+      ).toErrorDev([
+        'Warning: An effect function must not return anything besides a ' +
+          'function, which is used for clean-up. You returned: 17',
+      ]);
+
+      const root2 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root2.render(<App return={null} />);
+        }),
+      ).toErrorDev([
+        'Warning: An effect function must not return anything besides a ' +
+          'function, which is used for clean-up. You returned null. If your ' +
+          'effect does not require clean up, return undefined (or nothing).',
+      ]);
+
+      const root3 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root3.render(<App return={Promise.resolve()} />);
+        }),
+      ).toErrorDev([
+        'Warning: An effect function must not return anything besides a ' +
+          'function, which is used for clean-up.\n\n' +
+          'It looks like you wrote useEffect(async () => ...) or returned a Promise.',
+      ]);
+
+      // Error on unmount because React assumes the value is a function
+      expect(() =>
+        act(() => {
+          root3.unmount();
+        }),
+      ).toThrow('is not a function');
+    });
   });
 
   describe('useCallback', () => {

From 24c2e27256b8f2051bde626598f2fba34efd109b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 Sep 2021 09:28:17 -0400
Subject: [PATCH 0840/1603] DevTools Suspense cache cleanup (#22275)

---
 .../src/hookNamesCache.js                     | 77 +++++++++--------
 .../ContainingStringSourceMappingURL.js       |  5 ++
 .../hooks/__tests__/parseHookNames-test.js    |  2 +-
 .../parseHookNames/loadSourceAndMetadata.js   | 83 +++++++++++--------
 .../src/inspectedElementCache.js              | 40 +++++----
 5 files changed, 120 insertions(+), 87 deletions(-)

diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 6edbc0e30a12..3fceaa7d0247 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -110,44 +110,51 @@ export function loadHookNames(
 
     let didTimeout = false;
 
-    loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
-      function onSuccess(hookNames) {
-        if (didTimeout) {
-          return;
-        }
-
-        if (__DEBUG__) {
-          console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
-        }
-
-        if (hookNames) {
-          const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
-          resolvedRecord.status = Resolved;
-          resolvedRecord.value = hookNames;
-        } else {
-          const notFoundRecord = ((newRecord: any): RejectedRecord);
-          notFoundRecord.status = Rejected;
-          notFoundRecord.value = null;
-        }
-
-        wake();
-      },
-      function onError(error) {
-        if (didTimeout) {
-          return;
-        }
+    const onSuccess = hookNames => {
+      if (didTimeout) {
+        return;
+      }
+
+      if (__DEBUG__) {
+        console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
+      }
 
-        if (__DEBUG__) {
-          console.log('[hookNamesCache] onError() error:', error);
-        }
+      if (hookNames) {
+        const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = hookNames;
+      } else {
+        const notFoundRecord = ((newRecord: any): RejectedRecord);
+        notFoundRecord.status = Rejected;
+        notFoundRecord.value = null;
+      }
 
-        const thrownRecord = ((newRecord: any): RejectedRecord);
-        thrownRecord.status = Rejected;
-        thrownRecord.value = null;
+      wake();
+    };
 
-        wake();
-      },
-    );
+    const onError = error => {
+      if (didTimeout) {
+        return;
+      }
+
+      if (__DEBUG__) {
+        console.log('[hookNamesCache] onError()');
+      }
+
+      console.error(error);
+
+      const thrownRecord = ((newRecord: any): RejectedRecord);
+      thrownRecord.status = Rejected;
+      thrownRecord.value = null;
+
+      wake();
+    };
+
+    const thenable = loadHookNamesFunction(hooksTree, fetchFileWithCaching);
+    thenable.then(onSuccess, onError);
+    if (typeof (thenable: any).catch === 'function') {
+      (thenable: any).catch(onError);
+    }
 
     // Eventually timeout and stop trying to load names.
     let timeoutID = setTimeout(function onTimeout() {
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js
index e03b3f65b626..1499e00a07c0 100644
--- a/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/ContainingStringSourceMappingURL.js
@@ -11,12 +11,17 @@ 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__/parseHookNames-test.js b/packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js
index 842cb78c0572..c01a6e6f59c2 100644
--- a/packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js
+++ b/packages/react-devtools-shared/src/hooks/__tests__/parseHookNames-test.js
@@ -136,7 +136,7 @@ describe('parseHookNames', () => {
       .Component;
 
     fetchMock.mockIf(/.+$/, request => {
-      // Since th custom hook contains only unnamed hooks, the source code should not be loaded.
+      // 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}"`);
       }
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
index bcfe573ee888..b72c2c68557b 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
@@ -148,6 +148,14 @@ function extractAndLoadSourceMapJSON(
   // Deduplicate fetches, since there can be multiple location keys per source map.
   const dedupedFetchPromises = new Map();
 
+  if (__DEBUG__) {
+    console.log(
+      'extractAndLoadSourceMapJSON() load',
+      locationKeyToHookSourceAndMetadata.size,
+      'source maps',
+    );
+  }
+
   const setterPromises = [];
   locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
     const sourceMapRegex = / ?sourceMappingURL=([^\s'"]+)/gm;
@@ -177,45 +185,52 @@ function extractAndLoadSourceMapJSON(
         const sourceMappingURL = sourceMappingURLMatch[1];
         const hasInlineSourceMap = sourceMappingURL.indexOf('base64,') >= 0;
         if (hasInlineSourceMap) {
-          // 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 = withSyncPerformanceMark('decodeBase64String()', () =>
-            decodeBase64String(trimmed),
-          );
-
-          const sourceMapJSON = withSyncPerformanceMark(
-            'JSON.parse(decoded)',
-            () => JSON.parse(decoded),
-          );
+          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 = withSyncPerformanceMark(
+              'decodeBase64String()',
+              () => decodeBase64String(trimmed),
+            );
 
-          if (__DEBUG__) {
-            console.groupCollapsed(
-              'extractAndLoadSourceMapJSON() Inline source map',
+            const sourceMapJSON = withSyncPerformanceMark(
+              'JSON.parse(decoded)',
+              () => JSON.parse(decoded),
             );
-            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;
+            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;
+              // 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;
+              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);
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 820a2a59a18b..000812acdb14 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -116,28 +116,34 @@ export function inspectElement(
       return null;
     }
 
-    inspectElementMutableSource({
+    const onSuccess = ([inspectedElement: InspectedElementFrontend]) => {
+      const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
+      resolvedRecord.status = Resolved;
+      resolvedRecord.value = inspectedElement;
+      wake();
+    };
+
+    const onError = error => {
+      if (newRecord.status === Pending) {
+        const rejectedRecord = ((newRecord: any): RejectedRecord);
+        rejectedRecord.status = Rejected;
+        rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
+        wake();
+      }
+    };
+
+    const thenable = inspectElementMutableSource({
       bridge,
       element,
       path,
       rendererID: ((rendererID: any): number),
-    }).then(
-      ([inspectedElement: InspectedElementFrontend]) => {
-        const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
-        resolvedRecord.status = Resolved;
-        resolvedRecord.value = inspectedElement;
-        wake();
-      },
+    });
+    thenable.then(onSuccess, onError);
+
+    if (typeof (thenable: any).catch === 'function') {
+      (thenable: any).catch();
+    }
 
-      error => {
-        if (newRecord.status === Pending) {
-          const rejectedRecord = ((newRecord: any): RejectedRecord);
-          rejectedRecord.status = Rejected;
-          rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
-          wake();
-        }
-      },
-    );
     map.set(element, record);
   }
 

From 8f96c6b2ac3ff0e38f60c87b1f08deb9993526b5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 9 Sep 2021 11:14:30 -0400
Subject: [PATCH 0841/1603] [Bugfix] Prevent infinite update loop caused by a
 synchronous update in a passive effect (#22277)

* Add test that triggers infinite update loop

In 18, passive effects are flushed synchronously if they are the
result of a synchronous update. We have a guard for infinite update
loops that occur in the layout phase, but it doesn't currently work for
synchronous updates from a passive effect.

The reason this probably hasn't come up yet is because synchronous
updates inside the passive effect phase are relatively rare: you either
have to imperatively dispatch a discrete event, like `el.focus`, or you
have to call `ReactDOM.flushSync`, which triggers a warning. (In
general, updates inside a passive effect are not encouraged.)

I discovered this because `useSyncExternalStore` does sometimes
trigger updates inside the passive effect phase.

This commit adds a failing test to prove the issue exists. I will fix
it in the next commit.

* Fix failing test added in previous commit

The way we detect a "nested update" is if there's synchronous work
remaining at the end of the commit phase.

Currently this check happens before we synchronously flush the passive
effects. I moved it to after the effects are fired, so that it detects
whether synchronous work was scheduled in that phase.
---
 .../src/__tests__/ReactUpdates-test.js        | 32 +++++++++++++
 .../src/ReactFiberWorkLoop.new.js             | 45 ++++++++++++-------
 .../src/ReactFiberWorkLoop.old.js             | 45 ++++++++++++-------
 3 files changed, 88 insertions(+), 34 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index a49b62062d32..42647abf53b4 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -1594,6 +1594,7 @@ describe('ReactUpdates', () => {
     });
   });
 
+  // TODO: Replace this branch with @gate pragmas
   if (__DEV__) {
     it('warns about a deferred infinite update loop with useEffect', () => {
       function NonTerminating() {
@@ -1684,4 +1685,35 @@ describe('ReactUpdates', () => {
       expect(container.textContent).toBe('1000');
     });
   }
+
+  it('prevents infinite update loop triggered by synchronous updates in useEffect', () => {
+    // Ignore flushSync warning
+    spyOnDev(console, 'error');
+
+    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 root = ReactDOM.createRoot(container);
+    expect(() => {
+      ReactDOM.flushSync(() => {
+        root.render(<NonTerminating />);
+      });
+    }).toThrow('Maximum update depth exceeded');
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 01b5f4e8190a..dc79e39e9d6a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1897,6 +1897,15 @@ function commitRootImpl(root, renderPriorityLevel) {
   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.
@@ -1909,23 +1918,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
-    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;
-  }
-
   onCommitRootDevTools(finishedWork.stateNode, renderPriorityLevel);
 
   if (enableUpdaterTracking) {
@@ -1964,6 +1956,25 @@ function commitRootImpl(root, renderPriorityLevel) {
     flushPassiveEffects();
   }
 
+  // Read this again, since a passive effect might have updated it
+  remainingLanes = root.pendingLanes;
+  if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
+    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 layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index e5ee9f4bd7b4..e0cb491e8214 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1897,6 +1897,15 @@ function commitRootImpl(root, renderPriorityLevel) {
   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.
@@ -1909,23 +1918,6 @@ function commitRootImpl(root, renderPriorityLevel) {
     }
   }
 
-  if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
-    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;
-  }
-
   onCommitRootDevTools(finishedWork.stateNode, renderPriorityLevel);
 
   if (enableUpdaterTracking) {
@@ -1964,6 +1956,25 @@ function commitRootImpl(root, renderPriorityLevel) {
     flushPassiveEffects();
   }
 
+  // Read this again, since a passive effect might have updated it
+  remainingLanes = root.pendingLanes;
+  if (includesSomeLane(remainingLanes, (SyncLane: Lane))) {
+    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 layout work was scheduled, flush it now.
   flushSyncCallbacks();
 

From 225740be4864ee8eeb349b38b329291450245578 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 Sep 2021 15:25:26 -0400
Subject: [PATCH 0842/1603] Add named hooks support to react-devtools-inline
 (#22263)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit builds on PR #22260 and makes the following changes:
* Adds a DevTools feature flag for named hooks support. (This allows us to disable it entirely for a build via feature flag.)
* Adds a new Suspense cache for dynamically imported modules. (This allows a component to suspend while importing an external code chunk– like the hook names parsing code).
* DevTools supports a hookNamesModuleLoaderFunction param to import the hook names module. I wish this could be handles as part of the react-devtools-shared package, but I'm not sure how to configure Webpack (4) to serve the chunk from react-devtools-inline. This seemed like a reasonable workaround.

The PR also contains an additional unrelated change:
* Removes pre-fetch optimization (added in DevTools: Improve named hooks network caching #22198). This optimization was mostly only important for cases where sources needed to be re-downloaded, something which we can now avoid in most cases¹ thanks to using cached responses already loaded by the page. (I tested this locally on Facebook and this change has no negative performance impact. There is still some overhead from serializing the JS through the Bridge but that's constant between the two approaches.)

¹ The case where we don't benefit from cached responses is when DevTools are opened after the page has already loaded certain scripts. This seems uncommon enough that I don't think it justified the added complexity of prefetching.
---
 .../react-devtools-extensions/src/main.js     |  42 +++--
 .../webpack.config.js                         |   1 +
 packages/react-devtools-inline/README.md      |  17 ++
 packages/react-devtools-inline/hookNames.js   |   1 +
 packages/react-devtools-inline/package.json   |   5 +-
 .../react-devtools-inline/src/hookNames.js    |   9 +
 .../react-devtools-inline/webpack.config.js   |   2 +
 .../config/DevToolsFeatureFlags.core-fb.js    |   2 +-
 .../config/DevToolsFeatureFlags.core-oss.js   |   2 +-
 .../config/DevToolsFeatureFlags.default.js    |   2 +-
 .../DevToolsFeatureFlags.extension-fb.js      |   2 +-
 .../DevToolsFeatureFlags.extension-oss.js     |   2 +-
 .../Components/FetchFileWithCachingContext.js |  18 ++
 .../views/Components/HookNamesContext.js      |  26 ---
 .../HookNamesModuleLoaderContext.js           |  22 +++
 .../Components/InspectedElementContext.js     |  65 ++++---
 .../Components/InspectedElementHooksTree.js   |  14 +-
 .../src/devtools/views/DevTools.js            | 129 ++++++--------
 .../src/dynamicImportCache.js                 | 159 ++++++++++++++++++
 .../src/hookNamesCache.js                     |   2 +-
 .../src/hooks/parseHookNames/index.js         |  10 +-
 .../parseHookNames/loadSourceAndMetadata.js   | 146 ++++------------
 packages/react-devtools-shell/src/devtools.js |  11 ++
 .../react-devtools-shell/webpack.config.js    |   4 +-
 24 files changed, 415 insertions(+), 278 deletions(-)
 create mode 100644 packages/react-devtools-inline/hookNames.js
 create mode 100644 packages/react-devtools-inline/src/hookNames.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
 create mode 100644 packages/react-devtools-shared/src/dynamicImportCache.js

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index f1283899feec..8781d6e22dbb 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -287,32 +287,30 @@ function createPanelIfReactLoaded() {
           };
         }
 
+        // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+        const hookNamesModuleLoaderFunction = () =>
+          import('react-devtools-inline/hookNames');
+
         root = createRoot(document.createElement('div'));
 
         render = (overrideTab = mostRecentOverrideTab) => {
           mostRecentOverrideTab = overrideTab;
-          import('react-devtools-shared/src/hooks/parseHookNames').then(
-            ({parseHookNames, prefetchSourceFiles, purgeCachedMetadata}) => {
-              root.render(
-                createElement(DevTools, {
-                  bridge,
-                  browserTheme: getBrowserTheme(),
-                  componentsPortalContainer,
-                  enabledInspectedElementContextMenu: true,
-                  fetchFileWithCaching,
-                  loadHookNames: parseHookNames,
-                  overrideTab,
-                  prefetchSourceFiles,
-                  profilerPortalContainer,
-                  purgeCachedHookNamesMetadata: purgeCachedMetadata,
-                  showTabBar: false,
-                  store,
-                  warnIfUnsupportedVersionDetected: true,
-                  viewAttributeSourceFunction,
-                  viewElementSourceFunction,
-                }),
-              );
-            },
+          root.render(
+            createElement(DevTools, {
+              bridge,
+              browserTheme: getBrowserTheme(),
+              componentsPortalContainer,
+              enabledInspectedElementContextMenu: true,
+              fetchFileWithCaching,
+              hookNamesModuleLoaderFunction,
+              overrideTab,
+              profilerPortalContainer,
+              showTabBar: false,
+              store,
+              warnIfUnsupportedVersionDetected: true,
+              viewAttributeSourceFunction,
+              viewElementSourceFunction,
+            }),
           );
         };
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 7f9e632ffab1..233422276ec4 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -52,6 +52,7 @@ module.exports = {
     path: __dirname + '/build',
     publicPath: '/build/',
     filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
   },
   node: {
     // Don't define a polyfill on window.setImmediate
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 88b2c93b7cb0..35b0127f41d5 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -64,6 +64,23 @@ const DevTools = initialize(contentWindow);
 
 ## 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 infering 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.
diff --git a/packages/react-devtools-inline/hookNames.js b/packages/react-devtools-inline/hookNames.js
new file mode 100644
index 000000000000..6a319e2de30b
--- /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
index 8b2e745a8585..160723b21af5 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -20,7 +20,10 @@
     "prepublish": "yarn run build",
     "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
   },
-  "dependencies": {},
+  "dependencies": {
+    "source-map-js": "^0.6.2",
+    "sourcemap-codec": "^1.4.8"
+  },
   "devDependencies": {
     "@babel/core": "^7.11.1",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
diff --git a/packages/react-devtools-inline/src/hookNames.js b/packages/react-devtools-inline/src/hookNames.js
new file mode 100644
index 000000000000..7436ef7d01db
--- /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
index 169484f8cc27..bc38a8792e4c 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -37,10 +37,12 @@ module.exports = {
   entry: {
     backend: './src/backend.js',
     frontend: './src/frontend.js',
+    hookNames: './src/hookNames.js',
   },
   output: {
     path: __dirname + '/dist',
     filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
     library: '[name]',
     libraryTarget: 'commonjs2',
   },
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index 4da6aef3441b..6c0568867ba3 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
-
+export const enableNamedHooksFeature = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index e6144b7e4f3a..341af11e17f7 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
-
+export const enableNamedHooksFeature = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index 081342371264..e6404254a385 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -15,5 +15,5 @@
 
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
-
+export const enableNamedHooksFeature = true;
 export const consoleManagedByDevToolsDuringStrictMode = true;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
index ba593ffe72c1..d4e6160b5e86 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
-
+export const enableNamedHooksFeature = true;
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index c1bb06855d19..382c3fab4c31 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = false;
-
+export const enableNamedHooksFeature = true;
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************
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 000000000000..4647ebe9bf76
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {createContext} from 'react';
+
+export type FetchFileWithCaching = (url: string) => Promise<string>;
+export type Context = FetchFileWithCaching | null;
+
+const FetchFileWithCachingContext = createContext<Context>(null);
+FetchFileWithCachingContext.displayName = 'FetchFileWithCachingContext';
+
+export default FetchFileWithCachingContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
deleted file mode 100644
index f9f295c7eb43..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/Components/HookNamesContext.js
+++ /dev/null
@@ -1,26 +0,0 @@
-// @flow
-
-import {createContext} from 'react';
-import type {
-  FetchFileWithCaching,
-  LoadHookNamesFunction,
-  PrefetchSourceFiles,
-  PurgeCachedHookNamesMetadata,
-} from '../DevTools';
-
-export type Context = {
-  fetchFileWithCaching: FetchFileWithCaching | null,
-  loadHookNames: LoadHookNamesFunction | null,
-  prefetchSourceFiles: PrefetchSourceFiles | null,
-  purgeCachedMetadata: PurgeCachedHookNamesMetadata | null,
-};
-
-const HookNamesContext = createContext<Context>({
-  fetchFileWithCaching: null,
-  loadHookNames: null,
-  prefetchSourceFiles: null,
-  purgeCachedMetadata: null,
-});
-HookNamesContext.displayName = 'HookNamesContext';
-
-export default HookNamesContext;
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 000000000000..c9a09e64c0e1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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 = createContext<Context>(null);
+HookNamesModuleLoaderContext.displayName = 'HookNamesModuleLoaderContext';
+
+export default HookNamesModuleLoaderContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 967196a3b905..c02dc5bf9263 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -30,8 +30,11 @@ import {
   hasAlreadyLoadedHookNames,
   loadHookNames,
 } from 'react-devtools-shared/src/hookNamesCache';
-import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
+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 {enableNamedHooksFeature} from 'react-devtools-feature-flags';
 
 import type {HookNames} from 'react-devtools-shared/src/types';
 import type {ReactNodeList} from 'shared/ReactTypes';
@@ -64,16 +67,17 @@ export type Props = {|
 
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
-  const {
-    fetchFileWithCaching,
-    loadHookNames: loadHookNamesFunction,
-    prefetchSourceFiles,
-    purgeCachedMetadata,
-  } = useContext(HookNamesContext);
+  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.
@@ -113,24 +117,40 @@ export function InspectedElementContextController({children}: Props) {
     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 (parseHookNames || alreadyLoadedHookNames) {
-      if (
-        inspectedElement !== null &&
-        inspectedElement.hooks !== null &&
-        loadHookNamesFunction !== null
-      ) {
-        hookNames = loadHookNames(
-          element,
-          inspectedElement.hooks,
-          loadHookNamesFunction,
-          fetchFileWithCaching,
-        );
+    if (enableNamedHooksFeature) {
+      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,
+              );
+            }
+          }
+        }
       }
     }
   }
@@ -163,14 +183,11 @@ export function InspectedElementContextController({children}: Props) {
       inspectedElementRef.current !== inspectedElement
     ) {
       inspectedElementRef.current = inspectedElement;
-
-      if (typeof prefetchSourceFiles === 'function') {
-        prefetchSourceFiles(inspectedElement.hooks, fetchFileWithCaching);
-      }
     }
-  }, [inspectedElement, prefetchSourceFiles]);
+  }, [inspectedElement]);
 
   useEffect(() => {
+    const purgeCachedMetadata = purgeCachedMetadataRef.current;
     if (typeof purgeCachedMetadata === 'function') {
       // When Fast Refresh updates a component, any cached AST metadata may be invalid.
       const fastRefreshScheduled = () => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index b478aeb44129..fb80b0152968 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -22,8 +22,11 @@ import styles from './InspectedElementHooksTree.css';
 import useContextMenu from '../../ContextMenu/useContextMenu';
 import {meta} from '../../../hydration';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
-import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
-import HookNamesContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesContext';
+import {
+  enableNamedHooksFeature,
+  enableProfilerChangedHookIndices,
+} from 'react-devtools-feature-flags';
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 
 import type {InspectedElement} from './types';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -53,8 +56,6 @@ export function InspectedElementHooksTree({
 }: HooksTreeViewProps) {
   const {hooks, id} = inspectedElement;
 
-  const {loadHookNames: loadHookNamesFunction} = useContext(HookNamesContext);
-
   // 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(
@@ -65,6 +66,8 @@ export function InspectedElementHooksTree({
     toggleParseHookNames();
   };
 
+  const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);
+
   const hookParsingFailed = parseHookNames && hookNames === null;
 
   let toggleTitle;
@@ -85,7 +88,8 @@ export function InspectedElementHooksTree({
       <div className={styles.HooksTreeView}>
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
-          {loadHookNamesFunction !== null &&
+          {enableNamedHooksFeature &&
+            typeof hookNamesModuleLoader === 'function' &&
             (!parseHookNames || hookParsingFailed) && (
               <Toggle
                 className={hookParsingFailed ? styles.ToggleError : null}
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index a1280d14bd22..6461441710ec 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -27,7 +27,8 @@ import TabBar from './TabBar';
 import {SettingsContextController} from './Settings/SettingsContext';
 import {TreeContextController} from './Components/TreeContext';
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
-import HookNamesContext from './Components/HookNamesContext';
+import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
+import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
 import {SchedulingProfilerContextController} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
@@ -42,28 +43,18 @@ import styles from './DevTools.css';
 
 import './root.css';
 
-import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
+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 {HookNames} from 'react-devtools-shared/src/types';
-import type {Thenable} from '../cache';
 
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
 
-export type FetchFileWithCaching = (url: string) => Promise<string>;
-export type PrefetchSourceFiles = (
-  hooksTree: HooksTree,
-  fetchFileWithCaching: FetchFileWithCaching | null,
-) => void;
 export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
 ) => void;
-export type LoadHookNamesFunction = (
-  hooksTree: HooksTree,
-) => Thenable<HookNames>;
-export type PurgeCachedHookNamesMetadata = () => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
@@ -107,9 +98,8 @@ export type Props = {|
   // 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,
-  loadHookNames?: ?LoadHookNamesFunction,
-  prefetchSourceFiles?: ?PrefetchSourceFiles,
-  purgeCachedHookNamesMetadata?: ?PurgeCachedHookNamesMetadata,
+  // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+  hookNamesModuleLoaderFunction?: ?HookNamesModuleLoaderFunction,
 |};
 
 const componentsTab = {
@@ -135,11 +125,9 @@ export default function DevTools({
   defaultTab = 'components',
   enabledInspectedElementContextMenu = false,
   fetchFileWithCaching,
-  loadHookNames,
+  hookNamesModuleLoaderFunction,
   overrideTab,
   profilerPortalContainer,
-  prefetchSourceFiles,
-  purgeCachedHookNamesMetadata,
   showTabBar = false,
   store,
   warnIfLegacyBackendDetected = false,
@@ -199,21 +187,6 @@ export default function DevTools({
     [enabledInspectedElementContextMenu, viewAttributeSourceFunction],
   );
 
-  const hookNamesContext = useMemo(
-    () => ({
-      fetchFileWithCaching: fetchFileWithCaching || null,
-      loadHookNames: loadHookNames || null,
-      prefetchSourceFiles: prefetchSourceFiles || null,
-      purgeCachedMetadata: purgeCachedHookNamesMetadata || null,
-    }),
-    [
-      fetchFileWithCaching,
-      loadHookNames,
-      prefetchSourceFiles,
-      purgeCachedHookNamesMetadata,
-    ],
-  );
-
   const devToolsRef = useRef<HTMLElement | null>(null);
 
   useEffect(() => {
@@ -270,51 +243,55 @@ export default function DevTools({
                 componentsPortalContainer={componentsPortalContainer}
                 profilerPortalContainer={profilerPortalContainer}>
                 <ViewElementSourceContext.Provider value={viewElementSource}>
-                  <HookNamesContext.Provider value={hookNamesContext}>
-                    <TreeContextController>
-                      <ProfilerContextController>
-                        <SchedulingProfilerContextController>
-                          <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={setTab}
-                                    tabs={tabs}
-                                    type="navigation"
+                  <HookNamesModuleLoaderContext.Provider
+                    value={hookNamesModuleLoaderFunction || null}>
+                    <FetchFileWithCachingContext.Provider
+                      value={fetchFileWithCaching || null}>
+                      <TreeContextController>
+                        <ProfilerContextController>
+                          <SchedulingProfilerContextController>
+                            <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={setTab}
+                                      tabs={tabs}
+                                      type="navigation"
+                                    />
+                                  </div>
+                                )}
+                                <div
+                                  className={styles.TabContent}
+                                  hidden={tab !== 'components'}>
+                                  <Components
+                                    portalContainer={componentsPortalContainer}
+                                  />
+                                </div>
+                                <div
+                                  className={styles.TabContent}
+                                  hidden={tab !== 'profiler'}>
+                                  <Profiler
+                                    portalContainer={profilerPortalContainer}
                                   />
                                 </div>
-                              )}
-                              <div
-                                className={styles.TabContent}
-                                hidden={tab !== 'components'}>
-                                <Components
-                                  portalContainer={componentsPortalContainer}
-                                />
-                              </div>
-                              <div
-                                className={styles.TabContent}
-                                hidden={tab !== 'profiler'}>
-                                <Profiler
-                                  portalContainer={profilerPortalContainer}
-                                />
                               </div>
-                            </div>
-                          </ThemeProvider>
-                        </SchedulingProfilerContextController>
-                      </ProfilerContextController>
-                    </TreeContextController>
-                  </HookNamesContext.Provider>
+                            </ThemeProvider>
+                          </SchedulingProfilerContextController>
+                        </ProfilerContextController>
+                      </TreeContextController>
+                    </FetchFileWithCachingContext.Provider>
+                  </HookNamesModuleLoaderContext.Provider>
                 </ViewElementSourceContext.Provider>
               </SettingsContextController>
               <UnsupportedBridgeProtocolDialog />
diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js
new file mode 100644
index 000000000000..78045856abb8
--- /dev/null
+++ b/packages/react-devtools-shared/src/dynamicImportCache.js
@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+
+import type {Thenable, Wakeable} from 'shared/ReactTypes';
+
+const TIMEOUT = 30000;
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingRecord = {|
+  status: 0,
+  value: Wakeable,
+|};
+
+type ResolvedRecord<T> = {|
+  status: 1,
+  value: T,
+|};
+
+type RejectedRecord = {|
+  status: 2,
+  value: null,
+|};
+
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
+
+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: Record<T>): ResolvedRecord<T> | RejectedRecord {
+  if (record.status === Resolved) {
+    // This is just a type refinement.
+    return record;
+  } else if (record.status === Rejected) {
+    // This is just a type refinement.
+    return record;
+  } else {
+    throw record.value;
+  }
+}
+
+// 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();
+    const wakeable: Wakeable = {
+      then(callback) {
+        callbacks.add(callback);
+      },
+    };
+
+    const wake = () => {
+      if (timeoutID) {
+        clearTimeout(timeoutID);
+        timeoutID = null;
+      }
+
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback());
+      callbacks.clear();
+    };
+
+    const newRecord: Record<Module> = (record = {
+      status: Pending,
+      value: wakeable,
+    });
+
+    let didTimeout = false;
+
+    moduleLoaderFunction().then(
+      module => {
+        if (__DEBUG__) {
+          console.log(
+            `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") then()`,
+          );
+        }
+
+        if (didTimeout) {
+          return;
+        }
+
+        const resolvedRecord = ((newRecord: any): ResolvedRecord<Module>);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = module;
+
+        wake();
+      },
+      error => {
+        if (__DEBUG__) {
+          console.log(
+            `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") catch()`,
+          );
+        }
+
+        if (didTimeout) {
+          return;
+        }
+
+        console.log(error);
+
+        const thrownRecord = ((newRecord: any): RejectedRecord);
+        thrownRecord.status = Rejected;
+        thrownRecord.value = null;
+
+        wake();
+      },
+    );
+
+    // Eventually timeout and stop trying to load the module.
+    let timeoutID = setTimeout(function onTimeout() {
+      if (__DEBUG__) {
+        console.log(
+          `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") onTimeout()`,
+        );
+      }
+
+      timeoutID = null;
+
+      didTimeout = true;
+
+      const timedoutRecord = ((newRecord: any): RejectedRecord);
+      timedoutRecord.status = Rejected;
+      timedoutRecord.value = null;
+
+      wake();
+    }, TIMEOUT);
+
+    moduleLoaderFunctionToModuleMap.set(moduleLoaderFunction, record);
+  }
+
+  const response = readRecord(record).value;
+  return response;
+}
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 3fceaa7d0247..104a1e3455eb 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -17,7 +17,7 @@ import type {
   HookSourceLocationKey,
 } from 'react-devtools-shared/src/types';
 import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
-import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
 
 const TIMEOUT = 30000;
 
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/index.js b/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
index eae8440399c7..a400a021a91f 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
@@ -10,21 +10,15 @@
 import type {HookSourceAndMetadata} from './loadSourceAndMetadata';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {HookNames} from 'react-devtools-shared/src/types';
-import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
 
 import {withAsyncPerformanceMark} from 'react-devtools-shared/src/PerformanceMarks';
 import WorkerizedParseSourceAndMetadata from './parseSourceAndMetadata.worker';
 import typeof * as ParseSourceAndMetadataModule from './parseSourceAndMetadata';
-import {
-  flattenHooksList,
-  loadSourceAndMetadata,
-  prefetchSourceFiles,
-} from './loadSourceAndMetadata';
+import {flattenHooksList, loadSourceAndMetadata} from './loadSourceAndMetadata';
 
 const workerizedParseHookNames: ParseSourceAndMetadataModule = WorkerizedParseSourceAndMetadata();
 
-export {prefetchSourceFiles};
-
 export function parseSourceAndMetadata(
   hooksList: Array<HooksNode>,
   locationKeyToHookSourceAndMetadata: Map<string, HookSourceAndMetadata>,
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
index b72c2c68557b..e8f043be24c1 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
@@ -45,7 +45,6 @@
 //       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 LRU from 'lru-cache';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {sourceMapIncludesSource} from '../SourceMapUtils';
@@ -55,14 +54,13 @@ import {
   withSyncPerformanceMark,
 } from 'react-devtools-shared/src/PerformanceMarks';
 
-import type {LRUCache} from 'react-devtools-shared/src/types';
 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/DevTools';
+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).
@@ -70,14 +68,6 @@ const FETCH_OPTIONS = {cache: 'force-cache'};
 
 const MAX_SOURCE_LENGTH = 100_000_000;
 
-// Fetch requests originated from an extension might not have origin headers
-// which may prevent subsequent requests from using cached responses
-// if the server returns a Vary: 'Origin' header
-// so this cache will temporarily store pre-fetches sources in memory.
-const prefetchedSources: LRUCache<string, string> = new LRU({
-  max: 15,
-});
-
 export type HookSourceAndMetadata = {|
   // Generated by react-debug-tools.
   hookSource: HookSource,
@@ -477,109 +467,47 @@ function loadSourceFiles(
   locationKeyToHookSourceAndMetadata.forEach(hookSourceAndMetadata => {
     const {runtimeSourceURL} = hookSourceAndMetadata;
 
-    const prefetchedSourceCode = prefetchedSources.get(runtimeSourceURL);
-    if (prefetchedSourceCode != null) {
-      hookSourceAndMetadata.runtimeSourceCode = prefetchedSourceCode;
-    } else {
-      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 withAsyncPerformanceMark(
-            `fetchFileWithCaching("${url}")`,
-            () => {
-              return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
-            },
-          );
-        };
-      }
+    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 withAsyncPerformanceMark(
+          `fetchFileWithCaching("${url}")`,
+          () => {
+            return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
+          },
+        );
+      };
+    }
 
-      const fetchPromise =
-        dedupedFetchPromises.get(runtimeSourceURL) ||
-        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');
-          }
+    const fetchPromise =
+      dedupedFetchPromises.get(runtimeSourceURL) ||
+      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();
-          }
+        if (__DEBUG__) {
+          console.groupCollapsed(
+            `loadSourceFiles() runtimeSourceURL "${runtimeSourceURL}"`,
+          );
+          console.log(runtimeSourceCode);
+          console.groupEnd();
+        }
 
-          return runtimeSourceCode;
-        });
-      dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);
+        return runtimeSourceCode;
+      });
+    dedupedFetchPromises.set(runtimeSourceURL, fetchPromise);
 
-      setterPromises.push(
-        fetchPromise.then(runtimeSourceCode => {
-          hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
-        }),
-      );
-    }
+    setterPromises.push(
+      fetchPromise.then(runtimeSourceCode => {
+        hookSourceAndMetadata.runtimeSourceCode = runtimeSourceCode;
+      }),
+    );
   });
 
   return Promise.all(setterPromises);
 }
-
-export function prefetchSourceFiles(
-  hooksTree: HooksTree,
-  fetchFileWithCaching: FetchFileWithCaching | null,
-): void {
-  // Deduplicate fetches, since there can be multiple location keys per source map.
-  const dedupedFetchPromises = new Set();
-
-  let fetchFileFunction = null;
-  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 withAsyncPerformanceMark(
-        `[pre] fetchFileWithCaching("${url}")`,
-        () => {
-          return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
-        },
-      );
-    };
-  } else {
-    fetchFileFunction = url => fetchFile(url, '[pre] fetchFile');
-  }
-
-  const hooksQueue = Array.from(hooksTree);
-
-  for (let i = 0; i < hooksQueue.length; i++) {
-    const hook = hooksQueue.pop();
-    if (isUnnamedBuiltInHook(hook)) {
-      continue;
-    }
-
-    const hookSource = hook.hookSource;
-    if (hookSource == null) {
-      continue;
-    }
-
-    const runtimeSourceURL = ((hookSource.fileName: any): string);
-
-    if (prefetchedSources.has(runtimeSourceURL)) {
-      // If we've already fetched this source, skip it.
-      continue;
-    }
-
-    if (!dedupedFetchPromises.has(runtimeSourceURL)) {
-      dedupedFetchPromises.add(runtimeSourceURL);
-
-      fetchFileFunction(runtimeSourceURL).then(text => {
-        prefetchedSources.set(runtimeSourceURL, text);
-      });
-    }
-
-    if (hook.subHooks.length > 0) {
-      hooksQueue.push(...hook.subHooks);
-    }
-  }
-}
diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/devtools.js
index fda4c91b74ff..7b4171851c1b 100644
--- a/packages/react-devtools-shell/src/devtools.js
+++ b/packages/react-devtools-shell/src/devtools.js
@@ -10,6 +10,11 @@ import {
 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
+__webpack_public_path__ = '/dist/'; // eslint-disable-line no-undef
+
 const iframe = ((document.getElementById('target'): any): HTMLIFrameElement);
 
 const {contentDocument, contentWindow} = iframe;
@@ -50,6 +55,11 @@ mountButton.addEventListener('click', function() {
   }
 });
 
+// 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.js', () => {
   initDevTools({
     connect(cb) {
@@ -58,6 +68,7 @@ inject('dist/app.js', () => {
         createElement(DevTools, {
           browserTheme: 'light',
           enabledInspectedElementContextMenu: true,
+          hookNamesModuleLoaderFunction,
           showTabBar: true,
           warnIfLegacyBackendDetected: true,
           warnIfUnsupportedVersionDetected: true,
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index e60a004a3b39..029f9f5f7db4 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -32,7 +32,7 @@ const DEVTOOLS_VERSION = getVersionString();
 
 const config = {
   mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-module-eval-source-map' : 'source-map',
+  devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
   entry: {
     app: './src/app/index.js',
     devtools: './src/devtools.js',
@@ -108,6 +108,7 @@ const config = {
 };
 
 if (TARGET === 'local') {
+  // Local dev server build.
   config.devServer = {
     hot: true,
     port: 8080,
@@ -116,6 +117,7 @@ if (TARGET === 'local') {
     stats: 'errors-only',
   };
 } else {
+  // Static build to deploy somewhere else.
   config.output = {
     path: resolve(__dirname, 'dist'),
     filename: '[name].js',

From 96814e71b2ec13af64cd2670c9e69ab982ab2951 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 Sep 2021 15:26:41 -0400
Subject: [PATCH 0843/1603] Revert Suspense cache Thenable.catch() change
 (#22280)

Reverts part of #22275 (adding .catch() to Thenables in Suspense caches) in response to #22275 (comment).

After taking another look with fresh eyes, I think I see the "uncaught error" issue I initially noticed was in checkForUpdate() (which did not pass an error handler to .then)
---
 .../src/hookNamesCache.js                     | 77 +++++++++----------
 .../src/inspectedElementCache.js              | 46 +++++------
 2 files changed, 60 insertions(+), 63 deletions(-)

diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 104a1e3455eb..306b13c5252c 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -110,51 +110,46 @@ export function loadHookNames(
 
     let didTimeout = false;
 
-    const onSuccess = hookNames => {
-      if (didTimeout) {
-        return;
-      }
-
-      if (__DEBUG__) {
-        console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
-      }
-
-      if (hookNames) {
-        const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
-        resolvedRecord.status = Resolved;
-        resolvedRecord.value = hookNames;
-      } else {
-        const notFoundRecord = ((newRecord: any): RejectedRecord);
-        notFoundRecord.status = Rejected;
-        notFoundRecord.value = null;
-      }
-
-      wake();
-    };
-
-    const onError = error => {
-      if (didTimeout) {
-        return;
-      }
-
-      if (__DEBUG__) {
-        console.log('[hookNamesCache] onError()');
-      }
+    loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
+      function onSuccess(hookNames) {
+        if (didTimeout) {
+          return;
+        }
+
+        if (__DEBUG__) {
+          console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
+        }
+
+        if (hookNames) {
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
+          resolvedRecord.status = Resolved;
+          resolvedRecord.value = hookNames;
+        } else {
+          const notFoundRecord = ((newRecord: any): RejectedRecord);
+          notFoundRecord.status = Rejected;
+          notFoundRecord.value = null;
+        }
+
+        wake();
+      },
+      function onError(error) {
+        if (didTimeout) {
+          return;
+        }
 
-      console.error(error);
+        if (__DEBUG__) {
+          console.log('[hookNamesCache] onError()');
+        }
 
-      const thrownRecord = ((newRecord: any): RejectedRecord);
-      thrownRecord.status = Rejected;
-      thrownRecord.value = null;
+        console.error(error);
 
-      wake();
-    };
+        const thrownRecord = ((newRecord: any): RejectedRecord);
+        thrownRecord.status = Rejected;
+        thrownRecord.value = null;
 
-    const thenable = loadHookNamesFunction(hooksTree, fetchFileWithCaching);
-    thenable.then(onSuccess, onError);
-    if (typeof (thenable: any).catch === 'function') {
-      (thenable: any).catch(onError);
-    }
+        wake();
+      },
+    );
 
     // Eventually timeout and stop trying to load names.
     let timeoutID = setTimeout(function onTimeout() {
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 000812acdb14..040a6cb19b6a 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -116,34 +116,30 @@ export function inspectElement(
       return null;
     }
 
-    const onSuccess = ([inspectedElement: InspectedElementFrontend]) => {
-      const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
-      resolvedRecord.status = Resolved;
-      resolvedRecord.value = inspectedElement;
-      wake();
-    };
-
-    const onError = error => {
-      if (newRecord.status === Pending) {
-        const rejectedRecord = ((newRecord: any): RejectedRecord);
-        rejectedRecord.status = Rejected;
-        rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
-        wake();
-      }
-    };
-
-    const thenable = inspectElementMutableSource({
+    inspectElementMutableSource({
       bridge,
       element,
       path,
       rendererID: ((rendererID: any): number),
-    });
-    thenable.then(onSuccess, onError);
+    }).then(
+      ([inspectedElement: InspectedElementFrontend]) => {
+        const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = inspectedElement;
 
-    if (typeof (thenable: any).catch === 'function') {
-      (thenable: any).catch();
-    }
+        wake();
+      },
+
+      error => {
+        console.error(error);
+
+        const rejectedRecord = ((newRecord: any): RejectedRecord);
+        rejectedRecord.status = Rejected;
+        rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
 
+        wake();
+      },
+    );
     map.set(element, record);
   }
 
@@ -192,6 +188,12 @@ export function checkForUpdate({
           });
         }
       },
+
+      // There isn't much to do about errors in this case,
+      // but we should at least log them so they aren't silent.
+      error => {
+        console.error(error);
+      },
     );
   }
 }

From 43cf06daf929272f32758dc73c9240887e908f87 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 9 Sep 2021 14:26:13 -0700
Subject: [PATCH 0844/1603] [DevTools] Fix `react-devtools-extension` build
 error and `react-devtools-inline`'s `package.json` (#22281)

---
 packages/react-devtools-extensions/src/main.js | 2 +-
 packages/react-devtools-inline/package.json    | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 8781d6e22dbb..30318c1249e8 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -289,7 +289,7 @@ function createPanelIfReactLoaded() {
 
         // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
         const hookNamesModuleLoaderFunction = () =>
-          import('react-devtools-inline/hookNames');
+          import('react-devtools-shared/src/hooks/parseHookNames');
 
         root = createRoot(document.createElement('div'));
 
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 160723b21af5..e6e9807c3901 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -13,7 +13,8 @@
     "dist",
     "backend.js",
     "build-info.json",
-    "frontend.js"
+    "frontend.js",
+    "hookNames.js"
   ],
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",

From cb8a50619b11acbc821ee0ac901e245f35fad7c7 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 9 Sep 2021 15:58:27 -0700
Subject: [PATCH 0845/1603] [DevTools] Add React Devtools Extension Startup and
 File Structure to OVERVIEW.md (#22283)

---
 packages/react-devtools/OVERVIEW.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index a05bafc3b2a5..d78d0c7f1875 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -297,3 +297,10 @@ Once profiling is finished, the frontend requests profiling data from the backen
 ### 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)
+

From 0fd195f2955478636ccab840676c19bb29874b96 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Fri, 10 Sep 2021 12:19:51 -0400
Subject: [PATCH 0846/1603] =?UTF-8?q?update=20error=20message=20to=20inclu?=
 =?UTF-8?q?de=20useLayoutEffect=20or=20useEffect=20on=20bad=20e=E2=80=A6?=
 =?UTF-8?q?=20(#22279)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* update error message to include useLayoutEffect or useEffect on bad effect return

* Update packages/react-reconciler/src/ReactFiberCommitWork.new.js

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* use existing import

Co-authored-by: Ricky <rickhanlonii@gmail.com>
---
 .../src/ReactFiberCommitWork.new.js            | 18 ++++++++++++++----
 .../src/ReactFiberCommitWork.old.js            | 18 ++++++++++++++----
 .../ReactHooksWithNoopRenderer-test.js         | 14 +++++++-------
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index b38b888fd402..bde9173a28f6 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -507,7 +507,7 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
+function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
@@ -522,6 +522,12 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
         if (__DEV__) {
           const destroy = effect.destroy;
           if (destroy !== undefined && typeof destroy !== 'function') {
+            let hookName;
+            if ((effect.tag & HookLayout) !== NoFlags) {
+              hookName = 'useLayoutEffect';
+            } else {
+              hookName = 'useEffect';
+            }
             let addendum;
             if (destroy === null) {
               addendum =
@@ -529,10 +535,13 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
                 'up, return undefined (or nothing).';
             } else if (typeof destroy.then === 'function') {
               addendum =
-                '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +
+                '\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' +
-                'useEffect(() => {\n' +
+                hookName +
+                '(() => {\n' +
                 '  async function fetchData() {\n' +
                 '    // You can await here\n' +
                 '    const response = await MyAPI.getData(someId);\n' +
@@ -545,8 +554,9 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
               addendum = ' You returned: ' + destroy;
             }
             console.error(
-              'An effect function must not return anything besides a function, ' +
+              '%s must not return anything besides a function, ' +
                 'which is used for clean-up.%s',
+              hookName,
               addendum,
             );
           }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 2bae266c60dc..241bc5a5dbae 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -507,7 +507,7 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
+function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
   const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
   const lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
   if (lastEffect !== null) {
@@ -522,6 +522,12 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
         if (__DEV__) {
           const destroy = effect.destroy;
           if (destroy !== undefined && typeof destroy !== 'function') {
+            let hookName;
+            if ((effect.tag & HookLayout) !== NoFlags) {
+              hookName = 'useLayoutEffect';
+            } else {
+              hookName = 'useEffect';
+            }
             let addendum;
             if (destroy === null) {
               addendum =
@@ -529,10 +535,13 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
                 'up, return undefined (or nothing).';
             } else if (typeof destroy.then === 'function') {
               addendum =
-                '\n\nIt looks like you wrote useEffect(async () => ...) or returned a Promise. ' +
+                '\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' +
-                'useEffect(() => {\n' +
+                hookName +
+                '(() => {\n' +
                 '  async function fetchData() {\n' +
                 '    // You can await here\n' +
                 '    const response = await MyAPI.getData(someId);\n' +
@@ -545,8 +554,9 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
               addendum = ' You returned: ' + destroy;
             }
             console.error(
-              'An effect function must not return anything besides a function, ' +
+              '%s must not return anything besides a function, ' +
                 'which is used for clean-up.%s',
+              hookName,
               addendum,
             );
           }
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 342c8abf9a25..9069ca71c71e 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2647,7 +2647,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           root1.render(<App return={17} />);
         }),
       ).toErrorDev([
-        'Warning: An effect function must not return anything besides a ' +
+        'Warning: useEffect must not return anything besides a ' +
           'function, which is used for clean-up. You returned: 17',
       ]);
 
@@ -2657,7 +2657,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           root2.render(<App return={null} />);
         }),
       ).toErrorDev([
-        'Warning: An effect function must not return anything besides a ' +
+        'Warning: 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).',
       ]);
@@ -2668,7 +2668,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           root3.render(<App return={Promise.resolve()} />);
         }),
       ).toErrorDev([
-        'Warning: An effect function must not return anything besides a ' +
+        'Warning: 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.',
       ]);
@@ -2873,7 +2873,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           root1.render(<App return={17} />);
         }),
       ).toErrorDev([
-        'Warning: An effect function must not return anything besides a ' +
+        'Warning: useLayoutEffect must not return anything besides a ' +
           'function, which is used for clean-up. You returned: 17',
       ]);
 
@@ -2883,7 +2883,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           root2.render(<App return={null} />);
         }),
       ).toErrorDev([
-        'Warning: An effect function must not return anything besides a ' +
+        'Warning: 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).',
       ]);
@@ -2894,9 +2894,9 @@ describe('ReactHooksWithNoopRenderer', () => {
           root3.render(<App return={Promise.resolve()} />);
         }),
       ).toErrorDev([
-        'Warning: An effect function must not return anything besides a ' +
+        'Warning: useLayoutEffect 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.',
+          'It looks like you wrote useLayoutEffect(async () => ...) or returned a Promise.',
       ]);
 
       // Error on unmount because React assumes the value is a function

From 81db4eb1d1178cb84b8b20df090a952f9dffac7d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 10 Sep 2021 15:11:18 -0400
Subject: [PATCH 0847/1603] Replaced network.onRequestFinished() caching with
 network.getHAR() (#22285)

Replaced network.onRequestFinished() caching with network.getHAR() so that we can avoid redundantly (pre) caching JavaScript content. In the event that the HAR log doesn't contain a match, we'll fall back to fetching from the Network (and hoping for a cache hit from that layer).

I've tested both internally (internal Facebook DEV server) and externally (Code Sandbox) and it seems like this approach results in cache hits, so long as DevTools is opened when the page loads. (Otherwise it falls back to fetch().)
---
 .../react-devtools-extensions/src/main.js     | 163 +++++++++++-------
 1 file changed, 97 insertions(+), 66 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 30318c1249e8..920ccee75692 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -19,33 +19,13 @@ import {
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 const isChrome = getBrowserName() === 'Chrome';
 
-const cachedNetworkEvents = new Map();
-
-// Cache JavaScript resources as the page loads them.
-// This helps avoid unnecessary duplicate requests when hook names are parsed.
-// Responses with a Vary: 'Origin' might not match future requests.
-// This lets us avoid a possible (expensive) cache miss.
-// For more info see: github.com/facebook/react/pull/22198
-chrome.devtools.network.onRequestFinished.addListener(
-  function onRequestFinished(event) {
-    if (event.request.method === 'GET') {
-      switch (event.response.content.mimeType) {
-        case 'application/javascript':
-        case 'application/x-javascript':
-        case 'text/javascript':
-          cachedNetworkEvents.set(event.request.url, event);
-          break;
-      }
-    }
-  },
-);
-
 let panelCreated = false;
 
 // The renderer interface can't read saved component filters directly,
@@ -233,56 +213,113 @@ function createPanelIfReactLoaded() {
           }
         };
 
+        let debugIDCounter = 0;
+
         // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
         // never reaches the chrome.runtime.onMessage event listener.
         let fetchFileWithCaching = null;
         if (isChrome) {
-          // Fetching files from the extension won't make use of the network cache
-          // for resources that have already been loaded by the page.
-          // This helper function allows the extension to request files to be fetched
-          // by the content script (running in the page) to increase the likelihood of a cache hit.
-          fetchFileWithCaching = url => {
-            const event = cachedNetworkEvents.get(url);
-            if (event != null) {
-              // If this resource has already been cached locally,
-              // skip the network queue (which might not be a cache hit anyway)
-              // and just use the cached response.
-              return new Promise(resolve => {
-                event.getContent(content => resolve(content));
-              });
+          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++;
+              console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
             }
 
-            // If DevTools was opened after the page started loading,
-            // we may have missed some requests.
-            // So fall back to a fetch() and hope we get a cached response.
-
-            return new Promise((resolve, reject) => {
-              function onPortMessage({payload, source}) {
-                if (source === 'react-devtools-content-script') {
-                  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.devtools.network.getHAR(harLog => {
+              for (let i = 0; i < harLog.entries.length; i++) {
+                const entry = harLog.entries[i];
+                if (url === entry.request.url) {
+                  if (__DEBUG__) {
+                    console.log(
+                      `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
+                      url,
+                    );
                   }
+
+                  entry.getContent(content => {
+                    if (content) {
+                      if (__DEBUG__) {
+                        console.log(
+                          `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+                        );
+                      }
+
+                      resolve(content);
+                    } else {
+                      if (__DEBUG__) {
+                        console.log(
+                          `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
+                          content,
+                        );
+                      }
+
+                      // Edge case where getContent() returned null; fall back to fetch.
+                      fetchFromPage(url, resolve);
+                    }
+                  });
+
+                  return;
                 }
               }
 
-              chrome.runtime.onMessage.addListener(onPortMessage);
+              if (__DEBUG__) {
+                console.log(
+                  `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
+                );
+              }
 
-              chrome.devtools.inspectedWindow.eval(`
-                window.postMessage({
-                  source: 'react-devtools-extension',
-                  payload: {
-                    type: 'fetch-file-with-cache',
-                    url: "${url}",
-                  },
-                });
-              `);
+              // No matching URL found; fall back to fetch.
+              fetchFromPage(url, resolve);
+            });
+          };
+
+          const fetchFromPage = (url, resolve, reject) => {
+            if (__DEBUG__) {
+              console.log('[main] fetchFromPage()', url);
+            }
+
+            function onPortMessage({payload, source}) {
+              if (source === 'react-devtools-content-script') {
+                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);
+
+            chrome.devtools.inspectedWindow.eval(`
+              window.postMessage({
+                source: 'react-devtools-extension',
+                payload: {
+                  type: 'fetch-file-with-cache',
+                  url: "${url}",
+                },
+              });
+            `);
+          };
+
+          // Fetching files from the extension won't make use of the network cache
+          // for resources that have already been loaded by the page.
+          // This helper function allows the extension to request files to be fetched
+          // by the content script (running in the page) to increase the likelihood of a cache hit.
+          fetchFileWithCaching = url => {
+            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);
             });
           };
         }
@@ -441,9 +478,6 @@ function createPanelIfReactLoaded() {
 
       // Re-initialize DevTools panel when a new page is loaded.
       chrome.devtools.network.onNavigated.addListener(function onNavigated() {
-        // Clear cached requests when a new page is opened.
-        cachedNetworkEvents.clear();
-
         // Re-initialize saved filters on navigation,
         // since global values stored on window get reset in this case.
         syncSavedPreferences();
@@ -460,9 +494,6 @@ function createPanelIfReactLoaded() {
 
 // Load (or reload) the DevTools extension when the user navigates to a new page.
 function checkPageForReact() {
-  // Clear cached requests when a new page is opened.
-  cachedNetworkEvents.clear();
-
   syncSavedPreferences();
   createPanelIfReactLoaded();
 }

From d2f08dd40d87376d7d2200ab5463cb79e67f343d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 10 Sep 2021 16:26:46 -0400
Subject: [PATCH 0848/1603] DevTools: Add missing param to fetchFromPage()
 (#22291)

---
 packages/react-devtools-extensions/src/main.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 920ccee75692..d77ff853d0e5 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -258,7 +258,7 @@ function createPanelIfReactLoaded() {
                       }
 
                       // Edge case where getContent() returned null; fall back to fetch.
-                      fetchFromPage(url, resolve);
+                      fetchFromPage(url, resolve, reject);
                     }
                   });
 
@@ -273,7 +273,7 @@ function createPanelIfReactLoaded() {
               }
 
               // No matching URL found; fall back to fetch.
-              fetchFromPage(url, resolve);
+              fetchFromPage(url, resolve, reject);
             });
           };
 

From e73911e715866df69bc6a9ae8b372cccbe8dceb1 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Sat, 11 Sep 2021 15:05:54 -0400
Subject: [PATCH 0849/1603] Clean up my "hard to read" code (#22295)

---
 scripts/jest/jest-cli.js | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 0e916c07c4fa..175757b64daf 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -309,17 +309,11 @@ function main() {
   validateOptions();
   const args = getCommandArgs();
   const envars = getEnvars();
+  const env = Object.entries(envars).map(([k, v]) => `${k}=${v}`);
 
   // Print the full command we're actually running.
-  console.log(
-    chalk.dim(
-      `$ ${Object.keys(envars)
-        .map(envar => `${envar}=${envars[envar]}`)
-        .join(' ')}`,
-      'node',
-      args.join(' ')
-    )
-  );
+  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(

From 86c7ca70a9965c18e504cafc24753c1edbe36749 Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Sun, 12 Sep 2021 18:09:53 +0300
Subject: [PATCH 0850/1603] Fix link (#22296)

Fix link (branch master was renamed to main):

master -> main
---
 packages/react/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/index.js b/packages/react/index.js
index c2285c6b0b31..0acb8d9fa9a5 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-// Keep in sync with https://github.com/facebook/flow/blob/master/lib/react.js
+// Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js
 export type StatelessFunctionalComponent<
   P,
 > = React$StatelessFunctionalComponent<P>;

From 33226fadaac7b23634852eee78c4f1c84c5b2bbb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 13 Sep 2021 11:07:46 -0400
Subject: [PATCH 0851/1603] Check for store mutations before commit (#22290)

* [useSyncExternalStore] Remove extra hook object

Because we already track `getSnapshot` and `value` on the store
instance, we don't need to also track them as effect dependencies. And
because the effect doesn't require any clean-up, we don't need to track
a `destroy` function.

So, we don't need to store any additional state for this effect. We can
call `pushEffect` directly, and only during renders where something
has changed.

This saves some memory, but my main motivation is because I plan to use
this same logic to schedule a pre-commit consistency check. (See the
inline comments for more details.)

* Split shouldTimeSlice into two separate functions

Lanes that are blocking (SyncLane, and DefaultLane inside a blocking-
by-default root) are always blocking for a given root. Whereas expired
lanes can expire while the render phase is already in progress.

I want to check if a lane is blocking without checking whether it
expired, so I split `shouldTimeSlice` into two separate functions.

I'll use this in the next step.

* Check for store mutations before commit

When a store is read for the first time, or when `subscribe` or
`getSnapshot` changes, during a concurrent render, we have to check
at the end of the render phase whether the store was mutated by
an concurrent event.

In the userspace shim, we perform this check in a layout effect, and
patch up any inconsistencies by scheduling another render + commit.
However, even though we patch them up in the next render, the parent
layout effects that fire in the original render will still observe an
inconsistent tree.

In the native implementation, we can instead check for inconsistencies
right after the root is completed, before entering the commit phase. If
we do detect a mutaiton, we can discard the tree and re-render before
firing any effects. The re-render is synchronous to block further
concurrent mutations (which is also what we do to recover from tearing
bugs that result in an error). After the synchronous re-render, we can
assume the tree the tree is consistent and continue with the normal
algorithm for finishing a completed root (i.e. either suspend
or commit).

The result is that layout effects will always observe a consistent tree.
---
 .../react-debug-tools/src/ReactDebugHooks.js  |   1 -
 .../react-reconciler/src/ReactFiberFlags.js   |  54 ++---
 .../src/ReactFiberHooks.new.js                | 185 +++++++++++++-----
 .../src/ReactFiberHooks.old.js                | 185 +++++++++++++-----
 .../src/ReactFiberLane.new.js                 |  19 +-
 .../src/ReactFiberLane.old.js                 |  19 +-
 .../src/ReactFiberWorkLoop.new.js             | 152 +++++++++++---
 .../src/ReactFiberWorkLoop.old.js             | 152 +++++++++++---
 .../__tests__/useSyncExternalStore-test.js    | 177 +++++++++++++++++
 scripts/jest/TestFlags.js                     |   4 +
 10 files changed, 747 insertions(+), 201 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 131a0003dcec..94fbaeec05b8 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -273,7 +273,6 @@ function useSyncExternalStore<T>(
   // Advance the current hook index the same number of times
   // so that subsequent hooks have the right memoized state.
   nextHook(); // SyncExternalStore
-  nextHook(); // LayoutEffect
   nextHook(); // Effect
   const value = getSnapshot();
   hookLog.push({
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index c85be46427cf..13f843ad8060 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,51 +12,53 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b00000000000000000000000;
-export const PerformedWork = /*                */ 0b00000000000000000000001;
+export const NoFlags = /*                      */ 0b000000000000000000000000;
+export const PerformedWork = /*                */ 0b000000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b00000000000000000000010;
-export const Update = /*                       */ 0b00000000000000000000100;
+export const Placement = /*                    */ 0b000000000000000000000010;
+export const Update = /*                       */ 0b000000000000000000000100;
 export const PlacementAndUpdate = /*           */ Placement | Update;
-export const Deletion = /*                     */ 0b00000000000000000001000;
-export const ChildDeletion = /*                */ 0b00000000000000000010000;
-export const ContentReset = /*                 */ 0b00000000000000000100000;
-export const Callback = /*                     */ 0b00000000000000001000000;
-export const DidCapture = /*                   */ 0b00000000000000010000000;
-export const Ref = /*                          */ 0b00000000000000100000000;
-export const Snapshot = /*                     */ 0b00000000000001000000000;
-export const Passive = /*                      */ 0b00000000000010000000000;
-export const Hydrating = /*                    */ 0b00000000000100000000000;
+export const Deletion = /*                     */ 0b000000000000000000001000;
+export const ChildDeletion = /*                */ 0b000000000000000000010000;
+export const ContentReset = /*                 */ 0b000000000000000000100000;
+export const Callback = /*                     */ 0b000000000000000001000000;
+export const DidCapture = /*                   */ 0b000000000000000010000000;
+export const Ref = /*                          */ 0b000000000000000100000000;
+export const Snapshot = /*                     */ 0b000000000000001000000000;
+export const Passive = /*                      */ 0b000000000000010000000000;
+export const Hydrating = /*                    */ 0b000000000000100000000000;
 export const HydratingAndUpdate = /*           */ Hydrating | Update;
-export const Visibility = /*                   */ 0b00000000001000000000000;
+export const Visibility = /*                   */ 0b000000000001000000000000;
+export const StoreConsistency = /*             */ 0b000000000010000000000000;
 
-export const LifecycleEffectMask = Passive | Update | Callback | Ref | Snapshot;
+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 = /*               */ 0b00000000001111111111111;
+export const HostEffectMask = /*               */ 0b000000000011111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b00000000010000000000000;
-export const ShouldCapture = /*                */ 0b00000000100000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b00000001000000000000000;
-export const DidPropagateContext = /*          */ 0b00000010000000000000000;
-export const NeedsPropagation = /*             */ 0b00000100000000000000000;
+export const Incomplete = /*                   */ 0b000000000100000000000000;
+export const ShouldCapture = /*                */ 0b000000001000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b000000010000000000000000;
+export const DidPropagateContext = /*          */ 0b000000100000000000000000;
+export const NeedsPropagation = /*             */ 0b000001000000000000000000;
 
 // 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 RefStatic = /*                    */ 0b00001000000000000000000;
-export const LayoutStatic = /*                 */ 0b00010000000000000000000;
-export const PassiveStatic = /*                */ 0b00100000000000000000000;
+export const RefStatic = /*                    */ 0b000010000000000000000000;
+export const LayoutStatic = /*                 */ 0b000100000000000000000000;
+export const PassiveStatic = /*                */ 0b001000000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b01000000000000000000000;
-export const MountPassiveDev = /*              */ 0b10000000000000000000000;
+export const MountLayoutDev = /*               */ 0b010000000000000000000000;
+export const MountPassiveDev = /*              */ 0b100000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 64a4b446ba51..7f46304c6351 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -44,6 +44,7 @@ import {
   SyncLane,
   NoLanes,
   isSubsetOfLanes,
+  includesBlockingLane,
   mergeLanes,
   removeLanes,
   intersectLanes,
@@ -68,6 +69,7 @@ import {
   PassiveStatic as PassiveStaticEffect,
   StaticMask as StaticMaskEffect,
   Update as UpdateEffect,
+  StoreConsistency,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -166,7 +168,15 @@ type StoreInstance<T> = {|
   getSnapshot: () => T,
 |};
 
-export type FunctionComponentUpdateQueue = {|lastEffect: Effect | null|};
+type StoreConsistencyCheck<T> = {|
+  value: T,
+  getSnapshot: () => T,
+|};
+
+export type FunctionComponentUpdateQueue = {|
+  lastEffect: Effect | null,
+  stores: Array<StoreConsistencyCheck<any>> | null,
+|};
 
 type BasicStateAction<S> = (S => S) | S;
 
@@ -689,6 +699,7 @@ function updateWorkInProgressHook(): Hook {
 function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   return {
     lastEffect: null,
+    stores: null,
   };
 }
 
@@ -1256,6 +1267,7 @@ function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
 ): T {
+  const fiber = currentlyRenderingFiber;
   const hook = mountWorkInProgressHook();
   // Read the current snapshot from the store on every render. This breaks the
   // normal rules of React, and only works because store updates are
@@ -1277,13 +1289,45 @@ function mountSyncExternalStore<T>(
     getSnapshot,
   };
   hook.queue = inst;
-  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
+
+  // 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.
+  // TODO: We can move this to the passive phase once we add a pre-commit
+  // consistency check. See the next comment.
+  fiber.flags |= PassiveEffect;
+  pushEffect(
+    HookHasEffect | HookPassive,
+    updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
+    undefined,
+    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();
+  invariant(
+    root !== null,
+    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+  );
+  if (!includesBlockingLane(root, renderLanes)) {
+    pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
+  }
+
+  return nextSnapshot;
 }
 
 function updateSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => 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
@@ -1300,66 +1344,109 @@ function updateSyncExternalStore<T>(
     }
   }
   const prevSnapshot = hook.memoizedState;
-  if (!is(prevSnapshot, nextSnapshot)) {
+  const snapshotChanged = !is(prevSnapshot, nextSnapshot);
+  if (snapshotChanged) {
     hook.memoizedState = nextSnapshot;
     markWorkInProgressReceivedUpdate();
   }
   const inst = hook.queue;
-  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
+
+  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 susbcribe 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;
+    pushEffect(
+      HookHasEffect | HookPassive,
+      updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
+      undefined,
+      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();
+    invariant(
+      root !== null,
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+    if (!includesBlockingLane(root, renderLanes)) {
+      pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
+    }
+  }
+
+  return nextSnapshot;
 }
 
-function useSyncExternalStore<T>(
-  hook: Hook,
-  inst: StoreInstance<T>,
-  subscribe: (() => void) => () => void,
+function pushStoreConsistencyCheck<T>(
+  fiber: Fiber,
   getSnapshot: () => T,
+  renderedSnapshot: T,
+) {
+  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,
-): T {
-  const fiber = currentlyRenderingFiber;
-  const dispatcher = ReactCurrentDispatcher.current;
+  getSnapshot: () => T,
+) {
+  // 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.
+    forceStoreRerender(fiber);
+  }
+}
 
-  // 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.
-  // TODO: Circumvent SSR warning
-  dispatcher.useLayoutEffect(() => {
-    inst.value = nextSnapshot;
-    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.
-    // TODO: Move the tearing checks to an earlier, pre-commit phase so that the
-    // layout effects always observe a consistent tree.
+function subscribeToStore(fiber, inst, subscribe) {
+  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.
       forceStoreRerender(fiber);
     }
-  }, [subscribe, nextSnapshot, getSnapshot]);
-
-  dispatcher.useEffect(() => {
-    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.
-        forceStoreRerender(fiber);
-      }
-    };
-    // Check for changes right before subscribing. Subsequent changes will be
-    // detected in the subscription handler.
-    handleStoreChange();
-    // Subscribe to the store and return a clean-up function.
-    return subscribe(handleStoreChange);
-  }, [subscribe]);
-
-  return nextSnapshot;
+  };
+  // Subscribe to the store and return a clean-up function.
+  return subscribe(handleStoreChange);
 }
 
 function checkIfSnapshotChanged(inst) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 11573e3b5e0a..cbade34d43d1 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -44,6 +44,7 @@ import {
   SyncLane,
   NoLanes,
   isSubsetOfLanes,
+  includesBlockingLane,
   mergeLanes,
   removeLanes,
   intersectLanes,
@@ -68,6 +69,7 @@ import {
   PassiveStatic as PassiveStaticEffect,
   StaticMask as StaticMaskEffect,
   Update as UpdateEffect,
+  StoreConsistency,
 } from './ReactFiberFlags';
 import {
   HasEffect as HookHasEffect,
@@ -166,7 +168,15 @@ type StoreInstance<T> = {|
   getSnapshot: () => T,
 |};
 
-export type FunctionComponentUpdateQueue = {|lastEffect: Effect | null|};
+type StoreConsistencyCheck<T> = {|
+  value: T,
+  getSnapshot: () => T,
+|};
+
+export type FunctionComponentUpdateQueue = {|
+  lastEffect: Effect | null,
+  stores: Array<StoreConsistencyCheck<any>> | null,
+|};
 
 type BasicStateAction<S> = (S => S) | S;
 
@@ -689,6 +699,7 @@ function updateWorkInProgressHook(): Hook {
 function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   return {
     lastEffect: null,
+    stores: null,
   };
 }
 
@@ -1256,6 +1267,7 @@ function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
 ): T {
+  const fiber = currentlyRenderingFiber;
   const hook = mountWorkInProgressHook();
   // Read the current snapshot from the store on every render. This breaks the
   // normal rules of React, and only works because store updates are
@@ -1277,13 +1289,45 @@ function mountSyncExternalStore<T>(
     getSnapshot,
   };
   hook.queue = inst;
-  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
+
+  // 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.
+  // TODO: We can move this to the passive phase once we add a pre-commit
+  // consistency check. See the next comment.
+  fiber.flags |= PassiveEffect;
+  pushEffect(
+    HookHasEffect | HookPassive,
+    updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
+    undefined,
+    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();
+  invariant(
+    root !== null,
+    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+  );
+  if (!includesBlockingLane(root, renderLanes)) {
+    pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
+  }
+
+  return nextSnapshot;
 }
 
 function updateSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => 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
@@ -1300,66 +1344,109 @@ function updateSyncExternalStore<T>(
     }
   }
   const prevSnapshot = hook.memoizedState;
-  if (!is(prevSnapshot, nextSnapshot)) {
+  const snapshotChanged = !is(prevSnapshot, nextSnapshot);
+  if (snapshotChanged) {
     hook.memoizedState = nextSnapshot;
     markWorkInProgressReceivedUpdate();
   }
   const inst = hook.queue;
-  return useSyncExternalStore(hook, inst, subscribe, getSnapshot, nextSnapshot);
+
+  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 susbcribe 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;
+    pushEffect(
+      HookHasEffect | HookPassive,
+      updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),
+      undefined,
+      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();
+    invariant(
+      root !== null,
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+    if (!includesBlockingLane(root, renderLanes)) {
+      pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
+    }
+  }
+
+  return nextSnapshot;
 }
 
-function useSyncExternalStore<T>(
-  hook: Hook,
-  inst: StoreInstance<T>,
-  subscribe: (() => void) => () => void,
+function pushStoreConsistencyCheck<T>(
+  fiber: Fiber,
   getSnapshot: () => T,
+  renderedSnapshot: T,
+) {
+  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,
-): T {
-  const fiber = currentlyRenderingFiber;
-  const dispatcher = ReactCurrentDispatcher.current;
+  getSnapshot: () => T,
+) {
+  // 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.
+    forceStoreRerender(fiber);
+  }
+}
 
-  // 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.
-  // TODO: Circumvent SSR warning
-  dispatcher.useLayoutEffect(() => {
-    inst.value = nextSnapshot;
-    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.
-    // TODO: Move the tearing checks to an earlier, pre-commit phase so that the
-    // layout effects always observe a consistent tree.
+function subscribeToStore(fiber, inst, subscribe) {
+  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.
       forceStoreRerender(fiber);
     }
-  }, [subscribe, nextSnapshot, getSnapshot]);
-
-  dispatcher.useEffect(() => {
-    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.
-        forceStoreRerender(fiber);
-      }
-    };
-    // Check for changes right before subscribing. Subsequent changes will be
-    // detected in the subscription handler.
-    handleStoreChange();
-    // Subscribe to the store and return a clean-up function.
-    return subscribe(handleStoreChange);
-  }, [subscribe]);
-
-  return nextSnapshot;
+  };
+  // Subscribe to the store and return a clean-up function.
+  return subscribe(handleStoreChange);
 }
 
 function checkIfSnapshotChanged(inst) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 2ad6b6a69a49..ad124a432a4a 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -453,27 +453,26 @@ export function includesOnlyTransitions(lanes: Lanes) {
   return (lanes & TransitionLanes) === lanes;
 }
 
-export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
-  if ((lanes & root.expiredLanes) !== NoLanes) {
-    // At least one of these lanes expired. To prevent additional starvation,
-    // finish rendering without yielding execution.
-    return false;
-  }
-
+export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   if (
     allowConcurrentByDefault &&
     (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
   ) {
     // Concurrent updates by default always use time slicing.
-    return true;
+    return false;
   }
-
   const SyncDefaultLanes =
     InputContinuousHydrationLane |
     InputContinuousLane |
     DefaultHydrationLane |
     DefaultLane;
-  return (lanes & SyncDefaultLanes) === NoLanes;
+  return (lanes & SyncDefaultLanes) !== NoLanes;
+}
+
+export function includesExpiredLane(root: FiberRoot, lanes: Lanes) {
+  // 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 isTransitionLane(lane: Lane) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 3e704f54e676..4a064a384651 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -453,27 +453,26 @@ export function includesOnlyTransitions(lanes: Lanes) {
   return (lanes & TransitionLanes) === lanes;
 }
 
-export function shouldTimeSlice(root: FiberRoot, lanes: Lanes) {
-  if ((lanes & root.expiredLanes) !== NoLanes) {
-    // At least one of these lanes expired. To prevent additional starvation,
-    // finish rendering without yielding execution.
-    return false;
-  }
-
+export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   if (
     allowConcurrentByDefault &&
     (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
   ) {
     // Concurrent updates by default always use time slicing.
-    return true;
+    return false;
   }
-
   const SyncDefaultLanes =
     InputContinuousHydrationLane |
     InputContinuousLane |
     DefaultHydrationLane |
     DefaultLane;
-  return (lanes & SyncDefaultLanes) === NoLanes;
+  return (lanes & SyncDefaultLanes) !== NoLanes;
+}
+
+export function includesExpiredLane(root: FiberRoot, lanes: Lanes) {
+  // 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 isTransitionLane(lane: Lane) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index dc79e39e9d6a..00d38a2cbe8d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -13,6 +13,7 @@ import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Flags} from './ReactFiberFlags';
+import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -34,6 +35,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
+import is from 'shared/objectIs';
 
 import {
   // Aliased because `act` will override and push to an internal queue
@@ -116,6 +118,7 @@ import {
   NoFlags,
   Placement,
   Incomplete,
+  StoreConsistency,
   HostEffectMask,
   Hydrating,
   BeforeMutationMask,
@@ -140,7 +143,8 @@ import {
   includesNonIdleWork,
   includesOnlyRetries,
   includesOnlyTransitions,
-  shouldTimeSlice,
+  includesBlockingLane,
+  includesExpiredLane,
   getNextLanes,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
@@ -769,39 +773,25 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   // 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.
-  let exitStatus =
-    shouldTimeSlice(root, lanes) &&
-    (disableSchedulerTimeoutInWorkLoop || !didTimeout)
-      ? renderRootConcurrent(root, lanes)
-      : renderRootSync(root, lanes);
+  const shouldTimeSlice =
+    !includesBlockingLane(root, lanes) &&
+    !includesExpiredLane(root, lanes) &&
+    (disableSchedulerTimeoutInWorkLoop || !didTimeout);
+  let exitStatus = shouldTimeSlice
+    ? renderRootConcurrent(root, lanes)
+    : renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
-      const prevExecutionContext = executionContext;
-      executionContext |= RetryAfterError;
-
-      // If an error occurred during hydration,
-      // discard server response and fall back to client side render.
-      if (root.hydrate) {
-        root.hydrate = false;
-        if (__DEV__) {
-          errorHydratingContainer(root.containerInfo);
-        }
-        clearContainer(root.containerInfo);
-      }
-
-      // If something threw an error, try rendering one more time. We'll render
-      // synchronously to block concurrent data mutations, and we'll includes
-      // all pending updates are included. If it still fails after the second
-      // attempt, we'll give up and commit the resulting tree.
+      // If something threw an error, try rendering one more time. We'll
+      // render synchronously to block concurrent data mutations, and we'll
+      // includes all pending updates are included. If it still fails after
+      // the second attempt, we'll give up and commit the resulting tree.
       const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
       if (errorRetryLanes !== NoLanes) {
         lanes = errorRetryLanes;
-        exitStatus = renderRootSync(root, errorRetryLanes);
+        exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
       }
-
-      executionContext = prevExecutionContext;
     }
-
     if (exitStatus === RootFatalErrored) {
       const fatalError = workInProgressRootFatalError;
       prepareFreshStack(root, NoLanes);
@@ -810,9 +800,42 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       throw fatalError;
     }
 
+    // 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 renderWasConcurrent = !includesBlockingLane(root, lanes);
+    const finishedWork: Fiber = (root.current.alternate: any);
+    if (
+      renderWasConcurrent &&
+      !isRenderConsistentWithExternalStores(finishedWork)
+    ) {
+      // A store was mutated in an interleaved event. Render again,
+      // synchronously, to block further mutations.
+      exitStatus = renderRootSync(root, lanes);
+
+      // We need to check again if something threw
+      if (exitStatus === RootErrored) {
+        const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+        if (errorRetryLanes !== NoLanes) {
+          lanes = errorRetryLanes;
+          exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+          // We assume the tree is now consistent because we didn't yield to any
+          // concurrent events.
+        }
+      }
+      if (exitStatus === RootFatalErrored) {
+        const fatalError = workInProgressRootFatalError;
+        prepareFreshStack(root, NoLanes);
+        markRootSuspended(root, lanes);
+        ensureRootIsScheduled(root, now());
+        throw fatalError;
+      }
+    }
+
     // 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.
-    const finishedWork: Fiber = (root.current.alternate: any);
     root.finishedWork = finishedWork;
     root.finishedLanes = lanes;
     finishConcurrentRender(root, exitStatus, lanes);
@@ -827,6 +850,27 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   return null;
 }
 
+function recoverFromConcurrentError(root, errorRetryLanes) {
+  const prevExecutionContext = executionContext;
+  executionContext |= RetryAfterError;
+
+  // If an error occurred during hydration, discard server response and fall
+  // back to client side render.
+  if (root.hydrate) {
+    root.hydrate = false;
+    if (__DEV__) {
+      errorHydratingContainer(root.containerInfo);
+    }
+    clearContainer(root.containerInfo);
+  }
+
+  const exitStatus = renderRootSync(root, errorRetryLanes);
+
+  executionContext = prevExecutionContext;
+
+  return exitStatus;
+}
+
 function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
@@ -939,6 +983,58 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   }
 }
 
+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 a iterative
+  // loop instead of recursion so we can exit early.
+  let node: Fiber = finishedWork;
+  while (true) {
+    if (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;
+}
+
 function markRootSuspended(root, suspendedLanes) {
   // When suspending, we should always exclude lanes that were pinged or (more
   // rarely, since we try to avoid it) updated during the render phase.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index e0cb491e8214..2561d865b0e8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -13,6 +13,7 @@ import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Flags} from './ReactFiberFlags';
+import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -34,6 +35,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import invariant from 'shared/invariant';
+import is from 'shared/objectIs';
 
 import {
   // Aliased because `act` will override and push to an internal queue
@@ -116,6 +118,7 @@ import {
   NoFlags,
   Placement,
   Incomplete,
+  StoreConsistency,
   HostEffectMask,
   Hydrating,
   BeforeMutationMask,
@@ -140,7 +143,8 @@ import {
   includesNonIdleWork,
   includesOnlyRetries,
   includesOnlyTransitions,
-  shouldTimeSlice,
+  includesBlockingLane,
+  includesExpiredLane,
   getNextLanes,
   markStarvedLanesAsExpired,
   getLanesToRetrySynchronouslyOnError,
@@ -769,39 +773,25 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   // 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.
-  let exitStatus =
-    shouldTimeSlice(root, lanes) &&
-    (disableSchedulerTimeoutInWorkLoop || !didTimeout)
-      ? renderRootConcurrent(root, lanes)
-      : renderRootSync(root, lanes);
+  const shouldTimeSlice =
+    !includesBlockingLane(root, lanes) &&
+    !includesExpiredLane(root, lanes) &&
+    (disableSchedulerTimeoutInWorkLoop || !didTimeout);
+  let exitStatus = shouldTimeSlice
+    ? renderRootConcurrent(root, lanes)
+    : renderRootSync(root, lanes);
   if (exitStatus !== RootIncomplete) {
     if (exitStatus === RootErrored) {
-      const prevExecutionContext = executionContext;
-      executionContext |= RetryAfterError;
-
-      // If an error occurred during hydration,
-      // discard server response and fall back to client side render.
-      if (root.hydrate) {
-        root.hydrate = false;
-        if (__DEV__) {
-          errorHydratingContainer(root.containerInfo);
-        }
-        clearContainer(root.containerInfo);
-      }
-
-      // If something threw an error, try rendering one more time. We'll render
-      // synchronously to block concurrent data mutations, and we'll includes
-      // all pending updates are included. If it still fails after the second
-      // attempt, we'll give up and commit the resulting tree.
+      // If something threw an error, try rendering one more time. We'll
+      // render synchronously to block concurrent data mutations, and we'll
+      // includes all pending updates are included. If it still fails after
+      // the second attempt, we'll give up and commit the resulting tree.
       const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
       if (errorRetryLanes !== NoLanes) {
         lanes = errorRetryLanes;
-        exitStatus = renderRootSync(root, errorRetryLanes);
+        exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
       }
-
-      executionContext = prevExecutionContext;
     }
-
     if (exitStatus === RootFatalErrored) {
       const fatalError = workInProgressRootFatalError;
       prepareFreshStack(root, NoLanes);
@@ -810,9 +800,42 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       throw fatalError;
     }
 
+    // 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 renderWasConcurrent = !includesBlockingLane(root, lanes);
+    const finishedWork: Fiber = (root.current.alternate: any);
+    if (
+      renderWasConcurrent &&
+      !isRenderConsistentWithExternalStores(finishedWork)
+    ) {
+      // A store was mutated in an interleaved event. Render again,
+      // synchronously, to block further mutations.
+      exitStatus = renderRootSync(root, lanes);
+
+      // We need to check again if something threw
+      if (exitStatus === RootErrored) {
+        const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+        if (errorRetryLanes !== NoLanes) {
+          lanes = errorRetryLanes;
+          exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+          // We assume the tree is now consistent because we didn't yield to any
+          // concurrent events.
+        }
+      }
+      if (exitStatus === RootFatalErrored) {
+        const fatalError = workInProgressRootFatalError;
+        prepareFreshStack(root, NoLanes);
+        markRootSuspended(root, lanes);
+        ensureRootIsScheduled(root, now());
+        throw fatalError;
+      }
+    }
+
     // 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.
-    const finishedWork: Fiber = (root.current.alternate: any);
     root.finishedWork = finishedWork;
     root.finishedLanes = lanes;
     finishConcurrentRender(root, exitStatus, lanes);
@@ -827,6 +850,27 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   return null;
 }
 
+function recoverFromConcurrentError(root, errorRetryLanes) {
+  const prevExecutionContext = executionContext;
+  executionContext |= RetryAfterError;
+
+  // If an error occurred during hydration, discard server response and fall
+  // back to client side render.
+  if (root.hydrate) {
+    root.hydrate = false;
+    if (__DEV__) {
+      errorHydratingContainer(root.containerInfo);
+    }
+    clearContainer(root.containerInfo);
+  }
+
+  const exitStatus = renderRootSync(root, errorRetryLanes);
+
+  executionContext = prevExecutionContext;
+
+  return exitStatus;
+}
+
 function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
@@ -939,6 +983,58 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   }
 }
 
+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 a iterative
+  // loop instead of recursion so we can exit early.
+  let node: Fiber = finishedWork;
+  while (true) {
+    if (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;
+}
+
 function markRootSuspended(root, suspendedLanes) {
   // When suspending, we should always exclude lanes that were pinged or (more
   // rarely, since we try to avoid it) updated during the render phase.
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 000000000000..d939a02bee89
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
@@ -0,0 +1,177 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let useSyncExternalStore;
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let useLayoutEffect;
+let forwardRef;
+let useImperativeHandle;
+let useRef;
+let startTransition;
+
+// 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;
+    useSyncExternalStore = React.unstable_useSyncExternalStore;
+    startTransition = React.startTransition;
+
+    act = require('jest-react').act;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(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;
+      },
+    };
+  }
+
+  // @gate supportsNativeUseSyncExternalStore
+  test(
+    '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.unstable_yieldValue(
+            `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} />);
+        });
+
+        expect(Scheduler).toFlushAndYieldThrough(['A0', 'B0']);
+
+        // During an interleaved event, the store is mutated.
+        store1.set(1);
+
+        // Then we continue rendering.
+        expect(Scheduler).toFlushAndYield([
+          // 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.
+        expect(Scheduler).toFlushAndYieldThrough(['A0', 'B0']);
+
+        // During an interleaved event, the store is mutated.
+        store2.set(1);
+
+        // Then we continue rendering.
+        expect(Scheduler).toFlushAndYield([
+          // 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',
+        ]);
+      });
+    },
+  );
+});
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index 9dbea6326dde..c1bd03e00b1a 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -84,6 +84,10 @@ function getTestFlags() {
       source: !process.env.IS_BUILD,
       www,
 
+      // This isn't a flag, just a useful alias for tests. Remove once
+      // useSyncExternalStore lands in the `next` channel.
+      supportsNativeUseSyncExternalStore: __EXPERIMENTAL__ || www,
+
       // 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

From fd5e01c2e0dbbeaff954d13fc6bc11bfc65e7dcf Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 13 Sep 2021 17:26:41 -0400
Subject: [PATCH 0852/1603] [useSES/extra] Reuse old selection if possible
 (#22307)

When you pass an unmemoized selector to useSyncExternalStoreExtra, we
have to reevaluate it on every render because we don't know whether
it depends on new props.

However, after reevalutating it, we should still compare the result
to the previous selection with `isEqual` and reuse the old one if it
hasn't changed.

Originally I did not implement this, because if the selector changes due
to new props or state, the component is going to have to re-render
anyway. However, it's still useful to return a memoized selection
when possible, because it may be the input to a downstream memoization.

In the test I wrote, the example I chose is selecting a list of
items from the store, and passing the list as a prop to a memoized
component. If the list prop is memoized, we can bail out.
---
 .../useSyncExternalStoreShared-test.js        | 81 +++++++++++++++++++
 .../src/useSyncExternalStoreExtra.js          | 34 +++++++-
 2 files changed, 114 insertions(+), 1 deletion(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index a355dd15d826..f4bcf2b72527 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -571,6 +571,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   });
 
   describe('extra features implemented in user-space', () => {
+    // The selector implementation uses the lazy ref initialization pattern
+    // @gate !(enableUseRefAccessWarning && __DEV__)
     test('memoized selectors are only called once per update', async () => {
       const store = createExternalStore({a: 0, b: 0});
 
@@ -610,6 +612,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A1');
     });
 
+    // The selector implementation uses the lazy ref initialization pattern
+    // @gate !(enableUseRefAccessWarning && __DEV__)
     test('Using isEqual to bailout', async () => {
       const store = createExternalStore({a: 0, b: 0});
 
@@ -666,4 +670,81 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       expect(root).toMatchRenderedOutput('A1B1');
     });
   });
+
+  // The selector implementation uses the lazy ref initialization pattern
+  // @gate !(enableUseRefAccessWarning && __DEV__)
+  test('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 (
+        <ul>
+          {items.map(text => (
+            <li key={text}>
+              <Text key={text} text={text} />
+            </li>
+          ))}
+        </ul>
+      );
+    });
+
+    function App({step}) {
+      const inlineSelector = state => {
+        Scheduler.unstable_yieldValue('Inline selector');
+        return [...state.items, 'C'];
+      };
+      const items = useSyncExternalStoreExtra(
+        store.subscribe,
+        store.getState,
+        inlineSelector,
+        shallowEqualArray,
+      );
+      return (
+        <>
+          <List items={items} />
+          <Text text={'Sibling: ' + step} />
+        </>
+      );
+    }
+
+    const root = createRoot();
+    await act(() => {
+      root.render(<App step={0} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Inline selector',
+      'A',
+      'B',
+      'C',
+      'Sibling: 0',
+    ]);
+
+    await act(() => {
+      root.render(<App step={1} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      // 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',
+    ]);
+  });
 });
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
index 905bc67c462b..eeff987ae8f1 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
@@ -13,7 +13,7 @@ import {useSyncExternalStore} from 'use-sync-external-store';
 
 // Intentionally not using named imports because Rollup uses dynamic
 // dispatch for CommonJS interop named imports.
-const {useMemo, useDebugValue} = React;
+const {useRef, useEffect, useMemo, useDebugValue} = React;
 
 // Same as useSyncExternalStore, but supports selector and isEqual arguments.
 export function useSyncExternalStoreExtra<Snapshot, Selection>(
@@ -22,6 +22,19 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
   selector: (snapshot: Snapshot) => Selection,
   isEqual?: (a: Selection, b: Selection) => boolean,
 ): Selection {
+  // Use this to track the rendered snapshot.
+  const instRef = useRef(null);
+  let inst;
+  if (instRef.current === null) {
+    inst = {
+      hasValue: false,
+      value: (null: Selection | null),
+    };
+    instRef.current = inst;
+  } else {
+    inst = instRef.current;
+  }
+
   const getSnapshotWithMemoizedSelector = useMemo(() => {
     // Track the memoized state using closure variables that are local to this
     // memoized instance of a getSnapshot function. Intentionally not using a
@@ -38,6 +51,18 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
         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;
       }
@@ -67,10 +92,17 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
       return nextSelection;
     };
   }, [getSnapshot, selector, isEqual]);
+
   const value = useSyncExternalStore(
     subscribe,
     getSnapshotWithMemoizedSelector,
   );
+
+  useEffect(() => {
+    inst.hasValue = true;
+    inst.value = value;
+  }, [value]);
+
   useDebugValue(value);
   return value;
 }

From 806aaa2e21edf9e1b9317c4bf4157e422b693d14 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 14 Sep 2021 00:55:18 -0400
Subject: [PATCH 0853/1603] [useSES shim] Import prefixed native API (#22310)

Until useSyncExternalStore is finalized, the shim should import the
prefixed version (unstable_useSyncExternalStore), which is available
in the experimental builds. That way our early testers can start
using it.
---
 .../src/__tests__/useSyncExternalStoreShared-test.js           | 2 ++
 packages/use-sync-external-store/src/useSyncExternalStore.js   | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index f4bcf2b72527..cb1bd3b1c8c7 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -46,6 +46,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
           startTransition: _,
           // eslint-disable-next-line no-unused-vars
           useSyncExternalStore: __,
+          // eslint-disable-next-line no-unused-vars
+          unstable_useSyncExternalStore: ___,
           ...otherExports
         } = jest.requireActual('react');
         return otherExports;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 73cd7f808989..7ad5f3ebafc2 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -17,7 +17,8 @@ const {
   useEffect,
   useLayoutEffect,
   useDebugValue,
-  useSyncExternalStore: builtInAPI,
+  // The built-in API is still prefixed.
+  unstable_useSyncExternalStore: builtInAPI,
 } = React;
 
 // Prefer the built-in API, if it exists. If it doesn't exist, then we assume

From 263cfa6ecb9879ecb629d4e04a8c26422b4c4ff9 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 14 Sep 2021 10:27:09 -0400
Subject: [PATCH 0854/1603] [Experimental] Add useInsertionEffect (#21913)

---
 .../react-debug-tools/src/ReactDebugHooks.js  |  14 +
 .../ReactHooksInspectionIntegration-test.js   | 177 ++++++++
 .../ReactDOMServerIntegrationHooks-test.js    |  18 +
 .../src/server/ReactPartialRendererHooks.js   |  17 +
 .../src/ReactFiberCommitWork.new.js           |  21 +-
 .../src/ReactFiberCommitWork.old.js           |  21 +-
 .../src/ReactFiberHooks.new.js                |  79 ++++
 .../src/ReactFiberHooks.old.js                |  79 ++++
 .../src/ReactHookEffectTags.js                |   9 +-
 .../src/ReactInternalTypes.js                 |   5 +
 .../ReactHooksWithNoopRenderer-test.js        | 411 ++++++++++++++++++
 packages/react-server/src/ReactFizzHooks.js   |   1 +
 .../react-server/src/ReactFlightServer.js     |   1 +
 .../src/ReactSuspenseTestUtils.js             |   1 +
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   8 +
 20 files changed, 862 insertions(+), 6 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 94fbaeec05b8..c1258c2dcda4 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -78,6 +78,7 @@ function getPrimitiveStackCache(): Map<string, Array<any>> {
         Dispatcher.useCacheRefresh();
       }
       Dispatcher.useLayoutEffect(() => {});
+      Dispatcher.useInsertionEffect(() => {});
       Dispatcher.useEffect(() => {});
       Dispatcher.useImperativeHandle(undefined, () => null);
       Dispatcher.useDebugValue(null);
@@ -191,6 +192,18 @@ function useLayoutEffect(
   });
 }
 
+function useInsertionEffect(
+  create: () => mixed,
+  inputs: Array<mixed> | void | null,
+): void {
+  nextHook();
+  hookLog.push({
+    primitive: 'InsertionEffect',
+    stackError: new Error(),
+    value: create,
+  });
+}
+
 function useEffect(
   create: () => (() => void) | void,
   inputs: Array<mixed> | void | null,
@@ -338,6 +351,7 @@ const Dispatcher: DispatcherType = {
   useImperativeHandle,
   useDebugValue,
   useLayoutEffect,
+  useInsertionEffect,
   useMemo,
   useReducer,
   useRef,
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 1c7cb7508840..b13bec22d213 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -268,6 +268,183 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
+  // @gate experimental || www
+  it('should inspect the current state of all stateful hooks, including useInsertionEffect', () => {
+    const useInsertionEffect = React.unstable_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]);
+
+      function update() {
+        act(() => {
+          setState('A');
+        });
+        act(() => {
+          dispatch({value: 'B'});
+        });
+        ref.current = 'C';
+      }
+      const memoizedUpdate = React.useCallback(update, []);
+      return (
+        <div onClick={memoizedUpdate}>
+          {state1} {state2}
+        </div>
+      );
+    }
+    let renderer;
+    act(() => {
+      renderer = ReactTestRenderer.create(<Foo prop="prop" />);
+    });
+
+    let childFiber = renderer.root.findByType(Foo)._currentFiber();
+
+    const {onClick: updateStates} = renderer.root.findByType('div').props;
+
+    let tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(tree).toEqual([
+      {
+        isStateEditable: true,
+        id: 0,
+        name: 'State',
+        value: 'a',
+        subHooks: [],
+      },
+      {
+        isStateEditable: true,
+        id: 1,
+        name: 'Reducer',
+        value: 'b',
+        subHooks: [],
+      },
+      {isStateEditable: false, id: 2, name: 'Ref', value: 'c', subHooks: []},
+      {
+        isStateEditable: false,
+        id: 3,
+        name: 'InsertionEffect',
+        value: effect,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 4,
+        name: 'LayoutEffect',
+        value: effect,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 5,
+        name: 'Effect',
+        value: effect,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 6,
+        name: 'ImperativeHandle',
+        value: outsideRef.current,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 7,
+        name: 'Memo',
+        value: 'ab',
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 8,
+        name: 'Callback',
+        value: updateStates,
+        subHooks: [],
+      },
+    ]);
+
+    updateStates();
+
+    childFiber = renderer.root.findByType(Foo)._currentFiber();
+    tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+
+    expect(tree).toEqual([
+      {
+        isStateEditable: true,
+        id: 0,
+        name: 'State',
+        value: 'A',
+        subHooks: [],
+      },
+      {
+        isStateEditable: true,
+        id: 1,
+        name: 'Reducer',
+        value: 'B',
+        subHooks: [],
+      },
+      {isStateEditable: false, id: 2, name: 'Ref', value: 'C', subHooks: []},
+      {
+        isStateEditable: false,
+        id: 3,
+        name: 'InsertionEffect',
+        value: effect,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 4,
+        name: 'LayoutEffect',
+        value: effect,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 5,
+        name: 'Effect',
+        value: effect,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 6,
+        name: 'ImperativeHandle',
+        value: outsideRef.current,
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 7,
+        name: 'Memo',
+        value: 'Ab',
+        subHooks: [],
+      },
+      {
+        isStateEditable: false,
+        id: 8,
+        name: 'Callback',
+        value: updateStates,
+        subHooks: [],
+      },
+    ]);
+  });
+
   it('should inspect the value of the current provider in useContext', () => {
     const MyContext = React.createContext('default');
     function Foo(props) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index cfd23f843c14..53a34b25ffd5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -27,6 +27,7 @@ let useCallback;
 let useMemo;
 let useRef;
 let useImperativeHandle;
+let useInsertionEffect;
 let useLayoutEffect;
 let useDebugValue;
 let useOpaqueIdentifier;
@@ -54,6 +55,7 @@ function initModules() {
   useRef = React.useRef;
   useDebugValue = React.useDebugValue;
   useImperativeHandle = React.useImperativeHandle;
+  useInsertionEffect = React.unstable_useInsertionEffect;
   useLayoutEffect = React.useLayoutEffect;
   useOpaqueIdentifier = React.unstable_useOpaqueIdentifier;
   forwardRef = React.forwardRef;
@@ -638,6 +640,22 @@ describe('ReactDOMServerHooks', () => {
       expect(domNode.textContent).toEqual('Count: 0');
     });
   });
+  describe('useInsertionEffect', () => {
+    // @gate experimental || www
+    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(clearYields()).toEqual(['Count: 0']);
+      expect(domNode.tagName).toEqual('SPAN');
+      expect(domNode.textContent).toEqual('Count: 0');
+    });
+  });
 
   describe('useLayoutEffect', () => {
     it('should warn when invoked during render', async () => {
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 0712d9fee928..bfc21b0623a0 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -385,6 +385,22 @@ function useRef<T>(initialValue: T): {|current: T|} {
   }
 }
 
+function useInsertionEffect(
+  create: () => mixed,
+  inputs: Array<mixed> | void | null,
+) {
+  if (__DEV__) {
+    currentHookNameInDev = 'useInsertionEffect';
+    console.error(
+      'useInsertionEffect does nothing on the server, because its effect cannot ' +
+        "be encoded into the server renderer's output format. This will lead " +
+        'to a mismatch between the initial, non-hydrated UI and the intended ' +
+        'UI. To avoid this, useInsertionEffect should only be used in ' +
+        'components that render exclusively on the client.',
+    );
+  }
+}
+
 export function useLayoutEffect(
   create: () => (() => void) | void,
   inputs: Array<mixed> | void | null,
@@ -508,6 +524,7 @@ export const Dispatcher: DispatcherType = {
   useReducer,
   useRef,
   useState,
+  useInsertionEffect,
   useLayoutEffect,
   useCallback,
   // useImperativeHandle is not run in the server environment
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index bde9173a28f6..85b5b778ba9f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -136,6 +136,7 @@ import {
   NoFlags as NoHookEffect,
   HasEffect as HookHasEffect,
   Layout as HookLayout,
+  Insertion as HookInsertion,
   Passive as HookPassive,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
@@ -525,6 +526,8 @@ function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
             let hookName;
             if ((effect.tag & HookLayout) !== NoFlags) {
               hookName = 'useLayoutEffect';
+            } else if ((effect.tag & HookInsertion) !== NoFlags) {
+              hookName = 'useInsertionEffect';
             } else {
               hookName = 'useEffect';
             }
@@ -1153,7 +1156,10 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if ((tag & HookLayout) !== NoHookEffect) {
+              if (
+                (tag & HookInsertion) !== NoHookEffect ||
+                (tag & HookLayout) !== NoHookEffect
+              ) {
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -1738,6 +1744,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case ForwardRef:
       case MemoComponent:
       case SimpleMemoComponent: {
+        commitHookEffectListUnmount(
+          HookInsertion | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
+        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+
         // 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,
@@ -1810,6 +1823,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
+      commitHookEffectListUnmount(
+        HookInsertion | HookHasEffect,
+        finishedWork,
+        finishedWork.return,
+      );
+      commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
       // 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,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 241bc5a5dbae..9613f0b16840 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -136,6 +136,7 @@ import {
   NoFlags as NoHookEffect,
   HasEffect as HookHasEffect,
   Layout as HookLayout,
+  Insertion as HookInsertion,
   Passive as HookPassive,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';
@@ -525,6 +526,8 @@ function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
             let hookName;
             if ((effect.tag & HookLayout) !== NoFlags) {
               hookName = 'useLayoutEffect';
+            } else if ((effect.tag & HookInsertion) !== NoFlags) {
+              hookName = 'useInsertionEffect';
             } else {
               hookName = 'useEffect';
             }
@@ -1153,7 +1156,10 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if ((tag & HookLayout) !== NoHookEffect) {
+              if (
+                (tag & HookInsertion) !== NoHookEffect ||
+                (tag & HookLayout) !== NoHookEffect
+              ) {
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -1738,6 +1744,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case ForwardRef:
       case MemoComponent:
       case SimpleMemoComponent: {
+        commitHookEffectListUnmount(
+          HookInsertion | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
+        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+
         // 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,
@@ -1810,6 +1823,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
+      commitHookEffectListUnmount(
+        HookInsertion | HookHasEffect,
+        finishedWork,
+        finishedWork.return,
+      );
+      commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
       // 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,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 7f46304c6351..4b4d7ad7e916 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -75,6 +75,7 @@ import {
   HasEffect as HookHasEffect,
   Layout as HookLayout,
   Passive as HookPassive,
+  Insertion as HookInsertion,
 } from './ReactHookEffectTags';
 import {
   getWorkInProgressRoot,
@@ -1708,6 +1709,20 @@ function updateEffect(
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
+function mountInsertionEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  return 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,
@@ -2310,6 +2325,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useContext: throwInvalidHookError,
   useEffect: throwInvalidHookError,
   useImperativeHandle: throwInvalidHookError,
+  useInsertionEffect: throwInvalidHookError,
   useLayoutEffect: throwInvalidHookError,
   useMemo: throwInvalidHookError,
   useReducer: throwInvalidHookError,
@@ -2337,6 +2353,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useEffect: mountEffect,
   useImperativeHandle: mountImperativeHandle,
   useLayoutEffect: mountLayoutEffect,
+  useInsertionEffect: mountInsertionEffect,
   useMemo: mountMemo,
   useReducer: mountReducer,
   useRef: mountRef,
@@ -2362,6 +2379,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useContext: readContext,
   useEffect: updateEffect,
   useImperativeHandle: updateImperativeHandle,
+  useInsertionEffect: updateInsertionEffect,
   useLayoutEffect: updateLayoutEffect,
   useMemo: updateMemo,
   useReducer: updateReducer,
@@ -2388,6 +2406,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useContext: readContext,
   useEffect: updateEffect,
   useImperativeHandle: updateImperativeHandle,
+  useInsertionEffect: updateInsertionEffect,
   useLayoutEffect: updateLayoutEffect,
   useMemo: updateMemo,
   useReducer: rerenderReducer,
@@ -2468,6 +2487,15 @@ if (__DEV__) {
       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,
@@ -2602,6 +2630,14 @@ if (__DEV__) {
       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,
@@ -2734,6 +2770,14 @@ if (__DEV__) {
       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,
@@ -2867,6 +2911,14 @@ if (__DEV__) {
       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,
@@ -3004,6 +3056,15 @@ if (__DEV__) {
       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,
@@ -3152,6 +3213,15 @@ if (__DEV__) {
       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,
@@ -3301,6 +3371,15 @@ if (__DEV__) {
       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,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index cbade34d43d1..a03dcd6ca2db 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -75,6 +75,7 @@ import {
   HasEffect as HookHasEffect,
   Layout as HookLayout,
   Passive as HookPassive,
+  Insertion as HookInsertion,
 } from './ReactHookEffectTags';
 import {
   getWorkInProgressRoot,
@@ -1708,6 +1709,20 @@ function updateEffect(
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
+function mountInsertionEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  return 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,
@@ -2310,6 +2325,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useContext: throwInvalidHookError,
   useEffect: throwInvalidHookError,
   useImperativeHandle: throwInvalidHookError,
+  useInsertionEffect: throwInvalidHookError,
   useLayoutEffect: throwInvalidHookError,
   useMemo: throwInvalidHookError,
   useReducer: throwInvalidHookError,
@@ -2337,6 +2353,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useEffect: mountEffect,
   useImperativeHandle: mountImperativeHandle,
   useLayoutEffect: mountLayoutEffect,
+  useInsertionEffect: mountInsertionEffect,
   useMemo: mountMemo,
   useReducer: mountReducer,
   useRef: mountRef,
@@ -2362,6 +2379,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useContext: readContext,
   useEffect: updateEffect,
   useImperativeHandle: updateImperativeHandle,
+  useInsertionEffect: updateInsertionEffect,
   useLayoutEffect: updateLayoutEffect,
   useMemo: updateMemo,
   useReducer: updateReducer,
@@ -2388,6 +2406,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useContext: readContext,
   useEffect: updateEffect,
   useImperativeHandle: updateImperativeHandle,
+  useInsertionEffect: updateInsertionEffect,
   useLayoutEffect: updateLayoutEffect,
   useMemo: updateMemo,
   useReducer: rerenderReducer,
@@ -2468,6 +2487,15 @@ if (__DEV__) {
       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,
@@ -2602,6 +2630,14 @@ if (__DEV__) {
       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,
@@ -2734,6 +2770,14 @@ if (__DEV__) {
       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,
@@ -2867,6 +2911,14 @@ if (__DEV__) {
       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,
@@ -3004,6 +3056,15 @@ if (__DEV__) {
       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,
@@ -3152,6 +3213,15 @@ if (__DEV__) {
       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,
@@ -3301,6 +3371,15 @@ if (__DEV__) {
       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,
diff --git a/packages/react-reconciler/src/ReactHookEffectTags.js b/packages/react-reconciler/src/ReactHookEffectTags.js
index 0ccd7e2ccbca..54be635a623a 100644
--- a/packages/react-reconciler/src/ReactHookEffectTags.js
+++ b/packages/react-reconciler/src/ReactHookEffectTags.js
@@ -9,11 +9,12 @@
 
 export type HookFlags = number;
 
-export const NoFlags = /*  */ 0b000;
+export const NoFlags = /*   */ 0b0000;
 
 // Represents whether effect should fire.
-export const HasEffect = /* */ 0b001;
+export const HasEffect = /* */ 0b0001;
 
 // Represents the phase in which the effect (not the clean-up) fires.
-export const Layout = /*    */ 0b010;
-export const Passive = /*   */ 0b100;
+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
index 33bdb24af04d..f07fd4634b3d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -33,6 +33,7 @@ export type HookType =
   | 'useContext'
   | 'useRef'
   | 'useEffect'
+  | 'useInsertionEffect'
   | 'useLayoutEffect'
   | 'useCallback'
   | 'useMemo'
@@ -286,6 +287,10 @@ export type Dispatcher = {|
     create: () => (() => void) | void,
     deps: Array<mixed> | void | null,
   ): void,
+  useInsertionEffect(
+    create: () => (() => void) | void,
+    deps: Array<mixed> | void | null,
+  ): void,
   useLayoutEffect(
     create: () => (() => void) | void,
     deps: Array<mixed> | void | null,
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 9069ca71c71e..55b9abdcd746 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -22,6 +22,7 @@ let Suspense;
 let useState;
 let useReducer;
 let useEffect;
+let useInsertionEffect;
 let useLayoutEffect;
 let useCallback;
 let useMemo;
@@ -46,6 +47,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     useState = React.useState;
     useReducer = React.useReducer;
     useEffect = React.useEffect;
+    useInsertionEffect = React.unstable_useInsertionEffect;
     useLayoutEffect = React.useLayoutEffect;
     useCallback = React.useCallback;
     useMemo = React.useMemo;
@@ -2682,6 +2684,415 @@ describe('ReactHooksWithNoopRenderer', () => {
     });
   });
 
+  describe('useInsertionEffect', () => {
+    // @gate experimental || www
+    it('fires insertion effects after snapshots on update', () => {
+      function CounterA(props) {
+        useInsertionEffect(() => {
+          Scheduler.unstable_yieldValue(`Create insertion`);
+          return () => {
+            Scheduler.unstable_yieldValue(`Destroy insertion`);
+          };
+        });
+        return null;
+      }
+
+      class CounterB extends React.Component {
+        getSnapshotBeforeUpdate(prevProps, prevState) {
+          Scheduler.unstable_yieldValue(`Get Snapshot`);
+          return null;
+        }
+
+        componentDidUpdate() {}
+
+        render() {
+          return null;
+        }
+      }
+
+      act(() => {
+        ReactNoop.render(
+          <>
+            <CounterA />
+            <CounterB />
+          </>,
+        );
+
+        expect(Scheduler).toFlushAndYield(['Create insertion']);
+      });
+
+      // Update
+      act(() => {
+        ReactNoop.render(
+          <>
+            <CounterA />
+            <CounterB />
+          </>,
+        );
+
+        expect(Scheduler).toFlushAndYield([
+          'Get Snapshot',
+          'Destroy insertion',
+          'Create insertion',
+        ]);
+      });
+
+      // Unmount everything
+      act(() => {
+        ReactNoop.render(null);
+
+        expect(Scheduler).toFlushAndYield(['Destroy insertion']);
+      });
+    });
+
+    // @gate experimental || www
+    it('fires insertion effects before layout effects', () => {
+      let committedText = '(empty)';
+
+      function Counter(props) {
+        useInsertionEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create insertion [current: ${committedText}]`,
+          );
+          committedText = props.count + '';
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy insertion [current: ${committedText}]`,
+            );
+          };
+        });
+        useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create layout [current: ${committedText}]`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy layout [current: ${committedText}]`,
+            );
+          };
+        });
+        useEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create passive [current: ${committedText}]`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy passive [current: ${committedText}]`,
+            );
+          };
+        });
+        return null;
+      }
+      act(() => {
+        ReactNoop.render(<Counter count={0} />);
+
+        expect(Scheduler).toFlushUntilNextPaint([
+          'Create insertion [current: (empty)]',
+          'Create layout [current: 0]',
+        ]);
+        expect(committedText).toEqual('0');
+      });
+
+      expect(Scheduler).toHaveYielded(['Create passive [current: 0]']);
+
+      // Unmount everything
+      act(() => {
+        ReactNoop.render(null);
+
+        expect(Scheduler).toFlushUntilNextPaint([
+          'Destroy insertion [current: 0]',
+          'Destroy layout [current: 0]',
+        ]);
+      });
+
+      expect(Scheduler).toHaveYielded(['Destroy passive [current: 0]']);
+    });
+
+    // @gate experimental || www
+    it('force flushes passive effects before firing new insertion effects', () => {
+      let committedText = '(empty)';
+
+      function Counter(props) {
+        useInsertionEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create insertion [current: ${committedText}]`,
+          );
+          committedText = props.count + '';
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy insertion [current: ${committedText}]`,
+            );
+          };
+        });
+        useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create layout [current: ${committedText}]`,
+          );
+          committedText = props.count + '';
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy layout [current: ${committedText}]`,
+            );
+          };
+        });
+        useEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create passive [current: ${committedText}]`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy passive [current: ${committedText}]`,
+            );
+          };
+        });
+        return null;
+      }
+
+      act(() => {
+        React.startTransition(() => {
+          ReactNoop.render(<Counter count={0} />);
+        });
+        expect(Scheduler).toFlushUntilNextPaint([
+          'Create insertion [current: (empty)]',
+          'Create layout [current: 0]',
+        ]);
+        expect(committedText).toEqual('0');
+
+        React.startTransition(() => {
+          ReactNoop.render(<Counter count={1} />);
+        });
+        expect(Scheduler).toFlushUntilNextPaint([
+          'Create passive [current: 0]',
+          'Destroy insertion [current: 0]',
+          'Create insertion [current: 0]',
+          'Destroy layout [current: 1]',
+          'Create layout [current: 1]',
+        ]);
+        expect(committedText).toEqual('1');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Destroy passive [current: 1]',
+        'Create passive [current: 1]',
+      ]);
+    });
+
+    // @gate experimental || www
+    it('fires all insertion effects (interleaved) before firing any layout effects', () => {
+      let committedA = '(empty)';
+      let committedB = '(empty)';
+
+      function CounterA(props) {
+        useInsertionEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedA = props.count + '';
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        useInsertionEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedA = props.count + '';
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Layout 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Layout 1 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Layout 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Layout 2 for Component A [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        return null;
+      }
+
+      function CounterB(props) {
+        useInsertionEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedB = props.count + '';
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        useInsertionEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          committedB = props.count + '';
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Layout 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Layout 1 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+
+        useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue(
+            `Create Layout 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+          );
+          return () => {
+            Scheduler.unstable_yieldValue(
+              `Destroy Layout 2 for Component B [A: ${committedA}, B: ${committedB}]`,
+            );
+          };
+        });
+        return null;
+      }
+
+      act(() => {
+        ReactNoop.render(
+          <React.Fragment>
+            <CounterA count={0} />
+            <CounterB count={0} />
+          </React.Fragment>,
+        );
+        expect(Scheduler).toFlushAndYield([
+          // 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']);
+      });
+
+      act(() => {
+        ReactNoop.render(
+          <React.Fragment>
+            <CounterA count={1} />
+            <CounterB count={1} />
+          </React.Fragment>,
+        );
+        expect(Scheduler).toFlushAndYield([
+          '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
+        act(() => {
+          ReactNoop.render(null);
+
+          expect(Scheduler).toFlushAndYield([
+            '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]',
+          ]);
+        });
+      });
+    });
+
+    // @gate experimental || www
+    it('assumes insertion effect destroy function is either a function or undefined', () => {
+      function App(props) {
+        useInsertionEffect(() => {
+          return props.return;
+        });
+        return null;
+      }
+
+      const root1 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root1.render(<App return={17} />);
+        }),
+      ).toErrorDev([
+        'Warning: useInsertionEffect must not return anything besides a ' +
+          'function, which is used for clean-up. You returned: 17',
+      ]);
+
+      const root2 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root2.render(<App return={null} />);
+        }),
+      ).toErrorDev([
+        'Warning: 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).',
+      ]);
+
+      const root3 = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root3.render(<App return={Promise.resolve()} />);
+        }),
+      ).toErrorDev([
+        'Warning: 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.',
+      ]);
+
+      // Error on unmount because React assumes the value is a function
+      expect(() =>
+        act(() => {
+          root3.unmount();
+        }),
+      ).toThrow('is not a function');
+    });
+  });
+
   describe('useLayoutEffect', () => {
     it('fires layout effects after the host has been mutated', () => {
       function getCommittedText() {
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 51ea84e8c43d..1618537ac1bd 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -503,6 +503,7 @@ export const Dispatcher: DispatcherType = {
   useReducer,
   useRef,
   useState,
+  useInsertionEffect: noop,
   useLayoutEffect,
   useCallback,
   // useImperativeHandle is not run in the server environment
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index efac391833e8..5429d3a3b9e6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -822,6 +822,7 @@ const Dispatcher: DispatcherType = {
   useReducer: (unsupportedHook: any),
   useRef: (unsupportedHook: any),
   useState: (unsupportedHook: any),
+  useInsertionEffect: (unsupportedHook: any),
   useLayoutEffect: (unsupportedHook: any),
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index ca898150b7cd..b4b57c68b5f5 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -35,6 +35,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useReducer: unsupported,
     useRef: unsupported,
     useState: unsupported,
+    useInsertionEffect: unsupported,
     useLayoutEffect: unsupported,
     useCallback: unsupported,
     useImperativeHandle: unsupported,
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 756f69f27133..7f8abc863157 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -48,6 +48,7 @@ export {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
+  unstable_useInsertionEffect,
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 230e94f3a528..a0a9bbaca216 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -42,6 +42,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
+  unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/index.js b/packages/react/index.js
index 0acb8d9fa9a5..1b4552a90f5d 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -67,6 +67,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
+  unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index d87d7c891ee8..819d5fe90afd 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -46,6 +46,7 @@ export {
   useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
   useImperativeHandle,
+  unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 24421bd86c49..541e7a35d3d3 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -41,6 +41,7 @@ import {
   useEffect,
   useImperativeHandle,
   useDebugValue,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
@@ -91,6 +92,7 @@ export {
   useEffect,
   useImperativeHandle,
   useDebugValue,
+  useInsertionEffect as unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index b284267b64e9..0722cf4b209b 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -100,6 +100,14 @@ export function useEffect(
   return dispatcher.useEffect(create, deps);
 }
 
+export function useInsertionEffect(
+  create: () => (() => void) | void,
+  deps: Array<mixed> | void | null,
+): void {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useInsertionEffect(create, deps);
+}
+
 export function useLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,

From 50263d3273b6fc983acc5b0fd52e670399b248b1 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 14 Sep 2021 11:10:24 -0400
Subject: [PATCH 0855/1603] [DevTools] Add initial APIs for logging
 instrumentation events under feature flag (#22276)

---
 .../react-devtools-extensions/src/main.js     |   5 +
 packages/react-devtools-shared/src/Logger.js  |  47 ++++++
 ...nceMarks.js => PerformanceLoggingUtils.js} |  67 ++++++--
 .../config/DevToolsFeatureFlags.core-fb.js    |   1 +
 .../config/DevToolsFeatureFlags.core-oss.js   |   1 +
 .../config/DevToolsFeatureFlags.default.js    |   1 +
 .../DevToolsFeatureFlags.extension-fb.js      |   1 +
 .../DevToolsFeatureFlags.extension-oss.js     |   1 +
 .../src/hookNamesCache.js                     | 144 +++++++++++-------
 .../src/hooks/astUtils.js                     |  10 +-
 .../src/hooks/parseHookNames/index.js         |   4 +-
 .../parseHookNames/loadSourceAndMetadata.js   |  32 ++--
 .../parseHookNames/parseSourceAndMetadata.js  |  30 ++--
 13 files changed, 234 insertions(+), 110 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/Logger.js
 rename packages/react-devtools-shared/src/{PerformanceMarks.js => PerformanceLoggingUtils.js} (51%)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index d77ff853d0e5..6acb35aa28bf 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -18,6 +18,7 @@ import {
   localStorageRemoveItem,
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
+import {registerEventLogger} from 'react-devtools-shared/src/Logger';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 
@@ -87,6 +88,10 @@ function createPanelIfReactLoaded() {
 
       const tabId = chrome.devtools.inspectedWindow.tabId;
 
+      registerEventLogger((event: LogEvent) => {
+        // TODO: hook up event logging
+      });
+
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
           name: '' + tabId,
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
new file mode 100644
index 000000000000..0ce2afb3b3c0
--- /dev/null
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import {enableLogger} from 'react-devtools-feature-flags';
+
+type LoadHookNamesEvent = {|
+  +name: 'loadHookNames',
+  +displayName: string | null,
+  +numberOfHooks: number | null,
+  +durationMs: number,
+  +resolution: 'success' | 'error' | 'timeout' | 'unknown',
+|};
+
+// prettier-ignore
+export type LogEvent =
+  | LoadHookNamesEvent;
+
+export type LogFunction = LogEvent => void;
+
+let loggers: Array<LogFunction> = [];
+export const logEvent: LogFunction =
+  enableLogger === true
+    ? function logEvent(event: LogEvent): void {
+        loggers.forEach(log => {
+          log(event);
+        });
+      }
+    : function logEvent() {};
+
+export const registerEventLogger =
+  enableLogger === true
+    ? function registerEventLogger(eventLogger: LogFunction): () => void {
+        if (enableLogger) {
+          loggers.push(eventLogger);
+          return function unregisterEventLogger() {
+            loggers = loggers.filter(logger => logger !== eventLogger);
+          };
+        }
+        return () => {};
+      }
+    : function registerEventLogger() {};
diff --git a/packages/react-devtools-shared/src/PerformanceMarks.js b/packages/react-devtools-shared/src/PerformanceLoggingUtils.js
similarity index 51%
rename from packages/react-devtools-shared/src/PerformanceMarks.js
rename to packages/react-devtools-shared/src/PerformanceLoggingUtils.js
index e702d3923f1d..29d81bba911c 100644
--- a/packages/react-devtools-shared/src/PerformanceMarks.js
+++ b/packages/react-devtools-shared/src/PerformanceLoggingUtils.js
@@ -14,6 +14,9 @@ const supportsUserTiming =
   typeof performance.mark === 'function' &&
   typeof performance.clearMarks === 'function';
 
+const supportsPerformanceNow =
+  typeof performance !== 'undefined' && typeof performance.now === 'function';
+
 function mark(markName: string): void {
   if (supportsUserTiming) {
     performance.mark(markName + '-start');
@@ -27,42 +30,78 @@ function measure(markName: string): void {
   }
 }
 
-export async function withAsyncPerformanceMark<TReturn>(
+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();
+  }
+  const result = await callback();
+
+  if (__PERFORMANCE_PROFILE__) {
     measure(markName);
-    return result;
   }
-  return callback();
+
+  if (onComplete != null) {
+    const duration = now() - start;
+    onComplete(duration);
+  }
+
+  return result;
 }
 
-export function withSyncPerformanceMark<TReturn>(
+export function withSyncPerfMeasurements<TReturn>(
   markName: string,
   callback: () => TReturn,
+  onComplete?: number => void,
 ): TReturn {
+  const start = now();
   if (__PERFORMANCE_PROFILE__) {
     mark(markName);
-    const result = callback();
+  }
+  const result = callback();
+
+  if (__PERFORMANCE_PROFILE__) {
     measure(markName);
-    return result;
   }
-  return callback();
+
+  if (onComplete != null) {
+    const duration = now() - start;
+    onComplete(duration);
+  }
+
+  return result;
 }
 
-export function withCallbackPerformanceMark<TReturn>(
+export function withCallbackPerfMeasurements<TReturn>(
   markName: string,
   callback: (done: () => void) => TReturn,
+  onComplete?: number => void,
 ): TReturn {
+  const start = now();
   if (__PERFORMANCE_PROFILE__) {
     mark(markName);
-    const done = () => {
-      measure(markName);
-    };
-    return callback(done);
   }
-  return callback(() => {});
+
+  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/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index 6c0568867ba3..b6b7a1d0cd36 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -16,6 +16,7 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 export const enableNamedHooksFeature = false;
+export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index 341af11e17f7..6eb0f71ef9f9 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -16,6 +16,7 @@
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
 export const enableNamedHooksFeature = false;
+export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index e6404254a385..bc495619cf65 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -16,4 +16,5 @@
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
 export const enableNamedHooksFeature = true;
+export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = true;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
index d4e6160b5e86..51fe2ed6abc1 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -16,6 +16,7 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 export const enableNamedHooksFeature = true;
+export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index 382c3fab4c31..53466bf84bb7 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -16,6 +16,7 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = false;
 export const enableNamedHooksFeature = true;
+export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 306b13c5252c..32179f9de1cb 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -18,6 +18,8 @@ import type {
 } from 'react-devtools-shared/src/types';
 import type {HookSource} from 'react-debug-tools/src/ReactDebugHooks';
 import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
+import {withCallbackPerfMeasurements} from './PerformanceLoggingUtils';
+import {logEvent} from './Logger';
 
 const TIMEOUT = 30000;
 
@@ -92,6 +94,11 @@ export function loadHookNames(
       },
     };
 
+    let timeoutID;
+    let didTimeout = false;
+    let resolution = 'unknown';
+    let resolvedHookNames: HookNames | null = null;
+
     const wake = () => {
       if (timeoutID) {
         clearTimeout(timeoutID);
@@ -103,71 +110,92 @@ export function loadHookNames(
       callbacks.clear();
     };
 
+    const handleLoadComplete = (durationMs: number): void => {
+      // Log duration for parsing hook names
+      logEvent({
+        name: 'loadHookNames',
+        displayName: element.displayName,
+        numberOfHooks: resolvedHookNames?.size ?? null,
+        durationMs,
+        resolution,
+      });
+    };
+
     const newRecord: Record<HookNames> = (record = {
       status: Pending,
       value: wakeable,
     });
 
-    let didTimeout = false;
-
-    loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
-      function onSuccess(hookNames) {
-        if (didTimeout) {
-          return;
-        }
-
-        if (__DEBUG__) {
-          console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
-        }
-
-        if (hookNames) {
-          const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
-          resolvedRecord.status = Resolved;
-          resolvedRecord.value = hookNames;
-        } else {
-          const notFoundRecord = ((newRecord: any): RejectedRecord);
-          notFoundRecord.status = Rejected;
-          notFoundRecord.value = null;
-        }
-
-        wake();
-      },
-      function onError(error) {
-        if (didTimeout) {
-          return;
-        }
-
-        if (__DEBUG__) {
-          console.log('[hookNamesCache] onError()');
-        }
-
-        console.error(error);
-
-        const thrownRecord = ((newRecord: any): RejectedRecord);
-        thrownRecord.status = Rejected;
-        thrownRecord.value = null;
-
-        wake();
+    withCallbackPerfMeasurements(
+      'loadHookNames',
+      done => {
+        loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
+          function onSuccess(hookNames) {
+            if (didTimeout) {
+              return;
+            }
+
+            if (__DEBUG__) {
+              console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
+            }
+
+            if (hookNames) {
+              const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
+              resolvedRecord.status = Resolved;
+              resolvedRecord.value = hookNames;
+            } else {
+              const notFoundRecord = ((newRecord: any): RejectedRecord);
+              notFoundRecord.status = Rejected;
+              notFoundRecord.value = null;
+            }
+
+            resolution = 'success';
+            resolvedHookNames = hookNames;
+            done();
+            wake();
+          },
+          function onError(error) {
+            if (didTimeout) {
+              return;
+            }
+
+            if (__DEBUG__) {
+              console.log('[hookNamesCache] onError()');
+            }
+
+            console.error(error);
+
+            const thrownRecord = ((newRecord: any): RejectedRecord);
+            thrownRecord.status = Rejected;
+            thrownRecord.value = null;
+
+            resolution = 'error';
+            done();
+            wake();
+          },
+        );
+
+        // Eventually timeout and stop trying to load names.
+        timeoutID = setTimeout(function onTimeout() {
+          if (__DEBUG__) {
+            console.log('[hookNamesCache] onTimeout()');
+          }
+
+          timeoutID = null;
+
+          didTimeout = true;
+
+          const timedoutRecord = ((newRecord: any): RejectedRecord);
+          timedoutRecord.status = Rejected;
+          timedoutRecord.value = null;
+
+          resolution = 'timeout';
+          done();
+          wake();
+        }, TIMEOUT);
       },
+      handleLoadComplete,
     );
-
-    // Eventually timeout and stop trying to load names.
-    let timeoutID = setTimeout(function onTimeout() {
-      if (__DEBUG__) {
-        console.log('[hookNamesCache] onTimeout()');
-      }
-
-      timeoutID = null;
-
-      didTimeout = true;
-
-      const timedoutRecord = ((newRecord: any): RejectedRecord);
-      timedoutRecord.status = Rejected;
-      timedoutRecord.value = null;
-
-      wake();
-    }, TIMEOUT);
-
     map.set(element, record);
   }
 
diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
index 05c6391941d7..9a2405920568 100644
--- a/packages/react-devtools-shared/src/hooks/astUtils.js
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {withSyncPerformanceMark} from 'react-devtools-shared/src/PerformanceMarks';
+import {withSyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
 import traverse, {NodePath, Node} from '@babel/traverse';
 import {File} from '@babel/types';
 
@@ -132,7 +132,7 @@ export function getHookName(
   originalSourceLineNumber: number,
   originalSourceColumnNumber: number,
 ): string | null {
-  const hooksFromAST = withSyncPerformanceMark(
+  const hooksFromAST = withSyncPerfMeasurements(
     'getPotentialHookDeclarationsFromAST(originalSourceAST)',
     () => getPotentialHookDeclarationsFromAST(originalSourceAST),
   );
@@ -176,7 +176,7 @@ export function getHookName(
   // nodesAssociatedWithReactHookASTNode could directly be used to obtain the hook variable name
   // depending on the type of potentialReactHookASTNode
   try {
-    const nodesAssociatedWithReactHookASTNode = withSyncPerformanceMark(
+    const nodesAssociatedWithReactHookASTNode = withSyncPerfMeasurements(
       'getFilteredHookASTNodes()',
       () =>
         getFilteredHookASTNodes(
@@ -186,7 +186,7 @@ export function getHookName(
         ),
     );
 
-    const name = withSyncPerformanceMark('getHookNameFromNode()', () =>
+    const name = withSyncPerfMeasurements('getHookNameFromNode()', () =>
       getHookNameFromNode(
         hook,
         nodesAssociatedWithReactHookASTNode,
@@ -297,7 +297,7 @@ function getHookVariableName(
 
 function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
   const potentialHooksFound: NodePath[] = [];
-  withSyncPerformanceMark('traverse(sourceAST)', () =>
+  withSyncPerfMeasurements('traverse(sourceAST)', () =>
     traverse(sourceAST, {
       enter(path) {
         if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/index.js b/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
index a400a021a91f..0b5595268b64 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/index.js
@@ -12,7 +12,7 @@ import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 import type {HookNames} from 'react-devtools-shared/src/types';
 import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext';
 
-import {withAsyncPerformanceMark} from 'react-devtools-shared/src/PerformanceMarks';
+import {withAsyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
 import WorkerizedParseSourceAndMetadata from './parseSourceAndMetadata.worker';
 import typeof * as ParseSourceAndMetadataModule from './parseSourceAndMetadata';
 import {flattenHooksList, loadSourceAndMetadata} from './loadSourceAndMetadata';
@@ -37,7 +37,7 @@ export async function parseHookNames(
   hooksTree: HooksTree,
   fetchFileWithCaching: FetchFileWithCaching | null,
 ): Promise<HookNames | null> {
-  return withAsyncPerformanceMark('parseHookNames', async () => {
+  return withAsyncPerfMeasurements('parseHookNames', async () => {
     const hooksList = flattenHooksList(hooksTree);
     if (hooksList.length === 0) {
       // This component tree contains no named hooks.
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
index e8f043be24c1..640e916a09ff 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
@@ -49,10 +49,10 @@ import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {sourceMapIncludesSource} from '../SourceMapUtils';
 import {
-  withAsyncPerformanceMark,
-  withCallbackPerformanceMark,
-  withSyncPerformanceMark,
-} from 'react-devtools-shared/src/PerformanceMarks';
+  withAsyncPerfMeasurements,
+  withCallbackPerfMeasurements,
+  withSyncPerfMeasurements,
+} from 'react-devtools-shared/src/PerformanceLoggingUtils';
 
 import type {
   HooksNode,
@@ -98,17 +98,17 @@ export async function loadSourceAndMetadata(
   hooksList: HooksList,
   fetchFileWithCaching: FetchFileWithCaching | null,
 ): Promise<LocationKeyToHookSourceAndMetadata> {
-  return withAsyncPerformanceMark('loadSourceAndMetadata()', async () => {
-    const locationKeyToHookSourceAndMetadata = withSyncPerformanceMark(
+  return withAsyncPerfMeasurements('loadSourceAndMetadata()', async () => {
+    const locationKeyToHookSourceAndMetadata = withSyncPerfMeasurements(
       'initializeHookSourceAndMetadata',
       () => initializeHookSourceAndMetadata(hooksList),
     );
 
-    await withAsyncPerformanceMark('loadSourceFiles()', () =>
+    await withAsyncPerfMeasurements('loadSourceFiles()', () =>
       loadSourceFiles(locationKeyToHookSourceAndMetadata, fetchFileWithCaching),
     );
 
-    await withAsyncPerformanceMark('extractAndLoadSourceMapJSON()', () =>
+    await withAsyncPerfMeasurements('extractAndLoadSourceMapJSON()', () =>
       extractAndLoadSourceMapJSON(locationKeyToHookSourceAndMetadata),
     );
 
@@ -157,7 +157,7 @@ function extractAndLoadSourceMapJSON(
     // 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 = withSyncPerformanceMark(
+    let sourceMappingURLMatch = withSyncPerfMeasurements(
       'sourceMapRegex.exec(runtimeSourceCode)',
       () => sourceMapRegex.exec(runtimeSourceCode),
     );
@@ -185,12 +185,12 @@ function extractAndLoadSourceMapJSON(
             const trimmed = ((sourceMappingURL.match(
               /base64,([a-zA-Z0-9+\/=]+)/,
             ): any): Array<string>)[1];
-            const decoded = withSyncPerformanceMark(
+            const decoded = withSyncPerfMeasurements(
               'decodeBase64String()',
               () => decodeBase64String(trimmed),
             );
 
-            const sourceMapJSON = withSyncPerformanceMark(
+            const sourceMapJSON = withSyncPerfMeasurements(
               'JSON.parse(decoded)',
               () => JSON.parse(decoded),
             );
@@ -227,7 +227,7 @@ function extractAndLoadSourceMapJSON(
         }
 
         // If the first source map we found wasn't a match, check for more.
-        sourceMappingURLMatch = withSyncPerformanceMark(
+        sourceMappingURLMatch = withSyncPerfMeasurements(
           'sourceMapRegex.exec(runtimeSourceCode)',
           () => sourceMapRegex.exec(runtimeSourceCode),
         );
@@ -266,7 +266,7 @@ function extractAndLoadSourceMapJSON(
             dedupedFetchPromises.get(url) ||
             fetchFile(url).then(
               sourceMapContents => {
-                const sourceMapJSON = withSyncPerformanceMark(
+                const sourceMapJSON = withSyncPerfMeasurements(
                   'JSON.parse(sourceMapContents)',
                   () => JSON.parse(sourceMapContents),
                 );
@@ -316,7 +316,7 @@ function fetchFile(
   url: string,
   markName?: string = 'fetchFile',
 ): Promise<string> {
-  return withCallbackPerformanceMark(`${markName}("${url}")`, done => {
+  return withCallbackPerfMeasurements(`${markName}("${url}")`, done => {
     return new Promise((resolve, reject) => {
       fetch(url, FETCH_OPTIONS).then(
         response => {
@@ -376,7 +376,7 @@ export function hasNamedHooks(hooksTree: HooksTree): boolean {
 
 export function flattenHooksList(hooksTree: HooksTree): HooksList {
   const hooksList: HooksList = [];
-  withSyncPerformanceMark('flattenHooksList()', () => {
+  withSyncPerfMeasurements('flattenHooksList()', () => {
     flattenHooksListImpl(hooksTree, hooksList);
   });
 
@@ -472,7 +472,7 @@ function loadSourceFiles(
       // If a helper function has been injected to fetch with caching,
       // use it to fetch the (already loaded) source file.
       fetchFileFunction = url => {
-        return withAsyncPerformanceMark(
+        return withAsyncPerfMeasurements(
           `fetchFileWithCaching("${url}")`,
           () => {
             return ((fetchFileWithCaching: any): FetchFileWithCaching)(url);
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
index 967576d659f1..b6c069d0dcdc 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
@@ -19,9 +19,9 @@ import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {getHookSourceLocationKey} from 'react-devtools-shared/src/hookNamesCache';
 import {SourceMapMetadataConsumer} from '../SourceMapMetadataConsumer';
 import {
-  withAsyncPerformanceMark,
-  withSyncPerformanceMark,
-} from 'react-devtools-shared/src/PerformanceMarks';
+  withAsyncPerfMeasurements,
+  withSyncPerfMeasurements,
+} from 'react-devtools-shared/src/PerformanceLoggingUtils';
 
 import type {
   HooksList,
@@ -106,27 +106,27 @@ export async function parseSourceAndMetadata(
   hooksList: HooksList,
   locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata,
 ): Promise<HookNames | null> {
-  return withAsyncPerformanceMark('parseSourceAndMetadata()', async () => {
-    const locationKeyToHookParsedMetadata = withSyncPerformanceMark(
+  return withAsyncPerfMeasurements('parseSourceAndMetadata()', async () => {
+    const locationKeyToHookParsedMetadata = withSyncPerfMeasurements(
       'initializeHookParsedMetadata',
       () => initializeHookParsedMetadata(locationKeyToHookSourceAndMetadata),
     );
 
-    withSyncPerformanceMark('parseSourceMaps', () =>
+    withSyncPerfMeasurements('parseSourceMaps', () =>
       parseSourceMaps(
         locationKeyToHookSourceAndMetadata,
         locationKeyToHookParsedMetadata,
       ),
     );
 
-    withSyncPerformanceMark('parseSourceAST()', () =>
+    withSyncPerfMeasurements('parseSourceAST()', () =>
       parseSourceAST(
         locationKeyToHookSourceAndMetadata,
         locationKeyToHookParsedMetadata,
       ),
     );
 
-    return withSyncPerformanceMark('findHookNames()', () =>
+    return withSyncPerfMeasurements('findHookNames()', () =>
       findHookNames(hooksList, locationKeyToHookParsedMetadata),
     );
   });
@@ -174,7 +174,7 @@ function findHookNames(
     let name;
     const {metadataConsumer} = hookParsedMetadata;
     if (metadataConsumer != null) {
-      name = withSyncPerformanceMark('metadataConsumer.hookNameFor()', () =>
+      name = withSyncPerfMeasurements('metadataConsumer.hookNameFor()', () =>
         metadataConsumer.hookNameFor({
           line: originalSourceLineNumber,
           column: originalSourceColumnNumber,
@@ -184,7 +184,7 @@ function findHookNames(
     }
 
     if (name == null) {
-      name = withSyncPerformanceMark('getHookName()', () =>
+      name = withSyncPerfMeasurements('getHookName()', () =>
         getHookName(
           hook,
           hookParsedMetadata.originalSourceAST,
@@ -303,7 +303,7 @@ function parseSourceAST(
         // Now that the source map has been loaded,
         // extract the original source for later.
         // TODO (named hooks) Refactor this read, github.com/facebook/react/pull/22181
-        const {column, line, source} = withSyncPerformanceMark(
+        const {column, line, source} = withSyncPerfMeasurements(
           'sourceConsumer.originalPositionFor()',
           () =>
             sourceConsumer.originalPositionFor({
@@ -329,7 +329,7 @@ function parseSourceAST(
         // It can be relative if the source map specifies it that way,
         // but we use it as a cache key across different source maps and there can be collisions.
         originalSourceURL = (source: string);
-        originalSourceCode = withSyncPerformanceMark(
+        originalSourceCode = withSyncPerfMeasurements(
           'sourceConsumer.sourceContentFor()',
           () => (sourceConsumer.sourceContentFor(source, true): string),
         );
@@ -401,7 +401,7 @@ function parseSourceAST(
 
         // TODO (named hooks) This is probably where we should check max source length,
         // rather than in loadSourceAndMetatada -> loadSourceFiles().
-        const originalSourceAST = withSyncPerformanceMark(
+        const originalSourceAST = withSyncPerfMeasurements(
           '[@babel/parser] parse(originalSourceCode)',
           () =>
             parse(originalSourceCode, {
@@ -441,11 +441,11 @@ function parseSourceMaps(
 
       const sourceMapJSON = hookSourceAndMetadata.sourceMapJSON;
       if (sourceMapJSON != null) {
-        hookParsedMetadata.metadataConsumer = withSyncPerformanceMark(
+        hookParsedMetadata.metadataConsumer = withSyncPerfMeasurements(
           'new SourceMapMetadataConsumer(sourceMapJSON)',
           () => new SourceMapMetadataConsumer(sourceMapJSON),
         );
-        hookParsedMetadata.sourceConsumer = withSyncPerformanceMark(
+        hookParsedMetadata.sourceConsumer = withSyncPerfMeasurements(
           'new SourceMapConsumer(sourceMapJSON)',
           () => new SourceMapConsumer(sourceMapJSON),
         );

From 67222f044c582a1a10f3b9d15d9daf67d5dc5c4f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 15 Sep 2021 13:51:39 +0100
Subject: [PATCH 0856/1603] [Experiment] Warn if callback ref returns a
 function (#22313)

---
 packages/react-dom/src/__tests__/refs-test.js | 30 ++++++++++++++++
 .../src/ReactFiberCommitWork.new.js           | 35 ++++++++++++++++---
 .../src/ReactFiberCommitWork.old.js           | 35 ++++++++++++++++---
 packages/shared/ReactFeatureFlags.js          |  2 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 13 files changed, 103 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js
index 4b616c1ae4cf..872ff6e7dc2b 100644
--- a/packages/react-dom/src/__tests__/refs-test.js
+++ b/packages/react-dom/src/__tests__/refs-test.js
@@ -351,6 +351,36 @@ describe('ref swapping', () => {
       'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
     );
   });
+
+  // @gate !__DEV__ || warnAboutCallbackRefReturningFunction
+  it('should warn about callback refs returning a function', () => {
+    const container = document.createElement('div');
+    expect(() => {
+      ReactDOM.render(<div ref={() => () => {}} />, container);
+    }).toErrorDev('Unexpected return value from a callback ref in div');
+
+    // Cleanup should warn, too.
+    expect(() => {
+      ReactDOM.render(<span />, container);
+    }).toErrorDev('Unexpected return value from a callback ref in div', {
+      withoutStack: true,
+    });
+
+    // No warning when returning non-functions.
+    ReactDOM.render(<p ref={() => ({})} />, container);
+    ReactDOM.render(<p ref={() => null} />, container);
+    ReactDOM.render(<p ref={() => undefined} />, container);
+
+    // Still warns on functions (not deduped).
+    expect(() => {
+      ReactDOM.render(<div ref={() => () => {}} />, container);
+    }).toErrorDev('Unexpected return value from a callback ref in div');
+    expect(() => {
+      ReactDOM.unmountComponentAtNode(container);
+    }).toErrorDev('Unexpected return value from a callback ref in div', {
+      withoutStack: true,
+    });
+  });
 });
 
 describe('root level refs', () => {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 85b5b778ba9f..db46978eb2c6 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -37,6 +37,7 @@ import {
   deletedTreeCleanUpLevel,
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
+  warnAboutCallbackRefReturningFunction,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -250,6 +251,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
     if (typeof ref === 'function') {
+      let retVal;
       try {
         if (
           enableProfilerTimer &&
@@ -258,17 +260,29 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         ) {
           try {
             startLayoutEffectTimer();
-            ref(null);
+            retVal = ref(null);
           } finally {
             recordLayoutEffectDuration(current);
           }
         } else {
-          ref(null);
+          retVal = ref(null);
         }
       } catch (error) {
         reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
+      if (__DEV__) {
+        if (
+          warnAboutCallbackRefReturningFunction &&
+          typeof retVal === 'function'
+        ) {
+          console.error(
+            'Unexpected return value from a callback ref in %s. ' +
+              'A callback ref should not return a function.',
+            getComponentNameFromFiber(current),
+          );
+        }
+      }
     } else {
       ref.current = null;
     }
@@ -1077,6 +1091,7 @@ function commitAttachRef(finishedWork: Fiber) {
       instanceToUse = instance;
     }
     if (typeof ref === 'function') {
+      let retVal;
       if (
         enableProfilerTimer &&
         enableProfilerCommitHooks &&
@@ -1084,12 +1099,24 @@ function commitAttachRef(finishedWork: Fiber) {
       ) {
         try {
           startLayoutEffectTimer();
-          ref(instanceToUse);
+          retVal = ref(instanceToUse);
         } finally {
           recordLayoutEffectDuration(finishedWork);
         }
       } else {
-        ref(instanceToUse);
+        retVal = ref(instanceToUse);
+      }
+      if (__DEV__) {
+        if (
+          warnAboutCallbackRefReturningFunction &&
+          typeof retVal === 'function'
+        ) {
+          console.error(
+            'Unexpected return value from a callback ref in %s. ' +
+              'A callback ref should not return a function.',
+            getComponentNameFromFiber(finishedWork),
+          );
+        }
       }
     } else {
       if (__DEV__) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 9613f0b16840..e0131080a32f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -37,6 +37,7 @@ import {
   deletedTreeCleanUpLevel,
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
+  warnAboutCallbackRefReturningFunction,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -250,6 +251,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   const ref = current.ref;
   if (ref !== null) {
     if (typeof ref === 'function') {
+      let retVal;
       try {
         if (
           enableProfilerTimer &&
@@ -258,17 +260,29 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         ) {
           try {
             startLayoutEffectTimer();
-            ref(null);
+            retVal = ref(null);
           } finally {
             recordLayoutEffectDuration(current);
           }
         } else {
-          ref(null);
+          retVal = ref(null);
         }
       } catch (error) {
         reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
+      if (__DEV__) {
+        if (
+          warnAboutCallbackRefReturningFunction &&
+          typeof retVal === 'function'
+        ) {
+          console.error(
+            'Unexpected return value from a callback ref in %s. ' +
+              'A callback ref should not return a function.',
+            getComponentNameFromFiber(current),
+          );
+        }
+      }
     } else {
       ref.current = null;
     }
@@ -1077,6 +1091,7 @@ function commitAttachRef(finishedWork: Fiber) {
       instanceToUse = instance;
     }
     if (typeof ref === 'function') {
+      let retVal;
       if (
         enableProfilerTimer &&
         enableProfilerCommitHooks &&
@@ -1084,12 +1099,24 @@ function commitAttachRef(finishedWork: Fiber) {
       ) {
         try {
           startLayoutEffectTimer();
-          ref(instanceToUse);
+          retVal = ref(instanceToUse);
         } finally {
           recordLayoutEffectDuration(finishedWork);
         }
       } else {
-        ref(instanceToUse);
+        retVal = ref(instanceToUse);
+      }
+      if (__DEV__) {
+        if (
+          warnAboutCallbackRefReturningFunction &&
+          typeof retVal === 'function'
+        ) {
+          console.error(
+            'Unexpected return value from a callback ref in %s. ' +
+              'A callback ref should not return a function.',
+            getComponentNameFromFiber(finishedWork),
+          );
+        }
       }
     } else {
       if (__DEV__) {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index f6eb72375f80..b9adc3b24761 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -166,6 +166,8 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableUseRefAccessWarning = false;
 
+export const warnAboutCallbackRefReturningFunction = false;
+
 export const enableRecursiveCommitTraversal = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 41122a6c5ff3..a16e267d34f8 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -63,6 +63,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = __DEV__;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
+export const warnAboutCallbackRefReturningFunction = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 0bfe6f3fecc7..5e6e925e8d25 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -54,6 +54,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
+export const warnAboutCallbackRefReturningFunction = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c0b6eda1b038..a74e056faf5b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -54,6 +54,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
+export const warnAboutCallbackRefReturningFunction = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 03d7ed0734d0..028755cbe0cd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -53,6 +53,7 @@ export const warnOnSubscriptionInsideStartTransition = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
+export const warnAboutCallbackRefReturningFunction = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 1618decf3843..103d02e8a631 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -54,6 +54,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = true;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
+export const warnAboutCallbackRefReturningFunction = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index cca9a0d71932..0f9e710eda92 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -54,6 +54,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
+export const warnAboutCallbackRefReturningFunction = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e1b633538cde..740377f5aee8 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -54,6 +54,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
+export const warnAboutCallbackRefReturningFunction = false;
 
 export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index d6a5c77b837d..6400ef042250 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -19,6 +19,7 @@ export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
 export const enableUseRefAccessWarning = __VARIANT__;
+export const warnAboutCallbackRefReturningFunction = __VARIANT__;
 export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index cd66a719143a..3522244a3e13 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -64,6 +64,7 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
+export const warnAboutCallbackRefReturningFunction = true;
 
 export const enableLazyElements = true;
 export const enableCache = true;

From f4ac680c7a1db67cae2659f531bb5531833f5c2f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 15 Sep 2021 13:32:09 -0400
Subject: [PATCH 0857/1603] Fixed broken build script --unsafe-partial flag
 (#22324)

This flag was broken due to a buggy race case in the ncp() command. The fix is amittedly a hack but improves on the existing behavior (of leaving the workspace in a broken state).
---
 scripts/rollup/utils.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/scripts/rollup/utils.js b/scripts/rollup/utils.js
index 24eeed192feb..276e8d3c7f1b 100644
--- a/scripts/rollup/utils.js
+++ b/scripts/rollup/utils.js
@@ -15,9 +15,12 @@ function asyncCopyTo(from, to) {
           if (error) {
             // Wrap to have a useful stack trace.
             reject(new Error(error));
-            return;
+          } 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);
           }
-          resolve();
         });
       })
   );

From e8feb11b62e869804970258fa629922edbfc836b Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Wed, 15 Sep 2021 23:21:33 +0530
Subject: [PATCH 0858/1603] Fixed issue for better bundles,chunks and workers
 name in devtools-extensions. (#22322)

---
 packages/react-devtools-extensions/src/main.js       | 4 +++-
 packages/react-devtools-extensions/webpack.config.js | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 6acb35aa28bf..9d5b4da02e40 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -331,7 +331,9 @@ function createPanelIfReactLoaded() {
 
         // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
         const hookNamesModuleLoaderFunction = () =>
-          import('react-devtools-shared/src/hooks/parseHookNames');
+          import(
+            /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+          );
 
         root = createRoot(document.createElement('div'));
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 233422276ec4..83ce98cbac8c 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -114,6 +114,7 @@ module.exports = {
             loader: 'workerize-loader',
             options: {
               inline: true,
+              name: '[name]',
             },
           },
           {

From a8cabb5648a14ef55cb96d679a526e3f731e9611 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 15 Sep 2021 17:19:10 -0400
Subject: [PATCH 0859/1603] [DevTools] Fix runtime error when inspecting an
 element times out (#22329)

---
 packages/react-devtools-shared/src/backendAPI.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 4a79147ec23e..5e0ac663fee4 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -158,7 +158,9 @@ function getPromiseForRequestID<T>(
 
     const onTimeout = () => {
       cleanup();
-      reject();
+      reject(
+        new Error(`Timed out waiting for event '${eventType}' from bridge`),
+      );
     };
 
     bridge.addListener(eventType, onInspectedElement);

From a7da457e6bdf474c0abc820c359f094475819cfd Mon Sep 17 00:00:00 2001
From: Ikko Ashimine <eltociear@gmail.com>
Date: Fri, 17 Sep 2021 22:04:51 +0900
Subject: [PATCH 0860/1603] Scheduling profiler: Fix typo in View.js (#22337)

---
 .../react-devtools-scheduling-profiler/src/view-base/View.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
index 8dcda731efbc..0edac1120862 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/View.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/View.js
@@ -58,7 +58,7 @@ export class View {
   _needsDisplay = true;
 
   /**
-   * Whether the heirarchy below this view has subviews that need display.
+   * Whether the hierarchy below this view has subviews that need display.
    *
    * NOTE: Do not set directly! Use `setSubviewsNeedDisplay`.
    *

From b0803f255ba639aae5a6bd66d1234d12eb18d972 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Fri, 17 Sep 2021 18:35:09 +0530
Subject: [PATCH 0861/1603] VerticalScrollView -> fixed  typos (#22341)

---
 .../src/view-base/VerticalScrollView.js                         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
index d54907da1a8d..a4ef5df8d7b5 100644
--- a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
+++ b/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
@@ -287,7 +287,7 @@ export class VerticalScrollView extends View {
 
     // 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 fitst the contnet (no scrolling).
+    // The only exception is when the container fits the content (no scrolling).
     if (contentHeight === containerHeight) {
       return false;
     }

From f2fd1b80d5501a0bce00641f383d18cbd24e3d32 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 17 Sep 2021 09:52:52 -0400
Subject: [PATCH 0862/1603] Updated the utfDecodeString() method to avoid call
 stack exceeded error (#22330)

---
 packages/react-devtools-shared/src/utils.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 901aecbac6d0..7c9e2fbd25f8 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -126,7 +126,16 @@ export function getUID(): number {
 }
 
 export function utfDecodeString(array: Array<number>): string {
-  return String.fromCodePoint(...array);
+  // Avoid spreading the array (e.g. String.fromCodePoint(...array))
+  // Functions arguments are first placed on the stack before the function is called
+  // which throws a RangeError for large arrays.
+  // See github.com/facebook/react/issues/22293
+  let string = '';
+  for (let i = 0; i < array.length; i++) {
+    const char = array[i];
+    string += String.fromCodePoint(char);
+  }
+  return string;
 }
 
 export function utfEncodeString(string: string): Array<number> {

From 1090ccd019fda0d039e2ded0089465c05a0a5dcd Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 17 Sep 2021 10:21:54 -0400
Subject: [PATCH 0863/1603] [DevTools] Enable hook names in standalone app
 (#22320)

---
 .../react-devtools-core/src/standalone.js     |  8 +++
 .../react-devtools-core/webpack.standalone.js |  1 +
 .../config/DevToolsFeatureFlags.core-fb.js    |  2 +-
 .../config/DevToolsFeatureFlags.core-oss.js   |  2 +-
 .../parseHookNames/parseSourceAndMetadata.js  | 56 +++++++++++--------
 packages/react-devtools/app.js                |  1 +
 6 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 35d21b3a8a2e..bb6bd3d0c4cf 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -43,6 +43,13 @@ let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
 let statusListener: StatusListener = (message: string) => {};
 
+// 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) {
   node = value;
 
@@ -100,6 +107,7 @@ function reload() {
       createElement(DevTools, {
         bridge: ((bridge: any): FrontendBridge),
         canViewElementSourceFunction,
+        hookNamesModuleLoaderFunction,
         showTabBar: true,
         store: ((store: any): Store),
         warnIfLegacyBackendDetected: true,
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 8f17efe9c28b..2994035c937b 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -46,6 +46,7 @@ module.exports = {
   output: {
     path: __dirname + '/dist',
     filename: '[name].js',
+    chunkFilename: '[name].chunk.js',
     library: '[name]',
     libraryTarget: 'commonjs2',
   },
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index b6b7a1d0cd36..f0278aa0804a 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
-export const enableNamedHooksFeature = false;
+export const enableNamedHooksFeature = true;
 export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index 6eb0f71ef9f9..b71d9501c6fb 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -15,7 +15,7 @@
 
 export const enableProfilerChangedHookIndices = false;
 export const isInternalFacebookBuild = false;
-export const enableNamedHooksFeature = false;
+export const enableNamedHooksFeature = true;
 export const enableLogger = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
index b6c069d0dcdc..6f87b351a014 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
@@ -394,33 +394,41 @@ function parseSourceAST(
         hookParsedMetadata.originalSourceCode =
           sourceMetadata.originalSourceCode;
       } else {
-        // 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().
-        const originalSourceAST = withSyncPerfMeasurements(
-          '[@babel/parser] parse(originalSourceCode)',
-          () =>
-            parse(originalSourceCode, {
-              sourceType: 'unambiguous',
-              plugins: ['jsx', plugin],
-            }),
-        );
-        hookParsedMetadata.originalSourceAST = originalSourceAST;
+        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}"`,
+          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}`,
           );
         }
-
-        originalURLToMetadataCache.set(originalSourceURL, {
-          originalSourceAST,
-          originalSourceCode,
-        });
       }
     },
   );
diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js
index 174766490cc4..e33a42563344 100644
--- a/packages/react-devtools/app.js
+++ b/packages/react-devtools/app.js
@@ -30,6 +30,7 @@ app.on('ready', function() {
     //titleBarStyle: 'customButtonsOnHover',
     webPreferences: {
       nodeIntegration: true,
+      nodeIntegrationInWorker: true,
     },
   });
 

From bc9bb87c2b01bff8a15e02c8416addf6177e9055 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 17 Sep 2021 10:46:42 -0400
Subject: [PATCH 0864/1603] Clear performance marks after measuring (#22345)

---
 packages/react-devtools-shared/src/PerformanceLoggingUtils.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-devtools-shared/src/PerformanceLoggingUtils.js b/packages/react-devtools-shared/src/PerformanceLoggingUtils.js
index 29d81bba911c..fc10bbd9992e 100644
--- a/packages/react-devtools-shared/src/PerformanceLoggingUtils.js
+++ b/packages/react-devtools-shared/src/PerformanceLoggingUtils.js
@@ -27,6 +27,8 @@ 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');
   }
 }
 

From f50ff357cf45d5cbda8d5a99c247e33b0477e936 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 17 Sep 2021 12:53:07 -0400
Subject: [PATCH 0865/1603] DevTools: Fix memory leak via alternate Fiber
 pointer (#22346)

---
 packages/react-devtools-shared/src/backend/renderer.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 3f03315fa5ce..1cfcaaa6a866 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1140,6 +1140,13 @@ export function attach(
 
     untrackFibersSet.add(fiber);
 
+    // React may detach alternate pointers during unmount;
+    // Since our untracking code is async, we should explicily track the pending alternate here as well.
+    const alternate = fiber.alternate;
+    if (alternate !== null) {
+      untrackFibersSet.add(alternate);
+    }
+
     if (untrackFibersTimeoutID === null) {
       untrackFibersTimeoutID = setTimeout(untrackFibers, 1000);
     }

From 8209de269531767b33d8db26eda41db38bfb6a27 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 20 Sep 2021 00:11:50 -0400
Subject: [PATCH 0866/1603] Delete useMutableSource implementation (#22292)

This API was replaced by useSyncExternalStore
---
 .../react-debug-tools/src/ReactDebugHooks.js  |   26 +-
 .../ReactHooksInspectionIntegration-test.js   |   37 -
 packages/react-dom/src/client/ReactDOMRoot.js |   27 +-
 .../src/server/ReactPartialRendererHooks.js   |   21 +-
 .../src/ReactFiberBeginWork.new.js            |   18 -
 .../src/ReactFiberBeginWork.old.js            |   18 -
 .../src/ReactFiberCompleteWork.new.js         |    3 -
 .../src/ReactFiberCompleteWork.old.js         |    3 -
 .../src/ReactFiberHooks.new.js                |  401 +---
 .../src/ReactFiberHooks.old.js                |  401 +---
 .../src/ReactFiberLane.new.js                 |   11 +-
 .../src/ReactFiberLane.old.js                 |   11 +-
 .../src/ReactFiberReconciler.js               |    5 -
 .../src/ReactFiberReconciler.new.js           |    1 -
 .../src/ReactFiberReconciler.old.js           |    1 -
 .../src/ReactFiberRoot.new.js                 |    1 -
 .../src/ReactFiberRoot.old.js                 |    1 -
 .../src/ReactFiberUnwindWork.new.js           |    3 -
 .../src/ReactFiberUnwindWork.old.js           |    3 -
 .../src/ReactInternalTypes.js                 |   21 +-
 .../src/ReactMutableSource.new.js             |  108 -
 .../src/ReactMutableSource.old.js             |  108 -
 .../useMutableSource-test.internal.js         | 2098 -----------------
 .../useMutableSourceHydration-test.js         |  451 ----
 packages/react-server/src/ReactFizzHooks.js   |   21 +-
 .../react-server/src/ReactFlightServer.js     |    1 -
 .../src/ReactSuspenseTestUtils.js             |    1 -
 packages/react/index.classic.fb.js            |    4 -
 packages/react/index.experimental.js          |    2 -
 packages/react/index.js                       |    2 -
 packages/react/index.modern.fb.js             |    4 -
 packages/react/index.stable.js                |    2 -
 packages/react/src/React.js                   |    4 -
 packages/react/src/ReactHooks.js              |   16 +-
 packages/react/src/ReactMutableSource.js      |   34 -
 .../unstable-shared-subset.experimental.js    |    2 -
 packages/shared/ReactTypes.js                 |   50 -
 37 files changed, 14 insertions(+), 3907 deletions(-)
 delete mode 100644 packages/react-reconciler/src/ReactMutableSource.new.js
 delete mode 100644 packages/react-reconciler/src/ReactMutableSource.old.js
 delete mode 100644 packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
 delete mode 100644 packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
 delete mode 100644 packages/react/src/ReactMutableSource.js

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index c1258c2dcda4..a57c38ab103c 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -7,13 +7,7 @@
  * @flow
  */
 
-import type {
-  MutableSource,
-  MutableSourceGetSnapshotFn,
-  MutableSourceSubscribeFn,
-  ReactContext,
-  ReactProviderType,
-} from 'shared/ReactTypes';
+import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 import type {
   Fiber,
   Dispatcher as DispatcherType,
@@ -261,23 +255,6 @@ function useMemo<T>(
   return value;
 }
 
-function useMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  // useMutableSource() composes multiple hooks internally.
-  // Advance the current hook index the same number of times
-  // so that subsequent hooks have the right memoized state.
-  nextHook(); // MutableSource
-  nextHook(); // State
-  nextHook(); // Effect
-  nextHook(); // Effect
-  const value = getSnapshot(source._source);
-  hookLog.push({primitive: 'MutableSource', stackError: new Error(), value});
-  return value;
-}
-
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -357,7 +334,6 @@ const Dispatcher: DispatcherType = {
   useRef,
   useState,
   useTransition,
-  useMutableSource,
   useSyncExternalStore,
   useDeferredValue,
   useOpaqueIdentifier,
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index b13bec22d213..2e6896ef160f 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -1019,43 +1019,6 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  it('should support composite useMutableSource hook', () => {
-    const createMutableSource =
-      React.createMutableSource || React.unstable_createMutableSource;
-    const useMutableSource =
-      React.useMutableSource || React.unstable_useMutableSource;
-
-    const mutableSource = createMutableSource({}, () => 1);
-    function Foo(props) {
-      useMutableSource(
-        mutableSource,
-        () => 'snapshot',
-        () => {},
-      );
-      React.useMemo(() => 'memo', []);
-      return <div />;
-    }
-    const renderer = ReactTestRenderer.create(<Foo />);
-    const childFiber = renderer.root.findByType(Foo)._currentFiber();
-    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
-    expect(tree).toEqual([
-      {
-        id: 0,
-        isStateEditable: false,
-        name: 'MutableSource',
-        value: 'snapshot',
-        subHooks: [],
-      },
-      {
-        id: 1,
-        isStateEditable: false,
-        name: 'Memo',
-        value: 'memo',
-        subHooks: [],
-      },
-    ]);
-  });
-
   // @gate experimental || www
   it('should support composite useSyncExternalStore hook', () => {
     const useSyncExternalStore = React.unstable_useSyncExternalStore;
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index ba062fc3f71e..3bde63dc67a3 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -8,7 +8,7 @@
  */
 
 import type {Container} from './ReactDOMHostConfig';
-import type {MutableSource, ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 
 export type RootType = {
@@ -24,7 +24,6 @@ export type CreateRootOptions = {
   hydrationOptions?: {
     onHydrated?: (suspenseNode: Comment) => void,
     onDeleted?: (suspenseNode: Comment) => void,
-    mutableSources?: Array<MutableSource<any>>,
     ...
   },
   // END OF TODO
@@ -35,7 +34,6 @@ export type CreateRootOptions = {
 
 export type HydrateRootOptions = {
   // Hydration options
-  hydratedSources?: Array<MutableSource<any>>,
   onHydrated?: (suspenseNode: Comment) => void,
   onDeleted?: (suspenseNode: Comment) => void,
   // Options for all roots
@@ -61,7 +59,6 @@ import {
   createContainer,
   updateContainer,
   findHostInstanceWithNoPortals,
-  registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
@@ -129,11 +126,6 @@ export function createRoot(
   const hydrate = options != null && options.hydrate === true;
   const hydrationCallbacks =
     (options != null && options.hydrationOptions) || null;
-  const mutableSources =
-    (options != null &&
-      options.hydrationOptions != null &&
-      options.hydrationOptions.mutableSources) ||
-    null;
   // END TODO
 
   const isStrictMode = options != null && options.unstable_strictMode === true;
@@ -159,15 +151,6 @@ export function createRoot(
     container.nodeType === COMMENT_NODE ? container.parentNode : container;
   listenToAllSupportedEvents(rootContainerElement);
 
-  // TODO: Delete this path
-  if (mutableSources) {
-    for (let i = 0; i < mutableSources.length; i++) {
-      const mutableSource = mutableSources[i];
-      registerMutableSourceForHydration(root, mutableSource);
-    }
-  }
-  // END TODO
-
   return new ReactDOMRoot(root);
 }
 
@@ -185,7 +168,6 @@ export function hydrateRoot(
   // For now we reuse the whole bag of options since they contain
   // the hydration callbacks.
   const hydrationCallbacks = options != null ? options : null;
-  const mutableSources = (options != null && options.hydratedSources) || null;
   const isStrictMode = options != null && options.unstable_strictMode === true;
 
   let concurrentUpdatesByDefaultOverride = null;
@@ -208,13 +190,6 @@ export function hydrateRoot(
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.
   listenToAllSupportedEvents(container);
 
-  if (mutableSources) {
-    for (let i = 0; i < mutableSources.length; i++) {
-      const mutableSource = mutableSources[i];
-      registerMutableSourceForHydration(root, mutableSource);
-    }
-  }
-
   // Render the initial children
   updateContainer(initialChildren, root, null, null);
 
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index bfc21b0623a0..175a394a4dbf 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -9,12 +9,7 @@
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 
-import type {
-  MutableSource,
-  MutableSourceGetSnapshotFn,
-  MutableSourceSubscribeFn,
-  ReactContext,
-} from 'shared/ReactTypes';
+import type {ReactContext} from 'shared/ReactTypes';
 import type PartialRenderer from './ReactPartialRenderer';
 
 import {validateContextBounds} from './ReactPartialRendererContext';
@@ -466,18 +461,6 @@ export function useCallback<T>(
   return useMemo(() => callback, deps);
 }
 
-// TODO Decide on how to implement this hook for server rendering.
-// If a mutation occurs during render, consider triggering a Suspense boundary
-// and falling back to client rendering.
-function useMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  resolveCurrentlyRenderingComponent();
-  return getSnapshot(source._source);
-}
-
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -536,8 +519,6 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
-  // Subscriptions are not setup in a server environment.
-  useMutableSource,
   useSyncExternalStore,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index d9874bba3411..894bc523e4b5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -12,7 +12,6 @@ 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.new';
-import type {MutableSource} from 'shared/ReactTypes';
 import type {
   SuspenseState,
   SuspenseListRenderState,
@@ -145,7 +144,6 @@ import {
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
-  supportsHydration,
   isPrimaryRenderer,
   supportsPersistence,
   getOffscreenContainerProps,
@@ -224,7 +222,6 @@ import {
   RetryAfterError,
   NoContext,
 } from './ReactFiberWorkLoop.new';
-import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {
   requestCacheFromPool,
   pushCacheProvider,
@@ -1303,21 +1300,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
     // not hydrating.
-
-    if (supportsHydration) {
-      const mutableSourceEagerHydrationData =
-        root.mutableSourceEagerHydrationData;
-      if (mutableSourceEagerHydrationData != null) {
-        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-          const mutableSource = ((mutableSourceEagerHydrationData[
-            i
-          ]: any): MutableSource<any>);
-          const version = mutableSourceEagerHydrationData[i + 1];
-          setWorkInProgressVersion(mutableSource, version);
-        }
-      }
-    }
-
     const child = mountChildFibers(
       workInProgress,
       null,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 74037fbe966f..264e723b2897 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -12,7 +12,6 @@ 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.old';
-import type {MutableSource} from 'shared/ReactTypes';
 import type {
   SuspenseState,
   SuspenseListRenderState,
@@ -145,7 +144,6 @@ import {
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
-  supportsHydration,
   isPrimaryRenderer,
   supportsPersistence,
   getOffscreenContainerProps,
@@ -224,7 +222,6 @@ import {
   RetryAfterError,
   NoContext,
 } from './ReactFiberWorkLoop.old';
-import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {
   requestCacheFromPool,
   pushCacheProvider,
@@ -1303,21 +1300,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
     // not hydrating.
-
-    if (supportsHydration) {
-      const mutableSourceEagerHydrationData =
-        root.mutableSourceEagerHydrationData;
-      if (mutableSourceEagerHydrationData != null) {
-        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-          const mutableSource = ((mutableSourceEagerHydrationData[
-            i
-          ]: any): MutableSource<any>);
-          const version = mutableSourceEagerHydrationData[i + 1];
-          setWorkInProgressVersion(mutableSource, version);
-        }
-      }
-    }
-
     const child = mountChildFibers(
       workInProgress,
       null,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 1382439f1ee7..e7d6f40e98bd 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -30,8 +30,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
-import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
-
 import {now} from './Scheduler';
 
 import {
@@ -854,7 +852,6 @@ function completeWork(
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
-      resetMutableSourceWorkInProgressVersions();
       if (fiberRoot.pendingContext) {
         fiberRoot.context = fiberRoot.pendingContext;
         fiberRoot.pendingContext = null;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 746e3d4b572d..6e8406fc05df 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -30,8 +30,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
 
-import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
-
 import {now} from './Scheduler';
 
 import {
@@ -854,7 +852,6 @@ function completeWork(
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
-      resetMutableSourceWorkInProgressVersions();
       if (fiberRoot.pendingContext) {
         fiberRoot.context = fiberRoot.pendingContext;
         fiberRoot.pendingContext = null;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 4b4d7ad7e916..5f1c30a834c1 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -7,12 +7,7 @@
  * @flow
  */
 
-import type {
-  MutableSource,
-  MutableSourceGetSnapshotFn,
-  MutableSourceSubscribeFn,
-  ReactContext,
-} from 'shared/ReactTypes';
+import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {HookFlags} from './ReactHookEffectTags';
@@ -50,7 +45,6 @@ import {
   intersectLanes,
   isTransitionLane,
   markRootEntangled,
-  markRootMutableRead,
   NoTimestamp,
 } from './ReactFiberLane.new';
 import {
@@ -102,12 +96,6 @@ import {
   makeClientIdInDEV,
   makeOpaqueHydratingObject,
 } from './ReactFiberHostConfig';
-import {
-  getWorkInProgressVersion,
-  markSourceAsDirty,
-  setWorkInProgressVersion,
-  warnAboutMultipleRenderersDEV,
-} from './ReactMutableSource.new';
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
@@ -118,7 +106,6 @@ import {
   entangleTransitions,
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
-import {getIsStrictModeForDevtools} from './ReactFiberReconciler.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@@ -948,322 +935,6 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
-type MutableSourceMemoizedState<Source, Snapshot> = {|
-  refs: {
-    getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-    setSnapshot: Snapshot => void,
-  },
-  source: MutableSource<any>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-|};
-
-function readFromUnsubscribedMutableSource<Source, Snapshot>(
-  root: FiberRoot,
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-): Snapshot {
-  if (__DEV__) {
-    warnAboutMultipleRenderersDEV(source);
-  }
-
-  const getVersion = source._getVersion;
-  const version = getVersion(source._source);
-
-  // Is it safe for this component to read from this source during the current render?
-  let isSafeToReadFromSource = false;
-
-  // Check the version first.
-  // If this render has already been started with a specific version,
-  // we can use it alone to determine if we can safely read from the source.
-  const currentRenderVersion = getWorkInProgressVersion(source);
-  if (currentRenderVersion !== null) {
-    // It's safe to read if the store hasn't been mutated since the last time
-    // we read something.
-    isSafeToReadFromSource = currentRenderVersion === version;
-  } else {
-    // If there's no version, then this is the first time we've read from the
-    // source during the current render pass, so we need to do a bit more work.
-    // What we need to determine is if there are any hooks that already
-    // subscribed to the source, and if so, whether there are any pending
-    // mutations that haven't been synchronized yet.
-    //
-    // If there are no pending mutations, then `root.mutableReadLanes` will be
-    // empty, and we know we can safely read.
-    //
-    // If there *are* pending mutations, we may still be able to safely read
-    // if the currently rendering lanes are inclusive of the pending mutation
-    // lanes, since that guarantees that the value we're about to read from
-    // the source is consistent with the values that we read during the most
-    // recent mutation.
-    isSafeToReadFromSource = isSubsetOfLanes(
-      renderLanes,
-      root.mutableReadLanes,
-    );
-
-    if (isSafeToReadFromSource) {
-      // If it's safe to read from this source during the current render,
-      // store the version in case other components read from it.
-      // A changed version number will let those components know to throw and restart the render.
-      setWorkInProgressVersion(source, version);
-    }
-  }
-
-  if (isSafeToReadFromSource) {
-    const snapshot = getSnapshot(source._source);
-    if (__DEV__) {
-      if (typeof snapshot === 'function') {
-        console.error(
-          'Mutable source should not return a function as the snapshot value. ' +
-            'Functions may close over mutable values and cause tearing.',
-        );
-      }
-    }
-    return snapshot;
-  } else {
-    // This handles the special case of a mutable source being shared between renderers.
-    // In that case, if the source is mutated between the first and second renderer,
-    // The second renderer don't know that it needs to reset the WIP version during unwind,
-    // (because the hook only marks sources as dirty if it's written to their WIP version).
-    // That would cause this tear check to throw again and eventually be visible to the user.
-    // We can avoid this infinite loop by explicitly marking the source as dirty.
-    //
-    // This can lead to tearing in the first renderer when it resumes,
-    // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
-    markSourceAsDirty(source);
-
-    // Intentioally throw an error to force React to retry synchronously. During
-    // the synchronous retry, it will block interleaved mutations, so we should
-    // get a consistent read. Therefore, the following error should never be
-    // visible to the user.
-    //
-    // If it were to become visible to the user, it suggests one of two things:
-    // a bug in React, or (more likely), a mutation during the render phase that
-    // caused the second re-render attempt to be different from the first.
-    //
-    // We know it's the second case if the logs are currently disabled. So in
-    // dev, we can present a more accurate error message.
-    if (__DEV__) {
-      // eslint-disable-next-line react-internal/no-production-logging
-      if (getIsStrictModeForDevtools()) {
-        // If getIsStrictModeForDevtools is true, this is the dev-only double render
-        // This is only reachable if there was a mutation during render. Show a helpful
-        // error message.
-        //
-        // Something interesting to note: because we only double render in
-        // development, this error will never happen during production. This is
-        // actually true of all errors that occur during a double render,
-        // because if the first render had thrown, we would have exited the
-        // begin phase without double rendering. We should consider suppressing
-        // any error from a double render (with a warning) to more closely match
-        // the production behavior.
-        const componentName = getComponentNameFromFiber(
-          currentlyRenderingFiber,
-        );
-        invariant(
-          false,
-          'A mutable source was mutated while the %s component was rendering. ' +
-            'This is not supported. Move any mutations into event handlers ' +
-            'or effects.',
-          componentName,
-        );
-      }
-    }
-
-    // We expect this error not to be thrown during the synchronous retry,
-    // because we blocked interleaved mutations.
-    invariant(
-      false,
-      'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
-    );
-  }
-}
-
-function useMutableSource<Source, Snapshot>(
-  hook: Hook,
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
-
-  const getVersion = source._getVersion;
-  const version = getVersion(source._source);
-
-  const dispatcher = ReactCurrentDispatcher.current;
-
-  // eslint-disable-next-line prefer-const
-  let [currentSnapshot, setSnapshot] = dispatcher.useState(() =>
-    readFromUnsubscribedMutableSource(root, source, getSnapshot),
-  );
-  let snapshot = currentSnapshot;
-
-  // Grab a handle to the state hook as well.
-  // We use it to clear the pending update queue if we have a new source.
-  const stateHook = ((workInProgressHook: any): Hook);
-
-  const memoizedState = ((hook.memoizedState: any): MutableSourceMemoizedState<
-    Source,
-    Snapshot,
-  >);
-  const refs = memoizedState.refs;
-  const prevGetSnapshot = refs.getSnapshot;
-  const prevSource = memoizedState.source;
-  const prevSubscribe = memoizedState.subscribe;
-
-  const fiber = currentlyRenderingFiber;
-
-  hook.memoizedState = ({
-    refs,
-    source,
-    subscribe,
-  }: MutableSourceMemoizedState<Source, Snapshot>);
-
-  // Sync the values needed by our subscription handler after each commit.
-  dispatcher.useEffect(() => {
-    refs.getSnapshot = getSnapshot;
-
-    // Normally the dispatch function for a state hook never changes,
-    // but this hook recreates the queue in certain cases  to avoid updates from stale sources.
-    // handleChange() below needs to reference the dispatch function without re-subscribing,
-    // so we use a ref to ensure that it always has the latest version.
-    refs.setSnapshot = setSnapshot;
-
-    // Check for a possible change between when we last rendered now.
-    const maybeNewVersion = getVersion(source._source);
-    if (!is(version, maybeNewVersion)) {
-      const maybeNewSnapshot = getSnapshot(source._source);
-      if (__DEV__) {
-        if (typeof maybeNewSnapshot === 'function') {
-          console.error(
-            'Mutable source should not return a function as the snapshot value. ' +
-              'Functions may close over mutable values and cause tearing.',
-          );
-        }
-      }
-
-      if (!is(snapshot, maybeNewSnapshot)) {
-        setSnapshot(maybeNewSnapshot);
-
-        const lane = requestUpdateLane(fiber);
-        markRootMutableRead(root, lane);
-      }
-      // If the source mutated between render and now,
-      // there may be state updates already scheduled from the old source.
-      // Entangle the updates so that they render in the same batch.
-      markRootEntangled(root, root.mutableReadLanes);
-    }
-  }, [getSnapshot, source, subscribe]);
-
-  // If we got a new source or subscribe function, re-subscribe in a passive effect.
-  dispatcher.useEffect(() => {
-    const handleChange = () => {
-      const latestGetSnapshot = refs.getSnapshot;
-      const latestSetSnapshot = refs.setSnapshot;
-
-      try {
-        latestSetSnapshot(latestGetSnapshot(source._source));
-
-        // Record a pending mutable source update with the same expiration time.
-        const lane = requestUpdateLane(fiber);
-
-        markRootMutableRead(root, lane);
-      } catch (error) {
-        // A selector might throw after a source mutation.
-        // e.g. it might try to read from a part of the store that no longer exists.
-        // In this case we should still schedule an update with React.
-        // Worst case the selector will throw again and then an error boundary will handle it.
-        latestSetSnapshot(
-          (() => {
-            throw error;
-          }: any),
-        );
-      }
-    };
-
-    const unsubscribe = subscribe(source._source, handleChange);
-    if (__DEV__) {
-      if (typeof unsubscribe !== 'function') {
-        console.error(
-          'Mutable source subscribe function must return an unsubscribe function.',
-        );
-      }
-    }
-
-    return unsubscribe;
-  }, [source, subscribe]);
-
-  // If any of the inputs to useMutableSource change, reading is potentially unsafe.
-  //
-  // If either the source or the subscription have changed we can't can't trust the update queue.
-  // Maybe the source changed in a way that the old subscription ignored but the new one depends on.
-  //
-  // If the getSnapshot function changed, we also shouldn't rely on the update queue.
-  // It's possible that the underlying source was mutated between the when the last "change" event fired,
-  // and when the current render (with the new getSnapshot function) is processed.
-  //
-  // In both cases, we need to throw away pending updates (since they are no longer relevant)
-  // and treat reading from the source as we do in the mount case.
-  if (
-    !is(prevGetSnapshot, getSnapshot) ||
-    !is(prevSource, source) ||
-    !is(prevSubscribe, subscribe)
-  ) {
-    // Create a new queue and setState method,
-    // So if there are interleaved updates, they get pushed to the older queue.
-    // When this becomes current, the previous queue and dispatch method will be discarded,
-    // including any interleaving updates that occur.
-    const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
-      pending: null,
-      interleaved: null,
-      lanes: NoLanes,
-      dispatch: null,
-      lastRenderedReducer: basicStateReducer,
-      lastRenderedState: snapshot,
-    };
-    newQueue.dispatch = setSnapshot = (dispatchAction.bind(
-      null,
-      currentlyRenderingFiber,
-      newQueue,
-    ): any);
-    stateHook.queue = newQueue;
-    stateHook.baseQueue = null;
-    snapshot = readFromUnsubscribedMutableSource(root, source, getSnapshot);
-    stateHook.memoizedState = stateHook.baseState = snapshot;
-  }
-
-  return snapshot;
-}
-
-function mountMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  const hook = mountWorkInProgressHook();
-  hook.memoizedState = ({
-    refs: {
-      getSnapshot,
-      setSnapshot: (null: any),
-    },
-    source,
-    subscribe,
-  }: MutableSourceMemoizedState<Source, Snapshot>);
-  return useMutableSource(hook, source, getSnapshot, subscribe);
-}
-
-function updateMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  const hook = updateWorkInProgressHook();
-  return useMutableSource(hook, source, getSnapshot, subscribe);
-}
-
 function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -2334,7 +2005,6 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useDebugValue: throwInvalidHookError,
   useDeferredValue: throwInvalidHookError,
   useTransition: throwInvalidHookError,
-  useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
 
@@ -2361,7 +2031,6 @@ const HooksDispatcherOnMount: Dispatcher = {
   useDebugValue: mountDebugValue,
   useDeferredValue: mountDeferredValue,
   useTransition: mountTransition,
-  useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
 
@@ -2388,7 +2057,6 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: updateDeferredValue,
   useTransition: updateTransition,
-  useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
 
@@ -2415,7 +2083,6 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
-  useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
 
@@ -2565,15 +2232,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      mountHookTypesDev();
-      return mountMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2705,15 +2363,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      updateHookTypesDev();
-      return mountMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2845,15 +2494,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2986,15 +2626,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3140,16 +2771,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      warnInvalidHookAccess();
-      mountHookTypesDev();
-      return mountMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3297,16 +2918,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3455,16 +3066,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index a03dcd6ca2db..016b208d30d9 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -7,12 +7,7 @@
  * @flow
  */
 
-import type {
-  MutableSource,
-  MutableSourceGetSnapshotFn,
-  MutableSourceSubscribeFn,
-  ReactContext,
-} from 'shared/ReactTypes';
+import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {HookFlags} from './ReactHookEffectTags';
@@ -50,7 +45,6 @@ import {
   intersectLanes,
   isTransitionLane,
   markRootEntangled,
-  markRootMutableRead,
   NoTimestamp,
 } from './ReactFiberLane.old';
 import {
@@ -102,12 +96,6 @@ import {
   makeClientIdInDEV,
   makeOpaqueHydratingObject,
 } from './ReactFiberHostConfig';
-import {
-  getWorkInProgressVersion,
-  markSourceAsDirty,
-  setWorkInProgressVersion,
-  warnAboutMultipleRenderersDEV,
-} from './ReactMutableSource.old';
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
@@ -118,7 +106,6 @@ import {
   entangleTransitions,
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
-import {getIsStrictModeForDevtools} from './ReactFiberReconciler.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@@ -948,322 +935,6 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
-type MutableSourceMemoizedState<Source, Snapshot> = {|
-  refs: {
-    getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-    setSnapshot: Snapshot => void,
-  },
-  source: MutableSource<any>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-|};
-
-function readFromUnsubscribedMutableSource<Source, Snapshot>(
-  root: FiberRoot,
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-): Snapshot {
-  if (__DEV__) {
-    warnAboutMultipleRenderersDEV(source);
-  }
-
-  const getVersion = source._getVersion;
-  const version = getVersion(source._source);
-
-  // Is it safe for this component to read from this source during the current render?
-  let isSafeToReadFromSource = false;
-
-  // Check the version first.
-  // If this render has already been started with a specific version,
-  // we can use it alone to determine if we can safely read from the source.
-  const currentRenderVersion = getWorkInProgressVersion(source);
-  if (currentRenderVersion !== null) {
-    // It's safe to read if the store hasn't been mutated since the last time
-    // we read something.
-    isSafeToReadFromSource = currentRenderVersion === version;
-  } else {
-    // If there's no version, then this is the first time we've read from the
-    // source during the current render pass, so we need to do a bit more work.
-    // What we need to determine is if there are any hooks that already
-    // subscribed to the source, and if so, whether there are any pending
-    // mutations that haven't been synchronized yet.
-    //
-    // If there are no pending mutations, then `root.mutableReadLanes` will be
-    // empty, and we know we can safely read.
-    //
-    // If there *are* pending mutations, we may still be able to safely read
-    // if the currently rendering lanes are inclusive of the pending mutation
-    // lanes, since that guarantees that the value we're about to read from
-    // the source is consistent with the values that we read during the most
-    // recent mutation.
-    isSafeToReadFromSource = isSubsetOfLanes(
-      renderLanes,
-      root.mutableReadLanes,
-    );
-
-    if (isSafeToReadFromSource) {
-      // If it's safe to read from this source during the current render,
-      // store the version in case other components read from it.
-      // A changed version number will let those components know to throw and restart the render.
-      setWorkInProgressVersion(source, version);
-    }
-  }
-
-  if (isSafeToReadFromSource) {
-    const snapshot = getSnapshot(source._source);
-    if (__DEV__) {
-      if (typeof snapshot === 'function') {
-        console.error(
-          'Mutable source should not return a function as the snapshot value. ' +
-            'Functions may close over mutable values and cause tearing.',
-        );
-      }
-    }
-    return snapshot;
-  } else {
-    // This handles the special case of a mutable source being shared between renderers.
-    // In that case, if the source is mutated between the first and second renderer,
-    // The second renderer don't know that it needs to reset the WIP version during unwind,
-    // (because the hook only marks sources as dirty if it's written to their WIP version).
-    // That would cause this tear check to throw again and eventually be visible to the user.
-    // We can avoid this infinite loop by explicitly marking the source as dirty.
-    //
-    // This can lead to tearing in the first renderer when it resumes,
-    // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
-    markSourceAsDirty(source);
-
-    // Intentioally throw an error to force React to retry synchronously. During
-    // the synchronous retry, it will block interleaved mutations, so we should
-    // get a consistent read. Therefore, the following error should never be
-    // visible to the user.
-    //
-    // If it were to become visible to the user, it suggests one of two things:
-    // a bug in React, or (more likely), a mutation during the render phase that
-    // caused the second re-render attempt to be different from the first.
-    //
-    // We know it's the second case if the logs are currently disabled. So in
-    // dev, we can present a more accurate error message.
-    if (__DEV__) {
-      // eslint-disable-next-line react-internal/no-production-logging
-      if (getIsStrictModeForDevtools()) {
-        // If getIsStrictModeForDevtools is true, this is the dev-only double render
-        // This is only reachable if there was a mutation during render. Show a helpful
-        // error message.
-        //
-        // Something interesting to note: because we only double render in
-        // development, this error will never happen during production. This is
-        // actually true of all errors that occur during a double render,
-        // because if the first render had thrown, we would have exited the
-        // begin phase without double rendering. We should consider suppressing
-        // any error from a double render (with a warning) to more closely match
-        // the production behavior.
-        const componentName = getComponentNameFromFiber(
-          currentlyRenderingFiber,
-        );
-        invariant(
-          false,
-          'A mutable source was mutated while the %s component was rendering. ' +
-            'This is not supported. Move any mutations into event handlers ' +
-            'or effects.',
-          componentName,
-        );
-      }
-    }
-
-    // We expect this error not to be thrown during the synchronous retry,
-    // because we blocked interleaved mutations.
-    invariant(
-      false,
-      'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
-    );
-  }
-}
-
-function useMutableSource<Source, Snapshot>(
-  hook: Hook,
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
-
-  const getVersion = source._getVersion;
-  const version = getVersion(source._source);
-
-  const dispatcher = ReactCurrentDispatcher.current;
-
-  // eslint-disable-next-line prefer-const
-  let [currentSnapshot, setSnapshot] = dispatcher.useState(() =>
-    readFromUnsubscribedMutableSource(root, source, getSnapshot),
-  );
-  let snapshot = currentSnapshot;
-
-  // Grab a handle to the state hook as well.
-  // We use it to clear the pending update queue if we have a new source.
-  const stateHook = ((workInProgressHook: any): Hook);
-
-  const memoizedState = ((hook.memoizedState: any): MutableSourceMemoizedState<
-    Source,
-    Snapshot,
-  >);
-  const refs = memoizedState.refs;
-  const prevGetSnapshot = refs.getSnapshot;
-  const prevSource = memoizedState.source;
-  const prevSubscribe = memoizedState.subscribe;
-
-  const fiber = currentlyRenderingFiber;
-
-  hook.memoizedState = ({
-    refs,
-    source,
-    subscribe,
-  }: MutableSourceMemoizedState<Source, Snapshot>);
-
-  // Sync the values needed by our subscription handler after each commit.
-  dispatcher.useEffect(() => {
-    refs.getSnapshot = getSnapshot;
-
-    // Normally the dispatch function for a state hook never changes,
-    // but this hook recreates the queue in certain cases  to avoid updates from stale sources.
-    // handleChange() below needs to reference the dispatch function without re-subscribing,
-    // so we use a ref to ensure that it always has the latest version.
-    refs.setSnapshot = setSnapshot;
-
-    // Check for a possible change between when we last rendered now.
-    const maybeNewVersion = getVersion(source._source);
-    if (!is(version, maybeNewVersion)) {
-      const maybeNewSnapshot = getSnapshot(source._source);
-      if (__DEV__) {
-        if (typeof maybeNewSnapshot === 'function') {
-          console.error(
-            'Mutable source should not return a function as the snapshot value. ' +
-              'Functions may close over mutable values and cause tearing.',
-          );
-        }
-      }
-
-      if (!is(snapshot, maybeNewSnapshot)) {
-        setSnapshot(maybeNewSnapshot);
-
-        const lane = requestUpdateLane(fiber);
-        markRootMutableRead(root, lane);
-      }
-      // If the source mutated between render and now,
-      // there may be state updates already scheduled from the old source.
-      // Entangle the updates so that they render in the same batch.
-      markRootEntangled(root, root.mutableReadLanes);
-    }
-  }, [getSnapshot, source, subscribe]);
-
-  // If we got a new source or subscribe function, re-subscribe in a passive effect.
-  dispatcher.useEffect(() => {
-    const handleChange = () => {
-      const latestGetSnapshot = refs.getSnapshot;
-      const latestSetSnapshot = refs.setSnapshot;
-
-      try {
-        latestSetSnapshot(latestGetSnapshot(source._source));
-
-        // Record a pending mutable source update with the same expiration time.
-        const lane = requestUpdateLane(fiber);
-
-        markRootMutableRead(root, lane);
-      } catch (error) {
-        // A selector might throw after a source mutation.
-        // e.g. it might try to read from a part of the store that no longer exists.
-        // In this case we should still schedule an update with React.
-        // Worst case the selector will throw again and then an error boundary will handle it.
-        latestSetSnapshot(
-          (() => {
-            throw error;
-          }: any),
-        );
-      }
-    };
-
-    const unsubscribe = subscribe(source._source, handleChange);
-    if (__DEV__) {
-      if (typeof unsubscribe !== 'function') {
-        console.error(
-          'Mutable source subscribe function must return an unsubscribe function.',
-        );
-      }
-    }
-
-    return unsubscribe;
-  }, [source, subscribe]);
-
-  // If any of the inputs to useMutableSource change, reading is potentially unsafe.
-  //
-  // If either the source or the subscription have changed we can't can't trust the update queue.
-  // Maybe the source changed in a way that the old subscription ignored but the new one depends on.
-  //
-  // If the getSnapshot function changed, we also shouldn't rely on the update queue.
-  // It's possible that the underlying source was mutated between the when the last "change" event fired,
-  // and when the current render (with the new getSnapshot function) is processed.
-  //
-  // In both cases, we need to throw away pending updates (since they are no longer relevant)
-  // and treat reading from the source as we do in the mount case.
-  if (
-    !is(prevGetSnapshot, getSnapshot) ||
-    !is(prevSource, source) ||
-    !is(prevSubscribe, subscribe)
-  ) {
-    // Create a new queue and setState method,
-    // So if there are interleaved updates, they get pushed to the older queue.
-    // When this becomes current, the previous queue and dispatch method will be discarded,
-    // including any interleaving updates that occur.
-    const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
-      pending: null,
-      interleaved: null,
-      lanes: NoLanes,
-      dispatch: null,
-      lastRenderedReducer: basicStateReducer,
-      lastRenderedState: snapshot,
-    };
-    newQueue.dispatch = setSnapshot = (dispatchAction.bind(
-      null,
-      currentlyRenderingFiber,
-      newQueue,
-    ): any);
-    stateHook.queue = newQueue;
-    stateHook.baseQueue = null;
-    snapshot = readFromUnsubscribedMutableSource(root, source, getSnapshot);
-    stateHook.memoizedState = stateHook.baseState = snapshot;
-  }
-
-  return snapshot;
-}
-
-function mountMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  const hook = mountWorkInProgressHook();
-  hook.memoizedState = ({
-    refs: {
-      getSnapshot,
-      setSnapshot: (null: any),
-    },
-    source,
-    subscribe,
-  }: MutableSourceMemoizedState<Source, Snapshot>);
-  return useMutableSource(hook, source, getSnapshot, subscribe);
-}
-
-function updateMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  const hook = updateWorkInProgressHook();
-  return useMutableSource(hook, source, getSnapshot, subscribe);
-}
-
 function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -2334,7 +2005,6 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useDebugValue: throwInvalidHookError,
   useDeferredValue: throwInvalidHookError,
   useTransition: throwInvalidHookError,
-  useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
 
@@ -2361,7 +2031,6 @@ const HooksDispatcherOnMount: Dispatcher = {
   useDebugValue: mountDebugValue,
   useDeferredValue: mountDeferredValue,
   useTransition: mountTransition,
-  useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
 
@@ -2388,7 +2057,6 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: updateDeferredValue,
   useTransition: updateTransition,
-  useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
 
@@ -2415,7 +2083,6 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
-  useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
 
@@ -2565,15 +2232,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      mountHookTypesDev();
-      return mountMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2705,15 +2363,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      updateHookTypesDev();
-      return mountMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2845,15 +2494,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2986,15 +2626,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3140,16 +2771,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      warnInvalidHookAccess();
-      mountHookTypesDev();
-      return mountMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3297,16 +2918,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3455,16 +3066,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
-    useMutableSource<Source, Snapshot>(
-      source: MutableSource<Source>,
-      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-    ): Snapshot {
-      currentHookNameInDev = 'useMutableSource';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateMutableSource(source, getSnapshot, subscribe);
-    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index ad124a432a4a..15d8e7ff019d 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -283,9 +283,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // time it takes to show the final state, which is what they are actually
   // waiting for.
   //
-  // For those exceptions where entanglement is semantically important, like
-  // useMutableSource, we should ensure that there is no partial work at the
-  // time we apply the entanglement.
+  // 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 entangledLanes = root.entangledLanes;
   if (entangledLanes !== NoLanes) {
     const entanglements = root.entanglements;
@@ -617,10 +617,6 @@ export function markRootPinged(
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
 }
 
-export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
-  root.mutableReadLanes |= updateLane & root.pendingLanes;
-}
-
 export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   const noLongerPendingLanes = root.pendingLanes & ~remainingLanes;
 
@@ -631,7 +627,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.pingedLanes = 0;
 
   root.expiredLanes &= remainingLanes;
-  root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4a064a384651..49927abb20bb 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -283,9 +283,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // time it takes to show the final state, which is what they are actually
   // waiting for.
   //
-  // For those exceptions where entanglement is semantically important, like
-  // useMutableSource, we should ensure that there is no partial work at the
-  // time we apply the entanglement.
+  // 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 entangledLanes = root.entangledLanes;
   if (entangledLanes !== NoLanes) {
     const entanglements = root.entanglements;
@@ -617,10 +617,6 @@ export function markRootPinged(
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
 }
 
-export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
-  root.mutableReadLanes |= updateLane & root.pendingLanes;
-}
-
 export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   const noLongerPendingLanes = root.pendingLanes & ~remainingLanes;
 
@@ -631,7 +627,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.pingedLanes = 0;
 
   root.expiredLanes &= remainingLanes;
-  root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 033b9eb0adbe..ae029cd01580 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -46,7 +46,6 @@ import {
   findBoundingRects as findBoundingRects_old,
   focusWithin as focusWithin_old,
   observeVisibleRects as observeVisibleRects_old,
-  registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdatePriority as getCurrentUpdatePriority_old,
   getIsStrictModeForDevtools as getIsStrictModeForDevtools_old,
@@ -85,7 +84,6 @@ import {
   findBoundingRects as findBoundingRects_new,
   focusWithin as focusWithin_new,
   observeVisibleRects as observeVisibleRects_new,
-  registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdatePriority as getCurrentUpdatePriority_new,
   getIsStrictModeForDevtools as getIsStrictModeForDevtools_new,
@@ -188,9 +186,6 @@ export const focusWithin = enableNewReconciler
 export const observeVisibleRects = enableNewReconciler
   ? observeVisibleRects_new
   : observeVisibleRects_old;
-export const registerMutableSourceForHydration = enableNewReconciler
-  ? registerMutableSourceForHydration_new
-  : registerMutableSourceForHydration_old;
 export const runWithPriority = enableNewReconciler
   ? runWithPriority_new
   : runWithPriority_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 06acfa11cbc3..4219fdc72cf0 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -93,7 +93,6 @@ import {
 } from './ReactFiberHotReloading.new';
 import {markRenderScheduled} from './SchedulingProfiler';
 import ReactVersion from 'shared/ReactVersion';
-export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {
   createComponentSelector,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 5a75a312c42b..84bcb7e6e0d1 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -93,7 +93,6 @@ import {
 } from './ReactFiberHotReloading.old';
 import {markRenderScheduled} from './SchedulingProfiler';
 import ReactVersion from 'shared/ReactVersion';
-export {registerMutableSourceForHydration} from './ReactMutableSource.old';
 export {createPortal} from './ReactPortal';
 export {
   createComponentSelector,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 5e1f8275b694..d69d2d77e5df 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -49,7 +49,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
   this.expiredLanes = NoLanes;
-  this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
   this.entangledLanes = NoLanes;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 413a87fbcffc..8469d6c85b50 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -49,7 +49,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
   this.expiredLanes = NoLanes;
-  this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
   this.entangledLanes = NoLanes;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 152837286f5d..cb0d90e1a7f5 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -13,7 +13,6 @@ import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
-import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
   ClassComponent,
   HostRoot,
@@ -83,7 +82,6 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
-      resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
       invariant(
         (flags & DidCapture) === NoFlags,
@@ -179,7 +177,6 @@ function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
-      resetMutableSourceWorkInProgressVersions();
       break;
     }
     case HostComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 88861db778be..8fb63177c01e 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -13,7 +13,6 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
 
-import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 import {
   ClassComponent,
   HostRoot,
@@ -83,7 +82,6 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
-      resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
       invariant(
         (flags & DidCapture) === NoFlags,
@@ -179,7 +177,6 @@ function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
-      resetMutableSourceWorkInProgressVersions();
       break;
     }
     case HostComponent: {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index f07fd4634b3d..692ec27bd7e8 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -8,14 +8,7 @@
  */
 
 import type {Source} from 'shared/ReactElementType';
-import type {
-  RefObject,
-  ReactContext,
-  MutableSourceSubscribeFn,
-  MutableSourceGetSnapshotFn,
-  MutableSourceVersion,
-  MutableSource,
-} from 'shared/ReactTypes';
+import type {RefObject, ReactContext} from 'shared/ReactTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -41,7 +34,6 @@ export type HookType =
   | 'useDebugValue'
   | 'useDeferredValue'
   | 'useTransition'
-  | 'useMutableSource'
   | 'useSyncExternalStore'
   | 'useOpaqueIdentifier'
   | 'useCacheRefresh';
@@ -214,11 +206,6 @@ type BaseFiberRootProperties = {|
   // Determines if we should attempt to hydrate on the initial mount
   +hydrate: boolean,
 
-  // Used by useMutableSource hook to avoid tearing during hydration.
-  mutableSourceEagerHydrationData?: Array<
-    MutableSource<any> | MutableSourceVersion,
-  > | null,
-
   // Node returned by Scheduler.scheduleCallback. Represents the next rendering
   // task that the root will work on.
   callbackNode: *,
@@ -230,7 +217,6 @@ type BaseFiberRootProperties = {|
   suspendedLanes: Lanes,
   pingedLanes: Lanes,
   expiredLanes: Lanes,
-  mutableReadLanes: Lanes,
 
   finishedLanes: Lanes,
 
@@ -305,11 +291,6 @@ export type Dispatcher = {|
   useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
   useDeferredValue<T>(value: T): T,
   useTransition(): [boolean, (() => void) => void],
-  useMutableSource<Source, Snapshot>(
-    source: MutableSource<Source>,
-    getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-    subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-  ): Snapshot,
   useSyncExternalStore<T>(
     subscribe: (() => void) => () => void,
     getSnapshot: () => T,
diff --git a/packages/react-reconciler/src/ReactMutableSource.new.js b/packages/react-reconciler/src/ReactMutableSource.new.js
deleted file mode 100644
index 61809d33f800..000000000000
--- a/packages/react-reconciler/src/ReactMutableSource.new.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {MutableSource, MutableSourceVersion} from 'shared/ReactTypes';
-import type {FiberRoot} from './ReactInternalTypes';
-
-import {isPrimaryRenderer} from './ReactFiberHostConfig';
-
-// Work in progress version numbers only apply to a single render,
-// and should be reset before starting a new render.
-// This tracks which mutable sources need to be reset after a render.
-const workInProgressSources: Array<MutableSource<any>> = [];
-
-let rendererSigil;
-if (__DEV__) {
-  // Used to detect multiple renderers using the same mutable source.
-  rendererSigil = {};
-}
-
-export function markSourceAsDirty(mutableSource: MutableSource<any>): void {
-  workInProgressSources.push(mutableSource);
-}
-
-export function resetWorkInProgressVersions(): void {
-  for (let i = 0; i < workInProgressSources.length; i++) {
-    const mutableSource = workInProgressSources[i];
-    if (isPrimaryRenderer) {
-      mutableSource._workInProgressVersionPrimary = null;
-    } else {
-      mutableSource._workInProgressVersionSecondary = null;
-    }
-  }
-  workInProgressSources.length = 0;
-}
-
-export function getWorkInProgressVersion(
-  mutableSource: MutableSource<any>,
-): null | MutableSourceVersion {
-  if (isPrimaryRenderer) {
-    return mutableSource._workInProgressVersionPrimary;
-  } else {
-    return mutableSource._workInProgressVersionSecondary;
-  }
-}
-
-export function setWorkInProgressVersion(
-  mutableSource: MutableSource<any>,
-  version: MutableSourceVersion,
-): void {
-  if (isPrimaryRenderer) {
-    mutableSource._workInProgressVersionPrimary = version;
-  } else {
-    mutableSource._workInProgressVersionSecondary = version;
-  }
-  workInProgressSources.push(mutableSource);
-}
-
-export function warnAboutMultipleRenderersDEV(
-  mutableSource: MutableSource<any>,
-): void {
-  if (__DEV__) {
-    if (isPrimaryRenderer) {
-      if (mutableSource._currentPrimaryRenderer == null) {
-        mutableSource._currentPrimaryRenderer = rendererSigil;
-      } else if (mutableSource._currentPrimaryRenderer !== rendererSigil) {
-        console.error(
-          'Detected multiple renderers concurrently rendering the ' +
-            'same mutable source. This is currently unsupported.',
-        );
-      }
-    } else {
-      if (mutableSource._currentSecondaryRenderer == null) {
-        mutableSource._currentSecondaryRenderer = rendererSigil;
-      } else if (mutableSource._currentSecondaryRenderer !== rendererSigil) {
-        console.error(
-          'Detected multiple renderers concurrently rendering the ' +
-            'same mutable source. This is currently unsupported.',
-        );
-      }
-    }
-  }
-}
-
-// Eager reads the version of a mutable source and stores it on the root.
-// This ensures that the version used for server rendering matches the one
-// that is eventually read during hydration.
-// If they don't match there's a potential tear and a full deopt render is required.
-export function registerMutableSourceForHydration(
-  root: FiberRoot,
-  mutableSource: MutableSource<any>,
-): void {
-  const getVersion = mutableSource._getVersion;
-  const version = getVersion(mutableSource._source);
-
-  // TODO Clear this data once all pending hydration work is finished.
-  // Retaining it forever may interfere with GC.
-  if (root.mutableSourceEagerHydrationData == null) {
-    root.mutableSourceEagerHydrationData = [mutableSource, version];
-  } else {
-    root.mutableSourceEagerHydrationData.push(mutableSource, version);
-  }
-}
diff --git a/packages/react-reconciler/src/ReactMutableSource.old.js b/packages/react-reconciler/src/ReactMutableSource.old.js
deleted file mode 100644
index 61809d33f800..000000000000
--- a/packages/react-reconciler/src/ReactMutableSource.old.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {MutableSource, MutableSourceVersion} from 'shared/ReactTypes';
-import type {FiberRoot} from './ReactInternalTypes';
-
-import {isPrimaryRenderer} from './ReactFiberHostConfig';
-
-// Work in progress version numbers only apply to a single render,
-// and should be reset before starting a new render.
-// This tracks which mutable sources need to be reset after a render.
-const workInProgressSources: Array<MutableSource<any>> = [];
-
-let rendererSigil;
-if (__DEV__) {
-  // Used to detect multiple renderers using the same mutable source.
-  rendererSigil = {};
-}
-
-export function markSourceAsDirty(mutableSource: MutableSource<any>): void {
-  workInProgressSources.push(mutableSource);
-}
-
-export function resetWorkInProgressVersions(): void {
-  for (let i = 0; i < workInProgressSources.length; i++) {
-    const mutableSource = workInProgressSources[i];
-    if (isPrimaryRenderer) {
-      mutableSource._workInProgressVersionPrimary = null;
-    } else {
-      mutableSource._workInProgressVersionSecondary = null;
-    }
-  }
-  workInProgressSources.length = 0;
-}
-
-export function getWorkInProgressVersion(
-  mutableSource: MutableSource<any>,
-): null | MutableSourceVersion {
-  if (isPrimaryRenderer) {
-    return mutableSource._workInProgressVersionPrimary;
-  } else {
-    return mutableSource._workInProgressVersionSecondary;
-  }
-}
-
-export function setWorkInProgressVersion(
-  mutableSource: MutableSource<any>,
-  version: MutableSourceVersion,
-): void {
-  if (isPrimaryRenderer) {
-    mutableSource._workInProgressVersionPrimary = version;
-  } else {
-    mutableSource._workInProgressVersionSecondary = version;
-  }
-  workInProgressSources.push(mutableSource);
-}
-
-export function warnAboutMultipleRenderersDEV(
-  mutableSource: MutableSource<any>,
-): void {
-  if (__DEV__) {
-    if (isPrimaryRenderer) {
-      if (mutableSource._currentPrimaryRenderer == null) {
-        mutableSource._currentPrimaryRenderer = rendererSigil;
-      } else if (mutableSource._currentPrimaryRenderer !== rendererSigil) {
-        console.error(
-          'Detected multiple renderers concurrently rendering the ' +
-            'same mutable source. This is currently unsupported.',
-        );
-      }
-    } else {
-      if (mutableSource._currentSecondaryRenderer == null) {
-        mutableSource._currentSecondaryRenderer = rendererSigil;
-      } else if (mutableSource._currentSecondaryRenderer !== rendererSigil) {
-        console.error(
-          'Detected multiple renderers concurrently rendering the ' +
-            'same mutable source. This is currently unsupported.',
-        );
-      }
-    }
-  }
-}
-
-// Eager reads the version of a mutable source and stores it on the root.
-// This ensures that the version used for server rendering matches the one
-// that is eventually read during hydration.
-// If they don't match there's a potential tear and a full deopt render is required.
-export function registerMutableSourceForHydration(
-  root: FiberRoot,
-  mutableSource: MutableSource<any>,
-): void {
-  const getVersion = mutableSource._getVersion;
-  const version = getVersion(mutableSource._source);
-
-  // TODO Clear this data once all pending hydration work is finished.
-  // Retaining it forever may interfere with GC.
-  if (root.mutableSourceEagerHydrationData == null) {
-    root.mutableSourceEagerHydrationData = [mutableSource, version];
-  } else {
-    root.mutableSourceEagerHydrationData.push(mutableSource, version);
-  }
-}
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
deleted file mode 100644
index c9988b4fc28a..000000000000
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ /dev/null
@@ -1,2098 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- * @jest-environment node
- */
-
-/* eslint-disable no-func-assign */
-
-'use strict';
-
-let React;
-let ReactFeatureFlags;
-let ReactNoop;
-let Scheduler;
-let act;
-let createMutableSource;
-let useMutableSource;
-
-function loadModules() {
-  jest.resetModules();
-  jest.useFakeTimers();
-
-  ReactFeatureFlags = require('shared/ReactFeatureFlags');
-  ReactFeatureFlags.enableProfilerTimer = true;
-
-  React = require('react');
-  ReactNoop = require('react-noop-renderer');
-  Scheduler = require('scheduler');
-  act = require('jest-react').act;
-
-  // Stable entrypoints export with "unstable_" prefix.
-  createMutableSource =
-    React.createMutableSource || React.unstable_createMutableSource;
-  useMutableSource = React.useMutableSource || React.unstable_useMutableSource;
-}
-
-describe('useMutableSource', () => {
-  const defaultGetSnapshot = source => source.value;
-  const defaultSubscribe = (source, callback) => source.subscribe(callback);
-
-  function createComplexSource(initialValueA, initialValueB) {
-    const callbacksA = [];
-    const callbacksB = [];
-    let revision = 0;
-    let valueA = initialValueA;
-    let valueB = initialValueB;
-
-    const subscribeHelper = (callbacks, callback) => {
-      if (callbacks.indexOf(callback) < 0) {
-        callbacks.push(callback);
-      }
-      return () => {
-        const index = callbacks.indexOf(callback);
-        if (index >= 0) {
-          callbacks.splice(index, 1);
-        }
-      };
-    };
-
-    return {
-      subscribeA(callback) {
-        return subscribeHelper(callbacksA, callback);
-      },
-      subscribeB(callback) {
-        return subscribeHelper(callbacksB, callback);
-      },
-
-      get listenerCountA() {
-        return callbacksA.length;
-      },
-      get listenerCountB() {
-        return callbacksB.length;
-      },
-
-      set valueA(newValue) {
-        revision++;
-        valueA = newValue;
-        callbacksA.forEach(callback => callback());
-      },
-      get valueA() {
-        return valueA;
-      },
-
-      set valueB(newValue) {
-        revision++;
-        valueB = newValue;
-        callbacksB.forEach(callback => callback());
-      },
-      get valueB() {
-        return valueB;
-      },
-
-      get version() {
-        return revision;
-      },
-    };
-  }
-
-  function createSource(initialValue) {
-    const callbacks = [];
-    let revision = 0;
-    let value = initialValue;
-    return {
-      subscribe(callback) {
-        if (callbacks.indexOf(callback) < 0) {
-          callbacks.push(callback);
-        }
-        return () => {
-          const index = callbacks.indexOf(callback);
-          if (index >= 0) {
-            callbacks.splice(index, 1);
-          }
-        };
-      },
-      get listenerCount() {
-        return callbacks.length;
-      },
-      set value(newValue) {
-        revision++;
-        value = newValue;
-        callbacks.forEach(callback => callback());
-      },
-      get value() {
-        return value;
-      },
-      get version() {
-        return revision;
-      },
-    };
-  }
-
-  function Component({getSnapshot, label, mutableSource, subscribe}) {
-    const snapshot = useMutableSource(mutableSource, getSnapshot, subscribe);
-    Scheduler.unstable_yieldValue(`${label}:${snapshot}`);
-    return <div>{`${label}:${snapshot}`}</div>;
-  }
-
-  beforeEach(loadModules);
-
-  it('should subscribe to a source and schedule updates when it changes', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      ReactNoop.renderToRootWithID(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        'root',
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'a:one',
-        'b:one',
-        'Sync effect',
-      ]);
-
-      // Subscriptions should be passive
-      expect(source.listenerCount).toBe(0);
-      ReactNoop.flushPassiveEffects();
-      expect(source.listenerCount).toBe(2);
-
-      // Changing values should schedule an update with React
-      source.value = 'two';
-      expect(Scheduler).toFlushAndYieldThrough(['a:two', 'b:two']);
-
-      // Unmounting a component should remove its subscription.
-      ReactNoop.renderToRootWithID(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        'root',
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:two', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-      expect(source.listenerCount).toBe(1);
-
-      // Unmounting a root should remove the remaining event listeners
-      ReactNoop.unmountRootWithID('root');
-      expect(Scheduler).toFlushAndYield([]);
-      ReactNoop.flushPassiveEffects();
-      expect(source.listenerCount).toBe(0);
-
-      // Changes to source should not trigger an updates or warnings.
-      source.value = 'three';
-      expect(Scheduler).toFlushAndYield([]);
-    });
-  });
-
-  it('should restart work if a new source is mutated during render', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.startTransition(() => {
-          ReactNoop.render(
-            <>
-              <Component
-                label="a"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-              <Component
-                label="b"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-            </>,
-            () => Scheduler.unstable_yieldValue('Sync effect'),
-          );
-        });
-      } else {
-        ReactNoop.render(
-          <>
-            <Component
-              label="a"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-            <Component
-              label="b"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-          </>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-      }
-      // Do enough work to read from one component
-      expect(Scheduler).toFlushAndYieldThrough(['a:one']);
-
-      // Mutate source before continuing work
-      source.value = 'two';
-
-      // Render work should restart and the updated value should be used
-      expect(Scheduler).toFlushAndYield(['a:two', 'b:two', 'Sync effect']);
-    });
-  });
-
-  it('should schedule an update if a new source is mutated between render and commit (subscription)', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-
-      // Finish rendering
-      expect(Scheduler).toFlushAndYieldThrough([
-        'a:one',
-        'b:one',
-        'Sync effect',
-      ]);
-
-      // Mutate source before subscriptions are attached
-      expect(source.listenerCount).toBe(0);
-      source.value = 'two';
-
-      // Mutation should be detected, and a new render should be scheduled
-      expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
-    });
-  });
-
-  it('should unsubscribe and resubscribe if a new source is used', () => {
-    const sourceA = createSource('a-one');
-    const mutableSourceA = createMutableSource(
-      sourceA,
-      param => param.versionA,
-    );
-
-    const sourceB = createSource('b-one');
-    const mutableSourceB = createMutableSource(
-      sourceB,
-      param => param.versionB,
-    );
-
-    act(() => {
-      ReactNoop.render(
-        <Component
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSourceA}
-          subscribe={defaultSubscribe}
-        />,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['only:a-one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-      expect(sourceA.listenerCount).toBe(1);
-
-      // Changing values should schedule an update with React
-      sourceA.value = 'a-two';
-      expect(Scheduler).toFlushAndYield(['only:a-two']);
-
-      // If we re-render with a new source, the old one should be unsubscribed.
-      ReactNoop.render(
-        <Component
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSourceB}
-          subscribe={defaultSubscribe}
-        />,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['only:b-one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-      expect(sourceA.listenerCount).toBe(0);
-      expect(sourceB.listenerCount).toBe(1);
-
-      // Changing to original source should not schedule updates with React
-      sourceA.value = 'a-three';
-      expect(Scheduler).toFlushAndYield([]);
-
-      // Changing new source value should schedule an update with React
-      sourceB.value = 'b-two';
-      expect(Scheduler).toFlushAndYield(['only:b-two']);
-    });
-  });
-
-  it('should unsubscribe and resubscribe if a new subscribe function is provided', () => {
-    const source = createSource('a-one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const unsubscribeA = jest.fn();
-    const subscribeA = jest.fn(s => {
-      const unsubscribe = defaultSubscribe(s);
-      return () => {
-        unsubscribe();
-        unsubscribeA();
-      };
-    });
-    const unsubscribeB = jest.fn();
-    const subscribeB = jest.fn(s => {
-      const unsubscribe = defaultSubscribe(s);
-      return () => {
-        unsubscribe();
-        unsubscribeB();
-      };
-    });
-
-    act(() => {
-      ReactNoop.renderToRootWithID(
-        <Component
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSource}
-          subscribe={subscribeA}
-        />,
-        'root',
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['only:a-one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-      expect(source.listenerCount).toBe(1);
-      expect(subscribeA).toHaveBeenCalledTimes(1);
-
-      // If we re-render with a new subscription function,
-      // the old unsubscribe function should be called.
-      ReactNoop.renderToRootWithID(
-        <Component
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSource}
-          subscribe={subscribeB}
-        />,
-        'root',
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['only:a-one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-      expect(source.listenerCount).toBe(1);
-      expect(unsubscribeA).toHaveBeenCalledTimes(1);
-      expect(subscribeB).toHaveBeenCalledTimes(1);
-
-      // Unmounting should call the newer unsubscribe.
-      ReactNoop.unmountRootWithID('root');
-      expect(Scheduler).toFlushAndYield([]);
-      ReactNoop.flushPassiveEffects();
-      expect(source.listenerCount).toBe(0);
-      expect(unsubscribeB).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  it('should re-use previously read snapshot value when reading is unsafe', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
-
-      // Changing values should schedule an update with React.
-      // Start working on this update but don't finish it.
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.startTransition(() => {
-          source.value = 'two';
-        });
-      } else {
-        source.value = 'two';
-      }
-      expect(Scheduler).toFlushAndYieldThrough(['a:two']);
-
-      // Re-renders that occur before the update is processed
-      // should reuse snapshot so long as the config has not changed
-      ReactNoop.flushSync(() => {
-        ReactNoop.render(
-          <>
-            <Component
-              label="a"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-            <Component
-              label="b"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-          </>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-      });
-      expect(Scheduler).toHaveYielded(['a:one', 'b:one', 'Sync effect']);
-
-      expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
-    });
-  });
-
-  it('should read from source on newly mounted subtree if no pending updates are scheduled for source', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:one', 'Sync effect']);
-
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
-    });
-  });
-
-  it('should throw and restart render if source and snapshot are unavailable during an update', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-
-      // Changing values should schedule an update with React.
-      // Start working on this update but don't finish it.
-      ReactNoop.idleUpdates(() => {
-        source.value = 'two';
-        expect(Scheduler).toFlushAndYieldThrough(['a:two']);
-      });
-
-      const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
-
-      // Force a higher priority render with a new config.
-      // This should signal that the snapshot is not safe and trigger a full re-render.
-      ReactNoop.flushSync(() => {
-        ReactNoop.render(
-          <>
-            <Component
-              label="a"
-              getSnapshot={newGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-            <Component
-              label="b"
-              getSnapshot={newGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-          </>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-      });
-      expect(Scheduler).toHaveYielded([
-        'a:new:two',
-        'b:new:two',
-        'Sync effect',
-      ]);
-    });
-  });
-
-  it('should throw and restart render if source and snapshot are unavailable during a sync update', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-
-      // Changing values should schedule an update with React.
-      // Start working on this update but don't finish it.
-      ReactNoop.idleUpdates(() => {
-        source.value = 'two';
-        expect(Scheduler).toFlushAndYieldThrough(['a:two']);
-      });
-
-      const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
-
-      // Force a higher priority render with a new config.
-      // This should signal that the snapshot is not safe and trigger a full re-render.
-      ReactNoop.flushSync(() => {
-        ReactNoop.render(
-          <>
-            <Component
-              label="a"
-              getSnapshot={newGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-            <Component
-              label="b"
-              getSnapshot={newGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-          </>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-      });
-      expect(Scheduler).toHaveYielded([
-        'a:new:two',
-        'b:new:two',
-        'Sync effect',
-      ]);
-    });
-  });
-
-  it('should only update components whose subscriptions fire', () => {
-    const source = createComplexSource('a:one', 'b:one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    // Subscribe to part of the store.
-    const getSnapshotA = s => s.valueA;
-    const subscribeA = (s, callback) => s.subscribeA(callback);
-    const getSnapshotB = s => s.valueB;
-    const subscribeB = (s, callback) => s.subscribeB(callback);
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={getSnapshotA}
-            mutableSource={mutableSource}
-            subscribe={subscribeA}
-          />
-          <Component
-            label="b"
-            getSnapshot={getSnapshotB}
-            mutableSource={mutableSource}
-            subscribe={subscribeB}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:a:one', 'b:b:one', 'Sync effect']);
-
-      // Changes to part of the store (e.g. A) should not render other parts.
-      source.valueA = 'a:two';
-      expect(Scheduler).toFlushAndYield(['a:a:two']);
-      source.valueB = 'b:two';
-      expect(Scheduler).toFlushAndYield(['b:b:two']);
-    });
-  });
-
-  it('should detect tearing in part of the store not yet subscribed to', () => {
-    const source = createComplexSource('a:one', 'b:one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    // Subscribe to part of the store.
-    const getSnapshotA = s => s.valueA;
-    const subscribeA = (s, callback) => s.subscribeA(callback);
-    const getSnapshotB = s => s.valueB;
-    const subscribeB = (s, callback) => s.subscribeB(callback);
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <Component
-            label="a"
-            getSnapshot={getSnapshotA}
-            mutableSource={mutableSource}
-            subscribe={subscribeA}
-          />
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:a:one', 'Sync effect']);
-
-      // Because the store has not changed yet, there are no pending updates,
-      // so it is considered safe to read from when we start this render.
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.startTransition(() => {
-          ReactNoop.render(
-            <>
-              <Component
-                label="a"
-                getSnapshot={getSnapshotA}
-                mutableSource={mutableSource}
-                subscribe={subscribeA}
-              />
-              <Component
-                label="b"
-                getSnapshot={getSnapshotB}
-                mutableSource={mutableSource}
-                subscribe={subscribeB}
-              />
-              <Component
-                label="c"
-                getSnapshot={getSnapshotB}
-                mutableSource={mutableSource}
-                subscribe={subscribeB}
-              />
-            </>,
-            () => Scheduler.unstable_yieldValue('Sync effect'),
-          );
-        });
-      } else {
-        ReactNoop.render(
-          <>
-            <Component
-              label="a"
-              getSnapshot={getSnapshotA}
-              mutableSource={mutableSource}
-              subscribe={subscribeA}
-            />
-            <Component
-              label="b"
-              getSnapshot={getSnapshotB}
-              mutableSource={mutableSource}
-              subscribe={subscribeB}
-            />
-            <Component
-              label="c"
-              getSnapshot={getSnapshotB}
-              mutableSource={mutableSource}
-              subscribe={subscribeB}
-            />
-          </>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-      }
-      expect(Scheduler).toFlushAndYieldThrough(['a:a:one', 'b:b:one']);
-
-      // Mutating the source should trigger a tear detection on the next read,
-      // which should throw and re-render the entire tree.
-      source.valueB = 'b:two';
-
-      expect(Scheduler).toFlushAndYield([
-        'a:a:one',
-        'b:b:two',
-        'c:b:two',
-        'Sync effect',
-      ]);
-    });
-  });
-
-  it('does not schedule an update for subscriptions that fire with an unchanged snapshot', () => {
-    const MockComponent = jest.fn(Component);
-
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      ReactNoop.render(
-        <MockComponent
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSource}
-          subscribe={defaultSubscribe}
-        />,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough(['only:one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-      expect(source.listenerCount).toBe(1);
-
-      // Notify subscribe function but don't change the value
-      source.value = 'one';
-      expect(Scheduler).toFlushWithoutYielding();
-    });
-  });
-
-  it('should throw and restart if getSnapshot changes between scheduled update and re-render', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
-
-    let updateGetSnapshot;
-
-    function WrapperWithState() {
-      const tuple = React.useState(() => defaultGetSnapshot);
-      updateGetSnapshot = tuple[1];
-      return (
-        <Component
-          label="only"
-          getSnapshot={tuple[0]}
-          mutableSource={mutableSource}
-          subscribe={defaultSubscribe}
-        />
-      );
-    }
-
-    act(() => {
-      ReactNoop.render(<WrapperWithState />, () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['only:one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-
-      // Change the source (and schedule an update).
-      source.value = 'two';
-
-      // Schedule a higher priority update that changes getSnapshot.
-      ReactNoop.flushSync(() => {
-        updateGetSnapshot(() => newGetSnapshot);
-      });
-
-      expect(Scheduler).toHaveYielded(['only:new:two']);
-    });
-  });
-
-  it('should recover from a mutation during yield when other work is scheduled', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    act(() => {
-      // Start a render that uses the mutable source.
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.startTransition(() => {
-          ReactNoop.render(
-            <>
-              <Component
-                label="a"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-              <Component
-                label="b"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={defaultSubscribe}
-              />
-            </>,
-          );
-        });
-      } else {
-        ReactNoop.render(
-          <>
-            <Component
-              label="a"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-            <Component
-              label="b"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-          </>,
-        );
-      }
-      expect(Scheduler).toFlushAndYieldThrough(['a:one']);
-
-      // Mutate source
-      source.value = 'two';
-
-      // Now render something different.
-      ReactNoop.render(<div />);
-      expect(Scheduler).toFlushAndYield([]);
-    });
-  });
-
-  it('should not throw if the new getSnapshot returns the same snapshot value', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const onRenderA = jest.fn();
-    const onRenderB = jest.fn();
-
-    let updateGetSnapshot;
-
-    function WrapperWithState() {
-      const tuple = React.useState(() => defaultGetSnapshot);
-      updateGetSnapshot = tuple[1];
-      return (
-        <Component
-          label="b"
-          getSnapshot={tuple[0]}
-          mutableSource={mutableSource}
-          subscribe={defaultSubscribe}
-        />
-      );
-    }
-
-    act(() => {
-      ReactNoop.render(
-        <>
-          <React.Profiler id="a" onRender={onRenderA}>
-            <Component
-              label="a"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />
-          </React.Profiler>
-          <React.Profiler id="b" onRender={onRenderB}>
-            <WrapperWithState />
-          </React.Profiler>
-        </>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-      expect(onRenderA).toHaveBeenCalledTimes(1);
-      expect(onRenderB).toHaveBeenCalledTimes(1);
-
-      // If B's getSnapshot function updates, but the snapshot it returns is the same,
-      // only B should re-render (to update its state).
-      updateGetSnapshot(() => s => defaultGetSnapshot(s));
-      expect(Scheduler).toFlushAndYield(['b:one']);
-      ReactNoop.flushPassiveEffects();
-      expect(onRenderA).toHaveBeenCalledTimes(1);
-      expect(onRenderB).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
-
-    let updateGetSnapshot;
-
-    function WrapperWithState() {
-      const tuple = React.useState(() => defaultGetSnapshot);
-      updateGetSnapshot = tuple[1];
-      return (
-        <Component
-          label="only"
-          getSnapshot={tuple[0]}
-          mutableSource={mutableSource}
-          subscribe={defaultSubscribe}
-        />
-      );
-    }
-
-    act(() => {
-      ReactNoop.render(<WrapperWithState />, () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['only:one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-
-      // Change the source (and schedule an update)
-      // but also change the snapshot function too.
-      ReactNoop.batchedUpdates(() => {
-        source.value = 'two';
-        updateGetSnapshot(() => newGetSnapshot);
-      });
-
-      expect(Scheduler).toFlushAndYield(['only:new:two']);
-    });
-  });
-
-  it('should still schedule an update if an eager selector throws after a mutation', () => {
-    const source = createSource({
-      friends: [
-        {id: 1, name: 'Foo'},
-        {id: 2, name: 'Bar'},
-      ],
-    });
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function FriendsList() {
-      const getSnapshot = React.useCallback(
-        ({value}) => Array.from(value.friends),
-        [],
-      );
-      const friends = useMutableSource(
-        mutableSource,
-        getSnapshot,
-        defaultSubscribe,
-      );
-      return (
-        <ul>
-          {friends.map(friend => (
-            <Friend key={friend.id} id={friend.id} />
-          ))}
-        </ul>
-      );
-    }
-
-    function Friend({id}) {
-      const getSnapshot = React.useCallback(
-        ({value}) => {
-          // This selector is intentionally written in a way that will throw
-          // if no matching friend exists in the store.
-          return value.friends.find(friend => friend.id === id).name;
-        },
-        [id],
-      );
-      const name = useMutableSource(
-        mutableSource,
-        getSnapshot,
-        defaultSubscribe,
-      );
-      Scheduler.unstable_yieldValue(`${id}:${name}`);
-      return <li>{name}</li>;
-    }
-
-    act(() => {
-      ReactNoop.render(<FriendsList />, () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['1:Foo', '2:Bar', 'Sync effect']);
-
-      // This mutation will cause the "Bar" component to throw,
-      // since its value will no longer be a part of the store.
-      // Mutable source should still schedule an update though,
-      // which should unmount "Bar" and mount "Baz".
-      source.value = {
-        friends: [
-          {id: 1, name: 'Foo'},
-          {id: 3, name: 'Baz'},
-        ],
-      };
-      expect(Scheduler).toFlushAndYield(['1:Foo', '3:Baz']);
-    });
-  });
-
-  it('should not warn about updates that fire between unmount and passive unsubscribe', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function Wrapper() {
-      React.useLayoutEffect(() => () => {
-        Scheduler.unstable_yieldValue('layout unmount');
-      });
-      return (
-        <Component
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSource}
-          subscribe={defaultSubscribe}
-        />
-      );
-    }
-
-    act(() => {
-      ReactNoop.renderToRootWithID(<Wrapper />, 'root', () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYield(['only:one', 'Sync effect']);
-      ReactNoop.flushPassiveEffects();
-
-      // Unmounting a root should remove the remaining event listeners in a passive effect
-      ReactNoop.unmountRootWithID('root');
-      expect(Scheduler).toFlushAndYieldThrough(['layout unmount']);
-
-      // Changes to source should not cause a warning,
-      // even though the unsubscribe hasn't run yet (since it's a pending passive effect).
-      source.value = 'two';
-      expect(Scheduler).toFlushAndYield([]);
-    });
-  });
-
-  it('should support inline selectors and updates that are processed after selector change', async () => {
-    const source = createSource({
-      a: 'initial',
-      b: 'initial',
-    });
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const getSnapshotA = () => source.value.a;
-    const getSnapshotB = () => source.value.b;
-
-    function mutateB(newB) {
-      source.value = {
-        ...source.value,
-        b: newB,
-      };
-    }
-
-    function App({getSnapshot}) {
-      const state = useMutableSource(
-        mutableSource,
-        getSnapshot,
-        defaultSubscribe,
-      );
-      return state;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(<App getSnapshot={getSnapshotA} />);
-    });
-    expect(root).toMatchRenderedOutput('initial');
-
-    await act(async () => {
-      mutateB('Updated B');
-      root.render(<App getSnapshot={getSnapshotB} />);
-    });
-    expect(root).toMatchRenderedOutput('Updated B');
-
-    await act(async () => {
-      mutateB('Another update');
-    });
-    expect(root).toMatchRenderedOutput('Another update');
-  });
-
-  it('should clear the update queue when getSnapshot changes with pending lower priority updates', async () => {
-    const source = createSource({
-      a: 'initial',
-      b: 'initial',
-    });
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const getSnapshotA = () => source.value.a;
-    const getSnapshotB = () => source.value.b;
-
-    function mutateA(newA) {
-      source.value = {
-        ...source.value,
-        a: newA,
-      };
-    }
-
-    function mutateB(newB) {
-      source.value = {
-        ...source.value,
-        b: newB,
-      };
-    }
-
-    function App({toggle}) {
-      const state = useMutableSource(
-        mutableSource,
-        toggle ? getSnapshotB : getSnapshotA,
-        defaultSubscribe,
-      );
-      const result = (toggle ? 'B: ' : 'A: ') + state;
-      return result;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(<App toggle={false} />);
-    });
-    expect(root).toMatchRenderedOutput('A: initial');
-
-    await act(async () => {
-      ReactNoop.discreteUpdates(() => {
-        // Update both A and B to the same value
-        mutateA('Update');
-        mutateB('Update');
-        // Toggle to B in the same batch
-        root.render(<App toggle={true} />);
-      });
-      // Mutate A at lower priority. This should never be rendered, because
-      // by the time we get to the lower priority, we've already switched
-      // to B.
-      mutateA('OOPS! This mutation should be ignored');
-    });
-    expect(root).toMatchRenderedOutput('B: Update');
-  });
-
-  it('should clear the update queue when source changes with pending lower priority updates', async () => {
-    const sourceA = createSource('initial');
-    const sourceB = createSource('initial');
-    const mutableSourceA = createMutableSource(
-      sourceA,
-      param => param.versionA,
-    );
-    const mutableSourceB = createMutableSource(
-      sourceB,
-      param => param.versionB,
-    );
-
-    function App({toggle}) {
-      const state = useMutableSource(
-        toggle ? mutableSourceB : mutableSourceA,
-        defaultGetSnapshot,
-        defaultSubscribe,
-      );
-      const result = (toggle ? 'B: ' : 'A: ') + state;
-      return result;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(<App toggle={false} />);
-    });
-    expect(root).toMatchRenderedOutput('A: initial');
-
-    await act(async () => {
-      ReactNoop.discreteUpdates(() => {
-        // Update both A and B to the same value
-        sourceA.value = 'Update';
-        sourceB.value = 'Update';
-        // Toggle to B in the same batch
-        root.render(<App toggle={true} />);
-      });
-      // Mutate A at lower priority. This should never be rendered, because
-      // by the time we get to the lower priority, we've already switched
-      // to B.
-      sourceA.value = 'OOPS! This mutation should be ignored';
-    });
-    expect(root).toMatchRenderedOutput('B: Update');
-  });
-
-  it('should always treat reading as potentially unsafe when getSnapshot changes between renders', async () => {
-    const source = createSource({
-      a: 'foo',
-      b: 'bar',
-    });
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const getSnapshotA = () => source.value.a;
-    const getSnapshotB = () => source.value.b;
-
-    function mutateA(newA) {
-      source.value = {
-        ...source.value,
-        a: newA,
-      };
-    }
-
-    function App({getSnapshotFirst, getSnapshotSecond}) {
-      const first = useMutableSource(
-        mutableSource,
-        getSnapshotFirst,
-        defaultSubscribe,
-      );
-      const second = useMutableSource(
-        mutableSource,
-        getSnapshotSecond,
-        defaultSubscribe,
-      );
-
-      let result = `x: ${first}, y: ${second}`;
-
-      if (getSnapshotFirst === getSnapshotSecond) {
-        // When both getSnapshot functions are equal,
-        // the two values must be consistent.
-        if (first !== second) {
-          result = 'Oops, tearing!';
-        }
-      }
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue(result);
-      }, [result]);
-
-      return result;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(
-        <App
-          getSnapshotFirst={getSnapshotA}
-          getSnapshotSecond={getSnapshotB}
-        />,
-      );
-    });
-    // x and y start out reading from different parts of the store.
-    expect(Scheduler).toHaveYielded(['x: foo, y: bar']);
-
-    await act(async () => {
-      ReactNoop.discreteUpdates(() => {
-        // At high priority, toggle y so that it reads from A instead of B.
-        // Simultaneously, mutate A.
-        mutateA('baz');
-        root.render(
-          <App
-            getSnapshotFirst={getSnapshotA}
-            getSnapshotSecond={getSnapshotA}
-          />,
-        );
-
-        // If this update were processed before the next mutation,
-        // it would be expected to yield "baz" and "baz".
-      });
-
-      // At lower priority, mutate A again.
-      // This happens to match the initial value of B.
-      mutateA('bar');
-
-      // When this update is processed,
-      // it is expected to yield "bar" and "bar".
-    });
-
-    // Check that we didn't commit any inconsistent states.
-    // The actual sequence of work will be:
-    // 1. React renders the high-pri update, sees a new getSnapshot, detects the source has been further mutated, and throws
-    // 2. React re-renders with all pending updates, including the second mutation, and renders "bar" and "bar".
-    expect(Scheduler).toHaveYielded(['x: bar, y: bar']);
-  });
-
-  it('getSnapshot changes and then source is mutated in between paint and passive effect phase', async () => {
-    const source = createSource({
-      a: 'foo',
-      b: 'bar',
-    });
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function mutateB(newB) {
-      source.value = {
-        ...source.value,
-        b: newB,
-      };
-    }
-
-    const getSnapshotA = () => source.value.a;
-    const getSnapshotB = () => source.value.b;
-
-    function App({getSnapshot}) {
-      const value = useMutableSource(
-        mutableSource,
-        getSnapshot,
-        defaultSubscribe,
-      );
-
-      Scheduler.unstable_yieldValue('Render: ' + value);
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('Commit: ' + value);
-      }, [value]);
-
-      return value;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(<App getSnapshot={getSnapshotA} />);
-    });
-    expect(Scheduler).toHaveYielded(['Render: foo', 'Commit: foo']);
-
-    await act(async () => {
-      // Switch getSnapshot to read from B instead
-      root.render(<App getSnapshot={getSnapshotB} />);
-      // Render and finish the tree, but yield right after paint, before
-      // the passive effects have fired.
-      expect(Scheduler).toFlushUntilNextPaint(['Render: bar']);
-      // Then mutate B.
-      mutateB('baz');
-    });
-    expect(Scheduler).toHaveYielded([
-      // Fires the effect from the previous render
-      'Commit: bar',
-      // During that effect, it should detect that the snapshot has changed
-      // and re-render.
-      'Render: baz',
-      'Commit: baz',
-    ]);
-    expect(root).toMatchRenderedOutput('baz');
-  });
-
-  it('getSnapshot changes and then source is mutated in between paint and passive effect phase, case 2', async () => {
-    const source = createSource({
-      a: 'a0',
-      b: 'b0',
-    });
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const getSnapshotA = () => source.value.a;
-    const getSnapshotB = () => source.value.b;
-
-    function mutateA(newA) {
-      source.value = {
-        ...source.value,
-        a: newA,
-      };
-    }
-
-    function App({getSnapshotFirst, getSnapshotSecond}) {
-      const first = useMutableSource(
-        mutableSource,
-        getSnapshotFirst,
-        defaultSubscribe,
-      );
-      const second = useMutableSource(
-        mutableSource,
-        getSnapshotSecond,
-        defaultSubscribe,
-      );
-
-      return `first: ${first}, second: ${second}`;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(
-        <App
-          getSnapshotFirst={getSnapshotA}
-          getSnapshotSecond={getSnapshotB}
-        />,
-      );
-    });
-    expect(root.getChildrenAsJSX()).toEqual('first: a0, second: b0');
-
-    await act(async () => {
-      // Switch the second getSnapshot to also read from A
-      root.render(
-        <App
-          getSnapshotFirst={getSnapshotA}
-          getSnapshotSecond={getSnapshotA}
-        />,
-      );
-      // Render and finish the tree, but yield right after paint, before
-      // the passive effects have fired.
-      expect(Scheduler).toFlushUntilNextPaint([]);
-
-      // Now mutate A. Both hooks should update.
-      // This is at high priority so that it doesn't get batched with default
-      // priority updates that might fire during the passive effect
-      await act(async () => {
-        ReactNoop.discreteUpdates(() => {
-          mutateA('a1');
-        });
-      });
-
-      expect(root).toMatchRenderedOutput('first: a1, second: a1');
-    });
-
-    expect(root.getChildrenAsJSX()).toEqual('first: a1, second: a1');
-  });
-
-  it(
-    'if source is mutated after initial read but before subscription is set ' +
-      'up, should still entangle all pending mutations even if snapshot of ' +
-      'new subscription happens to match',
-    async () => {
-      const source = createSource({
-        a: 'a0',
-        b: 'b0',
-      });
-      const mutableSource = createMutableSource(source, param => param.version);
-
-      const getSnapshotA = () => source.value.a;
-      const getSnapshotB = () => source.value.b;
-
-      function mutateA(newA) {
-        source.value = {
-          ...source.value,
-          a: newA,
-        };
-      }
-
-      function mutateB(newB) {
-        source.value = {
-          ...source.value,
-          b: newB,
-        };
-      }
-
-      function Read({getSnapshot}) {
-        const value = useMutableSource(
-          mutableSource,
-          getSnapshot,
-          defaultSubscribe,
-        );
-        Scheduler.unstable_yieldValue(value);
-        return value;
-      }
-
-      function Text({text}) {
-        Scheduler.unstable_yieldValue(text);
-        return text;
-      }
-
-      const root = ReactNoop.createRoot();
-      await act(async () => {
-        root.render(
-          <>
-            <Read getSnapshot={getSnapshotA} />
-          </>,
-        );
-      });
-      expect(Scheduler).toHaveYielded(['a0']);
-      expect(root).toMatchRenderedOutput('a0');
-
-      await act(async () => {
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.startTransition(() => {
-            root.render(
-              <>
-                <Read getSnapshot={getSnapshotA} />
-                <Read getSnapshot={getSnapshotB} />
-                <Text text="c" />
-              </>,
-            );
-          });
-        } else {
-          root.render(
-            <>
-              <Read getSnapshot={getSnapshotA} />
-              <Read getSnapshot={getSnapshotB} />
-              <Text text="c" />
-            </>,
-          );
-        }
-
-        expect(Scheduler).toFlushAndYieldThrough(['a0', 'b0']);
-        // Mutate in an event. This schedules a subscription update on a, which
-        // already mounted, but not b, which hasn't subscribed yet.
-        mutateA('a1');
-        mutateB('b1');
-
-        // Mutate again at lower priority. This will schedule another subscription
-        // update on a, but not b. When b mounts and subscriptions, the value it
-        // read during render will happen to match the latest value. But it should
-        // still entangle the updates to prevent the previous update (a1) from
-        // rendering by itself.
-        React.startTransition(() => {
-          mutateA('a0');
-          mutateB('b0');
-        });
-        // Finish the current render
-        expect(Scheduler).toFlushUntilNextPaint(['c']);
-        // a0 will re-render because of the mutation update. But it should show
-        // the latest value, not the intermediate one, to avoid tearing with b.
-        expect(Scheduler).toFlushUntilNextPaint(['a0']);
-
-        expect(root).toMatchRenderedOutput('a0b0c');
-        // We should be done.
-        expect(Scheduler).toFlushAndYield([]);
-        expect(root).toMatchRenderedOutput('a0b0c');
-      });
-    },
-  );
-
-  it('warns about functions being used as snapshot values', async () => {
-    const source = createSource(() => 'a');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    const getSnapshot = () => source.value;
-
-    function Read() {
-      const fn = useMutableSource(mutableSource, getSnapshot, defaultSubscribe);
-      const value = fn();
-      Scheduler.unstable_yieldValue(value);
-      return value;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(
-        <>
-          <Read />
-        </>,
-      );
-      expect(() => expect(Scheduler).toFlushAndYield(['a'])).toErrorDev(
-        'Mutable source should not return a function as the snapshot value.',
-      );
-    });
-    expect(root).toMatchRenderedOutput('a');
-  });
-
-  it('getSnapshot changes and then source is mutated during interleaved event', async () => {
-    const {useEffect} = React;
-
-    const source = createComplexSource('1', '2');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    // Subscribe to part of the store.
-    const getSnapshotA = s => s.valueA;
-    const subscribeA = (s, callback) => s.subscribeA(callback);
-    const configA = [getSnapshotA, subscribeA];
-
-    const getSnapshotB = s => s.valueB;
-    const subscribeB = (s, callback) => s.subscribeB(callback);
-    const configB = [getSnapshotB, subscribeB];
-
-    function App({parentConfig, childConfig}) {
-      const [getSnapshot, subscribe] = parentConfig;
-      const parentValue = useMutableSource(
-        mutableSource,
-        getSnapshot,
-        subscribe,
-      );
-
-      Scheduler.unstable_yieldValue('Parent: ' + parentValue);
-
-      return (
-        <Child
-          parentConfig={parentConfig}
-          childConfig={childConfig}
-          parentValue={parentValue}
-        />
-      );
-    }
-
-    function Child({parentConfig, childConfig, parentValue}) {
-      const [getSnapshot, subscribe] = childConfig;
-      const childValue = useMutableSource(
-        mutableSource,
-        getSnapshot,
-        subscribe,
-      );
-
-      Scheduler.unstable_yieldValue('Child: ' + childValue);
-
-      let result = `${parentValue}, ${childValue}`;
-
-      if (parentConfig === childConfig) {
-        // When both components read using the same config, the two values
-        // must be consistent.
-        if (parentValue !== childValue) {
-          result = 'Oops, tearing!';
-        }
-      }
-
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Commit: ' + result);
-      }, [result]);
-
-      return result;
-    }
-
-    const root = ReactNoop.createRoot();
-    await act(async () => {
-      root.render(<App parentConfig={configA} childConfig={configB} />);
-    });
-    expect(Scheduler).toHaveYielded(['Parent: 1', 'Child: 2', 'Commit: 1, 2']);
-
-    await act(async () => {
-      // Switch the parent and the child to read using the same config
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.startTransition(() => {
-          root.render(<App parentConfig={configB} childConfig={configB} />);
-        });
-      } else {
-        root.render(<App parentConfig={configB} childConfig={configB} />);
-      }
-      // Start rendering the parent, but yield before rendering the child
-      expect(Scheduler).toFlushAndYieldThrough(['Parent: 2']);
-
-      // Mutate the config. This is at lower priority so that 1) to make sure
-      // it doesn't happen to get batched with the in-progress render, and 2)
-      // so it doesn't interrupt the in-progress render.
-      React.startTransition(() => {
-        source.valueB = '3';
-      });
-
-      if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        // In default sync mode, all of the updates flush sync.
-        expect(Scheduler).toFlushAndYieldThrough([
-          // The partial render completes
-          'Child: 2',
-          'Commit: 2, 2',
-          'Parent: 3',
-          'Child: 3',
-        ]);
-
-        expect(Scheduler).toFlushAndYield([
-          // Now finish the rest of the update
-          'Commit: 3, 3',
-        ]);
-      } else {
-        expect(Scheduler).toFlushAndYieldThrough([
-          // The partial render completes
-          'Child: 2',
-          'Commit: 2, 2',
-        ]);
-
-        // Now there are two pending mutations at different priorities. But they
-        // both read the same version of the mutable source, so we must render
-        // them simultaneously.
-        //
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Parent: 3',
-          // Demonstrates that we can yield here
-        ]);
-        expect(Scheduler).toFlushAndYield([
-          // Now finish the rest of the update
-          'Child: 3',
-          'Commit: 3, 3',
-        ]);
-      }
-    });
-  });
-
-  it('should not tear with newly mounted component when updates were scheduled at a lower priority', async () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    let committedA = null;
-    let committedB = null;
-
-    const onRender = () => {
-      if (committedB !== null) {
-        expect(committedA).toBe(committedB);
-      }
-    };
-
-    function ComponentA() {
-      const snapshot = useMutableSource(
-        mutableSource,
-        defaultGetSnapshot,
-        defaultSubscribe,
-      );
-      Scheduler.unstable_yieldValue(`a:${snapshot}`);
-      React.useEffect(() => {
-        committedA = snapshot;
-      }, [snapshot]);
-      return <div>{`a:${snapshot}`}</div>;
-    }
-    function ComponentB() {
-      const snapshot = useMutableSource(
-        mutableSource,
-        defaultGetSnapshot,
-        defaultSubscribe,
-      );
-      Scheduler.unstable_yieldValue(`b:${snapshot}`);
-      React.useEffect(() => {
-        committedB = snapshot;
-      }, [snapshot]);
-      return <div>{`b:${snapshot}`}</div>;
-    }
-
-    // Mount ComponentA with data version 1
-    act(() => {
-      ReactNoop.render(
-        <React.Profiler id="root" onRender={onRender}>
-          <ComponentA />
-        </React.Profiler>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-    });
-    expect(Scheduler).toHaveYielded(['a:one', 'Sync effect']);
-    expect(source.listenerCount).toBe(1);
-
-    // Mount ComponentB with version 1 (but don't commit it)
-    act(() => {
-      ReactNoop.render(
-        <React.Profiler id="root" onRender={onRender}>
-          <ComponentA />
-          <ComponentB />
-        </React.Profiler>,
-        () => Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'a:one',
-        'b:one',
-        'Sync effect',
-      ]);
-      expect(source.listenerCount).toBe(1);
-
-      // Mutate -> schedule update for ComponentA
-      React.startTransition(() => {
-        source.value = 'two';
-      });
-
-      // Commit ComponentB -> notice the change and schedule an update for ComponentB
-      expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
-      expect(source.listenerCount).toBe(2);
-    });
-  });
-
-  if (__DEV__) {
-    // See https://github.com/facebook/react/issues/19948
-    describe('side effects detection', () => {
-      it('should throw if a mutable source is mutated during render', () => {
-        const source = createSource(0);
-        const mutableSource = createMutableSource(
-          source,
-          param => param.version,
-        );
-
-        let mutatedValueInRender = 1;
-        function MutateDuringRead() {
-          const value = useMutableSource(
-            mutableSource,
-            defaultGetSnapshot,
-            defaultSubscribe,
-          );
-          Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
-          // Note that mutating an external value during render is a side effect and is not supported.
-          source.value = mutatedValueInRender++;
-          return null;
-        }
-
-        // TODO The mechanism for this type of detection relies on StrictMode double rendering.
-        expect(() => {
-          act(() => {
-            ReactNoop.render(
-              <React.StrictMode>
-                <MutateDuringRead />
-              </React.StrictMode>,
-            );
-          });
-        }).toThrow(
-          'A mutable source was mutated while the MutateDuringRead component ' +
-            'was rendering. This is not supported. Move any mutations into ' +
-            'event handlers or effects.',
-        );
-
-        expect(Scheduler).toHaveYielded([
-          // First attempt
-          'MutateDuringRead:0',
-
-          // Synchronous retry
-          'MutateDuringRead:1',
-        ]);
-      });
-
-      it('should throw if a mutable source is mutated during render (legacy mode)', () => {
-        const source = createSource('initial');
-        const mutableSource = createMutableSource(
-          source,
-          param => param.version,
-        );
-
-        function MutateDuringRead() {
-          const value = useMutableSource(
-            mutableSource,
-            defaultGetSnapshot,
-            defaultSubscribe,
-          );
-          Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
-          // Note that mutating an external value during render is a side effect and is not supported.
-          if (value === 'initial') {
-            source.value = 'updated';
-          }
-          return null;
-        }
-
-        expect(() => {
-          act(() => {
-            ReactNoop.renderLegacySyncRoot(
-              <React.StrictMode>
-                <MutateDuringRead />
-              </React.StrictMode>,
-            );
-          });
-        }).toThrow(
-          'A mutable source was mutated while the MutateDuringRead component ' +
-            'was rendering. This is not supported. Move any mutations into ' +
-            'event handlers or effects.',
-        );
-
-        expect(Scheduler).toHaveYielded(['MutateDuringRead:initial']);
-      });
-
-      it('should not misidentify mutations after render as side effects', async () => {
-        const source = createSource('initial');
-        const mutableSource = createMutableSource(
-          source,
-          param => param.version,
-        );
-
-        function MutateDuringRead() {
-          const value = useMutableSource(
-            mutableSource,
-            defaultGetSnapshot,
-            defaultSubscribe,
-          );
-          Scheduler.unstable_yieldValue('MutateDuringRead:' + value);
-          return null;
-        }
-
-        await act(async () => {
-          ReactNoop.renderLegacySyncRoot(
-            <React.StrictMode>
-              <MutateDuringRead />
-            </React.StrictMode>,
-          );
-        });
-        expect(Scheduler).toHaveYielded(['MutateDuringRead:initial']);
-
-        await act(async () => {
-          source.value = 'updated';
-        });
-        expect(Scheduler).toHaveYielded(['MutateDuringRead:updated']);
-      });
-    });
-
-    describe('dev warnings', () => {
-      it('should warn if the subscribe function does not return an unsubscribe function', () => {
-        const source = createSource('one');
-        const mutableSource = createMutableSource(
-          source,
-          param => param.version,
-        );
-
-        const brokenSubscribe = () => {};
-
-        expect(() => {
-          act(() => {
-            ReactNoop.render(
-              <Component
-                label="only"
-                getSnapshot={defaultGetSnapshot}
-                mutableSource={mutableSource}
-                subscribe={brokenSubscribe}
-              />,
-            );
-          });
-        }).toErrorDev(
-          'Mutable source subscribe function must return an unsubscribe function.',
-        );
-      });
-
-      it('should error if multiple renderers of the same type use a mutable source at the same time', () => {
-        const source = createSource('one');
-        const mutableSource = createMutableSource(
-          source,
-          param => param.version,
-        );
-
-        act(() => {
-          // Start a render that uses the mutable source.
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.startTransition(() => {
-              ReactNoop.render(
-                <>
-                  <Component
-                    label="a"
-                    getSnapshot={defaultGetSnapshot}
-                    mutableSource={mutableSource}
-                    subscribe={defaultSubscribe}
-                  />
-                  <Component
-                    label="b"
-                    getSnapshot={defaultGetSnapshot}
-                    mutableSource={mutableSource}
-                    subscribe={defaultSubscribe}
-                  />
-                </>,
-              );
-            });
-          } else {
-            ReactNoop.render(
-              <>
-                <Component
-                  label="a"
-                  getSnapshot={defaultGetSnapshot}
-                  mutableSource={mutableSource}
-                  subscribe={defaultSubscribe}
-                />
-                <Component
-                  label="b"
-                  getSnapshot={defaultGetSnapshot}
-                  mutableSource={mutableSource}
-                  subscribe={defaultSubscribe}
-                />
-              </>,
-            );
-          }
-          expect(Scheduler).toFlushAndYieldThrough(['a:one']);
-
-          const PrevScheduler = Scheduler;
-
-          // Get a new copy of ReactNoop.
-          loadModules();
-
-          spyOnDev(console, 'error');
-
-          // Use the mutablesource again but with a different renderer.
-          ReactNoop.render(
-            <Component
-              label="c"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />,
-          );
-          expect(Scheduler).toFlushAndYieldThrough(['c:one']);
-
-          expect(console.error.calls.argsFor(0)[0]).toContain(
-            'Detected multiple renderers concurrently rendering the ' +
-              'same mutable source. This is currently unsupported.',
-          );
-
-          // TODO (useMutableSource) Act will automatically flush remaining work from render 1,
-          // but at this point something in the hooks dispatcher has been broken by jest.resetModules()
-          // Figure out what this is and remove this catch.
-          expect(() =>
-            PrevScheduler.unstable_flushAllWithoutAsserting(),
-          ).toThrow('Invalid hook call');
-        });
-      });
-
-      it('should error if multiple renderers of the same type use a mutable source at the same time with mutation between', () => {
-        const source = createSource('one');
-        const mutableSource = createMutableSource(
-          source,
-          param => param.version,
-        );
-
-        act(() => {
-          // Start a render that uses the mutable source.
-          if (gate(flags => flags.enableSyncDefaultUpdates)) {
-            React.startTransition(() => {
-              ReactNoop.render(
-                <>
-                  <Component
-                    label="a"
-                    getSnapshot={defaultGetSnapshot}
-                    mutableSource={mutableSource}
-                    subscribe={defaultSubscribe}
-                  />
-                  <Component
-                    label="b"
-                    getSnapshot={defaultGetSnapshot}
-                    mutableSource={mutableSource}
-                    subscribe={defaultSubscribe}
-                  />
-                </>,
-              );
-            });
-          } else {
-            ReactNoop.render(
-              <>
-                <Component
-                  label="a"
-                  getSnapshot={defaultGetSnapshot}
-                  mutableSource={mutableSource}
-                  subscribe={defaultSubscribe}
-                />
-                <Component
-                  label="b"
-                  getSnapshot={defaultGetSnapshot}
-                  mutableSource={mutableSource}
-                  subscribe={defaultSubscribe}
-                />
-              </>,
-            );
-          }
-          expect(Scheduler).toFlushAndYieldThrough(['a:one']);
-
-          const PrevScheduler = Scheduler;
-
-          // Get a new copy of ReactNoop.
-          loadModules();
-
-          spyOnDev(console, 'error');
-
-          // Mutate before the new render reads from the source.
-          source.value = 'two';
-
-          // Use the mutablesource again but with a different renderer.
-          ReactNoop.render(
-            <Component
-              label="c"
-              getSnapshot={defaultGetSnapshot}
-              mutableSource={mutableSource}
-              subscribe={defaultSubscribe}
-            />,
-          );
-          expect(Scheduler).toFlushAndYieldThrough(['c:two']);
-
-          expect(console.error.calls.argsFor(0)[0]).toContain(
-            'Detected multiple renderers concurrently rendering the ' +
-              'same mutable source. This is currently unsupported.',
-          );
-
-          // TODO (useMutableSource) Act will automatically flush remaining work from render 1,
-          // but at this point something in the hooks dispatcher has been broken by jest.resetModules()
-          // Figure out what this is and remove this catch.
-          expect(() =>
-            PrevScheduler.unstable_flushAllWithoutAsserting(),
-          ).toThrow('Invalid hook call');
-        });
-      });
-    });
-  }
-});
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
deleted file mode 100644
index 7f46d1cb0055..000000000000
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ /dev/null
@@ -1,451 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let React;
-let ReactDOM;
-let ReactDOMServer;
-let Scheduler;
-let act;
-let createMutableSource;
-let useMutableSource;
-
-describe('useMutableSourceHydration', () => {
-  beforeEach(() => {
-    jest.resetModules();
-
-    React = require('react');
-    ReactDOM = require('react-dom');
-    ReactDOMServer = require('react-dom/server');
-    Scheduler = require('scheduler');
-
-    act = require('jest-react').act;
-
-    // Stable entrypoints export with "unstable_" prefix.
-    createMutableSource =
-      React.createMutableSource || React.unstable_createMutableSource;
-    useMutableSource =
-      React.useMutableSource || React.unstable_useMutableSource;
-  });
-
-  function dispatchAndSetCurrentEvent(el, event) {
-    try {
-      window.event = event;
-      el.dispatchEvent(event);
-    } finally {
-      window.event = undefined;
-    }
-  }
-
-  const defaultGetSnapshot = source => source.value;
-  const defaultSubscribe = (source, callback) => source.subscribe(callback);
-
-  function createComplexSource(initialValueA, initialValueB) {
-    const callbacksA = [];
-    const callbacksB = [];
-    let revision = 0;
-    let valueA = initialValueA;
-    let valueB = initialValueB;
-
-    const subscribeHelper = (callbacks, callback) => {
-      if (callbacks.indexOf(callback) < 0) {
-        callbacks.push(callback);
-      }
-      return () => {
-        const index = callbacks.indexOf(callback);
-        if (index >= 0) {
-          callbacks.splice(index, 1);
-        }
-      };
-    };
-
-    return {
-      subscribeA(callback) {
-        return subscribeHelper(callbacksA, callback);
-      },
-      subscribeB(callback) {
-        return subscribeHelper(callbacksB, callback);
-      },
-
-      get listenerCountA() {
-        return callbacksA.length;
-      },
-      get listenerCountB() {
-        return callbacksB.length;
-      },
-
-      set valueA(newValue) {
-        revision++;
-        valueA = newValue;
-        callbacksA.forEach(callback => callback());
-      },
-      get valueA() {
-        return valueA;
-      },
-
-      set valueB(newValue) {
-        revision++;
-        valueB = newValue;
-        callbacksB.forEach(callback => callback());
-      },
-      get valueB() {
-        return valueB;
-      },
-
-      get version() {
-        return revision;
-      },
-    };
-  }
-
-  function createSource(initialValue) {
-    const callbacks = [];
-    let revision = 0;
-    let value = initialValue;
-    return {
-      subscribe(callback) {
-        if (callbacks.indexOf(callback) < 0) {
-          callbacks.push(callback);
-        }
-        return () => {
-          const index = callbacks.indexOf(callback);
-          if (index >= 0) {
-            callbacks.splice(index, 1);
-          }
-        };
-      },
-      get listenerCount() {
-        return callbacks.length;
-      },
-      set value(newValue) {
-        revision++;
-        value = newValue;
-        callbacks.forEach(callback => callback());
-      },
-      get value() {
-        return value;
-      },
-      get version() {
-        return revision;
-      },
-    };
-  }
-
-  function Component({getSnapshot, label, mutableSource, subscribe}) {
-    const snapshot = useMutableSource(mutableSource, getSnapshot, subscribe);
-    Scheduler.unstable_yieldValue(`${label}:${snapshot}`);
-    return <div>{`${label}:${snapshot}`}</div>;
-  }
-
-  it('should render and hydrate', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function TestComponent() {
-      return (
-        <Component
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSource}
-          subscribe={defaultSubscribe}
-        />
-      );
-    }
-
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const htmlString = ReactDOMServer.renderToString(<TestComponent />);
-    container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['only:one']);
-    expect(source.listenerCount).toBe(0);
-
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
-    act(() => {
-      root.render(<TestComponent />);
-    });
-    expect(Scheduler).toHaveYielded(['only:one']);
-    expect(source.listenerCount).toBe(1);
-  });
-
-  it('should detect a tear before hydrating a component', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function TestComponent() {
-      return (
-        <Component
-          label="only"
-          getSnapshot={defaultGetSnapshot}
-          mutableSource={mutableSource}
-          subscribe={defaultSubscribe}
-        />
-      );
-    }
-
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const htmlString = ReactDOMServer.renderToString(<TestComponent />);
-    container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['only:one']);
-    expect(source.listenerCount).toBe(0);
-
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
-    expect(() => {
-      act(() => {
-        root.render(<TestComponent />);
-
-        source.value = 'two';
-      });
-    }).toErrorDev(
-      'Warning: An error occurred during hydration. ' +
-        'The server HTML was replaced with client content in <div>.',
-      {withoutStack: true},
-    );
-    expect(Scheduler).toHaveYielded(['only:two']);
-    expect(source.listenerCount).toBe(1);
-  });
-
-  it('should detect a tear between hydrating components', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function TestComponent() {
-      return (
-        <>
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-          <Component
-            label="b"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>
-      );
-    }
-
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const htmlString = ReactDOMServer.renderToString(<TestComponent />);
-    container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['a:one', 'b:one']);
-    expect(source.listenerCount).toBe(0);
-
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
-    expect(() => {
-      act(() => {
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.startTransition(() => {
-            root.render(<TestComponent />);
-          });
-        } else {
-          root.render(<TestComponent />);
-        }
-        expect(Scheduler).toFlushAndYieldThrough(['a:one']);
-        source.value = 'two';
-      });
-    }).toErrorDev(
-      'Warning: An error occurred during hydration. ' +
-        'The server HTML was replaced with client content in <div>.',
-      {withoutStack: true},
-    );
-    expect(Scheduler).toHaveYielded(['a:two', 'b:two']);
-    expect(source.listenerCount).toBe(2);
-  });
-
-  it('should detect a tear between hydrating components reading from different parts of a source', () => {
-    const source = createComplexSource('a:one', 'b:one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    // Subscribe to part of the store.
-    const getSnapshotA = s => s.valueA;
-    const subscribeA = (s, callback) => s.subscribeA(callback);
-    const getSnapshotB = s => s.valueB;
-    const subscribeB = (s, callback) => s.subscribeB(callback);
-
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const htmlString = ReactDOMServer.renderToString(
-      <>
-        <Component
-          label="0"
-          getSnapshot={getSnapshotA}
-          mutableSource={mutableSource}
-          subscribe={subscribeA}
-        />
-        <Component
-          label="1"
-          getSnapshot={getSnapshotB}
-          mutableSource={mutableSource}
-          subscribe={subscribeB}
-        />
-      </>,
-    );
-    container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);
-
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
-    expect(() => {
-      act(() => {
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.startTransition(() => {
-            root.render(
-              <>
-                <Component
-                  label="0"
-                  getSnapshot={getSnapshotA}
-                  mutableSource={mutableSource}
-                  subscribe={subscribeA}
-                />
-                <Component
-                  label="1"
-                  getSnapshot={getSnapshotB}
-                  mutableSource={mutableSource}
-                  subscribe={subscribeB}
-                />
-              </>,
-            );
-          });
-        } else {
-          root.render(
-            <>
-              <Component
-                label="0"
-                getSnapshot={getSnapshotA}
-                mutableSource={mutableSource}
-                subscribe={subscribeA}
-              />
-              <Component
-                label="1"
-                getSnapshot={getSnapshotB}
-                mutableSource={mutableSource}
-                subscribe={subscribeB}
-              />
-            </>,
-          );
-        }
-        expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
-        source.valueB = 'b:two';
-      });
-    }).toErrorDev(
-      'Warning: An error occurred during hydration. ' +
-        'The server HTML was replaced with client content in <div>.',
-      {withoutStack: true},
-    );
-    expect(Scheduler).toHaveYielded(['0:a:one', '1:b:two']);
-  });
-
-  // @gate !enableSyncDefaultUpdates
-  it('should detect a tear during a higher priority interruption', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function Unrelated({flag}) {
-      Scheduler.unstable_yieldValue(flag);
-      return flag;
-    }
-
-    function TestComponent({flag}) {
-      return (
-        <>
-          <Unrelated flag={flag} />
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>
-      );
-    }
-
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const htmlString = ReactDOMServer.renderToString(
-      <TestComponent flag={1} />,
-    );
-    container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded([1, 'a:one']);
-    expect(source.listenerCount).toBe(0);
-
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
-
-    expect(() => {
-      act(() => {
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.startTransition(() => {
-            root.render(<TestComponent flag={1} />);
-          });
-        } else {
-          root.render(<TestComponent flag={1} />);
-        }
-        expect(Scheduler).toFlushAndYieldThrough([1]);
-
-        // Render an update which will be higher priority than the hydration.
-        // We can do this by scheduling the update inside a mouseover event.
-        const arbitraryElement = document.createElement('div');
-        const mouseOverEvent = document.createEvent('MouseEvents');
-        mouseOverEvent.initEvent('mouseover', true, true);
-        arbitraryElement.addEventListener('mouseover', () => {
-          root.render(<TestComponent flag={2} />);
-        });
-        dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);
-
-        expect(Scheduler).toFlushAndYieldThrough([2]);
-
-        source.value = 'two';
-      });
-    }).toErrorDev(
-      [
-        'Warning: An error occurred during hydration. ' +
-          'The server HTML was replaced with client content in <div>.',
-
-        'Warning: Text content did not match. Server: "1" Client: "2"',
-      ],
-      {withoutStack: 1},
-    );
-    expect(Scheduler).toHaveYielded([2, 'a:two']);
-    expect(source.listenerCount).toBe(1);
-  });
-});
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 1618537ac1bd..c272ddbbb9ad 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -9,12 +9,7 @@
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 
-import type {
-  MutableSource,
-  MutableSourceGetSnapshotFn,
-  MutableSourceSubscribeFn,
-  ReactContext,
-} from 'shared/ReactTypes';
+import type {ReactContext} from 'shared/ReactTypes';
 
 import type {ResponseState, OpaqueIDType} from './ReactServerFormatConfig';
 
@@ -449,18 +444,6 @@ export function useCallback<T>(
   return useMemo(() => callback, deps);
 }
 
-// TODO Decide on how to implement this hook for server rendering.
-// If a mutation occurs during render, consider triggering a Suspense boundary
-// and falling back to client rendering.
-function useMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  resolveCurrentlyRenderingComponent();
-  return getSnapshot(source._source);
-}
-
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -515,8 +498,6 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
-  // Subscriptions are not setup in a server environment.
-  useMutableSource,
   useSyncExternalStore,
 };
 
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 5429d3a3b9e6..a555f7cac8c6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -827,7 +827,6 @@ const Dispatcher: DispatcherType = {
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
   useOpaqueIdentifier: (unsupportedHook: any),
-  useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
   useCacheRefresh(): <T>(?() => T, ?T) => void {
     return unsupportedRefresh;
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index b4b57c68b5f5..e4c886dc85aa 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -44,7 +44,6 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useDeferredValue: unsupported,
     useTransition: unsupported,
     useOpaqueIdentifier: unsupported,
-    useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
     useCacheRefresh: unsupported,
   };
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 7f8abc863157..d3ebdb5c02fb 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -23,8 +23,6 @@ export {
   createContext,
   createElement,
   createFactory,
-  createMutableSource,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -50,8 +48,6 @@ export {
   useLayoutEffect,
   unstable_useInsertionEffect,
   useMemo,
-  useMutableSource,
-  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index a0a9bbaca216..7ff629fd0af0 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -22,7 +22,6 @@ export {
   createContext,
   createElement,
   createFactory,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -45,7 +44,6 @@ export {
   unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/react/index.js b/packages/react/index.js
index 1b4552a90f5d..17916a322bfa 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -46,7 +46,6 @@ export {
   createContext,
   createElement,
   createFactory,
-  createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -70,7 +69,6 @@ export {
   unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource,
   useSyncExternalStore,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 819d5fe90afd..e2a55bbdab87 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -22,8 +22,6 @@ export {
   cloneElement,
   createContext,
   createElement,
-  createMutableSource,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -49,8 +47,6 @@ export {
   unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource,
-  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 008875e4577e..70ede828c8a4 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -22,7 +22,6 @@ export {
   createContext,
   createElement,
   createFactory,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -38,7 +37,6 @@ export {
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 541e7a35d3d3..a171d16b8af8 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -44,7 +44,6 @@ import {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
@@ -59,7 +58,6 @@ import {
   createFactoryWithValidation,
   cloneElementWithValidation,
 } from './ReactElementValidator';
-import {createMutableSource} from './ReactMutableSource';
 import ReactSharedInternals from './ReactSharedInternals';
 import {startTransition} from './ReactStartTransition';
 import {act} from './ReactAct';
@@ -79,7 +77,6 @@ const Children = {
 
 export {
   Children,
-  createMutableSource,
   createRef,
   Component,
   PureComponent,
@@ -95,7 +92,6 @@ export {
   useInsertionEffect as unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 0722cf4b209b..77dbd53c9ce1 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -8,12 +8,7 @@
  */
 
 import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
-import type {
-  MutableSource,
-  MutableSourceGetSnapshotFn,
-  MutableSourceSubscribeFn,
-  ReactContext,
-} from 'shared/ReactTypes';
+import type {ReactContext} from 'shared/ReactTypes';
 import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
@@ -168,15 +163,6 @@ export function useOpaqueIdentifier(): OpaqueIDType | void {
   return dispatcher.useOpaqueIdentifier();
 }
 
-export function useMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  const dispatcher = resolveDispatcher();
-  return dispatcher.useMutableSource(source, getSnapshot, subscribe);
-}
-
 export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
diff --git a/packages/react/src/ReactMutableSource.js b/packages/react/src/ReactMutableSource.js
deleted file mode 100644
index f8e5d0b28303..000000000000
--- a/packages/react/src/ReactMutableSource.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {MutableSource, MutableSourceGetVersionFn} from 'shared/ReactTypes';
-
-export function createMutableSource<Source: $NonMaybeType<mixed>>(
-  source: Source,
-  getVersion: MutableSourceGetVersionFn,
-): MutableSource<Source> {
-  const mutableSource: MutableSource<Source> = {
-    _getVersion: getVersion,
-    _source: source,
-    _workInProgressVersionPrimary: null,
-    _workInProgressVersionSecondary: null,
-  };
-
-  if (__DEV__) {
-    mutableSource._currentPrimaryRenderer = null;
-    mutableSource._currentSecondaryRenderer = null;
-
-    // Used to detect side effects that update a mutable source during render.
-    // See https://github.com/facebook/react/issues/19948
-    mutableSource._currentlyRenderingFiber = null;
-    mutableSource._initialVersionAsOfFirstRender = null;
-  }
-
-  return mutableSource;
-}
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index 9381778b4435..c18138226ad3 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -17,7 +17,6 @@ export {
   SuspenseList,
   cloneElement,
   createElement,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -33,7 +32,6 @@ export {
   useDeferredValue,
   useDeferredValue as unstable_useDeferredValue,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useTransition,
   version,
 } from './src/React';
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 43f42bddb91d..277f633387d1 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -101,56 +101,6 @@ export type ReactScopeInstance = {|
   getChildContextValues: <T>(context: ReactContext<T>) => Array<T>,
 |};
 
-// Mutable source version can be anything (e.g. number, string, immutable data structure)
-// so long as it changes every time any part of the source changes.
-export type MutableSourceVersion = $NonMaybeType<mixed>;
-
-export type MutableSourceGetSnapshotFn<
-  Source: $NonMaybeType<mixed>,
-  Snapshot,
-> = (source: Source) => Snapshot;
-
-export type MutableSourceSubscribeFn<Source: $NonMaybeType<mixed>, Snapshot> = (
-  source: Source,
-  callback: (snapshot: Snapshot) => void,
-) => () => void;
-
-export type MutableSourceGetVersionFn = (
-  source: $NonMaybeType<mixed>,
-) => MutableSourceVersion;
-
-export type MutableSource<Source: $NonMaybeType<mixed>> = {|
-  _source: Source,
-
-  _getVersion: MutableSourceGetVersionFn,
-
-  // Tracks the version of this source at the time it was most recently read.
-  // Used to determine if a source is safe to read from before it has been subscribed to.
-  // Version number is only used during mount,
-  // since the mechanism for determining safety after subscription is expiration time.
-  //
-  // 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.
-  // We use the same approach for Context.
-  _workInProgressVersionPrimary: null | MutableSourceVersion,
-  _workInProgressVersionSecondary: null | MutableSourceVersion,
-
-  // DEV only
-  // Used to detect multiple renderers using the same mutable source.
-  _currentPrimaryRenderer?: Object | null,
-  _currentSecondaryRenderer?: Object | null,
-
-  // DEV only
-  // Used to detect side effects that update a mutable source during render.
-  // See https://github.com/facebook/react/issues/19948
-  _currentlyRenderingFiber?: Fiber | null,
-  _initialVersionAsOfFirstRender?: MutableSourceVersion | null,
-|};
-
 // 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 {

From 293059e52b57f9debdb01a235e29c678cadfc476 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 20 Sep 2021 10:07:25 -0400
Subject: [PATCH 0867/1603] replace-fork should not clear uncommitted changes
 (#22348)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The replace-fork script depends on ESLint to fix the reconciler imports
— `.old` -> `.new` or vice versa. If ESLint crashes, it can leave the
imports in an incorrect state.

As a convenience, @bvaughn updated the script to automatically run
`git checkout -- .` if the ESLint command fails. An unintended
consequence of the strategy is that if the working directory is not
clean, then any uncommitted changes will be lost.

We need a better strategy for this that prevents the accidental loss of
work. One option is to exit early if the working directory is not clean
before you run the script, though that affects the usability of
the script.

An ideal solution would reset the working directory back to whatever
state it was in before the script ran, perhaps by stashing all the
changes and restoring them if the script aborts.

Until we think of something better, I've commmented out the branch.
---
 scripts/merge-fork/replace-fork.js | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/scripts/merge-fork/replace-fork.js b/scripts/merge-fork/replace-fork.js
index 15a6f6998bb4..993bad08f6fa 100644
--- a/scripts/merge-fork/replace-fork.js
+++ b/scripts/merge-fork/replace-fork.js
@@ -22,15 +22,27 @@ async function main() {
   await Promise.all(oldFilenames.map(unforkFile));
 
   // Use ESLint to autofix imports
-  const spawn = spawnSync('yarn', ['linc', '--fix'], {
+  spawnSync('yarn', ['linc', '--fix'], {
     stdio: ['inherit', 'inherit', 'pipe'],
   });
-  if (spawn.stderr.toString() !== '') {
-    spawnSync('git', ['checkout', '.']);
+  // TODO: If eslint crashes, it may not have successfully fixed all
+  // the imports, which would leave the reconciler files in an inconsistent
+  // state. So we used to crash and reset the working directory. But that
+  // solution assumed that the working directory was clean before you run the
+  // command — if it wasn't, it'll not only reset the synced reconciler files,
+  // but all the other uncommitted changes.
+  //
+  // We need a different strategy to prevent loss of work. For example, we could
+  // exit early if the working directory is not clean before you run the script.
+  //
+  // Until we think of something better, I've commmented out this branch to
+  // prevent work from accidentally being lost.
+  // if (spawn.stderr.toString() !== '') {
+  //   spawnSync('git', ['checkout', '.']);
 
-    console.log(Error(spawn.stderr));
-    process.exitCode = 1;
-  }
+  //   console.log(Error(spawn.stderr));
+  //   process.exitCode = 1;
+  // }
 }
 
 async function unforkFile(oldFilename) {

From 57e4d6872fe5786220d23aa4781ff33af65ffeaa Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 20 Sep 2021 11:10:17 -0400
Subject: [PATCH 0868/1603] replace-fork: Cleanup after failure if no unstaged
 changes (#22364)

---
 scripts/merge-fork/replace-fork.js | 79 +++++++++++++++++++++++-------
 1 file changed, 60 insertions(+), 19 deletions(-)

diff --git a/scripts/merge-fork/replace-fork.js b/scripts/merge-fork/replace-fork.js
index 993bad08f6fa..8369d271bb2b 100644
--- a/scripts/merge-fork/replace-fork.js
+++ b/scripts/merge-fork/replace-fork.js
@@ -4,9 +4,10 @@
 
 // Copies the contents of the new fork into the old fork
 
+const chalk = require('chalk');
 const {promisify} = require('util');
 const glob = promisify(require('glob'));
-const {spawnSync} = require('child_process');
+const {execSync, spawnSync} = require('child_process');
 const fs = require('fs');
 const minimist = require('minimist');
 
@@ -18,31 +19,71 @@ const argv = minimist(process.argv.slice(2), {
 });
 
 async function main() {
+  const status = execSync('git status').toString();
+  const hadUnstagedChanges = status.includes('Changes not staged for commit');
+  if (hadUnstagedChanges) {
+    const readline = require('readline');
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+
+    await new Promise(resolve => {
+      rl.question(
+        `\n${chalk.yellow.bold(
+          'Unstaged changes were found in repository.'
+        )} Do you want to continue? (Y/n) `,
+        input => {
+          switch (input.trim().toLowerCase()) {
+            case '':
+            case 'y':
+            case 'yes':
+              resolve();
+              break;
+            default:
+              console.log('No modifications were made.');
+              process.exit(0);
+              break;
+          }
+        }
+      );
+    });
+  }
+
   const oldFilenames = await glob('packages/react-reconciler/**/*.old.js');
   await Promise.all(oldFilenames.map(unforkFile));
 
   // Use ESLint to autofix imports
-  spawnSync('yarn', ['linc', '--fix'], {
+  const command = spawnSync('yarn', ['linc', '--fix'], {
     stdio: ['inherit', 'inherit', 'pipe'],
   });
-  // TODO: If eslint crashes, it may not have successfully fixed all
-  // the imports, which would leave the reconciler files in an inconsistent
-  // state. So we used to crash and reset the working directory. But that
-  // solution assumed that the working directory was clean before you run the
-  // command — if it wasn't, it'll not only reset the synced reconciler files,
-  // but all the other uncommitted changes.
-  //
-  // We need a different strategy to prevent loss of work. For example, we could
-  // exit early if the working directory is not clean before you run the script.
-  //
-  // Until we think of something better, I've commmented out this branch to
-  // prevent work from accidentally being lost.
-  // if (spawn.stderr.toString() !== '') {
-  //   spawnSync('git', ['checkout', '.']);
+  if (command.status === 1) {
+    console.log(
+      chalk.bold.red('\nreplace-fork script failed with the following error:')
+    );
+    console.error(Error(command.stderr));
 
-  //   console.log(Error(spawn.stderr));
-  //   process.exitCode = 1;
-  // }
+    // If eslint crashes, it may not have successfully fixed all the imports,
+    // which would leave the reconciler files in an inconsistent stat.
+    // It would be nice to clean up the working directory in this case,
+    // but it's only safe to do that if we aren't going to override any previous changes.
+    if (!hadUnstagedChanges) {
+      spawnSync('git', ['checkout', '.']);
+    } else {
+      console.log(
+        `\n${chalk.yellow.bold(
+          'Unstaged changes were present when `replace-fork` was run.'
+        )} ` +
+          `To cleanup the repository run:\n  ${chalk.bold(
+            'git checkout packages/react-reconciler'
+          )}`
+      );
+    }
+
+    process.exit(1);
+  } else {
+    process.exit(0);
+  }
 }
 
 async function unforkFile(oldFilename) {

From 86b3e2461da28d9c074b04f42e4ca69773902fec Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 20 Sep 2021 11:31:02 -0400
Subject: [PATCH 0869/1603] Implement useSyncExternalStore on server (#22347)

Adds a third argument called `getServerSnapshot`.

On the server, React calls this one instead of the normal `getSnapshot`.
We also call it during hydration.

So it represents the snapshot that is used to generate the initial,
server-rendered HTML. The purpose is to avoid server-client mismatches.
What we render during hydration needs to match up exactly with what we
render on the server.

The pattern is for the server to send down a serialized copy of the
store that was used to generate the initial HTML. On the client, React
will call either `getSnapshot` or `getServerSnapshot` on the client as
appropriate, depending on whether it's currently hydrating.

The argument is optional for fully client rendered use cases. If the
user does attempt to omit `getServerSnapshot`, and the hook is called
on the server, React will abort that subtree on the server and
revert to client rendering, up to the nearest Suspense boundary.

For the userspace shim, we will need to use a heuristic (canUseDOM)
to determine whether we are in a server environment. I'll do that in
a follow up.
---
 .../react-debug-tools/src/ReactDebugHooks.js  |   1 +
 .../src/__tests__/ReactDOMFizzServer-test.js  | 157 ++++++++++++++++++
 .../src/server/ReactPartialRendererHooks.js   |  10 +-
 .../src/ReactFiberHooks.new.js                |  97 +++++++----
 .../src/ReactFiberHooks.old.js                |  97 +++++++----
 .../src/ReactInternalTypes.js                 |   1 +
 packages/react-server/src/ReactFizzHooks.js   |  10 +-
 packages/react/src/ReactHooks.js              |   7 +-
 .../useSyncExternalStoreShared-test.js        |   4 +
 .../src/useSyncExternalStore.js               |   4 +-
 .../src/useSyncExternalStoreExtra.js          |  21 ++-
 scripts/error-codes/codes.json                |   3 +-
 12 files changed, 341 insertions(+), 71 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index a57c38ab103c..cddbb0810f75 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -258,6 +258,7 @@ function useMemo<T>(
 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
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 6a5ba954bda3..dfe861142ab7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -17,6 +17,8 @@ let ReactDOM;
 let ReactDOMFizzServer;
 let Suspense;
 let SuspenseList;
+let useSyncExternalStore;
+let useSyncExternalStoreExtra;
 let PropTypes;
 let textCache;
 let document;
@@ -39,6 +41,9 @@ describe('ReactDOMFizzServer', () => {
     Stream = require('stream');
     Suspense = React.Suspense;
     SuspenseList = React.SuspenseList;
+    useSyncExternalStore = React.unstable_useSyncExternalStore;
+    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
+      .useSyncExternalStoreExtra;
     PropTypes = require('prop-types');
 
     textCache = new Map();
@@ -1478,4 +1483,156 @@ describe('ReactDOMFizzServer', () => {
     // We should've been able to display the content without waiting for the rest of the fallback.
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
+
+  // @gate supportsNativeUseSyncExternalStore
+  // @gate experimental
+  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.unstable_yieldValue(text);
+      return text;
+    }
+
+    function App() {
+      const value = useSyncExternalStore(
+        subscribe,
+        getClientSnapshot,
+        getServerSnapshot,
+      );
+      return (
+        <div ref={ref}>
+          <Child text={value} />
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <Suspense fallback="Loading...">
+          <App />
+        </Suspense>,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      startWriting();
+    });
+    expect(Scheduler).toHaveYielded(['server']);
+
+    const serverRenderedDiv = container.getElementsByTagName('div')[0];
+
+    ReactDOM.hydrateRoot(container, <App />);
+
+    // The first paint uses the server snapshot
+    expect(Scheduler).toFlushUntilNextPaint(['server']);
+    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
+    // Hydration succeeded
+    expect(ref.current).toEqual(serverRenderedDiv);
+
+    // Asynchronously we detect that the store has changed on the client,
+    // and patch up the inconsistency
+    expect(Scheduler).toFlushUntilNextPaint(['client']);
+    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+    expect(ref.current).toEqual(serverRenderedDiv);
+  });
+
+  // The selector implementation uses the lazy ref initialization pattern
+  // @gate !(enableUseRefAccessWarning && __DEV__)
+  // @gate supportsNativeUseSyncExternalStore
+  // @gate experimental
+  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.unstable_yieldValue(text);
+      return text;
+    }
+
+    function App() {
+      const {env} = useSyncExternalStoreExtra(
+        subscribe,
+        getClientSnapshot,
+        getServerSnapshot,
+        selector,
+        isEqual,
+      );
+      return (
+        <div ref={ref}>
+          <Child text={env} />
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <Suspense fallback="Loading...">
+          <App />
+        </Suspense>,
+        writable,
+        {
+          onError(x) {
+            loggedErrors.push(x);
+          },
+        },
+      );
+      startWriting();
+    });
+    expect(Scheduler).toHaveYielded(['server']);
+
+    const serverRenderedDiv = container.getElementsByTagName('div')[0];
+
+    ReactDOM.hydrateRoot(container, <App />);
+
+    // The first paint uses the server snapshot
+    expect(Scheduler).toFlushUntilNextPaint(['server']);
+    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
+    // Hydration succeeded
+    expect(ref.current).toEqual(serverRenderedDiv);
+
+    // Asynchronously we detect that the store has changed on the client,
+    // and patch up the inconsistency
+    expect(Scheduler).toFlushUntilNextPaint(['client']);
+    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+    expect(ref.current).toEqual(serverRenderedDiv);
+  });
 });
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 175a394a4dbf..a57e6952a3fd 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -464,8 +464,16 @@ export function useCallback<T>(
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  getServerSnapshot?: () => T,
 ): T {
-  throw new Error('Not yet implemented');
+  if (getServerSnapshot === undefined) {
+    invariant(
+      false,
+      'Missing getServerSnapshot, which is required for ' +
+        'server-rendered content. Will revert to client rendering.',
+    );
+  }
+  return getServerSnapshot();
 }
 
 function useDeferredValue<T>(value: T): T {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 5f1c30a834c1..f797d7d5812e 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -938,23 +938,64 @@ function rerenderReducer<S, I, A>(
 function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  getServerSnapshot?: () => T,
 ): T {
   const fiber = currentlyRenderingFiber;
   const hook = mountWorkInProgressHook();
-  // 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.
-  const nextSnapshot = getSnapshot();
-  if (__DEV__) {
-    if (!didWarnUncachedGetSnapshot) {
-      if (nextSnapshot !== getSnapshot()) {
-        console.error(
-          'The result of getSnapshot should be cached to avoid an infinite loop',
-        );
-        didWarnUncachedGetSnapshot = true;
+
+  let nextSnapshot;
+  const isHydrating = getIsHydrating();
+  if (isHydrating) {
+    if (getServerSnapshot === undefined) {
+      invariant(
+        false,
+        '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) {
+        if (nextSnapshot !== getSnapshot()) {
+          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();
+    invariant(
+      root !== null,
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+    if (!includesBlockingLane(root, renderLanes)) {
+      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,
@@ -980,24 +1021,13 @@ function mountSyncExternalStore<T>(
     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();
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
-  if (!includesBlockingLane(root, renderLanes)) {
-    pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
-  }
-
   return nextSnapshot;
 }
 
 function updateSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  getServerSnapshot?: () => T,
 ): T {
   const fiber = currentlyRenderingFiber;
   const hook = updateWorkInProgressHook();
@@ -2235,10 +2265,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       mountHookTypesDev();
-      return mountSyncExternalStore(subscribe, getSnapshot);
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2366,10 +2397,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       updateHookTypesDev();
-      return mountSyncExternalStore(subscribe, getSnapshot);
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2497,10 +2529,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2629,10 +2662,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2774,11 +2808,12 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       warnInvalidHookAccess();
       mountHookTypesDev();
-      return mountSyncExternalStore(subscribe, getSnapshot);
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2921,11 +2956,12 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -3069,11 +3105,12 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 016b208d30d9..4d93786f6b79 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -938,23 +938,64 @@ function rerenderReducer<S, I, A>(
 function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  getServerSnapshot?: () => T,
 ): T {
   const fiber = currentlyRenderingFiber;
   const hook = mountWorkInProgressHook();
-  // 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.
-  const nextSnapshot = getSnapshot();
-  if (__DEV__) {
-    if (!didWarnUncachedGetSnapshot) {
-      if (nextSnapshot !== getSnapshot()) {
-        console.error(
-          'The result of getSnapshot should be cached to avoid an infinite loop',
-        );
-        didWarnUncachedGetSnapshot = true;
+
+  let nextSnapshot;
+  const isHydrating = getIsHydrating();
+  if (isHydrating) {
+    if (getServerSnapshot === undefined) {
+      invariant(
+        false,
+        '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) {
+        if (nextSnapshot !== getSnapshot()) {
+          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();
+    invariant(
+      root !== null,
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+    if (!includesBlockingLane(root, renderLanes)) {
+      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,
@@ -980,24 +1021,13 @@ function mountSyncExternalStore<T>(
     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();
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
-  if (!includesBlockingLane(root, renderLanes)) {
-    pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
-  }
-
   return nextSnapshot;
 }
 
 function updateSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  getServerSnapshot?: () => T,
 ): T {
   const fiber = currentlyRenderingFiber;
   const hook = updateWorkInProgressHook();
@@ -2235,10 +2265,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       mountHookTypesDev();
-      return mountSyncExternalStore(subscribe, getSnapshot);
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2366,10 +2397,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       updateHookTypesDev();
-      return mountSyncExternalStore(subscribe, getSnapshot);
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2497,10 +2529,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2629,10 +2662,11 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2774,11 +2808,12 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       warnInvalidHookAccess();
       mountHookTypesDev();
-      return mountSyncExternalStore(subscribe, getSnapshot);
+      return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -2921,11 +2956,12 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
@@ -3069,11 +3105,12 @@ if (__DEV__) {
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
+      getServerSnapshot?: () => T,
     ): T {
       currentHookNameInDev = 'useSyncExternalStore';
       warnInvalidHookAccess();
       updateHookTypesDev();
-      return updateSyncExternalStore(subscribe, getSnapshot);
+      return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
     useOpaqueIdentifier(): OpaqueIDType | void {
       currentHookNameInDev = 'useOpaqueIdentifier';
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 692ec27bd7e8..bf7ffb2b33d1 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -294,6 +294,7 @@ export type Dispatcher = {|
   useSyncExternalStore<T>(
     subscribe: (() => void) => () => void,
     getSnapshot: () => T,
+    getServerSnapshot?: () => T,
   ): T,
   useOpaqueIdentifier(): any,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index c272ddbbb9ad..9976b5be90c1 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -447,8 +447,16 @@ export function useCallback<T>(
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  getServerSnapshot?: () => T,
 ): T {
-  throw new Error('Not yet implemented');
+  if (getServerSnapshot === undefined) {
+    invariant(
+      false,
+      'Missing getServerSnapshot, which is required for ' +
+        'server-rendered content. Will revert to client rendering.',
+    );
+  }
+  return getServerSnapshot();
 }
 
 function useDeferredValue<T>(value: T): T {
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 77dbd53c9ce1..e981907baed5 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -166,9 +166,14 @@ export function useOpaqueIdentifier(): OpaqueIDType | void {
 export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  getServerSnapshot?: () => T,
 ): T {
   const dispatcher = resolveDispatcher();
-  return dispatcher.useSyncExternalStore(subscribe, getSnapshot);
+  return dispatcher.useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot,
+  );
 }
 
 export function useCacheRefresh(): <T>(?() => T, ?T) => void {
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index cb1bd3b1c8c7..93dd24c83823 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -588,6 +588,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         const a = useSyncExternalStoreExtra(
           store.subscribe,
           store.getState,
+          null,
           selector,
         );
         return <Text text={'A' + a} />;
@@ -623,6 +624,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         const {a} = useSyncExternalStoreExtra(
           store.subscribe,
           store.getState,
+          null,
           state => ({a: state.a}),
           (state1, state2) => state1.a === state2.a,
         );
@@ -632,6 +634,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         const {b} = useSyncExternalStoreExtra(
           store.subscribe,
           store.getState,
+          null,
           state => {
             return {b: state.b};
           },
@@ -710,6 +713,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       const items = useSyncExternalStoreExtra(
         store.subscribe,
         store.getState,
+        null,
         inlineSelector,
         shallowEqualArray,
       );
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 7ad5f3ebafc2..6d3199d7f2d5 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -45,6 +45,8 @@ let didWarnUncachedGetSnapshot = false;
 function useSyncExternalStore_shim<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
+  // TODO: Add a canUseDOM check and use this one on the server
+  getServerSnapshot?: () => T,
 ): T {
   if (__DEV__) {
     if (!didWarnOld18Alpha) {
@@ -95,7 +97,7 @@ function useSyncExternalStore_shim<T>(
   // 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.
-  // TODO: Circumvent SSR warning
+  // TODO: Circumvent SSR warning with canUseDOM check
   useLayoutEffect(() => {
     inst.value = value;
     inst.getSnapshot = getSnapshot;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
index eeff987ae8f1..f4a1885aec5b 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
@@ -19,6 +19,7 @@ const {useRef, useEffect, useMemo, useDebugValue} = React;
 export function useSyncExternalStoreExtra<Snapshot, Selection>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => Snapshot,
+  getServerSnapshot: void | null | (() => Snapshot),
   selector: (snapshot: Snapshot) => Selection,
   isEqual?: (a: Selection, b: Selection) => boolean,
 ): Selection {
@@ -35,7 +36,7 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
     inst = instRef.current;
   }
 
-  const getSnapshotWithMemoizedSelector = useMemo(() => {
+  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
@@ -43,9 +44,7 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
     let hasMemo = false;
     let memoizedSnapshot;
     let memoizedSelection;
-    return () => {
-      const nextSnapshot = getSnapshot();
-
+    const memoizedSelector = nextSnapshot => {
       if (!hasMemo) {
         // The first time the hook is called, there is no memoized result.
         hasMemo = true;
@@ -91,11 +90,21 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
       memoizedSelection = nextSelection;
       return nextSelection;
     };
-  }, [getSnapshot, selector, isEqual]);
+    // 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,
-    getSnapshotWithMemoizedSelector,
+    getSelection,
+    getServerSelection,
   );
 
   useEffect(() => {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 950598f4c71f..c3206daa0d33 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -394,5 +394,6 @@
   "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."
+  "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."
 }

From 79b8fc66704a9a24588bf41b25afbcd818358b80 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 20 Sep 2021 11:32:13 -0400
Subject: [PATCH 0870/1603] Implement getServerSnapshot in userspace shim
 (#22359)

* Convert useSES shim tests to use React DOM

Idea is that eventually we'll run these tests against an actual build of
React DOM 17 to test backwards compatibility.

* Implement getServerSnapshot in userspace shim

If the DOM is not present, we assume that we are running in a server
environment and return the result of `getServerSnapshot`.

This heuristic doesn't work in React Native, so we'll need to provide
a separate native build (using the `.native` extension). I've left this
for a follow-up.

We can't call `getServerSnapshot` on the client, because in versions of
React before 18, there's no built-in mechanism to detect whether we're
hydrating. To avoid a server mismatch warning, users must account for
this themselves and return the correct value inside `getSnapshot`.

Note that none of this is relevant to the built-in API that is being
added in 18. This only affects the userspace shim that is provided
for backwards compatibility with versions 16 and 17.
---
 .../useSyncExternalStoreShared-test.js        | 203 ++++++++++++------
 .../useSyncExternalStoreShimServer-test.js    |  98 +++++++++
 .../src/useSyncExternalStore.js               |  35 ++-
 scripts/error-codes/codes.json                |   3 +-
 4 files changed, 264 insertions(+), 75 deletions(-)
 create mode 100644 packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 93dd24c83823..6536f65b7f2a 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -12,7 +12,7 @@
 let useSyncExternalStore;
 let useSyncExternalStoreExtra;
 let React;
-let ReactNoop;
+let ReactDOM;
 let Scheduler;
 let act;
 let useState;
@@ -27,11 +27,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
     // Remove the built-in API from the React exports to force the package to
     // use the shim.
-    // TODO: Don't do this during a variant test run. That way these tests run
-    // against both the shim and the built-in implementation.
-    if (gate(flags => flags.variant)) {
-      // We'll use the variant flag to represent the native implementation
-    } else {
+    if (!gate(flags => flags.supportsNativeUseSyncExternalStore)) {
       // and the non-variant tests for the shim.
       //
       // Remove useSyncExternalStore from the React imports so that we use the
@@ -55,7 +51,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     }
 
     React = require('react');
-    ReactNoop = require('react-noop-renderer');
+    ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
     useState = React.useState;
     useEffect = React.useEffect;
@@ -66,7 +62,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     // 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(() => ReactNoop.batchedUpdates(cb));
+    act = cb => internalAct(() => ReactDOM.unstable_batchedUpdates(cb));
 
     useSyncExternalStore = require('use-sync-external-store')
       .useSyncExternalStore;
@@ -79,19 +75,24 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     return text;
   }
 
-  function createRoot(element) {
+  function createRoot(container) {
     // This wrapper function exists so we can test both legacy roots and
     // concurrent roots.
-    if (gate(flags => flags.variant)) {
+    if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
       // 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 ReactNoop.createRoot();
+      return ReactDOM.createRoot(container);
     } else {
-      return ReactNoop.createLegacyRoot();
+      ReactDOM.render(null, container);
+      return {
+        render(children) {
+          ReactDOM.render(children, container);
+        },
+      };
     }
   }
 
@@ -101,7 +102,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     return {
       set(text) {
         currentState = text;
-        ReactNoop.batchedUpdates(() => {
+        ReactDOM.unstable_batchedUpdates(() => {
           listeners.forEach(listener => listener());
         });
       },
@@ -126,17 +127,18 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={text} />;
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     await act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded(['Initial']);
-    expect(root).toMatchRenderedOutput('Initial');
+    expect(container.textContent).toEqual('Initial');
 
     await act(() => {
       store.set('Updated');
     });
     expect(Scheduler).toHaveYielded(['Updated']);
-    expect(root).toMatchRenderedOutput('Updated');
+    expect(container.textContent).toEqual('Updated');
   });
 
   test('skips re-rendering if nothing changes', () => {
@@ -147,11 +149,12 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={text} />;
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded(['Initial']);
-    expect(root).toMatchRenderedOutput('Initial');
+    expect(container.textContent).toEqual('Initial');
 
     // Update to the same value
     act(() => {
@@ -159,7 +162,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
     // Should not re-render
     expect(Scheduler).toHaveYielded([]);
-    expect(root).toMatchRenderedOutput('Initial');
+    expect(container.textContent).toEqual('Initial');
   });
 
   test('switch to a different store', async () => {
@@ -174,21 +177,22 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={value} />;
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     await act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded([0]);
-    expect(root).toMatchRenderedOutput('0');
+    expect(container.textContent).toEqual('0');
 
     await act(() => {
       storeA.set(1);
     });
     expect(Scheduler).toHaveYielded([1]);
-    expect(root).toMatchRenderedOutput('1');
+    expect(container.textContent).toEqual('1');
 
     // Switch stores and update in the same batch
     act(() => {
-      ReactNoop.flushSync(() => {
+      ReactDOM.flushSync(() => {
         // This update will be disregarded
         storeA.set(2);
         setStore(storeB);
@@ -196,7 +200,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
     // Now reading from B instead of A
     expect(Scheduler).toHaveYielded([0]);
-    expect(root).toMatchRenderedOutput('0');
+    expect(container.textContent).toEqual('0');
 
     // Update A
     await act(() => {
@@ -204,14 +208,14 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
     // Nothing happened, because we're no longer subscribed to A
     expect(Scheduler).toHaveYielded([]);
-    expect(root).toMatchRenderedOutput('0');
+    expect(container.textContent).toEqual('0');
 
     // Update B
     await act(() => {
       storeB.set(1);
     });
     expect(Scheduler).toHaveYielded([1]);
-    expect(root).toMatchRenderedOutput('1');
+    expect(container.textContent).toEqual('1');
   });
 
   test('selecting a specific value inside getSnapshot', async () => {
@@ -235,11 +239,12 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       );
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     act(() => root.render(<App />));
 
     expect(Scheduler).toHaveYielded(['A0', 'B0']);
-    expect(root).toMatchRenderedOutput('A0B0');
+    expect(container.textContent).toEqual('A0B0');
 
     // Update b but not a
     await act(() => {
@@ -247,7 +252,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
     // Only b re-renders
     expect(Scheduler).toHaveYielded(['B1']);
-    expect(root).toMatchRenderedOutput('A0B1');
+    expect(container.textContent).toEqual('A0B1');
 
     // Update a but not b
     await act(() => {
@@ -255,12 +260,12 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
     // Only a re-renders
     expect(Scheduler).toHaveYielded(['A1']);
-    expect(root).toMatchRenderedOutput('A1B1');
+    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 !variant
+  // @gate !supportsNativeUseSyncExternalStore
   test(
     "compares to current state before bailing out, even when there's a " +
       'mutation in between the sync and passive effects',
@@ -275,7 +280,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         return <Text text={value} />;
       }
 
-      const root = createRoot();
+      const container = document.createElement('div');
+      const root = createRoot(container);
       act(() => root.render(<App />));
       expect(Scheduler).toHaveYielded([0, 'Passive effect: 0']);
 
@@ -287,7 +293,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         1,
         // Passive effect hasn't fired yet
       ]);
-      expect(root).toMatchRenderedOutput('1');
+      expect(container.textContent).toEqual('1');
 
       // Flip the store state back to the previous value.
       store.set(0);
@@ -300,7 +306,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         0,
       ]);
       // Should flip back to 0
-      expect(root).toMatchRenderedOutput('0');
+      expect(container.textContent).toEqual('0');
     },
   );
 
@@ -344,10 +350,11 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       );
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     act(() => root.render(<App />));
     expect(Scheduler).toHaveYielded(['A1']);
-    expect(root).toMatchRenderedOutput('A1');
+    expect(container.textContent).toEqual('A1');
 
     act(() => {
       // Change getSnapshot and update the store in the same batch
@@ -360,7 +367,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       // incorrectly bailed out here instead of re-rendering.
       'B2',
     ]);
-    expect(root).toMatchRenderedOutput('B2');
+    expect(container.textContent).toEqual('B2');
   });
 
   test('mutating the store in between render and commit when getSnapshot has _not_ changed', () => {
@@ -401,10 +408,11 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       );
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     act(() => root.render(<App />));
     expect(Scheduler).toHaveYielded(['A1']);
-    expect(root).toMatchRenderedOutput('A1');
+    expect(container.textContent).toEqual('A1');
 
     // This will cause a layout effect, and in the layout effect we'll update
     // the store
@@ -418,7 +426,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       'Update B in commit phase',
       // No re-render
     ]);
-    expect(root).toMatchRenderedOutput('A1');
+    expect(container.textContent).toEqual('A1');
   });
 
   test("does not bail out if the previous update hasn't finished yet", async () => {
@@ -440,7 +448,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={value} />;
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     act(() =>
       root.render(
         <>
@@ -450,13 +459,13 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       ),
     );
     expect(Scheduler).toHaveYielded([0, 0]);
-    expect(root).toMatchRenderedOutput('00');
+    expect(container.textContent).toEqual('00');
 
     await act(() => {
       store.set(1);
     });
     expect(Scheduler).toHaveYielded([1, 1, 'Reset back to 0', 0, 0]);
-    expect(root).toMatchRenderedOutput('00');
+    expect(container.textContent).toEqual('00');
   });
 
   test('uses the latest getSnapshot, even if it changed in the same batch as a store update', () => {
@@ -473,20 +482,21 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={text} />;
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     act(() => root.render(<App />));
     expect(Scheduler).toHaveYielded([0]);
 
     // Update the store and getSnapshot at the same time
     act(() => {
-      ReactNoop.flushSync(() => {
+      ReactDOM.flushSync(() => {
         setGetSnapshot(() => getSnapshotB);
         store.set({a: 1, b: 2});
       });
     });
     // It should read from B instead of A
     expect(Scheduler).toHaveYielded([2]);
-    expect(root).toMatchRenderedOutput('2');
+    expect(container.textContent).toEqual('2');
   });
 
   test('handles errors thrown by getSnapshot', async () => {
@@ -521,7 +531,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     }
 
     const errorBoundary = React.createRef(null);
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     act(() =>
       root.render(
         <ErrorBoundary ref={errorBoundary}>
@@ -530,13 +541,13 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       ),
     );
     expect(Scheduler).toHaveYielded([0]);
-    expect(root).toMatchRenderedOutput('0');
+    expect(container.textContent).toEqual('0');
 
     // Update that throws in a getSnapshot. We can catch it with an error boundary.
     await act(() => {
       store.set({value: 1, throwInGetSnapshot: true, throwInIsEqual: false});
     });
-    if (gate(flags => flags.variant)) {
+    if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
       expect(Scheduler).toHaveYielded([
         'Error in getSnapshot',
         // In a concurrent root, React renders a second time to attempt to
@@ -546,7 +557,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     } else {
       expect(Scheduler).toHaveYielded(['Error in getSnapshot']);
     }
-    expect(root).toMatchRenderedOutput('Error in getSnapshot');
+    expect(container.textContent).toEqual('Error in getSnapshot');
   });
 
   test('Infinite loop if getSnapshot keeps returning new reference', () => {
@@ -557,19 +568,18 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       return <Text text={JSON.stringify(text)} />;
     }
 
-    spyOnDev(console, 'error');
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
 
-    expect(() => act(() => root.render(<App />))).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.',
-    );
-    if (__DEV__) {
-      expect(console.error.calls.argsFor(0)[0]).toMatch(
-        'The result of getSnapshot should be cached to avoid an infinite loop',
+    expect(() => {
+      expect(() => act(() => root.render(<App />))).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.',
       );
-    }
+    }).toErrorDev(
+      'The result of getSnapshot should be cached to avoid an infinite loop',
+    );
   });
 
   describe('extra features implemented in user-space', () => {
@@ -594,11 +604,12 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         return <Text text={'A' + a} />;
       }
 
-      const root = createRoot();
+      const container = document.createElement('div');
+      const root = createRoot(container);
       act(() => root.render(<App />));
 
       expect(Scheduler).toHaveYielded(['App', 'Selector', 'A0']);
-      expect(root).toMatchRenderedOutput('A0');
+      expect(container.textContent).toEqual('A0');
 
       // Update the store
       await act(() => {
@@ -612,7 +623,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         // the previous result without running the selector again
         'A1',
       ]);
-      expect(root).toMatchRenderedOutput('A1');
+      expect(container.textContent).toEqual('A1');
     });
 
     // The selector implementation uses the lazy ref initialization pattern
@@ -652,11 +663,12 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         );
       }
 
-      const root = createRoot();
+      const container = document.createElement('div');
+      const root = createRoot(container);
       act(() => root.render(<App />));
 
       expect(Scheduler).toHaveYielded(['A0', 'B0']);
-      expect(root).toMatchRenderedOutput('A0B0');
+      expect(container.textContent).toEqual('A0B0');
 
       // Update b but not a
       await act(() => {
@@ -664,7 +676,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       });
       // Only b re-renders
       expect(Scheduler).toHaveYielded(['B1']);
-      expect(root).toMatchRenderedOutput('A0B1');
+      expect(container.textContent).toEqual('A0B1');
 
       // Update a but not b
       await act(() => {
@@ -672,7 +684,59 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       });
       // Only a re-renders
       expect(Scheduler).toHaveYielded(['A1']);
-      expect(root).toMatchRenderedOutput('A1B1');
+      expect(container.textContent).toEqual('A1B1');
+    });
+
+    test('basic server hydration', async () => {
+      const store = createExternalStore('client');
+
+      const ref = React.createRef();
+      function App() {
+        const text = useSyncExternalStore(
+          store.subscribe,
+          store.getState,
+          () => 'server',
+        );
+        useEffect(() => {
+          Scheduler.unstable_yieldValue('Passive effect: ' + text);
+        }, [text]);
+        return (
+          <div ref={ref}>
+            <Text text={text} />
+          </div>
+        );
+      }
+
+      const container = document.createElement('div');
+      container.innerHTML = '<div>server</div>';
+      const serverRenderedDiv = container.getElementsByTagName('div')[0];
+
+      if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
+        act(() => {
+          ReactDOM.hydrateRoot(container, <App />);
+        });
+        expect(Scheduler).toHaveYielded([
+          // 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`.
+        act(() => {
+          expect(() => ReactDOM.hydrate(<App />, container)).toErrorDev(
+            'Text content did not match',
+          );
+        });
+        expect(Scheduler).toHaveYielded(['client', 'Passive effect: client']);
+      }
+      expect(container.textContent).toEqual('client');
+      expect(ref.current).toEqual(serverRenderedDiv);
     });
   });
 
@@ -725,7 +789,8 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       );
     }
 
-    const root = createRoot();
+    const container = document.createElement('div');
+    const root = createRoot(container);
     await act(() => {
       root.render(<App step={0} />);
     });
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 000000000000..9fa5b9ce21eb
--- /dev/null
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+let useSyncExternalStore;
+let React;
+let ReactDOM;
+let ReactDOMServer;
+let Scheduler;
+
+// 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 {
+        // eslint-disable-next-line no-unused-vars
+        startTransition: _,
+        // eslint-disable-next-line no-unused-vars
+        useSyncExternalStore: __,
+        // eslint-disable-next-line no-unused-vars
+        unstable_useSyncExternalStore: ___,
+        ...otherExports
+      } = jest.requireActual('react');
+      return otherExports;
+    });
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+
+    useSyncExternalStore = require('use-sync-external-store')
+      .useSyncExternalStore;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(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;
+      },
+    };
+  }
+
+  test('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 />);
+    expect(Scheduler).toHaveYielded(['server']);
+    expect(html).toEqual('server');
+  });
+});
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 6d3199d7f2d5..6b30854aea03 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -9,6 +9,8 @@
 
 import * as React from 'react';
 import is from 'shared/objectIs';
+import invariant from 'shared/invariant';
+import {canUseDOM} from 'shared/ExecutionEnvironment';
 
 // Intentionally not using named imports because Rollup uses dynamic
 // dispatch for CommonJS interop named imports.
@@ -21,17 +23,38 @@ const {
   unstable_useSyncExternalStore: builtInAPI,
 } = React;
 
+// TODO: This heuristic doesn't work in React Native. We'll need to provide a
+// special build, using the `.native` extension.
+const isServerEnvironment = !canUseDOM;
+
 // Prefer the built-in API, if it exists. If it doesn't exist, then we assume
 // we're in version 16 or 17, so rendering is always synchronous. The shim
 // does not support concurrent rendering, only the built-in API.
 export const useSyncExternalStore =
   builtInAPI !== undefined
-    ? ((builtInAPI: any): typeof useSyncExternalStore_shim)
-    : useSyncExternalStore_shim;
+    ? ((builtInAPI: any): typeof useSyncExternalStore_client)
+    : isServerEnvironment
+    ? useSyncExternalStore_server
+    : useSyncExternalStore_client;
 
 let didWarnOld18Alpha = false;
 let didWarnUncachedGetSnapshot = false;
 
+function useSyncExternalStore_server<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  if (getServerSnapshot === undefined) {
+    invariant(
+      false,
+      'Missing getServerSnapshot, which is required for server-' +
+        'rendered content.',
+    );
+  }
+  return getServerSnapshot();
+}
+
 // 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
@@ -42,10 +65,13 @@ let didWarnUncachedGetSnapshot = false;
 //
 // 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.
-function useSyncExternalStore_shim<T>(
+function useSyncExternalStore_client<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
-  // TODO: Add a canUseDOM check and use this one on the server
+  // Note: The client 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__) {
@@ -97,7 +123,6 @@ function useSyncExternalStore_shim<T>(
   // 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.
-  // TODO: Circumvent SSR warning with canUseDOM check
   useLayoutEffect(() => {
     inst.value = value;
     inst.getSnapshot = getSnapshot;
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index c3206daa0d33..1a6afe0233ed 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -395,5 +395,6 @@
   "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."
+  "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."
 }

From 3ee7a004e59cc7d71e4d3fc698777b381f4ec719 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 20 Sep 2021 17:44:21 +0200
Subject: [PATCH 0871/1603] devtools: Display actual ReactDOM API name in root
 type (#22363)

---
 .../src/__tests__/inspectedElement-test.js    | 59 +++++++++++++++++++
 .../__tests__/inspectedElementSerializer.js   |  1 +
 .../__tests__/legacy/inspectElement-test.js   |  5 ++
 .../src/ReactFiberRoot.new.js                 |  4 +-
 .../src/ReactFiberRoot.old.js                 |  4 +-
 5 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 4586e34e32e1..eb196e76b480 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -176,6 +176,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1584,6 +1585,7 @@ describe('InspectedElement', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1912,6 +1914,7 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
+        "rootType": "render()",
         "state": null,
       }
     `);
@@ -1944,11 +1947,67 @@ describe('InspectedElement', () => {
         "id": 2,
         "owners": null,
         "props": Object {},
+        "rootType": "render()",
         "state": null,
       }
     `);
   });
 
+  it('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 is no longer supported in React 18'],
+        () => {
+          ReactDOM.hydrate(<Example />, container);
+        },
+      );
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrate()"`);
+  });
+
+  it('should display the root type for ReactDOM.render', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      legacyRender(<Example />, container);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
+  });
+
+  it('should display the root type for ReactDOM.hydrateRoot', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      container.innerHTML = '<div></div>';
+      ReactDOM.hydrateRoot(container).render(<Example />);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
+  });
+
+  it('should display the root type for ReactDOM.createRoot', async () => {
+    const Example = () => <div />;
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      ReactDOM.createRoot(container).render(<Example />);
+    }, false);
+
+    const inspectedElement = await inspectElementAtIndex(0);
+    expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
+  });
+
   describe('$r', () => {
     it('should support function components', async () => {
       const Example = () => {
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
index 4721a29722f0..0c249ca5b939 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
@@ -30,6 +30,7 @@ export function print(inspectedElement, serialize, indent) {
     id: inspectedElement.id,
     owners: inspectedElement.owners,
     props: inspectedElement.props,
+    rootType: inspectedElement.rootType,
     state: inspectedElement.state,
   });
 }
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 3afab2f38fee..6e8016c3f4a1 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -83,6 +83,7 @@ describe('InspectedElementContext', () => {
           "a": 1,
           "b": "abc",
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -133,6 +134,7 @@ describe('InspectedElementContext', () => {
           "value_null": null,
           "value_undefined": undefined,
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -408,6 +410,7 @@ describe('InspectedElementContext', () => {
             "preview_long": Generator,
           },
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -461,6 +464,7 @@ describe('InspectedElementContext', () => {
             "number": 42,
           },
         },
+        "rootType": null,
         "state": null,
       }
     `);
@@ -552,6 +556,7 @@ describe('InspectedElementContext', () => {
             "enumerableStringBase": 1,
           },
         },
+        "rootType": null,
         "state": null,
       }
     `);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index d69d2d77e5df..90a1809e4387 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   if (__DEV__) {
     switch (tag) {
       case ConcurrentRoot:
-        this._debugRootType = 'createRoot()';
+        this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
         break;
       case LegacyRoot:
-        this._debugRootType = 'createLegacyRoot()';
+        this._debugRootType = hydrate ? 'hydrate()' : 'render()';
         break;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 8469d6c85b50..dc1ec23ae159 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -83,10 +83,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   if (__DEV__) {
     switch (tag) {
       case ConcurrentRoot:
-        this._debugRootType = 'createRoot()';
+        this._debugRootType = hydrate ? 'hydrateRoot()' : 'createRoot()';
         break;
       case LegacyRoot:
-        this._debugRootType = 'createLegacyRoot()';
+        this._debugRootType = hydrate ? 'hydrate()' : 'render()';
         break;
     }
   }

From 7e8fb98e140a520bbb723d5930cc657b5fb92488 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 20 Sep 2021 13:10:50 -0400
Subject: [PATCH 0872/1603] Enabled enableProfilerChangedHookIndices feature
 flag for all builds (#22365)

---
 .../__snapshots__/profilingCache-test.js.snap | 95 +++++++++++++++++++
 .../config/DevToolsFeatureFlags.core-oss.js   |  2 +-
 .../config/DevToolsFeatureFlags.default.js    |  2 +-
 3 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 8818c8dfb33f..1462a64195d6 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -206,6 +206,7 @@ Object {
     4 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -213,6 +214,7 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -227,6 +229,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -271,6 +274,7 @@ Object {
     4 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -278,6 +282,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -318,6 +323,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -464,6 +470,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -474,6 +481,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -494,6 +502,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -568,6 +577,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -578,6 +588,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -636,6 +647,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -957,6 +969,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -977,6 +990,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -1043,6 +1057,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -1053,6 +1068,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -1073,6 +1089,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -1290,6 +1307,7 @@ Object {
         4 => Object {
           "context": null,
           "didHooksChange": false,
+          "hooks": null,
           "isFirstMount": false,
           "props": Array [],
           "state": null,
@@ -1297,6 +1315,7 @@ Object {
         5 => Object {
           "context": null,
           "didHooksChange": false,
+          "hooks": null,
           "isFirstMount": false,
           "props": Array [],
           "state": null,
@@ -1311,6 +1330,7 @@ Object {
         2 => Object {
           "context": null,
           "didHooksChange": false,
+          "hooks": null,
           "isFirstMount": false,
           "props": Array [
             "count",
@@ -1352,6 +1372,7 @@ Object {
         4 => Object {
           "context": null,
           "didHooksChange": false,
+          "hooks": null,
           "isFirstMount": false,
           "props": Array [],
           "state": null,
@@ -1359,6 +1380,7 @@ Object {
         2 => Object {
           "context": null,
           "didHooksChange": false,
+          "hooks": null,
           "isFirstMount": false,
           "props": Array [
             "count",
@@ -1396,6 +1418,7 @@ Object {
         2 => Object {
           "context": null,
           "didHooksChange": false,
+          "hooks": null,
           "isFirstMount": false,
           "props": Array [
             "count",
@@ -1777,6 +1800,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -1787,6 +1811,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -1807,6 +1832,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -1881,6 +1907,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -1891,6 +1918,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -1949,6 +1977,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -2528,6 +2557,7 @@ Object {
     4 => Object {
       "context": false,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -2570,6 +2600,9 @@ Object {
     4 => Object {
       "context": false,
       "didHooksChange": true,
+      "hooks": Array [
+        1,
+      ],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -2604,6 +2637,9 @@ Object {
     4 => Object {
       "context": false,
       "didHooksChange": true,
+      "hooks": Array [
+        0,
+      ],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -2638,6 +2674,7 @@ Object {
     4 => Object {
       "context": true,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -2678,6 +2715,7 @@ Object {
     4 => Object {
       "context": true,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -2788,6 +2826,7 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -2854,6 +2893,9 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": true,
+                "hooks": Array [
+                  1,
+                ],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -2894,6 +2936,9 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": true,
+                "hooks": Array [
+                  0,
+                ],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -2934,6 +2979,7 @@ Object {
               Object {
                 "context": true,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -2998,6 +3044,7 @@ Object {
               Object {
                 "context": true,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3240,6 +3287,9 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": true,
+      "hooks": Array [
+        0,
+      ],
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -3249,6 +3299,7 @@ Object {
     4 => Object {
       "context": true,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3256,6 +3307,9 @@ Object {
     7 => Object {
       "context": null,
       "didHooksChange": true,
+      "hooks": Array [
+        0,
+      ],
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -3267,6 +3321,7 @@ Object {
         "count",
       ],
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3274,6 +3329,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": Array [
@@ -3320,6 +3376,7 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3327,6 +3384,7 @@ Object {
     4 => Object {
       "context": false,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3334,6 +3392,7 @@ Object {
     7 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3341,6 +3400,7 @@ Object {
     6 => Object {
       "context": Array [],
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3348,6 +3408,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [
         "foo",
@@ -3396,6 +3457,7 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3403,6 +3465,7 @@ Object {
     4 => Object {
       "context": false,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3410,6 +3473,7 @@ Object {
     7 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3417,6 +3481,7 @@ Object {
     6 => Object {
       "context": Array [],
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3424,6 +3489,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [
         "foo",
@@ -3473,6 +3539,7 @@ Object {
     5 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3480,6 +3547,7 @@ Object {
     4 => Object {
       "context": false,
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3487,6 +3555,7 @@ Object {
     7 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3494,6 +3563,7 @@ Object {
     6 => Object {
       "context": Array [],
       "didHooksChange": false,
+      "hooks": null,
       "isFirstMount": false,
       "props": Array [],
       "state": null,
@@ -3501,6 +3571,7 @@ Object {
     2 => Object {
       "context": null,
       "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [
         "bar",
@@ -3683,6 +3754,9 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": true,
+                "hooks": Array [
+                  0,
+                ],
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -3695,6 +3769,7 @@ Object {
               Object {
                 "context": true,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3705,6 +3780,9 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": true,
+                "hooks": Array [
+                  0,
+                ],
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -3719,6 +3797,7 @@ Object {
                   "count",
                 ],
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3729,6 +3808,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": Array [
@@ -3811,6 +3891,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3821,6 +3902,7 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3831,6 +3913,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3841,6 +3924,7 @@ Object {
               Object {
                 "context": Array [],
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3851,6 +3935,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [
                   "foo",
@@ -3941,6 +4026,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3951,6 +4037,7 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3961,6 +4048,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3971,6 +4059,7 @@ Object {
               Object {
                 "context": Array [],
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -3981,6 +4070,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [
                   "foo",
@@ -4072,6 +4162,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -4082,6 +4173,7 @@ Object {
               Object {
                 "context": false,
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -4092,6 +4184,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -4102,6 +4195,7 @@ Object {
               Object {
                 "context": Array [],
                 "didHooksChange": false,
+                "hooks": null,
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -4112,6 +4206,7 @@ Object {
               Object {
                 "context": null,
                 "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [
                   "bar",
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index b71d9501c6fb..fd569a7c550d 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -13,7 +13,7 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-export const enableProfilerChangedHookIndices = false;
+export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = false;
 export const enableNamedHooksFeature = true;
 export const enableLogger = false;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index bc495619cf65..9552dd0bd6ef 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -13,7 +13,7 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
-export const enableProfilerChangedHookIndices = false;
+export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = false;
 export const enableNamedHooksFeature = true;
 export const enableLogger = false;

From c62d5831d3d66c19eb652f4f5d229acb1e85ff82 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Tue, 21 Sep 2021 00:39:37 +0530
Subject: [PATCH 0873/1603] react-devtools\OVERVIEW.md --> fixed typos (#22372)

---
 packages/react-devtools/OVERVIEW.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index d78d0c7f1875..70b2c9ba095b 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -166,7 +166,7 @@ We only send the serialized messages as part of the `inspectElement` event.
 
 #### Removing a root
 
-Special case of unmounting an entire root (include its decsendants). 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.
+Special case of unmounting an entire root (include 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
 [
@@ -253,7 +253,7 @@ Elements can update frequently, especially in response to things like scrolling
 
 ### Deeply nested properties
 
-Even when dealing with a single component, serializing deeply nested properties can be expensive. Because of this, DevTools uses a technique referred to as "dehyration" to only send a shallow copy of the data on initial inspection. DevTools then fills in the missing data on demand as a user expands nested objects or arrays. Filled in paths are remembered (for the currently inspected element) so they are not "dehyrated" again as part of a polling update.
+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
 

From acf8ada4c00105f933ea87ad425e83cdcd115ba0 Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Mon, 20 Sep 2021 22:09:59 +0300
Subject: [PATCH 0874/1603] Fix typo in types.js (react-devtools-shared)
 (#22299)

Fix typo:

becuase -> because
---
 packages/react-devtools-shared/src/types.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index fbde156a5c10..f8f334124e1e 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -79,7 +79,7 @@ export type ComponentFilter =
 
 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 becuase the latter is not stable between element inspections.
+// 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>;

From cbf6178ed3b450774a11bd2ca7735c2073cd1bc4 Mon Sep 17 00:00:00 2001
From: 38elements <38elements@users.noreply.github.com>
Date: Tue, 21 Sep 2021 04:10:29 +0900
Subject: [PATCH 0875/1603] Fix links in packages/react-devtools/README.md
 (#22356)

---
 packages/react-devtools/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
index a8794737c0af..b6e1516d67fb 100644
--- a/packages/react-devtools/README.md
+++ b/packages/react-devtools/README.md
@@ -41,7 +41,7 @@ If you're using React Native 0.43 or higher, it should connect to your simulator
 
 ### Integration with React Native Inspector
 
-You can open the [in-app developer menu](https://reactnative.dev/docs/debugging.html#accessing-the-in-app-developer-menu) and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:
+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)
 
@@ -56,7 +56,7 @@ You can choose "Hide Inspector" in the same menu to exit this mode.
 
 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.html#chrome-developer-tools) to open the Chrome 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.**
 

From 64e70f82e99e5836307aeefbde6b58240531c1ab Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Mon, 20 Sep 2021 15:44:48 -0400
Subject: [PATCH 0876/1603] [Fizz] add avoidThisFallback support (#22318)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 148 ++++++++++++++++++
 .../src/server/ReactDOMServerFormatConfig.js  |  14 +-
 .../ReactDOMServerLegacyFormatConfig.js       |  11 +-
 .../server/ReactNativeServerFormatConfig.js   |  20 ++-
 packages/react-server/src/ReactFizzServer.js  |  37 ++++-
 .../forks/ReactServerFormatConfig.custom.js   |   4 +
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 15 files changed, 220 insertions(+), 24 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index dfe861142ab7..edf581402314 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1484,6 +1484,154 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
 
+  // @gate experimental && enableSuspenseAvoidThisFallback
+  it('should respect unstable_avoidThisFallback', async () => {
+    const resolved = {
+      0: false,
+      1: false,
+    };
+    const promiseRes = {};
+    const promises = {
+      0: new Promise(res => {
+        promiseRes[0] = () => {
+          resolved[0] = true;
+          res();
+        };
+      }),
+      1: new Promise(res => {
+        promiseRes[1] = () => {
+          resolved[1] = true;
+          res();
+        };
+      }),
+    };
+
+    const InnerComponent = ({isClient, depth}) => {
+      if (isClient) {
+        // Resuspend after re-rendering on client to check that fallback shows on client
+        throw new Promise(() => {});
+      }
+      if (!resolved[depth]) {
+        throw promises[depth];
+      }
+      return (
+        <div>
+          <Text text={`resolved ${depth}`} />
+        </div>
+      );
+    };
+
+    function App({isClient}) {
+      return (
+        <div>
+          <Text text="Non Suspense Content" />
+          <Suspense
+            fallback={
+              <span>
+                <Text text="Avoided Fallback" />
+              </span>
+            }
+            unstable_avoidThisFallback={true}>
+            <InnerComponent isClient={isClient} depth={0} />
+            <div>
+              <Suspense fallback={<Text text="Fallback" />}>
+                <Suspense
+                  fallback={
+                    <span>
+                      <Text text="Avoided Fallback2" />
+                    </span>
+                  }
+                  unstable_avoidThisFallback={true}>
+                  <InnerComponent isClient={isClient} depth={1} />
+                </Suspense>
+              </Suspense>
+            </div>
+          </Suspense>
+        </div>
+      );
+    }
+
+    await jest.runAllTimers();
+
+    await act(async () => {
+      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+        <App isClient={false} />,
+        writable,
+      );
+      startWriting();
+    });
+
+    // Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved
+    expect(getVisibleChildren(container)).toEqual(undefined);
+    expect(container.innerHTML).not.toContain('Avoided Fallback');
+
+    // resolve first suspense component with avoidThisFallback
+    await act(async () => {
+      promiseRes[0]();
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Non Suspense Content
+        <div>resolved 0</div>
+        <div>Fallback</div>
+      </div>,
+    );
+
+    expect(container.innerHTML).not.toContain('Avoided Fallback2');
+
+    await act(async () => {
+      promiseRes[1]();
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Non Suspense Content
+        <div>resolved 0</div>
+        <div>
+          <div>resolved 1</div>
+        </div>
+      </div>,
+    );
+
+    let root;
+    await act(async () => {
+      root = ReactDOM.hydrateRoot(container, <App isClient={false} />);
+      Scheduler.unstable_flushAll();
+      await jest.runAllTimers();
+    });
+
+    // No change after hydration
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Non Suspense Content
+        <div>resolved 0</div>
+        <div>
+          <div>resolved 1</div>
+        </div>
+      </div>,
+    );
+
+    await act(async () => {
+      // Trigger update by changing isClient to true
+      root.render(<App isClient={true} />);
+      Scheduler.unstable_flushAll();
+      await jest.runAllTimers();
+    });
+
+    // Now that we've resuspended at the root we show the root fallback
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        Non Suspense Content
+        <div style="display: none;">resolved 0</div>
+        <div style="display: none;">
+          <div>resolved 1</div>
+        </div>
+        <span>Avoided Fallback</span>
+      </div>,
+    );
+  });
+
   // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot', async () => {
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 58ddbeea3f7b..1b2bbc28f666 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1480,10 +1480,21 @@ const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(
 );
 const endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
 
+export function pushStartCompletedSuspenseBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+) {
+  target.push(startCompletedSuspenseBoundary);
+}
+
+export function pushEndCompletedSuspenseBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+) {
+  target.push(endSuspenseBoundary);
+}
+
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
-  id: SuspenseBoundaryID,
 ): boolean {
   return writeChunk(destination, startCompletedSuspenseBoundary);
 }
@@ -1497,7 +1508,6 @@ export function writeStartPendingSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
-  id: SuspenseBoundaryID,
 ): boolean {
   return writeChunk(destination, startClientRenderedSuspenseBoundary);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 3dc354b45231..60ab7544d88f 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -86,6 +86,8 @@ export {
   pushEmpty,
   pushStartInstance,
   pushEndInstance,
+  pushStartCompletedSuspenseBoundary,
+  pushEndCompletedSuspenseBoundary,
   writeStartSegment,
   writeEndSegment,
   writeCompletedSegmentInstruction,
@@ -116,23 +118,17 @@ export function pushTextInstance(
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
-  id: SuspenseBoundaryID,
 ): boolean {
   if (responseState.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,
-    responseState,
-    id,
-  );
+  return writeStartCompletedSuspenseBoundaryImpl(destination, responseState);
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
-  id: SuspenseBoundaryID,
 ): boolean {
   if (responseState.generateStaticMarkup) {
     // A client rendered boundary is done and doesn't need a representation in the HTML
@@ -142,7 +138,6 @@ export function writeStartClientRenderedSuspenseBoundary(
   return writeStartClientRenderedSuspenseBoundaryImpl(
     destination,
     responseState,
-    id,
   );
 }
 export function writeEndCompletedSuspenseBoundary(
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 9f7501007ed8..24e9da45423d 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -204,11 +204,16 @@ export function writePlaceholder(
 export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
-  id: SuspenseBoundaryID,
 ): boolean {
-  writeChunk(destination, SUSPENSE_COMPLETE);
-  return writeChunk(destination, formatID(id));
+  return writeChunk(destination, SUSPENSE_COMPLETE);
 }
+
+export function pushStartCompletedSuspenseBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+): void {
+  target.push(SUSPENSE_COMPLETE);
+}
+
 export function writeStartPendingSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
@@ -220,10 +225,8 @@ export function writeStartPendingSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
-  id: SuspenseBoundaryID,
 ): boolean {
-  writeChunk(destination, SUSPENSE_CLIENT_RENDER);
-  return writeChunk(destination, formatID(id));
+  return writeChunk(destination, SUSPENSE_CLIENT_RENDER);
 }
 export function writeEndCompletedSuspenseBoundary(
   destination: Destination,
@@ -231,6 +234,11 @@ export function writeEndCompletedSuspenseBoundary(
 ): boolean {
   return writeChunk(destination, END);
 }
+export function pushEndCompletedSuspenseBoundary(
+  target: Array<Chunk | PrecomputedChunk>,
+): void {
+  target.push(END);
+}
 export function writeEndPendingSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4b7eb46d94b4..f19f45e41f18 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -52,6 +52,8 @@ import {
   pushTextInstance,
   pushStartInstance,
   pushEndInstance,
+  pushStartCompletedSuspenseBoundary,
+  pushEndCompletedSuspenseBoundary,
   createSuspenseBoundaryID,
   getChildFormatContext,
 } from './ReactServerFormatConfig';
@@ -107,6 +109,7 @@ import {
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableLazyElements,
+  enableSuspenseAvoidThisFallback,
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -520,6 +523,23 @@ function renderSuspenseBoundary(
   popComponentStackInDEV(task);
 }
 
+function renderBackupSuspenseBoundary(
+  request: Request,
+  task: Task,
+  props: Object,
+) {
+  pushBuiltInComponentStackInDEV(task, 'Suspense');
+
+  const content = props.children;
+  const segment = task.blockedSegment;
+
+  pushStartCompletedSuspenseBoundary(segment.chunks);
+  renderNode(request, task, content);
+  pushEndCompletedSuspenseBoundary(segment.chunks);
+
+  popComponentStackInDEV(task);
+}
+
 function renderHostElement(
   request: Request,
   task: Task,
@@ -986,7 +1006,14 @@ function renderElement(
     }
     // eslint-disable-next-line-no-fallthrough
     case REACT_SUSPENSE_TYPE: {
-      renderSuspenseBoundary(request, task, props);
+      if (
+        enableSuspenseAvoidThisFallback &&
+        props.unstable_avoidThisFallback === true
+      ) {
+        renderBackupSuspenseBoundary(request, task, props);
+      } else {
+        renderSuspenseBoundary(request, task, props);
+      }
       return;
     }
   }
@@ -1604,7 +1631,6 @@ function flushSegment(
     writeStartClientRenderedSuspenseBoundary(
       destination,
       request.responseState,
-      boundary.id,
     );
 
     // Flush the fallback.
@@ -1658,12 +1684,7 @@ function flushSegment(
     return writeEndPendingSuspenseBoundary(destination, request.responseState);
   } else {
     // We can inline this boundary's content as a complete boundary.
-
-    writeStartCompletedSuspenseBoundary(
-      destination,
-      request.responseState,
-      boundary.id,
-    );
+    writeStartCompletedSuspenseBoundary(destination, request.responseState);
 
     const completedSegments = boundary.completedSegments;
     invariant(
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 5458a4f50a9d..22539f3aa86b 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -39,6 +39,10 @@ export const pushEmpty = $$$hostConfig.pushEmpty;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;
+export const pushStartCompletedSuspenseBoundary =
+  $$$hostConfig.pushStartCompletedSuspenseBoundary;
+export const pushEndCompletedSuspenseBoundary =
+  $$$hostConfig.pushEndCompletedSuspenseBoundary;
 export const writePlaceholder = $$$hostConfig.writePlaceholder;
 export const writeStartCompletedSuspenseBoundary =
   $$$hostConfig.writeStartCompletedSuspenseBoundary;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index b9adc3b24761..608db694be51 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -101,6 +101,8 @@ export const warnAboutSpreadingKeyToJSX = false;
 
 export const warnOnSubscriptionInsideStartTransition = false;
 
+export const enableSuspenseAvoidThisFallback = false;
+
 export const enableComponentStackLocations = true;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index a16e267d34f8..9c3d45528c5a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -49,6 +49,7 @@ export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
+export const enableSuspenseAvoidThisFallback = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 5e6e925e8d25..bf96cc00e687 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -40,6 +40,7 @@ export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
+export const enableSuspenseAvoidThisFallback = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index a74e056faf5b..0d2b226adf2f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -40,6 +40,7 @@ export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
+export const enableSuspenseAvoidThisFallback = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 028755cbe0cd..f760425ce03c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -50,6 +50,7 @@ export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const warnOnSubscriptionInsideStartTransition = false;
+export const enableSuspenseAvoidThisFallback = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 103d02e8a631..cb0efcc34bdc 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -40,6 +40,7 @@ export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
+export const enableSuspenseAvoidThisFallback = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 0f9e710eda92..d1cfdbb74956 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -40,6 +40,7 @@ export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
+export const enableSuspenseAvoidThisFallback = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 740377f5aee8..62a10f475aca 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -40,6 +40,7 @@ export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
+export const enableSuspenseAvoidThisFallback = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 3522244a3e13..c5dde53578c9 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -48,6 +48,7 @@ export const enableProfilerNestedUpdateScheduledHook =
 export const enableUpdaterTracking = __PROFILE__;
 
 export const enableSuspenseLayoutEffectSemantics = true;
+export const enableSuspenseAvoidThisFallback = false;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =

From cb6c619c07c2453692335a1c73109013e0c88769 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 20 Sep 2021 22:12:30 +0200
Subject: [PATCH 0877/1603] Remove Fiber fields that were used for hydrating
 useMutableSource (#22368)

---
 packages/react-reconciler/src/ReactFiberRoot.new.js | 6 +-----
 packages/react-reconciler/src/ReactFiberRoot.old.js | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 90a1809e4387..84e487c24875 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -10,7 +10,7 @@
 import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 
-import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
+import {noTimeout} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
 import {
   NoLane,
@@ -59,10 +59,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.pooledCacheLanes = NoLanes;
   }
 
-  if (supportsHydration) {
-    this.mutableSourceEagerHydrationData = null;
-  }
-
   if (enableSuspenseCallback) {
     this.hydrationCallbacks = null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index dc1ec23ae159..5750e21ddeca 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -10,7 +10,7 @@
 import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 
-import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
+import {noTimeout} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
 import {
   NoLane,
@@ -59,10 +59,6 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.pooledCacheLanes = NoLanes;
   }
 
-  if (supportsHydration) {
-    this.mutableSourceEagerHydrationData = null;
-  }
-
   if (enableSuspenseCallback) {
     this.hydrationCallbacks = null;
   }

From fc574329668fed808759a797018752048d03ae89 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 11:00:28 -0400
Subject: [PATCH 0878/1603] Move DOM fixtures test job to main CI workflow
 (#22385)

Moves the RELEASE_CHANNEL_stable_yarn_test_dom_fixtures job to our new,
combined CI workflow.

After this, there are only two jobs remaining to be migrated. Then we
can delete the old workflow and build script.
---
 .circleci/config.yml      | 9 +++++----
 fixtures/dom/package.json | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index efa35f94501d..060d26c9b08a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -274,7 +274,8 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - attach_workspace: *attach_workspace
+      - attach_workspace:
+          at: .
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:
@@ -352,9 +353,6 @@ workflows:
       - RELEASE_CHANNEL_stable_yarn_build:
           requires:
             - setup
-      - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
-          requires:
-            - RELEASE_CHANNEL_stable_yarn_build
 
   experimental:
     unless: << pipeline.parameters.prerelease_commit_sha >>
@@ -457,6 +455,9 @@ workflows:
       - yarn_lint_build:
           requires:
             - yarn_build_combined
+      - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
+          requires:
+            - yarn_build_combined
   fuzz_tests:
     unless: << pipeline.parameters.prerelease_commit_sha >>
     triggers:
diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
index bacf1325fa15..3c72579d4b73 100644
--- a/fixtures/dom/package.json
+++ b/fixtures/dom/package.json
@@ -20,7 +20,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "prestart": "cp ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.development.js ../../build/node_modules/scheduler/umd/scheduler-unstable_mock.production.min.js ../../build/node_modules/react/umd/react.development.js ../../build/node_modules/react-dom/umd/react-dom.development.js ../../build/node_modules/react/umd/react.production.min.js ../../build/node_modules/react-dom/umd/react-dom.production.min.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js ../../build/node_modules/react-dom/umd/react-dom-server.browser.production.min.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.development.js ../../build/node_modules/react-dom/umd/react-dom-test-utils.production.min.js public/ && cp -a ../../build/node_modules/. node_modules",
+    "prestart": "cp ../../build2/oss-stable/scheduler/umd/scheduler-unstable_mock.development.js ../../build2/oss-stable/scheduler/umd/scheduler-unstable_mock.production.min.js ../../build2/oss-stable/react/umd/react.development.js ../../build2/oss-stable/react-dom/umd/react-dom.development.js ../../build2/oss-stable/react/umd/react.production.min.js ../../build2/oss-stable/react-dom/umd/react-dom.production.min.js ../../build2/oss-stable/react-dom/umd/react-dom-server.browser.development.js ../../build2/oss-stable/react-dom/umd/react-dom-server.browser.production.min.js ../../build2/oss-stable/react-dom/umd/react-dom-test-utils.development.js ../../build2/oss-stable/react-dom/umd/react-dom-test-utils.production.min.js public/ && cp -a ../../build2/oss-stable/. node_modules",
     "build": "react-scripts build && cp build/index.html build/200.html",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

From 48d475c9ed20ab4344b3f1969716b76d8a476171 Mon Sep 17 00:00:00 2001
From: Bowen <bowen31337@users.noreply.github.com>
Date: Wed, 22 Sep 2021 01:05:41 +1000
Subject: [PATCH 0879/1603] correct typos (#22294)

Co-authored-by: Bowen Li <bowen31337@gmail.com>
---
 .../src/ReactFiberWorkLoop.new.js              |  2 +-
 .../src/ReactFiberWorkLoop.old.js              |  2 +-
 .../src/__tests__/ReactCache-test.js           |  2 +-
 ...ctIncrementalErrorHandling-test.internal.js |  2 +-
 .../ReactSuspenseEffectsSemantics-test.js      | 18 +++++++++---------
 .../ReactSuspenseWithNoopRenderer-test.js      |  6 +++---
 .../src/__tests__/ReactUpdatePriority-test.js  |  6 +++---
 7 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 00d38a2cbe8d..ac420850fae8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2668,7 +2668,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
         }
       }
       // We always throw the original error in case the second render pass is not idempotent.
-      // This can happen if a memoized function or CommonJS module doesn't throw after first invokation.
+      // This can happen if a memoized function or CommonJS module doesn't throw after first invocation.
       throw originalError;
     }
   };
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 2561d865b0e8..c98c7abac71f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2668,7 +2668,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
         }
       }
       // We always throw the original error in case the second render pass is not idempotent.
-      // This can happen if a memoized function or CommonJS module doesn't throw after first invokation.
+      // This can happen if a memoized function or CommonJS module doesn't throw after first invocation.
       throw originalError;
     }
   };
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 4f6caa4c6a80..77b77869c782 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -461,7 +461,7 @@ describe('ReactCache', () => {
     expect(Scheduler).toHaveYielded(['A [v1]']);
     expect(root).toMatchRenderedOutput('A [v1]');
 
-    // Fefresh for new data.
+    // Refresh for new data.
     await act(async () => {
       startTransition(() => refresh());
     });
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 2d6ad2a97524..716771a3778d 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -990,7 +990,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
   });
 
-  it('can schedule updates after uncaught error during umounting', () => {
+  it('can schedule updates after uncaught error during unmounting', () => {
     class BrokenComponentWillUnmount extends React.Component {
       render() {
         return <div />;
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index 6cb3c6097153..bdda4f8313df 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -1019,7 +1019,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       await advanceTimers(1000);
 
       // Timing out should commit the fallback and destroy inner layout effects.
-      // Even though the innermost layout effects are beneat a hidden HostComponent.
+      // Even though the innermost layout effects are beneath a hidden HostComponent.
       expect(Scheduler).toHaveYielded([
         'Text:Outer destroy layout',
         'Text:MemoizedInner destroy layout',
@@ -1147,7 +1147,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('OuterFallback'),
       ]);
 
-      // Show the inner Susepnse subtree (no effects should be recreated)
+      // Show the inner Suspense subtree (no effects should be recreated)
       await act(async () => {
         await resolveText('InnerAsync_1');
       });
@@ -1189,7 +1189,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('OuterFallback'),
       ]);
 
-      // Show the outer Susepnse subtree (only outer effects should be recreated)
+      // Show the outer Suspense subtree (only outer effects should be recreated)
       await act(async () => {
         await resolveText('OuterAsync_1');
       });
@@ -1213,7 +1213,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('InnerFallback'),
       ]);
 
-      // Show the inner Susepnse subtree (only inner effects should be recreated)
+      // Show the inner Suspense subtree (only inner effects should be recreated)
       await act(async () => {
         await resolveText('InnerAsync_2');
       });
@@ -1517,7 +1517,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
         span('Outside'),
       ]);
 
-      // Resolving both resources should cleanup fallabck effects and recreate main effects
+      // Resolving both resources should cleanup fallback effects and recreate main effects
       await act(async () => {
         await resolveText('FallbackAsync');
         await resolveText('OutsideAsync');
@@ -1974,7 +1974,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'ThrowsInWillUnmount componentWillUnmount',
           'Text:Inside destroy layout',
 
-          // Finish the in-progess commit
+          // Finish the in-progress commit
           'Text:Fallback create layout',
           'Text:Fallback create passive',
 
@@ -2114,7 +2114,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'ThrowsInLayoutEffect useLayoutEffect create',
           'Text:Inside create layout',
 
-          // Finish the in-progess commit
+          // Finish the in-progress commit
           'Text:Fallback destroy passive',
           'AsyncText:Async create passive',
 
@@ -2139,7 +2139,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
       // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
-      it('are properly handled for layout effect descruction', async () => {
+      it('are properly handled for layout effect destruction', async () => {
         function ThrowsInLayoutEffectDestroy() {
           Scheduler.unstable_yieldValue('ThrowsInLayoutEffectDestroy render');
           React.useLayoutEffect(() => {
@@ -2226,7 +2226,7 @@ describe('ReactSuspenseEffectsSemantics', () => {
           'ThrowsInLayoutEffectDestroy useLayoutEffect destroy',
           'Text:Inside destroy layout',
 
-          // Finish the in-progess commit
+          // Finish the in-progress commit
           'Text:Fallback create layout',
           'Text:Fallback create passive',
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 960c52506ab0..6c0b4076e618 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -1628,7 +1628,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       });
       expect(root).toMatchRenderedOutput('Loading...');
 
-      // Unmount everying
+      // Unmount everything
       await act(async () => {
         root.render(null);
       });
@@ -2677,7 +2677,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
   });
 
-  describe('delays transitions when using React.startTranistion', () => {
+  describe('delays transitions when using React.startTransition', () => {
     // @gate enableCache
     it('top level render', async () => {
       function App({page}) {
@@ -3360,7 +3360,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         // 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 *somehwere* in the entire root, though (the update
+        // 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.
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
index 4e3b44df255d..44cd0860a5c6 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdatePriority-test.js
@@ -54,8 +54,8 @@ describe('ReactUpdatePriority', () => {
     let setDefaultState;
     function App() {
       const [idleState, setIdleState] = useState(1);
-      const [defaultState, _setDetaultState] = useState(1);
-      setDefaultState = _setDetaultState;
+      const [defaultState, _setDefaultState] = useState(1);
+      setDefaultState = _setDefaultState;
       useEffect(() => {
         Scheduler.unstable_yieldValue('Idle update');
         setIdleState(2);
@@ -86,7 +86,7 @@ describe('ReactUpdatePriority', () => {
     expect(Scheduler).toHaveYielded(['Idle: 2, Default: 2']);
   });
 
-  test('continuous updates should interrupt transisions', async () => {
+  test('continuous updates should interrupt transitions', async () => {
     const root = ReactNoop.createRoot();
 
     let setCounter;

From 4da03c9fbdaf955c637ea95679c32e9ac242992c Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 21 Sep 2021 11:07:56 -0400
Subject: [PATCH 0880/1603] useSyncExternalStore React Native version (#22367)

---
 .../use-sync-external-store/index.native.js   |  12 ++
 .../npm/index.native.js                       |   7 +
 packages/use-sync-external-store/package.json |   1 +
 .../useSyncExternalStoreNative-test.js        | 186 ++++++++++++++++++
 .../src/useSyncExternalStore.js               | 169 +---------------
 .../src/useSyncExternalStoreClient.js         | 154 +++++++++++++++
 .../src/useSyncExternalStoreServer.js         |  25 +++
 scripts/rollup/bundles.js                     |   9 +
 8 files changed, 397 insertions(+), 166 deletions(-)
 create mode 100644 packages/use-sync-external-store/index.native.js
 create mode 100644 packages/use-sync-external-store/npm/index.native.js
 create mode 100644 packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
 create mode 100644 packages/use-sync-external-store/src/useSyncExternalStoreClient.js
 create mode 100644 packages/use-sync-external-store/src/useSyncExternalStoreServer.js

diff --git a/packages/use-sync-external-store/index.native.js b/packages/use-sync-external-store/index.native.js
new file mode 100644
index 000000000000..cac5c1c2bf71
--- /dev/null
+++ b/packages/use-sync-external-store/index.native.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export * from './src/useSyncExternalStoreClient';
diff --git a/packages/use-sync-external-store/npm/index.native.js b/packages/use-sync-external-store/npm/index.native.js
new file mode 100644
index 000000000000..22546b9c0ebb
--- /dev/null
+++ b/packages/use-sync-external-store/npm/index.native.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/use-sync-external-store.native.production.min.js');
+} else {
+  module.exports = require('./cjs/use-sync-external-store.native.development.js');
+}
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index 7f5e5b0e8c0d..b43b3a0ec67d 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -13,6 +13,7 @@
     "build-info.json",
     "index.js",
     "extra.js",
+    "index.native.js",
     "cjs/"
   ],
   "license": "MIT",
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 000000000000..0902e7554c45
--- /dev/null
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
@@ -0,0 +1,186 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ *
+ * @jest-environment node
+ */
+
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let useSyncExternalStore;
+let useSyncExternalStoreExtra;
+let act;
+
+// 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 {
+        // eslint-disable-next-line no-unused-vars
+        startTransition: _,
+        // eslint-disable-next-line no-unused-vars
+        useSyncExternalStore: __,
+        // eslint-disable-next-line no-unused-vars
+        unstable_useSyncExternalStore: ___,
+        ...otherExports
+      } = jest.requireActual('react');
+      return otherExports;
+    });
+
+    jest.mock('use-sync-external-store', () =>
+      jest.requireActual('use-sync-external-store/index.native'),
+    );
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('jest-react').act;
+    useSyncExternalStore = require('use-sync-external-store')
+      .useSyncExternalStore;
+    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
+      .useSyncExternalStoreExtra;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(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;
+      },
+    };
+  }
+
+  test('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 />);
+    });
+    expect(Scheduler).toHaveYielded(['client']);
+    expect(root).toMatchRenderedOutput('client');
+  });
+
+  test('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 />);
+    });
+    expect(Scheduler).toHaveYielded(['client']);
+    expect(root).toMatchRenderedOutput('client');
+  });
+
+  // @gate !(enableUseRefAccessWarning && __DEV__)
+  test('Using isEqual to bailout', async () => {
+    const store = createExternalStore({a: 0, b: 0});
+
+    function A() {
+      const {a} = useSyncExternalStoreExtra(
+        store.subscribe,
+        store.getState,
+        null,
+        state => ({a: state.a}),
+        (state1, state2) => state1.a === state2.a,
+      );
+      return <Text text={'A' + a} />;
+    }
+    function B() {
+      const {b} = useSyncExternalStoreExtra(
+        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();
+    act(() => root.render(<App />));
+
+    expect(Scheduler).toHaveYielded(['A0', 'B0']);
+    expect(root).toMatchRenderedOutput('A0B0');
+
+    // Update b but not a
+    await act(() => {
+      store.set({a: 0, b: 1});
+    });
+    // Only b re-renders
+    expect(Scheduler).toHaveYielded(['B1']);
+    expect(root).toMatchRenderedOutput('A0B1');
+
+    // Update a but not b
+    await act(() => {
+      store.set({a: 1, b: 1});
+    });
+    // Only a re-renders
+    expect(Scheduler).toHaveYielded(['A1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+  });
+});
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 6b30854aea03..8a1a5c719113 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -7,171 +7,8 @@
  * @flow
  */
 
-import * as React from 'react';
-import is from 'shared/objectIs';
-import invariant from 'shared/invariant';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
+import {useSyncExternalStore as client} from './useSyncExternalStoreClient';
+import {useSyncExternalStore as server} from './useSyncExternalStoreServer';
 
-// Intentionally not using named imports because Rollup uses dynamic
-// dispatch for CommonJS interop named imports.
-const {
-  useState,
-  useEffect,
-  useLayoutEffect,
-  useDebugValue,
-  // The built-in API is still prefixed.
-  unstable_useSyncExternalStore: builtInAPI,
-} = React;
-
-// TODO: This heuristic doesn't work in React Native. We'll need to provide a
-// special build, using the `.native` extension.
-const isServerEnvironment = !canUseDOM;
-
-// Prefer the built-in API, if it exists. If it doesn't exist, then we assume
-// we're in version 16 or 17, so rendering is always synchronous. The shim
-// does not support concurrent rendering, only the built-in API.
-export const useSyncExternalStore =
-  builtInAPI !== undefined
-    ? ((builtInAPI: any): typeof useSyncExternalStore_client)
-    : isServerEnvironment
-    ? useSyncExternalStore_server
-    : useSyncExternalStore_client;
-
-let didWarnOld18Alpha = false;
-let didWarnUncachedGetSnapshot = false;
-
-function useSyncExternalStore_server<T>(
-  subscribe: (() => void) => () => void,
-  getSnapshot: () => T,
-  getServerSnapshot?: () => T,
-): T {
-  if (getServerSnapshot === undefined) {
-    invariant(
-      false,
-      'Missing getServerSnapshot, which is required for server-' +
-        'rendered content.',
-    );
-  }
-  return getServerSnapshot();
-}
-
-// 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.
-function useSyncExternalStore_client<T>(
-  subscribe: (() => void) => () => void,
-  getSnapshot: () => T,
-  // Note: The client 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;
-        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) {
-      if (value !== getSnapshot()) {
-        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(inst) {
-  const latestGetSnapshot = inst.getSnapshot;
-  const prevValue = inst.value;
-  try {
-    const nextValue = latestGetSnapshot();
-    return !is(prevValue, nextValue);
-  } catch (error) {
-    return true;
-  }
-}
+export const useSyncExternalStore = canUseDOM ? client : server;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
new file mode 100644
index 000000000000..76e7fda36f83
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 is from 'shared/objectIs';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
+const {
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useDebugValue,
+  // The built-in API is still prefixed.
+  unstable_useSyncExternalStore: builtInAPI,
+} = React;
+
+// Prefer the built-in API, if it exists. If it doesn't exist, then we assume
+// we're in version 16 or 17, so rendering is always synchronous. The shim
+// does not support concurrent rendering, only the built-in API.
+export const useSyncExternalStore =
+  builtInAPI !== undefined
+    ? ((builtInAPI: any): typeof useSyncExternalStore_client)
+    : useSyncExternalStore_client;
+
+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.
+function useSyncExternalStore_client<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  // Note: The client 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;
+        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) {
+      if (value !== getSnapshot()) {
+        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(inst) {
+  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/useSyncExternalStoreServer.js b/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
new file mode 100644
index 000000000000..1bf2a752273d
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import invariant from 'shared/invariant';
+
+export function useSyncExternalStore<T>(
+  subscribe: (() => void) => () => void,
+  getSnapshot: () => T,
+  getServerSnapshot?: () => T,
+): T {
+  if (getServerSnapshot === undefined) {
+    invariant(
+      false,
+      'Missing getServerSnapshot, which is required for server-' +
+        'rendered content.',
+    );
+  }
+  return getServerSnapshot();
+}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 047d27e91807..b9ae507b1a30 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -702,6 +702,15 @@ const bundles = [
     externals: ['react', 'use-sync-external-store'],
   },
 
+  /******* Shim for useSyncExternalStore ReactNative *******/
+  {
+    bundleTypes: [NODE_DEV, NODE_PROD],
+    moduleType: ISOMORPHIC,
+    entry: 'use-sync-external-store/index.native',
+    global: 'useSyncExternalStoreNative',
+    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+  },
+
   /******* React Scheduler (experimental) *******/
   {
     bundleTypes: [

From 7c6049695f384a8c0daa685649df32078e5926b8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 11:16:26 -0400
Subject: [PATCH 0881/1603] Move lint job to new, combined CI workflow (#22386)

* Move lint job to new, combined CI workflow

Moves the lint job our new, combined CI workflow.

After this, there is only one job remaining to be migrated. Then we
can delete the old workflow and build script.

* Remove "stable" CI workflow

This workflow is now empty so we can remove it
---
 .circleci/config.yml | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 060d26c9b08a..7275475a3834 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -343,16 +343,6 @@ jobs:
 
 workflows:
   version: 2
-  stable:
-    unless: << pipeline.parameters.prerelease_commit_sha >>
-    jobs:
-      - setup
-      - yarn_lint:
-          requires:
-            - setup
-      - RELEASE_CHANNEL_stable_yarn_build:
-          requires:
-            - setup
 
   experimental:
     unless: << pipeline.parameters.prerelease_commit_sha >>
@@ -378,6 +368,9 @@ workflows:
       - sync_reconciler_forks:
           requires:
             - setup
+      - yarn_lint:
+          requires:
+            - setup
       - yarn_test:
           requires:
             - setup

From baff3f2005f099f5d3c506d6d41ae977f41304f7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 11:51:51 -0400
Subject: [PATCH 0882/1603] Move build_devtools_and_process_artifacts (#22388)

This is the last CI job that needs to be migrated to the new workflow.
---
 .circleci/config.yml                          | 19 ++++++-------------
 .../react-devtools-core/webpack.backend.js    |  8 +++++++-
 .../react-devtools-core/webpack.standalone.js |  8 +++++++-
 .../webpack.backend.js                        |  8 +++++++-
 .../webpack.config.js                         |  8 +++++++-
 .../react-devtools-shell/webpack.config.js    |  8 +++++++-
 6 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7275475a3834..02bbea9ff8a8 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -213,9 +213,9 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - attach_workspace: *attach_workspace
+      - attach_workspace:
+          at: .
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_yarn_cache
       - *restore_node_modules
       - run:
           name: Install Packages
@@ -344,17 +344,6 @@ jobs:
 workflows:
   version: 2
 
-  experimental:
-    unless: << pipeline.parameters.prerelease_commit_sha >>
-    jobs:
-      - setup
-      - yarn_build:
-          requires:
-            - setup
-      - build_devtools_and_process_artifacts:
-          requires:
-            - yarn_build
-
   # New workflow that will replace "stable" and "experimental"
   build_and_test:
     unless: << pipeline.parameters.prerelease_commit_sha >>
@@ -451,6 +440,10 @@ workflows:
       - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
           requires:
             - yarn_build_combined
+      - build_devtools_and_process_artifacts:
+          requires:
+            - yarn_build_combined
+
   fuzz_tests:
     unless: << pipeline.parameters.prerelease_commit_sha >>
     triggers:
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 0236c4ab30ea..4bad45ac8559 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -18,7 +18,13 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
-const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build2',
+  'oss-experimental',
+);
 
 const __DEV__ = NODE_ENV === 'development';
 
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 2994035c937b..38a05bded6a4 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -18,7 +18,13 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
-const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build2',
+  'oss-experimental',
+);
 
 const __DEV__ = NODE_ENV === 'development';
 
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index 1644d0b9843e..eb460c7bf130 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -20,7 +20,13 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
-const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build2',
+  'oss-experimental',
+);
 
 const __DEV__ = NODE_ENV === 'development';
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 83ce98cbac8c..cc5f43ef5506 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -20,7 +20,13 @@ if (!NODE_ENV) {
   process.exit(1);
 }
 
-const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build2',
+  'oss-experimental',
+);
 
 const __DEV__ = NODE_ENV === 'development';
 
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 029f9f5f7db4..d20369f0d26a 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -24,7 +24,13 @@ if (!TARGET) {
   process.exit(1);
 }
 
-const builtModulesDir = resolve(__dirname, '..', '..', 'build', 'node_modules');
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build2',
+  'oss-experimental',
+);
 
 const __DEV__ = NODE_ENV === 'development';
 

From 0c81d347b6856c0e0f1b1ca10654ce47f81f632e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 12:02:14 -0400
Subject: [PATCH 0883/1603] Write artifacts to `build` instead of `build2`

Now that all the CI jobs have been migrated to the new build script,
we can start renaming the `build2` directory to `build`.

Since there are lots of scripts that reference `build2`, including
downstream scripts that live outside this repo, I'm going to keep
the `build2` directory around as a copy of `build`.

Then once all the references are updated, I will delete the copy.
---
 .circleci/config.yml                         |  6 ++++++
 scripts/rollup/build-all-release-channels.js | 15 +++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 02bbea9ff8a8..c8232fdf8538 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -158,8 +158,10 @@ jobs:
       - run: yarn build-combined
       - persist_to_workspace:
           root: .
+          # TODO: Migrate scripts to use `build` directory instead of `build2`
           paths:
             - build2
+            - build
 
   get_base_build:
     docker: *docker
@@ -192,8 +194,12 @@ jobs:
       - run: echo "<< pipeline.git.revision	>>" >> build2/COMMIT_SHA
         # Compress build directory into a single tarball for easy download
       - run: tar -zcvf ./build2.tgz ./build2
+        # TODO: Migrate scripts to use `build` directory instead of `build2`
+      - run: tar -zcvf ./build.tgz ./build
       - store_artifacts:
           path: ./build2.tgz
+      - store_artifacts:
+          path: ./build.tgz
 
   sizebot:
     docker: *docker
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 575f1c9f0585..f2a5119502ce 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -57,9 +57,10 @@ if (process.env.CIRCLE_NODE_TOTAL) {
     processExperimental('./build');
   }
 
-  // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
-  // with old build job. Remove once we migrate rest of build/test pipeline.
-  fs.renameSync('./build', './build2');
+  // TODO: Currently storing a copy of the artifacts as `./build2`, because
+  // some scripts reference that directory. Remove once we migrate everything to
+  // reference `./build` instead.
+  fse.copySync('./build', './build2');
 } else {
   // Running locally, no concurrency. Move each channel's build artifacts into
   // a temporary directory so that they don't conflict.
@@ -85,9 +86,11 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   mergeDirsSync(experimentalDir + '/', stableDir + '/');
 
   // Now restore the combined directory back to its original name
-  // TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
-  // with old build job. Remove once we migrate rest of build/test pipeline.
-  crossDeviceRenameSync(stableDir, './build2');
+  crossDeviceRenameSync(stableDir, './build');
+  // TODO: Currently storing a copy of the artifacts as `./build2`, because
+  // some scripts reference that directory. Remove once we migrate everything to
+  // reference `./build` instead.
+  fse.copySync('./build', './build2');
 }
 
 function buildForChannel(channel, nodeTotal, nodeIndex) {

From e3c9cd9f412088f32b14b1224fa6768f419d5f45 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 13:41:58 -0400
Subject: [PATCH 0884/1603] Add COMMIT_SHA to build directory

---
 .circleci/config.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index c8232fdf8538..11b882d16916 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -192,6 +192,7 @@ jobs:
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: echo "<< pipeline.git.revision	>>" >> build2/COMMIT_SHA
+      - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
         # Compress build directory into a single tarball for easy download
       - run: tar -zcvf ./build2.tgz ./build2
         # TODO: Migrate scripts to use `build` directory instead of `build2`
@@ -209,6 +210,7 @@ jobs:
       - attach_workspace:
           at: .
       - run: echo "<< pipeline.git.revision	>>" >> build2/COMMIT_SHA
+      - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run:

From f35287dda431fd48706b57f57df7dc4584e2ca30 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 12:13:32 -0400
Subject: [PATCH 0885/1603] [build2 -> build] -> download-build-artifacts

---
 .../shared-commands/download-build-artifacts.js      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index 7d2763eabc57..c7ba16e41789 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -4,6 +4,7 @@
 
 const {exec} = require('child-process-promise');
 const {existsSync} = require('fs');
+const fse = require('fs-extra');
 const {join} = require('path');
 const {getArtifactsList, logPromise} = require('../utils');
 const theme = require('../theme');
@@ -11,7 +12,7 @@ const theme = require('../theme');
 const run = async ({build, cwd, releaseChannel}) => {
   const artifacts = await getArtifactsList(build);
   const buildArtifacts = artifacts.find(entry =>
-    entry.path.endsWith('build2.tgz')
+    entry.path.endsWith('build.tgz')
   );
 
   if (!buildArtifacts) {
@@ -22,7 +23,7 @@ const run = async ({build, cwd, releaseChannel}) => {
   }
 
   // Download and extract artifact
-  await exec(`rm -rf ./build2`, {cwd});
+  await exec(`rm -rf ./build`, {cwd});
   await exec(
     `curl -L $(fwdproxy-config curl) ${buildArtifacts.url} | tar -xvz`,
     {
@@ -30,6 +31,11 @@ const run = async ({build, cwd, releaseChannel}) => {
     }
   );
 
+  // TODO: Currently storing a copy of the artifacts as `./build2`, because
+  // some scripts reference that directory. Remove once we migrate everything to
+  // reference `./build` instead.
+  fse.copySync('./build', './build2');
+
   // Copy to staging directory
   // TODO: Consider staging the release in a different directory from the CI
   // build artifacts: `./build/node_modules` -> `./staged-releases`
@@ -50,7 +56,7 @@ const run = async ({build, cwd, releaseChannel}) => {
     console.error('Internal error: Invalid release channel: ' + releaseChannel);
     process.exit(releaseChannel);
   }
-  await exec(`cp -r ./build2/${sourceDir} ./build/node_modules`, {cwd});
+  await exec(`cp -r ./build/${sourceDir} ./build/node_modules`, {cwd});
 };
 
 module.exports = async ({build, commit, cwd, releaseChannel}) => {

From 2375670a91c0925347ce285231828d4d0fa41c11 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 13:49:25 -0400
Subject: [PATCH 0886/1603] Delete unused CI jobs

These were replaced by the `build_combined` job.
---
 .circleci/config.yml | 55 --------------------------------------------
 1 file changed, 55 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 11b882d16916..81235be058a1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -91,61 +91,6 @@ jobs:
       - *restore_node_modules
       - run: node ./scripts/tasks/flow-ci
 
-  RELEASE_CHANNEL_stable_yarn_build:
-    docker: *docker
-    environment: *environment
-    parallelism: *TEST_PARALLELISM
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          environment:
-            RELEASE_CHANNEL: stable
-          command: |
-            ./scripts/circleci/add_build_info_json.sh
-            ./scripts/circleci/update_package_versions.sh
-            yarn build
-      - run: echo "stable" >> build/RELEASE_CHANNEL
-      - persist_to_workspace:
-          root: build
-          paths:
-            - RELEASE_CHANNEL
-            - facebook-www
-            - facebook-react-native
-            - facebook-relay
-            - node_modules
-            - react-native
-            - dist
-            - sizes/*.json
-
-  yarn_build:
-    docker: *docker
-    environment: *environment
-    parallelism: 20
-    steps:
-      - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
-      - run:
-          environment:
-            RELEASE_CHANNEL: experimental
-          command: |
-            ./scripts/circleci/add_build_info_json.sh
-            ./scripts/circleci/update_package_versions.sh
-            yarn build
-      - run: echo "experimental" >> build/RELEASE_CHANNEL
-      - persist_to_workspace:
-          root: build
-          paths:
-            - RELEASE_CHANNEL
-            - facebook-www
-            - facebook-react-native
-            - facebook-relay
-            - node_modules
-            - react-native
-            - dist
-            - sizes/*.json
 
   yarn_build_combined:
     docker: *docker

From 162bb8c9780e20c988c42fe25e81da03c3fb9f6c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 12:06:15 -0400
Subject: [PATCH 0887/1603] [build -> build2] Sizebot

---
 dangerfile.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/dangerfile.js b/dangerfile.js
index fbdd85ae44f5..e6a6a82c8708 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -35,7 +35,7 @@ const gzipSize = require('gzip-size');
 const {readFileSync, statSync} = require('fs');
 
 const BASE_DIR = 'base-build';
-const HEAD_DIR = 'build2';
+const HEAD_DIR = 'build';
 
 const CRITICAL_THRESHOLD = 0.02;
 const SIGNIFICANCE_THRESHOLD = 0.002;
@@ -127,7 +127,7 @@ function row(result) {
   const resultsMap = new Map();
 
   // Find all the head (current) artifacts paths.
-  const headArtifactPaths = await glob('**/*.js', {cwd: 'build2'});
+  const headArtifactPaths = await glob('**/*.js', {cwd: 'build'});
   for (const artifactPath of headArtifactPaths) {
     try {
       // This will throw if there's no matching base artifact

From bb0d06935961732d37eb2d1ff706cdacea7003c9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 15:12:52 -0400
Subject: [PATCH 0888/1603] [build2 -> build] Local scripts

Update all our local scripts to use `build` instead of `build2`.

There are still downstream scripts that depend on `build2`, though, so
we can't remove it yet.
---
 fixtures/dom/package.json                             | 2 +-
 package.json                                          | 2 +-
 packages/react-devtools-core/webpack.backend.js       | 2 +-
 packages/react-devtools-core/webpack.standalone.js    | 2 +-
 packages/react-devtools-extensions/build.js           | 2 +-
 packages/react-devtools-extensions/webpack.backend.js | 2 +-
 packages/react-devtools-extensions/webpack.config.js  | 2 +-
 packages/react-devtools-shell/webpack.config.js       | 2 +-
 scripts/circleci/check_minified_errors.sh             | 2 +-
 scripts/jest/config.build-devtools.js                 | 8 +++-----
 scripts/jest/config.build.js                          | 8 +++-----
 scripts/jest/jest-cli.js                              | 2 +-
 scripts/release/utils.js                              | 4 ++--
 scripts/rollup/validate/index.js                      | 2 +-
 14 files changed, 19 insertions(+), 23 deletions(-)

diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
index 3c72579d4b73..3184834be234 100644
--- a/fixtures/dom/package.json
+++ b/fixtures/dom/package.json
@@ -20,7 +20,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "prestart": "cp ../../build2/oss-stable/scheduler/umd/scheduler-unstable_mock.development.js ../../build2/oss-stable/scheduler/umd/scheduler-unstable_mock.production.min.js ../../build2/oss-stable/react/umd/react.development.js ../../build2/oss-stable/react-dom/umd/react-dom.development.js ../../build2/oss-stable/react/umd/react.production.min.js ../../build2/oss-stable/react-dom/umd/react-dom.production.min.js ../../build2/oss-stable/react-dom/umd/react-dom-server.browser.development.js ../../build2/oss-stable/react-dom/umd/react-dom-server.browser.production.min.js ../../build2/oss-stable/react-dom/umd/react-dom-test-utils.development.js ../../build2/oss-stable/react-dom/umd/react-dom-test-utils.production.min.js public/ && cp -a ../../build2/oss-stable/. node_modules",
+    "prestart": "cp ../../build/oss-stable/scheduler/umd/scheduler-unstable_mock.development.js ../../build/oss-stable/scheduler/umd/scheduler-unstable_mock.production.min.js ../../build/oss-stable/react/umd/react.development.js ../../build/oss-stable/react-dom/umd/react-dom.development.js ../../build/oss-stable/react/umd/react.production.min.js ../../build/oss-stable/react-dom/umd/react-dom.production.min.js ../../build/oss-stable/react-dom/umd/react-dom-server.browser.development.js ../../build/oss-stable/react-dom/umd/react-dom-server.browser.production.min.js ../../build/oss-stable/react-dom/umd/react-dom-test-utils.development.js ../../build/oss-stable/react-dom/umd/react-dom-test-utils.production.min.js public/ && cp -a ../../build/oss-stable/. 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/package.json b/package.json
index 0d8a306515d0..eb9300625c98 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build2 && mkdir build2 && cp -r ./build/node_modules build2/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build && mkdir build && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
diff --git a/packages/react-devtools-core/webpack.backend.js b/packages/react-devtools-core/webpack.backend.js
index 4bad45ac8559..952786dc6530 100644
--- a/packages/react-devtools-core/webpack.backend.js
+++ b/packages/react-devtools-core/webpack.backend.js
@@ -22,7 +22,7 @@ const builtModulesDir = resolve(
   __dirname,
   '..',
   '..',
-  'build2',
+  'build',
   'oss-experimental',
 );
 
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 38a05bded6a4..17135f067743 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -22,7 +22,7 @@ const builtModulesDir = resolve(
   __dirname,
   '..',
   '..',
-  'build2',
+  'build',
   'oss-experimental',
 );
 
diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
index 76b7aee68cb3..eb39056eaa60 100644
--- a/packages/react-devtools-extensions/build.js
+++ b/packages/react-devtools-extensions/build.js
@@ -27,7 +27,7 @@ const ensureLocalBuild = async () => {
     __dirname,
     '..',
     '..',
-    'build2',
+    'build',
     'oss-experimental',
   );
 
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index eb460c7bf130..e8c3bded6310 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -24,7 +24,7 @@ const builtModulesDir = resolve(
   __dirname,
   '..',
   '..',
-  'build2',
+  'build',
   'oss-experimental',
 );
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index cc5f43ef5506..3205a7acbe89 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -24,7 +24,7 @@ const builtModulesDir = resolve(
   __dirname,
   '..',
   '..',
-  'build2',
+  'build',
   'oss-experimental',
 );
 
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index d20369f0d26a..19f53f5d08b0 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -28,7 +28,7 @@ const builtModulesDir = resolve(
   __dirname,
   '..',
   '..',
-  'build2',
+  'build',
   'oss-experimental',
 );
 
diff --git a/scripts/circleci/check_minified_errors.sh b/scripts/circleci/check_minified_errors.sh
index df77ba0193ae..df7673a6ead6 100755
--- a/scripts/circleci/check_minified_errors.sh
+++ b/scripts/circleci/check_minified_errors.sh
@@ -2,7 +2,7 @@
 
 # Ensure errors are minified in production
 
-OUT=$(git --no-pager grep -n --untracked --no-exclude-standard 'FIXME (minify-errors-in-prod)' -- './build2/*')
+OUT=$(git --no-pager grep -n --untracked --no-exclude-standard 'FIXME (minify-errors-in-prod)' -- './build/*')
 
 if [ "$OUT" != "" ]; then
   echo "$OUT";
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 7a57b72fb9bb..e14ecb48c348 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -35,13 +35,11 @@ moduleNameMapper['react-devtools-feature-flags'] =
 // Map packages to bundles
 packages.forEach(name => {
   // Root entry point
-  moduleNameMapper[
-    `^${name}$`
-  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}`;
+  moduleNameMapper[`^${name}$`] = `<rootDir>/build/${NODE_MODULES_DIR}/${name}`;
   // Named entry points
   moduleNameMapper[
     `^${name}\/([^\/]+)$`
-  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}/$1`;
+  ] = `<rootDir>/build/${NODE_MODULES_DIR}/${name}/$1`;
 });
 
 // Allow tests to import shared code (e.g. feature flags, getStackByFiberInDevAndProd)
@@ -57,7 +55,7 @@ module.exports = Object.assign({}, baseConfig, {
   // Exclude the build output from transforms
   transformIgnorePatterns: [
     '/node_modules/',
-    '<rootDir>/build2/',
+    '<rootDir>/build/',
     '/__compiled__/',
     '/__untransformed__/',
   ],
diff --git a/scripts/jest/config.build.js b/scripts/jest/config.build.js
index e99034693e89..69cc7d18c536 100644
--- a/scripts/jest/config.build.js
+++ b/scripts/jest/config.build.js
@@ -38,13 +38,11 @@ moduleNameMapper[
 // Map packages to bundles
 packages.forEach(name => {
   // Root entry point
-  moduleNameMapper[
-    `^${name}$`
-  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}`;
+  moduleNameMapper[`^${name}$`] = `<rootDir>/build/${NODE_MODULES_DIR}/${name}`;
   // Named entry points
   moduleNameMapper[
     `^${name}\/([^\/]+)$`
-  ] = `<rootDir>/build2/${NODE_MODULES_DIR}/${name}/$1`;
+  ] = `<rootDir>/build/${NODE_MODULES_DIR}/${name}/$1`;
 });
 
 module.exports = Object.assign({}, baseConfig, {
@@ -58,7 +56,7 @@ module.exports = Object.assign({}, baseConfig, {
   // 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>/build2/'],
+  transformIgnorePatterns: ['/node_modules/', '<rootDir>/build/'],
   setupFiles: [
     ...baseConfig.setupFiles,
     require.resolve('./setupTests.build.js'),
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 175757b64daf..68ed9688bb31 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -219,7 +219,7 @@ function validateOptions() {
 
   if (argv.build) {
     // TODO: We could build this if it hasn't been built yet.
-    const buildDir = path.resolve('./build2');
+    const buildDir = path.resolve('./build');
     if (!fs.existsSync(buildDir)) {
       logError(
         'Build directory does not exist, please run `yarn build-combined` or remove the --build option.'
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index ea110ba69618..6a50b6f202fa 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -125,7 +125,7 @@ const getCommitFromCurrentBuild = async () => {
   // This is important to make the build reproducible (e.g. by Mozilla reviewers).
   const buildInfoJSON = join(
     cwd,
-    'build2',
+    'build',
     'oss-experimental',
     'react',
     'build-info.json'
@@ -136,7 +136,7 @@ const getCommitFromCurrentBuild = async () => {
   } else {
     const packageJSON = join(
       cwd,
-      'build2',
+      'build',
       'oss-experimental',
       'react',
       'package.json'
diff --git a/scripts/rollup/validate/index.js b/scripts/rollup/validate/index.js
index 70921789d199..34faf6ed7340 100644
--- a/scripts/rollup/validate/index.js
+++ b/scripts/rollup/validate/index.js
@@ -79,7 +79,7 @@ async function lint(eslint, filepaths) {
 async function lintEverything() {
   console.log(`Linting build artifacts...`);
 
-  const allFilepaths = await glob('build2/**/*.js');
+  const allFilepaths = await glob('build/**/*.js');
 
   const pathsByFormat = new Map();
   for (const filepath of allFilepaths) {

From cf07c3df124fb43dfe14b3068c3a15e05bc4af1c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 16:15:41 -0400
Subject: [PATCH 0889/1603] Delete all but one `build2` reference (#22391)

This removes all the remaining references to the `build2` directory
except for the CI job that stores the artifacts. We'll keep the
`build2` artifact until downstream scripts are migrated to `build`.
---
 .circleci/config.yml                                   | 10 +++-------
 .eslintignore                                          |  3 ---
 .gitignore                                             |  3 +--
 scripts/flow/config/flowconfig                         |  1 -
 .../shared-commands/download-build-artifacts.js        |  6 ------
 scripts/rollup/build-all-release-channels.js           |  9 ---------
 6 files changed, 4 insertions(+), 28 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 81235be058a1..1a604e225fac 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -103,9 +103,7 @@ jobs:
       - run: yarn build-combined
       - persist_to_workspace:
           root: .
-          # TODO: Migrate scripts to use `build` directory instead of `build2`
           paths:
-            - build2
             - build
 
   get_base_build:
@@ -121,7 +119,7 @@ jobs:
               git fetch origin main
               cd ./scripts/release && yarn && cd ../../
               scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main)
-              mv ./build2 ./base-build
+              mv ./build ./base-build
       - persist_to_workspace:
           root: .
           paths:
@@ -136,12 +134,11 @@ jobs:
           at: .
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
-      - run: echo "<< pipeline.git.revision	>>" >> build2/COMMIT_SHA
       - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
         # Compress build directory into a single tarball for easy download
-      - run: tar -zcvf ./build2.tgz ./build2
-        # TODO: Migrate scripts to use `build` directory instead of `build2`
       - run: tar -zcvf ./build.tgz ./build
+        # TODO: Migrate scripts to use `build` directory instead of `build2`
+      - run: cp ./build.tgz ./build2.tgz
       - store_artifacts:
           path: ./build2.tgz
       - store_artifacts:
@@ -154,7 +151,6 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: echo "<< pipeline.git.revision	>>" >> build2/COMMIT_SHA
       - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
diff --git a/.eslintignore b/.eslintignore
index 71794edf6703..c55cc4086607 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,9 +6,6 @@ packages/react-art/npm/lib
 
 # Build products
 build/
-# TODO: Currently storing artifacts as `./build2` so that it doesn't conflict
-# with old build job. Remove once we migrate rest of build/test pipeline.
-build2/
 coverage/
 fixtures/
 scripts/bench/benchmarks/**/*.js
diff --git a/.gitignore b/.gitignore
index fed2a08aa5d9..8ba7bbecc2dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,6 @@ scripts/flow/*/.flowconfig
 _SpecRunner.html
 __benchmarks__
 build/
-build2/
 remote-repo/
 coverage/
 .module-cache
@@ -36,4 +35,4 @@ packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/.tempUserDataDir
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
\ No newline at end of file
+packages/react-devtools-scheduling-profiler/dist
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 453c8406d061..c0647c95468a 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -1,7 +1,6 @@
 [ignore]
 .*/scripts/bench/.*
 .*/build/.*
-.*/build2/.*
 .*/fixtures/.*
 .*/.tempUserDataDir/.*
 
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index c7ba16e41789..fba746520273 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -4,7 +4,6 @@
 
 const {exec} = require('child-process-promise');
 const {existsSync} = require('fs');
-const fse = require('fs-extra');
 const {join} = require('path');
 const {getArtifactsList, logPromise} = require('../utils');
 const theme = require('../theme');
@@ -31,11 +30,6 @@ const run = async ({build, cwd, releaseChannel}) => {
     }
   );
 
-  // TODO: Currently storing a copy of the artifacts as `./build2`, because
-  // some scripts reference that directory. Remove once we migrate everything to
-  // reference `./build` instead.
-  fse.copySync('./build', './build2');
-
   // Copy to staging directory
   // TODO: Consider staging the release in a different directory from the CI
   // build artifacts: `./build/node_modules` -> `./staged-releases`
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index f2a5119502ce..10a455d5dbbc 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -56,11 +56,6 @@ if (process.env.CIRCLE_NODE_TOTAL) {
     buildForChannel('experimental', nodeTotal, nodeIndex);
     processExperimental('./build');
   }
-
-  // TODO: Currently storing a copy of the artifacts as `./build2`, because
-  // some scripts reference that directory. Remove once we migrate everything to
-  // reference `./build` instead.
-  fse.copySync('./build', './build2');
 } else {
   // Running locally, no concurrency. Move each channel's build artifacts into
   // a temporary directory so that they don't conflict.
@@ -87,10 +82,6 @@ if (process.env.CIRCLE_NODE_TOTAL) {
 
   // Now restore the combined directory back to its original name
   crossDeviceRenameSync(stableDir, './build');
-  // TODO: Currently storing a copy of the artifacts as `./build2`, because
-  // some scripts reference that directory. Remove once we migrate everything to
-  // reference `./build` instead.
-  fse.copySync('./build', './build2');
 }
 
 function buildForChannel(channel, nodeTotal, nodeIndex) {

From 5b57bc6e31689ad715161cdcfa1b1d31eac2ba3b Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 21 Sep 2021 15:00:11 -0700
Subject: [PATCH 0890/1603] [Draft] don't patch console during first render
 (#22308)

Previously, DevTools always overrode the native console to dim or supress StrictMode double logging. It also overrode console.log (in addition to console.error and console.warn). However, this changes the location shown by the browser console, which causes a bad developer experience. There is currently a TC39 proposal that would allow us to extend console without breaking developer experience, but in the meantime this PR changes the StrictMode console override behavior so that we only patch the console during the StrictMode double render so that, during the first render, the location points to developer code rather than our DevTools console code.
---
 .../src/__tests__/console-test.js             | 222 ++++++++---
 .../src/backend/console.js                    | 337 ++++++++++-------
 .../src/backend/legacy/renderer.js            |   6 +
 .../src/backend/renderer.js                   |   4 +
 .../src/backend/types.js                      |   7 +-
 packages/react-devtools-shared/src/hook.js    | 350 ++++++++++--------
 .../react-devtools-shell/src/app/console.js   |  13 +-
 .../src/ReactFiberBeginWork.new.js            |   7 +-
 .../src/ReactFiberBeginWork.old.js            |   7 +-
 .../src/ReactFiberClassComponent.new.js       |   2 +-
 .../src/ReactFiberClassComponent.old.js       |   2 +-
 .../src/ReactFiberDevToolsHook.new.js         |  43 ++-
 .../src/ReactFiberDevToolsHook.old.js         |  43 ++-
 .../src/ReactFiberReconciler.js               |  11 -
 .../src/ReactFiberReconciler.new.js           |  36 +-
 .../src/ReactFiberReconciler.old.js           |  36 +-
 .../src/ReactUpdateQueue.new.js               |   2 +-
 .../src/ReactUpdateQueue.old.js               |   2 +-
 18 files changed, 676 insertions(+), 454 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 4c4bbb17a233..fef2d9674b6f 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -17,11 +17,10 @@ let mockLog;
 let mockWarn;
 let patchConsole;
 let unpatchConsole;
+let rendererID;
 
 describe('console', () => {
   beforeEach(() => {
-    jest.resetModules();
-
     const Console = require('react-devtools-shared/src/backend/console');
     patchConsole = Console.patch;
     unpatchConsole = Console.unpatch;
@@ -41,21 +40,16 @@ describe('console', () => {
     };
 
     Console.dangerous_setTargetConsoleForTesting(fakeConsole);
-
-    // Note the Console module only patches once,
-    // so it's important to patch the test console before injection.
-    patchConsole({
-      appendComponentStack: true,
-      breakOnWarn: false,
-      showInlineWarningsAndErrors: false,
-      hideDoubleLogsInStrictLegacy: false,
-    });
+    global.__REACT_DEVTOOLS_GLOBAL_HOOK__.dangerous_setTargetConsoleForTesting(
+      fakeConsole,
+    );
 
     const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
-      inject(internals);
+      rendererID = inject(internals);
 
       Console.registerRenderer(internals);
+      return rendererID;
     };
 
     React = require('react');
@@ -78,7 +72,7 @@ describe('console', () => {
   it('should not patch console methods that are not explicitly overriden', () => {
     expect(fakeConsole.error).not.toBe(mockError);
     expect(fakeConsole.info).toBe(mockInfo);
-    expect(fakeConsole.log).not.toBe(mockLog);
+    expect(fakeConsole.log).toBe(mockLog);
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
@@ -90,7 +84,7 @@ describe('console', () => {
 
     patchConsole({
       appendComponentStack: true,
-      breakOnWarn: false,
+      breakOnConsoleErrors: false,
       showInlineWarningsAndErrors: false,
     });
 
@@ -98,7 +92,7 @@ describe('console', () => {
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
-  it('should patch the console when breakOnWarn is enabled', () => {
+  it('should patch the console when breakOnConsoleErrors is enabled', () => {
     unpatchConsole();
 
     expect(fakeConsole.error).toBe(mockError);
@@ -106,7 +100,7 @@ describe('console', () => {
 
     patchConsole({
       appendComponentStack: false,
-      breakOnWarn: true,
+      breakOnConsoleErrors: true,
       showInlineWarningsAndErrors: false,
     });
 
@@ -122,7 +116,7 @@ describe('console', () => {
 
     patchConsole({
       appendComponentStack: false,
-      breakOnWarn: false,
+      breakOnConsoleErrors: false,
       showInlineWarningsAndErrors: true,
     });
 
@@ -135,7 +129,7 @@ describe('console', () => {
 
     patchConsole({
       appendComponentStack: true,
-      breakOnWarn: false,
+      breakOnConsoleErrors: false,
       showInlineWarningsAndErrors: false,
     });
 
@@ -172,6 +166,8 @@ describe('console', () => {
   });
 
   it('should not append multiple stacks', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
+
     const Child = ({children}) => {
       fakeConsole.warn('warn\n    in Child (at fake.js:123)');
       fakeConsole.error('error', '\n    in Child (at fake.js:123)');
@@ -192,6 +188,8 @@ describe('console', () => {
   });
 
   it('should append component stacks to errors and warnings logged during render', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
+
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
       <Intermediate>
@@ -277,6 +275,8 @@ describe('console', () => {
   });
 
   it('should append component stacks to errors and warnings logged from commit hooks', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
+
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
       <Intermediate>
@@ -372,13 +372,14 @@ describe('console', () => {
   });
 
   it('should append stacks after being uninstalled and reinstalled', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
+
     const Child = ({children}) => {
       fakeConsole.warn('warn');
       fakeConsole.error('error');
       return null;
     };
 
-    unpatchConsole();
     act(() => legacyRender(<Child />, document.createElement('div')));
 
     expect(mockWarn).toHaveBeenCalledTimes(1);
@@ -390,7 +391,7 @@ describe('console', () => {
 
     patchConsole({
       appendComponentStack: true,
-      breakOnWarn: false,
+      breakOnConsoleErrors: false,
       showInlineWarningsAndErrors: false,
     });
     act(() => legacyRender(<Child />, document.createElement('div')));
@@ -410,6 +411,8 @@ describe('console', () => {
   });
 
   it('should be resilient to prepareStackTrace', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
+
     Error.prepareStackTrace = function(error, callsites) {
       const stack = ['An error occurred:', error.message];
       for (let i = 0; i < callsites.length; i++) {
@@ -469,6 +472,9 @@ describe('console', () => {
   });
 
   it('should double log if hideConsoleLogsInStrictMode is disabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
+    global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
+
     const container = document.createElement('div');
     const root = ReactDOM.createRoot(container);
 
@@ -479,13 +485,6 @@ describe('console', () => {
       return <div />;
     }
 
-    patchConsole({
-      appendComponentStack: false,
-      breakOnWarn: false,
-      showInlineWarningsAndErrors: false,
-      hideConsoleLogsInStrictMode: false,
-    });
-
     act(() =>
       root.render(
         <React.StrictMode>
@@ -493,8 +492,6 @@ describe('console', () => {
         </React.StrictMode>,
       ),
     );
-
-    expect(mockLog).toHaveBeenCalledTimes(2);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
     expect(mockLog.mock.calls[0][0]).toBe('log');
     expect(mockLog.mock.calls[1]).toHaveLength(2);
@@ -514,6 +511,9 @@ describe('console', () => {
   });
 
   it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
+    global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;
+
     const container = document.createElement('div');
     const root = ReactDOM.createRoot(container);
 
@@ -524,12 +524,47 @@ describe('console', () => {
       return <div />;
     }
 
-    patchConsole({
-      appendComponentStack: false,
-      breakOnWarn: false,
-      showInlineWarningsAndErrors: false,
-      hideConsoleLogsInStrictMode: true,
-    });
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(mockLog).toHaveBeenCalledTimes(1);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+
+    expect(mockWarn).toHaveBeenCalledTimes(1);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+
+    expect(mockError).toHaveBeenCalledTimes(1);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+  });
+
+  it('should double log in Strict mode initial render for extension', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
+    global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = 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.set(
+      rendererID,
+      null,
+    );
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    function App() {
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return <div />;
+    }
 
     act(() =>
       root.render(
@@ -539,6 +574,53 @@ describe('console', () => {
       ),
     );
 
+    expect(mockLog).toHaveBeenCalledTimes(2);
+    expect(mockLog.mock.calls[0]).toHaveLength(1);
+    expect(mockLog.mock.calls[0][0]).toBe('log');
+    expect(mockLog.mock.calls[1]).toHaveLength(2);
+    expect(mockLog.mock.calls[1][0]).toBe('%clog');
+
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(1);
+    expect(mockWarn.mock.calls[0][0]).toBe('warn');
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(mockWarn.mock.calls[1][0]).toBe('%cwarn');
+
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(1);
+    expect(mockError.mock.calls[0][0]).toBe('error');
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(mockError.mock.calls[1][0]).toBe('%cerror');
+  });
+
+  it('should not double log in Strict mode initial render for extension', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
+    global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = 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.set(
+      rendererID,
+      null,
+    );
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    function App() {
+      fakeConsole.log('log');
+      fakeConsole.warn('warn');
+      fakeConsole.error('error');
+      return <div />;
+    }
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>,
+      ),
+    );
     expect(mockLog).toHaveBeenCalledTimes(1);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
     expect(mockLog.mock.calls[0][0]).toBe('log');
@@ -551,6 +633,56 @@ describe('console', () => {
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
   });
+
+  it('should properly dim component stacks during strict mode double log', () => {
+    global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
+    global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    const Intermediate = ({children}) => children;
+    const Parent = ({children}) => (
+      <Intermediate>
+        <Child />
+      </Intermediate>
+    );
+    const Child = ({children}) => {
+      fakeConsole.error('error');
+      fakeConsole.warn('warn');
+      return null;
+    };
+
+    act(() =>
+      root.render(
+        <React.StrictMode>
+          <Parent />
+        </React.StrictMode>,
+      ),
+    );
+
+    expect(mockWarn).toHaveBeenCalledTimes(2);
+    expect(mockWarn.mock.calls[0]).toHaveLength(2);
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    );
+    expect(mockWarn.mock.calls[1]).toHaveLength(2);
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][0])).toEqual(
+      '%cwarn \n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    );
+    expect(mockWarn.mock.calls[1][1]).toMatch('color: rgba(');
+
+    expect(mockError).toHaveBeenCalledTimes(2);
+    expect(mockError.mock.calls[0]).toHaveLength(2);
+    expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toEqual(
+      '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    );
+    expect(mockError.mock.calls[1]).toHaveLength(2);
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][0])).toEqual(
+      '%cerror \n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    );
+    expect(mockError.mock.calls[1][1]).toMatch('color: rgba(');
+  });
 });
 
 describe('console error', () => {
@@ -577,23 +709,13 @@ describe('console error', () => {
 
     Console.dangerous_setTargetConsoleForTesting(fakeConsole);
 
-    // Note the Console module only patches once,
-    // so it's important to patch the test console before injection.
-    patchConsole({
-      appendComponentStack: true,
-      breakOnWarn: false,
-      showInlineWarningsAndErrors: false,
-      hideDoubleLogsInStrictLegacy: false,
-    });
-
     const inject = global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject;
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = internals => {
-      internals.getIsStrictMode = () => {
-        throw Error('foo');
-      };
       inject(internals);
 
-      Console.registerRenderer(internals);
+      Console.registerRenderer(internals, () => {
+        throw Error('foo');
+      });
     };
 
     React = require('react');
@@ -617,8 +739,8 @@ describe('console error', () => {
 
     patchConsole({
       appendComponentStack: true,
-      breakOnWarn: false,
-      showInlineWarningsAndErrors: false,
+      breakOnConsoleErrors: false,
+      showInlineWarningsAndErrors: true,
       hideConsoleLogsInStrictMode: false,
     });
 
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 26168f8d3d46..95d1f4d10332 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -16,7 +16,7 @@ import {getInternalReactConstants} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
 import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 
-const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn', 'log'];
+const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];
 const DIMMED_NODE_CONSOLE_COLOR = '\x1b[2m%s\x1b[0m';
 
 // React's custom built component stack strings match "\s{4}in"
@@ -30,6 +30,37 @@ export function isStringComponentStack(text: string): boolean {
   return PREFIX_REGEX.test(text) || ROW_COLUMN_NUMBER_REGEX.test(text);
 }
 
+const STYLE_DIRECTIVE_REGEX = /^%c/;
+
+// This function tells whether or not the arguments for a console
+// method has been overridden by the patchForStrictMode function.
+// If it has we'll need to do some special formatting of the arguments
+// so the console color stays consistent
+function isStrictModeOverride(args: Array<string>, method: string): boolean {
+  return (
+    args.length === 2 &&
+    STYLE_DIRECTIVE_REGEX.test(args[0]) &&
+    args[1] === `color: ${getConsoleColor(method) || ''}`
+  );
+}
+
+function getConsoleColor(method: string): ?string {
+  switch (method) {
+    case 'warn':
+      return consoleSettingsRef.browserTheme === 'light'
+        ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+        : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+    case 'error':
+      return consoleSettingsRef.browserTheme === 'light'
+        ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+        : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+    case 'log':
+    default:
+      return consoleSettingsRef.browserTheme === 'light'
+        ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+        : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+  }
+}
 type OnErrorOrWarning = (
   fiber: Fiber,
   type: 'error' | 'warn',
@@ -43,7 +74,6 @@ const injectedRenderers: Map<
     getCurrentFiber: () => Fiber | null,
     onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
-    getIsStrictMode: ?() => boolean,
   |},
 > = new Map();
 
@@ -82,7 +112,6 @@ export function registerRenderer(
   const {
     currentDispatcherRef,
     getCurrentFiber,
-    getIsStrictMode,
     findFiberByHostInstance,
     version,
   } = renderer;
@@ -100,7 +129,6 @@ export function registerRenderer(
     injectedRenderers.set(renderer, {
       currentDispatcherRef,
       getCurrentFiber,
-      getIsStrictMode,
       workTagMap: ReactTypeOfWork,
       onErrorOrWarning,
     });
@@ -112,11 +140,11 @@ const consoleSettingsRef = {
   breakOnConsoleErrors: false,
   showInlineWarningsAndErrors: false,
   hideConsoleLogsInStrictMode: false,
+  browserTheme: 'dark',
 };
 
 // Patches console methods to append component stack for the current fiber.
 // Call unpatch() to remove the injected behavior.
-// NOTE: KEEP IN SYNC with src/hook.js:patchConsoleForInitialRenderInExtension
 export function patch({
   appendComponentStack,
   breakOnConsoleErrors,
@@ -136,141 +164,176 @@ export function patch({
   consoleSettingsRef.breakOnConsoleErrors = breakOnConsoleErrors;
   consoleSettingsRef.showInlineWarningsAndErrors = showInlineWarningsAndErrors;
   consoleSettingsRef.hideConsoleLogsInStrictMode = hideConsoleLogsInStrictMode;
+  consoleSettingsRef.browserTheme = browserTheme;
+
+  if (
+    appendComponentStack ||
+    breakOnConsoleErrors ||
+    showInlineWarningsAndErrors
+  ) {
+    if (unpatchFn !== null) {
+      // Don't patch twice.
+      return;
+    }
 
-  if (unpatchFn !== null) {
-    // Don't patch twice.
-    return;
-  }
+    const originalConsoleMethods = {};
 
-  const originalConsoleMethods = {};
+    unpatchFn = () => {
+      for (const method in originalConsoleMethods) {
+        try {
+          // $FlowFixMe property error|warn is not writable.
+          targetConsole[method] = originalConsoleMethods[method];
+        } catch (error) {}
+      }
+    };
 
-  unpatchFn = () => {
-    for (const method in originalConsoleMethods) {
+    OVERRIDE_CONSOLE_METHODS.forEach(method => {
       try {
-        // $FlowFixMe property error|warn is not writable.
-        targetConsole[method] = originalConsoleMethods[method];
-      } catch (error) {}
-    }
-  };
-
-  OVERRIDE_CONSOLE_METHODS.forEach(method => {
-    try {
-      const originalMethod = (originalConsoleMethods[method] = targetConsole[
-        method
-      ].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-        ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-        : targetConsole[method]);
-
-      const overrideMethod = (...args) => {
-        let shouldAppendWarningStack = false;
-        if (method !== 'log') {
-          if (consoleSettingsRef.appendComponentStack) {
-            const lastArg = args.length > 0 ? args[args.length - 1] : null;
-            const alreadyHasComponentStack =
-              typeof lastArg === 'string' && isStringComponentStack(lastArg);
-
-            // If we are ever called with a string that already has a component stack,
-            // e.g. a React error/warning, don't append a second stack.
-            shouldAppendWarningStack = !alreadyHasComponentStack;
+        const originalMethod = (originalConsoleMethods[method] = targetConsole[
+          method
+        ].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+          ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
+          : targetConsole[method]);
+
+        const overrideMethod = (...args) => {
+          let shouldAppendWarningStack = false;
+          if (method !== 'log') {
+            if (consoleSettingsRef.appendComponentStack) {
+              const lastArg = args.length > 0 ? args[args.length - 1] : null;
+              const alreadyHasComponentStack =
+                typeof lastArg === 'string' && isStringComponentStack(lastArg);
+
+              // If we are ever called with a string that already has a component stack,
+              // e.g. a React error/warning, don't append a second stack.
+              shouldAppendWarningStack = !alreadyHasComponentStack;
+            }
           }
-        }
-
-        const shouldShowInlineWarningsAndErrors =
-          consoleSettingsRef.showInlineWarningsAndErrors &&
-          (method === 'error' || method === 'warn');
-
-        let isInStrictMode = false;
-
-        // 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 {
-          currentDispatcherRef,
-          getCurrentFiber,
-          onErrorOrWarning,
-          workTagMap,
-          getIsStrictMode,
-        } of injectedRenderers.values()) {
-          const current: ?Fiber = getCurrentFiber();
-          if (current != null) {
-            try {
-              if (typeof getIsStrictMode === 'function' && getIsStrictMode()) {
-                isInStrictMode = true;
-              }
 
-              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 (typeof onErrorOrWarning === 'function') {
-                  onErrorOrWarning(
-                    current,
-                    ((method: any): 'error' | 'warn'),
-                    // Copy args before we mutate them (e.g. adding the component stack)
-                    args.slice(),
-                  );
+          const shouldShowInlineWarningsAndErrors =
+            consoleSettingsRef.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 {
+            currentDispatcherRef,
+            getCurrentFiber,
+            onErrorOrWarning,
+            workTagMap,
+          } of injectedRenderers.values()) {
+            const current: ?Fiber = getCurrentFiber();
+            if (current != null) {
+              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 (typeof onErrorOrWarning === 'function') {
+                    onErrorOrWarning(
+                      current,
+                      ((method: any): 'error' | 'warn'),
+                      // Copy args before we mutate them (e.g. adding the component stack)
+                      args.slice(),
+                    );
+                  }
                 }
-              }
 
-              if (shouldAppendWarningStack) {
-                const componentStack = getStackByFiberInDevAndProd(
-                  workTagMap,
-                  current,
-                  currentDispatcherRef,
-                );
-                if (componentStack !== '') {
-                  args.push(componentStack);
+                if (shouldAppendWarningStack) {
+                  const componentStack = getStackByFiberInDevAndProd(
+                    workTagMap,
+                    current,
+                    currentDispatcherRef,
+                  );
+                  if (componentStack !== '') {
+                    if (isStrictModeOverride(args, method)) {
+                      args[0] = format(args[0], componentStack);
+                    } else {
+                      args.push(componentStack);
+                    }
+                  }
                 }
+              } catch (error) {
+                // Don't let a DevTools or React internal error interfere with logging.
+                setTimeout(() => {
+                  throw error;
+                }, 0);
+              } finally {
+                break;
               }
-            } catch (error) {
-              // Don't let a DevTools or React internal error interfere with logging.
-              setTimeout(() => {
-                throw error;
-              }, 0);
-            } finally {
-              break;
             }
           }
-        }
-
-        if (consoleSettingsRef.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 (consoleManagedByDevToolsDuringStrictMode && isInStrictMode) {
+
+          if (consoleSettingsRef.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;
+          }
+
+          originalMethod(...args);
+        };
+
+        overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
+        originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
+
+        // $FlowFixMe property error|warn is not writable.
+        targetConsole[method] = overrideMethod;
+      } catch (error) {}
+    });
+  } else {
+    unpatch();
+  }
+}
+
+// Removed component stack patch from console methods.
+export function unpatch(): void {
+  if (unpatchFn !== null) {
+    unpatchFn();
+    unpatchFn = null;
+  }
+}
+
+let unpatchForStrictModeFn: null | (() => void) = null;
+
+// NOTE: KEEP IN SYNC with src/hook.js:patchConsoleForInitialRenderInStrictMode
+export function patchForStrictMode() {
+  if (consoleManagedByDevToolsDuringStrictMode) {
+    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+
+    if (unpatchForStrictModeFn !== null) {
+      // Don't patch twice.
+      return;
+    }
+
+    const originalConsoleMethods = {};
+
+    unpatchForStrictModeFn = () => {
+      for (const method in originalConsoleMethods) {
+        try {
+          // $FlowFixMe property error|warn is not writable.
+          targetConsole[method] = originalConsoleMethods[method];
+        } catch (error) {}
+      }
+    };
+
+    overrideConsoleMethods.forEach(method => {
+      try {
+        const originalMethod = (originalConsoleMethods[method] = targetConsole[
+          method
+        ].__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__
+          ? targetConsole[method].__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__
+          : targetConsole[method]);
+
+        const overrideMethod = (...args) => {
           if (!consoleSettingsRef.hideConsoleLogsInStrictMode) {
             // Dim the text color of the double logs if we're not
             // hiding them.
             if (isNode) {
               originalMethod(DIMMED_NODE_CONSOLE_COLOR, format(...args));
             } else {
-              let color;
-              switch (method) {
-                case 'warn':
-                  color =
-                    browserTheme === 'light'
-                      ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
-                      : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
-                  break;
-                case 'error':
-                  color =
-                    browserTheme === 'light'
-                      ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
-                      : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
-                  break;
-                case 'log':
-                default:
-                  color =
-                    browserTheme === 'light'
-                      ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
-                      : process.env.DARK_MODE_DIMMED_LOG_COLOR;
-                  break;
-              }
-
+              const color = getConsoleColor(method);
               if (color) {
                 originalMethod(`%c${format(...args)}`, `color: ${color}`);
               } else {
@@ -278,24 +341,24 @@ export function patch({
               }
             }
           }
-        } else {
-          originalMethod(...args);
-        }
-      };
+        };
 
-      overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
-      originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
+        overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ = originalMethod;
+        originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ = overrideMethod;
 
-      // $FlowFixMe property error|warn is not writable.
-      targetConsole[method] = overrideMethod;
-    } catch (error) {}
-  });
+        // $FlowFixMe property error|warn is not writable.
+        targetConsole[method] = overrideMethod;
+      } catch (error) {}
+    });
+  }
 }
 
-// Removed component stack patch from console methods.
-export function unpatch(): void {
-  if (unpatchFn !== null) {
-    unpatchFn();
-    unpatchFn = null;
+// NOTE: KEEP IN SYNC with src/hook.js:unpatchConsoleForInitialRenderInStrictMode
+export function unpatchForStrictMode(): void {
+  if (consoleManagedByDevToolsDuringStrictMode) {
+    if (unpatchForStrictModeFn !== null) {
+      unpatchForStrictModeFn();
+      unpatchForStrictModeFn = null;
+    }
   }
 }
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 7b612ff34617..24f30b87bc78 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -1073,6 +1073,10 @@ export function attach(
     // Not implemented
   }
 
+  function patchConsoleForStrictMode() {}
+
+  function unpatchConsoleForStrictMode() {}
+
   return {
     clearErrorsAndWarnings,
     clearErrorsForFiberID,
@@ -1101,6 +1105,7 @@ export function attach(
     overrideSuspense,
     overrideValueAtPath,
     renamePath,
+    patchConsoleForStrictMode,
     prepareViewAttributeSource,
     prepareViewElementSource,
     renderer,
@@ -1109,6 +1114,7 @@ export function attach(
     startProfiling,
     stopProfiling,
     storeAsGlobal,
+    unpatchConsoleForStrictMode,
     updateComponentFilters,
   };
 }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 1cfcaaa6a866..19279cbaf565 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -59,6 +59,8 @@ import {inspectHooksOfFiber} from 'react-debug-tools';
 import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
+  patchForStrictMode as patchConsoleForStrictMode,
+  unpatchForStrictMode as unpatchConsoleForStrictMode,
 } from './console';
 import {
   CONCURRENT_MODE_NUMBER,
@@ -4249,6 +4251,7 @@ export function attach(
     handlePostCommitFiberRoot,
     inspectElement,
     logElementToConsole,
+    patchConsoleForStrictMode,
     prepareViewAttributeSource,
     prepareViewElementSource,
     overrideError,
@@ -4261,6 +4264,7 @@ export function attach(
     startProfiling,
     stopProfiling,
     storeAsGlobal,
+    unpatchConsoleForStrictMode,
     updateComponentFilters,
   };
 }
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 0a7166d04098..2206dd94fb12 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -136,8 +136,6 @@ export type ReactRenderer = {
   // Only injected by React v16.9+ in DEV mode.
   // Enables DevTools to append owners-only component stack to error messages.
   getCurrentFiber?: () => Fiber | null,
-
-  getIsStrictMode?: () => boolean,
   // 17.0.2+
   reconcilerVersion?: string,
   // Uniquely identifies React DOM v15.
@@ -352,6 +350,7 @@ export type RendererInterface = {
     path: Array<string | number>,
     value: any,
   ) => void,
+  patchConsoleForStrictMode: () => void,
   prepareViewAttributeSource: (
     id: number,
     path: Array<string | number>,
@@ -374,6 +373,7 @@ export type RendererInterface = {
     path: Array<string | number>,
     count: number,
   ) => void,
+  unpatchConsoleForStrictMode: () => void,
   updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void,
   ...
 };
@@ -408,5 +408,8 @@ export type DevToolsHook = {
     // Added in v16.9 to support Fast Refresh
     didError?: boolean,
   ) => void,
+
+  // Testing
+  dangerous_setTargetConsoleForTesting?: (fakeConsole: Object) => void,
   ...
 };
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 28cfd027afe4..152b1dce8f8e 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -8,15 +8,12 @@
  * @flow
  */
 
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {ReactRenderer} from './backend/types';
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
-import {consoleManagedByDevToolsDuringStrictMode} from 'react-devtools-feature-flags';
 
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
@@ -27,6 +24,23 @@ export function installHook(target: any): DevToolsHook | null {
     return null;
   }
 
+  let targetConsole: Object = console;
+  let targetConsoleMethods = {};
+  for (const method in console) {
+    targetConsoleMethods[method] = console[method];
+  }
+
+  function dangerous_setTargetConsoleForTesting(
+    targetConsoleForTesting: Object,
+  ): void {
+    targetConsole = targetConsoleForTesting;
+
+    targetConsoleMethods = {};
+    for (const method in targetConsole) {
+      targetConsoleMethods[method] = console[method];
+    }
+  }
+
   function detectReactBuildType(renderer) {
     try {
       if (typeof renderer.version === 'string') {
@@ -163,156 +177,148 @@ export function installHook(target: any): DevToolsHook | null {
     maybeMessage: any,
     ...inputArgs: $ReadOnlyArray<any>
   ): string {
-    if (consoleManagedByDevToolsDuringStrictMode) {
-      const args = inputArgs.slice();
-
-      // Symbols cannot be concatenated with Strings.
-      let formatted: string =
-        typeof maybeMessage === 'symbol'
-          ? maybeMessage.toString()
-          : '' + maybeMessage;
-
-      // If the first argument is a string, check for substitutions.
-      if (typeof maybeMessage === 'string') {
-        if (args.length) {
-          const REGEXP = /(%?)(%([jds]))/g;
-
-          formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
-            let arg = args.shift();
-            switch (flag) {
-              case 's':
-                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;
-          });
-        }
-      }
+    const args = inputArgs.slice();
 
-      // Arguments that remain after formatting.
-      if (args.length) {
-        for (let i = 0; i < args.length; i++) {
-          const arg = args[i];
+    // Symbols cannot be concatenated with Strings.
+    let formatted: string =
+      typeof maybeMessage === 'symbol'
+        ? maybeMessage.toString()
+        : '' + maybeMessage;
 
-          // Symbols cannot be concatenated with Strings.
-          formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
-        }
+    // If the first argument is a string, check for substitutions.
+    if (typeof maybeMessage === 'string') {
+      if (args.length) {
+        const REGEXP = /(%?)(%([jds]))/g;
+
+        formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
+          let arg = args.shift();
+          switch (flag) {
+            case 's':
+              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;
+        });
       }
+    }
 
-      // Update escaped %% values.
-      formatted = formatted.replace(/%{2,2}/g, '%');
+    // Arguments that remain after formatting.
+    if (args.length) {
+      for (let i = 0; i < args.length; i++) {
+        const arg = args[i];
 
-      return '' + formatted;
+        // Symbols cannot be concatenated with Strings.
+        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+      }
     }
 
-    return '';
+    // Update escaped %% values.
+    formatted = formatted.replace(/%{2,2}/g, '%');
+
+    return '' + formatted;
   }
 
-  // NOTE: KEEP IN SYNC with src/backend/console.js:patch
-  function patchConsoleForInitialRenderInExtension(
-    renderer: ReactRenderer,
-    {
-      hideConsoleLogsInStrictMode,
-      browserTheme,
-    }: {hideConsoleLogsInStrictMode: boolean, browserTheme: BrowserTheme},
-  ): void {
-    if (consoleManagedByDevToolsDuringStrictMode) {
-      const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
-
-      if (__EXTENSION__) {
-        const targetConsole = console;
-
-        const originalConsoleMethods = {};
-
-        overrideConsoleMethods.forEach(method => {
-          try {
-            const originalMethod = (originalConsoleMethods[
-              method
-            ] = targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-              ? targetConsole[method].__REACT_DEVTOOLS_ORIGINAL_METHOD__
-              : targetConsole[method]);
-
-            const overrideMethod = (...args) => {
-              let isInStrictMode = false;
-
-              // 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?)
-              const {getCurrentFiber, getIsStrictMode} = renderer;
-              if (typeof getCurrentFiber !== 'function') {
-                return;
-              }
-
-              const current: ?Fiber = getCurrentFiber();
-              if (current != null) {
-                try {
-                  if (
-                    typeof getIsStrictMode === 'function' &&
-                    getIsStrictMode()
-                  ) {
-                    isInStrictMode = true;
-                  }
-                } catch (error) {
-                  // Don't let a DevTools or React internal error interfere with logging.
-                }
-              }
-
-              if (isInStrictMode) {
-                if (!hideConsoleLogsInStrictMode) {
-                  // Dim the text color of the double logs if we're not
-                  // hiding them.
-                  let color;
-                  switch (method) {
-                    case 'warn':
-                      color =
-                        browserTheme === 'light'
-                          ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
-                          : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
-                      break;
-                    case 'error':
-                      color =
-                        browserTheme === 'light'
-                          ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
-                          : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
-                      break;
-                    case 'log':
-                    default:
-                      color =
-                        browserTheme === 'light'
-                          ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
-                          : process.env.DARK_MODE_DIMMED_LOG_COLOR;
-                      break;
-                  }
-
-                  if (color) {
-                    originalMethod(`%c${format(...args)}`, `color: ${color}`);
-                  } else {
-                    throw Error('Console color is not defined');
-                  }
-                }
-              } else {
-                originalMethod(...args);
-              }
-            };
-
-            overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod;
-            originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod;
-
-            // $FlowFixMe property error|warn is not writable.
-            targetConsole[method] = overrideMethod;
-          } catch (error) {}
-        });
+  let unpatchFn = null;
+
+  // NOTE: KEEP IN SYNC with src/backend/console.js:patchForStrictMode
+  // This function hides or dims console logs during the initial double renderer
+  // in Strict Mode. We need this function because during initial render,
+  // React and DevTools are connecting and the renderer interface isn't avaiable
+  // and we want to be able to have consistent logging behavior for double logs
+  // during the initial renderer.
+  function patchConsoleForInitialRenderInStrictMode({
+    hideConsoleLogsInStrictMode,
+    browserTheme,
+  }: {
+    hideConsoleLogsInStrictMode: boolean,
+    browserTheme: BrowserTheme,
+  }) {
+    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+
+    if (unpatchFn !== null) {
+      // Don't patch twice.
+      return;
+    }
+
+    const originalConsoleMethods = {};
+
+    unpatchFn = () => {
+      for (const method in originalConsoleMethods) {
+        try {
+          // $FlowFixMe property error|warn is not writable.
+          targetConsole[method] = originalConsoleMethods[method];
+        } catch (error) {}
       }
+    };
+
+    overrideConsoleMethods.forEach(method => {
+      try {
+        const originalMethod = (originalConsoleMethods[method] = targetConsole[
+          method
+        ].__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__
+          ? targetConsole[method].__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__
+          : targetConsole[method]);
+
+        const overrideMethod = (...args) => {
+          if (!hideConsoleLogsInStrictMode) {
+            // Dim the text color of the double logs if we're not
+            // hiding them.
+            let color;
+            switch (method) {
+              case 'warn':
+                color =
+                  browserTheme === 'light'
+                    ? process.env.LIGHT_MODE_DIMMED_WARNING_COLOR
+                    : process.env.DARK_MODE_DIMMED_WARNING_COLOR;
+                break;
+              case 'error':
+                color =
+                  browserTheme === 'light'
+                    ? process.env.LIGHT_MODE_DIMMED_ERROR_COLOR
+                    : process.env.DARK_MODE_DIMMED_ERROR_COLOR;
+                break;
+              case 'log':
+              default:
+                color =
+                  browserTheme === 'light'
+                    ? process.env.LIGHT_MODE_DIMMED_LOG_COLOR
+                    : process.env.DARK_MODE_DIMMED_LOG_COLOR;
+                break;
+            }
+
+            if (color) {
+              originalMethod(`%c${format(...args)}`, `color: ${color}`);
+            } else {
+              throw Error('Console color is not defined');
+            }
+          }
+        };
+
+        overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ = originalMethod;
+        originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ = overrideMethod;
+
+        // $FlowFixMe property error|warn is not writable.
+        targetConsole[method] = overrideMethod;
+      } catch (error) {}
+    });
+  }
+
+  // NOTE: KEEP IN SYNC with src/backend/console.js:unpatchForStrictMode
+  function unpatchConsoleForInitialRenderInStrictMode() {
+    if (unpatchFn !== null) {
+      unpatchFn();
+      unpatchFn = null;
     }
   }
 
@@ -343,7 +349,7 @@ export function installHook(target: any): DevToolsHook | null {
     // Note that because this function is inlined, this conditional check must only use static booleans.
     // Otherwise the extension will throw with an undefined error.
     // (See comments in the try/catch below for more context on inlining.)
-    if (!__TEST__) {
+    if (!__TEST__ && !__EXTENSION__) {
       try {
         const appendComponentStack =
           window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
@@ -362,23 +368,14 @@ export function installHook(target: any): DevToolsHook | null {
         // but Webpack wraps imports with an object (e.g. _backend_console__WEBPACK_IMPORTED_MODULE_0__)
         // and the object itself will be undefined as well for the reasons mentioned above,
         // so we use try/catch instead.
-        if (!__EXTENSION__) {
-          registerRendererWithConsole(renderer);
-          patchConsole({
-            appendComponentStack,
-            breakOnConsoleErrors,
-            showInlineWarningsAndErrors,
-            hideConsoleLogsInStrictMode,
-            browserTheme,
-          });
-        } else {
-          if (consoleManagedByDevToolsDuringStrictMode) {
-            patchConsoleForInitialRenderInExtension(renderer, {
-              hideConsoleLogsInStrictMode,
-              browserTheme,
-            });
-          }
-        }
+        registerRendererWithConsole(renderer);
+        patchConsole({
+          appendComponentStack,
+          breakOnConsoleErrors,
+          showInlineWarningsAndErrors,
+          hideConsoleLogsInStrictMode,
+          browserTheme,
+        });
       } catch (error) {}
     }
 
@@ -473,6 +470,32 @@ export function installHook(target: any): DevToolsHook | null {
     }
   }
 
+  function setStrictMode(rendererID, isStrictMode) {
+    const rendererInterface = rendererInterfaces.get(rendererID);
+    if (rendererInterface != null) {
+      if (isStrictMode) {
+        rendererInterface.patchConsoleForStrictMode();
+      } else {
+        rendererInterface.unpatchConsoleForStrictMode();
+      }
+    } else {
+      // This should only happen during initial render in the extension before DevTools
+      // finishes its handshake with the injected renderer
+      if (isStrictMode) {
+        const hideConsoleLogsInStrictMode =
+          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
+
+        patchConsoleForInitialRenderInStrictMode({
+          hideConsoleLogsInStrictMode,
+          browserTheme,
+        });
+      } else {
+        unpatchConsoleForInitialRenderInStrictMode();
+      }
+    }
+  }
+
   // TODO: More meaningful names for "rendererInterfaces" and "renderers".
   const fiberRoots = {};
   const rendererInterfaces = new Map();
@@ -502,8 +525,13 @@ export function installHook(target: any): DevToolsHook | null {
     onCommitFiberUnmount,
     onCommitFiberRoot,
     onPostCommitFiberRoot,
+    setStrictMode,
   };
 
+  if (__TEST__) {
+    hook.dangerous_setTargetConsoleForTesting = dangerous_setTargetConsoleForTesting;
+  }
+
   Object.defineProperty(
     target,
     '__REACT_DEVTOOLS_GLOBAL_HOOK__',
diff --git a/packages/react-devtools-shell/src/app/console.js b/packages/react-devtools-shell/src/app/console.js
index 9f1244bf164e..22338f28844d 100644
--- a/packages/react-devtools-shell/src/app/console.js
+++ b/packages/react-devtools-shell/src/app/console.js
@@ -11,12 +11,6 @@ function ignoreStrings(
   methodName: string,
   stringsToIgnore: Array<string>,
 ): void {
-  // HACKY In the test harness, DevTools overrides the parent window's console.
-  // Our test app code uses the iframe's console though.
-  // To simulate a more accurate end-to-end environment,
-  // the shell's console patching should pass through to the parent override methods.
-  const originalMethod = window.parent.console[methodName];
-
   console[methodName] = (...args) => {
     const maybeString = args[0];
     if (typeof maybeString === 'string') {
@@ -26,7 +20,12 @@ function ignoreStrings(
         }
       }
     }
-    originalMethod(...args);
+
+    // 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);
   };
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 894bc523e4b5..8c89c369a5a6 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -149,11 +149,7 @@ import {
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {
-  shouldError,
-  shouldSuspend,
-  setIsStrictModeForDevtools,
-} from './ReactFiberReconciler';
+import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.new';
 import {
   suspenseStackCursor,
@@ -235,6 +231,7 @@ import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
+import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 264e723b2897..d56e2a2b5ff1 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -149,11 +149,7 @@ import {
   getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
-import {
-  shouldError,
-  shouldSuspend,
-  setIsStrictModeForDevtools,
-} from './ReactFiberReconciler';
+import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.old';
 import {
   suspenseStackCursor,
@@ -235,6 +231,7 @@ import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
+import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 490fa5f430f2..3cb67d045d41 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -38,7 +38,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
-import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
+import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 8c08eb581892..0e30466bf82b 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -38,7 +38,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
-import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
+import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index 52d1c68730c6..d1748dd8f228 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -7,7 +7,10 @@
  * @flow
  */
 
-import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
+import {
+  consoleManagedByDevToolsDuringStrictMode,
+  enableProfilerTimer,
+} from 'shared/ReactFeatureFlags';
 
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
@@ -25,7 +28,11 @@ import {
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
+  unstable_yieldValue,
+  unstable_setDisableYieldValue,
 } from './Scheduler';
+import {setSuppressWarning} from 'shared/consoleWithStackDev';
+import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
@@ -171,3 +178,37 @@ export function onCommitUnmount(fiber: Fiber) {
     }
   }
 }
+
+export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
+  if (consoleManagedByDevToolsDuringStrictMode) {
+    if (typeof unstable_yieldValue === 'function') {
+      // We're in a test because Scheduler.unstable_yieldValue 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);
+      setSuppressWarning(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: %s',
+              err,
+            );
+          }
+        }
+      }
+    }
+  } else {
+    if (newIsStrictMode) {
+      disableLogs();
+    } else {
+      reenableLogs();
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index 42fd68a93a8b..aeaadc84b019 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -7,7 +7,10 @@
  * @flow
  */
 
-import {enableProfilerTimer} from 'shared/ReactFeatureFlags';
+import {
+  consoleManagedByDevToolsDuringStrictMode,
+  enableProfilerTimer,
+} from 'shared/ReactFeatureFlags';
 
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
@@ -25,7 +28,11 @@ import {
   UserBlockingPriority as UserBlockingSchedulerPriority,
   NormalPriority as NormalSchedulerPriority,
   IdlePriority as IdleSchedulerPriority,
+  unstable_yieldValue,
+  unstable_setDisableYieldValue,
 } from './Scheduler';
+import {setSuppressWarning} from 'shared/consoleWithStackDev';
+import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
@@ -171,3 +178,37 @@ export function onCommitUnmount(fiber: Fiber) {
     }
   }
 }
+
+export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
+  if (consoleManagedByDevToolsDuringStrictMode) {
+    if (typeof unstable_yieldValue === 'function') {
+      // We're in a test because Scheduler.unstable_yieldValue 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);
+      setSuppressWarning(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: %s',
+              err,
+            );
+          }
+        }
+      }
+    }
+  } else {
+    if (newIsStrictMode) {
+      disableLogs();
+    } else {
+      reenableLogs();
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index ae029cd01580..1f92626fa8b2 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -48,8 +48,6 @@ import {
   observeVisibleRects as observeVisibleRects_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdatePriority as getCurrentUpdatePriority_old,
-  getIsStrictModeForDevtools as getIsStrictModeForDevtools_old,
-  setIsStrictModeForDevtools as setIsStrictModeForDevtools_old,
 } from './ReactFiberReconciler.old';
 
 import {
@@ -86,8 +84,6 @@ import {
   observeVisibleRects as observeVisibleRects_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdatePriority as getCurrentUpdatePriority_new,
-  getIsStrictModeForDevtools as getIsStrictModeForDevtools_new,
-  setIsStrictModeForDevtools as setIsStrictModeForDevtools_new,
 } from './ReactFiberReconciler.new';
 
 export const createContainer = enableNewReconciler
@@ -189,10 +185,3 @@ export const observeVisibleRects = enableNewReconciler
 export const runWithPriority = enableNewReconciler
   ? runWithPriority_new
   : runWithPriority_old;
-
-export const getIsStrictModeForDevtools = enableNewReconciler
-  ? getIsStrictModeForDevtools_new
-  : getIsStrictModeForDevtools_old;
-export const setIsStrictModeForDevtools = enableNewReconciler
-  ? setIsStrictModeForDevtools_new
-  : setIsStrictModeForDevtools_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 4219fdc72cf0..c9b78964c172 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -35,10 +35,7 @@ import {
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
-import {
-  enableSchedulingProfiler,
-  consoleManagedByDevToolsDuringStrictMode,
-} from 'shared/ReactFeatureFlags';
+import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
@@ -107,10 +104,6 @@ export {
   observeVisibleRects,
 } from './ReactTestSelectors';
 
-import * as Scheduler from './Scheduler';
-import {setSuppressWarning} from 'shared/consoleWithStackDev';
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 type OpaqueRoot = FiberRoot;
 
 // 0 is PROD, 1 is DEV.
@@ -464,8 +457,6 @@ export function shouldSuspend(fiber: Fiber): boolean {
   return shouldSuspendImpl(fiber);
 }
 
-let isStrictMode = false;
-
 let overrideHookState = null;
 let overrideHookStateDeletePath = null;
 let overrideHookStateRenamePath = null;
@@ -715,30 +706,6 @@ function getCurrentFiberForDevTools() {
   return ReactCurrentFiberCurrent;
 }
 
-export function getIsStrictModeForDevtools() {
-  return isStrictMode;
-}
-
-export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
-  isStrictMode = newIsStrictMode;
-
-  if (consoleManagedByDevToolsDuringStrictMode) {
-    // We're in a test because Scheduler.unstable_yieldValue only exists
-    // in SchedulerMock. To reduce the noise in strict mode tests,
-    // suppress warnings and disable scheduler yielding during the double render
-    if (typeof Scheduler.unstable_yieldValue === 'function') {
-      Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
-      setSuppressWarning(newIsStrictMode);
-    }
-  } else {
-    if (newIsStrictMode) {
-      disableLogs();
-    } else {
-      reenableLogs();
-    }
-  }
-}
-
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
   const {findFiberByHostInstance} = devToolsConfig;
   const {ReactCurrentDispatcher} = ReactSharedInternals;
@@ -768,7 +735,6 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
-    getIsStrictMode: __DEV__ ? getIsStrictModeForDevtools : null,
     // Enables DevTools to detect reconciler version rather than renderer version
     // which may not match for third party renderers.
     reconcilerVersion: ReactVersion,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 84bcb7e6e0d1..6ad7587eed23 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -35,10 +35,7 @@ import {
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
-import {
-  enableSchedulingProfiler,
-  consoleManagedByDevToolsDuringStrictMode,
-} from 'shared/ReactFeatureFlags';
+import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {getPublicInstance} from './ReactFiberHostConfig';
 import {
@@ -107,10 +104,6 @@ export {
   observeVisibleRects,
 } from './ReactTestSelectors';
 
-import * as Scheduler from './Scheduler';
-import {setSuppressWarning} from 'shared/consoleWithStackDev';
-import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
-
 type OpaqueRoot = FiberRoot;
 
 // 0 is PROD, 1 is DEV.
@@ -464,8 +457,6 @@ export function shouldSuspend(fiber: Fiber): boolean {
   return shouldSuspendImpl(fiber);
 }
 
-let isStrictMode = false;
-
 let overrideHookState = null;
 let overrideHookStateDeletePath = null;
 let overrideHookStateRenamePath = null;
@@ -715,30 +706,6 @@ function getCurrentFiberForDevTools() {
   return ReactCurrentFiberCurrent;
 }
 
-export function getIsStrictModeForDevtools() {
-  return isStrictMode;
-}
-
-export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
-  isStrictMode = newIsStrictMode;
-
-  if (consoleManagedByDevToolsDuringStrictMode) {
-    // We're in a test because Scheduler.unstable_yieldValue only exists
-    // in SchedulerMock. To reduce the noise in strict mode tests,
-    // suppress warnings and disable scheduler yielding during the double render
-    if (typeof Scheduler.unstable_yieldValue === 'function') {
-      Scheduler.unstable_setDisableYieldValue(newIsStrictMode);
-      setSuppressWarning(newIsStrictMode);
-    }
-  } else {
-    if (newIsStrictMode) {
-      disableLogs();
-    } else {
-      reenableLogs();
-    }
-  }
-}
-
 export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
   const {findFiberByHostInstance} = devToolsConfig;
   const {ReactCurrentDispatcher} = ReactSharedInternals;
@@ -768,7 +735,6 @@ export function injectIntoDevTools(devToolsConfig: DevToolsConfig): boolean {
     setRefreshHandler: __DEV__ ? setRefreshHandler : null,
     // Enables DevTools to append owner stacks to error messages in DEV mode.
     getCurrentFiber: __DEV__ ? getCurrentFiberForDevTools : null,
-    getIsStrictMode: __DEV__ ? getIsStrictModeForDevtools : null,
     // Enables DevTools to detect reconciler version rather than renderer version
     // which may not match for third party renderers.
     reconcilerVersion: ReactVersion,
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index a42384322fcd..cbfe307b903f 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -110,7 +110,7 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
-import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
+import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
 import invariant from 'shared/invariant';
 
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 724dfa0d7171..ece4321d6bfd 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -110,7 +110,7 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
-import {setIsStrictModeForDevtools} from './ReactFiberReconciler';
+import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
 import invariant from 'shared/invariant';
 

From d56947eb2c2a0d1599975b90a353b06b58c0e00c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 21:43:59 -0400
Subject: [PATCH 0891/1603] Increase polling threshold for publish-prereleases
 (#22392)

The publish-preleases command prints the URL of the publish workflow
so that you can visit the page and follow along.

But it can take a few seconds before the workflow ID is available, after
you create the pipeline. So the script polls the workflow endpoint
until it's available.

The current polling limit is too low so I increased it.

I also updated the error message to provide more info.
---
 scripts/release/publish-using-ci-workflow.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/scripts/release/publish-using-ci-workflow.js b/scripts/release/publish-using-ci-workflow.js
index 48a834ba1f19..d7f87b48b094 100644
--- a/scripts/release/publish-using-ci-workflow.js
+++ b/scripts/release/publish-using-ci-workflow.js
@@ -22,8 +22,8 @@ function sleep(ms) {
 
 async function getPublishWorkflowID(pipelineID) {
   // Since we just created the pipeline in a POST request, the server may 404.
-  // Try up to three times before giving up.
-  for (let i = 0; i < 3; i++) {
+  // 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`
     );
@@ -37,7 +37,7 @@ async function getPublishWorkflowID(pipelineID) {
     // CircleCI server may be stale. Wait a sec and try again.
     await sleep(1000);
   }
-  throw new Error('Failed to create CircleCI workflow.');
+  return null;
 }
 
 async function pollUntilWorkflowFinishes(workflowID) {
@@ -108,6 +108,20 @@ async function main() {
     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}`,

From ba07042c86b6e2e3dbbc930b2418d52c47ef7b47 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 21:55:47 -0400
Subject: [PATCH 0892/1603] Fix sizebot mistakenly detecting deleted files
 (#22394)

---
 .circleci/config.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 1a604e225fac..168dcdeb7494 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -120,6 +120,14 @@ jobs:
               cd ./scripts/release && yarn && cd ../../
               scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main)
               mv ./build ./base-build
+      - run:
+          # 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.
+          name: Delete extraneous files
+          command: rm -rf ./base-build/node_modules
+
       - persist_to_workspace:
           root: .
           paths:

From 8fcfdfff7e61aeac82bd0482cff6af8e342ecadc Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 22:03:01 -0400
Subject: [PATCH 0893/1603] Scrape warning messages in CI (#22393)

There's a downstream workflow that runs the `print-warnings` command. We
can make it faster by scraping the warnings in CI and storing the
result as a build artifact.
---
 .circleci/config.yml | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 168dcdeb7494..7d1eb1e8b338 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -91,6 +91,22 @@ jobs:
       - *restore_node_modules
       - run: node ./scripts/tasks/flow-ci
 
+  scrape_warning_messages:
+    docker: *docker
+    environment: *environment
+
+    steps:
+      - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          command: |
+            mkdir -p ./build
+            node ./scripts/print-warnings/print-warnings.js > build/WARNINGS
+      - persist_to_workspace:
+          root: .
+          paths:
+            - build
 
   yarn_build_combined:
     docker: *docker
@@ -345,8 +361,12 @@ workflows:
       - yarn_build_combined:
           requires:
             - setup
+      - scrape_warning_messages:
+          requires:
+            - setup
       - process_artifacts_combined:
           requires:
+            - scrape_warning_messages
             - yarn_build_combined
       - yarn_test_build:
           requires:

From 82c8fa90be86fc0afcbff2dc39486579cff1ac9a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 21 Sep 2021 23:38:24 -0400
Subject: [PATCH 0894/1603] Add back useMutableSource temporarily (#22396)

Recoil uses useMutableSource behind a flag. I thought this was fine
because Recoil isn't used in any concurrent roots, so the behavior
would be the same, but it turns out that it is used by concurrent
roots in a few places.

I'm not expecting it to be hard to migrate to useSyncExternalStore, but
to de-risk the change I'm going to roll it out gradually with a flag. In
the meantime, I've added back the useMutableSource API.
---
 .../react-debug-tools/src/ReactDebugHooks.js  |   26 +-
 .../ReactHooksInspectionIntegration-test.js   |   37 +
 packages/react-dom/src/client/ReactDOMRoot.js |   27 +-
 .../src/server/ReactPartialRendererHooks.js   |   21 +-
 .../src/ReactFiberBeginWork.new.js            |   18 +
 .../src/ReactFiberBeginWork.old.js            |   18 +
 .../src/ReactFiberCompleteWork.new.js         |    3 +
 .../src/ReactFiberCompleteWork.old.js         |    3 +
 .../src/ReactFiberHooks.new.js                |  367 ++-
 .../src/ReactFiberHooks.old.js                |  367 ++-
 .../src/ReactFiberLane.new.js                 |   11 +-
 .../src/ReactFiberLane.old.js                 |   11 +-
 .../src/ReactFiberReconciler.js               |    5 +
 .../src/ReactFiberReconciler.new.js           |    1 +
 .../src/ReactFiberReconciler.old.js           |    1 +
 .../src/ReactFiberRoot.new.js                 |    7 +-
 .../src/ReactFiberRoot.old.js                 |    7 +-
 .../src/ReactFiberUnwindWork.new.js           |    3 +
 .../src/ReactFiberUnwindWork.old.js           |    3 +
 .../src/ReactInternalTypes.js                 |   21 +-
 .../src/ReactMutableSource.new.js             |  108 +
 .../src/ReactMutableSource.old.js             |  108 +
 .../useMutableSource-test.internal.js         | 1981 +++++++++++++++++
 .../useMutableSourceHydration-test.js         |  451 ++++
 packages/react-server/src/ReactFizzHooks.js   |   21 +-
 .../react-server/src/ReactFlightServer.js     |    1 +
 .../src/ReactSuspenseTestUtils.js             |    1 +
 packages/react/index.classic.fb.js            |    4 +
 packages/react/index.experimental.js          |    2 +
 packages/react/index.js                       |    2 +
 packages/react/index.modern.fb.js             |    4 +
 packages/react/index.stable.js                |    2 +
 packages/react/src/React.js                   |    4 +
 packages/react/src/ReactHooks.js              |   16 +-
 packages/react/src/ReactMutableSource.js      |   34 +
 .../unstable-shared-subset.experimental.js    |    2 +
 packages/shared/ReactTypes.js                 |   50 +
 37 files changed, 3732 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactMutableSource.new.js
 create mode 100644 packages/react-reconciler/src/ReactMutableSource.old.js
 create mode 100644 packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
 create mode 100644 packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
 create mode 100644 packages/react/src/ReactMutableSource.js

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index cddbb0810f75..aa4d2d60fdf6 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -7,7 +7,13 @@
  * @flow
  */
 
-import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+import type {
+  MutableSource,
+  MutableSourceGetSnapshotFn,
+  MutableSourceSubscribeFn,
+  ReactContext,
+  ReactProviderType,
+} from 'shared/ReactTypes';
 import type {
   Fiber,
   Dispatcher as DispatcherType,
@@ -255,6 +261,23 @@ function useMemo<T>(
   return value;
 }
 
+function useMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  // useMutableSource() composes multiple hooks internally.
+  // Advance the current hook index the same number of times
+  // so that subsequent hooks have the right memoized state.
+  nextHook(); // MutableSource
+  nextHook(); // State
+  nextHook(); // Effect
+  nextHook(); // Effect
+  const value = getSnapshot(source._source);
+  hookLog.push({primitive: 'MutableSource', stackError: new Error(), value});
+  return value;
+}
+
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -335,6 +358,7 @@ const Dispatcher: DispatcherType = {
   useRef,
   useState,
   useTransition,
+  useMutableSource,
   useSyncExternalStore,
   useDeferredValue,
   useOpaqueIdentifier,
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 2e6896ef160f..b13bec22d213 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -1019,6 +1019,43 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
+  it('should support composite useMutableSource hook', () => {
+    const createMutableSource =
+      React.createMutableSource || React.unstable_createMutableSource;
+    const useMutableSource =
+      React.useMutableSource || React.unstable_useMutableSource;
+
+    const mutableSource = createMutableSource({}, () => 1);
+    function Foo(props) {
+      useMutableSource(
+        mutableSource,
+        () => 'snapshot',
+        () => {},
+      );
+      React.useMemo(() => 'memo', []);
+      return <div />;
+    }
+    const renderer = ReactTestRenderer.create(<Foo />);
+    const childFiber = renderer.root.findByType(Foo)._currentFiber();
+    const tree = ReactDebugTools.inspectHooksOfFiber(childFiber);
+    expect(tree).toEqual([
+      {
+        id: 0,
+        isStateEditable: false,
+        name: 'MutableSource',
+        value: 'snapshot',
+        subHooks: [],
+      },
+      {
+        id: 1,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'memo',
+        subHooks: [],
+      },
+    ]);
+  });
+
   // @gate experimental || www
   it('should support composite useSyncExternalStore hook', () => {
     const useSyncExternalStore = React.unstable_useSyncExternalStore;
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 3bde63dc67a3..ba062fc3f71e 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -8,7 +8,7 @@
  */
 
 import type {Container} from './ReactDOMHostConfig';
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {MutableSource, ReactNodeList} from 'shared/ReactTypes';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 
 export type RootType = {
@@ -24,6 +24,7 @@ export type CreateRootOptions = {
   hydrationOptions?: {
     onHydrated?: (suspenseNode: Comment) => void,
     onDeleted?: (suspenseNode: Comment) => void,
+    mutableSources?: Array<MutableSource<any>>,
     ...
   },
   // END OF TODO
@@ -34,6 +35,7 @@ export type CreateRootOptions = {
 
 export type HydrateRootOptions = {
   // Hydration options
+  hydratedSources?: Array<MutableSource<any>>,
   onHydrated?: (suspenseNode: Comment) => void,
   onDeleted?: (suspenseNode: Comment) => void,
   // Options for all roots
@@ -59,6 +61,7 @@ import {
   createContainer,
   updateContainer,
   findHostInstanceWithNoPortals,
+  registerMutableSourceForHydration,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
@@ -126,6 +129,11 @@ export function createRoot(
   const hydrate = options != null && options.hydrate === true;
   const hydrationCallbacks =
     (options != null && options.hydrationOptions) || null;
+  const mutableSources =
+    (options != null &&
+      options.hydrationOptions != null &&
+      options.hydrationOptions.mutableSources) ||
+    null;
   // END TODO
 
   const isStrictMode = options != null && options.unstable_strictMode === true;
@@ -151,6 +159,15 @@ export function createRoot(
     container.nodeType === COMMENT_NODE ? container.parentNode : container;
   listenToAllSupportedEvents(rootContainerElement);
 
+  // TODO: Delete this path
+  if (mutableSources) {
+    for (let i = 0; i < mutableSources.length; i++) {
+      const mutableSource = mutableSources[i];
+      registerMutableSourceForHydration(root, mutableSource);
+    }
+  }
+  // END TODO
+
   return new ReactDOMRoot(root);
 }
 
@@ -168,6 +185,7 @@ export function hydrateRoot(
   // For now we reuse the whole bag of options since they contain
   // the hydration callbacks.
   const hydrationCallbacks = options != null ? options : null;
+  const mutableSources = (options != null && options.hydratedSources) || null;
   const isStrictMode = options != null && options.unstable_strictMode === true;
 
   let concurrentUpdatesByDefaultOverride = null;
@@ -190,6 +208,13 @@ export function hydrateRoot(
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.
   listenToAllSupportedEvents(container);
 
+  if (mutableSources) {
+    for (let i = 0; i < mutableSources.length; i++) {
+      const mutableSource = mutableSources[i];
+      registerMutableSourceForHydration(root, mutableSource);
+    }
+  }
+
   // Render the initial children
   updateContainer(initialChildren, root, null, null);
 
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index a57e6952a3fd..edc5df3dce4b 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -9,7 +9,12 @@
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {
+  MutableSource,
+  MutableSourceGetSnapshotFn,
+  MutableSourceSubscribeFn,
+  ReactContext,
+} from 'shared/ReactTypes';
 import type PartialRenderer from './ReactPartialRenderer';
 
 import {validateContextBounds} from './ReactPartialRendererContext';
@@ -461,6 +466,18 @@ export function useCallback<T>(
   return useMemo(() => callback, deps);
 }
 
+// TODO Decide on how to implement this hook for server rendering.
+// If a mutation occurs during render, consider triggering a Suspense boundary
+// and falling back to client rendering.
+function useMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  resolveCurrentlyRenderingComponent();
+  return getSnapshot(source._source);
+}
+
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -527,6 +544,8 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
+  // Subscriptions are not setup in a server environment.
+  useMutableSource,
   useSyncExternalStore,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 8c89c369a5a6..9ad53ec00f27 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -12,6 +12,7 @@ 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.new';
+import type {MutableSource} from 'shared/ReactTypes';
 import type {
   SuspenseState,
   SuspenseListRenderState,
@@ -144,6 +145,7 @@ import {
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
+  supportsHydration,
   isPrimaryRenderer,
   supportsPersistence,
   getOffscreenContainerProps,
@@ -218,6 +220,7 @@ import {
   RetryAfterError,
   NoContext,
 } from './ReactFiberWorkLoop.new';
+import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {
   requestCacheFromPool,
   pushCacheProvider,
@@ -1297,6 +1300,21 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
     // not hydrating.
+
+    if (supportsHydration) {
+      const mutableSourceEagerHydrationData =
+        root.mutableSourceEagerHydrationData;
+      if (mutableSourceEagerHydrationData != null) {
+        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+          const mutableSource = ((mutableSourceEagerHydrationData[
+            i
+          ]: any): MutableSource<any>);
+          const version = mutableSourceEagerHydrationData[i + 1];
+          setWorkInProgressVersion(mutableSource, version);
+        }
+      }
+    }
+
     const child = mountChildFibers(
       workInProgress,
       null,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index d56e2a2b5ff1..bef7863638ff 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -12,6 +12,7 @@ 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.old';
+import type {MutableSource} from 'shared/ReactTypes';
 import type {
   SuspenseState,
   SuspenseListRenderState,
@@ -144,6 +145,7 @@ import {
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
   registerSuspenseInstanceRetry,
+  supportsHydration,
   isPrimaryRenderer,
   supportsPersistence,
   getOffscreenContainerProps,
@@ -218,6 +220,7 @@ import {
   RetryAfterError,
   NoContext,
 } from './ReactFiberWorkLoop.old';
+import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {
   requestCacheFromPool,
   pushCacheProvider,
@@ -1297,6 +1300,21 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
     // not hydrating.
+
+    if (supportsHydration) {
+      const mutableSourceEagerHydrationData =
+        root.mutableSourceEagerHydrationData;
+      if (mutableSourceEagerHydrationData != null) {
+        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+          const mutableSource = ((mutableSourceEagerHydrationData[
+            i
+          ]: any): MutableSource<any>);
+          const version = mutableSourceEagerHydrationData[i + 1];
+          setWorkInProgressVersion(mutableSource, version);
+        }
+      }
+    }
+
     const child = mountChildFibers(
       workInProgress,
       null,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index e7d6f40e98bd..1382439f1ee7 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -30,6 +30,8 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
+import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
+
 import {now} from './Scheduler';
 
 import {
@@ -852,6 +854,7 @@ function completeWork(
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
+      resetMutableSourceWorkInProgressVersions();
       if (fiberRoot.pendingContext) {
         fiberRoot.context = fiberRoot.pendingContext;
         fiberRoot.pendingContext = null;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 6e8406fc05df..746e3d4b572d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -30,6 +30,8 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
 
+import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
+
 import {now} from './Scheduler';
 
 import {
@@ -852,6 +854,7 @@ function completeWork(
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
+      resetMutableSourceWorkInProgressVersions();
       if (fiberRoot.pendingContext) {
         fiberRoot.context = fiberRoot.pendingContext;
         fiberRoot.pendingContext = null;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index f797d7d5812e..76af5ddf5074 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -7,7 +7,12 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {
+  MutableSource,
+  MutableSourceGetSnapshotFn,
+  MutableSourceSubscribeFn,
+  ReactContext,
+} from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {HookFlags} from './ReactHookEffectTags';
@@ -45,6 +50,7 @@ import {
   intersectLanes,
   isTransitionLane,
   markRootEntangled,
+  markRootMutableRead,
   NoTimestamp,
 } from './ReactFiberLane.new';
 import {
@@ -96,6 +102,12 @@ import {
   makeClientIdInDEV,
   makeOpaqueHydratingObject,
 } from './ReactFiberHostConfig';
+import {
+  getWorkInProgressVersion,
+  markSourceAsDirty,
+  setWorkInProgressVersion,
+  warnAboutMultipleRenderersDEV,
+} from './ReactMutableSource.new';
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
@@ -935,6 +947,289 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
+type MutableSourceMemoizedState<Source, Snapshot> = {|
+  refs: {
+    getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+    setSnapshot: Snapshot => void,
+  },
+  source: MutableSource<any>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+|};
+
+function readFromUnsubscribedMutableSource<Source, Snapshot>(
+  root: FiberRoot,
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+): Snapshot {
+  if (__DEV__) {
+    warnAboutMultipleRenderersDEV(source);
+  }
+
+  const getVersion = source._getVersion;
+  const version = getVersion(source._source);
+
+  // Is it safe for this component to read from this source during the current render?
+  let isSafeToReadFromSource = false;
+
+  // Check the version first.
+  // If this render has already been started with a specific version,
+  // we can use it alone to determine if we can safely read from the source.
+  const currentRenderVersion = getWorkInProgressVersion(source);
+  if (currentRenderVersion !== null) {
+    // It's safe to read if the store hasn't been mutated since the last time
+    // we read something.
+    isSafeToReadFromSource = currentRenderVersion === version;
+  } else {
+    // If there's no version, then this is the first time we've read from the
+    // source during the current render pass, so we need to do a bit more work.
+    // What we need to determine is if there are any hooks that already
+    // subscribed to the source, and if so, whether there are any pending
+    // mutations that haven't been synchronized yet.
+    //
+    // If there are no pending mutations, then `root.mutableReadLanes` will be
+    // empty, and we know we can safely read.
+    //
+    // If there *are* pending mutations, we may still be able to safely read
+    // if the currently rendering lanes are inclusive of the pending mutation
+    // lanes, since that guarantees that the value we're about to read from
+    // the source is consistent with the values that we read during the most
+    // recent mutation.
+    isSafeToReadFromSource = isSubsetOfLanes(
+      renderLanes,
+      root.mutableReadLanes,
+    );
+
+    if (isSafeToReadFromSource) {
+      // If it's safe to read from this source during the current render,
+      // store the version in case other components read from it.
+      // A changed version number will let those components know to throw and restart the render.
+      setWorkInProgressVersion(source, version);
+    }
+  }
+
+  if (isSafeToReadFromSource) {
+    const snapshot = getSnapshot(source._source);
+    if (__DEV__) {
+      if (typeof snapshot === 'function') {
+        console.error(
+          'Mutable source should not return a function as the snapshot value. ' +
+            'Functions may close over mutable values and cause tearing.',
+        );
+      }
+    }
+    return snapshot;
+  } else {
+    // This handles the special case of a mutable source being shared between renderers.
+    // In that case, if the source is mutated between the first and second renderer,
+    // The second renderer don't know that it needs to reset the WIP version during unwind,
+    // (because the hook only marks sources as dirty if it's written to their WIP version).
+    // That would cause this tear check to throw again and eventually be visible to the user.
+    // We can avoid this infinite loop by explicitly marking the source as dirty.
+    //
+    // This can lead to tearing in the first renderer when it resumes,
+    // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
+    markSourceAsDirty(source);
+
+    // Intentioally throw an error to force React to retry synchronously. During
+    // the synchronous retry, it will block interleaved mutations, so we should
+    // get a consistent read. Therefore, the following error should never be
+    // visible to the user.
+
+    // We expect this error not to be thrown during the synchronous retry,
+    // because we blocked interleaved mutations.
+    invariant(
+      false,
+      'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
+    );
+  }
+}
+
+function useMutableSource<Source, Snapshot>(
+  hook: Hook,
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  const root = ((getWorkInProgressRoot(): any): FiberRoot);
+  invariant(
+    root !== null,
+    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+  );
+
+  const getVersion = source._getVersion;
+  const version = getVersion(source._source);
+
+  const dispatcher = ReactCurrentDispatcher.current;
+
+  // eslint-disable-next-line prefer-const
+  let [currentSnapshot, setSnapshot] = dispatcher.useState(() =>
+    readFromUnsubscribedMutableSource(root, source, getSnapshot),
+  );
+  let snapshot = currentSnapshot;
+
+  // Grab a handle to the state hook as well.
+  // We use it to clear the pending update queue if we have a new source.
+  const stateHook = ((workInProgressHook: any): Hook);
+
+  const memoizedState = ((hook.memoizedState: any): MutableSourceMemoizedState<
+    Source,
+    Snapshot,
+  >);
+  const refs = memoizedState.refs;
+  const prevGetSnapshot = refs.getSnapshot;
+  const prevSource = memoizedState.source;
+  const prevSubscribe = memoizedState.subscribe;
+
+  const fiber = currentlyRenderingFiber;
+
+  hook.memoizedState = ({
+    refs,
+    source,
+    subscribe,
+  }: MutableSourceMemoizedState<Source, Snapshot>);
+
+  // Sync the values needed by our subscription handler after each commit.
+  dispatcher.useEffect(() => {
+    refs.getSnapshot = getSnapshot;
+
+    // Normally the dispatch function for a state hook never changes,
+    // but this hook recreates the queue in certain cases  to avoid updates from stale sources.
+    // handleChange() below needs to reference the dispatch function without re-subscribing,
+    // so we use a ref to ensure that it always has the latest version.
+    refs.setSnapshot = setSnapshot;
+
+    // Check for a possible change between when we last rendered now.
+    const maybeNewVersion = getVersion(source._source);
+    if (!is(version, maybeNewVersion)) {
+      const maybeNewSnapshot = getSnapshot(source._source);
+      if (__DEV__) {
+        if (typeof maybeNewSnapshot === 'function') {
+          console.error(
+            'Mutable source should not return a function as the snapshot value. ' +
+              'Functions may close over mutable values and cause tearing.',
+          );
+        }
+      }
+
+      if (!is(snapshot, maybeNewSnapshot)) {
+        setSnapshot(maybeNewSnapshot);
+
+        const lane = requestUpdateLane(fiber);
+        markRootMutableRead(root, lane);
+      }
+      // If the source mutated between render and now,
+      // there may be state updates already scheduled from the old source.
+      // Entangle the updates so that they render in the same batch.
+      markRootEntangled(root, root.mutableReadLanes);
+    }
+  }, [getSnapshot, source, subscribe]);
+
+  // If we got a new source or subscribe function, re-subscribe in a passive effect.
+  dispatcher.useEffect(() => {
+    const handleChange = () => {
+      const latestGetSnapshot = refs.getSnapshot;
+      const latestSetSnapshot = refs.setSnapshot;
+
+      try {
+        latestSetSnapshot(latestGetSnapshot(source._source));
+
+        // Record a pending mutable source update with the same expiration time.
+        const lane = requestUpdateLane(fiber);
+
+        markRootMutableRead(root, lane);
+      } catch (error) {
+        // A selector might throw after a source mutation.
+        // e.g. it might try to read from a part of the store that no longer exists.
+        // In this case we should still schedule an update with React.
+        // Worst case the selector will throw again and then an error boundary will handle it.
+        latestSetSnapshot(
+          (() => {
+            throw error;
+          }: any),
+        );
+      }
+    };
+
+    const unsubscribe = subscribe(source._source, handleChange);
+    if (__DEV__) {
+      if (typeof unsubscribe !== 'function') {
+        console.error(
+          'Mutable source subscribe function must return an unsubscribe function.',
+        );
+      }
+    }
+
+    return unsubscribe;
+  }, [source, subscribe]);
+
+  // If any of the inputs to useMutableSource change, reading is potentially unsafe.
+  //
+  // If either the source or the subscription have changed we can't can't trust the update queue.
+  // Maybe the source changed in a way that the old subscription ignored but the new one depends on.
+  //
+  // If the getSnapshot function changed, we also shouldn't rely on the update queue.
+  // It's possible that the underlying source was mutated between the when the last "change" event fired,
+  // and when the current render (with the new getSnapshot function) is processed.
+  //
+  // In both cases, we need to throw away pending updates (since they are no longer relevant)
+  // and treat reading from the source as we do in the mount case.
+  if (
+    !is(prevGetSnapshot, getSnapshot) ||
+    !is(prevSource, source) ||
+    !is(prevSubscribe, subscribe)
+  ) {
+    // Create a new queue and setState method,
+    // So if there are interleaved updates, they get pushed to the older queue.
+    // When this becomes current, the previous queue and dispatch method will be discarded,
+    // including any interleaving updates that occur.
+    const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
+      pending: null,
+      interleaved: null,
+      lanes: NoLanes,
+      dispatch: null,
+      lastRenderedReducer: basicStateReducer,
+      lastRenderedState: snapshot,
+    };
+    newQueue.dispatch = setSnapshot = (dispatchAction.bind(
+      null,
+      currentlyRenderingFiber,
+      newQueue,
+    ): any);
+    stateHook.queue = newQueue;
+    stateHook.baseQueue = null;
+    snapshot = readFromUnsubscribedMutableSource(root, source, getSnapshot);
+    stateHook.memoizedState = stateHook.baseState = snapshot;
+  }
+
+  return snapshot;
+}
+
+function mountMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = ({
+    refs: {
+      getSnapshot,
+      setSnapshot: (null: any),
+    },
+    source,
+    subscribe,
+  }: MutableSourceMemoizedState<Source, Snapshot>);
+  return useMutableSource(hook, source, getSnapshot, subscribe);
+}
+
+function updateMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  const hook = updateWorkInProgressHook();
+  return useMutableSource(hook, source, getSnapshot, subscribe);
+}
+
 function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -2035,6 +2330,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useDebugValue: throwInvalidHookError,
   useDeferredValue: throwInvalidHookError,
   useTransition: throwInvalidHookError,
+  useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
 
@@ -2061,6 +2357,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useDebugValue: mountDebugValue,
   useDeferredValue: mountDeferredValue,
   useTransition: mountTransition,
+  useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
 
@@ -2087,6 +2384,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: updateDeferredValue,
   useTransition: updateTransition,
+  useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
 
@@ -2113,6 +2411,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
+  useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
 
@@ -2262,6 +2561,15 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      mountHookTypesDev();
+      return mountMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2394,6 +2702,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      updateHookTypesDev();
+      return mountMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2526,6 +2843,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2659,6 +2985,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2805,6 +3140,16 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2953,6 +3298,16 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3102,6 +3457,16 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 4d93786f6b79..b755852fe618 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -7,7 +7,12 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {
+  MutableSource,
+  MutableSourceGetSnapshotFn,
+  MutableSourceSubscribeFn,
+  ReactContext,
+} from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {HookFlags} from './ReactHookEffectTags';
@@ -45,6 +50,7 @@ import {
   intersectLanes,
   isTransitionLane,
   markRootEntangled,
+  markRootMutableRead,
   NoTimestamp,
 } from './ReactFiberLane.old';
 import {
@@ -96,6 +102,12 @@ import {
   makeClientIdInDEV,
   makeOpaqueHydratingObject,
 } from './ReactFiberHostConfig';
+import {
+  getWorkInProgressVersion,
+  markSourceAsDirty,
+  setWorkInProgressVersion,
+  warnAboutMultipleRenderersDEV,
+} from './ReactMutableSource.old';
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
@@ -935,6 +947,289 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
+type MutableSourceMemoizedState<Source, Snapshot> = {|
+  refs: {
+    getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+    setSnapshot: Snapshot => void,
+  },
+  source: MutableSource<any>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+|};
+
+function readFromUnsubscribedMutableSource<Source, Snapshot>(
+  root: FiberRoot,
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+): Snapshot {
+  if (__DEV__) {
+    warnAboutMultipleRenderersDEV(source);
+  }
+
+  const getVersion = source._getVersion;
+  const version = getVersion(source._source);
+
+  // Is it safe for this component to read from this source during the current render?
+  let isSafeToReadFromSource = false;
+
+  // Check the version first.
+  // If this render has already been started with a specific version,
+  // we can use it alone to determine if we can safely read from the source.
+  const currentRenderVersion = getWorkInProgressVersion(source);
+  if (currentRenderVersion !== null) {
+    // It's safe to read if the store hasn't been mutated since the last time
+    // we read something.
+    isSafeToReadFromSource = currentRenderVersion === version;
+  } else {
+    // If there's no version, then this is the first time we've read from the
+    // source during the current render pass, so we need to do a bit more work.
+    // What we need to determine is if there are any hooks that already
+    // subscribed to the source, and if so, whether there are any pending
+    // mutations that haven't been synchronized yet.
+    //
+    // If there are no pending mutations, then `root.mutableReadLanes` will be
+    // empty, and we know we can safely read.
+    //
+    // If there *are* pending mutations, we may still be able to safely read
+    // if the currently rendering lanes are inclusive of the pending mutation
+    // lanes, since that guarantees that the value we're about to read from
+    // the source is consistent with the values that we read during the most
+    // recent mutation.
+    isSafeToReadFromSource = isSubsetOfLanes(
+      renderLanes,
+      root.mutableReadLanes,
+    );
+
+    if (isSafeToReadFromSource) {
+      // If it's safe to read from this source during the current render,
+      // store the version in case other components read from it.
+      // A changed version number will let those components know to throw and restart the render.
+      setWorkInProgressVersion(source, version);
+    }
+  }
+
+  if (isSafeToReadFromSource) {
+    const snapshot = getSnapshot(source._source);
+    if (__DEV__) {
+      if (typeof snapshot === 'function') {
+        console.error(
+          'Mutable source should not return a function as the snapshot value. ' +
+            'Functions may close over mutable values and cause tearing.',
+        );
+      }
+    }
+    return snapshot;
+  } else {
+    // This handles the special case of a mutable source being shared between renderers.
+    // In that case, if the source is mutated between the first and second renderer,
+    // The second renderer don't know that it needs to reset the WIP version during unwind,
+    // (because the hook only marks sources as dirty if it's written to their WIP version).
+    // That would cause this tear check to throw again and eventually be visible to the user.
+    // We can avoid this infinite loop by explicitly marking the source as dirty.
+    //
+    // This can lead to tearing in the first renderer when it resumes,
+    // but there's nothing we can do about that (short of throwing here and refusing to continue the render).
+    markSourceAsDirty(source);
+
+    // Intentioally throw an error to force React to retry synchronously. During
+    // the synchronous retry, it will block interleaved mutations, so we should
+    // get a consistent read. Therefore, the following error should never be
+    // visible to the user.
+
+    // We expect this error not to be thrown during the synchronous retry,
+    // because we blocked interleaved mutations.
+    invariant(
+      false,
+      'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
+    );
+  }
+}
+
+function useMutableSource<Source, Snapshot>(
+  hook: Hook,
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  const root = ((getWorkInProgressRoot(): any): FiberRoot);
+  invariant(
+    root !== null,
+    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+  );
+
+  const getVersion = source._getVersion;
+  const version = getVersion(source._source);
+
+  const dispatcher = ReactCurrentDispatcher.current;
+
+  // eslint-disable-next-line prefer-const
+  let [currentSnapshot, setSnapshot] = dispatcher.useState(() =>
+    readFromUnsubscribedMutableSource(root, source, getSnapshot),
+  );
+  let snapshot = currentSnapshot;
+
+  // Grab a handle to the state hook as well.
+  // We use it to clear the pending update queue if we have a new source.
+  const stateHook = ((workInProgressHook: any): Hook);
+
+  const memoizedState = ((hook.memoizedState: any): MutableSourceMemoizedState<
+    Source,
+    Snapshot,
+  >);
+  const refs = memoizedState.refs;
+  const prevGetSnapshot = refs.getSnapshot;
+  const prevSource = memoizedState.source;
+  const prevSubscribe = memoizedState.subscribe;
+
+  const fiber = currentlyRenderingFiber;
+
+  hook.memoizedState = ({
+    refs,
+    source,
+    subscribe,
+  }: MutableSourceMemoizedState<Source, Snapshot>);
+
+  // Sync the values needed by our subscription handler after each commit.
+  dispatcher.useEffect(() => {
+    refs.getSnapshot = getSnapshot;
+
+    // Normally the dispatch function for a state hook never changes,
+    // but this hook recreates the queue in certain cases  to avoid updates from stale sources.
+    // handleChange() below needs to reference the dispatch function without re-subscribing,
+    // so we use a ref to ensure that it always has the latest version.
+    refs.setSnapshot = setSnapshot;
+
+    // Check for a possible change between when we last rendered now.
+    const maybeNewVersion = getVersion(source._source);
+    if (!is(version, maybeNewVersion)) {
+      const maybeNewSnapshot = getSnapshot(source._source);
+      if (__DEV__) {
+        if (typeof maybeNewSnapshot === 'function') {
+          console.error(
+            'Mutable source should not return a function as the snapshot value. ' +
+              'Functions may close over mutable values and cause tearing.',
+          );
+        }
+      }
+
+      if (!is(snapshot, maybeNewSnapshot)) {
+        setSnapshot(maybeNewSnapshot);
+
+        const lane = requestUpdateLane(fiber);
+        markRootMutableRead(root, lane);
+      }
+      // If the source mutated between render and now,
+      // there may be state updates already scheduled from the old source.
+      // Entangle the updates so that they render in the same batch.
+      markRootEntangled(root, root.mutableReadLanes);
+    }
+  }, [getSnapshot, source, subscribe]);
+
+  // If we got a new source or subscribe function, re-subscribe in a passive effect.
+  dispatcher.useEffect(() => {
+    const handleChange = () => {
+      const latestGetSnapshot = refs.getSnapshot;
+      const latestSetSnapshot = refs.setSnapshot;
+
+      try {
+        latestSetSnapshot(latestGetSnapshot(source._source));
+
+        // Record a pending mutable source update with the same expiration time.
+        const lane = requestUpdateLane(fiber);
+
+        markRootMutableRead(root, lane);
+      } catch (error) {
+        // A selector might throw after a source mutation.
+        // e.g. it might try to read from a part of the store that no longer exists.
+        // In this case we should still schedule an update with React.
+        // Worst case the selector will throw again and then an error boundary will handle it.
+        latestSetSnapshot(
+          (() => {
+            throw error;
+          }: any),
+        );
+      }
+    };
+
+    const unsubscribe = subscribe(source._source, handleChange);
+    if (__DEV__) {
+      if (typeof unsubscribe !== 'function') {
+        console.error(
+          'Mutable source subscribe function must return an unsubscribe function.',
+        );
+      }
+    }
+
+    return unsubscribe;
+  }, [source, subscribe]);
+
+  // If any of the inputs to useMutableSource change, reading is potentially unsafe.
+  //
+  // If either the source or the subscription have changed we can't can't trust the update queue.
+  // Maybe the source changed in a way that the old subscription ignored but the new one depends on.
+  //
+  // If the getSnapshot function changed, we also shouldn't rely on the update queue.
+  // It's possible that the underlying source was mutated between the when the last "change" event fired,
+  // and when the current render (with the new getSnapshot function) is processed.
+  //
+  // In both cases, we need to throw away pending updates (since they are no longer relevant)
+  // and treat reading from the source as we do in the mount case.
+  if (
+    !is(prevGetSnapshot, getSnapshot) ||
+    !is(prevSource, source) ||
+    !is(prevSubscribe, subscribe)
+  ) {
+    // Create a new queue and setState method,
+    // So if there are interleaved updates, they get pushed to the older queue.
+    // When this becomes current, the previous queue and dispatch method will be discarded,
+    // including any interleaving updates that occur.
+    const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
+      pending: null,
+      interleaved: null,
+      lanes: NoLanes,
+      dispatch: null,
+      lastRenderedReducer: basicStateReducer,
+      lastRenderedState: snapshot,
+    };
+    newQueue.dispatch = setSnapshot = (dispatchAction.bind(
+      null,
+      currentlyRenderingFiber,
+      newQueue,
+    ): any);
+    stateHook.queue = newQueue;
+    stateHook.baseQueue = null;
+    snapshot = readFromUnsubscribedMutableSource(root, source, getSnapshot);
+    stateHook.memoizedState = stateHook.baseState = snapshot;
+  }
+
+  return snapshot;
+}
+
+function mountMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = ({
+    refs: {
+      getSnapshot,
+      setSnapshot: (null: any),
+    },
+    source,
+    subscribe,
+  }: MutableSourceMemoizedState<Source, Snapshot>);
+  return useMutableSource(hook, source, getSnapshot, subscribe);
+}
+
+function updateMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  const hook = updateWorkInProgressHook();
+  return useMutableSource(hook, source, getSnapshot, subscribe);
+}
+
 function mountSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -2035,6 +2330,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useDebugValue: throwInvalidHookError,
   useDeferredValue: throwInvalidHookError,
   useTransition: throwInvalidHookError,
+  useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
 
@@ -2061,6 +2357,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useDebugValue: mountDebugValue,
   useDeferredValue: mountDeferredValue,
   useTransition: mountTransition,
+  useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
 
@@ -2087,6 +2384,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: updateDeferredValue,
   useTransition: updateTransition,
+  useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
 
@@ -2113,6 +2411,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDebugValue: updateDebugValue,
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
+  useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
 
@@ -2262,6 +2561,15 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      mountHookTypesDev();
+      return mountMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2394,6 +2702,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      updateHookTypesDev();
+      return mountMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2526,6 +2843,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2659,6 +2985,15 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2805,6 +3140,16 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -2953,6 +3298,16 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
@@ -3102,6 +3457,16 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderTransition();
     },
+    useMutableSource<Source, Snapshot>(
+      source: MutableSource<Source>,
+      getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+      subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+    ): Snapshot {
+      currentHookNameInDev = 'useMutableSource';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateMutableSource(source, getSnapshot, subscribe);
+    },
     useSyncExternalStore<T>(
       subscribe: (() => void) => () => void,
       getSnapshot: () => T,
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 15d8e7ff019d..ad124a432a4a 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -283,9 +283,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // 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.
+  // For those exceptions where entanglement is semantically important, like
+  // useMutableSource, we should ensure that there is no partial work at the
+  // time we apply the entanglement.
   const entangledLanes = root.entangledLanes;
   if (entangledLanes !== NoLanes) {
     const entanglements = root.entanglements;
@@ -617,6 +617,10 @@ export function markRootPinged(
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
 }
 
+export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
+  root.mutableReadLanes |= updateLane & root.pendingLanes;
+}
+
 export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   const noLongerPendingLanes = root.pendingLanes & ~remainingLanes;
 
@@ -627,6 +631,7 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.pingedLanes = 0;
 
   root.expiredLanes &= remainingLanes;
+  root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 49927abb20bb..4a064a384651 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -283,9 +283,9 @@ export function getNextLanes(root: FiberRoot, wipLanes: Lanes): Lanes {
   // 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.
+  // For those exceptions where entanglement is semantically important, like
+  // useMutableSource, we should ensure that there is no partial work at the
+  // time we apply the entanglement.
   const entangledLanes = root.entangledLanes;
   if (entangledLanes !== NoLanes) {
     const entanglements = root.entanglements;
@@ -617,6 +617,10 @@ export function markRootPinged(
   root.pingedLanes |= root.suspendedLanes & pingedLanes;
 }
 
+export function markRootMutableRead(root: FiberRoot, updateLane: Lane) {
+  root.mutableReadLanes |= updateLane & root.pendingLanes;
+}
+
 export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   const noLongerPendingLanes = root.pendingLanes & ~remainingLanes;
 
@@ -627,6 +631,7 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.pingedLanes = 0;
 
   root.expiredLanes &= remainingLanes;
+  root.mutableReadLanes &= remainingLanes;
 
   root.entangledLanes &= remainingLanes;
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 1f92626fa8b2..d25783164e98 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -46,6 +46,7 @@ import {
   findBoundingRects as findBoundingRects_old,
   focusWithin as focusWithin_old,
   observeVisibleRects as observeVisibleRects_old,
+  registerMutableSourceForHydration as registerMutableSourceForHydration_old,
   runWithPriority as runWithPriority_old,
   getCurrentUpdatePriority as getCurrentUpdatePriority_old,
 } from './ReactFiberReconciler.old';
@@ -82,6 +83,7 @@ import {
   findBoundingRects as findBoundingRects_new,
   focusWithin as focusWithin_new,
   observeVisibleRects as observeVisibleRects_new,
+  registerMutableSourceForHydration as registerMutableSourceForHydration_new,
   runWithPriority as runWithPriority_new,
   getCurrentUpdatePriority as getCurrentUpdatePriority_new,
 } from './ReactFiberReconciler.new';
@@ -182,6 +184,9 @@ export const focusWithin = enableNewReconciler
 export const observeVisibleRects = enableNewReconciler
   ? observeVisibleRects_new
   : observeVisibleRects_old;
+export const registerMutableSourceForHydration = enableNewReconciler
+  ? registerMutableSourceForHydration_new
+  : registerMutableSourceForHydration_old;
 export const runWithPriority = enableNewReconciler
   ? runWithPriority_new
   : runWithPriority_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index c9b78964c172..90503a183d94 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -90,6 +90,7 @@ import {
 } from './ReactFiberHotReloading.new';
 import {markRenderScheduled} from './SchedulingProfiler';
 import ReactVersion from 'shared/ReactVersion';
+export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
 export {
   createComponentSelector,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 6ad7587eed23..2608bc260264 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -90,6 +90,7 @@ import {
 } from './ReactFiberHotReloading.old';
 import {markRenderScheduled} from './SchedulingProfiler';
 import ReactVersion from 'shared/ReactVersion';
+export {registerMutableSourceForHydration} from './ReactMutableSource.old';
 export {createPortal} from './ReactPortal';
 export {
   createComponentSelector,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 84e487c24875..e96b12344d09 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -10,7 +10,7 @@
 import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 
-import {noTimeout} from './ReactFiberHostConfig';
+import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
 import {
   NoLane,
@@ -49,6 +49,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
   this.expiredLanes = NoLanes;
+  this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
   this.entangledLanes = NoLanes;
@@ -59,6 +60,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.pooledCacheLanes = NoLanes;
   }
 
+  if (supportsHydration) {
+    this.mutableSourceEagerHydrationData = null;
+  }
+
   if (enableSuspenseCallback) {
     this.hydrationCallbacks = null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 5750e21ddeca..b6e198ba2e00 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -10,7 +10,7 @@
 import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 
-import {noTimeout} from './ReactFiberHostConfig';
+import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
 import {
   NoLane,
@@ -49,6 +49,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.suspendedLanes = NoLanes;
   this.pingedLanes = NoLanes;
   this.expiredLanes = NoLanes;
+  this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
 
   this.entangledLanes = NoLanes;
@@ -59,6 +60,10 @@ function FiberRootNode(containerInfo, tag, hydrate) {
     this.pooledCacheLanes = NoLanes;
   }
 
+  if (supportsHydration) {
+    this.mutableSourceEagerHydrationData = null;
+  }
+
   if (enableSuspenseCallback) {
     this.hydrationCallbacks = null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index cb0d90e1a7f5..152837286f5d 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -13,6 +13,7 @@ import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
 
+import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
   ClassComponent,
   HostRoot,
@@ -82,6 +83,7 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
+      resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
       invariant(
         (flags & DidCapture) === NoFlags,
@@ -177,6 +179,7 @@ function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
+      resetMutableSourceWorkInProgressVersions();
       break;
     }
     case HostComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 8fb63177c01e..88861db778be 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -13,6 +13,7 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
 
+import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 import {
   ClassComponent,
   HostRoot,
@@ -82,6 +83,7 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
+      resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
       invariant(
         (flags & DidCapture) === NoFlags,
@@ -177,6 +179,7 @@ function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
       }
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
+      resetMutableSourceWorkInProgressVersions();
       break;
     }
     case HostComponent: {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index bf7ffb2b33d1..673298b8da3d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -8,7 +8,14 @@
  */
 
 import type {Source} from 'shared/ReactElementType';
-import type {RefObject, ReactContext} from 'shared/ReactTypes';
+import type {
+  RefObject,
+  ReactContext,
+  MutableSourceSubscribeFn,
+  MutableSourceGetSnapshotFn,
+  MutableSourceVersion,
+  MutableSource,
+} from 'shared/ReactTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -34,6 +41,7 @@ export type HookType =
   | 'useDebugValue'
   | 'useDeferredValue'
   | 'useTransition'
+  | 'useMutableSource'
   | 'useSyncExternalStore'
   | 'useOpaqueIdentifier'
   | 'useCacheRefresh';
@@ -206,6 +214,11 @@ type BaseFiberRootProperties = {|
   // Determines if we should attempt to hydrate on the initial mount
   +hydrate: boolean,
 
+  // Used by useMutableSource hook to avoid tearing during hydration.
+  mutableSourceEagerHydrationData?: Array<
+    MutableSource<any> | MutableSourceVersion,
+  > | null,
+
   // Node returned by Scheduler.scheduleCallback. Represents the next rendering
   // task that the root will work on.
   callbackNode: *,
@@ -217,6 +230,7 @@ type BaseFiberRootProperties = {|
   suspendedLanes: Lanes,
   pingedLanes: Lanes,
   expiredLanes: Lanes,
+  mutableReadLanes: Lanes,
 
   finishedLanes: Lanes,
 
@@ -291,6 +305,11 @@ export type Dispatcher = {|
   useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
   useDeferredValue<T>(value: T): T,
   useTransition(): [boolean, (() => void) => void],
+  useMutableSource<Source, Snapshot>(
+    source: MutableSource<Source>,
+    getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+    subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+  ): Snapshot,
   useSyncExternalStore<T>(
     subscribe: (() => void) => () => void,
     getSnapshot: () => T,
diff --git a/packages/react-reconciler/src/ReactMutableSource.new.js b/packages/react-reconciler/src/ReactMutableSource.new.js
new file mode 100644
index 000000000000..61809d33f800
--- /dev/null
+++ b/packages/react-reconciler/src/ReactMutableSource.new.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {MutableSource, MutableSourceVersion} from 'shared/ReactTypes';
+import type {FiberRoot} from './ReactInternalTypes';
+
+import {isPrimaryRenderer} from './ReactFiberHostConfig';
+
+// Work in progress version numbers only apply to a single render,
+// and should be reset before starting a new render.
+// This tracks which mutable sources need to be reset after a render.
+const workInProgressSources: Array<MutableSource<any>> = [];
+
+let rendererSigil;
+if (__DEV__) {
+  // Used to detect multiple renderers using the same mutable source.
+  rendererSigil = {};
+}
+
+export function markSourceAsDirty(mutableSource: MutableSource<any>): void {
+  workInProgressSources.push(mutableSource);
+}
+
+export function resetWorkInProgressVersions(): void {
+  for (let i = 0; i < workInProgressSources.length; i++) {
+    const mutableSource = workInProgressSources[i];
+    if (isPrimaryRenderer) {
+      mutableSource._workInProgressVersionPrimary = null;
+    } else {
+      mutableSource._workInProgressVersionSecondary = null;
+    }
+  }
+  workInProgressSources.length = 0;
+}
+
+export function getWorkInProgressVersion(
+  mutableSource: MutableSource<any>,
+): null | MutableSourceVersion {
+  if (isPrimaryRenderer) {
+    return mutableSource._workInProgressVersionPrimary;
+  } else {
+    return mutableSource._workInProgressVersionSecondary;
+  }
+}
+
+export function setWorkInProgressVersion(
+  mutableSource: MutableSource<any>,
+  version: MutableSourceVersion,
+): void {
+  if (isPrimaryRenderer) {
+    mutableSource._workInProgressVersionPrimary = version;
+  } else {
+    mutableSource._workInProgressVersionSecondary = version;
+  }
+  workInProgressSources.push(mutableSource);
+}
+
+export function warnAboutMultipleRenderersDEV(
+  mutableSource: MutableSource<any>,
+): void {
+  if (__DEV__) {
+    if (isPrimaryRenderer) {
+      if (mutableSource._currentPrimaryRenderer == null) {
+        mutableSource._currentPrimaryRenderer = rendererSigil;
+      } else if (mutableSource._currentPrimaryRenderer !== rendererSigil) {
+        console.error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same mutable source. This is currently unsupported.',
+        );
+      }
+    } else {
+      if (mutableSource._currentSecondaryRenderer == null) {
+        mutableSource._currentSecondaryRenderer = rendererSigil;
+      } else if (mutableSource._currentSecondaryRenderer !== rendererSigil) {
+        console.error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same mutable source. This is currently unsupported.',
+        );
+      }
+    }
+  }
+}
+
+// Eager reads the version of a mutable source and stores it on the root.
+// This ensures that the version used for server rendering matches the one
+// that is eventually read during hydration.
+// If they don't match there's a potential tear and a full deopt render is required.
+export function registerMutableSourceForHydration(
+  root: FiberRoot,
+  mutableSource: MutableSource<any>,
+): void {
+  const getVersion = mutableSource._getVersion;
+  const version = getVersion(mutableSource._source);
+
+  // TODO Clear this data once all pending hydration work is finished.
+  // Retaining it forever may interfere with GC.
+  if (root.mutableSourceEagerHydrationData == null) {
+    root.mutableSourceEagerHydrationData = [mutableSource, version];
+  } else {
+    root.mutableSourceEagerHydrationData.push(mutableSource, version);
+  }
+}
diff --git a/packages/react-reconciler/src/ReactMutableSource.old.js b/packages/react-reconciler/src/ReactMutableSource.old.js
new file mode 100644
index 000000000000..61809d33f800
--- /dev/null
+++ b/packages/react-reconciler/src/ReactMutableSource.old.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {MutableSource, MutableSourceVersion} from 'shared/ReactTypes';
+import type {FiberRoot} from './ReactInternalTypes';
+
+import {isPrimaryRenderer} from './ReactFiberHostConfig';
+
+// Work in progress version numbers only apply to a single render,
+// and should be reset before starting a new render.
+// This tracks which mutable sources need to be reset after a render.
+const workInProgressSources: Array<MutableSource<any>> = [];
+
+let rendererSigil;
+if (__DEV__) {
+  // Used to detect multiple renderers using the same mutable source.
+  rendererSigil = {};
+}
+
+export function markSourceAsDirty(mutableSource: MutableSource<any>): void {
+  workInProgressSources.push(mutableSource);
+}
+
+export function resetWorkInProgressVersions(): void {
+  for (let i = 0; i < workInProgressSources.length; i++) {
+    const mutableSource = workInProgressSources[i];
+    if (isPrimaryRenderer) {
+      mutableSource._workInProgressVersionPrimary = null;
+    } else {
+      mutableSource._workInProgressVersionSecondary = null;
+    }
+  }
+  workInProgressSources.length = 0;
+}
+
+export function getWorkInProgressVersion(
+  mutableSource: MutableSource<any>,
+): null | MutableSourceVersion {
+  if (isPrimaryRenderer) {
+    return mutableSource._workInProgressVersionPrimary;
+  } else {
+    return mutableSource._workInProgressVersionSecondary;
+  }
+}
+
+export function setWorkInProgressVersion(
+  mutableSource: MutableSource<any>,
+  version: MutableSourceVersion,
+): void {
+  if (isPrimaryRenderer) {
+    mutableSource._workInProgressVersionPrimary = version;
+  } else {
+    mutableSource._workInProgressVersionSecondary = version;
+  }
+  workInProgressSources.push(mutableSource);
+}
+
+export function warnAboutMultipleRenderersDEV(
+  mutableSource: MutableSource<any>,
+): void {
+  if (__DEV__) {
+    if (isPrimaryRenderer) {
+      if (mutableSource._currentPrimaryRenderer == null) {
+        mutableSource._currentPrimaryRenderer = rendererSigil;
+      } else if (mutableSource._currentPrimaryRenderer !== rendererSigil) {
+        console.error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same mutable source. This is currently unsupported.',
+        );
+      }
+    } else {
+      if (mutableSource._currentSecondaryRenderer == null) {
+        mutableSource._currentSecondaryRenderer = rendererSigil;
+      } else if (mutableSource._currentSecondaryRenderer !== rendererSigil) {
+        console.error(
+          'Detected multiple renderers concurrently rendering the ' +
+            'same mutable source. This is currently unsupported.',
+        );
+      }
+    }
+  }
+}
+
+// Eager reads the version of a mutable source and stores it on the root.
+// This ensures that the version used for server rendering matches the one
+// that is eventually read during hydration.
+// If they don't match there's a potential tear and a full deopt render is required.
+export function registerMutableSourceForHydration(
+  root: FiberRoot,
+  mutableSource: MutableSource<any>,
+): void {
+  const getVersion = mutableSource._getVersion;
+  const version = getVersion(mutableSource._source);
+
+  // TODO Clear this data once all pending hydration work is finished.
+  // Retaining it forever may interfere with GC.
+  if (root.mutableSourceEagerHydrationData == null) {
+    root.mutableSourceEagerHydrationData = [mutableSource, version];
+  } else {
+    root.mutableSourceEagerHydrationData.push(mutableSource, version);
+  }
+}
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
new file mode 100644
index 000000000000..a6d99f980208
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -0,0 +1,1981 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-func-assign */
+
+'use strict';
+
+let React;
+let ReactFeatureFlags;
+let ReactNoop;
+let Scheduler;
+let act;
+let createMutableSource;
+let useMutableSource;
+
+function loadModules() {
+  jest.resetModules();
+  jest.useFakeTimers();
+
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.enableProfilerTimer = true;
+
+  React = require('react');
+  ReactNoop = require('react-noop-renderer');
+  Scheduler = require('scheduler');
+  act = require('jest-react').act;
+
+  // Stable entrypoints export with "unstable_" prefix.
+  createMutableSource =
+    React.createMutableSource || React.unstable_createMutableSource;
+  useMutableSource = React.useMutableSource || React.unstable_useMutableSource;
+}
+
+describe('useMutableSource', () => {
+  const defaultGetSnapshot = source => source.value;
+  const defaultSubscribe = (source, callback) => source.subscribe(callback);
+
+  function createComplexSource(initialValueA, initialValueB) {
+    const callbacksA = [];
+    const callbacksB = [];
+    let revision = 0;
+    let valueA = initialValueA;
+    let valueB = initialValueB;
+
+    const subscribeHelper = (callbacks, callback) => {
+      if (callbacks.indexOf(callback) < 0) {
+        callbacks.push(callback);
+      }
+      return () => {
+        const index = callbacks.indexOf(callback);
+        if (index >= 0) {
+          callbacks.splice(index, 1);
+        }
+      };
+    };
+
+    return {
+      subscribeA(callback) {
+        return subscribeHelper(callbacksA, callback);
+      },
+      subscribeB(callback) {
+        return subscribeHelper(callbacksB, callback);
+      },
+
+      get listenerCountA() {
+        return callbacksA.length;
+      },
+      get listenerCountB() {
+        return callbacksB.length;
+      },
+
+      set valueA(newValue) {
+        revision++;
+        valueA = newValue;
+        callbacksA.forEach(callback => callback());
+      },
+      get valueA() {
+        return valueA;
+      },
+
+      set valueB(newValue) {
+        revision++;
+        valueB = newValue;
+        callbacksB.forEach(callback => callback());
+      },
+      get valueB() {
+        return valueB;
+      },
+
+      get version() {
+        return revision;
+      },
+    };
+  }
+
+  function createSource(initialValue) {
+    const callbacks = [];
+    let revision = 0;
+    let value = initialValue;
+    return {
+      subscribe(callback) {
+        if (callbacks.indexOf(callback) < 0) {
+          callbacks.push(callback);
+        }
+        return () => {
+          const index = callbacks.indexOf(callback);
+          if (index >= 0) {
+            callbacks.splice(index, 1);
+          }
+        };
+      },
+      get listenerCount() {
+        return callbacks.length;
+      },
+      set value(newValue) {
+        revision++;
+        value = newValue;
+        callbacks.forEach(callback => callback());
+      },
+      get value() {
+        return value;
+      },
+      get version() {
+        return revision;
+      },
+    };
+  }
+
+  function Component({getSnapshot, label, mutableSource, subscribe}) {
+    const snapshot = useMutableSource(mutableSource, getSnapshot, subscribe);
+    Scheduler.unstable_yieldValue(`${label}:${snapshot}`);
+    return <div>{`${label}:${snapshot}`}</div>;
+  }
+
+  beforeEach(loadModules);
+
+  it('should subscribe to a source and schedule updates when it changes', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      ReactNoop.renderToRootWithID(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+          <Component
+            label="b"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        'root',
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYieldThrough([
+        'a:one',
+        'b:one',
+        'Sync effect',
+      ]);
+
+      // Subscriptions should be passive
+      expect(source.listenerCount).toBe(0);
+      ReactNoop.flushPassiveEffects();
+      expect(source.listenerCount).toBe(2);
+
+      // Changing values should schedule an update with React
+      source.value = 'two';
+      expect(Scheduler).toFlushAndYieldThrough(['a:two', 'b:two']);
+
+      // Unmounting a component should remove its subscription.
+      ReactNoop.renderToRootWithID(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        'root',
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:two', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+      expect(source.listenerCount).toBe(1);
+
+      // Unmounting a root should remove the remaining event listeners
+      ReactNoop.unmountRootWithID('root');
+      expect(Scheduler).toFlushAndYield([]);
+      ReactNoop.flushPassiveEffects();
+      expect(source.listenerCount).toBe(0);
+
+      // Changes to source should not trigger an updates or warnings.
+      source.value = 'three';
+      expect(Scheduler).toFlushAndYield([]);
+    });
+  });
+
+  it('should restart work if a new source is mutated during render', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.startTransition(() => {
+          ReactNoop.render(
+            <>
+              <Component
+                label="a"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+              <Component
+                label="b"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+            </>,
+            () => Scheduler.unstable_yieldValue('Sync effect'),
+          );
+        });
+      } else {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      }
+      // Do enough work to read from one component
+      expect(Scheduler).toFlushAndYieldThrough(['a:one']);
+
+      // Mutate source before continuing work
+      source.value = 'two';
+
+      // Render work should restart and the updated value should be used
+      expect(Scheduler).toFlushAndYield(['a:two', 'b:two', 'Sync effect']);
+    });
+  });
+
+  it('should schedule an update if a new source is mutated between render and commit (subscription)', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+          <Component
+            label="b"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+
+      // Finish rendering
+      expect(Scheduler).toFlushAndYieldThrough([
+        'a:one',
+        'b:one',
+        'Sync effect',
+      ]);
+
+      // Mutate source before subscriptions are attached
+      expect(source.listenerCount).toBe(0);
+      source.value = 'two';
+
+      // Mutation should be detected, and a new render should be scheduled
+      expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
+    });
+  });
+
+  it('should unsubscribe and resubscribe if a new source is used', () => {
+    const sourceA = createSource('a-one');
+    const mutableSourceA = createMutableSource(
+      sourceA,
+      param => param.versionA,
+    );
+
+    const sourceB = createSource('b-one');
+    const mutableSourceB = createMutableSource(
+      sourceB,
+      param => param.versionB,
+    );
+
+    act(() => {
+      ReactNoop.render(
+        <Component
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSourceA}
+          subscribe={defaultSubscribe}
+        />,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['only:a-one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+      expect(sourceA.listenerCount).toBe(1);
+
+      // Changing values should schedule an update with React
+      sourceA.value = 'a-two';
+      expect(Scheduler).toFlushAndYield(['only:a-two']);
+
+      // If we re-render with a new source, the old one should be unsubscribed.
+      ReactNoop.render(
+        <Component
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSourceB}
+          subscribe={defaultSubscribe}
+        />,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['only:b-one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+      expect(sourceA.listenerCount).toBe(0);
+      expect(sourceB.listenerCount).toBe(1);
+
+      // Changing to original source should not schedule updates with React
+      sourceA.value = 'a-three';
+      expect(Scheduler).toFlushAndYield([]);
+
+      // Changing new source value should schedule an update with React
+      sourceB.value = 'b-two';
+      expect(Scheduler).toFlushAndYield(['only:b-two']);
+    });
+  });
+
+  it('should unsubscribe and resubscribe if a new subscribe function is provided', () => {
+    const source = createSource('a-one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const unsubscribeA = jest.fn();
+    const subscribeA = jest.fn(s => {
+      const unsubscribe = defaultSubscribe(s);
+      return () => {
+        unsubscribe();
+        unsubscribeA();
+      };
+    });
+    const unsubscribeB = jest.fn();
+    const subscribeB = jest.fn(s => {
+      const unsubscribe = defaultSubscribe(s);
+      return () => {
+        unsubscribe();
+        unsubscribeB();
+      };
+    });
+
+    act(() => {
+      ReactNoop.renderToRootWithID(
+        <Component
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSource}
+          subscribe={subscribeA}
+        />,
+        'root',
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['only:a-one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+      expect(source.listenerCount).toBe(1);
+      expect(subscribeA).toHaveBeenCalledTimes(1);
+
+      // If we re-render with a new subscription function,
+      // the old unsubscribe function should be called.
+      ReactNoop.renderToRootWithID(
+        <Component
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSource}
+          subscribe={subscribeB}
+        />,
+        'root',
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['only:a-one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+      expect(source.listenerCount).toBe(1);
+      expect(unsubscribeA).toHaveBeenCalledTimes(1);
+      expect(subscribeB).toHaveBeenCalledTimes(1);
+
+      // Unmounting should call the newer unsubscribe.
+      ReactNoop.unmountRootWithID('root');
+      expect(Scheduler).toFlushAndYield([]);
+      ReactNoop.flushPassiveEffects();
+      expect(source.listenerCount).toBe(0);
+      expect(unsubscribeB).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('should re-use previously read snapshot value when reading is unsafe', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+          <Component
+            label="b"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
+
+      // Changing values should schedule an update with React.
+      // Start working on this update but don't finish it.
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.startTransition(() => {
+          source.value = 'two';
+        });
+      } else {
+        source.value = 'two';
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['a:two']);
+
+      // Re-renders that occur before the update is processed
+      // should reuse snapshot so long as the config has not changed
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      });
+      expect(Scheduler).toHaveYielded(['a:one', 'b:one', 'Sync effect']);
+
+      expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
+    });
+  });
+
+  it('should read from source on newly mounted subtree if no pending updates are scheduled for source', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:one', 'Sync effect']);
+
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+          <Component
+            label="b"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
+    });
+  });
+
+  it('should throw and restart render if source and snapshot are unavailable during an update', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+          <Component
+            label="b"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+
+      // Changing values should schedule an update with React.
+      // Start working on this update but don't finish it.
+      ReactNoop.idleUpdates(() => {
+        source.value = 'two';
+        expect(Scheduler).toFlushAndYieldThrough(['a:two']);
+      });
+
+      const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
+
+      // Force a higher priority render with a new config.
+      // This should signal that the snapshot is not safe and trigger a full re-render.
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={newGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={newGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'a:new:two',
+        'b:new:two',
+        'Sync effect',
+      ]);
+    });
+  });
+
+  it('should throw and restart render if source and snapshot are unavailable during a sync update', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+          <Component
+            label="b"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+
+      // Changing values should schedule an update with React.
+      // Start working on this update but don't finish it.
+      ReactNoop.idleUpdates(() => {
+        source.value = 'two';
+        expect(Scheduler).toFlushAndYieldThrough(['a:two']);
+      });
+
+      const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
+
+      // Force a higher priority render with a new config.
+      // This should signal that the snapshot is not safe and trigger a full re-render.
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={newGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={newGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      });
+      expect(Scheduler).toHaveYielded([
+        'a:new:two',
+        'b:new:two',
+        'Sync effect',
+      ]);
+    });
+  });
+
+  it('should only update components whose subscriptions fire', () => {
+    const source = createComplexSource('a:one', 'b:one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    // Subscribe to part of the store.
+    const getSnapshotA = s => s.valueA;
+    const subscribeA = (s, callback) => s.subscribeA(callback);
+    const getSnapshotB = s => s.valueB;
+    const subscribeB = (s, callback) => s.subscribeB(callback);
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={getSnapshotA}
+            mutableSource={mutableSource}
+            subscribe={subscribeA}
+          />
+          <Component
+            label="b"
+            getSnapshot={getSnapshotB}
+            mutableSource={mutableSource}
+            subscribe={subscribeB}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:a:one', 'b:b:one', 'Sync effect']);
+
+      // Changes to part of the store (e.g. A) should not render other parts.
+      source.valueA = 'a:two';
+      expect(Scheduler).toFlushAndYield(['a:a:two']);
+      source.valueB = 'b:two';
+      expect(Scheduler).toFlushAndYield(['b:b:two']);
+    });
+  });
+
+  it('should detect tearing in part of the store not yet subscribed to', () => {
+    const source = createComplexSource('a:one', 'b:one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    // Subscribe to part of the store.
+    const getSnapshotA = s => s.valueA;
+    const subscribeA = (s, callback) => s.subscribeA(callback);
+    const getSnapshotB = s => s.valueB;
+    const subscribeB = (s, callback) => s.subscribeB(callback);
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <Component
+            label="a"
+            getSnapshot={getSnapshotA}
+            mutableSource={mutableSource}
+            subscribe={subscribeA}
+          />
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:a:one', 'Sync effect']);
+
+      // Because the store has not changed yet, there are no pending updates,
+      // so it is considered safe to read from when we start this render.
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.startTransition(() => {
+          ReactNoop.render(
+            <>
+              <Component
+                label="a"
+                getSnapshot={getSnapshotA}
+                mutableSource={mutableSource}
+                subscribe={subscribeA}
+              />
+              <Component
+                label="b"
+                getSnapshot={getSnapshotB}
+                mutableSource={mutableSource}
+                subscribe={subscribeB}
+              />
+              <Component
+                label="c"
+                getSnapshot={getSnapshotB}
+                mutableSource={mutableSource}
+                subscribe={subscribeB}
+              />
+            </>,
+            () => Scheduler.unstable_yieldValue('Sync effect'),
+          );
+        });
+      } else {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={getSnapshotA}
+              mutableSource={mutableSource}
+              subscribe={subscribeA}
+            />
+            <Component
+              label="b"
+              getSnapshot={getSnapshotB}
+              mutableSource={mutableSource}
+              subscribe={subscribeB}
+            />
+            <Component
+              label="c"
+              getSnapshot={getSnapshotB}
+              mutableSource={mutableSource}
+              subscribe={subscribeB}
+            />
+          </>,
+          () => Scheduler.unstable_yieldValue('Sync effect'),
+        );
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['a:a:one', 'b:b:one']);
+
+      // Mutating the source should trigger a tear detection on the next read,
+      // which should throw and re-render the entire tree.
+      source.valueB = 'b:two';
+
+      expect(Scheduler).toFlushAndYield([
+        'a:a:one',
+        'b:b:two',
+        'c:b:two',
+        'Sync effect',
+      ]);
+    });
+  });
+
+  it('does not schedule an update for subscriptions that fire with an unchanged snapshot', () => {
+    const MockComponent = jest.fn(Component);
+
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      ReactNoop.render(
+        <MockComponent
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSource}
+          subscribe={defaultSubscribe}
+        />,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYieldThrough(['only:one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+      expect(source.listenerCount).toBe(1);
+
+      // Notify subscribe function but don't change the value
+      source.value = 'one';
+      expect(Scheduler).toFlushWithoutYielding();
+    });
+  });
+
+  it('should throw and restart if getSnapshot changes between scheduled update and re-render', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
+
+    let updateGetSnapshot;
+
+    function WrapperWithState() {
+      const tuple = React.useState(() => defaultGetSnapshot);
+      updateGetSnapshot = tuple[1];
+      return (
+        <Component
+          label="only"
+          getSnapshot={tuple[0]}
+          mutableSource={mutableSource}
+          subscribe={defaultSubscribe}
+        />
+      );
+    }
+
+    act(() => {
+      ReactNoop.render(<WrapperWithState />, () =>
+        Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['only:one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+
+      // Change the source (and schedule an update).
+      source.value = 'two';
+
+      // Schedule a higher priority update that changes getSnapshot.
+      ReactNoop.flushSync(() => {
+        updateGetSnapshot(() => newGetSnapshot);
+      });
+
+      expect(Scheduler).toHaveYielded(['only:new:two']);
+    });
+  });
+
+  it('should recover from a mutation during yield when other work is scheduled', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    act(() => {
+      // Start a render that uses the mutable source.
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.startTransition(() => {
+          ReactNoop.render(
+            <>
+              <Component
+                label="a"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+              <Component
+                label="b"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={defaultSubscribe}
+              />
+            </>,
+          );
+        });
+      } else {
+        ReactNoop.render(
+          <>
+            <Component
+              label="a"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+            <Component
+              label="b"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </>,
+        );
+      }
+      expect(Scheduler).toFlushAndYieldThrough(['a:one']);
+
+      // Mutate source
+      source.value = 'two';
+
+      // Now render something different.
+      ReactNoop.render(<div />);
+      expect(Scheduler).toFlushAndYield([]);
+    });
+  });
+
+  it('should not throw if the new getSnapshot returns the same snapshot value', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const onRenderA = jest.fn();
+    const onRenderB = jest.fn();
+
+    let updateGetSnapshot;
+
+    function WrapperWithState() {
+      const tuple = React.useState(() => defaultGetSnapshot);
+      updateGetSnapshot = tuple[1];
+      return (
+        <Component
+          label="b"
+          getSnapshot={tuple[0]}
+          mutableSource={mutableSource}
+          subscribe={defaultSubscribe}
+        />
+      );
+    }
+
+    act(() => {
+      ReactNoop.render(
+        <>
+          <React.Profiler id="a" onRender={onRenderA}>
+            <Component
+              label="a"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />
+          </React.Profiler>
+          <React.Profiler id="b" onRender={onRenderB}>
+            <WrapperWithState />
+          </React.Profiler>
+        </>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['a:one', 'b:one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+      expect(onRenderA).toHaveBeenCalledTimes(1);
+      expect(onRenderB).toHaveBeenCalledTimes(1);
+
+      // If B's getSnapshot function updates, but the snapshot it returns is the same,
+      // only B should re-render (to update its state).
+      updateGetSnapshot(() => s => defaultGetSnapshot(s));
+      expect(Scheduler).toFlushAndYield(['b:one']);
+      ReactNoop.flushPassiveEffects();
+      expect(onRenderA).toHaveBeenCalledTimes(1);
+      expect(onRenderB).toHaveBeenCalledTimes(2);
+    });
+  });
+
+  it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const newGetSnapshot = s => 'new:' + defaultGetSnapshot(s);
+
+    let updateGetSnapshot;
+
+    function WrapperWithState() {
+      const tuple = React.useState(() => defaultGetSnapshot);
+      updateGetSnapshot = tuple[1];
+      return (
+        <Component
+          label="only"
+          getSnapshot={tuple[0]}
+          mutableSource={mutableSource}
+          subscribe={defaultSubscribe}
+        />
+      );
+    }
+
+    act(() => {
+      ReactNoop.render(<WrapperWithState />, () =>
+        Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['only:one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+
+      // Change the source (and schedule an update)
+      // but also change the snapshot function too.
+      ReactNoop.batchedUpdates(() => {
+        source.value = 'two';
+        updateGetSnapshot(() => newGetSnapshot);
+      });
+
+      expect(Scheduler).toFlushAndYield(['only:new:two']);
+    });
+  });
+
+  it('should still schedule an update if an eager selector throws after a mutation', () => {
+    const source = createSource({
+      friends: [
+        {id: 1, name: 'Foo'},
+        {id: 2, name: 'Bar'},
+      ],
+    });
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    function FriendsList() {
+      const getSnapshot = React.useCallback(
+        ({value}) => Array.from(value.friends),
+        [],
+      );
+      const friends = useMutableSource(
+        mutableSource,
+        getSnapshot,
+        defaultSubscribe,
+      );
+      return (
+        <ul>
+          {friends.map(friend => (
+            <Friend key={friend.id} id={friend.id} />
+          ))}
+        </ul>
+      );
+    }
+
+    function Friend({id}) {
+      const getSnapshot = React.useCallback(
+        ({value}) => {
+          // This selector is intentionally written in a way that will throw
+          // if no matching friend exists in the store.
+          return value.friends.find(friend => friend.id === id).name;
+        },
+        [id],
+      );
+      const name = useMutableSource(
+        mutableSource,
+        getSnapshot,
+        defaultSubscribe,
+      );
+      Scheduler.unstable_yieldValue(`${id}:${name}`);
+      return <li>{name}</li>;
+    }
+
+    act(() => {
+      ReactNoop.render(<FriendsList />, () =>
+        Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['1:Foo', '2:Bar', 'Sync effect']);
+
+      // This mutation will cause the "Bar" component to throw,
+      // since its value will no longer be a part of the store.
+      // Mutable source should still schedule an update though,
+      // which should unmount "Bar" and mount "Baz".
+      source.value = {
+        friends: [
+          {id: 1, name: 'Foo'},
+          {id: 3, name: 'Baz'},
+        ],
+      };
+      expect(Scheduler).toFlushAndYield(['1:Foo', '3:Baz']);
+    });
+  });
+
+  it('should not warn about updates that fire between unmount and passive unsubscribe', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    function Wrapper() {
+      React.useLayoutEffect(() => () => {
+        Scheduler.unstable_yieldValue('layout unmount');
+      });
+      return (
+        <Component
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSource}
+          subscribe={defaultSubscribe}
+        />
+      );
+    }
+
+    act(() => {
+      ReactNoop.renderToRootWithID(<Wrapper />, 'root', () =>
+        Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYield(['only:one', 'Sync effect']);
+      ReactNoop.flushPassiveEffects();
+
+      // Unmounting a root should remove the remaining event listeners in a passive effect
+      ReactNoop.unmountRootWithID('root');
+      expect(Scheduler).toFlushAndYieldThrough(['layout unmount']);
+
+      // Changes to source should not cause a warning,
+      // even though the unsubscribe hasn't run yet (since it's a pending passive effect).
+      source.value = 'two';
+      expect(Scheduler).toFlushAndYield([]);
+    });
+  });
+
+  it('should support inline selectors and updates that are processed after selector change', async () => {
+    const source = createSource({
+      a: 'initial',
+      b: 'initial',
+    });
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const getSnapshotA = () => source.value.a;
+    const getSnapshotB = () => source.value.b;
+
+    function mutateB(newB) {
+      source.value = {
+        ...source.value,
+        b: newB,
+      };
+    }
+
+    function App({getSnapshot}) {
+      const state = useMutableSource(
+        mutableSource,
+        getSnapshot,
+        defaultSubscribe,
+      );
+      return state;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App getSnapshot={getSnapshotA} />);
+    });
+    expect(root).toMatchRenderedOutput('initial');
+
+    await act(async () => {
+      mutateB('Updated B');
+      root.render(<App getSnapshot={getSnapshotB} />);
+    });
+    expect(root).toMatchRenderedOutput('Updated B');
+
+    await act(async () => {
+      mutateB('Another update');
+    });
+    expect(root).toMatchRenderedOutput('Another update');
+  });
+
+  it('should clear the update queue when getSnapshot changes with pending lower priority updates', async () => {
+    const source = createSource({
+      a: 'initial',
+      b: 'initial',
+    });
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const getSnapshotA = () => source.value.a;
+    const getSnapshotB = () => source.value.b;
+
+    function mutateA(newA) {
+      source.value = {
+        ...source.value,
+        a: newA,
+      };
+    }
+
+    function mutateB(newB) {
+      source.value = {
+        ...source.value,
+        b: newB,
+      };
+    }
+
+    function App({toggle}) {
+      const state = useMutableSource(
+        mutableSource,
+        toggle ? getSnapshotB : getSnapshotA,
+        defaultSubscribe,
+      );
+      const result = (toggle ? 'B: ' : 'A: ') + state;
+      return result;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App toggle={false} />);
+    });
+    expect(root).toMatchRenderedOutput('A: initial');
+
+    await act(async () => {
+      ReactNoop.discreteUpdates(() => {
+        // Update both A and B to the same value
+        mutateA('Update');
+        mutateB('Update');
+        // Toggle to B in the same batch
+        root.render(<App toggle={true} />);
+      });
+      // Mutate A at lower priority. This should never be rendered, because
+      // by the time we get to the lower priority, we've already switched
+      // to B.
+      mutateA('OOPS! This mutation should be ignored');
+    });
+    expect(root).toMatchRenderedOutput('B: Update');
+  });
+
+  it('should clear the update queue when source changes with pending lower priority updates', async () => {
+    const sourceA = createSource('initial');
+    const sourceB = createSource('initial');
+    const mutableSourceA = createMutableSource(
+      sourceA,
+      param => param.versionA,
+    );
+    const mutableSourceB = createMutableSource(
+      sourceB,
+      param => param.versionB,
+    );
+
+    function App({toggle}) {
+      const state = useMutableSource(
+        toggle ? mutableSourceB : mutableSourceA,
+        defaultGetSnapshot,
+        defaultSubscribe,
+      );
+      const result = (toggle ? 'B: ' : 'A: ') + state;
+      return result;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App toggle={false} />);
+    });
+    expect(root).toMatchRenderedOutput('A: initial');
+
+    await act(async () => {
+      ReactNoop.discreteUpdates(() => {
+        // Update both A and B to the same value
+        sourceA.value = 'Update';
+        sourceB.value = 'Update';
+        // Toggle to B in the same batch
+        root.render(<App toggle={true} />);
+      });
+      // Mutate A at lower priority. This should never be rendered, because
+      // by the time we get to the lower priority, we've already switched
+      // to B.
+      sourceA.value = 'OOPS! This mutation should be ignored';
+    });
+    expect(root).toMatchRenderedOutput('B: Update');
+  });
+
+  it('should always treat reading as potentially unsafe when getSnapshot changes between renders', async () => {
+    const source = createSource({
+      a: 'foo',
+      b: 'bar',
+    });
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const getSnapshotA = () => source.value.a;
+    const getSnapshotB = () => source.value.b;
+
+    function mutateA(newA) {
+      source.value = {
+        ...source.value,
+        a: newA,
+      };
+    }
+
+    function App({getSnapshotFirst, getSnapshotSecond}) {
+      const first = useMutableSource(
+        mutableSource,
+        getSnapshotFirst,
+        defaultSubscribe,
+      );
+      const second = useMutableSource(
+        mutableSource,
+        getSnapshotSecond,
+        defaultSubscribe,
+      );
+
+      let result = `x: ${first}, y: ${second}`;
+
+      if (getSnapshotFirst === getSnapshotSecond) {
+        // When both getSnapshot functions are equal,
+        // the two values must be consistent.
+        if (first !== second) {
+          result = 'Oops, tearing!';
+        }
+      }
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue(result);
+      }, [result]);
+
+      return result;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <App
+          getSnapshotFirst={getSnapshotA}
+          getSnapshotSecond={getSnapshotB}
+        />,
+      );
+    });
+    // x and y start out reading from different parts of the store.
+    expect(Scheduler).toHaveYielded(['x: foo, y: bar']);
+
+    await act(async () => {
+      ReactNoop.discreteUpdates(() => {
+        // At high priority, toggle y so that it reads from A instead of B.
+        // Simultaneously, mutate A.
+        mutateA('baz');
+        root.render(
+          <App
+            getSnapshotFirst={getSnapshotA}
+            getSnapshotSecond={getSnapshotA}
+          />,
+        );
+
+        // If this update were processed before the next mutation,
+        // it would be expected to yield "baz" and "baz".
+      });
+
+      // At lower priority, mutate A again.
+      // This happens to match the initial value of B.
+      mutateA('bar');
+
+      // When this update is processed,
+      // it is expected to yield "bar" and "bar".
+    });
+
+    // Check that we didn't commit any inconsistent states.
+    // The actual sequence of work will be:
+    // 1. React renders the high-pri update, sees a new getSnapshot, detects the source has been further mutated, and throws
+    // 2. React re-renders with all pending updates, including the second mutation, and renders "bar" and "bar".
+    expect(Scheduler).toHaveYielded(['x: bar, y: bar']);
+  });
+
+  it('getSnapshot changes and then source is mutated in between paint and passive effect phase', async () => {
+    const source = createSource({
+      a: 'foo',
+      b: 'bar',
+    });
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    function mutateB(newB) {
+      source.value = {
+        ...source.value,
+        b: newB,
+      };
+    }
+
+    const getSnapshotA = () => source.value.a;
+    const getSnapshotB = () => source.value.b;
+
+    function App({getSnapshot}) {
+      const value = useMutableSource(
+        mutableSource,
+        getSnapshot,
+        defaultSubscribe,
+      );
+
+      Scheduler.unstable_yieldValue('Render: ' + value);
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('Commit: ' + value);
+      }, [value]);
+
+      return value;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App getSnapshot={getSnapshotA} />);
+    });
+    expect(Scheduler).toHaveYielded(['Render: foo', 'Commit: foo']);
+
+    await act(async () => {
+      // Switch getSnapshot to read from B instead
+      root.render(<App getSnapshot={getSnapshotB} />);
+      // Render and finish the tree, but yield right after paint, before
+      // the passive effects have fired.
+      expect(Scheduler).toFlushUntilNextPaint(['Render: bar']);
+      // Then mutate B.
+      mutateB('baz');
+    });
+    expect(Scheduler).toHaveYielded([
+      // Fires the effect from the previous render
+      'Commit: bar',
+      // During that effect, it should detect that the snapshot has changed
+      // and re-render.
+      'Render: baz',
+      'Commit: baz',
+    ]);
+    expect(root).toMatchRenderedOutput('baz');
+  });
+
+  it('getSnapshot changes and then source is mutated in between paint and passive effect phase, case 2', async () => {
+    const source = createSource({
+      a: 'a0',
+      b: 'b0',
+    });
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const getSnapshotA = () => source.value.a;
+    const getSnapshotB = () => source.value.b;
+
+    function mutateA(newA) {
+      source.value = {
+        ...source.value,
+        a: newA,
+      };
+    }
+
+    function App({getSnapshotFirst, getSnapshotSecond}) {
+      const first = useMutableSource(
+        mutableSource,
+        getSnapshotFirst,
+        defaultSubscribe,
+      );
+      const second = useMutableSource(
+        mutableSource,
+        getSnapshotSecond,
+        defaultSubscribe,
+      );
+
+      return `first: ${first}, second: ${second}`;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <App
+          getSnapshotFirst={getSnapshotA}
+          getSnapshotSecond={getSnapshotB}
+        />,
+      );
+    });
+    expect(root.getChildrenAsJSX()).toEqual('first: a0, second: b0');
+
+    await act(async () => {
+      // Switch the second getSnapshot to also read from A
+      root.render(
+        <App
+          getSnapshotFirst={getSnapshotA}
+          getSnapshotSecond={getSnapshotA}
+        />,
+      );
+      // Render and finish the tree, but yield right after paint, before
+      // the passive effects have fired.
+      expect(Scheduler).toFlushUntilNextPaint([]);
+
+      // Now mutate A. Both hooks should update.
+      // This is at high priority so that it doesn't get batched with default
+      // priority updates that might fire during the passive effect
+      await act(async () => {
+        ReactNoop.discreteUpdates(() => {
+          mutateA('a1');
+        });
+      });
+
+      expect(root).toMatchRenderedOutput('first: a1, second: a1');
+    });
+
+    expect(root.getChildrenAsJSX()).toEqual('first: a1, second: a1');
+  });
+
+  it(
+    'if source is mutated after initial read but before subscription is set ' +
+      'up, should still entangle all pending mutations even if snapshot of ' +
+      'new subscription happens to match',
+    async () => {
+      const source = createSource({
+        a: 'a0',
+        b: 'b0',
+      });
+      const mutableSource = createMutableSource(source, param => param.version);
+
+      const getSnapshotA = () => source.value.a;
+      const getSnapshotB = () => source.value.b;
+
+      function mutateA(newA) {
+        source.value = {
+          ...source.value,
+          a: newA,
+        };
+      }
+
+      function mutateB(newB) {
+        source.value = {
+          ...source.value,
+          b: newB,
+        };
+      }
+
+      function Read({getSnapshot}) {
+        const value = useMutableSource(
+          mutableSource,
+          getSnapshot,
+          defaultSubscribe,
+        );
+        Scheduler.unstable_yieldValue(value);
+        return value;
+      }
+
+      function Text({text}) {
+        Scheduler.unstable_yieldValue(text);
+        return text;
+      }
+
+      const root = ReactNoop.createRoot();
+      await act(async () => {
+        root.render(
+          <>
+            <Read getSnapshot={getSnapshotA} />
+          </>,
+        );
+      });
+      expect(Scheduler).toHaveYielded(['a0']);
+      expect(root).toMatchRenderedOutput('a0');
+
+      await act(async () => {
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.startTransition(() => {
+            root.render(
+              <>
+                <Read getSnapshot={getSnapshotA} />
+                <Read getSnapshot={getSnapshotB} />
+                <Text text="c" />
+              </>,
+            );
+          });
+        } else {
+          root.render(
+            <>
+              <Read getSnapshot={getSnapshotA} />
+              <Read getSnapshot={getSnapshotB} />
+              <Text text="c" />
+            </>,
+          );
+        }
+
+        expect(Scheduler).toFlushAndYieldThrough(['a0', 'b0']);
+        // Mutate in an event. This schedules a subscription update on a, which
+        // already mounted, but not b, which hasn't subscribed yet.
+        mutateA('a1');
+        mutateB('b1');
+
+        // Mutate again at lower priority. This will schedule another subscription
+        // update on a, but not b. When b mounts and subscriptions, the value it
+        // read during render will happen to match the latest value. But it should
+        // still entangle the updates to prevent the previous update (a1) from
+        // rendering by itself.
+        React.startTransition(() => {
+          mutateA('a0');
+          mutateB('b0');
+        });
+        // Finish the current render
+        expect(Scheduler).toFlushUntilNextPaint(['c']);
+        // a0 will re-render because of the mutation update. But it should show
+        // the latest value, not the intermediate one, to avoid tearing with b.
+        expect(Scheduler).toFlushUntilNextPaint(['a0']);
+
+        expect(root).toMatchRenderedOutput('a0b0c');
+        // We should be done.
+        expect(Scheduler).toFlushAndYield([]);
+        expect(root).toMatchRenderedOutput('a0b0c');
+      });
+    },
+  );
+
+  it('warns about functions being used as snapshot values', async () => {
+    const source = createSource(() => 'a');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    const getSnapshot = () => source.value;
+
+    function Read() {
+      const fn = useMutableSource(mutableSource, getSnapshot, defaultSubscribe);
+      const value = fn();
+      Scheduler.unstable_yieldValue(value);
+      return value;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <>
+          <Read />
+        </>,
+      );
+      expect(() => expect(Scheduler).toFlushAndYield(['a'])).toErrorDev(
+        'Mutable source should not return a function as the snapshot value.',
+      );
+    });
+    expect(root).toMatchRenderedOutput('a');
+  });
+
+  it('getSnapshot changes and then source is mutated during interleaved event', async () => {
+    const {useEffect} = React;
+
+    const source = createComplexSource('1', '2');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    // Subscribe to part of the store.
+    const getSnapshotA = s => s.valueA;
+    const subscribeA = (s, callback) => s.subscribeA(callback);
+    const configA = [getSnapshotA, subscribeA];
+
+    const getSnapshotB = s => s.valueB;
+    const subscribeB = (s, callback) => s.subscribeB(callback);
+    const configB = [getSnapshotB, subscribeB];
+
+    function App({parentConfig, childConfig}) {
+      const [getSnapshot, subscribe] = parentConfig;
+      const parentValue = useMutableSource(
+        mutableSource,
+        getSnapshot,
+        subscribe,
+      );
+
+      Scheduler.unstable_yieldValue('Parent: ' + parentValue);
+
+      return (
+        <Child
+          parentConfig={parentConfig}
+          childConfig={childConfig}
+          parentValue={parentValue}
+        />
+      );
+    }
+
+    function Child({parentConfig, childConfig, parentValue}) {
+      const [getSnapshot, subscribe] = childConfig;
+      const childValue = useMutableSource(
+        mutableSource,
+        getSnapshot,
+        subscribe,
+      );
+
+      Scheduler.unstable_yieldValue('Child: ' + childValue);
+
+      let result = `${parentValue}, ${childValue}`;
+
+      if (parentConfig === childConfig) {
+        // When both components read using the same config, the two values
+        // must be consistent.
+        if (parentValue !== childValue) {
+          result = 'Oops, tearing!';
+        }
+      }
+
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Commit: ' + result);
+      }, [result]);
+
+      return result;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App parentConfig={configA} childConfig={configB} />);
+    });
+    expect(Scheduler).toHaveYielded(['Parent: 1', 'Child: 2', 'Commit: 1, 2']);
+
+    await act(async () => {
+      // Switch the parent and the child to read using the same config
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        React.startTransition(() => {
+          root.render(<App parentConfig={configB} childConfig={configB} />);
+        });
+      } else {
+        root.render(<App parentConfig={configB} childConfig={configB} />);
+      }
+      // Start rendering the parent, but yield before rendering the child
+      expect(Scheduler).toFlushAndYieldThrough(['Parent: 2']);
+
+      // Mutate the config. This is at lower priority so that 1) to make sure
+      // it doesn't happen to get batched with the in-progress render, and 2)
+      // so it doesn't interrupt the in-progress render.
+      React.startTransition(() => {
+        source.valueB = '3';
+      });
+
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        // In default sync mode, all of the updates flush sync.
+        expect(Scheduler).toFlushAndYieldThrough([
+          // The partial render completes
+          'Child: 2',
+          'Commit: 2, 2',
+          'Parent: 3',
+          'Child: 3',
+        ]);
+
+        expect(Scheduler).toFlushAndYield([
+          // Now finish the rest of the update
+          'Commit: 3, 3',
+        ]);
+      } else {
+        expect(Scheduler).toFlushAndYieldThrough([
+          // The partial render completes
+          'Child: 2',
+          'Commit: 2, 2',
+        ]);
+
+        // Now there are two pending mutations at different priorities. But they
+        // both read the same version of the mutable source, so we must render
+        // them simultaneously.
+        //
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Parent: 3',
+          // Demonstrates that we can yield here
+        ]);
+        expect(Scheduler).toFlushAndYield([
+          // Now finish the rest of the update
+          'Child: 3',
+          'Commit: 3, 3',
+        ]);
+      }
+    });
+  });
+
+  it('should not tear with newly mounted component when updates were scheduled at a lower priority', async () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    let committedA = null;
+    let committedB = null;
+
+    const onRender = () => {
+      if (committedB !== null) {
+        expect(committedA).toBe(committedB);
+      }
+    };
+
+    function ComponentA() {
+      const snapshot = useMutableSource(
+        mutableSource,
+        defaultGetSnapshot,
+        defaultSubscribe,
+      );
+      Scheduler.unstable_yieldValue(`a:${snapshot}`);
+      React.useEffect(() => {
+        committedA = snapshot;
+      }, [snapshot]);
+      return <div>{`a:${snapshot}`}</div>;
+    }
+    function ComponentB() {
+      const snapshot = useMutableSource(
+        mutableSource,
+        defaultGetSnapshot,
+        defaultSubscribe,
+      );
+      Scheduler.unstable_yieldValue(`b:${snapshot}`);
+      React.useEffect(() => {
+        committedB = snapshot;
+      }, [snapshot]);
+      return <div>{`b:${snapshot}`}</div>;
+    }
+
+    // Mount ComponentA with data version 1
+    act(() => {
+      ReactNoop.render(
+        <React.Profiler id="root" onRender={onRender}>
+          <ComponentA />
+        </React.Profiler>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+    });
+    expect(Scheduler).toHaveYielded(['a:one', 'Sync effect']);
+    expect(source.listenerCount).toBe(1);
+
+    // Mount ComponentB with version 1 (but don't commit it)
+    act(() => {
+      ReactNoop.render(
+        <React.Profiler id="root" onRender={onRender}>
+          <ComponentA />
+          <ComponentB />
+        </React.Profiler>,
+        () => Scheduler.unstable_yieldValue('Sync effect'),
+      );
+      expect(Scheduler).toFlushAndYieldThrough([
+        'a:one',
+        'b:one',
+        'Sync effect',
+      ]);
+      expect(source.listenerCount).toBe(1);
+
+      // Mutate -> schedule update for ComponentA
+      React.startTransition(() => {
+        source.value = 'two';
+      });
+
+      // Commit ComponentB -> notice the change and schedule an update for ComponentB
+      expect(Scheduler).toFlushAndYield(['a:two', 'b:two']);
+      expect(source.listenerCount).toBe(2);
+    });
+  });
+
+  if (__DEV__) {
+    describe('dev warnings', () => {
+      it('should warn if the subscribe function does not return an unsubscribe function', () => {
+        const source = createSource('one');
+        const mutableSource = createMutableSource(
+          source,
+          param => param.version,
+        );
+
+        const brokenSubscribe = () => {};
+
+        expect(() => {
+          act(() => {
+            ReactNoop.render(
+              <Component
+                label="only"
+                getSnapshot={defaultGetSnapshot}
+                mutableSource={mutableSource}
+                subscribe={brokenSubscribe}
+              />,
+            );
+          });
+        }).toErrorDev(
+          'Mutable source subscribe function must return an unsubscribe function.',
+        );
+      });
+
+      it('should error if multiple renderers of the same type use a mutable source at the same time', () => {
+        const source = createSource('one');
+        const mutableSource = createMutableSource(
+          source,
+          param => param.version,
+        );
+
+        act(() => {
+          // Start a render that uses the mutable source.
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.startTransition(() => {
+              ReactNoop.render(
+                <>
+                  <Component
+                    label="a"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                  <Component
+                    label="b"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                </>,
+              );
+            });
+          } else {
+            ReactNoop.render(
+              <>
+                <Component
+                  label="a"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+                <Component
+                  label="b"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+              </>,
+            );
+          }
+          expect(Scheduler).toFlushAndYieldThrough(['a:one']);
+
+          const PrevScheduler = Scheduler;
+
+          // Get a new copy of ReactNoop.
+          loadModules();
+
+          spyOnDev(console, 'error');
+
+          // Use the mutablesource again but with a different renderer.
+          ReactNoop.render(
+            <Component
+              label="c"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />,
+          );
+          expect(Scheduler).toFlushAndYieldThrough(['c:one']);
+
+          expect(console.error.calls.argsFor(0)[0]).toContain(
+            'Detected multiple renderers concurrently rendering the ' +
+              'same mutable source. This is currently unsupported.',
+          );
+
+          // TODO (useMutableSource) Act will automatically flush remaining work from render 1,
+          // but at this point something in the hooks dispatcher has been broken by jest.resetModules()
+          // Figure out what this is and remove this catch.
+          expect(() =>
+            PrevScheduler.unstable_flushAllWithoutAsserting(),
+          ).toThrow('Invalid hook call');
+        });
+      });
+
+      it('should error if multiple renderers of the same type use a mutable source at the same time with mutation between', () => {
+        const source = createSource('one');
+        const mutableSource = createMutableSource(
+          source,
+          param => param.version,
+        );
+
+        act(() => {
+          // Start a render that uses the mutable source.
+          if (gate(flags => flags.enableSyncDefaultUpdates)) {
+            React.startTransition(() => {
+              ReactNoop.render(
+                <>
+                  <Component
+                    label="a"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                  <Component
+                    label="b"
+                    getSnapshot={defaultGetSnapshot}
+                    mutableSource={mutableSource}
+                    subscribe={defaultSubscribe}
+                  />
+                </>,
+              );
+            });
+          } else {
+            ReactNoop.render(
+              <>
+                <Component
+                  label="a"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+                <Component
+                  label="b"
+                  getSnapshot={defaultGetSnapshot}
+                  mutableSource={mutableSource}
+                  subscribe={defaultSubscribe}
+                />
+              </>,
+            );
+          }
+          expect(Scheduler).toFlushAndYieldThrough(['a:one']);
+
+          const PrevScheduler = Scheduler;
+
+          // Get a new copy of ReactNoop.
+          loadModules();
+
+          spyOnDev(console, 'error');
+
+          // Mutate before the new render reads from the source.
+          source.value = 'two';
+
+          // Use the mutablesource again but with a different renderer.
+          ReactNoop.render(
+            <Component
+              label="c"
+              getSnapshot={defaultGetSnapshot}
+              mutableSource={mutableSource}
+              subscribe={defaultSubscribe}
+            />,
+          );
+          expect(Scheduler).toFlushAndYieldThrough(['c:two']);
+
+          expect(console.error.calls.argsFor(0)[0]).toContain(
+            'Detected multiple renderers concurrently rendering the ' +
+              'same mutable source. This is currently unsupported.',
+          );
+
+          // TODO (useMutableSource) Act will automatically flush remaining work from render 1,
+          // but at this point something in the hooks dispatcher has been broken by jest.resetModules()
+          // Figure out what this is and remove this catch.
+          expect(() =>
+            PrevScheduler.unstable_flushAllWithoutAsserting(),
+          ).toThrow('Invalid hook call');
+        });
+      });
+    });
+  }
+});
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
new file mode 100644
index 000000000000..7f46d1cb0055
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -0,0 +1,451 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+let ReactDOMServer;
+let Scheduler;
+let act;
+let createMutableSource;
+let useMutableSource;
+
+describe('useMutableSourceHydration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    ReactDOMServer = require('react-dom/server');
+    Scheduler = require('scheduler');
+
+    act = require('jest-react').act;
+
+    // Stable entrypoints export with "unstable_" prefix.
+    createMutableSource =
+      React.createMutableSource || React.unstable_createMutableSource;
+    useMutableSource =
+      React.useMutableSource || React.unstable_useMutableSource;
+  });
+
+  function dispatchAndSetCurrentEvent(el, event) {
+    try {
+      window.event = event;
+      el.dispatchEvent(event);
+    } finally {
+      window.event = undefined;
+    }
+  }
+
+  const defaultGetSnapshot = source => source.value;
+  const defaultSubscribe = (source, callback) => source.subscribe(callback);
+
+  function createComplexSource(initialValueA, initialValueB) {
+    const callbacksA = [];
+    const callbacksB = [];
+    let revision = 0;
+    let valueA = initialValueA;
+    let valueB = initialValueB;
+
+    const subscribeHelper = (callbacks, callback) => {
+      if (callbacks.indexOf(callback) < 0) {
+        callbacks.push(callback);
+      }
+      return () => {
+        const index = callbacks.indexOf(callback);
+        if (index >= 0) {
+          callbacks.splice(index, 1);
+        }
+      };
+    };
+
+    return {
+      subscribeA(callback) {
+        return subscribeHelper(callbacksA, callback);
+      },
+      subscribeB(callback) {
+        return subscribeHelper(callbacksB, callback);
+      },
+
+      get listenerCountA() {
+        return callbacksA.length;
+      },
+      get listenerCountB() {
+        return callbacksB.length;
+      },
+
+      set valueA(newValue) {
+        revision++;
+        valueA = newValue;
+        callbacksA.forEach(callback => callback());
+      },
+      get valueA() {
+        return valueA;
+      },
+
+      set valueB(newValue) {
+        revision++;
+        valueB = newValue;
+        callbacksB.forEach(callback => callback());
+      },
+      get valueB() {
+        return valueB;
+      },
+
+      get version() {
+        return revision;
+      },
+    };
+  }
+
+  function createSource(initialValue) {
+    const callbacks = [];
+    let revision = 0;
+    let value = initialValue;
+    return {
+      subscribe(callback) {
+        if (callbacks.indexOf(callback) < 0) {
+          callbacks.push(callback);
+        }
+        return () => {
+          const index = callbacks.indexOf(callback);
+          if (index >= 0) {
+            callbacks.splice(index, 1);
+          }
+        };
+      },
+      get listenerCount() {
+        return callbacks.length;
+      },
+      set value(newValue) {
+        revision++;
+        value = newValue;
+        callbacks.forEach(callback => callback());
+      },
+      get value() {
+        return value;
+      },
+      get version() {
+        return revision;
+      },
+    };
+  }
+
+  function Component({getSnapshot, label, mutableSource, subscribe}) {
+    const snapshot = useMutableSource(mutableSource, getSnapshot, subscribe);
+    Scheduler.unstable_yieldValue(`${label}:${snapshot}`);
+    return <div>{`${label}:${snapshot}`}</div>;
+  }
+
+  it('should render and hydrate', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    function TestComponent() {
+      return (
+        <Component
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSource}
+          subscribe={defaultSubscribe}
+        />
+      );
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const htmlString = ReactDOMServer.renderToString(<TestComponent />);
+    container.innerHTML = htmlString;
+    expect(Scheduler).toHaveYielded(['only:one']);
+    expect(source.listenerCount).toBe(0);
+
+    const root = ReactDOM.createRoot(container, {
+      hydrate: true,
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
+    });
+    act(() => {
+      root.render(<TestComponent />);
+    });
+    expect(Scheduler).toHaveYielded(['only:one']);
+    expect(source.listenerCount).toBe(1);
+  });
+
+  it('should detect a tear before hydrating a component', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    function TestComponent() {
+      return (
+        <Component
+          label="only"
+          getSnapshot={defaultGetSnapshot}
+          mutableSource={mutableSource}
+          subscribe={defaultSubscribe}
+        />
+      );
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const htmlString = ReactDOMServer.renderToString(<TestComponent />);
+    container.innerHTML = htmlString;
+    expect(Scheduler).toHaveYielded(['only:one']);
+    expect(source.listenerCount).toBe(0);
+
+    const root = ReactDOM.createRoot(container, {
+      hydrate: true,
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
+    });
+    expect(() => {
+      act(() => {
+        root.render(<TestComponent />);
+
+        source.value = 'two';
+      });
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
+      {withoutStack: true},
+    );
+    expect(Scheduler).toHaveYielded(['only:two']);
+    expect(source.listenerCount).toBe(1);
+  });
+
+  it('should detect a tear between hydrating components', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    function TestComponent() {
+      return (
+        <>
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+          <Component
+            label="b"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>
+      );
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const htmlString = ReactDOMServer.renderToString(<TestComponent />);
+    container.innerHTML = htmlString;
+    expect(Scheduler).toHaveYielded(['a:one', 'b:one']);
+    expect(source.listenerCount).toBe(0);
+
+    const root = ReactDOM.createRoot(container, {
+      hydrate: true,
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
+    });
+    expect(() => {
+      act(() => {
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.startTransition(() => {
+            root.render(<TestComponent />);
+          });
+        } else {
+          root.render(<TestComponent />);
+        }
+        expect(Scheduler).toFlushAndYieldThrough(['a:one']);
+        source.value = 'two';
+      });
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
+      {withoutStack: true},
+    );
+    expect(Scheduler).toHaveYielded(['a:two', 'b:two']);
+    expect(source.listenerCount).toBe(2);
+  });
+
+  it('should detect a tear between hydrating components reading from different parts of a source', () => {
+    const source = createComplexSource('a:one', 'b:one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    // Subscribe to part of the store.
+    const getSnapshotA = s => s.valueA;
+    const subscribeA = (s, callback) => s.subscribeA(callback);
+    const getSnapshotB = s => s.valueB;
+    const subscribeB = (s, callback) => s.subscribeB(callback);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const htmlString = ReactDOMServer.renderToString(
+      <>
+        <Component
+          label="0"
+          getSnapshot={getSnapshotA}
+          mutableSource={mutableSource}
+          subscribe={subscribeA}
+        />
+        <Component
+          label="1"
+          getSnapshot={getSnapshotB}
+          mutableSource={mutableSource}
+          subscribe={subscribeB}
+        />
+      </>,
+    );
+    container.innerHTML = htmlString;
+    expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);
+
+    const root = ReactDOM.createRoot(container, {
+      hydrate: true,
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
+    });
+    expect(() => {
+      act(() => {
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.startTransition(() => {
+            root.render(
+              <>
+                <Component
+                  label="0"
+                  getSnapshot={getSnapshotA}
+                  mutableSource={mutableSource}
+                  subscribe={subscribeA}
+                />
+                <Component
+                  label="1"
+                  getSnapshot={getSnapshotB}
+                  mutableSource={mutableSource}
+                  subscribe={subscribeB}
+                />
+              </>,
+            );
+          });
+        } else {
+          root.render(
+            <>
+              <Component
+                label="0"
+                getSnapshot={getSnapshotA}
+                mutableSource={mutableSource}
+                subscribe={subscribeA}
+              />
+              <Component
+                label="1"
+                getSnapshot={getSnapshotB}
+                mutableSource={mutableSource}
+                subscribe={subscribeB}
+              />
+            </>,
+          );
+        }
+        expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
+        source.valueB = 'b:two';
+      });
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
+      {withoutStack: true},
+    );
+    expect(Scheduler).toHaveYielded(['0:a:one', '1:b:two']);
+  });
+
+  // @gate !enableSyncDefaultUpdates
+  it('should detect a tear during a higher priority interruption', () => {
+    const source = createSource('one');
+    const mutableSource = createMutableSource(source, param => param.version);
+
+    function Unrelated({flag}) {
+      Scheduler.unstable_yieldValue(flag);
+      return flag;
+    }
+
+    function TestComponent({flag}) {
+      return (
+        <>
+          <Unrelated flag={flag} />
+          <Component
+            label="a"
+            getSnapshot={defaultGetSnapshot}
+            mutableSource={mutableSource}
+            subscribe={defaultSubscribe}
+          />
+        </>
+      );
+    }
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+
+    const htmlString = ReactDOMServer.renderToString(
+      <TestComponent flag={1} />,
+    );
+    container.innerHTML = htmlString;
+    expect(Scheduler).toHaveYielded([1, 'a:one']);
+    expect(source.listenerCount).toBe(0);
+
+    const root = ReactDOM.createRoot(container, {
+      hydrate: true,
+      hydrationOptions: {
+        mutableSources: [mutableSource],
+      },
+    });
+
+    expect(() => {
+      act(() => {
+        if (gate(flags => flags.enableSyncDefaultUpdates)) {
+          React.startTransition(() => {
+            root.render(<TestComponent flag={1} />);
+          });
+        } else {
+          root.render(<TestComponent flag={1} />);
+        }
+        expect(Scheduler).toFlushAndYieldThrough([1]);
+
+        // Render an update which will be higher priority than the hydration.
+        // We can do this by scheduling the update inside a mouseover event.
+        const arbitraryElement = document.createElement('div');
+        const mouseOverEvent = document.createEvent('MouseEvents');
+        mouseOverEvent.initEvent('mouseover', true, true);
+        arbitraryElement.addEventListener('mouseover', () => {
+          root.render(<TestComponent flag={2} />);
+        });
+        dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);
+
+        expect(Scheduler).toFlushAndYieldThrough([2]);
+
+        source.value = 'two';
+      });
+    }).toErrorDev(
+      [
+        'Warning: An error occurred during hydration. ' +
+          'The server HTML was replaced with client content in <div>.',
+
+        'Warning: Text content did not match. Server: "1" Client: "2"',
+      ],
+      {withoutStack: 1},
+    );
+    expect(Scheduler).toHaveYielded([2, 'a:two']);
+    expect(source.listenerCount).toBe(1);
+  });
+});
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 9976b5be90c1..860dc63962da 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -9,7 +9,12 @@
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {
+  MutableSource,
+  MutableSourceGetSnapshotFn,
+  MutableSourceSubscribeFn,
+  ReactContext,
+} from 'shared/ReactTypes';
 
 import type {ResponseState, OpaqueIDType} from './ReactServerFormatConfig';
 
@@ -444,6 +449,18 @@ export function useCallback<T>(
   return useMemo(() => callback, deps);
 }
 
+// TODO Decide on how to implement this hook for server rendering.
+// If a mutation occurs during render, consider triggering a Suspense boundary
+// and falling back to client rendering.
+function useMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  resolveCurrentlyRenderingComponent();
+  return getSnapshot(source._source);
+}
+
 function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
@@ -506,6 +523,8 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
+  // Subscriptions are not setup in a server environment.
+  useMutableSource,
   useSyncExternalStore,
 };
 
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index a555f7cac8c6..5429d3a3b9e6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -827,6 +827,7 @@ const Dispatcher: DispatcherType = {
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
   useOpaqueIdentifier: (unsupportedHook: any),
+  useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
   useCacheRefresh(): <T>(?() => T, ?T) => void {
     return unsupportedRefresh;
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index e4c886dc85aa..b4b57c68b5f5 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -44,6 +44,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useDeferredValue: unsupported,
     useTransition: unsupported,
     useOpaqueIdentifier: unsupported,
+    useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
     useCacheRefresh: unsupported,
   };
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index d3ebdb5c02fb..7f8abc863157 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -23,6 +23,8 @@ export {
   createContext,
   createElement,
   createFactory,
+  createMutableSource,
+  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -48,6 +50,8 @@ export {
   useLayoutEffect,
   unstable_useInsertionEffect,
   useMemo,
+  useMutableSource,
+  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 7ff629fd0af0..a0a9bbaca216 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -22,6 +22,7 @@ export {
   createContext,
   createElement,
   createFactory,
+  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -44,6 +45,7 @@ export {
   unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
+  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/react/index.js b/packages/react/index.js
index 17916a322bfa..1b4552a90f5d 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -46,6 +46,7 @@ export {
   createContext,
   createElement,
   createFactory,
+  createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -69,6 +70,7 @@ export {
   unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
+  useMutableSource,
   useSyncExternalStore,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index e2a55bbdab87..819d5fe90afd 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -22,6 +22,8 @@ export {
   cloneElement,
   createContext,
   createElement,
+  createMutableSource,
+  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -47,6 +49,8 @@ export {
   unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
+  useMutableSource,
+  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 70ede828c8a4..008875e4577e 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -22,6 +22,7 @@ export {
   createContext,
   createElement,
   createFactory,
+  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -37,6 +38,7 @@ export {
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
+  useMutableSource as unstable_useMutableSource,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index a171d16b8af8..541e7a35d3d3 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -44,6 +44,7 @@ import {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
+  useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
@@ -58,6 +59,7 @@ import {
   createFactoryWithValidation,
   cloneElementWithValidation,
 } from './ReactElementValidator';
+import {createMutableSource} from './ReactMutableSource';
 import ReactSharedInternals from './ReactSharedInternals';
 import {startTransition} from './ReactStartTransition';
 import {act} from './ReactAct';
@@ -77,6 +79,7 @@ const Children = {
 
 export {
   Children,
+  createMutableSource,
   createRef,
   Component,
   PureComponent,
@@ -92,6 +95,7 @@ export {
   useInsertionEffect as unstable_useInsertionEffect,
   useLayoutEffect,
   useMemo,
+  useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index e981907baed5..0108c545fae5 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -8,7 +8,12 @@
  */
 
 import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
-import type {ReactContext} from 'shared/ReactTypes';
+import type {
+  MutableSource,
+  MutableSourceGetSnapshotFn,
+  MutableSourceSubscribeFn,
+  ReactContext,
+} from 'shared/ReactTypes';
 import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
@@ -163,6 +168,15 @@ export function useOpaqueIdentifier(): OpaqueIDType | void {
   return dispatcher.useOpaqueIdentifier();
 }
 
+export function useMutableSource<Source, Snapshot>(
+  source: MutableSource<Source>,
+  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
+  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
+): Snapshot {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useMutableSource(source, getSnapshot, subscribe);
+}
+
 export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
diff --git a/packages/react/src/ReactMutableSource.js b/packages/react/src/ReactMutableSource.js
new file mode 100644
index 000000000000..f8e5d0b28303
--- /dev/null
+++ b/packages/react/src/ReactMutableSource.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {MutableSource, MutableSourceGetVersionFn} from 'shared/ReactTypes';
+
+export function createMutableSource<Source: $NonMaybeType<mixed>>(
+  source: Source,
+  getVersion: MutableSourceGetVersionFn,
+): MutableSource<Source> {
+  const mutableSource: MutableSource<Source> = {
+    _getVersion: getVersion,
+    _source: source,
+    _workInProgressVersionPrimary: null,
+    _workInProgressVersionSecondary: null,
+  };
+
+  if (__DEV__) {
+    mutableSource._currentPrimaryRenderer = null;
+    mutableSource._currentSecondaryRenderer = null;
+
+    // Used to detect side effects that update a mutable source during render.
+    // See https://github.com/facebook/react/issues/19948
+    mutableSource._currentlyRenderingFiber = null;
+    mutableSource._initialVersionAsOfFirstRender = null;
+  }
+
+  return mutableSource;
+}
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index c18138226ad3..9381778b4435 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -17,6 +17,7 @@ export {
   SuspenseList,
   cloneElement,
   createElement,
+  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,
@@ -32,6 +33,7 @@ export {
   useDeferredValue,
   useDeferredValue as unstable_useDeferredValue,
   useMemo,
+  useMutableSource as unstable_useMutableSource,
   useTransition,
   version,
 } from './src/React';
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 277f633387d1..43f42bddb91d 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -101,6 +101,56 @@ export type ReactScopeInstance = {|
   getChildContextValues: <T>(context: ReactContext<T>) => Array<T>,
 |};
 
+// Mutable source version can be anything (e.g. number, string, immutable data structure)
+// so long as it changes every time any part of the source changes.
+export type MutableSourceVersion = $NonMaybeType<mixed>;
+
+export type MutableSourceGetSnapshotFn<
+  Source: $NonMaybeType<mixed>,
+  Snapshot,
+> = (source: Source) => Snapshot;
+
+export type MutableSourceSubscribeFn<Source: $NonMaybeType<mixed>, Snapshot> = (
+  source: Source,
+  callback: (snapshot: Snapshot) => void,
+) => () => void;
+
+export type MutableSourceGetVersionFn = (
+  source: $NonMaybeType<mixed>,
+) => MutableSourceVersion;
+
+export type MutableSource<Source: $NonMaybeType<mixed>> = {|
+  _source: Source,
+
+  _getVersion: MutableSourceGetVersionFn,
+
+  // Tracks the version of this source at the time it was most recently read.
+  // Used to determine if a source is safe to read from before it has been subscribed to.
+  // Version number is only used during mount,
+  // since the mechanism for determining safety after subscription is expiration time.
+  //
+  // 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.
+  // We use the same approach for Context.
+  _workInProgressVersionPrimary: null | MutableSourceVersion,
+  _workInProgressVersionSecondary: null | MutableSourceVersion,
+
+  // DEV only
+  // Used to detect multiple renderers using the same mutable source.
+  _currentPrimaryRenderer?: Object | null,
+  _currentSecondaryRenderer?: Object | null,
+
+  // DEV only
+  // Used to detect side effects that update a mutable source during render.
+  // See https://github.com/facebook/react/issues/19948
+  _currentlyRenderingFiber?: Fiber | null,
+  _initialVersionAsOfFirstRender?: MutableSourceVersion | null,
+|};
+
 // 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 {

From 5a06072780e1323204cd7823665b3a95a0450747 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 22 Sep 2021 11:45:55 -0400
Subject: [PATCH 0895/1603] [Old server renderer] Retry error on client
 (#22399)

We're still in the process of migrating to the Fizz server renderer. In
the meantime, this makes the error semantics on the old server renderer
match the behavior of the new one: if an error is thrown, it triggers a
Suspense fallback, just as if it suspended (this part was already
implemented). Then the errored tree is retried on the client, where it
may recover and finish successfully.
---
 ...DOMServerPartialHydration-test.internal.js | 28 +++++++++++++++
 .../ReactDOMServerSuspense-test.internal.js   | 14 ++++++++
 .../src/server/ReactPartialRenderer.js        | 35 ++++++++++++-------
 3 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 9f954f4581d3..b8f7ac48a521 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2671,4 +2671,32 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
   });
+
+  it('should retry on client if something throws', async () => {
+    let isServer = true;
+    function ThrowsOnServerOnly() {
+      if (isServer) {
+        throw new Error('Oops!');
+      }
+      return 'Yay!';
+    }
+
+    function App() {
+      return (
+        <React.Suspense fallback="Loading...">
+          <ThrowsOnServerOnly />
+        </React.Suspense>
+      );
+    }
+
+    const element = document.createElement('div');
+    element.innerHTML = ReactDOMServer.renderToString(<App />);
+    expect(element.textContent).toBe('Loading...');
+
+    isServer = false;
+    await act(async () => {
+      ReactDOM.hydrateRoot(element, <App />);
+    });
+    expect(element.textContent).toBe('Yay!');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 60ab2edbdcf2..54ebc459a991 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -115,6 +115,20 @@ describe('ReactDOMServerSuspense', () => {
     expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
   });
 
+  it('should render the fallback when an error is thrown', async () => {
+    function Throws() {
+      throw new Error('Oops!');
+    }
+    const c = await serverRender(
+      <div>
+        <React.Suspense fallback={<Text text="Fallback" />}>
+          <Throws />
+        </React.Suspense>
+      </div>,
+    );
+    expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
+  });
+
   it('should work with nested suspense components', async () => {
     const c = await serverRender(
       <div>
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index caf1ee2f6fc2..387db4ca0bc3 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -969,22 +969,33 @@ class ReactDOMServerRenderer {
         try {
           outBuffer += this.render(child, frame.context, frame.domNamespace);
         } catch (err) {
-          if (err != null && typeof err.then === 'function') {
-            if (enableSuspenseServerRenderer) {
-              invariant(
-                this.suspenseDepth > 0,
-                // TODO: include component name. This is a bit tricky with current factoring.
-                'A React component suspended while rendering, but no fallback UI was specified.\n' +
-                  '\n' +
-                  'Add a <Suspense fallback=...> component higher in the tree to ' +
-                  'provide a loading indicator or placeholder to display.',
-              );
+          if (enableSuspenseServerRenderer) {
+            if (this.suspenseDepth > 0) {
+              // Regardless of whether this is an error or a suspense thenable,
+              // trigger the nearest Suspense boundary. We'll try to render this
+              // tree again on the client.
               suspended = true;
             } else {
-              invariant(false, 'ReactDOMServer does not yet support Suspense.');
+              // Missing a Suspense boundary. This is a fatal error.
+              if (err != null && typeof err.then === 'function') {
+                invariant(
+                  false,
+                  // TODO: include component name. This is a bit tricky with current factoring.
+                  'A React component suspended while rendering, but no fallback UI was specified.\n' +
+                    '\n' +
+                    'Add a <Suspense fallback=...> component higher in the tree to ' +
+                    'provide a loading indicator or placeholder to display.',
+                );
+              } else {
+                throw err;
+              }
             }
           } else {
-            throw err;
+            if (err != null && typeof err.then === 'function') {
+              invariant(false, 'ReactDOMServer does not yet support Suspense.');
+            } else {
+              throw err;
+            }
           }
         } finally {
           if (__DEV__) {

From 51e017c523fe37489f8b5c9d75bb3a7a2dc7f2c8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 22 Sep 2021 12:31:17 -0400
Subject: [PATCH 0896/1603] Revert "[Old server renderer] Retry error on client
 (#22399)"

Going to revert this until we figure out error reporting. It looks like
our downstream infra already supports some type of error recovery so
we might not need it here.
---
 ...DOMServerPartialHydration-test.internal.js | 28 ---------------
 .../ReactDOMServerSuspense-test.internal.js   | 14 --------
 .../src/server/ReactPartialRenderer.js        | 35 +++++++------------
 3 files changed, 12 insertions(+), 65 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index b8f7ac48a521..9f954f4581d3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2671,32 +2671,4 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
   });
-
-  it('should retry on client if something throws', async () => {
-    let isServer = true;
-    function ThrowsOnServerOnly() {
-      if (isServer) {
-        throw new Error('Oops!');
-      }
-      return 'Yay!';
-    }
-
-    function App() {
-      return (
-        <React.Suspense fallback="Loading...">
-          <ThrowsOnServerOnly />
-        </React.Suspense>
-      );
-    }
-
-    const element = document.createElement('div');
-    element.innerHTML = ReactDOMServer.renderToString(<App />);
-    expect(element.textContent).toBe('Loading...');
-
-    isServer = false;
-    await act(async () => {
-      ReactDOM.hydrateRoot(element, <App />);
-    });
-    expect(element.textContent).toBe('Yay!');
-  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 54ebc459a991..60ab2edbdcf2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -115,20 +115,6 @@ describe('ReactDOMServerSuspense', () => {
     expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
   });
 
-  it('should render the fallback when an error is thrown', async () => {
-    function Throws() {
-      throw new Error('Oops!');
-    }
-    const c = await serverRender(
-      <div>
-        <React.Suspense fallback={<Text text="Fallback" />}>
-          <Throws />
-        </React.Suspense>
-      </div>,
-    );
-    expect(getVisibleChildren(c)).toEqual(<div>Fallback</div>);
-  });
-
   it('should work with nested suspense components', async () => {
     const c = await serverRender(
       <div>
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 387db4ca0bc3..caf1ee2f6fc2 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -969,33 +969,22 @@ class ReactDOMServerRenderer {
         try {
           outBuffer += this.render(child, frame.context, frame.domNamespace);
         } catch (err) {
-          if (enableSuspenseServerRenderer) {
-            if (this.suspenseDepth > 0) {
-              // Regardless of whether this is an error or a suspense thenable,
-              // trigger the nearest Suspense boundary. We'll try to render this
-              // tree again on the client.
+          if (err != null && typeof err.then === 'function') {
+            if (enableSuspenseServerRenderer) {
+              invariant(
+                this.suspenseDepth > 0,
+                // TODO: include component name. This is a bit tricky with current factoring.
+                'A React component suspended while rendering, but no fallback UI was specified.\n' +
+                  '\n' +
+                  'Add a <Suspense fallback=...> component higher in the tree to ' +
+                  'provide a loading indicator or placeholder to display.',
+              );
               suspended = true;
             } else {
-              // Missing a Suspense boundary. This is a fatal error.
-              if (err != null && typeof err.then === 'function') {
-                invariant(
-                  false,
-                  // TODO: include component name. This is a bit tricky with current factoring.
-                  'A React component suspended while rendering, but no fallback UI was specified.\n' +
-                    '\n' +
-                    'Add a <Suspense fallback=...> component higher in the tree to ' +
-                    'provide a loading indicator or placeholder to display.',
-                );
-              } else {
-                throw err;
-              }
-            }
-          } else {
-            if (err != null && typeof err.then === 'function') {
               invariant(false, 'ReactDOMServer does not yet support Suspense.');
-            } else {
-              throw err;
             }
+          } else {
+            throw err;
           }
         } finally {
           if (__DEV__) {

From 95502f7b2519d00ac71ca6a2869b3fcb76b3ab3f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 22 Sep 2021 14:35:56 -0400
Subject: [PATCH 0897/1603] Update CodeSandbox to pull build artifacts from CI
 (#22400)

Instead of building them from source.

The `download-experimental-build` script polls CI until the build
has finished.
---
 .codesandbox/ci.json | 8 ++++----
 package.json         | 5 ++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index e0a23e13761b..9c54169b0c04 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,11 +1,11 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
-  "buildCommand": "build --type=NODE react/index,react-dom/index,react-dom/src/server,react-dom/test-utils,scheduler/index,react/jsx-runtime,react/jsx-dev-runtime",
+  "buildCommand": "download-build-in-codesandbox-ci",
   "node": "12",
   "publishDirectory": {
-    "react": "build/node_modules/react",
-    "react-dom": "build/node_modules/react-dom",
-    "scheduler": "build/node_modules/scheduler"
+    "react": "build/oss-experimental/react",
+    "react-dom": "build/oss-experimental/react-dom",
+    "scheduler": "build/oss-experimental/scheduler"
   },
   "sandboxes": ["new"],
   "silent": true
diff --git a/package.json b/package.json
index eb9300625c98..cfd9e4281fa3 100644
--- a/package.json
+++ b/package.json
@@ -141,6 +141,9 @@
     "version-check": "node ./scripts/tasks/version-check.js",
     "merge-fork": "node ./scripts/merge-fork/merge-fork.js",
     "replace-fork": "node ./scripts/merge-fork/replace-fork.js",
-    "publish-prereleases": "node ./scripts/release/publish-using-ci-workflow.js"
+    "publish-prereleases": "node ./scripts/release/publish-using-ci-workflow.js",
+    "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": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head"
   }
 }

From d174d063d13d428ad4002474cb560464a7f70f45 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 22 Sep 2021 20:17:57 -0400
Subject: [PATCH 0898/1603] DevTools: Hook names optimizations (#22403)

This commit dramatically improves the performance of the hook names feature by replacing the source-map-js integration with custom mapping code built on top of sourcemap-codec. Based on my own benchmarking, this makes parsing 3-4 times faster. (The bulk of these changes are in SourceMapConsumer.js.)

While implementing this code, I also uncovered a problem with the way we were caching source-map metadata that was causing us to potential parse the same source-map multiple times. (I addressed this in a separate commit for easier reviewing. The bulk of these changes are in parseSourceAndMetadata.js.)

Altogether these changes dramatically improve the performance of the hooks parsing code.

One additional thing we could look into if the source-map download still remains a large bottleneck would be to stream it and decode the mappings array while it streams in rather than in one synchronous chunk after the full source-map has been downloaded.
---
 .../src/hooks/SourceMapConsumer.js            | 241 ++++++++++++++++++
 .../src/hooks/astUtils.js                     |   2 -
 .../parseHookNames/parseSourceAndMetadata.js  | 171 +++++--------
 3 files changed, 303 insertions(+), 111 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/hooks/SourceMapConsumer.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 000000000000..f0503ef91a23
--- /dev/null
+++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import {withSyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
+import {decode} from 'sourcemap-codec';
+
+import type {
+  IndexSourceMap,
+  BasicSourceMap,
+  MixedSourceMap,
+} from './SourceMapTypes';
+
+type SearchPosition = {|
+  columnNumber: number,
+  lineNumber: number,
+|};
+
+type ResultPosition = {|
+  column: number,
+  line: number,
+  sourceContent: string,
+  sourceURL: string,
+|};
+
+export type SourceMapConsumerType = {|
+  originalPositionFor: SearchPosition => ResultPosition,
+|};
+
+type Mappings = Array<Array<Array<number>>>;
+
+export default function SourceMapConsumer(
+  sourceMapJSON: MixedSourceMap,
+): 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 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];
+
+    if (sourceContent === null || sourceURL === null) {
+      // TODO maybe fall back to the runtime source instead of throwing?
+      throw Error(
+        `Could not find original source for line:${lineNumber} and column:${columnNumber}`,
+      );
+    }
+
+    return {
+      column,
+      line,
+      sourceContent: ((sourceContent: any): string),
+      sourceURL: ((sourceURL: any): string),
+    };
+  }
+
+  return (({
+    originalPositionFor,
+  }: any): SourceMapConsumerType);
+}
+
+function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
+  let lastOffset = {
+    line: -1,
+    column: 0,
+  };
+
+  const sections = sourceMapJSON.sections.map(section => {
+    const offset = section.offset;
+    const offsetLine = offset.line;
+    const offsetColumn = offset.column;
+
+    if (
+      offsetLine < lastOffset.line ||
+      (offsetLine === lastOffset.line && offsetColumn < lastOffset.column)
+    ) {
+      throw new Error('Section offsets must be ordered and non-overlapping.');
+    }
+
+    lastOffset = offset;
+
+    return {
+      // The offset fields are 0-based, but we use 1-based indices when encoding/decoding from VLQ.
+      generatedLine: offsetLine + 1,
+      generatedColumn: offsetColumn + 1,
+      sourceMapConsumer: new SourceMapConsumer(section.map),
+    };
+  });
+
+  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;
+
+    let section = null;
+
+    let startIndex = 0;
+    let stopIndex = sections.length - 1;
+    let index = -1;
+    while (startIndex <= stopIndex) {
+      index = Math.floor((stopIndex + startIndex) / 2);
+      section = sections[index];
+
+      const currentLine = section.generatedLine;
+      if (currentLine === lineNumber) {
+        const currentColumn = section.generatedColumn;
+        if (currentColumn === lineNumber) {
+          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;
+            }
+          }
+        }
+      } else {
+        if (currentLine > lineNumber) {
+          if (stopIndex - index > 0) {
+            stopIndex = index;
+          } else {
+            index = stopIndex;
+            break;
+          }
+        } else {
+          if (index - startIndex > 0) {
+            startIndex = index;
+          } else {
+            index = startIndex;
+            break;
+          }
+        }
+      }
+    }
+
+    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}`,
+      );
+    }
+
+    return section.sourceMapConsumer.originalPositionFor({
+      columnNumber,
+      lineNumber,
+    });
+  }
+
+  return (({
+    originalPositionFor,
+  }: any): SourceMapConsumerType);
+}
diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
index 9a2405920568..2fddf027e0ff 100644
--- a/packages/react-devtools-shared/src/hooks/astUtils.js
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -18,8 +18,6 @@ export type Position = {|
   column: number,
 |};
 
-export type SourceConsumer = any;
-
 export type SourceFileASTWithHookDetails = {
   sourceFileAST: File,
   line: number,
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
index 6f87b351a014..7eada16a7d9e 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
@@ -12,7 +12,6 @@
 
 import {parse} from '@babel/parser';
 import LRU from 'lru-cache';
-import {SourceMapConsumer} from 'source-map-js';
 import {getHookName} from '../astUtils';
 import {areSourceMapsAppliedToErrors} from '../ErrorTester';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
@@ -22,14 +21,15 @@ 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/types';
-import type {SourceConsumer} from '../astUtils';
 
 type AST = mixed;
 
@@ -53,35 +53,21 @@ type HookParsedMetadata = {|
   // Column number in original source code.
   originalSourceColumnNumber: number | null,
 
-  // APIs from source-map for parsing source maps (if detected).
-  sourceConsumer: SourceConsumer | null,
+  // Alternate APIs from source-map for parsing source maps (if detected).
+  sourceMapConsumer: SourceMapConsumerType | null,
 |};
 
 type LocationKeyToHookParsedMetadata = Map<string, HookParsedMetadata>;
 
 type CachedRuntimeCodeMetadata = {|
-  sourceConsumer: SourceConsumer | null,
   metadataConsumer: SourceMapMetadataConsumer | null,
+  sourceMapConsumer: SourceMapConsumerType | null,
 |};
 
 const runtimeURLToMetadataCache: LRUCache<
   string,
   CachedRuntimeCodeMetadata,
-> = new LRU({
-  max: 50,
-  dispose: (runtimeSourceURL: string, metadata: CachedRuntimeCodeMetadata) => {
-    if (__DEBUG__) {
-      console.log(
-        `runtimeURLToMetadataCache.dispose() Evicting cached metadata for "${runtimeSourceURL}"`,
-      );
-    }
-
-    const sourceConsumer = metadata.sourceConsumer;
-    if (sourceConsumer !== null) {
-      sourceConsumer.destroy();
-    }
-  },
-});
+> = new LRU({max: 50});
 
 type CachedSourceCodeMetadata = {|
   originalSourceAST: AST,
@@ -220,27 +206,10 @@ function initializeHookParsedMetadata(
         originalSourceURL: null,
         originalSourceLineNumber: null,
         originalSourceColumnNumber: null,
-        sourceConsumer: null,
+        sourceMapConsumer: null,
       };
 
       locationKeyToHookParsedMetadata.set(locationKey, hookParsedMetadata);
-
-      const runtimeSourceURL = hookSourceAndMetadata.runtimeSourceURL;
-
-      // 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.sourceConsumer = runtimeMetadata.sourceConsumer;
-        hookParsedMetadata.metadataConsumer = runtimeMetadata.metadataConsumer;
-      }
     },
   );
 
@@ -280,14 +249,14 @@ function parseSourceAST(
         throw Error('Hook source code location not found.');
       }
 
-      const {metadataConsumer, sourceConsumer} = hookParsedMetadata;
+      const {metadataConsumer, sourceMapConsumer} = hookParsedMetadata;
       const runtimeSourceCode = ((hookSourceAndMetadata.runtimeSourceCode: any): string);
       let hasHookMap = false;
       let originalSourceURL;
       let originalSourceCode;
       let originalSourceColumnNumber;
       let originalSourceLineNumber;
-      if (areSourceMapsAppliedToErrors() || sourceConsumer == null) {
+      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.
@@ -299,55 +268,32 @@ function parseSourceAST(
         // Namespace them?
         originalSourceURL = hookSourceAndMetadata.runtimeSourceURL;
       } else {
-        // Parse and extract the AST from the source map.
-        // Now that the source map has been loaded,
-        // extract the original source for later.
-        // TODO (named hooks) Refactor this read, github.com/facebook/react/pull/22181
-        const {column, line, source} = withSyncPerfMeasurements(
-          'sourceConsumer.originalPositionFor()',
-          () =>
-            sourceConsumer.originalPositionFor({
-              line: lineNumber,
-
-              // Column numbers are represented differently between tools/engines.
-              // Error.prototype.stack columns are 1-based (like most IDEs) but ASTs are 0-based.
-              // For more info see https://github.com/facebook/react/issues/21792#issuecomment-873171991
-              column: columnNumber - 1,
-            }),
-        );
-
-        if (source == null) {
-          // TODO (named hooks) maybe fall back to the runtime source instead of throwing?
-          throw new Error(
-            'Could not map hook runtime location to original source location',
-          );
-        }
+        const {
+          column,
+          line,
+          sourceContent,
+          sourceURL,
+        } = sourceMapConsumer.originalPositionFor({
+          columnNumber,
+          lineNumber,
+        });
 
         originalSourceColumnNumber = column;
         originalSourceLineNumber = line;
-        // TODO (named hooks) maybe canonicalize this URL somehow?
-        // It can be relative if the source map specifies it that way,
-        // but we use it as a cache key across different source maps and there can be collisions.
-        originalSourceURL = (source: string);
-        originalSourceCode = withSyncPerfMeasurements(
-          'sourceConsumer.sourceContentFor()',
-          () => (sourceConsumer.sourceContentFor(source, true): string),
-        );
+        originalSourceCode = sourceContent;
+        originalSourceURL = sourceURL;
+      }
 
-        if (__DEBUG__) {
-          console.groupCollapsed(
-            `parseSourceAST() Extracted source code from source map for "${originalSourceURL}"`,
-          );
-          console.log(originalSourceCode);
-          console.groupEnd();
-        }
+      hookParsedMetadata.originalSourceCode = originalSourceCode;
+      hookParsedMetadata.originalSourceURL = originalSourceURL;
+      hookParsedMetadata.originalSourceLineNumber = originalSourceLineNumber;
+      hookParsedMetadata.originalSourceColumnNumber = originalSourceColumnNumber;
 
-        if (
-          metadataConsumer != null &&
-          metadataConsumer.hasHookMap(originalSourceURL)
-        ) {
-          hasHookMap = true;
-        }
+      if (
+        metadataConsumer != null &&
+        metadataConsumer.hasHookMap(originalSourceURL)
+      ) {
+        hasHookMap = true;
       }
 
       if (__DEBUG__) {
@@ -356,11 +302,6 @@ function parseSourceAST(
         );
       }
 
-      hookParsedMetadata.originalSourceCode = originalSourceCode;
-      hookParsedMetadata.originalSourceURL = originalSourceURL;
-      hookParsedMetadata.originalSourceLineNumber = originalSourceLineNumber;
-      hookParsedMetadata.originalSourceColumnNumber = originalSourceColumnNumber;
-
       if (hasHookMap) {
         if (__DEBUG__) {
           console.log(
@@ -447,30 +388,42 @@ function parseSourceMaps(
         throw Error(`Expected to find HookParsedMetadata for "${locationKey}"`);
       }
 
-      const sourceMapJSON = hookSourceAndMetadata.sourceMapJSON;
-      if (sourceMapJSON != null) {
-        hookParsedMetadata.metadataConsumer = withSyncPerfMeasurements(
-          'new SourceMapMetadataConsumer(sourceMapJSON)',
-          () => new SourceMapMetadataConsumer(sourceMapJSON),
-        );
-        hookParsedMetadata.sourceConsumer = withSyncPerfMeasurements(
-          'new SourceMapConsumer(sourceMapJSON)',
-          () => new SourceMapConsumer(sourceMapJSON),
-        );
+      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();
+        }
 
-        const runtimeSourceURL = hookSourceAndMetadata.runtimeSourceURL;
+        hookParsedMetadata.metadataConsumer = runtimeMetadata.metadataConsumer;
+        hookParsedMetadata.sourceMapConsumer =
+          runtimeMetadata.sourceMapConsumer;
+      } else {
+        if (sourceMapJSON != null) {
+          const sourceMapConsumer = withSyncPerfMeasurements(
+            'new SourceMapConsumer(sourceMapJSON)',
+            () => SourceMapConsumer(sourceMapJSON),
+          );
 
-        // Only set once to avoid triggering eviction/cleanup code.
-        if (!runtimeURLToMetadataCache.has(runtimeSourceURL)) {
-          if (__DEBUG__) {
-            console.log(
-              `parseSourceMaps() Caching runtime metadata for "${runtimeSourceURL}"`,
-            );
-          }
+          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: hookParsedMetadata.metadataConsumer,
-            sourceConsumer: hookParsedMetadata.sourceConsumer,
+            metadataConsumer: metadataConsumer,
+            sourceMapConsumer: sourceMapConsumer,
           });
         }
       }

From 3a50d95573b7ebdf723e08f6f78c99faf811da0b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 23 Sep 2021 14:07:38 -0400
Subject: [PATCH 0899/1603] Never attach ping listeners in legacy Suspense
 (#22407)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

I noticed a weird branch where we attach a ping listener even in legacy
mode. It's weird because this shouldn't be necessary. Fallbacks always
synchronously commit in legacy mode, so pings never happen. (A "ping" is
when a suspended promise resolves before the fallback has committed.)

It took me a moment to remember why this case exists, but it's related
to React.lazy.

There's a special case where we suspend 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.

However, even though we're switching to the concurrent mode behavior, we
don't need to attach a ping listener. So I refactored the logic so that
it doesn't escape back into the regular path.

It's not really a big deal that we attach an unncessary ping listener,
since this case is so unusual. The motivation is not performance related
— it's to make the logic clearer, because I'm about to add another case
where we trigger a Suspense boundary without attaching a ping listener.
---
 .../src/ReactFiberThrow.new.js                | 129 +++++++++---------
 .../src/ReactFiberThrow.old.js                | 129 +++++++++---------
 2 files changed, 134 insertions(+), 124 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 67ac620e80d8..5a01005c2553 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -297,76 +297,82 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is in legacy mode, we should *not*
-        // suspend the commit. Pretend as if the suspended component rendered
-        // null and keep rendering. In the commit phase, we'll schedule a
-        // subsequent synchronous update to re-render the Suspense.
-        //
-        // Note: It doesn't matter whether the component that suspended was
-        // inside a concurrent mode tree. If the Suspense is outside of it, we
-        // should *not* suspend the commit.
-        //
-        // If the suspense boundary suspended itself suspended, we don't have to
-        // do this trick because nothing was partially started. We can just
-        // directly do a second pass over the fallback in this render and
-        // pretend we meant to render that directly.
-        if (
-          (workInProgress.mode & ConcurrentMode) === NoMode &&
-          workInProgress !== returnFiber
-        ) {
-          workInProgress.flags |= DidCapture;
-          sourceFiber.flags |= ForceUpdateForLegacySuspense;
+        if ((workInProgress.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 (workInProgress === 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.
+            workInProgress.flags |= ShouldCapture;
+          } else {
+            workInProgress.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);
+            // 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 (supportsPersistence && enablePersistentOffscreenHostContainer) {
-            // Another legacy Suspense quirk. In persistent mode, if this is the
-            // initial mount, override the props of the host container to hide
-            // its contents.
-            const currentSuspenseBoundary = workInProgress.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (workInProgress.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
+            if (supportsPersistence && enablePersistentOffscreenHostContainer) {
+              // Another legacy Suspense quirk. In persistent mode, if this is the
+              // initial mount, override the props of the host container to hide
+              // its contents.
+              const currentSuspenseBoundary = workInProgress.alternate;
+              if (currentSuspenseBoundary === null) {
+                const offscreenFiber: Fiber = (workInProgress.child: any);
+                const offscreenContainer = offscreenFiber.child;
+                if (offscreenContainer !== null) {
+                  const children = offscreenContainer.memoizedProps.children;
+                  const containerProps = getOffscreenContainerProps(
+                    'hidden',
+                    children,
+                  );
+                  offscreenContainer.pendingProps = containerProps;
+                  offscreenContainer.memoizedProps = containerProps;
+                }
               }
             }
-          }
 
-          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(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
+            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(NoTimestamp, SyncLane);
+                update.tag = ForceUpdate;
+                enqueueUpdate(sourceFiber, update, SyncLane);
+              }
             }
-          }
-
-          // 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);
 
-          // Exit without suspending.
+            // 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;
         }
-
         // Confirmed that the boundary is in a concurrent mode tree. Continue
         // with the normal suspend path.
         //
@@ -415,7 +421,6 @@ function throwException(
         // TODO: I think we can remove this, since we now use `DidCapture` in
         // the begin phase to prevent an early bailout.
         workInProgress.lanes = rootRenderLanes;
-
         return;
       }
       // This boundary already captured during this render. Continue to the next
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 6309e20d9e62..6e060108c88e 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -297,76 +297,82 @@ function throwException(
           wakeables.add(wakeable);
         }
 
-        // If the boundary is in legacy mode, we should *not*
-        // suspend the commit. Pretend as if the suspended component rendered
-        // null and keep rendering. In the commit phase, we'll schedule a
-        // subsequent synchronous update to re-render the Suspense.
-        //
-        // Note: It doesn't matter whether the component that suspended was
-        // inside a concurrent mode tree. If the Suspense is outside of it, we
-        // should *not* suspend the commit.
-        //
-        // If the suspense boundary suspended itself suspended, we don't have to
-        // do this trick because nothing was partially started. We can just
-        // directly do a second pass over the fallback in this render and
-        // pretend we meant to render that directly.
-        if (
-          (workInProgress.mode & ConcurrentMode) === NoMode &&
-          workInProgress !== returnFiber
-        ) {
-          workInProgress.flags |= DidCapture;
-          sourceFiber.flags |= ForceUpdateForLegacySuspense;
+        if ((workInProgress.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 (workInProgress === 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.
+            workInProgress.flags |= ShouldCapture;
+          } else {
+            workInProgress.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);
+            // 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 (supportsPersistence && enablePersistentOffscreenHostContainer) {
-            // Another legacy Suspense quirk. In persistent mode, if this is the
-            // initial mount, override the props of the host container to hide
-            // its contents.
-            const currentSuspenseBoundary = workInProgress.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (workInProgress.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
+            if (supportsPersistence && enablePersistentOffscreenHostContainer) {
+              // Another legacy Suspense quirk. In persistent mode, if this is the
+              // initial mount, override the props of the host container to hide
+              // its contents.
+              const currentSuspenseBoundary = workInProgress.alternate;
+              if (currentSuspenseBoundary === null) {
+                const offscreenFiber: Fiber = (workInProgress.child: any);
+                const offscreenContainer = offscreenFiber.child;
+                if (offscreenContainer !== null) {
+                  const children = offscreenContainer.memoizedProps.children;
+                  const containerProps = getOffscreenContainerProps(
+                    'hidden',
+                    children,
+                  );
+                  offscreenContainer.pendingProps = containerProps;
+                  offscreenContainer.memoizedProps = containerProps;
+                }
               }
             }
-          }
 
-          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(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
+            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(NoTimestamp, SyncLane);
+                update.tag = ForceUpdate;
+                enqueueUpdate(sourceFiber, update, SyncLane);
+              }
             }
-          }
-
-          // 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);
 
-          // Exit without suspending.
+            // 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;
         }
-
         // Confirmed that the boundary is in a concurrent mode tree. Continue
         // with the normal suspend path.
         //
@@ -415,7 +421,6 @@ function throwException(
         // TODO: I think we can remove this, since we now use `DidCapture` in
         // the begin phase to prevent an early bailout.
         workInProgress.lanes = rootRenderLanes;
-
         return;
       }
       // This boundary already captured during this render. Continue to the next

From 1c58cfab959ae17565bc6802a3699d564f781c35 Mon Sep 17 00:00:00 2001
From: Damian Cyntler <damian@cyntler.com>
Date: Fri, 24 Sep 2021 01:30:12 +0200
Subject: [PATCH 0900/1603] Update Node.js to latest v14.17.6 LTS (#22401)

---
 .codesandbox/ci.json | 2 +-
 .nvmrc               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 9c54169b0c04..897513de495f 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -1,7 +1,7 @@
 {
   "packages": ["packages/react", "packages/react-dom", "packages/scheduler"],
   "buildCommand": "download-build-in-codesandbox-ci",
-  "node": "12",
+  "node": "14",
   "publishDirectory": {
     "react": "build/oss-experimental/react",
     "react-dom": "build/oss-experimental/react-dom",
diff --git a/.nvmrc b/.nvmrc
index 9ab73601cda4..4ec320b217c7 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-v12.17.0
+v14.17.6

From d47339ea3659133940f7699144cd30453fb6ed43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 24 Sep 2021 10:22:02 -0400
Subject: [PATCH 0901/1603] [Fizz] Remove assignID mechanism (#22410)

* Remove pushEmpty

This is only used to support the assignID mechanism.

* Remove assignID mechanism

This effectively isn't used anyway because we always insert a dummy tag
into the fallback.

* Emit the template tag with an ID directly in pending boundaries

This ensures that assigning the ID is deterministic since it's done during
writing.

This also avoids emitting it for client rendered boundaries that start as
client rendered since we never need to refer to them.

* Move lazy ID initialization to the core implementation

We never need an ID before we write a pending boundary. This also ensures
that ID generation is deterministic by moving it to the write phase.

* Simplify the inserted scripts

We can assume that there are no text nodes before the template tag so this
simplifies the script that finds the comment node. It should be the direct
previous child.
---
 .../src/server/ReactDOMServerFormatConfig.js  | 230 ++++--------------
 .../ReactDOMServerLegacyFormatConfig.js       |  12 +-
 .../server/ReactNativeServerFormatConfig.js   |  15 +-
 .../src/ReactNoopServer.js                    |   4 +-
 packages/react-server/src/ReactFizzServer.js  |  85 ++-----
 .../forks/ReactServerFormatConfig.custom.js   |   5 +-
 6 files changed, 73 insertions(+), 278 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 1b2bbc28f666..78e909cff610 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -168,17 +168,17 @@ export function getChildFormatContext(
   return parentContext;
 }
 
-// This object is used to lazily reuse the ID of the first generated node, or assign one.
-// We can't assign an ID up front because the node we're attaching it to might already
-// have one. So we need to lazily use that if it's available.
-export type SuspenseBoundaryID = {
-  formattedID: null | PrecomputedChunk,
-};
+export type SuspenseBoundaryID = null | PrecomputedChunk;
+
+export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID: SuspenseBoundaryID = null;
 
-export function createSuspenseBoundaryID(
+export function assignSuspenseBoundaryID(
   responseState: ResponseState,
 ): SuspenseBoundaryID {
-  return {formattedID: null};
+  const generatedID = responseState.nextSuspenseID++;
+  return stringToPrecomputedChunk(
+    responseState.boundaryPrefix + generatedID.toString(16),
+  );
 }
 
 export type OpaqueIDType = string;
@@ -201,50 +201,13 @@ function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
 
-function assignAnID(
-  responseState: ResponseState,
-  id: SuspenseBoundaryID,
-): PrecomputedChunk {
-  // TODO: This approach doesn't yield deterministic results since this is assigned during render.
-  const generatedID = responseState.nextSuspenseID++;
-  return (id.formattedID = stringToPrecomputedChunk(
-    responseState.boundaryPrefix + generatedID.toString(16),
-  ));
-}
-
-const dummyNode1 = stringToPrecomputedChunk('<template id="');
-const dummyNode2 = stringToPrecomputedChunk('"></template>');
-
-function pushDummyNodeWithID(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: SuspenseBoundaryID,
-): void {
-  const id = assignAnID(responseState, assignID);
-  target.push(dummyNode1, id, dummyNode2);
-}
-
-export function pushEmpty(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
-): void {
-  if (assignID !== null) {
-    pushDummyNodeWithID(target, responseState, assignID);
-  }
-}
-
 const textSeparator = stringToPrecomputedChunk('<!-- -->');
 
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): void {
-  if (assignID !== null) {
-    pushDummyNodeWithID(target, responseState, assignID);
-  }
   if (text === '') {
     // Empty text doesn't have a DOM node representation and the hydration is aware of this.
     return;
@@ -514,30 +477,6 @@ function pushAttribute(
 const endOfStartTag = stringToPrecomputedChunk('>');
 const endOfStartTagSelfClosing = stringToPrecomputedChunk('/>');
 
-const idAttr = stringToPrecomputedChunk(' id="');
-const attrEnd = stringToPrecomputedChunk('"');
-
-function pushID(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: SuspenseBoundaryID,
-  existingID: mixed,
-): void {
-  if (
-    existingID !== null &&
-    existingID !== undefined &&
-    (typeof existingID === 'string' || typeof existingID === 'object')
-  ) {
-    // We can reuse the existing ID for our purposes.
-    assignID.formattedID = stringToPrecomputedChunk(
-      escapeTextForBrowser(existingID),
-    );
-  } else {
-    const encodedID = assignAnID(responseState, assignID);
-    target.push(idAttr, encodedID, attrEnd);
-  }
-}
-
 function pushInnerHTML(
   target: Array<Chunk | PrecomputedChunk>,
   innerHTML,
@@ -598,7 +537,6 @@ function pushStartSelect(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('select', props);
@@ -651,9 +589,6 @@ function pushStartSelect(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -693,7 +628,6 @@ function pushStartOption(
   props: Object,
   responseState: ResponseState,
   formatContext: FormatContext,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   const selectedValue = formatContext.selectedValue;
 
@@ -776,10 +710,6 @@ function pushStartOption(
     target.push(selectedMarkerAttribute);
   }
 
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
-
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
   return children;
@@ -789,7 +719,6 @@ function pushInput(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('input', props);
@@ -883,10 +812,6 @@ function pushInput(
     pushAttribute(target, responseState, 'value', defaultValue);
   }
 
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
-
   target.push(endOfStartTagSelfClosing);
   return null;
 }
@@ -895,7 +820,6 @@ function pushStartTextArea(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     checkControlledValueProps('textarea', props);
@@ -952,10 +876,6 @@ function pushStartTextArea(
     value = defaultValue;
   }
 
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
-
   target.push(endOfStartTag);
 
   // TODO (yungsters): Remove support for children content in <textarea>.
@@ -1002,7 +922,6 @@ function pushSelfClosing(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1028,9 +947,6 @@ function pushSelfClosing(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTagSelfClosing);
   return null;
@@ -1040,7 +956,6 @@ function pushStartMenuItem(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag('menuitem'));
 
@@ -1064,9 +979,6 @@ function pushStartMenuItem(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   return null;
@@ -1077,7 +989,6 @@ function pushStartGenericElement(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1102,9 +1013,6 @@ function pushStartGenericElement(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1122,7 +1030,6 @@ function pushStartCustomElement(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1166,9 +1073,6 @@ function pushStartCustomElement(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
   pushInnerHTML(target, innerHTML, children);
@@ -1182,7 +1086,6 @@ function pushStartPreformattedElement(
   props: Object,
   tag: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(startChunkForTag(tag));
 
@@ -1207,9 +1110,6 @@ function pushStartPreformattedElement(
       }
     }
   }
-  if (assignID !== null) {
-    pushID(target, responseState, assignID, props.id);
-  }
 
   target.push(endOfStartTag);
 
@@ -1275,7 +1175,6 @@ export function pushStartInstance(
   props: Object,
   responseState: ResponseState,
   formatContext: FormatContext,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   if (__DEV__) {
     validateARIAProperties(type, props);
@@ -1317,31 +1216,19 @@ export function pushStartInstance(
   switch (type) {
     // Special tags
     case 'select':
-      return pushStartSelect(target, props, responseState, assignID);
+      return pushStartSelect(target, props, responseState);
     case 'option':
-      return pushStartOption(
-        target,
-        props,
-        responseState,
-        formatContext,
-        assignID,
-      );
+      return pushStartOption(target, props, responseState, formatContext);
     case 'textarea':
-      return pushStartTextArea(target, props, responseState, assignID);
+      return pushStartTextArea(target, props, responseState);
     case 'input':
-      return pushInput(target, props, responseState, assignID);
+      return pushInput(target, props, responseState);
     case 'menuitem':
-      return pushStartMenuItem(target, props, responseState, assignID);
+      return pushStartMenuItem(target, props, responseState);
     // Newline eating tags
     case 'listing':
     case 'pre': {
-      return pushStartPreformattedElement(
-        target,
-        props,
-        type,
-        responseState,
-        assignID,
-      );
+      return pushStartPreformattedElement(target, props, type, responseState);
     }
     // Omitted close tags
     case 'area':
@@ -1358,7 +1245,7 @@ export function pushStartInstance(
     case 'source':
     case 'track':
     case 'wbr': {
-      return pushSelfClosing(target, props, type, responseState, assignID);
+      return pushSelfClosing(target, props, type, responseState);
     }
     // These are reserved SVG and MathML elements, that are never custom elements.
     // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
@@ -1370,13 +1257,7 @@ export function pushStartInstance(
     case 'font-face-format':
     case 'font-face-name':
     case 'missing-glyph': {
-      return pushStartGenericElement(
-        target,
-        props,
-        type,
-        responseState,
-        assignID,
-      );
+      return pushStartGenericElement(target, props, type, responseState);
     }
     case 'html': {
       if (formatContext.insertionMode === ROOT_HTML_MODE) {
@@ -1385,33 +1266,15 @@ export function pushStartInstance(
         // rendering the whole document.
         target.push(DOCTYPE);
       }
-      return pushStartGenericElement(
-        target,
-        props,
-        type,
-        responseState,
-        assignID,
-      );
+      return pushStartGenericElement(target, props, type, responseState);
     }
     default: {
       if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
         // Generic element
-        return pushStartGenericElement(
-          target,
-          props,
-          type,
-          responseState,
-          assignID,
-        );
+        return pushStartGenericElement(target, props, type, responseState);
       } else {
         // Custom element
-        return pushStartCustomElement(
-          target,
-          props,
-          type,
-          responseState,
-          assignID,
-        );
+        return pushStartCustomElement(target, props, type, responseState);
       }
     }
   }
@@ -1474,7 +1337,10 @@ export function writePlaceholder(
 
 // Suspense boundaries are encoded as comments.
 const startCompletedSuspenseBoundary = stringToPrecomputedChunk('<!--$-->');
-const startPendingSuspenseBoundary = stringToPrecomputedChunk('<!--$?-->');
+const startPendingSuspenseBoundary1 = stringToPrecomputedChunk(
+  '<!--$?--><template id="',
+);
+const startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
 const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(
   '<!--$!-->',
 );
@@ -1503,7 +1369,13 @@ export function writeStartPendingSuspenseBoundary(
   responseState: ResponseState,
   id: SuspenseBoundaryID,
 ): boolean {
-  return writeChunk(destination, startPendingSuspenseBoundary);
+  writeChunk(destination, startPendingSuspenseBoundary1);
+  invariant(
+    id !== null,
+    'An ID must have been assigned before we can complete the boundary.',
+  );
+  writeChunk(destination, id);
+  return writeChunk(destination, startPendingSuspenseBoundary2);
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
@@ -1671,19 +1543,14 @@ export function writeEndSegment(
 //
 // function clientRenderBoundary(suspenseBoundaryID) {
 //   // Find the fallback's first element.
-//   let suspenseNode = document.getElementById(suspenseBoundaryID);
-//   if (!suspenseNode) {
+//   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 might include text nodes.
-//   do {
-//     suspenseNode = suspenseNode.previousSibling;
-//   } while (
-//     suspenseNode.nodeType !== COMMENT_NODE ||
-//     suspenseNode.data !== SUSPENSE_PENDING_START_DATA
-//   );
+//   // 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;
 //   // Tell React to retry it if the parent already hydrated.
@@ -1694,24 +1561,19 @@ export function writeEndSegment(
 //
 // function completeBoundary(suspenseBoundaryID, contentID) {
 //   // Find the fallback's first element.
-//   let suspenseNode = document.getElementById(suspenseBoundaryID);
+//   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
 //   const contentNode = document.getElementById(contentID);
 //   // We'll detach the content node so that regardless of what happens next we don't leave in the tree.
 //   // This might also help by not causing recalcing each time we move a child from here to the target.
 //   contentNode.parentNode.removeChild(contentNode);
-//   if (!suspenseNode) {
+//   if (!suspenseIdNode) {
 //     // 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;
 //   }
-//   // Find the boundary around the fallback. This might include text nodes.
-//   do {
-//     suspenseNode = suspenseNode.previousSibling;
-//   } while (
-//     suspenseNode.nodeType !== COMMENT_NODE ||
-//     suspenseNode.data !== SUSPENSE_PENDING_START_DATA
-//   );
+//   // Find the boundary around the fallback. This is always the previous node.
+//   const suspenseNode = suspenseIdNode.previousSibling;
 //
 //   // Clear all the existing children. This is complicated because
 //   // there can be embedded Suspense boundaries in the fallback.
@@ -1774,11 +1636,11 @@ export function writeEndSegment(
 // }
 
 const completeSegmentFunction =
-  'function $RS(b,f){var a=document.getElementById(b),c=document.getElementById(f);for(a.parentNode.removeChild(a);a.firstChild;)c.parentNode.insertBefore(a.firstChild,c);c.parentNode.removeChild(c)}';
+  'function $RS(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)}';
 const completeBoundaryFunction =
-  'function $RC(b,f){var a=document.getElementById(b),c=document.getElementById(f);c.parentNode.removeChild(c);if(a){do a=a.previousSibling;while(8!==a.nodeType||"$?"!==a.data);var h=a.parentNode,d=a.nextSibling,g=0;do{if(d&&8===d.nodeType){var e=d.data;if("/$"===e)if(0===g)break;else g--;else"$"!==e&&"$?"!==e&&"$!"!==e||g++}e=d.nextSibling;h.removeChild(d);d=e}while(d);for(;c.firstChild;)h.insertBefore(c.firstChild,d);a.data="$";a._reactRetry&&a._reactRetry()}}';
+  'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
 const clientRenderFunction =
-  'function $RX(b){if(b=document.getElementById(b)){do b=b.previousSibling;while(8!==b.nodeType||"$?"!==b.data);b.data="$!";b._reactRetry&&b._reactRetry()}}';
+  'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
   '<script>' + completeSegmentFunction + ';$RS("',
@@ -1832,13 +1694,12 @@ export function writeCompletedBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeBoundaryScript1Partial);
   }
-  const formattedBoundaryID = boundaryID.formattedID;
   invariant(
-    formattedBoundaryID !== null,
+    boundaryID !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
-  writeChunk(destination, formattedBoundaryID);
+  writeChunk(destination, boundaryID);
   writeChunk(destination, completeBoundaryScript2);
   writeChunk(destination, responseState.segmentPrefix);
   writeChunk(destination, formattedContentID);
@@ -1864,11 +1725,10 @@ export function writeClientRenderBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, clientRenderScript1Partial);
   }
-  const formattedBoundaryID = boundaryID.formattedID;
   invariant(
-    formattedBoundaryID !== null,
+    boundaryID !== null,
     'An ID must have been assigned before we can complete the boundary.',
   );
-  writeChunk(destination, formattedBoundaryID);
+  writeChunk(destination, boundaryID);
   return writeChunk(destination, clientRenderScript2);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 60ab7544d88f..59fb19e7986c 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -7,10 +7,7 @@
  * @flow
  */
 
-import type {
-  SuspenseBoundaryID,
-  FormatContext,
-} from './ReactDOMServerFormatConfig';
+import type {FormatContext} from './ReactDOMServerFormatConfig';
 
 import {
   createResponseState as createResponseStateImpl,
@@ -81,9 +78,9 @@ export type {
 
 export {
   getChildFormatContext,
-  createSuspenseBoundaryID,
+  UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
+  assignSuspenseBoundaryID,
   makeServerID,
-  pushEmpty,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
@@ -106,12 +103,11 @@ export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): void {
   if (responseState.generateStaticMarkup) {
     target.push(stringToChunk(escapeTextForBrowser(text)));
   } else {
-    pushTextInstanceImpl(target, text, responseState, assignID);
+    pushTextInstanceImpl(target, text, responseState);
   }
 }
 
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 24e9da45423d..c530649ac507 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -103,10 +103,11 @@ export function getChildFormatContext(
 // This is very specific to DOM where we can't assign an ID to.
 export type SuspenseBoundaryID = number;
 
-export function createSuspenseBoundaryID(
+export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID = -1;
+
+export function assignSuspenseBoundaryID(
   responseState: ResponseState,
 ): SuspenseBoundaryID {
-  // TODO: This is not deterministic since it's created during render.
   return responseState.nextSuspenseID++;
 }
 
@@ -125,19 +126,10 @@ export function makeServerID(
 
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
-export function pushEmpty(
-  target: Array<Chunk | PrecomputedChunk>,
-  responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
-): void {
-  // This is not used since we don't need to assign any IDs.
-}
-
 export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-  assignID: null | SuspenseBoundaryID,
 ): void {
   target.push(
     INSTANCE,
@@ -154,7 +146,6 @@ export function pushStartInstance(
   props: Object,
   responseState: ResponseState,
   formatContext: FormatContext,
-  assignID: null | SuspenseBoundaryID,
 ): ReactNodeList {
   target.push(
     INSTANCE,
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index e183a8ce7190..0ba00df7781d 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -81,7 +81,9 @@ const ReactNoopServer = ReactFizzServer({
   closeWithError(destination: Destination, error: mixed): void {},
   flushBuffered(destination: Destination): void {},
 
-  createSuspenseBoundaryID(): SuspenseInstance {
+  UNINITIALIZED_SUSPENSE_BOUNDARY_ID: null,
+
+  assignSuspenseBoundaryID(): SuspenseInstance {
     // The ID is a pointer to the boundary itself.
     return {state: 'pending', children: []};
   },
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f19f45e41f18..f1463a1345d1 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -48,13 +48,13 @@ import {
   writeClientRenderBoundaryInstruction,
   writeCompletedBoundaryInstruction,
   writeCompletedSegmentInstruction,
-  pushEmpty,
   pushTextInstance,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
   pushEndCompletedSuspenseBoundary,
-  createSuspenseBoundaryID,
+  UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
+  assignSuspenseBoundaryID,
   getChildFormatContext,
 } from './ReactServerFormatConfig';
 import {
@@ -124,7 +124,7 @@ type LegacyContext = {
 };
 
 type SuspenseBoundary = {
-  +id: SuspenseBoundaryID,
+  id: SuspenseBoundaryID,
   rootSegmentID: number,
   forceClientRender: boolean, // if it errors or infinitely suspends
   parentFlushed: boolean,
@@ -142,7 +142,6 @@ type Task = {
   abortSet: Set<Task>, // the abortable set that this task belongs to
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
   context: ContextSnapshot, // the current new context that this task is executing in
-  assignID: null | SuspenseBoundaryID, // id to assign to the content
   componentStack: null | ComponentStackNode, // DEV-only component stack
 };
 
@@ -265,7 +264,6 @@ export function createRequest(
     abortSet,
     emptyContextObject,
     rootContextSnapshot,
-    null,
   );
   pingedTasks.push(rootTask);
   return request;
@@ -284,7 +282,7 @@ function createSuspenseBoundary(
   fallbackAbortableTasks: Set<Task>,
 ): SuspenseBoundary {
   return {
-    id: createSuspenseBoundaryID(request.responseState),
+    id: UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
     rootSegmentID: -1,
     parentFlushed: false,
     pendingTasks: 0,
@@ -303,7 +301,6 @@ function createTask(
   abortSet: Set<Task>,
   legacyContext: LegacyContext,
   context: ContextSnapshot,
-  assignID: null | SuspenseBoundaryID,
 ): Task {
   request.allPendingTasks++;
   if (blockedBoundary === null) {
@@ -319,7 +316,6 @@ function createTask(
     abortSet,
     legacyContext,
     context,
-    assignID,
   }: any);
   if (__DEV__) {
     task.componentStack = null;
@@ -421,9 +417,6 @@ function renderSuspenseBoundary(
   const parentBoundary = task.blockedBoundary;
   const parentSegment = task.blockedSegment;
 
-  // We need to push an "empty" thing here to identify the parent suspense boundary.
-  pushEmpty(parentSegment.chunks, request.responseState, task.assignID);
-  task.assignID = null;
   // 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,
@@ -488,30 +481,16 @@ function renderSuspenseBoundary(
     task.blockedSegment = parentSegment;
   }
 
-  // This injects an extra segment just to contain an empty tag with an ID.
-  // This means that we're not actually using the assignID anywhere.
-  // TODO: Rethink the assignID approach.
-  pushEmpty(boundarySegment.chunks, request.responseState, newBoundary.id);
-  const innerSegment = createPendingSegment(
-    request,
-    boundarySegment.chunks.length,
-    null,
-    boundarySegment.formatContext,
-  );
-  boundarySegment.status = COMPLETED;
-  boundarySegment.children.push(innerSegment);
-
   // 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 = createTask(
     request,
     fallback,
     parentBoundary,
-    innerSegment,
+    boundarySegment,
     fallbackAbortSet,
     task.legacyContext,
     task.context,
-    null,
   );
   if (__DEV__) {
     suspendedFallbackTask.componentStack = task.componentStack;
@@ -554,10 +533,7 @@ function renderHostElement(
     props,
     request.responseState,
     segment.formatContext,
-    task.assignID,
   );
-  // We must have assigned it already above so we don't need this anymore.
-  task.assignID = null;
   const prevContext = segment.formatContext;
   segment.formatContext = getChildFormatContext(prevContext, type, props);
   // We use the non-destructive form because if something suspends, we still
@@ -1143,20 +1119,11 @@ function renderNodeDestructive(
     }
 
     if (isArray(node)) {
-      if (node.length > 0) {
-        for (let i = 0; i < node.length; i++) {
-          // Recursively render the rest. 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]);
-        }
-      } else {
-        pushEmpty(
-          task.blockedSegment.chunks,
-          request.responseState,
-          task.assignID,
-        );
-        task.assignID = null;
+      for (let i = 0; i < node.length; i++) {
+        // Recursively render the rest. 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]);
       }
       return;
     }
@@ -1181,12 +1148,6 @@ function renderNodeDestructive(
           return;
         }
       }
-      pushEmpty(
-        task.blockedSegment.chunks,
-        request.responseState,
-        task.assignID,
-      );
-      task.assignID = null;
     }
 
     const childString = Object.prototype.toString.call(node);
@@ -1202,13 +1163,7 @@ function renderNodeDestructive(
   }
 
   if (typeof node === 'string') {
-    pushTextInstance(
-      task.blockedSegment.chunks,
-      node,
-      request.responseState,
-      task.assignID,
-    );
-    task.assignID = null;
+    pushTextInstance(task.blockedSegment.chunks, node, request.responseState);
     return;
   }
 
@@ -1217,9 +1172,7 @@ function renderNodeDestructive(
       task.blockedSegment.chunks,
       '' + node,
       request.responseState,
-      task.assignID,
     );
-    task.assignID = null;
     return;
   }
 
@@ -1232,10 +1185,6 @@ function renderNodeDestructive(
       );
     }
   }
-
-  // Any other type is assumed to be empty.
-  pushEmpty(task.blockedSegment.chunks, request.responseState, task.assignID);
-  task.assignID = null;
 }
 
 function spawnNewSuspendedTask(
@@ -1261,7 +1210,6 @@ function spawnNewSuspendedTask(
     task.abortSet,
     task.legacyContext,
     task.context,
-    task.assignID,
   );
   if (__DEV__) {
     if (task.componentStack !== null) {
@@ -1270,8 +1218,6 @@ function spawnNewSuspendedTask(
       newTask.componentStack = task.componentStack.parent;
     }
   }
-  // We've delegated the assignment.
-  task.assignID = null;
   const ping = newTask.ping;
   x.then(ping, ping);
 }
@@ -1650,11 +1596,10 @@ function flushSegment(
       request.partialBoundaries.push(boundary);
     }
 
-    writeStartPendingSuspenseBoundary(
-      destination,
-      request.responseState,
-      boundary.id,
-    );
+    /// This is the first time we should have referenced this ID.
+    const id = (boundary.id = assignSuspenseBoundaryID(request.responseState));
+
+    writeStartPendingSuspenseBoundary(destination, request.responseState, id);
 
     // Flush the fallback.
     flushSubtree(request, destination, segment);
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 22539f3aa86b..d816198c6418 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -33,9 +33,10 @@ export opaque type OpaqueIDType = mixed;
 export const isPrimaryRenderer = false;
 
 export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
-export const createSuspenseBoundaryID = $$$hostConfig.createSuspenseBoundaryID;
+export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
+  $$$hostConfig.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
+export const assignSuspenseBoundaryID = $$$hostConfig.assignSuspenseBoundaryID;
 export const makeServerID = $$$hostConfig.makeServerID;
-export const pushEmpty = $$$hostConfig.pushEmpty;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;

From a01cdbf8132e02773ddb376948e4c7ff7cbc72a0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 Sep 2021 10:54:57 -0400
Subject: [PATCH 0902/1603] Update Yarn build-for-devtools script to account
 for build/build2 changes (#22418)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cfd9e4281fa3..03f5aa57c6f5 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && rm -rf build && mkdir build && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

From b1a1cb11680cf4a03932e8955f64d5a7ba9c89f1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 Sep 2021 11:09:42 -0400
Subject: [PATCH 0903/1603] DevTools: Lazily parse indexed map sections
 (#22415)

Indexed maps divide nested source maps into sections, annotated with a line and column offset. Since these sections are JSON and can be quickly parsed, we can easily separate them without doing the heavier base64 and VLQ decoding process. This PR updates our sourcemap parsing code to defer parsing of an indexed map section until we actually need to retrieve mappings from it.
---
 .../src/hooks/SourceMapConsumer.js            | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
index f0503ef91a23..53c0e8c0a57a 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
@@ -11,6 +11,7 @@ import {decode} from 'sourcemap-codec';
 
 import type {
   IndexSourceMap,
+  IndexSourceMapSection,
   BasicSourceMap,
   MixedSourceMap,
 } from './SourceMapTypes';
@@ -34,7 +35,7 @@ export type SourceMapConsumerType = {|
 type Mappings = Array<Array<Array<number>>>;
 
 export default function SourceMapConsumer(
-  sourceMapJSON: MixedSourceMap,
+  sourceMapJSON: MixedSourceMap | IndexSourceMapSection,
 ): SourceMapConsumerType {
   if (sourceMapJSON.sections != null) {
     return IndexedSourceMapConsumer(((sourceMapJSON: any): IndexSourceMap));
@@ -137,13 +138,22 @@ function BasicSourceMapConsumer(sourceMapJSON: BasicSourceMap) {
   }: any): SourceMapConsumerType);
 }
 
+type Section = {|
+  +generatedColumn: number,
+  +generatedLine: number,
+  +map: MixedSourceMap,
+
+  // Lazily parsed only when/as the section is needed.
+  sourceMapConsumer: SourceMapConsumerType | null,
+|};
+
 function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
   let lastOffset = {
     line: -1,
     column: 0,
   };
 
-  const sections = sourceMapJSON.sections.map(section => {
+  const sections: Array<Section> = sourceMapJSON.sections.map(section => {
     const offset = section.offset;
     const offsetLine = offset.line;
     const offsetColumn = offset.column;
@@ -161,7 +171,8 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
       // The offset fields are 0-based, but we use 1-based indices when encoding/decoding from VLQ.
       generatedLine: offsetLine + 1,
       generatedColumn: offsetColumn + 1,
-      sourceMapConsumer: new SourceMapConsumer(section.map),
+      map: section.map,
+      sourceMapConsumer: null,
     };
   });
 
@@ -229,6 +240,11 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
       );
     }
 
+    if (section.sourceMapConsumer === null) {
+      // Lazily parse the section only when it's needed.
+      section.sourceMapConsumer = new SourceMapConsumer(section.map);
+    }
+
     return section.sourceMapConsumer.originalPositionFor({
       columnNumber,
       lineNumber,

From af87f5a83d49bde495eb7fe760b2052ba8a76caf Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 Sep 2021 12:32:37 -0400
Subject: [PATCH 0904/1603] Scheduling Profiler marks should include thrown
 Errors (#22417)

The scheduling profiler markComponentRenderStopped method is supposed to be called when rendering finishes or when a value is thrown (Suspense or Error). Previously we were calling this in a Suspense-only path of `throwException`.

This PR updates the code to handle errors (or non-Thenables) thrown as well.

It also moves the mark logic the work loop `handleError` method, with Suspense/Error agnostic cleanup.
---
 .../src/ReactFiberThrow.new.js                |  10 --
 .../src/ReactFiberThrow.old.js                |  10 --
 .../src/ReactFiberWorkLoop.new.js             |  26 ++++
 .../src/ReactFiberWorkLoop.old.js             |  26 ++++
 .../src/SchedulingProfiler.js                 |  27 ++++
 .../SchedulingProfiler-test.internal.js       | 139 ++++++++++++++++++
 6 files changed, 218 insertions(+), 20 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 5a01005c2553..5b07409a7729 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -41,7 +41,6 @@ import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
-  enableSchedulingProfiler,
   enableLazyContextPropagation,
   enableUpdaterTracking,
   enablePersistentOffscreenHostContainer,
@@ -71,10 +70,6 @@ import {
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.new';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
-import {
-  markComponentRenderStopped,
-  markComponentSuspended,
-} from './SchedulingProfiler';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {
   SyncLane,
@@ -247,11 +242,6 @@ function throwException(
       }
     }
 
-    if (enableSchedulingProfiler) {
-      markComponentRenderStopped();
-      markComponentSuspended(sourceFiber, wakeable, 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;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 6e060108c88e..dcba4b521aeb 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -41,7 +41,6 @@ import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
-  enableSchedulingProfiler,
   enableLazyContextPropagation,
   enableUpdaterTracking,
   enablePersistentOffscreenHostContainer,
@@ -71,10 +70,6 @@ import {
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.old';
 import {logCapturedError} from './ReactFiberErrorLogger';
 import {logComponentSuspended} from './DebugTracing';
-import {
-  markComponentRenderStopped,
-  markComponentSuspended,
-} from './SchedulingProfiler';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {
   SyncLane,
@@ -247,11 +242,6 @@ function throwException(
       }
     }
 
-    if (enableSchedulingProfiler) {
-      markComponentRenderStopped();
-      markComponentSuspended(sourceFiber, wakeable, 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;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ac420850fae8..dbeb72b85632 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -68,6 +68,9 @@ import {
 import {
   markCommitStarted,
   markCommitStopped,
+  markComponentRenderStopped,
+  markComponentSuspended,
+  markComponentErrored,
   markLayoutEffectsStarted,
   markLayoutEffectsStopped,
   markPassiveEffectsStarted,
@@ -1356,6 +1359,29 @@ function handleError(root, thrownValue): void {
         stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);
       }
 
+      if (enableSchedulingProfiler) {
+        markComponentRenderStopped();
+
+        if (
+          thrownValue !== null &&
+          typeof thrownValue === 'object' &&
+          typeof thrownValue.then === 'function'
+        ) {
+          const wakeable: Wakeable = (thrownValue: any);
+          markComponentSuspended(
+            erroredWork,
+            wakeable,
+            workInProgressRootRenderLanes,
+          );
+        } else {
+          markComponentErrored(
+            erroredWork,
+            thrownValue,
+            workInProgressRootRenderLanes,
+          );
+        }
+      }
+
       throwException(
         root,
         erroredWork.return,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c98c7abac71f..af9e293d712a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -68,6 +68,9 @@ import {
 import {
   markCommitStarted,
   markCommitStopped,
+  markComponentRenderStopped,
+  markComponentSuspended,
+  markComponentErrored,
   markLayoutEffectsStarted,
   markLayoutEffectsStopped,
   markPassiveEffectsStarted,
@@ -1356,6 +1359,29 @@ function handleError(root, thrownValue): void {
         stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);
       }
 
+      if (enableSchedulingProfiler) {
+        markComponentRenderStopped();
+
+        if (
+          thrownValue !== null &&
+          typeof thrownValue === 'object' &&
+          typeof thrownValue.then === 'function'
+        ) {
+          const wakeable: Wakeable = (thrownValue: any);
+          markComponentSuspended(
+            erroredWork,
+            wakeable,
+            workInProgressRootRenderLanes,
+          );
+        } else {
+          markComponentErrored(
+            erroredWork,
+            thrownValue,
+            workInProgressRootRenderLanes,
+          );
+        }
+      }
+
       throwException(
         root,
         erroredWork.return,
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index b4e7f83d3a15..9b0985cf4613 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -144,6 +144,33 @@ export function markComponentRenderStopped(): void {
   }
 }
 
+export function markComponentErrored(
+  fiber: Fiber,
+  thrownValue: mixed,
+  lanes: Lanes,
+): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(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 (scheduling profiler) Add component stack id
+      markAndClear(`--error-${componentName}-${phase}-${message}`);
+    }
+  }
+}
+
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
 // $FlowFixMe: Flow cannot handle polymorphic WeakMaps
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 8680d19b710b..47768c52a88d 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -715,4 +715,143 @@ describe('SchedulingProfiler', () => {
     `);
     }
   });
+
+  it('should mark sync render that throws', async () => {
+    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');
+    }
+
+    ReactTestRenderer.create(
+      <ErrorBoundary>
+        <ExampleThatThrows />
+      </ErrorBoundary>,
+    );
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--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-17.0.3",
+        "--profiler-version-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-17.0.3",
+        "--profiler-version-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",
+      ]
+    `);
+    }
+  });
+
+  it('should mark concurrent render that throws', async () => {
+    spyOnProd(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() {
+      // eslint-disable-next-line no-throw-literal
+      throw 'Expected error';
+    }
+
+    ReactTestRenderer.create(
+      <ErrorBoundary>
+        <ExampleThatThrows />
+      </ErrorBoundary>,
+      {unstable_isConcurrent: true},
+    );
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+    }
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--render-start-16",
+          "--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",
+          "--render-start-16",
+          "--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-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--schedule-state-update-1-ErrorBoundary",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-ErrorBoundary",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+          "--commit-stop",
+        ]
+      `);
+    }
+  });
 });

From 1c73ceed5f6248679d04c5e637290cfc6d3b5264 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 24 Sep 2021 12:56:27 -0400
Subject: [PATCH 0905/1603] Scheduling Profiler marks should include thrown
 Errors (#22419)

---
 .../src/CanvasPage.js                         | 113 +++-----
 .../src/EventTooltip.js                       |  30 +++
 .../src/content-views/ReactMeasuresView.js    |  26 +-
 .../src/content-views/SchedulingEventsView.js |   2 +-
 .../src/content-views/SuspenseEventsView.js   |   2 +-
 .../src/content-views/ThrownErrorsView.js     | 241 ++++++++++++++++++
 .../src/content-views/constants.js            |   8 +
 .../src/content-views/index.js                |   1 +
 .../__tests__/preprocessData-test.internal.js |  50 ++++
 .../src/import-worker/preprocessData.js       |  11 +
 .../src/types.js                              |  10 +
 .../react-devtools-shared/src/constants.js    |   8 +-
 12 files changed, 417 insertions(+), 85 deletions(-)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js

diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 710d9cf03eed..48efcf8105e7 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -49,6 +49,7 @@ import {
   SchedulingEventsView,
   SnapshotsView,
   SuspenseEventsView,
+  ThrownErrorsView,
   TimeAxisMarkersView,
   UserTimingMarksView,
 } from './content-views';
@@ -138,6 +139,7 @@ const EMPTY_CONTEXT_INFO: ReactHoverContextInfo = {
   schedulingEvent: null,
   snapshot: null,
   suspenseEvent: null,
+  thrownError: null,
   userTimingMark: null,
 };
 
@@ -178,6 +180,7 @@ function AutoSizedCanvas({
   const flamechartViewRef = useRef(null);
   const networkMeasuresViewRef = useRef(null);
   const snapshotsViewRef = useRef(null);
+  const thrownErrorsViewRef = useRef(null);
 
   const {hideMenu: hideContextMenu} = useContext(RegistryContext);
 
@@ -271,6 +274,20 @@ function AutoSizedCanvas({
       true,
     );
 
+    let thrownErrorsViewWrapper = null;
+    if (data.thrownErrors.length > 0) {
+      const thrownErrorsView = new ThrownErrorsView(
+        surface,
+        defaultFrame,
+        data,
+      );
+      thrownErrorsViewRef.current = thrownErrorsView;
+      thrownErrorsViewWrapper = createViewHelper(
+        thrownErrorsView,
+        'thrown errors',
+      );
+    }
+
     const schedulingEventsView = new SchedulingEventsView(
       surface,
       defaultFrame,
@@ -382,6 +399,9 @@ function AutoSizedCanvas({
     }
     rootView.addSubview(nativeEventsViewWrapper);
     rootView.addSubview(schedulingEventsViewWrapper);
+    if (thrownErrorsViewWrapper !== null) {
+      rootView.addSubview(thrownErrorsViewWrapper);
+    }
     if (suspenseEventsViewWrapper !== null) {
       rootView.addSubview(suspenseEventsViewWrapper);
     }
@@ -461,14 +481,7 @@ function AutoSizedCanvas({
       userTimingMarksView.onHover = userTimingMark => {
         if (!hoveredEvent || hoveredEvent.userTimingMark !== userTimingMark) {
           setHoveredEvent({
-            componentMeasure: null,
-            flamechartStackFrame: null,
-            measure: null,
-            nativeEvent: null,
-            networkMeasure: null,
-            schedulingEvent: null,
-            snapshot: null,
-            suspenseEvent: null,
+            ...EMPTY_CONTEXT_INFO,
             userTimingMark,
           });
         }
@@ -480,15 +493,8 @@ function AutoSizedCanvas({
       nativeEventsView.onHover = nativeEvent => {
         if (!hoveredEvent || hoveredEvent.nativeEvent !== nativeEvent) {
           setHoveredEvent({
-            componentMeasure: null,
-            flamechartStackFrame: null,
-            measure: null,
+            ...EMPTY_CONTEXT_INFO,
             nativeEvent,
-            networkMeasure: null,
-            schedulingEvent: null,
-            snapshot: null,
-            suspenseEvent: null,
-            userTimingMark: null,
           });
         }
       };
@@ -499,15 +505,8 @@ function AutoSizedCanvas({
       schedulingEventsView.onHover = schedulingEvent => {
         if (!hoveredEvent || hoveredEvent.schedulingEvent !== schedulingEvent) {
           setHoveredEvent({
-            componentMeasure: null,
-            flamechartStackFrame: null,
-            measure: null,
-            nativeEvent: null,
-            networkMeasure: null,
+            ...EMPTY_CONTEXT_INFO,
             schedulingEvent,
-            snapshot: null,
-            suspenseEvent: null,
-            userTimingMark: null,
           });
         }
       };
@@ -518,15 +517,8 @@ function AutoSizedCanvas({
       suspenseEventsView.onHover = suspenseEvent => {
         if (!hoveredEvent || hoveredEvent.suspenseEvent !== suspenseEvent) {
           setHoveredEvent({
-            componentMeasure: null,
-            flamechartStackFrame: null,
-            measure: null,
-            nativeEvent: null,
-            networkMeasure: null,
-            schedulingEvent: null,
-            snapshot: null,
+            ...EMPTY_CONTEXT_INFO,
             suspenseEvent,
-            userTimingMark: null,
           });
         }
       };
@@ -537,15 +529,8 @@ function AutoSizedCanvas({
       reactMeasuresView.onHover = measure => {
         if (!hoveredEvent || hoveredEvent.measure !== measure) {
           setHoveredEvent({
-            componentMeasure: null,
-            flamechartStackFrame: null,
+            ...EMPTY_CONTEXT_INFO,
             measure,
-            nativeEvent: null,
-            networkMeasure: null,
-            schedulingEvent: null,
-            snapshot: null,
-            suspenseEvent: null,
-            userTimingMark: null,
           });
         }
       };
@@ -559,15 +544,8 @@ function AutoSizedCanvas({
           hoveredEvent.componentMeasure !== componentMeasure
         ) {
           setHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
             componentMeasure,
-            flamechartStackFrame: null,
-            measure: null,
-            nativeEvent: null,
-            networkMeasure: null,
-            schedulingEvent: null,
-            snapshot: null,
-            suspenseEvent: null,
-            userTimingMark: null,
           });
         }
       };
@@ -578,15 +556,8 @@ function AutoSizedCanvas({
       snapshotsView.onHover = snapshot => {
         if (!hoveredEvent || hoveredEvent.snapshot !== snapshot) {
           setHoveredEvent({
-            componentMeasure: null,
-            flamechartStackFrame: null,
-            measure: null,
-            nativeEvent: null,
-            networkMeasure: null,
-            schedulingEvent: null,
+            ...EMPTY_CONTEXT_INFO,
             snapshot,
-            suspenseEvent: null,
-            userTimingMark: null,
           });
         }
       };
@@ -600,15 +571,8 @@ function AutoSizedCanvas({
           hoveredEvent.flamechartStackFrame !== flamechartStackFrame
         ) {
           setHoveredEvent({
-            componentMeasure: null,
+            ...EMPTY_CONTEXT_INFO,
             flamechartStackFrame,
-            measure: null,
-            nativeEvent: null,
-            networkMeasure: null,
-            schedulingEvent: null,
-            snapshot: null,
-            suspenseEvent: null,
-            userTimingMark: null,
           });
         }
       });
@@ -619,15 +583,20 @@ function AutoSizedCanvas({
       networkMeasuresView.onHover = networkMeasure => {
         if (!hoveredEvent || hoveredEvent.networkMeasure !== networkMeasure) {
           setHoveredEvent({
-            componentMeasure: null,
-            flamechartStackFrame: null,
-            measure: null,
-            nativeEvent: null,
+            ...EMPTY_CONTEXT_INFO,
             networkMeasure,
-            schedulingEvent: null,
-            snapshot: null,
-            suspenseEvent: null,
-            userTimingMark: null,
+          });
+        }
+      };
+    }
+
+    const {current: thrownErrorsView} = thrownErrorsViewRef;
+    if (thrownErrorsView) {
+      thrownErrorsView.onHover = thrownError => {
+        if (!hoveredEvent || hoveredEvent.thrownError !== thrownError) {
+          setHoveredEvent({
+            ...EMPTY_CONTEXT_INFO,
+            thrownError,
           });
         }
       };
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 5a8cf625f943..353cf7fc00bb 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -19,6 +19,7 @@ import type {
   SchedulingEvent,
   Snapshot,
   SuspenseEvent,
+  ThrownError,
   UserTimingMark,
 } from './types';
 
@@ -92,6 +93,7 @@ export default function EventTooltip({
     schedulingEvent,
     snapshot,
     suspenseEvent,
+    thrownError,
     userTimingMark,
   } = hoveredEvent;
 
@@ -118,6 +120,8 @@ export default function EventTooltip({
     content = <TooltipFlamechartNode stackFrame={flamechartStackFrame} />;
   } else if (userTimingMark !== null) {
     content = <TooltipUserTimingMark mark={userTimingMark} />;
+  } else if (thrownError !== null) {
+    content = <TooltipThrownError thrownError={thrownError} />;
   }
 
   if (content !== null) {
@@ -436,3 +440,29 @@ const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => {
     </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-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
index 7009356b4ce4..87a377be1a1f 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
@@ -136,15 +136,23 @@ export class ReactMeasuresView extends View {
         // 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) {
-          textRect = {
-            ...measureRect,
-            size: {
-              width:
-                timestampToPosition(nextMeasure.timestamp, scaleFactor, frame) -
-                x,
-              height: REACT_MEASURE_HEIGHT,
-            },
-          };
+          // 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':
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
index 37ff0832e026..39921a727366 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
@@ -195,7 +195,7 @@ export class SchedulingEventsView extends View {
     };
     if (rectIntersectsRect(borderFrame, visibleArea)) {
       const borderDrawableRect = intersectionOfRects(borderFrame, visibleArea);
-      context.fillStyle = COLORS.PRIORITY_BORDER;
+      context.fillStyle = COLORS.REACT_WORK_BORDER;
       context.fillRect(
         borderDrawableRect.origin.x,
         borderDrawableRect.origin.y,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
index b7237079c5d5..b6fa643f6005 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
@@ -272,7 +272,7 @@ export class SuspenseEventsView extends View {
           borderFrame,
           visibleArea,
         );
-        context.fillStyle = COLORS.PRIORITY_BORDER;
+        context.fillStyle = COLORS.REACT_WORK_BORDER;
         context.fillRect(
           borderDrawableRect.origin.x,
           borderDrawableRect.origin.y,
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js
new file mode 100644
index 000000000000..e1d084ee4093
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js
@@ -0,0 +1,241 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ThrownError, ReactProfilerData} 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: ReactProfilerData;
+  _intrinsicSize: Size;
+  _hoveredEvent: ThrownError | null = null;
+  onHover: ((event: ThrownError | null) => void) | null = null;
+
+  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+    super(surface, frame);
+    this._profilerData = profilerData;
+
+    this._intrinsicSize = {
+      width: this._profilerData.duration,
+      height: EVENT_ROW_HEIGHT_FIXED,
+    };
+  }
+
+  desiredSize() {
+    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-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 48ba22aed30a..a715945f77e9 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -84,6 +84,8 @@ export let COLORS = {
   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: '',
   TEXT_COLOR: '',
@@ -218,6 +220,12 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-suspense-unresolved-hover',
     ),
+    REACT_THROWN_ERROR: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-thrown-error',
+    ),
+    REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-thrown-error-hover',
+    ),
     REACT_WORK_BORDER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-work-border',
     ),
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
index 21c8cb570b35..5cf1e543b50c 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/index.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/index.js
@@ -15,5 +15,6 @@ 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-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 3ea5051bcf53..11af34c9680a 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -354,6 +354,7 @@ describe('preprocessData', () => {
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
+          "thrownErrors": Array [],
         }
       `);
     }
@@ -570,6 +571,7 @@ describe('preprocessData', () => {
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
+          "thrownErrors": Array [],
         }
       `);
     }
@@ -761,6 +763,7 @@ describe('preprocessData', () => {
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
+          "thrownErrors": Array [],
         }
       `);
     }
@@ -1107,6 +1110,7 @@ describe('preprocessData', () => {
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
+          "thrownErrors": Array [],
         }
       `);
     }
@@ -1537,6 +1541,52 @@ describe('preprocessData', () => {
       });
     });
 
+    describe('errors thrown while rendering', () => {
+      it('shoult parse Errors thrown during render', async () => {
+        spyOnDev(console, 'error');
+        spyOnProd(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');
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const testMarks = [creactCpuProfilerSample()];
+
+          // Mount and commit the app
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() =>
+            root.render(
+              <ErrorBoundary>
+                <ExampleThatThrows />
+              </ErrorBoundary>,
+            ),
+          );
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          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 the a component suspends while profiling
       // before the first commit is logged (so the lane-to-labels map will not yet exist).
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 5b1ec5636f07..02ba5c31c8c2 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -550,6 +550,16 @@ function processTimelineEvent(
         }
 
         currentProfilerData.schedulingEvents.push(stateUpdateEvent);
+      } else if (name.startsWith('--error-')) {
+        const [componentName, phase, message] = name.substr(8).split('-');
+
+        currentProfilerData.thrownErrors.push({
+          componentName,
+          message,
+          phase: ((phase: any): Phase),
+          timestamp: startTime,
+          type: 'thrown-error',
+        });
       } // eslint-disable-line brace-style
 
       // React Events - suspense
@@ -865,6 +875,7 @@ export default async function preprocessData(
     snapshots: [],
     startTime: 0,
     suspenseEvents: [],
+    thrownErrors: [],
   };
 
   // Sort `timeline`. JSON Array Format trace events need not be ordered. See:
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 073f4e1fbff1..ff68f3435e5f 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -65,6 +65,14 @@ export type SuspenseEvent = {|
   +type: 'suspense',
 |};
 
+export type ThrownError = {|
+  +componentName?: string,
+  +message: string,
+  +phase: Phase,
+  +timestamp: Milliseconds,
+  +type: 'thrown-error',
+|};
+
 export type SchedulingEvent =
   | ReactScheduleRenderEvent
   | ReactScheduleStateUpdateEvent
@@ -175,6 +183,7 @@ export type ReactProfilerData = {|
   snapshots: Snapshot[],
   startTime: number,
   suspenseEvents: SuspenseEvent[],
+  thrownErrors: ThrownError[],
 |};
 
 export type ReactHoverContextInfo = {|
@@ -186,5 +195,6 @@ export type ReactHoverContextInfo = {|
   schedulingEvent: SchedulingEvent | null,
   suspenseEvent: SuspenseEvent | null,
   snapshot: Snapshot | null,
+  thrownError: ThrownError | null,
   userTimingMark: UserTimingMark | null,
 |};
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 29d805890ded..60ce987e267f 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -177,9 +177,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
     '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
     '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
+    '--color-scheduling-profiler-thrown-error': '#ee1638',
+    '--color-scheduling-profiler-thrown-error-hover': '#da1030',
     '--color-scheduling-profiler-text-color': '#000000',
     '--color-scheduling-profiler-text-dim-color': '#ccc',
-    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scheduling-profiler-react-work-border': '#eeeeee',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
@@ -316,9 +318,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
     '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
     '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
+    '--color-scheduling-profiler-thrown-error': '#fb3655',
+    '--color-scheduling-profiler-thrown-error-hover': '#f82042',
     '--color-scheduling-profiler-text-color': '#282c34',
     '--color-scheduling-profiler-text-dim-color': '#555b66',
-    '--color-scheduling-profiler-react-work-border': '#ffffff',
+    '--color-scheduling-profiler-react-work-border': '#3d424a',
     '--color-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',

From 029fdcebbfec51a28af27cd390dff8668bf136cf Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 24 Sep 2021 13:45:46 -0400
Subject: [PATCH 0906/1603] root.hydrate -> root.isDehydrated (#22420)

I think this naming is a bit clearer. It means the root is currently
showing server rendered content that needs to be hydrated.

A dehydrated root is conceptually the same as what we call dehydrated
Suspense boundary, so this makes the naming of the root align with the
naming of subtrees.
---
 packages/react-dom/src/events/ReactDOMEventListener.js    | 2 +-
 packages/react-dom/src/events/ReactDOMEventReplaying.js   | 2 +-
 packages/react-reconciler/src/ReactFiberBeginWork.new.js  | 2 +-
 packages/react-reconciler/src/ReactFiberBeginWork.old.js  | 2 +-
 packages/react-reconciler/src/ReactFiberCommitWork.new.js | 8 ++++----
 packages/react-reconciler/src/ReactFiberCommitWork.old.js | 8 ++++----
 .../react-reconciler/src/ReactFiberCompleteWork.new.js    | 2 +-
 .../react-reconciler/src/ReactFiberCompleteWork.old.js    | 2 +-
 packages/react-reconciler/src/ReactFiberReconciler.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberReconciler.old.js | 2 +-
 packages/react-reconciler/src/ReactFiberRoot.new.js       | 2 +-
 packages/react-reconciler/src/ReactFiberRoot.old.js       | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js   | 8 ++++----
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js   | 8 ++++----
 packages/react-reconciler/src/ReactInternalTypes.js       | 2 +-
 15 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index d688521726c0..dfe3c2e3c00c 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -264,7 +264,7 @@ export function attemptToDispatchEvent(
         targetInst = null;
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (root.hydrate) {
+        if (root.isDehydrated) {
           // If this happens during a replay something went wrong and it might block
           // the whole system.
           return getContainerFromFiber(nearestMounted);
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 0587899fd8bd..eab9b4650c10 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -399,7 +399,7 @@ function attemptExplicitHydrationTarget(
         }
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (root.hydrate) {
+        if (root.isDehydrated) {
           queuedTarget.blockedOn = getContainerFromFiber(nearestMounted);
           // We don't currently have a way to increase the priority of
           // a root other than sync.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 9ad53ec00f27..6097ec4ea1fe 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1295,7 +1295,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     resetHydrationState();
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
-  if (root.hydrate && enterHydrationState(workInProgress)) {
+  if (root.isDehydrated && enterHydrationState(workInProgress)) {
     // If we don't have any current children this might be the first pass.
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index bef7863638ff..9779c6fb528f 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1295,7 +1295,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     resetHydrationState();
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
-  if (root.hydrate && enterHydrationState(workInProgress)) {
+  if (root.isDehydrated && enterHydrationState(workInProgress)) {
     // If we don't have any current children this might be the first pass.
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index db46978eb2c6..699c6867fa10 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1827,9 +1827,9 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case HostRoot: {
         if (supportsHydration) {
           const root: FiberRoot = finishedWork.stateNode;
-          if (root.hydrate) {
+          if (root.isDehydrated) {
             // We've just hydrated. No need to hydrate again.
-            root.hydrate = false;
+            root.isDehydrated = false;
             commitHydratedContainer(root.containerInfo);
           }
         }
@@ -1933,9 +1933,9 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case HostRoot: {
       if (supportsHydration) {
         const root: FiberRoot = finishedWork.stateNode;
-        if (root.hydrate) {
+        if (root.isDehydrated) {
           // We've just hydrated. No need to hydrate again.
-          root.hydrate = false;
+          root.isDehydrated = false;
           commitHydratedContainer(root.containerInfo);
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index e0131080a32f..53294e67498b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1827,9 +1827,9 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case HostRoot: {
         if (supportsHydration) {
           const root: FiberRoot = finishedWork.stateNode;
-          if (root.hydrate) {
+          if (root.isDehydrated) {
             // We've just hydrated. No need to hydrate again.
-            root.hydrate = false;
+            root.isDehydrated = false;
             commitHydratedContainer(root.containerInfo);
           }
         }
@@ -1933,9 +1933,9 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case HostRoot: {
       if (supportsHydration) {
         const root: FiberRoot = finishedWork.stateNode;
-        if (root.hydrate) {
+        if (root.isDehydrated) {
           // We've just hydrated. No need to hydrate again.
-          root.hydrate = false;
+          root.isDehydrated = false;
           commitHydratedContainer(root.containerInfo);
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 1382439f1ee7..03136ce30ba7 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -867,7 +867,7 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!fiberRoot.hydrate) {
+        } else if (!fiberRoot.isDehydrated) {
           // 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
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 746e3d4b572d..1155a817d61b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -867,7 +867,7 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!fiberRoot.hydrate) {
+        } else if (!fiberRoot.isDehydrated) {
           // 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
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 90503a183d94..38f9955657dd 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -353,7 +353,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (root.hydrate) {
+      if (root.isDehydrated) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 2608bc260264..3c0ae637529a 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -353,7 +353,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (root.hydrate) {
+      if (root.isDehydrated) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index e96b12344d09..db012ad1db19 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -39,7 +39,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
-  this.hydrate = hydrate;
+  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index b6e198ba2e00..03332fd54561 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -39,7 +39,7 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
-  this.hydrate = hydrate;
+  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index dbeb72b85632..d1a11a1b0d04 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -859,8 +859,8 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
 
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
-  if (root.hydrate) {
-    root.hydrate = false;
+  if (root.isDehydrated) {
+    root.isDehydrated = false;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
@@ -1076,8 +1076,8 @@ function performSyncWorkOnRoot(root) {
 
     // If an error occurred during hydration,
     // discard server response and fall back to client side render.
-    if (root.hydrate) {
-      root.hydrate = false;
+    if (root.isDehydrated) {
+      root.isDehydrated = false;
       if (__DEV__) {
         errorHydratingContainer(root.containerInfo);
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index af9e293d712a..233ec1a00d9a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -859,8 +859,8 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
 
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
-  if (root.hydrate) {
-    root.hydrate = false;
+  if (root.isDehydrated) {
+    root.isDehydrated = false;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
@@ -1076,8 +1076,8 @@ function performSyncWorkOnRoot(root) {
 
     // If an error occurred during hydration,
     // discard server response and fall back to client side render.
-    if (root.hydrate) {
-      root.hydrate = false;
+    if (root.isDehydrated) {
+      root.isDehydrated = false;
       if (__DEV__) {
         errorHydratingContainer(root.containerInfo);
       }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 673298b8da3d..f079b3e8f2b9 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -212,7 +212,7 @@ type BaseFiberRootProperties = {|
   context: Object | null,
   pendingContext: Object | null,
   // Determines if we should attempt to hydrate on the initial mount
-  +hydrate: boolean,
+  +isDehydrated: boolean,
 
   // Used by useMutableSource hook to avoid tearing during hydration.
   mutableSourceEagerHydrationData?: Array<

From 04ccc01d967091f441f08177a5078cc6034c2a9e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 24 Sep 2021 13:47:19 -0400
Subject: [PATCH 0907/1603] Hydration errors should force a client render
 (#22416)

* Refactor throwException control flow

I'm about to add more branches to the Suspense-related logic in
`throwException`, so before I do, I split some of the steps into
separate functions so that later I can use them in multiple places.

This commit does not change any program behavior, only the control flow
surrounding existing code.

* Hydration errors should force a client render

If something errors during hydration, we should try rendering again
without hydrating.

We'll find the nearest Suspense boundary and force it to client render,
discarding the server-rendered content.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 259 +++++++++
 .../src/ReactFiberBeginWork.new.js            |   9 +
 .../src/ReactFiberBeginWork.old.js            |   9 +
 .../react-reconciler/src/ReactFiberFlags.js   |  53 +-
 .../src/ReactFiberThrow.new.js                | 523 ++++++++++--------
 .../src/ReactFiberThrow.old.js                | 523 ++++++++++--------
 6 files changed, 906 insertions(+), 470 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index edf581402314..dd43cbd20d27 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1783,4 +1783,263 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>client</div>);
     expect(ref.current).toEqual(serverRenderedDiv);
   });
+
+  // @gate supportsNativeUseSyncExternalStore
+  // @gate experimental
+  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.unstable_yieldValue(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(async () => {
+        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+          <App />,
+          writable,
+        );
+        startWriting();
+      });
+      expect(Scheduler).toHaveYielded(['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;
+      ReactDOM.hydrateRoot(container, <App />);
+
+      expect(Scheduler).toFlushAndYield(['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);
+    },
+  );
+
+  // @gate experimental
+  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.unstable_yieldValue('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(async () => {
+        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+          <App />,
+          writable,
+        );
+        startWriting();
+      });
+      expect(Scheduler).toHaveYielded(['Yay!']);
+
+      // Hydrate the tree. Child will throw during render.
+      isClient = true;
+      ReactDOM.hydrateRoot(container, <App />);
+
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('Oops!');
+    },
+  );
+
+  // @gate supportsNativeUseSyncExternalStore
+  // @gate experimental
+  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.unstable_yieldValue(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(async () => {
+        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+          <App />,
+          writable,
+        );
+        startWriting();
+      });
+      expect(Scheduler).toHaveYielded(['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;
+      ReactDOM.hydrateRoot(container, <App />);
+
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span />
+          Loading...
+          <span />
+        </div>,
+      );
+
+      await act(async () => {
+        resolveText('Yay!');
+      });
+      expect(Scheduler).toFlushAndYield(['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);
+    },
+  );
 });
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6097ec4ea1fe..6ad63ae763c2 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -74,6 +74,7 @@ import {
   ForceUpdateForLegacySuspense,
   StaticMask,
   ShouldCapture,
+  ForceClientRender,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -2081,6 +2082,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
               prevState,
               renderLanes,
             );
+          } else if (workInProgress.flags & ForceClientRender) {
+            // Something errored during hydration. Try again without hydrating.
+            workInProgress.flags &= ~ForceClientRender;
+            return retrySuspenseComponentWithoutHydrating(
+              current,
+              workInProgress,
+              renderLanes,
+            );
           } else if (
             (workInProgress.memoizedState: null | SuspenseState) !== null
           ) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 9779c6fb528f..ffa753593e1a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -74,6 +74,7 @@ import {
   ForceUpdateForLegacySuspense,
   StaticMask,
   ShouldCapture,
+  ForceClientRender,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -2081,6 +2082,14 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
               prevState,
               renderLanes,
             );
+          } else if (workInProgress.flags & ForceClientRender) {
+            // Something errored during hydration. Try again without hydrating.
+            workInProgress.flags &= ~ForceClientRender;
+            return retrySuspenseComponentWithoutHydrating(
+              current,
+              workInProgress,
+              renderLanes,
+            );
           } else if (
             (workInProgress.memoizedState: null | SuspenseState) !== null
           ) {
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 13f843ad8060..a82278222bf0 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,53 +12,54 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b000000000000000000000000;
-export const PerformedWork = /*                */ 0b000000000000000000000001;
+export const NoFlags = /*                      */ 0b0000000000000000000000000;
+export const PerformedWork = /*                */ 0b0000000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b000000000000000000000010;
-export const Update = /*                       */ 0b000000000000000000000100;
+export const Placement = /*                    */ 0b0000000000000000000000010;
+export const Update = /*                       */ 0b0000000000000000000000100;
 export const PlacementAndUpdate = /*           */ Placement | Update;
-export const Deletion = /*                     */ 0b000000000000000000001000;
-export const ChildDeletion = /*                */ 0b000000000000000000010000;
-export const ContentReset = /*                 */ 0b000000000000000000100000;
-export const Callback = /*                     */ 0b000000000000000001000000;
-export const DidCapture = /*                   */ 0b000000000000000010000000;
-export const Ref = /*                          */ 0b000000000000000100000000;
-export const Snapshot = /*                     */ 0b000000000000001000000000;
-export const Passive = /*                      */ 0b000000000000010000000000;
-export const Hydrating = /*                    */ 0b000000000000100000000000;
+export const Deletion = /*                     */ 0b0000000000000000000001000;
+export const ChildDeletion = /*                */ 0b0000000000000000000010000;
+export const ContentReset = /*                 */ 0b0000000000000000000100000;
+export const Callback = /*                     */ 0b0000000000000000001000000;
+export const DidCapture = /*                   */ 0b0000000000000000010000000;
+export const ForceClientRender = /*            */ 0b0000000000000000100000000;
+export const Ref = /*                          */ 0b0000000000000001000000000;
+export const Snapshot = /*                     */ 0b0000000000000010000000000;
+export const Passive = /*                      */ 0b0000000000000100000000000;
+export const Hydrating = /*                    */ 0b0000000000001000000000000;
 export const HydratingAndUpdate = /*           */ Hydrating | Update;
-export const Visibility = /*                   */ 0b000000000001000000000000;
-export const StoreConsistency = /*             */ 0b000000000010000000000000;
+export const Visibility = /*                   */ 0b0000000000010000000000000;
+export const StoreConsistency = /*             */ 0b0000000000100000000000000;
 
 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 = /*               */ 0b000000000011111111111111;
+export const HostEffectMask = /*               */ 0b0000000000111111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b000000000100000000000000;
-export const ShouldCapture = /*                */ 0b000000001000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b000000010000000000000000;
-export const DidPropagateContext = /*          */ 0b000000100000000000000000;
-export const NeedsPropagation = /*             */ 0b000001000000000000000000;
+export const Incomplete = /*                   */ 0b0000000001000000000000000;
+export const ShouldCapture = /*                */ 0b0000000010000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b0000000100000000000000000;
+export const DidPropagateContext = /*          */ 0b0000001000000000000000000;
+export const NeedsPropagation = /*             */ 0b0000010000000000000000000;
 
 // 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 RefStatic = /*                    */ 0b000010000000000000000000;
-export const LayoutStatic = /*                 */ 0b000100000000000000000000;
-export const PassiveStatic = /*                */ 0b001000000000000000000000;
+export const RefStatic = /*                    */ 0b0000100000000000000000000;
+export const LayoutStatic = /*                 */ 0b0001000000000000000000000;
+export const PassiveStatic = /*                */ 0b0010000000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b010000000000000000000000;
-export const MountPassiveDev = /*              */ 0b100000000000000000000000;
+export const MountLayoutDev = /*               */ 0b0100000000000000000000000;
+export const MountPassiveDev = /*              */ 0b1000000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 5b07409a7729..78e88f125a1a 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -32,6 +32,7 @@ import {
   ShouldCapture,
   LifecycleEffectMask,
   ForceUpdateForLegacySuspense,
+  ForceClientRender,
 } from './ReactFiberFlags';
 import {
   supportsPersistence,
@@ -78,6 +79,7 @@ import {
   mergeLanes,
   pickArbitraryLane,
 } from './ReactFiberLane.new';
+import {getIsHydrating} from './ReactFiberHydrationContext.new';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
@@ -160,35 +162,264 @@ function createClassErrorUpdate(
   return update;
 }
 
-function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {
-  // Attach a listener to the promise to "ping" the root and retry. But only if
-  // one does not already exist for the lanes we're currently rendering (which
-  // acts like a "thread ID" here).
-  let pingCache = root.pingCache;
-  let threadIDs;
-  if (pingCache === null) {
-    pingCache = root.pingCache = new PossiblyWeakMap();
-    threadIDs = new Set();
-    pingCache.set(wakeable, threadIDs);
-  } else {
-    threadIDs = pingCache.get(wakeable);
-    if (threadIDs === undefined) {
+function attachWakeableListeners(
+  suspenseBoundary: Fiber,
+  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.
+  if (suspenseBoundary.mode & ConcurrentMode) {
+    let pingCache = root.pingCache;
+    let threadIDs;
+    if (pingCache === null) {
+      pingCache = root.pingCache = new PossiblyWeakMap();
       threadIDs = new Set();
       pingCache.set(wakeable, threadIDs);
+    } else {
+      threadIDs = pingCache.get(wakeable);
+      if (threadIDs === undefined) {
+        threadIDs = new Set();
+        pingCache.set(wakeable, threadIDs);
+      }
     }
-  }
-  if (!threadIDs.has(lanes)) {
-    // 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);
+    if (!threadIDs.has(lanes)) {
+      // 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);
     }
-    wakeable.then(ping, ping);
   }
+
+  // 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").
+  const wakeables: Set<Wakeable> | null = (suspenseBoundary.updateQueue: any);
+  if (wakeables === null) {
+    const updateQueue = (new Set(): any);
+    updateQueue.add(wakeable);
+    suspenseBoundary.updateQueue = updateQueue;
+  } else {
+    wakeables.add(wakeable);
+  }
+}
+
+function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
+  if (enableLazyContextPropagation) {
+    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 (
+    (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 markNearestSuspenseBoundaryShouldCapture(
+  returnFiber: Fiber,
+  sourceFiber: Fiber,
+  root: FiberRoot,
+  rootRenderLanes: Lanes,
+): Fiber | null {
+  const hasInvisibleParentBoundary = hasSuspenseContext(
+    suspenseStackCursor.current,
+    (InvisibleParentSuspenseContext: SuspenseContext),
+  );
+  let node = returnFiber;
+  do {
+    if (
+      node.tag === SuspenseComponent &&
+      shouldCaptureSuspense(node, hasInvisibleParentBoundary)
+    ) {
+      // Found the nearest boundary.
+      const suspenseBoundary = node;
+
+      // 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 ((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 (supportsPersistence && enablePersistentOffscreenHostContainer) {
+            // Another legacy Suspense quirk. In persistent mode, if this is the
+            // initial mount, override the props of the host container to hide
+            // its contents.
+            const currentSuspenseBoundary = suspenseBoundary.alternate;
+            if (currentSuspenseBoundary === null) {
+              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+              const offscreenContainer = offscreenFiber.child;
+              if (offscreenContainer !== null) {
+                const children = offscreenContainer.memoizedProps.children;
+                const containerProps = getOffscreenContainerProps(
+                  'hidden',
+                  children,
+                );
+                offscreenContainer.pendingProps = containerProps;
+                offscreenContainer.memoizedProps = containerProps;
+              }
+            }
+          }
+
+          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(NoTimestamp, SyncLane);
+              update.tag = ForceUpdate;
+              enqueueUpdate(sourceFiber, update, SyncLane);
+            }
+          }
+
+          // 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;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+
+  // Could not find a Suspense boundary capable of capturing.
+  return null;
 }
 
 function throwException(
@@ -213,25 +444,9 @@ function throwException(
     typeof value === 'object' &&
     typeof value.then === 'function'
   ) {
-    if (enableLazyContextPropagation) {
-      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,
-        );
-      }
-    }
-
-    // This is a wakeable.
+    // This is a wakeable. The component suspended.
     const wakeable: Wakeable = (value: any);
+    resetSuspendedComponent(sourceFiber, rootRenderLanes);
 
     if (__DEV__) {
       if (enableDebugTracing) {
@@ -242,190 +457,54 @@ function throwException(
       }
     }
 
-    // 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 (
-      (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;
-      }
-    }
-
-    const hasInvisibleParentBoundary = hasSuspenseContext(
-      suspenseStackCursor.current,
-      (InvisibleParentSuspenseContext: SuspenseContext),
-    );
-
     // Schedule the nearest Suspense to re-render the timed out view.
-    let workInProgress = returnFiber;
-    do {
-      if (
-        workInProgress.tag === SuspenseComponent &&
-        shouldCaptureSuspense(workInProgress, hasInvisibleParentBoundary)
-      ) {
-        // Found the nearest boundary.
-
-        // Stash the promise on the boundary fiber. If the boundary times out, we'll
-        // attach another listener to flip the boundary back to its normal state.
-        const wakeables: Set<Wakeable> = (workInProgress.updateQueue: any);
-        if (wakeables === null) {
-          const updateQueue = (new Set(): any);
-          updateQueue.add(wakeable);
-          workInProgress.updateQueue = updateQueue;
-        } else {
-          wakeables.add(wakeable);
-        }
-
-        if ((workInProgress.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 (workInProgress === 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.
-            workInProgress.flags |= ShouldCapture;
-          } else {
-            workInProgress.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 (supportsPersistence && enablePersistentOffscreenHostContainer) {
-              // Another legacy Suspense quirk. In persistent mode, if this is the
-              // initial mount, override the props of the host container to hide
-              // its contents.
-              const currentSuspenseBoundary = workInProgress.alternate;
-              if (currentSuspenseBoundary === null) {
-                const offscreenFiber: Fiber = (workInProgress.child: any);
-                const offscreenContainer = offscreenFiber.child;
-                if (offscreenContainer !== null) {
-                  const children = offscreenContainer.memoizedProps.children;
-                  const containerProps = getOffscreenContainerProps(
-                    'hidden',
-                    children,
-                  );
-                  offscreenContainer.pendingProps = containerProps;
-                  offscreenContainer.memoizedProps = containerProps;
-                }
-              }
-            }
-
-            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(NoTimestamp, SyncLane);
-                update.tag = ForceUpdate;
-                enqueueUpdate(sourceFiber, update, SyncLane);
-              }
-            }
-
-            // 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;
-        }
-        // 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.
-
-        attachPingListener(root, wakeable, rootRenderLanes);
-
-        workInProgress.flags |= ShouldCapture;
-        // TODO: I think we can remove this, since we now use `DidCapture` in
-        // the begin phase to prevent an early bailout.
-        workInProgress.lanes = rootRenderLanes;
+    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
+      returnFiber,
+      sourceFiber,
+      root,
+      rootRenderLanes,
+    );
+    if (suspenseBoundary !== null) {
+      attachWakeableListeners(
+        suspenseBoundary,
+        root,
+        wakeable,
+        rootRenderLanes,
+      );
+      return;
+    } else {
+      // No boundary was found. Fallthrough to error mode.
+      // TODO: Use invariant so the message is stripped in prod?
+      value = new Error(
+        (getComponentNameFromFiber(sourceFiber) || 'A React component') +
+          ' suspended while rendering, but no fallback UI was specified.\n' +
+          '\n' +
+          'Add a <Suspense fallback=...> component higher in the tree to ' +
+          'provide a loading indicator or placeholder to display.',
+      );
+    }
+  } else {
+    // This is a regular error, not a Suspense wakeable.
+    if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      // 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.
+      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
+      if (suspenseBoundary !== null) {
+        // Set a flag to indicate that we should try rendering the normal
+        // children again, not the fallback.
+        suspenseBoundary.flags |= ForceClientRender;
         return;
       }
-      // This boundary already captured during this render. Continue to the next
-      // boundary.
-      workInProgress = workInProgress.return;
-    } while (workInProgress !== null);
-    // No boundary was found. Fallthrough to error mode.
-    // TODO: Use invariant so the message is stripped in prod?
-    value = new Error(
-      (getComponentNameFromFiber(sourceFiber) || 'A React component') +
-        ' suspended while rendering, but no fallback UI was specified.\n' +
-        '\n' +
-        'Add a <Suspense fallback=...> component higher in the tree to ' +
-        'provide a loading indicator or placeholder to display.',
-    );
+    } else {
+      // Otherwise, fall through to the error path.
+    }
   }
 
   // We didn't find a boundary that could handle this type of exception. Start
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index dcba4b521aeb..d2d39793a3bc 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -32,6 +32,7 @@ import {
   ShouldCapture,
   LifecycleEffectMask,
   ForceUpdateForLegacySuspense,
+  ForceClientRender,
 } from './ReactFiberFlags';
 import {
   supportsPersistence,
@@ -78,6 +79,7 @@ import {
   mergeLanes,
   pickArbitraryLane,
 } from './ReactFiberLane.old';
+import {getIsHydrating} from './ReactFiberHydrationContext.old';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
@@ -160,35 +162,264 @@ function createClassErrorUpdate(
   return update;
 }
 
-function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {
-  // Attach a listener to the promise to "ping" the root and retry. But only if
-  // one does not already exist for the lanes we're currently rendering (which
-  // acts like a "thread ID" here).
-  let pingCache = root.pingCache;
-  let threadIDs;
-  if (pingCache === null) {
-    pingCache = root.pingCache = new PossiblyWeakMap();
-    threadIDs = new Set();
-    pingCache.set(wakeable, threadIDs);
-  } else {
-    threadIDs = pingCache.get(wakeable);
-    if (threadIDs === undefined) {
+function attachWakeableListeners(
+  suspenseBoundary: Fiber,
+  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.
+  if (suspenseBoundary.mode & ConcurrentMode) {
+    let pingCache = root.pingCache;
+    let threadIDs;
+    if (pingCache === null) {
+      pingCache = root.pingCache = new PossiblyWeakMap();
       threadIDs = new Set();
       pingCache.set(wakeable, threadIDs);
+    } else {
+      threadIDs = pingCache.get(wakeable);
+      if (threadIDs === undefined) {
+        threadIDs = new Set();
+        pingCache.set(wakeable, threadIDs);
+      }
     }
-  }
-  if (!threadIDs.has(lanes)) {
-    // 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);
+    if (!threadIDs.has(lanes)) {
+      // 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);
     }
-    wakeable.then(ping, ping);
   }
+
+  // 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").
+  const wakeables: Set<Wakeable> | null = (suspenseBoundary.updateQueue: any);
+  if (wakeables === null) {
+    const updateQueue = (new Set(): any);
+    updateQueue.add(wakeable);
+    suspenseBoundary.updateQueue = updateQueue;
+  } else {
+    wakeables.add(wakeable);
+  }
+}
+
+function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
+  if (enableLazyContextPropagation) {
+    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 (
+    (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 markNearestSuspenseBoundaryShouldCapture(
+  returnFiber: Fiber,
+  sourceFiber: Fiber,
+  root: FiberRoot,
+  rootRenderLanes: Lanes,
+): Fiber | null {
+  const hasInvisibleParentBoundary = hasSuspenseContext(
+    suspenseStackCursor.current,
+    (InvisibleParentSuspenseContext: SuspenseContext),
+  );
+  let node = returnFiber;
+  do {
+    if (
+      node.tag === SuspenseComponent &&
+      shouldCaptureSuspense(node, hasInvisibleParentBoundary)
+    ) {
+      // Found the nearest boundary.
+      const suspenseBoundary = node;
+
+      // 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 ((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 (supportsPersistence && enablePersistentOffscreenHostContainer) {
+            // Another legacy Suspense quirk. In persistent mode, if this is the
+            // initial mount, override the props of the host container to hide
+            // its contents.
+            const currentSuspenseBoundary = suspenseBoundary.alternate;
+            if (currentSuspenseBoundary === null) {
+              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+              const offscreenContainer = offscreenFiber.child;
+              if (offscreenContainer !== null) {
+                const children = offscreenContainer.memoizedProps.children;
+                const containerProps = getOffscreenContainerProps(
+                  'hidden',
+                  children,
+                );
+                offscreenContainer.pendingProps = containerProps;
+                offscreenContainer.memoizedProps = containerProps;
+              }
+            }
+          }
+
+          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(NoTimestamp, SyncLane);
+              update.tag = ForceUpdate;
+              enqueueUpdate(sourceFiber, update, SyncLane);
+            }
+          }
+
+          // 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;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+
+  // Could not find a Suspense boundary capable of capturing.
+  return null;
 }
 
 function throwException(
@@ -213,25 +444,9 @@ function throwException(
     typeof value === 'object' &&
     typeof value.then === 'function'
   ) {
-    if (enableLazyContextPropagation) {
-      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,
-        );
-      }
-    }
-
-    // This is a wakeable.
+    // This is a wakeable. The component suspended.
     const wakeable: Wakeable = (value: any);
+    resetSuspendedComponent(sourceFiber, rootRenderLanes);
 
     if (__DEV__) {
       if (enableDebugTracing) {
@@ -242,190 +457,54 @@ function throwException(
       }
     }
 
-    // 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 (
-      (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;
-      }
-    }
-
-    const hasInvisibleParentBoundary = hasSuspenseContext(
-      suspenseStackCursor.current,
-      (InvisibleParentSuspenseContext: SuspenseContext),
-    );
-
     // Schedule the nearest Suspense to re-render the timed out view.
-    let workInProgress = returnFiber;
-    do {
-      if (
-        workInProgress.tag === SuspenseComponent &&
-        shouldCaptureSuspense(workInProgress, hasInvisibleParentBoundary)
-      ) {
-        // Found the nearest boundary.
-
-        // Stash the promise on the boundary fiber. If the boundary times out, we'll
-        // attach another listener to flip the boundary back to its normal state.
-        const wakeables: Set<Wakeable> = (workInProgress.updateQueue: any);
-        if (wakeables === null) {
-          const updateQueue = (new Set(): any);
-          updateQueue.add(wakeable);
-          workInProgress.updateQueue = updateQueue;
-        } else {
-          wakeables.add(wakeable);
-        }
-
-        if ((workInProgress.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 (workInProgress === 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.
-            workInProgress.flags |= ShouldCapture;
-          } else {
-            workInProgress.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 (supportsPersistence && enablePersistentOffscreenHostContainer) {
-              // Another legacy Suspense quirk. In persistent mode, if this is the
-              // initial mount, override the props of the host container to hide
-              // its contents.
-              const currentSuspenseBoundary = workInProgress.alternate;
-              if (currentSuspenseBoundary === null) {
-                const offscreenFiber: Fiber = (workInProgress.child: any);
-                const offscreenContainer = offscreenFiber.child;
-                if (offscreenContainer !== null) {
-                  const children = offscreenContainer.memoizedProps.children;
-                  const containerProps = getOffscreenContainerProps(
-                    'hidden',
-                    children,
-                  );
-                  offscreenContainer.pendingProps = containerProps;
-                  offscreenContainer.memoizedProps = containerProps;
-                }
-              }
-            }
-
-            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(NoTimestamp, SyncLane);
-                update.tag = ForceUpdate;
-                enqueueUpdate(sourceFiber, update, SyncLane);
-              }
-            }
-
-            // 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;
-        }
-        // 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.
-
-        attachPingListener(root, wakeable, rootRenderLanes);
-
-        workInProgress.flags |= ShouldCapture;
-        // TODO: I think we can remove this, since we now use `DidCapture` in
-        // the begin phase to prevent an early bailout.
-        workInProgress.lanes = rootRenderLanes;
+    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
+      returnFiber,
+      sourceFiber,
+      root,
+      rootRenderLanes,
+    );
+    if (suspenseBoundary !== null) {
+      attachWakeableListeners(
+        suspenseBoundary,
+        root,
+        wakeable,
+        rootRenderLanes,
+      );
+      return;
+    } else {
+      // No boundary was found. Fallthrough to error mode.
+      // TODO: Use invariant so the message is stripped in prod?
+      value = new Error(
+        (getComponentNameFromFiber(sourceFiber) || 'A React component') +
+          ' suspended while rendering, but no fallback UI was specified.\n' +
+          '\n' +
+          'Add a <Suspense fallback=...> component higher in the tree to ' +
+          'provide a loading indicator or placeholder to display.',
+      );
+    }
+  } else {
+    // This is a regular error, not a Suspense wakeable.
+    if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      // 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.
+      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
+      if (suspenseBoundary !== null) {
+        // Set a flag to indicate that we should try rendering the normal
+        // children again, not the fallback.
+        suspenseBoundary.flags |= ForceClientRender;
         return;
       }
-      // This boundary already captured during this render. Continue to the next
-      // boundary.
-      workInProgress = workInProgress.return;
-    } while (workInProgress !== null);
-    // No boundary was found. Fallthrough to error mode.
-    // TODO: Use invariant so the message is stripped in prod?
-    value = new Error(
-      (getComponentNameFromFiber(sourceFiber) || 'A React component') +
-        ' suspended while rendering, but no fallback UI was specified.\n' +
-        '\n' +
-        'Add a <Suspense fallback=...> component higher in the tree to ' +
-        'provide a loading indicator or placeholder to display.',
-    );
+    } else {
+      // Otherwise, fall through to the error path.
+    }
   }
 
   // We didn't find a boundary that could handle this type of exception. Start

From 3746eaf985dd92f8aa5f5658941d07b6b855e9d9 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Fri, 24 Sep 2021 23:22:21 +0530
Subject: [PATCH 0908/1603] Packages/React/src/ReactLazy ---> changing -1 to
 unintialized (#22421)

---
 packages/react/src/ReactLazy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index a132e1b5691f..6bfa6cbdec41 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -123,7 +123,7 @@ export function lazy<T>(
 ): LazyComponent<T, Payload<T>> {
   const payload: Payload<T> = {
     // We use these fields to store the result.
-    _status: -1,
+    _status: Uninitialized,
     _result: ctor,
   };
 

From c9d64e5f4c2b7cc70a618eec78900dbfd6d201e8 Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Mon, 27 Sep 2021 16:26:56 +0330
Subject: [PATCH 0909/1603] add hasOwnProperty to devTools backend (#22437)

---
 .../react-devtools-shared/src/backend/renderer.js   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 19279cbaf565..78953e72979a 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -85,6 +85,7 @@ import {format} from './utils';
 import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
+import hasOwnProperty from 'shared/hasOwnProperty';
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -1380,13 +1381,13 @@ export function attach(
       return false;
     }
     const {deps} = memoizedState;
-    const hasOwnProperty = Object.prototype.hasOwnProperty.bind(memoizedState);
+    const boundHasOwnProperty = hasOwnProperty.bind(memoizedState);
     return (
-      hasOwnProperty('create') &&
-      hasOwnProperty('destroy') &&
-      hasOwnProperty('deps') &&
-      hasOwnProperty('next') &&
-      hasOwnProperty('tag') &&
+      boundHasOwnProperty('create') &&
+      boundHasOwnProperty('destroy') &&
+      boundHasOwnProperty('deps') &&
+      boundHasOwnProperty('next') &&
+      boundHasOwnProperty('tag') &&
       (deps === null || isArray(deps))
     );
   }

From 05726d72ccd3940a927462d520d0d2674012ad85 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 27 Sep 2021 11:44:39 -0400
Subject: [PATCH 0910/1603] [Fix] Errors should not "unsuspend" a transition
 (#22423)

If an error is thrown during a transition where we would have otherwise
suspended without showing a fallback (i.e. during a refresh), we should
still suspend.

The current behavior is that the error will force the fallback to
appear, even if it's completely unrelated to the component that errored,
which breaks the contract of `startTransition`.
---
 .../src/ReactFiberWorkLoop.new.js             |   5 +-
 .../src/ReactFiberWorkLoop.old.js             |   5 +-
 .../ReactConcurrentErrorRecovery-test.js      | 401 ++++++++++++++++++
 3 files changed, 407 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index d1a11a1b0d04..0ed934f00ebd 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1445,7 +1445,8 @@ export function renderDidSuspend(): void {
 export function renderDidSuspendDelayIfPossible(): void {
   if (
     workInProgressRootExitStatus === RootIncomplete ||
-    workInProgressRootExitStatus === RootSuspended
+    workInProgressRootExitStatus === RootSuspended ||
+    workInProgressRootExitStatus === RootErrored
   ) {
     workInProgressRootExitStatus = RootSuspendedWithDelay;
   }
@@ -1469,7 +1470,7 @@ export function renderDidSuspendDelayIfPossible(): void {
 }
 
 export function renderDidError() {
-  if (workInProgressRootExitStatus !== RootCompleted) {
+  if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {
     workInProgressRootExitStatus = RootErrored;
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 233ec1a00d9a..438dce8b13fb 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1445,7 +1445,8 @@ export function renderDidSuspend(): void {
 export function renderDidSuspendDelayIfPossible(): void {
   if (
     workInProgressRootExitStatus === RootIncomplete ||
-    workInProgressRootExitStatus === RootSuspended
+    workInProgressRootExitStatus === RootSuspended ||
+    workInProgressRootExitStatus === RootErrored
   ) {
     workInProgressRootExitStatus = RootSuspendedWithDelay;
   }
@@ -1469,7 +1470,7 @@ export function renderDidSuspendDelayIfPossible(): void {
 }
 
 export function renderDidError() {
-  if (workInProgressRootExitStatus !== RootCompleted) {
+  if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {
     workInProgressRootExitStatus = RootErrored;
   }
 }
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 000000000000..b96882684592
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
@@ -0,0 +1,401 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Suspense;
+let getCacheForType;
+let startTransition;
+
+let caches;
+let seededCache;
+
+describe('ReactConcurrentErrorRecovery', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('jest-react').act;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+
+    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.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(text);
+    return text;
+  }
+
+  function AsyncText({text, showVersion}) {
+    const version = readText(text);
+    const fullText = showVersion ? `${text} [v${version}]` : text;
+    Scheduler.unstable_yieldValue(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 enableCache
+  test('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(async () => {
+      root.render(<App step={1} />);
+    });
+    expect(Scheduler).toHaveYielded(['A1', 'B1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // Start a refresh transition
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App step={2} />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      '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(async () => {
+      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.
+    if (gate(flags => flags.replayFailedUnitOfWorkWithInvokeGuardedCallback)) {
+      expect(Scheduler).toHaveYielded([
+        'Suspend! [A2]',
+        'Loading...',
+
+        'Error! [B2]',
+        // This extra log happens when we replay the error
+        // in invokeGuardedCallback
+        'Error! [B2]',
+        'Oops!',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'Suspend! [A2]',
+        'Loading...',
+        'Error! [B2]',
+        'Oops!',
+      ]);
+    }
+    // Remain on previous screen.
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // A finishes loading.
+    await act(async () => {
+      resolveText('A2');
+    });
+    if (gate(flags => flags.replayFailedUnitOfWorkWithInvokeGuardedCallback)) {
+      expect(Scheduler).toHaveYielded([
+        'A2',
+        'Error! [B2]',
+        // This extra log happens when we replay the error
+        // in invokeGuardedCallback
+        'Error! [B2]',
+        'Oops!',
+
+        'A2',
+        'Error! [B2]',
+        // This extra log happens when we replay the error
+        // in invokeGuardedCallback
+        'Error! [B2]',
+        'Oops!',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        '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 enableCache
+  test('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(async () => {
+      root.render(<App step={1} />);
+    });
+    expect(Scheduler).toHaveYielded(['A1', 'B1']);
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // Start a refresh transition
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App step={2} />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      '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(async () => {
+      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.
+    if (gate(flags => flags.replayFailedUnitOfWorkWithInvokeGuardedCallback)) {
+      expect(Scheduler).toHaveYielded([
+        'Error! [A2]',
+        // This extra log happens when we replay the error
+        // in invokeGuardedCallback
+        'Error! [A2]',
+        'Oops!',
+
+        'Suspend! [B2]',
+        'Loading...',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        'Error! [A2]',
+        'Oops!',
+        'Suspend! [B2]',
+        'Loading...',
+      ]);
+    }
+    // Remain on previous screen.
+    expect(root).toMatchRenderedOutput('A1B1');
+
+    // B finishes loading.
+    await act(async () => {
+      resolveText('B2');
+    });
+    if (gate(flags => flags.replayFailedUnitOfWorkWithInvokeGuardedCallback)) {
+      expect(Scheduler).toHaveYielded([
+        'Error! [A2]',
+        // This extra log happens when we replay the error
+        // in invokeGuardedCallback
+        'Error! [A2]',
+        'Oops!',
+        'B2',
+
+        'Error! [A2]',
+        // This extra log happens when we replay the error
+        // in invokeGuardedCallback
+        'Error! [A2]',
+        'Oops!',
+        'B2',
+      ]);
+    } else {
+      expect(Scheduler).toHaveYielded([
+        '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');
+  });
+});

From c88fb49d37fd01024e0a254a37b7810d107bdd1d Mon Sep 17 00:00:00 2001
From: Justin Grant <justingrant@users.noreply.github.com>
Date: Mon, 27 Sep 2021 10:05:07 -0700
Subject: [PATCH 0911/1603] Improve DEV errors if string coercion throws
 (Temporal.*, Symbol, etc.) (#22064)

* Revise ESLint rules for string coercion

Currently, react uses `'' + value` to coerce mixed values to strings.
This code will throw for Temporal objects or symbols.

To make string-coercion safer and to improve user-facing error messages,
This commit adds a new ESLint rule called `safe-string-coercion`.

This rule has two modes: a production mode and a non-production mode.
* If the `isProductionUserAppCode` option is true, then `'' + value`
  coercions are allowed (because they're faster, although they may
  throw) and `String(value)` coercions are disallowed. Exception:
  when building error messages or running DEV-only code in prod
  files, `String()` should be used because it won't throw.
* If the `isProductionUserAppCode` option is false, then `'' + value`
  coercions are disallowed (because they may throw, and in non-prod
  code it's not worth the risk) and `String(value)` are allowed.

Production mode is used for all files which will be bundled with
developers' userland apps. Non-prod mode is used for all other React
code: tests, DEV blocks, devtools extension, etc.

In production mode, in addiiton to flagging `String(value)` calls,
the rule will also flag `'' + value` or `value + ''` coercions that may
throw. The rule is smart enough to silence itself in the following
"will never throw" cases:
* When the coercion is wrapped in a `typeof` test that restricts to safe
  (non-symbol, non-object) types. Example:
    if (typeof value === 'string' || typeof value === 'number') {
      thisWontReport('' + value);
    }
* When what's being coerced is a unary function result, because unary
   functions never return an object or a symbol.
* When the coerced value is a commonly-used numeric identifier:
  `i`, `idx`, or `lineNumber`.
* When the statement immeidately before the coercion is a DEV-only
  call to a function from shared/CheckStringCoercion.js. This call is a
  no-op in production, but in DEV it will show a console error
  explaining the problem, then will throw right after a long explanatory
  code comment so that debugger users will have an idea what's going on.
  The check function call must be in the following format:
    if (__DEV__) {
      checkXxxxxStringCoercion(value);
    };

Manually disabling the rule is usually not necessary because almost all
prod use of the `'' + value` pattern falls into one of the categories
above. But in the rare cases where the rule isn't smart enough to detect
safe usage (e.g. when a coercion is inside a nested ternary operator),
manually disabling the rule will be needed.

The rule should also be manually disabled in prod error handling code
where `String(value)` should be used for coercions, because it'd be
bad to throw while building an error message or stack trace!

The prod and non-prod modes have differentiated error messages to
explain how to do a proper coercion in that mode.

If a production check call is needed but is missing or incorrect
(e.g. not in a DEV block or not immediately before the coercion), then
a context-sensitive error message will be reported so that developers
can figure out what's wrong and how to fix the problem.

Because string coercions are now handled by the `safe-string-coercion`
rule, the `no-primitive-constructor` rule no longer flags `String()`
usage. It still flags `new String(value)` because that usage is almost
always a bug.

* Add DEV-only string coercion check functions

This commit adds DEV-only functions to check whether coercing
values to strings using the `'' + value` pattern will throw. If it will
throw, these functions will:
1. Display a console error with a friendly error message describing
   the problem and the developer can fix it.
2. Perform the coercion, which will throw. Right before the line where
   the throwing happens, there's a long code comment that will help
   debugger users (or others looking at the exception call stack) figure
   out what happened and how to fix the problem.

One of these check functions should be called before all string coercion
of user-provided values, except when the the coercion is guaranteed not
to throw, e.g.
* if inside a typeof check like `if (typeof value === 'string')`
* if coercing the result of a unary function like `+value` or `value++`
* if coercing a variable named in a whitelist of numeric identifiers:
  `i`, `idx`, or `lineNumber`.

The new `safe-string-coercion` internal ESLint rule enforces that
these check functions are called when they are required.

Only use these check functions in production code that will be bundled
with user apps.  For non-prod code (and for production error-handling
code), use `String(value)` instead which may be a little slower but will
never throw.

* Add failing tests for string coercion

Added failing tests to verify:
* That input, select, and textarea elements with value and defaultValue
  set to Temporal-like objects which will throw when coerced to string
  using the `'' + value` pattern.
* That text elements will throw for Temporal-like objects
* That dangerouslySetInnerHTML will *not* throw for Temporal-like
  objects because this value is not cast to a string before passing to
  the DOM.
* That keys that are Temporal-like objects will throw

All tests above validate the friendly error messages thrown.

* Use `String(value)` for coercion in non-prod files

This commit switches non-production code from `'' + value` (which
throws for Temporal objects and symbols) to instead use `String(value)`
which won't throw for these or other future plus-phobic types.

"Non-produciton code" includes anything not bundled into user apps:
* Tests and test utilities. Note that I didn't change legacy React
  test fixtures because I assumed it was good for those files to
  act just like old React, including coercion behavior.
* Build scripts
* Dev tools package - In addition to switching to `String`, I also
  removed special-case code for coercing symbols which is now
  unnecessary.

* Add DEV-only string coercion checks to prod files

This commit adds DEV-only function calls to to check if string coercion
using `'' + value` will throw, which it will if the value is a Temporal
object or a symbol because those types can't be added with `+`.

If it will throw, then in DEV these checks will show a console error
to help the user undertsand what went wrong and how to fix the
problem. After emitting the console error, the check functions will
retry the coercion which will throw with a call stack that's easy (or
at least easier!) to troubleshoot because the exception happens right
after a long comment explaining the issue. So whether the user is in
a debugger, looking at the browser console, or viewing the in-browser
DEV call stack, it should be easy to understand and fix the problem.

In most cases, the safe-string-coercion ESLint rule is smart enough to
detect when a coercion is safe. But in rare cases (e.g. when a coercion
is inside a ternary) this rule will have to be manually disabled.

This commit also switches error-handling code to use `String(value)`
for coercion, because it's bad to crash when you're trying to build
an error message or a call stack!  Because `String()` is usually
disallowed by the `safe-string-coercion` ESLint rule in production
code, the rule must be disabled when `String()` is used.
---
 .eslintrc.js                                  |  13 +-
 dangerfile.js                                 |   4 +-
 .../fixtures/error-handling/index.js          |   2 +-
 .../ReactHooksInspectionIntegration-test.js   |   4 +-
 .../react-devtools-extensions/src/main.js     |   2 +-
 .../src/backend/legacy/renderer.js            |   2 +-
 .../src/backend/renderer.js                   |   2 +-
 .../src/backend/utils.js                      |  13 +-
 .../views/ErrorBoundary/ErrorBoundary.js      |   2 +-
 .../src/devtools/views/utils.js               |   4 +-
 packages/react-devtools-shared/src/hook.js    |  12 +-
 .../src/hooks/SourceMapMetadataConsumer.js    |   1 -
 packages/react-devtools-shared/src/utils.js   |   2 +-
 .../src/__tests__/ReactDOMAttribute-test.js   |  21 ++
 .../src/__tests__/ReactDOMComponent-test.js   |  48 ++-
 .../src/__tests__/ReactDOMInput-test.js       |  98 ++++-
 .../src/__tests__/ReactDOMSelect-test.js      | 264 ++++++++++++++
 .../ReactDOMServerIntegrationHooks-test.js    |  10 +-
 ...erIntegrationUntrustedURL-test.internal.js |   5 +
 .../__tests__/ReactDOMTextComponent-test.js   |  22 ++
 .../src/__tests__/ReactDOMTextarea-test.js    |  32 +-
 .../src/__tests__/ReactIdentity-test.js       |  29 ++
 .../src/__tests__/ReactMultiChildText-test.js |   4 +-
 .../src/client/DOMPropertyOperations.js       |  20 +
 .../react-dom/src/client/ReactDOMComponent.js |   4 +
 .../react-dom/src/client/ReactDOMInput.js     |   4 +
 .../react-dom/src/client/ToStringValue.js     |  10 +-
 .../src/client/inputValueTracking.js          |  11 +
 .../src/server/DOMMarkupOperations.js         |   4 +
 .../src/server/ReactDOMServerFormatConfig.js  |  35 ++
 .../src/server/ReactPartialRenderer.js        |  19 +
 .../src/server/escapeTextForBrowser.js        |   5 +
 .../src/shared/dangerousStyleValue.js         |   4 +
 .../src/test-utils/ReactTestUtils.js          |   2 +-
 .../src/createReactNoop.js                    |  17 +-
 .../src/ReactChildFiber.new.js                |   4 +
 .../src/ReactChildFiber.old.js                |   4 +
 packages/react-reconciler/src/ReactPortal.js  |   4 +
 .../src/__tests__/ReactCache-test.js          |   2 +-
 .../ReactHooksWithNoopRenderer-test.js        |  16 +-
 .../src/__tests__/ReactIncremental-test.js    |   4 +-
 .../src/__tests__/ReactMemo-test.js           |   2 +-
 .../src/__tests__/ReactPersistent-test.js     |   2 +-
 .../react-server/src/ReactFlightServer.js     |   8 +-
 .../src/ReactTestRenderer.js                  |   4 +
 packages/react/src/ReactChildren.js           |  16 +-
 packages/react/src/ReactElement.js            |  19 +
 packages/react/src/jsx/ReactJSXElement.js     |  13 +
 packages/shared/CheckStringCoercion.js        | 167 +++++++++
 packages/shared/consoleWithStackDev.js        |   3 +-
 ...no-primitive-constructors-test.internal.js |   8 +-
 .../safe-string-coercion-test.internal.js     | 265 ++++++++++++++
 scripts/eslint-rules/index.js                 |   1 +
 .../eslint-rules/no-primitive-constructors.js |  13 +-
 scripts/eslint-rules/safe-string-coercion.js  | 344 ++++++++++++++++++
 scripts/flow/runFlow.js                       |   4 +-
 scripts/merge-fork/merge-fork.js              |   4 +-
 scripts/rollup/build-all-release-channels.js  |   8 +-
 58 files changed, 1561 insertions(+), 85 deletions(-)
 create mode 100644 packages/shared/CheckStringCoercion.js
 create mode 100644 scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js
 create mode 100644 scripts/eslint-rules/safe-string-coercion.js

diff --git a/.eslintrc.js b/.eslintrc.js
index a155becfafb6..23d5ab76c32b 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -108,6 +108,10 @@ module.exports = {
     // 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/no-to-warn-dev-within-to-throw': ERROR,
     'react-internal/invariant-args': ERROR,
     'react-internal/warning-args': ERROR,
@@ -168,10 +172,17 @@ module.exports = {
         'packages/*/npm/**/*.js',
         'packages/dom-event-testing-library/**/*.js',
         'packages/react-devtools*/**/*.js',
+        'dangerfile.js',
+        'fixtures',
+        'packages/react-dom/src/test-utils/*.js',
       ],
       rules: {
         'react-internal/no-production-logging': OFF,
         'react-internal/warning-args': OFF,
+        'react-internal/safe-string-coercion': [
+          ERROR,
+          {isProductionUserAppCode: false},
+        ],
 
         // Disable accessibility checks
         'jsx-a11y/aria-role': OFF,
@@ -185,7 +196,7 @@ module.exports = {
     {
       files: [
         'scripts/eslint-rules/*.js',
-        'packages/eslint-plugin-react-hooks/src/*.js'
+        'packages/eslint-plugin-react-hooks/src/*.js',
       ],
       plugins: ['eslint-plugin'],
       rules: {
diff --git a/dangerfile.js b/dangerfile.js
index e6a6a82c8708..f612c80a7e54 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -102,8 +102,8 @@ function row(result) {
   let headSha;
   let baseSha;
   try {
-    headSha = (readFileSync(HEAD_DIR + '/COMMIT_SHA') + '').trim();
-    baseSha = (readFileSync(BASE_DIR + '/COMMIT_SHA') + '').trim();
+    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 " +
diff --git a/fixtures/dom/src/components/fixtures/error-handling/index.js b/fixtures/dom/src/components/fixtures/error-handling/index.js
index 5bbeec7de447..904bef4788c5 100644
--- a/fixtures/dom/src/components/fixtures/error-handling/index.js
+++ b/fixtures/dom/src/components/fixtures/error-handling/index.js
@@ -41,7 +41,7 @@ class ErrorBoundary extends React.Component {
       if (this.state.error) {
         return <p>Captured an error: {this.state.error.message}</p>;
       } else {
-        return <p>Captured an error: {'' + this.state.error}</p>;
+        return <p>Captured an error: {String(this.state.error)}</p>;
       }
     }
     if (this.state.shouldThrow) {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index b13bec22d213..013caecb11ba 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -615,7 +615,7 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
     expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect((tree[0].value + '').startsWith('c_')).toBe(true);
+    expect(String(tree[0].value).startsWith('c_')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,
@@ -646,7 +646,7 @@ describe('ReactHooksInspectionIntegration', () => {
     expect(tree[0].id).toEqual(0);
     expect(tree[0].isStateEditable).toEqual(false);
     expect(tree[0].name).toEqual('OpaqueIdentifier');
-    expect((tree[0].value + '').startsWith('c_')).toBe(true);
+    expect(String(tree[0].value).startsWith('c_')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 9d5b4da02e40..eb093fc51b78 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -94,7 +94,7 @@ function createPanelIfReactLoaded() {
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
-          name: '' + tabId,
+          name: String(tabId),
         });
         // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
         // so it makes no sense to handle it here.
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 24f30b87bc78..1f0aed404087 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -63,7 +63,7 @@ function getData(internalInstance: InternalInstance) {
   // != used deliberately here to catch undefined and null
   if (internalInstance._currentElement != null) {
     if (internalInstance._currentElement.key) {
-      key = '' + internalInstance._currentElement.key;
+      key = String(internalInstance._currentElement.key);
     }
 
     const elementType = internalInstance._currentElement.type;
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 78953e72979a..24a00583e7e6 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1848,7 +1848,7 @@ export function attach(
 
       // 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 : '' + key;
+      const keyString = key === null ? null : String(key);
       const keyStringID = getStringID(keyString);
 
       pushOperation(TREE_OPERATION_ADD);
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 4b40645595d1..09f821f4e187 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -166,11 +166,7 @@ export function format(
 ): string {
   const args = inputArgs.slice();
 
-  // Symbols cannot be concatenated with Strings.
-  let formatted: string =
-    typeof maybeMessage === 'symbol'
-      ? maybeMessage.toString()
-      : '' + maybeMessage;
+  let formatted: string = String(maybeMessage);
 
   // If the first argument is a string, check for substitutions.
   if (typeof maybeMessage === 'string') {
@@ -203,17 +199,14 @@ export function format(
   // Arguments that remain after formatting.
   if (args.length) {
     for (let i = 0; i < args.length; i++) {
-      const arg = args[i];
-
-      // Symbols cannot be concatenated with Strings.
-      formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+      formatted += ' ' + String(args[i]);
     }
   }
 
   // Update escaped %% values.
   formatted = formatted.replace(/%{2,2}/g, '%');
 
-  return '' + formatted;
+  return String(formatted);
 }
 
 export function isSynchronousXHRSupported(): boolean {
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index c7aa20dcd590..ea4f54b1a9b8 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -46,7 +46,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       error !== null &&
       error.hasOwnProperty('message')
         ? error.message
-        : '' + error;
+        : String(error);
 
     const callStack =
       typeof error === 'object' &&
diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
index b326996daa05..035d9f83a3bc 100644
--- a/packages/react-devtools-shared/src/devtools/views/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -19,8 +19,8 @@ export function alphaSortEntries(
 ): number {
   const a = entryA[0];
   const b = entryB[0];
-  if ('' + +a === a) {
-    if ('' + +b !== b) {
+  if (String(+a) === a) {
+    if (String(+b) !== b) {
       return -1;
     }
     return +a < +b ? -1 : 1;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 152b1dce8f8e..6f34f86132ab 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -180,10 +180,7 @@ export function installHook(target: any): DevToolsHook | null {
     const args = inputArgs.slice();
 
     // Symbols cannot be concatenated with Strings.
-    let formatted: string =
-      typeof maybeMessage === 'symbol'
-        ? maybeMessage.toString()
-        : '' + maybeMessage;
+    let formatted = String(maybeMessage);
 
     // If the first argument is a string, check for substitutions.
     if (typeof maybeMessage === 'string') {
@@ -216,17 +213,14 @@ export function installHook(target: any): DevToolsHook | null {
     // Arguments that remain after formatting.
     if (args.length) {
       for (let i = 0; i < args.length; i++) {
-        const arg = args[i];
-
-        // Symbols cannot be concatenated with Strings.
-        formatted += ' ' + (typeof arg === 'symbol' ? arg.toString() : arg);
+        formatted += ' ' + String(args[i]);
       }
     }
 
     // Update escaped %% values.
     formatted = formatted.replace(/%{2,2}/g, '%');
 
-    return '' + formatted;
+    return String(formatted);
   }
 
   let unpatchFn = null;
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
index 250192c7fa4b..4882afba9a9f 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
@@ -38,7 +38,6 @@ function normalizeSourcePath(
   const {sourceRoot} = map;
   let source = sourceInput;
 
-  // eslint-disable-next-line react-internal/no-primitive-constructors
   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.
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 7c9e2fbd25f8..9ec19e3afde4 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -834,7 +834,7 @@ export function formatDataForPreview(
       return data;
     default:
       try {
-        return truncateForDisplay('' + data);
+        return truncateForDisplay(String(data));
       } catch (error) {
         return 'unserializable';
       }
diff --git a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
index aa91857b4800..e240708667f2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
@@ -89,6 +89,27 @@ describe('ReactDOM unknown attribute', () => {
       testUnknownAttributeAssignment(lol, 'lol');
     });
 
+    it('throws with Temporal-like objects', () => {
+      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);
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Warning: The provided `unknown` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
     it('removes symbols and warns', () => {
       expect(() => testUnknownAttributeRemoval(Symbol('foo'))).toErrorDev(
         'Warning: Invalid value for prop `unknown` on <div> tag. Either remove it ' +
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 2911099e8e93..fb7d7cf41ada 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -254,6 +254,28 @@ describe('ReactDOMComponent', () => {
       ReactDOM.render(<span style={style} />, div);
     });
 
+    it('throws with Temporal-like objects as style values', () => {
+      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 div = document.createElement('div');
+      const test = () => ReactDOM.render(<span style={style} />, div);
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Warning: The provided `fontSize` CSS property is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
     it('should update styles if initially null', () => {
       let styles = null;
       const container = document.createElement('div');
@@ -1130,7 +1152,7 @@ describe('ReactDOMComponent', () => {
 
   describe('createOpenTagMarkup', () => {
     function quoteRegexp(str) {
-      return (str + '').replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
+      return String(str).replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
     }
 
     function expectToHaveAttribute(actual, expected) {
@@ -1164,7 +1186,7 @@ describe('ReactDOMComponent', () => {
 
   describe('createContentMarkup', () => {
     function quoteRegexp(str) {
-      return (str + '').replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
+      return String(str).replace(/([.?*+\^$\[\]\\(){}|-])/g, '\\$1');
     }
 
     function genMarkup(props) {
@@ -2412,6 +2434,28 @@ describe('ReactDOMComponent', () => {
       expect(el.getAttribute('whatever')).toBe('[object Object]');
     });
 
+    it('allows Temporal-like objects as HTML (they are not coerced to strings first)', function() {
+      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');
+      ReactDOM.render(
+        <div dangerouslySetInnerHTML={{__html: new TemporalLike()}} />,
+        container,
+      );
+      expect(container.firstChild.innerHTML).toEqual('2020-01-01');
+    });
+
     it('allows cased data attributes', function() {
       let el;
       expect(() => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 018dd14697f0..fb2c4bbc380c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -544,6 +544,102 @@ describe('ReactDOMInput', () => {
     expect(node.value).toBe('foobar');
   });
 
+  it('should throw for date inputs if `defaultValue` is an object where valueOf() throws', () => {
+    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 = () =>
+      ReactDOM.render(
+        <input defaultValue={new TemporalLike()} type="date" />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
+  it('should throw for text inputs if `defaultValue` is an object where valueOf() throws', () => {
+    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 = () =>
+      ReactDOM.render(
+        <input defaultValue={new TemporalLike()} type="text" />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
+  it('should throw for date inputs if `value` is an object where valueOf() throws', () => {
+    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 = () =>
+      ReactDOM.render(
+        <input value={new TemporalLike()} type="date" onChange={() => {}} />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
+  it('should throw for text inputs if `value` is an object where valueOf() throws', () => {
+    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 = () =>
+      ReactDOM.render(
+        <input value={new TemporalLike()} type="text" onChange={() => {}} />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
   it('should display `value` of number 0', () => {
     const stub = <input type="text" value={0} onChange={emptyFunction} />;
     const node = ReactDOM.render(stub, container);
@@ -1575,7 +1671,7 @@ describe('ReactDOMInput', () => {
             return value;
           },
           set: function(val) {
-            value = '' + val;
+            value = String(val);
             log.push('set property value');
           },
         });
diff --git a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
index 3368f09f585a..08353e11da70 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSelect-test.js
@@ -1019,4 +1019,268 @@ describe('ReactDOMSelect', () => {
       expect(node.value).toBe('');
     });
   });
+
+  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)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (option)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (both)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (select)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <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>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (option)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <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>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like value (both)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <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>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like defaultValue (select)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like defaultValue (option)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws when given a Temporal.PlainDate-like value (both)', () => {
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like defaultValue (select)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <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>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'Form field values (value, checked, defaultValue, or defaultChecked props)' +
+          ' must be strings, not TemporalLike. ' +
+          'This value must be coerced to a string before before using it here.',
+      );
+    });
+
+    it('throws with updated Temporal.PlainDate-like defaultValue (both)', () => {
+      ReactTestUtils.renderIntoDocument(
+        <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>,
+      );
+      const test = () => {
+        ReactTestUtils.renderIntoDocument(
+          <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>,
+        );
+      };
+      expect(() =>
+        expect(test).toThrowError(new TypeError('prod message')),
+      ).toErrorDev(
+        'The provided `value` attribute is an unsupported type TemporalLike.' +
+          ' This value must be coerced to a string before before using it here.',
+      );
+    });
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index 53a34b25ffd5..a27954785f7e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -1745,7 +1745,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
@@ -1769,7 +1769,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
@@ -1793,7 +1793,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns if you try to use the result as a string in a child component', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
@@ -1817,7 +1817,7 @@ describe('ReactDOMServerHooks', () => {
     it('useOpaqueIdentifier warns if you try to use the result as a string', async () => {
       function App() {
         const id = useOpaqueIdentifier();
-        return <div aria-labelledby={id + ''} />;
+        return <div aria-labelledby={String(id)} />;
       }
 
       const container = document.createElement('div');
@@ -1836,7 +1836,7 @@ describe('ReactDOMServerHooks', () => {
 
     it('useOpaqueIdentifier warns if you try to use the result as a string in a child component wrapped in a Suspense', async () => {
       function Child({appId}) {
-        return <div aria-labelledby={appId + ''} />;
+        return <div aria-labelledby={String(appId)} />;
       }
       function App() {
         const id = useOpaqueIdentifier();
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
index 9fb48b3bce24..72291c9959ee 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationUntrustedURL-test.internal.js
@@ -242,6 +242,11 @@ describe('ReactDOMServerIntegration - Untrusted URLs - disableJavaScriptURLs', (
       // consistency but the code structure makes that hard right now.
       expectedToStringCalls = 2;
     }
+    if (__DEV__) {
+      // Checking for string coercion problems results in double the
+      // toString calls in DEV
+      expectedToStringCalls *= 2;
+    }
 
     let toStringCalls = 0;
     const firstIsSafe = {
diff --git a/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
index ddc3a979597e..24ff139085d9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextComponent-test.js
@@ -284,4 +284,26 @@ describe('ReactDOMTextComponent', () => {
     ReactDOM.render(<div />, el);
     expect(el.innerHTML).toBe('<div></div>');
   });
+
+  it('throws for Temporal-like text nodes', () => {
+    const el = 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';
+      }
+    }
+    expect(() =>
+      ReactDOM.render(<div>{new TemporalLike()}</div>, el),
+    ).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
index 4d56f53d9e40..f8bec6c4ba97 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTextarea-test.js
@@ -142,7 +142,7 @@ describe('ReactDOMTextarea', () => {
             return value;
           },
           set: function(val) {
-            value = '' + val;
+            value = String(val);
             counter++;
           },
         });
@@ -219,6 +219,36 @@ describe('ReactDOMTextarea', () => {
     expect(node.value).toEqual('foo');
   });
 
+  it('should throw when value is set to a Temporal-like object', () => {
+    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 stub = <textarea value="giraffe" onChange={emptyFunction} />;
+    const node = renderTextarea(stub, container);
+
+    expect(node.value).toBe('giraffe');
+
+    const test = () =>
+      ReactDOM.render(
+        <textarea value={new TemporalLike()} onChange={emptyFunction} />,
+        container,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'Form field values (value, checked, defaultValue, or defaultChecked props) must be ' +
+        'strings, not TemporalLike. This value must be coerced to a string before before using it here.',
+    );
+  });
+
   it('should take updates to `defaultValue` for uncontrolled textarea', () => {
     const container = document.createElement('div');
 
diff --git a/packages/react-dom/src/__tests__/ReactIdentity-test.js b/packages/react-dom/src/__tests__/ReactIdentity-test.js
index cce0c227b639..97283d8c392d 100644
--- a/packages/react-dom/src/__tests__/ReactIdentity-test.js
+++ b/packages/react-dom/src/__tests__/ReactIdentity-test.js
@@ -262,4 +262,33 @@ describe('ReactIdentity', () => {
       ReactTestUtils.renderIntoDocument(component);
     }).not.toThrow();
   });
+
+  it('should throw if key is a Temporal-like object', () => {
+    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 test = () =>
+      ReactDOM.render(
+        <div>
+          <span key={new TemporalLike()} />
+        </div>,
+        el,
+      );
+    expect(() =>
+      expect(test).toThrowError(new TypeError('prod message')),
+    ).toErrorDev(
+      'The provided key is an unsupported type TemporalLike.' +
+        ' This value must be coerced to a string before before using it here.',
+      {withoutStack: true},
+    );
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
index 467cbf59c2e0..2e99344289a7 100644
--- a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
+++ b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -44,7 +44,7 @@ const expectChildren = function(container, children) {
     } else {
       expect(textNode != null).toBe(true);
       expect(textNode.nodeType).toBe(3);
-      expect(textNode.data).toBe('' + children);
+      expect(textNode.data).toBe(String(children));
     }
   } else {
     let mountIndex = 0;
@@ -55,7 +55,7 @@ const expectChildren = function(container, children) {
       if (typeof child === 'string') {
         textNode = outerNode.childNodes[mountIndex];
         expect(textNode.nodeType).toBe(3);
-        expect(textNode.data).toBe('' + child);
+        expect(textNode.data).toBe(child);
         mountIndex++;
       } else {
         const elementDOMNode = outerNode.childNodes[mountIndex];
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 2dcb1ace8ab9..30fed05aed60 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -20,6 +20,7 @@ import {
   disableJavaScriptURLs,
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 import {isOpaqueHydratingObject} from './ReactDOMHostConfig';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
@@ -40,10 +41,18 @@ export function getValueForProperty(
       const {propertyName} = propertyInfo;
       return (node: any)[propertyName];
     } else {
+      // This check protects multiple uses of `expected`, which is why the
+      // react-internal/safe-string-coercion rule is disabled in several spots
+      // below.
+      if (__DEV__) {
+        checkAttributeStringCoercion(expected, name);
+      }
+
       if (!disableJavaScriptURLs && propertyInfo.sanitizeURL) {
         // If we haven't fully disabled javascript: URLs, and if
         // the hydration is successful of a javascript: URL, we
         // still want to warn on the client.
+        // eslint-disable-next-line react-internal/safe-string-coercion
         sanitizeURL('' + (expected: any));
       }
 
@@ -60,6 +69,7 @@ export function getValueForProperty(
           if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
             return value;
           }
+          // eslint-disable-next-line react-internal/safe-string-coercion
           if (value === '' + (expected: any)) {
             return expected;
           }
@@ -85,6 +95,7 @@ export function getValueForProperty(
 
       if (shouldRemoveAttribute(name, expected, propertyInfo, false)) {
         return stringValue === null ? expected : stringValue;
+        // eslint-disable-next-line react-internal/safe-string-coercion
       } else if (stringValue === '' + (expected: any)) {
         return expected;
       } else {
@@ -119,6 +130,9 @@ export function getValueForAttribute(
       return expected === undefined ? undefined : null;
     }
     const value = node.getAttribute(name);
+    if (__DEV__) {
+      checkAttributeStringCoercion(expected, name);
+    }
     if (value === '' + (expected: any)) {
       return expected;
     }
@@ -153,6 +167,9 @@ export function setValueForProperty(
       if (value === null) {
         node.removeAttribute(attributeName);
       } else {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, name);
+        }
         node.setAttribute(
           attributeName,
           enableTrustedTypesIntegration ? (value: any) : '' + (value: any),
@@ -191,6 +208,9 @@ export function setValueForProperty(
       if (enableTrustedTypesIntegration) {
         attributeValue = (value: any);
       } else {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, attributeName);
+        }
         attributeValue = '' + (value: any);
       }
       if (propertyInfo.sanitizeURL) {
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 782097895710..2d347639eba4 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -14,6 +14,7 @@ import {
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
   getValueForAttribute,
@@ -139,6 +140,9 @@ if (__DEV__) {
   const NORMALIZE_NULL_AND_REPLACEMENT_REGEX = /\u0000|\uFFFD/g;
 
   normalizeMarkupForTextOrAttribute = function(markup: mixed): string {
+    if (__DEV__) {
+      checkHtmlStringCoercion(markup);
+    }
     const markupString =
       typeof markup === 'string' ? markup : '' + (markup: any);
     return markupString
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index c1afd277e3e9..4fabc1fb9ada 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -18,6 +18,7 @@ import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes
 import {updateValueIfChanged} from './inputValueTracking';
 import getActiveElement from './getActiveElement';
 import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ToStringValue} from './ToStringValue';
 
@@ -365,6 +366,9 @@ function updateNamedCousins(rootNode, props) {
     // 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=' + JSON.stringify('' + name) + '][type="radio"]',
     );
diff --git a/packages/react-dom/src/client/ToStringValue.js b/packages/react-dom/src/client/ToStringValue.js
index 41826cd404e0..508e8a902995 100644
--- a/packages/react-dom/src/client/ToStringValue.js
+++ b/packages/react-dom/src/client/ToStringValue.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+
 export opaque type ToStringValue =
   | boolean
   | number
@@ -19,6 +21,8 @@ export opaque type ToStringValue =
 // 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);
 }
 
@@ -26,10 +30,14 @@ export function getToStringValue(value: mixed): ToStringValue {
   switch (typeof value) {
     case 'boolean':
     case 'number':
-    case 'object':
     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/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js
index 54c850662ab2..499c9aa97ecc 100644
--- a/packages/react-dom/src/client/inputValueTracking.js
+++ b/packages/react-dom/src/client/inputValueTracking.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
+
 type ValueTracker = {|
   getValue(): string,
   setValue(value: string): void,
@@ -55,6 +57,9 @@ function trackValueOnNode(node: any): ?ValueTracker {
     valueField,
   );
 
+  if (__DEV__) {
+    checkFormFieldValueStringCoercion(node[valueField]);
+  }
   let currentValue = '' + node[valueField];
 
   // if someone has already defined a value or Safari, then bail
@@ -76,6 +81,9 @@ function trackValueOnNode(node: any): ?ValueTracker {
       return get.call(this);
     },
     set: function(value) {
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
       currentValue = '' + value;
       set.call(this, value);
     },
@@ -93,6 +101,9 @@ function trackValueOnNode(node: any): ?ValueTracker {
       return currentValue;
     },
     setValue(value) {
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(value);
+      }
       currentValue = '' + value;
     },
     stopTracking() {
diff --git a/packages/react-dom/src/server/DOMMarkupOperations.js b/packages/react-dom/src/server/DOMMarkupOperations.js
index 014e63553192..dda7ceab721f 100644
--- a/packages/react-dom/src/server/DOMMarkupOperations.js
+++ b/packages/react-dom/src/server/DOMMarkupOperations.js
@@ -16,6 +16,7 @@ import {
   shouldRemoveAttribute,
 } from '../shared/DOMProperty';
 import sanitizeURL from '../shared/sanitizeURL';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 import quoteAttributeValueForBrowser from './quoteAttributeValueForBrowser';
 
 /**
@@ -44,6 +45,9 @@ export function createMarkupForProperty(name: string, value: mixed): string {
       return attributeName + '=""';
     } else {
       if (propertyInfo.sanitizeURL) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, attributeName);
+        }
         value = '' + (value: any);
         sanitizeURL(value);
       }
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 78e909cff610..954cc1ef689f 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -9,6 +9,12 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import {
+  checkHtmlStringCoercion,
+  checkCSSPropertyStringCoercion,
+  checkAttributeStringCoercion,
+} from 'shared/CheckStringCoercion';
+
 import {Children} from 'react';
 
 import {enableFilterEmptyStringAttributesDOM} from 'shared/ReactFeatureFlags';
@@ -272,6 +278,9 @@ function pushStyle(
     const isCustomProperty = styleName.indexOf('--') === 0;
     if (isCustomProperty) {
       nameChunk = stringToChunk(escapeTextForBrowser(styleName));
+      if (__DEV__) {
+        checkCSSPropertyStringCoercion(styleValue, styleName);
+      }
       valueChunk = stringToChunk(
         escapeTextForBrowser(('' + styleValue).trim()),
       );
@@ -291,6 +300,9 @@ function pushStyle(
           valueChunk = stringToChunk('' + styleValue);
         }
       } else {
+        if (__DEV__) {
+          checkCSSPropertyStringCoercion(styleValue, styleName);
+        }
         valueChunk = stringToChunk(
           escapeTextForBrowser(('' + styleValue).trim()),
         );
@@ -439,6 +451,9 @@ function pushAttribute(
         break;
       default:
         if (propertyInfo.sanitizeURL) {
+          if (__DEV__) {
+            checkAttributeStringCoercion(value, attributeName);
+          }
           value = '' + (value: any);
           sanitizeURL(value);
         }
@@ -496,6 +511,9 @@ function pushInnerHTML(
     );
     const html = innerHTML.__html;
     if (html !== null && html !== undefined) {
+      if (__DEV__) {
+        checkHtmlStringCoercion(html);
+      }
       target.push(stringToChunk('' + html));
     }
   }
@@ -679,6 +697,9 @@ function pushStartOption(
   if (selectedValue !== null) {
     let stringValue;
     if (value !== null) {
+      if (__DEV__) {
+        checkAttributeStringCoercion(value, 'value');
+      }
       stringValue = '' + value;
     } else {
       if (__DEV__) {
@@ -697,6 +718,9 @@ function pushStartOption(
     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);
@@ -895,8 +919,16 @@ function pushStartTextArea(
         children.length <= 1,
         '<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;
   }
 
@@ -1142,6 +1174,9 @@ function pushStartPreformattedElement(
       if (typeof html === 'string' && html.length > 0 && html[0] === '\n') {
         target.push(leadingNewline, stringToChunk(html));
       } else {
+        if (__DEV__) {
+          checkHtmlStringCoercion(html);
+        }
         target.push(stringToChunk('' + html));
       }
     }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index caf1ee2f6fc2..56231cf5a018 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -25,6 +25,10 @@ import {
   enableSuspenseServerRenderer,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
+import {
+  checkPropStringCoercion,
+  checkFormFieldValueStringCoercion,
+} from 'shared/CheckStringCoercion';
 
 import {
   REACT_DEBUG_TRACING_MODE_TYPE,
@@ -1472,6 +1476,9 @@ class ReactDOMServerRenderer {
             textareaChildren = textareaChildren[0];
           }
 
+          if (__DEV__) {
+            checkPropStringCoercion(textareaChildren, 'children');
+          }
           defaultValue = '' + textareaChildren;
         }
         if (defaultValue == null) {
@@ -1480,6 +1487,9 @@ class ReactDOMServerRenderer {
         initialValue = defaultValue;
       }
 
+      if (__DEV__) {
+        checkFormFieldValueStringCoercion(initialValue);
+      }
       props = Object.assign({}, props, {
         value: undefined,
         children: '' + initialValue,
@@ -1535,6 +1545,9 @@ class ReactDOMServerRenderer {
       if (selectValue != null) {
         let value;
         if (props.value != null) {
+          if (__DEV__) {
+            checkFormFieldValueStringCoercion(props.value);
+          }
           value = props.value + '';
         } else {
           if (__DEV__) {
@@ -1554,12 +1567,18 @@ class ReactDOMServerRenderer {
         if (isArray(selectValue)) {
           // multiple
           for (let j = 0; j < selectValue.length; j++) {
+            if (__DEV__) {
+              checkFormFieldValueStringCoercion(selectValue[j]);
+            }
             if ('' + selectValue[j] === value) {
               selected = true;
               break;
             }
           }
         } else {
+          if (__DEV__) {
+            checkFormFieldValueStringCoercion(selectValue);
+          }
           selected = '' + selectValue === value;
         }
 
diff --git a/packages/react-dom/src/server/escapeTextForBrowser.js b/packages/react-dom/src/server/escapeTextForBrowser.js
index 2a5a91aafde3..4583cef68490 100644
--- a/packages/react-dom/src/server/escapeTextForBrowser.js
+++ b/packages/react-dom/src/server/escapeTextForBrowser.js
@@ -36,6 +36,8 @@
  * @private
  */
 
+import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
+
 const matchHtmlRegExp = /["'&<>]/;
 
 /**
@@ -47,6 +49,9 @@ const matchHtmlRegExp = /["'&<>]/;
  */
 
 function escapeHtml(string) {
+  if (__DEV__) {
+    checkHtmlStringCoercion(string);
+  }
   const str = '' + string;
   const match = matchHtmlRegExp.exec(str);
 
diff --git a/packages/react-dom/src/shared/dangerousStyleValue.js b/packages/react-dom/src/shared/dangerousStyleValue.js
index 53d32e9126d6..c4a1a506eb74 100644
--- a/packages/react-dom/src/shared/dangerousStyleValue.js
+++ b/packages/react-dom/src/shared/dangerousStyleValue.js
@@ -6,6 +6,7 @@
  */
 
 import {isUnitlessNumber} from './CSSProperty';
+import {checkCSSPropertyStringCoercion} from 'shared/CheckStringCoercion';
 
 /**
  * Convert a value into the proper css writable value. The style name `name`
@@ -41,6 +42,9 @@ function dangerousStyleValue(name, value, isCustomProperty) {
     return value + 'px'; // Presumes implicit 'px' suffix for unitless numbers
   }
 
+  if (__DEV__) {
+    checkCSSPropertyStringCoercion(value, name);
+  }
   return ('' + value).trim();
 }
 
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index bc913d160b68..da0d16ade6a0 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -95,7 +95,7 @@ function validateClassInstance(inst, methodName) {
     return;
   }
   let received;
-  const stringified = '' + inst;
+  const stringified = String(inst);
   if (isArray(inst)) {
     received = 'an array';
   } else if (inst && inst.nodeType === ELEMENT_NODE && inst.tagName) {
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 9e2c1ba7f876..2f0d70a6029a 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -22,6 +22,7 @@ import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 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 {
   DefaultEventPriority,
   IdleEventPriority,
@@ -215,6 +216,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     keepChildren: boolean,
     recyclableInstance: null | Instance,
   ): Instance {
+    if (__DEV__) {
+      checkPropStringCoercion(newProps.children, 'children');
+    }
     const clone = {
       id: instance.id,
       type: type,
@@ -293,13 +297,21 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       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)
-          ? computeText((props.children: any) + '', hostContext)
+          ? // eslint-disable-next-line react-internal/safe-string-coercion
+            computeText((props.children: any) + '', hostContext)
           : null,
         prop: props.prop,
         hidden: !!props.hidden,
@@ -481,6 +493,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           instance.prop = newProps.prop;
           instance.hidden = !!newProps.hidden;
           if (shouldSetTextContent(type, newProps)) {
+            if (__DEV__) {
+              checkPropStringCoercion(newProps.children, 'children');
+            }
             instance.text = computeText(
               (newProps.children: any) + '',
               instance.context,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index e3f41115f53f..91dcff903a63 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -28,6 +28,7 @@ import {
   warnAboutStringRefs,
   enableLazyElements,
 } from 'shared/ReactFeatureFlags';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
   createWorkInProgress,
@@ -163,6 +164,9 @@ function coerceRef(
           'bug in React. Please file an issue.',
         mixedRef,
       );
+      if (__DEV__) {
+        checkPropStringCoercion(mixedRef, 'ref');
+      }
       const stringRef = '' + mixedRef;
       // Check if previous string ref matches new string ref
       if (
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index f1e39112b589..9fafdf05f67a 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -28,6 +28,7 @@ import {
   warnAboutStringRefs,
   enableLazyElements,
 } from 'shared/ReactFeatureFlags';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
   createWorkInProgress,
@@ -163,6 +164,9 @@ function coerceRef(
           'bug in React. Please file an issue.',
         mixedRef,
       );
+      if (__DEV__) {
+        checkPropStringCoercion(mixedRef, 'ref');
+      }
       const stringRef = '' + mixedRef;
       // Check if previous string ref matches new string ref
       if (
diff --git a/packages/react-reconciler/src/ReactPortal.js b/packages/react-reconciler/src/ReactPortal.js
index 43f590c19d4a..a31078051632 100644
--- a/packages/react-reconciler/src/ReactPortal.js
+++ b/packages/react-reconciler/src/ReactPortal.js
@@ -8,6 +8,7 @@
  */
 
 import {REACT_PORTAL_TYPE} from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 import type {ReactNodeList, ReactPortal} from 'shared/ReactTypes';
 
@@ -18,6 +19,9 @@ export function createPortal(
   implementation: any,
   key: ?string = null,
 ): ReactPortal {
+  if (__DEV__) {
+    checkKeyStringCoercion(key);
+  }
   return {
     // This tag allow us to uniquely identify this as a React Portal
     $$typeof: REACT_PORTAL_TYPE,
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 77b77869c782..31321eb07a52 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -875,7 +875,7 @@ describe('ReactCache', () => {
     function Unrelated() {
       const [count, _updateUnrelated] = useState(0);
       updateUnrelated = _updateUnrelated;
-      return <Text text={count + ''} />;
+      return <Text text={String(count)} />;
     }
 
     const root = ReactNoop.createRoot();
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 55b9abdcd746..b687212f2b32 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2754,7 +2754,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create insertion [current: ${committedText}]`,
           );
-          committedText = props.count + '';
+          committedText = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy insertion [current: ${committedText}]`,
@@ -2817,7 +2817,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create insertion [current: ${committedText}]`,
           );
-          committedText = props.count + '';
+          committedText = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy insertion [current: ${committedText}]`,
@@ -2828,7 +2828,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create layout [current: ${committedText}]`,
           );
-          committedText = props.count + '';
+          committedText = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy layout [current: ${committedText}]`,
@@ -2886,7 +2886,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
           );
-          committedA = props.count + '';
+          committedA = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 1 for Component A [A: ${committedA}, B: ${committedB}]`,
@@ -2897,7 +2897,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
           );
-          committedA = props.count + '';
+          committedA = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 2 for Component A [A: ${committedA}, B: ${committedB}]`,
@@ -2934,7 +2934,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
           );
-          committedB = props.count + '';
+          committedB = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 1 for Component B [A: ${committedA}, B: ${committedB}]`,
@@ -2945,7 +2945,7 @@ describe('ReactHooksWithNoopRenderer', () => {
           Scheduler.unstable_yieldValue(
             `Create Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
           );
-          committedB = props.count + '';
+          committedB = String(props.count);
           return () => {
             Scheduler.unstable_yieldValue(
               `Destroy Insertion 2 for Component B [A: ${committedA}, B: ${committedB}]`,
@@ -3140,7 +3140,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         useLayoutEffect(() => {
           // Normally this would go in a mutation effect, but this test
           // intentionally omits a mutation effect.
-          committedText = props.count + '';
+          committedText = String(props.count);
 
           Scheduler.unstable_yieldValue(
             `Mount layout [current: ${committedText}]`,
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
index 864723e927b8..20496019984f 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -1110,7 +1110,7 @@ describe('ReactIncremental', () => {
       }
       render() {
         Scheduler.unstable_yieldValue('Bar:' + this.props.x);
-        return <span prop={'' + (this.props.x === this.state.y)} />;
+        return <span prop={String(this.props.x === this.state.y)} />;
       }
     }
 
@@ -1159,7 +1159,7 @@ describe('ReactIncremental', () => {
         Scheduler.unstable_yieldValue(
           'Bar:' + this.props.x + '-' + this.props.step,
         );
-        return <span prop={'' + (this.props.x === this.state.y)} />;
+        return <span prop={String(this.props.x === this.state.y)} />;
       }
     }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
index 639daeb1a98d..0bbab43d33e0 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -223,7 +223,7 @@ describe('memo', () => {
         class CounterInner extends React.Component {
           static defaultProps = {suffix: '!'};
           render() {
-            return <Text text={this.props.count + '' + this.props.suffix} />;
+            return <Text text={this.props.count + String(this.props.suffix)} />;
           }
         }
         const Counter = memo(CounterInner);
diff --git a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
index 46ccfea5c206..12a27fb3dd67 100644
--- a/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactPersistent-test.js
@@ -27,7 +27,7 @@ describe('ReactPersistent', () => {
   function createPortal(children, containerInfo, implementation, key) {
     return {
       $$typeof: Symbol.for('react.portal'),
-      key: key == null ? null : '' + key,
+      key: key == null ? null : String(key),
       children,
       containerInfo,
       implementation,
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 5429d3a3b9e6..b7a43254fc44 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -296,7 +296,7 @@ function describeValueForErrorMessage(value: ReactModel): string {
     case 'function':
       return 'function';
     default:
-      // eslint-disable-next-line
+      // eslint-disable-next-line react-internal/safe-string-coercion
       return String(value);
   }
 }
@@ -615,8 +615,10 @@ function emitErrorChunk(request: Request, id: number, error: mixed): void {
   let stack = '';
   try {
     if (error instanceof Error) {
-      message = '' + error.message;
-      stack = '' + error.stack;
+      // 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 {
       message = 'Error: ' + (error: any);
     }
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 39c288014884..b6d047e0e481 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -44,6 +44,7 @@ import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
+import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {getPublicInstance} from './ReactTestHostConfig';
 import {ConcurrentRoot, LegacyRoot} from 'react-reconciler/src/ReactRootTags';
@@ -251,6 +252,9 @@ function getChildren(parent: Fiber) {
     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;
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index 9acdc068e8ea..dab75998bb8e 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -16,6 +16,7 @@ import {
   REACT_ELEMENT_TYPE,
   REACT_PORTAL_TYPE,
 } from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 import {isValidElement, cloneAndReplaceKey} from './ReactElement';
 
@@ -65,6 +66,9 @@ function getElementKey(element: any, index: number): string {
   // that we don't block potential future ES APIs.
   if (typeof element === 'object' && element !== null && element.key != null) {
     // Explicit key
+    if (__DEV__) {
+      checkKeyStringCoercion(element.key);
+    }
     return escape('' + element.key);
   }
   // Implicit key determined by the index in the set
@@ -119,6 +123,14 @@ function mapIntoArray(
       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 Flow incorrectly thinks React.Portal doesn't have a key
+          if (mappedChild.key && (!child || child.key !== mappedChild.key)) {
+            checkKeyStringCoercion(mappedChild.key);
+          }
+        }
         mappedChild = cloneAndReplaceKey(
           mappedChild,
           // Keep both the (mapped) and old keys if they differ, just as
@@ -127,6 +139,7 @@ function mapIntoArray(
             // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
             (mappedChild.key && (!child || child.key !== mappedChild.key)
               ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
+                // eslint-disable-next-line react-internal/safe-string-coercion
                 escapeUserProvidedKey('' + mappedChild.key) + '/'
               : '') +
             childKey,
@@ -190,7 +203,8 @@ function mapIntoArray(
         );
       }
     } else if (type === 'object') {
-      const childrenString = '' + (children: any);
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      const childrenString = String((children: any));
       invariant(
         false,
         'Objects are not valid as a React child (found: %s). ' +
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 75017cba37ae..25179e2b2c4f 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -9,6 +9,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import invariant from 'shared/invariant';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
 
@@ -222,10 +223,16 @@ export function jsx(type, config, maybeKey) {
   // <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 (__DEV__) {
+      checkKeyStringCoercion(maybeKey);
+    }
     key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
+    if (__DEV__) {
+      checkKeyStringCoercion(config.key);
+    }
     key = '' + config.key;
   }
 
@@ -286,10 +293,16 @@ export function jsxDEV(type, config, maybeKey, source, self) {
   // <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 (__DEV__) {
+      checkKeyStringCoercion(maybeKey);
+    }
     key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
+    if (__DEV__) {
+      checkKeyStringCoercion(config.key);
+    }
     key = '' + config.key;
   }
 
@@ -366,6 +379,9 @@ export function createElement(type, config, children) {
       }
     }
     if (hasValidKey(config)) {
+      if (__DEV__) {
+        checkKeyStringCoercion(config.key);
+      }
       key = '' + config.key;
     }
 
@@ -499,6 +515,9 @@ export function cloneElement(element, config, children) {
       owner = ReactCurrentOwner.current;
     }
     if (hasValidKey(config)) {
+      if (__DEV__) {
+        checkKeyStringCoercion(config.key);
+      }
       key = '' + config.key;
     }
 
diff --git a/packages/react/src/jsx/ReactJSXElement.js b/packages/react/src/jsx/ReactJSXElement.js
index e87a969712e1..af7085f7e247 100644
--- a/packages/react/src/jsx/ReactJSXElement.js
+++ b/packages/react/src/jsx/ReactJSXElement.js
@@ -9,6 +9,7 @@ import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -222,10 +223,16 @@ export function jsx(type, config, maybeKey) {
   // <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 (__DEV__) {
+      checkKeyStringCoercion(maybeKey);
+    }
     key = '' + maybeKey;
   }
 
   if (hasValidKey(config)) {
+    if (__DEV__) {
+      checkKeyStringCoercion(config.key);
+    }
     key = '' + config.key;
   }
 
@@ -287,10 +294,16 @@ export function jsxDEV(type, config, maybeKey, source, self) {
     // <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 (__DEV__) {
+        checkKeyStringCoercion(maybeKey);
+      }
       key = '' + maybeKey;
     }
 
     if (hasValidKey(config)) {
+      if (__DEV__) {
+        checkKeyStringCoercion(config.key);
+      }
       key = '' + config.key;
     }
 
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
new file mode 100644
index 000000000000..9db9e7145ad4
--- /dev/null
+++ b/packages/shared/CheckStringCoercion.js
@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
+
+/*
+ * The `'' + value` pattern (used in 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 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';
+    return type;
+  }
+}
+
+// $FlowFixMe only called in DEV, so void return is not possible.
+function willCoercionThrow(value: mixed): boolean {
+  if (__DEV__) {
+    if (
+      value !== null &&
+      typeof value === 'object' &&
+      value.$$typeof === REACT_OPAQUE_ID_TYPE
+    ) {
+      // OpaqueID type is expected to throw, so React will handle it. Not sure if
+      // it's expected that string coercion will throw, but we'll assume it's OK.
+      // See https://github.com/facebook/react/issues/20127.
+      return;
+    }
+    try {
+      testStringCoercion(value);
+      return false;
+    } catch (e) {
+      return true;
+    }
+  }
+}
+
+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,
+) {
+  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 before using it here.',
+        attributeName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkKeyStringCoercion(value: mixed) {
+  if (__DEV__) {
+    if (willCoercionThrow(value)) {
+      console.error(
+        'The provided key is an unsupported type %s.' +
+          ' This value must be coerced to a string before before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkPropStringCoercion(value: mixed, propName: 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 before using it here.',
+        propName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkCSSPropertyStringCoercion(value: mixed, propName: 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 before using it here.',
+        propName,
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkHtmlStringCoercion(value: mixed) {
+  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 before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
+
+export function checkFormFieldValueStringCoercion(value: mixed) {
+  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 before using it here.',
+        typeName(value),
+      );
+      return testStringCoercion(value); // throw (to help callers find troubleshooting comments)
+    }
+  }
+}
diff --git a/packages/shared/consoleWithStackDev.js b/packages/shared/consoleWithStackDev.js
index 20adcc9f3539..fddec07ec128 100644
--- a/packages/shared/consoleWithStackDev.js
+++ b/packages/shared/consoleWithStackDev.js
@@ -47,7 +47,8 @@ function printWarning(level, format, args) {
       args = args.concat([stack]);
     }
 
-    const argsWithFormat = args.map(item => '' + item);
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    const argsWithFormat = args.map(item => String(item));
     // Careful: RN currently depends on this prefix
     argsWithFormat.unshift('Warning: ' + format);
     // We intentionally don't use spread (or .apply) directly because it
diff --git a/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
index 67cee01439a2..f52a79d7f08f 100644
--- a/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
+++ b/scripts/eslint-rules/__tests__/no-primitive-constructors-test.internal.js
@@ -14,7 +14,7 @@ const {RuleTester} = require('eslint');
 const ruleTester = new RuleTester();
 
 ruleTester.run('eslint-rules/no-primitive-constructors', rule, {
-  valid: ['!!obj', "'' + obj", '+string'],
+  valid: ['!!obj', '+string'],
   invalid: [
     {
       code: 'Boolean(obj)',
@@ -26,13 +26,11 @@ ruleTester.run('eslint-rules/no-primitive-constructors', rule, {
       ],
     },
     {
-      code: 'String(obj)',
+      code: 'new String(obj)',
       errors: [
         {
           message:
-            'Do not use the String constructor. ' +
-            'To cast a value to a string, concat it with the empty string ' +
-            "(unless it's a symbol, which has different semantics): '' + value",
+            "Do not use `new String()`. Use String() without new (or '' + value for perf-sensitive code).",
         },
       ],
     },
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 000000000000..32c58a435171
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js
@@ -0,0 +1,265 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const rule = require('../safe-string-coercion');
+const {RuleTester} = require('eslint');
+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}",
+  ],
+  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,
+        },
+      ],
+    },
+  ],
+});
diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js
index 0a08b0d4cfcd..0e86334d2633 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -9,5 +9,6 @@ module.exports = {
     'no-production-logging': require('./no-production-logging'),
     'no-cross-fork-imports': require('./no-cross-fork-imports'),
     'no-cross-fork-types': require('./no-cross-fork-types'),
+    '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
index bbba8ccd54fd..2cf46f4a4238 100644
--- a/scripts/eslint-rules/no-primitive-constructors.js
+++ b/scripts/eslint-rules/no-primitive-constructors.js
@@ -29,13 +29,12 @@ module.exports = {
           );
           break;
         case 'String':
-          report(
-            node,
-            name,
-            'To cast a value to a string, concat it with the empty string ' +
-              "(unless it's a symbol, which has different semantics): " +
-              "'' + value"
-          );
+          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(
diff --git a/scripts/eslint-rules/safe-string-coercion.js b/scripts/eslint-rules/safe-string-coercion.js
new file mode 100644
index 000000000000..3a6c8ebb142b
--- /dev/null
+++ b/scripts/eslint-rules/safe-string-coercion.js
@@ -0,0 +1,344 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+function isEmptyLiteral(node) {
+  return (
+    node.type === 'Literal' &&
+    typeof node.value === 'string' &&
+    node.value === ''
+  );
+}
+
+// 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 plusEmptyString(context, node) {
+  if (
+    node.operator === '+' &&
+    (isEmptyLiteral(node.left) || isEmptyLiteral(node.right))
+  ) {
+    let valueToTest = isEmptyLiteral(node.left) ? node.right : node.left;
+    if (valueToTest.type === 'TypeCastExpression' && 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 => plusEmptyString(context, node),
+      CallExpression: node => coerceWithStringConstructor(context, node),
+    };
+  },
+};
diff --git a/scripts/flow/runFlow.js b/scripts/flow/runFlow.js
index 252bf8952a15..c1917abf967d 100644
--- a/scripts/flow/runFlow.js
+++ b/scripts/flow/runFlow.js
@@ -33,8 +33,8 @@ async function runFlow(renderer, args) {
     const srcStat = fs.statSync(__dirname + '/config/flowconfig');
     const destPath = './.flowconfig';
     if (fs.existsSync(destPath)) {
-      const oldConfig = fs.readFileSync(destPath) + '';
-      const newConfig = fs.readFileSync(srcPath) + '';
+      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.
diff --git a/scripts/merge-fork/merge-fork.js b/scripts/merge-fork/merge-fork.js
index ccefc8c0d0b6..1b054dd395ca 100644
--- a/scripts/merge-fork/merge-fork.js
+++ b/scripts/merge-fork/merge-fork.js
@@ -90,7 +90,7 @@ for (const {base: baseFilename, from, to} of getTransforms()) {
     }
   );
   if (gitShowResult.status !== 0) {
-    console.error('' + gitShowResult.stderr);
+    console.error(String(gitShowResult.stderr));
     continue;
   }
 
@@ -104,6 +104,6 @@ for (const {base: baseFilename, from, to} of getTransforms()) {
   });
 
   if (mergeFileResult.status !== 0) {
-    console.error('' + mergeFileResult.stderr);
+    console.error(String(mergeFileResult.stderr));
   }
 }
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 10a455d5dbbc..acd07d32d344 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -18,13 +18,13 @@ const {
 // Runs the build script for both stable and experimental release channels,
 // by configuring an environment variable.
 
-const sha = (
-  spawnSync('git', ['show', '-s', '--format=%h']).stdout + ''
+const sha = String(
+  spawnSync('git', ['show', '-s', '--format=%h']).stdout
 ).trim();
 
-let dateString = (
+let dateString = String(
   spawnSync('git', ['show', '-s', '--format=%cd', '--date=format:%Y%m%d', sha])
-    .stdout + ''
+    .stdout
 ).trim();
 
 // On CI environment, this string is wrapped with quotes '...'s

From 2e41568313620ab564425be7e5d777581e2db5d4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 27 Sep 2021 13:34:39 -0400
Subject: [PATCH 0912/1603] =?UTF-8?q?DevTools=20encoding=20supports=20mult?=
 =?UTF-8?q?ibyte=20characters=20(e.g.=20"=F0=9F=9F=A9")=20(#22424)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes our text encoding approach to properly support multibyte characters following this algorithm. Based on benchmarking, this new approach is roughly equivalent in terms of performance (sometimes slightly faster, sometimes slightly slower).

I also considered using TextEncoder/TextDecoder for this, but it was much slower (~85%).
---
 .../src/__tests__/store-test.js               | 13 ++++
 .../src/backend/renderer.js                   | 61 +++++++++++++------
 packages/react-devtools-shared/src/utils.js   | 26 +++++++-
 3 files changed, 77 insertions(+), 23 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 02cea3d925d5..53a531d51bf2 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -101,6 +101,19 @@ describe('Store', () => {
     `);
   });
 
+  it('should handle multibyte character strings', () => {
+    const Component = () => null;
+    Component.displayName = '🟩💜🔵';
+
+    const container = document.createElement('div');
+
+    act(() => legacyRender(<Component />, container));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <🟩💜🔵>
+    `);
+  });
+
   describe('collapseNodesByDefault:false', () => {
     beforeEach(() => {
       store.collapseNodesByDefault = false;
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 24a00583e7e6..a2469577a0a3 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1514,11 +1514,16 @@ export function attach(
 
   type OperationsArray = Array<number>;
 
+  type StringTableEntry = {|
+    encodedString: Array<number>,
+    id: number,
+  |};
+
   const pendingOperations: OperationsArray = [];
   const pendingRealUnmountedIDs: Array<number> = [];
   const pendingSimulatedUnmountedIDs: Array<number> = [];
   let pendingOperationsQueue: Array<OperationsArray> | null = [];
-  const pendingStringTable: Map<string, number> = new Map();
+  const pendingStringTable: Map<string, StringTableEntry> = new Map();
   let pendingStringTableLength: number = 0;
   let pendingUnmountedRootID: number | null = null;
 
@@ -1736,13 +1741,19 @@ export function attach(
     // 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];
+    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 += key.length;
+
+      i += length;
     });
 
     if (numUnmountIDs > 0) {
@@ -1789,21 +1800,31 @@ export function attach(
     pendingStringTableLength = 0;
   }
 
-  function getStringID(str: string | null): number {
-    if (str === null) {
+  function getStringID(string: string | null): number {
+    if (string === 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;
+    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;
   }
 
   function recordMount(fiber: Fiber, parentFiber: Fiber | null) {
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 9ec19e3afde4..771c18688ab3 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -138,17 +138,37 @@ export function utfDecodeString(array: Array<number>): string {
   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 = new Array(string.length);
-  for (let i = 0; i < string.length; i++) {
-    encoded[i] = string.codePointAt(i);
+  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;
 }
 

From 2cc6d79c98bcd1b17b83c47de29895342db5caeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 27 Sep 2021 15:38:22 -0400
Subject: [PATCH 0913/1603] Rename onReadyToStream to onCompleteShell (#22443)

---
 fixtures/ssr/server/render.js                        |  2 +-
 fixtures/ssr2/server/render.js                       |  2 +-
 .../src/__tests__/ReactDOMFizzServer-test.js         |  6 +++---
 .../src/server/ReactDOMFizzServerBrowser.js          |  4 ++--
 .../react-dom/src/server/ReactDOMFizzServerNode.js   |  4 ++--
 .../src/server/ReactDOMLegacyServerBrowser.js        |  4 ++--
 packages/react-noop-renderer/src/ReactNoopServer.js  |  4 ++--
 packages/react-server/src/ReactFizzServer.js         | 12 ++++++------
 8 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index a6ee4decdd22..ababbc4ccd72 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -24,7 +24,7 @@ export default function render(url, res) {
     <App assets={assets} />,
     res,
     {
-      onReadyToStream() {
+      onCompleteShell() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index fdb545a073a1..b5d919e82ca6 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -43,7 +43,7 @@ module.exports = function render(url, res) {
     </DataProvider>,
     res,
     {
-      onReadyToStream() {
+      onCompleteShell() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index dd43cbd20d27..d786062043de 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -768,7 +768,7 @@ describe('ReactDOMFizzServer', () => {
         writableA,
         {
           identifierPrefix: 'A_',
-          onReadyToStream() {
+          onCompleteShell() {
             writableA.write('<div id="container-A">');
             startWriting();
             writableA.write('</div>');
@@ -788,7 +788,7 @@ describe('ReactDOMFizzServer', () => {
         writableB,
         {
           identifierPrefix: 'B_',
-          onReadyToStream() {
+          onCompleteShell() {
             writableB.write('<div id="container-B">');
             startWriting();
             writableB.write('</div>');
@@ -1029,7 +1029,7 @@ describe('ReactDOMFizzServer', () => {
         writable,
         {
           namespaceURI: 'http://www.w3.org/2000/svg',
-          onReadyToStream() {
+          onCompleteShell() {
             writable.write('<svg>');
             startWriting();
             writable.write('</svg>');
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 67ecb7f261e3..42752a34c0bd 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -28,7 +28,7 @@ type Options = {|
   namespaceURI?: string,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
-  onReadyToStream?: () => void,
+  onCompleteShell?: () => void,
   onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
 |};
@@ -56,7 +56,7 @@ function renderToReadableStream(
         options ? options.progressiveChunkSize : undefined,
         options ? options.onError : undefined,
         options ? options.onCompleteAll : undefined,
-        options ? options.onReadyToStream : undefined,
+        options ? options.onCompleteShell : undefined,
       );
       startWork(request);
     },
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index ccfc91643a13..2bfb505ea062 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -32,7 +32,7 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   progressiveChunkSize?: number,
-  onReadyToStream?: () => void,
+  onCompleteShell?: () => void,
   onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
 |};
@@ -57,7 +57,7 @@ function createRequestImpl(
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
     options ? options.onCompleteAll : undefined,
-    options ? options.onReadyToStream : undefined,
+    options ? options.onCompleteShell : undefined,
   );
 }
 
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 991c83e32e35..d05b44200e62 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -54,7 +54,7 @@ function renderToStringImpl(
   };
 
   let readyToStream = false;
-  function onReadyToStream() {
+  function onCompleteShell() {
     readyToStream = true;
   }
   const request = createRequest(
@@ -68,7 +68,7 @@ function renderToStringImpl(
     Infinity,
     onError,
     undefined,
-    onReadyToStream,
+    onCompleteShell,
   );
   startWork(request);
   // If anything suspended and is still pending, we'll abort it before writing.
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 0ba00df7781d..279c8b7b217f 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -242,7 +242,7 @@ const ReactNoopServer = ReactFizzServer({
 
 type Options = {
   progressiveChunkSize?: number,
-  onReadyToStream?: () => void,
+  onCompleteShell?: () => void,
   onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
 };
@@ -265,7 +265,7 @@ function render(children: React$Element<any>, options?: Options): Destination {
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
     options ? options.onCompleteAll : undefined,
-    options ? options.onReadyToStream : undefined,
+    options ? options.onCompleteShell : undefined,
   );
   ReactNoopServer.startWork(request);
   ReactNoopServer.startFlowing(request);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f1463a1345d1..ff8764ae0696 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -190,10 +190,10 @@ export opaque type Request = {
   // onCompleteAll 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.
   onCompleteAll: () => void,
-  // onReadyToStream is called when there is at least a root fallback ready to show.
+  // onCompleteShell 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.
-  onReadyToStream: () => void,
+  onCompleteShell: () => void,
 };
 
 // This is a default heuristic for how to split up the HTML content into progressive
@@ -227,7 +227,7 @@ export function createRequest(
   progressiveChunkSize: void | number,
   onError: void | ((error: mixed) => void),
   onCompleteAll: void | (() => void),
-  onReadyToStream: void | (() => void),
+  onCompleteShell: void | (() => void),
 ): Request {
   const pingedTasks = [];
   const abortSet: Set<Task> = new Set();
@@ -250,7 +250,7 @@ export function createRequest(
     partialBoundaries: [],
     onError: onError === undefined ? defaultErrorHandler : onError,
     onCompleteAll: onCompleteAll === undefined ? noop : onCompleteAll,
-    onReadyToStream: onReadyToStream === undefined ? noop : onReadyToStream,
+    onCompleteShell: onCompleteShell === undefined ? noop : onCompleteShell,
   };
   // This segment represents the root fallback.
   const rootSegment = createPendingSegment(request, 0, null, rootFormatContext);
@@ -1370,8 +1370,8 @@ function finishedTask(
     }
     request.pendingRootTasks--;
     if (request.pendingRootTasks === 0) {
-      const onReadyToStream = request.onReadyToStream;
-      onReadyToStream();
+      const onCompleteShell = request.onCompleteShell;
+      onCompleteShell();
     }
   } else {
     boundary.pendingTasks--;

From d3e0869324267dc62b50ee02f747f5f0a5f5c656 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 27 Sep 2021 17:04:39 -0400
Subject: [PATCH 0914/1603] Make root.unmount() synchronous  (#22444)

* Move flushSync warning to React DOM

When you call in `flushSync` from an effect, React fires a warning. I've
moved the implementation of this warning out of the reconciler and into
React DOM.

`flushSync` is a renderer API, not an isomorphic API, because it has
behavior that was designed specifically for the constraints of React
DOM. The equivalent API in a different renderer may not be the same.
For example, React Native has a different threading model than the
browser, so it might not make sense to expose a `flushSync` API to the
JavaScript thread.

* Make root.unmount() synchronous

When you unmount a root, the internal state that React stores on the
DOM node is immediately cleared. So, we should also synchronously
delete the React tree. You should be able to create a new root using
the same container.
---
 .../storeStressTestConcurrent-test.js         | 40 +++++++------
 .../src/__tests__/ReactDOMRoot-test.js        | 60 +++++++++++++++++++
 packages/react-dom/src/client/ReactDOM.js     | 23 ++++++-
 .../react-dom/src/client/ReactDOMLegacy.js    |  6 +-
 packages/react-dom/src/client/ReactDOMRoot.js | 29 +++++++--
 .../src/createReactNoop.js                    | 15 ++++-
 .../src/ReactFiberReconciler.js               | 10 ++--
 .../src/ReactFiberReconciler.new.js           |  4 +-
 .../src/ReactFiberReconciler.old.js           |  4 +-
 .../src/ReactFiberWorkLoop.new.js             | 30 ++++------
 .../src/ReactFiberWorkLoop.old.js             | 30 ++++------
 .../src/__tests__/ReactFlushSync-test.js      |  2 +
 scripts/error-codes/codes.json                |  3 +-
 13 files changed, 177 insertions(+), 79 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index 826a72552ab3..0f4a373e164c 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -246,9 +246,9 @@ describe('StoreStressConcurrent', () => {
     // 1. Capture the expected render result.
     const snapshots = [];
     let container = document.createElement('div');
-    // $FlowFixMe
-    let root = ReactDOM.createRoot(container);
     for (let i = 0; i < steps.length; i++) {
+      // $FlowFixMe
+      const root = ReactDOM.createRoot(container);
       act(() => root.render(<Root>{steps[i]}</Root>));
       // We snapshot each step once so it doesn't regress.
       snapshots.push(print(store));
@@ -320,7 +320,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() => root.render(<Root>{steps[i]}</Root>));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => root.render(<Root>{steps[j]}</Root>));
@@ -337,7 +337,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -408,9 +408,9 @@ describe('StoreStressConcurrent', () => {
     // This is the only step where we use Jest snapshots.
     const snapshots = [];
     let container = document.createElement('div');
-    // $FlowFixMe
-    let root = ReactDOM.createRoot(container);
     for (let i = 0; i < steps.length; i++) {
+      // $FlowFixMe
+      const root = ReactDOM.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -512,6 +512,8 @@ describe('StoreStressConcurrent', () => {
 
     // 2. Verify check Suspense can render same steps as initial fallback content.
     for (let i = 0; i < steps.length; i++) {
+      // $FlowFixMe
+      const root = ReactDOM.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -536,7 +538,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -582,7 +584,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -640,7 +642,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -690,7 +692,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -744,7 +746,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -897,9 +899,9 @@ describe('StoreStressConcurrent', () => {
     // This is the only step where we use Jest snapshots.
     const snapshots = [];
     let container = document.createElement('div');
-    // $FlowFixMe
-    let root = ReactDOM.createRoot(container);
     for (let i = 0; i < steps.length; i++) {
+      // $FlowFixMe
+      const root = ReactDOM.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -922,6 +924,8 @@ describe('StoreStressConcurrent', () => {
     // which is different from the snapshots above. So we take more snapshots.
     const fallbackSnapshots = [];
     for (let i = 0; i < steps.length; i++) {
+      // $FlowFixMe
+      const root = ReactDOM.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -1055,7 +1059,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1107,7 +1111,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1174,7 +1178,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1226,7 +1230,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1278,7 +1282,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        root = ReactDOM.createRoot(container);
+        const root = ReactDOM.createRoot(container);
         act(() =>
           root.render(
             <Root>
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 0c264240976e..c13c2805a5cc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -14,6 +14,7 @@ let ReactDOM = require('react-dom');
 let ReactDOMServer = require('react-dom/server');
 let Scheduler = require('scheduler');
 let act;
+let useEffect;
 
 describe('ReactDOMRoot', () => {
   let container;
@@ -26,6 +27,7 @@ describe('ReactDOMRoot', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
+    useEffect = React.useEffect;
   });
 
   it('renders children', () => {
@@ -342,4 +344,62 @@ describe('ReactDOMRoot', () => {
     });
     expect(container.textContent).toEqual('b');
   });
+
+  it('unmount is synchronous', async () => {
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render('Hi');
+    });
+    expect(container.textContent).toEqual('Hi');
+
+    await act(async () => {
+      root.unmount();
+      // Should have already unmounted
+      expect(container.textContent).toEqual('');
+    });
+  });
+
+  it('throws if an unmounted root is updated', async () => {
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      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 = ReactDOM.createRoot(container1);
+    const container2 = document.createElement('div');
+    const root2 = ReactDOM.createRoot(container2);
+
+    function App({step}) {
+      useEffect(() => {
+        if (step === 2) {
+          root2.unmount();
+        }
+      }, [step]);
+      return 'Hi';
+    }
+
+    await act(async () => {
+      root1.render(<App step={1} />);
+    });
+    expect(container1.textContent).toEqual('Hi');
+
+    expect(() => {
+      ReactDOM.flushSync(() => {
+        root1.render(<App step={2} />);
+      });
+    }).toErrorDev(
+      'Attempted to synchronously unmount a root while React was ' +
+        'already rendering.',
+    );
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 80fc3d1e4a05..a1bb39c929d4 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -23,8 +23,8 @@ import {createEventHandle} from './ReactDOMEventHandle';
 import {
   batchedUpdates,
   discreteUpdates,
-  flushSync,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  flushSync as flushSyncWithoutWarningIfAlreadyRendering,
+  isAlreadyRendering,
   flushControlled,
   injectIntoDevTools,
   attemptSynchronousHydration,
@@ -163,6 +163,25 @@ const Internals = {
   ],
 };
 
+// Overload the definition to the two valid signatures.
+// Warning, this opts-out of checking the function body.
+declare function flushSync<R>(fn: () => R): R;
+// eslint-disable-next-line no-redeclare
+declare function flushSync(): void;
+// eslint-disable-next-line no-redeclare
+function flushSync(fn) {
+  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.',
+      );
+    }
+  }
+  return flushSyncWithoutWarningIfAlreadyRendering(fn);
+}
+
 export {
   createPortal,
   batchedUpdates as unstable_batchedUpdates,
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index f03350cb2924..70dcddc50276 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -29,7 +29,7 @@ import {
   createContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  flushSync,
   getPublicRootInstance,
   findHostInstance,
   findHostInstanceWithWarning,
@@ -174,7 +174,7 @@ function legacyRenderSubtreeIntoContainer(
       };
     }
     // Initial mount should not be batched.
-    flushSyncWithoutWarningIfAlreadyRendering(() => {
+    flushSync(() => {
       updateContainer(children, fiberRoot, parentComponent, callback);
     });
   } else {
@@ -357,7 +357,7 @@ export function unmountComponentAtNode(container: Container) {
     }
 
     // Unmount should not be batched.
-    flushSyncWithoutWarningIfAlreadyRendering(() => {
+    flushSync(() => {
       legacyRenderSubtreeIntoContainer(null, null, container, false, () => {
         // $FlowFixMe This should probably use `delete container._reactRootContainer`
         container._reactRootContainer = null;
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index ba062fc3f71e..1a027d9a1e6a 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -14,7 +14,7 @@ import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 export type RootType = {
   render(children: ReactNodeList): void,
   unmount(): void,
-  _internalRoot: FiberRoot,
+  _internalRoot: FiberRoot | null,
   ...
 };
 
@@ -62,17 +62,23 @@ import {
   updateContainer,
   findHostInstanceWithNoPortals,
   registerMutableSourceForHydration,
+  flushSync,
+  isAlreadyRendering,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import invariant from 'shared/invariant';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
-function ReactDOMRoot(internalRoot) {
+function ReactDOMRoot(internalRoot: FiberRoot) {
   this._internalRoot = internalRoot;
 }
 
 ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   const root = this._internalRoot;
+  if (root === null) {
+    invariant(false, 'Cannot update an unmounted root.');
+  }
+
   if (__DEV__) {
     if (typeof arguments[1] === 'function') {
       console.error(
@@ -109,10 +115,23 @@ ReactDOMRoot.prototype.unmount = function(): void {
     }
   }
   const root = this._internalRoot;
-  const container = root.containerInfo;
-  updateContainer(null, root, null, () => {
+  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.',
+        );
+      }
+    }
+    flushSync(() => {
+      updateContainer(null, root, null, null);
+    });
     unmarkContainerAsRoot(container);
-  });
+  }
 };
 
 export function createRoot(
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 2f0d70a6029a..c5021d968939 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -921,6 +921,19 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     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.',
+        );
+      }
+    }
+    return NoopRenderer.flushSync(fn);
+  }
+
   let idCounter = 0;
 
   const ReactNoop = {
@@ -1136,7 +1149,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       }
     },
 
-    flushSync: NoopRenderer.flushSync,
+    flushSync,
     flushPassiveEffects: NoopRenderer.flushPassiveEffects,
 
     // Logs the current state of the tree.
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index d25783164e98..6e992ddd7d3b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -22,7 +22,7 @@ import {
   discreteUpdates as discreteUpdates_old,
   flushControlled as flushControlled_old,
   flushSync as flushSync_old,
-  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_old,
+  isAlreadyRendering as isAlreadyRendering_old,
   flushPassiveEffects as flushPassiveEffects_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
@@ -59,7 +59,7 @@ import {
   discreteUpdates as discreteUpdates_new,
   flushControlled as flushControlled_new,
   flushSync as flushSync_new,
-  flushSyncWithoutWarningIfAlreadyRendering as flushSyncWithoutWarningIfAlreadyRendering_new,
+  isAlreadyRendering as isAlreadyRendering_new,
   flushPassiveEffects as flushPassiveEffects_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
@@ -107,9 +107,9 @@ export const flushControlled = enableNewReconciler
   ? flushControlled_new
   : flushControlled_old;
 export const flushSync = enableNewReconciler ? flushSync_new : flushSync_old;
-export const flushSyncWithoutWarningIfAlreadyRendering = enableNewReconciler
-  ? flushSyncWithoutWarningIfAlreadyRendering_new
-  : flushSyncWithoutWarningIfAlreadyRendering_old;
+export const isAlreadyRendering = enableNewReconciler
+  ? isAlreadyRendering_new
+  : isAlreadyRendering_old;
 export const flushPassiveEffects = enableNewReconciler
   ? flushPassiveEffects_new
   : flushPassiveEffects_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 38f9955657dd..95844fcbf2e8 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -53,10 +53,10 @@ import {
   flushRoot,
   batchedUpdates,
   flushSync,
+  isAlreadyRendering,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -330,7 +330,7 @@ export {
   discreteUpdates,
   flushControlled,
   flushSync,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  isAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 3c0ae637529a..802b1bc97111 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -53,10 +53,10 @@ import {
   flushRoot,
   batchedUpdates,
   flushSync,
+  isAlreadyRendering,
   flushControlled,
   deferredUpdates,
   discreteUpdates,
-  flushSyncWithoutWarningIfAlreadyRendering,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -330,7 +330,7 @@ export {
   discreteUpdates,
   flushControlled,
   flushSync,
-  flushSyncWithoutWarningIfAlreadyRendering,
+  isAlreadyRendering,
   flushPassiveEffects,
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0ed934f00ebd..830ae6500663 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1191,11 +1191,11 @@ export function discreteUpdates<A, B, C, D, R>(
 
 // Overload the definition to the two valid signatures.
 // Warning, this opts-out of checking the function body.
-declare function flushSyncWithoutWarningIfAlreadyRendering<R>(fn: () => R): R;
+declare function flushSync<R>(fn: () => R): R;
 // eslint-disable-next-line no-redeclare
-declare function flushSyncWithoutWarningIfAlreadyRendering(): void;
+declare function flushSync(): void;
 // eslint-disable-next-line no-redeclare
-export function flushSyncWithoutWarningIfAlreadyRendering(fn) {
+export function flushSync(fn) {
   // In legacy mode, we flush pending passive effects at the beginning of the
   // next event, not at the end of the previous one.
   if (
@@ -1232,23 +1232,13 @@ export function flushSyncWithoutWarningIfAlreadyRendering(fn) {
   }
 }
 
-// Overload the definition to the two valid signatures.
-// Warning, this opts-out of checking the function body.
-declare function flushSync<R>(fn: () => R): R;
-// eslint-disable-next-line no-redeclare
-declare function flushSync(): void;
-// eslint-disable-next-line no-redeclare
-export function flushSync(fn) {
-  if (__DEV__) {
-    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
-      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.',
-      );
-    }
-  }
-  return flushSyncWithoutWarningIfAlreadyRendering(fn);
+export function isAlreadyRendering() {
+  // Used by the renderer to print a warning if certain APIs are called from
+  // the wrong context.
+  return (
+    __DEV__ &&
+    (executionContext & (RenderContext | CommitContext)) !== NoContext
+  );
 }
 
 export function flushControlled(fn: () => mixed): void {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 438dce8b13fb..9cfea1563a18 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1191,11 +1191,11 @@ export function discreteUpdates<A, B, C, D, R>(
 
 // Overload the definition to the two valid signatures.
 // Warning, this opts-out of checking the function body.
-declare function flushSyncWithoutWarningIfAlreadyRendering<R>(fn: () => R): R;
+declare function flushSync<R>(fn: () => R): R;
 // eslint-disable-next-line no-redeclare
-declare function flushSyncWithoutWarningIfAlreadyRendering(): void;
+declare function flushSync(): void;
 // eslint-disable-next-line no-redeclare
-export function flushSyncWithoutWarningIfAlreadyRendering(fn) {
+export function flushSync(fn) {
   // In legacy mode, we flush pending passive effects at the beginning of the
   // next event, not at the end of the previous one.
   if (
@@ -1232,23 +1232,13 @@ export function flushSyncWithoutWarningIfAlreadyRendering(fn) {
   }
 }
 
-// Overload the definition to the two valid signatures.
-// Warning, this opts-out of checking the function body.
-declare function flushSync<R>(fn: () => R): R;
-// eslint-disable-next-line no-redeclare
-declare function flushSync(): void;
-// eslint-disable-next-line no-redeclare
-export function flushSync(fn) {
-  if (__DEV__) {
-    if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
-      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.',
-      );
-    }
-  }
-  return flushSyncWithoutWarningIfAlreadyRendering(fn);
+export function isAlreadyRendering() {
+  // Used by the renderer to print a warning if certain APIs are called from
+  // the wrong context.
+  return (
+    __DEV__ &&
+    (executionContext & (RenderContext | CommitContext)) !== NoContext
+  );
 }
 
 export function flushControlled(fn: () => mixed): void {
diff --git a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
index 20d846f64b03..07cc3437a5e2 100644
--- a/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactFlushSync-test.js
@@ -6,6 +6,8 @@ let useState;
 let useEffect;
 let startTransition;
 
+// TODO: Migrate tests to React DOM instead of React Noop
+
 describe('ReactFlushSync', () => {
   beforeEach(() => {
     jest.resetModules();
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 1a6afe0233ed..3206efa41349 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -396,5 +396,6 @@
   "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."
+  "408": "Missing getServerSnapshot, which is required for server-rendered content.",
+  "409": "Cannot update an unmounted root."
 }

From 580e2f56d54b6f7868a98d6bd5ce07bfaa3cdbe2 Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Tue, 28 Sep 2021 00:47:30 +0330
Subject: [PATCH 0915/1603] Add isArray in devTools utils (#22438)

---
 packages/react-devtools-shared/src/isArray.js | 12 ++++++++++++
 packages/react-devtools-shared/src/utils.js   |  9 +++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/isArray.js

diff --git a/packages/react-devtools-shared/src/isArray.js b/packages/react-devtools-shared/src/isArray.js
new file mode 100644
index 000000000000..6dc19d89b21e
--- /dev/null
+++ b/packages/react-devtools-shared/src/isArray.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+const isArray = Array.isArray;
+
+export default isArray;
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 771c18688ab3..84c977f19d4e 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -48,6 +48,7 @@ import {
 } from 'react-devtools-shared/src/types';
 import {localStorageGetItem, localStorageSetItem} from './storage';
 import {meta} from './hydration';
+import isArray from './isArray';
 
 import type {ComponentFilter, ElementType} from './types';
 import type {LRUCache} from 'react-devtools-shared/src/types';
@@ -475,7 +476,7 @@ export function deletePathInObject(
   if (object != null) {
     const parent = getInObject(object, path.slice(0, length - 1));
     if (parent) {
-      if (Array.isArray(parent)) {
+      if (isArray(parent)) {
         parent.splice(((last: any): number), 1);
       } else {
         delete parent[last];
@@ -496,7 +497,7 @@ export function renamePathInObject(
       const lastOld = oldPath[length - 1];
       const lastNew = newPath[length - 1];
       parent[lastNew] = parent[lastOld];
-      if (Array.isArray(parent)) {
+      if (isArray(parent)) {
         parent.splice(((lastOld: any): number), 1);
       } else {
         delete parent[lastOld];
@@ -580,7 +581,7 @@ export function getDataType(data: Object): DataType {
         return 'number';
       }
     case 'object':
-      if (Array.isArray(data)) {
+      if (isArray(data)) {
         return 'array';
       } else if (ArrayBuffer.isView(data)) {
         return hasOwnProperty.call(data.constructor, 'BYTES_PER_ELEMENT')
@@ -799,7 +800,7 @@ export function formatDataForPreview(
           // To mimic their behavior, detect if we've been given an entries tuple.
           //   Map(2) {"abc" => 123, "def" => 123}
           //   Set(2) {"abc", 123}
-          if (Array.isArray(entryOrEntries)) {
+          if (isArray(entryOrEntries)) {
             const key = formatDataForPreview(entryOrEntries[0], true);
             const value = formatDataForPreview(entryOrEntries[1], false);
             formatted += `${key} => ${value}`;

From 8131de13e29ba626dfd311c2b4e9bb42fa4d5d6c Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Tue, 28 Sep 2021 00:50:32 +0330
Subject: [PATCH 0916/1603] prevent unused exec getCurrentValue after re-render
 (#22442)

---
 packages/react-devtools-shared/src/devtools/views/hooks.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 54b1d7d20ce8..247a865060cd 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -264,11 +264,11 @@ export function useSubscription<Value>({
   getCurrentValue: () => Value,
   subscribe: (callback: Function) => () => void,
 |}): Value {
-  const [state, setState] = useState({
+  const [state, setState] = useState(() => ({
     getCurrentValue,
     subscribe,
     value: getCurrentValue(),
-  });
+  }));
 
   if (
     state.getCurrentValue !== getCurrentValue ||

From 66388150ef1dfef1388c634a2d2ce6760a92012f Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Mon, 27 Sep 2021 16:25:10 -0700
Subject: [PATCH 0917/1603] Remove usereducer eager bailout (#22445)

* Fork dispatchAction for useState/useReducer

* Remove eager bailout from forked dispatchReducerAction, update tests

* Update eager reducer/state logic to handle state case only

* sync reconciler fork

* rename test

* test cases from #15198

* comments on new test cases

* comments on new test cases

* test case from #21419

* minor tweak to test name to kick CI
---
 .../src/ReactFiberHooks.new.js                | 136 +++++++++++++--
 .../src/ReactFiberHooks.old.js                | 136 +++++++++++++--
 .../ReactHooksWithNoopRenderer-test.js        | 163 +++++++++++++++++-
 3 files changed, 408 insertions(+), 27 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 76af5ddf5074..6d7cb75bbd75 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -125,7 +125,7 @@ const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 type Update<S, A> = {|
   lane: Lane,
   action: A,
-  eagerReducer: ((S, A) => S) | null,
+  hasEagerState: boolean,
   eagerState: S | null,
   next: Update<S, A>,
 |};
@@ -730,7 +730,7 @@ function mountReducer<S, I, A>(
     lastRenderedState: (initialState: any),
   };
   hook.queue = queue;
-  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
+  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchReducerAction.bind(
     null,
     currentlyRenderingFiber,
     queue,
@@ -801,7 +801,7 @@ function updateReducer<S, I, A>(
         const clone: Update<S, A> = {
           lane: updateLane,
           action: update.action,
-          eagerReducer: update.eagerReducer,
+          hasEagerState: update.hasEagerState,
           eagerState: update.eagerState,
           next: (null: any),
         };
@@ -829,7 +829,7 @@ function updateReducer<S, I, A>(
             // this will never be skipped by the check above.
             lane: NoLane,
             action: update.action,
-            eagerReducer: update.eagerReducer,
+            hasEagerState: update.hasEagerState,
             eagerState: update.eagerState,
             next: (null: any),
           };
@@ -837,9 +837,9 @@ function updateReducer<S, I, A>(
         }
 
         // Process this update.
-        if (update.eagerReducer === reducer) {
-          // If this update was processed eagerly, and its reducer matches the
-          // current reducer, we can use the eagerly computed state.
+        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 {
           const action = update.action;
@@ -1190,7 +1190,7 @@ function useMutableSource<Source, Snapshot>(
       lastRenderedReducer: basicStateReducer,
       lastRenderedState: snapshot,
     };
-    newQueue.dispatch = setSnapshot = (dispatchAction.bind(
+    newQueue.dispatch = setSnapshot = (dispatchSetState.bind(
       null,
       currentlyRenderingFiber,
       newQueue,
@@ -1481,7 +1481,7 @@ function mountState<S>(
   hook.queue = queue;
   const dispatch: Dispatch<
     BasicStateAction<S>,
-  > = (queue.dispatch = (dispatchAction.bind(
+  > = (queue.dispatch = (dispatchSetState.bind(
     null,
     currentlyRenderingFiber,
     queue,
@@ -2150,7 +2150,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
   // TODO: Warn if unmounted?
 }
 
-function dispatchAction<S, A>(
+function dispatchReducerAction<S, A>(
   fiber: Fiber,
   queue: UpdateQueue<S, A>,
   action: A,
@@ -2171,7 +2171,119 @@ function dispatchAction<S, A>(
   const update: Update<S, A> = {
     lane,
     action,
-    eagerReducer: null,
+    hasEagerState: false,
+    eagerState: null,
+    next: (null: any),
+  };
+
+  const alternate = fiber.alternate;
+  if (
+    fiber === currentlyRenderingFiber ||
+    (alternate !== null && alternate === currentlyRenderingFiber)
+  ) {
+    // 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;
+  } else {
+    if (isInterleavedUpdate(fiber, lane)) {
+      const interleaved = queue.interleaved;
+      if (interleaved === null) {
+        // This is the first update. Create a circular list.
+        update.next = update;
+        // At the end of the current render, this queue's interleaved updates will
+        // be transferred to the pending queue.
+        pushInterleavedQueue(queue);
+      } else {
+        update.next = interleaved.next;
+        interleaved.next = update;
+      }
+      queue.interleaved = update;
+    } else {
+      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 (__DEV__) {
+      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
+      if ('undefined' !== typeof jest) {
+        warnIfNotCurrentlyActingUpdatesInDev(fiber);
+      }
+    }
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    if (isTransitionLane(lane) && root !== null) {
+      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);
+    }
+  }
+
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      if (fiber.mode & DebugTracingMode) {
+        const name = getComponentNameFromFiber(fiber) || 'Unknown';
+        logStateUpdateScheduled(name, lane, action);
+      }
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markStateUpdateScheduled(fiber, lane);
+  }
+}
+
+function dispatchSetState<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  action: A,
+) {
+  if (__DEV__) {
+    if (typeof arguments[3] === 'function') {
+      console.error(
+        "State updates from the useState() and useReducer() Hooks don't support the " +
+          'second callback argument. To execute a side effect after ' +
+          'rendering, declare it in the component body with useEffect().',
+      );
+    }
+  }
+
+  const eventTime = requestEventTime();
+  const lane = requestUpdateLane(fiber);
+
+  const update: Update<S, A> = {
+    lane,
+    action,
+    hasEagerState: false,
     eagerState: null,
     next: (null: any),
   };
@@ -2241,7 +2353,7 @@ function dispatchAction<S, A>(
           // 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.eagerReducer = lastRenderedReducer;
+          update.hasEagerState = true;
           update.eagerState = eagerState;
           if (is(eagerState, currentState)) {
             // Fast path. We can bail out without scheduling React to re-render.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index b755852fe618..75570d1c3096 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -125,7 +125,7 @@ const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 type Update<S, A> = {|
   lane: Lane,
   action: A,
-  eagerReducer: ((S, A) => S) | null,
+  hasEagerState: boolean,
   eagerState: S | null,
   next: Update<S, A>,
 |};
@@ -730,7 +730,7 @@ function mountReducer<S, I, A>(
     lastRenderedState: (initialState: any),
   };
   hook.queue = queue;
-  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
+  const dispatch: Dispatch<A> = (queue.dispatch = (dispatchReducerAction.bind(
     null,
     currentlyRenderingFiber,
     queue,
@@ -801,7 +801,7 @@ function updateReducer<S, I, A>(
         const clone: Update<S, A> = {
           lane: updateLane,
           action: update.action,
-          eagerReducer: update.eagerReducer,
+          hasEagerState: update.hasEagerState,
           eagerState: update.eagerState,
           next: (null: any),
         };
@@ -829,7 +829,7 @@ function updateReducer<S, I, A>(
             // this will never be skipped by the check above.
             lane: NoLane,
             action: update.action,
-            eagerReducer: update.eagerReducer,
+            hasEagerState: update.hasEagerState,
             eagerState: update.eagerState,
             next: (null: any),
           };
@@ -837,9 +837,9 @@ function updateReducer<S, I, A>(
         }
 
         // Process this update.
-        if (update.eagerReducer === reducer) {
-          // If this update was processed eagerly, and its reducer matches the
-          // current reducer, we can use the eagerly computed state.
+        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 {
           const action = update.action;
@@ -1190,7 +1190,7 @@ function useMutableSource<Source, Snapshot>(
       lastRenderedReducer: basicStateReducer,
       lastRenderedState: snapshot,
     };
-    newQueue.dispatch = setSnapshot = (dispatchAction.bind(
+    newQueue.dispatch = setSnapshot = (dispatchSetState.bind(
       null,
       currentlyRenderingFiber,
       newQueue,
@@ -1481,7 +1481,7 @@ function mountState<S>(
   hook.queue = queue;
   const dispatch: Dispatch<
     BasicStateAction<S>,
-  > = (queue.dispatch = (dispatchAction.bind(
+  > = (queue.dispatch = (dispatchSetState.bind(
     null,
     currentlyRenderingFiber,
     queue,
@@ -2150,7 +2150,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
   // TODO: Warn if unmounted?
 }
 
-function dispatchAction<S, A>(
+function dispatchReducerAction<S, A>(
   fiber: Fiber,
   queue: UpdateQueue<S, A>,
   action: A,
@@ -2171,7 +2171,119 @@ function dispatchAction<S, A>(
   const update: Update<S, A> = {
     lane,
     action,
-    eagerReducer: null,
+    hasEagerState: false,
+    eagerState: null,
+    next: (null: any),
+  };
+
+  const alternate = fiber.alternate;
+  if (
+    fiber === currentlyRenderingFiber ||
+    (alternate !== null && alternate === currentlyRenderingFiber)
+  ) {
+    // 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;
+  } else {
+    if (isInterleavedUpdate(fiber, lane)) {
+      const interleaved = queue.interleaved;
+      if (interleaved === null) {
+        // This is the first update. Create a circular list.
+        update.next = update;
+        // At the end of the current render, this queue's interleaved updates will
+        // be transferred to the pending queue.
+        pushInterleavedQueue(queue);
+      } else {
+        update.next = interleaved.next;
+        interleaved.next = update;
+      }
+      queue.interleaved = update;
+    } else {
+      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 (__DEV__) {
+      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
+      if ('undefined' !== typeof jest) {
+        warnIfNotCurrentlyActingUpdatesInDev(fiber);
+      }
+    }
+    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    if (isTransitionLane(lane) && root !== null) {
+      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);
+    }
+  }
+
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      if (fiber.mode & DebugTracingMode) {
+        const name = getComponentNameFromFiber(fiber) || 'Unknown';
+        logStateUpdateScheduled(name, lane, action);
+      }
+    }
+  }
+
+  if (enableSchedulingProfiler) {
+    markStateUpdateScheduled(fiber, lane);
+  }
+}
+
+function dispatchSetState<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  action: A,
+) {
+  if (__DEV__) {
+    if (typeof arguments[3] === 'function') {
+      console.error(
+        "State updates from the useState() and useReducer() Hooks don't support the " +
+          'second callback argument. To execute a side effect after ' +
+          'rendering, declare it in the component body with useEffect().',
+      );
+    }
+  }
+
+  const eventTime = requestEventTime();
+  const lane = requestUpdateLane(fiber);
+
+  const update: Update<S, A> = {
+    lane,
+    action,
+    hasEagerState: false,
     eagerState: null,
     next: (null: any),
   };
@@ -2241,7 +2353,7 @@ function dispatchAction<S, A>(
           // 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.eagerReducer = lastRenderedReducer;
+          update.hasEagerState = true;
           update.eagerState = eagerState;
           if (is(eagerState, currentState)) {
             // Fast path. We can bail out without scheduling React to re-render.
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index b687212f2b32..f56577e8ffea 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -3867,7 +3867,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     });
   });
 
-  it('eager bailout optimization should always compare to latest rendered reducer', () => {
+  it('useReducer does not eagerly bail out of state updates', () => {
     // Edge case based on a bug report
     let setCounter;
     function App() {
@@ -3898,7 +3898,6 @@ describe('ReactHooksWithNoopRenderer', () => {
         'Render: -1',
         'Effect: 1',
         'Reducer: 1',
-        'Reducer: 1',
         'Render: 1',
       ]);
       expect(ReactNoop).toMatchRenderedOutput('1');
@@ -3911,12 +3910,170 @@ describe('ReactHooksWithNoopRenderer', () => {
       'Render: 1',
       'Effect: 2',
       'Reducer: 2',
-      'Reducer: 2',
       'Render: 2',
     ]);
     expect(ReactNoop).toMatchRenderedOutput('2');
   });
 
+  it('useReducer does not replay previous no-op actions when other state changes', () => {
+    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.unstable_yieldValue('Render disabled: ' + disabled);
+      Scheduler.unstable_yieldValue('Render count: ' + count);
+      return count;
+    }
+
+    ReactNoop.render(<Counter />);
+    expect(Scheduler).toFlushAndYield([
+      'Render disabled: true',
+      'Render count: 0',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    act(() => {
+      // These increments should have no effect, since disabled=true
+      increment();
+      increment();
+      increment();
+    });
+    expect(Scheduler).toHaveYielded([
+      'Render disabled: true',
+      'Render count: 0',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    act(() => {
+      // Enabling the updater should *not* replay the previous increment() actions
+      setDisabled(false);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Render disabled: false',
+      'Render count: 0',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+  });
+
+  it('useReducer does not replay previous no-op actions when props change', () => {
+    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.unstable_yieldValue('Render count: ' + count);
+      return count;
+    }
+
+    function App() {
+      const [disabled, _setDisabled] = useState(true);
+      setDisabled = _setDisabled;
+      Scheduler.unstable_yieldValue('Render disabled: ' + disabled);
+      return <Counter disabled={disabled} />;
+    }
+
+    ReactNoop.render(<App />);
+    expect(Scheduler).toFlushAndYield([
+      'Render disabled: true',
+      'Render count: 0',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    act(() => {
+      // These increments should have no effect, since disabled=true
+      increment();
+      increment();
+      increment();
+    });
+    expect(Scheduler).toHaveYielded(['Render count: 0']);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    act(() => {
+      // Enabling the updater should *not* replay the previous increment() actions
+      setDisabled(false);
+    });
+    expect(Scheduler).toHaveYielded([
+      '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', () => {
+    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.unstable_yieldValue('Render count: ' + count);
+      return count;
+    }
+
+    function App() {
+      const [disabled, _setDisabled] = useState(true);
+      setDisabled = _setDisabled;
+      Scheduler.unstable_yieldValue('Render disabled: ' + disabled);
+      return <Counter disabled={disabled} />;
+    }
+
+    ReactNoop.render(<App />);
+    expect(Scheduler).toFlushAndYield([
+      'Render disabled: true',
+      'Render count: 0',
+    ]);
+    expect(ReactNoop).toMatchRenderedOutput('0');
+
+    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);
+    });
+    expect(Scheduler).toHaveYielded([
+      '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 () => {

From eba248c390a5e32488536a100e2f7c0e55d43da6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 27 Sep 2021 20:47:56 -0400
Subject: [PATCH 0918/1603] [Fizz/Flight] Remove reentrancy hack (#22446)

* Remove reentrant check from Fizz/Flight

* Make startFlowing explicit in Flight

This is already an explicit call in Fizz. This moves flowing to be explicit.

That way we can avoid calling it in start() for web streams and therefore
avoid the reentrant call.

* Add regression test

This test doesn't actually error due to the streams polyfill not behaving
like Chrome but rather according to spec.

* Update the Web Streams polyfill

Not that we need this but just in case there are differences that are fixed.
---
 package.json                                  |   2 +-
 .../ReactDOMFizzServerBrowser-test.js         |   2 +-
 .../src/ReactNoopFlightServer.js              |   1 +
 .../src/ReactFlightDOMRelayServer.js          |   7 +-
 .../src/ReactFlightDOMServerBrowser.js        |  11 +-
 .../src/ReactFlightDOMServerNode.js           |   3 +-
 .../src/__tests__/ReactFlightDOM-test.js      |   2 +-
 .../__tests__/ReactFlightDOMBrowser-test.js   | 269 +++++++++++++++++-
 .../src/ReactFlightNativeRelayServer.js       |   7 +-
 packages/react-server/src/ReactFizzServer.js  |   7 -
 .../react-server/src/ReactFlightServer.js     |   7 -
 yarn.lock                                     |  11 +-
 12 files changed, 300 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 03f5aa57c6f5..258a4a093944 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/traverse": "^7.11.0",
-    "@mattiasbuelens/web-streams-polyfill": "^0.3.2",
+    "web-streams-polyfill": "^3.1.1",
     "abort-controller": "^3.0.0",
     "art": "0.10.1",
     "babel-eslint": "^10.0.3",
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 546e1f622baa..224dac20d1af 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 // Polyfills for test environment
-global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
 global.AbortController = require('abort-controller');
 
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 51a5604bd555..eed5f2219fbf 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -68,6 +68,7 @@ function render(model: ReactModel, options?: Options): Destination {
     options ? options.onError : undefined,
   );
   ReactNoopFlightServer.startWork(request);
+  ReactNoopFlightServer.startFlowing(request);
   return destination;
 }
 
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
index 56769e425539..fe2f9c8008c8 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
@@ -13,7 +13,11 @@ import type {
   Destination,
 } from './ReactFlightDOMRelayServerHostConfig';
 
-import {createRequest, startWork} from 'react-server/src/ReactFlightServer';
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+} from 'react-server/src/ReactFlightServer';
 
 type Options = {
   onError?: (error: mixed) => void,
@@ -32,6 +36,7 @@ function render(
     options ? options.onError : undefined,
   );
   startWork(request);
+  startFlowing(request);
 }
 
 export {render};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index accd749a56d5..261cf85c9bdf 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -26,7 +26,7 @@ function renderToReadableStream(
   options?: Options,
 ): ReadableStream {
   let request;
-  return new ReadableStream({
+  const stream = new ReadableStream({
     start(controller) {
       request = createRequest(
         model,
@@ -37,10 +37,17 @@ function renderToReadableStream(
       startWork(request);
     },
     pull(controller) {
-      startFlowing(request);
+      // Pull is called immediately even if the stream is not passed to anything.
+      // That's buffering too early. We want to start buffering once the stream
+      // is actually used by something so we can give it the best result possible
+      // at that point.
+      if (stream.locked) {
+        startFlowing(request);
+      }
     },
     cancel(reason) {},
   });
+  return stream;
 }
 
 export {renderToReadableStream};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index dc78c503aaf3..4529abd2b671 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -37,8 +37,9 @@ function pipeToNodeWritable(
     webpackMap,
     options ? options.onError : undefined,
   );
-  destination.on('drain', createDrainHandler(destination, request));
   startWork(request);
+  startFlowing(request);
+  destination.on('drain', createDrainHandler(destination, request));
 }
 
 export {pipeToNodeWritable};
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 12a50fce2187..60fbac215f73 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 // Polyfills for test environment
-global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextDecoder = require('util').TextDecoder;
 
 // Don't wait before processing work on the server.
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 04710cbdc5cf..8b82caac6bc7 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -5,28 +5,56 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @emails react-core
- * @jest-environment node
  */
 
 'use strict';
 
 // Polyfills for test environment
-global.ReadableStream = require('@mattiasbuelens/web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
+let webpackModuleIdx = 0;
+let webpackModules = {};
+let webpackMap = {};
+global.__webpack_require__ = function(id) {
+  return webpackModules[id];
+};
+
+let act;
 let React;
+let ReactDOM;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
+    webpackModules = {};
+    webpackMap = {};
+    act = require('jest-react').act;
     React = require('react');
+    ReactDOM = require('react-dom');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
   });
 
+  function moduleReference(moduleExport) {
+    const idx = webpackModuleIdx++;
+    webpackModules[idx] = {
+      d: moduleExport,
+    };
+    webpackMap['path/' + idx] = {
+      default: {
+        id: '' + idx,
+        chunks: [],
+        name: 'd',
+      },
+    };
+    const MODULE_TAG = Symbol.for('react.module.reference');
+    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
+  }
+
   async function waitForSuspense(fn) {
     while (true) {
       try {
@@ -75,4 +103,241 @@ describe('ReactFlightDOMBrowser', () => {
       });
     });
   });
+
+  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 = ReactServerDOMWriter.renderToReadableStream(<App />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+    await waitForSuspense(() => {
+      const model = response.readRoot();
+      expect(model).toEqual({
+        html: (
+          <div>
+            <span>hello</span>
+            <span>world</span>
+          </div>
+        ),
+      });
+    });
+  });
+
+  it('should progressively reveal server components', async () => {
+    let reportedErrors = [];
+    const {Suspense} = React;
+
+    // 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;
+      }
+    }
+
+    function MyErrorBoundary({children}) {
+      return (
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          {children}
+        </ErrorBoundary>
+      );
+    }
+
+    // Model
+    function Text({children}) {
+      return children;
+    }
+
+    function makeDelayedText() {
+      let error, _resolve, _reject;
+      let promise = new Promise((resolve, reject) => {
+        _resolve = () => {
+          promise = null;
+          resolve();
+        };
+        _reject = e => {
+          error = e;
+          promise = null;
+          reject(e);
+        };
+      });
+      function DelayedText({children}, data) {
+        if (promise) {
+          throw promise;
+        }
+        if (error) {
+          throw error;
+        }
+        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 = moduleReference(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 response.readRoot().rootContent;
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(
+      model,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      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 act(async () => {
+      resolveFriends();
+    });
+    expect(container.innerHTML).toBe('<p>(loading)</p>');
+
+    // We can now show the details. Sidebar and posts are still loading.
+    await act(async () => {
+      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 act(async () => {
+      rejectGames(theError);
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<p>(loading sidebar)</p>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    expect(reportedErrors).toEqual([theError]);
+    reportedErrors = [];
+
+    // We can now show the sidebar.
+    await act(async () => {
+      resolvePhotos();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<p>(loading posts)</p>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    // Show everything.
+    await act(async () => {
+      resolvePosts();
+    });
+    expect(container.innerHTML).toBe(
+      '<div>:name::avatar:</div>' +
+        '<div>:photos::friends:</div>' +
+        '<div>:posts:</div>' +
+        '<p>Game over</p>', // TODO: should not have message in prod.
+    );
+
+    expect(reportedErrors).toEqual([]);
+  });
 });
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
index dc09a3a80d1c..cae476b46c10 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
@@ -13,7 +13,11 @@ import type {
   Destination,
 } from './ReactFlightNativeRelayServerHostConfig';
 
-import {createRequest, startWork} from 'react-server/src/ReactFlightServer';
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+} from 'react-server/src/ReactFlightServer';
 
 function render(
   model: ReactModel,
@@ -22,6 +26,7 @@ function render(
 ): void {
   const request = createRequest(model, destination, config);
   startWork(request);
+  startFlowing(request);
 }
 
 export {render};
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index ff8764ae0696..c50ef5335297 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1748,13 +1748,7 @@ function flushPartiallyCompletedSegment(
   }
 }
 
-let reentrant = false;
 function flushCompletedQueues(request: Request): void {
-  if (reentrant) {
-    return;
-  }
-  reentrant = true;
-
   const destination = request.destination;
   beginWriting(destination);
   try {
@@ -1840,7 +1834,6 @@ function flushCompletedQueues(request: Request): void {
     }
     largeBoundaries.splice(0, i);
   } finally {
-    reentrant = false;
     completeWriting(destination);
     flushBuffered(destination);
     if (
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index b7a43254fc44..f608c9d288a4 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -706,12 +706,7 @@ function performWork(request: Request): void {
   }
 }
 
-let reentrant = false;
 function flushCompletedChunks(request: Request): void {
-  if (reentrant) {
-    return;
-  }
-  reentrant = true;
   const destination = request.destination;
   beginWriting(destination);
   try {
@@ -758,7 +753,6 @@ function flushCompletedChunks(request: Request): void {
     }
     errorChunks.splice(0, i);
   } finally {
-    reentrant = false;
     completeWriting(destination);
   }
   flushBuffered(destination);
@@ -769,7 +763,6 @@ function flushCompletedChunks(request: Request): void {
 }
 
 export function startWork(request: Request): void {
-  request.flowing = true;
   scheduleWork(() => performWork(request));
 }
 
diff --git a/yarn.lock b/yarn.lock
index bd2d7d8fb7e4..9deb96000d4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1853,11 +1853,6 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
-"@mattiasbuelens/web-streams-polyfill@^0.3.2":
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.3.2.tgz#d7d180e769ac38f30c4a8e1dd9bd4412affb7f42"
-  integrity sha512-ANZvP8lC9IXiaPM3rwM8BGMbFIZbbj0goZT/xP2IA95UIZjEToyHXT/k8G0MmSAnxKRMh5E6oLVE6jmOt5zZ/g==
-
 "@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"
@@ -6447,6 +6442,7 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
+  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"
@@ -15951,6 +15947,11 @@ web-ext@^4:
     yargs "15.3.1"
     zip-dir "1.0.2"
 
+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@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"

From 9175f4d15edfa091aa34b79dea21c3686f4fd8ed Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 28 Sep 2021 11:29:33 -0400
Subject: [PATCH 0919/1603] Scheduling Profiler: Show Suspense resource
 .displayName (#22451)

---
 .../src/EventTooltip.css                      |   2 +-
 .../src/EventTooltip.js                       |   7 +
 .../src/content-views/SuspenseEventsView.js   |   6 +-
 .../__tests__/preprocessData-test.internal.js |  40 ++
 .../src/import-worker/preprocessData.js       |  11 +-
 .../src/types.js                              |   1 +
 .../src/devtools/views/ErrorBoundary/cache.js |   3 +
 .../src/dynamicImportCache.js                 |   3 +
 .../src/hookNamesCache.js                     |   3 +
 .../src/inspectedElementCache.js              |   4 +
 .../src/SchedulingProfiler.js                 |   9 +-
 .../SchedulingProfiler-test.internal.js       | 646 +++++++++---------
 12 files changed, 406 insertions(+), 329 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
index 5ed92c546274..bf3862892bd7 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.css
@@ -46,7 +46,7 @@
   white-space: nowrap;
 }
 
-.DetailsGridURL {
+.DetailsGridLongValue {
   word-break: break-all;
   max-height: 50vh;
   overflow: hidden;
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 353cf7fc00bb..9152c7de8f56 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -335,6 +335,7 @@ const TooltipSuspenseEvent = ({
     componentName,
     duration,
     phase,
+    promiseName,
     resolution,
     timestamp,
     warning,
@@ -356,6 +357,12 @@ const TooltipSuspenseEvent = ({
         {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>
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
index b6fa643f6005..58601d3590f5 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
@@ -80,6 +80,7 @@ export class SuspenseEventsView extends View {
     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,
     };
   }
@@ -113,6 +114,7 @@ export class SuspenseEventsView extends View {
       depth,
       duration,
       phase,
+      promiseName,
       resolution,
       timestamp,
       warning,
@@ -208,7 +210,9 @@ export class SuspenseEventsView extends View {
       );
 
       let label = 'suspended';
-      if (componentName != null) {
+      if (promiseName != null) {
+        label = promiseName;
+      } else if (componentName != null) {
         label = `${componentName} ${label}`;
       }
       if (phase !== null) {
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 11af34c9680a..e24611e9daea 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -1195,6 +1195,46 @@ describe('preprocessData', () => {
     `);
   });
 
+  it('should include a suspended resource "displayName" if one is set', async () => {
+    let promise = null;
+    let resolvedValue = null;
+    function readValue(value) {
+      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;
+    }
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      const testMarks = [creactCpuProfilerSample()];
+
+      const root = ReactDOM.createRoot(document.createElement('div'));
+      act(() =>
+        root.render(
+          <React.Suspense fallback="Loading...">
+            <Component />
+          </React.Suspense>,
+        ),
+      );
+
+      testMarks.push(...createUserTimingData(clearedMarks));
+
+      const data = await preprocessData(testMarks);
+      expect(data.suspenseEvents).toHaveLength(1);
+      expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
+    }
+  });
+
   describe('warnings', () => {
     describe('long event handlers', () => {
       it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 02ba5c31c8c2..aff78142b81a 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -564,9 +564,13 @@ function processTimelineEvent(
 
       // React Events - suspense
       else if (name.startsWith('--suspense-suspend-')) {
-        const [id, componentName, phase, laneBitmaskString] = name
-          .substr(19)
-          .split('-');
+        const [
+          id,
+          componentName,
+          phase,
+          laneBitmaskString,
+          promiseName,
+        ] = name.substr(19).split('-');
         const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
 
         const availableDepths = new Array(
@@ -595,6 +599,7 @@ function processTimelineEvent(
           duration: null,
           id,
           phase: ((phase: any): Phase),
+          promiseName: promiseName || null,
           resolution: 'unresolved',
           resuspendTimestamps: null,
           timestamp: startTime,
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index ff68f3435e5f..4bfafe9a2ecc 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -60,6 +60,7 @@ export type SuspenseEvent = {|
   duration: number | null,
   +id: string,
   +phase: Phase | null,
+  promiseName: string | null,
   resolution: 'rejected' | 'resolved' | 'unresolved',
   resuspendTimestamps: Array<number> | null,
   +type: 'suspense',
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
index 71ee78e979bd..9e5061cb804e 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -70,6 +70,9 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Searching GitHub issues for error "${errorMessage}"`,
     };
     const wake = () => {
       // This assumes they won't throw.
diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js
index 78045856abb8..72c0aa708db5 100644
--- a/packages/react-devtools-shared/src/dynamicImportCache.js
+++ b/packages/react-devtools-shared/src/dynamicImportCache.js
@@ -73,6 +73,9 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Loading module "${moduleLoaderFunction.name}"`,
     };
 
     const wake = () => {
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 32179f9de1cb..106c10fc8ac1 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -92,6 +92,9 @@ export function loadHookNames(
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
     };
 
     let timeoutID;
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 040a6cb19b6a..e0e43e4022b2 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -94,7 +94,11 @@ export function inspectElement(
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Inspecting ${element.displayName || 'Unknown'}`,
     };
+
     const wake = () => {
       // This assumes they won't throw.
       callbacks.forEach(callback => callback());
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 9b0985cf4613..03148d499282 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -194,9 +194,16 @@ export function markComponentSuspended(
       const id = getWakeableID(wakeable);
       const componentName = getComponentNameFromFiber(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 Scheduling Profiler.
+      const displayName = (wakeable: any).displayName || '';
+
       // TODO (scheduling profiler) Add component stack id
       markAndClear(
-        `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}`,
+        `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
       );
       wakeable.then(
         () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 47768c52a88d..5b58342ee0b2 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -90,19 +90,19 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-1",
-        "--render-start-1",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-      ]
-    `);
+              Array [
+                "--schedule-render-1",
+                "--render-start-1",
+                "--render-stop",
+                "--commit-start-1",
+                "--react-version-17.0.3",
+                "--profiler-version-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",
+              ]
+          `);
     }
   });
 
@@ -111,10 +111,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -123,18 +123,18 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "--render-start-16",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--layout-effects-stop",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -159,14 +159,14 @@ describe('SchedulingProfiler', () => {
 
       if (gate(flags => flags.enableSchedulingProfiler)) {
         expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-64",
-          "--render-start-64",
-          "--component-render-start-Foo",
-          "--component-render-stop",
-          "--render-yield",
-        ]
-      `);
+                  Array [
+                    "--schedule-render-64",
+                    "--render-start-64",
+                    "--component-render-start-Foo",
+                    "--component-render-stop",
+                    "--render-yield",
+                  ]
+              `);
       }
     } else {
       ReactNoop.render(<Foo />);
@@ -176,8 +176,8 @@ describe('SchedulingProfiler', () => {
 
       if (gate(flags => flags.enableSchedulingProfiler)) {
         expect(getMarks()).toMatchInlineSnapshot(`
-        Array []
-      `);
+                  Array []
+              `);
       }
     }
   });
@@ -196,22 +196,22 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-1",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-1",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-      ]
-    `);
+        Array [
+          "--schedule-render-1",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-1-",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+        ]
+      `);
     }
 
     clearPendingMarks();
@@ -219,10 +219,10 @@ describe('SchedulingProfiler', () => {
     await fakeSuspensePromise;
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--suspense-resolved-0-Example",
-      ]
-    `);
+              Array [
+                "--suspense-resolved-0-Example",
+              ]
+          `);
     }
   });
 
@@ -240,22 +240,22 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-1",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-1",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-      ]
-    `);
+        Array [
+          "--schedule-render-1",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-1-",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+        ]
+      `);
     }
 
     clearPendingMarks();
@@ -263,10 +263,10 @@ describe('SchedulingProfiler', () => {
     await expect(fakeSuspensePromise).rejects.toThrow();
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--suspense-rejected-0-Example",
-      ]
-    `);
+              Array [
+                "--suspense-rejected-0-Example",
+              ]
+          `);
     }
   });
 
@@ -285,10 +285,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -297,21 +297,21 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-16",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-16-",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
     }
 
     clearPendingMarks();
@@ -319,10 +319,10 @@ describe('SchedulingProfiler', () => {
     await fakeSuspensePromise;
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--suspense-resolved-0-Example",
-      ]
-    `);
+              Array [
+                "--suspense-resolved-0-Example",
+              ]
+          `);
     }
   });
 
@@ -341,10 +341,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -353,21 +353,21 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-16",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-16-",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
     }
 
     clearPendingMarks();
@@ -375,10 +375,10 @@ describe('SchedulingProfiler', () => {
     await expect(fakeSuspensePromise).rejects.toThrow();
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--suspense-rejected-0-Example",
-      ]
-    `);
+              Array [
+                "--suspense-rejected-0-Example",
+              ]
+          `);
     }
   });
 
@@ -397,10 +397,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -409,30 +409,30 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--schedule-state-update-1-Example",
-        "--layout-effects-stop",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--schedule-state-update-1-Example",
+                "--layout-effects-stop",
+                "--render-start-1",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-1",
+                "--react-version-17.0.3",
+                "--profiler-version-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",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -450,10 +450,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -462,30 +462,30 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--schedule-forced-update-1-Example",
-        "--layout-effects-stop",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--schedule-forced-update-1-Example",
+                "--layout-effects-stop",
+                "--render-start-1",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-1",
+                "--react-version-17.0.3",
+                "--profiler-version-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",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -504,10 +504,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -518,21 +518,21 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--schedule-state-update-16-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--schedule-state-update-16-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--layout-effects-stop",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -551,10 +551,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -565,21 +565,21 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--schedule-forced-update-16-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--schedule-forced-update-16-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--layout-effects-stop",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -596,10 +596,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();
@@ -608,30 +608,30 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--schedule-state-update-1-Example",
-        "--layout-effects-stop",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--schedule-state-update-1-Example",
+                "--layout-effects-stop",
+                "--render-start-1",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-1",
+                "--react-version-17.0.3",
+                "--profiler-version-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",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -652,33 +652,33 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-        "--passive-effects-start-16",
-        "--schedule-state-update-16-Example",
-        "--passive-effects-stop",
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--layout-effects-stop",
+                "--commit-stop",
+                "--passive-effects-start-16",
+                "--schedule-state-update-16-Example",
+                "--passive-effects-stop",
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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",
+              ]
+          `);
     }
   });
 
@@ -697,22 +697,22 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--schedule-state-update-16-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-17.0.3",
-        "--profiler-version-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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+                "--render-start-16",
+                "--component-render-start-Example",
+                "--schedule-state-update-16-Example",
+                "--component-render-stop",
+                "--render-stop",
+                "--commit-start-16",
+                "--react-version-17.0.3",
+                "--profiler-version-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-16",
+                "--layout-effects-stop",
+                "--commit-stop",
+              ]
+          `);
     }
   });
 
@@ -742,35 +742,35 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--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-17.0.3",
-        "--profiler-version-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-17.0.3",
-        "--profiler-version-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",
-      ]
-    `);
+              Array [
+                "--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-17.0.3",
+                "--profiler-version-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-17.0.3",
+                "--profiler-version-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",
+              ]
+          `);
     }
   });
 
@@ -804,10 +804,10 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
+              Array [
+                "--schedule-render-16",
+              ]
+          `);
     }
 
     clearPendingMarks();

From d9fb383d6f627bf3f6e53ec7b14ba4d1260959d5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 28 Sep 2021 15:05:44 -0400
Subject: [PATCH 0920/1603] Extract queueing logic into shared functions
 (#22452)

As a follow up to #22445, this extracts the queueing logic that is
shared between `dispatchSetState` and `dispatchReducerAction` into
separate functions. It likely doesn't save any bytes since these will
get inlined, anyway, but it does make the flow a bit easier to follow.
---
 .../src/ReactFiberHooks.new.js                | 246 ++++++++----------
 .../src/ReactFiberHooks.old.js                | 246 ++++++++----------
 2 files changed, 214 insertions(+), 278 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 6d7cb75bbd75..d6123454972a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -113,9 +113,9 @@ import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {CacheContext} from './ReactFiberCacheComponent.new';
 import {
-  createUpdate,
-  enqueueUpdate,
-  entangleTransitions,
+  createUpdate as createLegacyQueueUpdate,
+  enqueueUpdate as enqueueLegacyQueueUpdate,
+  entangleTransitions as entangleLegacyQueueTransitions,
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
@@ -2125,7 +2125,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
         if (root !== null) {
-          entangleTransitions(root, provider, lane);
+          entangleLegacyQueueTransitions(root, provider, lane);
         }
 
         const seededCache = new Map();
@@ -2136,12 +2136,12 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
-        const refreshUpdate = createUpdate(eventTime, lane);
+        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
         const payload = {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueUpdate(provider, refreshUpdate, lane);
+        enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -2165,7 +2165,6 @@ function dispatchReducerAction<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2176,49 +2175,10 @@ function dispatchReducerAction<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // 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;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      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;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
@@ -2226,40 +2186,14 @@ function dispatchReducerAction<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
-
-    if (isTransitionLane(lane) && root !== null) {
-      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);
-    }
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      if (fiber.mode & DebugTracingMode) {
-        const name = getComponentNameFromFiber(fiber) || 'Unknown';
-        logStateUpdateScheduled(name, lane, action);
-      }
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
     }
   }
 
-  if (enableSchedulingProfiler) {
-    markStateUpdateScheduled(fiber, lane);
-  }
+  markUpdateInDevTools(fiber, lane, action);
 }
 
 function dispatchSetState<S, A>(
@@ -2277,7 +2211,6 @@ function dispatchSetState<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2288,50 +2221,12 @@ function dispatchSetState<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // 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;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      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;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
+    const alternate = fiber.alternate;
     if (
       fiber.lanes === NoLanes &&
       (alternate === null || alternate.lanes === NoLanes)
@@ -2377,28 +2272,101 @@ function dispatchSetState<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
+    }
+  }
+
+  markUpdateInDevTools(fiber, lane, action);
+}
+
+function isRenderPhaseUpdate(fiber: Fiber) {
+  const alternate = fiber.alternate;
+  return (
+    fiber === currentlyRenderingFiber ||
+    (alternate !== null && alternate === currentlyRenderingFiber)
+  );
+}
+
+function enqueueRenderPhaseUpdate<S, A>(
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+) {
+  // 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;
+}
 
-    if (isTransitionLane(lane) && root !== null) {
-      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 enqueueUpdate<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+  lane: Lane,
+) {
+  if (isInterleavedUpdate(fiber, lane)) {
+    const interleaved = queue.interleaved;
+    if (interleaved === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+      // At the end of the current render, this queue's interleaved updates will
+      // be transferred to the pending queue.
+      pushInterleavedQueue(queue);
+    } else {
+      update.next = interleaved.next;
+      interleaved.next = update;
+    }
+    queue.interleaved = update;
+  } else {
+    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;
+  }
+}
+
+function entangleTransitionUpdate<S, A>(
+  root: FiberRoot,
+  queue: UpdateQueue<S, A>,
+  lane: Lane,
+) {
+  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(fiber, lane, action) {
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 75570d1c3096..d4dacbc8833c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -113,9 +113,9 @@ import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {CacheContext} from './ReactFiberCacheComponent.old';
 import {
-  createUpdate,
-  enqueueUpdate,
-  entangleTransitions,
+  createUpdate as createLegacyQueueUpdate,
+  enqueueUpdate as enqueueLegacyQueueUpdate,
+  entangleTransitions as entangleLegacyQueueTransitions,
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
@@ -2125,7 +2125,7 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         const eventTime = requestEventTime();
         const root = scheduleUpdateOnFiber(provider, lane, eventTime);
         if (root !== null) {
-          entangleTransitions(root, provider, lane);
+          entangleLegacyQueueTransitions(root, provider, lane);
         }
 
         const seededCache = new Map();
@@ -2136,12 +2136,12 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
-        const refreshUpdate = createUpdate(eventTime, lane);
+        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
         const payload = {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueUpdate(provider, refreshUpdate, lane);
+        enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -2165,7 +2165,6 @@ function dispatchReducerAction<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2176,49 +2175,10 @@ function dispatchReducerAction<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // 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;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      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;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
       // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
@@ -2226,40 +2186,14 @@ function dispatchReducerAction<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
-
-    if (isTransitionLane(lane) && root !== null) {
-      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);
-    }
-  }
-
-  if (__DEV__) {
-    if (enableDebugTracing) {
-      if (fiber.mode & DebugTracingMode) {
-        const name = getComponentNameFromFiber(fiber) || 'Unknown';
-        logStateUpdateScheduled(name, lane, action);
-      }
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
     }
   }
 
-  if (enableSchedulingProfiler) {
-    markStateUpdateScheduled(fiber, lane);
-  }
+  markUpdateInDevTools(fiber, lane, action);
 }
 
 function dispatchSetState<S, A>(
@@ -2277,7 +2211,6 @@ function dispatchSetState<S, A>(
     }
   }
 
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
 
   const update: Update<S, A> = {
@@ -2288,50 +2221,12 @@ function dispatchSetState<S, A>(
     next: (null: any),
   };
 
-  const alternate = fiber.alternate;
-  if (
-    fiber === currentlyRenderingFiber ||
-    (alternate !== null && alternate === currentlyRenderingFiber)
-  ) {
-    // 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;
+  if (isRenderPhaseUpdate(fiber)) {
+    enqueueRenderPhaseUpdate(queue, update);
   } else {
-    if (isInterleavedUpdate(fiber, lane)) {
-      const interleaved = queue.interleaved;
-      if (interleaved === null) {
-        // This is the first update. Create a circular list.
-        update.next = update;
-        // At the end of the current render, this queue's interleaved updates will
-        // be transferred to the pending queue.
-        pushInterleavedQueue(queue);
-      } else {
-        update.next = interleaved.next;
-        interleaved.next = update;
-      }
-      queue.interleaved = update;
-    } else {
-      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;
-    }
+    enqueueUpdate(fiber, queue, update, lane);
 
+    const alternate = fiber.alternate;
     if (
       fiber.lanes === NoLanes &&
       (alternate === null || alternate.lanes === NoLanes)
@@ -2377,28 +2272,101 @@ function dispatchSetState<S, A>(
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
+    const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    if (root !== null) {
+      entangleTransitionUpdate(root, queue, lane);
+    }
+  }
+
+  markUpdateInDevTools(fiber, lane, action);
+}
+
+function isRenderPhaseUpdate(fiber: Fiber) {
+  const alternate = fiber.alternate;
+  return (
+    fiber === currentlyRenderingFiber ||
+    (alternate !== null && alternate === currentlyRenderingFiber)
+  );
+}
+
+function enqueueRenderPhaseUpdate<S, A>(
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+) {
+  // 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;
+}
 
-    if (isTransitionLane(lane) && root !== null) {
-      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 enqueueUpdate<S, A>(
+  fiber: Fiber,
+  queue: UpdateQueue<S, A>,
+  update: Update<S, A>,
+  lane: Lane,
+) {
+  if (isInterleavedUpdate(fiber, lane)) {
+    const interleaved = queue.interleaved;
+    if (interleaved === null) {
+      // This is the first update. Create a circular list.
+      update.next = update;
+      // At the end of the current render, this queue's interleaved updates will
+      // be transferred to the pending queue.
+      pushInterleavedQueue(queue);
+    } else {
+      update.next = interleaved.next;
+      interleaved.next = update;
+    }
+    queue.interleaved = update;
+  } else {
+    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;
+  }
+}
+
+function entangleTransitionUpdate<S, A>(
+  root: FiberRoot,
+  queue: UpdateQueue<S, A>,
+  lane: Lane,
+) {
+  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(fiber, lane, action) {
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {

From 7843b142ac804655990157a7be1e4641b4b6695f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 28 Sep 2021 18:32:09 -0400
Subject: [PATCH 0921/1603] [Fizz/Flight] Pass in Destination lazily to
 startFlowing instead of in createRequest (#22449)

* Pass in Destination lazily in startFlowing instead of createRequest

* Delay fatal errors until we have a destination to forward them to

* Flow can now be inferred by whether there's a destination set

We can drop the destination when we're not flowing since there's nothing to
write to.

Fatal errors now close once flowing starts back up again.

* Defer fatal errors in Flight too
---
 .../__tests__/ReactDOMFizzServerNode-test.js  |  5 +-
 .../src/server/ReactDOMFizzServerBrowser.js   | 22 ++++---
 .../src/server/ReactDOMFizzServerNode.js      | 13 ++--
 .../src/server/ReactDOMLegacyServerBrowser.js |  3 +-
 .../src/server/ReactDOMLegacyServerNode.js    |  5 +-
 .../src/ReactNoopFlightServer.js              |  3 +-
 .../src/ReactNoopServer.js                    |  3 +-
 .../src/ReactDOMServerFB.js                   |  3 +-
 .../src/ReactFlightDOMRelayServer.js          |  3 +-
 .../src/ReactFlightDOMServerBrowser.js        | 14 ++---
 .../src/ReactFlightDOMServerNode.js           |  5 +-
 .../src/ReactFlightNativeRelayServer.js       |  4 +-
 packages/react-server/src/ReactFizzServer.js  | 59 ++++++++++++-------
 .../react-server/src/ReactFlightServer.js     | 56 ++++++++++++------
 14 files changed, 110 insertions(+), 88 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 78a8374d09cc..949ddcb04fa2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -154,7 +154,7 @@ describe('ReactDOMFizzServer', () => {
   it('should error the stream when an error is thrown at the root', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    ReactDOMFizzServer.pipeToNodeWritable(
+    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
       <div>
         <Throw />
       </div>,
@@ -166,7 +166,8 @@ describe('ReactDOMFizzServer', () => {
       },
     );
 
-    // The stream is errored even if we haven't started writing.
+    // The stream is errored once we start writing.
+    startWriting();
 
     await completed;
 
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 42752a34c0bd..d23820124762 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -37,7 +37,15 @@ function renderToReadableStream(
   children: ReactNodeList,
   options?: Options,
 ): ReadableStream {
-  let request;
+  const request = createRequest(
+    children,
+    createResponseState(options ? options.identifierPrefix : undefined),
+    createRootFormatContext(options ? options.namespaceURI : undefined),
+    options ? options.progressiveChunkSize : undefined,
+    options ? options.onError : undefined,
+    options ? options.onCompleteAll : undefined,
+    options ? options.onCompleteShell : undefined,
+  );
   if (options && options.signal) {
     const signal = options.signal;
     const listener = () => {
@@ -48,16 +56,6 @@ function renderToReadableStream(
   }
   const stream = new ReadableStream({
     start(controller) {
-      request = createRequest(
-        children,
-        controller,
-        createResponseState(options ? options.identifierPrefix : undefined),
-        createRootFormatContext(options ? options.namespaceURI : undefined),
-        options ? options.progressiveChunkSize : undefined,
-        options ? options.onError : undefined,
-        options ? options.onCompleteAll : undefined,
-        options ? options.onCompleteShell : undefined,
-      );
       startWork(request);
     },
     pull(controller) {
@@ -66,7 +64,7 @@ function renderToReadableStream(
       // is actually used by something so we can give it the best result possible
       // at that point.
       if (stream.locked) {
-        startFlowing(request);
+        startFlowing(request, controller);
       }
     },
     cancel(reason) {},
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 2bfb505ea062..fb1939f0c404 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -25,7 +25,7 @@ import {
 } from './ReactDOMServerFormatConfig';
 
 function createDrainHandler(destination, request) {
-  return () => startFlowing(request);
+  return () => startFlowing(request, destination);
 }
 
 type Options = {|
@@ -44,14 +44,9 @@ type Controls = {|
   startWriting(): void,
 |};
 
-function createRequestImpl(
-  children: ReactNodeList,
-  destination: Writable,
-  options: void | Options,
-) {
+function createRequestImpl(children: ReactNodeList, options: void | Options) {
   return createRequest(
     children,
-    destination,
     createResponseState(options ? options.identifierPrefix : undefined),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
@@ -66,7 +61,7 @@ function pipeToNodeWritable(
   destination: Writable,
   options?: Options,
 ): Controls {
-  const request = createRequestImpl(children, destination, options);
+  const request = createRequestImpl(children, options);
   let hasStartedFlowing = false;
   startWork(request);
   return {
@@ -75,7 +70,7 @@ function pipeToNodeWritable(
         return;
       }
       hasStartedFlowing = true;
-      startFlowing(request);
+      startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
     },
     abort() {
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index d05b44200e62..8982d4d9341b 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -59,7 +59,6 @@ function renderToStringImpl(
   }
   const request = createRequest(
     children,
-    destination,
     createResponseState(
       generateStaticMarkup,
       options ? options.identifierPrefix : undefined,
@@ -74,7 +73,7 @@ function renderToStringImpl(
   // 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);
-  startFlowing(request);
+  startFlowing(request, destination);
   if (didFatal) {
     throw fatalError;
   }
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index ce2924c9a53a..71ebab5ac0f0 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -54,7 +54,7 @@ class ReactMarkupReadableStream extends Readable {
 
   _read(size) {
     if (this.startedFlowing) {
-      startFlowing(this.request);
+      startFlowing(this.request, this);
     }
   }
 }
@@ -72,12 +72,11 @@ function renderToNodeStreamImpl(
     // We wait until everything has loaded before starting to write.
     // That way we only end up with fully resolved HTML even if we suspend.
     destination.startedFlowing = true;
-    startFlowing(request);
+    startFlowing(request, destination);
   }
   const destination = new ReactMarkupReadableStream();
   const request = createRequest(
     children,
-    destination,
     createResponseState(false, options ? options.identifierPrefix : undefined),
     createRootFormatContext(),
     Infinity,
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index eed5f2219fbf..f6d64c003f9e 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -63,12 +63,11 @@ function render(model: ReactModel, options?: Options): Destination {
   const bundlerConfig = undefined;
   const request = ReactNoopFlightServer.createRequest(
     model,
-    destination,
     bundlerConfig,
     options ? options.onError : undefined,
   );
   ReactNoopFlightServer.startWork(request);
-  ReactNoopFlightServer.startFlowing(request);
+  ReactNoopFlightServer.startFlowing(request, destination);
   return destination;
 }
 
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 279c8b7b217f..080c3042080a 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -259,7 +259,6 @@ function render(children: React$Element<any>, options?: Options): Destination {
   };
   const request = ReactNoopServer.createRequest(
     children,
-    destination,
     null,
     null,
     options ? options.progressiveChunkSize : undefined,
@@ -268,7 +267,7 @@ function render(children: React$Element<any>, options?: Options): Destination {
     options ? options.onCompleteShell : undefined,
   );
   ReactNoopServer.startWork(request);
-  ReactNoopServer.startFlowing(request);
+  ReactNoopServer.startFlowing(request, destination);
   return destination;
 }
 
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index 290a1f227e61..b5b6ba84e77d 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -46,7 +46,6 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
   };
   const request = createRequest(
     children,
-    destination,
     createResponseState(options ? options.identifierPrefix : undefined),
     createRootFormatContext(undefined),
     options ? options.progressiveChunkSize : undefined,
@@ -71,7 +70,7 @@ function abortStream(stream: Stream): void {
 function renderNextChunk(stream: Stream): string {
   const {request, destination} = stream;
   performWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
   if (destination.fatal) {
     throw destination.error;
   }
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
index fe2f9c8008c8..7feb6e3f0eff 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
@@ -31,12 +31,11 @@ function render(
 ): void {
   const request = createRequest(
     model,
-    destination,
     config,
     options ? options.onError : undefined,
   );
   startWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
 }
 
 export {render};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 261cf85c9bdf..9d632dfb0712 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -25,15 +25,13 @@ function renderToReadableStream(
   webpackMap: BundlerConfig,
   options?: Options,
 ): ReadableStream {
-  let request;
+  const request = createRequest(
+    model,
+    webpackMap,
+    options ? options.onError : undefined,
+  );
   const stream = new ReadableStream({
     start(controller) {
-      request = createRequest(
-        model,
-        controller,
-        webpackMap,
-        options ? options.onError : undefined,
-      );
       startWork(request);
     },
     pull(controller) {
@@ -42,7 +40,7 @@ function renderToReadableStream(
       // is actually used by something so we can give it the best result possible
       // at that point.
       if (stream.locked) {
-        startFlowing(request);
+        startFlowing(request, controller);
       }
     },
     cancel(reason) {},
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 4529abd2b671..35773279890c 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -18,7 +18,7 @@ import {
 } from 'react-server/src/ReactFlightServer';
 
 function createDrainHandler(destination, request) {
-  return () => startFlowing(request);
+  return () => startFlowing(request, destination);
 }
 
 type Options = {
@@ -33,12 +33,11 @@ function pipeToNodeWritable(
 ): void {
   const request = createRequest(
     model,
-    destination,
     webpackMap,
     options ? options.onError : undefined,
   );
   startWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
   destination.on('drain', createDrainHandler(destination, request));
 }
 
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
index cae476b46c10..dd9bd6cc60ad 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServer.js
@@ -24,9 +24,9 @@ function render(
   destination: Destination,
   config: BundlerConfig,
 ): void {
-  const request = createRequest(model, destination, config);
+  const request = createRequest(model, config);
   startWork(request);
-  startFlowing(request);
+  startFlowing(request, destination);
 }
 
 export {render};
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index c50ef5335297..e9396c861ee4 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -166,15 +166,16 @@ type Segment = {
   +boundary: null | SuspenseBoundary,
 };
 
-const BUFFERING = 0;
-const FLOWING = 1;
+const OPEN = 0;
+const CLOSING = 1;
 const CLOSED = 2;
 
 export opaque type Request = {
-  +destination: Destination,
+  destination: null | Destination,
   +responseState: ResponseState,
   +progressiveChunkSize: number,
   status: 0 | 1 | 2,
+  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.
@@ -221,7 +222,6 @@ function noop(): void {}
 
 export function createRequest(
   children: ReactNodeList,
-  destination: Destination,
   responseState: ResponseState,
   rootFormatContext: FormatContext,
   progressiveChunkSize: void | number,
@@ -232,13 +232,14 @@ export function createRequest(
   const pingedTasks = [];
   const abortSet: Set<Task> = new Set();
   const request = {
-    destination,
+    destination: null,
     responseState,
     progressiveChunkSize:
       progressiveChunkSize === undefined
         ? DEFAULT_PROGRESSIVE_CHUNK_SIZE
         : progressiveChunkSize,
-    status: BUFFERING,
+    status: OPEN,
+    fatalError: null,
     nextSegmentId: 0,
     allPendingTasks: 0,
     pendingRootTasks: 0,
@@ -404,8 +405,13 @@ function fatalError(request: Request, error: mixed): 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.
-  request.status = CLOSED;
-  closeWithError(request.destination, error);
+  if (request.destination !== null) {
+    request.status = CLOSED;
+    closeWithError(request.destination, error);
+  } else {
+    request.status = CLOSING;
+    request.fatalError = error;
+  }
 }
 
 function renderSuspenseBoundary(
@@ -1330,7 +1336,9 @@ function abortTask(task: Task): void {
     // the request;
     if (request.status !== CLOSED) {
       request.status = CLOSED;
-      close(request.destination);
+      if (request.destination !== null) {
+        close(request.destination);
+      }
     }
   } else {
     boundary.pendingTasks--;
@@ -1490,8 +1498,8 @@ export function performWork(request: Request): void {
       retryTask(request, task);
     }
     pingedTasks.splice(0, i);
-    if (request.status === FLOWING) {
-      flushCompletedQueues(request);
+    if (request.destination !== null) {
+      flushCompletedQueues(request, request.destination);
     }
   } catch (error) {
     reportError(request, error);
@@ -1748,8 +1756,10 @@ function flushPartiallyCompletedSegment(
   }
 }
 
-function flushCompletedQueues(request: Request): void {
-  const destination = request.destination;
+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
@@ -1775,7 +1785,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < clientRenderedBoundaries.length; i++) {
       const boundary = clientRenderedBoundaries[i];
       if (!flushClientRenderedBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         clientRenderedBoundaries.splice(0, i);
         return;
@@ -1790,7 +1800,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < completedBoundaries.length; i++) {
       const boundary = completedBoundaries[i];
       if (!flushCompletedBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         completedBoundaries.splice(0, i);
         return;
@@ -1811,7 +1821,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < partialBoundaries.length; i++) {
       const boundary = partialBoundaries[i];
       if (!flushPartialBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         partialBoundaries.splice(0, i);
         return;
@@ -1826,7 +1836,7 @@ function flushCompletedQueues(request: Request): void {
     for (i = 0; i < largeBoundaries.length; i++) {
       const boundary = largeBoundaries[i];
       if (!flushCompletedBoundary(request, destination, boundary)) {
-        request.status = BUFFERING;
+        request.destination = null;
         i++;
         largeBoundaries.splice(0, i);
         return;
@@ -1861,13 +1871,18 @@ export function startWork(request: Request): void {
   scheduleWork(() => performWork(request));
 }
 
-export function startFlowing(request: Request): void {
+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;
   }
-  request.status = FLOWING;
+  request.destination = destination;
   try {
-    flushCompletedQueues(request);
+    flushCompletedQueues(request, destination);
   } catch (error) {
     reportError(request, error);
     fatalError(request, error);
@@ -1880,8 +1895,8 @@ export function abort(request: Request): void {
     const abortableTasks = request.abortableTasks;
     abortableTasks.forEach(abortTask, request);
     abortableTasks.clear();
-    if (request.status === FLOWING) {
-      flushCompletedQueues(request);
+    if (request.destination !== null) {
+      flushCompletedQueues(request, request.destination);
     }
   } catch (error) {
     reportError(request, error);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index f608c9d288a4..8247a904ec99 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -72,7 +72,9 @@ type Segment = {
 };
 
 export type Request = {
-  destination: Destination,
+  status: 0 | 1 | 2,
+  fatalError: mixed,
+  destination: null | Destination,
   bundlerConfig: BundlerConfig,
   cache: Map<Function, mixed>,
   nextChunkId: number,
@@ -84,25 +86,30 @@ export type Request = {
   writtenSymbols: Map<Symbol, number>,
   writtenModules: Map<ModuleKey, number>,
   onError: (error: mixed) => void,
-  flowing: boolean,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error: mixed) {
-  console['error'](error); // Don't transform to our wrapper
+  console['error'](error);
+  // Don't transform to our wrapper
 }
 
+const OPEN = 0;
+const CLOSING = 1;
+const CLOSED = 2;
+
 export function createRequest(
   model: ReactModel,
-  destination: Destination,
   bundlerConfig: BundlerConfig,
   onError: void | ((error: mixed) => void),
 ): Request {
   const pingedSegments = [];
   const request = {
-    destination,
+    status: OPEN,
+    fatalError: null,
+    destination: null,
     bundlerConfig,
     cache: new Map(),
     nextChunkId: 0,
@@ -114,7 +121,6 @@ export function createRequest(
     writtenSymbols: new Map(),
     writtenModules: new Map(),
     onError: onError === undefined ? defaultErrorHandler : onError,
-    flowing: false,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
     },
@@ -604,7 +610,13 @@ function reportError(request: Request, error: mixed): void {
 
 function fatalError(request: Request, error: mixed): void {
   // This is called outside error handling code such as if an error happens in React internals.
-  closeWithError(request.destination, error);
+  if (request.destination !== null) {
+    request.status = CLOSED;
+    closeWithError(request.destination, error);
+  } else {
+    request.status = CLOSING;
+    request.fatalError = error;
+  }
 }
 
 function emitErrorChunk(request: Request, id: number, error: mixed): void {
@@ -694,8 +706,8 @@ function performWork(request: Request): void {
       const segment = pingedSegments[i];
       retrySegment(request, segment);
     }
-    if (request.flowing) {
-      flushCompletedChunks(request);
+    if (request.destination !== null) {
+      flushCompletedChunks(request, request.destination);
     }
   } catch (error) {
     reportError(request, error);
@@ -706,8 +718,10 @@ function performWork(request: Request): void {
   }
 }
 
-function flushCompletedChunks(request: Request): void {
-  const destination = request.destination;
+function flushCompletedChunks(
+  request: Request,
+  destination: Destination,
+): void {
   beginWriting(destination);
   try {
     // We emit module chunks first in the stream so that
@@ -718,7 +732,7 @@ function flushCompletedChunks(request: Request): void {
       request.pendingChunks--;
       const chunk = moduleChunks[i];
       if (!writeChunk(destination, chunk)) {
-        request.flowing = false;
+        request.destination = null;
         i++;
         break;
       }
@@ -731,7 +745,7 @@ function flushCompletedChunks(request: Request): void {
       request.pendingChunks--;
       const chunk = jsonChunks[i];
       if (!writeChunk(destination, chunk)) {
-        request.flowing = false;
+        request.destination = null;
         i++;
         break;
       }
@@ -746,7 +760,7 @@ function flushCompletedChunks(request: Request): void {
       request.pendingChunks--;
       const chunk = errorChunks[i];
       if (!writeChunk(destination, chunk)) {
-        request.flowing = false;
+        request.destination = null;
         i++;
         break;
       }
@@ -766,10 +780,18 @@ export function startWork(request: Request): void {
   scheduleWork(() => performWork(request));
 }
 
-export function startFlowing(request: Request): void {
-  request.flowing = true;
+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;
+  }
+  request.destination = destination;
   try {
-    flushCompletedChunks(request);
+    flushCompletedChunks(request, destination);
   } catch (error) {
     reportError(request, error);
     fatalError(request, error);

From 033efe7312cdf73118922b279d9b1ae29a2f693d Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 28 Sep 2021 21:32:57 -0400
Subject: [PATCH 0922/1603] Call get snapshot in useSyncExternalStore server
 shim (#22453)

* Call getSnapshot in shim

* just change useSyncExternalStoreServer

* remove builtInAPI Check in useSyncExternalStoreClient
---
 .../useSyncExternalStoreShimServer-test.js    |  6 ++++--
 .../src/useSyncExternalStore.js               | 10 +++++++++-
 .../src/useSyncExternalStoreClient.js         | 19 ++-----------------
 .../src/useSyncExternalStoreServer.js         | 11 +----------
 4 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
index 9fa5b9ce21eb..b46e02872406 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
@@ -92,7 +92,9 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     }
 
     const html = ReactDOMServer.renderToString(<App />);
-    expect(Scheduler).toHaveYielded(['server']);
-    expect(html).toEqual('server');
+
+    // We don't call getServerSnapshot in the shim
+    expect(Scheduler).toHaveYielded(['client']);
+    expect(html).toEqual('client');
   });
 });
diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index 8a1a5c719113..c15228717426 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -10,5 +10,13 @@
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import {useSyncExternalStore as client} from './useSyncExternalStoreClient';
 import {useSyncExternalStore as server} from './useSyncExternalStoreServer';
+import * as React from 'react';
 
-export const useSyncExternalStore = canUseDOM ? client : server;
+const {unstable_useSyncExternalStore: builtInAPI} = React;
+
+export const useSyncExternalStore =
+  builtInAPI !== undefined
+    ? ((builtInAPI: any): typeof client)
+    : canUseDOM
+    ? client
+    : server;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
index 76e7fda36f83..dc42169c399d 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
@@ -12,22 +12,7 @@ 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,
-  // The built-in API is still prefixed.
-  unstable_useSyncExternalStore: builtInAPI,
-} = React;
-
-// Prefer the built-in API, if it exists. If it doesn't exist, then we assume
-// we're in version 16 or 17, so rendering is always synchronous. The shim
-// does not support concurrent rendering, only the built-in API.
-export const useSyncExternalStore =
-  builtInAPI !== undefined
-    ? ((builtInAPI: any): typeof useSyncExternalStore_client)
-    : useSyncExternalStore_client;
+const {useState, useEffect, useLayoutEffect, useDebugValue} = React;
 
 let didWarnOld18Alpha = false;
 let didWarnUncachedGetSnapshot = false;
@@ -42,7 +27,7 @@ let didWarnUncachedGetSnapshot = false;
 //
 // 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.
-function useSyncExternalStore_client<T>(
+export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
   // Note: The client shim does not use getServerSnapshot, because pre-18
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js b/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
index 1bf2a752273d..52903dd4aca8 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
@@ -7,19 +7,10 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
   getServerSnapshot?: () => T,
 ): T {
-  if (getServerSnapshot === undefined) {
-    invariant(
-      false,
-      'Missing getServerSnapshot, which is required for server-' +
-        'rendered content.',
-    );
-  }
-  return getServerSnapshot();
+  return getSnapshot();
 }

From 0883c4cd3a0bba4cc3eb2a1921cf21b1d78ddea2 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 29 Sep 2021 12:06:13 -0400
Subject: [PATCH 0923/1603] React DevTools 4.18.0 -> 4.19.0 (#22461)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 ++--
 .../edge/manifest.json                        |  4 ++--
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 .../package.json                              |  2 +-
 packages/react-devtools/CHANGELOG.md          | 21 +++++++++++++++++++
 packages/react-devtools/package.json          |  4 ++--
 8 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 4d1ebdd9db8a..4c6d33dbd585 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index ba5dd667cdd2..e20186cc22c5 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.18.0",
-  "version_name": "4.18.0",
+  "version": "4.19.0",
+  "version_name": "4.19.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 0fdb82088c95..ad8d5eade5d3 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.18.0",
-  "version_name": "4.18.0",
+  "version": "4.19.0",
+  "version_name": "4.19.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 7ef9d847b15f..56b0ee91269c 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index e6e9807c3901..a3905de97f0b 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 98a386ba1949..4b10d75406d3 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index d858072a8d7b..e4ca09b65faf 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,27 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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 indicies 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 12f93895780c..6ff26538ca96 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.18.0",
+    "react-devtools-core": "4.19.0",
     "update-notifier": "^2.1.0"
   }
 }

From 95ecd4a2c360921f9db91bf8db5cad1aa5a34a5e Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 29 Sep 2021 17:46:34 -0400
Subject: [PATCH 0924/1603] [DevTools] Commands for internal builds all follow
 :fb convention (#22463)

---
 packages/react-devtools-extensions/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index a2642788b5f4..7d1f018a6bb2 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -6,12 +6,12 @@
     "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
     "build:dev": "cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev",
     "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
-    "build:chrome:crx": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
+    "build:chrome:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./chrome/build --crx",
     "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
     "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
     "build:edge": "cross-env NODE_ENV=production node ./edge/build",
-    "build:edge:crx": "cross-env NODE_ENV=production node ./edge/build --crx",
+    "build:edge:fb": "cross-env NODE_ENV=production FEATURE_FLAG_TARGET=extension-fb node ./edge/build --crx",
     "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
     "test:firefox": "node ./firefox/test",

From 201af81b0168cabea3cc07cd8201378a4fec4aaf Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Wed, 29 Sep 2021 15:49:52 -0700
Subject: [PATCH 0925/1603] Release pooled cache reference in complete/unwind
 (#22464)

---
 .../src/ReactFiberCacheComponent.new.js                | 10 ++++++----
 .../src/ReactFiberCacheComponent.old.js                | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 042a8b2efc09..0d284c683ed1 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -99,14 +99,16 @@ export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
     return;
   }
   // The `pooledCache` variable points to the cache that was used for new
-  // cache boundaries during this render, if any. Stash it on the root so that
-  // parallel transitions may share the same cache. We will clear this field
-  // once all the transitions that depend on it (which we track with
-  // `pooledCacheLanes`) have committed.
+  // cache boundaries during this render, if any. Move ownership of the
+  // cache to the root so that parallel transitions may share the same
+  // cache. We will clear this field once all the transitions that depend
+  // on it (which we track with `pooledCacheLanes`) have committed.
   root.pooledCache = pooledCache;
   if (pooledCache !== null) {
     root.pooledCacheLanes |= renderLanes;
   }
+  // set to null, conceptually we are moving ownership to the root
+  pooledCache = null;
 }
 
 export function restoreSpawnedCachePool(
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index 2bc64254d309..dd450fff76b5 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -99,14 +99,16 @@ export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
     return;
   }
   // The `pooledCache` variable points to the cache that was used for new
-  // cache boundaries during this render, if any. Stash it on the root so that
-  // parallel transitions may share the same cache. We will clear this field
-  // once all the transitions that depend on it (which we track with
-  // `pooledCacheLanes`) have committed.
+  // cache boundaries during this render, if any. Move ownership of the
+  // cache to the root so that parallel transitions may share the same
+  // cache. We will clear this field once all the transitions that depend
+  // on it (which we track with `pooledCacheLanes`) have committed.
   root.pooledCache = pooledCache;
   if (pooledCache !== null) {
     root.pooledCacheLanes |= renderLanes;
   }
+  // set to null, conceptually we are moving ownership to the root
+  pooledCache = null;
 }
 
 export function restoreSpawnedCachePool(

From ec4ac97500e850a90f837668a261533e780f40f4 Mon Sep 17 00:00:00 2001
From: Ay-Ay-Ron <34754995+aaronamendez@users.noreply.github.com>
Date: Thu, 30 Sep 2021 09:58:01 -0400
Subject: [PATCH 0926/1603] Fixed Link on Documentation (#22465)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 1a5a64e0dc70..54a095f7d0f4 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-
 
 ## Documentation
 
-You can find the React documentation [on the website](https://reactjs.org/docs).  
+You can find the React documentation [on the website](https://reactjs.org/).  
 
 Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
 

From 7d38e4fd896911f7204165853236e1b7f2786a60 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Sep 2021 11:12:25 -0400
Subject: [PATCH 0927/1603] CodeSandbox CI: Fall back to local build (#22473)

The `download-experimental-build` script has been flaky on CodeSandbox
CI, I think because of GitHub rate limiting.

Until we figure out how to fix that, I've updated it to fall back to a
local build.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 258a4a093944..e7471a686ce8 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,6 @@
     "publish-prereleases": "node ./scripts/release/publish-using-ci-workflow.js",
     "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": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head"
+    "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler"
   }
 }

From 47177247f8c792fbb9a33328c913e246ff139a2d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 30 Sep 2021 12:48:53 -0400
Subject: [PATCH 0928/1603] DevTools: Fixed potential cache miss when
 insepcting elements (#22472)

---
 .../src/__tests__/inspectedElement-test.js    | 61 +++++++++++++++++++
 .../src/backend/agent.js                      |  4 +-
 .../src/backend/legacy/renderer.js            |  3 +-
 .../src/backend/renderer.js                   |  3 +-
 .../src/backend/types.js                      |  1 +
 .../react-devtools-shared/src/backendAPI.js   |  3 +
 packages/react-devtools-shared/src/bridge.js  |  1 +
 .../src/inspectedElementMutableSource.js      | 21 +++++--
 8 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index eb196e76b480..211cd27b1522 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -384,6 +384,67 @@ describe('InspectedElement', () => {
     `);
   });
 
+  // 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;
+    });
+
+    const container = document.createElement('div');
+    await utils.actAsync(() =>
+      legacyRender(
+        <Wrapper>
+          <Target a={1} b="abc" />
+        </Wrapper>,
+        container,
+      ),
+    );
+
+    targetRenderCount = 0;
+
+    let inspectedElement = await inspectElementAtIndex(1);
+    expect(targetRenderCount).toBe(1);
+    expect(inspectedElement.props).toMatchInlineSnapshot(`
+      Object {
+        "a": 1,
+        "b": "abc",
+      }
+    `);
+
+    const prevInspectedElement = inspectedElement;
+
+    // This test causes an intermediate error to be logged but we can ignore it.
+    console.error = () => {};
+
+    // Wait for our check-for-updates poll to get the new data.
+    jest.runOnlyPendingTimers();
+    await Promise.resolve();
+
+    // 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.
+    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;
 
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 9eea501cbdd0..fdd46bf9c88f 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -72,6 +72,7 @@ type CopyElementParams = {|
 |};
 
 type InspectElementParams = {|
+  forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
@@ -346,6 +347,7 @@ export default class Agent extends EventEmitter<{|
   };
 
   inspectElement = ({
+    forceFullData,
     id,
     path,
     rendererID,
@@ -357,7 +359,7 @@ export default class Agent extends EventEmitter<{|
     } else {
       this._bridge.send(
         'inspectedElement',
-        renderer.inspectElement(requestID, id, path),
+        renderer.inspectElement(requestID, id, path, forceFullData),
       );
 
       // When user selects an element, stop trying to restore the selection,
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 1f0aed404087..d799ce72a275 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -694,8 +694,9 @@ export function attach(
     requestID: number,
     id: number,
     path: Array<string | number> | null,
+    forceFullData: boolean,
   ): InspectedElementPayload {
-    if (currentlyInspectedElementID !== id) {
+    if (forceFullData || currentlyInspectedElementID !== id) {
       currentlyInspectedElementID = id;
       currentlyInspectedPaths = {};
     }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index a2469577a0a3..011f055e505a 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -3439,12 +3439,13 @@ export function attach(
     requestID: number,
     id: number,
     path: Array<string | number> | null,
+    forceFullData: boolean,
   ): InspectedElementPayload {
     if (path !== null) {
       mergeInspectedPaths(path);
     }
 
-    if (isMostRecentlyInspectedElement(id)) {
+    if (isMostRecentlyInspectedElement(id) && !forceFullData) {
       if (!hasElementUpdatedSinceLastInspected) {
         if (path !== null) {
           let secondaryCategory = null;
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 2206dd94fb12..bbf574ed21a5 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -339,6 +339,7 @@ export type RendererInterface = {
     requestID: number,
     id: number,
     inspectedPaths: Object,
+    forceFullData: boolean,
   ) => InspectedElementPayload,
   logElementToConsole: (id: number) => void,
   overrideError: (id: number, forceError: boolean) => void,
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 5e0ac663fee4..2aa5b30cd22e 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -86,11 +86,13 @@ export function copyInspectedElementPath({
 
 export function inspectElement({
   bridge,
+  forceFullData,
   id,
   path,
   rendererID,
 }: {|
   bridge: FrontendBridge,
+  forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
@@ -103,6 +105,7 @@ export function inspectElement({
   );
 
   bridge.send('inspectElement', {
+    forceFullData,
     id,
     path,
     rendererID,
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index ae5abf7c4f2b..e67f6cee9542 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -138,6 +138,7 @@ type ViewAttributeSourceParams = {|
 
 type InspectElementParams = {|
   ...ElementAndRendererID,
+  forceFullData: boolean,
   path: Array<number | string> | null,
   requestID: number,
 |};
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index d0c288000595..9302cd782a0c 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -62,8 +62,15 @@ export function inspectElement({
   rendererID: number,
 |}): Promise<InspectElementReturnType> {
   const {id} = 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);
+
   return inspectElementAPI({
     bridge,
+    forceFullData,
     id,
     path,
     rendererID,
@@ -74,7 +81,7 @@ export function inspectElement({
     switch (type) {
       case 'no-change':
         // This is a no-op for the purposes of our cache.
-        inspectedElement = inspectedElementCache.get(element.id);
+        inspectedElement = inspectedElementCache.get(id);
         if (inspectedElement != null) {
           return [inspectedElement, type];
         }
@@ -85,7 +92,7 @@ export function inspectElement({
       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.remove(element.id);
+        inspectedElementCache.remove(id);
 
         throw Error(`Element "${id}" not found`);
 
@@ -98,7 +105,7 @@ export function inspectElement({
           fullData.value,
         );
 
-        inspectedElementCache.set(element.id, inspectedElement);
+        inspectedElementCache.set(id, inspectedElement);
 
         return [inspectedElement, type];
 
@@ -108,7 +115,7 @@ export function inspectElement({
 
         // A path has been hydrated.
         // Merge it with the latest copy we have locally and resolve with the merged value.
-        inspectedElement = inspectedElementCache.get(element.id) || null;
+        inspectedElement = inspectedElementCache.get(id) || null;
         if (inspectedElement !== null) {
           // Clone element
           inspectedElement = {...inspectedElement};
@@ -121,7 +128,7 @@ export function inspectElement({
             hydrateHelper(value, ((path: any): Path)),
           );
 
-          inspectedElementCache.set(element.id, inspectedElement);
+          inspectedElementCache.set(id, inspectedElement);
 
           return [inspectedElement, type];
         }
@@ -140,3 +147,7 @@ export function inspectElement({
     throw Error(`Unable to inspect element with id "${id}"`);
   });
 }
+
+export function clearCacheForTests(): void {
+  inspectedElementCache.reset();
+}

From 75b9869648a2043d8c42693f44db437f40ea7d38 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 30 Sep 2021 13:47:14 -0400
Subject: [PATCH 0929/1603] [DevTools] Extension reports logged events when
 feature flag is enabled (#22475)

---
 .../react-devtools-extensions/src/main.js     |  6 +-
 .../src/registerExtensionsEventLogger.js      | 69 +++++++++++++++++++
 .../webpack.config.js                         |  3 +
 packages/react-devtools-shared/src/Logger.js  | 24 ++++---
 .../src/hookNamesCache.js                     | 18 ++---
 5 files changed, 96 insertions(+), 24 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/registerExtensionsEventLogger.js

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index eb093fc51b78..f22649c06394 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -18,9 +18,9 @@ import {
   localStorageRemoveItem,
   localStorageSetItem,
 } from 'react-devtools-shared/src/storage';
-import {registerEventLogger} from 'react-devtools-shared/src/Logger';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
@@ -88,9 +88,7 @@ function createPanelIfReactLoaded() {
 
       const tabId = chrome.devtools.inspectedWindow.tabId;
 
-      registerEventLogger((event: LogEvent) => {
-        // TODO: hook up event logging
-      });
+      registerExtensionsEventLogger();
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
diff --git a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js b/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
new file mode 100644
index 000000000000..90917ef3a1d2
--- /dev/null
+++ b/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import type {LogEvent} from 'react-devtools-shared/src/Logger';
+
+import {registerEventLogger} from 'react-devtools-shared/src/Logger';
+import {enableLogger} from 'react-devtools-feature-flags';
+
+let loggingIFrame = null;
+let missedEvents = [];
+function logEvent(event: LogEvent) {
+  if (enableLogger) {
+    if (loggingIFrame != null) {
+      loggingIFrame.contentWindow.postMessage(
+        {
+          source: 'react-devtools-logging',
+          event: event,
+          context: {
+            surface: 'extension',
+          },
+        },
+        '*',
+      );
+    } else {
+      missedEvents.push(event);
+    }
+  }
+}
+
+function handleLoggingIFrameLoaded(iframe) {
+  if (loggingIFrame != null) {
+    return;
+  }
+
+  loggingIFrame = iframe;
+  if (missedEvents.length > 0) {
+    missedEvents.forEach(logEvent);
+    missedEvents = [];
+  }
+}
+
+export function registerExtensionsEventLogger() {
+  // 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
+    ) {
+      registerEventLogger(logEvent);
+
+      const iframe = document.createElement('iframe');
+      iframe.src = loggingUrl;
+      iframe.onload = function(...args) {
+        handleLoggingIFrameLoaded(iframe);
+      };
+      body.appendChild(iframe);
+    }
+  }
+}
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 3205a7acbe89..f7ba2f2e7624 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -32,6 +32,8 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const LOGGING_URL = process.env.LOGGING_URL || null;
+
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
 const babelOptions = {
@@ -91,6 +93,7 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
       'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index 0ce2afb3b3c0..ac8577e2105c 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -10,11 +10,11 @@
 import {enableLogger} from 'react-devtools-feature-flags';
 
 type LoadHookNamesEvent = {|
-  +name: 'loadHookNames',
-  +displayName: string | null,
-  +numberOfHooks: number | null,
-  +durationMs: number,
-  +resolution: 'success' | 'error' | 'timeout' | 'unknown',
+  +event_name: 'loadHookNames',
+  +event_status: 'success' | 'error' | 'timeout' | 'unknown',
+  +duration_ms: number,
+  +inspected_element_display_name: string | null,
+  +inspected_element_number_of_hooks: number | null,
 |};
 
 // prettier-ignore
@@ -23,11 +23,11 @@ export type LogEvent =
 
 export type LogFunction = LogEvent => void;
 
-let loggers: Array<LogFunction> = [];
+let logFunctions: Array<LogFunction> = [];
 export const logEvent: LogFunction =
   enableLogger === true
     ? function logEvent(event: LogEvent): void {
-        loggers.forEach(log => {
+        logFunctions.forEach(log => {
           log(event);
         });
       }
@@ -35,13 +35,15 @@ export const logEvent: LogFunction =
 
 export const registerEventLogger =
   enableLogger === true
-    ? function registerEventLogger(eventLogger: LogFunction): () => void {
+    ? function registerEventLogger(logFunction: LogFunction): () => void {
         if (enableLogger) {
-          loggers.push(eventLogger);
+          logFunctions.push(logFunction);
           return function unregisterEventLogger() {
-            loggers = loggers.filter(logger => logger !== eventLogger);
+            logFunctions = logFunctions.filter(log => log !== logFunction);
           };
         }
         return () => {};
       }
-    : function registerEventLogger() {};
+    : function registerEventLogger(logFunction: LogFunction) {
+        return () => {};
+      };
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 106c10fc8ac1..8926f3feb9a5 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -99,7 +99,7 @@ export function loadHookNames(
 
     let timeoutID;
     let didTimeout = false;
-    let resolution = 'unknown';
+    let status = 'unknown';
     let resolvedHookNames: HookNames | null = null;
 
     const wake = () => {
@@ -116,11 +116,11 @@ export function loadHookNames(
     const handleLoadComplete = (durationMs: number): void => {
       // Log duration for parsing hook names
       logEvent({
-        name: 'loadHookNames',
-        displayName: element.displayName,
-        numberOfHooks: resolvedHookNames?.size ?? null,
-        durationMs,
-        resolution,
+        event_name: 'loadHookNames',
+        event_status: status,
+        duration_ms: durationMs,
+        inspected_element_display_name: element.displayName,
+        inspected_element_number_of_hooks: resolvedHookNames?.size ?? null,
       });
     };
 
@@ -152,7 +152,7 @@ export function loadHookNames(
               notFoundRecord.value = null;
             }
 
-            resolution = 'success';
+            status = 'success';
             resolvedHookNames = hookNames;
             done();
             wake();
@@ -172,7 +172,7 @@ export function loadHookNames(
             thrownRecord.status = Rejected;
             thrownRecord.value = null;
 
-            resolution = 'error';
+            status = 'error';
             done();
             wake();
           },
@@ -192,7 +192,7 @@ export function loadHookNames(
           timedoutRecord.status = Rejected;
           timedoutRecord.value = null;
 
-          resolution = 'timeout';
+          status = 'timeout';
           done();
           wake();
         }, TIMEOUT);

From f5d946da6be8d0cefd66ab3d029a55ab54ebb460 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 30 Sep 2021 14:13:13 -0400
Subject: [PATCH 0930/1603] [DevTools] Enable logger for internal build of
 DevTools extensions (#22476)

---
 .../src/config/DevToolsFeatureFlags.extension-fb.js             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
index 51fe2ed6abc1..b3bd5a7a92dc 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -16,7 +16,7 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 export const enableNamedHooksFeature = true;
-export const enableLogger = false;
+export const enableLogger = true;
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************

From a724a3b578dce77d427bef313102a4d0e978d9b4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Sep 2021 15:01:28 -0400
Subject: [PATCH 0931/1603] [RFC] Codemod invariant -> throw new Error (#22435)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Hoist error codes import to module scope

When this code was written, the error codes map (`codes.json`) was
created on-the-fly, so we had to lazily require from inside the visitor.

Because `codes.json` is now checked into source, we can import it a
single time in module scope.

* Minify error constructors in production

We use a script to minify our error messages in production. Each message
is assigned an error code, defined in `scripts/error-codes/codes.json`.
Then our build script replaces the messages with a link to our
error decoder page, e.g. https://reactjs.org/docs/error-decoder.html/?invariant=92

This enables us to write helpful error messages without increasing the
bundle size.

Right now, the script only works for `invariant` calls. It does not work
if you throw an Error object. This is an old Facebookism that we don't
really need, other than the fact that our error minification script
relies on it.

So, I've updated the script to minify error constructors, too:

Input:
  Error(`A ${adj} message that contains ${noun}`);
Output:
  Error(formatProdErrorMessage(ERR_CODE, adj, noun));

It only works for constructors that are literally named Error, though we
could add support for other names, too.

As a next step, I will add a lint rule to enforce that errors written
this way must have a corresponding error code.

* Minify "no fallback UI specified" error in prod

This error message wasn't being minified because it doesn't use
invariant. The reason it didn't use invariant is because this particular
error is created without begin thrown — it doesn't need to be thrown
because it's located inside the error handling part of the runtime.

Now that the error minification script supports Error constructors, we
can minify it by assigning it a production error code in
`scripts/error-codes/codes.json`.

To support the use of Error constructors more generally, I will add a
lint rule that enforces each message has a corresponding error code.

* Lint rule to detect unminified errors

Adds a lint rule that detects when an Error constructor is used without
a corresponding production error code.

We already have this for `invariant`, but not for regular errors, i.e.
`throw new Error(msg)`. There's also nothing that enforces the use of
`invariant` besides convention.

There are some packages where we don't care to minify errors. These are
packages that run in environments where bundle size is not a concern,
like react-pg. I added an override in the ESLint config to ignore these.

* Temporarily add invariant codemod script

I'm adding this codemod to the repo temporarily, but I'll revert it
in the same PR. That way we don't have to check it in but it's still
accessible (via the PR) if we need it later.

* [Automated] Codemod invariant -> Error

This commit contains only automated changes:

npx jscodeshift -t scripts/codemod-invariant.js packages --ignore-pattern="node_modules/**/*"
yarn linc --fix
yarn prettier

I will do any manual touch ups in separate commits so they're easier
to review.

* Remove temporary codemod script

This reverts the codemod script and ESLint config I added temporarily
in order to perform the invariant codemod.

* Manual touch ups

A few manual changes I made after the codemod ran.

* Enable error code transform per package

Currently we're not consistent about which packages should have their
errors minified in production and which ones should.

This adds a field to the bundle configuration to control whether to
apply the transform. We should decide what the criteria is going
forward. I think it's probably a good idea to minify any package that
gets sent over the network. So yes to modules that run in the browser,
and no to modules that run on the server and during development only.
---
 .eslintrc.js                                  |  35 ++++
 .../src/createSubscription.js                 |  11 +-
 packages/jest-react/src/JestReact.js          |  12 +-
 packages/react-art/src/ReactARTHostConfig.js  |  34 ++--
 packages/react-cache/src/ReactCacheOld.js     |   2 +
 .../react-client/src/ReactFlightClient.js     |   1 +
 .../src/ReactFlightClientHostConfig.js        |   6 +-
 .../ReactFlightClientHostConfigNoStream.js    |   3 +
 .../react-debug-tools/src/ReactDebugHooks.js  |   3 +-
 packages/react-dom/src/client/ReactDOM.js     |   9 +-
 .../src/client/ReactDOMComponentTree.js       |   3 +-
 .../src/client/ReactDOMEventHandle.js         |  26 +--
 .../react-dom/src/client/ReactDOMInput.js     |  13 +-
 .../react-dom/src/client/ReactDOMLegacy.js    |  42 ++---
 packages/react-dom/src/client/ReactDOMRoot.js |  19 ++-
 .../react-dom/src/client/ReactDOMTextarea.js  |  29 ++--
 .../src/events/ReactDOMControlledComponent.js |  14 +-
 packages/react-dom/src/events/getListener.js  |  14 +-
 .../src/server/ReactDOMLegacyServerBrowser.js |  24 +--
 .../src/server/ReactDOMServerFormatConfig.js  | 149 ++++++++++--------
 ...ctDOMServerLegacyPartialRendererBrowser.js |   7 +-
 .../src/server/ReactPartialRenderer.js        | 104 ++++++------
 .../src/server/ReactPartialRendererHooks.js   |  41 ++---
 .../src/server/ReactThreadIDAllocator.js      |  19 +--
 .../react-dom/src/shared/assertValidProps.js  |  55 ++++---
 packages/react-dom/src/shared/sanitizeURL.js  |  10 +-
 .../src/test-utils/ReactTestUtils.js          |  61 +++----
 packages/react-fetch/src/ReactFetchBrowser.js |   1 +
 packages/react-fetch/src/ReactFetchNode.js    |   1 +
 .../src/ReactFabricComponentTree.js           |  11 +-
 .../src/ReactNativeBridgeEventPlugin.js       |  14 +-
 .../src/ReactNativeComponentTree.js           |   8 +-
 .../src/ReactNativeFiberInspector.js          |   7 +-
 .../src/ReactNativeGetListener.js             |  14 +-
 .../src/ReactNativeHostConfig.js              |  16 +-
 .../InitializeNativeFabricUIManager.js        |  87 +++++-----
 .../ReactNativeViewConfigRegistry.js          |  57 +++----
 .../Libraries/ReactPrivate/UIManager.js       | 117 +++++++-------
 .../src/legacy-events/EventBatching.js        |  14 +-
 .../src/legacy-events/EventPluginRegistry.js  |  96 +++++------
 .../src/legacy-events/EventPluginUtils.js     |  10 +-
 .../src/legacy-events/ResponderEventPlugin.js |  14 +-
 .../ResponderTouchHistoryStore.js             |   7 +-
 .../src/legacy-events/SyntheticEvent.js       |  13 +-
 .../src/legacy-events/accumulate.js           |  10 +-
 .../src/legacy-events/accumulateInto.js       |  10 +-
 .../server/ReactNativeServerFormatConfig.js   |  15 +-
 packages/react-pg/src/ReactPostgres.js        |   7 +-
 .../src/ReactChildFiber.new.js                | 118 ++++++++------
 .../src/ReactChildFiber.old.js                | 118 ++++++++------
 .../react-reconciler/src/ReactFiber.new.js    |  11 +-
 .../react-reconciler/src/ReactFiber.old.js    |  11 +-
 .../src/ReactFiberBeginWork.new.js            |  37 +++--
 .../src/ReactFiberBeginWork.old.js            |  37 +++--
 .../src/ReactFiberClassComponent.new.js       |   4 +-
 .../src/ReactFiberClassComponent.old.js       |   4 +-
 .../src/ReactFiberCommitWork.new.js           |  46 +++---
 .../src/ReactFiberCommitWork.old.js           |  46 +++---
 .../src/ReactFiberCompleteWork.new.js         |  44 +++---
 .../src/ReactFiberCompleteWork.old.js         |  44 +++---
 .../src/ReactFiberContext.new.js              |  51 +++---
 .../src/ReactFiberContext.old.js              |  51 +++---
 .../src/ReactFiberHooks.new.js                | 100 ++++++------
 .../src/ReactFiberHooks.old.js                | 100 ++++++------
 .../src/ReactFiberHostConfig.js               |   6 +-
 .../ReactFiberHostConfigWithNoHydration.js    |   5 +-
 .../ReactFiberHostConfigWithNoMicrotasks.js   |   5 +-
 .../src/ReactFiberHostConfigWithNoMutation.js |   5 +-
 .../ReactFiberHostConfigWithNoPersistence.js  |   5 +-
 .../src/ReactFiberHostConfigWithNoScopes.js   |   5 +-
 ...ReactFiberHostConfigWithNoTestSelectors.js |   5 +-
 .../src/ReactFiberHostContext.new.js          |  14 +-
 .../src/ReactFiberHostContext.old.js          |  14 +-
 .../src/ReactFiberHotReloading.new.js         |   2 +
 .../src/ReactFiberHotReloading.old.js         |   2 +
 .../src/ReactFiberHydrationContext.new.js     |  39 ++---
 .../src/ReactFiberHydrationContext.old.js     |  39 ++---
 .../src/ReactFiberNewContext.new.js           |  47 +++---
 .../src/ReactFiberNewContext.old.js           |  47 +++---
 .../src/ReactFiberReconciler.new.js           |  19 +--
 .../src/ReactFiberReconciler.old.js           |  19 +--
 .../src/ReactFiberThrow.new.js                |   3 +-
 .../src/ReactFiberThrow.old.js                |   3 +-
 .../src/ReactFiberTreeReflection.js           |  53 ++++---
 .../src/ReactFiberUnwindWork.new.js           |  27 ++--
 .../src/ReactFiberUnwindWork.old.js           |  27 ++--
 .../src/ReactFiberWorkLoop.new.js             |  54 +++----
 .../src/ReactFiberWorkLoop.old.js             |  54 +++----
 .../src/ReactTestSelectors.js                 |  40 ++---
 .../src/ReactUpdateQueue.new.js               |  15 +-
 .../src/ReactUpdateQueue.old.js               |  15 +-
 .../src/forks/ReactFiberErrorDialog.native.js |  11 +-
 .../src/forks/ReactFiberErrorDialog.www.js    |  12 +-
 packages/react-server/src/ReactFizzContext.js |  13 +-
 packages/react-server/src/ReactFizzHooks.js   |  43 ++---
 .../react-server/src/ReactFizzNewContext.js   |  54 ++++---
 packages/react-server/src/ReactFizzServer.js  |  62 ++++----
 .../react-server/src/ReactFlightServer.js     | 106 +++++++------
 .../src/ReactFlightServerConfig.js            |   6 +-
 .../src/ReactServerFormatConfig.js            |   6 +-
 .../src/ReactServerStreamConfig.js            |   6 +-
 .../src/ReactSuspenseTestUtils.js             |   3 +-
 .../src/ReactTestRenderer.js                  |  39 +++--
 packages/react/src/ReactAct.js                |   6 +-
 packages/react/src/ReactBaseClasses.js        |  20 +--
 packages/react/src/ReactChildren.js           |  26 +--
 packages/react/src/ReactElement.js            |  11 +-
 packages/react/unstable-shared-subset.js      |   1 +
 packages/scheduler/src/forks/SchedulerMock.js |   1 +
 packages/shared/ReactErrorUtils.js            |   4 +-
 packages/shared/checkPropTypes.js             |   1 +
 .../forks/invokeGuardedCallbackImpl.www.js    |  12 +-
 packages/shared/invariant.js                  |   1 +
 packages/shared/invokeGuardedCallbackImpl.js  |  26 +--
 .../transform-error-messages.js.snap          |  35 ++++
 .../__tests__/transform-error-messages.js     |  57 +++++++
 scripts/error-codes/codes.json                |  13 +-
 scripts/error-codes/extract-errors.js         |   4 +-
 .../error-codes/transform-error-messages.js   | 106 +++++++++++--
 .../prod-error-codes-test.internal.js         |  77 +++++++++
 scripts/eslint-rules/index.js                 |   1 +
 scripts/eslint-rules/prod-error-codes.js      |  79 ++++++++++
 scripts/print-warnings/print-warnings.js      |   4 +-
 scripts/rollup/build.js                       |  17 +-
 scripts/rollup/bundles.js                     |  63 ++++++++
 scripts/shared/__tests__/evalToString-test.js |   4 +-
 scripts/shared/evalToString.js                |  40 ++++-
 yarn.lock                                     |   1 -
 128 files changed, 2118 insertions(+), 1519 deletions(-)
 create mode 100644 scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
 create mode 100644 scripts/eslint-rules/prod-error-codes.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 23d5ab76c32b..d464e83b453a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -127,6 +127,41 @@ module.exports = {
   },
 
   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-pg/**/*.js',
+        'packages/react-fs/**/*.js',
+        'packages/react-refresh/**/*.js',
+        'packages/react-server-dom-webpack/**/*.js',
+        'packages/react-test-renderer/**/*.js',
+        'packages/react-debug-tools/**/*.js',
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-scheduling-profiler/**/*.js',
+        'packages/react-native-renderer/**/*.js',
+        'packages/eslint-plugin-react-hooks/**/*.js',
+        'packages/jest-react/**/*.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.
diff --git a/packages/create-subscription/src/createSubscription.js b/packages/create-subscription/src/createSubscription.js
index 30d7b669f65f..329a238fc238 100644
--- a/packages/create-subscription/src/createSubscription.js
+++ b/packages/create-subscription/src/createSubscription.js
@@ -8,7 +8,6 @@
  */
 
 import * as React from 'react';
-import invariant from 'shared/invariant';
 
 type Unsubscribe = () => void;
 
@@ -128,10 +127,12 @@ export function createSubscription<Property, Value>(
 
         // Store the unsubscribe method for later (in case the subscribable prop changes).
         const unsubscribe = subscribe(source, callback);
-        invariant(
-          typeof unsubscribe === 'function',
-          'A subscription must return an unsubscribe function.',
-        );
+
+        if (typeof unsubscribe !== 'function') {
+          throw new Error(
+            'A subscription must return an unsubscribe function.',
+          );
+        }
 
         // It's safe to store unsubscribe on the instance because
         // We only read or write that property during the "commit" phase.
diff --git a/packages/jest-react/src/JestReact.js b/packages/jest-react/src/JestReact.js
index b4688f1ff980..92f7e7cdb192 100644
--- a/packages/jest-react/src/JestReact.js
+++ b/packages/jest-react/src/JestReact.js
@@ -7,7 +7,6 @@
 
 import {REACT_ELEMENT_TYPE, REACT_FRAGMENT_TYPE} from 'shared/ReactSymbols';
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 export {act} from './internalAct';
@@ -31,11 +30,12 @@ function captureAssertion(fn) {
 function assertYieldsWereCleared(root) {
   const Scheduler = root._Scheduler;
   const actualYields = Scheduler.unstable_clearYields();
-  invariant(
-    actualYields.length === 0,
-    'Log of yielded values is not empty. ' +
-      'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
-  );
+  if (actualYields.length !== 0) {
+    throw new Error(
+      'Log of yielded values is not empty. ' +
+        'Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.',
+    );
+  }
 }
 
 export function unstable_toMatchRenderedOutput(root, expectedJSX) {
diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index f9971b5bb036..ec702bf9a70d 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -7,7 +7,6 @@
 
 import Transform from 'art/core/transform';
 import Mode from 'art/modes/current';
-import invariant from 'shared/invariant';
 
 import {TYPES, EVENT_TYPES, childrenAsString} from './ReactARTInternals';
 
@@ -248,8 +247,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 export function appendInitialChild(parentInstance, child) {
   if (typeof child === 'string') {
     // Noop for string children of Text (eg <Text>{'foo'}{'bar'}</Text>)
-    invariant(false, 'Text children should already be flattened.');
-    return;
+    throw new Error('Text children should already be flattened.');
   }
 
   child.inject(parentInstance);
@@ -282,7 +280,9 @@ export function createInstance(type, props, internalInstanceHandle) {
       break;
   }
 
-  invariant(instance, 'ReactART does not support the type "%s"', type);
+  if (!instance) {
+    throw new Error(`ReactART does not support the type "${type}"`);
+  }
 
   instance._applyProps(instance, props);
 
@@ -367,18 +367,18 @@ export function appendChildToContainer(parentInstance, child) {
 }
 
 export function insertBefore(parentInstance, child, beforeChild) {
-  invariant(
-    child !== beforeChild,
-    'ReactART: Can not insert node before itself',
-  );
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
   child.injectBefore(beforeChild);
 }
 
 export function insertInContainerBefore(parentInstance, child, beforeChild) {
-  invariant(
-    child !== beforeChild,
-    'ReactART: Can not insert node before itself',
-  );
+  if (child === beforeChild) {
+    throw new Error('ReactART: Can not insert node before itself');
+  }
+
   child.injectBefore(beforeChild);
 }
 
@@ -433,25 +433,25 @@ export function clearContainer(container) {
 }
 
 export function getInstanceFromNode(node) {
-  throw new Error('Not yet implemented.');
+  throw new Error('Not implemented.');
 }
 
 export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function makeOpaqueHydratingObject(
   attemptToReadValue: () => void,
 ): OpaqueIDType {
-  throw new Error('Not yet implemented.');
+  throw new Error('Not implemented.');
 }
 
 export function makeClientId(): OpaqueIDType {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not yet implemented');
+  throw new Error('Not implemented.');
 }
 
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
index 77768dfcf216..f8b33434b7c7 100644
--- a/packages/react-cache/src/ReactCacheOld.js
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -49,6 +49,8 @@ const ReactCurrentDispatcher =
 function readContext(Context) {
   const dispatcher = ReactCurrentDispatcher.current;
   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 " +
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 983e3edc9380..9d5ac3680a8a 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -397,6 +397,7 @@ export function resolveError(
   message: string,
   stack: string,
 ): void {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const error = new Error(message);
   error.stack = stack;
   const chunks = response._chunks;
diff --git a/packages/react-client/src/ReactFlightClientHostConfig.js b/packages/react-client/src/ReactFlightClientHostConfig.js
index 49c975254052..2829adc56925 100644
--- a/packages/react-client/src/ReactFlightClientHostConfig.js
+++ b/packages/react-client/src/ReactFlightClientHostConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* 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
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-client/src/ReactFlightClientHostConfigNoStream.js b/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
index 17f29a9f26c5..8c453832bd3b 100644
--- a/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
+++ b/packages/react-client/src/ReactFlightClientHostConfigNoStream.js
@@ -12,6 +12,7 @@ export type StringDecoder = void;
 export const supportsBinaryStreams = false;
 
 export function createStringDecoder(): void {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
 
@@ -19,6 +20,7 @@ export function readPartialStringChunk(
   decoder: StringDecoder,
   buffer: Uint8Array,
 ): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
 
@@ -26,5 +28,6 @@ export function readFinalStringChunk(
   decoder: StringDecoder,
   buffer: Uint8Array,
 ): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error('Should never be called');
 }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index aa4d2d60fdf6..957838ed58a9 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -23,7 +23,6 @@ import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
-import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
@@ -107,7 +106,7 @@ function nextHook(): null | Hook {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index a1bb39c929d4..8e37995cb736 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -39,7 +39,6 @@ import {
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 import {
   warnUnstableRenderSubtreeIntoContainer,
   enableNewReconciler,
@@ -108,10 +107,10 @@ function createPortal(
   container: Container,
   key: ?string = null,
 ): React$Portal {
-  invariant(
-    isValidContainer(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainer(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   // TODO: pass ReactDOM portal implementation as third argument
   // $FlowFixMe The Flow type is opaque but there's no way to actually create it.
   return createPortalImpl(children, container, null, key);
diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js
index 2afe66035f36..58e5d72acd58 100644
--- a/packages/react-dom/src/client/ReactDOMComponentTree.js
+++ b/packages/react-dom/src/client/ReactDOMComponentTree.js
@@ -30,7 +30,6 @@ import {
 
 import {getParentSuspenseInstance} from './ReactDOMHostConfig';
 
-import invariant from 'shared/invariant';
 import {enableScopeAPI} from 'shared/ReactFeatureFlags';
 
 const randomKey = Math.random()
@@ -190,7 +189,7 @@ export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
 
   // Without this first invariant, passing a non-DOM-component triggers the next
   // invariant for a missing parent, which is super confusing.
-  invariant(false, 'getNodeFromInstance: Invalid argument.');
+  throw new Error('getNodeFromInstance: Invalid argument.');
 }
 
 export function getFiberCurrentPropsFromNode(
diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
index 80834c32834d..0fd0cd159978 100644
--- a/packages/react-dom/src/client/ReactDOMEventHandle.js
+++ b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -28,7 +28,6 @@ import {
   enableScopeAPI,
   enableCreateEventHandleAPI,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 
 type EventHandleOptions = {|
   capture?: boolean,
@@ -73,8 +72,7 @@ function registerReactDOMEvent(
       eventTarget,
     );
   } else {
-    invariant(
-      false,
+    throw new Error(
       'ReactDOM.createEventHandle: setter called on an invalid ' +
         'target. Provide a valid EventTarget or an element managed by React.',
     );
@@ -97,11 +95,11 @@ export function createEventHandle(
     // 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.
-    invariant(
-      allNativeEvents.has(domEventName),
-      'Cannot call unstable_createEventHandle with "%s", as it is not an event known to React.',
-      domEventName,
-    );
+    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) {
@@ -115,11 +113,13 @@ export function createEventHandle(
       target: EventTarget | ReactScopeInstance,
       callback: (SyntheticEvent<EventTarget>) => void,
     ) => {
-      invariant(
-        typeof callback === 'function',
-        'ReactDOM.createEventHandle: setter called with an invalid ' +
-          'callback. The callback must be a function.',
-      );
+      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);
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 4fabc1fb9ada..8f5098405b57 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -9,7 +9,6 @@
 
 // TODO: direct imports like some-package/src/* are bad. Fix me.
 import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCurrentFiber';
-import invariant from 'shared/invariant';
 
 import {setValueForProperty} from './DOMPropertyOperations';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
@@ -383,11 +382,13 @@ function updateNamedCousins(rootNode, props) {
       // 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 = getFiberCurrentPropsFromNode(otherNode);
-      invariant(
-        otherProps,
-        'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
-          'same `name` is not supported.',
-      );
+
+      if (!otherProps) {
+        throw new Error(
+          'ReactDOMInput: Mixing React and non-React radio inputs with the ' +
+            'same `name` is not supported.',
+        );
+      }
 
       // We need update the tracked value on the named cousin since the value
       // was changed but the input saw no event or value set
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 70dcddc50276..ac12f18bee50 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -36,7 +36,6 @@ import {
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {LegacyRoot} from 'react-reconciler/src/ReactRootTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {has as hasInstance} from 'shared/ReactInstanceMap';
 
@@ -238,10 +237,10 @@ export function hydrate(
     );
   }
 
-  invariant(
-    isValidContainerLegacy(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   if (__DEV__) {
     const isModernRoot =
       isContainerMarkedAsRoot(container) &&
@@ -278,10 +277,10 @@ export function render(
     );
   }
 
-  invariant(
-    isValidContainerLegacy(container),
-    'Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
   if (__DEV__) {
     const isModernRoot =
       isContainerMarkedAsRoot(container) &&
@@ -309,14 +308,14 @@ export function unstable_renderSubtreeIntoContainer(
   containerNode: Container,
   callback: ?Function,
 ) {
-  invariant(
-    isValidContainerLegacy(containerNode),
-    'Target container is not a DOM element.',
-  );
-  invariant(
-    parentComponent != null && hasInstance(parentComponent),
-    'parentComponent must be a valid React Component',
-  );
+  if (!isValidContainerLegacy(containerNode)) {
+    throw new Error('Target container is not a DOM element.');
+  }
+
+  if (parentComponent == null || !hasInstance(parentComponent)) {
+    throw new Error('parentComponent must be a valid React Component');
+  }
+
   return legacyRenderSubtreeIntoContainer(
     parentComponent,
     element,
@@ -327,10 +326,11 @@ export function unstable_renderSubtreeIntoContainer(
 }
 
 export function unmountComponentAtNode(container: Container) {
-  invariant(
-    isValidContainerLegacy(container),
-    'unmountComponentAtNode(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error(
+      'unmountComponentAtNode(...): Target container is not a DOM element.',
+    );
+  }
 
   if (__DEV__) {
     const isModernRoot =
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 1a027d9a1e6a..38f2100cb541 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -65,7 +65,6 @@ import {
   flushSync,
   isAlreadyRendering,
 } from 'react-reconciler/src/ReactFiberReconciler';
-import invariant from 'shared/invariant';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
@@ -76,7 +75,7 @@ function ReactDOMRoot(internalRoot: FiberRoot) {
 ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   const root = this._internalRoot;
   if (root === null) {
-    invariant(false, 'Cannot update an unmounted root.');
+    throw new Error('Cannot update an unmounted root.');
   }
 
   if (__DEV__) {
@@ -138,10 +137,10 @@ export function createRoot(
   container: Container,
   options?: CreateRootOptions,
 ): RootType {
-  invariant(
-    isValidContainerLegacy(container),
-    'createRoot(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainerLegacy(container)) {
+    throw new Error('createRoot(...): Target container is not a DOM element.');
+  }
+
   warnIfReactDOMContainerInDEV(container);
 
   // TODO: Delete these options
@@ -195,10 +194,10 @@ export function hydrateRoot(
   initialChildren: ReactNodeList,
   options?: HydrateRootOptions,
 ): RootType {
-  invariant(
-    isValidContainer(container),
-    'hydrateRoot(...): Target container is not a DOM element.',
-  );
+  if (!isValidContainer(container)) {
+    throw new Error('hydrateRoot(...): Target container is not a DOM element.');
+  }
+
   warnIfReactDOMContainerInDEV(container);
 
   // For now we reuse the whole bag of options since they contain
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 6e8aed5cc43c..6834b16e4e97 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
@@ -40,10 +39,12 @@ type TextAreaWithWrapperState = HTMLTextAreaElement & {|
 
 export function getHostProps(element: Element, props: Object) {
   const node = ((element: any): TextAreaWithWrapperState);
-  invariant(
-    props.dangerouslySetInnerHTML == null,
-    '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
-  );
+
+  if (props.dangerouslySetInnerHTML != null) {
+    throw new Error(
+      '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
+    );
+  }
 
   // Always set children to the same thing. In IE9, the selection range will
   // get reset if `textContent` is mutated.  We could add a check in setTextContent
@@ -96,15 +97,17 @@ export function initWrapperState(element: Element, props: Object) {
         );
       }
       if (!disableTextareaChildren) {
-        invariant(
-          defaultValue == null,
-          'If you supply `defaultValue` on a <textarea>, do not pass children.',
-        );
-        if (isArray(children)) {
-          invariant(
-            children.length <= 1,
-            '<textarea> can only have at most one child.',
+        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];
         }
 
diff --git a/packages/react-dom/src/events/ReactDOMControlledComponent.js b/packages/react-dom/src/events/ReactDOMControlledComponent.js
index 5b4dc5923290..59f9f5262798 100644
--- a/packages/react-dom/src/events/ReactDOMControlledComponent.js
+++ b/packages/react-dom/src/events/ReactDOMControlledComponent.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {
   getInstanceFromNode,
   getFiberCurrentPropsFromNode,
@@ -27,11 +26,14 @@ function restoreStateOfTarget(target: Node) {
     // Unmounted
     return;
   }
-  invariant(
-    typeof restoreImpl === 'function',
-    '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.',
-  );
+
+  if (typeof restoreImpl !== 'function') {
+    throw new Error(
+      'setRestoreImplementation() needs to be called to handle a target for controlled ' +
+        'events. This error is likely caused by a bug in React. Please file an issue.',
+    );
+  }
+
   const stateNode = internalInstance.stateNode;
   // Guard against Fiber being unmounted.
   if (stateNode) {
diff --git a/packages/react-dom/src/events/getListener.js b/packages/react-dom/src/events/getListener.js
index 71e498bbf6e7..0b92c3898ff3 100644
--- a/packages/react-dom/src/events/getListener.js
+++ b/packages/react-dom/src/events/getListener.js
@@ -9,7 +9,6 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Props} from '../client/ReactDOMHostConfig';
 
-import invariant from 'shared/invariant';
 import {getFiberCurrentPropsFromNode} from '../client/ReactDOMComponentTree';
 
 function isInteractive(tag: string): boolean {
@@ -67,11 +66,12 @@ export default function getListener(
   if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
     return null;
   }
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  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/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 8982d4d9341b..338c77de436d 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -8,7 +8,6 @@
  */
 
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
@@ -77,13 +76,16 @@ function renderToStringImpl(
   if (didFatal) {
     throw fatalError;
   }
-  invariant(
-    readyToStream,
-    'A React component suspended while rendering, but no fallback UI was specified.\n' +
-      '\n' +
-      'Add a <Suspense fallback=...> component higher in the tree to ' +
-      'provide a loading indicator or placeholder to display.',
-  );
+
+  if (!readyToStream) {
+    throw new Error(
+      'A React component suspended while rendering, but no fallback UI was specified.\n' +
+        '\n' +
+        'Add a <Suspense fallback=...> component higher in the tree to ' +
+        'provide a loading indicator or placeholder to display.',
+    );
+  }
+
   return result;
 }
 
@@ -102,16 +104,14 @@ function renderToStaticMarkup(
 }
 
 function renderToNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToString() instead.',
   );
 }
 
 function renderToStaticNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
   );
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 954cc1ef689f..0c4b155bb881 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -49,7 +49,6 @@ import warnValidStyle from '../shared/warnValidStyle';
 
 import escapeTextForBrowser from './escapeTextForBrowser';
 import hyphenateStyleName from '../shared/hyphenateStyleName';
-import invariant from 'shared/invariant';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import sanitizeURL from '../shared/sanitizeURL';
 import isArray from 'shared/isArray';
@@ -192,10 +191,12 @@ export type OpaqueIDType = string;
 export function makeServerID(
   responseState: null | ResponseState,
 ): OpaqueIDType {
-  invariant(
-    responseState !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-  );
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
+  }
+
   // TODO: This is not deterministic since it's created during render.
   return (
     responseState.opaqueIdentifierPrefix +
@@ -244,12 +245,13 @@ function pushStyle(
   responseState: ResponseState,
   style: Object,
 ): void {
-  invariant(
-    typeof style === 'object',
-    'The `style` prop expects a mapping from style properties to values, ' +
-      "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-      'using JSX.',
-  );
+  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) {
@@ -498,17 +500,20 @@ function pushInnerHTML(
   children,
 ) {
   if (innerHTML != null) {
-    invariant(
-      children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
+    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://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
 
-    invariant(
-      typeof innerHTML === 'object' && '__html' in innerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
     const html = innerHTML.__html;
     if (html !== null && html !== undefined) {
       if (__DEV__) {
@@ -799,11 +804,9 @@ function pushInput(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
-            '%s is a self-closing tag and must neither have `children` nor ' +
+          throw new Error(
+            `${'input'} is a self-closing tag and must neither have \`children\` nor ` +
               'use `dangerouslySetInnerHTML`.',
-            'input',
           );
         // eslint-disable-next-line-no-fallthrough
         case 'defaultChecked':
@@ -885,8 +888,7 @@ function pushStartTextArea(
           defaultValue = propValue;
           break;
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
+          throw new Error(
             '`dangerouslySetInnerHTML` does not make sense on <textarea>.',
           );
         // eslint-disable-next-line-no-fallthrough
@@ -910,15 +912,18 @@ function pushStartTextArea(
           'children on <textarea>.',
       );
     }
-    invariant(
-      value == null,
-      'If you supply `defaultValue` on a <textarea>, do not pass children.',
-    );
-    if (isArray(children)) {
-      invariant(
-        children.length <= 1,
-        '<textarea> can only have at most one child.',
+
+    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__) {
@@ -966,11 +971,9 @@ function pushSelfClosing(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
-            '%s is a self-closing tag and must neither have `children` nor ' +
+          throw new Error(
+            `${tag} is a self-closing tag and must neither have \`children\` nor ` +
               'use `dangerouslySetInnerHTML`.',
-            tag,
           );
         // eslint-disable-next-line-no-fallthrough
         default:
@@ -1000,8 +1003,7 @@ function pushStartMenuItem(
       switch (propKey) {
         case 'children':
         case 'dangerouslySetInnerHTML':
-          invariant(
-            false,
+          throw new Error(
             'menuitems cannot have `children` nor `dangerouslySetInnerHTML`.',
           );
         // eslint-disable-next-line-no-fallthrough
@@ -1158,17 +1160,20 @@ function pushStartPreformattedElement(
   // TODO: This doesn't deal with the case where the child is an array
   // or component that returns a string.
   if (innerHTML != null) {
-    invariant(
-      children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
+    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://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
 
-    invariant(
-      typeof innerHTML === 'object' && '__html' in innerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/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') {
@@ -1195,7 +1200,10 @@ const validatedTagCache = new Map();
 function startChunkForTag(tag: string): PrecomputedChunk {
   let tagStartChunk = validatedTagCache.get(tag);
   if (tagStartChunk === undefined) {
-    invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);
+    if (!VALID_TAG_REGEX.test(tag)) {
+      throw new Error(`Invalid tag: ${tag}`);
+    }
+
     tagStartChunk = stringToPrecomputedChunk('<' + tag);
     validatedTagCache.set(tag, tagStartChunk);
   }
@@ -1405,10 +1413,13 @@ export function writeStartPendingSuspenseBoundary(
   id: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, startPendingSuspenseBoundary1);
-  invariant(
-    id !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (id === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   writeChunk(destination, id);
   return writeChunk(destination, startPendingSuspenseBoundary2);
 }
@@ -1528,7 +1539,7 @@ export function writeStartSegment(
       return writeChunk(destination, startSegmentColGroup2);
     }
     default: {
-      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+      throw new Error('Unknown insertion mode. This is a bug in React.');
     }
   }
 }
@@ -1560,7 +1571,7 @@ export function writeEndSegment(
       return writeChunk(destination, endSegmentColGroup);
     }
     default: {
-      invariant(false, 'Unknown insertion mode. This is a bug in React.');
+      throw new Error('Unknown insertion mode. This is a bug in React.');
     }
   }
 }
@@ -1729,10 +1740,13 @@ export function writeCompletedBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, completeBoundaryScript1Partial);
   }
-  invariant(
-    boundaryID !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (boundaryID === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   const formattedContentID = stringToChunk(contentSegmentID.toString(16));
   writeChunk(destination, boundaryID);
   writeChunk(destination, completeBoundaryScript2);
@@ -1760,10 +1774,13 @@ export function writeClientRenderBoundaryInstruction(
     // Future calls can just reuse the same function.
     writeChunk(destination, clientRenderScript1Partial);
   }
-  invariant(
-    boundaryID !== null,
-    'An ID must have been assigned before we can complete the boundary.',
-  );
+
+  if (boundaryID === null) {
+    throw new Error(
+      'An ID must have been assigned before we can complete the boundary.',
+    );
+  }
+
   writeChunk(destination, boundaryID);
   return writeChunk(destination, clientRenderScript2);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
index 4424040496b9..f810d7472b01 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
@@ -6,21 +6,18 @@
  */
 
 import ReactVersion from 'shared/ReactVersion';
-import invariant from 'shared/invariant';
 
 import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';
 
 function renderToNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToString() instead.',
   );
 }
 
 function renderToStaticNodeStream() {
-  invariant(
-    false,
+  throw new Error(
     'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
       'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
   );
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 56231cf5a018..479a828a46e1 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -13,7 +13,6 @@ import type {LazyComponent} from 'react/src/ReactLazy';
 import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
 
 import * as React from 'react';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
@@ -213,7 +212,10 @@ const VALID_TAG_REGEX = /^[a-zA-Z][a-zA-Z:_\.\-\d]*$/; // Simplified subset
 const validatedTagCache = {};
 function validateDangerousTag(tag) {
   if (!validatedTagCache.hasOwnProperty(tag)) {
-    invariant(VALID_TAG_REGEX.test(tag), 'Invalid tag: %s', tag);
+    if (!VALID_TAG_REGEX.test(tag)) {
+      throw new Error(`Invalid tag: ${tag}`);
+    }
+
     validatedTagCache[tag] = true;
   }
 }
@@ -729,12 +731,12 @@ function resolve(
         if (typeof childContextTypes === 'object') {
           childContext = inst.getChildContext();
           for (const contextKey in childContext) {
-            invariant(
-              contextKey in childContextTypes,
-              '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-              getComponentNameFromType(Component) || 'Unknown',
-              contextKey,
-            );
+            if (!(contextKey in childContextTypes)) {
+              throw new Error(
+                `${getComponentNameFromType(Component) ||
+                  'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+              );
+            }
           }
         } else {
           if (__DEV__) {
@@ -944,11 +946,14 @@ class ReactDOMServerRenderer {
               suspended = false;
               // If rendering was suspended at this boundary, render the fallbackFrame
               const fallbackFrame = frame.fallbackFrame;
-              invariant(
-                fallbackFrame,
-                'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
-                  'This is a bug in React. Please file an issue.',
-              );
+
+              if (!fallbackFrame) {
+                throw new Error(
+                  'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
+                    'This is a bug in React. Please file an issue.',
+                );
+              }
+
               this.stack.push(fallbackFrame);
               out[this.suspenseDepth] += '<!--$!-->';
               // Skip flushing output since we're switching to the fallback
@@ -975,17 +980,19 @@ class ReactDOMServerRenderer {
         } catch (err) {
           if (err != null && typeof err.then === 'function') {
             if (enableSuspenseServerRenderer) {
-              invariant(
-                this.suspenseDepth > 0,
-                // TODO: include component name. This is a bit tricky with current factoring.
-                'A React component suspended while rendering, but no fallback UI was specified.\n' +
-                  '\n' +
-                  'Add a <Suspense fallback=...> component higher in the tree to ' +
-                  'provide a loading indicator or placeholder to display.',
-              );
+              if (this.suspenseDepth <= 0) {
+                throw new Error(
+                  // TODO: include component name. This is a bit tricky with current factoring.
+                  'A React component suspended while rendering, but no fallback UI was specified.\n' +
+                    '\n' +
+                    'Add a <Suspense fallback=...> component higher in the tree to ' +
+                    'provide a loading indicator or placeholder to display.',
+                );
+              }
+
               suspended = true;
             } else {
-              invariant(false, 'ReactDOMServer does not yet support Suspense.');
+              throw new Error('ReactDOMServer does not yet support Suspense.');
             }
           } else {
             throw err;
@@ -1035,17 +1042,18 @@ class ReactDOMServerRenderer {
         if (nextChild != null && nextChild.$$typeof != null) {
           // Catch unexpected special types early.
           const $$typeof = nextChild.$$typeof;
-          invariant(
-            $$typeof !== REACT_PORTAL_TYPE,
-            'Portals are not currently supported by the server renderer. ' +
-              'Render them conditionally so that they only appear on the client render.',
-          );
+
+          if ($$typeof === 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.',
+            );
+          }
+
           // Catch-all to prevent an infinite loop if React.Children.toArray() supports some new type.
-          invariant(
-            false,
-            'Unknown element-like object type: %s. This is likely a bug in React. ' +
+          throw new Error(
+            `Unknown element-like object type: ${($$typeof: any).toString()}. This is likely a bug in React. ` +
               'Please file an issue.',
-            ($$typeof: any).toString(),
           );
         }
         const nextChildren = toArray(nextChild);
@@ -1134,7 +1142,7 @@ class ReactDOMServerRenderer {
             this.suspenseDepth++;
             return '<!--$-->';
           } else {
-            invariant(false, 'ReactDOMServer does not yet support Suspense.');
+            throw new Error('ReactDOMServer does not yet support Suspense.');
           }
         }
         // eslint-disable-next-line-no-fallthrough
@@ -1157,8 +1165,7 @@ class ReactDOMServerRenderer {
             this.stack.push(frame);
             return '';
           }
-          invariant(
-            false,
+          throw new Error(
             'ReactDOMServer does not yet support scope components.',
           );
         }
@@ -1338,13 +1345,13 @@ class ReactDOMServerRenderer {
           info += '\n\nCheck the render method of `' + ownerName + '`.';
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'Element type is invalid: expected a string (for built-in ' +
           'components) or a class/function (for composite components) ' +
-          'but got: %s.%s',
-        elementType == null ? elementType : typeof elementType,
-        info,
+          `but got: ${
+            elementType == null ? elementType : typeof elementType
+          }.${info}`,
       );
     }
   }
@@ -1464,15 +1471,18 @@ class ReactDOMServerRenderer {
                 'children on <textarea>.',
             );
           }
-          invariant(
-            defaultValue == null,
-            'If you supply `defaultValue` on a <textarea>, do not pass children.',
-          );
-          if (isArray(textareaChildren)) {
-            invariant(
-              textareaChildren.length <= 1,
-              '<textarea> can only have at most one child.',
+
+          if (defaultValue != null) {
+            throw new Error(
+              'If you supply `defaultValue` on a <textarea>, do not pass children.',
             );
+          }
+
+          if (isArray(textareaChildren)) {
+            if (textareaChildren.length > 1) {
+              throw new Error('<textarea> can only have at most one child.');
+            }
+
             textareaChildren = textareaChildren[0];
           }
 
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index edc5df3dce4b..6e2b715382a0 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -19,7 +19,6 @@ import type PartialRenderer from './ReactPartialRenderer';
 
 import {validateContextBounds} from './ReactPartialRendererContext';
 
-import invariant from 'shared/invariant';
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -63,15 +62,17 @@ let isInHookUserCodeInDev = false;
 let currentHookNameInDev: ?string;
 
 function resolveCurrentlyRenderingComponent(): Object {
-  invariant(
-    currentlyRenderingComponent !== null,
-    '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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-  );
+  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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  }
+
   if (__DEV__) {
     if (isInHookUserCodeInDev) {
       console.error(
@@ -127,7 +128,7 @@ function areHookInputsEqual(
 
 function createHook(): Hook {
   if (numberOfReRenders > 0) {
-    invariant(false, 'Rendered more hooks than during the previous render');
+    throw new Error('Rendered more hooks than during the previous render');
   }
   return {
     memoizedState: null,
@@ -216,7 +217,7 @@ export function resetHooksState(): void {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
@@ -423,11 +424,12 @@ function dispatchAction<A>(
   queue: UpdateQueue<A>,
   action: A,
 ) {
-  invariant(
-    numberOfReRenders < RE_RENDER_LIMIT,
-    'Too many re-renders. React limits the number of renders to prevent ' +
-      'an infinite loop.',
-  );
+  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
@@ -484,8 +486,7 @@ function useSyncExternalStore<T>(
   getServerSnapshot?: () => T,
 ): T {
   if (getServerSnapshot === undefined) {
-    invariant(
-      false,
+    throw new Error(
       'Missing getServerSnapshot, which is required for ' +
         'server-rendered content. Will revert to client rendering.',
     );
@@ -515,7 +516,7 @@ function useOpaqueIdentifier(): OpaqueIDType {
 }
 
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function noop(): void {}
diff --git a/packages/react-dom/src/server/ReactThreadIDAllocator.js b/packages/react-dom/src/server/ReactThreadIDAllocator.js
index 5f4ab5b60000..fabf9fef9884 100644
--- a/packages/react-dom/src/server/ReactThreadIDAllocator.js
+++ b/packages/react-dom/src/server/ReactThreadIDAllocator.js
@@ -11,8 +11,6 @@
 // indices can be used to reference a tightly packed array. As opposed to being used in a Map.
 // The first allocated index is 1.
 
-import invariant from 'shared/invariant';
-
 export type ThreadID = number;
 
 let nextAvailableThreadIDs = new Uint16Array(16);
@@ -25,13 +23,16 @@ function growThreadCountAndReturnNextAvailable() {
   const oldArray = nextAvailableThreadIDs;
   const oldSize = oldArray.length;
   const newSize = oldSize * 2;
-  invariant(
-    newSize <= 0x10000,
-    '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.',
-  );
+
+  if (newSize > 0x10000) {
+    throw new Error(
+      '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.',
+    );
+  }
+
   const newArray = new Uint16Array(newSize);
   newArray.set(oldArray);
   nextAvailableThreadIDs = newArray;
diff --git a/packages/react-dom/src/shared/assertValidProps.js b/packages/react-dom/src/shared/assertValidProps.js
index 26ed1cd95817..762ebfd91ef0 100644
--- a/packages/react-dom/src/shared/assertValidProps.js
+++ b/packages/react-dom/src/shared/assertValidProps.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 import voidElementTags from './voidElementTags';
 
 const HTML = '__html';
@@ -17,25 +15,30 @@ function assertValidProps(tag: string, props: ?Object) {
   }
   // Note the use of `==` which checks for null or undefined.
   if (voidElementTags[tag]) {
-    invariant(
-      props.children == null && props.dangerouslySetInnerHTML == null,
-      '%s is a void element tag and must neither have `children` nor ' +
-        'use `dangerouslySetInnerHTML`.',
-      tag,
-    );
+    if (props.children != null || props.dangerouslySetInnerHTML != null) {
+      throw new Error(
+        `${tag} is a void element tag and must neither have \`children\` nor ` +
+          'use `dangerouslySetInnerHTML`.',
+      );
+    }
   }
   if (props.dangerouslySetInnerHTML != null) {
-    invariant(
-      props.children == null,
-      'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
-    );
-    invariant(
-      typeof props.dangerouslySetInnerHTML === 'object' &&
-        HTML in props.dangerouslySetInnerHTML,
-      '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
-        'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
-        'for more information.',
-    );
+    if (props.children != null) {
+      throw new Error(
+        'Can only set one of `children` or `props.dangerouslySetInnerHTML`.',
+      );
+    }
+
+    if (
+      typeof props.dangerouslySetInnerHTML !== 'object' ||
+      !(HTML in props.dangerouslySetInnerHTML)
+    ) {
+      throw new Error(
+        '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' +
+          'Please visit https://reactjs.org/link/dangerously-set-inner-html ' +
+          'for more information.',
+      );
+    }
   }
   if (__DEV__) {
     if (
@@ -51,12 +54,14 @@ function assertValidProps(tag: string, props: ?Object) {
       );
     }
   }
-  invariant(
-    props.style == null || typeof props.style === 'object',
-    'The `style` prop expects a mapping from style properties to values, ' +
-      "not a string. For example, style={{marginRight: spacing + 'em'}} when " +
-      'using JSX.',
-  );
+
+  if (props.style != null && typeof props.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.',
+    );
+  }
 }
 
 export default assertValidProps;
diff --git a/packages/react-dom/src/shared/sanitizeURL.js b/packages/react-dom/src/shared/sanitizeURL.js
index 81d54478a9d7..0f3b98833289 100644
--- a/packages/react-dom/src/shared/sanitizeURL.js
+++ b/packages/react-dom/src/shared/sanitizeURL.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {disableJavaScriptURLs} from 'shared/ReactFeatureFlags';
 
 // A javascript: URL can contain leading C0 control or \u0020 SPACE,
@@ -26,10 +25,11 @@ let didWarn = false;
 
 function sanitizeURL(url: string) {
   if (disableJavaScriptURLs) {
-    invariant(
-      !isJavaScriptProtocol.test(url),
-      'React has blocked a javascript: URL as a security precaution.',
-    );
+    if (isJavaScriptProtocol.test(url)) {
+      throw new Error(
+        'React has blocked a javascript: URL as a security precaution.',
+      );
+    }
   } else if (__DEV__) {
     if (!didWarn && isJavaScriptProtocol.test(url)) {
       didWarn = true;
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index da0d16ade6a0..1aadc90b250a 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -16,7 +16,6 @@ import {
   HostText,
 } from 'react-reconciler/src/ReactWorkTags';
 import {SyntheticEvent} from '../events/SyntheticEvent';
-import invariant from 'shared/invariant';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 import {
   rethrowCaughtError,
@@ -105,12 +104,10 @@ function validateClassInstance(inst, methodName) {
   } else {
     received = stringified;
   }
-  invariant(
-    false,
-    '%s(...): the first argument must be a React class instance. ' +
-      'Instead received: %s.',
-    methodName,
-    received,
+
+  throw new Error(
+    `${methodName}(...): the first argument must be a React class instance. ` +
+      `Instead received: ${received}.`,
   );
 }
 
@@ -197,11 +194,13 @@ function scryRenderedDOMComponentsWithClass(root, classNames) {
       const classList = className.split(/\s+/);
 
       if (!isArray(classNames)) {
-        invariant(
-          classNames !== undefined,
-          'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
-            'className as a second argument.',
-        );
+        if (classNames === undefined) {
+          throw new Error(
+            'TestUtils.scryRenderedDOMComponentsWithClass expects a ' +
+              'className as a second argument.',
+          );
+        }
+
         classNames = classNames.split(/\s+/);
       }
       return classNames.every(function(name) {
@@ -478,12 +477,13 @@ function getListener(inst: Fiber, registrationName: string) {
   if (shouldPreventMouseEvent(registrationName, inst.type, props)) {
     return null;
   }
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  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;
 }
 
@@ -564,17 +564,20 @@ const directDispatchEventTypes = new Set([
  */
 function makeSimulator(eventType) {
   return function(domNode, eventData) {
-    invariant(
-      !React.isValidElement(domNode),
-      '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.',
-    );
-    invariant(
-      !isCompositeComponent(domNode),
-      '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.',
-    );
+    if (React.isValidElement(domNode)) {
+      throw new Error(
+        '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.',
+      );
+    }
+
+    if (isCompositeComponent(domNode)) {
+      throw new Error(
+        '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.',
+      );
+    }
 
     const reactName = 'on' + eventType[0].toUpperCase() + eventType.slice(1);
     const fakeNativeEvent = new Event();
diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index fbf5b50b2f29..41df29c8afcc 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -129,6 +129,7 @@ function preloadRecord(url: string, options: mixed): Record {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
         // TODO: figure out what to do with POST.
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw Error('Unsupported option');
       }
     }
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index 727c43abec41..2b1ef5f200cb 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -177,6 +177,7 @@ function preloadRecord(url: string, options: mixed): Record<FetchResponse> {
       if (options.method || options.body || options.signal) {
         // TODO: wire up our own cancellation mechanism.
         // TODO: figure out what to do with POST.
+        // eslint-disable-next-line react-internal/prod-error-codes
         throw Error('Unsupported option');
       }
     }
diff --git a/packages/react-native-renderer/src/ReactFabricComponentTree.js b/packages/react-native-renderer/src/ReactFabricComponentTree.js
index 5d62539be6b8..47e60e7f6779 100644
--- a/packages/react-native-renderer/src/ReactFabricComponentTree.js
+++ b/packages/react-native-renderer/src/ReactFabricComponentTree.js
@@ -5,18 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 function getInstanceFromInstance(instanceHandle) {
   return instanceHandle;
 }
 
 function getTagFromInstance(inst) {
   const nativeInstance = inst.stateNode.canonical;
-  invariant(
-    nativeInstance._nativeTag,
-    'All native instances should have a tag.',
-  );
+
+  if (!nativeInstance._nativeTag) {
+    throw new Error('All native instances should have a tag.');
+  }
+
   return nativeInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
index f63d21199fc6..212b181c0829 100644
--- a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
+++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
@@ -10,7 +10,6 @@
 import type {AnyNativeEvent} from './legacy-events/PluginModuleType';
 import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
 import SyntheticEvent from './legacy-events/SyntheticEvent';
-import invariant from 'shared/invariant';
 
 // Module provided by RN:
 import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
@@ -148,11 +147,14 @@ const ReactNativeBridgeEventPlugin = {
     }
     const bubbleDispatchConfig = customBubblingEventTypes[topLevelType];
     const directDispatchConfig = customDirectEventTypes[topLevelType];
-    invariant(
-      bubbleDispatchConfig || directDispatchConfig,
-      'Unsupported top level event type "%s" dispatched',
-      topLevelType,
-    );
+
+    if (!bubbleDispatchConfig && !directDispatchConfig) {
+      throw new Error(
+        // $FlowFixMe - 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,
diff --git a/packages/react-native-renderer/src/ReactNativeComponentTree.js b/packages/react-native-renderer/src/ReactNativeComponentTree.js
index 23748937e2ac..c0f21b875a82 100644
--- a/packages/react-native-renderer/src/ReactNativeComponentTree.js
+++ b/packages/react-native-renderer/src/ReactNativeComponentTree.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 const instanceCache = new Map();
 const instanceProps = new Map();
 
@@ -30,7 +28,11 @@ function getTagFromInstance(inst) {
     nativeInstance = nativeInstance.canonical;
     tag = nativeInstance._nativeTag;
   }
-  invariant(tag, 'All native instances should have a tag.');
+
+  if (!tag) {
+    throw new Error('All native instances should have a tag.');
+  }
+
   return nativeInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
index 9579384ef5e9..a0f543a9c4e4 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -16,7 +16,6 @@ import {
 } from 'react-reconciler/src/ReactFiberTreeReflection';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 // Module provided by RN:
 import {UIManager} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 import {enableGetInspectorDataForInstanceInProduction} from 'shared/ReactFeatureFlags';
@@ -250,8 +249,7 @@ if (__DEV__) {
   };
 } else {
   getInspectorDataForViewTag = () => {
-    invariant(
-      false,
+    throw new Error(
       'getInspectorDataForViewTag() is not available in production',
     );
   };
@@ -263,8 +261,7 @@ if (__DEV__) {
     locationY: number,
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ): void => {
-    invariant(
-      false,
+    throw new Error(
       'getInspectorDataForViewAtPoint() is not available in production.',
     );
   };
diff --git a/packages/react-native-renderer/src/ReactNativeGetListener.js b/packages/react-native-renderer/src/ReactNativeGetListener.js
index 8a3476f9a6ad..4f76fddd29e7 100644
--- a/packages/react-native-renderer/src/ReactNativeGetListener.js
+++ b/packages/react-native-renderer/src/ReactNativeGetListener.js
@@ -8,7 +8,6 @@
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
-import invariant from 'shared/invariant';
 import {getFiberCurrentPropsFromNode} from './legacy-events/EventPluginUtils';
 
 export default function getListener(
@@ -26,11 +25,12 @@ export default function getListener(
     return null;
   }
   const listener = props[registrationName];
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  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/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 205f8189b7a7..769f46e852a2 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -9,8 +9,6 @@
 
 import type {TouchedViewDataAtPoint} from './ReactNativeTypes';
 
-import invariant from 'shared/invariant';
-
 // Modules provided by RN:
 import {
   ReactNativeViewConfigRegistry,
@@ -147,10 +145,9 @@ export function createTextInstance(
   hostContext: HostContext,
   internalInstanceHandle: Object,
 ): TextInstance {
-  invariant(
-    hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
-  );
+  if (!hostContext.isInAParentText) {
+    throw new Error('Text strings must be rendered within a <Text> component.');
+  }
 
   const tag = allocateTag();
 
@@ -411,10 +408,9 @@ export function insertInContainerBefore(
   // 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.
-  invariant(
-    typeof parentInstance !== 'number',
-    'Container does not support insertBefore operation',
-  );
+  if (typeof parentInstance === 'number') {
+    throw new Error('Container does not support insertBefore operation');
+  }
 }
 
 export function removeChild(
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index ee3c7df98508..d4218ab24734 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -11,8 +11,6 @@
 
 // Mock of the Native Hooks
 
-import invariant from 'shared/invariant';
-
 const roots = new Map();
 const allocatedTags = new Set();
 
@@ -54,11 +52,10 @@ const RCTFabricUIManager = {
     props,
     eventTarget,
   ) {
-    invariant(
-      !allocatedTags.has(reactTag),
-      'Created two native views with tag %s',
-      reactTag,
-    );
+    if (allocatedTags.has(reactTag)) {
+      throw new Error(`Created two native views with tag ${reactTag}`);
+    }
+
     allocatedTags.add(reactTag);
     return {
       reactTag: reactTag,
@@ -127,27 +124,29 @@ const RCTFabricUIManager = {
   registerEventHandler: jest.fn(function registerEventHandler(callback) {}),
 
   measure: jest.fn(function measure(node, callback) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host 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.');
+    }
+
     callback(10, 10, 100, 100, 0, 0);
   }),
   measureInWindow: jest.fn(function measureInWindow(node, callback) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host 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.');
+    }
+
     callback(10, 10, 100, 100);
   }),
   measureLayout: jest.fn(function measureLayout(
@@ -156,24 +155,26 @@ const RCTFabricUIManager = {
     fail,
     success,
   ) {
-    invariant(
-      typeof node === 'object',
-      'Expected node to be an object, was passed "%s"',
-      typeof node,
-    );
-    invariant(
-      typeof node.viewName === 'string',
-      'Expected node to be a host node.',
-    );
-    invariant(
-      typeof relativeNode === 'object',
-      'Expected relative node to be an object, was passed "%s"',
-      typeof relativeNode,
-    );
-    invariant(
-      typeof relativeNode.viewName === 'string',
-      'Expected relative node to be a host 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.');
+    }
+
+    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(),
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
index 39813814dae1..ce0975ea950a 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -16,8 +16,6 @@ import type {
   ViewConfigGetter,
 } from './ReactNativeTypes';
 
-import invariant from 'shared/invariant';
-
 // Event configs
 const customBubblingEventTypes = {};
 const customDirectEventTypes = {};
@@ -38,11 +36,11 @@ function processEventTypes(
   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[topLevelType] != null) {
+          throw new Error(
+            `Event cannot be both direct and bubbling: ${topLevelType}`,
+          );
+        }
       }
     }
   }
@@ -73,17 +71,18 @@ function processEventTypes(
  * This is done to avoid causing Prepack deopts.
  */
 exports.register = function(name: string, callback: ViewConfigGetter): 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,
-    callback === null ? 'null' : typeof callback,
-  );
+  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;
 };
@@ -98,14 +97,14 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
   if (!viewConfigs.has(name)) {
     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,
-        typeof name[0] === 'string' && /[a-z]/.test(name[0])
-          ? ' Make sure to start component names with a capital letter.'
-          : '',
+      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();
@@ -118,6 +117,10 @@ exports.get = function(name: string): ReactNativeBaseComponentViewConfig<> {
   } else {
     viewConfig = viewConfigs.get(name);
   }
-  invariant(viewConfig, 'View config not found for name %s', 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/UIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
index 245eecc4dc7e..346c4aa45c5f 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -11,8 +11,6 @@
 
 // Mock of the Native Hooks
 
-import invariant from 'shared/invariant';
-
 // Map of viewTag -> {children: [childTag], parent: ?parentTag}
 const roots = [];
 const views = new Map();
@@ -33,18 +31,21 @@ function autoCreateRoot(tag) {
 function insertSubviewAtIndex(parent, child, index) {
   const parentInfo = views.get(parent);
   const childInfo = views.get(child);
-  invariant(
-    childInfo.parent === null,
-    'Inserting view %s %s which already has parent',
-    child,
-    JSON.stringify(childInfo.props),
-  );
-  invariant(
-    0 <= index && index <= parentInfo.children.length,
-    'Invalid index %s for children %s',
-    index,
-    parentInfo.children,
-  );
+
+  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;
 }
@@ -53,7 +54,11 @@ function removeChild(parent, child) {
   const parentInfo = views.get(parent);
   const childInfo = views.get(child);
   const index = parentInfo.children.indexOf(child);
-  invariant(index >= 0, 'Missing view %s during removal', child);
+
+  if (index < 0) {
+    throw new Error(`Missing view ${child} during removal`);
+  }
+
   parentInfo.children.splice(index, 1);
   childInfo.parent = null;
 }
@@ -75,11 +80,10 @@ const RCTUIManager = {
   },
   clearJSResponder: jest.fn(),
   createView: jest.fn(function createView(reactTag, viewName, rootTag, props) {
-    invariant(
-      !views.has(reactTag),
-      'Created two native views with tag %s',
-      reactTag,
-    );
+    if (views.has(reactTag)) {
+      throw new Error(`Created two native views with tag ${reactTag}`);
+    }
+
     views.set(reactTag, {
       children: [],
       parent: null,
@@ -92,12 +96,12 @@ const RCTUIManager = {
   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
-    invariant(
-      views.get(parentTag).children.length === 0,
-      'Calling .setChildren on nonempty view %s',
-      parentTag,
-    );
+    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);
@@ -112,19 +116,20 @@ const RCTUIManager = {
     removeAtIndices = [],
   ) {
     autoCreateRoot(parentTag);
+
     // This logic ported from iOS (RCTUIManager.m)
-    invariant(
-      moveFromIndices.length === moveToIndices.length,
-      'Mismatched move indices %s and %s',
-      moveFromIndices,
-      moveToIndices,
-    );
-    invariant(
-      addChildReactTags.length === addAtIndices.length,
-      'Mismatched add indices %s and %s',
-      addChildReactTags,
-      addAtIndices,
-    );
+    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],
@@ -157,19 +162,17 @@ const RCTUIManager = {
   }),
   replaceExistingNonRootView: jest.fn(),
   measure: jest.fn(function measure(tag, callback) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
+    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) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
+    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(
@@ -178,16 +181,16 @@ const RCTUIManager = {
     fail,
     success,
   ) {
-    invariant(
-      typeof tag === 'number',
-      'Expected tag to be a number, was passed %s',
-      tag,
-    );
-    invariant(
-      typeof relativeTag === 'number',
-      'Expected relativeTag to be a number, was passed %s',
-      relativeTag,
-    );
+    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(),
diff --git a/packages/react-native-renderer/src/legacy-events/EventBatching.js b/packages/react-native-renderer/src/legacy-events/EventBatching.js
index bffc978ad6e2..22e20298c5a9 100644
--- a/packages/react-native-renderer/src/legacy-events/EventBatching.js
+++ b/packages/react-native-renderer/src/legacy-events/EventBatching.js
@@ -6,7 +6,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import {rethrowCaughtError} from 'shared/ReactErrorUtils';
 
 import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
@@ -56,11 +55,14 @@ export function runEventsInBatch(
   }
 
   forEachAccumulated(processingEventQueue, executeDispatchesAndReleaseTopLevel);
-  invariant(
-    !eventQueue,
-    'processEventQueue(): Additional events were enqueued while processing ' +
-      'an event queue. Support for this has not yet been implemented.',
-  );
+
+  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
index ee3d9c53a37e..3737d2c073b6 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js
@@ -14,8 +14,6 @@ import type {
   LegacyPluginModule,
 } from './PluginModuleType';
 
-import invariant from 'shared/invariant';
-
 type NamesToPlugins = {
   [key: PluginName]: LegacyPluginModule<AnyNativeEvent>,
   ...,
@@ -45,34 +43,39 @@ function recomputePluginOrdering(): void {
   for (const pluginName in namesToPlugins) {
     const pluginModule = namesToPlugins[pluginName];
     const pluginIndex = eventPluginOrder.indexOf(pluginName);
-    invariant(
-      pluginIndex > -1,
-      'EventPluginRegistry: Cannot inject event plugins that do not exist in ' +
-        'the plugin ordering, `%s`.',
-      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;
     }
-    invariant(
-      pluginModule.extractEvents,
-      'EventPluginRegistry: Event plugins must implement an `extractEvents` ' +
-        'method, but `%s` does not.',
-      pluginName,
-    );
+
+    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) {
-      invariant(
-        publishEventForPlugin(
+      if (
+        !publishEventForPlugin(
           publishedEvents[eventName],
           pluginModule,
           eventName,
-        ),
-        'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.',
-        eventName,
-        pluginName,
-      );
+        )
+      ) {
+        throw new Error(
+          `EventPluginRegistry: Failed to publish event \`${eventName}\` for plugin \`${pluginName}\`.`,
+        );
+      }
     }
   }
 }
@@ -90,12 +93,13 @@ function publishEventForPlugin(
   pluginModule: LegacyPluginModule<AnyNativeEvent>,
   eventName: string,
 ): boolean {
-  invariant(
-    !eventNameDispatchConfigs.hasOwnProperty(eventName),
-    'EventPluginRegistry: More than one plugin attempted to publish the same ' +
-      'event name, `%s`.',
-    eventName,
-  );
+  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;
@@ -134,12 +138,13 @@ function publishRegistrationName(
   pluginModule: LegacyPluginModule<AnyNativeEvent>,
   eventName: string,
 ): void {
-  invariant(
-    !registrationNameModules[registrationName],
-    'EventPluginRegistry: More than one plugin attempted to publish the same ' +
-      'registration name, `%s`.',
-    registrationName,
-  );
+  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;
@@ -198,11 +203,13 @@ export const possibleRegistrationNames = __DEV__ ? {} : (null: any);
 export function injectEventPluginOrder(
   injectedEventPluginOrder: EventPluginOrder,
 ): void {
-  invariant(
-    !eventPluginOrder,
-    'EventPluginRegistry: Cannot inject event plugin ordering more than ' +
-      'once. You are likely trying to load more than one copy of React.',
-  );
+  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.
   eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder);
   recomputePluginOrdering();
@@ -230,12 +237,13 @@ export function injectEventPluginsByName(
       !namesToPlugins.hasOwnProperty(pluginName) ||
       namesToPlugins[pluginName] !== pluginModule
     ) {
-      invariant(
-        !namesToPlugins[pluginName],
-        'EventPluginRegistry: Cannot inject two different event plugins ' +
-          'using the same name, `%s`.',
-        pluginName,
-      );
+      if (namesToPlugins[pluginName]) {
+        throw new Error(
+          'EventPluginRegistry: Cannot inject two different event plugins ' +
+            `using the same name, \`${pluginName}\`.`,
+        );
+      }
+
       namesToPlugins[pluginName] = pluginModule;
       isOrderingDirty = true;
     }
diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
index 381ebafc59bb..382656992add 100644
--- a/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
+++ b/packages/react-native-renderer/src/legacy-events/EventPluginUtils.js
@@ -6,7 +6,6 @@
  */
 
 import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 export let getFiberCurrentPropsFromNode = null;
@@ -150,10 +149,11 @@ export function executeDirectDispatch(event) {
   }
   const dispatchListener = event._dispatchListeners;
   const dispatchInstance = event._dispatchInstances;
-  invariant(
-    !isArray(dispatchListener),
-    'executeDirectDispatch(...): Invalid `event`.',
-  );
+
+  if (isArray(dispatchListener)) {
+    throw new Error('executeDirectDispatch(...): Invalid `event`.');
+  }
+
   event.currentTarget = dispatchListener
     ? getNodeFromInstance(dispatchInstance)
     : null;
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
index 78bef3bbcee9..2b3cbb347882 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderEventPlugin.js
@@ -29,7 +29,6 @@ import {
 import accumulateInto from './accumulateInto';
 import forEachAccumulated from './forEachAccumulated';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 
 /**
  * Instance of element that should respond to touch/move types of interactions,
@@ -249,12 +248,13 @@ function getListener(inst, registrationName) {
     return null;
   }
   const listener = props[registrationName];
-  invariant(
-    !listener || typeof listener === 'function',
-    'Expected `%s` listener to be a function, instead got a value of `%s` type.',
-    registrationName,
-    typeof listener,
-  );
+
+  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/legacy-events/ResponderTouchHistoryStore.js b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
index 24d35b52a45d..af63b1fb21e2 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
 
 /**
@@ -94,7 +92,10 @@ function resetTouchRecord(touchRecord: TouchRecord, touch: Touch): void {
 }
 
 function getTouchIdentifier({identifier}: Touch): number {
-  invariant(identifier != null, 'Touch object is missing identifier.');
+  if (identifier == null) {
+    throw new Error('Touch object is missing identifier.');
+  }
+
   if (__DEV__) {
     if (identifier > MAX_TOUCH_BANK) {
       console.error(
diff --git a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
index 329d89ec9f7d..84d39bbd603d 100644
--- a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
+++ b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
@@ -7,8 +7,6 @@
 
 /* eslint valid-typeof: 0 */
 
-import invariant from 'shared/invariant';
-
 const EVENT_POOL_SIZE = 10;
 
 /**
@@ -325,10 +323,13 @@ function createOrGetPooledEvent(
 
 function releasePooledEvent(event) {
   const EventConstructor = this;
-  invariant(
-    event instanceof EventConstructor,
-    'Trying to release an event instance into a pool of a different type.',
-  );
+
+  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);
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
index af4da853934b..0e19adc919e5 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulate.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 /**
@@ -21,10 +20,11 @@ function accumulate<T>(
   current: ?(T | Array<T>),
   next: T | Array<T>,
 ): T | Array<T> {
-  invariant(
-    next != null,
-    'accumulate(...): Accumulated items must not be null or undefined.',
-  );
+  if (next == null) {
+    throw new Error(
+      'accumulate(...): Accumulated items must not be null or undefined.',
+    );
+  }
 
   if (current == null) {
     return next;
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index d704733d9d45..974c0143a550 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 /**
@@ -27,10 +26,11 @@ function accumulateInto<T>(
   current: ?(Array<T> | T),
   next: T | Array<T>,
 ): T | Array<T> {
-  invariant(
-    next != null,
-    'accumulateInto(...): Accumulated items must not be null or undefined.',
-  );
+  if (next == null) {
+    throw new Error(
+      'accumulateInto(...): Accumulated items must not be null or undefined.',
+    );
+  }
 
   if (current == null) {
     return next;
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index c530649ac507..214561a78860 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -21,8 +21,6 @@ import {
   stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
 
-import invariant from 'shared/invariant';
-
 export const isPrimaryRenderer = true;
 
 // Every list of children or string is null terminated.
@@ -116,10 +114,12 @@ export type OpaqueIDType = number;
 export function makeServerID(
   responseState: null | ResponseState,
 ): OpaqueIDType {
-  invariant(
-    responseState !== null,
-    'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-  );
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
+  }
+
   // TODO: This is not deterministic since it's created during render.
   return responseState.nextOpaqueID++;
 }
@@ -167,8 +167,7 @@ export function pushEndInstance(
 // IDs are formatted as little endian Uint16
 function formatID(id: number): Uint8Array {
   if (id > 0xffff) {
-    invariant(
-      false,
+    throw new Error(
       'More boundaries or placeholders than we expected to ever emit.',
     );
   }
diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
index ec49f8c04323..fc2302578878 100644
--- a/packages/react-pg/src/ReactPostgres.js
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -12,7 +12,6 @@ import type {Wakeable} from 'shared/ReactTypes';
 import {unstable_getCacheForType} from 'react';
 import {Pool as PostgresPool} from 'pg';
 import {prepareValue} from 'pg/lib/utils';
-import invariant from 'shared/invariant';
 
 const Pending = 0;
 const Resolved = 1;
@@ -92,8 +91,7 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
         nextMap = new Map();
         innerMap.set(key, nextMap);
       } else if (!(nextMap instanceof Map)) {
-        invariant(
-          false,
+        throw new Error(
           '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.',
@@ -113,8 +111,7 @@ Pool.prototype.query = function(query: string, values?: Array<mixed>) {
     record = createRecordFromThenable(thenable);
     innerMap.set(key, record);
   } else if (record instanceof Map) {
-    invariant(
-      false,
+    throw new Error(
       '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.',
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 91dcff903a63..9071edc24f7a 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -22,7 +22,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
@@ -69,11 +68,14 @@ if (__DEV__) {
     if (!child._store || child._store.validated || child.key != null) {
       return;
     }
-    invariant(
-      typeof child._store === 'object',
-      'React Component in warnForMissingKey should have a _store. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    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.',
+      );
+    }
+
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
@@ -149,21 +151,28 @@ function coerceRef(
       let inst;
       if (owner) {
         const ownerFiber = ((owner: any): Fiber);
-        invariant(
-          ownerFiber.tag === ClassComponent,
-          'Function components cannot have string refs. ' +
-            'We recommend using useRef() instead. ' +
-            'Learn more about using refs safely here: ' +
-            'https://reactjs.org/link/strict-mode-string-ref',
-        );
+
+        if (ownerFiber.tag !== ClassComponent) {
+          throw new Error(
+            'Function components cannot have string refs. ' +
+              'We recommend using useRef() instead. ' +
+              'Learn more about using refs safely here: ' +
+              'https://reactjs.org/link/strict-mode-string-ref',
+          );
+        }
+
         inst = ownerFiber.stateNode;
       }
-      invariant(
-        inst,
-        'Missing owner for string ref %s. This error is likely caused by a ' +
-          'bug in React. Please file an issue.',
-        mixedRef,
-      );
+
+      if (!inst) {
+        throw new Error(
+          `Missing owner for string ref ${mixedRef}. This error is likely caused by a ` +
+            'bug in React. Please file an issue.',
+        );
+      }
+      // Assigning this to a const so Flow knows it won't change in the closure
+      const resolvedInst = inst;
+
       if (__DEV__) {
         checkPropStringCoercion(mixedRef, 'ref');
       }
@@ -178,10 +187,10 @@ function coerceRef(
         return current.ref;
       }
       const ref = function(value) {
-        let refs = inst.refs;
+        let refs = resolvedInst.refs;
         if (refs === emptyRefsObject) {
           // This is a lazy pooled frozen object, so we need to initialize.
-          refs = inst.refs = {};
+          refs = resolvedInst.refs = {};
         }
         if (value === null) {
           delete refs[stringRef];
@@ -192,20 +201,22 @@ function coerceRef(
       ref._stringRef = stringRef;
       return ref;
     } else {
-      invariant(
-        typeof mixedRef === 'string',
-        'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
-      );
-      invariant(
-        element._owner,
-        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
-          ' the following reasons:\n' +
-          '1. You may be adding a ref to a function component\n' +
-          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-          '3. You have multiple copies of React loaded\n' +
-          'See https://reactjs.org/link/refs-must-have-owner for more information.',
-        mixedRef,
-      );
+      if (typeof mixedRef !== 'string') {
+        throw new Error(
+          'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
+        );
+      }
+
+      if (!element._owner) {
+        throw new Error(
+          `Element ref was specified as a string (${mixedRef}) but no owner was set. This could happen for one of` +
+            ' the following reasons:\n' +
+            '1. You may be adding a ref to a function component\n' +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            '3. You have multiple copies of React loaded\n' +
+            'See https://reactjs.org/link/refs-must-have-owner for more information.',
+        );
+      }
     }
   }
   return mixedRef;
@@ -213,14 +224,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   const childString = Object.prototype.toString.call(newChild);
-  invariant(
-    false,
-    'Objects are not valid as a React child (found: %s). ' +
+
+  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.',
-    childString === '[object Object]'
-      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-      : childString,
   );
 }
 
@@ -887,11 +899,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     // but using the iterator instead.
 
     const iteratorFn = getIteratorFn(newChildrenIterable);
-    invariant(
-      typeof iteratorFn === 'function',
-      'An object is not an iterable. This error is likely caused by a bug in ' +
-        'React. Please file an issue.',
-    );
+
+    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.',
+      );
+    }
 
     if (__DEV__) {
       // We don't support rendering Generators because it's a mutation.
@@ -938,7 +952,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     const newChildren = iteratorFn.call(newChildrenIterable);
-    invariant(newChildren != null, 'An iterable object provided no iterator.');
+
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
 
     let resultingFirstChild: Fiber | null = null;
     let previousNewFiber: Fiber | null = null;
@@ -1313,10 +1330,9 @@ export function cloneChildFibers(
   current: Fiber | null,
   workInProgress: Fiber,
 ): void {
-  invariant(
-    current === null || workInProgress.child === current.child,
-    'Resuming work not yet implemented.',
-  );
+  if (current !== null && workInProgress.child !== current.child) {
+    throw new Error('Resuming work not yet implemented.');
+  }
 
   if (workInProgress.child === null) {
     return;
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 9fafdf05f67a..0128ca8f36f3 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -22,7 +22,6 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   warnAboutStringRefs,
@@ -69,11 +68,14 @@ if (__DEV__) {
     if (!child._store || child._store.validated || child.key != null) {
       return;
     }
-    invariant(
-      typeof child._store === 'object',
-      'React Component in warnForMissingKey should have a _store. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    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.',
+      );
+    }
+
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
@@ -149,21 +151,28 @@ function coerceRef(
       let inst;
       if (owner) {
         const ownerFiber = ((owner: any): Fiber);
-        invariant(
-          ownerFiber.tag === ClassComponent,
-          'Function components cannot have string refs. ' +
-            'We recommend using useRef() instead. ' +
-            'Learn more about using refs safely here: ' +
-            'https://reactjs.org/link/strict-mode-string-ref',
-        );
+
+        if (ownerFiber.tag !== ClassComponent) {
+          throw new Error(
+            'Function components cannot have string refs. ' +
+              'We recommend using useRef() instead. ' +
+              'Learn more about using refs safely here: ' +
+              'https://reactjs.org/link/strict-mode-string-ref',
+          );
+        }
+
         inst = ownerFiber.stateNode;
       }
-      invariant(
-        inst,
-        'Missing owner for string ref %s. This error is likely caused by a ' +
-          'bug in React. Please file an issue.',
-        mixedRef,
-      );
+
+      if (!inst) {
+        throw new Error(
+          `Missing owner for string ref ${mixedRef}. This error is likely caused by a ` +
+            'bug in React. Please file an issue.',
+        );
+      }
+      // Assigning this to a const so Flow knows it won't change in the closure
+      const resolvedInst = inst;
+
       if (__DEV__) {
         checkPropStringCoercion(mixedRef, 'ref');
       }
@@ -178,10 +187,10 @@ function coerceRef(
         return current.ref;
       }
       const ref = function(value) {
-        let refs = inst.refs;
+        let refs = resolvedInst.refs;
         if (refs === emptyRefsObject) {
           // This is a lazy pooled frozen object, so we need to initialize.
-          refs = inst.refs = {};
+          refs = resolvedInst.refs = {};
         }
         if (value === null) {
           delete refs[stringRef];
@@ -192,20 +201,22 @@ function coerceRef(
       ref._stringRef = stringRef;
       return ref;
     } else {
-      invariant(
-        typeof mixedRef === 'string',
-        'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
-      );
-      invariant(
-        element._owner,
-        'Element ref was specified as a string (%s) but no owner was set. This could happen for one of' +
-          ' the following reasons:\n' +
-          '1. You may be adding a ref to a function component\n' +
-          "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
-          '3. You have multiple copies of React loaded\n' +
-          'See https://reactjs.org/link/refs-must-have-owner for more information.',
-        mixedRef,
-      );
+      if (typeof mixedRef !== 'string') {
+        throw new Error(
+          'Expected ref to be a function, a string, an object returned by React.createRef(), or null.',
+        );
+      }
+
+      if (!element._owner) {
+        throw new Error(
+          `Element ref was specified as a string (${mixedRef}) but no owner was set. This could happen for one of` +
+            ' the following reasons:\n' +
+            '1. You may be adding a ref to a function component\n' +
+            "2. You may be adding a ref to a component that was not created inside a component's render method\n" +
+            '3. You have multiple copies of React loaded\n' +
+            'See https://reactjs.org/link/refs-must-have-owner for more information.',
+        );
+      }
     }
   }
   return mixedRef;
@@ -213,14 +224,15 @@ function coerceRef(
 
 function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {
   const childString = Object.prototype.toString.call(newChild);
-  invariant(
-    false,
-    'Objects are not valid as a React child (found: %s). ' +
+
+  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.',
-    childString === '[object Object]'
-      ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
-      : childString,
   );
 }
 
@@ -887,11 +899,13 @@ function ChildReconciler(shouldTrackSideEffects) {
     // but using the iterator instead.
 
     const iteratorFn = getIteratorFn(newChildrenIterable);
-    invariant(
-      typeof iteratorFn === 'function',
-      'An object is not an iterable. This error is likely caused by a bug in ' +
-        'React. Please file an issue.',
-    );
+
+    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.',
+      );
+    }
 
     if (__DEV__) {
       // We don't support rendering Generators because it's a mutation.
@@ -938,7 +952,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     }
 
     const newChildren = iteratorFn.call(newChildrenIterable);
-    invariant(newChildren != null, 'An iterable object provided no iterator.');
+
+    if (newChildren == null) {
+      throw new Error('An iterable object provided no iterator.');
+    }
 
     let resultingFirstChild: Fiber | null = null;
     let previousNewFiber: Fiber | null = null;
@@ -1313,10 +1330,9 @@ export function cloneChildFibers(
   current: Fiber | null,
   workInProgress: Fiber,
 ): void {
-  invariant(
-    current === null || workInProgress.child === current.child,
-    'Resuming work not yet implemented.',
-  );
+  if (current !== null && workInProgress.child !== current.child) {
+    throw new Error('Resuming work not yet implemented.');
+  }
 
   if (workInProgress.child === null) {
     return;
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index cbbbaa623385..2e5c40c220a7 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -17,7 +17,6 @@ import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
-import invariant from 'shared/invariant';
 import {
   createRootStrictEffectsByDefault,
   enableCache,
@@ -565,13 +564,11 @@ export function createFiberFromTypeAndProps(
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
         }
-        invariant(
-          false,
+
+        throw new Error(
           'Element type is invalid: expected a string (for built-in ' +
             'components) or a class/function (for composite components) ' +
-            'but got: %s.%s',
-          type == null ? type : typeof type,
-          info,
+            `but got: ${type == null ? type : typeof type}.${info}`,
         );
       }
     }
@@ -604,7 +601,7 @@ export function createOffscreenHostContainerFiber(
     return fiber;
   } else {
     // Only implemented in persistent mode
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 6d99c6837ed2..9d559a3f7afb 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -17,7 +17,6 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
 import type {OffscreenProps} from './ReactFiberOffscreenComponent';
 
-import invariant from 'shared/invariant';
 import {
   createRootStrictEffectsByDefault,
   enableCache,
@@ -565,13 +564,11 @@ export function createFiberFromTypeAndProps(
             info += '\n\nCheck the render method of `' + ownerName + '`.';
           }
         }
-        invariant(
-          false,
+
+        throw new Error(
           'Element type is invalid: expected a string (for built-in ' +
             'components) or a class/function (for composite components) ' +
-            'but got: %s.%s',
-          type == null ? type : typeof type,
-          info,
+            `but got: ${type == null ? type : typeof type}.${info}`,
         );
       }
     }
@@ -604,7 +601,7 @@ export function createOffscreenHostContainerFiber(
     return fiber;
   } else {
     // Only implemented in persistent mode
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6ad63ae763c2..4fe648bc3e76 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -92,7 +92,6 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1050,6 +1049,7 @@ function updateClassComponent(
       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);
@@ -1264,12 +1264,15 @@ function pushHostRootContext(workInProgress) {
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
-  invariant(
-    current !== null && updateQueue !== null,
-    'If the root does not have an updateQueue, we should have already ' +
-      'bailed out. This error is likely caused by a bug in React. Please ' +
-      'file an issue.',
-  );
+
+  if (current === null || updateQueue === null) {
+    throw new Error(
+      '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.',
+    );
+  }
+
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
@@ -1496,15 +1499,13 @@ function mountLazyComponent(
       hint = ' Did you wrap a component in React.lazy() more than once?';
     }
   }
+
   // This message intentionally doesn't mention ForwardRef or MemoComponent
   // because the fact that it's a separate type of work is an
   // implementation detail.
-  invariant(
-    false,
-    'Element type is invalid. Received a promise that resolves to: %s. ' +
-      'Lazy element type must resolve to a class or function.%s',
-    Component,
-    hint,
+  throw new Error(
+    `Element type is invalid. Received a promise that resolves to: ${Component}. ` +
+      `Lazy element type must resolve to a class or function.${hint}`,
   );
 }
 
@@ -3317,6 +3318,7 @@ function remountFiber(
   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.');
     }
 
@@ -3337,11 +3339,13 @@ function remountFiber(
     } 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.');
       }
       while (prevSibling.sibling !== oldWorkInProgress) {
         prevSibling = prevSibling.sibling;
         if (prevSibling === null) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           throw new Error('Expected to find the previous sibling.');
         }
       }
@@ -3836,11 +3840,10 @@ function beginWork(
       break;
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index ffa753593e1a..f116897a8661 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -92,7 +92,6 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1050,6 +1049,7 @@ function updateClassComponent(
       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);
@@ -1264,12 +1264,15 @@ function pushHostRootContext(workInProgress) {
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
   const updateQueue = workInProgress.updateQueue;
-  invariant(
-    current !== null && updateQueue !== null,
-    'If the root does not have an updateQueue, we should have already ' +
-      'bailed out. This error is likely caused by a bug in React. Please ' +
-      'file an issue.',
-  );
+
+  if (current === null || updateQueue === null) {
+    throw new Error(
+      '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.',
+    );
+  }
+
   const nextProps = workInProgress.pendingProps;
   const prevState = workInProgress.memoizedState;
   const prevChildren = prevState.element;
@@ -1496,15 +1499,13 @@ function mountLazyComponent(
       hint = ' Did you wrap a component in React.lazy() more than once?';
     }
   }
+
   // This message intentionally doesn't mention ForwardRef or MemoComponent
   // because the fact that it's a separate type of work is an
   // implementation detail.
-  invariant(
-    false,
-    'Element type is invalid. Received a promise that resolves to: %s. ' +
-      'Lazy element type must resolve to a class or function.%s',
-    Component,
-    hint,
+  throw new Error(
+    `Element type is invalid. Received a promise that resolves to: ${Component}. ` +
+      `Lazy element type must resolve to a class or function.${hint}`,
   );
 }
 
@@ -3317,6 +3318,7 @@ function remountFiber(
   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.');
     }
 
@@ -3337,11 +3339,13 @@ function remountFiber(
     } 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.');
       }
       while (prevSibling.sibling !== oldWorkInProgress) {
         prevSibling = prevSibling.sibling;
         if (prevSibling === null) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           throw new Error('Expected to find the previous sibling.');
         }
       }
@@ -3836,11 +3840,10 @@ function beginWork(
       break;
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 3cb67d045d41..18e56db09313 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -35,7 +35,6 @@ 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 invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
@@ -148,8 +147,7 @@ if (__DEV__) {
   Object.defineProperty(fakeInternalInstance, '_processChildContext', {
     enumerable: false,
     value: function() {
-      invariant(
-        false,
+      throw new Error(
         '_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 ' +
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 0e30466bf82b..a54dfabfca52 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -35,7 +35,6 @@ 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 invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
@@ -148,8 +147,7 @@ if (__DEV__) {
   Object.defineProperty(fakeInternalInstance, '_processChildContext', {
     enumerable: false,
     value: function() {
-      invariant(
-        false,
+      throw new Error(
         '_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 ' +
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 699c6867fa10..95c2f3753bfd 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -78,7 +78,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -473,8 +472,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
         // Nothing to do for these component types
         break;
       default: {
-        invariant(
-          false,
+        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.',
         );
@@ -945,8 +943,7 @@ function commitLayoutEffectOnFiber(
       case LegacyHiddenComponent:
         break;
       default:
-        invariant(
-          false,
+        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.',
         );
@@ -1432,8 +1429,8 @@ function commitContainer(finishedWork: Fiber) {
       return;
     }
   }
-  invariant(
-    false,
+
+  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.',
   );
@@ -1447,8 +1444,8 @@ function getHostParentFiber(fiber: Fiber): Fiber {
     }
     parent = parent.return;
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Expected to find a host parent. This error is likely caused by a bug ' +
       'in React. Please file an issue.',
   );
@@ -1535,8 +1532,7 @@ function commitPlacement(finishedWork: Fiber): void {
       break;
     // eslint-disable-next-line-no-fallthrough
     default:
-      invariant(
-        false,
+      throw new Error(
         'Invalid host parent fiber. This error is likely caused by a bug ' +
           'in React. Please file an issue.',
       );
@@ -1641,11 +1637,13 @@ function unmountHostComponents(
     if (!currentParentIsValid) {
       let parent = node.return;
       findParent: while (true) {
-        invariant(
-          parent !== null,
-          'Expected to find a host parent. This error is likely caused by ' +
-            'a bug in React. Please file an issue.',
-        );
+        if (parent === null) {
+          throw new Error(
+            'Expected to find a host parent. This error is likely caused by ' +
+              'a bug in React. Please file an issue.',
+          );
+        }
+
         const parentStateNode = parent.stateNode;
         switch (parent.tag) {
           case HostComponent:
@@ -1915,11 +1913,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostText: {
-      invariant(
-        finishedWork.stateNode !== null,
-        'This should have a text node initialized. This error is likely ' +
-          'caused by a bug in React. Please file an issue.',
-      );
+      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 textInstance: TextInstance = finishedWork.stateNode;
       const newText: string = finishedWork.memoizedProps;
       // For hydration we reuse the update path but we treat the oldProps
@@ -1965,8 +1965,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       break;
     }
   }
-  invariant(
-    false,
+
+  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.',
   );
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 53294e67498b..8057c415e745 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -78,7 +78,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -473,8 +472,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
         // Nothing to do for these component types
         break;
       default: {
-        invariant(
-          false,
+        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.',
         );
@@ -945,8 +943,7 @@ function commitLayoutEffectOnFiber(
       case LegacyHiddenComponent:
         break;
       default:
-        invariant(
-          false,
+        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.',
         );
@@ -1432,8 +1429,8 @@ function commitContainer(finishedWork: Fiber) {
       return;
     }
   }
-  invariant(
-    false,
+
+  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.',
   );
@@ -1447,8 +1444,8 @@ function getHostParentFiber(fiber: Fiber): Fiber {
     }
     parent = parent.return;
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Expected to find a host parent. This error is likely caused by a bug ' +
       'in React. Please file an issue.',
   );
@@ -1535,8 +1532,7 @@ function commitPlacement(finishedWork: Fiber): void {
       break;
     // eslint-disable-next-line-no-fallthrough
     default:
-      invariant(
-        false,
+      throw new Error(
         'Invalid host parent fiber. This error is likely caused by a bug ' +
           'in React. Please file an issue.',
       );
@@ -1641,11 +1637,13 @@ function unmountHostComponents(
     if (!currentParentIsValid) {
       let parent = node.return;
       findParent: while (true) {
-        invariant(
-          parent !== null,
-          'Expected to find a host parent. This error is likely caused by ' +
-            'a bug in React. Please file an issue.',
-        );
+        if (parent === null) {
+          throw new Error(
+            'Expected to find a host parent. This error is likely caused by ' +
+              'a bug in React. Please file an issue.',
+          );
+        }
+
         const parentStateNode = parent.stateNode;
         switch (parent.tag) {
           case HostComponent:
@@ -1915,11 +1913,13 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostText: {
-      invariant(
-        finishedWork.stateNode !== null,
-        'This should have a text node initialized. This error is likely ' +
-          'caused by a bug in React. Please file an issue.',
-      );
+      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 textInstance: TextInstance = finishedWork.stateNode;
       const newText: string = finishedWork.memoizedProps;
       // For hydration we reuse the update path but we treat the oldProps
@@ -1965,8 +1965,8 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       break;
     }
   }
-  invariant(
-    false,
+
+  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.',
   );
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 03136ce30ba7..a15702985e9a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -73,7 +73,6 @@ import {
   StaticMask,
   MutationMask,
 } from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createInstance,
@@ -897,11 +896,13 @@ function completeWork(
         }
       } else {
         if (!newProps) {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          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);
           return null;
@@ -973,11 +974,12 @@ function completeWork(
         updateHostText(current, workInProgress, oldText, newText);
       } else {
         if (typeof newText !== 'string') {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          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();
@@ -1007,11 +1009,14 @@ function completeWork(
         if (nextState !== null && nextState.dehydrated !== null) {
           if (current === null) {
             const wasHydrated = popHydrationState(workInProgress);
-            invariant(
-              wasHydrated,
-              'A dehydrated suspense component was completed without a hydrated node. ' +
-                'This is probably a bug in React.',
-            );
+
+            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) {
@@ -1478,11 +1483,10 @@ function completeWork(
       }
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1155a817d61b..89b8b980bc3e 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -73,7 +73,6 @@ import {
   StaticMask,
   MutationMask,
 } from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createInstance,
@@ -897,11 +896,13 @@ function completeWork(
         }
       } else {
         if (!newProps) {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          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);
           return null;
@@ -973,11 +974,12 @@ function completeWork(
         updateHostText(current, workInProgress, oldText, newText);
       } else {
         if (typeof newText !== 'string') {
-          invariant(
-            workInProgress.stateNode !== null,
-            'We must have new props for new mounts. This error is likely ' +
-              'caused by a bug in React. Please file an issue.',
-          );
+          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();
@@ -1007,11 +1009,14 @@ function completeWork(
         if (nextState !== null && nextState.dehydrated !== null) {
           if (current === null) {
             const wasHydrated = popHydrationState(workInProgress);
-            invariant(
-              wasHydrated,
-              'A dehydrated suspense component was completed without a hydrated node. ' +
-                'This is probably a bug in React.',
-            );
+
+            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) {
@@ -1478,11 +1483,10 @@ function completeWork(
       }
     }
   }
-  invariant(
-    false,
-    'Unknown unit of work tag (%s). This error is likely caused by a bug in ' +
+
+  throw new Error(
+    `Unknown unit of work tag (${workInProgress.tag}). This error is likely caused by a bug in ` +
       'React. Please file an issue.',
-    workInProgress.tag,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberContext.new.js b/packages/react-reconciler/src/ReactFiberContext.new.js
index a7735f7b56e1..43d5e68abb05 100644
--- a/packages/react-reconciler/src/ReactFiberContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberContext.new.js
@@ -14,7 +14,6 @@ import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 import {createCursor, push, pop} from './ReactFiberStack.new';
@@ -161,11 +160,12 @@ function pushTopLevelContextObject(
   if (disableLegacyContext) {
     return;
   } else {
-    invariant(
-      contextStackCursor.current === emptyContextObject,
-      'Unexpected context found on stack. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    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);
@@ -205,12 +205,12 @@ function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromFiber(fiber) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromFiber(fiber) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromFiber(fiber) || 'Unknown';
@@ -256,11 +256,13 @@ function invalidateContextProvider(
     return;
   } else {
     const instance = workInProgress.stateNode;
-    invariant(
-      instance,
-      'Expected to have an instance by this point. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (!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.
@@ -293,11 +295,12 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
   } else {
     // Currently this is only used with renderSubtreeIntoContainer; not sure if it
     // makes sense elsewhere
-    invariant(
-      isFiberMounted(fiber) && fiber.tag === ClassComponent,
-      'Expected subtree parent to be a mounted class component. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (!isFiberMounted(fiber) || fiber.tag !== ClassComponent) {
+      throw new Error(
+        'Expected subtree parent to be a mounted class component. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     let node = fiber;
     do {
@@ -314,8 +317,8 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
       }
       node = node.return;
     } while (node !== null);
-    invariant(
-      false,
+
+    throw new Error(
       'Found unexpected detached subtree parent. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/react-reconciler/src/ReactFiberContext.old.js b/packages/react-reconciler/src/ReactFiberContext.old.js
index c4736bcbd310..82bf05e6687c 100644
--- a/packages/react-reconciler/src/ReactFiberContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberContext.old.js
@@ -14,7 +14,6 @@ import {isFiberMounted} from './ReactFiberTreeReflection';
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import {ClassComponent, HostRoot} from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 import {createCursor, push, pop} from './ReactFiberStack.old';
@@ -161,11 +160,12 @@ function pushTopLevelContextObject(
   if (disableLegacyContext) {
     return;
   } else {
-    invariant(
-      contextStackCursor.current === emptyContextObject,
-      'Unexpected context found on stack. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    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);
@@ -205,12 +205,12 @@ function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromFiber(fiber) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromFiber(fiber) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromFiber(fiber) || 'Unknown';
@@ -256,11 +256,13 @@ function invalidateContextProvider(
     return;
   } else {
     const instance = workInProgress.stateNode;
-    invariant(
-      instance,
-      'Expected to have an instance by this point. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+
+    if (!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.
@@ -293,11 +295,12 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
   } else {
     // Currently this is only used with renderSubtreeIntoContainer; not sure if it
     // makes sense elsewhere
-    invariant(
-      isFiberMounted(fiber) && fiber.tag === ClassComponent,
-      'Expected subtree parent to be a mounted class component. ' +
-        'This error is likely caused by a bug in React. Please file an issue.',
-    );
+    if (!isFiberMounted(fiber) || fiber.tag !== ClassComponent) {
+      throw new Error(
+        'Expected subtree parent to be a mounted class component. ' +
+          'This error is likely caused by a bug in React. Please file an issue.',
+      );
+    }
 
     let node = fiber;
     do {
@@ -314,8 +317,8 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object {
       }
       node = node.return;
     } while (node !== null);
-    invariant(
-      false,
+
+    throw new Error(
       'Found unexpected detached subtree parent. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d6123454972a..b66b62c9ade7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -88,7 +88,6 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 
-import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
@@ -310,8 +309,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
 }
 
 function throwInvalidHookError() {
-  invariant(
-    false,
+  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' +
@@ -436,11 +434,13 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      invariant(
-        numberOfReRenders < RE_RENDER_LIMIT,
-        'Too many re-renders. React limits the number of renders to prevent ' +
-          'an infinite loop.',
-      );
+
+      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__) {
@@ -516,11 +516,12 @@ export function renderWithHooks<Props, SecondArg>(
 
   didScheduleRenderPhaseUpdate = false;
 
-  invariant(
-    !didRenderTooFewHooks,
-    'Rendered fewer hooks than expected. This may be caused by an accidental ' +
-      'early return statement.',
-  );
+  if (didRenderTooFewHooks) {
+    throw new Error(
+      'Rendered fewer hooks than expected. This may be caused by an accidental ' +
+        'early return statement.',
+    );
+  }
 
   if (enableLazyContextPropagation) {
     if (current !== null) {
@@ -669,10 +670,10 @@ function updateWorkInProgressHook(): Hook {
   } else {
     // Clone from the current hook.
 
-    invariant(
-      nextCurrentHook !== null,
-      'Rendered more hooks than during the previous render.',
-    );
+    if (nextCurrentHook === null) {
+      throw new Error('Rendered more hooks than during the previous render.');
+    }
+
     currentHook = nextCurrentHook;
 
     const newHook: Hook = {
@@ -745,10 +746,12 @@ function updateReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -900,10 +903,12 @@ function rerenderReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -1037,8 +1042,7 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
 
     // We expect this error not to be thrown during the synchronous retry,
     // because we blocked interleaved mutations.
-    invariant(
-      false,
+    throw new Error(
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
@@ -1051,10 +1055,12 @@ function useMutableSource<Source, Snapshot>(
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
+
+  if (root === null) {
+    throw new Error(
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+  }
 
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
@@ -1242,8 +1248,7 @@ function mountSyncExternalStore<T>(
   const isHydrating = getIsHydrating();
   if (isHydrating) {
     if (getServerSnapshot === undefined) {
-      invariant(
-        false,
+      throw new Error(
         'Missing getServerSnapshot, which is required for ' +
           'server-rendered content. Will revert to client rendering.',
       );
@@ -1279,10 +1284,13 @@ function mountSyncExternalStore<T>(
     // the content is stale, it's already visible anyway. Instead we'll patch
     // it up in a passive effect.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1376,10 +1384,13 @@ function updateSyncExternalStore<T>(
     // Right before committing, we will walk the tree and check if any of the
     // stores were mutated.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1532,6 +1543,7 @@ function pushEffect(tag, create, destroy, deps) {
 let stackContainsErrorMessage: boolean | null = null;
 
 function getCallerStackFrame(): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const stackFrames = new Error('Error message').stack.split('\n');
 
   // Some browsers (e.g. Chrome) include the error message in the stack
@@ -2051,8 +2063,8 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
           setId(makeId());
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
           'passed through to attributes only. Do not read the value directly.',
       );
@@ -2383,7 +2395,7 @@ function markUpdateInDevTools(fiber, lane, action) {
 
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
   let cacheForType: T | void = (cache.get(resourceType): any);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index d4dacbc8833c..af21b5f6f9da 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -88,7 +88,6 @@ import {
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 
-import invariant from 'shared/invariant';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
@@ -310,8 +309,7 @@ function warnOnHookMismatchInDev(currentHookName: HookType) {
 }
 
 function throwInvalidHookError() {
-  invariant(
-    false,
+  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' +
@@ -436,11 +434,13 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
-      invariant(
-        numberOfReRenders < RE_RENDER_LIMIT,
-        'Too many re-renders. React limits the number of renders to prevent ' +
-          'an infinite loop.',
-      );
+
+      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__) {
@@ -516,11 +516,12 @@ export function renderWithHooks<Props, SecondArg>(
 
   didScheduleRenderPhaseUpdate = false;
 
-  invariant(
-    !didRenderTooFewHooks,
-    'Rendered fewer hooks than expected. This may be caused by an accidental ' +
-      'early return statement.',
-  );
+  if (didRenderTooFewHooks) {
+    throw new Error(
+      'Rendered fewer hooks than expected. This may be caused by an accidental ' +
+        'early return statement.',
+    );
+  }
 
   if (enableLazyContextPropagation) {
     if (current !== null) {
@@ -669,10 +670,10 @@ function updateWorkInProgressHook(): Hook {
   } else {
     // Clone from the current hook.
 
-    invariant(
-      nextCurrentHook !== null,
-      'Rendered more hooks than during the previous render.',
-    );
+    if (nextCurrentHook === null) {
+      throw new Error('Rendered more hooks than during the previous render.');
+    }
+
     currentHook = nextCurrentHook;
 
     const newHook: Hook = {
@@ -745,10 +746,12 @@ function updateReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -900,10 +903,12 @@ function rerenderReducer<S, I, A>(
 ): [S, Dispatch<A>] {
   const hook = updateWorkInProgressHook();
   const queue = hook.queue;
-  invariant(
-    queue !== null,
-    'Should have a queue. This is likely a bug in React. Please file an issue.',
-  );
+
+  if (queue === null) {
+    throw new Error(
+      'Should have a queue. This is likely a bug in React. Please file an issue.',
+    );
+  }
 
   queue.lastRenderedReducer = reducer;
 
@@ -1037,8 +1042,7 @@ function readFromUnsubscribedMutableSource<Source, Snapshot>(
 
     // We expect this error not to be thrown during the synchronous retry,
     // because we blocked interleaved mutations.
-    invariant(
-      false,
+    throw new Error(
       'Cannot read from mutable source during the current render without tearing. This may be a bug in React. Please file an issue.',
     );
   }
@@ -1051,10 +1055,12 @@ function useMutableSource<Source, Snapshot>(
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
-  invariant(
-    root !== null,
-    'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-  );
+
+  if (root === null) {
+    throw new Error(
+      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+    );
+  }
 
   const getVersion = source._getVersion;
   const version = getVersion(source._source);
@@ -1242,8 +1248,7 @@ function mountSyncExternalStore<T>(
   const isHydrating = getIsHydrating();
   if (isHydrating) {
     if (getServerSnapshot === undefined) {
-      invariant(
-        false,
+      throw new Error(
         'Missing getServerSnapshot, which is required for ' +
           'server-rendered content. Will revert to client rendering.',
       );
@@ -1279,10 +1284,13 @@ function mountSyncExternalStore<T>(
     // the content is stale, it's already visible anyway. Instead we'll patch
     // it up in a passive effect.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1376,10 +1384,13 @@ function updateSyncExternalStore<T>(
     // Right before committing, we will walk the tree and check if any of the
     // stores were mutated.
     const root: FiberRoot | null = getWorkInProgressRoot();
-    invariant(
-      root !== null,
-      'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
-    );
+
+    if (root === null) {
+      throw new Error(
+        'Expected a work-in-progress root. This is a bug in React. Please file an issue.',
+      );
+    }
+
     if (!includesBlockingLane(root, renderLanes)) {
       pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);
     }
@@ -1532,6 +1543,7 @@ function pushEffect(tag, create, destroy, deps) {
 let stackContainsErrorMessage: boolean | null = null;
 
 function getCallerStackFrame(): string {
+  // eslint-disable-next-line react-internal/prod-error-codes
   const stackFrames = new Error('Error message').stack.split('\n');
 
   // Some browsers (e.g. Chrome) include the error message in the stack
@@ -2051,8 +2063,8 @@ function mountOpaqueIdentifier(): OpaqueIDType | void {
           setId(makeId());
         }
       }
-      invariant(
-        false,
+
+      throw new Error(
         'The object passed back from useOpaqueIdentifier is meant to be ' +
           'passed through to attributes only. Do not read the value directly.',
       );
@@ -2383,7 +2395,7 @@ function markUpdateInDevTools(fiber, lane, action) {
 
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
-    invariant(false, 'Not implemented.');
+    throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
   let cacheForType: T | void = (cache.get(resourceType): any);
diff --git a/packages/react-reconciler/src/ReactFiberHostConfig.js b/packages/react-reconciler/src/ReactFiberHostConfig.js
index 49c975254052..2829adc56925 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfig.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* 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
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index c57b313fd90f..b95fd52d189b 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support hydration
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support hydration. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
index 4d8849486201..5c55d9d59b01 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support microtasks
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support microtasks. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
index 50e6758a8d3e..59e8c450861f 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support mutation
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support mutation. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
index 824cdeacc73f..9f194fbc8a8d 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support persistence
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  throw new Error(
     'The current renderer does not support persistence. ' +
       'This error is likely caused by a bug in React. ' +
       'Please file an issue.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
index 9c9c89376778..6eb3d08a4de6 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support React Scopes
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  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.',
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
index b8c9777f7bd5..964bf4b2c43d 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js
@@ -7,14 +7,11 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 // Renderers that don't support test selectors
 // can re-export everything from this module.
 
 function shim(...args: any) {
-  invariant(
-    false,
+  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.',
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.new.js b/packages/react-reconciler/src/ReactFiberHostContext.new.js
index 298a96afecac..e7d9433136ad 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.new.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Container, HostContext} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
-
 import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 
@@ -30,11 +28,13 @@ const rootInstanceStackCursor: StackCursor<
 > = createCursor(NO_CONTEXT);
 
 function requiredContext<Value>(c: Value | NoContextT): Value {
-  invariant(
-    c !== NO_CONTEXT,
-    'Expected host context to exist. This error is likely caused by a bug ' +
-      'in React. Please file an issue.',
-  );
+  if (c === NO_CONTEXT) {
+    throw new Error(
+      'Expected host context to exist. This error is likely caused by a bug ' +
+        'in React. Please file an issue.',
+    );
+  }
+
   return (c: any);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.old.js b/packages/react-reconciler/src/ReactFiberHostContext.old.js
index bfecfb7f525a..667aeaf0ddef 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.old.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Container, HostContext} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
-
 import {getChildHostContext, getRootHostContext} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 
@@ -30,11 +28,13 @@ const rootInstanceStackCursor: StackCursor<
 > = createCursor(NO_CONTEXT);
 
 function requiredContext<Value>(c: Value | NoContextT): Value {
-  invariant(
-    c !== NO_CONTEXT,
-    'Expected host context to exist. This error is likely caused by a bug ' +
-      'in React. Please file an issue.',
-  );
+  if (c === NO_CONTEXT) {
+    throw new Error(
+      'Expected host context to exist. This error is likely caused by a bug ' +
+        'in React. Please file an issue.',
+    );
+  }
+
   return (c: any);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index 4c9eaf010125..0867ffeb7843 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+/* eslint-disable react-internal/prod-error-codes */
+
 import type {ReactElement} from 'shared/ReactElementType';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index ee0616fae79c..4a5f53d3be73 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+/* eslint-disable react-internal/prod-error-codes */
+
 import type {ReactElement} from 'shared/ReactElementType';
 import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 2ebb1386a568..f694d8407ecd 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -25,7 +25,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -293,8 +292,7 @@ function prepareToHydrateHostInstance(
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -321,8 +319,7 @@ function prepareToHydrateHostInstance(
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostTextInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -369,8 +366,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
 function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -379,11 +375,14 @@ function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  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);
 }
 
@@ -391,8 +390,7 @@ function skipPastDehydratedSuspenseInstance(
   fiber: Fiber,
 ): null | HydratableInstance {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -400,11 +398,14 @@ function skipPastDehydratedSuspenseInstance(
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  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);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index c8e17e0b6374..3918c014ca14 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -25,7 +25,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
-import invariant from 'shared/invariant';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -293,8 +292,7 @@ function prepareToHydrateHostInstance(
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -321,8 +319,7 @@ function prepareToHydrateHostInstance(
 
 function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostTextInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -369,8 +366,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
 function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected prepareToHydrateHostSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -379,11 +375,14 @@ function prepareToHydrateHostSuspenseInstance(fiber: Fiber): void {
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  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);
 }
 
@@ -391,8 +390,7 @@ function skipPastDehydratedSuspenseInstance(
   fiber: Fiber,
 ): null | HydratableInstance {
   if (!supportsHydration) {
-    invariant(
-      false,
+    throw new Error(
       'Expected skipPastDehydratedSuspenseInstance() to never be called. ' +
         'This error is likely caused by a bug in React. Please file an issue.',
     );
@@ -400,11 +398,14 @@ function skipPastDehydratedSuspenseInstance(
   const suspenseState: null | SuspenseState = fiber.memoizedState;
   const suspenseInstance: null | SuspenseInstance =
     suspenseState !== null ? suspenseState.dehydrated : null;
-  invariant(
-    suspenseInstance,
-    'Expected to have a hydrated suspense instance. ' +
-      'This error is likely caused by a bug in React. Please file an issue.',
-  );
+
+  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);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 421351b3bda5..2f59cbec27f2 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -38,7 +38,6 @@ import {
   NeedsPropagation,
 } from './ReactFiberFlags';
 
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.new';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
@@ -269,10 +268,13 @@ function propagateContextChange_eager<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === 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) {
@@ -388,10 +390,13 @@ function propagateContextChanges<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === 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) {
@@ -493,10 +498,11 @@ function propagateParentContextChanges(
 
     if (parent.tag === ContextProvider) {
       const currentParent = parent.alternate;
-      invariant(
-        currentParent !== null,
-        'Should have a current fiber. This is a bug in React.',
-      );
+
+      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 providerType: ReactProviderType<any> = parent.type;
@@ -631,13 +637,14 @@ export function readContext<T>(context: ReactContext<T>): T {
     };
 
     if (lastContextDependency === null) {
-      invariant(
-        currentlyRenderingFiber !== null,
-        'Context can only be read while React is rendering. ' +
-          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-          'In function components, you can read it directly in the function body, but not ' +
-          'inside Hooks like useReducer() or useMemo().',
-      );
+      if (currentlyRenderingFiber === 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;
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 24fd5f6e4331..0d492397afd8 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -38,7 +38,6 @@ import {
   NeedsPropagation,
 } from './ReactFiberFlags';
 
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.old';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
@@ -269,10 +268,13 @@ function propagateContextChange_eager<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === 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) {
@@ -388,10 +390,13 @@ function propagateContextChanges<T>(
       // if it will have any context consumers in it. The best we can do is
       // mark it as having updates.
       const parentSuspense = fiber.return;
-      invariant(
-        parentSuspense !== null,
-        'We just came from a parent so we must have had a parent. This is a bug in React.',
-      );
+
+      if (parentSuspense === 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) {
@@ -493,10 +498,11 @@ function propagateParentContextChanges(
 
     if (parent.tag === ContextProvider) {
       const currentParent = parent.alternate;
-      invariant(
-        currentParent !== null,
-        'Should have a current fiber. This is a bug in React.',
-      );
+
+      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 providerType: ReactProviderType<any> = parent.type;
@@ -631,13 +637,14 @@ export function readContext<T>(context: ReactContext<T>): T {
     };
 
     if (lastContextDependency === null) {
-      invariant(
-        currentlyRenderingFiber !== null,
-        'Context can only be read while React is rendering. ' +
-          'In classes, you can read it in the render method or getDerivedStateFromProps. ' +
-          'In function components, you can read it directly in the function body, but not ' +
-          'inside Hooks like useReducer() or useMemo().',
-      );
+      if (currentlyRenderingFiber === 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;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 95844fcbf2e8..6c42165a3034 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -33,7 +33,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -153,12 +152,11 @@ function findHostInstance(component: Object): PublicInstance | null {
   const fiber = getInstance(component);
   if (fiber === undefined) {
     if (typeof component.render === 'function') {
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     } else {
-      invariant(
-        false,
-        'Argument appears to not be a ReactComponent. Keys: %s',
-        Object.keys(component),
+      const keys = Object.keys(component).join(',');
+      throw new Error(
+        `Argument appears to not be a ReactComponent. Keys: ${keys}`,
       );
     }
   }
@@ -177,12 +175,11 @@ function findHostInstanceWithWarning(
     const fiber = getInstance(component);
     if (fiber === undefined) {
       if (typeof component.render === 'function') {
-        invariant(false, 'Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       } else {
-        invariant(
-          false,
-          'Argument appears to not be a ReactComponent. Keys: %s',
-          Object.keys(component),
+        const keys = Object.keys(component).join(',');
+        throw new Error(
+          `Argument appears to not be a ReactComponent. Keys: ${keys}`,
         );
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 802b1bc97111..7693cc7fe400 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -33,7 +33,6 @@ import {
   SuspenseComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {enableSchedulingProfiler} from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -153,12 +152,11 @@ function findHostInstance(component: Object): PublicInstance | null {
   const fiber = getInstance(component);
   if (fiber === undefined) {
     if (typeof component.render === 'function') {
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     } else {
-      invariant(
-        false,
-        'Argument appears to not be a ReactComponent. Keys: %s',
-        Object.keys(component),
+      const keys = Object.keys(component).join(',');
+      throw new Error(
+        `Argument appears to not be a ReactComponent. Keys: ${keys}`,
       );
     }
   }
@@ -177,12 +175,11 @@ function findHostInstanceWithWarning(
     const fiber = getInstance(component);
     if (fiber === undefined) {
       if (typeof component.render === 'function') {
-        invariant(false, 'Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       } else {
-        invariant(
-          false,
-          'Argument appears to not be a ReactComponent. Keys: %s',
-          Object.keys(component),
+        const keys = Object.keys(component).join(',');
+        throw new Error(
+          `Argument appears to not be a ReactComponent. Keys: ${keys}`,
         );
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 78e88f125a1a..85728d96bb73 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -474,7 +474,8 @@ function throwException(
       return;
     } else {
       // No boundary was found. Fallthrough to error mode.
-      // TODO: Use invariant so the message is stripped in prod?
+      // TODO: We should never call getComponentNameFromFiber in production.
+      // Log a warning or something to prevent us from accidentally bundling it.
       value = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index d2d39793a3bc..27b0719ba853 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -474,7 +474,8 @@ function throwException(
       return;
     } else {
       // No boundary was found. Fallthrough to error mode.
-      // TODO: Use invariant so the message is stripped in prod?
+      // TODO: We should never call getComponentNameFromFiber in production.
+      // Log a warning or something to prevent us from accidentally bundling it.
       value = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js
index 510c58eaf2b3..4aa5a203ae3a 100644
--- a/packages/react-reconciler/src/ReactFiberTreeReflection.js
+++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js
@@ -11,8 +11,6 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Container, SuspenseInstance} from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 
-import invariant from 'shared/invariant';
-
 import {get as getInstance} from 'shared/ReactInstanceMap';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -116,10 +114,9 @@ export function isMounted(component: React$Component<any, any>): boolean {
 }
 
 function assertIsMounted(fiber) {
-  invariant(
-    getNearestMountedFiber(fiber) === fiber,
-    'Unable to find node on an unmounted component.',
-  );
+  if (getNearestMountedFiber(fiber) !== fiber) {
+    throw new Error('Unable to find node on an unmounted component.');
+  }
 }
 
 export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
@@ -127,10 +124,11 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
   if (!alternate) {
     // If there is no alternate, then we only need to check if it is mounted.
     const nearestMounted = getNearestMountedFiber(fiber);
-    invariant(
-      nearestMounted !== null,
-      'Unable to find node on an unmounted component.',
-    );
+
+    if (nearestMounted === null) {
+      throw new Error('Unable to find node on an unmounted component.');
+    }
+
     if (nearestMounted !== fiber) {
       return null;
     }
@@ -180,9 +178,10 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
         }
         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.
-      invariant(false, 'Unable to find node on an unmounted component.');
+      throw new Error('Unable to find node on an unmounted component.');
     }
 
     if (a.return !== b.return) {
@@ -233,26 +232,30 @@ export function findCurrentFiberUsingSlowPath(fiber: Fiber): Fiber | null {
           }
           child = child.sibling;
         }
-        invariant(
-          didFindChild,
-          'Child was not found in either parent set. This indicates a bug ' +
-            'in React related to the return pointer. Please file an issue.',
-        );
+
+        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.',
+          );
+        }
       }
     }
 
-    invariant(
-      a.alternate === b,
-      "Return fibers should always be each others' alternates. " +
-        'This error is likely caused by a bug in React. 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.
-  invariant(
-    a.tag === HostRoot,
-    'Unable to find node on an unmounted component.',
-  );
+  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;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 152837286f5d..ba8bd4b57395 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -51,8 +51,6 @@ import {
 } from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 
-import invariant from 'shared/invariant';
-
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   switch (workInProgress.tag) {
     case ClassComponent: {
@@ -85,11 +83,14 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-      invariant(
-        (flags & DidCapture) === NoFlags,
-        'The root failed to unmount after an error. This is likely a bug in ' +
-          'React. Please file an issue.',
-      );
+
+      if ((flags & DidCapture) !== NoFlags) {
+        throw new Error(
+          'The root failed to unmount after an error. This is likely a bug in ' +
+            'React. Please file an issue.',
+        );
+      }
+
       workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
       return workInProgress;
     }
@@ -104,11 +105,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
         const suspenseState: null | SuspenseState =
           workInProgress.memoizedState;
         if (suspenseState !== null && suspenseState.dehydrated !== null) {
-          invariant(
-            workInProgress.alternate !== null,
-            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
-              'React. Please file an issue.',
-          );
+          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();
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 88861db778be..ad8e479700db 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -51,8 +51,6 @@ import {
 } from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 
-import invariant from 'shared/invariant';
-
 function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   switch (workInProgress.tag) {
     case ClassComponent: {
@@ -85,11 +83,14 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-      invariant(
-        (flags & DidCapture) === NoFlags,
-        'The root failed to unmount after an error. This is likely a bug in ' +
-          'React. Please file an issue.',
-      );
+
+      if ((flags & DidCapture) !== NoFlags) {
+        throw new Error(
+          'The root failed to unmount after an error. This is likely a bug in ' +
+            'React. Please file an issue.',
+        );
+      }
+
       workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
       return workInProgress;
     }
@@ -104,11 +105,13 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
         const suspenseState: null | SuspenseState =
           workInProgress.memoizedState;
         if (suspenseState !== null && suspenseState.dehydrated !== null) {
-          invariant(
-            workInProgress.alternate !== null,
-            'Threw in newly mounted dehydrated component. This is likely a bug in ' +
-              'React. Please file an issue.',
-          );
+          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();
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 830ae6500663..aaeac5fdb22e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -34,7 +34,6 @@ import {
   warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 
 import {
@@ -737,10 +736,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   currentEventTime = NoTimestamp;
   currentEventTransitionLane = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   // Flush any pending passive effects before deciding which lanes to work on,
   // in case they schedule additional work.
@@ -878,7 +876,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
     case RootFatalErrored: {
-      invariant(false, 'Root did not complete. This is a bug in React.');
+      throw new Error('Root did not complete. This is a bug in React.');
     }
     // Flow knows about invariant, so it complains if I add a break
     // statement, but eslint doesn't know about invariant, so it complains
@@ -981,7 +979,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       break;
     }
     default: {
-      invariant(false, 'Unknown root exit status.');
+      throw new Error('Unknown root exit status.');
     }
   }
 }
@@ -1055,10 +1053,9 @@ function performSyncWorkOnRoot(root) {
     syncNestedUpdateFlag();
   }
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   flushPassiveEffects();
 
@@ -1525,8 +1522,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 
   if (workInProgress !== null) {
     // This is a sync render, so we should have finished the whole tree.
-    invariant(
-      false,
+    throw new Error(
       'Cannot commit an incomplete root. This error is likely caused by a ' +
         'bug in React. Please file an issue.',
     );
@@ -1796,10 +1792,9 @@ function commitRootImpl(root, renderPriorityLevel) {
   } while (rootWithPendingPassiveEffects !== null);
   flushRenderPhaseStrictModeWarningsInDEV();
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   const finishedWork = root.finishedWork;
   const lanes = root.finishedLanes;
@@ -1839,11 +1834,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
-  invariant(
-    finishedWork !== root.current,
-    'Cannot commit the same tree as before. This error is likely caused by ' +
-      'a bug in React. Please file an issue.',
-  );
+  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.',
+    );
+  }
 
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
@@ -2154,10 +2150,9 @@ function flushPassiveEffectsImpl() {
   // because it's only used for profiling), but it's a refactor hazard.
   pendingPassiveEffectsLanes = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Cannot flush passive effects while already rendering.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Cannot flush passive effects while already rendering.');
+  }
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2418,8 +2413,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
         retryCache = boundaryFiber.stateNode;
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'Pinged unknown suspense boundary type. ' +
             'This is probably a bug in React.',
         );
@@ -2466,8 +2460,8 @@ function checkForNestedUpdates() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
     rootWithNestedUpdates = null;
-    invariant(
-      false,
+
+    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 ' +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 9cfea1563a18..67984298a5de 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -34,7 +34,6 @@ import {
   warnOnSubscriptionInsideStartTransition,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import is from 'shared/objectIs';
 
 import {
@@ -737,10 +736,9 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   currentEventTime = NoTimestamp;
   currentEventTransitionLane = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   // Flush any pending passive effects before deciding which lanes to work on,
   // in case they schedule additional work.
@@ -878,7 +876,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
     case RootFatalErrored: {
-      invariant(false, 'Root did not complete. This is a bug in React.');
+      throw new Error('Root did not complete. This is a bug in React.');
     }
     // Flow knows about invariant, so it complains if I add a break
     // statement, but eslint doesn't know about invariant, so it complains
@@ -981,7 +979,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       break;
     }
     default: {
-      invariant(false, 'Unknown root exit status.');
+      throw new Error('Unknown root exit status.');
     }
   }
 }
@@ -1055,10 +1053,9 @@ function performSyncWorkOnRoot(root) {
     syncNestedUpdateFlag();
   }
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   flushPassiveEffects();
 
@@ -1525,8 +1522,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 
   if (workInProgress !== null) {
     // This is a sync render, so we should have finished the whole tree.
-    invariant(
-      false,
+    throw new Error(
       'Cannot commit an incomplete root. This error is likely caused by a ' +
         'bug in React. Please file an issue.',
     );
@@ -1796,10 +1792,9 @@ function commitRootImpl(root, renderPriorityLevel) {
   } while (rootWithPendingPassiveEffects !== null);
   flushRenderPhaseStrictModeWarningsInDEV();
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Should not already be working.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Should not already be working.');
+  }
 
   const finishedWork = root.finishedWork;
   const lanes = root.finishedLanes;
@@ -1839,11 +1834,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
-  invariant(
-    finishedWork !== root.current,
-    'Cannot commit the same tree as before. This error is likely caused by ' +
-      'a bug in React. Please file an issue.',
-  );
+  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.',
+    );
+  }
 
   // commitRoot never returns a continuation; it always finishes synchronously.
   // So we can clear these now to allow a new callback to be scheduled.
@@ -2154,10 +2150,9 @@ function flushPassiveEffectsImpl() {
   // because it's only used for profiling), but it's a refactor hazard.
   pendingPassiveEffectsLanes = NoLanes;
 
-  invariant(
-    (executionContext & (RenderContext | CommitContext)) === NoContext,
-    'Cannot flush passive effects while already rendering.',
-  );
+  if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
+    throw new Error('Cannot flush passive effects while already rendering.');
+  }
 
   if (__DEV__) {
     if (enableDebugTracing) {
@@ -2418,8 +2413,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
         retryCache = boundaryFiber.stateNode;
         break;
       default:
-        invariant(
-          false,
+        throw new Error(
           'Pinged unknown suspense boundary type. ' +
             'This is probably a bug in React.',
         );
@@ -2466,8 +2460,8 @@ function checkForNestedUpdates() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
     rootWithNestedUpdates = null;
-    invariant(
-      false,
+
+    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 ' +
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index 58e888c16858..adadc8ed73e8 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -10,7 +10,6 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Instance} from './ReactFiberHostConfig';
 
-import invariant from 'shared/invariant';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {
@@ -116,17 +115,22 @@ export function createTestNameSelector(id: string): TestNameSelector {
 function findFiberRootForHostRoot(hostRoot: Instance): Fiber {
   const maybeFiber = getInstanceFromNode((hostRoot: any));
   if (maybeFiber != null) {
-    invariant(
-      typeof maybeFiber.memoizedProps['data-testname'] === 'string',
-      'Invalid host root specified. Should be either a React container or a node with a testname attribute.',
-    );
+    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);
-    invariant(
-      fiberRoot !== null,
-      'Could not find React container within specified host subtree.',
-    );
+
+    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);
@@ -179,8 +183,7 @@ function matchSelector(fiber: Fiber, selector: Selector): boolean {
       }
       break;
     default:
-      invariant(null, 'Invalid selector type %s specified.', selector);
-      break;
+      throw new Error('Invalid selector type specified.');
   }
 
   return false;
@@ -200,11 +203,8 @@ function selectorToString(selector: Selector): string | null {
     case TEST_NAME_TYPE:
       return `[data-testname="${((selector: any): TestNameSelector).value}"]`;
     default:
-      invariant(null, 'Invalid selector type %s specified.', selector);
-      break;
+      throw new Error('Invalid selector type specified.');
   }
-
-  return null;
 }
 
 function findPaths(root: Fiber, selectors: Array<Selector>): Array<Fiber> {
@@ -277,7 +277,7 @@ export function findAllNodes(
   selectors: Array<Selector>,
 ): Array<Instance> {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -311,7 +311,7 @@ export function getFindAllNodesFailureDescription(
   selectors: Array<Selector>,
 ): string | null {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -376,7 +376,7 @@ export function findBoundingRects(
   selectors: Array<Selector>,
 ): Array<BoundingRect> {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const instanceRoots = findAllNodes(hostRoot, selectors);
@@ -466,7 +466,7 @@ export function focusWithin(
   selectors: Array<Selector>,
 ): boolean {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const root = findFiberRootForHostRoot(hostRoot);
@@ -516,7 +516,7 @@ export function observeVisibleRects(
   options?: IntersectionObserverOptions,
 ): {|disconnect: () => void|} {
   if (!supportsTestSelectors) {
-    invariant(false, 'Test selector API is not supported by this renderer.');
+    throw new Error('Test selector API is not supported by this renderer.');
   }
 
   const instanceRoots = findAllNodes(hostRoot, selectors);
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index cbfe307b903f..c9a980890a0a 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -112,8 +112,6 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
-import invariant from 'shared/invariant';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -656,12 +654,13 @@ export function processUpdateQueue<State>(
 }
 
 function callCallback(callback, context) {
-  invariant(
-    typeof callback === 'function',
-    'Invalid argument passed as callback. Expected a function. Instead ' +
-      'received: %s',
-    callback,
-  );
+  if (typeof callback !== 'function') {
+    throw new Error(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        `received: ${callback}`,
+    );
+  }
+
   callback.call(context);
 }
 
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index ece4321d6bfd..9ef09b17efd1 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -112,8 +112,6 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
-import invariant from 'shared/invariant';
-
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -656,12 +654,13 @@ export function processUpdateQueue<State>(
 }
 
 function callCallback(callback, context) {
-  invariant(
-    typeof callback === 'function',
-    'Invalid argument passed as callback. Expected a function. Instead ' +
-      'received: %s',
-    callback,
-  );
+  if (typeof callback !== 'function') {
+    throw new Error(
+      'Invalid argument passed as callback. Expected a function. Instead ' +
+        `received: ${callback}`,
+    );
+  }
+
   callback.call(context);
 }
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
index f0bd70db6142..33fc912b90e6 100644
--- a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
+++ b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js
@@ -15,12 +15,11 @@ import {ClassComponent} from '../ReactWorkTags';
 // Module provided by RN:
 import {ReactFiberErrorDialog as RNImpl} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
-import invariant from 'shared/invariant';
-
-invariant(
-  typeof RNImpl.showErrorDialog === 'function',
-  'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
-);
+if (typeof RNImpl.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
 
 export function showErrorDialog(
   boundary: Fiber,
diff --git a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
index f0a9d92593b1..617e8afbde90 100644
--- a/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
+++ b/packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js
@@ -12,14 +12,14 @@ import type {CapturedValue} from '../ReactCapturedValue';
 
 import {ClassComponent} from '../ReactWorkTags';
 
-import invariant from 'shared/invariant';
-
 // Provided by www
 const ReactFiberErrorDialogWWW = require('ReactFiberErrorDialog');
-invariant(
-  typeof ReactFiberErrorDialogWWW.showErrorDialog === 'function',
-  'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
-);
+
+if (typeof ReactFiberErrorDialogWWW.showErrorDialog !== 'function') {
+  throw new Error(
+    'Expected ReactFiberErrorDialog.showErrorDialog to be a function.',
+  );
+}
 
 export function showErrorDialog(
   boundary: Fiber,
diff --git a/packages/react-server/src/ReactFizzContext.js b/packages/react-server/src/ReactFizzContext.js
index 7837d15753d4..3834a6f1076f 100644
--- a/packages/react-server/src/ReactFizzContext.js
+++ b/packages/react-server/src/ReactFizzContext.js
@@ -9,7 +9,6 @@
 
 import {disableLegacyContext} from 'shared/ReactFeatureFlags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import checkPropTypes from 'shared/checkPropTypes';
 
 let warnedAboutMissingGetChildContext;
@@ -77,12 +76,12 @@ export function processChildContext(
 
     const childContext = instance.getChildContext();
     for (const contextKey in childContext) {
-      invariant(
-        contextKey in childContextTypes,
-        '%s.getChildContext(): key "%s" is not defined in childContextTypes.',
-        getComponentNameFromType(type) || 'Unknown',
-        contextKey,
-      );
+      if (!(contextKey in childContextTypes)) {
+        throw new Error(
+          `${getComponentNameFromType(type) ||
+            'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
+        );
+      }
     }
     if (__DEV__) {
       const name = getComponentNameFromType(type) || 'Unknown';
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 860dc63962da..6370f61b3773 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -22,7 +22,6 @@ import {readContext as readContextImpl} from './ReactFizzNewContext';
 
 import {makeServerID} from './ReactServerFormatConfig';
 
-import invariant from 'shared/invariant';
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -64,15 +63,17 @@ let isInHookUserCodeInDev = false;
 let currentHookNameInDev: ?string;
 
 function resolveCurrentlyRenderingComponent(): Object {
-  invariant(
-    currentlyRenderingComponent !== null,
-    '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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-  );
+  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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+    );
+  }
+
   if (__DEV__) {
     if (isInHookUserCodeInDev) {
       console.error(
@@ -128,7 +129,7 @@ function areHookInputsEqual(
 
 function createHook(): Hook {
   if (numberOfReRenders > 0) {
-    invariant(false, 'Rendered more hooks than during the previous render');
+    throw new Error('Rendered more hooks than during the previous render');
   }
   return {
     memoizedState: null,
@@ -219,7 +220,7 @@ export function resetHooksState(): void {
 function getCacheForType<T>(resourceType: () => T): T {
   // TODO: This should silently mark this as client rendered since it's not necesssarily
   // considered an error. It needs to work for things like Flight though.
-  invariant(false, 'Not implemented.');
+  throw new Error('Not implemented.');
 }
 
 function readContext<T>(context: ReactContext<T>): T {
@@ -406,11 +407,12 @@ function dispatchAction<A>(
   queue: UpdateQueue<A>,
   action: A,
 ) {
-  invariant(
-    numberOfReRenders < RE_RENDER_LIMIT,
-    'Too many re-renders. React limits the number of renders to prevent ' +
-      'an infinite loop.',
-  );
+  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
@@ -467,8 +469,7 @@ function useSyncExternalStore<T>(
   getServerSnapshot?: () => T,
 ): T {
   if (getServerSnapshot === undefined) {
-    invariant(
-      false,
+    throw new Error(
       'Missing getServerSnapshot, which is required for ' +
         'server-rendered content. Will revert to client rendering.',
     );
@@ -482,7 +483,7 @@ function useDeferredValue<T>(value: T): T {
 }
 
 function unsupportedStartTransition() {
-  invariant(false, 'startTransition cannot be called during server rendering.');
+  throw new Error('startTransition cannot be called during server rendering.');
 }
 
 function useTransition(): [boolean, (callback: () => void) => void] {
@@ -495,7 +496,7 @@ function useOpaqueIdentifier(): OpaqueIDType {
 }
 
 function unsupportedRefresh() {
-  invariant(false, 'Cache cannot be refreshed during server rendering.');
+  throw new Error('Cache cannot be refreshed during server rendering.');
 }
 
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
index 43f364717d81..0cb879ef780d 100644
--- a/packages/react-server/src/ReactFizzNewContext.js
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -11,8 +11,6 @@ import type {ReactContext} from 'shared/ReactTypes';
 
 import {isPrimaryRenderer} from './ReactServerFormatConfig';
 
-import invariant from 'shared/invariant';
-
 let rendererSigil;
 if (__DEV__) {
   // Use this to detect multiple renderers using the same context
@@ -67,15 +65,18 @@ function popToNearestCommonAncestor(
     const parentPrev = prev.parent;
     const parentNext = next.parent;
     if (parentPrev === null) {
-      invariant(
-        parentNext === null,
-        'The stacks must reach the root at the same time. This is a bug in React.',
-      );
+      if (parentNext !== null) {
+        throw new Error(
+          'The stacks must reach the root at the same time. This is a bug in React.',
+        );
+      }
     } else {
-      invariant(
-        parentNext !== null,
-        'The stacks must reach the root at the same time. This is a bug in React.',
-      );
+      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);
@@ -105,10 +106,13 @@ function popPreviousToCommonLevel(
 ): void {
   popNode(prev);
   const parentPrev = prev.parent;
-  invariant(
-    parentPrev !== null,
-    'The depth must equal at least at zero before reaching the root. This is a bug in React.',
-  );
+
+  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);
@@ -123,10 +127,13 @@ function popNextToCommonLevel(
   next: ContextNode<any>,
 ): void {
   const parentNext = next.parent;
-  invariant(
-    parentNext !== null,
-    'The depth must equal at least at zero before reaching the root. This is a bug in React.',
-  );
+
+  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);
@@ -221,10 +228,13 @@ export function pushProvider<T>(
 
 export function popProvider<T>(context: ReactContext<T>): ContextSnapshot {
   const prevSnapshot = currentActiveSnapshot;
-  invariant(
-    prevSnapshot !== null,
-    'Tried to pop a Context at the root of the app. This is a bug in React.',
-  );
+
+  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(
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index e9396c861ee4..4ab2f06d518d 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -113,7 +113,6 @@ import {
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
@@ -984,7 +983,7 @@ function renderElement(
         renderNodeDestructive(request, task, props.children);
         return;
       }
-      invariant(false, 'ReactDOMServer does not yet support scope components.');
+      throw new Error('ReactDOMServer does not yet support scope components.');
     }
     // eslint-disable-next-line-no-fallthrough
     case REACT_SUSPENSE_TYPE: {
@@ -1039,13 +1038,11 @@ function renderElement(
         'named imports.';
     }
   }
-  invariant(
-    false,
+
+  throw new Error(
     'Element type is invalid: expected a string (for built-in ' +
       'components) or a class/function (for composite components) ' +
-      'but got: %s.%s',
-    type == null ? type : typeof type,
-    info,
+      `but got: ${type == null ? type : typeof type}.${info}`,
   );
 }
 
@@ -1106,8 +1103,7 @@ function renderNodeDestructive(
         return;
       }
       case REACT_PORTAL_TYPE:
-        invariant(
-          false,
+        throw new Error(
           'Portals are not currently supported by the server renderer. ' +
             'Render them conditionally so that they only appear on the client render.',
         );
@@ -1157,14 +1153,15 @@ function renderNodeDestructive(
     }
 
     const childString = Object.prototype.toString.call(node);
-    invariant(
-      false,
-      'Objects are not valid as a React child (found: %s). ' +
+
+    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.',
-      childString === '[object Object]'
-        ? 'object with keys {' + Object.keys(node).join(', ') + '}'
-        : childString,
     );
   }
 
@@ -1370,10 +1367,12 @@ function finishedTask(
 ) {
   if (boundary === null) {
     if (segment.parentFlushed) {
-      invariant(
-        request.completedRootSegment === null,
-        'There can only be one root segment. This is a bug in React.',
-      );
+      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--;
@@ -1557,8 +1556,7 @@ function flushSubtree(
       return r;
     }
     default: {
-      invariant(
-        false,
+      throw new Error(
         'Aborted, errored or already flushed boundaries should not be flushed again. This is a bug in React.',
       );
     }
@@ -1640,10 +1638,13 @@ function flushSegment(
     writeStartCompletedSuspenseBoundary(destination, request.responseState);
 
     const completedSegments = boundary.completedSegments;
-    invariant(
-      completedSegments.length === 1,
-      'A previously unvisited boundary must have exactly one root segment. This is a bug in React.',
-    );
+
+    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);
 
@@ -1741,10 +1742,13 @@ function flushPartiallyCompletedSegment(
     // 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);
-    invariant(
-      rootSegmentID !== -1,
-      'A root segment ID must have been assigned by now. This is a bug in React.',
-    );
+
+    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);
   } else {
     flushSegmentContainer(request, destination, segment);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 8247a904ec99..7bd7a95c2561 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -43,7 +43,6 @@ import {
 } from 'shared/ReactSymbols';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 
 type ReactJSONValue =
@@ -141,8 +140,7 @@ function attemptResolveElement(
     // 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.
-    invariant(
-      false,
+    throw new Error(
       'Refs cannot be used in server components, nor passed to client components.',
     );
   }
@@ -178,10 +176,8 @@ function attemptResolveElement(
       }
     }
   }
-  invariant(
-    false,
-    'Unsupported server component type: %s',
-    describeValueForErrorMessage(type),
+  throw new Error(
+    `Unsupported server component type: ${describeValueForErrorMessage(type)}`,
   );
 }
 
@@ -395,8 +391,7 @@ export function resolveModelToJSON(
     case REACT_ELEMENT_TYPE:
       return '$';
     case REACT_LAZY_TYPE:
-      invariant(
-        false,
+      throw new Error(
         'React Lazy Components are not yet supported on the server.',
       );
   }
@@ -537,23 +532,25 @@ export function resolveModelToJSON(
 
   if (typeof value === 'function') {
     if (/^on[A-Z]/.test(key)) {
-      invariant(
-        false,
+      throw new Error(
         'Event handlers cannot be passed to client component props. ' +
-          'Remove %s from these props if possible: %s\n' +
+          `Remove ${describeKeyForErrorMessage(
+            key,
+          )} from these props if possible: ${describeObjectForErrorMessage(
+            parent,
+          )}
+` +
           'If you need interactivity, consider converting part of this to a client component.',
-        describeKeyForErrorMessage(key),
-        describeObjectForErrorMessage(parent),
       );
     } else {
-      invariant(
-        false,
+      throw new Error(
         'Functions cannot be passed directly to client components ' +
           "because they're not serializable. " +
-          'Remove %s (%s) from this object, or avoid the entire object: %s',
-        describeKeyForErrorMessage(key),
-        value.displayName || value.name || 'function',
-        describeObjectForErrorMessage(parent),
+          `Remove ${describeKeyForErrorMessage(key)} (${value.displayName ||
+            value.name ||
+            'function'}) from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+            parent,
+          )}`,
       );
     }
   }
@@ -565,15 +562,19 @@ export function resolveModelToJSON(
       return serializeByValueID(existingId);
     }
     const name = value.description;
-    invariant(
-      Symbol.for(name) === value,
-      'Only global symbols received from Symbol.for(...) can be passed to client components. ' +
-        'The symbol Symbol.for(%s) cannot be found among global symbols. ' +
-        'Remove %s from this object, or avoid the entire object: %s',
-      value.description,
-      describeKeyForErrorMessage(key),
-      describeObjectForErrorMessage(parent),
-    );
+
+    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(${value.description}) cannot be found among global symbols. ` +
+          `Remove ${describeKeyForErrorMessage(
+            key,
+          )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+            parent,
+          )}`,
+      );
+    }
+
     request.pendingChunks++;
     const symbolId = request.nextChunkId++;
     emitSymbolChunk(request, symbolId, name);
@@ -583,23 +584,23 @@ export function resolveModelToJSON(
 
   // $FlowFixMe: bigint isn't added to Flow yet.
   if (typeof value === 'bigint') {
-    invariant(
-      false,
-      'BigInt (%s) is not yet supported in client component props. ' +
-        'Remove %s from this object or use a plain number instead: %s',
-      value,
-      describeKeyForErrorMessage(key),
-      describeObjectForErrorMessage(parent),
+    throw new Error(
+      `BigInt (${value}) is not yet supported in client component props. ` +
+        `Remove ${describeKeyForErrorMessage(
+          key,
+        )} from this object or use a plain number instead: ${describeObjectForErrorMessage(
+          parent,
+        )}`,
     );
   }
 
-  invariant(
-    false,
-    'Type %s is not supported in client component props. ' +
-      'Remove %s from this object, or avoid the entire object: %s',
-    typeof value,
-    describeKeyForErrorMessage(key),
-    describeObjectForErrorMessage(parent),
+  throw new Error(
+    `Type ${typeof value} is not supported in client component props. ` +
+      `Remove ${describeKeyForErrorMessage(
+        key,
+      )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
+        parent,
+      )}`,
   );
 }
 
@@ -799,14 +800,15 @@ export function startFlowing(request: Request, destination: Destination): void {
 }
 
 function unsupportedHook(): void {
-  invariant(false, 'This Hook is not supported in Server Components.');
+  throw new Error('This Hook is not supported in Server Components.');
 }
 
 function unsupportedRefresh(): void {
-  invariant(
-    currentCache,
-    'Refreshing the cache is not supported in Server Components.',
-  );
+  if (!currentCache) {
+    throw new Error(
+      'Refreshing the cache is not supported in Server Components.',
+    );
+  }
 }
 
 let currentCache: Map<Function, mixed> | null = null;
@@ -822,10 +824,10 @@ const Dispatcher: DispatcherType = {
   useDeferredValue: (unsupportedHook: any),
   useTransition: (unsupportedHook: any),
   getCacheForType<T>(resourceType: () => T): T {
-    invariant(
-      currentCache,
-      'Reading the cache is only supported while rendering.',
-    );
+    if (!currentCache) {
+      throw new Error('Reading the cache is only supported while rendering.');
+    }
+
     let entry: T | void = (currentCache.get(resourceType): any);
     if (entry === undefined) {
       entry = resourceType();
diff --git a/packages/react-server/src/ReactFlightServerConfig.js b/packages/react-server/src/ReactFlightServerConfig.js
index 49c975254052..2829adc56925 100644
--- a/packages/react-server/src/ReactFlightServerConfig.js
+++ b/packages/react-server/src/ReactFlightServerConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* 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
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactServerFormatConfig.js b/packages/react-server/src/ReactServerFormatConfig.js
index 49c975254052..2829adc56925 100644
--- a/packages/react-server/src/ReactServerFormatConfig.js
+++ b/packages/react-server/src/ReactServerFormatConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* 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
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-server/src/ReactServerStreamConfig.js b/packages/react-server/src/ReactServerStreamConfig.js
index 49c975254052..2829adc56925 100644
--- a/packages/react-server/src/ReactServerStreamConfig.js
+++ b/packages/react-server/src/ReactServerStreamConfig.js
@@ -7,9 +7,7 @@
  * @flow
  */
 
-/* eslint-disable react-internal/invariant-args */
-
-import invariant from 'shared/invariant';
+/* 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
@@ -19,4 +17,4 @@ import invariant from 'shared/invariant';
 // sure that if we *do* accidentally break the configuration,
 // the failure isn't silent.
 
-invariant(false, 'This module must be shimmed by a specific renderer.');
+throw new Error('This module must be shimmed by a specific renderer.');
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index b4b57c68b5f5..a3fe87372982 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -9,12 +9,11 @@
 
 import type {Dispatcher} from 'react-reconciler/src/ReactInternalTypes';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import invariant from 'shared/invariant';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function unsupported() {
-  invariant(false, 'This feature is not supported by ReactSuspenseTestUtils.');
+  throw new Error('This feature is not supported by ReactSuspenseTestUtils.');
 }
 
 export function waitForSuspense<T>(fn: () => T): Promise<T> {
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index b6d047e0e481..2e49968e85de 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -40,7 +40,6 @@ import {
   IncompleteClassComponent,
   ScopeComponent,
 } from 'react-reconciler/src/ReactWorkTags';
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import ReactVersion from 'shared/ReactVersion';
@@ -219,10 +218,8 @@ function toTree(node: ?Fiber) {
     case ScopeComponent:
       return childrenToTree(node.child);
     default:
-      invariant(
-        false,
-        'toTree() does not yet know how to handle nodes with tag=%s',
-        node.tag,
+      throw new Error(
+        `toTree() does not yet know how to handle nodes with tag=${node.tag}`,
       );
   }
 }
@@ -282,21 +279,25 @@ class ReactTestInstance {
   _currentFiber(): Fiber {
     // Throws if this component has been unmounted.
     const fiber = findCurrentFiberUsingSlowPath(this._fiber);
-    invariant(
-      fiber !== null,
-      "Can't read from currently-mounting component. This error is likely " +
-        'caused by a bug in React. Please file an issue.',
-    );
+
+    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) {
-    invariant(
-      validWrapperTypes.has(fiber.tag),
-      'Unexpected object passed to ReactTestInstance constructor (tag: %s). ' +
-        'This is probably a bug in React.',
-      fiber.tag,
-    );
+    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;
   }
 
@@ -471,7 +472,11 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isStrictMode,
     concurrentUpdatesByDefault,
   );
-  invariant(root != null, 'something went wrong');
+
+  if (root == null) {
+    throw new Error('something went wrong');
+  }
+
   updateContainer(element, root, null, null);
 
   const entry = {
diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js
index 586c99d2a375..25456f7f1ec1 100644
--- a/packages/react/src/ReactAct.js
+++ b/packages/react/src/ReactAct.js
@@ -9,7 +9,6 @@
 
 import type {Thenable} from 'shared/ReactTypes';
 import ReactCurrentActQueue from './ReactCurrentActQueue';
-import invariant from 'shared/invariant';
 import enqueueTask from 'shared/enqueueTask';
 
 let actScopeDepth = 0;
@@ -151,10 +150,7 @@ export function act<T>(callback: () => T | Thenable<T>): Thenable<T> {
       }
     }
   } else {
-    invariant(
-      false,
-      'act(...) is not supported in production builds of React.',
-    );
+    throw new Error('act(...) is not supported in production builds of React.');
   }
 }
 
diff --git a/packages/react/src/ReactBaseClasses.js b/packages/react/src/ReactBaseClasses.js
index 94dbd19eb811..e2a004bcc046 100644
--- a/packages/react/src/ReactBaseClasses.js
+++ b/packages/react/src/ReactBaseClasses.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
 
 const emptyObject = {};
@@ -55,13 +53,17 @@ Component.prototype.isReactComponent = {};
  * @protected
  */
 Component.prototype.setState = function(partialState, callback) {
-  invariant(
-    typeof partialState === 'object' ||
-      typeof partialState === 'function' ||
-      partialState == null,
-    'setState(...): takes an object of state variables to update or a ' +
-      'function which returns an object of state variables.',
-  );
+  if (
+    typeof partialState !== 'object' &&
+    typeof partialState !== 'function' &&
+    partialState != null
+  ) {
+    throw new Error(
+      'setState(...): 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');
 };
 
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index dab75998bb8e..d0562f53e3bc 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -9,7 +9,6 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
-import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
 import {
   getIteratorFn,
@@ -205,14 +204,17 @@ function mapIntoArray(
     } else if (type === 'object') {
       // eslint-disable-next-line react-internal/safe-string-coercion
       const childrenString = String((children: any));
-      invariant(
-        false,
-        'Objects are not valid as a React child (found: %s). ' +
+
+      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.',
-        childrenString === '[object Object]'
-          ? 'object with keys {' + Object.keys((children: any)).join(', ') + '}'
-          : childrenString,
       );
     }
   }
@@ -323,10 +325,12 @@ function toArray(children: ?ReactNodeList): Array<React$Node> {
  * structure.
  */
 function onlyChild<T>(children: T): T {
-  invariant(
-    isValidElement(children),
-    'React.Children.only expected to receive a single React element child.',
-  );
+  if (!isValidElement(children)) {
+    throw new Error(
+      'React.Children.only expected to receive a single React element child.',
+    );
+  }
+
   return children;
 }
 
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index 25179e2b2c4f..e87f31d1ae36 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -6,7 +6,6 @@
  */
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
-import invariant from 'shared/invariant';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
@@ -484,11 +483,11 @@ export function cloneAndReplaceKey(oldElement, newKey) {
  * See https://reactjs.org/docs/react-api.html#cloneelement
  */
 export function cloneElement(element, config, children) {
-  invariant(
-    !(element === null || element === undefined),
-    'React.cloneElement(...): The argument must be a React element, but you passed %s.',
-    element,
-  );
+  if (element === null || element === undefined) {
+    throw new Error(
+      `React.cloneElement(...): The argument must be a React element, but you passed ${element}.`,
+    );
+  }
 
   let propName;
 
diff --git a/packages/react/unstable-shared-subset.js b/packages/react/unstable-shared-subset.js
index e2ae4ad2f62d..a91fe77a1dc0 100644
--- a/packages/react/unstable-shared-subset.js
+++ b/packages/react/unstable-shared-subset.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+// eslint-disable-next-line react-internal/prod-error-codes
 throw new Error(
   'This entry point is not yet supported outside of experimental channels',
 );
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 21c258a6b528..5f7c8dc8e83a 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -7,6 +7,7 @@
  */
 
 /* eslint-disable no-var */
+/* eslint-disable react-internal/prod-error-codes */
 
 import {
   enableSchedulerDebugging,
diff --git a/packages/shared/ReactErrorUtils.js b/packages/shared/ReactErrorUtils.js
index 1742788778b4..ae344d302f44 100644
--- a/packages/shared/ReactErrorUtils.js
+++ b/packages/shared/ReactErrorUtils.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
 import invokeGuardedCallbackImpl from './invokeGuardedCallbackImpl';
 
 // Used by Fiber to simulate a try-catch.
@@ -117,8 +116,7 @@ export function clearCaughtError() {
     caughtError = null;
     return error;
   } else {
-    invariant(
-      false,
+    throw new Error(
       'clearCaughtError was called but no error was captured. This error ' +
         'is likely caused by a bug in React. Please file an issue.',
     );
diff --git a/packages/shared/checkPropTypes.js b/packages/shared/checkPropTypes.js
index 1558a407c388..5aee8fede833 100644
--- a/packages/shared/checkPropTypes.js
+++ b/packages/shared/checkPropTypes.js
@@ -52,6 +52,7 @@ export default function checkPropTypes(
           // 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') {
+            // eslint-disable-next-line react-internal/prod-error-codes
             const err = Error(
               (componentName || 'React class') +
                 ': ' +
diff --git a/packages/shared/forks/invokeGuardedCallbackImpl.www.js b/packages/shared/forks/invokeGuardedCallbackImpl.www.js
index 01005167e5fc..72c21bb8b788 100644
--- a/packages/shared/forks/invokeGuardedCallbackImpl.www.js
+++ b/packages/shared/forks/invokeGuardedCallbackImpl.www.js
@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import invariant from 'shared/invariant';
-
 // Provided by www
 const ReactFbErrorUtils = require('ReactFbErrorUtils');
-invariant(
-  typeof ReactFbErrorUtils.invokeGuardedCallback === 'function',
-  'Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.',
-);
+
+if (typeof ReactFbErrorUtils.invokeGuardedCallback !== 'function') {
+  throw new Error(
+    'Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.',
+  );
+}
 
 const invokeGuardedCallbackImpl = function<A, B, C, D, E, F, Context>(
   name: string | null,
diff --git a/packages/shared/invariant.js b/packages/shared/invariant.js
index 747961671f1e..68a1928c02d3 100644
--- a/packages/shared/invariant.js
+++ b/packages/shared/invariant.js
@@ -18,6 +18,7 @@
  */
 
 export default function invariant(condition, format, a, b, c, d, e, f) {
+  // eslint-disable-next-line react-internal/prod-error-codes
   throw new Error(
     'Internal React error: invariant() is meant to be replaced at compile ' +
       'time. There is no runtime version.',
diff --git a/packages/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js
index 215a8ae91c51..c33820080054 100644
--- a/packages/shared/invokeGuardedCallbackImpl.js
+++ b/packages/shared/invokeGuardedCallbackImpl.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import invariant from 'shared/invariant';
-
 function invokeGuardedCallbackProd<A, B, C, D, E, F, Context>(
   name: string | null,
   func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed,
@@ -83,16 +81,18 @@ if (__DEV__) {
       // when we call document.createEvent(). However this can cause confusing
       // errors: https://github.com/facebook/create-react-app/issues/3482
       // So we preemptively throw with a better message instead.
-      invariant(
-        typeof document !== 'undefined',
-        '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.',
-      );
+      if (typeof document === 'undefined') {
+        throw new Error(
+          '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.',
+        );
+      }
+
       const evt = document.createEvent('Event');
 
       let didCall = false;
@@ -201,6 +201,7 @@ if (__DEV__) {
       if (didCall && didError) {
         if (!didSetError) {
           // The callback errored, but the error event never fired.
+          // eslint-disable-next-line react-internal/prod-error-codes
           error = new Error(
             'An error was thrown inside one of your components, but React ' +
               "doesn't know what it was. This is likely due to browser " +
@@ -212,6 +213,7 @@ if (__DEV__) {
               'actually an issue with React, please file an issue.',
           );
         } else if (isCrossOriginError) {
+          // eslint-disable-next-line react-internal/prod-error-codes
           error = new Error(
             "A cross-origin error was thrown. React doesn't have access to " +
               'the actual error object in development. ' +
diff --git a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
index f93b31a659dd..bfb80ab37556 100644
--- a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -1,5 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`error transform handles escaped backticks in template string 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \`\\" + listener + \\"\` listener to be a function, instead got a value of \`\\" + type + \\"\` type.\\" : _formatProdErrorMessage(231, listener, type));"
+`;
+
 exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
 "import invariant from 'shared/invariant';
 
@@ -18,6 +23,21 @@ if (!condition) {
 }"
 `;
 
+exports[`error transform should not touch other calls or new expressions 1`] = `
+"new NotAnError();
+NotAnError();"
+`;
+
+exports[`error transform should replace error constructors (no new) 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+`;
+
+exports[`error transform should replace error constructors 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+`;
+
 exports[`error transform should replace simple invariant calls 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
@@ -29,6 +49,21 @@ if (!condition) {
 }"
 `;
 
+exports[`error transform should support error constructors with concatenated messages 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \\" + foo + \\" target to \\" + (\\"be an array; got \\" + bar) : _formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support interpolating arguments with concatenation 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? 'Expected ' + foo + ' target to be an array; got ' + bar : _formatProdErrorMessage(7, foo, bar));"
+`;
+
+exports[`error transform should support interpolating arguments with template strings 1`] = `
+"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
+Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));"
+`;
+
 exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
 import invariant from 'shared/invariant';
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
index 4da00ac656b9..2bca7366321e 100644
--- a/scripts/error-codes/__tests__/transform-error-messages.js
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -93,4 +93,61 @@ invariant(condition, 'Do not override existing functions.');
       )
     ).toMatchSnapshot();
   });
+
+  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 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();
+  });
 });
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 3206efa41349..3920d0aa51c3 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -287,12 +287,10 @@
   "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://reactjs.org/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://reactjs.org/link/refs-must-have-owner for more information.",
-  "291": "Log of yielded values is not empty. Call expect(Scheduler).toHaveYielded(...) first.",
   "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.",
-  "296": "Log of yielded values is not empty. Call expect(ReactTestRenderer).unstable_toHaveYielded(...) first.",
   "297": "The matcher `unstable_toHaveYielded` expects an instance of React Test Renderer.\n\nTry: expect(ReactTestRenderer).unstable_toHaveYielded(expectedYields)",
   "298": "Hooks can only be called inside the body of a function component.",
   "299": "createRoot(...): Target container is not a DOM element.",
@@ -353,7 +351,7 @@
   "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 %s specified.",
+  "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.",
@@ -397,5 +395,12 @@
   "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."
+  "409": "Cannot update an unmounted root.",
+  "410": "%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.",
+  "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."
 }
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
index 58823cbe1687..d60ffe308cdb 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -10,7 +10,7 @@ const parser = require('@babel/parser');
 const fs = require('fs');
 const path = require('path');
 const traverse = require('@babel/traverse').default;
-const evalToString = require('../shared/evalToString');
+const {evalStringConcat} = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 
 const babylonOptions = {
@@ -75,7 +75,7 @@ module.exports = function(opts) {
 
             // error messages can be concatenated (`+`) at runtime, so here's a
             // trivial partial evaluator that interprets the literal value
-            const errorMsgLiteral = evalToString(node.arguments[1]);
+            const errorMsgLiteral = evalStringConcat(node.arguments[1]);
             addToErrorMap(errorMsgLiteral);
           }
         },
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
index 6ebb68731f86..2baf4baa1c1a 100644
--- a/scripts/error-codes/transform-error-messages.js
+++ b/scripts/error-codes/transform-error-messages.js
@@ -7,20 +7,114 @@
 'use strict';
 
 const fs = require('fs');
-const evalToString = require('../shared/evalToString');
+const {
+  evalStringConcat,
+  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;
 
+  // TODO: Instead of outputting __DEV__ conditions, only apply this transform
+  // in production.
   const DEV_EXPRESSION = t.identifier('__DEV__');
 
+  function CallOrNewExpression(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(
+    //   __DEV__
+    //     ? `A ${adj} message that contains ${noun}`
+    //     : 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
+    );
+
+    let prodErrorId = errorMap[errorMsgLiteral];
+    if (prodErrorId === undefined) {
+      // There is no error code for this message. We use a lint rule to
+      // enforce that messages can be minified, so assume this is
+      // intentional and exit gracefully.
+      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(
+    //   __DEV__
+    //     ? `A ${adj} message that contains ${noun}`
+    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
+    // );
+    path.replaceWith(t.callExpression(t.identifier('Error'), [prodMessage]));
+    path.replaceWith(
+      t.callExpression(t.identifier('Error'), [
+        t.conditionalExpression(DEV_EXPRESSION, errorMsgNode, prodMessage),
+      ])
+    );
+  }
+
   return {
     visitor: {
+      NewExpression(path, file) {
+        const noMinify = file.opts.noMinify;
+        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
+          CallOrNewExpression(path, file);
+        }
+      },
+
       CallExpression(path, file) {
         const node = path.node;
         const noMinify = file.opts.noMinify;
+
+        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
+          CallOrNewExpression(path, file);
+          return;
+        }
+
         if (path.get('callee').isIdentifier({name: 'invariant'})) {
           // Turns this code:
           //
@@ -40,7 +134,7 @@ module.exports = function(babel) {
           // string) that references a verbose error message. The mapping is
           // stored in `scripts/error-codes/codes.json`.
           const condition = node.arguments[0];
-          const errorMsgLiteral = evalToString(node.arguments[1]);
+          const errorMsgLiteral = evalStringConcat(node.arguments[1]);
           const errorMsgExpressions = Array.from(node.arguments.slice(2));
           const errorMsgQuasis = errorMsgLiteral
             .split('%s')
@@ -81,12 +175,6 @@ module.exports = function(babel) {
             return;
           }
 
-          // Avoid caching because we write it as we go.
-          const existingErrorMap = JSON.parse(
-            fs.readFileSync(__dirname + '/codes.json', 'utf-8')
-          );
-          const errorMap = invertObject(existingErrorMap);
-
           let prodErrorId = errorMap[errorMsgLiteral];
 
           if (prodErrorId === undefined) {
@@ -117,7 +205,7 @@ module.exports = function(babel) {
           }
           prodErrorId = parseInt(prodErrorId, 10);
 
-          // Import ReactErrorProd
+          // Import formatProdErrorMessage
           const formatProdErrorMessageIdentifier = helperModuleImports.addDefault(
             path,
             'shared/formatProdErrorMessage',
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 000000000000..674d952e9582
--- /dev/null
+++ b/scripts/eslint-rules/__tests__/prod-error-codes-test.internal.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @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/index.js b/scripts/eslint-rules/index.js
index 0e86334d2633..7dfac457ec06 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -6,6 +6,7 @@ module.exports = {
     'no-to-warn-dev-within-to-throw': require('./no-to-warn-dev-within-to-throw'),
     'warning-args': require('./warning-args'),
     'invariant-args': require('./invariant-args'),
+    'prod-error-codes': require('./prod-error-codes'),
     'no-production-logging': require('./no-production-logging'),
     'no-cross-fork-imports': require('./no-cross-fork-imports'),
     'no-cross-fork-types': require('./no-cross-fork-types'),
diff --git a/scripts/eslint-rules/prod-error-codes.js b/scripts/eslint-rules/prod-error-codes.js
new file mode 100644
index 000000000000..2c9815fb9ab1
--- /dev/null
+++ b/scripts/eslint-rules/prod-error-codes.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const 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 (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/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index 9bdd6543d2a3..8e23dd880e92 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -12,7 +12,7 @@ const through = require('through2');
 const traverse = require('@babel/traverse').default;
 const gs = require('glob-stream');
 
-const evalToString = require('../shared/evalToString');
+const {evalStringConcat} = require('../shared/evalToString');
 
 const parserOptions = {
   sourceType: 'module',
@@ -64,7 +64,7 @@ function transform(file, enc, cb) {
             // warning messages can be concatenated (`+`) at runtime, so here's
             // a trivial partial evaluator that interprets the literal value
             try {
-              const warningMsgLiteral = evalToString(node.arguments[0]);
+              const warningMsgLiteral = evalStringConcat(node.arguments[0]);
               warnings.add(JSON.stringify(warningMsgLiteral));
             } catch (error) {
               console.error(
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 41b0685098fa..4f7d26cddbec 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -149,7 +149,8 @@ function getBabelConfig(
   bundleType,
   packageName,
   externals,
-  isDevelopment
+  isDevelopment,
+  bundle
 ) {
   const canAccessReactObject =
     packageName === 'react' || externals.indexOf('react') !== -1;
@@ -179,12 +180,6 @@ function getBabelConfig(
     case FB_WWW_DEV:
     case FB_WWW_PROD:
     case FB_WWW_PROFILING:
-      return Object.assign({}, options, {
-        plugins: options.plugins.concat([
-          // Minify invariant messages
-          require('../error-codes/transform-error-messages'),
-        ]),
-      });
     case RN_OSS_DEV:
     case RN_OSS_PROD:
     case RN_OSS_PROFILING:
@@ -195,8 +190,9 @@ function getBabelConfig(
         plugins: options.plugins.concat([
           [
             require('../error-codes/transform-error-messages'),
-            // Preserve full error messages in React Native build
-            {noMinify: true},
+            // Controls whether to replace error messages with error codes
+            // in production. By default, error messages are replaced.
+            {noMinify: bundle.minifyWithProdErrorCodes === false},
           ],
         ]),
       });
@@ -390,7 +386,8 @@ function getPlugins(
         bundleType,
         packageName,
         externals,
-        !isProduction
+        !isProduction,
+        bundle
       )
     ),
     // Remove 'use strict' from individual source files.
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index b9ae507b1a30..c24281d43ef0 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -79,6 +79,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react',
     global: 'React',
+    minifyWithProdErrorCodes: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -88,6 +89,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/unstable-shared-subset',
     global: 'React',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -105,6 +107,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-runtime',
     global: 'JSXRuntime',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -124,6 +127,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react/jsx-dev-runtime',
     global: 'JSXDEVRuntime',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -133,6 +137,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.browser',
     global: 'ReactFetch',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -142,6 +147,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.node',
     global: 'ReactFetch',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'http', 'https'],
   },
 
@@ -151,6 +157,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -160,6 +167,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.node.server',
     global: 'ReactFilesystem',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'fs/promises', 'path'],
   },
 
@@ -169,6 +177,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -178,6 +187,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.node.server',
     global: 'ReactPostgres',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'pg'],
   },
 
@@ -197,6 +207,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-dom',
     global: 'ReactDOM',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -207,6 +218,7 @@ const bundles = [
     entry: 'react-dom',
     global: 'ReactDOMForked',
     enableNewReconciler: true,
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -216,15 +228,18 @@ const bundles = [
     bundleTypes: [FB_WWW_DEV, NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     entry: 'react-dom/test-utils',
     global: 'ReactTestUtils',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'react-dom'],
   },
 
+  // TODO: We don't use this bundle anymore
   /******* React DOM - www - Testing *******/
   {
     moduleType: RENDERER,
     bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
     entry: 'react-dom/testing',
     global: 'ReactDOMTesting',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -237,6 +252,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser',
     name: 'react-dom-server-legacy.browser',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
     babel: opts =>
       Object.assign({}, opts, {
@@ -251,6 +267,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMLegacyServerNode',
     name: 'react-dom-server-legacy.node',
     externals: ['react', 'stream'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -266,6 +283,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMFizzServerBrowser',
     name: 'react-dom-server.browser',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
   {
@@ -274,6 +292,7 @@ const bundles = [
     entry: 'react-dom/src/server/ReactDOMFizzServerNode',
     name: 'react-dom-server.node',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
   {
@@ -281,6 +300,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/src/ReactDOMServerFB',
     global: 'ReactDOMServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -290,6 +310,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.browser.server',
     global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
   {
@@ -297,6 +318,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack/writer.node.server',
     global: 'ReactServerDOMWriter',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -306,6 +328,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack',
     global: 'ReactServerDOMReader',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -315,6 +338,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/plugin',
     global: 'ReactServerWebpackPlugin',
+    minifyWithProdErrorCodes: false,
     externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
@@ -324,6 +348,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-loader',
     global: 'ReactServerWebpackNodeLoader',
+    minifyWithProdErrorCodes: false,
     externals: ['acorn'],
   },
 
@@ -333,6 +358,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-server-dom-webpack/node-register',
     global: 'ReactFlightWebpackNodeRegister',
+    minifyWithProdErrorCodes: false,
     externals: ['url', 'module'],
   },
 
@@ -342,6 +368,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/server',
     global: 'ReactFlightDOMRelayServer', // TODO: Rename to Writer
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'ReactFlightDOMRelayServerIntegration',
@@ -355,6 +382,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-relay',
     global: 'ReactFlightDOMRelayClient', // TODO: Rename to Reader
+    minifyWithProdErrorCodes: true,
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
@@ -368,6 +396,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-native-relay/server',
     global: 'ReactFlightNativeRelayServer', // TODO: Rename to Writer
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'ReactFlightNativeRelayServerIntegration',
@@ -382,6 +411,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-native-relay',
     global: 'ReactFlightNativeRelayClient', // TODO: Rename to Reader
+    minifyWithProdErrorCodes: true,
     externals: [
       'react',
       'ReactFlightNativeRelayClientIntegration',
@@ -396,6 +426,7 @@ const bundles = [
     moduleType: RENDERER_UTILS,
     entry: 'react-suspense-test-utils',
     global: 'ReactSuspenseTestUtils',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -413,6 +444,7 @@ const bundles = [
     entry: 'react-art',
     global: 'ReactART',
     externals: ['react'],
+    minifyWithProdErrorCodes: true,
     babel: opts =>
       Object.assign({}, opts, {
         // Include JSX
@@ -435,6 +467,7 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -448,6 +481,7 @@ const bundles = [
     entry: 'react-native-renderer',
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -465,6 +499,7 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -478,6 +513,7 @@ const bundles = [
     entry: 'react-native-renderer/fabric',
     global: 'ReactFabric',
     externals: ['react-native'],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -507,6 +543,7 @@ const bundles = [
       'scheduler/unstable_mock',
       'ReactNativeInternalFeatureFlags',
     ],
+    minifyWithProdErrorCodes: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -521,6 +558,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer',
     global: 'ReactNoopRenderer',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
   },
 
@@ -530,6 +568,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/persistent',
     global: 'ReactNoopRendererPersistent',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -539,6 +578,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/server',
     global: 'ReactNoopRendererServer',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -548,6 +588,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/flight-server',
     global: 'ReactNoopFlightServer',
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'scheduler',
@@ -562,6 +603,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/flight-client',
     global: 'ReactNoopFlightClient',
+    minifyWithProdErrorCodes: false,
     externals: [
       'react',
       'scheduler',
@@ -576,6 +618,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-reconciler',
     global: 'ReactReconciler',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -585,6 +628,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-server',
     global: 'ReactServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -594,6 +638,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-server/flight',
     global: 'ReactFlightServer',
+    minifyWithProdErrorCodes: false,
     externals: ['react'],
   },
 
@@ -603,6 +648,7 @@ const bundles = [
     moduleType: RECONCILER,
     entry: 'react-client/flight',
     global: 'ReactFlightClient',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -612,6 +658,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     entry: 'react-reconciler/reflection',
     global: 'ReactFiberTreeReflection',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -621,6 +668,7 @@ const bundles = [
     bundleTypes: [NODE_DEV, NODE_PROD],
     entry: 'react-reconciler/constants',
     global: 'ReactReconcilerConstants',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -637,6 +685,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-is',
     global: 'ReactIs',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -646,6 +695,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-debug-tools',
     global: 'ReactDebugTools',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 
@@ -657,6 +707,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-cache',
     global: 'ReactCacheOld',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'scheduler'],
   },
 
@@ -667,6 +718,7 @@ const bundles = [
     entry: 'create-subscription',
     global: 'createSubscription',
     externals: ['react'],
+    minifyWithProdErrorCodes: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -681,6 +733,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-subscription',
     global: 'useSubscription',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -690,6 +743,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store',
     global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: true,
     externals: ['react'],
   },
 
@@ -699,6 +753,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store/extra',
     global: 'useSyncExternalStoreExtra',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'use-sync-external-store'],
   },
 
@@ -708,6 +763,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'use-sync-external-store/index.native',
     global: 'useSyncExternalStoreNative',
+    minifyWithProdErrorCodes: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -726,6 +782,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler',
     global: 'Scheduler',
+    minifyWithProdErrorCodes: true,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -744,6 +801,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler/unstable_mock',
     global: 'SchedulerMock',
+    minifyWithProdErrorCodes: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -759,6 +817,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'scheduler/unstable_post_task',
     global: 'SchedulerPostTask',
+    minifyWithProdErrorCodes: true,
     externals: [],
   },
 
@@ -768,6 +827,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'jest-react',
     global: 'JestReact',
+    minifyWithProdErrorCodes: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
   },
 
@@ -781,6 +841,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'eslint-plugin-react-hooks',
     global: 'ESLintPluginReactHooks',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 
@@ -790,6 +851,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-refresh/babel',
     global: 'ReactFreshBabelPlugin',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
   {
@@ -797,6 +859,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-refresh/runtime',
     global: 'ReactFreshRuntime',
+    minifyWithProdErrorCodes: false,
     externals: [],
   },
 ];
diff --git a/scripts/shared/__tests__/evalToString-test.js b/scripts/shared/__tests__/evalToString-test.js
index 3f6c3adbb372..bc0cb600d57e 100644
--- a/scripts/shared/__tests__/evalToString-test.js
+++ b/scripts/shared/__tests__/evalToString-test.js
@@ -6,12 +6,12 @@
  */
 'use strict';
 
-const evalToString = require('../evalToString');
+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 => evalToString(parse(source));
+const parseAndEval = source => evalStringConcat(parse(source));
 
 describe('evalToString', () => {
   it('should support StringLiteral', () => {
diff --git a/scripts/shared/evalToString.js b/scripts/shared/evalToString.js
index aad199da5d75..318925cc0969 100644
--- a/scripts/shared/evalToString.js
+++ b/scripts/shared/evalToString.js
@@ -8,7 +8,7 @@
  */
 'use strict';
 
-function evalToString(ast /* : Object */) /* : string */ {
+function evalStringConcat(ast /* : Object */) /* : string */ {
   switch (ast.type) {
     case 'StringLiteral':
     case 'Literal': // ESLint
@@ -17,10 +17,44 @@ function evalToString(ast /* : Object */) /* : string */ {
       if (ast.operator !== '+') {
         throw new Error('Unsupported binary operator ' + ast.operator);
       }
-      return evalToString(ast.left) + evalToString(ast.right);
+      return evalStringConcat(ast.left) + evalStringConcat(ast.right);
     default:
       throw new Error('Unsupported type ' + ast.type);
   }
 }
+exports.evalStringConcat = evalStringConcat;
 
-module.exports = evalToString;
+function evalStringAndTemplateConcat(
+  ast /* : Object */,
+  args /* : Array<mixed> */
+) /* : string */ {
+  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/yarn.lock b/yarn.lock
index 9deb96000d4e..0055fc9a6d2f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6442,7 +6442,6 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
-  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"

From 2825a08dc0981b7e745b2742a84195f75e4d6f72 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 30 Sep 2021 17:19:07 -0400
Subject: [PATCH 0932/1603] [DevTools] Log basic usage events (#22478)

---
 .../react-devtools-extensions/src/main.js     |  3 ++
 packages/react-devtools-shared/src/Logger.js  | 26 ++++++++++------
 .../src/devtools/views/DevTools.js            | 31 ++++++++++++++++---
 .../src/hookNamesCache.js                     |  2 +-
 4 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index f22649c06394..58a4dcfd0850 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -21,6 +21,7 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
@@ -449,6 +450,7 @@ function createPanelIfReactLoaded() {
               ensureInitialHTMLIsCleared(componentsPortalContainer);
               render('components');
               panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-components-tab'});
             }
           });
           extensionPanel.onHidden.addListener(panel => {
@@ -474,6 +476,7 @@ function createPanelIfReactLoaded() {
               ensureInitialHTMLIsCleared(profilerPortalContainer);
               render('profiler');
               panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-profiler-tab'});
             }
           });
         },
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index ac8577e2105c..bdf1823cd8eb 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -9,17 +9,23 @@
 
 import {enableLogger} from 'react-devtools-feature-flags';
 
-type LoadHookNamesEvent = {|
-  +event_name: 'loadHookNames',
-  +event_status: 'success' | 'error' | 'timeout' | 'unknown',
-  +duration_ms: number,
-  +inspected_element_display_name: string | null,
-  +inspected_element_number_of_hooks: number | null,
-|};
-
-// prettier-ignore
 export type LogEvent =
-  | LoadHookNamesEvent;
+  | {|
+      +event_name: 'loaded-dev-tools',
+    |}
+  | {|
+      +event_name: 'selected-components-tab',
+    |}
+  | {|
+      +event_name: 'selected-profiler-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,
+    |};
 
 export type LogFunction = LogEvent => void;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 6461441710ec..0fa4a440136a 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -13,7 +13,7 @@ import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
 import * as React from 'react';
-import {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
+import {useCallback, useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import Store from '../store';
 import {
   BridgeContext,
@@ -47,6 +47,7 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 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 {logEvent} from '../../Logger';
 
 export type BrowserTheme = 'dark' | 'light';
 export type TabID = 'components' | 'profiler';
@@ -152,6 +153,24 @@ export default function DevTools({
     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 {
+          logEvent({event_name: 'selected-profiler-tab'});
+        }
+      }
+      setTab(tabId);
+    },
+    [setTab, showTabBar],
+  );
+
   const options = useMemo(
     () => ({
       readOnly: readOnly || false,
@@ -204,12 +223,12 @@ export default function DevTools({
       if (event.ctrlKey || event.metaKey) {
         switch (event.key) {
           case '1':
-            setTab(tabs[0].id);
+            selectTab(tabs[0].id);
             event.preventDefault();
             event.stopPropagation();
             break;
           case '2':
-            setTab(tabs[1].id);
+            selectTab(tabs[1].id);
             event.preventDefault();
             event.stopPropagation();
             break;
@@ -232,6 +251,10 @@ export default function DevTools({
       }
     };
   }, [bridge]);
+
+  useEffect(() => {
+    logEvent({event_name: 'loaded-dev-tools'});
+  }, []);
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
@@ -265,7 +288,7 @@ export default function DevTools({
                                     <TabBar
                                       currentTab={tab}
                                       id="DevTools"
-                                      selectTab={setTab}
+                                      selectTab={selectTab}
                                       tabs={tabs}
                                       type="navigation"
                                     />
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index 8926f3feb9a5..eee340844fe0 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -116,7 +116,7 @@ export function loadHookNames(
     const handleLoadComplete = (durationMs: number): void => {
       // Log duration for parsing hook names
       logEvent({
-        event_name: 'loadHookNames',
+        event_name: 'load-hook-names',
         event_status: status,
         duration_ms: durationMs,
         inspected_element_display_name: element.displayName,

From bdd6d5064dd820705de4ce4b5a92f9d055550ced Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 1 Oct 2021 11:50:05 -0400
Subject: [PATCH 0933/1603] React DevTools 4.19.0 -> 4.19.1 (#22480)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 5 +++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 4c6d33dbd585..0c40a3cd990c 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index e20186cc22c5..627a5a62a754 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.19.0",
-  "version_name": "4.19.0",
+  "version": "4.19.1",
+  "version_name": "4.19.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index ad8d5eade5d3..f5bf6c606a29 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.19.0",
-  "version_name": "4.19.0",
+  "version": "4.19.1",
+  "version_name": "4.19.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 56b0ee91269c..662d749bbfad 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index a3905de97f0b..e7580779b9d9 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 4b10d75406d3..467ea10a8b61 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index e4ca09b65faf..8f3243607f62 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 4.19.1 (October 1, 2021)
+
+#### Bugfix
+* Fixed potential cache miss when insepcting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472))
+
 ## 4.19.0 (September 29, 2021)
 
 #### Features
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 6ff26538ca96..12bef99648f1 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.19.0",
+  "version": "4.19.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.19.0",
+    "react-devtools-core": "4.19.1",
     "update-notifier": "^2.1.0"
   }
 }

From 5f3b376c56c6c523e7018f5128a768cbd67a8a6f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 1 Oct 2021 15:03:36 -0400
Subject: [PATCH 0934/1603] Show different error boundary UI for timeouts than
 normal errors (#22483)

---
 .../react-devtools-shared/src/TimeoutError.js | 21 +++++++
 .../react-devtools-shared/src/backendAPI.js   |  7 ++-
 .../views/ErrorBoundary/ErrorBoundary.js      | 55 +++++++++++++------
 .../devtools/views/ErrorBoundary/ErrorView.js |  6 +-
 .../views/ErrorBoundary/TimeoutView.js        | 51 +++++++++++++++++
 .../devtools/views/ErrorBoundary/shared.css   | 29 ++++++++--
 .../src/inspectedElementCache.js              |  8 ++-
 7 files changed, 146 insertions(+), 31 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/TimeoutError.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js

diff --git a/packages/react-devtools-shared/src/TimeoutError.js b/packages/react-devtools-shared/src/TimeoutError.js
new file mode 100644
index 000000000000..351e88dfb8e0
--- /dev/null
+++ b/packages/react-devtools-shared/src/TimeoutError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 2aa5b30cd22e..23b975e38d6e 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -10,6 +10,7 @@
 import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
 import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 import Store from 'react-devtools-shared/src/devtools/store';
+import TimeoutError from 'react-devtools-shared/src/TimeoutError';
 
 import type {
   InspectedElement as InspectedElementBackend,
@@ -102,6 +103,7 @@ export function inspectElement({
     requestID,
     'inspectedElement',
     bridge,
+    `Timed out while inspecting element ${id}.`,
   );
 
   bridge.send('inspectElement', {
@@ -144,6 +146,7 @@ function getPromiseForRequestID<T>(
   requestID: number,
   eventType: $Keys<BackendEvents>,
   bridge: FrontendBridge,
+  timeoutMessage: string,
 ): Promise<T> {
   return new Promise((resolve, reject) => {
     const cleanup = () => {
@@ -161,9 +164,7 @@ function getPromiseForRequestID<T>(
 
     const onTimeout = () => {
       cleanup();
-      reject(
-        new Error(`Timed out waiting for event '${eventType}' from bridge`),
-      );
+      reject(new TimeoutError(timeoutMessage));
     };
 
     bridge.addListener(eventType, onInspectedElement);
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index ea4f54b1a9b8..3dbfb21abafc 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -13,6 +13,8 @@ import Store from 'react-devtools-shared/src/devtools/store';
 import ErrorView from './ErrorView';
 import SearchingGitHubIssues from './SearchingGitHubIssues';
 import SuspendingErrorView from './SuspendingErrorView';
+import TimeoutView from './TimeoutView';
+import TimeoutError from 'react-devtools-shared/src/TimeoutError';
 
 type Props = {|
   children: React$Node,
@@ -27,6 +29,7 @@ type State = {|
   componentStack: string | null,
   errorMessage: string | null,
   hasError: boolean,
+  isTimeout: boolean,
 |};
 
 const InitialState: State = {
@@ -35,6 +38,7 @@ const InitialState: State = {
   componentStack: null,
   errorMessage: null,
   hasError: false,
+  isTimeout: false,
 };
 
 export default class ErrorBoundary extends Component<Props, State> {
@@ -48,6 +52,8 @@ export default class ErrorBoundary extends Component<Props, State> {
         ? error.message
         : String(error);
 
+    const isTimeout = error instanceof TimeoutError;
+
     const callStack =
       typeof error === 'object' &&
       error !== null &&
@@ -62,6 +68,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       callStack,
       errorMessage,
       hasError: true,
+      isTimeout,
     };
   }
 
@@ -93,26 +100,40 @@ export default class ErrorBoundary extends Component<Props, State> {
       componentStack,
       errorMessage,
       hasError,
+      isTimeout,
     } = this.state;
 
     if (hasError) {
-      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>
-      );
+      if (isTimeout) {
+        return (
+          <TimeoutView
+            callStack={callStack}
+            componentStack={componentStack}
+            dismissError={
+              canDismissProp || canDismissState ? this._dismissError : null
+            }
+            errorMessage={errorMessage}
+          />
+        );
+      } 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;
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
index baff24e522e1..7443707496aa 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -32,7 +32,7 @@ export default function ErrorView({
       {children}
       <div className={styles.ErrorInfo}>
         <div className={styles.HeaderRow}>
-          <div className={styles.Header}>
+          <div className={styles.ErrorHeader}>
             Uncaught Error: {errorMessage || ''}
           </div>
           {dismissError !== null && (
@@ -43,12 +43,12 @@ export default function ErrorView({
           )}
         </div>
         {!!callStack && (
-          <div className={styles.Stack}>
+          <div className={styles.ErrorStack}>
             The error was thrown {callStack.trim()}
           </div>
         )}
         {!!componentStack && (
-          <div className={styles.Stack}>
+          <div className={styles.ErrorStack}>
             The error occurred {componentStack.trim()}
           </div>
         )}
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 000000000000..45c64312be13
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 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) {
+  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/shared.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
index bef5c945c226..ce8ad5f79ce2 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
@@ -30,6 +30,7 @@
   background-color: var(--color-background);
   display: flex;
   flex-direction: column;
+  border: 1px solid var(--color-border);
 }
 
 .ErrorInfo {
@@ -42,10 +43,10 @@
   flex-direction: row;
   font-size: var(--font-size-sans-large);
   font-weight: bold;
-  color: var(--color-error-text);
 }
 
-.Header {
+.ErrorHeader,
+.TimeoutHeader {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -53,17 +54,35 @@
   min-width: 0;
 }
 
-.Stack {
+.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);
-  border-radius: 0.25rem;
-  padding: 0.5rem;
+}
+
+.TimeoutStack {
+  background-color: var(--color-console-warning-background);
+  color: var(--color-console-warning-text);
+  border: var(--color-console-warning-border)
 }
 
 .LoadingIcon {
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index e0e43e4022b2..6442a84b0be6 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -38,7 +38,7 @@ type ResolvedRecord<T> = {|
 
 type RejectedRecord = {|
   status: 2,
-  value: string,
+  value: Error | string,
 |};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
@@ -113,7 +113,9 @@ export function inspectElement(
     if (rendererID == null) {
       const rejectedRecord = ((newRecord: any): RejectedRecord);
       rejectedRecord.status = Rejected;
-      rejectedRecord.value = `Could not inspect element with id "${element.id}". No renderer found.`;
+      rejectedRecord.value = new Error(
+        `Could not inspect element with id "${element.id}". No renderer found.`,
+      );
 
       map.set(element, record);
 
@@ -139,7 +141,7 @@ export function inspectElement(
 
         const rejectedRecord = ((newRecord: any): RejectedRecord);
         rejectedRecord.status = Rejected;
-        rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
+        rejectedRecord.value = error;
 
         wake();
       },

From a4bc8ae4c1db471bb34d908dd890a09d4c774303 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Sat, 2 Oct 2021 19:56:15 +0530
Subject: [PATCH 0935/1603] Reopen #22481 Fixed modal closing issue (#22484)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
---
 packages/react-devtools-shared/src/devtools/views/hooks.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 247a865060cd..76dad5677454 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -239,7 +239,7 @@ export function useModalDismissSignal(
       ownerDocument = ((modalRef.current: any): HTMLDivElement).ownerDocument;
       ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
       if (dismissOnClickOutside) {
-        ownerDocument.addEventListener('click', handleDocumentClick);
+        ownerDocument.addEventListener('click', handleDocumentClick, true);
       }
     }, 0);
 
@@ -250,7 +250,7 @@ export function useModalDismissSignal(
 
       if (ownerDocument !== null) {
         ownerDocument.removeEventListener('keydown', handleDocumentKeyDown);
-        ownerDocument.removeEventListener('click', handleDocumentClick);
+        ownerDocument.removeEventListener('click', handleDocumentClick, true);
       }
     };
   }, [modalRef, dismissCallback, dismissOnClickOutside]);

From 0ecbbe142201ef65830f0b7a19d52c1f77043e86 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Mon, 4 Oct 2021 09:54:33 -0400
Subject: [PATCH 0936/1603] Sync hydrate discrete events in capture phase and
 dont replay discrete events (#22448)

---
 ...DOMServerPartialHydration-test.internal.js |  93 ++++++-
 ...MServerSelectiveHydration-test.internal.js | 260 ++++++++++++++----
 .../src/events/ReactDOMEventListener.js       |  42 ++-
 .../src/events/ReactDOMEventReplaying.js      |  87 +++---
 .../DOMPluginEventSystem-test.internal.js     |  11 +-
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 15 files changed, 402 insertions(+), 102 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 9f954f4581d3..b1a88868b338 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1905,10 +1905,19 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    expect(clicks).toBe(1);
-
-    expect(container.textContent).toBe('Hello');
 
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+      expect(container.textContent).toBe('Click meHello');
+    } else {
+      expect(clicks).toBe(1);
+      expect(container.textContent).toBe('Hello');
+    }
     document.body.removeChild(container);
   });
 
@@ -1991,7 +2000,16 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(onEvent).toHaveBeenCalledTimes(2);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(onEvent).toHaveBeenCalledTimes(0);
+    } else {
+      expect(onEvent).toHaveBeenCalledTimes(2);
+    }
 
     document.body.removeChild(container);
   });
@@ -2072,7 +2090,17 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    expect(clicks).toBe(2);
+
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+    } else {
+      expect(clicks).toBe(2);
+    }
 
     document.body.removeChild(container);
   });
@@ -2158,7 +2186,16 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    expect(onEvent).toHaveBeenCalledTimes(2);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(onEvent).toHaveBeenCalledTimes(0);
+    } else {
+      expect(onEvent).toHaveBeenCalledTimes(2);
+    }
 
     document.body.removeChild(container);
   });
@@ -2231,9 +2268,19 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(clicksOnChild).toBe(1);
-    // This will be zero due to the stopPropagation.
-    expect(clicksOnParent).toBe(0);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicksOnChild).toBe(0);
+      expect(clicksOnParent).toBe(0);
+    } else {
+      expect(clicksOnChild).toBe(1);
+      // This will be zero due to the stopPropagation.
+      expect(clicksOnParent).toBe(0);
+    }
 
     document.body.removeChild(container);
   });
@@ -2310,8 +2357,16 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     // We're now full hydrated.
-
-    expect(clicks).toBe(1);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+    } else {
+      expect(clicks).toBe(1);
+    }
 
     document.body.removeChild(parentContainer);
   });
@@ -2580,8 +2635,20 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(submits).toBe(1);
-    expect(container.textContent).toBe('Hello');
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // discrete event not replayed
+      expect(submits).toBe(0);
+      expect(container.textContent).toBe('Click meHello');
+    } else {
+      expect(submits).toBe(1);
+      expect(container.textContent).toBe('Hello');
+    }
+
     document.body.removeChild(container);
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 76d9b43d07f6..bb04b46df1c4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -14,6 +14,7 @@ import {createEventTarget} from 'dom-event-testing-library';
 let React;
 let ReactDOM;
 let ReactDOMServer;
+let ReactFeatureFlags;
 let Scheduler;
 let Suspense;
 let act;
@@ -112,7 +113,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
 
-    const ReactFeatureFlags = require('shared/ReactFeatureFlags');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableCreateEventHandleAPI = true;
     React = require('react');
     ReactDOM = require('react-dom');
@@ -266,9 +267,19 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    // After the click, we should prioritize D and the Click first,
-    // and only after that render A and C.
-    expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(Scheduler).toHaveYielded(['D', 'A']);
+    } else {
+      // After the click, we should prioritize D and the Click first,
+      // and only after that render A and C.
+      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    }
 
     document.body.removeChild(container);
   });
@@ -343,7 +354,16 @@ describe('ReactDOMServerSelectiveHydration', () => {
     dispatchClickEvent(spanC);
     dispatchClickEvent(spanD);
 
-    expect(Scheduler).toHaveYielded(['App']);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    } else {
+      expect(Scheduler).toHaveYielded(['App']);
+    }
 
     await act(async () => {
       suspend = false;
@@ -351,18 +371,29 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    // We should prioritize hydrating A, C and D first since we clicked in
-    // them. Only after they're done will we hydrate B.
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'Clicked A',
-      'C',
-      'Clicked C',
-      'D',
-      'Clicked D',
-      // B should render last since it wasn't clicked.
-      'B',
-    ]);
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    } else {
+      // We should prioritize hydrating A, C and D first since we clicked in
+      // them. Only after they're done will we hydrate B.
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'Clicked A',
+        'C',
+        'Clicked C',
+        'D',
+        'Clicked D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -519,7 +550,17 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // no replay
+      expect(Scheduler).toHaveYielded(['D', 'A']);
+    } else {
+      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    }
 
     document.body.removeChild(container);
   });
@@ -599,26 +640,42 @@ describe('ReactDOMServerSelectiveHydration', () => {
     createEventTarget(spanC).virtualclick();
     createEventTarget(spanD).virtualclick();
 
-    expect(Scheduler).toHaveYielded(['App']);
-
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    } else {
+      expect(Scheduler).toHaveYielded(['App']);
+    }
     await act(async () => {
       suspend = false;
       resolve();
       await promise;
     });
 
-    // We should prioritize hydrating A, C and D first since we clicked in
-    // them. Only after they're done will we hydrate B.
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'Clicked A',
-      'C',
-      'Clicked C',
-      'D',
-      'Clicked D',
-      // B should render last since it wasn't clicked.
-      'B',
-    ]);
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    } else {
+      // We should prioritize hydrating A, C and D first since we clicked in
+      // them. Only after they're done will we hydrate B.
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'Clicked A',
+        'C',
+        'Clicked C',
+        'D',
+        'Clicked D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -707,20 +764,37 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    // We should prioritize hydrating D first because we clicked it.
-    // Next we should hydrate C since that's the current hover target.
-    // To simplify implementation details we hydrate both B and C at
-    // the same time since B was already scheduled.
-    // This is ok because it will at least not continue for nested
-    // boundary. See the next test below.
-    expect(Scheduler).toHaveYielded([
-      'D',
-      'Clicked D',
-      'B', // Ideally this should be later.
-      'C',
-      'Hover C',
-      'A',
-    ]);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // We should prioritize hydrating D first because we clicked it.
+      // but event isnt replayed
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    } else {
+      // We should prioritize hydrating D first because we clicked it.
+      // Next we should hydrate C since that's the current hover target.
+      // To simplify implementation details we hydrate both B and C at
+      // the same time since B was already scheduled.
+      // This is ok because it will at least not continue for nested
+      // boundary. See the next test below.
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'Clicked D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -796,16 +870,18 @@ describe('ReactDOMServerSelectiveHydration', () => {
     dispatchMouseHoverEvent(spanB, spanD);
     dispatchMouseHoverEvent(spanC, spanB);
 
-    suspend = false;
-    resolve();
-    await promise;
+    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.
-    expect(Scheduler).toFlushAndYield(['App', 'C', 'Hover C', 'A', 'B', 'D']);
+    expect(Scheduler).toHaveYielded(['App', 'C', 'Hover C', 'A', 'B', 'D']);
 
     document.body.removeChild(container);
   });
@@ -970,4 +1046,88 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     document.body.removeChild(container);
   });
+
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+  it('fires capture event handlers and native events if content is hydratable during discrete event', async () => {
+    spyOnDev(console, 'error');
+    function Child({text}) {
+      Scheduler.unstable_yieldValue(text);
+      const ref = React.useRef();
+      React.useLayoutEffect(() => {
+        if (!ref.current) {
+          return;
+        }
+        ref.current.onclick = () => {
+          Scheduler.unstable_yieldValue('Native Click ' + text);
+        };
+      }, [text]);
+      return (
+        <span
+          ref={ref}
+          onClickCapture={() => {
+            Scheduler.unstable_yieldValue('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}>
+          {text}
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Child text="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child text="B" />
+          </Suspense>
+        </div>
+      );
+    }
+
+    let finalHTML;
+    expect(() => {
+      finalHTML = ReactDOMServer.renderToString(<App />);
+    }).toErrorDev([
+      'useLayoutEffect does nothing on the server',
+      'useLayoutEffect does nothing on the server',
+    ]);
+
+    expect(Scheduler).toHaveYielded(['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];
+
+    ReactDOM.hydrateRoot(container, <App />);
+
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    // 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.
+    expect(Scheduler).toHaveYielded([
+      'App',
+      'B',
+      'Capture Clicked B',
+      'Native Click B',
+      'Clicked B',
+    ]);
+
+    // After continuing the scheduler, we finally hydrate A.
+    expect(Scheduler).toFlushAndYield(['A']);
+
+    document.body.removeChild(container);
+  });
 });
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index dfe3c2e3c00c..6467421d4f63 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,13 +11,18 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
-
+import {
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+  enableSelectiveHydration,
+} from 'shared/ReactFeatureFlags';
 import {
   isReplayableDiscreteEvent,
   queueDiscreteEvent,
   hasQueuedDiscreteEvents,
   clearIfContinuousEvent,
   queueIfContinuousEvent,
+  attemptSynchronousHydration,
+  isCapturePhaseSynchronouslyHydratableEvent,
 } from './ReactDOMEventReplaying';
 import {
   getNearestMountedFiber,
@@ -28,7 +33,10 @@ import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {type EventSystemFlags, IS_CAPTURE_PHASE} from './EventSystemFlags';
 
 import getEventTarget from './getEventTarget';
-import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
+import {
+  getInstanceFromNode,
+  getClosestInstanceFromNode,
+} from '../client/ReactDOMComponentTree';
 
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 
@@ -176,7 +184,7 @@ export function dispatchEvent(
     return;
   }
 
-  const blockedOn = attemptToDispatchEvent(
+  let blockedOn = attemptToDispatchEvent(
     domEventName,
     eventSystemFlags,
     targetContainer,
@@ -192,7 +200,10 @@ export function dispatchEvent(
   }
 
   if (allowReplay) {
-    if (isReplayableDiscreteEvent(domEventName)) {
+    if (
+      !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
+      isReplayableDiscreteEvent(domEventName)
+    ) {
       // This this to be replayed later once the target is available.
       queueDiscreteEvent(
         blockedOn,
@@ -219,6 +230,29 @@ export function dispatchEvent(
     clearIfContinuousEvent(domEventName, nativeEvent);
   }
 
+  if (
+    enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
+    enableSelectiveHydration &&
+    isCapturePhaseSynchronouslyHydratableEvent(domEventName)
+  ) {
+    while (blockedOn !== null) {
+      const fiber = getInstanceFromNode(blockedOn);
+      if (fiber !== null) {
+        attemptSynchronousHydration(fiber);
+      }
+      const nextBlockedOn = attemptToDispatchEvent(
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        nativeEvent,
+      );
+      if (nextBlockedOn === blockedOn) {
+        break;
+      }
+      blockedOn = nextBlockedOn;
+    }
+  }
+
   // This is not replayable so we'll invoke it but without a target,
   // in case the event system needs to trace it.
   dispatchEventForPluginEventSystem(
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index eab9b4650c10..c363721bcd84 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -14,7 +14,10 @@ import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
-import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
+import {
+  enableSelectiveHydration,
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+} from 'shared/ReactFeatureFlags';
 import {
   unstable_scheduleCallback as scheduleCallback,
   unstable_NormalPriority as NormalPriority,
@@ -32,10 +35,14 @@ import {
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
-let attemptSynchronousHydration: (fiber: Object) => void;
+let _attemptSynchronousHydration: (fiber: Object) => void;
 
 export function setAttemptSynchronousHydration(fn: (fiber: Object) => void) {
-  attemptSynchronousHydration = fn;
+  _attemptSynchronousHydration = fn;
+}
+
+export function attemptSynchronousHydration(fiber: Object) {
+  _attemptSynchronousHydration(fiber);
 }
 
 let attemptDiscreteHydration: (fiber: Object) => void;
@@ -180,6 +187,9 @@ export function queueDiscreteEvent(
   targetContainer: EventTarget,
   nativeEvent: AnyNativeEvent,
 ): void {
+  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    return;
+  }
   const queuedEvent = createQueuedReplayableEvent(
     blockedOn,
     domEventName,
@@ -290,6 +300,13 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
   return existingQueuedEvent;
 }
 
+export function isCapturePhaseSynchronouslyHydratableEvent(
+  eventName: DOMEventName,
+) {
+  // TODO: maybe include more events
+  return isReplayableDiscreteEvent(eventName);
+}
+
 export function queueIfContinuousEvent(
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,
@@ -483,39 +500,41 @@ function attemptReplayContinuousQueuedEventInMap(
 
 function replayUnblockedEvents() {
   hasScheduledReplayAttempt = false;
-  // First replay discrete events.
-  while (queuedDiscreteEvents.length > 0) {
-    const nextDiscreteEvent = queuedDiscreteEvents[0];
-    if (nextDiscreteEvent.blockedOn !== null) {
-      // We're still blocked.
-      // Increase the priority of this boundary to unblock
-      // the next discrete event.
-      const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
-      if (fiber !== null) {
-        attemptDiscreteHydration(fiber);
-      }
-      break;
-    }
-    const targetContainers = nextDiscreteEvent.targetContainers;
-    while (targetContainers.length > 0) {
-      const targetContainer = targetContainers[0];
-      const nextBlockedOn = attemptToDispatchEvent(
-        nextDiscreteEvent.domEventName,
-        nextDiscreteEvent.eventSystemFlags,
-        targetContainer,
-        nextDiscreteEvent.nativeEvent,
-      );
-      if (nextBlockedOn !== null) {
-        // We're still blocked. Try again later.
-        nextDiscreteEvent.blockedOn = nextBlockedOn;
+  if (!enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    // First replay discrete events.
+    while (queuedDiscreteEvents.length > 0) {
+      const nextDiscreteEvent = queuedDiscreteEvents[0];
+      if (nextDiscreteEvent.blockedOn !== null) {
+        // We're still blocked.
+        // Increase the priority of this boundary to unblock
+        // the next discrete event.
+        const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+        if (fiber !== null) {
+          attemptDiscreteHydration(fiber);
+        }
         break;
       }
-      // This target container was successfully dispatched. Try the next.
-      targetContainers.shift();
-    }
-    if (nextDiscreteEvent.blockedOn === null) {
-      // We've successfully replayed the first event. Let's try the next one.
-      queuedDiscreteEvents.shift();
+      const targetContainers = nextDiscreteEvent.targetContainers;
+      while (targetContainers.length > 0) {
+        const targetContainer = targetContainers[0];
+        const nextBlockedOn = attemptToDispatchEvent(
+          nextDiscreteEvent.domEventName,
+          nextDiscreteEvent.eventSystemFlags,
+          targetContainer,
+          nextDiscreteEvent.nativeEvent,
+        );
+        if (nextBlockedOn !== null) {
+          // We're still blocked. Try again later.
+          nextDiscreteEvent.blockedOn = nextBlockedOn;
+          break;
+        }
+        // This target container was successfully dispatched. Try the next.
+        targetContainers.shift();
+      }
+      if (nextDiscreteEvent.blockedOn === null) {
+        // We've successfully replayed the first event. Let's try the next one.
+        queuedDiscreteEvents.shift();
+      }
     }
   }
   // Next replay any continuous events.
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 4f2df6fffc49..1b2bfbb0bef4 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -649,7 +649,16 @@ describe('DOMPluginEventSystem', () => {
 
           // We're now full hydrated.
 
-          expect(clicks).toBe(1);
+          if (
+            gate(
+              flags =>
+                flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+            )
+          ) {
+            expect(clicks).toBe(0);
+          } else {
+            expect(clicks).toBe(1);
+          }
 
           document.body.removeChild(parentContainer);
         });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 608db694be51..f5d34e2ff653 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -103,6 +103,8 @@ export const warnOnSubscriptionInsideStartTransition = false;
 
 export const enableSuspenseAvoidThisFallback = false;
 
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+
 export const enableComponentStackLocations = true;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 9c3d45528c5a..5a1c1ed8d9c6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,6 +50,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index bf96cc00e687..3c11070d6ecb 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 0d2b226adf2f..4b0457c21958 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f760425ce03c..2c54c1fb77c2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,6 +51,7 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index cb0efcc34bdc..be60bcfbddb7 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d1cfdbb74956..76af047ab6d4 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 62a10f475aca..6fc6cf3c6836 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 6400ef042250..ef980529f3f2 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -27,6 +27,7 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const warnOnSubscriptionInsideStartTransition = __VARIANT__;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c5dde53578c9..0f1ce6eb1f9f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,6 +32,7 @@ export const {
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
   warnOnSubscriptionInsideStartTransition,
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From f2c381131fb58c107e6153255bc8d1d6340db506 Mon Sep 17 00:00:00 2001
From: Daishi Kato <dai-shi@users.noreply.github.com>
Date: Mon, 4 Oct 2021 23:39:51 +0900
Subject: [PATCH 0937/1603] fix: useSyncExternalStoreExtra (#22500)

* move setting memoizedSnapshot

* Revert "move setting memoizedSnapshot"

This reverts commit f01320689cebfcbc4f3a53208f879ed4a8d6613d.

* add failed tests

* Revert "Revert "move setting memoizedSnapshot""

This reverts commit cb43c4fdc6b0dcab3480f27d6fbbb3137dbc47bb.
---
 .../useSyncExternalStoreShared-test.js        | 89 +++++++++++++++++++
 .../src/useSyncExternalStoreExtra.js          |  2 +-
 2 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 6536f65b7f2a..ab8143f24034 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -818,4 +818,93 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       'Sibling: 1',
     ]);
   });
+
+  describe('selector and isEqual error handling in extra', () => {
+    let ErrorBoundary;
+    beforeAll(() => {
+      spyOnDev(console, 'warn');
+      ErrorBoundary = class 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;
+        }
+      };
+    });
+
+    it('selector can throw on update', async () => {
+      const store = createExternalStore({a: 'a'});
+      const selector = state => state.a.toUpperCase();
+
+      function App() {
+        const a = useSyncExternalStoreExtra(
+          store.subscribe,
+          store.getState,
+          null,
+          selector,
+        );
+        return <Text text={a} />;
+      }
+
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() =>
+        root.render(
+          <ErrorBoundary>
+            <App />
+          </ErrorBoundary>,
+        ),
+      );
+
+      expect(container.textContent).toEqual('A');
+
+      await act(() => {
+        store.set({});
+      });
+      expect(container.textContent).toEqual(
+        "Cannot read property 'toUpperCase' of undefined",
+      );
+    });
+
+    it('isEqual can throw on update', async () => {
+      const store = createExternalStore({a: 'A'});
+      const selector = state => state.a;
+      const isEqual = (left, right) => left.a.trim() === right.a.trim();
+
+      function App() {
+        const a = useSyncExternalStoreExtra(
+          store.subscribe,
+          store.getState,
+          null,
+          selector,
+          isEqual,
+        );
+        return <Text text={a} />;
+      }
+
+      const container = document.createElement('div');
+      const root = createRoot(container);
+      await act(() =>
+        root.render(
+          <ErrorBoundary>
+            <App />
+          </ErrorBoundary>,
+        ),
+      );
+
+      expect(container.textContent).toEqual('A');
+
+      await act(() => {
+        store.set({});
+      });
+      expect(container.textContent).toEqual(
+        "Cannot read property 'trim' of undefined",
+      );
+    });
+  });
 });
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
index f4a1885aec5b..aa4957b53475 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
@@ -76,7 +76,6 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
       }
 
       // The snapshot has changed, so we need to compute a new selection.
-      memoizedSnapshot = nextSnapshot;
       const nextSelection = selector(nextSnapshot);
 
       // If a custom isEqual function is provided, use that to check if the data
@@ -87,6 +86,7 @@ export function useSyncExternalStoreExtra<Snapshot, Selection>(
         return prevSelection;
       }
 
+      memoizedSnapshot = nextSnapshot;
       memoizedSelection = nextSelection;
       return nextSelection;
     };

From cadf94df1f77a75f3cc67f284fa951c6024e51d2 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 5 Oct 2021 11:58:54 -0400
Subject: [PATCH 0938/1603] Add new Jest --compact-console flag for DevTools
 tests (#22495)

---
 .../src/__tests__/setupTests.js               | 20 +++++++++++++++++++
 scripts/jest/jest-cli.js                      | 19 ++++++++++++++++++
 2 files changed, 39 insertions(+)

diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index c2db1ae546f6..4224bde3b97d 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -7,11 +7,31 @@
  * @flow
  */
 
+import {CustomConsole} from '@jest/console';
+
 import type {
   BackendBridge,
   FrontendBridge,
 } from 'react-devtools-shared/src/bridge';
 
+// 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 env = jasmine.getEnv();
 env.beforeEach(() => {
   global.mockClipboardCopy = jest.fn();
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 68ed9688bb31..4d523c642954 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -97,6 +97,13 @@ const argv = yargs
       requiresArg: true,
       type: 'string',
     },
+    compactConsole: {
+      alias: 'c',
+      describe: 'Compact console output (hide file locations).',
+      requiresArg: false,
+      type: 'boolean',
+      default: false,
+    },
   }).argv;
 
 function logError(message) {
@@ -159,6 +166,11 @@ function validateOptions() {
       logError('DevTool tests require --build.');
       success = false;
     }
+  } else {
+    if (argv.compactConsole) {
+      logError('Only DevTool tests support compactConsole flag.');
+      success = false;
+    }
   }
 
   if (isWWWConfig()) {
@@ -284,6 +296,10 @@ function getEnvars() {
     RELEASE_CHANNEL: argv.releaseChannel.match(/modern|experimental/)
       ? 'experimental'
       : 'stable',
+
+    // Pass this flag through to the confit environment
+    // so the base config can conditionally load the console setup file.
+    compactConsole: argv.compactConsole,
   };
 
   if (argv.prod) {
@@ -306,7 +322,9 @@ function main() {
     console.log(chalk.red(`\nPlease run: \`${argv.deprecated}\` instead.\n`));
     return;
   }
+
   validateOptions();
+
   const args = getCommandArgs();
   const envars = getEnvars();
   const env = Object.entries(envars).map(([k, v]) => `${k}=${v}`);
@@ -334,6 +352,7 @@ function main() {
     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.

From 6485ef747249295c7bfb8e599b9dde76df143cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 5 Oct 2021 22:59:46 -0400
Subject: [PATCH 0939/1603] Remove duplicate error code (#22513)

---
 scripts/error-codes/codes.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 3920d0aa51c3..d1688e84bc7a 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -396,7 +396,6 @@
   "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.",
-  "410": "%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.",
   "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.",

From 579c008a752fae70f670047d0ab687552fd8d160 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Wed, 6 Oct 2021 00:31:06 -0400
Subject: [PATCH 0940/1603] [Fizz/Flight] pipeToNodeWritable(...,
 writable).startWriting() -> renderToPipeableStream(...).pipe(writable)
 (#22450)

* Rename pipeToNodeWritable to renderToNodePipe

* Add startWriting API to Flight

We don't really need it in this case because there's way less reason to
delay the stream in Flight.

* Pass the destination to startWriting instead of renderToNode

* Rename startWriting to pipe

This mirrors the ReadableStream API in Node

* Error codes

* Rename to renderToPipeableStream

This mimics the renderToReadableStream API for the browser.
---
 fixtures/flight/server/handler.server.js      |   8 +-
 fixtures/ssr/server/render.js                 |  30 ++--
 fixtures/ssr2/server/render.js                |   7 +-
 packages/react-dom/npm/server.node.js         |   2 +-
 packages/react-dom/server.node.js             |   4 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  | 151 +++++++-----------
 .../__tests__/ReactDOMFizzServerNode-test.js  |  60 ++++---
 .../src/server/ReactDOMFizzServerNode.js      |  14 +-
 .../src/ReactFlightDOMServerNode.js           |  27 +++-
 .../src/__tests__/ReactFlightDOM-test.js      |  41 +++--
 scripts/error-codes/codes.json                |   3 +-
 11 files changed, 169 insertions(+), 178 deletions(-)

diff --git a/fixtures/flight/server/handler.server.js b/fixtures/flight/server/handler.server.js
index cd4af7319f01..b6745c033279 100644
--- a/fixtures/flight/server/handler.server.js
+++ b/fixtures/flight/server/handler.server.js
@@ -1,6 +1,6 @@
 'use strict';
 
-const {pipeToNodeWritable} = require('react-server-dom-webpack/writer');
+const {renderToPipeableStream} = require('react-server-dom-webpack/writer');
 const {readFile} = require('fs');
 const {resolve} = require('path');
 const React = require('react');
@@ -20,7 +20,11 @@ module.exports = function(req, res) {
         const App = m.default.default || m.default;
         res.setHeader('Access-Control-Allow-Origin', '*');
         const moduleMap = JSON.parse(data);
-        pipeToNodeWritable(React.createElement(App), res, moduleMap);
+        const {pipe} = renderToPipeableStream(
+          React.createElement(App),
+          moduleMap
+        );
+        pipe(res);
       }
     );
   });
diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index ababbc4ccd72..e0fc50f3f953 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {pipeToNodeWritable} from 'react-dom/server';
+import {renderToPipeableStream} from 'react-dom/server';
 
 import App from '../src/components/App';
 
@@ -20,22 +20,18 @@ export default function render(url, res) {
     console.error('Fatal', error);
   });
   let didError = false;
-  const {startWriting, abort} = pipeToNodeWritable(
-    <App assets={assets} />,
-    res,
-    {
-      onCompleteShell() {
-        // If something errored before we started streaming, we set the error code appropriately.
-        res.statusCode = didError ? 500 : 200;
-        res.setHeader('Content-type', 'text/html');
-        startWriting();
-      },
-      onError(x) {
-        didError = true;
-        console.error(x);
-      },
-    }
-  );
+  const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    onCompleteShell() {
+      // 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);
+    },
+    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/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index b5d919e82ca6..5ebbed0313c6 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -8,7 +8,7 @@
 
 import * as React from 'react';
 // import {renderToString} from 'react-dom/server';
-import {pipeToNodeWritable} 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';
@@ -37,17 +37,16 @@ module.exports = function render(url, res) {
   });
   let didError = false;
   const data = createServerData();
-  const {startWriting, abort} = pipeToNodeWritable(
+  const {pipe, abort} = renderToPipeableStream(
     <DataProvider data={data}>
       <App assets={assets} />
     </DataProvider>,
-    res,
     {
       onCompleteShell() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
         res.setHeader('Content-type', 'text/html');
-        startWriting();
+        pipe(res);
       },
       onError(x) {
         didError = true;
diff --git a/packages/react-dom/npm/server.node.js b/packages/react-dom/npm/server.node.js
index e7d3251c4d3d..2eb97e80354c 100644
--- a/packages/react-dom/npm/server.node.js
+++ b/packages/react-dom/npm/server.node.js
@@ -14,4 +14,4 @@ exports.renderToString = l.renderToString;
 exports.renderToStaticMarkup = l.renderToStaticMarkup;
 exports.renderToNodeStream = l.renderToNodeStream;
 exports.renderToStaticNodeStream = l.renderToStaticNodeStream;
-exports.pipeToNodeWritable = s.pipeToNodeWritable;
+exports.renderToPipeableStream = s.renderToPipeableStream;
diff --git a/packages/react-dom/server.node.js b/packages/react-dom/server.node.js
index 7fb8cfaeb5a8..1fcab6c8c9ad 100644
--- a/packages/react-dom/server.node.js
+++ b/packages/react-dom/server.node.js
@@ -36,8 +36,8 @@ export function renderToStaticNodeStream() {
   );
 }
 
-export function pipeToNodeWritable() {
-  return require('./src/server/ReactDOMFizzServerNode').pipeToNodeWritable.apply(
+export function renderToPipeableStream() {
+  return require('./src/server/ReactDOMFizzServerNode').renderToPipeableStream.apply(
     this,
     arguments,
   );
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d786062043de..cd0c87a1df3b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -239,7 +239,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <div>
             <Suspense fallback={<Text text="Loading..." />}>
@@ -252,9 +252,8 @@ describe('ReactDOMFizzServer', () => {
             </Suspense>
           </div>
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
       <div>
@@ -304,16 +303,16 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
 
@@ -356,15 +355,14 @@ describe('ReactDOMFizzServer', () => {
     });
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <Suspense fallback={<Text text="Loading..." />}>
             {lazyElement}
           </Suspense>
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
     await act(async () => {
@@ -396,16 +394,16 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
 
@@ -441,15 +439,14 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should asynchronously load the suspense boundary', async () => {
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <Suspense fallback={<Text text="Loading..." />}>
             <AsyncText text="Hello World" />
           </Suspense>
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
     await act(async () => {
@@ -475,11 +472,8 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-        <App />,
-        writable,
-      );
-      startWriting();
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -550,16 +544,16 @@ describe('ReactDOMFizzServer', () => {
 
     // We originally suspend the boundary and start streaming the loading state.
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -633,11 +627,10 @@ describe('ReactDOMFizzServer', () => {
 
     // We originally suspend the boundary and start streaming the loading state.
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App showMore={false} />,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
 
     const root = ReactDOM.createRoot(container, {hydrate: true});
@@ -701,8 +694,8 @@ describe('ReactDOMFizzServer', () => {
 
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.pipeToNodeWritable(<App />, writable);
-      controls.startWriting();
+      controls = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      controls.pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -753,7 +746,7 @@ describe('ReactDOMFizzServer', () => {
     };
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         // We use two nested boundaries to flush out coverage of an old reentrancy bug.
         <Suspense fallback="Loading...">
           <Suspense fallback={<Text text="Loading A..." />}>
@@ -765,12 +758,11 @@ describe('ReactDOMFizzServer', () => {
             </>
           </Suspense>
         </Suspense>,
-        writableA,
         {
           identifierPrefix: 'A_',
           onCompleteShell() {
             writableA.write('<div id="container-A">');
-            startWriting();
+            pipe(writableA);
             writableA.write('</div>');
           },
         },
@@ -778,19 +770,18 @@ describe('ReactDOMFizzServer', () => {
     });
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback={<Text text="Loading B..." />}>
           <Text text="This will show B: " />
           <div>
             <AsyncText text="B" />
           </div>
         </Suspense>,
-        writableB,
         {
           identifierPrefix: 'B_',
           onCompleteShell() {
             writableB.write('<div id="container-B">');
-            startWriting();
+            pipe(writableB);
             writableB.write('</div>');
           },
         },
@@ -876,11 +867,8 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-        <App />,
-        writable,
-      );
-      startWriting();
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
     });
 
     expect(getVisibleChildren(container)).toEqual(
@@ -967,11 +955,8 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-        <App />,
-        writable,
-      );
-      startWriting();
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
     });
 
     expect(getVisibleChildren(container)).toEqual(
@@ -1024,14 +1009,14 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App />,
-        writable,
+
         {
           namespaceURI: 'http://www.w3.org/2000/svg',
           onCompleteShell() {
             writable.write('<svg>');
-            startWriting();
+            pipe(writable);
             writable.write('</svg>');
           },
         },
@@ -1111,11 +1096,8 @@ describe('ReactDOMFizzServer', () => {
 
     try {
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <A />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<A />);
+        pipe(writable);
       });
 
       expect(getVisibleChildren(container)).toEqual(
@@ -1213,7 +1195,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <TestProvider ctx="A">
           <div>
             <Suspense fallback={[<Text text="Loading: " />, <TestConsumer />]}>
@@ -1224,9 +1206,8 @@ describe('ReactDOMFizzServer', () => {
             </Suspense>
           </div>
         </TestProvider>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
       <div>
@@ -1272,7 +1253,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <PrintA />
           <div>
@@ -1287,9 +1268,8 @@ describe('ReactDOMFizzServer', () => {
           </div>
           <PrintA />
         </div>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual(
       <div>
@@ -1335,7 +1315,7 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <div>
           <PrintA />
           <div>
@@ -1355,14 +1335,14 @@ describe('ReactDOMFizzServer', () => {
           </div>
           <PrintA />
         </div>,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(loggedErrors.length).toBe(1);
     expect(loggedErrors[0].message).toEqual('A0.1.1');
@@ -1396,16 +1376,16 @@ describe('ReactDOMFizzServer', () => {
     const loggedErrors = [];
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.pipeToNodeWritable(
+      controls = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      controls.startWriting();
+      controls.pipe(writable);
     });
 
     // We're still showing a fallback.
@@ -1456,7 +1436,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should be able to abort the fallback if the main content finishes first', async () => {
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback={<Text text="Loading Outer" />}>
           <div>
             <Suspense
@@ -1470,9 +1450,8 @@ describe('ReactDOMFizzServer', () => {
             </Suspense>
           </div>
         </Suspense>,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
     expect(getVisibleChildren(container)).toEqual('Loading Outer');
     // We should have received a partial segment containing the a partial of the fallback.
@@ -1554,11 +1533,10 @@ describe('ReactDOMFizzServer', () => {
     await jest.runAllTimers();
 
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-        writable,
       );
-      startWriting();
+      pipe(writable);
     });
 
     // Nothing is output since root has a suspense with avoidedThisFallback that hasn't resolved
@@ -1669,18 +1647,18 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(Scheduler).toHaveYielded(['server']);
 
@@ -1752,18 +1730,18 @@ describe('ReactDOMFizzServer', () => {
 
     const loggedErrors = [];
     await act(async () => {
-      const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-        writable,
+
         {
           onError(x) {
             loggedErrors.push(x);
           },
         },
       );
-      startWriting();
+      pipe(writable);
     });
     expect(Scheduler).toHaveYielded(['server']);
 
@@ -1838,11 +1816,8 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <App />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
 
@@ -1922,11 +1897,8 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <App />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
 
@@ -1997,11 +1969,8 @@ describe('ReactDOMFizzServer', () => {
       }
 
       await act(async () => {
-        const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
-          <App />,
-          writable,
-        );
-        startWriting();
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
       });
       expect(Scheduler).toHaveYielded(['Yay!']);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 949ddcb04fa2..7fa1c208dffc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -57,13 +57,12 @@ describe('ReactDOMFizzServer', () => {
   }
 
   // @gate experimental
-  it('should call pipeToNodeWritable', () => {
+  it('should call renderToPipeableStream', () => {
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>hello world</div>,
-      writable,
     );
-    startWriting();
+    pipe(writable);
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
@@ -71,13 +70,12 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should emit DOCTYPE at the root of the document', () => {
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <html>
         <body>hello world</body>
       </html>,
-      writable,
     );
-    startWriting();
+    pipe(writable);
     jest.runAllTimers();
     expect(output.result).toMatchInlineSnapshot(
       `"<!DOCTYPE html><html><body>hello world</body></html>"`,
@@ -85,18 +83,17 @@ describe('ReactDOMFizzServer', () => {
   });
 
   // @gate experimental
-  it('should start writing after startWriting', () => {
+  it('should start writing after pipe', () => {
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>hello world</div>,
-      writable,
     );
     jest.runAllTimers();
     // First we write our header.
     output.result +=
       '<!doctype html><html><head><title>test</title><head><body>';
     // Then React starts writing.
-    startWriting();
+    pipe(writable);
     expect(output.result).toMatchInlineSnapshot(
       `"<!doctype html><html><head><title>test</title><head><body><div>hello world</div>"`,
     );
@@ -115,13 +112,13 @@ describe('ReactDOMFizzServer', () => {
     }
     let isCompleteCalls = 0;
     const {writable, output} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback="Loading">
           <Wait />
         </Suspense>
       </div>,
-      writable,
+
       {
         onCompleteAll() {
           isCompleteCalls++;
@@ -144,7 +141,7 @@ describe('ReactDOMFizzServer', () => {
     output.result +=
       '<!doctype html><html><head><title>test</title><head><body>';
     // Then React starts writing.
-    startWriting();
+    pipe(writable);
     expect(output.result).toMatchInlineSnapshot(
       `"<!doctype html><html><head><title>test</title><head><body><div><!--$-->Done<!-- --><!--/$--></div>"`,
     );
@@ -154,11 +151,11 @@ describe('ReactDOMFizzServer', () => {
   it('should error the stream when an error is thrown at the root', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Throw />
       </div>,
-      writable,
+
       {
         onError(x) {
           reportedErrors.push(x);
@@ -167,7 +164,7 @@ describe('ReactDOMFizzServer', () => {
     );
 
     // The stream is errored once we start writing.
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -181,20 +178,20 @@ describe('ReactDOMFizzServer', () => {
   it('should error the stream when an error is thrown inside a fallback', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback={<Throw />}>
           <InfiniteSuspend />
         </Suspense>
       </div>,
-      writable,
+
       {
         onError(x) {
           reportedErrors.push(x);
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -207,20 +204,20 @@ describe('ReactDOMFizzServer', () => {
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
     const reportedErrors = [];
     const {writable, output, completed} = getTestWritable();
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Throw />
         </Suspense>
       </div>,
-      writable,
+
       {
         onError(x) {
           reportedErrors.push(x);
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -242,13 +239,12 @@ describe('ReactDOMFizzServer', () => {
     function Content() {
       return 'Hi';
     }
-    const {startWriting} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <Suspense fallback={<Fallback />}>
         <Content />
       </Suspense>,
-      writable,
     );
-    startWriting();
+    pipe(writable);
 
     await completed;
 
@@ -261,20 +257,20 @@ describe('ReactDOMFizzServer', () => {
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     let isCompleteCalls = 0;
     const {writable, output, completed} = getTestWritable();
-    const {startWriting, abort} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <InfiniteSuspend />
         </Suspense>
       </div>,
-      writable,
+
       {
         onCompleteAll() {
           isCompleteCalls++;
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     jest.runAllTimers();
 
@@ -294,7 +290,7 @@ describe('ReactDOMFizzServer', () => {
   it('should be able to complete by abort when the fallback is also suspended', async () => {
     let isCompleteCalls = 0;
     const {writable, output, completed} = getTestWritable();
-    const {startWriting, abort} = ReactDOMFizzServer.pipeToNodeWritable(
+    const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
         <Suspense fallback="Loading">
           <Suspense fallback={<InfiniteSuspend />}>
@@ -302,14 +298,14 @@ describe('ReactDOMFizzServer', () => {
           </Suspense>
         </Suspense>
       </div>,
-      writable,
+
       {
         onCompleteAll() {
           isCompleteCalls++;
         },
       },
     );
-    startWriting();
+    pipe(writable);
 
     jest.runAllTimers();
 
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index fb1939f0c404..4233a88e1fb9 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -41,7 +41,7 @@ type Controls = {|
   // Cancel any pending I/O and put anything remaining into
   // client rendered mode.
   abort(): void,
-  startWriting(): void,
+  pipe<T: Writable>(destination: T): T,
 |};
 
 function createRequestImpl(children: ReactNodeList, options: void | Options) {
@@ -56,22 +56,24 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
   );
 }
 
-function pipeToNodeWritable(
+function renderToPipeableStream(
   children: ReactNodeList,
-  destination: Writable,
   options?: Options,
 ): Controls {
   const request = createRequestImpl(children, options);
   let hasStartedFlowing = false;
   startWork(request);
   return {
-    startWriting() {
+    pipe<T: Writable>(destination: T): T {
       if (hasStartedFlowing) {
-        return;
+        throw new Error(
+          'React currently only supports piping to one writable stream.',
+        );
       }
       hasStartedFlowing = true;
       startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
+      return destination;
     },
     abort() {
       abort(request);
@@ -79,4 +81,4 @@ function pipeToNodeWritable(
   };
 }
 
-export {pipeToNodeWritable, ReactVersion as version};
+export {renderToPipeableStream, ReactVersion as version};
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 35773279890c..5f992d4b03e9 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -25,20 +25,35 @@ type Options = {
   onError?: (error: mixed) => void,
 };
 
-function pipeToNodeWritable(
+type Controls = {|
+  pipe<T: Writable>(destination: T): T,
+|};
+
+function renderToPipeableStream(
   model: ReactModel,
-  destination: Writable,
   webpackMap: BundlerConfig,
   options?: Options,
-): void {
+): Controls {
   const request = createRequest(
     model,
     webpackMap,
     options ? options.onError : undefined,
   );
+  let hasStartedFlowing = false;
   startWork(request);
-  startFlowing(request, destination);
-  destination.on('drain', createDrainHandler(destination, 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));
+      return destination;
+    },
+  };
 }
 
-export {pipeToNodeWritable};
+export {renderToPipeableStream};
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 60fbac215f73..bcae6c50f7c7 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -57,8 +57,8 @@ describe('ReactFlightDOM', () => {
       },
     });
     return {
-      writable,
       readable,
+      writable,
     };
   }
 
@@ -113,7 +113,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(<App />, writable, webpackMap);
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      <App />,
+      webpackMap,
+    );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
     await waitForSuspense(() => {
       const model = response.readRoot();
@@ -162,11 +166,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <RootModel />,
-      writable,
       webpackMap,
     );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -200,11 +204,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <RootModel />,
-      writable,
       webpackMap,
     );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -236,11 +240,11 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <RootModel />,
-      writable,
       webpackMap,
     );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -371,11 +375,16 @@ describe('ReactFlightDOM', () => {
     }
 
     const {writable, readable} = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(model, writable, webpackMap, {
-      onError(x) {
-        reportedErrors.push(x);
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
+      model,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
       },
-    });
+    );
+    pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
@@ -481,11 +490,11 @@ describe('ReactFlightDOM', () => {
     const root = ReactDOM.createRoot(container);
 
     const stream1 = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
       <App color="red" />,
-      stream1.writable,
       webpackMap,
     );
+    pipe(stream1.writable);
     const response1 = ReactServerDOMReader.createFromReadableStream(
       stream1.readable,
     );
@@ -509,11 +518,11 @@ describe('ReactFlightDOM', () => {
     inputB.value = 'goodbye';
 
     const stream2 = getTestStream();
-    ReactServerDOMWriter.pipeToNodeWritable(
+    const {pipe: pipe2} = ReactServerDOMWriter.renderToPipeableStream(
       <App color="blue" />,
-      stream2.writable,
       webpackMap,
     );
+    pipe2(stream2.writable);
     const response2 = ReactServerDOMReader.createFromReadableStream(
       stream2.readable,
     );
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index d1688e84bc7a..aab5d62476cc 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -401,5 +401,6 @@
   "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."
+  "416": "This environment don't support binary chunks.",
+  "417": "React currently only supports piping to one writable stream."
 }

From 6ecad79ccf2c683cb21ac40dee5678358c7b6208 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Wed, 6 Oct 2021 08:31:21 -0400
Subject: [PATCH 0941/1603] Test that discrete events that aren't hydratable do
 not propagate (#22502)

* test that discrete events that arent hydratable do not propagate

* lint

* feedback

* feedback

* lint

* better test

* nits

* lint
---
 ...MServerSelectiveHydration-test.internal.js | 63 +++++++++++++++++++
 .../src/events/ReactDOMEventListener.js       | 20 +++---
 .../src/events/ReactDOMEventReplaying.js      | 11 +---
 3 files changed, 76 insertions(+), 18 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index bb04b46df1c4..5c29513cf6bf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -1130,4 +1130,67 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     document.body.removeChild(container);
   });
+
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+  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.unstable_yieldValue('Child');
+      return (
+        <span
+          onClickCapture={e => {
+            e.stopPropagation();
+            triggeredChild = true;
+          }}>
+          Click me
+        </span>
+      );
+    }
+    function App() {
+      const onClick = () => {
+        triggeredParent = true;
+      };
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div
+          ref={n => {
+            if (n) n.onclick = onClick;
+          }}
+          onClick={onClick}>
+          <Suspense fallback={null}>
+            <Child />
+          </Suspense>
+        </div>
+      );
+    }
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    expect(Scheduler).toHaveYielded(['App', 'Child']);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+
+    suspend = true;
+
+    ReactDOM.hydrateRoot(container, <App />);
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+
+    const span = container.getElementsByTagName('span')[0];
+    dispatchClickEvent(span);
+
+    expect(Scheduler).toHaveYielded(['App']);
+
+    dispatchClickEvent(span);
+
+    expect(triggeredParent).toBe(false);
+    expect(triggeredChild).toBe(false);
+  });
 });
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 6467421d4f63..86924e7c2673 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,18 +11,14 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
+import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags';
 import {
-  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-  enableSelectiveHydration,
-} from 'shared/ReactFeatureFlags';
-import {
-  isReplayableDiscreteEvent,
+  isDiscreteEventThatRequiresHydration,
   queueDiscreteEvent,
   hasQueuedDiscreteEvents,
   clearIfContinuousEvent,
   queueIfContinuousEvent,
   attemptSynchronousHydration,
-  isCapturePhaseSynchronouslyHydratableEvent,
 } from './ReactDOMEventReplaying';
 import {
   getNearestMountedFiber,
@@ -169,7 +165,7 @@ export function dispatchEvent(
   if (
     allowReplay &&
     hasQueuedDiscreteEvents() &&
-    isReplayableDiscreteEvent(domEventName)
+    isDiscreteEventThatRequiresHydration(domEventName)
   ) {
     // If we already have a queue of discrete events, and this is another discrete
     // event, then we can't dispatch it regardless of its target, since they
@@ -202,7 +198,7 @@ export function dispatchEvent(
   if (allowReplay) {
     if (
       !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
-      isReplayableDiscreteEvent(domEventName)
+      isDiscreteEventThatRequiresHydration(domEventName)
     ) {
       // This this to be replayed later once the target is available.
       queueDiscreteEvent(
@@ -232,8 +228,8 @@ export function dispatchEvent(
 
   if (
     enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
-    enableSelectiveHydration &&
-    isCapturePhaseSynchronouslyHydratableEvent(domEventName)
+    eventSystemFlags & IS_CAPTURE_PHASE &&
+    isDiscreteEventThatRequiresHydration(domEventName)
   ) {
     while (blockedOn !== null) {
       const fiber = getInstanceFromNode(blockedOn);
@@ -251,6 +247,10 @@ export function dispatchEvent(
       }
       blockedOn = nextBlockedOn;
     }
+    if (blockedOn) {
+      nativeEvent.stopPropagation();
+      return;
+    }
   }
 
   // This is not replayable so we'll invoke it but without a target,
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index c363721bcd84..ed31f20e5118 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -160,7 +160,9 @@ const discreteReplayableEvents: Array<DOMEventName> = [
   'submit',
 ];
 
-export function isReplayableDiscreteEvent(eventType: DOMEventName): boolean {
+export function isDiscreteEventThatRequiresHydration(
+  eventType: DOMEventName,
+): boolean {
   return discreteReplayableEvents.indexOf(eventType) > -1;
 }
 
@@ -300,13 +302,6 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
   return existingQueuedEvent;
 }
 
-export function isCapturePhaseSynchronouslyHydratableEvent(
-  eventName: DOMEventName,
-) {
-  // TODO: maybe include more events
-  return isReplayableDiscreteEvent(eventName);
-}
-
 export function queueIfContinuousEvent(
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,

From 784a725fe139b88c37f8b16d1d2225e88caf2612 Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Fri, 8 Oct 2021 04:22:08 +0530
Subject: [PATCH 0942/1603] Added Devtools Extension link for Microsoft Edge
 (#22515)

---
 packages/react-devtools-extensions/README.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-devtools-extensions/README.md b/packages/react-devtools-extensions/README.md
index 8117ffaad03f..b5c7daf34f7b 100644
--- a/packages/react-devtools-extensions/README.md
+++ b/packages/react-devtools-extensions/README.md
@@ -5,6 +5,7 @@ This is the source code for the React DevTools browser extension.
 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.
@@ -36,4 +37,7 @@ 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
 ```

From 5fa4d79b00988f354073bc27313363dd5cce9cd3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 8 Oct 2021 08:38:11 -0400
Subject: [PATCH 0943/1603] [DevTools] Register logger for standalone DevTools
 (#22524)

---
 .../react-devtools-core/src/standalone.js     | 12 ++++-
 .../react-devtools-core/webpack.standalone.js |  3 ++
 .../react-devtools-extensions/src/main.js     |  4 +-
 .../config/DevToolsFeatureFlags.core-fb.js    |  2 +-
 .../src/registerDevToolsEventLogger.js}       | 51 ++++++++++---------
 5 files changed, 42 insertions(+), 30 deletions(-)
 rename packages/{react-devtools-extensions/src/registerExtensionsEventLogger.js => react-devtools-shared/src/registerDevToolsEventLogger.js} (63%)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index bb6bd3d0c4cf..c37bb945338c 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -23,6 +23,7 @@ import {
   getShowInlineWarningsAndErrors,
   getHideConsoleLogsInStrictMode,
 } 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';
@@ -255,16 +256,23 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
-type ServerOptions = {
+type ServerOptions = {|
   key?: string,
   cert?: string,
-};
+|};
+
+type LoggerOptions = {|
+  surface?: ?string,
+|};
 
 function startServer(
   port?: number = 8097,
   host?: string = 'localhost',
   httpsOptions?: ServerOptions,
+  loggerOptions?: LoggerOptions,
 ) {
+  registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
+
   const useHttps = !!httpsOptions;
   const httpServer = useHttps
     ? require('https').createServer(httpsOptions)
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 17135f067743..fe7c1220f15d 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -30,6 +30,8 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
+const LOGGING_URL = process.env.LOGGING_URL || null;
+
 const featureFlagTarget =
   process.env.FEATURE_FLAG_TARGET || 'core/standalone-oss';
 
@@ -82,6 +84,7 @@ module.exports = {
       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-core"`,
       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
+      'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
       'process.env.NODE_ENV': `"${NODE_ENV}"`,
       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
       'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 58a4dcfd0850..6a3836839a4e 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -6,6 +6,7 @@ import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {getBrowserName, getBrowserTheme} from './utils';
 import {LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY} from 'react-devtools-shared/src/constants';
+import {registerDevToolsEventLogger} from 'react-devtools-shared/src/registerDevToolsEventLogger';
 import {
   getAppendComponentStack,
   getBreakOnConsoleErrors,
@@ -20,7 +21,6 @@ import {
 } from 'react-devtools-shared/src/storage';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
-import {registerExtensionsEventLogger} from './registerExtensionsEventLogger';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -89,7 +89,7 @@ function createPanelIfReactLoaded() {
 
       const tabId = chrome.devtools.inspectedWindow.tabId;
 
-      registerExtensionsEventLogger();
+      registerDevToolsEventLogger('extension');
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index f0278aa0804a..50eb47967baf 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -16,7 +16,7 @@
 export const enableProfilerChangedHookIndices = true;
 export const isInternalFacebookBuild = true;
 export const enableNamedHooksFeature = true;
-export const enableLogger = false;
+export const enableLogger = true;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
diff --git a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
similarity index 63%
rename from packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
rename to packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 90917ef3a1d2..d475bc3e7de3 100644
--- a/packages/react-devtools-extensions/src/registerExtensionsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -14,38 +14,39 @@ import {enableLogger} from 'react-devtools-feature-flags';
 
 let loggingIFrame = null;
 let missedEvents = [];
-function logEvent(event: LogEvent) {
-  if (enableLogger) {
-    if (loggingIFrame != null) {
-      loggingIFrame.contentWindow.postMessage(
-        {
-          source: 'react-devtools-logging',
-          event: event,
-          context: {
-            surface: 'extension',
+
+export function registerDevToolsEventLogger(surface: string) {
+  function logEvent(event: LogEvent) {
+    if (enableLogger) {
+      if (loggingIFrame != null) {
+        loggingIFrame.contentWindow.postMessage(
+          {
+            source: 'react-devtools-logging',
+            event: event,
+            context: {
+              surface,
+            },
           },
-        },
-        '*',
-      );
-    } else {
-      missedEvents.push(event);
+          '*',
+        );
+      } else {
+        missedEvents.push(event);
+      }
     }
   }
-}
 
-function handleLoggingIFrameLoaded(iframe) {
-  if (loggingIFrame != null) {
-    return;
-  }
+  function handleLoggingIFrameLoaded(iframe) {
+    if (loggingIFrame != null) {
+      return;
+    }
 
-  loggingIFrame = iframe;
-  if (missedEvents.length > 0) {
-    missedEvents.forEach(logEvent);
-    missedEvents = [];
+    loggingIFrame = iframe;
+    if (missedEvents.length > 0) {
+      missedEvents.forEach(logEvent);
+      missedEvents = [];
+    }
   }
-}
 
-export function registerExtensionsEventLogger() {
   // If logger is enabled, register a logger that captures logged events
   // and render iframe where the logged events will be reported to
   if (enableLogger) {

From 20ca9b565a3649b57b28e2455801c218ec5e71c7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Oct 2021 13:51:25 -0400
Subject: [PATCH 0944/1603] React DevTools 4.19.1 -> 4.19.2

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 ++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 0c40a3cd990c..06d2c5526a8c 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 627a5a62a754..9b76afb84586 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.19.1",
-  "version_name": "4.19.1",
+  "version": "4.19.2",
+  "version_name": "4.19.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index f5bf6c606a29..31dac5b50f5b 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.19.1",
-  "version_name": "4.19.1",
+  "version": "4.19.2",
+  "version_name": "4.19.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 662d749bbfad..27f17a8b74db 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index e7580779b9d9..e05417ee8f41 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 467ea10a8b61..3bff9a9b93d9 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 8f3243607f62..033c714bb54c 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 12bef99648f1..71d0dfbeb14c 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.19.1",
+  "version": "4.19.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.19.1",
+    "react-devtools-core": "4.19.2",
     "update-notifier": "^2.1.0"
   }
 }

From afcb9cdc9343ddc134b03dcf4d7fbc0810b6002b Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 8 Oct 2021 16:19:54 -0400
Subject: [PATCH 0945/1603] [DevTools] Update Fiber logic in backend renderer
 to match implementation in React (#22527)

* [DevTools] Update isMountedImpl to match implementation in React

* Also sync findCurrentFiberUsingSlowPathById
---
 .../src/backend/renderer.js                   | 94 ++++++++-----------
 1 file changed, 40 insertions(+), 54 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 011f055e505a..19155cb4e354 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -128,6 +128,7 @@ type ReactTypeOfSideEffectType = {|
   PerformedWork: number,
   Placement: number,
   Incomplete: number,
+  Hydrating: number,
 |};
 
 function getFiberFlags(fiber: Fiber): number {
@@ -156,6 +157,7 @@ export function getInternalReactConstants(
     PerformedWork: 0b01,
     Placement: 0b10,
     Incomplete: 0b10000000000000,
+    Hydrating: 0b1000000000000,
   };
 
   // **********************************************************
@@ -526,7 +528,7 @@ export function attach(
   } = getInternalReactConstants(version);
   const {
     DidCapture,
-    Incomplete,
+    Hydrating,
     NoFlags,
     PerformedWork,
     Placement,
@@ -2707,51 +2709,33 @@ export function attach(
     return null;
   }
 
-  const MOUNTING = 1;
-  const MOUNTED = 2;
-  const UNMOUNTED = 3;
+  // This function is copied from React and should be kept in sync:
+  // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js
+  function assertIsMounted(fiber) {
+    if (getNearestMountedFiber(fiber) !== fiber) {
+      throw new Error('Unable to find node on an unmounted component.');
+    }
+  }
 
   // This function is copied from React and should be kept in sync:
   // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js
-  function isFiberMountedImpl(fiber: Fiber): number {
+  function getNearestMountedFiber(fiber: Fiber): null | Fiber {
     let node = fiber;
-    let prevNode = null;
+    let nearestMounted = fiber;
     if (!fiber.alternate) {
       // If there is no alternate, this might be a new tree that isn't inserted
       // yet. If it is, then it will have a pending insertion effect on it.
-      if ((getFiberFlags(node) & Placement) !== NoFlags) {
-        return MOUNTING;
-      }
-      // This indicates an error during render.
-      if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
-        return UNMOUNTED;
-      }
-      while (node.return) {
-        prevNode = node;
-        node = node.return;
-
-        if ((getFiberFlags(node) & Placement) !== NoFlags) {
-          return MOUNTING;
-        }
-        // This indicates an error during render.
-        if ((getFiberFlags(node) & Incomplete) !== NoFlags) {
-          return UNMOUNTED;
-        }
-
-        // If this node is inside of a timed out suspense subtree, we should also ignore errors/warnings.
-        const isTimedOutSuspense =
-          node.tag === SuspenseComponent && node.memoizedState !== null;
-        if (isTimedOutSuspense) {
-          // Note that this does not include errors/warnings in the Fallback tree though!
-          const primaryChildFragment = node.child;
-          const fallbackChildFragment = primaryChildFragment
-            ? primaryChildFragment.sibling
-            : null;
-          if (prevNode !== fallbackChildFragment) {
-            return UNMOUNTED;
-          }
+      let nextNode = node;
+      do {
+        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;
         }
-      }
+        nextNode = node.return;
+      } while (nextNode);
     } else {
       while (node.return) {
         node = node.return;
@@ -2760,11 +2744,11 @@ export function attach(
     if (node.tag === HostRoot) {
       // TODO: Check if this was a nested HostRoot when used with
       // renderContainerIntoSubtree.
-      return MOUNTED;
+      return nearestMounted;
     }
     // If we didn't hit the root, that means that we're in an disconnected tree
     // that has been unmounted.
-    return UNMOUNTED;
+    return null;
   }
 
   // This function is copied from React and should be kept in sync:
@@ -2781,11 +2765,13 @@ export function attach(
     const alternate = fiber.alternate;
     if (!alternate) {
       // If there is no alternate, then we only need to check if it is mounted.
-      const state = isFiberMountedImpl(fiber);
-      if (state === UNMOUNTED) {
-        throw Error('Unable to find node on an unmounted component.');
+      const nearestMounted = getNearestMountedFiber(fiber);
+
+      if (nearestMounted === null) {
+        throw new Error('Unable to find node on an unmounted component.');
       }
-      if (state === MOUNTING) {
+
+      if (nearestMounted !== fiber) {
         return null;
       }
       return fiber;
@@ -2824,23 +2810,20 @@ export function attach(
         while (child) {
           if (child === a) {
             // We've determined that A is the current branch.
-            if (isFiberMountedImpl(parentA) !== MOUNTED) {
-              throw Error('Unable to find node on an unmounted component.');
-            }
+            assertIsMounted(parentA);
             return fiber;
           }
           if (child === b) {
             // We've determined that B is the current branch.
-            if (isFiberMountedImpl(parentA) !== MOUNTED) {
-              throw Error('Unable to find node on an unmounted component.');
-            }
+            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 Error('Unable to find node on an unmounted component.');
+        throw new Error('Unable to find node on an unmounted component.');
       }
 
       if (a.return !== b.return) {
@@ -2891,8 +2874,9 @@ export function attach(
             }
             child = child.sibling;
           }
+
           if (!didFindChild) {
-            throw Error(
+            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.',
             );
@@ -2901,17 +2885,19 @@ export function attach(
       }
 
       if (a.alternate !== b) {
-        throw Error(
+        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 Error('Unable to find node on an unmounted component.');
+      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;

From 55d75005bc26aa41cddc090273f82aa106729fb8 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Mon, 11 Oct 2021 18:50:15 +0530
Subject: [PATCH 0946/1603] duplicate value in variable (#22390)

---
 packages/shared/shallowEqual.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/shared/shallowEqual.js b/packages/shared/shallowEqual.js
index 92c66e5a1ece..33d0004eb45f 100644
--- a/packages/shared/shallowEqual.js
+++ b/packages/shared/shallowEqual.js
@@ -38,9 +38,10 @@ function shallowEqual(objA: mixed, objB: mixed): boolean {
 
   // Test for A's keys different from B.
   for (let i = 0; i < keysA.length; i++) {
+    const currentKey = keysA[i];
     if (
-      !hasOwnProperty.call(objB, keysA[i]) ||
-      !is(objA[keysA[i]], objB[keysA[i]])
+      !hasOwnProperty.call(objB, currentKey) ||
+      !is(objA[currentKey], objB[currentKey])
     ) {
       return false;
     }

From c16b005f2d71acde26658f035ff491a5e027da39 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 11 Oct 2021 18:40:42 -0400
Subject: [PATCH 0947/1603] Update test and stack frame code to support newer
 V8 stack formats (#22477)

---
 packages/shared/ReactComponentStackFrame.js   | 10 +++-
 scripts/jest/matchers/toThrow.js              | 50 +++++++++++++++++++
 scripts/jest/setupTests.js                    |  3 +-
 .../spec-equivalence-reporter/setupTests.js   |  3 +-
 4 files changed, 63 insertions(+), 3 deletions(-)
 create mode 100644 scripts/jest/matchers/toThrow.js

diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
index 0e6b8a03c125..c101003e569e 100644
--- a/packages/shared/ReactComponentStackFrame.js
+++ b/packages/shared/ReactComponentStackFrame.js
@@ -168,7 +168,15 @@ export function describeNativeComponentFrame(
               // 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.
-                const frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+                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);
diff --git a/scripts/jest/matchers/toThrow.js b/scripts/jest/matchers/toThrow.js
new file mode 100644
index 000000000000..148fd49fa099
--- /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 witout 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/setupTests.js b/scripts/jest/setupTests.js
index abb358f817aa..63dbcf27ebcf 100644
--- a/scripts/jest/setupTests.js
+++ b/scripts/jest/setupTests.js
@@ -45,8 +45,9 @@ if (process.env.REACT_CLASS_EQUIVALENCE_TEST) {
   }
 
   expect.extend({
-    ...require('./matchers/toWarnDev'),
     ...require('./matchers/reactTestMatchers'),
+    ...require('./matchers/toThrow'),
+    ...require('./matchers/toWarnDev'),
   });
 
   // We have a Babel transform that inserts guards against infinite loops.
diff --git a/scripts/jest/spec-equivalence-reporter/setupTests.js b/scripts/jest/spec-equivalence-reporter/setupTests.js
index 31814bb754d9..7d6989d14635 100644
--- a/scripts/jest/spec-equivalence-reporter/setupTests.js
+++ b/scripts/jest/spec-equivalence-reporter/setupTests.js
@@ -46,8 +46,9 @@ global.spyOnProd = function(...args) {
 };
 
 expect.extend({
-  ...require('../matchers/toWarnDev'),
   ...require('../matchers/reactTestMatchers'),
+  ...require('../matchers/toThrow'),
+  ...require('../matchers/toWarnDev'),
 });
 
 beforeEach(() => (numExpectations = 0));

From 1e247ff892985488c6bcb87e924d7881f5c37261 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 12 Oct 2021 11:04:10 -0400
Subject: [PATCH 0948/1603] Enabled scheduling profiler marks for React Native
 FB target (#22544)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 5a1c1ed8d9c6..c86d00217cc9 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -20,7 +20,7 @@ export const {enablePersistentOffscreenHostContainer} = dynamicFlags;
 
 // The rest of the flags are static for better dead code elimination.
 export const enableDebugTracing = false;
-export const enableSchedulingProfiler = false;
+export const enableSchedulingProfiler = true;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;

From 8ee4ff88361eff8e8a8aeec32ba3315ad2065131 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 13 Oct 2021 10:35:21 -0400
Subject: [PATCH 0949/1603] Surface backend errors during inspection in the
 frontend UI (#22546)

---
 .../src/__tests__/inspectedElement-test.js    | 84 ++++++++++++++++---
 .../src/backend/renderer.js                   | 15 +++-
 .../src/backend/types.js                      | 10 +++
 .../src/devtools/views/Components/types.js    |  1 +
 .../src/inspectedElementMutableSource.js      | 10 +++
 5 files changed, 107 insertions(+), 13 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 211cd27b1522..68d014de3ad4 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -35,6 +35,9 @@ describe('InspectedElement', () => {
   let legacyRender;
   let testRendererInstance;
 
+  let ErrorBoundary;
+  let errorBoundaryInstance;
+
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -69,6 +72,23 @@ describe('InspectedElement', () => {
     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(() => {
@@ -109,7 +129,11 @@ describe('InspectedElement', () => {
 
   function noop() {}
 
-  async function inspectElementAtIndex(index, useCustomHook = noop) {
+  async function inspectElementAtIndex(
+    index,
+    useCustomHook = noop,
+    shouldThrow = false,
+  ) {
     let didFinish = false;
     let inspectedElement = null;
 
@@ -124,17 +148,21 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(() => {
       testRendererInstance.update(
-        <Contexts
-          defaultSelectedElementID={id}
-          defaultSelectedElementIndex={index}>
-          <React.Suspense fallback={null}>
-            <Suspender id={id} index={index} />
-          </React.Suspense>
-        </Contexts>,
+        <ErrorBoundary>
+          <Contexts
+            defaultSelectedElementID={id}
+            defaultSelectedElementIndex={index}>
+            <React.Suspense fallback={null}>
+              <Suspender id={id} index={index} />
+            </React.Suspense>
+          </Contexts>
+        </ErrorBoundary>,
       );
     }, false);
 
-    expect(didFinish).toBe(true);
+    if (!shouldThrow) {
+      expect(didFinish).toBe(true);
+    }
 
     return inspectedElement;
   }
@@ -2069,6 +2097,37 @@ describe('InspectedElement', () => {
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"createRoot()"`);
   });
 
+  it('should gracefully surface backend errors on the frontend rather than timing out', async () => {
+    spyOn(console, 'error');
+
+    let shouldThrow = false;
+
+    const Example = () => {
+      const [count] = React.useState(0);
+
+      if (shouldThrow) {
+        throw Error('Expected');
+      } else {
+        return count;
+      }
+    };
+
+    await utils.actAsync(() => {
+      const container = document.createElement('div');
+      ReactDOM.createRoot(container).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 = () => {
@@ -2656,7 +2715,7 @@ describe('InspectedElement', () => {
 
   describe('error boundary', () => {
     it('can toggle error', async () => {
-      class ErrorBoundary extends React.Component<any> {
+      class LocalErrorBoundary extends React.Component<any> {
         state = {hasError: false};
         static getDerivedStateFromError(error) {
           return {hasError: true};
@@ -2666,13 +2725,14 @@ describe('InspectedElement', () => {
           return hasError ? 'has-error' : this.props.children;
         }
       }
+
       const Example = () => 'example';
 
       await utils.actAsync(() =>
         legacyRender(
-          <ErrorBoundary>
+          <LocalErrorBoundary>
             <Example />
-          </ErrorBoundary>,
+          </LocalErrorBoundary>,
           document.createElement('div'),
         ),
       );
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 19155cb4e354..218b25538837 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -3471,7 +3471,20 @@ export function attach(
 
     hasElementUpdatedSinceLastInspected = false;
 
-    mostRecentlyInspectedElement = inspectElementRaw(id);
+    try {
+      mostRecentlyInspectedElement = inspectElementRaw(id);
+    } catch (error) {
+      console.error('Error inspecting element.\n\n', error);
+
+      return {
+        type: 'error',
+        id,
+        responseID: requestID,
+        message: error.message,
+        stack: error.stack,
+      };
+    }
+
     if (mostRecentlyInspectedElement === null) {
       return {
         id,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index bbf574ed21a5..3f623ea656e4 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -267,10 +267,19 @@ export type InspectedElement = {|
   rendererVersion: string | 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',
+  message: string,
+  stack: string,
+|};
+
 export type InspectElementFullData = {|
   id: number,
   responseID: number,
@@ -299,6 +308,7 @@ export type InspectElementNotFound = {|
 |};
 
 export type InspectedElementPayload =
+  | InspectElementError
   | InspectElementFullData
   | InspectElementHydratedPath
   | InspectElementNoChange
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index d48e8e32e1f2..a40b72f4cc8e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -58,6 +58,7 @@ export type OwnersList = {|
 |};
 
 export type InspectedElementResponseType =
+  | 'error'
   | 'full-data'
   | 'hydrated-path'
   | 'no-change'
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index 9302cd782a0c..5cb5370d1c21 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -18,6 +18,7 @@ import {fillInPath} from 'react-devtools-shared/src/hydration';
 import type {LRUCache} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {
+  InspectElementError,
   InspectElementFullData,
   InspectElementHydratedPath,
 } from 'react-devtools-shared/src/backend/types';
@@ -79,6 +80,15 @@ export function inspectElement({
 
     let inspectedElement;
     switch (type) {
+      case 'error':
+        const {message, stack} = ((data: any): InspectElementError);
+
+        // The backend's stack (where the error originated) is more meaningful than this stack.
+        const error = new Error(message);
+        error.stack = stack;
+
+        throw error;
+
       case 'no-change':
         // This is a no-op for the purposes of our cache.
         inspectedElement = inspectedElementCache.get(id);

From 7142d110b00ecb5bb7566128c431fee02963e543 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 13 Oct 2021 18:44:36 -0400
Subject: [PATCH 0950/1603] Bugfix: Nested useOpaqueIdentifier references
 (#22553)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Handle render phase updates explicitly

We fire a warning in development if a component is updated during
the render phase (with the exception of local hook updates, which have
their own defined behavior).

Because it's not a supported React pattern, we don't have that many
tests that trigger this path. But it is meant to have reasonable
semantics when it does happen, so that if it accidentally ships to
production, the app doesn't crash unnecessarily. The behavior is not
super well-defined, though.

There are also some _internal_ React implementation details that
intentionally to rely on this behavior. Most prominently, selective
hydration and useOpaqueIdentifier.

I need to tweak the behavior of render phase updates slightly as part
of a fix for useOpaqueIdentifier. This shouldn't cause a user-facing
change in behavior outside of useOpaqueIdentifier, but it does require
that we explicitly model render phase updates.

* Bugfix: Nested useOpaqueIdentifier calls

Fixes an issue where multiple useOpaqueIdentifier hooks are upgraded
to client ids within the same render.

The way the upgrade works is that useOpaqueIdentifier schedules a
render phase update then throws an error to trigger React's error
recovery mechanism.

The normal error recovery mechanism is designed for errors that occur
as a result of interleaved mutations, so we usually only retry a single
time, synchronously, before giving up.

useOpaqueIdentifier is different because the error its throws when
upgrading is not caused by an interleaved mutation. Rather, it happens
when an ID is referenced for the first time inside a client-rendered
tree (i.e. sommething that wasn't part of the initial server render).
The fact that it relies on the error recovery mechanism is an
implementation detail. And a single recovery attempt may be
insufficient. For example, if a parent and a child component may
reference different ids, and both are mounted as a result of the same
client update, that will trigger two separate error recovery attempts.

Because render phase updates are not allowed when triggered from
userspace — we log a warning in developement to prevent them —
we can assume that if something does update during the render phase, it
is one of our "legit" implementation details like useOpaqueIdentifier.
So we can keep retrying until we succeed — up to a limit, to protect
against inifite loops. I chose 50 since that's the limit we use for
commit phase updates.
---
 .../ReactDOMServerIntegrationHooks-test.js    |  35 ++++
 .../src/ReactFiberWorkLoop.new.js             | 193 ++++++++++--------
 .../src/ReactFiberWorkLoop.old.js             | 193 ++++++++++--------
 ...tIncrementalErrorHandling-test.internal.js |  59 ++++++
 4 files changed, 314 insertions(+), 166 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index a27954785f7e..daf345331418 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -1975,5 +1975,40 @@ describe('ReactDOMServerHooks', () => {
         container.getElementsByTagName('span')[0].getAttribute('id'),
       ).not.toBeNull();
     });
+
+    it('useOpaqueIdentifier with multiple ids in nested components', async () => {
+      function DivWithId({id, children}) {
+        return <div id={id}>{children}</div>;
+      }
+
+      let setShowMore;
+      function App() {
+        const outerId = useOpaqueIdentifier();
+        const innerId = useOpaqueIdentifier();
+        const [showMore, _setShowMore] = useState(false);
+        setShowMore = _setShowMore;
+        return showMore ? (
+          <DivWithId id={outerId}>
+            <DivWithId id={innerId} />
+          </DivWithId>
+        ) : null;
+      }
+
+      const container = document.createElement('div');
+      container.innerHTML = ReactDOMServer.renderToString(<App />);
+
+      await act(async () => {
+        ReactDOM.hydrateRoot(container, <App />);
+      });
+
+      // Show additional content that wasn't part of the initial server-
+      // rendered repsonse.
+      await act(async () => {
+        setShowMore(true);
+      });
+      const [div1, div2] = container.getElementsByTagName('div');
+      expect(typeof div1.getAttribute('id')).toBe('string');
+      expect(typeof div2.getAttribute('id')).toBe('string');
+    });
   });
 });
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index aaeac5fdb22e..884f8cc22aa5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -294,7 +294,9 @@ let workInProgressRootIncludedLanes: Lanes = NoLanes;
 // 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 workInProgressRootUpdatedLanes: Lanes = NoLanes;
+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;
 
@@ -454,86 +456,105 @@ export function scheduleUpdateOnFiber(
   eventTime: number,
 ): FiberRoot | null {
   checkForNestedUpdates();
-  warnAboutRenderPhaseUpdatesInDEV(fiber);
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
   }
 
-  if (enableUpdaterTracking) {
-    if (isDevToolsPresent) {
-      addFiberToLanesMap(root, fiber, lane);
-    }
-  }
-
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
-  if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
-    if (
-      (executionContext & CommitContext) !== NoContext &&
-      root === rootCommittingMutationOrLayoutEffects
-    ) {
-      if (fiber.mode & ProfileMode) {
-        let current = fiber;
-        while (current !== null) {
-          if (current.tag === Profiler) {
-            const {id, onNestedUpdateScheduled} = current.memoizedProps;
-            if (typeof onNestedUpdateScheduled === 'function') {
-              onNestedUpdateScheduled(id);
+  if (
+    (executionContext & RenderContext) !== NoLanes &&
+    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
+    // and useOpaqueIdentifier.
+    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);
+      }
+    }
+
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      if (
+        (executionContext & CommitContext) !== NoContext &&
+        root === rootCommittingMutationOrLayoutEffects
+      ) {
+        if (fiber.mode & ProfileMode) {
+          let current = fiber;
+          while (current !== null) {
+            if (current.tag === Profiler) {
+              const {id, onNestedUpdateScheduled} = current.memoizedProps;
+              if (typeof onNestedUpdateScheduled === 'function') {
+                onNestedUpdateScheduled(id);
+              }
             }
+            current = current.return;
           }
-          current = current.return;
         }
       }
     }
-  }
 
-  // TODO: Consolidate with `isInterleavedUpdate` check
-  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. Unless the
-    // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
-    // phase update. In that case, we don't treat render phase updates as if
-    // they were interleaved, for backwards compat reasons.
+    // TODO: Consolidate with `isInterleavedUpdate` check
+    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. Unless the
+      // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
+      // phase update. In that case, we don't treat render phase updates as if
+      // they were interleaved, for backwards compat reasons.
+      if (
+        deferRenderPhaseUpdateToNextBatch ||
+        (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.
+        markRootSuspended(root, workInProgressRootRenderLanes);
+      }
+    }
+
+    ensureRootIsScheduled(root, eventTime);
     if (
-      deferRenderPhaseUpdateToNextBatch ||
-      (executionContext & RenderContext) === NoContext
+      lane === SyncLane &&
+      executionContext === NoContext &&
+      (fiber.mode & ConcurrentMode) === NoMode &&
+      // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
     ) {
-      workInProgressRootUpdatedLanes = mergeLanes(
-        workInProgressRootUpdatedLanes,
-        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.
-      markRootSuspended(root, workInProgressRootRenderLanes);
+      // 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();
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
-
-  ensureRootIsScheduled(root, eventTime);
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode &&
-    // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
-    !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
-  ) {
-    // 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();
-    flushSyncCallbacksOnlyInLegacyMode();
-  }
-
   return root;
 }
 
@@ -865,7 +886,25 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     clearContainer(root.containerInfo);
   }
 
-  const exitStatus = renderRootSync(root, errorRetryLanes);
+  let exitStatus;
+
+  const MAX_ERROR_RETRY_ATTEMPTS = 50;
+  for (let i = 0; i < MAX_ERROR_RETRY_ATTEMPTS; i++) {
+    exitStatus = renderRootSync(root, errorRetryLanes);
+    if (
+      exitStatus === RootErrored &&
+      workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
+    ) {
+      // There was a render phase update during this render. This was likely a
+      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
+      // again. This time, the component will use a client ID and will proceed
+      // without throwing. If multiple IDs upgrade as a result of the same
+      // update, we will have to do multiple render passes. To protect against
+      // an inifinite loop, eventually we'll give up.
+      continue;
+    }
+    break;
+  }
 
   executionContext = prevExecutionContext;
 
@@ -1042,7 +1081,10 @@ function markRootSuspended(root, suspendedLanes) {
   // TODO: Lol maybe there's a better way to factor this besides this
   // obnoxiously named function :)
   suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);
-  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootUpdatedLanes);
+  suspendedLanes = removeLanes(
+    suspendedLanes,
+    workInProgressRootInterleavedUpdatedLanes,
+  );
   markRootSuspended_dontCallThisOneDirectly(root, suspendedLanes);
 }
 
@@ -1068,19 +1110,6 @@ function performSyncWorkOnRoot(root) {
 
   let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
-    const prevExecutionContext = executionContext;
-    executionContext |= RetryAfterError;
-
-    // If an error occurred during hydration,
-    // discard server response and fall back to client side render.
-    if (root.isDehydrated) {
-      root.isDehydrated = false;
-      if (__DEV__) {
-        errorHydratingContainer(root.containerInfo);
-      }
-      clearContainer(root.containerInfo);
-    }
-
     // If something threw an error, try rendering one more time. We'll render
     // synchronously to block concurrent data mutations, and we'll includes
     // all pending updates are included. If it still fails after the second
@@ -1088,10 +1117,8 @@ function performSyncWorkOnRoot(root) {
     const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     if (errorRetryLanes !== NoLanes) {
       lanes = errorRetryLanes;
-      exitStatus = renderRootSync(root, lanes);
+      exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
     }
-
-    executionContext = prevExecutionContext;
   }
 
   if (exitStatus === RootFatalErrored) {
@@ -1300,7 +1327,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootExitStatus = RootIncomplete;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
-  workInProgressRootUpdatedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
 
   enqueueInterleavedUpdates();
@@ -1443,7 +1471,7 @@ export function renderDidSuspendDelayIfPossible(): void {
   if (
     workInProgressRoot !== null &&
     (includesNonIdleWork(workInProgressRootSkippedLanes) ||
-      includesNonIdleWork(workInProgressRootUpdatedLanes))
+      includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes))
   ) {
     // 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
@@ -2697,7 +2725,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
-      (executionContext & RenderContext) !== NoContext &&
       !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
     ) {
       switch (fiber.tag) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 67984298a5de..db7a3de837b4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -294,7 +294,9 @@ let workInProgressRootIncludedLanes: Lanes = NoLanes;
 // 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 workInProgressRootUpdatedLanes: Lanes = NoLanes;
+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;
 
@@ -454,86 +456,105 @@ export function scheduleUpdateOnFiber(
   eventTime: number,
 ): FiberRoot | null {
   checkForNestedUpdates();
-  warnAboutRenderPhaseUpdatesInDEV(fiber);
 
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
   }
 
-  if (enableUpdaterTracking) {
-    if (isDevToolsPresent) {
-      addFiberToLanesMap(root, fiber, lane);
-    }
-  }
-
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
-  if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
-    if (
-      (executionContext & CommitContext) !== NoContext &&
-      root === rootCommittingMutationOrLayoutEffects
-    ) {
-      if (fiber.mode & ProfileMode) {
-        let current = fiber;
-        while (current !== null) {
-          if (current.tag === Profiler) {
-            const {id, onNestedUpdateScheduled} = current.memoizedProps;
-            if (typeof onNestedUpdateScheduled === 'function') {
-              onNestedUpdateScheduled(id);
+  if (
+    (executionContext & RenderContext) !== NoLanes &&
+    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
+    // and useOpaqueIdentifier.
+    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);
+      }
+    }
+
+    if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
+      if (
+        (executionContext & CommitContext) !== NoContext &&
+        root === rootCommittingMutationOrLayoutEffects
+      ) {
+        if (fiber.mode & ProfileMode) {
+          let current = fiber;
+          while (current !== null) {
+            if (current.tag === Profiler) {
+              const {id, onNestedUpdateScheduled} = current.memoizedProps;
+              if (typeof onNestedUpdateScheduled === 'function') {
+                onNestedUpdateScheduled(id);
+              }
             }
+            current = current.return;
           }
-          current = current.return;
         }
       }
     }
-  }
 
-  // TODO: Consolidate with `isInterleavedUpdate` check
-  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. Unless the
-    // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
-    // phase update. In that case, we don't treat render phase updates as if
-    // they were interleaved, for backwards compat reasons.
+    // TODO: Consolidate with `isInterleavedUpdate` check
+    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. Unless the
+      // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
+      // phase update. In that case, we don't treat render phase updates as if
+      // they were interleaved, for backwards compat reasons.
+      if (
+        deferRenderPhaseUpdateToNextBatch ||
+        (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.
+        markRootSuspended(root, workInProgressRootRenderLanes);
+      }
+    }
+
+    ensureRootIsScheduled(root, eventTime);
     if (
-      deferRenderPhaseUpdateToNextBatch ||
-      (executionContext & RenderContext) === NoContext
+      lane === SyncLane &&
+      executionContext === NoContext &&
+      (fiber.mode & ConcurrentMode) === NoMode &&
+      // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
+      !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
     ) {
-      workInProgressRootUpdatedLanes = mergeLanes(
-        workInProgressRootUpdatedLanes,
-        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.
-      markRootSuspended(root, workInProgressRootRenderLanes);
+      // 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();
+      flushSyncCallbacksOnlyInLegacyMode();
     }
   }
-
-  ensureRootIsScheduled(root, eventTime);
-  if (
-    lane === SyncLane &&
-    executionContext === NoContext &&
-    (fiber.mode & ConcurrentMode) === NoMode &&
-    // Treat `act` as if it's inside `batchedUpdates`, even in legacy mode.
-    !(__DEV__ && ReactCurrentActQueue.isBatchingLegacy)
-  ) {
-    // 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();
-    flushSyncCallbacksOnlyInLegacyMode();
-  }
-
   return root;
 }
 
@@ -865,7 +886,25 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     clearContainer(root.containerInfo);
   }
 
-  const exitStatus = renderRootSync(root, errorRetryLanes);
+  let exitStatus;
+
+  const MAX_ERROR_RETRY_ATTEMPTS = 50;
+  for (let i = 0; i < MAX_ERROR_RETRY_ATTEMPTS; i++) {
+    exitStatus = renderRootSync(root, errorRetryLanes);
+    if (
+      exitStatus === RootErrored &&
+      workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
+    ) {
+      // There was a render phase update during this render. This was likely a
+      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
+      // again. This time, the component will use a client ID and will proceed
+      // without throwing. If multiple IDs upgrade as a result of the same
+      // update, we will have to do multiple render passes. To protect against
+      // an inifinite loop, eventually we'll give up.
+      continue;
+    }
+    break;
+  }
 
   executionContext = prevExecutionContext;
 
@@ -1042,7 +1081,10 @@ function markRootSuspended(root, suspendedLanes) {
   // TODO: Lol maybe there's a better way to factor this besides this
   // obnoxiously named function :)
   suspendedLanes = removeLanes(suspendedLanes, workInProgressRootPingedLanes);
-  suspendedLanes = removeLanes(suspendedLanes, workInProgressRootUpdatedLanes);
+  suspendedLanes = removeLanes(
+    suspendedLanes,
+    workInProgressRootInterleavedUpdatedLanes,
+  );
   markRootSuspended_dontCallThisOneDirectly(root, suspendedLanes);
 }
 
@@ -1068,19 +1110,6 @@ function performSyncWorkOnRoot(root) {
 
   let exitStatus = renderRootSync(root, lanes);
   if (root.tag !== LegacyRoot && exitStatus === RootErrored) {
-    const prevExecutionContext = executionContext;
-    executionContext |= RetryAfterError;
-
-    // If an error occurred during hydration,
-    // discard server response and fall back to client side render.
-    if (root.isDehydrated) {
-      root.isDehydrated = false;
-      if (__DEV__) {
-        errorHydratingContainer(root.containerInfo);
-      }
-      clearContainer(root.containerInfo);
-    }
-
     // If something threw an error, try rendering one more time. We'll render
     // synchronously to block concurrent data mutations, and we'll includes
     // all pending updates are included. If it still fails after the second
@@ -1088,10 +1117,8 @@ function performSyncWorkOnRoot(root) {
     const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
     if (errorRetryLanes !== NoLanes) {
       lanes = errorRetryLanes;
-      exitStatus = renderRootSync(root, lanes);
+      exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
     }
-
-    executionContext = prevExecutionContext;
   }
 
   if (exitStatus === RootFatalErrored) {
@@ -1300,7 +1327,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootExitStatus = RootIncomplete;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
-  workInProgressRootUpdatedLanes = NoLanes;
+  workInProgressRootInterleavedUpdatedLanes = NoLanes;
+  workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
 
   enqueueInterleavedUpdates();
@@ -1443,7 +1471,7 @@ export function renderDidSuspendDelayIfPossible(): void {
   if (
     workInProgressRoot !== null &&
     (includesNonIdleWork(workInProgressRootSkippedLanes) ||
-      includesNonIdleWork(workInProgressRootUpdatedLanes))
+      includesNonIdleWork(workInProgressRootInterleavedUpdatedLanes))
   ) {
     // 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
@@ -2697,7 +2725,6 @@ function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
     if (
       ReactCurrentDebugFiberIsRenderingInDEV &&
-      (executionContext & RenderContext) !== NoContext &&
       !getIsUpdatingOpaqueValueInRenderPhaseInDEV()
     ) {
       switch (fiber.tag) {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 716771a3778d..cc842bd16d22 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1915,6 +1915,65 @@ describe('ReactIncrementalErrorHandling', () => {
     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 () => {
+    // useOpaqueIdentifier uses an render phase update as an implementation
+    // detail. When an error is accompanied by a render phase update, we assume
+    // that it comes from useOpaqueIdentifier, 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');
+
+    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(async () => {
+      root.render(<App shouldThrow={false} />);
+    });
+    expect(root).toMatchRenderedOutput('All good');
+
+    let error;
+    try {
+      await act(async () => {
+        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(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'Cannot update a component (`%s`) while rendering a different component',
+      );
+      expect(console.error.calls.argsFor(1)[0]).toContain(
+        'The above error occurred in the <App> component',
+      );
+    }
+  });
+
   if (global.__PERSISTENT__) {
     it('regression test: should fatal if error is thrown at the root', () => {
       const root = ReactNoop.createRoot();

From 61455a25b7d5783f398b0a463f45b9b8d14a6ed6 Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Wed, 13 Oct 2021 16:39:29 -0700
Subject: [PATCH 0951/1603] Enable experimental Cache API in www TestRenderer
 (#22554)

---
 packages/shared/forks/ReactFeatureFlags.testing.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 6fc6cf3c6836..9eefdc2cca77 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = true;
 export const disableJavaScriptURLs = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;

From a45533cc2511cffa972bf58b68789c9b8aeea516 Mon Sep 17 00:00:00 2001
From: Gabriel Trompiz <gab.tc@icloud.com>
Date: Thu, 14 Oct 2021 07:31:45 -0500
Subject: [PATCH 0952/1603] Allow to use the Profiler when no client is
 connected in standalone DevTools (#22551)

---
 .../react-devtools-core/src/standalone.js     | 21 ++++++++++++++++++-
 .../react-devtools-shared/src/constants.js    |  2 ++
 .../src/devtools/views/DevTools.js            |  3 ++-
 packages/react-devtools/app.html              | 19 +++++++++++++++++
 4 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index c37bb945338c..fae70937ea0a 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -30,7 +30,11 @@ import {readFileSync} from 'fs';
 import {installHook} from 'react-devtools-shared/src/hook';
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {doesFilePathExist, launchEditor} from './editor';
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  __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 {InspectedElement} from 'react-devtools-shared/src/devtools/views/Components/types';
@@ -179,6 +183,20 @@ function onError({code, message}) {
   }
 }
 
+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 => {
@@ -372,6 +390,7 @@ const DevtoolsUI = {
   setProjectRoots,
   setStatusListener,
   startServer,
+  openProfiler,
 };
 
 export default DevtoolsUI;
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 60ce987e267f..40c28a0f6abd 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -20,6 +20,8 @@ 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 LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
+
 export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 0fa4a440136a..781ad9d902f6 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -38,6 +38,7 @@ 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 styles from './DevTools.css';
 
@@ -143,7 +144,7 @@ export default function DevTools({
   hideViewSourceAction,
 }: Props) {
   const [currentTab, setTab] = useLocalStorage<TabID>(
-    'React::DevTools::defaultTab',
+    LOCAL_STORAGE_DEFAULT_TAB_KEY,
     defaultTab,
   );
 
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
index c2193698fca7..fc631cea1ca6 100644
--- a/packages/react-devtools/app.html
+++ b/packages/react-devtools/app.html
@@ -142,6 +142,16 @@
             <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>
@@ -201,6 +211,12 @@
         }
       }
 
+      function openProfiler() {
+        window.devtools
+          .setContentDOMNode(document.getElementById("container"))
+          .openProfiler();
+      }
+
       const link = $('#rn-help-link');
       link.addEventListener('click', event => {
         event.preventDefault();
@@ -217,6 +233,9 @@
       $byIp.addEventListener('click', selectAllAndCopy);
       $byIp.addEventListener('focus', selectAllAndCopy);
 
+      const $profiler = $("#profiler");
+      $profiler.addEventListener('click', openProfiler);
+
       let devtools;
       try {
         devtools = require("react-devtools-core/standalone").default;

From c3a19e5af0b12f3535ad6f8dee8643252f985e74 Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Thu, 14 Oct 2021 20:24:06 +0530
Subject: [PATCH 0953/1603] Improved Workers filenames in devtools-core
 (#22559)

---
 packages/react-devtools-core/webpack.standalone.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index fe7c1220f15d..9d7c1fc34a68 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -103,6 +103,7 @@ module.exports = {
             loader: 'workerize-loader',
             options: {
               inline: true,
+              name: '[name]',
             },
           },
           {

From 545d4c2de7934a43b0c5d3ce050d77b4c3113bd3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 14 Oct 2021 17:15:31 -0400
Subject: [PATCH 0954/1603] Prevent errors/crashing when multiple installs of
 DevTools are present (#22517)

## Summary

This commit is a proposal for handling duplicate installation of DevTools, in particular scoped to duplicates such as a dev build or the internal versions of DevTools installed alongside the Chrome Web Store extension.

Specifically, this commit makes it so when another instance of the DevTools extension is installed alongside the extension installed from the Chrome Web Store, we don't produce a stream of errors or crash Chrome, which is what would usually happen in this case.


### Detecting Duplicate Installations

- First, we check what type of installation the extension is: from the Chrome Web Store, the internal build of the extension, or a local development build.
- If the extension is from the **Chrome Web Store**:
  - During initialization, we first check if the internal or local builds of the extension have already been installed and are enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the internal and local builds of the extension using their extension IDs.
    - We can do this because the extension ID for the internal build (and for the Chrome Web Store) is a stable ID.
    - For the local build, at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds.
  - If we detect that the internal or local extensions are already installed, then we skip initializing the current extension altogether so as to not conflict with the other versions. This means we don't initialize the frontend or the backend at all.
- If the extension is the **Internal Build**:
  - During initialization, we first check if the local builds of the extension has already been installed and is enabled. To do this, we send a [cross-extension message](https://developer.chrome.com/docs/extensions/mv3/messaging/#external) to the local build of the extension using its extension ID.
    - We can do this for the local build because at build time we hardcode a [`key` in the `manifest.json`](https://developer.chrome.com/docs/extensions/mv2/manifest/key/) which allows us to have a stable ID even for local builds.
  - If we detect that the local extension is already installed, then we skip initializing the current extension altogether so as to not conflict with the that  version. This means we don't initialize the frontend or the backend at all.
- If the extension is a **Local Dev Build**:
  - Since other extensions check for the existence of this extension and disable themselves if they detect it, we don't need any special handling during initialization and assume that there are no duplicate extensions. This means that we will generally prefer keeping this extension enabled.

This behavior means that the order of priority for keeping an extension enabled is the following:

1. Local build
2. Internal build
3. Public build


### Preventing duplicate backend initialization

Note that the backend is injected and initialized by the content script listening to a message posted to the inspected window (via `postMessage`). Since the content script will be injected twice, once each by each instance of the extension, even if we initialize the extension once, both content scripts would still receive the single message posted from the single frontend, and it would then still inject and initialize the backend twice.

In order to prevent this, we also add the extension ID to the message for injecting the backend. That way each content script can check if the message comes from its own extension, and if not it can ignore the message and avoid double injecting the backend.

### Other approaches

- I considered using the [`chrome.management`](https://developer.chrome.com/docs/extensions/reference/management/) API generally to detect other installations, but that requires adding additional permissions to our production extension, which didn't seem ideal.
- I also considered a few options of writing a special flag to the inspected window and checking for it before initializing the extension. However, it's hard to avoid race conditions in that case, and it seemed more reliable to check specifically for the WebStore extension, which is realistically where we would encounter the overlap.

### Rollout

- This commit needs to be published and rolled out to the Chrome Web Store first.
- After this commit is published to the Chrome Web Store, any duplicate instances of the extension that are built and installed after this commit will no longer conflict with the Chrome Web Store version.

### Next Steps

- In a subsequent PR, I will extend this code to show a warning when duplicate extensions have been detected.

Part of #22486

## How did you test this change?

### Basic Testing

- yarn flow
- yarn test
- yarn test-build-devtools

### Double installation testing

Testing double-installed extensions for this commit is tricky because we are relying on the extension ID of the internal and Chrome Web Store extensions, but we obviously can't actually test the Web Store version (since we can't modify the already published version).

In order to simulate duplicate extensions installed, I did the following process:

- Built separate extensions where I hardcoded a constant for whether the extension is internal or public (e.g. `EXTENSION_INSTALLATION_TYPE = 'internal'`). Then I installed these built extensions corresponding to the "internal" and "Web Store" builds.
- Build and run the regular development extension (with `yarn build:chrome:dev && yarn test:chrome`), using the extension IDs of the previously built extensions as the "internal" and "public" extension IDs.

With this set up in place, I tested the following on pages both with and without React:

- When only the local extension enabled, DevTools works normally.
- When only the "internal" extension enabled, DevTools works normally.
- When only the "public" extension enabled, DevTools works normally.
- When "internal" and "public" extensions are installed, "public" extension is disabled and "internal" extension works normally.
- When the local extension runs alongside the other extensions, other extensions disable themselves and local build works normally.
- When we can't recognize what type of build the extension corresponds to, we show an error.
- When all 3 extensions are installed and enabled in all different combinations, DevTools no longer produces errors or crashes Chrome, and works normally.
---
 packages/react-devtools-extensions/build.js   |  11 +
 .../react-devtools-extensions/package.json    |   8 +-
 .../src/background.js                         |  10 +
 .../src/checkForDuplicateInstallations.js     | 129 ++++
 .../src/constants.js                          |  31 +
 .../src/injectGlobalHook.js                   |  19 +-
 .../react-devtools-extensions/src/main.js     | 716 +++++++++---------
 packages/react-devtools/CONTRIBUTING.md       |   2 +-
 8 files changed, 576 insertions(+), 350 deletions(-)
 create mode 100644 packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
 create mode 100644 packages/react-devtools-extensions/src/constants.js

diff --git a/packages/react-devtools-extensions/build.js b/packages/react-devtools-extensions/build.js
index eb39056eaa60..4701bbdcba9b 100644
--- a/packages/react-devtools-extensions/build.js
+++ b/packages/react-devtools-extensions/build.js
@@ -102,6 +102,17 @@ const build = async (tempPath, manifestPath) => {
   }
   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
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index 7d1f018a6bb2..3a6bdfa7c044 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -4,15 +4,15 @@
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
-    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome:dev && yarn run build:firefox:dev && yarn run build:edge:dev",
+    "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:dev": "cross-env NODE_ENV=development node ./chrome/build",
+    "build:chrome:local": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
-    "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
+    "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:dev": "cross-env NODE_ENV=development node ./edge/build",
+    "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",
diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 9e09513b78fb..85595d26010b 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -6,6 +6,8 @@ const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
+import {EXTENSION_INSTALL_CHECK_MESSAGE} from './constants';
+
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
   let name = null;
@@ -116,6 +118,14 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
+chrome.runtime.onMessageExternal.addListener(
+  (request, sender, sendResponse) => {
+    if (request === EXTENSION_INSTALL_CHECK_MESSAGE) {
+      sendResponse(true);
+    }
+  },
+);
+
 chrome.runtime.onMessage.addListener((request, sender) => {
   const tab = sender.tab;
   if (tab) {
diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
new file mode 100644
index 000000000000..e54476283cc6
--- /dev/null
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -0,0 +1,129 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+declare var chrome: any;
+
+import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  EXTENSION_INSTALL_CHECK_MESSAGE,
+  EXTENSION_INSTALLATION_TYPE,
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+} from './constants';
+
+const UNRECOGNIZED_EXTENSION_WARNING =
+  'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
+  'Please make sure you only have a single version of the extension installed or enabled. ' +
+  'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
+
+export function checkForDuplicateInstallations(callback: boolean => void) {
+  switch (EXTENSION_INSTALLATION_TYPE) {
+    case 'public': {
+      // If this is the public extension (e.g. from Chrome Web Store), check if an internal
+      // or local build of the extension is also installed, and if so, disable this extension.
+      // TODO show warning if other installations are present.
+      checkForInstalledExtensions([
+        INTERNAL_EXTENSION_ID,
+        LOCAL_EXTENSION_ID,
+      ]).then(areExtensionsInstalled => {
+        if (areExtensionsInstalled.some(isInstalled => isInstalled)) {
+          callback(true);
+        } else {
+          callback(false);
+        }
+      });
+      break;
+    }
+    case 'internal': {
+      // If this is the internal extension, check if a local build of the extension
+      // is also installed, and if so, disable this extension.
+      // If the public version of the extension is also installed, that extension
+      // will disable itself.
+      // TODO show warning if other installations are present.
+      checkForInstalledExtension(LOCAL_EXTENSION_ID).then(isInstalled => {
+        if (isInstalled) {
+          callback(true);
+        } else {
+          callback(false);
+        }
+      });
+      break;
+    }
+    case 'local': {
+      if (__DEV__) {
+        // If this is the local extension (i.e. built locally during development),
+        // always keep this one enabled. Other installations disable themselves if
+        // they detect the local build is installed.
+        callback(false);
+        break;
+      }
+
+      // If this extension wasn't built locally during development, we can't reliably
+      // detect if there are other installations of DevTools present.
+      // In this case, assume there are no duplicate exensions and show a warning about
+      // potential conflicts.
+      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      chrome.devtools.inspectedWindow.eval(
+        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+      );
+      callback(false);
+      break;
+    }
+    case 'unknown': {
+      // If we don't know how this extension was built, we can't reliably detect if there
+      // are other installations of DevTools present.
+      // In this case, assume there are no duplicate exensions and show a warning about
+      // potential conflicts.
+      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      chrome.devtools.inspectedWindow.eval(
+        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+      );
+      callback(false);
+      break;
+    }
+    default: {
+      (EXTENSION_INSTALLATION_TYPE: empty);
+    }
+  }
+}
+
+function checkForInstalledExtensions(
+  extensionIds: string[],
+): Promise<boolean[]> {
+  return Promise.all(
+    extensionIds.map(extensionId => checkForInstalledExtension(extensionId)),
+  );
+}
+
+function checkForInstalledExtension(extensionId: string): Promise<boolean> {
+  return new Promise(resolve => {
+    chrome.runtime.sendMessage(
+      extensionId,
+      EXTENSION_INSTALL_CHECK_MESSAGE,
+      response => {
+        if (__DEBUG__) {
+          console.log(
+            'checkForDuplicateInstallations: Duplicate installation check responded with',
+            {
+              response,
+              error: chrome.runtime.lastError?.message,
+              currentExtension: EXTENSION_INSTALLATION_TYPE,
+              checkingExtension: extensionId,
+            },
+          );
+        }
+        if (chrome.runtime.lastError != null) {
+          resolve(false);
+        } else {
+          resolve(true);
+        }
+      },
+    );
+  });
+}
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
new file mode 100644
index 000000000000..5e85e4aec40e
--- /dev/null
+++ b/packages/react-devtools-extensions/src/constants.js
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+declare var chrome: any;
+
+export const CURRENT_EXTENSION_ID = chrome.runtime.id;
+
+export const EXTENSION_INSTALL_CHECK_MESSAGE = 'extension-install-check';
+
+export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
+export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
+export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
+
+export const EXTENSION_INSTALLATION_TYPE:
+  | 'public'
+  | 'internal'
+  | 'local'
+  | 'unknown' =
+  CURRENT_EXTENSION_ID === CHROME_WEBSTORE_EXTENSION_ID
+    ? 'public'
+    : CURRENT_EXTENSION_ID === INTERNAL_EXTENSION_ID
+    ? 'internal'
+    : CURRENT_EXTENSION_ID === LOCAL_EXTENSION_ID
+    ? 'local'
+    : 'unknown';
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index 701d4927487d..02d5109e291e 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -2,7 +2,11 @@
 
 import nullthrows from 'nullthrows';
 import {installHook} from 'react-devtools-shared/src/hook';
-import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
+import {
+  __DEBUG__,
+  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
+} from 'react-devtools-shared/src/constants';
+import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 
 function injectCode(code) {
@@ -27,7 +31,17 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-
+  if (data.extensionId !== CURRENT_EXTENSION_ID) {
+    if (__DEBUG__) {
+      console.log(
+        `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
+        {
+          currentExtension: EXTENSION_INSTALLATION_TYPE,
+        },
+      );
+    }
+    return;
+  }
   switch (data.source) {
     case 'react-devtools-detector':
       lastDetectionResult = {
@@ -102,6 +116,7 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType})
   window.postMessage({
     source: 'react-devtools-detector',
     reactBuildType,
+    extensionId: "${CURRENT_EXTENSION_ID}",
   }, '*');
 });
 `;
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 6a3836839a4e..8280158e1db7 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -22,6 +22,8 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
+import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
+import {checkForDuplicateInstallations} from './checkForDuplicateInstallations';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
@@ -70,135 +72,158 @@ function createPanelIfReactLoaded() {
         return;
       }
 
-      panelCreated = true;
+      checkForDuplicateInstallations(hasDuplicateInstallation => {
+        if (hasDuplicateInstallation) {
+          if (__DEBUG__) {
+            console.log(
+              '[main] createPanelIfReactLoaded: Duplicate installation detected, skipping initialization of extension.',
+              {currentExtension: EXTENSION_INSTALLATION_TYPE},
+            );
+          }
+          panelCreated = true;
+          clearInterval(loadCheckInterval);
+          return;
+        }
 
-      clearInterval(loadCheckInterval);
+        if (__DEBUG__) {
+          console.log(
+            '[main] createPanelIfReactLoaded: No duplicate installations detected, continuing with initialization.',
+            {currentExtension: EXTENSION_INSTALLATION_TYPE},
+          );
+        }
 
-      let bridge = null;
-      let store = null;
+        panelCreated = true;
 
-      let profilingData = null;
+        clearInterval(loadCheckInterval);
 
-      let componentsPortalContainer = null;
-      let profilerPortalContainer = null;
+        let bridge = null;
+        let store = null;
 
-      let cloneStyleTags = null;
-      let mostRecentOverrideTab = null;
-      let render = null;
-      let root = null;
+        let profilingData = null;
 
-      const tabId = chrome.devtools.inspectedWindow.tabId;
+        let componentsPortalContainer = null;
+        let profilerPortalContainer = null;
 
-      registerDevToolsEventLogger('extension');
+        let cloneStyleTags = null;
+        let mostRecentOverrideTab = null;
+        let render = null;
+        let root = null;
 
-      function initBridgeAndStore() {
-        const port = chrome.runtime.connect({
-          name: String(tabId),
-        });
-        // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
-        // so it makes no sense to handle it here.
-
-        bridge = new Bridge({
-          listen(fn) {
-            const listener = message => fn(message);
-            // Store the reference so that we unsubscribe from the same object.
-            const portOnMessage = port.onMessage;
-            portOnMessage.addListener(listener);
-            return () => {
-              portOnMessage.removeListener(listener);
-            };
-          },
-          send(event: string, payload: any, transferable?: Array<any>) {
-            port.postMessage({event, payload}, transferable);
-          },
-        });
-        bridge.addListener('reloadAppForProfiling', () => {
-          localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
-          chrome.devtools.inspectedWindow.eval('window.location.reload();');
-        });
-        bridge.addListener('syncSelectionToNativeElementsPanel', () => {
-          setBrowserSelectionFromReact();
-        });
+        const tabId = chrome.devtools.inspectedWindow.tabId;
 
-        // This flag lets us tip the Store off early that we expect to be profiling.
-        // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
-        // after a user has clicked the "reload and profile" button.
-        let isProfiling = false;
-        let supportsProfiling = false;
-        if (
-          localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
-        ) {
-          supportsProfiling = true;
-          isProfiling = true;
-          localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
-        }
+        registerDevToolsEventLogger('extension');
 
-        if (store !== null) {
-          profilingData = store.profilerStore.profilingData;
-        }
+        function initBridgeAndStore() {
+          const port = chrome.runtime.connect({
+            name: String(tabId),
+          });
+          // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
+          // so it makes no sense to handle it here.
+
+          bridge = new Bridge({
+            listen(fn) {
+              const listener = message => fn(message);
+              // Store the reference so that we unsubscribe from the same object.
+              const portOnMessage = port.onMessage;
+              portOnMessage.addListener(listener);
+              return () => {
+                portOnMessage.removeListener(listener);
+              };
+            },
+            send(event: string, payload: any, transferable?: Array<any>) {
+              port.postMessage({event, payload}, transferable);
+            },
+          });
+          bridge.addListener('reloadAppForProfiling', () => {
+            localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+            chrome.devtools.inspectedWindow.eval('window.location.reload();');
+          });
+          bridge.addListener('syncSelectionToNativeElementsPanel', () => {
+            setBrowserSelectionFromReact();
+          });
 
-        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',
-          );
-        });
+          // This flag lets us tip the Store off early that we expect to be profiling.
+          // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
+          // after a user has clicked the "reload and profile" button.
+          let isProfiling = false;
+          let supportsProfiling = false;
+          if (
+            localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
+          ) {
+            supportsProfiling = true;
+            isProfiling = true;
+            localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
+          }
 
-        store = new Store(bridge, {
-          isProfiling,
-          supportsReloadAndProfile: isChrome,
-          supportsProfiling,
-          // At this time, the scheduling profiler can only parse Chrome performance profiles.
-          supportsSchedulingProfiler: isChrome,
-          supportsTraceUpdates: true,
-        });
-        store.profilerStore.profilingData = profilingData;
-
-        // Initialize the backend only once the Store has been initialized.
-        // Otherwise the Store may miss important initial tree op codes.
-        chrome.devtools.inspectedWindow.eval(
-          `window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
-          function(response, evalError) {
-            if (evalError) {
-              console.error(evalError);
-            }
-          },
-        );
+          if (store !== null) {
+            profilingData = store.profilerStore.profilingData;
+          }
 
-        const viewAttributeSourceFunction = (id, path) => {
-          const rendererID = store.getRendererIDForElement(id);
-          if (rendererID != null) {
-            // Ask the renderer interface to find the specified attribute,
-            // and store it as a global variable on the window.
-            bridge.send('viewAttributeSource', {id, path, rendererID});
+          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',
+            );
+          });
 
-            setTimeout(() => {
-              // Ask Chrome to display the location of the attribute,
-              // assuming the renderer found a match.
-              chrome.devtools.inspectedWindow.eval(`
+          store = new Store(bridge, {
+            isProfiling,
+            supportsReloadAndProfile: isChrome,
+            supportsProfiling,
+            // At this time, the scheduling profiler can only parse Chrome performance profiles.
+            supportsSchedulingProfiler: isChrome,
+            supportsTraceUpdates: true,
+          });
+          store.profilerStore.profilingData = profilingData;
+
+          // Initialize the backend only once the Store has been initialized.
+          // Otherwise the Store may miss important initial tree op codes.
+          chrome.devtools.inspectedWindow.eval(
+            `window.postMessage({
+               source: 'react-devtools-inject-backend',
+               extensionId: "${CURRENT_EXTENSION_ID}"
+             }, '*');`,
+            function(response, evalError) {
+              if (evalError) {
+                console.error(evalError);
+              }
+            },
+          );
+
+          const viewAttributeSourceFunction = (id, path) => {
+            const rendererID = store.getRendererIDForElement(id);
+            if (rendererID != null) {
+              // Ask the renderer interface to find the specified attribute,
+              // and store it as a global variable on the window.
+              bridge.send('viewAttributeSource', {id, path, rendererID});
+
+              setTimeout(() => {
+                // Ask Chrome to display the location of the attribute,
+                // assuming the renderer found a match.
+                chrome.devtools.inspectedWindow.eval(`
                 if (window.$attribute != null) {
                   inspect(window.$attribute);
                 }
               `);
-            }, 100);
-          }
-        };
+              }, 100);
+            }
+          };
 
-        const viewElementSourceFunction = id => {
-          const rendererID = store.getRendererIDForElement(id);
-          if (rendererID != null) {
-            // Ask the renderer interface to determine the component function,
-            // and store it as a global variable on the window
-            bridge.send('viewElementSource', {id, rendererID});
-
-            setTimeout(() => {
-              // Ask Chrome to display the location of the component function,
-              // or a render method if it is a Class (ideally Class instance, not type)
-              // assuming the renderer found one.
-              chrome.devtools.inspectedWindow.eval(`
+          const viewElementSourceFunction = id => {
+            const rendererID = store.getRendererIDForElement(id);
+            if (rendererID != null) {
+              // Ask the renderer interface to determine the component function,
+              // and store it as a global variable on the window
+              bridge.send('viewElementSource', {id, rendererID});
+
+              setTimeout(() => {
+                // Ask Chrome to display the location of the component function,
+                // or a render method if it is a Class (ideally Class instance, not type)
+                // assuming the renderer found one.
+                chrome.devtools.inspectedWindow.eval(`
                 if (window.$type != null) {
                   if (
                     window.$type &&
@@ -213,288 +238,293 @@ function createPanelIfReactLoaded() {
                   }
                 }
               `);
-            }, 100);
-          }
-        };
-
-        let debugIDCounter = 0;
+              }, 100);
+            }
+          };
 
-        // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
-        // never reaches the chrome.runtime.onMessage event listener.
-        let fetchFileWithCaching = null;
-        if (isChrome) {
-          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;
+          let debugIDCounter = 0;
 
-            if (__DEBUG__) {
-              debugID = debugIDCounter++;
-              console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
-            }
+          // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
+          // never reaches the chrome.runtime.onMessage event listener.
+          let fetchFileWithCaching = null;
+          if (isChrome) {
+            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;
 
-            chrome.devtools.network.getHAR(harLog => {
-              for (let i = 0; i < harLog.entries.length; i++) {
-                const entry = harLog.entries[i];
-                if (url === entry.request.url) {
-                  if (__DEBUG__) {
-                    console.log(
-                      `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
-                      url,
-                    );
-                  }
+              if (__DEBUG__) {
+                debugID = debugIDCounter++;
+                console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
+              }
 
-                  entry.getContent(content => {
-                    if (content) {
-                      if (__DEBUG__) {
-                        console.log(
-                          `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
-                        );
-                      }
+              chrome.devtools.network.getHAR(harLog => {
+                for (let i = 0; i < harLog.entries.length; i++) {
+                  const entry = harLog.entries[i];
+                  if (url === entry.request.url) {
+                    if (__DEBUG__) {
+                      console.log(
+                        `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
+                        url,
+                      );
+                    }
 
-                      resolve(content);
-                    } else {
-                      if (__DEBUG__) {
-                        console.log(
-                          `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
-                          content,
-                        );
+                    entry.getContent(content => {
+                      if (content) {
+                        if (__DEBUG__) {
+                          console.log(
+                            `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+                          );
+                        }
+
+                        resolve(content);
+                      } else {
+                        if (__DEBUG__) {
+                          console.log(
+                            `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
+                            content,
+                          );
+                        }
+
+                        // Edge case where getContent() returned null; fall back to fetch.
+                        fetchFromPage(url, resolve, reject);
                       }
+                    });
 
-                      // Edge case where getContent() returned null; fall back to fetch.
-                      fetchFromPage(url, resolve, reject);
-                    }
-                  });
+                    return;
+                  }
+                }
 
-                  return;
+                if (__DEBUG__) {
+                  console.log(
+                    `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
+                  );
                 }
-              }
 
+                // No matching URL found; fall back to fetch.
+                fetchFromPage(url, resolve, reject);
+              });
+            };
+
+            const fetchFromPage = (url, resolve, reject) => {
               if (__DEBUG__) {
-                console.log(
-                  `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
-                );
+                console.log('[main] fetchFromPage()', url);
               }
 
-              // No matching URL found; fall back to fetch.
-              fetchFromPage(url, resolve, reject);
-            });
-          };
-
-          const fetchFromPage = (url, resolve, reject) => {
-            if (__DEBUG__) {
-              console.log('[main] fetchFromPage()', url);
-            }
-
-            function onPortMessage({payload, source}) {
-              if (source === 'react-devtools-content-script') {
-                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;
+              function onPortMessage({payload, source}) {
+                if (source === 'react-devtools-content-script') {
+                  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);
+              chrome.runtime.onMessage.addListener(onPortMessage);
 
-            chrome.devtools.inspectedWindow.eval(`
+              chrome.devtools.inspectedWindow.eval(`
               window.postMessage({
                 source: 'react-devtools-extension',
+                extensionId: "${CURRENT_EXTENSION_ID}"
                 payload: {
                   type: 'fetch-file-with-cache',
                   url: "${url}",
                 },
               });
             `);
-          };
+            };
 
-          // Fetching files from the extension won't make use of the network cache
-          // for resources that have already been loaded by the page.
-          // This helper function allows the extension to request files to be fetched
-          // by the content script (running in the page) to increase the likelihood of a cache hit.
-          fetchFileWithCaching = url => {
-            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);
-            });
+            // Fetching files from the extension won't make use of the network cache
+            // for resources that have already been loaded by the page.
+            // This helper function allows the extension to request files to be fetched
+            // by the content script (running in the page) to increase the likelihood of a cache hit.
+            fetchFileWithCaching = url => {
+              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);
+              });
+            };
+          }
+
+          // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+          const hookNamesModuleLoaderFunction = () =>
+            import(
+              /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+            );
+
+          root = createRoot(document.createElement('div'));
+
+          render = (overrideTab = mostRecentOverrideTab) => {
+            mostRecentOverrideTab = overrideTab;
+            root.render(
+              createElement(DevTools, {
+                bridge,
+                browserTheme: getBrowserTheme(),
+                componentsPortalContainer,
+                enabledInspectedElementContextMenu: true,
+                fetchFileWithCaching,
+                hookNamesModuleLoaderFunction,
+                overrideTab,
+                profilerPortalContainer,
+                showTabBar: false,
+                store,
+                warnIfUnsupportedVersionDetected: true,
+                viewAttributeSourceFunction,
+                viewElementSourceFunction,
+              }),
+            );
           };
-        }
 
-        // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
-        const hookNamesModuleLoaderFunction = () =>
-          import(
-            /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
-          );
+          render();
+        }
 
-        root = createRoot(document.createElement('div'));
-
-        render = (overrideTab = mostRecentOverrideTab) => {
-          mostRecentOverrideTab = overrideTab;
-          root.render(
-            createElement(DevTools, {
-              bridge,
-              browserTheme: getBrowserTheme(),
-              componentsPortalContainer,
-              enabledInspectedElementContextMenu: true,
-              fetchFileWithCaching,
-              hookNamesModuleLoaderFunction,
-              overrideTab,
-              profilerPortalContainer,
-              showTabBar: false,
-              store,
-              warnIfUnsupportedVersionDetected: true,
-              viewAttributeSourceFunction,
-              viewElementSourceFunction,
-            }),
-          );
+        cloneStyleTags = () => {
+          const linkTags = [];
+          // 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,
+                );
+              }
+              linkTags.push(newLinkTag);
+            }
+          }
+          return linkTags;
         };
 
-        render();
-      }
+        initBridgeAndStore();
 
-      cloneStyleTags = () => {
-        const linkTags = [];
-        // 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);
-            }
-            linkTags.push(newLinkTag);
+        function ensureInitialHTMLIsCleared(container) {
+          if (container._hasInitialHTMLBeenCleared) {
+            return;
           }
+          container.innerHTML = '';
+          container._hasInitialHTMLBeenCleared = true;
         }
-        return linkTags;
-      };
 
-      initBridgeAndStore();
-
-      function ensureInitialHTMLIsCleared(container) {
-        if (container._hasInitialHTMLBeenCleared) {
-          return;
+        function setBrowserSelectionFromReact() {
+          // This is currently only called on demand when you press "view DOM".
+          // In the future, if Chrome adds an inspect() that doesn't switch tabs,
+          // we could make this happen automatically when you select another component.
+          chrome.devtools.inspectedWindow.eval(
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+              '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+              'false',
+            (didSelectionChange, evalError) => {
+              if (evalError) {
+                console.error(evalError);
+              }
+            },
+          );
         }
-        container.innerHTML = '';
-        container._hasInitialHTMLBeenCleared = true;
-      }
 
-      function setBrowserSelectionFromReact() {
-        // This is currently only called on demand when you press "view DOM".
-        // In the future, if Chrome adds an inspect() that doesn't switch tabs,
-        // we could make this happen automatically when you select another component.
-        chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-            '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
-            'false',
-          (didSelectionChange, evalError) => {
-            if (evalError) {
-              console.error(evalError);
-            }
-          },
-        );
-      }
-
-      function setReactSelectionFromBrowser() {
-        // When the user chooses a different node in the browser Elements tab,
-        // copy it over to the hook object so that we can sync the selection.
-        chrome.devtools.inspectedWindow.eval(
-          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
-            'false',
-          (didSelectionChange, evalError) => {
-            if (evalError) {
-              console.error(evalError);
-            } else if (didSelectionChange) {
-              // Remember to sync the selection next time we show Components tab.
-              needsToSyncElementSelection = true;
-            }
-          },
-        );
-      }
+        function setReactSelectionFromBrowser() {
+          // When the user chooses a different node in the browser Elements tab,
+          // copy it over to the hook object so that we can sync the selection.
+          chrome.devtools.inspectedWindow.eval(
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+              '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+              'false',
+            (didSelectionChange, evalError) => {
+              if (evalError) {
+                console.error(evalError);
+              } else if (didSelectionChange) {
+                // Remember to sync the selection next time we show Components tab.
+                needsToSyncElementSelection = true;
+              }
+            },
+          );
+        }
 
-      setReactSelectionFromBrowser();
-      chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
         setReactSelectionFromBrowser();
-      });
+        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+          setReactSelectionFromBrowser();
+        });
 
-      let currentPanel = null;
-      let needsToSyncElementSelection = false;
-
-      chrome.devtools.panels.create(
-        isChrome ? '⚛️ Components' : 'Components',
-        '',
-        'panel.html',
-        extensionPanel => {
-          extensionPanel.onShown.addListener(panel => {
-            if (needsToSyncElementSelection) {
-              needsToSyncElementSelection = false;
-              bridge.send('syncSelectionFromNativeElementsPanel');
-            }
+        let currentPanel = null;
+        let needsToSyncElementSelection = false;
+
+        chrome.devtools.panels.create(
+          isChrome ? '⚛️ Components' : 'Components',
+          '',
+          'panel.html',
+          extensionPanel => {
+            extensionPanel.onShown.addListener(panel => {
+              if (needsToSyncElementSelection) {
+                needsToSyncElementSelection = false;
+                bridge.send('syncSelectionFromNativeElementsPanel');
+              }
 
-            if (currentPanel === panel) {
-              return;
-            }
+              if (currentPanel === panel) {
+                return;
+              }
 
-            currentPanel = panel;
-            componentsPortalContainer = panel.container;
+              currentPanel = panel;
+              componentsPortalContainer = panel.container;
 
-            if (componentsPortalContainer != null) {
-              ensureInitialHTMLIsCleared(componentsPortalContainer);
-              render('components');
-              panel.injectStyles(cloneStyleTags);
-              logEvent({event_name: 'selected-components-tab'});
-            }
-          });
-          extensionPanel.onHidden.addListener(panel => {
-            // TODO: Stop highlighting and stuff.
-          });
-        },
-      );
-
-      chrome.devtools.panels.create(
-        isChrome ? '⚛️ Profiler' : 'Profiler',
-        '',
-        'panel.html',
-        extensionPanel => {
-          extensionPanel.onShown.addListener(panel => {
-            if (currentPanel === panel) {
-              return;
-            }
+              if (componentsPortalContainer != null) {
+                ensureInitialHTMLIsCleared(componentsPortalContainer);
+                render('components');
+                panel.injectStyles(cloneStyleTags);
+                logEvent({event_name: 'selected-components-tab'});
+              }
+            });
+            extensionPanel.onHidden.addListener(panel => {
+              // TODO: Stop highlighting and stuff.
+            });
+          },
+        );
 
-            currentPanel = panel;
-            profilerPortalContainer = panel.container;
+        chrome.devtools.panels.create(
+          isChrome ? '⚛️ Profiler' : 'Profiler',
+          '',
+          'panel.html',
+          extensionPanel => {
+            extensionPanel.onShown.addListener(panel => {
+              if (currentPanel === panel) {
+                return;
+              }
 
-            if (profilerPortalContainer != null) {
-              ensureInitialHTMLIsCleared(profilerPortalContainer);
-              render('profiler');
-              panel.injectStyles(cloneStyleTags);
-              logEvent({event_name: 'selected-profiler-tab'});
-            }
-          });
-        },
-      );
+              currentPanel = panel;
+              profilerPortalContainer = panel.container;
 
-      chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
+              if (profilerPortalContainer != null) {
+                ensureInitialHTMLIsCleared(profilerPortalContainer);
+                render('profiler');
+                panel.injectStyles(cloneStyleTags);
+                logEvent({event_name: 'selected-profiler-tab'});
+              }
+            });
+          },
+        );
 
-      // Re-initialize DevTools panel when a new page is loaded.
-      chrome.devtools.network.onNavigated.addListener(function onNavigated() {
-        // Re-initialize saved filters on navigation,
-        // since global values stored on window get reset in this case.
-        syncSavedPreferences();
+        chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
-        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
-        // We can revisit this in the future as a small optimization.
-        flushSync(() => root.unmount());
+        // Re-initialize DevTools panel when a new page is loaded.
+        chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+          // Re-initialize saved filters on navigation,
+          // since global values stored on window get reset in this case.
+          syncSavedPreferences();
 
-        initBridgeAndStore();
+          // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+          // We can revisit this in the future as a small optimization.
+          flushSync(() => root.unmount());
+
+          initBridgeAndStore();
+        });
       });
     },
   );
diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 3b9302200961..06816532838f 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -57,7 +57,7 @@ Some changes requiring testing in the browser extension (e.g. like "named hooks"
 ```sh
 cd <react-repo>
 cd packages/react-devtools-extensions
-yarn build:chrome && yarn test:chrome
+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

From 23b7dfeff31abbf2ce69452e46075c5cb6da4a31 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 15 Oct 2021 08:03:18 -0400
Subject: [PATCH 0955/1603] Enable scheduling profiler for RN FB profiling
 builds (#22566)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index c86d00217cc9..15a8c29f7179 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -20,7 +20,7 @@ export const {enablePersistentOffscreenHostContainer} = dynamicFlags;
 
 // The rest of the flags are static for better dead code elimination.
 export const enableDebugTracing = false;
-export const enableSchedulingProfiler = true;
+export const enableSchedulingProfiler = __PROFILE__;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;

From 9d3d03025cf2474286ee5d9ba642f3ea9377a435 Mon Sep 17 00:00:00 2001
From: Gabriel Trompiz <gab.tc@icloud.com>
Date: Fri, 15 Oct 2021 08:16:43 -0500
Subject: [PATCH 0956/1603] Reattachment of the splash page event listeners
 (#22558) (#22560)

---
 .../react-devtools-core/src/standalone.js     | 10 ++++
 packages/react-devtools/app.html              | 50 +++++++++++--------
 2 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index fae70937ea0a..1ef01e8ffc02 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -42,11 +42,13 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 installHook(window);
 
 export type StatusListener = (message: string) => void;
+export type OnDisconnectedCallback = () => void;
 
 let node: HTMLElement = ((null: any): HTMLElement);
 let nodeWaitingToConnectHTML: string = '';
 let projectRoots: Array<string> = [];
 let statusListener: StatusListener = (message: string) => {};
+let disconnectedCallback: OnDisconnectedCallback = () => {};
 
 // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
 function hookNamesModuleLoaderFunction() {
@@ -73,6 +75,11 @@ function setStatusListener(value: StatusListener) {
   return DevtoolsUI;
 }
 
+function setDisconnectedCallback(value: OnDisconnectedCallback) {
+  disconnectedCallback = value;
+  return DevtoolsUI;
+}
+
 let bridge: FrontendBridge | null = null;
 let store: Store | null = null;
 let root = null;
@@ -153,6 +160,8 @@ function onDisconnected() {
   safeUnmount();
 
   node.innerHTML = nodeWaitingToConnectHTML;
+
+  disconnectedCallback();
 }
 
 function onError({code, message}) {
@@ -389,6 +398,7 @@ const DevtoolsUI = {
   setContentDOMNode,
   setProjectRoots,
   setStatusListener,
+  setDisconnectedCallback,
   startServer,
   openProfiler,
 };
diff --git a/packages/react-devtools/app.html b/packages/react-devtools/app.html
index fc631cea1ca6..b60ef3c094b8 100644
--- a/packages/react-devtools/app.html
+++ b/packages/react-devtools/app.html
@@ -182,11 +182,9 @@
       const server = defaultPort ? `${protocol}://${host}` : `${protocol}://${host}:${port}`;
       const serverIp = defaultPort ? `${protocol}://${localIp}` : `${protocol}://${localIp}:${port}`;
       const $ = document.querySelector.bind(document);
-      const $promptDiv = $("#box-content-prompt");
-      const $confirmationDiv = $("#box-content-confirmation");
-
+      
       let timeoutID;
-
+      
       function selectAllAndCopy(event) {
         const element = event.target;
         if (window.getSelection) {
@@ -196,7 +194,9 @@
           selection.removeAllRanges();
           selection.addRange(range);
           clipboard.writeText(event.target.textContent);
-
+          
+          const $promptDiv = $("#box-content-prompt");
+          const $confirmationDiv = $("#box-content-confirmation");
           $promptDiv.classList.add('hidden');
           $confirmationDiv.classList.remove('hidden');
 
@@ -217,24 +217,29 @@
           .openProfiler();
       }
 
-      const link = $('#rn-help-link');
-      link.addEventListener('click', event => {
-        event.preventDefault();
-        require('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);
+      function attachListeners() {
+        const link = $('#rn-help-link');
+        link.addEventListener('click', event => {
+          event.preventDefault();
+          require('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);
+      };
 
-      const $profiler = $("#profiler");
-      $profiler.addEventListener('click', openProfiler);
+      // Initially attach the listeners
+      attachListeners();
 
       let devtools;
       try {
@@ -248,6 +253,7 @@
       window.devtools = devtools;
       window.server = devtools
         .setContentDOMNode(document.getElementById("container"))
+        .setDisconnectedCallback(attachListeners)
         .setStatusListener(function(status) {
           const element = document.getElementById("loading-status");
           if (element) {

From 930c9e7eeb4c9721e1b8dee074c2eef4d1eae5dc Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 11:27:13 -0400
Subject: [PATCH 0957/1603] Show warning in UI when duplicate installations of
 DevTools extension are detected (#22563)

---
 .../src/background.js                         | 16 ++++--
 .../src/checkForDuplicateInstallations.js     | 14 ++---
 .../src/constants.js                          |  4 +-
 .../react-devtools-extensions/src/main.js     | 35 +++++++++++-
 .../src/devtools/views/DevTools.js            |  4 ++
 .../views/DuplicateInstallationDialog.js      | 55 +++++++++++++++++++
 6 files changed, 115 insertions(+), 13 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index 85595d26010b..e8ff0f3f1620 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -1,12 +1,19 @@
-/* global chrome */
+// @flow strict-local
 
 'use strict';
 
-const ports = {};
+declare var chrome: any;
+
+const ports: {
+  [tab: string]: {|devtools: any, 'content-script': any|},
+} = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
-import {EXTENSION_INSTALL_CHECK_MESSAGE} from './constants';
+import {
+  EXTENSION_INSTALL_CHECK,
+  SHOW_DUPLICATE_EXTENSION_WARNING,
+} from './constants';
 
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
@@ -120,8 +127,9 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
 
 chrome.runtime.onMessageExternal.addListener(
   (request, sender, sendResponse) => {
-    if (request === EXTENSION_INSTALL_CHECK_MESSAGE) {
+    if (request === EXTENSION_INSTALL_CHECK) {
       sendResponse(true);
+      chrome.runtime.sendMessage(SHOW_DUPLICATE_EXTENSION_WARNING);
     }
   },
 );
diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
index e54476283cc6..1ebafe50b883 100644
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -11,13 +11,13 @@ declare var chrome: any;
 
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {
-  EXTENSION_INSTALL_CHECK_MESSAGE,
+  EXTENSION_INSTALL_CHECK,
   EXTENSION_INSTALLATION_TYPE,
   INTERNAL_EXTENSION_ID,
   LOCAL_EXTENSION_ID,
 } from './constants';
 
-const UNRECOGNIZED_EXTENSION_WARNING =
+const UNRECOGNIZED_EXTENSION_ERROR =
   'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
   'Please make sure you only have a single version of the extension installed or enabled. ' +
   'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
@@ -68,9 +68,9 @@ export function checkForDuplicateInstallations(callback: boolean => void) {
       // detect if there are other installations of DevTools present.
       // In this case, assume there are no duplicate exensions and show a warning about
       // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      console.error(UNRECOGNIZED_EXTENSION_ERROR);
       chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
       );
       callback(false);
       break;
@@ -80,9 +80,9 @@ export function checkForDuplicateInstallations(callback: boolean => void) {
       // are other installations of DevTools present.
       // In this case, assume there are no duplicate exensions and show a warning about
       // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_WARNING);
+      console.error(UNRECOGNIZED_EXTENSION_ERROR);
       chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_WARNING}")`,
+        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
       );
       callback(false);
       break;
@@ -105,7 +105,7 @@ function checkForInstalledExtension(extensionId: string): Promise<boolean> {
   return new Promise(resolve => {
     chrome.runtime.sendMessage(
       extensionId,
-      EXTENSION_INSTALL_CHECK_MESSAGE,
+      EXTENSION_INSTALL_CHECK,
       response => {
         if (__DEBUG__) {
           console.log(
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
index 5e85e4aec40e..310bbaca1156 100644
--- a/packages/react-devtools-extensions/src/constants.js
+++ b/packages/react-devtools-extensions/src/constants.js
@@ -11,7 +11,9 @@ declare var chrome: any;
 
 export const CURRENT_EXTENSION_ID = chrome.runtime.id;
 
-export const EXTENSION_INSTALL_CHECK_MESSAGE = 'extension-install-check';
+export const EXTENSION_INSTALL_CHECK = 'extension-install-check';
+export const SHOW_DUPLICATE_EXTENSION_WARNING =
+  'show-duplicate-extension-warning';
 
 export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
 export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 8280158e1db7..5203b511035d 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -22,7 +22,11 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
-import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
+import {
+  CURRENT_EXTENSION_ID,
+  EXTENSION_INSTALLATION_TYPE,
+  SHOW_DUPLICATE_EXTENSION_WARNING,
+} from './constants';
 import {checkForDuplicateInstallations} from './checkForDuplicateInstallations';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
@@ -108,11 +112,39 @@ function createPanelIfReactLoaded() {
         let mostRecentOverrideTab = null;
         let render = null;
         let root = null;
+        let warnIfDuplicateInstallation = false;
 
         const tabId = chrome.devtools.inspectedWindow.tabId;
 
         registerDevToolsEventLogger('extension');
 
+        function onDuplicateExtensionMessage(message) {
+          if (message === SHOW_DUPLICATE_EXTENSION_WARNING) {
+            chrome.runtime.onMessage.removeListener(
+              onDuplicateExtensionMessage,
+            );
+
+            if (warnIfDuplicateInstallation === true) {
+              return;
+            }
+            warnIfDuplicateInstallation = true;
+            const errorMessage =
+              'React Developer Tools: We detected that there are multiple versions of React Developer Tools ' +
+              'installed and enabled in your browser at the same time, which will cause ' +
+              'issues while using the extension. ' +
+              'Please ensure that you have installed and enabled only a single ' +
+              'version of React Developer Tools before proceeding.';
+            console.error(errorMessage);
+            chrome.devtools.inspectedWindow.eval(
+              `console.error("${errorMessage}")`,
+            );
+            if (render != null) {
+              render();
+            }
+          }
+        }
+        chrome.runtime.onMessage.addListener(onDuplicateExtensionMessage);
+
         function initBridgeAndStore() {
           const port = chrome.runtime.connect({
             name: String(tabId),
@@ -374,6 +406,7 @@ function createPanelIfReactLoaded() {
                 hookNamesModuleLoaderFunction,
                 overrideTab,
                 profilerPortalContainer,
+                warnIfDuplicateInstallation,
                 showTabBar: false,
                 store,
                 warnIfUnsupportedVersionDetected: true,
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 781ad9d902f6..8f1b6a22c11b 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -34,6 +34,7 @@ import {SchedulingProfilerContextController} from 'react-devtools-scheduling-pro
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
+import DuplicateInstallationDialog from './DuplicateInstallationDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
@@ -73,6 +74,7 @@ export type Props = {|
   enabledInspectedElementContextMenu?: boolean,
   showTabBar?: boolean,
   store: Store,
+  warnIfDuplicateInstallation?: boolean,
   warnIfLegacyBackendDetected?: boolean,
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
@@ -132,6 +134,7 @@ export default function DevTools({
   profilerPortalContainer,
   showTabBar = false,
   store,
+  warnIfDuplicateInstallation = false,
   warnIfLegacyBackendDetected = false,
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
@@ -319,6 +322,7 @@ export default function DevTools({
                 </ViewElementSourceContext.Provider>
               </SettingsContextController>
               <UnsupportedBridgeProtocolDialog />
+              {warnIfDuplicateInstallation && <DuplicateInstallationDialog />}
               {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
               {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
             </ModalDialogContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js b/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
new file mode 100644
index 000000000000..12a32ce4b7f4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ */
+
+import * as React from 'react';
+import {Fragment, useContext, useEffect} from 'react';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+import {ModalDialogContext} from './ModalDialog';
+
+export default function DuplicateInstallationDialog(_: {||}) {
+  const {dispatch} = useContext(ModalDialogContext);
+
+  useEffect(() => {
+    dispatch({
+      canBeDismissed: false,
+      id: 'DuplicateInstallationDialog',
+      type: 'SHOW',
+      title: 'Duplicate Installations of DevTools Detected',
+      content: <DialogContent />,
+    });
+  }, []);
+  return null;
+}
+
+function DialogContent(_: {||}) {
+  return (
+    <Fragment>
+      <p>
+        We detected that there are multiple versions of React Developer Tools
+        installed and enabled in your browser at the same time, which will cause
+        issues while using the extension.
+      </p>
+      {isInternalFacebookBuild ? (
+        <p>
+          Before proceeding, please ensure that the only enabled version of
+          React Developer Tools is the internal (Chef-installed) version. To
+          manage your extensions, visit the <code>about://extensions</code> page
+          in your browser.
+        </p>
+      ) : (
+        <p>
+          Please ensure that you have installed and enabled only a single
+          version of React Developer Tools before proceeding. To manage your
+          extensions, visit the <code>about://extensions</code> page in your
+          browser.
+        </p>
+      )}
+    </Fragment>
+  );
+}

From 1def0a4244fa0b221ba39e9bce9bc3b6d63220e3 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 12:50:00 -0400
Subject: [PATCH 0958/1603] DevTools prepare release script resets patch
 version when bumping minor (#22568)

---
 scripts/devtools/prepare-release.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/devtools/prepare-release.js b/scripts/devtools/prepare-release.js
index 0fc8fc841f55..75e9615dc838 100755
--- a/scripts/devtools/prepare-release.js
+++ b/scripts/devtools/prepare-release.js
@@ -38,7 +38,7 @@ async function main() {
   const {major, minor, patch} = semver(previousVersion);
   const nextVersion =
     releaseType === 'minor'
-      ? `${major}.${minor + 1}.${patch}`
+      ? `${major}.${minor + 1}.0`
       : `${major}.${minor}.${patch + 1}`;
 
   updatePackageVersions(previousVersion, nextVersion);

From e5f486b5a82c58001e526ade72525434dc1afca9 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 12:50:17 -0400
Subject: [PATCH 0959/1603] React DevTools 4.19.2 -> 4.20.2 (#22569)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 +-
 .../edge/manifest.json                        |  4 +-
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 .../package.json                              |  2 +-
 packages/react-devtools/CHANGELOG.md          | 15 +++++
 packages/react-devtools/package.json          |  4 +-
 scripts/devtools/yarn.lock                    | 57 +++++++++++++++++++
 9 files changed, 82 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 06d2c5526a8c..05192be2d044 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 9b76afb84586..fdbf43719689 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.19.2",
-  "version_name": "4.19.2",
+  "version": "4.20.0",
+  "version_name": "4.20.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 31dac5b50f5b..b5fd17dcb26f 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.19.2",
-  "version_name": "4.19.2",
+  "version": "4.20.0",
+  "version_name": "4.20.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 27f17a8b74db..4da3c73a5d3c 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index e05417ee8f41..16564ebc79b2 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 3bff9a9b93d9..fb56eb8c0861 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 033c714bb54c..1f42ca57c1b6 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 71d0dfbeb14c..16b47c5e0f20 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.19.2",
+  "version": "4.20.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.19.2",
+    "react-devtools-core": "4.20.0",
     "update-notifier": "^2.1.0"
   }
 }
diff --git a/scripts/devtools/yarn.lock b/scripts/devtools/yarn.lock
index 37c759ab79f0..fd79a7138bdb 100644
--- a/scripts/devtools/yarn.lock
+++ b/scripts/devtools/yarn.lock
@@ -82,6 +82,15 @@ chardet@^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"
@@ -140,6 +149,14 @@ color-name@~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"
@@ -259,6 +276,11 @@ is-unicode-supported@^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"
@@ -293,6 +315,14 @@ log-update@^2.3.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"
@@ -320,6 +350,11 @@ native-or-bluebird@^1.1.2:
   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"
@@ -364,6 +399,11 @@ progress-estimator@^0.2.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"
@@ -372,6 +412,11 @@ prompt-promise@^1.0.3:
     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"
@@ -520,6 +565,13 @@ wcwidth@^1.0.1:
   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"
@@ -527,3 +579,8 @@ wrap-ansi@^3.0.1:
   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=

From b72dc8e9300f5ae997f7f5cfcd79b604cca3df0c Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Fri, 15 Oct 2021 17:18:20 -0400
Subject: [PATCH 0960/1603] Only show DevTools warning about unrecognized build
 in Chrome (#22571)

---
 .../src/checkForDuplicateInstallations.js     | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
index 1ebafe50b883..d86cac770929 100644
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -10,6 +10,7 @@
 declare var chrome: any;
 
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {getBrowserName} from './utils';
 import {
   EXTENSION_INSTALL_CHECK,
   EXTENSION_INSTALLATION_TYPE,
@@ -17,6 +18,8 @@ import {
   LOCAL_EXTENSION_ID,
 } from './constants';
 
+const IS_CHROME = getBrowserName() === 'Chrome';
+
 const UNRECOGNIZED_EXTENSION_ERROR =
   'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
   'Please make sure you only have a single version of the extension installed or enabled. ' +
@@ -76,14 +79,17 @@ export function checkForDuplicateInstallations(callback: boolean => void) {
       break;
     }
     case 'unknown': {
-      // If we don't know how this extension was built, we can't reliably detect if there
-      // are other installations of DevTools present.
-      // In this case, assume there are no duplicate exensions and show a warning about
-      // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_ERROR);
-      chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
-      );
+      // TODO: Support duplicate extension detection in other browsers
+      if (IS_CHROME) {
+        // If we don't know how this extension was built, we can't reliably detect if there
+        // are other installations of DevTools present.
+        // In this case, assume there are no duplicate exensions and show a warning about
+        // potential conflicts.
+        console.error(UNRECOGNIZED_EXTENSION_ERROR);
+        chrome.devtools.inspectedWindow.eval(
+          `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
+        );
+      }
       callback(false);
       break;
     }

From 163e81c1f88a47749e092f2d5b31b7c919f07de8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 18 Oct 2021 11:27:26 -0400
Subject: [PATCH 0961/1603] Support disabling spurious act warnings with a
 global environment flag (#22561)

* Extract `act` environment check into function

`act` checks the environment to determine whether to fire a warning.
We're changing how this check works in React 18. As a first step, this
refactors the logic into a single function. No behavior changes yet.

* Use IS_REACT_ACT_ENVIRONMENT to disable warnings

If `IS_REACT_ACT_ENVIRONMENT` is set to `false`, we will suppress
any `act` warnings. Otherwise, the behavior of `act` is the same as in
React 17: if `jest` is defined, it warns.

In concurrent mode, the plan is to remove the `jest` check and only warn
if `IS_REACT_ACT_ENVIRONMENT` is true. I have not implemented that
part yet.
---
 .eslintrc.js                                  |  1 +
 packages/jest-react/src/internalAct.js        |  9 ++---
 .../src/__tests__/ReactTestUtilsAct-test.js   | 34 ++++++++++++++++++
 .../react-reconciler/src/ReactFiberAct.new.js | 35 +++++++++++++++++++
 .../react-reconciler/src/ReactFiberAct.old.js | 35 +++++++++++++++++++
 .../src/ReactFiberHooks.new.js                | 13 +++----
 .../src/ReactFiberHooks.old.js                | 13 +++----
 .../src/ReactFiberWorkLoop.new.js             | 19 ++--------
 .../src/ReactFiberWorkLoop.old.js             | 19 ++--------
 packages/react/src/ReactCurrentActQueue.js    |  6 ----
 scripts/rollup/validate/eslintrc.cjs.js       |  3 ++
 scripts/rollup/validate/eslintrc.cjs2015.js   |  3 ++
 scripts/rollup/validate/eslintrc.esm.js       |  3 ++
 scripts/rollup/validate/eslintrc.fb.js        |  3 ++
 scripts/rollup/validate/eslintrc.rn.js        |  3 ++
 scripts/rollup/validate/eslintrc.umd.js       |  3 ++
 16 files changed, 142 insertions(+), 60 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberAct.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberAct.old.js

diff --git a/.eslintrc.js b/.eslintrc.js
index d464e83b453a..b129af49d3d6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -279,5 +279,6 @@ module.exports = {
     __VARIANT__: true,
     gate: true,
     trustedTypes: true,
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
 };
diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js
index 486d84c31f64..9e6bf0e4fd66 100644
--- a/packages/jest-react/src/internalAct.js
+++ b/packages/jest-react/src/internalAct.js
@@ -18,9 +18,7 @@ import type {Thenable} from 'shared/ReactTypes';
 
 import * as Scheduler from 'scheduler/unstable_mock';
 
-import ReactSharedInternals from 'shared/ReactSharedInternals';
 import enqueueTask from 'shared/enqueueTask';
-const {ReactCurrentActQueue} = ReactSharedInternals;
 
 let actingUpdatesScopeDepth = 0;
 
@@ -37,15 +35,18 @@ export function act(scope: () => Thenable<mixed> | void) {
     );
   }
 
+  const previousIsActEnvironment = global.IS_REACT_ACT_ENVIRONMENT;
   const previousActingUpdatesScopeDepth = actingUpdatesScopeDepth;
   actingUpdatesScopeDepth++;
   if (__DEV__ && actingUpdatesScopeDepth === 1) {
-    ReactCurrentActQueue.disableActWarning = true;
+    // 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;
   }
 
   const unwind = () => {
     if (__DEV__ && actingUpdatesScopeDepth === 1) {
-      ReactCurrentActQueue.disableActWarning = false;
+      global.IS_REACT_ACT_ENVIRONMENT = previousIsActEnvironment;
     }
     actingUpdatesScopeDepth--;
 
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index a47e234534db..f5e33d789891 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -273,6 +273,40 @@ function runActTests(label, render, unmount, rerender) {
         ]);
       });
 
+      // @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
+        expect(() => setState(1)).toErrorDev(
+          'An update to App inside a test was not wrapped in act(...)',
+        );
+
+        // 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.
+        expect(() => setState(3)).toErrorDev(
+          'An update to App inside a test was not wrapped in act(...)',
+        );
+      });
+
       describe('fake timers', () => {
         beforeEach(() => {
           jest.useFakeTimers();
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
new file mode 100644
index 000000000000..4338a7d5cd45
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber.new';
+import {warnsIfNotActing} from './ReactFiberHostConfig';
+
+export function isActEnvironment(fiber: Fiber) {
+  if (__DEV__) {
+    const isReactActEnvironmentGlobal =
+      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
+    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
+    // $FlowExpectedError - Flow doesn't know about jest
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing &&
+      jestIsDefined &&
+      // Legacy mode 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.
+      isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
new file mode 100644
index 000000000000..e477024a858f
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactFiber.old';
+import {warnsIfNotActing} from './ReactFiberHostConfig';
+
+export function isActEnvironment(fiber: Fiber) {
+  if (__DEV__) {
+    const isReactActEnvironmentGlobal =
+      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
+    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
+    // $FlowExpectedError - Flow doesn't know about jest
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing &&
+      jestIsDefined &&
+      // Legacy mode 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.
+      isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index b66b62c9ade7..afaebd20a526 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -118,6 +118,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {isActEnvironment} from './ReactFiberAct.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1678,8 +1679,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -1709,8 +1709,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -2193,8 +2192,7 @@ function dispatchReducerAction<S, A>(
     enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
@@ -2279,8 +2277,7 @@ function dispatchSetState<S, A>(
       }
     }
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index af21b5f6f9da..03df5b1444e6 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -118,6 +118,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {isActEnvironment} from './ReactFiberAct.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1678,8 +1679,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -1709,8 +1709,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-    if ('undefined' !== typeof jest) {
+    if (isActEnvironment(currentlyRenderingFiber)) {
       warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
     }
   }
@@ -2193,8 +2192,7 @@ function dispatchReducerAction<S, A>(
     enqueueUpdate(fiber, queue, update, lane);
 
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
@@ -2279,8 +2277,7 @@ function dispatchSetState<S, A>(
       }
     }
     if (__DEV__) {
-      // $FlowExpectedError - jest isn't a global, and isn't recognized outside of tests
-      if ('undefined' !== typeof jest) {
+      if (isActEnvironment(fiber)) {
         warnIfNotCurrentlyActingUpdatesInDev(fiber);
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 884f8cc22aa5..89286bd57385 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -84,7 +84,6 @@ import {
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
-  warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
   getCurrentEventPriority,
@@ -2816,15 +2815,8 @@ function shouldForceFlushFallbacksInDEV() {
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
-      ReactCurrentActQueue.current === null &&
-      // Our internal tests use a custom implementation of `act` that works by
-      // mocking the Scheduler package. Disable the `act` warning.
-      // TODO: Maybe the warning should be disabled by default, and then turned
-      // on at the testing frameworks layer? Instead of what we do now, which
-      // is check if a `jest` global is defined.
-      ReactCurrentActQueue.disableActWarning === false
+      ReactCurrentActQueue.current === null
     ) {
       console.error(
         'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@@ -2846,15 +2838,8 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
 function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       executionContext === NoContext &&
-      ReactCurrentActQueue.current === null &&
-      // Our internal tests use a custom implementation of `act` that works by
-      // mocking the Scheduler package. Disable the `act` warning.
-      // TODO: Maybe the warning should be disabled by default, and then turned
-      // on at the testing frameworks layer? Instead of what we do now, which
-      // is check if a `jest` global is defined.
-      ReactCurrentActQueue.disableActWarning === false
+      ReactCurrentActQueue.current === null
     ) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index db7a3de837b4..d5cb23483d2d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -84,7 +84,6 @@ import {
   scheduleTimeout,
   cancelTimeout,
   noTimeout,
-  warnsIfNotActing,
   afterActiveInstanceBlur,
   clearContainer,
   getCurrentEventPriority,
@@ -2816,15 +2815,8 @@ function shouldForceFlushFallbacksInDEV() {
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
-      ReactCurrentActQueue.current === null &&
-      // Our internal tests use a custom implementation of `act` that works by
-      // mocking the Scheduler package. Disable the `act` warning.
-      // TODO: Maybe the warning should be disabled by default, and then turned
-      // on at the testing frameworks layer? Instead of what we do now, which
-      // is check if a `jest` global is defined.
-      ReactCurrentActQueue.disableActWarning === false
+      ReactCurrentActQueue.current === null
     ) {
       console.error(
         'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
@@ -2846,15 +2838,8 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
 function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (
-      warnsIfNotActing === true &&
       executionContext === NoContext &&
-      ReactCurrentActQueue.current === null &&
-      // Our internal tests use a custom implementation of `act` that works by
-      // mocking the Scheduler package. Disable the `act` warning.
-      // TODO: Maybe the warning should be disabled by default, and then turned
-      // on at the testing frameworks layer? Instead of what we do now, which
-      // is check if a `jest` global is defined.
-      ReactCurrentActQueue.disableActWarning === false
+      ReactCurrentActQueue.current === null
     ) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
diff --git a/packages/react/src/ReactCurrentActQueue.js b/packages/react/src/ReactCurrentActQueue.js
index 694907a10335..690f2568c418 100644
--- a/packages/react/src/ReactCurrentActQueue.js
+++ b/packages/react/src/ReactCurrentActQueue.js
@@ -11,12 +11,6 @@ type RendererTask = boolean => RendererTask | null;
 
 const ReactCurrentActQueue = {
   current: (null: null | Array<RendererTask>),
-  // Our internal tests use a custom implementation of `act` that works by
-  // mocking the Scheduler package. Use this field to disable the `act` warning.
-  // TODO: Maybe the warning should be disabled by default, and then turned
-  // on at the testing frameworks layer? Instead of what we do now, which
-  // is check if a `jest` global is defined.
-  disableActWarning: (false: boolean),
 
   // Used to reproduce behavior of `batchedUpdates` in legacy mode.
   isBatchingLegacy: false,
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 12b8931f0663..0adb5a197dd1 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -42,6 +42,9 @@ module.exports = {
     // jest
     expect: true,
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index d94b4bc4a02b..721dd9b026bf 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -42,6 +42,9 @@ module.exports = {
     // jest
     expect: true,
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 2015,
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index be4dbf621bf4..bbc94a7f4ee2 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -42,6 +42,9 @@ module.exports = {
     // jest
     expect: true,
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 2017,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index 5621d93f0f90..bd5881ca4753 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -38,6 +38,9 @@ module.exports = {
 
     // jest
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index a20cdeb4a37e..0f2d7f808da8 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -34,6 +34,9 @@ module.exports = {
 
     // jest
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 95ef9550dd6a..2077eec02948 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -47,6 +47,9 @@ module.exports = {
 
     // jest
     jest: true,
+
+    // act
+    IS_REACT_ACT_ENVIRONMENT: true,
   },
   parserOptions: {
     ecmaVersion: 5,

From 996da67b2991f480b6219471e38aeaa7280bd00c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 18 Oct 2021 11:59:18 -0400
Subject: [PATCH 0962/1603] Replace global `jest` heuristic with
 `IS_REACT_ACT_ENVIRONMENT` (#22562)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove `jest` global check in concurrent roots

In concurrent mode, instead of checking `jest`, we check the new
`IS_REACT_ACT_ENVIRONMENT` global. The default behavior is `false`.

Legacy mode behavior is unchanged.

React's own internal test suite use a custom version of `act` that works
by mocking the Scheduler — rather than the "real" act used publicly. So
we don't enable the flag in our repo.

* Warn if `act` is called in wrong environment

Adds a warning if `act` is called but `IS_REACT_ACT_ENVIRONMENT` is not
enabled. The goal is to prompt users to correctly configure their
testing environment, so that if they forget to use `act` in a different
test, we can detect and warn about.

It's expected that the environment flag will be configured by the
testing framework. For example, a Jest plugin. We will link to the
relevant documentation page, once it exists.

The warning only fires in concurrent mode. Legacy roots will keep the
existing behavior.
---
 .../__tests__/preprocessData-test.internal.js |   2 +
 .../src/__tests__/inspectedElement-test.js    |   2 +
 .../ReactDOMNativeEventHeuristic-test.js      |  26 +---
 .../src/__tests__/ReactTestUtilsAct-test.js   |   2 +
 .../react-reconciler/src/ReactFiberAct.new.js |  43 ++++--
 .../react-reconciler/src/ReactFiberAct.old.js |  43 ++++--
 .../__tests__/DebugTracing-test.internal.js   |   2 +
 .../src/__tests__/ReactActWarnings-test.js    | 130 ++++++++++++++++++
 .../SchedulingProfilerLabels-test.internal.js |   2 +
 9 files changed, 205 insertions(+), 47 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactActWarnings-test.js

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index e24611e9daea..e458f8060f84 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -17,6 +17,8 @@ import {
 } from '../../constants';
 import REACT_VERSION from 'shared/ReactVersion';
 
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
 describe('getLanesFromTransportDecimalBitmask', () => {
   it('should return array of lane numbers from bitmask string', () => {
     expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 68d014de3ad4..be5a85239653 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -38,6 +38,8 @@ describe('InspectedElement', () => {
   let ErrorBoundary;
   let errorBoundaryInstance;
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 702f213d7a2e..94c5fe35290b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -76,9 +76,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // Dispatch a click event on the Disable-button.
     const firstEvent = document.createEvent('Event');
     firstEvent.initEvent('click', true, true);
-    expect(() =>
-      dispatchAndSetCurrentEvent(disableButton, firstEvent),
-    ).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+    dispatchAndSetCurrentEvent(disableButton, firstEvent);
 
     // Discrete events should be flushed in a microtask.
     // Verify that the second button was removed.
@@ -134,9 +132,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // Dispatch a click event on the Disable-button.
     const firstEvent = document.createEvent('Event');
     firstEvent.initEvent('click', true, true);
-    expect(() => {
-      dispatchAndSetCurrentEvent(disableButton, firstEvent);
-    }).toErrorDev(['An update to Form inside a test was not wrapped in 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.
@@ -196,9 +192,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     // Dispatch a click event on the Enable-button.
     const firstEvent = document.createEvent('Event');
     firstEvent.initEvent('click', true, true);
-    expect(() => {
-      dispatchAndSetCurrentEvent(enableButton, firstEvent);
-    }).toErrorDev(['An update to Form inside a test was not wrapped in act']);
+    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.
@@ -344,9 +338,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     });
     expect(container.textContent).toEqual('Count: 0');
 
-    // Ignore act warning. We can't use act because it forces batched updates.
-    spyOnDev(console, 'error');
-
     const pressEvent = document.createEvent('Event');
     pressEvent.initEvent('click', true, true);
     dispatchAndSetCurrentEvent(target.current, pressEvent);
@@ -355,17 +346,6 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     await null;
     // If this is 2, that means the `setCount` calls were not batched.
     expect(container.textContent).toEqual('Count: 1');
-
-    // Assert that the `act` warnings were the only ones that fired.
-    if (__DEV__) {
-      expect(console.error).toHaveBeenCalledTimes(2);
-      expect(console.error.calls.argsFor(0)[0]).toContain(
-        'was not wrapped in act',
-      );
-      expect(console.error.calls.argsFor(1)[0]).toContain(
-        'was not wrapped in act',
-      );
-    }
   });
 
   it('should not flush discrete events at the end of outermost batchedUpdates', async () => {
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index f5e33d789891..d0992dce53d4 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -16,6 +16,8 @@ let container;
 
 jest.useRealTimers();
 
+global.IS_REACT_ACT_ENVIRONMENT = true;
+
 function sleep(period) {
   return new Promise(resolve => {
     setTimeout(() => {
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
index 4338a7d5cd45..18055e7c738c 100644
--- a/packages/react-reconciler/src/ReactFiberAct.new.js
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -8,7 +8,13 @@
  */
 
 import type {Fiber} from './ReactFiber.new';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
 import {warnsIfNotActing} from './ReactFiberHostConfig';
+import {ConcurrentMode} from './ReactTypeOfMode';
+
+const {ReactCurrentActQueue} = ReactSharedInternals;
 
 export function isActEnvironment(fiber: Fiber) {
   if (__DEV__) {
@@ -18,18 +24,31 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
-    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
-    // $FlowExpectedError - Flow doesn't know about jest
-    const jestIsDefined = typeof jest !== 'undefined';
-    return (
-      warnsIfNotActing &&
-      jestIsDefined &&
-      // Legacy mode 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.
-      isReactActEnvironmentGlobal !== false
-    );
+    if (fiber.mode & ConcurrentMode) {
+      if (
+        !isReactActEnvironmentGlobal &&
+        ReactCurrentActQueue.current !== null
+      ) {
+        // TODO: Include link to relevant documentation page.
+        console.error(
+          'The current testing environment is not configured to support ' +
+            'act(...)',
+        );
+      }
+      return isReactActEnvironmentGlobal;
+    } else {
+      // 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.
+      // $FlowExpectedError - Flow doesn't know about jest
+      const jestIsDefined = typeof jest !== 'undefined';
+      return (
+        warnsIfNotActing &&
+        jestIsDefined &&
+        isReactActEnvironmentGlobal !== false
+      );
+    }
   }
   return false;
 }
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
index e477024a858f..ddae518dcb63 100644
--- a/packages/react-reconciler/src/ReactFiberAct.old.js
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -8,7 +8,13 @@
  */
 
 import type {Fiber} from './ReactFiber.old';
+
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
 import {warnsIfNotActing} from './ReactFiberHostConfig';
+import {ConcurrentMode} from './ReactTypeOfMode';
+
+const {ReactCurrentActQueue} = ReactSharedInternals;
 
 export function isActEnvironment(fiber: Fiber) {
   if (__DEV__) {
@@ -18,18 +24,31 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // TODO: Only check `jest` in legacy mode. In concurrent mode, this
-    // heuristic is replaced by IS_REACT_ACT_ENVIRONMENT.
-    // $FlowExpectedError - Flow doesn't know about jest
-    const jestIsDefined = typeof jest !== 'undefined';
-    return (
-      warnsIfNotActing &&
-      jestIsDefined &&
-      // Legacy mode 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.
-      isReactActEnvironmentGlobal !== false
-    );
+    if (fiber.mode & ConcurrentMode) {
+      if (
+        !isReactActEnvironmentGlobal &&
+        ReactCurrentActQueue.current !== null
+      ) {
+        // TODO: Include link to relevant documentation page.
+        console.error(
+          'The current testing environment is not configured to support ' +
+            'act(...)',
+        );
+      }
+      return isReactActEnvironmentGlobal;
+    } else {
+      // 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.
+      // $FlowExpectedError - Flow doesn't know about jest
+      const jestIsDefined = typeof jest !== 'undefined';
+      return (
+        warnsIfNotActing &&
+        jestIsDefined &&
+        isReactActEnvironmentGlobal !== false
+      );
+    }
   }
   return false;
 }
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 94431b435054..ee93b3f99299 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -19,6 +19,8 @@ describe('DebugTracing', () => {
   const DEFAULT_LANE_STRING = '0b0000000000000000000000000010000';
   const RETRY_LANE_STRING = '0b0000000010000000000000000000000';
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   beforeEach(() => {
     jest.resetModules();
 
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 000000000000..058e01b1fe06
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
@@ -0,0 +1,130 @@
+/**
+ * Copyright (c) Facebook, Inc. and its 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 ReactNoop;
+let useState;
+let act;
+
+// 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.unstable_act;
+    useState = React.useState;
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
+  function withActEnvironment(value, scope) {
+    const prevValue = global.IS_REACT_ACT_ENVIRONMENT;
+    global.IS_REACT_ACT_ENVIRONMENT = value;
+    try {
+      return scope();
+    } finally {
+      global.IS_REACT_ACT_ENVIRONMENT = prevValue;
+    }
+  }
+
+  test('warns about unwrapped updates only if environment flag is enabled', () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    expect(Scheduler).toFlushAndYield([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Default behavior. Flag is undefined. No warning.
+    expect(global.IS_REACT_ACT_ENVIRONMENT).toBe(undefined);
+    setState(1);
+    expect(Scheduler).toFlushAndYield([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Flag is true. Warn.
+    withActEnvironment(true, () => {
+      expect(() => setState(2)).toErrorDev(
+        'An update to App inside a test was not wrapped in act',
+      );
+      expect(Scheduler).toFlushAndYield([2]);
+      expect(root).toMatchRenderedOutput('2');
+    });
+
+    // Flag is false. No warning.
+    withActEnvironment(false, () => {
+      setState(3);
+      expect(Scheduler).toFlushAndYield([3]);
+      expect(root).toMatchRenderedOutput('3');
+    });
+  });
+
+  // @gate __DEV__
+  test('act warns if the environment flag is not enabled', () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    const root = ReactNoop.createRoot();
+    root.render(<App />);
+    expect(Scheduler).toFlushAndYield([0]);
+    expect(root).toMatchRenderedOutput('0');
+
+    // Default behavior. Flag is undefined. Warn.
+    expect(global.IS_REACT_ACT_ENVIRONMENT).toBe(undefined);
+    expect(() => {
+      act(() => {
+        setState(1);
+      });
+    }).toErrorDev(
+      'The current testing environment is not configured to support act(...)',
+      {withoutStack: true},
+    );
+    expect(Scheduler).toHaveYielded([1]);
+    expect(root).toMatchRenderedOutput('1');
+
+    // Flag is true. Don't warn.
+    withActEnvironment(true, () => {
+      act(() => {
+        setState(2);
+      });
+      expect(Scheduler).toHaveYielded([2]);
+      expect(root).toMatchRenderedOutput('2');
+    });
+
+    // Flag is false. Warn.
+    withActEnvironment(false, () => {
+      expect(() => {
+        act(() => {
+          setState(1);
+        });
+      }).toErrorDev(
+        'The current testing environment is not configured to support act(...)',
+        {withoutStack: true},
+      );
+      expect(Scheduler).toHaveYielded([1]);
+      expect(root).toMatchRenderedOutput('1');
+    });
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index 09fdb95b01e6..13ca3988b2a7 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -21,6 +21,8 @@ describe('SchedulingProfiler labels', () => {
   let featureDetectionMarkName = null;
   let marks;
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   function polyfillJSDomUserTiming() {
     featureDetectionMarkName = null;
 

From b1acff0cc27a4c9844cb8049fae2ec6576a0f956 Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Mon, 18 Oct 2021 16:23:43 -0700
Subject: [PATCH 0963/1603] Enable cache in test renderer (#22580)

---
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index be60bcfbddb7..043ac7da254b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = true;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;

From 2af4a79333108f59600970ef23e2614c3a5324e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Mon, 18 Oct 2021 20:44:34 -0400
Subject: [PATCH 0964/1603] Hydrate using SuspenseComponent as the parent
 (#22582)

* Add a failing test for Suspense hydration

* Include salazarm's changes to the test

* The hydration parent of a suspense boundary should be the boundary itself

This eventually got set when we popped back out of its children but it
doesn't start out that way.

This fixes it so that the boundary parent is always the suspense boundary.

* We now need to log errors with a suspense boundary as a parent

For now, we just log this with commentNode.parentNode as the parent for
purposes of the error message.

* Make a special getFirstHydratableChildWithinSuspenseInstance

We currently call getNextHydratableSibling but conceptually it's the child
of the boundary. It just happens to be that when we use comment nodes, we
need to call nextSibling in the DOM.

This makes this separation a bit clearer.

* Sync old fork

Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 ...DOMServerPartialHydration-test.internal.js | 58 ++++++++++++++
 .../src/client/ReactDOMHostConfig.js          | 74 +++++++++++++++--
 .../ReactFiberHostConfigWithNoHydration.js    | 14 +++-
 .../src/ReactFiberHydrationContext.new.js     | 80 ++++++++++++++++---
 .../src/ReactFiberHydrationContext.old.js     | 80 ++++++++++++++++---
 .../src/forks/ReactFiberHostConfig.custom.js  | 28 +++++--
 6 files changed, 293 insertions(+), 41 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index b1a88868b338..4b647e00032b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -160,6 +160,64 @@ describe('ReactDOMServerPartialHydration', () => {
     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;
+    ReactDOM.hydrateRoot(container, <App />);
+    expect(() => {
+      Scheduler.unstable_flushAll();
+    }).toErrorDev(
+      // TODO: This error should not be logged in this case. It's a false positive.
+      'Did not expect server HTML to contain the text node "Hello" in <div>.',
+    );
+    jest.runAllTimers();
+
+    // Expect the server-generated HTML to stay intact.
+    expect(container.textContent).toBe('HelloHello');
+
+    // Resolving the promise should continue hydration
+    suspend = false;
+    resolve();
+    await promise;
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+    // Hydration should not change anything.
+    expect(container.textContent).toBe('HelloHello');
+  });
+
   it('calls the hydration callbacks after hydration or deletion', async () => {
     let suspend = false;
     let resolve;
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 74877c1591e7..79b534d1e181 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -764,11 +764,23 @@ export function getNextHydratableSibling(
 }
 
 export function getFirstHydratableChild(
-  parentInstance: Container | Instance,
+  parentInstance: Instance,
 ): null | HydratableInstance {
   return getNextHydratable(parentInstance.firstChild);
 }
 
+export function getFirstHydratableChildWithinContainer(
+  parentContainer: Container,
+): null | HydratableInstance {
+  return getNextHydratable(parentContainer.firstChild);
+}
+
+export function getFirstHydratableChildWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+): null | HydratableInstance {
+  return getNextHydratable(parentInstance.nextSibling);
+}
+
 export function hydrateInstance(
   instance: Instance,
   type: string,
@@ -917,7 +929,7 @@ export function didNotMatchHydratedTextInstance(
   }
 }
 
-export function didNotHydrateContainerInstance(
+export function didNotHydrateInstanceWithinContainer(
   parentContainer: Container,
   instance: HydratableInstance,
 ) {
@@ -932,6 +944,25 @@ export function didNotHydrateContainerInstance(
   }
 }
 
+export function didNotHydrateInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  instance: HydratableInstance,
+) {
+  if (__DEV__) {
+    // $FlowFixMe: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null) {
+      if (instance.nodeType === ELEMENT_NODE) {
+        warnForDeletedHydratableElement(parentNode, (instance: any));
+      } else if (instance.nodeType === COMMENT_NODE) {
+        // TODO: warnForDeletedHydratableSuspenseBoundary
+      } else {
+        warnForDeletedHydratableText(parentNode, (instance: any));
+      }
+    }
+  }
+}
+
 export function didNotHydrateInstance(
   parentType: string,
   parentProps: Props,
@@ -949,7 +980,7 @@ export function didNotHydrateInstance(
   }
 }
 
-export function didNotFindHydratableContainerInstance(
+export function didNotFindHydratableInstanceWithinContainer(
   parentContainer: Container,
   type: string,
   props: Props,
@@ -959,7 +990,7 @@ export function didNotFindHydratableContainerInstance(
   }
 }
 
-export function didNotFindHydratableContainerTextInstance(
+export function didNotFindHydratableTextInstanceWithinContainer(
   parentContainer: Container,
   text: string,
 ) {
@@ -968,7 +999,7 @@ export function didNotFindHydratableContainerTextInstance(
   }
 }
 
-export function didNotFindHydratableContainerSuspenseInstance(
+export function didNotFindHydratableSuspenseInstanceWithinContainer(
   parentContainer: Container,
 ) {
   if (__DEV__) {
@@ -976,6 +1007,39 @@ export function didNotFindHydratableContainerSuspenseInstance(
   }
 }
 
+export function didNotFindHydratableInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  type: string,
+  props: Props,
+) {
+  if (__DEV__) {
+    // $FlowFixMe: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null)
+      warnForInsertedHydratedElement(parentNode, type, props);
+  }
+}
+
+export function didNotFindHydratableTextInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+  text: string,
+) {
+  if (__DEV__) {
+    // $FlowFixMe: Only Element or Document can be parent nodes.
+    const parentNode: Element | Document | null = parentInstance.parentNode;
+    if (parentNode !== null) warnForInsertedHydratedText(parentNode, text);
+  }
+}
+
+export function didNotFindHydratableSuspenseInstanceWithinSuspenseInstance(
+  parentInstance: SuspenseInstance,
+) {
+  if (__DEV__) {
+    // const parentNode: Element | Document | null = parentInstance.parentNode;
+    // TODO: warnForInsertedHydratedSuspense(parentNode);
+  }
+}
+
 export function didNotFindHydratableInstance(
   parentType: string,
   parentProps: Props,
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index b95fd52d189b..1392cf8a2608 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -29,6 +29,8 @@ export const isSuspenseInstanceFallback = shim;
 export const registerSuspenseInstanceRetry = shim;
 export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
+export const getFirstHydratableChildWithinContainer = shim;
+export const getFirstHydratableChildWithinSuspenseInstance = shim;
 export const hydrateInstance = shim;
 export const hydrateTextInstance = shim;
 export const hydrateSuspenseInstance = shim;
@@ -40,11 +42,15 @@ export const clearSuspenseBoundaryFromContainer = shim;
 export const shouldDeleteUnhydratedTailInstances = shim;
 export const didNotMatchHydratedContainerTextInstance = shim;
 export const didNotMatchHydratedTextInstance = shim;
-export const didNotHydrateContainerInstance = shim;
+export const didNotHydrateInstanceWithinContainer = shim;
+export const didNotHydrateInstanceWithinSuspenseInstance = shim;
 export const didNotHydrateInstance = shim;
-export const didNotFindHydratableContainerInstance = shim;
-export const didNotFindHydratableContainerTextInstance = shim;
-export const didNotFindHydratableContainerSuspenseInstance = shim;
+export const didNotFindHydratableInstanceWithinContainer = shim;
+export const didNotFindHydratableTextInstanceWithinContainer = shim;
+export const didNotFindHydratableSuspenseInstanceWithinContainer = shim;
+export const didNotFindHydratableInstanceWithinSuspenseInstance = shim;
+export const didNotFindHydratableTextInstanceWithinSuspenseInstance = shim;
+export const didNotFindHydratableSuspenseInstanceWithinSuspenseInstance = shim;
 export const didNotFindHydratableInstance = shim;
 export const didNotFindHydratableTextInstance = shim;
 export const didNotFindHydratableSuspenseInstance = shim;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index f694d8407ecd..6aad7f03339f 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -38,6 +38,8 @@ import {
   canHydrateSuspenseInstance,
   getNextHydratableSibling,
   getFirstHydratableChild,
+  getFirstHydratableChildWithinContainer,
+  getFirstHydratableChildWithinSuspenseInstance,
   hydrateInstance,
   hydrateTextInstance,
   hydrateSuspenseInstance,
@@ -45,11 +47,15 @@ import {
   shouldDeleteUnhydratedTailInstances,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
-  didNotHydrateContainerInstance,
+  didNotHydrateInstanceWithinContainer,
+  didNotHydrateInstanceWithinSuspenseInstance,
   didNotHydrateInstance,
-  didNotFindHydratableContainerInstance,
-  didNotFindHydratableContainerTextInstance,
-  didNotFindHydratableContainerSuspenseInstance,
+  didNotFindHydratableInstanceWithinContainer,
+  didNotFindHydratableTextInstanceWithinContainer,
+  didNotFindHydratableSuspenseInstanceWithinContainer,
+  didNotFindHydratableInstanceWithinSuspenseInstance,
+  didNotFindHydratableTextInstanceWithinSuspenseInstance,
+  didNotFindHydratableSuspenseInstanceWithinSuspenseInstance,
   didNotFindHydratableInstance,
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
@@ -78,8 +84,10 @@ function enterHydrationState(fiber: Fiber): boolean {
     return false;
   }
 
-  const parentInstance = fiber.stateNode.containerInfo;
-  nextHydratableInstance = getFirstHydratableChild(parentInstance);
+  const parentInstance: Container = fiber.stateNode.containerInfo;
+  nextHydratableInstance = getFirstHydratableChildWithinContainer(
+    parentInstance,
+  );
   hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
@@ -92,8 +100,10 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   if (!supportsHydration) {
     return false;
   }
-  nextHydratableInstance = getNextHydratableSibling(suspenseInstance);
-  popToNextHostParent(fiber);
+  nextHydratableInstance = getFirstHydratableChildWithinSuspenseInstance(
+    suspenseInstance,
+  );
+  hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
 }
@@ -105,7 +115,7 @@ function deleteHydratableInstance(
   if (__DEV__) {
     switch (returnFiber.tag) {
       case HostRoot:
-        didNotHydrateContainerInstance(
+        didNotHydrateInstanceWithinContainer(
           returnFiber.stateNode.containerInfo,
           instance,
         );
@@ -118,6 +128,14 @@ function deleteHydratableInstance(
           instance,
         );
         break;
+      case SuspenseComponent:
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        if (suspenseState.dehydrated !== null)
+          didNotHydrateInstanceWithinSuspenseInstance(
+            suspenseState.dehydrated,
+            instance,
+          );
+        break;
     }
   }
 
@@ -144,14 +162,23 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
           case HostComponent:
             const type = fiber.type;
             const props = fiber.pendingProps;
-            didNotFindHydratableContainerInstance(parentContainer, type, props);
+            didNotFindHydratableInstanceWithinContainer(
+              parentContainer,
+              type,
+              props,
+            );
             break;
           case HostText:
             const text = fiber.pendingProps;
-            didNotFindHydratableContainerTextInstance(parentContainer, text);
+            didNotFindHydratableTextInstanceWithinContainer(
+              parentContainer,
+              text,
+            );
             break;
           case SuspenseComponent:
-            didNotFindHydratableContainerSuspenseInstance(parentContainer);
+            didNotFindHydratableSuspenseInstanceWithinContainer(
+              parentContainer,
+            );
             break;
         }
         break;
@@ -191,6 +218,35 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
         }
         break;
       }
+      case SuspenseComponent: {
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        const parentInstance = suspenseState.dehydrated;
+        if (parentInstance !== null)
+          switch (fiber.tag) {
+            case HostComponent:
+              const type = fiber.type;
+              const props = fiber.pendingProps;
+              didNotFindHydratableInstanceWithinSuspenseInstance(
+                parentInstance,
+                type,
+                props,
+              );
+              break;
+            case HostText:
+              const text = fiber.pendingProps;
+              didNotFindHydratableTextInstanceWithinSuspenseInstance(
+                parentInstance,
+                text,
+              );
+              break;
+            case SuspenseComponent:
+              didNotFindHydratableSuspenseInstanceWithinSuspenseInstance(
+                parentInstance,
+              );
+              break;
+          }
+        break;
+      }
       default:
         return;
     }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 3918c014ca14..fd0dd8e99a5b 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -38,6 +38,8 @@ import {
   canHydrateSuspenseInstance,
   getNextHydratableSibling,
   getFirstHydratableChild,
+  getFirstHydratableChildWithinContainer,
+  getFirstHydratableChildWithinSuspenseInstance,
   hydrateInstance,
   hydrateTextInstance,
   hydrateSuspenseInstance,
@@ -45,11 +47,15 @@ import {
   shouldDeleteUnhydratedTailInstances,
   didNotMatchHydratedContainerTextInstance,
   didNotMatchHydratedTextInstance,
-  didNotHydrateContainerInstance,
+  didNotHydrateInstanceWithinContainer,
+  didNotHydrateInstanceWithinSuspenseInstance,
   didNotHydrateInstance,
-  didNotFindHydratableContainerInstance,
-  didNotFindHydratableContainerTextInstance,
-  didNotFindHydratableContainerSuspenseInstance,
+  didNotFindHydratableInstanceWithinContainer,
+  didNotFindHydratableTextInstanceWithinContainer,
+  didNotFindHydratableSuspenseInstanceWithinContainer,
+  didNotFindHydratableInstanceWithinSuspenseInstance,
+  didNotFindHydratableTextInstanceWithinSuspenseInstance,
+  didNotFindHydratableSuspenseInstanceWithinSuspenseInstance,
   didNotFindHydratableInstance,
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
@@ -78,8 +84,10 @@ function enterHydrationState(fiber: Fiber): boolean {
     return false;
   }
 
-  const parentInstance = fiber.stateNode.containerInfo;
-  nextHydratableInstance = getFirstHydratableChild(parentInstance);
+  const parentInstance: Container = fiber.stateNode.containerInfo;
+  nextHydratableInstance = getFirstHydratableChildWithinContainer(
+    parentInstance,
+  );
   hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
@@ -92,8 +100,10 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   if (!supportsHydration) {
     return false;
   }
-  nextHydratableInstance = getNextHydratableSibling(suspenseInstance);
-  popToNextHostParent(fiber);
+  nextHydratableInstance = getFirstHydratableChildWithinSuspenseInstance(
+    suspenseInstance,
+  );
+  hydrationParentFiber = fiber;
   isHydrating = true;
   return true;
 }
@@ -105,7 +115,7 @@ function deleteHydratableInstance(
   if (__DEV__) {
     switch (returnFiber.tag) {
       case HostRoot:
-        didNotHydrateContainerInstance(
+        didNotHydrateInstanceWithinContainer(
           returnFiber.stateNode.containerInfo,
           instance,
         );
@@ -118,6 +128,14 @@ function deleteHydratableInstance(
           instance,
         );
         break;
+      case SuspenseComponent:
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        if (suspenseState.dehydrated !== null)
+          didNotHydrateInstanceWithinSuspenseInstance(
+            suspenseState.dehydrated,
+            instance,
+          );
+        break;
     }
   }
 
@@ -144,14 +162,23 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
           case HostComponent:
             const type = fiber.type;
             const props = fiber.pendingProps;
-            didNotFindHydratableContainerInstance(parentContainer, type, props);
+            didNotFindHydratableInstanceWithinContainer(
+              parentContainer,
+              type,
+              props,
+            );
             break;
           case HostText:
             const text = fiber.pendingProps;
-            didNotFindHydratableContainerTextInstance(parentContainer, text);
+            didNotFindHydratableTextInstanceWithinContainer(
+              parentContainer,
+              text,
+            );
             break;
           case SuspenseComponent:
-            didNotFindHydratableContainerSuspenseInstance(parentContainer);
+            didNotFindHydratableSuspenseInstanceWithinContainer(
+              parentContainer,
+            );
             break;
         }
         break;
@@ -191,6 +218,35 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
         }
         break;
       }
+      case SuspenseComponent: {
+        const suspenseState: SuspenseState = returnFiber.memoizedState;
+        const parentInstance = suspenseState.dehydrated;
+        if (parentInstance !== null)
+          switch (fiber.tag) {
+            case HostComponent:
+              const type = fiber.type;
+              const props = fiber.pendingProps;
+              didNotFindHydratableInstanceWithinSuspenseInstance(
+                parentInstance,
+                type,
+                props,
+              );
+              break;
+            case HostText:
+              const text = fiber.pendingProps;
+              didNotFindHydratableTextInstanceWithinSuspenseInstance(
+                parentInstance,
+                text,
+              );
+              break;
+            case SuspenseComponent:
+              didNotFindHydratableSuspenseInstanceWithinSuspenseInstance(
+                parentInstance,
+              );
+              break;
+          }
+        break;
+      }
       default:
         return;
     }
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 1cc10a78cb01..29d4fd7e7989 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -150,6 +150,10 @@ export const registerSuspenseInstanceRetry =
   $$$hostConfig.registerSuspenseInstanceRetry;
 export const getNextHydratableSibling = $$$hostConfig.getNextHydratableSibling;
 export const getFirstHydratableChild = $$$hostConfig.getFirstHydratableChild;
+export const getFirstHydratableChildWithinContainer =
+  $$$hostConfig.getFirstHydratableChildWithinContainer;
+export const getFirstHydratableChildWithinSuspenseInstance =
+  $$$hostConfig.getFirstHydratableChildWithinSuspenseInstance;
 export const hydrateInstance = $$$hostConfig.hydrateInstance;
 export const hydrateTextInstance = $$$hostConfig.hydrateTextInstance;
 export const hydrateSuspenseInstance = $$$hostConfig.hydrateSuspenseInstance;
@@ -167,15 +171,23 @@ export const didNotMatchHydratedContainerTextInstance =
   $$$hostConfig.didNotMatchHydratedContainerTextInstance;
 export const didNotMatchHydratedTextInstance =
   $$$hostConfig.didNotMatchHydratedTextInstance;
-export const didNotHydrateContainerInstance =
-  $$$hostConfig.didNotHydrateContainerInstance;
+export const didNotHydrateInstanceWithinContainer =
+  $$$hostConfig.didNotHydrateInstanceWithinContainer;
+export const didNotHydrateInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotHydrateInstanceWithinSuspenseInstance;
 export const didNotHydrateInstance = $$$hostConfig.didNotHydrateInstance;
-export const didNotFindHydratableContainerInstance =
-  $$$hostConfig.didNotFindHydratableContainerInstance;
-export const didNotFindHydratableContainerTextInstance =
-  $$$hostConfig.didNotFindHydratableContainerTextInstance;
-export const didNotFindHydratableContainerSuspenseInstance =
-  $$$hostConfig.didNotFindHydratableContainerSuspenseInstance;
+export const didNotFindHydratableInstanceWithinContainer =
+  $$$hostConfig.didNotFindHydratableInstanceWithinContainer;
+export const didNotFindHydratableTextInstanceWithinContainer =
+  $$$hostConfig.didNotFindHydratableTextInstanceWithinContainer;
+export const didNotFindHydratableSuspenseInstanceWithinContainer =
+  $$$hostConfig.didNotFindHydratableSuspenseInstanceWithinContainer;
+export const didNotFindHydratableInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotFindHydratableInstanceWithinSuspenseInstance;
+export const didNotFindHydratableTextInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotFindHydratableTextInstanceWithinSuspenseInstance;
+export const didNotFindHydratableSuspenseInstanceWithinSuspenseInstance =
+  $$$hostConfig.didNotFindHydratableSuspenseInstanceWithinSuspenseInstance;
 export const didNotFindHydratableInstance =
   $$$hostConfig.didNotFindHydratableInstance;
 export const didNotFindHydratableTextInstance =

From 5b9d000c8aff1e9f8368ec3e03b9568c8852fe5e Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 19 Oct 2021 09:52:55 -0400
Subject: [PATCH 0965/1603] DevTools: Include Edge in browser name detection
 (#22584)

---
 .../react-devtools-extensions/src/utils.js    | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-extensions/src/utils.js b/packages/react-devtools-extensions/src/utils.js
index 2c67e2cf047b..ea2bd27ee992 100644
--- a/packages/react-devtools-extensions/src/utils.js
+++ b/packages/react-devtools-extensions/src/utils.js
@@ -2,12 +2,25 @@
 
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-const IS_CHROME = navigator.userAgent.indexOf('Firefox') < 0;
+const IS_EDGE = navigator.userAgent.indexOf('Edg') >= 0;
+const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
+const IS_CHROME = IS_EDGE === false && IS_FIREFOX === false;
 
-export type BrowserName = 'Chrome' | 'Firefox';
+export type BrowserName = 'Chrome' | 'Firefox' | 'Edge';
 
 export function getBrowserName(): BrowserName {
-  return IS_CHROME ? 'Chrome' : 'Firefox';
+  if (IS_EDGE) {
+    return 'Edge';
+  }
+  if (IS_FIREFOX) {
+    return 'Firefox';
+  }
+  if (IS_CHROME) {
+    return 'Chrome';
+  }
+  throw new Error(
+    'Expected browser name to be one of Chrome, Edge or Firefox.',
+  );
 }
 
 export function getBrowserTheme(): BrowserTheme {

From b81de8633218b0efde8e534374db08eea9116473 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 19 Oct 2021 10:55:39 -0400
Subject: [PATCH 0966/1603] React DevTools 4.20.0 -> 4.20.1 (#22583)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 ++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 05192be2d044..5f26b46c970f 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index fdbf43719689..21babe5e9069 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.20.0",
-  "version_name": "4.20.0",
+  "version": "4.20.1",
+  "version_name": "4.20.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index b5fd17dcb26f..7dab50d1ba25 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.20.0",
-  "version_name": "4.20.0",
+  "version": "4.20.1",
+  "version_name": "4.20.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 4da3c73a5d3c..d83f2f3f50a2 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 16564ebc79b2..be6e005a07ae 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index fb56eb8c0861..6491132afa35 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 1f42ca57c1b6..0e0aa8963193 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 16b47c5e0f20..b22ef0bab433 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.20.0",
+  "version": "4.20.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.20.0",
+    "react-devtools-core": "4.20.1",
     "update-notifier": "^2.1.0"
   }
 }

From 02f411578a8e58af8ec28e385f6b0dcb768cdc41 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Oct 2021 17:32:54 -0400
Subject: [PATCH 0967/1603] Upgrade useInsertionEffect to stable (#22589)

@huozhi tried this out and says it's working as expected. I think we
can go ahead and move this into the stable channel, so that it is
available in the React 18 alpha releases.
---
 .../src/__tests__/ReactHooksInspectionIntegration-test.js  | 3 +--
 .../src/__tests__/ReactDOMServerIntegrationHooks-test.js   | 3 +--
 .../src/__tests__/ReactHooksWithNoopRenderer-test.js       | 7 +------
 packages/react/index.classic.fb.js                         | 2 +-
 packages/react/index.experimental.js                       | 2 +-
 packages/react/index.js                                    | 2 +-
 packages/react/index.modern.fb.js                          | 2 +-
 packages/react/index.stable.js                             | 1 +
 packages/react/src/React.js                                | 2 +-
 9 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 013caecb11ba..6937efd63157 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -268,9 +268,8 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental || www
   it('should inspect the current state of all stateful hooks, including useInsertionEffect', () => {
-    const useInsertionEffect = React.unstable_useInsertionEffect;
+    const useInsertionEffect = React.useInsertionEffect;
     const outsideRef = React.createRef();
     function effect() {}
     function Foo(props) {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index daf345331418..ba2b22437bc1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -55,7 +55,7 @@ function initModules() {
   useRef = React.useRef;
   useDebugValue = React.useDebugValue;
   useImperativeHandle = React.useImperativeHandle;
-  useInsertionEffect = React.unstable_useInsertionEffect;
+  useInsertionEffect = React.useInsertionEffect;
   useLayoutEffect = React.useLayoutEffect;
   useOpaqueIdentifier = React.unstable_useOpaqueIdentifier;
   forwardRef = React.forwardRef;
@@ -641,7 +641,6 @@ describe('ReactDOMServerHooks', () => {
     });
   });
   describe('useInsertionEffect', () => {
-    // @gate experimental || www
     it('should warn when invoked during render', async () => {
       function Counter() {
         useInsertionEffect(() => {
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index f56577e8ffea..bcd96d732e09 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -47,7 +47,7 @@ describe('ReactHooksWithNoopRenderer', () => {
     useState = React.useState;
     useReducer = React.useReducer;
     useEffect = React.useEffect;
-    useInsertionEffect = React.unstable_useInsertionEffect;
+    useInsertionEffect = React.useInsertionEffect;
     useLayoutEffect = React.useLayoutEffect;
     useCallback = React.useCallback;
     useMemo = React.useMemo;
@@ -2685,7 +2685,6 @@ describe('ReactHooksWithNoopRenderer', () => {
   });
 
   describe('useInsertionEffect', () => {
-    // @gate experimental || www
     it('fires insertion effects after snapshots on update', () => {
       function CounterA(props) {
         useInsertionEffect(() => {
@@ -2745,7 +2744,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    // @gate experimental || www
     it('fires insertion effects before layout effects', () => {
       let committedText = '(empty)';
 
@@ -2808,7 +2806,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       expect(Scheduler).toHaveYielded(['Destroy passive [current: 0]']);
     });
 
-    // @gate experimental || www
     it('force flushes passive effects before firing new insertion effects', () => {
       let committedText = '(empty)';
 
@@ -2876,7 +2873,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
     });
 
-    // @gate experimental || www
     it('fires all insertion effects (interleaved) before firing any layout effects', () => {
       let committedA = '(empty)';
       let committedB = '(empty)';
@@ -3043,7 +3039,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       });
     });
 
-    // @gate experimental || www
     it('assumes insertion effect destroy function is either a function or undefined', () => {
       function App(props) {
         useInsertionEffect(() => {
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 7f8abc863157..5335c4053a70 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -48,7 +48,7 @@ export {
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index a0a9bbaca216..19490fb214c9 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -42,7 +42,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/index.js b/packages/react/index.js
index 1b4552a90f5d..b4a3bf6e11b8 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -67,7 +67,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 819d5fe90afd..2b847d233631 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -46,7 +46,7 @@ export {
   useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
   useImperativeHandle,
-  unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 008875e4577e..4e4682b8fc29 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -36,6 +36,7 @@ export {
   useDeferredValue,
   useEffect,
   useImperativeHandle,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 541e7a35d3d3..2246d32db662 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -92,7 +92,7 @@ export {
   useEffect,
   useImperativeHandle,
   useDebugValue,
-  useInsertionEffect as unstable_useInsertionEffect,
+  useInsertionEffect,
   useLayoutEffect,
   useMemo,
   useMutableSource,

From fe0356ce2baa0b6569de6cbae6d54166bebb1fdb Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Tue, 19 Oct 2021 17:43:59 -0400
Subject: [PATCH 0968/1603] DevTools: Fix passing extensionId in evaled
 postMessage calls (#22590)

---
 .../react-devtools-extensions/src/main.js     | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 5203b511035d..60ed0fcb1a9e 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -216,7 +216,7 @@ function createPanelIfReactLoaded() {
           chrome.devtools.inspectedWindow.eval(
             `window.postMessage({
                source: 'react-devtools-inject-backend',
-               extensionId: "${CURRENT_EXTENSION_ID}"
+               extensionId: "${CURRENT_EXTENSION_ID}",
              }, '*');`,
             function(response, evalError) {
               if (evalError) {
@@ -361,15 +361,15 @@ function createPanelIfReactLoaded() {
               chrome.runtime.onMessage.addListener(onPortMessage);
 
               chrome.devtools.inspectedWindow.eval(`
-              window.postMessage({
-                source: 'react-devtools-extension',
-                extensionId: "${CURRENT_EXTENSION_ID}"
-                payload: {
-                  type: 'fetch-file-with-cache',
-                  url: "${url}",
-                },
-              });
-            `);
+                window.postMessage({
+                  source: 'react-devtools-extension',
+                  extensionId: "${CURRENT_EXTENSION_ID}",
+                  payload: {
+                    type: 'fetch-file-with-cache',
+                    url: "${url}",
+                  },
+                }, '*');
+              `);
             };
 
             // Fetching files from the extension won't make use of the network cache

From 34e4c9756121ef89d4b31e75e590ebdd3f05587b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 19 Oct 2021 19:28:01 -0400
Subject: [PATCH 0969/1603] Clear extra nodes if there's a hydration mismatch
 within a suspense boundary  (#22592)

* Clear extra nodes if there's a mismatch within a suspense boundary

This usually happens when we exit out a DOM node but a suspense boundary
is a virtual DOM node and we didn't do it in that case because we took a
short cut by calling resetHydrationState directly since we know we won't
need to pop.

* Tighten up the types of getFirstHydratableChild

We currently call getFirstHydratableChild to step into the children of
a suspense boundary. This can be a text node or a suspense boundary
which isn't compatible with getFirstHydratableChild, and we cheat the type.

This accidentally works because .firstChild always returns null on those
nodes in the DOM.

This just makes that explicit.
---
 ...DOMServerPartialHydration-test.internal.js | 58 +++++++++++++++++++
 .../src/client/ReactDOMHostConfig.js          |  3 +
 .../src/ReactFiberCompleteWork.new.js         | 11 ++--
 .../src/ReactFiberCompleteWork.old.js         | 11 ++--
 .../src/ReactFiberHydrationContext.new.js     | 17 ++++--
 .../src/ReactFiberHydrationContext.old.js     | 17 ++++--
 6 files changed, 93 insertions(+), 24 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 4b647e00032b..505a100df3aa 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -308,6 +308,64 @@ describe('ReactDOMServerPartialHydration', () => {
     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;
+
+    ReactDOM.hydrateRoot(container, <App />);
+    Scheduler.unstable_flushAll();
+    jest.runAllTimers();
+
+    expect(container.innerHTML).toContain('<div>Sibling</div>');
+  });
+
+  it('recovers when server rendered additional nodes', async () => {
+    const ref = React.createRef();
+    function App({hasB}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <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);
+
+    ReactDOM.hydrateRoot(container, <App hasB={false} />);
+    expect(() => {
+      Scheduler.unstable_flushAll();
+    }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+    jest.runAllTimers();
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    expect(ref.current).toBe(span);
+  });
+
   it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
     let suspend = false;
     const promise = new Promise(() => {});
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 79b534d1e181..8a5417ae4927 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -751,6 +751,9 @@ function getNextHydratable(node) {
         ) {
           break;
         }
+        if (nodeData === SUSPENSE_END_DATA) {
+          return null;
+        }
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index a15702985e9a..dadec516c3a4 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1007,16 +1007,16 @@ function completeWork(
 
       if (enableSuspenseServerRenderer) {
         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.
+          const wasHydrated = popHydrationState(workInProgress);
           if (current === null) {
-            const wasHydrated = popHydrationState(workInProgress);
-
             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) {
@@ -1034,9 +1034,8 @@ function completeWork(
             }
             return null;
           } else {
-            // We should never have been in a hydration state if we didn't have a current.
-            // However, in some of those paths, we might have reentered a hydration state
-            // and then we might be inside a hydration state. In that case, we'll need to exit out of it.
+            // 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.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 89b8b980bc3e..06fbf5abff50 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1007,16 +1007,16 @@ function completeWork(
 
       if (enableSuspenseServerRenderer) {
         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.
+          const wasHydrated = popHydrationState(workInProgress);
           if (current === null) {
-            const wasHydrated = popHydrationState(workInProgress);
-
             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) {
@@ -1034,9 +1034,8 @@ function completeWork(
             }
             return null;
           } else {
-            // We should never have been in a hydration state if we didn't have a current.
-            // However, in some of those paths, we might have reentered a hydration state
-            // and then we might be inside a hydration state. In that case, we'll need to exit out of it.
+            // 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.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 6aad7f03339f..7275f1663cad 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -261,6 +261,8 @@ function tryHydrate(fiber, nextInstance) {
       const instance = canHydrateInstance(nextInstance, type, props);
       if (instance !== null) {
         fiber.stateNode = (instance: Instance);
+        hydrationParentFiber = fiber;
+        nextHydratableInstance = getFirstHydratableChild(instance);
         return true;
       }
       return false;
@@ -270,6 +272,9 @@ function tryHydrate(fiber, nextInstance) {
       const textInstance = canHydrateTextInstance(nextInstance, text);
       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;
@@ -294,6 +299,10 @@ function tryHydrate(fiber, nextInstance) {
           );
           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 true;
         }
       }
@@ -322,6 +331,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
     nextInstance = getNextHydratableSibling(firstAttemptedInstance);
+    const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
     if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
       // Nothing to hydrate. Make it an insertion.
       insertNonHydratedInstance((hydrationParentFiber: any), fiber);
@@ -333,13 +343,8 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // superfluous and we'll delete it. Since we can't eagerly delete it
     // we'll have to schedule a deletion. To do that, this node needs a dummy
     // fiber associated with it.
-    deleteHydratableInstance(
-      (hydrationParentFiber: any),
-      firstAttemptedInstance,
-    );
+    deleteHydratableInstance(prevHydrationParentFiber, firstAttemptedInstance);
   }
-  hydrationParentFiber = fiber;
-  nextHydratableInstance = getFirstHydratableChild((nextInstance: any));
 }
 
 function prepareToHydrateHostInstance(
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index fd0dd8e99a5b..654de3f9a289 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -261,6 +261,8 @@ function tryHydrate(fiber, nextInstance) {
       const instance = canHydrateInstance(nextInstance, type, props);
       if (instance !== null) {
         fiber.stateNode = (instance: Instance);
+        hydrationParentFiber = fiber;
+        nextHydratableInstance = getFirstHydratableChild(instance);
         return true;
       }
       return false;
@@ -270,6 +272,9 @@ function tryHydrate(fiber, nextInstance) {
       const textInstance = canHydrateTextInstance(nextInstance, text);
       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;
@@ -294,6 +299,10 @@ function tryHydrate(fiber, nextInstance) {
           );
           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 true;
         }
       }
@@ -322,6 +331,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
     nextInstance = getNextHydratableSibling(firstAttemptedInstance);
+    const prevHydrationParentFiber: Fiber = (hydrationParentFiber: any);
     if (!nextInstance || !tryHydrate(fiber, nextInstance)) {
       // Nothing to hydrate. Make it an insertion.
       insertNonHydratedInstance((hydrationParentFiber: any), fiber);
@@ -333,13 +343,8 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
     // superfluous and we'll delete it. Since we can't eagerly delete it
     // we'll have to schedule a deletion. To do that, this node needs a dummy
     // fiber associated with it.
-    deleteHydratableInstance(
-      (hydrationParentFiber: any),
-      firstAttemptedInstance,
-    );
+    deleteHydratableInstance(prevHydrationParentFiber, firstAttemptedInstance);
   }
-  hydrationParentFiber = fiber;
-  nextHydratableInstance = getFirstHydratableChild((nextInstance: any));
 }
 
 function prepareToHydrateHostInstance(

From 3677c019af7251207dee41df7689859ab991a665 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 19 Oct 2021 21:14:26 -0400
Subject: [PATCH 0970/1603] Support nonce option to be passed to inline scripts
 (#22593)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 38 ++++++++++++++++++-
 .../src/server/ReactDOMFizzServerBrowser.js   |  6 ++-
 .../src/server/ReactDOMFizzServerNode.js      |  6 ++-
 .../src/server/ReactDOMServerFormatConfig.js  | 28 ++++++++++----
 .../ReactDOMServerLegacyFormatConfig.js       |  4 +-
 5 files changed, 70 insertions(+), 12 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index cd0c87a1df3b..ec3a0bfadaee 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -23,6 +23,7 @@ let PropTypes;
 let textCache;
 let document;
 let writable;
+let CSPnonce = null;
 let container;
 let buffer = '';
 let hasErrored = false;
@@ -91,7 +92,10 @@ describe('ReactDOMFizzServer', () => {
     fakeBody.innerHTML = bufferedContent;
     while (fakeBody.firstChild) {
       const node = fakeBody.firstChild;
-      if (node.nodeName === 'SCRIPT') {
+      if (
+        node.nodeName === 'SCRIPT' &&
+        (CSPnonce === null || node.getAttribute('nonce') === CSPnonce)
+      ) {
         const script = document.createElement('script');
         script.textContent = node.textContent;
         fakeBody.removeChild(node);
@@ -281,6 +285,38 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  it('should support nonce scripts', async () => {
+    CSPnonce = 'R4nd0m';
+    try {
+      let resolve;
+      const Lazy = React.lazy(() => {
+        return new Promise(r => {
+          resolve = r;
+        });
+      });
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          <div>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Lazy text="Hello" />
+            </Suspense>
+          </div>,
+          {nonce: 'R4nd0m'},
+        );
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+      await act(async () => {
+        resolve({default: Text});
+      });
+      expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+    } finally {
+      CSPnonce = null;
+    }
+  });
+
   // @gate experimental
   it('should client render a boundary if a lazy component rejects', async () => {
     let rejectComponent;
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index d23820124762..2865ef46b257 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -26,6 +26,7 @@ import {
 type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
+  nonce?: string,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onCompleteShell?: () => void,
@@ -39,7 +40,10 @@ function renderToReadableStream(
 ): ReadableStream {
   const request = createRequest(
     children,
-    createResponseState(options ? options.identifierPrefix : undefined),
+    createResponseState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.nonce : undefined,
+    ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 4233a88e1fb9..fe532a32c3b5 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -31,6 +31,7 @@ function createDrainHandler(destination, request) {
 type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
+  nonce?: string,
   progressiveChunkSize?: number,
   onCompleteShell?: () => void,
   onCompleteAll?: () => void,
@@ -47,7 +48,10 @@ type Controls = {|
 function createRequestImpl(children: ReactNodeList, options: void | Options) {
   return createRequest(
     children,
-    createResponseState(options ? options.identifierPrefix : undefined),
+    createResponseState(
+      options ? options.identifierPrefix : undefined,
+      options ? options.nonce : undefined,
+    ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 0c4b155bb881..67d90f851345 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -59,6 +59,7 @@ export const isPrimaryRenderer = true;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
+  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
@@ -71,12 +72,22 @@ export type ResponseState = {
   ...
 };
 
+const startInlineScript = stringToPrecomputedChunk('<script>');
+
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
+  nonce: string | void,
 ): ResponseState {
   const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
+  const inlineScriptWithNonce =
+    nonce === undefined
+      ? startInlineScript
+      : stringToPrecomputedChunk(
+          '<script nonce="' + escapeTextForBrowser(nonce) + '">',
+        );
   return {
+    startInlineScript: inlineScriptWithNonce,
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
@@ -1689,9 +1700,9 @@ const clientRenderFunction =
   'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
-  '<script>' + completeSegmentFunction + ';$RS("',
+  completeSegmentFunction + ';$RS("',
 );
-const completeSegmentScript1Partial = stringToPrecomputedChunk('<script>$RS("');
+const completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 const completeSegmentScript2 = stringToPrecomputedChunk('","');
 const completeSegmentScript3 = stringToPrecomputedChunk('")</script>');
 
@@ -1700,6 +1711,7 @@ export function writeCompletedSegmentInstruction(
   responseState: ResponseState,
   contentSegmentID: number,
 ): boolean {
+  writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentCompleteSegmentFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentCompleteSegmentFunction = true;
@@ -1718,11 +1730,9 @@ export function writeCompletedSegmentInstruction(
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
-  '<script>' + completeBoundaryFunction + ';$RC("',
-);
-const completeBoundaryScript1Partial = stringToPrecomputedChunk(
-  '<script>$RC("',
+  completeBoundaryFunction + ';$RC("',
 );
+const completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
 const completeBoundaryScript2 = stringToPrecomputedChunk('","');
 const completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
 
@@ -1732,6 +1742,7 @@ export function writeCompletedBoundaryInstruction(
   boundaryID: SuspenseBoundaryID,
   contentSegmentID: number,
 ): boolean {
+  writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentCompleteBoundaryFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentCompleteBoundaryFunction = true;
@@ -1756,9 +1767,9 @@ export function writeCompletedBoundaryInstruction(
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
-  '<script>' + clientRenderFunction + ';$RX("',
+  clientRenderFunction + ';$RX("',
 );
-const clientRenderScript1Partial = stringToPrecomputedChunk('<script>$RX("');
+const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
 const clientRenderScript2 = stringToPrecomputedChunk('")</script>');
 
 export function writeClientRenderBoundaryInstruction(
@@ -1766,6 +1777,7 @@ export function writeClientRenderBoundaryInstruction(
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
 ): boolean {
+  writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentClientRenderFunction) {
     // The first time we write this, we'll need to include the full implementation.
     responseState.sentClientRenderFunction = true;
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 59fb19e7986c..723c03dfdba1 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -29,6 +29,7 @@ export const isPrimaryRenderer = false;
 
 export type ResponseState = {
   // Keep this in sync with ReactDOMServerFormatConfig
+  startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
@@ -46,9 +47,10 @@ export function createResponseState(
   generateStaticMarkup: boolean,
   identifierPrefix: string | void,
 ): ResponseState {
-  const responseState = createResponseStateImpl(identifierPrefix);
+  const responseState = createResponseStateImpl(identifierPrefix, undefined);
   return {
     // Keep this in sync with ReactDOMServerFormatConfig
+    startInlineScript: responseState.startInlineScript,
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,

From cdb8a1d19d0c0d43a72c3f0fe739b04da247c360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 19 Oct 2021 22:36:10 -0400
Subject: [PATCH 0971/1603] [Fizz] Add option to inject bootstrapping script
 tags after the shell is injected (#22594)

* Add option to inject bootstrap scripts

These are emitted right after the shell as flushed.

* Update ssr fixtures to use bootstrapScripts instead of manual script tag

* Add option to FB renderer too
---
 fixtures/ssr/server/render.js                 |    1 +
 fixtures/ssr/src/components/Chrome.js         |    1 -
 fixtures/ssr/yarn.lock                        |   10 +-
 fixtures/ssr2/package.json                    |    4 +-
 fixtures/ssr2/server/render.js                |    1 +
 fixtures/ssr2/src/Html.js                     |    1 -
 fixtures/ssr2/yarn.lock                       | 5277 +++++++++++++++++
 .../src/__tests__/ReactDOMFizzServer-test.js  |   31 +-
 .../ReactDOMFizzServerBrowser-test.js         |   16 +
 .../__tests__/ReactDOMFizzServerNode-test.js  |   18 +
 .../src/server/ReactDOMFizzServerBrowser.js   |    6 +
 .../src/server/ReactDOMFizzServerNode.js      |    6 +
 .../src/server/ReactDOMServerFormatConfig.js  |   48 +
 .../ReactDOMServerLegacyFormatConfig.js       |    3 +
 .../server/ReactNativeServerFormatConfig.js   |    7 +
 .../src/ReactNoopServer.js                    |    7 +
 .../src/ReactDOMServerFB.js                   |   11 +-
 .../ReactDOMServerFB-test.internal.js         |   15 +
 packages/react-server/src/ReactFizzServer.js  |    2 +
 .../forks/ReactServerFormatConfig.custom.js   |    1 +
 20 files changed, 5445 insertions(+), 21 deletions(-)
 create mode 100644 fixtures/ssr2/yarn.lock

diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index e0fc50f3f953..9857a8a83dcf 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -21,6 +21,7 @@ export default function render(url, res) {
   });
   let didError = false;
   const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
+    bootstrapScripts: [assets['main.js']],
     onCompleteShell() {
       // If something errored before we started streaming, we set the error code appropriately.
       res.statusCode = didError ? 500 : 200;
diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
index c89566371056..23056dab92a4 100644
--- a/fixtures/ssr/src/components/Chrome.js
+++ b/fixtures/ssr/src/components/Chrome.js
@@ -46,7 +46,6 @@ export default class Chrome extends Component {
               __html: `assetManifest = ${JSON.stringify(assets)};`,
             }}
           />
-          <script src={assets['main.js']} />
         </body>
       </html>
     );
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index 3609381253bc..d3a688915784 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -4265,7 +4265,7 @@ longest@^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.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==
@@ -5945,14 +5945,6 @@ sax@^1.2.1, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.1:
-  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"
-
 "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"
diff --git a/fixtures/ssr2/package.json b/fixtures/ssr2/package.json
index 963d9a966c63..de4bbd6aaea6 100644
--- a/fixtures/ssr2/package.json
+++ b/fixtures/ssr2/package.json
@@ -15,8 +15,8 @@
     "concurrently": "^5.3.0",
     "express": "^4.17.1",
     "nodemon": "^2.0.6",
-    "react": "18.0.0-alpha-7ec4c5597",
-    "react-dom": "18.0.0-alpha-7ec4c5597",
+    "react": "link:../../build/node_modules/react",
+    "react-dom": "link:../../build/node_modules/react-dom",
     "react-error-boundary": "^3.1.3",
     "resolve": "1.12.0",
     "rimraf": "^3.0.2",
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index 5ebbed0313c6..fa91f763f290 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -42,6 +42,7 @@ module.exports = function render(url, res) {
       <App assets={assets} />
     </DataProvider>,
     {
+      bootstrapScripts: [assets['main.js']],
       onCompleteShell() {
         // If something errored before we started streaming, we set the error code appropriately.
         res.statusCode = didError ? 500 : 200;
diff --git a/fixtures/ssr2/src/Html.js b/fixtures/ssr2/src/Html.js
index 907318263d90..e834f84bac87 100644
--- a/fixtures/ssr2/src/Html.js
+++ b/fixtures/ssr2/src/Html.js
@@ -28,7 +28,6 @@ export default function Html({assets, children, title}) {
             __html: `assetManifest = ${JSON.stringify(assets)};`,
           }}
         />
-        <script async src={assets['main.js']} />
       </body>
     </html>
   );
diff --git a/fixtures/ssr2/yarn.lock b/fixtures/ssr2/yarn.lock
new file mode 100644
index 000000000000..150ed04aa0d1
--- /dev/null
+++ b/fixtures/ssr2/yarn.lock
@@ -0,0 +1,5277 @@
+# 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/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", "@babel/generator@^7.15.4":
+  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/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-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-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-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-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-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/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/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/traverse@^7.12.1", "@babel/traverse@^7.14.2", "@babel/traverse@^7.15.4":
+  version "7.15.4"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.15.4.tgz#ff8510367a144bfbff552d9e18e28f3e2889c22d"
+  integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/generator" "^7.15.4"
+    "@babel/helper-function-name" "^7.15.4"
+    "@babel/helper-hoist-variables" "^7.15.4"
+    "@babel/helper-split-export-declaration" "^7.15.4"
+    "@babel/parser" "^7.15.4"
+    "@babel/types" "^7.15.4"
+    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"
+
+"@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==
+
+"@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, bn.js@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+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.0.1:
+  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.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
+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:
+  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.5:
+  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@link:../../build/node_modules/react-dom":
+  version "0.0.0"
+  uid ""
+
+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@link:../../build/node_modules/react":
+  version "0.0.0"
+  uid ""
+
+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"
+
+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.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.20.1:
+  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.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/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index ec3a0bfadaee..a2ede1746d08 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -21,6 +21,7 @@ let useSyncExternalStore;
 let useSyncExternalStoreExtra;
 let PropTypes;
 let textCache;
+let window;
 let document;
 let writable;
 let CSPnonce = null;
@@ -56,6 +57,7 @@ describe('ReactDOMFizzServer', () => {
         runScripts: 'dangerously',
       },
     );
+    window = jsdom.window;
     document = jsdom.window.document;
     container = document.getElementById('container');
 
@@ -338,11 +340,18 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    let bootstrapped = false;
+    window.__INIT__ = function() {
+      bootstrapped = true;
+      // Attempt to hydrate the content.
+      ReactDOM.hydrateRoot(container, <App isClient={true} />);
+    };
+
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
-
         {
+          bootstrapScriptContent: '__INIT__();',
           onError(x) {
             loggedErrors.push(x);
           },
@@ -351,10 +360,8 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
+    expect(bootstrapped).toBe(true);
 
-    // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -507,17 +514,27 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    let bootstrapped = false;
+    window.__INIT__ = function() {
+      bootstrapped = true;
+      // Attempt to hydrate the content.
+      ReactDOM.hydrateRoot(container, <App />);
+    };
+
     await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      const {pipe} = ReactDOMFizzServer.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.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 224dac20d1af..53a17c8b6ec2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -71,6 +71,22 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  it('should emit bootstrap script src at the end', async () => {
+    const stream = ReactDOMFizzServer.renderToReadableStream(
+      <div>hello world</div>,
+      {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      },
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
+
   // @gate experimental
   it('emits all HTML as one unit if we wait until the end to start', async () => {
     let hasLoaded = false;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 7fa1c208dffc..bd0ca112a272 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -82,6 +82,24 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  it('should emit bootstrap script src at the end', () => {
+    const {writable, output} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>hello world</div>,
+      {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      },
+    );
+    pipe(writable);
+    jest.runAllTimers();
+    expect(output.result).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
+
   // @gate experimental
   it('should start writing after pipe', () => {
     const {writable, output} = getTestWritable();
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 2865ef46b257..907f0823cffe 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -27,6 +27,9 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string>,
+  bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onCompleteShell?: () => void,
@@ -43,6 +46,9 @@ function renderToReadableStream(
     createResponseState(
       options ? options.identifierPrefix : undefined,
       options ? options.nonce : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
     ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index fe532a32c3b5..33a7083bb95e 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -32,6 +32,9 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string>,
+  bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   onCompleteShell?: () => void,
   onCompleteAll?: () => void,
@@ -51,6 +54,9 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
     createResponseState(
       options ? options.identifierPrefix : undefined,
       options ? options.nonce : undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
     ),
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 67d90f851345..1f5a7a65bed5 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -59,6 +59,7 @@ export const isPrimaryRenderer = true;
 
 // Per response, global state that is not contextual to the rendering subtree.
 export type ResponseState = {
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
@@ -73,11 +74,19 @@ export type ResponseState = {
 };
 
 const startInlineScript = stringToPrecomputedChunk('<script>');
+const endInlineScript = stringToPrecomputedChunk('</script>');
+
+const startScriptSrc = stringToPrecomputedChunk('<script src="');
+const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
   nonce: string | void,
+  bootstrapScriptContent: string | void,
+  bootstrapScripts: Array<string> | void,
+  bootstrapModules: Array<string> | void,
 ): ResponseState {
   const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
   const inlineScriptWithNonce =
@@ -86,7 +95,34 @@ export function createResponseState(
       : stringToPrecomputedChunk(
           '<script nonce="' + escapeTextForBrowser(nonce) + '">',
         );
+  const bootstrapChunks = [];
+  if (bootstrapScriptContent !== undefined) {
+    bootstrapChunks.push(
+      inlineScriptWithNonce,
+      stringToChunk(escapeTextForBrowser(bootstrapScriptContent)),
+      endInlineScript,
+    );
+  }
+  if (bootstrapScripts !== undefined) {
+    for (let i = 0; i < bootstrapScripts.length; i++) {
+      bootstrapChunks.push(
+        startScriptSrc,
+        stringToChunk(escapeTextForBrowser(bootstrapScripts[i])),
+        endAsyncScript,
+      );
+    }
+  }
+  if (bootstrapModules !== undefined) {
+    for (let i = 0; i < bootstrapModules.length; i++) {
+      bootstrapChunks.push(
+        startModuleSrc,
+        stringToChunk(escapeTextForBrowser(bootstrapModules[i])),
+        endAsyncScript,
+      );
+    }
+  }
   return {
+    bootstrapChunks: bootstrapChunks,
     startInlineScript: inlineScriptWithNonce,
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
@@ -1370,6 +1406,18 @@ export function pushEndInstance(
   }
 }
 
+export function writeCompletedRoot(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  const bootstrapChunks = responseState.bootstrapChunks;
+  let result = true;
+  for (let i = 0; i < bootstrapChunks.length; i++) {
+    result = writeChunk(destination, bootstrapChunks[i]);
+  }
+  return result;
+}
+
 // Structural Nodes
 
 // A placeholder is a node inside a hidden partial tree that can be filled in later, but before
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 723c03dfdba1..7373e7168176 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -29,6 +29,7 @@ export const isPrimaryRenderer = false;
 
 export type ResponseState = {
   // Keep this in sync with ReactDOMServerFormatConfig
+  bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   startInlineScript: PrecomputedChunk,
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
@@ -50,6 +51,7 @@ export function createResponseState(
   const responseState = createResponseStateImpl(identifierPrefix, undefined);
   return {
     // Keep this in sync with ReactDOMServerFormatConfig
+    bootstrapChunks: responseState.bootstrapChunks,
     startInlineScript: responseState.startInlineScript,
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
@@ -95,6 +97,7 @@ export {
   writeStartPendingSuspenseBoundary,
   writeEndPendingSuspenseBoundary,
   writePlaceholder,
+  writeCompletedRoot,
 } from './ReactDOMServerFormatConfig';
 
 import {stringToChunk} from 'react-server/src/ReactServerStreamConfig';
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 214561a78860..3daa48f420b1 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -164,6 +164,13 @@ export function pushEndInstance(
   target.push(END);
 }
 
+export function writeCompletedRoot(
+  destination: Destination,
+  responseState: ResponseState,
+): boolean {
+  return true;
+}
+
 // IDs are formatted as little endian Uint16
 function formatID(id: number): Uint8Array {
   if (id > 0xffff) {
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 080c3042080a..efcf727eac89 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -126,6 +126,13 @@ const ReactNoopServer = ReactFizzServer({
     target.push(POP);
   },
 
+  writeCompletedRoot(
+    destination: Destination,
+    responseState: ResponseState,
+  ): boolean {
+    return true;
+  },
+
   writePlaceholder(
     destination: Destination,
     responseState: ResponseState,
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index b5b6ba84e77d..35a8143125d7 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -28,6 +28,9 @@ import {
 
 type Options = {
   identifierPrefix?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts: Array<string>,
+  bootstrapModules: Array<string>,
   progressiveChunkSize?: number,
   onError: (error: mixed) => void,
 };
@@ -46,7 +49,13 @@ function renderToStream(children: ReactNodeList, options: Options): Stream {
   };
   const request = createRequest(
     children,
-    createResponseState(options ? options.identifierPrefix : undefined),
+    createResponseState(
+      options ? options.identifierPrefix : undefined,
+      undefined,
+      options ? options.bootstrapScriptContent : undefined,
+      options ? options.bootstrapScripts : undefined,
+      options ? options.bootstrapModules : undefined,
+    ),
     createRootFormatContext(undefined),
     options ? options.progressiveChunkSize : undefined,
     options.onError,
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index 4cf8bb8f7bf6..7444ae6f9093 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -48,6 +48,21 @@ describe('ReactDOMServerFB', () => {
     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(
+      `"<div>hello world</div><script>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;
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 4ab2f06d518d..6692b9264864 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -36,6 +36,7 @@ import {
   closeWithError,
 } from './ReactServerStreamConfig';
 import {
+  writeCompletedRoot,
   writePlaceholder,
   writeStartCompletedSuspenseBoundary,
   writeStartPendingSuspenseBoundary,
@@ -1779,6 +1780,7 @@ function flushCompletedQueues(
     if (completedRootSegment !== null && request.pendingRootTasks === 0) {
       flushSegment(request, destination, completedRootSegment);
       request.completedRootSegment = null;
+      writeCompletedRoot(destination, request.responseState);
     }
 
     // We emit client rendering instructions for already emitted boundaries first.
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index d816198c6418..8cfe59ce1628 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -44,6 +44,7 @@ export const pushStartCompletedSuspenseBoundary =
   $$$hostConfig.pushStartCompletedSuspenseBoundary;
 export const pushEndCompletedSuspenseBoundary =
   $$$hostConfig.pushEndCompletedSuspenseBoundary;
+export const writeCompletedRoot = $$$hostConfig.writeCompletedRoot;
 export const writePlaceholder = $$$hostConfig.writePlaceholder;
 export const writeStartCompletedSuspenseBoundary =
   $$$hostConfig.writeStartCompletedSuspenseBoundary;

From 5ca4b0433205d01294b6306a3a90af1103e37dc9 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 20 Oct 2021 09:50:26 -0400
Subject: [PATCH 0972/1603] Dev Tools: Relax constraint on passing extensionId
 for backend init (#22597)

---
 packages/react-devtools-extensions/src/backend.js         | 8 +++++---
 packages/react-devtools-extensions/src/contentScript.js   | 5 +++++
 .../react-devtools-extensions/src/injectGlobalHook.js     | 4 +++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
index aa8578a10864..5b6821bbba03 100644
--- a/packages/react-devtools-extensions/src/backend.js
+++ b/packages/react-devtools-extensions/src/backend.js
@@ -2,7 +2,7 @@
 // Running module factories is intentionally delayed until we know the hook exists.
 // This is to avoid issues like: https://github.com/facebook/react-devtools/issues/1039
 
-/** @flow */
+// @flow strict-local
 
 'use strict';
 
@@ -13,15 +13,16 @@ function welcome(event) {
   ) {
     return;
   }
+  const extensionId = event.data.extensionId;
 
   window.removeEventListener('message', welcome);
 
-  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, extensionId);
 }
 
 window.addEventListener('message', welcome);
 
-function setup(hook) {
+function setup(hook, extensionId) {
   if (hook == null) {
     // DevTools didn't get injected into this page (maybe b'c of the contentType).
     return;
@@ -55,6 +56,7 @@ function setup(hook) {
         {
           source: 'react-devtools-bridge',
           payload: {event, payload},
+          extensionId,
         },
         '*',
         transferable,
diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js
index c914c6e7b3df..179959f7e01e 100644
--- a/packages/react-devtools-extensions/src/contentScript.js
+++ b/packages/react-devtools-extensions/src/contentScript.js
@@ -2,6 +2,8 @@
 
 'use strict';
 
+import {CURRENT_EXTENSION_ID} from './constants';
+
 let backendDisconnected: boolean = false;
 let backendInitialized: boolean = false;
 
@@ -10,6 +12,7 @@ function sayHelloToBackend() {
     {
       source: 'react-devtools-content-script',
       hello: true,
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -20,6 +23,7 @@ function handleMessageFromDevtools(message) {
     {
       source: 'react-devtools-content-script',
       payload: message,
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -49,6 +53,7 @@ function handleDisconnect() {
         type: 'event',
         event: 'shutdown',
       },
+      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index 02d5109e291e..a5d96966c7e1 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -31,12 +31,14 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-  if (data.extensionId !== CURRENT_EXTENSION_ID) {
+  if (data.extensionId != null && data.extensionId !== CURRENT_EXTENSION_ID) {
     if (__DEBUG__) {
       console.log(
         `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
         {
           currentExtension: EXTENSION_INSTALLATION_TYPE,
+          currentExtensionId: CURRENT_EXTENSION_ID,
+          providedExtensionId: data.extensionId,
         },
       );
     }

From c213030b4966e935bb36c138e28761ea22dd837d Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 20 Oct 2021 16:00:13 -0400
Subject: [PATCH 0973/1603] React DevTools 4.20.1 -> 4.20.2 (#22605)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-scheduling-profiler/package.json | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 6 ++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 5f26b46c970f..d57fc10ff97e 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 21babe5e9069..ecafb54ca6d3 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.20.1",
-  "version_name": "4.20.1",
+  "version": "4.20.2",
+  "version_name": "4.20.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 7dab50d1ba25..6b813661e48d 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.20.1",
-  "version_name": "4.20.1",
+  "version": "4.20.2",
+  "version_name": "4.20.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index d83f2f3f50a2..16f4e7821e47 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index be6e005a07ae..7e013af63677 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 6491132afa35..84fdf9d470fa 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 0e0aa8963193..8f916003d79f 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index b22ef0bab433..00240aa38200 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.20.1",
+  "version": "4.20.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.20.1",
+    "react-devtools-core": "4.20.2",
     "update-notifier": "^2.1.0"
   }
 }

From f6abf4b400812c3207ca16aecb84fa3ce352e166 Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Thu, 21 Oct 2021 06:22:41 +0300
Subject: [PATCH 0974/1603] Fix typos (#22494)

---
 packages/react-devtools-shared/src/backend/legacy/renderer.js | 2 +-
 packages/react-dom/src/test-utils/ReactTestUtils.js           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index d799ce72a275..c5684f222fa3 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -716,7 +716,7 @@ export function attach(
 
     // Any time an inspected element has an update,
     // we should update the selected $r value as wel.
-    // Do this before dehyration (cleanForBridge).
+    // Do this before dehydration (cleanForBridge).
     updateSelectedElement(id);
 
     inspectedElement.context = cleanForBridge(
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 1aadc90b250a..c83b072447ba 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -178,7 +178,7 @@ function findAllInRenderedTree(inst, test) {
 }
 
 /**
- * Finds all instance of components in the rendered tree that are DOM
+ * Finds all instances of components in the rendered tree that are DOM
  * components with the class name matching `className`.
  * @return {array} an array of all the matches.
  */
@@ -233,7 +233,7 @@ function findRenderedDOMComponentWithClass(root, className) {
 }
 
 /**
- * Finds all instance of components in the rendered tree that are DOM
+ * Finds all instances of components in the rendered tree that are DOM
  * components with the tag name matching `tagName`.
  * @return {array} an array of all the matches.
  */

From 4ba20579daf119639567f69a0cb38128532754c6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Oct 2021 14:40:41 -0400
Subject: [PATCH 0975/1603] Scheduling Profiler: De-emphasize React internal
 frames (#22588)

This commit adds code to all React bundles to explicitly register the beginning and ending of the module. This is done by creating Error objects (which capture the file name, line number, and column number) and passing them explicitly to a DevTools hook (when present).

Next, as the Scheduling Profiler logs metadata to the User Timing API, it prints these module ranges along with other metadata (like Lane values and profiler version number).

Lastly, the Scheduling Profiler UI compares stack frames to these ranges when drawing the flame graph and dims or de-emphasizes frames that fall within an internal module.

The net effect of this is that user code (and 3rd party code) stands out clearly in the flame graph while React internal modules are dimmed.

Internal module ranges are completely optional. Older profiling samples, or ones recorded without the React DevTools extension installed, will simply not dim the internal frames.
---
 .../src/checkForDuplicateInstallations.js     |  8 +-
 .../src/constants.js                          | 10 ++-
 .../src/CanvasPage.js                         |  1 +
 .../src/content-views/FlamechartView.js       | 40 ++++++++--
 .../src/content-views/constants.js            | 12 +++
 .../utils/__tests__/__modules__/module-one.js | 16 ++++
 .../utils/__tests__/__modules__/module-two.js | 18 +++++
 .../utils/__tests__/moduleFilters-test.js     | 79 +++++++++++++++++++
 .../src/content-views/utils/moduleFilters.js  | 69 ++++++++++++++++
 .../__tests__/preprocessData-test.internal.js |  4 +
 .../src/import-worker/preprocessData.js       | 59 ++++++++++++++
 .../src/types.js                              | 12 +++
 .../src/backend/types.js                      |  5 ++
 .../react-devtools-shared/src/constants.js    | 10 +++
 packages/react-devtools-shared/src/hook.js    | 41 ++++++++++
 .../src/SchedulingProfiler.js                 | 17 ++++
 .../shared/registerInternalModuleStart.js     | 20 +++++
 packages/shared/registerInternalModuleStop.js | 20 +++++
 scripts/rollup/build.js                       |  3 +-
 scripts/rollup/bundles.js                     | 62 +++++++++++++++
 scripts/rollup/wrappers.js                    | 52 +++++++++++-
 21 files changed, 543 insertions(+), 15 deletions(-)
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
 create mode 100644 packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
 create mode 100644 packages/shared/registerInternalModuleStart.js
 create mode 100644 packages/shared/registerInternalModuleStop.js

diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
index d86cac770929..01db8edb34f7 100644
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
@@ -9,13 +9,15 @@
 
 declare var chrome: any;
 
-import {__DEBUG__} from 'react-devtools-shared/src/constants';
+import {
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+  __DEBUG__,
+} from 'react-devtools-shared/src/constants';
 import {getBrowserName} from './utils';
 import {
   EXTENSION_INSTALL_CHECK,
   EXTENSION_INSTALLATION_TYPE,
-  INTERNAL_EXTENSION_ID,
-  LOCAL_EXTENSION_ID,
 } from './constants';
 
 const IS_CHROME = getBrowserName() === 'Chrome';
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
index 310bbaca1156..c17ad4d64acd 100644
--- a/packages/react-devtools-extensions/src/constants.js
+++ b/packages/react-devtools-extensions/src/constants.js
@@ -7,6 +7,12 @@
  * @flow strict-local
  */
 
+import {
+  CHROME_WEBSTORE_EXTENSION_ID,
+  INTERNAL_EXTENSION_ID,
+  LOCAL_EXTENSION_ID,
+} from 'react-devtools-shared/src/constants';
+
 declare var chrome: any;
 
 export const CURRENT_EXTENSION_ID = chrome.runtime.id;
@@ -15,10 +21,6 @@ export const EXTENSION_INSTALL_CHECK = 'extension-install-check';
 export const SHOW_DUPLICATE_EXTENSION_WARNING =
   'show-duplicate-extension-warning';
 
-export const CHROME_WEBSTORE_EXTENSION_ID = 'fmkadmapgofadopljbjfkapdkoienihi';
-export const INTERNAL_EXTENSION_ID = 'dnjnjgbfilfphmojnmhliehogmojhclc';
-export const LOCAL_EXTENSION_ID = 'ikiahnapldjmdmpkmfhjdjilojjhgcbf';
-
 export const EXTENSION_INSTALLATION_TYPE:
   | 'public'
   | 'internal'
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
index 48efcf8105e7..ab5c828280c0 100644
--- a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
+++ b/packages/react-devtools-scheduling-profiler/src/CanvasPage.js
@@ -374,6 +374,7 @@ function AutoSizedCanvas({
       surface,
       defaultFrame,
       data.flamechart,
+      data.internalModuleSourceToRanges,
       data.duration,
     );
     flamechartViewRef.current = flamechartView;
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
index 86f411a5b6e2..bbc8dcf13936 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
@@ -11,6 +11,7 @@ import type {
   Flamechart,
   FlamechartStackFrame,
   FlamechartStackLayer,
+  InternalModuleSourceToRanges,
 } from '../types';
 import type {
   Interaction,
@@ -30,6 +31,7 @@ import {
   rectIntersectsRect,
   verticallyStackedLayout,
 } from '../view-base';
+import {isInternalModule} from './utils/moduleFilters';
 import {
   durationToWidth,
   positioningScaleFactor,
@@ -76,6 +78,8 @@ class FlamechartStackLayerView extends View {
   /** A set of `stackLayer`'s frames, for efficient lookup. */
   _stackFrameSet: Set<FlamechartStackFrame>;
 
+  _internalModuleSourceToRanges: InternalModuleSourceToRanges;
+
   _intrinsicSize: Size;
 
   _hoveredStackFrame: FlamechartStackFrame | null = null;
@@ -85,11 +89,13 @@ class FlamechartStackLayerView extends View {
     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,
@@ -160,9 +166,19 @@ class FlamechartStackLayerView extends View {
       }
 
       const showHoverHighlight = _hoveredStackFrame === _stackLayer[i];
-      context.fillStyle = showHoverHighlight
-        ? hoverColorForStackFrame(stackFrame)
-        : defaultColorForStackFrame(stackFrame);
+
+      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(
@@ -172,7 +188,9 @@ class FlamechartStackLayerView extends View {
         drawableRect.size.height,
       );
 
-      drawText(name, context, nodeRect, drawableRect);
+      drawText(name, context, nodeRect, drawableRect, {
+        fillStyle: textFillStyle,
+      });
     }
 
     // Render bottom border.
@@ -264,13 +282,22 @@ export class FlamechartView extends View {
     surface: Surface,
     frame: Rect,
     flamechart: Flamechart,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
     duration: number,
   ) {
     super(surface, frame, layeredLayout);
-    this.setDataAndUpdateSubviews(flamechart, duration);
+    this.setDataAndUpdateSubviews(
+      flamechart,
+      internalModuleSourceToRanges,
+      duration,
+    );
   }
 
-  setDataAndUpdateSubviews(flamechart: Flamechart, duration: number) {
+  setDataAndUpdateSubviews(
+    flamechart: Flamechart,
+    internalModuleSourceToRanges: InternalModuleSourceToRanges,
+    duration: number,
+  ) {
     const {surface, frame, _onHover, _hoveredStackFrame} = this;
 
     // Clear existing rows on data update
@@ -285,6 +312,7 @@ export class FlamechartView extends View {
         surface,
         frame,
         stackLayer,
+        internalModuleSourceToRanges,
         duration,
       );
       this._verticalStackView.addSubview(rowView);
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index a715945f77e9..4d896d1967e9 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -45,6 +45,9 @@ export const MIN_INTERVAL_SIZE_PX = 70;
 // TODO Replace this with "export let" vars
 export let COLORS = {
   BACKGROUND: '',
+  INTERNAL_MODULE_FRAME: '',
+  INTERNAL_MODULE_FRAME_HOVER: '',
+  INTERNAL_MODULE_FRAME_TEXT: '',
   NATIVE_EVENT: '',
   NATIVE_EVENT_HOVER: '',
   NETWORK_PRIMARY: '',
@@ -107,6 +110,15 @@ export function updateColorsToMatchTheme(element: Element): boolean {
 
   COLORS = {
     BACKGROUND: computedStyle.getPropertyValue('--color-background'),
+    INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-internal-module',
+    ),
+    INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-internal-module-hover',
+    ),
+    INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
+      '--color-scheduling-profiler-internal-module-text',
+    ),
     NATIVE_EVENT: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-native-event',
     ),
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
new file mode 100644
index 000000000000..6c3ace6bfbc6
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
new file mode 100644
index 000000000000..994f31790055
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export 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-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
new file mode 100644
index 000000000000..d84840371daa
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {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-scheduling-profiler/src/content-views/utils/moduleFilters.js b/packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
new file mode 100644
index 000000000000..7030e6124b60
--- /dev/null
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import 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 =
+        locationLine > startStackFrame.lineNumber ||
+        (locationLine === startStackFrame.lineNumber &&
+          locationColumn >= startStackFrame.columnNumber);
+      const isBeforeStop =
+        locationLine < stopStackFrame.lineNumber ||
+        (locationLine === stopStackFrame.lineNumber &&
+          locationColumn <= stopStackFrame.columnNumber);
+
+      if (isAfterStart && isBeforeStop) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index e458f8060f84..f8690dc57447 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -282,6 +282,7 @@ describe('preprocessData', () => {
           "componentMeasures": Array [],
           "duration": 0.005,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
@@ -449,6 +450,7 @@ describe('preprocessData', () => {
           "componentMeasures": Array [],
           "duration": 0.011,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
@@ -636,6 +638,7 @@ describe('preprocessData', () => {
           "componentMeasures": Array [],
           "duration": 0.013,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
@@ -914,6 +917,7 @@ describe('preprocessData', () => {
           ],
           "duration": 0.031,
           "flamechart": Array [],
+          "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
             0 => "Sync",
             1 => "InputContinuousHydration",
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index aff78142b81a..6c41de1e3e27 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -13,6 +13,7 @@ import {
 } from '@elg/speedscope';
 import type {TimelineEvent} from '@elg/speedscope';
 import type {
+  ErrorStackFrame,
   BatchUID,
   Flamechart,
   Milliseconds,
@@ -30,6 +31,7 @@ import type {
 import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
 import InvalidProfileError from './InvalidProfileError';
 import {getBatchRange} from '../utils/getBatchRange';
+import ErrorStackParser from 'error-stack-parser';
 
 type MeasureStackElement = {|
   type: ReactMeasureType,
@@ -43,6 +45,8 @@ type ProcessorState = {|
   asyncProcessingPromises: Promise<any>[],
   batchUID: BatchUID,
   currentReactComponentMeasure: ReactComponentMeasure | null,
+  internalModuleCurrentStackFrame: ErrorStackFrame | null,
+  internalModuleStackStringSet: Set<string>,
   measureStack: MeasureStackElement[],
   nativeEventStack: NativeEvent[],
   nextRenderShouldGenerateNewBatchID: boolean,
@@ -793,6 +797,49 @@ function processTimelineEvent(
         );
       } // eslint-disable-line brace-style
 
+      // Internal module ranges
+      else if (name.startsWith('--react-internal-module-start-')) {
+        const stackFrameStart = name.substr(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.substr(19);
+
+        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);
+            }
+          }
+        }
+      } // eslint-disable-line brace-style
+
       // Other user timing marks/measures
       else if (ph === 'R' || ph === 'n') {
         // User Timing mark
@@ -855,6 +902,15 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
   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<ReactProfilerData> {
@@ -870,6 +926,7 @@ export default async function preprocessData(
     componentMeasures: [],
     duration: 0,
     flamechart,
+    internalModuleSourceToRanges: new Map(),
     laneToLabelMap: new Map(),
     laneToReactMeasureMap,
     nativeEvents: [],
@@ -913,6 +970,8 @@ export default async function preprocessData(
     asyncProcessingPromises: [],
     batchUID: 0,
     currentReactComponentMeasure: null,
+    internalModuleCurrentStackFrame: null,
+    internalModuleStackStringSet: new Set(),
     measureStack: [],
     nativeEventStack: [],
     nextRenderShouldGenerateNewBatchID: true,
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index 4bfafe9a2ecc..e5b14e7897ac 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -17,6 +17,12 @@ export type Return<T> = Return_<*, T>;
 
 // Project types
 
+export type ErrorStackFrame = {
+  fileName: string,
+  lineNumber: number,
+  columnNumber: number,
+};
+
 export type Milliseconds = number;
 
 export type ReactLane = number;
@@ -169,11 +175,17 @@ export type ViewState = {|
   viewToMutableViewStateMap: Map<string, mixed>,
 |};
 
+export type InternalModuleSourceToRanges = Map<
+  string,
+  Array<[ErrorStackFrame, ErrorStackFrame]>,
+>;
+
 export type ReactProfilerData = {|
   batchUIDToMeasuresMap: Map<BatchUID, ReactMeasure[]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
   flamechart: Flamechart,
+  internalModuleSourceToRanges: InternalModuleSourceToRanges,
   laneToLabelMap: Map<ReactLane, string>,
   laneToReactMeasureMap: Map<ReactLane, ReactMeasure[]>,
   nativeEvents: NativeEvent[],
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 3f623ea656e4..46e128779798 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -420,6 +420,11 @@ export type DevToolsHook = {
     didError?: boolean,
   ) => void,
 
+  // Scheduling Profiler internal module filtering
+  getInternalModuleRanges: () => Array<[string, string]>,
+  registerInternalModuleStart: (moduleStartError: Error) => void,
+  registerInternalModuleStop: (moduleStopError: Error) => void,
+
   // Testing
   dangerous_setTargetConsoleForTesting?: (fakeConsole: Object) => void,
   ...
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 40c28a0f6abd..3c3aaae2fc46 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -7,6 +7,10 @@
  * @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;
 
@@ -147,6 +151,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#dcdcdc',
     '--color-resize-bar-border': '#d1d1d1',
     '--color-resize-bar-dot': '#333333',
+    '--color-scheduling-profiler-internal-module': '#d1d1d1',
+    '--color-scheduling-profiler-internal-module-hover': '#c9c9c9',
+    '--color-scheduling-profiler-internal-module-text': '#444',
     '--color-scheduling-profiler-native-event': '#ccc',
     '--color-scheduling-profiler-native-event-hover': '#aaa',
     '--color-scheduling-profiler-network-primary': '#fcf3dc',
@@ -288,6 +295,9 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#31363f',
     '--color-resize-bar-border': '#3d424a',
     '--color-resize-bar-dot': '#cfd1d5',
+    '--color-scheduling-profiler-internal-module': '#303542',
+    '--color-scheduling-profiler-internal-module-hover': '#363b4a',
+    '--color-scheduling-profiler-internal-module-text': '#7f8899',
     '--color-scheduling-profiler-native-event': '#b2b2b2',
     '--color-scheduling-profiler-native-event-hover': '#949494',
     '--color-scheduling-profiler-network-primary': '#fcf3dc',
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 6f34f86132ab..e265212e31c4 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -490,6 +490,40 @@ export function installHook(target: any): DevToolsHook | null {
     }
   }
 
+  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) {
+        moduleRanges.push([startStackFrame, stopStackFrame]);
+      }
+    }
+  }
+
   // TODO: More meaningful names for "rendererInterfaces" and "renderers".
   const fiberRoots = {};
   const rendererInterfaces = new Map();
@@ -520,6 +554,13 @@ export function installHook(target: any): DevToolsHook | null {
     onCommitFiberRoot,
     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 (__TEST__) {
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 03148d499282..4df55137fda9 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -98,6 +98,22 @@ function markVersionMetadata() {
   markAndClear(`--profiler-version-${SCHEDULING_PROFILER_VERSION}`);
 }
 
+function markInternalModuleRanges() {
+  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+  if (
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === 'function'
+  ) {
+    const ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
+    for (let i = 0; i < ranges.length; i++) {
+      const [startStackFrame, stopStackFrame] = ranges[i];
+
+      markAndClear(`--react-internal-module-start-${startStackFrame}`);
+      markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+    }
+  }
+}
+
 export function markCommitStarted(lanes: Lanes): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
@@ -114,6 +130,7 @@ export function markCommitStarted(lanes: Lanes): void {
       // we can log this data only once (when started) and remove the per-commit logging.
       markVersionMetadata();
       markLaneToLabelMetadata();
+      markInternalModuleRanges();
     }
   }
 }
diff --git a/packages/shared/registerInternalModuleStart.js b/packages/shared/registerInternalModuleStart.js
new file mode 100644
index 000000000000..aa1154fe9f1b
--- /dev/null
+++ b/packages/shared/registerInternalModuleStart.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+
+// Don't require this file directly; it's embedded by Rollup during build.
+
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
+}
diff --git a/packages/shared/registerInternalModuleStop.js b/packages/shared/registerInternalModuleStop.js
new file mode 100644
index 000000000000..dab139f2557f
--- /dev/null
+++ b/packages/shared/registerInternalModuleStop.js
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
+
+// Don't require this file directly; it's embedded by Rollup during build.
+
+if (
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
+  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
+    'function'
+) {
+  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+}
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 4f7d26cddbec..7e29c0e8c54d 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -440,7 +440,8 @@ function getPlugins(
           bundleType,
           globalName,
           filename,
-          moduleType
+          moduleType,
+          bundle.wrapWithModuleBoundaries
         );
       },
     },
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index c24281d43ef0..af7b30b7feb9 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -80,6 +80,7 @@ const bundles = [
     entry: 'react',
     global: 'React',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -90,6 +91,7 @@ const bundles = [
     entry: 'react/unstable-shared-subset',
     global: 'React',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -108,6 +110,7 @@ const bundles = [
     entry: 'react/jsx-runtime',
     global: 'JSXRuntime',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -128,6 +131,7 @@ const bundles = [
     entry: 'react/jsx-dev-runtime',
     global: 'JSXDEVRuntime',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -138,6 +142,7 @@ const bundles = [
     entry: 'react-fetch/index.browser',
     global: 'ReactFetch',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -148,6 +153,7 @@ const bundles = [
     entry: 'react-fetch/index.node',
     global: 'ReactFetch',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'http', 'https'],
   },
 
@@ -158,6 +164,7 @@ const bundles = [
     entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -168,6 +175,7 @@ const bundles = [
     entry: 'react-fs/index.node.server',
     global: 'ReactFilesystem',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'fs/promises', 'path'],
   },
 
@@ -178,6 +186,7 @@ const bundles = [
     entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -188,6 +197,7 @@ const bundles = [
     entry: 'react-pg/index.node.server',
     global: 'ReactPostgres',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'pg'],
   },
 
@@ -208,6 +218,7 @@ const bundles = [
     entry: 'react-dom',
     global: 'ReactDOM',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -219,6 +230,7 @@ const bundles = [
     global: 'ReactDOMForked',
     enableNewReconciler: true,
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -229,6 +241,7 @@ const bundles = [
     entry: 'react-dom/test-utils',
     global: 'ReactTestUtils',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'react-dom'],
   },
 
@@ -240,6 +253,7 @@ const bundles = [
     entry: 'react-dom/testing',
     global: 'ReactDOMTesting',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -253,6 +267,7 @@ const bundles = [
     name: 'react-dom-server-legacy.browser',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
     babel: opts =>
       Object.assign({}, opts, {
@@ -268,6 +283,7 @@ const bundles = [
     name: 'react-dom-server-legacy.node',
     externals: ['react', 'stream'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -284,6 +300,7 @@ const bundles = [
     name: 'react-dom-server.browser',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
   {
@@ -293,6 +310,7 @@ const bundles = [
     name: 'react-dom-server.node',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
   {
@@ -301,6 +319,7 @@ const bundles = [
     entry: 'react-server-dom-relay/src/ReactDOMServerFB',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -311,6 +330,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/writer.browser.server',
     global: 'ReactServerDOMWriter',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
   {
@@ -319,6 +339,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/writer.node.server',
     global: 'ReactServerDOMWriter',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -329,6 +350,7 @@ const bundles = [
     entry: 'react-server-dom-webpack',
     global: 'ReactServerDOMReader',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -339,6 +361,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/plugin',
     global: 'ReactServerWebpackPlugin',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['fs', 'path', 'url', 'neo-async'],
   },
 
@@ -349,6 +372,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/node-loader',
     global: 'ReactServerWebpackNodeLoader',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['acorn'],
   },
 
@@ -359,6 +383,7 @@ const bundles = [
     entry: 'react-server-dom-webpack/node-register',
     global: 'ReactFlightWebpackNodeRegister',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['url', 'module'],
   },
 
@@ -369,6 +394,7 @@ const bundles = [
     entry: 'react-server-dom-relay/server',
     global: 'ReactFlightDOMRelayServer', // TODO: Rename to Writer
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightDOMRelayServerIntegration',
@@ -383,6 +409,7 @@ const bundles = [
     entry: 'react-server-dom-relay',
     global: 'ReactFlightDOMRelayClient', // TODO: Rename to Reader
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
@@ -397,6 +424,7 @@ const bundles = [
     entry: 'react-server-native-relay/server',
     global: 'ReactFlightNativeRelayServer', // TODO: Rename to Writer
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightNativeRelayServerIntegration',
@@ -412,6 +440,7 @@ const bundles = [
     entry: 'react-server-native-relay',
     global: 'ReactFlightNativeRelayClient', // TODO: Rename to Reader
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'ReactFlightNativeRelayClientIntegration',
@@ -427,6 +456,7 @@ const bundles = [
     entry: 'react-suspense-test-utils',
     global: 'ReactSuspenseTestUtils',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -445,6 +475,7 @@ const bundles = [
     global: 'ReactART',
     externals: ['react'],
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         // Include JSX
@@ -468,6 +499,7 @@ const bundles = [
     global: 'ReactNativeRenderer',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -482,6 +514,7 @@ const bundles = [
     global: 'ReactNativeRenderer',
     externals: ['react-native'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -500,6 +533,7 @@ const bundles = [
     global: 'ReactFabric',
     externals: ['react-native', 'ReactNativeInternalFeatureFlags'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -514,6 +548,7 @@ const bundles = [
     global: 'ReactFabric',
     externals: ['react-native'],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -544,6 +579,7 @@ const bundles = [
       'ReactNativeInternalFeatureFlags',
     ],
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -559,6 +595,7 @@ const bundles = [
     entry: 'react-noop-renderer',
     global: 'ReactNoopRenderer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
   },
 
@@ -569,6 +606,7 @@ const bundles = [
     entry: 'react-noop-renderer/persistent',
     global: 'ReactNoopRendererPersistent',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -579,6 +617,7 @@ const bundles = [
     entry: 'react-noop-renderer/server',
     global: 'ReactNoopRendererServer',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },
 
@@ -589,6 +628,7 @@ const bundles = [
     entry: 'react-noop-renderer/flight-server',
     global: 'ReactNoopFlightServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'scheduler',
@@ -604,6 +644,7 @@ const bundles = [
     entry: 'react-noop-renderer/flight-client',
     global: 'ReactNoopFlightClient',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [
       'react',
       'scheduler',
@@ -619,6 +660,7 @@ const bundles = [
     entry: 'react-reconciler',
     global: 'ReactReconciler',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -629,6 +671,7 @@ const bundles = [
     entry: 'react-server',
     global: 'ReactServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -639,6 +682,7 @@ const bundles = [
     entry: 'react-server/flight',
     global: 'ReactFlightServer',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -649,6 +693,7 @@ const bundles = [
     entry: 'react-client/flight',
     global: 'ReactFlightClient',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
 
@@ -659,6 +704,7 @@ const bundles = [
     entry: 'react-reconciler/reflection',
     global: 'ReactFiberTreeReflection',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -669,6 +715,7 @@ const bundles = [
     entry: 'react-reconciler/constants',
     global: 'ReactReconcilerConstants',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -686,6 +733,7 @@ const bundles = [
     entry: 'react-is',
     global: 'ReactIs',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -696,6 +744,7 @@ const bundles = [
     entry: 'react-debug-tools',
     global: 'ReactDebugTools',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -708,6 +757,7 @@ const bundles = [
     entry: 'react-cache',
     global: 'ReactCacheOld',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler'],
   },
 
@@ -719,6 +769,7 @@ const bundles = [
     global: 'createSubscription',
     externals: ['react'],
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     babel: opts =>
       Object.assign({}, opts, {
         plugins: opts.plugins.concat([
@@ -734,6 +785,7 @@ const bundles = [
     entry: 'use-subscription',
     global: 'useSubscription',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -744,6 +796,7 @@ const bundles = [
     entry: 'use-sync-external-store',
     global: 'useSyncExternalStore',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react'],
   },
 
@@ -754,6 +807,7 @@ const bundles = [
     entry: 'use-sync-external-store/extra',
     global: 'useSyncExternalStoreExtra',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react', 'use-sync-external-store'],
   },
 
@@ -764,6 +818,7 @@ const bundles = [
     entry: 'use-sync-external-store/index.native',
     global: 'useSyncExternalStoreNative',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['react', 'ReactNativeInternalFeatureFlags'],
   },
 
@@ -783,6 +838,7 @@ const bundles = [
     entry: 'scheduler',
     global: 'Scheduler',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: true,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -802,6 +858,7 @@ const bundles = [
     entry: 'scheduler/unstable_mock',
     global: 'SchedulerMock',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['ReactNativeInternalFeatureFlags'],
   },
 
@@ -818,6 +875,7 @@ const bundles = [
     entry: 'scheduler/unstable_post_task',
     global: 'SchedulerPostTask',
     minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -828,6 +886,7 @@ const bundles = [
     entry: 'jest-react',
     global: 'JestReact',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock'],
   },
 
@@ -842,6 +901,7 @@ const bundles = [
     entry: 'eslint-plugin-react-hooks',
     global: 'ESLintPluginReactHooks',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 
@@ -852,6 +912,7 @@ const bundles = [
     entry: 'react-refresh/babel',
     global: 'ReactFreshBabelPlugin',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
   {
@@ -860,6 +921,7 @@ const bundles = [
     entry: 'react-refresh/runtime',
     global: 'ReactFreshRuntime',
     minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
     externals: [],
   },
 ];
diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index 836929dbec87..c83ecc0fbdb9 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -1,5 +1,7 @@
 'use strict';
 
+const {resolve} = require('path');
+const {readFileSync} = require('fs');
 const {bundleTypes, moduleTypes} = require('./bundles');
 const reactVersion = require('../../package.json').version;
 
@@ -25,6 +27,26 @@ const {
 
 const {RECONCILER} = moduleTypes;
 
+function registerInternalModuleStart(globalName) {
+  const path = resolve(
+    __dirname,
+    '..',
+    '..',
+    'packages/shared/registerInternalModuleStart.js'
+  );
+  return String(readFileSync(path)).trim();
+}
+
+function registerInternalModuleStop(globalName) {
+  const path = resolve(
+    __dirname,
+    '..',
+    '..',
+    'packages/shared/registerInternalModuleStop.js'
+  );
+  return String(readFileSync(path)).trim();
+}
+
 const license = ` * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
@@ -319,7 +341,35 @@ ${source}
   },
 };
 
-function wrapBundle(source, bundleType, globalName, filename, moduleType) {
+function wrapBundle(
+  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:
+        // Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
+        // This allows the Scheduling Profiler to de-emphasize (dim) internal stack frames.
+        source = `
+          ${registerInternalModuleStart(globalName)}
+          ${source}
+          ${registerInternalModuleStop(globalName)}
+        `;
+        break;
+    }
+  }
+
   if (moduleType === RECONCILER) {
     // Standalone reconciler is only used by third-party renderers.
     // It is handled separately.

From 0e8a5aff3ddf0f863839a924738f958fd940e3be Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Oct 2021 14:41:44 -0400
Subject: [PATCH 0976/1603] Scheduling Profiler: Add marks for component
 effects (mount and unmount) (#22578)

DevTools (and its profilers) should not require users to be familiar with React internals. Although the scheduling profiler includes a CPU sample flame graph, it's there for advanced use cases and shouldn't be required to identify common performance issues.

This PR proposes adding new marks around component effects. This will enable users to identify components with slow effect create/destroy functions without requiring them to dig through the call stack. (Once #22529 lands, these new marks will also include component stacks, making them more useful still.)

For example, here's a profile with a long-running effect. Without this change, it's not clear why the effects phase takes so long. After this change, it's more clear why that the phase is longer because of a specific component.

We may consider adding similar marks around render phase hooks like useState, useReducer, useMemo. I avoided doing that in this PR because it would be a pretty pervasive change to the ReactFiberHooks file.

Note that this change should have no effect on production bundles since everything is guarded behind a profiling feature flag.

Going to tag more people than I normally would for this pR, since it touches both reconciler and DevTools packages. Feel free to ignore though if you don't have strong feelings.

Note that although this PR adds new marks to the scheduling profiler, it's done in a way that's backwards compatible for older profiles.
---
 .../src/EventTooltip.js                       |  21 +-
 .../content-views/ComponentMeasuresView.js    |  57 +++-
 .../src/content-views/constants.js            |   8 -
 .../__tests__/preprocessData-test.internal.js |  62 +++--
 .../src/import-worker/preprocessData.js       | 181 +++++++++++--
 .../src/types.js                              |   8 +
 .../src/ReactFiberCommitWork.new.js           |  62 ++++-
 .../src/ReactFiberCommitWork.old.js           |  62 ++++-
 .../src/SchedulingProfiler.js                 |  72 ++++++
 .../SchedulingProfiler-test.internal.js       | 243 ++++++++++++++----
 10 files changed, 649 insertions(+), 127 deletions(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
index 9152c7de8f56..d3ca5d5625f1 100644
--- a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
+++ b/packages/react-devtools-scheduling-profiler/src/EventTooltip.js
@@ -140,9 +140,26 @@ const TooltipReactComponentMeasure = ({
 }: {|
   componentMeasure: ReactComponentMeasure,
 |}) => {
-  const {componentName, duration, timestamp, warning} = componentMeasure;
+  const {componentName, duration, timestamp, type, warning} = componentMeasure;
 
-  const label = `${componentName} rendered`;
+  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 (
     <>
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
index c7de8f8897c5..a241498a05a0 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
@@ -76,7 +76,13 @@ export class ComponentMeasuresView extends View {
     showHoverHighlight: boolean,
   ): boolean {
     const {frame} = this;
-    const {componentName, duration, timestamp, warning} = componentMeasure;
+    const {
+      componentName,
+      duration,
+      timestamp,
+      type,
+      warning,
+    } = componentMeasure;
 
     const xStart = timestampToPosition(timestamp, scaleFactor, frame);
     const xStop = timestampToPosition(timestamp + duration, scaleFactor, frame);
@@ -96,6 +102,9 @@ export class ComponentMeasuresView extends View {
       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) {
@@ -103,9 +112,43 @@ export class ComponentMeasuresView extends View {
         ? COLORS.WARNING_BACKGROUND_HOVER
         : COLORS.WARNING_BACKGROUND;
     } else {
-      context.fillStyle = showHoverHighlight
-        ? COLORS.REACT_COMPONENT_MEASURE_HOVER
-        : COLORS.REACT_COMPONENT_MEASURE;
+      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;
+      }
     }
     context.fillRect(
       drawableRect.origin.x,
@@ -114,9 +157,11 @@ export class ComponentMeasuresView extends View {
       drawableRect.size.height,
     );
 
-    const label = `${componentName} rendered - ${formatDuration(duration)}`;
+    const label = `${componentName} ${typeLabel} - ${formatDuration(duration)}`;
 
-    drawText(label, context, componentMeasureRect, drawableRect);
+    drawText(label, context, componentMeasureRect, drawableRect, {
+      fillStyle: textFillStyle,
+    });
 
     return true;
   }
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index 4d896d1967e9..d0895d2aff8e 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -59,8 +59,6 @@ export let COLORS = {
   PRIORITY_LABEL: '',
   USER_TIMING: '',
   USER_TIMING_HOVER: '',
-  REACT_COMPONENT_MEASURE: '',
-  REACT_COMPONENT_MEASURE_HOVER: '',
   REACT_IDLE: '',
   REACT_IDLE_HOVER: '',
   REACT_RENDER: '',
@@ -150,12 +148,6 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     USER_TIMING_HOVER: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-user-timing-hover',
     ),
-    REACT_COMPONENT_MEASURE: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render',
-    ),
-    REACT_COMPONENT_MEASURE_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render-hover',
-    ),
     REACT_IDLE: computedStyle.getPropertyValue(
       '--color-scheduling-profiler-react-idle',
     ),
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index f8690dc57447..30cba586615c 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -840,7 +840,7 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 0,
                 "depth": 0,
-                "duration": 0.0019999999999999983,
+                "duration": 0.004,
                 "lanes": Array [
                   4,
                 ],
@@ -852,11 +852,11 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.010000000000000002,
+                "duration": 0.009999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render-idle",
               },
               Object {
@@ -866,37 +866,37 @@ describe('preprocessData', () => {
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.006000000000000002,
+                "duration": 0.005999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.023,
+                "timestamp": 0.025,
                 "type": "commit",
               },
               Object {
                 "batchUID": 1,
                 "depth": 1,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0009999999999999974,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.027,
+                "timestamp": 0.029,
                 "type": "layout-effects",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0030000000000000027,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.03,
+                "timestamp": 0.032,
                 "type": "passive-effects",
               },
             ],
@@ -906,16 +906,32 @@ describe('preprocessData', () => {
               "componentName": "App",
               "duration": 0.001,
               "timestamp": 0.006,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0.0019999999999999983,
+              "timestamp": 0.017,
+              "type": "passive-effect-mount",
               "warning": null,
             },
             Object {
               "componentName": "App",
               "duration": 0.0010000000000000009,
-              "timestamp": 0.02,
+              "timestamp": 0.022,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0.0010000000000000009,
+              "timestamp": 0.033,
+              "type": "passive-effect-mount",
               "warning": null,
             },
           ],
-          "duration": 0.031,
+          "duration": 0.035,
           "flamechart": Array [],
           "internalModuleSourceToRanges": Map {},
           "laneToLabelMap": Map {
@@ -1000,7 +1016,7 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 0,
                 "depth": 0,
-                "duration": 0.0019999999999999983,
+                "duration": 0.004,
                 "lanes": Array [
                   4,
                 ],
@@ -1010,11 +1026,11 @@ describe('preprocessData', () => {
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.010000000000000002,
+                "duration": 0.009999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render-idle",
               },
               Object {
@@ -1024,37 +1040,37 @@ describe('preprocessData', () => {
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.019,
+                "timestamp": 0.021,
                 "type": "render",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.006000000000000002,
+                "duration": 0.005999999999999998,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.023,
+                "timestamp": 0.025,
                 "type": "commit",
               },
               Object {
                 "batchUID": 1,
                 "depth": 1,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0009999999999999974,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.027,
+                "timestamp": 0.029,
                 "type": "layout-effects",
               },
               Object {
                 "batchUID": 1,
                 "depth": 0,
-                "duration": 0.0010000000000000009,
+                "duration": 0.0030000000000000027,
                 "lanes": Array [
                   4,
                 ],
-                "timestamp": 0.03,
+                "timestamp": 0.032,
                 "type": "passive-effects",
               },
             ],
@@ -1108,7 +1124,7 @@ describe('preprocessData', () => {
               "lanes": Array [
                 4,
               ],
-              "timestamp": 0.017,
+              "timestamp": 0.018,
               "type": "schedule-state-update",
               "warning": null,
             },
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index 6c41de1e3e27..e6bcfc178d00 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -22,6 +22,7 @@ import type {
   Phase,
   ReactLane,
   ReactComponentMeasure,
+  ReactComponentMeasureType,
   ReactMeasure,
   ReactMeasureType,
   ReactProfilerData,
@@ -484,31 +485,13 @@ function processTimelineEvent(
       } else if (name.startsWith('--react-lane-labels-')) {
         const [laneLabelTuplesString] = name.substr(20).split('-');
         updateLaneToLabelMap(currentProfilerData, laneLabelTuplesString);
-      } else if (name.startsWith('--component-render-start-')) {
-        const [componentName] = name.substr(25).split('-');
-
-        if (state.currentReactComponentMeasure !== null) {
-          console.error(
-            'Render started while another render in progress:',
-            state.currentReactComponentMeasure,
-          );
-        }
-
-        state.currentReactComponentMeasure = {
-          componentName,
-          timestamp: startTime,
-          duration: 0,
-          warning: null,
-        };
-      } else if (name === '--component-render-stop') {
-        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-')) {
+        processReactComponentMeasure(
+          name,
+          startTime,
+          currentProfilerData,
+          state,
+        );
       } else if (name.startsWith('--schedule-render-')) {
         const [laneBitmaskString] = name.substr(18).split('-');
 
@@ -868,6 +851,154 @@ function processTimelineEvent(
   }
 }
 
+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: ReactProfilerData,
+  state: ProcessorState,
+): void {
+  if (name.startsWith('--component-render-start-')) {
+    const [componentName] = name.substr(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.substr(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.substr(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.substr(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.substr(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 {
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-scheduling-profiler/src/types.js
index e5b14e7897ac..cf504229b01c 100644
--- a/packages/react-devtools-scheduling-profiler/src/types.js
+++ b/packages/react-devtools-scheduling-profiler/src/types.js
@@ -119,10 +119,18 @@ export type NetworkMeasure = {|
   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,
 |};
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 95c2f3753bfd..235bd7436173 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -30,6 +30,7 @@ import {
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
+  enableSchedulingProfiler,
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
@@ -142,6 +143,16 @@ import {
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
 import {doesFiberContain} from './ReactFiberTreeReflection';
 import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
+import {
+  markComponentPassiveEffectMountStarted,
+  markComponentPassiveEffectMountStopped,
+  markComponentPassiveEffectUnmountStarted,
+  markComponentPassiveEffectUnmountStopped,
+  markComponentLayoutEffectMountStarted,
+  markComponentLayoutEffectMountStopped,
+  markComponentLayoutEffectUnmountStarted,
+  markComponentLayoutEffectUnmountStopped,
+} from './SchedulingProfiler';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -512,7 +523,23 @@ function commitHookEffectListUnmount(
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStarted(finishedWork);
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStarted(finishedWork);
+            }
+          }
+
           safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStopped();
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStopped();
+            }
+          }
         }
       }
       effect = effect.next;
@@ -520,18 +547,34 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
+function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
   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 & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStarted(finishedWork);
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStarted(finishedWork);
+          }
+        }
+
         // Mount
         const create = effect.create;
         effect.destroy = create();
 
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStopped();
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStopped();
+          }
+        }
+
         if (__DEV__) {
           const destroy = effect.destroy;
           if (destroy !== undefined && typeof destroy !== 'function') {
@@ -1180,10 +1223,13 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if (
-                (tag & HookInsertion) !== NoHookEffect ||
-                (tag & HookLayout) !== NoHookEffect
-              ) {
+              if ((tag & HookInsertion) !== NoHookEffect) {
+                safelyCallDestroy(current, nearestMountedAncestor, destroy);
+              } else if ((tag & HookLayout) !== NoHookEffect) {
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStarted(current);
+                }
+
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -1195,6 +1241,10 @@ function commitUnmount(
                 } else {
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
+
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStopped();
+                }
               }
             }
             effect = effect.next;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 8057c415e745..c4da995064d2 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -30,6 +30,7 @@ import {
   enableProfilerTimer,
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
+  enableSchedulingProfiler,
   enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
@@ -142,6 +143,16 @@ import {
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';
 import {doesFiberContain} from './ReactFiberTreeReflection';
 import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
+import {
+  markComponentPassiveEffectMountStarted,
+  markComponentPassiveEffectMountStopped,
+  markComponentPassiveEffectUnmountStarted,
+  markComponentPassiveEffectUnmountStopped,
+  markComponentLayoutEffectMountStarted,
+  markComponentLayoutEffectMountStopped,
+  markComponentLayoutEffectUnmountStarted,
+  markComponentLayoutEffectUnmountStopped,
+} from './SchedulingProfiler';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -512,7 +523,23 @@ function commitHookEffectListUnmount(
         const destroy = effect.destroy;
         effect.destroy = undefined;
         if (destroy !== undefined) {
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStarted(finishedWork);
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStarted(finishedWork);
+            }
+          }
+
           safelyCallDestroy(finishedWork, nearestMountedAncestor, destroy);
+
+          if (enableSchedulingProfiler) {
+            if ((flags & HookPassive) !== NoHookEffect) {
+              markComponentPassiveEffectUnmountStopped();
+            } else if ((flags & HookLayout) !== NoHookEffect) {
+              markComponentLayoutEffectUnmountStopped();
+            }
+          }
         }
       }
       effect = effect.next;
@@ -520,18 +547,34 @@ function commitHookEffectListUnmount(
   }
 }
 
-function commitHookEffectListMount(tag: HookFlags, finishedWork: Fiber) {
+function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
   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 & tag) === tag) {
+      if ((effect.tag & flags) === flags) {
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStarted(finishedWork);
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStarted(finishedWork);
+          }
+        }
+
         // Mount
         const create = effect.create;
         effect.destroy = create();
 
+        if (enableSchedulingProfiler) {
+          if ((flags & HookPassive) !== NoHookEffect) {
+            markComponentPassiveEffectMountStopped();
+          } else if ((flags & HookLayout) !== NoHookEffect) {
+            markComponentLayoutEffectMountStopped();
+          }
+        }
+
         if (__DEV__) {
           const destroy = effect.destroy;
           if (destroy !== undefined && typeof destroy !== 'function') {
@@ -1180,10 +1223,13 @@ function commitUnmount(
           do {
             const {destroy, tag} = effect;
             if (destroy !== undefined) {
-              if (
-                (tag & HookInsertion) !== NoHookEffect ||
-                (tag & HookLayout) !== NoHookEffect
-              ) {
+              if ((tag & HookInsertion) !== NoHookEffect) {
+                safelyCallDestroy(current, nearestMountedAncestor, destroy);
+              } else if ((tag & HookLayout) !== NoHookEffect) {
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStarted(current);
+                }
+
                 if (
                   enableProfilerTimer &&
                   enableProfilerCommitHooks &&
@@ -1195,6 +1241,10 @@ function commitUnmount(
                 } else {
                   safelyCallDestroy(current, nearestMountedAncestor, destroy);
                 }
+
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStopped();
+                }
               }
             }
             effect = effect.next;
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 4df55137fda9..acfb2c3f976d 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -161,6 +161,78 @@ export function markComponentRenderStopped(): void {
   }
 }
 
+export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-passive-effect-mount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentPassiveEffectMountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-mount-stop');
+    }
+  }
+}
+
+export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentPassiveEffectUnmountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-unmount-stop');
+    }
+  }
+}
+
+export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-layout-effect-mount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentLayoutEffectMountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-mount-stop');
+    }
+  }
+}
+
+export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
+      // TODO (scheduling profiler) Add component stack id
+      markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
+    }
+  }
+}
+
+export function markComponentLayoutEffectUnmountStopped(): void {
+  if (enableSchedulingProfiler) {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-unmount-stop');
+    }
+  }
+}
+
 export function markComponentErrored(
   fiber: Fiber,
   thrownValue: mixed,
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 5b58342ee0b2..9b6ec83a40d3 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -608,30 +608,32 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--schedule-state-update-1-Example",
-                "--layout-effects-stop",
-                "--render-start-1",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-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",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--component-layout-effect-mount-start-Example",
+          "--schedule-state-update-1-Example",
+          "--component-layout-effect-mount-stop",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -652,33 +654,35 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--layout-effects-stop",
-                "--commit-stop",
-                "--passive-effects-start-16",
-                "--schedule-state-update-16-Example",
-                "--passive-effects-stop",
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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",
-              ]
-          `);
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+          "--passive-effects-start-16",
+          "--component-passive-effect-mount-start-Example",
+          "--schedule-state-update-16-Example",
+          "--component-passive-effect-mount-stop",
+          "--passive-effects-stop",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+        ]
+      `);
     }
   });
 
@@ -854,4 +858,141 @@ describe('SchedulingProfiler', () => {
       `);
     }
   });
+
+  it('should mark passive and layout effects', async () => {
+    function ComponentWithEffects() {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('layout 1 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('layout 1 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 1 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 1 unmount');
+        };
+      }, []);
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('layout 2 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('layout 2 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 2 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 2 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 3 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 3 unmount');
+        };
+      }, []);
+
+      return null;
+    }
+
+    const renderer = ReactTestRenderer.create(<ComponentWithEffects />, {
+      unstable_isConcurrent: true,
+    });
+
+    expect(Scheduler).toFlushUntilNextPaint([
+      'layout 1 mount',
+      'layout 2 mount',
+    ]);
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-ComponentWithEffects",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--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",
+        ]
+      `);
+    }
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushAndYield([
+      'passive 1 mount',
+      'passive 2 mount',
+      'passive 3 mount',
+    ]);
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--passive-effects-start-16",
+          "--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",
+        ]
+      `);
+    }
+
+    clearPendingMarks();
+
+    renderer.unmount();
+
+    expect(Scheduler).toFlushAndYield([
+      'layout 1 unmount',
+      'layout 2 unmount',
+      'passive 1 unmount',
+      'passive 2 unmount',
+      'passive 3 unmount',
+    ]);
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      expect(getMarks()).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+          "--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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+          "--passive-effects-start-16",
+          "--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",
+        ]
+      `);
+    }
+  });
 });

From bfb40225b509dc65314f3fda95633090bf29ebf0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 21 Oct 2021 15:16:26 -0400
Subject: [PATCH 0977/1603] Scheduling Profiler does not warn about long
 transitions (#22614)

---
 .../__tests__/preprocessData-test.internal.js | 137 ++++++++++++++++++
 .../src/import-worker/preprocessData.js       |  11 +-
 2 files changed, 147 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 30cba586615c..94ada274a770 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -1601,6 +1601,143 @@ describe('preprocessData', () => {
           );
         }
       });
+
+      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.unstable_yieldValue(
+            `Component rendered with value ${value}`,
+          );
+
+          // Fake a long render
+          if (value !== 0) {
+            Scheduler.unstable_yieldValue('Long render');
+            startTime += 20000;
+          }
+
+          React.useLayoutEffect(() => {
+            startTransition(() => {
+              setValue(1);
+            });
+          }, []);
+
+          return value;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component rendered with value 0',
+            'Component rendered with value 0',
+            'Component rendered with value 1',
+            'Long render',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.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();
+          });
+        }
+      });
+
+      it('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.unstable_yieldValue(
+            `Component rendered with value ${value} and deferredValue ${deferredValue}`,
+          );
+
+          // Fake a long render
+          if (deferredValue !== 0) {
+            Scheduler.unstable_yieldValue('Long render');
+            startTime += 20000;
+          }
+
+          React.useLayoutEffect(() => {
+            setValue(1);
+          }, []);
+
+          return value + deferredValue;
+        }
+
+        if (gate(flags => flags.enableSchedulingProfiler)) {
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            '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 = [];
+          clearedMarks.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', () => {
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index e6bcfc178d00..d6c911af1d07 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -1160,7 +1160,16 @@ export default async function preprocessData(
     // See how long the subsequent batch of React work was.
     const [startTime, stopTime] = getBatchRange(batchUID, profilerData);
     if (stopTime - startTime > NESTED_UPDATE_DURATION_THRESHOLD) {
-      schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE;
+      // 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',
+        )
+      ) {
+        schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE;
+      }
     }
   });
   state.potentialSuspenseEventsOutsideOfTransition.forEach(

From fa9bea0c41ccfef5b528ef9b5517607f9f94c52a Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Thu, 21 Oct 2021 14:11:42 -0700
Subject: [PATCH 0978/1603] Initial implementation of cache cleanup (#22510)

This is an initial, partial implementation of a cleanup mechanism for the experimental Cache API. The idea is that consumers of the Cache API can register to be informed when a given Cache instance is no longer needed so that they can perform associated cleanup tasks to free resources stored in the cache. A canonical example would be cancelling pending network requests.

An overview of the high-level changes:

* Changes the `Cache` type from a Map of cache instances to be an object with the original Map of instances, a reference count (to count roughly "active references" to the cache instances - more below), and an AbortController.
* Adds a new public API, `unstable_getCacheSignal(): AbortSignal`, which is callable during render. It returns an AbortSignal tied to the lifetime of the cache - developers can listen for the 'abort' event on the signal, which React now triggers when a given cache instance is no longer referenced.
  * Note that `AbortSignal` is a web standard that is supported by other platform APIs; for example a signal can be passed to `fetch()` to trigger cancellation of an HTTP request.
* Implements the above - triggering the 'abort' event - by handling passive mount/unmount for HostRoot and CacheComponent fiber nodes.

Cases handled:
* Aborted transitions: we clean up a new cache created for an aborted transition
* Suspense: we retain a fresh cache instance until a suspended tree resolves

For follow-ups:
* When a subsequent cache refresh is issued before a previous refresh completes, the refreshes are queued. Fresh cache instances for previous refreshes in the queue should be cleared, retaining only the most recent cache. I plan to address this in a follow-up PR.
* If a refresh is cancelled, the fresh cache should be cleaned up.
---
 .../__snapshots__/profilingCache-test.js.snap |   4 +-
 .../src/server/ReactPartialRendererHooks.js   |   5 +
 .../src/ReactFiberCacheComponent.new.js       |  85 ++-
 .../src/ReactFiberCacheComponent.old.js       |  85 ++-
 .../src/ReactFiberCommitWork.new.js           | 117 ++++
 .../src/ReactFiberCommitWork.old.js           | 117 ++++
 .../src/ReactFiberCompleteWork.new.js         |  59 ++
 .../src/ReactFiberCompleteWork.old.js         |  59 ++
 .../src/ReactFiberHooks.new.js                |  35 +-
 .../src/ReactFiberHooks.old.js                |  35 +-
 .../src/ReactFiberLane.new.js                 |  10 -
 .../src/ReactFiberLane.old.js                 |  10 -
 .../src/ReactFiberRoot.new.js                 |  13 +-
 .../src/ReactFiberRoot.old.js                 |  13 +-
 .../src/ReactFiberWorkLoop.new.js             |  40 ++
 .../src/ReactFiberWorkLoop.old.js             |  40 ++
 .../src/ReactInternalTypes.js                 |   1 +
 .../src/__tests__/ReactCache-test.js          | 651 +++++++++++++++++-
 .../SchedulingProfiler-test.internal.js       | 186 ++---
 .../SchedulingProfilerLabels-test.internal.js |  98 +--
 ...StrictEffectsModeDefaults-test.internal.js |   1 +
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   6 +
 .../unstable-shared-subset.experimental.js    |   1 +
 scripts/jest/setupEnvironment.js              |   4 +
 29 files changed, 1482 insertions(+), 199 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 1462a64195d6..8d7eeb4255a9 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -73,7 +73,7 @@ Object {
     },
   },
   "duration": 15,
-  "effectDuration": null,
+  "effectDuration": 0,
   "fiberActualDurations": Map {
     1 => 15,
     2 => 15,
@@ -86,7 +86,7 @@ Object {
     3 => 3,
     4 => 2,
   },
-  "passiveEffectDuration": null,
+  "passiveEffectDuration": 0,
   "priorityLevel": "Immediate",
   "timestamp": 15,
   "updaters": Array [
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 6e2b715382a0..168fd78f6103 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -216,6 +216,10 @@ export function resetHooksState(): void {
   workInProgressHook = null;
 }
 
+function getCacheSignal() {
+  throw new Error('Not implemented.');
+}
+
 function getCacheForType<T>(resourceType: () => T): T {
   throw new Error('Not implemented.');
 }
@@ -551,6 +555,7 @@ export const Dispatcher: DispatcherType = {
 };
 
 if (enableCache) {
+  Dispatcher.getCacheSignal = getCacheSignal;
   Dispatcher.getCacheForType = getCacheForType;
   Dispatcher.useCacheRefresh = useCacheRefresh;
 }
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 0d284c683ed1..3ad60546c2b0 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -18,8 +18,13 @@ import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 import {pushProvider, popProvider} from './ReactFiberNewContext.new';
+import * as Scheduler from 'scheduler';
 
-export type Cache = Map<() => mixed, mixed>;
+export type Cache = {|
+  controller: AbortController,
+  data: Map<() => mixed, mixed>,
+  refCount: number,
+|};
 
 export type CacheComponentState = {|
   +parent: Cache,
@@ -31,6 +36,13 @@ export type SpawnedCachePool = {|
   +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> = enableCache
   ? {
       $$typeof: REACT_CONTEXT_TYPE,
@@ -57,6 +69,58 @@ let pooledCache: Cache | null = null;
 // cache from the render that suspended.
 const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(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 {
+  if (!enableCache) {
+    return (null: any);
+  }
+  const cache: Cache = {
+    controller: new AbortController(),
+    data: new Map(),
+    refCount: 0,
+  };
+
+  return cache;
+}
+
+export function retainCache(cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  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) {
+  if (!enableCache) {
+    return;
+  }
+  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) {
   if (!enableCache) {
     return;
@@ -78,8 +142,14 @@ export function requestCacheFromPool(renderLanes: Lanes): Cache {
   if (pooledCache !== null) {
     return pooledCache;
   }
-  // Create a fresh cache.
-  pooledCache = new Map();
+  // Create a fresh cache. The pooled cache must be owned - it is freed
+  // in releaseRootPooledCache() - but the cache instance handed out
+  // is retained/released in the commit phase of the component that
+  // references is (ie the host root, cache boundary, suspense component)
+  // Ie, pooledCache is conceptually an Option<Arc<Cache>> (owned),
+  // whereas the return value of this function is a &Arc<Cache> (borrowed).
+  pooledCache = createCache();
+  retainCache(pooledCache);
   return pooledCache;
 }
 
@@ -91,7 +161,13 @@ export function pushRootCachePool(root: FiberRoot) {
   // from `root.pooledCache`. If it's currently `null`, we will lazily
   // initialize it the first type it's requested. However, we only mutate
   // the root itself during the complete/unwind phase of the HostRoot.
-  pooledCache = root.pooledCache;
+  const rootCache = root.pooledCache;
+  if (rootCache != null) {
+    pooledCache = rootCache;
+    root.pooledCache = null;
+  } else {
+    pooledCache = null;
+  }
 }
 
 export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
@@ -157,7 +233,6 @@ export function getSuspendedCachePool(): SpawnedCachePool | null {
   if (!enableCache) {
     return null;
   }
-
   // We check the cache on the stack first, since that's the one any new Caches
   // would have accessed.
   let pool = pooledCache;
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index dd450fff76b5..a00059ededf1 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -18,8 +18,13 @@ import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 import {pushProvider, popProvider} from './ReactFiberNewContext.old';
+import * as Scheduler from 'scheduler';
 
-export type Cache = Map<() => mixed, mixed>;
+export type Cache = {|
+  controller: AbortController,
+  data: Map<() => mixed, mixed>,
+  refCount: number,
+|};
 
 export type CacheComponentState = {|
   +parent: Cache,
@@ -31,6 +36,13 @@ export type SpawnedCachePool = {|
   +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> = enableCache
   ? {
       $$typeof: REACT_CONTEXT_TYPE,
@@ -57,6 +69,58 @@ let pooledCache: Cache | null = null;
 // cache from the render that suspended.
 const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(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 {
+  if (!enableCache) {
+    return (null: any);
+  }
+  const cache: Cache = {
+    controller: new AbortController(),
+    data: new Map(),
+    refCount: 0,
+  };
+
+  return cache;
+}
+
+export function retainCache(cache: Cache) {
+  if (!enableCache) {
+    return;
+  }
+  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) {
+  if (!enableCache) {
+    return;
+  }
+  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) {
   if (!enableCache) {
     return;
@@ -78,8 +142,14 @@ export function requestCacheFromPool(renderLanes: Lanes): Cache {
   if (pooledCache !== null) {
     return pooledCache;
   }
-  // Create a fresh cache.
-  pooledCache = new Map();
+  // Create a fresh cache. The pooled cache must be owned - it is freed
+  // in releaseRootPooledCache() - but the cache instance handed out
+  // is retained/released in the commit phase of the component that
+  // references is (ie the host root, cache boundary, suspense component)
+  // Ie, pooledCache is conceptually an Option<Arc<Cache>> (owned),
+  // whereas the return value of this function is a &Arc<Cache> (borrowed).
+  pooledCache = createCache();
+  retainCache(pooledCache);
   return pooledCache;
 }
 
@@ -91,7 +161,13 @@ export function pushRootCachePool(root: FiberRoot) {
   // from `root.pooledCache`. If it's currently `null`, we will lazily
   // initialize it the first type it's requested. However, we only mutate
   // the root itself during the complete/unwind phase of the HostRoot.
-  pooledCache = root.pooledCache;
+  const rootCache = root.pooledCache;
+  if (rootCache != null) {
+    pooledCache = rootCache;
+    root.pooledCache = null;
+  } else {
+    pooledCache = null;
+  }
 }
 
 export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
@@ -157,7 +233,6 @@ export function getSuspendedCachePool(): SpawnedCachePool | null {
   if (!enableCache) {
     return null;
   }
-
   // We check the cache on the stack first, since that's the one any new Caches
   // would have accessed.
   let pool = pooledCache;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 235bd7436173..efdc515d9c0b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -24,6 +24,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
+import type {Cache} from './ReactFiberCacheComponent.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -39,6 +40,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   warnAboutCallbackRefReturningFunction,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -58,6 +60,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
@@ -153,6 +156,7 @@ import {
   markComponentLayoutEffectUnmountStarted,
   markComponentLayoutEffectUnmountStopped,
 } from './SchedulingProfiler';
+import {releaseCache, retainCache} from './ReactFiberCacheComponent.new';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -2665,6 +2669,82 @@ function commitPassiveMountOnFiber(
       }
       break;
     }
+    case HostRoot: {
+      if (enableCache) {
+        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);
+          }
+        }
+      }
+      break;
+    }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          finishedWork.alternate !== null &&
+          finishedWork.alternate.memoizedState !== null &&
+          finishedWork.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = finishedWork.alternate.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);
+          }
+        }
+      }
+      break;
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        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);
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
@@ -2871,6 +2951,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       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: {
+    //   if (enableCache) {
+    //     const cache = current.memoizedState.cache;
+    //     releaseCache(cache);
+    //   }
+    //   break;
+    // }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        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 CacheComponent: {
+      if (enableCache) {
+        const cache = current.memoizedState.cache;
+        releaseCache(cache);
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index c4da995064d2..7d4d5d7aeece 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -24,6 +24,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
+import type {Cache} from './ReactFiberCacheComponent.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -39,6 +40,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   warnAboutCallbackRefReturningFunction,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -58,6 +60,7 @@ import {
   ScopeComponent,
   OffscreenComponent,
   LegacyHiddenComponent,
+  CacheComponent,
 } from './ReactWorkTags';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
@@ -153,6 +156,7 @@ import {
   markComponentLayoutEffectUnmountStarted,
   markComponentLayoutEffectUnmountStopped,
 } from './SchedulingProfiler';
+import {releaseCache, retainCache} from './ReactFiberCacheComponent.old';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -2665,6 +2669,82 @@ function commitPassiveMountOnFiber(
       }
       break;
     }
+    case HostRoot: {
+      if (enableCache) {
+        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);
+          }
+        }
+      }
+      break;
+    }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          finishedWork.alternate !== null &&
+          finishedWork.alternate.memoizedState !== null &&
+          finishedWork.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = finishedWork.alternate.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);
+          }
+        }
+      }
+      break;
+    }
+    case CacheComponent: {
+      if (enableCache) {
+        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);
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
@@ -2871,6 +2951,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       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: {
+    //   if (enableCache) {
+    //     const cache = current.memoizedState.cache;
+    //     releaseCache(cache);
+    //   }
+    //   break;
+    // }
+    case LegacyHiddenComponent:
+    case OffscreenComponent: {
+      if (enableCache) {
+        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 CacheComponent: {
+      if (enableCache) {
+        const cache = current.memoizedState.cache;
+        releaseCache(cache);
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index dadec516c3a4..20a7fc52db13 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -72,6 +72,7 @@ import {
   ChildDeletion,
   StaticMask,
   MutationMask,
+  Passive,
 } from './ReactFiberFlags';
 
 import {
@@ -848,7 +849,15 @@ function completeWork(
       if (enableCache) {
         popRootCachePool(fiberRoot, renderLanes);
 
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.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);
       }
       popHostContainer(workInProgress);
@@ -1089,6 +1098,29 @@ function completeWork(
         prevDidTimeout = prevState !== null;
       }
 
+      if (enableCache && 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
       // an effect to toggle the subtree's visibility. When we switch from
       // fallback -> primary, the inner Offscreen fiber schedules this effect
@@ -1465,6 +1497,25 @@ function completeWork(
       }
 
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          workInProgress.alternate !== null &&
+          workInProgress.alternate.memoizedState !== null &&
+          workInProgress.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = workInProgress.alternate.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;
+        }
         const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
         if (spawnedCachePool !== null) {
           popCachePool(workInProgress);
@@ -1475,7 +1526,15 @@ function completeWork(
     }
     case CacheComponent: {
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.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;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 06fbf5abff50..305359aef206 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -72,6 +72,7 @@ import {
   ChildDeletion,
   StaticMask,
   MutationMask,
+  Passive,
 } from './ReactFiberFlags';
 
 import {
@@ -848,7 +849,15 @@ function completeWork(
       if (enableCache) {
         popRootCachePool(fiberRoot, renderLanes);
 
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.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);
       }
       popHostContainer(workInProgress);
@@ -1089,6 +1098,29 @@ function completeWork(
         prevDidTimeout = prevState !== null;
       }
 
+      if (enableCache && 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
       // an effect to toggle the subtree's visibility. When we switch from
       // fallback -> primary, the inner Offscreen fiber schedules this effect
@@ -1465,6 +1497,25 @@ function completeWork(
       }
 
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (
+          workInProgress.alternate !== null &&
+          workInProgress.alternate.memoizedState !== null &&
+          workInProgress.alternate.memoizedState.cachePool !== null
+        ) {
+          previousCache = workInProgress.alternate.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;
+        }
         const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
         if (spawnedCachePool !== null) {
           popCachePool(workInProgress);
@@ -1475,7 +1526,15 @@ function completeWork(
     }
     case CacheComponent: {
       if (enableCache) {
+        let previousCache: Cache | null = null;
+        if (workInProgress.alternate !== null) {
+          previousCache = workInProgress.alternate.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;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index afaebd20a526..d21704a1b6fe 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -110,7 +110,7 @@ import {
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
-import {CacheContext} from './ReactFiberCacheComponent.new';
+import {createCache, CacheContext} from './ReactFiberCacheComponent.new';
 import {
   createUpdate as createLegacyQueueUpdate,
   enqueueUpdate as enqueueLegacyQueueUpdate,
@@ -2124,6 +2124,9 @@ function updateRefresh() {
 }
 
 function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
+  if (!enableCache) {
+    return;
+  }
   // 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.
@@ -2139,11 +2142,14 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           entangleLegacyQueueTransitions(root, provider, lane);
         }
 
-        const seededCache = new Map();
+        // 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) {
           // 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.set(seedKey, seedValue);
+          seededCache.data.set(seedKey, seedValue);
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
@@ -2390,15 +2396,23 @@ function markUpdateInDevTools(fiber, lane, action) {
   }
 }
 
+function getCacheSignal(): AbortSignal {
+  if (!enableCache) {
+    throw new Error('Not implemented.');
+  }
+  const cache: Cache = readContext(CacheContext);
+  return cache.controller.signal;
+}
+
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
     throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
-  let cacheForType: T | void = (cache.get(resourceType): any);
+  let cacheForType: T | void = (cache.data.get(resourceType): any);
   if (cacheForType === undefined) {
     cacheForType = resourceType();
-    cache.set(resourceType, cacheForType);
+    cache.data.set(resourceType, cacheForType);
   }
   return cacheForType;
 }
@@ -2426,6 +2440,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (ContextOnlyDispatcher: Dispatcher).getCacheSignal = getCacheSignal;
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
@@ -2453,6 +2468,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnMount: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
@@ -2480,6 +2496,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnUpdate: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2507,6 +2524,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnRerender: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2677,6 +2695,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2818,6 +2837,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2959,6 +2979,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3101,6 +3122,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3259,6 +3281,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3417,6 +3440,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3576,6 +3600,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 03df5b1444e6..cf6786e617da 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -110,7 +110,7 @@ import {
 import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
-import {CacheContext} from './ReactFiberCacheComponent.old';
+import {createCache, CacheContext} from './ReactFiberCacheComponent.old';
 import {
   createUpdate as createLegacyQueueUpdate,
   enqueueUpdate as enqueueLegacyQueueUpdate,
@@ -2124,6 +2124,9 @@ function updateRefresh() {
 }
 
 function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
+  if (!enableCache) {
+    return;
+  }
   // 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.
@@ -2139,11 +2142,14 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           entangleLegacyQueueTransitions(root, provider, lane);
         }
 
-        const seededCache = new Map();
+        // 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) {
           // 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.set(seedKey, seedValue);
+          seededCache.data.set(seedKey, seedValue);
         }
 
         // Schedule an update on the cache boundary to trigger a refresh.
@@ -2390,15 +2396,23 @@ function markUpdateInDevTools(fiber, lane, action) {
   }
 }
 
+function getCacheSignal(): AbortSignal {
+  if (!enableCache) {
+    throw new Error('Not implemented.');
+  }
+  const cache: Cache = readContext(CacheContext);
+  return cache.controller.signal;
+}
+
 function getCacheForType<T>(resourceType: () => T): T {
   if (!enableCache) {
     throw new Error('Not implemented.');
   }
   const cache: Cache = readContext(CacheContext);
-  let cacheForType: T | void = (cache.get(resourceType): any);
+  let cacheForType: T | void = (cache.data.get(resourceType): any);
   if (cacheForType === undefined) {
     cacheForType = resourceType();
-    cache.set(resourceType, cacheForType);
+    cache.data.set(resourceType, cacheForType);
   }
   return cacheForType;
 }
@@ -2426,6 +2440,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (ContextOnlyDispatcher: Dispatcher).getCacheSignal = getCacheSignal;
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
@@ -2453,6 +2468,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnMount: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
@@ -2480,6 +2496,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnUpdate: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2507,6 +2524,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   unstable_isNewReconciler: enableNewReconciler,
 };
 if (enableCache) {
+  (HooksDispatcherOnRerender: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
@@ -2677,6 +2695,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2818,6 +2837,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -2959,6 +2979,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3101,6 +3122,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3259,6 +3281,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3417,6 +3440,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
@@ -3576,6 +3600,7 @@ if (__DEV__) {
     unstable_isNewReconciler: enableNewReconciler,
   };
   if (enableCache) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheSignal = getCacheSignal;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index ad124a432a4a..c1f34e1052fc 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -17,7 +17,6 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import {
-  enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
   allowConcurrentByDefault,
@@ -635,15 +634,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
-  if (enableCache) {
-    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.
-      root.pooledCache = null;
-    }
-  }
-
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4a064a384651..c81191f6a07e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -17,7 +17,6 @@ export type Lane = number;
 export type LaneMap<T> = Array<T>;
 
 import {
-  enableCache,
   enableSchedulingProfiler,
   enableUpdaterTracking,
   allowConcurrentByDefault,
@@ -635,15 +634,6 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
-  if (enableCache) {
-    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.
-      root.pooledCache = null;
-    }
-  }
-
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index db012ad1db19..803adee1e22d 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -28,6 +28,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
+import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -117,8 +118,18 @@ export function createFiberRoot(
   uninitializedFiber.stateNode = root;
 
   if (enableCache) {
-    const initialCache = new Map();
+    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 = {
       element: null,
       cache: initialCache,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 03332fd54561..504dac966ef2 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -28,6 +28,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
+import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
 function FiberRootNode(containerInfo, tag, hydrate) {
   this.tag = tag;
@@ -117,8 +118,18 @@ export function createFiberRoot(
   uninitializedFiber.stateNode = root;
 
   if (enableCache) {
-    const initialCache = new Map();
+    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 = {
       element: null,
       cache: initialCache,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 89286bd57385..930fc608f472 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -32,6 +32,7 @@ import {
   skipUnmountedBoundaries,
   enableUpdaterTracking,
   warnOnSubscriptionInsideStartTransition,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import is from 'shared/objectIs';
@@ -234,6 +235,7 @@ import {
   isDevToolsPresent,
 } from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
+import {releaseCache} from './ReactFiberCacheComponent.new';
 
 const ceil = Math.ceil;
 
@@ -331,6 +333,7 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
+let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
 
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
@@ -1900,8 +1903,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   ) {
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
+      pendingPassiveEffectsRemainingLanes = remainingLanes;
       scheduleCallback(NormalSchedulerPriority, () => {
         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;
       });
     }
@@ -2027,6 +2034,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
+  } else {
+    // There were no passive effects, so we can immediately release the cache
+    // pool for this render.
+    releaseRootPooledCache(root, remainingLanes);
   }
 
   // Read this again, since an effect might have updated it
@@ -2127,6 +2138,21 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
+function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
+  if (enableCache) {
+    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);
+      }
+    }
+  }
+}
+
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   // TODO: Combine this check with the one in flushPassiveEFfectsImpl. We should
@@ -2135,6 +2161,15 @@ export function flushPassiveEffects(): boolean {
   // `Scheduler.runWithPriority`, which accepts a function. But now we track the
   // priority within React itself, so we can mutate the variable directly.
   if (rootWithPendingPassiveEffects !== null) {
+    // Cache the root since rootWithPendingPassiveEffects is cleared in
+    // flushPassiveEffectsImpl
+    const root = rootWithPendingPassiveEffects;
+    // Cache and clear the remaining lanes flag; it must be reset since this
+    // method can be called from various places, not always from commitRoot
+    // where the remaining lanes are known
+    const remainingLanes = pendingPassiveEffectsRemainingLanes;
+    pendingPassiveEffectsRemainingLanes = NoLanes;
+
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
@@ -2146,6 +2181,11 @@ export function flushPassiveEffects(): boolean {
     } finally {
       setCurrentUpdatePriority(previousPriority);
       ReactCurrentBatchConfig.transition = 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);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d5cb23483d2d..0b7f46c79901 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -32,6 +32,7 @@ import {
   skipUnmountedBoundaries,
   enableUpdaterTracking,
   warnOnSubscriptionInsideStartTransition,
+  enableCache,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import is from 'shared/objectIs';
@@ -234,6 +235,7 @@ import {
   isDevToolsPresent,
 } from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
+import {releaseCache} from './ReactFiberCacheComponent.old';
 
 const ceil = Math.ceil;
 
@@ -331,6 +333,7 @@ let rootDoesHavePassiveEffects: boolean = false;
 let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
+let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
 
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
@@ -1900,8 +1903,12 @@ function commitRootImpl(root, renderPriorityLevel) {
   ) {
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
+      pendingPassiveEffectsRemainingLanes = remainingLanes;
       scheduleCallback(NormalSchedulerPriority, () => {
         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;
       });
     }
@@ -2027,6 +2034,10 @@ function commitRootImpl(root, renderPriorityLevel) {
     rootDoesHavePassiveEffects = false;
     rootWithPendingPassiveEffects = root;
     pendingPassiveEffectsLanes = lanes;
+  } else {
+    // There were no passive effects, so we can immediately release the cache
+    // pool for this render.
+    releaseRootPooledCache(root, remainingLanes);
   }
 
   // Read this again, since an effect might have updated it
@@ -2127,6 +2138,21 @@ function commitRootImpl(root, renderPriorityLevel) {
   return null;
 }
 
+function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
+  if (enableCache) {
+    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);
+      }
+    }
+  }
+}
+
 export function flushPassiveEffects(): boolean {
   // Returns whether passive effects were flushed.
   // TODO: Combine this check with the one in flushPassiveEFfectsImpl. We should
@@ -2135,6 +2161,15 @@ export function flushPassiveEffects(): boolean {
   // `Scheduler.runWithPriority`, which accepts a function. But now we track the
   // priority within React itself, so we can mutate the variable directly.
   if (rootWithPendingPassiveEffects !== null) {
+    // Cache the root since rootWithPendingPassiveEffects is cleared in
+    // flushPassiveEffectsImpl
+    const root = rootWithPendingPassiveEffects;
+    // Cache and clear the remaining lanes flag; it must be reset since this
+    // method can be called from various places, not always from commitRoot
+    // where the remaining lanes are known
+    const remainingLanes = pendingPassiveEffectsRemainingLanes;
+    pendingPassiveEffectsRemainingLanes = NoLanes;
+
     const renderPriority = lanesToEventPriority(pendingPassiveEffectsLanes);
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
@@ -2146,6 +2181,11 @@ export function flushPassiveEffects(): boolean {
     } finally {
       setCurrentUpdatePriority(previousPriority);
       ReactCurrentBatchConfig.transition = 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);
     }
   }
   return false;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index f079b3e8f2b9..e971828233c1 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -273,6 +273,7 @@ type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
 export type Dispatcher = {|
+  getCacheSignal?: () => AbortSignal,
   getCacheForType?: <T>(resourceType: () => T) => T,
   readContext<T>(context: ReactContext<T>): T,
   useState<S>(initialState: (() => S) | S): [S, Dispatch<BasicStateAction<S>>],
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 31321eb07a52..7ef18875e087 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -1,6 +1,7 @@
 let React;
 let ReactNoop;
 let Cache;
+let getCacheSignal;
 let getCacheForType;
 let Scheduler;
 let act;
@@ -22,6 +23,7 @@ describe('ReactCache', () => {
     Scheduler = require('scheduler');
     act = require('jest-react').act;
     Suspense = React.Suspense;
+    getCacheSignal = React.unstable_getCacheSignal;
     getCacheForType = React.unstable_getCacheForType;
     useCacheRefresh = React.unstable_useCacheRefresh;
     startTransition = React.startTransition;
@@ -52,6 +54,7 @@ describe('ReactCache', () => {
           const newRecord = {
             status: 'resolved',
             value: text,
+            cleanupScheduled: false,
           };
           data.set(text, newRecord);
         } else if (record.status === 'pending') {
@@ -64,6 +67,7 @@ describe('ReactCache', () => {
           const newRecord = {
             status: 'rejected',
             value: error,
+            cleanupScheduled: false,
           };
           data.set(text, newRecord);
         } else if (record.status === 'pending') {
@@ -76,9 +80,21 @@ describe('ReactCache', () => {
   }
 
   function readText(text) {
+    const signal = getCacheSignal();
     const textCache = getCacheForType(createTextCache);
     const record = textCache.data.get(text);
     if (record !== undefined) {
+      if (!record.cleanupScheduled) {
+        // This record was seeded prior to the abort signal being available:
+        // schedule a cleanup function for it.
+        // TODO: Add ability to cleanup entries seeded w useCacheRefresh()
+        record.cleanupScheduled = true;
+        signal.addEventListener('abort', () => {
+          Scheduler.unstable_yieldValue(
+            `Cache cleanup: ${text} [v${textCache.version}]`,
+          );
+        });
+      }
       switch (record.status) {
         case 'pending':
           throw record.value;
@@ -115,9 +131,15 @@ describe('ReactCache', () => {
       const newRecord = {
         status: 'pending',
         value: thenable,
+        cleanupScheduled: true,
       };
       textCache.data.set(text, newRecord);
 
+      signal.addEventListener('abort', () => {
+        Scheduler.unstable_yieldValue(
+          `Cache cleanup: ${text} [v${textCache.version}]`,
+        );
+      });
       throw thenable;
     }
   }
@@ -180,6 +202,13 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput('A');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -200,12 +229,19 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A']);
     expect(root).toMatchRenderedOutput('A');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
   test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => {
-    function App({text}) {
-      return (
+    function App({showMore}) {
+      return showMore ? (
         <>
           <Cache>
             <Suspense fallback={<Text text="Loading..." />}>
@@ -218,6 +254,8 @@ describe('ReactCache', () => {
             </Suspense>
           </Cache>
         </>
+      ) : (
+        '(empty)'
       );
     }
 
@@ -225,6 +263,12 @@ describe('ReactCache', () => {
     await act(async () => {
       root.render(<App showMore={false} />);
     });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await act(async () => {
+      root.render(<App showMore={true} />);
+    });
     // Even though there are two new <Cache /> trees, they should share the same
     // data cache. So there should be only a single cache miss for A.
     expect(Scheduler).toHaveYielded([
@@ -239,6 +283,15 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A', 'A']);
     expect(root).toMatchRenderedOutput('AA');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // cleanup occurs for the cache shared by the inner cache boundaries (which
+    // are not shared w the root because they were added in an update)
+    // note that no cache is created for the root since the cache is never accessed
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v1]']);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -261,8 +314,8 @@ describe('ReactCache', () => {
       await act(async () => {
         root.render(<App />);
       });
-      // Even though there are two new <Cache /> trees, they should share the same
-      // data cache. So there should be only a single cache miss for A.
+      // Even though there is a nested <Cache /> boundary, it should share the same
+      // data cache as the root. So there should be only a single cache miss for A.
       expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
       expect(root).toMatchRenderedOutput('Loading...');
 
@@ -271,6 +324,13 @@ describe('ReactCache', () => {
       });
       expect(Scheduler).toHaveYielded(['A', 'A']);
       expect(root).toMatchRenderedOutput('AA');
+
+      await act(async () => {
+        root.render('Bye');
+      });
+      // no cleanup: cache is still retained at the root
+      expect(Scheduler).toHaveYielded([]);
+      expect(root).toMatchRenderedOutput('Bye');
     },
   );
 
@@ -309,6 +369,13 @@ describe('ReactCache', () => {
       'A [v1]',
     ]);
     expect(root).toMatchRenderedOutput('A [v1]A [v1]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -356,10 +423,21 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v1]A [v2]');
+
+    // Replace all the children: this should retain the root Cache instance,
+    // but cleanup the separate cache instance created for the fresh cache
+    // boundary
+    await act(async () => {
+      root.render('Bye!');
+    });
+    // Cleanup occurs for the *second* cache instance: the first is still
+    // referenced by the root
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 
   // @gate experimental || www
-  test('inner content uses same cache as shell if spawned by the same transition', async () => {
+  test('inner/outer cache boundaries uses the same cache instance on initial render', async () => {
     const root = ReactNoop.createRoot();
 
     function App() {
@@ -431,10 +509,109 @@ describe('ReactCache', () => {
         <div>Content</div>
       </>,
     );
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
+  });
+
+  // @gate experimental || www
+  test('inner/ outer cache boundaries added in the same update use the same cache instance', async () => {
+    const root = ReactNoop.createRoot();
+
+    function App({showMore}) {
+      return showMore ? (
+        <Cache>
+          <Suspense fallback={<Text text="Loading shell..." />}>
+            {/* The shell reads A */}
+            <Shell>
+              {/* The inner content reads both A and B */}
+              <Suspense fallback={<Text text="Loading content..." />}>
+                <Cache>
+                  <Content />
+                </Cache>
+              </Suspense>
+            </Shell>
+          </Suspense>
+        </Cache>
+      ) : (
+        '(empty)'
+      );
+    }
+
+    function Shell({children}) {
+      readText('A');
+      return (
+        <>
+          <div>
+            <Text text="Shell" />
+          </div>
+          <div>{children}</div>
+        </>
+      );
+    }
+
+    function Content() {
+      readText('A');
+      readText('B');
+      return <Text text="Content" />;
+    }
+
+    await act(async () => {
+      root.render(<App showMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('(empty)');
+
+    await act(async () => {
+      root.render(<App showMore={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading shell...']);
+    expect(root).toMatchRenderedOutput('Loading shell...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Shell',
+      // There's a cache miss for B, because it hasn't been read yet. But not
+      // A, because it was cached when we rendered the shell.
+      'Cache miss! [B]',
+      'Loading content...',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Shell</div>
+        <div>Loading content...</div>
+      </>,
+    );
+
+    await act(async () => {
+      resolveMostRecentTextCache('B');
+    });
+    expect(Scheduler).toHaveYielded(['Content']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <div>Shell</div>
+        <div>Content</div>
+      </>,
+    );
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: A [v1]',
+      'Cache cleanup: B [v1]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
-  test('refresh a cache', async () => {
+  test('refresh a cache boundary', async () => {
     let refresh;
     function App() {
       refresh = useCacheRefresh();
@@ -474,6 +651,14 @@ describe('ReactCache', () => {
     // Note that the version has updated
     expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the original cache instance does not cleanup since it is still referenced
+    // by the root, but the refreshed inner cache does cleanup
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -512,9 +697,64 @@ describe('ReactCache', () => {
     await act(async () => {
       resolveMostRecentTextCache('A');
     });
-    // Note that the version has updated
-    expect(Scheduler).toHaveYielded(['A [v2]']);
+    // Note that the version has updated, and the previous cache is cleared
+    expect(Scheduler).toHaveYielded(['A [v2]', 'Cache cleanup: A [v1]']);
     expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the original root cache already cleaned up when the refresh completed
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
+  });
+
+  // @gate experimental || www
+  test('refresh the root cache without a transition', async () => {
+    let refresh;
+    function App() {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text="A" />;
+    }
+
+    // Mount initial data
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Suspense fallback={<Text text="Loading..." />}>
+          <App />
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Refresh for new data.
+    await act(async () => {
+      refresh();
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    // Note that the version has updated, and the previous cache is cleared
+    expect(Scheduler).toHaveYielded(['A [v2]', 'Cache cleanup: A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the original root cache already cleaned up when the refresh completed
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -556,8 +796,16 @@ describe('ReactCache', () => {
       startTransition(() => refresh(createTextCache, cache));
     });
     // The root should re-render without a cache miss.
+    // The cache is not cleared up yet, since it's still reference by the root
     expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v2]');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // the refreshed cache boundary is unmounted and cleans up
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+    expect(root).toMatchRenderedOutput('Bye');
   });
 
   // @gate experimental || www
@@ -621,8 +869,22 @@ describe('ReactCache', () => {
     await act(async () => {
       resolveMostRecentTextCache('A');
     });
-    expect(Scheduler).toHaveYielded(['A [v3]', 'A [v3]']);
+    expect(Scheduler).toHaveYielded([
+      'A [v3]',
+      'A [v3]',
+      // once the refresh completes the inner showMore boundary frees its previous
+      // cache instance, since it is now using the refreshed parent instance.
+      'Cache cleanup: A [v2]',
+    ]);
     expect(root).toMatchRenderedOutput('A [v3]A [v3]');
+
+    await act(async () => {
+      root.render('Bye!');
+    });
+    // Unmounting children releases the refreshed cache instance only; the root
+    // still retains the original cache instance used for the first render
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v3]']);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 
   // @gate experimental || www
@@ -695,6 +957,21 @@ describe('ReactCache', () => {
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
       expect(root).toMatchRenderedOutput('A [v2]A [v1]');
+
+      // Unmount children: this should clear *both* cache instances:
+      // the root doesn't have a cache instance (since it wasn't accessed
+      // during the initial render, and all subsequent cache accesses were within
+      // a fresh boundary). Therefore this causes cleanup for both the fresh cache
+      // instance in the refreshed first boundary and cleanup for the non-refreshed
+      // sibling boundary.
+      await act(async () => {
+        root.render('Bye!');
+      });
+      expect(Scheduler).toHaveYielded([
+        'Cache cleanup: A [v2]',
+        'Cache cleanup: A [v1]',
+      ]);
+      expect(root).toMatchRenderedOutput('Bye!');
     },
   );
 
@@ -733,6 +1010,7 @@ describe('ReactCache', () => {
         'Cache miss! [B]',
         'Loading...',
       ]);
+      expect(root).toMatchRenderedOutput('Loading...');
 
       await act(async () => {
         // This will resolve the content in the first cache
@@ -750,6 +1028,7 @@ describe('ReactCache', () => {
         'A [v1]',
         'B [v1]',
       ]);
+      expect(root).toMatchRenderedOutput('Loading... A [v1] B [v1]');
 
       // Now resolve the second tree
       await act(async () => {
@@ -757,6 +1036,15 @@ describe('ReactCache', () => {
       });
       expect(Scheduler).toHaveYielded(['A [v2]']);
       expect(root).toMatchRenderedOutput('A [v2] A [v1] B [v1]');
+
+      await act(async () => {
+        root.render('Bye!');
+      });
+      // Unmounting children releases both cache boundaries, but the original
+      // cache instance (used by second boundary) is still referenced by the root.
+      // only the second cache instance is freed.
+      expect(Scheduler).toHaveYielded(['Cache cleanup: A [v2]']);
+      expect(root).toMatchRenderedOutput('Bye!');
     },
   );
 
@@ -841,6 +1129,19 @@ describe('ReactCache', () => {
     });
     expect(Scheduler).toHaveYielded(['A [v1]', 'A [v1]', 'A [v2]']);
     expect(root).toMatchRenderedOutput('A [v1]A [v1]A [v2]');
+
+    // Unmount children: the first text cache instance is created only after the root
+    // commits, so both fresh cache instances are released by their cache boundaries,
+    // cleaning up v1 (used for the first two children which render togeether) and
+    // v2 (used for the third boundary added later).
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: A [v1]',
+      'Cache cleanup: A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 
   // @gate experimental || www
@@ -863,7 +1164,7 @@ describe('ReactCache', () => {
           <Suspense fallback={<Text text="Loading..." />}>
             {shouldShow ? (
               <Cache>
-                <AsyncText text="A" />
+                <AsyncText showVersion={true} text="A" />
               </Cache>
             ) : null}
           </Suspense>
@@ -880,7 +1181,7 @@ describe('ReactCache', () => {
 
     const root = ReactNoop.createRoot();
     await act(async () => {
-      root.render(<App showMore={false} />);
+      root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['0']);
     expect(root).toMatchRenderedOutput('0');
@@ -908,7 +1209,331 @@ describe('ReactCache', () => {
     await act(async () => {
       resolveMostRecentTextCache('A');
     });
-    expect(Scheduler).toHaveYielded(['A']);
-    expect(root).toMatchRenderedOutput('A1');
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]1');
+
+    // Unmount children: the first text cache instance is created only after initial
+    // render after calling showMore(). This instance is cleaned up when that boundary
+    // is unmounted. Bc root cache instance is never accessed, the inner cache
+    // boundary ends up at v1.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded(['Cache cleanup: A [v1]']);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('cache boundary uses a fresh cache when its key changes', async () => {
+    const root = ReactNoop.createRoot();
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    seedNextTextCache('B');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="B">
+            <AsyncText showVersion={true} text="B" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['B [v2]']);
+    expect(root).toMatchRenderedOutput('B [v2]');
+
+    // Unmount children: the fresh cache instance for B cleans up since the cache boundary
+    // is the only owner, while the original cache instance (for A) is still retained by
+    // the root.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded(['Cache cleanup: B [v2]']);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('overlapping transitions after an initial mount use the same fresh cache', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // After a mount, subsequent transitions use a fresh cache
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="B">
+              <AsyncText showVersion={true} text="B" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [B]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Update to a different text and with a different key for the cache
+    // boundary: this should still use the fresh cache instance created
+    // for the earlier transition
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="C">
+              <AsyncText showVersion={true} text="C" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [C]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      resolveMostRecentTextCache('C');
+    });
+    expect(Scheduler).toHaveYielded(['C [v2]']);
+    expect(root).toMatchRenderedOutput('C [v2]');
+
+    // Unmount children: the fresh cache used for the updates is freed, while the
+    // original cache (with A) is still retained at the root.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: B [v2]',
+      'Cache cleanup: C [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('overlapping updates after an initial mount use the same fresh cache', async () => {
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // After a mount, subsequent updates use a fresh cache
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="B">
+            <AsyncText showVersion={true} text="B" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [B]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // A second update uses the same fresh cache: even though this is a new
+    // Cache boundary, the render uses the fresh cache from the pending update.
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="C">
+            <AsyncText showVersion={true} text="C" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [C]']);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('C');
+    });
+    expect(Scheduler).toHaveYielded(['C [v2]']);
+    expect(root).toMatchRenderedOutput('C [v2]');
+
+    // Unmount children: the fresh cache used for the updates is freed, while the
+    // original cache (with A) is still retained at the root.
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      'Cache cleanup: B [v2]',
+      'Cache cleanup: C [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test('cleans up cache only used in an aborted transition', async () => {
+    const root = ReactNoop.createRoot();
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache key="A">
+            <AsyncText showVersion={true} text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Start a transition from A -> B..., which should create a fresh cache
+    // for the new cache boundary (bc of the different key)
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="B">
+              <AsyncText showVersion={true} text="B" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [B]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // ...but cancel by transitioning "back" to A (which we never really left)
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Suspense fallback="Loading...">
+            <Cache key="A">
+              <AsyncText showVersion={true} text="A" />
+            </Cache>
+          </Suspense>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]', 'Cache cleanup: B [v2]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Unmount children: ...
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test.skip('if a root cache refresh never commits its fresh cache is released', async () => {
+    const root = ReactNoop.createRoot();
+    let refresh;
+    function Example({text}) {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text={text} />;
+    }
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Example text="A" />
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      startTransition(() => {
+        refresh();
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      // TODO: the v1 cache should *not* be cleaned up, it is still retained by the root
+      // The following line is presently yielded but should not be:
+      // 'Cache cleanup: A [v1]',
+
+      // TODO: the v2 cache *should* be cleaned up, it was created for the abandoned refresh
+      // The following line is presently not yielded but should be:
+      'Cache cleanup: A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
+  });
+
+  // @gate experimental || www
+  test.skip('if a cache boundary refresh never commits its fresh cache is released', async () => {
+    const root = ReactNoop.createRoot();
+    let refresh;
+    function Example({text}) {
+      refresh = useCacheRefresh();
+      return <AsyncText showVersion={true} text={text} />;
+    }
+    seedNextTextCache('A');
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Cache>
+            <Example text="A" />
+          </Cache>
+        </Suspense>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['A [v1]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    await act(async () => {
+      startTransition(() => {
+        refresh();
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Cache miss! [A]']);
+    expect(root).toMatchRenderedOutput('A [v1]');
+
+    // Unmount the boundary before the refresh can complete
+    await act(async () => {
+      root.render('Bye!');
+    });
+    expect(Scheduler).toHaveYielded([
+      // TODO: the v2 cache *should* be cleaned up, it was created for the abandoned refresh
+      // The following line is presently not yielded but should be:
+      'Cache cleanup: A [v2]',
+    ]);
+    expect(root).toMatchRenderedOutput('Bye!');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
index 9b6ec83a40d3..6b1e4290d010 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
@@ -409,30 +409,30 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--schedule-state-update-1-Example",
-                "--layout-effects-stop",
-                "--render-start-1",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-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",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--schedule-state-update-1-Example",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -462,30 +462,30 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--schedule-forced-update-1-Example",
-                "--layout-effects-stop",
-                "--render-start-1",
-                "--component-render-start-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-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",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--schedule-forced-update-1-Example",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -701,22 +701,22 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--schedule-state-update-16-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--layout-effects-stop",
-                "--commit-stop",
-              ]
-          `);
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--schedule-state-update-16-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--react-version-17.0.3",
+          "--profiler-version-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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 
@@ -746,35 +746,35 @@ describe('SchedulingProfiler', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--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-17.0.3",
-                "--profiler-version-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-17.0.3",
-                "--profiler-version-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",
-              ]
-          `);
+        Array [
+          "--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-17.0.3",
+          "--profiler-version-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-17.0.3",
+          "--profiler-version-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",
+        ]
+      `);
     }
   });
 
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
index 13ca3988b2a7..a27c0271c116 100644
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
@@ -89,20 +89,20 @@ describe('SchedulingProfiler labels', () => {
 
     if (gate(flags => flags.enableSchedulingProfiler)) {
       expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "__v3",
-        "--schedule-render-1",
-        "--render-start-1",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-      ]
-    `);
+              Array [
+                "__v3",
+                "--schedule-render-1",
+                "--render-start-1",
+                "--render-stop",
+                "--commit-start-1",
+                "--react-version-17.0.3",
+                "--profiler-version-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",
+              ]
+          `);
     }
   });
 
@@ -114,11 +114,11 @@ describe('SchedulingProfiler labels', () => {
 
         root.render(<div />);
         expect(clearedMarks).toMatchInlineSnapshot(`
-        Array [
-          "__v3",
-          "--schedule-render-16",
-        ]
-      `);
+                  Array [
+                    "__v3",
+                    "--schedule-render-16",
+                  ]
+              `);
       });
     }
   });
@@ -152,21 +152,21 @@ describe('SchedulingProfiler labels', () => {
       });
 
       expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-state-update-1-App",
-        "--render-start-1",
-        "--component-render-start-App",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-17.0.3",
-        "--profiler-version-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",
-      ]
-    `);
+        Array [
+          "--schedule-state-update-1-App",
+          "--render-start-1",
+          "--component-render-start-App",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-17.0.3",
+          "--profiler-version-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",
+        ]
+      `);
     }
   });
 
@@ -196,21 +196,21 @@ describe('SchedulingProfiler labels', () => {
       });
 
       expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-state-update-4-App",
-        "--render-start-4",
-        "--component-render-start-App",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-4",
-        "--react-version-17.0.3",
-        "--profiler-version-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-4",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
+        Array [
+          "--schedule-state-update-4-App",
+          "--render-start-4",
+          "--component-render-start-App",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-4",
+          "--react-version-17.0.3",
+          "--profiler-version-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-4",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
     }
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
index e443aa0a2319..f2041b4ba1e3 100644
--- a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
@@ -113,6 +113,7 @@ describe('StrictEffectsMode defaults', () => {
           </>,
         );
 
+        expect(Scheduler).toHaveYielded([]);
         expect(Scheduler).toFlushUntilNextPaint([
           // Cleanup and re-run "one" (and "two") since there is no dependencies array.
           'useLayoutEffect unmount "one"',
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 5335c4053a70..568a8ada613d 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -37,6 +37,7 @@ export {
   unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_Scope,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 19490fb214c9..7491bbb7e832 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -33,6 +33,7 @@ export {
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
   unstable_Offscreen,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.js b/packages/react/index.js
index b4a3bf6e11b8..59cc05f0254e 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -58,6 +58,7 @@ export {
   unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_Scope,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 2b847d233631..cd60ee426fa6 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -36,6 +36,7 @@ export {
   unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_Scope,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 2246d32db662..d29858c9b07f 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -35,6 +35,7 @@ import {lazy} from './ReactLazy';
 import {forwardRef} from './ReactForwardRef';
 import {memo} from './ReactMemo';
 import {
+  getCacheSignal,
   getCacheForType,
   useCallback,
   useContext,
@@ -119,6 +120,7 @@ export {
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
   REACT_OFFSCREEN_TYPE as unstable_Offscreen,
+  getCacheSignal as unstable_getCacheSignal,
   getCacheForType as unstable_getCacheForType,
   useCacheRefresh as unstable_useCacheRefresh,
   REACT_CACHE_TYPE as unstable_Cache,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 0108c545fae5..1892f926c59c 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -41,6 +41,12 @@ function resolveDispatcher() {
   return ((dispatcher: any): Dispatcher);
 }
 
+export function getCacheSignal(): AbortSignal {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.getCacheSignal();
+}
+
 export function getCacheForType<T>(resourceType: () => T): T {
   const dispatcher = resolveDispatcher();
   // $FlowFixMe This is unstable, thus optional
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index 9381778b4435..a663ca8a5a89 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -25,6 +25,7 @@ export {
   memo,
   startTransition,
   unstable_DebugTracingMode,
+  unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useOpaqueIdentifier,
   useCallback,
diff --git a/scripts/jest/setupEnvironment.js b/scripts/jest/setupEnvironment.js
index 2ba88b156169..d2d510088c45 100644
--- a/scripts/jest/setupEnvironment.js
+++ b/scripts/jest/setupEnvironment.js
@@ -1,5 +1,7 @@
 /* eslint-disable */
 
+const AbortController = require('abort-controller');
+
 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.');
@@ -21,6 +23,8 @@ global.__EXPERIMENTAL__ =
 
 global.__VARIANT__ = !!process.env.VARIANT;
 
+global.AbortController = AbortController;
+
 if (typeof window !== 'undefined') {
   global.requestIdleCallback = function(callback) {
     return setTimeout(() => {

From d5b6b4b865ebf13a1eaf2342d623101056e5e197 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 21 Oct 2021 18:31:26 -0400
Subject: [PATCH 0979/1603] Expand act warning to cover all APIs that might
 schedule React work (#22607)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Move isActEnvironment check to function that warns

I'm about to fork the behavior in legacy roots versus concurrent roots
even further, so I'm lifting this up so I only have to fork once.

* Lift `mode` check, too

Similar to previous commit. I only want to check this once. Not for
performance reasons, but so the logic is easier to follow.

* Expand act warning to include non-hook APIs

In a test environment, React warns if an update isn't wrapped with act
— but only if the update originates from a hook API, like useState.

We did it this way for backwards compatibility with tests that were
written before the act API was introduced. Those tests didn't require
act, anyway, because in a legacy root, all tasks are synchronous except
for `useEffect`.

However, in a concurrent root, nearly every task is asynchronous. Even
tasks that are synchronous may spawn additional asynchronous work. So
all updates need to be wrapped with act, regardless of whether they
originate from a hook, a class, a root, or any other type of component.

This commit expands the act warning to include any API that triggers
an update.

It does not currently account for renders that are caused by a Suspense
promise resolving; those are modelled slightly differently from updates.
I'll fix that in the next step.

I also removed the check for whether an update is batched. It shouldn't
matter, because even a batched update can spawn asynchronous work, which
needs to be flushed by act.

This change only affects concurrent roots. The behavior in legacy roots
is the same.

* Expand act warning to include Suspense resolutions

For the same reason we warn when an update is not wrapped with act,
we should warn if a Suspense promise resolution is not wrapped with act.
Both "pings" and "retries".

Legacy root behavior is unchanged.
---
 .../ReactDevToolsHooksIntegration-test.js     |  28 ++-
 .../__tests__/preprocessData-test.internal.js |  12 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |  38 ++-
 .../react-reconciler/src/ReactFiberAct.new.js |  54 ++--
 .../react-reconciler/src/ReactFiberAct.old.js |  54 ++--
 .../src/ReactFiberHooks.new.js                |  21 +-
 .../src/ReactFiberHooks.old.js                |  21 +-
 .../src/ReactFiberWorkLoop.new.js             |  71 +++++-
 .../src/ReactFiberWorkLoop.old.js             |  71 +++++-
 .../__tests__/DebugTracing-test.internal.js   | 203 +++++++--------
 .../src/__tests__/ReactActWarnings-test.js    | 237 +++++++++++++++++-
 .../ReactFiberHostContext-test.internal.js    |   2 +
 .../src/__tests__/ReactIsomorphicAct-test.js  |   6 +
 13 files changed, 578 insertions(+), 240 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
index 3eea121d65b3..a64a8d794ad9 100644
--- a/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactDevToolsHooksIntegration-test.js
@@ -20,6 +20,8 @@ describe('React hooks DevTools integration', () => {
   let scheduleUpdate;
   let setSuspenseHandler;
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   beforeEach(() => {
     global.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {
       inject: injected => {
@@ -64,7 +66,7 @@ describe('React hooks DevTools integration', () => {
     expect(stateHook.isStateEditable).toBe(true);
 
     if (__DEV__) {
-      overrideHookState(fiber, stateHook.id, [], 10);
+      act(() => overrideHookState(fiber, stateHook.id, [], 10));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
         props: {},
@@ -116,7 +118,7 @@ describe('React hooks DevTools integration', () => {
     expect(reducerHook.isStateEditable).toBe(true);
 
     if (__DEV__) {
-      overrideHookState(fiber, reducerHook.id, ['foo'], 'def');
+      act(() => overrideHookState(fiber, reducerHook.id, ['foo'], 'def'));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
         props: {},
@@ -164,13 +166,12 @@ describe('React hooks DevTools integration', () => {
     expect(stateHook.isStateEditable).toBe(true);
 
     if (__DEV__) {
-      overrideHookState(fiber, stateHook.id, ['count'], 10);
+      act(() => overrideHookState(fiber, stateHook.id, ['count'], 10));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
         props: {},
         children: ['count:', '10'],
       });
-
       act(() => setStateFn(state => ({count: state.count + 1})));
       expect(renderer.toJSON()).toEqual({
         type: 'div',
@@ -233,7 +234,8 @@ describe('React hooks DevTools integration', () => {
     }
   });
 
-  it('should support overriding suspense in concurrent mode', () => {
+  // @gate __DEV__
+  it('should support overriding suspense in concurrent mode', async () => {
     if (__DEV__) {
       // Lock the first render
       setSuspenseHandler(() => true);
@@ -243,13 +245,15 @@ describe('React hooks DevTools integration', () => {
       return 'Done';
     }
 
-    const renderer = ReactTestRenderer.create(
-      <div>
-        <React.Suspense fallback={'Loading'}>
-          <MyComponent />
-        </React.Suspense>
-      </div>,
-      {unstable_isConcurrent: true},
+    const renderer = await act(() =>
+      ReactTestRenderer.create(
+        <div>
+          <React.Suspense fallback={'Loading'}>
+            <MyComponent />
+          </React.Suspense>
+        </div>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
     expect(Scheduler).toFlushAndYield([]);
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
index 94ada274a770..758afc1e15f2 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -17,8 +17,6 @@ import {
 } from '../../constants';
 import REACT_VERSION from 'shared/ReactVersion';
 
-global.IS_REACT_ACT_ENVIRONMENT = true;
-
 describe('getLanesFromTransportDecimalBitmask', () => {
   it('should return array of lane numbers from bitmask string', () => {
     expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
@@ -210,6 +208,8 @@ describe('preprocessData', () => {
     tid = 0;
     pid = 0;
     startTime = 0;
+
+    global.IS_REACT_ACT_ENVIRONMENT = true;
   });
 
   afterEach(() => {
@@ -1251,7 +1251,7 @@ describe('preprocessData', () => {
 
       testMarks.push(...createUserTimingData(clearedMarks));
 
-      const data = await preprocessData(testMarks);
+      const data = await act(() => preprocessData(testMarks));
       expect(data.suspenseEvents).toHaveLength(1);
       expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
     }
@@ -1367,6 +1367,8 @@ describe('preprocessData', () => {
 
           const root = ReactDOM.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(
@@ -1837,7 +1839,7 @@ describe('preprocessData', () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = await preprocessData(testMarks);
+          const data = await act(() => 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."`,
@@ -1895,7 +1897,7 @@ describe('preprocessData', () => {
 
           testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = await preprocessData(testMarks);
+          const data = await act(() => preprocessData(testMarks));
           expect(data.suspenseEvents).toHaveLength(1);
           expect(data.suspenseEvents[0].warning).toBe(null);
         }
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index d0992dce53d4..556772500ee2 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -32,18 +32,31 @@ describe('ReactTestUtils.act()', () => {
     let concurrentRoot = null;
     const renderConcurrent = (el, dom) => {
       concurrentRoot = ReactDOM.createRoot(dom);
-      concurrentRoot.render(el);
+      if (__DEV__) {
+        act(() => concurrentRoot.render(el));
+      } else {
+        concurrentRoot.render(el);
+      }
     };
 
     const unmountConcurrent = _dom => {
-      if (concurrentRoot !== null) {
-        concurrentRoot.unmount();
-        concurrentRoot = null;
+      if (__DEV__) {
+        act(() => {
+          if (concurrentRoot !== null) {
+            concurrentRoot.unmount();
+            concurrentRoot = null;
+          }
+        });
+      } else {
+        if (concurrentRoot !== null) {
+          concurrentRoot.unmount();
+          concurrentRoot = null;
+        }
       }
     };
 
     const rerenderConcurrent = el => {
-      concurrentRoot.render(el);
+      act(() => concurrentRoot.render(el));
     };
 
     runActTests(
@@ -98,22 +111,29 @@ describe('ReactTestUtils.act()', () => {
       ]);
     });
 
+    // @gate __DEV__
     it('does not warn in concurrent mode', () => {
       const root = ReactDOM.createRoot(document.createElement('div'));
-      root.render(<App />);
+      act(() => root.render(<App />));
       Scheduler.unstable_flushAll();
     });
 
     it('warns in concurrent mode if root is strict', () => {
+      // TODO: We don't need this error anymore in concurrent mode because
+      // effects can only be scheduled as the result of an update, and we now
+      // enforce all updates must be wrapped with act, not just hook updates.
       expect(() => {
         const root = ReactDOM.createRoot(document.createElement('div'), {
           unstable_strictMode: true,
         });
         root.render(<App />);
-        Scheduler.unstable_flushAll();
-      }).toErrorDev([
+      }).toErrorDev(
+        'An update to Root inside a test was not wrapped in act(...)',
+        {withoutStack: true},
+      );
+      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
         'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
+      );
     });
   });
 });
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
index 18055e7c738c..27102b5e9253 100644
--- a/packages/react-reconciler/src/ReactFiberAct.new.js
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -12,11 +12,32 @@ import type {Fiber} from './ReactFiber.new';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {warnsIfNotActing} from './ReactFiberHostConfig';
-import {ConcurrentMode} from './ReactTypeOfMode';
 
 const {ReactCurrentActQueue} = ReactSharedInternals;
 
-export function isActEnvironment(fiber: Fiber) {
+export function isLegacyActEnvironment(fiber: Fiber) {
+  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 =
+      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    // $FlowExpectedError - Flow doesn't know about jest
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
+
+export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
       // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
@@ -24,31 +45,14 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    if (fiber.mode & ConcurrentMode) {
-      if (
-        !isReactActEnvironmentGlobal &&
-        ReactCurrentActQueue.current !== null
-      ) {
-        // TODO: Include link to relevant documentation page.
-        console.error(
-          'The current testing environment is not configured to support ' +
-            'act(...)',
-        );
-      }
-      return isReactActEnvironmentGlobal;
-    } else {
-      // 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.
-      // $FlowExpectedError - Flow doesn't know about jest
-      const jestIsDefined = typeof jest !== 'undefined';
-      return (
-        warnsIfNotActing &&
-        jestIsDefined &&
-        isReactActEnvironmentGlobal !== false
+    if (!isReactActEnvironmentGlobal && ReactCurrentActQueue.current !== 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/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
index ddae518dcb63..bcb4ad707a1b 100644
--- a/packages/react-reconciler/src/ReactFiberAct.old.js
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -12,11 +12,32 @@ import type {Fiber} from './ReactFiber.old';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 
 import {warnsIfNotActing} from './ReactFiberHostConfig';
-import {ConcurrentMode} from './ReactTypeOfMode';
 
 const {ReactCurrentActQueue} = ReactSharedInternals;
 
-export function isActEnvironment(fiber: Fiber) {
+export function isLegacyActEnvironment(fiber: Fiber) {
+  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 =
+      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
+        ? IS_REACT_ACT_ENVIRONMENT
+        : undefined;
+
+    // $FlowExpectedError - Flow doesn't know about jest
+    const jestIsDefined = typeof jest !== 'undefined';
+    return (
+      warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
+    );
+  }
+  return false;
+}
+
+export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
       // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
@@ -24,31 +45,14 @@ export function isActEnvironment(fiber: Fiber) {
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    if (fiber.mode & ConcurrentMode) {
-      if (
-        !isReactActEnvironmentGlobal &&
-        ReactCurrentActQueue.current !== null
-      ) {
-        // TODO: Include link to relevant documentation page.
-        console.error(
-          'The current testing environment is not configured to support ' +
-            'act(...)',
-        );
-      }
-      return isReactActEnvironmentGlobal;
-    } else {
-      // 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.
-      // $FlowExpectedError - Flow doesn't know about jest
-      const jestIsDefined = typeof jest !== 'undefined';
-      return (
-        warnsIfNotActing &&
-        jestIsDefined &&
-        isReactActEnvironmentGlobal !== false
+    if (!isReactActEnvironmentGlobal && ReactCurrentActQueue.current !== 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/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d21704a1b6fe..266e98960cbb 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -83,7 +83,6 @@ import {
   requestUpdateLane,
   requestEventTime,
   warnIfNotCurrentlyActingEffectsInDEV,
-  warnIfNotCurrentlyActingUpdatesInDev,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
@@ -118,7 +117,6 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {isActEnvironment} from './ReactFiberAct.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1679,9 +1677,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   if (
     __DEV__ &&
@@ -1709,9 +1705,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
@@ -2196,12 +2190,6 @@ function dispatchReducerAction<S, A>(
     enqueueRenderPhaseUpdate(queue, update);
   } else {
     enqueueUpdate(fiber, queue, update, lane);
-
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
@@ -2282,11 +2270,6 @@ function dispatchSetState<S, A>(
         }
       }
     }
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index cf6786e617da..b2378cbf30d6 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -83,7 +83,6 @@ import {
   requestUpdateLane,
   requestEventTime,
   warnIfNotCurrentlyActingEffectsInDEV,
-  warnIfNotCurrentlyActingUpdatesInDev,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
@@ -118,7 +117,6 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {isActEnvironment} from './ReactFiberAct.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1679,9 +1677,7 @@ function mountEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   if (
     __DEV__ &&
@@ -1709,9 +1705,7 @@ function updateEffect(
   deps: Array<mixed> | void | null,
 ): void {
   if (__DEV__) {
-    if (isActEnvironment(currentlyRenderingFiber)) {
-      warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-    }
+    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
   }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
@@ -2196,12 +2190,6 @@ function dispatchReducerAction<S, A>(
     enqueueRenderPhaseUpdate(queue, update);
   } else {
     enqueueUpdate(fiber, queue, update, lane);
-
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
@@ -2282,11 +2270,6 @@ function dispatchSetState<S, A>(
         }
       }
     }
-    if (__DEV__) {
-      if (isActEnvironment(fiber)) {
-        warnIfNotCurrentlyActingUpdatesInDev(fiber);
-      }
-    }
     const eventTime = requestEventTime();
     const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
     if (root !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 930fc608f472..2c065d6ee17a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -236,6 +236,10 @@ import {
 } from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 import {releaseCache} from './ReactFiberCacheComponent.new';
+import {
+  isLegacyActEnvironment,
+  isConcurrentActEnvironment,
+} from './ReactFiberAct.new';
 
 const ceil = Math.ceil;
 
@@ -493,6 +497,8 @@ export function scheduleUpdateOnFiber(
       }
     }
 
+    warnIfUpdatesNotWrappedWithActDEV(fiber);
+
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       if (
         (executionContext & CommitContext) !== NoContext &&
@@ -2402,6 +2408,8 @@ export function pingSuspendedRoot(
   const eventTime = requestEventTime();
   markRootPinged(root, pingedLanes, eventTime);
 
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
+
   if (
     workInProgressRoot === root &&
     isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)
@@ -2854,7 +2862,12 @@ function shouldForceFlushFallbacksInDEV() {
 
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
+    const isActEnvironment =
+      fiber.mode & ConcurrentMode
+        ? isConcurrentActEnvironment()
+        : isLegacyActEnvironment(fiber);
     if (
+      isActEnvironment &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
       ReactCurrentActQueue.current === null
     ) {
@@ -2875,12 +2888,36 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   }
 }
 
-function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
+function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
-    if (
-      executionContext === NoContext &&
-      ReactCurrentActQueue.current === null
-    ) {
+    if (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 (ReactCurrentActQueue.current === null) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
         setCurrentDebugFiberInDEV(fiber);
@@ -2908,4 +2945,26 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   }
 }
 
-export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
+function warnIfSuspenseResolutionNotWrappedWithActDEV(root: FiberRoot): void {
+  if (__DEV__) {
+    if (
+      root.tag !== LegacyRoot &&
+      isConcurrentActEnvironment() &&
+      ReactCurrentActQueue.current === 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://reactjs.org/link/wrap-tests-with-act',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 0b7f46c79901..97b835d3a18e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -236,6 +236,10 @@ import {
 } from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 import {releaseCache} from './ReactFiberCacheComponent.old';
+import {
+  isLegacyActEnvironment,
+  isConcurrentActEnvironment,
+} from './ReactFiberAct.old';
 
 const ceil = Math.ceil;
 
@@ -493,6 +497,8 @@ export function scheduleUpdateOnFiber(
       }
     }
 
+    warnIfUpdatesNotWrappedWithActDEV(fiber);
+
     if (enableProfilerTimer && enableProfilerNestedUpdateScheduledHook) {
       if (
         (executionContext & CommitContext) !== NoContext &&
@@ -2402,6 +2408,8 @@ export function pingSuspendedRoot(
   const eventTime = requestEventTime();
   markRootPinged(root, pingedLanes, eventTime);
 
+  warnIfSuspenseResolutionNotWrappedWithActDEV(root);
+
   if (
     workInProgressRoot === root &&
     isSubsetOfLanes(workInProgressRootRenderLanes, pingedLanes)
@@ -2854,7 +2862,12 @@ function shouldForceFlushFallbacksInDEV() {
 
 export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   if (__DEV__) {
+    const isActEnvironment =
+      fiber.mode & ConcurrentMode
+        ? isConcurrentActEnvironment()
+        : isLegacyActEnvironment(fiber);
     if (
+      isActEnvironment &&
       (fiber.mode & StrictLegacyMode) !== NoMode &&
       ReactCurrentActQueue.current === null
     ) {
@@ -2875,12 +2888,36 @@ export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
   }
 }
 
-function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
+function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
-    if (
-      executionContext === NoContext &&
-      ReactCurrentActQueue.current === null
-    ) {
+    if (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 (ReactCurrentActQueue.current === null) {
       const previousFiber = ReactCurrentFiberCurrent;
       try {
         setCurrentDebugFiberInDEV(fiber);
@@ -2908,4 +2945,26 @@ function warnIfNotCurrentlyActingUpdatesInDEV(fiber: Fiber): void {
   }
 }
 
-export const warnIfNotCurrentlyActingUpdatesInDev = warnIfNotCurrentlyActingUpdatesInDEV;
+function warnIfSuspenseResolutionNotWrappedWithActDEV(root: FiberRoot): void {
+  if (__DEV__) {
+    if (
+      root.tag !== LegacyRoot &&
+      isConcurrentActEnvironment() &&
+      ReactCurrentActQueue.current === 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://reactjs.org/link/wrap-tests-with-act',
+      );
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index ee93b3f99299..8be5b0bb9720 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -56,21 +56,17 @@ describe('DebugTracing', () => {
     expect(logs).toEqual([]);
   });
 
+  // @gate build === 'development'
   // @gate experimental || www
   it('should not log anything for concurrent render without suspends or state updates', () => {
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <div />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <div />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
-
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([]);
   });
 
@@ -81,12 +77,14 @@ describe('DebugTracing', () => {
       throw fakeSuspensePromise;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <React.Suspense fallback={null}>
-          <Example />
-        </React.Suspense>
-      </React.unstable_DebugTracingMode>,
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>
+        </React.unstable_DebugTracingMode>,
+      ),
     );
 
     expect(logs).toEqual([
@@ -142,26 +140,33 @@ describe('DebugTracing', () => {
 
   // @gate experimental && build === 'development' && enableDebugTracing
   it('should log concurrent render with suspense', async () => {
-    const fakeSuspensePromise = Promise.resolve(true);
+    let isResolved = false;
+    let resolveFakeSuspensePromise;
+    const fakeSuspensePromise = new Promise(resolve => {
+      resolveFakeSuspensePromise = () => {
+        resolve();
+        isResolved = true;
+      };
+    });
+
     function Example() {
-      throw fakeSuspensePromise;
+      if (!isResolved) {
+        throw fakeSuspensePromise;
+      }
+      return null;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <React.Suspense fallback={null}>
-          <Example />
-        </React.Suspense>
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: ⚛️ Example suspended',
@@ -170,7 +175,7 @@ describe('DebugTracing', () => {
 
     logs.splice(0);
 
-    await fakeSuspensePromise;
+    await ReactTestRenderer.act(async () => await resolveFakeSuspensePromise());
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
@@ -186,34 +191,23 @@ describe('DebugTracing', () => {
       return children;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Wrapper>
-          <React.Suspense fallback={null} unstable_expectedLoadTime={1}>
-            <Example />
-          </React.Suspense>
-        </Wrapper>
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Wrapper>
+            <React.Suspense fallback={null} unstable_expectedLoadTime={1}>
+              <Example />
+            </React.Suspense>
+          </Wrapper>
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: <Wrapper/>',
       `groupEnd: ⚛️ render (${DEFAULT_LANE_STRING})`,
-    ]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(logs).toEqual([
       `group: ⚛️ render (${RETRY_LANE_STRING})`,
       'log: <Example/>',
       `groupEnd: ⚛️ render (${RETRY_LANE_STRING})`,
@@ -232,19 +226,15 @@ describe('DebugTracing', () => {
       }
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Example />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
       `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
@@ -266,19 +256,15 @@ describe('DebugTracing', () => {
       }
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
-    );
-
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
     expect(() => {
-      expect(Scheduler).toFlushUntilNextPaint([]);
+      ReactTestRenderer.act(() =>
+        ReactTestRenderer.create(
+          <React.unstable_DebugTracingMode>
+            <Example />
+          </React.unstable_DebugTracingMode>,
+          {unstable_isConcurrent: true},
+        ),
+      );
     }).toErrorDev('Cannot update during an existing state transition');
 
     expect(logs).toEqual([
@@ -298,19 +284,15 @@ describe('DebugTracing', () => {
       return didMount;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Example />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ commit (${DEFAULT_LANE_STRING})`,
       `group: ⚛️ layout effects (${DEFAULT_LANE_STRING})`,
@@ -378,19 +360,15 @@ describe('DebugTracing', () => {
       return null;
     }
 
-    ReactTestRenderer.create(
-      <React.unstable_DebugTracingMode>
-        <Example />
-      </React.unstable_DebugTracingMode>,
-      {unstable_isConcurrent: true},
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.unstable_DebugTracingMode>
+          <Example />
+        </React.unstable_DebugTracingMode>,
+        {unstable_isConcurrent: true},
+      ),
     );
 
-    expect(logs).toEqual([]);
-
-    logs.splice(0);
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
     expect(logs).toEqual([
       `group: ⚛️ render (${DEFAULT_LANE_STRING})`,
       'log: Hello from user code',
@@ -398,6 +376,7 @@ describe('DebugTracing', () => {
     ]);
   });
 
+  // @gate build === 'development'
   // @gate experimental || www
   it('should not log anything outside of a unstable_DebugTracingMode subtree', () => {
     function ExampleThatCascades() {
@@ -417,16 +396,18 @@ describe('DebugTracing', () => {
       return null;
     }
 
-    ReactTestRenderer.create(
-      <React.Fragment>
-        <ExampleThatCascades />
-        <React.Suspense fallback={null}>
-          <ExampleThatSuspends />
-        </React.Suspense>
-        <React.unstable_DebugTracingMode>
-          <Example />
-        </React.unstable_DebugTracingMode>
-      </React.Fragment>,
+    ReactTestRenderer.act(() =>
+      ReactTestRenderer.create(
+        <React.Fragment>
+          <ExampleThatCascades />
+          <React.Suspense fallback={null}>
+            <ExampleThatSuspends />
+          </React.Suspense>
+          <React.unstable_DebugTracingMode>
+            <Example />
+          </React.unstable_DebugTracingMode>
+        </React.Fragment>,
+      ),
     );
 
     expect(logs).toEqual([]);
diff --git a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
index 058e01b1fe06..324d15327336 100644
--- a/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactActWarnings-test.js
@@ -12,6 +12,10 @@ let Scheduler;
 let ReactNoop;
 let useState;
 let act;
+let Suspense;
+let startTransition;
+let getCacheForType;
+let caches;
 
 // These tests are mostly concerned with concurrent roots. The legacy root
 // behavior is covered by other older test suites and is unchanged from
@@ -24,11 +28,110 @@ describe('act warnings', () => {
     ReactNoop = require('react-noop-renderer');
     act = React.unstable_act;
     useState = React.useState;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+    getCacheForType = React.unstable_getCacheForType;
+    caches = [];
   });
 
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return props.text;
+  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.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return textCache.version;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.unstable_yieldValue(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);
+    }
   }
 
   function withActEnvironment(value, scope) {
@@ -127,4 +230,132 @@ describe('act warnings', () => {
       expect(root).toMatchRenderedOutput('1');
     });
   });
+
+  test('warns if root update is not wrapped', () => {
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      expect(() => root.render('Hi')).toErrorDev(
+        // 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(...)',
+        {withoutStack: true},
+      );
+    });
+  });
+
+  // @gate __DEV__
+  test('warns if class update is not wrapped', () => {
+    let app;
+    class App extends React.Component {
+      state = {count: 0};
+      render() {
+        app = this;
+        return <Text text={this.state.count} />;
+      }
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App />);
+      });
+      expect(() => app.setState({count: 1})).toErrorDev(
+        'An update to App inside a test was not wrapped in act(...)',
+      );
+    });
+  });
+
+  // @gate __DEV__
+  test('warns even if update is synchronous', () => {
+    let setState;
+    function App() {
+      const [state, _setState] = useState(0);
+      setState = _setState;
+      return <Text text={state} />;
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => root.render(<App />));
+      expect(Scheduler).toHaveYielded([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
+      expect(() => ReactNoop.flushSync(() => setState(1))).toErrorDev(
+        'An update to App inside a test was not wrapped in act(...)',
+      );
+
+      expect(Scheduler).toHaveYielded([1]);
+      expect(root).toMatchRenderedOutput('1');
+    });
+  });
+
+  // @gate __DEV__
+  // @gate enableCache
+  test('warns if Suspense retry is not wrapped', () => {
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="Async" />
+        </Suspense>
+      );
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App />);
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [Async]', 'Loading...']);
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      // This is a retry, not a ping, because we already showed a fallback.
+      expect(() =>
+        resolveText('Async'),
+      ).toErrorDev(
+        'A suspended resource finished loading inside a test, but the event ' +
+          'was not wrapped in act(...)',
+        {withoutStack: true},
+      );
+    });
+  });
+
+  // @gate __DEV__
+  // @gate enableCache
+  test('warns if Suspense ping is not wrapped', () => {
+    function App({showMore}) {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          {showMore ? <AsyncText text="Async" /> : <Text text="(empty)" />}
+        </Suspense>
+      );
+    }
+
+    withActEnvironment(true, () => {
+      const root = ReactNoop.createRoot();
+      act(() => {
+        root.render(<App showMore={false} />);
+      });
+      expect(Scheduler).toHaveYielded(['(empty)']);
+      expect(root).toMatchRenderedOutput('(empty)');
+
+      act(() => {
+        startTransition(() => {
+          root.render(<App showMore={true} />);
+        });
+      });
+      expect(Scheduler).toHaveYielded(['Suspend! [Async]', 'Loading...']);
+      expect(root).toMatchRenderedOutput('(empty)');
+
+      // This is a ping, not a retry, because no fallback is showing.
+      expect(() =>
+        resolveText('Async'),
+      ).toErrorDev(
+        'A suspended resource finished loading inside a test, but the event ' +
+          'was not wrapped in act(...)',
+        {withoutStack: true},
+      );
+    });
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 35c22e672ed3..ee4bd306481b 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -28,6 +28,8 @@ describe('ReactFiberHostContext', () => {
       .DefaultEventPriority;
   });
 
+  global.IS_REACT_ACT_ENVIRONMENT = true;
+
   // @gate __DEV__
   it('works with null host context', async () => {
     let creates = 0;
diff --git a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
index 135757d24f9e..78458bd2d5bf 100644
--- a/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIsomorphicAct-test.js
@@ -23,12 +23,17 @@ describe('isomorphic act()', () => {
     act = React.unstable_act;
   });
 
+  beforeEach(() => {
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+  });
+
   // @gate __DEV__
   test('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');
     });
@@ -40,6 +45,7 @@ describe('isomorphic act()', () => {
 
     // 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');

From 3c4c1c4703e8f7362370c44a48ac9348229e3791 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 21 Oct 2021 18:39:59 -0400
Subject: [PATCH 0980/1603] Remove warning for dangling passive effects
 (#22609)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

In legacy mode, a test can get into a situation where passive effects are
"dangling" — an update finished, and scheduled some passive effects,
but the effects don't flush.

This is why React warns if you don't wrap updates in act. The act API is
responsible for flushing passive effects. But there are some cases where
the act API (in legacy roots) intentionally doesn't warn, like updates
that originate from roots and classes. It's possible those updates will
render children that contain useEffect. Because of this, dangling
effects are still possible, and React doesn't warn about it.

So we implemented a second act warning for dangling effects.

However, in concurrent roots, we now enforce that all APIs that schedule
React work must be wrapped in act. There's no scenario where dangling
passive effects can happen that doesn't already trigger the warning for
updates. So the dangling effects warning is redundant.

The warning was never part of a public release. It was only enabled
in concurrent roots.

So we can delete it.
---
 .../src/__tests__/ReactTestUtilsAct-test.js   | 31 ----------------
 .../src/ReactFiberHooks.new.js                |  7 ----
 .../src/ReactFiberHooks.old.js                |  7 ----
 .../src/ReactFiberWorkLoop.new.js             | 35 +------------------
 .../src/ReactFiberWorkLoop.old.js             | 35 +------------------
 5 files changed, 2 insertions(+), 113 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 556772500ee2..71adc286d08b 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -98,43 +98,12 @@ describe('ReactTestUtils.act()', () => {
       }).toErrorDev([]);
     });
 
-    it('warns in strict mode', () => {
-      expect(() => {
-        ReactDOM.render(
-          <React.StrictMode>
-            <App />
-          </React.StrictMode>,
-          document.createElement('div'),
-        );
-      }).toErrorDev([
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      ]);
-    });
-
     // @gate __DEV__
     it('does not warn in concurrent mode', () => {
       const root = ReactDOM.createRoot(document.createElement('div'));
       act(() => root.render(<App />));
       Scheduler.unstable_flushAll();
     });
-
-    it('warns in concurrent mode if root is strict', () => {
-      // TODO: We don't need this error anymore in concurrent mode because
-      // effects can only be scheduled as the result of an update, and we now
-      // enforce all updates must be wrapped with act, not just hook updates.
-      expect(() => {
-        const root = ReactDOM.createRoot(document.createElement('div'), {
-          unstable_strictMode: true,
-        });
-        root.render(<App />);
-      }).toErrorDev(
-        'An update to Root inside a test was not wrapped in act(...)',
-        {withoutStack: true},
-      );
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        'An update to App ran an effect, but was not wrapped in act(...)',
-      );
-    });
   });
 });
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 266e98960cbb..c3b76549a22a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -82,7 +82,6 @@ import {
   scheduleUpdateOnFiber,
   requestUpdateLane,
   requestEventTime,
-  warnIfNotCurrentlyActingEffectsInDEV,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
@@ -1676,9 +1675,6 @@ function mountEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   if (
     __DEV__ &&
     enableStrictEffects &&
@@ -1704,9 +1700,6 @@ function updateEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index b2378cbf30d6..8bc1510deb45 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -82,7 +82,6 @@ import {
   scheduleUpdateOnFiber,
   requestUpdateLane,
   requestEventTime,
-  warnIfNotCurrentlyActingEffectsInDEV,
   markSkippedUpdateLanes,
   isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
@@ -1676,9 +1675,6 @@ function mountEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   if (
     __DEV__ &&
     enableStrictEffects &&
@@ -1704,9 +1700,6 @@ function updateEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (__DEV__) {
-    warnIfNotCurrentlyActingEffectsInDEV(currentlyRenderingFiber);
-  }
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 2c065d6ee17a..e35e5515bb0b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -97,12 +97,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.new';
-import {
-  NoMode,
-  StrictLegacyMode,
-  ProfileMode,
-  ConcurrentMode,
-} from './ReactTypeOfMode';
+import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
   IndeterminateComponent,
@@ -2860,34 +2855,6 @@ function shouldForceFlushFallbacksInDEV() {
   return __DEV__ && ReactCurrentActQueue.current !== null;
 }
 
-export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
-  if (__DEV__) {
-    const isActEnvironment =
-      fiber.mode & ConcurrentMode
-        ? isConcurrentActEnvironment()
-        : isLegacyActEnvironment(fiber);
-    if (
-      isActEnvironment &&
-      (fiber.mode & StrictLegacyMode) !== NoMode &&
-      ReactCurrentActQueue.current === null
-    ) {
-      console.error(
-        'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
-          'When testing, code that causes React state updates should be ' +
-          'wrapped into act(...):\n\n' +
-          'act(() => {\n' +
-          '  /* fire events that update state */\n' +
-          '});\n' +
-          '/* assert on the output */\n\n' +
-          "This ensures that you're testing the behavior the user would see " +
-          'in the browser.' +
-          ' Learn more at https://reactjs.org/link/wrap-tests-with-act',
-        getComponentNameFromFiber(fiber),
-      );
-    }
-  }
-}
-
 function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (fiber.mode & ConcurrentMode) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 97b835d3a18e..cde46adb01ab 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -97,12 +97,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.old';
-import {
-  NoMode,
-  StrictLegacyMode,
-  ProfileMode,
-  ConcurrentMode,
-} from './ReactTypeOfMode';
+import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
   IndeterminateComponent,
@@ -2860,34 +2855,6 @@ function shouldForceFlushFallbacksInDEV() {
   return __DEV__ && ReactCurrentActQueue.current !== null;
 }
 
-export function warnIfNotCurrentlyActingEffectsInDEV(fiber: Fiber): void {
-  if (__DEV__) {
-    const isActEnvironment =
-      fiber.mode & ConcurrentMode
-        ? isConcurrentActEnvironment()
-        : isLegacyActEnvironment(fiber);
-    if (
-      isActEnvironment &&
-      (fiber.mode & StrictLegacyMode) !== NoMode &&
-      ReactCurrentActQueue.current === null
-    ) {
-      console.error(
-        'An update to %s ran an effect, but was not wrapped in act(...).\n\n' +
-          'When testing, code that causes React state updates should be ' +
-          'wrapped into act(...):\n\n' +
-          'act(() => {\n' +
-          '  /* fire events that update state */\n' +
-          '});\n' +
-          '/* assert on the output */\n\n' +
-          "This ensures that you're testing the behavior the user would see " +
-          'in the browser.' +
-          ' Learn more at https://reactjs.org/link/wrap-tests-with-act',
-        getComponentNameFromFiber(fiber),
-      );
-    }
-  }
-}
-
 function warnIfUpdatesNotWrappedWithActDEV(fiber: Fiber): void {
   if (__DEV__) {
     if (fiber.mode & ConcurrentMode) {

From 90e5d3638844414e1b9df0fe66c3fc46b211d210 Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Fri, 22 Oct 2021 11:44:31 -0500
Subject: [PATCH 0981/1603] chore: fix comment typo (#22615)

---
 packages/react-server/src/ReactFizzHooks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 6370f61b3773..2596632652b4 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -218,7 +218,7 @@ export function resetHooksState(): void {
 }
 
 function getCacheForType<T>(resourceType: () => T): T {
-  // TODO: This should silently mark this as client rendered since it's not necesssarily
+  // TODO: This should silently mark this as client rendered since it's not necessarily
   // considered an error. It needs to work for things like Flight though.
   throw new Error('Not implemented.');
 }

From 4298ddbc56a711cecfa672ec8ac60c94a02c9380 Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sun, 24 Oct 2021 05:21:55 +0200
Subject: [PATCH 0982/1603] fix passing strings as chunks (#22617)

---
 .../src/server/ReactDOMServerFormatConfig.js         | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 1f5a7a65bed5..2012392004e5 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -471,7 +471,7 @@ function pushAttribute(
             attributeSeparator,
             attributeNameChunk,
             attributeAssign,
-            escapeTextForBrowser(value),
+            stringToChunk(escapeTextForBrowser(value)),
             attributeEnd,
           );
         }
@@ -482,7 +482,7 @@ function pushAttribute(
             attributeSeparator,
             attributeNameChunk,
             attributeAssign,
-            escapeTextForBrowser(value),
+            stringToChunk(escapeTextForBrowser(value)),
             attributeEnd,
           );
         }
@@ -493,7 +493,7 @@ function pushAttribute(
             attributeSeparator,
             attributeNameChunk,
             attributeAssign,
-            escapeTextForBrowser(value),
+            stringToChunk(escapeTextForBrowser(value)),
             attributeEnd,
           );
         }
@@ -510,7 +510,7 @@ function pushAttribute(
           attributeSeparator,
           attributeNameChunk,
           attributeAssign,
-          escapeTextForBrowser(value),
+          stringToChunk(escapeTextForBrowser(value)),
           attributeEnd,
         );
     }
@@ -532,7 +532,7 @@ function pushAttribute(
       attributeSeparator,
       stringToChunk(name),
       attributeAssign,
-      escapeTextForBrowser(value),
+      stringToChunk(escapeTextForBrowser(value)),
       attributeEnd,
     );
   }
@@ -1146,7 +1146,7 @@ function pushStartCustomElement(
               attributeSeparator,
               stringToChunk(propKey),
               attributeAssign,
-              escapeTextForBrowser(propValue),
+              stringToChunk(escapeTextForBrowser(propValue)),
               attributeEnd,
             );
           }

From 6c3dcc7a478f53aabd24b9712a7e506cf3702a64 Mon Sep 17 00:00:00 2001
From: Erik Andersson <erik.osc.andersson@gmail.com>
Date: Wed, 27 Oct 2021 16:20:07 +0200
Subject: [PATCH 0983/1603] Enable 'Reload and Start Profiling' for Microsoft
 Edge (#22631)

---
 packages/react-devtools-extensions/src/main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 60ed0fcb1a9e..f8750292a1a7 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -33,6 +33,7 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 const isChrome = getBrowserName() === 'Chrome';
+const isEdge = getBrowserName() === 'Edge';
 
 let panelCreated = false;
 
@@ -203,7 +204,7 @@ function createPanelIfReactLoaded() {
 
           store = new Store(bridge, {
             isProfiling,
-            supportsReloadAndProfile: isChrome,
+            supportsReloadAndProfile: isChrome || isEdge,
             supportsProfiling,
             // At this time, the scheduling profiler can only parse Chrome performance profiles.
             supportsSchedulingProfiler: isChrome,

From 26bc8ff9bfcdb67e255fea424b56909899ac208b Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Wed, 27 Oct 2021 16:34:44 -0400
Subject: [PATCH 0984/1603] Revert logic for checking for duplicate
 installations of DevTools (#22638)

* Revert "Only show DevTools warning about unrecognized build in Chrome (#22571)"

This reverts commit b72dc8e9300f5ae997f7f5cfcd79b604cca3df0c.

* Revert "Show warning in UI when duplicate installations of DevTools extension are detected (#22563)"

This reverts commit 930c9e7eeb4c9721e1b8dee074c2eef4d1eae5dc.

* Revert "Prevent errors/crashing when multiple installs of DevTools are present (#22517)"

This reverts commit 545d4c2de7934a43b0c5d3ce050d77b4c3113bd3.

* Remove all references to passing extensionId in postMessage

* Keep build changes

* lint
---
 .../src/background.js                         |  22 +-
 .../src/checkForDuplicateInstallations.js     | 137 ----
 .../src/constants.js                          |  35 -
 .../src/contentScript.js                      |   5 -
 .../src/injectGlobalHook.js                   |  20 +-
 .../react-devtools-extensions/src/main.js     | 762 ++++++++----------
 .../src/devtools/views/DevTools.js            |   4 -
 .../views/DuplicateInstallationDialog.js      |  55 --
 8 files changed, 352 insertions(+), 688 deletions(-)
 delete mode 100644 packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
 delete mode 100644 packages/react-devtools-extensions/src/constants.js
 delete mode 100644 packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js

diff --git a/packages/react-devtools-extensions/src/background.js b/packages/react-devtools-extensions/src/background.js
index e8ff0f3f1620..9e09513b78fb 100644
--- a/packages/react-devtools-extensions/src/background.js
+++ b/packages/react-devtools-extensions/src/background.js
@@ -1,20 +1,11 @@
-// @flow strict-local
+/* global chrome */
 
 'use strict';
 
-declare var chrome: any;
-
-const ports: {
-  [tab: string]: {|devtools: any, 'content-script': any|},
-} = {};
+const ports = {};
 
 const IS_FIREFOX = navigator.userAgent.indexOf('Firefox') >= 0;
 
-import {
-  EXTENSION_INSTALL_CHECK,
-  SHOW_DUPLICATE_EXTENSION_WARNING,
-} from './constants';
-
 chrome.runtime.onConnect.addListener(function(port) {
   let tab = null;
   let name = null;
@@ -125,15 +116,6 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   }
 });
 
-chrome.runtime.onMessageExternal.addListener(
-  (request, sender, sendResponse) => {
-    if (request === EXTENSION_INSTALL_CHECK) {
-      sendResponse(true);
-      chrome.runtime.sendMessage(SHOW_DUPLICATE_EXTENSION_WARNING);
-    }
-  },
-);
-
 chrome.runtime.onMessage.addListener((request, sender) => {
   const tab = sender.tab;
   if (tab) {
diff --git a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js b/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
deleted file mode 100644
index 01db8edb34f7..000000000000
--- a/packages/react-devtools-extensions/src/checkForDuplicateInstallations.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- */
-
-declare var chrome: any;
-
-import {
-  INTERNAL_EXTENSION_ID,
-  LOCAL_EXTENSION_ID,
-  __DEBUG__,
-} from 'react-devtools-shared/src/constants';
-import {getBrowserName} from './utils';
-import {
-  EXTENSION_INSTALL_CHECK,
-  EXTENSION_INSTALLATION_TYPE,
-} from './constants';
-
-const IS_CHROME = getBrowserName() === 'Chrome';
-
-const UNRECOGNIZED_EXTENSION_ERROR =
-  'React Developer Tools: You are running an unrecognized installation of the React Developer Tools extension, which might conflict with other versions of the extension installed in your browser. ' +
-  'Please make sure you only have a single version of the extension installed or enabled. ' +
-  'If you are developing this extension locally, make sure to build the extension using the `yarn build:<browser>:local` command.';
-
-export function checkForDuplicateInstallations(callback: boolean => void) {
-  switch (EXTENSION_INSTALLATION_TYPE) {
-    case 'public': {
-      // If this is the public extension (e.g. from Chrome Web Store), check if an internal
-      // or local build of the extension is also installed, and if so, disable this extension.
-      // TODO show warning if other installations are present.
-      checkForInstalledExtensions([
-        INTERNAL_EXTENSION_ID,
-        LOCAL_EXTENSION_ID,
-      ]).then(areExtensionsInstalled => {
-        if (areExtensionsInstalled.some(isInstalled => isInstalled)) {
-          callback(true);
-        } else {
-          callback(false);
-        }
-      });
-      break;
-    }
-    case 'internal': {
-      // If this is the internal extension, check if a local build of the extension
-      // is also installed, and if so, disable this extension.
-      // If the public version of the extension is also installed, that extension
-      // will disable itself.
-      // TODO show warning if other installations are present.
-      checkForInstalledExtension(LOCAL_EXTENSION_ID).then(isInstalled => {
-        if (isInstalled) {
-          callback(true);
-        } else {
-          callback(false);
-        }
-      });
-      break;
-    }
-    case 'local': {
-      if (__DEV__) {
-        // If this is the local extension (i.e. built locally during development),
-        // always keep this one enabled. Other installations disable themselves if
-        // they detect the local build is installed.
-        callback(false);
-        break;
-      }
-
-      // If this extension wasn't built locally during development, we can't reliably
-      // detect if there are other installations of DevTools present.
-      // In this case, assume there are no duplicate exensions and show a warning about
-      // potential conflicts.
-      console.error(UNRECOGNIZED_EXTENSION_ERROR);
-      chrome.devtools.inspectedWindow.eval(
-        `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
-      );
-      callback(false);
-      break;
-    }
-    case 'unknown': {
-      // TODO: Support duplicate extension detection in other browsers
-      if (IS_CHROME) {
-        // If we don't know how this extension was built, we can't reliably detect if there
-        // are other installations of DevTools present.
-        // In this case, assume there are no duplicate exensions and show a warning about
-        // potential conflicts.
-        console.error(UNRECOGNIZED_EXTENSION_ERROR);
-        chrome.devtools.inspectedWindow.eval(
-          `console.error("${UNRECOGNIZED_EXTENSION_ERROR}")`,
-        );
-      }
-      callback(false);
-      break;
-    }
-    default: {
-      (EXTENSION_INSTALLATION_TYPE: empty);
-    }
-  }
-}
-
-function checkForInstalledExtensions(
-  extensionIds: string[],
-): Promise<boolean[]> {
-  return Promise.all(
-    extensionIds.map(extensionId => checkForInstalledExtension(extensionId)),
-  );
-}
-
-function checkForInstalledExtension(extensionId: string): Promise<boolean> {
-  return new Promise(resolve => {
-    chrome.runtime.sendMessage(
-      extensionId,
-      EXTENSION_INSTALL_CHECK,
-      response => {
-        if (__DEBUG__) {
-          console.log(
-            'checkForDuplicateInstallations: Duplicate installation check responded with',
-            {
-              response,
-              error: chrome.runtime.lastError?.message,
-              currentExtension: EXTENSION_INSTALLATION_TYPE,
-              checkingExtension: extensionId,
-            },
-          );
-        }
-        if (chrome.runtime.lastError != null) {
-          resolve(false);
-        } else {
-          resolve(true);
-        }
-      },
-    );
-  });
-}
diff --git a/packages/react-devtools-extensions/src/constants.js b/packages/react-devtools-extensions/src/constants.js
deleted file mode 100644
index c17ad4d64acd..000000000000
--- a/packages/react-devtools-extensions/src/constants.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- */
-
-import {
-  CHROME_WEBSTORE_EXTENSION_ID,
-  INTERNAL_EXTENSION_ID,
-  LOCAL_EXTENSION_ID,
-} from 'react-devtools-shared/src/constants';
-
-declare var chrome: any;
-
-export const CURRENT_EXTENSION_ID = chrome.runtime.id;
-
-export const EXTENSION_INSTALL_CHECK = 'extension-install-check';
-export const SHOW_DUPLICATE_EXTENSION_WARNING =
-  'show-duplicate-extension-warning';
-
-export const EXTENSION_INSTALLATION_TYPE:
-  | 'public'
-  | 'internal'
-  | 'local'
-  | 'unknown' =
-  CURRENT_EXTENSION_ID === CHROME_WEBSTORE_EXTENSION_ID
-    ? 'public'
-    : CURRENT_EXTENSION_ID === INTERNAL_EXTENSION_ID
-    ? 'internal'
-    : CURRENT_EXTENSION_ID === LOCAL_EXTENSION_ID
-    ? 'local'
-    : 'unknown';
diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js
index 179959f7e01e..c914c6e7b3df 100644
--- a/packages/react-devtools-extensions/src/contentScript.js
+++ b/packages/react-devtools-extensions/src/contentScript.js
@@ -2,8 +2,6 @@
 
 'use strict';
 
-import {CURRENT_EXTENSION_ID} from './constants';
-
 let backendDisconnected: boolean = false;
 let backendInitialized: boolean = false;
 
@@ -12,7 +10,6 @@ function sayHelloToBackend() {
     {
       source: 'react-devtools-content-script',
       hello: true,
-      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -23,7 +20,6 @@ function handleMessageFromDevtools(message) {
     {
       source: 'react-devtools-content-script',
       payload: message,
-      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
@@ -53,7 +49,6 @@ function handleDisconnect() {
         type: 'event',
         event: 'shutdown',
       },
-      extensionId: CURRENT_EXTENSION_ID,
     },
     '*',
   );
diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index a5d96966c7e1..79e5a84adba8 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -2,11 +2,7 @@
 
 import nullthrows from 'nullthrows';
 import {installHook} from 'react-devtools-shared/src/hook';
-import {
-  __DEBUG__,
-  SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
-} from 'react-devtools-shared/src/constants';
-import {CURRENT_EXTENSION_ID, EXTENSION_INSTALLATION_TYPE} from './constants';
+import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 
 function injectCode(code) {
@@ -31,19 +27,6 @@ window.addEventListener('message', function onMessage({data, source}) {
   if (source !== window || !data) {
     return;
   }
-  if (data.extensionId != null && data.extensionId !== CURRENT_EXTENSION_ID) {
-    if (__DEBUG__) {
-      console.log(
-        `[injectGlobalHook] Received message '${data.source}' from different extension instance. Skipping message.`,
-        {
-          currentExtension: EXTENSION_INSTALLATION_TYPE,
-          currentExtensionId: CURRENT_EXTENSION_ID,
-          providedExtensionId: data.extensionId,
-        },
-      );
-    }
-    return;
-  }
   switch (data.source) {
     case 'react-devtools-detector':
       lastDetectionResult = {
@@ -118,7 +101,6 @@ window.__REACT_DEVTOOLS_GLOBAL_HOOK__.on('renderer', function({reactBuildType})
   window.postMessage({
     source: 'react-devtools-detector',
     reactBuildType,
-    extensionId: "${CURRENT_EXTENSION_ID}",
   }, '*');
 });
 `;
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index f8750292a1a7..6a3836839a4e 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -22,18 +22,11 @@ import {
 import DevTools from 'react-devtools-shared/src/devtools/views/DevTools';
 import {__DEBUG__} from 'react-devtools-shared/src/constants';
 import {logEvent} from 'react-devtools-shared/src/Logger';
-import {
-  CURRENT_EXTENSION_ID,
-  EXTENSION_INSTALLATION_TYPE,
-  SHOW_DUPLICATE_EXTENSION_WARNING,
-} from './constants';
-import {checkForDuplicateInstallations} from './checkForDuplicateInstallations';
 
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 const isChrome = getBrowserName() === 'Chrome';
-const isEdge = getBrowserName() === 'Edge';
 
 let panelCreated = false;
 
@@ -77,186 +70,135 @@ function createPanelIfReactLoaded() {
         return;
       }
 
-      checkForDuplicateInstallations(hasDuplicateInstallation => {
-        if (hasDuplicateInstallation) {
-          if (__DEBUG__) {
-            console.log(
-              '[main] createPanelIfReactLoaded: Duplicate installation detected, skipping initialization of extension.',
-              {currentExtension: EXTENSION_INSTALLATION_TYPE},
-            );
-          }
-          panelCreated = true;
-          clearInterval(loadCheckInterval);
-          return;
-        }
+      panelCreated = true;
 
-        if (__DEBUG__) {
-          console.log(
-            '[main] createPanelIfReactLoaded: No duplicate installations detected, continuing with initialization.',
-            {currentExtension: EXTENSION_INSTALLATION_TYPE},
-          );
-        }
-
-        panelCreated = true;
+      clearInterval(loadCheckInterval);
 
-        clearInterval(loadCheckInterval);
+      let bridge = null;
+      let store = null;
 
-        let bridge = null;
-        let store = null;
+      let profilingData = null;
 
-        let profilingData = null;
+      let componentsPortalContainer = null;
+      let profilerPortalContainer = null;
 
-        let componentsPortalContainer = null;
-        let profilerPortalContainer = null;
+      let cloneStyleTags = null;
+      let mostRecentOverrideTab = null;
+      let render = null;
+      let root = null;
 
-        let cloneStyleTags = null;
-        let mostRecentOverrideTab = null;
-        let render = null;
-        let root = null;
-        let warnIfDuplicateInstallation = false;
+      const tabId = chrome.devtools.inspectedWindow.tabId;
 
-        const tabId = chrome.devtools.inspectedWindow.tabId;
+      registerDevToolsEventLogger('extension');
 
-        registerDevToolsEventLogger('extension');
-
-        function onDuplicateExtensionMessage(message) {
-          if (message === SHOW_DUPLICATE_EXTENSION_WARNING) {
-            chrome.runtime.onMessage.removeListener(
-              onDuplicateExtensionMessage,
-            );
+      function initBridgeAndStore() {
+        const port = chrome.runtime.connect({
+          name: String(tabId),
+        });
+        // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
+        // so it makes no sense to handle it here.
+
+        bridge = new Bridge({
+          listen(fn) {
+            const listener = message => fn(message);
+            // Store the reference so that we unsubscribe from the same object.
+            const portOnMessage = port.onMessage;
+            portOnMessage.addListener(listener);
+            return () => {
+              portOnMessage.removeListener(listener);
+            };
+          },
+          send(event: string, payload: any, transferable?: Array<any>) {
+            port.postMessage({event, payload}, transferable);
+          },
+        });
+        bridge.addListener('reloadAppForProfiling', () => {
+          localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
+          chrome.devtools.inspectedWindow.eval('window.location.reload();');
+        });
+        bridge.addListener('syncSelectionToNativeElementsPanel', () => {
+          setBrowserSelectionFromReact();
+        });
 
-            if (warnIfDuplicateInstallation === true) {
-              return;
-            }
-            warnIfDuplicateInstallation = true;
-            const errorMessage =
-              'React Developer Tools: We detected that there are multiple versions of React Developer Tools ' +
-              'installed and enabled in your browser at the same time, which will cause ' +
-              'issues while using the extension. ' +
-              'Please ensure that you have installed and enabled only a single ' +
-              'version of React Developer Tools before proceeding.';
-            console.error(errorMessage);
-            chrome.devtools.inspectedWindow.eval(
-              `console.error("${errorMessage}")`,
-            );
-            if (render != null) {
-              render();
-            }
-          }
+        // This flag lets us tip the Store off early that we expect to be profiling.
+        // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
+        // after a user has clicked the "reload and profile" button.
+        let isProfiling = false;
+        let supportsProfiling = false;
+        if (
+          localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
+        ) {
+          supportsProfiling = true;
+          isProfiling = true;
+          localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
         }
-        chrome.runtime.onMessage.addListener(onDuplicateExtensionMessage);
-
-        function initBridgeAndStore() {
-          const port = chrome.runtime.connect({
-            name: String(tabId),
-          });
-          // Looks like `port.onDisconnect` does not trigger on in-tab navigation like new URL or back/forward navigation,
-          // so it makes no sense to handle it here.
-
-          bridge = new Bridge({
-            listen(fn) {
-              const listener = message => fn(message);
-              // Store the reference so that we unsubscribe from the same object.
-              const portOnMessage = port.onMessage;
-              portOnMessage.addListener(listener);
-              return () => {
-                portOnMessage.removeListener(listener);
-              };
-            },
-            send(event: string, payload: any, transferable?: Array<any>) {
-              port.postMessage({event, payload}, transferable);
-            },
-          });
-          bridge.addListener('reloadAppForProfiling', () => {
-            localStorageSetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY, 'true');
-            chrome.devtools.inspectedWindow.eval('window.location.reload();');
-          });
-          bridge.addListener('syncSelectionToNativeElementsPanel', () => {
-            setBrowserSelectionFromReact();
-          });
 
-          // This flag lets us tip the Store off early that we expect to be profiling.
-          // This avoids flashing a temporary "Profiling not supported" message in the Profiler tab,
-          // after a user has clicked the "reload and profile" button.
-          let isProfiling = false;
-          let supportsProfiling = false;
-          if (
-            localStorageGetItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY) === 'true'
-          ) {
-            supportsProfiling = true;
-            isProfiling = true;
-            localStorageRemoveItem(LOCAL_STORAGE_SUPPORTS_PROFILING_KEY);
-          }
+        if (store !== null) {
+          profilingData = store.profilerStore.profilingData;
+        }
 
-          if (store !== null) {
-            profilingData = store.profilerStore.profilingData;
-          }
+        bridge.addListener('extensionBackendInitialized', () => {
+          // Initialize the renderer's trace-updates setting.
+          // This handles the case of navigating to a new page after the DevTools have already been shown.
+          bridge.send(
+            'setTraceUpdatesEnabled',
+            localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
+              'true',
+          );
+        });
 
-          bridge.addListener('extensionBackendInitialized', () => {
-            // Initialize the renderer's trace-updates setting.
-            // This handles the case of navigating to a new page after the DevTools have already been shown.
-            bridge.send(
-              'setTraceUpdatesEnabled',
-              localStorageGetItem(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY) ===
-                'true',
-            );
-          });
+        store = new Store(bridge, {
+          isProfiling,
+          supportsReloadAndProfile: isChrome,
+          supportsProfiling,
+          // At this time, the scheduling profiler can only parse Chrome performance profiles.
+          supportsSchedulingProfiler: isChrome,
+          supportsTraceUpdates: true,
+        });
+        store.profilerStore.profilingData = profilingData;
+
+        // Initialize the backend only once the Store has been initialized.
+        // Otherwise the Store may miss important initial tree op codes.
+        chrome.devtools.inspectedWindow.eval(
+          `window.postMessage({ source: 'react-devtools-inject-backend' }, '*');`,
+          function(response, evalError) {
+            if (evalError) {
+              console.error(evalError);
+            }
+          },
+        );
 
-          store = new Store(bridge, {
-            isProfiling,
-            supportsReloadAndProfile: isChrome || isEdge,
-            supportsProfiling,
-            // At this time, the scheduling profiler can only parse Chrome performance profiles.
-            supportsSchedulingProfiler: isChrome,
-            supportsTraceUpdates: true,
-          });
-          store.profilerStore.profilingData = profilingData;
-
-          // Initialize the backend only once the Store has been initialized.
-          // Otherwise the Store may miss important initial tree op codes.
-          chrome.devtools.inspectedWindow.eval(
-            `window.postMessage({
-               source: 'react-devtools-inject-backend',
-               extensionId: "${CURRENT_EXTENSION_ID}",
-             }, '*');`,
-            function(response, evalError) {
-              if (evalError) {
-                console.error(evalError);
-              }
-            },
-          );
+        const viewAttributeSourceFunction = (id, path) => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to find the specified attribute,
+            // and store it as a global variable on the window.
+            bridge.send('viewAttributeSource', {id, path, rendererID});
 
-          const viewAttributeSourceFunction = (id, path) => {
-            const rendererID = store.getRendererIDForElement(id);
-            if (rendererID != null) {
-              // Ask the renderer interface to find the specified attribute,
-              // and store it as a global variable on the window.
-              bridge.send('viewAttributeSource', {id, path, rendererID});
-
-              setTimeout(() => {
-                // Ask Chrome to display the location of the attribute,
-                // assuming the renderer found a match.
-                chrome.devtools.inspectedWindow.eval(`
+            setTimeout(() => {
+              // Ask Chrome to display the location of the attribute,
+              // assuming the renderer found a match.
+              chrome.devtools.inspectedWindow.eval(`
                 if (window.$attribute != null) {
                   inspect(window.$attribute);
                 }
               `);
-              }, 100);
-            }
-          };
+            }, 100);
+          }
+        };
 
-          const viewElementSourceFunction = id => {
-            const rendererID = store.getRendererIDForElement(id);
-            if (rendererID != null) {
-              // Ask the renderer interface to determine the component function,
-              // and store it as a global variable on the window
-              bridge.send('viewElementSource', {id, rendererID});
-
-              setTimeout(() => {
-                // Ask Chrome to display the location of the component function,
-                // or a render method if it is a Class (ideally Class instance, not type)
-                // assuming the renderer found one.
-                chrome.devtools.inspectedWindow.eval(`
+        const viewElementSourceFunction = id => {
+          const rendererID = store.getRendererIDForElement(id);
+          if (rendererID != null) {
+            // Ask the renderer interface to determine the component function,
+            // and store it as a global variable on the window
+            bridge.send('viewElementSource', {id, rendererID});
+
+            setTimeout(() => {
+              // Ask Chrome to display the location of the component function,
+              // or a render method if it is a Class (ideally Class instance, not type)
+              // assuming the renderer found one.
+              chrome.devtools.inspectedWindow.eval(`
                 if (window.$type != null) {
                   if (
                     window.$type &&
@@ -271,294 +213,288 @@ function createPanelIfReactLoaded() {
                   }
                 }
               `);
-              }, 100);
-            }
-          };
+            }, 100);
+          }
+        };
 
-          let debugIDCounter = 0;
+        let debugIDCounter = 0;
 
-          // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
-          // never reaches the chrome.runtime.onMessage event listener.
-          let fetchFileWithCaching = null;
-          if (isChrome) {
-            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;
+        // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
+        // never reaches the chrome.runtime.onMessage event listener.
+        let fetchFileWithCaching = null;
+        if (isChrome) {
+          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++;
-                console.log(`[main] fetchFromNetworkCache(${debugID})`, url);
-              }
+            if (__DEBUG__) {
+              debugID = debugIDCounter++;
+              console.log(`[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) {
-                    if (__DEBUG__) {
-                      console.log(
-                        `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
-                        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) {
+                  if (__DEBUG__) {
+                    console.log(
+                      `[main] fetchFromNetworkCache(${debugID}) Found matching URL in HAR`,
+                      url,
+                    );
+                  }
 
-                    entry.getContent(content => {
-                      if (content) {
-                        if (__DEBUG__) {
-                          console.log(
-                            `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
-                          );
-                        }
-
-                        resolve(content);
-                      } else {
-                        if (__DEBUG__) {
-                          console.log(
-                            `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
-                            content,
-                          );
-                        }
-
-                        // Edge case where getContent() returned null; fall back to fetch.
-                        fetchFromPage(url, resolve, reject);
+                  entry.getContent(content => {
+                    if (content) {
+                      if (__DEBUG__) {
+                        console.log(
+                          `[main] fetchFromNetworkCache(${debugID}) Content retrieved`,
+                        );
                       }
-                    });
 
-                    return;
-                  }
-                }
+                      resolve(content);
+                    } else {
+                      if (__DEBUG__) {
+                        console.log(
+                          `[main] fetchFromNetworkCache(${debugID}) Invalid content returned by getContent()`,
+                          content,
+                        );
+                      }
 
-                if (__DEBUG__) {
-                  console.log(
-                    `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
-                  );
-                }
+                      // Edge case where getContent() returned null; fall back to fetch.
+                      fetchFromPage(url, resolve, reject);
+                    }
+                  });
 
-                // No matching URL found; fall back to fetch.
-                fetchFromPage(url, resolve, reject);
-              });
-            };
+                  return;
+                }
+              }
 
-            const fetchFromPage = (url, resolve, reject) => {
               if (__DEBUG__) {
-                console.log('[main] fetchFromPage()', url);
+                console.log(
+                  `[main] fetchFromNetworkCache(${debugID}) No cached request found in getHAR()`,
+                );
               }
 
-              function onPortMessage({payload, source}) {
-                if (source === 'react-devtools-content-script') {
-                  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;
-                  }
+              // No matching URL found; fall back to fetch.
+              fetchFromPage(url, resolve, reject);
+            });
+          };
+
+          const fetchFromPage = (url, resolve, reject) => {
+            if (__DEBUG__) {
+              console.log('[main] fetchFromPage()', url);
+            }
+
+            function onPortMessage({payload, source}) {
+              if (source === 'react-devtools-content-script') {
+                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);
+            chrome.runtime.onMessage.addListener(onPortMessage);
 
-              chrome.devtools.inspectedWindow.eval(`
-                window.postMessage({
-                  source: 'react-devtools-extension',
-                  extensionId: "${CURRENT_EXTENSION_ID}",
-                  payload: {
-                    type: 'fetch-file-with-cache',
-                    url: "${url}",
-                  },
-                }, '*');
-              `);
-            };
-
-            // Fetching files from the extension won't make use of the network cache
-            // for resources that have already been loaded by the page.
-            // This helper function allows the extension to request files to be fetched
-            // by the content script (running in the page) to increase the likelihood of a cache hit.
-            fetchFileWithCaching = url => {
-              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);
+            chrome.devtools.inspectedWindow.eval(`
+              window.postMessage({
+                source: 'react-devtools-extension',
+                payload: {
+                  type: 'fetch-file-with-cache',
+                  url: "${url}",
+                },
               });
-            };
-          }
-
-          // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
-          const hookNamesModuleLoaderFunction = () =>
-            import(
-              /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
-            );
-
-          root = createRoot(document.createElement('div'));
-
-          render = (overrideTab = mostRecentOverrideTab) => {
-            mostRecentOverrideTab = overrideTab;
-            root.render(
-              createElement(DevTools, {
-                bridge,
-                browserTheme: getBrowserTheme(),
-                componentsPortalContainer,
-                enabledInspectedElementContextMenu: true,
-                fetchFileWithCaching,
-                hookNamesModuleLoaderFunction,
-                overrideTab,
-                profilerPortalContainer,
-                warnIfDuplicateInstallation,
-                showTabBar: false,
-                store,
-                warnIfUnsupportedVersionDetected: true,
-                viewAttributeSourceFunction,
-                viewElementSourceFunction,
-              }),
-            );
+            `);
           };
 
-          render();
+          // Fetching files from the extension won't make use of the network cache
+          // for resources that have already been loaded by the page.
+          // This helper function allows the extension to request files to be fetched
+          // by the content script (running in the page) to increase the likelihood of a cache hit.
+          fetchFileWithCaching = url => {
+            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);
+            });
+          };
         }
 
-        cloneStyleTags = () => {
-          const linkTags = [];
-          // 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,
-                );
-              }
-              linkTags.push(newLinkTag);
-            }
-          }
-          return linkTags;
+        // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
+        const hookNamesModuleLoaderFunction = () =>
+          import(
+            /* webpackChunkName: 'parseHookNames' */ 'react-devtools-shared/src/hooks/parseHookNames'
+          );
+
+        root = createRoot(document.createElement('div'));
+
+        render = (overrideTab = mostRecentOverrideTab) => {
+          mostRecentOverrideTab = overrideTab;
+          root.render(
+            createElement(DevTools, {
+              bridge,
+              browserTheme: getBrowserTheme(),
+              componentsPortalContainer,
+              enabledInspectedElementContextMenu: true,
+              fetchFileWithCaching,
+              hookNamesModuleLoaderFunction,
+              overrideTab,
+              profilerPortalContainer,
+              showTabBar: false,
+              store,
+              warnIfUnsupportedVersionDetected: true,
+              viewAttributeSourceFunction,
+              viewElementSourceFunction,
+            }),
+          );
         };
 
-        initBridgeAndStore();
+        render();
+      }
 
-        function ensureInitialHTMLIsCleared(container) {
-          if (container._hasInitialHTMLBeenCleared) {
-            return;
+      cloneStyleTags = () => {
+        const linkTags = [];
+        // 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);
+            }
+            linkTags.push(newLinkTag);
           }
-          container.innerHTML = '';
-          container._hasInitialHTMLBeenCleared = true;
         }
+        return linkTags;
+      };
 
-        function setBrowserSelectionFromReact() {
-          // This is currently only called on demand when you press "view DOM".
-          // In the future, if Chrome adds an inspect() that doesn't switch tabs,
-          // we could make this happen automatically when you select another component.
-          chrome.devtools.inspectedWindow.eval(
-            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-              '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
-              'false',
-            (didSelectionChange, evalError) => {
-              if (evalError) {
-                console.error(evalError);
-              }
-            },
-          );
-        }
+      initBridgeAndStore();
 
-        function setReactSelectionFromBrowser() {
-          // When the user chooses a different node in the browser Elements tab,
-          // copy it over to the hook object so that we can sync the selection.
-          chrome.devtools.inspectedWindow.eval(
-            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
-              '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
-              'false',
-            (didSelectionChange, evalError) => {
-              if (evalError) {
-                console.error(evalError);
-              } else if (didSelectionChange) {
-                // Remember to sync the selection next time we show Components tab.
-                needsToSyncElementSelection = true;
-              }
-            },
-          );
+      function ensureInitialHTMLIsCleared(container) {
+        if (container._hasInitialHTMLBeenCleared) {
+          return;
         }
+        container.innerHTML = '';
+        container._hasInitialHTMLBeenCleared = true;
+      }
 
-        setReactSelectionFromBrowser();
-        chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
-          setReactSelectionFromBrowser();
-        });
+      function setBrowserSelectionFromReact() {
+        // This is currently only called on demand when you press "view DOM".
+        // In the future, if Chrome adds an inspect() that doesn't switch tabs,
+        // we could make this happen automatically when you select another component.
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(inspect(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0), true) :' +
+            'false',
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
+            }
+          },
+        );
+      }
 
-        let currentPanel = null;
-        let needsToSyncElementSelection = false;
-
-        chrome.devtools.panels.create(
-          isChrome ? '⚛️ Components' : 'Components',
-          '',
-          'panel.html',
-          extensionPanel => {
-            extensionPanel.onShown.addListener(panel => {
-              if (needsToSyncElementSelection) {
-                needsToSyncElementSelection = false;
-                bridge.send('syncSelectionFromNativeElementsPanel');
-              }
+      function setReactSelectionFromBrowser() {
+        // When the user chooses a different node in the browser Elements tab,
+        // copy it over to the hook object so that we can sync the selection.
+        chrome.devtools.inspectedWindow.eval(
+          '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__ && window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 !== $0) ?' +
+            '(window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = $0, true) :' +
+            'false',
+          (didSelectionChange, evalError) => {
+            if (evalError) {
+              console.error(evalError);
+            } else if (didSelectionChange) {
+              // Remember to sync the selection next time we show Components tab.
+              needsToSyncElementSelection = true;
+            }
+          },
+        );
+      }
 
-              if (currentPanel === panel) {
-                return;
-              }
+      setReactSelectionFromBrowser();
+      chrome.devtools.panels.elements.onSelectionChanged.addListener(() => {
+        setReactSelectionFromBrowser();
+      });
 
-              currentPanel = panel;
-              componentsPortalContainer = panel.container;
+      let currentPanel = null;
+      let needsToSyncElementSelection = false;
+
+      chrome.devtools.panels.create(
+        isChrome ? '⚛️ Components' : 'Components',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (needsToSyncElementSelection) {
+              needsToSyncElementSelection = false;
+              bridge.send('syncSelectionFromNativeElementsPanel');
+            }
 
-              if (componentsPortalContainer != null) {
-                ensureInitialHTMLIsCleared(componentsPortalContainer);
-                render('components');
-                panel.injectStyles(cloneStyleTags);
-                logEvent({event_name: 'selected-components-tab'});
-              }
-            });
-            extensionPanel.onHidden.addListener(panel => {
-              // TODO: Stop highlighting and stuff.
-            });
-          },
-        );
+            if (currentPanel === panel) {
+              return;
+            }
 
-        chrome.devtools.panels.create(
-          isChrome ? '⚛️ Profiler' : 'Profiler',
-          '',
-          'panel.html',
-          extensionPanel => {
-            extensionPanel.onShown.addListener(panel => {
-              if (currentPanel === panel) {
-                return;
-              }
+            currentPanel = panel;
+            componentsPortalContainer = panel.container;
 
-              currentPanel = panel;
-              profilerPortalContainer = panel.container;
+            if (componentsPortalContainer != null) {
+              ensureInitialHTMLIsCleared(componentsPortalContainer);
+              render('components');
+              panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-components-tab'});
+            }
+          });
+          extensionPanel.onHidden.addListener(panel => {
+            // TODO: Stop highlighting and stuff.
+          });
+        },
+      );
+
+      chrome.devtools.panels.create(
+        isChrome ? '⚛️ Profiler' : 'Profiler',
+        '',
+        'panel.html',
+        extensionPanel => {
+          extensionPanel.onShown.addListener(panel => {
+            if (currentPanel === panel) {
+              return;
+            }
 
-              if (profilerPortalContainer != null) {
-                ensureInitialHTMLIsCleared(profilerPortalContainer);
-                render('profiler');
-                panel.injectStyles(cloneStyleTags);
-                logEvent({event_name: 'selected-profiler-tab'});
-              }
-            });
-          },
-        );
+            currentPanel = panel;
+            profilerPortalContainer = panel.container;
+
+            if (profilerPortalContainer != null) {
+              ensureInitialHTMLIsCleared(profilerPortalContainer);
+              render('profiler');
+              panel.injectStyles(cloneStyleTags);
+              logEvent({event_name: 'selected-profiler-tab'});
+            }
+          });
+        },
+      );
 
-        chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
+      chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 
-        // Re-initialize DevTools panel when a new page is loaded.
-        chrome.devtools.network.onNavigated.addListener(function onNavigated() {
-          // Re-initialize saved filters on navigation,
-          // since global values stored on window get reset in this case.
-          syncSavedPreferences();
+      // Re-initialize DevTools panel when a new page is loaded.
+      chrome.devtools.network.onNavigated.addListener(function onNavigated() {
+        // Re-initialize saved filters on navigation,
+        // since global values stored on window get reset in this case.
+        syncSavedPreferences();
 
-          // It's easiest to recreate the DevTools panel (to clean up potential stale state).
-          // We can revisit this in the future as a small optimization.
-          flushSync(() => root.unmount());
+        // It's easiest to recreate the DevTools panel (to clean up potential stale state).
+        // We can revisit this in the future as a small optimization.
+        flushSync(() => root.unmount());
 
-          initBridgeAndStore();
-        });
+        initBridgeAndStore();
       });
     },
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 8f1b6a22c11b..781ad9d902f6 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -34,7 +34,6 @@ import {SchedulingProfilerContextController} from 'react-devtools-scheduling-pro
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
-import DuplicateInstallationDialog from './DuplicateInstallationDialog';
 import UnsupportedVersionDialog from './UnsupportedVersionDialog';
 import WarnIfLegacyBackendDetected from './WarnIfLegacyBackendDetected';
 import {useLocalStorage} from './hooks';
@@ -74,7 +73,6 @@ export type Props = {|
   enabledInspectedElementContextMenu?: boolean,
   showTabBar?: boolean,
   store: Store,
-  warnIfDuplicateInstallation?: boolean,
   warnIfLegacyBackendDetected?: boolean,
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
@@ -134,7 +132,6 @@ export default function DevTools({
   profilerPortalContainer,
   showTabBar = false,
   store,
-  warnIfDuplicateInstallation = false,
   warnIfLegacyBackendDetected = false,
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
@@ -322,7 +319,6 @@ export default function DevTools({
                 </ViewElementSourceContext.Provider>
               </SettingsContextController>
               <UnsupportedBridgeProtocolDialog />
-              {warnIfDuplicateInstallation && <DuplicateInstallationDialog />}
               {warnIfLegacyBackendDetected && <WarnIfLegacyBackendDetected />}
               {warnIfUnsupportedVersionDetected && <UnsupportedVersionDialog />}
             </ModalDialogContextController>
diff --git a/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js b/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
deleted file mode 100644
index 12a32ce4b7f4..000000000000
--- a/packages/react-devtools-shared/src/devtools/views/DuplicateInstallationDialog.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow strict-local
- */
-
-import * as React from 'react';
-import {Fragment, useContext, useEffect} from 'react';
-import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
-import {ModalDialogContext} from './ModalDialog';
-
-export default function DuplicateInstallationDialog(_: {||}) {
-  const {dispatch} = useContext(ModalDialogContext);
-
-  useEffect(() => {
-    dispatch({
-      canBeDismissed: false,
-      id: 'DuplicateInstallationDialog',
-      type: 'SHOW',
-      title: 'Duplicate Installations of DevTools Detected',
-      content: <DialogContent />,
-    });
-  }, []);
-  return null;
-}
-
-function DialogContent(_: {||}) {
-  return (
-    <Fragment>
-      <p>
-        We detected that there are multiple versions of React Developer Tools
-        installed and enabled in your browser at the same time, which will cause
-        issues while using the extension.
-      </p>
-      {isInternalFacebookBuild ? (
-        <p>
-          Before proceeding, please ensure that the only enabled version of
-          React Developer Tools is the internal (Chef-installed) version. To
-          manage your extensions, visit the <code>about://extensions</code> page
-          in your browser.
-        </p>
-      ) : (
-        <p>
-          Please ensure that you have installed and enabled only a single
-          version of React Developer Tools before proceeding. To manage your
-          extensions, visit the <code>about://extensions</code> page in your
-          browser.
-        </p>
-      )}
-    </Fragment>
-  );
-}

From c624dc3598c6dc95f9a827667bc4f8ecff41f0bd Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Oct 2021 17:18:48 -0400
Subject: [PATCH 0985/1603] DevTools supports ENV-injected version for better
 internal bug reports (#22635)

---
 packages/react-devtools-extensions/utils.js        | 14 ++++++++------
 .../react-devtools-extensions/webpack.backend.js   |  2 +-
 .../react-devtools-extensions/webpack.config.js    |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
index a096b39b2283..0cbf23fc68f2 100644
--- a/packages/react-devtools-extensions/utils.js
+++ b/packages/react-devtools-extensions/utils.js
@@ -30,12 +30,14 @@ function getGitCommit() {
   }
 }
 
-function getVersionString() {
-  const packageVersion = JSON.parse(
-    readFileSync(
-      resolve(__dirname, '..', 'react-devtools-core', './package.json'),
-    ),
-  ).version;
+function getVersionString(packageVersion = null) {
+  if (packageVersion == null) {
+    packageVersion = JSON.parse(
+      readFileSync(
+        resolve(__dirname, '..', 'react-devtools-core', './package.json'),
+      ),
+    ).version;
+  }
 
   const commit = getGitCommit();
 
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
index e8c3bded6310..80198868f187 100644
--- a/packages/react-devtools-extensions/webpack.backend.js
+++ b/packages/react-devtools-extensions/webpack.backend.js
@@ -30,7 +30,7 @@ const builtModulesDir = resolve(
 
 const __DEV__ = NODE_ENV === 'development';
 
-const DEVTOOLS_VERSION = getVersionString();
+const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 
 const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
 
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index f7ba2f2e7624..99b1d18d3a99 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -30,7 +30,7 @@ const builtModulesDir = resolve(
 
 const __DEV__ = NODE_ENV === 'development';
 
-const DEVTOOLS_VERSION = getVersionString();
+const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
 
 const LOGGING_URL = process.env.LOGGING_URL || null;
 

From 9c8161ba81220143e7f87bd901697e46b14d8968 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Thu, 28 Oct 2021 11:04:27 -0400
Subject: [PATCH 0986/1603] Reapply changes from #22631 (#22645)

---
 packages/react-devtools-extensions/src/backend.js | 6 ++----
 packages/react-devtools-extensions/src/main.js    | 3 ++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
index 5b6821bbba03..a102bed3a90a 100644
--- a/packages/react-devtools-extensions/src/backend.js
+++ b/packages/react-devtools-extensions/src/backend.js
@@ -13,16 +13,15 @@ function welcome(event) {
   ) {
     return;
   }
-  const extensionId = event.data.extensionId;
 
   window.removeEventListener('message', welcome);
 
-  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__, extensionId);
+  setup(window.__REACT_DEVTOOLS_GLOBAL_HOOK__);
 }
 
 window.addEventListener('message', welcome);
 
-function setup(hook, extensionId) {
+function setup(hook) {
   if (hook == null) {
     // DevTools didn't get injected into this page (maybe b'c of the contentType).
     return;
@@ -56,7 +55,6 @@ function setup(hook, extensionId) {
         {
           source: 'react-devtools-bridge',
           payload: {event, payload},
-          extensionId,
         },
         '*',
         transferable,
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 6a3836839a4e..70aaf92a7d52 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -27,6 +27,7 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
 const isChrome = getBrowserName() === 'Chrome';
+const isEdge = getBrowserName() === 'Edge';
 
 let panelCreated = false;
 
@@ -149,7 +150,7 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge, {
           isProfiling,
-          supportsReloadAndProfile: isChrome,
+          supportsReloadAndProfile: isChrome || isEdge,
           supportsProfiling,
           // At this time, the scheduling profiler can only parse Chrome performance profiles.
           supportsSchedulingProfiler: isChrome,

From 7034408ff762b52a39f3a3145a37f4526d0a95cf Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 31 Oct 2021 18:37:32 -0400
Subject: [PATCH 0987/1603] Follow-up improvements to error code extraction
 infra (#22516)

* Output FIXME during build for unminified errors

The invariant Babel transform used to output a FIXME comment if it
could not find a matching error code. This could happen if there were
a configuration mistake that caused an unminified message to
slip through.

Linting the compiled bundles is the most reliable way to do it because
there's not a one-to-one mapping between source modules and bundles. For
example, the same source module may appear in multiple bundles, some
which are minified and others which aren't.

This updates the transform to output the same messages for Error calls.

The source lint rule is still useful for catching mistakes during
development, to prompt you to update the error codes map before pushing
the PR to CI.

* Don't run error transform in development

We used to run the error transform in both production and development,
because in development it was used to convert `invariant` calls into
throw statements.

Now that don't use `invariant` anymore, we only have to run the
transform for production builds.

* Add ! to FIXME comment so Closure doesn't strip it

Don't love this solution because Closure could change this heuristic,
or we could switch to a differnt compiler that doesn't support it. But
it works.

Could add a bundle that contains an unminified error solely for the
purpose of testing it, but that seems like overkill.

* Alternate extract-errors that scrapes artifacts

The build script outputs a special FIXME comment when it fails to minify
an error message. CI will detect these comments and fail the workflow.

The comments also include the expected error message. So I added an
alternate extract-errors that scrapes unminified messages from the
build artifacts and updates `codes.json`.

This is nice because it works on partial builds. And you can also run it
after the fact, instead of needing build all over again.

* Disable error minification in more bundles

Not worth it because the number of errors does not outweight the size
of the formatProdErrorMessage runtime.

* Run extract-errors script in CI

The lint_build job already checks for unminified errors, but the output
isn't super helpful.

Instead I've added a new job that runs the extract-errors script and
fails the build if `codes.json` changes. It also outputs the expected
diff so you can easily see which messages were missing from the map.

* Replace old extract-errors script with new one

Deletes the old extract-errors in favor of extract-errors2
---
 .circleci/config.yml                          |  18 +-
 package.json                                  |   2 +-
 .../__tests__/ReactError-test.internal.js     |   1 +
 scripts/error-codes/README.md                 |   5 +-
 .../transform-error-messages.js.snap          |  79 ++-----
 .../__tests__/transform-error-messages.js     |  83 ++-----
 scripts/error-codes/extract-errors.js         | 143 +++++-------
 .../error-codes/transform-error-messages.js   | 217 ++++--------------
 scripts/jest/preprocessor.js                  |   6 -
 scripts/rollup/build.js                       |  50 +---
 scripts/rollup/bundles.js                     |  14 +-
 11 files changed, 179 insertions(+), 439 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 7d1eb1e8b338..8c847fc05f39 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -209,7 +209,20 @@ jobs:
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn lint-build
-      - run: scripts/circleci/check_minified_errors.sh
+
+  check_error_codes:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace: *attach_workspace
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Search build artifacts for unminified errors
+          command: |
+            yarn extract-errors
+            git diff || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
 
   yarn_test:
     docker: *docker
@@ -414,6 +427,9 @@ workflows:
       - yarn_lint_build:
           requires:
             - yarn_build_combined
+      - check_error_codes:
+          requires:
+            - yarn_build_combined
       - RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
           requires:
             - yarn_build_combined
diff --git a/package.json b/package.json
index e7471a686ce8..e4ea1c83be80 100644
--- a/package.json
+++ b/package.json
@@ -114,7 +114,7 @@
     "linc": "node ./scripts/tasks/linc.js",
     "lint": "node ./scripts/tasks/eslint.js",
     "lint-build": "node ./scripts/rollup/validate/index.js",
-    "extract-errors": "yarn build --type=dev --extract-errors",
+    "extract-errors": "node scripts/error-codes/extract-errors.js",
     "postinstall": "node node_modules/fbjs-scripts/node/check-dev-engines.js package.json && node ./scripts/flow/createFlowConfigs.js && node ./scripts/yarn/downloadReactIsForPrettyFormat.js",
     "debug-test": "yarn test --deprecated 'yarn test --debug'",
     "test": "node ./scripts/jest/jest-cli.js",
diff --git a/packages/shared/__tests__/ReactError-test.internal.js b/packages/shared/__tests__/ReactError-test.internal.js
index c40e62c6f391..5576c72bf683 100644
--- a/packages/shared/__tests__/ReactError-test.internal.js
+++ b/packages/shared/__tests__/ReactError-test.internal.js
@@ -37,6 +37,7 @@ describe('ReactError', () => {
   });
 
   // @gate build === "production"
+  // @gate !source
   it('should error with minified error code', () => {
     expect(() => ReactDOM.render('Hi', null)).toThrowError(
       'Minified React error #200; visit ' +
diff --git a/scripts/error-codes/README.md b/scripts/error-codes/README.md
index 9933e9903d1e..38918bd42a52 100644
--- a/scripts/error-codes/README.md
+++ b/scripts/error-codes/README.md
@@ -9,7 +9,10 @@ provide a better debugging support in production. Check out the blog post
   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`.
+  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/__tests__/__snapshots__/transform-error-messages.js.snap b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
index bfb80ab37556..97870a4b31b8 100644
--- a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -2,94 +2,47 @@
 
 exports[`error transform handles escaped backticks in template string 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? \\"Expected \`\\" + listener + \\"\` listener to be a function, instead got a value of \`\\" + type + \\"\` type.\\" : _formatProdErrorMessage(231, listener, type));"
+Error(_formatProdErrorMessage(231, listener, type));"
 `;
 
-exports[`error transform should correctly transform invariants that are not in the error codes map 1`] = `
-"import invariant from 'shared/invariant';
-
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
-if (!condition) {
-  throw Error(\\"This is not a real error message.\\");
-}"
+exports[`error transform should not touch other calls or new expressions 1`] = `
+"new NotAnError();
+NotAnError();"
 `;
 
-exports[`error transform should handle escaped characters 1`] = `
-"import invariant from 'shared/invariant';
+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!*/
 
-/*FIXME (minify-errors-in-prod): Unminified error message in production build!*/
-if (!condition) {
-  throw Error(\\"What's up?\\");
-}"
+/*! <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 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, 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(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
+Error(_formatProdErrorMessage(16));"
 `;
 
 exports[`error transform should replace error constructors 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? 'Do not override existing functions.' : _formatProdErrorMessage(16));"
-`;
-
-exports[`error transform should replace simple invariant calls 1`] = `
-"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-import invariant from 'shared/invariant';
-
-if (!condition) {
-  {
-    throw Error(__DEV__ ? \\"Do not override existing functions.\\" : _formatProdErrorMessage(16));
-  }
-}"
+Error(_formatProdErrorMessage(16));"
 `;
 
 exports[`error transform should support error constructors with concatenated messages 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? \\"Expected \\" + foo + \\" target to \\" + (\\"be an array; got \\" + bar) : _formatProdErrorMessage(7, foo, bar));"
+Error(_formatProdErrorMessage(7, foo, bar));"
 `;
 
 exports[`error transform should support interpolating arguments with concatenation 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? 'Expected ' + foo + ' target to be an array; got ' + bar : _formatProdErrorMessage(7, foo, bar));"
+Error(_formatProdErrorMessage(7, foo, bar));"
 `;
 
 exports[`error transform should support interpolating arguments with template strings 1`] = `
 "import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));"
-`;
-
-exports[`error transform should support invariant calls with a concatenated template string and args 1`] = `
-"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-import invariant from 'shared/invariant';
-
-if (!condition) {
-  {
-    throw Error(__DEV__ ? \\"Expected a component class, got \\" + Foo + \\".\\" + Bar : _formatProdErrorMessage(18, Foo, Bar));
-  }
-}"
-`;
-
-exports[`error transform should support invariant calls with args 1`] = `
-"import _formatProdErrorMessage from \\"shared/formatProdErrorMessage\\";
-import invariant from 'shared/invariant';
-
-if (!condition) {
-  {
-    throw Error(__DEV__ ? \\"Expected \\" + foo + \\" target to be an array; got \\" + bar : _formatProdErrorMessage(7, foo, bar));
-  }
-}"
-`;
-
-exports[`error transform should support noMinify option 1`] = `
-"import invariant from 'shared/invariant';
-
-if (!condition) {
-  throw Error(\\"Do not override existing functions.\\");
-}"
+Error(_formatProdErrorMessage(7, foo, bar));"
 `;
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
index 2bca7366321e..3cf08b69e848 100644
--- a/scripts/error-codes/__tests__/transform-error-messages.js
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -28,87 +28,46 @@ describe('error transform', () => {
     process.env.NODE_ENV = oldEnv;
   });
 
-  it('should replace simple invariant calls', () => {
-    expect(
-      transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'Do not override existing functions.');
-`)
-    ).toMatchSnapshot();
-  });
-
-  it('should throw if invariant is not in an expression statement', () => {
-    expect(() => {
-      transform(`
-import invariant from 'shared/invariant';
-cond && invariant(condition, 'Do not override existing functions.');
-`);
-    }).toThrow('invariant() cannot be called from expression context');
-  });
-
-  it('should support invariant calls with args', () => {
-    expect(
-      transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'Expected %s target to be an array; got %s', foo, bar);
-`)
-    ).toMatchSnapshot();
-  });
-
-  it('should support invariant calls with a concatenated template string and args', () => {
-    expect(
-      transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'Expected a component class, ' + 'got %s.' + '%s', Foo, Bar);
-`)
-    ).toMatchSnapshot();
-  });
-
-  it('should correctly transform invariants that are not in the error codes map', () => {
+  it('should replace error constructors', () => {
     expect(
       transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'This is not a real error message.');
+new Error('Do not override existing functions.');
 `)
     ).toMatchSnapshot();
   });
 
-  it('should handle escaped characters', () => {
+  it('should replace error constructors (no new)', () => {
     expect(
       transform(`
-import invariant from 'shared/invariant';
-invariant(condition, 'What\\'s up?');
+Error('Do not override existing functions.');
 `)
     ).toMatchSnapshot();
   });
 
-  it('should support noMinify option', () => {
-    expect(
-      transform(
-        `
-import invariant from 'shared/invariant';
-invariant(condition, 'Do not override existing functions.');
-`,
-        {noMinify: true}
-      )
-    ).toMatchSnapshot();
-  });
-
-  it('should replace error constructors', () => {
+  it("should output FIXME for errors that don't have a matching error code", () => {
     expect(
       transform(`
-new Error('Do not override existing functions.');
+Error('This is not a real error message.');
 `)
     ).toMatchSnapshot();
   });
 
-  it('should replace error constructors (no new)', () => {
-    expect(
-      transform(`
-Error('Do not override existing functions.');
+  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();
-  });
+      ).toMatchSnapshot();
+    }
+  );
 
   it('should not touch other calls or new expressions', () => {
     expect(
diff --git a/scripts/error-codes/extract-errors.js b/scripts/error-codes/extract-errors.js
index d60ffe308cdb..addb095b4ca1 100644
--- a/scripts/error-codes/extract-errors.js
+++ b/scripts/error-codes/extract-errors.js
@@ -1,105 +1,74 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
 'use strict';
 
-const parser = require('@babel/parser');
 const fs = require('fs');
 const path = require('path');
-const traverse = require('@babel/traverse').default;
-const {evalStringConcat} = require('../shared/evalToString');
-const invertObject = require('./invertObject');
+const {execSync} = require('child_process');
 
-const babylonOptions = {
-  sourceType: 'module',
-  // As a parser, babylon has its own options and we can't directly
-  // import/require a babel preset. It should be kept **the same** as
-  // the `babel-plugin-syntax-*` ones specified in
-  // https://github.com/facebook/fbjs/blob/master/packages/babel-preset-fbjs/configure.js
-  plugins: [
-    'classProperties',
-    'flow',
-    'jsx',
-    'trailingFunctionCommas',
-    'objectRestSpread',
-  ],
-};
-
-module.exports = function(opts) {
-  if (!opts || !('errorMapFilePath' in opts)) {
-    throw new Error(
-      'Missing options. Ensure you pass an object with `errorMapFilePath`.'
-    );
+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;
+    }
   }
 
-  const errorMapFilePath = opts.errorMapFilePath;
-  let existingErrorMap;
+  console.log('Searching `build` directory for unminified errors...\n');
+
+  let out;
   try {
-    // Using `fs.readFileSync` instead of `require` here, because `require()`
-    // calls are cached, and the cache map is not properly invalidated after
-    // file changes.
-    existingErrorMap = JSON.parse(
-      fs.readFileSync(
-        path.join(__dirname, path.basename(errorMapFilePath)),
-        'utf8'
-      )
-    );
+    out = execSync(
+      "git --no-pager grep -n --untracked --no-exclude-standard '/*! <expected-error-format>' -- build"
+    ).toString();
   } catch (e) {
-    existingErrorMap = {};
-  }
-
-  const allErrorIDs = Object.keys(existingErrorMap);
-  let currentID;
-
-  if (allErrorIDs.length === 0) {
-    // Map is empty
-    currentID = 0;
-  } else {
-    currentID = Math.max.apply(null, allErrorIDs) + 1;
+    if (e.status === 1 && e.stdout.toString() === '') {
+      // No unminified errors found.
+      return;
+    }
+    throw e;
   }
 
-  // Here we invert the map object in memory for faster error code lookup
-  existingErrorMap = invertObject(existingErrorMap);
-
-  function transform(source) {
-    const ast = parser.parse(source, babylonOptions);
-
-    traverse(ast, {
-      CallExpression: {
-        exit(astPath) {
-          if (astPath.get('callee').isIdentifier({name: 'invariant'})) {
-            const node = astPath.node;
+  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);
 
-            // error messages can be concatenated (`+`) at runtime, so here's a
-            // trivial partial evaluator that interprets the literal value
-            const errorMsgLiteral = evalStringConcat(node.arguments[1]);
-            addToErrorMap(errorMsgLiteral);
-          }
-        },
-      },
-    });
-  }
-
-  function addToErrorMap(errorMsgLiteral) {
-    if (existingErrorMap.hasOwnProperty(errorMsgLiteral)) {
-      return;
+      // Add to json map
+      if (newJSON === null) {
+        newJSON = Object.assign({}, originalJSON);
+      }
+      console.log(`"${nextCode}": "${message}"`);
+      newJSON[nextCode] = message;
+      nextCode += 1;
     }
-    existingErrorMap[errorMsgLiteral] = '' + currentID++;
-  }
+  } while (true);
 
-  function flush(cb) {
+  if (newJSON) {
     fs.writeFileSync(
-      errorMapFilePath,
-      JSON.stringify(invertObject(existingErrorMap), null, 2) + '\n',
-      'utf-8'
+      path.resolve(__dirname, '../error-codes/codes.json'),
+      JSON.stringify(newJSON, null, 2)
     );
   }
+}
 
-  return function extractErrors(source) {
-    transform(source);
-    flush();
-  };
-};
+main().catch(error => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
index 2baf4baa1c1a..a429ed4008b6 100644
--- a/scripts/error-codes/transform-error-messages.js
+++ b/scripts/error-codes/transform-error-messages.js
@@ -7,10 +7,7 @@
 'use strict';
 
 const fs = require('fs');
-const {
-  evalStringConcat,
-  evalStringAndTemplateConcat,
-} = require('../shared/evalToString');
+const {evalStringAndTemplateConcat} = require('../shared/evalToString');
 const invertObject = require('./invertObject');
 const helperModuleImports = require('@babel/helper-module-imports');
 
@@ -23,11 +20,7 @@ const SEEN_SYMBOL = Symbol('transform-error-messages.seen');
 module.exports = function(babel) {
   const t = babel.types;
 
-  // TODO: Instead of outputting __DEV__ conditions, only apply this transform
-  // in production.
-  const DEV_EXPRESSION = t.identifier('__DEV__');
-
-  function CallOrNewExpression(path, file) {
+  function ErrorCallExpression(path, file) {
     // Turns this code:
     //
     // new Error(`A ${adj} message that contains ${noun}`);
@@ -38,11 +31,7 @@ module.exports = function(babel) {
     //
     // into this:
     //
-    // Error(
-    //   __DEV__
-    //     ? `A ${adj} message that contains ${noun}`
-    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
-    // );
+    // Error(formatProdErrorMessage(ERR_CODE, adj, noun));
     const node = path.node;
     if (node[SEEN_SYMBOL]) {
       return;
@@ -62,9 +51,44 @@ module.exports = function(babel) {
 
     let prodErrorId = errorMap[errorMsgLiteral];
     if (prodErrorId === undefined) {
-      // There is no error code for this message. We use a lint rule to
-      // enforce that messages can be minified, so assume this is
-      // intentional and exit gracefully.
+      // 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}`);
+      //   }
+
+      const statementParent = path.getStatementParent();
+      const leadingComments = statementParent.node.leadingComments;
+      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);
@@ -84,168 +108,25 @@ module.exports = function(babel) {
     ]);
 
     // Outputs:
-    // Error(
-    //   __DEV__
-    //     ? `A ${adj} message that contains ${noun}`
-    //     : formatProdErrorMessage(ERR_CODE, adj, noun)
-    // );
-    path.replaceWith(t.callExpression(t.identifier('Error'), [prodMessage]));
-    path.replaceWith(
-      t.callExpression(t.identifier('Error'), [
-        t.conditionalExpression(DEV_EXPRESSION, errorMsgNode, prodMessage),
-      ])
-    );
+    // Error(formatProdErrorMessage(ERR_CODE, adj, noun));
+    const newErrorCall = t.callExpression(t.identifier('Error'), [prodMessage]);
+    newErrorCall[SEEN_SYMBOL] = true;
+    path.replaceWith(newErrorCall);
   }
 
   return {
     visitor: {
       NewExpression(path, file) {
-        const noMinify = file.opts.noMinify;
-        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
-          CallOrNewExpression(path, file);
+        if (path.get('callee').isIdentifier({name: 'Error'})) {
+          ErrorCallExpression(path, file);
         }
       },
 
       CallExpression(path, file) {
-        const node = path.node;
-        const noMinify = file.opts.noMinify;
-
-        if (!noMinify && path.get('callee').isIdentifier({name: 'Error'})) {
-          CallOrNewExpression(path, file);
+        if (path.get('callee').isIdentifier({name: 'Error'})) {
+          ErrorCallExpression(path, file);
           return;
         }
-
-        if (path.get('callee').isIdentifier({name: 'invariant'})) {
-          // Turns this code:
-          //
-          // invariant(condition, 'A %s message that contains %s', adj, noun);
-          //
-          // into this:
-          //
-          // if (!condition) {
-          //   throw Error(
-          //     __DEV__
-          //       ? `A ${adj} message that contains ${noun}`
-          //       : formatProdErrorMessage(ERR_CODE, adj, noun)
-          //   );
-          // }
-          //
-          // where ERR_CODE is an error code: a unique identifier (a number
-          // string) that references a verbose error message. The mapping is
-          // stored in `scripts/error-codes/codes.json`.
-          const condition = node.arguments[0];
-          const errorMsgLiteral = evalStringConcat(node.arguments[1]);
-          const errorMsgExpressions = Array.from(node.arguments.slice(2));
-          const errorMsgQuasis = errorMsgLiteral
-            .split('%s')
-            .map(raw => t.templateElement({raw, cooked: String.raw({raw})}));
-
-          // Outputs:
-          //   `A ${adj} message that contains ${noun}`;
-          const devMessage = t.templateLiteral(
-            errorMsgQuasis,
-            errorMsgExpressions
-          );
-
-          const parentStatementPath = path.parentPath;
-          if (parentStatementPath.type !== 'ExpressionStatement') {
-            throw path.buildCodeFrameError(
-              'invariant() cannot be called from expression context. Move ' +
-                'the call to its own statement.'
-            );
-          }
-
-          if (noMinify) {
-            // Error minification is disabled for this build.
-            //
-            // Outputs:
-            //   if (!condition) {
-            //     throw Error(`A ${adj} message that contains ${noun}`);
-            //   }
-            parentStatementPath.replaceWith(
-              t.ifStatement(
-                t.unaryExpression('!', condition),
-                t.blockStatement([
-                  t.throwStatement(
-                    t.callExpression(t.identifier('Error'), [devMessage])
-                  ),
-                ])
-              )
-            );
-            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! */
-            //   if (!condition) {
-            //     throw Error(`A ${adj} message that contains ${noun}`);
-            //   }
-            parentStatementPath.replaceWith(
-              t.ifStatement(
-                t.unaryExpression('!', condition),
-                t.blockStatement([
-                  t.throwStatement(
-                    t.callExpression(t.identifier('Error'), [devMessage])
-                  ),
-                ])
-              )
-            );
-            parentStatementPath.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:
-          // if (!condition) {
-          //   throw Error(
-          //     __DEV__
-          //       ? `A ${adj} message that contains ${noun}`
-          //       : formatProdErrorMessage(ERR_CODE, adj, noun)
-          //   );
-          // }
-          parentStatementPath.replaceWith(
-            t.ifStatement(
-              t.unaryExpression('!', condition),
-              t.blockStatement([
-                t.blockStatement([
-                  t.throwStatement(
-                    t.callExpression(t.identifier('Error'), [
-                      t.conditionalExpression(
-                        DEV_EXPRESSION,
-                        devMessage,
-                        prodMessage
-                      ),
-                    ])
-                  ),
-                ]),
-              ])
-            )
-          );
-        }
       },
     },
   };
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
index 072071be07fb..d7a5a2cdab6d 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -13,9 +13,6 @@ const pathToBabel = path.join(
   '../..',
   'package.json'
 );
-const pathToBabelPluginDevWithCode = require.resolve(
-  '../error-codes/transform-error-messages'
-);
 const pathToBabelPluginReplaceConsoleCalls = require.resolve(
   '../babel/transform-replace-console-calls'
 );
@@ -36,8 +33,6 @@ const babelOptions = {
     // For Node environment only. For builds, Rollup takes care of ESM.
     require.resolve('@babel/plugin-transform-modules-commonjs'),
 
-    pathToBabelPluginDevWithCode,
-
     // Keep stacks detailed in tests.
     // Don't put this in .babelrc so that we don't embed filenames
     // into ReactART builds that include JSX.
@@ -105,7 +100,6 @@ module.exports = {
     __filename,
     pathToBabel,
     pathToBabelrc,
-    pathToBabelPluginDevWithCode,
     pathToTransformInfiniteLoops,
     pathToTransformTestGatePragma,
     pathToErrorCodes,
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 7e29c0e8c54d..48401c002b43 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -19,7 +19,6 @@ const Sync = require('./sync');
 const sizes = require('./plugins/sizes-plugin');
 const useForks = require('./plugins/use-forks-plugin');
 const stripUnusedImports = require('./plugins/strip-unused-imports');
-const extractErrorCodes = require('../error-codes/extract-errors');
 const Packaging = require('./packaging');
 const {asyncRimRaf} = require('./utils');
 const codeFrame = require('babel-code-frame');
@@ -94,10 +93,6 @@ const forcePrettyOutput = argv.pretty;
 const isWatchMode = argv.watch;
 const syncFBSourcePath = argv['sync-fbsource'];
 const syncWWWPath = argv['sync-www'];
-const shouldExtractErrors = argv['extract-errors'];
-const errorCodeOpts = {
-  errorMapFilePath: 'scripts/error-codes/codes.json',
-};
 
 const closureOptions = {
   compilation_level: 'SIMPLE',
@@ -176,26 +171,13 @@ function getBabelConfig(
   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'));
+  }
+
   switch (bundleType) {
-    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:
-      return Object.assign({}, options, {
-        plugins: options.plugins.concat([
-          [
-            require('../error-codes/transform-error-messages'),
-            // Controls whether to replace error messages with error codes
-            // in production. By default, error messages are replaced.
-            {noMinify: bundle.minifyWithProdErrorCodes === false},
-          ],
-        ]),
-      });
     case UMD_DEV:
     case UMD_PROD:
     case UMD_PROFILING:
@@ -206,8 +188,6 @@ function getBabelConfig(
         plugins: options.plugins.concat([
           // Use object-assign polyfill in open source
           path.resolve('./scripts/babel/transform-object-assign-require'),
-          // Minify invariant messages
-          require('../error-codes/transform-error-messages'),
         ]),
       });
     default:
@@ -339,7 +319,6 @@ function getPlugins(
   pureExternalModules,
   bundle
 ) {
-  const findAndRecordErrorCodes = extractErrorCodes(errorCodeOpts);
   const forks = Modules.getForks(bundleType, entry, moduleType, bundle);
   const isProduction = isProductionBundleType(bundleType);
   const isProfiling = isProfilingBundleType(bundleType);
@@ -360,13 +339,6 @@ function getPlugins(
     bundleType === RN_FB_PROFILING;
   const shouldStayReadable = isFBWWWBundle || isRNBundle || forcePrettyOutput;
   return [
-    // Extract error codes from invariant() messages into a file.
-    shouldExtractErrors && {
-      transform(source) {
-        findAndRecordErrorCodes(source);
-        return source;
-      },
-    },
     // Shim any modules that need forking in this environment.
     useForks(forks),
     // Ensure we don't try to bundle any fbjs modules.
@@ -762,7 +734,7 @@ async function buildEverything() {
     );
   }
 
-  if (!shouldExtractErrors && process.env.CIRCLE_NODE_TOTAL) {
+  if (process.env.CIRCLE_NODE_TOTAL) {
     // In CI, parallelize bundles across multiple tasks.
     const nodeTotal = parseInt(process.env.CIRCLE_NODE_TOTAL, 10);
     const nodeIndex = parseInt(process.env.CIRCLE_NODE_INDEX, 10);
@@ -787,14 +759,6 @@ async function buildEverything() {
   if (!forcePrettyOutput) {
     Stats.saveResults();
   }
-
-  if (shouldExtractErrors) {
-    console.warn(
-      '\nWarning: this build was created with --extract-errors enabled.\n' +
-        'this will result in extremely slow builds and should only be\n' +
-        'used when the error map needs to be rebuilt.\n'
-    );
-  }
 }
 
 buildEverything();
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index af7b30b7feb9..40ae43ae7cbc 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -141,7 +141,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fetch/index.browser',
     global: 'ReactFetch',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
@@ -163,7 +163,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-fs/index.browser.server',
     global: 'ReactFilesystem',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: [],
   },
@@ -185,7 +185,7 @@ const bundles = [
     moduleType: ISOMORPHIC,
     entry: 'react-pg/index.browser.server',
     global: 'ReactPostgres',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: [],
   },
@@ -349,7 +349,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-server-dom-webpack',
     global: 'ReactServerDOMReader',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],
   },
@@ -594,7 +594,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer',
     global: 'ReactNoopRenderer',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'scheduler/unstable_mock', 'expect'],
   },
@@ -605,7 +605,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/persistent',
     global: 'ReactNoopRendererPersistent',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },
@@ -616,7 +616,7 @@ const bundles = [
     moduleType: RENDERER,
     entry: 'react-noop-renderer/server',
     global: 'ReactNoopRendererServer',
-    minifyWithProdErrorCodes: true,
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react', 'scheduler', 'expect'],
   },

From 6bce0355c3e4bf23c16e82317094230908ee7560 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 31 Oct 2021 18:38:03 -0400
Subject: [PATCH 0988/1603] Upgrade useSyncExternalStore to alpha channel
 (#22662)

* Move useSyncExternalStore shim to a nested entrypoint

Also renames `useSyncExternalStoreExtra` to
`useSyncExternalStoreWithSelector`.

- 'use-sync-external-store/shim' -> A shim for `useSyncExternalStore`
  that works in React 16 and 17 (any release that supports hooks). The
  module will first check if the built-in React API exists, before
  falling back to the shim.
- 'use-sync-external-store/with-selector' -> An extended version of
  `useSyncExternalStore` that also supports `selector` and `isEqual`
  options. It does _not_ shim `use-sync-external-store`; it composes the
  built-in React API. **Use this if you only support 18+.**
- 'use-sync-external-store/shim/with-selector' -> Same API, but it
  composes `use-sync-external-store/shim` instead. **Use this for
  compatibility with 16 and 17.**
- 'use-sync-external-store' -> Re-exports React's built-in API. Not
  meant to be used. It will warn and direct users to either the shim or
  the built-in API.

* Upgrade useSyncExternalStore to alpha channel
---
 ReactVersions.js                              |  2 +-
 .../ReactHooksInspectionIntegration-test.js   |  3 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  | 26 ++++++---
 .../__tests__/useSyncExternalStore-test.js    |  3 +-
 packages/react/index.classic.fb.js            |  1 -
 packages/react/index.experimental.js          |  2 +-
 packages/react/index.js                       |  1 -
 packages/react/index.modern.fb.js             |  1 -
 packages/react/index.stable.js                |  1 +
 packages/use-sync-external-store/index.js     |  2 +-
 packages/use-sync-external-store/npm/extra.js |  7 ---
 .../npm/index.native.js                       |  7 ---
 .../use-sync-external-store/npm/shim/index.js |  7 +++
 .../npm/shim/index.native.js                  |  7 +++
 .../npm/shim/with-selector.js                 |  7 +++
 .../npm/with-selector.js                      |  7 +++
 packages/use-sync-external-store/package.json |  4 +-
 .../use-sync-external-store/shim/index.js     | 12 ++++
 .../{ => shim}/index.native.js                |  2 +-
 .../shim/with-selector/index.js               | 12 ++++
 .../useSyncExternalStoreNative-test.js        | 55 +++++++++----------
 .../useSyncExternalStoreShared-test.js        | 47 +++++++++-------
 .../useSyncExternalStoreShimServer-test.js    |  4 +-
 .../forks/isServerEnvironment.native.js}      |  4 +-
 ...seSyncExternalStore.forward-to-built-in.js | 16 ++++++
 .../useSyncExternalStore.forward-to-shim.js   | 16 ++++++
 .../src/isServerEnvironment.js                | 12 ++++
 .../src/useSyncExternalStore.js               | 28 ++++++----
 .../src/useSyncExternalStoreShim.js           | 18 ++++++
 ...t.js => useSyncExternalStoreShimClient.js} |  8 +--
 ...r.js => useSyncExternalStoreShimServer.js} |  4 ++
 ...js => useSyncExternalStoreWithSelector.js} |  8 +--
 .../use-sync-external-store/with-selector.js  | 12 ++++
 scripts/jest/TestFlags.js                     |  5 +-
 scripts/jest/config.build.js                  |  7 +++
 scripts/rollup/bundles.js                     | 44 +++++++++++----
 scripts/rollup/forks.js                       | 18 ++++++
 scripts/shared/pathsByLanguageVersion.js      |  2 +
 38 files changed, 298 insertions(+), 124 deletions(-)
 delete mode 100644 packages/use-sync-external-store/npm/extra.js
 delete mode 100644 packages/use-sync-external-store/npm/index.native.js
 create mode 100644 packages/use-sync-external-store/npm/shim/index.js
 create mode 100644 packages/use-sync-external-store/npm/shim/index.native.js
 create mode 100644 packages/use-sync-external-store/npm/shim/with-selector.js
 create mode 100644 packages/use-sync-external-store/npm/with-selector.js
 create mode 100644 packages/use-sync-external-store/shim/index.js
 rename packages/use-sync-external-store/{ => shim}/index.native.js (70%)
 create mode 100644 packages/use-sync-external-store/shim/with-selector/index.js
 rename packages/use-sync-external-store/{extra.js => src/forks/isServerEnvironment.native.js} (75%)
 create mode 100644 packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js
 create mode 100644 packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js
 create mode 100644 packages/use-sync-external-store/src/isServerEnvironment.js
 create mode 100644 packages/use-sync-external-store/src/useSyncExternalStoreShim.js
 rename packages/use-sync-external-store/src/{useSyncExternalStoreClient.js => useSyncExternalStoreShimClient.js} (95%)
 rename packages/use-sync-external-store/src/{useSyncExternalStoreServer.js => useSyncExternalStoreShimServer.js} (59%)
 rename packages/use-sync-external-store/src/{useSyncExternalStoreExtra.js => useSyncExternalStoreWithSelector.js} (95%)
 create mode 100644 packages/use-sync-external-store/with-selector.js

diff --git a/ReactVersions.js b/ReactVersions.js
index 2ce7680f0191..bdab35424e88 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -36,6 +36,7 @@ const stablePackages = {
   'react-refresh': '0.11.0',
   'react-test-renderer': ReactVersion,
   'use-subscription': '1.6.0',
+  'use-sync-external-store': '1.0.0',
   scheduler: '0.21.0',
 };
 
@@ -47,7 +48,6 @@ const experimentalPackages = [
   'react-fs',
   'react-pg',
   'react-server-dom-webpack',
-  'use-sync-external-store',
 ];
 
 module.exports = {
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 6937efd63157..087d74d62872 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -1055,9 +1055,8 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  // @gate experimental || www
   it('should support composite useSyncExternalStore hook', () => {
-    const useSyncExternalStore = React.unstable_useSyncExternalStore;
+    const useSyncExternalStore = React.useSyncExternalStore;
     function Foo() {
       const value = useSyncExternalStore(
         () => () => {},
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index a2ede1746d08..abbbdc157875 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -18,7 +18,7 @@ let ReactDOMFizzServer;
 let Suspense;
 let SuspenseList;
 let useSyncExternalStore;
-let useSyncExternalStoreExtra;
+let useSyncExternalStoreWithSelector;
 let PropTypes;
 let textCache;
 let window;
@@ -43,11 +43,23 @@ describe('ReactDOMFizzServer', () => {
     Stream = require('stream');
     Suspense = React.Suspense;
     SuspenseList = React.SuspenseList;
-    useSyncExternalStore = React.unstable_useSyncExternalStore;
-    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
-      .useSyncExternalStoreExtra;
+
     PropTypes = require('prop-types');
 
+    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();
 
     // Test Environment
@@ -1663,7 +1675,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot', async () => {
     const ref = React.createRef();
@@ -1734,7 +1745,6 @@ describe('ReactDOMFizzServer', () => {
 
   // The selector implementation uses the lazy ref initialization pattern
   // @gate !(enableUseRefAccessWarning && __DEV__)
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot (with selector and isEqual)', async () => {
     // Same as previous test, but with a selector that returns a complex object
@@ -1767,7 +1777,7 @@ describe('ReactDOMFizzServer', () => {
     }
 
     function App() {
-      const {env} = useSyncExternalStoreExtra(
+      const {env} = useSyncExternalStoreWithSelector(
         subscribe,
         getClientSnapshot,
         getServerSnapshot,
@@ -1815,7 +1825,6 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toEqual(serverRenderedDiv);
   });
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
@@ -1964,7 +1973,6 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
-  // @gate supportsNativeUseSyncExternalStore
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
diff --git a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
index d939a02bee89..623ea1275590 100644
--- a/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
+++ b/packages/react-reconciler/src/__tests__/useSyncExternalStore-test.js
@@ -36,7 +36,7 @@ describe('useSyncExternalStore', () => {
     useImperativeHandle = React.useImperativeHandle;
     forwardRef = React.forwardRef;
     useRef = React.useRef;
-    useSyncExternalStore = React.unstable_useSyncExternalStore;
+    useSyncExternalStore = React.useSyncExternalStore;
     startTransition = React.startTransition;
 
     act = require('jest-react').act;
@@ -70,7 +70,6 @@ describe('useSyncExternalStore', () => {
     };
   }
 
-  // @gate supportsNativeUseSyncExternalStore
   test(
     'detects interleaved mutations during a concurrent read before ' +
       'layout effects fire',
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 568a8ada613d..c5854f8f6d39 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -54,7 +54,6 @@ export {
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 7491bbb7e832..4b4fa89e0189 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -47,7 +47,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
-  useSyncExternalStore as unstable_useSyncExternalStore,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.js b/packages/react/index.js
index 59cc05f0254e..9a6a99ee5218 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -73,7 +73,6 @@ export {
   useMemo,
   useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index cd60ee426fa6..8d08a43b9094 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -53,7 +53,6 @@ export {
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
-  useSyncExternalStore as unstable_useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 4e4682b8fc29..3a0600d11a71 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -40,6 +40,7 @@ export {
   useLayoutEffect,
   useMemo,
   useMutableSource as unstable_useMutableSource,
+  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
diff --git a/packages/use-sync-external-store/index.js b/packages/use-sync-external-store/index.js
index ff57d66d841b..55548c112662 100644
--- a/packages/use-sync-external-store/index.js
+++ b/packages/use-sync-external-store/index.js
@@ -9,4 +9,4 @@
 
 'use strict';
 
-export * from './src/useSyncExternalStore';
+export {useSyncExternalStore} from './src/useSyncExternalStore';
diff --git a/packages/use-sync-external-store/npm/extra.js b/packages/use-sync-external-store/npm/extra.js
deleted file mode 100644
index 468dd518ac1f..000000000000
--- a/packages/use-sync-external-store/npm/extra.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/use-sync-external-store-extra.production.min.js');
-} else {
-  module.exports = require('./cjs/use-sync-external-store-extra.development.js');
-}
diff --git a/packages/use-sync-external-store/npm/index.native.js b/packages/use-sync-external-store/npm/index.native.js
deleted file mode 100644
index 22546b9c0ebb..000000000000
--- a/packages/use-sync-external-store/npm/index.native.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/use-sync-external-store.native.production.min.js');
-} else {
-  module.exports = require('./cjs/use-sync-external-store.native.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 000000000000..bde36f38efdb
--- /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.min.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 000000000000..0bd5c7e1c0f8
--- /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.min.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 000000000000..1175186c6428
--- /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.min.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 000000000000..9163b3e7e13f
--- /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.min.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
index b43b3a0ec67d..0d1d9b8d25f8 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -12,8 +12,10 @@
     "README.md",
     "build-info.json",
     "index.js",
-    "extra.js",
     "index.native.js",
+    "with-selector.js",
+    "with-selector.native.js",
+    "shim/",
     "cjs/"
   ],
   "license": "MIT",
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 000000000000..b8fa72b48e77
--- /dev/null
+++ b/packages/use-sync-external-store/shim/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStoreShim';
diff --git a/packages/use-sync-external-store/index.native.js b/packages/use-sync-external-store/shim/index.native.js
similarity index 70%
rename from packages/use-sync-external-store/index.native.js
rename to packages/use-sync-external-store/shim/index.native.js
index cac5c1c2bf71..b8fa72b48e77 100644
--- a/packages/use-sync-external-store/index.native.js
+++ b/packages/use-sync-external-store/shim/index.native.js
@@ -9,4 +9,4 @@
 
 'use strict';
 
-export * from './src/useSyncExternalStoreClient';
+export {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStoreShim';
diff --git a/packages/use-sync-external-store/shim/with-selector/index.js b/packages/use-sync-external-store/shim/with-selector/index.js
new file mode 100644
index 000000000000..e71d4dac6ac9
--- /dev/null
+++ b/packages/use-sync-external-store/shim/with-selector/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+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
index 0902e7554c45..caedd74f7447 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreNative-test.js
@@ -15,7 +15,7 @@ let React;
 let ReactNoop;
 let Scheduler;
 let useSyncExternalStore;
-let useSyncExternalStoreExtra;
+let useSyncExternalStoreWithSelector;
 let act;
 
 // This tests the userspace shim of `useSyncExternalStore` in a server-rendering
@@ -36,25 +36,40 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
         startTransition: _,
         // eslint-disable-next-line no-unused-vars
         useSyncExternalStore: __,
-        // eslint-disable-next-line no-unused-vars
-        unstable_useSyncExternalStore: ___,
         ...otherExports
       } = jest.requireActual('react');
       return otherExports;
     });
 
-    jest.mock('use-sync-external-store', () =>
-      jest.requireActual('use-sync-external-store/index.native'),
+    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('jest-react').act;
-    useSyncExternalStore = require('use-sync-external-store')
+
+    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;
-    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
-      .useSyncExternalStoreExtra;
+    useSyncExternalStoreWithSelector = require('use-sync-external-store/shim/with-selector')
+      .useSyncExternalStoreWithSelector;
   });
 
   function Text({text}) {
@@ -105,32 +120,12 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     expect(root).toMatchRenderedOutput('client');
   });
 
-  test('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 />);
-    });
-    expect(Scheduler).toHaveYielded(['client']);
-    expect(root).toMatchRenderedOutput('client');
-  });
-
   // @gate !(enableUseRefAccessWarning && __DEV__)
   test('Using isEqual to bailout', async () => {
     const store = createExternalStore({a: 0, b: 0});
 
     function A() {
-      const {a} = useSyncExternalStoreExtra(
+      const {a} = useSyncExternalStoreWithSelector(
         store.subscribe,
         store.getState,
         null,
@@ -140,7 +135,7 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
       return <Text text={'A' + a} />;
     }
     function B() {
-      const {b} = useSyncExternalStoreExtra(
+      const {b} = useSyncExternalStoreWithSelector(
         store.subscribe,
         store.getState,
         null,
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index ab8143f24034..5af9e9767ab0 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 let useSyncExternalStore;
-let useSyncExternalStoreExtra;
+let useSyncExternalStoreWithSelector;
 let React;
 let ReactDOM;
 let Scheduler;
@@ -25,11 +25,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   beforeEach(() => {
     jest.resetModules();
 
-    // Remove the built-in API from the React exports to force the package to
-    // use the shim.
-    if (!gate(flags => flags.supportsNativeUseSyncExternalStore)) {
-      // and the non-variant tests for the shim.
-      //
+    if (gate(flags => flags.enableUseSyncExternalStoreShim)) {
       // 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.
@@ -42,8 +38,6 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
           startTransition: _,
           // eslint-disable-next-line no-unused-vars
           useSyncExternalStore: __,
-          // eslint-disable-next-line no-unused-vars
-          unstable_useSyncExternalStore: ___,
           ...otherExports
         } = jest.requireActual('react');
         return otherExports;
@@ -64,10 +58,21 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     // in both concurrent and legacy mode, I'm adding batching here.
     act = cb => internalAct(() => ReactDOM.unstable_batchedUpdates(cb));
 
-    useSyncExternalStore = require('use-sync-external-store')
+    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;
-    useSyncExternalStoreExtra = require('use-sync-external-store/extra')
-      .useSyncExternalStoreExtra;
+    useSyncExternalStoreWithSelector = require('use-sync-external-store/shim/with-selector')
+      .useSyncExternalStoreWithSelector;
   });
 
   function Text({text}) {
@@ -78,7 +83,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
   function createRoot(container) {
     // This wrapper function exists so we can test both legacy roots and
     // concurrent roots.
-    if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
+    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
@@ -265,7 +270,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
   // 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 !supportsNativeUseSyncExternalStore
+  // @gate enableUseSyncExternalStoreShim
   test(
     "compares to current state before bailing out, even when there's a " +
       'mutation in between the sync and passive effects',
@@ -547,7 +552,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     await act(() => {
       store.set({value: 1, throwInGetSnapshot: true, throwInIsEqual: false});
     });
-    if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
+    if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
       expect(Scheduler).toHaveYielded([
         'Error in getSnapshot',
         // In a concurrent root, React renders a second time to attempt to
@@ -595,7 +600,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
       function App() {
         Scheduler.unstable_yieldValue('App');
-        const a = useSyncExternalStoreExtra(
+        const a = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -632,7 +637,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       const store = createExternalStore({a: 0, b: 0});
 
       function A() {
-        const {a} = useSyncExternalStoreExtra(
+        const {a} = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -642,7 +647,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         return <Text text={'A' + a} />;
       }
       function B() {
-        const {b} = useSyncExternalStoreExtra(
+        const {b} = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -711,7 +716,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       container.innerHTML = '<div>server</div>';
       const serverRenderedDiv = container.getElementsByTagName('div')[0];
 
-      if (gate(flags => flags.supportsNativeUseSyncExternalStore)) {
+      if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
         act(() => {
           ReactDOM.hydrateRoot(container, <App />);
         });
@@ -774,7 +779,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         Scheduler.unstable_yieldValue('Inline selector');
         return [...state.items, 'C'];
       };
-      const items = useSyncExternalStoreExtra(
+      const items = useSyncExternalStoreWithSelector(
         store.subscribe,
         store.getState,
         null,
@@ -842,7 +847,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       const selector = state => state.a.toUpperCase();
 
       function App() {
-        const a = useSyncExternalStoreExtra(
+        const a = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
@@ -877,7 +882,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       const isEqual = (left, right) => left.a.trim() === right.a.trim();
 
       function App() {
-        const a = useSyncExternalStoreExtra(
+        const a = useSyncExternalStoreWithSelector(
           store.subscribe,
           store.getState,
           null,
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
index b46e02872406..016240a4d3f2 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShimServer-test.js
@@ -35,8 +35,6 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
         startTransition: _,
         // eslint-disable-next-line no-unused-vars
         useSyncExternalStore: __,
-        // eslint-disable-next-line no-unused-vars
-        unstable_useSyncExternalStore: ___,
         ...otherExports
       } = jest.requireActual('react');
       return otherExports;
@@ -47,7 +45,7 @@ describe('useSyncExternalStore (userspace shim, server rendering)', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
 
-    useSyncExternalStore = require('use-sync-external-store')
+    useSyncExternalStore = require('use-sync-external-store/shim')
       .useSyncExternalStore;
   });
 
diff --git a/packages/use-sync-external-store/extra.js b/packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
similarity index 75%
rename from packages/use-sync-external-store/extra.js
rename to packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
index 90d48eb4641b..2bd359085541 100644
--- a/packages/use-sync-external-store/extra.js
+++ b/packages/use-sync-external-store/src/forks/isServerEnvironment.native.js
@@ -7,6 +7,4 @@
  * @flow
  */
 
-'use strict';
-
-export * from './src/useSyncExternalStoreExtra';
+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 000000000000..049f0c887e27
--- /dev/null
+++ b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+// 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 000000000000..54425c3ae0e2
--- /dev/null
+++ b/packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+// 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 000000000000..30adcb934731
--- /dev/null
+++ b/packages/use-sync-external-store/src/isServerEnvironment.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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
index c15228717426..f1bb95556d2b 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -7,16 +7,24 @@
  * @flow
  */
 
-import {canUseDOM} from 'shared/ExecutionEnvironment';
-import {useSyncExternalStore as client} from './useSyncExternalStoreClient';
-import {useSyncExternalStore as server} from './useSyncExternalStoreServer';
+'use strict';
+
+// Intentionally not using named imports because Rollup uses dynamic
+// dispatch for CommonJS interop named imports.
 import * as React from 'react';
 
-const {unstable_useSyncExternalStore: builtInAPI} = React;
+export const useSyncExternalStore = React.useSyncExternalStore;
 
-export const useSyncExternalStore =
-  builtInAPI !== undefined
-    ? ((builtInAPI: any): typeof client)
-    : canUseDOM
-    ? client
-    : server;
+if (__DEV__) {
+  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 000000000000..82d944de1dd1
--- /dev/null
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShim.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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 =
+  builtInAPI !== undefined ? ((builtInAPI: any): typeof shim) : shim;
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
similarity index 95%
rename from packages/use-sync-external-store/src/useSyncExternalStoreClient.js
rename to packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
index dc42169c399d..8578b3d3fd1c 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreClient.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
@@ -30,10 +30,10 @@ let didWarnUncachedGetSnapshot = false;
 export function useSyncExternalStore<T>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => T,
-  // Note: The client 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`.
+  // 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__) {
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
similarity index 59%
rename from packages/use-sync-external-store/src/useSyncExternalStoreServer.js
rename to packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
index 52903dd4aca8..4f2432718c36 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreServer.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimServer.js
@@ -12,5 +12,9 @@ export function useSyncExternalStore<T>(
   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/useSyncExternalStoreExtra.js b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
similarity index 95%
rename from packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
rename to packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
index aa4957b53475..c7012e615ecd 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreExtra.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js
@@ -9,14 +9,14 @@
 
 import * as React from 'react';
 import is from 'shared/objectIs';
-import {useSyncExternalStore} from 'use-sync-external-store';
+import {useSyncExternalStore} from 'use-sync-external-store/src/useSyncExternalStore';
 
-// Intentionally not using named imports because Rollup uses dynamic
-// dispatch for CommonJS interop named imports.
+// 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 useSyncExternalStoreExtra<Snapshot, Selection>(
+export function useSyncExternalStoreWithSelector<Snapshot, Selection>(
   subscribe: (() => void) => () => void,
   getSnapshot: () => Snapshot,
   getServerSnapshot: void | null | (() => Snapshot),
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 000000000000..e71d4dac6ac9
--- /dev/null
+++ b/packages/use-sync-external-store/with-selector.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+export {useSyncExternalStoreWithSelector} from 'use-sync-external-store/src/useSyncExternalStoreWithSelector';
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index c1bd03e00b1a..af83baf0f3ec 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -84,9 +84,8 @@ function getTestFlags() {
       source: !process.env.IS_BUILD,
       www,
 
-      // This isn't a flag, just a useful alias for tests. Remove once
-      // useSyncExternalStore lands in the `next` channel.
-      supportsNativeUseSyncExternalStore: __EXPERIMENTAL__ || www,
+      // This isn't a flag, just a useful alias for tests.
+      enableUseSyncExternalStoreShim: !__VARIANT__,
 
       // If there's a naming conflict between scheduler and React feature flags, the
       // React ones take precedence.
diff --git a/scripts/jest/config.build.js b/scripts/jest/config.build.js
index 69cc7d18c536..5b04ab05df7c 100644
--- a/scripts/jest/config.build.js
+++ b/scripts/jest/config.build.js
@@ -45,6 +45,13 @@ packages.forEach(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,
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 40ae43ae7cbc..8b12e8550e36 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -789,7 +789,7 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* Shim for useSyncExternalStore *******/
+  /******* useSyncExternalStore *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
@@ -800,26 +800,48 @@ const bundles = [
     externals: ['react'],
   },
 
-  /******* Shim for useSyncExternalStore (+ extra user-space features) *******/
+  /******* useSyncExternalStore (shim) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'use-sync-external-store/extra',
-    global: 'useSyncExternalStoreExtra',
-    minifyWithProdErrorCodes: true,
+    entry: 'use-sync-external-store/shim',
+    global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: true,
-    externals: ['react', 'use-sync-external-store'],
+    externals: ['react'],
   },
 
-  /******* Shim for useSyncExternalStore ReactNative *******/
+  /******* useSyncExternalStore (shim, native) *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'use-sync-external-store/index.native',
-    global: 'useSyncExternalStoreNative',
-    minifyWithProdErrorCodes: true,
+    entry: 'use-sync-external-store/shim/index.native',
+    global: 'useSyncExternalStore',
+    minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: true,
-    externals: ['react', 'ReactNativeInternalFeatureFlags'],
+    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) *******/
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 84211da5c512..b2234fa42a01 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -481,6 +481,24 @@ const forks = Object.freeze({
         return null;
     }
   },
+
+  'use-sync-external-store/src/useSyncExternalStore': (bundleType, entry) => {
+    if (entry.startsWith('use-sync-external-store/shim')) {
+      return 'use-sync-external-store/src/forks/useSyncExternalStore.forward-to-shim';
+    }
+    if (entry !== 'use-sync-external-store') {
+      // Internal modules that aren't shims should use the native API from the
+      // react package.
+      return 'use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in';
+    }
+    return null;
+  },
+
+  'use-sync-external-store/src/isServerEnvironment': (bundleType, entry) => {
+    if (entry.endsWith('.native')) {
+      return 'use-sync-external-store/src/forks/isServerEnvironment.native';
+    }
+  },
 });
 
 module.exports = forks;
diff --git a/scripts/shared/pathsByLanguageVersion.js b/scripts/shared/pathsByLanguageVersion.js
index af6963f78949..8c60a9c074a5 100644
--- a/scripts/shared/pathsByLanguageVersion.js
+++ b/scripts/shared/pathsByLanguageVersion.js
@@ -11,6 +11,8 @@ 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',

From 6c7ef3fce5547da5db3d400ccf95a5023f8891f4 Mon Sep 17 00:00:00 2001
From: Juan <jstejada@fb.com>
Date: Sun, 31 Oct 2021 19:19:02 -0400
Subject: [PATCH 0989/1603] React DevTools 4.20.2 -> 4.21.0 (#22661)

---
 packages/react-devtools-core/package.json       |  2 +-
 .../chrome/manifest.json                        |  4 ++--
 .../edge/manifest.json                          |  4 ++--
 .../firefox/manifest.json                       |  2 +-
 packages/react-devtools-inline/package.json     |  2 +-
 .../package.json                                |  2 +-
 packages/react-devtools/CHANGELOG.md            | 17 +++++++++++++++++
 packages/react-devtools/package.json            |  4 ++--
 8 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index d57fc10ff97e..9017ff630310 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index ecafb54ca6d3..780793b6d1e0 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.20.2",
-  "version_name": "4.20.2",
+  "version": "4.21.0",
+  "version_name": "4.21.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 6b813661e48d..fa9b34cd2af6 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.20.2",
-  "version_name": "4.20.2",
+  "version": "4.21.0",
+  "version_name": "4.21.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 16f4e7821e47..2bd83fd65679 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 7e013af63677..b814eacd4d19 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-scheduling-profiler/package.json
index 84fdf9d470fa..a74b66fa1d55 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-scheduling-profiler/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-scheduling-profiler",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 8f916003d79f..95a1a65721a7 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 00240aa38200..ca66824859ca 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.20.2",
+  "version": "4.21.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -27,7 +27,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.20.2",
+    "react-devtools-core": "4.21.0",
     "update-notifier": "^2.1.0"
   }
 }

From 9db8713f9d08c1956939e33cc2da25c867748263 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 31 Oct 2021 21:01:39 -0400
Subject: [PATCH 0990/1603] Pin CI to Node 14 (#22665)

CI starting running Node 16, which breaks some of our tests because
the error message text for undefined property access has changed.

We should pin to Node 14 until we are able to update the messages.
---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8c847fc05f39..843e2f5fba4a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,7 +2,7 @@ version: 2.1
 
 aliases:
   - &docker
-    - image: circleci/openjdk:8-jdk-node-browsers
+    - image: cimg/openjdk:17.0.0-node
 
   - &environment
     TZ: /usr/share/zoneinfo/America/Los_Angeles

From a0d991fe6587ad1cd1a97230f62f82c7cb6b9a40 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 00:39:51 -0400
Subject: [PATCH 0991/1603] Re-land #22292 (remove uMS from open source build)
 (#22664)

I had to revert #22292 because there are some internal callers of
useMutableSource that we haven't migrated yet. This removes
useMutableSource from the open source build but keeps it in the
internal one.
---
 .../ReactHooksInspectionIntegration-test.js   |  1 +
 .../src/ReactFiberHooks.new.js                | 13 ++++++++
 .../src/ReactFiberHooks.old.js                | 13 ++++++++
 .../useMutableSource-test.internal.js         | 31 +++++++++++++++++++
 .../useMutableSourceHydration-test.js         |  5 +++
 packages/react/index.experimental.js          |  1 -
 packages/react/index.stable.js                |  1 -
 packages/shared/ReactFeatureFlags.js          |  3 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  3 ++
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  3 ++
 .../shared/forks/ReactFeatureFlags.www.js     |  3 ++
 16 files changed, 80 insertions(+), 2 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 087d74d62872..3a6ac01f9816 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -1018,6 +1018,7 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
+  // @gate enableUseMutableSource
   it('should support composite useMutableSource hook', () => {
     const createMutableSource =
       React.createMutableSource || React.unstable_createMutableSource;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index c3b76549a22a..732f7d71a7e7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -31,6 +31,7 @@ import {
   enableStrictEffects,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -1052,6 +1053,10 @@ function useMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
 
   if (root === null) {
@@ -1213,6 +1218,10 @@ function mountMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = mountWorkInProgressHook();
   hook.memoizedState = ({
     refs: {
@@ -1230,6 +1239,10 @@ function updateMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = updateWorkInProgressHook();
   return useMutableSource(hook, source, getSnapshot, subscribe);
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 8bc1510deb45..b78f24e8b47f 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -31,6 +31,7 @@ import {
   enableStrictEffects,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -1052,6 +1053,10 @@ function useMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const root = ((getWorkInProgressRoot(): any): FiberRoot);
 
   if (root === null) {
@@ -1213,6 +1218,10 @@ function mountMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = mountWorkInProgressHook();
   hook.memoizedState = ({
     refs: {
@@ -1230,6 +1239,10 @@ function updateMutableSource<Source, Snapshot>(
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 ): Snapshot {
+  if (!enableUseMutableSource) {
+    return (undefined: any);
+  }
+
   const hook = updateWorkInProgressHook();
   return useMutableSource(hook, source, getSnapshot, subscribe);
 }
diff --git a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
index a6d99f980208..11cabd6f3175 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSource-test.internal.js
@@ -141,6 +141,7 @@ describe('useMutableSource', () => {
 
   beforeEach(loadModules);
 
+  // @gate enableUseMutableSource
   it('should subscribe to a source and schedule updates when it changes', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -208,6 +209,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should restart work if a new source is mutated during render', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -263,6 +265,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should schedule an update if a new source is mutated between render and commit (subscription)', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -302,6 +305,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should unsubscribe and resubscribe if a new source is used', () => {
     const sourceA = createSource('a-one');
     const mutableSourceA = createMutableSource(
@@ -358,6 +362,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should unsubscribe and resubscribe if a new subscribe function is provided', () => {
     const source = createSource('a-one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -422,6 +427,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should re-use previously read snapshot value when reading is unsafe', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -484,6 +490,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should read from source on newly mounted subtree if no pending updates are scheduled for source', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -523,6 +530,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should throw and restart render if source and snapshot are unavailable during an update', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -586,6 +594,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should throw and restart render if source and snapshot are unavailable during a sync update', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -649,6 +658,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should only update components whose subscriptions fire', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -687,6 +697,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should detect tearing in part of the store not yet subscribed to', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -779,6 +790,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('does not schedule an update for subscriptions that fire with an unchanged snapshot', () => {
     const MockComponent = jest.fn(Component);
 
@@ -805,6 +817,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should throw and restart if getSnapshot changes between scheduled update and re-render', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -845,6 +858,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should recover from a mutation during yield when other work is scheduled', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -899,6 +913,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not throw if the new getSnapshot returns the same snapshot value', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -953,6 +968,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not throw if getSnapshot changes but the source can be safely read from anyway', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -992,6 +1008,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should still schedule an update if an eager selector throws after a mutation', () => {
     const source = createSource({
       friends: [
@@ -1058,6 +1075,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not warn about updates that fire between unmount and passive unsubscribe', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1094,6 +1112,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should support inline selectors and updates that are processed after selector change', async () => {
     const source = createSource({
       a: 'initial',
@@ -1138,6 +1157,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('Another update');
   });
 
+  // @gate enableUseMutableSource
   it('should clear the update queue when getSnapshot changes with pending lower priority updates', async () => {
     const source = createSource({
       a: 'initial',
@@ -1194,6 +1214,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('B: Update');
   });
 
+  // @gate enableUseMutableSource
   it('should clear the update queue when source changes with pending lower priority updates', async () => {
     const sourceA = createSource('initial');
     const sourceB = createSource('initial');
@@ -1238,6 +1259,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('B: Update');
   });
 
+  // @gate enableUseMutableSource
   it('should always treat reading as potentially unsafe when getSnapshot changes between renders', async () => {
     const source = createSource({
       a: 'foo',
@@ -1327,6 +1349,7 @@ describe('useMutableSource', () => {
     expect(Scheduler).toHaveYielded(['x: bar, y: bar']);
   });
 
+  // @gate enableUseMutableSource
   it('getSnapshot changes and then source is mutated in between paint and passive effect phase', async () => {
     const source = createSource({
       a: 'foo',
@@ -1385,6 +1408,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('baz');
   });
 
+  // @gate enableUseMutableSource
   it('getSnapshot changes and then source is mutated in between paint and passive effect phase, case 2', async () => {
     const source = createSource({
       a: 'a0',
@@ -1455,6 +1479,7 @@ describe('useMutableSource', () => {
     expect(root.getChildrenAsJSX()).toEqual('first: a1, second: a1');
   });
 
+  // @gate enableUseMutableSource
   it(
     'if source is mutated after initial read but before subscription is set ' +
       'up, should still entangle all pending mutations even if snapshot of ' +
@@ -1559,6 +1584,7 @@ describe('useMutableSource', () => {
     },
   );
 
+  // @gate enableUseMutableSource
   it('warns about functions being used as snapshot values', async () => {
     const source = createSource(() => 'a');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1586,6 +1612,7 @@ describe('useMutableSource', () => {
     expect(root).toMatchRenderedOutput('a');
   });
 
+  // @gate enableUseMutableSource
   it('getSnapshot changes and then source is mutated during interleaved event', async () => {
     const {useEffect} = React;
 
@@ -1710,6 +1737,7 @@ describe('useMutableSource', () => {
     });
   });
 
+  // @gate enableUseMutableSource
   it('should not tear with newly mounted component when updates were scheduled at a lower priority', async () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -1789,6 +1817,7 @@ describe('useMutableSource', () => {
 
   if (__DEV__) {
     describe('dev warnings', () => {
+      // @gate enableUseMutableSource
       it('should warn if the subscribe function does not return an unsubscribe function', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
@@ -1814,6 +1843,7 @@ describe('useMutableSource', () => {
         );
       });
 
+      // @gate enableUseMutableSource
       it('should error if multiple renderers of the same type use a mutable source at the same time', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
@@ -1894,6 +1924,7 @@ describe('useMutableSource', () => {
         });
       });
 
+      // @gate enableUseMutableSource
       it('should error if multiple renderers of the same type use a mutable source at the same time with mutation between', () => {
         const source = createSource('one');
         const mutableSource = createMutableSource(
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 7f46d1cb0055..61ebbe45e90c 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -144,6 +144,7 @@ describe('useMutableSourceHydration', () => {
     return <div>{`${label}:${snapshot}`}</div>;
   }
 
+  // @gate enableUseMutableSource
   it('should render and hydrate', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -180,6 +181,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(1);
   });
 
+  // @gate enableUseMutableSource
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -224,6 +226,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(1);
   });
 
+  // @gate enableUseMutableSource
   it('should detect a tear between hydrating components', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -282,6 +285,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(2);
   });
 
+  // @gate enableUseMutableSource
   it('should detect a tear between hydrating components reading from different parts of a source', () => {
     const source = createComplexSource('a:one', 'b:one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -371,6 +375,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate !enableSyncDefaultUpdates
+  // @gate enableUseMutableSource
   it('should detect a tear during a higher priority interruption', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 4b4fa89e0189..24fc9782595d 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -46,7 +46,6 @@ export {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 3a0600d11a71..867980fa5389 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -39,7 +39,6 @@ export {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useSyncExternalStore,
   useReducer,
   useRef,
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index f5d34e2ff653..112c2d10f2cb 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -185,3 +185,6 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
+
+// Only enabled in www builds
+export const enableUseMutableSource = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 15a8c29f7179..b61bbcf15747 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -74,6 +74,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 3c11070d6ecb..7e24f2a0a271 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -66,6 +66,7 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 4b0457c21958..bce24128a791 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -66,6 +66,7 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 2c54c1fb77c2..02f063e58a82 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -65,6 +65,7 @@ export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 043ac7da254b..7227c254dccb 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -67,6 +67,9 @@ export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
+// Some www surfaces are still using this. Remove once they have been migrated.
+export const enableUseMutableSource = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 76af047ab6d4..264127fc197e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -66,6 +66,7 @@ export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableUseMutableSource = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 9eefdc2cca77..87d7247d6eeb 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -67,6 +67,9 @@ export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
+// Some www surfaces are still using this. Remove once they have been migrated.
+export const enableUseMutableSource = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 0f1ce6eb1f9f..e280e1ff9a6d 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -102,6 +102,9 @@ export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
+// Some www surfaces are still using this. Remove once they have been migrated.
+export const enableUseMutableSource = true;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From ebf9ae8579230e7b1ed0b1d243e1cf802f56938b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 16:30:44 -0400
Subject: [PATCH 0992/1603] useId (#22644)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add useId to dispatcher

* Initial useId implementation

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 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 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.

* Incremental hydration

Stores the tree context on the dehydrated Suspense boundary's state
object so it resume where it left off.

* Add useId to react-debug-tools

* Add selective hydration test

Demonstrates that selective hydration works and ids are preserved even
after subsequent client updates.
---
 .../react-debug-tools/src/ReactDebugHooks.js  |  12 +
 .../ReactHooksInspectionIntegration-test.js   |  29 +-
 .../src/__tests__/ReactDOMUseId-test.js       | 515 ++++++++++++++++++
 .../src/server/ReactPartialRendererHooks.js   |   5 +
 .../src/ReactChildFiber.new.js                |  32 +-
 .../src/ReactChildFiber.old.js                |  32 +-
 .../src/ReactFiberBeginWork.new.js            |  24 +
 .../src/ReactFiberBeginWork.old.js            |  24 +
 .../src/ReactFiberCompleteWork.new.js         |   7 +-
 .../src/ReactFiberCompleteWork.old.js         |   7 +-
 .../react-reconciler/src/ReactFiberFlags.js   |  55 +-
 .../src/ReactFiberHooks.new.js                |  99 ++++
 .../src/ReactFiberHooks.old.js                |  99 ++++
 .../src/ReactFiberHydrationContext.new.js     |  10 +
 .../src/ReactFiberHydrationContext.old.js     |  10 +
 .../src/ReactFiberLane.new.js                 |  15 +-
 .../src/ReactFiberLane.old.js                 |  15 +-
 .../src/ReactFiberSuspenseComponent.new.js    |   3 +
 .../src/ReactFiberSuspenseComponent.old.js    |   3 +
 .../src/ReactFiberTreeContext.new.js          | 273 ++++++++++
 .../src/ReactFiberTreeContext.old.js          | 273 ++++++++++
 .../src/ReactFiberUnwindWork.new.js           |  11 +
 .../src/ReactFiberUnwindWork.old.js           |  11 +
 .../src/ReactInternalTypes.js                 |   2 +
 packages/react-reconciler/src/clz32.js        |  25 +
 packages/react-server/src/ReactFizzHooks.js   |  39 +-
 packages/react-server/src/ReactFizzServer.js  |  83 ++-
 .../react-server/src/ReactFizzTreeContext.js  | 168 ++++++
 .../react-server/src/ReactFlightServer.js     |   1 +
 .../src/ReactSuspenseTestUtils.js             |   1 +
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/index.stable.js                |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   5 +
 .../unstable-shared-subset.experimental.js    |   1 +
 38 files changed, 1819 insertions(+), 77 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMUseId-test.js
 create mode 100644 packages/react-reconciler/src/ReactFiberTreeContext.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberTreeContext.old.js
 create mode 100644 packages/react-reconciler/src/clz32.js
 create mode 100644 packages/react-server/src/ReactFizzTreeContext.js

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 957838ed58a9..eed8c46df7d6 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -341,6 +341,17 @@ function useOpaqueIdentifier(): OpaqueIDType | void {
   return value;
 }
 
+function useId(): string {
+  const hook = nextHook();
+  const id = hook !== null ? hook.memoizedState : '';
+  hookLog.push({
+    primitive: 'Id',
+    stackError: new Error(),
+    value: id,
+  });
+  return id;
+}
+
 const Dispatcher: DispatcherType = {
   getCacheForType,
   readContext,
@@ -361,6 +372,7 @@ const Dispatcher: DispatcherType = {
   useSyncExternalStore,
   useDeferredValue,
   useOpaqueIdentifier,
+  useId,
 };
 
 // Inspect
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 3a6ac01f9816..d17a01a25827 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -628,7 +628,7 @@ describe('ReactHooksInspectionIntegration', () => {
   it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
     function Foo(props) {
       const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState(() => 'hello', []);
+      const [state] = React.useState('hello');
       return <div id={id}>{state}</div>;
     }
 
@@ -656,6 +656,33 @@ describe('ReactHooksInspectionIntegration', () => {
     });
   });
 
+  it('should support useId hook', () => {
+    function Foo(props) {
+      const id = React.unstable_useId();
+      const [state] = React.useState('hello');
+      return <div id={id}>{state}</div>;
+    }
+
+    const renderer = ReactTestRenderer.create(<Foo />);
+    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(tree[1]).toEqual({
+      id: 1,
+      isStateEditable: true,
+      name: 'State',
+      value: 'hello',
+      subHooks: [],
+    });
+  });
+
   describe('useDebugValue', () => {
     it('should support inspectable values for multiple custom hooks', () => {
       function useLabeledValue(label) {
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 000000000000..b61e79fa670d
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -0,0 +1,515 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+let JSDOM;
+let React;
+let ReactDOM;
+let Scheduler;
+let clientAct;
+let ReactDOMFizzServer;
+let Stream;
+let Suspense;
+let useId;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+
+describe('useId', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    clientAct = require('jest-react').act;
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+    Suspense = React.Suspense;
+    useId = React.unstable_useId;
+
+    // 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 [serverClientPrefix, base32, hookIndex] = id.split(':');
+    if (serverClientPrefix === '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>;
+  }
+
+  test('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 () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          <div>
+            <div
+              id="101"
+            />
+            <div
+              id="1001"
+            />
+          </div>
+          <div
+            id="10"
+          />
+        </div>
+      </div>
+    `);
+  });
+
+  test('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 () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="0"
+        >
+          <div>
+            <div>
+              <div>
+                <div
+                  id="1"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+  });
+
+  test('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 () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="10"
+        />
+        <div
+          id="100"
+        />
+      </div>
+    `);
+  });
+
+  test('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: R:clalalalalalalala...
+    //
+    // 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 () => {
+      ReactDOM.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: R:clalalalalalalala...
+      expect(divs[i].id).toMatch(/^R:.(((al)*a?)((la)*l?))*$/);
+    }
+  });
+
+  test('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 () => {
+      ReactDOM.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:0:1, R:0:2
+        <!-- -->
+      </div>
+    `);
+  });
+
+  test('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 () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div>
+          <!--$-->
+          <div
+            id="101"
+          />
+          <div
+            id="1001"
+          />
+          <!--/$-->
+          <div
+            id="10"
+          />
+        </div>
+      </div>
+    `);
+  });
+
+  test('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 = ReactDOM.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushUntilNextPaint([]);
+      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);
+  });
+
+  test('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 = ReactDOM.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushUntilNextPaint([]);
+      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);
+  });
+});
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 168fd78f6103..26f2dd00ee0c 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -519,6 +519,10 @@ function useOpaqueIdentifier(): OpaqueIDType {
   );
 }
 
+function useId(): OpaqueIDType {
+  throw new Error('Not implemented.');
+}
+
 function useCacheRefresh(): <T>(?() => T, ?T) => void {
   throw new Error('Not implemented.');
 }
@@ -549,6 +553,7 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
+  useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
   useSyncExternalStore,
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 9071edc24f7a..658b1f0e7b79 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -13,7 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {Placement, ChildDeletion} from './ReactFiberFlags';
+import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -40,6 +40,8 @@ import {
 import {emptyRefsObject} from './ReactFiberClassComponent.new';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.new';
 import {StrictLegacyMode} from './ReactTypeOfMode';
+import {getIsHydrating} from './ReactFiberHydrationContext.new';
+import {pushTreeFork} from './ReactFiberTreeContext.new';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
@@ -334,7 +336,9 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): number {
     newFiber.index = newIndex;
     if (!shouldTrackSideEffects) {
-      // Noop.
+      // 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;
@@ -823,6 +827,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     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;
     }
 
@@ -843,6 +851,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -886,6 +898,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
@@ -1013,6 +1029,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     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;
     }
 
@@ -1033,6 +1053,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -1076,6 +1100,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 0128ca8f36f3..0ef3b301e95a 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -13,7 +13,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {Placement, ChildDeletion} from './ReactFiberFlags';
+import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -40,6 +40,8 @@ import {
 import {emptyRefsObject} from './ReactFiberClassComponent.old';
 import {isCompatibleFamilyForHotReloading} from './ReactFiberHotReloading.old';
 import {StrictLegacyMode} from './ReactTypeOfMode';
+import {getIsHydrating} from './ReactFiberHydrationContext.old';
+import {pushTreeFork} from './ReactFiberTreeContext.old';
 
 let didWarnAboutMaps;
 let didWarnAboutGenerators;
@@ -334,7 +336,9 @@ function ChildReconciler(shouldTrackSideEffects) {
   ): number {
     newFiber.index = newIndex;
     if (!shouldTrackSideEffects) {
-      // Noop.
+      // 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;
@@ -823,6 +827,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     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;
     }
 
@@ -843,6 +851,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -886,6 +898,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
@@ -1013,6 +1029,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     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;
     }
 
@@ -1033,6 +1053,10 @@ function ChildReconciler(shouldTrackSideEffects) {
         }
         previousNewFiber = newFiber;
       }
+      if (getIsHydrating()) {
+        const numberOfForks = newIdx;
+        pushTreeFork(returnFiber, numberOfForks);
+      }
       return resultingFirstChild;
     }
 
@@ -1076,6 +1100,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       existingChildren.forEach(child => deleteChild(returnFiber, child));
     }
 
+    if (getIsHydrating()) {
+      const numberOfForks = newIdx;
+      pushTreeFork(returnFiber, numberOfForks);
+    }
     return resultingFirstChild;
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4fe648bc3e76..653ee9e1b4ea 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -186,6 +186,7 @@ import {
   invalidateContextProvider,
 } from './ReactFiberContext.new';
 import {
+  getIsHydrating,
   enterHydrationState,
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
@@ -235,6 +236,11 @@ import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
+import {
+  getForksAtLevel,
+  isForkedChild,
+  pushTreeId,
+} from './ReactFiberTreeContext.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -1757,6 +1763,7 @@ function mountIndeterminateComponent(
         }
       }
     }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
@@ -1845,6 +1852,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
 
 const SUSPENDED_MARKER: SuspenseState = {
   dehydrated: null,
+  treeContext: null,
   retryLane: NoLane,
 };
 
@@ -2693,6 +2701,7 @@ function updateDehydratedSuspenseComponent(
     reenterHydrationStateFromDehydratedSuspenseInstance(
       workInProgress,
       suspenseInstance,
+      suspenseState.treeContext,
     );
     const nextProps = workInProgress.pendingProps;
     const primaryChildren = nextProps.children;
@@ -3675,6 +3684,21 @@ function beginWork(
     }
   } 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.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index f116897a8661..9833ef481af7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -186,6 +186,7 @@ import {
   invalidateContextProvider,
 } from './ReactFiberContext.old';
 import {
+  getIsHydrating,
   enterHydrationState,
   reenterHydrationStateFromDehydratedSuspenseInstance,
   resetHydrationState,
@@ -235,6 +236,11 @@ import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
+import {
+  getForksAtLevel,
+  isForkedChild,
+  pushTreeId,
+} from './ReactFiberTreeContext.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -1757,6 +1763,7 @@ function mountIndeterminateComponent(
         }
       }
     }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
@@ -1845,6 +1852,7 @@ function validateFunctionComponentInDev(workInProgress: Fiber, Component: any) {
 
 const SUSPENDED_MARKER: SuspenseState = {
   dehydrated: null,
+  treeContext: null,
   retryLane: NoLane,
 };
 
@@ -2693,6 +2701,7 @@ function updateDehydratedSuspenseComponent(
     reenterHydrationStateFromDehydratedSuspenseInstance(
       workInProgress,
       suspenseInstance,
+      suspenseState.treeContext,
     );
     const nextProps = workInProgress.pendingProps;
     const primaryChildren = nextProps.children;
@@ -3675,6 +3684,21 @@ function beginWork(
     }
   } 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.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 20a7fc52db13..feb38f00461a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -155,6 +155,7 @@ import {
   popRootCachePool,
   popCachePool,
 } from './ReactFiberCacheComponent.new';
+import {popTreeContext} from './ReactFiberTreeContext.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -822,7 +823,11 @@ function completeWork(
   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 IndeterminateComponent:
     case LazyComponent:
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 305359aef206..ea4d71e8ba37 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -155,6 +155,7 @@ import {
   popRootCachePool,
   popCachePool,
 } from './ReactFiberCacheComponent.old';
+import {popTreeContext} from './ReactFiberTreeContext.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -822,7 +823,11 @@ function completeWork(
   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 IndeterminateComponent:
     case LazyComponent:
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index a82278222bf0..805c4bed918e 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,54 +12,55 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b0000000000000000000000000;
-export const PerformedWork = /*                */ 0b0000000000000000000000001;
+export const NoFlags = /*                      */ 0b00000000000000000000000000;
+export const PerformedWork = /*                */ 0b00000000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b0000000000000000000000010;
-export const Update = /*                       */ 0b0000000000000000000000100;
+export const Placement = /*                    */ 0b00000000000000000000000010;
+export const Update = /*                       */ 0b00000000000000000000000100;
 export const PlacementAndUpdate = /*           */ Placement | Update;
-export const Deletion = /*                     */ 0b0000000000000000000001000;
-export const ChildDeletion = /*                */ 0b0000000000000000000010000;
-export const ContentReset = /*                 */ 0b0000000000000000000100000;
-export const Callback = /*                     */ 0b0000000000000000001000000;
-export const DidCapture = /*                   */ 0b0000000000000000010000000;
-export const ForceClientRender = /*            */ 0b0000000000000000100000000;
-export const Ref = /*                          */ 0b0000000000000001000000000;
-export const Snapshot = /*                     */ 0b0000000000000010000000000;
-export const Passive = /*                      */ 0b0000000000000100000000000;
-export const Hydrating = /*                    */ 0b0000000000001000000000000;
+export const Deletion = /*                     */ 0b00000000000000000000001000;
+export const ChildDeletion = /*                */ 0b00000000000000000000010000;
+export const ContentReset = /*                 */ 0b00000000000000000000100000;
+export const Callback = /*                     */ 0b00000000000000000001000000;
+export const DidCapture = /*                   */ 0b00000000000000000010000000;
+export const ForceClientRender = /*            */ 0b00000000000000000100000000;
+export const Ref = /*                          */ 0b00000000000000001000000000;
+export const Snapshot = /*                     */ 0b00000000000000010000000000;
+export const Passive = /*                      */ 0b00000000000000100000000000;
+export const Hydrating = /*                    */ 0b00000000000001000000000000;
 export const HydratingAndUpdate = /*           */ Hydrating | Update;
-export const Visibility = /*                   */ 0b0000000000010000000000000;
-export const StoreConsistency = /*             */ 0b0000000000100000000000000;
+export const Visibility = /*                   */ 0b00000000000010000000000000;
+export const StoreConsistency = /*             */ 0b00000000000100000000000000;
 
 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 = /*               */ 0b0000000000111111111111111;
+export const HostEffectMask = /*               */ 0b00000000000111111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b0000000001000000000000000;
-export const ShouldCapture = /*                */ 0b0000000010000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b0000000100000000000000000;
-export const DidPropagateContext = /*          */ 0b0000001000000000000000000;
-export const NeedsPropagation = /*             */ 0b0000010000000000000000000;
+export const Incomplete = /*                   */ 0b00000000001000000000000000;
+export const ShouldCapture = /*                */ 0b00000000010000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b00000000100000000000000000;
+export const DidPropagateContext = /*          */ 0b00000001000000000000000000;
+export const NeedsPropagation = /*             */ 0b00000010000000000000000000;
+export const Forked = /*                       */ 0b00000100000000000000000000;
 
 // 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 RefStatic = /*                    */ 0b0000100000000000000000000;
-export const LayoutStatic = /*                 */ 0b0001000000000000000000000;
-export const PassiveStatic = /*                */ 0b0010000000000000000000000;
+export const RefStatic = /*                    */ 0b00001000000000000000000000;
+export const LayoutStatic = /*                 */ 0b00010000000000000000000000;
+export const PassiveStatic = /*                */ 0b00100000000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b0100000000000000000000000;
-export const MountPassiveDev = /*              */ 0b1000000000000000000000000;
+export const MountLayoutDev = /*               */ 0b01000000000000000000000000;
+export const MountPassiveDev = /*              */ 0b10000000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 732f7d71a7e7..a1d7009a85a4 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -117,6 +117,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -203,6 +204,12 @@ let didScheduleRenderPhaseUpdate: boolean = false;
 // TODO: Maybe there's some way to consolidate this with
 // `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.
 let didScheduleRenderPhaseUpdateDuringThisPass: boolean = false;
+// Counts the number of useId hooks in this component.
+let localIdCounter: number = 0;
+// 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;
 
@@ -396,6 +403,7 @@ export function renderWithHooks<Props, SecondArg>(
   // workInProgressHook = null;
 
   // didScheduleRenderPhaseUpdate = false;
+  // localIdCounter = 0;
 
   // TODO Warn if no hooks are used at all during mount, then some are used during update.
   // Currently we will identify the update render as a mount because memoizedState === null.
@@ -543,6 +551,21 @@ export function renderWithHooks<Props, SecondArg>(
     }
   }
 
+  if (localIdCounter !== 0) {
+    localIdCounter = 0;
+    if (getIsHydrating()) {
+      // 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);
+      }
+    }
+  }
+
   return children;
 }
 
@@ -612,6 +635,7 @@ export function resetHooksAfterThrow(): void {
   }
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
 }
 
 function mountWorkInProgressHook(): Hook {
@@ -2109,6 +2133,39 @@ function rerenderOpaqueIdentifier(): OpaqueIDType | void {
   return id;
 }
 
+function mountId(): string {
+  const hook = mountWorkInProgressHook();
+
+  let id;
+  if (getIsHydrating()) {
+    const treeId = getTreeId();
+
+    // Use a captial R prefix for server-generated ids.
+    id = '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 += ':' + localId.toString(32);
+    }
+  } else {
+    // Use a lowercase r prefix for client-generated ids.
+    const globalClientId = globalClientIdCounter++;
+    id = 'r:' + globalClientId.toString(32);
+  }
+
+  hook.memoizedState = id;
+  return id;
+}
+
+function updateId(): string {
+  const hook = updateWorkInProgressHook();
+  const id: string = hook.memoizedState;
+  return id;
+}
+
 function mountRefresh() {
   const hook = mountWorkInProgressHook();
   const refresh = (hook.memoizedState = refreshCache.bind(
@@ -2425,6 +2482,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
+  useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2453,6 +2511,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
+  useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2481,6 +2540,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2509,6 +2569,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2680,6 +2741,11 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2822,6 +2888,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2964,6 +3035,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3107,6 +3183,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3266,6 +3347,12 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3425,6 +3512,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3585,6 +3678,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index b78f24e8b47f..167698271dba 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -117,6 +117,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
+import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -203,6 +204,12 @@ let didScheduleRenderPhaseUpdate: boolean = false;
 // TODO: Maybe there's some way to consolidate this with
 // `didScheduleRenderPhaseUpdate`. Or with `numberOfReRenders`.
 let didScheduleRenderPhaseUpdateDuringThisPass: boolean = false;
+// Counts the number of useId hooks in this component.
+let localIdCounter: number = 0;
+// 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;
 
@@ -396,6 +403,7 @@ export function renderWithHooks<Props, SecondArg>(
   // workInProgressHook = null;
 
   // didScheduleRenderPhaseUpdate = false;
+  // localIdCounter = 0;
 
   // TODO Warn if no hooks are used at all during mount, then some are used during update.
   // Currently we will identify the update render as a mount because memoizedState === null.
@@ -543,6 +551,21 @@ export function renderWithHooks<Props, SecondArg>(
     }
   }
 
+  if (localIdCounter !== 0) {
+    localIdCounter = 0;
+    if (getIsHydrating()) {
+      // 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);
+      }
+    }
+  }
+
   return children;
 }
 
@@ -612,6 +635,7 @@ export function resetHooksAfterThrow(): void {
   }
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
+  localIdCounter = 0;
 }
 
 function mountWorkInProgressHook(): Hook {
@@ -2109,6 +2133,39 @@ function rerenderOpaqueIdentifier(): OpaqueIDType | void {
   return id;
 }
 
+function mountId(): string {
+  const hook = mountWorkInProgressHook();
+
+  let id;
+  if (getIsHydrating()) {
+    const treeId = getTreeId();
+
+    // Use a captial R prefix for server-generated ids.
+    id = '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 += ':' + localId.toString(32);
+    }
+  } else {
+    // Use a lowercase r prefix for client-generated ids.
+    const globalClientId = globalClientIdCounter++;
+    id = 'r:' + globalClientId.toString(32);
+  }
+
+  hook.memoizedState = id;
+  return id;
+}
+
+function updateId(): string {
+  const hook = updateWorkInProgressHook();
+  const id: string = hook.memoizedState;
+  return id;
+}
+
 function mountRefresh() {
   const hook = mountWorkInProgressHook();
   const refresh = (hook.memoizedState = refreshCache.bind(
@@ -2425,6 +2482,7 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
   useOpaqueIdentifier: throwInvalidHookError,
+  useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2453,6 +2511,7 @@ const HooksDispatcherOnMount: Dispatcher = {
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: mountOpaqueIdentifier,
+  useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2481,6 +2540,7 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
   useOpaqueIdentifier: updateOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2509,6 +2569,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
   useOpaqueIdentifier: rerenderOpaqueIdentifier,
+  useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
 };
@@ -2680,6 +2741,11 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2822,6 +2888,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -2964,6 +3035,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3107,6 +3183,11 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3266,6 +3347,12 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3425,6 +3512,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
@@ -3585,6 +3678,12 @@ if (__DEV__) {
       updateHookTypesDev();
       return rerenderOpaqueIdentifier();
     },
+    useId(): string {
+      currentHookNameInDev = 'useId';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateId();
+    },
 
     unstable_isNewReconciler: enableNewReconciler,
   };
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 7275f1663cad..eabc5e43116b 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -17,6 +17,7 @@ import type {
   HostContext,
 } from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
+import type {TreeContext} from './ReactFiberTreeContext.new';
 
 import {
   HostComponent,
@@ -62,6 +63,10 @@ import {
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.new';
+import {
+  getSuspendedTreeContext,
+  restoreSuspendedTreeContext,
+} from './ReactFiberTreeContext.new';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -96,6 +101,7 @@ function enterHydrationState(fiber: Fiber): boolean {
 function reenterHydrationStateFromDehydratedSuspenseInstance(
   fiber: Fiber,
   suspenseInstance: SuspenseInstance,
+  treeContext: TreeContext | null,
 ): boolean {
   if (!supportsHydration) {
     return false;
@@ -105,6 +111,9 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  if (treeContext !== null) {
+    restoreSuspendedTreeContext(fiber, treeContext);
+  }
   return true;
 }
 
@@ -287,6 +296,7 @@ function tryHydrate(fiber, nextInstance) {
         if (suspenseInstance !== null) {
           const suspenseState: SuspenseState = {
             dehydrated: suspenseInstance,
+            treeContext: getSuspendedTreeContext(),
             retryLane: OffscreenLane,
           };
           fiber.memoizedState = suspenseState;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 654de3f9a289..48e60581e0f2 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -17,6 +17,7 @@ import type {
   HostContext,
 } from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
+import type {TreeContext} from './ReactFiberTreeContext.old';
 
 import {
   HostComponent,
@@ -62,6 +63,10 @@ import {
 } from './ReactFiberHostConfig';
 import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.old';
+import {
+  getSuspendedTreeContext,
+  restoreSuspendedTreeContext,
+} from './ReactFiberTreeContext.old';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -96,6 +101,7 @@ function enterHydrationState(fiber: Fiber): boolean {
 function reenterHydrationStateFromDehydratedSuspenseInstance(
   fiber: Fiber,
   suspenseInstance: SuspenseInstance,
+  treeContext: TreeContext | null,
 ): boolean {
   if (!supportsHydration) {
     return false;
@@ -105,6 +111,9 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  if (treeContext !== null) {
+    restoreSuspendedTreeContext(fiber, treeContext);
+  }
   return true;
 }
 
@@ -287,6 +296,7 @@ function tryHydrate(fiber, nextInstance) {
         if (suspenseInstance !== null) {
           const suspenseState: SuspenseState = {
             dehydrated: suspenseInstance,
+            treeContext: getSuspendedTreeContext(),
             retryLane: OffscreenLane,
           };
           fiber.memoizedState = suspenseState;
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index c1f34e1052fc..7e1461c7a722 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
+import {clz32} from './clz32';
 
 // Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
@@ -791,17 +792,3 @@ export function movePendingFibersToMemoized(root: FiberRoot, lanes: Lanes) {
     lanes &= ~lane;
   }
 }
-
-const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
-
-// Count leading zeros. Only used on lanes, so assume input is an integer.
-// 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(lanes: Lanes | Lane) {
-  if (lanes === 0) {
-    return 32;
-  }
-  return (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index c81191f6a07e..6b4be15e649f 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -23,6 +23,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
+import {clz32} from './clz32';
 
 // Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
 // If those values are changed that package should be rebuilt and redeployed.
@@ -791,17 +792,3 @@ export function movePendingFibersToMemoized(root: FiberRoot, lanes: Lanes) {
     lanes &= ~lane;
   }
 }
-
-const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
-
-// Count leading zeros. Only used on lanes, so assume input is an integer.
-// 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(lanes: Lanes | Lane) {
-  if (lanes === 0) {
-    return 32;
-  }
-  return (31 - ((log(lanes) / LN2) | 0)) | 0;
-}
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 5ad7ae650249..9dbaf7fb76ef 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -11,6 +11,8 @@ import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.new';
+import type {TreeContext} from './ReactFiberTreeContext.new';
+
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -40,6 +42,7 @@ export type SuspenseState = {|
   // 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.
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index 51bef1df3a56..726f0ca52005 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -11,6 +11,8 @@ import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {Fiber} from './ReactInternalTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.old';
+import type {TreeContext} from './ReactFiberTreeContext.old';
+
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -40,6 +42,7 @@ export type SuspenseState = {|
   // 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.
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
new file mode 100644
index 000000000000..0725ba577e64
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 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 {getIsHydrating} from './ReactFiberHydrationContext.new';
+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;
+  }
+}
+
+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/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
new file mode 100644
index 000000000000..a4ba3c3ddb93
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -0,0 +1,273 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// 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 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 {getIsHydrating} from './ReactFiberHydrationContext.old';
+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;
+  }
+}
+
+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/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index ba8bd4b57395..bb002b9e71b3 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -50,8 +50,14 @@ import {
   popCachePool,
 } from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
+import {popTreeContext} from './ReactFiberTreeContext.new';
 
 function unwindWork(workInProgress: 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(workInProgress);
   switch (workInProgress.tag) {
     case ClassComponent: {
       const Component = workInProgress.type;
@@ -164,6 +170,11 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
 }
 
 function unwindInterruptedWork(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;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index ad8e479700db..7f161513a4af 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -50,8 +50,14 @@ import {
   popCachePool,
 } from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
+import {popTreeContext} from './ReactFiberTreeContext.old';
 
 function unwindWork(workInProgress: 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(workInProgress);
   switch (workInProgress.tag) {
     case ClassComponent: {
       const Component = workInProgress.type;
@@ -164,6 +170,11 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
 }
 
 function unwindInterruptedWork(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;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index e971828233c1..9dac4f40aad5 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -44,6 +44,7 @@ export type HookType =
   | 'useMutableSource'
   | 'useSyncExternalStore'
   | 'useOpaqueIdentifier'
+  | 'useId'
   | 'useCacheRefresh';
 
 export type ContextDependency<T> = {
@@ -317,6 +318,7 @@ export type Dispatcher = {|
     getServerSnapshot?: () => T,
   ): T,
   useOpaqueIdentifier(): any,
+  useId(): string,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
 
   unstable_isNewReconciler?: boolean,
diff --git a/packages/react-reconciler/src/clz32.js b/packages/react-reconciler/src/clz32.js
new file mode 100644
index 000000000000..80a9cfb91148
--- /dev/null
+++ b/packages/react-reconciler/src/clz32.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// TODO: This is pretty well supported by browsers. Maybe we can drop it.
+
+export 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/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 2596632652b4..bf1a2d56e0f9 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -17,8 +17,10 @@ import type {
 } from 'shared/ReactTypes';
 
 import type {ResponseState, OpaqueIDType} from './ReactServerFormatConfig';
+import type {Task} from './ReactFizzServer';
 
 import {readContext as readContextImpl} from './ReactFizzNewContext';
+import {getTreeId} from './ReactFizzTreeContext';
 
 import {makeServerID} from './ReactServerFormatConfig';
 
@@ -45,12 +47,15 @@ type Hook = {|
 |};
 
 let currentlyRenderingComponent: Object | null = null;
+let currentlyRenderingTask: Task | 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;
 // Lazily created map of render-phase updates
 let renderPhaseUpdates: Map<UpdateQueue<any>, Update<any>> | null = null;
 // Counter to prevent infinite loops.
@@ -163,18 +168,22 @@ function createWorkInProgressHook(): Hook {
   return workInProgressHook;
 }
 
-export function prepareToUseHooks(componentIdentity: Object): void {
+export function prepareToUseHooks(task: Task, componentIdentity: Object): void {
   currentlyRenderingComponent = componentIdentity;
+  currentlyRenderingTask = task;
   if (__DEV__) {
     isInHookUserCodeInDev = false;
   }
 
   // The following should have already been reset
   // didScheduleRenderPhaseUpdate = false;
+  // localIdCounter = 0;
   // firstWorkInProgressHook = null;
   // numberOfReRenders = 0;
   // renderPhaseUpdates = null;
   // workInProgressHook = null;
+
+  localIdCounter = 0;
 }
 
 export function finishHooks(
@@ -203,6 +212,14 @@ export function finishHooks(
   return children;
 }
 
+export function checkDidRenderIdHook() {
+  // 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;
+}
+
 // Reset the internal hooks state if an error occurs while rendering a component
 export function resetHooksState(): void {
   if (__DEV__) {
@@ -210,6 +227,7 @@ export function resetHooksState(): void {
   }
 
   currentlyRenderingComponent = null;
+  currentlyRenderingTask = null;
   didScheduleRenderPhaseUpdate = false;
   firstWorkInProgressHook = null;
   numberOfReRenders = 0;
@@ -495,6 +513,24 @@ function useOpaqueIdentifier(): OpaqueIDType {
   return makeServerID(currentResponseState);
 }
 
+function useId(): string {
+  const task: Task = (currentlyRenderingTask: any);
+  const treeId = getTreeId(task.treeContext);
+
+  // Use a captial R prefix for server-generated ids.
+  let id = '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 += ':' + localId.toString(32);
+  }
+
+  return id;
+}
+
 function unsupportedRefresh() {
   throw new Error('Cache cannot be refreshed during server rendering.');
 }
@@ -524,6 +560,7 @@ export const Dispatcher: DispatcherType = {
   useDeferredValue,
   useTransition,
   useOpaqueIdentifier,
+  useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
   useSyncExternalStore,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 6692b9264864..f06cbc8fb61a 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -25,6 +25,7 @@ import type {
 } from './ReactServerFormatConfig';
 import type {ContextSnapshot} from './ReactFizzNewContext';
 import type {ComponentStackNode} from './ReactFizzComponentStack';
+import type {TreeContext} from './ReactFizzTreeContext';
 
 import {
   scheduleWork,
@@ -78,12 +79,14 @@ import {
 import {
   prepareToUseHooks,
   finishHooks,
+  checkDidRenderIdHook,
   resetHooksState,
   Dispatcher,
   currentResponseState,
   setCurrentResponseState,
 } from './ReactFizzHooks';
 import {getStackByComponentStackNode} from './ReactFizzComponentStack';
+import {emptyTreeContext, pushTreeContext} from './ReactFizzTreeContext';
 
 import {
   getIteratorFn,
@@ -134,7 +137,7 @@ type SuspenseBoundary = {
   fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
 };
 
-type Task = {
+export type Task = {
   node: ReactNodeList,
   ping: () => void,
   blockedBoundary: Root | SuspenseBoundary,
@@ -142,6 +145,7 @@ type Task = {
   abortSet: Set<Task>, // the abortable set that this task belongs to
   legacyContext: LegacyContext, // the current legacy context that this task is executing in
   context: ContextSnapshot, // the current new context that this task is executing in
+  treeContext: TreeContext, // the current tree context that this task is executing in
   componentStack: null | ComponentStackNode, // DEV-only component stack
 };
 
@@ -265,6 +269,7 @@ export function createRequest(
     abortSet,
     emptyContextObject,
     rootContextSnapshot,
+    emptyTreeContext,
   );
   pingedTasks.push(rootTask);
   return request;
@@ -302,6 +307,7 @@ function createTask(
   abortSet: Set<Task>,
   legacyContext: LegacyContext,
   context: ContextSnapshot,
+  treeContext: TreeContext,
 ): Task {
   request.allPendingTasks++;
   if (blockedBoundary === null) {
@@ -317,6 +323,7 @@ function createTask(
     abortSet,
     legacyContext,
     context,
+    treeContext,
   }: any);
   if (__DEV__) {
     task.componentStack = null;
@@ -497,6 +504,7 @@ function renderSuspenseBoundary(
     fallbackAbortSet,
     task.legacyContext,
     task.context,
+    task.treeContext,
   );
   if (__DEV__) {
     suspendedFallbackTask.componentStack = task.componentStack;
@@ -564,7 +572,7 @@ function renderWithHooks<Props, SecondArg>(
   secondArg: SecondArg,
 ): any {
   const componentIdentity = {};
-  prepareToUseHooks(componentIdentity);
+  prepareToUseHooks(task, componentIdentity);
   const result = Component(props, secondArg);
   return finishHooks(Component, props, result, secondArg);
 }
@@ -671,6 +679,7 @@ function renderIndeterminateComponent(
   }
 
   const value = renderWithHooks(request, task, Component, props, legacyContext);
+  const hasId = checkDidRenderIdHook();
 
   if (__DEV__) {
     // Support for module components is deprecated and is removed behind a flag.
@@ -742,7 +751,21 @@ function renderIndeterminateComponent(
     }
     // We're now successfully past this task, and we don't have to pop back to
     // the previous task every again, so we can use the destructive recursive form.
-    renderNodeDestructive(request, task, value);
+    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;
+      task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
+      try {
+        renderNodeDestructive(request, task, value);
+      } finally {
+        task.treeContext = prevTreeContext;
+      }
+    } else {
+      renderNodeDestructive(request, task, value);
+    }
   }
   popComponentStackInDEV(task);
 }
@@ -827,7 +850,22 @@ function renderForwardRef(
 ): void {
   pushFunctionComponentStackInDEV(task, type.render);
   const children = renderWithHooks(request, task, type.render, props, ref);
-  renderNodeDestructive(request, task, children);
+  const hasId = checkDidRenderIdHook();
+  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;
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
+    try {
+      renderNodeDestructive(request, task, children);
+    } finally {
+      task.treeContext = prevTreeContext;
+    }
+  } else {
+    renderNodeDestructive(request, task, children);
+  }
   popComponentStackInDEV(task);
 }
 
@@ -1122,12 +1160,7 @@ function renderNodeDestructive(
     }
 
     if (isArray(node)) {
-      for (let i = 0; i < node.length; i++) {
-        // Recursively render the rest. 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]);
-      }
+      renderChildrenArray(request, task, node);
       return;
     }
 
@@ -1138,18 +1171,23 @@ function renderNodeDestructive(
       }
       const iterator = iteratorFn.call(node);
       if (iterator) {
+        // 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 there are not entries, we need to push an empty so we start by checking that.
         if (!step.done) {
+          const children = [];
           do {
-            // Recursively render the rest. 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, step.value);
+            children.push(step.value);
             step = iterator.next();
           } while (!step.done);
+          renderChildrenArray(request, task, children);
           return;
         }
+        return;
       }
     }
 
@@ -1191,6 +1229,21 @@ function renderNodeDestructive(
   }
 }
 
+function renderChildrenArray(request, task, children) {
+  const totalChildren = children.length;
+  for (let i = 0; i < totalChildren; i++) {
+    const prevTreeContext = task.treeContext;
+    task.treeContext = pushTreeContext(prevTreeContext, totalChildren, i);
+    try {
+      // 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, children[i]);
+    } finally {
+      task.treeContext = prevTreeContext;
+    }
+  }
+}
+
 function spawnNewSuspendedTask(
   request: Request,
   task: Task,
@@ -1214,6 +1267,7 @@ function spawnNewSuspendedTask(
     task.abortSet,
     task.legacyContext,
     task.context,
+    task.treeContext,
   );
   if (__DEV__) {
     if (task.componentStack !== null) {
@@ -1257,6 +1311,7 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
       if (__DEV__) {
         task.componentStack = previousComponentStack;
       }
+      return;
     } else {
       // 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.
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
new file mode 100644
index 000000000000..c9a47e5af72a
--- /dev/null
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @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 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/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 7bd7a95c2561..bba34065cc26 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -846,6 +846,7 @@ const Dispatcher: DispatcherType = {
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
   useOpaqueIdentifier: (unsupportedHook: any),
+  useId: (unsupportedHook: any),
   useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
   useCacheRefresh(): <T>(?() => T, ?T) => void {
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index a3fe87372982..731124ea5159 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -43,6 +43,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useDeferredValue: unsupported,
     useTransition: unsupported,
     useOpaqueIdentifier: unsupported,
+    useId: unsupported,
     useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
     useCacheRefresh: unsupported,
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index c5854f8f6d39..a2e678c580b2 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -41,6 +41,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 24fc9782595d..20c22828583f 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -37,6 +37,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.js b/packages/react/index.js
index 9a6a99ee5218..3108c06c5528 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -62,6 +62,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 8d08a43b9094..eef99fdabf2a 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -40,6 +40,7 @@ export {
   unstable_getCacheForType,
   unstable_useCacheRefresh,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 867980fa5389..517dc3f8fb2d 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -30,6 +30,7 @@ export {
   memo,
   startTransition,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index d29858c9b07f..868538c83f59 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -53,6 +53,7 @@ import {
   useTransition,
   useDeferredValue,
   useOpaqueIdentifier,
+  useId,
   useCacheRefresh,
 } from './ReactHooks';
 import {
@@ -127,5 +128,6 @@ export {
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
   useOpaqueIdentifier as unstable_useOpaqueIdentifier,
+  useId as unstable_useId,
   act,
 };
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 1892f926c59c..1f987de1671b 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -174,6 +174,11 @@ export function useOpaqueIdentifier(): OpaqueIDType | void {
   return dispatcher.useOpaqueIdentifier();
 }
 
+export function useId(): string {
+  const dispatcher = resolveDispatcher();
+  return dispatcher.useId();
+}
+
 export function useMutableSource<Source, Snapshot>(
   source: MutableSource<Source>,
   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index a663ca8a5a89..d556400750b4 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -28,6 +28,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useOpaqueIdentifier,
+  unstable_useId,
   useCallback,
   useContext,
   useDebugValue,

From 8c4a05b8fb83624d5442f74138e7f263d666fd5d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 1 Nov 2021 17:46:09 -0400
Subject: [PATCH 0993/1603] Remove @flow pragma comment from module
 registration start/stop templates (#22670)

---
 packages/shared/registerInternalModuleStart.js | 2 --
 packages/shared/registerInternalModuleStop.js  | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/shared/registerInternalModuleStart.js b/packages/shared/registerInternalModuleStart.js
index aa1154fe9f1b..1bab503c2a6d 100644
--- a/packages/shared/registerInternalModuleStart.js
+++ b/packages/shared/registerInternalModuleStart.js
@@ -3,8 +3,6 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
diff --git a/packages/shared/registerInternalModuleStop.js b/packages/shared/registerInternalModuleStop.js
index dab139f2557f..44a69bed9ac3 100644
--- a/packages/shared/registerInternalModuleStop.js
+++ b/packages/shared/registerInternalModuleStop.js
@@ -3,8 +3,6 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- *
- * @flow
  */
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */

From 75f3ddebfa0d9885ce8df42571cf0c09ad6c0a3b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 18:02:39 -0400
Subject: [PATCH 0994/1603] Remove experimental useOpaqueIdentifier API
 (#22672)

useId is the updated version of this API.
---
 packages/react-art/src/ReactARTHostConfig.js  |   18 -
 .../react-debug-tools/src/ReactDebugHooks.js  |   26 -
 .../ReactHooksInspectionIntegration-test.js   |   58 -
 .../src/backend/ReactSymbols.js               |    3 -
 .../ReactDOMServerIntegrationHooks-test.js    | 1109 -----------------
 .../src/client/DOMPropertyOperations.js       |    8 -
 .../react-dom/src/client/ReactDOMComponent.js |   10 -
 .../src/client/ReactDOMHostConfig.js          |   45 -
 .../src/server/ReactDOMServerFormatConfig.js  |   22 -
 .../ReactDOMServerLegacyFormatConfig.js       |    6 -
 .../src/server/ReactPartialRenderer.js        |   17 +-
 .../src/server/ReactPartialRendererHooks.js   |   13 +-
 .../src/ReactFabricHostConfig.js              |   20 -
 .../src/ReactNativeHostConfig.js              |   19 -
 .../server/ReactNativeServerFormatConfig.js   |   17 -
 .../src/ReactNoopServer.js                    |    6 -
 .../src/ReactFiberHooks.new.js                |  139 ---
 .../src/ReactFiberHooks.old.js                |  139 ---
 .../src/ReactFiberWorkLoop.new.js             |   13 +-
 .../src/ReactFiberWorkLoop.old.js             |   13 +-
 .../src/ReactInternalTypes.js                 |    2 -
 ...tIncrementalErrorHandling-test.internal.js |   16 +-
 .../src/forks/ReactFiberHostConfig.custom.js  |    6 -
 packages/react-server/src/ReactFizzHooks.js   |    9 +-
 .../react-server/src/ReactFlightServer.js     |    1 -
 .../forks/ReactServerFormatConfig.custom.js   |    2 -
 .../src/ReactSuspenseTestUtils.js             |    1 -
 .../src/ReactTestHostConfig.js                |   44 -
 packages/react/index.classic.fb.js            |    1 -
 packages/react/index.experimental.js          |    1 -
 packages/react/index.js                       |    1 -
 packages/react/index.modern.fb.js             |    1 -
 packages/react/index.stable.js                |    1 -
 packages/react/src/React.js                   |    2 -
 packages/react/src/ReactHooks.js              |    6 -
 .../unstable-shared-subset.experimental.js    |    1 -
 packages/shared/CheckStringCoercion.js        |   12 -
 packages/shared/ReactSymbols.js               |    2 -
 scripts/error-codes/codes.json                |    2 +-
 39 files changed, 22 insertions(+), 1790 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index ec702bf9a70d..47bced8a1274 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -436,24 +436,6 @@ export function getInstanceFromNode(node) {
   throw new Error('Not implemented.');
 }
 
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not implemented.');
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
-export function makeClientId(): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not implemented.');
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index eed8c46df7d6..895e75359867 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -18,13 +18,9 @@ import type {
   Fiber,
   Dispatcher as DispatcherType,
 } from 'react-reconciler/src/ReactInternalTypes';
-import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
-
-import {NoMode} from 'react-reconciler/src/ReactTypeOfMode';
 
 import ErrorStackParser from 'error-stack-parser';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {
   FunctionComponent,
   SimpleMemoComponent,
@@ -53,8 +49,6 @@ type Dispatch<A> = A => void;
 
 let primitiveStackCache: null | Map<string, Array<any>> = null;
 
-let currentFiber: Fiber | null = null;
-
 type Hook = {
   memoizedState: any,
   next: Hook | null,
@@ -324,23 +318,6 @@ function useDeferredValue<T>(value: T): T {
   return value;
 }
 
-function useOpaqueIdentifier(): OpaqueIDType | void {
-  const hook = nextHook(); // State
-  if (currentFiber && currentFiber.mode === NoMode) {
-    nextHook(); // Effect
-  }
-  let value = hook === null ? undefined : hook.memoizedState;
-  if (value && value.$$typeof === REACT_OPAQUE_ID_TYPE) {
-    value = undefined;
-  }
-  hookLog.push({
-    primitive: 'OpaqueIdentifier',
-    stackError: new Error(),
-    value,
-  });
-  return value;
-}
-
 function useId(): string {
   const hook = nextHook();
   const id = hook !== null ? hook.memoizedState : '';
@@ -371,7 +348,6 @@ const Dispatcher: DispatcherType = {
   useMutableSource,
   useSyncExternalStore,
   useDeferredValue,
-  useOpaqueIdentifier,
   useId,
 };
 
@@ -767,8 +743,6 @@ export function inspectHooksOfFiber(
     currentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
   }
 
-  currentFiber = fiber;
-
   if (
     fiber.tag !== FunctionComponent &&
     fiber.tag !== SimpleMemoComponent &&
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index d17a01a25827..559a0bf75e52 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -598,64 +598,6 @@ describe('ReactHooksInspectionIntegration', () => {
     ]);
   });
 
-  it('should support composite useOpaqueIdentifier hook', () => {
-    function Foo(props) {
-      const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState(() => 'hello', []);
-      return <div id={id}>{state}</div>;
-    }
-
-    const renderer = ReactTestRenderer.create(<Foo />);
-    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('OpaqueIdentifier');
-    expect(String(tree[0].value).startsWith('c_')).toBe(true);
-
-    expect(tree[1]).toEqual({
-      id: 1,
-      isStateEditable: true,
-      name: 'State',
-      value: 'hello',
-      subHooks: [],
-    });
-  });
-
-  it('should support composite useOpaqueIdentifier hook in concurrent mode', () => {
-    function Foo(props) {
-      const id = React.unstable_useOpaqueIdentifier();
-      const [state] = React.useState('hello');
-      return <div id={id}>{state}</div>;
-    }
-
-    const renderer = ReactTestRenderer.create(<Foo />, {
-      unstable_isConcurrent: true,
-    });
-    expect(Scheduler).toFlushWithoutYielding();
-
-    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('OpaqueIdentifier');
-    expect(String(tree[0].value).startsWith('c_')).toBe(true);
-
-    expect(tree[1]).toEqual({
-      id: 1,
-      isStateEditable: true,
-      name: 'State',
-      value: 'hello',
-      subHooks: [],
-    });
-  });
-
   it('should support useId hook', () => {
     function Foo(props) {
       const id = React.unstable_useId();
diff --git a/packages/react-devtools-shared/src/backend/ReactSymbols.js b/packages/react-devtools-shared/src/backend/ReactSymbols.js
index c6515f02edc5..ebc6920be8d2 100644
--- a/packages/react-devtools-shared/src/backend/ReactSymbols.js
+++ b/packages/react-devtools-shared/src/backend/ReactSymbols.js
@@ -40,9 +40,6 @@ export const LAZY_SYMBOL_STRING = 'Symbol(react.lazy)';
 export const MEMO_NUMBER = 0xead3;
 export const MEMO_SYMBOL_STRING = 'Symbol(react.memo)';
 
-export const OPAQUE_ID_NUMBER = 0xeae0;
-export const OPAQUE_ID_SYMBOL_STRING = 'Symbol(react.opaque.id)';
-
 export const PORTAL_NUMBER = 0xeaca;
 export const PORTAL_SYMBOL_STRING = 'Symbol(react.portal)';
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
index ba2b22437bc1..114c522313a7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationHooks-test.js
@@ -17,8 +17,6 @@ let React;
 let ReactDOM;
 let ReactDOMServer;
 let ReactTestUtils;
-let act;
-let Scheduler;
 let useState;
 let useReducer;
 let useEffect;
@@ -30,7 +28,6 @@ let useImperativeHandle;
 let useInsertionEffect;
 let useLayoutEffect;
 let useDebugValue;
-let useOpaqueIdentifier;
 let forwardRef;
 let yieldedValues;
 let yieldValue;
@@ -44,8 +41,6 @@ function initModules() {
   ReactDOM = require('react-dom');
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
-  Scheduler = require('scheduler');
-  act = require('jest-react').act;
   useState = React.useState;
   useReducer = React.useReducer;
   useEffect = React.useEffect;
@@ -57,7 +52,6 @@ function initModules() {
   useImperativeHandle = React.useImperativeHandle;
   useInsertionEffect = React.useInsertionEffect;
   useLayoutEffect = React.useLayoutEffect;
-  useOpaqueIdentifier = React.unstable_useOpaqueIdentifier;
   forwardRef = React.forwardRef;
 
   yieldedValues = [];
@@ -83,9 +77,6 @@ const {
   itRenders,
   itThrowsWhenRendering,
   serverRender,
-  streamRender,
-  clientCleanRender,
-  clientRenderOnServerString,
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerHooks', () => {
@@ -910,1104 +901,4 @@ describe('ReactDOMServerHooks', () => {
     );
     expect(container.children[0].textContent).toEqual('0');
   });
-
-  describe('useOpaqueIdentifier', () => {
-    it('generates unique ids for server string render', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await serverRender(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('generates unique ids for server stream render', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await streamRender(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('generates unique ids for client render', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await clientCleanRender(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('generates unique ids for client render on good server markup', async () => {
-      function App(props) {
-        const idOne = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-        return (
-          <div>
-            <div aria-labelledby={idOne} />
-            <div id={idOne} />
-            <span aria-labelledby={idTwo} />
-            <span id={idTwo} />
-          </div>
-        );
-      }
-
-      const domNode = await clientRenderOnServerString(<App />);
-      expect(domNode.children.length).toEqual(4);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[2].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[3].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).not.toEqual(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(
-        domNode.children[0].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-      expect(
-        domNode.children[2].getAttribute('aria-labelledby'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier does not change id even if the component updates during client render', async () => {
-      let _setShowId;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [showId, setShowId] = useState(false);
-        _setShowId = setShowId;
-        return (
-          <div>
-            <div aria-labelledby={id} />
-            {showId && <div id={id} />}
-          </div>
-        );
-      }
-
-      const domNode = await clientCleanRender(<App />);
-      const oldClientId = domNode.children[0].getAttribute('aria-labelledby');
-
-      expect(domNode.children.length).toEqual(1);
-      expect(oldClientId).not.toBeNull();
-
-      await act(async () => _setShowId(true));
-
-      expect(domNode.children.length).toEqual(2);
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        domNode.children[1].getAttribute('id'),
-      );
-      expect(domNode.children[0].getAttribute('aria-labelledby')).toEqual(
-        oldClientId,
-      );
-    });
-
-    it('useOpaqueIdentifier identifierPrefix works for server renderer and does not clash', async () => {
-      function ChildTwo({id}) {
-        return <div id={id}>Child Three</div>;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        const idTwo = useOpaqueIdentifier();
-
-        return (
-          <div>
-            <div aria-labelledby={id}>Child One</div>
-            <ChildTwo id={id} />
-            <div aria-labelledby={idTwo}>Child Three</div>
-            <div id={idTwo}>Child Four</div>
-          </div>
-        );
-      }
-
-      const containerOne = document.createElement('div');
-      document.body.append(containerOne);
-
-      containerOne.innerHTML = ReactDOMServer.renderToString(<App />, {
-        identifierPrefix: 'one',
-      });
-
-      const containerTwo = document.createElement('div');
-      document.body.append(containerTwo);
-
-      containerTwo.innerHTML = ReactDOMServer.renderToString(<App />, {
-        identifierPrefix: 'two',
-      });
-
-      expect(document.body.children.length).toEqual(2);
-      const childOne = document.body.children[0];
-      const childTwo = document.body.children[1];
-
-      expect(
-        childOne.children[0].children[0].getAttribute('aria-labelledby'),
-      ).toEqual(childOne.children[0].children[1].getAttribute('id'));
-      expect(
-        childOne.children[0].children[2].getAttribute('aria-labelledby'),
-      ).toEqual(childOne.children[0].children[3].getAttribute('id'));
-
-      expect(
-        childOne.children[0].children[0].getAttribute('aria-labelledby'),
-      ).not.toEqual(
-        childOne.children[0].children[2].getAttribute('aria-labelledby'),
-      );
-
-      expect(
-        childOne.children[0].children[0]
-          .getAttribute('aria-labelledby')
-          .startsWith('one'),
-      ).toBe(true);
-      expect(
-        childOne.children[0].children[2]
-          .getAttribute('aria-labelledby')
-          .includes('one'),
-      ).toBe(true);
-
-      expect(
-        childTwo.children[0].children[0].getAttribute('aria-labelledby'),
-      ).toEqual(childTwo.children[0].children[1].getAttribute('id'));
-      expect(
-        childTwo.children[0].children[2].getAttribute('aria-labelledby'),
-      ).toEqual(childTwo.children[0].children[3].getAttribute('id'));
-
-      expect(
-        childTwo.children[0].children[0].getAttribute('aria-labelledby'),
-      ).not.toEqual(
-        childTwo.children[0].children[2].getAttribute('aria-labelledby'),
-      );
-
-      expect(
-        childTwo.children[0].children[0]
-          .getAttribute('aria-labelledby')
-          .startsWith('two'),
-      ).toBe(true);
-      expect(
-        childTwo.children[0].children[2]
-          .getAttribute('aria-labelledby')
-          .startsWith('two'),
-      ).toBe(true);
-    });
-
-    it('useOpaqueIdentifier identifierPrefix works for multiple reads on a streaming server renderer', async () => {
-      function ChildTwo() {
-        const id = useOpaqueIdentifier();
-
-        return <div id={id}>Child Two</div>;
-      }
-
-      function App() {
-        const id = useOpaqueIdentifier();
-
-        return (
-          <>
-            <div id={id}>Child One</div>
-            <ChildTwo />
-            <div aria-labelledby={id}>Aria One</div>
-          </>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-
-      const streamOne = ReactDOMServer.renderToNodeStream(<App />, {
-        identifierPrefix: 'one',
-      }).setEncoding('utf8');
-      const streamTwo = ReactDOMServer.renderToNodeStream(<App />, {
-        identifierPrefix: 'two',
-      }).setEncoding('utf8');
-
-      const streamOneIsDone = new Promise((resolve, reject) => {
-        streamOne.on('end', () => resolve());
-        streamOne.on('error', e => reject(e));
-      });
-      const streamTwoIsDone = new Promise((resolve, reject) => {
-        streamTwo.on('end', () => resolve());
-        streamTwo.on('error', e => reject(e));
-      });
-
-      const containerOne = document.createElement('div');
-      const containerTwo = document.createElement('div');
-
-      streamOne._read(10);
-      streamTwo._read(10);
-
-      containerOne.innerHTML = streamOne.read();
-      containerTwo.innerHTML = streamTwo.read();
-
-      expect(containerOne.children[0].getAttribute('id')).not.toEqual(
-        containerOne.children[1].getAttribute('id'),
-      );
-      expect(containerTwo.children[0].getAttribute('id')).not.toEqual(
-        containerTwo.children[1].getAttribute('id'),
-      );
-      expect(containerOne.children[0].getAttribute('id')).not.toEqual(
-        containerTwo.children[0].getAttribute('id'),
-      );
-      expect(containerOne.children[0].getAttribute('id').includes('one')).toBe(
-        true,
-      );
-      expect(containerOne.children[1].getAttribute('id').includes('one')).toBe(
-        true,
-      );
-      expect(containerTwo.children[0].getAttribute('id').includes('two')).toBe(
-        true,
-      );
-      expect(containerTwo.children[1].getAttribute('id').includes('two')).toBe(
-        true,
-      );
-
-      expect(containerOne.children[1].getAttribute('id')).not.toEqual(
-        containerTwo.children[1].getAttribute('id'),
-      );
-      expect(containerOne.children[0].getAttribute('id')).toEqual(
-        containerOne.children[2].getAttribute('aria-labelledby'),
-      );
-      expect(containerTwo.children[0].getAttribute('id')).toEqual(
-        containerTwo.children[2].getAttribute('aria-labelledby'),
-      );
-
-      // Exhaust the rest of the stream
-      class Sink extends require('stream').Writable {
-        _write(chunk, encoding, done) {
-          done();
-        }
-      }
-      streamOne.pipe(new Sink());
-      streamTwo.pipe(new Sink());
-
-      await Promise.all([streamOneIsDone, streamTwoIsDone]);
-    });
-
-    it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered', async () => {
-      let _setShowDiv;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [showDiv, setShowDiv] = useState(false);
-        _setShowDiv = setShowDiv;
-
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            {showDiv && <div id={id}>Child Two</div>}
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App />);
-      Scheduler.unstable_flushAll();
-      jest.runAllTimers();
-
-      expect(container.children[0].children.length).toEqual(1);
-      const oldServerId = container.children[0].children[0].getAttribute('id');
-      expect(oldServerId).not.toBeNull();
-
-      await act(async () => {
-        _setShowDiv(true);
-      });
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(container.children[0].children[0].getAttribute('id')).not.toEqual(
-        oldServerId,
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: IDs match when, after hydration, a new component that uses the ID is rendered for legacy', async () => {
-      let _setShowDiv;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [showDiv, setShowDiv] = useState(false);
-        _setShowDiv = setShowDiv;
-
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            {showDiv && <div id={id}>Child Two</div>}
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.hydrate(<App />, container);
-
-      expect(container.children[0].children.length).toEqual(1);
-      const oldServerId = container.children[0].children[0].getAttribute('id');
-      expect(oldServerId).not.toBeNull();
-
-      await act(async () => {
-        _setShowDiv(true);
-      });
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(container.children[0].children[0].getAttribute('id')).not.toEqual(
-        oldServerId,
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: ID is not used during hydration but is used in an update', async () => {
-      let _setShow;
-      function App({unused}) {
-        Scheduler.unstable_yieldValue('App');
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <span id={show ? id : null}>{'Child One'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      act(() => {
-        root.render(<App />);
-      });
-      expect(Scheduler).toHaveYielded(['App', 'App']);
-      // The ID goes from not being used to being added to the page
-      act(() => {
-        _setShow(true);
-      });
-      expect(Scheduler).toHaveYielded(['App', 'App']);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: ID is not used during hydration but is used in an update in legacy', async () => {
-      let _setShow;
-      function App({unused}) {
-        Scheduler.unstable_yieldValue('App');
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <span id={show ? id : null}>{'Child One'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.hydrate(<App />, container);
-      expect(Scheduler).toHaveYielded(['App', 'App']);
-      // The ID goes from not being used to being added to the page
-      act(() => {
-        _setShow(true);
-      });
-      expect(Scheduler).toHaveYielded(['App']);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: flushSync', async () => {
-      let _setShow;
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <span id={show ? id : null}>{'Child One'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.append(container);
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      act(() => {
-        root.render(<App />);
-      });
-
-      // The ID goes from not being used to being added to the page
-      act(() => {
-        ReactDOM.flushSync(() => {
-          _setShow(true);
-        });
-      });
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier: children with id hydrates before other children if ID updates', async () => {
-      let _setShow;
-
-      const child1Ref = React.createRef();
-      const childWithIDRef = React.createRef();
-      const setShowRef = React.createRef();
-
-      // RENAME THESE
-      function Child1() {
-        Scheduler.unstable_yieldValue('Child One');
-        return <span ref={child1Ref}>{'Child One'}</span>;
-      }
-
-      function Child2() {
-        Scheduler.unstable_yieldValue('Child Two');
-        return <span>{'Child Two'}</span>;
-      }
-
-      const Children = React.memo(function Children() {
-        return (
-          <React.Suspense fallback="Loading 1...">
-            <Child1 />
-            <Child2 />
-          </React.Suspense>
-        );
-      });
-
-      function ChildWithID({parentID}) {
-        Scheduler.unstable_yieldValue('Child with ID');
-        return (
-          <span id={parentID} ref={childWithIDRef}>
-            {'Child with ID'}
-          </span>
-        );
-      }
-
-      const ChildrenWithID = React.memo(function ChildrenWithID({parentID}) {
-        return (
-          <React.Suspense fallback="Loading 2...">
-            <ChildWithID parentID={parentID} />
-          </React.Suspense>
-        );
-      });
-
-      function App() {
-        const id = useOpaqueIdentifier();
-        const [show, setShow] = useState(false);
-        _setShow = setShow;
-        return (
-          <div>
-            <Children />
-            <ChildrenWithID parentID={id} />
-            {show && (
-              <span aria-labelledby={id} ref={setShowRef}>
-                {'Child Three'}
-              </span>
-            )}
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      expect(Scheduler).toHaveYielded([
-        'Child One',
-        'Child Two',
-        'Child with ID',
-      ]);
-      expect(container.textContent).toEqual('Child OneChild TwoChild with ID');
-
-      const serverId = container
-        .getElementsByTagName('span')[2]
-        .getAttribute('id');
-      expect(serverId).not.toBeNull();
-
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App show={false} />);
-      expect(Scheduler).toHaveYielded([]);
-
-      //Hydrate just child one before updating state
-      expect(Scheduler).toFlushAndYieldThrough(['Child One']);
-      expect(child1Ref.current).toBe(null);
-      expect(Scheduler).toHaveYielded([]);
-
-      act(() => {
-        _setShow(true);
-
-        // State update should trigger the ID to update, which changes the props
-        // of ChildWithID. This should cause ChildWithID to hydrate before Children
-
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Child with ID',
-          // Fallbacks are immediately committed in TestUtils version
-          // of act
-          // 'Child with ID',
-          // 'Child with ID',
-          'Child One',
-          'Child Two',
-        ]);
-
-        expect(child1Ref.current).toBe(null);
-        expect(childWithIDRef.current).toEqual(
-          container.getElementsByTagName('span')[2],
-        );
-
-        expect(setShowRef.current).toEqual(
-          container.getElementsByTagName('span')[3],
-        );
-
-        expect(childWithIDRef.current.getAttribute('id')).toEqual(
-          setShowRef.current.getAttribute('aria-labelledby'),
-        );
-        expect(childWithIDRef.current.getAttribute('id')).not.toEqual(serverId);
-      });
-
-      // Children hydrates after ChildWithID
-      expect(child1Ref.current).toBe(container.getElementsByTagName('span')[0]);
-
-      Scheduler.unstable_flushAll();
-
-      expect(Scheduler).toHaveYielded([]);
-    });
-
-    it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
-      let suspend = true;
-      let resolve;
-      const promise = new Promise(resolvePromise => (resolve = resolvePromise));
-
-      function Child({text}) {
-        if (suspend) {
-          throw promise;
-        } else {
-          return text;
-        }
-      }
-
-      function RenderedChild() {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Child did commit');
-        });
-        return null;
-      }
-
-      function App() {
-        const id = useOpaqueIdentifier();
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Did commit');
-        });
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            <RenderedChild />
-            <React.Suspense fallback={'Fallback'}>
-              <div id={id}>
-                <Child text="Child Two" />
-              </div>
-            </React.Suspense>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      suspend = true;
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      await act(async () => {
-        root.render(<App />);
-      });
-      jest.runAllTimers();
-      expect(Scheduler).toHaveYielded(['Child did commit', 'Did commit']);
-      expect(Scheduler).toFlushAndYield([]);
-
-      const serverId = container.children[0].children[0].getAttribute('id');
-      expect(container.children[0].children.length).toEqual(1);
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-
-      await act(async () => {
-        suspend = false;
-        resolve();
-        await promise;
-      });
-
-      expect(Scheduler).toHaveYielded(['Child did commit', 'Did commit']);
-      expect(Scheduler).toFlushAndYield([]);
-      jest.runAllTimers();
-
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(container.children[0].children[0].getAttribute('id')).not.toEqual(
-        serverId,
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier warn when there is a hydration error', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={appId} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-          'Warning: Expected server HTML to contain a matching <div> in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier: IDs match when part of the DOM tree is server rendered and part is client rendered', async () => {
-      let suspend = true;
-
-      function Child({text}) {
-        if (suspend) {
-          throw new Promise(() => {});
-        } else {
-          return text;
-        }
-      }
-
-      function RenderedChild() {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Child did commit');
-        });
-        return null;
-      }
-
-      function App() {
-        const id = useOpaqueIdentifier();
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Did commit');
-        });
-        return (
-          <div>
-            <div id={id}>Child One</div>
-            <RenderedChild />
-            <React.Suspense fallback={'Fallback'}>
-              <div id={id}>
-                <Child text="Child Two" />
-              </div>
-            </React.Suspense>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      suspend = false;
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      await act(async () => {
-        root.render(<App />);
-      });
-      jest.runAllTimers();
-      expect(Scheduler).toHaveYielded([
-        'Child did commit',
-        'Did commit',
-        'Child did commit',
-        'Did commit',
-      ]);
-      expect(Scheduler).toFlushAndYield([]);
-
-      expect(container.children[0].children.length).toEqual(2);
-      expect(container.children[0].children[0].getAttribute('id')).toEqual(
-        container.children[0].children[1].getAttribute('id'),
-      );
-      expect(
-        container.children[0].children[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier warn when there is a hydration error', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={appId} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-          'Warning: Expected server HTML to contain a matching <div> in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns when there is a hydration error and we are using ID as a string', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // This is the wrong HTML string
-      container.innerHTML = '<span></span>';
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns if you try to use the result as a string in a child component', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <Child appId={id} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns if you try to use the result as a string', async () => {
-      function App() {
-        const id = useOpaqueIdentifier();
-        return <div aria-labelledby={String(id)} />;
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      expect(() => Scheduler.unstable_flushAll()).toErrorDev(
-        [
-          'Warning: The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. Do not read the value directly.',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    });
-
-    it('useOpaqueIdentifier warns if you try to use the result as a string in a child component wrapped in a Suspense', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={String(appId)} />;
-      }
-      function App() {
-        const id = useOpaqueIdentifier();
-        return (
-          <React.Suspense fallback={null}>
-            <Child appId={id} />
-          </React.Suspense>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-
-      if (gate(flags => flags.deferRenderPhaseUpdateToNextBatch)) {
-        expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      } else {
-        // This error isn't surfaced to the user; only the warning is.
-        // The error is just the mechanism that restarts the render.
-        expect(() =>
-          expect(() => Scheduler.unstable_flushAll()).toThrow(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-              'Do not read the value directly.',
-          ),
-        ).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      }
-    });
-
-    it('useOpaqueIdentifier warns if you try to add the result as a number in a child component wrapped in a Suspense', async () => {
-      function Child({appId}) {
-        return <div aria-labelledby={+appId} />;
-      }
-      function App() {
-        const [show] = useState(false);
-        const id = useOpaqueIdentifier();
-        return (
-          <React.Suspense fallback={null}>
-            {show && <div id={id} />}
-            <Child appId={id} />
-          </React.Suspense>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-
-      if (gate(flags => flags.deferRenderPhaseUpdateToNextBatch)) {
-        expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      } else {
-        // This error isn't surfaced to the user; only the warning is.
-        // The error is just the mechanism that restarts the render.
-        expect(() =>
-          expect(() => Scheduler.unstable_flushAll()).toThrow(
-            'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-              'Do not read the value directly.',
-          ),
-        ).toErrorDev([
-          'The object passed back from useOpaqueIdentifier is meant to be passed through to attributes only. ' +
-            'Do not read the value directly.',
-        ]);
-      }
-    });
-
-    it('useOpaqueIdentifier with two opaque identifiers on the same page', () => {
-      let _setShow;
-
-      function App() {
-        const id1 = useOpaqueIdentifier();
-        const id2 = useOpaqueIdentifier();
-        const [show, setShow] = useState(true);
-        _setShow = setShow;
-
-        return (
-          <div>
-            <React.Suspense fallback={null}>
-              {show ? (
-                <span id={id1}>{'Child'}</span>
-              ) : (
-                <span id={id2}>{'Child'}</span>
-              )}
-            </React.Suspense>
-            <span aria-labelledby={id1}>{'test'}</span>
-          </div>
-        );
-      }
-
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      const serverID = container
-        .getElementsByTagName('span')[0]
-        .getAttribute('id');
-      expect(serverID).not.toBeNull();
-      expect(
-        container
-          .getElementsByTagName('span')[1]
-          .getAttribute('aria-labelledby'),
-      ).toEqual(serverID);
-
-      ReactDOM.createRoot(container, {hydrate: true}).render(<App />);
-      jest.runAllTimers();
-      expect(Scheduler).toHaveYielded([]);
-      expect(Scheduler).toFlushAndYield([]);
-
-      act(() => {
-        _setShow(false);
-      });
-
-      expect(
-        container
-          .getElementsByTagName('span')[1]
-          .getAttribute('aria-labelledby'),
-      ).toEqual(serverID);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toEqual(serverID);
-      expect(
-        container.getElementsByTagName('span')[0].getAttribute('id'),
-      ).not.toBeNull();
-    });
-
-    it('useOpaqueIdentifier with multiple ids in nested components', async () => {
-      function DivWithId({id, children}) {
-        return <div id={id}>{children}</div>;
-      }
-
-      let setShowMore;
-      function App() {
-        const outerId = useOpaqueIdentifier();
-        const innerId = useOpaqueIdentifier();
-        const [showMore, _setShowMore] = useState(false);
-        setShowMore = _setShowMore;
-        return showMore ? (
-          <DivWithId id={outerId}>
-            <DivWithId id={innerId} />
-          </DivWithId>
-        ) : null;
-      }
-
-      const container = document.createElement('div');
-      container.innerHTML = ReactDOMServer.renderToString(<App />);
-
-      await act(async () => {
-        ReactDOM.hydrateRoot(container, <App />);
-      });
-
-      // Show additional content that wasn't part of the initial server-
-      // rendered repsonse.
-      await act(async () => {
-        setShowMore(true);
-      });
-      const [div1, div2] = container.getElementsByTagName('div');
-      expect(typeof div1.getAttribute('id')).toBe('string');
-      expect(typeof div2.getAttribute('id')).toBe('string');
-    });
-  });
 });
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 30fed05aed60..ad94f7ccb702 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -21,7 +21,6 @@ import {
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
-import {isOpaqueHydratingObject} from './ReactDOMHostConfig';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -119,13 +118,6 @@ export function getValueForAttribute(
     if (!isAttributeNameSafe(name)) {
       return;
     }
-
-    // If the object is an opaque reference ID, it's expected that
-    // the next prop is different than the server value, so just return
-    // expected
-    if (isOpaqueHydratingObject(expected)) {
-      return expected;
-    }
     if (!node.hasAttribute(name)) {
       return expected === undefined ? undefined : null;
     }
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 2d347639eba4..aa9b0281e2f8 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -68,7 +68,6 @@ 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 {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 
 import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 import {
@@ -775,15 +774,6 @@ export function diffProperties(
         // to update this element.
         updatePayload = [];
       }
-    } else if (
-      typeof nextProp === 'object' &&
-      nextProp !== null &&
-      nextProp.$$typeof === REACT_OPAQUE_ID_TYPE
-    ) {
-      // If we encounter useOpaqueReference's opaque object, this means we are hydrating.
-      // In this case, call the opaque object's toString function which generates a new client
-      // ID so client and server IDs match and throws to rerender.
-      nextProp.toString();
     } else {
       // For any other property we always add it to the queue and then we
       // filter it out using the allowed property list during the commit.
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 8a5417ae4927..64fd789b7a1e 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -59,7 +59,6 @@ import {
 } from '../shared/HTMLNodeType';
 import dangerousStyleValue from '../shared/dangerousStyleValue';
 
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
@@ -124,13 +123,6 @@ export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type RendererInspectionConfig = $ReadOnly<{||}>;
 
-export opaque type OpaqueIDType =
-  | string
-  | {
-      toString: () => string | void,
-      valueOf: () => string | void,
-    };
-
 type SelectionInformation = {|
   focusedElem: null | HTMLElement,
   selectionRange: mixed,
@@ -1089,43 +1081,6 @@ export function getInstanceFromNode(node: HTMLElement): null | Object {
   return getClosestInstanceFromNode(node) || null;
 }
 
-let clientId: number = 0;
-export function makeClientId(): OpaqueIDType {
-  return 'r:' + (clientId++).toString(36);
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  const id = 'r:' + (clientId++).toString(36);
-  return {
-    toString() {
-      warnOnAccessInDEV();
-      return id;
-    },
-    valueOf() {
-      warnOnAccessInDEV();
-      return id;
-    },
-  };
-}
-
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    value.$$typeof === REACT_OPAQUE_ID_TYPE
-  );
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  return {
-    $$typeof: REACT_OPAQUE_ID_TYPE,
-    toString: attemptToReadValue,
-    valueOf: attemptToReadValue,
-  };
-}
-
 export function preparePortalMount(portalInstance: Instance): void {
   listenToAllSupportedEvents(portalInstance);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 2012392004e5..65a10974b019 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -64,9 +64,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
-  opaqueIdentifierPrefix: string,
   nextSuspenseID: number,
-  nextOpaqueID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean, // We allow the legacy renderer to extend this object.
@@ -127,9 +125,7 @@ export function createResponseState(
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
-    opaqueIdentifierPrefix: idPrefix + 'R:',
     nextSuspenseID: 0,
-    nextOpaqueID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
     sentClientRenderFunction: false,
@@ -233,24 +229,6 @@ export function assignSuspenseBoundaryID(
   );
 }
 
-export type OpaqueIDType = string;
-
-export function makeServerID(
-  responseState: null | ResponseState,
-): OpaqueIDType {
-  if (responseState === null) {
-    throw new Error(
-      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-    );
-  }
-
-  // TODO: This is not deterministic since it's created during render.
-  return (
-    responseState.opaqueIdentifierPrefix +
-    (responseState.nextOpaqueID++).toString(36)
-  );
-}
-
 function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 7373e7168176..5b0798b73712 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -34,9 +34,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
-  opaqueIdentifierPrefix: string,
   nextSuspenseID: number,
-  nextOpaqueID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
   sentClientRenderFunction: boolean,
@@ -56,9 +54,7 @@ export function createResponseState(
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,
-    opaqueIdentifierPrefix: responseState.opaqueIdentifierPrefix,
     nextSuspenseID: responseState.nextSuspenseID,
-    nextOpaqueID: responseState.nextOpaqueID,
     sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
     sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
     sentClientRenderFunction: responseState.sentClientRenderFunction,
@@ -77,14 +73,12 @@ export function createRootFormatContext(): FormatContext {
 export type {
   FormatContext,
   SuspenseBoundaryID,
-  OpaqueIDType,
 } from './ReactDOMServerFormatConfig';
 
 export {
   getChildFormatContext,
   UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
   assignSuspenseBoundaryID,
-  makeServerID,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 479a828a46e1..1902dc65690c 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -82,10 +82,6 @@ import {validateProperties as validateInputProperties} from '../shared/ReactDOMN
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
-export type ServerOptions = {
-  identifierPrefix?: string,
-};
-
 // Based on reading the React.Children implementation. TODO: type this somewhere?
 type ReactNode = string | number | ReactElement;
 type FlatReactChildren = Array<null | ReactNode>;
@@ -784,14 +780,7 @@ class ReactDOMServerRenderer {
   contextValueStack: Array<any>;
   contextProviderStack: ?Array<ReactProvider<any>>; // DEV-only
 
-  uniqueID: number;
-  identifierPrefix: string;
-
-  constructor(
-    children: mixed,
-    makeStaticMarkup: boolean,
-    options?: ServerOptions,
-  ) {
+  constructor(children: mixed, makeStaticMarkup: boolean) {
     const flatChildren = flattenTopLevelChildren(children);
 
     const topFrame: Frame = {
@@ -820,10 +809,6 @@ class ReactDOMServerRenderer {
     this.contextStack = [];
     this.contextValueStack = [];
 
-    // useOpaqueIdentifier ID
-    this.uniqueID = 0;
-    this.identifierPrefix = (options && options.identifierPrefix) || '';
-
     if (__DEV__) {
       this.contextProviderStack = [];
     }
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
index 26f2dd00ee0c..2940c47bde46 100644
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ b/packages/react-dom/src/server/ReactPartialRendererHooks.js
@@ -41,8 +41,6 @@ type Hook = {|
   next: Hook | null,
 |};
 
-type OpaqueIDType = string;
-
 let currentlyRenderingComponent: Object | null = null;
 let firstWorkInProgressHook: Hook | null = null;
 let workInProgressHook: Hook | null = null;
@@ -511,15 +509,7 @@ function useTransition(): [boolean, (callback: () => void) => void] {
   return [false, startTransition];
 }
 
-function useOpaqueIdentifier(): OpaqueIDType {
-  return (
-    (currentPartialRenderer.identifierPrefix || '') +
-    'R:' +
-    (currentPartialRenderer.uniqueID++).toString(36)
-  );
-}
-
-function useId(): OpaqueIDType {
+function useId(): string {
   throw new Error('Not implemented.');
 }
 
@@ -552,7 +542,6 @@ export const Dispatcher: DispatcherType = {
   useDebugValue: noop,
   useDeferredValue,
   useTransition,
-  useOpaqueIdentifier,
   useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index c71a9050211c..727b782efd76 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -84,8 +84,6 @@ export type UpdatePayload = Object;
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
-export type OpaqueIDType = void;
-
 export type RendererInspectionConfig = $ReadOnly<{|
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
   getInspectorDataForViewTag?: (tag: number) => Object,
@@ -512,24 +510,6 @@ export function getInstanceFromNode(node: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not yet implemented');
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  throw new Error('Not yet implemented.');
-}
-
-export function makeClientId(): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 769f46e852a2..10c5e37f41bc 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -43,7 +43,6 @@ export type ChildSet = void; // Unused
 
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
-export type OpaqueIDType = void;
 
 export type RendererInspectionConfig = $ReadOnly<{|
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
@@ -499,24 +498,6 @@ export function getInstanceFromNode(node: any) {
   throw new Error('Not yet implemented.');
 }
 
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  throw new Error('Not yet implemented');
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  throw new Error('Not yet implemented.');
-}
-
-export function makeClientId(): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  throw new Error('Not yet implemented');
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 3daa48f420b1..5b12d810bbe0 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -59,14 +59,12 @@ SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
 // Per response,
 export type ResponseState = {
   nextSuspenseID: number,
-  nextOpaqueID: number,
 };
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(): ResponseState {
   return {
     nextSuspenseID: 0,
-    nextOpaqueID: 0,
   };
 }
 
@@ -109,21 +107,6 @@ export function assignSuspenseBoundaryID(
   return responseState.nextSuspenseID++;
 }
 
-export type OpaqueIDType = number;
-
-export function makeServerID(
-  responseState: null | ResponseState,
-): OpaqueIDType {
-  if (responseState === null) {
-    throw new Error(
-      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
-    );
-  }
-
-  // TODO: This is not deterministic since it's created during render.
-  return responseState.nextOpaqueID++;
-}
-
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
 export function pushTextInstance(
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index efcf727eac89..d217b16e50bf 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -53,8 +53,6 @@ type Destination = {
 
 const POP = Buffer.from('/', 'utf8');
 
-let opaqueID = 0;
-
 const ReactNoopServer = ReactFizzServer({
   scheduleWork(callback: () => void) {
     callback();
@@ -88,10 +86,6 @@ const ReactNoopServer = ReactFizzServer({
     return {state: 'pending', children: []};
   },
 
-  makeServerID(): number {
-    return opaqueID++;
-  },
-
   getChildFormatContext(): null {
     return null;
   },
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index a1d7009a85a4..1238d673725a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -17,7 +17,6 @@ import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {Flags} from './ReactFiberFlags';
 
@@ -95,18 +94,12 @@ import {
   checkIfWorkInProgressReceivedUpdate,
 } from './ReactFiberBeginWork.new';
 import {getIsHydrating} from './ReactFiberHydrationContext.new';
-import {
-  makeClientId,
-  makeClientIdInDEV,
-  makeOpaqueHydratingObject,
-} from './ReactFiberHostConfig';
 import {
   getWorkInProgressVersion,
   markSourceAsDirty,
   setWorkInProgressVersion,
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource.new';
-import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {createCache, CacheContext} from './ReactFiberCacheComponent.new';
@@ -139,10 +132,8 @@ export type UpdateQueue<S, A> = {|
 |};
 
 let didWarnAboutMismatchedHooksForComponent;
-let didWarnAboutUseOpaqueIdentifier;
 let didWarnUncachedGetSnapshot;
 if (__DEV__) {
-  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -2045,94 +2036,6 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
   }
 }
 
-function warnOnOpaqueIdentifierAccessInDEV(fiber) {
-  if (__DEV__) {
-    // TODO: Should warn in effects and callbacks, too
-    const name = getComponentNameFromFiber(fiber) || 'Unknown';
-    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
-      console.error(
-        'The object passed back from useOpaqueIdentifier is meant to be ' +
-          'passed through to attributes only. Do not read the ' +
-          'value directly.',
-      );
-      didWarnAboutUseOpaqueIdentifier[name] = true;
-    }
-  }
-}
-
-function mountOpaqueIdentifier(): OpaqueIDType | void {
-  const makeId = __DEV__
-    ? makeClientIdInDEV.bind(
-        null,
-        warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),
-      )
-    : makeClientId;
-
-  if (getIsHydrating()) {
-    let didUpgrade = false;
-    const fiber = currentlyRenderingFiber;
-    const readValue = () => {
-      if (!didUpgrade) {
-        // Only upgrade once. This works even inside the render phase because
-        // the update is added to a shared queue, which outlasts the
-        // in-progress render.
-        didUpgrade = true;
-        if (__DEV__) {
-          isUpdatingOpaqueValueInRenderPhase = true;
-          setId(makeId());
-          isUpdatingOpaqueValueInRenderPhase = false;
-          warnOnOpaqueIdentifierAccessInDEV(fiber);
-        } else {
-          setId(makeId());
-        }
-      }
-
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be ' +
-          'passed through to attributes only. Do not read the value directly.',
-      );
-    };
-    const id = makeOpaqueHydratingObject(readValue);
-
-    const setId = mountState(id)[1];
-
-    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
-      ) {
-        currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
-      } else {
-        currentlyRenderingFiber.flags |= PassiveEffect;
-      }
-      pushEffect(
-        HookHasEffect | HookPassive,
-        () => {
-          setId(makeId());
-        },
-        undefined,
-        null,
-      );
-    }
-    return id;
-  } else {
-    const id = makeId();
-    mountState(id);
-    return id;
-  }
-}
-
-function updateOpaqueIdentifier(): OpaqueIDType | void {
-  const id = updateState(undefined)[0];
-  return id;
-}
-
-function rerenderOpaqueIdentifier(): OpaqueIDType | void {
-  const id = rerenderState(undefined)[0];
-  return id;
-}
-
 function mountId(): string {
   const hook = mountWorkInProgressHook();
 
@@ -2481,7 +2384,6 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
-  useOpaqueIdentifier: throwInvalidHookError,
   useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2510,7 +2412,6 @@ const HooksDispatcherOnMount: Dispatcher = {
   useTransition: mountTransition,
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: mountOpaqueIdentifier,
   useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2539,7 +2440,6 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useTransition: updateTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
-  useOpaqueIdentifier: updateOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2568,7 +2468,6 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: rerenderOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2736,11 +2635,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       mountHookTypesDev();
@@ -2883,11 +2777,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3030,11 +2919,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3178,11 +3062,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3341,12 +3220,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3506,12 +3379,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3672,12 +3539,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 167698271dba..3b0b87cb1ab7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -17,7 +17,6 @@ import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
-import type {OpaqueIDType} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {Flags} from './ReactFiberFlags';
 
@@ -95,18 +94,12 @@ import {
   checkIfWorkInProgressReceivedUpdate,
 } from './ReactFiberBeginWork.old';
 import {getIsHydrating} from './ReactFiberHydrationContext.old';
-import {
-  makeClientId,
-  makeClientIdInDEV,
-  makeOpaqueHydratingObject,
-} from './ReactFiberHostConfig';
 import {
   getWorkInProgressVersion,
   markSourceAsDirty,
   setWorkInProgressVersion,
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource.old';
-import {getIsRendering} from './ReactCurrentFiber';
 import {logStateUpdateScheduled} from './DebugTracing';
 import {markStateUpdateScheduled} from './SchedulingProfiler';
 import {createCache, CacheContext} from './ReactFiberCacheComponent.old';
@@ -139,10 +132,8 @@ export type UpdateQueue<S, A> = {|
 |};
 
 let didWarnAboutMismatchedHooksForComponent;
-let didWarnAboutUseOpaqueIdentifier;
 let didWarnUncachedGetSnapshot;
 if (__DEV__) {
-  didWarnAboutUseOpaqueIdentifier = {};
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
@@ -2045,94 +2036,6 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
   }
 }
 
-function warnOnOpaqueIdentifierAccessInDEV(fiber) {
-  if (__DEV__) {
-    // TODO: Should warn in effects and callbacks, too
-    const name = getComponentNameFromFiber(fiber) || 'Unknown';
-    if (getIsRendering() && !didWarnAboutUseOpaqueIdentifier[name]) {
-      console.error(
-        'The object passed back from useOpaqueIdentifier is meant to be ' +
-          'passed through to attributes only. Do not read the ' +
-          'value directly.',
-      );
-      didWarnAboutUseOpaqueIdentifier[name] = true;
-    }
-  }
-}
-
-function mountOpaqueIdentifier(): OpaqueIDType | void {
-  const makeId = __DEV__
-    ? makeClientIdInDEV.bind(
-        null,
-        warnOnOpaqueIdentifierAccessInDEV.bind(null, currentlyRenderingFiber),
-      )
-    : makeClientId;
-
-  if (getIsHydrating()) {
-    let didUpgrade = false;
-    const fiber = currentlyRenderingFiber;
-    const readValue = () => {
-      if (!didUpgrade) {
-        // Only upgrade once. This works even inside the render phase because
-        // the update is added to a shared queue, which outlasts the
-        // in-progress render.
-        didUpgrade = true;
-        if (__DEV__) {
-          isUpdatingOpaqueValueInRenderPhase = true;
-          setId(makeId());
-          isUpdatingOpaqueValueInRenderPhase = false;
-          warnOnOpaqueIdentifierAccessInDEV(fiber);
-        } else {
-          setId(makeId());
-        }
-      }
-
-      throw new Error(
-        'The object passed back from useOpaqueIdentifier is meant to be ' +
-          'passed through to attributes only. Do not read the value directly.',
-      );
-    };
-    const id = makeOpaqueHydratingObject(readValue);
-
-    const setId = mountState(id)[1];
-
-    if ((currentlyRenderingFiber.mode & ConcurrentMode) === NoMode) {
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (currentlyRenderingFiber.mode & StrictEffectsMode) === NoMode
-      ) {
-        currentlyRenderingFiber.flags |= MountPassiveDevEffect | PassiveEffect;
-      } else {
-        currentlyRenderingFiber.flags |= PassiveEffect;
-      }
-      pushEffect(
-        HookHasEffect | HookPassive,
-        () => {
-          setId(makeId());
-        },
-        undefined,
-        null,
-      );
-    }
-    return id;
-  } else {
-    const id = makeId();
-    mountState(id);
-    return id;
-  }
-}
-
-function updateOpaqueIdentifier(): OpaqueIDType | void {
-  const id = updateState(undefined)[0];
-  return id;
-}
-
-function rerenderOpaqueIdentifier(): OpaqueIDType | void {
-  const id = rerenderState(undefined)[0];
-  return id;
-}
-
 function mountId(): string {
   const hook = mountWorkInProgressHook();
 
@@ -2481,7 +2384,6 @@ export const ContextOnlyDispatcher: Dispatcher = {
   useTransition: throwInvalidHookError,
   useMutableSource: throwInvalidHookError,
   useSyncExternalStore: throwInvalidHookError,
-  useOpaqueIdentifier: throwInvalidHookError,
   useId: throwInvalidHookError,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2510,7 +2412,6 @@ const HooksDispatcherOnMount: Dispatcher = {
   useTransition: mountTransition,
   useMutableSource: mountMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: mountOpaqueIdentifier,
   useId: mountId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2539,7 +2440,6 @@ const HooksDispatcherOnUpdate: Dispatcher = {
   useTransition: updateTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: updateSyncExternalStore,
-  useOpaqueIdentifier: updateOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2568,7 +2468,6 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
   useSyncExternalStore: mountSyncExternalStore,
-  useOpaqueIdentifier: rerenderOpaqueIdentifier,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
@@ -2736,11 +2635,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       mountHookTypesDev();
@@ -2883,11 +2777,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3030,11 +2919,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3178,11 +3062,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       updateHookTypesDev();
@@ -3341,12 +3220,6 @@ if (__DEV__) {
       mountHookTypesDev();
       return mountSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      mountHookTypesDev();
-      return mountOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3506,12 +3379,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return updateOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
@@ -3672,12 +3539,6 @@ if (__DEV__) {
       updateHookTypesDev();
       return updateSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
     },
-    useOpaqueIdentifier(): OpaqueIDType | void {
-      currentHookNameInDev = 'useOpaqueIdentifier';
-      warnInvalidHookAccess();
-      updateHookTypesDev();
-      return rerenderOpaqueIdentifier();
-    },
     useId(): string {
       currentHookNameInDev = 'useId';
       warnInvalidHookAccess();
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e35e5515bb0b..71bf8175105d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -474,8 +474,7 @@ export function scheduleUpdateOnFiber(
     // 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
-    // and useOpaqueIdentifier.
+    // an implementation detail, like selective hydration.
     warnAboutRenderPhaseUpdatesInDEV(fiber);
 
     // Track lanes that were updated during the render phase
@@ -898,12 +897,10 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
       exitStatus === RootErrored &&
       workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
     ) {
-      // There was a render phase update during this render. This was likely a
-      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
-      // again. This time, the component will use a client ID and will proceed
-      // without throwing. If multiple IDs upgrade as a result of the same
-      // update, we will have to do multiple render passes. To protect against
-      // an inifinite loop, eventually we'll give up.
+      // There was a render phase update during this render. Some internal React
+      // implementation details may use this as a trick to schedule another
+      // render pass. To protect against an inifinite loop, eventually
+      // we'll give up.
       continue;
     }
     break;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index cde46adb01ab..8be4630dc079 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -474,8 +474,7 @@ export function scheduleUpdateOnFiber(
     // 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
-    // and useOpaqueIdentifier.
+    // an implementation detail, like selective hydration.
     warnAboutRenderPhaseUpdatesInDEV(fiber);
 
     // Track lanes that were updated during the render phase
@@ -898,12 +897,10 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
       exitStatus === RootErrored &&
       workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
     ) {
-      // There was a render phase update during this render. This was likely a
-      // useOpaqueIdentifier hook upgrading itself to a client ID. Try rendering
-      // again. This time, the component will use a client ID and will proceed
-      // without throwing. If multiple IDs upgrade as a result of the same
-      // update, we will have to do multiple render passes. To protect against
-      // an inifinite loop, eventually we'll give up.
+      // There was a render phase update during this render. Some internal React
+      // implementation details may use this as a trick to schedule another
+      // render pass. To protect against an inifinite loop, eventually
+      // we'll give up.
       continue;
     }
     break;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 9dac4f40aad5..db964103836d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -43,7 +43,6 @@ export type HookType =
   | 'useTransition'
   | 'useMutableSource'
   | 'useSyncExternalStore'
-  | 'useOpaqueIdentifier'
   | 'useId'
   | 'useCacheRefresh';
 
@@ -317,7 +316,6 @@ export type Dispatcher = {|
     getSnapshot: () => T,
     getServerSnapshot?: () => T,
   ): T,
-  useOpaqueIdentifier(): any,
   useId(): string,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index cc842bd16d22..55ce08b45450 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1916,14 +1916,14 @@ describe('ReactIncrementalErrorHandling', () => {
   });
 
   it("does not infinite loop if there's a render phase update in the same render as an error", async () => {
-    // useOpaqueIdentifier uses an render phase update as an implementation
-    // detail. When an error is accompanied by a render phase update, we assume
-    // that it comes from useOpaqueIdentifier, 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.
+    // 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');
 
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 29d4fd7e7989..6535d8d3fdec 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -38,7 +38,6 @@ export opaque type ChildSet = mixed; // eslint-disable-line no-undef
 export opaque type TimeoutHandle = mixed; // eslint-disable-line no-undef
 export opaque type NoTimeout = mixed; // eslint-disable-line no-undef
 export opaque type RendererInspectionConfig = mixed; // eslint-disable-line no-undef
-export opaque type OpaqueIDType = mixed;
 export type EventResponder = any;
 
 export const getPublicInstance = $$$hostConfig.getPublicInstance;
@@ -62,11 +61,6 @@ export const supportsMutation = $$$hostConfig.supportsMutation;
 export const supportsPersistence = $$$hostConfig.supportsPersistence;
 export const supportsHydration = $$$hostConfig.supportsHydration;
 export const getInstanceFromNode = $$$hostConfig.getInstanceFromNode;
-export const isOpaqueHydratingObject = $$$hostConfig.isOpaqueHydratingObject;
-export const makeOpaqueHydratingObject =
-  $$$hostConfig.makeOpaqueHydratingObject;
-export const makeClientId = $$$hostConfig.makeClientId;
-export const makeClientIdInDEV = $$$hostConfig.makeClientIdInDEV;
 export const beforeActiveInstanceBlur = $$$hostConfig.beforeActiveInstanceBlur;
 export const afterActiveInstanceBlur = $$$hostConfig.afterActiveInstanceBlur;
 export const preparePortalMount = $$$hostConfig.preparePortalMount;
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index bf1a2d56e0f9..7b31e6b37ed9 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -16,14 +16,12 @@ import type {
   ReactContext,
 } from 'shared/ReactTypes';
 
-import type {ResponseState, OpaqueIDType} from './ReactServerFormatConfig';
+import type {ResponseState} from './ReactServerFormatConfig';
 import type {Task} from './ReactFizzServer';
 
 import {readContext as readContextImpl} from './ReactFizzNewContext';
 import {getTreeId} from './ReactFizzTreeContext';
 
-import {makeServerID} from './ReactServerFormatConfig';
-
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -509,10 +507,6 @@ function useTransition(): [boolean, (callback: () => void) => void] {
   return [false, unsupportedStartTransition];
 }
 
-function useOpaqueIdentifier(): OpaqueIDType {
-  return makeServerID(currentResponseState);
-}
-
 function useId(): string {
   const task: Task = (currentlyRenderingTask: any);
   const treeId = getTreeId(task.treeContext);
@@ -559,7 +553,6 @@ export const Dispatcher: DispatcherType = {
   useDebugValue: noop,
   useDeferredValue,
   useTransition,
-  useOpaqueIdentifier,
   useId,
   // Subscriptions are not setup in a server environment.
   useMutableSource,
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index bba34065cc26..418fbb8241a6 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -845,7 +845,6 @@ const Dispatcher: DispatcherType = {
   useLayoutEffect: (unsupportedHook: any),
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
-  useOpaqueIdentifier: (unsupportedHook: any),
   useId: (unsupportedHook: any),
   useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 8cfe59ce1628..f246ddab8b5b 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -28,7 +28,6 @@ export opaque type Destination = mixed; // eslint-disable-line no-undef
 export opaque type ResponseState = mixed;
 export opaque type FormatContext = mixed;
 export opaque type SuspenseBoundaryID = mixed;
-export opaque type OpaqueIDType = mixed;
 
 export const isPrimaryRenderer = false;
 
@@ -36,7 +35,6 @@ export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
 export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
   $$$hostConfig.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
 export const assignSuspenseBoundaryID = $$$hostConfig.assignSuspenseBoundaryID;
-export const makeServerID = $$$hostConfig.makeServerID;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index 731124ea5159..d75f1f7c9b45 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -42,7 +42,6 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useDebugValue: unsupported,
     useDeferredValue: unsupported,
     useTransition: unsupported,
-    useOpaqueIdentifier: unsupported,
     useId: unsupported,
     useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 6cdadabe281a..503b08efaf20 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
 import isArray from 'shared/isArray';
 import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
@@ -40,12 +39,6 @@ export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type EventResponder = any;
-export opaque type OpaqueIDType =
-  | string
-  | {
-      toString: () => string | void,
-      valueOf: () => string | void,
-    };
 
 export type RendererInspectionConfig = $ReadOnly<{||}>;
 
@@ -298,43 +291,6 @@ export function getInstanceFromNode(mockNode: Object) {
   return null;
 }
 
-let clientId: number = 0;
-export function makeClientId(): OpaqueIDType {
-  return 'c_' + (clientId++).toString(36);
-}
-
-export function makeClientIdInDEV(warnOnAccessInDEV: () => void): OpaqueIDType {
-  const id = 'c_' + (clientId++).toString(36);
-  return {
-    toString() {
-      warnOnAccessInDEV();
-      return id;
-    },
-    valueOf() {
-      warnOnAccessInDEV();
-      return id;
-    },
-  };
-}
-
-export function isOpaqueHydratingObject(value: mixed): boolean {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    value.$$typeof === REACT_OPAQUE_ID_TYPE
-  );
-}
-
-export function makeOpaqueHydratingObject(
-  attemptToReadValue: () => void,
-): OpaqueIDType {
-  return {
-    $$typeof: REACT_OPAQUE_ID_TYPE,
-    toString: attemptToReadValue,
-    valueOf: attemptToReadValue,
-  };
-}
-
 export function beforeActiveInstanceBlur(internalInstanceHandle: Object) {
   // noop
 }
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index a2e678c580b2..70bbc6112a56 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -40,7 +40,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 20c22828583f..bc3f4883bdb3 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -36,7 +36,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.js b/packages/react/index.js
index 3108c06c5528..a27507524e50 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -61,7 +61,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index eef99fdabf2a..922acfc15810 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -39,7 +39,6 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 517dc3f8fb2d..eb9673efd16a 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -29,7 +29,6 @@ export {
   lazy,
   memo,
   startTransition,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 868538c83f59..5fe5b4d96b60 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -52,7 +52,6 @@ import {
   useState,
   useTransition,
   useDeferredValue,
-  useOpaqueIdentifier,
   useId,
   useCacheRefresh,
 } from './ReactHooks';
@@ -127,7 +126,6 @@ export {
   REACT_CACHE_TYPE as unstable_Cache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
-  useOpaqueIdentifier as unstable_useOpaqueIdentifier,
   useId as unstable_useId,
   act,
 };
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 1f987de1671b..12a5350083f3 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -14,7 +14,6 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
 } from 'shared/ReactTypes';
-import type {OpaqueIDType} from 'react-reconciler/src/ReactFiberHostConfig';
 
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 
@@ -169,11 +168,6 @@ export function useDeferredValue<T>(value: T): T {
   return dispatcher.useDeferredValue(value);
 }
 
-export function useOpaqueIdentifier(): OpaqueIDType | void {
-  const dispatcher = resolveDispatcher();
-  return dispatcher.useOpaqueIdentifier();
-}
-
 export function useId(): string {
   const dispatcher = resolveDispatcher();
   return dispatcher.useId();
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index d556400750b4..7a9352f30199 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -27,7 +27,6 @@ export {
   unstable_DebugTracingMode,
   unstable_getCacheSignal,
   unstable_getCacheForType,
-  unstable_useOpaqueIdentifier,
   unstable_useId,
   useCallback,
   useContext,
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
index 9db9e7145ad4..305572f8462c 100644
--- a/packages/shared/CheckStringCoercion.js
+++ b/packages/shared/CheckStringCoercion.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import {REACT_OPAQUE_ID_TYPE} from 'shared/ReactSymbols';
-
 /*
  * The `'' + value` pattern (used in in perf-sensitive code) throws for Symbol
  * and Temporal.* types. See https://github.com/facebook/react/pull/22064.
@@ -35,16 +33,6 @@ function typeName(value: mixed): string {
 // $FlowFixMe only called in DEV, so void return is not possible.
 function willCoercionThrow(value: mixed): boolean {
   if (__DEV__) {
-    if (
-      value !== null &&
-      typeof value === 'object' &&
-      value.$$typeof === REACT_OPAQUE_ID_TYPE
-    ) {
-      // OpaqueID type is expected to throw, so React will handle it. Not sure if
-      // it's expected that string coercion will throw, but we'll assume it's OK.
-      // See https://github.com/facebook/react/issues/20127.
-      return;
-    }
     try {
       testStringCoercion(value);
       return false;
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index c2fcba632441..a50a06b15016 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -26,7 +26,6 @@ export let REACT_SUSPENSE_LIST_TYPE = 0xead8;
 export let REACT_MEMO_TYPE = 0xead3;
 export let REACT_LAZY_TYPE = 0xead4;
 export let REACT_SCOPE_TYPE = 0xead7;
-export let REACT_OPAQUE_ID_TYPE = 0xeae0;
 export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
 export let REACT_OFFSCREEN_TYPE = 0xeae2;
 export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
@@ -47,7 +46,6 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_MEMO_TYPE = symbolFor('react.memo');
   REACT_LAZY_TYPE = symbolFor('react.lazy');
   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');
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index aab5d62476cc..93391eb309d4 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -342,7 +342,7 @@
   "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.",
+  "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.",

From 5cccacd131242bdea2c2fe4b33fac50d2e3132b4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 1 Nov 2021 18:26:42 -0400
Subject: [PATCH 0995/1603] Upgrade useId to alpha channel (#22674)

---
 .../src/__tests__/ReactHooksInspectionIntegration-test.js       | 2 +-
 packages/react-dom/src/__tests__/ReactDOMUseId-test.js          | 2 +-
 packages/react/index.classic.fb.js                              | 2 +-
 packages/react/index.experimental.js                            | 2 +-
 packages/react/index.js                                         | 2 +-
 packages/react/index.modern.fb.js                               | 2 +-
 packages/react/index.stable.js                                  | 2 +-
 packages/react/src/React.js                                     | 2 +-
 packages/react/unstable-shared-subset.experimental.js           | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 559a0bf75e52..5b36039ecc5d 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -600,7 +600,7 @@ describe('ReactHooksInspectionIntegration', () => {
 
   it('should support useId hook', () => {
     function Foo(props) {
-      const id = React.unstable_useId();
+      const id = React.useId();
       const [state] = React.useState('hello');
       return <div id={id}>{state}</div>;
     }
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index b61e79fa670d..09ccdc86d14e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -34,7 +34,7 @@ describe('useId', () => {
     ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
     Suspense = React.Suspense;
-    useId = React.unstable_useId;
+    useId = React.useId;
 
     // Test Environment
     const jsdom = new JSDOM(
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 70bbc6112a56..33c770f00fed 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -40,7 +40,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index bc3f4883bdb3..d4dc33a4db01 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -36,7 +36,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.js b/packages/react/index.js
index a27507524e50..6a249ba432c7 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -61,7 +61,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 922acfc15810..5b0d75e21460 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -39,7 +39,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index eb9673efd16a..234ec8336a9e 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -29,7 +29,7 @@ export {
   lazy,
   memo,
   startTransition,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 5fe5b4d96b60..891269ee3265 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -126,6 +126,6 @@ export {
   REACT_CACHE_TYPE as unstable_Cache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
-  useId as unstable_useId,
+  useId,
   act,
 };
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/unstable-shared-subset.experimental.js
index 7a9352f30199..a24e302e49c4 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/unstable-shared-subset.experimental.js
@@ -27,7 +27,7 @@ export {
   unstable_DebugTracingMode,
   unstable_getCacheSignal,
   unstable_getCacheForType,
-  unstable_useId,
+  useId,
   useCallback,
   useContext,
   useDebugValue,

From 3fcd81dd1c3cd1413b72ae2919bc8312787f8f58 Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Tue, 2 Nov 2021 20:00:37 +0530
Subject: [PATCH 0996/1603] Improved workers filenames in devtools-inline
 (#22676)

---
 packages/react-devtools-inline/webpack.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index bc38a8792e4c..7c2325bf70f4 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -95,6 +95,7 @@ module.exports = {
             loader: 'workerize-loader',
             options: {
               inline: true,
+              name: '[name]',
             },
           },
           {

From 9fb3442250cf198782a08024195fcc5402479160 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 2 Nov 2021 11:02:45 -0400
Subject: [PATCH 0997/1603] Fix DevTools advanced tooltip display conditional
 check (#22669)

---
 .../src/devtools/views/Profiler/SnapshotCommitList.js       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 4fda4177706a..2b837f28f649 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -217,7 +217,11 @@ function List({
 
     // Only some React versions include commit durations.
     // Show a richer tooltip only for builds that have that info.
-    if (effectDuration !== null || passiveEffectDuration !== null) {
+    if (
+      effectDuration !== null ||
+      passiveEffectDuration !== null ||
+      priorityLevel !== null
+    ) {
       tooltipLabel = (
         <ul className={styles.TooltipList}>
           {priorityLevel !== null && (

From 00ced1e2b7610543a519329a76ad0bfd12cd1c32 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 2 Nov 2021 20:59:17 -0400
Subject: [PATCH 0998/1603] Fix useId in strict mode (#22681)

* Fix: useId in strict mode

In strict mode, `renderWithHooks` is called twice to flush out
side effects.

Modying the tree context (`pushTreeId` and `pushTreeFork`) is effectful,
so before this fix, the tree context was allocating two slots for a
materialized id instead of one.

To address, I lifted those calls outside of `renderWithHooks`. This
is how I had originally structured it, and it's how Fizz is structured,
too. The other solution would be to reset the stack in between the calls
but that's also a bit weird because we usually only ever reset the
stack during unwind or complete.

* Add test for render phase updates

Noticed this while fixing the previous bug
---
 .../src/__tests__/ReactDOMUseId-test.js       | 57 +++++++++++++++++++
 .../src/ReactFiberBeginWork.new.js            | 31 +++++++++-
 .../src/ReactFiberBeginWork.old.js            | 31 +++++++++-
 .../src/ReactFiberHooks.new.js                | 30 +++++-----
 .../src/ReactFiberHooks.old.js                | 30 +++++-----
 .../src/ReactFiberTreeContext.new.js          | 14 +++++
 .../src/ReactFiberTreeContext.old.js          | 14 +++++
 packages/react-server/src/ReactFizzHooks.js   |  1 +
 8 files changed, 172 insertions(+), 36 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index 09ccdc86d14e..dd7bbaa8b41f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -16,6 +16,7 @@ let ReactDOMFizzServer;
 let Stream;
 let Suspense;
 let useId;
+let useState;
 let document;
 let writable;
 let container;
@@ -35,6 +36,7 @@ describe('useId', () => {
     Stream = require('stream');
     Suspense = React.Suspense;
     useId = React.useId;
+    useState = React.useState;
 
     // Test Environment
     const jsdom = new JSDOM(
@@ -198,6 +200,35 @@ describe('useId', () => {
     `);
   });
 
+  test('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 () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        <div
+          id="0"
+        />
+      </div>
+    `);
+  });
+
   test('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
@@ -313,6 +344,32 @@ describe('useId', () => {
     `);
   });
 
+  test('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 () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(container).toMatchInlineSnapshot(`
+      <div
+        id="container"
+      >
+        R:0
+        <!-- -->
+      </div>
+    `);
+  });
+
   test('basic incremental hydration', async () => {
     function App() {
       return (
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 653ee9e1b4ea..d66bba0dc2ee 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -174,7 +174,11 @@ import {
   prepareToReadContext,
   scheduleWorkOnParentPath,
 } from './ReactFiberNewContext.new';
-import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.new';
+import {
+  renderWithHooks,
+  checkDidRenderIdHook,
+  bailoutHooks,
+} from './ReactFiberHooks.new';
 import {stopProfilerTimerIfRunning} from './ReactProfilerTimer.new';
 import {
   getMaskedContext,
@@ -240,6 +244,7 @@ import {
   getForksAtLevel,
   isForkedChild,
   pushTreeId,
+  pushMaterializedTreeId,
 } from './ReactFiberTreeContext.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -365,6 +370,7 @@ function updateForwardRef(
 
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -380,6 +386,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -394,6 +401,7 @@ function updateForwardRef(
           ref,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -408,6 +416,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -418,6 +427,10 @@ function updateForwardRef(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -970,6 +983,7 @@ function updateFunctionComponent(
   }
 
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -985,6 +999,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -999,6 +1014,7 @@ function updateFunctionComponent(
           context,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -1013,6 +1029,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1023,6 +1040,10 @@ function updateFunctionComponent(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -1593,6 +1614,7 @@ function mountIndeterminateComponent(
 
   prepareToReadContext(workInProgress, renderLanes);
   let value;
+  let hasId;
 
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -1629,6 +1651,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     setIsRendering(false);
   } else {
     value = renderWithHooks(
@@ -1639,6 +1662,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1758,12 +1782,17 @@ function mountIndeterminateComponent(
             context,
             renderLanes,
           );
+          hasId = checkDidRenderIdHook();
         } finally {
           setIsStrictModeForDevtools(false);
         }
       }
     }
 
+    if (getIsHydrating() && hasId) {
+      pushMaterializedTreeId(workInProgress);
+    }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 9833ef481af7..62d51046b3c4 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -174,7 +174,11 @@ import {
   prepareToReadContext,
   scheduleWorkOnParentPath,
 } from './ReactFiberNewContext.old';
-import {renderWithHooks, bailoutHooks} from './ReactFiberHooks.old';
+import {
+  renderWithHooks,
+  checkDidRenderIdHook,
+  bailoutHooks,
+} from './ReactFiberHooks.old';
 import {stopProfilerTimerIfRunning} from './ReactProfilerTimer.old';
 import {
   getMaskedContext,
@@ -240,6 +244,7 @@ import {
   getForksAtLevel,
   isForkedChild,
   pushTreeId,
+  pushMaterializedTreeId,
 } from './ReactFiberTreeContext.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -365,6 +370,7 @@ function updateForwardRef(
 
   // The rest is a fork of updateFunctionComponent
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -380,6 +386,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -394,6 +401,7 @@ function updateForwardRef(
           ref,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -408,6 +416,7 @@ function updateForwardRef(
       ref,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -418,6 +427,10 @@ function updateForwardRef(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -970,6 +983,7 @@ function updateFunctionComponent(
   }
 
   let nextChildren;
+  let hasId;
   prepareToReadContext(workInProgress, renderLanes);
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -985,6 +999,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     if (
       debugRenderPhaseSideEffectsForStrictMode &&
       workInProgress.mode & StrictLegacyMode
@@ -999,6 +1014,7 @@ function updateFunctionComponent(
           context,
           renderLanes,
         );
+        hasId = checkDidRenderIdHook();
       } finally {
         setIsStrictModeForDevtools(false);
       }
@@ -1013,6 +1029,7 @@ function updateFunctionComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1023,6 +1040,10 @@ function updateFunctionComponent(
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
 
+  if (getIsHydrating() && hasId) {
+    pushMaterializedTreeId(workInProgress);
+  }
+
   // React DevTools reads this flag.
   workInProgress.flags |= PerformedWork;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -1593,6 +1614,7 @@ function mountIndeterminateComponent(
 
   prepareToReadContext(workInProgress, renderLanes);
   let value;
+  let hasId;
 
   if (enableSchedulingProfiler) {
     markComponentRenderStarted(workInProgress);
@@ -1629,6 +1651,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
     setIsRendering(false);
   } else {
     value = renderWithHooks(
@@ -1639,6 +1662,7 @@ function mountIndeterminateComponent(
       context,
       renderLanes,
     );
+    hasId = checkDidRenderIdHook();
   }
   if (enableSchedulingProfiler) {
     markComponentRenderStopped();
@@ -1758,12 +1782,17 @@ function mountIndeterminateComponent(
             context,
             renderLanes,
           );
+          hasId = checkDidRenderIdHook();
         } finally {
           setIsStrictModeForDevtools(false);
         }
       }
     }
 
+    if (getIsHydrating() && hasId) {
+      pushMaterializedTreeId(workInProgress);
+    }
+
     reconcileChildren(null, workInProgress, value, renderLanes);
     if (__DEV__) {
       validateFunctionComponentInDev(workInProgress, Component);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 1238d673725a..2ea341864642 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -110,7 +110,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.new';
+import {getTreeId} from './ReactFiberTreeContext.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -432,6 +432,7 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
+      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -513,6 +514,8 @@ export function renderWithHooks<Props, SecondArg>(
   }
 
   didScheduleRenderPhaseUpdate = false;
+  // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -541,25 +544,18 @@ export function renderWithHooks<Props, SecondArg>(
       }
     }
   }
-
-  if (localIdCounter !== 0) {
-    localIdCounter = 0;
-    if (getIsHydrating()) {
-      // 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);
-      }
-    }
-  }
-
   return children;
 }
 
+export function checkDidRenderIdHook() {
+  // 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,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 3b0b87cb1ab7..ff6a9f652fb4 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -110,7 +110,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
-import {getTreeId, pushTreeFork, pushTreeId} from './ReactFiberTreeContext.old';
+import {getTreeId} from './ReactFiberTreeContext.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -432,6 +432,7 @@ export function renderWithHooks<Props, SecondArg>(
     let numberOfReRenders: number = 0;
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
+      localIdCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -513,6 +514,8 @@ export function renderWithHooks<Props, SecondArg>(
   }
 
   didScheduleRenderPhaseUpdate = false;
+  // This is reset by checkDidRenderIdHook
+  // localIdCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -541,25 +544,18 @@ export function renderWithHooks<Props, SecondArg>(
       }
     }
   }
-
-  if (localIdCounter !== 0) {
-    localIdCounter = 0;
-    if (getIsHydrating()) {
-      // 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);
-      }
-    }
-  }
-
   return children;
 }
 
+export function checkDidRenderIdHook() {
+  // 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,
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index 0725ba577e64..968e66155d3f 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -201,6 +201,20 @@ export function pushTreeId(
   }
 }
 
+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);
 }
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index a4ba3c3ddb93..82990b22f983 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -201,6 +201,20 @@ export function pushTreeId(
   }
 }
 
+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);
 }
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 7b31e6b37ed9..926a1969bb48 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -199,6 +199,7 @@ export function finishHooks(
     // work-in-progress hooks and applying the additional updates on top. Keep
     // restarting until no more updates are scheduled.
     didScheduleRenderPhaseUpdate = false;
+    localIdCounter = 0;
     numberOfReRenders += 1;
 
     // Start over from the beginning of the list

From 255221c86930e31c144713eb466bf0a00ab8fd7e Mon Sep 17 00:00:00 2001
From: EzzAk <ezz1994@gmail.com>
Date: Wed, 3 Nov 2021 08:27:30 -0700
Subject: [PATCH 0999/1603] [DevTools] Add open in editor for fb (#22649)

Co-authored-by: Brian Vaughn <bvaughn@fb.com>
---
 .../react-devtools-core/webpack.standalone.js |  2 +
 .../webpack.config.js                         |  2 +
 .../react-devtools-inline/webpack.config.js   |  3 ++
 .../react-devtools-shared/src/constants.js    |  3 ++
 .../src/devtools/views/ButtonIcon.js          |  8 ++++
 .../views/Components/InspectedElement.js      | 40 ++++++++++++++++++-
 .../views/Settings/ComponentsSettings.js      | 22 +++++++++-
 .../views/Settings/SettingsShared.css         |  8 ++++
 .../src/devtools/views/hooks.js               |  3 ++
 packages/react-devtools-shared/src/utils.js   | 17 ++++++++
 .../react-devtools-shell/webpack.config.js    |  3 ++
 11 files changed, 108 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 9d7c1fc34a68..234d638353f4 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -30,6 +30,7 @@ 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 =
@@ -83,6 +84,7 @@ module.exports = {
       __TEST__: NODE_ENV === 'test',
       '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}"`,
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index 99b1d18d3a99..ac7c51f3bdc5 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -32,6 +32,7 @@ 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 featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
@@ -92,6 +93,7 @@ module.exports = {
       __TEST__: NODE_ENV === 'test',
       '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}"`,
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 7c2325bf70f4..ab7bcb8be365 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -20,6 +20,8 @@ if (!NODE_ENV) {
 
 const __DEV__ = NODE_ENV === 'development';
 
+const EDITOR_URL = process.env.EDITOR_URL || null;
+
 const DEVTOOLS_VERSION = getVersionString();
 
 const babelOptions = {
@@ -76,6 +78,7 @@ module.exports = {
       __TEST__: NODE_ENV === 'test',
       '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}"`,
       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 3c3aaae2fc46..798bdb9d900e 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -32,6 +32,9 @@ export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
 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_PARSE_HOOK_NAMES_KEY =
   'React::DevTools::parseHookNames';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index 8239a765f90b..b384018671d9 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -19,6 +19,7 @@ export type IconType =
   | 'copy'
   | 'delete'
   | 'down'
+  | 'editor'
   | 'expanded'
   | 'export'
   | 'filter'
@@ -72,6 +73,9 @@ export default function ButtonIcon({className = '', type}: Props) {
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'editor':
+      pathData = PATH_EDITOR;
+      break;
     case 'expanded':
       pathData = PATH_EXPANDED;
       break;
@@ -268,3 +272,7 @@ const PATH_VIEW_DOM = `
 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
+`;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index f63da7b54a67..9ebd30a6ec0b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -8,7 +8,7 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext} from 'react';
+import {useCallback, useContext, useSyncExternalStore} from 'react';
 import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Button from '../Button';
@@ -20,6 +20,8 @@ import {ElementTypeSuspense} from 'react-devtools-shared/src/types';
 import CannotSuspendWarningMessage from './CannotSuspendWarningMessage';
 import InspectedElementView from './InspectedElementView';
 import {InspectedElementContext} from './InspectedElementContext';
+import {getOpenInEditorURL} from '../../../utils';
+import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
 
 import styles from './InspectedElement.css';
 
@@ -123,6 +125,21 @@ export default function InspectedElementWrapper(_: Props) {
     inspectedElement != null &&
     inspectedElement.canToggleSuspense;
 
+  const editorURL = useSyncExternalStore(
+    function subscribe(callback) {
+      window.addEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      return function unsubscribe() {
+        window.removeEventListener(LOCAL_STORAGE_OPEN_IN_EDITOR_URL, callback);
+      };
+    },
+    function getState() {
+      return getOpenInEditorURL();
+    },
+  );
+
+  const canOpenInEditor =
+    editorURL && inspectedElement != null && inspectedElement.source != null;
+
   const toggleErrored = useCallback(() => {
     if (inspectedElement == null || targetErrorBoundaryID == null) {
       return;
@@ -198,6 +215,18 @@ export default function InspectedElementWrapper(_: Props) {
     }
   }, [bridge, dispatch, element, isSuspended, modalDialogDispatch, store]);
 
+  const onOpenInEditor = useCallback(() => {
+    const source = inspectedElement?.source;
+    if (source == null || editorURL == null) {
+      return;
+    }
+
+    const url = new URL(editorURL);
+    url.href = url.href.replace('{path}', source.fileName);
+    url.href = url.href.replace('{line}', String(source.lineNumber));
+    window.open(url);
+  }, [inspectedElement, editorURL]);
+
   if (element === null) {
     return (
       <div className={styles.InspectedElement}>
@@ -223,7 +252,14 @@ export default function InspectedElementWrapper(_: Props) {
             {element.displayName}
           </div>
         </div>
-
+        {canOpenInEditor && (
+          <Button
+            className={styles.IconButton}
+            onClick={onOpenInEditor}
+            title="Open in editor">
+            <ButtonIcon type="editor" />
+          </Button>
+        )}
         {canToggleError && (
           <Toggle
             className={styles.IconButton}
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 83e972729988..83c3b2a61296 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -16,7 +16,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import {useSubscription} from '../hooks';
+import {LOCAL_STORAGE_OPEN_IN_EDITOR_URL} from '../../../constants';
+import {useLocalStorage, useSubscription} from '../hooks';
 import {StoreContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
@@ -37,6 +38,7 @@ import {
   ElementTypeProfiler,
   ElementTypeSuspense,
 } from 'react-devtools-shared/src/types';
+import {getDefaultOpenInEditorURL} from 'react-devtools-shared/src/utils';
 
 import styles from './SettingsShared.css';
 
@@ -81,6 +83,11 @@ export default function ComponentsSettings(_: {||}) {
     [setParseHookNames],
   );
 
+  const [openInEditorURL, setOpenInEditorURL] = useLocalStorage<string>(
+    LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
+    getDefaultOpenInEditorURL(),
+  );
+
   const [componentFilters, setComponentFilters] = useState<
     Array<ComponentFilter>,
   >(() => [...store.componentFilters]);
@@ -271,6 +278,19 @@ export default function ComponentsSettings(_: {||}) {
         <span className={styles.Warning}>(may be slow)</span>
       </label>
 
+      <label className={styles.OpenInURLSetting}>
+        Open in Editor URL:{' '}
+        <input
+          className={styles.Input}
+          type="text"
+          placeholder={process.env.EDITOR_URL ?? 'vscode://file/{path}:{line}'}
+          value={openInEditorURL}
+          onChange={event => {
+            setOpenInEditorURL(event.target.value);
+          }}
+        />
+      </label>
+
       <div className={styles.Header}>Hide components where...</div>
 
       <table className={styles.Table}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index 3ddaf1390770..9c0ee028c996 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -14,6 +14,10 @@
   margin-bottom: 0;
 }
 
+.OpenInURLSetting {
+  margin: 0.5rem 0;
+}
+
 .OptionGroup {
   display: inline-flex;
   flex-direction: row;
@@ -30,6 +34,10 @@
   margin-right: 0.5rem;
 }
 
+.Spacer {
+  height: 0.5rem;
+}
+
 .Select {
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 76dad5677454..1a34373fc7e1 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -170,6 +170,9 @@ export function useLocalStorage<T>(
           value instanceof Function ? (value: any)(storedValue) : value;
         setStoredValue(valueToStore);
         localStorageSetItem(key, JSON.stringify(valueToStore));
+
+        // Notify listeners that this setting has changed.
+        window.dispatchEvent(new Event(key));
       } catch (error) {
         console.log(error);
       }
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 84c977f19d4e..0c50374ae30b 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -34,6 +34,7 @@ import {
 import {ElementTypeRoot} from 'react-devtools-shared/src/types';
 import {
   LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+  LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
@@ -386,6 +387,22 @@ export function setShowInlineWarningsAndErrors(value: boolean): void {
   );
 }
 
+export function getDefaultOpenInEditorURL(): string {
+  return typeof process.env.EDITOR_URL === 'string'
+    ? process.env.EDITOR_URL
+    : '';
+}
+
+export function getOpenInEditorURL(): string {
+  try {
+    const raw = localStorageGetItem(LOCAL_STORAGE_OPEN_IN_EDITOR_URL);
+    if (raw != null) {
+      return JSON.parse(raw);
+    }
+  } catch (error) {}
+  return getDefaultOpenInEditorURL();
+}
+
 export function separateDisplayNameAndHOCs(
   displayName: string | null,
   type: ElementType,
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 19f53f5d08b0..18c55d1d8b74 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -24,6 +24,8 @@ if (!TARGET) {
   process.exit(1);
 }
 
+const EDITOR_URL = process.env.EDITOR_URL || null;
+
 const builtModulesDir = resolve(
   __dirname,
   '..',
@@ -69,6 +71,7 @@ const config = {
       __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.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,

From 51c558aeb6f5b0ae639d975fd4044007a73115c1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 3 Nov 2021 15:10:29 -0400
Subject: [PATCH 1000/1603] Rename (some) "scheduling profiler" references to
 "timeline" (#22690)

---
 .../react-devtools-extensions/src/main.js     |   2 +-
 .../README.md                                 |   2 +-
 .../src/content-views/constants.js            |  86 +++++-----
 .../src/import-worker/preprocessData.js       |   2 +-
 .../src/backend/types.js                      |   2 +-
 .../react-devtools-shared/src/constants.js    | 160 +++++++++---------
 .../src/devtools/views/ErrorBoundary/cache.js |   2 +-
 .../src/devtools/views/Icon.js                |   4 +-
 .../Profiler/ClearProfilingDataButton.js      |   4 +-
 .../src/devtools/views/Profiler/Profiler.js   |  20 +--
 .../views/Profiler/ProfilerContext.js         |   4 +-
 .../Profiler/ProfilingImportExportButtons.js  |   4 +-
 .../src/dynamicImportCache.js                 |   2 +-
 .../src/hookNamesCache.js                     |   2 +-
 .../src/inspectedElementCache.js              |   2 +-
 .../src/ReactFiberLane.new.js                 |   2 +-
 .../src/ReactFiberLane.old.js                 |   2 +-
 .../src/SchedulingProfiler.js                 |  20 +--
 packages/shared/ReactFeatureFlags.js          |   2 +-
 scripts/rollup/wrappers.js                    |   2 +-
 20 files changed, 158 insertions(+), 168 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 70aaf92a7d52..36625cf74e30 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -152,7 +152,7 @@ function createPanelIfReactLoaded() {
           isProfiling,
           supportsReloadAndProfile: isChrome || isEdge,
           supportsProfiling,
-          // At this time, the scheduling profiler can only parse Chrome performance profiles.
+          // At this time, the timeline can only parse Chrome performance profiles.
           supportsSchedulingProfiler: isChrome,
           supportsTraceUpdates: true,
         });
diff --git a/packages/react-devtools-scheduling-profiler/README.md b/packages/react-devtools-scheduling-profiler/README.md
index 457bec25efcf..2b80944de281 100644
--- a/packages/react-devtools-scheduling-profiler/README.md
+++ b/packages/react-devtools-scheduling-profiler/README.md
@@ -1,3 +1,3 @@
 # React Concurrent Mode Profiler
 
-This package contains the new/experimental "scheduling profiler" 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
+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-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
index d0895d2aff8e..216234508f5e 100644
--- a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
+++ b/packages/react-devtools-scheduling-profiler/src/content-views/constants.js
@@ -109,86 +109,82 @@ export function updateColorsToMatchTheme(element: Element): boolean {
   COLORS = {
     BACKGROUND: computedStyle.getPropertyValue('--color-background'),
     INTERNAL_MODULE_FRAME: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-internal-module',
+      '--color-timeline-internal-module',
     ),
     INTERNAL_MODULE_FRAME_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-internal-module-hover',
+      '--color-timeline-internal-module-hover',
     ),
     INTERNAL_MODULE_FRAME_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-internal-module-text',
+      '--color-timeline-internal-module-text',
     ),
     NATIVE_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-native-event',
+      '--color-timeline-native-event',
     ),
     NATIVE_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-native-event-hover',
+      '--color-timeline-native-event-hover',
     ),
     NETWORK_PRIMARY: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-primary',
+      '--color-timeline-network-primary',
     ),
     NETWORK_PRIMARY_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-primary-hover',
+      '--color-timeline-network-primary-hover',
     ),
     NETWORK_SECONDARY: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-secondary',
+      '--color-timeline-network-secondary',
     ),
     NETWORK_SECONDARY_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-network-secondary-hover',
+      '--color-timeline-network-secondary-hover',
     ),
     PRIORITY_BACKGROUND: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-priority-background',
+      '--color-timeline-priority-background',
     ),
     PRIORITY_BORDER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-priority-border',
+      '--color-timeline-priority-border',
     ),
     PRIORITY_LABEL: computedStyle.getPropertyValue('--color-text'),
-    USER_TIMING: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-user-timing',
-    ),
+    USER_TIMING: computedStyle.getPropertyValue('--color-timeline-user-timing'),
     USER_TIMING_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-user-timing-hover',
-    ),
-    REACT_IDLE: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-idle',
+      '--color-timeline-user-timing-hover',
     ),
+    REACT_IDLE: computedStyle.getPropertyValue('--color-timeline-react-idle'),
     REACT_IDLE_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-idle-hover',
+      '--color-timeline-react-idle-hover',
     ),
     REACT_RENDER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render',
+      '--color-timeline-react-render',
     ),
     REACT_RENDER_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render-hover',
+      '--color-timeline-react-render-hover',
     ),
     REACT_RENDER_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-render-text',
+      '--color-timeline-react-render-text',
     ),
     REACT_COMMIT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-commit',
+      '--color-timeline-react-commit',
     ),
     REACT_COMMIT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-commit-hover',
+      '--color-timeline-react-commit-hover',
     ),
     REACT_COMMIT_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-commit-text',
+      '--color-timeline-react-commit-text',
     ),
     REACT_LAYOUT_EFFECTS: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-layout-effects',
+      '--color-timeline-react-layout-effects',
     ),
     REACT_LAYOUT_EFFECTS_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-layout-effects-hover',
+      '--color-timeline-react-layout-effects-hover',
     ),
     REACT_LAYOUT_EFFECTS_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-layout-effects-text',
+      '--color-timeline-react-layout-effects-text',
     ),
     REACT_PASSIVE_EFFECTS: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-passive-effects',
+      '--color-timeline-react-passive-effects',
     ),
     REACT_PASSIVE_EFFECTS_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-passive-effects-hover',
+      '--color-timeline-react-passive-effects-hover',
     ),
     REACT_PASSIVE_EFFECTS_TEXT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-passive-effects-text',
+      '--color-timeline-react-passive-effects-text',
     ),
     REACT_RESIZE_BAR: computedStyle.getPropertyValue('--color-resize-bar'),
     REACT_RESIZE_BAR_ACTIVE: computedStyle.getPropertyValue(
@@ -201,44 +197,42 @@ export function updateColorsToMatchTheme(element: Element): boolean {
       '--color-resize-bar-dot',
     ),
     REACT_SCHEDULE: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-schedule',
+      '--color-timeline-react-schedule',
     ),
     REACT_SCHEDULE_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-schedule-hover',
+      '--color-timeline-react-schedule-hover',
     ),
     REACT_SUSPENSE_REJECTED_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-rejected',
+      '--color-timeline-react-suspense-rejected',
     ),
     REACT_SUSPENSE_REJECTED_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-rejected-hover',
+      '--color-timeline-react-suspense-rejected-hover',
     ),
     REACT_SUSPENSE_RESOLVED_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-resolved',
+      '--color-timeline-react-suspense-resolved',
     ),
     REACT_SUSPENSE_RESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-resolved-hover',
+      '--color-timeline-react-suspense-resolved-hover',
     ),
     REACT_SUSPENSE_UNRESOLVED_EVENT: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-unresolved',
+      '--color-timeline-react-suspense-unresolved',
     ),
     REACT_SUSPENSE_UNRESOLVED_EVENT_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-suspense-unresolved-hover',
+      '--color-timeline-react-suspense-unresolved-hover',
     ),
     REACT_THROWN_ERROR: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-thrown-error',
+      '--color-timeline-thrown-error',
     ),
     REACT_THROWN_ERROR_HOVER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-thrown-error-hover',
+      '--color-timeline-thrown-error-hover',
     ),
     REACT_WORK_BORDER: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-react-work-border',
+      '--color-timeline-react-work-border',
     ),
     SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
-    TEXT_COLOR: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-text-color',
-    ),
+    TEXT_COLOR: computedStyle.getPropertyValue('--color-timeline-text-color'),
     TEXT_DIM_COLOR: computedStyle.getPropertyValue(
-      '--color-scheduling-profiler-text-dim-color',
+      '--color-timeline-text-dim-color',
     ),
     TIME_MARKER_LABEL: computedStyle.getPropertyValue('--color-text'),
     WARNING_BACKGROUND: computedStyle.getPropertyValue(
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
index d6c911af1d07..caf27e707563 100644
--- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
@@ -575,7 +575,7 @@ function processTimelineEvent(
           }
         }
 
-        // TODO (scheduling profiler) Maybe we should calculate depth in post,
+        // 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.
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 46e128779798..333ee30914cd 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -420,7 +420,7 @@ export type DevToolsHook = {
     didError?: boolean,
   ) => void,
 
-  // Scheduling Profiler internal module filtering
+  // Timeline internal module filtering
   getInternalModuleRanges: () => Array<[string, string]>,
   registerInternalModuleStart: (moduleStartError: Error) => void,
   registerInternalModuleStop: (moduleStopError: Error) => void,
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 798bdb9d900e..8898c27787f4 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -154,46 +154,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#dcdcdc',
     '--color-resize-bar-border': '#d1d1d1',
     '--color-resize-bar-dot': '#333333',
-    '--color-scheduling-profiler-internal-module': '#d1d1d1',
-    '--color-scheduling-profiler-internal-module-hover': '#c9c9c9',
-    '--color-scheduling-profiler-internal-module-text': '#444',
-    '--color-scheduling-profiler-native-event': '#ccc',
-    '--color-scheduling-profiler-native-event-hover': '#aaa',
-    '--color-scheduling-profiler-network-primary': '#fcf3dc',
-    '--color-scheduling-profiler-network-primary-hover': '#f0e7d1',
-    '--color-scheduling-profiler-network-secondary': '#efc457',
-    '--color-scheduling-profiler-network-secondary-hover': '#e3ba52',
-    '--color-scheduling-profiler-priority-background': '#f6f6f6',
-    '--color-scheduling-profiler-priority-border': '#eeeeee',
-    '--color-scheduling-profiler-user-timing': '#c9cacd',
-    '--color-scheduling-profiler-user-timing-hover': '#93959a',
-    '--color-scheduling-profiler-react-idle': '#d3e5f6',
-    '--color-scheduling-profiler-react-idle-hover': '#c3d9ef',
-    '--color-scheduling-profiler-react-render': '#9fc3f3',
-    '--color-scheduling-profiler-react-render-hover': '#83afe9',
-    '--color-scheduling-profiler-react-render-text': '#11365e',
-    '--color-scheduling-profiler-react-commit': '#c88ff0',
-    '--color-scheduling-profiler-react-commit-hover': '#b281d6',
-    '--color-scheduling-profiler-react-commit-text': '#3e2c4a',
-    '--color-scheduling-profiler-react-layout-effects': '#b281d6',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#9d71bd',
-    '--color-scheduling-profiler-react-layout-effects-text': '#3e2c4a',
-    '--color-scheduling-profiler-react-passive-effects': '#b281d6',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#9d71bd',
-    '--color-scheduling-profiler-react-passive-effects-text': '#3e2c4a',
-    '--color-scheduling-profiler-react-schedule': '#9fc3f3',
-    '--color-scheduling-profiler-react-schedule-hover': '#2683E2',
-    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
-    '--color-scheduling-profiler-react-suspense-rejected-hover': '#ffdf37',
-    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
-    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
-    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
-    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
-    '--color-scheduling-profiler-thrown-error': '#ee1638',
-    '--color-scheduling-profiler-thrown-error-hover': '#da1030',
-    '--color-scheduling-profiler-text-color': '#000000',
-    '--color-scheduling-profiler-text-dim-color': '#ccc',
-    '--color-scheduling-profiler-react-work-border': '#eeeeee',
+    '--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-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
@@ -298,46 +298,46 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
     '--color-resize-bar-active': '#31363f',
     '--color-resize-bar-border': '#3d424a',
     '--color-resize-bar-dot': '#cfd1d5',
-    '--color-scheduling-profiler-internal-module': '#303542',
-    '--color-scheduling-profiler-internal-module-hover': '#363b4a',
-    '--color-scheduling-profiler-internal-module-text': '#7f8899',
-    '--color-scheduling-profiler-native-event': '#b2b2b2',
-    '--color-scheduling-profiler-native-event-hover': '#949494',
-    '--color-scheduling-profiler-network-primary': '#fcf3dc',
-    '--color-scheduling-profiler-network-primary-hover': '#e3dbc5',
-    '--color-scheduling-profiler-network-secondary': '#efc457',
-    '--color-scheduling-profiler-network-secondary-hover': '#d6af4d',
-    '--color-scheduling-profiler-priority-background': '#1d2129',
-    '--color-scheduling-profiler-priority-border': '#282c34',
-    '--color-scheduling-profiler-user-timing': '#c9cacd',
-    '--color-scheduling-profiler-user-timing-hover': '#93959a',
-    '--color-scheduling-profiler-react-idle': '#3d485b',
-    '--color-scheduling-profiler-react-idle-hover': '#465269',
-    '--color-scheduling-profiler-react-render': '#2683E2',
-    '--color-scheduling-profiler-react-render-hover': '#1a76d4',
-    '--color-scheduling-profiler-react-render-text': '#11365e',
-    '--color-scheduling-profiler-react-commit': '#731fad',
-    '--color-scheduling-profiler-react-commit-hover': '#611b94',
-    '--color-scheduling-profiler-react-commit-text': '#e5c1ff',
-    '--color-scheduling-profiler-react-layout-effects': '#611b94',
-    '--color-scheduling-profiler-react-layout-effects-hover': '#51167a',
-    '--color-scheduling-profiler-react-layout-effects-text': '#e5c1ff',
-    '--color-scheduling-profiler-react-passive-effects': '#611b94',
-    '--color-scheduling-profiler-react-passive-effects-hover': '#51167a',
-    '--color-scheduling-profiler-react-passive-effects-text': '#e5c1ff',
-    '--color-scheduling-profiler-react-schedule': '#2683E2',
-    '--color-scheduling-profiler-react-schedule-hover': '#1a76d4',
-    '--color-scheduling-profiler-react-suspense-rejected': '#f1cc14',
-    '--color-scheduling-profiler-react-suspense-rejected-hover': '#e4c00f',
-    '--color-scheduling-profiler-react-suspense-resolved': '#a6e59f',
-    '--color-scheduling-profiler-react-suspense-resolved-hover': '#89d281',
-    '--color-scheduling-profiler-react-suspense-unresolved': '#c9cacd',
-    '--color-scheduling-profiler-react-suspense-unresolved-hover': '#93959a',
-    '--color-scheduling-profiler-thrown-error': '#fb3655',
-    '--color-scheduling-profiler-thrown-error-hover': '#f82042',
-    '--color-scheduling-profiler-text-color': '#282c34',
-    '--color-scheduling-profiler-text-dim-color': '#555b66',
-    '--color-scheduling-profiler-react-work-border': '#3d424a',
+    '--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-search-match': 'yellow',
     '--color-search-match-current': '#f7923b',
     '--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
index 9e5061cb804e..047c0788c349 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -71,7 +71,7 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Searching GitHub issues for error "${errorMessage}"`,
     };
     const wake = () => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index c9ae931f5ee7..cec6ae34ef91 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -21,7 +21,7 @@ export type IconType =
   | 'flame-chart'
   | 'profiler'
   | 'ranked-chart'
-  | 'scheduling-profiler'
+  | 'timeline'
   | 'search'
   | 'settings'
   | 'store-as-global-variable'
@@ -65,7 +65,7 @@ export default function Icon({className = '', type}: Props) {
     case 'ranked-chart':
       pathData = PATH_RANKED_CHART;
       break;
-    case 'scheduling-profiler':
+    case 'timeline':
       pathData = PATH_SCHEDULING_PROFILER;
       break;
     case 'search':
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index a6abd38712f0..a978277ba869 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -26,14 +26,14 @@ export default function ClearProfilingDataButton() {
   const {profilerStore} = store;
 
   let doesHaveData = false;
-  if (selectedTabID === 'scheduling-profiler') {
+  if (selectedTabID === 'timeline') {
     doesHaveData = schedulingProfilerData !== null;
   } else {
     doesHaveData = didRecordCommits;
   }
 
   const clear = () => {
-    if (selectedTabID === 'scheduling-profiler') {
+    if (selectedTabID === 'timeline') {
       clearSchedulingProfilerData();
     } else {
       profilerStore.clear();
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 2973fbf39585..49107506e48f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -48,7 +48,7 @@ function Profiler(_: {||}) {
   let isLegacyProfilerSelected = false;
 
   let view = null;
-  if (didRecordCommits || selectedTabID === 'scheduling-profiler') {
+  if (didRecordCommits || selectedTabID === 'timeline') {
     switch (selectedTabID) {
       case 'flame-chart':
         isLegacyProfilerSelected = true;
@@ -58,7 +58,7 @@ function Profiler(_: {||}) {
         isLegacyProfilerSelected = true;
         view = <CommitRanked />;
         break;
-      case 'scheduling-profiler':
+      case 'timeline':
         view = <SchedulingProfiler />;
         break;
       default:
@@ -104,14 +104,10 @@ function Profiler(_: {||}) {
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
             <RecordToggle
-              disabled={
-                !supportsProfiling || selectedTabID === 'scheduling-profiler'
-              }
+              disabled={!supportsProfiling || selectedTabID === 'timeline'}
             />
             <ReloadAndProfileButton
-              disabled={
-                selectedTabID === 'scheduling-profiler' || !supportsProfiling
-              }
+              disabled={selectedTabID === 'timeline' || !supportsProfiling}
             />
             <ClearProfilingDataButton />
             <ProfilingImportExportButtons />
@@ -168,10 +164,10 @@ const tabsWithSchedulingProfiler = [
   ...tabs,
   null, // Divider/separator
   {
-    id: 'scheduling-profiler',
-    icon: 'scheduling-profiler',
-    label: 'Scheduling',
-    title: 'Scheduling Profiler',
+    id: 'timeline',
+    icon: 'timeline',
+    label: 'Timeline',
+    title: 'Timeline',
   },
 ];
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index d5e43dc6a3d2..6e486091e141 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -19,8 +19,8 @@ import {StoreContext} from '../context';
 
 import type {ProfilingDataFrontend} from './types';
 
-// TODO (scheduling profiler) Should this be its own context?
-export type TabID = 'flame-chart' | 'ranked-chart' | 'scheduling-profiler';
+// TODO (timeline) Should this be its own context?
+export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
 
 export type Context = {|
   // Which tab is selected in the Profiler UI?
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 94cd201d4575..0e294ffe29cb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -123,7 +123,7 @@ export default function ProfilingImportExportButtons() {
         className={styles.Input}
         type="file"
         onChange={
-          selectedTabID === 'scheduling-profiler'
+          selectedTabID === 'timeline'
             ? importSchedulingProfilerDataWrapper
             : importProfilerData
         }
@@ -140,7 +140,7 @@ export default function ProfilingImportExportButtons() {
         disabled={
           isProfiling ||
           !profilerStore.didRecordCommits ||
-          selectedTabID === 'scheduling-profiler'
+          selectedTabID === 'timeline'
         }
         onClick={downloadData}
         title="Save profile...">
diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js
index 72c0aa708db5..b31d9602c6b8 100644
--- a/packages/react-devtools-shared/src/dynamicImportCache.js
+++ b/packages/react-devtools-shared/src/dynamicImportCache.js
@@ -74,7 +74,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Loading module "${moduleLoaderFunction.name}"`,
     };
 
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index eee340844fe0..c992f64cf97b 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -93,7 +93,7 @@ export function loadHookNames(
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
     };
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index 6442a84b0be6..b7f08ffa523a 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -95,7 +95,7 @@ export function inspectElement(
         callbacks.add(callback);
       },
 
-      // Optional property used by Scheduling Profiler:
+      // Optional property used by Timeline:
       displayName: `Inspecting ${element.displayName || 'Unknown'}`,
     };
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 7e1461c7a722..beaf66d0192b 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
 // It should be kept in sync with the Lanes values above.
 export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 6b4be15e649f..4923f607eb8e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental scheduling profiler (react-devtools-scheduling-profiler)
+// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
 // It should be kept in sync with the Lanes values above.
 export function getLabelForLane(lane: Lane): string | void {
   if (enableSchedulingProfiler) {
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index acfb2c3f976d..58d61067acbf 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -147,7 +147,7 @@ export function markComponentRenderStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-render-start-${componentName}`);
     }
   }
@@ -165,7 +165,7 @@ export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-passive-effect-mount-start-${componentName}`);
     }
   }
@@ -183,7 +183,7 @@ export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
     }
   }
@@ -201,7 +201,7 @@ export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-layout-effect-mount-start-${componentName}`);
     }
   }
@@ -219,7 +219,7 @@ export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
     }
   }
@@ -254,7 +254,7 @@ export function markComponentErrored(
         message = thrownValue;
       }
 
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--error-${componentName}-${phase}-${message}`);
     }
   }
@@ -287,10 +287,10 @@ export function markComponentSuspended(
       // 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 Scheduling Profiler.
+      // When this is available we should pass it along to the Timeline.
       const displayName = (wakeable: any).displayName || '';
 
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(
         `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
       );
@@ -370,7 +370,7 @@ export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
     }
   }
@@ -380,7 +380,7 @@ export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
   if (enableSchedulingProfiler) {
     if (supportsUserTimingV3) {
       const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (scheduling profiler) Add component stack id
+      // TODO (timeline) Add component stack id
       markAndClear(`--schedule-state-update-${lane}-${componentName}`);
     }
   }
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 112c2d10f2cb..ede13f2c2e8d 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -16,7 +16,7 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const enableDebugTracing = false;
 
 // Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
-// for an experimental scheduling profiler tool.
+// for an experimental timeline tool.
 export const enableSchedulingProfiler = __PROFILE__;
 
 // Helps identify side effects in render-phase lifecycle hooks and setState
diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index c83ecc0fbdb9..3a3556e8d90e 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -360,7 +360,7 @@ function wrapBundle(
       case RN_FB_DEV:
       case RN_FB_PROFILING:
         // Certain DEV and Profiling bundles should self-register their own module boundaries with DevTools.
-        // This allows the Scheduling Profiler to de-emphasize (dim) internal stack frames.
+        // This allows the Timeline to de-emphasize (dim) internal stack frames.
         source = `
           ${registerInternalModuleStart(globalName)}
           ${source}

From 1bf6deb865052111474f2988bb831de13d09c560 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Nov 2021 10:02:06 -0400
Subject: [PATCH 1001/1603] Renamed packages/react-devtools-scheduling-profiler
 to packages/react-devtools-timeline (#22691)

---
 .eslintignore                                                 | 4 ++--
 .eslintrc.js                                                  | 2 +-
 .gitignore                                                    | 2 +-
 .prettierignore                                               | 4 ++--
 packages/react-devtools-shared/src/devtools/views/DevTools.js | 2 +-
 .../src/devtools/views/Profiler/ClearProfilingDataButton.js   | 2 +-
 .../src/devtools/views/Profiler/Profiler.js                   | 2 +-
 .../devtools/views/Profiler/ProfilingImportExportButtons.js   | 2 +-
 .../README.md                                                 | 0
 .../package.json                                              | 2 +-
 .../src/CanvasPage.css                                        | 0
 .../src/CanvasPage.js                                         | 0
 .../src/EventTooltip.css                                      | 0
 .../src/EventTooltip.js                                       | 0
 .../src/ImportButton.css                                      | 0
 .../src/ImportButton.js                                       | 0
 .../src/SchedulingProfiler.css                                | 0
 .../src/SchedulingProfiler.js                                 | 0
 .../src/SchedulingProfilerContext.js                          | 0
 .../src/constants.js                                          | 0
 .../src/content-views/ComponentMeasuresView.js                | 0
 .../src/content-views/FlamechartView.js                       | 0
 .../src/content-views/NativeEventsView.js                     | 0
 .../src/content-views/NetworkMeasuresView.js                  | 0
 .../src/content-views/ReactMeasuresView.js                    | 0
 .../src/content-views/SchedulingEventsView.js                 | 0
 .../src/content-views/SnapshotsView.js                        | 0
 .../src/content-views/SuspenseEventsView.js                   | 0
 .../src/content-views/ThrownErrorsView.js                     | 0
 .../src/content-views/TimeAxisMarkersView.js                  | 0
 .../src/content-views/UserTimingMarksView.js                  | 0
 .../src/content-views/constants.js                            | 0
 .../src/content-views/index.js                                | 0
 .../content-views/utils/__tests__/__modules__/module-one.js   | 0
 .../content-views/utils/__tests__/__modules__/module-two.js   | 0
 .../src/content-views/utils/__tests__/colors-test.js          | 0
 .../src/content-views/utils/__tests__/moduleFilters-test.js   | 0
 .../src/content-views/utils/colors.js                         | 0
 .../src/content-views/utils/moduleFilters.js                  | 0
 .../src/content-views/utils/positioning.js                    | 0
 .../src/content-views/utils/text.js                           | 0
 .../src/createDataResourceFromImportedFile.js                 | 0
 .../src/import-worker/InvalidProfileError.js                  | 0
 .../import-worker/__tests__/preprocessData-test.internal.js   | 0
 .../src/import-worker/importFile.js                           | 0
 .../src/import-worker/importFile.worker.js                    | 0
 .../src/import-worker/index.js                                | 0
 .../src/import-worker/preprocessData.js                       | 0
 .../src/import-worker/readInputData.js                        | 0
 .../src/types.js                                              | 0
 .../src/utils/formatting.js                                   | 0
 .../src/utils/getBatchRange.js                                | 0
 .../src/utils/useSmartTooltip.js                              | 0
 .../src/view-base/BackgroundColorView.js                      | 0
 .../src/view-base/HorizontalPanAndZoomView.js                 | 0
 .../src/view-base/Surface.js                                  | 0
 .../src/view-base/VerticalScrollView.js                       | 0
 .../src/view-base/View.js                                     | 0
 .../src/view-base/__tests__/geometry-test.js                  | 0
 .../src/view-base/constants.js                                | 0
 .../src/view-base/geometry.js                                 | 0
 .../src/view-base/index.js                                    | 0
 .../src/view-base/layouter.js                                 | 0
 .../src/view-base/resizable/ResizableView.js                  | 0
 .../src/view-base/resizable/ResizeBarView.js                  | 0
 .../src/view-base/resizable/index.js                          | 0
 .../src/view-base/useCanvasInteraction.js                     | 0
 .../src/view-base/utils/__tests__/clamp-test.js               | 0
 .../src/view-base/utils/__tests__/scrollState-test.js         | 0
 .../src/view-base/utils/clamp.js                              | 0
 .../src/view-base/utils/normalizeWheel.js                     | 0
 .../src/view-base/utils/scrollState.js                        | 0
 .../vertical-scroll-overflow/VerticalScrollBarView.js         | 0
 .../vertical-scroll-overflow/VerticalScrollOverflowView.js    | 0
 .../src/view-base/vertical-scroll-overflow/index.js           | 0
 .../vertical-scroll-overflow/withVerticalScrollbarLayout.js   | 0
 packages/react-reconciler/src/ReactFiberLane.new.js           | 4 ++--
 packages/react-reconciler/src/ReactFiberLane.old.js           | 4 ++--
 packages/react-reconciler/src/SchedulingProfiler.js           | 2 +-
 scripts/devtools/configuration.js                             | 2 +-
 80 files changed, 17 insertions(+), 17 deletions(-)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/README.md (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/package.json (94%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/CanvasPage.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/CanvasPage.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/EventTooltip.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/EventTooltip.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/ImportButton.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/ImportButton.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/SchedulingProfiler.css (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/SchedulingProfiler.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/SchedulingProfilerContext.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/constants.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/ComponentMeasuresView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/FlamechartView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/NativeEventsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/NetworkMeasuresView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/ReactMeasuresView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/SchedulingEventsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/SnapshotsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/SuspenseEventsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/ThrownErrorsView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/TimeAxisMarkersView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/UserTimingMarksView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/constants.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/__modules__/module-one.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/__modules__/module-two.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/colors-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/__tests__/moduleFilters-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/colors.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/moduleFilters.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/positioning.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/content-views/utils/text.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/createDataResourceFromImportedFile.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/InvalidProfileError.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/__tests__/preprocessData-test.internal.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/importFile.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/importFile.worker.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/preprocessData.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/import-worker/readInputData.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/types.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/utils/formatting.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/utils/getBatchRange.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/utils/useSmartTooltip.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/BackgroundColorView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/HorizontalPanAndZoomView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/Surface.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/VerticalScrollView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/View.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/__tests__/geometry-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/constants.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/geometry.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/layouter.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/resizable/ResizableView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/resizable/ResizeBarView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/resizable/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/useCanvasInteraction.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/__tests__/clamp-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/__tests__/scrollState-test.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/clamp.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/normalizeWheel.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/utils/scrollState.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/index.js (100%)
 rename packages/{react-devtools-scheduling-profiler => react-devtools-timeline}/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js (100%)

diff --git a/.eslintignore b/.eslintignore
index c55cc4086607..7d79ef692311 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -22,5 +22,5 @@ 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-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static
+packages/react-devtools-timeline/dist
+packages/react-devtools-timeline/static
diff --git a/.eslintrc.js b/.eslintrc.js
index b129af49d3d6..6a0dc2dceae4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -151,7 +151,7 @@ module.exports = {
         'packages/react-test-renderer/**/*.js',
         'packages/react-debug-tools/**/*.js',
         'packages/react-devtools-extensions/**/*.js',
-        'packages/react-devtools-scheduling-profiler/**/*.js',
+        'packages/react-devtools-timeline/**/*.js',
         'packages/react-native-renderer/**/*.js',
         'packages/eslint-plugin-react-hooks/**/*.js',
         'packages/jest-react/**/*.js',
diff --git a/.gitignore b/.gitignore
index 8ba7bbecc2dc..6ec345e172e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,4 +35,4 @@ packages/react-devtools-extensions/shared/build
 packages/react-devtools-extensions/.tempUserDataDir
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist
-packages/react-devtools-scheduling-profiler/dist
+packages/react-devtools-timeline/dist
diff --git a/.prettierignore b/.prettierignore
index 50ccffa6a67f..6f69f7f891d6 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -7,5 +7,5 @@ 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-scheduling-profiler/dist
-packages/react-devtools-scheduling-profiler/static
\ No newline at end of file
+packages/react-devtools-timeline/dist
+packages/react-devtools-timeline/static
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 781ad9d902f6..b0b8f0303292 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -30,7 +30,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
 import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
-import {SchedulingProfilerContextController} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
+import {SchedulingProfilerContextController} from 'react-devtools-timeline/src/SchedulingProfilerContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index a978277ba869..3f3a8e498706 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
-import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
+import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 49107506e48f..a9f57f5c47d7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -16,7 +16,7 @@ import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import RootSelector from './RootSelector';
-import {SchedulingProfiler} from 'react-devtools-scheduling-profiler/src/SchedulingProfiler';
+import {SchedulingProfiler} from 'react-devtools-timeline/src/SchedulingProfiler';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
 import ProfilingImportExportButtons from './ProfilingImportExportButtons';
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 0e294ffe29cb..912f87745e9e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -19,7 +19,7 @@ import {
   prepareProfilingDataFrontendFromExport,
 } from './utils';
 import {downloadFile} from '../utils';
-import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
+import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
 
 import styles from './ProfilingImportExportButtons.css';
 
diff --git a/packages/react-devtools-scheduling-profiler/README.md b/packages/react-devtools-timeline/README.md
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/README.md
rename to packages/react-devtools-timeline/README.md
diff --git a/packages/react-devtools-scheduling-profiler/package.json b/packages/react-devtools-timeline/package.json
similarity index 94%
rename from packages/react-devtools-scheduling-profiler/package.json
rename to packages/react-devtools-timeline/package.json
index a74b66fa1d55..86bab4e26024 100644
--- a/packages/react-devtools-scheduling-profiler/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,6 +1,6 @@
 {
   "private": true,
-  "name": "react-devtools-scheduling-profiler",
+  "name": "react-devtools-timeline",
   "version": "4.21.0",
   "license": "MIT",
   "dependencies": {
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.css b/packages/react-devtools-timeline/src/CanvasPage.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/CanvasPage.css
rename to packages/react-devtools-timeline/src/CanvasPage.css
diff --git a/packages/react-devtools-scheduling-profiler/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/CanvasPage.js
rename to packages/react-devtools-timeline/src/CanvasPage.js
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.css b/packages/react-devtools-timeline/src/EventTooltip.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/EventTooltip.css
rename to packages/react-devtools-timeline/src/EventTooltip.css
diff --git a/packages/react-devtools-scheduling-profiler/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/EventTooltip.js
rename to packages/react-devtools-timeline/src/EventTooltip.js
diff --git a/packages/react-devtools-scheduling-profiler/src/ImportButton.css b/packages/react-devtools-timeline/src/ImportButton.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/ImportButton.css
rename to packages/react-devtools-timeline/src/ImportButton.css
diff --git a/packages/react-devtools-scheduling-profiler/src/ImportButton.js b/packages/react-devtools-timeline/src/ImportButton.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/ImportButton.js
rename to packages/react-devtools-timeline/src/ImportButton.js
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css b/packages/react-devtools-timeline/src/SchedulingProfiler.css
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.css
rename to packages/react-devtools-timeline/src/SchedulingProfiler.css
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js b/packages/react-devtools-timeline/src/SchedulingProfiler.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/SchedulingProfiler.js
rename to packages/react-devtools-timeline/src/SchedulingProfiler.js
diff --git a/packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js b/packages/react-devtools-timeline/src/SchedulingProfilerContext.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/SchedulingProfilerContext.js
rename to packages/react-devtools-timeline/src/SchedulingProfilerContext.js
diff --git a/packages/react-devtools-scheduling-profiler/src/constants.js b/packages/react-devtools-timeline/src/constants.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/constants.js
rename to packages/react-devtools-timeline/src/constants.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/ComponentMeasuresView.js
rename to packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/FlamechartView.js
rename to packages/react-devtools-timeline/src/content-views/FlamechartView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/NativeEventsView.js
rename to packages/react-devtools-timeline/src/content-views/NativeEventsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/NetworkMeasuresView.js
rename to packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/ReactMeasuresView.js
rename to packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/SchedulingEventsView.js
rename to packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/SnapshotsView.js
rename to packages/react-devtools-timeline/src/content-views/SnapshotsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js
rename to packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/ThrownErrorsView.js
rename to packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/TimeAxisMarkersView.js
rename to packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/UserTimingMarksView.js
rename to packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/constants.js
rename to packages/react-devtools-timeline/src/content-views/constants.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/index.js b/packages/react-devtools-timeline/src/content-views/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/index.js
rename to packages/react-devtools-timeline/src/content-views/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-one.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-one.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-one.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-two.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/__modules__/module-two.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/__modules__/module-two.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/colors-test.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/colors-test.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/colors-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js b/packages/react-devtools-timeline/src/content-views/utils/__tests__/moduleFilters-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/__tests__/moduleFilters-test.js
rename to packages/react-devtools-timeline/src/content-views/utils/__tests__/moduleFilters-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/colors.js b/packages/react-devtools-timeline/src/content-views/utils/colors.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/colors.js
rename to packages/react-devtools-timeline/src/content-views/utils/colors.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js b/packages/react-devtools-timeline/src/content-views/utils/moduleFilters.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/moduleFilters.js
rename to packages/react-devtools-timeline/src/content-views/utils/moduleFilters.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/positioning.js b/packages/react-devtools-timeline/src/content-views/utils/positioning.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/positioning.js
rename to packages/react-devtools-timeline/src/content-views/utils/positioning.js
diff --git a/packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js b/packages/react-devtools-timeline/src/content-views/utils/text.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/content-views/utils/text.js
rename to packages/react-devtools-timeline/src/content-views/utils/text.js
diff --git a/packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js b/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/createDataResourceFromImportedFile.js
rename to packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/InvalidProfileError.js b/packages/react-devtools-timeline/src/import-worker/InvalidProfileError.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/InvalidProfileError.js
rename to packages/react-devtools-timeline/src/import-worker/InvalidProfileError.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js
rename to packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js b/packages/react-devtools-timeline/src/import-worker/importFile.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/importFile.js
rename to packages/react-devtools-timeline/src/import-worker/importFile.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/importFile.worker.js b/packages/react-devtools-timeline/src/import-worker/importFile.worker.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/importFile.worker.js
rename to packages/react-devtools-timeline/src/import-worker/importFile.worker.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/index.js
rename to packages/react-devtools-timeline/src/import-worker/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js
rename to packages/react-devtools-timeline/src/import-worker/preprocessData.js
diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/readInputData.js b/packages/react-devtools-timeline/src/import-worker/readInputData.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/import-worker/readInputData.js
rename to packages/react-devtools-timeline/src/import-worker/readInputData.js
diff --git a/packages/react-devtools-scheduling-profiler/src/types.js b/packages/react-devtools-timeline/src/types.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/types.js
rename to packages/react-devtools-timeline/src/types.js
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/utils/formatting.js
rename to packages/react-devtools-timeline/src/utils/formatting.js
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js b/packages/react-devtools-timeline/src/utils/getBatchRange.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/utils/getBatchRange.js
rename to packages/react-devtools-timeline/src/utils/getBatchRange.js
diff --git a/packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/utils/useSmartTooltip.js
rename to packages/react-devtools-timeline/src/utils/useSmartTooltip.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/BackgroundColorView.js b/packages/react-devtools-timeline/src/view-base/BackgroundColorView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/BackgroundColorView.js
rename to packages/react-devtools-timeline/src/view-base/BackgroundColorView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/HorizontalPanAndZoomView.js
rename to packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/Surface.js b/packages/react-devtools-timeline/src/view-base/Surface.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/Surface.js
rename to packages/react-devtools-timeline/src/view-base/Surface.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js b/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/VerticalScrollView.js
rename to packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/View.js b/packages/react-devtools-timeline/src/view-base/View.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/View.js
rename to packages/react-devtools-timeline/src/view-base/View.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/__tests__/geometry-test.js b/packages/react-devtools-timeline/src/view-base/__tests__/geometry-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/__tests__/geometry-test.js
rename to packages/react-devtools-timeline/src/view-base/__tests__/geometry-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/constants.js b/packages/react-devtools-timeline/src/view-base/constants.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/constants.js
rename to packages/react-devtools-timeline/src/view-base/constants.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/geometry.js b/packages/react-devtools-timeline/src/view-base/geometry.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/geometry.js
rename to packages/react-devtools-timeline/src/view-base/geometry.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/index.js b/packages/react-devtools-timeline/src/view-base/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/index.js
rename to packages/react-devtools-timeline/src/view-base/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/layouter.js b/packages/react-devtools-timeline/src/view-base/layouter.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/layouter.js
rename to packages/react-devtools-timeline/src/view-base/layouter.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizableView.js
rename to packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/resizable/ResizeBarView.js
rename to packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/resizable/index.js b/packages/react-devtools-timeline/src/view-base/resizable/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/resizable/index.js
rename to packages/react-devtools-timeline/src/view-base/resizable/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/useCanvasInteraction.js
rename to packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/clamp-test.js b/packages/react-devtools-timeline/src/view-base/utils/__tests__/clamp-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/clamp-test.js
rename to packages/react-devtools-timeline/src/view-base/utils/__tests__/clamp-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/scrollState-test.js b/packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/__tests__/scrollState-test.js
rename to packages/react-devtools-timeline/src/view-base/utils/__tests__/scrollState-test.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/clamp.js b/packages/react-devtools-timeline/src/view-base/utils/clamp.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/clamp.js
rename to packages/react-devtools-timeline/src/view-base/utils/clamp.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/normalizeWheel.js
rename to packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/utils/scrollState.js
rename to packages/react-devtools-timeline/src/view-base/utils/scrollState.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollBarView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/VerticalScrollOverflowView.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/index.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/index.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/index.js
diff --git a/packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js b/packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
similarity index 100%
rename from packages/react-devtools-scheduling-profiler/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
rename to packages/react-devtools-timeline/src/view-base/vertical-scroll-overflow/withVerticalScrollbarLayout.js
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index beaf66d0192b..b9073b0770ba 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -25,7 +25,7 @@ import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 import {clz32} from './clz32';
 
-// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
+// 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;
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
+// 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) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 4923f607eb8e..1ef12d402128 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -25,7 +25,7 @@ import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
 import {clz32} from './clz32';
 
-// Lane values below should be kept in sync with getLabelForLane(), used by react-devtools-scheduling-profiler.
+// 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;
@@ -78,7 +78,7 @@ export const IdleLane: Lanes = /*                       */ 0b0100000000000000000
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
-// This function is used for the experimental timeline (react-devtools-scheduling-profiler)
+// 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) {
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 58d61067acbf..0304f39a12e5 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -17,7 +17,7 @@ import {
 } from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-scheduling-profiler/src/constants';
+import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
 
 import {
   getLabelForLane as getLabelForLane_old,
diff --git a/scripts/devtools/configuration.js b/scripts/devtools/configuration.js
index e90b764b3619..98d65baf946a 100644
--- a/scripts/devtools/configuration.js
+++ b/scripts/devtools/configuration.js
@@ -6,7 +6,7 @@ const PACKAGE_PATHS = [
   'packages/react-devtools/package.json',
   'packages/react-devtools-core/package.json',
   'packages/react-devtools-inline/package.json',
-  'packages/react-devtools-scheduling-profiler/package.json',
+  'packages/react-devtools-timeline/package.json',
 ];
 
 const MANIFEST_PATHS = [

From 8ca3f567bc3ed56c2101e5c51f968a5339f63093 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Nov 2021 10:40:35 -0400
Subject: [PATCH 1002/1603] Fix module-boundary wrappers (#22688)

---
 scripts/rollup/wrappers.js                    | 32 +++++++++++--------
 .../wrappers/registerInternalModuleBegin.js   | 10 +-----
 .../wrappers/registerInternalModuleEnd.js     | 10 +-----
 3 files changed, 20 insertions(+), 32 deletions(-)
 rename packages/shared/registerInternalModuleStart.js => scripts/rollup/wrappers/registerInternalModuleBegin.js (51%)
 rename packages/shared/registerInternalModuleStop.js => scripts/rollup/wrappers/registerInternalModuleEnd.js (50%)

diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index 3a3556e8d90e..3178c1cf482a 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -27,24 +27,23 @@ const {
 
 const {RECONCILER} = moduleTypes;
 
+const USE_STRICT_HEADER_REGEX = /'use strict';\n+/;
+
 function registerInternalModuleStart(globalName) {
-  const path = resolve(
-    __dirname,
-    '..',
-    '..',
-    'packages/shared/registerInternalModuleStart.js'
-  );
-  return String(readFileSync(path)).trim();
+  const path = resolve(__dirname, 'wrappers', 'registerInternalModuleBegin.js');
+  const file = readFileSync(path);
+  return String(file).trim();
 }
 
 function registerInternalModuleStop(globalName) {
-  const path = resolve(
-    __dirname,
-    '..',
-    '..',
-    'packages/shared/registerInternalModuleStop.js'
-  );
-  return String(readFileSync(path)).trim();
+  const path = resolve(__dirname, 'wrappers', 'registerInternalModuleEnd.js');
+  const file = readFileSync(path);
+
+  // Remove the 'use strict' directive from the footer.
+  // This directive is only meaningful when it is the first statement in a file or function.
+  return String(file)
+    .replace(USE_STRICT_HEADER_REGEX, '')
+    .trim();
 }
 
 const license = ` * Copyright (c) Facebook, Inc. and its affiliates.
@@ -359,6 +358,11 @@ function wrapBundle(
       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 = `
diff --git a/packages/shared/registerInternalModuleStart.js b/scripts/rollup/wrappers/registerInternalModuleBegin.js
similarity index 51%
rename from packages/shared/registerInternalModuleStart.js
rename to scripts/rollup/wrappers/registerInternalModuleBegin.js
index 1bab503c2a6d..a9170ca3e45d 100644
--- a/packages/shared/registerInternalModuleStart.js
+++ b/scripts/rollup/wrappers/registerInternalModuleBegin.js
@@ -1,14 +1,6 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+'use strict';
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-
-// Don't require this file directly; it's embedded by Rollup during build.
-
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
diff --git a/packages/shared/registerInternalModuleStop.js b/scripts/rollup/wrappers/registerInternalModuleEnd.js
similarity index 50%
rename from packages/shared/registerInternalModuleStop.js
rename to scripts/rollup/wrappers/registerInternalModuleEnd.js
index 44a69bed9ac3..119fb115a1ce 100644
--- a/packages/shared/registerInternalModuleStop.js
+++ b/scripts/rollup/wrappers/registerInternalModuleEnd.js
@@ -1,14 +1,6 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+'use strict';
 
 /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-
-// Don't require this file directly; it's embedded by Rollup during build.
-
 if (
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
   typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===

From 13455d26d1904519c53686d6f295d4eb50b6c2fc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 4 Nov 2021 11:40:45 -0400
Subject: [PATCH 1003/1603] Cleaned up remaining "scheduling profiler"
 references in DevTools (#22696)

---
 .../react-devtools-extensions/src/main.js     |  2 +-
 .../react-devtools-inline/src/frontend.js     |  2 +-
 .../src/devtools/store.js                     | 16 +++----
 .../src/devtools/views/DevTools.js            |  6 +--
 .../Profiler/ClearProfilingDataButton.js      | 10 ++--
 .../src/devtools/views/Profiler/Profiler.js   | 12 ++---
 .../Profiler/ProfilingImportExportButtons.js  | 10 ++--
 .../{SchedulingProfiler.css => Timeline.css}  |  0
 .../{SchedulingProfiler.js => Timeline.js}    | 22 ++++-----
 ...gProfilerContext.js => TimelineContext.js} | 48 ++++++++-----------
 10 files changed, 56 insertions(+), 72 deletions(-)
 rename packages/react-devtools-timeline/src/{SchedulingProfiler.css => Timeline.css} (100%)
 rename packages/react-devtools-timeline/src/{SchedulingProfiler.js => Timeline.js} (89%)
 rename packages/react-devtools-timeline/src/{SchedulingProfilerContext.js => TimelineContext.js} (60%)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 36625cf74e30..015472fa2e89 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -153,7 +153,7 @@ function createPanelIfReactLoaded() {
           supportsReloadAndProfile: isChrome || isEdge,
           supportsProfiling,
           // At this time, the timeline can only parse Chrome performance profiles.
-          supportsSchedulingProfiler: isChrome,
+          supportsTimeline: isChrome,
           supportsTraceUpdates: true,
         });
         store.profilerStore.profilingData = profilingData;
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 0249fb878f9b..065bb1238715 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -29,7 +29,7 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {
   return new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
-    supportsSchedulingProfiler: true,
+    supportsTimeline: true,
     supportsNativeInspection: config?.supportsNativeInspection !== false,
   });
 }
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 217abe7f7277..c8b252072dcb 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -63,9 +63,9 @@ type Config = {|
   checkBridgeProtocolCompatibility?: boolean,
   isProfiling?: boolean,
   supportsNativeInspection?: boolean,
-  supportsReloadAndProfile?: boolean,
-  supportsSchedulingProfiler?: boolean,
   supportsProfiling?: boolean,
+  supportsReloadAndProfile?: boolean,
+  supportsTimeline?: boolean,
   supportsTraceUpdates?: boolean,
 |};
 
@@ -162,7 +162,7 @@ export default class Store extends EventEmitter<{|
   _supportsNativeInspection: boolean = true;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
-  _supportsSchedulingProfiler: boolean = false;
+  _supportsTimeline: boolean = false;
   _supportsTraceUpdates: boolean = false;
 
   _unsupportedBridgeProtocol: BridgeProtocol | null = null;
@@ -197,7 +197,7 @@ export default class Store extends EventEmitter<{|
         supportsNativeInspection,
         supportsProfiling,
         supportsReloadAndProfile,
-        supportsSchedulingProfiler,
+        supportsTimeline,
         supportsTraceUpdates,
       } = config;
       this._supportsNativeInspection = supportsNativeInspection !== false;
@@ -207,8 +207,8 @@ export default class Store extends EventEmitter<{|
       if (supportsReloadAndProfile) {
         this._supportsReloadAndProfile = true;
       }
-      if (supportsSchedulingProfiler) {
-        this._supportsSchedulingProfiler = true;
+      if (supportsTimeline) {
+        this._supportsTimeline = true;
       }
       if (supportsTraceUpdates) {
         this._supportsTraceUpdates = true;
@@ -422,8 +422,8 @@ export default class Store extends EventEmitter<{|
     );
   }
 
-  get supportsSchedulingProfiler(): boolean {
-    return this._supportsSchedulingProfiler;
+  get supportsTimeline(): boolean {
+    return this._supportsTimeline;
   }
 
   get supportsTraceUpdates(): boolean {
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index b0b8f0303292..b16429b5bcff 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -30,7 +30,7 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
 import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
-import {SchedulingProfilerContextController} from 'react-devtools-timeline/src/SchedulingProfilerContext';
+import {TimelineContextController} from 'react-devtools-timeline/src/TimelineContext';
 import {ModalDialogContextController} from './ModalDialog';
 import ReactLogo from './ReactLogo';
 import UnsupportedBridgeProtocolDialog from './UnsupportedBridgeProtocolDialog';
@@ -273,7 +273,7 @@ export default function DevTools({
                       value={fetchFileWithCaching || null}>
                       <TreeContextController>
                         <ProfilerContextController>
-                          <SchedulingProfilerContextController>
+                          <TimelineContextController>
                             <ThemeProvider>
                               <div
                                 className={styles.DevTools}
@@ -311,7 +311,7 @@ export default function DevTools({
                                 </div>
                               </div>
                             </ThemeProvider>
-                          </SchedulingProfilerContextController>
+                          </TimelineContextController>
                         </ProfilerContextController>
                       </TreeContextController>
                     </FetchFileWithCachingContext.Provider>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index 3f3a8e498706..f57b4ba8e173 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -13,28 +13,26 @@ import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
-import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
   const {didRecordCommits, isProfiling, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {clearSchedulingProfilerData, schedulingProfilerData} = useContext(
-    SchedulingProfilerContext,
-  );
+  const {clearTimelineData, timelineData} = useContext(TimelineContext);
   const {profilerStore} = store;
 
   let doesHaveData = false;
   if (selectedTabID === 'timeline') {
-    doesHaveData = schedulingProfilerData !== null;
+    doesHaveData = timelineData !== null;
   } else {
     doesHaveData = didRecordCommits;
   }
 
   const clear = () => {
     if (selectedTabID === 'timeline') {
-      clearSchedulingProfilerData();
+      clearTimelineData();
     } else {
       profilerStore.clear();
     }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index a9f57f5c47d7..0bd6b0375e07 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -16,7 +16,7 @@ import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import RootSelector from './RootSelector';
-import {SchedulingProfiler} from 'react-devtools-timeline/src/SchedulingProfiler';
+import {Timeline} from 'react-devtools-timeline/src/Timeline';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
 import ProfilingImportExportButtons from './ProfilingImportExportButtons';
@@ -43,7 +43,7 @@ function Profiler(_: {||}) {
     supportsProfiling,
   } = useContext(ProfilerContext);
 
-  const {supportsSchedulingProfiler} = useContext(StoreContext);
+  const {supportsTimeline} = useContext(StoreContext);
 
   let isLegacyProfilerSelected = false;
 
@@ -59,7 +59,7 @@ function Profiler(_: {||}) {
         view = <CommitRanked />;
         break;
       case 'timeline':
-        view = <SchedulingProfiler />;
+        view = <Timeline />;
         break;
       default:
         break;
@@ -116,9 +116,7 @@ function Profiler(_: {||}) {
               currentTab={selectedTabID}
               id="Profiler"
               selectTab={selectTab}
-              tabs={
-                supportsSchedulingProfiler ? tabsWithSchedulingProfiler : tabs
-              }
+              tabs={supportsTimeline ? tabsWithTimeline : tabs}
               type="profiler"
             />
             <RootSelector />
@@ -160,7 +158,7 @@ const tabs = [
   },
 ];
 
-const tabsWithSchedulingProfiler = [
+const tabsWithTimeline = [
   ...tabs,
   null, // Divider/separator
   {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 912f87745e9e..574da0639e97 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -19,7 +19,7 @@ import {
   prepareProfilingDataFrontendFromExport,
 } from './utils';
 import {downloadFile} from '../utils';
-import {SchedulingProfilerContext} from 'react-devtools-timeline/src/SchedulingProfilerContext';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
 import styles from './ProfilingImportExportButtons.css';
 
@@ -29,7 +29,7 @@ export default function ProfilingImportExportButtons() {
   const {isProfiling, profilingData, rootID, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {importSchedulingProfilerData} = useContext(SchedulingProfilerContext);
+  const {importTimelineData} = useContext(TimelineContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
 
@@ -108,10 +108,10 @@ export default function ProfilingImportExportButtons() {
     }
   }, [modalDialogDispatch, profilerStore]);
 
-  const importSchedulingProfilerDataWrapper = event => {
+  const importTimelineDataWrapper = event => {
     const input = inputRef.current;
     if (input !== null && input.files.length > 0) {
-      importSchedulingProfilerData(input.files[0]);
+      importTimelineData(input.files[0]);
     }
   };
 
@@ -124,7 +124,7 @@ export default function ProfilingImportExportButtons() {
         type="file"
         onChange={
           selectedTabID === 'timeline'
-            ? importSchedulingProfilerDataWrapper
+            ? importTimelineDataWrapper
             : importProfilerData
         }
         tabIndex={-1}
diff --git a/packages/react-devtools-timeline/src/SchedulingProfiler.css b/packages/react-devtools-timeline/src/Timeline.css
similarity index 100%
rename from packages/react-devtools-timeline/src/SchedulingProfiler.css
rename to packages/react-devtools-timeline/src/Timeline.css
diff --git a/packages/react-devtools-timeline/src/SchedulingProfiler.js b/packages/react-devtools-timeline/src/Timeline.js
similarity index 89%
rename from packages/react-devtools-timeline/src/SchedulingProfiler.js
rename to packages/react-devtools-timeline/src/Timeline.js
index 98cd61d31244..4b6d21f8a8f7 100644
--- a/packages/react-devtools-timeline/src/SchedulingProfiler.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -21,18 +21,16 @@ import {
 } from 'react';
 import {SettingsContext} from 'react-devtools-shared/src/devtools/views/Settings/SettingsContext';
 import {updateColorsToMatchTheme} from './content-views/constants';
-import {SchedulingProfilerContext} from './SchedulingProfilerContext';
+import {TimelineContext} from './TimelineContext';
 import ImportButton from './ImportButton';
 import CanvasPage from './CanvasPage';
 
-import styles from './SchedulingProfiler.css';
+import styles from './Timeline.css';
 
-export function SchedulingProfiler(_: {||}) {
-  const {
-    importSchedulingProfilerData,
-    schedulingProfilerData,
-    viewState,
-  } = useContext(SchedulingProfilerContext);
+export function Timeline(_: {||}) {
+  const {importTimelineData, timelineData, viewState} = useContext(
+    TimelineContext,
+  );
 
   const ref = useRef(null);
 
@@ -63,17 +61,17 @@ export function SchedulingProfiler(_: {||}) {
 
   return (
     <div className={styles.Content} ref={ref}>
-      {schedulingProfilerData ? (
+      {timelineData ? (
         <Suspense fallback={<ProcessingData />}>
           <DataResourceComponent
-            dataResource={schedulingProfilerData}
+            dataResource={timelineData}
             key={key}
-            onFileSelect={importSchedulingProfilerData}
+            onFileSelect={importTimelineData}
             viewState={viewState}
           />
         </Suspense>
       ) : (
-        <Welcome onFileSelect={importSchedulingProfilerData} />
+        <Welcome onFileSelect={importTimelineData} />
       )}
     </div>
   );
diff --git a/packages/react-devtools-timeline/src/SchedulingProfilerContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
similarity index 60%
rename from packages/react-devtools-timeline/src/SchedulingProfilerContext.js
rename to packages/react-devtools-timeline/src/TimelineContext.js
index ff81482c09e7..ebfac421e2c3 100644
--- a/packages/react-devtools-timeline/src/SchedulingProfilerContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -15,33 +15,28 @@ import type {HorizontalScrollStateChangeCallback, ViewState} from './types';
 import type {DataResource} from './createDataResourceFromImportedFile';
 
 export type Context = {|
-  clearSchedulingProfilerData: () => void,
-  importSchedulingProfilerData: (file: File) => void,
-  schedulingProfilerData: DataResource | null,
+  clearTimelineData: () => void,
+  importTimelineData: (file: File) => void,
+  timelineData: DataResource | null,
   viewState: ViewState,
 |};
 
-const SchedulingProfilerContext = createContext<Context>(
-  ((null: any): Context),
-);
-SchedulingProfilerContext.displayName = 'SchedulingProfilerContext';
+const TimelineContext = createContext<Context>(((null: any): Context));
+TimelineContext.displayName = 'TimelineContext';
 
 type Props = {|
   children: React$Node,
 |};
 
-function SchedulingProfilerContextController({children}: Props) {
-  const [
-    schedulingProfilerData,
-    setSchedulingProfilerData,
-  ] = useState<DataResource | null>(null);
+function TimelineContextController({children}: Props) {
+  const [timelineData, setTimelineData] = useState<DataResource | null>(null);
 
-  const clearSchedulingProfilerData = useCallback(() => {
-    setSchedulingProfilerData(null);
+  const clearTimelineData = useCallback(() => {
+    setTimelineData(null);
   }, []);
 
-  const importSchedulingProfilerData = useCallback((file: File) => {
-    setSchedulingProfilerData(createDataResourceFromImportedFile(file));
+  const importTimelineData = useCallback((file: File) => {
+    setTimelineData(createDataResourceFromImportedFile(file));
   }, []);
 
   // Recreate view state any time new profiling data is imported.
@@ -75,28 +70,23 @@ function SchedulingProfilerContextController({children}: Props) {
       },
       viewToMutableViewStateMap: new Map(),
     };
-  }, [schedulingProfilerData]);
+  }, [timelineData]);
 
   const value = useMemo(
     () => ({
-      clearSchedulingProfilerData,
-      importSchedulingProfilerData,
-      schedulingProfilerData,
+      clearTimelineData,
+      importTimelineData,
+      timelineData,
       viewState,
     }),
-    [
-      clearSchedulingProfilerData,
-      importSchedulingProfilerData,
-      schedulingProfilerData,
-      viewState,
-    ],
+    [clearTimelineData, importTimelineData, timelineData, viewState],
   );
 
   return (
-    <SchedulingProfilerContext.Provider value={value}>
+    <TimelineContext.Provider value={value}>
       {children}
-    </SchedulingProfilerContext.Provider>
+    </TimelineContext.Provider>
   );
 }
 
-export {SchedulingProfilerContext, SchedulingProfilerContextController};
+export {TimelineContext, TimelineContextController};

From 54f6ae9b1c0489784f6a95bbe26ffec31816d74a Mon Sep 17 00:00:00 2001
From: Konstantin Popov <konst.hardy@gmail.com>
Date: Fri, 5 Nov 2021 02:49:06 +0300
Subject: [PATCH 1004/1603] Fix small typos (#22701)

---
 packages/react-devtools-shared/src/__tests__/console-test.js    | 2 +-
 packages/react-devtools-shared/src/backend/views/utils.js       | 2 +-
 .../update-stable-version-numbers.js                            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index fef2d9674b6f..1129c153267c 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -69,7 +69,7 @@ describe('console', () => {
     );
   }
 
-  it('should not patch console methods that are not explicitly overriden', () => {
+  it('should not patch console methods that are not explicitly overridden', () => {
     expect(fakeConsole.error).not.toBe(mockError);
     expect(fakeConsole.info).toBe(mockInfo);
     expect(fakeConsole.log).toBe(mockLog);
diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js
index e332c81a0af8..a677c7447efc 100644
--- a/packages/react-devtools-shared/src/backend/views/utils.js
+++ b/packages/react-devtools-shared/src/backend/views/utils.js
@@ -50,7 +50,7 @@ export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
       right: dimensions.borderRight,
       // This width and height won't get used by mergeRectOffsets (since this
       // is not the first rect in the array), but we set them so that this
-      // object typechecks as a ClientRect.
+      // object type checks as a ClientRect.
       width: 0,
       height: 0,
     },
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
index 16bec66b6076..47a0907bafad 100644
--- 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
@@ -132,7 +132,7 @@ const run = async ({cwd, packages, version}, versionsMap) => {
   let diff = '';
   let numFilesModified = 0;
 
-  // Find-and-replace hard coded version (in built JS) for renderers.
+  // 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);

From ee069065db449194a62a5c0dc2f8f6b61fa5e1b8 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 5 Nov 2021 15:58:35 +0000
Subject: [PATCH 1005/1603] devtools: Display root type for root updates in
 "what caused this update?" (#22599)

---
 .../__snapshots__/profilingCache-test.js.snap | 82 +++++++++----------
 .../src/backend/renderer.js                   |  4 +
 .../src/devtools/views/Profiler/Updaters.js   |  6 +-
 3 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 8d7eeb4255a9..92555b0761cd 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -44,7 +44,7 @@ Object {
   "timestamp": 16,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -91,7 +91,7 @@ Object {
   "timestamp": 15,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -127,7 +127,7 @@ Object {
   "timestamp": 18,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -190,7 +190,7 @@ Object {
   "timestamp": 12,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -258,7 +258,7 @@ Object {
   "timestamp": 25,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -307,7 +307,7 @@ Object {
   "timestamp": 35,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -346,7 +346,7 @@ Object {
   "timestamp": 45,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -455,7 +455,7 @@ Object {
           "timestamp": 12,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -562,7 +562,7 @@ Object {
           "timestamp": 25,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -632,7 +632,7 @@ Object {
           "timestamp": 35,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -683,7 +683,7 @@ Object {
           "timestamp": 45,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -954,7 +954,7 @@ Object {
           "timestamp": 11,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1042,7 +1042,7 @@ Object {
           "timestamp": 22,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1149,7 +1149,7 @@ Object {
           "timestamp": 35,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1359,7 +1359,7 @@ Object {
       "timestamp": 13,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -1405,7 +1405,7 @@ Object {
       "timestamp": 34,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -1441,7 +1441,7 @@ Object {
       "timestamp": 44,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -1624,7 +1624,7 @@ Object {
       "timestamp": 24,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 13,
           "key": null,
@@ -1714,7 +1714,7 @@ Object {
       "timestamp": 34,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 7,
           "key": null,
@@ -1892,7 +1892,7 @@ Object {
           "timestamp": 13,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -1962,7 +1962,7 @@ Object {
           "timestamp": 34,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -2013,7 +2013,7 @@ Object {
           "timestamp": 44,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -2256,7 +2256,7 @@ Object {
           "timestamp": 24,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 13,
               "key": null,
@@ -2343,7 +2343,7 @@ Object {
           "timestamp": 34,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 7,
               "key": null,
@@ -2464,7 +2464,7 @@ Object {
       "timestamp": 0,
       "updaters": Array [
         Object {
-          "displayName": "Anonymous",
+          "displayName": "render()",
           "hocDisplayNames": null,
           "id": 1,
           "key": null,
@@ -2541,7 +2541,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2584,7 +2584,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2699,7 +2699,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2740,7 +2740,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -2811,7 +2811,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -2878,7 +2878,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -3029,7 +3029,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -3094,7 +3094,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -3271,7 +3271,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3441,7 +3441,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3523,7 +3523,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3604,7 +3604,7 @@ Object {
   "timestamp": 0,
   "updaters": Array [
     Object {
-      "displayName": "Anonymous",
+      "displayName": "render()",
       "hocDisplayNames": null,
       "id": 1,
       "key": null,
@@ -3739,7 +3739,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -4011,7 +4011,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -4147,7 +4147,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
@@ -4282,7 +4282,7 @@ Object {
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "Anonymous",
+              "displayName": "render()",
               "hocDisplayNames": null,
               "id": 1,
               "key": null,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 218b25538837..9d2005522da4 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -425,6 +425,10 @@ export function getInternalReactConstants(
           getDisplayName(resolvedType, 'Anonymous')
         );
       case HostRoot:
+        const fiberRoot = fiber.stateNode;
+        if (fiberRoot != null && fiberRoot._debugRootType !== null) {
+          return fiberRoot._debugRootType;
+        }
         return null;
       case HostComponent:
         return type;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
index 9e2518612e45..d35ff86d5895 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
@@ -14,6 +14,7 @@ import * as React from 'react';
 import {useContext} from 'react';
 import {ProfilerContext} from './ProfilerContext';
 import styles from './Updaters.css';
+import {ElementTypeRoot} from '../../../types';
 
 export type Props = {|
   commitTree: CommitTree,
@@ -26,8 +27,9 @@ export default function Updaters({commitTree, updaters}: Props) {
   const children =
     updaters.length > 0 ? (
       updaters.map<React$Node>((serializedElement: SerializedElement) => {
-        const {displayName, id, key} = serializedElement;
-        const isVisibleInTree = commitTree.nodes.has(id);
+        const {displayName, id, key, type} = serializedElement;
+        const isVisibleInTree =
+          commitTree.nodes.has(id) && type !== ElementTypeRoot;
         if (isVisibleInTree) {
           return (
             <button

From 327d5c48454aaee0d78fa69b7ef96a14605bf93b Mon Sep 17 00:00:00 2001
From: Esteban <lasesteban@gmail.com>
Date: Sat, 6 Nov 2021 15:16:49 +0100
Subject: [PATCH 1006/1603] Delete unused Circle CI scripts. (#22710)

---
 scripts/circleci/add_build_info_json.sh       |  5 --
 scripts/circleci/bench.sh                     |  5 --
 scripts/circleci/check_minified_errors.sh     | 14 ----
 scripts/circleci/pack_and_store_artifact.sh   | 15 ----
 scripts/circleci/set_up_github_keys.sh        | 12 ---
 scripts/circleci/test_coverage.sh             | 11 ---
 scripts/circleci/update_package_versions.sh   |  5 --
 scripts/release/ci-add-build-info-json.js     | 73 -------------------
 scripts/release/ci-update-package-versions.js | 31 --------
 9 files changed, 171 deletions(-)
 delete mode 100755 scripts/circleci/add_build_info_json.sh
 delete mode 100755 scripts/circleci/bench.sh
 delete mode 100755 scripts/circleci/check_minified_errors.sh
 delete mode 100755 scripts/circleci/pack_and_store_artifact.sh
 delete mode 100755 scripts/circleci/set_up_github_keys.sh
 delete mode 100755 scripts/circleci/test_coverage.sh
 delete mode 100755 scripts/circleci/update_package_versions.sh
 delete mode 100755 scripts/release/ci-add-build-info-json.js
 delete mode 100755 scripts/release/ci-update-package-versions.js

diff --git a/scripts/circleci/add_build_info_json.sh b/scripts/circleci/add_build_info_json.sh
deleted file mode 100755
index 122d859535b4..000000000000
--- a/scripts/circleci/add_build_info_json.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-node ./scripts/release/ci-add-build-info-json.js
diff --git a/scripts/circleci/bench.sh b/scripts/circleci/bench.sh
deleted file mode 100755
index bbb049667a20..000000000000
--- a/scripts/circleci/bench.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash		
-		
-set -e		
-		
-npm run bench
\ No newline at end of file
diff --git a/scripts/circleci/check_minified_errors.sh b/scripts/circleci/check_minified_errors.sh
deleted file mode 100755
index df7673a6ead6..000000000000
--- a/scripts/circleci/check_minified_errors.sh
+++ /dev/null
@@ -1,14 +0,0 @@
-#!/bin/bash
-
-# Ensure errors are minified in production
-
-OUT=$(git --no-pager grep -n --untracked --no-exclude-standard 'FIXME (minify-errors-in-prod)' -- './build/*')
-
-if [ "$OUT" != "" ]; then
-  echo "$OUT";
-  echo -e "\n";
-  echo "Detected an unminified error message in the production build. User-facing errors message must have a corresponding error code in scripts/error-codes/codes.json."
-  exit 1
-fi
-
-exit 0
diff --git a/scripts/circleci/pack_and_store_artifact.sh b/scripts/circleci/pack_and_store_artifact.sh
deleted file mode 100755
index 061101b6fdec..000000000000
--- a/scripts/circleci/pack_and_store_artifact.sh
+++ /dev/null
@@ -1,15 +0,0 @@
-#!/bin/bash
-
-set -e
-
-# Compress build directory into a single tarball for easy download
-tar -zcvf ./build.tgz ./build
-
-# NPM pack all modules to ensure we archive the correct set of files
-cd ./build/node_modules
-for dir in ./* ; do
-  npm pack "$dir"
-done
-
-# Compress packed modules into a single tarball for easy download by the publish script
-tar -zcvf ../../node_modules.tgz ./*.tgz
diff --git a/scripts/circleci/set_up_github_keys.sh b/scripts/circleci/set_up_github_keys.sh
deleted file mode 100755
index 4179f1e35b85..000000000000
--- a/scripts/circleci/set_up_github_keys.sh
+++ /dev/null
@@ -1,12 +0,0 @@
-#!/bin/bash
-
-set -e
-
-if [ -n "$GITHUB_TOKEN" ]; then
-
-  GH_PAGES_DIR=$(pwd)/../react-gh-pages
-  echo "machine github.com login reactjs-bot password $GITHUB_TOKEN" >~/.netrc
-  git config --global user.name "Circle CI"
-  git config --global user.email "circle@reactjs.org"
-
-fi
diff --git a/scripts/circleci/test_coverage.sh b/scripts/circleci/test_coverage.sh
deleted file mode 100755
index af5fa9b7b150..000000000000
--- a/scripts/circleci/test_coverage.sh
+++ /dev/null
@@ -1,11 +0,0 @@
-#!/bin/bash
-
-set -e
-
-yarn test --coverage --maxWorkers=2
-if [ -z "$CI_PULL_REQUEST" ]; then
-  ./node_modules/.bin/coveralls < ./coverage/lcov.info
-fi
-
-# TODO: should we also track prod code coverage somehow?
-# yarn test-prod --coverage
diff --git a/scripts/circleci/update_package_versions.sh b/scripts/circleci/update_package_versions.sh
deleted file mode 100755
index 3661e80cdef7..000000000000
--- a/scripts/circleci/update_package_versions.sh
+++ /dev/null
@@ -1,5 +0,0 @@
-#!/bin/bash
-
-set -e
-
-node ./scripts/release/ci-update-package-versions.js
diff --git a/scripts/release/ci-add-build-info-json.js b/scripts/release/ci-add-build-info-json.js
deleted file mode 100755
index 92af86946af7..000000000000
--- a/scripts/release/ci-add-build-info-json.js
+++ /dev/null
@@ -1,73 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-// This script is run by Circle CI (see ../scripts/circleci).
-// It is not meant to be run as part of the local build or publish process.
-// It exists to share code between the Node release scripts and CI bash scripts.
-
-// IMPORTANT:
-// Changes below should be mirrored in ./build-release-locally-commands/add-build-info-json.js
-
-const {exec} = require('child_process');
-const {existsSync} = require('fs');
-const {join} = require('path');
-
-const run = async () => {
-  const {writeJson, readJson} = require('fs-extra');
-  const {getBuildInfo, getPublicPackages} = require('./utils');
-
-  const cwd = join(__dirname, '..', '..');
-
-  const {
-    branch,
-    buildNumber,
-    checksum,
-    commit,
-    reactVersion,
-  } = await getBuildInfo();
-
-  const isExperimental = process.env.RELEASE_CHANNEL === 'experimental';
-  const packages = getPublicPackages(isExperimental);
-  const packagesDir = join(cwd, 'packages');
-
-  const buildInfoJSON = {
-    branch,
-    buildNumber,
-    checksum,
-    commit,
-    environment: 'ci',
-    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(
-        `${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});
-    }
-  }
-};
-
-// Install (or update) release script dependencies before proceeding.
-// This needs to be done before we require() the first NPM module.
-exec('yarn install', {cwd: __dirname}, (error, stdout, stderr) => {
-  if (error) {
-    console.error(error);
-    process.exit(1);
-  } else {
-    run();
-  }
-});
diff --git a/scripts/release/ci-update-package-versions.js b/scripts/release/ci-update-package-versions.js
deleted file mode 100755
index c5f75eb6b0d2..000000000000
--- a/scripts/release/ci-update-package-versions.js
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/usr/bin/env node
-
-'use strict';
-
-// This script is run by Circle CI (see ../scripts/circleci).
-// It is not meant to be run as part of the local build or publish process.
-// It exists to share code between the Node release scripts and CI bash scripts.
-
-const {exec} = require('child_process');
-const {join} = require('path');
-
-const run = async () => {
-  const {getBuildInfo, updateVersionsForNext} = require('./utils');
-
-  const cwd = join(__dirname, '..', '..');
-
-  const {reactVersion, version} = await getBuildInfo();
-
-  await updateVersionsForNext(cwd, reactVersion, version);
-};
-
-// Install (or update) release script dependencies before proceeding.
-// This needs to be done before we require() the first NPM module.
-exec('yarn install', {cwd: __dirname}, (error, stdout, stderr) => {
-  if (error) {
-    console.error(error);
-    process.exit(1);
-  } else {
-    run();
-  }
-});

From 99a73ac670ce8d71ae8a690e9795d35cbdfa20b6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 8 Nov 2021 12:28:33 -0500
Subject: [PATCH 1007/1603] Timeline: Improved snapshot view (#22706)

---
 .../react-devtools-timeline/src/CanvasPage.js |  2 +
 .../src/EventTooltip.js                       | 34 ++++++++++++--
 .../react-devtools-timeline/src/constants.js  |  2 +
 .../src/content-views/SnapshotsView.js        | 46 +++++++++++++++++--
 .../src/content-views/constants.js            | 10 +++-
 .../__tests__/preprocessData-test.internal.js |  4 ++
 .../src/import-worker/preprocessData.js       | 20 +++++++-
 packages/react-devtools-timeline/src/types.js |  1 +
 .../src/view-base/View.js                     |  4 +-
 9 files changed, 113 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index ab5c828280c0..4084fa4eeb86 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -753,8 +753,10 @@ function AutoSizedCanvas({
         <EventTooltip
           canvasRef={canvasRef}
           data={data}
+          height={height}
           hoveredEvent={hoveredEvent}
           origin={mouseLocation}
+          width={width}
         />
       )}
     </Fragment>
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index d3ca5d5625f1..1cb4b3d8bbf2 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -34,8 +34,10 @@ const MAX_TOOLTIP_TEXT_LENGTH = 60;
 type Props = {|
   canvasRef: {|current: HTMLCanvasElement | null|},
   data: ReactProfilerData,
+  height: number,
   hoveredEvent: ReactHoverContextInfo | null,
   origin: Point,
+  width: number,
 |};
 
 function getSchedulingEventLabel(event: SchedulingEvent): string | null {
@@ -71,8 +73,10 @@ function getReactMeasureLabel(type): string | null {
 export default function EventTooltip({
   canvasRef,
   data,
+  height,
   hoveredEvent,
   origin,
+  width,
 }: Props) {
   const ref = useSmartTooltip({
     canvasRef,
@@ -111,7 +115,9 @@ export default function EventTooltip({
       <TooltipSchedulingEvent data={data} schedulingEvent={schedulingEvent} />
     );
   } else if (snapshot !== null) {
-    content = <TooltipSnapshot snapshot={snapshot} />;
+    content = (
+      <TooltipSnapshot height={height} snapshot={snapshot} width={width} />
+    );
   } else if (suspenseEvent !== null) {
     content = <TooltipSuspenseEvent suspenseEvent={suspenseEvent} />;
   } else if (measure !== null) {
@@ -333,12 +339,34 @@ const TooltipSchedulingEvent = ({
   );
 };
 
-const TooltipSnapshot = ({snapshot}: {|snapshot: Snapshot|}) => {
+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={{width: snapshot.width / 2, height: snapshot.height / 2}}
+      style={{height: safeHeight, width: safeWidth}}
     />
   );
 };
diff --git a/packages/react-devtools-timeline/src/constants.js b/packages/react-devtools-timeline/src/constants.js
index e29b8901d81f..e9b18ab65716 100644
--- a/packages/react-devtools-timeline/src/constants.js
+++ b/packages/react-devtools-timeline/src/constants.js
@@ -16,3 +16,5 @@ 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/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
index fbaa7c5d8357..b027acae3769 100644
--- a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
@@ -24,11 +24,12 @@ import {
   rectEqualToRect,
   View,
 } from '../view-base';
-import {BORDER_SIZE, COLORS, SNAPSHOT_HEIGHT} from './constants';
+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: ReactProfilerData;
 
@@ -39,7 +40,7 @@ export class SnapshotsView extends View {
 
     this._intrinsicSize = {
       width: profilerData.duration,
-      height: SNAPSHOT_HEIGHT,
+      height: profilerData.snapshotHeight,
     };
     this._profilerData = profilerData;
   }
@@ -49,6 +50,7 @@ export class SnapshotsView extends View {
   }
 
   draw(context: CanvasRenderingContext2D) {
+    const snapshotHeight = this._profilerData.snapshotHeight;
     const {visibleArea} = this;
 
     context.fillStyle = COLORS.BACKGROUND;
@@ -72,8 +74,8 @@ export class SnapshotsView extends View {
         break;
       }
 
-      const scaledHeight = SNAPSHOT_HEIGHT;
-      const scaledWidth = (snapshot.width * SNAPSHOT_HEIGHT) / snapshot.height;
+      const scaledHeight = snapshotHeight;
+      const scaledWidth = (snapshot.width * snapshotHeight) / snapshot.height;
 
       const imageRect: Rect = {
         origin: {
@@ -96,6 +98,28 @@ export class SnapshotsView extends View {
 
       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) {
@@ -208,15 +232,29 @@ export class SnapshotsView extends View {
     }
 
     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/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
index 216234508f5e..f2920ac19b51 100644
--- a/packages/react-devtools-timeline/src/content-views/constants.js
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -24,7 +24,7 @@ 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_HEIGHT = 35;
+export const SNAPSHOT_SCRUBBER_SIZE = 3;
 
 export const INTERVAL_TIMES = [
   1,
@@ -89,6 +89,8 @@ export let COLORS = {
   REACT_THROWN_ERROR_HOVER: '',
   REACT_WORK_BORDER: '',
   SCROLL_CARET: '',
+  SCRUBBER_BACKGROUND: '',
+  SCRUBBER_BORDER: '',
   TEXT_COLOR: '',
   TEXT_DIM_COLOR: '',
   TIME_MARKER_LABEL: '',
@@ -230,6 +232,12 @@ export function updateColorsToMatchTheme(element: Element): boolean {
       '--color-timeline-react-work-border',
     ),
     SCROLL_CARET: computedStyle.getPropertyValue('--color-scroll-caret'),
+    SCRUBBER_BACKGROUND: 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',
diff --git a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
index 758afc1e15f2..f902ddc57e14 100644
--- a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
+++ b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
@@ -354,6 +354,7 @@ describe('preprocessData', () => {
           "otherUserTimingMarks": Array [],
           "reactVersion": "17.0.3",
           "schedulingEvents": Array [],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
@@ -572,6 +573,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 1,
           "suspenseEvents": Array [],
@@ -765,6 +767,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
@@ -1129,6 +1132,7 @@ describe('preprocessData', () => {
               "warning": null,
             },
           ],
+          "snapshotHeight": 0,
           "snapshots": Array [],
           "startTime": 4,
           "suspenseEvents": Array [],
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
index caf27e707563..98e802793f6a 100644
--- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -29,7 +29,11 @@ import type {
   SchedulingEvent,
   SuspenseEvent,
 } from '../types';
-import {REACT_TOTAL_NUM_LANES, SCHEDULING_PROFILER_VERSION} from '../constants';
+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';
@@ -1066,6 +1070,7 @@ export default async function preprocessData(
     reactVersion: null,
     schedulingEvents: [],
     snapshots: [],
+    snapshotHeight: 0,
     startTime: 0,
     suspenseEvents: [],
     thrownErrors: [],
@@ -1189,5 +1194,18 @@ export default async function preprocessData(
   // 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/types.js b/packages/react-devtools-timeline/src/types.js
index cf504229b01c..5a532495187e 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -202,6 +202,7 @@ export type ReactProfilerData = {|
   reactVersion: string | null,
   schedulingEvents: SchedulingEvent[],
   snapshots: Snapshot[],
+  snapshotHeight: number,
   startTime: number,
   suspenseEvents: SuspenseEvent[],
   thrownErrors: ThrownError[],
diff --git a/packages/react-devtools-timeline/src/view-base/View.js b/packages/react-devtools-timeline/src/view-base/View.js
index 0edac1120862..3e2a5a06f1cd 100644
--- a/packages/react-devtools-timeline/src/view-base/View.js
+++ b/packages/react-devtools-timeline/src/view-base/View.js
@@ -197,7 +197,9 @@ export class View {
       !sizeIsEmpty(this.visibleArea.size)
     ) {
       this.layoutSubviews();
-      if (this._needsDisplay) this._needsDisplay = false;
+      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.

From 2db6d6a5a7a2ecf74610d5a55732d6753b15b836 Mon Sep 17 00:00:00 2001
From: Yash Joshi <jyash97@gmail.com>
Date: Tue, 9 Nov 2021 01:47:22 +0530
Subject: [PATCH 1008/1603] fix(devtools): expose css vars to reach-ui portal
 components (#22716)

---
 .../src/devtools/views/Button.js              |  9 ++---
 .../devtools/views/Components/OwnersStack.js  |  9 +++--
 .../{ => Components/reach-ui}/Tooltip.css     |  0
 .../views/Components/reach-ui/menu-button.js  | 28 +++++++++++++++
 .../views/Components/reach-ui/tooltip.js      | 35 +++++++++++++++++++
 .../views/Settings/SettingsContext.js         | 28 ---------------
 .../src/devtools/views/TabBar.js              |  5 ++-
 .../src/devtools/views/ThemeProvider.js       | 18 ++++------
 .../src/devtools/views/Toggle.js              |  9 ++---
 .../src/devtools/views/root.css               | 28 +--------------
 .../src/devtools/views/useThemeStyles.js      | 28 +++++++++++++++
 11 files changed, 112 insertions(+), 85 deletions(-)
 rename packages/react-devtools-shared/src/devtools/views/{ => Components/reach-ui}/Tooltip.css (100%)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/useThemeStyles.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index 0d706fc2ebd6..aa006cbbc722 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -8,10 +8,9 @@
  */
 
 import * as React from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Button.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -35,11 +34,7 @@ export default function Button({
   );
 
   if (title) {
-    button = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {button}
-      </Tooltip>
-    );
+    button = <Tooltip label={title}>{button}</Tooltip>;
   }
 
   return button;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index d7efafee6c52..cc9c43fd775f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -16,8 +16,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import Tooltip from '@reach/tooltip';
-import {Menu, MenuList, MenuButton, MenuItem} from '@reach/menu-button';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import Toggle from '../Toggle';
@@ -26,6 +24,13 @@ import {OwnersListContext} 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 './types';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
similarity index 100%
rename from packages/react-devtools-shared/src/devtools/views/Tooltip.css
rename to packages/react-devtools-shared/src/devtools/views/Components/reach-ui/Tooltip.css
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 000000000000..cee8021a191f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {
+  Menu,
+  MenuList as ReachMenuList,
+  MenuButton,
+  MenuItem,
+} from '@reach/menu-button';
+import useThemeStyles from '../../useThemeStyles';
+
+const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
+  const style = useThemeStyles();
+  return (
+    <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 000000000000..d3f07258c8b5
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * 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,
+  ...
+}) => {
+  const style = useThemeStyles();
+  return (
+    <ReachTooltip
+      className={`${tooltipStyles.Tooltip} ${className}`}
+      style={style}
+      {...props}>
+      {children}
+    </ReachTooltip>
+  );
+};
+
+export default Tooltip;
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 7f8cfe614b0c..09c815b49b97 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -248,28 +248,6 @@ function SettingsContextController({
   );
 }
 
-function setStyleVariable(
-  name: string,
-  value: string,
-  documentElements: DocumentElements,
-) {
-  documentElements.forEach(documentElement =>
-    documentElement.style.setProperty(name, value),
-  );
-}
-
-function updateStyleHelper(
-  themeKey: string,
-  style: string,
-  documentElements: DocumentElements,
-) {
-  setStyleVariable(
-    `--${style}`,
-    `var(--${themeKey}-${style})`,
-    documentElements,
-  );
-}
-
 export function updateDisplayDensity(
   displayDensity: DisplayDensity,
   documentElements: DocumentElements,
@@ -296,12 +274,6 @@ export function updateThemeVariables(
     // $FlowFixMe scrollbarColor is missing in CSSStyleDeclaration
     documentElement.style.scrollbarColor = `var(${`--${theme}-color-scroll-thumb`}) var(${`--${theme}-color-scroll-track`})`;
   });
-
-  // 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 we need to also set @reach/tooltip specific styles on the root.
-  updateStyleHelper(theme, 'color-tooltip-background', documentElements);
-  updateStyleHelper(theme, 'color-tooltip-text', documentElements);
 }
 
 export {SettingsContext, SettingsContextController};
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index c195710a42b4..32bd32827f14 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -9,11 +9,10 @@
 
 import * as React from 'react';
 import {Fragment, useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 import Icon from './Icon';
 
 import styles from './TabBar.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 import type {IconType} from './Icon';
 
@@ -127,7 +126,7 @@ export default function TabBar({
 
         if (title) {
           button = (
-            <Tooltip key={id} className={tooltipStyles.Tooltip} label={title}>
+            <Tooltip key={id} label={title}>
               {button}
             </Tooltip>
           );
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index 8fb93469ad4a..a353b4c6eec6 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -8,22 +8,18 @@
  */
 
 import * as React from 'react';
-import {useContext, useMemo} from 'react';
-import {SettingsContext} from './Settings/SettingsContext';
-import {THEME_STYLES} from '../../constants';
+import useThemeStyles from './useThemeStyles';
 
 export default function ThemeProvider({children}: {|children: React$Node|}) {
-  const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
+  const themeStyle = useThemeStyles();
 
-  const style = useMemo(
-    () => ({
+  const style = React.useMemo(() => {
+    return {
+      ...themeStyle,
       width: '100%',
       height: '100%',
-      ...THEME_STYLES[displayDensity],
-      ...THEME_STYLES[theme === 'auto' ? browserTheme : theme],
-    }),
-    [theme, browserTheme, displayDensity],
-  );
+    };
+  }, [themeStyle]);
 
   return <div style={style}>{children}</div>;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
index c5961a9bbfc5..20e78fee772a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -9,10 +9,9 @@
 
 import * as React from 'react';
 import {useCallback} from 'react';
-import Tooltip from '@reach/tooltip';
 
 import styles from './Toggle.css';
-import tooltipStyles from './Tooltip.css';
+import Tooltip from './Components/reach-ui/tooltip';
 
 type Props = {
   children: React$Node,
@@ -58,11 +57,7 @@ export default function Toggle({
   );
 
   if (title) {
-    toggle = (
-      <Tooltip className={tooltipStyles.Tooltip} label={title}>
-        {toggle}
-      </Tooltip>
-    );
+    toggle = <Tooltip label={title}>{toggle}</Tooltip>;
   }
 
   return toggle;
diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
index 9bb749ff2370..cbf8ece0066a 100644
--- a/packages/react-devtools-shared/src/devtools/views/root.css
+++ b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -1,36 +1,10 @@
 :root {
-  /**
-   * The light and dark theme styles below should be kept in sync with 'react-devtools-shared/src/constants'
-   * They are repeated here 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).
-   */
-
-  /* Light theme */
-  --light-color-scroll-thumb: #c2c2c2;
-  --light-color-scroll-track: #fafafa;
-  --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
-  --light-color-tooltip-text: #ffffff;
-
-  /* Dark theme */
-  --dark-color-scroll-thumb: #afb3b9;
-  --dark-color-scroll-track: #313640;
-  --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
-  --dark-color-tooltip-text: #000000;
-
   /* Font smoothing */
   --font-smoothing: auto;
 
-  /* Compact density */
-  --compact-line-height-data: 18px;
-  --compact-root-font-size: 16px;
-
-  /* Comfortable density */
-  --comfortable-line-height-data: 22px;
-  --comfortable-root-font-size: 20px;
-
   /* GitHub.com system fonts */
   --font-family-monospace: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo,
     Courier, monospace;
   --font-family-sans: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica,
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
-}
\ No newline at end of file
+}
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 000000000000..009cf1a50d57
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {useContext, useMemo} from 'react';
+import {SettingsContext} from './Settings/SettingsContext';
+import {THEME_STYLES} from '../../constants';
+
+const useThemeStyles = () => {
+  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;

From 2b77ab26adc2601dc223ede75ff4d19bc19c8684 Mon Sep 17 00:00:00 2001
From: Yash Joshi <jyash97@gmail.com>
Date: Tue, 9 Nov 2021 03:05:35 +0530
Subject: [PATCH 1009/1603] fix(devtools): accept json file in import fileinput
 (#22717)

---
 .../src/devtools/views/Profiler/ProfilingImportExportButtons.js  | 1 +
 packages/react-devtools-timeline/src/ImportButton.js             | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 574da0639e97..5b53e04410df 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -122,6 +122,7 @@ export default function ProfilingImportExportButtons() {
         ref={inputRef}
         className={styles.Input}
         type="file"
+        accept=".json"
         onChange={
           selectedTabID === 'timeline'
             ? importTimelineDataWrapper
diff --git a/packages/react-devtools-timeline/src/ImportButton.js b/packages/react-devtools-timeline/src/ImportButton.js
index 6f018bf30934..12eb6623fbe6 100644
--- a/packages/react-devtools-timeline/src/ImportButton.js
+++ b/packages/react-devtools-timeline/src/ImportButton.js
@@ -46,6 +46,7 @@ export default function ImportButton({children = null, onFileSelect}: Props) {
         ref={inputRef}
         className={styles.Input}
         type="file"
+        accept=".json"
         onChange={handleFiles}
         tabIndex={-1}
       />

From 827021c4e30d632f48cdaa41b2e6b2da8719eb8d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 9 Nov 2021 13:55:27 +0000
Subject: [PATCH 1010/1603] Changelog for eslint-plugin-react-hooks@4.3.0

---
 packages/eslint-plugin-react-hooks/CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index b3e5d1736cb4..6a560c6012f4 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 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.

From c3f34e4beb67a4ddd85a9456ebc9013d123aa6ee Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 9 Nov 2021 13:58:55 +0000
Subject: [PATCH 1011/1603] eslint-plugin-react-hooks@4.3.0

---
 packages/eslint-plugin-react-hooks/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 1cda188fc5dc..6bf810a7712b 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 0ddd69d1226c660ee4930b0dce7860b706e548bc Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 9 Nov 2021 13:40:50 -0500
Subject: [PATCH 1012/1603] Throw on hydration mismatch and force client
 rendering if boundary hasn't suspended within concurrent root (#22629)

* Throw on hydration mismatch

* remove debugger

* update error message

* update error message part2...

* fix test?

* test? :(

* tests 4real

* remove useRefAccessWarning gating

* split markSuspenseBoundary and getNearestBoundary

* also assert html is correct

* replace-fork

* also remove client render flag on suspend

* replace-fork

* fix mismerge????
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  59 +---
 ...DOMServerPartialHydration-test.internal.js | 102 +++++-
 .../src/ReactFiberHydrationContext.new.js     |  11 +
 .../src/ReactFiberHydrationContext.old.js     |  11 +
 .../src/ReactFiberThrow.new.js                | 302 +++++++++---------
 .../src/ReactFiberThrow.old.js                | 302 +++++++++---------
 scripts/error-codes/codes.json                |   3 +-
 7 files changed, 444 insertions(+), 346 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index abbbdc157875..8c282e1bb730 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1677,25 +1677,19 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   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.unstable_yieldValue(text);
       return text;
     }
-
     function App() {
       const value = useSyncExternalStore(
         subscribe,
@@ -1703,19 +1697,17 @@ describe('ReactDOMFizzServer', () => {
         getServerSnapshot,
       );
       return (
-        <div ref={ref}>
+        <div>
           <Child text={value} />
         </div>
       );
     }
-
     const loggedErrors = [];
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-
         {
           onError(x) {
             loggedErrors.push(x);
@@ -1726,56 +1718,43 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    const serverRenderedDiv = container.getElementsByTagName('div')[0];
-
     ReactDOM.hydrateRoot(container, <App />);
 
-    // The first paint uses the server snapshot
-    expect(Scheduler).toFlushUntilNextPaint(['server']);
-    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-    // Hydration succeeded
-    expect(ref.current).toEqual(serverRenderedDiv);
-
-    // Asynchronously we detect that the store has changed on the client,
-    // and patch up the inconsistency
-    expect(Scheduler).toFlushUntilNextPaint(['client']);
+    expect(() => {
+      // The first paint switches to client rendering due to mismatch
+      expect(Scheduler).toFlushUntilNextPaint(['client']);
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+      {withoutStack: true},
+    );
     expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    expect(ref.current).toEqual(serverRenderedDiv);
   });
 
   // The selector implementation uses the lazy ref initialization pattern
-  // @gate !(enableUseRefAccessWarning && __DEV__)
   // @gate experimental
   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.unstable_yieldValue(text);
       return text;
     }
-
     function App() {
       const {env} = useSyncExternalStoreWithSelector(
         subscribe,
@@ -1790,14 +1769,12 @@ describe('ReactDOMFizzServer', () => {
         </div>
       );
     }
-
     const loggedErrors = [];
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <Suspense fallback="Loading...">
           <App />
         </Suspense>,
-
         {
           onError(x) {
             loggedErrors.push(x);
@@ -1808,21 +1785,17 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    const serverRenderedDiv = container.getElementsByTagName('div')[0];
-
     ReactDOM.hydrateRoot(container, <App />);
 
-    // The first paint uses the server snapshot
-    expect(Scheduler).toFlushUntilNextPaint(['server']);
-    expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-    // Hydration succeeded
-    expect(ref.current).toEqual(serverRenderedDiv);
-
-    // Asynchronously we detect that the store has changed on the client,
-    // and patch up the inconsistency
-    expect(Scheduler).toFlushUntilNextPaint(['client']);
+    // The first paint uses the client due to mismatch forcing client render
+    expect(() => {
+      // The first paint switches to client rendering due to mismatch
+      expect(Scheduler).toFlushUntilNextPaint(['client']);
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+      {withoutStack: true},
+    );
     expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    expect(ref.current).toEqual(serverRenderedDiv);
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 505a100df3aa..9aab3bf94536 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -197,12 +197,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     ReactDOM.hydrateRoot(container, <App />);
-    expect(() => {
-      Scheduler.unstable_flushAll();
-    }).toErrorDev(
-      // TODO: This error should not be logged in this case. It's a false positive.
-      'Did not expect server HTML to contain the text node "Hello" in <div>.',
-    );
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // Expect the server-generated HTML to stay intact.
@@ -218,6 +213,101 @@ describe('ReactDOMServerPartialHydration', () => {
     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.unstable_yieldValue('Suspend');
+        throw promise;
+      } else {
+        Scheduler.unstable_yieldValue('Hello');
+        return 'Hello';
+      }
+    }
+    function Component({shouldMismatch}) {
+      Scheduler.unstable_yieldValue('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('div');
+    container.innerHTML = finalHTML;
+    expect(Scheduler).toHaveYielded([
+      '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;
+
+    ReactDOM.hydrateRoot(container, <App />);
+    expect(Scheduler).toFlushAndYield([
+      'Suspend',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+    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;
+
+    expect(Scheduler).toFlushAndYield([
+      // first pass, mismatches at end
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+      // second pass as client render
+      'Hello',
+      'Component',
+      'Component',
+      'Component',
+      'Component',
+    ]);
+
+    // Client rendered - suspense comment nodes removed
+    expect(container.innerHTML).toBe(
+      'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
+    );
+  });
+
   it('calls the hydration callbacks after hydration or deletion', async () => {
     let suspend = false;
     let resolve;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index eabc5e43116b..5e915579a7c0 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
 import type {
   Instance,
   TextInstance,
@@ -323,12 +324,21 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
+function throwOnHydrationMismatchIfConcurrentMode(fiber) {
+  if ((fiber.mode & ConcurrentMode) !== NoMode) {
+    throw new Error(
+      'An error occurred during hydration. The server HTML was replaced with client content',
+    );
+  }
+}
+
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -337,6 +347,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 48e60581e0f2..e7e08d5f3b8b 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import {NoMode, ConcurrentMode} from './ReactTypeOfMode';
 import type {
   Instance,
   TextInstance,
@@ -323,12 +324,21 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
+function throwOnHydrationMismatchIfConcurrentMode(fiber) {
+  if ((fiber.mode & ConcurrentMode) !== NoMode) {
+    throw new Error(
+      'An error occurred during hydration. The server HTML was replaced with client content',
+    );
+  }
+}
+
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -337,6 +347,7 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
+    throwOnHydrationMismatchIfConcurrentMode(fiber);
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 85728d96bb73..cd9931687ba5 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -268,158 +268,157 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber: Fiber,
-  sourceFiber: Fiber,
-  root: FiberRoot,
-  rootRenderLanes: Lanes,
-): Fiber | null {
+function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
+  let node = returnFiber;
   const hasInvisibleParentBoundary = hasSuspenseContext(
     suspenseStackCursor.current,
     (InvisibleParentSuspenseContext: SuspenseContext),
   );
-  let node = returnFiber;
   do {
     if (
       node.tag === SuspenseComponent &&
       shouldCaptureSuspense(node, hasInvisibleParentBoundary)
     ) {
-      // Found the nearest boundary.
-      const suspenseBoundary = node;
-
-      // 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 ((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;
+      return node;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+  return null;
+}
 
-          // 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);
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary: Fiber,
+  returnFiber: Fiber,
+  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 ((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;
 
-          if (supportsPersistence && enablePersistentOffscreenHostContainer) {
-            // Another legacy Suspense quirk. In persistent mode, if this is the
-            // initial mount, override the props of the host container to hide
-            // its contents.
-            const currentSuspenseBoundary = suspenseBoundary.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
-              }
-            }
-          }
+      // 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(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
-            }
+      if (supportsPersistence && enablePersistentOffscreenHostContainer) {
+        // Another legacy Suspense quirk. In persistent mode, if this is the
+        // initial mount, override the props of the host container to hide
+        // its contents.
+        const currentSuspenseBoundary = suspenseBoundary.alternate;
+        if (currentSuspenseBoundary === null) {
+          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+          const offscreenContainer = offscreenFiber.child;
+          if (offscreenContainer !== null) {
+            const children = offscreenContainer.memoizedProps.children;
+            const containerProps = getOffscreenContainerProps(
+              'hidden',
+              children,
+            );
+            offscreenContainer.pendingProps = containerProps;
+            offscreenContainer.memoizedProps = containerProps;
           }
+        }
+      }
 
-          // 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);
+      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(NoTimestamp, SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update, 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;
+      // 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);
     }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== null);
+    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.
 
-  // Could not find a Suspense boundary capable of capturing.
-  return null;
+  // 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(
@@ -458,13 +457,16 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-      returnFiber,
-      sourceFiber,
-      root,
-      rootRenderLanes,
-    );
+    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
     if (suspenseBoundary !== null) {
+      suspenseBoundary.flags &= ~ForceClientRender;
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
       attachWakeableListeners(
         suspenseBoundary,
         root,
@@ -487,20 +489,24 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // 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.
-      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
       if (suspenseBoundary !== null) {
-        // Set a flag to indicate that we should try rendering the normal
-        // children again, not the fallback.
-        suspenseBoundary.flags |= ForceClientRender;
+        if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
+          // Set a flag to indicate that we should try rendering the normal
+          // children again, not the fallback.
+          suspenseBoundary.flags |= ForceClientRender;
+        }
+        markSuspenseBoundaryShouldCapture(
+          suspenseBoundary,
+          returnFiber,
+          sourceFiber,
+          root,
+          rootRenderLanes,
+        );
         return;
       }
     } else {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 27b0719ba853..8f6d18a48dea 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -268,158 +268,157 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function markNearestSuspenseBoundaryShouldCapture(
-  returnFiber: Fiber,
-  sourceFiber: Fiber,
-  root: FiberRoot,
-  rootRenderLanes: Lanes,
-): Fiber | null {
+function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
+  let node = returnFiber;
   const hasInvisibleParentBoundary = hasSuspenseContext(
     suspenseStackCursor.current,
     (InvisibleParentSuspenseContext: SuspenseContext),
   );
-  let node = returnFiber;
   do {
     if (
       node.tag === SuspenseComponent &&
       shouldCaptureSuspense(node, hasInvisibleParentBoundary)
     ) {
-      // Found the nearest boundary.
-      const suspenseBoundary = node;
-
-      // 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 ((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;
+      return node;
+    }
+    // This boundary already captured during this render. Continue to the next
+    // boundary.
+    node = node.return;
+  } while (node !== null);
+  return null;
+}
 
-          // 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);
+function markSuspenseBoundaryShouldCapture(
+  suspenseBoundary: Fiber,
+  returnFiber: Fiber,
+  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 ((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;
 
-          if (supportsPersistence && enablePersistentOffscreenHostContainer) {
-            // Another legacy Suspense quirk. In persistent mode, if this is the
-            // initial mount, override the props of the host container to hide
-            // its contents.
-            const currentSuspenseBoundary = suspenseBoundary.alternate;
-            if (currentSuspenseBoundary === null) {
-              const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-              const offscreenContainer = offscreenFiber.child;
-              if (offscreenContainer !== null) {
-                const children = offscreenContainer.memoizedProps.children;
-                const containerProps = getOffscreenContainerProps(
-                  'hidden',
-                  children,
-                );
-                offscreenContainer.pendingProps = containerProps;
-                offscreenContainer.memoizedProps = containerProps;
-              }
-            }
-          }
+      // 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(NoTimestamp, SyncLane);
-              update.tag = ForceUpdate;
-              enqueueUpdate(sourceFiber, update, SyncLane);
-            }
+      if (supportsPersistence && enablePersistentOffscreenHostContainer) {
+        // Another legacy Suspense quirk. In persistent mode, if this is the
+        // initial mount, override the props of the host container to hide
+        // its contents.
+        const currentSuspenseBoundary = suspenseBoundary.alternate;
+        if (currentSuspenseBoundary === null) {
+          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
+          const offscreenContainer = offscreenFiber.child;
+          if (offscreenContainer !== null) {
+            const children = offscreenContainer.memoizedProps.children;
+            const containerProps = getOffscreenContainerProps(
+              'hidden',
+              children,
+            );
+            offscreenContainer.pendingProps = containerProps;
+            offscreenContainer.memoizedProps = containerProps;
           }
+        }
+      }
 
-          // 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);
+      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(NoTimestamp, SyncLane);
+          update.tag = ForceUpdate;
+          enqueueUpdate(sourceFiber, update, 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;
+      // 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);
     }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== null);
+    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.
 
-  // Could not find a Suspense boundary capable of capturing.
-  return null;
+  // 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(
@@ -458,13 +457,16 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-      returnFiber,
-      sourceFiber,
-      root,
-      rootRenderLanes,
-    );
+    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
     if (suspenseBoundary !== null) {
+      suspenseBoundary.flags &= ~ForceClientRender;
+      markSuspenseBoundaryShouldCapture(
+        suspenseBoundary,
+        returnFiber,
+        sourceFiber,
+        root,
+        rootRenderLanes,
+      );
       attachWakeableListeners(
         suspenseBoundary,
         root,
@@ -487,20 +489,24 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // 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.
-      const suspenseBoundary = markNearestSuspenseBoundaryShouldCapture(
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
       if (suspenseBoundary !== null) {
-        // Set a flag to indicate that we should try rendering the normal
-        // children again, not the fallback.
-        suspenseBoundary.flags |= ForceClientRender;
+        if ((suspenseBoundary.flags & ShouldCapture) === NoFlags) {
+          // Set a flag to indicate that we should try rendering the normal
+          // children again, not the fallback.
+          suspenseBoundary.flags |= ForceClientRender;
+        }
+        markSuspenseBoundaryShouldCapture(
+          suspenseBoundary,
+          returnFiber,
+          sourceFiber,
+          root,
+          rootRenderLanes,
+        );
         return;
       }
     } else {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 93391eb309d4..6703e2cd3653 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -402,5 +402,6 @@
   "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."
+  "417": "React currently only supports piping to one writable stream.",
+  "418": "An error occurred during hydration. The server HTML was replaced with client content"
 }

From ff9897d23ec713d4e0c802386dffe4024916749e Mon Sep 17 00:00:00 2001
From: irinakk <irinakk@hotmail.com>
Date: Wed, 10 Nov 2021 04:22:19 +0800
Subject: [PATCH 1013/1603] [React Refresh] support typescript namespace syntax
 (#22621)

* [React Refresh] support typescript namespace syntax

* [React Refresh] handle nested namespace

Co-authored-by: Wang Yilin <wang_yil@worksap.co.jp>
---
 package.json                                  |   3 +-
 .../src/ReactFreshBabelPlugin.js              |  77 +++++++++--
 .../__tests__/ReactFreshBabelPlugin-test.js   |  25 ++++
 .../__tests__/ReactFreshIntegration-test.js   | 126 +++++++++++++-----
 .../ReactFreshBabelPlugin-test.js.snap        |  28 ++++
 yarn.lock                                     |  13 ++
 6 files changed, 227 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index e4ea1c83be80..fb428f35c04b 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
     "@babel/plugin-syntax-jsx": "^7.10.4",
+    "@babel/plugin-syntax-typescript": "^7.14.5",
     "@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",
@@ -35,7 +36,6 @@
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
     "@babel/traverse": "^7.11.0",
-    "web-streams-polyfill": "^3.1.1",
     "abort-controller": "^3.0.0",
     "art": "0.10.1",
     "babel-eslint": "^10.0.3",
@@ -96,6 +96,7 @@
     "through2": "^3.0.1",
     "tmp": "^0.1.0",
     "typescript": "^3.7.5",
+    "web-streams-polyfill": "^3.1.1",
     "webpack": "^4.41.2",
     "yargs": "^15.3.1"
   },
diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js
index 64013db181a3..9d1aed0d1d79 100644
--- a/packages/react-refresh/src/ReactFreshBabelPlugin.js
+++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js
@@ -478,11 +478,16 @@ export default function(babel, opts = {}) {
           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;
@@ -494,6 +499,28 @@ export default function(babel, opts = {}) {
             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.
@@ -512,20 +539,17 @@ export default function(babel, opts = {}) {
           seenForRegistration.add(node);
           // Don't mutate the tree above this point.
 
+          const innerName = modulePrefix + inferredName;
           // export function Named() {}
           // function Named() {}
-          findInnerComponents(
-            inferredName,
-            path,
-            (persistentID, targetExpr) => {
-              const handle = createRegistration(programPath, persistentID);
-              insertAfterPath.insertAfter(
-                t.expressionStatement(
-                  t.assignmentExpression('=', handle, targetExpr),
-                ),
-              );
-            },
-          );
+          findInnerComponents(innerName, path, (persistentID, targetExpr) => {
+            const handle = createRegistration(programPath, persistentID);
+            insertAfterPath.insertAfter(
+              t.expressionStatement(
+                t.assignmentExpression('=', handle, targetExpr),
+              ),
+            );
+          });
         },
         exit(path) {
           const node = path.node;
@@ -679,11 +703,16 @@ export default function(babel, opts = {}) {
         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;
@@ -696,6 +725,27 @@ export default function(babel, opts = {}) {
             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)) {
@@ -710,8 +760,9 @@ export default function(babel, opts = {}) {
         }
         const declPath = declPaths[0];
         const inferredName = declPath.node.id.name;
+        const innerName = modulePrefix + inferredName;
         findInnerComponents(
-          inferredName,
+          innerName,
           declPath,
           (persistentID, targetExpr, targetPath) => {
             if (targetPath === null) {
diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
index f56f16069dd7..d528d46bb8ea 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js
@@ -536,4 +536,29 @@ describe('ReactFreshBabelPlugin', () => {
       `),
     ).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
index 09edf1d89728..8a98fe097f1b 100644
--- a/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFreshIntegration-test.js
@@ -18,6 +18,7 @@ let act;
 
 const babel = require('@babel/core');
 const freshPlugin = require('react-refresh/babel');
+const ts = require('typescript');
 
 describe('ReactFreshIntegration', () => {
   let container;
@@ -46,42 +47,72 @@ describe('ReactFreshIntegration', () => {
     }
   });
 
+  function executeCommon(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 executeCompiled(compiled) {
+    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 $RefreshReg$(type, id) {
+    ReactFreshRuntime.register(type, id);
+  }
+
+  function $RefreshSig$() {
+    return ReactFreshRuntime.createSignatureFunctionForTransform();
+  }
+
   describe('with compiled destructuring', () => {
-    runTests(true);
+    runTests(executeCommon, testCommon);
   });
 
   describe('without compiled destructuring', () => {
-    runTests(false);
+    runTests(executeCommon, testCommon);
   });
 
-  function runTests(compileDestructuring) {
-    function execute(source) {
-      const compiled = babel.transform(source, {
+  describe('with typescript syntax', () => {
+    runTests(function(source) {
+      const typescriptSource = babel.transform(source, {
         babelrc: false,
+        configFile: false,
         presets: ['@babel/react'],
         plugins: [
           [freshPlugin, {skipEnvCheck: true}],
-          '@babel/plugin-transform-modules-commonjs',
-          compileDestructuring && '@babel/plugin-transform-destructuring',
-        ].filter(Boolean),
+          ['@babel/plugin-syntax-typescript', {isTSX: true}],
+        ],
       }).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;
-    }
+      const compiled = ts.transpileModule(typescriptSource, {
+        module: ts.ModuleKind.CommonJS,
+      }).outputText;
+      return executeCompiled(compiled);
+    }, testTypescript);
+  });
 
+  function runTests(execute, test) {
     function render(source) {
       const Component = execute(source);
       act(() => {
@@ -127,14 +158,10 @@ describe('ReactFreshIntegration', () => {
       expect(ReactFreshRuntime._getMountedRootCount()).toBe(1);
     }
 
-    function $RefreshReg$(type, id) {
-      ReactFreshRuntime.register(type, id);
-    }
-
-    function $RefreshSig$() {
-      return ReactFreshRuntime.createSignatureFunctionForTransform();
-    }
+    test(render, patch);
+  }
 
+  function testCommon(render, patch) {
     it('reloads function declarations', () => {
       if (__DEV__) {
         render(`
@@ -1947,4 +1974,41 @@ describe('ReactFreshIntegration', () => {
       });
     });
   }
+
+  function testTypescript(render, patch) {
+    it('reloads component exported in typescript namespace', () => {
+      if (__DEV__) {
+        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');
+        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__/__snapshots__/ReactFreshBabelPlugin-test.js.snap b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
index 7c1276f81788..7b18834ae495 100644
--- a/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
+++ b/packages/react-refresh/src/__tests__/__snapshots__/ReactFreshBabelPlugin-test.js.snap
@@ -618,6 +618,34 @@ $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();
 
diff --git a/yarn.lock b/yarn.lock
index 0055fc9a6d2f..d02e5cf4a5c4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -405,6 +405,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  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-regex@^7.10.4":
   version "7.10.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.10.5.tgz#32dfbb79899073c415557053a19bd055aae50ae0"
@@ -847,6 +852,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@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.0.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
@@ -6442,6 +6454,7 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
+  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"

From a04f13d299230d1d987548f07f4506038d7367b1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Tue, 9 Nov 2021 20:23:32 +0000
Subject: [PATCH 1014/1603] react-refresh@0.11.0

---
 packages/react-refresh/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 4f5f3c31c5e0..d5295574058b 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "0.10.0",
+  "version": "0.11.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",

From e0aa5e205feee53043ce1ae8726fe732866e6ea7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 9 Nov 2021 16:10:48 -0500
Subject: [PATCH 1015/1603] Add Scheduling Profiler GK link to Timeline UI for
 FB build (#22730)

This is a constant source of confusion for FB engineers trying to figure out why Chrome profiling data does not have any React marks.
---
 packages/react-devtools-timeline/src/Timeline.js | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index 4b6d21f8a8f7..33459fc4543e 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -10,6 +10,7 @@
 import type {DataResource} from './createDataResourceFromImportedFile';
 import type {ViewState} from './types';
 
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
 import * as React from 'react';
 import {
   Suspense,
@@ -79,6 +80,19 @@ export function Timeline(_: {||}) {
 
 const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
   <ol className={styles.WelcomeInstructionsList}>
+    {isInternalFacebookBuild && (
+      <li className={styles.WelcomeInstructionsListItem}>
+        Enable the
+        <a
+          className={styles.WelcomeInstructionsListItemLink}
+          href="https://fburl.com/react-devtools-scheduling-profiler-gk"
+          rel="noopener noreferrer"
+          target="_blank">
+          <code>react_enable_scheduling_profiler</code> GK
+        </a>
+        .
+      </li>
+    )}
     <li className={styles.WelcomeInstructionsListItem}>
       Open a website that's built with the
       <a

From a44a7a2a3f8d7b24ddf5d0c6efeb6127e6b395c3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Nov 2021 10:35:16 -0500
Subject: [PATCH 1016/1603] Filter empty commits (all Fibers bailed out) from
 Profiler (#22745)

---
 .../__snapshots__/profilingCache-test.js.snap | 197 ------------------
 .../src/__tests__/profilerStore-test.js       |  51 +++++
 .../src/__tests__/profilingCache-test.js      |   5 +-
 .../src/backend/renderer.js                   |  41 +++-
 4 files changed, 86 insertions(+), 208 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 92555b0761cd..f07f405a85f2 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -1700,94 +1700,6 @@ Object {
 }
 `;
 
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
-Object {
-  "commitData": Array [
-    Object {
-      "changeDescriptions": Map {},
-      "duration": 0,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {},
-      "fiberSelfDurations": Map {},
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 34,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 7,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-  ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {
-    7 => 11,
-    8 => 11,
-    10 => 0,
-    11 => 1,
-  },
-  "operations": Array [
-    Array [
-      1,
-      7,
-      0,
-      2,
-      4,
-      11,
-      10,
-      8,
-      7,
-    ],
-  ],
-  "rootID": 7,
-  "snapshots": Map {
-    7 => Object {
-      "children": Array [
-        8,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 7,
-      "key": null,
-      "type": 11,
-    },
-    8 => Object {
-      "children": Array [
-        10,
-        11,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 8,
-      "key": null,
-      "type": 5,
-    },
-    10 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 10,
-      "key": "0",
-      "type": 5,
-    },
-    11 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": Array [
-        "Memo",
-      ],
-      "id": 11,
-      "key": null,
-      "type": 8,
-    },
-  },
-}
-`;
-
 exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
 Object {
   "dataForRoots": Array [
@@ -2330,115 +2242,6 @@ Object {
       "rootID": 13,
       "snapshots": Array [],
     },
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [],
-          "fiberSelfDurations": Array [],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 34,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 7,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [
-        Array [
-          7,
-          11,
-        ],
-        Array [
-          8,
-          11,
-        ],
-        Array [
-          10,
-          0,
-        ],
-        Array [
-          11,
-          1,
-        ],
-      ],
-      "operations": Array [
-        Array [
-          1,
-          7,
-          0,
-          2,
-          4,
-          11,
-          10,
-          8,
-          7,
-        ],
-      ],
-      "rootID": 7,
-      "snapshots": Array [
-        Array [
-          7,
-          Object {
-            "children": Array [
-              8,
-            ],
-            "displayName": null,
-            "hocDisplayNames": null,
-            "id": 7,
-            "key": null,
-            "type": 11,
-          },
-        ],
-        Array [
-          8,
-          Object {
-            "children": Array [
-              10,
-              11,
-            ],
-            "displayName": "Parent",
-            "hocDisplayNames": null,
-            "id": 8,
-            "key": null,
-            "type": 5,
-          },
-        ],
-        Array [
-          10,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 10,
-            "key": "0",
-            "type": 5,
-          },
-        ],
-        Array [
-          11,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": Array [
-              "Memo",
-            ],
-            "id": 11,
-            "key": null,
-            "type": 8,
-          },
-        ],
-      ],
-    },
   ],
   "version": 5,
 }
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index ea81b1dceef1..06ce6a9dc4c8 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -124,6 +124,57 @@ describe('ProfilerStore', () => {
     expect(data.operations).toHaveLength(1);
   });
 
+  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} />;
+    };
+
+    const container = document.createElement('div');
+
+    // This element has to be in the <body> for the event system to work.
+    document.body.appendChild(container);
+
+    // It's important that this test uses legacy sync mode.
+    // The root API does not trigger this particular failing case.
+    legacyRender(<Example />, container);
+
+    expect(commitCount).toBe(1);
+    commitCount = 0;
+
+    utils.act(() => store.profilerStore.startProfiling());
+
+    // Focus and blur.
+    const target = inputRef.current;
+    target.focus();
+    target.blur();
+    target.focus();
+    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);
+  });
+
   it('should throw if component filters are modified while profiling', () => {
     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
index bbb5c6ffaf03..00605d857a15 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -108,7 +108,10 @@ describe('ProfilingCache', () => {
       });
     }
 
-    expect(allProfilingDataForRoots).toHaveLength(3);
+    // No profiling data gets logged for the 2nd root (container B)
+    // because it doesn't render anything while profiling.
+    // (Technically it unmounts but we don't profile root unmounts.)
+    expect(allProfilingDataForRoots).toHaveLength(2);
 
     utils.exportImportHelper(bridge, store);
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 9d2005522da4..7ce78e564e39 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1546,6 +1546,19 @@ export function attach(
   }
 
   function flushOrQueueOperations(operations: OperationsArray): void {
+    if (operations.length === 3) {
+      // This operations array is a no op: [renderer ID, root ID, string table size (0)]
+      // We can usually skip sending updates like this across the bridge, unless we're Profiling.
+      // In that case, even though the tree didn't change– some Fibers may have still rendered.
+      if (
+        !isProfiling ||
+        currentCommitProfilingMetadata == null ||
+        currentCommitProfilingMetadata.durations.length === 0
+      ) {
+        return;
+      }
+    }
+
     if (pendingOperationsQueue !== null) {
       pendingOperationsQueue.push(operations);
     } else {
@@ -2608,18 +2621,26 @@ export function attach(
     }
 
     if (isProfiling && isProfilingSupported) {
-      const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
-        currentRootID,
-      );
-      if (commitProfilingMetadata != null) {
-        commitProfilingMetadata.push(
-          ((currentCommitProfilingMetadata: any): CommitProfilingData),
-        );
-      } else {
-        ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+      // Make sure at least one Fiber performed work during this commit.
+      // If not, don't send it to the frontend; showing an empty commit in the Profiler is confusing.
+      if (
+        currentCommitProfilingMetadata != null &&
+        currentCommitProfilingMetadata.durations.length > 0
+      ) {
+        const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
           currentRootID,
-          [((currentCommitProfilingMetadata: any): CommitProfilingData)],
         );
+
+        if (commitProfilingMetadata != null) {
+          commitProfilingMetadata.push(
+            ((currentCommitProfilingMetadata: any): CommitProfilingData),
+          );
+        } else {
+          ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).set(
+            currentRootID,
+            [((currentCommitProfilingMetadata: any): CommitProfilingData)],
+          );
+        }
       }
     }
 

From 56efc65e5857abe22062c9506207abc35c9532d1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 11 Nov 2021 14:22:22 -0500
Subject: [PATCH 1017/1603] DevTools should properly report re-renders due to
 (use)context changes (#22746)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Note that this only fixes things for newer versions of React (e.g. 18 alpha). Older versions will remain broken because there's not a good way to read the most recent context value for a location in the tree 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.
---
 .../profilerChangeDescriptions-test.js        | 151 ++++++++++++++++++
 .../src/backend/renderer.js                   |  12 +-
 2 files changed, 162 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js

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 000000000000..eee3a66b03a5
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
@@ -0,0 +1,151 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+describe('Profiler change descriptions', () => {
+  let React;
+  let legacyRender;
+  let store: Store;
+  let utils;
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    legacyRender = utils.legacyRender;
+
+    store = global.store;
+    store.collapseNodesByDefault = false;
+    store.recordChangeDescriptions = true;
+
+    React = require('react');
+  });
+
+  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>
+      );
+    };
+
+    const container = document.createElement('div');
+
+    utils.act(() => store.profilerStore.startProfiling());
+    utils.act(() => legacyRender(<App />, container));
+    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(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "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(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(5);
+    expect(element.displayName).toBe('RefForwardingComponent');
+    expect(element.hocDisplayNames).toEqual(['ForwardRef']);
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": null,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+
+    element = store.getElementAtIndex(6);
+    expect(element.displayName).toBe('Child');
+    expect(element.hocDisplayNames).toBeNull();
+    expect(commitData.changeDescriptions.get(element.id))
+      .toMatchInlineSnapshot(`
+      Object {
+        "context": true,
+        "didHooksChange": false,
+        "hooks": null,
+        "isFirstMount": false,
+        "props": Array [],
+        "state": null,
+      }
+    `);
+  });
+});
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 7ce78e564e39..8a89a5406c6e 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1253,8 +1253,10 @@ export function attach(
 
   function updateContextsForFiber(fiber: Fiber) {
     switch (getElementTypeForFiber(fiber)) {
-      case ElementTypeFunction:
       case ElementTypeClass:
+      case ElementTypeForwardRef:
+      case ElementTypeFunction:
+      case ElementTypeMemo:
         if (idToContextsMap !== null) {
           const id = getFiberIDThrows(fiber);
           const contexts = getContextsForFiber(fiber);
@@ -1292,7 +1294,9 @@ export function attach(
           }
         }
         return [legacyContext, modernContext];
+      case ElementTypeForwardRef:
       case ElementTypeFunction:
+      case ElementTypeMemo:
         const dependencies = fiber.dependencies;
         if (dependencies && dependencies.firstContext) {
           modernContext = dependencies.firstContext;
@@ -1341,12 +1345,18 @@ export function attach(
             }
           }
           break;
+        case ElementTypeForwardRef:
         case ElementTypeFunction:
+        case ElementTypeMemo:
           if (nextModernContext !== NO_CONTEXT) {
             let prevContext = prevModernContext;
             let nextContext = nextModernContext;
 
             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 (!is(prevContext.memoizedValue, nextContext.memoizedValue)) {
                 return true;
               }

From cb11155c86e756838a97679fb04c3256de101943 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 12 Nov 2021 10:03:41 -0500
Subject: [PATCH 1018/1603] Add runtime type checks around module boundary code
 (#22748)

---
 .../react-reconciler/src/SchedulingProfiler.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
index 0304f39a12e5..6ef0b6293bc7 100644
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ b/packages/react-reconciler/src/SchedulingProfiler.js
@@ -18,6 +18,7 @@ import {
 import ReactVersion from 'shared/ReactVersion';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
+import isArray from 'shared/isArray';
 
 import {
   getLabelForLane as getLabelForLane_old,
@@ -105,11 +106,18 @@ function markInternalModuleRanges() {
     typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === 'function'
   ) {
     const ranges = __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges();
-    for (let i = 0; i < ranges.length; i++) {
-      const [startStackFrame, stopStackFrame] = ranges[i];
-
-      markAndClear(`--react-internal-module-start-${startStackFrame}`);
-      markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
+    // This check would not be required,
+    // except that it's possible for things to override __REACT_DEVTOOLS_GLOBAL_HOOK__.
+    if (isArray(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}`);
+        }
+      }
     }
   }
 }

From c0c71a868560b3042847722659579418bfe2d7e1 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 12 Nov 2021 16:54:59 -0500
Subject: [PATCH 1019/1603] Re-enable useMutableSource in internal RN (#22750)

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index b61bbcf15747..221e94fb855b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -74,7 +74,7 @@ export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
-export const enableUseMutableSource = false;
+export const enableUseMutableSource = true;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

From f86cd5408b3154b3aa55ca6d9d86aa3091b7b2e5 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 15 Nov 2021 15:46:17 +0000
Subject: [PATCH 1020/1603] devtools: dont restore profiling data if we're
 profling (#22753)

---
 packages/react-devtools-extensions/src/main.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 015472fa2e89..2d67aa2cd7bd 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -156,7 +156,9 @@ function createPanelIfReactLoaded() {
           supportsTimeline: isChrome,
           supportsTraceUpdates: true,
         });
-        store.profilerStore.profilingData = profilingData;
+        if (!isProfiling) {
+          store.profilerStore.profilingData = profilingData;
+        }
 
         // Initialize the backend only once the Store has been initialized.
         // Otherwise the Store may miss important initial tree op codes.

From e6f60d2adda7d4ebf6631eb8166572c3706d52a3 Mon Sep 17 00:00:00 2001
From: 180909 <wjh180909@gmail.com>
Date: Mon, 15 Nov 2021 23:58:21 +0800
Subject: [PATCH 1021/1603] fix typos (#22715)

---
 packages/react-dom/src/__tests__/CSSPropertyOperations-test.js | 2 +-
 packages/react-reconciler/src/ReactFiberCompleteWork.new.js    | 2 +-
 packages/react-reconciler/src/ReactFiberCompleteWork.old.js    | 2 +-
 packages/react-reconciler/src/ReactFiberTreeContext.new.js     | 2 +-
 packages/react-reconciler/src/ReactFiberTreeContext.old.js     | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js        | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js        | 2 +-
 packages/react-server/src/ReactFizzTreeContext.js              | 2 +-
 scripts/release/README.md                                      | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
index 53d0903c7e9a..5f177b17202a 100644
--- a/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/CSSPropertyOperations-test.js
@@ -224,7 +224,7 @@ describe('CSSPropertyOperations', () => {
     ReactDOM.render(<Comp />, root);
   });
 
-  it('should warn about style containing a Infinity value', () => {
+  it('should warn about style containing an Infinity value', () => {
     class Comp extends React.Component {
       static displayName = 'Comp';
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index feb38f00461a..5805ffe8da76 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -884,7 +884,7 @@ function completeWork(
           // 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 the container would already be empty).
+          // if the previous render was null (so the container would already be empty).
           workInProgress.flags |= Snapshot;
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index ea4d71e8ba37..c5eb5f70f48d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -884,7 +884,7 @@ function completeWork(
           // 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 the container would already be empty).
+          // if the previous render was null (so the container would already be empty).
           workInProgress.flags |= Snapshot;
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index 968e66155d3f..f9c5104ed6b1 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -50,7 +50,7 @@
 // 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 the size of the sequence to exceed 32 bits, the max
+// 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
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index 82990b22f983..840335d00c4e 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -50,7 +50,7 @@
 // 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 the size of the sequence to exceed 32 bits, the max
+// 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
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 71bf8175105d..f0f5eab4a99f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1025,7 +1025,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
 
 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 a iterative
+  // 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) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8be4630dc079..353de50e1585 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1025,7 +1025,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
 
 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 a iterative
+  // 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) {
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
index c9a47e5af72a..3b924cf8eb3a 100644
--- a/packages/react-server/src/ReactFizzTreeContext.js
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -50,7 +50,7 @@
 // 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 the size of the sequence to exceed 32 bits, the max
+// 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
diff --git a/scripts/release/README.md b/scripts/release/README.md
index 1737c3cf1880..04900c296d0c 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -21,7 +21,7 @@ A typical release cycle goes like this:
 1. When a commit is pushed to the React repo, [Circle CI](https://circleci.com/gh/facebook/react/) 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 command line](#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 the same scripts (but different build artifacts).
+   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:

From 0b329511b9aaff7e27990fc16354db8ea0a16de8 Mon Sep 17 00:00:00 2001
From: Han Han <haannn@qq.com>
Date: Mon, 15 Nov 2021 23:58:30 +0800
Subject: [PATCH 1022/1603] chore: fix comment typo (#22657)

---
 packages/react-reconciler/src/__tests__/ReactCache-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 7ef18875e087..ed6b9fadf648 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -1132,7 +1132,7 @@ describe('ReactCache', () => {
 
     // Unmount children: the first text cache instance is created only after the root
     // commits, so both fresh cache instances are released by their cache boundaries,
-    // cleaning up v1 (used for the first two children which render togeether) and
+    // cleaning up v1 (used for the first two children which render together) and
     // v2 (used for the third boundary added later).
     await act(async () => {
       root.render('Bye!');

From 200415c91c724e408c055445e8b99ac0f0c52dc4 Mon Sep 17 00:00:00 2001
From: Mert Ciflikli <uzeyirmertciflikli@gmail.com>
Date: Mon, 15 Nov 2021 16:59:35 +0100
Subject: [PATCH 1023/1603] fix typos (#22288)

---
 packages/react-devtools-inline/README.md | 2 +-
 packages/react-devtools/CONTRIBUTING.md  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 35b0127f41d5..b7b3f8373adc 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -66,7 +66,7 @@ const DevTools = initialize(contentWindow);
 
 ### 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 infering 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.
+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
diff --git a/packages/react-devtools/CONTRIBUTING.md b/packages/react-devtools/CONTRIBUTING.md
index 06816532838f..cf6ff53d053d 100644
--- a/packages/react-devtools/CONTRIBUTING.md
+++ b/packages/react-devtools/CONTRIBUTING.md
@@ -1,5 +1,5 @@
 
-Intrested in contributing to React DevTools, but not sure where to start? This is the place!
+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:

From d4144e6e54276362b05f4319bb38939aff37bdaa Mon Sep 17 00:00:00 2001
From: Brijesh Prasad <brijesh.prasad@omio.com>
Date: Mon, 15 Nov 2021 17:44:48 +0100
Subject: [PATCH 1024/1603] fix : grammatical typo for test description
 (#22764)

* fix : grammatical typo for test description

* fix linting issues
---
 .../src/__tests__/ReactHooksWithNoopRenderer-test.js            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index bcd96d732e09..dae01c885fe5 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -1184,7 +1184,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
-      // This update is exists to test an internal implementation detail:
+      // This update exists to test an internal implementation detail:
       // Effects without updating dependencies lose their layout/passive tag during an update.
       act(() => {
         ReactNoop.render(<Child bar={1} foo={2} />, () =>

From 489b4bdcca00ddc808276a230f334c575bce9c84 Mon Sep 17 00:00:00 2001
From: MalikIdreesHasanKhan <pencilartassault@hotmail.com>
Date: Mon, 15 Nov 2021 23:01:35 +0530
Subject: [PATCH 1025/1603] Fixed typos (#22763)

* Fixed typos

* Update ReactFiberWorkLoop.new.js

* Update ReactFiberWorkLoop.old.js
---
 scripts/jest/matchers/toThrow.js | 2 +-
 scripts/release/README.md        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/jest/matchers/toThrow.js b/scripts/jest/matchers/toThrow.js
index 148fd49fa099..204a2fc713ca 100644
--- a/scripts/jest/matchers/toThrow.js
+++ b/scripts/jest/matchers/toThrow.js
@@ -4,7 +4,7 @@
 // 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 witout forking tests.
+// enabling the React project to support Node 12-16 without forking tests.
 
 const toThrowMatchers = require('expect/build/toThrowMatchers').default;
 const builtInToThrow = toThrowMatchers.toThrow;
diff --git a/scripts/release/README.md b/scripts/release/README.md
index 04900c296d0c..119d62c6da25 100644
--- a/scripts/release/README.md
+++ b/scripts/release/README.md
@@ -34,7 +34,7 @@ The high level process of creating releases is [documented below](#process). Ind
 
 ## Trigger an Automated Prerelease
 
-If your code lands in the main branch, it will be automaticaly 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:
+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:
 
 ```sh
 yarn publish-prereleases

From 83564712b6e2907dcffdbf5f99b4713cf6c950de Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 15 Nov 2021 13:12:56 -0500
Subject: [PATCH 1026/1603] Move SuspenseList to experimental channel (#22765)

There's more work to be done to implement this correctly on the server,
so we're going to wait to release it until an 18.x minor.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  5 ++-
 ...DOMServerPartialHydration-test.internal.js |  9 +++-
 .../ReactDOMServerSuspense-test.internal.js   |  9 +++-
 .../__tests__/ReactWrongReturnPointer-test.js |  5 ++-
 .../react-is/src/__tests__/ReactIs-test.js    | 12 ++++--
 .../__tests__/ReactContextPropagation-test.js |  5 ++-
 .../ReactHooksWithNoopRenderer-test.js        |  7 ++-
 .../src/__tests__/ReactSuspenseList-test.js   | 43 ++++++++++++++++++-
 .../ReactFlightDOMRelay-test.internal.js      | 15 +++----
 packages/react/index.stable.js                |  1 -
 scripts/jest/TestFlags.js                     |  1 +
 11 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 8c282e1bb730..6d169f9fbbb1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -42,7 +42,9 @@ describe('ReactDOMFizzServer', () => {
     }
     Stream = require('stream');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     PropTypes = require('prop-types');
 
@@ -656,6 +658,7 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   // @gate experimental
   it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
     const ref = React.createRef();
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 9aab3bf94536..0e1e220e4fe0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -84,7 +84,9 @@ describe('ReactDOMServerPartialHydration', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
@@ -1545,6 +1547,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
+  // @gate enableSuspenseList
   it('shows inserted items in a SuspenseList before content is hydrated', async () => {
     let suspend = false;
     let resolve;
@@ -1630,6 +1633,7 @@ describe('ReactDOMServerPartialHydration', () => {
     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;
@@ -1704,7 +1708,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('ALoading B');
   });
 
-  // @gate experimental || www
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList runs out of time hydrating', async () => {
     let suspend = false;
     let resolve;
@@ -1807,6 +1811,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(b);
   });
 
+  // @gate enableSuspenseList
   it('clears server boundaries when SuspenseList suspends last row hydrating', async () => {
     let suspend = false;
     let resolve;
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 60ab2edbdcf2..c2eb630e52ac 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -16,6 +16,7 @@ let ReactDOM;
 let ReactDOMServer;
 let ReactTestUtils;
 let act;
+let SuspenseList;
 
 function initModules() {
   // Reset warning cache.
@@ -26,6 +27,9 @@ function initModules() {
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
   act = require('jest-react').act;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.SuspenseList;
+  }
 
   // Make them available to the helpers.
   return {
@@ -137,16 +141,17 @@ describe('ReactDOMServerSuspense', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('server renders a SuspenseList component and its children', async () => {
     const example = (
-      <React.SuspenseList>
+      <SuspenseList>
         <React.Suspense fallback="Loading A">
           <div>A</div>
         </React.Suspense>
         <React.Suspense fallback="Loading B">
           <div>B</div>
         </React.Suspense>
-      </React.SuspenseList>
+      </SuspenseList>
     );
     const element = await serverRender(example);
     const parent = element.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index 66cf344814dc..ca5c9fac5162 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -24,7 +24,9 @@ beforeEach(() => {
   act = require('jest-react').act;
 
   Suspense = React.Suspense;
-  SuspenseList = React.SuspenseList;
+  if (gate(flags => flags.enableSuspenseList)) {
+    SuspenseList = React.SuspenseList;
+  }
 
   getCacheForType = React.unstable_getCacheForType;
 
@@ -197,6 +199,7 @@ test('warns in DEV if return pointer is inconsistent', async () => {
 });
 
 // @gate enableCache
+// @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.
diff --git a/packages/react-is/src/__tests__/ReactIs-test.js b/packages/react-is/src/__tests__/ReactIs-test.js
index b6adc66b00b5..6a5976e97194 100644
--- a/packages/react-is/src/__tests__/ReactIs-test.js
+++ b/packages/react-is/src/__tests__/ReactIs-test.js
@@ -12,6 +12,7 @@
 let React;
 let ReactDOM;
 let ReactIs;
+let SuspenseList;
 
 describe('ReactIs', () => {
   beforeEach(() => {
@@ -20,6 +21,10 @@ describe('ReactIs', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactIs = require('react-is');
+
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   it('should return undefined for unknown/invalid types', () => {
@@ -186,10 +191,11 @@ describe('ReactIs', () => {
     expect(ReactIs.isSuspense(<div />)).toBe(false);
   });
 
+  // @gate enableSuspenseList
   it('should identify suspense list', () => {
-    expect(ReactIs.isValidElementType(React.SuspenseList)).toBe(true);
-    expect(ReactIs.typeOf(<React.SuspenseList />)).toBe(ReactIs.SuspenseList);
-    expect(ReactIs.isSuspenseList(<React.SuspenseList />)).toBe(true);
+    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);
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index f568e40ccad7..24e57002ef30 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -21,7 +21,9 @@ describe('ReactLazyContextPropagation', () => {
     useState = React.useState;
     useContext = React.useContext;
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     getCacheForType = React.unstable_getCacheForType;
 
@@ -651,6 +653,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BBB');
   });
 
+  // @gate enableSuspenseList
   test('contexts are propagated through SuspenseList', async () => {
     // This kinda tests an implementation detail. SuspenseList has an early
     // bailout that doesn't use `bailoutOnAlreadyFinishedWork`. It probably
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index dae01c885fe5..811be0963915 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -34,6 +34,7 @@ let forwardRef;
 let memo;
 let act;
 let ContinuousEventPriority;
+let SuspenseList;
 
 describe('ReactHooksWithNoopRenderer', () => {
   beforeEach(() => {
@@ -60,6 +61,9 @@ describe('ReactHooksWithNoopRenderer', () => {
     Suspense = React.Suspense;
     ContinuousEventPriority = require('react-reconciler/constants')
       .ContinuousEventPriority;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
 
     textCache = new Map();
 
@@ -4291,9 +4295,8 @@ describe('ReactHooksWithNoopRenderer', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('regression: SuspenseList causes unmounts to be dropped on deletion', async () => {
-    const SuspenseList = React.SuspenseList;
-
     function Row({label}) {
       useEffect(() => {
         Scheduler.unstable_yieldValue('Mount ' + label);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index e969a59c4f60..d357094f78c9 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -16,7 +16,9 @@ describe('ReactSuspenseList', () => {
     act = require('jest-react').act;
     Profiler = React.Profiler;
     Suspense = React.Suspense;
-    SuspenseList = React.SuspenseList;
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   function Text(props) {
@@ -42,6 +44,7 @@ describe('ReactSuspenseList', () => {
     return Component;
   }
 
+  // @gate enableSuspenseList
   it('warns if an unsupported revealOrder option is used', () => {
     function Foo() {
       return (
@@ -61,6 +64,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a upper case revealOrder option is used', () => {
     function Foo() {
       return (
@@ -80,6 +84,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a misspelled revealOrder option is used', () => {
     function Foo() {
       return (
@@ -100,6 +105,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a single element is passed to a "forwards" list', () => {
     function Foo({children}) {
       return <SuspenseList revealOrder="forwards">{children}</SuspenseList>;
@@ -132,6 +138,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a single fragment is passed to a "backwards" list', () => {
     function Foo() {
       return (
@@ -152,6 +159,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a nested array is passed to a "forwards" list', () => {
     function Foo({items}) {
       return (
@@ -179,6 +187,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('shows content independently by default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -245,6 +254,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('shows content independently in legacy mode regardless of option', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -315,6 +325,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together"', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -384,6 +395,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" even when nested as siblings', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -469,6 +481,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" in nested SuspenseLists', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -530,6 +543,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" in nested SuspenseLists where the inner is default', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -589,6 +603,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays all "together" during an update', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -673,6 +688,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('avoided boundaries can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -771,6 +787,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('boundaries without fallbacks can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -854,6 +871,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays each items in "forwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -919,6 +937,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('displays each items in "backwards" order', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -984,6 +1003,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @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');
@@ -1138,6 +1158,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @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');
@@ -1322,6 +1343,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('switches to rendering fallbacks if the tail takes long CPU time', async () => {
     function Foo() {
       return (
@@ -1390,6 +1412,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('only shows one loading state at a time for "collapsed" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1459,6 +1482,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('warns if an unsupported tail option is used', () => {
     function Foo() {
       return (
@@ -1479,6 +1503,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('warns if a tail option is used with "together"', () => {
     function Foo() {
       return (
@@ -1499,6 +1524,7 @@ describe('ReactSuspenseList', () => {
     ]);
   });
 
+  // @gate enableSuspenseList
   it('renders one "collapsed" fallback even if CPU time elapsed', async () => {
     function Foo() {
       return (
@@ -1571,6 +1597,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle does not collapse insertions (forwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1713,6 +1740,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle does not collapse insertions (backwards)', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -1860,6 +1888,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('adding to the middle of committed tail does not collapse insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2017,6 +2046,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('only shows no initial loading state "hidden" tail insertions', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2080,6 +2110,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves a nested forwards suspense list', async () => {
     const B = createAsyncText('B');
 
@@ -2142,6 +2173,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves a nested forwards suspense list with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2188,6 +2220,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('eventually resolves two nested forwards suspense lists with a hidden tail', async () => {
     const B = createAsyncText('B');
 
@@ -2255,6 +2288,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('can do unrelated adjacent updates', async () => {
     let updateAdjacent;
     function Adjacent() {
@@ -2301,6 +2335,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2389,6 +2424,7 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
+  // @gate enableSuspenseList
   it('is able to re-suspend the last rows during an update with hidden', async () => {
     const AsyncB = createAsyncText('B');
 
@@ -2477,6 +2513,7 @@ describe('ReactSuspenseList', () => {
     expect(previousInst).toBe(setAsyncB);
   });
 
+  // @gate enableSuspenseList
   it('is able to interrupt a partially rendered tree and continue later', async () => {
     const AsyncA = createAsyncText('A');
 
@@ -2555,6 +2592,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @gate enableSuspenseList
   it('can resume class components when revealed together', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
@@ -2617,6 +2655,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @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);
@@ -2687,6 +2726,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
+  // @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);
@@ -2769,6 +2809,7 @@ describe('ReactSuspenseList', () => {
   });
 
   // @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();
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 75ac4ef8850a..11d25a5a1196 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -13,6 +13,7 @@ let ReactDOM;
 let JSResourceReference;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
+let SuspenseList;
 
 describe('ReactFlightDOMRelay', () => {
   beforeEach(() => {
@@ -24,6 +25,9 @@ describe('ReactFlightDOMRelay', () => {
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-server-dom-relay');
     JSResourceReference = require('JSResourceReference');
+    if (gate(flags => flags.enableSuspenseList)) {
+      SuspenseList = React.SuspenseList;
+    }
   });
 
   function readThrough(data) {
@@ -104,16 +108,9 @@ describe('ReactFlightDOMRelay', () => {
     expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
   });
 
+  // @gate enableSuspenseList
   it('can reasonably handle different element types', () => {
-    const {
-      forwardRef,
-      memo,
-      Fragment,
-      StrictMode,
-      Profiler,
-      Suspense,
-      SuspenseList,
-    } = React;
+    const {forwardRef, memo, Fragment, StrictMode, Profiler, Suspense} = React;
 
     const Inner = memo(
       forwardRef((props, ref) => {
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 234ec8336a9e..b0f6f409bb0e 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -17,7 +17,6 @@ export {
   PureComponent,
   StrictMode,
   Suspense,
-  SuspenseList,
   cloneElement,
   createContext,
   createElement,
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index af83baf0f3ec..e76a93638336 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -86,6 +86,7 @@ function getTestFlags() {
 
       // This isn't a flag, just a useful alias for tests.
       enableUseSyncExternalStoreShim: !__VARIANT__,
+      enableSuspenseList: releaseChannel === 'experimental' || www,
 
       // If there's a naming conflict between scheduler and React feature flags, the
       // React ones take precedence.

From a52d76b877cbb7d62f914d32dfede1275da18337 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 15 Nov 2021 13:26:30 -0500
Subject: [PATCH 1027/1603] Bump 18 from alpha to beta (#22766)

---
 .circleci/config.yml | 4 ++--
 ReactVersions.js     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 843e2f5fba4a..a21dc532e69d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -464,7 +464,7 @@ workflows:
             - setup
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
@@ -496,7 +496,7 @@ workflows:
             - setup
           commit_sha: << pipeline.git.revision >>
           release_channel: stable
-          dist_tag: "next,alpha"
+          dist_tag: "next,beta"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
diff --git a/ReactVersions.js b/ReactVersions.js
index bdab35424e88..03c9db2332b7 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -22,7 +22,7 @@ const ReactVersion = '18.0.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'alpha';
+const nextChannelLabel = 'beta';
 
 const stablePackages = {
   'create-subscription': ReactVersion,

From 96ca8d9155043e4636308edd6501fde67ce40aa5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 15 Nov 2021 13:43:40 -0500
Subject: [PATCH 1028/1603] Allow publishing with `beta` tag (#22768)

---
 scripts/release/publish-commands/parse-params.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scripts/release/publish-commands/parse-params.js b/scripts/release/publish-commands/parse-params.js
index a441168226a7..2c0439dd5639 100644
--- a/scripts/release/publish-commands/parse-params.js
+++ b/scripts/release/publish-commands/parse-params.js
@@ -44,6 +44,7 @@ module.exports = () => {
       case 'next':
       case 'experimental':
       case 'alpha':
+      case 'beta':
       case 'untagged':
         break;
       default:

From ee8f146a61e628ba8da5bff414b0b1142b167426 Mon Sep 17 00:00:00 2001
From: Abhay Gupta <51379307+akgupta0777@users.noreply.github.com>
Date: Tue, 16 Nov 2021 03:14:45 +0530
Subject: [PATCH 1029/1603] Proof of Concept for E2E tests using playwright
 (#22754)

---
 .../__e2e__/inspecting-props.test.js          | 50 +++++++++++++++++++
 packages/react-devtools-inline/package.json   |  4 +-
 .../playwright.config.js                      | 11 ++++
 .../react-devtools-shell/webpack.config.js    |  2 +-
 4 files changed, 65 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
 create mode 100644 packages/react-devtools-inline/playwright.config.js

diff --git a/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
new file mode 100644
index 000000000000..9fbbce0f47df
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
@@ -0,0 +1,50 @@
+'use strict';
+
+const {test, expect} = require('@playwright/test');
+const config = require('../../playwright.config');
+test.use(config);
+
+test.describe('Testing Todo-List App', () => {
+  let page, frameElementHandle, frame;
+  test.beforeAll(async ({browser}) => {
+    page = await browser.newPage();
+    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
+    await page.waitForSelector('iframe#target');
+    frameElementHandle = await page.$('#target');
+    frame = await frameElementHandle.contentFrame();
+  });
+
+  test('The Todo List should contain 3 items by default', async () => {
+    const list = frame.locator('.listitem');
+    await expect(list).toHaveCount(3);
+  });
+
+  test('Add another item Fourth to list', async () => {
+    await frame.type('.input', 'Fourth');
+    await frame.click('button.iconbutton');
+    const listItems = await frame.locator('.label');
+    await expect(listItems).toHaveText(['First', 'Second', 'Third', 'Fourth']);
+  });
+
+  test('Inspecting list elements with devtools', async () => {
+    // Component props are used as string in devtools.
+    const listItemsProps = [
+      '',
+      '{id: 1, isComplete: true, text: "First"}',
+      '{id: 2, isComplete: true, text: "Second"}',
+      '{id: 3, isComplete: false, text: "Third"}',
+      '{id: 4, isComplete: false, text: "Fourth"}',
+    ];
+    const countOfItems = await frame.$$eval('.listitem', el => el.length);
+    // For every item in list click on devtools inspect icon
+    // click on the list item to quickly navigate to the list item component in devtools
+    // comparing displayed props with the array of props.
+    for (let i = 1; i <= countOfItems; ++i) {
+      await page.click('[class^=ToggleContent]', {delay: 100});
+      await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
+      await page.waitForSelector('span.Value___tNzum');
+      const text = await page.innerText('span[class^=Value]');
+      await expect(text).toEqual(listItemsProps[i]);
+    }
+  });
+});
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index b814eacd4d19..f6468fea3c28 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -19,7 +19,8 @@
   "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"
+    "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch",
+    "test:e2e": "playwright test --config=playwright.config.js"
   },
   "dependencies": {
     "source-map-js": "^0.6.2",
@@ -33,6 +34,7 @@
     "@babel/preset-env": "^7.11.0",
     "@babel/preset-flow": "^7.10.4",
     "@babel/preset-react": "^7.10.4",
+    "@playwright/test": "^1.16.3",
     "babel-core": "^7.0.0-bridge",
     "babel-eslint": "^9.0.0",
     "babel-loader": "^8.0.4",
diff --git a/packages/react-devtools-inline/playwright.config.js b/packages/react-devtools-inline/playwright.config.js
new file mode 100644
index 000000000000..58c951723270
--- /dev/null
+++ b/packages/react-devtools-inline/playwright.config.js
@@ -0,0 +1,11 @@
+const config = {
+  use: {
+    headless: false,
+    browserName: 'chromium',
+    launchOptions: {
+      slowMo: 100,
+    },
+  },
+};
+
+module.exports = config;
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 18c55d1d8b74..cc846954e901 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -107,7 +107,7 @@ const config = {
             options: {
               sourceMap: true,
               modules: true,
-              localIdentName: '[local]___[hash:base64:5]',
+              localIdentName: '[local]',
             },
           },
         ],

From 4ff5f5719b348d9d8db14aaa49a48532defb4ab7 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Mon, 15 Nov 2021 17:15:01 -0500
Subject: [PATCH 1030/1603] Move unstable_scheduleHydration to
 ReactDOMHydrationRoot (#22455)

* move unstable_scheduleHydration to ReactDOMHydrationRoot

* move definition of schedule hydration

* fix test?

* prototype

* fix test

* remove gating because unstable_scheduleHydration is no longer gated through index.stable.js because its exposed through ReactDOMHydrationRoot instead of the ReactDOM package

* remove another gating
---
 packages/react-dom/index.classic.fb.js        |  1 -
 packages/react-dom/index.experimental.js      |  1 -
 packages/react-dom/index.js                   |  1 -
 packages/react-dom/index.modern.fb.js         |  1 -
 ...DOMServerPartialHydration-test.internal.js |  5 ++---
 ...MServerSelectiveHydration-test.internal.js |  8 +++-----
 packages/react-dom/src/client/ReactDOM.js     |  8 --------
 packages/react-dom/src/client/ReactDOMRoot.js | 20 ++++++++++++++++---
 8 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index a70dd4d0224e..93cc883d0cde 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -34,6 +34,5 @@ export {
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index 5cb691740e71..d5db3d8a5940 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -21,6 +21,5 @@ export {
   unstable_flushControlled,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 79438fff5733..18dfcf43ca9d 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -25,6 +25,5 @@ export {
   unstable_isNewReconciler,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index b45b03e4ec1d..866a5ebe31f6 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -18,6 +18,5 @@ export {
   unstable_flushControlled,
   unstable_isNewReconciler,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
-  unstable_scheduleHydration,
   version,
 } from './src/client/ReactDOM';
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 0e1e220e4fe0..25ec3c590ecb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1771,10 +1771,9 @@ describe('ReactDOMServerPartialHydration', () => {
     const b = container.getElementsByTagName('span')[1];
     expect(b.textContent).toBe('B');
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
+    const root = ReactDOM.hydrateRoot(container, <App />);
     // Increase hydration priority to higher than "offscreen".
-    ReactDOM.unstable_scheduleHydration(b);
+    root.unstable_scheduleHydration(b);
 
     suspend = true;
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 5c29513cf6bf..3adf300f9e70 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -886,7 +886,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate experimental || www
   it('hydrates the last explicitly hydrated target at higher priority', async () => {
     function Child({text}) {
       Scheduler.unstable_yieldValue(text);
@@ -920,15 +919,14 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanB = container.getElementsByTagName('span')[1];
     const spanC = container.getElementsByTagName('span')[2];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    const root = ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
     // Increase priority of B and then C.
-    ReactDOM.unstable_scheduleHydration(spanB);
-    ReactDOM.unstable_scheduleHydration(spanC);
+    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.
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 8e37995cb736..87ba7bf36101 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -56,7 +56,6 @@ import {
   setAttemptDiscreteHydration,
   setAttemptContinuousHydration,
   setAttemptHydrationAtCurrentPriority,
-  queueExplicitHydrationTarget,
   setGetCurrentUpdatePriority,
   setAttemptHydrationAtPriority,
 } from '../events/ReactDOMEventReplaying';
@@ -116,12 +115,6 @@ function createPortal(
   return createPortalImpl(children, container, null, key);
 }
 
-function scheduleHydration(target: Node) {
-  if (target) {
-    queueExplicitHydrationTarget(target);
-  }
-}
-
 function renderSubtreeIntoContainer(
   parentComponent: React$Component<any, any>,
   element: React$Element<any>,
@@ -196,7 +189,6 @@ export {
   createRoot,
   hydrateRoot,
   flushControlled as unstable_flushControlled,
-  scheduleHydration as unstable_scheduleHydration,
   // Disabled behind disableUnstableRenderSubtreeIntoContainer
   renderSubtreeIntoContainer as unstable_renderSubtreeIntoContainer,
   // enableCreateEventHandleAPI
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 38f2100cb541..d8794eec5bb1 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -11,6 +11,8 @@ import type {Container} from './ReactDOMHostConfig';
 import type {MutableSource, ReactNodeList} from 'shared/ReactTypes';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 
+import {queueExplicitHydrationTarget} from '../events/ReactDOMEventReplaying';
+
 export type RootType = {
   render(children: ReactNodeList): void,
   unmount(): void,
@@ -72,7 +74,9 @@ function ReactDOMRoot(internalRoot: FiberRoot) {
   this._internalRoot = internalRoot;
 }
 
-ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
+ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = function(
+  children: ReactNodeList,
+): void {
   const root = this._internalRoot;
   if (root === null) {
     throw new Error('Cannot update an unmounted root.');
@@ -104,7 +108,7 @@ ReactDOMRoot.prototype.render = function(children: ReactNodeList): void {
   updateContainer(children, root, null, null);
 };
 
-ReactDOMRoot.prototype.unmount = function(): void {
+ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount = function(): void {
   if (__DEV__) {
     if (typeof arguments[0] === 'function') {
       console.error(
@@ -189,6 +193,16 @@ export function createRoot(
   return new ReactDOMRoot(root);
 }
 
+function ReactDOMHydrationRoot(internalRoot: FiberRoot) {
+  this._internalRoot = internalRoot;
+}
+function scheduleHydration(target: Node) {
+  if (target) {
+    queueExplicitHydrationTarget(target);
+  }
+}
+ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = scheduleHydration;
+
 export function hydrateRoot(
   container: Container,
   initialChildren: ReactNodeList,
@@ -236,7 +250,7 @@ export function hydrateRoot(
   // Render the initial children
   updateContainer(initialChildren, root, null, null);
 
-  return new ReactDOMRoot(root);
+  return new ReactDOMHydrationRoot(root);
 }
 
 export function isValidContainer(node: any): boolean {

From ca94e268025104e7844edc1fbe6e7b2b10d54e05 Mon Sep 17 00:00:00 2001
From: Esteban <lasesteban@gmail.com>
Date: Tue, 16 Nov 2021 21:11:11 +0100
Subject: [PATCH 1031/1603] Remove 'packages/shared/invariant.js' (#22779)

---
 packages/shared/invariant.js | 26 --------------------------
 1 file changed, 26 deletions(-)
 delete mode 100644 packages/shared/invariant.js

diff --git a/packages/shared/invariant.js b/packages/shared/invariant.js
deleted file mode 100644
index 68a1928c02d3..000000000000
--- a/packages/shared/invariant.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-/**
- * Use 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.
- */
-
-export default function invariant(condition, format, a, b, c, d, e, f) {
-  // eslint-disable-next-line react-internal/prod-error-codes
-  throw new Error(
-    'Internal React error: invariant() is meant to be replaced at compile ' +
-      'time. There is no runtime version.',
-  );
-}

From afbc2d08f4dabf00222e9561344b65e51d6ed190 Mon Sep 17 00:00:00 2001
From: Esteban <lasesteban@gmail.com>
Date: Tue, 16 Nov 2021 21:11:20 +0100
Subject: [PATCH 1032/1603] Remove unused react-internal/invariant-args ESLint
 rule. (#22778)

---
 .eslintrc.js                                  |   1 -
 .../InitializeNativeFabricUIManager.js        |   2 -
 .../ReactNativeViewConfigRegistry.js          |   2 -
 .../Libraries/ReactPrivate/UIManager.js       |   2 -
 .../__tests__/invariant-args-test.internal.js |  83 -------------
 scripts/eslint-rules/index.js                 |   1 -
 scripts/eslint-rules/invariant-args.js        | 109 ------------------
 .../ReactNativeViewConfigRegistry.js          |   2 -
 8 files changed, 202 deletions(-)
 delete mode 100644 scripts/eslint-rules/__tests__/invariant-args-test.internal.js
 delete mode 100644 scripts/eslint-rules/invariant-args.js

diff --git a/.eslintrc.js b/.eslintrc.js
index 6a0dc2dceae4..414adb07f933 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -113,7 +113,6 @@ module.exports = {
       {isProductionUserAppCode: true},
     ],
     'react-internal/no-to-warn-dev-within-to-throw': ERROR,
-    'react-internal/invariant-args': ERROR,
     'react-internal/warning-args': ERROR,
     'react-internal/no-production-logging': ERROR,
     'react-internal/no-cross-fork-imports': ERROR,
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
index d4218ab24734..c0eb4c831754 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/InitializeNativeFabricUIManager.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 // Mock of the Native Hooks
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
index ce0975ea950a..dc1b818b3448 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativeViewConfigRegistry.js
@@ -7,8 +7,6 @@
  * @flow strict-local
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 import type {
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
index 346c4aa45c5f..17ba978e8b37 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/UIManager.js
@@ -5,8 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 // Mock of the Native Hooks
diff --git a/scripts/eslint-rules/__tests__/invariant-args-test.internal.js b/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
deleted file mode 100644
index c36171a62c1d..000000000000
--- a/scripts/eslint-rules/__tests__/invariant-args-test.internal.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-const rule = require('../invariant-args');
-const {RuleTester} = require('eslint');
-const ruleTester = new RuleTester();
-
-ruleTester.run('eslint-rules/invariant-args', rule, {
-  valid: [
-    'arbitraryFunction(a, b)',
-    // These messages are in the error code map
-    "invariant(false, 'Do not override existing functions.')",
-    "invariant(false, 'createRoot(...): Target container is not a DOM element.')",
-  ],
-  invalid: [
-    {
-      code: "invariant('hello, world');",
-      errors: [
-        {
-          message: 'invariant takes at least two arguments',
-        },
-      ],
-    },
-    {
-      code: 'invariant(true, null);',
-      errors: [
-        {
-          message: 'The second argument to invariant must be a string literal',
-        },
-      ],
-    },
-    {
-      code: 'var g = 5; invariant(true, g);',
-      errors: [
-        {
-          message: 'The second argument to invariant must be a string literal',
-        },
-      ],
-    },
-    {
-      code: "invariant(true, 'error!');",
-      errors: [
-        {
-          message:
-            'The invariant format should be able to uniquely identify this ' +
-            'invariant. Please, use a more descriptive format than: error!',
-        },
-      ],
-    },
-    {
-      code: "invariant(true, '%s %s, %s %s: %s (%s)', 1, 2, 3, 4, 5, 6);",
-      errors: [
-        {
-          message:
-            'The invariant format should be able to uniquely identify this ' +
-            'invariant. Please, use a more descriptive format than: ' +
-            '%s %s, %s %s: %s (%s)',
-        },
-      ],
-    },
-    {
-      code: "invariant(false, 'Not in error map')",
-      errors: [
-        {
-          message:
-            'Error message does not have a corresponding production error code.\n\n' +
-            'Run `yarn extract-errors` to add the message to error code map, ' +
-            'so it can be stripped from the production builds. ' +
-            "Alternatively, if you're updating an existing error message, " +
-            'you can modify `scripts/error-codes/codes.json` directly.',
-        },
-      ],
-    },
-  ],
-});
diff --git a/scripts/eslint-rules/index.js b/scripts/eslint-rules/index.js
index 7dfac457ec06..3bf0fb61521d 100644
--- a/scripts/eslint-rules/index.js
+++ b/scripts/eslint-rules/index.js
@@ -5,7 +5,6 @@ module.exports = {
     'no-primitive-constructors': require('./no-primitive-constructors'),
     'no-to-warn-dev-within-to-throw': require('./no-to-warn-dev-within-to-throw'),
     'warning-args': require('./warning-args'),
-    'invariant-args': require('./invariant-args'),
     'prod-error-codes': require('./prod-error-codes'),
     'no-production-logging': require('./no-production-logging'),
     'no-cross-fork-imports': require('./no-cross-fork-imports'),
diff --git a/scripts/eslint-rules/invariant-args.js b/scripts/eslint-rules/invariant-args.js
deleted file mode 100644
index dd1bb201ec1f..000000000000
--- a/scripts/eslint-rules/invariant-args.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-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() and invariant() functions take format strings as their 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 isInvariant =
-          node.callee.type === 'Identifier' && node.callee.name === 'invariant';
-        if (!isInvariant) {
-          return;
-        }
-        if (node.arguments.length < 2) {
-          context.report(node, '{{name}} takes at least two arguments', {
-            name: node.callee.name,
-          });
-          return;
-        }
-        const format = getLiteralString(node.arguments[1]);
-        if (format === null) {
-          context.report(
-            node,
-            'The second argument to {{name}} must be a string literal',
-            {name: node.callee.name}
-          );
-          return;
-        }
-        if (format.length < 10 || /^[s\W]*$/.test(format)) {
-          context.report(
-            node,
-            'The {{name}} format should be able to uniquely identify this ' +
-              '{{name}}. Please, use a more descriptive format than: {{format}}',
-            {name: node.callee.name, format: format}
-          );
-          return;
-        }
-        // count the number of formatting substitutions, plus the first two args
-        const expectedNArgs = (format.match(/%s/g) || []).length + 2;
-        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: node.callee.name,
-              length: node.arguments.length,
-            }
-          );
-        }
-
-        if (!messages.has(format)) {
-          context.report(
-            node,
-            'Error message does not have a corresponding production ' +
-              'error code.\n\n' +
-              'Run `yarn extract-errors` to add the message to error code ' +
-              'map, so it can be stripped from the production builds. ' +
-              "Alternatively, if you're updating an existing error " +
-              'message, you can modify ' +
-              '`scripts/error-codes/codes.json` directly.'
-          );
-        }
-      },
-    };
-  },
-};
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
index 5f219fea6520..194a91e31ae6 100644
--- a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -8,8 +8,6 @@
  * @flow strict-local
  */
 
-/* eslint-disable react-internal/invariant-args */
-
 'use strict';
 
 import {type ViewConfig} from './ReactNativeTypes';

From 520ffc77a399cc1fd785929b42a84f3d1c8bd106 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 16 Nov 2021 22:24:54 +0100
Subject: [PATCH 1033/1603] Use globalThis if possible for native fetch in
 browser build (#22777)

---
 packages/react-fetch/src/ReactFetchBrowser.js | 5 ++++-
 scripts/rollup/validate/eslintrc.cjs.js       | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index 41df29c8afcc..473a875c30b1 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -32,8 +32,11 @@ type RejectedRecord = {|
 
 type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
+declare var globalThis: any;
+
 // TODO: this is a browser-only version. Add a separate Node entry point.
-const nativeFetch = window.fetch;
+const nativeFetch = (typeof globalThis !== 'undefined' ? globalThis : window)
+  .fetch;
 
 function getRecordMap(): Map<string, Record> {
   return unstable_getCacheForType(createRecordMap);
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 0adb5a197dd1..e75f5967eeaf 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -15,6 +15,7 @@ module.exports = {
     WeakSet: true,
     Uint16Array: true,
     Reflect: true,
+    globalThis: true,
     // Vendor specific
     MSApp: true,
     __REACT_DEVTOOLS_GLOBAL_HOOK__: true,

From aa19d569b22ae447be18e768c97600656c080993 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 16 Nov 2021 16:27:10 -0500
Subject: [PATCH 1034/1603] Add test selectors to experimental build (#22760)

This change adds a new "react-dom/unstable_testing" entry point but I believe its contents will exactly match "react-dom/index" for the stable build. (The experimental build will have the added new selector APIs.)
---
 package.json                                  |  2 +-
 .../react-devtools-inline/webpack.config.js   | 18 +++--
 .../react-devtools-shell/webpack.config.js    |  2 +-
 .../npm/{testing.js => unstable_testing.js}   |  0
 packages/react-dom/package.json               |  1 +
 .../ReactDOMTestSelectors-test.internal.js    | 74 +++++++++----------
 packages/react-dom/testing.experimental.js    | 12 +++
 .../shared/forks/ReactFeatureFlags.testing.js |  2 +-
 scripts/rollup/bundles.js                     |  2 +-
 9 files changed, 66 insertions(+), 47 deletions(-)
 rename packages/react-dom/npm/{testing.js => unstable_testing.js} (100%)

diff --git a/package.json b/package.json
index fb428f35c04b..440ed35fa6fc 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index ab7bcb8be365..07f23f8ef34e 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -33,6 +33,14 @@ const babelOptions = {
   ),
 };
 
+const builtModulesDir = resolve(
+  __dirname,
+  '..',
+  '..',
+  'build',
+  'oss-experimental',
+);
+
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
@@ -49,12 +57,10 @@ module.exports = {
     libraryTarget: 'commonjs2',
   },
   externals: {
-    react: 'react',
-    // TODO: Once this package is published, remove the external
-    // 'react-debug-tools': 'react-debug-tools',
-    'react-dom': 'react-dom',
-    'react-is': 'react-is',
-    scheduler: 'scheduler',
+    react: resolve(builtModulesDir, 'react'),
+    'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+    'react-is': resolve(builtModulesDir, 'react-is'),
+    scheduler: resolve(builtModulesDir, 'scheduler'),
   },
   node: {
     // source-maps package has a dependency on 'fs'
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index cc846954e901..fb3df7240fb3 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -55,7 +55,7 @@ const config = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags('shell'),
-      'react-dom': resolve(builtModulesDir, 'react-dom'),
+      'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
diff --git a/packages/react-dom/npm/testing.js b/packages/react-dom/npm/unstable_testing.js
similarity index 100%
rename from packages/react-dom/npm/testing.js
rename to packages/react-dom/npm/unstable_testing.js
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index f7918bcc8384..c60f4950dd6c 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -34,6 +34,7 @@
     "server.browser.js",
     "server.node.js",
     "test-utils.js",
+    "unstable_testing.js",
     "cjs/",
     "umd/"
   ],
diff --git a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
index e9b0cc6ea0e5..29cf7a9870ec 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
@@ -56,7 +56,7 @@ describe('ReactDOMTestSelectors', () => {
   });
 
   describe('findAllNodes', () => {
-    // @gate www
+    // @gate www || experimental
     it('should support searching from the document root', () => {
       function Example() {
         return (
@@ -76,7 +76,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support searching from the container', () => {
       function Example() {
         return (
@@ -96,7 +96,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support searching from a previous match if the match had a data-testname', () => {
       function Outer() {
         return (
@@ -127,7 +127,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('inner');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not support searching from a previous match if the match did not have a data-testname', () => {
       function Outer() {
         return (
@@ -157,7 +157,7 @@ describe('ReactDOMTestSelectors', () => {
       );
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support an multiple component types in the selector array', () => {
       function Outer() {
         return (
@@ -211,7 +211,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match3');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should find multiple matches', () => {
       function Example1() {
         return (
@@ -249,7 +249,7 @@ describe('ReactDOMTestSelectors', () => {
       ]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should ignore nested matches', () => {
       function Example() {
         return (
@@ -269,7 +269,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toEqual('match1');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should enforce the specific order of selectors', () => {
       function Outer() {
         return (
@@ -294,7 +294,7 @@ describe('ReactDOMTestSelectors', () => {
       ).toHaveLength(0);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not search within hidden subtrees', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -324,7 +324,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0]).toBe(ref2.current);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by display text', () => {
       function Example() {
         return (
@@ -347,7 +347,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by explicit accessibiliy role', () => {
       function Example() {
         return (
@@ -372,7 +372,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by explicit secondary accessibiliy role', () => {
       const ref = React.createRef();
 
@@ -397,7 +397,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0]).toBe(ref.current);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by implicit accessibiliy role', () => {
       function Example() {
         return (
@@ -420,7 +420,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support filtering by implicit accessibiliy role with attributes qualifications', () => {
       function Example() {
         return (
@@ -443,7 +443,7 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should support searching ahead with the has() selector', () => {
       function Example() {
         return (
@@ -479,14 +479,14 @@ describe('ReactDOMTestSelectors', () => {
       expect(matches[0].id).toBe('match');
     });
 
-    // @gate www
+    // @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
+    // @gate www || experimental
     it('should throw if an invalid host root is specified', () => {
       const ref = React.createRef();
       function Example() {
@@ -502,7 +502,7 @@ describe('ReactDOMTestSelectors', () => {
   });
 
   describe('getFindAllNodesFailureDescription', () => {
-    // @gate www
+    // @gate www || experimental
     it('should describe findAllNodes failures caused by the component type selector', () => {
       function Outer() {
         return <Middle />;
@@ -532,7 +532,7 @@ No matching component was found for:
       );
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return null if findAllNodes was able to find a match', () => {
       function Example() {
         return (
@@ -568,7 +568,7 @@ No matching component was found for:
       };
     }
 
-    // @gate www
+    // @gate www || experimental
     it('should return a single rect for a component that returns a single root host element', () => {
       const ref = React.createRef();
 
@@ -602,7 +602,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return a multiple rects for multiple matches', () => {
       const outerRef = React.createRef();
       const innerRef = React.createRef();
@@ -652,7 +652,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return a multiple rects for single match that returns a fragment', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -702,7 +702,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should merge overlapping rects', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -757,7 +757,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should merge some types of adjacent rects (if they are the same in one dimension)', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -857,7 +857,7 @@ No matching component was found for:
       });
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not search within hidden subtrees', () => {
       const refA = React.createRef();
       const refB = React.createRef();
@@ -914,7 +914,7 @@ No matching component was found for:
   });
 
   describe('focusWithin', () => {
-    // @gate www
+    // @gate www || experimental
     it('should return false if the specified component path has no matches', () => {
       function Example() {
         return <Child />;
@@ -935,7 +935,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return false if there are no focusable elements within the matched subtree', () => {
       function Example() {
         return <Child />;
@@ -953,7 +953,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return false if the only focusable elements are disabled', () => {
       function Example() {
         return (
@@ -971,7 +971,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should return false if the only focusable elements are hidden', () => {
       function Example() {
         return <button hidden={true}>not clickable</button>;
@@ -985,7 +985,7 @@ No matching component was found for:
       expect(didFocus).toBe(false);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should successfully focus the first focusable element within the tree', () => {
       const secondRef = React.createRef(null);
 
@@ -1040,7 +1040,7 @@ No matching component was found for:
       expect(handleThirdFocus).not.toHaveBeenCalled();
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should successfully focus the first focusable element even if application logic interferes', () => {
       const ref = React.createRef(null);
 
@@ -1070,7 +1070,7 @@ No matching component was found for:
       expect(handleFocus).toHaveBeenCalledTimes(1);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not focus within hidden subtrees', () => {
       const secondRef = React.createRef(null);
 
@@ -1194,7 +1194,7 @@ No matching component was found for:
       window.IntersectionObserver = IntersectionObserver;
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should notify a listener when the underlying instance intersection changes', () => {
       const ref = React.createRef(null);
 
@@ -1231,7 +1231,7 @@ No matching component was found for:
       expect(handleVisibilityChange).toHaveBeenCalledWith([{rect, ratio: 0.5}]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should notify a listener of multiple targets when the underlying instance intersection changes', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -1308,7 +1308,7 @@ No matching component was found for:
       ]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should stop listening when its disconnected', () => {
       const ref = React.createRef(null);
 
@@ -1343,7 +1343,7 @@ No matching component was found for:
     });
 
     // This test reuires gating because it relies on the __DEV__ only commit hook to work.
-    // @gate www && __DEV__
+    // @gate www || experimental && __DEV__
     it('should update which targets its listening to after a commit', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
@@ -1422,7 +1422,7 @@ No matching component was found for:
       ]);
     });
 
-    // @gate www
+    // @gate www || experimental
     it('should not observe components within hidden subtrees', () => {
       const ref1 = React.createRef(null);
       const ref2 = React.createRef(null);
diff --git a/packages/react-dom/testing.experimental.js b/packages/react-dom/testing.experimental.js
index f994d83fa7d2..8b0b366705e9 100644
--- a/packages/react-dom/testing.experimental.js
+++ b/packages/react-dom/testing.experimental.js
@@ -8,3 +8,15 @@
  */
 
 export * from './index.experimental.js';
+export {
+  createComponentSelector,
+  createHasPseudoClassSelector,
+  createRoleSelector,
+  createTestNameSelector,
+  createTextSelector,
+  getFindAllNodesFailureDescription,
+  findAllNodes,
+  findBoundingRects,
+  focusWithin,
+  observeVisibleRects,
+} from 'react-reconciler/src/ReactFiberReconciler';
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 264127fc197e..3e9233f9c8f8 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 8b12e8550e36..02f0c68f6baa 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -249,7 +249,7 @@ const bundles = [
   /******* React DOM - www - Testing *******/
   {
     moduleType: RENDERER,
-    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, NODE_DEV, NODE_PROD],
     entry: 'react-dom/testing',
     global: 'ReactDOMTesting',
     minifyWithProdErrorCodes: true,

From f320ef88f51fbdc5aba38bdf07108678a84f7339 Mon Sep 17 00:00:00 2001
From: hiro <hiro0218@gmail.com>
Date: Wed, 17 Nov 2021 06:43:25 +0900
Subject: [PATCH 1035/1603] fix(typo): Esacpe -> Escape (#22780)

---
 .../events/src/dom/create-event-handle/Focus.js                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
index 214a25d0d30f..19b0b9cbee40 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
@@ -69,7 +69,7 @@ function isValidKey(nativeEvent: KeyboardEvent): boolean {
 
 function isTextInput(nativeEvent: KeyboardEvent): boolean {
   const {key, target} = nativeEvent;
-  if (key === 'Tab' || key === 'Esacpe') {
+  if (key === 'Tab' || key === 'Escape') {
     return false;
   }
   const {isContentEditable, tagName} = (target: any);

From fdc1d617a44cb9015c3bac3a6341b5af3311faf6 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Thu, 18 Nov 2021 08:16:09 -0500
Subject: [PATCH 1036/1603] Flag for client render fallback behavior on
 hydration mismatch (#22787)

* Add flag for new client-render fallback behavior on hydration mismatch

* gate test

* gate tests too

* fix test gating
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 70 ++++++++++++++-----
 ...DOMServerPartialHydration-test.internal.js | 12 +++-
 .../src/ReactFiberHydrationContext.new.js     | 12 +++-
 .../src/ReactFiberHydrationContext.old.js     | 12 +++-
 packages/shared/ReactFeatureFlags.js          |  2 +
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 14 files changed, 94 insertions(+), 23 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 6d169f9fbbb1..ca592002ad25 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1680,19 +1680,25 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   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.unstable_yieldValue(text);
       return text;
     }
+
     function App() {
       const value = useSyncExternalStore(
         subscribe,
@@ -1700,11 +1706,12 @@ describe('ReactDOMFizzServer', () => {
         getServerSnapshot,
       );
       return (
-        <div>
+        <div ref={ref}>
           <Child text={value} />
         </div>
       );
     }
+
     const loggedErrors = [];
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -1723,14 +1730,29 @@ describe('ReactDOMFizzServer', () => {
 
     ReactDOM.hydrateRoot(container, <App />);
 
-    expect(() => {
-      // The first paint switches to client rendering due to mismatch
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        // The first paint switches to client rendering due to mismatch
+        expect(Scheduler).toFlushUntilNextPaint(['client']);
+      }).toErrorDev(
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+        {withoutStack: true},
+      );
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+    } else {
+      const serverRenderedDiv = container.getElementsByTagName('div')[0];
+      // The first paint uses the server snapshot
+      expect(Scheduler).toFlushUntilNextPaint(['server']);
+      expect(getVisibleChildren(container)).toEqual(<div>server</div>);
+      // Hydration succeeded
+      expect(ref.current).toEqual(serverRenderedDiv);
+
+      // Asynchronously we detect that the store has changed on the client,
+      // and patch up the inconsistency
       expect(Scheduler).toFlushUntilNextPaint(['client']);
-    }).toErrorDev(
-      'Warning: An error occurred during hydration. The server HTML was replaced with client content',
-      {withoutStack: true},
-    );
-    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+      expect(ref.current).toEqual(serverRenderedDiv);
+    }
   });
 
   // The selector implementation uses the lazy ref initialization pattern
@@ -1790,15 +1812,31 @@ describe('ReactDOMFizzServer', () => {
 
     ReactDOM.hydrateRoot(container, <App />);
 
-    // The first paint uses the client due to mismatch forcing client render
-    expect(() => {
-      // The first paint switches to client rendering due to mismatch
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      // The first paint uses the client due to mismatch forcing client render
+      expect(() => {
+        // The first paint switches to client rendering due to mismatch
+        expect(Scheduler).toFlushUntilNextPaint(['client']);
+      }).toErrorDev(
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+        {withoutStack: true},
+      );
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+    } else {
+      const serverRenderedDiv = container.getElementsByTagName('div')[0];
+
+      // The first paint uses the server snapshot
+      expect(Scheduler).toFlushUntilNextPaint(['server']);
+      expect(getVisibleChildren(container)).toEqual(<div>server</div>);
+      // Hydration succeeded
+      expect(ref.current).toEqual(serverRenderedDiv);
+
+      // Asynchronously we detect that the store has changed on the client,
+      // and patch up the inconsistency
       expect(Scheduler).toFlushUntilNextPaint(['client']);
-    }).toErrorDev(
-      'Warning: An error occurred during hydration. The server HTML was replaced with client content',
-      {withoutStack: true},
-    );
-    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
+      expect(ref.current).toEqual(serverRenderedDiv);
+    }
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 25ec3c590ecb..f6bee806f3ac 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -199,7 +199,16 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     ReactDOM.hydrateRoot(container, <App />);
-    Scheduler.unstable_flushAll();
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      Scheduler.unstable_flushAll();
+    } else {
+      expect(() => {
+        Scheduler.unstable_flushAll();
+      }).toErrorDev(
+        // TODO: This error should not be logged in this case. It's a false positive.
+        'Did not expect server HTML to contain the text node "Hello" in <div>.',
+      );
+    }
     jest.runAllTimers();
 
     // Expect the server-generated HTML to stay intact.
@@ -215,6 +224,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('HelloHello');
   });
 
+  // @gate enableClientRenderFallbackOnHydrationMismatch
   it('falls back to client rendering boundary on mismatch', async () => {
     let client = false;
     let suspend = false;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 5e915579a7c0..614c6c9d946c 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -62,7 +62,10 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableClientRenderFallbackOnHydrationMismatch,
+  enableSuspenseServerRenderer,
+} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.new';
 import {
   getSuspendedTreeContext,
@@ -324,8 +327,11 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber) {
-  if ((fiber.mode & ConcurrentMode) !== NoMode) {
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (
+    enableClientRenderFallbackOnHydrationMismatch &&
+    (fiber.mode & ConcurrentMode) !== NoMode
+  ) {
     throw new Error(
       'An error occurred during hydration. The server HTML was replaced with client content',
     );
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index e7e08d5f3b8b..b7bca8217d97 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -62,7 +62,10 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {enableSuspenseServerRenderer} from 'shared/ReactFeatureFlags';
+import {
+  enableClientRenderFallbackOnHydrationMismatch,
+  enableSuspenseServerRenderer,
+} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.old';
 import {
   getSuspendedTreeContext,
@@ -324,8 +327,11 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber) {
-  if ((fiber.mode & ConcurrentMode) !== NoMode) {
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (
+    enableClientRenderFallbackOnHydrationMismatch &&
+    (fiber.mode & ConcurrentMode) !== NoMode
+  ) {
     throw new Error(
       'An error occurred during hydration. The server HTML was replaced with client content',
     );
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index ede13f2c2e8d..a5d8f214bfff 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -105,6 +105,8 @@ export const enableSuspenseAvoidThisFallback = false;
 
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
 
+export const enableClientRenderFallbackOnHydrationMismatch = true;
+
 export const enableComponentStackLocations = true;
 
 export const enableNewReconciler = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 221e94fb855b..5994f0eefcd6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -51,6 +51,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 7e24f2a0a271..aac8579f0ed6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index bce24128a791..853907907e91 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 02f063e58a82..e2431deb9e21 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -52,6 +52,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7227c254dccb..63d6afaeb416 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 3e9233f9c8f8..57038ecda8f3 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 87d7247d6eeb..b1c0b679d544 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -42,6 +42,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index ef980529f3f2..288e9631c75e 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -28,6 +28,7 @@ export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const warnOnSubscriptionInsideStartTransition = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
+export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index e280e1ff9a6d..7c17ae8b5cfb 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,6 +33,7 @@ export const {
   enableSyncDefaultUpdates,
   warnOnSubscriptionInsideStartTransition,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+  enableClientRenderFallbackOnHydrationMismatch,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 8edeb787b001f1b989c812aad6ac04f9d67a41dc Mon Sep 17 00:00:00 2001
From: Rin Arakaki <rnarkkx@gmail.com>
Date: Fri, 19 Nov 2021 06:11:30 +0900
Subject: [PATCH 1037/1603] Fix Node package.json ./ exports deprecation
 warning (#22783)

---
 packages/react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 0ab41de16ca5..a7ae10388473 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -32,7 +32,7 @@
     "./build-info.json": "./build-info.json",
     "./jsx-runtime": "./jsx-runtime.js",
     "./jsx-dev-runtime": "./jsx-dev-runtime.js",
-    "./": "./"
+    "./*": "./*"
   },
   "repository": {
     "type": "git",

From b32b67706f1214b730e4203981e5aefe04d473e5 Mon Sep 17 00:00:00 2001
From: Esteban <lasesteban@gmail.com>
Date: Thu, 18 Nov 2021 22:12:18 +0100
Subject: [PATCH 1038/1603] Migrate from CLIEngine to the new ESLint class.
 (#22756)

* Migrate from CLIEngine to the new ESLint class.

* fix output property
---
 scripts/eslint/index.js | 34 +++++++++++++++++++++-------------
 scripts/tasks/eslint.js | 28 +++++++++++++++++-----------
 scripts/tasks/linc.js   | 20 +++++++++++++-------
 3 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/scripts/eslint/index.js b/scripts/eslint/index.js
index 4a8f1868723e..2fd2730ba73f 100644
--- a/scripts/eslint/index.js
+++ b/scripts/eslint/index.js
@@ -8,16 +8,16 @@
 'use strict';
 
 const minimatch = require('minimatch');
-const CLIEngine = require('eslint').CLIEngine;
+const {ESLint} = require('eslint');
 const listChangedFiles = require('../shared/listChangedFiles');
 
 const allPaths = ['**/*.js'];
 
 let changedFiles = null;
 
-function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
-  const cli = new CLIEngine(options);
-  const formatter = cli.getFormatter();
+async function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
+  const eslint = new ESLint(options);
+  const formatter = await eslint.loadFormatter();
 
   if (onlyChanged && changedFiles === null) {
     // Calculate lazily.
@@ -26,15 +26,15 @@ function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
   const finalFilePatterns = onlyChanged
     ? intersect(changedFiles, filePatterns)
     : filePatterns;
-  const report = cli.executeOnFiles(finalFilePatterns);
+  const results = await eslint.lintFiles(finalFilePatterns);
 
   if (options != null && options.fix === true) {
-    CLIEngine.outputFixes(report);
+    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 = report.results.filter(item => {
+  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.
@@ -45,11 +45,19 @@ function runESLintOnFilesWithOptions(filePatterns, onlyChanged, options) {
     return !(item.messages[0] && item.messages[0].message === ignoreMessage);
   });
 
-  const ignoredMessageCount = report.results.length - messages.length;
+  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(messages),
-    errorCount: report.errorCount,
-    warningCount: report.warningCount - ignoredMessageCount,
+    output: formatter.format(messages),
+    errorCount: errorCount,
+    warningCount: warningCount - ignoredMessageCount,
   };
 }
 
@@ -64,11 +72,11 @@ function intersect(files, patterns) {
   return [...new Set(intersection)];
 }
 
-function runESLint({onlyChanged, ...options}) {
+async function runESLint({onlyChanged, ...options}) {
   if (typeof onlyChanged !== 'boolean') {
     throw new Error('Pass options.onlyChanged as a boolean.');
   }
-  const {errorCount, warningCount, output} = runESLintOnFilesWithOptions(
+  const {errorCount, warningCount, output} = await runESLintOnFilesWithOptions(
     allPaths,
     onlyChanged,
     options
diff --git a/scripts/tasks/eslint.js b/scripts/tasks/eslint.js
index aa01f41dd1e7..0205873f0aad 100644
--- a/scripts/tasks/eslint.js
+++ b/scripts/tasks/eslint.js
@@ -10,16 +10,22 @@
 const minimist = require('minimist');
 const runESLint = require('../eslint');
 
-console.log('Linting all files...');
-// https://circleci.com/docs/2.0/env-vars/#circleci-environment-variable-descriptions
-if (!process.env.CI) {
-  console.log('Hint: run `yarn linc` to only lint changed files.');
-}
+async function main() {
+  console.log('Linting all files...');
+  // https://circleci.com/docs/2.0/env-vars/#circleci-environment-variable-descriptions
+  if (!process.env.CI) {
+    console.log('Hint: run `yarn linc` to only lint changed files.');
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  const {_, ...cliOptions} = minimist(process.argv.slice(2));
 
-const cliOptions = minimist(process.argv.slice(2));
-if (runESLint({onlyChanged: false, ...cliOptions})) {
-  console.log('Lint passed.');
-} else {
-  console.log('Lint failed.');
-  process.exit(1);
+  if (await runESLint({onlyChanged: false, ...cliOptions})) {
+    console.log('Lint passed.');
+  } else {
+    console.log('Lint failed.');
+    process.exit(1);
+  }
 }
+
+main();
diff --git a/scripts/tasks/linc.js b/scripts/tasks/linc.js
index 282926399bb7..e3b89237528d 100644
--- a/scripts/tasks/linc.js
+++ b/scripts/tasks/linc.js
@@ -10,12 +10,18 @@
 const minimist = require('minimist');
 const runESLint = require('../eslint');
 
-console.log('Linting changed files...');
+async function main() {
+  console.log('Linting changed files...');
 
-const cliOptions = minimist(process.argv.slice(2));
-if (runESLint({onlyChanged: true, ...cliOptions})) {
-  console.log('Lint passed for changed files.');
-} else {
-  console.log('Lint failed for changed files.');
-  process.exit(1);
+  // eslint-disable-next-line no-unused-vars
+  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();

From b831aec48f2d54913b836d2288b62b7eee9fbca1 Mon Sep 17 00:00:00 2001
From: anc95 <anchao951220@outlook.com>
Date: Fri, 19 Nov 2021 05:15:07 +0800
Subject: [PATCH 1039/1603] chore(fast-refresh): double check wasMounted
 (#22740)

---
 packages/react-refresh/src/ReactFreshRuntime.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index a09222a07630..1ae5acfdfb53 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -554,7 +554,9 @@ export function injectIntoGlobalHook(globalObject: any): void {
         if (alternate !== null) {
           const wasMounted =
             alternate.memoizedState != null &&
-            alternate.memoizedState.element != null;
+            alternate.memoizedState.element != null &&
+            mountedRoots.has(root);
+
           const isMounted =
             current.memoizedState != null &&
             current.memoizedState.element != null;

From bddbfb86d858e50695f9f4c3e6f52c663a050069 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 19 Nov 2021 15:04:13 +0000
Subject: [PATCH 1040/1603] Revert "Fix Node package.json ./ exports
 deprecation warning (#22783)" (#22792)

This reverts commit 8edeb787b001f1b989c812aad6ac04f9d67a41dc.
---
 packages/react/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index a7ae10388473..0ab41de16ca5 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -32,7 +32,7 @@
     "./build-info.json": "./build-info.json",
     "./jsx-runtime": "./jsx-runtime.js",
     "./jsx-dev-runtime": "./jsx-dev-runtime.js",
-    "./*": "./*"
+    "./": "./"
   },
   "repository": {
     "type": "git",

From 149b420f63903bcfb99455337a376c75384f86af Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 19 Nov 2021 15:18:02 +0000
Subject: [PATCH 1041/1603] Ensure devtools e2e test use a compatible react-is
 version (#22790)

* Update lockfile by running `yarn install`

* Ensure devtools e2e test use a compatible react-is version
---
 package.json |   3 +
 yarn.lock    | 713 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 711 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 440ed35fa6fc..c1467036aaf9 100644
--- a/package.json
+++ b/package.json
@@ -146,5 +146,8 @@
     "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": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler"
+  },
+  "resolutions": {
+    "**/@playwright/test/**/react-is": "^16.0.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index d02e5cf4a5c4..518c249287bf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25,6 +25,13 @@
   dependencies:
     "@babel/highlight" "^7.12.13"
 
+"@babel/code-frame@^7.14.5", "@babel/code-frame@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.0.tgz#0dfc80309beec8411e65e706461c408b0bb9b431"
+  integrity sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==
+  dependencies:
+    "@babel/highlight" "^7.16.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"
@@ -41,6 +48,11 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
+"@babel/compat-data@^7.16.0":
+  version "7.16.4"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.16.4.tgz#081d6bbc336ec5c2435c6346b2ae1fb98b5ac68e"
+  integrity sha512-1o/jo7D+kC9ZjHX5v+EHrdjl3PhxMrLSOTGsOdHJ+KL8HCaEK6ehrVL2RS6oHDZp+L7xLirLrPmQtEng769J/Q==
+
 "@babel/core@^7.0.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
@@ -106,6 +118,27 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.14.8":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.16.0.tgz#c4ff44046f5fe310525cc9eb4ef5147f0c5374d4"
+  integrity sha512-mYZEvshBRHGsIAiyH5PzCFTCfbWfoYbO/jcSdXQSUQu1/pW0xDZAUP7KEc32heqWTAfAHhV9j1vH8Sav7l+JNQ==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/generator" "^7.16.0"
+    "@babel/helper-compilation-targets" "^7.16.0"
+    "@babel/helper-module-transforms" "^7.16.0"
+    "@babel/helpers" "^7.16.0"
+    "@babel/parser" "^7.16.0"
+    "@babel/template" "^7.16.0"
+    "@babel/traverse" "^7.16.0"
+    "@babel/types" "^7.16.0"
+    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/eslint-parser@^7.11.4":
   version "7.11.4"
   resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.11.4.tgz#f79bac69088097a8418f5c67fc462c89a72c2f48"
@@ -133,6 +166,15 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
+"@babel/generator@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.16.0.tgz#d40f3d1d5075e62d3500bccb67f3daa8a95265b2"
+  integrity sha512-RR8hUCfRQn9j9RPKEVXo9LiwoxLPYn6hNZlvUOR8tSnaxlD0p0+la00ZP9/SnRt6HchKr+X0fO2r8vrETiJGew==
+  dependencies:
+    "@babel/types" "^7.16.0"
+    jsesc "^2.5.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.3.tgz#0e22c005b0a94c1c74eafe19ef78ce53a4d45c03"
@@ -160,6 +202,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-annotate-as-pure@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.0.tgz#9a1f0ebcda53d9a2d00108c4ceace6a5d5f1f08d"
+  integrity sha512-ItmYF9vR4zA8cByDocY05o0LGUkp1zhbTQOH1NFyl5xXEqlTJQCEJjieriw+aFpxo16swMxUnUiKS7a/r4vtHg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
@@ -220,6 +269,16 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
+"@babel/helper-compilation-targets@^7.16.0":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.16.3.tgz#5b480cd13f68363df6ec4dc8ac8e2da11363cbf0"
+  integrity sha512-vKsoSQAyBmxS35JUOOt+07cLc6Nk/2ljLIHwmq2/NM6hdioUaqEXq/S+nXvbvXbZkNDlWOymPanJGOc4CBjSJA==
+  dependencies:
+    "@babel/compat-data" "^7.16.0"
+    "@babel/helper-validator-option" "^7.14.5"
+    browserslist "^4.17.5"
+    semver "^6.3.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"
@@ -232,6 +291,18 @@
     "@babel/helper-replace-supers" "^7.10.4"
     "@babel/helper-split-export-declaration" "^7.10.4"
 
+"@babel/helper-create-class-features-plugin@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.16.0.tgz#090d4d166b342a03a9fec37ef4fd5aeb9c7c6a4b"
+  integrity sha512-XLwWvqEaq19zFlF5PTgOod4bUA+XbkR4WLQBct1bkzmxJGB0ZEJaoKF4c8cgH9oBtCDuYJ8BP5NB9uFiEgO5QA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-function-name" "^7.16.0"
+    "@babel/helper-member-expression-to-functions" "^7.16.0"
+    "@babel/helper-optimise-call-expression" "^7.16.0"
+    "@babel/helper-replace-supers" "^7.16.0"
+    "@babel/helper-split-export-declaration" "^7.16.0"
+
 "@babel/helper-create-class-features-plugin@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.3.tgz#5b94be88c255f140fd2c10dd151e7f98f4bff397"
@@ -288,6 +359,15 @@
     "@babel/template" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helper-function-name@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.0.tgz#b7dd0797d00bbfee4f07e9c4ea5b0e30c8bb1481"
+  integrity sha512-BZh4mEk1xi2h4HFjWUXRQX5AEx4rvaZxHgax9gcjdLWdkjsY7MKt5p0otjsg5noXw+pB+clMCjw+aEVYADMjog==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.16.0"
+    "@babel/template" "^7.16.0"
+    "@babel/types" "^7.16.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"
@@ -313,6 +393,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-get-function-arity@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.0.tgz#0088c7486b29a9cb5d948b1a1de46db66e089cfa"
+  integrity sha512-ASCquNcywC1NkYh/z7Cgp3w31YW8aojjYIlNg4VeJiHkqyP4AzIvr4qx7pYDb4/s8YcsZWqqOSxgkvjUz1kpDQ==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@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"
@@ -327,6 +414,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-hoist-variables@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.0.tgz#4c9023c2f1def7e28ff46fc1dbcd36a39beaa81a"
+  integrity sha512-1AZlpazjUR0EQZQv3sgRNfM9mEVWPK3M6vlalczA+EECcPz3XPh6VplbErL5UoMpChhSck5wAJHthlj1bYpcmg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@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"
@@ -334,6 +428,13 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
+"@babel/helper-member-expression-to-functions@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.16.0.tgz#29287040efd197c77636ef75188e81da8bccd5a4"
+  integrity sha512-bsjlBFPuWT6IWhl28EdrQ+gTvSvj5tqVP5Xeftp07SEuz5pLnsXZuDkDD3Rfcxy0IsHmbZ+7B2/9SHzxO0T+sQ==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-member-expression-to-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.8.3.tgz#659b710498ea6c1d9907e0c73f206eee7dadc24c"
@@ -355,6 +456,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-module-imports@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
+  integrity sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-module-transforms@^7.10.4", "@babel/helper-module-transforms@^7.10.5", "@babel/helper-module-transforms@^7.11.0":
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.11.0.tgz#b16f250229e47211abdd84b34b64737c2ab2d359"
@@ -368,6 +476,20 @@
     "@babel/types" "^7.11.0"
     lodash "^4.17.19"
 
+"@babel/helper-module-transforms@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.16.0.tgz#1c82a8dd4cb34577502ebd2909699b194c3e9bb5"
+  integrity sha512-My4cr9ATcaBbmaEa8M0dZNA74cfI6gitvUAskgDtAFmAqyFKDSHQo5YstxPbN+lzHl2D9l/YOEFqb2mtUh4gfA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.0"
+    "@babel/helper-replace-supers" "^7.16.0"
+    "@babel/helper-simple-access" "^7.16.0"
+    "@babel/helper-split-export-declaration" "^7.16.0"
+    "@babel/helper-validator-identifier" "^7.15.7"
+    "@babel/template" "^7.16.0"
+    "@babel/traverse" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-module-transforms@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
@@ -388,6 +510,13 @@
   dependencies:
     "@babel/types" "^7.10.4"
 
+"@babel/helper-optimise-call-expression@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.0.tgz#cecdb145d70c54096b1564f8e9f10cd7d193b338"
+  integrity sha512-SuI467Gi2V8fkofm2JPnZzB/SUuXoJA5zXe/xzyPP2M04686RzFKFHPK6HDVN6JvWBIEW8tt9hPR7fXdn2Lgpw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-optimise-call-expression@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
@@ -438,6 +567,16 @@
     "@babel/traverse" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helper-replace-supers@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.16.0.tgz#73055e8d3cf9bcba8ddb55cad93fedc860f68f17"
+  integrity sha512-TQxuQfSCdoha7cpRNJvfaYxxxzmbxXw/+6cS7V02eeDYyhxderSoMVALvwupA54/pZcOTtVeJ0xccp1nGWladA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.16.0"
+    "@babel/helper-optimise-call-expression" "^7.16.0"
+    "@babel/traverse" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-replace-supers@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.3.tgz#91192d25f6abbcd41da8a989d4492574fb1530bc"
@@ -466,6 +605,13 @@
     "@babel/template" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helper-simple-access@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.16.0.tgz#21d6a27620e383e37534cf6c10bba019a6f90517"
+  integrity sha512-o1rjBT/gppAqKsYfUdfHq5Rk03lMQrkPHG1OWzHWpLgVXRH4HnMM9Et9CVdIqwkCQlobnGHEJMsgWP/jE1zUiw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
@@ -481,6 +627,13 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
+"@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.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"
@@ -488,6 +641,13 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
+"@babel/helper-split-export-declaration@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.0.tgz#29672f43663e936df370aaeb22beddb3baec7438"
+  integrity sha512-0YMMRpuDFNGTHNRiiqJX19GjNXA4H0E8jZ2ibccfSxaCogbm3am5WN/2nQNj0YnQwGWM1J06GOcQ2qnh3+0paw==
+  dependencies:
+    "@babel/types" "^7.16.0"
+
 "@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"
@@ -500,11 +660,21 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
   integrity sha512-V3ts7zMSu5lfiwWDVWzRDGIN+lnCEUdaXgtVHJgLb1rGaA6jMrtB9EmE7L18foXJIE8Un/A/h6NJfGQp/e1J4A==
 
+"@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.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
   integrity sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==
 
+"@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.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz#8a6f701eab0ff39f765b5a1cfef409990e624b87"
@@ -524,6 +694,15 @@
     "@babel/traverse" "^7.10.4"
     "@babel/types" "^7.10.4"
 
+"@babel/helpers@^7.16.0":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.16.3.tgz#27fc64f40b996e7074dc73128c3e5c3e7f55c43c"
+  integrity sha512-Xn8IhDlBPhvYTvgewPKawhADichOsbkZuzN7qz2BusOM0brChsyXMDJvldWaYMMUNiCQdQzNEioXTp3sC8Nt8w==
+  dependencies:
+    "@babel/template" "^7.16.0"
+    "@babel/traverse" "^7.16.3"
+    "@babel/types" "^7.16.0"
+
 "@babel/helpers@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.8.3.tgz#382fbb0382ce7c4ce905945ab9641d688336ce85"
@@ -551,6 +730,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.0.tgz#6ceb32b2ca4b8f5f361fb7fd821e3fddf4a1725a"
+  integrity sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.15.7"
+    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"
@@ -583,6 +771,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.8.tgz#66fd41666b2d7b840bd5ace7f7416d5ac60208d4"
   integrity sha512-syoCQFOoo/fzkWDeM0dLEZi5xqurb5vuyzwIMNZRNun+N/9A4cUZeQaE7dTrB8jGaKuJRBtEOajtnmw0I5hvvA==
 
+"@babel/parser@^7.16.0", "@babel/parser@^7.16.3":
+  version "7.16.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.4.tgz#d5f92f57cf2c74ffe9b37981c0e72fee7311372e"
+  integrity sha512-6V0qdPUaiVHH3RtZeLIsc+6pDhbYzHR8ogA8w+f+Wc77DuXto19g2QUwveINoS34Uw+W8/hQDGJCx+i4n7xcng==
+
 "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
@@ -620,6 +813,14 @@
     "@babel/helper-create-class-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-proposal-class-properties@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.16.0.tgz#c029618267ddebc7280fa286e0f8ca2a278a2d1a"
+  integrity sha512-mCF3HcuZSY9Fcx56Lbn+CGdT44ioBMMvjNVldpKtj8tpniETdLjnxdHI1+sDWXIM1nNt+EanJOZ3IG9lzVjs7A==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@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"
@@ -628,6 +829,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-dynamic-import" "^7.8.0"
 
+"@babel/plugin-proposal-dynamic-import@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.0.tgz#783eca61d50526202f9b296095453977e88659f1"
+  integrity sha512-QGSA6ExWk95jFQgwz5GQ2Dr95cf7eI7TKutIXXTb7B1gCLTCz5hTjFTQGfLFBBiC5WSNi7udNwWsqbbMh1c4yQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
 "@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"
@@ -636,6 +845,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
+"@babel/plugin-proposal-export-namespace-from@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.16.0.tgz#9c01dee40b9d6b847b656aaf4a3976a71740f222"
+  integrity sha512-CjI4nxM/D+5wCnhD11MHB1AwRSAYeDT+h8gCdcVJZ/OK7+wRzFsf7PFPWVpVpNRkHMmMkQWAHpTq+15IXQ1diA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@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"
@@ -652,6 +869,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
+"@babel/plugin-proposal-logical-assignment-operators@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.16.0.tgz#a711b8ceb3ffddd3ef88d3a49e86dbd3cc7db3fd"
+  integrity sha512-pbW0fE30sVTYXXm9lpVQQ/Vc+iTeQKiXlaNRZPPN2A2VdlWyAtsUrsQ3xydSlDW00TFMK7a8m3cDTkBF5WnV3Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@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"
@@ -660,6 +885,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.0.tgz#44e1cce08fe2427482cf446a91bb451528ed0596"
+  integrity sha512-3bnHA8CAFm7cG93v8loghDYyQ8r97Qydf63BeYiGgYbjKKB/XP53W15wfRC7dvKfoiJ34f6Rbyyx2btExc8XsQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@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"
@@ -668,6 +901,14 @@
     "@babel/helper-plugin-utils" "^7.10.4"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-proposal-numeric-separator@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.16.0.tgz#5d418e4fbbf8b9b7d03125d3a52730433a373734"
+  integrity sha512-FAhE2I6mjispy+vwwd6xWPyEx3NYFS13pikDBWUAFGZvq6POGs5eNchw8+1CYoEgBl9n11I3NkzD7ghn25PQ9Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-proposal-object-rest-spread@^7.0.0":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.5.tgz#3fd65911306d8746014ec0d0cf78f0e39a149116"
@@ -703,6 +944,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.11.0"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
+"@babel/plugin-proposal-optional-chaining@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.16.0.tgz#56dbc3970825683608e9efb55ea82c2a2d6c8dc0"
+  integrity sha512-Y4rFpkZODfHrVo70Uaj6cC1JJOt3Pp0MdWSwIKtb8z1/lsjl9AmnB7ErRFV+QNGIfcY1Eruc2UMx5KaRnXjMyg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.16.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@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"
@@ -711,6 +961,24 @@
     "@babel/helper-create-class-features-plugin" "^7.10.4"
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-proposal-private-methods@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.16.0.tgz#b4dafb9c717e4301c5776b30d080d6383c89aff6"
+  integrity sha512-IvHmcTHDFztQGnn6aWq4t12QaBXTKr1whF/dgp9kz84X6GUcwq9utj7z2wFCUfeOup/QKnOlt2k0zxkGFx9ubg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-proposal-private-property-in-object@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.16.0.tgz#69e935b2c5c79d2488112d886f0c4e2790fee76f"
+  integrity sha512-3jQUr/HBbMVZmi72LpjQwlZ55i1queL8KcDTQEkAHihttJnAPrcvG9ZNXIfsd2ugpizZo595egYV6xy+pv4Ofw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.16.0"
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@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"
@@ -845,6 +1113,13 @@
   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.10.4", "@babel/plugin-syntax-top-level-await@^7.8.3":
   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"
@@ -859,6 +1134,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.14.5"
 
+"@babel/plugin-syntax-typescript@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.16.0.tgz#2feeb13d9334cc582ea9111d3506f773174179bb"
+  integrity sha512-Xv6mEXqVdaqCBfJFyeab0fH2DnUoMsDmhamxsSi4j8nLd4Vtw213WMJr55xxqipC/YVWyPY3K0blJncPYji+dQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/plugin-transform-arrow-functions@^7.0.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
@@ -1093,6 +1375,16 @@
     "@babel/helper-simple-access" "^7.10.4"
     babel-plugin-dynamic-import-node "^2.3.3"
 
+"@babel/plugin-transform-modules-commonjs@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.16.0.tgz#add58e638c8ddc4875bd9a9ecb5c594613f6c922"
+  integrity sha512-Dzi+NWqyEotgzk/sb7kgQPJQf7AJkQBWsVp1N6JWc1lBVo0vkElUnGdr1PzUBmfsCCN5OOFya3RtpeHk15oLKQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-simple-access" "^7.16.0"
+    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"
@@ -1312,6 +1604,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.10.4"
 
+"@babel/plugin-transform-typescript@^7.16.0":
+  version "7.16.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.1.tgz#cc0670b2822b0338355bc1b3d2246a42b8166409"
+  integrity sha512-NO4XoryBng06jjw/qWEU2LhcLJr1tWkhpMam/H4eas/CDKMX/b2/Ylb6EI256Y7+FVPCawwSM1rrJNOpDiz+Lg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.16.0"
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/plugin-syntax-typescript" "^7.16.0"
+
 "@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"
@@ -1449,6 +1750,15 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
+"@babel/preset-typescript@^7.14.5":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.16.0.tgz#b0b4f105b855fb3d631ec036cdc9d1ffd1fa5eac"
+  integrity sha512-txegdrZYgO9DlPbv+9QOVpMnKbOtezsLHWsnsRF4AjbSIsVaujrq1qg8HK0mxQpWv0jnejt0yEoW1uWpvbrDTg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+    "@babel/helper-validator-option" "^7.14.5"
+    "@babel/plugin-transform-typescript" "^7.16.0"
+
 "@babel/register@^7.14.5":
   version "7.14.5"
   resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.14.5.tgz#d0eac615065d9c2f1995842f85d6e56c345f3233"
@@ -1513,6 +1823,15 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
+"@babel/template@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.0.tgz#d16a35ebf4cd74e202083356fab21dd89363ddd6"
+  integrity sha512-MnZdpFD/ZdYhXwiunMqqgyZyucaYsbL0IrjoGjaVhGilz+x8YB++kRfygSOIj1yOtWKPlx7NBp+9I1RQSgsd5A==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/parser" "^7.16.0"
+    "@babel/types" "^7.16.0"
+
 "@babel/template@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.3.tgz#e02ad04fe262a657809327f578056ca15fd4d1b8"
@@ -1576,6 +1895,21 @@
     globals "^11.1.0"
     lodash "^4.17.19"
 
+"@babel/traverse@^7.16.0", "@babel/traverse@^7.16.3":
+  version "7.16.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.16.3.tgz#f63e8a938cc1b780f66d9ed3c54f532ca2d14787"
+  integrity sha512-eolumr1vVMjqevCpwVO99yN/LoGL0EyHiLO5I043aYQvwOJ9eR5UsZSClHVCzfhBduMAsSzgA/6AyqPjNayJag==
+  dependencies:
+    "@babel/code-frame" "^7.16.0"
+    "@babel/generator" "^7.16.0"
+    "@babel/helper-function-name" "^7.16.0"
+    "@babel/helper-hoist-variables" "^7.16.0"
+    "@babel/helper-split-export-declaration" "^7.16.0"
+    "@babel/parser" "^7.16.3"
+    "@babel/types" "^7.16.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
@@ -1617,6 +1951,14 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
+  integrity sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.15.7"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
@@ -1865,6 +2207,17 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^27.2.5":
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.2.5.tgz#420765c052605e75686982d24b061b4cbba22132"
+  integrity sha512-nmuM4VuDtCZcY+eTpw+0nvstwReMsjPoj7ZR80/BbixulhLaiX+fbv8oeLW8WZlJMcsGQsTmMKT/iTZu1Uy/lQ==
+  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"
+
 "@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"
@@ -1951,6 +2304,45 @@
     universal-user-agent "^3.0.0"
     url-template "^2.0.8"
 
+"@playwright/test@^1.16.3":
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.16.3.tgz#99439d07af6a355586393b463fd88315f32d2a57"
+  integrity sha512-aJR6d6Fd/y6lq1RWWggcuiivM7offqddOW3te+NGGMxgF2P0xAxU0/xUurwIFnEp7iHwXILSZByzZ6W6fuKPIg==
+  dependencies:
+    "@babel/code-frame" "^7.14.5"
+    "@babel/core" "^7.14.8"
+    "@babel/plugin-proposal-class-properties" "^7.14.5"
+    "@babel/plugin-proposal-dynamic-import" "^7.14.5"
+    "@babel/plugin-proposal-export-namespace-from" "^7.14.5"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.14.5"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.14.5"
+    "@babel/plugin-proposal-numeric-separator" "^7.14.5"
+    "@babel/plugin-proposal-optional-chaining" "^7.14.5"
+    "@babel/plugin-proposal-private-methods" "^7.14.5"
+    "@babel/plugin-proposal-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-transform-modules-commonjs" "^7.14.5"
+    "@babel/preset-typescript" "^7.14.5"
+    colors "^1.4.0"
+    commander "^8.2.0"
+    debug "^4.1.1"
+    expect "=27.2.5"
+    jest-matcher-utils "=27.2.5"
+    jpeg-js "^0.4.2"
+    minimatch "^3.0.3"
+    ms "^2.1.2"
+    open "^8.3.0"
+    pirates "^4.0.1"
+    pixelmatch "^5.2.1"
+    playwright-core "=1.16.3"
+    pngjs "^5.0.0"
+    rimraf "^3.0.2"
+    source-map-support "^0.4.18"
+    stack-utils "^2.0.3"
+
 "@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"
@@ -2313,6 +2705,20 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@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/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/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"
@@ -2836,7 +3242,7 @@ agent-base@5:
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-5.1.1.tgz#e8fb3f242959db44d63be665db7a8e739537a32c"
   integrity sha512-TMeqbNl2fMW0nMjTEPOwe3J/PRFP4vqeoNuQMG0HlMrtm5QxKqdvAkZ1pRBQ/ulIyDD5Yq0nJ7YbdD8ey0TO3g==
 
-agent-base@6:
+agent-base@6, agent-base@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77"
   integrity sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==
@@ -3014,6 +3420,11 @@ ansi-regex@^5.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-5.0.0.tgz#388539f55179bf39339c81af30a654d69f87cb75"
   integrity sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==
 
+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@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -3034,6 +3445,11 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
     "@types/color-name" "^1.1.1"
     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-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"
@@ -4145,6 +4561,17 @@ browserslist@^4.12.0:
     escalade "^3.0.2"
     node-releases "^1.1.60"
 
+browserslist@^4.17.5:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.18.1.tgz#60d3920f25b6860eb917c6c7b185576f4d8b017f"
+  integrity sha512-8ScCzdpPwR2wQh8IT82CA2VgDwjHyqMovPBZSNH54+tm4Jk2pCuv90gmAdH6J84OCRWi0b4gMe6O6XPXuJnjgQ==
+  dependencies:
+    caniuse-lite "^1.0.30001280"
+    electron-to-chromium "^1.3.896"
+    escalade "^3.1.1"
+    node-releases "^2.0.1"
+    picocolors "^1.0.0"
+
 browserslist@^4.8.3:
   version "4.8.5"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.5.tgz#691af4e327ac877b25e7a3f7ee869c4ef36cdea3"
@@ -4423,6 +4850,11 @@ caniuse-lite@^1.0.30001111:
   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.30001280:
+  version "1.0.30001282"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001282.tgz#38c781ee0a90ccfe1fe7fefd00e43f5ffdcb96fd"
+  integrity sha512-YhF/hG6nqBEllymSIjLtR2iWDDnChvhnVJqp+vloyt2tEHFG1yBR+ac2B/rOw0qOK0m0lEXU2dv4E/sMk5P9Kg==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -4828,7 +5260,7 @@ colors@1.0.3:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.0.3.tgz#0433f44d809680fdeb60ed260f1b0c262e82a40b"
   integrity sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs=
 
-colors@^1.1.2:
+colors@^1.1.2, colors@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
@@ -4875,6 +5307,11 @@ commander@^4.1.1:
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
 
+commander@^8.2.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.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -5689,6 +6126,11 @@ defer-to-connect@^1.0.1:
   resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.0.2.tgz#4bae758a314b034ae33902b5aac25a8dd6a8633e"
   integrity sha512-k09hcQcTDY+cwgiwa6PYKLm3jlagNzQ+RSvhjzESOGOx+MNOuXkxTfEvPrO1IOQ81tArCFYQgi631clB70RpQw==
 
+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"
@@ -5787,6 +6229,11 @@ diff-sequences@^26.6.2:
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
   integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
 
+diff-sequences@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.0.6.tgz#3305cb2e55a033924054695cc66019fd7f8e5723"
+  integrity sha512-ag6wfpBFyNXZ0p8pcuIDS//D8H062ZQJ3fzYxjpmeKjnz8W4pekL3AI8VohmyZmsWW2PWaHgjsmqR6L13101VQ==
+
 diff@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
@@ -6042,6 +6489,11 @@ electron-to-chromium@^1.3.523:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.538.tgz#15226638ee9db5d8e74f4c860cef6078d8e1e871"
   integrity sha512-rlyYXLlOoZkJuvY4AJXUpP7CHRVtwZz311HPVoEO1UHo/kqDCsP1pNas0A9paZuPEiYGdLwrjllF2hs69NEaTw==
 
+electron-to-chromium@^1.3.896:
+  version "1.3.903"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.903.tgz#e2d3c3809f4ef05fdbe5cc88969dfc94b1bd15b9"
+  integrity sha512-+PnYAyniRRTkNq56cqYDLq9LyklZYk0hqoDy9GpcU11H5QjRmFZVDbxtgHUMK/YzdNTcn1XWP5gb+hFlSCr20g==
+
 electron@^11.1.0:
   version "11.1.1"
   resolved "https://registry.yarnpkg.com/electron/-/electron-11.1.1.tgz#188f036f8282798398dca9513e9bb3b10213e3aa"
@@ -6343,6 +6795,11 @@ escalade@^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:
+  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"
@@ -6865,6 +7322,18 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2:
   dependencies:
     homedir-polyfill "^1.0.1"
 
+expect@=27.2.5:
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/expect/-/expect-27.2.5.tgz#16154aaa60b4d9a5b0adacfea3e4d6178f4b93fd"
+  integrity sha512-ZrO0w7bo8BgGoP/bLz+HDCI+0Hfei9jUSZs5yI/Wyn9VkG9w8oJ7rHRgYj+MA7yqqFa0IwHA3flJzZtYugShJA==
+  dependencies:
+    "@jest/types" "^27.2.5"
+    ansi-styles "^5.0.0"
+    jest-get-type "^27.0.6"
+    jest-matcher-utils "^27.2.5"
+    jest-message-util "^27.2.5"
+    jest-regex-util "^27.0.6"
+
 expect@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
@@ -7003,6 +7472,17 @@ extract-zip@^1.0.3:
     mkdirp "0.5.1"
     yauzl "2.4.1"
 
+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"
+
 extsprintf@1.3.0, extsprintf@^1.2.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
@@ -7637,6 +8117,11 @@ gensync@^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==
 
+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@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
@@ -8985,6 +9470,11 @@ is-docker@^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-dotfile@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-dotfile/-/is-dotfile-1.0.3.tgz#a6a2f32ffd2dfb04f5ca25ecd0f6b83cf798a1e1"
@@ -9570,6 +10060,16 @@ jest-diff@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
+jest-diff@^27.2.5, jest-diff@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.3.1.tgz#d2775fea15411f5f5aeda2a5e02c2f36440f6d55"
+  integrity sha512-PCeuAH4AWUo2O5+ksW4pL9v5xJAcIKPUPfIhZBcG1RKv/0+dvaWTQK1Nrau8d67dp65fOqbeMdoil+6PedyEPQ==
+  dependencies:
+    chalk "^4.0.0"
+    diff-sequences "^27.0.6"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
+
 jest-docblock@^26.0.0:
   version "26.0.0"
   resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
@@ -9626,6 +10126,11 @@ jest-get-type@^26.3.0:
   resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
   integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
 
+jest-get-type@^27.0.6, jest-get-type@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.3.1.tgz#a8a2b0a12b50169773099eee60a0e6dd11423eff"
+  integrity sha512-+Ilqi8hgHSAdhlQ3s12CAVNd8H96ZkQBfYoXmArzZnOfAtVAJEiPDBirjByEblvG/4LPJmkL+nBqPO3A1YJAEg==
+
 jest-haste-map@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
@@ -9679,6 +10184,16 @@ jest-leak-detector@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
+jest-matcher-utils@=27.2.5:
+  version "27.2.5"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.2.5.tgz#4684faaa8eb32bf15e6edaead6834031897e2980"
+  integrity sha512-qNR/kh6bz0Dyv3m68Ck2g1fLW5KlSOUNcFQh87VXHZwWc/gY6XwnKofx76Qytz3x5LDWT09/2+yXndTkaG4aWg==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.2.5"
+    jest-get-type "^27.0.6"
+    pretty-format "^27.2.5"
+
 jest-matcher-utils@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
@@ -9689,6 +10204,16 @@ jest-matcher-utils@^26.6.2:
     jest-get-type "^26.3.0"
     pretty-format "^26.6.2"
 
+jest-matcher-utils@^27.2.5:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.3.1.tgz#257ad61e54a6d4044e080d85dbdc4a08811e9c1c"
+  integrity sha512-hX8N7zXS4k+8bC1Aj0OWpGb7D3gIXxYvPNK1inP5xvE4ztbz3rc4AkI6jGVaerepBnfWB17FL5lWFJT3s7qo8w==
+  dependencies:
+    chalk "^4.0.0"
+    jest-diff "^27.3.1"
+    jest-get-type "^27.3.1"
+    pretty-format "^27.3.1"
+
 jest-message-util@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
@@ -9704,6 +10229,21 @@ jest-message-util@^26.6.2:
     slash "^3.0.0"
     stack-utils "^2.0.2"
 
+jest-message-util@^27.2.5:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.3.1.tgz#f7c25688ad3410ab10bcb862bcfe3152345c6436"
+  integrity sha512-bh3JEmxsTZ/9rTm0jQrPElbY2+y48Rw2t47uMfByNyUVR+OfPh4anuyKsGqsNkXk/TI4JbLRZx+7p7Hdt6q1yg==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^27.2.5"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.4"
+    micromatch "^4.0.4"
+    pretty-format "^27.3.1"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
@@ -9722,6 +10262,11 @@ jest-regex-util@^26.0.0:
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
   integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
 
+jest-regex-util@^27.0.6:
+  version "27.0.6"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.6.tgz#02e112082935ae949ce5d13b2675db3d8c87d9c5"
+  integrity sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ==
+
 jest-resolve-dependencies@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
@@ -9899,6 +10444,11 @@ jetpack-id@1.0.0:
   resolved "https://registry.yarnpkg.com/jetpack-id/-/jetpack-id-1.0.0.tgz#2cf9fbae46d8074fc16b7de0071c8efebca473a6"
   integrity sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y=
 
+jpeg-js@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
+  integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==
+
 jpegtran-bin@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jpegtran-bin/-/jpegtran-bin-4.0.0.tgz#d00aed809fba7aa6f30817e59eee4ddf198f8f10"
@@ -10905,6 +11455,14 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
+micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -10952,6 +11510,11 @@ mime@^2.4.4:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.5.tgz#d8de2ecb92982dedbb6541c9b6841d7f218ea009"
   integrity sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==
 
+mime@^2.4.6:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.6.0.tgz#a2a682a95cd4d0cb1d6257e28f83da7e35800367"
+  integrity sha512-USPkMeET31rOMiarsBNIHZKLGgvKc/LrjofAnBlOttf5ajRvqiRA8QsenbcooctK6d6Ts6aqZXBA+XbkKthiQg==
+
 mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -10972,7 +11535,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-"minimatch@2 || 3", minimatch@^3.0.4:
+"minimatch@2 || 3", 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==
@@ -11132,6 +11695,11 @@ ms@2.1.2, ms@^2.0.0, ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+ms@^2.1.2:
+  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"
@@ -11400,6 +11968,11 @@ node-releases@^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.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.1.tgz#3d1d395f204f1f2f29a54358b9fb678765ad2fc5"
+  integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA==
+
 node-rsa@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/node-rsa/-/node-rsa-1.0.5.tgz#854dc1b275729d69bc25883f83ca80705db9262e"
@@ -11725,6 +12298,15 @@ open@^7.0.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
+open@^8.3.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"
+
 opn@5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
@@ -12341,6 +12923,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+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.0.5:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
@@ -12351,6 +12938,11 @@ picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+picomatch@^2.2.3:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
+  integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
+
 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"
@@ -12419,6 +13011,13 @@ pirates@^4.0.0, pirates@^4.0.1:
   dependencies:
     node-modules-regexp "^1.0.0"
 
+pixelmatch@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/pixelmatch/-/pixelmatch-5.2.1.tgz#9e4e4f4aa59648208a31310306a5bed5522b0d65"
+  integrity sha512-WjcAdYSnKrrdDdqTcVEY7aB7UhhwjYQKYhHiBXdJef0MOaQeYpUdQ+iVyBLa5YBKS8MPVPPMX7rpOByISLpeEQ==
+  dependencies:
+    pngjs "^4.0.1"
+
 pkg-dir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
@@ -12433,6 +13032,28 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
+playwright-core@=1.16.3:
+  version "1.16.3"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.16.3.tgz#f466be9acaffb698654adfb0a17a4906ba936895"
+  integrity sha512-16hF27IvQheJee+DbhC941AUZLjbJgfZFWi9YPS4LKEk/lKFhZI+9TiFD0sboYqb9eaEWvul47uR5xxTVbE4iw==
+  dependencies:
+    commander "^8.2.0"
+    debug "^4.1.1"
+    extract-zip "^2.0.1"
+    https-proxy-agent "^5.0.0"
+    jpeg-js "^0.4.2"
+    mime "^2.4.6"
+    pngjs "^5.0.0"
+    progress "^2.0.3"
+    proper-lockfile "^4.1.1"
+    proxy-from-env "^1.1.0"
+    rimraf "^3.0.2"
+    socks-proxy-agent "^6.1.0"
+    stack-utils "^2.0.3"
+    ws "^7.4.6"
+    yauzl "^2.10.0"
+    yazl "^2.5.1"
+
 plugin-error@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-0.1.2.tgz#3b9bb3335ccf00f425e07437e19276967da47ace"
@@ -12444,6 +13065,16 @@ plugin-error@^0.1.2:
     arr-union "^2.0.1"
     extend-shallow "^1.1.2"
 
+pngjs@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-4.0.1.tgz#f803869bb2fc1bfe1bf99aa4ec21c108117cfdbe"
+  integrity sha512-rf5+2/ioHeQxR6IxuYNYGFytUyG3lma/WW1nsmjeHlWwtb2aByla6dkVc8pmJ9nplzkTA0q2xx7mMWrOTqT4Gg==
+
+pngjs@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-5.0.0.tgz#e79dd2b215767fd9c04561c01236df960bce7fbb"
+  integrity sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
+
 portfinder@^1.0.25:
   version "1.0.26"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
@@ -12616,6 +13247,16 @@ pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.2.5, pretty-format@^27.3.1:
+  version "27.3.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.3.1.tgz#7e9486365ccdd4a502061fa761d3ab9ca1b78df5"
+  integrity sha512-DR/c+pvFc52nLimLROYjnXPtolawm+uWDxr4FjuLDLUn+ktWnSN851KoHwHzzqq6rfCOjkzN8FLgDrSub6UDuA==
+  dependencies:
+    "@jest/types" "^27.2.5"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-ms@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.0.tgz#45781273110caf35f55cab21a8a9bd403a233dc0"
@@ -12704,6 +13345,15 @@ prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+proper-lockfile@^4.1.1:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/proper-lockfile/-/proper-lockfile-4.1.2.tgz#c8b9de2af6b2f1601067f98e01ac66baa223141f"
+  integrity sha512-TjNPblN4BwAWMXU8s9AEz4JmQxnD1NNL7bNOY/AKUzyamc379FWASUhc/K1pL2noVb+XmZKLL68cjzLsiOAMaA==
+  dependencies:
+    graceful-fs "^4.2.4"
+    retry "^0.12.0"
+    signal-exit "^3.0.2"
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -12722,6 +13372,11 @@ proxy-addr@~2.0.5:
     forwarded "~0.1.2"
     ipaddr.js "1.9.0"
 
+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==
+
 prr@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
@@ -12974,7 +13629,7 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     prop-types "^15.6.2"
     scheduler "^0.13.0"
 
-react-is@^16.8.1:
+react-is@^16.0.0, 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==
@@ -14138,6 +14793,11 @@ smart-buffer@4.0.2:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.2.tgz#5207858c3815cc69110703c6b94e46c15634395d"
   integrity sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==
 
+smart-buffer@^4.1.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
+  integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -14205,6 +14865,23 @@ socks-proxy-agent@^4.0.0:
     agent-base "~4.2.1"
     socks "~2.3.2"
 
+socks-proxy-agent@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/socks-proxy-agent/-/socks-proxy-agent-6.1.0.tgz#869cf2d7bd10fea96c7ad3111e81726855e285c3"
+  integrity sha512-57e7lwCN4Tzt3mXz25VxOErJKXlPfXmkMLnk310v/jwW20jWRVcgsOit+xNkN3eIEdB47GwnfAEBLacZ/wVIKg==
+  dependencies:
+    agent-base "^6.0.2"
+    debug "^4.3.1"
+    socks "^2.6.1"
+
+socks@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/socks/-/socks-2.6.1.tgz#989e6534a07cf337deb1b1c94aaa44296520d30e"
+  integrity sha512-kLQ9N5ucj8uIcxrDwjm0Jsqk06xdpBjGNQtpXy4Q8/QY2k+fY7nZH8CARy+hkbG+SGAovmzzuauCpBlb8FrnBA==
+  dependencies:
+    ip "^1.1.5"
+    smart-buffer "^4.1.0"
+
 socks@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/socks/-/socks-2.3.2.tgz#ade388e9e6d87fdb11649c15746c578922a5883e"
@@ -14279,6 +14956,13 @@ source-map-support@0.5.19, source-map-support@^0.5.16, source-map-support@^0.5.1
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@^0.4.18:
+  version "0.4.18"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.18.tgz#0286a6de8be42641338594e97ccea75f0a2c585f"
+  integrity sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==
+  dependencies:
+    source-map "^0.5.6"
+
 source-map-support@^0.5.6, source-map-support@~0.5.4:
   version "0.5.13"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
@@ -14460,6 +15144,13 @@ stack-utils@^2.0.2:
   dependencies:
     escape-string-regexp "^2.0.0"
 
+stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
+  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"
@@ -16424,6 +17115,11 @@ ws@^7.4.5:
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.6.tgz#5654ca8ecdeee47c33a9a4bf6d28e2be2980377c"
   integrity sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==
 
+ws@^7.4.6:
+  version "7.5.5"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.5.tgz#8b4bc4af518cfabd0473ae4f99144287b33eb881"
+  integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
+
 xdg-basedir@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xdg-basedir/-/xdg-basedir-3.0.0.tgz#496b2cc109eca8dbacfe2dc72b603c17c5870ad4"
@@ -16614,7 +17310,7 @@ yargs@^15.4.1:
     y18n "^4.0.0"
     yargs-parser "^18.1.2"
 
-yauzl@2.10.0, yauzl@^2.4.2:
+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=
@@ -16629,6 +17325,13 @@ yauzl@2.4.1:
   dependencies:
     fd-slicer "~1.0.1"
 
+yazl@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/yazl/-/yazl-2.5.1.tgz#a3d65d3dd659a5b0937850e8609f22fffa2b5c35"
+  integrity sha512-phENi2PLiHnHb6QBVot+dJnaAZ0xosj7p3fWl+znIjBDlnMI2PsZCJZ306BPTFOaHf5qdDEI8x5qFrSOBN5vrw==
+  dependencies:
+    buffer-crc32 "~0.2.3"
+
 yn@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/yn/-/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"

From a04795c89cfca8b4d48b3b28be82d53c20d585eb Mon Sep 17 00:00:00 2001
From: jstejada <jstejada@fb.com>
Date: Tue, 23 Nov 2021 13:29:47 -0500
Subject: [PATCH 1042/1603] Ensure react-is version used for resolution for
 playwright is installed (#22813)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index c1467036aaf9..c57c892b1573 100644
--- a/package.json
+++ b/package.json
@@ -148,6 +148,6 @@
     "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler"
   },
   "resolutions": {
-    "**/@playwright/test/**/react-is": "^16.0.0"
+    "react-is": "npm:react-is"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 518c249287bf..f376e74f8c5a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13629,10 +13629,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     prop-types "^15.6.2"
     scheduler "^0.13.0"
 
-react-is@^16.0.0, 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-is@^16.8.1, "react-is@npm:react-is":
+  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-lifecycles-compat@^3.0.4:
   version "3.0.4"

From 09d9b17757d538c43fe872a5a0cb72a72c79c897 Mon Sep 17 00:00:00 2001
From: Esteban <lasesteban@gmail.com>
Date: Tue, 23 Nov 2021 23:53:26 +0100
Subject: [PATCH 1043/1603] Update deprecated features in ESLint configuration
 files. (#22767)

---
 .eslintrc.js                                | 37 +++++++-------
 scripts/rollup/validate/eslintrc.cjs.js     | 50 +++++++++----------
 scripts/rollup/validate/eslintrc.cjs2015.js | 48 +++++++++---------
 scripts/rollup/validate/eslintrc.esm.js     | 48 +++++++++---------
 scripts/rollup/validate/eslintrc.fb.js      | 42 ++++++++--------
 scripts/rollup/validate/eslintrc.rn.js      | 36 +++++++-------
 scripts/rollup/validate/eslintrc.umd.js     | 54 ++++++++++-----------
 7 files changed, 156 insertions(+), 159 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 414adb07f933..0bc90137a5c7 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -26,11 +26,8 @@ module.exports = {
 
   parser: 'babel-eslint',
   parserOptions: {
-    ecmaVersion: 8,
+    ecmaVersion: 9,
     sourceType: 'script',
-    ecmaFeatures: {
-      experimentalObjectRestSpread: true,
-    },
   },
 
   // We're stricter than the default config, mostly. We'll override a few rules
@@ -248,36 +245,36 @@ module.exports = {
         'packages/react-server-native-relay/**/*.js',
       ],
       globals: {
-        nativeFabricUIManager: true,
+        nativeFabricUIManager: 'readonly',
       },
     },
     {
       files: ['packages/react-server-dom-webpack/**/*.js'],
       globals: {
-        __webpack_chunk_load__: true,
-        __webpack_require__: true,
+        __webpack_chunk_load__: 'readonly',
+        __webpack_require__: 'readonly',
       },
     },
     {
       files: ['packages/scheduler/**/*.js'],
       globals: {
-        TaskController: true,
+        TaskController: 'readonly',
       },
     },
   ],
 
   globals: {
-    spyOnDev: true,
-    spyOnDevAndProd: true,
-    spyOnProd: true,
-    __EXPERIMENTAL__: true,
-    __EXTENSION__: true,
-    __PROFILE__: true,
-    __TEST__: true,
-    __UMD__: true,
-    __VARIANT__: true,
-    gate: true,
-    trustedTypes: true,
-    IS_REACT_ACT_ENVIRONMENT: true,
+    spyOnDev: 'readonly',
+    spyOnDevAndProd: 'readonly',
+    spyOnProd: 'readonly',
+    __EXPERIMENTAL__: 'readonly',
+    __EXTENSION__: 'readonly',
+    __PROFILE__: 'readonly',
+    __TEST__: 'readonly',
+    __UMD__: 'readonly',
+    __VARIANT__: 'readonly',
+    gate: 'readonly',
+    trustedTypes: 'readonly',
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
 };
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index e75f5967eeaf..45b7a41e7e59 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -7,45 +7,45 @@ module.exports = {
   },
   globals: {
     // ES 6
-    Map: true,
-    Set: true,
-    Proxy: true,
-    Symbol: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
-    globalThis: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
+    globalThis: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // CommonJS / Node
-    process: true,
-    setImmediate: true,
-    Buffer: true,
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    expect: true,
-    jest: true,
+    expect: 'readonly',
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index 721dd9b026bf..7135a5a706cf 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -7,44 +7,44 @@ module.exports = {
   },
   globals: {
     // ES 6
-    Map: true,
-    Set: true,
-    Proxy: true,
-    Symbol: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // CommonJS / Node
-    process: true,
-    setImmediate: true,
-    Buffer: true,
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    expect: true,
-    jest: true,
+    expect: 'readonly',
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2015,
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index bbc94a7f4ee2..34cde555478a 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -7,44 +7,44 @@ module.exports = {
   },
   globals: {
     // ES 6
-    Map: true,
-    Set: true,
-    Proxy: true,
-    Symbol: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Proxy: 'readonly',
+    Symbol: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // CommonJS / Node
-    process: true,
-    setImmediate: true,
-    Buffer: true,
+    process: 'readonly',
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    expect: true,
-    jest: true,
+    expect: 'readonly',
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 2017,
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index bd5881ca4753..d267ca2bec30 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -7,40 +7,40 @@ module.exports = {
   },
   globals: {
     // ES6
-    Map: true,
-    Set: true,
-    Symbol: true,
-    Proxy: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // FB
-    __DEV__: true,
+    __DEV__: 'readonly',
     // Node.js Server Rendering
-    setImmediate: true,
-    Buffer: true,
+    setImmediate: 'readonly',
+    Buffer: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // jest
-    jest: true,
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index 0f2d7f808da8..e466784e8fcb 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -7,36 +7,36 @@ module.exports = {
   },
   globals: {
     // ES6
-    Map: true,
-    Set: true,
-    Symbol: true,
-    Proxy: true,
-    WeakMap: true,
-    WeakSet: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // FB
-    __DEV__: true,
+    __DEV__: 'readonly',
     // Fabric. See https://github.com/facebook/react/pull/15490
     // for more information
-    nativeFabricUIManager: true,
+    nativeFabricUIManager: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
     // RN supports this
-    setImmediate: true,
+    setImmediate: 'readonly',
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // jest
-    jest: true,
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 2077eec02948..2d274375cca8 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -6,50 +6,50 @@ module.exports = {
   },
   globals: {
     // ES6
-    Map: true,
-    Set: true,
-    Symbol: true,
-    Proxy: true,
-    WeakMap: true,
-    WeakSet: true,
-    Uint16Array: true,
-    Reflect: true,
+    Map: 'readonly',
+    Set: 'readonly',
+    Symbol: 'readonly',
+    Proxy: 'readonly',
+    WeakMap: 'readonly',
+    WeakSet: 'readonly',
+    Uint16Array: 'readonly',
+    Reflect: 'readonly',
     // Vendor specific
-    MSApp: true,
-    __REACT_DEVTOOLS_GLOBAL_HOOK__: true,
+    MSApp: 'readonly',
+    __REACT_DEVTOOLS_GLOBAL_HOOK__: 'readonly',
     // UMD wrapper code
     // TODO: this is too permissive.
     // Ideally we should only allow these *inside* the UMD wrapper.
-    exports: true,
-    module: true,
-    define: true,
-    require: true,
-    globalThis: true,
-    global: true,
+    exports: 'readonly',
+    module: 'readonly',
+    define: 'readonly',
+    require: 'readonly',
+    globalThis: 'readonly',
+    global: 'readonly',
     // Internet Explorer
-    setImmediate: true,
+    setImmediate: 'readonly',
     // Trusted Types
-    trustedTypes: true,
+    trustedTypes: 'readonly',
 
     // Scheduler profiling
-    Int32Array: true,
-    ArrayBuffer: true,
+    Int32Array: 'readonly',
+    ArrayBuffer: 'readonly',
 
-    TaskController: true,
+    TaskController: 'readonly',
 
     // Flight
-    Uint8Array: true,
-    Promise: true,
+    Uint8Array: 'readonly',
+    Promise: 'readonly',
 
     // Flight Webpack
-    __webpack_chunk_load__: true,
-    __webpack_require__: true,
+    __webpack_chunk_load__: 'readonly',
+    __webpack_require__: 'readonly',
 
     // jest
-    jest: true,
+    jest: 'readonly',
 
     // act
-    IS_REACT_ACT_ENVIRONMENT: true,
+    IS_REACT_ACT_ENVIRONMENT: 'readonly',
   },
   parserOptions: {
     ecmaVersion: 5,

From c1220ebdde506de91c8b9693b5cb67ac710c8c89 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 23 Nov 2021 18:40:10 -0500
Subject: [PATCH 1044/1603] treat empty string as null (#22807)

---
 .../ReactDOMServerIntegrationElements-test.js | 34 ++---------
 ...DOMServerPartialHydration-test.internal.js | 58 ++++++++++++++++++-
 .../src/__tests__/ReactMultiChildText-test.js |  7 ++-
 .../src/ReactChildFiber.new.js                | 20 +++++--
 .../src/ReactChildFiber.old.js                | 20 +++++--
 .../__tests__/ReactIncrementalUpdates-test.js |  4 +-
 6 files changed, 102 insertions(+), 41 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
index c41170aa54e9..a856bd42edc1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
@@ -87,17 +87,8 @@ describe('ReactDOMServerIntegration', () => {
             {''}
           </div>,
         );
-        if (render === serverRender || render === streamRender) {
-          // For plain server markup result we should have no text nodes if
-          // they're all empty.
-          expect(e.childNodes.length).toBe(0);
-          expect(e.textContent).toBe('');
-        } else {
-          expect(e.childNodes.length).toBe(3);
-          expectTextNode(e.childNodes[0], '');
-          expectTextNode(e.childNodes[1], '');
-          expectTextNode(e.childNodes[2], '');
-        }
+        expect(e.childNodes.length).toBe(0);
+        expect(e.textContent).toBe('');
       });
 
       itRenders('a div with multiple whitespace children', async render => {
@@ -162,27 +153,14 @@ describe('ReactDOMServerIntegration', () => {
 
       itRenders('a leading blank child with a text sibling', async render => {
         const e = await render(<div>{''}foo</div>);
-        if (render === serverRender || render === streamRender) {
-          expect(e.childNodes.length).toBe(1);
-          expectTextNode(e.childNodes[0], 'foo');
-        } else {
-          expect(e.childNodes.length).toBe(2);
-          expectTextNode(e.childNodes[0], '');
-          expectTextNode(e.childNodes[1], 'foo');
-        }
+        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>);
-        // with Fiber, there are just two text nodes.
-        if (render === serverRender || render === streamRender) {
-          expect(e.childNodes.length).toBe(1);
-          expectTextNode(e.childNodes[0], 'foo');
-        } else {
-          expect(e.childNodes.length).toBe(2);
-          expectTextNode(e.childNodes[0], 'foo');
-          expectTextNode(e.childNodes[1], '');
-        }
+        expect(e.childNodes.length).toBe(1);
+        expectTextNode(e.childNodes[0], 'foo');
       });
 
       itRenders('an element with two text children', async render => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index f6bee806f3ac..d4f3886a1c4b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -9,7 +9,7 @@
 
 'use strict';
 
-let React;
+let React = require('react');
 let ReactDOM;
 let ReactDOMServer;
 let Scheduler;
@@ -70,6 +70,17 @@ function dispatchMouseEvent(to, from) {
   }
 }
 
+class TestAppClass extends React.Component {
+  render() {
+    return (
+      <div>
+        <>{''}</>
+        <>{'Hello'}</>
+      </div>
+    );
+  }
+}
+
 describe('ReactDOMServerPartialHydration', () => {
   beforeEach(() => {
     jest.resetModuleRegistry();
@@ -2958,4 +2969,49 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
   });
+
+  function itHydratesWithoutMismatch(msg, App) {
+    it('hydrates without mismatch ' + msg, () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const finalHTML = ReactDOMServer.renderToString(<App />);
+      container.innerHTML = finalHTML;
+
+      ReactDOM.hydrateRoot(container, <App />);
+      Scheduler.unstable_flushAll();
+    });
+  }
+
+  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);
 });
diff --git a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
index 2e99344289a7..74c1d7bc3104 100644
--- a/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
+++ b/packages/react-dom/src/__tests__/ReactMultiChildText-test.js
@@ -53,6 +53,9 @@ const expectChildren = function(container, children) {
       const child = children[i];
 
       if (typeof child === 'string') {
+        if (child === '') {
+          continue;
+        }
         textNode = outerNode.childNodes[mountIndex];
         expect(textNode.nodeType).toBe(3);
         expect(textNode.data).toBe(child);
@@ -83,7 +86,7 @@ describe('ReactMultiChildText', () => {
         true, [],
         0, '0',
         1.2, '1.2',
-        '', '',
+        '', [],
         'foo', 'foo',
 
         [], [],
@@ -93,7 +96,7 @@ describe('ReactMultiChildText', () => {
         [true], [],
         [0], ['0'],
         [1.2], ['1.2'],
-        [''], [''],
+        [''], [],
         ['foo'], ['foo'],
         [<div />], [<div />],
 
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 658b1f0e7b79..55246de7c59b 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -492,7 +492,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // 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.
@@ -568,7 +571,10 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     const key = oldFiber !== null ? oldFiber.key : null;
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // 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.
@@ -630,7 +636,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // 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;
@@ -1327,7 +1336,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       throwOnInvalidObjectType(returnFiber, newChild);
     }
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       return placeSingleChild(
         reconcileSingleTextNode(
           returnFiber,
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 0ef3b301e95a..ae45c2eadcfa 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -492,7 +492,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // 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.
@@ -568,7 +571,10 @@ function ChildReconciler(shouldTrackSideEffects) {
 
     const key = oldFiber !== null ? oldFiber.key : null;
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // 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.
@@ -630,7 +636,10 @@ function ChildReconciler(shouldTrackSideEffects) {
     newChild: any,
     lanes: Lanes,
   ): Fiber | null {
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       // 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;
@@ -1327,7 +1336,10 @@ function ChildReconciler(shouldTrackSideEffects) {
       throwOnInvalidObjectType(returnFiber, newChild);
     }
 
-    if (typeof newChild === 'string' || typeof newChild === 'number') {
+    if (
+      (typeof newChild === 'string' && newChild !== '') ||
+      typeof newChild === 'number'
+    ) {
       return placeSingleChild(
         reconcileSingleTextNode(
           returnFiber,
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
index b507076e9e91..ccbed48fae2b 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalUpdates-test.js
@@ -673,7 +673,7 @@ describe('ReactIncrementalUpdates', () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded(['Committed: ']);
-    expect(root).toMatchRenderedOutput('');
+    expect(root).toMatchRenderedOutput(null);
 
     await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
@@ -734,7 +734,7 @@ describe('ReactIncrementalUpdates', () => {
       root.render(<App />);
     });
     expect(Scheduler).toHaveYielded([]);
-    expect(root).toMatchRenderedOutput('');
+    expect(root).toMatchRenderedOutput(null);
 
     await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {

From 4e6eec69be632c0c0177c5b1c8a70397d92ee181 Mon Sep 17 00:00:00 2001
From: Simen Bekkhus <sbekkhus91@gmail.com>
Date: Wed, 24 Nov 2021 21:51:15 +0100
Subject: [PATCH 1045/1603] fix: document can be `null`, not just `undefined`
 (#22695)

---
 packages/shared/invokeGuardedCallbackImpl.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js
index c33820080054..9fcfbaaef0e9 100644
--- a/packages/shared/invokeGuardedCallbackImpl.js
+++ b/packages/shared/invokeGuardedCallbackImpl.js
@@ -81,7 +81,7 @@ if (__DEV__) {
       // when we call document.createEvent(). However this can cause confusing
       // errors: https://github.com/facebook/create-react-app/issues/3482
       // So we preemptively throw with a better message instead.
-      if (typeof document === 'undefined') {
+      if (typeof document === 'undefined' || document === null) {
         throw new Error(
           'The `document` global was defined when React was initialized, but is not ' +
             'defined anymore. This can happen in a test environment if a component ' +

From cbc484b5ae8cb683aef5ee61fac468679e9bb2aa Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 25 Nov 2021 01:37:09 +0000
Subject: [PATCH 1046/1603] Update attribute-behavior fixture (#22522)

* Fix missing key warning

* Add build instructions

* Update interpretation now that React 17 is latest stable and 18 is next

* Ignore ReactDOM.render deprecation warning

* Ensure a server implementation with `renderToString` is used

* Update AttributeTableSnapshot

* Ensure Popover doesn't overflow
---
 fixtures/attribute-behavior/.gitignore        |   2 +-
 .../AttributeTableSnapshot.md                 | 490 ++++++++++--------
 fixtures/attribute-behavior/README.md         |   7 +-
 fixtures/attribute-behavior/package.json      |   2 +-
 fixtures/attribute-behavior/src/App.js        |  11 +-
 5 files changed, 282 insertions(+), 230 deletions(-)

diff --git a/fixtures/attribute-behavior/.gitignore b/fixtures/attribute-behavior/.gitignore
index 49c5a75db940..9190def2d174 100644
--- a/fixtures/attribute-behavior/.gitignore
+++ b/fixtures/attribute-behavior/.gitignore
@@ -10,7 +10,7 @@
 /build
 /public/react.development.js
 /public/react-dom.development.js
-/public/react-dom-server.browser.development.js
+/public/react-dom-server-legacy.browser.development.js
 
 # misc
 .DS_Store
diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index 5a57877f1b64..61037b69c407 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -526,23 +526,23 @@
 ## `amplitude` (on `<feFuncA>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `amplitude=(string)`| (changed)| `<number: 0>` |
+| `amplitude=(string)`| (initial)| `<number: 1>` |
 | `amplitude=(empty string)`| (changed)| `<number: 0>` |
-| `amplitude=(array with string)`| (changed)| `<number: 0>` |
+| `amplitude=(array with string)`| (initial)| `<number: 1>` |
 | `amplitude=(empty array)`| (changed)| `<number: 0>` |
-| `amplitude=(object)`| (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)`| (changed, warning)| `<number: 0>` |
+| `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')`| (changed)| `<number: 0>` |
-| `amplitude=(string 'false')`| (changed)| `<number: 0>` |
-| `amplitude=(string 'on')`| (changed)| `<number: 0>` |
-| `amplitude=(string 'off')`| (changed)| `<number: 0>` |
+| `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>` |
@@ -830,17 +830,17 @@
 | `autoComplete=(empty string)`| (initial)| `<empty string>` |
 | `autoComplete=(array with string)`| (changed)| `"email"` |
 | `autoComplete=(empty array)`| (initial)| `<empty string>` |
-| `autoComplete=(object)`| (changed)| `"result of toString()"` |
-| `autoComplete=(numeric string)`| (changed)| `"42"` |
-| `autoComplete=(-1)`| (changed)| `"-1"` |
-| `autoComplete=(0)`| (changed)| `"0"` |
-| `autoComplete=(integer)`| (changed)| `"1"` |
-| `autoComplete=(NaN)`| (changed, warning)| `"NaN"` |
-| `autoComplete=(float)`| (changed)| `"99.99"` |
+| `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')`| (changed)| `"true"` |
-| `autoComplete=(string 'false')`| (changed)| `"false"` |
+| `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>` |
@@ -1469,16 +1469,16 @@
 | `children=(string 'on')`| (initial)| `[]` |
 | `children=(string 'off')`| (initial)| `[]` |
 | `children=(symbol)`| (initial)| `[]` |
-| `children=(function)`| (initial, warning, ssr warning)| `[]` |
+| `children=(function)`| (initial, warning)| `[]` |
 | `children=(null)`| (initial)| `[]` |
 | `children=(undefined)`| (initial)| `[]` |
 
 ## `cite` (on `<blockquote>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `cite=(string)`| (changed)| `"http://reactjs.com/"` |
+| `cite=(string)`| (changed)| `"https://reactjs.com/"` |
 | `cite=(empty string)`| (changed)| `"http://localhost:3000/"` |
-| `cite=(array with string)`| (changed)| `"http://reactjs.com/"` |
+| `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"` |
@@ -2560,7 +2560,7 @@
 | `defaultChecked=(-1)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(0)`| (initial)| `<boolean: false>` |
 | `defaultChecked=(integer)`| (changed)| `<boolean: true>` |
-| `defaultChecked=(NaN)`| (initial, warning, ssr warning)| `<boolean: false>` |
+| `defaultChecked=(NaN)`| (initial, warning)| `<boolean: false>` |
 | `defaultChecked=(float)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(true)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(false)`| (initial)| `<boolean: false>` |
@@ -2593,9 +2593,9 @@
 | `defaultValue=(string 'false')`| (changed)| `"false"` |
 | `defaultValue=(string 'on')`| (changed)| `"on"` |
 | `defaultValue=(string 'off')`| (changed)| `"off"` |
-| `defaultValue=(symbol)`| (initial, ssr warning)| `<empty string>` |
-| `defaultValue=(function)`| (initial, ssr warning)| `<empty string>` |
-| `defaultValue=(null)`| (initial, ssr warning)| `<empty string>` |
+| `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>`)
@@ -2676,23 +2676,23 @@
 ## `diffuseConstant` (on `<feDiffuseLighting>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `diffuseConstant=(string)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(string)`| (initial)| `<number: 1>` |
 | `diffuseConstant=(empty string)`| (changed)| `<number: 0>` |
-| `diffuseConstant=(array with string)`| (changed)| `<number: 0>` |
+| `diffuseConstant=(array with string)`| (initial)| `<number: 1>` |
 | `diffuseConstant=(empty array)`| (changed)| `<number: 0>` |
-| `diffuseConstant=(object)`| (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)`| (changed, warning)| `<number: 0>` |
+| `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')`| (changed)| `<number: 0>` |
-| `diffuseConstant=(string 'false')`| (changed)| `<number: 0>` |
-| `diffuseConstant=(string 'on')`| (changed)| `<number: 0>` |
-| `diffuseConstant=(string 'off')`| (changed)| `<number: 0>` |
+| `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>` |
@@ -2773,6 +2773,56 @@
 | `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 |
 | --- | --- | --- |
@@ -2801,27 +2851,27 @@
 ## `divisor` (on `<feConvolveMatrix>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `divisor=(string)`| (initial)| `<number: 0>` |
-| `divisor=(empty string)`| (initial)| `<number: 0>` |
-| `divisor=(array with string)`| (initial)| `<number: 0>` |
-| `divisor=(empty array)`| (initial)| `<number: 0>` |
-| `divisor=(object)`| (initial)| `<number: 0>` |
+| `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)`| (initial)| `<number: 0>` |
-| `divisor=(integer)`| (changed)| `<number: 1>` |
-| `divisor=(NaN)`| (initial, warning)| `<number: 0>` |
+| `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: 0>` |
-| `divisor=(false)`| (initial, warning)| `<number: 0>` |
-| `divisor=(string 'true')`| (initial)| `<number: 0>` |
-| `divisor=(string 'false')`| (initial)| `<number: 0>` |
-| `divisor=(string 'on')`| (initial)| `<number: 0>` |
-| `divisor=(string 'off')`| (initial)| `<number: 0>` |
-| `divisor=(symbol)`| (initial, warning)| `<number: 0>` |
-| `divisor=(function)`| (initial, warning)| `<number: 0>` |
-| `divisor=(null)`| (initial)| `<number: 0>` |
-| `divisor=(undefined)`| (initial)| `<number: 0>` |
+| `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 |
@@ -3251,23 +3301,23 @@
 ## `exponent` (on `<feFuncA>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `exponent=(string)`| (changed)| `<number: 0>` |
+| `exponent=(string)`| (initial)| `<number: 1>` |
 | `exponent=(empty string)`| (changed)| `<number: 0>` |
-| `exponent=(array with string)`| (changed)| `<number: 0>` |
+| `exponent=(array with string)`| (initial)| `<number: 1>` |
 | `exponent=(empty array)`| (changed)| `<number: 0>` |
-| `exponent=(object)`| (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)`| (changed, warning)| `<number: 0>` |
+| `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')`| (changed)| `<number: 0>` |
-| `exponent=(string 'false')`| (changed)| `<number: 0>` |
-| `exponent=(string 'on')`| (changed)| `<number: 0>` |
-| `exponent=(string 'off')`| (changed)| `<number: 0>` |
+| `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>` |
@@ -4252,101 +4302,101 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `fx=(string)`| (changed)| `<SVGLength: 10px>` |
-| `fx=(empty string)`| (initial)| `<SVGLength: 0>` |
+| `fx=(empty string)`| (initial)| `<SVGLength: 50%>` |
 | `fx=(array with string)`| (changed)| `<SVGLength: 10px>` |
-| `fx=(empty array)`| (initial)| `<SVGLength: 0>` |
-| `fx=(object)`| (initial)| `<SVGLength: 0>` |
+| `fx=(empty array)`| (initial)| `<SVGLength: 50%>` |
+| `fx=(object)`| (initial)| `<SVGLength: 50%>` |
 | `fx=(numeric string)`| (changed)| `<SVGLength: 42>` |
 | `fx=(-1)`| (changed)| `<SVGLength: -1>` |
-| `fx=(0)`| (initial)| `<SVGLength: 0>` |
+| `fx=(0)`| (changed)| `<SVGLength: 0>` |
 | `fx=(integer)`| (changed)| `<SVGLength: 1>` |
-| `fx=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `fx=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
 | `fx=(float)`| (changed)| `<SVGLength: 99.99>` |
-| `fx=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(string 'true')`| (initial)| `<SVGLength: 0>` |
-| `fx=(string 'false')`| (initial)| `<SVGLength: 0>` |
-| `fx=(string 'on')`| (initial)| `<SVGLength: 0>` |
-| `fx=(string 'off')`| (initial)| `<SVGLength: 0>` |
-| `fx=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fx=(null)`| (initial)| `<SVGLength: 0>` |
-| `fx=(undefined)`| (initial)| `<SVGLength: 0>` |
+| `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: 0>` |
-| `fX=(empty string)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(empty array)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(object)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(0)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fX=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'true')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'false')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'on')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(string 'off')`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(null)`| (initial, warning)| `<SVGLength: 0>` |
-| `fX=(undefined)`| (initial, warning)| `<SVGLength: 0>` |
+| `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: 0>` |
-| `fY=(empty string)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(array with string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(empty array)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(object)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(numeric string)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(-1)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(0)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(integer)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(float)`| (initial, warning, ssr mismatch)| `<SVGLength: 0>` |
-| `fY=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'true')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'false')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'on')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(string 'off')`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(null)`| (initial, warning)| `<SVGLength: 0>` |
-| `fY=(undefined)`| (initial, warning)| `<SVGLength: 0>` |
+| `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: 0>` |
+| `fy=(empty string)`| (initial)| `<SVGLength: 50%>` |
 | `fy=(array with string)`| (changed)| `<SVGLength: 20em>` |
-| `fy=(empty array)`| (initial)| `<SVGLength: 0>` |
-| `fy=(object)`| (initial)| `<SVGLength: 0>` |
+| `fy=(empty array)`| (initial)| `<SVGLength: 50%>` |
+| `fy=(object)`| (initial)| `<SVGLength: 50%>` |
 | `fy=(numeric string)`| (changed)| `<SVGLength: 42>` |
 | `fy=(-1)`| (changed)| `<SVGLength: -1>` |
-| `fy=(0)`| (initial)| `<SVGLength: 0>` |
+| `fy=(0)`| (changed)| `<SVGLength: 0>` |
 | `fy=(integer)`| (changed)| `<SVGLength: 1>` |
-| `fy=(NaN)`| (initial, warning)| `<SVGLength: 0>` |
+| `fy=(NaN)`| (initial, warning)| `<SVGLength: 50%>` |
 | `fy=(float)`| (changed)| `<SVGLength: 99.99>` |
-| `fy=(true)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(false)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(string 'true')`| (initial)| `<SVGLength: 0>` |
-| `fy=(string 'false')`| (initial)| `<SVGLength: 0>` |
-| `fy=(string 'on')`| (initial)| `<SVGLength: 0>` |
-| `fy=(string 'off')`| (initial)| `<SVGLength: 0>` |
-| `fy=(symbol)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(function)`| (initial, warning)| `<SVGLength: 0>` |
-| `fy=(null)`| (initial)| `<SVGLength: 0>` |
-| `fy=(undefined)`| (initial)| `<SVGLength: 0>` |
+| `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 |
@@ -6326,27 +6376,27 @@
 ## `marginHeight` (on `<frame>` inside `<frameset>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `marginHeight=(string)`| (changed, warning, ssr error, ssr mismatch)| `"a string"` |
-| `marginHeight=(empty string)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(array with string)`| (changed, warning, ssr error, ssr mismatch)| `"string"` |
-| `marginHeight=(empty array)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(object)`| (changed, warning, ssr error, ssr mismatch)| `"result of toString()"` |
-| `marginHeight=(numeric string)`| (changed, warning, ssr error, ssr mismatch)| `"42"` |
-| `marginHeight=(-1)`| (changed, warning, ssr error, ssr mismatch)| `"-1"` |
-| `marginHeight=(0)`| (changed, warning, ssr error, ssr mismatch)| `"0"` |
-| `marginHeight=(integer)`| (changed, warning, ssr error, ssr mismatch)| `"1"` |
+| `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, warning, ssr error, ssr mismatch)| `"99.99"` |
+| `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, warning, ssr error, ssr mismatch)| `"true"` |
-| `marginHeight=(string 'false')`| (changed, warning, ssr error, ssr mismatch)| `"false"` |
-| `marginHeight=(string 'on')`| (changed, warning, ssr error, ssr mismatch)| `"on"` |
-| `marginHeight=(string 'off')`| (changed, warning, ssr error, ssr mismatch)| `"off"` |
+| `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, warning, ssr error, ssr mismatch)| `<empty string>` |
-| `marginHeight=(undefined)`| (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 |
@@ -6476,23 +6526,23 @@
 ## `markerHeight` (on `<marker>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `markerHeight=(string)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(empty string)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(array with string)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(empty array)`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(object)`| (changed)| `<SVGLength: 0>` |
+| `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)`| (changed, warning)| `<SVGLength: 0>` |
+| `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')`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(string 'false')`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(string 'on')`| (changed)| `<SVGLength: 0>` |
-| `markerHeight=(string 'off')`| (changed)| `<SVGLength: 0>` |
+| `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>` |
@@ -6576,23 +6626,23 @@
 ## `markerWidth` (on `<marker>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `markerWidth=(string)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(empty string)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(array with string)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(empty array)`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(object)`| (changed)| `<SVGLength: 0>` |
+| `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)`| (changed, warning)| `<SVGLength: 0>` |
+| `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')`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(string 'false')`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(string 'on')`| (changed)| `<SVGLength: 0>` |
-| `markerWidth=(string 'off')`| (changed)| `<SVGLength: 0>` |
+| `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>` |
@@ -7251,23 +7301,23 @@
 ## `numOctaves` (on `<feTurbulence>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `numOctaves=(string)`| (changed)| `<number: 0>` |
+| `numOctaves=(string)`| (initial)| `<number: 1>` |
 | `numOctaves=(empty string)`| (changed)| `<number: 0>` |
-| `numOctaves=(array with string)`| (changed)| `<number: 0>` |
+| `numOctaves=(array with string)`| (initial)| `<number: 1>` |
 | `numOctaves=(empty array)`| (changed)| `<number: 0>` |
-| `numOctaves=(object)`| (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)`| (changed, warning)| `<number: 0>` |
-| `numOctaves=(float)`| (changed)| `<number: 0>` |
+| `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')`| (changed)| `<number: 0>` |
-| `numOctaves=(string 'false')`| (changed)| `<number: 0>` |
-| `numOctaves=(string 'on')`| (changed)| `<number: 0>` |
-| `numOctaves=(string 'off')`| (changed)| `<number: 0>` |
+| `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>` |
@@ -9276,23 +9326,23 @@
 ## `selected` (on `<option>` inside `<select>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `selected=(string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(empty string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(array with string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(empty array)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(object)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(numeric string)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(-1)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(0)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(integer)`| (initial, warning, ssr warning)| `<boolean: true>` |
+| `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, ssr warning)| `<boolean: true>` |
-| `selected=(true)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(false)`| (initial, warning, ssr 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, ssr warning)| `<boolean: true>` |
-| `selected=(string 'off')`| (initial, warning, ssr 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>` |
@@ -9526,23 +9576,23 @@
 ## `specularConstant` (on `<feSpecularLighting>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `specularConstant=(string)`| (changed)| `<number: 0>` |
+| `specularConstant=(string)`| (initial)| `<number: 1>` |
 | `specularConstant=(empty string)`| (changed)| `<number: 0>` |
-| `specularConstant=(array with string)`| (changed)| `<number: 0>` |
+| `specularConstant=(array with string)`| (initial)| `<number: 1>` |
 | `specularConstant=(empty array)`| (changed)| `<number: 0>` |
-| `specularConstant=(object)`| (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)`| (changed, warning)| `<number: 0>` |
+| `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')`| (changed)| `<number: 0>` |
-| `specularConstant=(string 'false')`| (changed)| `<number: 0>` |
-| `specularConstant=(string 'on')`| (changed)| `<number: 0>` |
-| `specularConstant=(string 'off')`| (changed)| `<number: 0>` |
+| `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>` |
@@ -10678,7 +10728,7 @@
 | --- | --- | --- |
 | `style=(string)`| (changed, error, warning, ssr error)| `` |
 | `style=(empty string)`| (changed, error, warning, ssr error)| `` |
-| `style=(array with string)`| (initial)| `[]` |
+| `style=(array with string)`| (changed, error, warning, ssr mismatch)| `` |
 | `style=(empty array)`| (initial)| `[]` |
 | `style=(object)`| (initial)| `[]` |
 | `style=(numeric string)`| (changed, error, warning, ssr error)| `` |
@@ -10751,23 +10801,23 @@
 ## `surfaceScale` (on `<feDiffuseLighting>` inside `<svg>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `surfaceScale=(string)`| (changed)| `<number: 0>` |
+| `surfaceScale=(string)`| (initial)| `<number: 1>` |
 | `surfaceScale=(empty string)`| (changed)| `<number: 0>` |
-| `surfaceScale=(array with string)`| (changed)| `<number: 0>` |
+| `surfaceScale=(array with string)`| (initial)| `<number: 1>` |
 | `surfaceScale=(empty array)`| (changed)| `<number: 0>` |
-| `surfaceScale=(object)`| (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)`| (changed, warning)| `<number: 0>` |
+| `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')`| (changed)| `<number: 0>` |
-| `surfaceScale=(string 'false')`| (changed)| `<number: 0>` |
-| `surfaceScale=(string 'on')`| (changed)| `<number: 0>` |
-| `surfaceScale=(string 'off')`| (changed)| `<number: 0>` |
+| `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>` |
@@ -11810,7 +11860,7 @@
 | `value=(-1)`| (changed)| `"-1"` |
 | `value=(0)`| (changed)| `"0"` |
 | `value=(integer)`| (changed)| `"1"` |
-| `value=(NaN)`| (changed, warning, ssr warning)| `"NaN"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
 | `value=(float)`| (changed)| `"99.99"` |
 | `value=(true)`| (changed)| `"true"` |
 | `value=(false)`| (changed)| `"false"` |
@@ -11818,9 +11868,9 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (initial, warning, ssr warning)| `<empty string>` |
-| `value=(function)`| (initial, warning, ssr warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<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 `<input>` inside `<div>`)
@@ -11845,7 +11895,7 @@
 | `value=(string 'off')`| (changed)| `"off"` |
 | `value=(symbol)`| (initial, warning)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<input>` inside `<div>`)
@@ -11870,7 +11920,7 @@
 | `value=(string 'off')`| (initial)| `<empty string>` |
 | `value=(symbol)`| (initial, warning)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
-| `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
+| `value=(null)`| (initial, warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
 ## `value` (on `<textarea>` inside `<div>`)
@@ -11880,22 +11930,22 @@
 | `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=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
 | `value=(numeric string)`| (changed)| `"42"` |
 | `value=(-1)`| (changed)| `"-1"` |
 | `value=(0)`| (changed)| `"0"` |
 | `value=(integer)`| (changed)| `"1"` |
-| `value=(NaN)`| (changed, warning, ssr warning)| `"NaN"` |
+| `value=(NaN)`| (changed, warning)| `"NaN"` |
 | `value=(float)`| (changed)| `"99.99"` |
-| `value=(true)`| (changed)| `"true"` |
-| `value=(false)`| (changed)| `"false"` |
+| `value=(true)`| (changed, ssr mismatch)| `"true"` |
+| `value=(false)`| (changed, ssr mismatch)| `"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, ssr warning)| `<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 `<option>` inside `<select>`)
@@ -11918,7 +11968,7 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
 | `value=(null)`| (initial)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
diff --git a/fixtures/attribute-behavior/README.md b/fixtures/attribute-behavior/README.md
index 2411462f11aa..51b3452e86d0 100644
--- a/fixtures/attribute-behavior/README.md
+++ b/fixtures/attribute-behavior/README.md
@@ -8,7 +8,7 @@
 
 ## Instructions
 
-`cd fixtures/attribute-behavior && yarn install && yarn start`
+`yarn build --type=UMD_DEV react/index,react-dom && cd fixtures/attribute-behavior && yarn install && yarn start`
 
 ## Interpretation
 
@@ -16,9 +16,8 @@ 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 React 15.\*, and the
-right box shows the property (or attribute) assigned by the latest version of
-React 16.
+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.
diff --git a/fixtures/attribute-behavior/package.json b/fixtures/attribute-behavior/package.json
index 4149300e1be5..e71f60ec2e11 100644
--- a/fixtures/attribute-behavior/package.json
+++ b/fixtures/attribute-behavior/package.json
@@ -12,7 +12,7 @@
   },
   "scripts": {
     "prestart":
-      "cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js public/",
+      "cp ../../build/node_modules/react/umd/react.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom.development.js public/ && cp ../../build/node_modules/react-dom/umd/react-dom-server-legacy.browser.development.js public/",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
diff --git a/fixtures/attribute-behavior/src/App.js b/fixtures/attribute-behavior/src/App.js
index 7cb678b58738..36415c33817c 100644
--- a/fixtures/attribute-behavior/src/App.js
+++ b/fixtures/attribute-behavior/src/App.js
@@ -213,6 +213,9 @@ function getCanonicalizedValue(value) {
 
 let _didWarn = false;
 function warn(str) {
+  if (str.includes('ReactDOM.render is no longer supported')) {
+    return;
+  }
   _didWarn = true;
 }
 const UNKNOWN_HTML_TAGS = new Set(['keygen', 'time', 'command']);
@@ -525,7 +528,7 @@ function ResultPopover(props) {
     <pre
       css={{
         padding: '1em',
-        width: '25em',
+        minWidth: '25em',
       }}>
       {JSON.stringify(
         {
@@ -723,9 +726,9 @@ class App extends React.Component {
     rowPatternHashes: null,
   };
 
-  renderCell = props => {
+  renderCell = ({key, ...props}) => {
     return (
-      <div style={props.style}>
+      <div key={key} style={props.style}>
         <CellContent
           toggleAttribute={this.toggleAttribute}
           completedHashes={this.state.completedHashes}
@@ -764,7 +767,7 @@ class App extends React.Component {
         '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',
+      ReactDOMServerNext: '/react-dom-server-legacy.browser.development.js',
     };
     const codePromises = Object.values(sources).map(src =>
       fetch(src).then(res => res.text())

From ca106a02d1648f4f0048b07c6b88f69aac175d3c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 25 Nov 2021 01:49:52 +0000
Subject: [PATCH 1047/1603] Add `imageSizes` and `imageSrcSet` to know props
 (#22550)

* feat(react-dom): Add `imageSrcSet`

* feat(react-dom): Add `imageSizes`
---
 .../AttributeTableSnapshot.md                 | 50 +++++++++++++++++++
 fixtures/attribute-behavior/src/attributes.js |  2 +
 .../src/shared/possibleStandardNames.js       |  2 +
 3 files changed, 54 insertions(+)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index 61037b69c407..cbaadbca7769 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -5248,6 +5248,56 @@
 | `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 |
 | --- | --- | --- |
diff --git a/fixtures/attribute-behavior/src/attributes.js b/fixtures/attribute-behavior/src/attributes.js
index d534613a8996..6fc61700d3a4 100644
--- a/fixtures/attribute-behavior/src/attributes.js
+++ b/fixtures/attribute-behavior/src/attributes.js
@@ -937,6 +937,8 @@ const attributes = [
     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'),
diff --git a/packages/react-dom/src/shared/possibleStandardNames.js b/packages/react-dom/src/shared/possibleStandardNames.js
index 06250d1036ec..98a7e7083153 100644
--- a/packages/react-dom/src/shared/possibleStandardNames.js
+++ b/packages/react-dom/src/shared/possibleStandardNames.js
@@ -79,6 +79,8 @@ const possibleStandardNames = {
   'http-equiv': 'httpEquiv',
   icon: 'icon',
   id: 'id',
+  imagesizes: 'imageSizes',
+  imagesrcset: 'imageSrcSet',
   innerhtml: 'innerHTML',
   inputmode: 'inputMode',
   integrity: 'integrity',

From 0cc724c777930438d92727803826a44ec97bcc55 Mon Sep 17 00:00:00 2001
From: Michelle Chen <michelle.chen@shopify.com>
Date: Thu, 25 Nov 2021 17:43:22 -0500
Subject: [PATCH 1048/1603] update ReactFlightWebpackPlugin to be compatiable
 with webpack v5 (#22739)

---
 .../react-server-dom-webpack/package.json     |   2 +-
 .../src/ReactFlightWebpackPlugin.js           | 247 +++++++++++-------
 2 files changed, 156 insertions(+), 93 deletions(-)

diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index f81ef0bac9bb..8ae583907405 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -50,7 +50,7 @@
   "peerDependencies": {
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "webpack": "^4.43.0"
+    "webpack": "^5.59.0"
   },
   "dependencies": {
     "acorn": "^6.2.1",
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index a81aec2c1738..0c49d293733c 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -14,8 +14,13 @@ import asyncLib from 'neo-async';
 
 import ModuleDependency from 'webpack/lib/dependencies/ModuleDependency';
 import NullDependency from 'webpack/lib/dependencies/NullDependency';
-import AsyncDependenciesBlock from 'webpack/lib/AsyncDependenciesBlock';
 import Template from 'webpack/lib/Template';
+import {
+  sources,
+  WebpackError,
+  Compilation,
+  AsyncDependenciesBlock,
+} from 'webpack';
 
 import isArray from 'shared/isArray';
 
@@ -34,6 +39,7 @@ class ClientReferenceDependency extends ModuleDependency {
 // 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';
 const clientFileName = require.resolve('../');
 
 type ClientReferenceSearchPath = {
@@ -97,33 +103,35 @@ export default class ReactFlightWebpackPlugin {
   }
 
   apply(compiler: any) {
+    const _this = this;
     let resolvedClientReferences;
-    const run = (params, callback) => {
-      // First we need to find all client files on the file system. We do this early so
-      // that we have them synchronously available later when we need them. This might
-      // not be needed anymore since we no longer need to compile the module itself in
-      // a special way. So it's probably better to do this lazily and in parallel with
-      // other compilation.
-      const contextResolver = compiler.resolverFactory.get('context', {});
-      this.resolveAllClientFiles(
-        compiler.context,
-        contextResolver,
-        compiler.inputFileSystem,
-        compiler.createContextModuleFactory(),
-        (err, resolvedClientRefs) => {
-          if (err) {
-            callback(err);
-            return;
-          }
-          resolvedClientReferences = resolvedClientRefs;
-          callback();
-        },
-      );
-    };
+    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', {});
+
+        _this.resolveAllClientFiles(
+          compiler.context,
+          contextResolver,
+          compiler.inputFileSystem,
+          contextModuleFactory,
+          function(err, resolvedClientRefs) {
+            if (err) {
+              callback(err);
+              return;
+            }
+
+            resolvedClientReferences = resolvedClientRefs;
+            callback();
+          },
+        );
+      },
+    );
 
-    compiler.hooks.run.tapAsync(PLUGIN_NAME, run);
-    compiler.hooks.watchRun.tapAsync(PLUGIN_NAME, run);
-    compiler.hooks.compilation.tap(
+    compiler.hooks.thisCompilation.tap(
       PLUGIN_NAME,
       (compilation, {normalModuleFactory}) => {
         compilation.dependencyFactories.set(
@@ -135,86 +143,140 @@ export default class ReactFlightWebpackPlugin {
           new NullDependency.Template(),
         );
 
-        compilation.hooks.buildModule.tap(PLUGIN_NAME, module => {
+        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.
-          // TODO: Warn if we don't find this file anywhere in the compilation.
-          if (module.resource !== clientFileName) {
-            return;
-          }
-          if (resolvedClientReferences) {
-            for (let i = 0; i < resolvedClientReferences.length; i++) {
-              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,
-                },
-                module,
-                null,
-                dep.require,
-              );
-              block.addDependency(dep);
-              module.addBlock(block);
+          parser.hooks.program.tap(PLUGIN_NAME, () => {
+            const module = parser.state.module;
+
+            if (module.resource !== clientFileName) {
+              return;
             }
-          }
-        });
+
+            clientFileNameFound = true;
+
+            if (resolvedClientReferences) {
+              for (let i = 0; i < resolvedClientReferences.length; i++) {
+                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.emit.tap(PLUGIN_NAME, compilation => {
-      const json = {};
-      compilation.chunkGroups.forEach(chunkGroup => {
-        const chunkIds = chunkGroup.chunks.map(c => c.id);
-
-        function recordModule(id, mod) {
-          // 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 (!/\.client\.js$/.test(mod.resource)) {
+    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.manifestFilename} was not created.`,
+              ),
+            );
             return;
           }
-          const moduleExports = {};
-          ['', '*'].concat(mod.buildMeta.providedExports).forEach(name => {
-            moduleExports[name] = {
-              id: id,
-              chunks: chunkIds,
-              name: name,
-            };
-          });
-          const href = pathToFileURL(mod.resource).href;
-          if (href !== undefined) {
-            json[href] = moduleExports;
-          }
-        }
 
-        chunkGroup.chunks.forEach(chunk => {
-          chunk.getModules().forEach(mod => {
-            recordModule(mod.id, mod);
-            // If this is a concatenation, register each child to the parent ID.
-            if (mod.modules) {
-              mod.modules.forEach(concatenatedMod => {
-                recordModule(mod.id, concatenatedMod);
-              });
+          const json = {};
+          compilation.chunkGroups.forEach(function(chunkGroup) {
+            const chunkIds = chunkGroup.chunks.map(function(c) {
+              return c.id;
+            });
+
+            function recordModule(id, 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 (!/\.client\.(js|ts)x?$/.test(module.resource)) {
+                return;
+              }
+
+              const moduleProvidedExports = compilation.moduleGraph
+                .getExportsInfo(module)
+                .getProvidedExports();
+
+              const moduleExports = {};
+              ['', '*']
+                .concat(
+                  Array.isArray(moduleProvidedExports)
+                    ? moduleProvidedExports
+                    : [],
+                )
+                .forEach(function(name) {
+                  moduleExports[name] = {
+                    id,
+                    chunks: chunkIds,
+                    name: name,
+                  };
+                });
+              const href = pathToFileURL(module.resource).href;
+
+              if (href !== undefined) {
+                json[href] = moduleExports;
+              }
             }
+
+            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 output = JSON.stringify(json, null, 2);
-      compilation.assets[this.manifestFilename] = {
-        source() {
-          return output;
-        },
-        size() {
-          return output.length;
+
+          const output = JSON.stringify(json, null, 2);
+          compilation.emitAsset(
+            _this.manifestFilename,
+            new sources.RawSource(output, false),
+          );
         },
-      };
+      );
     });
   }
 
@@ -268,7 +330,8 @@ export default class ReactFlightWebpackPlugin {
               (err2: null | Error, deps: Array<ModuleDependency>) => {
                 if (err2) return cb(err2);
                 const clientRefDeps = deps.map(dep => {
-                  const request = join(resolvedDirectory, dep.request);
+                  // 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;

From a65ceef370f978e776c2f3356a8baae22369e698 Mon Sep 17 00:00:00 2001
From: jstejada <jstejada@fb.com>
Date: Tue, 30 Nov 2021 10:48:46 -0500
Subject: [PATCH 1049/1603] DevTools: Log version in internal logger (#22825)

---
 .../react-devtools-shared/src/registerDevToolsEventLogger.js     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index d475bc3e7de3..8ce531449904 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -25,6 +25,7 @@ export function registerDevToolsEventLogger(surface: string) {
             event: event,
             context: {
               surface,
+              version: process.env.DEVTOOLS_VERSION,
             },
           },
           '*',

From ed00d2c3d8e39c214bb749dc8a520a4a695c19fd Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 2 Dec 2021 02:25:32 +0000
Subject: [PATCH 1050/1603] Remove unused flag (#22854)

---
 packages/shared/ReactFeatureFlags.js                            | 2 --
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 1 -
 packages/shared/forks/ReactFeatureFlags.native-oss.js           | 1 -
 packages/shared/forks/ReactFeatureFlags.test-renderer.js        | 1 -
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 1 -
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js    | 1 -
 packages/shared/forks/ReactFeatureFlags.testing.js              | 1 -
 packages/shared/forks/ReactFeatureFlags.testing.www.js          | 1 -
 packages/shared/forks/ReactFeatureFlags.www.js                  | 2 --
 9 files changed, 11 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index a5d8f214bfff..e9d08148c475 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -174,8 +174,6 @@ export const enableUseRefAccessWarning = false;
 
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
-
 export const disableSchedulerTimeoutInWorkLoop = false;
 
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 5994f0eefcd6..a97584826fb1 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -68,7 +68,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index aac8579f0ed6..b0dd90b28bb8 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -59,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 853907907e91..f4d0cbcd1cb1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -59,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e2431deb9e21..cfd0c0eb3588 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -58,7 +58,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 63d6afaeb416..b1d7261b5cae 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -59,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 57038ecda8f3..d91a5cc622e7 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -59,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index b1c0b679d544..e2a7e6a639e7 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -59,7 +59,6 @@ export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
 export const warnAboutCallbackRefReturningFunction = false;
 
-export const enableRecursiveCommitTraversal = false;
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 7c17ae8b5cfb..a46b66fb20db 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -93,8 +93,6 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 // to the correct value.
 export const enableNewReconciler = __VARIANT__;
 
-export const enableRecursiveCommitTraversal = false;
-
 export const allowConcurrentByDefault = true;
 
 export const deletedTreeCleanUpLevel = 3;

From ea5a413602e6a3beec9ba929930ebb73eeee8da0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 2 Dec 2021 13:55:57 +0000
Subject: [PATCH 1051/1603] Decouple dispatching from attemptToDispatchEvent
 (#22851)

* Decoupled dispatching from attemptToDispatchEvent

* Remove unnecessary field

It is unnecessary because it's only true when retval is null.
---
 .../src/events/ReactDOMEventListener.js       | 39 ++++++++++++-------
 .../src/events/ReactDOMEventReplaying.js      | 32 ++++++++++++---
 2 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 86924e7c2673..07ce1e4a3f06 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -180,15 +180,20 @@ export function dispatchEvent(
     return;
   }
 
-  let blockedOn = attemptToDispatchEvent(
+  let blockedOn = findInstanceBlockingEvent(
     domEventName,
     eventSystemFlags,
     targetContainer,
     nativeEvent,
   );
-
   if (blockedOn === null) {
-    // We successfully dispatched this event.
+    dispatchEventForPluginEventSystem(
+      domEventName,
+      eventSystemFlags,
+      nativeEvent,
+      return_targetInst,
+      targetContainer,
+    );
     if (allowReplay) {
       clearIfContinuousEvent(domEventName, nativeEvent);
     }
@@ -236,12 +241,21 @@ export function dispatchEvent(
       if (fiber !== null) {
         attemptSynchronousHydration(fiber);
       }
-      const nextBlockedOn = attemptToDispatchEvent(
+      const nextBlockedOn = findInstanceBlockingEvent(
         domEventName,
         eventSystemFlags,
         targetContainer,
         nativeEvent,
       );
+      if (nextBlockedOn === null) {
+        dispatchEventForPluginEventSystem(
+          domEventName,
+          eventSystemFlags,
+          nativeEvent,
+          return_targetInst,
+          targetContainer,
+        );
+      }
       if (nextBlockedOn === blockedOn) {
         break;
       }
@@ -264,8 +278,11 @@ export function dispatchEvent(
   );
 }
 
-// Attempt dispatching an event. Returns a SuspenseInstance or Container if it's blocked.
-export function attemptToDispatchEvent(
+export let return_targetInst = null;
+
+// Returns a SuspenseInstance or Container if it's blocked.
+// The return_targetInst field above is conceptually part of the return value.
+export function findInstanceBlockingEvent(
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -273,6 +290,8 @@ export function attemptToDispatchEvent(
 ): null | Container | SuspenseInstance {
   // TODO: Warn if _enabled is false.
 
+  return_targetInst = null;
+
   const nativeEventTarget = getEventTarget(nativeEvent);
   let targetInst = getClosestInstanceFromNode(nativeEventTarget);
 
@@ -313,13 +332,7 @@ export function attemptToDispatchEvent(
       }
     }
   }
-  dispatchEventForPluginEventSystem(
-    domEventName,
-    eventSystemFlags,
-    nativeEvent,
-    targetInst,
-    targetContainer,
-  );
+  return_targetInst = targetInst;
   // We're not blocked on anything.
   return null;
 }
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index ed31f20e5118..e277b98a9ff8 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -27,7 +27,11 @@ import {
   getContainerFromFiber,
   getSuspenseInstanceFromFiber,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
-import {attemptToDispatchEvent} from './ReactDOMEventListener';
+import {
+  findInstanceBlockingEvent,
+  return_targetInst,
+} from './ReactDOMEventListener';
+import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   getInstanceFromNode,
   getClosestInstanceFromNode,
@@ -389,7 +393,7 @@ export function queueIfContinuousEvent(
 function attemptExplicitHydrationTarget(
   queuedTarget: QueuedHydrationTarget,
 ): void {
-  // TODO: This function shares a lot of logic with attemptToDispatchEvent.
+  // 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);
@@ -462,13 +466,21 @@ function attemptReplayContinuousQueuedEvent(
   const targetContainers = queuedEvent.targetContainers;
   while (targetContainers.length > 0) {
     const targetContainer = targetContainers[0];
-    const nextBlockedOn = attemptToDispatchEvent(
+    const nextBlockedOn = findInstanceBlockingEvent(
       queuedEvent.domEventName,
       queuedEvent.eventSystemFlags,
       targetContainer,
       queuedEvent.nativeEvent,
     );
-    if (nextBlockedOn !== null) {
+    if (nextBlockedOn === null) {
+      dispatchEventForPluginEventSystem(
+        queuedEvent.domEventName,
+        queuedEvent.eventSystemFlags,
+        queuedEvent.nativeEvent,
+        return_targetInst,
+        targetContainer,
+      );
+    } else {
       // We're still blocked. Try again later.
       const fiber = getInstanceFromNode(nextBlockedOn);
       if (fiber !== null) {
@@ -512,13 +524,21 @@ function replayUnblockedEvents() {
       const targetContainers = nextDiscreteEvent.targetContainers;
       while (targetContainers.length > 0) {
         const targetContainer = targetContainers[0];
-        const nextBlockedOn = attemptToDispatchEvent(
+        const nextBlockedOn = findInstanceBlockingEvent(
           nextDiscreteEvent.domEventName,
           nextDiscreteEvent.eventSystemFlags,
           targetContainer,
           nextDiscreteEvent.nativeEvent,
         );
-        if (nextBlockedOn !== null) {
+        if (nextBlockedOn === null) {
+          dispatchEventForPluginEventSystem(
+            nextDiscreteEvent.domEventName,
+            nextDiscreteEvent.eventSystemFlags,
+            nextDiscreteEvent.nativeEvent,
+            return_targetInst,
+            targetContainer,
+          );
+        } else {
           // We're still blocked. Try again later.
           nextDiscreteEvent.blockedOn = nextBlockedOn;
           break;

From e737ea965573930eabc97bafea673b7f29b46e79 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 2 Dec 2021 14:02:49 +0000
Subject: [PATCH 1052/1603] Fork dispatch function based on the flag (#22852)

* Fork function based on a flag

* Prune false branches

Co-authored-by: Marco Salazar <salazarm@fb.com>
---
 .../src/events/ReactDOMEventListener.js       | 109 +++++++++++++++++-
 1 file changed, 103 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 07ce1e4a3f06..bfca2a9d2e7a 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -154,7 +154,29 @@ export function dispatchEvent(
   if (!_enabled) {
     return;
   }
+  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+  } else {
+    dispatchEventOriginal(
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+  }
+}
 
+function dispatchEventOriginal(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+) {
   // TODO: replaying capture phase events is currently broken
   // because we used to do it during top-level native bubble handlers
   // but now we use different bubble and capture handlers.
@@ -180,7 +202,7 @@ export function dispatchEvent(
     return;
   }
 
-  let blockedOn = findInstanceBlockingEvent(
+  const blockedOn = findInstanceBlockingEvent(
     domEventName,
     eventSystemFlags,
     targetContainer,
@@ -201,10 +223,7 @@ export function dispatchEvent(
   }
 
   if (allowReplay) {
-    if (
-      !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
-      isDiscreteEventThatRequiresHydration(domEventName)
-    ) {
+    if (isDiscreteEventThatRequiresHydration(domEventName)) {
       // This this to be replayed later once the target is available.
       queueDiscreteEvent(
         blockedOn,
@@ -231,8 +250,86 @@ export function dispatchEvent(
     clearIfContinuousEvent(domEventName, nativeEvent);
   }
 
+  // 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,
+  );
+}
+
+function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+) {
+  // TODO: replaying capture phase events is currently broken
+  // because we used to do it during top-level native bubble handlers
+  // but now we use different bubble and capture handlers.
+  // In eager mode, we attach capture listeners early, so we need
+  // to filter them out until we fix the logic to handle them correctly.
+  const allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
+
+  if (
+    allowReplay &&
+    hasQueuedDiscreteEvents() &&
+    isDiscreteEventThatRequiresHydration(domEventName)
+  ) {
+    // If we already have a queue of discrete events, and this is another discrete
+    // event, then we can't dispatch it regardless of its target, since they
+    // need to dispatch in order.
+    queueDiscreteEvent(
+      null, // Flags that we're not actually blocked on anything as far as we know.
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+    return;
+  }
+
+  let blockedOn = findInstanceBlockingEvent(
+    domEventName,
+    eventSystemFlags,
+    targetContainer,
+    nativeEvent,
+  );
+  if (blockedOn === null) {
+    dispatchEventForPluginEventSystem(
+      domEventName,
+      eventSystemFlags,
+      nativeEvent,
+      return_targetInst,
+      targetContainer,
+    );
+    if (allowReplay) {
+      clearIfContinuousEvent(domEventName, nativeEvent);
+    }
+    return;
+  }
+
+  if (allowReplay) {
+    if (
+      queueIfContinuousEvent(
+        blockedOn,
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        nativeEvent,
+      )
+    ) {
+      return;
+    }
+    // We need to clear only if we didn't queue because
+    // queueing is accumulative.
+    clearIfContinuousEvent(domEventName, nativeEvent);
+  }
+
   if (
-    enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay &&
     eventSystemFlags & IS_CAPTURE_PHASE &&
     isDiscreteEventThatRequiresHydration(domEventName)
   ) {

From 44f99d75fa4528b82810edd03eccf82f7ea21ea0 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 2 Dec 2021 14:11:21 +0000
Subject: [PATCH 1053/1603] Track currently replaying event (#22853)

* Track currently replaying event

Co-authored-by: Dan Abramov <dan.abramov@me.com>

* Add warnings

Co-authored-by: Marco Salazar <salazarm@fb.com>
---
 .../src/events/CurrentReplayingEvent.js       | 42 +++++++++++++++++++
 .../src/events/DOMPluginEventSystem.js        |  4 +-
 .../react-dom/src/events/EventSystemFlags.js  |  5 +--
 .../src/events/ReactDOMEventReplaying.js      |  9 ++--
 .../events/plugins/EnterLeaveEventPlugin.js   |  4 +-
 5 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-dom/src/events/CurrentReplayingEvent.js

diff --git a/packages/react-dom/src/events/CurrentReplayingEvent.js b/packages/react-dom/src/events/CurrentReplayingEvent.js
new file mode 100644
index 000000000000..c7091360de3b
--- /dev/null
+++ b/packages/react-dom/src/events/CurrentReplayingEvent.js
@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import 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/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index 7f7f77183726..e52b128c11da 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -27,6 +27,7 @@ import {
   IS_EVENT_HANDLE_NON_MANAGED_NODE,
   IS_NON_DELEGATED,
 } from './EventSystemFlags';
+import {isReplayingEvent} from './CurrentReplayingEvent';
 
 import {
   HostRoot,
@@ -557,7 +558,8 @@ export function dispatchEventForPluginEventSystem(
       // 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
+      (eventSystemFlags & SHOULD_NOT_DEFER_CLICK_FOR_FB_SUPPORT_MODE) === 0 &&
+      !isReplayingEvent(nativeEvent)
     ) {
       deferClickToDocumentForLegacyFBSupport(domEventName, targetContainer);
       return;
diff --git a/packages/react-dom/src/events/EventSystemFlags.js b/packages/react-dom/src/events/EventSystemFlags.js
index 150a73d35ded..2e2600dfb506 100644
--- a/packages/react-dom/src/events/EventSystemFlags.js
+++ b/packages/react-dom/src/events/EventSystemFlags.js
@@ -13,11 +13,10 @@ 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_REPLAYED = 1 << 4;
-export const IS_LEGACY_FB_SUPPORT_MODE = 1 << 5;
+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_REPLAYED | IS_CAPTURE_PHASE;
+  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
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index e277b98a9ff8..bfcc7a4596f4 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -31,6 +31,7 @@ import {
   findInstanceBlockingEvent,
   return_targetInst,
 } from './ReactDOMEventListener';
+import {setReplayingEvent, resetReplayingEvent} from './CurrentReplayingEvent';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   getInstanceFromNode,
@@ -91,8 +92,6 @@ type PointerEvent = Event & {
   ...
 };
 
-import {IS_REPLAYED} from './EventSystemFlags';
-
 type QueuedReplayableEvent = {|
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,
@@ -180,7 +179,7 @@ function createQueuedReplayableEvent(
   return {
     blockedOn,
     domEventName,
-    eventSystemFlags: eventSystemFlags | IS_REPLAYED,
+    eventSystemFlags,
     nativeEvent,
     targetContainers: [targetContainer],
   };
@@ -473,6 +472,7 @@ function attemptReplayContinuousQueuedEvent(
       queuedEvent.nativeEvent,
     );
     if (nextBlockedOn === null) {
+      setReplayingEvent(queuedEvent.nativeEvent);
       dispatchEventForPluginEventSystem(
         queuedEvent.domEventName,
         queuedEvent.eventSystemFlags,
@@ -480,6 +480,7 @@ function attemptReplayContinuousQueuedEvent(
         return_targetInst,
         targetContainer,
       );
+      resetReplayingEvent();
     } else {
       // We're still blocked. Try again later.
       const fiber = getInstanceFromNode(nextBlockedOn);
@@ -531,6 +532,7 @@ function replayUnblockedEvents() {
           nextDiscreteEvent.nativeEvent,
         );
         if (nextBlockedOn === null) {
+          setReplayingEvent(nextDiscreteEvent.nativeEvent);
           dispatchEventForPluginEventSystem(
             nextDiscreteEvent.domEventName,
             nextDiscreteEvent.eventSystemFlags,
@@ -538,6 +540,7 @@ function replayUnblockedEvents() {
             return_targetInst,
             targetContainer,
           );
+          resetReplayingEvent();
         } else {
           // We're still blocked. Try again later.
           nextDiscreteEvent.blockedOn = nextBlockedOn;
diff --git a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
index be5d94da806c..ea7e3fac1cd5 100644
--- a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
@@ -13,7 +13,7 @@ import type {DispatchQueue} from '../DOMPluginEventSystem';
 import type {EventSystemFlags} from '../EventSystemFlags';
 
 import {registerDirectEvent} from '../EventRegistry';
-import {IS_REPLAYED} from 'react-dom/src/events/EventSystemFlags';
+import {isReplayingEvent} from '../CurrentReplayingEvent';
 import {SyntheticMouseEvent, SyntheticPointerEvent} from '../SyntheticEvent';
 import {
   getClosestInstanceFromNode,
@@ -54,7 +54,7 @@ function extractEvents(
   const isOutEvent =
     domEventName === 'mouseout' || domEventName === 'pointerout';
 
-  if (isOverEvent && (eventSystemFlags & IS_REPLAYED) === 0) {
+  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

From 71d16750c528ad902e73e2ecb9fc05a40314bb3f Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 2 Dec 2021 14:33:44 +0000
Subject: [PATCH 1054/1603] Replay capture phase for continuous events (#22856)

Co-authored-by: Dan Abramov <dan.abramov@me.com>

Co-authored-by: Marco Salazar <salazarm@fb.com>
---
 ...MServerSelectiveHydration-test.internal.js | 525 +++++++++++++++++-
 .../src/events/ReactDOMEventListener.js       |  62 +--
 .../src/events/ReactDOMEventReplaying.js      |  31 +-
 3 files changed, 558 insertions(+), 60 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 3adf300f9e70..6c4dafbf5c30 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -684,7 +684,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     let suspend = false;
     let resolve;
     const promise = new Promise(resolvePromise => (resolve = resolvePromise));
-
     function Child({text}) {
       if ((text === 'A' || text === 'D') && suspend) {
         throw promise;
@@ -724,11 +723,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
         </div>
       );
     }
-
     const finalHTML = ReactDOMServer.renderToString(<App />);
-
     expect(Scheduler).toHaveYielded(['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);
@@ -746,6 +742,156 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const root = ReactDOM.createRoot(container, {hydrate: true});
     root.render(<App />);
 
+    // Nothing has been hydrated so far.
+    expect(Scheduler).toHaveYielded([]);
+    // Click D
+    dispatchMouseHoverEvent(spanD, null);
+    dispatchClickEvent(spanD);
+    // Hover over B and then C.
+    dispatchMouseHoverEvent(spanB, spanD);
+    dispatchMouseHoverEvent(spanC, spanB);
+    expect(Scheduler).toHaveYielded(['App']);
+    await act(async () => {
+      suspend = false;
+      resolve();
+      await promise;
+    });
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // We should prioritize hydrating D first because we clicked it.
+      // but event isnt replayed
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    } else {
+      // We should prioritize hydrating D first because we clicked it.
+      // Next we should hydrate C since that's the current hover target.
+      // To simplify implementation details we hydrate both B and C at
+      // the same time since B was already scheduled.
+      // This is ok because it will at least not continue for nested
+      // boundary. See the next test below.
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'Clicked 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.unstable_yieldValue(text);
+      return (
+        <span
+          id={text}
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Capture Clicked ' + text);
+          }}
+          onClick={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Clicked ' + text);
+          }}
+          onMouseEnter={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Mouse Enter ' + text);
+          }}
+          onMouseOut={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Mouse Out ' + text);
+          }}
+          onMouseOutCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.unstable_yieldValue('Mouse Out Capture ' + text);
+          }}
+          onMouseOverCapture={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            Scheduler.unstable_yieldValue('Mouse Over Capture ' + text);
+          }}
+          onMouseOver={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Mouse Over ' + text);
+          }}>
+          <div
+            onMouseOverCapture={e => {
+              e.preventDefault();
+              Scheduler.unstable_yieldValue('Mouse Over Capture Inner ' + text);
+            }}>
+            {text}
+          </div>
+        </span>
+      );
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <div
+          onClickCapture={e => {
+            e.preventDefault();
+            Scheduler.unstable_yieldValue('Capture Clicked Parent');
+          }}
+          onMouseOverCapture={e => {
+            Scheduler.unstable_yieldValue('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 />);
+
+    expect(Scheduler).toHaveYielded(['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.
+    ReactDOM.hydrateRoot(container, <App />);
+
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
@@ -776,7 +922,14 @@ describe('ReactDOMServerSelectiveHydration', () => {
         'D',
         'B', // Ideally this should be later.
         'C',
-        'Hover 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',
       ]);
     } else {
@@ -791,11 +944,371 @@ describe('ReactDOMServerSelectiveHydration', () => {
         'Clicked D',
         'B', // Ideally this should be later.
         'C',
-        'Hover C',
+        // Capture phase isn't replayed
+        // Mouseout isn't replayed
+        'Mouse Over C',
+        'Mouse Enter C',
         'A',
       ]);
     }
 
+    // This test shows existing quirk where stopPropagation on mouseout
+    // prevents mouseEnter from firing
+    dispatchMouseHoverEvent(spanC, spanB);
+    expect(Scheduler).toHaveYielded([
+      '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;
+
+    beforeEach(async () => {
+      document.body.innerHTML = '';
+      jest.resetModuleRegistry();
+      let OuterReactDOM;
+      let InnerReactDOM;
+      jest.isolateModules(() => {
+        OuterReactDOM = require('react-dom');
+        OuterScheduler = require('scheduler');
+      });
+      jest.isolateModules(() => {
+        InnerReactDOM = require('react-dom');
+        InnerScheduler = require('scheduler');
+      });
+
+      expect(OuterReactDOM).not.toBe(InnerReactDOM);
+      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.unstable_yieldValue('Suspend Outer');
+          throw outerPromise;
+        }
+        OuterScheduler.unstable_yieldValue('Outer');
+        const innerRoot = outerContainer.querySelector('#inner-root');
+        return (
+          <div
+            id="inner-root"
+            onMouseEnter={() => {
+              Scheduler.unstable_yieldValue('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.unstable_yieldValue('Suspend Inner');
+          throw innerPromise;
+        }
+        InnerScheduler.unstable_yieldValue('Inner');
+        return (
+          <div
+            id="inner"
+            onMouseEnter={() => {
+              Scheduler.unstable_yieldValue('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;
+
+      expect(OuterScheduler).toHaveYielded(['Outer']);
+      expect(InnerScheduler).toHaveYielded(['Inner']);
+
+      suspendOuter = true;
+      suspendInner = true;
+
+      OuterReactDOM.hydrateRoot(outerContainer, <OuterApp />);
+      InnerReactDOM.hydrateRoot(innerContainer, <InnerApp />);
+
+      expect(OuterScheduler).toFlushAndYield(['Suspend Outer']);
+      expect(InnerScheduler).toFlushAndYield(['Suspend Inner']);
+
+      innerDiv = document.querySelector('#inner');
+
+      dispatchClickEvent(innerDiv);
+
+      await act(async () => {
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      expect(OuterScheduler).toHaveYielded(['Suspend Outer']);
+      if (
+        gate(
+          flags =>
+            flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+        )
+      ) {
+        // InnerApp doesn't see the event because OuterApp calls stopPropagation in
+        // capture phase since the event is blocked on suspended component
+        expect(InnerScheduler).toHaveYielded([]);
+      } else {
+        // no stopPropagation
+        expect(InnerScheduler).toHaveYielded(['Suspend Inner']);
+      }
+
+      expect(Scheduler).toHaveYielded([]);
+    });
+    afterEach(async () => {
+      document.body.innerHTML = '';
+    });
+
+    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    it('Inner hydrates first then Outer', async () => {
+      dispatchMouseHoverEvent(innerDiv);
+
+      await act(async () => {
+        resolveInner();
+        await innerPromise;
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      expect(OuterScheduler).toHaveYielded(['Suspend Outer']);
+      // Inner App renders because it is unblocked
+      expect(InnerScheduler).toHaveYielded(['Inner']);
+      // No event is replayed yet
+      expect(Scheduler).toHaveYielded([]);
+
+      dispatchMouseHoverEvent(innerDiv);
+      expect(OuterScheduler).toHaveYielded([]);
+      expect(InnerScheduler).toHaveYielded([]);
+      // No event is replayed yet
+      expect(Scheduler).toHaveYielded([]);
+
+      await act(async () => {
+        resolveOuter();
+        await outerPromise;
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Nothing happens to inner app yet.
+      // Its blocked on the outer app replaying the event
+      expect(InnerScheduler).toHaveYielded([]);
+      // Outer hydrates and schedules Replay
+      expect(OuterScheduler).toHaveYielded(['Outer']);
+      // No event is replayed yet
+      expect(Scheduler).toHaveYielded([]);
+
+      // fire scheduled Replay
+      await act(async () => {
+        jest.runAllTimers();
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // First Inner Mouse Enter fires then Outer Mouse Enter
+      expect(Scheduler).toHaveYielded([
+        'Inner Mouse Enter',
+        'Outer Mouse Enter',
+      ]);
+    });
+
+    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    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
+      expect(OuterScheduler).toHaveYielded(['Outer']);
+      // Inner App is still blocked
+      expect(InnerScheduler).toHaveYielded([]);
+
+      // Replay outer event
+      await act(async () => {
+        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
+      expect(Scheduler).toHaveYielded([]);
+      expect(OuterScheduler).toHaveYielded([]);
+      expect(InnerScheduler).toHaveYielded(['Suspend Inner']);
+
+      dispatchMouseHoverEvent(innerDiv);
+      expect(OuterScheduler).toHaveYielded([]);
+      expect(InnerScheduler).toHaveYielded([]);
+      expect(Scheduler).toHaveYielded([]);
+
+      await act(async () => {
+        resolveInner();
+        await innerPromise;
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // Inner hydrates
+      expect(InnerScheduler).toHaveYielded(['Inner']);
+      // Outer was hydrated earlier
+      expect(OuterScheduler).toHaveYielded([]);
+
+      await act(async () => {
+        Scheduler.unstable_flushAllWithoutAsserting();
+        OuterScheduler.unstable_flushAllWithoutAsserting();
+        InnerScheduler.unstable_flushAllWithoutAsserting();
+      });
+
+      // First Inner Mouse Enter fires then Outer Mouse Enter
+      expect(Scheduler).toHaveYielded([
+        'Inner Mouse Enter',
+        'Outer Mouse Enter',
+      ]);
+    });
+  });
+
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+  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.unstable_yieldValue('Child');
+      return (
+        <div
+          onMouseOver={() => {
+            Scheduler.unstable_yieldValue('on mouse over');
+          }}>
+          Child
+        </div>
+      );
+    }
+
+    function App() {
+      return (
+        <Suspense>
+          <Child />
+        </Suspense>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    suspend = true;
+
+    ReactDOM.hydrateRoot(container, <App />);
+
+    const childDiv = container.firstElementChild;
+    dispatchMouseHoverEvent(childDiv);
+
+    // Not hydrated so event is saved for replay and stopPropagation is called
+    expect(Scheduler).toHaveYielded([]);
+
+    resolve();
+    Scheduler.unstable_flushNumberOfYields(1);
+    expect(Scheduler).toHaveYielded(['Child']);
+
+    Scheduler.unstable_scheduleCallback(
+      Scheduler.unstable_ImmediatePriority,
+      () => {
+        container.removeChild(childDiv);
+
+        const container2 = document.createElement('div');
+        container2.addEventListener('mouseover', () => {
+          Scheduler.unstable_yieldValue('container2 mouse over');
+        });
+        container2.appendChild(childDiv);
+      },
+    );
+    Scheduler.unstable_flushAllWithoutAsserting();
+
+    // Even though the tree is remove the event is still dispatched with native event handler
+    // on the container firing.
+    expect(Scheduler).toHaveYielded(['container2 mouse over']);
+
     document.body.removeChild(container);
   });
 
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index bfca2a9d2e7a..f228090221ff 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -267,31 +267,6 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve
   targetContainer: EventTarget,
   nativeEvent: AnyNativeEvent,
 ) {
-  // TODO: replaying capture phase events is currently broken
-  // because we used to do it during top-level native bubble handlers
-  // but now we use different bubble and capture handlers.
-  // In eager mode, we attach capture listeners early, so we need
-  // to filter them out until we fix the logic to handle them correctly.
-  const allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
-
-  if (
-    allowReplay &&
-    hasQueuedDiscreteEvents() &&
-    isDiscreteEventThatRequiresHydration(domEventName)
-  ) {
-    // If we already have a queue of discrete events, and this is another discrete
-    // event, then we can't dispatch it regardless of its target, since they
-    // need to dispatch in order.
-    queueDiscreteEvent(
-      null, // Flags that we're not actually blocked on anything as far as we know.
-      domEventName,
-      eventSystemFlags,
-      targetContainer,
-      nativeEvent,
-    );
-    return;
-  }
-
   let blockedOn = findInstanceBlockingEvent(
     domEventName,
     eventSystemFlags,
@@ -306,28 +281,25 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve
       return_targetInst,
       targetContainer,
     );
-    if (allowReplay) {
-      clearIfContinuousEvent(domEventName, nativeEvent);
-    }
+    clearIfContinuousEvent(domEventName, nativeEvent);
     return;
   }
 
-  if (allowReplay) {
-    if (
-      queueIfContinuousEvent(
-        blockedOn,
-        domEventName,
-        eventSystemFlags,
-        targetContainer,
-        nativeEvent,
-      )
-    ) {
-      return;
-    }
-    // We need to clear only if we didn't queue because
-    // queueing is accumulative.
-    clearIfContinuousEvent(domEventName, nativeEvent);
+  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 &&
@@ -358,10 +330,10 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve
       }
       blockedOn = nextBlockedOn;
     }
-    if (blockedOn) {
+    if (blockedOn !== null) {
       nativeEvent.stopPropagation();
-      return;
     }
+    return;
   }
 
   // This is not replayable so we'll invoke it but without a target,
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index bfcc7a4596f4..744f5dfda9d9 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -472,15 +472,26 @@ function attemptReplayContinuousQueuedEvent(
       queuedEvent.nativeEvent,
     );
     if (nextBlockedOn === null) {
-      setReplayingEvent(queuedEvent.nativeEvent);
-      dispatchEventForPluginEventSystem(
-        queuedEvent.domEventName,
-        queuedEvent.eventSystemFlags,
-        queuedEvent.nativeEvent,
-        return_targetInst,
-        targetContainer,
-      );
-      resetReplayingEvent();
+      if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+        const nativeEvent = queuedEvent.nativeEvent;
+        const nativeEventClone = new nativeEvent.constructor(
+          nativeEvent.type,
+          (nativeEvent: any),
+        );
+        setReplayingEvent(nativeEventClone);
+        nativeEvent.target.dispatchEvent(nativeEventClone);
+        resetReplayingEvent();
+      } else {
+        setReplayingEvent(queuedEvent.nativeEvent);
+        dispatchEventForPluginEventSystem(
+          queuedEvent.domEventName,
+          queuedEvent.eventSystemFlags,
+          queuedEvent.nativeEvent,
+          return_targetInst,
+          targetContainer,
+        );
+        resetReplayingEvent();
+      }
     } else {
       // We're still blocked. Try again later.
       const fiber = getInstanceFromNode(nextBlockedOn);
@@ -532,6 +543,8 @@ function replayUnblockedEvents() {
           nextDiscreteEvent.nativeEvent,
         );
         if (nextBlockedOn === null) {
+          // This whole function is in !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+          // so we don't need the new replay behavior code branch.
           setReplayingEvent(nextDiscreteEvent.nativeEvent);
           dispatchEventForPluginEventSystem(
             nextDiscreteEvent.domEventName,

From 4729ff6d1f191902897927ff4ecd3d1f390177fa Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 2 Dec 2021 20:49:43 -0500
Subject: [PATCH 1055/1603] Implement identifierPrefix option for useId
 (#22855)

When an `identifierPrefix` option is given, React will add it to the
beginning of ids generated by `useId`.

The main use case is to avoid conflicts when there are multiple React
roots on a single page.

The server API already supported an `identifierPrefix` option. It's not
only used by `useId`, but also for React-generated ids that are used to
stitch together chunks of HTML, among other things. I added a
corresponding option to the client.

You must pass the same prefix option to both the server and client.
Eventually we may make this automatic by sending the prefix from the
server as part of the HTML stream.
---
 packages/react-art/src/ReactART.js            | 10 ++-
 .../src/__tests__/ReactDOMUseId-test.js       | 64 ++++++++++++++++++-
 .../react-dom/src/client/ReactDOMLegacy.js    |  1 +
 packages/react-dom/src/client/ReactDOMRoot.js | 53 ++++++++++-----
 .../src/server/ReactDOMServerFormatConfig.js  | 21 ++++++
 .../ReactDOMServerLegacyFormatConfig.js       |  3 +
 .../react-native-renderer/src/ReactFabric.js  |  1 +
 .../src/ReactNativeRenderer.js                | 10 ++-
 .../server/ReactNativeServerFormatConfig.js   |  8 +++
 .../src/createReactNoop.js                    |  4 ++
 .../src/ReactFiberHooks.new.js                | 12 +++-
 .../src/ReactFiberHooks.old.js                | 12 +++-
 .../src/ReactFiberReconciler.new.js           |  2 +
 .../src/ReactFiberReconciler.old.js           |  2 +
 .../src/ReactFiberRoot.new.js                 | 12 +++-
 .../src/ReactFiberRoot.old.js                 | 12 +++-
 .../src/ReactInternalTypes.js                 |  7 ++
 .../ReactFiberHostContext-test.internal.js    |  4 ++
 packages/react-server/src/ReactFizzHooks.js   | 19 +++---
 .../forks/ReactServerFormatConfig.custom.js   |  1 +
 .../src/ReactTestRenderer.js                  |  1 +
 21 files changed, 223 insertions(+), 36 deletions(-)

diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
index a29f9cd23714..9d1b6a16c203 100644
--- a/packages/react-art/src/ReactART.js
+++ b/packages/react-art/src/ReactART.js
@@ -66,7 +66,15 @@ class Surface extends React.Component {
 
     this._surface = Mode.Surface(+width, +height, this._tagRef);
 
-    this._mountNode = createContainer(this._surface, LegacyRoot, false, null);
+    this._mountNode = createContainer(
+      this._surface,
+      LegacyRoot,
+      false,
+      null,
+      false,
+      false,
+      '',
+    );
     updateContainer(this.props.children, this._mountNode, this);
   }
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index dd7bbaa8b41f..036c138d5e97 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -94,7 +94,7 @@ describe('useId', () => {
 
   function normalizeTreeIdForTesting(id) {
     const [serverClientPrefix, base32, hookIndex] = id.split(':');
-    if (serverClientPrefix === 'r') {
+    if (serverClientPrefix.endsWith('r')) {
       // Client ids aren't stable. For testing purposes, strip out the counter.
       return (
         'CLIENT_GENERATED_ID' +
@@ -569,4 +569,66 @@ describe('useId', () => {
     // Should have hydrated successfully
     expect(span.current).toBe(dehydratedSpan);
   });
+
+  test('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 = ReactDOM.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>
+    `);
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index ac12f18bee50..e3def8459e75 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -121,6 +121,7 @@ function legacyCreateRootFromDOMContainer(
     null, // hydrationCallbacks
     false, // isStrictMode
     false, // concurrentUpdatesByDefaultOverride,
+    '', // identiferPrefix
   );
   markContainerAsRoot(root.current, container);
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index d8794eec5bb1..3c49a15fc14d 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -32,6 +32,7 @@ export type CreateRootOptions = {
   // END OF TODO
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
+  identifierPrefix?: string,
   ...
 };
 
@@ -43,6 +44,7 @@ export type HydrateRootOptions = {
   // Options for all roots
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
+  identifierPrefix?: string,
   ...
 };
 
@@ -158,13 +160,22 @@ export function createRoot(
     null;
   // END TODO
 
-  const isStrictMode = options != null && options.unstable_strictMode === true;
-  let concurrentUpdatesByDefaultOverride = null;
-  if (allowConcurrentByDefault) {
-    concurrentUpdatesByDefaultOverride =
-      options != null && options.unstable_concurrentUpdatesByDefault != null
-        ? options.unstable_concurrentUpdatesByDefault
-        : null;
+  let isStrictMode = false;
+  let concurrentUpdatesByDefaultOverride = false;
+  let identifierPrefix = '';
+  if (options !== null && options !== undefined) {
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
+    if (
+      allowConcurrentByDefault &&
+      options.unstable_concurrentUpdatesByDefault === true
+    ) {
+      concurrentUpdatesByDefaultOverride = true;
+    }
+    if (options.identifierPrefix !== undefined) {
+      identifierPrefix = options.identifierPrefix;
+    }
   }
 
   const root = createContainer(
@@ -174,6 +185,7 @@ export function createRoot(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
   markContainerAsRoot(root.current, container);
 
@@ -217,15 +229,25 @@ export function hydrateRoot(
   // For now we reuse the whole bag of options since they contain
   // the hydration callbacks.
   const hydrationCallbacks = options != null ? options : null;
+  // TODO: Delete this option
   const mutableSources = (options != null && options.hydratedSources) || null;
-  const isStrictMode = options != null && options.unstable_strictMode === true;
-
-  let concurrentUpdatesByDefaultOverride = null;
-  if (allowConcurrentByDefault) {
-    concurrentUpdatesByDefaultOverride =
-      options != null && options.unstable_concurrentUpdatesByDefault != null
-        ? options.unstable_concurrentUpdatesByDefault
-        : null;
+
+  let isStrictMode = false;
+  let concurrentUpdatesByDefaultOverride = false;
+  let identifierPrefix = '';
+  if (options !== null && options !== undefined) {
+    if (options.unstable_strictMode === true) {
+      isStrictMode = true;
+    }
+    if (
+      allowConcurrentByDefault &&
+      options.unstable_concurrentUpdatesByDefault === true
+    ) {
+      concurrentUpdatesByDefaultOverride = true;
+    }
+    if (options.identifierPrefix !== undefined) {
+      identifierPrefix = options.identifierPrefix;
+    }
   }
 
   const root = createContainer(
@@ -235,6 +257,7 @@ export function hydrateRoot(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
   markContainerAsRoot(root.current, container);
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 65a10974b019..c4f8d89a8c90 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -64,6 +64,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
+  idPrefix: string,
   nextSuspenseID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
@@ -125,6 +126,7 @@ export function createResponseState(
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
+    idPrefix: idPrefix + 'R:',
     nextSuspenseID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
@@ -229,6 +231,25 @@ export function assignSuspenseBoundaryID(
   );
 }
 
+export function makeId(
+  responseState: ResponseState,
+  treeId: string,
+  localId: number,
+): string {
+  const idPrefix = responseState.idPrefix;
+
+  let id = idPrefix + 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 += ':' + localId.toString(32);
+  }
+
+  return id;
+}
+
 function encodeHTMLTextNode(text: string): string {
   return escapeTextForBrowser(text);
 }
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 5b0798b73712..c3d09f481fb6 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -34,6 +34,7 @@ export type ResponseState = {
   placeholderPrefix: PrecomputedChunk,
   segmentPrefix: PrecomputedChunk,
   boundaryPrefix: string,
+  idPrefix: string,
   nextSuspenseID: number,
   sentCompleteSegmentFunction: boolean,
   sentCompleteBoundaryFunction: boolean,
@@ -54,6 +55,7 @@ export function createResponseState(
     placeholderPrefix: responseState.placeholderPrefix,
     segmentPrefix: responseState.segmentPrefix,
     boundaryPrefix: responseState.boundaryPrefix,
+    idPrefix: responseState.idPrefix,
     nextSuspenseID: responseState.nextSuspenseID,
     sentCompleteSegmentFunction: responseState.sentCompleteSegmentFunction,
     sentCompleteBoundaryFunction: responseState.sentCompleteBoundaryFunction,
@@ -79,6 +81,7 @@ export {
   getChildFormatContext,
   UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
   assignSuspenseBoundaryID,
+  makeId,
   pushStartInstance,
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 744c1c178397..bf7754d6099c 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -213,6 +213,7 @@ function render(
       null,
       false,
       null,
+      '',
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index a60683b47b2e..fb539d899681 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -202,7 +202,15 @@ function render(
   if (!root) {
     // TODO (bvaughn): If we decide to keep the wrapper component,
     // We could create a wrapper for containerTag as well to reduce special casing.
-    root = createContainer(containerTag, LegacyRoot, false, null, false, null);
+    root = createContainer(
+      containerTag,
+      LegacyRoot,
+      false,
+      null,
+      false,
+      null,
+      '',
+    );
     roots.set(containerTag, root);
   }
   updateContainer(element, root, null, callback);
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 5b12d810bbe0..20084731b533 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -107,6 +107,14 @@ export function assignSuspenseBoundaryID(
   return responseState.nextSuspenseID++;
 }
 
+export function makeId(
+  responseState: ResponseState,
+  treeId: string,
+  localId: number,
+): string {
+  throw new Error('Not implemented');
+}
+
 const RAW_TEXT = stringToPrecomputedChunk('RCTRawText');
 
 export function pushTextInstance(
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index c5021d968939..ef76b6610617 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -973,6 +973,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         false,
         null,
         null,
+        false,
+        '',
       );
       return {
         _Scheduler: Scheduler,
@@ -1000,6 +1002,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         false,
         null,
         null,
+        false,
+        '',
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 2ea341864642..2c26859bafe7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2035,12 +2035,20 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
 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 = 'R:' + treeId;
+    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
@@ -2052,7 +2060,7 @@ function mountId(): string {
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
-    id = 'r:' + globalClientId.toString(32);
+    id = identifierPrefix + 'r:' + globalClientId.toString(32);
   }
 
   hook.memoizedState = id;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index ff6a9f652fb4..077073bbeef3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2035,12 +2035,20 @@ export function getIsUpdatingOpaqueValueInRenderPhaseInDEV(): boolean | void {
 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 = 'R:' + treeId;
+    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
@@ -2052,7 +2060,7 @@ function mountId(): string {
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
-    id = 'r:' + globalClientId.toString(32);
+    id = identifierPrefix + 'r:' + globalClientId.toString(32);
   }
 
   hook.memoizedState = id;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 6c42165a3034..1b8b9502de3e 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -241,6 +241,7 @@ export function createContainer(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -249,6 +250,7 @@ export function createContainer(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 7693cc7fe400..8649ff698984 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -241,6 +241,7 @@ export function createContainer(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -249,6 +250,7 @@ export function createContainer(
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 803adee1e22d..9e9feb45d9b0 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -30,7 +30,7 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
-function FiberRootNode(containerInfo, tag, hydrate) {
+function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
   this.tag = tag;
   this.containerInfo = containerInfo;
   this.pendingChildren = null;
@@ -56,6 +56,8 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  this.identifierPrefix = identifierPrefix;
+
   if (enableCache) {
     this.pooledCache = null;
     this.pooledCacheLanes = NoLanes;
@@ -101,8 +103,14 @@ export function createFiberRoot(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): FiberRoot {
-  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
+  const root: FiberRoot = (new FiberRootNode(
+    containerInfo,
+    tag,
+    hydrate,
+    identifierPrefix,
+  ): any);
   if (enableSuspenseCallback) {
     root.hydrationCallbacks = hydrationCallbacks;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 504dac966ef2..d8d061297854 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -30,7 +30,7 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
-function FiberRootNode(containerInfo, tag, hydrate) {
+function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
   this.tag = tag;
   this.containerInfo = containerInfo;
   this.pendingChildren = null;
@@ -56,6 +56,8 @@ function FiberRootNode(containerInfo, tag, hydrate) {
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  this.identifierPrefix = identifierPrefix;
+
   if (enableCache) {
     this.pooledCache = null;
     this.pooledCacheLanes = NoLanes;
@@ -101,8 +103,14 @@ export function createFiberRoot(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
 ): FiberRoot {
-  const root: FiberRoot = (new FiberRootNode(containerInfo, tag, hydrate): any);
+  const root: FiberRoot = (new FiberRootNode(
+    containerInfo,
+    tag,
+    hydrate,
+    identifierPrefix,
+  ): any);
   if (enableSuspenseCallback) {
     root.hydrationCallbacks = hydrationCallbacks;
   }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index db964103836d..13965720b7cd 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -239,6 +239,13 @@ type BaseFiberRootProperties = {|
 
   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,
 |};
 
 // The following attributes are only used by DevTools and are only present in DEV builds.
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index ee4bd306481b..4bf292df79f7 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -74,6 +74,8 @@ describe('ReactFiberHostContext', () => {
       ConcurrentRoot,
       false,
       null,
+      false,
+      '',
     );
     act(() => {
       Renderer.updateContainer(
@@ -135,6 +137,8 @@ describe('ReactFiberHostContext', () => {
       ConcurrentRoot,
       false,
       null,
+      false,
+      '',
     );
     act(() => {
       Renderer.updateContainer(
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 926a1969bb48..5997f1b02b90 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -22,6 +22,8 @@ import type {Task} from './ReactFizzServer';
 import {readContext as readContextImpl} from './ReactFizzNewContext';
 import {getTreeId} from './ReactFizzTreeContext';
 
+import {makeId} from './ReactServerFormatConfig';
+
 import {enableCache} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
@@ -512,18 +514,15 @@ function useId(): string {
   const task: Task = (currentlyRenderingTask: any);
   const treeId = getTreeId(task.treeContext);
 
-  // Use a captial R prefix for server-generated ids.
-  let id = '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 += ':' + localId.toString(32);
+  const responseState = currentResponseState;
+  if (responseState === null) {
+    throw new Error(
+      'Invalid hook call. Hooks can only be called inside of the body of a function component.',
+    );
   }
 
-  return id;
+  const localId = localIdCounter++;
+  return makeId(responseState, treeId, localId);
 }
 
 function unsupportedRefresh() {
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index f246ddab8b5b..035490fb3f65 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -35,6 +35,7 @@ export const getChildFormatContext = $$$hostConfig.getChildFormatContext;
 export const UNINITIALIZED_SUSPENSE_BOUNDARY_ID =
   $$$hostConfig.UNINITIALIZED_SUSPENSE_BOUNDARY_ID;
 export const assignSuspenseBoundaryID = $$$hostConfig.assignSuspenseBoundaryID;
+export const makeId = $$$hostConfig.makeId;
 export const pushTextInstance = $$$hostConfig.pushTextInstance;
 export const pushStartInstance = $$$hostConfig.pushStartInstance;
 export const pushEndInstance = $$$hostConfig.pushEndInstance;
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 2e49968e85de..de6e4beffec5 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -471,6 +471,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     null,
     isStrictMode,
     concurrentUpdatesByDefault,
+    '',
   );
 
   if (root == null) {

From 8b8817845a8efd8cf53be395fafbb1d0f62c4368 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 3 Dec 2021 16:23:48 -0500
Subject: [PATCH 1056/1603] Timeline search (#22799)

Refactor SearchInput component (used in Components tree) to be generic DevTools component with two uses: ComponentSearchInput and TimelineSearchInput.

Refactored Timeline Suspense to more closely match other, newer Suspense patterns (e.g. inspect component, named hooks) and colocated Susepnse code in timelineCache file.

Add search by component name functionality to the Timeline. For now, searching zooms in to the component measure and you can step through each time it rendered using the next/previous arrows.
---
 .../views/Components/ComponentSearchInput.js  |  38 ++++
 .../src/devtools/views/Components/Tree.js     |   4 +-
 .../devtools/views/Components/TreeContext.js  |   2 +-
 .../Profiler/ClearProfilingDataButton.js      |   6 +-
 .../src/devtools/views/Profiler/Profiler.css  |   6 +
 .../src/devtools/views/Profiler/Profiler.js   |  13 +-
 .../Profiler/ProfilingImportExportButtons.js  |   5 +-
 .../views/{Components => }/SearchInput.css    |   0
 .../views/{Components => }/SearchInput.js     |  86 ++++-----
 .../react-devtools-timeline/src/CanvasPage.js |  31 ++++
 .../react-devtools-timeline/src/Timeline.js   |  40 +++--
 .../src/TimelineContext.js                    |  54 +++---
 .../src/TimelineSearchContext.js              | 166 ++++++++++++++++++
 .../src/TimelineSearchInput.js                |  46 +++++
 .../content-views/ComponentMeasuresView.js    |  50 +++++-
 .../src/content-views/constants.js            |   4 +
 .../src/timelineCache.js                      | 105 +++++++++++
 packages/react-devtools-timeline/src/types.js |   8 +
 18 files changed, 573 insertions(+), 91 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
 rename packages/react-devtools-shared/src/devtools/views/{Components => }/SearchInput.css (100%)
 rename packages/react-devtools-shared/src/devtools/views/{Components => }/SearchInput.js (60%)
 create mode 100644 packages/react-devtools-timeline/src/TimelineSearchContext.js
 create mode 100644 packages/react-devtools-timeline/src/TimelineSearchInput.js
 create mode 100644 packages/react-devtools-timeline/src/timelineCache.js

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 000000000000..3180a7ebb070
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {useContext} from 'react';
+import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
+
+import SearchInput from '../SearchInput';
+
+type Props = {||};
+
+export default function ComponentSearchInput(props: Props) {
+  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
+  const dispatch = useContext(TreeDispatcherContext);
+
+  const search = text => 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 (
+    <SearchInput
+      goToNextResult={goToNextResult}
+      goToPreviousResult={goToPreviousResult}
+      placeholder="Search (text or /regex/)"
+      search={search}
+      searchIndex={searchIndex}
+      searchResultsCount={searchResults.length}
+      searchText={searchText}
+    />
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 061ea131a9bf..3126bfc8f0d3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -27,7 +27,7 @@ import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Element from './Element';
 import InspectHostNodesToggle from './InspectHostNodesToggle';
 import OwnersStack from './OwnersStack';
-import SearchInput from './SearchInput';
+import ComponentSearchInput from './ComponentSearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
@@ -343,7 +343,7 @@ export default function Tree(props: Props) {
             </Fragment>
           )}
           <Suspense fallback={<Loading />}>
-            {ownerID !== null ? <OwnersStack /> : <SearchInput />}
+            {ownerID !== null ? <OwnersStack /> : <ComponentSearchInput />}
           </Suspense>
           {showInlineWarningsAndErrors &&
             ownerID === null &&
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index 93e680bc751a..f6854468dc6e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -829,7 +829,7 @@ type Props = {|
   defaultSelectedElementIndex?: ?number,
 |};
 
-// TODO Remove TreeContextController wrapper element once global ConsearchText.write API exists.
+// TODO Remove TreeContextController wrapper element once global Context.write API exists.
 function TreeContextController({
   children,
   defaultInspectedElementID,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index f57b4ba8e173..8fbebfeba86d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -20,19 +20,19 @@ export default function ClearProfilingDataButton() {
   const {didRecordCommits, isProfiling, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {clearTimelineData, timelineData} = useContext(TimelineContext);
+  const {file, setFile} = useContext(TimelineContext);
   const {profilerStore} = store;
 
   let doesHaveData = false;
   if (selectedTabID === 'timeline') {
-    doesHaveData = timelineData !== null;
+    doesHaveData = file !== null;
   } else {
     doesHaveData = didRecordCommits;
   }
 
   const clear = () => {
     if (selectedTabID === 'timeline') {
-      clearTimelineData();
+      setFile(null);
     } else {
       profilerStore.clear();
     }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
index 6763564e52a2..12089b71fdc6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -115,3 +115,9 @@
 .Link {
   color: var(--color-button);
 }
+
+.TimlineSearchInputContainer {
+  flex: 1 1;
+  display: flex;
+  align-items: center;
+}
\ 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
index 0bd6b0375e07..fbe8c4ac20c0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -28,6 +28,7 @@ import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views
 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';
 
@@ -43,19 +44,19 @@ function Profiler(_: {||}) {
     supportsProfiling,
   } = useContext(ProfilerContext);
 
+  const {searchInputContainerRef} = useContext(TimelineContext);
+
   const {supportsTimeline} = useContext(StoreContext);
 
-  let isLegacyProfilerSelected = false;
+  const isLegacyProfilerSelected = selectedTabID !== 'timeline';
 
   let view = null;
   if (didRecordCommits || selectedTabID === 'timeline') {
     switch (selectedTabID) {
       case 'flame-chart':
-        isLegacyProfilerSelected = true;
         view = <CommitFlamegraph />;
         break;
       case 'ranked-chart':
-        isLegacyProfilerSelected = true;
         view = <CommitRanked />;
         break;
       case 'timeline':
@@ -121,6 +122,12 @@ function Profiler(_: {||}) {
             />
             <RootSelector />
             <div className={styles.Spacer} />
+            {!isLegacyProfilerSelected && (
+              <div
+                ref={searchInputContainerRef}
+                className={styles.TimlineSearchInputContainer}
+              />
+            )}
             <SettingsModalContextToggle />
             {isLegacyProfilerSelected && didRecordCommits && (
               <Fragment>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index 5b53e04410df..afa3b91f2a12 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -29,7 +29,7 @@ export default function ProfilingImportExportButtons() {
   const {isProfiling, profilingData, rootID, selectedTabID} = useContext(
     ProfilerContext,
   );
-  const {importTimelineData} = useContext(TimelineContext);
+  const {setFile} = useContext(TimelineContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
 
@@ -111,7 +111,8 @@ export default function ProfilingImportExportButtons() {
   const importTimelineDataWrapper = event => {
     const input = inputRef.current;
     if (input !== null && input.files.length > 0) {
-      importTimelineData(input.files[0]);
+      const file = input.files[0];
+      setFile(file);
     }
   };
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.css b/packages/react-devtools-shared/src/devtools/views/SearchInput.css
similarity index 100%
rename from packages/react-devtools-shared/src/devtools/views/Components/SearchInput.css
rename to packages/react-devtools-shared/src/devtools/views/SearchInput.css
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
similarity index 60%
rename from packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
rename to packages/react-devtools-shared/src/devtools/views/SearchInput.js
index 736d39fc7524..1ef69ba72669 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -8,44 +8,48 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext, useEffect, useRef} from 'react';
-import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
-import Button from '../Button';
-import ButtonIcon from '../ButtonIcon';
-import Icon from '../Icon';
+import {useEffect, useRef} from 'react';
+import Button from './Button';
+import ButtonIcon from './ButtonIcon';
+import Icon from './Icon';
 
 import styles from './SearchInput.css';
 
-type Props = {||};
-
-export default function SearchInput(props: Props) {
-  const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
-  const dispatch = useContext(TreeDispatcherContext);
+type Props = {|
+  goToNextResult: () => void,
+  goToPreviousResult: () => void,
+  placeholder: string,
+  search: (text: string) => void,
+  searchIndex: number,
+  searchResultsCount: number,
+  searchText: string,
+|};
 
+export default function SearchInput({
+  goToNextResult,
+  goToPreviousResult,
+  placeholder,
+  search,
+  searchIndex,
+  searchResultsCount,
+  searchText,
+}: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
-  const handleTextChange = useCallback(
-    ({currentTarget}) =>
-      dispatch({type: 'SET_SEARCH_TEXT', payload: currentTarget.value}),
-    [dispatch],
-  );
-  const resetSearch = useCallback(
-    () => dispatch({type: 'SET_SEARCH_TEXT', payload: ''}),
-    [dispatch],
-  );
+  const resetSearch = () => search('');
 
-  const handleInputKeyPress = useCallback(
-    ({key, shiftKey}) => {
-      if (key === 'Enter') {
-        if (shiftKey) {
-          dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});
-        } else {
-          dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
-        }
+  const handleChange = ({currentTarget}) => {
+    search(currentTarget.value);
+  };
+  const handleKeyPress = ({key, shiftKey}) => {
+    if (key === 'Enter') {
+      if (shiftKey) {
+        goToPreviousResult();
+      } else {
+        goToNextResult();
       }
-    },
-    [dispatch],
-  );
+    }
+  };
 
   // Auto-focus search input
   useEffect(() => {
@@ -53,7 +57,7 @@ export default function SearchInput(props: Props) {
       return () => {};
     }
 
-    const handleWindowKey = (event: KeyboardEvent) => {
+    const handleKeyDown = (event: KeyboardEvent) => {
       const {key, metaKey} = event;
       if (key === 'f' && metaKey) {
         if (inputRef.current !== null) {
@@ -68,33 +72,33 @@ export default function SearchInput(props: Props) {
     // Here we use portals to render individual tabs (e.g. Profiler),
     // and the root document might belong to a different window.
     const ownerDocument = inputRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleWindowKey);
+    ownerDocument.addEventListener('keydown', handleKeyDown);
 
-    return () => ownerDocument.removeEventListener('keydown', handleWindowKey);
-  }, [inputRef]);
+    return () => ownerDocument.removeEventListener('keydown', handleKeyDown);
+  }, []);
 
   return (
     <div className={styles.SearchInput}>
       <Icon className={styles.InputIcon} type="search" />
       <input
         className={styles.Input}
-        onChange={handleTextChange}
-        onKeyPress={handleInputKeyPress}
-        placeholder="Search (text or /regex/)"
+        onChange={handleChange}
+        onKeyPress={handleKeyPress}
+        placeholder={placeholder}
         ref={inputRef}
         value={searchText}
       />
       {!!searchText && (
         <React.Fragment>
           <span className={styles.IndexLabel}>
-            {Math.min(searchIndex + 1, searchResults.length)} |{' '}
-            {searchResults.length}
+            {Math.min(searchIndex + 1, searchResultsCount)} |{' '}
+            {searchResultsCount}
           </span>
           <div className={styles.LeftVRule} />
           <Button
             className={styles.IconButton}
             disabled={!searchText}
-            onClick={() => dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'})}
+            onClick={goToPreviousResult}
             title={
               <React.Fragment>
                 Scroll to previous search result (<kbd>Shift</kbd> +{' '}
@@ -106,7 +110,7 @@ export default function SearchInput(props: Props) {
           <Button
             className={styles.IconButton}
             disabled={!searchText}
-            onClick={() => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'})}
+            onClick={goToNextResult}
             title={
               <React.Fragment>
                 Scroll to next search result (<kbd>Enter</kbd>)
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 4084fa4eeb86..0b1257003d89 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -62,6 +62,7 @@ import ContextMenuItem from 'react-devtools-shared/src/devtools/ContextMenu/Cont
 import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useContextMenu';
 import {getBatchRange} from './utils/getBatchRange';
 import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
+import {TimelineSearchContext} from './TimelineSearchContext';
 
 import styles from './CanvasPage.css';
 
@@ -170,6 +171,35 @@ function AutoSizedCanvas({
     [],
   );
 
+  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);
   const nativeEventsViewRef = useRef(null);
@@ -334,6 +364,7 @@ function AutoSizedCanvas({
         surface,
         defaultFrame,
         data,
+        viewState,
       );
       componentMeasuresViewRef.current = componentMeasuresView;
       componentMeasuresViewWrapper = createViewHelper(
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index 33459fc4543e..290830840356 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {DataResource} from './createDataResourceFromImportedFile';
 import type {ViewState} from './types';
 
 import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
@@ -25,13 +24,14 @@ import {updateColorsToMatchTheme} from './content-views/constants';
 import {TimelineContext} from './TimelineContext';
 import ImportButton from './ImportButton';
 import CanvasPage from './CanvasPage';
+import {importFile} from './timelineCache';
+import TimelineSearchInput from './TimelineSearchInput';
+import {TimelineSearchContextController} from './TimelineSearchContext';
 
 import styles from './Timeline.css';
 
 export function Timeline(_: {||}) {
-  const {importTimelineData, timelineData, viewState} = useContext(
-    TimelineContext,
-  );
+  const {file, setFile, viewState} = useContext(TimelineContext);
 
   const ref = useRef(null);
 
@@ -62,17 +62,17 @@ export function Timeline(_: {||}) {
 
   return (
     <div className={styles.Content} ref={ref}>
-      {timelineData ? (
+      {file ? (
         <Suspense fallback={<ProcessingData />}>
-          <DataResourceComponent
-            dataResource={timelineData}
+          <FileLoader
+            file={file}
             key={key}
-            onFileSelect={importTimelineData}
+            onFileSelect={setFile}
             viewState={viewState}
           />
         </Suspense>
       ) : (
-        <Welcome onFileSelect={importTimelineData} />
+        <Welcome onFileSelect={setFile} />
       )}
     </div>
   );
@@ -143,20 +143,32 @@ const CouldNotLoadProfile = ({error, onFileSelect}) => (
   </div>
 );
 
-const DataResourceComponent = ({
-  dataResource,
+const FileLoader = ({
+  file,
   onFileSelect,
   viewState,
 }: {|
-  dataResource: DataResource,
+  file: File | null,
   onFileSelect: (file: File) => void,
   viewState: ViewState,
 |}) => {
-  const dataOrError = dataResource.read();
+  if (file === null) {
+    return null;
+  }
+
+  const dataOrError = importFile(file);
   if (dataOrError instanceof Error) {
     return (
       <CouldNotLoadProfile error={dataOrError} onFileSelect={onFileSelect} />
     );
   }
-  return <CanvasPage profilerData={dataOrError} viewState={viewState} />;
+
+  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
index ebfac421e2c3..cbf57a275c0c 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -8,16 +8,19 @@
  */
 
 import * as React from 'react';
-import {createContext, useCallback, useMemo, useState} from 'react';
-import createDataResourceFromImportedFile from './createDataResourceFromImportedFile';
+import {createContext, useMemo, useRef, useState} from 'react';
 
-import type {HorizontalScrollStateChangeCallback, ViewState} from './types';
-import type {DataResource} from './createDataResourceFromImportedFile';
+import type {
+  HorizontalScrollStateChangeCallback,
+  SearchRegExpStateChangeCallback,
+  ViewState,
+} from './types';
+import type {RefObject} from 'shared/ReactTypes';
 
 export type Context = {|
-  clearTimelineData: () => void,
-  importTimelineData: (file: File) => void,
-  timelineData: DataResource | null,
+  file: File | null,
+  searchInputContainerRef: RefObject,
+  setFile: (file: File | null) => void,
   viewState: ViewState,
 |};
 
@@ -29,30 +32,28 @@ type Props = {|
 |};
 
 function TimelineContextController({children}: Props) {
-  const [timelineData, setTimelineData] = useState<DataResource | null>(null);
-
-  const clearTimelineData = useCallback(() => {
-    setTimelineData(null);
-  }, []);
-
-  const importTimelineData = useCallback((file: File) => {
-    setTimelineData(createDataResourceFromImportedFile(file));
-  }, []);
+  const searchInputContainerRef = useRef(null);
+  const [file, setFile] = useState<string | null>(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,
     };
 
-    return {
+    const state: ViewState = {
       horizontalScrollState,
       onHorizontalScrollStateChange: callback => {
         horizontalScrollStateChangeCallbacks.add(callback);
       },
+      onSearchRegExpStateChange: callback => {
+        searchRegExpStateChangeCallbacks.add(callback);
+      },
+      searchRegExp: null,
       updateHorizontalScrollState: scrollState => {
         if (
           horizontalScrollState.offset === scrollState.offset &&
@@ -68,18 +69,27 @@ function TimelineContextController({children}: Props) {
           callback(scrollState);
         });
       },
+      updateSearchRegExpState: (searchRegExp: RegExp | null) => {
+        state.searchRegExp = searchRegExp;
+
+        searchRegExpStateChangeCallbacks.forEach(callback => {
+          callback(searchRegExp);
+        });
+      },
       viewToMutableViewStateMap: new Map(),
     };
-  }, [timelineData]);
+
+    return state;
+  }, [file]);
 
   const value = useMemo(
     () => ({
-      clearTimelineData,
-      importTimelineData,
-      timelineData,
+      file,
+      searchInputContainerRef,
+      setFile,
       viewState,
     }),
-    [clearTimelineData, importTimelineData, timelineData, viewState],
+    [file, setFile, viewState],
   );
 
   return (
diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js
new file mode 100644
index 000000000000..46d05710ac09
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {createContext, useMemo, useReducer} from 'react';
+
+import type {
+  ReactComponentMeasure,
+  ReactProfilerData,
+  ViewState,
+} from './types';
+
+type State = {|
+  profilerData: ReactProfilerData,
+  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 = [];
+
+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: ReactProfilerData,
+
+  // Search state
+  dispatch: Dispatch,
+  searchIndex: number,
+  searchRegExp: null,
+  searchResults: Array<ReactComponentMeasure>,
+  searchText: string,
+|};
+
+const TimelineSearchContext = createContext<Context>(((null: any): Context));
+TimelineSearchContext.displayName = 'TimelineSearchContext';
+
+type Props = {|
+  children: React$Node,
+  profilerData: ReactProfilerData,
+  viewState: ViewState,
+|};
+
+function TimelineSearchContextController({
+  children,
+  profilerData,
+  viewState,
+}: Props) {
+  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 000000000000..5a4515d1b826
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * 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) {
+  const {searchInputContainerRef} = useContext(TimelineContext);
+  const {dispatch, searchIndex, searchResults, searchText} = useContext(
+    TimelineSearchContext,
+  );
+
+  if (searchInputContainerRef.current === null) {
+    return null;
+  }
+
+  const search = text => 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/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
index a241498a05a0..2194c79e87fc 100644
--- a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactComponentMeasure, ReactProfilerData} from '../types';
+import type {
+  ReactComponentMeasure,
+  ReactProfilerData,
+  ViewState,
+} from '../types';
 import type {
   Interaction,
   IntrinsicSize,
@@ -31,21 +35,37 @@ import {
   rectIntersectsRect,
   intersectionOfRects,
 } from '../view-base';
-import {COLORS, NATIVE_EVENT_HEIGHT, BORDER_SIZE} from './constants';
+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: ReactProfilerData;
+  _viewState: ViewState;
 
   onHover: ((event: ReactComponentMeasure | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(
+    surface: Surface,
+    frame: Rect,
+    profilerData: ReactProfilerData,
+    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,
@@ -150,6 +170,24 @@ export class ComponentMeasuresView extends View {
           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,
@@ -174,6 +212,12 @@ export class ComponentMeasuresView extends View {
       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,
diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
index f2920ac19b51..bf60a1fbf9a7 100644
--- a/packages/react-devtools-timeline/src/content-views/constants.js
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -91,6 +91,7 @@ export let COLORS = {
   SCROLL_CARET: '',
   SCRUBBER_BACKGROUND: '',
   SCRUBBER_BORDER: '',
+  SEARCH_RESULT_FILL: '',
   TEXT_COLOR: '',
   TEXT_DIM_COLOR: '',
   TIME_MARKER_LABEL: '',
@@ -235,6 +236,9 @@ export function updateColorsToMatchTheme(element: Element): boolean {
     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',
     ),
diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js
new file mode 100644
index 000000000000..4e0948a48193
--- /dev/null
+++ b/packages/react-devtools-timeline/src/timelineCache.js
@@ -0,0 +1,105 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+import type {ReactProfilerData} from './types';
+
+import {importFile as importFileWorker} from './import-worker';
+
+const Pending = 0;
+const Resolved = 1;
+const Rejected = 2;
+
+type PendingRecord = {|
+  status: 0,
+  value: Wakeable,
+|};
+
+type ResolvedRecord<T> = {|
+  status: 1,
+  value: T,
+|};
+
+type RejectedRecord = {|
+  status: 2,
+  value: Error,
+|};
+
+type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
+
+// 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,
+  Record<ReactProfilerData>,
+> = new Map();
+
+function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
+  if (record.status === Resolved) {
+    // This is just a type refinement.
+    return record;
+  } else if (record.status === Rejected) {
+    // This is just a type refinement.
+    return record;
+  } else {
+    throw record.value;
+  }
+}
+
+export function importFile(file: File): ReactProfilerData | Error {
+  const fileName = file.name;
+  let record = fileNameToProfilerDataMap.get(fileName);
+
+  if (!record) {
+    const callbacks = new Set();
+    const wakeable: Wakeable = {
+      then(callback) {
+        callbacks.add(callback);
+      },
+
+      // Optional property used by Timeline:
+      displayName: `Importing file "${fileName}"`,
+    };
+
+    const wake = () => {
+      // This assumes they won't throw.
+      callbacks.forEach(callback => callback());
+      callbacks.clear();
+    };
+
+    const newRecord: Record<ReactProfilerData> = (record = {
+      status: Pending,
+      value: wakeable,
+    });
+
+    importFileWorker(file).then(data => {
+      switch (data.status) {
+        case 'SUCCESS':
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<ReactProfilerData>);
+          resolvedRecord.status = Resolved;
+          resolvedRecord.value = data.processedData;
+          break;
+        case 'INVALID_PROFILE_ERROR':
+        case 'UNEXPECTED_ERROR':
+          const thrownRecord = ((newRecord: any): RejectedRecord);
+          thrownRecord.status = Rejected;
+          thrownRecord.value = data.error;
+          break;
+      }
+
+      wake();
+    });
+
+    fileNameToProfilerDataMap.set(fileName, record);
+  }
+
+  const response = readRecord(record).value;
+  return response;
+}
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index 5a532495187e..3e9867c8b8c6 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -170,6 +170,9 @@ 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
@@ -179,7 +182,12 @@ export type ViewState = {|
   onHorizontalScrollStateChange: (
     callback: HorizontalScrollStateChangeCallback,
   ) => void,
+  onSearchRegExpStateChange: (
+    callback: SearchRegExpStateChangeCallback,
+  ) => void,
+  searchRegExp: RegExp | null,
   updateHorizontalScrollState: (scrollState: ScrollState) => void,
+  updateSearchRegExpState: (searchRegExp: RegExp | null) => void,
   viewToMutableViewStateMap: Map<string, mixed>,
 |};
 

From 3f9480f0f5ceb5a32a3751066f0b8e9eae5f1b10 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Fri, 3 Dec 2021 19:35:20 -0500
Subject: [PATCH 1057/1603] enable continuous replay flag (#22863)

---
 packages/shared/ReactFeatureFlags.js                            | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-oss.js           | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.js        | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js    | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.js              | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.www.js          | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index e9d08148c475..806fcdeb29d1 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -103,7 +103,7 @@ export const warnOnSubscriptionInsideStartTransition = false;
 
 export const enableSuspenseAvoidThisFallback = false;
 
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index a97584826fb1..b1d5d6845478 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,7 +50,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index b0dd90b28bb8..beb55a13fc0b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,7 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index f4d0cbcd1cb1..ba200210122f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,7 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index cfd0c0eb3588..6700f047a87c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,7 +51,7 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index b1d7261b5cae..bf87304fae18 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,7 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d91a5cc622e7..3ed2d5956834 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,7 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e2a7e6a639e7..e96c9fc2023a 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,7 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;

From 12bffc78d8d9e0ee8d494849f20611fe15d598ef Mon Sep 17 00:00:00 2001
From: jstejada <jstejada@fb.com>
Date: Mon, 6 Dec 2021 08:49:15 -0500
Subject: [PATCH 1058/1603] [DevTools] Emit new event when DevTools connects in
 standalone app (#22848)

---
 packages/react-devtools-core/src/standalone.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 1ef01e8ffc02..ab3250d7cff7 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -41,13 +41,17 @@ import type {InspectedElement} from 'react-devtools-shared/src/devtools/views/Co
 
 installHook(window);
 
-export type StatusListener = (message: string) => void;
+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) => {};
+let statusListener: StatusListener = (
+  message: string,
+  status?: StatusTypes,
+) => {};
 let disconnectedCallback: OnDisconnectedCallback = () => {};
 
 // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
@@ -260,6 +264,7 @@ function initialize(socket: WebSocket) {
   });
 
   log('Connected');
+  statusListener('DevTools initialized.', 'devtools-connected');
   reload();
 }
 
@@ -372,12 +377,15 @@ function startServer(
 
   httpServer.on('error', event => {
     onError(event);
-    statusListener('Failed to start the server.');
+    statusListener('Failed to start the server.', 'error');
     startServerTimeoutID = setTimeout(() => startServer(port), 1000);
   });
 
   httpServer.listen(port, () => {
-    statusListener('The server is listening on the port ' + port + '.');
+    statusListener(
+      'The server is listening on the port ' + port + '.',
+      'server-connected',
+    );
   });
 
   return {

From c7917fe76982c499c81be9571de44fe1293ac893 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Mon, 6 Dec 2021 12:36:02 -0500
Subject: [PATCH 1059/1603] Test showing that a mismatch at the root recovers
 with client render but shows loading state (#22873)

* rm console.log

* gate test

* move test

* show fallback state
---
 ...DOMServerPartialHydration-test.internal.js | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index d4f3886a1c4b..780228a4271c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3014,4 +3014,67 @@ describe('ReactDOMServerPartialHydration', () => {
   );
 
   itHydratesWithoutMismatch('an empty string in class component', TestAppClass);
+
+  // @gate enableClientRenderFallbackOnHydrationMismatch
+  it('fallback to client render on hydration mismatch at root', async () => {
+    let isClient = false;
+    let suspend = true;
+    let resolve;
+    const promise = new Promise((res, rej) => {
+      resolve = () => {
+        suspend = false;
+        res();
+      };
+    });
+    function App() {
+      return (
+        <>
+          <Suspense fallback={<div>Loading</div>}>
+            <ChildThatSuspends id={1} />
+          </Suspense>
+          {isClient ? <span>client</span> : <div>server</div>}
+          <Suspense fallback={<div>Loading</div>}>
+            <ChildThatSuspends id={2} />
+          </Suspense>
+        </>
+      );
+    }
+    function ChildThatSuspends({id}) {
+      if (isClient && suspend) {
+        throw promise;
+      }
+      return <div>{id}</div>;
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    container.innerHTML = finalHTML;
+    isClient = true;
+
+    expect(() => {
+      act(() => {
+        ReactDOM.hydrateRoot(container, <App />);
+      });
+    }).toErrorDev(
+      'Warning: An error occurred during hydration. ' +
+        'The server HTML was replaced with client content in <div>.',
+      {withoutStack: true},
+    );
+
+    // 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>',
+    );
+  });
 });

From 5041c37d27ee8f80bf152951d20bf861f817c7c6 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 7 Dec 2021 16:10:00 -0500
Subject: [PATCH 1060/1603] Remove hydrate option from createRoot (#22878)

* remove hydrate: true option

* remove missed comment

* lint

* warning

* circumvent flow
---
 fixtures/ssr/src/index.js                     |   5 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  |  15 +-
 ...DOMServerPartialHydration-test.internal.js | 166 ++++++++----------
 ...MServerSelectiveHydration-test.internal.js |  29 +--
 .../ReactDOMServerSuspense-test.internal.js   |   3 +-
 .../ReactServerRenderingHydration-test.js     |   3 +-
 packages/react-dom/src/client/ReactDOMRoot.js |  40 +----
 .../DOMPluginEventSystem-test.internal.js     |   3 +-
 .../src/ReactFiberBeginWork.new.js            |   2 +-
 .../src/ReactFiberBeginWork.old.js            |   2 +-
 .../src/__tests__/ReactScope-test.internal.js |   3 +-
 .../useMutableSourceHydration-test.js         | 129 +++++---------
 12 files changed, 149 insertions(+), 251 deletions(-)

diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index 0af0c3127aa1..8bef3639ae75 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import {createRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom';
 
 import App from './components/App';
 
-let root = createRoot(document, {hydrate: true});
-root.render(<App assets={window.assetManifest} />);
+let root = hydrateRoot(document, <App assets={window.assetManifest} />);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index ca592002ad25..d8db609f3f2c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -465,8 +465,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App isClient={true} />);
+    ReactDOM.hydrateRoot(container, <App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -629,8 +628,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -701,8 +699,7 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App showMore={false} />);
+    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
     Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
@@ -769,8 +766,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -1459,8 +1455,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App isClient={true} />);
+    ReactDOM.hydrateRoot(container, <App isClient={true} />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 780228a4271c..1c65501f7b38 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -155,8 +155,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -383,20 +382,15 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     suspend2 = true;
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        onHydrated(node) {
-          hydrated.push(node);
-        },
-        onDeleted(node) {
-          deleted.push(node);
-        },
+    const root = ReactDOM.hydrateRoot(container, <App />, {
+      onHydrated(node) {
+        hydrated.push(node);
+      },
+      onDeleted(node) {
+        deleted.push(node);
       },
     });
-    act(() => {
-      root.render(<App />);
-    });
+    Scheduler.unstable_flushAll();
 
     expect(hydrated.length).toBe(0);
     expect(deleted.length).toBe(0);
@@ -514,17 +508,12 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        onDeleted(node) {
-          deleted.push(node);
-        },
+    const root = ReactDOM.hydrateRoot(container, <App />, {
+      onDeleted(node) {
+        deleted.push(node);
       },
     });
-    act(() => {
-      root.render(<App />);
-    });
+    Scheduler.unstable_flushAll();
 
     expect(deleted.length).toBe(0);
 
@@ -580,7 +569,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.createRoot(container, { hydrate: true })' +
+        'ReactDOM.hydrateRoot(container, <App />)' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +
@@ -660,8 +649,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     act(() => {
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App />);
+      ReactDOM.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
@@ -717,8 +705,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     act(() => {
-      const root = ReactDOM.createRoot(container, {hydrate: true});
-      root.render(<App />);
+      ReactDOM.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.children[1].textContent).toBe('Middle');
@@ -767,8 +754,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -839,8 +828,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -910,8 +901,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -983,8 +976,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1055,8 +1050,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1126,8 +1123,10 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App text="Hello" className="hello" />);
+    const root = ReactDOM.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1206,11 +1205,10 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
+    ReactDOM.hydrateRoot(container, <App text="Hello" className="hello" />);
 
     await act(async () => {
       suspend = true;
-      root.render(<App />);
       expect(Scheduler).toFlushAndYieldThrough(['Child']);
 
       // While we're part way through the hydration, we update the state.
@@ -1277,8 +1275,8 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(
+    const root = ReactDOM.hydrateRoot(
+      container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
       </Context.Provider>,
@@ -1359,8 +1357,8 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(
+    const root = ReactDOM.hydrateRoot(
+      container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
       </Context.Provider>,
@@ -1437,8 +1435,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1493,8 +1490,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
@@ -1554,8 +1550,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
@@ -1621,12 +1616,9 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanB = container.getElementsByTagName('span')[1];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
+    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
     suspend = true;
-    act(() => {
-      root.render(<App showMore={false} />);
-    });
+    Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
     expect(ref.current).toBe(null);
@@ -1704,12 +1696,10 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanA = container.getElementsByTagName('span')[0];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
+    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
 
     suspend = true;
-    act(() => {
-      root.render(<App showMore={false} />);
-    });
+    Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
     expect(ref.current).toBe(null);
@@ -1868,13 +1858,10 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = html;
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
+    ReactDOM.hydrateRoot(container, <App />);
 
     suspend = true;
-
-    await act(async () => {
-      root.render(<App />);
-    });
+    Scheduler.unstable_flushAll();
 
     // We haven't hydrated the second child but the placeholder is still in the list.
     expect(container.textContent).toBe('ALoading B');
@@ -1929,8 +1916,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[1];
 
     suspend = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -1972,8 +1958,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2025,8 +2010,8 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(
+    const root = ReactDOM.hydrateRoot(
+      container,
       <ClassName.Provider value={'hello'}>
         <App text="Hello" />
       </ClassName.Provider>,
@@ -2117,8 +2102,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2205,8 +2189,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2296,8 +2279,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     await act(async () => {
@@ -2392,8 +2374,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2480,8 +2461,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2569,8 +2549,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     // Hydrate asynchronously.
-    const root = ReactDOM.createRoot(childContainer, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(childContainer, <App />);
     jest.runAllTimers();
     Scheduler.unstable_flushAll();
 
@@ -2668,8 +2647,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend1 = true;
     suspend2 = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -2755,8 +2733,7 @@ describe('ReactDOMServerPartialHydration', () => {
     container.innerHTML = finalHTML;
 
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App showSibling={false} />);
+    const root = ReactDOM.hydrateRoot(container, <App showSibling={false} />);
     expect(Scheduler).toFlushAndYield([]);
 
     expect(ref.current).toBe(null);
@@ -2842,8 +2819,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2908,8 +2884,8 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
+
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(span.innerHTML).toBe('Hidden child');
@@ -2937,8 +2913,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(span.innerHTML).toBe('Hidden child');
@@ -2963,8 +2938,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const span = container.getElementsByTagName('span')[0];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 6c4dafbf5c30..435e90d9b182 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -165,8 +165,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     const span = container.getElementsByTagName('span')[1];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -244,8 +243,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -343,8 +341,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -443,9 +440,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     isServerRendering = false;
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -530,8 +525,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -629,8 +623,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -739,8 +732,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1373,8 +1365,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<App />);
+    ReactDOM.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1489,10 +1480,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanB = container.getElementsByTagName('span')[2];
     const spanC = container.getElementsByTagName('span')[4];
 
-    const root = ReactDOM.createRoot(container, {hydrate: true});
     act(() => {
-      root.render(<App a="A" />);
-
+      const root = ReactDOM.hydrateRoot(container, <App a="A" />);
       // Hydrate the shell.
       expect(Scheduler).toFlushAndYieldThrough(['App', 'Commit']);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index c2eb630e52ac..327b83b94023 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -163,8 +163,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      const root = ReactDOM.createRoot(parent, {hydrate: true});
-      root.render(example);
+      ReactDOM.hydrateRoot(parent, example);
     });
 
     const parent2 = element.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 6e2ec3150d7f..006994676725 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -403,8 +403,7 @@ describe('ReactDOMServerHydration', () => {
     const finalHTML = ReactDOMServer.renderToString(<div />);
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
-    const root = ReactDOM.createRoot(container, {hydrate: true});
-    root.render(<div />);
+    const root = ReactDOM.hydrateRoot(container, <div />);
     Scheduler.unstable_flushAll();
     root.render(null);
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 3c49a15fc14d..800eeba0d018 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -21,15 +21,6 @@ export type RootType = {
 };
 
 export type CreateRootOptions = {
-  // TODO: Remove these options.
-  hydrate?: boolean,
-  hydrationOptions?: {
-    onHydrated?: (suspenseNode: Comment) => void,
-    onDeleted?: (suspenseNode: Comment) => void,
-    mutableSources?: Array<MutableSource<any>>,
-    ...
-  },
-  // END OF TODO
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
   identifierPrefix?: string,
@@ -149,21 +140,17 @@ export function createRoot(
 
   warnIfReactDOMContainerInDEV(container);
 
-  // TODO: Delete these options
-  const hydrate = options != null && options.hydrate === true;
-  const hydrationCallbacks =
-    (options != null && options.hydrationOptions) || null;
-  const mutableSources =
-    (options != null &&
-      options.hydrationOptions != null &&
-      options.hydrationOptions.mutableSources) ||
-    null;
-  // END TODO
-
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
   if (options !== null && options !== undefined) {
+    if (__DEV__) {
+      if ((options: any).hydrate) {
+        console.warn(
+          'hydrate through createRoot is deprecated. Use ReactDOM.hydrateRoot(container, <App />) instead.',
+        );
+      }
+    }
     if (options.unstable_strictMode === true) {
       isStrictMode = true;
     }
@@ -181,8 +168,8 @@ export function createRoot(
   const root = createContainer(
     container,
     ConcurrentRoot,
-    hydrate,
-    hydrationCallbacks,
+    false,
+    null,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
@@ -193,15 +180,6 @@ export function createRoot(
     container.nodeType === COMMENT_NODE ? container.parentNode : container;
   listenToAllSupportedEvents(rootContainerElement);
 
-  // TODO: Delete this path
-  if (mutableSources) {
-    for (let i = 0; i < mutableSources.length; i++) {
-      const mutableSource = mutableSources[i];
-      registerMutableSourceForHydration(root, mutableSource);
-    }
-  }
-  // END TODO
-
   return new ReactDOMRoot(root);
 }
 
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 1b2bfbb0bef4..248c07020e55 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -629,8 +629,7 @@ describe('DOMPluginEventSystem', () => {
           suspend = true;
 
           // Hydrate asynchronously.
-          const root = ReactDOM.createRoot(childContainer, {hydrate: true});
-          root.render(<App />);
+          ReactDOM.hydrateRoot(childContainer, <App />);
           jest.runAllTimers();
           Scheduler.unstable_flushAll();
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index d66bba0dc2ee..02b2ec1a45f6 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createRoot(container, { hydrate: true })' +
+          'ReactDOM.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 62d51046b3c4..8733ab0a4e51 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2586,7 +2586,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.createRoot(container, { hydrate: true })' +
+          'ReactDOM.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
index dedc8146d808..9dd7d85b5b40 100644
--- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -312,8 +312,7 @@ describe('ReactScope', () => {
       // On the client we don't have all data yet but we want to start
       // hydrating anyway.
       suspend = true;
-      const root = ReactDOM.createRoot(container2, {hydrate: true});
-      root.render(<App />);
+      ReactDOM.hydrateRoot(container2, <App />);
       Scheduler.unstable_flushAll();
       jest.runAllTimers();
 
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 61ebbe45e90c..4c13ef7c35df 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -168,14 +168,10 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     act(() => {
-      root.render(<TestComponent />);
+      ReactDOM.hydrateRoot(container, <TestComponent />, {
+        mutableSources: [mutableSource],
+      });
     });
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(1);
@@ -205,22 +201,16 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['only:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     expect(() => {
       act(() => {
-        root.render(<TestComponent />);
+        ReactDOM.hydrateRoot(container, <TestComponent />, {
+          mutableSources: [mutableSource],
+        });
 
         source.value = 'two';
       });
     }).toErrorDev(
-      'Warning: An error occurred during hydration. ' +
-        'The server HTML was replaced with client content in <div>.',
-      {withoutStack: true},
+      'Warning: Text content did not match. Server: "only:one" Client: "only:two"',
     );
     expect(Scheduler).toHaveYielded(['only:two']);
     expect(source.listenerCount).toBe(1);
@@ -258,20 +248,18 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded(['a:one', 'b:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     expect(() => {
       act(() => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            root.render(<TestComponent />);
+            ReactDOM.hydrateRoot(container, <TestComponent />, {
+              mutableSources: [mutableSource],
+            });
           });
         } else {
-          root.render(<TestComponent />);
+          ReactDOM.hydrateRoot(container, <TestComponent />, {
+            mutableSources: [mutableSource],
+          });
         }
         expect(Scheduler).toFlushAndYieldThrough(['a:one']);
         source.value = 'two';
@@ -318,50 +306,34 @@ describe('useMutableSourceHydration', () => {
     container.innerHTML = htmlString;
     expect(Scheduler).toHaveYielded(['0:a:one', '1:b:one']);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
     expect(() => {
       act(() => {
+        const fragment = (
+          <>
+            <Component
+              label="0"
+              getSnapshot={getSnapshotA}
+              mutableSource={mutableSource}
+              subscribe={subscribeA}
+            />
+            <Component
+              label="1"
+              getSnapshot={getSnapshotB}
+              mutableSource={mutableSource}
+              subscribe={subscribeB}
+            />
+          </>
+        );
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            root.render(
-              <>
-                <Component
-                  label="0"
-                  getSnapshot={getSnapshotA}
-                  mutableSource={mutableSource}
-                  subscribe={subscribeA}
-                />
-                <Component
-                  label="1"
-                  getSnapshot={getSnapshotB}
-                  mutableSource={mutableSource}
-                  subscribe={subscribeB}
-                />
-              </>,
-            );
+            ReactDOM.hydrateRoot(container, fragment, {
+              mutableSources: [mutableSource],
+            });
           });
         } else {
-          root.render(
-            <>
-              <Component
-                label="0"
-                getSnapshot={getSnapshotA}
-                mutableSource={mutableSource}
-                subscribe={subscribeA}
-              />
-              <Component
-                label="1"
-                getSnapshot={getSnapshotB}
-                mutableSource={mutableSource}
-                subscribe={subscribeB}
-              />
-            </>,
-          );
+          ReactDOM.hydrateRoot(container, fragment, {
+            mutableSources: [mutableSource],
+          });
         }
         expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
         source.valueB = 'b:two';
@@ -409,21 +381,19 @@ describe('useMutableSourceHydration', () => {
     expect(Scheduler).toHaveYielded([1, 'a:one']);
     expect(source.listenerCount).toBe(0);
 
-    const root = ReactDOM.createRoot(container, {
-      hydrate: true,
-      hydrationOptions: {
-        mutableSources: [mutableSource],
-      },
-    });
-
     expect(() => {
       act(() => {
+        let root;
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            root.render(<TestComponent flag={1} />);
+            root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
+              mutableSources: [mutableSource],
+            });
           });
         } else {
-          root.render(<TestComponent flag={1} />);
+          root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
+            mutableSources: [mutableSource],
+          });
         }
         expect(Scheduler).toFlushAndYieldThrough([1]);
 
@@ -438,19 +408,16 @@ describe('useMutableSourceHydration', () => {
         dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);
 
         expect(Scheduler).toFlushAndYieldThrough([2]);
-
         source.value = 'two';
       });
     }).toErrorDev(
-      [
-        'Warning: An error occurred during hydration. ' +
-          'The server HTML was replaced with client content in <div>.',
-
-        'Warning: Text content did not match. Server: "1" Client: "2"',
-      ],
-      {withoutStack: 1},
+      'Warning: Text content did not match. Server: "1" Client: "2"',
     );
-    expect(Scheduler).toHaveYielded([2, 'a:two']);
     expect(source.listenerCount).toBe(1);
+    if (gate(flags => flags.enableSyncDefaultUpdates)) {
+      expect(Scheduler).toHaveYielded([2, 'a:two']);
+    } else {
+      expect(Scheduler).toHaveYielded(['a:two']);
+    }
   });
 });

From ad607469c58d337d23d05e3be73087d370f7d715 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 7 Dec 2021 20:04:12 -0500
Subject: [PATCH 1061/1603] StyleX plug-in for resolving atomic styles to
 values for props.xstyle (#22808)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds the concept of "plugins" to the inspected element payload. Also adds the first plugin, one that resolves StyleX atomic style names to their values and displays them as a unified style object (rather than a nested array of objects and booleans).

Source file names are displayed first, in dim color, followed by an ordered set of resolved style values.

For builds with the new feature flag disabled, there is no observable change.

A next step to build on top of this could be to make the style values editable, but change the logic such that editing one directly added an inline style to the item (rather than modifying the stylex class– which may be shared between multiple other components).
---
 .../backend/StyleX/__tests__/utils-test.js    | 231 ++++++++++++++++++
 .../src/backend/StyleX/utils.js               | 110 +++++++++
 .../src/backend/legacy/renderer.js            |   4 +
 .../src/backend/renderer.js                   |  19 +-
 .../src/backend/types.js                      |   4 +
 .../react-devtools-shared/src/backendAPI.js   |   2 +
 .../config/DevToolsFeatureFlags.core-fb.js    |   7 +-
 .../config/DevToolsFeatureFlags.core-oss.js   |   7 +-
 .../config/DevToolsFeatureFlags.default.js    |   7 +-
 .../DevToolsFeatureFlags.extension-fb.js      |   7 +-
 .../DevToolsFeatureFlags.extension-oss.js     |   7 +-
 .../InspectedElementStyleXPlugin.css          |   6 +
 .../InspectedElementStyleXPlugin.js           |  76 ++++++
 .../views/Components/InspectedElementView.js  |  11 +
 .../src/devtools/views/Components/types.js    |   5 +-
 packages/react-devtools-shared/src/types.js   |   9 +
 16 files changed, 495 insertions(+), 17 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
 create mode 100644 packages/react-devtools-shared/src/backend/StyleX/utils.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js

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 000000000000..6783fea27f7e
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
@@ -0,0 +1,231 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+describe('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 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(`
+      Object {
+        "resolvedStyles": Object {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": Array [
+          "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(`
+      Object {
+        "resolvedStyles": Object {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": Array [
+          "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(`
+      Object {
+        "resolvedStyles": Object {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": Array [
+          "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(`
+      Object {
+        "resolvedStyles": Object {
+          ":hover": Object {
+            "color": "blue",
+            "textDecoration": "none",
+          },
+          "color": "black",
+        },
+        "sources": Array [
+          "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(`
+      Object {
+        "resolvedStyles": Object {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "center",
+        },
+        "sources": Array [
+          "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 000000000000..6bf5a2978927
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/StyleX/utils.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {StyleXPlugin} from 'react-devtools-shared/src/types';
+
+const cachedStyleNameToValueMap: Map<string, string> = new Map();
+
+export function getStyleXData(data: any): StyleXPlugin {
+  const sources = new Set();
+  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 (Array.isArray(data)) {
+    data.forEach(entry => {
+      if (Array.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 {
+        resolvedStyles[key] = getPropertyValueForStyleName(value);
+      }
+    } 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);
+    // $FlowFixMe Flow doesn't konw about these properties
+    const rules = styleSheet.rules || styleSheet.cssRules;
+    for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+      const rule = rules[ruleIndex];
+      // $FlowFixMe Flow doesn't konw about these properties
+      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/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index c5684f222fa3..b757d008ac29 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -838,6 +838,10 @@ export function attach(
       rootType: null,
       rendererPackageName: null,
       rendererVersion: null,
+
+      plugins: {
+        stylex: null,
+      },
     };
   }
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 8a89a5406c6e..7aebe6e507a0 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -82,10 +82,14 @@ import {
   MEMO_SYMBOL_STRING,
 } from './ReactSymbols';
 import {format} from './utils';
-import {enableProfilerChangedHookIndices} from 'react-devtools-feature-flags';
+import {
+  enableProfilerChangedHookIndices,
+  enableStyleXFeatures,
+} from 'react-devtools-feature-flags';
 import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
 import hasOwnProperty from 'shared/hasOwnProperty';
+import {getStyleXData} from './StyleX/utils';
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -108,6 +112,7 @@ import type {
 import type {
   ComponentFilter,
   ElementType,
+  Plugins,
 } from 'react-devtools-shared/src/types';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
@@ -3234,6 +3239,16 @@ export function attach(
       targetErrorBoundaryID = getNearestErrorBoundaryID(fiber);
     }
 
+    const plugins: Plugins = {
+      stylex: null,
+    };
+
+    if (enableStyleXFeatures) {
+      if (memoizedProps.hasOwnProperty('xstyle')) {
+        plugins.stylex = getStyleXData(memoizedProps.xstyle);
+      }
+    }
+
     return {
       id,
 
@@ -3293,6 +3308,8 @@ export function attach(
       rootType,
       rendererPackageName: renderer.rendererPackageName,
       rendererVersion: renderer.version,
+
+      plugins,
     };
   }
 
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 333ee30914cd..3318c8b6a965 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -13,6 +13,7 @@ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   ComponentFilter,
   ElementType,
+  Plugins,
 } from 'react-devtools-shared/src/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
 
@@ -265,6 +266,9 @@ export type InspectedElement = {|
   // Meta information about the renderer that created this element.
   rendererPackageName: string | null,
   rendererVersion: string | null,
+
+  // UI plugins/visualizations for the inspected element.
+  plugins: Plugins,
 |};
 
 export const InspectElementErrorType = 'error';
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 23b975e38d6e..3849899b7df0 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -208,6 +208,7 @@ export function convertInspectedElementBackendToFrontend(
     owners,
     context,
     hooks,
+    plugins,
     props,
     rendererPackageName,
     rendererVersion,
@@ -233,6 +234,7 @@ export function convertInspectedElementBackendToFrontend(
     hasLegacyContext,
     id,
     key,
+    plugins,
     rendererPackageName,
     rendererVersion,
     rootType,
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index 50eb47967baf..f382a2b4b2e2 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -13,11 +13,12 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableLogger = true;
+export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
+export const enableStyleXFeatures = true;
 export const isInternalFacebookBuild = true;
-export const enableNamedHooksFeature = true;
-export const enableLogger = true;
-export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index fd569a7c550d..579efaedd619 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -13,11 +13,12 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableLogger = false;
+export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
+export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
-export const enableNamedHooksFeature = true;
-export const enableLogger = false;
-export const consoleManagedByDevToolsDuringStrictMode = false;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index 9552dd0bd6ef..3bd4efb101c7 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -13,8 +13,9 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+export const enableLogger = false;
+export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
+export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
-export const enableNamedHooksFeature = true;
-export const enableLogger = false;
-export const consoleManagedByDevToolsDuringStrictMode = true;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
index b3bd5a7a92dc..d86b0ddf73ab 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -13,11 +13,12 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+export const enableLogger = true;
+export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
+export const enableStyleXFeatures = true;
 export const isInternalFacebookBuild = true;
-export const enableNamedHooksFeature = true;
-export const enableLogger = true;
-export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index 53466bf84bb7..f1a307306242 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -13,11 +13,12 @@
  * It should always be imported from "react-devtools-feature-flags".
  ************************************************************************/
 
+export const consoleManagedByDevToolsDuringStrictMode = true;
+export const enableLogger = false;
+export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
+export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
-export const enableNamedHooksFeature = true;
-export const enableLogger = false;
-export const consoleManagedByDevToolsDuringStrictMode = true;
 
 /************************************************************************
  * Do not edit the code below.
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 000000000000..0aa7f62e2792
--- /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 000000000000..8045803fd011
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * 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 './types';
+import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
+
+type Props = {|
+  bridge: FrontendBridge,
+  element: Element,
+  inspectedElement: InspectedElement,
+  store: Store,
+|};
+
+export default function InspectedElementStyleXPlugin({
+  bridge,
+  element,
+  inspectedElement,
+  store,
+}: Props) {
+  if (!enableStyleXFeatures) {
+    return null;
+  }
+
+  const styleXPlugin = inspectedElement.plugins.stylex;
+  if (styleXPlugin == null) {
+    return null;
+  }
+
+  const {resolvedStyles, sources} = styleXPlugin;
+
+  return (
+    <div className={sharedStyles.InspectedElementTree}>
+      <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/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index 8424621fcf16..ad1272b722cb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -23,6 +23,7 @@ import InspectedElementErrorsAndWarningsTree from './InspectedElementErrorsAndWa
 import InspectedElementHooksTree from './InspectedElementHooksTree';
 import InspectedElementPropsTree from './InspectedElementPropsTree';
 import InspectedElementStateTree from './InspectedElementStateTree';
+import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
 import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
 import NativeStyleEditor from './NativeStyleEditor';
 import Badge from './Badge';
@@ -31,6 +32,7 @@ import {
   copyInspectedElementPath as copyInspectedElementPathAPI,
   storeAsGlobal as storeAsGlobalAPI,
 } from 'react-devtools-shared/src/backendAPI';
+import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 
 import styles from './InspectedElementView.css';
 
@@ -124,6 +126,15 @@ export default function InspectedElementView({
           store={store}
         />
 
+        {enableStyleXFeatures && (
+          <InspectedElementStyleXPlugin
+            bridge={bridge}
+            element={element}
+            inspectedElement={inspectedElement}
+            store={store}
+          />
+        )}
+
         <InspectedElementErrorsAndWarningsTree
           bridge={bridge}
           element={element}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index a40b72f4cc8e..372cdd5b9087 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -12,7 +12,7 @@ import type {
   Dehydrated,
   Unserializable,
 } from 'react-devtools-shared/src/hydration';
-import type {ElementType} from 'react-devtools-shared/src/types';
+import type {ElementType, Plugins} from 'react-devtools-shared/src/types';
 
 // Each element on the frontend corresponds to a Fiber on the backend.
 // Some of its information (e.g. id, type, displayName) come from the backend.
@@ -114,6 +114,9 @@ export type InspectedElement = {|
   // Meta information about the renderer that created this element.
   rendererPackageName: string | null,
   rendererVersion: string | null,
+
+  // UI plugins/visualizations for the inspected element.
+  plugins: Plugins,
 |};
 
 // TODO: Add profiling type
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index f8f334124e1e..5a54979b63b1 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -91,3 +91,12 @@ export type LRUCache<K, V> = {|
   reset: () => void,
   set: (key: K, value: V) => void,
 |};
+
+export type StyleXPlugin = {|
+  sources: Array<string>,
+  resolvedStyles: Object,
+|};
+
+export type Plugins = {|
+  stylex: StyleXPlugin | null,
+|};

From 06f403481fe1f30d6952ad60ecd759b410962926 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Dec 2021 02:09:00 -0500
Subject: [PATCH 1062/1603] Add CI job to check npm dependencies (#22881)

Checks that if one React package depends on another, the current
version satisfies the given dependency range.

That way we don't forget to bump dependencies when we release a
new version.
---
 .circleci/config.yml                          | 18 +++++-
 package.json                                  |  3 +-
 scripts/release/check-release-dependencies.js | 59 +++++++++++++++++++
 3 files changed, 78 insertions(+), 2 deletions(-)
 create mode 100644 scripts/release/check-release-dependencies.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a21dc532e69d..216a481f0cfb 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -205,11 +205,24 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - attach_workspace: *attach_workspace
+      - attach_workspace:
+          at: .
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
       - run: yarn lint-build
 
+  yarn_check_release_dependencies:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run: yarn check-release-dependencies
+
+
   check_error_codes:
     docker: *docker
     environment: *environment
@@ -427,6 +440,9 @@ workflows:
       - yarn_lint_build:
           requires:
             - yarn_build_combined
+      - yarn_check_release_dependencies:
+          requires:
+            - yarn_build_combined
       - check_error_codes:
           requires:
             - yarn_build_combined
diff --git a/package.json b/package.json
index c57c892b1573..7c2651474352 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,8 @@
     "publish-prereleases": "node ./scripts/release/publish-using-ci-workflow.js",
     "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": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler"
+    "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler",
+    "check-release-dependencies": "node ./scripts/release/check-release-dependencies"
   },
   "resolutions": {
     "react-is": "npm:react-is"
diff --git a/scripts/release/check-release-dependencies.js b/scripts/release/check-release-dependencies.js
new file mode 100644
index 000000000000..b009a53e1b02
--- /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();

From ec78b135fb0b6184bc42e11b15e4b492764ed0f3 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Dec 2021 02:26:12 -0500
Subject: [PATCH 1063/1603] Don't override use-sync-external-store peerDeps
 (#22882)

Usually the build script updates transitive React dependencies so that
they refer to the corresponding release version.

For use-sync-external-store, though, we also want to support older
versions of React, too. So the normal behavior of the build script
isn't sufficient.

For now, to unblock, I hardcoded a special case, but we should consider
a better way to handle this in the future.
---
 packages/use-sync-external-store/package.json    | 2 +-
 scripts/release/publish-commands/parse-params.js | 1 +
 scripts/rollup/build-all-release-channels.js     | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index 0d1d9b8d25f8..33f0f45b4e25 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -20,6 +20,6 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0-rc"
   }
 }
diff --git a/scripts/release/publish-commands/parse-params.js b/scripts/release/publish-commands/parse-params.js
index 2c0439dd5639..f3a21ccf565c 100644
--- a/scripts/release/publish-commands/parse-params.js
+++ b/scripts/release/publish-commands/parse-params.js
@@ -45,6 +45,7 @@ module.exports = () => {
       case 'experimental':
       case 'alpha':
       case 'beta':
+      case 'rc':
       case 'untagged':
         break;
       default:
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index acd07d32d344..e8f072d7231b 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -243,6 +243,13 @@ function updatePackageVersions(
         }
       }
       if (packageInfo.peerDependencies) {
+        if (!pinToExactVersion && moduleName === 'use-sync-external-store') {
+          // 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.
+          continue;
+        }
         for (const dep of Object.keys(packageInfo.peerDependencies)) {
           const depVersion = versionsMap.get(dep);
           if (depVersion !== undefined) {

From e39b2c8998a458a772b9284d0fb9f6a5ccdda914 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Dec 2021 02:44:12 -0500
Subject: [PATCH 1064/1603] Fix peer deps for use-sync-external-store

Merged last PR too quickly
---
 scripts/rollup/build-all-release-channels.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index e8f072d7231b..0852b8af2e68 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -98,6 +98,14 @@ function buildForChannel(channel, nodeTotal, nodeIndex) {
 
 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.
+    spawnSync('cp', [
+      '-r',
+      buildDir + '/node_modules',
+      buildDir + '/oss-stable-semver',
+    ]);
+
     const defaultVersionIfNotFound = '0.0.0' + '-' + sha + '-' + dateString;
     const versionsMap = new Map();
     for (const moduleName in stablePackages) {
@@ -116,13 +124,7 @@ function processStable(buildDir) {
     );
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-stable');
 
-    // Identical to `oss-stable` but with real, semver versions. This is what
-    // will get published to @latest.
-    spawnSync('cp', [
-      '-r',
-      buildDir + '/oss-stable',
-      buildDir + '/oss-stable-semver',
-    ]);
+    // Now do the semver ones
     const semverVersionsMap = new Map();
     for (const moduleName in stablePackages) {
       const version = stablePackages[moduleName];

From 72e48b8e16cab83e22b5cf24ac73499a48aba23c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Dec 2021 02:55:46 -0500
Subject: [PATCH 1065/1603] Fix: Don't skip writing updated package.json

Another fix to previous commit. The special case for
use-sync-external-store still needs to write out the updated
package.json, because we also use that branch to update the
version field.
---
 scripts/rollup/build-all-release-channels.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 0852b8af2e68..1f31df0d0c44 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -250,14 +250,14 @@ function updatePackageVersions(
           // we don't override to the latest version. We should figure out some
           // better way to handle this.
           // TODO: Remove this special case.
-          continue;
-        }
-        for (const dep of Object.keys(packageInfo.peerDependencies)) {
-          const depVersion = versionsMap.get(dep);
-          if (depVersion !== undefined) {
-            packageInfo.peerDependencies[dep] = pinToExactVersion
-              ? depVersion
-              : '^' + depVersion;
+        } else {
+          for (const dep of Object.keys(packageInfo.peerDependencies)) {
+            const depVersion = versionsMap.get(dep);
+            if (depVersion !== undefined) {
+              packageInfo.peerDependencies[dep] = pinToExactVersion
+                ? depVersion
+                : '^' + depVersion;
+            }
           }
         }
       }

From 24dd07bd269590ee5024b7f0f1906887d256ea86 Mon Sep 17 00:00:00 2001
From: Joey Arhar <josepharhar@gmail.com>
Date: Wed, 8 Dec 2021 07:11:42 -0800
Subject: [PATCH 1066/1603] Add custom element property support behind a flag
 (#22184)

* custom element props

* custom element events

* use function type for on*

* tests, htmlFor

* className

* fix ReactDOMComponent-test

* started on adding feature flag

* added feature flag to all feature flag files

* everything passes

* tried to fix getPropertyInfo

* used @gate and __experimental__

* remove flag gating for test which already passes

* fix onClick test

* add __EXPERIMENTAL__ to www flags, rename eventProxy

* Add innerText and textContent to reservedProps

* Emit warning when assigning to read only properties in client

* Revert "Emit warning when assigning to read only properties in client"

This reverts commit 1a093e584ce50e2e634aa743e04f9cb8fc2b3f7d.

* Emit warning when assigning to read only properties during hydration

* yarn prettier-all

* Gate hydration warning test on flag

* Fix gating in hydration warning test

* Fix assignment to boolean properties

* Replace _listeners with random suffix matching

* Improve gating for hydration warning test

* Add outerText and outerHTML to server warning properties

* remove nameLower logic

* fix capture event listener test

* Add coverage for changing custom event listeners

* yarn prettier-all

* yarn lint --fix

* replace getCustomElementEventHandlersFromNode with getFiberCurrentPropsFromNode

* Remove previous value when adding event listener

* flow, lint, prettier

* Add dispatchEvent to make sure nothing crashes

* Add state change to reserved attribute tests

* Add missing feature flag test gate

* Reimplement SSR changes in ReactDOMServerFormatConfig

* Test hydration for objects and functions

* add missing test gate

* remove extraneous comment

* Add attribute->property test
---
 .../__tests__/DOMPropertyOperations-test.js   | 349 ++++++++++++++++++
 ...eactDOMServerIntegrationAttributes-test.js |  17 +-
 .../__tests__/ReactServerRendering-test.js    |  39 ++
 .../ReactServerRenderingHydration-test.js     |  66 ++++
 .../src/client/DOMPropertyOperations.js       |  45 +++
 .../react-dom/src/client/ReactDOMComponent.js |  42 ++-
 .../src/client/ReactDOMHostConfig.js          |   4 +-
 .../src/server/ReactDOMServerFormatConfig.js  |  21 +-
 packages/react-dom/src/shared/DOMProperty.js  |   8 +-
 packages/shared/ReactFeatureFlags.js          |   6 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   2 +
 17 files changed, 594 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index 2959274d1c86..28776b1eb62f 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -155,6 +155,355 @@ describe('DOMPropertyOperations', () => {
       // Regression test for https://github.com/facebook/react/issues/6119
       expect(container.firstChild.hasAttribute('value')).toBe(false);
     });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom events lowercase', () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element oncustomevent={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom events uppercase', () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element onCustomevent={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('Customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom event with dash in name', () => {
+      const oncustomevent = jest.fn();
+      function Test() {
+        return <my-custom-element oncustom-event={oncustomevent} />;
+      }
+      const container = document.createElement('div');
+      ReactDOM.render(<Test />, container);
+      container
+        .querySelector('my-custom-element')
+        .dispatchEvent(new Event('custom-event'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element remove event handler', () => {
+      const oncustomevent = jest.fn();
+      function Test(props) {
+        return <my-custom-element oncustomevent={props.handler} />;
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(<Test handler={oncustomevent} />, container);
+      const customElement = container.querySelector('my-custom-element');
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+
+      ReactDOM.render(<Test handler={false} />, container);
+      // 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);
+
+      ReactDOM.render(<Test handler={oncustomevent} />, container);
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+
+      const oncustomevent2 = jest.fn();
+      ReactDOM.render(<Test handler={oncustomevent2} />, container);
+      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', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(
+        <my-custom-element
+          onstring={'hello'}
+          onobj={{hello: 'world'}}
+          onarray={['one', 'two']}
+          ontrue={true}
+          onfalse={false}
+        />,
+        container,
+      );
+      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('true');
+      expect(customElement.getAttribute('onfalse')).toBe('false');
+
+      // 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', () => {
+      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);
+      ReactDOM.render(<Test />, container);
+
+      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);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom elements should allow custom events with capture event listeners', () => {
+      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');
+      ReactDOM.render(<Test />, container);
+      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', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element innerHTML="foo" />, container);
+      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.
+      ReactDOM.render(<my-custom-element innerHTML="bar" />, container);
+      expect(customElement.getAttribute('innerHTML')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('innerText should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element innerText="foo" />, container);
+      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.
+      ReactDOM.render(<my-custom-element innerText="bar" />, container);
+      expect(customElement.getAttribute('innerText')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('textContent should not work on custom elements', () => {
+      const container = document.createElement('div');
+      ReactDOM.render(<my-custom-element textContent="foo" />, container);
+      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.
+      ReactDOM.render(<my-custom-element textContent="bar" />, container);
+      expect(customElement.getAttribute('textContent')).toBe(null);
+      expect(customElement.hasChildNodes()).toBe(false);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('values should not be converted to booleans when assigning into custom elements', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element />, container);
+      const customElement = container.querySelector('my-custom-element');
+      customElement.foo = null;
+
+      // true => string
+      ReactDOM.render(<my-custom-element foo={true} />, container);
+      expect(customElement.foo).toBe(true);
+      ReactDOM.render(<my-custom-element foo="bar" />, container);
+      expect(customElement.foo).toBe('bar');
+
+      // false => string
+      ReactDOM.render(<my-custom-element foo={false} />, container);
+      expect(customElement.foo).toBe(false);
+      ReactDOM.render(<my-custom-element foo="bar" />, container);
+      expect(customElement.foo).toBe('bar');
+
+      // true => null
+      ReactDOM.render(<my-custom-element foo={true} />, container);
+      expect(customElement.foo).toBe(true);
+      ReactDOM.render(<my-custom-element foo={null} />, container);
+      expect(customElement.foo).toBe(null);
+
+      // false => null
+      ReactDOM.render(<my-custom-element foo={false} />, container);
+      expect(customElement.foo).toBe(false);
+      ReactDOM.render(<my-custom-element foo={null} />, container);
+      expect(customElement.foo).toBe(null);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom event handlers assign multiple types', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const oncustomevent = jest.fn();
+
+      // First render with string
+      ReactDOM.render(<my-custom-element oncustomevent={'foo'} />, container);
+      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
+      ReactDOM.render(
+        <my-custom-element oncustomevent={oncustomevent} />,
+        container,
+      );
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // event listener => string
+      ReactDOM.render(<my-custom-element oncustomevent={'foo'} />, container);
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe('foo');
+
+      // string => nothing
+      ReactDOM.render(<my-custom-element />, container);
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // nothing => event listener
+      ReactDOM.render(
+        <my-custom-element oncustomevent={oncustomevent} />,
+        container,
+      );
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+      expect(customelement.oncustomevent).toBe(undefined);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element custom event handlers assign multiple types with setter', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const oncustomevent = jest.fn();
+
+      // First render with nothing
+      ReactDOM.render(<my-custom-element />, container);
+      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
+      ReactDOM.render(
+        <my-custom-element oncustomevent={oncustomevent} />,
+        container,
+      );
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe(null);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // event listener => string
+      ReactDOM.render(<my-custom-element oncustomevent={'foo'} />, container);
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(1);
+      expect(customelement.oncustomevent).toBe('foo');
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // string => event listener
+      ReactDOM.render(
+        <my-custom-element oncustomevent={oncustomevent} />,
+        container,
+      );
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+      expect(customelement.oncustomevent).toBe(null);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+
+      // event listener => nothing
+      ReactDOM.render(<my-custom-element />, container);
+      customelement.dispatchEvent(new Event('customevent'));
+      expect(oncustomevent).toHaveBeenCalledTimes(2);
+      expect(customelement.oncustomevent).toBe(null);
+      expect(customelement.getAttribute('oncustomevent')).toBe(null);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('assigning to a custom element property should not remove attributes', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element foo="one" />, container);
+      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;
+        },
+      });
+      ReactDOM.render(<my-custom-element foo="two" />, container);
+      expect(customElement.foo).toBe('two');
+      expect(customElement.getAttribute('foo')).toBe('one');
+    });
   });
 
   describe('deleteValueForProperty', () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index c1c23e218584..b32146d55e44 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -10,6 +10,7 @@
 'use strict';
 
 const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegrationTestUtils');
+const ReactFeatureFlags = require('shared/ReactFeatureFlags');
 
 let React;
 let ReactDOM;
@@ -36,6 +37,7 @@ const {
   resetModules,
   itRenders,
   clientCleanRender,
+  clientRenderOnServerString,
 } = ReactDOMServerIntegrationUtils(initModules);
 
 describe('ReactDOMServerIntegration', () => {
@@ -657,17 +659,28 @@ describe('ReactDOMServerIntegration', () => {
     });
 
     itRenders('className for custom elements', async render => {
-      const e = await render(<div is="custom-element" className="test" />, 0);
-      expect(e.getAttribute('className')).toBe('test');
+      if (ReactFeatureFlags.enableCustomElementPropertySupport) {
+        const e = await render(
+          <div is="custom-element" className="test" />,
+          render === clientRenderOnServerString ? 1 : 0,
+        );
+        expect(e.getAttribute('className')).toBe(null);
+        expect(e.getAttribute('class')).toBe('test');
+      } else {
+        const e = await render(<div is="custom-element" className="test" />, 0);
+        expect(e.getAttribute('className')).toBe('test');
+      }
     });
 
     itRenders('htmlFor attribute on custom elements', async render => {
       const e = await render(<div is="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');
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
index b39d7c8ff517..6489151b0550 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -1097,4 +1097,43 @@ describe('ReactDOMServer', () => {
         'However, it is set to a string.',
     );
   });
+
+  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>`);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    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>`);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    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__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 006994676725..3d63954a0857 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -530,4 +530,70 @@ describe('ReactDOMServerHydration', () => {
       'Warning: Did not expect server HTML to contain a <p> in <div>',
     );
   });
+
+  it('should warn when hydrating read-only properties', () => {
+    const readOnlyProperties = [
+      'offsetParent',
+      'offsetTop',
+      'offsetLeft',
+      'offsetWidth',
+      'offsetHeight',
+      'isContentEditable',
+      'outerText',
+      'outerHTML',
+    ];
+    readOnlyProperties.forEach(readOnlyProperty => {
+      const props = {};
+      props[readOnlyProperty] = 'hello';
+      const jsx = React.createElement('my-custom-element', props);
+      const element = document.createElement('div');
+      element.innerHTML = ReactDOMServer.renderToString(jsx);
+      if (gate(flags => flags.enableCustomElementPropertySupport)) {
+        expect(() => ReactDOM.hydrate(jsx, element)).toErrorDev(
+          `Warning: Assignment to read-only property will result in a no-op: \`${readOnlyProperty}\``,
+        );
+      } else {
+        ReactDOM.hydrate(jsx, element);
+      }
+    });
+  });
+
+  // @gate enableCustomElementPropertySupport
+  it('should not re-assign properties on hydration', () => {
+    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;
+      },
+    });
+
+    ReactDOM.hydrate(jsx, container);
+
+    expect(customElement.getAttribute('str')).toBe('string');
+    expect(customElement.getAttribute('obj')).toBe(null);
+    expect(customElement.str).toBe(undefined);
+    expect(customElement.obj).toBe(undefined);
+  });
 });
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index ad94f7ccb702..71b53d703c6d 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -19,8 +19,10 @@ import sanitizeURL from '../shared/sanitizeURL';
 import {
   disableJavaScriptURLs,
   enableTrustedTypesIntegration,
+  enableCustomElementPropertySupport,
 } from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
+import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
 
 import type {PropertyInfo} from '../shared/DOMProperty';
 
@@ -149,9 +151,52 @@ export function setValueForProperty(
   if (shouldIgnoreAttribute(name, propertyInfo, isCustomComponentTag)) {
     return;
   }
+
+  if (
+    enableCustomElementPropertySupport &&
+    isCustomComponentTag &&
+    name[0] === 'o' &&
+    name[1] === 'n'
+  ) {
+    let eventName = name.replace(/Capture$/, '');
+    const useCapture = name !== eventName;
+    eventName = eventName.slice(2);
+
+    const prevProps = getFiberCurrentPropsFromNode(node);
+    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 value can't be casted to EventListener.
+      node.addEventListener(eventName, (value: EventListener), useCapture);
+      return;
+    }
+  }
+
   if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
     value = null;
   }
+
+  if (
+    enableCustomElementPropertySupport &&
+    isCustomComponentTag &&
+    name in (node: any)
+  ) {
+    (node: any)[name] = value;
+    return;
+  }
+
   // If the prop isn't in the special list, treat it as a simple attribute.
   if (isCustomComponentTag || propertyInfo === null) {
     if (isAttributeNameSafe(name)) {
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index aa9b0281e2f8..ffd90c128d46 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -69,7 +69,10 @@ import {validateProperties as validateARIAProperties} from '../shared/ReactDOMIn
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
 
-import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
+import {
+  enableTrustedTypesIntegration,
+  enableCustomElementPropertySupport,
+} from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
   listenToNonDelegatedEvent,
@@ -998,7 +1001,10 @@ export function diffHydratedProperties(
     ) {
       // Validate that the properties correspond to their expected values.
       let serverValue;
-      const propertyInfo = getPropertyInfo(propKey);
+      const propertyInfo =
+        isCustomComponentTag && enableCustomElementPropertySupport
+          ? null
+          : getPropertyInfo(propKey);
       if (suppressHydrationWarning) {
         // Don't bother comparing. We're ignoring all these warnings.
       } else if (
@@ -1031,7 +1037,27 @@ export function diffHydratedProperties(
             warnForPropDifference(propKey, serverValue, expectedStyle);
           }
         }
-      } else if (isCustomComponentTag) {
+      } else if (
+        enableCustomElementPropertySupport &&
+        isCustomComponentTag &&
+        (propKey === 'offsetParent' ||
+          propKey === 'offsetTop' ||
+          propKey === 'offsetLeft' ||
+          propKey === 'offsetWidth' ||
+          propKey === 'offsetHeight' ||
+          propKey === 'isContentEditable' ||
+          propKey === 'outerText' ||
+          propKey === 'outerHTML')
+      ) {
+        // $FlowFixMe - Should be inferred as not undefined.
+        extraAttributeNames.delete(propKey.toLowerCase());
+        if (__DEV__) {
+          console.error(
+            'Assignment to read-only property will result in a no-op: `%s`',
+            propKey,
+          );
+        }
+      } else if (isCustomComponentTag && !enableCustomElementPropertySupport) {
         // $FlowFixMe - Should be inferred as not undefined.
         extraAttributeNames.delete(propKey.toLowerCase());
         serverValue = getValueForAttribute(domElement, propKey, nextProp);
@@ -1084,7 +1110,15 @@ export function diffHydratedProperties(
           serverValue = getValueForAttribute(domElement, propKey, nextProp);
         }
 
-        if (nextProp !== serverValue && !isMismatchDueToBadCasing) {
+        const dontWarnCustomElement =
+          enableCustomElementPropertySupport &&
+          isCustomComponentTag &&
+          (typeof nextProp === 'function' || typeof nextProp === 'object');
+        if (
+          !dontWarnCustomElement &&
+          nextProp !== serverValue &&
+          !isMismatchDueToBadCasing
+        ) {
           warnForPropDifference(propKey, serverValue, nextProp);
         }
       }
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 64fd789b7a1e..341d1fa7a376 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -442,11 +442,11 @@ export function commitUpdate(
   newProps: Props,
   internalInstanceHandle: Object,
 ): void {
+  // Apply the diff to the DOM node.
+  updateProperties(domElement, updatePayload, type, oldProps, newProps);
   // Update the props handle so that we know which props are the ones with
   // with current event handlers.
   updateFiberProps(domElement, newProps);
-  // Apply the diff to the DOM node.
-  updateProperties(domElement, updatePayload, type, oldProps, newProps);
 }
 
 export function resetTextContent(domElement: Instance): void {
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index c4f8d89a8c90..5ea8d772732b 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -17,7 +17,10 @@ import {
 
 import {Children} from 'react';
 
-import {enableFilterEmptyStringAttributesDOM} from 'shared/ReactFeatureFlags';
+import {
+  enableFilterEmptyStringAttributesDOM,
+  enableCustomElementPropertySupport,
+} from 'shared/ReactFeatureFlags';
 
 import type {
   Destination,
@@ -1115,12 +1118,26 @@ function pushStartCustomElement(
 
   let children = null;
   let innerHTML = null;
-  for (const propKey in props) {
+  for (let propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
       const propValue = props[propKey];
       if (propValue == null) {
         continue;
       }
+      if (
+        enableCustomElementPropertySupport &&
+        (typeof propValue === 'function' || typeof propValue === 'object')
+      ) {
+        // It is normal to render functions and objects on custom elements when
+        // client rendering, but when server rendering the output isn't useful,
+        // so skip it.
+        continue;
+      }
+      if (enableCustomElementPropertySupport && propKey === 'className') {
+        // className gets rendered as class on the client, so it should be
+        // rendered as class on the server.
+        propKey = 'class';
+      }
       switch (propKey) {
         case 'children':
           children = propValue;
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 83b48555ebd8..278a9fd12b00 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -7,7 +7,10 @@
  * @flow
  */
 
-import {enableFilterEmptyStringAttributesDOM} from 'shared/ReactFeatureFlags';
+import {
+  enableFilterEmptyStringAttributesDOM,
+  enableCustomElementPropertySupport,
+} from 'shared/ReactFeatureFlags';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
 type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -247,6 +250,9 @@ const reservedProps = [
   'suppressHydrationWarning',
   'style',
 ];
+if (enableCustomElementPropertySupport) {
+  reservedProps.push('innerText', 'textContent');
+}
 
 reservedProps.forEach(name => {
   properties[name] = new PropertyInfoRecord(
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 806fcdeb29d1..c5f798d559dd 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -140,6 +140,12 @@ export const deletedTreeCleanUpLevel = 3;
 // Note that this should be an uncommon use case and can be avoided by using the transition API.
 export const enableSuspenseLayoutEffectSemantics = true;
 
+// Changes the behavior for rendering custom elements in both server rendering
+// and client rendering, mostly to allow JSX attributes to apply to the custom
+// element's object properties instead of only HTML attributes.
+// https://github.com/facebook/react/issues/11347
+export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index b1d5d6845478..0f30707a49f3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -72,6 +72,7 @@ export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
+export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index beb55a13fc0b..a660772b7e35 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -64,6 +64,7 @@ export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
+export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index ba200210122f..e6c4e5ec21fd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -64,6 +64,7 @@ export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
+export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index bf87304fae18..51bbc5a1627d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -64,6 +64,7 @@ export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
+export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 3ed2d5956834..182bebe61441 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -64,6 +64,7 @@ export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
+export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e96c9fc2023a..f62dc8af4960 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -64,6 +64,7 @@ export const enableLazyContextPropagation = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
+export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a46b66fb20db..cffa189840f8 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -104,6 +104,8 @@ export const consoleManagedByDevToolsDuringStrictMode = true;
 // Some www surfaces are still using this. Remove once they have been migrated.
 export const enableUseMutableSource = true;
 
+export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From 29d2bef9f5d21187b4ae71608739fe490c0d15cb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Dec 2021 10:51:17 -0500
Subject: [PATCH 1067/1603] Bump beta -> rc

---
 .circleci/config.yml |  4 ++--
 ReactVersions.js     | 18 +++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 216a481f0cfb..86f54450e51a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -480,7 +480,7 @@ workflows:
             - setup
           commit_sha: << pipeline.parameters.prerelease_commit_sha >>
           release_channel: stable
-          dist_tag: "next,beta"
+          dist_tag: "next"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
@@ -512,7 +512,7 @@ workflows:
             - setup
           commit_sha: << pipeline.git.revision >>
           release_channel: stable
-          dist_tag: "next,beta"
+          dist_tag: "next"
       - publish_prerelease:
           name: Publish to Experimental channel
           requires:
diff --git a/ReactVersions.js b/ReactVersions.js
index 03c9db2332b7..dd7f9c37839d 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,26 +18,26 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.0.0';
+const ReactVersion = '18.0.0-rc.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'beta';
+const nextChannelLabel = 'rc';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
-  'eslint-plugin-react-hooks': '4.2.1',
-  'jest-react': '0.12.1',
+  'eslint-plugin-react-hooks': '4.2.1-rc.0',
+  'jest-react': '0.12.1-rc.0',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.27.0',
-  'react-refresh': '0.11.0',
+  'react-reconciler': '0.27.0-rc.0',
+  'react-refresh': '0.11.0-rc.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.6.0',
-  'use-sync-external-store': '1.0.0',
-  scheduler: '0.21.0',
+  'use-subscription': '1.6.0-rc.0',
+  'use-sync-external-store': '1.0.0-rc.0',
+  scheduler: '0.21.0-rc.0',
 };
 
 // These packages do not exist in the @next or @latest channel, only

From d3001fb6f1bd75c9872efb49195bff990e4eed49 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Dec 2021 10:57:13 -0500
Subject: [PATCH 1068/1603] Use `next` as prerelease label

Instead of `rc`, which is redundant since it's in the next version
number already.
---
 ReactVersions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index dd7f9c37839d..32dde5ab5219 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -22,7 +22,7 @@ const ReactVersion = '18.0.0-rc.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
-const nextChannelLabel = 'rc';
+const nextChannelLabel = 'next';
 
 const stablePackages = {
   'create-subscription': ReactVersion,

From f2a59df48bec2352a4dd3b5415282a4ea240a4f8 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Wed, 8 Dec 2021 11:21:02 -0500
Subject: [PATCH 1069/1603] Remove unstableAvoidThisFallback from OSS (#22884)

* avoidThisFallbackFlag

* avoidThisFallback flag

* missed a spot

* rm gating
---
 packages/react-reconciler/src/ReactFiberBeginWork.new.js  | 6 +++++-
 packages/react-reconciler/src/ReactFiberBeginWork.old.js  | 6 +++++-
 .../react-reconciler/src/ReactFiberCompleteWork.new.js    | 4 +++-
 .../react-reconciler/src/ReactFiberCompleteWork.old.js    | 4 +++-
 .../src/ReactFiberSuspenseComponent.new.js                | 6 +++++-
 .../src/ReactFiberSuspenseComponent.old.js                | 6 +++++-
 .../src/__tests__/ReactSuspenseList-test.js               | 2 +-
 .../src/__tests__/ReactSuspenseWithNoopRenderer-test.js   | 8 ++++----
 .../shared/forks/ReactFeatureFlags.test-renderer.www.js   | 2 +-
 packages/shared/forks/ReactFeatureFlags.testing.www.js    | 2 +-
 packages/shared/forks/ReactFeatureFlags.www.js            | 2 +-
 11 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 02b2ec1a45f6..3e344d33261e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -29,6 +29,7 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
 import {
@@ -1997,7 +1998,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // Mark this subtree context as having at least one invisible parent that could
       // handle the fallback state.
       // Avoided boundaries are not considered since they cannot handle preferred fallback states.
-      if (nextProps.unstable_avoidThisFallback !== true) {
+      if (
+        !enableSuspenseAvoidThisFallback ||
+        nextProps.unstable_avoidThisFallback !== true
+      ) {
         suspenseContext = addSubtreeSuspenseContext(
           suspenseContext,
           InvisibleParentSuspenseContext,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 8733ab0a4e51..5192d6b2fc99 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -29,6 +29,7 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
 import {
@@ -1997,7 +1998,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // Mark this subtree context as having at least one invisible parent that could
       // handle the fallback state.
       // Avoided boundaries are not considered since they cannot handle preferred fallback states.
-      if (nextProps.unstable_avoidThisFallback !== true) {
+      if (
+        !enableSuspenseAvoidThisFallback ||
+        nextProps.unstable_avoidThisFallback !== true
+      ) {
         suspenseContext = addSubtreeSuspenseContext(
           suspenseContext,
           InvisibleParentSuspenseContext,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 5805ffe8da76..91c564dd465b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -29,6 +29,7 @@ import type {
 import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 
@@ -1154,7 +1155,8 @@ function completeWork(
           // should be able to immediately restart from within throwException.
           const hasInvisibleChildContext =
             current === null &&
-            workInProgress.memoizedProps.unstable_avoidThisFallback !== true;
+            (workInProgress.memoizedProps.unstable_avoidThisFallback !== true ||
+              !enableSuspenseAvoidThisFallback);
           if (
             hasInvisibleChildContext ||
             hasSuspenseContext(
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index c5eb5f70f48d..ea994583cfe8 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -29,6 +29,7 @@ import type {
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 
@@ -1154,7 +1155,8 @@ function completeWork(
           // should be able to immediately restart from within throwException.
           const hasInvisibleChildContext =
             current === null &&
-            workInProgress.memoizedProps.unstable_avoidThisFallback !== true;
+            (workInProgress.memoizedProps.unstable_avoidThisFallback !== true ||
+              !enableSuspenseAvoidThisFallback);
           if (
             hasInvisibleChildContext ||
             hasSuspenseContext(
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 9dbaf7fb76ef..54e37a9004d7 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -13,6 +13,7 @@ import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.new';
 import type {TreeContext} from './ReactFiberTreeContext.new';
 
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -81,7 +82,10 @@ export function shouldCaptureSuspense(
   }
   const props = workInProgress.memoizedProps;
   // Regular boundaries always capture.
-  if (props.unstable_avoidThisFallback !== true) {
+  if (
+    !enableSuspenseAvoidThisFallback ||
+    props.unstable_avoidThisFallback !== true
+  ) {
     return true;
   }
   // If it's a boundary we should avoid, then we prefer to bubble up to the
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index 726f0ca52005..95fb1b8c8ab4 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -13,6 +13,7 @@ import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.old';
 import type {TreeContext} from './ReactFiberTreeContext.old';
 
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -81,7 +82,10 @@ export function shouldCaptureSuspense(
   }
   const props = workInProgress.memoizedProps;
   // Regular boundaries always capture.
-  if (props.unstable_avoidThisFallback !== true) {
+  if (
+    !enableSuspenseAvoidThisFallback ||
+    props.unstable_avoidThisFallback !== true
+  ) {
     return true;
   }
   // If it's a boundary we should avoid, then we prefer to bubble up to the
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index d357094f78c9..8aff360fe661 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -688,7 +688,7 @@ describe('ReactSuspenseList', () => {
     );
   });
 
-  // @gate enableSuspenseList
+  // @gate enableSuspenseList && enableSuspenseAvoidThisFallback
   it('avoided boundaries can be coordinate with SuspenseList', async () => {
     const A = createAsyncText('A');
     const B = createAsyncText('B');
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 6c0b4076e618..241af6432c73 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -2234,7 +2234,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
   });
 
-  // @gate enableCache
+  // @gate enableCache && enableSuspenseAvoidThisFallback
   it('shows the parent fallback if the inner fallback should be avoided', async () => {
     function Foo({showC}) {
       Scheduler.unstable_yieldValue('Foo');
@@ -2372,7 +2372,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
   });
 
-  // @gate enableCache
+  // @gate enableCache && enableSuspenseAvoidThisFallback
   it('keeps showing an avoided parent fallback if it is already showing', async () => {
     function Foo({showB}) {
       Scheduler.unstable_yieldValue('Foo');
@@ -2865,7 +2865,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     });
   });
 
-  // @gate enableCache
+  // @gate enableCache && enableSuspenseAvoidThisFallback
   it('do not show placeholder when updating an avoided boundary with startTransition', async () => {
     function App({page}) {
       return (
@@ -2909,7 +2909,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
-  // @gate enableCache
+  // @gate enableCache && enableSuspenseAvoidThisFallback
   it('do not show placeholder when mounting an avoided boundary with startTransition', async () => {
     function App({page}) {
       return (
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 51bbc5a1627d..ef3f01e583c2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -40,7 +40,7 @@ export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
-export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallback = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index f62dc8af4960..ea7a8f9995fc 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -40,7 +40,7 @@ export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
-export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallback = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index cffa189840f8..a1e5a48aabb7 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -50,7 +50,7 @@ export const enableProfilerNestedUpdateScheduledHook =
 export const enableUpdaterTracking = __PROFILE__;
 
 export const enableSuspenseLayoutEffectSemantics = true;
-export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallback = true;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =

From 2c1cf5618a24238136e3bd6139fb7f359dffe0f9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 9 Dec 2021 15:32:11 -0500
Subject: [PATCH 1070/1603] DevTools should inject itself for XHTML pages too
 (not just HTML) (#22932)

---
 .../src/injectGlobalHook.js                   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-extensions/src/injectGlobalHook.js b/packages/react-devtools-extensions/src/injectGlobalHook.js
index 79e5a84adba8..ff9123824e38 100644
--- a/packages/react-devtools-extensions/src/injectGlobalHook.js
+++ b/packages/react-devtools-extensions/src/injectGlobalHook.js
@@ -135,14 +135,18 @@ if (sessionStorageGetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
 // We need to inject this code because content scripts (ie injectGlobalHook.js) don't have access
 // to the webpage's window, so in order to access front end settings
 // and communicate with React, we must inject this code into the webpage
-if ('text/html' === document.contentType) {
-  injectCode(
-    ';(' +
-      installHook.toString() +
-      '(window))' +
-      saveNativeValues +
-      detectReact,
-  );
+switch (document.contentType) {
+  case 'text/html':
+  case 'application/xhtml+xml': {
+    injectCode(
+      ';(' +
+        installHook.toString() +
+        '(window))' +
+        saveNativeValues +
+        detectReact,
+    );
+    break;
+  }
 }
 
 if (typeof exportFunction === 'function') {

From 3b3daf5573efe801fa3dc659020625b4023d3a9f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 10 Dec 2021 11:05:18 -0500
Subject: [PATCH 1071/1603] Advocate for StrictMode usage within Components
 tree (#22886)

Adds the concept of subtree modes to DevTools to bridge protocol as follows:
1. Add-root messages get two new attributes: one specifying whether the root is running in strict mode and another specifying whether the root (really the root's renderer) supports the concept of strict mode.
2. A new backend message type (TREE_OPERATION_SET_SUBTREE_MODE). This type specifies a subtree root (id) and a mode (bitmask). For now, the only mode this message deals with is strict mode.

The DevTools frontend has been updated as well to highlight non-StrictMode compliant components.

The changes to the bridge protocol require incrementing the bridge protocol version number, which will also require updating the version of react-devtools-core backend that is shipped with React Native.
---
 .../__snapshots__/profilingCache-test.js.snap | 14 ++++
 .../__tests__/legacy/storeLegacy-v15-test.js  | 11 +++
 .../src/__tests__/store-test.js               | 48 +++++++++++++
 .../src/backend/legacy/renderer.js            |  4 +-
 .../src/backend/renderer.js                   | 29 ++++++++
 packages/react-devtools-shared/src/bridge.js  |  6 ++
 .../react-devtools-shared/src/constants.js    |  1 +
 .../src/devtools/store.js                     | 56 +++++++++++++++-
 .../src/devtools/views/Components/Element.css |  8 +++
 .../src/devtools/views/Components/Element.js  | 14 ++++
 .../views/Components/InspectedElement.css     |  5 ++
 .../views/Components/InspectedElement.js      | 25 ++++++-
 .../src/devtools/views/Components/types.js    |  4 ++
 .../src/devtools/views/Icon.js                | 13 +++-
 .../views/Profiler/CommitTreeBuilder.js       | 20 +++++-
 packages/react-devtools-shared/src/types.js   |  2 +
 packages/react-devtools-shared/src/utils.js   | 12 ++++
 .../src/app/PartiallyStrictApp/index.js       | 34 ++++++++++
 .../react-devtools-shell/src/app/index.js     | 67 ++++++++++++++-----
 packages/react-devtools/OVERVIEW.md           | 20 +++++-
 20 files changed, 370 insertions(+), 23 deletions(-)
 create mode 100644 packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index f07f405a85f2..dd4717bb5cb6 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -719,6 +719,8 @@ Object {
           1,
           1,
           11,
+          0,
+          1,
           1,
           1,
           4,
@@ -1183,6 +1185,8 @@ Object {
           1,
           1,
           11,
+          0,
+          1,
           1,
           1,
           4,
@@ -1658,6 +1662,8 @@ Object {
       1,
       13,
       11,
+      0,
+      1,
       1,
       1,
       4,
@@ -2202,6 +2208,8 @@ Object {
           1,
           13,
           11,
+          0,
+          1,
           1,
           1,
           4,
@@ -2295,6 +2303,8 @@ Object {
       1,
       1,
       11,
+      0,
+      1,
       1,
       1,
       1,
@@ -2943,6 +2953,8 @@ Object {
           1,
           1,
           11,
+          0,
+          1,
           1,
           1,
           1,
@@ -4214,6 +4226,8 @@ Object {
           1,
           1,
           11,
+          0,
+          1,
           1,
           1,
           1,
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
index fb6778521361..9afd3344c985 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -509,4 +509,15 @@ describe('Store (legacy)', () => {
       expect(store).toMatchSnapshot('5: collapse root');
     });
   });
+
+  describe('StrictMode compliance', () => {
+    it('should mark all elements as strict mode compliant', () => {
+      const App = () => null;
+
+      const container = document.createElement('div');
+      act(() => ReactDOM.render(<App />, container));
+
+      expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(false);
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 53a531d51bf2..4cf491363262 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -114,6 +114,54 @@ describe('Store', () => {
     `);
   });
 
+  describe('StrictMode compliance', () => {
+    it('should mark strict root elements as strict', () => {
+      const App = () => <Component />;
+      const Component = () => null;
+
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container, {unstable_strictMode: true});
+      act(() => {
+        root.render(<App />);
+      });
+
+      expect(store.getElementAtIndex(0).isStrictModeNonCompliant).toBe(false);
+      expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(false);
+    });
+
+    it('should mark non strict root elements as not strict', () => {
+      const App = () => <Component />;
+      const Component = () => null;
+
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container);
+      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', () => {
+      const App = () => (
+        <React.StrictMode>
+          <Component />
+        </React.StrictMode>
+      );
+      const Component = () => null;
+
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container);
+      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;
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index b757d008ac29..0a1896ee322c 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -386,7 +386,9 @@ export function attach(
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(ElementTypeRoot);
-      pushOperation(0); // isProfilingSupported?
+      pushOperation(0); // StrictMode compliant?
+      pushOperation(0); // Profiling supported?
+      pushOperation(0); // StrictMode supported?
       pushOperation(hasOwnerMetadata ? 1 : 0);
     } else {
       const type = getElementType(internalInstance);
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 7aebe6e507a0..631521791a54 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -24,6 +24,7 @@ import {
   ElementTypeRoot,
   ElementTypeSuspense,
   ElementTypeSuspenseList,
+  StrictMode,
 } from 'react-devtools-shared/src/types';
 import {
   deletePathInObject,
@@ -52,6 +53,7 @@ import {
   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,
 } from '../constants';
@@ -155,6 +157,7 @@ export function getInternalReactConstants(
   ReactPriorityLevels: ReactPriorityLevelsType,
   ReactTypeOfSideEffect: ReactTypeOfSideEffectType,
   ReactTypeOfWork: WorkTagMap,
+  StrictModeBits: number,
 |} {
   const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
     DidCapture: 0b10000000,
@@ -192,6 +195,18 @@ export function getInternalReactConstants(
     };
   }
 
+  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;
+  }
+
   let ReactTypeOfWork: WorkTagMap = ((null: any): WorkTagMap);
 
   // **********************************************************
@@ -513,6 +528,7 @@ export function getInternalReactConstants(
     ReactPriorityLevels,
     ReactTypeOfWork,
     ReactTypeOfSideEffect,
+    StrictModeBits,
   };
 }
 
@@ -534,6 +550,7 @@ export function attach(
     ReactPriorityLevels,
     ReactTypeOfWork,
     ReactTypeOfSideEffect,
+    StrictModeBits,
   } = getInternalReactConstants(version);
   const {
     DidCapture,
@@ -1876,7 +1893,9 @@ export function attach(
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(ElementTypeRoot);
+      pushOperation((fiber.mode & StrictModeBits) !== 0 ? 1 : 0);
       pushOperation(isProfilingSupported ? 1 : 0);
+      pushOperation(StrictModeBits !== 0 ? 1 : 0);
       pushOperation(hasOwnerMetadata ? 1 : 0);
 
       if (isProfiling) {
@@ -1913,6 +1932,16 @@ export function attach(
       pushOperation(ownerID);
       pushOperation(displayNameStringID);
       pushOperation(keyStringID);
+
+      // If this subtree has a new mode, let the frontend know.
+      if (
+        (fiber.mode & StrictModeBits) !== 0 &&
+        (((parentFiber: any): Fiber).mode & StrictModeBits) === 0
+      ) {
+        pushOperation(TREE_OPERATION_SET_SUBTREE_MODE);
+        pushOperation(id);
+        pushOperation(StrictMode);
+      }
     }
 
     if (isProfilingSupported) {
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index e67f6cee9542..68891e8c18d4 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -57,6 +57,12 @@ export const BRIDGE_PROTOCOL: Array<BridgeProtocol> = [
   {
     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,
   },
 ];
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 8898c27787f4..6480222e1e41 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -23,6 +23,7 @@ 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 LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index c8b252072dcb..b68ea3d26f92 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -14,6 +14,7 @@ import {
   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,
 } from '../constants';
@@ -33,6 +34,7 @@ import {
   BRIDGE_PROTOCOL,
   currentBridgeProtocol,
 } from 'react-devtools-shared/src/bridge';
+import {StrictMode} from 'react-devtools-shared/src/types';
 
 import type {Element} from './views/Components/types';
 import type {ComponentFilter, ElementType} from '../types';
@@ -72,6 +74,7 @@ type Config = {|
 export type Capabilities = {|
   hasOwnerMetadata: boolean,
   supportsProfiling: boolean,
+  supportsStrictMode: boolean,
 |};
 
 /**
@@ -812,6 +815,20 @@ export default class Store extends EventEmitter<{|
     }
   };
 
+  _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,
     validAttributes,
@@ -883,9 +900,15 @@ export default class Store extends EventEmitter<{|
               debug('Add', `new root node ${id}`);
             }
 
+            const isStrictModeCompliant = operations[i] > 0;
+            i++;
+
             const supportsProfiling = operations[i] > 0;
             i++;
 
+            const supportsStrictMode = operations[i] > 0;
+            i++;
+
             const hasOwnerMetadata = operations[i] > 0;
             i++;
 
@@ -894,8 +917,14 @@ export default class Store extends EventEmitter<{|
             this._rootIDToCapabilities.set(id, {
               hasOwnerMetadata,
               supportsProfiling,
+              supportsStrictMode,
             });
 
+            // 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,
@@ -903,6 +932,7 @@ export default class Store extends EventEmitter<{|
               hocDisplayNames: null,
               id,
               isCollapsed: false, // Never collapse roots; it would hide the entire tree.
+              isStrictModeNonCompliant,
               key: null,
               ownerID: 0,
               parentID: 0,
@@ -958,9 +988,10 @@ export default class Store extends EventEmitter<{|
               hocDisplayNames,
               id,
               isCollapsed: this._collapseNodesByDefault,
+              isStrictModeNonCompliant: parentElement.isStrictModeNonCompliant,
               key,
               ownerID,
-              parentID: parentElement.id,
+              parentID,
               type,
               weight: 1,
             };
@@ -1050,6 +1081,7 @@ export default class Store extends EventEmitter<{|
               haveErrorsOrWarningsChanged = true;
             }
           }
+
           break;
         }
         case TREE_OPERATION_REMOVE_ROOT: {
@@ -1124,6 +1156,28 @@ export default class Store extends EventEmitter<{|
           }
           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.
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.css b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
index a21b303a3504..5939ff1cc959 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.css
@@ -76,6 +76,8 @@
 
 .ErrorIcon,
 .ErrorIconContrast,
+.StrictMode,
+.StrictModeContrast,
 .WarningIcon,
 .WarningIconContrast {
   height: 0.75rem !important;
@@ -85,9 +87,15 @@
 .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
index 73789a9bd62f..d7260cf8eeef 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -113,6 +113,7 @@ export default function Element({data, index, style}: Props) {
     depth,
     displayName,
     hocDisplayNames,
+    isStrictModeNonCompliant,
     key,
     type,
   } = ((element: any): ElementType);
@@ -146,7 +147,9 @@ export default function Element({data, index, style}: Props) {
         {ownerID === null ? (
           <ExpandCollapseToggle element={element} store={store} />
         ) : null}
+
         <DisplayName displayName={displayName} id={((id: any): number)} />
+
         {key && (
           <Fragment>
             &nbsp;<span className={styles.KeyName}>key</span>="
@@ -190,6 +193,17 @@ export default function Element({data, index, style}: Props) {
             }
           />
         )}
+        {isStrictModeNonCompliant && (
+          <Icon
+            className={
+              isSelected && treeFocused
+                ? styles.StrictModeContrast
+                : styles.StrictMode
+            }
+            title="This component is not running in StrictMode."
+            type="strict-mode-non-compliant"
+          />
+        )}
       </div>
     </div>
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
index b6ad3b9983f2..1303d009cf01 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.css
@@ -66,3 +66,8 @@
   font-style: italic;
   border-left: 1px solid var(--color-border);
 }
+
+.StrictModeNonCompliant {
+  margin-right: 0.25rem;
+  color: var(--color-console-error-icon);
+}
\ No newline at end of file
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 9ebd30a6ec0b..62e14a7ca0a1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -13,6 +13,7 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {BridgeContext, StoreContext, OptionsContext} from '../context';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
+import Icon from '../Icon';
 import {ModalDialogContext} from '../ModalDialog';
 import ViewElementSourceContext from './ViewElementSourceContext';
 import Toggle from '../Toggle';
@@ -235,9 +236,25 @@ export default function InspectedElementWrapper(_: Props) {
     );
   }
 
+  let strictModeBadge = null;
+  if (element.isStrictModeNonCompliant) {
+    strictModeBadge = (
+      <a
+        className={styles.StrictModeNonCompliant}
+        href="https://fb.me/devtools-strict-mode"
+        rel="noopener noreferrer"
+        target="_blank"
+        title="This component is not running in StrictMode. Click to learn more.">
+        <Icon type="strict-mode-non-compliant" />
+      </a>
+    );
+  }
+
   return (
     <div className={styles.InspectedElement}>
       <div className={styles.TitleRow}>
+        {strictModeBadge}
+
         {element.key && (
           <>
             <div className={styles.Key} title={`key "${element.key}"`}>
@@ -248,7 +265,13 @@ export default function InspectedElementWrapper(_: Props) {
         )}
 
         <div className={styles.SelectedComponentName}>
-          <div className={styles.Component} title={element.displayName}>
+          <div
+            className={
+              element.isStrictModeNonCompliant
+                ? styles.StrictModeNonCompliantComponent
+                : styles.Component
+            }
+            title={element.displayName}>
             {element.displayName}
           </div>
         </div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index 372cdd5b9087..c6789fa1e9ec 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -42,6 +42,10 @@ export type Element = {|
   // 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,
 |};
 
 export type SerializedElement = {|
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index cec6ae34ef91..bcf59773d06a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -25,14 +25,16 @@ export type IconType =
   | 'search'
   | 'settings'
   | 'store-as-global-variable'
+  | 'strict-mode-non-compliant'
   | 'warning';
 
 type Props = {|
   className?: string,
+  title?: string,
   type: IconType,
 |};
 
-export default function Icon({className = '', type}: Props) {
+export default function Icon({className = '', title = '', type}: Props) {
   let pathData = null;
   switch (type) {
     case 'arrow':
@@ -77,6 +79,9 @@ export default function Icon({className = '', type}: Props) {
     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 'warning':
       pathData = PATH_WARNING;
       break;
@@ -92,6 +97,7 @@ export default function Icon({className = '', type}: Props) {
       width="24"
       height="24"
       viewBox="0 0 24 24">
+      {title && <title>{title}</title>}
       <path d="M0 0h24v24H0z" fill="none" />
       <path fill="currentColor" d={pathData} />
     </svg>
@@ -170,4 +176,9 @@ const PATH_STORE_AS_GLOBAL_VARIABLE = `
   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_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/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 1d16aba7fc29..286048a172bf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -13,6 +13,7 @@ import {
   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,
 } from 'react-devtools-shared/src/constants';
@@ -179,7 +180,7 @@ function updateTree(
     const operation = operations[i];
 
     switch (operation) {
-      case TREE_OPERATION_ADD:
+      case TREE_OPERATION_ADD: {
         id = ((operations[i + 1]: any): number);
         const type = ((operations[i + 2]: any): ElementType);
 
@@ -192,7 +193,9 @@ function updateTree(
         }
 
         if (type === ElementTypeRoot) {
+          i++; // isStrictModeCompliant
           i++; // supportsProfiling flag
+          i++; // supportsStrictMode flag
           i++; // hasOwnerMetadata flag
 
           if (__DEBUG__) {
@@ -250,6 +253,7 @@ function updateTree(
         }
 
         break;
+      }
       case TREE_OPERATION_REMOVE: {
         const removeLength = ((operations[i + 1]: any): number);
         i += 2;
@@ -307,6 +311,17 @@ function updateTree(
 
         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];
 
@@ -323,7 +338,7 @@ function updateTree(
         i += 3;
         break;
       }
-      case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS:
+      case TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS: {
         id = operations[i + 1];
         const numErrors = operations[i + 2];
         const numWarnings = operations[i + 3];
@@ -337,6 +352,7 @@ function updateTree(
           );
         }
         break;
+      }
 
       default:
         throw Error(`Unsupported Bridge operation "${operation}"`);
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index 5a54979b63b1..859fb9bd8ff7 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -100,3 +100,5 @@ export type StyleXPlugin = {|
 export type Plugins = {|
   stylex: StyleXPlugin | null,
 |};
+
+export const StrictMode = 1;
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 0c50374ae30b..c022cd4650ed 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -28,6 +28,7 @@ import {
   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,
 } from './constants';
@@ -211,7 +212,9 @@ export function printOperationsArray(operations: Array<number>) {
         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);
@@ -249,6 +252,15 @@ export function printOperationsArray(operations: Array<number>) {
         logs.push(`Remove root ${rootID}`);
         break;
       }
+      case TREE_OPERATION_SET_SUBTREE_MODE: {
+        const id = operations[i + 1];
+        const mode = operations[i + 1];
+
+        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);
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 000000000000..068e11935bce
--- /dev/null
+++ b/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {StrictMode} from 'react';
+
+export default function PartiallyStrictApp() {
+  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/index.js b/packages/react-devtools-shell/src/app/index.js
index 805cd0a2a707..f949b8598f48 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -6,6 +6,8 @@ import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about createRoot()
   createRoot,
+  render,
+  unmountComponentAtNode,
 } from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import Iframe from './Iframe';
@@ -18,6 +20,7 @@ import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import ErrorBoundaries from './ErrorBoundaries';
+import PartiallyStrictApp from './PartiallyStrictApp';
 import SuspenseTree from './SuspenseTree';
 import {ignoreErrors, ignoreLogs, ignoreWarnings} from './console';
 
@@ -34,36 +37,68 @@ ignoreErrors([
 ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
 ignoreLogs([]);
 
-const roots = [];
+const unmountFunctions = [];
 
-function mountHelper(App) {
+function createContainer() {
   const container = document.createElement('div');
 
   ((document.body: any): HTMLBodyElement).appendChild(container);
 
+  return container;
+}
+
+function mountApp(App) {
+  const container = createContainer();
+
   const root = createRoot(container);
   root.render(createElement(App));
 
-  roots.push(root);
+  unmountFunctions.push(() => root.unmount());
+}
+
+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) {
+  function LegacyRender() {
+    return createElement(App);
+  }
+
+  const container = createContainer();
+
+  render(createElement(LegacyRender), container);
+
+  unmountFunctions.push(() => unmountComponentAtNode(container));
 }
 
 function mountTestApp() {
-  mountHelper(ToDoList);
-  mountHelper(InspectableElements);
-  mountHelper(Hydration);
-  mountHelper(ElementTypes);
-  mountHelper(EditableProps);
-  mountHelper(InlineWarnings);
-  mountHelper(ReactNativeWeb);
-  mountHelper(Toggle);
-  mountHelper(ErrorBoundaries);
-  mountHelper(SuspenseTree);
-  mountHelper(DeeplyNestedComponents);
-  mountHelper(Iframe);
+  mountStrictApp(ToDoList);
+  mountApp(InspectableElements);
+  mountApp(Hydration);
+  mountApp(ElementTypes);
+  mountApp(EditableProps);
+  mountApp(InlineWarnings);
+  mountApp(ReactNativeWeb);
+  mountApp(Toggle);
+  mountApp(ErrorBoundaries);
+  mountApp(SuspenseTree);
+  mountApp(DeeplyNestedComponents);
+  mountApp(Iframe);
+  mountLegacyApp(PartiallyStrictApp);
 }
 
 function unmountTestApp() {
-  roots.forEach(root => root.unmount());
+  unmountFunctions.forEach(fn => fn());
 }
 
 mountTestApp();
diff --git a/packages/react-devtools/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index 70b2c9ba095b..01ed4bd02a88 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -54,7 +54,9 @@ 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. profiling supported flag
+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:
@@ -63,7 +65,9 @@ For example, adding a root fiber with an id of 1:
   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
 ]
 ```
@@ -176,6 +180,20 @@ Special case of unmounting an entire root (include its descendants). This specia
 
 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:

From a049aa015563c2e50f44214c28d186c0bae09ba6 Mon Sep 17 00:00:00 2001
From: jstejada <jstejada@fb.com>
Date: Mon, 13 Dec 2021 11:38:45 -0500
Subject: [PATCH 1072/1603] [DevTools] Log errors occurring or reported to the
 frontend (#22948)

---
 packages/react-devtools-shared/src/Logger.js               | 6 ++++++
 .../src/devtools/views/ErrorBoundary/ErrorBoundary.js      | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index bdf1823cd8eb..aa1f194e60b8 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -13,6 +13,12 @@ export type LogEvent =
   | {|
       +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',
     |}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index 3dbfb21abafc..affc98eb1306 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -15,6 +15,7 @@ import SearchingGitHubIssues from './SearchingGitHubIssues';
 import SuspendingErrorView from './SuspendingErrorView';
 import TimeoutView from './TimeoutView';
 import TimeoutError from 'react-devtools-shared/src/TimeoutError';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 type Props = {|
   children: React$Node,
@@ -73,6 +74,12 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: any, {componentStack}: any) {
+    logEvent({
+      event_name: 'error',
+      error_message: error.message ?? null,
+      error_stack: error.stack ?? null,
+      error_component_stack: componentStack ?? null,
+    });
     this.setState({
       componentStack,
     });

From 575791925697c7e23966e6934b577e69aef736f3 Mon Sep 17 00:00:00 2001
From: jstejada <jstejada@fb.com>
Date: Mon, 13 Dec 2021 12:02:14 -0500
Subject: [PATCH 1073/1603] DevTools: Correctly log errors reported from the
 store (#22950)

---
 .../views/ErrorBoundary/ErrorBoundary.js        | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index affc98eb1306..b78f7406ad17 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -74,12 +74,7 @@ export default class ErrorBoundary extends Component<Props, State> {
   }
 
   componentDidCatch(error: any, {componentStack}: any) {
-    logEvent({
-      event_name: 'error',
-      error_message: error.message ?? null,
-      error_stack: error.stack ?? null,
-      error_component_stack: componentStack ?? null,
-    });
+    this._logError(error, componentStack);
     this.setState({
       componentStack,
     });
@@ -146,6 +141,15 @@ export default class ErrorBoundary extends Component<Props, State> {
     return children;
   }
 
+  _logError = (error: any, componentStack: string | null) => {
+    logEvent({
+      event_name: 'error',
+      error_message: error.message ?? null,
+      error_stack: error.stack ?? null,
+      error_component_stack: componentStack ?? null,
+    });
+  };
+
   _dismissError = () => {
     const onBeforeDismissCallback = this.props.onBeforeDismissCallback;
     if (typeof onBeforeDismissCallback === 'function') {
@@ -157,6 +161,7 @@ export default class ErrorBoundary extends Component<Props, State> {
 
   _onStoreError = (error: Error) => {
     if (!this.state.hasError) {
+      this._logError(error, null);
       this.setState({
         ...ErrorBoundary.getDerivedStateFromError(error),
         canDismiss: true,

From 911f92a44da540b3c60779b28745d050ddd21679 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 14 Dec 2021 12:16:16 -0500
Subject: [PATCH 1074/1603] DevTools: Support mulitple DevTools instances per
 page (#22949)

This is being done so that we can embed DevTools within the new React (beta) docs.

The primary changes here are to `react-devtools-inline/backend`:
* Add a new `createBridge` API
* Add an option to the `activate` method to support passing in the custom bridge object.

The `react-devtools-inline` README has been updated to include these new methods.

To verify these changes, this commit also updates the test shell to add a new entry-point for multiple DevTools.

This commit also replaces two direct calls to `window.postMessage()` with `bridge.send()` (and adds the related Flow types).
---
 packages/react-devtools-inline/README.md      |  41 +++--
 packages/react-devtools-inline/src/backend.js | 147 ++++++++++--------
 .../react-devtools-inline/src/constants.js    |   6 -
 .../react-devtools-inline/src/frontend.js     |  65 ++++----
 .../src/backend/agent.js                      |   3 +
 packages/react-devtools-shared/src/bridge.js  |  14 +-
 .../{index.html => app.html}                  |   2 +-
 packages/react-devtools-shell/multi.html      |  57 +++++++
 packages/react-devtools-shell/now.json        |   5 -
 packages/react-devtools-shell/package.json    |   6 +-
 .../src/{ => app}/devtools.js                 |   2 +-
 .../src/multi/devtools.js                     |  71 +++++++++
 .../react-devtools-shell/src/multi/left.js    |  19 +++
 .../react-devtools-shell/src/multi/right.js   |  33 ++++
 .../react-devtools-shell/webpack.config.js    |   7 +-
 packages/react-devtools/package.json          |   9 +-
 16 files changed, 340 insertions(+), 147 deletions(-)
 delete mode 100644 packages/react-devtools-inline/src/constants.js
 rename packages/react-devtools-shell/{index.html => app.html} (97%)
 create mode 100644 packages/react-devtools-shell/multi.html
 delete mode 100644 packages/react-devtools-shell/now.json
 rename packages/react-devtools-shell/src/{ => app}/devtools.js (98%)
 create mode 100644 packages/react-devtools-shell/src/multi/devtools.js
 create mode 100644 packages/react-devtools-shell/src/multi/left.js
 create mode 100644 packages/react-devtools-shell/src/multi/right.js

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index b7b3f8373adc..dff2ce2a0626 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -56,7 +56,7 @@ const iframe = document.getElementById(frameID);
 const contentWindow = iframe.contentWindow;
 
 // This returns a React component that can be rendered into your app.
-// <DevTools {...props} />
+// e.g. render(<DevTools {...props} />);
 const DevTools = initialize(contentWindow);
 ```
 
@@ -177,32 +177,47 @@ Below is an example of an advanced integration with a website like [Replay.io](h
 
 ```js
 import {
-  createBridge,
+  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";
+} from 'react-devtools-inline/frontend';
 
-// Custom Wall implementation enables serializing data
-// using an API other than window.postMessage()
+// 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 = {
-  emit() {},
+  _listeners: [],
   listen(listener) {
-    wall._listener = listener;
+    wall._listeners.push(listener);
   },
-  async send(event, payload) {
-    const response = await fetch(...).json();
-    wall._listener(response);
+  send(event, payload) {
+    wall._listeners.forEach(listener => listener({event, payload}));
   },
 };
 
-// Create a Bridge and Store that use the custom Wall.
+// 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 = createBridge(target, wall);
 const store = createStore(bridge);
 const DevTools = createDevTools(target, { bridge, store });
 
-// Render DevTools with it.
-<DevTools {...otherProps} />;
+// 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),
+});
 ```
 
 ## Local development
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index a6466d82709f..c0c87871df11 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -5,83 +5,57 @@ import Bridge from 'react-devtools-shared/src/bridge';
 import {initBackend} from 'react-devtools-shared/src/backend';
 import {installHook} from 'react-devtools-shared/src/hook';
 import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
-import {
-  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
-  MESSAGE_TYPE_SAVED_PREFERENCES,
-} from './constants';
 
-function startActivation(contentWindow: window) {
-  const {parent} = contentWindow;
-
-  const onMessage = ({data}) => {
-    switch (data.type) {
-      case MESSAGE_TYPE_SAVED_PREFERENCES:
-        // This is the only message we're listening for,
-        // so it's safe to cleanup after we've received it.
-        contentWindow.removeEventListener('message', onMessage);
-
-        const {
-          appendComponentStack,
-          breakOnConsoleErrors,
-          componentFilters,
-          showInlineWarningsAndErrors,
-          hideConsoleLogsInStrictMode,
-        } = data;
-
-        contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
-        contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
-        contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
-        contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
-        contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
-
-        // TRICKY
-        // The backend entry point may be required in the context of an iframe or the parent window.
-        // If it's required within the parent window, store the saved values on it as well,
-        // since the injected renderer interface will read from window.
-        // Technically we don't need to store them on the contentWindow in this case,
-        // but it doesn't really hurt anything to store them there too.
-        if (contentWindow !== window) {
-          window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
-          window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
-          window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
-          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
-          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
-        }
-
-        finishActivation(contentWindow);
-        break;
-      default:
-        break;
+import type {BackendBridge} from 'react-devtools-shared/src/bridge';
+import type {Wall} from 'react-devtools-shared/src/types';
+
+function startActivation(contentWindow: window, bridge: BackendBridge) {
+  const onSavedPreferences = data => {
+    // 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 {
+      appendComponentStack,
+      breakOnConsoleErrors,
+      componentFilters,
+      showInlineWarningsAndErrors,
+      hideConsoleLogsInStrictMode,
+    } = data;
+
+    contentWindow.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+    contentWindow.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
+    contentWindow.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+    contentWindow.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
+    contentWindow.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
+
+    // TRICKY
+    // The backend entry point may be required in the context of an iframe or the parent window.
+    // If it's required within the parent window, store the saved values on it as well,
+    // since the injected renderer interface will read from window.
+    // Technically we don't need to store them on the contentWindow in this case,
+    // but it doesn't really hurt anything to store them there too.
+    if (contentWindow !== window) {
+      window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = appendComponentStack;
+      window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ = breakOnConsoleErrors;
+      window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = componentFilters;
+      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = showInlineWarningsAndErrors;
+      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = hideConsoleLogsInStrictMode;
     }
+
+    finishActivation(contentWindow, bridge);
   };
 
-  contentWindow.addEventListener('message', onMessage);
+  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().
-  parent.postMessage({type: MESSAGE_TYPE_GET_SAVED_PREFERENCES}, '*');
+  bridge.send('getSavedPreferences');
 }
 
-function finishActivation(contentWindow: window) {
-  const {parent} = contentWindow;
-
-  const bridge = new Bridge({
-    listen(fn) {
-      const onMessage = event => {
-        fn(event.data);
-      };
-      contentWindow.addEventListener('message', onMessage);
-      return () => {
-        contentWindow.removeEventListener('message', onMessage);
-      };
-    },
-    send(event: string, payload: any, transferable?: Array<any>) {
-      parent.postMessage({event, payload}, '*', transferable);
-    },
-  });
-
+function finishActivation(contentWindow: window, bridge: BackendBridge) {
   const agent = new Agent(bridge);
 
   const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -100,8 +74,45 @@ function finishActivation(contentWindow: window) {
   }
 }
 
-export function activate(contentWindow: window): void {
-  startActivation(contentWindow);
+export function activate(
+  contentWindow: window,
+  {
+    bridge,
+  }: {|
+    bridge?: BackendBridge,
+  |} = {},
+): void {
+  if (bridge == null) {
+    bridge = createBridge(contentWindow);
+  }
+
+  startActivation(contentWindow, bridge);
+}
+
+export function createBridge(
+  contentWindow: window,
+  wall?: Wall,
+): BackendBridge {
+  const {parent} = contentWindow;
+
+  if (wall == null) {
+    wall = {
+      listen(fn) {
+        const onMessage = ({data}) => {
+          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: window): void {
diff --git a/packages/react-devtools-inline/src/constants.js b/packages/react-devtools-inline/src/constants.js
deleted file mode 100644
index cfa443cc0480..000000000000
--- a/packages/react-devtools-inline/src/constants.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @flow */
-
-export const MESSAGE_TYPE_GET_SAVED_PREFERENCES =
-  'React::DevTools::getSavedPreferences';
-export const MESSAGE_TYPE_SAVED_PREFERENCES =
-  'React::DevTools::savedPreferences';
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 065bb1238715..0e90c884667a 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -12,10 +12,6 @@ import {
   getShowInlineWarningsAndErrors,
   getHideConsoleLogsInStrictMode,
 } from 'react-devtools-shared/src/utils';
-import {
-  MESSAGE_TYPE_GET_SAVED_PREFERENCES,
-  MESSAGE_TYPE_SAVED_PREFERENCES,
-} from './constants';
 
 import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
@@ -68,49 +64,40 @@ export function initialize(
     store?: Store,
   |} = {},
 ): React.AbstractComponent<Props, mixed> {
-  const onGetSavedPreferencesMessage = ({data, source}) => {
-    if (source === 'react-devtools-content-script') {
-      // Ignore messages from the DevTools browser extension.
-    }
-
-    switch (data.type) {
-      case MESSAGE_TYPE_GET_SAVED_PREFERENCES:
-        // This is the only message we're listening for,
-        // so it's safe to cleanup after we've received it.
-        window.removeEventListener('message', onGetSavedPreferencesMessage);
-
-        // The renderer interface can't read saved preferences directly,
-        // because they are stored in localStorage within the context of the extension.
-        // Instead it relies on the extension to pass them through.
-        contentWindow.postMessage(
-          {
-            type: MESSAGE_TYPE_SAVED_PREFERENCES,
-            appendComponentStack: getAppendComponentStack(),
-            breakOnConsoleErrors: getBreakOnConsoleErrors(),
-            componentFilters: getSavedComponentFilters(),
-            showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
-            hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
-          },
-          '*',
-        );
-        break;
-      default:
-        break;
-    }
-  };
-
-  window.addEventListener('message', onGetSavedPreferencesMessage);
-
   if (bridge == null) {
     bridge = createBridge(contentWindow);
   }
 
+  // Type refinement.
+  const frontendBridge = ((bridge: any): FrontendBridge);
+
   if (store == null) {
-    store = createStore(bridge);
+    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 = {
+      appendComponentStack: getAppendComponentStack(),
+      breakOnConsoleErrors: getBreakOnConsoleErrors(),
+      componentFilters: getSavedComponentFilters(),
+      showInlineWarningsAndErrors: getShowInlineWarningsAndErrors(),
+      hideConsoleLogsInStrictMode: getHideConsoleLogsInStrictMode(),
+    };
+
+    // 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={bridge} store={store} {...props} />
+    <DevTools ref={ref} bridge={frontendBridge} store={store} {...props} />
   ));
   ForwardRef.displayName = 'DevTools';
 
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index fdd46bf9c88f..f31e3a6c38a7 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -225,6 +225,9 @@ export default class Agent extends EventEmitter<{|
       bridge.send('profilingStatus', true);
     }
 
+    // Send the Bridge protocol after initialization in case the frontend has already requested it.
+    this._bridge.send('bridgeProtocol', currentBridgeProtocol);
+
     // 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;
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 68891e8c18d4..cdeec7aebfc4 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -176,10 +176,19 @@ type UpdateConsolePatchSettingsParams = {|
   browserTheme: BrowserTheme,
 |};
 
+type SavedPreferencesParams = {|
+  appendComponentStack: boolean,
+  breakOnConsoleErrors: boolean,
+  componentFilters: Array<ComponentFilter>,
+  showInlineWarningsAndErrors: boolean,
+  hideConsoleLogsInStrictMode: boolean,
+|};
+
 export type BackendEvents = {|
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
   fastRefreshScheduled: [],
+  getSavedPreferences: [],
   inspectedElement: [InspectedElementPayload],
   isBackendStorageAPISupported: [boolean],
   isSynchronousXHRSupported: [boolean],
@@ -223,6 +232,7 @@ type FrontendEvents = {|
   profilingData: [ProfilingDataBackend],
   reloadAndProfile: [boolean],
   renamePath: [RenamePath],
+  savedPreferences: [SavedPreferencesParams],
   selectFiber: [number],
   setTraceUpdatesEnabled: [boolean],
   shutdown: [],
@@ -277,7 +287,9 @@ class Bridge<
 
     this._wallUnlisten =
       wall.listen((message: Message) => {
-        (this: any).emit(message.event, message.payload);
+        if (message && message.event) {
+          (this: any).emit(message.event, message.payload);
+        }
       }) || null;
 
     // Temporarily support older standalone front-ends sending commands to newer embedded backends.
diff --git a/packages/react-devtools-shell/index.html b/packages/react-devtools-shell/app.html
similarity index 97%
rename from packages/react-devtools-shell/index.html
rename to packages/react-devtools-shell/app.html
index 410dc5bdc2ab..7bd183891a99 100644
--- a/packages/react-devtools-shell/index.html
+++ b/packages/react-devtools-shell/app.html
@@ -64,6 +64,6 @@
     <!-- This script installs the hook, injects the backend, and renders the DevTools UI -->
     <!-- In DEV mode, this file is served by the Webpack dev server -->
     <!-- For production builds, it's built by Webpack and uploaded from the local file system -->
-    <script src="dist/devtools.js"></script>
+    <script src="dist/app-devtools.js"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/packages/react-devtools-shell/multi.html b/packages/react-devtools-shell/multi.html
new file mode 100644
index 000000000000..57b25c376076
--- /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/now.json b/packages/react-devtools-shell/now.json
deleted file mode 100644
index 7c0805c3b165..000000000000
--- a/packages/react-devtools-shell/now.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "react-devtools-experimental",
-  "alias": ["react-devtools-experimental"],
-  "files": ["index.html", "dist"]
-}
diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json
index 0d995bdfb07f..776085ec0618 100644
--- a/packages/react-devtools-shell/package.json
+++ b/packages/react-devtools-shell/package.json
@@ -3,9 +3,9 @@
   "name": "react-devtools-shell",
   "version": "0.0.0",
   "scripts": {
-    "build": "cross-env NODE_ENV=development cross-env TARGET=remote webpack --config webpack.config.js",
-    "deploy": "yarn run build && now deploy && now alias react-devtools-experimental",
-    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open"
+    "start": "yarn start:app",
+    "start:app": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page app.html",
+    "start:multi": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page multi.html"
   },
   "dependencies": {
     "immutable": "^4.0.0-rc.12",
diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/app/devtools.js
similarity index 98%
rename from packages/react-devtools-shell/src/devtools.js
rename to packages/react-devtools-shell/src/app/devtools.js
index 7b4171851c1b..a4e21c81d772 100644
--- a/packages/react-devtools-shell/src/devtools.js
+++ b/packages/react-devtools-shell/src/app/devtools.js
@@ -60,7 +60,7 @@ function hookNamesModuleLoaderFunction() {
   return import('react-devtools-inline/hookNames');
 }
 
-inject('dist/app.js', () => {
+inject('dist/app-index.js', () => {
   initDevTools({
     connect(cb) {
       const root = createRoot(container);
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 000000000000..6b1313fa7a1d
--- /dev/null
+++ b/packages/react-devtools-shell/src/multi/devtools.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {createRoot} from 'react-dom';
+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 000000000000..aaf380f39a6d
--- /dev/null
+++ b/packages/react-devtools-shell/src/multi/left.js
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import {useState} from 'react';
+import {createRoot} from 'react-dom';
+
+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 000000000000..f4d08632e75f
--- /dev/null
+++ b/packages/react-devtools-shell/src/multi/right.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {useLayoutEffect, useRef, useState} from 'react';
+import {render} from 'react-dom';
+
+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>
+  );
+}
+
+render(<EffectWithState />, createContainer());
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index fb3df7240fb3..4f690bb0e3c2 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -42,8 +42,11 @@ const config = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
   entry: {
-    app: './src/app/index.js',
-    devtools: './src/devtools.js',
+    'app-index': './src/app/index.js',
+    'app-devtools': './src/app/devtools.js',
+    'multi-left': './src/multi/left.js',
+    'multi-devtools': './src/multi/devtools.js',
+    'multi-right': './src/multi/right.js',
   },
   node: {
     // source-maps package has a dependency on 'fs'
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index ca66824859ca..d36aeff05f58 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -11,14 +11,7 @@
   "bin": {
     "react-devtools": "./bin.js"
   },
-  "files": [
-    "bin.js",
-    "build-info.json",
-    "app.html",
-    "app.js",
-    "index.js",
-    "icons"
-  ],
+  "files": [],
   "scripts": {
     "start": "node bin.js"
   },

From 0229baee21e8e6ecef04d4d76c41af84dfcca8bc Mon Sep 17 00:00:00 2001
From: jstejada <jstejada@fb.com>
Date: Tue, 14 Dec 2021 14:19:21 -0500
Subject: [PATCH 1075/1603] React DevTools 4.21.0 -> 4.22.0 (#22951)

---
 packages/react-devtools-core/package.json     |  2 +-
 .../chrome/manifest.json                      |  4 +-
 .../edge/manifest.json                        |  4 +-
 .../firefox/manifest.json                     |  2 +-
 packages/react-devtools-inline/package.json   |  2 +-
 packages/react-devtools-timeline/package.json |  2 +-
 packages/react-devtools/CHANGELOG.md          | 39 +++++++++++++++++++
 packages/react-devtools/package.json          |  4 +-
 8 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 9017ff630310..99a23a33a7b6 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 780793b6d1e0..e7e1ee11aa16 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.21.0",
-  "version_name": "4.21.0",
+  "version": "4.22.0",
+  "version_name": "4.22.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index fa9b34cd2af6..f5db34564a7c 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.21.0",
-  "version_name": "4.21.0",
+  "version": "4.22.0",
+  "version_name": "4.22.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 2bd83fd65679..22257f0b8018 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index f6468fea3c28..1398f28d9281 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 86bab4e26024..1a8856da815b 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 95a1a65721a7..04f6be3445c6 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,45 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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))
+* Add test selectors to experimental build ([@bvaughn](https://github.com/bvaughn) in [#22760](https://github.com/facebook/react/pull/22760))
+* 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))
+* Add open in editor for fb ([@ezzak](https://github.com/ezzak) in [#22649](https://github.com/facebook/react/pull/22649))
+
+#### 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
+* Internally log errors occurring or reported to the frontend ([@jstejada](https://github.com/jstejada) in [#22948](https://github.com/facebook/react/pull/22948))
+* Emit new event when DevTools connects in standalone app ([@jstejada](https://github.com/jstejada) in [#22848](https://github.com/facebook/react/pull/22848))
+* DevTools: Log version in internal logger ([@jstejada](https://github.com/jstejada) in [#22825](https://github.com/facebook/react/pull/22825))
+* Proof of Concept for E2E tests using playwright ([@akgupta0777](https://github.com/akgupta0777) in [#22754](https://github.com/facebook/react/pull/22754))
+* Add internal link to Scheduling Profiler ([@bvaughn](https://github.com/bvaughn) in [#22730](https://github.com/facebook/react/pull/22730))
+
+
 ## 4.21.0 (October 31, 2021)
 
 #### Features
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index d36aeff05f58..acdc27c5cd66 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.21.0",
+  "version": "4.22.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -20,7 +20,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.21.0",
+    "react-devtools-core": "4.22.0",
     "update-notifier": "^2.1.0"
   }
 }

From 75d34aa083fad0d6bc3ecebe089d00c7ca26ecdc Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 14 Dec 2021 16:50:17 -0500
Subject: [PATCH 1076/1603] Updated DevTools changelog

---
 packages/react-devtools/CHANGELOG.md | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 04f6be3445c6..bddf5824a16a 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -18,10 +18,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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))
-* Add test selectors to experimental build ([@bvaughn](https://github.com/bvaughn) in [#22760](https://github.com/facebook/react/pull/22760))
 * 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))
-* Add open in editor for fb ([@ezzak](https://github.com/ezzak) in [#22649](https://github.com/facebook/react/pull/22649))
 
 #### 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))
@@ -32,14 +30,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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
-* Internally log errors occurring or reported to the frontend ([@jstejada](https://github.com/jstejada) in [#22948](https://github.com/facebook/react/pull/22948))
 * Emit new event when DevTools connects in standalone app ([@jstejada](https://github.com/jstejada) in [#22848](https://github.com/facebook/react/pull/22848))
-* DevTools: Log version in internal logger ([@jstejada](https://github.com/jstejada) in [#22825](https://github.com/facebook/react/pull/22825))
-* Proof of Concept for E2E tests using playwright ([@akgupta0777](https://github.com/akgupta0777) in [#22754](https://github.com/facebook/react/pull/22754))
-* Add internal link to Scheduling Profiler ([@bvaughn](https://github.com/bvaughn) in [#22730](https://github.com/facebook/react/pull/22730))
-
 
 ## 4.21.0 (October 31, 2021)
 

From cd1a3e9b556ab1eb8009676a38857aae7585dc8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Tue, 14 Dec 2021 16:19:19 -0800
Subject: [PATCH 1077/1603] Build both a partial renderer and fizz renderer of
 the legacy API for FB (#22933)

This lets us test how the new architecture performs without comparing it to
other infra changes related to streaming.

I renamed the streaming one to ReactDOMServerStreaming so the references
in www need to be updated.

I'll open an adhoc sync with just those files.
---
 scripts/rollup/bundles.js | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 02f0c68f6baa..bfa423b720c8 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -259,9 +259,14 @@ const bundles = [
 
   /******* React DOM Server *******/
   {
-    bundleTypes: __EXPERIMENTAL__
-      ? [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD]
-      : [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [
+      UMD_DEV,
+      UMD_PROD,
+      NODE_DEV,
+      NODE_PROD,
+      FB_WWW_DEV,
+      FB_WWW_PROD,
+    ],
     moduleType: RENDERER,
     entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser',
     name: 'react-dom-server-legacy.browser',
@@ -317,7 +322,7 @@ const bundles = [
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
     moduleType: RENDERER,
     entry: 'react-server-dom-relay/src/ReactDOMServerFB',
-    global: 'ReactDOMServer',
+    global: 'ReactDOMServerStreaming',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
     externals: ['react'],

From 3f45b681414a64c7034fab7f5e7bb4bb8df60f9c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 14 Dec 2021 23:28:57 -0500
Subject: [PATCH 1078/1603] Re-added deleted files array to react-devtools
 package.json (#22960)

---
 packages/react-devtools/package.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index acdc27c5cd66..0653d29605f6 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -11,7 +11,13 @@
   "bin": {
     "react-devtools": "./bin.js"
   },
-  "files": [],
+  "files": [
+    "bin.js",
+    "app.html",
+    "app.js",
+    "index.js",
+    "icons"
+  ],
   "scripts": {
     "start": "node bin.js"
   },

From b10c3780246c82d4b9770309dec44070a2003ad8 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 14 Dec 2021 23:45:46 -0500
Subject: [PATCH 1079/1603] Revert changes to react-devtools-inline Webpack
 config from PR #22760 (#22961)

---
 packages/react-devtools-inline/webpack.config.js | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index 07f23f8ef34e..c53a61b61d41 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -33,14 +33,6 @@ const babelOptions = {
   ),
 };
 
-const builtModulesDir = resolve(
-  __dirname,
-  '..',
-  '..',
-  'build',
-  'oss-experimental',
-);
-
 module.exports = {
   mode: __DEV__ ? 'development' : 'production',
   devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map',
@@ -57,10 +49,10 @@ module.exports = {
     libraryTarget: 'commonjs2',
   },
   externals: {
-    react: resolve(builtModulesDir, 'react'),
-    'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
-    'react-is': resolve(builtModulesDir, 'react-is'),
-    scheduler: resolve(builtModulesDir, 'scheduler'),
+    react: 'react',
+    'react-dom': 'react-dom',
+    'react-is': 'react-is',
+    scheduler: 'scheduler',
   },
   node: {
     // source-maps package has a dependency on 'fs'

From 5b69c94eed8efab55ee60c7f10704ab832d47a70 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 14 Dec 2021 23:52:50 -0500
Subject: [PATCH 1080/1603] React DevTools 4.22.0 -> 4.22.1 (#22962)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-timeline/package.json            | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 5 +++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 99a23a33a7b6..453f74d95268 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index e7e1ee11aa16..d0f42468714a 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.22.0",
-  "version_name": "4.22.0",
+  "version": "4.22.1",
+  "version_name": "4.22.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index f5db34564a7c..d1caa3bb63ca 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.22.0",
-  "version_name": "4.22.0",
+  "version": "4.22.1",
+  "version_name": "4.22.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 22257f0b8018..848a5829075e 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 1398f28d9281..97ea833afb20 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 1a8856da815b..f2492870108f 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index bddf5824a16a..e94321a539c7 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 0653d29605f6..1eda1889dd1c 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.22.0",
+  "version": "4.22.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.22.0",
+    "react-devtools-core": "4.22.1",
     "update-notifier": "^2.1.0"
   }
 }

From e59233aa854fbeabe4698b40ef95da8e4c69ed6c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 15 Dec 2021 10:44:14 -0500
Subject: [PATCH 1081/1603] react-devtools-inline README updates (#22967)

---
 packages/react-devtools-inline/README.md | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index dff2ce2a0626..fe071633528c 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -173,7 +173,7 @@ iframe.onload = () => {
 
 ### Advanced integration with custom "wall"
 
-Below is an example of an advanced integration with a website like [Replay.io](https://replay.io/).
+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 {
@@ -205,9 +205,9 @@ 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 = createBridge(target, wall);
+const bridge = createFrontendBridge(contentWindow, wall);
 const store = createStore(bridge);
-const DevTools = createDevTools(target, { bridge, store });
+const DevTools = createDevTools(contentWindow, { bridge, store });
 
 // You can render DevTools now:
 const root = createRoot(container);
@@ -220,6 +220,23 @@ activateBackend(contentWindow, {
 });
 ```
 
+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 }, "*");
+  },
+};
+```
+
 ## Local development
 You can also build and test this package from source.
 

From aa8f2bdbce0aa8d5128461190f7ea40f891cb78e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 15 Dec 2021 11:42:59 -0500
Subject: [PATCH 1082/1603] Refactored DevTools test shell for e2e (#22968)

Fixes a regression in the e2e target and makes things easier (hopefully) going forward when adding new e2e tests.
---
 .../__e2e__/inspecting-props.test.js          | 10 +++--
 packages/react-devtools-shell/e2e.html        | 40 +++++++++++++++++++
 .../{app.html => index.html}                  |  5 ++-
 packages/react-devtools-shell/package.json    |  4 +-
 packages/react-devtools-shell/src/e2e/app.js  | 20 ++++++++++
 .../react-devtools-shell/src/e2e/devtools.js  | 34 ++++++++++++++++
 .../react-devtools-shell/webpack.config.js    |  2 +
 7 files changed, 106 insertions(+), 9 deletions(-)
 create mode 100644 packages/react-devtools-shell/e2e.html
 rename packages/react-devtools-shell/{app.html => index.html} (91%)
 create mode 100644 packages/react-devtools-shell/src/e2e/app.js
 create mode 100644 packages/react-devtools-shell/src/e2e/devtools.js

diff --git a/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
index 9fbbce0f47df..5b6390c8a93f 100644
--- a/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
+++ b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
@@ -8,9 +8,11 @@ test.describe('Testing Todo-List App', () => {
   let page, frameElementHandle, frame;
   test.beforeAll(async ({browser}) => {
     page = await browser.newPage();
-    await page.goto('http://localhost:8080/', {waitUntil: 'domcontentloaded'});
-    await page.waitForSelector('iframe#target');
-    frameElementHandle = await page.$('#target');
+    await page.goto('http://localhost:8080/e2e.html', {
+      waitUntil: 'domcontentloaded',
+    });
+    await page.waitForSelector('iframe#iframe');
+    frameElementHandle = await page.$('#iframe');
     frame = await frameElementHandle.contentFrame();
   });
 
@@ -42,7 +44,7 @@ test.describe('Testing Todo-List App', () => {
     for (let i = 1; i <= countOfItems; ++i) {
       await page.click('[class^=ToggleContent]', {delay: 100});
       await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
-      await page.waitForSelector('span.Value___tNzum');
+      await page.waitForSelector('span[class^=Value]');
       const text = await page.innerText('span[class^=Value]');
       await expect(text).toEqual(listItemsProps[i]);
     }
diff --git a/packages/react-devtools-shell/e2e.html b/packages/react-devtools-shell/e2e.html
new file mode 100644
index 000000000000..93d8f2f3f81d
--- /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/app.html b/packages/react-devtools-shell/index.html
similarity index 91%
rename from packages/react-devtools-shell/app.html
rename to packages/react-devtools-shell/index.html
index 7bd183891a99..bc539559bbb6 100644
--- a/packages/react-devtools-shell/app.html
+++ b/packages/react-devtools-shell/index.html
@@ -48,8 +48,9 @@
       <button id="mountButton">Unmount test app</button>
       <div class="optionsRowSpacer">&nbsp;</div>
       <span>
-        <a href="https://react-devtools-experimental-chrome.now.sh/">Chrome extension</a>
-        <a href="https://react-devtools-experimental-firefox.now.sh/">Firefox extension</a>
+        <a href="/multi.html">multi DevTools</a>
+        |
+        <a href="/e2e.html">e2e tests</a>
       </span>
     </div>
 
diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json
index 776085ec0618..15eecd46325c 100644
--- a/packages/react-devtools-shell/package.json
+++ b/packages/react-devtools-shell/package.json
@@ -3,9 +3,7 @@
   "name": "react-devtools-shell",
   "version": "0.0.0",
   "scripts": {
-    "start": "yarn start:app",
-    "start:app": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page app.html",
-    "start:multi": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server --open-page multi.html"
+    "start": "cross-env NODE_ENV=development cross-env TARGET=local webpack-dev-server"
   },
   "dependencies": {
     "immutable": "^4.0.0-rc.12",
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 000000000000..97ede9b56635
--- /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 {createElement} from 'react';
+import {
+  // $FlowFixMe Flow does not yet know about createRoot()
+  createRoot,
+} from 'react-dom';
+import ToDoList from '../app/ToDoList';
+
+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 root = createRoot(container);
+root.render(createElement(ToDoList));
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 000000000000..68717ca1e921
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {createRoot} from 'react-dom';
+import {
+  activate as activateBackend,
+  initialize as initializeBackend,
+} from 'react-devtools-inline/backend';
+import {initialize as createDevTools} from 'react-devtools-inline/frontend';
+
+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, () => {
+    createRoot(devtoolsContainer).render(<DevTools />);
+  });
+
+  activateBackend(contentWindow);
+}
+
+const iframe = document.getElementById('iframe');
+const devtoolsContainer = document.getElementById('devtools');
+
+init(iframe, devtoolsContainer, 'dist/e2e-app.js');
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 4f690bb0e3c2..496bdabd6b76 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -44,6 +44,8 @@ const config = {
   entry: {
     'app-index': './src/app/index.js',
     'app-devtools': './src/app/devtools.js',
+    'e2e-app': './src/e2e/app.js',
+    'e2e-devtools': './src/e2e/devtools.js',
     'multi-left': './src/multi/left.js',
     'multi-devtools': './src/multi/devtools.js',
     'multi-right': './src/multi/right.js',

From ceee524a8f45b97c5fa9861aec3f36161495d2e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sema@fb.com>
Date: Fri, 17 Dec 2021 09:40:39 -0800
Subject: [PATCH 1083/1603] Remove unnecessary clearContainer call (#22979)

This was added when we added error recovery for hydration errors. However,
when the fix up pass happens later on, it'll still call clearContainer in
the commit phase. So this call is unnecessary.
---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 --
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f0f5eab4a99f..740ed6dca40a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -86,7 +86,6 @@ import {
   cancelTimeout,
   noTimeout,
   afterActiveInstanceBlur,
-  clearContainer,
   getCurrentEventPriority,
   supportsMicrotasks,
   errorHydratingContainer,
@@ -885,7 +884,6 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
-    clearContainer(root.containerInfo);
   }
 
   let exitStatus;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 353de50e1585..673da7908c28 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -86,7 +86,6 @@ import {
   cancelTimeout,
   noTimeout,
   afterActiveInstanceBlur,
-  clearContainer,
   getCurrentEventPriority,
   supportsMicrotasks,
   errorHydratingContainer,
@@ -885,7 +884,6 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
-    clearContainer(root.containerInfo);
   }
 
   let exitStatus;

From a4ead704ba1df8718d4866a23ac25e78f8ea901a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 21 Dec 2021 11:58:04 -0500
Subject: [PATCH 1084/1603] Use ReactDOM Test Selector API in DevTools e2e
 tests (#22978)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Builds on top of the existing Playwright tests to plug in the test selector API: https://gist.github.com/bvaughn/d3c8b8842faf2ac2439bb11773a19cec

My goals in doing this are to...
1. Experiment with the new API to see what works and what doesn't.
2. Add some test selector attributes (and remove DOM-structure based selectors).
3. Focus the tests on DevTools itself (rather than the test app).

I also took this opportunity to add a few new test cases– like named hooks, editable props, component search, and profiling- just to play around more with the Playwright API.

Relates to issue #22646
---
 .../__tests__/__e2e__/components.test.js      | 206 ++++++++++++++++++
 .../__tests__/__e2e__/devtools-utils.js       |  83 +++++++
 .../__e2e__/inspecting-props.test.js          |  52 -----
 .../__tests__/__e2e__/list-app-utils.js       |  25 +++
 .../__tests__/__e2e__/profiler.test.js        | 104 +++++++++
 .../playwright.config.js                      |   4 +-
 .../src/devtools/views/Button.js              |   7 +-
 .../views/Components/ComponentSearchInput.js  |   1 +
 .../devtools/views/Components/EditableName.js |   1 +
 .../views/Components/EditableValue.js         |   1 +
 .../src/devtools/views/Components/Element.js  |   5 +-
 .../views/Components/InspectedElement.js      |   2 +-
 .../Components/InspectedElementHooksTree.js   |   5 +-
 .../Components/InspectedElementPropsTree.js   |   4 +-
 .../views/Components/InspectedElementView.js  |   6 +-
 .../NativeStyleEditor/AutoSizeInput.js        |   3 +
 .../devtools/views/Profiler/RecordToggle.js   |   1 +
 .../views/Profiler/SnapshotSelector.js        |   9 +-
 .../src/devtools/views/SearchInput.js         |  12 +-
 .../src/devtools/views/TabBar.js              |   1 +
 .../src/devtools/views/Toggle.js              |   3 +
 packages/react-devtools-shell/src/e2e/app.js  |  17 +-
 .../src/e2e/apps/ListApp.js                   |  48 ++++
 .../react-devtools-shell/src/e2e/devtools.js  |  23 +-
 24 files changed, 549 insertions(+), 74 deletions(-)
 create mode 100644 packages/react-devtools-inline/__tests__/__e2e__/components.test.js
 create mode 100644 packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
 delete mode 100644 packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
 create mode 100644 packages/react-devtools-inline/__tests__/__e2e__/list-app-utils.js
 create mode 100644 packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
 create mode 100644 packages/react-devtools-shell/src/e2e/apps/ListApp.js

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 000000000000..20a721beec6a
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
@@ -0,0 +1,206 @@
+/** @flow */
+
+'use strict';
+
+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('Components', () => {
+  let page;
+
+  test.beforeEach(async ({browser}) => {
+    page = await browser.newPage();
+
+    await page.goto('http://localhost:8080/e2e.html', {
+      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\nApp');
+
+    // Then read the inspected values.
+    const [propName, propValue, sourceText] = await page.evaluate(() => {
+      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      const editableName = findAllNodes(container, [
+        createTestNameSelector('InspectedElementPropsTree'),
+        createTestNameSelector('EditableName'),
+      ])[0];
+      const editableValue = findAllNodes(container, [
+        createTestNameSelector('InspectedElementPropsTree'),
+        createTestNameSelector('EditableValue'),
+      ])[0];
+      const source = findAllNodes(container, [
+        createTestNameSelector('InspectedElementView-Source'),
+      ])[0];
+
+      return [editableName.value, editableValue.value, source.innerText];
+    });
+
+    expect(propName).toBe('label');
+    expect(propValue).toBe('"one"');
+    expect(sourceText).toContain('ListApp.js');
+  });
+
+  test('should allow props to be edited', async () => {
+    // Select the first list item in DevTools.
+    await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
+
+    // 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('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 () => {
+    // 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 getComponentSearchResultsCount() {
+      return await page.evaluate(() => {
+        const {
+          createTestNameSelector,
+          findAllNodes,
+        } = window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
+
+        const element = findAllNodes(container, [
+          createTestNameSelector('ComponentSearchInput-ResultsCount'),
+        ])[0];
+        return element.innerText;
+      });
+    }
+
+    await page.evaluate(() => {
+      const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
+      const container = document.getElementById('devtools');
+
+      focusWithin(container, [
+        createTestNameSelector('ComponentSearchInput-Input'),
+      ]);
+    });
+
+    page.keyboard.insertText('List');
+    let count = await getComponentSearchResultsCount();
+    expect(count).toBe('1 | 4');
+
+    page.keyboard.insertText('Item');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('1 | 3');
+
+    page.keyboard.press('Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('2 | 3');
+
+    page.keyboard.press('Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('3 | 3');
+
+    page.keyboard.press('Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('1 | 3');
+
+    page.keyboard.press('Shift+Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('3 | 3');
+
+    page.keyboard.press('Shift+Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('2 | 3');
+
+    page.keyboard.press('Shift+Enter');
+    count = await getComponentSearchResultsCount();
+    expect(count).toBe('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 000000000000..25b96c7c4bfd
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/devtools-utils.js
@@ -0,0 +1,83 @@
+'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) {
+  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.click();
+  }, 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];
+
+        return (
+          title &&
+          title.innerText.includes(titleText) &&
+          ownersList &&
+          ownersList.innerText.includes(ownersListText)
+        );
+      },
+      {titleText: displayName, ownersListText: waitForOwnersText}
+    );
+  }
+}
+
+module.exports = {
+  clickButton,
+  getElementCount,
+  selectElement,
+};
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js b/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
deleted file mode 100644
index 5b6390c8a93f..000000000000
--- a/packages/react-devtools-inline/__tests__/__e2e__/inspecting-props.test.js
+++ /dev/null
@@ -1,52 +0,0 @@
-'use strict';
-
-const {test, expect} = require('@playwright/test');
-const config = require('../../playwright.config');
-test.use(config);
-
-test.describe('Testing Todo-List App', () => {
-  let page, frameElementHandle, frame;
-  test.beforeAll(async ({browser}) => {
-    page = await browser.newPage();
-    await page.goto('http://localhost:8080/e2e.html', {
-      waitUntil: 'domcontentloaded',
-    });
-    await page.waitForSelector('iframe#iframe');
-    frameElementHandle = await page.$('#iframe');
-    frame = await frameElementHandle.contentFrame();
-  });
-
-  test('The Todo List should contain 3 items by default', async () => {
-    const list = frame.locator('.listitem');
-    await expect(list).toHaveCount(3);
-  });
-
-  test('Add another item Fourth to list', async () => {
-    await frame.type('.input', 'Fourth');
-    await frame.click('button.iconbutton');
-    const listItems = await frame.locator('.label');
-    await expect(listItems).toHaveText(['First', 'Second', 'Third', 'Fourth']);
-  });
-
-  test('Inspecting list elements with devtools', async () => {
-    // Component props are used as string in devtools.
-    const listItemsProps = [
-      '',
-      '{id: 1, isComplete: true, text: "First"}',
-      '{id: 2, isComplete: true, text: "Second"}',
-      '{id: 3, isComplete: false, text: "Third"}',
-      '{id: 4, isComplete: false, text: "Fourth"}',
-    ];
-    const countOfItems = await frame.$$eval('.listitem', el => el.length);
-    // For every item in list click on devtools inspect icon
-    // click on the list item to quickly navigate to the list item component in devtools
-    // comparing displayed props with the array of props.
-    for (let i = 1; i <= countOfItems; ++i) {
-      await page.click('[class^=ToggleContent]', {delay: 100});
-      await frame.click(`.listitem:nth-child(${i})`, {delay: 50});
-      await page.waitForSelector('span[class^=Value]');
-      const text = await page.innerText('span[class^=Value]');
-      await expect(text).toEqual(listItemsProps[i]);
-    }
-  });
-});
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 000000000000..1ac4af2b3d97
--- /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 000000000000..c5ea7ee1a44e
--- /dev/null
+++ b/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
@@ -0,0 +1,104 @@
+/** @flow */
+
+'use strict';
+
+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('http://localhost:8080/e2e.html', {
+      waitUntil: 'domcontentloaded',
+    });
+
+    await page.waitForSelector('#iframe');
+
+    await devToolsUtils.clickButton(page, 'TabBarButton-profiler');
+  });
+
+  test('should record renders and commits when active', async () => {
+    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 clickButtonAndVerifySnapshotSelecetorText(
+      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 clickButtonAndVerifySnapshotSelecetorText(
+      'SnapshotSelector-NextButton',
+      '2 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelecetorText(
+      'SnapshotSelector-NextButton',
+      '3 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelecetorText(
+      'SnapshotSelector-NextButton',
+      '1 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelecetorText(
+      'SnapshotSelector-PreviousButton',
+      '3 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelecetorText(
+      'SnapshotSelector-PreviousButton',
+      '2 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelecetorText(
+      'SnapshotSelector-PreviousButton',
+      '1 / 3'
+    );
+    await clickButtonAndVerifySnapshotSelecetorText(
+      'SnapshotSelector-PreviousButton',
+      '3 / 3'
+    );
+  });
+});
diff --git a/packages/react-devtools-inline/playwright.config.js b/packages/react-devtools-inline/playwright.config.js
index 58c951723270..8d65b94fd486 100644
--- a/packages/react-devtools-inline/playwright.config.js
+++ b/packages/react-devtools-inline/playwright.config.js
@@ -1,8 +1,10 @@
 const config = {
   use: {
-    headless: false,
+    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,
     },
   },
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index aa006cbbc722..82400bb8982a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -15,6 +15,7 @@ import Tooltip from './Components/reach-ui/tooltip';
 type Props = {
   children: React$Node,
   className?: string,
+  testName?: ?string,
   title: React$Node,
   ...
 };
@@ -22,11 +23,15 @@ type Props = {
 export default function Button({
   children,
   className = '',
+  testName,
   title,
   ...rest
 }: Props) {
   let button = (
-    <button className={`${styles.Button} ${className}`} {...rest}>
+    <button
+      className={`${styles.Button} ${className}`}
+      data-testname={testName}
+      {...rest}>
       <span className={`${styles.ButtonContent} ${className}`} tabIndex={-1}>
         {children}
       </span>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
index 3180a7ebb070..a43c4661b3f5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -33,6 +33,7 @@ export default function ComponentSearchInput(props: Props) {
       searchIndex={searchIndex}
       searchResultsCount={searchResults.length}
       searchText={searchText}
+      testName="ComponentSearchInput"
     />
   );
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
index 25cf05ff350e..a8859cd4adc2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
@@ -93,6 +93,7 @@ export default function EditableName({
       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.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
index ac3cc7ac86c7..82afe03c2ba4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -94,6 +94,7 @@ export default function EditableValue({
       <input
         autoComplete="new-password"
         className={`${isValid ? styles.Input : styles.Invalid} ${className}`}
+        data-testname="EditableValue"
         onBlur={applyChanges}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index d7260cf8eeef..206dabbab4d4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -74,7 +74,7 @@ export default function Element({data, index, style}: Props) {
     }
   };
 
-  const handleMouseDown = ({metaKey}) => {
+  const handleClick = ({metaKey}) => {
     if (id !== null) {
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
@@ -132,9 +132,10 @@ export default function Element({data, index, style}: Props) {
       className={className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      onMouseDown={handleMouseDown}
+      onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       style={style}
+      data-testname="ComponentTreeListItem"
       data-depth={depth}>
       {/* This wrapper is used by Tree for measurement purposes. */}
       <div
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 62e14a7ca0a1..9752f752f8dd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -252,7 +252,7 @@ export default function InspectedElementWrapper(_: Props) {
 
   return (
     <div className={styles.InspectedElement}>
-      <div className={styles.TitleRow}>
+      <div className={styles.TitleRow} data-testname="InspectedElement-Title">
         {strictModeBadge}
 
         {element.key && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index fb80b0152968..83450dc616bb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -85,7 +85,9 @@ export function InspectedElementHooksTree({
     return null;
   } else {
     return (
-      <div className={styles.HooksTreeView}>
+      <div
+        className={styles.HooksTreeView}
+        data-testname="InspectedElementHooksTree">
         <div className={styles.HeaderRow}>
           <div className={styles.Header}>hooks</div>
           {enableNamedHooksFeature &&
@@ -96,6 +98,7 @@ export function InspectedElementHooksTree({
                 isChecked={parseHookNamesOptimistic}
                 isDisabled={parseHookNamesOptimistic || hookParsingFailed}
                 onChange={handleChange}
+                testName="LoadHookNamesButton"
                 title={toggleTitle}>
                 <ButtonIcon type="parse-hook-names" />
               </Toggle>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index 1673b5f9b192..eeff44d645ea 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -63,7 +63,9 @@ export default function InspectedElementPropsTree({
   const handleCopy = () => copy(serializeDataForCopy(((props: any): Object)));
 
   return (
-    <div className={styles.InspectedElementTree}>
+    <div
+      className={styles.InspectedElementTree}
+      data-testname="InspectedElementPropsTree">
       <div className={styles.HeaderRow}>
         <div className={styles.Header}>props</div>
         {!isEmpty && (
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index ad1272b722cb..37fe664d40e7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -145,7 +145,9 @@ export default function InspectedElementView({
         <NativeStyleEditor />
 
         {showRenderedBy && (
-          <div className={styles.Owners}>
+          <div
+            className={styles.Owners}
+            data-testname="InspectedElementView-Owners">
             <div className={styles.OwnersHeader}>rendered by</div>
             {showOwnersList &&
               ((owners: any): Array<SerializedElement>).map(owner => (
@@ -264,7 +266,7 @@ type SourceProps = {|
 function Source({fileName, lineNumber}: SourceProps) {
   const handleCopy = () => copy(`${fileName}:${lineNumber}`);
   return (
-    <div className={styles.Source}>
+    <div className={styles.Source} data-testname="InspectedElementView-Source">
       <div className={styles.SourceHeaderRow}>
         <div className={styles.SourceHeader}>source</div>
         <Button onClick={handleCopy} title="Copy to clipboard">
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
index 8b1c29d96ab0..48c6f304275c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -14,6 +14,7 @@ type Props = {
   className?: string,
   onFocus?: (event: FocusEvent) => void,
   placeholder?: string,
+  testName?: ?string,
   value: any,
   ...
 };
@@ -22,6 +23,7 @@ export default function AutoSizeInput({
   className,
   onFocus,
   placeholder = '',
+  testName,
   value,
   ...rest
 }: Props) {
@@ -42,6 +44,7 @@ export default function AutoSizeInput({
   return (
     <input
       className={[styles.Input, className].join(' ')}
+      data-testname={testName}
       onFocus={onFocusWrapper}
       placeholder={placeholder}
       style={{
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
index 8efe9eae8e4a..4c6aa5cf7d44 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
@@ -36,6 +36,7 @@ export default function RecordToggle({disabled}: Props) {
       className={className}
       disabled={disabled}
       onClick={isProfiling ? stopProfiling : startProfiling}
+      testName="ProfilerToggleButton"
       title={isProfiling ? 'Stop profiling' : 'Start profiling'}>
       <ButtonIcon type="record" />
     </Button>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
index 42510f08761a..8459d8571be0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -122,6 +122,7 @@ export default function SnapshotSelector(_: Props) {
     const input = (
       <input
         className={styles.Input}
+        data-testname="SnapshotSelector-Input"
         type="text"
         inputMode="numeric"
         pattern="[0-9]*"
@@ -176,9 +177,14 @@ export default function SnapshotSelector(_: Props) {
 
   return (
     <Fragment>
-      <span className={styles.IndexLabel}>{label}</span>
+      <span
+        className={styles.IndexLabel}
+        data-testname="SnapshotSelector-Label">
+        {label}
+      </span>
       <Button
         className={styles.Button}
+        data-testname="SnapshotSelector-PreviousButton"
         disabled={numFilteredCommits === 0}
         onClick={viewPrevCommit}
         title="Select previous commit">
@@ -212,6 +218,7 @@ export default function SnapshotSelector(_: Props) {
       </div>
       <Button
         className={styles.Button}
+        data-testname="SnapshotSelector-NextButton"
         disabled={numFilteredCommits === 0}
         onClick={viewNextCommit}
         title="Select next commit">
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
index 1ef69ba72669..d2214f59728e 100644
--- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -23,6 +23,7 @@ type Props = {|
   searchIndex: number,
   searchResultsCount: number,
   searchText: string,
+  testName?: ?string,
 |};
 
 export default function SearchInput({
@@ -33,6 +34,7 @@ export default function SearchInput({
   searchIndex,
   searchResultsCount,
   searchText,
+  testName,
 }: Props) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
@@ -78,9 +80,10 @@ export default function SearchInput({
   }, []);
 
   return (
-    <div className={styles.SearchInput}>
+    <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}
@@ -90,12 +93,15 @@ export default function SearchInput({
       />
       {!!searchText && (
         <React.Fragment>
-          <span className={styles.IndexLabel}>
+          <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}
             className={styles.IconButton}
             disabled={!searchText}
             onClick={goToPreviousResult}
@@ -108,6 +114,7 @@ export default function SearchInput({
             <ButtonIcon type="up" />
           </Button>
           <Button
+            data-testname={testName ? `${testName}-NextButton` : undefined}
             className={styles.IconButton}
             disabled={!searchText}
             onClick={goToNextResult}
@@ -119,6 +126,7 @@ export default function SearchInput({
             <ButtonIcon type="down" />
           </Button>
           <Button
+            data-testname={testName ? `${testName}-ResetButton` : undefined}
             className={styles.IconButton}
             disabled={!searchText}
             onClick={resetSearch}
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index 32bd32827f14..5c9f3f61bc72 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -102,6 +102,7 @@ export default function TabBar({
               disabled ? styles.TabDisabled : styles.Tab,
               !disabled && currentTab === id ? styles.TabCurrent : '',
             ].join(' ')}
+            data-testname={`TabBarButton-${id}`}
             key={id}
             onKeyDown={handleKeyDown}
             onMouseDown={() => selectTab(id)}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
index 20e78fee772a..f90367c3cc0b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -19,6 +19,7 @@ type Props = {
   isChecked: boolean,
   isDisabled?: boolean,
   onChange: (isChecked: boolean) => void,
+  testName?: ?string,
   title?: string,
   ...
 };
@@ -29,6 +30,7 @@ export default function Toggle({
   isDisabled = false,
   isChecked,
   onChange,
+  testName,
   title,
 }: Props) {
   let defaultClassName;
@@ -48,6 +50,7 @@ export default function Toggle({
   let toggle = (
     <button
       className={`${defaultClassName} ${className}`}
+      data-testname={testName}
       disabled={isDisabled}
       onClick={handleClick}>
       <span className={styles.ToggleContent} tabIndex={-1}>
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
index 97ede9b56635..a3885e933136 100644
--- a/packages/react-devtools-shell/src/e2e/app.js
+++ b/packages/react-devtools-shell/src/e2e/app.js
@@ -2,12 +2,8 @@
 
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
-import {createElement} from 'react';
-import {
-  // $FlowFixMe Flow does not yet know about createRoot()
-  createRoot,
-} from 'react-dom';
-import ToDoList from '../app/ToDoList';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 
 const container = document.createElement('div');
 
@@ -15,6 +11,11 @@ const container = document.createElement('div');
 
 // TODO We may want to parameterize this app
 // so that it can load things other than just ToDoList.
+const App = require('./apps/ListApp').default;
 
-const root = createRoot(container);
-root.render(createElement(ToDoList));
+// $FlowFixMe Flow doesn't know about createRoot() yet.
+const root = ReactDOM.createRoot(container);
+root.render(<App />);
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+window.parent.REACT_DOM_APP = ReactDOM;
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 000000000000..0e2c2ef8d4cf
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e/apps/ListApp.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {useRef, useState} from 'react';
+
+export default function App() {
+  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>
+    </>
+  );
+}
+
+function ListItem({label}) {
+  return <li data-testname="ListItem">{label}</li>;
+}
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
index 68717ca1e921..5665be4c5f13 100644
--- a/packages/react-devtools-shell/src/e2e/devtools.js
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -1,11 +1,21 @@
 import * as React from 'react';
-import {createRoot} from 'react-dom';
+import * as ReactDOM from 'react-dom';
 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.
+// $FlowFixMe
+__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;
@@ -22,7 +32,13 @@ function init(appIframe, devtoolsContainer, appSource) {
   const DevTools = createDevTools(contentWindow);
 
   inject(contentDocument, appSource, () => {
-    createRoot(devtoolsContainer).render(<DevTools />);
+    // $FlowFixMe Flow doesn't know about createRoot() yet.
+    ReactDOM.createRoot(devtoolsContainer).render(
+      <DevTools
+        hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
+        showTabBar={true}
+      />,
+    );
   });
 
   activateBackend(contentWindow);
@@ -32,3 +48,6 @@ 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 = ReactDOM;

From bd0a5dd6826ff7b3ab889ed0bd55dacc2f69a47e Mon Sep 17 00:00:00 2001
From: Vitalie <45145592+vitaliemiron@users.noreply.github.com>
Date: Tue, 21 Dec 2021 19:27:59 +0200
Subject: [PATCH 1085/1603] #22988 - Fix Bug: @license header in React 18
 bundles contains vundefined (#23004)

* Fix Bug: @license header in React 18 bundles contains vundefined
* Remove React version from the header comment
---
 scripts/rollup/wrappers.js | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/scripts/rollup/wrappers.js b/scripts/rollup/wrappers.js
index 3178c1cf482a..44d83e4f58ee 100644
--- a/scripts/rollup/wrappers.js
+++ b/scripts/rollup/wrappers.js
@@ -3,7 +3,6 @@
 const {resolve} = require('path');
 const {readFileSync} = require('fs');
 const {bundleTypes, moduleTypes} = require('./bundles');
-const reactVersion = require('../../package.json').version;
 
 const {
   NODE_ES2015,
@@ -54,7 +53,8 @@ const license = ` * Copyright (c) Facebook, Inc. and its affiliates.
 const wrappers = {
   /***************** NODE_ES2015 *****************/
   [NODE_ES2015](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -67,7 +67,8 @@ ${source}`;
 
   /***************** NODE_ESM *****************/
   [NODE_ESM](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+* @license React
  * ${filename}
  *
 ${license}
@@ -78,7 +79,8 @@ ${source}`;
 
   /***************** UMD_DEV *****************/
   [UMD_DEV](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -88,7 +90,8 @@ ${source}`;
 
   /***************** UMD_PROD *****************/
   [UMD_PROD](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -98,7 +101,8 @@ ${license}
 
   /***************** UMD_PROFILING *****************/
   [UMD_PROFILING](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -108,7 +112,8 @@ ${license}
 
   /***************** NODE_DEV *****************/
   [NODE_DEV](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -125,7 +130,8 @@ ${source}
 
   /***************** NODE_PROD *****************/
   [NODE_PROD](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -135,7 +141,8 @@ ${source}`;
 
   /***************** NODE_PROFILING *****************/
   [NODE_PROFILING](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -294,7 +301,8 @@ ${source}`;
 const reconcilerWrappers = {
   /***************** NODE_DEV (reconciler only) *****************/
   [NODE_DEV](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -313,7 +321,8 @@ ${source}
 
   /***************** NODE_PROD (reconciler only) *****************/
   [NODE_PROD](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}
@@ -327,7 +336,8 @@ ${source}
 
   /***************** NODE_PROFILING (reconciler only) *****************/
   [NODE_PROFILING](source, globalName, filename, moduleType) {
-    return `/** @license React v${reactVersion}
+    return `/**
+ * @license React
  * ${filename}
  *
 ${license}

From bcd24a6706cd802e49e9c0a509a42893ddceca7b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 21 Dec 2021 15:26:42 -0500
Subject: [PATCH 1086/1603] DevTools: Only show StrictMode badge on root
 elements (#23012)

* DevTools: Only show StrictMode badge on root elements

Showing an inline non-compliance badge for every element in the tree is noisy. This commit changes it so that we only show inline icons for root elements (although we continue to show an icon for inspected elements regardless).
---
 .../src/devtools/views/Components/Element.js                | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 206dabbab4d4..ed6f00055bc1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -118,6 +118,10 @@ export default function Element({data, index, style}: Props) {
     type,
   } = ((element: any): ElementType);
 
+  // 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
@@ -194,7 +198,7 @@ export default function Element({data, index, style}: Props) {
             }
           />
         )}
-        {isStrictModeNonCompliant && (
+        {showStrictModeBadge && (
           <Icon
             className={
               isSelected && treeFocused

From a8e9bbe0fe19266e3061b266aabc0269f332a03c Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Thu, 23 Dec 2021 02:28:06 +0530
Subject: [PATCH 1087/1603] Made the variable name more meaningful (#23017)

---
 .../react-devtools-shared/src/__tests__/treeContext-test.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/treeContext-test.js b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
index 36f14d8c7d66..c1ba05a32f97 100644
--- a/packages/react-devtools-shared/src/__tests__/treeContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/treeContext-test.js
@@ -2180,9 +2180,9 @@ describe('TreeListContext', () => {
     it('should update correctly when elements are re-ordered', () => {
       const container = document.createElement('div');
       function ErrorOnce() {
-        const didErroRef = React.useRef(false);
-        if (!didErroRef.current) {
-          didErroRef.current = true;
+        const didErrorRef = React.useRef(false);
+        if (!didErrorRef.current) {
+          didErrorRef.current = true;
           console.error('test-only:one-time-error');
         }
         return null;

From 20212349add45c81fe5ab4760214eabc3d91077f Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Thu, 23 Dec 2021 19:05:54 +0530
Subject: [PATCH 1088/1603] Fix variable name (#23021)

---
 .../__tests__/__e2e__/profiler.test.js           | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js b/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
index c5ea7ee1a44e..13612d4eb3ad 100644
--- a/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
+++ b/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
@@ -41,7 +41,7 @@ test.describe('Profiler', () => {
       });
     }
 
-    async function clickButtonAndVerifySnapshotSelecetorText(
+    async function clickButtonAndVerifySnapshotSelectorText(
       buttonTagName,
       expectedText
     ) {
@@ -72,31 +72,31 @@ test.describe('Profiler', () => {
     const text = await getSnapshotSelectorText();
     expect(text).toBe('1 / 3');
 
-    await clickButtonAndVerifySnapshotSelecetorText(
+    await clickButtonAndVerifySnapshotSelectorText(
       'SnapshotSelector-NextButton',
       '2 / 3'
     );
-    await clickButtonAndVerifySnapshotSelecetorText(
+    await clickButtonAndVerifySnapshotSelectorText(
       'SnapshotSelector-NextButton',
       '3 / 3'
     );
-    await clickButtonAndVerifySnapshotSelecetorText(
+    await clickButtonAndVerifySnapshotSelectorText(
       'SnapshotSelector-NextButton',
       '1 / 3'
     );
-    await clickButtonAndVerifySnapshotSelecetorText(
+    await clickButtonAndVerifySnapshotSelectorText(
       'SnapshotSelector-PreviousButton',
       '3 / 3'
     );
-    await clickButtonAndVerifySnapshotSelecetorText(
+    await clickButtonAndVerifySnapshotSelectorText(
       'SnapshotSelector-PreviousButton',
       '2 / 3'
     );
-    await clickButtonAndVerifySnapshotSelecetorText(
+    await clickButtonAndVerifySnapshotSelectorText(
       'SnapshotSelector-PreviousButton',
       '1 / 3'
     );
-    await clickButtonAndVerifySnapshotSelecetorText(
+    await clickButtonAndVerifySnapshotSelectorText(
       'SnapshotSelector-PreviousButton',
       '3 / 3'
     );

From 3dc41d8a2590768a6ac906cd1f4c11ca00417eee Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Thu, 23 Dec 2021 12:08:56 -0600
Subject: [PATCH 1089/1603] fix: parseExportNamesInto specifiers typo (#22537)

---
 .../src/ReactFlightWebpackNodeLoader.js                   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index db618f0eb17e..9652f03405af 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -210,10 +210,10 @@ async function parseExportNamesInto(
             addExportNames(names, node.declaration.id);
           }
         }
-        if (node.specificers) {
-          const specificers = node.specificers;
-          for (let j = 0; j < specificers.length; j++) {
-            addExportNames(names, specificers[j].exported);
+        if (node.specifiers) {
+          const specifiers = node.specifiers;
+          for (let j = 0; j < specifiers.length; j++) {
+            addExportNames(names, specifiers[j].exported);
           }
         }
         continue;

From 9724e180045806480d7ef2a50e6a9d70fea98252 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 4 Jan 2022 10:28:03 -0500
Subject: [PATCH 1090/1603] Run DevTools e2e tests on Circle CI (#23019)

---
 .circleci/config.yml                       |  25 ++++
 scripts/circleci/run_devtools_e2e_tests.js | 165 +++++++++++++++++++++
 2 files changed, 190 insertions(+)
 create mode 100755 scripts/circleci/run_devtools_e2e_tests.js

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 86f54450e51a..a9905a53b7a9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -200,6 +200,28 @@ jobs:
       - store_artifacts:
           path: ./build/devtools.tgz
 
+  run_devtools_e2e_tests:
+    docker: *docker
+    environment: *environment
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Install Packages
+          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run:
+          name: Playwright install deps
+          command: |
+            npx playwright install
+            sudo npx playwright install-deps
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: ./scripts/circleci/run_devtools_e2e_tests.js
+
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -452,6 +474,9 @@ workflows:
       - build_devtools_and_process_artifacts:
           requires:
             - yarn_build_combined
+      - run_devtools_e2e_tests:
+          requires:
+            - build_devtools_and_process_artifacts
 
   fuzz_tests:
     unless: << pipeline.parameters.prerelease_commit_sha >>
diff --git a/scripts/circleci/run_devtools_e2e_tests.js b/scripts/circleci/run_devtools_e2e_tests.js
new file mode 100755
index 000000000000..fbd8baf3c64c
--- /dev/null
+++ b/scripts/circleci/run_devtools_e2e_tests.js
@@ -0,0 +1,165 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const {spawn} = require('child_process');
+const {join} = require('path');
+
+const ROOT_PATH = join(__dirname, '..', '..');
+
+const inlinePackagePath = join(ROOT_PATH, 'packages', 'react-devtools-inline');
+const shellPackagePath = join(ROOT_PATH, 'packages', 'react-devtools-shell');
+
+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')) {
+      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);
+  }, 30000);
+
+  logBright('Starting testing shell server');
+
+  serverProcess = spawn('yarn', ['start'], {cwd: shellPackagePath});
+  serverProcess.stdout.on('data', data => {
+    if (`${data}`.includes('Compiled successfully.')) {
+      logBright('Testing shell server running');
+
+      clearTimeout(timeoutID);
+
+      runEndToEndTests();
+    }
+  });
+  serverProcess.stderr.on('data', data => {
+    if (`${data}`.includes('EADDRINUSE')) {
+      // Something is occuprying 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');
+
+  testProcess = spawn('yarn', ['test:e2e'], {cwd: inlinePackagePath});
+  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();

From 42c30e8b122841d7fe72e28e36848a6de1363b0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Borja=20Paz=20Rodr=C3=ADguez?= <borjapazr@gmail.com>
Date: Tue, 4 Jan 2022 16:30:07 +0100
Subject: [PATCH 1091/1603] Correct typing errors detected in several files
 (#22965)

* Correct spelling errors in several files
* Correct typos in devtools-shared package files
---
 .../src/devtools/views/Profiler/Profiler.css         |  4 ++--
 .../src/devtools/views/Profiler/Profiler.js          |  2 +-
 .../src/hooks/__tests__/__source__/README.md         |  2 +-
 packages/react-devtools-shared/src/hooks/astUtils.js | 12 ++++++------
 .../src/inspectedElementMutableSource.js             |  2 +-
 packages/react-dom/src/client/ReactDOMLegacy.js      |  2 +-
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
index 12089b71fdc6..45f3352cec6a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -116,8 +116,8 @@
   color: var(--color-button);
 }
 
-.TimlineSearchInputContainer {
+.TimelineSearchInputContainer {
   flex: 1 1;
   display: flex;
   align-items: center;
-}
\ 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
index fbe8c4ac20c0..8f5de6237e86 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -125,7 +125,7 @@ function Profiler(_: {||}) {
             {!isLegacyProfilerSelected && (
               <div
                 ref={searchInputContainerRef}
-                className={styles.TimlineSearchInputContainer}
+                className={styles.TimelineSearchInputContainer}
               />
             )}
             <SettingsModalContextToggle />
diff --git a/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md b/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md
index 3b95b09f7436..8da2586fb5c6 100644
--- a/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md
+++ b/packages/react-devtools-shared/src/hooks/__tests__/__source__/README.md
@@ -1 +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 parnet `__tests__` folder. To regenerate these compiled files, run `yarn update-mock-source-maps` in the `react-devtools-extensions` directory.
\ No newline at end of file
+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/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
index 2fddf027e0ff..27db408c0500 100644
--- a/packages/react-devtools-shared/src/hooks/astUtils.js
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -147,8 +147,8 @@ export function getHookName(
         originalSourceLineNumber,
       );
 
-      const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
-      return nodeLocationCheck && hookDeclaractionCheck;
+      const hookDeclarationCheck = isConfirmedHookDeclaration(node);
+      return nodeLocationCheck && hookDeclarationCheck;
     });
 
     if (matchingNodes.length === 1) {
@@ -162,8 +162,8 @@ export function getHookName(
         originalSourceColumnNumber,
       );
 
-      const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
-      return nodeLocationCheck && hookDeclaractionCheck;
+      const hookDeclarationCheck = isConfirmedHookDeclaration(node);
+      return nodeLocationCheck && hookDeclarationCheck;
     });
   }
 
@@ -398,7 +398,7 @@ export function getHookNamesMappingFromAST(
           // 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 declartions derived from
+          // 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)) {
@@ -455,7 +455,7 @@ export function getHookNamesMappingFromAST(
                 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 assinging the value of the first member,
+                  // name if we're assigning the value of the first member,
                   // which is handled by `filterMemberWithHookVariableName`.
                   // E.g.
                   //    const countState = useState(0);
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index 5cb5370d1c21..b5ea32b96082 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -32,7 +32,7 @@ import type {
 // 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 thid case, the frontend cache should reuse the previous (cached) value.
+// 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).
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index e3def8459e75..05ae0d5ce4f4 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -121,7 +121,7 @@ function legacyCreateRootFromDOMContainer(
     null, // hydrationCallbacks
     false, // isStrictMode
     false, // concurrentUpdatesByDefaultOverride,
-    '', // identiferPrefix
+    '', // identifierPrefix
   );
   markContainerAsRoot(root.current, container);
 

From fe419346da0de40858d5a5c5992c29a1e0b79bb5 Mon Sep 17 00:00:00 2001
From: Andrew Covenant <andrei.fagadau@gmail.com>
Date: Wed, 5 Jan 2022 18:45:45 +0200
Subject: [PATCH 1092/1603] Console message fixed for devtools (#23067)

---
 scripts/circleci/run_devtools_e2e_tests.js | 2 +-
 scripts/devtools/build-and-test.js         | 2 +-
 scripts/flow/runFlow.js                    | 2 +-
 scripts/jest/jest-cli.js                   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/scripts/circleci/run_devtools_e2e_tests.js b/scripts/circleci/run_devtools_e2e_tests.js
index fbd8baf3c64c..2c05db087e03 100755
--- a/scripts/circleci/run_devtools_e2e_tests.js
+++ b/scripts/circleci/run_devtools_e2e_tests.js
@@ -86,7 +86,7 @@ function runTestShell() {
   });
   serverProcess.stderr.on('data', data => {
     if (`${data}`.includes('EADDRINUSE')) {
-      // Something is occuprying this port;
+      // 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:');
diff --git a/scripts/devtools/build-and-test.js b/scripts/devtools/build-and-test.js
index cfa7a7cfd1d6..74df66c5d6d2 100755
--- a/scripts/devtools/build-and-test.js
+++ b/scripts/devtools/build-and-test.js
@@ -210,7 +210,7 @@ async function downloadLatestReactBuild() {
   const buildID = match[1];
 
   console.log('');
-  console.log(`Downloaded artiacts for CI build ${chalk.bold(buildID)}.`);
+  console.log(`Downloaded artifacts for CI build ${chalk.bold(buildID)}.`);
 
   return buildID;
 }
diff --git a/scripts/flow/runFlow.js b/scripts/flow/runFlow.js
index c1917abf967d..07b0717e6f37 100644
--- a/scripts/flow/runFlow.js
+++ b/scripts/flow/runFlow.js
@@ -52,7 +52,7 @@ async function runFlow(renderer, args) {
         fs.unlinkSync(destPath);
         fs.copyFileSync(srcPath, destPath);
         // Set the mtime of the copied file to be same as the original file,
-        // so that the ahove check works.
+        // so that the above check works.
         fs.utimesSync(destPath, srcStat.atime, srcStat.mtime);
       }
     } else {
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index 4d523c642954..e1a2d9b4285a 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -297,7 +297,7 @@ function getEnvars() {
       ? 'experimental'
       : 'stable',
 
-    // Pass this flag through to the confit environment
+    // Pass this flag through to the config environment
     // so the base config can conditionally load the console setup file.
     compactConsole: argv.compactConsole,
   };

From fe905f152f1c9740279e31ce4478a5b8ca75172e Mon Sep 17 00:00:00 2001
From: Jack Works <jackworks@protonmail.com>
Date: Sat, 8 Jan 2022 04:59:47 +0800
Subject: [PATCH 1093/1603] Update package.json (#22954)

---
 packages/react/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 0ab41de16ca5..fa8d0c3fbd0c 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -11,7 +11,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/",
     "umd/",
@@ -29,7 +28,7 @@
       "react-server": "./unstable-shared-subset.js",
       "default": "./index.js"
     },
-    "./build-info.json": "./build-info.json",
+    "./package.json": "./package.json",
     "./jsx-runtime": "./jsx-runtime.js",
     "./jsx-dev-runtime": "./jsx-dev-runtime.js",
     "./": "./"

From 811634762a389bce81bdc145f84bdf247910b8dd Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 10 Jan 2022 15:32:40 -0500
Subject: [PATCH 1094/1603] add enableTransitionTracing feature flag (#23079)

This PR adds the enableTransitionTracing feature flag
---
 packages/shared/ReactFeatureFlags.js                            | 2 ++
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 2 ++
 packages/shared/forks/ReactFeatureFlags.native-oss.js           | 2 ++
 packages/shared/forks/ReactFeatureFlags.test-renderer.js        | 2 ++
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 ++
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js    | 2 ++
 packages/shared/forks/ReactFeatureFlags.testing.js              | 2 ++
 packages/shared/forks/ReactFeatureFlags.testing.www.js          | 2 ++
 packages/shared/forks/ReactFeatureFlags.www.js                  | 2 ++
 9 files changed, 18 insertions(+)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index c5f798d559dd..7800bb1a7e3b 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -194,3 +194,5 @@ export const consoleManagedByDevToolsDuringStrictMode = true;
 
 // Only enabled in www builds
 export const enableUseMutableSource = false;
+
+export const enableTransitionTracing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 0f30707a49f3..65b1549876bb 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -77,6 +77,8 @@ export const enableCustomElementPropertySupport = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = true;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a660772b7e35..34bdac6ac2c6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -69,6 +69,8 @@ export const enableCustomElementPropertySupport = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = false;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index e6c4e5ec21fd..c739a1e12620 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -69,6 +69,8 @@ export const enableCustomElementPropertySupport = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = false;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 6700f047a87c..cd72fcc481c9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -67,6 +67,8 @@ export const enablePersistentOffscreenHostContainer = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = false;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index ef3f01e583c2..2e35505f5888 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -71,6 +71,8 @@ export const consoleManagedByDevToolsDuringStrictMode = false;
 // Some www surfaces are still using this. Remove once they have been migrated.
 export const enableUseMutableSource = true;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 182bebe61441..163731c01dd2 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -69,6 +69,8 @@ export const enableCustomElementPropertySupport = false;
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableUseMutableSource = false;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index ea7a8f9995fc..06834fa9dbaa 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -71,6 +71,8 @@ export const consoleManagedByDevToolsDuringStrictMode = false;
 // Some www surfaces are still using this. Remove once they have been migrated.
 export const enableUseMutableSource = true;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a1e5a48aabb7..a666671ab0ac 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -106,6 +106,8 @@ export const enableUseMutableSource = true;
 
 export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
 
+export const enableTransitionTracing = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From 2f26eb85d657a08c21edbac1e00f9626d68f84ae Mon Sep 17 00:00:00 2001
From: Gray Zhang <otakustay@gmail.com>
Date: Wed, 12 Jan 2022 00:48:09 +0800
Subject: [PATCH 1095/1603] Add exports field to react-refresh's package.json
 (#23087)

* Add exports field to react-refresh's package.json

* Update package.json

* Add runtime to exports
---
 packages/react-refresh/package.json | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index d5295574058b..c52b4f7fd8bd 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -18,6 +18,12 @@
     "umd/"
   ],
   "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",
@@ -31,4 +37,4 @@
     "react-dom-16-8": "npm:react-dom@16.8.0",
     "scheduler-0-13": "npm:scheduler@0.13.0"
   }
-}
\ No newline at end of file
+}

From 9a7e6bf0d0cf08114b74c9fe45c06e60a5e496e4 Mon Sep 17 00:00:00 2001
From: Stefan Sundin <git@stefansundin.com>
Date: Tue, 11 Jan 2022 09:14:08 -0800
Subject: [PATCH 1096/1603] Add --no-show-signature to "git show" commands
 (#23038)

* Add --no-show-signature to "git show" commands.

This fixes errors if the user has configured the following in their ~/.gitconfig:
[log]
showSignature = true

* yarn prettier-all
---
 packages/react-devtools-extensions/utils.js  |  2 +-
 scripts/release/utils.js                     |  6 ++++--
 scripts/rollup/build-all-release-channels.js | 12 +++++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-extensions/utils.js b/packages/react-devtools-extensions/utils.js
index 0cbf23fc68f2..882b414d3fbb 100644
--- a/packages/react-devtools-extensions/utils.js
+++ b/packages/react-devtools-extensions/utils.js
@@ -20,7 +20,7 @@ const GITHUB_URL = 'https://github.com/facebook/react';
 
 function getGitCommit() {
   try {
-    return execSync('git show -s --format=%h')
+    return execSync('git show -s --no-show-signature --format=%h')
       .toString()
       .trim();
   } catch (error) {
diff --git a/scripts/release/utils.js b/scripts/release/utils.js
index 6a50b6f202fa..7a940f8f65fb 100644
--- a/scripts/release/utils.js
+++ b/scripts/release/utils.js
@@ -72,7 +72,9 @@ const getBuildInfo = async () => {
   const branch = await execRead('git branch | grep \\* | cut -d " " -f2', {
     cwd,
   });
-  const commit = await execRead('git show -s --format=%h', {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
@@ -106,7 +108,7 @@ const getChecksumForCurrentRevision = async cwd => {
 
 const getDateStringForCommit = async commit => {
   let dateString = await execRead(
-    `git show -s --format=%cd --date=format:%Y%m%d ${commit}`
+    `git show -s --no-show-signature --format=%cd --date=format:%Y%m%d ${commit}`
   );
 
   // On CI environment, this string is wrapped with quotes '...'s
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 1f31df0d0c44..679350716586 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -19,12 +19,18 @@ const {
 // by configuring an environment variable.
 
 const sha = String(
-  spawnSync('git', ['show', '-s', '--format=%h']).stdout
+  spawnSync('git', ['show', '-s', '--no-show-signature', '--format=%h']).stdout
 ).trim();
 
 let dateString = String(
-  spawnSync('git', ['show', '-s', '--format=%cd', '--date=format:%Y%m%d', sha])
-    .stdout
+  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

From a87adefecdff672d5261e93945c227ad72c5444c Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 12 Jan 2022 13:12:07 -0700
Subject: [PATCH 1097/1603] Allow functions to be passed to custom element
 setters (#23042)

This is part of the new custom element features that were implemented
here:
https://github.com/facebook/react/commit/24dd07bd269590ee5024b7f0f1906887d256ea86

When a custom element has a setter for a property and passes the `in`
heuristic, the value passed to the react property should be assigned
directly to the custom element's property, regardless of the type of the
value. However, it was discovered that this isn't working with
functions. This patch makes it work with functions.

Fixes https://github.com/facebook/react/issues/23041
---
 .../__tests__/DOMPropertyOperations-test.js   | 29 +++++++++++++++++++
 .../src/client/DOMPropertyOperations.js       |  8 ++---
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index 28776b1eb62f..99f92cba9b36 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -504,6 +504,35 @@ describe('DOMPropertyOperations', () => {
       expect(customElement.foo).toBe('two');
       expect(customElement.getAttribute('foo')).toBe('one');
     });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element properties should accept functions', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element />, container);
+      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';
+      }
+      ReactDOM.render(<my-custom-element foo={myFunction} />, container);
+      expect(customElement.foo).toBe(myFunction);
+
+      // Also remove and re-add the property for good measure
+      ReactDOM.render(<my-custom-element />, container);
+      expect(customElement.foo).toBe(null);
+      ReactDOM.render(<my-custom-element foo={myFunction} />, container);
+      expect(customElement.foo).toBe(myFunction);
+    });
   });
 
   describe('deleteValueForProperty', () => {
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index 71b53d703c6d..f3d6fdac8979 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -184,10 +184,6 @@ export function setValueForProperty(
     }
   }
 
-  if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
-    value = null;
-  }
-
   if (
     enableCustomElementPropertySupport &&
     isCustomComponentTag &&
@@ -197,6 +193,10 @@ export function setValueForProperty(
     return;
   }
 
+  if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
+    value = null;
+  }
+
   // If the prop isn't in the special list, treat it as a simple attribute.
   if (isCustomComponentTag || propertyInfo === null) {
     if (isAttributeNameSafe(name)) {

From c09596cc6021e1f9f8a88179add93f80fc07823b Mon Sep 17 00:00:00 2001
From: Moti Zilberman <motiz88@gmail.com>
Date: Wed, 12 Jan 2022 21:53:50 +0000
Subject: [PATCH 1098/1603] Add RN_FB bundles for react-is (#23101)

* Add RN_FB bundles for react-is

* Update packaging.js

* Add ReactNativeInternalFeatureFlags to externals
---
 scripts/rollup/bundles.js   | 5 ++++-
 scripts/rollup/packaging.js | 1 +
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index bfa423b720c8..4ac846e78a9a 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -733,13 +733,16 @@ const bundles = [
       FB_WWW_PROD,
       UMD_DEV,
       UMD_PROD,
+      RN_FB_DEV,
+      RN_FB_PROD,
+      RN_FB_PROFILING,
     ],
     moduleType: ISOMORPHIC,
     entry: 'react-is',
     global: 'ReactIs',
     minifyWithProdErrorCodes: true,
     wrapWithModuleBoundaries: false,
-    externals: [],
+    externals: ['ReactNativeInternalFeatureFlags'],
   },
 
   /******* React Debug Tools *******/
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index eaf78959a678..793ba1a2da9a 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -75,6 +75,7 @@ function getBundleOutputPath(bundleType, filename, packageName) {
       switch (packageName) {
         case 'scheduler':
         case 'react':
+        case 'react-is':
         case 'react-test-renderer':
           return `build/facebook-react-native/${packageName}/cjs/${filename}`;
         case 'react-native-renderer':

From 51947a14bb24bd151f76f6fc0acdbbc404de13f7 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 13 Jan 2022 14:55:54 -0500
Subject: [PATCH 1099/1603] Refactored how React/DevTools log Timeline
 performance data (#23102)

Until now, DEV and PROFILING builds of React recorded Timeline profiling data using the User Timing API. This commit changes things so that React records this data by calling methods on the DevTools hook. (For now, DevTools still records that data using the User Timing API, to match previous behavior.)

This commit is large but most of it is just moving things around:

* New methods have been added to the DevTools hook (in "backend/profilingHooks") for recording the Timeline performance events.
* Reconciler's "ReactFiberDevToolsHook" has been updated to call these new methods (when they're present).
* User Timing method calls in "SchedulingProfiler" have been moved to DevTools "backend/profilingHooks" (to match previous behavior, for now).
* The old reconciler tests, "SchedulingProfiler-test" and "SchedulingProfilerLabels-test", have been moved into DevTools "TimelineProfiler-test" to ensure behavior didn't change unexpectedly.
* Two new methods have been added to the injected renderer interface: injectProfilingHooks() and getLaneLabelMap().

Relates to #22529.
---
 .../src/__tests__/TimelineProfiler-test.js    | 1124 ++++++++++
 .../src/__tests__/preprocessData-test.js      | 1929 +++++++++++++++++
 .../src/__tests__/setupTests.js               |    4 +
 .../src/__tests__/utils.js                    |    8 +
 .../src/backend/profilingHooks.js             |  364 ++++
 .../src/backend/renderer.js                   |   13 +
 .../src/backend/types.js                      |   54 +-
 packages/react-devtools-shared/src/hook.js    |    3 +-
 .../__tests__/preprocessData-test.internal.js | 1915 ----------------
 .../src/ReactFiberBeginWork.new.js            |    4 +-
 .../src/ReactFiberBeginWork.old.js            |    4 +-
 .../src/ReactFiberClassComponent.new.js       |    5 +-
 .../src/ReactFiberClassComponent.old.js       |    5 +-
 .../src/ReactFiberCommitWork.new.js           |    6 +-
 .../src/ReactFiberCommitWork.old.js           |    6 +-
 .../src/ReactFiberDevToolsHook.new.js         |  324 ++-
 .../src/ReactFiberDevToolsHook.old.js         |  324 ++-
 .../src/ReactFiberHooks.new.js                |    2 +-
 .../src/ReactFiberHooks.old.js                |    2 +-
 .../src/ReactFiberReconciler.new.js           |    7 +-
 .../src/ReactFiberReconciler.old.js           |    7 +-
 .../src/ReactFiberWorkLoop.new.js             |   28 +-
 .../src/ReactFiberWorkLoop.old.js             |   28 +-
 .../src/SchedulingProfiler.js                 |  395 ----
 .../__tests__/ReactUpdaters-test.internal.js  |   26 +
 .../SchedulingProfiler-test.internal.js       |  998 ---------
 .../SchedulingProfilerLabels-test.internal.js |  216 --
 scripts/jest/matchers/profilerMatchers.js     |    0
 28 files changed, 4208 insertions(+), 3593 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
 create mode 100644 packages/react-devtools-shared/src/__tests__/preprocessData-test.js
 create mode 100644 packages/react-devtools-shared/src/backend/profilingHooks.js
 delete mode 100644 packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
 delete mode 100644 packages/react-reconciler/src/SchedulingProfiler.js
 delete mode 100644 packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
 delete mode 100644 packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
 delete mode 100644 scripts/jest/matchers/profilerMatchers.js

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 000000000000..1a369acca27b
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -0,0 +1,1124 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+describe('Timeline profiler', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let renderHelper;
+  let renderRootHelper;
+  let unmountFns;
+  let utils;
+
+  let clearedMarks;
+  let featureDetectionMarkName = null;
+  let marks;
+  let setPerformanceMock;
+
+  function createUserTimingPolyfill() {
+    featureDetectionMarkName = null;
+
+    clearedMarks = [];
+    marks = [];
+
+    // 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 `${markName.substr(0, 29)}-<filtered-file-system-path>`;
+      } else if (markName.startsWith('--react-internal-module-stop')) {
+        return `${markName.substr(0, 28)}-<filtered-file-system-path>`;
+      } else if (markName.startsWith('--react-version')) {
+        return `${markName.substr(0, 15)}-<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);
+
+        clearedMarks.push(markName);
+        marks = marks.filter(mark => mark !== markName);
+      },
+      mark(markName, markOptions) {
+        markName = filterMarkData(markName);
+
+        if (featureDetectionMarkName === null) {
+          featureDetectionMarkName = markName;
+        }
+
+        marks.push(markName);
+
+        if (markOptions != null) {
+          // This is triggers the feature detection.
+          markOptions.startTime++;
+        }
+      },
+    };
+  }
+
+  function clearPendingMarks() {
+    clearedMarks.splice(0);
+  }
+
+  function dispatchAndSetCurrentEvent(element, event) {
+    try {
+      window.event = event;
+      element.dispatchEvent(event);
+    } finally {
+      window.event = undefined;
+    }
+  }
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    unmountFns = [];
+    renderHelper = element => {
+      const unmountFn = utils.legacyRender(element);
+      unmountFns.push(unmountFn);
+      return unmountFn;
+    };
+    renderRootHelper = element => {
+      const container = document.createElement('div');
+      const root = ReactDOM.createRoot(container);
+      root.render(element);
+      const unmountFn = () => root.unmount();
+      unmountFns.push(unmountFn);
+      return unmountFn;
+    };
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+
+    setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
+      .setPerformanceMock_ONLY_FOR_TESTING;
+    setPerformanceMock(createUserTimingPolyfill());
+  });
+
+  afterEach(() => {
+    // Verify all logged marks also get cleared.
+    expect(marks).toHaveLength(0);
+
+    unmountFns.forEach(unmountFn => unmountFn());
+
+    setPerformanceMock(null);
+  });
+
+  it('should mark sync render without suspends or state updates', () => {
+    renderHelper(<div />);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-1",
+        "--render-start-1",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+      ]
+    `);
+  });
+
+  it('should mark concurrent render without suspends or state updates', () => {
+    renderRootHelper(<div />);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  it('should mark render yields', async () => {
+    function Bar() {
+      Scheduler.unstable_yieldValue('Bar');
+      return null;
+    }
+
+    function Foo() {
+      Scheduler.unstable_yieldValue('Foo');
+      return <Bar />;
+    }
+
+    React.startTransition(() => {
+      renderRootHelper(<Foo />);
+    });
+
+    // Do one step of work.
+    expect(Scheduler).toFlushAndYieldThrough(['Foo']);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-64",
+        "--render-start-64",
+        "--component-render-start-Foo",
+        "--component-render-stop",
+        "--render-yield",
+      ]
+    `);
+  });
+
+  it('should mark sync render with suspense that resolves', async () => {
+    const fakeSuspensePromise = Promise.resolve(true);
+    function Example() {
+      throw fakeSuspensePromise;
+    }
+
+    renderHelper(
+      <React.Suspense fallback={null}>
+        <Example />
+      </React.Suspense>,
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-1",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-1-",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    await fakeSuspensePromise;
+    expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--suspense-resolved-0-Example",
+        ]
+    `);
+  });
+
+  it('should mark sync render with suspense that rejects', async () => {
+    const fakeSuspensePromise = Promise.reject(new Error('error'));
+    function Example() {
+      throw fakeSuspensePromise;
+    }
+
+    renderHelper(
+      <React.Suspense fallback={null}>
+        <Example />
+      </React.Suspense>,
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-1",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-1-",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    await expect(fakeSuspensePromise).rejects.toThrow();
+    expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);
+  });
+
+  it('should mark concurrent render with suspense that resolves', async () => {
+    const fakeSuspensePromise = Promise.resolve(true);
+    function Example() {
+      throw fakeSuspensePromise;
+    }
+
+    renderRootHelper(
+      <React.Suspense fallback={null}>
+        <Example />
+      </React.Suspense>,
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-16-",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    await fakeSuspensePromise;
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--suspense-resolved-0-Example",
+      ]
+    `);
+  });
+
+  it('should mark concurrent render with suspense that rejects', async () => {
+    const fakeSuspensePromise = Promise.reject(new Error('error'));
+    function Example() {
+      throw fakeSuspensePromise;
+    }
+
+    renderRootHelper(
+      <React.Suspense fallback={null}>
+        <Example />
+      </React.Suspense>,
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--suspense-suspend-0-Example-mount-16-",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    await expect(fakeSuspensePromise).rejects.toThrow();
+    expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--suspense-rejected-0-Example",
+        ]
+    `);
+  });
+
+  it('should mark cascading class component state updates', () => {
+    class Example extends React.Component {
+      state = {didMount: false};
+      componentDidMount() {
+        this.setState({didMount: true});
+      }
+      render() {
+        return null;
+      }
+    }
+
+    renderRootHelper(<Example />);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--schedule-state-update-1-Example",
+        "--layout-effects-stop",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  it('should mark cascading class component force updates', () => {
+    class Example extends React.Component {
+      componentDidMount() {
+        this.forceUpdate();
+      }
+      render() {
+        return null;
+      }
+    }
+
+    renderRootHelper(<Example />);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+        ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--schedule-forced-update-1-Example",
+        "--layout-effects-stop",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  it('should mark render phase state updates for class component', () => {
+    class Example extends React.Component {
+      state = {didRender: false};
+      render() {
+        if (this.state.didRender === false) {
+          this.setState({didRender: true});
+        }
+        return null;
+      }
+    }
+
+    renderRootHelper(<Example />);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+        ]
+    `);
+
+    clearPendingMarks();
+
+    let errorMessage;
+    spyOn(console, 'error').and.callFake(message => {
+      errorMessage = message;
+    });
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(errorMessage).toContain(
+      'Cannot update during an existing state transition',
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--schedule-state-update-16-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  it('should mark render phase force updates for class component', () => {
+    class Example extends React.Component {
+      state = {didRender: false};
+      render() {
+        if (this.state.didRender === false) {
+          this.forceUpdate(() => this.setState({didRender: true}));
+        }
+        return null;
+      }
+    }
+
+    renderRootHelper(<Example />);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+        ]
+    `);
+
+    clearPendingMarks();
+
+    let errorMessage;
+    spyOn(console, 'error').and.callFake(message => {
+      errorMessage = message;
+    });
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(errorMessage).toContain(
+      'Cannot update during an existing state transition',
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--schedule-forced-update-16-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  it('should mark cascading layout updates', () => {
+    function Example() {
+      const [didMount, setDidMount] = React.useState(false);
+      React.useLayoutEffect(() => {
+        setDidMount(true);
+      }, []);
+      return didMount;
+    }
+
+    renderRootHelper(<Example />);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+        ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--component-layout-effect-mount-start-Example",
+        "--schedule-state-update-1-Example",
+        "--component-layout-effect-mount-stop",
+        "--layout-effects-stop",
+        "--render-start-1",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  // This test is coupled to lane implementation details, so I'm disabling it in
+  // the new fork until it stabilizes so we don't have to repeatedly update it.
+  it('should mark cascading passive updates', () => {
+    function Example() {
+      const [didMount, setDidMount] = React.useState(false);
+      React.useEffect(() => {
+        setDidMount(true);
+      }, []);
+      return didMount;
+    }
+
+    renderRootHelper(<Example />);
+
+    expect(Scheduler).toFlushAndYield([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+        "--passive-effects-start-16",
+        "--component-passive-effect-mount-start-Example",
+        "--schedule-state-update-16-Example",
+        "--component-passive-effect-mount-stop",
+        "--passive-effects-stop",
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+      ]
+    `);
+  });
+
+  it('should mark render phase updates', () => {
+    function Example() {
+      const [didRender, setDidRender] = React.useState(false);
+      if (!didRender) {
+        setDidRender(true);
+      }
+      return didRender;
+    }
+
+    renderRootHelper(<Example />);
+
+    expect(Scheduler).toFlushAndYield([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+        "--render-start-16",
+        "--component-render-start-Example",
+        "--schedule-state-update-16-Example",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--layout-effects-stop",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  it('should mark sync render that throws', async () => {
+    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');
+    }
+
+    renderHelper(
+      <ErrorBoundary>
+        <ExampleThatThrows />
+      </ErrorBoundary>,
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--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-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+      ]
+    `);
+  });
+
+  it('should mark concurrent render that throws', async () => {
+    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() {
+      // eslint-disable-next-line no-throw-literal
+      throw 'Expected error';
+    }
+
+    renderRootHelper(
+      <ErrorBoundary>
+        <ExampleThatThrows />
+      </ErrorBoundary>,
+    );
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+        ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushUntilNextPaint([]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--render-start-16",
+        "--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",
+        "--render-start-16",
+        "--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-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--schedule-state-update-1-ErrorBoundary",
+        "--layout-effects-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-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+        "--commit-stop",
+      ]
+    `);
+  });
+
+  it('should mark passive and layout effects', async () => {
+    function ComponentWithEffects() {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('layout 1 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('layout 1 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 1 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 1 unmount');
+        };
+      }, []);
+
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('layout 2 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('layout 2 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 2 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 2 unmount');
+        };
+      }, []);
+
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('passive 3 mount');
+        return () => {
+          Scheduler.unstable_yieldValue('passive 3 unmount');
+        };
+      }, []);
+
+      return null;
+    }
+
+    const unmount = renderRootHelper(<ComponentWithEffects />);
+
+    expect(Scheduler).toFlushUntilNextPaint([
+      'layout 1 mount',
+      'layout 2 mount',
+    ]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-16",
+        "--render-start-16",
+        "--component-render-start-ComponentWithEffects",
+        "--component-render-stop",
+        "--render-stop",
+        "--commit-start-16",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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-16",
+        "--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",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushAndYield([
+      'passive 1 mount',
+      'passive 2 mount',
+      'passive 3 mount',
+    ]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--passive-effects-start-16",
+        "--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",
+      ]
+    `);
+
+    clearPendingMarks();
+
+    expect(Scheduler).toFlushAndYield([]);
+
+    unmount();
+
+    expect(Scheduler).toHaveYielded([
+      'layout 1 unmount',
+      'layout 2 unmount',
+      'passive 1 unmount',
+      'passive 2 unmount',
+      'passive 3 unmount',
+    ]);
+
+    expect(clearedMarks).toMatchInlineSnapshot(`
+      Array [
+        "--schedule-render-1",
+        "--render-start-1",
+        "--render-stop",
+        "--commit-start-1",
+        "--react-version-<filtered-version>",
+        "--profiler-version-1",
+        "--react-internal-module-start-<filtered-file-system-path>",
+        "--react-internal-module-stop-<filtered-file-system-path>",
+        "--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",
+        "--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-1",
+        "--layout-effects-stop",
+        "--passive-effects-start-1",
+        "--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', () => {
+    it('regression test SyncLane', () => {
+      renderHelper(<div />);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-1",
+          "--render-start-1",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-<filtered-version>",
+          "--profiler-version-1",
+          "--react-internal-module-start-<filtered-file-system-path>",
+          "--react-internal-module-stop-<filtered-file-system-path>",
+          "--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",
+        ]
+      `);
+    });
+
+    it('regression test DefaultLane', () => {
+      renderRootHelper(<div />);
+      expect(clearedMarks).toMatchInlineSnapshot(`
+          Array [
+            "--schedule-render-16",
+          ]
+      `);
+    });
+
+    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} />;
+      }
+
+      renderRootHelper(<App />);
+      expect(Scheduler).toFlushAndYield([]);
+
+      clearedMarks.splice(0);
+
+      targetRef.current.click();
+
+      // Wait a frame, for React to process the "click" update.
+      await Promise.resolve();
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-state-update-1-App",
+          "--render-start-1",
+          "--component-render-start-App",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-1",
+          "--react-version-<filtered-version>",
+          "--profiler-version-1",
+          "--react-internal-module-start-<filtered-file-system-path>",
+          "--react-internal-module-stop-<filtered-file-system-path>",
+          "--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",
+        ]
+      `);
+    });
+
+    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} />;
+      }
+
+      renderRootHelper(<App />);
+      expect(Scheduler).toFlushAndYield([]);
+
+      clearedMarks.splice(0);
+
+      const event = document.createEvent('MouseEvents');
+      event.initEvent('mouseover', true, true);
+      dispatchAndSetCurrentEvent(targetRef.current, event);
+
+      expect(Scheduler).toFlushAndYield([]);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-state-update-4-App",
+          "--render-start-4",
+          "--component-render-start-App",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-4",
+          "--react-version-<filtered-version>",
+          "--profiler-version-1",
+          "--react-internal-module-start-<filtered-file-system-path>",
+          "--react-internal-module-stop-<filtered-file-system-path>",
+          "--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-4",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
+    });
+  });
+});
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 000000000000..b513db2e7e78
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -0,0 +1,1929 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+describe('Timeline profiler', () => {
+  let React;
+  let ReactDOM;
+  let Scheduler;
+  let utils;
+
+  let clearedMarks;
+  let featureDetectionMarkName = null;
+  let marks;
+  let setPerformanceMock;
+
+  function createUserTimingPolyfill() {
+    featureDetectionMarkName = null;
+
+    clearedMarks = [];
+    marks = [];
+
+    // 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 `${markName.substr(0, 29)}-<filtered-file-system-path>`;
+      } else if (markName.startsWith('--react-internal-module-stop')) {
+        return `${markName.substr(0, 28)}-<filtered-file-system-path>`;
+      } else if (markName.startsWith('--react-version')) {
+        return `${markName.substr(0, 15)}-0.0.0`;
+      } 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);
+
+        clearedMarks.push(markName);
+        marks = marks.filter(mark => mark !== markName);
+      },
+      mark(markName, markOptions) {
+        markName = filterMarkData(markName);
+
+        if (featureDetectionMarkName === null) {
+          featureDetectionMarkName = markName;
+        }
+
+        marks.push(markName);
+
+        if (markOptions != null) {
+          // This is triggers the feature detection.
+          markOptions.startTime++;
+        }
+      },
+    };
+  }
+
+  function clearPendingMarks() {
+    clearedMarks.splice(0);
+  }
+
+  beforeEach(() => {
+    utils = require('./utils');
+    utils.beforeEachProfiling();
+
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+
+    setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
+      .setPerformanceMock_ONLY_FOR_TESTING;
+    setPerformanceMock(createUserTimingPolyfill());
+
+    global.IS_REACT_ACT_ENVIRONMENT = true;
+  });
+
+  afterEach(() => {
+    // Verify all logged marks also get cleared.
+    expect(marks).toHaveLength(0);
+
+    setPerformanceMock(null);
+  });
+
+  describe('getLanesFromTransportDecimalBitmask', () => {
+    let getLanesFromTransportDecimalBitmask;
+
+    beforeEach(() => {
+      getLanesFromTransportDecimalBitmask = require('react-devtools-timeline/src/import-worker/preprocessData')
+        .getLanesFromTransportDecimalBitmask;
+    });
+
+    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()));
+    });
+
+    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([]);
+    });
+
+    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-0.0.0',
+      });
+    }
+
+    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;
+    });
+
+    it('should throw given an empty timeline', async () => {
+      await expect(async () => preprocessData([])).rejects.toThrow();
+    });
+
+    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();
+    });
+
+    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',
+      );
+    });
+
+    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',
+      );
+    });
+
+    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(`
+      Object {
+        "batchUIDToMeasuresMap": Map {},
+        "componentMeasures": Array [],
+        "duration": 0.005,
+        "flamechart": Array [],
+        "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 => Array [],
+          1 => Array [],
+          2 => Array [],
+          3 => Array [],
+          4 => Array [],
+          5 => Array [],
+          6 => Array [],
+          7 => Array [],
+          8 => Array [],
+          9 => Array [],
+          10 => Array [],
+          11 => Array [],
+          12 => Array [],
+          13 => Array [],
+          14 => Array [],
+          15 => Array [],
+          16 => Array [],
+          17 => Array [],
+          18 => Array [],
+          19 => Array [],
+          20 => Array [],
+          21 => Array [],
+          22 => Array [],
+          23 => Array [],
+          24 => Array [],
+          25 => Array [],
+          26 => Array [],
+          27 => Array [],
+          28 => Array [],
+          29 => Array [],
+          30 => Array [],
+        },
+        "nativeEvents": Array [],
+        "networkMeasures": Array [],
+        "otherUserTimingMarks": Array [],
+        "reactVersion": "0.0.0",
+        "schedulingEvents": Array [],
+        "snapshotHeight": 0,
+        "snapshots": Array [],
+        "startTime": 1,
+        "suspenseEvents": Array [],
+        "thrownErrors": Array [],
+      }
+    `);
+    });
+
+    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(`
+      Object {
+        "batchUIDToMeasuresMap": Map {
+          0 => Array [
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.004999999999999999,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.006,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.001,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.006,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.002999999999999999,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.008,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 1,
+              "duration": 0.0010000000000000009,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.009,
+              "type": "layout-effects",
+            },
+          ],
+        },
+        "componentMeasures": Array [],
+        "duration": 0.011,
+        "flamechart": Array [],
+        "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 => Array [],
+          1 => Array [],
+          2 => Array [],
+          3 => Array [],
+          4 => Array [],
+          5 => Array [],
+          6 => Array [],
+          7 => Array [],
+          8 => Array [],
+          9 => Array [
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.004999999999999999,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.006,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.001,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.006,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.002999999999999999,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.008,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 1,
+              "duration": 0.0010000000000000009,
+              "lanes": Array [
+                9,
+              ],
+              "timestamp": 0.009,
+              "type": "layout-effects",
+            },
+          ],
+          10 => Array [],
+          11 => Array [],
+          12 => Array [],
+          13 => Array [],
+          14 => Array [],
+          15 => Array [],
+          16 => Array [],
+          17 => Array [],
+          18 => Array [],
+          19 => Array [],
+          20 => Array [],
+          21 => Array [],
+          22 => Array [],
+          23 => Array [],
+          24 => Array [],
+          25 => Array [],
+          26 => Array [],
+          27 => Array [],
+          28 => Array [],
+          29 => Array [],
+          30 => Array [],
+        },
+        "nativeEvents": Array [],
+        "networkMeasures": Array [],
+        "otherUserTimingMarks": Array [],
+        "reactVersion": "0.0.0",
+        "schedulingEvents": Array [
+          Object {
+            "lanes": Array [
+              9,
+            ],
+            "timestamp": 0.005,
+            "type": "schedule-render",
+            "warning": null,
+          },
+        ],
+        "snapshotHeight": 0,
+        "snapshots": Array [],
+        "startTime": 1,
+        "suspenseEvents": Array [],
+        "thrownErrors": Array [],
+      }
+    `);
+    });
+
+    it('should process a sample legacy render sequence', async () => {
+      utils.legacyRender(<div />, document.createElement('div'));
+
+      const data = await preprocessData([
+        ...createBoilerplateEntries(),
+        ...createUserTimingData(clearedMarks),
+      ]);
+      expect(data).toMatchInlineSnapshot(`
+      Object {
+        "batchUIDToMeasuresMap": Map {
+          0 => Array [
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.01,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.004,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.001,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.004,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.008,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.006,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 1,
+              "duration": 0.0009999999999999992,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.012,
+              "type": "layout-effects",
+            },
+          ],
+        },
+        "componentMeasures": Array [],
+        "duration": 0.014,
+        "flamechart": Array [],
+        "internalModuleSourceToRanges": Map {
+          undefined => Array [
+            Array [
+              Object {
+                "functionName": "<filtered-file-system-path>",
+              },
+              Object {
+                "functionName": "dule-stop-<filtered-file-system-path>",
+              },
+            ],
+          ],
+        },
+        "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 => Array [
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.01,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.004,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.001,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.004,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.008,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.006,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 1,
+              "duration": 0.0009999999999999992,
+              "lanes": Array [
+                0,
+              ],
+              "timestamp": 0.012,
+              "type": "layout-effects",
+            },
+          ],
+          1 => Array [],
+          2 => Array [],
+          3 => Array [],
+          4 => Array [],
+          5 => Array [],
+          6 => Array [],
+          7 => Array [],
+          8 => Array [],
+          9 => Array [],
+          10 => Array [],
+          11 => Array [],
+          12 => Array [],
+          13 => Array [],
+          14 => Array [],
+          15 => Array [],
+          16 => Array [],
+          17 => Array [],
+          18 => Array [],
+          19 => Array [],
+          20 => Array [],
+          21 => Array [],
+          22 => Array [],
+          23 => Array [],
+          24 => Array [],
+          25 => Array [],
+          26 => Array [],
+          27 => Array [],
+          28 => Array [],
+          29 => Array [],
+          30 => Array [],
+        },
+        "nativeEvents": Array [],
+        "networkMeasures": Array [],
+        "otherUserTimingMarks": Array [],
+        "reactVersion": "0.0.0",
+        "schedulingEvents": Array [
+          Object {
+            "lanes": Array [
+              0,
+            ],
+            "timestamp": 0.003,
+            "type": "schedule-render",
+            "warning": null,
+          },
+        ],
+        "snapshotHeight": 0,
+        "snapshots": Array [],
+        "startTime": 4,
+        "suspenseEvents": Array [],
+        "thrownErrors": Array [],
+      }
+    `);
+    });
+
+    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 = ReactDOM.createRoot(document.createElement('div'));
+      utils.act(() => root.render(<App />));
+
+      const data = await preprocessData([
+        ...createBoilerplateEntries(),
+        ...createUserTimingData(clearedMarks),
+      ]);
+      expect(data).toMatchInlineSnapshot(`
+      Object {
+        "batchUIDToMeasuresMap": Map {
+          0 => Array [
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.012,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.004,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.003,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.004,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.008,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.008,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 1,
+              "duration": 0.0009999999999999992,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.014,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.004,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.017,
+              "type": "passive-effects",
+            },
+          ],
+          1 => Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.012000000000000004,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.022,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.0030000000000000027,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.022,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.008000000000000004,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.026,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0.0010000000000000009,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.032,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.0029999999999999957,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.035,
+              "type": "passive-effects",
+            },
+          ],
+        },
+        "componentMeasures": Array [
+          Object {
+            "componentName": "App",
+            "duration": 0.001,
+            "timestamp": 0.005,
+            "type": "render",
+            "warning": null,
+          },
+          Object {
+            "componentName": "App",
+            "duration": 0.0020000000000000018,
+            "timestamp": 0.018,
+            "type": "passive-effect-mount",
+            "warning": null,
+          },
+          Object {
+            "componentName": "App",
+            "duration": 0.0010000000000000009,
+            "timestamp": 0.023,
+            "type": "render",
+            "warning": null,
+          },
+          Object {
+            "componentName": "App",
+            "duration": 0.0010000000000000009,
+            "timestamp": 0.036,
+            "type": "passive-effect-mount",
+            "warning": null,
+          },
+        ],
+        "duration": 0.038,
+        "flamechart": Array [],
+        "internalModuleSourceToRanges": Map {
+          undefined => Array [
+            Array [
+              Object {
+                "functionName": "<filtered-file-system-path>",
+              },
+              Object {
+                "functionName": "dule-stop-<filtered-file-system-path>",
+              },
+            ],
+          ],
+        },
+        "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 => Array [],
+          1 => Array [],
+          2 => Array [],
+          3 => Array [],
+          4 => Array [
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.012,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.004,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.003,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.004,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.008,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.008,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 1,
+              "duration": 0.0009999999999999992,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.014,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 0,
+              "depth": 0,
+              "duration": 0.004,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.017,
+              "type": "passive-effects",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.012000000000000004,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.022,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.0030000000000000027,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.022,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.008000000000000004,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.026,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0.0010000000000000009,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.032,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0.0029999999999999957,
+              "lanes": Array [
+                4,
+              ],
+              "timestamp": 0.035,
+              "type": "passive-effects",
+            },
+          ],
+          5 => Array [],
+          6 => Array [],
+          7 => Array [],
+          8 => Array [],
+          9 => Array [],
+          10 => Array [],
+          11 => Array [],
+          12 => Array [],
+          13 => Array [],
+          14 => Array [],
+          15 => Array [],
+          16 => Array [],
+          17 => Array [],
+          18 => Array [],
+          19 => Array [],
+          20 => Array [],
+          21 => Array [],
+          22 => Array [],
+          23 => Array [],
+          24 => Array [],
+          25 => Array [],
+          26 => Array [],
+          27 => Array [],
+          28 => Array [],
+          29 => Array [],
+          30 => Array [],
+        },
+        "nativeEvents": Array [],
+        "networkMeasures": Array [],
+        "otherUserTimingMarks": Array [],
+        "reactVersion": "0.0.0",
+        "schedulingEvents": Array [
+          Object {
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.003,
+            "type": "schedule-render",
+            "warning": null,
+          },
+          Object {
+            "componentName": "App",
+            "lanes": Array [
+              4,
+            ],
+            "timestamp": 0.019,
+            "type": "schedule-state-update",
+            "warning": null,
+          },
+        ],
+        "snapshotHeight": 0,
+        "snapshots": Array [],
+        "startTime": 4,
+        "suspenseEvents": Array [],
+        "thrownErrors": Array [],
+      }
+    `);
+    });
+
+    it('should error if events and measures are incomplete', async () => {
+      const container = document.createElement('div');
+      utils.legacyRender(<div />, container);
+
+      const invalidMarks = clearedMarks.filter(
+        mark => !mark.includes('render-stop'),
+      );
+      const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+      const error = spyOn(console, 'error');
+      preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
+      expect(error).toHaveBeenCalled();
+    });
+
+    it('should error if work is completed without being started', async () => {
+      const container = document.createElement('div');
+      utils.legacyRender(<div />, container);
+
+      const invalidMarks = clearedMarks.filter(
+        mark => !mark.includes('render-start'),
+      );
+      const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+      const error = spyOn(console, 'error');
+      preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
+      expect(error).toHaveBeenCalled();
+    });
+
+    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(`
+      Array [
+        Object {
+          "name": "VCWithoutImage: root",
+          "timestamp": 0.003,
+        },
+        Object {
+          "name": "--a-mark-that-looks-like-one-of-ours",
+          "timestamp": 0.004,
+        },
+        Object {
+          "name": "Some other mark",
+          "timestamp": 0.005,
+        },
+      ]
+    `);
+    });
+
+    it('should include a suspended resource "displayName" if one is set', async () => {
+      let promise = null;
+      let resolvedValue = null;
+      function readValue(value) {
+        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 = ReactDOM.createRoot(document.createElement('div'));
+      utils.act(() =>
+        root.render(
+          <React.Suspense fallback="Loading...">
+            <Component />
+          </React.Suspense>,
+        ),
+      );
+
+      testMarks.push(...createUserTimingData(clearedMarks));
+
+      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', () => {
+        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),
+          ];
+
+          clearPendingMarks();
+
+          utils.legacyRender(<App />, document.createElement('div'));
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = await preprocessData(testMarks);
+          const event = data.nativeEvents.find(({type}) => type === 'click');
+          expect(event.warning).toBe(null);
+        });
+
+        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;
+
+          clearPendingMarks();
+
+          utils.legacyRender(<App />, document.createElement('div'));
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = await preprocessData(testMarks);
+          const event = data.nativeEvents.find(({type}) => type === 'click');
+          expect(event.warning).toBe(null);
+        });
+
+        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),
+          ];
+
+          clearPendingMarks();
+
+          utils.legacyRender(<App />, document.createElement('div'));
+
+          clearedMarks.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."`,
+          );
+        });
+
+        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.unstable_yieldValue(`${id}:${value}`);
+            return null;
+          }
+
+          const testMarks = [
+            creactCpuProfilerSample(),
+            ...createBoilerplateEntries(),
+          ];
+
+          // Advance the clock by some arbitrary amount.
+          startTime += 50000;
+
+          const root = ReactDOM.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} />
+              </>,
+            );
+            expect(Scheduler).toFlushAndYieldThrough(['A:1']);
+
+            testMarks.push(...createUserTimingData(clearedMarks));
+            clearPendingMarks();
+
+            // 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} />
+                </>,
+              );
+            });
+          });
+
+          expect(Scheduler).toHaveYielded(['A:2', 'B:2']);
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          const data = await preprocessData(testMarks);
+          const event = data.nativeEvents.find(({type}) => type === 'click');
+          expect(event.warning).toBe(null);
+        });
+      });
+
+      describe('nested updates', () => {
+        it('should not warn about short nested (state) updates during layout effects', async () => {
+          function Component() {
+            const [didMount, setDidMount] = React.useState(false);
+            Scheduler.unstable_yieldValue(
+              `Component ${didMount ? 'update' : 'mount'}`,
+            );
+            React.useLayoutEffect(() => {
+              setDidMount(true);
+            }, []);
+            return didMount;
+          }
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const data = await preprocessData([
+            ...createBoilerplateEntries(),
+            ...createUserTimingData(clearedMarks),
+          ]);
+
+          const event = data.schedulingEvents.find(
+            ({type}) => type === 'schedule-state-update',
+          );
+          expect(event.warning).toBe(null);
+        });
+
+        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.unstable_yieldValue(
+                `Component ${this._didMount ? 'update' : 'mount'}`,
+              );
+              return null;
+            }
+          }
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const data = await preprocessData([
+            ...createBoilerplateEntries(),
+            ...createUserTimingData(clearedMarks),
+          ]);
+
+          const event = data.schedulingEvents.find(
+            ({type}) => type === 'schedule-force-update',
+          );
+          expect(event.warning).toBe(null);
+        });
+
+        it('should warn about long nested (state) updates during layout effects', async () => {
+          function Component() {
+            const [didMount, setDidMount] = React.useState(false);
+            Scheduler.unstable_yieldValue(
+              `Component ${didMount ? 'update' : 'mount'}`,
+            );
+            // Fake a long render
+            startTime += 20000;
+            React.useLayoutEffect(() => {
+              setDidMount(true);
+            }, []);
+            return didMount;
+          }
+
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.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)."`,
+          );
+        });
+
+        it('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.unstable_yieldValue(
+                `Component ${this._didMount ? 'update' : 'mount'}`,
+              );
+              return null;
+            }
+          }
+
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component mount',
+            'Component update',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.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)."`,
+          );
+        });
+
+        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.unstable_yieldValue(
+              `Component rendered with value ${value}`,
+            );
+
+            // Fake a long render
+            if (value !== 0) {
+              Scheduler.unstable_yieldValue('Long render');
+              startTime += 20000;
+            }
+
+            React.useLayoutEffect(() => {
+              startTransition(() => {
+                setValue(1);
+              });
+            }, []);
+
+            return value;
+          }
+
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Component rendered with value 0',
+            'Component rendered with value 0',
+            'Component rendered with value 1',
+            'Long render',
+          ]);
+
+          const testMarks = [];
+          clearedMarks.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();
+          });
+        });
+
+        it('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.unstable_yieldValue(
+              `Component rendered with value ${value} and deferredValue ${deferredValue}`,
+            );
+
+            // Fake a long render
+            if (deferredValue !== 0) {
+              Scheduler.unstable_yieldValue('Long render');
+              startTime += 20000;
+            }
+
+            React.useLayoutEffect(() => {
+              setValue(1);
+            }, []);
+
+            return value + deferredValue;
+          }
+
+          const cpuProfilerSample = creactCpuProfilerSample();
+
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() => {
+            root.render(<Component />);
+          });
+
+          expect(Scheduler).toHaveYielded([
+            '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 = [];
+          clearedMarks.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', () => {
+        it('shoult parse Errors thrown during render', async () => {
+          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 = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() =>
+            root.render(
+              <ErrorBoundary>
+                <ExampleThatThrows />
+              </ErrorBoundary>,
+            ),
+          );
+
+          testMarks.push(...createUserTimingData(clearedMarks));
+
+          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 the a component suspends while profiling
+        // before the first commit is logged (so the lane-to-labels map will not yet exist).
+        it('should warn about suspending during an udpate', async () => {
+          let promise = null;
+          let resolvedValue = null;
+          function readValue(value) {
+            if (resolvedValue !== null) {
+              return resolvedValue;
+            } else if (promise === null) {
+              promise = Promise.resolve(true).then(() => {
+                resolvedValue = value;
+              });
+            }
+            throw promise;
+          }
+
+          function Component({shouldSuspend}) {
+            Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
+            if (shouldSuspend) {
+              readValue(123);
+            }
+            return null;
+          }
+
+          // Mount and commit the app
+          const root = ReactDOM.createRoot(document.createElement('div'));
+          utils.act(() =>
+            root.render(
+              <React.Suspense fallback="Loading...">
+                <Component shouldSuspend={false} />
+              </React.Suspense>,
+            ),
+          );
+
+          clearPendingMarks();
+
+          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(clearedMarks));
+
+          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."`,
+          );
+        });
+
+        it('should not warn about suspending during an transition', async () => {
+          let promise = null;
+          let resolvedValue = null;
+          function readValue(value) {
+            if (resolvedValue !== null) {
+              return resolvedValue;
+            } else if (promise === null) {
+              promise = Promise.resolve(true).then(() => {
+                resolvedValue = value;
+              });
+            }
+            throw promise;
+          }
+
+          function Component({shouldSuspend}) {
+            Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
+            if (shouldSuspend) {
+              readValue(123);
+            }
+            return null;
+          }
+
+          // Mount and commit the app
+          const root = ReactDOM.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(clearedMarks));
+
+          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
+  });
+});
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index 4224bde3b97d..c2ce9184adc9 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -162,3 +162,7 @@ env.afterEach(() => {
   // so that we don't disconnect the ReactCurrentDispatcher ref.
   jest.resetModules();
 });
+
+expect.extend({
+  ...require('../../../../scripts/jest/matchers/schedulerTestMatchers'),
+});
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 10a96598d573..03228ea594a0 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -163,6 +163,10 @@ export function getRendererID(): number {
 }
 
 export function legacyRender(elements, container) {
+  if (container == null) {
+    container = document.createElement('div');
+  }
+
   const ReactDOM = require('react-dom');
   withErrorsOrWarningsIgnored(
     ['ReactDOM.render is no longer supported in React 18'],
@@ -170,6 +174,10 @@ export function legacyRender(elements, container) {
       ReactDOM.render(elements, container);
     },
   );
+
+  return () => {
+    ReactDOM.unmountComponentAtNode(container);
+  };
 }
 
 export function requireTestRenderer(): ReactTestRenderer {
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 000000000000..9544b72511f6
--- /dev/null
+++ b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -0,0 +1,364 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {
+  Lane,
+  Lanes,
+  DevToolsProfilingHooks,
+} from 'react-devtools-shared/src/backend/types';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {Wakeable} from 'shared/ReactTypes';
+
+import isArray from 'shared/isArray';
+import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
+
+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' &&
+  typeof performance.mark === 'function' &&
+  typeof performance.clearMarks === 'function';
+
+let supportsUserTimingV3 = false;
+if (supportsUserTiming) {
+  const CHECK_V3_MARK = '__v3';
+  const markOptions = {};
+  // $FlowFixMe: Ignore Flow complaining about needing a value
+  Object.defineProperty(markOptions, 'startTime', {
+    get: function() {
+      supportsUserTimingV3 = true;
+      return 0;
+    },
+    set: function() {},
+  });
+
+  try {
+    // $FlowFixMe: Flow expects the User Timing level 2 API.
+    performance.mark(CHECK_V3_MARK, markOptions);
+  } catch (error) {
+    // Ignore
+  } finally {
+    performance.clearMarks(CHECK_V3_MARK);
+  }
+}
+
+if (supportsUserTimingV3) {
+  performanceTarget = performance;
+}
+
+// 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;
+}
+
+function markAndClear(markName) {
+  // 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);
+}
+
+export function createProfilingHooks({
+  getDisplayNameForFiber,
+  getLaneLabelMap,
+  reactVersion,
+}: {|
+  getDisplayNameForFiber: (fiber: Fiber) => string | null,
+  getLaneLabelMap?: () => Map<Lane, string>,
+  reactVersion: string,
+|}): DevToolsProfilingHooks {
+  function markMetadata() {
+    markAndClear(`--react-version-${reactVersion}`);
+    markAndClear(`--profiler-version-${SCHEDULING_PROFILER_VERSION}`);
+
+    /* 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).
+      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)) {
+        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 (typeof getLaneLabelMap === 'function') {
+      const map = getLaneLabelMap();
+      const labels = Array.from(map.values()).join(',');
+      markAndClear(`--react-lane-labels-${labels}`);
+    }
+  }
+
+  function markCommitStarted(lanes: Lanes): void {
+    if (supportsUserTimingV3) {
+      markAndClear(`--commit-start-${lanes}`);
+
+      // Certain types of metadata should be logged infrequently.
+      // Normally we would log this during module init,
+      // but there's no guarantee a user is profiling at that time.
+      // Commits happen infrequently (less than renders or state updates)
+      // so we log this extra information along with a commit.
+      // It will likely be logged more than once but that's okay.
+      //
+      // TODO (timeline) Only log this once, when profiling starts.
+      // For the first phase– refactoring– we'll match the previous behavior.
+      markMetadata();
+    }
+  }
+
+  function markCommitStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--commit-stop');
+    }
+  }
+
+  function markComponentRenderStarted(fiber: Fiber): void {
+    if (supportsUserTimingV3) {
+      const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+      // TODO (timeline) Record and cache component stack
+      markAndClear(`--component-render-start-${componentName}`);
+    }
+  }
+
+  function markComponentRenderStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-render-stop');
+    }
+  }
+
+  function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
+    if (supportsUserTimingV3) {
+      const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+      // TODO (timeline) Record and cache component stack
+      markAndClear(`--component-passive-effect-mount-start-${componentName}`);
+    }
+  }
+
+  function markComponentPassiveEffectMountStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-mount-stop');
+    }
+  }
+
+  function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
+    if (supportsUserTimingV3) {
+      const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+      // TODO (timeline) Record and cache component stack
+      markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
+    }
+  }
+
+  function markComponentPassiveEffectUnmountStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-passive-effect-unmount-stop');
+    }
+  }
+
+  function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
+    if (supportsUserTimingV3) {
+      const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+      // TODO (timeline) Record and cache component stack
+      markAndClear(`--component-layout-effect-mount-start-${componentName}`);
+    }
+  }
+
+  function markComponentLayoutEffectMountStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-mount-stop');
+    }
+  }
+
+  function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
+    if (supportsUserTimingV3) {
+      const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+      // TODO (timeline) Record and cache component stack
+      markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
+    }
+  }
+
+  function markComponentLayoutEffectUnmountStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--component-layout-effect-unmount-stop');
+    }
+  }
+
+  function markComponentErrored(
+    fiber: Fiber,
+    thrownValue: mixed,
+    lanes: Lanes,
+  ): void {
+    if (supportsUserTimingV3) {
+      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
+      markAndClear(`--error-${componentName}-${phase}-${message}`);
+    }
+  }
+
+  const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+
+  // $FlowFixMe: 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 (supportsUserTimingV3) {
+      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 || '';
+
+      // TODO (timeline) Record and cache component stack
+      markAndClear(
+        `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
+      );
+      wakeable.then(
+        () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
+        () => markAndClear(`--suspense-rejected-${id}-${componentName}`),
+      );
+    }
+  }
+
+  function markLayoutEffectsStarted(lanes: Lanes): void {
+    if (supportsUserTimingV3) {
+      markAndClear(`--layout-effects-start-${lanes}`);
+    }
+  }
+
+  function markLayoutEffectsStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--layout-effects-stop');
+    }
+  }
+
+  function markPassiveEffectsStarted(lanes: Lanes): void {
+    if (supportsUserTimingV3) {
+      markAndClear(`--passive-effects-start-${lanes}`);
+    }
+  }
+
+  function markPassiveEffectsStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--passive-effects-stop');
+    }
+  }
+
+  function markRenderStarted(lanes: Lanes): void {
+    if (supportsUserTimingV3) {
+      markAndClear(`--render-start-${lanes}`);
+    }
+  }
+
+  function markRenderYielded(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--render-yield');
+    }
+  }
+
+  function markRenderStopped(): void {
+    if (supportsUserTimingV3) {
+      markAndClear('--render-stop');
+    }
+  }
+
+  function markRenderScheduled(lane: Lane): void {
+    if (supportsUserTimingV3) {
+      markAndClear(`--schedule-render-${lane}`);
+    }
+  }
+
+  function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
+    if (supportsUserTimingV3) {
+      const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+      // TODO (timeline) Record and cache component stack
+      markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
+    }
+  }
+
+  function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
+    if (supportsUserTimingV3) {
+      const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
+      // TODO (timeline) Record and cache component stack
+      markAndClear(`--schedule-state-update-${lane}-${componentName}`);
+    }
+  }
+
+  return {
+    markCommitStarted,
+    markCommitStopped,
+    markComponentRenderStarted,
+    markComponentRenderStopped,
+    markComponentPassiveEffectMountStarted,
+    markComponentPassiveEffectMountStopped,
+    markComponentPassiveEffectUnmountStarted,
+    markComponentPassiveEffectUnmountStopped,
+    markComponentLayoutEffectMountStarted,
+    markComponentLayoutEffectMountStopped,
+    markComponentLayoutEffectUnmountStarted,
+    markComponentLayoutEffectUnmountStopped,
+    markComponentErrored,
+    markComponentSuspended,
+    markLayoutEffectsStarted,
+    markLayoutEffectsStopped,
+    markPassiveEffectsStarted,
+    markPassiveEffectsStopped,
+    markRenderStarted,
+    markRenderYielded,
+    markRenderStopped,
+    markRenderScheduled,
+    markForceUpdateScheduled,
+    markStateUpdateScheduled,
+  };
+}
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 631521791a54..daa4d4e1030c 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -92,6 +92,7 @@ import is from 'shared/objectIs';
 import isArray from 'shared/isArray';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {getStyleXData} from './StyleX/utils';
+import {createProfilingHooks} from './profilingHooks';
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -590,6 +591,8 @@ export function attach(
   } = ReactPriorityLevels;
 
   const {
+    getLaneLabelMap,
+    injectProfilingHooks,
     overrideHookState,
     overrideHookStateDeletePath,
     overrideHookStateRenamePath,
@@ -624,6 +627,16 @@ export function attach(
     };
   }
 
+  if (typeof injectProfilingHooks === 'function') {
+    injectProfilingHooks(
+      createProfilingHooks({
+        getDisplayNameForFiber,
+        getLaneLabelMap,
+        reactVersion: version,
+      }),
+    );
+  }
+
   // Tracks Fibers with recently changed number of error/warning messages.
   // These collections store the Fiber rather than the ID,
   // in order to avoid generating an ID for Fibers that never get mounted
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 3318c8b6a965..b75188239695 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactContext} from 'shared/ReactTypes';
+import type {ReactContext, Wakeable} from 'shared/ReactTypes';
 import type {Source} from 'shared/ReactElementType';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
@@ -87,6 +87,9 @@ export type ReactProviderType<T> = {
   ...
 };
 
+export type Lane = number;
+export type Lanes = number;
+
 export type ReactRenderer = {
   findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
   version: string,
@@ -147,6 +150,9 @@ export type ReactRenderer = {
   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>,
   ...
 };
 
@@ -390,11 +396,56 @@ export type RendererInterface = {
   ) => void,
   unpatchConsoleForStrictMode: () => void,
   updateComponentFilters: (componentFilters: Array<ComponentFilter>) => void,
+
+  // 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 DevToolsHook = {
   listeners: {[key: string]: Array<Handler>, ...},
   rendererInterfaces: Map<RendererID, RendererInterface>,
@@ -431,5 +482,6 @@ export type DevToolsHook = {
 
   // Testing
   dangerous_setTargetConsoleForTesting?: (fakeConsole: Object) => void,
+
   ...
 };
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index e265212e31c4..5844074863bf 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -9,14 +9,13 @@
  */
 
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
 import {
   patch as patchConsole,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
 
-import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
-
 declare var window: any;
 
 export function installHook(target: any): DevToolsHook | null {
diff --git a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
deleted file mode 100644
index f902ddc57e14..000000000000
--- a/packages/react-devtools-timeline/src/import-worker/__tests__/preprocessData-test.internal.js
+++ /dev/null
@@ -1,1915 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-import {getLaneLabels} from 'react-reconciler/src/SchedulingProfiler';
-import preprocessData, {
-  getLanesFromTransportDecimalBitmask,
-} from '../preprocessData';
-import {
-  REACT_TOTAL_NUM_LANES,
-  SCHEDULING_PROFILER_VERSION,
-} from '../../constants';
-import REACT_VERSION from 'shared/ReactVersion';
-
-describe('getLanesFromTransportDecimalBitmask', () => {
-  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()));
-  });
-
-  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([]);
-  });
-
-  it('should ignore lanes outside 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 React;
-  let ReactDOM;
-  let Scheduler;
-
-  let act;
-  let clearedMarks;
-  let featureDetectionMarkName = null;
-  let marks;
-
-  function polyfillJSDomUserTiming() {
-    featureDetectionMarkName = null;
-
-    clearedMarks = [];
-    marks = [];
-
-    // 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
-
-    // JSDom already implements global.performance and it can't be overridden.
-    // However it only supports now() and timeOrigin() so we need to "upgrade it" in place.
-
-    if (!global.performance) {
-      global.performance = {};
-    }
-
-    global.performance.clearMarks = function clearMarks(markName) {
-      clearedMarks.push(markName);
-      marks = marks.filter(mark => mark !== markName);
-    };
-
-    global.performance.mark = function mark(markName, markOptions) {
-      if (featureDetectionMarkName === null) {
-        featureDetectionMarkName = markName;
-      }
-      marks.push(markName);
-      if (markOptions != null) {
-        // This is triggers the feature detection.
-        markOptions.startTime++;
-      }
-    };
-  }
-
-  // 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() {
-    return createUserTimingEntry({
-      cat: 'blink.user_timing',
-      name: '--profiler-version-' + SCHEDULING_PROFILER_VERSION,
-    });
-  }
-
-  function createReactVersionEntry() {
-    return createUserTimingEntry({
-      cat: 'blink.user_timing',
-      name: '--react-version-' + REACT_VERSION,
-    });
-  }
-
-  function createLaneLabelsEntry() {
-    return createUserTimingEntry({
-      cat: 'blink.user_timing',
-      name: '--react-lane-labels-' + getLaneLabels().join(','),
-    });
-  }
-
-  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(() => {
-    jest.resetModules();
-
-    polyfillJSDomUserTiming();
-
-    React = require('react');
-    ReactDOM = require('react-dom');
-    Scheduler = require('scheduler');
-
-    const TestUtils = require('react-dom/test-utils');
-    act = TestUtils.act;
-
-    tid = 0;
-    pid = 0;
-    startTime = 0;
-
-    global.IS_REACT_ACT_ENVIRONMENT = true;
-  });
-
-  afterEach(() => {
-    // Verify all logged marks also get cleared.
-    expect(marks).toHaveLength(0);
-
-    delete global.performance;
-  });
-
-  it('should throw given an empty timeline', async () => {
-    await expect(async () => preprocessData([])).rejects.toThrow();
-  });
-
-  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();
-  });
-
-  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',
-    );
-  });
-
-  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',
-    );
-  });
-
-  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: {},
-    });
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      const data = await preprocessData([
-        ...createBoilerplateEntries(),
-        cpuProfilerSample,
-        randomSample,
-      ]);
-      expect(data).toMatchInlineSnapshot(`
-        Object {
-          "batchUIDToMeasuresMap": Map {},
-          "componentMeasures": Array [],
-          "duration": 0.005,
-          "flamechart": Array [],
-          "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 => Array [],
-            1 => Array [],
-            2 => Array [],
-            3 => Array [],
-            4 => Array [],
-            5 => Array [],
-            6 => Array [],
-            7 => Array [],
-            8 => Array [],
-            9 => Array [],
-            10 => Array [],
-            11 => Array [],
-            12 => Array [],
-            13 => Array [],
-            14 => Array [],
-            15 => Array [],
-            16 => Array [],
-            17 => Array [],
-            18 => Array [],
-            19 => Array [],
-            20 => Array [],
-            21 => Array [],
-            22 => Array [],
-            23 => Array [],
-            24 => Array [],
-            25 => Array [],
-            26 => Array [],
-            27 => Array [],
-            28 => Array [],
-            29 => Array [],
-            30 => Array [],
-          },
-          "nativeEvents": Array [],
-          "networkMeasures": Array [],
-          "otherUserTimingMarks": Array [],
-          "reactVersion": "17.0.3",
-          "schedulingEvents": Array [],
-          "snapshotHeight": 0,
-          "snapshots": Array [],
-          "startTime": 1,
-          "suspenseEvents": Array [],
-          "thrownErrors": Array [],
-        }
-      `);
-    }
-  });
-
-  it('should process legacy data format (before lane labels were added)', async () => {
-    const cpuProfilerSample = creactCpuProfilerSample();
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      // 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(`
-        Object {
-          "batchUIDToMeasuresMap": Map {
-            0 => Array [
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.004999999999999999,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.006,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.001,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.006,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.002999999999999999,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.008,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 1,
-                "duration": 0.0010000000000000009,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.009,
-                "type": "layout-effects",
-              },
-            ],
-          },
-          "componentMeasures": Array [],
-          "duration": 0.011,
-          "flamechart": Array [],
-          "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 => Array [],
-            1 => Array [],
-            2 => Array [],
-            3 => Array [],
-            4 => Array [],
-            5 => Array [],
-            6 => Array [],
-            7 => Array [],
-            8 => Array [],
-            9 => Array [
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.004999999999999999,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.006,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.001,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.006,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.002999999999999999,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.008,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 1,
-                "duration": 0.0010000000000000009,
-                "lanes": Array [
-                  9,
-                ],
-                "timestamp": 0.009,
-                "type": "layout-effects",
-              },
-            ],
-            10 => Array [],
-            11 => Array [],
-            12 => Array [],
-            13 => Array [],
-            14 => Array [],
-            15 => Array [],
-            16 => Array [],
-            17 => Array [],
-            18 => Array [],
-            19 => Array [],
-            20 => Array [],
-            21 => Array [],
-            22 => Array [],
-            23 => Array [],
-            24 => Array [],
-            25 => Array [],
-            26 => Array [],
-            27 => Array [],
-            28 => Array [],
-            29 => Array [],
-            30 => Array [],
-          },
-          "nativeEvents": Array [],
-          "networkMeasures": Array [],
-          "otherUserTimingMarks": Array [],
-          "reactVersion": "17.0.3",
-          "schedulingEvents": Array [
-            Object {
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.005,
-              "type": "schedule-render",
-              "warning": null,
-            },
-          ],
-          "snapshotHeight": 0,
-          "snapshots": Array [],
-          "startTime": 1,
-          "suspenseEvents": Array [],
-          "thrownErrors": Array [],
-        }
-      `);
-    }
-  });
-
-  it('should process a sample legacy render sequence', async () => {
-    ReactDOM.render(<div />, document.createElement('div'));
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      const data = await preprocessData([
-        ...createBoilerplateEntries(),
-        ...createUserTimingData(clearedMarks),
-      ]);
-      expect(data).toMatchInlineSnapshot(`
-        Object {
-          "batchUIDToMeasuresMap": Map {
-            0 => Array [
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.008,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.005,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.001,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.005,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.005999999999999999,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.007,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 1,
-                "duration": 0.0010000000000000009,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.011,
-                "type": "layout-effects",
-              },
-            ],
-          },
-          "componentMeasures": Array [],
-          "duration": 0.013,
-          "flamechart": Array [],
-          "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 => Array [
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.008,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.005,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.001,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.005,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.005999999999999999,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.007,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 1,
-                "duration": 0.0010000000000000009,
-                "lanes": Array [
-                  0,
-                ],
-                "timestamp": 0.011,
-                "type": "layout-effects",
-              },
-            ],
-            1 => Array [],
-            2 => Array [],
-            3 => Array [],
-            4 => Array [],
-            5 => Array [],
-            6 => Array [],
-            7 => Array [],
-            8 => Array [],
-            9 => Array [],
-            10 => Array [],
-            11 => Array [],
-            12 => Array [],
-            13 => Array [],
-            14 => Array [],
-            15 => Array [],
-            16 => Array [],
-            17 => Array [],
-            18 => Array [],
-            19 => Array [],
-            20 => Array [],
-            21 => Array [],
-            22 => Array [],
-            23 => Array [],
-            24 => Array [],
-            25 => Array [],
-            26 => Array [],
-            27 => Array [],
-            28 => Array [],
-            29 => Array [],
-            30 => Array [],
-          },
-          "nativeEvents": Array [],
-          "networkMeasures": Array [],
-          "otherUserTimingMarks": Array [
-            Object {
-              "name": "__v3",
-              "timestamp": 0.003,
-            },
-          ],
-          "reactVersion": "17.0.3",
-          "schedulingEvents": Array [
-            Object {
-              "lanes": Array [
-                0,
-              ],
-              "timestamp": 0.004,
-              "type": "schedule-render",
-              "warning": null,
-            },
-          ],
-          "snapshotHeight": 0,
-          "snapshots": Array [],
-          "startTime": 4,
-          "suspenseEvents": Array [],
-          "thrownErrors": Array [],
-        }
-      `);
-    }
-  });
-
-  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;
-    }
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      const root = ReactDOM.createRoot(document.createElement('div'));
-      act(() => root.render(<App />));
-
-      const data = await preprocessData([
-        ...createBoilerplateEntries(),
-        ...createUserTimingData(clearedMarks),
-      ]);
-      expect(data).toMatchInlineSnapshot(`
-        Object {
-          "batchUIDToMeasuresMap": Map {
-            0 => Array [
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.009999999999999998,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.005,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.003,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.005,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.006,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.009,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 1,
-                "duration": 0.0010000000000000009,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.013,
-                "type": "layout-effects",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.004,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.016,
-                "type": "passive-effects",
-              },
-            ],
-            1 => Array [
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.009999999999999998,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.021,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.002999999999999999,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.021,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.005999999999999998,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.025,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 1,
-                "duration": 0.0009999999999999974,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.029,
-                "type": "layout-effects",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.0030000000000000027,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.032,
-                "type": "passive-effects",
-              },
-            ],
-          },
-          "componentMeasures": Array [
-            Object {
-              "componentName": "App",
-              "duration": 0.001,
-              "timestamp": 0.006,
-              "type": "render",
-              "warning": null,
-            },
-            Object {
-              "componentName": "App",
-              "duration": 0.0019999999999999983,
-              "timestamp": 0.017,
-              "type": "passive-effect-mount",
-              "warning": null,
-            },
-            Object {
-              "componentName": "App",
-              "duration": 0.0010000000000000009,
-              "timestamp": 0.022,
-              "type": "render",
-              "warning": null,
-            },
-            Object {
-              "componentName": "App",
-              "duration": 0.0010000000000000009,
-              "timestamp": 0.033,
-              "type": "passive-effect-mount",
-              "warning": null,
-            },
-          ],
-          "duration": 0.035,
-          "flamechart": Array [],
-          "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 => Array [],
-            1 => Array [],
-            2 => Array [],
-            3 => Array [],
-            4 => Array [
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.009999999999999998,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.005,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.003,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.005,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.006,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.009,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 1,
-                "duration": 0.0010000000000000009,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.013,
-                "type": "layout-effects",
-              },
-              Object {
-                "batchUID": 0,
-                "depth": 0,
-                "duration": 0.004,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.016,
-                "type": "passive-effects",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.009999999999999998,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.021,
-                "type": "render-idle",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.002999999999999999,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.021,
-                "type": "render",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.005999999999999998,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.025,
-                "type": "commit",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 1,
-                "duration": 0.0009999999999999974,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.029,
-                "type": "layout-effects",
-              },
-              Object {
-                "batchUID": 1,
-                "depth": 0,
-                "duration": 0.0030000000000000027,
-                "lanes": Array [
-                  4,
-                ],
-                "timestamp": 0.032,
-                "type": "passive-effects",
-              },
-            ],
-            5 => Array [],
-            6 => Array [],
-            7 => Array [],
-            8 => Array [],
-            9 => Array [],
-            10 => Array [],
-            11 => Array [],
-            12 => Array [],
-            13 => Array [],
-            14 => Array [],
-            15 => Array [],
-            16 => Array [],
-            17 => Array [],
-            18 => Array [],
-            19 => Array [],
-            20 => Array [],
-            21 => Array [],
-            22 => Array [],
-            23 => Array [],
-            24 => Array [],
-            25 => Array [],
-            26 => Array [],
-            27 => Array [],
-            28 => Array [],
-            29 => Array [],
-            30 => Array [],
-          },
-          "nativeEvents": Array [],
-          "networkMeasures": Array [],
-          "otherUserTimingMarks": Array [
-            Object {
-              "name": "__v3",
-              "timestamp": 0.003,
-            },
-          ],
-          "reactVersion": "17.0.3",
-          "schedulingEvents": Array [
-            Object {
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.004,
-              "type": "schedule-render",
-              "warning": null,
-            },
-            Object {
-              "componentName": "App",
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.018,
-              "type": "schedule-state-update",
-              "warning": null,
-            },
-          ],
-          "snapshotHeight": 0,
-          "snapshots": Array [],
-          "startTime": 4,
-          "suspenseEvents": Array [],
-          "thrownErrors": Array [],
-        }
-      `);
-    }
-  });
-
-  // @gate enableSchedulingProfiler
-  it('should error if events and measures are incomplete', async () => {
-    const container = document.createElement('div');
-    ReactDOM.render(<div />, container);
-
-    const invalidMarks = clearedMarks.filter(
-      mark => !mark.includes('render-stop'),
-    );
-    const invalidUserTimingData = createUserTimingData(invalidMarks);
-
-    const error = spyOnDevAndProd(console, 'error');
-    preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
-    expect(error).toHaveBeenCalled();
-  });
-
-  // @gate enableSchedulingProfiler
-  it('should error if work is completed without being started', async () => {
-    const container = document.createElement('div');
-    ReactDOM.render(<div />, container);
-
-    const invalidMarks = clearedMarks.filter(
-      mark => !mark.includes('render-start'),
-    );
-    const invalidUserTimingData = createUserTimingData(invalidMarks);
-
-    const error = spyOnDevAndProd(console, 'error');
-    preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
-    expect(error).toHaveBeenCalled();
-  });
-
-  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(`
-      Array [
-        Object {
-          "name": "VCWithoutImage: root",
-          "timestamp": 0.003,
-        },
-        Object {
-          "name": "--a-mark-that-looks-like-one-of-ours",
-          "timestamp": 0.004,
-        },
-        Object {
-          "name": "Some other mark",
-          "timestamp": 0.005,
-        },
-      ]
-    `);
-  });
-
-  it('should include a suspended resource "displayName" if one is set', async () => {
-    let promise = null;
-    let resolvedValue = null;
-    function readValue(value) {
-      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;
-    }
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      const testMarks = [creactCpuProfilerSample()];
-
-      const root = ReactDOM.createRoot(document.createElement('div'));
-      act(() =>
-        root.render(
-          <React.Suspense fallback="Loading...">
-            <Component />
-          </React.Suspense>,
-        ),
-      );
-
-      testMarks.push(...createUserTimingData(clearedMarks));
-
-      const data = await act(() => preprocessData(testMarks));
-      expect(data.suspenseEvents).toHaveLength(1);
-      expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
-    }
-  });
-
-  describe('warnings', () => {
-    describe('long event handlers', () => {
-      it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
-        function App() {
-          return null;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const testMarks = [
-            creactCpuProfilerSample(),
-            ...createBoilerplateEntries(),
-            createNativeEventEntry('click', 5),
-          ];
-
-          clearedMarks.splice(0);
-
-          ReactDOM.render(<App />, document.createElement('div'));
-
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          const data = await preprocessData(testMarks);
-          const event = data.nativeEvents.find(({type}) => type === 'click');
-          expect(event.warning).toBe(null);
-        }
-      });
-
-      it('should not warn about long events if the cause was non-React JavaScript', async () => {
-        function App() {
-          return null;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const testMarks = [
-            creactCpuProfilerSample(),
-            ...createBoilerplateEntries(),
-            createNativeEventEntry('click', 25000),
-          ];
-
-          startTime += 2000;
-
-          clearedMarks.splice(0);
-
-          ReactDOM.render(<App />, document.createElement('div'));
-
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          const data = await preprocessData(testMarks);
-          const event = data.nativeEvents.find(({type}) => type === 'click');
-          expect(event.warning).toBe(null);
-        }
-      });
-
-      it('should warn when React scedules a long (sync) update inside of an event', async () => {
-        function App() {
-          return null;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const testMarks = [
-            creactCpuProfilerSample(),
-            ...createBoilerplateEntries(),
-            createNativeEventEntry('click', 25000),
-          ];
-
-          clearedMarks.splice(0);
-
-          ReactDOM.render(<App />, document.createElement('div'));
-
-          clearedMarks.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."`,
-          );
-        }
-      });
-
-      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.unstable_yieldValue(`${id}:${value}`);
-          return null;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const testMarks = [
-            creactCpuProfilerSample(),
-            ...createBoilerplateEntries(),
-          ];
-
-          // Advance the clock by some arbitrary amount.
-          startTime += 50000;
-
-          const root = ReactDOM.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} />
-              </>,
-            );
-            expect(Scheduler).toFlushAndYieldThrough(['A:1']);
-
-            testMarks.push(...createUserTimingData(clearedMarks));
-            clearedMarks.splice(0);
-
-            // 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} />
-                </>,
-              );
-            });
-          });
-
-          expect(Scheduler).toHaveYielded(['A:2', 'B:2']);
-
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          const data = await preprocessData(testMarks);
-          const event = data.nativeEvents.find(({type}) => type === 'click');
-          expect(event.warning).toBe(null);
-        }
-      });
-    });
-
-    describe('nested updates', () => {
-      it('should not warn about short nested (state) updates during layout effects', async () => {
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
-          Scheduler.unstable_yieldValue(
-            `Component ${didMount ? 'update' : 'mount'}`,
-          );
-          React.useLayoutEffect(() => {
-            setDidMount(true);
-          }, []);
-          return didMount;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() => {
-            root.render(<Component />);
-          });
-
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
-
-          const data = await preprocessData([
-            ...createBoilerplateEntries(),
-            ...createUserTimingData(clearedMarks),
-          ]);
-
-          const event = data.schedulingEvents.find(
-            ({type}) => type === 'schedule-state-update',
-          );
-          expect(event.warning).toBe(null);
-        }
-      });
-
-      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.unstable_yieldValue(
-              `Component ${this._didMount ? 'update' : 'mount'}`,
-            );
-            return null;
-          }
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() => {
-            root.render(<Component />);
-          });
-
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
-
-          const data = await preprocessData([
-            ...createBoilerplateEntries(),
-            ...createUserTimingData(clearedMarks),
-          ]);
-
-          const event = data.schedulingEvents.find(
-            ({type}) => type === 'schedule-force-update',
-          );
-          expect(event.warning).toBe(null);
-        }
-      });
-
-      it('should warn about long nested (state) updates during layout effects', async () => {
-        function Component() {
-          const [didMount, setDidMount] = React.useState(false);
-          Scheduler.unstable_yieldValue(
-            `Component ${didMount ? 'update' : 'mount'}`,
-          );
-          // Fake a long render
-          startTime += 20000;
-          React.useLayoutEffect(() => {
-            setDidMount(true);
-          }, []);
-          return didMount;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const cpuProfilerSample = creactCpuProfilerSample();
-
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() => {
-            root.render(<Component />);
-          });
-
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
-
-          const testMarks = [];
-          clearedMarks.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)."`,
-          );
-        }
-      });
-
-      it('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.unstable_yieldValue(
-              `Component ${this._didMount ? 'update' : 'mount'}`,
-            );
-            return null;
-          }
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const cpuProfilerSample = creactCpuProfilerSample();
-
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() => {
-            root.render(<Component />);
-          });
-
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
-
-          const testMarks = [];
-          clearedMarks.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)."`,
-          );
-        }
-      });
-
-      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.unstable_yieldValue(
-            `Component rendered with value ${value}`,
-          );
-
-          // Fake a long render
-          if (value !== 0) {
-            Scheduler.unstable_yieldValue('Long render');
-            startTime += 20000;
-          }
-
-          React.useLayoutEffect(() => {
-            startTransition(() => {
-              setValue(1);
-            });
-          }, []);
-
-          return value;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const cpuProfilerSample = creactCpuProfilerSample();
-
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() => {
-            root.render(<Component />);
-          });
-
-          expect(Scheduler).toHaveYielded([
-            'Component rendered with value 0',
-            'Component rendered with value 0',
-            'Component rendered with value 1',
-            'Long render',
-          ]);
-
-          const testMarks = [];
-          clearedMarks.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();
-          });
-        }
-      });
-
-      it('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.unstable_yieldValue(
-            `Component rendered with value ${value} and deferredValue ${deferredValue}`,
-          );
-
-          // Fake a long render
-          if (deferredValue !== 0) {
-            Scheduler.unstable_yieldValue('Long render');
-            startTime += 20000;
-          }
-
-          React.useLayoutEffect(() => {
-            setValue(1);
-          }, []);
-
-          return value + deferredValue;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const cpuProfilerSample = creactCpuProfilerSample();
-
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() => {
-            root.render(<Component />);
-          });
-
-          expect(Scheduler).toHaveYielded([
-            '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 = [];
-          clearedMarks.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', () => {
-      it('shoult parse Errors thrown during render', async () => {
-        spyOnDev(console, 'error');
-        spyOnProd(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');
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          const testMarks = [creactCpuProfilerSample()];
-
-          // Mount and commit the app
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() =>
-            root.render(
-              <ErrorBoundary>
-                <ExampleThatThrows />
-              </ErrorBoundary>,
-            ),
-          );
-
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          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 the a component suspends while profiling
-      // before the first commit is logged (so the lane-to-labels map will not yet exist).
-      it('should warn about suspending during an udpate', async () => {
-        let promise = null;
-        let resolvedValue = null;
-        function readValue(value) {
-          if (resolvedValue !== null) {
-            return resolvedValue;
-          } else if (promise === null) {
-            promise = Promise.resolve(true).then(() => {
-              resolvedValue = value;
-            });
-          }
-          throw promise;
-        }
-
-        function Component({shouldSuspend}) {
-          Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
-          if (shouldSuspend) {
-            readValue(123);
-          }
-          return null;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          // Mount and commit the app
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() =>
-            root.render(
-              <React.Suspense fallback="Loading...">
-                <Component shouldSuspend={false} />
-              </React.Suspense>,
-            ),
-          );
-
-          clearedMarks.splice(0);
-
-          const testMarks = [creactCpuProfilerSample()];
-
-          // Start profiling and suspend during a render.
-          act(() =>
-            root.render(
-              <React.Suspense fallback="Loading...">
-                <Component shouldSuspend={true} />
-              </React.Suspense>,
-            ),
-          );
-
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          const data = await act(() => 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."`,
-          );
-        }
-      });
-
-      it('should not warn about suspending during an transition', async () => {
-        let promise = null;
-        let resolvedValue = null;
-        function readValue(value) {
-          if (resolvedValue !== null) {
-            return resolvedValue;
-          } else if (promise === null) {
-            promise = Promise.resolve(true).then(() => {
-              resolvedValue = value;
-            });
-          }
-          throw promise;
-        }
-
-        function Component({shouldSuspend}) {
-          Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
-          if (shouldSuspend) {
-            readValue(123);
-          }
-          return null;
-        }
-
-        if (gate(flags => flags.enableSchedulingProfiler)) {
-          // Mount and commit the app
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          act(() =>
-            root.render(
-              <React.Suspense fallback="Loading...">
-                <Component shouldSuspend={false} />
-              </React.Suspense>,
-            ),
-          );
-
-          clearedMarks.splice(0);
-
-          const testMarks = [creactCpuProfilerSample()];
-
-          // Start profiling and suspend during a render.
-          await act(async () =>
-            React.startTransition(() =>
-              root.render(
-                <React.Suspense fallback="Loading...">
-                  <Component shouldSuspend={true} />
-                </React.Suspense>,
-              ),
-            ),
-          );
-
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          const data = await act(() => 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
-});
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 3e344d33261e..e8d8b38b55a4 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -35,7 +35,8 @@ import checkPropTypes from 'shared/checkPropTypes';
 import {
   markComponentRenderStarted,
   markComponentRenderStopped,
-} from './SchedulingProfiler';
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook.new';
 import {
   IndeterminateComponent,
   FunctionComponent,
@@ -240,7 +241,6 @@ import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
-import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 import {
   getForksAtLevel,
   isForkedChild,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 5192d6b2fc99..3e1dc87620a1 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -35,7 +35,8 @@ import checkPropTypes from 'shared/checkPropTypes';
 import {
   markComponentRenderStarted,
   markComponentRenderStopped,
-} from './SchedulingProfiler';
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook.old';
 import {
   IndeterminateComponent,
   FunctionComponent,
@@ -240,7 +241,6 @@ import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
-import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 import {
   getForksAtLevel,
   isForkedChild,
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 18e56db09313..0279cabd519b 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -37,7 +37,6 @@ import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFrom
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
-import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
@@ -74,11 +73,11 @@ import {
   scheduleUpdateOnFiber,
 } from './ReactFiberWorkLoop.new';
 import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
-
 import {
   markForceUpdateScheduled,
   markStateUpdateScheduled,
-} from './SchedulingProfiler';
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook.new';
 
 const fakeInternalInstance = {};
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index a54dfabfca52..184993ff35b0 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -37,7 +37,6 @@ import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFrom
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
-import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
@@ -74,11 +73,11 @@ import {
   scheduleUpdateOnFiber,
 } from './ReactFiberWorkLoop.old';
 import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
-
 import {
   markForceUpdateScheduled,
   markStateUpdateScheduled,
-} from './SchedulingProfiler';
+  setIsStrictModeForDevtools,
+} from './ReactFiberDevToolsHook.old';
 
 const fakeInternalInstance = {};
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index efdc515d9c0b..ecb83e28171c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -86,8 +86,6 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
-import {onCommitUnmount} from './ReactFiberDevToolsHook.new';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
   isCurrentUpdateNested,
@@ -147,6 +145,7 @@ import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
 import {doesFiberContain} from './ReactFiberTreeReflection';
 import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
 import {
+  isDevToolsPresent,
   markComponentPassiveEffectMountStarted,
   markComponentPassiveEffectMountStopped,
   markComponentPassiveEffectUnmountStarted,
@@ -155,7 +154,8 @@ import {
   markComponentLayoutEffectMountStopped,
   markComponentLayoutEffectUnmountStarted,
   markComponentLayoutEffectUnmountStopped,
-} from './SchedulingProfiler';
+  onCommitUnmount,
+} from './ReactFiberDevToolsHook.new';
 import {releaseCache, retainCache} from './ReactFiberCacheComponent.new';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7d4d5d7aeece..8466b41c85dc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -86,8 +86,6 @@ import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
-import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
-import {onCommitUnmount} from './ReactFiberDevToolsHook.old';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
   isCurrentUpdateNested,
@@ -147,6 +145,7 @@ import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';
 import {doesFiberContain} from './ReactFiberTreeReflection';
 import {invokeGuardedCallback, clearCaughtError} from 'shared/ReactErrorUtils';
 import {
+  isDevToolsPresent,
   markComponentPassiveEffectMountStarted,
   markComponentPassiveEffectMountStopped,
   markComponentPassiveEffectUnmountStarted,
@@ -155,7 +154,8 @@ import {
   markComponentLayoutEffectMountStopped,
   markComponentLayoutEffectUnmountStarted,
   markComponentLayoutEffectUnmountStopped,
-} from './SchedulingProfiler';
+  onCommitUnmount,
+} from './ReactFiberDevToolsHook.old';
 import {releaseCache, retainCache} from './ReactFiberCacheComponent.old';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index d1748dd8f228..2978f7b3279b 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -7,16 +7,22 @@
  * @flow
  */
 
-import {
-  consoleManagedByDevToolsDuringStrictMode,
-  enableProfilerTimer,
-} from 'shared/ReactFeatureFlags';
-
+import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {EventPriority} from './ReactEventPriorities.new';
+import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
 
+import {
+  getLabelForLane,
+  TotalLanes,
+} from 'react-reconciler/src/ReactFiberLane.new';
 import {DidCapture} from './ReactFiberFlags';
+import {
+  consoleManagedByDevToolsDuringStrictMode,
+  enableProfilerTimer,
+  enableSchedulingProfiler,
+} from 'shared/ReactFeatureFlags';
 import {
   DiscreteEventPriority,
   ContinuousEventPriority,
@@ -38,6 +44,7 @@ declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
 let rendererID = null;
 let injectedHook = null;
+let injectedProfilingHooks: DevToolsProfilingHooks | null = null;
 let hasLoggedError = false;
 
 export const isDevToolsPresent =
@@ -67,7 +74,11 @@ export function injectInternals(internals: Object): boolean {
     return true;
   }
   try {
-    rendererID = hook.inject(internals);
+    rendererID = hook.inject({
+      ...internals,
+      getLaneLabelMap,
+      injectProfilingHooks,
+    });
     // We have successfully injected, so now it is safe to set up hooks.
     injectedHook = hook;
   } catch (err) {
@@ -212,3 +223,302 @@ export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
     }
   }
 }
+
+// Profiler API hooks
+
+function injectProfilingHooks(profilingHooks: DevToolsProfilingHooks): void {
+  injectedProfilingHooks = profilingHooks;
+}
+
+function getLaneLabelMap(): Map<Lane, string> {
+  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;
+}
+
+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/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index aeaadc84b019..d26d12236c24 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -7,16 +7,22 @@
  * @flow
  */
 
-import {
-  consoleManagedByDevToolsDuringStrictMode,
-  enableProfilerTimer,
-} from 'shared/ReactFeatureFlags';
-
+import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
-import type {ReactNodeList} from 'shared/ReactTypes';
+import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {EventPriority} from './ReactEventPriorities.old';
+import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
 
+import {
+  getLabelForLane,
+  TotalLanes,
+} from 'react-reconciler/src/ReactFiberLane.old';
 import {DidCapture} from './ReactFiberFlags';
+import {
+  consoleManagedByDevToolsDuringStrictMode,
+  enableProfilerTimer,
+  enableSchedulingProfiler,
+} from 'shared/ReactFeatureFlags';
 import {
   DiscreteEventPriority,
   ContinuousEventPriority,
@@ -38,6 +44,7 @@ declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: Object | void;
 
 let rendererID = null;
 let injectedHook = null;
+let injectedProfilingHooks: DevToolsProfilingHooks | null = null;
 let hasLoggedError = false;
 
 export const isDevToolsPresent =
@@ -67,7 +74,11 @@ export function injectInternals(internals: Object): boolean {
     return true;
   }
   try {
-    rendererID = hook.inject(internals);
+    rendererID = hook.inject({
+      ...internals,
+      getLaneLabelMap,
+      injectProfilingHooks,
+    });
     // We have successfully injected, so now it is safe to set up hooks.
     injectedHook = hook;
   } catch (err) {
@@ -212,3 +223,302 @@ export function setIsStrictModeForDevtools(newIsStrictMode: boolean) {
     }
   }
 }
+
+// Profiler API hooks
+
+function injectProfilingHooks(profilingHooks: DevToolsProfilingHooks): void {
+  injectedProfilingHooks = profilingHooks;
+}
+
+function getLaneLabelMap(): Map<Lane, string> {
+  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;
+}
+
+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/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 2c26859bafe7..cf8086b075aa 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -101,7 +101,7 @@ import {
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource.new';
 import {logStateUpdateScheduled} from './DebugTracing';
-import {markStateUpdateScheduled} from './SchedulingProfiler';
+import {markStateUpdateScheduled} from './ReactFiberDevToolsHook.new';
 import {createCache, CacheContext} from './ReactFiberCacheComponent.new';
 import {
   createUpdate as createLegacyQueueUpdate,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 077073bbeef3..ff2aff6720e1 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -101,7 +101,7 @@ import {
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource.old';
 import {logStateUpdateScheduled} from './DebugTracing';
-import {markStateUpdateScheduled} from './SchedulingProfiler';
+import {markStateUpdateScheduled} from './ReactFiberDevToolsHook.old';
 import {createCache, CacheContext} from './ReactFiberCacheComponent.old';
 import {
   createUpdate as createLegacyQueueUpdate,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 1b8b9502de3e..1cf200e35d56 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -44,7 +44,11 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.new';
 import {createFiberRoot} from './ReactFiberRoot.new';
-import {injectInternals, onScheduleRoot} from './ReactFiberDevToolsHook.new';
+import {
+  injectInternals,
+  markRenderScheduled,
+  onScheduleRoot,
+} from './ReactFiberDevToolsHook.new';
 import {
   requestEventTime,
   requestUpdateLane,
@@ -87,7 +91,6 @@ import {
   setRefreshHandler,
   findHostInstancesForRefresh,
 } from './ReactFiberHotReloading.new';
-import {markRenderScheduled} from './SchedulingProfiler';
 import ReactVersion from 'shared/ReactVersion';
 export {registerMutableSourceForHydration} from './ReactMutableSource.new';
 export {createPortal} from './ReactPortal';
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 8649ff698984..4b02959ab084 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -44,7 +44,11 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.old';
 import {createFiberRoot} from './ReactFiberRoot.old';
-import {injectInternals, onScheduleRoot} from './ReactFiberDevToolsHook.old';
+import {
+  injectInternals,
+  markRenderScheduled,
+  onScheduleRoot,
+} from './ReactFiberDevToolsHook.old';
 import {
   requestEventTime,
   requestUpdateLane,
@@ -87,7 +91,6 @@ import {
   setRefreshHandler,
   findHostInstancesForRefresh,
 } from './ReactFiberHotReloading.old';
-import {markRenderScheduled} from './SchedulingProfiler';
 import ReactVersion from 'shared/ReactVersion';
 export {registerMutableSourceForHydration} from './ReactMutableSource.old';
 export {createPortal} from './ReactPortal';
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 740ed6dca40a..b108da0106e4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -65,20 +65,6 @@ import {
   logRenderStarted,
   logRenderStopped,
 } from './DebugTracing';
-import {
-  markCommitStarted,
-  markCommitStopped,
-  markComponentRenderStopped,
-  markComponentSuspended,
-  markComponentErrored,
-  markLayoutEffectsStarted,
-  markLayoutEffectsStopped,
-  markPassiveEffectsStarted,
-  markPassiveEffectsStopped,
-  markRenderStarted,
-  markRenderYielded,
-  markRenderStopped,
-} from './SchedulingProfiler';
 
 import {
   resetAfterCommit,
@@ -224,9 +210,21 @@ import {
   clearCaughtError,
 } from 'shared/ReactErrorUtils';
 import {
+  isDevToolsPresent,
+  markCommitStarted,
+  markCommitStopped,
+  markComponentRenderStopped,
+  markComponentSuspended,
+  markComponentErrored,
+  markLayoutEffectsStarted,
+  markLayoutEffectsStopped,
+  markPassiveEffectsStarted,
+  markPassiveEffectsStopped,
+  markRenderStarted,
+  markRenderYielded,
+  markRenderStopped,
   onCommitRoot as onCommitRootDevTools,
   onPostCommitRoot as onPostCommitRootDevTools,
-  isDevToolsPresent,
 } from './ReactFiberDevToolsHook.new';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 import {releaseCache} from './ReactFiberCacheComponent.new';
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 673da7908c28..a32f8853337e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -65,20 +65,6 @@ import {
   logRenderStarted,
   logRenderStopped,
 } from './DebugTracing';
-import {
-  markCommitStarted,
-  markCommitStopped,
-  markComponentRenderStopped,
-  markComponentSuspended,
-  markComponentErrored,
-  markLayoutEffectsStarted,
-  markLayoutEffectsStopped,
-  markPassiveEffectsStarted,
-  markPassiveEffectsStopped,
-  markRenderStarted,
-  markRenderYielded,
-  markRenderStopped,
-} from './SchedulingProfiler';
 
 import {
   resetAfterCommit,
@@ -224,9 +210,21 @@ import {
   clearCaughtError,
 } from 'shared/ReactErrorUtils';
 import {
+  isDevToolsPresent,
+  markCommitStarted,
+  markCommitStopped,
+  markComponentRenderStopped,
+  markComponentSuspended,
+  markComponentErrored,
+  markLayoutEffectsStarted,
+  markLayoutEffectsStopped,
+  markPassiveEffectsStarted,
+  markPassiveEffectsStopped,
+  markRenderStarted,
+  markRenderYielded,
+  markRenderStopped,
   onCommitRoot as onCommitRootDevTools,
   onPostCommitRoot as onPostCommitRootDevTools,
-  isDevToolsPresent,
 } from './ReactFiberDevToolsHook.old';
 import {onCommitRoot as onCommitRootTestSelector} from './ReactTestSelectors';
 import {releaseCache} from './ReactFiberCacheComponent.old';
diff --git a/packages/react-reconciler/src/SchedulingProfiler.js b/packages/react-reconciler/src/SchedulingProfiler.js
deleted file mode 100644
index 6ef0b6293bc7..000000000000
--- a/packages/react-reconciler/src/SchedulingProfiler.js
+++ /dev/null
@@ -1,395 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {Lane, Lanes} from './ReactFiberLane.old';
-import type {Fiber} from './ReactInternalTypes';
-import type {Wakeable} from 'shared/ReactTypes';
-
-import {
-  enableNewReconciler,
-  enableSchedulingProfiler,
-} from 'shared/ReactFeatureFlags';
-import ReactVersion from 'shared/ReactVersion';
-import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
-import isArray from 'shared/isArray';
-
-import {
-  getLabelForLane as getLabelForLane_old,
-  TotalLanes as TotalLanes_old,
-} from 'react-reconciler/src/ReactFiberLane.old';
-import {
-  getLabelForLane as getLabelForLane_new,
-  TotalLanes as TotalLanes_new,
-} from 'react-reconciler/src/ReactFiberLane.new';
-
-const getLabelForLane = enableNewReconciler
-  ? getLabelForLane_new
-  : getLabelForLane_old;
-
-const TotalLanes = enableNewReconciler ? TotalLanes_new : TotalLanes_old;
-
-/**
- * If performance exists and supports the subset of the User Timing API that we
- * require.
- */
-const supportsUserTiming =
-  typeof performance !== 'undefined' &&
-  typeof performance.mark === 'function' &&
-  typeof performance.clearMarks === 'function';
-
-let supportsUserTimingV3 = false;
-if (enableSchedulingProfiler) {
-  if (supportsUserTiming) {
-    const CHECK_V3_MARK = '__v3';
-    const markOptions = {};
-    // $FlowFixMe: Ignore Flow complaining about needing a value
-    Object.defineProperty(markOptions, 'startTime', {
-      get: function() {
-        supportsUserTimingV3 = true;
-        return 0;
-      },
-      set: function() {},
-    });
-
-    try {
-      // $FlowFixMe: Flow expects the User Timing level 2 API.
-      performance.mark(CHECK_V3_MARK, markOptions);
-    } catch (error) {
-      // Ignore
-    } finally {
-      performance.clearMarks(CHECK_V3_MARK);
-    }
-  }
-}
-
-const laneLabels: Array<string> = [];
-
-export function getLaneLabels(): Array<string> {
-  if (laneLabels.length === 0) {
-    let lane = 1;
-    for (let index = 0; index < TotalLanes; index++) {
-      laneLabels.push(((getLabelForLane(lane): any): string));
-
-      lane *= 2;
-    }
-  }
-  return laneLabels;
-}
-
-function markLaneToLabelMetadata() {
-  getLaneLabels();
-
-  markAndClear(`--react-lane-labels-${laneLabels.join(',')}`);
-}
-
-function markAndClear(name) {
-  performance.mark(name);
-  performance.clearMarks(name);
-}
-
-function markVersionMetadata() {
-  markAndClear(`--react-version-${ReactVersion}`);
-  markAndClear(`--profiler-version-${SCHEDULING_PROFILER_VERSION}`);
-}
-
-function markInternalModuleRanges() {
-  /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  if (
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-    typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.getInternalModuleRanges === 'function'
-  ) {
-    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)) {
-      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}`);
-        }
-      }
-    }
-  }
-}
-
-export function markCommitStarted(lanes: Lanes): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear(`--commit-start-${lanes}`);
-
-      // Certain types of metadata should be logged infrequently.
-      // Normally we would log this during module init,
-      // but there's no guarantee a user is profiling at that time.
-      // Commits happen infrequently (less than renders or state updates)
-      // so we log this extra information along with a commit.
-      // It will likely be logged more than once but that's okay.
-      //
-      // TODO Once DevTools supports starting/stopping the profiler,
-      // we can log this data only once (when started) and remove the per-commit logging.
-      markVersionMetadata();
-      markLaneToLabelMetadata();
-      markInternalModuleRanges();
-    }
-  }
-}
-
-export function markCommitStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--commit-stop');
-    }
-  }
-}
-
-export function markComponentRenderStarted(fiber: Fiber): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (timeline) Add component stack id
-      markAndClear(`--component-render-start-${componentName}`);
-    }
-  }
-}
-
-export function markComponentRenderStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--component-render-stop');
-    }
-  }
-}
-
-export function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (timeline) Add component stack id
-      markAndClear(`--component-passive-effect-mount-start-${componentName}`);
-    }
-  }
-}
-
-export function markComponentPassiveEffectMountStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--component-passive-effect-mount-stop');
-    }
-  }
-}
-
-export function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (timeline) Add component stack id
-      markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
-    }
-  }
-}
-
-export function markComponentPassiveEffectUnmountStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--component-passive-effect-unmount-stop');
-    }
-  }
-}
-
-export function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (timeline) Add component stack id
-      markAndClear(`--component-layout-effect-mount-start-${componentName}`);
-    }
-  }
-}
-
-export function markComponentLayoutEffectMountStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--component-layout-effect-mount-stop');
-    }
-  }
-}
-
-export function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (timeline) Add component stack id
-      markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
-    }
-  }
-}
-
-export function markComponentLayoutEffectUnmountStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--component-layout-effect-unmount-stop');
-    }
-  }
-}
-
-export function markComponentErrored(
-  fiber: Fiber,
-  thrownValue: mixed,
-  lanes: Lanes,
-): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(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) Add component stack id
-      markAndClear(`--error-${componentName}-${phase}-${message}`);
-    }
-  }
-}
-
-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-
-// $FlowFixMe: 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);
-}
-
-export function markComponentSuspended(
-  fiber: Fiber,
-  wakeable: Wakeable,
-  lanes: Lanes,
-): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const eventType = wakeableIDs.has(wakeable) ? 'resuspend' : 'suspend';
-      const id = getWakeableID(wakeable);
-      const componentName = getComponentNameFromFiber(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 || '';
-
-      // TODO (timeline) Add component stack id
-      markAndClear(
-        `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
-      );
-      wakeable.then(
-        () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
-        () => markAndClear(`--suspense-rejected-${id}-${componentName}`),
-      );
-    }
-  }
-}
-
-export function markLayoutEffectsStarted(lanes: Lanes): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear(`--layout-effects-start-${lanes}`);
-    }
-  }
-}
-
-export function markLayoutEffectsStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--layout-effects-stop');
-    }
-  }
-}
-
-export function markPassiveEffectsStarted(lanes: Lanes): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear(`--passive-effects-start-${lanes}`);
-    }
-  }
-}
-
-export function markPassiveEffectsStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--passive-effects-stop');
-    }
-  }
-}
-
-export function markRenderStarted(lanes: Lanes): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear(`--render-start-${lanes}`);
-    }
-  }
-}
-
-export function markRenderYielded(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--render-yield');
-    }
-  }
-}
-
-export function markRenderStopped(): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear('--render-stop');
-    }
-  }
-}
-
-export function markRenderScheduled(lane: Lane): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      markAndClear(`--schedule-render-${lane}`);
-    }
-  }
-}
-
-export function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (timeline) Add component stack id
-      markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
-    }
-  }
-}
-
-export function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
-  if (enableSchedulingProfiler) {
-    if (supportsUserTimingV3) {
-      const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
-      // TODO (timeline) Add component stack id
-      markAndClear(`--schedule-state-update-${lane}-${componentName}`);
-    }
-  }
-}
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index 7770c070667d..44301017338c 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -51,6 +51,32 @@ describe('updaters', () => {
       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(
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
deleted file mode 100644
index 6b1e4290d010..000000000000
--- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+++ /dev/null
@@ -1,998 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- * @jest-environment node
- */
-
-'use strict';
-
-describe('SchedulingProfiler', () => {
-  let React;
-  let ReactTestRenderer;
-  let ReactNoop;
-  let Scheduler;
-  let act;
-
-  let clearedMarks;
-  let featureDetectionMarkName = null;
-  let marks;
-
-  function createUserTimingPolyfill() {
-    featureDetectionMarkName = null;
-
-    clearedMarks = [];
-    marks = [];
-
-    // 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) {
-        clearedMarks.push(markName);
-        marks = marks.filter(mark => mark !== markName);
-      },
-      mark(markName, markOptions) {
-        if (featureDetectionMarkName === null) {
-          featureDetectionMarkName = markName;
-        }
-        marks.push(markName);
-        if (markOptions != null) {
-          // This is triggers the feature detection.
-          markOptions.startTime++;
-        }
-      },
-    };
-  }
-
-  function clearPendingMarks() {
-    clearedMarks.splice(0);
-  }
-
-  function getMarks() {
-    return clearedMarks[0] === featureDetectionMarkName
-      ? clearedMarks.slice(1)
-      : clearedMarks;
-  }
-
-  beforeEach(() => {
-    jest.resetModules();
-
-    global.performance = createUserTimingPolyfill();
-
-    React = require('react');
-
-    // ReactNoop must be imported after ReactTestRenderer!
-    ReactTestRenderer = require('react-test-renderer');
-    ReactNoop = require('react-noop-renderer');
-
-    Scheduler = require('scheduler');
-    act = require('jest-react').act;
-  });
-
-  afterEach(() => {
-    // Verify all logged marks also get cleared.
-    expect(marks).toHaveLength(0);
-
-    delete global.performance;
-  });
-
-  // @gate !enableSchedulingProfiler
-  it('should not mark if enableSchedulingProfiler is false', () => {
-    ReactTestRenderer.create(<div />);
-    expect(getMarks()).toEqual([]);
-  });
-
-  it('should mark sync render without suspends or state updates', () => {
-    ReactTestRenderer.create(<div />);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-1",
-                "--render-start-1",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-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",
-              ]
-          `);
-    }
-  });
-
-  it('should mark concurrent render without suspends or state updates', () => {
-    ReactTestRenderer.create(<div />, {unstable_isConcurrent: true});
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--layout-effects-stop",
-                "--commit-stop",
-              ]
-          `);
-    }
-  });
-
-  it('should mark render yields', async () => {
-    function Bar() {
-      Scheduler.unstable_yieldValue('Bar');
-      return null;
-    }
-
-    function Foo() {
-      Scheduler.unstable_yieldValue('Foo');
-      return <Bar />;
-    }
-
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.startTransition(() => {
-        ReactNoop.render(<Foo />);
-      });
-
-      // Do one step of work.
-      expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
-
-      if (gate(flags => flags.enableSchedulingProfiler)) {
-        expect(getMarks()).toMatchInlineSnapshot(`
-                  Array [
-                    "--schedule-render-64",
-                    "--render-start-64",
-                    "--component-render-start-Foo",
-                    "--component-render-stop",
-                    "--render-yield",
-                  ]
-              `);
-      }
-    } else {
-      ReactNoop.render(<Foo />);
-
-      // Do one step of work.
-      expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
-
-      if (gate(flags => flags.enableSchedulingProfiler)) {
-        expect(getMarks()).toMatchInlineSnapshot(`
-                  Array []
-              `);
-      }
-    }
-  });
-
-  it('should mark sync render with suspense that resolves', async () => {
-    const fakeSuspensePromise = Promise.resolve(true);
-    function Example() {
-      throw fakeSuspensePromise;
-    }
-
-    ReactTestRenderer.create(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-    );
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-1",
-          "--render-start-1",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--suspense-suspend-0-Example-mount-1-",
-          "--render-stop",
-          "--commit-start-1",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-        ]
-      `);
-    }
-
-    clearPendingMarks();
-
-    await fakeSuspensePromise;
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--suspense-resolved-0-Example",
-              ]
-          `);
-    }
-  });
-
-  it('should mark sync render with suspense that rejects', async () => {
-    const fakeSuspensePromise = Promise.reject(new Error('error'));
-    function Example() {
-      throw fakeSuspensePromise;
-    }
-
-    ReactTestRenderer.create(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-    );
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-1",
-          "--render-start-1",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--suspense-suspend-0-Example-mount-1-",
-          "--render-stop",
-          "--commit-start-1",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-        ]
-      `);
-    }
-
-    clearPendingMarks();
-
-    await expect(fakeSuspensePromise).rejects.toThrow();
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--suspense-rejected-0-Example",
-              ]
-          `);
-    }
-  });
-
-  it('should mark concurrent render with suspense that resolves', async () => {
-    const fakeSuspensePromise = Promise.resolve(true);
-    function Example() {
-      throw fakeSuspensePromise;
-    }
-
-    ReactTestRenderer.create(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-      {unstable_isConcurrent: true},
-    );
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--suspense-suspend-0-Example-mount-16-",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--layout-effects-stop",
-          "--commit-stop",
-        ]
-      `);
-    }
-
-    clearPendingMarks();
-
-    await fakeSuspensePromise;
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--suspense-resolved-0-Example",
-              ]
-          `);
-    }
-  });
-
-  it('should mark concurrent render with suspense that rejects', async () => {
-    const fakeSuspensePromise = Promise.reject(new Error('error'));
-    function Example() {
-      throw fakeSuspensePromise;
-    }
-
-    ReactTestRenderer.create(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-      {unstable_isConcurrent: true},
-    );
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--suspense-suspend-0-Example-mount-16-",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--layout-effects-stop",
-          "--commit-stop",
-        ]
-      `);
-    }
-
-    clearPendingMarks();
-
-    await expect(fakeSuspensePromise).rejects.toThrow();
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--suspense-rejected-0-Example",
-              ]
-          `);
-    }
-  });
-
-  it('should mark cascading class component state updates', () => {
-    class Example extends React.Component {
-      state = {didMount: false};
-      componentDidMount() {
-        this.setState({didMount: true});
-      }
-      render() {
-        return null;
-      }
-    }
-
-    ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--schedule-state-update-1-Example",
-          "--layout-effects-stop",
-          "--render-start-1",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-1",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-          "--commit-stop",
-        ]
-      `);
-    }
-  });
-
-  it('should mark cascading class component force updates', () => {
-    class Example extends React.Component {
-      componentDidMount() {
-        this.forceUpdate();
-      }
-      render() {
-        return null;
-      }
-    }
-
-    ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--schedule-forced-update-1-Example",
-          "--layout-effects-stop",
-          "--render-start-1",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-1",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-          "--commit-stop",
-        ]
-      `);
-    }
-  });
-
-  it('should mark render phase state updates for class component', () => {
-    class Example extends React.Component {
-      state = {didRender: false};
-      render() {
-        if (this.state.didRender === false) {
-          this.setState({didRender: true});
-        }
-        return null;
-      }
-    }
-
-    ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(() => {
-      expect(Scheduler).toFlushUntilNextPaint([]);
-    }).toErrorDev('Cannot update during an existing state transition');
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--schedule-state-update-16-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--layout-effects-stop",
-                "--commit-stop",
-              ]
-          `);
-    }
-  });
-
-  it('should mark render phase force updates for class component', () => {
-    class Example extends React.Component {
-      state = {didRender: false};
-      render() {
-        if (this.state.didRender === false) {
-          this.forceUpdate(() => this.setState({didRender: true}));
-        }
-        return null;
-      }
-    }
-
-    ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(() => {
-      expect(Scheduler).toFlushUntilNextPaint([]);
-    }).toErrorDev('Cannot update during an existing state transition');
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--render-start-16",
-                "--component-render-start-Example",
-                "--schedule-forced-update-16-Example",
-                "--component-render-stop",
-                "--render-stop",
-                "--commit-start-16",
-                "--react-version-17.0.3",
-                "--profiler-version-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-16",
-                "--layout-effects-stop",
-                "--commit-stop",
-              ]
-          `);
-    }
-  });
-
-  it('should mark cascading layout updates', () => {
-    function Example() {
-      const [didMount, setDidMount] = React.useState(false);
-      React.useLayoutEffect(() => {
-        setDidMount(true);
-      }, []);
-      return didMount;
-    }
-
-    ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--component-layout-effect-mount-start-Example",
-          "--schedule-state-update-1-Example",
-          "--component-layout-effect-mount-stop",
-          "--layout-effects-stop",
-          "--render-start-1",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-1",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-          "--commit-stop",
-        ]
-      `);
-    }
-  });
-
-  // This test is coupled to lane implementation details, so I'm disabling it in
-  // the new fork until it stabilizes so we don't have to repeatedly update it.
-  it('should mark cascading passive updates', () => {
-    function Example() {
-      const [didMount, setDidMount] = React.useState(false);
-      React.useEffect(() => {
-        setDidMount(true);
-      }, []);
-      return didMount;
-    }
-
-    act(() => {
-      ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
-    });
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-16",
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--layout-effects-stop",
-          "--commit-stop",
-          "--passive-effects-start-16",
-          "--component-passive-effect-mount-start-Example",
-          "--schedule-state-update-16-Example",
-          "--component-passive-effect-mount-stop",
-          "--passive-effects-stop",
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-        ]
-      `);
-    }
-  });
-
-  it('should mark render phase updates', () => {
-    function Example() {
-      const [didRender, setDidRender] = React.useState(false);
-      if (!didRender) {
-        setDidRender(true);
-      }
-      return didRender;
-    }
-
-    act(() => {
-      ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
-    });
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-16",
-          "--render-start-16",
-          "--component-render-start-Example",
-          "--schedule-state-update-16-Example",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--layout-effects-stop",
-          "--commit-stop",
-        ]
-      `);
-    }
-  });
-
-  it('should mark sync render that throws', async () => {
-    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');
-    }
-
-    ReactTestRenderer.create(
-      <ErrorBoundary>
-        <ExampleThatThrows />
-      </ErrorBoundary>,
-    );
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--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-17.0.3",
-          "--profiler-version-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-17.0.3",
-          "--profiler-version-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",
-        ]
-      `);
-    }
-  });
-
-  it('should mark concurrent render that throws', async () => {
-    spyOnProd(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() {
-      // eslint-disable-next-line no-throw-literal
-      throw 'Expected error';
-    }
-
-    ReactTestRenderer.create(
-      <ErrorBoundary>
-        <ExampleThatThrows />
-      </ErrorBoundary>,
-      {unstable_isConcurrent: true},
-    );
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-              Array [
-                "--schedule-render-16",
-              ]
-          `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--render-start-16",
-          "--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",
-          "--render-start-16",
-          "--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-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--schedule-state-update-1-ErrorBoundary",
-          "--layout-effects-stop",
-          "--render-start-1",
-          "--component-render-start-ErrorBoundary",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-1",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-          "--commit-stop",
-        ]
-      `);
-    }
-  });
-
-  it('should mark passive and layout effects', async () => {
-    function ComponentWithEffects() {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('layout 1 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('layout 1 unmount');
-        };
-      }, []);
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('passive 1 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('passive 1 unmount');
-        };
-      }, []);
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('layout 2 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('layout 2 unmount');
-        };
-      }, []);
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('passive 2 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('passive 2 unmount');
-        };
-      }, []);
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('passive 3 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('passive 3 unmount');
-        };
-      }, []);
-
-      return null;
-    }
-
-    const renderer = ReactTestRenderer.create(<ComponentWithEffects />, {
-      unstable_isConcurrent: true,
-    });
-
-    expect(Scheduler).toFlushUntilNextPaint([
-      'layout 1 mount',
-      'layout 2 mount',
-    ]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-16",
-          "--render-start-16",
-          "--component-render-start-ComponentWithEffects",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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-16",
-          "--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",
-        ]
-      `);
-    }
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushAndYield([
-      'passive 1 mount',
-      'passive 2 mount',
-      'passive 3 mount',
-    ]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--passive-effects-start-16",
-          "--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",
-        ]
-      `);
-    }
-
-    clearPendingMarks();
-
-    renderer.unmount();
-
-    expect(Scheduler).toFlushAndYield([
-      'layout 1 unmount',
-      'layout 2 unmount',
-      'passive 1 unmount',
-      'passive 2 unmount',
-      'passive 3 unmount',
-    ]);
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(getMarks()).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-16",
-          "--render-start-16",
-          "--render-stop",
-          "--commit-start-16",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-          "--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-16",
-          "--layout-effects-stop",
-          "--commit-stop",
-          "--passive-effects-start-16",
-          "--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",
-        ]
-      `);
-    }
-  });
-});
diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
deleted file mode 100644
index a27c0271c116..000000000000
--- a/packages/react-reconciler/src/__tests__/SchedulingProfilerLabels-test.internal.js
+++ /dev/null
@@ -1,216 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-// This test schedules work for as many lanes as we can (easily) using public APIs.
-// It will hopefully serve as a reminder to update getLabelsForLanes() when we update Lanes.
-// It's okay to delete any individual test in this file if the public API changes.
-describe('SchedulingProfiler labels', () => {
-  let React;
-  let ReactDOM;
-
-  let act;
-  let clearedMarks;
-  let featureDetectionMarkName = null;
-  let marks;
-
-  global.IS_REACT_ACT_ENVIRONMENT = true;
-
-  function polyfillJSDomUserTiming() {
-    featureDetectionMarkName = null;
-
-    clearedMarks = [];
-    marks = [];
-
-    // 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
-
-    // JSDom already implements global.performance and it can't be overridden.
-    // However it only supports now() and timeOrigin() so we need to "upgrade it" in place.
-
-    if (!global.performance) {
-      global.performance = {};
-    }
-
-    global.performance.clearMarks = function clearMarks(markName) {
-      clearedMarks.push(markName);
-      marks = marks.filter(mark => mark !== markName);
-    };
-
-    global.performance.mark = function mark(markName, markOptions) {
-      if (featureDetectionMarkName === null) {
-        featureDetectionMarkName = markName;
-      }
-      marks.push(markName);
-      if (markOptions != null) {
-        // This is triggers the feature detection.
-        markOptions.startTime++;
-      }
-    };
-  }
-
-  function dispatchAndSetCurrentEvent(element, event) {
-    try {
-      window.event = event;
-      element.dispatchEvent(event);
-    } finally {
-      window.event = undefined;
-    }
-  }
-
-  beforeEach(() => {
-    jest.resetModules();
-
-    polyfillJSDomUserTiming();
-
-    React = require('react');
-    ReactDOM = require('react-dom');
-
-    const TestUtils = require('react-dom/test-utils');
-    act = TestUtils.act;
-  });
-
-  afterEach(() => {
-    // Verify all logged marks also get cleared.
-    expect(marks).toHaveLength(0);
-
-    delete global.performance;
-  });
-
-  it('regression test SyncLane', () => {
-    ReactDOM.render(<div />, document.createElement('div'));
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      expect(clearedMarks).toMatchInlineSnapshot(`
-              Array [
-                "__v3",
-                "--schedule-render-1",
-                "--render-start-1",
-                "--render-stop",
-                "--commit-start-1",
-                "--react-version-17.0.3",
-                "--profiler-version-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",
-              ]
-          `);
-    }
-  });
-
-  it('regression test DefaultLane', () => {
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      act(() => {
-        const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
-
-        root.render(<div />);
-        expect(clearedMarks).toMatchInlineSnapshot(`
-                  Array [
-                    "__v3",
-                    "--schedule-render-16",
-                  ]
-              `);
-      });
-    }
-  });
-
-  it('regression test InputDiscreteLane', () => {
-    const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
-    const targetRef = React.createRef(null);
-
-    function App() {
-      const [count, setCount] = React.useState(0);
-      const handleClick = () => {
-        setCount(count + 1);
-      };
-      return <button ref={targetRef} onClick={handleClick} />;
-    }
-
-    if (
-      gate(
-        flags => flags.enableSchedulingProfiler && !flags.enableLegacyFBSupport,
-      )
-    ) {
-      act(() => {
-        root.render(<App />);
-      });
-
-      clearedMarks.splice(0);
-
-      act(() => {
-        targetRef.current.click();
-      });
-
-      expect(clearedMarks).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-state-update-1-App",
-          "--render-start-1",
-          "--component-render-start-App",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-1",
-          "--react-version-17.0.3",
-          "--profiler-version-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",
-        ]
-      `);
-    }
-  });
-
-  it('regression test InputContinuousLane', () => {
-    const targetRef = React.createRef(null);
-
-    function App() {
-      const [count, setCount] = React.useState(0);
-      const handleMouseOver = () => setCount(count + 1);
-      return <div ref={targetRef} onMouseOver={handleMouseOver} />;
-    }
-
-    if (gate(flags => flags.enableSchedulingProfiler)) {
-      const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
-
-      act(() => {
-        root.render(<App />);
-      });
-
-      clearedMarks.splice(0);
-
-      act(() => {
-        const event = document.createEvent('MouseEvents');
-        event.initEvent('mouseover', true, true);
-        dispatchAndSetCurrentEvent(targetRef.current, event);
-      });
-
-      expect(clearedMarks).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-state-update-4-App",
-          "--render-start-4",
-          "--component-render-start-App",
-          "--component-render-stop",
-          "--render-stop",
-          "--commit-start-4",
-          "--react-version-17.0.3",
-          "--profiler-version-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-4",
-          "--layout-effects-stop",
-          "--commit-stop",
-        ]
-      `);
-    }
-  });
-});
diff --git a/scripts/jest/matchers/profilerMatchers.js b/scripts/jest/matchers/profilerMatchers.js
deleted file mode 100644
index e69de29bb2d1..000000000000

From 790b5246f691adafbf4b6a4b3fe2e6cc1370c43e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 18 Jan 2022 18:25:34 +0000
Subject: [PATCH 1100/1603] Fix setState ignored in Safari when iframe is added
 to DOM in the same commit (#23111)

* Fix setState being ignored in Safari

* Add a regression test

* Add comment
---
 .../ReactDOMSafariMicrotaskBug-test.js        | 71 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.new.js             | 12 +++-
 .../src/ReactFiberWorkLoop.old.js             | 12 +++-
 3 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js

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 000000000000..1e12bb611ca7
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+
+let ReactDOM;
+let act;
+
+describe('ReactDOMSafariMicrotaskBug-test', () => {
+  let container;
+  let simulateSafariBug;
+
+  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
+    let queue = [];
+    window.queueMicrotask = function(cb) {
+      queue.push(cb);
+    };
+    simulateSafariBug = function() {
+      queue.forEach(cb => cb());
+      queue = [];
+    };
+
+    jest.resetModules();
+    container = document.createElement('div');
+    React = require('react');
+    ReactDOM = require('react-dom');
+    act = require('jest-react').act;
+
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it('should be resilient to buggy queueMicrotask', async () => {
+    let ran = false;
+    function Foo() {
+      const [state, setState] = React.useState(0);
+      return (
+        <div
+          ref={() => {
+            if (!ran) {
+              ran = true;
+              setState(1);
+              simulateSafariBug();
+            }
+          }}>
+          {state}
+        </div>
+      );
+    }
+    const root = ReactDOM.createRoot(container);
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toBe('1');
+  });
+});
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b108da0106e4..b4b333547c19 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -708,7 +708,17 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
         // of `act`.
         ReactCurrentActQueue.current.push(flushSyncCallbacks);
       } else {
-        scheduleMicrotask(flushSyncCallbacks);
+        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.
+          if (executionContext === NoContext) {
+            // It's only safe to do this conditionally because we always
+            // check for pending work before we exit the task.
+            flushSyncCallbacks();
+          }
+        });
       }
     } else {
       // Flush the queue in an Immediate task.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index a32f8853337e..d8bb61af50c8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -708,7 +708,17 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
         // of `act`.
         ReactCurrentActQueue.current.push(flushSyncCallbacks);
       } else {
-        scheduleMicrotask(flushSyncCallbacks);
+        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.
+          if (executionContext === NoContext) {
+            // It's only safe to do this conditionally because we always
+            // check for pending work before we exit the task.
+            flushSyncCallbacks();
+          }
+        });
       }
     } else {
       // Flush the queue in an Immediate task.

From d5048247804ad3e6bb8e59dd311a4470affd7811 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 Jan 2022 11:20:42 -0500
Subject: [PATCH 1101/1603] Enable scheduling profiler flag in
 react-dom/testing builds (#23142)

---
 .../src/backend/profilingHooks.js             |  8 ++++---
 .../src/backend/types.js                      |  2 +-
 .../src/ReactFiberDevToolsHook.new.js         | 22 +++++++++++--------
 .../src/ReactFiberDevToolsHook.old.js         | 22 +++++++++++--------
 .../shared/forks/ReactFeatureFlags.testing.js |  2 +-
 5 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js
index 9544b72511f6..2280d6156e68 100644
--- a/packages/react-devtools-shared/src/backend/profilingHooks.js
+++ b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -75,7 +75,7 @@ export function createProfilingHooks({
   reactVersion,
 }: {|
   getDisplayNameForFiber: (fiber: Fiber) => string | null,
-  getLaneLabelMap?: () => Map<Lane, string>,
+  getLaneLabelMap?: () => Map<Lane, string> | null,
   reactVersion: string,
 |}): DevToolsProfilingHooks {
   function markMetadata() {
@@ -108,8 +108,10 @@ export function createProfilingHooks({
 
     if (typeof getLaneLabelMap === 'function') {
       const map = getLaneLabelMap();
-      const labels = Array.from(map.values()).join(',');
-      markAndClear(`--react-lane-labels-${labels}`);
+      if (map != null) {
+        const labels = Array.from(map.values()).join(',');
+        markAndClear(`--react-lane-labels-${labels}`);
+      }
     }
   }
 
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index b75188239695..99a86464236f 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -152,7 +152,7 @@ export type ReactRenderer = {
   scheduleRefresh?: Function,
   // 18.0+
   injectProfilingHooks?: (profilingHooks: DevToolsProfilingHooks) => void,
-  getLaneLabelMap?: () => Map<Lane, string>,
+  getLaneLabelMap?: () => Map<Lane, string> | null,
   ...
 };
 
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index 2978f7b3279b..a05cc6933e53 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -230,17 +230,21 @@ function injectProfilingHooks(profilingHooks: DevToolsProfilingHooks): void {
   injectedProfilingHooks = profilingHooks;
 }
 
-function getLaneLabelMap(): Map<Lane, string> {
-  const map: Map<Lane, string> = new Map();
+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;
-  }
+    let lane = 1;
+    for (let index = 0; index < TotalLanes; index++) {
+      const label = ((getLabelForLane(lane): any): string);
+      map.set(lane, label);
+      lane *= 2;
+    }
 
-  return map;
+    return map;
+  } else {
+    return null;
+  }
 }
 
 export function markCommitStarted(lanes: Lanes): void {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index d26d12236c24..982c46ba44f3 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -230,17 +230,21 @@ function injectProfilingHooks(profilingHooks: DevToolsProfilingHooks): void {
   injectedProfilingHooks = profilingHooks;
 }
 
-function getLaneLabelMap(): Map<Lane, string> {
-  const map: Map<Lane, string> = new Map();
+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;
-  }
+    let lane = 1;
+    for (let index = 0; index < TotalLanes; index++) {
+      const label = ((getLabelForLane(lane): any): string);
+      map.set(lane, label);
+      lane *= 2;
+    }
 
-  return map;
+    return map;
+  } else {
+    return null;
+  }
 }
 
 export function markCommitStarted(lanes: Lanes): void {
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 163731c01dd2..1d2ff85dd389 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -12,7 +12,7 @@ import typeof * as ExportsType from './ReactFeatureFlags.testing';
 
 export const debugRenderPhaseSideEffectsForStrictMode = false;
 export const enableDebugTracing = false;
-export const enableSchedulingProfiler = false;
+export const enableSchedulingProfiler = __PROFILE__;
 export const warnAboutDeprecatedLifecycles = true;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
 export const enableProfilerTimer = __PROFILE__;

From d8cfeaf221563f3828fe7bf07833f3824accfa39 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 19 Jan 2022 16:30:34 +0000
Subject: [PATCH 1102/1603] Fix context propagation for offscreen/fallback
 trees (#23095)

* Failing test for Context.Consumer in suspended Suspense

See issue #19701.

* Fix context propagation for offscreen trees

* Address nits

* Specify propagation root for Suspense too

* Pass correct propagation root

* Harden test coverage

This test will fail if we remove propagation, or if we propagate with a root node like fiber.return or fiber.return.return. The additional DEV-only error helps detect a different kind of mistake, like if the thing being passed hasn't actually been encountered on the way up. However, we still leave the actual production loop to check against null so that there is no way we loop forever if the propagation root is wrong.

* Remove superfluous warning

Co-authored-by: overlookmotel <theoverlookmotel@gmail.com>
---
 .../src/ReactFiberBeginWork.new.js            | 14 ++-
 .../src/ReactFiberBeginWork.old.js            | 14 ++-
 .../src/ReactFiberNewContext.new.js           | 43 ++++++--
 .../src/ReactFiberNewContext.old.js           | 43 ++++++--
 .../__tests__/ReactSuspense-test.internal.js  | 63 ++++++++++++
 .../src/__tests__/ReactSuspenseList-test.js   | 98 +++++++++++++++++++
 6 files changed, 253 insertions(+), 22 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index e8d8b38b55a4..b001088f17e6 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -174,7 +174,7 @@ import {
   checkIfContextChanged,
   readContext,
   prepareToReadContext,
-  scheduleWorkOnParentPath,
+  scheduleContextWorkOnParentPath,
 } from './ReactFiberNewContext.new';
 import {
   renderWithHooks,
@@ -2754,13 +2754,17 @@ function updateDehydratedSuspenseComponent(
   }
 }
 
-function scheduleWorkOnFiber(fiber: Fiber, renderLanes: Lanes) {
+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);
   }
-  scheduleWorkOnParentPath(fiber.return, renderLanes);
+  scheduleContextWorkOnParentPath(fiber.return, renderLanes, propagationRoot);
 }
 
 function propagateSuspenseContextChange(
@@ -2776,7 +2780,7 @@ function propagateSuspenseContextChange(
     if (node.tag === SuspenseComponent) {
       const state: SuspenseState | null = node.memoizedState;
       if (state !== null) {
-        scheduleWorkOnFiber(node, renderLanes);
+        scheduleSuspenseWorkOnFiber(node, renderLanes, workInProgress);
       }
     } else if (node.tag === SuspenseListComponent) {
       // If the tail is hidden there might not be an Suspense boundaries
@@ -2784,7 +2788,7 @@ function propagateSuspenseContextChange(
       // list itself.
       // We don't have to traverse to the children of the list since
       // the list will propagate the change when it rerenders.
-      scheduleWorkOnFiber(node, renderLanes);
+      scheduleSuspenseWorkOnFiber(node, renderLanes, workInProgress);
     } else if (node.child !== null) {
       node.child.return = node;
       node = node.child;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 3e1dc87620a1..cbf3c5fa2e3c 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -174,7 +174,7 @@ import {
   checkIfContextChanged,
   readContext,
   prepareToReadContext,
-  scheduleWorkOnParentPath,
+  scheduleContextWorkOnParentPath,
 } from './ReactFiberNewContext.old';
 import {
   renderWithHooks,
@@ -2754,13 +2754,17 @@ function updateDehydratedSuspenseComponent(
   }
 }
 
-function scheduleWorkOnFiber(fiber: Fiber, renderLanes: Lanes) {
+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);
   }
-  scheduleWorkOnParentPath(fiber.return, renderLanes);
+  scheduleContextWorkOnParentPath(fiber.return, renderLanes, propagationRoot);
 }
 
 function propagateSuspenseContextChange(
@@ -2776,7 +2780,7 @@ function propagateSuspenseContextChange(
     if (node.tag === SuspenseComponent) {
       const state: SuspenseState | null = node.memoizedState;
       if (state !== null) {
-        scheduleWorkOnFiber(node, renderLanes);
+        scheduleSuspenseWorkOnFiber(node, renderLanes, workInProgress);
       }
     } else if (node.tag === SuspenseListComponent) {
       // If the tail is hidden there might not be an Suspense boundaries
@@ -2784,7 +2788,7 @@ function propagateSuspenseContextChange(
       // list itself.
       // We don't have to traverse to the children of the list since
       // the list will propagate the change when it rerenders.
-      scheduleWorkOnFiber(node, renderLanes);
+      scheduleSuspenseWorkOnFiber(node, renderLanes, workInProgress);
     } else if (node.child !== null) {
       node.child.return = node;
       node = node.child;
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 2f59cbec27f2..8ff30c810f03 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -138,9 +138,10 @@ export function popProvider(
   }
 }
 
-export function scheduleWorkOnParentPath(
+export function scheduleContextWorkOnParentPath(
   parent: Fiber | null,
   renderLanes: Lanes,
+  propagationRoot: Fiber,
 ) {
   // Update the child lanes of all the ancestors, including the alternates.
   let node = parent;
@@ -157,12 +158,26 @@ export function scheduleWorkOnParentPath(
     ) {
       alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
     } else {
-      // Neither alternate was updated, which means the rest of the
+      // 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>(
@@ -246,7 +261,11 @@ function propagateContextChange_eager<T>(
           if (alternate !== null) {
             alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
           }
-          scheduleWorkOnParentPath(fiber.return, renderLanes);
+          scheduleContextWorkOnParentPath(
+            fiber.return,
+            renderLanes,
+            workInProgress,
+          );
 
           // Mark the updated lanes on the list, too.
           list.lanes = mergeLanes(list.lanes, renderLanes);
@@ -284,7 +303,11 @@ function propagateContextChange_eager<T>(
       // 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.
-      scheduleWorkOnParentPath(parentSuspense, renderLanes);
+      scheduleContextWorkOnParentPath(
+        parentSuspense,
+        renderLanes,
+        workInProgress,
+      );
       nextFiber = fiber.sibling;
     } else {
       // Traverse down.
@@ -365,7 +388,11 @@ function propagateContextChanges<T>(
             if (alternate !== null) {
               alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
             }
-            scheduleWorkOnParentPath(consumer.return, renderLanes);
+            scheduleContextWorkOnParentPath(
+              consumer.return,
+              renderLanes,
+              workInProgress,
+            );
 
             if (!forcePropagateEntireTree) {
               // During lazy propagation, when we find a match, we can defer
@@ -406,7 +433,11 @@ function propagateContextChanges<T>(
       // 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.
-      scheduleWorkOnParentPath(parentSuspense, renderLanes);
+      scheduleContextWorkOnParentPath(
+        parentSuspense,
+        renderLanes,
+        workInProgress,
+      );
       nextFiber = null;
     } else {
       // Traverse down.
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 0d492397afd8..93fe3bc8395c 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -138,9 +138,10 @@ export function popProvider(
   }
 }
 
-export function scheduleWorkOnParentPath(
+export function scheduleContextWorkOnParentPath(
   parent: Fiber | null,
   renderLanes: Lanes,
+  propagationRoot: Fiber,
 ) {
   // Update the child lanes of all the ancestors, including the alternates.
   let node = parent;
@@ -157,12 +158,26 @@ export function scheduleWorkOnParentPath(
     ) {
       alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
     } else {
-      // Neither alternate was updated, which means the rest of the
+      // 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>(
@@ -246,7 +261,11 @@ function propagateContextChange_eager<T>(
           if (alternate !== null) {
             alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
           }
-          scheduleWorkOnParentPath(fiber.return, renderLanes);
+          scheduleContextWorkOnParentPath(
+            fiber.return,
+            renderLanes,
+            workInProgress,
+          );
 
           // Mark the updated lanes on the list, too.
           list.lanes = mergeLanes(list.lanes, renderLanes);
@@ -284,7 +303,11 @@ function propagateContextChange_eager<T>(
       // 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.
-      scheduleWorkOnParentPath(parentSuspense, renderLanes);
+      scheduleContextWorkOnParentPath(
+        parentSuspense,
+        renderLanes,
+        workInProgress,
+      );
       nextFiber = fiber.sibling;
     } else {
       // Traverse down.
@@ -365,7 +388,11 @@ function propagateContextChanges<T>(
             if (alternate !== null) {
               alternate.lanes = mergeLanes(alternate.lanes, renderLanes);
             }
-            scheduleWorkOnParentPath(consumer.return, renderLanes);
+            scheduleContextWorkOnParentPath(
+              consumer.return,
+              renderLanes,
+              workInProgress,
+            );
 
             if (!forcePropagateEntireTree) {
               // During lazy propagation, when we find a match, we can defer
@@ -406,7 +433,11 @@ function propagateContextChanges<T>(
       // 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.
-      scheduleWorkOnParentPath(parentSuspense, renderLanes);
+      scheduleContextWorkOnParentPath(
+        parentSuspense,
+        renderLanes,
+        workInProgress,
+      );
       nextFiber = null;
     } else {
       // Traverse down.
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index c11dcfe69292..f6c1258728de 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -1532,5 +1532,68 @@ describe('ReactSuspense', () => {
       expect(Scheduler).toFlushUntilNextPaint(['new value']);
       expect(root).toMatchRenderedOutput('new value');
     });
+
+    it('updates context consumer within child of suspended suspense component when context updates', () => {
+      const {createContext, useState} = React;
+
+      const ValueContext = createContext(null);
+
+      const promiseThatNeverResolves = new Promise(() => {});
+      function Child() {
+        return (
+          <ValueContext.Consumer>
+            {value => {
+              Scheduler.unstable_yieldValue(
+                `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>
+        );
+      }
+
+      const root = ReactTestRenderer.create(<App />);
+      expect(Scheduler).toHaveYielded([
+        'Received context value [default]',
+        'default',
+      ]);
+      expect(root).toMatchRenderedOutput('default');
+
+      act(() => setValue('new value'));
+      expect(Scheduler).toHaveYielded([
+        'Received context value [new value]',
+        'Loading...',
+      ]);
+      expect(root).toMatchRenderedOutput('Loading...');
+
+      act(() => setValue('default'));
+      expect(Scheduler).toHaveYielded([
+        'Received context value [default]',
+        'default',
+      ]);
+      expect(root).toMatchRenderedOutput('default');
+    });
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
index 8aff360fe661..b7cdc19d63df 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseList-test.js
@@ -2968,4 +2968,102 @@ describe('ReactSuspenseList', () => {
     // treeBaseDuration
     expect(onRender.mock.calls[3][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">
+          <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 />);
+
+    expect(Scheduler).toFlushAndYield([
+      'Suspend! [A]',
+      'Loading A',
+      'Loading B',
+      'Loading C',
+    ]);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>Loading A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await A.resolve();
+
+    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [B]']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>Loading B</span>
+        <span>Loading C</span>
+      </>,
+    );
+
+    await B.resolve();
+
+    expect(Scheduler).toFlushAndYield(['B', 'C']);
+
+    expect(ReactNoop).toMatchRenderedOutput(
+      <>
+        <span>A</span>
+        <span>B</span>
+        <span>C</span>
+      </>,
+    );
+  });
 });

From 05a55a4b09b7b7c8f63778fb8252a001ca66f8d7 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Wed, 19 Jan 2022 12:34:07 -0700
Subject: [PATCH 1103/1603] Fix change events for custom elements (#22938)

* Bypass react event system for custom elements

* Going to try fixing react event system instead

* finally got it to call onChange, but perhaps too many times

* update test

* Removed ReactDOMComponent changes, now works but still doubles for bubbles

* Maybe i should only support bubbling events

* removed some old stuff

* cleaned up changeeventplugin stuff

* prettier, lint

* removed changeeventplugin stuff

* remove unneeded gate for onInput test

* Go back to using ChangeEventPlugin

* Add input+change test

* lint

* Move logic to shouldUseChangeEvent

* use memoizedProps instead of pendingProps

* Run form control behavior before custom element behavior

* add bubbling test

* forgot to append container to body

* add child event target test

* expand <input is=...> test expectations

* Make tests more realistic

* Add extra test

* Add missing gating

* Actually fix gating

Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 .../__tests__/DOMPropertyOperations-test.js   | 580 ++++++++++++++++++
 .../src/events/plugins/ChangeEventPlugin.js   |  12 +-
 2 files changed, 591 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index 99f92cba9b36..ab5ca9a54952 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -22,6 +22,17 @@ describe('DOMPropertyOperations', () => {
     ReactDOM = require('react-dom');
   });
 
+  // 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', () => {
       const container = document.createElement('div');
@@ -280,6 +291,575 @@ describe('DOMPropertyOperations', () => {
       expect(syntheticClickEvent.nativeEvent).toBe(nativeClickEvent);
     });
 
+    // @gate enableCustomElementPropertySupport
+    it('custom elements should have working onChange event listeners', () => {
+      let reactChangeEvent = null;
+      const eventHandler = jest.fn(event => (reactChangeEvent = event));
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element onChange={eventHandler} />, container);
+      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
+      ReactDOM.render(<my-custom-element />, container);
+      customElement.dispatchEvent(new Event('change', {bubbles: true}));
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+      ReactDOM.render(<my-custom-element onChange={eventHandler} />, container);
+      customElement.dispatchEvent(new Event('change', {bubbles: true}));
+      expectedHandlerCallCount++;
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+    });
+
+    it('custom elements should have working onInput event listeners', () => {
+      let reactInputEvent = null;
+      const eventHandler = jest.fn(event => (reactInputEvent = event));
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element onInput={eventHandler} />, container);
+      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
+      ReactDOM.render(<my-custom-element />, container);
+      customElement.dispatchEvent(new Event('input', {bubbles: true}));
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+      ReactDOM.render(<my-custom-element onInput={eventHandler} />, container);
+      customElement.dispatchEvent(new Event('input', {bubbles: true}));
+      expectedHandlerCallCount++;
+      expect(eventHandler).toHaveBeenCalledTimes(expectedHandlerCallCount);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom elements should have separate onInput and onChange handling', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const inputEventHandler = jest.fn();
+      const changeEventHandler = jest.fn();
+      ReactDOM.render(
+        <my-custom-element
+          onInput={inputEventHandler}
+          onChange={changeEventHandler}
+        />,
+        container,
+      );
+      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);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom elements should be able to remove and re-add custom event listeners', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const eventHandler = jest.fn();
+      ReactDOM.render(
+        <my-custom-element oncustomevent={eventHandler} />,
+        container,
+      );
+
+      const customElement = container.querySelector('my-custom-element');
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(eventHandler).toHaveBeenCalledTimes(1);
+
+      ReactDOM.render(<my-custom-element />, container);
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(eventHandler).toHaveBeenCalledTimes(1);
+
+      ReactDOM.render(
+        <my-custom-element oncustomevent={eventHandler} />,
+        container,
+      );
+      customElement.dispatchEvent(new Event('customevent'));
+      expect(eventHandler).toHaveBeenCalledTimes(2);
+    });
+
+    it('<input is=...> should have the same onChange/onInput/onClick behavior as <input>', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(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();
+      }
+      ReactDOM.render(
+        <div>
+          <input
+            onInput={regularOnInputHandler}
+            onChange={regularOnChangeHandler}
+            onClick={regularOnClickHandler}
+          />
+          <input
+            is="my-custom-element"
+            onInput={customOnInputHandler}
+            onChange={customOnChangeHandler}
+            onClick={customOnClickHandler}
+          />
+        </div>,
+        container,
+      );
+
+      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>', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(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();
+      }
+      ReactDOM.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>,
+        container,
+      );
+
+      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>', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(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();
+      }
+      ReactDOM.render(
+        <div>
+          <select
+            onInput={regularOnInputHandler}
+            onChange={regularOnChangeHandler}
+            onClick={regularOnClickHandler}
+          />
+          <select
+            is="my-custom-element"
+            onInput={customOnInputHandler}
+            onChange={customOnChangeHandler}
+            onClick={customOnClickHandler}
+          />
+        </div>,
+        container,
+      );
+
+      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);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('onChange/onInput/onClick on div with various types of children', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      function clearMocks() {
+        onChangeHandler.mockClear();
+        onInputHandler.mockClear();
+        onClickHandler.mockClear();
+      }
+      ReactDOM.render(
+        <div
+          onChange={onChangeHandler}
+          onInput={onInputHandler}
+          onClick={onClickHandler}>
+          <my-custom-element />
+          <input />
+          <input is="my-custom-element" />
+        </div>,
+        container,
+      );
+      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', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      ReactDOM.render(
+        <my-custom-element
+          onChange={onChangeHandler}
+          onInput={onInputHandler}
+          onClick={onClickHandler}>
+          <input />
+        </my-custom-element>,
+        container,
+      );
+
+      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', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      ReactDOM.render(
+        <my-custom-element
+          onChange={onChangeHandler}
+          onInput={onInputHandler}
+          onClick={onClickHandler}>
+          <div />
+        </my-custom-element>,
+        container,
+      );
+
+      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', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      ReactDOM.render(
+        <div
+          onChange={onChangeHandler}
+          onInput={onInputHandler}
+          onClick={onClickHandler}>
+          <div />
+        </div>,
+        container,
+      );
+
+      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);
+    });
+
+    // @gate enableCustomElementPropertySupport
+    it('custom element onChange/onInput/onClick with event target custom element child', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      const onChangeHandler = jest.fn();
+      const onInputHandler = jest.fn();
+      const onClickHandler = jest.fn();
+      ReactDOM.render(
+        <my-custom-element
+          onChange={onChangeHandler}
+          onInput={onInputHandler}
+          onClick={onClickHandler}>
+          <other-custom-element />
+        </my-custom-element>,
+        container,
+      );
+
+      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);
+    });
+
     // @gate enableCustomElementPropertySupport
     it('custom elements should allow custom events with capture event listeners', () => {
       const oncustomeventCapture = jest.fn();
diff --git a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
index 43d338a0cc5e..8985c50c71f9 100644
--- a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
@@ -23,12 +23,16 @@ import {updateValueIfChanged} from '../../client/inputValueTracking';
 import {setDefaultValue} from '../../client/ReactDOMInput';
 import {enqueueStateRestore} from '../ReactDOMControlledComponent';
 
-import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
+import {
+  disableInputAttributeSyncing,
+  enableCustomElementPropertySupport,
+} from 'shared/ReactFeatureFlags';
 import {batchedUpdates} from '../ReactDOMUpdateBatching';
 import {
   processDispatchQueue,
   accumulateTwoPhaseListeners,
 } from '../DOMPluginEventSystem';
+import isCustomComponent from '../../shared/isCustomComponent';
 
 function registerEvents() {
   registerTwoPhaseEvent('onChange', [
@@ -292,6 +296,12 @@ function extractEvents(
     }
   } else if (shouldUseClickEvent(targetNode)) {
     getTargetInstFunc = getTargetInstForClickEvent;
+  } else if (
+    enableCustomElementPropertySupport &&
+    targetInst &&
+    isCustomComponent(targetInst.elementType, targetInst.memoizedProps)
+  ) {
+    getTargetInstFunc = getTargetInstForChangeEvent;
   }
 
   if (getTargetInstFunc) {

From e4894025570ebbe5955b4e4b226dd900e17c93e7 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 20 Jan 2022 15:18:38 +0000
Subject: [PATCH 1104/1603] Warn when a callback ref returns a function
 (#23145)

---
 packages/react-dom/src/__tests__/refs-test.js         |  1 -
 .../react-reconciler/src/ReactFiberCommitWork.new.js  | 11 ++---------
 .../react-reconciler/src/ReactFiberCommitWork.old.js  | 11 ++---------
 packages/shared/ReactFeatureFlags.js                  |  2 --
 packages/shared/forks/ReactFeatureFlags.native-fb.js  |  1 -
 packages/shared/forks/ReactFeatureFlags.native-oss.js |  1 -
 .../shared/forks/ReactFeatureFlags.test-renderer.js   |  1 -
 .../forks/ReactFeatureFlags.test-renderer.native.js   |  1 -
 .../forks/ReactFeatureFlags.test-renderer.www.js      |  1 -
 packages/shared/forks/ReactFeatureFlags.testing.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.www.js     |  1 -
 .../shared/forks/ReactFeatureFlags.www-dynamic.js     |  1 -
 packages/shared/forks/ReactFeatureFlags.www.js        |  1 -
 13 files changed, 4 insertions(+), 30 deletions(-)

diff --git a/packages/react-dom/src/__tests__/refs-test.js b/packages/react-dom/src/__tests__/refs-test.js
index 872ff6e7dc2b..8e3643d2c75d 100644
--- a/packages/react-dom/src/__tests__/refs-test.js
+++ b/packages/react-dom/src/__tests__/refs-test.js
@@ -352,7 +352,6 @@ describe('ref swapping', () => {
     );
   });
 
-  // @gate !__DEV__ || warnAboutCallbackRefReturningFunction
   it('should warn about callback refs returning a function', () => {
     const container = document.createElement('div');
     expect(() => {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index ecb83e28171c..5ff683009668 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -39,7 +39,6 @@ import {
   deletedTreeCleanUpLevel,
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
-  warnAboutCallbackRefReturningFunction,
   enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -286,10 +285,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
       if (__DEV__) {
-        if (
-          warnAboutCallbackRefReturningFunction &&
-          typeof retVal === 'function'
-        ) {
+        if (typeof retVal === 'function') {
           console.error(
             'Unexpected return value from a callback ref in %s. ' +
               'A callback ref should not return a function.',
@@ -1151,10 +1147,7 @@ function commitAttachRef(finishedWork: Fiber) {
         retVal = ref(instanceToUse);
       }
       if (__DEV__) {
-        if (
-          warnAboutCallbackRefReturningFunction &&
-          typeof retVal === 'function'
-        ) {
+        if (typeof retVal === 'function') {
           console.error(
             'Unexpected return value from a callback ref in %s. ' +
               'A callback ref should not return a function.',
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 8466b41c85dc..769974e048d5 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -39,7 +39,6 @@ import {
   deletedTreeCleanUpLevel,
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
-  warnAboutCallbackRefReturningFunction,
   enableCache,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -286,10 +285,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
       if (__DEV__) {
-        if (
-          warnAboutCallbackRefReturningFunction &&
-          typeof retVal === 'function'
-        ) {
+        if (typeof retVal === 'function') {
           console.error(
             'Unexpected return value from a callback ref in %s. ' +
               'A callback ref should not return a function.',
@@ -1151,10 +1147,7 @@ function commitAttachRef(finishedWork: Fiber) {
         retVal = ref(instanceToUse);
       }
       if (__DEV__) {
-        if (
-          warnAboutCallbackRefReturningFunction &&
-          typeof retVal === 'function'
-        ) {
+        if (typeof retVal === 'function') {
           console.error(
             'Unexpected return value from a callback ref in %s. ' +
               'A callback ref should not return a function.',
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 7800bb1a7e3b..3c2444101eb8 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -178,8 +178,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 
 export const enableUseRefAccessWarning = false;
 
-export const warnAboutCallbackRefReturningFunction = false;
-
 export const disableSchedulerTimeoutInWorkLoop = false;
 
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 65b1549876bb..2e2c63708780 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -66,7 +66,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = __DEV__;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
-export const warnAboutCallbackRefReturningFunction = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 34bdac6ac2c6..b97cd2317f0b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -57,7 +57,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
-export const warnAboutCallbackRefReturningFunction = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c739a1e12620..b0e3fc3a0c8b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -57,7 +57,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
-export const warnAboutCallbackRefReturningFunction = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index cd72fcc481c9..953fab0f2c0a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -56,7 +56,6 @@ export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
-export const warnAboutCallbackRefReturningFunction = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 2e35505f5888..e9e3b5e97b64 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -57,7 +57,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = true;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
-export const warnAboutCallbackRefReturningFunction = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 1d2ff85dd389..ae8d16d41c00 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -57,7 +57,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
-export const warnAboutCallbackRefReturningFunction = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 06834fa9dbaa..93bfcfb5a70c 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -57,7 +57,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
-export const warnAboutCallbackRefReturningFunction = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 288e9631c75e..ab5e1526e3e6 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -19,7 +19,6 @@ export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
 export const enableUseRefAccessWarning = __VARIANT__;
-export const warnAboutCallbackRefReturningFunction = __VARIANT__;
 export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a666671ab0ac..c15550727c6e 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -67,7 +67,6 @@ export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
-export const warnAboutCallbackRefReturningFunction = true;
 
 export const enableLazyElements = true;
 export const enableCache = true;

From 3fba8d64f12ae04af1b7df88604c49b8ec410b76 Mon Sep 17 00:00:00 2001
From: Ives van Hoorne <ives@codesandbox.io>
Date: Thu, 20 Jan 2022 16:20:02 +0100
Subject: [PATCH 1105/1603] Include other build types when building for
 CodeSandbox CI (#23152)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7c2651474352..9dc97a27eb42 100644
--- a/package.json
+++ b/package.json
@@ -145,7 +145,7 @@
     "publish-prereleases": "node ./scripts/release/publish-using-ci-workflow.js",
     "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": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom scheduler",
+    "download-build-in-codesandbox-ci": "cd scripts/release && yarn install && cd ../../ && yarn download-build-for-head || yarn build-combined --type=node react/index react-dom/index react-dom/src/server react-dom/test-utils scheduler/index react/jsx-runtime react/jsx-dev-runtime",
     "check-release-dependencies": "node ./scripts/release/check-release-dependencies"
   },
   "resolutions": {

From e12a9dfc96be12ea8e5c759986041ee5308e8e06 Mon Sep 17 00:00:00 2001
From: Douglas Armstrong <dougarmstrong@fb.com>
Date: Thu, 20 Jan 2022 07:22:17 -0800
Subject: [PATCH 1106/1603] Fix production-only updateSyncExternalStore() crash
 when doing setState in render (#23150)

* Update ReactFiberHooks.new.js

* Add regression test + replace-fork

* Prettier

Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 .../src/ReactFiberHooks.new.js                |  2 +-
 .../src/ReactFiberHooks.old.js                |  2 +-
 .../useSyncExternalStoreShared-test.js        | 27 +++++++++++++++++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index cf8086b075aa..7747a25c858e 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2471,7 +2471,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
-  useSyncExternalStore: mountSyncExternalStore,
+  useSyncExternalStore: updateSyncExternalStore,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index ff2aff6720e1..d7137e8cd7f6 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2471,7 +2471,7 @@ const HooksDispatcherOnRerender: Dispatcher = {
   useDeferredValue: rerenderDeferredValue,
   useTransition: rerenderTransition,
   useMutableSource: updateMutableSource,
-  useSyncExternalStore: mountSyncExternalStore,
+  useSyncExternalStore: updateSyncExternalStore,
   useId: updateId,
 
   unstable_isNewReconciler: enableNewReconciler,
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 5af9e9767ab0..cb3a40aa13ab 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -745,6 +745,33 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     });
   });
 
+  test('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 <Text text={derivedText} />;
+    }
+
+    const container = document.createElement('div');
+    const root = createRoot(container);
+    await act(() => root.render(<App />));
+
+    expect(Scheduler).toHaveYielded(['INITIAL']);
+    expect(container.textContent).toEqual('INITIAL');
+
+    await act(() => {
+      store.set('Updated');
+    });
+    expect(Scheduler).toHaveYielded(['UPDATED']);
+    expect(container.textContent).toEqual('UPDATED');
+  });
+
   // The selector implementation uses the lazy ref initialization pattern
   // @gate !(enableUseRefAccessWarning && __DEV__)
   test('compares selection to rendered selection even if selector changes', async () => {

From 505c15c9ef40556b72ddf5cb3a78a6b2dc56908e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 Jan 2022 11:11:26 -0500
Subject: [PATCH 1107/1603] Don't inject timeline hooks unless React supports
 profiling (#23151)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This gives DevTools a way to detect whether the current React renderer supports Timeline profiling. (Version alone isn't enough to detect this, neither is general profiling support– since these two are controlled by different feature flags.)
---
 .../src/ReactFiberDevToolsHook.new.js          | 18 +++++++++++++-----
 .../src/ReactFiberDevToolsHook.old.js          | 18 +++++++++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index a05cc6933e53..8c245e1efb32 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -74,11 +74,19 @@ export function injectInternals(internals: Object): boolean {
     return true;
   }
   try {
-    rendererID = hook.inject({
-      ...internals,
-      getLaneLabelMap,
-      injectProfilingHooks,
-    });
+    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 = {
+        ...internals,
+        getLaneLabelMap,
+        injectProfilingHooks,
+      };
+    }
+
+    rendererID = hook.inject(internals);
+
     // We have successfully injected, so now it is safe to set up hooks.
     injectedHook = hook;
   } catch (err) {
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index 982c46ba44f3..defaf397deb7 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -74,11 +74,19 @@ export function injectInternals(internals: Object): boolean {
     return true;
   }
   try {
-    rendererID = hook.inject({
-      ...internals,
-      getLaneLabelMap,
-      injectProfilingHooks,
-    });
+    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 = {
+        ...internals,
+        getLaneLabelMap,
+        injectProfilingHooks,
+      };
+    }
+
+    rendererID = hook.inject(internals);
+
     // We have successfully injected, so now it is safe to set up hooks.
     injectedHook = hook;
   } catch (err) {

From a63708432082d480d422b0c93de5403611d9ce38 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 20 Jan 2022 15:52:17 -0500
Subject: [PATCH 1108/1603] DevTools: Add Jest snapshot serializer for number
 formatting (#23139)

Numbers in JavaScript can have precision issues due to how they are encoded. This shows up in snapshot tests sometimes with values like 0.0009999999999999992, which makes the tests hard to read and visually diff.

This PR adds a new snapshot serializers which clamps numbers at 3 decimal points (e.g. the above number 0.0009999999999999992 is serialized as 0.001). This new serializer does not impact non-numeric values, integers, and special numbers like NaN and Infinity.
---
 .../dehydratedValueSerializer.js              |  0
 .../{ => __serializers__}/hookSerializer.js   |  0
 .../inspectedElementSerializer.js             |  0
 .../numberToFixedSerializer.js                | 24 ++++++++++
 .../{ => __serializers__}/storeSerializer.js  |  0
 .../treeContextStateSerializer.js             |  0
 .../src/__tests__/preprocessData-test.js      | 46 +++++++++----------
 .../src/__tests__/storeStressSync-test.js     |  2 +-
 .../storeStressTestConcurrent-test.js         |  2 +-
 scripts/jest/config.build-devtools.js         | 13 ++++--
 10 files changed, 57 insertions(+), 30 deletions(-)
 rename packages/react-devtools-shared/src/__tests__/{ => __serializers__}/dehydratedValueSerializer.js (100%)
 rename packages/react-devtools-shared/src/__tests__/{ => __serializers__}/hookSerializer.js (100%)
 rename packages/react-devtools-shared/src/__tests__/{ => __serializers__}/inspectedElementSerializer.js (100%)
 create mode 100644 packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js
 rename packages/react-devtools-shared/src/__tests__/{ => __serializers__}/storeSerializer.js (100%)
 rename packages/react-devtools-shared/src/__tests__/{ => __serializers__}/treeContextStateSerializer.js (100%)

diff --git a/packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js
similarity index 100%
rename from packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js
rename to packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js
diff --git a/packages/react-devtools-shared/src/__tests__/hookSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js
similarity index 100%
rename from packages/react-devtools-shared/src/__tests__/hookSerializer.js
rename to packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js
similarity index 100%
rename from packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js
rename to packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js
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 000000000000..2b0fc1f07e78
--- /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__/storeSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js
similarity index 100%
rename from packages/react-devtools-shared/src/__tests__/storeSerializer.js
rename to packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js
diff --git a/packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js
similarity index 100%
rename from packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js
rename to packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index b513db2e7e78..09ad50ecae49 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -439,7 +439,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 0,
-              "duration": 0.004999999999999999,
+              "duration": 0.005,
               "lanes": Array [
                 9,
               ],
@@ -459,7 +459,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 0,
-              "duration": 0.002999999999999999,
+              "duration": 0.003,
               "lanes": Array [
                 9,
               ],
@@ -469,7 +469,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 1,
-              "duration": 0.0010000000000000009,
+              "duration": 0.001,
               "lanes": Array [
                 9,
               ],
@@ -529,7 +529,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 0,
-              "duration": 0.004999999999999999,
+              "duration": 0.005,
               "lanes": Array [
                 9,
               ],
@@ -549,7 +549,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 0,
-              "duration": 0.002999999999999999,
+              "duration": 0.003,
               "lanes": Array [
                 9,
               ],
@@ -559,7 +559,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 1,
-              "duration": 0.0010000000000000009,
+              "duration": 0.001,
               "lanes": Array [
                 9,
               ],
@@ -656,7 +656,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 1,
-              "duration": 0.0009999999999999992,
+              "duration": 0.001,
               "lanes": Array [
                 0,
               ],
@@ -748,7 +748,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 1,
-              "duration": 0.0009999999999999992,
+              "duration": 0.001,
               "lanes": Array [
                 0,
               ],
@@ -865,7 +865,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 1,
-              "duration": 0.0009999999999999992,
+              "duration": 0.001,
               "lanes": Array [
                 4,
               ],
@@ -887,7 +887,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.012000000000000004,
+              "duration": 0.012,
               "lanes": Array [
                 4,
               ],
@@ -897,7 +897,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.0030000000000000027,
+              "duration": 0.003,
               "lanes": Array [
                 4,
               ],
@@ -907,7 +907,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.008000000000000004,
+              "duration": 0.008,
               "lanes": Array [
                 4,
               ],
@@ -917,7 +917,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 1,
-              "duration": 0.0010000000000000009,
+              "duration": 0.001,
               "lanes": Array [
                 4,
               ],
@@ -927,7 +927,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.0029999999999999957,
+              "duration": 0.003,
               "lanes": Array [
                 4,
               ],
@@ -946,21 +946,21 @@ describe('Timeline profiler', () => {
           },
           Object {
             "componentName": "App",
-            "duration": 0.0020000000000000018,
+            "duration": 0.002,
             "timestamp": 0.018,
             "type": "passive-effect-mount",
             "warning": null,
           },
           Object {
             "componentName": "App",
-            "duration": 0.0010000000000000009,
+            "duration": 0.001,
             "timestamp": 0.023,
             "type": "render",
             "warning": null,
           },
           Object {
             "componentName": "App",
-            "duration": 0.0010000000000000009,
+            "duration": 0.001,
             "timestamp": 0.036,
             "type": "passive-effect-mount",
             "warning": null,
@@ -1052,7 +1052,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 0,
               "depth": 1,
-              "duration": 0.0009999999999999992,
+              "duration": 0.001,
               "lanes": Array [
                 4,
               ],
@@ -1072,7 +1072,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.012000000000000004,
+              "duration": 0.012,
               "lanes": Array [
                 4,
               ],
@@ -1082,7 +1082,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.0030000000000000027,
+              "duration": 0.003,
               "lanes": Array [
                 4,
               ],
@@ -1092,7 +1092,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.008000000000000004,
+              "duration": 0.008,
               "lanes": Array [
                 4,
               ],
@@ -1102,7 +1102,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 1,
-              "duration": 0.0010000000000000009,
+              "duration": 0.001,
               "lanes": Array [
                 4,
               ],
@@ -1112,7 +1112,7 @@ describe('Timeline profiler', () => {
             Object {
               "batchUID": 1,
               "depth": 0,
-              "duration": 0.0029999999999999957,
+              "duration": 0.003,
               "lanes": Array [
                 4,
               ],
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
index f1684b87b793..57558525f49d 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -28,7 +28,7 @@ describe('StoreStress (Legacy Mode)', () => {
     act = utils.act;
     legacyRender = utils.legacyRender;
 
-    print = require('./storeSerializer').print;
+    print = require('./__serializers__/storeSerializer').print;
   });
 
   // This is a stress test for the tree mount/update/unmount traversal.
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index 0f4a373e164c..d8f6d67a2ad7 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -28,7 +28,7 @@ describe('StoreStressConcurrent', () => {
     // this helper with the real thing.
     actAsync = require('./utils').actAsync;
 
-    print = require('./storeSerializer').print;
+    print = require('./__serializers__/storeSerializer').print;
   });
 
   // TODO: Remove this in favor of @gate pragma
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index e14ecb48c348..276d20905474 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -62,19 +62,22 @@ module.exports = Object.assign({}, baseConfig, {
   testRegex: 'packages/react-devtools-shared/.+/__tests__/[^]+.test.js$',
   snapshotSerializers: [
     require.resolve(
-      '../../packages/react-devtools-shared/src/__tests__/dehydratedValueSerializer.js'
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/dehydratedValueSerializer.js'
     ),
     require.resolve(
-      '../../packages/react-devtools-shared/src/__tests__/hookSerializer.js'
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/hookSerializer.js'
     ),
     require.resolve(
-      '../../packages/react-devtools-shared/src/__tests__/inspectedElementSerializer.js'
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/inspectedElementSerializer.js'
     ),
     require.resolve(
-      '../../packages/react-devtools-shared/src/__tests__/storeSerializer.js'
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/storeSerializer.js'
     ),
     require.resolve(
-      '../../packages/react-devtools-shared/src/__tests__/treeContextStateSerializer.js'
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/treeContextStateSerializer.js'
+    ),
+    require.resolve(
+      '../../packages/react-devtools-shared/src/__tests__/__serializers__/numberToFixedSerializer.js'
     ),
   ],
   setupFiles: [

From 7bee1379b740896c5e6a91c2e95d4fe8bb557105 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 20 Jan 2022 16:29:43 -0500
Subject: [PATCH 1109/1603] Filter out deleted components that are added to the
 updaters list (#23156)

There was a bug that occurred when a destroy effect is called that causes an update. The update would be added to the updaters list even though the fiber that was calling the destroy effect was unmounted and no longer exists. This PR:

* Adds a patch to Devtools to filter out all in the update list that aren't in the fiberToIDMap (which contains all fibers currently on screen)
---
 .../src/__tests__/profilingCache-test.js      | 93 +++++++++++++++++++
 .../src/backend/renderer.js                   |  4 +-
 2 files changed, 96 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 00605d857a15..67db757461a6 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -752,4 +752,97 @@ describe('ProfilingCache', () => {
     utils.act(() => store.profilerStore.stopProfiling());
     expect(container.textContent).toBe('About');
   });
+
+  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 = ReactDOM.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');
+  });
+
+  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 = ReactDOM.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');
+  });
+
+  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 = ReactDOM.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/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index daa4d4e1030c..0f7b15cd019b 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2586,7 +2586,9 @@ export function attach(
 
   function getUpdatersList(root): Array<SerializedElement> | null {
     return root.memoizedUpdaters != null
-      ? Array.from(root.memoizedUpdaters).map(fiberToSerializedElement)
+      ? Array.from(root.memoizedUpdaters)
+          .filter(fiber => getFiberIDUnsafe(fiber) !== null)
+          .map(fiberToSerializedElement)
       : null;
   }
 

From 26baf6a174d97bf4821c54e0083e69422cb87f45 Mon Sep 17 00:00:00 2001
From: Behnam Mohammadi <itten@live.com>
Date: Fri, 21 Jan 2022 18:03:00 +0330
Subject: [PATCH 1110/1603] styles: replace Array.isArray with module isArray
 (#23154)

---
 .../backend/NativeStyleEditor/setupNativeStyleEditor.js  | 9 +++++----
 .../react-devtools-shared/src/backend/StyleX/utils.js    | 5 +++--
 .../views/Components/InspectedElementHooksTree.js        | 5 +++--
 .../src/devtools/views/Components/KeyValue.js            | 3 ++-
 .../react-devtools-shared/src/devtools/views/utils.js    | 3 ++-
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
index 221ad7a9c480..561068bbb122 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -9,6 +9,7 @@
 
 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';
@@ -210,11 +211,11 @@ function renameStyle(
     }
     // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
     instance.setNativeProps({style: newStyle});
-  } else if (Array.isArray(style)) {
+  } else if (isArray(style)) {
     const lastIndex = style.length - 1;
     if (
       typeof style[lastIndex] === 'object' &&
-      !Array.isArray(style[lastIndex])
+      !isArray(style[lastIndex])
     ) {
       customStyle = shallowClone(style[lastIndex]);
       delete customStyle[oldName];
@@ -296,11 +297,11 @@ function setStyle(
     }
     // TODO Fabric does not support setNativeProps; chat with Sebastian or Eli
     instance.setNativeProps({style: newStyle});
-  } else if (Array.isArray(style)) {
+  } else if (isArray(style)) {
     const lastLength = style.length - 1;
     if (
       typeof style[lastLength] === 'object' &&
-      !Array.isArray(style[lastLength])
+      !isArray(style[lastLength])
     ) {
       agent.overrideValueAtPath({
         type: 'props',
diff --git a/packages/react-devtools-shared/src/backend/StyleX/utils.js b/packages/react-devtools-shared/src/backend/StyleX/utils.js
index 6bf5a2978927..14035204a8dd 100644
--- a/packages/react-devtools-shared/src/backend/StyleX/utils.js
+++ b/packages/react-devtools-shared/src/backend/StyleX/utils.js
@@ -8,6 +8,7 @@
  */
 
 import type {StyleXPlugin} from 'react-devtools-shared/src/types';
+import isArray from 'react-devtools-shared/src/isArray';
 
 const cachedStyleNameToValueMap: Map<string, string> = new Map();
 
@@ -28,9 +29,9 @@ export function crawlData(
   sources: Set<string>,
   resolvedStyles: Object,
 ): void {
-  if (Array.isArray(data)) {
+  if (isArray(data)) {
     data.forEach(entry => {
-      if (Array.isArray(entry)) {
+      if (isArray(entry)) {
         crawlData(entry, sources, resolvedStyles);
       } else {
         crawlObjectProperties(entry, sources, resolvedStyles);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 83450dc616bb..f00d9dd0eb50 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -27,6 +27,7 @@ import {
   enableProfilerChangedHookIndices,
 } from 'react-devtools-feature-flags';
 import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
+import isArray from 'react-devtools-shared/src/isArray';
 
 import type {InspectedElement} from './types';
 import type {HooksNode, HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
@@ -269,7 +270,7 @@ function HookView({
     displayValue = 'null';
   } else if (value === undefined) {
     displayValue = null;
-  } else if (Array.isArray(value)) {
+  } else if (isArray(value)) {
     isComplexDisplayValue = true;
     displayValue = 'Array';
   } else if (type === 'object') {
@@ -278,7 +279,7 @@ function HookView({
   }
 
   if (isCustomHook) {
-    const subHooksView = Array.isArray(subHooks) ? (
+    const subHooksView = isArray(subHooks) ? (
       <InnerHooksTreeView
         element={element}
         hooks={subHooks}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index f09c9f3d602d..b9fcf02145b0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -24,6 +24,7 @@ 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';
 
@@ -327,7 +328,7 @@ export default function KeyValue({
       );
     }
   } else {
-    if (Array.isArray(value)) {
+    if (isArray(value)) {
       const hasChildren = value.length > 0 || canEditValues;
       const displayName = getMetaValueLabel(value);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
index 035d9f83a3bc..ae9c4ddff309 100644
--- a/packages/react-devtools-shared/src/devtools/views/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -10,6 +10,7 @@
 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';
 
@@ -107,7 +108,7 @@ function sanitize(data: Object): void {
     if (value && value[meta.type]) {
       data[key] = getMetaValueLabel(value);
     } else if (value != null) {
-      if (Array.isArray(value)) {
+      if (isArray(value)) {
         sanitize(value);
       } else if (typeof value === 'object') {
         sanitize(value);

From ca143e18d83dcc57d7133d8859e0fc06df39b9f0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 21 Jan 2022 09:59:11 -0500
Subject: [PATCH 1111/1603] Prettier

---
 .../NativeStyleEditor/setupNativeStyleEditor.js        | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
index 561068bbb122..6a7921489c59 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -213,10 +213,7 @@ function renameStyle(
     instance.setNativeProps({style: newStyle});
   } else if (isArray(style)) {
     const lastIndex = style.length - 1;
-    if (
-      typeof style[lastIndex] === 'object' &&
-      !isArray(style[lastIndex])
-    ) {
+    if (typeof style[lastIndex] === 'object' && !isArray(style[lastIndex])) {
       customStyle = shallowClone(style[lastIndex]);
       delete customStyle[oldName];
       if (newName) {
@@ -299,10 +296,7 @@ function setStyle(
     instance.setNativeProps({style: newStyle});
   } else if (isArray(style)) {
     const lastLength = style.length - 1;
-    if (
-      typeof style[lastLength] === 'object' &&
-      !isArray(style[lastLength])
-    ) {
+    if (typeof style[lastLength] === 'object' && !isArray(style[lastLength])) {
       agent.overrideValueAtPath({
         type: 'props',
         id,

From 13036bfbc8ecbcf4451adb7bde397f438caa8607 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 21 Jan 2022 11:05:49 -0500
Subject: [PATCH 1112/1603] DevTools should not crawl unmounted subtrees when
 profiling starts (#23162)

Previously we crawled all subtrees, even not-yet-mounted ones, to initialize context values. This was not only unecessary, but it also caused an error to be thrown. This commit adds a test and fixes that behavior.
---
 .../src/__tests__/profilerStore-test.js       | 20 +++++++++++++++++++
 .../src/backend/renderer.js                   | 18 ++++++++++++-----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index 06ce6a9dc4c8..7f553bed82e8 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -221,4 +221,24 @@ describe('ProfilerStore', () => {
     expect(data.commitData).toHaveLength(1);
     expect(data.operations).toHaveLength(1);
   });
+
+  it('should not throw while initializing context values for Fibers within a not-yet-mounted subtree', () => {
+    const promise = new Promise(resolve => {});
+    const SuspendingView = () => {
+      throw promise;
+    };
+
+    const App = () => {
+      return (
+        <React.Suspense fallback="Fallback">
+          <SuspendingView />
+        </React.Suspense>
+      );
+    };
+
+    const container = document.createElement('div');
+
+    utils.act(() => legacyRender(<App />, container));
+    utils.act(() => store.profilerStore.startProfiling());
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 0f7b15cd019b..9a60fe42376a 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1347,11 +1347,19 @@ export function attach(
   // Fibers only store the current context value,
   // so we need to track them separately in order to determine changed keys.
   function crawlToInitializeContextsMap(fiber: Fiber) {
-    updateContextsForFiber(fiber);
-    let current = fiber.child;
-    while (current !== null) {
-      crawlToInitializeContextsMap(current);
-      current = current.sibling;
+    const id = getFiberIDUnsafe(fiber);
+
+    // Not all Fibers in the subtree have mounted yet.
+    // For example, Offscreen (hidden) or Suspense (suspended) subtrees won't yet be tracked.
+    // We can safely skip these subtrees.
+    if (id !== null) {
+      updateContextsForFiber(fiber);
+
+      let current = fiber.child;
+      while (current !== null) {
+        crawlToInitializeContextsMap(current);
+        current = current.sibling;
+      }
     }
   }
 

From e28a0db224e1c702cf63916eb39284325c439b8b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 24 Jan 2022 09:29:18 -0500
Subject: [PATCH 1113/1603] React DevTools 4.22.1 -> 4.23.0

---
 packages/react-devtools-core/package.json            |  2 +-
 .../react-devtools-extensions/chrome/manifest.json   |  4 ++--
 .../react-devtools-extensions/edge/manifest.json     |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json  |  2 +-
 packages/react-devtools-inline/package.json          |  2 +-
 packages/react-devtools-timeline/package.json        |  2 +-
 packages/react-devtools/CHANGELOG.md                 | 12 ++++++++++++
 packages/react-devtools/package.json                 |  4 ++--
 8 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 453f74d95268..e4a494debf32 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.22.1",
+  "version": "4.23.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index d0f42468714a..1c38827233a8 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.22.1",
-  "version_name": "4.22.1",
+  "version": "4.23.0",
+  "version_name": "4.23.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index d1caa3bb63ca..ad0598f8828f 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.22.1",
-  "version_name": "4.22.1",
+  "version": "4.23.0",
+  "version_name": "4.23.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 848a5829075e..f62c866c8a47 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.22.1",
+  "version": "4.23.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 97ea833afb20..0905224fefac 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.22.1",
+  "version": "4.23.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index f2492870108f..79c44c6ac188 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.22.1",
+  "version": "4.23.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index e94321a539c7..4c3b26578d2a 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+## 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))
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 1eda1889dd1c..133aa724cb19 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.22.1",
+  "version": "4.23.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.22.1",
+    "react-devtools-core": "4.23.0",
     "update-notifier": "^2.1.0"
   }
 }

From 529dc3ce84f0efe99a8be33ff453c09d5801d5ca Mon Sep 17 00:00:00 2001
From: Fran Dios <frankdiox@gmail.com>
Date: Tue, 25 Jan 2022 02:52:51 +0900
Subject: [PATCH 1114/1603] Fix context providers in SSR when handling multiple
 requests (#23171)

* add failing test for renderToPipeableStream

* Fix context providers in SSR when handling multiple requests. Closes #23089

* Add sibling regression test

Co-authored-by: zhuyi01 <zhuyi01@ke.com>
Co-authored-by: Dan Abramov <dan.abramov@me.com>
---
 .../__tests__/ReactDOMFizzServerNode-test.js  | 184 ++++++++++++++++++
 .../react-server/src/ReactFizzNewContext.js   |   5 +-
 2 files changed, 187 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index bd0ca112a272..a453e0347d8d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -338,4 +338,188 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toContain('Loading');
     expect(isCompleteCalls).toBe(1);
   });
+
+  // @gate experimental
+  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();
+    ReactDOMFizzServer.renderToPipeableStream(
+      <DelayContext.Provider value={client}>
+        <Suspense fallback="loading">
+          <Component />
+        </Suspense>
+      </DelayContext.Provider>,
+    ).pipe(writable);
+
+    jest.runAllTimers();
+
+    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');
+  });
+
+  // @gate experimental
+  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();
+    ReactDOMFizzServer.renderToPipeableStream(
+      <DelayContext.Provider value={client0}>
+        <Suspense fallback="loading">
+          <Component />
+        </Suspense>
+      </DelayContext.Provider>,
+    ).pipe(writable0);
+
+    const client1 = new DelayClient();
+    const {
+      writable: writable1,
+      output: output1,
+      completed: completed1,
+    } = getTestWritable();
+    ReactDOMFizzServer.renderToPipeableStream(
+      <DelayContext.Provider value={client1}>
+        <Suspense fallback="loading">
+          <Component />
+        </Suspense>
+      </DelayContext.Provider>,
+    ).pipe(writable1);
+
+    jest.runAllTimers();
+
+    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');
+  });
+
+  // @gate experimental
+  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();
+    ReactDOMFizzServer.renderToPipeableStream(
+      <>
+        <DelayContext.Provider value={client}>
+          <Suspense fallback="loading">
+            <Component />
+          </Suspense>
+        </DelayContext.Provider>
+        <DelayContext.Provider value={client}>
+          <Suspense fallback="loading">
+            <Component />
+          </Suspense>
+        </DelayContext.Provider>
+      </>,
+    ).pipe(writable);
+
+    jest.runAllTimers();
+
+    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');
+  });
 });
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
index 0cb879ef780d..0eaa07f839a1 100644
--- a/packages/react-server/src/ReactFizzNewContext.js
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -78,9 +78,10 @@ function popToNearestCommonAncestor(
       }
 
       popToNearestCommonAncestor(parentPrev, parentNext);
-      // On the way back, we push the new ones that weren't common.
-      pushNode(next);
     }
+
+    // On the way back, we push the new ones that weren't common.
+    pushNode(next);
   }
 }
 

From 934f72221df0a006a96e9be70e5dae72aa060ab3 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 26 Jan 2022 13:54:44 -0500
Subject: [PATCH 1115/1603] Gracefully handle empty "xstyle" prop values
 (#23190)

---
 .../backend/StyleX/__tests__/utils-test.js    | 23 +++++++++++++++++++
 .../src/backend/StyleX/utils.js               |  4 ++++
 2 files changed, 27 insertions(+)

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
index 6783fea27f7e..d0b8742a82f8 100644
--- a/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
@@ -33,6 +33,29 @@ describe('Stylex plugin utils', () => {
     });
   });
 
+  it('should gracefully handle empty values', () => {
+    expect(getStyleXData(null)).toMatchInlineSnapshot(`
+      Object {
+        "resolvedStyles": Object {},
+        "sources": Array [],
+      }
+    `);
+
+    expect(getStyleXData(undefined)).toMatchInlineSnapshot(`
+      Object {
+        "resolvedStyles": Object {},
+        "sources": Array [],
+      }
+    `);
+
+    expect(getStyleXData('')).toMatchInlineSnapshot(`
+      Object {
+        "resolvedStyles": Object {},
+        "sources": Array [],
+      }
+    `);
+  });
+
   it('should support simple style objects', () => {
     defineStyles(`
       .foo {
diff --git a/packages/react-devtools-shared/src/backend/StyleX/utils.js b/packages/react-devtools-shared/src/backend/StyleX/utils.js
index 14035204a8dd..230e08360259 100644
--- a/packages/react-devtools-shared/src/backend/StyleX/utils.js
+++ b/packages/react-devtools-shared/src/backend/StyleX/utils.js
@@ -29,6 +29,10 @@ export function crawlData(
   sources: Set<string>,
   resolvedStyles: Object,
 ): void {
+  if (data == null) {
+    return;
+  }
+
   if (isArray(data)) {
     data.forEach(entry => {
       if (isArray(entry)) {

From 3d1e7e72783bbd03d5d28c5e9d682da98d6b426e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 26 Jan 2022 15:18:21 -0500
Subject: [PATCH 1116/1603] Suppress act() warnings in DevTools tests (#23192)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

These warnings are not useful for DevTools tests– and sometimes may mask other, important warnings. This commit disables them.
---
 .../src/__tests__/editing-test.js             |  2 +-
 .../src/__tests__/inspectedElement-test.js    | 53 +++++++++++++------
 .../src/__tests__/setupTests.js               | 20 +++++--
 3 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/editing-test.js b/packages/react-devtools-shared/src/__tests__/editing-test.js
index 78ab08b78603..39355a940e60 100644
--- a/packages/react-devtools-shared/src/__tests__/editing-test.js
+++ b/packages/react-devtools-shared/src/__tests__/editing-test.js
@@ -19,7 +19,7 @@ describe('editing interface', () => {
   let utils;
 
   const flushPendingUpdates = () => {
-    jest.runOnlyPendingTimers();
+    utils.act(() => jest.runOnlyPendingTimers());
   };
 
   beforeEach(() => {
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index be5a85239653..7c67a4084ae3 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -71,8 +71,10 @@ describe('InspectedElement', () => {
       .TreeContextController;
 
     // Used by inspectElementAtIndex() helper function
-    testRendererInstance = TestRenderer.create(null, {
-      unstable_isConcurrent: true,
+    utils.act(() => {
+      testRendererInstance = TestRenderer.create(null, {
+        unstable_isConcurrent: true,
+      });
     });
 
     errorBoundaryInstance = null;
@@ -299,9 +301,14 @@ describe('InspectedElement', () => {
       // from props like defaultSelectedElementID 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.
-      testRendererInstance = TestRenderer.create(null, {
-        unstable_isConcurrent: true,
-      });
+      utils.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);
 
@@ -460,9 +467,14 @@ describe('InspectedElement', () => {
     // 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.
-    testRendererInstance = TestRenderer.create(null, {
-      unstable_isConcurrent: true,
-    });
+    utils.withErrorsOrWarningsIgnored(
+      ['An update to %s inside a test was not wrapped in act'],
+      () => {
+        testRendererInstance = TestRenderer.create(null, {
+          unstable_isConcurrent: true,
+        });
+      },
+    );
 
     const {
       clearCacheForTests,
@@ -2024,9 +2036,14 @@ describe('InspectedElement', () => {
     // from props like defaultSelectedElementID 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.
-    testRendererInstance = TestRenderer.create(null, {
-      unstable_isConcurrent: true,
-    });
+    utils.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);
@@ -2743,11 +2760,15 @@ describe('InspectedElement', () => {
         0,
       ): any): number);
       const inspect = index => {
-        // HACK: Recreate TestRenderer instance so we can inspect different
-        // elements
-        testRendererInstance = TestRenderer.create(null, {
-          unstable_isConcurrent: true,
-        });
+        // HACK: Recreate TestRenderer instance so we can inspect different elements
+        utils.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 => {
diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index c2ce9184adc9..37ca023381bd 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -66,9 +66,13 @@ env.beforeEach(() => {
     if (typeof firstArg !== 'string') {
       return false;
     }
-    return global._ignoredErrorOrWarningMessages.some(errorOrWarningMessage => {
-      return firstArg.indexOf(errorOrWarningMessage) !== -1;
-    });
+    const shouldFilter = global._ignoredErrorOrWarningMessages.some(
+      errorOrWarningMessage => {
+        return firstArg.indexOf(errorOrWarningMessage) !== -1;
+      },
+    );
+
+    return shouldFilter;
   }
 
   const originalConsoleError = console.error;
@@ -82,7 +86,15 @@ env.beforeEach(() => {
       throw args[1];
     } else if (
       typeof firstArg === 'string' &&
-      firstArg.startsWith("Warning: It looks like you're using the wrong act()")
+      (firstArg.startsWith(
+        "Warning: It looks like you're using the wrong act()",
+      ) ||
+        firstArg.startsWith(
+          'Warning: The current testing environment is not configured to support act',
+        ) ||
+        firstArg.startsWith(
+          'Warning: You seem to have overlapping act() calls',
+        ))
     ) {
       // DevTools intentionally wraps updates with acts from both DOM and test-renderer,
       // since test updates are expected to impact both renderers.

From 2ed58eb889b2b2a8a745ec6c73785f8a87034d1f Mon Sep 17 00:00:00 2001
From: Shivam Jha <44032634+shivamjjha@users.noreply.github.com>
Date: Thu, 27 Jan 2022 05:43:17 +0530
Subject: [PATCH 1117/1603] Readme fixes (#23187)

* readme: fix contributing guide links
---
 README.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 54a095f7d0f4..8f2e04c6a9f9 100644
--- a/README.md
+++ b/README.md
@@ -3,10 +3,10 @@
 React is a JavaScript library for building user interfaces.
 
 * **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 state out of the DOM.
+* **Component-Based:** Build encapsulated components that manage their 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 and power mobile apps using [React Native](https://reactnative.dev/).
 
-[Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
+[Learn how to use React in your project](https://reactjs.org/docs/getting-started.html).
 
 ## Installation
 
@@ -52,7 +52,7 @@ ReactDOM.render(
 
 This example will render "Hello Taylor" into a container on the page.
 
-You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
+You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
 
 ## Contributing
 
@@ -62,13 +62,13 @@ The main purpose of this repository is to continue evolving React core, making i
 
 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.
 
-### [Contributing Guide](https://reactjs.org/contributing/how-to-contribute.html)
+### [Contributing Guide](https://reactjs.org/docs/how-to-contribute.html)
 
-Read our [contributing guide](https://reactjs.org/contributing/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.
+Read our [contributing guide](https://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.
 
 ### Good First Issues
 
-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 which have a relatively limited scope. This is a great place to get started.
+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.
 
 ### License
 

From fa816be7f0b28df051d80acfc85156197a9365de Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 28 Jan 2022 13:09:28 -0500
Subject: [PATCH 1118/1603] DevTools: Timeline profiler refactor

Refactor DevTools to record Timeline data (in memory) while profiling. Updated the Profiler UI to import/export Timeline data along with legacy profiler data.

Relates to issue #22529
---
 .../src/__tests__/TimelineProfiler-test.js    | 3193 ++++++---
 .../__serializers__/profilingSerializer.js    |   25 +
 .../__serializers__/timelineDataSerializer.js |   29 +
 .../__snapshots__/profilingCache-test.js.snap | 6127 +++++++++++++----
 .../src/__tests__/preprocessData-test.js      | 3822 +++++-----
 .../src/__tests__/store-test.js               |    8 +-
 .../src/__tests__/utils.js                    |    3 +
 .../src/backend/legacy/renderer.js            |    2 +-
 .../src/backend/profilingHooks.js             |  725 +-
 .../src/backend/renderer.js                   |   79 +-
 .../src/backend/types.js                      |    2 +
 .../react-devtools-shared/src/constants.js    |    3 +
 .../src/devtools/store.js                     |   62 +-
 .../Profiler/ClearProfilingDataButton.js      |   23 +-
 .../views/Profiler/CommitTreeBuilder.js       |    2 +-
 .../views/Profiler/NoProfilingData.js         |   35 +
 .../devtools/views/Profiler/ProcessingData.js |   21 +
 .../src/devtools/views/Profiler/Profiler.css  |   12 +
 .../src/devtools/views/Profiler/Profiler.js   |   69 +-
 .../views/Profiler/ProfilerContext.js         |    7 +-
 .../Profiler/ProfilingImportExportButtons.js  |   95 +-
 .../views/Profiler/ProfilingNotSupported.js   |   35 +
 .../views/Profiler/RecordingInProgress.js     |   24 +
 .../src/devtools/views/Profiler/types.js      |   19 +-
 .../src/devtools/views/Profiler/utils.js      |  129 +-
 .../react-devtools-timeline/src/CanvasPage.js |  103 +-
 .../src/EventTooltip.js                       |    8 +-
 .../src/ImportButton.css                      |   10 -
 .../src/ImportButton.js                       |   59 -
 .../react-devtools-timeline/src/Timeline.js   |  116 +-
 .../src/TimelineContext.js                    |   45 +-
 .../src/TimelineNotSupported.css              |   38 +
 .../src/TimelineNotSupported.js               |   52 +
 .../src/TimelineSearchContext.js              |   12 +-
 .../content-views/ComponentMeasuresView.js    |   10 +-
 .../src/content-views/NativeEventsView.js     |    6 +-
 .../src/content-views/NetworkMeasuresView.js  |    6 +-
 .../src/content-views/ReactMeasuresView.js    |   16 +-
 .../src/content-views/SchedulingEventsView.js |    6 +-
 .../src/content-views/SnapshotsView.js        |    6 +-
 .../src/content-views/SuspenseEventsView.js   |    6 +-
 .../src/content-views/ThrownErrorsView.js     |    6 +-
 .../src/createDataResourceFromImportedFile.js |    6 +-
 .../src/import-worker/index.js                |    4 +-
 .../src/import-worker/preprocessData.js       |   95 +-
 .../src/timelineCache.js                      |   13 +-
 packages/react-devtools-timeline/src/types.js |   29 +-
 .../src/utils/getBatchRange.js                |    4 +-
 scripts/jest/config.build-devtools.js         |    6 +
 49 files changed, 10716 insertions(+), 4497 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/__tests__/__serializers__/profilingSerializer.js
 create mode 100644 packages/react-devtools-shared/src/__tests__/__serializers__/timelineDataSerializer.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
 delete mode 100644 packages/react-devtools-timeline/src/ImportButton.css
 delete mode 100644 packages/react-devtools-timeline/src/ImportButton.js
 create mode 100644 packages/react-devtools-timeline/src/TimelineNotSupported.css
 create mode 100644 packages/react-devtools-timeline/src/TimelineNotSupported.js

diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
index 1a369acca27b..f010261a616e 100644
--- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -15,72 +15,10 @@ describe('Timeline profiler', () => {
   let Scheduler;
   let renderHelper;
   let renderRootHelper;
+  let store;
   let unmountFns;
   let utils;
 
-  let clearedMarks;
-  let featureDetectionMarkName = null;
-  let marks;
-  let setPerformanceMock;
-
-  function createUserTimingPolyfill() {
-    featureDetectionMarkName = null;
-
-    clearedMarks = [];
-    marks = [];
-
-    // 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 `${markName.substr(0, 29)}-<filtered-file-system-path>`;
-      } else if (markName.startsWith('--react-internal-module-stop')) {
-        return `${markName.substr(0, 28)}-<filtered-file-system-path>`;
-      } else if (markName.startsWith('--react-version')) {
-        return `${markName.substr(0, 15)}-<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);
-
-        clearedMarks.push(markName);
-        marks = marks.filter(mark => mark !== markName);
-      },
-      mark(markName, markOptions) {
-        markName = filterMarkData(markName);
-
-        if (featureDetectionMarkName === null) {
-          featureDetectionMarkName = markName;
-        }
-
-        marks.push(markName);
-
-        if (markOptions != null) {
-          // This is triggers the feature detection.
-          markOptions.startTime++;
-        }
-      },
-    };
-  }
-
-  function clearPendingMarks() {
-    clearedMarks.splice(0);
-  }
-
-  function dispatchAndSetCurrentEvent(element, event) {
-    try {
-      window.event = event;
-      element.dispatchEvent(event);
-    } finally {
-      window.event = undefined;
-    }
-  }
-
   beforeEach(() => {
     utils = require('./utils');
     utils.beforeEachProfiling();
@@ -104,1021 +42,2376 @@ describe('Timeline profiler', () => {
     ReactDOM = require('react-dom');
     Scheduler = require('scheduler');
 
-    setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
-      .setPerformanceMock_ONLY_FOR_TESTING;
-    setPerformanceMock(createUserTimingPolyfill());
-  });
-
-  afterEach(() => {
-    // Verify all logged marks also get cleared.
-    expect(marks).toHaveLength(0);
-
-    unmountFns.forEach(unmountFn => unmountFn());
-
-    setPerformanceMock(null);
+    store = global.store;
   });
 
-  it('should mark sync render without suspends or state updates', () => {
-    renderHelper(<div />);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-1",
-        "--render-start-1",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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('User Timing API', () => {
+    let clearedMarks;
+    let featureDetectionMarkName = null;
+    let marks;
+    let setPerformanceMock;
+
+    function createUserTimingPolyfill() {
+      featureDetectionMarkName = null;
+
+      clearedMarks = [];
+      marks = [];
+
+      // 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;
+        }
+      }
 
-  it('should mark concurrent render without suspends or state updates', () => {
-    renderRootHelper(<div />);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
-  });
+      // 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);
+
+          clearedMarks.push(markName);
+          marks = marks.filter(mark => mark !== markName);
+        },
+        mark(markName, markOptions) {
+          markName = filterMarkData(markName);
+
+          if (featureDetectionMarkName === null) {
+            featureDetectionMarkName = markName;
+          }
+
+          marks.push(markName);
+
+          if (markOptions != null) {
+            // This is triggers the feature detection.
+            markOptions.startTime++;
+          }
+        },
+      };
+    }
 
-  it('should mark render yields', async () => {
-    function Bar() {
-      Scheduler.unstable_yieldValue('Bar');
-      return null;
+    function clearPendingMarks() {
+      clearedMarks.splice(0);
     }
 
-    function Foo() {
-      Scheduler.unstable_yieldValue('Foo');
-      return <Bar />;
+    function dispatchAndSetCurrentEvent(element, event) {
+      try {
+        window.event = event;
+        element.dispatchEvent(event);
+      } finally {
+        window.event = undefined;
+      }
     }
 
-    React.startTransition(() => {
-      renderRootHelper(<Foo />);
+    beforeEach(() => {
+      setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
+        .setPerformanceMock_ONLY_FOR_TESTING;
+      setPerformanceMock(createUserTimingPolyfill());
     });
 
-    // Do one step of work.
-    expect(Scheduler).toFlushAndYieldThrough(['Foo']);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-64",
-        "--render-start-64",
-        "--component-render-start-Foo",
-        "--component-render-stop",
-        "--render-yield",
-      ]
-    `);
-  });
+    afterEach(() => {
+      // Verify all logged marks also get cleared.
+      expect(marks).toHaveLength(0);
 
-  it('should mark sync render with suspense that resolves', async () => {
-    const fakeSuspensePromise = Promise.resolve(true);
-    function Example() {
-      throw fakeSuspensePromise;
-    }
+      unmountFns.forEach(unmountFn => unmountFn());
+
+      setPerformanceMock(null);
+    });
+
+    it('should mark sync render without suspends or state updates', () => {
+      renderHelper(<div />);
 
-    renderHelper(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-    );
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-1",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-1-",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    await fakeSuspensePromise;
-    expect(clearedMarks).toMatchInlineSnapshot(`
+      expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--suspense-resolved-0-Example",
+          "--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",
         ]
-    `);
-  });
-
-  it('should mark sync render with suspense that rejects', async () => {
-    const fakeSuspensePromise = Promise.reject(new Error('error'));
-    function Example() {
-      throw fakeSuspensePromise;
-    }
+      `);
+    });
 
-    renderHelper(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-    );
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-1",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-1-",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    await expect(fakeSuspensePromise).rejects.toThrow();
-    expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);
-  });
+    it('should mark concurrent render without suspends or state updates', () => {
+      renderRootHelper(<div />);
 
-  it('should mark concurrent render with suspense that resolves', async () => {
-    const fakeSuspensePromise = Promise.resolve(true);
-    function Example() {
-      throw fakeSuspensePromise;
-    }
+      expect(clearedMarks).toMatchInlineSnapshot(`
+            Array [
+              "--schedule-render-16",
+            ]
+        `);
 
-    renderRootHelper(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-    );
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-16-",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    await fakeSuspensePromise;
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--suspense-resolved-0-Example",
-      ]
-    `);
-  });
+      clearPendingMarks();
 
-  it('should mark concurrent render with suspense that rejects', async () => {
-    const fakeSuspensePromise = Promise.reject(new Error('error'));
-    function Example() {
-      throw fakeSuspensePromise;
-    }
+      expect(Scheduler).toFlushUntilNextPaint([]);
 
-    renderRootHelper(
-      <React.Suspense fallback={null}>
-        <Example />
-      </React.Suspense>,
-    );
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--suspense-suspend-0-Example-mount-16-",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    await expect(fakeSuspensePromise).rejects.toThrow();
-    expect(clearedMarks).toMatchInlineSnapshot(`
+      expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--suspense-rejected-0-Example",
+          "--render-start-16",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
         ]
-    `);
-  });
+      `);
+    });
 
-  it('should mark cascading class component state updates', () => {
-    class Example extends React.Component {
-      state = {didMount: false};
-      componentDidMount() {
-        this.setState({didMount: true});
-      }
-      render() {
+    it('should mark render yields', async () => {
+      function Bar() {
+        Scheduler.unstable_yieldValue('Bar');
         return null;
       }
-    }
-
-    renderRootHelper(<Example />);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--schedule-state-update-1-Example",
-        "--layout-effects-stop",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-        "--commit-stop",
-      ]
-    `);
-  });
 
-  it('should mark cascading class component force updates', () => {
-    class Example extends React.Component {
-      componentDidMount() {
-        this.forceUpdate();
-      }
-      render() {
-        return null;
+      function Foo() {
+        Scheduler.unstable_yieldValue('Foo');
+        return <Bar />;
       }
-    }
 
-    renderRootHelper(<Example />);
+      React.startTransition(() => {
+        renderRootHelper(<Foo />);
+      });
 
-    expect(clearedMarks).toMatchInlineSnapshot(`
-        Array [
-          "--schedule-render-16",
-        ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--schedule-forced-update-1-Example",
-        "--layout-effects-stop",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-        "--commit-stop",
-      ]
-    `);
-  });
+      // Do one step of work.
+      expect(Scheduler).toFlushAndYieldThrough(['Foo']);
 
-  it('should mark render phase state updates for class component', () => {
-    class Example extends React.Component {
-      state = {didRender: false};
-      render() {
-        if (this.state.didRender === false) {
-          this.setState({didRender: true});
-        }
-        return null;
+      expect(clearedMarks).toMatchInlineSnapshot(`
+            Array [
+              "--schedule-render-64",
+              "--render-start-64",
+              "--component-render-start-Foo",
+              "--component-render-stop",
+              "--render-yield",
+            ]
+        `);
+    });
+
+    it('should mark sync render with suspense that resolves', async () => {
+      const fakeSuspensePromise = Promise.resolve(true);
+      function Example() {
+        throw fakeSuspensePromise;
       }
-    }
 
-    renderRootHelper(<Example />);
+      renderHelper(
+        <React.Suspense fallback={null}>
+          <Example />
+        </React.Suspense>,
+      );
 
-    expect(clearedMarks).toMatchInlineSnapshot(`
+      expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--schedule-render-16",
+          "--schedule-render-1",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-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",
         ]
-    `);
+      `);
 
-    clearPendingMarks();
+      clearPendingMarks();
 
-    let errorMessage;
-    spyOn(console, 'error').and.callFake(message => {
-      errorMessage = message;
+      await fakeSuspensePromise;
+      expect(clearedMarks).toMatchInlineSnapshot(`
+                Array [
+                  "--suspense-resolved-0-Example",
+                ]
+          `);
     });
 
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(console.error).toHaveBeenCalledTimes(1);
-    expect(errorMessage).toContain(
-      'Cannot update during an existing state transition',
-    );
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--schedule-state-update-16-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
-  });
-
-  it('should mark render phase force updates for class component', () => {
-    class Example extends React.Component {
-      state = {didRender: false};
-      render() {
-        if (this.state.didRender === false) {
-          this.forceUpdate(() => this.setState({didRender: true}));
-        }
-        return null;
+    it('should mark sync render with suspense that rejects', async () => {
+      const fakeSuspensePromise = Promise.reject(new Error('error'));
+      function Example() {
+        throw fakeSuspensePromise;
       }
-    }
 
-    renderRootHelper(<Example />);
+      renderHelper(
+        <React.Suspense fallback={null}>
+          <Example />
+        </React.Suspense>,
+      );
 
-    expect(clearedMarks).toMatchInlineSnapshot(`
+      expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--schedule-render-16",
+          "--schedule-render-1",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-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",
         ]
-    `);
+      `);
 
-    clearPendingMarks();
+      clearPendingMarks();
 
-    let errorMessage;
-    spyOn(console, 'error').and.callFake(message => {
-      errorMessage = message;
+      await expect(fakeSuspensePromise).rejects.toThrow();
+      expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);
     });
 
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(console.error).toHaveBeenCalledTimes(1);
-    expect(errorMessage).toContain(
-      'Cannot update during an existing state transition',
-    );
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--schedule-forced-update-16-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
-  });
+    it('should mark concurrent render with suspense that resolves', async () => {
+      const fakeSuspensePromise = Promise.resolve(true);
+      function Example() {
+        throw fakeSuspensePromise;
+      }
 
-  it('should mark cascading layout updates', () => {
-    function Example() {
-      const [didMount, setDidMount] = React.useState(false);
-      React.useLayoutEffect(() => {
-        setDidMount(true);
-      }, []);
-      return didMount;
-    }
+      renderRootHelper(
+        <React.Suspense fallback={null}>
+          <Example />
+        </React.Suspense>,
+      );
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+            Array [
+              "--schedule-render-16",
+            ]
+        `);
+
+      clearPendingMarks();
 
-    renderRootHelper(<Example />);
+      expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(clearedMarks).toMatchInlineSnapshot(`
+      expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-16-",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
         ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--component-layout-effect-mount-start-Example",
-        "--schedule-state-update-1-Example",
-        "--component-layout-effect-mount-stop",
-        "--layout-effects-stop",
-        "--render-start-1",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-        "--commit-stop",
-      ]
-    `);
-  });
+      `);
 
-  // This test is coupled to lane implementation details, so I'm disabling it in
-  // the new fork until it stabilizes so we don't have to repeatedly update it.
-  it('should mark cascading passive updates', () => {
-    function Example() {
-      const [didMount, setDidMount] = React.useState(false);
-      React.useEffect(() => {
-        setDidMount(true);
-      }, []);
-      return didMount;
-    }
+      clearPendingMarks();
 
-    renderRootHelper(<Example />);
-
-    expect(Scheduler).toFlushAndYield([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-        "--passive-effects-start-16",
-        "--component-passive-effect-mount-start-Example",
-        "--schedule-state-update-16-Example",
-        "--component-passive-effect-mount-stop",
-        "--passive-effects-stop",
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-      ]
-    `);
-  });
+      await fakeSuspensePromise;
+      expect(clearedMarks).toMatchInlineSnapshot(`
+            Array [
+              "--suspense-resolved-0-Example",
+            ]
+        `);
+    });
 
-  it('should mark render phase updates', () => {
-    function Example() {
-      const [didRender, setDidRender] = React.useState(false);
-      if (!didRender) {
-        setDidRender(true);
+    it('should mark concurrent render with suspense that rejects', async () => {
+      const fakeSuspensePromise = Promise.reject(new Error('error'));
+      function Example() {
+        throw fakeSuspensePromise;
       }
-      return didRender;
-    }
 
-    renderRootHelper(<Example />);
-
-    expect(Scheduler).toFlushAndYield([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-        "--render-start-16",
-        "--component-render-start-Example",
-        "--schedule-state-update-16-Example",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--layout-effects-stop",
-        "--commit-stop",
-      ]
-    `);
-  });
+      renderRootHelper(
+        <React.Suspense fallback={null}>
+          <Example />
+        </React.Suspense>,
+      );
 
-  it('should mark sync render that throws', async () => {
-    spyOn(console, 'error');
+      expect(clearedMarks).toMatchInlineSnapshot(`
+            Array [
+              "--schedule-render-16",
+            ]
+        `);
 
-    class ErrorBoundary extends React.Component {
-      state = {error: null};
-      componentDidCatch(error) {
-        this.setState({error});
-      }
-      render() {
-        if (this.state.error) {
-          return null;
-        }
-        return this.props.children;
-      }
-    }
+      clearPendingMarks();
 
-    function ExampleThatThrows() {
-      throw Error('Expected error');
-    }
+      expect(Scheduler).toFlushUntilNextPaint([]);
 
-    renderHelper(
-      <ErrorBoundary>
-        <ExampleThatThrows />
-      </ErrorBoundary>,
-    );
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--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-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-      ]
-    `);
-  });
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--suspense-suspend-0-Example-mount-16-",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
 
-  it('should mark concurrent render that throws', async () => {
-    spyOn(console, 'error');
+      clearPendingMarks();
 
-    class ErrorBoundary extends React.Component {
-      state = {error: null};
-      componentDidCatch(error) {
-        this.setState({error});
-      }
-      render() {
-        if (this.state.error) {
+      await expect(fakeSuspensePromise).rejects.toThrow();
+      expect(clearedMarks).toMatchInlineSnapshot(`
+                Array [
+                  "--suspense-rejected-0-Example",
+                ]
+          `);
+    });
+
+    it('should mark cascading class component state updates', () => {
+      class Example extends React.Component {
+        state = {didMount: false};
+        componentDidMount() {
+          this.setState({didMount: true});
+        }
+        render() {
           return null;
         }
-        return this.props.children;
       }
-    }
 
-    function ExampleThatThrows() {
-      // eslint-disable-next-line no-throw-literal
-      throw 'Expected error';
-    }
+      renderRootHelper(<Example />);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+            Array [
+              "--schedule-render-16",
+            ]
+        `);
+
+      clearPendingMarks();
 
-    renderRootHelper(
-      <ErrorBoundary>
-        <ExampleThatThrows />
-      </ErrorBoundary>,
-    );
+      expect(Scheduler).toFlushUntilNextPaint([]);
 
-    expect(clearedMarks).toMatchInlineSnapshot(`
+      expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--schedule-state-update-1-Example",
+          "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--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",
+          "--commit-stop",
         ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushUntilNextPaint([]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--render-start-16",
-        "--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",
-        "--render-start-16",
-        "--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-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--schedule-state-update-1-ErrorBoundary",
-        "--layout-effects-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-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-        "--commit-stop",
-      ]
-    `);
-  });
+      `);
+    });
 
-  it('should mark passive and layout effects', async () => {
-    function ComponentWithEffects() {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('layout 1 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('layout 1 unmount');
-        };
-      }, []);
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('passive 1 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('passive 1 unmount');
-        };
-      }, []);
-
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('layout 2 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('layout 2 unmount');
-        };
-      }, []);
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('passive 2 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('passive 2 unmount');
-        };
-      }, []);
-
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue('passive 3 mount');
-        return () => {
-          Scheduler.unstable_yieldValue('passive 3 unmount');
-        };
-      }, []);
-
-      return null;
-    }
+    it('should mark cascading class component force updates', () => {
+      class Example extends React.Component {
+        componentDidMount() {
+          this.forceUpdate();
+        }
+        render() {
+          return null;
+        }
+      }
 
-    const unmount = renderRootHelper(<ComponentWithEffects />);
-
-    expect(Scheduler).toFlushUntilNextPaint([
-      'layout 1 mount',
-      'layout 2 mount',
-    ]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-16",
-        "--render-start-16",
-        "--component-render-start-ComponentWithEffects",
-        "--component-render-stop",
-        "--render-stop",
-        "--commit-start-16",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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-16",
-        "--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",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushAndYield([
-      'passive 1 mount',
-      'passive 2 mount',
-      'passive 3 mount',
-    ]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--passive-effects-start-16",
-        "--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",
-      ]
-    `);
-
-    clearPendingMarks();
-
-    expect(Scheduler).toFlushAndYield([]);
-
-    unmount();
-
-    expect(Scheduler).toHaveYielded([
-      'layout 1 unmount',
-      'layout 2 unmount',
-      'passive 1 unmount',
-      'passive 2 unmount',
-      'passive 3 unmount',
-    ]);
-
-    expect(clearedMarks).toMatchInlineSnapshot(`
-      Array [
-        "--schedule-render-1",
-        "--render-start-1",
-        "--render-stop",
-        "--commit-start-1",
-        "--react-version-<filtered-version>",
-        "--profiler-version-1",
-        "--react-internal-module-start-<filtered-file-system-path>",
-        "--react-internal-module-stop-<filtered-file-system-path>",
-        "--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",
-        "--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-1",
-        "--layout-effects-stop",
-        "--passive-effects-start-1",
-        "--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",
-      ]
-    `);
-  });
+      renderRootHelper(<Example />);
 
-  describe('lane labels', () => {
-    it('regression test SyncLane', () => {
-      renderHelper(<div />);
+      expect(clearedMarks).toMatchInlineSnapshot(`
+                Array [
+                  "--schedule-render-16",
+                ]
+          `);
+
+      clearPendingMarks();
+
+      expect(Scheduler).toFlushUntilNextPaint([]);
 
       expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--schedule-render-1",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--schedule-forced-update-1-Example",
+          "--layout-effects-stop",
           "--render-start-1",
+          "--component-render-start-Example",
+          "--component-render-stop",
           "--render-stop",
           "--commit-start-1",
           "--react-version-<filtered-version>",
           "--profiler-version-1",
-          "--react-internal-module-start-<filtered-file-system-path>",
-          "--react-internal-module-stop-<filtered-file-system-path>",
+          "--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",
           "--commit-stop",
         ]
       `);
     });
 
-    it('regression test DefaultLane', () => {
-      renderRootHelper(<div />);
+    it('should mark render phase state updates for class component', () => {
+      class Example extends React.Component {
+        state = {didRender: false};
+        render() {
+          if (this.state.didRender === false) {
+            this.setState({didRender: true});
+          }
+          return null;
+        }
+      }
+
+      renderRootHelper(<Example />);
+
       expect(clearedMarks).toMatchInlineSnapshot(`
-          Array [
-            "--schedule-render-16",
-          ]
+                Array [
+                  "--schedule-render-16",
+                ]
+          `);
+
+      clearPendingMarks();
+
+      let errorMessage;
+      spyOn(console, 'error').and.callFake(message => {
+        errorMessage = message;
+      });
+
+      expect(Scheduler).toFlushUntilNextPaint([]);
+
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(errorMessage).toContain(
+        'Cannot update during an existing state transition',
+      );
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--schedule-state-update-16-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
       `);
     });
 
-    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} />;
+    it('should mark render phase force updates for class component', () => {
+      let forced = false;
+      class Example extends React.Component {
+        render() {
+          if (!forced) {
+            forced = true;
+            this.forceUpdate();
+          }
+          return null;
+        }
       }
 
-      renderRootHelper(<App />);
-      expect(Scheduler).toFlushAndYield([]);
+      renderRootHelper(<Example />);
 
-      clearedMarks.splice(0);
+      expect(clearedMarks).toMatchInlineSnapshot(`
+                Array [
+                  "--schedule-render-16",
+                ]
+          `);
+
+      clearPendingMarks();
+
+      let errorMessage;
+      spyOn(console, 'error').and.callFake(message => {
+        errorMessage = message;
+      });
 
-      targetRef.current.click();
+      expect(Scheduler).toFlushUntilNextPaint([]);
 
-      // Wait a frame, for React to process the "click" update.
-      await Promise.resolve();
+      expect(console.error).toHaveBeenCalledTimes(1);
+      expect(errorMessage).toContain(
+        'Cannot update during an existing state transition',
+      );
 
       expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--schedule-state-update-1-App",
-          "--render-start-1",
-          "--component-render-start-App",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--schedule-forced-update-16-Example",
           "--component-render-stop",
           "--render-stop",
-          "--commit-start-1",
+          "--commit-start-16",
           "--react-version-<filtered-version>",
           "--profiler-version-1",
-          "--react-internal-module-start-<filtered-file-system-path>",
-          "--react-internal-module-stop-<filtered-file-system-path>",
+          "--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-start-16",
           "--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} />;
+    it('should mark cascading layout updates', () => {
+      function Example() {
+        const [didMount, setDidMount] = React.useState(false);
+        React.useLayoutEffect(() => {
+          setDidMount(true);
+        }, []);
+        return didMount;
       }
 
-      renderRootHelper(<App />);
-      expect(Scheduler).toFlushAndYield([]);
+      renderRootHelper(<Example />);
 
-      clearedMarks.splice(0);
+      expect(clearedMarks).toMatchInlineSnapshot(`
+                Array [
+                  "--schedule-render-16",
+                ]
+          `);
 
-      const event = document.createEvent('MouseEvents');
-      event.initEvent('mouseover', true, true);
-      dispatchAndSetCurrentEvent(targetRef.current, event);
+      clearPendingMarks();
 
-      expect(Scheduler).toFlushAndYield([]);
+      expect(Scheduler).toFlushUntilNextPaint([]);
 
       expect(clearedMarks).toMatchInlineSnapshot(`
         Array [
-          "--schedule-state-update-4-App",
-          "--render-start-4",
-          "--component-render-start-App",
+          "--render-start-16",
+          "--component-render-start-Example",
           "--component-render-stop",
           "--render-stop",
-          "--commit-start-4",
+          "--commit-start-16",
           "--react-version-<filtered-version>",
           "--profiler-version-1",
-          "--react-internal-module-start-<filtered-file-system-path>",
-          "--react-internal-module-stop-<filtered-file-system-path>",
+          "--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-4",
+          "--layout-effects-start-16",
+          "--component-layout-effect-mount-start-Example",
+          "--schedule-state-update-1-Example",
+          "--component-layout-effect-mount-stop",
           "--layout-effects-stop",
+          "--render-start-1",
+          "--component-render-start-Example",
+          "--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",
           "--commit-stop",
         ]
       `);
     });
+
+    it('should mark cascading passive updates', () => {
+      function Example() {
+        const [didMount, setDidMount] = React.useState(false);
+        React.useEffect(() => {
+          setDidMount(true);
+        }, []);
+        return didMount;
+      }
+
+      renderRootHelper(<Example />);
+
+      expect(Scheduler).toFlushAndYield([]);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+          "--passive-effects-start-16",
+          "--component-passive-effect-mount-start-Example",
+          "--schedule-state-update-16-Example",
+          "--component-passive-effect-mount-stop",
+          "--passive-effects-stop",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--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",
+        ]
+      `);
+    });
+
+    it('should mark render phase updates', () => {
+      function Example() {
+        const [didRender, setDidRender] = React.useState(false);
+        if (!didRender) {
+          setDidRender(true);
+        }
+        return didRender;
+      }
+
+      renderRootHelper(<Example />);
+
+      expect(Scheduler).toFlushAndYield([]);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-Example",
+          "--schedule-state-update-16-Example",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--layout-effects-stop",
+          "--commit-stop",
+        ]
+      `);
+    });
+
+    it('should mark sync render that throws', async () => {
+      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');
+      }
+
+      renderHelper(
+        <ErrorBoundary>
+          <ExampleThatThrows />
+        </ErrorBoundary>,
+      );
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--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",
+        ]
+      `);
+    });
+
+    it('should mark concurrent render that throws', async () => {
+      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() {
+        // eslint-disable-next-line no-throw-literal
+        throw 'Expected error';
+      }
+
+      renderRootHelper(
+        <ErrorBoundary>
+          <ExampleThatThrows />
+        </ErrorBoundary>,
+      );
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+                Array [
+                  "--schedule-render-16",
+                ]
+          `);
+
+      clearPendingMarks();
+
+      expect(Scheduler).toFlushUntilNextPaint([]);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--render-start-16",
+          "--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",
+          "--render-start-16",
+          "--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-16",
+          "--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-16",
+          "--schedule-state-update-1-ErrorBoundary",
+          "--layout-effects-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",
+          "--commit-stop",
+        ]
+      `);
+    });
+
+    it('should mark passive and layout effects', async () => {
+      function ComponentWithEffects() {
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('layout 1 mount');
+          return () => {
+            Scheduler.unstable_yieldValue('layout 1 unmount');
+          };
+        }, []);
+
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('passive 1 mount');
+          return () => {
+            Scheduler.unstable_yieldValue('passive 1 unmount');
+          };
+        }, []);
+
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('layout 2 mount');
+          return () => {
+            Scheduler.unstable_yieldValue('layout 2 unmount');
+          };
+        }, []);
+
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('passive 2 mount');
+          return () => {
+            Scheduler.unstable_yieldValue('passive 2 unmount');
+          };
+        }, []);
+
+        React.useEffect(() => {
+          Scheduler.unstable_yieldValue('passive 3 mount');
+          return () => {
+            Scheduler.unstable_yieldValue('passive 3 unmount');
+          };
+        }, []);
+
+        return null;
+      }
+
+      const unmount = renderRootHelper(<ComponentWithEffects />);
+
+      expect(Scheduler).toFlushUntilNextPaint([
+        'layout 1 mount',
+        'layout 2 mount',
+      ]);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--schedule-render-16",
+          "--render-start-16",
+          "--component-render-start-ComponentWithEffects",
+          "--component-render-stop",
+          "--render-stop",
+          "--commit-start-16",
+          "--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-16",
+          "--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",
+        ]
+      `);
+
+      clearPendingMarks();
+
+      expect(Scheduler).toFlushAndYield([
+        'passive 1 mount',
+        'passive 2 mount',
+        'passive 3 mount',
+      ]);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+            Array [
+              "--passive-effects-start-16",
+              "--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",
+            ]
+        `);
+
+      clearPendingMarks();
+
+      expect(Scheduler).toFlushAndYield([]);
+
+      unmount();
+
+      expect(Scheduler).toHaveYielded([
+        'layout 1 unmount',
+        'layout 2 unmount',
+        'passive 1 unmount',
+        'passive 2 unmount',
+        'passive 3 unmount',
+      ]);
+
+      expect(clearedMarks).toMatchInlineSnapshot(`
+        Array [
+          "--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",
+          "--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-1",
+          "--layout-effects-stop",
+          "--passive-effects-start-1",
+          "--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', () => {
+      it('regression test SyncLane', () => {
+        renderHelper(<div />);
+
+        expect(clearedMarks).toMatchInlineSnapshot(`
+          Array [
+            "--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",
+          ]
+        `);
+      });
+
+      it('regression test DefaultLane', () => {
+        renderRootHelper(<div />);
+        expect(clearedMarks).toMatchInlineSnapshot(`
+                    Array [
+                      "--schedule-render-16",
+                    ]
+              `);
+      });
+
+      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} />;
+        }
+
+        renderRootHelper(<App />);
+        expect(Scheduler).toFlushAndYield([]);
+
+        clearedMarks.splice(0);
+
+        targetRef.current.click();
+
+        // Wait a frame, for React to process the "click" update.
+        await Promise.resolve();
+
+        expect(clearedMarks).toMatchInlineSnapshot(`
+          Array [
+            "--schedule-state-update-1-App",
+            "--render-start-1",
+            "--component-render-start-App",
+            "--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",
+            "--layout-effects-start-1",
+            "--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} />;
+        }
+
+        renderRootHelper(<App />);
+        expect(Scheduler).toFlushAndYield([]);
+
+        clearedMarks.splice(0);
+
+        const event = document.createEvent('MouseEvents');
+        event.initEvent('mouseover', true, true);
+        dispatchAndSetCurrentEvent(targetRef.current, event);
+
+        expect(Scheduler).toFlushAndYield([]);
+
+        expect(clearedMarks).toMatchInlineSnapshot(`
+          Array [
+            "--schedule-state-update-4-App",
+            "--render-start-4",
+            "--component-render-start-App",
+            "--component-render-stop",
+            "--render-stop",
+            "--commit-start-4",
+            "--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-4",
+            "--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);
+
+          return timelineData[0];
+        } else {
+          return null;
+        }
+      };
+    });
+
+    afterEach(() => {
+      unmountFns.forEach(unmountFn => unmountFn());
+    });
+
+    describe('when profiling', () => {
+      beforeEach(() => {
+        utils.act(() => store.profilerStore.startProfiling());
+      });
+
+      it('should mark sync render without suspends or state updates', () => {
+        renderHelper(<div />);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark concurrent render without suspends or state updates', () => {
+        utils.act(() => renderRootHelper(<div />));
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark concurrent render without suspends or state updates', () => {
+        let updaterFn;
+
+        function Example() {
+          const setHigh = React.useState(0)[1];
+          const setLow = React.useState(0)[1];
+          const startTransition = React.useTransition()[1];
+
+          updaterFn = () => {
+            startTransition(() => {
+              setLow(prevLow => prevLow + 1);
+            });
+            setHigh(prevHigh => prevHigh + 1);
+          };
+
+          Scheduler.unstable_advanceTime(10);
+
+          return null;
+        }
+
+        utils.act(() => renderRootHelper(<Example />));
+        utils.act(() => store.profilerStore.stopProfiling());
+        utils.act(() => store.profilerStore.startProfiling());
+        utils.act(updaterFn);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000000100",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000001000000",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000001000000",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "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.unstable_yieldValue('Bar');
+          return null;
+        }
+
+        function Foo() {
+          Scheduler.unstable_yieldValue('Foo');
+          return <Bar />;
+        }
+
+        React.startTransition(() => {
+          renderRootHelper(<Foo />);
+        });
+
+        // Do one step of work.
+        expect(Scheduler).toFlushAndYieldThrough(['Foo']);
+
+        // Finish flushing so React commits;
+        // Unless we do this, the ProfilerStore won't collect Profiling data.
+        expect(Scheduler).toFlushAndYield(['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 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;
+        }
+
+        renderHelper(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(Scheduler).toHaveYielded(['suspended']);
+
+        Scheduler.unstable_advanceTime(10);
+        resolveFn();
+        await suspensePromise;
+
+        expect(Scheduler).toFlushAndYield(['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(`
+          Object {
+            "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);
+        expect(timelineData.componentMeasures).toHaveLength(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;
+        }
+
+        renderHelper(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(Scheduler).toHaveYielded(['suspended']);
+
+        Scheduler.unstable_advanceTime(10);
+        rejectFn();
+        await expect(suspensePromise).rejects.toThrow();
+
+        expect(Scheduler).toHaveYielded(['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(`
+          Object {
+            "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);
+        expect(timelineData.componentMeasures).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.unstable_yieldValue(resolved ? 'resolved' : 'suspended');
+          if (!resolved) {
+            throw suspensePromise;
+          }
+          return null;
+        }
+
+        renderRootHelper(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(Scheduler).toFlushAndYield(['suspended']);
+
+        Scheduler.unstable_advanceTime(10);
+        resolveFn();
+        await suspensePromise;
+
+        expect(Scheduler).toFlushAndYield(['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(`
+          Object {
+            "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);
+        expect(timelineData.componentMeasures).toHaveLength(2);
+      });
+
+      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.unstable_yieldValue(rejected ? 'rejected' : 'suspended');
+          if (!rejected) {
+            throw suspensePromise;
+          }
+          return null;
+        }
+
+        renderRootHelper(
+          <React.Suspense fallback={null}>
+            <Example />
+          </React.Suspense>,
+        );
+
+        expect(Scheduler).toFlushAndYield(['suspended']);
+
+        Scheduler.unstable_advanceTime(10);
+        rejectFn();
+        await expect(suspensePromise).rejects.toThrow();
+
+        expect(Scheduler).toFlushAndYield(['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(`
+          Object {
+            "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);
+        expect(timelineData.componentMeasures).toHaveLength(2);
+      });
+
+      it('should mark cascading class component state updates', () => {
+        class Example extends React.Component {
+          state = {didMount: false};
+          componentDidMount() {
+            this.setState({didMount: true});
+          }
+          render() {
+            Scheduler.unstable_advanceTime(10);
+            Scheduler.unstable_yieldValue(
+              this.state.didMount ? 'update' : 'mount',
+            );
+            return null;
+          }
+        }
+
+        renderRootHelper(<Example />);
+
+        expect(Scheduler).toFlushUntilNextPaint(['mount', 'update']);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 20,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark cascading class component force updates', () => {
+        let forced = false;
+        class Example extends React.Component {
+          componentDidMount() {
+            forced = true;
+            this.forceUpdate();
+          }
+          render() {
+            Scheduler.unstable_advanceTime(10);
+            Scheduler.unstable_yieldValue(forced ? 'force update' : 'mount');
+            return null;
+          }
+        }
+
+        renderRootHelper(<Example />);
+
+        expect(Scheduler).toFlushUntilNextPaint(['mount', 'force update']);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 20,
+              "type": "schedule-force-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark render phase state updates for class component', () => {
+        class Example extends React.Component {
+          state = {didRender: false};
+          render() {
+            if (this.state.didRender === false) {
+              this.setState({didRender: true});
+            }
+            Scheduler.unstable_advanceTime(10);
+            Scheduler.unstable_yieldValue(
+              this.state.didRender ? 'second render' : 'first render',
+            );
+            return null;
+          }
+        }
+
+        renderRootHelper(<Example />);
+
+        let errorMessage;
+        spyOn(console, 'error').and.callFake(message => {
+          errorMessage = message;
+        });
+
+        expect(Scheduler).toFlushAndYield(['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(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark render phase force updates for class component', () => {
+        let forced = false;
+        class Example extends React.Component {
+          render() {
+            Scheduler.unstable_advanceTime(10);
+            Scheduler.unstable_yieldValue(forced ? 'force update' : 'render');
+            if (!forced) {
+              forced = true;
+              this.forceUpdate();
+            }
+            return null;
+          }
+        }
+
+        renderRootHelper(<Example />);
+
+        let errorMessage;
+        spyOn(console, 'error').and.callFake(message => {
+          errorMessage = message;
+        });
+
+        expect(Scheduler).toFlushAndYield(['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(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 20,
+              "type": "schedule-force-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark cascading layout updates', () => {
+        function Example() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_advanceTime(1);
+            setDidMount(true);
+          }, []);
+          Scheduler.unstable_advanceTime(10);
+          Scheduler.unstable_yieldValue(didMount ? 'update' : 'mount');
+          return didMount;
+        }
+
+        renderRootHelper(<Example />);
+
+        expect(Scheduler).toFlushAndYield(['mount', 'update']);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 1,
+              "timestamp": 20,
+              "type": "layout-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 21,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark cascading passive updates', () => {
+        function Example() {
+          const [didMount, setDidMount] = React.useState(false);
+          React.useEffect(() => {
+            Scheduler.unstable_advanceTime(1);
+            setDidMount(true);
+          }, []);
+          Scheduler.unstable_advanceTime(10);
+          Scheduler.unstable_yieldValue(didMount ? 'update' : 'mount');
+          return didMount;
+        }
+
+        renderRootHelper(<Example />);
+        expect(Scheduler).toFlushAndYield(['mount', 'update']);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 1,
+              "timestamp": 20,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "duration": 10,
+              "timestamp": 21,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 21,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark render phase updates', () => {
+        function Example() {
+          const [didRender, setDidRender] = React.useState(false);
+          Scheduler.unstable_advanceTime(10);
+          if (!didRender) {
+            setDidRender(true);
+          }
+          Scheduler.unstable_yieldValue(didRender ? 'update' : 'mount');
+          return didRender;
+        }
+
+        renderRootHelper(<Example />);
+        expect(Scheduler).toFlushAndYield(['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(`
+          Array [
+            Object {
+              "componentName": "Example",
+              "duration": 20,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Example",
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 20,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
+
+      it('should mark sync render that throws', async () => {
+        spyOn(console, 'error');
+
+        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');
+        }
+
+        renderHelper(
+          <ErrorBoundary>
+            <ExampleThatThrows />
+          </ErrorBoundary>,
+        );
+
+        expect(Scheduler).toHaveYielded([
+          'ErrorBoundary render',
+          'ExampleThatThrows',
+          'ExampleThatThrows',
+          'ErrorBoundary fallback',
+        ]);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "ErrorBoundary",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ExampleThatThrows",
+              "duration": 0,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ErrorBoundary",
+              "duration": 10,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ErrorBoundary",
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 20,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.thrownErrors).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "ExampleThatThrows",
+              "message": "Expected error",
+              "phase": "mount",
+              "timestamp": 20,
+              "type": "thrown-error",
+            },
+          ]
+        `);
+      });
+
+      it('should mark concurrent render that throws', async () => {
+        spyOn(console, 'error');
+
+        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');
+          // eslint-disable-next-line no-throw-literal
+          throw 'Expected error';
+        }
+
+        renderRootHelper(
+          <ErrorBoundary>
+            <ExampleThatThrows />
+          </ErrorBoundary>,
+        );
+
+        expect(Scheduler).toFlushAndYield([
+          'ErrorBoundary render',
+          'ExampleThatThrows',
+          'ExampleThatThrows',
+          'ErrorBoundary render',
+          'ExampleThatThrows',
+          'ExampleThatThrows',
+          'ErrorBoundary fallback',
+        ]);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "ErrorBoundary",
+              "duration": 10,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ExampleThatThrows",
+              "duration": 0,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ErrorBoundary",
+              "duration": 10,
+              "timestamp": 20,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ExampleThatThrows",
+              "duration": 0,
+              "timestamp": 30,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ErrorBoundary",
+              "duration": 10,
+              "timestamp": 30,
+              "type": "render",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ErrorBoundary",
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 30,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.thrownErrors).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "ExampleThatThrows",
+              "message": "Expected error",
+              "phase": "mount",
+              "timestamp": 20,
+              "type": "thrown-error",
+            },
+            Object {
+              "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.unstable_yieldValue('layout 1 mount');
+            return () => {
+              Scheduler.unstable_yieldValue('layout 1 unmount');
+            };
+          }, []);
+
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('passive 1 mount');
+            return () => {
+              Scheduler.unstable_yieldValue('passive 1 unmount');
+            };
+          }, []);
+
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('layout 2 mount');
+            return () => {
+              Scheduler.unstable_yieldValue('layout 2 unmount');
+            };
+          }, []);
+
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('passive 2 mount');
+            return () => {
+              Scheduler.unstable_yieldValue('passive 2 unmount');
+            };
+          }, []);
+
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue('passive 3 mount');
+            return () => {
+              Scheduler.unstable_yieldValue('passive 3 unmount');
+            };
+          }, []);
+
+          return null;
+        }
+
+        const unmount = renderRootHelper(<ComponentWithEffects />);
+
+        expect(Scheduler).toFlushUntilNextPaint([
+          'layout 1 mount',
+          'layout 2 mount',
+        ]);
+
+        expect(Scheduler).toFlushAndYield([
+          'passive 1 mount',
+          'passive 2 mount',
+          'passive 3 mount',
+        ]);
+
+        expect(Scheduler).toFlushAndYield([]);
+
+        unmount();
+
+        expect(Scheduler).toHaveYielded([
+          'layout 1 unmount',
+          'layout 2 unmount',
+          'passive 1 unmount',
+          'passive 2 unmount',
+          'passive 3 unmount',
+        ]);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.componentMeasures).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "layout-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "layout-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "layout-effect-unmount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "layout-effect-unmount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-unmount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-unmount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "ComponentWithEffects",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-unmount",
+              "warning": null,
+            },
+          ]
+        `);
+        expect(timelineData.batchUIDToMeasuresMap).toMatchInlineSnapshot(`
+          Map {
+            1 => Array [
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+            2 => Array [
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+          }
+        `);
+      });
+    });
+
+    describe('when not profiling', () => {
+      it('should not log any marks', () => {
+        renderHelper(<div />);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData).toBeNull();
+      });
+    });
   });
 });
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 000000000000..be988e22b226
--- /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__/timelineDataSerializer.js b/packages/react-devtools-shared/src/__tests__/__serializers__/timelineDataSerializer.js
new file mode 100644
index 000000000000..1ece2010eec0
--- /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__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index dd4717bb5cb6..258560929435 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -720,7 +720,7 @@ Object {
           1,
           11,
           0,
-          1,
+          3,
           1,
           1,
           4,
@@ -836,907 +836,2536 @@ Object {
       "snapshots": Array [],
     },
   ],
-  "version": 5,
-}
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `
-Array [
-  0,
-  1,
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
-Array [
-  0,
-  1,
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
-Array [
-  0,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
-Array [
-  1,
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 7 1`] = `
-Array [
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `
-Object {
-  "dataForRoots": Array [
+  "timelineData": Array [
     Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              11,
-            ],
-            Array [
-              2,
-              11,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 11,
-          "updaters": Array [
+      "batchUIDToMeasuresKeyValueArray": Array [
+        Array [
+          1,
+          Array [
             Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 12,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 12,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "layout-effects",
             },
           ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              2,
-              11,
-            ],
-            Array [
-              1,
-              11,
-            ],
+        ],
+        Array [
+          2,
+          Array [
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "layout-effects",
+            },
           ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
+        ],
+        Array [
+          3,
+          Array [
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "passive-effects",
+            },
           ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 22,
-          "updaters": Array [
+        ],
+        Array [
+          4,
+          Array [
             Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 55,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 55,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 55,
+              "type": "passive-effects",
             },
           ],
+        ],
+      ],
+      "componentMeasures": Array [
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
         },
         Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 13,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              7,
-              2,
-            ],
-            Array [
-              2,
-              13,
-            ],
-            Array [
-              1,
-              13,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              7,
-              2,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 20,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 20,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 21,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 22,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 32,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 32,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 2,
+          "timestamp": 33,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
           "timestamp": 35,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 45,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 45,
+          "type": "render",
+          "warning": null,
         },
       ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [],
-      "operations": Array [
+      "duration": 65,
+      "flamechart": Array [],
+      "internalModuleSourceToRanges": Array [],
+      "laneToLabelKeyValueArray": Array [
         Array [
           1,
-          1,
-          15,
-          6,
-          80,
-          97,
-          114,
-          101,
-          110,
-          116,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          48,
-          1,
-          1,
-          11,
-          0,
-          1,
-          1,
-          1,
-          4,
-          1,
-          11000,
-          1,
-          2,
-          5,
-          1,
-          0,
-          1,
-          0,
-          4,
-          2,
-          11000,
-          1,
-          4,
-          5,
-          2,
-          2,
-          2,
-          3,
-          4,
-          4,
-          0,
-          1,
-          5,
-          8,
-          2,
-          2,
-          2,
-          0,
-          4,
-          5,
-          1000,
+          "Sync",
         ],
         Array [
-          1,
-          1,
-          8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          49,
-          1,
-          6,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          6,
-          1000,
-          4,
           2,
-          12000,
-          3,
-          2,
-          3,
-          4,
-          6,
-          5,
+          "InputContinuousHydration",
+        ],
+        Array [
           4,
-          1,
-          12000,
+          "InputContinuous",
         ],
         Array [
-          1,
-          1,
           8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          50,
-          1,
-          7,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          7,
-          2000,
-          4,
-          2,
-          14000,
-          3,
-          2,
-          4,
-          4,
-          6,
-          7,
-          5,
-          4,
-          1,
-          14000,
+          "DefaultHydration",
+        ],
+        Array [
+          16,
+          "Default",
+        ],
+        Array [
+          32,
+          "TransitionHydration",
+        ],
+        Array [
+          64,
+          "Transition",
+        ],
+        Array [
+          128,
+          "Transition",
+        ],
+        Array [
+          256,
+          "Transition",
+        ],
+        Array [
+          512,
+          "Transition",
+        ],
+        Array [
+          1024,
+          "Transition",
+        ],
+        Array [
+          2048,
+          "Transition",
+        ],
+        Array [
+          4096,
+          "Transition",
+        ],
+        Array [
+          8192,
+          "Transition",
+        ],
+        Array [
+          16384,
+          "Transition",
+        ],
+        Array [
+          32768,
+          "Transition",
+        ],
+        Array [
+          65536,
+          "Transition",
+        ],
+        Array [
+          131072,
+          "Transition",
+        ],
+        Array [
+          262144,
+          "Transition",
+        ],
+        Array [
+          524288,
+          "Transition",
+        ],
+        Array [
+          1048576,
+          "Transition",
+        ],
+        Array [
+          2097152,
+          "Transition",
+        ],
+        Array [
+          4194304,
+          "Retry",
+        ],
+        Array [
+          8388608,
+          "Retry",
+        ],
+        Array [
+          16777216,
+          "Retry",
+        ],
+        Array [
+          33554432,
+          "Retry",
+        ],
+        Array [
+          67108864,
+          "Retry",
+        ],
+        Array [
+          134217728,
+          "SelectiveHydration",
+        ],
+        Array [
+          268435456,
+          "IdleHydration",
+        ],
+        Array [
+          536870912,
+          "Idle",
+        ],
+        Array [
+          1073741824,
+          "Offscreen",
         ],
       ],
-      "rootID": 1,
+      "laneToReactMeasureKeyValueArray": Array [
+        Array [
+          1,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 12,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 12,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 22,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 35,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "passive-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 55,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 55,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 55,
+              "type": "passive-effects",
+            },
+          ],
+        ],
+        Array [
+          2,
+          Array [],
+        ],
+        Array [
+          4,
+          Array [],
+        ],
+        Array [
+          8,
+          Array [],
+        ],
+        Array [
+          16,
+          Array [],
+        ],
+        Array [
+          32,
+          Array [],
+        ],
+        Array [
+          64,
+          Array [],
+        ],
+        Array [
+          128,
+          Array [],
+        ],
+        Array [
+          256,
+          Array [],
+        ],
+        Array [
+          512,
+          Array [],
+        ],
+        Array [
+          1024,
+          Array [],
+        ],
+        Array [
+          2048,
+          Array [],
+        ],
+        Array [
+          4096,
+          Array [],
+        ],
+        Array [
+          8192,
+          Array [],
+        ],
+        Array [
+          16384,
+          Array [],
+        ],
+        Array [
+          32768,
+          Array [],
+        ],
+        Array [
+          65536,
+          Array [],
+        ],
+        Array [
+          131072,
+          Array [],
+        ],
+        Array [
+          262144,
+          Array [],
+        ],
+        Array [
+          524288,
+          Array [],
+        ],
+        Array [
+          1048576,
+          Array [],
+        ],
+        Array [
+          2097152,
+          Array [],
+        ],
+        Array [
+          4194304,
+          Array [],
+        ],
+        Array [
+          8388608,
+          Array [],
+        ],
+        Array [
+          16777216,
+          Array [],
+        ],
+        Array [
+          33554432,
+          Array [],
+        ],
+        Array [
+          67108864,
+          Array [],
+        ],
+        Array [
+          134217728,
+          Array [],
+        ],
+        Array [
+          268435456,
+          Array [],
+        ],
+        Array [
+          536870912,
+          Array [],
+        ],
+        Array [
+          1073741824,
+          Array [],
+        ],
+      ],
+      "nativeEvents": Array [],
+      "networkMeasures": Array [],
+      "otherUserTimingMarks": Array [],
+      "reactVersion": "<filtered-version>",
+      "schedulingEvents": Array [
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 22,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 35,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 45,
+          "type": "schedule-render",
+          "warning": null,
+        },
+      ],
+      "snapshotHeight": 0,
       "snapshots": Array [],
+      "startTime": -10,
+      "suspenseEvents": Array [],
+      "thrownErrors": Array [],
     },
   ],
   "version": 5,
 }
 `;
 
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `
+Array [
+  0,
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
+Array [
+  0,
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
+Array [
+  0,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
+Array [
+  1,
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 7 1`] = `
+Array [
+  2,
+]
+`;
+
+exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `
 Object {
-  "commitData": Array [
+  "dataForRoots": Array [
     Object {
-      "changeDescriptions": Map {
-        4 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [],
-          "state": null,
-        },
-        5 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [],
-          "state": null,
-        },
-        12 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
-        },
-        2 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [
-            "count",
-          ],
-          "state": null,
-        },
-      },
-      "duration": 13,
-      "effectDuration": null,
-      "fiberActualDurations": Map {
-        4 => 0,
-        5 => 1,
-        12 => 2,
-        2 => 13,
-        1 => 13,
-      },
-      "fiberSelfDurations": Map {
-        4 => 0,
-        5 => 1,
-        12 => 2,
-        2 => 10,
-        1 => 0,
-      },
-      "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
-      "timestamp": 13,
-      "updaters": Array [
+      "commitData": Array [
         Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 1,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-    Object {
-      "changeDescriptions": Map {
-        4 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [],
-          "state": null,
-        },
-        2 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [
-            "count",
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "effectDuration": null,
+          "fiberActualDurations": Array [
+            Array [
+              1,
+              11,
+            ],
+            Array [
+              2,
+              11,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              1,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+          ],
+          "passiveEffectDuration": null,
+          "priorityLevel": "Immediate",
+          "timestamp": 11,
+          "updaters": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
           ],
-          "state": null,
         },
-      },
-      "duration": 10,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {
-        4 => 0,
-        2 => 10,
-        1 => 10,
-      },
-      "fiberSelfDurations": Map {
-        4 => 0,
-        2 => 10,
-        1 => 0,
-      },
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 34,
-      "updaters": Array [
         Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 1,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-    Object {
-      "changeDescriptions": Map {
-        2 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [
-            "count",
+          "changeDescriptions": Array [
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 11,
+          "effectDuration": null,
+          "fiberActualDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              6,
+              1,
+            ],
+            Array [
+              2,
+              11,
+            ],
+            Array [
+              1,
+              11,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              6,
+              1,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "passiveEffectDuration": null,
+          "priorityLevel": "Immediate",
+          "timestamp": 22,
+          "updaters": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
           ],
-          "state": null,
         },
-      },
-      "duration": 10,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {
-        2 => 10,
-        1 => 10,
-      },
-      "fiberSelfDurations": Map {
-        2 => 10,
-        1 => 0,
-      },
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 44,
-      "updaters": Array [
         Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 1,
-          "key": null,
-          "type": 11,
+          "changeDescriptions": Array [
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              6,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              7,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 13,
+          "effectDuration": null,
+          "fiberActualDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              6,
+              1,
+            ],
+            Array [
+              7,
+              2,
+            ],
+            Array [
+              2,
+              13,
+            ],
+            Array [
+              1,
+              13,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              6,
+              1,
+            ],
+            Array [
+              7,
+              2,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "passiveEffectDuration": null,
+          "priorityLevel": "Immediate",
+          "timestamp": 35,
+          "updaters": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
         },
       ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          1,
+          11,
+          0,
+          3,
+          1,
+          1,
+          4,
+          1,
+          11000,
+          1,
+          2,
+          5,
+          1,
+          0,
+          1,
+          0,
+          4,
+          2,
+          11000,
+          1,
+          4,
+          5,
+          2,
+          2,
+          2,
+          3,
+          4,
+          4,
+          0,
+          1,
+          5,
+          8,
+          2,
+          2,
+          2,
+          0,
+          4,
+          5,
+          1000,
+        ],
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          49,
+          1,
+          6,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          6,
+          1000,
+          4,
+          2,
+          12000,
+          3,
+          2,
+          3,
+          4,
+          6,
+          5,
+          4,
+          1,
+          12000,
+        ],
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          7,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          7,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          4,
+          6,
+          7,
+          5,
+          4,
+          1,
+          14000,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
     },
   ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {
-    1 => 12,
-    2 => 12,
-    4 => 0,
-    5 => 1,
-    6 => 1,
-  },
-  "operations": Array [
-    Array [
-      1,
-      1,
-      8,
-      5,
-      67,
-      104,
-      105,
-      108,
-      100,
-      1,
-      50,
-      1,
-      12,
-      5,
-      2,
-      2,
-      1,
-      2,
-      4,
-      12,
-      2000,
-      4,
-      2,
-      14000,
-      3,
-      2,
-      4,
-      4,
-      5,
-      12,
-      6,
-      4,
-      1,
-      14000,
-    ],
-    Array [
-      1,
-      1,
-      0,
-      2,
-      2,
-      12,
-      5,
-      4,
-      2,
-      11000,
-      3,
-      2,
-      2,
-      4,
-      6,
-      4,
-      1,
-      11000,
-    ],
-    Array [
-      1,
-      1,
-      0,
-      2,
-      1,
-      4,
-    ],
-  ],
-  "rootID": 1,
-  "snapshots": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        4,
-        5,
-        6,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "type": 5,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "0",
-      "type": 5,
-    },
-    5 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "key": "1",
-      "type": 5,
-    },
-    6 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": Array [
-        "Memo",
-      ],
-      "id": 6,
-      "key": null,
-      "type": 8,
-    },
-  },
-}
-`;
-
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `
-Object {
-  "commitData": Array [
+  "timelineData": Array [
     Object {
-      "changeDescriptions": Map {
-        14 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
+      "batchUIDToMeasuresKeyValueArray": Array [
+        Array [
+          1,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "layout-effects",
+            },
+          ],
+        ],
+        Array [
+          2,
+          Array [
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "layout-effects",
+            },
+          ],
+        ],
+        Array [
+          3,
+          Array [
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "layout-effects",
+            },
+          ],
+        ],
+      ],
+      "componentMeasures": Array [
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
         },
-        16 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
+        Object {
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 20,
+          "type": "render",
+          "warning": null,
         },
-        17 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 20,
+          "type": "render",
+          "warning": null,
         },
-      },
-      "duration": 11,
-      "effectDuration": null,
-      "fiberActualDurations": Map {
-        13 => 11,
-        14 => 11,
-        16 => 0,
-        17 => 1,
-      },
-      "fiberSelfDurations": Map {
-        13 => 0,
-        14 => 10,
-        16 => 0,
-        17 => 1,
-      },
-      "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
-      "timestamp": 24,
-      "updaters": Array [
         Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 13,
-          "key": null,
-          "type": 11,
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 21,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 31,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 31,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 32,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 42,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 42,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 2,
+          "timestamp": 43,
+          "type": "render",
+          "warning": null,
         },
       ],
-    },
-  ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {},
-  "operations": Array [
-    Array [
-      1,
-      13,
-      15,
-      6,
-      80,
-      97,
-      114,
-      101,
-      110,
-      116,
-      5,
-      67,
-      104,
-      105,
-      108,
-      100,
-      1,
-      48,
-      1,
-      13,
-      11,
-      0,
-      1,
-      1,
-      1,
-      4,
-      13,
-      11000,
-      1,
-      14,
-      5,
-      13,
-      0,
-      1,
-      0,
-      4,
-      14,
-      11000,
-      1,
-      16,
-      5,
-      14,
-      14,
-      2,
-      3,
-      4,
-      16,
-      0,
-      1,
-      17,
-      8,
-      14,
-      14,
-      2,
-      0,
-      4,
-      17,
-      1000,
-    ],
+      "duration": 55,
+      "flamechart": Array [],
+      "internalModuleSourceToRanges": Array [],
+      "laneToLabelKeyValueArray": Array [
+        Array [
+          1,
+          "Sync",
+        ],
+        Array [
+          2,
+          "InputContinuousHydration",
+        ],
+        Array [
+          4,
+          "InputContinuous",
+        ],
+        Array [
+          8,
+          "DefaultHydration",
+        ],
+        Array [
+          16,
+          "Default",
+        ],
+        Array [
+          32,
+          "TransitionHydration",
+        ],
+        Array [
+          64,
+          "Transition",
+        ],
+        Array [
+          128,
+          "Transition",
+        ],
+        Array [
+          256,
+          "Transition",
+        ],
+        Array [
+          512,
+          "Transition",
+        ],
+        Array [
+          1024,
+          "Transition",
+        ],
+        Array [
+          2048,
+          "Transition",
+        ],
+        Array [
+          4096,
+          "Transition",
+        ],
+        Array [
+          8192,
+          "Transition",
+        ],
+        Array [
+          16384,
+          "Transition",
+        ],
+        Array [
+          32768,
+          "Transition",
+        ],
+        Array [
+          65536,
+          "Transition",
+        ],
+        Array [
+          131072,
+          "Transition",
+        ],
+        Array [
+          262144,
+          "Transition",
+        ],
+        Array [
+          524288,
+          "Transition",
+        ],
+        Array [
+          1048576,
+          "Transition",
+        ],
+        Array [
+          2097152,
+          "Transition",
+        ],
+        Array [
+          4194304,
+          "Retry",
+        ],
+        Array [
+          8388608,
+          "Retry",
+        ],
+        Array [
+          16777216,
+          "Retry",
+        ],
+        Array [
+          33554432,
+          "Retry",
+        ],
+        Array [
+          67108864,
+          "Retry",
+        ],
+        Array [
+          134217728,
+          "SelectiveHydration",
+        ],
+        Array [
+          268435456,
+          "IdleHydration",
+        ],
+        Array [
+          536870912,
+          "Idle",
+        ],
+        Array [
+          1073741824,
+          "Offscreen",
+        ],
+      ],
+      "laneToReactMeasureKeyValueArray": Array [
+        Array [
+          1,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 21,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 32,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 45,
+              "type": "layout-effects",
+            },
+          ],
+        ],
+        Array [
+          2,
+          Array [],
+        ],
+        Array [
+          4,
+          Array [],
+        ],
+        Array [
+          8,
+          Array [],
+        ],
+        Array [
+          16,
+          Array [],
+        ],
+        Array [
+          32,
+          Array [],
+        ],
+        Array [
+          64,
+          Array [],
+        ],
+        Array [
+          128,
+          Array [],
+        ],
+        Array [
+          256,
+          Array [],
+        ],
+        Array [
+          512,
+          Array [],
+        ],
+        Array [
+          1024,
+          Array [],
+        ],
+        Array [
+          2048,
+          Array [],
+        ],
+        Array [
+          4096,
+          Array [],
+        ],
+        Array [
+          8192,
+          Array [],
+        ],
+        Array [
+          16384,
+          Array [],
+        ],
+        Array [
+          32768,
+          Array [],
+        ],
+        Array [
+          65536,
+          Array [],
+        ],
+        Array [
+          131072,
+          Array [],
+        ],
+        Array [
+          262144,
+          Array [],
+        ],
+        Array [
+          524288,
+          Array [],
+        ],
+        Array [
+          1048576,
+          Array [],
+        ],
+        Array [
+          2097152,
+          Array [],
+        ],
+        Array [
+          4194304,
+          Array [],
+        ],
+        Array [
+          8388608,
+          Array [],
+        ],
+        Array [
+          16777216,
+          Array [],
+        ],
+        Array [
+          33554432,
+          Array [],
+        ],
+        Array [
+          67108864,
+          Array [],
+        ],
+        Array [
+          134217728,
+          Array [],
+        ],
+        Array [
+          268435456,
+          Array [],
+        ],
+        Array [
+          536870912,
+          Array [],
+        ],
+        Array [
+          1073741824,
+          Array [],
+        ],
+      ],
+      "nativeEvents": Array [],
+      "networkMeasures": Array [],
+      "otherUserTimingMarks": Array [],
+      "reactVersion": "<filtered-version>",
+      "schedulingEvents": Array [
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 21,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 32,
+          "type": "schedule-render",
+          "warning": null,
+        },
+      ],
+      "snapshotHeight": 0,
+      "snapshots": Array [],
+      "startTime": -10,
+      "suspenseEvents": Array [],
+      "thrownErrors": Array [],
+    },
   ],
-  "rootID": 13,
-  "snapshots": Map {},
+  "version": 5,
 }
 `;
 
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `
 Object {
-  "dataForRoots": Array [
+  "commitData": Array [
+    Object {
+      "changeDescriptions": Map {
+        4 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        5 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        12 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+      },
+      "duration": 13,
+      "effectDuration": null,
+      "fiberActualDurations": Map {
+        4 => 0,
+        5 => 1,
+        12 => 2,
+        2 => 13,
+        1 => 13,
+      },
+      "fiberSelfDurations": Map {
+        4 => 0,
+        5 => 1,
+        12 => 2,
+        2 => 10,
+        1 => 0,
+      },
+      "passiveEffectDuration": null,
+      "priorityLevel": "Immediate",
+      "timestamp": 13,
+      "updaters": Array [
+        Object {
+          "displayName": "render()",
+          "hocDisplayNames": null,
+          "id": 1,
+          "key": null,
+          "type": 11,
+        },
+      ],
+    },
+    Object {
+      "changeDescriptions": Map {
+        4 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+      },
+      "duration": 10,
+      "effectDuration": 0,
+      "fiberActualDurations": Map {
+        4 => 0,
+        2 => 10,
+        1 => 10,
+      },
+      "fiberSelfDurations": Map {
+        4 => 0,
+        2 => 10,
+        1 => 0,
+      },
+      "passiveEffectDuration": 0,
+      "priorityLevel": "Immediate",
+      "timestamp": 34,
+      "updaters": Array [
+        Object {
+          "displayName": "render()",
+          "hocDisplayNames": null,
+          "id": 1,
+          "key": null,
+          "type": 11,
+        },
+      ],
+    },
+    Object {
+      "changeDescriptions": Map {
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+      },
+      "duration": 10,
+      "effectDuration": 0,
+      "fiberActualDurations": Map {
+        2 => 10,
+        1 => 10,
+      },
+      "fiberSelfDurations": Map {
+        2 => 10,
+        1 => 0,
+      },
+      "passiveEffectDuration": 0,
+      "priorityLevel": "Immediate",
+      "timestamp": 44,
+      "updaters": Array [
+        Object {
+          "displayName": "render()",
+          "hocDisplayNames": null,
+          "id": 1,
+          "key": null,
+          "type": 11,
+        },
+      ],
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {
+    1 => 12,
+    2 => 12,
+    4 => 0,
+    5 => 1,
+    6 => 1,
+  },
+  "operations": Array [
+    Array [
+      1,
+      1,
+      8,
+      5,
+      67,
+      104,
+      105,
+      108,
+      100,
+      1,
+      50,
+      1,
+      12,
+      5,
+      2,
+      2,
+      1,
+      2,
+      4,
+      12,
+      2000,
+      4,
+      2,
+      14000,
+      3,
+      2,
+      4,
+      4,
+      5,
+      12,
+      6,
+      4,
+      1,
+      14000,
+    ],
+    Array [
+      1,
+      1,
+      0,
+      2,
+      2,
+      12,
+      5,
+      4,
+      2,
+      11000,
+      3,
+      2,
+      2,
+      4,
+      6,
+      4,
+      1,
+      11000,
+    ],
+    Array [
+      1,
+      1,
+      0,
+      2,
+      1,
+      4,
+    ],
+  ],
+  "rootID": 1,
+  "snapshots": Map {
+    1 => Object {
+      "children": Array [
+        2,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 1,
+      "key": null,
+      "type": 11,
+    },
+    2 => Object {
+      "children": Array [
+        4,
+        5,
+        6,
+      ],
+      "displayName": "Parent",
+      "hocDisplayNames": null,
+      "id": 2,
+      "key": null,
+      "type": 5,
+    },
+    4 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 4,
+      "key": "0",
+      "type": 5,
+    },
+    5 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 5,
+      "key": "1",
+      "type": 5,
+    },
+    6 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "hocDisplayNames": Array [
+        "Memo",
+      ],
+      "id": 6,
+      "key": null,
+      "type": 8,
+    },
+  },
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `
+Object {
+  "commitData": Array [
+    Object {
+      "changeDescriptions": Map {
+        14 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        16 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        17 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+      },
+      "duration": 11,
+      "effectDuration": null,
+      "fiberActualDurations": Map {
+        13 => 11,
+        14 => 11,
+        16 => 0,
+        17 => 1,
+      },
+      "fiberSelfDurations": Map {
+        13 => 0,
+        14 => 10,
+        16 => 0,
+        17 => 1,
+      },
+      "passiveEffectDuration": null,
+      "priorityLevel": "Immediate",
+      "timestamp": 24,
+      "updaters": Array [
+        Object {
+          "displayName": "render()",
+          "hocDisplayNames": null,
+          "id": 13,
+          "key": null,
+          "type": 11,
+        },
+      ],
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {},
+  "operations": Array [
+    Array [
+      1,
+      13,
+      15,
+      6,
+      80,
+      97,
+      114,
+      101,
+      110,
+      116,
+      5,
+      67,
+      104,
+      105,
+      108,
+      100,
+      1,
+      48,
+      1,
+      13,
+      11,
+      0,
+      3,
+      1,
+      1,
+      4,
+      13,
+      11000,
+      1,
+      14,
+      5,
+      13,
+      0,
+      1,
+      0,
+      4,
+      14,
+      11000,
+      1,
+      16,
+      5,
+      14,
+      14,
+      2,
+      3,
+      4,
+      16,
+      0,
+      1,
+      17,
+      8,
+      14,
+      14,
+      2,
+      0,
+      4,
+      17,
+      1000,
+    ],
+  ],
+  "rootID": 13,
+  "snapshots": Map {},
+}
+`;
+
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
+Object {
+  "dataForRoots": Array [
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              5,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              12,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "isFirstMount": true,
+                "props": null,
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 13,
+          "effectDuration": null,
+          "fiberActualDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              12,
+              2,
+            ],
+            Array [
+              2,
+              13,
+            ],
+            Array [
+              1,
+              13,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              5,
+              1,
+            ],
+            Array [
+              12,
+              2,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "passiveEffectDuration": null,
+          "priorityLevel": "Immediate",
+          "timestamp": 13,
+          "updaters": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              4,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [],
+                "state": null,
+              },
+            ],
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 10,
+          "effectDuration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              10,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              4,
+              0,
+            ],
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "passiveEffectDuration": 0,
+          "priorityLevel": "Immediate",
+          "timestamp": 34,
+          "updaters": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
+        },
+        Object {
+          "changeDescriptions": Array [
+            Array [
+              2,
+              Object {
+                "context": null,
+                "didHooksChange": false,
+                "hooks": null,
+                "isFirstMount": false,
+                "props": Array [
+                  "count",
+                ],
+                "state": null,
+              },
+            ],
+          ],
+          "duration": 10,
+          "effectDuration": 0,
+          "fiberActualDurations": Array [
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              10,
+            ],
+          ],
+          "fiberSelfDurations": Array [
+            Array [
+              2,
+              10,
+            ],
+            Array [
+              1,
+              0,
+            ],
+          ],
+          "passiveEffectDuration": 0,
+          "priorityLevel": "Immediate",
+          "timestamp": 44,
+          "updaters": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [
+        Array [
+          1,
+          12,
+        ],
+        Array [
+          2,
+          12,
+        ],
+        Array [
+          4,
+          0,
+        ],
+        Array [
+          5,
+          1,
+        ],
+        Array [
+          6,
+          1,
+        ],
+      ],
+      "operations": Array [
+        Array [
+          1,
+          1,
+          8,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          50,
+          1,
+          12,
+          5,
+          2,
+          2,
+          1,
+          2,
+          4,
+          12,
+          2000,
+          4,
+          2,
+          14000,
+          3,
+          2,
+          4,
+          4,
+          5,
+          12,
+          6,
+          4,
+          1,
+          14000,
+        ],
+        Array [
+          1,
+          1,
+          0,
+          2,
+          2,
+          12,
+          5,
+          4,
+          2,
+          11000,
+          3,
+          2,
+          2,
+          4,
+          6,
+          4,
+          1,
+          11000,
+        ],
+        Array [
+          1,
+          1,
+          0,
+          2,
+          1,
+          4,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [
+        Array [
+          1,
+          Object {
+            "children": Array [
+              2,
+            ],
+            "displayName": null,
+            "hocDisplayNames": null,
+            "id": 1,
+            "key": null,
+            "type": 11,
+          },
+        ],
+        Array [
+          2,
+          Object {
+            "children": Array [
+              4,
+              5,
+              6,
+            ],
+            "displayName": "Parent",
+            "hocDisplayNames": null,
+            "id": 2,
+            "key": null,
+            "type": 5,
+          },
+        ],
+        Array [
+          4,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "hocDisplayNames": null,
+            "id": 4,
+            "key": "0",
+            "type": 5,
+          },
+        ],
+        Array [
+          5,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "hocDisplayNames": null,
+            "id": 5,
+            "key": "1",
+            "type": 5,
+          },
+        ],
+        Array [
+          6,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "hocDisplayNames": Array [
+              "Memo",
+            ],
+            "id": 6,
+            "key": null,
+            "type": 8,
+          },
+        ],
+      ],
+    },
     Object {
       "commitData": Array [
         Object {
           "changeDescriptions": Array [
             Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              5,
+              14,
               Object {
                 "context": null,
                 "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
+                "isFirstMount": true,
+                "props": null,
                 "state": null,
               },
             ],
             Array [
-              12,
+              16,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -1746,509 +3375,902 @@ Object {
               },
             ],
             Array [
-              2,
+              17,
               Object {
                 "context": null,
                 "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
+                "isFirstMount": true,
+                "props": null,
                 "state": null,
               },
             ],
           ],
-          "duration": 13,
+          "duration": 11,
           "effectDuration": null,
           "fiberActualDurations": Array [
             Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
+              13,
+              11,
             ],
             Array [
-              12,
-              2,
+              14,
+              11,
             ],
             Array [
-              2,
-              13,
+              16,
+              0,
             ],
             Array [
+              17,
               1,
-              13,
             ],
           ],
           "fiberSelfDurations": Array [
             Array [
-              4,
+              13,
               0,
             ],
             Array [
-              5,
-              1,
-            ],
-            Array [
-              12,
-              2,
+              14,
+              10,
             ],
             Array [
-              2,
-              10,
+              16,
+              0,
             ],
             Array [
+              17,
               1,
-              0,
             ],
           ],
           "passiveEffectDuration": null,
           "priorityLevel": "Immediate",
-          "timestamp": 13,
+          "timestamp": 24,
           "updaters": Array [
             Object {
               "displayName": "render()",
               "hocDisplayNames": null,
-              "id": 1,
+              "id": 13,
               "key": null,
               "type": 11,
             },
           ],
         },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [],
+      "operations": Array [
+        Array [
+          1,
+          13,
+          15,
+          6,
+          80,
+          97,
+          114,
+          101,
+          110,
+          116,
+          5,
+          67,
+          104,
+          105,
+          108,
+          100,
+          1,
+          48,
+          1,
+          13,
+          11,
+          0,
+          3,
+          1,
+          1,
+          4,
+          13,
+          11000,
+          1,
+          14,
+          5,
+          13,
+          0,
+          1,
+          0,
+          4,
+          14,
+          11000,
+          1,
+          16,
+          5,
+          14,
+          14,
+          2,
+          3,
+          4,
+          16,
+          0,
+          1,
+          17,
+          8,
+          14,
+          14,
+          2,
+          0,
+          4,
+          17,
+          1000,
+        ],
+      ],
+      "rootID": 13,
+      "snapshots": Array [],
+    },
+  ],
+  "timelineData": Array [
+    Object {
+      "batchUIDToMeasuresKeyValueArray": Array [
+        Array [
+          1,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "layout-effects",
+            },
           ],
-          "duration": 10,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              10,
-            ],
+        ],
+        Array [
+          2,
+          Array [
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "layout-effects",
+            },
           ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
+        ],
+        Array [
+          3,
+          Array [
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "passive-effects",
+            },
           ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 34,
-          "updaters": Array [
+        ],
+        Array [
+          4,
+          Array [
             Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "passive-effects",
+            },
+          ],
+        ],
+        Array [
+          5,
+          Array [
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 54,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 54,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 54,
+              "type": "passive-effects",
             },
           ],
+        ],
+      ],
+      "componentMeasures": Array [
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
         },
         Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 20,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 20,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 2,
+          "timestamp": 21,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Parent",
           "duration": 10,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              10,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
+          "timestamp": 23,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 0,
+          "timestamp": 33,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 1,
+          "timestamp": 33,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 34,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Child",
+          "duration": 0,
           "timestamp": 44,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Parent",
+          "duration": 10,
+          "timestamp": 44,
+          "type": "render",
+          "warning": null,
         },
       ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [
+      "duration": 64,
+      "flamechart": Array [],
+      "internalModuleSourceToRanges": Array [],
+      "laneToLabelKeyValueArray": Array [
         Array [
           1,
-          12,
+          "Sync",
         ],
         Array [
           2,
-          12,
+          "InputContinuousHydration",
         ],
         Array [
           4,
-          0,
+          "InputContinuous",
         ],
         Array [
-          5,
-          1,
+          8,
+          "DefaultHydration",
         ],
         Array [
-          6,
-          1,
+          16,
+          "Default",
+        ],
+        Array [
+          32,
+          "TransitionHydration",
+        ],
+        Array [
+          64,
+          "Transition",
+        ],
+        Array [
+          128,
+          "Transition",
+        ],
+        Array [
+          256,
+          "Transition",
+        ],
+        Array [
+          512,
+          "Transition",
+        ],
+        Array [
+          1024,
+          "Transition",
+        ],
+        Array [
+          2048,
+          "Transition",
+        ],
+        Array [
+          4096,
+          "Transition",
+        ],
+        Array [
+          8192,
+          "Transition",
+        ],
+        Array [
+          16384,
+          "Transition",
+        ],
+        Array [
+          32768,
+          "Transition",
+        ],
+        Array [
+          65536,
+          "Transition",
+        ],
+        Array [
+          131072,
+          "Transition",
+        ],
+        Array [
+          262144,
+          "Transition",
+        ],
+        Array [
+          524288,
+          "Transition",
+        ],
+        Array [
+          1048576,
+          "Transition",
+        ],
+        Array [
+          2097152,
+          "Transition",
+        ],
+        Array [
+          4194304,
+          "Retry",
+        ],
+        Array [
+          8388608,
+          "Retry",
+        ],
+        Array [
+          16777216,
+          "Retry",
+        ],
+        Array [
+          33554432,
+          "Retry",
+        ],
+        Array [
+          67108864,
+          "Retry",
+        ],
+        Array [
+          134217728,
+          "SelectiveHydration",
+        ],
+        Array [
+          268435456,
+          "IdleHydration",
+        ],
+        Array [
+          536870912,
+          "Idle",
+        ],
+        Array [
+          1073741824,
+          "Offscreen",
         ],
       ],
-      "operations": Array [
+      "laneToReactMeasureKeyValueArray": Array [
         Array [
           1,
-          1,
-          8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          50,
-          1,
-          12,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          12,
-          2000,
-          4,
-          2,
-          14000,
-          3,
-          2,
-          4,
-          4,
-          5,
-          12,
-          6,
-          4,
-          1,
-          14000,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 13,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 11,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 23,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 34,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "passive-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "passive-effects",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 10,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 44,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 54,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 54,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 54,
+              "type": "passive-effects",
+            },
+          ],
         ],
         Array [
-          1,
-          1,
-          0,
-          2,
-          2,
-          12,
-          5,
-          4,
-          2,
-          11000,
-          3,
-          2,
           2,
-          4,
-          6,
-          4,
-          1,
-          11000,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
-          2,
-          1,
           4,
+          Array [],
         ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [
         Array [
-          1,
-          Object {
-            "children": Array [
-              2,
-            ],
-            "displayName": null,
-            "hocDisplayNames": null,
-            "id": 1,
-            "key": null,
-            "type": 11,
-          },
+          8,
+          Array [],
         ],
         Array [
-          2,
-          Object {
-            "children": Array [
-              4,
-              5,
-              6,
-            ],
-            "displayName": "Parent",
-            "hocDisplayNames": null,
-            "id": 2,
-            "key": null,
-            "type": 5,
-          },
+          16,
+          Array [],
         ],
         Array [
-          4,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 4,
-            "key": "0",
-            "type": 5,
-          },
+          32,
+          Array [],
         ],
         Array [
-          5,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 5,
-            "key": "1",
-            "type": 5,
-          },
+          64,
+          Array [],
         ],
         Array [
-          6,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": Array [
-              "Memo",
-            ],
-            "id": 6,
-            "key": null,
-            "type": 8,
-          },
+          128,
+          Array [],
         ],
-      ],
-    },
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              14,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              16,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              17,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              13,
-              11,
-            ],
-            Array [
-              14,
-              11,
-            ],
-            Array [
-              16,
-              0,
-            ],
-            Array [
-              17,
-              1,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              13,
-              0,
-            ],
-            Array [
-              14,
-              10,
-            ],
-            Array [
-              16,
-              0,
-            ],
-            Array [
-              17,
-              1,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 24,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 13,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [],
-      "operations": Array [
         Array [
-          1,
-          13,
-          15,
-          6,
-          80,
-          97,
-          114,
-          101,
-          110,
-          116,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          48,
-          1,
-          13,
-          11,
-          0,
-          1,
-          1,
-          1,
-          4,
-          13,
-          11000,
-          1,
-          14,
-          5,
-          13,
-          0,
-          1,
-          0,
-          4,
-          14,
-          11000,
-          1,
-          16,
-          5,
-          14,
-          14,
-          2,
-          3,
-          4,
-          16,
-          0,
-          1,
-          17,
-          8,
-          14,
-          14,
-          2,
-          0,
-          4,
-          17,
-          1000,
+          256,
+          Array [],
+        ],
+        Array [
+          512,
+          Array [],
+        ],
+        Array [
+          1024,
+          Array [],
+        ],
+        Array [
+          2048,
+          Array [],
+        ],
+        Array [
+          4096,
+          Array [],
+        ],
+        Array [
+          8192,
+          Array [],
+        ],
+        Array [
+          16384,
+          Array [],
+        ],
+        Array [
+          32768,
+          Array [],
+        ],
+        Array [
+          65536,
+          Array [],
+        ],
+        Array [
+          131072,
+          Array [],
+        ],
+        Array [
+          262144,
+          Array [],
+        ],
+        Array [
+          524288,
+          Array [],
+        ],
+        Array [
+          1048576,
+          Array [],
+        ],
+        Array [
+          2097152,
+          Array [],
+        ],
+        Array [
+          4194304,
+          Array [],
+        ],
+        Array [
+          8388608,
+          Array [],
+        ],
+        Array [
+          16777216,
+          Array [],
+        ],
+        Array [
+          33554432,
+          Array [],
+        ],
+        Array [
+          67108864,
+          Array [],
+        ],
+        Array [
+          134217728,
+          Array [],
+        ],
+        Array [
+          268435456,
+          Array [],
+        ],
+        Array [
+          536870912,
+          Array [],
+        ],
+        Array [
+          1073741824,
+          Array [],
         ],
       ],
-      "rootID": 13,
+      "nativeEvents": Array [],
+      "networkMeasures": Array [],
+      "otherUserTimingMarks": Array [],
+      "reactVersion": "<filtered-version>",
+      "schedulingEvents": Array [
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 23,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 34,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 44,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 44,
+          "type": "schedule-render",
+          "warning": null,
+        },
+      ],
+      "snapshotHeight": 0,
       "snapshots": Array [],
+      "startTime": 13,
+      "suspenseEvents": Array [],
+      "thrownErrors": Array [],
     },
   ],
   "version": 5,
@@ -2304,7 +4326,7 @@ Object {
       1,
       11,
       0,
-      1,
+      3,
       1,
       1,
       1,
@@ -2954,7 +4976,7 @@ Object {
           1,
           11,
           0,
-          1,
+          3,
           1,
           1,
           1,
@@ -2983,39 +5005,758 @@ Object {
           3,
           0,
           2,
-          0,
-          4,
+          0,
+          4,
+          4,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "timelineData": Array [
+    Object {
+      "batchUIDToMeasuresKeyValueArray": Array [
+        Array [
+          1,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
+          ],
+        ],
+        Array [
+          2,
+          Array [
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          3,
+          Array [
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          4,
+          Array [
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          5,
+          Array [
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          6,
+          Array [
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+      ],
+      "componentMeasures": Array [
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+      ],
+      "duration": 20,
+      "flamechart": Array [],
+      "internalModuleSourceToRanges": Array [],
+      "laneToLabelKeyValueArray": Array [
+        Array [
+          1,
+          "Sync",
+        ],
+        Array [
+          2,
+          "InputContinuousHydration",
+        ],
+        Array [
+          4,
+          "InputContinuous",
+        ],
+        Array [
+          8,
+          "DefaultHydration",
+        ],
+        Array [
+          16,
+          "Default",
+        ],
+        Array [
+          32,
+          "TransitionHydration",
+        ],
+        Array [
+          64,
+          "Transition",
+        ],
+        Array [
+          128,
+          "Transition",
+        ],
+        Array [
+          256,
+          "Transition",
+        ],
+        Array [
+          512,
+          "Transition",
+        ],
+        Array [
+          1024,
+          "Transition",
+        ],
+        Array [
+          2048,
+          "Transition",
+        ],
+        Array [
+          4096,
+          "Transition",
+        ],
+        Array [
+          8192,
+          "Transition",
+        ],
+        Array [
+          16384,
+          "Transition",
+        ],
+        Array [
+          32768,
+          "Transition",
+        ],
+        Array [
+          65536,
+          "Transition",
+        ],
+        Array [
+          131072,
+          "Transition",
+        ],
+        Array [
+          262144,
+          "Transition",
+        ],
+        Array [
+          524288,
+          "Transition",
+        ],
+        Array [
+          1048576,
+          "Transition",
+        ],
+        Array [
+          2097152,
+          "Transition",
+        ],
+        Array [
+          4194304,
+          "Retry",
+        ],
+        Array [
+          8388608,
+          "Retry",
+        ],
+        Array [
+          16777216,
+          "Retry",
+        ],
+        Array [
+          33554432,
+          "Retry",
+        ],
+        Array [
+          67108864,
+          "Retry",
+        ],
+        Array [
+          134217728,
+          "SelectiveHydration",
+        ],
+        Array [
+          268435456,
+          "IdleHydration",
+        ],
+        Array [
+          536870912,
+          "Idle",
+        ],
+        Array [
+          1073741824,
+          "Offscreen",
+        ],
+      ],
+      "laneToReactMeasureKeyValueArray": Array [
+        Array [
+          1,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          2,
+          Array [],
+        ],
+        Array [
           4,
-          0,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          8,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          16,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          32,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          64,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          128,
+          Array [],
+        ],
+        Array [
+          256,
+          Array [],
+        ],
+        Array [
+          512,
+          Array [],
+        ],
+        Array [
+          1024,
+          Array [],
+        ],
+        Array [
+          2048,
+          Array [],
+        ],
+        Array [
+          4096,
+          Array [],
+        ],
+        Array [
+          8192,
+          Array [],
+        ],
+        Array [
+          16384,
+          Array [],
+        ],
+        Array [
+          32768,
+          Array [],
+        ],
+        Array [
+          65536,
+          Array [],
+        ],
+        Array [
+          131072,
+          Array [],
+        ],
+        Array [
+          262144,
+          Array [],
+        ],
+        Array [
+          524288,
+          Array [],
+        ],
+        Array [
+          1048576,
+          Array [],
+        ],
+        Array [
+          2097152,
+          Array [],
+        ],
+        Array [
+          4194304,
+          Array [],
+        ],
+        Array [
+          8388608,
+          Array [],
+        ],
+        Array [
+          16777216,
+          Array [],
+        ],
+        Array [
+          33554432,
+          Array [],
+        ],
+        Array [
+          67108864,
+          Array [],
+        ],
+        Array [
+          134217728,
+          Array [],
+        ],
+        Array [
+          268435456,
+          Array [],
+        ],
+        Array [
+          536870912,
+          Array [],
+        ],
+        Array [
+          1073741824,
+          Array [],
         ],
       ],
-      "rootID": 1,
+      "nativeEvents": Array [],
+      "networkMeasures": Array [],
+      "otherUserTimingMarks": Array [],
+      "reactVersion": "<filtered-version>",
+      "schedulingEvents": Array [
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-state-update",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-state-update",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+      ],
+      "snapshotHeight": 0,
       "snapshots": Array [],
+      "startTime": -10,
+      "suspenseEvents": Array [],
+      "thrownErrors": Array [],
     },
   ],
   "version": 5,
@@ -4227,7 +6968,7 @@ Object {
           1,
           11,
           0,
-          1,
+          3,
           1,
           1,
           1,
@@ -4253,67 +6994,829 @@ Object {
           1,
           4,
           1,
-          3,
+          3,
+          2,
+          3,
+          0,
+          4,
+          4,
+          0,
+          1,
+          5,
+          5,
+          4,
+          4,
+          4,
+          0,
+          4,
+          5,
+          0,
+          1,
+          6,
+          1,
+          3,
+          2,
+          5,
+          0,
+          4,
+          6,
+          0,
+          1,
+          7,
+          5,
+          6,
+          6,
+          4,
+          0,
+          4,
+          7,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+        Array [
+          1,
+          1,
+          0,
+        ],
+      ],
+      "rootID": 1,
+      "snapshots": Array [],
+    },
+  ],
+  "timelineData": Array [
+    Object {
+      "batchUIDToMeasuresKeyValueArray": Array [
+        Array [
+          1,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+          ],
+        ],
+        Array [
+          2,
+          Array [
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          3,
+          Array [
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          4,
+          Array [
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
+          5,
+          Array [
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+      ],
+      "componentMeasures": Array [
+        Object {
+          "componentName": "LegacyContextProvider",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "ModernContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextProvider",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "ModernContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextProvider",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "ModernContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextProvider",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "ModernContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextProvider",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "ModernContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextConsumer",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "FunctionComponentWithHooks",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "render",
+          "warning": null,
+        },
+      ],
+      "duration": 20,
+      "flamechart": Array [],
+      "internalModuleSourceToRanges": Array [],
+      "laneToLabelKeyValueArray": Array [
+        Array [
+          1,
+          "Sync",
+        ],
+        Array [
           2,
-          3,
-          0,
-          4,
-          4,
-          0,
-          1,
-          5,
-          5,
-          4,
-          4,
-          4,
-          0,
+          "InputContinuousHydration",
+        ],
+        Array [
           4,
-          5,
-          0,
-          1,
-          6,
+          "InputContinuous",
+        ],
+        Array [
+          8,
+          "DefaultHydration",
+        ],
+        Array [
+          16,
+          "Default",
+        ],
+        Array [
+          32,
+          "TransitionHydration",
+        ],
+        Array [
+          64,
+          "Transition",
+        ],
+        Array [
+          128,
+          "Transition",
+        ],
+        Array [
+          256,
+          "Transition",
+        ],
+        Array [
+          512,
+          "Transition",
+        ],
+        Array [
+          1024,
+          "Transition",
+        ],
+        Array [
+          2048,
+          "Transition",
+        ],
+        Array [
+          4096,
+          "Transition",
+        ],
+        Array [
+          8192,
+          "Transition",
+        ],
+        Array [
+          16384,
+          "Transition",
+        ],
+        Array [
+          32768,
+          "Transition",
+        ],
+        Array [
+          65536,
+          "Transition",
+        ],
+        Array [
+          131072,
+          "Transition",
+        ],
+        Array [
+          262144,
+          "Transition",
+        ],
+        Array [
+          524288,
+          "Transition",
+        ],
+        Array [
+          1048576,
+          "Transition",
+        ],
+        Array [
+          2097152,
+          "Transition",
+        ],
+        Array [
+          4194304,
+          "Retry",
+        ],
+        Array [
+          8388608,
+          "Retry",
+        ],
+        Array [
+          16777216,
+          "Retry",
+        ],
+        Array [
+          33554432,
+          "Retry",
+        ],
+        Array [
+          67108864,
+          "Retry",
+        ],
+        Array [
+          134217728,
+          "SelectiveHydration",
+        ],
+        Array [
+          268435456,
+          "IdleHydration",
+        ],
+        Array [
+          536870912,
+          "Idle",
+        ],
+        Array [
+          1073741824,
+          "Offscreen",
+        ],
+      ],
+      "laneToReactMeasureKeyValueArray": Array [
+        Array [
           1,
-          3,
+          Array [
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 1,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render-idle",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "render",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "commit",
+            },
+          ],
+        ],
+        Array [
           2,
-          5,
-          0,
-          4,
-          6,
-          0,
-          1,
-          7,
-          5,
-          6,
-          6,
-          4,
-          0,
+          Array [],
+        ],
+        Array [
           4,
-          7,
-          0,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          8,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          16,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          32,
+          Array [],
         ],
         Array [
-          1,
-          1,
-          0,
+          64,
+          Array [],
+        ],
+        Array [
+          128,
+          Array [],
+        ],
+        Array [
+          256,
+          Array [],
+        ],
+        Array [
+          512,
+          Array [],
+        ],
+        Array [
+          1024,
+          Array [],
+        ],
+        Array [
+          2048,
+          Array [],
+        ],
+        Array [
+          4096,
+          Array [],
+        ],
+        Array [
+          8192,
+          Array [],
+        ],
+        Array [
+          16384,
+          Array [],
+        ],
+        Array [
+          32768,
+          Array [],
+        ],
+        Array [
+          65536,
+          Array [],
+        ],
+        Array [
+          131072,
+          Array [],
+        ],
+        Array [
+          262144,
+          Array [],
+        ],
+        Array [
+          524288,
+          Array [],
+        ],
+        Array [
+          1048576,
+          Array [],
+        ],
+        Array [
+          2097152,
+          Array [],
+        ],
+        Array [
+          4194304,
+          Array [],
+        ],
+        Array [
+          8388608,
+          Array [],
+        ],
+        Array [
+          16777216,
+          Array [],
+        ],
+        Array [
+          33554432,
+          Array [],
+        ],
+        Array [
+          67108864,
+          Array [],
+        ],
+        Array [
+          134217728,
+          Array [],
+        ],
+        Array [
+          268435456,
+          Array [],
+        ],
+        Array [
+          536870912,
+          Array [],
+        ],
+        Array [
+          1073741824,
+          Array [],
         ],
       ],
-      "rootID": 1,
+      "nativeEvents": Array [],
+      "networkMeasures": Array [],
+      "otherUserTimingMarks": Array [],
+      "reactVersion": "<filtered-version>",
+      "schedulingEvents": Array [
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "componentName": "LegacyContextProvider",
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-state-update",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+        Object {
+          "lanes": "0b0000000000000000000000000000001",
+          "timestamp": 10,
+          "type": "schedule-render",
+          "warning": null,
+        },
+      ],
+      "snapshotHeight": 0,
       "snapshots": Array [],
+      "startTime": -10,
+      "suspenseEvents": Array [],
+      "thrownErrors": Array [],
     },
   ],
   "version": 5,
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index 09ad50ecae49..0d5ebff509b9 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -15,1915 +15,2363 @@ describe('Timeline profiler', () => {
   let Scheduler;
   let utils;
 
-  let clearedMarks;
-  let featureDetectionMarkName = null;
-  let marks;
-  let setPerformanceMock;
-
-  function createUserTimingPolyfill() {
-    featureDetectionMarkName = null;
-
-    clearedMarks = [];
-    marks = [];
-
-    // 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 `${markName.substr(0, 29)}-<filtered-file-system-path>`;
-      } else if (markName.startsWith('--react-internal-module-stop')) {
-        return `${markName.substr(0, 28)}-<filtered-file-system-path>`;
-      } else if (markName.startsWith('--react-version')) {
-        return `${markName.substr(0, 15)}-0.0.0`;
-      } 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);
-
-        clearedMarks.push(markName);
-        marks = marks.filter(mark => mark !== markName);
-      },
-      mark(markName, markOptions) {
-        markName = filterMarkData(markName);
-
-        if (featureDetectionMarkName === null) {
-          featureDetectionMarkName = markName;
-        }
-
-        marks.push(markName);
-
-        if (markOptions != null) {
-          // This is triggers the feature detection.
-          markOptions.startTime++;
+  describe('User Timing API', () => {
+    let clearedMarks;
+    let featureDetectionMarkName = null;
+    let marks;
+    let setPerformanceMock;
+
+    function createUserTimingPolyfill() {
+      featureDetectionMarkName = null;
+
+      clearedMarks = [];
+      marks = [];
+
+      // 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;
         }
-      },
-    };
-  }
-
-  function clearPendingMarks() {
-    clearedMarks.splice(0);
-  }
-
-  beforeEach(() => {
-    utils = require('./utils');
-    utils.beforeEachProfiling();
+      }
 
-    React = require('react');
-    ReactDOM = require('react-dom');
-    Scheduler = require('scheduler');
+      // 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);
 
-    setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
-      .setPerformanceMock_ONLY_FOR_TESTING;
-    setPerformanceMock(createUserTimingPolyfill());
+          clearedMarks.push(markName);
+          marks = marks.filter(mark => mark !== markName);
+        },
+        mark(markName, markOptions) {
+          markName = filterMarkData(markName);
 
-    global.IS_REACT_ACT_ENVIRONMENT = true;
-  });
+          if (featureDetectionMarkName === null) {
+            featureDetectionMarkName = markName;
+          }
 
-  afterEach(() => {
-    // Verify all logged marks also get cleared.
-    expect(marks).toHaveLength(0);
+          marks.push(markName);
 
-    setPerformanceMock(null);
-  });
+          if (markOptions != null) {
+            // This is triggers the feature detection.
+            markOptions.startTime++;
+          }
+        },
+      };
+    }
 
-  describe('getLanesFromTransportDecimalBitmask', () => {
-    let getLanesFromTransportDecimalBitmask;
+    function clearPendingMarks() {
+      clearedMarks.splice(0);
+    }
 
     beforeEach(() => {
-      getLanesFromTransportDecimalBitmask = require('react-devtools-timeline/src/import-worker/preprocessData')
-        .getLanesFromTransportDecimalBitmask;
-    });
+      utils = require('./utils');
+      utils.beforeEachProfiling();
 
-    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()));
-    });
+      React = require('react');
+      ReactDOM = require('react-dom');
+      Scheduler = require('scheduler');
 
-    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([]);
-    });
+      setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
+        .setPerformanceMock_ONLY_FOR_TESTING;
+      setPerformanceMock(createUserTimingPolyfill());
 
-    it('should ignore lanes outside REACT_TOTAL_NUM_LANES', () => {
-      const REACT_TOTAL_NUM_LANES = require('react-devtools-timeline/src/constants')
-        .REACT_TOTAL_NUM_LANES;
+      const store = global.store;
 
-      // Sanity check; this test may need to be updated when the no. of fiber lanes are changed.
-      expect(REACT_TOTAL_NUM_LANES).toBe(31);
+      // Start profiling so that data will actually be recorded.
+      utils.act(() => store.profilerStore.startProfiling());
 
-      expect(
-        getLanesFromTransportDecimalBitmask(
-          '4294967297', // 2^32 + 1
-        ),
-      ).toEqual([0]);
+      global.IS_REACT_ACT_ENVIRONMENT = true;
     });
-  });
 
-  describe('preprocessData', () => {
-    let preprocessData;
+    afterEach(() => {
+      // Verify all logged marks also get cleared.
+      expect(marks).toHaveLength(0);
 
-    beforeEach(() => {
-      preprocessData = require('react-devtools-timeline/src/import-worker/preprocessData')
-        .default;
+      setPerformanceMock(null);
     });
 
-    // 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,
-      };
-    }
+    describe('getLanesFromTransportDecimalBitmask', () => {
+      let getLanesFromTransportDecimalBitmask;
 
-    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,
+      beforeEach(() => {
+        getLanesFromTransportDecimalBitmask = require('react-devtools-timeline/src/import-worker/preprocessData')
+          .getLanesFromTransportDecimalBitmask;
       });
-    }
 
-    function createReactVersionEntry() {
-      return createUserTimingEntry({
-        cat: 'blink.user_timing',
-        name: '--react-version-0.0.0',
+      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()));
       });
-    }
 
-    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',
+      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([]);
       });
-    }
 
-    function createNativeEventEntry(type, duration) {
-      return createUserTimingEntry({
-        cat: 'devtools.timeline',
-        name: 'EventDispatch',
-        args: {data: {type}},
-        dur: duration,
-        tdur: duration,
-      });
-    }
+      it('should ignore lanes outside REACT_TOTAL_NUM_LANES', () => {
+        const REACT_TOTAL_NUM_LANES = require('react-devtools-timeline/src/constants')
+          .REACT_TOTAL_NUM_LANES;
 
-    function creactCpuProfilerSample() {
-      return createUserTimingEntry({
-        args: {data: {startTime: ++startTime}},
-        cat: 'disabled-by-default-v8.cpu_profiler',
-        id: '0x1',
-        name: 'Profile',
-        ph: 'P',
-      });
-    }
+        // Sanity check; this test may need to be updated when the no. of fiber lanes are changed.
+        expect(REACT_TOTAL_NUM_LANES).toBe(31);
 
-    function createBoilerplateEntries() {
-      return [
-        createProfilerVersionEntry(),
-        createReactVersionEntry(),
-        createLaneLabelsEntry(),
-      ];
-    }
+        expect(
+          getLanesFromTransportDecimalBitmask(
+            '4294967297', // 2^32 + 1
+          ),
+        ).toEqual([0]);
+      });
+    });
 
-    function createUserTimingData(sampleMarks) {
-      const cpuProfilerSample = creactCpuProfilerSample();
+    describe('preprocessData', () => {
+      let preprocessData;
 
-      const randomSample = createUserTimingEntry({
-        dur: 100,
-        tdur: 200,
-        ph: 'X',
-        cat: 'disabled-by-default-devtools.timeline',
-        name: 'RunTask',
-        args: {},
+      beforeEach(() => {
+        preprocessData = require('react-devtools-timeline/src/import-worker/preprocessData')
+          .default;
       });
 
-      const userTimingData = [cpuProfilerSample, randomSample];
+      // These should be dynamic to mimic a real profile,
+      // but reprooducible between test runs.
+      let pid = 0;
+      let tid = 0;
+      let startTime = 0;
 
-      sampleMarks.forEach(markName => {
-        userTimingData.push({
+      function createUserTimingEntry(data) {
+        return {
           pid: ++pid,
           tid: ++tid,
           ts: ++startTime,
-          args: {data: {}},
+          ...data,
+        };
+      }
+
+      function createProfilerVersionEntry() {
+        const SCHEDULING_PROFILER_VERSION = require('react-devtools-timeline/src/constants')
+          .SCHEDULING_PROFILER_VERSION;
+        return createUserTimingEntry({
           cat: 'blink.user_timing',
-          name: markName,
-          ph: 'R',
+          name: '--profiler-version-' + SCHEDULING_PROFILER_VERSION,
         });
-      });
+      }
 
-      return userTimingData;
-    }
+      function createReactVersionEntry() {
+        return createUserTimingEntry({
+          cat: 'blink.user_timing',
+          name: '--react-version-<filtered-version>',
+        });
+      }
 
-    beforeEach(() => {
-      tid = 0;
-      pid = 0;
-      startTime = 0;
-    });
+      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',
+        });
+      }
 
-    it('should throw given an empty timeline', async () => {
-      await expect(async () => preprocessData([])).rejects.toThrow();
-    });
+      function createNativeEventEntry(type, duration) {
+        return createUserTimingEntry({
+          cat: 'devtools.timeline',
+          name: 'EventDispatch',
+          args: {data: {type}},
+          dur: duration,
+          tdur: duration,
+        });
+      }
 
-    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: {},
-      });
+      function creactCpuProfilerSample() {
+        return createUserTimingEntry({
+          args: {data: {startTime: ++startTime}},
+          cat: 'disabled-by-default-v8.cpu_profiler',
+          id: '0x1',
+          name: 'Profile',
+          ph: 'P',
+        });
+      }
 
-      await expect(async () =>
-        preprocessData([randomSample]),
-      ).rejects.toThrow();
-    });
+      function createBoilerplateEntries() {
+        return [
+          createProfilerVersionEntry(),
+          createReactVersionEntry(),
+          createLaneLabelsEntry(),
+        ];
+      }
 
-    it('should throw given a timeline without an explicit profiler version mark nor any other React marks', async () => {
-      const cpuProfilerSample = creactCpuProfilerSample();
+      function createUserTimingData(sampleMarks) {
+        const cpuProfilerSample = creactCpuProfilerSample();
 
-      await expect(
-        async () => await preprocessData([cpuProfilerSample]),
-      ).rejects.toThrow(
-        'Please provide profiling data from an React application',
-      );
-    });
+        const randomSample = createUserTimingEntry({
+          dur: 100,
+          tdur: 200,
+          ph: 'X',
+          cat: 'disabled-by-default-devtools.timeline',
+          name: 'RunTask',
+          args: {},
+        });
 
-    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 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;
       });
-      const samples = [cpuProfilerSample, scheduleRenderSample];
 
-      await expect(async () => await preprocessData(samples)).rejects.toThrow(
-        'This version of profiling data is not supported',
-      );
-    });
+      it('should throw given an empty timeline', async () => {
+        await expect(async () => preprocessData([])).rejects.toThrow();
+      });
+
+      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: {},
+        });
 
-    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: {},
+        await expect(async () =>
+          preprocessData([randomSample]),
+        ).rejects.toThrow();
       });
 
-      const data = await preprocessData([
-        ...createBoilerplateEntries(),
-        cpuProfilerSample,
-        randomSample,
-      ]);
-      expect(data).toMatchInlineSnapshot(`
-      Object {
-        "batchUIDToMeasuresMap": Map {},
-        "componentMeasures": Array [],
-        "duration": 0.005,
-        "flamechart": Array [],
-        "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 => Array [],
-          1 => Array [],
-          2 => Array [],
-          3 => Array [],
-          4 => Array [],
-          5 => Array [],
-          6 => Array [],
-          7 => Array [],
-          8 => Array [],
-          9 => Array [],
-          10 => Array [],
-          11 => Array [],
-          12 => Array [],
-          13 => Array [],
-          14 => Array [],
-          15 => Array [],
-          16 => Array [],
-          17 => Array [],
-          18 => Array [],
-          19 => Array [],
-          20 => Array [],
-          21 => Array [],
-          22 => Array [],
-          23 => Array [],
-          24 => Array [],
-          25 => Array [],
-          26 => Array [],
-          27 => Array [],
-          28 => Array [],
-          29 => Array [],
-          30 => Array [],
-        },
-        "nativeEvents": Array [],
-        "networkMeasures": Array [],
-        "otherUserTimingMarks": Array [],
-        "reactVersion": "0.0.0",
-        "schedulingEvents": Array [],
-        "snapshotHeight": 0,
-        "snapshots": Array [],
-        "startTime": 1,
-        "suspenseEvents": Array [],
-        "thrownErrors": Array [],
-      }
-    `);
-    });
+      it('should throw given a timeline without an explicit profiler version mark nor any other React marks', async () => {
+        const cpuProfilerSample = creactCpuProfilerSample();
 
-    it('should process legacy data format (before lane labels were added)', async () => {
-      const cpuProfilerSample = creactCpuProfilerSample();
+        await expect(
+          async () => await preprocessData([cpuProfilerSample]),
+        ).rejects.toThrow(
+          'Please provide profiling data from an React application',
+        );
+      });
 
-      // 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({
+      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-',
-        }),
-        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(`
-      Object {
-        "batchUIDToMeasuresMap": Map {
-          0 => Array [
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.005,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.006,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.001,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.006,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.008,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.009,
-              "type": "layout-effects",
-            },
-          ],
-        },
-        "componentMeasures": Array [],
-        "duration": 0.011,
-        "flamechart": Array [],
-        "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 => Array [],
-          1 => Array [],
-          2 => Array [],
-          3 => Array [],
-          4 => Array [],
-          5 => Array [],
-          6 => Array [],
-          7 => Array [],
-          8 => Array [],
-          9 => Array [
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.005,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.006,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.001,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.006,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.008,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                9,
-              ],
-              "timestamp": 0.009,
-              "type": "layout-effects",
-            },
-          ],
-          10 => Array [],
-          11 => Array [],
-          12 => Array [],
-          13 => Array [],
-          14 => Array [],
-          15 => Array [],
-          16 => Array [],
-          17 => Array [],
-          18 => Array [],
-          19 => Array [],
-          20 => Array [],
-          21 => Array [],
-          22 => Array [],
-          23 => Array [],
-          24 => Array [],
-          25 => Array [],
-          26 => Array [],
-          27 => Array [],
-          28 => Array [],
-          29 => Array [],
-          30 => Array [],
-        },
-        "nativeEvents": Array [],
-        "networkMeasures": Array [],
-        "otherUserTimingMarks": Array [],
-        "reactVersion": "0.0.0",
-        "schedulingEvents": Array [
-          Object {
-            "lanes": Array [
-              9,
-            ],
-            "timestamp": 0.005,
-            "type": "schedule-render",
-            "warning": null,
-          },
-        ],
-        "snapshotHeight": 0,
-        "snapshots": Array [],
-        "startTime": 1,
-        "suspenseEvents": Array [],
-        "thrownErrors": Array [],
-      }
-    `);
-    });
+        });
+        const samples = [cpuProfilerSample, scheduleRenderSample];
 
-    it('should process a sample legacy render sequence', async () => {
-      utils.legacyRender(<div />, document.createElement('div'));
+        await expect(async () => await preprocessData(samples)).rejects.toThrow(
+          'This version of profiling data is not supported',
+        );
+      });
 
-      const data = await preprocessData([
-        ...createBoilerplateEntries(),
-        ...createUserTimingData(clearedMarks),
-      ]);
-      expect(data).toMatchInlineSnapshot(`
-      Object {
-        "batchUIDToMeasuresMap": Map {
-          0 => Array [
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.01,
-              "lanes": Array [
-                0,
-              ],
-              "timestamp": 0.004,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.001,
-              "lanes": Array [
-                0,
+      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(`
+                Object {
+                  "batchUIDToMeasuresMap": Map {},
+                  "componentMeasures": Array [],
+                  "duration": 0.005,
+                  "flamechart": Array [],
+                  "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 => Array [],
+                    1 => Array [],
+                    2 => Array [],
+                    3 => Array [],
+                    4 => Array [],
+                    5 => Array [],
+                    6 => Array [],
+                    7 => Array [],
+                    8 => Array [],
+                    9 => Array [],
+                    10 => Array [],
+                    11 => Array [],
+                    12 => Array [],
+                    13 => Array [],
+                    14 => Array [],
+                    15 => Array [],
+                    16 => Array [],
+                    17 => Array [],
+                    18 => Array [],
+                    19 => Array [],
+                    20 => Array [],
+                    21 => Array [],
+                    22 => Array [],
+                    23 => Array [],
+                    24 => Array [],
+                    25 => Array [],
+                    26 => Array [],
+                    27 => Array [],
+                    28 => Array [],
+                    29 => Array [],
+                    30 => Array [],
+                  },
+                  "nativeEvents": Array [],
+                  "networkMeasures": Array [],
+                  "otherUserTimingMarks": Array [],
+                  "reactVersion": "<filtered-version>",
+                  "schedulingEvents": Array [],
+                  "snapshotHeight": 0,
+                  "snapshots": Array [],
+                  "startTime": 1,
+                  "suspenseEvents": Array [],
+                  "thrownErrors": Array [],
+                }
+          `);
+      });
+
+      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(`
+          Object {
+            "batchUIDToMeasuresMap": Map {
+              0 => Array [
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.005,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.009,
+                  "type": "layout-effects",
+                },
               ],
-              "timestamp": 0.004,
-              "type": "render",
             },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.008,
-              "lanes": Array [
-                0,
-              ],
-              "timestamp": 0.006,
-              "type": "commit",
+            "componentMeasures": Array [],
+            "duration": 0.011,
+            "flamechart": Array [],
+            "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",
             },
-            Object {
-              "batchUID": 0,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                0,
+            "laneToReactMeasureMap": Map {
+              0 => Array [],
+              1 => Array [],
+              2 => Array [],
+              3 => Array [],
+              4 => Array [],
+              5 => Array [],
+              6 => Array [],
+              7 => Array [],
+              8 => Array [],
+              9 => Array [
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.005,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000001001",
+                  "timestamp": 0.009,
+                  "type": "layout-effects",
+                },
               ],
-              "timestamp": 0.012,
-              "type": "layout-effects",
+              10 => Array [],
+              11 => Array [],
+              12 => Array [],
+              13 => Array [],
+              14 => Array [],
+              15 => Array [],
+              16 => Array [],
+              17 => Array [],
+              18 => Array [],
+              19 => Array [],
+              20 => Array [],
+              21 => Array [],
+              22 => Array [],
+              23 => Array [],
+              24 => Array [],
+              25 => Array [],
+              26 => Array [],
+              27 => Array [],
+              28 => Array [],
+              29 => Array [],
+              30 => Array [],
             },
-          ],
-        },
-        "componentMeasures": Array [],
-        "duration": 0.014,
-        "flamechart": Array [],
-        "internalModuleSourceToRanges": Map {
-          undefined => Array [
-            Array [
-              Object {
-                "functionName": "<filtered-file-system-path>",
-              },
+            "nativeEvents": Array [],
+            "networkMeasures": Array [],
+            "otherUserTimingMarks": Array [],
+            "reactVersion": "<filtered-version>",
+            "schedulingEvents": Array [
               Object {
-                "functionName": "dule-stop-<filtered-file-system-path>",
+                "lanes": "0b0000000000000000000000000001001",
+                "timestamp": 0.005,
+                "type": "schedule-render",
+                "warning": null,
               },
             ],
-          ],
-        },
-        "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 => Array [
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.01,
-              "lanes": Array [
-                0,
+            "snapshotHeight": 0,
+            "snapshots": Array [],
+            "startTime": 1,
+            "suspenseEvents": Array [],
+            "thrownErrors": Array [],
+          }
+        `);
+      });
+
+      it('should process a sample legacy render sequence', async () => {
+        utils.legacyRender(<div />, document.createElement('div'));
+
+        const data = await preprocessData([
+          ...createBoilerplateEntries(),
+          ...createUserTimingData(clearedMarks),
+        ]);
+        expect(data).toMatchInlineSnapshot(`
+          Object {
+            "batchUIDToMeasuresMap": Map {
+              0 => Array [
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.01,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.014,
+                  "type": "layout-effects",
+                },
               ],
-              "timestamp": 0.004,
-              "type": "render-idle",
             },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.001,
-              "lanes": Array [
-                0,
+            "componentMeasures": Array [],
+            "duration": 0.016,
+            "flamechart": Array [],
+            "internalModuleSourceToRanges": Map {
+              undefined => Array [
+                Array [
+                  Object {
+                    "columnNumber": 0,
+                    "functionName": "filtered",
+                    "lineNumber": 0,
+                    "source": "  at filtered (<anonymous>:0:0)",
+                  },
+                  Object {
+                    "columnNumber": 1,
+                    "functionName": "filtered",
+                    "lineNumber": 1,
+                    "source": "  at filtered (<anonymous>:1:1)",
+                  },
+                ],
               ],
-              "timestamp": 0.004,
-              "type": "render",
             },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.008,
-              "lanes": Array [
-                0,
-              ],
-              "timestamp": 0.006,
-              "type": "commit",
+            "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",
             },
-            Object {
-              "batchUID": 0,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                0,
+            "laneToReactMeasureMap": Map {
+              0 => Array [
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.01,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.008,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000000",
+                  "timestamp": 0.014,
+                  "type": "layout-effects",
+                },
               ],
-              "timestamp": 0.012,
-              "type": "layout-effects",
+              1 => Array [],
+              2 => Array [],
+              3 => Array [],
+              4 => Array [],
+              5 => Array [],
+              6 => Array [],
+              7 => Array [],
+              8 => Array [],
+              9 => Array [],
+              10 => Array [],
+              11 => Array [],
+              12 => Array [],
+              13 => Array [],
+              14 => Array [],
+              15 => Array [],
+              16 => Array [],
+              17 => Array [],
+              18 => Array [],
+              19 => Array [],
+              20 => Array [],
+              21 => Array [],
+              22 => Array [],
+              23 => Array [],
+              24 => Array [],
+              25 => Array [],
+              26 => Array [],
+              27 => Array [],
+              28 => Array [],
+              29 => Array [],
+              30 => Array [],
             },
-          ],
-          1 => Array [],
-          2 => Array [],
-          3 => Array [],
-          4 => Array [],
-          5 => Array [],
-          6 => Array [],
-          7 => Array [],
-          8 => Array [],
-          9 => Array [],
-          10 => Array [],
-          11 => Array [],
-          12 => Array [],
-          13 => Array [],
-          14 => Array [],
-          15 => Array [],
-          16 => Array [],
-          17 => Array [],
-          18 => Array [],
-          19 => Array [],
-          20 => Array [],
-          21 => Array [],
-          22 => Array [],
-          23 => Array [],
-          24 => Array [],
-          25 => Array [],
-          26 => Array [],
-          27 => Array [],
-          28 => Array [],
-          29 => Array [],
-          30 => Array [],
-        },
-        "nativeEvents": Array [],
-        "networkMeasures": Array [],
-        "otherUserTimingMarks": Array [],
-        "reactVersion": "0.0.0",
-        "schedulingEvents": Array [
-          Object {
-            "lanes": Array [
-              0,
+            "nativeEvents": Array [],
+            "networkMeasures": Array [],
+            "otherUserTimingMarks": Array [],
+            "reactVersion": "<filtered-version>",
+            "schedulingEvents": Array [
+              Object {
+                "lanes": "0b0000000000000000000000000000000",
+                "timestamp": 0.005,
+                "type": "schedule-render",
+                "warning": null,
+              },
             ],
-            "timestamp": 0.003,
-            "type": "schedule-render",
-            "warning": null,
-          },
-        ],
-        "snapshotHeight": 0,
-        "snapshots": Array [],
-        "startTime": 4,
-        "suspenseEvents": Array [],
-        "thrownErrors": Array [],
-      }
-    `);
-    });
-
-    it('should process a sample createRoot render sequence', async () => {
-      function App() {
-        const [didMount, setDidMount] = React.useState(false);
-        React.useEffect(() => {
-          if (!didMount) {
-            setDidMount(true);
+            "snapshotHeight": 0,
+            "snapshots": Array [],
+            "startTime": 4,
+            "suspenseEvents": Array [],
+            "thrownErrors": Array [],
           }
-        });
-        return true;
-      }
+        `);
+      });
 
-      const root = ReactDOM.createRoot(document.createElement('div'));
-      utils.act(() => root.render(<App />));
+      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 data = await preprocessData([
-        ...createBoilerplateEntries(),
-        ...createUserTimingData(clearedMarks),
-      ]);
-      expect(data).toMatchInlineSnapshot(`
-      Object {
-        "batchUIDToMeasuresMap": Map {
-          0 => Array [
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.012,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.004,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.004,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.008,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.008,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.014,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.004,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.017,
-              "type": "passive-effects",
-            },
-          ],
-          1 => Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.012,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.022,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.022,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.008,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.026,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                4,
+        const root = ReactDOM.createRoot(document.createElement('div'));
+        utils.act(() => root.render(<App />));
+
+        const data = await preprocessData([
+          ...createBoilerplateEntries(),
+          ...createUserTimingData(clearedMarks),
+        ]);
+        expect(data).toMatchInlineSnapshot(`
+          Object {
+            "batchUIDToMeasuresMap": Map {
+              0 => Array [
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.01,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.016,
+                  "type": "layout-effects",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.004,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.019,
+                  "type": "passive-effects",
+                },
               ],
-              "timestamp": 0.032,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                4,
+              1 => Array [
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.024,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.024,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.028,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.034,
+                  "type": "layout-effects",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.037,
+                  "type": "passive-effects",
+                },
               ],
-              "timestamp": 0.035,
-              "type": "passive-effects",
             },
-          ],
-        },
-        "componentMeasures": Array [
-          Object {
-            "componentName": "App",
-            "duration": 0.001,
-            "timestamp": 0.005,
-            "type": "render",
-            "warning": null,
-          },
-          Object {
-            "componentName": "App",
-            "duration": 0.002,
-            "timestamp": 0.018,
-            "type": "passive-effect-mount",
-            "warning": null,
-          },
-          Object {
-            "componentName": "App",
-            "duration": 0.001,
-            "timestamp": 0.023,
-            "type": "render",
-            "warning": null,
-          },
-          Object {
-            "componentName": "App",
-            "duration": 0.001,
-            "timestamp": 0.036,
-            "type": "passive-effect-mount",
-            "warning": null,
-          },
-        ],
-        "duration": 0.038,
-        "flamechart": Array [],
-        "internalModuleSourceToRanges": Map {
-          undefined => Array [
-            Array [
+            "componentMeasures": Array [
               Object {
-                "functionName": "<filtered-file-system-path>",
+                "componentName": "App",
+                "duration": 0.001,
+                "timestamp": 0.007,
+                "type": "render",
+                "warning": null,
               },
               Object {
-                "functionName": "dule-stop-<filtered-file-system-path>",
+                "componentName": "App",
+                "duration": 0.002,
+                "timestamp": 0.02,
+                "type": "passive-effect-mount",
+                "warning": null,
+              },
+              Object {
+                "componentName": "App",
+                "duration": 0.001,
+                "timestamp": 0.025,
+                "type": "render",
+                "warning": null,
+              },
+              Object {
+                "componentName": "App",
+                "duration": 0.001,
+                "timestamp": 0.038,
+                "type": "passive-effect-mount",
+                "warning": null,
               },
             ],
-          ],
-        },
-        "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 => Array [],
-          1 => Array [],
-          2 => Array [],
-          3 => Array [],
-          4 => Array [
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.012,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.004,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.004,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.008,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.008,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.014,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 0,
-              "depth": 0,
-              "duration": 0.004,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.017,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.012,
-              "lanes": Array [
-                4,
+            "duration": 0.04,
+            "flamechart": Array [],
+            "internalModuleSourceToRanges": Map {
+              undefined => Array [
+                Array [
+                  Object {
+                    "columnNumber": 0,
+                    "functionName": "filtered",
+                    "lineNumber": 0,
+                    "source": "  at filtered (<anonymous>:0:0)",
+                  },
+                  Object {
+                    "columnNumber": 1,
+                    "functionName": "filtered",
+                    "lineNumber": 1,
+                    "source": "  at filtered (<anonymous>:1:1)",
+                  },
+                ],
               ],
-              "timestamp": 0.022,
-              "type": "render-idle",
             },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.022,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.008,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.026,
-              "type": "commit",
+            "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",
             },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0.001,
-              "lanes": Array [
-                4,
+            "laneToReactMeasureMap": Map {
+              0 => Array [],
+              1 => Array [],
+              2 => Array [],
+              3 => Array [],
+              4 => Array [
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.006,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.006,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.01,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.016,
+                  "type": "layout-effects",
+                },
+                Object {
+                  "batchUID": 0,
+                  "depth": 0,
+                  "duration": 0.004,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.019,
+                  "type": "passive-effects",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.012,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.024,
+                  "type": "render-idle",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.024,
+                  "type": "render",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.008,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.028,
+                  "type": "commit",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 1,
+                  "duration": 0.001,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.034,
+                  "type": "layout-effects",
+                },
+                Object {
+                  "batchUID": 1,
+                  "depth": 0,
+                  "duration": 0.003,
+                  "lanes": "0b0000000000000000000000000000100",
+                  "timestamp": 0.037,
+                  "type": "passive-effects",
+                },
               ],
-              "timestamp": 0.032,
-              "type": "layout-effects",
+              5 => Array [],
+              6 => Array [],
+              7 => Array [],
+              8 => Array [],
+              9 => Array [],
+              10 => Array [],
+              11 => Array [],
+              12 => Array [],
+              13 => Array [],
+              14 => Array [],
+              15 => Array [],
+              16 => Array [],
+              17 => Array [],
+              18 => Array [],
+              19 => Array [],
+              20 => Array [],
+              21 => Array [],
+              22 => Array [],
+              23 => Array [],
+              24 => Array [],
+              25 => Array [],
+              26 => Array [],
+              27 => Array [],
+              28 => Array [],
+              29 => Array [],
+              30 => Array [],
             },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0.003,
-              "lanes": Array [
-                4,
-              ],
-              "timestamp": 0.035,
-              "type": "passive-effects",
-            },
-          ],
-          5 => Array [],
-          6 => Array [],
-          7 => Array [],
-          8 => Array [],
-          9 => Array [],
-          10 => Array [],
-          11 => Array [],
-          12 => Array [],
-          13 => Array [],
-          14 => Array [],
-          15 => Array [],
-          16 => Array [],
-          17 => Array [],
-          18 => Array [],
-          19 => Array [],
-          20 => Array [],
-          21 => Array [],
-          22 => Array [],
-          23 => Array [],
-          24 => Array [],
-          25 => Array [],
-          26 => Array [],
-          27 => Array [],
-          28 => Array [],
-          29 => Array [],
-          30 => Array [],
-        },
-        "nativeEvents": Array [],
-        "networkMeasures": Array [],
-        "otherUserTimingMarks": Array [],
-        "reactVersion": "0.0.0",
-        "schedulingEvents": Array [
-          Object {
-            "lanes": Array [
-              4,
-            ],
-            "timestamp": 0.003,
-            "type": "schedule-render",
-            "warning": null,
-          },
-          Object {
-            "componentName": "App",
-            "lanes": Array [
-              4,
+            "nativeEvents": Array [],
+            "networkMeasures": Array [],
+            "otherUserTimingMarks": Array [],
+            "reactVersion": "<filtered-version>",
+            "schedulingEvents": Array [
+              Object {
+                "lanes": "0b0000000000000000000000000000100",
+                "timestamp": 0.005,
+                "type": "schedule-render",
+                "warning": null,
+              },
+              Object {
+                "componentName": "App",
+                "lanes": "0b0000000000000000000000000000100",
+                "timestamp": 0.021,
+                "type": "schedule-state-update",
+                "warning": null,
+              },
             ],
-            "timestamp": 0.019,
-            "type": "schedule-state-update",
-            "warning": null,
-          },
-        ],
-        "snapshotHeight": 0,
-        "snapshots": Array [],
-        "startTime": 4,
-        "suspenseEvents": Array [],
-        "thrownErrors": Array [],
-      }
-    `);
-    });
-
-    it('should error if events and measures are incomplete', async () => {
-      const container = document.createElement('div');
-      utils.legacyRender(<div />, container);
-
-      const invalidMarks = clearedMarks.filter(
-        mark => !mark.includes('render-stop'),
-      );
-      const invalidUserTimingData = createUserTimingData(invalidMarks);
-
-      const error = spyOn(console, 'error');
-      preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
-      expect(error).toHaveBeenCalled();
-    });
+            "snapshotHeight": 0,
+            "snapshots": Array [],
+            "startTime": 4,
+            "suspenseEvents": Array [],
+            "thrownErrors": Array [],
+          }
+        `);
+      });
 
-    it('should error if work is completed without being started', async () => {
-      const container = document.createElement('div');
-      utils.legacyRender(<div />, container);
+      it('should error if events and measures are incomplete', async () => {
+        const container = document.createElement('div');
+        utils.legacyRender(<div />, container);
+
+        const invalidMarks = clearedMarks.filter(
+          mark => !mark.includes('render-stop'),
+        );
+        const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+        const error = spyOn(console, 'error');
+        preprocessData([
+          ...createBoilerplateEntries(),
+          ...invalidUserTimingData,
+        ]);
+        expect(error).toHaveBeenCalled();
+      });
 
-      const invalidMarks = clearedMarks.filter(
-        mark => !mark.includes('render-start'),
-      );
-      const invalidUserTimingData = createUserTimingData(invalidMarks);
+      it('should error if work is completed without being started', async () => {
+        const container = document.createElement('div');
+        utils.legacyRender(<div />, container);
+
+        const invalidMarks = clearedMarks.filter(
+          mark => !mark.includes('render-start'),
+        );
+        const invalidUserTimingData = createUserTimingData(invalidMarks);
+
+        const error = spyOn(console, 'error');
+        preprocessData([
+          ...createBoilerplateEntries(),
+          ...invalidUserTimingData,
+        ]);
+        expect(error).toHaveBeenCalled();
+      });
 
-      const error = spyOn(console, 'error');
-      preprocessData([...createBoilerplateEntries(), ...invalidUserTimingData]);
-      expect(error).toHaveBeenCalled();
-    });
+      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(`
+                Array [
+                  Object {
+                    "name": "VCWithoutImage: root",
+                    "timestamp": 0.003,
+                  },
+                  Object {
+                    "name": "--a-mark-that-looks-like-one-of-ours",
+                    "timestamp": 0.004,
+                  },
+                  Object {
+                    "name": "Some other mark",
+                    "timestamp": 0.005,
+                  },
+                ]
+          `);
+      });
 
-    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(`
-      Array [
-        Object {
-          "name": "VCWithoutImage: root",
-          "timestamp": 0.003,
-        },
-        Object {
-          "name": "--a-mark-that-looks-like-one-of-ours",
-          "timestamp": 0.004,
-        },
-        Object {
-          "name": "Some other mark",
-          "timestamp": 0.005,
-        },
-      ]
-    `);
-    });
+      it('should include a suspended resource "displayName" if one is set', async () => {
+        let promise = null;
+        let resolvedValue = null;
+        function readValue(value) {
+          if (resolvedValue !== null) {
+            return resolvedValue;
+          } else if (promise === null) {
+            promise = Promise.resolve(true).then(() => {
+              resolvedValue = value;
+            });
+            promise.displayName = 'Testing displayName';
+          }
+          throw promise;
+        }
 
-    it('should include a suspended resource "displayName" if one is set', async () => {
-      let promise = null;
-      let resolvedValue = null;
-      function readValue(value) {
-        if (resolvedValue !== null) {
-          return resolvedValue;
-        } else if (promise === null) {
-          promise = Promise.resolve(true).then(() => {
-            resolvedValue = value;
-          });
-          promise.displayName = 'Testing displayName';
+        function Component() {
+          const value = readValue(123);
+          return value;
         }
-        throw promise;
-      }
 
-      function Component() {
-        const value = readValue(123);
-        return value;
-      }
+        const testMarks = [creactCpuProfilerSample()];
 
-      const testMarks = [creactCpuProfilerSample()];
+        const root = ReactDOM.createRoot(document.createElement('div'));
+        utils.act(() =>
+          root.render(
+            <React.Suspense fallback="Loading...">
+              <Component />
+            </React.Suspense>,
+          ),
+        );
 
-      const root = ReactDOM.createRoot(document.createElement('div'));
-      utils.act(() =>
-        root.render(
-          <React.Suspense fallback="Loading...">
-            <Component />
-          </React.Suspense>,
-        ),
-      );
-
-      testMarks.push(...createUserTimingData(clearedMarks));
-
-      let data;
-      await utils.actAsync(async () => {
-        data = await preprocessData(testMarks);
+        testMarks.push(...createUserTimingData(clearedMarks));
+
+        let data;
+        await utils.actAsync(async () => {
+          data = await preprocessData(testMarks);
+        });
+        expect(data.suspenseEvents).toHaveLength(1);
+        expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
       });
-      expect(data.suspenseEvents).toHaveLength(1);
-      expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
-    });
 
-    describe('warnings', () => {
-      describe('long event handlers', () => {
-        it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
-          function App() {
-            return null;
-          }
+      describe('warnings', () => {
+        describe('long event handlers', () => {
+          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),
-          ];
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+              createNativeEventEntry('click', 5),
+            ];
 
-          clearPendingMarks();
+            clearPendingMarks();
 
-          utils.legacyRender(<App />, document.createElement('div'));
+            utils.legacyRender(<App />, document.createElement('div'));
 
-          testMarks.push(...createUserTimingData(clearedMarks));
+            testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = await preprocessData(testMarks);
-          const event = data.nativeEvents.find(({type}) => type === 'click');
-          expect(event.warning).toBe(null);
-        });
+            const data = await preprocessData(testMarks);
+            const event = data.nativeEvents.find(({type}) => type === 'click');
+            expect(event.warning).toBe(null);
+          });
 
-        it('should not warn about long events if the cause was non-React JavaScript', async () => {
-          function App() {
-            return null;
-          }
+          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),
-          ];
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+              createNativeEventEntry('click', 25000),
+            ];
 
-          startTime += 2000;
+            startTime += 2000;
 
-          clearPendingMarks();
+            clearPendingMarks();
 
-          utils.legacyRender(<App />, document.createElement('div'));
+            utils.legacyRender(<App />, document.createElement('div'));
 
-          testMarks.push(...createUserTimingData(clearedMarks));
+            testMarks.push(...createUserTimingData(clearedMarks));
 
-          const data = await preprocessData(testMarks);
-          const event = data.nativeEvents.find(({type}) => type === 'click');
-          expect(event.warning).toBe(null);
-        });
+            const data = await preprocessData(testMarks);
+            const event = data.nativeEvents.find(({type}) => type === 'click');
+            expect(event.warning).toBe(null);
+          });
 
-        it('should warn when React scedules a long (sync) update inside of an event', async () => {
-          function App() {
-            return null;
-          }
+          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),
-          ];
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+              createNativeEventEntry('click', 25000),
+            ];
 
-          clearPendingMarks();
+            clearPendingMarks();
 
-          utils.legacyRender(<App />, document.createElement('div'));
+            utils.legacyRender(<App />, document.createElement('div'));
 
-          clearedMarks.forEach(markName => {
-            if (markName === '--render-stop') {
-              // Fake a long running render
-              startTime += 20000;
-            }
+            clearedMarks.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',
+              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."`,
-          );
-        });
+            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."`,
+            );
+          });
 
-        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.unstable_yieldValue(`${id}:${value}`);
-            return null;
-          }
+          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.unstable_yieldValue(`${id}:${value}`);
+              return null;
+            }
 
-          const testMarks = [
-            creactCpuProfilerSample(),
-            ...createBoilerplateEntries(),
-          ];
-
-          // Advance the clock by some arbitrary amount.
-          startTime += 50000;
-
-          const root = ReactDOM.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} />
-              </>,
-            );
-            expect(Scheduler).toFlushAndYieldThrough(['A:1']);
+            const testMarks = [
+              creactCpuProfilerSample(),
+              ...createBoilerplateEntries(),
+            ];
 
-            testMarks.push(...createUserTimingData(clearedMarks));
-            clearPendingMarks();
+            // Advance the clock by some arbitrary amount.
+            startTime += 50000;
 
-            // Advance the clock some more to make the pending React update seem long.
-            startTime += 20000;
+            const root = ReactDOM.createRoot(document.createElement('div'));
 
-            // 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(() => {
+            // 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={2} />
-                  <Yield id="B" value={2} />
+                  <Yield id="A" value={1} />
+                  <Yield id="B" value={1} />
                 </>,
               );
-            });
-          });
-
-          expect(Scheduler).toHaveYielded(['A:2', 'B:2']);
+              expect(Scheduler).toFlushAndYieldThrough(['A:1']);
 
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          const data = await preprocessData(testMarks);
-          const event = data.nativeEvents.find(({type}) => type === 'click');
-          expect(event.warning).toBe(null);
-        });
-      });
+              testMarks.push(...createUserTimingData(clearedMarks));
+              clearPendingMarks();
 
-      describe('nested updates', () => {
-        it('should not warn about short nested (state) updates during layout effects', async () => {
-          function Component() {
-            const [didMount, setDidMount] = React.useState(false);
-            Scheduler.unstable_yieldValue(
-              `Component ${didMount ? 'update' : 'mount'}`,
-            );
-            React.useLayoutEffect(() => {
-              setDidMount(true);
-            }, []);
-            return didMount;
-          }
+              // Advance the clock some more to make the pending React update seem long.
+              startTime += 20000;
 
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() => {
-            root.render(<Component />);
-          });
+              // 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} />
+                  </>,
+                );
+              });
+            });
 
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
+            expect(Scheduler).toHaveYielded(['A:2', 'B:2']);
 
-          const data = await preprocessData([
-            ...createBoilerplateEntries(),
-            ...createUserTimingData(clearedMarks),
-          ]);
+            testMarks.push(...createUserTimingData(clearedMarks));
 
-          const event = data.schedulingEvents.find(
-            ({type}) => type === 'schedule-state-update',
-          );
-          expect(event.warning).toBe(null);
+            const data = await preprocessData(testMarks);
+            const event = data.nativeEvents.find(({type}) => type === 'click');
+            expect(event.warning).toBe(null);
+          });
         });
 
-        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() {
+        describe('nested updates', () => {
+          it('should not warn about short nested (state) updates during layout effects', async () => {
+            function Component() {
+              const [didMount, setDidMount] = React.useState(false);
               Scheduler.unstable_yieldValue(
-                `Component ${this._didMount ? 'update' : 'mount'}`,
+                `Component ${didMount ? 'update' : 'mount'}`,
               );
-              return null;
+              React.useLayoutEffect(() => {
+                setDidMount(true);
+              }, []);
+              return didMount;
             }
-          }
-
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() => {
-            root.render(<Component />);
-          });
 
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() => {
+              root.render(<Component />);
+            });
 
-          const data = await preprocessData([
-            ...createBoilerplateEntries(),
-            ...createUserTimingData(clearedMarks),
-          ]);
+            expect(Scheduler).toHaveYielded([
+              'Component mount',
+              'Component update',
+            ]);
 
-          const event = data.schedulingEvents.find(
-            ({type}) => type === 'schedule-force-update',
-          );
-          expect(event.warning).toBe(null);
-        });
+            const data = await preprocessData([
+              ...createBoilerplateEntries(),
+              ...createUserTimingData(clearedMarks),
+            ]);
 
-        it('should warn about long nested (state) updates during layout effects', async () => {
-          function Component() {
-            const [didMount, setDidMount] = React.useState(false);
-            Scheduler.unstable_yieldValue(
-              `Component ${didMount ? 'update' : 'mount'}`,
+            const event = data.schedulingEvents.find(
+              ({type}) => type === 'schedule-state-update',
             );
-            // Fake a long render
-            startTime += 20000;
-            React.useLayoutEffect(() => {
-              setDidMount(true);
-            }, []);
-            return didMount;
-          }
-
-          const cpuProfilerSample = creactCpuProfilerSample();
-
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() => {
-            root.render(<Component />);
+            expect(event.warning).toBe(null);
           });
 
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
-
-          const testMarks = [];
-          clearedMarks.forEach(markName => {
-            if (markName === '--component-render-start-Component') {
-              // Fake a long running render
-              startTime += 20000;
+          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.unstable_yieldValue(
+                  `Component ${this._didMount ? 'update' : 'mount'}`,
+                );
+                return null;
+              }
             }
 
-            testMarks.push({
-              pid: ++pid,
-              tid: ++tid,
-              ts: ++startTime,
-              args: {data: {}},
-              cat: 'blink.user_timing',
-              name: markName,
-              ph: 'R',
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() => {
+              root.render(<Component />);
             });
-          });
 
-          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)."`,
-          );
-        });
+            expect(Scheduler).toHaveYielded([
+              'Component mount',
+              'Component update',
+            ]);
 
-        it('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() {
+            const data = await preprocessData([
+              ...createBoilerplateEntries(),
+              ...createUserTimingData(clearedMarks),
+            ]);
+
+            const event = data.schedulingEvents.find(
+              ({type}) => type === 'schedule-force-update',
+            );
+            expect(event.warning).toBe(null);
+          });
+
+          it('should warn about long nested (state) updates during layout effects', async () => {
+            function Component() {
+              const [didMount, setDidMount] = React.useState(false);
               Scheduler.unstable_yieldValue(
-                `Component ${this._didMount ? 'update' : 'mount'}`,
+                `Component ${didMount ? 'update' : 'mount'}`,
               );
-              return null;
+              // Fake a long render
+              startTime += 20000;
+              React.useLayoutEffect(() => {
+                setDidMount(true);
+              }, []);
+              return didMount;
             }
-          }
 
-          const cpuProfilerSample = creactCpuProfilerSample();
+            const cpuProfilerSample = creactCpuProfilerSample();
 
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() => {
-            root.render(<Component />);
-          });
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() => {
+              root.render(<Component />);
+            });
 
-          expect(Scheduler).toHaveYielded([
-            'Component mount',
-            'Component update',
-          ]);
+            expect(Scheduler).toHaveYielded([
+              'Component mount',
+              'Component update',
+            ]);
 
-          const testMarks = [];
-          clearedMarks.forEach(markName => {
-            if (markName === '--component-render-start-Component') {
-              // Fake a long running render
-              startTime += 20000;
-            }
+            const testMarks = [];
+            clearedMarks.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',
+              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)."`,
-          );
-        });
-
-        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();
+            const data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
 
-            Scheduler.unstable_yieldValue(
-              `Component rendered with value ${value}`,
+            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)."`,
             );
+          });
 
-            // Fake a long render
-            if (value !== 0) {
-              Scheduler.unstable_yieldValue('Long render');
-              startTime += 20000;
+          it('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.unstable_yieldValue(
+                  `Component ${this._didMount ? 'update' : 'mount'}`,
+                );
+                return null;
+              }
             }
 
-            React.useLayoutEffect(() => {
-              startTransition(() => {
-                setValue(1);
-              });
-            }, []);
-
-            return value;
-          }
+            const cpuProfilerSample = creactCpuProfilerSample();
 
-          const cpuProfilerSample = creactCpuProfilerSample();
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() => {
+              root.render(<Component />);
+            });
 
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() => {
-            root.render(<Component />);
-          });
+            expect(Scheduler).toHaveYielded([
+              'Component mount',
+              'Component update',
+            ]);
 
-          expect(Scheduler).toHaveYielded([
-            'Component rendered with value 0',
-            'Component rendered with value 0',
-            'Component rendered with value 1',
-            'Long render',
-          ]);
-
-          const testMarks = [];
-          clearedMarks.forEach(markName => {
-            if (markName === '--component-render-start-Component') {
-              // Fake a long running render
-              startTime += 20000;
-            }
+            const testMarks = [];
+            clearedMarks.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',
+              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 data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
 
-          data.schedulingEvents.forEach(event => {
-            expect(event.warning).toBeNull();
+            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)."`,
+            );
           });
-        });
 
-        it('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);
+          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.unstable_yieldValue(
-              `Component rendered with value ${value} and deferredValue ${deferredValue}`,
-            );
+              Scheduler.unstable_yieldValue(
+                `Component rendered with value ${value}`,
+              );
 
-            // Fake a long render
-            if (deferredValue !== 0) {
-              Scheduler.unstable_yieldValue('Long render');
-              startTime += 20000;
+              // Fake a long render
+              if (value !== 0) {
+                Scheduler.unstable_yieldValue('Long render');
+                startTime += 20000;
+              }
+
+              React.useLayoutEffect(() => {
+                startTransition(() => {
+                  setValue(1);
+                });
+              }, []);
+
+              return value;
             }
 
-            React.useLayoutEffect(() => {
-              setValue(1);
-            }, []);
+            const cpuProfilerSample = creactCpuProfilerSample();
 
-            return value + deferredValue;
-          }
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            expect(Scheduler).toHaveYielded([
+              'Component rendered with value 0',
+              'Component rendered with value 0',
+              'Component rendered with value 1',
+              'Long render',
+            ]);
+
+            const testMarks = [];
+            clearedMarks.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 cpuProfilerSample = creactCpuProfilerSample();
+            const data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
 
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() => {
-            root.render(<Component />);
+            data.schedulingEvents.forEach(event => {
+              expect(event.warning).toBeNull();
+            });
           });
 
-          expect(Scheduler).toHaveYielded([
-            '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 = [];
-          clearedMarks.forEach(markName => {
-            if (markName === '--component-render-start-Component') {
-              // Fake a long running render
-              startTime += 20000;
+          it('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.unstable_yieldValue(
+                `Component rendered with value ${value} and deferredValue ${deferredValue}`,
+              );
+
+              // Fake a long render
+              if (deferredValue !== 0) {
+                Scheduler.unstable_yieldValue('Long render');
+                startTime += 20000;
+              }
+
+              React.useLayoutEffect(() => {
+                setValue(1);
+              }, []);
+
+              return value + deferredValue;
             }
 
-            testMarks.push({
-              pid: ++pid,
-              tid: ++tid,
-              ts: ++startTime,
-              args: {data: {}},
-              cat: 'blink.user_timing',
-              name: markName,
-              ph: 'R',
+            const cpuProfilerSample = creactCpuProfilerSample();
+
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() => {
+              root.render(<Component />);
+            });
+
+            expect(Scheduler).toHaveYielded([
+              '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 = [];
+            clearedMarks.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 data = await preprocessData([
+              cpuProfilerSample,
+              ...createBoilerplateEntries(),
+              ...testMarks,
+            ]);
 
-          data.schedulingEvents.forEach(event => {
-            expect(event.warning).toBeNull();
+            data.schedulingEvents.forEach(event => {
+              expect(event.warning).toBeNull();
+            });
           });
         });
-      });
 
-      describe('errors thrown while rendering', () => {
-        it('shoult parse Errors thrown during render', async () => {
-          spyOn(console, 'error');
+        describe('errors thrown while rendering', () => {
+          it('shoult parse Errors thrown during render', async () => {
+            spyOn(console, 'error');
 
-          class ErrorBoundary extends React.Component {
-            state = {error: null};
-            componentDidCatch(error) {
-              this.setState({error});
-            }
-            render() {
-              if (this.state.error) {
-                return null;
+            class ErrorBoundary extends React.Component {
+              state = {error: null};
+              componentDidCatch(error) {
+                this.setState({error});
+              }
+              render() {
+                if (this.state.error) {
+                  return null;
+                }
+                return this.props.children;
               }
-              return this.props.children;
             }
-          }
 
-          function ExampleThatThrows() {
-            throw Error('Expected error');
-          }
+            function ExampleThatThrows() {
+              throw Error('Expected error');
+            }
 
-          const testMarks = [creactCpuProfilerSample()];
-
-          // Mount and commit the app
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() =>
-            root.render(
-              <ErrorBoundary>
-                <ExampleThatThrows />
-              </ErrorBoundary>,
-            ),
-          );
-
-          testMarks.push(...createUserTimingData(clearedMarks));
-
-          const data = await preprocessData(testMarks);
-          expect(data.thrownErrors).toHaveLength(2);
-          expect(data.thrownErrors[0].message).toMatchInlineSnapshot(
-            '"Expected error"',
-          );
+            const testMarks = [creactCpuProfilerSample()];
+
+            // Mount and commit the app
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() =>
+              root.render(
+                <ErrorBoundary>
+                  <ExampleThatThrows />
+                </ErrorBoundary>,
+              ),
+            );
+
+            testMarks.push(...createUserTimingData(clearedMarks));
+
+            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 the a component suspends while profiling
-        // before the first commit is logged (so the lane-to-labels map will not yet exist).
-        it('should warn about suspending during an udpate', async () => {
-          let promise = null;
-          let resolvedValue = null;
-          function readValue(value) {
-            if (resolvedValue !== null) {
-              return resolvedValue;
-            } else if (promise === null) {
-              promise = Promise.resolve(true).then(() => {
-                resolvedValue = value;
-              });
+        describe('suspend during an update', () => {
+          // This also tests an edge case where the a component suspends while profiling
+          // before the first commit is logged (so the lane-to-labels map will not yet exist).
+          it('should warn about suspending during an udpate', async () => {
+            let promise = null;
+            let resolvedValue = null;
+            function readValue(value) {
+              if (resolvedValue !== null) {
+                return resolvedValue;
+              } else if (promise === null) {
+                promise = Promise.resolve(true).then(() => {
+                  resolvedValue = value;
+                });
+              }
+              throw promise;
             }
-            throw promise;
-          }
 
-          function Component({shouldSuspend}) {
-            Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
-            if (shouldSuspend) {
-              readValue(123);
+            function Component({shouldSuspend}) {
+              Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
+              if (shouldSuspend) {
+                readValue(123);
+              }
+              return null;
             }
-            return null;
-          }
 
-          // Mount and commit the app
-          const root = ReactDOM.createRoot(document.createElement('div'));
-          utils.act(() =>
-            root.render(
-              <React.Suspense fallback="Loading...">
-                <Component shouldSuspend={false} />
-              </React.Suspense>,
-            ),
-          );
-
-          clearPendingMarks();
-
-          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(clearedMarks));
-
-          let data;
-          await utils.actAsync(async () => {
-            data = await preprocessData(testMarks);
+            // Mount and commit the app
+            const root = ReactDOM.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(clearedMarks));
+
+            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."`,
+            );
           });
-          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."`,
-          );
-        });
 
-        it('should not warn about suspending during an transition', async () => {
-          let promise = null;
-          let resolvedValue = null;
-          function readValue(value) {
-            if (resolvedValue !== null) {
-              return resolvedValue;
-            } else if (promise === null) {
-              promise = Promise.resolve(true).then(() => {
-                resolvedValue = value;
-              });
+          it('should not warn about suspending during an transition', async () => {
+            let promise = null;
+            let resolvedValue = null;
+            function readValue(value) {
+              if (resolvedValue !== null) {
+                return resolvedValue;
+              } else if (promise === null) {
+                promise = Promise.resolve(true).then(() => {
+                  resolvedValue = value;
+                });
+              }
+              throw promise;
             }
-            throw promise;
-          }
 
-          function Component({shouldSuspend}) {
-            Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
-            if (shouldSuspend) {
-              readValue(123);
+            function Component({shouldSuspend}) {
+              Scheduler.unstable_yieldValue(`Component ${shouldSuspend}`);
+              if (shouldSuspend) {
+                readValue(123);
+              }
+              return null;
             }
-            return null;
-          }
 
-          // Mount and commit the app
-          const root = ReactDOM.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(() =>
+            // Mount and commit the app
+            const root = ReactDOM.createRoot(document.createElement('div'));
+            utils.act(() =>
               root.render(
                 <React.Suspense fallback="Loading...">
-                  <Component shouldSuspend={true} />
+                  <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(clearedMarks));
+            testMarks.push(...createUserTimingData(clearedMarks));
 
-          let data;
-          await utils.actAsync(async () => {
-            data = await preprocessData(testMarks);
+            let data;
+            await utils.actAsync(async () => {
+              data = await preprocessData(testMarks);
+            });
+            expect(data.suspenseEvents).toHaveLength(1);
+            expect(data.suspenseEvents[0].warning).toBe(null);
           });
-          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 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');
+      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;
+    });
+
+    it('should process a sample legacy render sequence', async () => {
+      utils.legacyRender(<div />, document.createElement('div'));
+      utils.act(() => store.profilerStore.stopProfiling());
+
+      const data = store.profilerStore.profilingData?.timelineData;
+      expect(data).toHaveLength(1);
+      const timelineData = data[0];
+      expect(timelineData).toMatchInlineSnapshot(`
+        Object {
+          "batchUIDToMeasuresMap": Map {
+            1 => Array [
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+            ],
+          },
+          "componentMeasures": Array [],
+          "duration": 20,
+          "flamechart": Array [],
+          "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 => Array [
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000000001",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+            ],
+            2 => Array [],
+            4 => Array [],
+            8 => Array [],
+            16 => Array [],
+            32 => Array [],
+            64 => Array [],
+            128 => Array [],
+            256 => Array [],
+            512 => Array [],
+            1024 => Array [],
+            2048 => Array [],
+            4096 => Array [],
+            8192 => Array [],
+            16384 => Array [],
+            32768 => Array [],
+            65536 => Array [],
+            131072 => Array [],
+            262144 => Array [],
+            524288 => Array [],
+            1048576 => Array [],
+            2097152 => Array [],
+            4194304 => Array [],
+            8388608 => Array [],
+            16777216 => Array [],
+            33554432 => Array [],
+            67108864 => Array [],
+            134217728 => Array [],
+            268435456 => Array [],
+            536870912 => Array [],
+            1073741824 => Array [],
+          },
+          "nativeEvents": Array [],
+          "networkMeasures": Array [],
+          "otherUserTimingMarks": Array [],
+          "reactVersion": "<filtered-version>",
+          "schedulingEvents": Array [
+            Object {
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+          ],
+          "snapshotHeight": 0,
+          "snapshots": Array [],
+          "startTime": -10,
+          "suspenseEvents": Array [],
+          "thrownErrors": Array [],
+        }
+      `);
     });
 
-    // TODO: Add test for snapshot base64 parsing
+    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;
+      }
 
-    // TODO: Add test for flamechart parsing
+      const root = ReactDOM.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];
+      expect(timelineData).toMatchInlineSnapshot(`
+        Object {
+          "batchUIDToMeasuresMap": Map {
+            1 => Array [
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+            2 => Array [
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+          },
+          "componentMeasures": Array [
+            Object {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "duration": 0,
+              "timestamp": 10,
+              "type": "passive-effect-mount",
+              "warning": null,
+            },
+          ],
+          "duration": 20,
+          "flamechart": Array [],
+          "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 => Array [],
+            2 => Array [],
+            4 => Array [],
+            8 => Array [],
+            16 => Array [
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 1,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render-idle",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "render",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "commit",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 1,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "layout-effects",
+              },
+              Object {
+                "batchUID": 2,
+                "depth": 0,
+                "duration": 0,
+                "lanes": "0b0000000000000000000000000010000",
+                "timestamp": 10,
+                "type": "passive-effects",
+              },
+            ],
+            32 => Array [],
+            64 => Array [],
+            128 => Array [],
+            256 => Array [],
+            512 => Array [],
+            1024 => Array [],
+            2048 => Array [],
+            4096 => Array [],
+            8192 => Array [],
+            16384 => Array [],
+            32768 => Array [],
+            65536 => Array [],
+            131072 => Array [],
+            262144 => Array [],
+            524288 => Array [],
+            1048576 => Array [],
+            2097152 => Array [],
+            4194304 => Array [],
+            8388608 => Array [],
+            16777216 => Array [],
+            33554432 => Array [],
+            67108864 => Array [],
+            134217728 => Array [],
+            268435456 => Array [],
+            536870912 => Array [],
+            1073741824 => Array [],
+          },
+          "nativeEvents": Array [],
+          "networkMeasures": Array [],
+          "otherUserTimingMarks": Array [],
+          "reactVersion": "<filtered-version>",
+          "schedulingEvents": Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "App",
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ],
+          "snapshotHeight": 0,
+          "snapshots": Array [],
+          "startTime": -10,
+          "suspenseEvents": Array [],
+          "thrownErrors": Array [],
+        }
+      `);
+    });
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 4cf491363262..ee7c65a15682 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -915,17 +915,17 @@ describe('Store', () => {
     const containerA = document.createElement('div');
     const containerB = document.createElement('div');
 
-    expect(store.supportsProfiling).toBe(false);
+    expect(store.rootSupportsBasicProfiling).toBe(false);
 
     act(() => legacyRender(<Component />, containerA));
-    expect(store.supportsProfiling).toBe(true);
+    expect(store.rootSupportsBasicProfiling).toBe(true);
 
     act(() => legacyRender(<Component />, containerB));
     act(() => ReactDOM.unmountComponentAtNode(containerA));
-    expect(store.supportsProfiling).toBe(true);
+    expect(store.rootSupportsBasicProfiling).toBe(true);
 
     act(() => ReactDOM.unmountComponentAtNode(containerB));
-    expect(store.supportsProfiling).toBe(false);
+    expect(store.rootSupportsBasicProfiling).toBe(false);
   });
 
   it('should properly serialize non-string key values', () => {
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 03228ea594a0..a1b4ecca6e64 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -227,6 +227,9 @@ export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
   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');
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 0a1896ee322c..f24b5bac85bb 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -387,7 +387,7 @@ export function attach(
       pushOperation(id);
       pushOperation(ElementTypeRoot);
       pushOperation(0); // StrictMode compliant?
-      pushOperation(0); // Profiling supported?
+      pushOperation(0); // Profiling flag
       pushOperation(0); // StrictMode supported?
       pushOperation(hasOwnerMetadata ? 1 : 0);
     } else {
diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js
index 2280d6156e68..c02d08ca9232 100644
--- a/packages/react-devtools-shared/src/backend/profilingHooks.js
+++ b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -14,9 +14,25 @@ import type {
 } from 'react-devtools-shared/src/backend/types';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {Wakeable} from 'shared/ReactTypes';
+import type {
+  BatchUID,
+  LaneToLabelMap,
+  ReactComponentMeasure,
+  ReactMeasure,
+  ReactMeasureType,
+  TimelineData,
+  SuspenseEvent,
+} from 'react-devtools-timeline/src/types';
 
 import isArray from 'shared/isArray';
-import {SCHEDULING_PROFILER_VERSION} from 'react-devtools-timeline/src/constants';
+import {
+  REACT_TOTAL_NUM_LANES,
+  SCHEDULING_PROFILER_VERSION,
+} from 'react-devtools-timeline/src/constants';
+
+// 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;
 
@@ -53,6 +69,12 @@ if (supportsUserTimingV3) {
   performanceTarget = performance;
 }
 
+// Some environments (e.g. React Native / Hermes) don't support the performance API yet.
+const getCurrentTime =
+  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(
@@ -63,25 +85,48 @@ export function setPerformanceMock_ONLY_FOR_TESTING(
   supportsUserTimingV3 = performanceMock !== null;
 }
 
-function markAndClear(markName) {
-  // 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);
-}
+export type GetTimelineData = () => TimelineData | null;
+export type ToggleProfilingStatus = (value: boolean) => void;
+
+type Response = {|
+  getTimelineData: GetTimelineData,
+  profilingHooks: DevToolsProfilingHooks,
+  toggleProfilingStatus: ToggleProfilingStatus,
+|};
 
 export function createProfilingHooks({
   getDisplayNameForFiber,
+  getIsProfiling,
   getLaneLabelMap,
   reactVersion,
 }: {|
   getDisplayNameForFiber: (fiber: Fiber) => string | null,
+  getIsProfiling: () => boolean,
   getLaneLabelMap?: () => Map<Lane, string> | null,
   reactVersion: string,
-|}): DevToolsProfilingHooks {
-  function markMetadata() {
-    markAndClear(`--react-version-${reactVersion}`);
-    markAndClear(`--profiler-version-${SCHEDULING_PROFILER_VERSION}`);
+|}): Response {
+  let currentBatchUID: BatchUID = 0;
+  let currentReactComponentMeasure: ReactComponentMeasure | null = null;
+  let currentReactMeasuresStack: Array<ReactMeasure> = [];
+  let currentTimelineData: TimelineData | null = null;
+  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' &&
@@ -89,122 +134,396 @@ export function createProfilingHooks({
         '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)) {
-        for (let i = 0; i < ranges.length; i++) {
-          const range = ranges[i];
-          if (isArray(range) && range.length === 2) {
-            const [startStackFrame, stopStackFrame] = ranges[i];
+        return ranges;
+      }
+    }
 
-            markAndClear(`--react-internal-module-start-${startStackFrame}`);
-            markAndClear(`--react-internal-module-stop-${stopStackFrame}`);
-          }
+    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 (typeof getLaneLabelMap === 'function') {
-      const map = getLaneLabelMap();
-      if (map != null) {
-        const labels = Array.from(map.values()).join(',');
-        markAndClear(`--react-lane-labels-${labels}`);
+    if (laneToLabelMap != null) {
+      const labels = Array.from(laneToLabelMap.values()).join(',');
+      markAndClear(`--react-lane-labels-${labels}`);
+    }
+  }
+
+  function markAndClear(markName) {
+    // 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();
+    if (top.type !== type) {
+      console.error(
+        'Unexpected type "%s" completed at %sms before "%s" completed.',
+        type,
+        currentTime,
+        top.type,
+      );
+    }
+
+    // $FlowFixMe This property should not be writable outside of this function.
+    top.duration = currentTime - top.timestamp;
+
+    if (currentTimelineData) {
+      currentTimelineData.duration = getRelativeTime() + TIME_OFFSET;
     }
   }
 
   function markCommitStarted(lanes: Lanes): void {
+    if (isProfiling) {
+      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}`);
 
-      // Certain types of metadata should be logged infrequently.
-      // Normally we would log this during module init,
-      // but there's no guarantee a user is profiling at that time.
-      // Commits happen infrequently (less than renders or state updates)
-      // so we log this extra information along with a commit.
-      // It will likely be logged more than once but that's okay.
-      //
-      // TODO (timeline) Only log this once, when profiling starts.
-      // For the first phase– refactoring– we'll match the previous behavior.
+      // 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) {
+      recordReactMeasureCompleted('commit');
+      recordReactMeasureCompleted('render-idle');
+    }
+
     if (supportsUserTimingV3) {
       markAndClear('--commit-stop');
     }
   }
 
   function markComponentRenderStarted(fiber: Fiber): void {
-    if (supportsUserTimingV3) {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--component-render-start-${componentName}`);
+
+      if (isProfiling) {
+        // TODO (timeline) Record and cache component stack
+        if (isProfiling) {
+          currentReactComponentMeasure = {
+            componentName,
+            duration: 0,
+            timestamp: getRelativeTime(),
+            type: 'render',
+            warning: null,
+          };
+        }
+      }
+
+      if (supportsUserTimingV3) {
+        markAndClear(`--component-render-start-${componentName}`);
+      }
     }
   }
 
   function markComponentRenderStopped(): void {
+    if (isProfiling) {
+      if (currentReactComponentMeasure) {
+        if (currentTimelineData) {
+          currentTimelineData.componentMeasures.push(
+            currentReactComponentMeasure,
+          );
+        }
+
+        currentReactComponentMeasure.duration =
+          getRelativeTime() - currentReactComponentMeasure.timestamp;
+        currentReactComponentMeasure = null;
+      }
+    }
+
     if (supportsUserTimingV3) {
       markAndClear('--component-render-stop');
     }
   }
 
-  function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
-    if (supportsUserTimingV3) {
+  function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--component-passive-effect-mount-start-${componentName}`);
+
+      if (isProfiling) {
+        // TODO (timeline) Record and cache component stack
+        if (isProfiling) {
+          currentReactComponentMeasure = {
+            componentName,
+            duration: 0,
+            timestamp: getRelativeTime(),
+            type: 'layout-effect-mount',
+            warning: null,
+          };
+        }
+      }
+
+      if (supportsUserTimingV3) {
+        markAndClear(`--component-layout-effect-mount-start-${componentName}`);
+      }
     }
   }
 
-  function markComponentPassiveEffectMountStopped(): void {
+  function markComponentLayoutEffectMountStopped(): void {
+    if (isProfiling) {
+      if (currentReactComponentMeasure) {
+        if (currentTimelineData) {
+          currentTimelineData.componentMeasures.push(
+            currentReactComponentMeasure,
+          );
+        }
+
+        currentReactComponentMeasure.duration =
+          getRelativeTime() - currentReactComponentMeasure.timestamp;
+        currentReactComponentMeasure = null;
+      }
+    }
+
     if (supportsUserTimingV3) {
-      markAndClear('--component-passive-effect-mount-stop');
+      markAndClear('--component-layout-effect-mount-stop');
     }
   }
 
-  function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
-    if (supportsUserTimingV3) {
+  function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--component-passive-effect-unmount-start-${componentName}`);
+
+      if (isProfiling) {
+        // TODO (timeline) Record and cache component stack
+        if (isProfiling) {
+          currentReactComponentMeasure = {
+            componentName,
+            duration: 0,
+            timestamp: getRelativeTime(),
+            type: 'layout-effect-unmount',
+            warning: null,
+          };
+        }
+      }
+
+      if (supportsUserTimingV3) {
+        markAndClear(
+          `--component-layout-effect-unmount-start-${componentName}`,
+        );
+      }
     }
   }
 
-  function markComponentPassiveEffectUnmountStopped(): void {
+  function markComponentLayoutEffectUnmountStopped(): void {
+    if (isProfiling) {
+      if (currentReactComponentMeasure) {
+        if (currentTimelineData) {
+          currentTimelineData.componentMeasures.push(
+            currentReactComponentMeasure,
+          );
+        }
+
+        currentReactComponentMeasure.duration =
+          getRelativeTime() - currentReactComponentMeasure.timestamp;
+        currentReactComponentMeasure = null;
+      }
+    }
+
     if (supportsUserTimingV3) {
-      markAndClear('--component-passive-effect-unmount-stop');
+      markAndClear('--component-layout-effect-unmount-stop');
     }
   }
 
-  function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
-    if (supportsUserTimingV3) {
+  function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--component-layout-effect-mount-start-${componentName}`);
+
+      if (isProfiling) {
+        // TODO (timeline) Record and cache component stack
+        if (isProfiling) {
+          currentReactComponentMeasure = {
+            componentName,
+            duration: 0,
+            timestamp: getRelativeTime(),
+            type: 'passive-effect-mount',
+            warning: null,
+          };
+        }
+      }
+
+      if (supportsUserTimingV3) {
+        markAndClear(`--component-passive-effect-mount-start-${componentName}`);
+      }
     }
   }
 
-  function markComponentLayoutEffectMountStopped(): void {
+  function markComponentPassiveEffectMountStopped(): void {
+    if (isProfiling) {
+      if (currentReactComponentMeasure) {
+        if (currentTimelineData) {
+          currentTimelineData.componentMeasures.push(
+            currentReactComponentMeasure,
+          );
+        }
+
+        currentReactComponentMeasure.duration =
+          getRelativeTime() - currentReactComponentMeasure.timestamp;
+        currentReactComponentMeasure = null;
+      }
+    }
+
     if (supportsUserTimingV3) {
-      markAndClear('--component-layout-effect-mount-stop');
+      markAndClear('--component-passive-effect-mount-stop');
     }
   }
 
-  function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
-    if (supportsUserTimingV3) {
+  function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--component-layout-effect-unmount-start-${componentName}`);
+
+      if (isProfiling) {
+        // TODO (timeline) Record and cache component stack
+        if (isProfiling) {
+          currentReactComponentMeasure = {
+            componentName,
+            duration: 0,
+            timestamp: getRelativeTime(),
+            type: 'passive-effect-unmount',
+            warning: null,
+          };
+        }
+      }
+
+      if (supportsUserTimingV3) {
+        markAndClear(
+          `--component-passive-effect-unmount-start-${componentName}`,
+        );
+      }
     }
   }
 
-  function markComponentLayoutEffectUnmountStopped(): void {
+  function markComponentPassiveEffectUnmountStopped(): void {
+    if (isProfiling) {
+      if (currentReactComponentMeasure) {
+        if (currentTimelineData) {
+          currentTimelineData.componentMeasures.push(
+            currentReactComponentMeasure,
+          );
+        }
+
+        currentReactComponentMeasure.duration =
+          getRelativeTime() - currentReactComponentMeasure.timestamp;
+        currentReactComponentMeasure = null;
+      }
+    }
+
     if (supportsUserTimingV3) {
-      markAndClear('--component-layout-effect-unmount-stop');
+      markAndClear('--component-passive-effect-unmount-stop');
     }
   }
 
@@ -213,7 +532,7 @@ export function createProfilingHooks({
     thrownValue: mixed,
     lanes: Lanes,
   ): void {
-    if (supportsUserTimingV3) {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
       const phase = fiber.alternate === null ? 'mount' : 'update';
 
@@ -228,8 +547,22 @@ export function createProfilingHooks({
         message = thrownValue;
       }
 
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--error-${componentName}-${phase}-${message}`);
+      if (isProfiling) {
+        // 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}`);
+      }
     }
   }
 
@@ -250,7 +583,7 @@ export function createProfilingHooks({
     wakeable: Wakeable,
     lanes: Lanes,
   ): void {
-    if (supportsUserTimingV3) {
+    if (isProfiling || supportsUserTimingV3) {
       const eventType = wakeableIDs.has(wakeable) ? 'resuspend' : 'suspend';
       const id = getWakeableID(wakeable);
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
@@ -262,105 +595,301 @@ export function createProfilingHooks({
       // When this is available we should pass it along to the Timeline.
       const displayName = (wakeable: any).displayName || '';
 
-      // TODO (timeline) Record and cache component stack
-      markAndClear(
-        `--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
-      );
+      let suspenseEvent: SuspenseEvent | null = null;
+      if (isProfiling) {
+        // 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(
-        () => markAndClear(`--suspense-resolved-${id}-${componentName}`),
-        () => markAndClear(`--suspense-rejected-${id}-${componentName}`),
+        () => {
+          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) {
+      recordReactMeasureStarted('layout-effects', lanes);
+    }
+
     if (supportsUserTimingV3) {
       markAndClear(`--layout-effects-start-${lanes}`);
     }
   }
 
   function markLayoutEffectsStopped(): void {
+    if (isProfiling) {
+      recordReactMeasureCompleted('layout-effects');
+    }
+
     if (supportsUserTimingV3) {
       markAndClear('--layout-effects-stop');
     }
   }
 
   function markPassiveEffectsStarted(lanes: Lanes): void {
+    if (isProfiling) {
+      recordReactMeasureStarted('passive-effects', lanes);
+    }
+
     if (supportsUserTimingV3) {
       markAndClear(`--passive-effects-start-${lanes}`);
     }
   }
 
   function markPassiveEffectsStopped(): void {
+    if (isProfiling) {
+      recordReactMeasureCompleted('passive-effects');
+    }
+
     if (supportsUserTimingV3) {
       markAndClear('--passive-effects-stop');
     }
   }
 
   function markRenderStarted(lanes: Lanes): void {
+    if (isProfiling) {
+      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) {
+      recordReactMeasureCompleted('render');
+    }
+
     if (supportsUserTimingV3) {
       markAndClear('--render-yield');
     }
   }
 
   function markRenderStopped(): void {
+    if (isProfiling) {
+      recordReactMeasureCompleted('render');
+    }
+
     if (supportsUserTimingV3) {
       markAndClear('--render-stop');
     }
   }
 
   function markRenderScheduled(lane: Lane): void {
+    if (isProfiling) {
+      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 (supportsUserTimingV3) {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--schedule-forced-update-${lane}-${componentName}`);
+
+      if (isProfiling) {
+        // 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 markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
-    if (supportsUserTimingV3) {
+    if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
-      // TODO (timeline) Record and cache component stack
-      markAndClear(`--schedule-state-update-${lane}-${componentName}`);
+
+      if (isProfiling) {
+        // TODO (timeline) Record and cache component stack
+        if (currentTimelineData) {
+          currentTimelineData.schedulingEvents.push({
+            componentName,
+            lanes: laneToLanesArray(lane),
+            timestamp: getRelativeTime(),
+            type: 'schedule-state-update',
+            warning: null,
+          });
+        }
+      }
+
+      if (supportsUserTimingV3) {
+        markAndClear(`--schedule-state-update-${lane}-${componentName}`);
+      }
+    }
+  }
+
+  function toggleProfilingStatus(value: boolean) {
+    if (isProfiling !== value) {
+      isProfiling = value;
+
+      if (isProfiling) {
+        const 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();
+        let lane = 1;
+        for (let index = 0; index < REACT_TOTAL_NUM_LANES; index++) {
+          laneToReactMeasureMap.set(lane, []);
+          lane *= 2;
+        }
+
+        currentBatchUID = 0;
+        currentReactComponentMeasure = null;
+        currentReactMeasuresStack = [];
+        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;
+      }
     }
   }
 
   return {
-    markCommitStarted,
-    markCommitStopped,
-    markComponentRenderStarted,
-    markComponentRenderStopped,
-    markComponentPassiveEffectMountStarted,
-    markComponentPassiveEffectMountStopped,
-    markComponentPassiveEffectUnmountStarted,
-    markComponentPassiveEffectUnmountStopped,
-    markComponentLayoutEffectMountStarted,
-    markComponentLayoutEffectMountStopped,
-    markComponentLayoutEffectUnmountStarted,
-    markComponentLayoutEffectUnmountStopped,
-    markComponentErrored,
-    markComponentSuspended,
-    markLayoutEffectsStarted,
-    markLayoutEffectsStopped,
-    markPassiveEffectsStarted,
-    markPassiveEffectsStopped,
-    markRenderStarted,
-    markRenderYielded,
-    markRenderStopped,
-    markRenderScheduled,
-    markForceUpdateScheduled,
-    markStateUpdateScheduled,
+    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/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 9a60fe42376a..61bf164dc459 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -47,6 +47,8 @@ import {
 } from './utils';
 import {
   __DEBUG__,
+  PROFILING_FLAG_BASIC_SUPPORT,
+  PROFILING_FLAG_TIMELINE_SUPPORT,
   SESSION_STORAGE_RELOAD_AND_PROFILE_KEY,
   SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
   TREE_OPERATION_ADD,
@@ -94,6 +96,7 @@ import hasOwnProperty from 'shared/hasOwnProperty';
 import {getStyleXData} from './StyleX/utils';
 import {createProfilingHooks} from './profilingHooks';
 
+import type {GetTimelineData, ToggleProfilingStatus} from './profilingHooks';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   ChangeDescription,
@@ -627,14 +630,22 @@ export function attach(
     };
   }
 
+  let getTimelineData: null | GetTimelineData = null;
+  let toggleProfilingStatus: null | ToggleProfilingStatus = null;
   if (typeof injectProfilingHooks === 'function') {
-    injectProfilingHooks(
-      createProfilingHooks({
-        getDisplayNameForFiber,
-        getLaneLabelMap,
-        reactVersion: version,
-      }),
-    );
+    const response = createProfilingHooks({
+      getDisplayNameForFiber,
+      getIsProfiling: () => isProfiling,
+      getLaneLabelMap,
+      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;
   }
 
   // Tracks Fibers with recently changed number of error/warning messages.
@@ -1910,12 +1921,22 @@ export function attach(
     const hasOwnerMetadata = fiber.hasOwnProperty('_debugOwner');
     const isProfilingSupported = fiber.hasOwnProperty('treeBaseDuration');
 
+    // 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 (isRoot) {
       pushOperation(TREE_OPERATION_ADD);
       pushOperation(id);
       pushOperation(ElementTypeRoot);
       pushOperation((fiber.mode & StrictModeBits) !== 0 ? 1 : 0);
-      pushOperation(isProfilingSupported ? 1 : 0);
+      pushOperation(profilingFlags);
       pushOperation(StrictModeBits !== 0 ? 1 : 0);
       pushOperation(hasOwnerMetadata ? 1 : 0);
 
@@ -3959,9 +3980,43 @@ export function attach(
       },
     );
 
+    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,
     };
   }
 
@@ -3999,11 +4054,19 @@ export function attach(
     isProfiling = true;
     profilingStartTime = getCurrentTime();
     rootToCommitProfilingMetadataMap = new Map();
+
+    if (toggleProfilingStatus !== null) {
+      toggleProfilingStatus(true);
+    }
   }
 
   function stopProfiling() {
     isProfiling = false;
     recordChangeDescriptions = false;
+
+    if (toggleProfilingStatus !== null) {
+      toggleProfilingStatus(false);
+    }
   }
 
   // Automatically start profiling so that we don't miss timing info from initial "mount".
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 99a86464236f..91a1a0c713cb 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -16,6 +16,7 @@ import type {
   Plugins,
 } from 'react-devtools-shared/src/types';
 import type {ResolveNativeStyle} from 'react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor';
+import type {TimelineDataExport} from 'react-devtools-timeline/src/types';
 
 type BundleType =
   | 0 // PROD
@@ -195,6 +196,7 @@ export type ProfilingDataForRootBackend = {|
 export type ProfilingDataBackend = {|
   dataForRoots: Array<ProfilingDataForRootBackend>,
   rendererID: number,
+  timelineData: TimelineDataExport | null,
 |};
 
 export type PathFrame = {|
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 6480222e1e41..d7fafc082ce2 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -25,6 +25,9 @@ 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 PROFILING_FLAG_BASIC_SUPPORT = 0b01;
+export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;
+
 export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
 
 export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index b68ea3d26f92..a2fda1825fca 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -10,6 +10,8 @@
 import EventEmitter from '../events';
 import {inspect} from 'util';
 import {
+  PROFILING_FLAG_BASIC_SUPPORT,
+  PROFILING_FLAG_TIMELINE_SUPPORT,
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
   TREE_OPERATION_REMOVE_ROOT,
@@ -72,9 +74,10 @@ type Config = {|
 |};
 
 export type Capabilities = {|
+  supportsBasicProfiling: boolean,
   hasOwnerMetadata: boolean,
-  supportsProfiling: boolean,
   supportsStrictMode: boolean,
+  supportsTimeline: boolean,
 |};
 
 /**
@@ -88,8 +91,9 @@ export default class Store extends EventEmitter<{|
   mutated: [[Array<number>, Map<number, number>]],
   recordChangeDescriptions: [],
   roots: [],
+  rootSupportsBasicProfiling: [],
+  rootSupportsTimelineProfiling: [],
   supportsNativeStyleEditor: [],
-  supportsProfiling: [],
   supportsReloadAndProfile: [],
   unsupportedBridgeProtocolDetected: [],
   unsupportedRendererVersionDetected: [],
@@ -161,13 +165,16 @@ export default class Store extends EventEmitter<{|
   _rootIDToRendererID: Map<number, number> = new Map();
 
   // These options may be initially set by a confiugraiton option when constructing the Store.
-  // In the case of "supportsProfiling", the option may be updated based on the injected renderers.
   _supportsNativeInspection: boolean = true;
   _supportsProfiling: boolean = false;
   _supportsReloadAndProfile: boolean = false;
   _supportsTimeline: boolean = false;
   _supportsTraceUpdates: boolean = false;
 
+  // These options default to false but may be updated as roots are added and removed.
+  _rootSupportsBasicProfiling: boolean = false;
+  _rootSupportsTimelineProfiling: boolean = false;
+
   _unsupportedBridgeProtocol: BridgeProtocol | null = null;
   _unsupportedRendererVersionDetected: boolean = false;
 
@@ -402,6 +409,16 @@ export default class Store extends EventEmitter<{|
     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;
+  }
+
   get supportsNativeInspection(): boolean {
     return this._supportsNativeInspection;
   }
@@ -410,6 +427,8 @@ export default class Store extends EventEmitter<{|
     return this._isNativeStyleEditorSupported;
   }
 
+  // This build of DevTools supports the legacy profiler.
+  // This is a static flag, controled by the Store config.
   get supportsProfiling(): boolean {
     return this._supportsProfiling;
   }
@@ -425,6 +444,8 @@ export default class Store extends EventEmitter<{|
     );
   }
 
+  // This build of DevTools supports the Timeline profiler.
+  // This is a static flag, controled by the Store config.
   get supportsTimeline(): boolean {
     return this._supportsTimeline;
   }
@@ -903,7 +924,10 @@ export default class Store extends EventEmitter<{|
             const isStrictModeCompliant = operations[i] > 0;
             i++;
 
-            const supportsProfiling = operations[i] > 0;
+            const supportsBasicProfiling =
+              (operations[i] & PROFILING_FLAG_BASIC_SUPPORT) !== 0;
+            const supportsTimeline =
+              (operations[i] & PROFILING_FLAG_TIMELINE_SUPPORT) !== 0;
             i++;
 
             const supportsStrictMode = operations[i] > 0;
@@ -915,9 +939,10 @@ export default class Store extends EventEmitter<{|
             this._roots = this._roots.concat(id);
             this._rootIDToRendererID.set(id, rendererID);
             this._rootIDToCapabilities.set(id, {
+              supportsBasicProfiling,
               hasOwnerMetadata,
-              supportsProfiling,
               supportsStrictMode,
+              supportsTimeline,
             });
 
             // Not all roots support StrictMode;
@@ -1224,25 +1249,38 @@ export default class Store extends EventEmitter<{|
     }
 
     if (haveRootsChanged) {
-      const prevSupportsProfiling = this._supportsProfiling;
+      const prevRootSupportsProfiling = this._rootSupportsBasicProfiling;
+      const prevRootSupportsTimelineProfiling = this
+        ._rootSupportsTimelineProfiling;
 
       this._hasOwnerMetadata = false;
-      this._supportsProfiling = false;
+      this._rootSupportsBasicProfiling = false;
+      this._rootSupportsTimelineProfiling = false;
       this._rootIDToCapabilities.forEach(
-        ({hasOwnerMetadata, supportsProfiling}) => {
+        ({supportsBasicProfiling, hasOwnerMetadata, supportsTimeline}) => {
+          if (supportsBasicProfiling) {
+            this._rootSupportsBasicProfiling = true;
+          }
           if (hasOwnerMetadata) {
             this._hasOwnerMetadata = true;
           }
-          if (supportsProfiling) {
-            this._supportsProfiling = true;
+          if (supportsTimeline) {
+            this._rootSupportsTimelineProfiling = true;
           }
         },
       );
 
       this.emit('roots');
 
-      if (this._supportsProfiling !== prevSupportsProfiling) {
-        this.emit('supportsProfiling');
+      if (this._rootSupportsBasicProfiling !== prevRootSupportsProfiling) {
+        this.emit('rootSupportsBasicProfiling');
+      }
+
+      if (
+        this._rootSupportsTimelineProfiling !==
+        prevRootSupportsTimelineProfiling
+      ) {
+        this.emit('rootSupportsTimelineProfiling');
       }
     }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index 8fbebfeba86d..3aecbb690e2b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -17,30 +17,27 @@ import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
-  const {didRecordCommits, isProfiling, selectedTabID} = useContext(
-    ProfilerContext,
-  );
+  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
   const {file, setFile} = useContext(TimelineContext);
   const {profilerStore} = store;
 
-  let doesHaveData = false;
-  if (selectedTabID === 'timeline') {
-    doesHaveData = file !== null;
-  } else {
-    doesHaveData = didRecordCommits;
-  }
+  const doesHaveInMemoryData = didRecordCommits;
+  const doesHaveUserTimingData = file !== null;
 
   const clear = () => {
-    if (selectedTabID === 'timeline') {
-      setFile(null);
-    } else {
+    if (doesHaveInMemoryData) {
       profilerStore.clear();
     }
+    if (doesHaveUserTimingData) {
+      setFile(null);
+    }
   };
 
   return (
     <Button
-      disabled={isProfiling || !doesHaveData}
+      disabled={
+        isProfiling || !(doesHaveInMemoryData || doesHaveUserTimingData)
+      }
       onClick={clear}
       title="Clear profiling data">
       <ButtonIcon type="clear" />
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 286048a172bf..537f226f2d69 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -194,7 +194,7 @@ function updateTree(
 
         if (type === ElementTypeRoot) {
           i++; // isStrictModeCompliant
-          i++; // supportsProfiling flag
+          i++; // Profiling flag
           i++; // supportsStrictMode flag
           i++; // hasOwnerMetadata flag
 
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 000000000000..231de1c1d5a1
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import RecordToggle from './RecordToggle';
+
+import styles from './Profiler.css';
+
+export default function NoProfilingData() {
+  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 000000000000..6827bc4407f5
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+
+import styles from './Profiler.css';
+
+export default function ProcessingData() {
+  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
index 45f3352cec6a..a317e3fcf429 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css
@@ -61,6 +61,12 @@
   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;
@@ -121,3 +127,9 @@
   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
index 8f5de6237e86..3b5ad02351aa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -22,6 +22,10 @@ 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';
@@ -44,7 +48,9 @@ function Profiler(_: {||}) {
     supportsProfiling,
   } = useContext(ProfilerContext);
 
-  const {searchInputContainerRef} = useContext(TimelineContext);
+  const {file: timelineTraceEventData, searchInputContainerRef} = useContext(
+    TimelineContext,
+  );
 
   const {supportsTimeline} = useContext(StoreContext);
 
@@ -69,6 +75,8 @@ function Profiler(_: {||}) {
     view = <RecordingInProgress />;
   } else if (isProcessingData) {
     view = <ProcessingData />;
+  } else if (timelineTraceEventData) {
+    view = <OnlyTimelineData />;
   } else if (supportsProfiling) {
     view = <NoProfilingData />;
   } else {
@@ -104,9 +112,7 @@ function Profiler(_: {||}) {
       <div className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
-            <RecordToggle
-              disabled={!supportsProfiling || selectedTabID === 'timeline'}
-            />
+            <RecordToggle disabled={!supportsProfiling} />
             <ReloadAndProfileButton
               disabled={selectedTabID === 'timeline' || !supportsProfiling}
             />
@@ -150,6 +156,15 @@ function Profiler(_: {||}) {
   );
 }
 
+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',
@@ -176,50 +191,4 @@ const tabsWithTimeline = [
   },
 ];
 
-const NoProfilingData = () => (
-  <div className={styles.Column}>
-    <div className={styles.Header}>No profiling data has been recorded.</div>
-    <div className={styles.Row}>
-      Click the record button <RecordToggle /> to start recording.
-    </div>
-  </div>
-);
-
-const ProfilingNotSupported = () => (
-  <div className={styles.Column}>
-    <div className={styles.Header}>Profiling not supported.</div>
-    <p className={styles.Paragraph}>
-      Profiling support requires either a development or production-profiling
-      build of React v16.5+.
-    </p>
-    <p className={styles.Paragraph}>
-      Learn more at{' '}
-      <a
-        className={styles.Link}
-        href="https://reactjs.org/link/profiling"
-        rel="noopener noreferrer"
-        target="_blank">
-        reactjs.org/link/profiling
-      </a>
-      .
-    </p>
-  </div>
-);
-
-const ProcessingData = () => (
-  <div className={styles.Column}>
-    <div className={styles.Header}>Processing data...</div>
-    <div className={styles.Row}>This should only take a minute.</div>
-  </div>
-);
-
-const RecordingInProgress = () => (
-  <div className={styles.Column}>
-    <div className={styles.Header}>Profiling is in progress...</div>
-    <div className={styles.Row}>
-      Click the record button <RecordToggle /> to stop recording.
-    </div>
-  </div>
-);
-
 export default portaledContent(Profiler);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 6e486091e141..be98e05372aa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -19,7 +19,6 @@ import {StoreContext} from '../context';
 
 import type {ProfilingDataFrontend} from './types';
 
-// TODO (timeline) Should this be its own context?
 export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
 
 export type Context = {|
@@ -96,18 +95,18 @@ function ProfilerContextController({children}: Props) {
         isProcessingData: profilerStore.isProcessingData,
         isProfiling: profilerStore.isProfiling,
         profilingData: profilerStore.profilingData,
-        supportsProfiling: store.supportsProfiling,
+        supportsProfiling: store.rootSupportsBasicProfiling,
       }),
       subscribe: (callback: Function) => {
         profilerStore.addListener('profilingData', callback);
         profilerStore.addListener('isProcessingData', callback);
         profilerStore.addListener('isProfiling', callback);
-        store.addListener('supportsProfiling', callback);
+        store.addListener('rootSupportsBasicProfiling', callback);
         return () => {
           profilerStore.removeListener('profilingData', callback);
           profilerStore.removeListener('isProcessingData', callback);
           profilerStore.removeListener('isProfiling', callback);
-          store.removeListener('supportsProfiling', callback);
+          store.removeListener('rootSupportsBasicProfiling', callback);
         };
       },
     }),
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index afa3b91f2a12..cf8a9a843847 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -20,15 +20,15 @@ import {
 } 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() {
-  const {isProfiling, profilingData, rootID, selectedTabID} = useContext(
-    ProfilerContext,
-  );
+  const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
   const {setFile} = useContext(TimelineContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
@@ -38,6 +38,8 @@ export default function ProfilingImportExportButtons() {
 
   const {dispatch: modalDialogDispatch} = useContext(ModalDialogContext);
 
+  const doesHaveInMemoryData = profilerStore.didRecordCommits;
+
   const downloadData = useCallback(() => {
     if (rootID === null) {
       return;
@@ -74,45 +76,54 @@ export default function ProfilingImportExportButtons() {
     }
   }, []);
 
-  const importProfilerData = useCallback(() => {
+  // 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', () => {
-        try {
-          const raw = ((fileReader.result: any): string);
-          const profilingDataExport = ((JSON.parse(
-            raw,
-          ): 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>
-            ),
-          });
+        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);
         }
       });
-      // TODO (profiling) Handle fileReader errors.
-      fileReader.readAsText(input.files[0]);
-    }
-  }, [modalDialogDispatch, profilerStore]);
-
-  const importTimelineDataWrapper = event => {
-    const input = inputRef.current;
-    if (input !== null && input.files.length > 0) {
-      const file = input.files[0];
-      setFile(file);
+      fileReader.readAsText(file);
     }
   };
 
@@ -124,11 +135,7 @@ export default function ProfilingImportExportButtons() {
         className={styles.Input}
         type="file"
         accept=".json"
-        onChange={
-          selectedTabID === 'timeline'
-            ? importTimelineDataWrapper
-            : importProfilerData
-        }
+        onChange={handleChange}
         tabIndex={-1}
       />
       <a ref={downloadRef} className={styles.Input} />
@@ -139,11 +146,7 @@ export default function ProfilingImportExportButtons() {
         <ButtonIcon type="import" />
       </Button>
       <Button
-        disabled={
-          isProfiling ||
-          !profilerStore.didRecordCommits ||
-          selectedTabID === 'timeline'
-        }
+        disabled={isProfiling || !doesHaveInMemoryData}
         onClick={downloadData}
         title="Save profile...">
         <ButtonIcon type="export" />
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 000000000000..4dcbe64cef06
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+
+import styles from './Profiler.css';
+
+export default function ProfilingNotSupported() {
+  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/RecordingInProgress.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
new file mode 100644
index 000000000000..dc91bb5c9cc4
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import RecordToggle from './RecordToggle';
+
+import styles from './Profiler.css';
+
+export default function RecordingInProgress() {
+  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/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index c3889d47c2b3..f495aa360d16 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -9,6 +9,10 @@
 
 import type {ElementType} from 'react-devtools-shared/src/types';
 import type {SerializedElement} from '../Components/types';
+import type {
+  TimelineData,
+  TimelineDataExport,
+} from 'react-devtools-timeline/src/types';
 
 export type CommitTreeNode = {|
   id: number,
@@ -103,8 +107,15 @@ export type ProfilingDataForRootFrontend = {|
 
 // Combination of profiling data collected by the renderer interface (backend) and Store (frontend).
 export type ProfilingDataFrontend = {|
-  // Profiling data per root.
+  // 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,
 |};
 
@@ -135,5 +146,11 @@ export type ProfilingDataForRootExport = {|
 // 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/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index 2594f255afa2..69134bf956d0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -18,6 +18,10 @@ import type {
   ProfilingDataFrontend,
   SnapshotNode,
 } from './types';
+import type {
+  TimelineData,
+  TimelineDataExport,
+} from 'react-devtools-timeline/src/types';
 
 const commitGradient = [
   'var(--color-commit-gradient-0)',
@@ -41,7 +45,31 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
 ): 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);
@@ -108,7 +136,7 @@ export function prepareProfilingDataFrontendFromBackendAndStore(
     );
   });
 
-  return {dataForRoots, imported: false};
+  return {dataForRoots, imported: false, timelineData: timelineDataArray};
 }
 
 // Converts a Profiling data export into the format required by the Store.
@@ -123,6 +151,50 @@ export function prepareProfilingDataFrontendFromExport(
     );
   }
 
+  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(
     ({
@@ -167,13 +239,65 @@ export function prepareProfilingDataFrontendFromExport(
     },
   );
 
-  return {dataForRoots, imported: true};
+  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(
     ({
@@ -225,6 +349,7 @@ export function prepareProfilingDataExport(
   return {
     version: PROFILER_EXPORT_VERSION,
     dataForRoots,
+    timelineData,
   };
 }
 
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 0b1257003d89..8ef42b1dd37d 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -10,7 +10,7 @@
 import type {Point} from './view-base';
 import type {
   ReactHoverContextInfo,
-  ReactProfilerData,
+  TimelineData,
   ReactMeasure,
   ViewState,
 } from './types';
@@ -69,7 +69,7 @@ import styles from './CanvasPage.css';
 const CONTEXT_MENU_ID = 'canvas';
 
 type Props = {|
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   viewState: ViewState,
 |};
 
@@ -92,7 +92,7 @@ function CanvasPage({profilerData, viewState}: Props) {
   );
 }
 
-const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {
+const copySummary = (data: TimelineData, measure: ReactMeasure) => {
   const {batchUID, duration, timestamp, type} = measure;
 
   const [startTime, stopTime] = getBatchRange(batchUID, data);
@@ -108,7 +108,7 @@ const copySummary = (data: ReactProfilerData, measure: ReactMeasure) => {
 };
 
 const zoomToBatch = (
-  data: ReactProfilerData,
+  data: TimelineData,
   measure: ReactMeasure,
   viewState: ViewState,
   width: number,
@@ -145,7 +145,7 @@ const EMPTY_CONTEXT_INFO: ReactHoverContextInfo = {
 };
 
 type AutoSizedCanvasProps = {|
-  data: ReactProfilerData,
+  data: TimelineData,
   height: number,
   viewState: ViewState,
   width: number,
@@ -295,14 +295,21 @@ function AutoSizedCanvas({
       );
     }
 
-    const nativeEventsView = new NativeEventsView(surface, defaultFrame, data);
-    nativeEventsViewRef.current = nativeEventsView;
-    const nativeEventsViewWrapper = createViewHelper(
-      nativeEventsView,
-      'events',
-      true,
-      true,
-    );
+    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) {
@@ -318,16 +325,19 @@ function AutoSizedCanvas({
       );
     }
 
-    const schedulingEventsView = new SchedulingEventsView(
-      surface,
-      defaultFrame,
-      data,
-    );
-    schedulingEventsViewRef.current = schedulingEventsView;
-    const schedulingEventsViewWrapper = createViewHelper(
-      schedulingEventsView,
-      'react updates',
-    );
+    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) {
@@ -401,20 +411,23 @@ function AutoSizedCanvas({
       );
     }
 
-    const flamechartView = new FlamechartView(
-      surface,
-      defaultFrame,
-      data.flamechart,
-      data.internalModuleSourceToRanges,
-      data.duration,
-    );
-    flamechartViewRef.current = flamechartView;
-    const flamechartViewWrapper = createViewHelper(
-      flamechartView,
-      'flamechart',
-      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.
@@ -429,15 +442,21 @@ function AutoSizedCanvas({
     if (userTimingMarksViewWrapper !== null) {
       rootView.addSubview(userTimingMarksViewWrapper);
     }
-    rootView.addSubview(nativeEventsViewWrapper);
-    rootView.addSubview(schedulingEventsViewWrapper);
+    if (nativeEventsViewWrapper !== null) {
+      rootView.addSubview(nativeEventsViewWrapper);
+    }
+    if (schedulingEventsViewWrapper !== null) {
+      rootView.addSubview(schedulingEventsViewWrapper);
+    }
     if (thrownErrorsViewWrapper !== null) {
       rootView.addSubview(thrownErrorsViewWrapper);
     }
     if (suspenseEventsViewWrapper !== null) {
       rootView.addSubview(suspenseEventsViewWrapper);
     }
-    rootView.addSubview(reactMeasuresViewWrapper);
+    if (reactMeasuresViewWrapper !== null) {
+      rootView.addSubview(reactMeasuresViewWrapper);
+    }
     if (componentMeasuresViewWrapper !== null) {
       rootView.addSubview(componentMeasuresViewWrapper);
     }
@@ -447,7 +466,9 @@ function AutoSizedCanvas({
     if (networkMeasuresViewWrapper !== null) {
       rootView.addSubview(networkMeasuresViewWrapper);
     }
-    rootView.addSubview(flamechartViewWrapper);
+    if (flamechartViewWrapper !== null) {
+      rootView.addSubview(flamechartViewWrapper);
+    }
 
     const verticalScrollOverflowView = new VerticalScrollOverflowView(
       surface,
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index 1cb4b3d8bbf2..b084e8821b82 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -15,7 +15,7 @@ import type {
   ReactComponentMeasure,
   ReactHoverContextInfo,
   ReactMeasure,
-  ReactProfilerData,
+  TimelineData,
   SchedulingEvent,
   Snapshot,
   SuspenseEvent,
@@ -33,7 +33,7 @@ const MAX_TOOLTIP_TEXT_LENGTH = 60;
 
 type Props = {|
   canvasRef: {|current: HTMLCanvasElement | null|},
-  data: ReactProfilerData,
+  data: TimelineData,
   height: number,
   hoveredEvent: ReactHoverContextInfo | null,
   origin: Point,
@@ -278,7 +278,7 @@ const TooltipSchedulingEvent = ({
   data,
   schedulingEvent,
 }: {|
-  data: ReactProfilerData,
+  data: TimelineData,
   schedulingEvent: SchedulingEvent,
 |}) => {
   const label = getSchedulingEventLabel(schedulingEvent);
@@ -433,7 +433,7 @@ const TooltipReactMeasure = ({
   data,
   measure,
 }: {|
-  data: ReactProfilerData,
+  data: TimelineData,
   measure: ReactMeasure,
 |}) => {
   const label = getReactMeasureLabel(measure.type);
diff --git a/packages/react-devtools-timeline/src/ImportButton.css b/packages/react-devtools-timeline/src/ImportButton.css
deleted file mode 100644
index e9054b774969..000000000000
--- a/packages/react-devtools-timeline/src/ImportButton.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * 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);
-}
diff --git a/packages/react-devtools-timeline/src/ImportButton.js b/packages/react-devtools-timeline/src/ImportButton.js
deleted file mode 100644
index 12eb6623fbe6..000000000000
--- a/packages/react-devtools-timeline/src/ImportButton.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-import {useCallback, useRef} from 'react';
-import Button from 'react-devtools-shared/src/devtools/views/Button';
-import ButtonIcon from 'react-devtools-shared/src/devtools/views/ButtonIcon';
-
-import styles from './ImportButton.css';
-
-type Props = {|
-  children?: mixed,
-  onFileSelect: (file: File) => void,
-|};
-
-export default function ImportButton({children = null, onFileSelect}: Props) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  const handleFiles = useCallback(() => {
-    const input = inputRef.current;
-    if (input === null) {
-      return;
-    }
-    if (input.files.length > 0) {
-      onFileSelect(input.files[0]);
-    }
-    // Reset input element to allow the same file to be re-imported
-    input.value = '';
-  }, [onFileSelect]);
-
-  const uploadData = useCallback(() => {
-    if (inputRef.current !== null) {
-      inputRef.current.click();
-    }
-  }, []);
-
-  return (
-    <>
-      <input
-        ref={inputRef}
-        className={styles.Input}
-        type="file"
-        accept=".json"
-        onChange={handleFiles}
-        tabIndex={-1}
-      />
-      <Button onClick={uploadData} title="Load profile...">
-        <ButtonIcon type="import" />
-        {children}
-      </Button>
-    </>
-  );
-}
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index 290830840356..bfd2a35f733e 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -9,7 +9,6 @@
 
 import type {ViewState} from './types';
 
-import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
 import * as React from 'react';
 import {
   Suspense,
@@ -20,18 +19,28 @@ import {
   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 ImportButton from './ImportButton';
 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(_: {||}) {
-  const {file, setFile, viewState} = useContext(TimelineContext);
+  const {
+    file,
+    inMemoryTimelineData,
+    isTimelineSupported,
+    setFile,
+    viewState,
+  } = useContext(TimelineContext);
+  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
 
   const ref = useRef(null);
 
@@ -60,66 +69,47 @@ export function Timeline(_: {||}) {
     };
   }, [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 />;
+  }
+
   return (
     <div className={styles.Content} ref={ref}>
-      {file ? (
-        <Suspense fallback={<ProcessingData />}>
-          <FileLoader
-            file={file}
-            key={key}
-            onFileSelect={setFile}
-            viewState={viewState}
-          />
-        </Suspense>
-      ) : (
-        <Welcome onFileSelect={setFile} />
-      )}
+      {content}
     </div>
   );
 }
 
-const Welcome = ({onFileSelect}: {|onFileSelect: (file: File) => void|}) => (
-  <ol className={styles.WelcomeInstructionsList}>
-    {isInternalFacebookBuild && (
-      <li className={styles.WelcomeInstructionsListItem}>
-        Enable the
-        <a
-          className={styles.WelcomeInstructionsListItemLink}
-          href="https://fburl.com/react-devtools-scheduling-profiler-gk"
-          rel="noopener noreferrer"
-          target="_blank">
-          <code>react_enable_scheduling_profiler</code> GK
-        </a>
-        .
-      </li>
-    )}
-    <li className={styles.WelcomeInstructionsListItem}>
-      Open a website that's built with the
-      <a
-        className={styles.WelcomeInstructionsListItemLink}
-        href="https://reactjs.org/link/profiling"
-        rel="noopener noreferrer"
-        target="_blank">
-        profiling build of ReactDOM
-      </a>
-      (version 18 or newer).
-    </li>
-    <li className={styles.WelcomeInstructionsListItem}>
-      Open the "Performance" tab in Chrome and record some performance data.
-    </li>
-    <li className={styles.WelcomeInstructionsListItem}>
-      Click the "Save profile..." button in Chrome to export the data.
-    </li>
-    <li className={styles.WelcomeInstructionsListItem}>
-      Import the data into the profiler:
-      <br />
-      <ImportButton onFileSelect={onFileSelect}>
-        <span className={styles.ImportButtonLabel}>Import</span>
-      </ImportButton>
-    </li>
-  </ol>
-);
-
 const ProcessingData = () => (
   <div className={styles.EmptyStateContainer}>
     <div className={styles.Header}>Processing data...</div>
@@ -136,9 +126,15 @@ const CouldNotLoadProfile = ({error, onFileSelect}) => (
       </div>
     )}
     <div className={styles.Row}>
-      Try importing
-      <ImportButton onFileSelect={onFileSelect} />
-      another Chrome performance profile.
+      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>
 );
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
index cbf57a275c0c..f024ec68dccf 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -8,10 +8,19 @@
  */
 
 import * as React from 'react';
-import {createContext, useMemo, useRef, useState} 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,
 } from './types';
@@ -19,6 +28,8 @@ import type {RefObject} from 'shared/ReactTypes';
 
 export type Context = {|
   file: File | null,
+  inMemoryTimelineData: Array<TimelineData> | null,
+  isTimelineSupported: boolean,
   searchInputContainerRef: RefObject,
   setFile: (file: File | null) => void,
   viewState: ViewState,
@@ -35,6 +46,34 @@ function TimelineContextController({children}: Props) {
   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 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();
@@ -85,11 +124,13 @@ function TimelineContextController({children}: Props) {
   const value = useMemo(
     () => ({
       file,
+      inMemoryTimelineData,
+      isTimelineSupported,
       searchInputContainerRef,
       setFile,
       viewState,
     }),
-    [file, setFile, viewState],
+    [file, inMemoryTimelineData, isTimelineSupported, setFile, viewState],
   );
 
   return (
diff --git a/packages/react-devtools-timeline/src/TimelineNotSupported.css b/packages/react-devtools-timeline/src/TimelineNotSupported.css
new file mode 100644
index 000000000000..971723520a45
--- /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 000000000000..9a21df8ab8cb
--- /dev/null
+++ b/packages/react-devtools-timeline/src/TimelineNotSupported.js
@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
+
+import styles from './TimelineNotSupported.css';
+
+export default function TimelineNotSupported() {
+  return (
+    <div className={styles.Column}>
+      <div className={styles.Header}>Timeline profiling not supported.</div>
+      <p className={styles.Paragraph}>
+        <span>
+          Timeline profiler requires a development or profiling build of{' '}
+          <code className={styles.Code}>react-dom@^18</code>.
+        </span>
+      </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>
+
+      {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
index 46d05710ac09..c545f83888e9 100644
--- a/packages/react-devtools-timeline/src/TimelineSearchContext.js
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -10,14 +10,10 @@
 import * as React from 'react';
 import {createContext, useMemo, useReducer} from 'react';
 
-import type {
-  ReactComponentMeasure,
-  ReactProfilerData,
-  ViewState,
-} from './types';
+import type {ReactComponentMeasure, TimelineData, ViewState} from './types';
 
 type State = {|
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   searchIndex: number,
   searchRegExp: RegExp | null,
   searchResults: Array<ReactComponentMeasure>,
@@ -116,7 +112,7 @@ function reducer(state: State, action: Action): State {
 }
 
 export type Context = {|
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
 
   // Search state
   dispatch: Dispatch,
@@ -131,7 +127,7 @@ TimelineSearchContext.displayName = 'TimelineSearchContext';
 
 type Props = {|
   children: React$Node,
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   viewState: ViewState,
 |};
 
diff --git a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
index 2194c79e87fc..c4fd41bdfa25 100644
--- a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
@@ -7,11 +7,7 @@
  * @flow
  */
 
-import type {
-  ReactComponentMeasure,
-  ReactProfilerData,
-  ViewState,
-} from '../types';
+import type {ReactComponentMeasure, TimelineData, ViewState} from '../types';
 import type {
   Interaction,
   IntrinsicSize,
@@ -44,7 +40,7 @@ export class ComponentMeasuresView extends View {
   _cachedSearchRegExp: RegExp | null = null;
   _hoveredComponentMeasure: ReactComponentMeasure | null = null;
   _intrinsicSize: IntrinsicSize;
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
   _viewState: ViewState;
 
   onHover: ((event: ReactComponentMeasure | null) => void) | null = null;
@@ -52,7 +48,7 @@ export class ComponentMeasuresView extends View {
   constructor(
     surface: Surface,
     frame: Rect,
-    profilerData: ReactProfilerData,
+    profilerData: TimelineData,
     viewState: ViewState,
   ) {
     super(surface, frame);
diff --git a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
index 29e2535de6ab..5db13dbc675e 100644
--- a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {NativeEvent, ReactProfilerData} from '../types';
+import type {NativeEvent, TimelineData} from '../types';
 import type {
   Interaction,
   IntrinsicSize,
@@ -40,11 +40,11 @@ export class NativeEventsView extends View {
   _hoveredEvent: NativeEvent | null = null;
   _intrinsicSize: IntrinsicSize;
   _maxDepth: number = 0;
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
 
   onHover: ((event: NativeEvent | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
     super(surface, frame);
 
     this._profilerData = profilerData;
diff --git a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
index 321bfcca1d5a..547af24bb26a 100644
--- a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {NetworkMeasure, ReactProfilerData} from '../types';
+import type {NetworkMeasure, TimelineData} from '../types';
 import type {
   Interaction,
   IntrinsicSize,
@@ -43,11 +43,11 @@ export class NetworkMeasuresView extends View {
   _hoveredNetworkMeasure: NetworkMeasure | null = null;
   _intrinsicSize: IntrinsicSize;
   _maxDepth: number = 0;
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
 
   onHover: ((event: NetworkMeasure | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
     super(surface, frame);
 
     this._profilerData = profilerData;
diff --git a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
index 87a377be1a1f..f46d435738d3 100644
--- a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactLane, ReactMeasure, ReactProfilerData} from '../types';
+import type {ReactLane, ReactMeasure, TimelineData} from '../types';
 import type {
   Interaction,
   IntrinsicSize,
@@ -33,7 +33,6 @@ import {
 } from '../view-base';
 
 import {COLORS, BORDER_SIZE, REACT_MEASURE_HEIGHT} from './constants';
-import {REACT_TOTAL_NUM_LANES} from '../constants';
 
 const REACT_LANE_HEIGHT = REACT_MEASURE_HEIGHT + BORDER_SIZE;
 const MAX_ROWS_TO_SHOW_INITIALLY = 5;
@@ -41,12 +40,12 @@ const MAX_ROWS_TO_SHOW_INITIALLY = 5;
 export class ReactMeasuresView extends View {
   _intrinsicSize: IntrinsicSize;
   _lanesToRender: ReactLane[];
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
   _hoveredMeasure: ReactMeasure | null = null;
 
   onHover: ((measure: ReactMeasure | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
     super(surface, frame);
     this._profilerData = profilerData;
     this._performPreflightComputations();
@@ -55,12 +54,11 @@ export class ReactMeasuresView extends View {
   _performPreflightComputations() {
     this._lanesToRender = [];
 
-    for (let lane: ReactLane = 0; lane < REACT_TOTAL_NUM_LANES; lane++) {
-      const measuresForLane = this._profilerData.laneToReactMeasureMap.get(
-        lane,
-      );
+    // 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 != null && measuresForLane.length > 0) {
+      if (measuresForLane.length > 0) {
         this._lanesToRender.push(lane);
       }
     }
diff --git a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
index 39921a727366..3798d261e0b1 100644
--- a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {SchedulingEvent, ReactProfilerData} from '../types';
+import type {SchedulingEvent, TimelineData} from '../types';
 import type {
   Interaction,
   MouseMoveInteraction,
@@ -40,13 +40,13 @@ const EVENT_ROW_HEIGHT_FIXED =
   TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;
 
 export class SchedulingEventsView extends View {
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
   _intrinsicSize: Size;
 
   _hoveredEvent: SchedulingEvent | null = null;
   onHover: ((event: SchedulingEvent | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
     super(surface, frame);
     this._profilerData = profilerData;
 
diff --git a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
index b027acae3769..eaaf44659ea3 100644
--- a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Snapshot, ReactProfilerData} from '../types';
+import type {Snapshot, TimelineData} from '../types';
 import type {
   Interaction,
   Point,
@@ -31,11 +31,11 @@ type OnHover = (node: Snapshot | null) => void;
 export class SnapshotsView extends View {
   _hoverLocation: Point | null = null;
   _intrinsicSize: Size;
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
 
   onHover: OnHover | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
     super(surface, frame);
 
     this._intrinsicSize = {
diff --git a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
index 58601d3590f5..370c8f763275 100644
--- a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {SuspenseEvent, ReactProfilerData} from '../types';
+import type {SuspenseEvent, TimelineData} from '../types';
 import type {
   Interaction,
   IntrinsicSize,
@@ -47,11 +47,11 @@ export class SuspenseEventsView extends View {
   _hoveredEvent: SuspenseEvent | null = null;
   _intrinsicSize: IntrinsicSize;
   _maxDepth: number = 0;
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
 
   onHover: ((event: SuspenseEvent | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
     super(surface, frame);
 
     this._profilerData = profilerData;
diff --git a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
index e1d084ee4093..d2a70e9524b1 100644
--- a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
+++ b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ThrownError, ReactProfilerData} from '../types';
+import type {ThrownError, TimelineData} from '../types';
 import type {
   Interaction,
   MouseMoveInteraction,
@@ -40,12 +40,12 @@ const EVENT_ROW_HEIGHT_FIXED =
   TOP_ROW_PADDING + REACT_EVENT_DIAMETER + TOP_ROW_PADDING;
 
 export class ThrownErrorsView extends View {
-  _profilerData: ReactProfilerData;
+  _profilerData: TimelineData;
   _intrinsicSize: Size;
   _hoveredEvent: ThrownError | null = null;
   onHover: ((event: ThrownError | null) => void) | null = null;
 
-  constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
+  constructor(surface: Surface, frame: Rect, profilerData: TimelineData) {
     super(surface, frame);
     this._profilerData = profilerData;
 
diff --git a/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js b/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
index 3c7e74326094..66ac1e3ff068 100644
--- a/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
+++ b/packages/react-devtools-timeline/src/createDataResourceFromImportedFile.js
@@ -11,17 +11,17 @@ 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 {ReactProfilerData} from './types';
+import type {TimelineData} from './types';
 import type {ImportWorkerOutputData} from './import-worker/index';
 
-export type DataResource = Resource<void, File, ReactProfilerData | Error>;
+export type DataResource = Resource<void, File, TimelineData | Error>;
 
 export default function createDataResourceFromImportedFile(
   file: File,
 ): DataResource {
   return createResource(
     () => {
-      return new Promise<ReactProfilerData | Error>((resolve, reject) => {
+      return new Promise<TimelineData | Error>((resolve, reject) => {
         const promise = ((importFile(
           file,
         ): any): Promise<ImportWorkerOutputData>);
diff --git a/packages/react-devtools-timeline/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js
index 3ce3a0ff93da..636a20ed5f7b 100644
--- a/packages/react-devtools-timeline/src/import-worker/index.js
+++ b/packages/react-devtools-timeline/src/import-worker/index.js
@@ -13,7 +13,7 @@
 import * as importFileModule from './importFile';
 import WorkerizedImportFile from './importFile.worker';
 
-import type {ReactProfilerData} from '../types';
+import type {TimelineData} from '../types';
 
 type ImportFileModule = typeof importFileModule;
 
@@ -22,7 +22,7 @@ const workerizedImportFile: ImportFileModule = window.Worker
   : importFileModule;
 
 export type ImportWorkerOutputData =
-  | {|status: 'SUCCESS', processedData: ReactProfilerData|}
+  | {|status: 'SUCCESS', processedData: TimelineData|}
   | {|status: 'INVALID_PROFILE_ERROR', error: Error|}
   | {|status: 'UNEXPECTED_ERROR', error: Error|};
 
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
index 98e802793f6a..258eef931a38 100644
--- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -25,7 +25,7 @@ import type {
   ReactComponentMeasureType,
   ReactMeasure,
   ReactMeasureType,
-  ReactProfilerData,
+  TimelineData,
   SchedulingEvent,
   SuspenseEvent,
 } from '../types';
@@ -105,7 +105,7 @@ export function getLanesFromTransportDecimalBitmask(
 }
 
 function updateLaneToLabelMap(
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   laneLabelTuplesString: string,
 ): void {
   // These marks appear multiple times in the data;
@@ -143,7 +143,7 @@ function markWorkStarted(
   type: ReactMeasureType,
   startTime: Milliseconds,
   lanes: ReactLane[],
-  currentProfilerData: ReactProfilerData,
+  currentProfilerData: TimelineData,
   state: ProcessorState,
 ) {
   const {batchUID, measureStack} = state;
@@ -179,7 +179,7 @@ function markWorkStarted(
 function markWorkCompleted(
   type: ReactMeasureType,
   stopTime: Milliseconds,
-  currentProfilerData: ReactProfilerData,
+  currentProfilerData: TimelineData,
   stack: $PropertyType<ProcessorState, 'measureStack'>,
 ) {
   if (stack.length === 0) {
@@ -229,7 +229,7 @@ function throwIfIncomplete(
 function processEventDispatch(
   event: TimelineEvent,
   timestamp: Milliseconds,
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   state: ProcessorState,
 ) {
   const data = event.args.data;
@@ -292,7 +292,7 @@ function processEventDispatch(
 function processResourceFinish(
   event: TimelineEvent,
   timestamp: Milliseconds,
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   state: ProcessorState,
 ) {
   const requestId = event.args.data.requestId;
@@ -314,7 +314,7 @@ function processResourceFinish(
 function processResourceReceivedData(
   event: TimelineEvent,
   timestamp: Milliseconds,
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   state: ProcessorState,
 ) {
   const requestId = event.args.data.requestId;
@@ -331,7 +331,7 @@ function processResourceReceivedData(
 function processResourceReceiveResponse(
   event: TimelineEvent,
   timestamp: Milliseconds,
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   state: ProcessorState,
 ) {
   const requestId = event.args.data.requestId;
@@ -344,7 +344,7 @@ function processResourceReceiveResponse(
 function processScreenshot(
   event: TimelineEvent,
   timestamp: Milliseconds,
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   state: ProcessorState,
 ) {
   const encodedSnapshot = event.args.snapshot; // Base 64 encoded
@@ -385,7 +385,7 @@ function processScreenshot(
 function processResourceSendRequest(
   event: TimelineEvent,
   timestamp: Milliseconds,
-  profilerData: ReactProfilerData,
+  profilerData: TimelineData,
   state: ProcessorState,
 ) {
   const data = event.args.data;
@@ -428,7 +428,7 @@ function processResourceSendRequest(
 function processTimelineEvent(
   event: TimelineEvent,
   /** Finalized profiler data up to `event`. May be mutated. */
-  currentProfilerData: ReactProfilerData,
+  currentProfilerData: TimelineData,
   /** Intermediate processor state. May be mutated. */
   state: ProcessorState,
 ) {
@@ -551,10 +551,7 @@ function processTimelineEvent(
           timestamp: startTime,
           type: 'thrown-error',
         });
-      } // eslint-disable-line brace-style
-
-      // React Events - suspense
-      else if (name.startsWith('--suspense-suspend-')) {
+      } else if (name.startsWith('--suspense-suspend-')) {
         const [
           id,
           componentName,
@@ -592,7 +589,6 @@ function processTimelineEvent(
           phase: ((phase: any): Phase),
           promiseName: promiseName || null,
           resolution: 'unresolved',
-          resuspendTimestamps: null,
           timestamp: startTime,
           type: 'suspense',
           warning: null,
@@ -611,16 +607,6 @@ function processTimelineEvent(
 
         currentProfilerData.suspenseEvents.push(suspenseEvent);
         state.unresolvedSuspenseEvents.set(id, suspenseEvent);
-      } else if (name.startsWith('--suspense-resuspend-')) {
-        const [id] = name.substr(21).split('-');
-        const suspenseEvent = state.unresolvedSuspenseEvents.get(id);
-        if (suspenseEvent != null) {
-          if (suspenseEvent.resuspendTimestamps === null) {
-            suspenseEvent.resuspendTimestamps = [startTime];
-          } else {
-            suspenseEvent.resuspendTimestamps.push(startTime);
-          }
-        }
       } else if (name.startsWith('--suspense-resolved-')) {
         const [id] = name.substr(20).split('-');
         const suspenseEvent = state.unresolvedSuspenseEvents.get(id);
@@ -639,10 +625,7 @@ function processTimelineEvent(
           suspenseEvent.duration = startTime - suspenseEvent.timestamp;
           suspenseEvent.resolution = 'rejected';
         }
-      } // eslint-disable-line brace-style
-
-      // React Measures - render
-      else if (name.startsWith('--render-start-')) {
+      } else if (name.startsWith('--render-start-')) {
         if (state.nextRenderShouldGenerateNewBatchID) {
           state.nextRenderShouldGenerateNewBatchID = false;
           state.batchUID = ((state.uidCounter++: any): BatchUID);
@@ -701,24 +684,7 @@ function processTimelineEvent(
           currentProfilerData,
           state.measureStack,
         );
-      } else if (name.startsWith('--render-cancel')) {
-        state.nextRenderShouldGenerateNewBatchID = true;
-        markWorkCompleted(
-          'render',
-          startTime,
-          currentProfilerData,
-          state.measureStack,
-        );
-        markWorkCompleted(
-          'render-idle',
-          startTime,
-          currentProfilerData,
-          state.measureStack,
-        );
-      } // eslint-disable-line brace-style
-
-      // React Measures - commits
-      else if (name.startsWith('--commit-start-')) {
+      } else if (name.startsWith('--commit-start-')) {
         state.nextRenderShouldGenerateNewBatchID = true;
         const [laneBitmaskString] = name.substr(15).split('-');
 
@@ -742,10 +708,7 @@ function processTimelineEvent(
           currentProfilerData,
           state.measureStack,
         );
-      } // eslint-disable-line brace-style
-
-      // React Measures - layout effects
-      else if (name.startsWith('--layout-effects-start-')) {
+      } else if (name.startsWith('--layout-effects-start-')) {
         const [laneBitmaskString] = name.substr(23).split('-');
 
         markWorkStarted(
@@ -762,10 +725,7 @@ function processTimelineEvent(
           currentProfilerData,
           state.measureStack,
         );
-      } // eslint-disable-line brace-style
-
-      // React Measures - passive effects
-      else if (name.startsWith('--passive-effects-start-')) {
+      } else if (name.startsWith('--passive-effects-start-')) {
         const [laneBitmaskString] = name.substr(24).split('-');
 
         markWorkStarted(
@@ -782,10 +742,7 @@ function processTimelineEvent(
           currentProfilerData,
           state.measureStack,
         );
-      } // eslint-disable-line brace-style
-
-      // Internal module ranges
-      else if (name.startsWith('--react-internal-module-start-')) {
+      } else if (name.startsWith('--react-internal-module-start-')) {
         const stackFrameStart = name.substr(30);
 
         if (!state.internalModuleStackStringSet.has(stackFrameStart)) {
@@ -796,7 +753,7 @@ function processTimelineEvent(
           state.internalModuleCurrentStackFrame = parsedStackFrameStart;
         }
       } else if (name.startsWith('--react-internal-module-stop-')) {
-        const stackFrameStop = name.substr(19);
+        const stackFrameStop = name.substr(29);
 
         if (!state.internalModuleStackStringSet.has(stackFrameStop)) {
           state.internalModuleStackStringSet.add(stackFrameStop);
@@ -825,10 +782,7 @@ function processTimelineEvent(
             }
           }
         }
-      } // eslint-disable-line brace-style
-
-      // Other user timing marks/measures
-      else if (ph === 'R' || ph === 'n') {
+      } else if (ph === 'R' || ph === 'n') {
         // User Timing mark
         currentProfilerData.otherUserTimingMarks.push({
           name,
@@ -841,10 +795,7 @@ function processTimelineEvent(
       } else if (ph === 'i' || ph === 'I') {
         // Instant events.
         // Note that the capital "I" is a deprecated value that exists in Chrome Canary traces.
-      } // eslint-disable-line brace-style
-
-      // Unrecognized event
-      else {
+      } else {
         throw new InvalidProfileError(
           `Unrecognized event ${JSON.stringify(
             event,
@@ -882,7 +833,7 @@ function assertCurrentComponentMeasureType(
 function processReactComponentMeasure(
   name: string,
   startTime: Milliseconds,
-  currentProfilerData: ReactProfilerData,
+  currentProfilerData: TimelineData,
   state: ProcessorState,
 ): void {
   if (name.startsWith('--component-render-start-')) {
@@ -1048,7 +999,7 @@ function parseStackFrame(stackFrame: string): ErrorStackFrame | null {
 
 export default async function preprocessData(
   timeline: TimelineEvent[],
-): Promise<ReactProfilerData> {
+): Promise<TimelineData> {
   const flamechart = preprocessFlamechart(timeline);
 
   const laneToReactMeasureMap = new Map();
@@ -1056,7 +1007,7 @@ export default async function preprocessData(
     laneToReactMeasureMap.set(lane, []);
   }
 
-  const profilerData: ReactProfilerData = {
+  const profilerData: TimelineData = {
     batchUIDToMeasuresMap: new Map(),
     componentMeasures: [],
     duration: 0,
diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js
index 4e0948a48193..0616f7000864 100644
--- a/packages/react-devtools-timeline/src/timelineCache.js
+++ b/packages/react-devtools-timeline/src/timelineCache.js
@@ -8,7 +8,7 @@
  */
 
 import type {Wakeable} from 'shared/ReactTypes';
-import type {ReactProfilerData} from './types';
+import type {TimelineData} from './types';
 
 import {importFile as importFileWorker} from './import-worker';
 
@@ -36,10 +36,7 @@ type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 // 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,
-  Record<ReactProfilerData>,
-> = new Map();
+const fileNameToProfilerDataMap: Map<string, Record<TimelineData>> = new Map();
 
 function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
   if (record.status === Resolved) {
@@ -53,7 +50,7 @@ function readRecord<T>(record: Record<T>): ResolvedRecord<T> | RejectedRecord {
   }
 }
 
-export function importFile(file: File): ReactProfilerData | Error {
+export function importFile(file: File): TimelineData | Error {
   const fileName = file.name;
   let record = fileNameToProfilerDataMap.get(fileName);
 
@@ -74,7 +71,7 @@ export function importFile(file: File): ReactProfilerData | Error {
       callbacks.clear();
     };
 
-    const newRecord: Record<ReactProfilerData> = (record = {
+    const newRecord: Record<TimelineData> = (record = {
       status: Pending,
       value: wakeable,
     });
@@ -82,7 +79,7 @@ export function importFile(file: File): ReactProfilerData | Error {
     importFileWorker(file).then(data => {
       switch (data.status) {
         case 'SUCCESS':
-          const resolvedRecord = ((newRecord: any): ResolvedRecord<ReactProfilerData>);
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<TimelineData>);
           resolvedRecord.status = Resolved;
           resolvedRecord.value = data.processedData;
           break;
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index 3e9867c8b8c6..9469523a1e2c 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -68,7 +68,6 @@ export type SuspenseEvent = {|
   +phase: Phase | null,
   promiseName: string | null,
   resolution: 'rejected' | 'resolved' | 'unresolved',
-  resuspendTimestamps: Array<number> | null,
   +type: 'suspense',
 |};
 
@@ -196,13 +195,15 @@ export type InternalModuleSourceToRanges = Map<
   Array<[ErrorStackFrame, ErrorStackFrame]>,
 >;
 
-export type ReactProfilerData = {|
+export type LaneToLabelMap = Map<ReactLane, string>;
+
+export type TimelineData = {|
   batchUIDToMeasuresMap: Map<BatchUID, ReactMeasure[]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
   flamechart: Flamechart,
   internalModuleSourceToRanges: InternalModuleSourceToRanges,
-  laneToLabelMap: Map<ReactLane, string>,
+  laneToLabelMap: LaneToLabelMap,
   laneToReactMeasureMap: Map<ReactLane, ReactMeasure[]>,
   nativeEvents: NativeEvent[],
   networkMeasures: NetworkMeasure[],
@@ -216,6 +217,28 @@ export type ReactProfilerData = {|
   thrownErrors: ThrownError[],
 |};
 
+export type TimelineDataExport = {|
+  batchUIDToMeasuresKeyValueArray: Array<[BatchUID, ReactMeasure[]]>,
+  componentMeasures: ReactComponentMeasure[],
+  duration: number,
+  flamechart: Flamechart,
+  internalModuleSourceToRanges: Array<
+    [string, 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 ReactHoverContextInfo = {|
   componentMeasure: ReactComponentMeasure | null,
   flamechartStackFrame: FlamechartStackFrame | null,
diff --git a/packages/react-devtools-timeline/src/utils/getBatchRange.js b/packages/react-devtools-timeline/src/utils/getBatchRange.js
index 840a105f8d68..8dd425d263e0 100644
--- a/packages/react-devtools-timeline/src/utils/getBatchRange.js
+++ b/packages/react-devtools-timeline/src/utils/getBatchRange.js
@@ -13,12 +13,12 @@ import type {
   BatchUID,
   Milliseconds,
   ReactMeasure,
-  ReactProfilerData,
+  TimelineData,
 } from '../types';
 
 function unmemoizedGetBatchRange(
   batchUID: BatchUID,
-  data: ReactProfilerData,
+  data: TimelineData,
   minStartTime?: number = 0,
 ): [Milliseconds, Milliseconds] {
   const measures = data.batchUIDToMeasuresMap.get(batchUID);
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 276d20905474..7f0688c272eb 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -70,9 +70,15 @@ module.exports = Object.assign({}, baseConfig, {
     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'
     ),

From 3f5ff16c1a743bce3f3d772dc5ac63c5fd2dac0a Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 1 Feb 2022 14:52:01 -0500
Subject: [PATCH 1119/1603] [Hydration] Fallback to client render if server
 rendered extra nodes (#23176)

* rename

* rename

* replace-fork

* rename

* warn in a loop
---
 ...DOMServerPartialHydration-test.internal.js | 121 +++++++++++++++++-
 .../src/ReactFiberCompleteWork.new.js         |  22 +++-
 .../src/ReactFiberCompleteWork.old.js         |  22 +++-
 .../src/ReactFiberHydrationContext.new.js     |  57 +++++++--
 .../src/ReactFiberHydrationContext.old.js     |  57 +++++++--
 5 files changed, 253 insertions(+), 26 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 1c65501f7b38..8f2913c15d60 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -437,7 +437,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.innerHTML).toContain('<div>Sibling</div>');
   });
 
-  it('recovers when server rendered additional nodes', async () => {
+  it('recovers with client render when server rendered additional nodes at suspense root', async () => {
     const ref = React.createRef();
     function App({hasB}) {
       return (
@@ -462,15 +462,128 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.innerHTML).toContain('<span>B</span>');
     expect(ref.current).toBe(null);
 
-    ReactDOM.hydrateRoot(container, <App hasB={false} />);
     expect(() => {
-      Scheduler.unstable_flushAll();
+      act(() => {
+        ReactDOM.hydrateRoot(container, <App hasB={false} />);
+      });
     }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+
     jest.runAllTimers();
 
     expect(container.innerHTML).toContain('<span>A</span>');
     expect(container.innerHTML).not.toContain('<span>B</span>');
-    expect(ref.current).toBe(span);
+
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(ref.current).not.toBe(span);
+    } else {
+      expect(ref.current).toBe(span);
+    }
+  });
+
+  it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
+    spyOnDev(console, 'error');
+    const ref = React.createRef();
+    function App({hasB}) {
+      return (
+        <div>
+          <Suspense fallback="Loading...">
+            <Suspender />
+            <span ref={ref}>A</span>
+            {hasB ? <span>B</span> : null}
+          </Suspense>
+          <div>Sibling</div>
+        </div>
+      );
+    }
+
+    let shouldSuspend = false;
+    let resolve;
+    const promise = new Promise(res => {
+      resolve = () => {
+        shouldSuspend = false;
+        res();
+      };
+    });
+    function Suspender() {
+      if (shouldSuspend) {
+        throw promise;
+      }
+      return <></>;
+    }
+
+    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;
+    act(() => {
+      ReactDOM.hydrateRoot(container, <App hasB={false} />);
+    });
+
+    // await expect(async () => {
+    resolve();
+    await promise;
+    Scheduler.unstable_flushAll();
+    await null;
+    jest.runAllTimers();
+    // }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(ref.current).not.toBe(span);
+    } else {
+      expect(ref.current).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);
+
+    expect(() => {
+      act(() => {
+        ReactDOM.hydrateRoot(container, <App hasB={false} />);
+      });
+    }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+
+    expect(container.innerHTML).toContain('<span>A</span>');
+    expect(container.innerHTML).not.toContain('<span>B</span>');
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(ref.current).not.toBe(span);
+    } else {
+      expect(ref.current).toBe(span);
+    }
   });
 
   it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 91c564dd465b..e8ec41d9d81f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -29,7 +29,10 @@ import type {
 import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
+import {
+  enableClientRenderFallbackOnHydrationMismatch,
+  enableSuspenseAvoidThisFallback,
+} from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 
@@ -74,6 +77,9 @@ import {
   StaticMask,
   MutationMask,
   Passive,
+  Incomplete,
+  ShouldCapture,
+  ForceClientRender,
 } from './ReactFiberFlags';
 
 import {
@@ -120,9 +126,11 @@ import {
   prepareToHydrateHostInstance,
   prepareToHydrateHostTextInstance,
   prepareToHydrateHostSuspenseInstance,
+  warnIfUnhydratedTailNodes,
   popHydrationState,
   resetHydrationState,
   getIsHydrating,
+  hasUnhydratedTailNodes,
 } from './ReactFiberHydrationContext.new';
 import {
   enableSuspenseCallback,
@@ -1021,6 +1029,18 @@ function completeWork(
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
       if (enableSuspenseServerRenderer) {
+        if (
+          enableClientRenderFallbackOnHydrationMismatch &&
+          hasUnhydratedTailNodes() &&
+          (workInProgress.mode & ConcurrentMode) !== NoMode &&
+          (workInProgress.flags & DidCapture) === NoFlags
+        ) {
+          warnIfUnhydratedTailNodes(workInProgress);
+          resetHydrationState();
+          workInProgress.flags |=
+            ForceClientRender | Incomplete | ShouldCapture;
+          return 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.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index ea994583cfe8..0a0273470a70 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -29,7 +29,10 @@ import type {
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
+import {
+  enableClientRenderFallbackOnHydrationMismatch,
+  enableSuspenseAvoidThisFallback,
+} from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 
@@ -74,6 +77,9 @@ import {
   StaticMask,
   MutationMask,
   Passive,
+  Incomplete,
+  ShouldCapture,
+  ForceClientRender,
 } from './ReactFiberFlags';
 
 import {
@@ -120,9 +126,11 @@ import {
   prepareToHydrateHostInstance,
   prepareToHydrateHostTextInstance,
   prepareToHydrateHostSuspenseInstance,
+  warnIfUnhydratedTailNodes,
   popHydrationState,
   resetHydrationState,
   getIsHydrating,
+  hasUnhydratedTailNodes,
 } from './ReactFiberHydrationContext.old';
 import {
   enableSuspenseCallback,
@@ -1021,6 +1029,18 @@ function completeWork(
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
       if (enableSuspenseServerRenderer) {
+        if (
+          enableClientRenderFallbackOnHydrationMismatch &&
+          hasUnhydratedTailNodes() &&
+          (workInProgress.mode & ConcurrentMode) !== NoMode &&
+          (workInProgress.flags & DidCapture) === NoFlags
+        ) {
+          warnIfUnhydratedTailNodes(workInProgress);
+          resetHydrationState();
+          workInProgress.flags |=
+            ForceClientRender | Incomplete | ShouldCapture;
+          return 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.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 614c6c9d946c..b6153eddcceb 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -26,7 +26,13 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
+import {
+  ChildDeletion,
+  Placement,
+  Hydrating,
+  NoFlags,
+  DidCapture,
+} from './ReactFiberFlags';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -121,7 +127,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   return true;
 }
 
-function deleteHydratableInstance(
+function warnUnhydratedInstance(
   returnFiber: Fiber,
   instance: HydratableInstance,
 ) {
@@ -151,7 +157,13 @@ function deleteHydratableInstance(
         break;
     }
   }
+}
 
+function deleteHydratableInstance(
+  returnFiber: Fiber,
+  instance: HydratableInstance,
+) {
+  warnUnhydratedInstance(returnFiber, instance);
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
@@ -327,11 +339,16 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
-  if (
+function shouldClientRenderOnMismatch(fiber: Fiber) {
+  return (
     enableClientRenderFallbackOnHydrationMismatch &&
-    (fiber.mode & ConcurrentMode) !== NoMode
-  ) {
+    (fiber.mode & ConcurrentMode) !== NoMode &&
+    (fiber.flags & DidCapture) === NoFlags
+  );
+}
+
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (shouldClientRenderOnMismatch(fiber)) {
     throw new Error(
       'An error occurred during hydration. The server HTML was replaced with client content',
     );
@@ -539,12 +556,18 @@ function popHydrationState(fiber: Fiber): boolean {
         !shouldSetTextContent(fiber.type, fiber.memoizedProps)))
   ) {
     let nextInstance = nextHydratableInstance;
-    while (nextInstance) {
-      deleteHydratableInstance(fiber, nextInstance);
-      nextInstance = getNextHydratableSibling(nextInstance);
+    if (nextInstance) {
+      if (shouldClientRenderOnMismatch(fiber)) {
+        warnIfUnhydratedTailNodes(fiber);
+        throwOnHydrationMismatchIfConcurrentMode(fiber);
+      } else {
+        while (nextInstance) {
+          deleteHydratableInstance(fiber, nextInstance);
+          nextInstance = getNextHydratableSibling(nextInstance);
+        }
+      }
     }
   }
-
   popToNextHostParent(fiber);
   if (fiber.tag === SuspenseComponent) {
     nextHydratableInstance = skipPastDehydratedSuspenseInstance(fiber);
@@ -556,6 +579,18 @@ function popHydrationState(fiber: Fiber): boolean {
   return true;
 }
 
+function hasUnhydratedTailNodes() {
+  return isHydrating && nextHydratableInstance !== null;
+}
+
+function warnIfUnhydratedTailNodes(fiber: Fiber) {
+  let nextInstance = nextHydratableInstance;
+  while (nextInstance) {
+    warnUnhydratedInstance(fiber, nextInstance);
+    nextInstance = getNextHydratableSibling(nextInstance);
+  }
+}
+
 function resetHydrationState(): void {
   if (!supportsHydration) {
     return;
@@ -581,4 +616,6 @@ export {
   prepareToHydrateHostTextInstance,
   prepareToHydrateHostSuspenseInstance,
   popHydrationState,
+  hasUnhydratedTailNodes,
+  warnIfUnhydratedTailNodes,
 };
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index b7bca8217d97..9e2518542454 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -26,7 +26,13 @@ import {
   HostRoot,
   SuspenseComponent,
 } from './ReactWorkTags';
-import {ChildDeletion, Placement, Hydrating} from './ReactFiberFlags';
+import {
+  ChildDeletion,
+  Placement,
+  Hydrating,
+  NoFlags,
+  DidCapture,
+} from './ReactFiberFlags';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -121,7 +127,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   return true;
 }
 
-function deleteHydratableInstance(
+function warnUnhydratedInstance(
   returnFiber: Fiber,
   instance: HydratableInstance,
 ) {
@@ -151,7 +157,13 @@ function deleteHydratableInstance(
         break;
     }
   }
+}
 
+function deleteHydratableInstance(
+  returnFiber: Fiber,
+  instance: HydratableInstance,
+) {
+  warnUnhydratedInstance(returnFiber, instance);
   const childToDelete = createFiberFromHostInstanceForDeletion();
   childToDelete.stateNode = instance;
   childToDelete.return = returnFiber;
@@ -327,11 +339,16 @@ function tryHydrate(fiber, nextInstance) {
   }
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
-  if (
+function shouldClientRenderOnMismatch(fiber: Fiber) {
+  return (
     enableClientRenderFallbackOnHydrationMismatch &&
-    (fiber.mode & ConcurrentMode) !== NoMode
-  ) {
+    (fiber.mode & ConcurrentMode) !== NoMode &&
+    (fiber.flags & DidCapture) === NoFlags
+  );
+}
+
+function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
+  if (shouldClientRenderOnMismatch(fiber)) {
     throw new Error(
       'An error occurred during hydration. The server HTML was replaced with client content',
     );
@@ -539,12 +556,18 @@ function popHydrationState(fiber: Fiber): boolean {
         !shouldSetTextContent(fiber.type, fiber.memoizedProps)))
   ) {
     let nextInstance = nextHydratableInstance;
-    while (nextInstance) {
-      deleteHydratableInstance(fiber, nextInstance);
-      nextInstance = getNextHydratableSibling(nextInstance);
+    if (nextInstance) {
+      if (shouldClientRenderOnMismatch(fiber)) {
+        warnIfUnhydratedTailNodes(fiber);
+        throwOnHydrationMismatchIfConcurrentMode(fiber);
+      } else {
+        while (nextInstance) {
+          deleteHydratableInstance(fiber, nextInstance);
+          nextInstance = getNextHydratableSibling(nextInstance);
+        }
+      }
     }
   }
-
   popToNextHostParent(fiber);
   if (fiber.tag === SuspenseComponent) {
     nextHydratableInstance = skipPastDehydratedSuspenseInstance(fiber);
@@ -556,6 +579,18 @@ function popHydrationState(fiber: Fiber): boolean {
   return true;
 }
 
+function hasUnhydratedTailNodes() {
+  return isHydrating && nextHydratableInstance !== null;
+}
+
+function warnIfUnhydratedTailNodes(fiber: Fiber) {
+  let nextInstance = nextHydratableInstance;
+  while (nextInstance) {
+    warnUnhydratedInstance(fiber, nextInstance);
+    nextInstance = getNextHydratableSibling(nextInstance);
+  }
+}
+
 function resetHydrationState(): void {
   if (!supportsHydration) {
     return;
@@ -581,4 +616,6 @@ export {
   prepareToHydrateHostTextInstance,
   prepareToHydrateHostSuspenseInstance,
   popHydrationState,
+  hasUnhydratedTailNodes,
+  warnIfUnhydratedTailNodes,
 };

From 4f5449eb4b6658225e3b4f063b6786d03d78b82b Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 1 Feb 2022 15:05:18 -0500
Subject: [PATCH 1120/1603] Remove main from scheduler `index.js`

---
 packages/scheduler/package.json | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index b22fc085290e..7ce0ca3b9c6a 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -2,7 +2,6 @@
   "name": "scheduler",
   "version": "0.20.1",
   "description": "Cooperative scheduler for the browser environment.",
-  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 0318ac2c41f7330a211ca7c16c148a6a7c0397f8 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 1 Feb 2022 15:36:49 -0500
Subject: [PATCH 1121/1603] Revert 4f5449

---
 packages/scheduler/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index 7ce0ca3b9c6a..b22fc085290e 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -2,6 +2,7 @@
   "name": "scheduler",
   "version": "0.20.1",
   "description": "Cooperative scheduler for the browser environment.",
+  "main": "index.js",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 3a44621296e866eb86123fa5777975765138e633 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 1 Feb 2022 18:22:04 -0500
Subject: [PATCH 1122/1603] Disable avoidThisFallback support in Fizz  (#23224)

* disable fizz avoidThisFallback support

* true
---
 packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js   | 2 +-
 packages/react-server/src/ReactFizzServer.js                  | 4 ++--
 packages/shared/ReactFeatureFlags.js                          | 1 +
 packages/shared/forks/ReactFeatureFlags.native-fb.js          | 1 +
 packages/shared/forks/ReactFeatureFlags.native-oss.js         | 1 +
 packages/shared/forks/ReactFeatureFlags.test-renderer.js      | 1 +
 .../shared/forks/ReactFeatureFlags.test-renderer.native.js    | 1 +
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js  | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.js            | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.www.js        | 1 +
 packages/shared/forks/ReactFeatureFlags.www.js                | 1 +
 11 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d8db609f3f2c..2d6f880851a2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1526,7 +1526,7 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
 
-  // @gate experimental && enableSuspenseAvoidThisFallback
+  // @gate experimental && enableSuspenseAvoidThisFallbackFizz
   it('should respect unstable_avoidThisFallback', async () => {
     const resolved = {
       0: false,
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f06cbc8fb61a..5ce012a0f538 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -113,7 +113,7 @@ import {
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableLazyElements,
-  enableSuspenseAvoidThisFallback,
+  enableSuspenseAvoidThisFallbackFizz,
 } from 'shared/ReactFeatureFlags';
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
@@ -1027,7 +1027,7 @@ function renderElement(
     // eslint-disable-next-line-no-fallthrough
     case REACT_SUSPENSE_TYPE: {
       if (
-        enableSuspenseAvoidThisFallback &&
+        enableSuspenseAvoidThisFallbackFizz &&
         props.unstable_avoidThisFallback === true
       ) {
         renderBackupSuspenseBoundary(request, task, props);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 3c2444101eb8..fe9d77766cdb 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -102,6 +102,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 
 export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 2e2c63708780..699d9a571ff6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,6 +50,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index b97cd2317f0b..0328a98aef58 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b0e3fc3a0c8b..b1afbda8ec59 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 953fab0f2c0a..6c1df25af242 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,6 +51,7 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index e9e3b5e97b64..e64d09d5d669 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = true;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index ae8d16d41c00..f0d4a9acc560 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 93bfcfb5a70c..43ce351301ce 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,6 +41,7 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = true;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c15550727c6e..c0545d2aacf3 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -51,6 +51,7 @@ export const enableUpdaterTracking = __PROFILE__;
 
 export const enableSuspenseLayoutEffectSemantics = true;
 export const enableSuspenseAvoidThisFallback = true;
+export const enableSuspenseAvoidThisFallbackFizz = false;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =

From 5318971f50da06fd42763689826acecdb14b4c5e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 2 Feb 2022 13:14:20 -0800
Subject: [PATCH 1123/1603] Remove logic for multiple error recovery attempts
 (#23227)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This deletes some internal behavior that was only used by
useOpaqueIdentifier, as an implementation detail: if an update is
scheduled during the render phase, and something threw an error, we
would try rendering again, either until there were no more errors or
until there were no more render phase updates. This was not a publicly
defined behavior — regular render phase updates are accompanied by
a warning.

Because useOpaqueIdentifier has been replaced by useId, and does not
rely on this implementation detail, we can delete this code.
---
 .../src/ReactFiberWorkLoop.new.js              | 18 +-----------------
 .../src/ReactFiberWorkLoop.old.js              | 18 +-----------------
 2 files changed, 2 insertions(+), 34 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b4b333547c19..d5372999f3c4 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -894,23 +894,7 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     }
   }
 
-  let exitStatus;
-
-  const MAX_ERROR_RETRY_ATTEMPTS = 50;
-  for (let i = 0; i < MAX_ERROR_RETRY_ATTEMPTS; i++) {
-    exitStatus = renderRootSync(root, errorRetryLanes);
-    if (
-      exitStatus === RootErrored &&
-      workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
-    ) {
-      // There was a render phase update during this render. Some internal React
-      // implementation details may use this as a trick to schedule another
-      // render pass. To protect against an inifinite loop, eventually
-      // we'll give up.
-      continue;
-    }
-    break;
-  }
+  const exitStatus = renderRootSync(root, errorRetryLanes);
 
   executionContext = prevExecutionContext;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d8bb61af50c8..92be9f0a323a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -894,23 +894,7 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     }
   }
 
-  let exitStatus;
-
-  const MAX_ERROR_RETRY_ATTEMPTS = 50;
-  for (let i = 0; i < MAX_ERROR_RETRY_ATTEMPTS; i++) {
-    exitStatus = renderRootSync(root, errorRetryLanes);
-    if (
-      exitStatus === RootErrored &&
-      workInProgressRootRenderPhaseUpdatedLanes !== NoLanes
-    ) {
-      // There was a render phase update during this render. Some internal React
-      // implementation details may use this as a trick to schedule another
-      // render pass. To protect against an inifinite loop, eventually
-      // we'll give up.
-      continue;
-    }
-    break;
-  }
+  const exitStatus = renderRootSync(root, errorRetryLanes);
 
   executionContext = prevExecutionContext;
 

From 848e802d203e531daf2b9b0edb281a1eb6c5415d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 4 Feb 2022 07:57:33 -0800
Subject: [PATCH 1124/1603] Add onRecoverableError option to hydrateRoot,
 createRoot (#23207)

* [RFC] Add onHydrationError option to hydrateRoot

This is not the final API but I'm pushing it for discussion purposes.

When an error is thrown during hydration, we fallback to client
rendering, without triggering an error boundary. This is good because,
in many cases, the UI will recover and the user won't even notice that
something has gone wrong behind the scenes.

However, we shouldn't recover from these errors silently, because the
underlying cause might be pretty serious. Server-client mismatches are
not supposed to happen, even if UI doesn't break from the users
perspective. Ignoring them could lead to worse problems later. De-opting
from server to client rendering could also be a significant performance
regression, depending on the scope of the UI it affects.

So we need a way to log when hydration errors occur.

This adds a new option for `hydrateRoot` called `onHydrationError`. It's
symmetrical to the server renderer's `onError` option, and serves the
same purpose.

When no option is provided, the default behavior is to schedule a
browser task and rethrow the error. This will trigger the normal browser
behavior for errors, including dispatching an error event. If the app
already has error monitoring, this likely will just work as expected
without additional configuration.

However, we can also expose additional metadata about these errors, like
which Suspense boundaries were affected by the de-opt to client
rendering. (I have not exposed any metadata in this commit; API needs
more design work.)

There are other situations besides hydration where we recover from an
error without surfacing it to the user, or notifying an error boundary.
For example, if an error occurs during a concurrent render, it could be
due to a data race, so we try again synchronously in case that fixes it.
We should probably expose a way to log these types of errors, too. (Also
not implemented in this commit.)

* Log all recoverable errors

This expands the scope of onHydrationError to include all errors that
are not surfaced to the UI (an error boundary). In addition to errors
that occur during hydration, this also includes errors that recoverable
by de-opting to synchronous rendering. Typically (or really, by
definition) these errors are the result of a concurrent data race;
blocking the main thread fixes them by prevents subsequent races.

The logic for de-opting to synchronous rendering already existed. The
only thing that has changed is that we now log the errors instead of
silently proceeding.

The logging API has been renamed from onHydrationError
to onRecoverableError.

* Don't log recoverable errors until commit phase

If the render is interrupted and restarts, we don't want to log the
errors multiple times.

This change only affects errors that are recovered by de-opting to
synchronous rendering; we'll have to do something else for errors
during hydration, since they use a different recovery path.

* Only log hydration error if client render succeeds

Similar to previous step.

When an error occurs during hydration, we only want to log it if falling
back to client rendering _succeeds_. If client rendering fails,
the error will get reported to the nearest error boundary, so there's
no need for a duplicate log.

To implement this, I added a list of errors to the hydration context.
If the Suspense boundary successfully completes, they are added to
the main recoverable errors queue (the one I added in the
previous step.)

* Log error with queueMicrotask instead of Scheduler

If onRecoverableError is not provided, we default to rethrowing the
error in a separate task. Originally, I scheduled the task with
idle priority, but @sebmarkbage made the good point that if there are
multiple errors logs, we want to preserve the original order. So I've
switched it to a microtask. The priority can be lowered in userspace
by scheduling an additional task inside onRecoverableError.

* Only use host config method for default behavior

Redefines the contract of the host config's logRecoverableError method
to be a default implementation for onRecoverableError if a user-provided
one is not provided when the root is created.

* Log with reportError instead of rethrowing

In modern browsers, reportError will dispatch an error event, emulating
an uncaught JavaScript error. We can do this instead of rethrowing
recoverable errors in a microtask, which is nice because it avoids any
subtle ordering issues.

In older browsers and test environments, we'll fall back
to console.error.

* Naming nits

queueRecoverableHydrationErrors -> upgradeHydrationErrorsToRecoverable
---
 packages/react-art/src/ReactARTHostConfig.js  |   4 +
 .../src/__tests__/ReactDOMFizzServer-test.js  | 118 ++++++++++++++++--
 ...DOMServerPartialHydration-test.internal.js |  52 +++++++-
 .../src/client/ReactDOMHostConfig.js          |  14 +++
 .../react-dom/src/client/ReactDOMLegacy.js    |   1 +
 packages/react-dom/src/client/ReactDOMRoot.js |  12 ++
 .../react-native-renderer/src/ReactFabric.js  |   1 +
 .../src/ReactFabricHostConfig.js              |   4 +
 .../src/ReactNativeHostConfig.js              |   4 +
 .../src/ReactNativeRenderer.js                |   1 +
 .../src/createReactNoop.js                    |  17 ++-
 .../src/ReactFiberCompleteWork.new.js         |   7 ++
 .../src/ReactFiberCompleteWork.old.js         |   7 ++
 .../src/ReactFiberHydrationContext.new.js     |  24 ++++
 .../src/ReactFiberHydrationContext.old.js     |  24 ++++
 .../src/ReactFiberReconciler.new.js           |   2 +
 .../src/ReactFiberReconciler.old.js           |   2 +
 .../src/ReactFiberRoot.new.js                 |  15 ++-
 .../src/ReactFiberRoot.old.js                 |  15 ++-
 .../src/ReactFiberThrow.new.js                |  11 +-
 .../src/ReactFiberThrow.old.js                |  11 +-
 .../src/ReactFiberWorkLoop.new.js             |  79 ++++++++++--
 .../src/ReactFiberWorkLoop.old.js             |  79 ++++++++++--
 .../src/ReactInternalTypes.js                 |   2 +
 .../ReactFiberHostContext-test.internal.js    |   2 +
 .../useMutableSourceHydration-test.js         |  39 +++++-
 .../src/forks/ReactFiberHostConfig.custom.js  |   1 +
 packages/react-server/src/ReactFizzServer.js  |  12 +-
 .../react-server/src/ReactFlightServer.js     |  10 +-
 .../src/ReactTestHostConfig.js                |   4 +
 .../src/ReactTestRenderer.js                  |   1 +
 scripts/flow/environment.js                   |   1 +
 scripts/print-warnings/print-warnings.js      |  10 +-
 scripts/rollup/validate/eslintrc.cjs.js       |   1 +
 scripts/rollup/validate/eslintrc.cjs2015.js   |   1 +
 scripts/rollup/validate/eslintrc.esm.js       |   1 +
 scripts/rollup/validate/eslintrc.fb.js        |   1 +
 scripts/rollup/validate/eslintrc.rn.js        |   1 +
 scripts/rollup/validate/eslintrc.umd.js       |   1 +
 39 files changed, 530 insertions(+), 62 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 47bced8a1274..92417f77ae16 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -451,3 +451,7 @@ export function preparePortalMount(portalInstance: any): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function logRecoverableError(error) {
+  // noop
+}
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 2d6f880851a2..483c588c37b9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1723,12 +1723,22 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(
+          'Log recoverable error: ' + error.message,
+        );
+      },
+    });
 
     if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
       expect(() => {
         // The first paint switches to client rendering due to mismatch
-        expect(Scheduler).toFlushUntilNextPaint(['client']);
+        expect(Scheduler).toFlushUntilNextPaint([
+          'client',
+          'Log recoverable error: An error occurred during hydration. ' +
+            'The server HTML was replaced with client content',
+        ]);
       }).toErrorDev(
         'Warning: An error occurred during hydration. The server HTML was replaced with client content',
         {withoutStack: true},
@@ -1805,13 +1815,23 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(
+          'Log recoverable error: ' + error.message,
+        );
+      },
+    });
 
     if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
       // The first paint uses the client due to mismatch forcing client render
       expect(() => {
         // The first paint switches to client rendering due to mismatch
-        expect(Scheduler).toFlushUntilNextPaint(['client']);
+        expect(Scheduler).toFlushUntilNextPaint([
+          'client',
+          'Log recoverable error: An error occurred during hydration. ' +
+            'The server HTML was replaced with client content',
+        ]);
       }).toErrorDev(
         'Warning: An error occurred during hydration. The server HTML was replaced with client content',
         {withoutStack: true},
@@ -1897,9 +1917,15 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOM.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      });
 
-      expect(Scheduler).toFlushAndYield(['Yay!']);
+      // An error logged but instead of surfacing it to the UI, we switched
+      // to client rendering.
+      expect(Scheduler).toFlushAndYield(['Yay!', 'Hydration error']);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
@@ -1975,8 +2001,16 @@ describe('ReactDOMFizzServer', () => {
 
       // Hydrate the tree. Child will throw during render.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOM.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(
+            'Log recoverable error: ' + error.message,
+          );
+        },
+      });
 
+      // Because we failed to recover from the error, onRecoverableError
+      // shouldn't be called.
       expect(Scheduler).toFlushAndYield([]);
       expect(getVisibleChildren(container)).toEqual('Oops!');
     },
@@ -2049,9 +2083,15 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOM.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      });
 
-      expect(Scheduler).toFlushAndYield([]);
+      // An error logged but instead of surfacing it to the UI, we switched
+      // to client rendering.
+      expect(Scheduler).toFlushAndYield(['Hydration error']);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
@@ -2081,4 +2121,64 @@ describe('ReactDOMFizzServer', () => {
       expect(span3Ref.current).toBe(span3);
     },
   );
+
+  it('logs regular (non-hydration) errors when the UI recovers', async () => {
+    let shouldThrow = true;
+
+    function A() {
+      if (shouldThrow) {
+        Scheduler.unstable_yieldValue('Oops!');
+        throw new Error('Oops!');
+      }
+      Scheduler.unstable_yieldValue('A');
+      return 'A';
+    }
+
+    function B() {
+      Scheduler.unstable_yieldValue('B');
+      return 'B';
+    }
+
+    function App() {
+      return (
+        <>
+          <A />
+          <B />
+        </>
+      );
+    }
+
+    const root = ReactDOM.createRoot(container, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(
+          'Logged a recoverable error: ' + error.message,
+        );
+      },
+    });
+    React.startTransition(() => {
+      root.render(<App />);
+    });
+
+    // Partially render A, but yield before the render has finished
+    expect(Scheduler).toFlushAndYieldThrough(['Oops!', '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;
+    expect(Scheduler).toFlushAndYield([
+      // Finish initial render attempt
+      'B',
+
+      // Render again, synchronously
+      'A',
+      'B',
+
+      // Log the error
+      'Logged a recoverable error: Oops!',
+    ]);
+
+    // UI looks normal
+    expect(container.textContent).toEqual('AB');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 8f2913c15d60..e071a3673710 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -208,7 +208,11 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
     if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
       Scheduler.unstable_flushAll();
     } else {
@@ -290,7 +294,11 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
     client = true;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
     expect(Scheduler).toFlushAndYield([
       'Suspend',
       'Component',
@@ -316,12 +324,16 @@ describe('ReactDOMServerPartialHydration', () => {
       'Component',
       'Component',
       'Component',
+
       // second pass as client render
       'Hello',
       'Component',
       'Component',
       'Component',
       'Component',
+
+      // Hydration mismatch is logged
+      'An error occurred during hydration. The server HTML was replaced with client content',
     ]);
 
     // Client rendered - suspense comment nodes removed
@@ -573,9 +585,19 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />);
+        ReactDOM.hydrateRoot(container, <App hasB={false} />, {
+          onRecoverableError(error) {
+            Scheduler.unstable_yieldValue(error.message);
+          },
+        });
       });
     }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(Scheduler).toHaveYielded([
+        'An error occurred during hydration. The server HTML was replaced ' +
+          'with client content',
+      ]);
+    }
 
     expect(container.innerHTML).toContain('<span>A</span>');
     expect(container.innerHTML).not.toContain('<span>B</span>');
@@ -2997,7 +3019,13 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(
+          'Log recoverable error: ' + error.message,
+        );
+      },
+    });
 
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
@@ -3142,13 +3170,27 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App />);
+        ReactDOM.hydrateRoot(container, <App />, {
+          onRecoverableError(error) {
+            Scheduler.unstable_yieldValue(
+              'Log recoverable error: ' + error.message,
+            );
+          },
+        });
       });
     }).toErrorDev(
       'Warning: An error occurred during hydration. ' +
         'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
+    expect(Scheduler).toHaveYielded([
+      'Log recoverable error: An error occurred during hydration. The server ' +
+        'HTML was replaced with client content',
+      // TODO: There were multiple mismatches in a single container. Should
+      // we attempt to de-dupe them?
+      'Log recoverable error: An error occurred during hydration. The server ' +
+        'HTML was replaced with client content',
+    ]);
 
     // We show fallback state when mismatch happens at root
     expect(container.innerHTML).toEqual(
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 341d1fa7a376..e2cbed61e5e4 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -374,6 +374,18 @@ export function getCurrentEventPriority(): * {
   return getEventPriority(currentEvent.type);
 }
 
+/* global reportError */
+export const logRecoverableError =
+  typeof reportError === 'function'
+    ? // In modern browsers, reportError will dispatch an error event,
+      // emulating an uncaught JavaScript error.
+      reportError
+    : (error: mixed) => {
+        // In older browsers and test environments, fallback to console.error.
+        // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
+        console.error(error);
+      };
+
 export const isPrimaryRenderer = true;
 export const warnsIfNotActing = true;
 // This initialization code may run even on server environments
@@ -1070,6 +1082,8 @@ export function didNotFindHydratableSuspenseInstance(
 
 export function errorHydratingContainer(parentContainer: Container): void {
   if (__DEV__) {
+    // TODO: This gets logged by onRecoverableError, too, so we should be
+    // able to remove it.
     console.error(
       'An error occurred during hydration. The server HTML was replaced with client content in <%s>.',
       parentContainer.nodeName.toLowerCase(),
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 05ae0d5ce4f4..cb95101401ea 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -122,6 +122,7 @@ function legacyCreateRootFromDOMContainer(
     false, // isStrictMode
     false, // concurrentUpdatesByDefaultOverride,
     '', // identifierPrefix
+    null,
   );
   markContainerAsRoot(root.current, container);
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 800eeba0d018..fe6b6ee31f77 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -24,6 +24,7 @@ export type CreateRootOptions = {
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
   identifierPrefix?: string,
+  onRecoverableError?: (error: mixed) => void,
   ...
 };
 
@@ -36,6 +37,7 @@ export type HydrateRootOptions = {
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
   identifierPrefix?: string,
+  onRecoverableError?: (error: mixed) => void,
   ...
 };
 
@@ -143,6 +145,7 @@ export function createRoot(
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
+  let onRecoverableError = null;
   if (options !== null && options !== undefined) {
     if (__DEV__) {
       if ((options: any).hydrate) {
@@ -163,6 +166,9 @@ export function createRoot(
     if (options.identifierPrefix !== undefined) {
       identifierPrefix = options.identifierPrefix;
     }
+    if (options.onRecoverableError !== undefined) {
+      onRecoverableError = options.onRecoverableError;
+    }
   }
 
   const root = createContainer(
@@ -173,6 +179,7 @@ export function createRoot(
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
+    onRecoverableError,
   );
   markContainerAsRoot(root.current, container);
 
@@ -213,6 +220,7 @@ export function hydrateRoot(
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
+  let onRecoverableError = null;
   if (options !== null && options !== undefined) {
     if (options.unstable_strictMode === true) {
       isStrictMode = true;
@@ -226,6 +234,9 @@ export function hydrateRoot(
     if (options.identifierPrefix !== undefined) {
       identifierPrefix = options.identifierPrefix;
     }
+    if (options.onRecoverableError !== undefined) {
+      onRecoverableError = options.onRecoverableError;
+    }
   }
 
   const root = createContainer(
@@ -236,6 +247,7 @@ export function hydrateRoot(
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
+    onRecoverableError,
   );
   markContainerAsRoot(root.current, container);
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index bf7754d6099c..25cbd31b9fdf 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -214,6 +214,7 @@ function render(
       false,
       null,
       '',
+      null,
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 727b782efd76..bec60bff22c9 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -525,3 +525,7 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function logRecoverableError(error: mixed): void {
+  // noop
+}
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 10c5e37f41bc..e1b1d25f5f60 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -513,3 +513,7 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function logRecoverableError(error: mixed): void {
+  // noop
+}
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index fb539d899681..c5d4318311c0 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -210,6 +210,7 @@ function render(
       false,
       null,
       '',
+      null,
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index ef76b6610617..7e1ee5c57581 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -466,6 +466,10 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     },
 
     detachDeletedInstance() {},
+
+    logRecoverableError() {
+      // no-op
+    },
   };
 
   const hostConfig = useMutation
@@ -954,7 +958,16 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       if (!root) {
         const container = {rootID: rootID, pendingChildren: [], children: []};
         rootContainers.set(rootID, container);
-        root = NoopRenderer.createContainer(container, tag, false, null, null);
+        root = NoopRenderer.createContainer(
+          container,
+          tag,
+          false,
+          null,
+          null,
+          false,
+          '',
+          null,
+        );
         roots.set(rootID, root);
       }
       return root.current.stateNode.containerInfo;
@@ -975,6 +988,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
+        null,
       );
       return {
         _Scheduler: Scheduler,
@@ -1004,6 +1018,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
+        null,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index e8ec41d9d81f..39f724c76df9 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -131,6 +131,7 @@ import {
   resetHydrationState,
   getIsHydrating,
   hasUnhydratedTailNodes,
+  upgradeHydrationErrorsToRecoverable,
 } from './ReactFiberHydrationContext.new';
 import {
   enableSuspenseCallback,
@@ -1099,6 +1100,12 @@ function completeWork(
             return null;
           }
         }
+
+        // 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.
+        upgradeHydrationErrorsToRecoverable();
       }
 
       if ((workInProgress.flags & DidCapture) !== NoFlags) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 0a0273470a70..c7baf36d16c4 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -131,6 +131,7 @@ import {
   resetHydrationState,
   getIsHydrating,
   hasUnhydratedTailNodes,
+  upgradeHydrationErrorsToRecoverable,
 } from './ReactFiberHydrationContext.old';
 import {
   enableSuspenseCallback,
@@ -1099,6 +1100,12 @@ function completeWork(
             return null;
           }
         }
+
+        // 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.
+        upgradeHydrationErrorsToRecoverable();
       }
 
       if ((workInProgress.flags & DidCapture) !== NoFlags) {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index b6153eddcceb..4a460d584a53 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -77,6 +77,7 @@ import {
   getSuspendedTreeContext,
   restoreSuspendedTreeContext,
 } from './ReactFiberTreeContext.new';
+import {queueRecoverableErrors} from './ReactFiberWorkLoop.new';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -84,6 +85,9 @@ let hydrationParentFiber: null | Fiber = null;
 let nextHydratableInstance: null | HydratableInstance = null;
 let isHydrating: boolean = false;
 
+// Hydration errors that were thrown inside this boundary
+let hydrationErrors: Array<mixed> | null = null;
+
 function warnIfHydrating() {
   if (__DEV__) {
     if (isHydrating) {
@@ -105,6 +109,7 @@ function enterHydrationState(fiber: Fiber): boolean {
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  hydrationErrors = null;
   return true;
 }
 
@@ -121,6 +126,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  hydrationErrors = null;
   if (treeContext !== null) {
     restoreSuspendedTreeContext(fiber, treeContext);
   }
@@ -601,10 +607,28 @@ function resetHydrationState(): void {
   isHydrating = false;
 }
 
+export function upgradeHydrationErrorsToRecoverable(): void {
+  if (hydrationErrors !== 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(hydrationErrors);
+    hydrationErrors = null;
+  }
+}
+
 function getIsHydrating(): boolean {
   return isHydrating;
 }
 
+export function queueHydrationError(error: mixed): void {
+  if (hydrationErrors === null) {
+    hydrationErrors = [error];
+  } else {
+    hydrationErrors.push(error);
+  }
+}
+
 export {
   warnIfHydrating,
   enterHydrationState,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 9e2518542454..3ee040237829 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -77,6 +77,7 @@ import {
   getSuspendedTreeContext,
   restoreSuspendedTreeContext,
 } from './ReactFiberTreeContext.old';
+import {queueRecoverableErrors} from './ReactFiberWorkLoop.old';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -84,6 +85,9 @@ let hydrationParentFiber: null | Fiber = null;
 let nextHydratableInstance: null | HydratableInstance = null;
 let isHydrating: boolean = false;
 
+// Hydration errors that were thrown inside this boundary
+let hydrationErrors: Array<mixed> | null = null;
+
 function warnIfHydrating() {
   if (__DEV__) {
     if (isHydrating) {
@@ -105,6 +109,7 @@ function enterHydrationState(fiber: Fiber): boolean {
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  hydrationErrors = null;
   return true;
 }
 
@@ -121,6 +126,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   );
   hydrationParentFiber = fiber;
   isHydrating = true;
+  hydrationErrors = null;
   if (treeContext !== null) {
     restoreSuspendedTreeContext(fiber, treeContext);
   }
@@ -601,10 +607,28 @@ function resetHydrationState(): void {
   isHydrating = false;
 }
 
+export function upgradeHydrationErrorsToRecoverable(): void {
+  if (hydrationErrors !== 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(hydrationErrors);
+    hydrationErrors = null;
+  }
+}
+
 function getIsHydrating(): boolean {
   return isHydrating;
 }
 
+export function queueHydrationError(error: mixed): void {
+  if (hydrationErrors === null) {
+    hydrationErrors = [error];
+  } else {
+    hydrationErrors.push(error);
+  }
+}
+
 export {
   warnIfHydrating,
   enterHydrationState,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 1cf200e35d56..0c99b9ec3077 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -245,6 +245,7 @@ export function createContainer(
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
   identifierPrefix: string,
+  onRecoverableError: null | ((error: mixed) => void),
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -254,6 +255,7 @@ export function createContainer(
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
+    onRecoverableError,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 4b02959ab084..202d7ce3819d 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -245,6 +245,7 @@ export function createContainer(
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
   identifierPrefix: string,
+  onRecoverableError: null | ((error: mixed) => void),
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -254,6 +255,7 @@ export function createContainer(
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
+    onRecoverableError,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 9e9feb45d9b0..85820dc7a3cd 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -30,7 +30,13 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
-function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
+function FiberRootNode(
+  containerInfo,
+  tag,
+  hydrate,
+  identifierPrefix,
+  onRecoverableError,
+) {
   this.tag = tag;
   this.containerInfo = containerInfo;
   this.pendingChildren = null;
@@ -57,6 +63,7 @@ function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
   this.entanglements = createLaneMap(NoLanes);
 
   this.identifierPrefix = identifierPrefix;
+  this.onRecoverableError = onRecoverableError;
 
   if (enableCache) {
     this.pooledCache = null;
@@ -103,13 +110,19 @@ export function createFiberRoot(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | 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,
+  onRecoverableError: null | ((error: mixed) => void),
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(
     containerInfo,
     tag,
     hydrate,
     identifierPrefix,
+    onRecoverableError,
   ): any);
   if (enableSuspenseCallback) {
     root.hydrationCallbacks = hydrationCallbacks;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index d8d061297854..e1eaee798bfb 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -30,7 +30,13 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
-function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
+function FiberRootNode(
+  containerInfo,
+  tag,
+  hydrate,
+  identifierPrefix,
+  onRecoverableError,
+) {
   this.tag = tag;
   this.containerInfo = containerInfo;
   this.pendingChildren = null;
@@ -57,6 +63,7 @@ function FiberRootNode(containerInfo, tag, hydrate, identifierPrefix) {
   this.entanglements = createLaneMap(NoLanes);
 
   this.identifierPrefix = identifierPrefix;
+  this.onRecoverableError = onRecoverableError;
 
   if (enableCache) {
     this.pooledCache = null;
@@ -103,13 +110,19 @@ export function createFiberRoot(
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | 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,
+  onRecoverableError: null | ((error: mixed) => void),
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(
     containerInfo,
     tag,
     hydrate,
     identifierPrefix,
+    onRecoverableError,
   ): any);
   if (enableSuspenseCallback) {
     root.hydrationCallbacks = hydrationCallbacks;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index cd9931687ba5..6a0c70f8e6d0 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -79,7 +79,10 @@ import {
   mergeLanes,
   pickArbitraryLane,
 } from './ReactFiberLane.new';
-import {getIsHydrating} from './ReactFiberHydrationContext.new';
+import {
+  getIsHydrating,
+  queueHydrationError,
+} from './ReactFiberHydrationContext.new';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
@@ -507,6 +510,10 @@ function throwException(
           root,
           rootRenderLanes,
         );
+
+        // Even though the user may not be affected by this error, we should
+        // still log it so it can be fixed.
+        queueHydrationError(value);
         return;
       }
     } else {
@@ -517,7 +524,7 @@ function throwException(
   // 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.
-  renderDidError();
+  renderDidError(value);
 
   value = createCapturedValue(value, sourceFiber);
   let workInProgress = returnFiber;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 8f6d18a48dea..21ab03f4ac92 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -79,7 +79,10 @@ import {
   mergeLanes,
   pickArbitraryLane,
 } from './ReactFiberLane.old';
-import {getIsHydrating} from './ReactFiberHydrationContext.old';
+import {
+  getIsHydrating,
+  queueHydrationError,
+} from './ReactFiberHydrationContext.old';
 
 const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 
@@ -507,6 +510,10 @@ function throwException(
           root,
           rootRenderLanes,
         );
+
+        // Even though the user may not be affected by this error, we should
+        // still log it so it can be fixed.
+        queueHydrationError(value);
         return;
       }
     } else {
@@ -517,7 +524,7 @@ function throwException(
   // 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.
-  renderDidError();
+  renderDidError(value);
 
   value = createCapturedValue(value, sourceFiber);
   let workInProgress = returnFiber;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index d5372999f3c4..f3efac3e74d6 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -14,6 +14,7 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
+import type {EventPriority} from './ReactEventPriorities.new';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -76,6 +77,7 @@ import {
   supportsMicrotasks,
   errorHydratingContainer,
   scheduleMicrotask,
+  logRecoverableError,
 } from './ReactFiberHostConfig';
 
 import {
@@ -296,6 +298,11 @@ let workInProgressRootInterleavedUpdatedLanes: Lanes = NoLanes;
 let workInProgressRootRenderPhaseUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
+// Errors that are thrown during the render phase.
+let workInProgressRootConcurrentErrors: Array<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<mixed> | null = null;
 
 // The most recent time we committed a fallback. This lets us ensure a train
 // model where we don't commit new loading states in too quick succession.
@@ -894,13 +901,36 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     }
   }
 
+  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
+  if (exitStatus !== RootErrored) {
+    // Successfully finished rendering on retry
+    if (errorsFromFirstAttempt !== null) {
+      // 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.
+      queueRecoverableErrors(errorsFromFirstAttempt);
+    }
+  } else {
+    // The UI failed to recover.
+  }
 
   executionContext = prevExecutionContext;
 
   return exitStatus;
 }
 
+export function queueRecoverableErrors(errors: Array<mixed>) {
+  if (workInProgressRootConcurrentErrors === null) {
+    workInProgressRootRecoverableErrors = errors;
+  } else {
+    workInProgressRootConcurrentErrors = workInProgressRootConcurrentErrors.push.apply(
+      null,
+      errors,
+    );
+  }
+}
+
 function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
@@ -913,7 +943,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootErrored: {
       // We should have already attempted to retry this tree. If we reached
       // this point, it errored again. Commit it.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     case RootSuspended: {
@@ -953,14 +983,14 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // lower priority work to do. Instead of committing the fallback
           // immediately, wait for more data to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root),
+            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
             msUntilTimeout,
           );
           break;
         }
       }
       // The work expired. Commit immediately.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     case RootSuspendedWithDelay: {
@@ -991,7 +1021,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // Instead of committing the fallback immediately, wait for more data
           // to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root),
+            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
             msUntilTimeout,
           );
           break;
@@ -999,12 +1029,12 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       }
 
       // Commit the placeholder.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     case RootCompleted: {
       // The work completed. Ready to commit.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     default: {
@@ -1124,7 +1154,7 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root);
+  commitRoot(root, workInProgressRootRecoverableErrors);
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
@@ -1320,6 +1350,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootInterleavedUpdatedLanes = NoLanes;
   workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
+  workInProgressRootConcurrentErrors = null;
+  workInProgressRootRecoverableErrors = null;
 
   enqueueInterleavedUpdates();
 
@@ -1474,10 +1506,15 @@ export function renderDidSuspendDelayIfPossible(): void {
   }
 }
 
-export function renderDidError() {
+export function renderDidError(error: mixed) {
   if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {
     workInProgressRootExitStatus = RootErrored;
   }
+  if (workInProgressRootConcurrentErrors === null) {
+    workInProgressRootConcurrentErrors = [error];
+  } else {
+    workInProgressRootConcurrentErrors.push(error);
+  }
 }
 
 // Called during render to determine if anything has suspended.
@@ -1781,7 +1818,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
-function commitRoot(root) {
+function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
@@ -1789,7 +1826,7 @@ function commitRoot(root) {
   try {
     ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
-    commitRootImpl(root, previousUpdateLanePriority);
+    commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
   } finally {
     ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
@@ -1798,7 +1835,11 @@ function commitRoot(root) {
   return null;
 }
 
-function commitRootImpl(root, renderPriorityLevel) {
+function commitRootImpl(
+  root: FiberRoot,
+  recoverableErrors: null | Array<mixed>,
+  renderPriorityLevel: EventPriority,
+) {
   do {
     // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which
     // means `flushPassiveEffects` will sometimes result in additional
@@ -2069,6 +2110,22 @@ function commitRootImpl(root, renderPriorityLevel) {
   // additional work on this root is scheduled.
   ensureRootIsScheduled(root, now());
 
+  if (recoverableErrors !== null) {
+    // There were errors during this render, but recovered from them without
+    // needing to surface it to the UI. We log them here.
+    for (let i = 0; i < recoverableErrors.length; i++) {
+      const recoverableError = recoverableErrors[i];
+      const onRecoverableError = root.onRecoverableError;
+      if (onRecoverableError !== null) {
+        onRecoverableError(recoverableError);
+      } else {
+        // No user-provided onRecoverableError. Use the default behavior
+        // provided by the renderer's host config.
+        logRecoverableError(recoverableError);
+      }
+    }
+  }
+
   if (hasUncaughtError) {
     hasUncaughtError = false;
     const error = firstUncaughtError;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 92be9f0a323a..d6e37f2785ff 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -14,6 +14,7 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
+import type {EventPriority} from './ReactEventPriorities.old';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -76,6 +77,7 @@ import {
   supportsMicrotasks,
   errorHydratingContainer,
   scheduleMicrotask,
+  logRecoverableError,
 } from './ReactFiberHostConfig';
 
 import {
@@ -296,6 +298,11 @@ let workInProgressRootInterleavedUpdatedLanes: Lanes = NoLanes;
 let workInProgressRootRenderPhaseUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
+// Errors that are thrown during the render phase.
+let workInProgressRootConcurrentErrors: Array<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<mixed> | null = null;
 
 // The most recent time we committed a fallback. This lets us ensure a train
 // model where we don't commit new loading states in too quick succession.
@@ -894,13 +901,36 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     }
   }
 
+  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
+  if (exitStatus !== RootErrored) {
+    // Successfully finished rendering on retry
+    if (errorsFromFirstAttempt !== null) {
+      // 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.
+      queueRecoverableErrors(errorsFromFirstAttempt);
+    }
+  } else {
+    // The UI failed to recover.
+  }
 
   executionContext = prevExecutionContext;
 
   return exitStatus;
 }
 
+export function queueRecoverableErrors(errors: Array<mixed>) {
+  if (workInProgressRootConcurrentErrors === null) {
+    workInProgressRootRecoverableErrors = errors;
+  } else {
+    workInProgressRootConcurrentErrors = workInProgressRootConcurrentErrors.push.apply(
+      null,
+      errors,
+    );
+  }
+}
+
 function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
     case RootIncomplete:
@@ -913,7 +943,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootErrored: {
       // We should have already attempted to retry this tree. If we reached
       // this point, it errored again. Commit it.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     case RootSuspended: {
@@ -953,14 +983,14 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // lower priority work to do. Instead of committing the fallback
           // immediately, wait for more data to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root),
+            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
             msUntilTimeout,
           );
           break;
         }
       }
       // The work expired. Commit immediately.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     case RootSuspendedWithDelay: {
@@ -991,7 +1021,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // Instead of committing the fallback immediately, wait for more data
           // to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root),
+            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
             msUntilTimeout,
           );
           break;
@@ -999,12 +1029,12 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       }
 
       // Commit the placeholder.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     case RootCompleted: {
       // The work completed. Ready to commit.
-      commitRoot(root);
+      commitRoot(root, workInProgressRootRecoverableErrors);
       break;
     }
     default: {
@@ -1124,7 +1154,7 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root);
+  commitRoot(root, workInProgressRootRecoverableErrors);
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
@@ -1320,6 +1350,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRootInterleavedUpdatedLanes = NoLanes;
   workInProgressRootRenderPhaseUpdatedLanes = NoLanes;
   workInProgressRootPingedLanes = NoLanes;
+  workInProgressRootConcurrentErrors = null;
+  workInProgressRootRecoverableErrors = null;
 
   enqueueInterleavedUpdates();
 
@@ -1474,10 +1506,15 @@ export function renderDidSuspendDelayIfPossible(): void {
   }
 }
 
-export function renderDidError() {
+export function renderDidError(error: mixed) {
   if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {
     workInProgressRootExitStatus = RootErrored;
   }
+  if (workInProgressRootConcurrentErrors === null) {
+    workInProgressRootConcurrentErrors = [error];
+  } else {
+    workInProgressRootConcurrentErrors.push(error);
+  }
 }
 
 // Called during render to determine if anything has suspended.
@@ -1781,7 +1818,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
-function commitRoot(root) {
+function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
@@ -1789,7 +1826,7 @@ function commitRoot(root) {
   try {
     ReactCurrentBatchConfig.transition = 0;
     setCurrentUpdatePriority(DiscreteEventPriority);
-    commitRootImpl(root, previousUpdateLanePriority);
+    commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
   } finally {
     ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
@@ -1798,7 +1835,11 @@ function commitRoot(root) {
   return null;
 }
 
-function commitRootImpl(root, renderPriorityLevel) {
+function commitRootImpl(
+  root: FiberRoot,
+  recoverableErrors: null | Array<mixed>,
+  renderPriorityLevel: EventPriority,
+) {
   do {
     // `flushPassiveEffects` will call `flushSyncUpdateQueue` at the end, which
     // means `flushPassiveEffects` will sometimes result in additional
@@ -2069,6 +2110,22 @@ function commitRootImpl(root, renderPriorityLevel) {
   // additional work on this root is scheduled.
   ensureRootIsScheduled(root, now());
 
+  if (recoverableErrors !== null) {
+    // There were errors during this render, but recovered from them without
+    // needing to surface it to the UI. We log them here.
+    for (let i = 0; i < recoverableErrors.length; i++) {
+      const recoverableError = recoverableErrors[i];
+      const onRecoverableError = root.onRecoverableError;
+      if (onRecoverableError !== null) {
+        onRecoverableError(recoverableError);
+      } else {
+        // No user-provided onRecoverableError. Use the default behavior
+        // provided by the renderer's host config.
+        logRecoverableError(recoverableError);
+      }
+    }
+  }
+
   if (hasUncaughtError) {
     hasUncaughtError = false;
     const error = firstUncaughtError;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 13965720b7cd..bbfe70c26cfc 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -246,6 +246,8 @@ type BaseFiberRootProperties = {|
   // the public createRoot object, which the fiber tree does not currently have
   // a reference to.
   identifierPrefix: string,
+
+  onRecoverableError: null | ((error: mixed) => void),
 |};
 
 // The following attributes are only used by DevTools and are only present in DEV builds.
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 4bf292df79f7..d0c3d5b236ea 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -76,6 +76,7 @@ describe('ReactFiberHostContext', () => {
       null,
       false,
       '',
+      null,
     );
     act(() => {
       Renderer.updateContainer(
@@ -139,6 +140,7 @@ describe('ReactFiberHostContext', () => {
       null,
       false,
       '',
+      null,
     );
     act(() => {
       Renderer.updateContainer(
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 4c13ef7c35df..16ebb4657d28 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -205,6 +205,9 @@ describe('useMutableSourceHydration', () => {
       act(() => {
         ReactDOM.hydrateRoot(container, <TestComponent />, {
           mutableSources: [mutableSource],
+          onRecoverableError(error) {
+            Scheduler.unstable_yieldValue('Log error: ' + error.message);
+          },
         });
 
         source.value = 'two';
@@ -254,11 +257,17 @@ describe('useMutableSourceHydration', () => {
           React.startTransition(() => {
             ReactDOM.hydrateRoot(container, <TestComponent />, {
               mutableSources: [mutableSource],
+              onRecoverableError(error) {
+                Scheduler.unstable_yieldValue('Log error: ' + error.message);
+              },
             });
           });
         } else {
           ReactDOM.hydrateRoot(container, <TestComponent />, {
             mutableSources: [mutableSource],
+            onRecoverableError(error) {
+              Scheduler.unstable_yieldValue('Log error: ' + error.message);
+            },
           });
         }
         expect(Scheduler).toFlushAndYieldThrough(['a:one']);
@@ -269,7 +278,17 @@ describe('useMutableSourceHydration', () => {
         'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
-    expect(Scheduler).toHaveYielded(['a:two', 'b:two']);
+    expect(Scheduler).toHaveYielded([
+      'a:two',
+      'b:two',
+      // TODO: Before onRecoverableError, this error was never surfaced to the
+      // user. The request to file an bug report no longer makes sense.
+      // However, the experimental useMutableSource API is slated for
+      // removal, anyway.
+      'Log error: Cannot read from mutable source during the current ' +
+        'render without tearing. This may be a bug in React. Please file ' +
+        'an issue.',
+    ]);
     expect(source.listenerCount).toBe(2);
   });
 
@@ -328,11 +347,17 @@ describe('useMutableSourceHydration', () => {
           React.startTransition(() => {
             ReactDOM.hydrateRoot(container, fragment, {
               mutableSources: [mutableSource],
+              onRecoverableError(error) {
+                Scheduler.unstable_yieldValue('Log error: ' + error.message);
+              },
             });
           });
         } else {
           ReactDOM.hydrateRoot(container, fragment, {
             mutableSources: [mutableSource],
+            onRecoverableError(error) {
+              Scheduler.unstable_yieldValue('Log error: ' + error.message);
+            },
           });
         }
         expect(Scheduler).toFlushAndYieldThrough(['0:a:one']);
@@ -343,7 +368,17 @@ describe('useMutableSourceHydration', () => {
         'The server HTML was replaced with client content in <div>.',
       {withoutStack: true},
     );
-    expect(Scheduler).toHaveYielded(['0:a:one', '1:b:two']);
+    expect(Scheduler).toHaveYielded([
+      '0:a:one',
+      '1:b:two',
+      // TODO: Before onRecoverableError, this error was never surfaced to the
+      // user. The request to file an bug report no longer makes sense.
+      // However, the experimental useMutableSource API is slated for
+      // removal, anyway.
+      'Log error: Cannot read from mutable source during the current ' +
+        'render without tearing. This may be a bug in React. Please file ' +
+        'an issue.',
+    ]);
   });
 
   // @gate !enableSyncDefaultUpdates
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 6535d8d3fdec..ff5bbf8035f0 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -68,6 +68,7 @@ export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 export const detachDeletedInstance = $$$hostConfig.detachDeletedInstance;
+export const logRecoverableError = $$$hostConfig.logRecoverableError;
 
 // -------------------
 //      Microtasks
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 5ce012a0f538..2cf1e5c2fb31 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -401,7 +401,7 @@ function popComponentStackInDEV(task: Task): void {
   }
 }
 
-function reportError(request: Request, error: mixed): void {
+function logRecoverableError(request: Request, error: mixed): void {
   // 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;
@@ -484,7 +484,7 @@ function renderSuspenseBoundary(
     }
   } catch (error) {
     contentRootSegment.status = ERRORED;
-    reportError(request, error);
+    logRecoverableError(request, error);
     newBoundary.forceClientRender = true;
     // 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.
@@ -1337,7 +1337,7 @@ function erroredTask(
   error: mixed,
 ) {
   // Report the error to a global handler.
-  reportError(request, error);
+  logRecoverableError(request, error);
   if (boundary === null) {
     fatalError(request, error);
   } else {
@@ -1557,7 +1557,7 @@ export function performWork(request: Request): void {
       flushCompletedQueues(request, request.destination);
     }
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   } finally {
     setCurrentResponseState(prevResponseState);
@@ -1945,7 +1945,7 @@ export function startFlowing(request: Request, destination: Destination): void {
   try {
     flushCompletedQueues(request, destination);
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   }
 }
@@ -1960,7 +1960,7 @@ export function abort(request: Request): void {
       flushCompletedQueues(request, request.destination);
     }
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   }
 }
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 418fbb8241a6..052fa730fd91 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -421,7 +421,7 @@ export function resolveModelToJSON(
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
       } else {
-        reportError(request, x);
+        logRecoverableError(request, x);
         // Something errored. We'll still send everything we have up until this point.
         // We'll replace this element with a lazy reference that throws on the client
         // once it gets rendered.
@@ -604,7 +604,7 @@ export function resolveModelToJSON(
   );
 }
 
-function reportError(request: Request, error: mixed): void {
+function logRecoverableError(request: Request, error: mixed): void {
   const onError = request.onError;
   onError(error);
 }
@@ -687,7 +687,7 @@ function retrySegment(request: Request, segment: Segment): void {
       x.then(ping, ping);
       return;
     } else {
-      reportError(request, x);
+      logRecoverableError(request, x);
       // This errored, we need to serialize this error to the
       emitErrorChunk(request, segment.id, x);
     }
@@ -711,7 +711,7 @@ function performWork(request: Request): void {
       flushCompletedChunks(request, request.destination);
     }
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
@@ -794,7 +794,7 @@ export function startFlowing(request: Request, destination: Destination): void {
   try {
     flushCompletedChunks(request, destination);
   } catch (error) {
-    reportError(request, error);
+    logRecoverableError(request, error);
     fatalError(request, error);
   }
 }
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 503b08efaf20..840912db3088 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -314,3 +314,7 @@ export function getInstanceFromScope(scopeInstance: Object): null | Object {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function logRecoverableError(error: mixed): void {
+  // noop
+}
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index de6e4beffec5..a8121d1a14fc 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -472,6 +472,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isStrictMode,
     concurrentUpdatesByDefault,
     '',
+    null,
   );
 
   if (root == null) {
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index f44d4ed7fcd1..4294964a74b9 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -19,6 +19,7 @@ declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: any; /*?{
 };*/
 
 declare var queueMicrotask: (fn: Function) => void;
+declare var reportError: (error: mixed) => void;
 
 declare module 'create-react-class' {
   declare var exports: React$CreateClass;
diff --git a/scripts/print-warnings/print-warnings.js b/scripts/print-warnings/print-warnings.js
index 8e23dd880e92..52fcb9630e1f 100644
--- a/scripts/print-warnings/print-warnings.js
+++ b/scripts/print-warnings/print-warnings.js
@@ -67,12 +67,10 @@ function transform(file, enc, cb) {
               const warningMsgLiteral = evalStringConcat(node.arguments[0]);
               warnings.add(JSON.stringify(warningMsgLiteral));
             } catch (error) {
-              console.error(
-                'Failed to extract warning message from',
-                file.path
-              );
-              console.error(astPath.node.loc);
-              throw error;
+              // 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.
+              return;
             }
           }
         },
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 45b7a41e7e59..802141d6bc10 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -31,6 +31,7 @@ module.exports = {
     ArrayBuffer: 'readonly',
 
     TaskController: 'readonly',
+    reportError: 'readonly',
 
     // Flight
     Uint8Array: 'readonly',
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index 7135a5a706cf..b57956614577 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -30,6 +30,7 @@ module.exports = {
     ArrayBuffer: 'readonly',
 
     TaskController: 'readonly',
+    reportError: 'readonly',
 
     // Flight
     Uint8Array: 'readonly',
diff --git a/scripts/rollup/validate/eslintrc.esm.js b/scripts/rollup/validate/eslintrc.esm.js
index 34cde555478a..23eb027071a2 100644
--- a/scripts/rollup/validate/eslintrc.esm.js
+++ b/scripts/rollup/validate/eslintrc.esm.js
@@ -30,6 +30,7 @@ module.exports = {
     ArrayBuffer: 'readonly',
 
     TaskController: 'readonly',
+    reportError: 'readonly',
 
     // Flight
     Uint8Array: 'readonly',
diff --git a/scripts/rollup/validate/eslintrc.fb.js b/scripts/rollup/validate/eslintrc.fb.js
index d267ca2bec30..2f8740049236 100644
--- a/scripts/rollup/validate/eslintrc.fb.js
+++ b/scripts/rollup/validate/eslintrc.fb.js
@@ -31,6 +31,7 @@ module.exports = {
     ArrayBuffer: 'readonly',
 
     TaskController: 'readonly',
+    reportError: 'readonly',
 
     // Flight
     Uint8Array: 'readonly',
diff --git a/scripts/rollup/validate/eslintrc.rn.js b/scripts/rollup/validate/eslintrc.rn.js
index e466784e8fcb..21d8397487ff 100644
--- a/scripts/rollup/validate/eslintrc.rn.js
+++ b/scripts/rollup/validate/eslintrc.rn.js
@@ -31,6 +31,7 @@ module.exports = {
     ArrayBuffer: 'readonly',
 
     TaskController: 'readonly',
+    reportError: 'readonly',
 
     // jest
     jest: 'readonly',
diff --git a/scripts/rollup/validate/eslintrc.umd.js b/scripts/rollup/validate/eslintrc.umd.js
index 2d274375cca8..223e96d28ef5 100644
--- a/scripts/rollup/validate/eslintrc.umd.js
+++ b/scripts/rollup/validate/eslintrc.umd.js
@@ -36,6 +36,7 @@ module.exports = {
     ArrayBuffer: 'readonly',
 
     TaskController: 'readonly',
+    reportError: 'readonly',
 
     // Flight
     Uint8Array: 'readonly',

From 1d7728bf9daebb7e04f13fc13bb595c12caae46d Mon Sep 17 00:00:00 2001
From: sunderls <2394070+sunderls@users.noreply.github.com>
Date: Mon, 7 Feb 2022 01:10:37 +0000
Subject: [PATCH 1125/1603] update node.js version for CI (#23236)

---
 .circleci/config.yml                                          | 2 +-
 .../src/__tests__/useSyncExternalStoreShared-test.js          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a9905a53b7a9..2e54806b6fff 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,7 +2,7 @@ version: 2.1
 
 aliases:
   - &docker
-    - image: cimg/openjdk:17.0.0-node
+    - image: cimg/openjdk:17.0.2-node
 
   - &environment
     TZ: /usr/share/zoneinfo/America/Los_Angeles
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index cb3a40aa13ab..ca5c7c0b5b91 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -899,7 +899,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         store.set({});
       });
       expect(container.textContent).toEqual(
-        "Cannot read property 'toUpperCase' of undefined",
+        "Cannot read properties of undefined (reading 'toUpperCase')",
       );
     });
 
@@ -935,7 +935,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         store.set({});
       });
       expect(container.textContent).toEqual(
-        "Cannot read property 'trim' of undefined",
+        "Cannot read properties of undefined (reading 'trim')",
       );
     });
   });

From cd4eb116cf24d5b05107caf67b96c8e0f0cd7dbc Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@gmail.com>
Date: Mon, 7 Feb 2022 03:55:57 +0000
Subject: [PATCH 1126/1603] Revert "update node.js version for CI (#23236)"
 (#23239)

This reverts commit 1d7728bf9daebb7e04f13fc13bb595c12caae46d.
---
 .circleci/config.yml                                          | 2 +-
 .../src/__tests__/useSyncExternalStoreShared-test.js          | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2e54806b6fff..a9905a53b7a9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,7 +2,7 @@ version: 2.1
 
 aliases:
   - &docker
-    - image: cimg/openjdk:17.0.2-node
+    - image: cimg/openjdk:17.0.0-node
 
   - &environment
     TZ: /usr/share/zoneinfo/America/Los_Angeles
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index ca5c7c0b5b91..cb3a40aa13ab 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -899,7 +899,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         store.set({});
       });
       expect(container.textContent).toEqual(
-        "Cannot read properties of undefined (reading 'toUpperCase')",
+        "Cannot read property 'toUpperCase' of undefined",
       );
     });
 
@@ -935,7 +935,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
         store.set({});
       });
       expect(container.textContent).toEqual(
-        "Cannot read properties of undefined (reading 'trim')",
+        "Cannot read property 'trim' of undefined",
       );
     });
   });

From 1dece523505390a2e0da5f93db6d0c37287e02c4 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Mon, 7 Feb 2022 17:25:33 -0500
Subject: [PATCH 1127/1603] Add back warning with component stack on Hydration
 mismatch (#23241)

* add back warning

* wrapper errorMock in __DEV__ flag

* lint
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  18 +-
 ...DOMServerPartialHydration-test.internal.js | 251 +++++++++++-------
 .../src/ReactFiberHydrationContext.new.js     |  29 +-
 .../src/ReactFiberHydrationContext.old.js     |  29 +-
 4 files changed, 202 insertions(+), 125 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 483c588c37b9..2fddae2d64df 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1740,8 +1740,13 @@ describe('ReactDOMFizzServer', () => {
             'The server HTML was replaced with client content',
         ]);
       }).toErrorDev(
-        'Warning: An error occurred during hydration. The server HTML was replaced with client content',
-        {withoutStack: true},
+        [
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+          'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
+            '    in div (at **)\n' +
+            '    in App (at **)',
+        ],
+        {withoutStack: 1},
       );
       expect(getVisibleChildren(container)).toEqual(<div>client</div>);
     } else {
@@ -1833,8 +1838,13 @@ describe('ReactDOMFizzServer', () => {
             'The server HTML was replaced with client content',
         ]);
       }).toErrorDev(
-        'Warning: An error occurred during hydration. The server HTML was replaced with client content',
-        {withoutStack: true},
+        [
+          'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+          'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
+            '    in div (at **)\n' +
+            '    in App (at **)',
+        ],
+        {withoutStack: 1},
       );
       expect(getVisibleChildren(container)).toEqual(<div>client</div>);
     } else {
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index e071a3673710..586901baa14c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -19,6 +19,15 @@ let SuspenseList;
 let act;
 let IdleEventPriority;
 
+function normalizeCodeLocInfo(strOrErr) {
+  if (strOrErr && strOrErr.replace) {
+    return strOrErr.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
+      return '\n    in ' + name + ' (at **)';
+    });
+  }
+  return strOrErr;
+}
+
 function dispatchMouseEvent(to, from) {
   if (!to) {
     to = null;
@@ -240,6 +249,12 @@ describe('ReactDOMServerPartialHydration', () => {
 
   // @gate enableClientRenderFallbackOnHydrationMismatch
   it('falls back to client rendering boundary on mismatch', async () => {
+    // We can't use the toErrorDev helper here because this is async.
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
     let client = false;
     let suspend = false;
     let resolve;
@@ -276,70 +291,86 @@ describe('ReactDOMServerPartialHydration', () => {
         </Suspense>
       );
     }
-    const finalHTML = ReactDOMServer.renderToString(<App />);
-    const container = document.createElement('div');
-    container.innerHTML = finalHTML;
-    expect(Scheduler).toHaveYielded([
-      'Hello',
-      'Component',
-      'Component',
-      'Component',
-      'Component',
-    ]);
+    try {
+      const finalHTML = ReactDOMServer.renderToString(<App />);
+      const container = document.createElement('div');
+      container.innerHTML = finalHTML;
+      expect(Scheduler).toHaveYielded([
+        'Hello',
+        'Component',
+        'Component',
+        'Component',
+        'Component',
+      ]);
 
-    expect(container.innerHTML).toBe(
-      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
-    );
+      expect(container.innerHTML).toBe(
+        '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+      );
 
-    suspend = true;
-    client = true;
+      suspend = true;
+      client = true;
 
-    ReactDOM.hydrateRoot(container, <App />, {
-      onRecoverableError(error) {
-        Scheduler.unstable_yieldValue(error.message);
-      },
-    });
-    expect(Scheduler).toFlushAndYield([
-      'Suspend',
-      'Component',
-      'Component',
-      'Component',
-      'Component',
-    ]);
-    jest.runAllTimers();
+      ReactDOM.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([
+        'Suspend',
+        'Component',
+        'Component',
+        'Component',
+        'Component',
+      ]);
+      jest.runAllTimers();
 
-    // Unchanged
-    expect(container.innerHTML).toBe(
-      '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
-    );
+      // Unchanged
+      expect(container.innerHTML).toBe(
+        '<!--$-->Hello<div>Component</div><div>Component</div><div>Component</div><div>Component</div><!--/$-->',
+      );
 
-    suspend = false;
-    resolve();
-    await promise;
+      suspend = false;
+      resolve();
+      await promise;
+      expect(Scheduler).toFlushAndYield([
+        // first pass, mismatches at end
+        'Hello',
+        'Component',
+        'Component',
+        'Component',
+        'Component',
+
+        // second pass as client render
+        'Hello',
+        'Component',
+        'Component',
+        'Component',
+        'Component',
+
+        // Hydration mismatch is logged
+        'An error occurred during hydration. The server HTML was replaced with client content',
+      ]);
 
-    expect(Scheduler).toFlushAndYield([
-      // first pass, mismatches at end
-      'Hello',
-      'Component',
-      'Component',
-      'Component',
-      'Component',
-
-      // second pass as client render
-      'Hello',
-      'Component',
-      'Component',
-      'Component',
-      'Component',
-
-      // Hydration mismatch is logged
-      'An error occurred during hydration. The server HTML was replaced with client content',
-    ]);
+      // Client rendered - suspense comment nodes removed
+      expect(container.innerHTML).toBe(
+        'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
+      );
 
-    // Client rendered - suspense comment nodes removed
-    expect(container.innerHTML).toBe(
-      'Hello<div>Component</div><div>Component</div><div>Component</div><article>Mismatch</article>',
-    );
+      if (__DEV__) {
+        expect(mockError.mock.calls[0]).toEqual([
+          'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
+          'div',
+          'div',
+          '\n' +
+            '    in div (at **)\n' +
+            '    in Component (at **)\n' +
+            '    in Suspense (at **)\n' +
+            '    in App (at **)',
+        ]);
+      }
+    } finally {
+      console.error = originalConsoleError;
+    }
   });
 
   it('calls the hydration callbacks after hydration or deletion', async () => {
@@ -493,21 +524,14 @@ describe('ReactDOMServerPartialHydration', () => {
   });
 
   it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
-    spyOnDev(console, 'error');
-    const ref = React.createRef();
-    function App({hasB}) {
-      return (
-        <div>
-          <Suspense fallback="Loading...">
-            <Suspender />
-            <span ref={ref}>A</span>
-            {hasB ? <span>B</span> : null}
-          </Suspense>
-          <div>Sibling</div>
-        </div>
-      );
-    }
+    // We can't use the toErrorDev helper here because this is async.
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
 
+    const ref = React.createRef();
     let shouldSuspend = false;
     let resolve;
     const promise = new Promise(res => {
@@ -522,37 +546,61 @@ describe('ReactDOMServerPartialHydration', () => {
       }
       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>
+      );
+    }
+    try {
+      const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
 
-    const finalHTML = ReactDOMServer.renderToString(<App hasB={true} />);
-
-    const container = document.createElement('div');
-    container.innerHTML = finalHTML;
+      const container = document.createElement('div');
+      container.innerHTML = finalHTML;
 
-    const span = container.getElementsByTagName('span')[0];
+      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);
+      expect(container.innerHTML).toContain('<span>A</span>');
+      expect(container.innerHTML).toContain('<span>B</span>');
+      expect(ref.current).toBe(null);
 
-    shouldSuspend = true;
-    act(() => {
-      ReactDOM.hydrateRoot(container, <App hasB={false} />);
-    });
+      shouldSuspend = true;
+      act(() => {
+        ReactDOM.hydrateRoot(container, <App hasB={false} />);
+      });
 
-    // await expect(async () => {
-    resolve();
-    await promise;
-    Scheduler.unstable_flushAll();
-    await null;
-    jest.runAllTimers();
-    // }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
+      resolve();
+      await promise;
+      Scheduler.unstable_flushAll();
+      await null;
+      jest.runAllTimers();
 
-    expect(container.innerHTML).toContain('<span>A</span>');
-    expect(container.innerHTML).not.toContain('<span>B</span>');
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(ref.current).not.toBe(span);
-    } else {
-      expect(ref.current).toBe(span);
+      expect(container.innerHTML).toContain('<span>A</span>');
+      expect(container.innerHTML).not.toContain('<span>B</span>');
+      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+        expect(ref.current).not.toBe(span);
+      } else {
+        expect(ref.current).toBe(span);
+      }
+      if (__DEV__) {
+        expect(mockError).toHaveBeenCalledWith(
+          'Warning: Did not expect server HTML to contain a <%s> in <%s>.%s',
+          'span',
+          'div',
+          '\n' +
+            '    in Suspense (at **)\n' +
+            '    in div (at **)\n' +
+            '    in App (at **)',
+        );
+      }
+    } finally {
+      console.error = originalConsoleError;
     }
   });
 
@@ -3179,9 +3227,14 @@ describe('ReactDOMServerPartialHydration', () => {
         });
       });
     }).toErrorDev(
-      'Warning: An error occurred during hydration. ' +
-        'The server HTML was replaced with client content in <div>.',
-      {withoutStack: true},
+      [
+        'Warning: An error occurred during hydration. ' +
+          'The server HTML was replaced with client content in <div>.',
+        'Warning: Expected server HTML to contain a matching <span> in <div>.\n' +
+          '    in span (at **)\n' +
+          '    in App (at **)',
+      ],
+      {withoutStack: 1},
     );
     expect(Scheduler).toHaveYielded([
       'Log recoverable error: An error occurred during hydration. The server ' +
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 4a460d584a53..ab2d05cea0aa 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -183,8 +183,7 @@ function deleteHydratableInstance(
   }
 }
 
-function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
-  fiber.flags = (fiber.flags & ~Hydrating) | Placement;
+function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
   if (__DEV__) {
     switch (returnFiber.tag) {
       case HostRoot: {
@@ -283,6 +282,10 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
     }
   }
 }
+function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
+  fiber.flags = (fiber.flags & ~Hydrating) | Placement;
+  warnNonhydratedInstance(returnFiber, fiber);
+}
 
 function tryHydrate(fiber, nextInstance) {
   switch (fiber.tag) {
@@ -353,12 +356,10 @@ function shouldClientRenderOnMismatch(fiber: Fiber) {
   );
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
-  if (shouldClientRenderOnMismatch(fiber)) {
-    throw new Error(
-      'An error occurred during hydration. The server HTML was replaced with client content',
-    );
-  }
+function throwOnHydrationMismatch(fiber: Fiber) {
+  throw new Error(
+    'An error occurred during hydration. The server HTML was replaced with client content',
+  );
 }
 
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
@@ -367,7 +368,10 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
-    throwOnHydrationMismatchIfConcurrentMode(fiber);
+    if (shouldClientRenderOnMismatch(fiber)) {
+      warnNonhydratedInstance((hydrationParentFiber: any), fiber);
+      throwOnHydrationMismatch(fiber);
+    }
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -376,7 +380,10 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
-    throwOnHydrationMismatchIfConcurrentMode(fiber);
+    if (shouldClientRenderOnMismatch(fiber)) {
+      warnNonhydratedInstance((hydrationParentFiber: any), fiber);
+      throwOnHydrationMismatch(fiber);
+    }
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
@@ -565,7 +572,7 @@ function popHydrationState(fiber: Fiber): boolean {
     if (nextInstance) {
       if (shouldClientRenderOnMismatch(fiber)) {
         warnIfUnhydratedTailNodes(fiber);
-        throwOnHydrationMismatchIfConcurrentMode(fiber);
+        throwOnHydrationMismatch(fiber);
       } else {
         while (nextInstance) {
           deleteHydratableInstance(fiber, nextInstance);
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 3ee040237829..9ad186495d8e 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -183,8 +183,7 @@ function deleteHydratableInstance(
   }
 }
 
-function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
-  fiber.flags = (fiber.flags & ~Hydrating) | Placement;
+function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
   if (__DEV__) {
     switch (returnFiber.tag) {
       case HostRoot: {
@@ -283,6 +282,10 @@ function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
     }
   }
 }
+function insertNonHydratedInstance(returnFiber: Fiber, fiber: Fiber) {
+  fiber.flags = (fiber.flags & ~Hydrating) | Placement;
+  warnNonhydratedInstance(returnFiber, fiber);
+}
 
 function tryHydrate(fiber, nextInstance) {
   switch (fiber.tag) {
@@ -353,12 +356,10 @@ function shouldClientRenderOnMismatch(fiber: Fiber) {
   );
 }
 
-function throwOnHydrationMismatchIfConcurrentMode(fiber: Fiber) {
-  if (shouldClientRenderOnMismatch(fiber)) {
-    throw new Error(
-      'An error occurred during hydration. The server HTML was replaced with client content',
-    );
-  }
+function throwOnHydrationMismatch(fiber: Fiber) {
+  throw new Error(
+    'An error occurred during hydration. The server HTML was replaced with client content',
+  );
 }
 
 function tryToClaimNextHydratableInstance(fiber: Fiber): void {
@@ -367,7 +368,10 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
-    throwOnHydrationMismatchIfConcurrentMode(fiber);
+    if (shouldClientRenderOnMismatch(fiber)) {
+      warnNonhydratedInstance((hydrationParentFiber: any), fiber);
+      throwOnHydrationMismatch(fiber);
+    }
     // Nothing to hydrate. Make it an insertion.
     insertNonHydratedInstance((hydrationParentFiber: any), fiber);
     isHydrating = false;
@@ -376,7 +380,10 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   }
   const firstAttemptedInstance = nextInstance;
   if (!tryHydrate(fiber, nextInstance)) {
-    throwOnHydrationMismatchIfConcurrentMode(fiber);
+    if (shouldClientRenderOnMismatch(fiber)) {
+      warnNonhydratedInstance((hydrationParentFiber: any), fiber);
+      throwOnHydrationMismatch(fiber);
+    }
     // If we can't hydrate this instance let's try the next one.
     // We use this as a heuristic. It's based on intuition and not data so it
     // might be flawed or unnecessary.
@@ -565,7 +572,7 @@ function popHydrationState(fiber: Fiber): boolean {
     if (nextInstance) {
       if (shouldClientRenderOnMismatch(fiber)) {
         warnIfUnhydratedTailNodes(fiber);
-        throwOnHydrationMismatchIfConcurrentMode(fiber);
+        throwOnHydrationMismatch(fiber);
       } else {
         while (nextInstance) {
           deleteHydratableInstance(fiber, nextInstance);

From 9d4e8e84f7fb782385d81ffcdcda73822acf4ad1 Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshua.gross@gmail.com>
Date: Mon, 7 Feb 2022 18:34:01 -0800
Subject: [PATCH 1128/1603] React Native raw event EventEmitter - intended for
 app-specific perf listeners and debugging (#23232)

* RawEventEmitter: new event perf profiling mechanism outside of Pressability to capture all touch events, and other event types

* sync

* concise notation

* Move event telemetry event emitter call from Plugin to ReactFabricEventEmitter, to reduce reliance on the plugin system and move the emit call further into the core

* Backout changes to ReactNativeEventPluginOrder

* Properly flow typing event emitter, and emit event to two channels: named and catchall

* fix typing for event name string

* fix typing for event name string

* fix flow

* Add more comments about how the event telemetry system works

* Add more comments about how the event telemetry system works

* rename to RawEventTelemetryEventEmitterOffByDefault

* yarn prettier-all

* rename event

* comments

* improve flow types

* renamed file
---
 .../src/ReactFabricEventEmitter.js            | 29 ++++++++++++++++++-
 .../Libraries/ReactPrivate/RawEventEmitter.js | 16 ++++++++++
 .../ReactNativePrivateInterface.js            |  3 ++
 scripts/flow/react-native-host-hooks.js       | 11 +++++++
 4 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RawEventEmitter.js

diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
index 15798d8f777e..d8492156fdc7 100644
--- a/packages/react-native-renderer/src/ReactFabricEventEmitter.js
+++ b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
@@ -21,6 +21,8 @@ import {plugins} from './legacy-events/EventPluginRegistry';
 import getListener from './ReactNativeGetListener';
 import {runEventsInBatch} from './legacy-events/EventBatching';
 
+import {RawEventEmitter} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
 export {getListener, registrationNameModules as registrationNames};
 
 /**
@@ -73,7 +75,7 @@ function runExtractedPluginEventsInBatch(
 
 export function dispatchEvent(
   target: null | Object,
-  topLevelType: TopLevelType,
+  topLevelType: RNTopLevelEventType,
   nativeEvent: AnyNativeEvent,
 ) {
   const targetFiber = (target: null | Fiber);
@@ -88,6 +90,31 @@ export function dispatchEvent(
   }
 
   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};
+    RawEventEmitter.emit(topLevelType, event);
+    RawEventEmitter.emit('*', event);
+
     // Heritage plugin event system
     runExtractedPluginEventsInBatch(
       topLevelType,
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 000000000000..abb419842bee
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/RawEventEmitter.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'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/ReactNativePrivateInterface.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
index 3def12a904f6..3eaf3a5a3805 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -41,4 +41,7 @@ module.exports = {
   get legacySendAccessibilityEvent() {
     return require('./legacySendAccessibilityEvent');
   },
+  get RawEventEmitter() {
+    return require('./RawEventEmitter').default;
+  },
 };
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 770b77a84082..c7a2fc8dc321 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -21,6 +21,13 @@ import type {CapturedError} from 'react-reconciler/src/ReactCapturedValue';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
 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 module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface' {
   declare export function deepDiffer(
@@ -127,6 +134,10 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
     get: (name: string) => ReactNativeBaseComponentViewConfig,
     ...
   };
+  declare export var RawEventEmitter: {
+    emit: (channel: string, event: RawEventEmitterEvent) => string,
+    ...
+  };
 }
 
 declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore' {

From 7b541a980dbebc3b44b6c3b0c2806add79786222 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 8 Feb 2022 17:19:52 -0500
Subject: [PATCH 1129/1603] Add exports field to react-dom (#23252)

This configures the exports field for react-dom.

Notably there are some conditions for the /server entry point where we pick
the export based on environments. Most environments now support Web Streams
which is preferred in those environments.

We already do this using the "browser" field so the "browser" condition
applies here too.

I don't think it's necessary, but I also specified "worker" explicitly
since this is for Service Workers and those are often targeted with
Web Pack's "webworker" target, which is also what Cloudflare currently
recommends.

I also added "deno" but deno is a bit special because this only works if
you run with the node compatibility since otherwise you have to specify
absolute URLs for the imports.
---
 packages/react-dom/package.json | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index c60f4950dd6c..6125002eb82a 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -38,6 +38,19 @@
     "cjs/",
     "umd/"
   ],
+  "exports": {
+    ".": "./index.js",
+    "./server": {
+      "deno": "./server.browser.js",
+      "worker": "./server.browser.js",
+      "browser": "./server.browser.js",
+      "default": "./server.node.js"
+    },
+    "./profiling": "./profiling.js",
+    "./test-utils": "./test-utils.js",
+    "./package.json": "./package.json",
+    "./": "./"
+  },
   "browser": {
     "./server.js": "./server.browser.js"
   },

From 0dedfcc681d7963c5d4d138dc8eba69539a56015 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 8 Feb 2022 21:07:26 -0500
Subject: [PATCH 1130/1603] Update the exports field (#23257)

* Add .browser and .node explicit entry points

This can be useful when the automatic selection doesn't work properly.

* Remove react/index

I'm not sure why I added this in the first place. Perhaps due to how our
builds work somehow.

* Remove build-info.json from files field
---
 packages/create-subscription/package.json       | 1 -
 packages/eslint-plugin-react-hooks/package.json | 1 -
 packages/jest-mock-scheduler/package.json       | 1 -
 packages/jest-react/package.json                | 1 -
 packages/react-art/package.json                 | 1 -
 packages/react-cache/package.json               | 1 -
 packages/react-debug-tools/package.json         | 1 -
 packages/react-devtools-core/package.json       | 1 -
 packages/react-devtools-inline/package.json     | 1 -
 packages/react-dom/package.json                 | 4 +++-
 packages/react-fetch/package.json               | 1 -
 packages/react-fs/package.json                  | 1 -
 packages/react-interactions/package.json        | 1 -
 packages/react-is/package.json                  | 1 -
 packages/react-noop-renderer/package.json       | 1 -
 packages/react-pg/package.json                  | 1 -
 packages/react-reconciler/package.json          | 1 -
 packages/react-refresh/package.json             | 1 -
 packages/react-server-dom-webpack/package.json  | 1 -
 packages/react-test-renderer/package.json       | 1 -
 packages/react/package.json                     | 4 ----
 packages/scheduler/package.json                 | 1 -
 packages/use-subscription/package.json          | 1 -
 packages/use-sync-external-store/package.json   | 1 -
 24 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/packages/create-subscription/package.json b/packages/create-subscription/package.json
index 4342325d50f2..3d66d01ce8e3 100644
--- a/packages/create-subscription/package.json
+++ b/packages/create-subscription/package.json
@@ -10,7 +10,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/"
   ],
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 6bf810a7712b..166dd0309dd7 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -10,7 +10,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs"
   ],
diff --git a/packages/jest-mock-scheduler/package.json b/packages/jest-mock-scheduler/package.json
index c886ff325dce..16761b19d375 100644
--- a/packages/jest-mock-scheduler/package.json
+++ b/packages/jest-mock-scheduler/package.json
@@ -25,7 +25,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/"
   ]
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
index 4f0198a39008..0a1c764be2fe 100644
--- a/packages/jest-react/package.json
+++ b/packages/jest-react/package.json
@@ -29,7 +29,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/"
   ]
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index 00b1c30d982f..fabdcd560f9c 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -34,7 +34,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/",
     "umd/",
diff --git a/packages/react-cache/package.json b/packages/react-cache/package.json
index 670edefbe179..1c78f26594f6 100644
--- a/packages/react-cache/package.json
+++ b/packages/react-cache/package.json
@@ -11,7 +11,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/",
     "umd/"
diff --git a/packages/react-debug-tools/package.json b/packages/react-debug-tools/package.json
index 9b4bc145da6f..69327edaeb1f 100644
--- a/packages/react-debug-tools/package.json
+++ b/packages/react-debug-tools/package.json
@@ -12,7 +12,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/"
   ],
diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index e4a494debf32..a9b25b0d1bf5 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -12,7 +12,6 @@
   "files": [
     "dist",
     "backend.js",
-    "build-info.json",
     "standalone.js"
   ],
   "scripts": {
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 0905224fefac..256c4c790671 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -12,7 +12,6 @@
   "files": [
     "dist",
     "backend.js",
-    "build-info.json",
     "frontend.js",
     "hookNames.js"
   ],
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 6125002eb82a..90b0560e42b1 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -27,7 +27,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "profiling.js",
     "server.js",
@@ -46,8 +45,11 @@
       "browser": "./server.browser.js",
       "default": "./server.node.js"
     },
+    "./server.browser": "./server.browser.js",
+    "./server.node": "./server.node.js",
     "./profiling": "./profiling.js",
     "./test-utils": "./test-utils.js",
+    "./unstable_testing": "./unstable_testing.js",
     "./package.json": "./package.json",
     "./": "./"
   },
diff --git a/packages/react-fetch/package.json b/packages/react-fetch/package.json
index 4594c8d32b5b..7acbaab4b26b 100644
--- a/packages/react-fetch/package.json
+++ b/packages/react-fetch/package.json
@@ -10,7 +10,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "index.node.js",
     "index.browser.js",
diff --git a/packages/react-fs/package.json b/packages/react-fs/package.json
index e1af0d2b90a9..00c1c589b2be 100644
--- a/packages/react-fs/package.json
+++ b/packages/react-fs/package.json
@@ -10,7 +10,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "index.node.server.js",
     "index.browser.server.js",
diff --git a/packages/react-interactions/package.json b/packages/react-interactions/package.json
index c2ef0f831632..e1c1ac08935c 100644
--- a/packages/react-interactions/package.json
+++ b/packages/react-interactions/package.json
@@ -21,7 +21,6 @@
     "events/press.js",
     "events/press-legacy.js",
     "events/tap.js",
-    "build-info.json",
     "cjs/",
     "umd/"
   ],
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index 0637792729f1..e4aac2bc69cc 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -19,7 +19,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/",
     "umd/"
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
index 020a0e87f726..22eab24f8c5a 100644
--- a/packages/react-noop-renderer/package.json
+++ b/packages/react-noop-renderer/package.json
@@ -22,7 +22,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "persistent.js",
     "server.js",
diff --git a/packages/react-pg/package.json b/packages/react-pg/package.json
index 0930085452ce..25743847b183 100644
--- a/packages/react-pg/package.json
+++ b/packages/react-pg/package.json
@@ -10,7 +10,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "index.node.server.js",
     "index.browser.server.js",
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 14ca5c03670e..a6b9986adaea 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -11,7 +11,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "constants.js",
     "index.js",
     "reflection.js",
diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index c52b4f7fd8bd..4ba195d0dd1f 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -13,7 +13,6 @@
     "README.md",
     "babel.js",
     "runtime.js",
-    "build-info.json",
     "cjs/",
     "umd/"
   ],
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index 8ae583907405..af705d975db7 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -11,7 +11,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "plugin.js",
     "writer.js",
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index 1daa2c54308f..26e033764182 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -30,7 +30,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "shallow.js",
     "cjs/",
diff --git a/packages/react/package.json b/packages/react/package.json
index fa8d0c3fbd0c..d7f2ac8d99a0 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -24,10 +24,6 @@
       "react-server": "./unstable-shared-subset.js",
       "default": "./index.js"
     },
-    "./index": {
-      "react-server": "./unstable-shared-subset.js",
-      "default": "./index.js"
-    },
     "./package.json": "./package.json",
     "./jsx-runtime": "./jsx-runtime.js",
     "./jsx-dev-runtime": "./jsx-dev-runtime.js",
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index b22fc085290e..3f88ee56bbf7 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -23,7 +23,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "unstable_mock.js",
     "unstable_post_task.js",
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index 7af8cc7bc51e..0c270f5e08ee 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -10,7 +10,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "cjs/"
   ],
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index 33f0f45b4e25..f2e1bc45a4ef 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -10,7 +10,6 @@
   "files": [
     "LICENSE",
     "README.md",
-    "build-info.json",
     "index.js",
     "index.native.js",
     "with-selector.js",

From 5690932765b65998ea9f054f0740002257b7675c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 8 Feb 2022 22:38:14 -0500
Subject: [PATCH 1131/1603] Add onErrorShell Callback (#23247)

This indicates that an error has happened before the shell completed and
there's no point in emitting the result of this stream.

This is not quite the same as other fatal errors that can happen even
after streaming as started.

It's also not quite the same as onError before onCompleteShell because
onError can be called for an error inside a Suspense boundary before the
shell completes.

Implement shell error handling in Node SSR fixtures

Instead of hanging indefinitely.

Update Browser Fixture

Expose onErrorShell to the Node build

This API is not Promisified so it's just a separate callback instead.

Promisify the Browser Fizz API

It's now a Promise of a readable stream. The Promise resolves when the
shell completes. If the shell errors, the Promise is rejected.
---
 fixtures/fizz-ssr-browser/index.html          | 36 +++++---
 fixtures/ssr/server/render.js                 |  5 ++
 fixtures/ssr2/server/render.js                |  5 ++
 .../ReactDOMFizzServerBrowser-test.js         | 76 ++++++++---------
 .../__tests__/ReactDOMFizzServerNode-test.js  | 15 ++++
 .../src/server/ReactDOMFizzServerBrowser.js   | 85 ++++++++++---------
 .../src/server/ReactDOMFizzServerNode.js      |  2 +
 packages/react-server/src/ReactFizzServer.js  |  9 ++
 8 files changed, 137 insertions(+), 96 deletions(-)

diff --git a/fixtures/fizz-ssr-browser/index.html b/fixtures/fizz-ssr-browser/index.html
index 82ed7bf6145d..3d2b42231005 100644
--- a/fixtures/fizz-ssr-browser/index.html
+++ b/fixtures/fizz-ssr-browser/index.html
@@ -20,22 +20,29 @@ <h1>Fizz Example</h1>
     <script src="../../build/node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
     <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
     <script type="text/babel">
-      let controller = new AbortController();
-      let stream = ReactDOMServer.renderToReadableStream(
-        <html>
-          <body>Success</body>
-        </html>,
-        {
-          signal: controller.signal,
+      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 response = new Response(stream, {
-        headers: {'Content-Type': 'text/html'},
-      });
-      display(response);
 
-      async function display(responseToDisplay) {
-        let blob = await responseToDisplay.blob();
+        let blob = await response.blob();
         let url = URL.createObjectURL(blob);
         let iframe = document.createElement('iframe');
         iframe.src = url;
@@ -43,6 +50,7 @@ <h1>Fizz Example</h1>
         container.innerHTML = '';
         container.appendChild(iframe);
       }
+      render();
     </script>
   </body>
 </html>
diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index 9857a8a83dcf..ae30e622174c 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -28,6 +28,11 @@ export default function render(url, res) {
       res.setHeader('Content-type', 'text/html');
       pipe(res);
     },
+    onErrorShell(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);
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index fa91f763f290..ccd12af0d363 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -49,6 +49,11 @@ module.exports = function render(url, res) {
         res.setHeader('Content-type', 'text/html');
         pipe(res);
       },
+      onErrorShell(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);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 53a17c8b6ec2..87d04bdd0765 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -51,7 +51,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should call renderToReadableStream', async () => {
-    const stream = ReactDOMFizzServer.renderToReadableStream(
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>hello world</div>,
     );
     const result = await readResult(stream);
@@ -60,7 +60,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should emit DOCTYPE at the root of the document', async () => {
-    const stream = ReactDOMFizzServer.renderToReadableStream(
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
       <html>
         <body>hello world</body>
       </html>,
@@ -73,7 +73,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should emit bootstrap script src at the end', async () => {
-    const stream = ReactDOMFizzServer.renderToReadableStream(
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>hello world</div>,
       {
         bootstrapScriptContent: 'INIT();',
@@ -99,7 +99,7 @@ describe('ReactDOMFizzServer', () => {
       return 'Done';
     }
     let isComplete = false;
-    const stream = ReactDOMFizzServer.renderToReadableStream(
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback="Loading">
           <Wait />
@@ -128,63 +128,55 @@ describe('ReactDOMFizzServer', () => {
   });
 
   // @gate experimental
-  it('should error the stream when an error is thrown at the root', async () => {
+  it('should reject the promise when an error is thrown at the root', async () => {
     const reportedErrors = [];
-    const stream = ReactDOMFizzServer.renderToReadableStream(
-      <div>
-        <Throw />
-      </div>,
-      {
-        onError(x) {
-          reportedErrors.push(x);
-        },
-      },
-    );
-
     let caughtError = null;
-    let result = '';
     try {
-      result = await readResult(stream);
-    } catch (x) {
-      caughtError = x;
+      await ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Throw />
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      );
+    } catch (error) {
+      caughtError = error;
     }
     expect(caughtError).toBe(theError);
-    expect(result).toBe('');
     expect(reportedErrors).toEqual([theError]);
   });
 
   // @gate experimental
-  it('should error the stream when an error is thrown inside a fallback', async () => {
+  it('should reject the promise when an error is thrown inside a fallback', async () => {
     const reportedErrors = [];
-    const stream = ReactDOMFizzServer.renderToReadableStream(
-      <div>
-        <Suspense fallback={<Throw />}>
-          <InfiniteSuspend />
-        </Suspense>
-      </div>,
-      {
-        onError(x) {
-          reportedErrors.push(x);
-        },
-      },
-    );
-
     let caughtError = null;
-    let result = '';
     try {
-      result = await readResult(stream);
-    } catch (x) {
-      caughtError = x;
+      await ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback={<Throw />}>
+            <InfiniteSuspend />
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      );
+    } catch (error) {
+      caughtError = error;
     }
     expect(caughtError).toBe(theError);
-    expect(result).toBe('');
     expect(reportedErrors).toEqual([theError]);
   });
 
   // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
     const reportedErrors = [];
-    const stream = ReactDOMFizzServer.renderToReadableStream(
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Throw />
@@ -205,7 +197,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     const controller = new AbortController();
-    const stream = ReactDOMFizzServer.renderToReadableStream(
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <InfiniteSuspend />
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index a453e0347d8d..a35a250282ec 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -168,6 +168,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   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>
@@ -178,6 +179,9 @@ describe('ReactDOMFizzServer', () => {
         onError(x) {
           reportedErrors.push(x);
         },
+        onErrorShell(x) {
+          reportedShellErrors.push(x);
+        },
       },
     );
 
@@ -190,11 +194,13 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toBe('');
     // This type of error is reported to the error callback too.
     expect(reportedErrors).toEqual([theError]);
+    expect(reportedShellErrors).toEqual([theError]);
   });
 
   // @gate experimental
   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>
@@ -207,6 +213,9 @@ describe('ReactDOMFizzServer', () => {
         onError(x) {
           reportedErrors.push(x);
         },
+        onErrorShell(x) {
+          reportedShellErrors.push(x);
+        },
       },
     );
     pipe(writable);
@@ -216,11 +225,13 @@ describe('ReactDOMFizzServer', () => {
     expect(output.error).toBe(theError);
     expect(output.result).toBe('');
     expect(reportedErrors).toEqual([theError]);
+    expect(reportedShellErrors).toEqual([theError]);
   });
 
   // @gate experimental
   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>
@@ -233,6 +244,9 @@ describe('ReactDOMFizzServer', () => {
         onError(x) {
           reportedErrors.push(x);
         },
+        onErrorShell(x) {
+          reportedShellErrors.push(x);
+        },
       },
     );
     pipe(writable);
@@ -243,6 +257,7 @@ describe('ReactDOMFizzServer', () => {
     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([]);
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 907f0823cffe..15fc69437ca1 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -32,7 +32,6 @@ type Options = {|
   bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
-  onCompleteShell?: () => void,
   onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
 |};
@@ -40,46 +39,52 @@ type Options = {|
 function renderToReadableStream(
   children: ReactNodeList,
   options?: Options,
-): ReadableStream {
-  const request = createRequest(
-    children,
-    createResponseState(
-      options ? options.identifierPrefix : undefined,
-      options ? options.nonce : undefined,
-      options ? options.bootstrapScriptContent : undefined,
-      options ? options.bootstrapScripts : undefined,
-      options ? options.bootstrapModules : undefined,
-    ),
-    createRootFormatContext(options ? options.namespaceURI : undefined),
-    options ? options.progressiveChunkSize : undefined,
-    options ? options.onError : undefined,
-    options ? options.onCompleteAll : undefined,
-    options ? options.onCompleteShell : undefined,
-  );
-  if (options && options.signal) {
-    const signal = options.signal;
-    const listener = () => {
-      abort(request);
-      signal.removeEventListener('abort', listener);
-    };
-    signal.addEventListener('abort', listener);
-  }
-  const stream = new ReadableStream({
-    start(controller) {
-      startWork(request);
-    },
-    pull(controller) {
-      // Pull is called immediately even if the stream is not passed to anything.
-      // That's buffering too early. We want to start buffering once the stream
-      // is actually used by something so we can give it the best result possible
-      // at that point.
-      if (stream.locked) {
-        startFlowing(request, controller);
-      }
-    },
-    cancel(reason) {},
+): Promise<ReadableStream> {
+  return new Promise((resolve, reject) => {
+    function onCompleteShell() {
+      const stream = new ReadableStream({
+        pull(controller) {
+          // Pull is called immediately even if the stream is not passed to anything.
+          // That's buffering too early. We want to start buffering once the stream
+          // is actually used by something so we can give it the best result possible
+          // at that point.
+          if (stream.locked) {
+            startFlowing(request, controller);
+          }
+        },
+        cancel(reason) {},
+      });
+      resolve(stream);
+    }
+    function onErrorShell(error: mixed) {
+      reject(error);
+    }
+    const request = createRequest(
+      children,
+      createResponseState(
+        options ? options.identifierPrefix : undefined,
+        options ? options.nonce : undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : undefined,
+      ),
+      createRootFormatContext(options ? options.namespaceURI : undefined),
+      options ? options.progressiveChunkSize : undefined,
+      options ? options.onError : undefined,
+      options ? options.onCompleteAll : undefined,
+      onCompleteShell,
+      onErrorShell,
+    );
+    if (options && options.signal) {
+      const signal = options.signal;
+      const listener = () => {
+        abort(request);
+        signal.removeEventListener('abort', listener);
+      };
+      signal.addEventListener('abort', listener);
+    }
+    startWork(request);
   });
-  return stream;
 }
 
 export {renderToReadableStream, ReactVersion as version};
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 33a7083bb95e..15e263618706 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -37,6 +37,7 @@ type Options = {|
   bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   onCompleteShell?: () => void,
+  onErrorShell?: () => void,
   onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
 |};
@@ -63,6 +64,7 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
     options ? options.onError : undefined,
     options ? options.onCompleteAll : undefined,
     options ? options.onCompleteShell : undefined,
+    options ? options.onErrorShell : undefined,
   );
 }
 
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 2cf1e5c2fb31..e46aee9a45cd 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -199,6 +199,9 @@ export opaque type Request = {
   // 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.
   onCompleteShell: () => void,
+  // onErrorShell is called when the shell didn't complete. That means you probably want to
+  // emit a different response to the stream instead.
+  onErrorShell: (error: mixed) => void,
 };
 
 // This is a default heuristic for how to split up the HTML content into progressive
@@ -232,6 +235,7 @@ export function createRequest(
   onError: void | ((error: mixed) => void),
   onCompleteAll: void | (() => void),
   onCompleteShell: void | (() => void),
+  onErrorShell: void | ((error: mixed) => void),
 ): Request {
   const pingedTasks = [];
   const abortSet: Set<Task> = new Set();
@@ -256,6 +260,7 @@ export function createRequest(
     onError: onError === undefined ? defaultErrorHandler : onError,
     onCompleteAll: onCompleteAll === undefined ? noop : onCompleteAll,
     onCompleteShell: onCompleteShell === undefined ? noop : onCompleteShell,
+    onErrorShell: onErrorShell === undefined ? noop : onErrorShell,
   };
   // This segment represents the root fallback.
   const rootSegment = createPendingSegment(request, 0, null, rootFormatContext);
@@ -412,6 +417,8 @@ function fatalError(request: Request, error: mixed): 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 onErrorShell = request.onErrorShell;
+  onErrorShell(error);
   if (request.destination !== null) {
     request.status = CLOSED;
     closeWithError(request.destination, error);
@@ -1433,6 +1440,8 @@ function finishedTask(
     }
     request.pendingRootTasks--;
     if (request.pendingRootTasks === 0) {
+      // We have completed the shell so the shell can't error anymore.
+      request.onErrorShell = noop;
       const onCompleteShell = request.onCompleteShell;
       onCompleteShell();
     }

From a3bde7974c48cfa749b18531700f895c86cbad91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 8 Feb 2022 23:12:31 -0500
Subject: [PATCH 1132/1603] Exclude react-dom/unstable_testing entry point from
 stable releases (#23258)

* Use consistent naming for unstable_testing entry point

* Exclude the testing build from non-experimental builds except at FB

* FB builds shouldn't contribute to whether we include the npm files

* Exclude exports fields if we delete the files entry

* Move test to no longer be internal so we can test against the build

* Update the bundle artifact names since they've now changed

* Gate import since it doesn't exist
---
 packages/react-dom/npm/unstable_testing.js    |  4 +--
 ...ernal.js => ReactDOMTestSelectors-test.js} | 30 ++++++++++---------
 ...c.fb.js => unstable_testing.classic.fb.js} |  0
 ...al.js => unstable_testing.experimental.js} |  0
 .../{testing.js => unstable_testing.js}       |  0
 ...rn.fb.js => unstable_testing.modern.fb.js} |  0
 ...g.stable.js => unstable_testing.stable.js} |  0
 scripts/rollup/bundles.js                     |  7 +++--
 scripts/rollup/forks.js                       |  2 +-
 scripts/rollup/packaging.js                   | 15 +++++++++-
 scripts/shared/inlinedHostConfigs.js          |  6 ++--
 11 files changed, 40 insertions(+), 24 deletions(-)
 rename packages/react-dom/src/__tests__/{ReactDOMTestSelectors-test.internal.js => ReactDOMTestSelectors-test.js} (98%)
 rename packages/react-dom/{testing.classic.fb.js => unstable_testing.classic.fb.js} (100%)
 rename packages/react-dom/{testing.experimental.js => unstable_testing.experimental.js} (100%)
 rename packages/react-dom/{testing.js => unstable_testing.js} (100%)
 rename packages/react-dom/{testing.modern.fb.js => unstable_testing.modern.fb.js} (100%)
 rename packages/react-dom/{testing.stable.js => unstable_testing.stable.js} (100%)

diff --git a/packages/react-dom/npm/unstable_testing.js b/packages/react-dom/npm/unstable_testing.js
index 0cb587bf9a9d..bb0dfdfa8865 100644
--- a/packages/react-dom/npm/unstable_testing.js
+++ b/packages/react-dom/npm/unstable_testing.js
@@ -32,7 +32,7 @@ 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-testing.production.min.js');
+  module.exports = require('./cjs/react-dom-unstable_testing.production.min.js');
 } else {
-  module.exports = require('./cjs/react-dom-testing.development.js');
+  module.exports = require('./cjs/react-dom-unstable_testing.development.js');
 }
diff --git a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.js
similarity index 98%
rename from packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
rename to packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.js
index 29cf7a9870ec..ceb1ea598601 100644
--- a/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMTestSelectors-test.js
@@ -31,21 +31,23 @@ describe('ReactDOMTestSelectors', () => {
     jest.resetModules();
 
     React = require('react');
-
-    const ReactDOM = require('react-dom/testing');
     act = React.unstable_act;
-    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;
-    render = ReactDOM.render;
+
+    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;
+      render = ReactDOM.render;
+    }
 
     container = document.createElement('div');
     document.body.appendChild(container);
diff --git a/packages/react-dom/testing.classic.fb.js b/packages/react-dom/unstable_testing.classic.fb.js
similarity index 100%
rename from packages/react-dom/testing.classic.fb.js
rename to packages/react-dom/unstable_testing.classic.fb.js
diff --git a/packages/react-dom/testing.experimental.js b/packages/react-dom/unstable_testing.experimental.js
similarity index 100%
rename from packages/react-dom/testing.experimental.js
rename to packages/react-dom/unstable_testing.experimental.js
diff --git a/packages/react-dom/testing.js b/packages/react-dom/unstable_testing.js
similarity index 100%
rename from packages/react-dom/testing.js
rename to packages/react-dom/unstable_testing.js
diff --git a/packages/react-dom/testing.modern.fb.js b/packages/react-dom/unstable_testing.modern.fb.js
similarity index 100%
rename from packages/react-dom/testing.modern.fb.js
rename to packages/react-dom/unstable_testing.modern.fb.js
diff --git a/packages/react-dom/testing.stable.js b/packages/react-dom/unstable_testing.stable.js
similarity index 100%
rename from packages/react-dom/testing.stable.js
rename to packages/react-dom/unstable_testing.stable.js
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 4ac846e78a9a..5381ffe93354 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -245,12 +245,13 @@ const bundles = [
     externals: ['react', 'react-dom'],
   },
 
-  // TODO: We don't use this bundle anymore
   /******* React DOM - www - Testing *******/
   {
     moduleType: RENDERER,
-    bundleTypes: [FB_WWW_DEV, FB_WWW_PROD, NODE_DEV, NODE_PROD],
-    entry: 'react-dom/testing',
+    bundleTypes: __EXPERIMENTAL__
+      ? [FB_WWW_DEV, FB_WWW_PROD, NODE_DEV, NODE_PROD]
+      : [FB_WWW_DEV, FB_WWW_PROD],
+    entry: 'react-dom/unstable_testing',
     global: 'ReactDOMTesting',
     minifyWithProdErrorCodes: true,
     wrapWithModuleBoundaries: false,
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index b2234fa42a01..9cab6e5be390 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -129,7 +129,7 @@ const forks = Object.freeze({
             return 'shared/forks/ReactFeatureFlags.test-renderer.www.js';
         }
         return 'shared/forks/ReactFeatureFlags.test-renderer.js';
-      case 'react-dom/testing':
+      case 'react-dom/unstable_testing':
         switch (bundleType) {
           case FB_WWW_DEV:
           case FB_WWW_PROD:
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index 793ba1a2da9a..87675ae9f73c 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -139,7 +139,11 @@ let entryPointsToHasBundle = new Map();
 for (const bundle of Bundles.bundles) {
   let hasBundle = entryPointsToHasBundle.get(bundle.entry);
   if (!hasBundle) {
-    entryPointsToHasBundle.set(bundle.entry, bundle.bundleTypes.length > 0);
+    const hasNonFBBundleTypes = bundle.bundleTypes.some(
+      type =>
+        type !== FB_WWW_DEV && type !== FB_WWW_PROD && type !== FB_WWW_PROFILING
+    );
+    entryPointsToHasBundle.set(bundle.entry, hasNonFBBundleTypes);
   }
 }
 
@@ -176,6 +180,15 @@ function filterOutEntrypoints(name) {
       i--;
       unlinkSync(`build/node_modules/${name}/${filename}`);
       changed = true;
+      // Remove it from the exports field too if it exists.
+      const exportsJSON = packageJSON.exports;
+      if (exportsJSON) {
+        if (filename === 'index.js') {
+          delete exportsJSON['.'];
+        } else {
+          delete exportsJSON['./' + filename.replace(/\.js$/, '')];
+        }
+      }
     }
   }
   if (changed) {
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index f6d349502f6b..5b4520d8b2f1 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -11,7 +11,7 @@ module.exports = [
     shortName: 'dom',
     entryPoints: [
       'react-dom',
-      'react-dom/testing',
+      'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerNode',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack',
@@ -33,14 +33,14 @@ module.exports = [
     shortName: 'dom-browser',
     entryPoints: [
       'react-dom',
-      'react-dom/testing',
+      'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack',
     ],
     paths: [
       'react-dom',
-      'react-dom/testing',
+      'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',

From 274b9fb168eae1b3e5b83db657eb964d365fc45a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 9 Feb 2022 08:44:02 -0800
Subject: [PATCH 1133/1603] Remove path resolution from internal forks plugin
 (#23255)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Alternative to #23254

Our build script has a custom plugin to resolve internal module forks.
Currently, it uses require.resolve to resolve the path to a real file
on disk.

Instead, I've updated all the forked module paths to match their
location on disk, relative to the project root, to remove the need to
resolve them in the build script's runtime.

The main motivation is because require.resolve doesn't work with ESM
modules, but aside from that, hardcoding the relative paths is more
predictable — the Node module resolution algorithm is complicated, and
we don't really need its features for this purpose.
---
 scripts/rollup/forks.js                    | 157 ++++++++++++---------
 scripts/rollup/plugins/use-forks-plugin.js |   8 +-
 2 files changed, 100 insertions(+), 65 deletions(-)

diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 9cab6e5be390..d4a392770bbf 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -30,10 +30,22 @@ const __EXPERIMENTAL__ =
 
 // 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({
   // Optimization: for UMDs, use a version that we can inline into the React bundle.
   // Use that from all other bundles.
-  'object-assign': (bundleType, entry, dependencies) => {
+
+  // NOTE: This is hard-coded to the main entry point of the (third-party)
+  // object-assign package.
+  './node_modules/object-assign/index.js': (
+    bundleType,
+    entry,
+    dependencies
+  ) => {
     if (
       bundleType !== UMD_DEV &&
       bundleType !== UMD_PROD &&
@@ -45,7 +57,7 @@ const forks = Object.freeze({
     }
     if (entry === 'react' || entry === 'react/unstable-shared-subset') {
       // Use the forked version that uses ES modules instead of CommonJS.
-      return 'shared/forks/object-assign.inline-umd.js';
+      return './packages/shared/forks/object-assign.inline-umd.js';
     }
     if (dependencies.indexOf('react') === -1) {
       // We can only apply the optimizations to bundle that depend on React
@@ -53,19 +65,25 @@ const forks = Object.freeze({
       return null;
     }
     // We can use the fork that reads the secret export!
-    return 'shared/forks/object-assign.umd.js';
+    return './packages/shared/forks/object-assign.umd.js';
   },
 
-  'react-shallow-renderer': () => {
+  // NOTE: This is hard-coded to the main entry point of the (third-party)
+  // react-shallow-renderer package.
+  './node_modules/react-shallow-renderer/index.js': () => {
     // Use ESM build of `react-shallow-renderer`.
-    return 'react-shallow-renderer/esm/index.js';
+    return './node_modules/react-shallow-renderer/esm/index.js';
   },
 
   // Without this fork, importing `shared/ReactSharedInternals` inside
   // the `react` package itself would not work due to a cyclical dependency.
-  'shared/ReactSharedInternals': (bundleType, entry, dependencies) => {
+  './packages/shared/ReactSharedInternals.js': (
+    bundleType,
+    entry,
+    dependencies
+  ) => {
     if (entry === 'react' || entry === 'react/unstable-shared-subset') {
-      return 'react/src/ReactSharedInternals.js';
+      return './packages/react/src/ReactSharedInternals.js';
     }
     if (!entry.startsWith('react/') && dependencies.indexOf('react') === -1) {
       // React internals are unavailable if we can't reference the package.
@@ -82,18 +100,18 @@ const forks = Object.freeze({
   },
 
   // We have a few forks for different environments.
-  'shared/ReactFeatureFlags': (bundleType, entry) => {
+  './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 'shared/forks/ReactFeatureFlags.native-fb.js';
+            return './packages/shared/forks/ReactFeatureFlags.native-fb.js';
           case RN_OSS_DEV:
           case RN_OSS_PROD:
           case RN_OSS_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.native-oss.js';
+            return './packages/shared/forks/ReactFeatureFlags.native-oss.js';
           default:
             throw Error(
               `Unexpected entry (${entry}) and bundleType (${bundleType})`
@@ -104,11 +122,11 @@ const forks = Object.freeze({
           case RN_FB_DEV:
           case RN_FB_PROD:
           case RN_FB_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.native-fb.js';
+            return './packages/shared/forks/ReactFeatureFlags.native-fb.js';
           case RN_OSS_DEV:
           case RN_OSS_PROD:
           case RN_OSS_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.native-oss.js';
+            return './packages/shared/forks/ReactFeatureFlags.native-oss.js';
           default:
             throw Error(
               `Unexpected entry (${entry}) and bundleType (${bundleType})`
@@ -122,37 +140,37 @@ const forks = Object.freeze({
           case RN_OSS_DEV:
           case RN_OSS_PROD:
           case RN_OSS_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.test-renderer.native.js';
+            return './packages/shared/forks/ReactFeatureFlags.test-renderer.native.js';
           case FB_WWW_DEV:
           case FB_WWW_PROD:
           case FB_WWW_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.test-renderer.www.js';
+            return './packages/shared/forks/ReactFeatureFlags.test-renderer.www.js';
         }
-        return 'shared/forks/ReactFeatureFlags.test-renderer.js';
+        return './packages/shared/forks/ReactFeatureFlags.test-renderer.js';
       case 'react-dom/unstable_testing':
         switch (bundleType) {
           case FB_WWW_DEV:
           case FB_WWW_PROD:
           case FB_WWW_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.testing.www.js';
+            return './packages/shared/forks/ReactFeatureFlags.testing.www.js';
         }
-        return 'shared/forks/ReactFeatureFlags.testing.js';
+        return './packages/shared/forks/ReactFeatureFlags.testing.js';
       default:
         switch (bundleType) {
           case FB_WWW_DEV:
           case FB_WWW_PROD:
           case FB_WWW_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.www.js';
+            return './packages/shared/forks/ReactFeatureFlags.www.js';
           case RN_FB_DEV:
           case RN_FB_PROD:
           case RN_FB_PROFILING:
-            return 'shared/forks/ReactFeatureFlags.native-fb.js';
+            return './packages/shared/forks/ReactFeatureFlags.native-fb.js';
         }
     }
     return null;
   },
 
-  scheduler: (bundleType, entry, dependencies) => {
+  './packages/scheduler/index.js': (bundleType, entry, dependencies) => {
     switch (bundleType) {
       case UMD_DEV:
       case UMD_PROD:
@@ -164,28 +182,32 @@ const forks = Object.freeze({
         }
         // Optimization: for UMDs, use the API that is already a part of the React
         // package instead of requiring it to be loaded via a separate <script> tag
-        return 'shared/forks/Scheduler.umd.js';
+        return './packages/shared/forks/Scheduler.umd.js';
       default:
         // For other bundles, use the shared NPM package.
         return null;
     }
   },
 
-  'scheduler/src/SchedulerFeatureFlags': (bundleType, entry, dependencies) => {
+  './packages/scheduler/src/SchedulerFeatureFlags.js': (
+    bundleType,
+    entry,
+    dependencies
+  ) => {
     if (
       bundleType === FB_WWW_DEV ||
       bundleType === FB_WWW_PROD ||
       bundleType === FB_WWW_PROFILING
     ) {
-      return 'scheduler/src/forks/SchedulerFeatureFlags.www.js';
+      return './packages/scheduler/src/forks/SchedulerFeatureFlags.www.js';
     }
-    return 'scheduler/src/SchedulerFeatureFlags';
+    return './packages/scheduler/src/SchedulerFeatureFlags.js';
   },
 
-  'shared/consoleWithStackDev': (bundleType, entry) => {
+  './packages/shared/consoleWithStackDev.js': (bundleType, entry) => {
     switch (bundleType) {
       case FB_WWW_DEV:
-        return 'shared/forks/consoleWithStackDev.www.js';
+        return './packages/shared/forks/consoleWithStackDev.www.js';
       default:
         return null;
     }
@@ -193,12 +215,12 @@ const forks = Object.freeze({
 
   // In FB bundles, we preserve an inline require to ReactCurrentOwner.
   // See the explanation in FB version of ReactCurrentOwner in www:
-  'react/src/ReactCurrentOwner': (bundleType, entry) => {
+  './packages/react/src/ReactCurrentOwner.js': (bundleType, entry) => {
     switch (bundleType) {
       case FB_WWW_DEV:
       case FB_WWW_PROD:
       case FB_WWW_PROFILING:
-        return 'react/src/forks/ReactCurrentOwner.www.js';
+        return './packages/react/src/forks/ReactCurrentOwner.www.js';
       default:
         return null;
     }
@@ -206,41 +228,41 @@ const forks = Object.freeze({
 
   // Similarly, we preserve an inline require to ReactCurrentDispatcher.
   // See the explanation in FB version of ReactCurrentDispatcher in www:
-  'react/src/ReactCurrentDispatcher': (bundleType, entry) => {
+  './packages/react/src/ReactCurrentDispatcher.js': (bundleType, entry) => {
     switch (bundleType) {
       case FB_WWW_DEV:
       case FB_WWW_PROD:
       case FB_WWW_PROFILING:
-        return 'react/src/forks/ReactCurrentDispatcher.www.js';
+        return './packages/react/src/forks/ReactCurrentDispatcher.www.js';
       default:
         return null;
     }
   },
 
-  'react/src/ReactSharedInternals.js': (bundleType, entry) => {
+  './packages/react/src/ReactSharedInternals.js': (bundleType, entry) => {
     switch (bundleType) {
       case UMD_DEV:
       case UMD_PROD:
       case UMD_PROFILING:
-        return 'react/src/forks/ReactSharedInternals.umd.js';
+        return './packages/react/src/forks/ReactSharedInternals.umd.js';
       default:
         return null;
     }
   },
 
   // Different wrapping/reporting for caught errors.
-  'shared/invokeGuardedCallbackImpl': (bundleType, entry) => {
+  './packages/shared/invokeGuardedCallbackImpl.js': (bundleType, entry) => {
     switch (bundleType) {
       case FB_WWW_DEV:
       case FB_WWW_PROD:
       case FB_WWW_PROFILING:
-        return 'shared/forks/invokeGuardedCallbackImpl.www.js';
+        return './packages/shared/forks/invokeGuardedCallbackImpl.www.js';
       default:
         return null;
     }
   },
 
-  'react-reconciler/src/ReactFiberReconciler': (
+  './packages/react-reconciler/src/ReactFiberReconciler.js': (
     bundleType,
     entry,
     dependencies,
@@ -253,14 +275,14 @@ const forks = Object.freeze({
         case FB_WWW_PROD:
         case FB_WWW_PROFILING:
           // Use the forked version of the reconciler
-          return 'react-reconciler/src/ReactFiberReconciler.new.js';
+          return './packages/react-reconciler/src/ReactFiberReconciler.new.js';
       }
     }
     // Otherwise, use the non-forked version.
-    return 'react-reconciler/src/ReactFiberReconciler.old.js';
+    return './packages/react-reconciler/src/ReactFiberReconciler.old.js';
   },
 
-  'react-reconciler/src/ReactEventPriorities': (
+  './packages/react-reconciler/src/ReactEventPriorities.js': (
     bundleType,
     entry,
     dependencies,
@@ -273,14 +295,14 @@ const forks = Object.freeze({
         case FB_WWW_PROD:
         case FB_WWW_PROFILING:
           // Use the forked version of the reconciler
-          return 'react-reconciler/src/ReactEventPriorities.new.js';
+          return './packages/react-reconciler/src/ReactEventPriorities.new.js';
       }
     }
     // Otherwise, use the non-forked version.
-    return 'react-reconciler/src/ReactEventPriorities.old.js';
+    return './packages/react-reconciler/src/ReactEventPriorities.old.js';
   },
 
-  'react-reconciler/src/ReactFiberHotReloading': (
+  './packages/react-reconciler/src/ReactFiberHotReloading.js': (
     bundleType,
     entry,
     dependencies,
@@ -293,21 +315,24 @@ const forks = Object.freeze({
         case FB_WWW_PROD:
         case FB_WWW_PROFILING:
           // Use the forked version of the reconciler
-          return 'react-reconciler/src/ReactFiberHotReloading.new.js';
+          return './packages/react-reconciler/src/ReactFiberHotReloading.new.js';
       }
     }
     // Otherwise, use the non-forked version.
-    return 'react-reconciler/src/ReactFiberHotReloading.old.js';
+    return './packages/react-reconciler/src/ReactFiberHotReloading.old.js';
   },
 
   // Different dialogs for caught errors.
-  'react-reconciler/src/ReactFiberErrorDialog': (bundleType, entry) => {
+  './packages/react-reconciler/src/ReactFiberErrorDialog.js': (
+    bundleType,
+    entry
+  ) => {
     switch (bundleType) {
       case FB_WWW_DEV:
       case FB_WWW_PROD:
       case FB_WWW_PROFILING:
         // Use the www fork which shows an error dialog.
-        return 'react-reconciler/src/forks/ReactFiberErrorDialog.www.js';
+        return './packages/react-reconciler/src/forks/ReactFiberErrorDialog.www.js';
       case RN_OSS_DEV:
       case RN_OSS_PROD:
       case RN_OSS_PROFILING:
@@ -318,7 +343,7 @@ const forks = Object.freeze({
           case 'react-native-renderer':
           case 'react-native-renderer/fabric':
             // Use the RN fork which plays well with redbox.
-            return 'react-reconciler/src/forks/ReactFiberErrorDialog.native.js';
+            return './packages/react-reconciler/src/forks/ReactFiberErrorDialog.native.js';
           default:
             return null;
         }
@@ -327,7 +352,7 @@ const forks = Object.freeze({
     }
   },
 
-  'react-reconciler/src/ReactFiberHostConfig': (
+  './packages/react-reconciler/src/ReactFiberHostConfig.js': (
     bundleType,
     entry,
     dependencies,
@@ -342,7 +367,7 @@ const forks = Object.freeze({
     // eslint-disable-next-line no-for-of-loops/no-for-of-loops
     for (let rendererInfo of inlinedHostConfigs) {
       if (rendererInfo.entryPoints.indexOf(entry) !== -1) {
-        return `react-reconciler/src/forks/ReactFiberHostConfig.${rendererInfo.shortName}.js`;
+        return `./packages/react-reconciler/src/forks/ReactFiberHostConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
@@ -352,7 +377,7 @@ const forks = Object.freeze({
     );
   },
 
-  'react-server/src/ReactServerStreamConfig': (
+  './packages/react-server/src/ReactServerStreamConfig.js': (
     bundleType,
     entry,
     dependencies,
@@ -370,7 +395,7 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `react-server/src/forks/ReactServerStreamConfig.${rendererInfo.shortName}.js`;
+        return `./packages/react-server/src/forks/ReactServerStreamConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
@@ -380,7 +405,7 @@ const forks = Object.freeze({
     );
   },
 
-  'react-server/src/ReactServerFormatConfig': (
+  './packages/react-server/src/ReactServerFormatConfig.js': (
     bundleType,
     entry,
     dependencies,
@@ -398,7 +423,7 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `react-server/src/forks/ReactServerFormatConfig.${rendererInfo.shortName}.js`;
+        return `./packages/react-server/src/forks/ReactServerFormatConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
@@ -408,7 +433,7 @@ const forks = Object.freeze({
     );
   },
 
-  'react-server/src/ReactFlightServerConfig': (
+  './packages/react-server/src/ReactFlightServerConfig.js': (
     bundleType,
     entry,
     dependencies,
@@ -426,7 +451,7 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `react-server/src/forks/ReactFlightServerConfig.${rendererInfo.shortName}.js`;
+        return `./packages/react-server/src/forks/ReactFlightServerConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
@@ -436,7 +461,7 @@ const forks = Object.freeze({
     );
   },
 
-  'react-client/src/ReactFlightClientHostConfig': (
+  './packages/react-client/src/ReactFlightClientHostConfig.js': (
     bundleType,
     entry,
     dependencies,
@@ -454,7 +479,7 @@ const forks = Object.freeze({
         if (!rendererInfo.isServerSupported) {
           return null;
         }
-        return `react-client/src/forks/ReactFlightClientHostConfig.${rendererInfo.shortName}.js`;
+        return `./packages/react-client/src/forks/ReactFlightClientHostConfig.${rendererInfo.shortName}.js`;
       }
     }
     throw new Error(
@@ -465,7 +490,7 @@ const forks = Object.freeze({
   },
 
   // We wrap top-level listeners into guards on www.
-  'react-dom/src/events/EventListener': (bundleType, entry) => {
+  './packages/react-dom/src/events/EventListener.js': (bundleType, entry) => {
     switch (bundleType) {
       case FB_WWW_DEV:
       case FB_WWW_PROD:
@@ -475,28 +500,34 @@ const forks = Object.freeze({
           return null;
         } else {
           // Use the www fork which is integrated with TimeSlice profiling.
-          return 'react-dom/src/events/forks/EventListener-www.js';
+          return './packages/react-dom/src/events/forks/EventListener-www.js';
         }
       default:
         return null;
     }
   },
 
-  'use-sync-external-store/src/useSyncExternalStore': (bundleType, entry) => {
+  './packages/use-sync-external-store/src/useSyncExternalStore.js': (
+    bundleType,
+    entry
+  ) => {
     if (entry.startsWith('use-sync-external-store/shim')) {
-      return 'use-sync-external-store/src/forks/useSyncExternalStore.forward-to-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 'use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in';
+      return './packages/use-sync-external-store/src/forks/useSyncExternalStore.forward-to-built-in.js';
     }
     return null;
   },
 
-  'use-sync-external-store/src/isServerEnvironment': (bundleType, entry) => {
+  './packages/use-sync-external-store/src/isServerEnvironment.js': (
+    bundleType,
+    entry
+  ) => {
     if (entry.endsWith('.native')) {
-      return 'use-sync-external-store/src/forks/isServerEnvironment.native';
+      return './packages/use-sync-external-store/src/forks/isServerEnvironment.native.js';
     }
   },
 });
diff --git a/scripts/rollup/plugins/use-forks-plugin.js b/scripts/rollup/plugins/use-forks-plugin.js
index a645fa99c1b2..e3b261ff52b4 100644
--- a/scripts/rollup/plugins/use-forks-plugin.js
+++ b/scripts/rollup/plugins/use-forks-plugin.js
@@ -30,15 +30,19 @@ 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(
-      require.resolve(srcModule),
+      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'
-        ? require.resolve(targetModule)
+        ? path.resolve(process.cwd(), targetModule)
         : targetModule
     );
   });

From 9b5e0517b4d203d49063e975a4597e9c666e0212 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 9 Feb 2022 11:37:17 -0800
Subject: [PATCH 1134/1603] Remove deprecated wildcard folder mapping (#23256)

* Remove deprecated folder mapping

Node v16 deprecated the use of trailing "/" to define subpath folder
mappings in the "exports" field of package.json.

The recommendation is to explicitly list all our exports. We already do
that for all our public modules. I believe the only reason we have a
wildcard pattern is because our package.json files are also used at
build time (by Rollup) to resolve internal source modules that don't
appear in the final npm artifact.

Changing trailing "/" to "/*" fixes the warnings. See
https://nodejs.org/api/packages.html#subpath-patterns for more info.

Since the wildcard pattern only exists so our build script has access to
internal at build time, I've scoped the wildcard to "/src/*". Because
our public modules are located outside the "src" directory, this means
deep imports of our modules will no longer work: only packages that are
listed in the "exports" field.

The only two affected packages are react-dom and react. We need to be
sure that all our public modules are still reachable. I audited the
exports by comparing the entries to the "files" field in package.json,
which represents a complete list of the files that are included in the
final release artifact.

At some point, we should add an e2e packaging test to prevent
regressions; for now, we should have decent coverage because in CI we
run our Jest test suite against the release artifacts.

* Remove umd from exports

Our expectation is that if you're using the UMD builds, you're not
loading them through a normal module system like require or import.
Instead you're probably copying the files directly or loading them from
a CDN like unpkg.
---
 packages/react-dom/package.json      |  4 ++--
 packages/react/package.json          |  3 ++-
 scripts/rollup/bundles.js            | 10 +++++-----
 scripts/shared/inlinedHostConfigs.js | 10 +++++-----
 4 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 90b0560e42b1..71d15b5670dc 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -50,8 +50,8 @@
     "./profiling": "./profiling.js",
     "./test-utils": "./test-utils.js",
     "./unstable_testing": "./unstable_testing.js",
-    "./package.json": "./package.json",
-    "./": "./"
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
   },
   "browser": {
     "./server.js": "./server.browser.js"
diff --git a/packages/react/package.json b/packages/react/package.json
index d7f2ac8d99a0..d83fd9375908 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -27,7 +27,8 @@
     "./package.json": "./package.json",
     "./jsx-runtime": "./jsx-runtime.js",
     "./jsx-dev-runtime": "./jsx-dev-runtime.js",
-    "./": "./"
+    "./unstable-shared-subset": "./unstable-shared-subset.js"
+
   },
   "repository": {
     "type": "git",
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 5381ffe93354..91c401107598 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -269,7 +269,7 @@ const bundles = [
       FB_WWW_PROD,
     ],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser',
+    entry: 'react-dom/src/server/ReactDOMLegacyServerBrowser.js',
     name: 'react-dom-server-legacy.browser',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: true,
@@ -285,7 +285,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMLegacyServerNode',
+    entry: 'react-dom/src/server/ReactDOMLegacyServerNode.js',
     name: 'react-dom-server-legacy.node',
     externals: ['react', 'stream'],
     minifyWithProdErrorCodes: false,
@@ -302,7 +302,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMFizzServerBrowser',
+    entry: 'react-dom/src/server/ReactDOMFizzServerBrowser.js',
     name: 'react-dom-server.browser',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: true,
@@ -312,7 +312,7 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
-    entry: 'react-dom/src/server/ReactDOMFizzServerNode',
+    entry: 'react-dom/src/server/ReactDOMFizzServerNode.js',
     name: 'react-dom-server.node',
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: false,
@@ -322,7 +322,7 @@ const bundles = [
   {
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
     moduleType: RENDERER,
-    entry: 'react-server-dom-relay/src/ReactDOMServerFB',
+    entry: 'react-server-dom-relay/src/ReactDOMServerFB.js',
     global: 'ReactDOMServerStreaming',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 5b4520d8b2f1..b2b9639505a7 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -12,7 +12,7 @@ module.exports = [
     entryPoints: [
       'react-dom',
       'react-dom/unstable_testing',
-      'react-dom/src/server/ReactDOMFizzServerNode',
+      'react-dom/src/server/ReactDOMFizzServerNode.js',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack',
     ],
@@ -34,7 +34,7 @@ module.exports = [
     entryPoints: [
       'react-dom',
       'react-dom/unstable_testing',
-      'react-dom/src/server/ReactDOMFizzServerBrowser',
+      'react-dom/src/server/ReactDOMFizzServerBrowser.js',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack',
     ],
@@ -53,8 +53,8 @@ module.exports = [
   {
     shortName: 'dom-legacy',
     entryPoints: [
-      'react-dom/src/server/ReactDOMLegacyServerBrowser', // react-dom/server.browser
-      'react-dom/src/server/ReactDOMLegacyServerNode', // react-dom/server.node
+      'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
+      'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node
     ],
     paths: [
       'react-dom',
@@ -99,7 +99,7 @@ module.exports = [
     entryPoints: [
       'react-server-dom-relay',
       'react-server-dom-relay/server',
-      'react-server-dom-relay/src/ReactDOMServerFB',
+      'react-server-dom-relay/src/ReactDOMServerFB.js',
     ],
     paths: ['react-dom', 'react-server-dom-relay'],
     isFlowTyped: true,

From e0af1aabec3d3ee24f57aaaf9407860463f20213 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 9 Feb 2022 20:49:35 -0500
Subject: [PATCH 1135/1603] Fix wrong context argument to `apply`

The context argument should be the array, not null.

I wrote a test that I'll include in the next PR.
---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f3efac3e74d6..ece137e8477e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -925,7 +925,7 @@ export function queueRecoverableErrors(errors: Array<mixed>) {
     workInProgressRootRecoverableErrors = errors;
   } else {
     workInProgressRootConcurrentErrors = workInProgressRootConcurrentErrors.push.apply(
-      null,
+      workInProgressRootConcurrentErrors,
       errors,
     );
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d6e37f2785ff..b3164d5fe2dc 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -925,7 +925,7 @@ export function queueRecoverableErrors(errors: Array<mixed>) {
     workInProgressRootRecoverableErrors = errors;
   } else {
     workInProgressRootConcurrentErrors = workInProgressRootConcurrentErrors.push.apply(
-      null,
+      workInProgressRootConcurrentErrors,
       errors,
     );
   }

From efd8f6442d1aa7c4566fe812cba03e7e83aaccc3 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 10 Feb 2022 07:59:10 -0800
Subject: [PATCH 1136/1603] Resolve default onRecoverableError at root init
 (#23264)

Minor follow up to initial onRecoverableError PR.

When onRecoverableError is not provided to `createRoot`, the
renderer falls back to a default implementation. Originally I
implemented this with a host config method, but what we can do instead
is pass the default implementation the root constructor as if it were
a user provided one.
---
 packages/react-art/src/ReactARTHostConfig.js     |  4 ----
 .../react-dom/src/client/ReactDOMHostConfig.js   | 12 ------------
 packages/react-dom/src/client/ReactDOMLegacy.js  |  7 ++++++-
 packages/react-dom/src/client/ReactDOMRoot.js    | 16 ++++++++++++++--
 .../react-native-renderer/src/ReactFabric.js     |  8 +++++++-
 .../src/ReactFabricHostConfig.js                 |  4 ----
 .../src/ReactNativeHostConfig.js                 |  4 ----
 .../src/ReactNativeRenderer.js                   |  8 +++++++-
 .../react-noop-renderer/src/createReactNoop.js   | 12 +++++++++---
 .../src/ReactFiberReconciler.new.js              |  2 +-
 .../src/ReactFiberReconciler.old.js              |  2 +-
 .../src/ReactFiberWorkLoop.new.js                | 11 ++---------
 .../src/ReactFiberWorkLoop.old.js                | 11 ++---------
 .../react-reconciler/src/ReactInternalTypes.js   |  2 +-
 .../src/forks/ReactFiberHostConfig.custom.js     |  1 -
 .../react-test-renderer/src/ReactTestRenderer.js |  8 +++++++-
 16 files changed, 57 insertions(+), 55 deletions(-)

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 92417f77ae16..47bced8a1274 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -451,7 +451,3 @@ export function preparePortalMount(portalInstance: any): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
-
-export function logRecoverableError(error) {
-  // noop
-}
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index e2cbed61e5e4..08cd8cb81c78 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -374,18 +374,6 @@ export function getCurrentEventPriority(): * {
   return getEventPriority(currentEvent.type);
 }
 
-/* global reportError */
-export const logRecoverableError =
-  typeof reportError === 'function'
-    ? // In modern browsers, reportError will dispatch an error event,
-      // emulating an uncaught JavaScript error.
-      reportError
-    : (error: mixed) => {
-        // In older browsers and test environments, fallback to console.error.
-        // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
-        console.error(error);
-      };
-
 export const isPrimaryRenderer = true;
 export const warnsIfNotActing = true;
 // This initialization code may run even on server environments
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index cb95101401ea..b95be0bd3f22 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -102,6 +102,11 @@ function getReactRootElementInContainer(container: any) {
   }
 }
 
+function noopOnRecoverableError() {
+  // This isn't reachable because onRecoverableError isn't called in the
+  // legacy API.
+}
+
 function legacyCreateRootFromDOMContainer(
   container: Container,
   forceHydrate: boolean,
@@ -122,7 +127,7 @@ function legacyCreateRootFromDOMContainer(
     false, // isStrictMode
     false, // concurrentUpdatesByDefaultOverride,
     '', // identifierPrefix
-    null,
+    noopOnRecoverableError,
   );
   markContainerAsRoot(root.current, container);
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index fe6b6ee31f77..9867a1b45e5d 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -65,6 +65,18 @@ import {
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
 import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
 
+/* global reportError */
+const defaultOnRecoverableError =
+  typeof reportError === 'function'
+    ? // In modern browsers, reportError will dispatch an error event,
+      // emulating an uncaught JavaScript error.
+      reportError
+    : (error: mixed) => {
+        // In older browsers and test environments, fallback to console.error.
+        // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
+        console.error(error);
+      };
+
 function ReactDOMRoot(internalRoot: FiberRoot) {
   this._internalRoot = internalRoot;
 }
@@ -145,7 +157,7 @@ export function createRoot(
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
-  let onRecoverableError = null;
+  let onRecoverableError = defaultOnRecoverableError;
   if (options !== null && options !== undefined) {
     if (__DEV__) {
       if ((options: any).hydrate) {
@@ -220,7 +232,7 @@ export function hydrateRoot(
   let isStrictMode = false;
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
-  let onRecoverableError = null;
+  let onRecoverableError = defaultOnRecoverableError;
   if (options !== null && options !== undefined) {
     if (options.unstable_strictMode === true) {
       isStrictMode = true;
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 25cbd31b9fdf..2f64c5a59199 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -195,6 +195,12 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
   }
 }
 
+function onRecoverableError(error) {
+  // TODO: Expose onRecoverableError option to userspace
+  // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
+  console.error(error);
+}
+
 function render(
   element: Element<ElementType>,
   containerTag: number,
@@ -214,7 +220,7 @@ function render(
       false,
       null,
       '',
-      null,
+      onRecoverableError,
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index bec60bff22c9..727b782efd76 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -525,7 +525,3 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
-
-export function logRecoverableError(error: mixed): void {
-  // noop
-}
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index e1b1d25f5f60..10c5e37f41bc 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -513,7 +513,3 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
-
-export function logRecoverableError(error: mixed): void {
-  // noop
-}
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index c5d4318311c0..2ea04acdcbe6 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -192,6 +192,12 @@ function sendAccessibilityEvent(handle: any, eventType: string) {
   }
 }
 
+function onRecoverableError(error) {
+  // TODO: Expose onRecoverableError option to userspace
+  // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
+  console.error(error);
+}
+
 function render(
   element: Element<ElementType>,
   containerTag: number,
@@ -210,7 +216,7 @@ function render(
       false,
       null,
       '',
-      null,
+      onRecoverableError,
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 7e1ee5c57581..c314af59cb59 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -938,6 +938,12 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     return NoopRenderer.flushSync(fn);
   }
 
+  function onRecoverableError(error) {
+    // TODO: Turn this on once tests are fixed
+    // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
+    // console.error(error);
+  }
+
   let idCounter = 0;
 
   const ReactNoop = {
@@ -966,7 +972,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           null,
           false,
           '',
-          null,
+          onRecoverableError,
         );
         roots.set(rootID, root);
       }
@@ -988,7 +994,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
-        null,
+        onRecoverableError,
       );
       return {
         _Scheduler: Scheduler,
@@ -1018,7 +1024,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         null,
         false,
         '',
-        null,
+        onRecoverableError,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 0c99b9ec3077..d3130581d2ff 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -245,7 +245,7 @@ export function createContainer(
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
   identifierPrefix: string,
-  onRecoverableError: null | ((error: mixed) => void),
+  onRecoverableError: (error: mixed) => void,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 202d7ce3819d..19136883c778 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -245,7 +245,7 @@ export function createContainer(
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
   identifierPrefix: string,
-  onRecoverableError: null | ((error: mixed) => void),
+  onRecoverableError: (error: mixed) => void,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ece137e8477e..33131e20bb63 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -77,7 +77,6 @@ import {
   supportsMicrotasks,
   errorHydratingContainer,
   scheduleMicrotask,
-  logRecoverableError,
 } from './ReactFiberHostConfig';
 
 import {
@@ -2113,16 +2112,10 @@ function commitRootImpl(
   if (recoverableErrors !== null) {
     // 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 onRecoverableError = root.onRecoverableError;
-      if (onRecoverableError !== null) {
-        onRecoverableError(recoverableError);
-      } else {
-        // No user-provided onRecoverableError. Use the default behavior
-        // provided by the renderer's host config.
-        logRecoverableError(recoverableError);
-      }
+      onRecoverableError(recoverableError);
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b3164d5fe2dc..17ee82384d5e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -77,7 +77,6 @@ import {
   supportsMicrotasks,
   errorHydratingContainer,
   scheduleMicrotask,
-  logRecoverableError,
 } from './ReactFiberHostConfig';
 
 import {
@@ -2113,16 +2112,10 @@ function commitRootImpl(
   if (recoverableErrors !== null) {
     // 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 onRecoverableError = root.onRecoverableError;
-      if (onRecoverableError !== null) {
-        onRecoverableError(recoverableError);
-      } else {
-        // No user-provided onRecoverableError. Use the default behavior
-        // provided by the renderer's host config.
-        logRecoverableError(recoverableError);
-      }
+      onRecoverableError(recoverableError);
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index bbfe70c26cfc..352498be61f3 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -247,7 +247,7 @@ type BaseFiberRootProperties = {|
   // a reference to.
   identifierPrefix: string,
 
-  onRecoverableError: null | ((error: mixed) => void),
+  onRecoverableError: (error: mixed) => void,
 |};
 
 // The following attributes are only used by DevTools and are only present in DEV builds.
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index ff5bbf8035f0..6535d8d3fdec 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -68,7 +68,6 @@ export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 export const detachDeletedInstance = $$$hostConfig.detachDeletedInstance;
-export const logRecoverableError = $$$hostConfig.logRecoverableError;
 
 // -------------------
 //      Microtasks
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index a8121d1a14fc..75d4de071bfd 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -437,6 +437,12 @@ function propsMatch(props: Object, filter: Object): boolean {
   return true;
 }
 
+function onRecoverableError(error) {
+  // TODO: Expose onRecoverableError option to userspace
+  // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
+  console.error(error);
+}
+
 function create(element: React$Element<any>, options: TestRendererOptions) {
   let createNodeMock = defaultTestOptions.createNodeMock;
   let isConcurrent = false;
@@ -472,7 +478,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     isStrictMode,
     concurrentUpdatesByDefault,
     '',
-    null,
+    onRecoverableError,
   );
 
   if (root == null) {

From 64223fed82414ee41839e95ebc97df330b2b71ca Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 10 Feb 2022 08:40:00 -0800
Subject: [PATCH 1137/1603] Fix: Multiple hydration errors in same render
 (#23273)

I made a minor mistake in the original onRecoverableError PR that
only surfaces if there are hydration errors in two different Suspense
boundaries in the same render. This fixes it and adds a unit test.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 64 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.new.js             |  6 +-
 .../src/ReactFiberWorkLoop.old.js             |  6 +-
 3 files changed, 70 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 2fddae2d64df..0782b57ff4b4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2191,4 +2191,68 @@ describe('ReactDOMFizzServer', () => {
     // UI looks normal
     expect(container.textContent).toEqual('AB');
   });
+
+  // @gate experimental
+  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.unstable_yieldValue(label);
+      return label;
+    }
+
+    function App() {
+      return (
+        <>
+          <Suspense fallback="Loading...">
+            <Child label="A" />
+          </Suspense>
+          <Suspense fallback="Loading...">
+            <Child label="B" />
+          </Suspense>
+        </>
+      );
+    }
+
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(Scheduler).toHaveYielded(['A', 'B']);
+
+    // Hydrate the tree. Child will throw during hydration, but not when it
+    // falls back to client rendering.
+    isClient = true;
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(
+          'Logged recoverable error: ' + error.message,
+        );
+      },
+    });
+
+    expect(Scheduler).toFlushAndYield([
+      'A',
+      'B',
+      'Logged recoverable error: Hydration error',
+      'Logged recoverable error: Hydration error',
+    ]);
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 33131e20bb63..d9a11759a6bf 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -920,11 +920,11 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
 }
 
 export function queueRecoverableErrors(errors: Array<mixed>) {
-  if (workInProgressRootConcurrentErrors === null) {
+  if (workInProgressRootRecoverableErrors === null) {
     workInProgressRootRecoverableErrors = errors;
   } else {
-    workInProgressRootConcurrentErrors = workInProgressRootConcurrentErrors.push.apply(
-      workInProgressRootConcurrentErrors,
+    workInProgressRootRecoverableErrors.push.apply(
+      workInProgressRootRecoverableErrors,
       errors,
     );
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 17ee82384d5e..8cb20434be66 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -920,11 +920,11 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
 }
 
 export function queueRecoverableErrors(errors: Array<mixed>) {
-  if (workInProgressRootConcurrentErrors === null) {
+  if (workInProgressRootRecoverableErrors === null) {
     workInProgressRootRecoverableErrors = errors;
   } else {
-    workInProgressRootConcurrentErrors = workInProgressRootConcurrentErrors.push.apply(
-      workInProgressRootConcurrentErrors,
+    workInProgressRootRecoverableErrors.push.apply(
+      workInProgressRootRecoverableErrors,
       errors,
     );
   }

From 796fff5483925f90db5fe705af6d8b06fce661a5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 11 Feb 2022 11:26:00 -0500
Subject: [PATCH 1138/1603] Allow suspending outside a Suspense boundary
 (#23267)

(If the update is wrapped in startTransition)

Currently you're not allowed to suspend outside of a Suspense boundary.
We throw an error:

> A React component suspended while rendering, but no fallback UI
was specified

We treat this case like an error because discrete renders are expected
to finish synchronously to maintain consistency with external state.
However, during a concurrent transition (startTransition), what we can
do instead is treat this case like a refresh transition: suspend the
commit without showing a fallback.

The behavior is roughly as if there were a built-in Suspense boundary
at the root of the app with unstable_avoidThisFallback enabled.
Conceptually it's very similar because during hydration you're already
showing server-rendered UI; there's no need to replace that with
a fallback when something suspends.
---
 .../src/ReactFiberThrow.new.js                |  95 ++++++++-----
 .../src/ReactFiberThrow.old.js                |  95 ++++++++-----
 .../src/ReactFiberUnwindWork.new.js           |  19 +--
 .../src/ReactFiberUnwindWork.old.js           |  19 +--
 .../src/ReactFiberWorkLoop.new.js             | 117 +++++++++------
 .../src/ReactFiberWorkLoop.old.js             | 117 +++++++++------
 .../ReactConcurrentErrorRecovery-test.js      | 134 ++++++++++++++++++
 7 files changed, 414 insertions(+), 182 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 6a0c70f8e6d0..824f89e96770 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -62,6 +62,7 @@ import {
 } from './ReactFiberSuspenseContext.new';
 import {
   renderDidError,
+  renderDidSuspendDelayIfPossible,
   onUncaughtError,
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
@@ -78,6 +79,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
+  includesOnlyTransitions,
 } from './ReactFiberLane.new';
 import {
   getIsHydrating,
@@ -165,12 +167,7 @@ function createClassErrorUpdate(
   return update;
 }
 
-function attachWakeableListeners(
-  suspenseBoundary: Fiber,
-  root: FiberRoot,
-  wakeable: Wakeable,
-  lanes: Lanes,
-) {
+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,
@@ -183,34 +180,39 @@ function attachWakeableListeners(
   //
   // We only need to do this in concurrent mode. Legacy Suspense always
   // commits fallbacks synchronously, so there are no pings.
-  if (suspenseBoundary.mode & ConcurrentMode) {
-    let pingCache = root.pingCache;
-    let threadIDs;
-    if (pingCache === null) {
-      pingCache = root.pingCache = new PossiblyWeakMap();
+  let pingCache = root.pingCache;
+  let threadIDs;
+  if (pingCache === null) {
+    pingCache = root.pingCache = new PossiblyWeakMap();
+    threadIDs = new Set();
+    pingCache.set(wakeable, threadIDs);
+  } else {
+    threadIDs = pingCache.get(wakeable);
+    if (threadIDs === undefined) {
       threadIDs = new Set();
       pingCache.set(wakeable, threadIDs);
-    } else {
-      threadIDs = pingCache.get(wakeable);
-      if (threadIDs === undefined) {
-        threadIDs = new Set();
-        pingCache.set(wakeable, threadIDs);
-      }
     }
-    if (!threadIDs.has(lanes)) {
-      // 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);
-        }
+  }
+  if (!threadIDs.has(lanes)) {
+    // 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);
     }
+    wakeable.then(ping, ping);
   }
+}
 
+function attachRetryListener(
+  suspenseBoundary: Fiber,
+  root: FiberRoot,
+  wakeable: Wakeable,
+  lanes: Lanes,
+) {
   // Retry listener
   //
   // If the fallback does commit, we need to attach a different type of
@@ -470,24 +472,47 @@ function throwException(
         root,
         rootRenderLanes,
       );
-      attachWakeableListeners(
-        suspenseBoundary,
-        root,
-        wakeable,
-        rootRenderLanes,
-      );
+      // We only attach ping listeners in concurrent mode. Legacy Suspense always
+      // commits fallbacks synchronously, so there are no pings.
+      if (suspenseBoundary.mode & ConcurrentMode) {
+        attachPingListener(root, wakeable, rootRenderLanes);
+      }
+      attachRetryListener(suspenseBoundary, root, wakeable, rootRenderLanes);
       return;
     } else {
-      // No boundary was found. Fallthrough to error mode.
+      // No boundary was found. If we're inside startTransition, this is OK.
+      // We can suspend and wait for more data to arrive.
+
+      if (includesOnlyTransitions(rootRenderLanes)) {
+        // This is a transition. Suspend. Since we're not activating a Suspense
+        // boundary, this will unwind all the way to the root without performing
+        // a second pass to render a fallback. (This is arguably how refresh
+        // transitions should work, too, since we're not going to commit the
+        // fallbacks anyway.)
+        attachPingListener(root, wakeable, rootRenderLanes);
+        renderDidSuspendDelayIfPossible();
+        return;
+      }
+
+      // We're not in a transition. We treat this case like an error because
+      // discrete renders are expected to finish synchronously to maintain
+      // consistency with external state.
+      // TODO: This will error during non-transition concurrent renders, too.
+      // But maybe it shouldn't?
+
       // TODO: We should never call getComponentNameFromFiber in production.
       // Log a warning or something to prevent us from accidentally bundling it.
-      value = new Error(
+      const uncaughtSuspenseError = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
           '\n' +
           'Add a <Suspense fallback=...> component higher in the tree to ' +
           'provide a loading indicator or placeholder to display.',
       );
+
+      // If we're outside a transition, fall through to the regular error path.
+      // The error will be caught by the nearest suspense boundary.
+      value = uncaughtSuspenseError;
     }
   } else {
     // This is a regular error, not a Suspense wakeable.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 21ab03f4ac92..86a43a4dcaf5 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -62,6 +62,7 @@ import {
 } from './ReactFiberSuspenseContext.old';
 import {
   renderDidError,
+  renderDidSuspendDelayIfPossible,
   onUncaughtError,
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
@@ -78,6 +79,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
+  includesOnlyTransitions,
 } from './ReactFiberLane.old';
 import {
   getIsHydrating,
@@ -165,12 +167,7 @@ function createClassErrorUpdate(
   return update;
 }
 
-function attachWakeableListeners(
-  suspenseBoundary: Fiber,
-  root: FiberRoot,
-  wakeable: Wakeable,
-  lanes: Lanes,
-) {
+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,
@@ -183,34 +180,39 @@ function attachWakeableListeners(
   //
   // We only need to do this in concurrent mode. Legacy Suspense always
   // commits fallbacks synchronously, so there are no pings.
-  if (suspenseBoundary.mode & ConcurrentMode) {
-    let pingCache = root.pingCache;
-    let threadIDs;
-    if (pingCache === null) {
-      pingCache = root.pingCache = new PossiblyWeakMap();
+  let pingCache = root.pingCache;
+  let threadIDs;
+  if (pingCache === null) {
+    pingCache = root.pingCache = new PossiblyWeakMap();
+    threadIDs = new Set();
+    pingCache.set(wakeable, threadIDs);
+  } else {
+    threadIDs = pingCache.get(wakeable);
+    if (threadIDs === undefined) {
       threadIDs = new Set();
       pingCache.set(wakeable, threadIDs);
-    } else {
-      threadIDs = pingCache.get(wakeable);
-      if (threadIDs === undefined) {
-        threadIDs = new Set();
-        pingCache.set(wakeable, threadIDs);
-      }
     }
-    if (!threadIDs.has(lanes)) {
-      // 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);
-        }
+  }
+  if (!threadIDs.has(lanes)) {
+    // 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);
     }
+    wakeable.then(ping, ping);
   }
+}
 
+function attachRetryListener(
+  suspenseBoundary: Fiber,
+  root: FiberRoot,
+  wakeable: Wakeable,
+  lanes: Lanes,
+) {
   // Retry listener
   //
   // If the fallback does commit, we need to attach a different type of
@@ -470,24 +472,47 @@ function throwException(
         root,
         rootRenderLanes,
       );
-      attachWakeableListeners(
-        suspenseBoundary,
-        root,
-        wakeable,
-        rootRenderLanes,
-      );
+      // We only attach ping listeners in concurrent mode. Legacy Suspense always
+      // commits fallbacks synchronously, so there are no pings.
+      if (suspenseBoundary.mode & ConcurrentMode) {
+        attachPingListener(root, wakeable, rootRenderLanes);
+      }
+      attachRetryListener(suspenseBoundary, root, wakeable, rootRenderLanes);
       return;
     } else {
-      // No boundary was found. Fallthrough to error mode.
+      // No boundary was found. If we're inside startTransition, this is OK.
+      // We can suspend and wait for more data to arrive.
+
+      if (includesOnlyTransitions(rootRenderLanes)) {
+        // This is a transition. Suspend. Since we're not activating a Suspense
+        // boundary, this will unwind all the way to the root without performing
+        // a second pass to render a fallback. (This is arguably how refresh
+        // transitions should work, too, since we're not going to commit the
+        // fallbacks anyway.)
+        attachPingListener(root, wakeable, rootRenderLanes);
+        renderDidSuspendDelayIfPossible();
+        return;
+      }
+
+      // We're not in a transition. We treat this case like an error because
+      // discrete renders are expected to finish synchronously to maintain
+      // consistency with external state.
+      // TODO: This will error during non-transition concurrent renders, too.
+      // But maybe it shouldn't?
+
       // TODO: We should never call getComponentNameFromFiber in production.
       // Log a warning or something to prevent us from accidentally bundling it.
-      value = new Error(
+      const uncaughtSuspenseError = new Error(
         (getComponentNameFromFiber(sourceFiber) || 'A React component') +
           ' suspended while rendering, but no fallback UI was specified.\n' +
           '\n' +
           'Add a <Suspense fallback=...> component higher in the tree to ' +
           'provide a loading indicator or placeholder to display.',
       );
+
+      // If we're outside a transition, fall through to the regular error path.
+      // The error will be caught by the nearest suspense boundary.
+      value = uncaughtSuspenseError;
     }
   } else {
     // This is a regular error, not a Suspense wakeable.
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index bb002b9e71b3..a43c021d987e 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -89,16 +89,17 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-
-      if ((flags & DidCapture) !== NoFlags) {
-        throw new Error(
-          'The root failed to unmount after an error. This is likely a bug in ' +
-            'React. Please file an issue.',
-        );
+      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;
       }
-
-      workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
-      return workInProgress;
+      // We unwound to the root without completing it. Exit.
+      return null;
     }
     case HostComponent: {
       // TODO: popHydrationState
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 7f161513a4af..e0cf7cc2f0fc 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -89,16 +89,17 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
       const flags = workInProgress.flags;
-
-      if ((flags & DidCapture) !== NoFlags) {
-        throw new Error(
-          'The root failed to unmount after an error. This is likely a bug in ' +
-            'React. Please file an issue.',
-        );
+      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;
       }
-
-      workInProgress.flags = (flags & ~ShouldCapture) | DidCapture;
-      return workInProgress;
+      // We unwound to the root without completing it. Exit.
+      return null;
     }
     case HostComponent: {
       // TODO: popHydrationState
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index d9a11759a6bf..42d230a4a655 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -251,13 +251,14 @@ const RenderContext = /*                */ 0b0010;
 const CommitContext = /*                */ 0b0100;
 export const RetryAfterError = /*       */ 0b1000;
 
-type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
-const RootIncomplete = 0;
+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 RootCompleted = 5;
+const RootDidNotComplete = 6;
 
 // Describes where we are in the React execution stack
 let executionContext: ExecutionContext = NoContext;
@@ -280,7 +281,7 @@ export let subtreeRenderLanes: Lanes = NoLanes;
 const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
 
 // Whether to root completed, errored, suspended, etc.
-let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
+let workInProgressRootExitStatus: RootExitStatus = RootInProgress;
 // A fatal error, if one is thrown
 let workInProgressRootFatalError: mixed = null;
 // "Included" lanes refer to lanes that were worked on during this render. It's
@@ -817,7 +818,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   let exitStatus = shouldTimeSlice
     ? renderRootConcurrent(root, lanes)
     : renderRootSync(root, lanes);
-  if (exitStatus !== RootIncomplete) {
+  if (exitStatus !== RootInProgress) {
     if (exitStatus === RootErrored) {
       // If something threw an error, try rendering one more time. We'll
       // render synchronously to block concurrent data mutations, and we'll
@@ -837,45 +838,58 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       throw fatalError;
     }
 
-    // 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 renderWasConcurrent = !includesBlockingLane(root, lanes);
-    const finishedWork: Fiber = (root.current.alternate: any);
-    if (
-      renderWasConcurrent &&
-      !isRenderConsistentWithExternalStores(finishedWork)
-    ) {
-      // A store was mutated in an interleaved event. Render again,
-      // synchronously, to block further mutations.
-      exitStatus = renderRootSync(root, lanes);
-
-      // We need to check again if something threw
-      if (exitStatus === RootErrored) {
-        const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
-        if (errorRetryLanes !== NoLanes) {
-          lanes = errorRetryLanes;
-          exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
-          // We assume the tree is now consistent because we didn't yield to any
-          // concurrent events.
+    if (exitStatus === RootDidNotComplete) {
+      // The render unwound without completing the tree. This happens in special
+      // cases where need to exit the current render without producing a
+      // consistent tree or committing.
+      //
+      // This should only happen during a concurrent render, not a discrete or
+      // synchronous update. We should have already checked for this when we
+      // unwound the stack.
+      markRootSuspended(root, lanes);
+    } else {
+      // 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 renderWasConcurrent = !includesBlockingLane(root, lanes);
+      const finishedWork: Fiber = (root.current.alternate: any);
+      if (
+        renderWasConcurrent &&
+        !isRenderConsistentWithExternalStores(finishedWork)
+      ) {
+        // A store was mutated in an interleaved event. Render again,
+        // synchronously, to block further mutations.
+        exitStatus = renderRootSync(root, lanes);
+
+        // We need to check again if something threw
+        if (exitStatus === RootErrored) {
+          const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+          if (errorRetryLanes !== NoLanes) {
+            lanes = errorRetryLanes;
+            exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+            // We assume the tree is now consistent because we didn't yield to any
+            // concurrent events.
+          }
+        }
+        if (exitStatus === RootFatalErrored) {
+          const fatalError = workInProgressRootFatalError;
+          prepareFreshStack(root, NoLanes);
+          markRootSuspended(root, lanes);
+          ensureRootIsScheduled(root, now());
+          throw fatalError;
         }
       }
-      if (exitStatus === RootFatalErrored) {
-        const fatalError = workInProgressRootFatalError;
-        prepareFreshStack(root, NoLanes);
-        markRootSuspended(root, lanes);
-        ensureRootIsScheduled(root, now());
-        throw fatalError;
-      }
-    }
 
-    // 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.
-    root.finishedWork = finishedWork;
-    root.finishedLanes = lanes;
-    finishConcurrentRender(root, exitStatus, lanes);
+      // 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.
+      root.finishedWork = finishedWork;
+      root.finishedLanes = lanes;
+      finishConcurrentRender(root, exitStatus, lanes);
+    }
   }
 
   ensureRootIsScheduled(root, now());
@@ -932,7 +946,7 @@ export function queueRecoverableErrors(errors: Array<mixed>) {
 
 function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
-    case RootIncomplete:
+    case RootInProgress:
     case RootFatalErrored: {
       throw new Error('Root did not complete. This is a bug in React.');
     }
@@ -1148,6 +1162,10 @@ function performSyncWorkOnRoot(root) {
     throw fatalError;
   }
 
+  if (exitStatus === RootDidNotComplete) {
+    throw new Error('Root did not complete. This is a bug in React.');
+  }
+
   // We now have a consistent tree. Because this is a sync render, we
   // will commit it even if something suspended.
   const finishedWork: Fiber = (root.current.alternate: any);
@@ -1343,7 +1361,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRoot = root;
   workInProgress = createWorkInProgress(root.current, null);
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
-  workInProgressRootExitStatus = RootIncomplete;
+  workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
   workInProgressRootInterleavedUpdatedLanes = NoLanes;
@@ -1473,14 +1491,14 @@ export function markSkippedUpdateLanes(lane: Lane | Lanes): void {
 }
 
 export function renderDidSuspend(): void {
-  if (workInProgressRootExitStatus === RootIncomplete) {
+  if (workInProgressRootExitStatus === RootInProgress) {
     workInProgressRootExitStatus = RootSuspended;
   }
 }
 
 export function renderDidSuspendDelayIfPossible(): void {
   if (
-    workInProgressRootExitStatus === RootIncomplete ||
+    workInProgressRootExitStatus === RootInProgress ||
     workInProgressRootExitStatus === RootSuspended ||
     workInProgressRootExitStatus === RootErrored
   ) {
@@ -1521,7 +1539,7 @@ export function renderDidError(error: mixed) {
 export function renderHasNotSuspendedYet(): boolean {
   // If something errored or completed, we can't really be sure,
   // so those are false.
-  return workInProgressRootExitStatus === RootIncomplete;
+  return workInProgressRootExitStatus === RootInProgress;
 }
 
 function renderRootSync(root: FiberRoot, lanes: Lanes) {
@@ -1671,7 +1689,7 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     if (enableSchedulingProfiler) {
       markRenderYielded();
     }
-    return RootIncomplete;
+    return RootInProgress;
   } else {
     // Completed the tree.
     if (enableSchedulingProfiler) {
@@ -1796,6 +1814,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         returnFiber.flags |= Incomplete;
         returnFiber.subtreeFlags = NoFlags;
         returnFiber.deletions = null;
+      } else {
+        // We've unwound all the way to the root.
+        workInProgressRootExitStatus = RootDidNotComplete;
+        workInProgress = null;
+        return;
       }
     }
 
@@ -1812,7 +1835,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   } while (completedWork !== null);
 
   // We've reached the root.
-  if (workInProgressRootExitStatus === RootIncomplete) {
+  if (workInProgressRootExitStatus === RootInProgress) {
     workInProgressRootExitStatus = RootCompleted;
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8cb20434be66..4098e196488b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -251,13 +251,14 @@ const RenderContext = /*                */ 0b0010;
 const CommitContext = /*                */ 0b0100;
 export const RetryAfterError = /*       */ 0b1000;
 
-type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5;
-const RootIncomplete = 0;
+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 RootCompleted = 5;
+const RootDidNotComplete = 6;
 
 // Describes where we are in the React execution stack
 let executionContext: ExecutionContext = NoContext;
@@ -280,7 +281,7 @@ export let subtreeRenderLanes: Lanes = NoLanes;
 const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
 
 // Whether to root completed, errored, suspended, etc.
-let workInProgressRootExitStatus: RootExitStatus = RootIncomplete;
+let workInProgressRootExitStatus: RootExitStatus = RootInProgress;
 // A fatal error, if one is thrown
 let workInProgressRootFatalError: mixed = null;
 // "Included" lanes refer to lanes that were worked on during this render. It's
@@ -817,7 +818,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   let exitStatus = shouldTimeSlice
     ? renderRootConcurrent(root, lanes)
     : renderRootSync(root, lanes);
-  if (exitStatus !== RootIncomplete) {
+  if (exitStatus !== RootInProgress) {
     if (exitStatus === RootErrored) {
       // If something threw an error, try rendering one more time. We'll
       // render synchronously to block concurrent data mutations, and we'll
@@ -837,45 +838,58 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       throw fatalError;
     }
 
-    // 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 renderWasConcurrent = !includesBlockingLane(root, lanes);
-    const finishedWork: Fiber = (root.current.alternate: any);
-    if (
-      renderWasConcurrent &&
-      !isRenderConsistentWithExternalStores(finishedWork)
-    ) {
-      // A store was mutated in an interleaved event. Render again,
-      // synchronously, to block further mutations.
-      exitStatus = renderRootSync(root, lanes);
-
-      // We need to check again if something threw
-      if (exitStatus === RootErrored) {
-        const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
-        if (errorRetryLanes !== NoLanes) {
-          lanes = errorRetryLanes;
-          exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
-          // We assume the tree is now consistent because we didn't yield to any
-          // concurrent events.
+    if (exitStatus === RootDidNotComplete) {
+      // The render unwound without completing the tree. This happens in special
+      // cases where need to exit the current render without producing a
+      // consistent tree or committing.
+      //
+      // This should only happen during a concurrent render, not a discrete or
+      // synchronous update. We should have already checked for this when we
+      // unwound the stack.
+      markRootSuspended(root, lanes);
+    } else {
+      // 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 renderWasConcurrent = !includesBlockingLane(root, lanes);
+      const finishedWork: Fiber = (root.current.alternate: any);
+      if (
+        renderWasConcurrent &&
+        !isRenderConsistentWithExternalStores(finishedWork)
+      ) {
+        // A store was mutated in an interleaved event. Render again,
+        // synchronously, to block further mutations.
+        exitStatus = renderRootSync(root, lanes);
+
+        // We need to check again if something threw
+        if (exitStatus === RootErrored) {
+          const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+          if (errorRetryLanes !== NoLanes) {
+            lanes = errorRetryLanes;
+            exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+            // We assume the tree is now consistent because we didn't yield to any
+            // concurrent events.
+          }
+        }
+        if (exitStatus === RootFatalErrored) {
+          const fatalError = workInProgressRootFatalError;
+          prepareFreshStack(root, NoLanes);
+          markRootSuspended(root, lanes);
+          ensureRootIsScheduled(root, now());
+          throw fatalError;
         }
       }
-      if (exitStatus === RootFatalErrored) {
-        const fatalError = workInProgressRootFatalError;
-        prepareFreshStack(root, NoLanes);
-        markRootSuspended(root, lanes);
-        ensureRootIsScheduled(root, now());
-        throw fatalError;
-      }
-    }
 
-    // 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.
-    root.finishedWork = finishedWork;
-    root.finishedLanes = lanes;
-    finishConcurrentRender(root, exitStatus, lanes);
+      // 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.
+      root.finishedWork = finishedWork;
+      root.finishedLanes = lanes;
+      finishConcurrentRender(root, exitStatus, lanes);
+    }
   }
 
   ensureRootIsScheduled(root, now());
@@ -932,7 +946,7 @@ export function queueRecoverableErrors(errors: Array<mixed>) {
 
 function finishConcurrentRender(root, exitStatus, lanes) {
   switch (exitStatus) {
-    case RootIncomplete:
+    case RootInProgress:
     case RootFatalErrored: {
       throw new Error('Root did not complete. This is a bug in React.');
     }
@@ -1148,6 +1162,10 @@ function performSyncWorkOnRoot(root) {
     throw fatalError;
   }
 
+  if (exitStatus === RootDidNotComplete) {
+    throw new Error('Root did not complete. This is a bug in React.');
+  }
+
   // We now have a consistent tree. Because this is a sync render, we
   // will commit it even if something suspended.
   const finishedWork: Fiber = (root.current.alternate: any);
@@ -1343,7 +1361,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   workInProgressRoot = root;
   workInProgress = createWorkInProgress(root.current, null);
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
-  workInProgressRootExitStatus = RootIncomplete;
+  workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
   workInProgressRootInterleavedUpdatedLanes = NoLanes;
@@ -1473,14 +1491,14 @@ export function markSkippedUpdateLanes(lane: Lane | Lanes): void {
 }
 
 export function renderDidSuspend(): void {
-  if (workInProgressRootExitStatus === RootIncomplete) {
+  if (workInProgressRootExitStatus === RootInProgress) {
     workInProgressRootExitStatus = RootSuspended;
   }
 }
 
 export function renderDidSuspendDelayIfPossible(): void {
   if (
-    workInProgressRootExitStatus === RootIncomplete ||
+    workInProgressRootExitStatus === RootInProgress ||
     workInProgressRootExitStatus === RootSuspended ||
     workInProgressRootExitStatus === RootErrored
   ) {
@@ -1521,7 +1539,7 @@ export function renderDidError(error: mixed) {
 export function renderHasNotSuspendedYet(): boolean {
   // If something errored or completed, we can't really be sure,
   // so those are false.
-  return workInProgressRootExitStatus === RootIncomplete;
+  return workInProgressRootExitStatus === RootInProgress;
 }
 
 function renderRootSync(root: FiberRoot, lanes: Lanes) {
@@ -1671,7 +1689,7 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     if (enableSchedulingProfiler) {
       markRenderYielded();
     }
-    return RootIncomplete;
+    return RootInProgress;
   } else {
     // Completed the tree.
     if (enableSchedulingProfiler) {
@@ -1796,6 +1814,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         returnFiber.flags |= Incomplete;
         returnFiber.subtreeFlags = NoFlags;
         returnFiber.deletions = null;
+      } else {
+        // We've unwound all the way to the root.
+        workInProgressRootExitStatus = RootDidNotComplete;
+        workInProgress = null;
+        return;
       }
     }
 
@@ -1812,7 +1835,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   } while (completedWork !== null);
 
   // We've reached the root.
-  if (workInProgressRootExitStatus === RootIncomplete) {
+  if (workInProgressRootExitStatus === RootInProgress) {
     workInProgressRootExitStatus = RootCompleted;
   }
 }
diff --git a/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
index b96882684592..4c44a31b2b12 100644
--- a/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactConcurrentErrorRecovery-test.js
@@ -398,4 +398,138 @@ describe('ReactConcurrentErrorRecovery', () => {
     // Now we can show the error boundary that's wrapped around B.
     expect(root).toMatchRenderedOutput('Oops!B2');
   });
+
+  // @gate enableCache
+  test('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(async () => {
+      startTransition(() => {
+        root.render(<AsyncText text="Async" />);
+      });
+    });
+    expect(Scheduler).toHaveYielded(['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(async () => {
+      startTransition(() => {
+        root.render(
+          <ErrorBoundary>
+            <AsyncText text="Async" />
+          </ErrorBoundary>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [Async]']);
+    expect(root).toMatchRenderedOutput(null);
+
+    // Continues rendering once data resolves
+    await act(async () => {
+      resolveText('Async');
+    });
+    expect(Scheduler).toHaveYielded(['Async']);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  // @gate enableCache
+  test(
+    '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(async () => {
+        startTransition(() => {
+          root.render(
+            <ErrorBoundary>
+              <AsyncText text="Async" />
+              <Throws />
+            </ErrorBoundary>,
+          );
+        });
+      });
+      expect(Scheduler).toHaveYielded([
+        'Suspend! [Async]',
+        // TODO: Ideally we would skip this second render pass to render the
+        // error UI, since it's not going to commit anyway. The same goes for
+        // Suspense fallbacks during a refresh transition.
+        'Caught an error: Oops!',
+      ]);
+      // The render suspended without committing or surfacing the error.
+      expect(root).toMatchRenderedOutput(null);
+
+      // Try the reverse order, too: throw then suspend
+      await act(async () => {
+        startTransition(() => {
+          root.render(
+            <ErrorBoundary>
+              <Throws />
+              <AsyncText text="Async" />
+            </ErrorBoundary>,
+          );
+        });
+      });
+      expect(Scheduler).toHaveYielded([
+        'Suspend! [Async]',
+        'Caught an error: Oops!',
+      ]);
+      expect(root).toMatchRenderedOutput(null);
+
+      await act(async () => {
+        await resolveText('Async');
+      });
+
+      expect(Scheduler).toHaveYielded([
+        'Async',
+        'Caught an error: Oops!',
+
+        // Try recovering from the error by rendering again synchronously
+        'Async',
+        'Caught an error: Oops!',
+      ]);
+
+      expect(root).toMatchRenderedOutput('Caught an error: Oops!');
+    },
+  );
 });

From a6987bee730052dccdddd4645e15b1ce458fd9a6 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 11 Feb 2022 11:42:55 -0500
Subject: [PATCH 1139/1603] add <TracingMarker> component boilerplate (#23275)

- Add Tracing Marker component type to React exports
- Add reconciler work tag
- Add devtools work tag
- Add boilerplate for the cache to render children

No functionality yet
---
 .../src/backend/renderer.js                   | 13 +++++++++
 .../src/backend/types.js                      |  1 +
 packages/react-devtools-shared/src/types.js   |  3 ++-
 packages/react-devtools-shared/src/utils.js   |  7 ++++-
 .../react-reconciler/src/ReactFiber.new.js    | 20 ++++++++++++++
 .../react-reconciler/src/ReactFiber.old.js    | 20 ++++++++++++++
 .../src/ReactFiberBeginWork.new.js            | 27 +++++++++++++++++++
 .../src/ReactFiberBeginWork.old.js            | 27 +++++++++++++++++++
 .../react-reconciler/src/ReactWorkTags.js     |  4 ++-
 .../src/getComponentNameFromFiber.js          |  4 ++-
 packages/react/index.js                       |  1 +
 packages/react/src/React.js                   |  3 +++
 packages/shared/ReactSymbols.js               |  2 ++
 packages/shared/getComponentNameFromType.js   |  3 +++
 packages/shared/isValidElementType.js         | 10 +++++--
 15 files changed, 139 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 61bf164dc459..88c1d5360837 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -24,6 +24,7 @@ import {
   ElementTypeRoot,
   ElementTypeSuspense,
   ElementTypeSuspenseList,
+  ElementTypeTracingMarker,
   StrictMode,
 } from 'react-devtools-shared/src/types';
 import {
@@ -247,6 +248,8 @@ export function getInternalReactConstants(
       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
     };
   } else if (gte(version, '17.0.0-alpha')) {
@@ -277,6 +280,7 @@ export function getInternalReactConstants(
       SimpleMemoComponent: 15,
       SuspenseComponent: 13,
       SuspenseListComponent: 19, // Experimental
+      TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: -1, // Removed
     };
   } else if (gte(version, '16.6.0-beta.0')) {
@@ -307,6 +311,7 @@ export function getInternalReactConstants(
       SimpleMemoComponent: 15,
       SuspenseComponent: 13,
       SuspenseListComponent: 19, // Experimental
+      TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: -1, // Removed
     };
   } else if (gte(version, '16.4.3-alpha')) {
@@ -337,6 +342,7 @@ export function getInternalReactConstants(
       SimpleMemoComponent: -1, // Doesn't exist yet
       SuspenseComponent: 16,
       SuspenseListComponent: -1, // Doesn't exist yet
+      TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: -1, // Removed
     };
   } else {
@@ -367,6 +373,7 @@ export function getInternalReactConstants(
       SimpleMemoComponent: -1, // Doesn't exist yet
       SuspenseComponent: 16,
       SuspenseListComponent: -1, // Doesn't exist yet
+      TracingMarkerComponent: -1, // Doesn't exist yet
       YieldComponent: 9,
     };
   }
@@ -405,6 +412,7 @@ export function getInternalReactConstants(
     SimpleMemoComponent,
     SuspenseComponent,
     SuspenseListComponent,
+    TracingMarkerComponent,
   } = ReactTypeOfWork;
 
   function resolveFiberType(type: any) {
@@ -484,6 +492,8 @@ export function getInternalReactConstants(
         return 'SuspenseList';
       case Profiler:
         return 'Profiler';
+      case TracingMarkerComponent:
+        return 'TracingMarker';
       default:
         const typeSymbol = getTypeSymbol(type);
 
@@ -583,6 +593,7 @@ export function attach(
     SimpleMemoComponent,
     SuspenseComponent,
     SuspenseListComponent,
+    TracingMarkerComponent,
   } = ReactTypeOfWork;
   const {
     ImmediatePriority,
@@ -1044,6 +1055,8 @@ export function attach(
         return ElementTypeSuspense;
       case SuspenseListComponent:
         return ElementTypeSuspenseList;
+      case TracingMarkerComponent:
+        return ElementTypeTracingMarker;
       default:
         const typeSymbol = getTypeSymbol(type);
 
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 91a1a0c713cb..4d975dbfec0d 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -53,6 +53,7 @@ export type WorkTagMap = {|
   SimpleMemoComponent: WorkTag,
   SuspenseComponent: WorkTag,
   SuspenseListComponent: WorkTag,
+  TracingMarkerComponent: WorkTag,
   YieldComponent: WorkTag,
 |};
 
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index 859fb9bd8ff7..6eb3e2f3a768 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -32,11 +32,12 @@ export const ElementTypeProfiler = 10;
 export const ElementTypeRoot = 11;
 export const ElementTypeSuspense = 12;
 export const ElementTypeSuspenseList = 13;
+export const ElementTypeTracingMarker = 14;
 
 // 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;
+export type ElementType = 1 | 2 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14;
 
 // WARNING
 // The values below are referenced by ComponentFilters (which are saved via localStorage).
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index c022cd4650ed..181820646e9f 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -22,7 +22,10 @@ import {
   StrictMode,
   Suspense,
 } from 'react-is';
-import {REACT_SUSPENSE_LIST_TYPE as SuspenseList} from 'shared/ReactSymbols';
+import {
+  REACT_SUSPENSE_LIST_TYPE as SuspenseList,
+  REACT_TRACING_MARKER_TYPE as TracingMarker,
+} from 'shared/ReactSymbols';
 import {
   TREE_OPERATION_ADD,
   TREE_OPERATION_REMOVE,
@@ -684,6 +687,8 @@ export function getDisplayNameForReactElement(
       return 'Suspense';
     case SuspenseList:
       return 'SuspenseList';
+    case TracingMarker:
+      return 'TracingMarker';
     default:
       const {type} = element;
       if (typeof type === 'string') {
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 2e5c40c220a7..ae51649b4a90 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -25,6 +25,7 @@ import {
   enableScopeAPI,
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   supportsPersistence,
@@ -56,6 +57,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
@@ -91,6 +93,7 @@ import {
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
   REACT_CACHE_TYPE,
+  REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
 
 export type {Fiber};
@@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
           return createFiberFromCache(pendingProps, mode, lanes, key);
         }
       // eslint-disable-next-line no-fallthrough
+      case REACT_TRACING_MARKER_TYPE:
+        if (enableTransitionTracing) {
+          return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
+        }
+      // eslint-disable-next-line no-fallthrough
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
@@ -746,6 +754,18 @@ export function createFiberFromCache(
   return fiber;
 }
 
+export function createFiberFromTracingMarker(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: null | string,
+) {
+  const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_TRACING_MARKER_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
 export function createFiberFromText(
   content: string,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 9d559a3f7afb..e590c3f493fb 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -25,6 +25,7 @@ import {
   enableScopeAPI,
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   supportsPersistence,
@@ -56,6 +57,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
@@ -91,6 +93,7 @@ import {
   REACT_OFFSCREEN_TYPE,
   REACT_LEGACY_HIDDEN_TYPE,
   REACT_CACHE_TYPE,
+  REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
 
 export type {Fiber};
@@ -521,6 +524,11 @@ export function createFiberFromTypeAndProps(
           return createFiberFromCache(pendingProps, mode, lanes, key);
         }
       // eslint-disable-next-line no-fallthrough
+      case REACT_TRACING_MARKER_TYPE:
+        if (enableTransitionTracing) {
+          return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
+        }
+      // eslint-disable-next-line no-fallthrough
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
@@ -746,6 +754,18 @@ export function createFiberFromCache(
   return fiber;
 }
 
+export function createFiberFromTracingMarker(
+  pendingProps: any,
+  mode: TypeOfMode,
+  lanes: Lanes,
+  key: null | string,
+) {
+  const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
+  fiber.elementType = REACT_TRACING_MARKER_TYPE;
+  fiber.lanes = lanes;
+  return fiber;
+}
+
 export function createFiberFromText(
   content: string,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index b001088f17e6..521a75d11dcb 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -61,6 +61,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {
   NoFlags,
@@ -93,6 +94,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -898,6 +900,21 @@ function updateCacheComponent(
   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 nextChildren = workInProgress.pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateFragment(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -3900,6 +3917,16 @@ function beginWork(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        return updateTracingMarkerComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      break;
+    }
   }
 
   throw new Error(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index cbf3c5fa2e3c..471bb11d941d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -61,6 +61,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {
   NoFlags,
@@ -93,6 +94,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -898,6 +900,21 @@ function updateCacheComponent(
   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 nextChildren = workInProgress.pendingProps.children;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateFragment(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -3900,6 +3917,16 @@ function beginWork(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        return updateTracingMarkerComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      break;
+    }
   }
 
   throw new Error(
diff --git a/packages/react-reconciler/src/ReactWorkTags.js b/packages/react-reconciler/src/ReactWorkTags.js
index fca4ffdce78b..00d2d93794e9 100644
--- a/packages/react-reconciler/src/ReactWorkTags.js
+++ b/packages/react-reconciler/src/ReactWorkTags.js
@@ -32,7 +32,8 @@ export type WorkTag =
   | 21
   | 22
   | 23
-  | 24;
+  | 24
+  | 25;
 
 export const FunctionComponent = 0;
 export const ClassComponent = 1;
@@ -58,3 +59,4 @@ export const ScopeComponent = 21;
 export const OffscreenComponent = 22;
 export const LegacyHiddenComponent = 23;
 export const CacheComponent = 24;
+export const TracingMarkerComponent = 25;
diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js
index 4ae33c2ed594..5cb87189c975 100644
--- a/packages/react-reconciler/src/getComponentNameFromFiber.js
+++ b/packages/react-reconciler/src/getComponentNameFromFiber.js
@@ -34,6 +34,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
@@ -103,7 +104,8 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
       return 'Suspense';
     case SuspenseListComponent:
       return 'SuspenseList';
-
+    case TracingMarkerComponent:
+      return 'TracingMarker';
     // The display name for this tags come from the user-provided type:
     case ClassComponent:
     case FunctionComponent:
diff --git a/packages/react/index.js b/packages/react/index.js
index 6a249ba432c7..e4946bf095b6 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -58,6 +58,7 @@ export {
   unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_Scope,
+  unstable_TracingMarker,
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 891269ee3265..b899f51c80b6 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -19,6 +19,7 @@ import {
   REACT_OFFSCREEN_TYPE,
   REACT_SCOPE_TYPE,
   REACT_CACHE_TYPE,
+  REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
 
 import {Component, PureComponent} from './ReactBaseClasses';
@@ -126,6 +127,8 @@ export {
   REACT_CACHE_TYPE as unstable_Cache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
+  // enableTransitionTracing
+  REACT_TRACING_MARKER_TYPE as unstable_TracingMarker,
   useId,
   act,
 };
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index a50a06b15016..3c67aeb7b85e 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -30,6 +30,7 @@ export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
 export let REACT_OFFSCREEN_TYPE = 0xeae2;
 export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
 export let REACT_CACHE_TYPE = 0xeae4;
+export let REACT_TRACING_MARKER_TYPE = 0xeae5;
 
 if (typeof Symbol === 'function' && Symbol.for) {
   const symbolFor = Symbol.for;
@@ -50,6 +51,7 @@ if (typeof Symbol === 'function' && Symbol.for) {
   REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
   REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
   REACT_CACHE_TYPE = symbolFor('react.cache');
+  REACT_TRACING_MARKER_TYPE = symbolFor('react.tracing_marker');
 }
 
 const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
diff --git a/packages/shared/getComponentNameFromType.js b/packages/shared/getComponentNameFromType.js
index a8e1d088664e..36432e56acad 100644
--- a/packages/shared/getComponentNameFromType.js
+++ b/packages/shared/getComponentNameFromType.js
@@ -23,6 +23,7 @@ import {
   REACT_SUSPENSE_LIST_TYPE,
   REACT_LAZY_TYPE,
   REACT_CACHE_TYPE,
+  REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
 
 // Keep in sync with react-reconciler/getComponentNameFromFiber
@@ -79,6 +80,8 @@ export default function getComponentNameFromType(type: mixed): string | null {
       return 'SuspenseList';
     case REACT_CACHE_TYPE:
       return 'Cache';
+    case REACT_TRACING_MARKER_TYPE:
+      return 'TracingMarker';
   }
   if (typeof type === 'object') {
     switch (type.$$typeof) {
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 78b6d2fc2754..e72b42d8794a 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -23,8 +23,13 @@ import {
   REACT_LEGACY_HIDDEN_TYPE,
   REACT_OFFSCREEN_TYPE,
   REACT_CACHE_TYPE,
+  REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
-import {enableScopeAPI, enableCache} from './ReactFeatureFlags';
+import {
+  enableScopeAPI,
+  enableCache,
+  enableTransitionTracing,
+} from './ReactFeatureFlags';
 
 let REACT_MODULE_REFERENCE: number | Symbol = 0;
 if (typeof Symbol === 'function') {
@@ -47,7 +52,8 @@ export default function isValidElementType(type: mixed) {
     type === REACT_LEGACY_HIDDEN_TYPE ||
     type === REACT_OFFSCREEN_TYPE ||
     (enableScopeAPI && type === REACT_SCOPE_TYPE) ||
-    (enableCache && type === REACT_CACHE_TYPE)
+    (enableCache && type === REACT_CACHE_TYPE) ||
+    (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE)
   ) {
     return true;
   }

From 1fb0d06878416d321182ddb4601231982e7433c9 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 11 Feb 2022 13:15:10 -0500
Subject: [PATCH 1140/1603] [Devtools][Transition Tracing] Add Transition
 callbacks to createRoot (#23276)

- Add the type of transition tracing callbacks
- Add transition tracing callbacks as an option to `createRoot`
- Add transition tracing callbacks on the root
- Add option to pass transition tracing callbacks to createReactNoop
---
 .../react-dom/src/client/ReactDOMLegacy.js    |  3 +-
 packages/react-dom/src/client/ReactDOMRoot.js | 14 ++++-
 .../react-native-renderer/src/ReactFabric.js  |  1 +
 .../src/ReactNativeRenderer.js                |  1 +
 .../src/createReactNoop.js                    | 14 ++++-
 .../src/ReactFiberReconciler.new.js           |  8 ++-
 .../src/ReactFiberReconciler.old.js           |  8 ++-
 .../src/ReactFiberRoot.new.js                 | 16 +++++-
 .../src/ReactFiberRoot.old.js                 | 16 +++++-
 .../src/ReactInternalTypes.js                 | 55 +++++++++++++++++++
 .../src/ReactTestRenderer.js                  |  1 +
 11 files changed, 129 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index b95be0bd3f22..340e151bf893 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -127,7 +127,8 @@ function legacyCreateRootFromDOMContainer(
     false, // isStrictMode
     false, // concurrentUpdatesByDefaultOverride,
     '', // identifierPrefix
-    noopOnRecoverableError,
+    noopOnRecoverableError, // onRecoverableError
+    null, // transitionCallbacks
   );
   markContainerAsRoot(root.current, container);
 
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 9867a1b45e5d..1fe4557cb8bc 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -9,7 +9,10 @@
 
 import type {Container} from './ReactDOMHostConfig';
 import type {MutableSource, ReactNodeList} from 'shared/ReactTypes';
-import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  FiberRoot,
+  TransitionTracingCallbacks,
+} from 'react-reconciler/src/ReactInternalTypes';
 
 import {queueExplicitHydrationTarget} from '../events/ReactDOMEventReplaying';
 
@@ -25,6 +28,7 @@ export type CreateRootOptions = {
   unstable_concurrentUpdatesByDefault?: boolean,
   identifierPrefix?: string,
   onRecoverableError?: (error: mixed) => void,
+  transitionCallbacks?: TransitionTracingCallbacks,
   ...
 };
 
@@ -158,6 +162,8 @@ export function createRoot(
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
   let onRecoverableError = defaultOnRecoverableError;
+  let transitionCallbacks = null;
+
   if (options !== null && options !== undefined) {
     if (__DEV__) {
       if ((options: any).hydrate) {
@@ -181,6 +187,9 @@ export function createRoot(
     if (options.onRecoverableError !== undefined) {
       onRecoverableError = options.onRecoverableError;
     }
+    if (options.transitionCallbacks !== undefined) {
+      transitionCallbacks = options.transitionCallbacks;
+    }
   }
 
   const root = createContainer(
@@ -192,6 +201,7 @@ export function createRoot(
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
     onRecoverableError,
+    transitionCallbacks,
   );
   markContainerAsRoot(root.current, container);
 
@@ -260,6 +270,8 @@ export function hydrateRoot(
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
     onRecoverableError,
+    // TODO(luna) Support hydration later
+    null,
   );
   markContainerAsRoot(root.current, container);
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 2f64c5a59199..127b20fd5dac 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -221,6 +221,7 @@ function render(
       null,
       '',
       onRecoverableError,
+      null,
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 2ea04acdcbe6..1dca2cd7a1d9 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -217,6 +217,7 @@ function render(
       null,
       '',
       onRecoverableError,
+      null,
     );
     roots.set(containerTag, root);
   }
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index c314af59cb59..e0ba72076a1a 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -14,7 +14,10 @@
  * environment.
  */
 
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {
+  Fiber,
+  TransitionTracingCallbacks,
+} from 'react-reconciler/src/ReactInternalTypes';
 import type {UpdateQueue} from 'react-reconciler/src/ReactUpdateQueue';
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {RootTag} from 'react-reconciler/src/ReactRootTags';
@@ -64,6 +67,10 @@ type TextInstance = {|
   context: HostContext,
 |};
 type HostContext = Object;
+type CreateRootOptions = {
+  transitionCallbacks?: TransitionTracingCallbacks,
+  ...
+};
 
 const NO_CONTEXT = {};
 const UPPERCASE_CONTEXT = {};
@@ -980,7 +987,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     },
 
     // TODO: Replace ReactNoop.render with createRoot + root.render
-    createRoot() {
+    createRoot(options?: CreateRootOptions) {
       const container = {
         rootID: '' + idCounter++,
         pendingChildren: [],
@@ -995,6 +1002,9 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         false,
         '',
         onRecoverableError,
+        options && options.transitionCallbacks
+          ? options.transitionCallbacks
+          : null,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index d3130581d2ff..6db63352bfc2 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {Fiber, SuspenseHydrationCallbacks} from './ReactInternalTypes';
+import type {
+  Fiber,
+  SuspenseHydrationCallbacks,
+  TransitionTracingCallbacks,
+} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {
@@ -246,6 +250,7 @@ export function createContainer(
   concurrentUpdatesByDefaultOverride: null | boolean,
   identifierPrefix: string,
   onRecoverableError: (error: mixed) => void,
+  transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -256,6 +261,7 @@ export function createContainer(
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
     onRecoverableError,
+    transitionCallbacks,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 19136883c778..d8be40ba0267 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {Fiber, SuspenseHydrationCallbacks} from './ReactInternalTypes';
+import type {
+  Fiber,
+  SuspenseHydrationCallbacks,
+  TransitionTracingCallbacks,
+} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {
@@ -246,6 +250,7 @@ export function createContainer(
   concurrentUpdatesByDefaultOverride: null | boolean,
   identifierPrefix: string,
   onRecoverableError: (error: mixed) => void,
+  transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
   return createFiberRoot(
     containerInfo,
@@ -256,6 +261,7 @@ export function createContainer(
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
     onRecoverableError,
+    transitionCallbacks,
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 85820dc7a3cd..3a4546008ad5 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
+import type {
+  FiberRoot,
+  SuspenseHydrationCallbacks,
+  TransitionTracingCallbacks,
+} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
@@ -25,6 +29,7 @@ import {
   enableProfilerCommitHooks,
   enableProfilerTimer,
   enableUpdaterTracking,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
@@ -78,6 +83,10 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
+  if (enableTransitionTracing) {
+    this.transitionCallbacks = null;
+  }
+
   if (enableProfilerTimer && enableProfilerCommitHooks) {
     this.effectDuration = 0;
     this.passiveEffectDuration = 0;
@@ -116,6 +125,7 @@ export function createFiberRoot(
   // single type, like a DynamicHostConfig that is defined by the renderer.
   identifierPrefix: string,
   onRecoverableError: null | ((error: mixed) => void),
+  transitionCallbacks: null | TransitionTracingCallbacks,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(
     containerInfo,
@@ -128,6 +138,10 @@ export function createFiberRoot(
     root.hydrationCallbacks = hydrationCallbacks;
   }
 
+  if (enableTransitionTracing) {
+    root.transitionCallbacks = transitionCallbacks;
+  }
+
   // Cyclic construction. This cheats the type system right now because
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index e1eaee798bfb..56ebcd5cccac 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {FiberRoot, SuspenseHydrationCallbacks} from './ReactInternalTypes';
+import type {
+  FiberRoot,
+  SuspenseHydrationCallbacks,
+  TransitionTracingCallbacks,
+} from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
@@ -25,6 +29,7 @@ import {
   enableProfilerCommitHooks,
   enableProfilerTimer,
   enableUpdaterTracking,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
@@ -78,6 +83,10 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
+  if (enableTransitionTracing) {
+    this.transitionCallbacks = null;
+  }
+
   if (enableProfilerTimer && enableProfilerCommitHooks) {
     this.effectDuration = 0;
     this.passiveEffectDuration = 0;
@@ -116,6 +125,7 @@ export function createFiberRoot(
   // single type, like a DynamicHostConfig that is defined by the renderer.
   identifierPrefix: string,
   onRecoverableError: null | ((error: mixed) => void),
+  transitionCallbacks: null | TransitionTracingCallbacks,
 ): FiberRoot {
   const root: FiberRoot = (new FiberRootNode(
     containerInfo,
@@ -128,6 +138,10 @@ export function createFiberRoot(
     root.hydrationCallbacks = hydrationCallbacks;
   }
 
+  if (enableTransitionTracing) {
+    root.transitionCallbacks = transitionCallbacks;
+  }
+
   // Cyclic construction. This cheats the type system right now because
   // stateNode is any.
   const uninitializedFiber = createHostRootFiber(
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 352498be61f3..ed668d9126b6 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -268,6 +268,60 @@ 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,
+      newName?: string,
+      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,
+      newName?: string,
+      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,
+|};
+
 // 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.
@@ -275,6 +329,7 @@ export type FiberRoot = {
   ...BaseFiberRootProperties,
   ...SuspenseCallbackOnlyFiberRootProperties,
   ...UpdaterTrackingOnlyFiberRootProperties,
+  ...TransitionTracingOnlyFiberRootProperties,
   ...
 };
 
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 75d4de071bfd..e850086439a6 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -479,6 +479,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
     concurrentUpdatesByDefault,
     '',
     onRecoverableError,
+    null,
   );
 
   if (root == null) {

From 08fce6208ed8bede70fa9291eac8412f20ac56b5 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 11 Feb 2022 14:36:36 -0500
Subject: [PATCH 1141/1603] Gracefully handle empty "xstyle" prop values (Part
 2) (#23279)

#23190 misses if entry is undefined or null. This fixes this issue.
---
 .../src/backend/StyleX/__tests__/utils-test.js             | 7 +++++++
 packages/react-devtools-shared/src/backend/StyleX/utils.js | 4 ++++
 2 files changed, 11 insertions(+)

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
index d0b8742a82f8..6dffbb52101a 100644
--- a/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/backend/StyleX/__tests__/utils-test.js
@@ -54,6 +54,13 @@ describe('Stylex plugin utils', () => {
         "sources": Array [],
       }
     `);
+
+    expect(getStyleXData([undefined])).toMatchInlineSnapshot(`
+      Object {
+        "resolvedStyles": Object {},
+        "sources": Array [],
+      }
+    `);
   });
 
   it('should support simple style objects', () => {
diff --git a/packages/react-devtools-shared/src/backend/StyleX/utils.js b/packages/react-devtools-shared/src/backend/StyleX/utils.js
index 230e08360259..68bda23a2262 100644
--- a/packages/react-devtools-shared/src/backend/StyleX/utils.js
+++ b/packages/react-devtools-shared/src/backend/StyleX/utils.js
@@ -35,6 +35,10 @@ export function crawlData(
 
   if (isArray(data)) {
     data.forEach(entry => {
+      if (entry == null) {
+        return;
+      }
+
       if (isArray(entry)) {
         crawlData(entry, sources, resolvedStyles);
       } else {

From 27b5699694f20220e0448f0ba3eb6bfa0d3a64ed Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 11 Feb 2022 17:51:57 -0500
Subject: [PATCH 1142/1603] Simplify cache pool contexts (#23280)

The `pooledCache` variable always points to either `root.pooledCache`
or the stack cursor that is used to track caches that were resumed from
a previous render. We can get rid of it by reading from those instead.
This simplifies the code a lot and is harder to mess up, I think.
---
 .../src/ReactFiberCacheComponent.new.js       | 141 +++++++++---------
 .../src/ReactFiberCacheComponent.old.js       | 141 +++++++++---------
 .../src/__tests__/ReactCache-test.js          |  11 +-
 3 files changed, 145 insertions(+), 148 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 3ad60546c2b0..cf851af6e3de 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -19,6 +19,7 @@ import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 import {pushProvider, popProvider} from './ReactFiberNewContext.new';
 import * as Scheduler from 'scheduler';
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop.new';
 
 export type Cache = {|
   controller: AbortController,
@@ -61,13 +62,9 @@ if (__DEV__ && enableCache) {
   CacheContext._currentRenderer2 = null;
 }
 
-// The cache that newly mounted Cache boundaries should use. It's either
-// retrieved from the cache pool, or the result of a refresh.
-let pooledCache: Cache | null = null;
-
-// When retrying a Suspense/Offscreen boundary, we override pooledCache with the
-// cache from the render that suspended.
-const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(null);
+// 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);
 
 // 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
@@ -135,56 +132,70 @@ export function popCacheProvider(workInProgress: Fiber, cache: Cache) {
   popProvider(CacheContext, workInProgress);
 }
 
-export function requestCacheFromPool(renderLanes: Lanes): Cache {
+function peekCacheFromPool(): Cache | null {
   if (!enableCache) {
     return (null: any);
   }
-  if (pooledCache !== null) {
-    return pooledCache;
+
+  // 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;
   }
-  // Create a fresh cache. The pooled cache must be owned - it is freed
-  // in releaseRootPooledCache() - but the cache instance handed out
-  // is retained/released in the commit phase of the component that
-  // references is (ie the host root, cache boundary, suspense component)
-  // Ie, pooledCache is conceptually an Option<Arc<Cache>> (owned),
-  // whereas the return value of this function is a &Arc<Cache> (borrowed).
-  pooledCache = createCache();
-  retainCache(pooledCache);
-  return pooledCache;
+
+  // 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 pushRootCachePool(root: FiberRoot) {
   if (!enableCache) {
     return;
   }
-  // When we start rendering a tree, read the pooled cache for this render
-  // from `root.pooledCache`. If it's currently `null`, we will lazily
-  // initialize it the first type it's requested. However, we only mutate
-  // the root itself during the complete/unwind phase of the HostRoot.
-  const rootCache = root.pooledCache;
-  if (rootCache != null) {
-    pooledCache = rootCache;
-    root.pooledCache = null;
-  } else {
-    pooledCache = null;
-  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
 }
 
 export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
   if (!enableCache) {
     return;
   }
-  // The `pooledCache` variable points to the cache that was used for new
-  // cache boundaries during this render, if any. Move ownership of the
-  // cache to the root so that parallel transitions may share the same
-  // cache. We will clear this field once all the transitions that depend
-  // on it (which we track with `pooledCacheLanes`) have committed.
-  root.pooledCache = pooledCache;
-  if (pooledCache !== null) {
-    root.pooledCacheLanes |= renderLanes;
-  }
-  // set to null, conceptually we are moving ownership to the root
-  pooledCache = null;
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
 }
 
 export function restoreSpawnedCachePool(
@@ -202,11 +213,10 @@ export function restoreSpawnedCachePool(
     // will override it.
     return null;
   } else {
-    // No refresh. Resume with the previous cache. This will override the cache
-    // pool so that any new Cache boundaries in the subtree use this one instead
-    // of requesting a fresh one.
-    push(prevFreshCacheOnStack, pooledCache, offscreenWorkInProgress);
-    pooledCache = prevCachePool.pool;
+    // No refresh. Resume with the previous cache. New Cache boundaries in the
+    // subtree use this one instead of requesting a fresh one (see
+    // peekCacheFromPool).
+    push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
 
     // Return the cache pool to signal that we did in fact push it. We will
     // assign this to the field on the fiber so we know to pop the context.
@@ -214,39 +224,24 @@ export function restoreSpawnedCachePool(
   }
 }
 
-// Note: Ideally, `popCachePool` would return this value, and then we would pass
-// it to `getSuspendedCachePool`. But factoring reasons, those two functions are
-// in different phases/files. They are always called in sequence, though, so we
-// can stash the value here temporarily.
-let _suspendedPooledCache: Cache | null = null;
-
 export function popCachePool(workInProgress: Fiber) {
   if (!enableCache) {
     return;
   }
-  _suspendedPooledCache = pooledCache;
-  pooledCache = prevFreshCacheOnStack.current;
-  pop(prevFreshCacheOnStack, workInProgress);
+  pop(resumedCache, workInProgress);
 }
 
 export function getSuspendedCachePool(): SpawnedCachePool | null {
   if (!enableCache) {
     return null;
   }
-  // We check the cache on the stack first, since that's the one any new Caches
-  // would have accessed.
-  let pool = pooledCache;
-  if (pool === null) {
-    // There's no pooled cache above us in the stack. However, a child in the
-    // suspended tree may have requested a fresh cache pool. If so, we would
-    // have unwound it with `popCachePool`.
-    if (_suspendedPooledCache !== null) {
-      pool = _suspendedPooledCache;
-      _suspendedPooledCache = null;
-    } else {
-      // There's no suspended cache pool.
-      return 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 {
@@ -255,7 +250,7 @@ export function getSuspendedCachePool(): SpawnedCachePool | null {
     parent: isPrimaryRenderer
       ? CacheContext._currentValue
       : CacheContext._currentValue2,
-    pool,
+    pool: cacheFromPool,
   };
 }
 
@@ -264,8 +259,8 @@ export function getOffscreenDeferredCachePool(): SpawnedCachePool | null {
     return null;
   }
 
-  if (pooledCache === null) {
-    // There's no deferred cache pool.
+  const cacheFromPool = peekCacheFromPool();
+  if (cacheFromPool === null) {
     return null;
   }
 
@@ -275,6 +270,6 @@ export function getOffscreenDeferredCachePool(): SpawnedCachePool | null {
     parent: isPrimaryRenderer
       ? CacheContext._currentValue
       : CacheContext._currentValue2,
-    pool: pooledCache,
+    pool: cacheFromPool,
   };
 }
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index a00059ededf1..692dba781302 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -19,6 +19,7 @@ import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 import {pushProvider, popProvider} from './ReactFiberNewContext.old';
 import * as Scheduler from 'scheduler';
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop.old';
 
 export type Cache = {|
   controller: AbortController,
@@ -61,13 +62,9 @@ if (__DEV__ && enableCache) {
   CacheContext._currentRenderer2 = null;
 }
 
-// The cache that newly mounted Cache boundaries should use. It's either
-// retrieved from the cache pool, or the result of a refresh.
-let pooledCache: Cache | null = null;
-
-// When retrying a Suspense/Offscreen boundary, we override pooledCache with the
-// cache from the render that suspended.
-const prevFreshCacheOnStack: StackCursor<Cache | null> = createCursor(null);
+// 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);
 
 // 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
@@ -135,56 +132,70 @@ export function popCacheProvider(workInProgress: Fiber, cache: Cache) {
   popProvider(CacheContext, workInProgress);
 }
 
-export function requestCacheFromPool(renderLanes: Lanes): Cache {
+function peekCacheFromPool(): Cache | null {
   if (!enableCache) {
     return (null: any);
   }
-  if (pooledCache !== null) {
-    return pooledCache;
+
+  // 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;
   }
-  // Create a fresh cache. The pooled cache must be owned - it is freed
-  // in releaseRootPooledCache() - but the cache instance handed out
-  // is retained/released in the commit phase of the component that
-  // references is (ie the host root, cache boundary, suspense component)
-  // Ie, pooledCache is conceptually an Option<Arc<Cache>> (owned),
-  // whereas the return value of this function is a &Arc<Cache> (borrowed).
-  pooledCache = createCache();
-  retainCache(pooledCache);
-  return pooledCache;
+
+  // 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 pushRootCachePool(root: FiberRoot) {
   if (!enableCache) {
     return;
   }
-  // When we start rendering a tree, read the pooled cache for this render
-  // from `root.pooledCache`. If it's currently `null`, we will lazily
-  // initialize it the first type it's requested. However, we only mutate
-  // the root itself during the complete/unwind phase of the HostRoot.
-  const rootCache = root.pooledCache;
-  if (rootCache != null) {
-    pooledCache = rootCache;
-    root.pooledCache = null;
-  } else {
-    pooledCache = null;
-  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
 }
 
 export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
   if (!enableCache) {
     return;
   }
-  // The `pooledCache` variable points to the cache that was used for new
-  // cache boundaries during this render, if any. Move ownership of the
-  // cache to the root so that parallel transitions may share the same
-  // cache. We will clear this field once all the transitions that depend
-  // on it (which we track with `pooledCacheLanes`) have committed.
-  root.pooledCache = pooledCache;
-  if (pooledCache !== null) {
-    root.pooledCacheLanes |= renderLanes;
-  }
-  // set to null, conceptually we are moving ownership to the root
-  pooledCache = null;
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
 }
 
 export function restoreSpawnedCachePool(
@@ -202,11 +213,10 @@ export function restoreSpawnedCachePool(
     // will override it.
     return null;
   } else {
-    // No refresh. Resume with the previous cache. This will override the cache
-    // pool so that any new Cache boundaries in the subtree use this one instead
-    // of requesting a fresh one.
-    push(prevFreshCacheOnStack, pooledCache, offscreenWorkInProgress);
-    pooledCache = prevCachePool.pool;
+    // No refresh. Resume with the previous cache. New Cache boundaries in the
+    // subtree use this one instead of requesting a fresh one (see
+    // peekCacheFromPool).
+    push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
 
     // Return the cache pool to signal that we did in fact push it. We will
     // assign this to the field on the fiber so we know to pop the context.
@@ -214,39 +224,24 @@ export function restoreSpawnedCachePool(
   }
 }
 
-// Note: Ideally, `popCachePool` would return this value, and then we would pass
-// it to `getSuspendedCachePool`. But factoring reasons, those two functions are
-// in different phases/files. They are always called in sequence, though, so we
-// can stash the value here temporarily.
-let _suspendedPooledCache: Cache | null = null;
-
 export function popCachePool(workInProgress: Fiber) {
   if (!enableCache) {
     return;
   }
-  _suspendedPooledCache = pooledCache;
-  pooledCache = prevFreshCacheOnStack.current;
-  pop(prevFreshCacheOnStack, workInProgress);
+  pop(resumedCache, workInProgress);
 }
 
 export function getSuspendedCachePool(): SpawnedCachePool | null {
   if (!enableCache) {
     return null;
   }
-  // We check the cache on the stack first, since that's the one any new Caches
-  // would have accessed.
-  let pool = pooledCache;
-  if (pool === null) {
-    // There's no pooled cache above us in the stack. However, a child in the
-    // suspended tree may have requested a fresh cache pool. If so, we would
-    // have unwound it with `popCachePool`.
-    if (_suspendedPooledCache !== null) {
-      pool = _suspendedPooledCache;
-      _suspendedPooledCache = null;
-    } else {
-      // There's no suspended cache pool.
-      return 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 {
@@ -255,7 +250,7 @@ export function getSuspendedCachePool(): SpawnedCachePool | null {
     parent: isPrimaryRenderer
       ? CacheContext._currentValue
       : CacheContext._currentValue2,
-    pool,
+    pool: cacheFromPool,
   };
 }
 
@@ -264,8 +259,8 @@ export function getOffscreenDeferredCachePool(): SpawnedCachePool | null {
     return null;
   }
 
-  if (pooledCache === null) {
-    // There's no deferred cache pool.
+  const cacheFromPool = peekCacheFromPool();
+  if (cacheFromPool === null) {
     return null;
   }
 
@@ -275,6 +270,6 @@ export function getOffscreenDeferredCachePool(): SpawnedCachePool | null {
     parent: isPrimaryRenderer
       ? CacheContext._currentValue
       : CacheContext._currentValue2,
-    pool: pooledCache,
+    pool: cacheFromPool,
   };
 }
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index ed6b9fadf648..6a20f738af8b 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -739,14 +739,21 @@ describe('ReactCache', () => {
     await act(async () => {
       refresh();
     });
-    expect(Scheduler).toHaveYielded(['Cache miss! [A]', 'Loading...']);
+    expect(Scheduler).toHaveYielded([
+      'Cache miss! [A]',
+      'Loading...',
+      // The v1 cache can be cleaned up since everything that references it has
+      // been replaced by a fallback. When the boundary switches back to visible
+      // it will use the v2 cache.
+      'Cache cleanup: A [v1]',
+    ]);
     expect(root).toMatchRenderedOutput('Loading...');
 
     await act(async () => {
       resolveMostRecentTextCache('A');
     });
     // Note that the version has updated, and the previous cache is cleared
-    expect(Scheduler).toHaveYielded(['A [v2]', 'Cache cleanup: A [v1]']);
+    expect(Scheduler).toHaveYielded(['A [v2]']);
     expect(root).toMatchRenderedOutput('A [v2]');
 
     await act(async () => {

From f7f7ed089eb04a3504762425baf1d673701c736b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 16 Feb 2022 11:47:50 -0600
Subject: [PATCH 1143/1603] Allow suspending in the shell during hydration
 (#23304)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Allow suspending in the shell during hydration

Builds on behavior added in #23267.

Initial hydration should be allowed to suspend in the shell. In
practice, this happens because the code for the outer shell hasn't
loaded yet.

Currently if you try to do this, it errors because it expects there to
be a parent Suspense boundary, because without a fallback we can't
produce a consistent tree. However, for non-sync updates, we don't need
to produce a consistent tree immediately — we can delay the commit
until the data resolves.

In #23267, I added support for suspending without a parent boundary if
the update was wrapped with `startTransition`. Here, I've expanded this
to include hydration, too.

I wonder if we should expand this even further to include all non-sync/
discrete updates.

* Allow suspending in shell for all non-sync updates

Instead of erroring, we can delay the commit.

The only time we'll continue to error when there's no parent Suspense
boundary is during sync/discrete updates, because those are expected to
produce a complete tree synchronously to maintain consistency with
external state.
---
 .../ReactDOMFizzShellHydration-test.js        | 216 ++++++++++++++++++
 .../src/ReactFiberLane.new.js                 |   4 +
 .../src/ReactFiberLane.old.js                 |   4 +
 .../src/ReactFiberThrow.new.js                |  26 +--
 .../src/ReactFiberThrow.old.js                |  26 +--
 .../__tests__/ReactSuspense-test.internal.js  |  11 -
 .../ReactSuspenseWithNoopRenderer-test.js     |  12 +-
 7 files changed, 259 insertions(+), 40 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js

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 000000000000..728a50986d64
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -0,0 +1,216 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+let JSDOM;
+let React;
+let ReactDOM;
+let Scheduler;
+let clientAct;
+let ReactDOMFizzServer;
+let Stream;
+let document;
+let writable;
+let container;
+let buffer = '';
+let hasErrored = false;
+let fatalError = undefined;
+let textCache;
+
+describe('ReactDOMFizzShellHydration', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    React = require('react');
+    ReactDOM = require('react-dom');
+    Scheduler = require('scheduler');
+    clientAct = require('jest-react').act;
+    ReactDOMFizzServer = require('react-dom/server');
+    Stream = require('stream');
+
+    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 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.unstable_yieldValue(`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.unstable_yieldValue(text);
+  //   return text;
+  // }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  function resetTextCache() {
+    textCache = new Map();
+  }
+
+  test('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);
+    });
+    expect(Scheduler).toHaveYielded(['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 () => {
+      ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
+    expect(div.current).toBe(null);
+    expect(container.textContent).toBe('Shell');
+
+    // The shell loads and hydration finishes
+    await clientAct(async () => {
+      await resolveText('Shell');
+    });
+    expect(Scheduler).toHaveYielded(['Shell']);
+    expect(div.current).toBe(dehydratedDiv);
+    expect(container.textContent).toBe('Shell');
+  });
+
+  test('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 = ReactDOM.createRoot(container);
+    await clientAct(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
+
+    await clientAct(async () => {
+      await resolveText('Shell');
+    });
+    expect(Scheduler).toHaveYielded(['Shell']);
+    expect(container.textContent).toBe('Shell');
+  });
+});
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index b9073b0770ba..452107c907b6 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -443,6 +443,10 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
+export function includesSyncLane(lanes: Lanes) {
+  return (lanes & SyncLane) !== NoLanes;
+}
+
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 1ef12d402128..8360d2630dac 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -443,6 +443,10 @@ export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
   return NoLanes;
 }
 
+export function includesSyncLane(lanes: Lanes) {
+  return (lanes & SyncLane) !== NoLanes;
+}
+
 export function includesNonIdleWork(lanes: Lanes) {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 824f89e96770..24eb0a590b1b 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -79,7 +79,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
-  includesOnlyTransitions,
+  includesSyncLane,
 } from './ReactFiberLane.new';
 import {
   getIsHydrating,
@@ -480,25 +480,25 @@ function throwException(
       attachRetryListener(suspenseBoundary, root, wakeable, rootRenderLanes);
       return;
     } else {
-      // No boundary was found. If we're inside startTransition, this is OK.
+      // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
 
-      if (includesOnlyTransitions(rootRenderLanes)) {
-        // This is a transition. Suspend. Since we're not activating a Suspense
-        // boundary, this will unwind all the way to the root without performing
-        // a second pass to render a fallback. (This is arguably how refresh
-        // transitions should work, too, since we're not going to commit the
-        // fallbacks anyway.)
+      if (!includesSyncLane(rootRenderLanes)) {
+        // This is not a sync update. Suspend. Since we're not activating a
+        // Suspense boundary, this will unwind all the way to the root without
+        // performing a second pass to render a fallback. (This is arguably how
+        // refresh transitions should work, too, since we're not going to commit
+        // the fallbacks anyway.)
+        //
+        // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
         return;
       }
 
-      // We're not in a transition. We treat this case like an error because
-      // discrete renders are expected to finish synchronously to maintain
-      // consistency with external state.
-      // TODO: This will error during non-transition concurrent renders, too.
-      // But maybe it shouldn't?
+      // This is a sync/discrete update. We treat this case like an error
+      // because discrete renders are expected to produce a complete tree
+      // synchronously to maintain consistency with external state.
 
       // TODO: We should never call getComponentNameFromFiber in production.
       // Log a warning or something to prevent us from accidentally bundling it.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 86a43a4dcaf5..5a3c720e1cc5 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -79,7 +79,7 @@ import {
   includesSomeLane,
   mergeLanes,
   pickArbitraryLane,
-  includesOnlyTransitions,
+  includesSyncLane,
 } from './ReactFiberLane.old';
 import {
   getIsHydrating,
@@ -480,25 +480,25 @@ function throwException(
       attachRetryListener(suspenseBoundary, root, wakeable, rootRenderLanes);
       return;
     } else {
-      // No boundary was found. If we're inside startTransition, this is OK.
+      // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
 
-      if (includesOnlyTransitions(rootRenderLanes)) {
-        // This is a transition. Suspend. Since we're not activating a Suspense
-        // boundary, this will unwind all the way to the root without performing
-        // a second pass to render a fallback. (This is arguably how refresh
-        // transitions should work, too, since we're not going to commit the
-        // fallbacks anyway.)
+      if (!includesSyncLane(rootRenderLanes)) {
+        // This is not a sync update. Suspend. Since we're not activating a
+        // Suspense boundary, this will unwind all the way to the root without
+        // performing a second pass to render a fallback. (This is arguably how
+        // refresh transitions should work, too, since we're not going to commit
+        // the fallbacks anyway.)
+        //
+        // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
         return;
       }
 
-      // We're not in a transition. We treat this case like an error because
-      // discrete renders are expected to finish synchronously to maintain
-      // consistency with external state.
-      // TODO: This will error during non-transition concurrent renders, too.
-      // But maybe it shouldn't?
+      // This is a sync/discrete update. We treat this case like an error
+      // because discrete renders are expected to produce a complete tree
+      // synchronously to maintain consistency with external state.
 
       // TODO: We should never call getComponentNameFromFiber in production.
       // Log a warning or something to prevent us from accidentally bundling it.
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index f6c1258728de..82ee6ee6bf1d 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -389,17 +389,6 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('Hi');
   });
 
-  it('throws if tree suspends and none of the Suspense ancestors have a boundary', () => {
-    ReactTestRenderer.create(<AsyncText text="Hi" ms={1000} />, {
-      unstable_isConcurrent: true,
-    });
-
-    expect(Scheduler).toFlushAndThrow(
-      'AsyncText suspended while rendering, but no fallback UI was specified.',
-    );
-    expect(Scheduler).toHaveYielded(['Suspend! [Hi]', 'Suspend! [Hi]']);
-  });
-
   it('updates memoized child of suspense component when context updates (simple memo)', () => {
     const {useContext, createContext, useState, memo} = React;
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 241af6432c73..751caed68ede 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -1003,9 +1003,15 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   });
 
   // @gate enableCache
-  it('throws a helpful error when an update is suspends without a placeholder', () => {
-    ReactNoop.render(<AsyncText text="Async" />);
-    expect(Scheduler).toFlushAndThrow(
+  it('errors when an update suspends without a placeholder during a sync update', () => {
+    // This is an error because sync/discrete updates are expected to produce
+    // a complete tree immediately to maintain consistency with external state
+    // — we can't delay the commit.
+    expect(() => {
+      ReactNoop.flushSync(() => {
+        ReactNoop.render(<AsyncText text="Async" />);
+      });
+    }).toThrow(
       'AsyncText suspended while rendering, but no fallback UI was specified.',
     );
   });

From 80059bb7307e30234ebcc9e6b491c0606e66e6c7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 16 Feb 2022 12:15:25 -0600
Subject: [PATCH 1144/1603] Switch to client rendering if root receives update
 (#23309)

If a hydration root receives an update before the outermost shell has
finished hydrating, we should give up hydrating and switch to
client rendering.

Since the shell is expected to commit quickly, this doesn't happen that
often. The most common sequence is something in the shell suspends, and
then the user quickly navigates to a different screen, triggering a
top-level update.

Instead of immediately switching to client rendering, we could first
attempt to hydration at higher priority, like we do for updates that
occur inside nested dehydrated trees.

But since this case is expected to be rare, and mainly only happens when
the shell is suspended, an attempt at higher priority would likely end
up suspending again anyway, so it would be wasted effort. Implementing
it this way would also require us to add a new lane especially for root
hydration. For simplicity's sake, we'll immediately switch to client
rendering. In the future, if we find another use case for a root
hydration lane, we'll reconsider.
---
 packages/jest-react/src/internalAct.js        | 25 ++++--
 .../ReactDOMFizzShellHydration-test.js        | 38 ++++++++-
 ...DOMServerPartialHydration-test.internal.js |  7 +-
 packages/react-dom/src/client/ReactDOMRoot.js |  8 +-
 .../src/ReactFiberReconciler.js               |  5 ++
 .../src/ReactFiberReconciler.new.js           | 46 ++++++++++
 .../src/ReactFiberReconciler.old.js           | 46 ++++++++++
 .../src/ReactFiberWorkLoop.new.js             | 47 ++++++++++-
 .../src/ReactFiberWorkLoop.old.js             | 47 ++++++++++-
 .../useMutableSourceHydration-test.js         | 84 -------------------
 10 files changed, 241 insertions(+), 112 deletions(-)

diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js
index 9e6bf0e4fd66..52b1d6a7c2fc 100644
--- a/packages/jest-react/src/internalAct.js
+++ b/packages/jest-react/src/internalAct.js
@@ -22,7 +22,7 @@ import enqueueTask from 'shared/enqueueTask';
 
 let actingUpdatesScopeDepth = 0;
 
-export function act(scope: () => Thenable<mixed> | void) {
+export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
   if (Scheduler.unstable_flushAllWithoutAsserting === undefined) {
     throw Error(
       'This version of `act` requires a special mock build of Scheduler.',
@@ -66,20 +66,21 @@ export function act(scope: () => Thenable<mixed> | void) {
   // returned and 2) we could use async/await. Since it's only our used in
   // our test suite, we should be able to.
   try {
-    const thenable = scope();
+    const result = scope();
     if (
-      typeof thenable === 'object' &&
-      thenable !== null &&
-      typeof thenable.then === 'function'
+      typeof result === 'object' &&
+      result !== null &&
+      typeof result.then === 'function'
     ) {
+      const thenableResult: Thenable<T> = (result: any);
       return {
-        then(resolve: () => void, reject: (error: mixed) => void) {
-          thenable.then(
-            () => {
+        then(resolve, reject) {
+          thenableResult.then(
+            returnValue => {
               flushActWork(
                 () => {
                   unwind();
-                  resolve();
+                  resolve(returnValue);
                 },
                 error => {
                   unwind();
@@ -95,6 +96,7 @@ export function act(scope: () => Thenable<mixed> | void) {
         },
       };
     } else {
+      const returnValue: T = (result: any);
       try {
         // TODO: Let's not support non-async scopes at all in our tests. Need to
         // migrate existing tests.
@@ -102,6 +104,11 @@ export function act(scope: () => Thenable<mixed> | void) {
         do {
           didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
         } while (didFlushWork);
+        return {
+          then(resolve, reject) {
+            resolve(returnValue);
+          },
+        };
       } finally {
         unwind();
       }
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
index 728a50986d64..1a32db7bb83d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -140,10 +140,10 @@ describe('ReactDOMFizzShellHydration', () => {
     }
   }
 
-  // function Text({text}) {
-  //   Scheduler.unstable_yieldValue(text);
-  //   return text;
-  // }
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
 
   function AsyncText({text}) {
     readText(text);
@@ -213,4 +213,34 @@ describe('ReactDOMFizzShellHydration', () => {
     expect(Scheduler).toHaveYielded(['Shell']);
     expect(container.textContent).toBe('Shell');
   });
+
+  test('updating the root before the shell hydrates 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);
+    });
+    expect(Scheduler).toHaveYielded(['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 ReactDOM.hydrateRoot(container, <App />);
+    });
+    expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
+    expect(container.textContent).toBe('Shell');
+
+    await clientAct(async () => {
+      root.render(<Text text="New screen" />);
+    });
+    expect(Scheduler).toHaveYielded(['New screen']);
+    expect(container.textContent).toBe('New screen');
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 586901baa14c..575b7c8a3fe9 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1966,6 +1966,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(b.textContent).toBe('B');
 
     const root = ReactDOM.hydrateRoot(container, <App />);
+
     // Increase hydration priority to higher than "offscreen".
     root.unstable_scheduleHydration(b);
 
@@ -1973,14 +1974,8 @@ describe('ReactDOMServerPartialHydration', () => {
 
     await act(async () => {
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
-        React.startTransition(() => {
-          root.render(<App />);
-        });
-
         expect(Scheduler).toFlushAndYieldThrough(['Before', 'After']);
       } else {
-        root.render(<App />);
-
         expect(Scheduler).toFlushAndYieldThrough(['Before']);
         // This took a long time to render.
         Scheduler.unstable_advanceTime(1000);
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 1fe4557cb8bc..e10f9e544817 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -60,6 +60,7 @@ import {
 
 import {
   createContainer,
+  createHydrationContainer,
   updateContainer,
   findHostInstanceWithNoPortals,
   registerMutableSourceForHydration,
@@ -261,10 +262,10 @@ export function hydrateRoot(
     }
   }
 
-  const root = createContainer(
+  const root = createHydrationContainer(
+    initialChildren,
     container,
     ConcurrentRoot,
-    true, // hydrate
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -284,9 +285,6 @@ export function hydrateRoot(
     }
   }
 
-  // Render the initial children
-  updateContainer(initialChildren, root, null, null);
-
   return new ReactDOMHydrationRoot(root);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index 6e992ddd7d3b..abc676ff2396 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -16,6 +16,7 @@ import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
 import {
   createContainer as createContainer_old,
+  createHydrationContainer as createHydrationContainer_old,
   updateContainer as updateContainer_old,
   batchedUpdates as batchedUpdates_old,
   deferredUpdates as deferredUpdates_old,
@@ -53,6 +54,7 @@ import {
 
 import {
   createContainer as createContainer_new,
+  createHydrationContainer as createHydrationContainer_new,
   updateContainer as updateContainer_new,
   batchedUpdates as batchedUpdates_new,
   deferredUpdates as deferredUpdates_new,
@@ -91,6 +93,9 @@ import {
 export const createContainer = enableNewReconciler
   ? createContainer_new
   : createContainer_old;
+export const createHydrationContainer = enableNewReconciler
+  ? createHydrationContainer_new
+  : createHydrationContainer_old;
 export const updateContainer = enableNewReconciler
   ? updateContainer_new
   : updateContainer_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 6db63352bfc2..8607b227e9b4 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -57,6 +57,7 @@ import {
   requestEventTime,
   requestUpdateLane,
   scheduleUpdateOnFiber,
+  scheduleInitialHydrationOnRoot,
   flushRoot,
   batchedUpdates,
   flushSync,
@@ -244,6 +245,8 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
+  // TODO: We can remove hydration-specific stuff from createContainer once
+  // we delete legacy mode. The new root API uses createHydrationContainer.
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
@@ -265,6 +268,49 @@ export function createContainer(
   );
 }
 
+export function createHydrationContainer(
+  initialChildren: ReactNodeList,
+  containerInfo: Container,
+  tag: RootTag,
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
+  concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
+  onRecoverableError: (error: mixed) => void,
+  transitionCallbacks: null | TransitionTracingCallbacks,
+): OpaqueRoot {
+  const hydrate = true;
+  const root = createFiberRoot(
+    containerInfo,
+    tag,
+    hydrate,
+    hydrationCallbacks,
+    isStrictMode,
+    concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
+    onRecoverableError,
+    transitionCallbacks,
+  );
+
+  // 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.
+  const current = root.current;
+  const eventTime = requestEventTime();
+  const lane = requestUpdateLane(current);
+  const update = createUpdate(eventTime, lane);
+  // Caution: React DevTools currently depends on this property
+  // being called "element".
+  update.payload = {element: initialChildren};
+  enqueueUpdate(current, update, lane);
+  scheduleInitialHydrationOnRoot(root, lane, eventTime);
+
+  return root;
+}
+
 export function updateContainer(
   element: ReactNodeList,
   container: OpaqueRoot,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index d8be40ba0267..4970b685b1c1 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -57,6 +57,7 @@ import {
   requestEventTime,
   requestUpdateLane,
   scheduleUpdateOnFiber,
+  scheduleInitialHydrationOnRoot,
   flushRoot,
   batchedUpdates,
   flushSync,
@@ -244,6 +245,8 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
+  // TODO: We can remove hydration-specific stuff from createContainer once
+  // we delete legacy mode. The new root API uses createHydrationContainer.
   hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
@@ -265,6 +268,49 @@ export function createContainer(
   );
 }
 
+export function createHydrationContainer(
+  initialChildren: ReactNodeList,
+  containerInfo: Container,
+  tag: RootTag,
+  hydrationCallbacks: null | SuspenseHydrationCallbacks,
+  isStrictMode: boolean,
+  concurrentUpdatesByDefaultOverride: null | boolean,
+  identifierPrefix: string,
+  onRecoverableError: (error: mixed) => void,
+  transitionCallbacks: null | TransitionTracingCallbacks,
+): OpaqueRoot {
+  const hydrate = true;
+  const root = createFiberRoot(
+    containerInfo,
+    tag,
+    hydrate,
+    hydrationCallbacks,
+    isStrictMode,
+    concurrentUpdatesByDefaultOverride,
+    identifierPrefix,
+    onRecoverableError,
+    transitionCallbacks,
+  );
+
+  // 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.
+  const current = root.current;
+  const eventTime = requestEventTime();
+  const lane = requestUpdateLane(current);
+  const update = createUpdate(eventTime, lane);
+  // Caution: React DevTools currently depends on this property
+  // being called "element".
+  update.payload = {element: initialChildren};
+  enqueueUpdate(current, update, lane);
+  scheduleInitialHydrationOnRoot(root, lane, eventTime);
+
+  return root;
+}
+
 export function updateContainer(
   element: ReactNodeList,
   container: OpaqueRoot,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 42d230a4a655..4a1880e0cf84 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -517,8 +517,31 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    // TODO: Consolidate with `isInterleavedUpdate` check
-    if (root === workInProgressRoot) {
+    if (root.isDehydrated && root.tag !== LegacyRoot) {
+      // This root's shell hasn't hydrated yet. Revert to client rendering.
+      // TODO: Log a recoverable error
+      if (workInProgressRoot === root) {
+        // If this happened during an interleaved event, interrupt the
+        // in-progress hydration. Theoretically, we could attempt to force a
+        // synchronous hydration before switching to client rendering, but the
+        // most common reason the shell hasn't hydrated yet is because it
+        // suspended. So it's very likely to suspend again anyway. For
+        // simplicity, we'll skip that atttempt and go straight to
+        // client rendering.
+        //
+        // Another way to model this would be to give the initial hydration its
+        // own special lane. However, it may not be worth adding a lane solely
+        // for this purpose, so we'll wait until we find another use case before
+        // adding it.
+        //
+        // TODO: Consider only interrupting hydration if the priority of the
+        // update is higher than default.
+        prepareFreshStack(root, NoLanes);
+      }
+      root.isDehydrated = false;
+    } else if (root === workInProgressRoot) {
+      // TODO: Consolidate with `isInterleavedUpdate` check
+
       // Received an update to a tree that's in the middle of rendering. Mark
       // that there was an interleaved update work on this root. Unless the
       // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
@@ -564,6 +587,26 @@ export function scheduleUpdateOnFiber(
   return root;
 }
 
+export function scheduleInitialHydrationOnRoot(
+  root: FiberRoot,
+  lane: Lane,
+  eventTime: number,
+) {
+  // 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, eventTime);
+  ensureRootIsScheduled(root, eventTime);
+}
+
 // This is split into a separate function so we can mark a fiber with pending
 // work without treating it as a typical update that originates from an event;
 // e.g. retrying a Suspense boundary isn't an update, but it does schedule work
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 4098e196488b..b9fada5bd00b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -517,8 +517,31 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    // TODO: Consolidate with `isInterleavedUpdate` check
-    if (root === workInProgressRoot) {
+    if (root.isDehydrated && root.tag !== LegacyRoot) {
+      // This root's shell hasn't hydrated yet. Revert to client rendering.
+      // TODO: Log a recoverable error
+      if (workInProgressRoot === root) {
+        // If this happened during an interleaved event, interrupt the
+        // in-progress hydration. Theoretically, we could attempt to force a
+        // synchronous hydration before switching to client rendering, but the
+        // most common reason the shell hasn't hydrated yet is because it
+        // suspended. So it's very likely to suspend again anyway. For
+        // simplicity, we'll skip that atttempt and go straight to
+        // client rendering.
+        //
+        // Another way to model this would be to give the initial hydration its
+        // own special lane. However, it may not be worth adding a lane solely
+        // for this purpose, so we'll wait until we find another use case before
+        // adding it.
+        //
+        // TODO: Consider only interrupting hydration if the priority of the
+        // update is higher than default.
+        prepareFreshStack(root, NoLanes);
+      }
+      root.isDehydrated = false;
+    } else if (root === workInProgressRoot) {
+      // TODO: Consolidate with `isInterleavedUpdate` check
+
       // Received an update to a tree that's in the middle of rendering. Mark
       // that there was an interleaved update work on this root. Unless the
       // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
@@ -564,6 +587,26 @@ export function scheduleUpdateOnFiber(
   return root;
 }
 
+export function scheduleInitialHydrationOnRoot(
+  root: FiberRoot,
+  lane: Lane,
+  eventTime: number,
+) {
+  // 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, eventTime);
+  ensureRootIsScheduled(root, eventTime);
+}
+
 // This is split into a separate function so we can mark a fiber with pending
 // work without treating it as a typical update that originates from an event;
 // e.g. retrying a Suspense boundary isn't an update, but it does schedule work
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 16ebb4657d28..bbaed39d15ed 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -35,15 +35,6 @@ describe('useMutableSourceHydration', () => {
       React.useMutableSource || React.unstable_useMutableSource;
   });
 
-  function dispatchAndSetCurrentEvent(el, event) {
-    try {
-      window.event = event;
-      el.dispatchEvent(event);
-    } finally {
-      window.event = undefined;
-    }
-  }
-
   const defaultGetSnapshot = source => source.value;
   const defaultSubscribe = (source, callback) => source.subscribe(callback);
 
@@ -380,79 +371,4 @@ describe('useMutableSourceHydration', () => {
         'an issue.',
     ]);
   });
-
-  // @gate !enableSyncDefaultUpdates
-  // @gate enableUseMutableSource
-  it('should detect a tear during a higher priority interruption', () => {
-    const source = createSource('one');
-    const mutableSource = createMutableSource(source, param => param.version);
-
-    function Unrelated({flag}) {
-      Scheduler.unstable_yieldValue(flag);
-      return flag;
-    }
-
-    function TestComponent({flag}) {
-      return (
-        <>
-          <Unrelated flag={flag} />
-          <Component
-            label="a"
-            getSnapshot={defaultGetSnapshot}
-            mutableSource={mutableSource}
-            subscribe={defaultSubscribe}
-          />
-        </>
-      );
-    }
-
-    const container = document.createElement('div');
-    document.body.appendChild(container);
-
-    const htmlString = ReactDOMServer.renderToString(
-      <TestComponent flag={1} />,
-    );
-    container.innerHTML = htmlString;
-    expect(Scheduler).toHaveYielded([1, 'a:one']);
-    expect(source.listenerCount).toBe(0);
-
-    expect(() => {
-      act(() => {
-        let root;
-        if (gate(flags => flags.enableSyncDefaultUpdates)) {
-          React.startTransition(() => {
-            root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
-              mutableSources: [mutableSource],
-            });
-          });
-        } else {
-          root = ReactDOM.hydrateRoot(container, <TestComponent flag={1} />, {
-            mutableSources: [mutableSource],
-          });
-        }
-        expect(Scheduler).toFlushAndYieldThrough([1]);
-
-        // Render an update which will be higher priority than the hydration.
-        // We can do this by scheduling the update inside a mouseover event.
-        const arbitraryElement = document.createElement('div');
-        const mouseOverEvent = document.createEvent('MouseEvents');
-        mouseOverEvent.initEvent('mouseover', true, true);
-        arbitraryElement.addEventListener('mouseover', () => {
-          root.render(<TestComponent flag={2} />);
-        });
-        dispatchAndSetCurrentEvent(arbitraryElement, mouseOverEvent);
-
-        expect(Scheduler).toFlushAndYieldThrough([2]);
-        source.value = 'two';
-      });
-    }).toErrorDev(
-      'Warning: Text content did not match. Server: "1" Client: "2"',
-    );
-    expect(source.listenerCount).toBe(1);
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      expect(Scheduler).toHaveYielded([2, 'a:two']);
-    } else {
-      expect(Scheduler).toHaveYielded(['a:two']);
-    }
-  });
 });

From 79ed5e18fd5dba4148e3ca73da53fd6eef037209 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 17 Feb 2022 09:24:03 -0600
Subject: [PATCH 1145/1603] Delete vestigial RetryAfterError logic (#23312)

This code was originally added to force a client render after receiving
an error during hydration. Later we added the ForceClientRender to
implement the same behavior, but scoped to an individual Suspense
boundary instead of all the boundaries in the entire root. So it's
now redudant.

We had some test coverage already but I added another test specifically
for the case of throwing a recoverable hydration error in the shell.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 77 +++++++++++++++++++
 .../src/ReactFiberBeginWork.new.js            | 11 ---
 .../src/ReactFiberBeginWork.old.js            | 11 ---
 .../src/ReactFiberWorkLoop.new.js             | 15 +---
 .../src/ReactFiberWorkLoop.old.js             | 15 +---
 5 files changed, 85 insertions(+), 44 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 0782b57ff4b4..1ecab933035f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1864,6 +1864,83 @@ describe('ReactDOMFizzServer', () => {
     }
   });
 
+  // @gate experimental
+  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.unstable_yieldValue(value);
+        return value;
+      }
+
+      const spanRef = React.createRef();
+
+      function App() {
+        return (
+          <span ref={spanRef}>
+            <Child />
+          </span>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(Scheduler).toHaveYielded(['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;
+      ReactDOM.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      });
+
+      // An error logged but instead of surfacing it to the UI, we switched
+      // to client rendering.
+      expect(() => {
+        expect(Scheduler).toFlushAndYield(['Yay!', 'Hydration error']);
+      }).toErrorDev(
+        'An error occurred during hydration. The server HTML was replaced',
+        {withoutStack: true},
+      );
+      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);
+    },
+  );
+
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 521a75d11dcb..f0d7b6c625cc 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -225,9 +225,6 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getExecutionContext,
-  RetryAfterError,
-  NoContext,
 } from './ReactFiberWorkLoop.new';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {
@@ -2646,14 +2643,6 @@ function updateDehydratedSuspenseComponent(
   // but after we've already committed once.
   warnIfHydrating();
 
-  if ((getExecutionContext() & RetryAfterError) !== NoContext) {
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-    );
-  }
-
   if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 471bb11d941d..b562291850ea 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -225,9 +225,6 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getExecutionContext,
-  RetryAfterError,
-  NoContext,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {
@@ -2646,14 +2643,6 @@ function updateDehydratedSuspenseComponent(
   // but after we've already committed once.
   warnIfHydrating();
 
-  if ((getExecutionContext() & RetryAfterError) !== NoContext) {
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-    );
-  }
-
   if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     return retrySuspenseComponentWithoutHydrating(
       current,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 4a1880e0cf84..12bc721c6d39 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -245,11 +245,10 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b0000;
-const BatchedContext = /*               */ 0b0001;
-const RenderContext = /*                */ 0b0010;
-const CommitContext = /*                */ 0b0100;
-export const RetryAfterError = /*       */ 0b1000;
+export const NoContext = /*             */ 0b000;
+const BatchedContext = /*               */ 0b001;
+const RenderContext = /*                */ 0b010;
+const CommitContext = /*                */ 0b100;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 const RootInProgress = 0;
@@ -945,9 +944,6 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 }
 
 function recoverFromConcurrentError(root, errorRetryLanes) {
-  const prevExecutionContext = executionContext;
-  executionContext |= RetryAfterError;
-
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
   if (root.isDehydrated) {
@@ -970,9 +966,6 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   } else {
     // The UI failed to recover.
   }
-
-  executionContext = prevExecutionContext;
-
   return exitStatus;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b9fada5bd00b..9e37f41f4fc8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -245,11 +245,10 @@ const {
 
 type ExecutionContext = number;
 
-export const NoContext = /*             */ 0b0000;
-const BatchedContext = /*               */ 0b0001;
-const RenderContext = /*                */ 0b0010;
-const CommitContext = /*                */ 0b0100;
-export const RetryAfterError = /*       */ 0b1000;
+export const NoContext = /*             */ 0b000;
+const BatchedContext = /*               */ 0b001;
+const RenderContext = /*                */ 0b010;
+const CommitContext = /*                */ 0b100;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 const RootInProgress = 0;
@@ -945,9 +944,6 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 }
 
 function recoverFromConcurrentError(root, errorRetryLanes) {
-  const prevExecutionContext = executionContext;
-  executionContext |= RetryAfterError;
-
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
   if (root.isDehydrated) {
@@ -970,9 +966,6 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   } else {
     // The UI failed to recover.
   }
-
-  executionContext = prevExecutionContext;
-
   return exitStatus;
 }
 

From 51c8411d9dab33290b794fe716b9514e7db1fb68 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 17 Feb 2022 15:16:17 -0500
Subject: [PATCH 1146/1603] Log a recoverable error whenever hydration fails
 (#23319)

There are several cases where hydration fails, server-rendered HTML is
discarded, and we fall back to client rendering. Whenever this happens,
we will now log an error with onRecoverableError, with a message
explaining why.

In some of these scenarios, this is not the only recoverable error that
is logged. For example, an error during hydration will cause hydration
to fail, which is itself an error. So we end up logging two separate
errors: the original error, and one that explains why hydration failed.

I've made sure that the original error always gets logged first, to
preserve the causal sequence.

Another thing we could do is aggregate the errors with the Error "cause"
feature and AggregateError. Since these are new-ish features in
JavaScript, we'd need a fallback behavior. I'll leave this for a
follow up.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  84 ++++++++--
 .../ReactDOMFizzShellHydration-test.js        |  12 +-
 ...DOMServerPartialHydration-test.internal.js | 145 +++++++++++++++---
 .../src/ReactFiberBeginWork.new.js            |  35 +++++
 .../src/ReactFiberBeginWork.old.js            |  35 +++++
 .../src/ReactFiberHydrationContext.new.js     |   3 +-
 .../src/ReactFiberHydrationContext.old.js     |   3 +-
 .../src/ReactFiberWorkLoop.new.js             |  13 +-
 .../src/ReactFiberWorkLoop.old.js             |  13 +-
 .../useMutableSourceHydration-test.js         |   6 +
 scripts/error-codes/codes.json                |   7 +-
 11 files changed, 315 insertions(+), 41 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 1ecab933035f..01397d00004f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -358,7 +358,11 @@ describe('ReactDOMFizzServer', () => {
     window.__INIT__ = function() {
       bootstrapped = true;
       // Attempt to hydrate the content.
-      ReactDOM.hydrateRoot(container, <App isClient={true} />);
+      ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      });
     };
 
     await act(async () => {
@@ -394,7 +398,10 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // Now we can client render it instead.
-    Scheduler.unstable_flushAll();
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
@@ -465,7 +472,11 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App isClient={true} />);
+    ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -484,7 +495,10 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // Now we can client render it instead.
-    Scheduler.unstable_flushAll();
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
@@ -766,7 +780,11 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -778,7 +796,10 @@ describe('ReactDOMFizzServer', () => {
     });
 
     // We still can't render it on the client.
-    Scheduler.unstable_flushAll();
+    expect(Scheduler).toFlushAndYield([
+      '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>Loading...</div>);
 
     // We now resolve it on the client.
@@ -1455,7 +1476,11 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App isClient={true} />);
+    ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -1484,7 +1509,10 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // That will let us client render it instead.
-    Scheduler.unstable_flushAll();
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(
@@ -1736,8 +1764,11 @@ describe('ReactDOMFizzServer', () => {
         // The first paint switches to client rendering due to mismatch
         expect(Scheduler).toFlushUntilNextPaint([
           'client',
-          'Log recoverable error: An error occurred during hydration. ' +
-            'The server HTML was replaced with client content',
+          'Log recoverable error: Hydration failed because the initial ' +
+            'UI does not match what was rendered on the server.',
+          'Log recoverable error: There was an error while hydrating. ' +
+            'Because the error happened outside of a Suspense boundary, the ' +
+            'entire root will switch to client rendering.',
         ]);
       }).toErrorDev(
         [
@@ -1834,8 +1865,11 @@ describe('ReactDOMFizzServer', () => {
         // The first paint switches to client rendering due to mismatch
         expect(Scheduler).toFlushUntilNextPaint([
           'client',
-          'Log recoverable error: An error occurred during hydration. ' +
-            'The server HTML was replaced with client content',
+          'Log recoverable error: Hydration failed because the initial ' +
+            'UI does not match what was rendered on the server.',
+          'Log recoverable error: There was an error while hydrating. ' +
+            'Because the error happened outside of a Suspense boundary, the ' +
+            'entire root will switch to client rendering.',
         ]);
       }).toErrorDev(
         [
@@ -1928,7 +1962,13 @@ describe('ReactDOMFizzServer', () => {
       // An error logged but instead of surfacing it to the UI, we switched
       // to client rendering.
       expect(() => {
-        expect(Scheduler).toFlushAndYield(['Yay!', 'Hydration error']);
+        expect(Scheduler).toFlushAndYield([
+          'Yay!',
+          'Hydration error',
+          'There was an error while hydrating. Because the error happened ' +
+            'outside of a Suspense boundary, the entire root will switch ' +
+            'to client rendering.',
+        ]);
       }).toErrorDev(
         'An error occurred during hydration. The server HTML was replaced',
         {withoutStack: true},
@@ -2012,7 +2052,11 @@ describe('ReactDOMFizzServer', () => {
 
       // An error logged but instead of surfacing it to the UI, we switched
       // to client rendering.
-      expect(Scheduler).toFlushAndYield(['Yay!', 'Hydration error']);
+      expect(Scheduler).toFlushAndYield([
+        'Yay!',
+        'Hydration error',
+        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+      ]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
@@ -2178,7 +2222,11 @@ describe('ReactDOMFizzServer', () => {
 
       // An error logged but instead of surfacing it to the UI, we switched
       // to client rendering.
-      expect(Scheduler).toFlushAndYield(['Hydration error']);
+      expect(Scheduler).toFlushAndYield([
+        'Hydration error',
+        'There was an error while hydrating this Suspense boundary. Switched ' +
+          'to client rendering.',
+      ]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
@@ -2328,8 +2376,14 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([
       'A',
       'B',
+
       'Logged recoverable error: Hydration error',
+      'Logged recoverable error: There was an error while hydrating this ' +
+        'Suspense boundary. Switched to client rendering.',
+
       'Logged recoverable error: Hydration error',
+      'Logged recoverable error: There was an error while hydrating this ' +
+        'Suspense boundary. Switched to client rendering.',
     ]);
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
index 1a32db7bb83d..f2668b74fe67 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -232,7 +232,11 @@ describe('ReactDOMFizzShellHydration', () => {
 
     // Hydration suspends because the data for the shell hasn't loaded yet
     const root = await clientAct(async () => {
-      return ReactDOM.hydrateRoot(container, <App />);
+      return ReactDOM.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      });
     });
     expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
     expect(container.textContent).toBe('Shell');
@@ -240,7 +244,11 @@ describe('ReactDOMFizzShellHydration', () => {
     await clientAct(async () => {
       root.render(<Text text="New screen" />);
     });
-    expect(Scheduler).toHaveYielded(['New screen']);
+    expect(Scheduler).toHaveYielded([
+      'This root received an early update, before anything was able ' +
+        'hydrate. Switched the entire root to client rendering.',
+      'New screen',
+    ]);
     expect(container.textContent).toBe('New screen');
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 575b7c8a3fe9..36c452b8cdf3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -348,7 +348,8 @@ describe('ReactDOMServerPartialHydration', () => {
         'Component',
 
         // Hydration mismatch is logged
-        'An error occurred during hydration. The server HTML was replaced with client content',
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
       ]);
 
       // Client rendered - suspense comment nodes removed
@@ -432,8 +433,11 @@ describe('ReactDOMServerPartialHydration', () => {
       onDeleted(node) {
         deleted.push(node);
       },
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
     });
-    Scheduler.unstable_flushAll();
+    expect(Scheduler).toFlushAndYield([]);
 
     expect(hydrated.length).toBe(0);
     expect(deleted.length).toBe(0);
@@ -453,6 +457,12 @@ describe('ReactDOMServerPartialHydration', () => {
 
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
+    expect(Scheduler).toHaveYielded([
+      '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.',
+    ]);
 
     expect(hydrated.length).toBe(1);
     expect(deleted.length).toBe(1);
@@ -507,7 +517,11 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />);
+        ReactDOM.hydrateRoot(container, <App hasB={false} />, {
+          onRecoverableError(error) {
+            Scheduler.unstable_yieldValue(error.message);
+          },
+        });
       });
     }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
 
@@ -517,6 +531,10 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.innerHTML).not.toContain('<span>B</span>');
 
     if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(Scheduler).toHaveYielded([
+        'There was an error while hydrating this Suspense boundary. ' +
+          'Switched to client rendering.',
+      ]);
       expect(ref.current).not.toBe(span);
     } else {
       expect(ref.current).toBe(span);
@@ -642,8 +660,8 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
     if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
       expect(Scheduler).toHaveYielded([
-        'An error occurred during hydration. The server HTML was replaced ' +
-          'with client content',
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
       ]);
     }
 
@@ -1087,6 +1105,11 @@ describe('ReactDOMServerPartialHydration', () => {
     const root = ReactDOM.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      },
     );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -1097,6 +1120,12 @@ describe('ReactDOMServerPartialHydration', () => {
     root.render(<App text="Hi" className="hi" />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
+    expect(Scheduler).toHaveYielded([
+      '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.',
+    ]);
 
     // Flushing now should delete the existing content and show the fallback.
 
@@ -1162,6 +1191,11 @@ describe('ReactDOMServerPartialHydration', () => {
     const root = ReactDOM.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      },
     );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -1175,6 +1209,12 @@ describe('ReactDOMServerPartialHydration', () => {
     // Flushing now should delete the existing content and show the fallback.
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
+    expect(Scheduler).toHaveYielded([
+      '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.',
+    ]);
 
     expect(container.getElementsByTagName('span').length).toBe(1);
     expect(ref.current).toBe(span);
@@ -1236,6 +1276,11 @@ describe('ReactDOMServerPartialHydration', () => {
     const root = ReactDOM.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
+      {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      },
     );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -1257,6 +1302,12 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = false;
     resolve();
     await promise;
+    expect(Scheduler).toHaveYielded([
+      '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.',
+    ]);
 
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -1545,6 +1596,11 @@ describe('ReactDOMServerPartialHydration', () => {
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
       </Context.Provider>,
+      {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      },
     );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -1561,6 +1617,12 @@ describe('ReactDOMServerPartialHydration', () => {
     // Flushing now should delete the existing content and show the fallback.
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
+    expect(Scheduler).toHaveYielded([
+      '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.',
+    ]);
 
     expect(container.getElementsByTagName('span').length).toBe(0);
     expect(ref.current).toBe(null);
@@ -1618,8 +1680,15 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />);
-    Scheduler.unstable_flushAll();
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
     jest.runAllTimers();
 
     expect(container.textContent).toBe('Hello');
@@ -1673,8 +1742,15 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />);
-    Scheduler.unstable_flushAll();
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client 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
@@ -1733,8 +1809,15 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />);
-    Scheduler.unstable_flushAll();
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client 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
@@ -2036,10 +2119,17 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = html;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
 
     suspend = true;
-    Scheduler.unstable_flushAll();
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
 
     // We haven't hydrated the second child but the placeholder is still in the list.
     expect(container.textContent).toBe('ALoading B');
@@ -2094,8 +2184,15 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[1];
 
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />);
-    Scheduler.unstable_flushAll();
+    ReactDOM.hydrateRoot(container, <App />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
     jest.runAllTimers();
 
     expect(ref.current).toBe(span);
@@ -2193,6 +2290,11 @@ describe('ReactDOMServerPartialHydration', () => {
       <ClassName.Provider value={'hello'}>
         <App text="Hello" />
       </ClassName.Provider>,
+      {
+        onRecoverableError(error) {
+          Scheduler.unstable_yieldValue(error.message);
+        },
+      },
     );
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -2212,6 +2314,12 @@ describe('ReactDOMServerPartialHydration', () => {
     // This will force all expiration times to flush.
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
+    expect(Scheduler).toHaveYielded([
+      '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.',
+    ]);
 
     // This will now be a new span because we weren't able to hydrate before
     const newSpan = container.getElementsByTagName('span')[0];
@@ -3232,12 +3340,11 @@ describe('ReactDOMServerPartialHydration', () => {
       {withoutStack: 1},
     );
     expect(Scheduler).toHaveYielded([
-      'Log recoverable error: An error occurred during hydration. The server ' +
-        'HTML was replaced with client content',
+      'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
       // TODO: There were multiple mismatches in a single container. Should
       // we attempt to de-dupe them?
-      'Log recoverable error: An error occurred during hydration. The server ' +
-        'HTML was replaced with client content',
+      'Log recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
+      'Log recoverable error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
     ]);
 
     // We show fallback state when mismatch happens at root
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index f0d7b6c625cc..102ee3337661 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -200,6 +200,7 @@ import {
   resetHydrationState,
   tryToClaimNextHydratableInstance,
   warnIfHydrating,
+  queueHydrationError,
 } from './ReactFiberHydrationContext.new';
 import {
   adoptClassInstance,
@@ -2145,6 +2146,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
               current,
               workInProgress,
               renderLanes,
+              new Error(
+                'There was an error while hydrating this Suspense boundary. ' +
+                  'Switched to client rendering.',
+              ),
             );
           } else if (
             (workInProgress.memoizedState: null | SuspenseState) !== null
@@ -2531,7 +2536,19 @@ function retrySuspenseComponentWithoutHydrating(
   current: Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
+  recoverableError: Error | null,
 ) {
+  // 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.
+  //
+  // The error is passed in as an argument to enforce that every caller provide
+  // a custom message, or explicitly opt out (currently the only path that opts
+  // out is legacy mode; every concurrent path provides an error).
+  if (recoverableError !== null) {
+    queueHydrationError(recoverableError);
+  }
+
   // This will add the old fiber to the deletion list
   reconcileChildFibers(workInProgress, current.child, null, renderLanes);
 
@@ -2648,6 +2665,10 @@ function updateDehydratedSuspenseComponent(
       current,
       workInProgress,
       renderLanes,
+      // TODO: When we delete legacy mode, we should make this error argument
+      // required — every concurrent mode path that causes hydration to
+      // de-opt to client rendering should have an error message.
+      null,
     );
   }
 
@@ -2659,6 +2680,14 @@ function updateDehydratedSuspenseComponent(
       current,
       workInProgress,
       renderLanes,
+      // TODO: The server should serialize the error message so we can log it
+      // here on the client. Or, in production, a hash/id that corresponds to
+      // the error.
+      new Error(
+        'The server could not finish this Suspense boundary, likely ' +
+          'due to an error during server rendering. Switched to ' +
+          'client rendering.',
+      ),
     );
   }
 
@@ -2717,6 +2746,12 @@ function updateDehydratedSuspenseComponent(
       current,
       workInProgress,
       renderLanes,
+      new Error(
+        '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.',
+      ),
     );
   } else if (isSuspenseInstancePending(suspenseInstance)) {
     // This component is still pending more data from the server, so we can't hydrate its
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index b562291850ea..5876cb3eee70 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -200,6 +200,7 @@ import {
   resetHydrationState,
   tryToClaimNextHydratableInstance,
   warnIfHydrating,
+  queueHydrationError,
 } from './ReactFiberHydrationContext.old';
 import {
   adoptClassInstance,
@@ -2145,6 +2146,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
               current,
               workInProgress,
               renderLanes,
+              new Error(
+                'There was an error while hydrating this Suspense boundary. ' +
+                  'Switched to client rendering.',
+              ),
             );
           } else if (
             (workInProgress.memoizedState: null | SuspenseState) !== null
@@ -2531,7 +2536,19 @@ function retrySuspenseComponentWithoutHydrating(
   current: Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
+  recoverableError: Error | null,
 ) {
+  // 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.
+  //
+  // The error is passed in as an argument to enforce that every caller provide
+  // a custom message, or explicitly opt out (currently the only path that opts
+  // out is legacy mode; every concurrent path provides an error).
+  if (recoverableError !== null) {
+    queueHydrationError(recoverableError);
+  }
+
   // This will add the old fiber to the deletion list
   reconcileChildFibers(workInProgress, current.child, null, renderLanes);
 
@@ -2648,6 +2665,10 @@ function updateDehydratedSuspenseComponent(
       current,
       workInProgress,
       renderLanes,
+      // TODO: When we delete legacy mode, we should make this error argument
+      // required — every concurrent mode path that causes hydration to
+      // de-opt to client rendering should have an error message.
+      null,
     );
   }
 
@@ -2659,6 +2680,14 @@ function updateDehydratedSuspenseComponent(
       current,
       workInProgress,
       renderLanes,
+      // TODO: The server should serialize the error message so we can log it
+      // here on the client. Or, in production, a hash/id that corresponds to
+      // the error.
+      new Error(
+        'The server could not finish this Suspense boundary, likely ' +
+          'due to an error during server rendering. Switched to ' +
+          'client rendering.',
+      ),
     );
   }
 
@@ -2717,6 +2746,12 @@ function updateDehydratedSuspenseComponent(
       current,
       workInProgress,
       renderLanes,
+      new Error(
+        '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.',
+      ),
     );
   } else if (isSuspenseInstancePending(suspenseInstance)) {
     // This component is still pending more data from the server, so we can't hydrate its
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index ab2d05cea0aa..59ed33bb80e7 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -358,7 +358,8 @@ function shouldClientRenderOnMismatch(fiber: Fiber) {
 
 function throwOnHydrationMismatch(fiber: Fiber) {
   throw new Error(
-    'An error occurred during hydration. The server HTML was replaced with client content',
+    'Hydration failed because the initial UI does not match what was ' +
+      'rendered on the server.',
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 9ad186495d8e..4ff9011fddc8 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -358,7 +358,8 @@ function shouldClientRenderOnMismatch(fiber: Fiber) {
 
 function throwOnHydrationMismatch(fiber: Fiber) {
   throw new Error(
-    'An error occurred during hydration. The server HTML was replaced with client content',
+    'Hydration failed because the initial UI does not match what was ' +
+      'rendered on the server.',
   );
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 12bc721c6d39..14a313a07774 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -518,7 +518,6 @@ export function scheduleUpdateOnFiber(
 
     if (root.isDehydrated && root.tag !== LegacyRoot) {
       // This root's shell hasn't hydrated yet. Revert to client rendering.
-      // TODO: Log a recoverable error
       if (workInProgressRoot === root) {
         // If this happened during an interleaved event, interrupt the
         // in-progress hydration. Theoretically, we could attempt to force a
@@ -538,6 +537,12 @@ export function scheduleUpdateOnFiber(
         prepareFreshStack(root, NoLanes);
       }
       root.isDehydrated = false;
+      const error = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      const onRecoverableError = root.onRecoverableError;
+      onRecoverableError(error);
     } else if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
@@ -951,6 +956,12 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
+    const error = new Error(
+      'There was an error while hydrating. Because the error happened outside ' +
+        'of a Suspense boundary, the entire root will switch to ' +
+        'client rendering.',
+    );
+    renderDidError(error);
   }
 
   const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 9e37f41f4fc8..36e3ba4b943d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -518,7 +518,6 @@ export function scheduleUpdateOnFiber(
 
     if (root.isDehydrated && root.tag !== LegacyRoot) {
       // This root's shell hasn't hydrated yet. Revert to client rendering.
-      // TODO: Log a recoverable error
       if (workInProgressRoot === root) {
         // If this happened during an interleaved event, interrupt the
         // in-progress hydration. Theoretically, we could attempt to force a
@@ -538,6 +537,12 @@ export function scheduleUpdateOnFiber(
         prepareFreshStack(root, NoLanes);
       }
       root.isDehydrated = false;
+      const error = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      const onRecoverableError = root.onRecoverableError;
+      onRecoverableError(error);
     } else if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
@@ -951,6 +956,12 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
+    const error = new Error(
+      'There was an error while hydrating. Because the error happened outside ' +
+        'of a Suspense boundary, the entire root will switch to ' +
+        'client rendering.',
+    );
+    renderDidError(error);
   }
 
   const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index bbaed39d15ed..5fe2f861dc5f 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -279,6 +279,9 @@ describe('useMutableSourceHydration', () => {
       'Log error: Cannot read from mutable source during the current ' +
         'render without tearing. This may be a bug in React. Please file ' +
         'an issue.',
+      'Log error: There was an error while hydrating. Because the error ' +
+        'happened outside of a Suspense boundary, the entire root will ' +
+        'switch to client rendering.',
     ]);
     expect(source.listenerCount).toBe(2);
   });
@@ -369,6 +372,9 @@ describe('useMutableSourceHydration', () => {
       'Log error: Cannot read from mutable source during the current ' +
         'render without tearing. This may be a bug in React. Please file ' +
         'an issue.',
+      'Log error: There was an error while hydrating. Because the error ' +
+        'happened outside of a Suspense boundary, the entire root will ' +
+        'switch to client rendering.',
     ]);
   });
 });
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 6703e2cd3653..9c9de4605f2d 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -403,5 +403,10 @@
   "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": "An error occurred during hydration. The server HTML was replaced with client content"
+  "418": "Hydration failed because the initial UI does not match what was rendered on the server.",
+  "419": "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.",
+  "420": "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.",
+  "421": "There was an error while hydrating this Suspense boundary. Switched to client rendering.",
+  "422": "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.",
+  "423": "This root received an early update, before anything was able hydrate. Switched the entire root to client rendering."
 }

From e9aa9592c10f604dde7bb31b73e58ec190f3b3dc Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 17 Feb 2022 16:13:27 -0500
Subject: [PATCH 1147/1603] change ReactBatchConfig.transition

Previously, ReactBatchConfig.transition was an number (1 = there is a transition, 0 = there isn't one). This PR changes this to a transition object (object = there is a transition, null = there isn't one) in preparation for transition tracing changes.
---
 .../src/events/ReactDOMEventListener.js       |  4 ++--
 .../src/ReactFiberHooks.new.js                | 23 ++++++++++++-------
 .../src/ReactFiberHooks.old.js                | 23 ++++++++++++-------
 .../ReactFiberTracingMarkerComponent.new.js   | 13 +++++++++++
 .../src/ReactFiberTransition.js               |  5 ++--
 .../src/ReactFiberWorkLoop.new.js             | 23 +++++++++++--------
 .../src/ReactFiberWorkLoop.old.js             | 23 +++++++++++--------
 packages/react/src/ReactCurrentBatchConfig.js | 11 +++------
 packages/react/src/ReactStartTransition.js    | 16 +++++++++----
 9 files changed, 90 insertions(+), 51 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index f228090221ff..f8b8231f8f40 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -117,7 +117,7 @@ function dispatchDiscreteEvent(
 ) {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
-  ReactCurrentBatchConfig.transition = 0;
+  ReactCurrentBatchConfig.transition = null;
   try {
     setCurrentUpdatePriority(DiscreteEventPriority);
     dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
@@ -135,7 +135,7 @@ function dispatchContinuousEvent(
 ) {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
-  ReactCurrentBatchConfig.transition = 0;
+  ReactCurrentBatchConfig.transition = null;
   try {
     setCurrentUpdatePriority(ContinuousEventPriority);
     dispatchEvent(domEventName, eventSystemFlags, container, nativeEvent);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 7747a25c858e..6abe576b58fa 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1928,7 +1928,7 @@ function mountDeferredValue<T>(value: T): T {
   const [prevValue, setValue] = mountState(value);
   mountEffect(() => {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 1;
+    ReactCurrentBatchConfig.transition = {};
     try {
       setValue(value);
     } finally {
@@ -1942,7 +1942,7 @@ function updateDeferredValue<T>(value: T): T {
   const [prevValue, setValue] = updateState(value);
   updateEffect(() => {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 1;
+    ReactCurrentBatchConfig.transition = {};
     try {
       setValue(value);
     } finally {
@@ -1956,7 +1956,7 @@ function rerenderDeferredValue<T>(value: T): T {
   const [prevValue, setValue] = rerenderState(value);
   updateEffect(() => {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 1;
+    ReactCurrentBatchConfig.transition = {};
     try {
       setValue(value);
     } finally {
@@ -1975,20 +1975,27 @@ function startTransition(setPending, callback) {
   setPending(true);
 
   const prevTransition = ReactCurrentBatchConfig.transition;
-  ReactCurrentBatchConfig.transition = 1;
+  ReactCurrentBatchConfig.transition = {};
+  const currentTransition = ReactCurrentBatchConfig.transition;
+
+  if (__DEV__) {
+    ReactCurrentBatchConfig.transition._updatedFibers = new Set();
+  }
+
   try {
     setPending(false);
     callback();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+
     ReactCurrentBatchConfig.transition = prevTransition;
     if (__DEV__) {
       if (
-        prevTransition !== 1 &&
+        prevTransition === null &&
         warnOnSubscriptionInsideStartTransition &&
-        ReactCurrentBatchConfig._updatedFibers
+        currentTransition._updatedFibers
       ) {
-        const updatedFibersCount = ReactCurrentBatchConfig._updatedFibers.size;
+        const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
             'Detected a large number of updates inside startTransition. ' +
@@ -1996,7 +2003,7 @@ function startTransition(setPending, callback) {
               'Otherwise concurrent mode guarantees are off the table.',
           );
         }
-        ReactCurrentBatchConfig._updatedFibers.clear();
+        currentTransition._updatedFibers.clear();
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index d7137e8cd7f6..cbac3348831f 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1928,7 +1928,7 @@ function mountDeferredValue<T>(value: T): T {
   const [prevValue, setValue] = mountState(value);
   mountEffect(() => {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 1;
+    ReactCurrentBatchConfig.transition = {};
     try {
       setValue(value);
     } finally {
@@ -1942,7 +1942,7 @@ function updateDeferredValue<T>(value: T): T {
   const [prevValue, setValue] = updateState(value);
   updateEffect(() => {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 1;
+    ReactCurrentBatchConfig.transition = {};
     try {
       setValue(value);
     } finally {
@@ -1956,7 +1956,7 @@ function rerenderDeferredValue<T>(value: T): T {
   const [prevValue, setValue] = rerenderState(value);
   updateEffect(() => {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 1;
+    ReactCurrentBatchConfig.transition = {};
     try {
       setValue(value);
     } finally {
@@ -1975,20 +1975,27 @@ function startTransition(setPending, callback) {
   setPending(true);
 
   const prevTransition = ReactCurrentBatchConfig.transition;
-  ReactCurrentBatchConfig.transition = 1;
+  ReactCurrentBatchConfig.transition = {};
+  const currentTransition = ReactCurrentBatchConfig.transition;
+
+  if (__DEV__) {
+    ReactCurrentBatchConfig.transition._updatedFibers = new Set();
+  }
+
   try {
     setPending(false);
     callback();
   } finally {
     setCurrentUpdatePriority(previousPriority);
+
     ReactCurrentBatchConfig.transition = prevTransition;
     if (__DEV__) {
       if (
-        prevTransition !== 1 &&
+        prevTransition === null &&
         warnOnSubscriptionInsideStartTransition &&
-        ReactCurrentBatchConfig._updatedFibers
+        currentTransition._updatedFibers
       ) {
-        const updatedFibersCount = ReactCurrentBatchConfig._updatedFibers.size;
+        const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
             'Detected a large number of updates inside startTransition. ' +
@@ -1996,7 +2003,7 @@ function startTransition(setPending, callback) {
               'Otherwise concurrent mode guarantees are off the table.',
           );
         }
-        ReactCurrentBatchConfig._updatedFibers.clear();
+        currentTransition._updatedFibers.clear();
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
new file mode 100644
index 000000000000..15349ce2d68d
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
+export type Transition = {
+  _updatedFibers?: Set<Fiber>,
+};
diff --git a/packages/react-reconciler/src/ReactFiberTransition.js b/packages/react-reconciler/src/ReactFiberTransition.js
index f154364f8670..d63b99a1862e 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.js
@@ -8,11 +8,12 @@
  */
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 
 const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
-export const NoTransition = 0;
+export const NoTransition = null;
 
-export function requestCurrentTransition(): number {
+export function requestCurrentTransition(): Transition | null {
   return ReactCurrentBatchConfig.transition;
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 14a313a07774..3b8cf5dcf983 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -401,9 +401,14 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     if (
       __DEV__ &&
       warnOnSubscriptionInsideStartTransition &&
-      ReactCurrentBatchConfig._updatedFibers
+      ReactCurrentBatchConfig.transition !== null
     ) {
-      ReactCurrentBatchConfig._updatedFibers.add(fiber);
+      const transition = ReactCurrentBatchConfig.transition;
+      if (!transition._updatedFibers) {
+        transition._updatedFibers = new Set();
+      }
+
+      transition._updatedFibers.add(fiber);
     }
     // 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
@@ -1246,7 +1251,7 @@ export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
@@ -1285,7 +1290,7 @@ export function discreteUpdates<A, B, C, D, R>(
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
@@ -1320,7 +1325,7 @@ export function flushSync(fn) {
   const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn();
@@ -1355,7 +1360,7 @@ export function flushControlled(fn: () => mixed): void {
   const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
@@ -1893,7 +1898,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   const previousUpdateLanePriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
   } finally {
@@ -2028,7 +2033,7 @@ function commitRootImpl(
 
   if (subtreeHasEffects || rootHasEffect) {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -2283,7 +2288,7 @@ export function flushPassiveEffects(): boolean {
     const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
-      ReactCurrentBatchConfig.transition = 0;
+      ReactCurrentBatchConfig.transition = null;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 36e3ba4b943d..ebed3103c885 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -401,9 +401,14 @@ export function requestUpdateLane(fiber: Fiber): Lane {
     if (
       __DEV__ &&
       warnOnSubscriptionInsideStartTransition &&
-      ReactCurrentBatchConfig._updatedFibers
+      ReactCurrentBatchConfig.transition !== null
     ) {
-      ReactCurrentBatchConfig._updatedFibers.add(fiber);
+      const transition = ReactCurrentBatchConfig.transition;
+      if (!transition._updatedFibers) {
+        transition._updatedFibers = new Set();
+      }
+
+      transition._updatedFibers.add(fiber);
     }
     // 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
@@ -1246,7 +1251,7 @@ export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DefaultEventPriority);
     return fn();
   } finally {
@@ -1285,7 +1290,7 @@ export function discreteUpdates<A, B, C, D, R>(
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     return fn(a, b, c, d);
   } finally {
@@ -1320,7 +1325,7 @@ export function flushSync(fn) {
   const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     if (fn) {
       return fn();
@@ -1355,7 +1360,7 @@ export function flushControlled(fn: () => mixed): void {
   const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     fn();
   } finally {
@@ -1893,7 +1898,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   const previousUpdateLanePriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
   try {
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
     commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
   } finally {
@@ -2028,7 +2033,7 @@ function commitRootImpl(
 
   if (subtreeHasEffects || rootHasEffect) {
     const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = 0;
+    ReactCurrentBatchConfig.transition = null;
     const previousPriority = getCurrentUpdatePriority();
     setCurrentUpdatePriority(DiscreteEventPriority);
 
@@ -2283,7 +2288,7 @@ export function flushPassiveEffects(): boolean {
     const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
     try {
-      ReactCurrentBatchConfig.transition = 0;
+      ReactCurrentBatchConfig.transition = null;
       setCurrentUpdatePriority(priority);
       return flushPassiveEffectsImpl();
     } finally {
diff --git a/packages/react/src/ReactCurrentBatchConfig.js b/packages/react/src/ReactCurrentBatchConfig.js
index cca41ae4b349..bf368d6f0b6e 100644
--- a/packages/react/src/ReactCurrentBatchConfig.js
+++ b/packages/react/src/ReactCurrentBatchConfig.js
@@ -7,22 +7,17 @@
  * @flow
  */
 
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {Transition} from 'react-reconciler/src/ReactFiberTracingMarkerComponent.new';
 
 type BatchConfig = {
-  transition: number,
-  _updatedFibers?: Set<Fiber>,
+  transition: Transition | null,
 };
 /**
  * Keeps track of the current batch's configuration such as how long an update
  * should suspend for if it needs to.
  */
 const ReactCurrentBatchConfig: BatchConfig = {
-  transition: 0,
+  transition: null,
 };
 
-if (__DEV__) {
-  ReactCurrentBatchConfig._updatedFibers = new Set();
-}
-
 export default ReactCurrentBatchConfig;
diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js
index 3f9c9efe7149..48f9ff96ffa7 100644
--- a/packages/react/src/ReactStartTransition.js
+++ b/packages/react/src/ReactStartTransition.js
@@ -12,18 +12,24 @@ import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags'
 
 export function startTransition(scope: () => void) {
   const prevTransition = ReactCurrentBatchConfig.transition;
-  ReactCurrentBatchConfig.transition = 1;
+  ReactCurrentBatchConfig.transition = {};
+  const currentTransition = ReactCurrentBatchConfig.transition;
+
+  if (__DEV__) {
+    ReactCurrentBatchConfig.transition._updatedFibers = new Set();
+  }
   try {
     scope();
   } finally {
     ReactCurrentBatchConfig.transition = prevTransition;
+
     if (__DEV__) {
       if (
-        prevTransition !== 1 &&
+        prevTransition === null &&
         warnOnSubscriptionInsideStartTransition &&
-        ReactCurrentBatchConfig._updatedFibers
+        currentTransition._updatedFibers
       ) {
-        const updatedFibersCount = ReactCurrentBatchConfig._updatedFibers.size;
+        const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
             'Detected a large number of updates inside startTransition. ' +
@@ -31,7 +37,7 @@ export function startTransition(scope: () => void) {
               'Otherwise concurrent mode guarantees are off the table.',
           );
         }
-        ReactCurrentBatchConfig._updatedFibers.clear();
+        currentTransition._updatedFibers.clear();
       }
     }
   }

From 54f785bc51800556dead12aaedf9594b2f15e836 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 17 Feb 2022 16:44:22 -0500
Subject: [PATCH 1148/1603] Disallow comments as DOM containers for createRoot
 (#23321)

This is an old feature that we no longer support. `hydrateRoot` already
throws if you pass a comment node; this change makes `createRoot`
throw, too.

Still enabled in the Facebook build until we migrate the callers.
---
 .../src/__tests__/ReactDOMRoot-test.js         | 18 ++++++++++++++++++
 packages/react-dom/src/client/ReactDOMRoot.js  | 12 +++++++++---
 packages/shared/ReactFeatureFlags.js           |  4 ++++
 .../forks/ReactFeatureFlags.native-fb.js       |  1 +
 .../forks/ReactFeatureFlags.native-oss.js      |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js   |  1 +
 .../ReactFeatureFlags.test-renderer.native.js  |  1 +
 .../ReactFeatureFlags.test-renderer.www.js     |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js  |  1 +
 .../forks/ReactFeatureFlags.testing.www.js     |  1 +
 packages/shared/forks/ReactFeatureFlags.www.js |  4 ++++
 11 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index c13c2805a5cc..40c966683503 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -402,4 +402,22 @@ describe('ReactDOMRoot', () => {
         'already rendering.',
     );
   });
+
+  // @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(() => ReactDOM.createRoot(commentNode)).toThrow(
+      'createRoot(...): Target container is not a DOM element.',
+    );
+    expect(() => ReactDOM.hydrateRoot(commentNode)).toThrow(
+      'hydrateRoot(...): Target container is not a DOM element.',
+    );
+
+    // Still works in the legacy API
+    ReactDOM.render(<div />, commentNode);
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index e10f9e544817..9665cf07f97e 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -68,7 +68,10 @@ import {
   isAlreadyRendering,
 } from 'react-reconciler/src/ReactFiberReconciler';
 import {ConcurrentRoot} from 'react-reconciler/src/ReactRootTags';
-import {allowConcurrentByDefault} from 'shared/ReactFeatureFlags';
+import {
+  allowConcurrentByDefault,
+  disableCommentsAsDOMContainers,
+} from 'shared/ReactFeatureFlags';
 
 /* global reportError */
 const defaultOnRecoverableError =
@@ -153,7 +156,7 @@ export function createRoot(
   container: Container,
   options?: CreateRootOptions,
 ): RootType {
-  if (!isValidContainerLegacy(container)) {
+  if (!isValidContainer(container)) {
     throw new Error('createRoot(...): Target container is not a DOM element.');
   }
 
@@ -293,7 +296,10 @@ export function isValidContainer(node: any): boolean {
     node &&
     (node.nodeType === ELEMENT_NODE ||
       node.nodeType === DOCUMENT_NODE ||
-      node.nodeType === DOCUMENT_FRAGMENT_NODE)
+      node.nodeType === DOCUMENT_FRAGMENT_NODE ||
+      (!disableCommentsAsDOMContainers &&
+        node.nodeType === COMMENT_NODE &&
+        (node: any).nodeValue === ' react-mount-point-unstable '))
   );
 }
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index fe9d77766cdb..94910e5c8196 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -68,6 +68,10 @@ export const enableSchedulerDebugging = false;
 // Disable javascript: URL strings in href for XSS protection.
 export const disableJavaScriptURLs = false;
 
+// Disable support for comment nodes as React DOM containers. Only supported
+// by www builds.
+export const disableCommentsAsDOMContainers = true;
+
 // Experimental Scope support.
 export const enableScopeAPI = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 699d9a571ff6..c7a842532edf 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -33,6 +33,7 @@ export const enableCache = false;
 export const enableSchedulerDebugging = false;
 export const debugRenderPhaseSideEffectsForStrictMode = true;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 export const warnAboutDeprecatedLifecycles = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 0328a98aef58..81e0fbbbbc62 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = false;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b1afbda8ec59..5d132163e615 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 6c1df25af242..b800db8ef462 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = false;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index e64d09d5d669..670fda818208 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -26,6 +26,7 @@ export const enableLazyElements = false;
 export const enableCache = true;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableScopeAPI = true;
 export const enableCreateEventHandleAPI = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index f0d4a9acc560..cf8b06b11957 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -25,6 +25,7 @@ export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 43ce351301ce..5f77b27d3691 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -25,6 +25,7 @@ export const enableSelectiveHydration = true;
 export const enableLazyElements = false;
 export const enableCache = true;
 export const disableJavaScriptURLs = true;
+export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
 export const enableSchedulerDebugging = false;
 export const enableScopeAPI = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c0545d2aacf3..0c67855b3c3c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -74,6 +74,10 @@ export const enableCache = true;
 
 export const disableJavaScriptURLs = true;
 
+// TODO: www currently relies on this feature. It's disabled in open source.
+// Need to remove it.
+export const disableCommentsAsDOMContainers = false;
+
 export const disableModulePatternComponents = true;
 
 export const enableCreateEventHandleAPI = true;

From 419ccc2b1974206b9fcbe539a31654dd64024156 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 17 Feb 2022 21:43:25 -0500
Subject: [PATCH 1149/1603] Land skipUnmountedBoundaries experiment (#23322)

This has been rolled out to 10% of Facebook users for months without
any issues.
---
 .../ReactErrorBoundaries-test.internal.js        |  1 -
 .../src/ReactFiberWorkLoop.new.js                | 16 ++--------------
 .../src/ReactFiberWorkLoop.old.js                | 16 ++--------------
 .../__tests__/ReactHooksWithNoopRenderer-test.js |  5 -----
 ...eactIncrementalErrorHandling-test.internal.js |  1 -
 packages/shared/ReactFeatureFlags.js             |  6 ------
 .../shared/forks/ReactFeatureFlags.native-fb.js  |  1 -
 .../shared/forks/ReactFeatureFlags.native-oss.js |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js     |  1 -
 .../ReactFeatureFlags.test-renderer.native.js    |  1 -
 .../forks/ReactFeatureFlags.test-renderer.www.js |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js    |  1 -
 .../forks/ReactFeatureFlags.testing.www.js       |  1 -
 .../forks/ReactFeatureFlags.www-dynamic.js       |  1 -
 packages/shared/forks/ReactFeatureFlags.www.js   |  1 -
 15 files changed, 4 insertions(+), 50 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
index c5a1403ddc52..8b1936cc8e11 100644
--- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -42,7 +42,6 @@ describe('ReactErrorBoundaries', () => {
     PropTypes = require('prop-types');
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
-    ReactFeatureFlags.skipUnmountedBoundaries = true;
     ReactDOM = require('react-dom');
     React = require('react');
     act = require('jest-react').act;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 3b8cf5dcf983..c69455bde370 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -30,7 +30,6 @@ import {
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
-  skipUnmountedBoundaries,
   enableUpdaterTracking,
   warnOnSubscriptionInsideStartTransition,
   enableCache,
@@ -2445,13 +2444,7 @@ export function captureCommitPhaseError(
     return;
   }
 
-  let fiber = null;
-  if (skipUnmountedBoundaries) {
-    fiber = nearestMountedAncestor;
-  } else {
-    fiber = sourceFiber.return;
-  }
-
+  let fiber = nearestMountedAncestor;
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
@@ -2484,14 +2477,9 @@ export function captureCommitPhaseError(
   }
 
   if (__DEV__) {
-    // TODO: Until we re-land skipUnmountedBoundaries (see #20147), this warning
-    // will fire for errors that are thrown by destroy functions inside deleted
-    // trees. What it should instead do is propagate the error to the parent of
-    // the deleted tree. In the meantime, do not add this warning to the
-    // allowlist; this is only for our internal use.
     console.error(
       'Internal React error: Attempted to capture a commit phase error ' +
-        'inside a detached tree. This indicates a bug in React. Likely ' +
+        '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',
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index ebed3103c885..ec9e54c1cab1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -30,7 +30,6 @@ import {
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
-  skipUnmountedBoundaries,
   enableUpdaterTracking,
   warnOnSubscriptionInsideStartTransition,
   enableCache,
@@ -2445,13 +2444,7 @@ export function captureCommitPhaseError(
     return;
   }
 
-  let fiber = null;
-  if (skipUnmountedBoundaries) {
-    fiber = nearestMountedAncestor;
-  } else {
-    fiber = sourceFiber.return;
-  }
-
+  let fiber = nearestMountedAncestor;
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
@@ -2484,14 +2477,9 @@ export function captureCommitPhaseError(
   }
 
   if (__DEV__) {
-    // TODO: Until we re-land skipUnmountedBoundaries (see #20147), this warning
-    // will fire for errors that are thrown by destroy functions inside deleted
-    // trees. What it should instead do is propagate the error to the parent of
-    // the deleted tree. In the meantime, do not add this warning to the
-    // allowlist; this is only for our internal use.
     console.error(
       'Internal React error: Attempted to capture a commit phase error ' +
-        'inside a detached tree. This indicates a bug in React. Likely ' +
+        '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',
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 811be0963915..97fffdcbd480 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2351,7 +2351,6 @@ describe('ReactHooksWithNoopRenderer', () => {
         };
       });
 
-      // @gate skipUnmountedBoundaries
       it('should use the nearest still-mounted boundary if there are no unmounted boundaries', () => {
         act(() => {
           ReactNoop.render(
@@ -2377,7 +2376,6 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
-      // @gate skipUnmountedBoundaries
       it('should skip unmounted boundaries and use the nearest still-mounted boundary', () => {
         function Conditional({showChildren}) {
           if (showChildren) {
@@ -2420,7 +2418,6 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
-      // @gate skipUnmountedBoundaries
       it('should call getDerivedStateFromError in the nearest still-mounted boundary', () => {
         function Conditional({showChildren}) {
           if (showChildren) {
@@ -2464,7 +2461,6 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
-      // @gate skipUnmountedBoundaries
       it('should rethrow error if there are no still-mounted boundaries', () => {
         function Conditional({showChildren}) {
           if (showChildren) {
@@ -3190,7 +3186,6 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
     });
 
-    // @gate skipUnmountedBoundaries
     it('catches errors thrown in useLayoutEffect', () => {
       class ErrorBoundary extends React.Component {
         state = {error: null};
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 55ce08b45450..3aa27ceaba69 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1017,7 +1017,6 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
   });
 
-  // @gate skipUnmountedBoundaries
   it('should not attempt to recover an unmounting error boundary', () => {
     class Parent extends React.Component {
       componentWillUnmount() {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 94910e5c8196..901004a9b900 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -121,12 +121,6 @@ export const disableNativeComponentFrames = false;
 // Internal only.
 export const enableGetInspectorDataForInstanceInProduction = false;
 
-// Errors that are thrown while unmounting (or after in the case of passive effects)
-// should bypass any error boundaries that are also unmounting (or have unmounted)
-// and be handled by the nearest still-mounted boundary.
-// If there are no still-mounted boundaries, the errors should be rethrown.
-export const skipUnmountedBoundaries = false;
-
 // When a node is unmounted, recurse into the Fiber subtree and clean out
 // references. Each level cleans up more fiber fields than the previous level.
 // As far as we know, React itself doesn't leak, but because the Fiber contains
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index c7a842532edf..810c5723e5a4 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -58,7 +58,6 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
-export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 81e0fbbbbc62..be80da90ebf3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -49,7 +49,6 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
-export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 5d132163e615..a34948b63b8e 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -49,7 +49,6 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
-export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index b800db8ef462..bca82e63f0bf 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -44,7 +44,6 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
-export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 670fda818208..f0c4e70afacc 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -49,7 +49,6 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
-export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index cf8b06b11957..f4a35bdb8979 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -49,7 +49,6 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
-export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 5f77b27d3691..e4f80908883e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -49,7 +49,6 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
-export const skipUnmountedBoundaries = true;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index ab5e1526e3e6..61898e5a6eec 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -17,7 +17,6 @@ export const warnAboutSpreadingKeyToJSX = __VARIANT__;
 export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
-export const skipUnmountedBoundaries = __VARIANT__;
 export const enableUseRefAccessWarning = __VARIANT__;
 export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 0c67855b3c3c..b0e55bdab05f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -24,7 +24,6 @@ export const {
   enableLegacyFBSupport,
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
-  skipUnmountedBoundaries,
   createRootStrictEffectsByDefault,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,

From caf6d470772d3bf06af5042502579477e367e04f Mon Sep 17 00:00:00 2001
From: David McCabe <davemccabe@gmail.com>
Date: Fri, 18 Feb 2022 10:44:10 -0800
Subject: [PATCH 1150/1603] Enable enableCache on Test Renderer native (#23314)

Co-authored-by: Dave McCabe <davemccabe@fb.com>
---
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index bca82e63f0bf..e86dbbecdf85 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -23,7 +23,7 @@ export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
-export const enableCache = false;
+export const enableCache = true;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;

From 40eaa22d9af685c239f9d8d42b454d031791e76d Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Sat, 19 Feb 2022 10:25:27 -0500
Subject: [PATCH 1151/1603] Remove dependency on Offscreen Fiber updateQueue
 for React Cache (#23229)

We need to use the Offscreen Fiber's update queue for interaction tracing. This PR removes the optimization that React Cache uses to not need to push and pop the cache in special circumstances and defaults to always pushing and popping the cache as long as there was a previous cache.
---
 .../src/ReactFiberBeginWork.new.js            | 70 ++++++++++---------
 .../src/ReactFiberBeginWork.old.js            | 70 ++++++++++---------
 .../src/ReactFiberCacheComponent.new.js       | 26 +++----
 .../src/ReactFiberCacheComponent.old.js       | 26 +++----
 .../src/ReactFiberCompleteWork.new.js         | 21 +++---
 .../src/ReactFiberCompleteWork.old.js         | 21 +++---
 .../src/ReactFiberUnwindWork.new.js           | 20 ++++--
 .../src/ReactFiberUnwindWork.old.js           | 20 ++++--
 .../src/ReactFiberWorkLoop.new.js             | 11 ++-
 .../src/ReactFiberWorkLoop.old.js             | 11 ++-
 10 files changed, 150 insertions(+), 146 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 102ee3337661..9b8de1df8018 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -234,7 +234,7 @@ import {
   pushRootCachePool,
   CacheContext,
   getSuspendedCachePool,
-  restoreSpawnedCachePool,
+  pushSpawnedCachePool,
   getOffscreenDeferredCachePool,
 } from './ReactFiberCacheComponent.new';
 import {createCapturedValue} from './ReactCapturedValue';
@@ -635,11 +635,6 @@ function updateOffscreenComponent(
   const prevState: OffscreenState | null =
     current !== null ? current.memoizedState : null;
 
-  // If this is not null, this is a cache pool that was carried over from the
-  // previous render. We will push this to the cache pool context so that we can
-  // resume in-flight requests.
-  let spawnedCachePool: SpawnedCachePool | null = null;
-
   if (
     nextProps.mode === 'hidden' ||
     nextProps.mode === 'unstable-defer-without-hiding'
@@ -652,8 +647,16 @@ function updateOffscreenComponent(
         cachePool: null,
       };
       workInProgress.memoizedState = nextState;
+      if (enableCache) {
+        // push the cache pool even though we're going to bail out
+        // because otherwise there'd be a context mismatch
+        if (current !== null) {
+          pushSpawnedCachePool(workInProgress, null);
+        }
+      }
       pushRenderLanes(workInProgress, renderLanes);
     } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+      let spawnedCachePool: SpawnedCachePool | null = null;
       // We're hidden, and we're not rendering at Offscreen. We will bail out
       // and resume this tree later.
       let nextBaseLanes;
@@ -663,9 +666,6 @@ function updateOffscreenComponent(
         if (enableCache) {
           // Save the cache pool so we can resume later.
           spawnedCachePool = getOffscreenDeferredCachePool();
-          // We don't need to push to the cache pool because we're about to
-          // bail out. There won't be a context mismatch because we only pop
-          // the cache pool if `updateQueue` is non-null.
         }
       } else {
         nextBaseLanes = renderLanes;
@@ -681,6 +681,14 @@ function updateOffscreenComponent(
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
+      if (enableCache) {
+        // push the cache pool even though we're going to bail out
+        // because otherwise there'd be a context mismatch
+        if (current !== null) {
+          pushSpawnedCachePool(workInProgress, null);
+        }
+      }
+
       // We're about to bail out, but we need to push this to the stack anyway
       // to avoid a push/pop misalignment.
       pushRenderLanes(workInProgress, nextBaseLanes);
@@ -701,19 +709,6 @@ function updateOffscreenComponent(
       // This is the second render. The surrounding visible content has already
       // committed. Now we resume rendering the hidden tree.
 
-      if (enableCache && prevState !== 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.cachePool;
-        if (prevCachePool !== null) {
-          spawnedCachePool = restoreSpawnedCachePool(
-            workInProgress,
-            prevCachePool,
-          );
-        }
-      }
-
       // Rendering at offscreen, so we can clear the base lanes.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
@@ -723,6 +718,14 @@ function updateOffscreenComponent(
       // Push the lanes that were skipped when we bailed out.
       const subtreeRenderLanes =
         prevState !== null ? prevState.baseLanes : renderLanes;
+      if (enableCache && 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;
+        pushSpawnedCachePool(workInProgress, prevCachePool);
+      }
+
       pushRenderLanes(workInProgress, subtreeRenderLanes);
     }
   } else {
@@ -738,12 +741,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        if (prevCachePool !== null) {
-          spawnedCachePool = restoreSpawnedCachePool(
-            workInProgress,
-            prevCachePool,
-          );
-        }
+        pushSpawnedCachePool(workInProgress, prevCachePool);
       }
 
       // Since we're not hidden anymore, reset the state
@@ -753,16 +751,19 @@ function updateOffscreenComponent(
       // special to do. Need to push to the stack regardless, though, to avoid
       // a push/pop misalignment.
       subtreeRenderLanes = renderLanes;
+
+      if (enableCache) {
+        // 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) {
+          pushSpawnedCachePool(workInProgress, null);
+        }
+      }
     }
     pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
-  if (enableCache) {
-    // If we have a cache pool from a previous render attempt, then this will be
-    // non-null. We use this to infer whether to push/pop the cache context.
-    workInProgress.updateQueue = spawnedCachePool;
-  }
-
   if (enablePersistentOffscreenHostContainer && supportsPersistence) {
     // In persistent mode, the offscreen children are wrapped in a host node.
     // TODO: Optimize this to use the OffscreenComponent fiber instead of
@@ -2072,6 +2073,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
     const nextPrimaryChildren = nextProps.children;
     const nextFallbackChildren = nextProps.fallback;
+
     if (showFallback) {
       const fallbackFragment = mountSuspenseFallbackChildren(
         workInProgress,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 5876cb3eee70..457088598e51 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -234,7 +234,7 @@ import {
   pushRootCachePool,
   CacheContext,
   getSuspendedCachePool,
-  restoreSpawnedCachePool,
+  pushSpawnedCachePool,
   getOffscreenDeferredCachePool,
 } from './ReactFiberCacheComponent.old';
 import {createCapturedValue} from './ReactCapturedValue';
@@ -635,11 +635,6 @@ function updateOffscreenComponent(
   const prevState: OffscreenState | null =
     current !== null ? current.memoizedState : null;
 
-  // If this is not null, this is a cache pool that was carried over from the
-  // previous render. We will push this to the cache pool context so that we can
-  // resume in-flight requests.
-  let spawnedCachePool: SpawnedCachePool | null = null;
-
   if (
     nextProps.mode === 'hidden' ||
     nextProps.mode === 'unstable-defer-without-hiding'
@@ -652,8 +647,16 @@ function updateOffscreenComponent(
         cachePool: null,
       };
       workInProgress.memoizedState = nextState;
+      if (enableCache) {
+        // push the cache pool even though we're going to bail out
+        // because otherwise there'd be a context mismatch
+        if (current !== null) {
+          pushSpawnedCachePool(workInProgress, null);
+        }
+      }
       pushRenderLanes(workInProgress, renderLanes);
     } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+      let spawnedCachePool: SpawnedCachePool | null = null;
       // We're hidden, and we're not rendering at Offscreen. We will bail out
       // and resume this tree later.
       let nextBaseLanes;
@@ -663,9 +666,6 @@ function updateOffscreenComponent(
         if (enableCache) {
           // Save the cache pool so we can resume later.
           spawnedCachePool = getOffscreenDeferredCachePool();
-          // We don't need to push to the cache pool because we're about to
-          // bail out. There won't be a context mismatch because we only pop
-          // the cache pool if `updateQueue` is non-null.
         }
       } else {
         nextBaseLanes = renderLanes;
@@ -681,6 +681,14 @@ function updateOffscreenComponent(
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
+      if (enableCache) {
+        // push the cache pool even though we're going to bail out
+        // because otherwise there'd be a context mismatch
+        if (current !== null) {
+          pushSpawnedCachePool(workInProgress, null);
+        }
+      }
+
       // We're about to bail out, but we need to push this to the stack anyway
       // to avoid a push/pop misalignment.
       pushRenderLanes(workInProgress, nextBaseLanes);
@@ -701,19 +709,6 @@ function updateOffscreenComponent(
       // This is the second render. The surrounding visible content has already
       // committed. Now we resume rendering the hidden tree.
 
-      if (enableCache && prevState !== 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.cachePool;
-        if (prevCachePool !== null) {
-          spawnedCachePool = restoreSpawnedCachePool(
-            workInProgress,
-            prevCachePool,
-          );
-        }
-      }
-
       // Rendering at offscreen, so we can clear the base lanes.
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
@@ -723,6 +718,14 @@ function updateOffscreenComponent(
       // Push the lanes that were skipped when we bailed out.
       const subtreeRenderLanes =
         prevState !== null ? prevState.baseLanes : renderLanes;
+      if (enableCache && 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;
+        pushSpawnedCachePool(workInProgress, prevCachePool);
+      }
+
       pushRenderLanes(workInProgress, subtreeRenderLanes);
     }
   } else {
@@ -738,12 +741,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        if (prevCachePool !== null) {
-          spawnedCachePool = restoreSpawnedCachePool(
-            workInProgress,
-            prevCachePool,
-          );
-        }
+        pushSpawnedCachePool(workInProgress, prevCachePool);
       }
 
       // Since we're not hidden anymore, reset the state
@@ -753,16 +751,19 @@ function updateOffscreenComponent(
       // special to do. Need to push to the stack regardless, though, to avoid
       // a push/pop misalignment.
       subtreeRenderLanes = renderLanes;
+
+      if (enableCache) {
+        // 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) {
+          pushSpawnedCachePool(workInProgress, null);
+        }
+      }
     }
     pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
-  if (enableCache) {
-    // If we have a cache pool from a previous render attempt, then this will be
-    // non-null. We use this to infer whether to push/pop the cache context.
-    workInProgress.updateQueue = spawnedCachePool;
-  }
-
   if (enablePersistentOffscreenHostContainer && supportsPersistence) {
     // In persistent mode, the offscreen children are wrapped in a host node.
     // TODO: Optimize this to use the OffscreenComponent fiber instead of
@@ -2072,6 +2073,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
     const nextPrimaryChildren = nextProps.children;
     const nextFallbackChildren = nextProps.fallback;
+
     if (showFallback) {
       const fallbackFragment = mountSuspenseFallbackChildren(
         workInProgress,
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index cf851af6e3de..3d1db8124b69 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -198,29 +198,18 @@ export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
   // code organization purposes in case that changes.
 }
 
-export function restoreSpawnedCachePool(
+export function pushSpawnedCachePool(
   offscreenWorkInProgress: Fiber,
-  prevCachePool: SpawnedCachePool,
-): SpawnedCachePool | null {
+  prevCachePool: SpawnedCachePool | null,
+): void {
   if (!enableCache) {
-    return (null: any);
+    return;
   }
-  const nextParentCache = isPrimaryRenderer
-    ? CacheContext._currentValue
-    : CacheContext._currentValue2;
-  if (nextParentCache !== prevCachePool.parent) {
-    // There was a refresh. Don't bother restoring anything since the refresh
-    // will override it.
-    return null;
+
+  if (prevCachePool === null) {
+    push(resumedCache, resumedCache.current, offscreenWorkInProgress);
   } else {
-    // No refresh. Resume with the previous cache. New Cache boundaries in the
-    // subtree use this one instead of requesting a fresh one (see
-    // peekCacheFromPool).
     push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
-
-    // Return the cache pool to signal that we did in fact push it. We will
-    // assign this to the field on the fiber so we know to pop the context.
-    return prevCachePool;
   }
 }
 
@@ -228,6 +217,7 @@ export function popCachePool(workInProgress: Fiber) {
   if (!enableCache) {
     return;
   }
+
   pop(resumedCache, workInProgress);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index 692dba781302..74dc9a449a50 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -198,29 +198,18 @@ export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
   // code organization purposes in case that changes.
 }
 
-export function restoreSpawnedCachePool(
+export function pushSpawnedCachePool(
   offscreenWorkInProgress: Fiber,
-  prevCachePool: SpawnedCachePool,
-): SpawnedCachePool | null {
+  prevCachePool: SpawnedCachePool | null,
+): void {
   if (!enableCache) {
-    return (null: any);
+    return;
   }
-  const nextParentCache = isPrimaryRenderer
-    ? CacheContext._currentValue
-    : CacheContext._currentValue2;
-  if (nextParentCache !== prevCachePool.parent) {
-    // There was a refresh. Don't bother restoring anything since the refresh
-    // will override it.
-    return null;
+
+  if (prevCachePool === null) {
+    push(resumedCache, resumedCache.current, offscreenWorkInProgress);
   } else {
-    // No refresh. Resume with the previous cache. New Cache boundaries in the
-    // subtree use this one instead of requesting a fresh one (see
-    // peekCacheFromPool).
     push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
-
-    // Return the cache pool to signal that we did in fact push it. We will
-    // assign this to the field on the fiber so we know to pop the context.
-    return prevCachePool;
   }
 }
 
@@ -228,6 +217,7 @@ export function popCachePool(workInProgress: Fiber) {
   if (!enableCache) {
     return;
   }
+
   pop(resumedCache, workInProgress);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 39f724c76df9..bb01e2b8a2a2 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -28,7 +28,7 @@ import type {
 } from './ReactFiberSuspenseComponent.new';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
-import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
+import type {Cache} from './ReactFiberCacheComponent.new';
 import {
   enableClientRenderFallbackOnHydrationMismatch,
   enableSuspenseAvoidThisFallback,
@@ -865,8 +865,8 @@ function completeWork(
         popRootCachePool(fiberRoot, renderLanes);
 
         let previousCache: Cache | null = null;
-        if (workInProgress.alternate !== null) {
-          previousCache = workInProgress.alternate.memoizedState.cache;
+        if (current !== null) {
+          previousCache = current.memoizedState.cache;
         }
         const cache: Cache = workInProgress.memoizedState.cache;
         if (cache !== previousCache) {
@@ -1533,11 +1533,11 @@ function completeWork(
       if (enableCache) {
         let previousCache: Cache | null = null;
         if (
-          workInProgress.alternate !== null &&
-          workInProgress.alternate.memoizedState !== null &&
-          workInProgress.alternate.memoizedState.cachePool !== null
+          current !== null &&
+          current.memoizedState !== null &&
+          current.memoizedState.cachePool !== null
         ) {
-          previousCache = workInProgress.alternate.memoizedState.cachePool.pool;
+          previousCache = current.memoizedState.cachePool.pool;
         }
         let cache: Cache | null = null;
         if (
@@ -1550,8 +1550,7 @@ function completeWork(
           // Run passive effects to retain/release the cache.
           workInProgress.flags |= Passive;
         }
-        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
-        if (spawnedCachePool !== null) {
+        if (current !== null) {
           popCachePool(workInProgress);
         }
       }
@@ -1561,8 +1560,8 @@ function completeWork(
     case CacheComponent: {
       if (enableCache) {
         let previousCache: Cache | null = null;
-        if (workInProgress.alternate !== null) {
-          previousCache = workInProgress.alternate.memoizedState.cache;
+        if (current !== null) {
+          previousCache = current.memoizedState.cache;
         }
         const cache: Cache = workInProgress.memoizedState.cache;
         if (cache !== previousCache) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index c7baf36d16c4..0d9de679a0f4 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -28,7 +28,7 @@ import type {
 } from './ReactFiberSuspenseComponent.old';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
-import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
+import type {Cache} from './ReactFiberCacheComponent.old';
 import {
   enableClientRenderFallbackOnHydrationMismatch,
   enableSuspenseAvoidThisFallback,
@@ -865,8 +865,8 @@ function completeWork(
         popRootCachePool(fiberRoot, renderLanes);
 
         let previousCache: Cache | null = null;
-        if (workInProgress.alternate !== null) {
-          previousCache = workInProgress.alternate.memoizedState.cache;
+        if (current !== null) {
+          previousCache = current.memoizedState.cache;
         }
         const cache: Cache = workInProgress.memoizedState.cache;
         if (cache !== previousCache) {
@@ -1533,11 +1533,11 @@ function completeWork(
       if (enableCache) {
         let previousCache: Cache | null = null;
         if (
-          workInProgress.alternate !== null &&
-          workInProgress.alternate.memoizedState !== null &&
-          workInProgress.alternate.memoizedState.cachePool !== null
+          current !== null &&
+          current.memoizedState !== null &&
+          current.memoizedState.cachePool !== null
         ) {
-          previousCache = workInProgress.alternate.memoizedState.cachePool.pool;
+          previousCache = current.memoizedState.cachePool.pool;
         }
         let cache: Cache | null = null;
         if (
@@ -1550,8 +1550,7 @@ function completeWork(
           // Run passive effects to retain/release the cache.
           workInProgress.flags |= Passive;
         }
-        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
-        if (spawnedCachePool !== null) {
+        if (current !== null) {
           popCachePool(workInProgress);
         }
       }
@@ -1561,8 +1560,8 @@ function completeWork(
     case CacheComponent: {
       if (enableCache) {
         let previousCache: Cache | null = null;
-        if (workInProgress.alternate !== null) {
-          previousCache = workInProgress.alternate.memoizedState.cache;
+        if (current !== null) {
+          previousCache = current.memoizedState.cache;
         }
         const cache: Cache = workInProgress.memoizedState.cache;
         if (cache !== previousCache) {
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index a43c021d987e..aa1b391b0367 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -11,7 +11,7 @@ import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
-import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
+import type {Cache} from './ReactFiberCacheComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
@@ -52,7 +52,11 @@ import {
 import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 
-function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
+function unwindWork(
+  current: Fiber | null,
+  workInProgress: 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
@@ -153,8 +157,7 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
     case LegacyHiddenComponent:
       popRenderLanes(workInProgress);
       if (enableCache) {
-        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
-        if (spawnedCachePool !== null) {
+        if (current !== null) {
           popCachePool(workInProgress);
         }
       }
@@ -170,7 +173,11 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   }
 }
 
-function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
+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
@@ -218,8 +225,7 @@ function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
     case LegacyHiddenComponent:
       popRenderLanes(interruptedWork);
       if (enableCache) {
-        const spawnedCachePool: SpawnedCachePool | null = (interruptedWork.updateQueue: any);
-        if (spawnedCachePool !== null) {
+        if (current !== null) {
           popCachePool(interruptedWork);
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index e0cf7cc2f0fc..cb5df61782bc 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -11,7 +11,7 @@ import type {ReactContext} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
-import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
+import type {Cache} from './ReactFiberCacheComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 import {
@@ -52,7 +52,11 @@ import {
 import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 
-function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
+function unwindWork(
+  current: Fiber | null,
+  workInProgress: 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
@@ -153,8 +157,7 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
     case LegacyHiddenComponent:
       popRenderLanes(workInProgress);
       if (enableCache) {
-        const spawnedCachePool: SpawnedCachePool | null = (workInProgress.updateQueue: any);
-        if (spawnedCachePool !== null) {
+        if (current !== null) {
           popCachePool(workInProgress);
         }
       }
@@ -170,7 +173,11 @@ function unwindWork(workInProgress: Fiber, renderLanes: Lanes) {
   }
 }
 
-function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
+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
@@ -218,8 +225,7 @@ function unwindInterruptedWork(interruptedWork: Fiber, renderLanes: Lanes) {
     case LegacyHiddenComponent:
       popRenderLanes(interruptedWork);
       if (enableCache) {
-        const spawnedCachePool: SpawnedCachePool | null = (interruptedWork.updateQueue: any);
-        if (spawnedCachePool !== null) {
+        if (current !== null) {
           popCachePool(interruptedWork);
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index c69455bde370..cf0fb63f1936 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1405,7 +1405,12 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (workInProgress !== null) {
     let interruptedWork = workInProgress.return;
     while (interruptedWork !== null) {
-      unwindInterruptedWork(interruptedWork, workInProgressRootRenderLanes);
+      const current = interruptedWork.alternate;
+      unwindInterruptedWork(
+        current,
+        interruptedWork,
+        workInProgressRootRenderLanes,
+      );
       interruptedWork = interruptedWork.return;
     }
   }
@@ -1829,7 +1834,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       // 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(completedWork, subtreeRenderLanes);
+      const next = unwindWork(current, completedWork, subtreeRenderLanes);
 
       // Because this fiber did not complete, don't reset its lanes.
 
@@ -2814,7 +2819,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
       // same fiber again.
 
       // Unwind the failed stack frame
-      unwindInterruptedWork(unitOfWork, workInProgressRootRenderLanes);
+      unwindInterruptedWork(current, unitOfWork, workInProgressRootRenderLanes);
 
       // Restore the original properties of the fiber.
       assignFiberPropertiesInDEV(unitOfWork, originalWorkInProgressCopy);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index ec9e54c1cab1..b823ed913313 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1405,7 +1405,12 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (workInProgress !== null) {
     let interruptedWork = workInProgress.return;
     while (interruptedWork !== null) {
-      unwindInterruptedWork(interruptedWork, workInProgressRootRenderLanes);
+      const current = interruptedWork.alternate;
+      unwindInterruptedWork(
+        current,
+        interruptedWork,
+        workInProgressRootRenderLanes,
+      );
       interruptedWork = interruptedWork.return;
     }
   }
@@ -1829,7 +1834,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       // 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(completedWork, subtreeRenderLanes);
+      const next = unwindWork(current, completedWork, subtreeRenderLanes);
 
       // Because this fiber did not complete, don't reset its lanes.
 
@@ -2814,7 +2819,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
       // same fiber again.
 
       // Unwind the failed stack frame
-      unwindInterruptedWork(unitOfWork, workInProgressRootRenderLanes);
+      unwindInterruptedWork(current, unitOfWork, workInProgressRootRenderLanes);
 
       // Restore the original properties of the fiber.
       assignFiberPropertiesInDEV(unitOfWork, originalWorkInProgressCopy);

From 4de99b3ca689e8f995f90f199cd8d7bfb4b35eca Mon Sep 17 00:00:00 2001
From: OGURA Daiki <8hachibee125@gmail.com>
Date: Mon, 21 Feb 2022 15:07:41 +0900
Subject: [PATCH 1152/1603] fix getSnapshot warning when a selector returns NaN
 (#23333)

* fix getSnapshot warning when a selector returns NaN

useSyncExternalStoreWithSelector delegate a selector as
getSnapshot of useSyncExternalStore.

* Fiber's use sync external store has a same issue

* Small nits

We use Object.is to check whether the snapshot value has been updated,
so we should also use it to check whether the value is cached.

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 .../src/ReactFiberHooks.new.js                |  6 +++--
 .../src/ReactFiberHooks.old.js                |  6 +++--
 .../useSyncExternalStoreShared-test.js        | 27 +++++++++++++++++++
 .../src/useSyncExternalStoreShimClient.js     |  3 ++-
 4 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 6abe576b58fa..9e4f954b1e88 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1290,7 +1290,8 @@ function mountSyncExternalStore<T>(
     nextSnapshot = getSnapshot();
     if (__DEV__) {
       if (!didWarnUncachedGetSnapshot) {
-        if (nextSnapshot !== getSnapshot()) {
+        const cachedSnapshot = getSnapshot();
+        if (!is(nextSnapshot, cachedSnapshot)) {
           console.error(
             'The result of getSnapshot should be cached to avoid an infinite loop',
           );
@@ -1362,7 +1363,8 @@ function updateSyncExternalStore<T>(
   const nextSnapshot = getSnapshot();
   if (__DEV__) {
     if (!didWarnUncachedGetSnapshot) {
-      if (nextSnapshot !== getSnapshot()) {
+      const cachedSnapshot = getSnapshot();
+      if (!is(nextSnapshot, cachedSnapshot)) {
         console.error(
           'The result of getSnapshot should be cached to avoid an infinite loop',
         );
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index cbac3348831f..becadf35bd88 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1290,7 +1290,8 @@ function mountSyncExternalStore<T>(
     nextSnapshot = getSnapshot();
     if (__DEV__) {
       if (!didWarnUncachedGetSnapshot) {
-        if (nextSnapshot !== getSnapshot()) {
+        const cachedSnapshot = getSnapshot();
+        if (!is(nextSnapshot, cachedSnapshot)) {
           console.error(
             'The result of getSnapshot should be cached to avoid an infinite loop',
           );
@@ -1362,7 +1363,8 @@ function updateSyncExternalStore<T>(
   const nextSnapshot = getSnapshot();
   if (__DEV__) {
     if (!didWarnUncachedGetSnapshot) {
-      if (nextSnapshot !== getSnapshot()) {
+      const cachedSnapshot = getSnapshot();
+      if (!is(nextSnapshot, cachedSnapshot)) {
         console.error(
           'The result of getSnapshot should be cached to avoid an infinite loop',
         );
diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index cb3a40aa13ab..2a628990049b 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -587,6 +587,33 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
     );
   });
 
+  test('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 <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(<App />));
+    expect(container.textContent).toEqual('NaN');
+
+    // Update to real number
+    await act(() => store.set(123));
+    expect(container.textContent).toEqual('123');
+
+    // Update back to NaN
+    await act(() => store.set('not a number'));
+    expect(container.textContent).toEqual('NaN');
+  });
+
   describe('extra features implemented in user-space', () => {
     // The selector implementation uses the lazy ref initialization pattern
     // @gate !(enableUseRefAccessWarning && __DEV__)
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
index 8578b3d3fd1c..4eb764091ae0 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
@@ -57,7 +57,8 @@ export function useSyncExternalStore<T>(
   const value = getSnapshot();
   if (__DEV__) {
     if (!didWarnUncachedGetSnapshot) {
-      if (value !== getSnapshot()) {
+      const cachedValue = getSnapshot();
+      if (!is(value, cachedValue)) {
         console.error(
           'The result of getSnapshot should be cached to avoid an infinite loop',
         );

From 552c067bb18062f6a1bba2fc848033abd2ea8090 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 22 Feb 2022 20:03:51 -0500
Subject: [PATCH 1153/1603] Remove public export for unstable-shared-subset.js
 (#23261)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The unstable-shared-subset.js file is not a public module — it's a
private module that the "react" package maps to when it's accessed from
the "react-server" package.

We originally added it because it was required to make our Rollup
configuration work, because at the time only "public" modules could act
as the entry point for a build artifact — that's why it's prefixed with
"unstable". We've since updated our Rollup config to support private
entry points, so we can remove the extra indirection.
---
 packages/react/npm/react.shared-subset.js                  | 7 +++++++
 packages/react/npm/unstable-shared-subset.js               | 7 -------
 packages/react/package.json                                | 7 +++----
 .../ReactSharedSubset.experimental.js}                     | 2 +-
 .../ReactSharedSubset.js}                                  | 0
 scripts/rollup/bundles.js                                  | 3 ++-
 scripts/rollup/forks.js                                    | 4 ++--
 7 files changed, 15 insertions(+), 15 deletions(-)
 create mode 100644 packages/react/npm/react.shared-subset.js
 delete mode 100644 packages/react/npm/unstable-shared-subset.js
 rename packages/react/{unstable-shared-subset.experimental.js => src/ReactSharedSubset.experimental.js} (97%)
 rename packages/react/{unstable-shared-subset.js => src/ReactSharedSubset.js} (100%)

diff --git a/packages/react/npm/react.shared-subset.js b/packages/react/npm/react.shared-subset.js
new file mode 100644
index 000000000000..694e966729ff
--- /dev/null
+++ b/packages/react/npm/react.shared-subset.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react.shared-subset.production.min.js');
+} else {
+  module.exports = require('./cjs/react.shared-subset.development.js');
+}
diff --git a/packages/react/npm/unstable-shared-subset.js b/packages/react/npm/unstable-shared-subset.js
deleted file mode 100644
index e56831a36a54..000000000000
--- a/packages/react/npm/unstable-shared-subset.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/react-unstable-shared-subset.production.min.js');
-} else {
-  module.exports = require('./cjs/react-unstable-shared-subset.development.js');
-}
diff --git a/packages/react/package.json b/packages/react/package.json
index d83fd9375908..94703e200510 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -16,19 +16,18 @@
     "umd/",
     "jsx-runtime.js",
     "jsx-dev-runtime.js",
-    "unstable-shared-subset.js"
+    "react.shared-subset.js"
   ],
   "main": "index.js",
   "exports": {
     ".": {
-      "react-server": "./unstable-shared-subset.js",
+      "react-server": "./react.shared-subset.js",
       "default": "./index.js"
     },
     "./package.json": "./package.json",
     "./jsx-runtime": "./jsx-runtime.js",
     "./jsx-dev-runtime": "./jsx-dev-runtime.js",
-    "./unstable-shared-subset": "./unstable-shared-subset.js"
-
+    "./src/*": "./src/*"
   },
   "repository": {
     "type": "git",
diff --git a/packages/react/unstable-shared-subset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js
similarity index 97%
rename from packages/react/unstable-shared-subset.experimental.js
rename to packages/react/src/ReactSharedSubset.experimental.js
index a24e302e49c4..932aa1da6d0c 100644
--- a/packages/react/unstable-shared-subset.experimental.js
+++ b/packages/react/src/ReactSharedSubset.experimental.js
@@ -37,4 +37,4 @@ export {
   useMutableSource as unstable_useMutableSource,
   useTransition,
   version,
-} from './src/React';
+} from './React';
diff --git a/packages/react/unstable-shared-subset.js b/packages/react/src/ReactSharedSubset.js
similarity index 100%
rename from packages/react/unstable-shared-subset.js
rename to packages/react/src/ReactSharedSubset.js
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 91c401107598..f638ec5e5995 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -88,7 +88,8 @@ const bundles = [
   {
     bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
-    entry: 'react/unstable-shared-subset',
+    entry: 'react/src/ReactSharedSubset.js',
+    name: 'react.shared-subset',
     global: 'React',
     minifyWithProdErrorCodes: true,
     wrapWithModuleBoundaries: false,
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index d4a392770bbf..eba8f0d684b6 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -55,7 +55,7 @@ const forks = Object.freeze({
       // happens. Other bundles just require('object-assign') anyway.
       return null;
     }
-    if (entry === 'react' || entry === 'react/unstable-shared-subset') {
+    if (entry === 'react' || entry === 'react/src/ReactSharedSubset.js') {
       // Use the forked version that uses ES modules instead of CommonJS.
       return './packages/shared/forks/object-assign.inline-umd.js';
     }
@@ -82,7 +82,7 @@ const forks = Object.freeze({
     entry,
     dependencies
   ) => {
-    if (entry === 'react' || entry === 'react/unstable-shared-subset') {
+    if (entry === 'react' || entry === 'react/src/ReactSharedSubset.js') {
       return './packages/react/src/ReactSharedInternals.js';
     }
     if (!entry.startsWith('react/') && dependencies.indexOf('react') === -1) {

From 1760b27c02b632594048183a93afc7881203a230 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 22 Feb 2022 20:13:33 -0500
Subject: [PATCH 1154/1603] Remove ./src/* export from public build (#23262)

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.
---
 scripts/rollup/packaging.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index 87675ae9f73c..592314c39424 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -152,6 +152,7 @@ function filterOutEntrypoints(name) {
   let jsonPath = `build/node_modules/${name}/package.json`;
   let packageJSON = JSON.parse(readFileSync(jsonPath));
   let files = packageJSON.files;
+  let exportsJSON = packageJSON.exports;
   if (!Array.isArray(files)) {
     throw new Error('expected all package.json files to contain a files field');
   }
@@ -181,7 +182,6 @@ function filterOutEntrypoints(name) {
       unlinkSync(`build/node_modules/${name}/${filename}`);
       changed = true;
       // Remove it from the exports field too if it exists.
-      const exportsJSON = packageJSON.exports;
       if (exportsJSON) {
         if (filename === 'index.js') {
           delete exportsJSON['.'];
@@ -190,6 +190,15 @@ function filterOutEntrypoints(name) {
         }
       }
     }
+
+    // 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, '  ');

From 2c693b2dee6e0a644e9e952b5c2b64a1b21c8e55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 23 Feb 2022 00:33:41 -0500
Subject: [PATCH 1155/1603] Re-add reentrancy avoidance (#23342)

* tests: add failing test to demonstrate bug in ReadableStream implementation

* Re-add reentrancy avoidance

I removed the equivalency of this in #22446. However, I didn't fully
understand the intended semantics of the spec but I understand this better
now.

The spec is not actually recursive. It won't call pull again inside of a
pull. It might not call it inside startWork neither which the original
issue avoided. However, it will call pull if you enqueue to the controller
without filling up the desired size outside any call.

We could avoid that by returning a Promise from pull that we wait to
resolve until we've performed all our pending tasks. That would be the
more idiomatic solution. That's a bit more involved but since we know
understand it, we can readd the reentrancy hack since we have an easy place
to detect it. If anything, it should probably throw or log here otherwise.

I believe this fixes #22772.

This includes the test from #22889 but should ideally have one for Fizz.

Co-authored-by: Josh Larson <josh.larson@shopify.com>
---
 .../__tests__/ReactFlightDOMBrowser-test.js   | 173 +++++++++++++++---
 packages/react-server/src/ReactFizzServer.js  |   4 +
 .../react-server/src/ReactFlightServer.js     |   4 +
 3 files changed, 151 insertions(+), 30 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 8b82caac6bc7..09ea1515c999 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -69,6 +69,31 @@ describe('ReactFlightDOMBrowser', () => {
     }
   }
 
+  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];
+  }
+
   it('should resolve HTML using W3C streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -174,36 +199,11 @@ describe('ReactFlightDOMBrowser', () => {
       return children;
     }
 
-    function makeDelayedText() {
-      let error, _resolve, _reject;
-      let promise = new Promise((resolve, reject) => {
-        _resolve = () => {
-          promise = null;
-          resolve();
-        };
-        _reject = e => {
-          error = e;
-          promise = null;
-          reject(e);
-        };
-      });
-      function DelayedText({children}, data) {
-        if (promise) {
-          throw promise;
-        }
-        if (error) {
-          throw error;
-        }
-        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();
+    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}) {
@@ -340,4 +340,117 @@ describe('ReactFlightDOMBrowser', () => {
 
     expect(reportedErrors).toEqual([]);
   });
+
+  it('should close the stream upon completion when rendering to W3C streams', async () => {
+    const {Suspense} = React;
+
+    // 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 = ReactServerDOMWriter.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 act(async () => {});
+
+    expect(flightResponse).toContain('(loading everything)');
+    expect(flightResponse).toContain('(loading sidebar)');
+    expect(flightResponse).toContain('(loading posts)');
+    expect(flightResponse).not.toContain(':friends:');
+    expect(flightResponse).not.toContain(':name:');
+
+    await act(async () => {
+      resolveFriends();
+    });
+
+    expect(flightResponse).toContain(':friends:');
+
+    await act(async () => {
+      resolveName();
+    });
+
+    expect(flightResponse).toContain(':name:');
+
+    await act(async () => {
+      resolvePhotos();
+    });
+
+    expect(flightResponse).toContain(':photos:');
+
+    await act(async () => {
+      resolvePosts();
+    });
+
+    expect(flightResponse).toContain(':posts:');
+
+    // Final pending chunk is written; stream should be closed.
+    expect(isDone).toBeTruthy();
+  });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index e46aee9a45cd..39fcdf316820 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1950,6 +1950,10 @@ export function startFlowing(request: Request, destination: Destination): void {
   if (request.status === CLOSED) {
     return;
   }
+  if (request.destination !== null) {
+    // We're already flowing.
+    return;
+  }
   request.destination = destination;
   try {
     flushCompletedQueues(request, destination);
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 052fa730fd91..5ad7ed2ea041 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -790,6 +790,10 @@ export function startFlowing(request: Request, destination: Destination): void {
   if (request.status === CLOSED) {
     return;
   }
+  if (request.destination !== null) {
+    // We're already flowing.
+    return;
+  }
   request.destination = destination;
   try {
     flushCompletedChunks(request, destination);

From 40351575d3cfaef62426c889a90431c01fdeff0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 23 Feb 2022 11:35:21 -0500
Subject: [PATCH 1156/1603] Split writeChunk into void and return value
 (#23343)

This function was modeled after Node streams where write returns a boolean
whether to keep writing or not. I think we should probably switch this
up and read desired size explicitly in appropriate places.

However, in the meantime, we don't have to return a value where we're
not going to use it. So I split this so that we call writeChunkAndReturn
if we're going to return the boolean.

This should help with the compilation so that they can be inlined.
---
 .../ReactDOMLegacyServerStreamConfig.js       |  7 +++
 .../src/server/ReactDOMServerFormatConfig.js  | 60 ++++++++++---------
 .../server/ReactNativeServerFormatConfig.js   | 23 +++----
 .../src/ReactNoopFlightServer.js              |  4 ++
 .../src/ReactNoopServer.js                    | 36 ++++++-----
 .../ReactFlightDOMRelayServerHostConfig.js    |  9 ++-
 .../src/ReactServerStreamConfigFB.js          |  7 +++
 .../ReactFlightNativeRelayServerHostConfig.js |  9 ++-
 packages/react-server/src/ReactFizzServer.js  |  8 ++-
 .../react-server/src/ReactFlightServer.js     | 11 ++--
 .../src/ReactFlightServerConfigStream.js      |  1 +
 .../src/ReactServerStreamConfigBrowser.js     |  7 +++
 .../src/ReactServerStreamConfigNode.js        |  8 +++
 .../forks/ReactServerStreamConfig.custom.js   |  1 +
 14 files changed, 130 insertions(+), 61 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js b/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
index 4cfe16091bc5..55418357f447 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
@@ -28,6 +28,13 @@ let prevWasCommentSegmenter = false;
 export function writeChunk(
   destination: Destination,
   chunk: Chunk | PrecomputedChunk,
+): void {
+  writeChunkAndReturn(destination, chunk);
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk,
 ): boolean {
   if (prevWasCommentSegmenter) {
     prevWasCommentSegmenter = false;
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 5ea8d772732b..20887c226015 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -30,6 +30,7 @@ import type {
 
 import {
   writeChunk,
+  writeChunkAndReturn,
   stringToChunk,
   stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
@@ -1427,11 +1428,14 @@ export function writeCompletedRoot(
   responseState: ResponseState,
 ): boolean {
   const bootstrapChunks = responseState.bootstrapChunks;
-  let result = true;
-  for (let i = 0; i < bootstrapChunks.length; i++) {
-    result = writeChunk(destination, bootstrapChunks[i]);
+  let i = 0;
+  for (; i < bootstrapChunks.length - 1; i++) {
+    writeChunk(destination, bootstrapChunks[i]);
   }
-  return result;
+  if (i < bootstrapChunks.length) {
+    return writeChunkAndReturn(destination, bootstrapChunks[i]);
+  }
+  return true;
 }
 
 // Structural Nodes
@@ -1450,7 +1454,7 @@ export function writePlaceholder(
   writeChunk(destination, responseState.placeholderPrefix);
   const formattedID = stringToChunk(id.toString(16));
   writeChunk(destination, formattedID);
-  return writeChunk(destination, placeholder2);
+  return writeChunkAndReturn(destination, placeholder2);
 }
 
 // Suspense boundaries are encoded as comments.
@@ -1480,7 +1484,7 @@ export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, startCompletedSuspenseBoundary);
+  return writeChunkAndReturn(destination, startCompletedSuspenseBoundary);
 }
 export function writeStartPendingSuspenseBoundary(
   destination: Destination,
@@ -1496,31 +1500,31 @@ export function writeStartPendingSuspenseBoundary(
   }
 
   writeChunk(destination, id);
-  return writeChunk(destination, startPendingSuspenseBoundary2);
+  return writeChunkAndReturn(destination, startPendingSuspenseBoundary2);
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, startClientRenderedSuspenseBoundary);
+  return writeChunkAndReturn(destination, startClientRenderedSuspenseBoundary);
 }
 export function writeEndCompletedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, endSuspenseBoundary);
+  return writeChunkAndReturn(destination, endSuspenseBoundary);
 }
 export function writeEndPendingSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, endSuspenseBoundary);
+  return writeChunkAndReturn(destination, endSuspenseBoundary);
 }
 export function writeEndClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, endSuspenseBoundary);
+  return writeChunkAndReturn(destination, endSuspenseBoundary);
 }
 
 const startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
@@ -1571,25 +1575,25 @@ export function writeStartSegment(
       writeChunk(destination, startSegmentHTML);
       writeChunk(destination, responseState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
-      return writeChunk(destination, startSegmentHTML2);
+      return writeChunkAndReturn(destination, startSegmentHTML2);
     }
     case SVG_MODE: {
       writeChunk(destination, startSegmentSVG);
       writeChunk(destination, responseState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
-      return writeChunk(destination, startSegmentSVG2);
+      return writeChunkAndReturn(destination, startSegmentSVG2);
     }
     case MATHML_MODE: {
       writeChunk(destination, startSegmentMathML);
       writeChunk(destination, responseState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
-      return writeChunk(destination, startSegmentMathML2);
+      return writeChunkAndReturn(destination, startSegmentMathML2);
     }
     case HTML_TABLE_MODE: {
       writeChunk(destination, startSegmentTable);
       writeChunk(destination, responseState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
-      return writeChunk(destination, startSegmentTable2);
+      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
@@ -1599,19 +1603,19 @@ export function writeStartSegment(
       writeChunk(destination, startSegmentTableBody);
       writeChunk(destination, responseState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
-      return writeChunk(destination, startSegmentTableBody2);
+      return writeChunkAndReturn(destination, startSegmentTableBody2);
     }
     case HTML_TABLE_ROW_MODE: {
       writeChunk(destination, startSegmentTableRow);
       writeChunk(destination, responseState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
-      return writeChunk(destination, startSegmentTableRow2);
+      return writeChunkAndReturn(destination, startSegmentTableRow2);
     }
     case HTML_COLGROUP_MODE: {
       writeChunk(destination, startSegmentColGroup);
       writeChunk(destination, responseState.segmentPrefix);
       writeChunk(destination, stringToChunk(id.toString(16)));
-      return writeChunk(destination, startSegmentColGroup2);
+      return writeChunkAndReturn(destination, startSegmentColGroup2);
     }
     default: {
       throw new Error('Unknown insertion mode. This is a bug in React.');
@@ -1625,25 +1629,25 @@ export function writeEndSegment(
   switch (formatContext.insertionMode) {
     case ROOT_HTML_MODE:
     case HTML_MODE: {
-      return writeChunk(destination, endSegmentHTML);
+      return writeChunkAndReturn(destination, endSegmentHTML);
     }
     case SVG_MODE: {
-      return writeChunk(destination, endSegmentSVG);
+      return writeChunkAndReturn(destination, endSegmentSVG);
     }
     case MATHML_MODE: {
-      return writeChunk(destination, endSegmentMathML);
+      return writeChunkAndReturn(destination, endSegmentMathML);
     }
     case HTML_TABLE_MODE: {
-      return writeChunk(destination, endSegmentTable);
+      return writeChunkAndReturn(destination, endSegmentTable);
     }
     case HTML_TABLE_BODY_MODE: {
-      return writeChunk(destination, endSegmentTableBody);
+      return writeChunkAndReturn(destination, endSegmentTableBody);
     }
     case HTML_TABLE_ROW_MODE: {
-      return writeChunk(destination, endSegmentTableRow);
+      return writeChunkAndReturn(destination, endSegmentTableRow);
     }
     case HTML_COLGROUP_MODE: {
-      return writeChunk(destination, endSegmentColGroup);
+      return writeChunkAndReturn(destination, endSegmentColGroup);
     }
     default: {
       throw new Error('Unknown insertion mode. This is a bug in React.');
@@ -1790,7 +1794,7 @@ export function writeCompletedSegmentInstruction(
   writeChunk(destination, completeSegmentScript2);
   writeChunk(destination, responseState.placeholderPrefix);
   writeChunk(destination, formattedID);
-  return writeChunk(destination, completeSegmentScript3);
+  return writeChunkAndReturn(destination, completeSegmentScript3);
 }
 
 const completeBoundaryScript1Full = stringToPrecomputedChunk(
@@ -1827,7 +1831,7 @@ export function writeCompletedBoundaryInstruction(
   writeChunk(destination, completeBoundaryScript2);
   writeChunk(destination, responseState.segmentPrefix);
   writeChunk(destination, formattedContentID);
-  return writeChunk(destination, completeBoundaryScript3);
+  return writeChunkAndReturn(destination, completeBoundaryScript3);
 }
 
 const clientRenderScript1Full = stringToPrecomputedChunk(
@@ -1858,5 +1862,5 @@ export function writeClientRenderBoundaryInstruction(
   }
 
   writeChunk(destination, boundaryID);
-  return writeChunk(destination, clientRenderScript2);
+  return writeChunkAndReturn(destination, clientRenderScript2);
 }
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 20084731b533..e2b555720163 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -17,6 +17,7 @@ import type {
 
 import {
   writeChunk,
+  writeChunkAndReturn,
   stringToChunk,
   stringToPrecomputedChunk,
 } from 'react-server/src/ReactServerStreamConfig';
@@ -185,7 +186,7 @@ export function writePlaceholder(
   id: number,
 ): boolean {
   writeChunk(destination, PLACEHOLDER);
-  return writeChunk(destination, formatID(id));
+  return writeChunkAndReturn(destination, formatID(id));
 }
 
 // Suspense boundaries are encoded as comments.
@@ -193,7 +194,7 @@ export function writeStartCompletedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, SUSPENSE_COMPLETE);
+  return writeChunkAndReturn(destination, SUSPENSE_COMPLETE);
 }
 
 export function pushStartCompletedSuspenseBoundary(
@@ -208,19 +209,19 @@ export function writeStartPendingSuspenseBoundary(
   id: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, SUSPENSE_PENDING);
-  return writeChunk(destination, formatID(id));
+  return writeChunkAndReturn(destination, formatID(id));
 }
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, SUSPENSE_CLIENT_RENDER);
+  return writeChunkAndReturn(destination, SUSPENSE_CLIENT_RENDER);
 }
 export function writeEndCompletedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, END);
+  return writeChunkAndReturn(destination, END);
 }
 export function pushEndCompletedSuspenseBoundary(
   target: Array<Chunk | PrecomputedChunk>,
@@ -231,13 +232,13 @@ export function writeEndPendingSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, END);
+  return writeChunkAndReturn(destination, END);
 }
 export function writeEndClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
 ): boolean {
-  return writeChunk(destination, END);
+  return writeChunkAndReturn(destination, END);
 }
 
 export function writeStartSegment(
@@ -247,13 +248,13 @@ export function writeStartSegment(
   id: number,
 ): boolean {
   writeChunk(destination, SEGMENT);
-  return writeChunk(destination, formatID(id));
+  return writeChunkAndReturn(destination, formatID(id));
 }
 export function writeEndSegment(
   destination: Destination,
   formatContext: FormatContext,
 ): boolean {
-  return writeChunk(destination, END);
+  return writeChunkAndReturn(destination, END);
 }
 
 // Instruction Set
@@ -276,7 +277,7 @@ export function writeCompletedBoundaryInstruction(
 ): boolean {
   writeChunk(destination, SUSPENSE_UPDATE_TO_COMPLETE);
   writeChunk(destination, formatID(boundaryID));
-  return writeChunk(destination, formatID(contentSegmentID));
+  return writeChunkAndReturn(destination, formatID(contentSegmentID));
 }
 
 export function writeClientRenderBoundaryInstruction(
@@ -285,5 +286,5 @@ export function writeClientRenderBoundaryInstruction(
   boundaryID: SuspenseBoundaryID,
 ): boolean {
   writeChunk(destination, SUSPENSE_UPDATE_TO_CLIENT_RENDER);
-  return writeChunk(destination, formatID(boundaryID));
+  return writeChunkAndReturn(destination, formatID(boundaryID));
 }
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index f6d64c003f9e..ca6fedf2ec63 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -30,6 +30,10 @@ const ReactNoopFlightServer = ReactFlightServer({
   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 {},
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index d217b16e50bf..94815d57f9a8 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -53,26 +53,34 @@ type Destination = {
 
 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({
   scheduleWork(callback: () => void) {
     callback();
   },
   beginWriting(destination: Destination): void {},
   writeChunk(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);
+    write(destination, buffer);
+  },
+  writeChunkAndReturn(destination: Destination, buffer: Uint8Array): boolean {
+    write(destination, buffer);
+    return true;
   },
   completeWriting(destination: Destination): void {},
   close(destination: Destination): void {},
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 85eace536ac4..971eca0908cb 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -141,7 +141,14 @@ export function flushBuffered(destination: Destination) {}
 
 export function beginWriting(destination: Destination) {}
 
-export function writeChunk(destination: Destination, chunk: Chunk): boolean {
+export function writeChunk(destination: Destination, chunk: Chunk): void {
+  emitRow(destination, chunk);
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: Chunk,
+): boolean {
   emitRow(destination, chunk);
   return true;
 }
diff --git a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
index e0477fd6197e..d0de924db7ce 100644
--- a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
+++ b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
@@ -28,6 +28,13 @@ export function beginWriting(destination: Destination) {}
 export function writeChunk(
   destination: Destination,
   chunk: Chunk | PrecomputedChunk,
+): void {
+  destination.buffer += chunk;
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk,
 ): boolean {
   destination.buffer += chunk;
   return true;
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 0624e693cfe1..0387d94ecad2 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -138,7 +138,14 @@ export function flushBuffered(destination: Destination) {}
 
 export function beginWriting(destination: Destination) {}
 
-export function writeChunk(destination: Destination, chunk: Chunk): boolean {
+export function writeChunk(destination: Destination, chunk: Chunk): void {
+  emitRow(destination, chunk);
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: Chunk,
+): boolean {
   emitRow(destination, chunk);
   return true;
 }
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 39fcdf316820..bdf9b16a2458 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -31,6 +31,7 @@ import {
   scheduleWork,
   beginWriting,
   writeChunk,
+  writeChunkAndReturn,
   completeWriting,
   flushBuffered,
   close,
@@ -1615,8 +1616,11 @@ function flushSubtree(
         r = flushSegment(request, destination, nextChild);
       }
       // Finally just write all the remaining chunks
-      for (; chunkIdx < chunks.length; chunkIdx++) {
-        r = writeChunk(destination, chunks[chunkIdx]);
+      for (; chunkIdx < chunks.length - 1; chunkIdx++) {
+        writeChunk(destination, chunks[chunkIdx]);
+      }
+      if (chunkIdx < chunks.length) {
+        r = writeChunkAndReturn(destination, chunks[chunkIdx]);
       }
       return r;
     }
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 5ad7ed2ea041..2b0e7304af17 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -20,7 +20,7 @@ import type {
 import {
   scheduleWork,
   beginWriting,
-  writeChunk,
+  writeChunkAndReturn,
   completeWriting,
   flushBuffered,
   close,
@@ -732,7 +732,8 @@ function flushCompletedChunks(
     for (; i < moduleChunks.length; i++) {
       request.pendingChunks--;
       const chunk = moduleChunks[i];
-      if (!writeChunk(destination, chunk)) {
+      const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+      if (!keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -745,7 +746,8 @@ function flushCompletedChunks(
     for (; i < jsonChunks.length; i++) {
       request.pendingChunks--;
       const chunk = jsonChunks[i];
-      if (!writeChunk(destination, chunk)) {
+      const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+      if (!keepWriting) {
         request.destination = null;
         i++;
         break;
@@ -760,7 +762,8 @@ function flushCompletedChunks(
     for (; i < errorChunks.length; i++) {
       request.pendingChunks--;
       const chunk = errorChunks[i];
-      if (!writeChunk(destination, chunk)) {
+      const keepWriting: boolean = writeChunkAndReturn(destination, chunk);
+      if (!keepWriting) {
         request.destination = null;
         i++;
         break;
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index 4ff841bfc11b..74a90f7a02a7 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -124,6 +124,7 @@ export {
   flushBuffered,
   beginWriting,
   writeChunk,
+  writeChunkAndReturn,
   completeWriting,
   close,
   closeWithError,
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index 3714be430276..1655fc69da31 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -26,6 +26,13 @@ export function beginWriting(destination: Destination) {}
 export function writeChunk(
   destination: Destination,
   chunk: PrecomputedChunk | Chunk,
+): void {
+  destination.enqueue(chunk);
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: PrecomputedChunk | Chunk,
 ): boolean {
   destination.enqueue(chunk);
   return destination.desiredSize > 0;
diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index 348deb760503..4ab3d3cb6f2f 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -43,6 +43,14 @@ export function beginWriting(destination: Destination) {
 export function writeChunk(
   destination: Destination,
   chunk: Chunk | PrecomputedChunk,
+): void {
+  const nodeBuffer = ((chunk: any): Buffer | string); // close enough
+  destination.write(nodeBuffer);
+}
+
+export function writeChunkAndReturn(
+  destination: Destination,
+  chunk: Chunk | PrecomputedChunk,
 ): boolean {
   const nodeBuffer = ((chunk: any): Buffer | string); // close enough
   return destination.write(nodeBuffer);
diff --git a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
index e832f19430a2..21ad11266bff 100644
--- a/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerStreamConfig.custom.js
@@ -32,6 +32,7 @@ export opaque type Chunk = mixed; // eslint-disable-line no-undef
 export const scheduleWork = $$$hostConfig.scheduleWork;
 export const beginWriting = $$$hostConfig.beginWriting;
 export const writeChunk = $$$hostConfig.writeChunk;
+export const writeChunkAndReturn = $$$hostConfig.writeChunkAndReturn;
 export const completeWriting = $$$hostConfig.completeWriting;
 export const flushBuffered = $$$hostConfig.flushBuffered;
 export const close = $$$hostConfig.close;

From 587e759302ef1cc02954831ccc72f7f668e32426 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 23 Feb 2022 18:08:30 -0500
Subject: [PATCH 1157/1603] Remove Numeric Fallback of Symbols (#23348)

This was already defeating the XSS issue that Symbols was meant to protect
against. So you were already supposed to use a polyfill for security.

We rely on real Symbol.for in Flight for Server Components so those require
real symbols anyway.

We also don't really support IE without additional polyfills anyway.
---
 .../react/src/__tests__/ReactElement-test.js  | 68 ---------------
 .../src/__tests__/ReactElementJSX-test.js     | 82 ++-----------------
 packages/shared/ReactSymbols.js               | 65 +++++----------
 .../__tests__/ReactSymbols-test.internal.js   | 15 ----
 packages/shared/isValidElementType.js         |  5 +-
 5 files changed, 32 insertions(+), 203 deletions(-)

diff --git a/packages/react/src/__tests__/ReactElement-test.js b/packages/react/src/__tests__/ReactElement-test.js
index fbe500a009b7..cc14e172ef6e 100644
--- a/packages/react/src/__tests__/ReactElement-test.js
+++ b/packages/react/src/__tests__/ReactElement-test.js
@@ -15,16 +15,10 @@ let ReactTestUtils;
 
 describe('ReactElement', () => {
   let ComponentClass;
-  let originalSymbol;
 
   beforeEach(() => {
     jest.resetModules();
 
-    // Delete the native Symbol if we have one to ensure we test the
-    // unpolyfilled environment.
-    originalSymbol = global.Symbol;
-    global.Symbol = undefined;
-
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('react-dom/test-utils');
@@ -37,14 +31,6 @@ describe('ReactElement', () => {
     };
   });
 
-  afterEach(() => {
-    global.Symbol = originalSymbol;
-  });
-
-  it('uses the fallback value when in an environment without Symbol', () => {
-    expect((<div />).$$typeof).toBe(0xeac7);
-  });
-
   it('returns a complete element according to spec', () => {
     const element = React.createElement(ComponentClass);
     expect(element.type).toBe(ComponentClass);
@@ -294,41 +280,6 @@ describe('ReactElement', () => {
     expect(element.type.someStaticMethod()).toBe('someReturnValue');
   });
 
-  // NOTE: We're explicitly not using JSX here. This is intended to test
-  // classic JS without JSX.
-  it('identifies valid elements', () => {
-    class Component extends React.Component {
-      render() {
-        return React.createElement('div');
-      }
-    }
-
-    expect(React.isValidElement(React.createElement('div'))).toEqual(true);
-    expect(React.isValidElement(React.createElement(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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(React.createElement('div'));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
-  });
-
   // NOTE: We're explicitly not using JSX here. This is intended to test
   // classic JS without JSX.
   it('is indistinguishable from a plain object', () => {
@@ -447,25 +398,6 @@ describe('ReactElement', () => {
   // NOTE: We're explicitly not using JSX here. This is intended to test
   // classic JS without JSX.
   it('identifies elements, but not JSON, if Symbols are supported', () => {
-    // Rudimentary polyfill
-    // Once all jest engines support Symbols natively we can swap this to test
-    // WITH native Symbols by default.
-    const REACT_ELEMENT_TYPE = function() {}; // fake Symbol
-    const OTHER_SYMBOL = function() {}; // another fake Symbol
-    global.Symbol = function(name) {
-      return OTHER_SYMBOL;
-    };
-    global.Symbol.for = function(key) {
-      if (key === 'react.element') {
-        return REACT_ELEMENT_TYPE;
-      }
-      return OTHER_SYMBOL;
-    };
-
-    jest.resetModules();
-
-    React = require('react');
-
     class Component extends React.Component {
       render() {
         return React.createElement('div');
diff --git a/packages/react/src/__tests__/ReactElementJSX-test.js b/packages/react/src/__tests__/ReactElementJSX-test.js
index 5932209d0c57..58ab4f69f5b9 100644
--- a/packages/react/src/__tests__/ReactElementJSX-test.js
+++ b/packages/react/src/__tests__/ReactElementJSX-test.js
@@ -20,16 +20,9 @@ let JSXDEVRuntime;
 // A lot of these tests are pulled from ReactElement-test because
 // this api is meant to be backwards compatible.
 describe('ReactElement.jsx', () => {
-  let originalSymbol;
-
   beforeEach(() => {
     jest.resetModules();
 
-    // Delete the native Symbol if we have one to ensure we test the
-    // unpolyfilled environment.
-    originalSymbol = global.Symbol;
-    global.Symbol = undefined;
-
     React = require('react');
     JSXRuntime = require('react/jsx-runtime');
     JSXDEVRuntime = require('react/jsx-dev-runtime');
@@ -37,10 +30,6 @@ describe('ReactElement.jsx', () => {
     ReactTestUtils = require('react-dom/test-utils');
   });
 
-  afterEach(() => {
-    global.Symbol = originalSymbol;
-  });
-
   it('allows static methods to be called using the type property', () => {
     class StaticMethodComponentClass extends React.Component {
       render() {
@@ -53,47 +42,6 @@ describe('ReactElement.jsx', () => {
     expect(element.type.someStaticMethod()).toBe('someReturnValue');
   });
 
-  it('identifies valid elements', () => {
-    class Component extends React.Component {
-      render() {
-        return JSXRuntime.jsx('div', {});
-      }
-    }
-
-    expect(React.isValidElement(JSXRuntime.jsx('div', {}))).toEqual(true);
-    expect(React.isValidElement(JSXRuntime.jsx(Component, {}))).toEqual(true);
-    expect(
-      React.isValidElement(JSXRuntime.jsx(JSXRuntime.Fragment, {})),
-    ).toEqual(true);
-    if (__DEV__) {
-      expect(React.isValidElement(JSXDEVRuntime.jsxDEV('div', {}))).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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(JSXRuntime.jsx('div', {}));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
-  });
-
   it('is indistinguishable from a plain object', () => {
     const element = JSXRuntime.jsx('div', {className: 'foo'});
     const object = {};
@@ -288,34 +236,22 @@ describe('ReactElement.jsx', () => {
   });
 
   it('identifies elements, but not JSON, if Symbols are supported', () => {
-    // Rudimentary polyfill
-    // Once all jest engines support Symbols natively we can swap this to test
-    // WITH native Symbols by default.
-    const REACT_ELEMENT_TYPE = function() {}; // fake Symbol
-    const OTHER_SYMBOL = function() {}; // another fake Symbol
-    global.Symbol = function(name) {
-      return OTHER_SYMBOL;
-    };
-    global.Symbol.for = function(key) {
-      if (key === 'react.element') {
-        return REACT_ELEMENT_TYPE;
-      }
-      return OTHER_SYMBOL;
-    };
-
-    jest.resetModules();
-
-    React = require('react');
-    JSXRuntime = require('react/jsx-runtime');
-
     class Component extends React.Component {
       render() {
-        return JSXRuntime.jsx('div');
+        return JSXRuntime.jsx('div', {});
       }
     }
 
     expect(React.isValidElement(JSXRuntime.jsx('div', {}))).toEqual(true);
     expect(React.isValidElement(JSXRuntime.jsx(Component, {}))).toEqual(true);
+    expect(
+      React.isValidElement(JSXRuntime.jsx(JSXRuntime.Fragment, {})),
+    ).toEqual(true);
+    if (__DEV__) {
+      expect(React.isValidElement(JSXDEVRuntime.jsxDEV('div', {}))).toEqual(
+        true,
+      );
+    }
 
     expect(React.isValidElement(null)).toEqual(false);
     expect(React.isValidElement(true)).toEqual(false);
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 3c67aeb7b85e..299869d12e8a 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -11,50 +11,29 @@
 // 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.
-export let REACT_ELEMENT_TYPE = 0xeac7;
-export let REACT_PORTAL_TYPE = 0xeaca;
-export let REACT_FRAGMENT_TYPE = 0xeacb;
-export let REACT_STRICT_MODE_TYPE = 0xeacc;
-export let REACT_PROFILER_TYPE = 0xead2;
-export let REACT_PROVIDER_TYPE = 0xeacd;
-export let REACT_CONTEXT_TYPE = 0xeace;
-export let REACT_FORWARD_REF_TYPE = 0xead0;
-export let REACT_SUSPENSE_TYPE = 0xead1;
-export let REACT_SUSPENSE_LIST_TYPE = 0xead8;
-export let REACT_MEMO_TYPE = 0xead3;
-export let REACT_LAZY_TYPE = 0xead4;
-export let REACT_SCOPE_TYPE = 0xead7;
-export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
-export let REACT_OFFSCREEN_TYPE = 0xeae2;
-export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
-export let REACT_CACHE_TYPE = 0xeae4;
-export let REACT_TRACING_MARKER_TYPE = 0xeae5;
+// The Symbol used to tag the ReactElement-like types.
+export const REACT_ELEMENT_TYPE = Symbol.for('react.element');
+export const REACT_PORTAL_TYPE = Symbol.for('react.portal');
+export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+export const REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+export const REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+export const REACT_CONTEXT_TYPE = Symbol.for('react.context');
+export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+export const REACT_MEMO_TYPE = Symbol.for('react.memo');
+export const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+export const REACT_SCOPE_TYPE = Symbol.for('react.scope');
+export const REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for(
+  'react.debug_trace_mode',
+);
+export const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+export const REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
+export const REACT_CACHE_TYPE = Symbol.for('react.cache');
+export const REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker');
 
-if (typeof Symbol === 'function' && Symbol.for) {
-  const symbolFor = Symbol.for;
-  REACT_ELEMENT_TYPE = symbolFor('react.element');
-  REACT_PORTAL_TYPE = symbolFor('react.portal');
-  REACT_FRAGMENT_TYPE = 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_SCOPE_TYPE = symbolFor('react.scope');
-  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
-  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
-  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
-  REACT_CACHE_TYPE = symbolFor('react.cache');
-  REACT_TRACING_MARKER_TYPE = symbolFor('react.tracing_marker');
-}
-
-const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 
 export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
diff --git a/packages/shared/__tests__/ReactSymbols-test.internal.js b/packages/shared/__tests__/ReactSymbols-test.internal.js
index f62ce65b9eb5..53618ba3fe4f 100644
--- a/packages/shared/__tests__/ReactSymbols-test.internal.js
+++ b/packages/shared/__tests__/ReactSymbols-test.internal.js
@@ -26,19 +26,4 @@ describe('ReactSymbols', () => {
   it('Symbol values should be unique', () => {
     expectToBeUnique(Object.entries(require('shared/ReactSymbols')));
   });
-
-  it('numeric values should be unique', () => {
-    const originalSymbolFor = global.Symbol.for;
-    global.Symbol.for = null;
-    try {
-      const entries = Object.entries(require('shared/ReactSymbols')).filter(
-        // REACT_ASYNC_MODE_TYPE and REACT_CONCURRENT_MODE_TYPE have the same numeric value
-        // for legacy backwards compatibility
-        ([key]) => key !== 'REACT_ASYNC_MODE_TYPE',
-      );
-      expectToBeUnique(entries);
-    } finally {
-      global.Symbol.for = originalSymbolFor;
-    }
-  });
 });
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index e72b42d8794a..295a39bf4321 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -31,10 +31,7 @@ import {
   enableTransitionTracing,
 } from './ReactFeatureFlags';
 
-let REACT_MODULE_REFERENCE: number | Symbol = 0;
-if (typeof Symbol === 'function') {
-  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-}
+const REACT_MODULE_REFERENCE: Symbol = Symbol.for('react.module.reference');
 
 export default function isValidElementType(type: mixed) {
   if (typeof type === 'string' || typeof type === 'function') {

From 1f3f6db73caf72a7d2287241212b7669d0c2dd2f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 23 Feb 2022 18:11:22 -0500
Subject: [PATCH 1158/1603] Remove createMutableSource from stable exports
 (#23352)

I removed useMutableSource in a previous PR but forgot this one.

We still export it in the FB builds until we can migrate the internal
callers (Recoil).
---
 packages/react/index.stable.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index b0f6f409bb0e..53497831e004 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -21,7 +21,6 @@ export {
   createContext,
   createElement,
   createFactory,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   forwardRef,
   isValidElement,

From 990098f88aef825762f72e76ae84cfe1520222c2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 23 Feb 2022 18:49:16 -0500
Subject: [PATCH 1159/1603] Re-arrange main ReactFeatureFlags module (#23350)

@sebmarkbage and I audited the feature flags file to review the status
of each feature or experiment. Based on that, I've added some more
comments to the main ReactFeatureFlags module and rearranged them
into groups.

I haven't changed the value of any flags, yet. There are a few we're
going to land but I'll do them as separate PRs.
---
 packages/shared/ReactFeatureFlags.js | 303 ++++++++++++++++-----------
 1 file changed, 182 insertions(+), 121 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 901004a9b900..28512056bf4f 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -7,119 +7,102 @@
  * @flow strict
  */
 
-// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
-// This prevents e.g. <img src=""> from making an unnecessary HTTP request for certain browsers.
-export const enableFilterEmptyStringAttributesDOM = false;
-
-// Adds verbose console logging for e.g. state updates, suspense, and work loop stuff.
-// Intended to enable React core members to more easily debug scheduling issues in DEV builds.
-export const enableDebugTracing = false;
-
-// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
-// for an experimental timeline tool.
-export const enableSchedulingProfiler = __PROFILE__;
-
-// Helps identify side effects in render-phase lifecycle hooks and setState
-// reducers by double invoking them in StrictLegacyMode.
-export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
-
-// Helps identify code that is not safe for planned Offscreen API and Suspense semantics;
-// this feature flag only impacts StrictEffectsMode.
-export const enableStrictEffects = __DEV__;
-
-// If TRUE, trees rendered with createRoot will be StrictEffectsMode.
-// If FALSE, these trees will be StrictLegacyMode.
-export const createRootStrictEffectsByDefault = false;
-
-// To preserve the "Pause on caught exceptions" behavior of the debugger, we
-// replay the begin phase of a failed component inside invokeGuardedCallback.
-export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
-
-// Warn about deprecated, async-unsafe lifecycles; relates to RFC #6:
-export const warnAboutDeprecatedLifecycles = true;
-
-// Gather advanced timing metrics for Profiler subtrees.
-export const enableProfilerTimer = __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__;
-
-// Profiler API accepts a function to be called when a nested update is scheduled.
-// This callback accepts the component type (class instance or function) the update is scheduled for.
-export const enableProfilerNestedUpdateScheduledHook = false;
-
-// Track which Fiber(s) schedule render work.
-export const enableUpdaterTracking = __PROFILE__;
+// -----------------------------------------------------------------------------
+// Land or remove (zero effort)
+//
+// Flags that can likely be deleted or landed without consequences
+// -----------------------------------------------------------------------------
 
-// SSR experiments
+export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
-
-// Flight experiments
+export const warnAboutDeprecatedLifecycles = true;
 export const enableLazyElements = true;
-export const enableCache = __EXPERIMENTAL__;
+export const enableComponentStackLocations = true;
+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
+export const warnUnstableRenderSubtreeIntoContainer = false;
+export const enablePersistentOffscreenHostContainer = false;
 
-// Only used in www builds.
-export const enableSchedulerDebugging = false;
+// -----------------------------------------------------------------------------
+// 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.
+// -----------------------------------------------------------------------------
+
+// Destroy layout effects for components that are hidden because something
+// suspended in an update and recreate them when they are shown again (after the
+// suspended boundary has resolved). Note that this should be an uncommon use
+// case and can be avoided by using the transition API.
+//
+// TODO: Finish rolling out in www
+export const enableSuspenseLayoutEffectSemantics = true;
 
-// Disable javascript: URL strings in href for XSS protection.
-export const disableJavaScriptURLs = false;
+// TODO: Finish rolling out in www
+export const enableClientRenderFallbackOnHydrationMismatch = true;
 
-// Disable support for comment nodes as React DOM containers. Only supported
-// by www builds.
-export const disableCommentsAsDOMContainers = true;
+// TODO: Need to review this code one more time before landing
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 
-// Experimental Scope support.
-export const enableScopeAPI = false;
+// Recoil still uses useMutableSource in www, need to delete
+export const enableUseMutableSource = false;
 
-// Experimental Create Event Handle API.
-export const enableCreateEventHandleAPI = false;
+// Not sure if www still uses this. We don't have a replacement but whatever we
+// replace it with will likely be different than what's already there, so we
+// probably should just delete it as long as nothing in www relies on it.
+export const enableSchedulerDebugging = false;
 
-// New API for JSX transforms to target - https://github.com/reactjs/rfcs/pull/107
+// Need to remove didTimeout argument from Scheduler before landing
+export const disableSchedulerTimeoutInWorkLoop = false;
 
-// We will enforce mocking scheduler with scheduler/unstable_mock at some point. (v18?)
-// Till then, we warn about the missing mock, but still fallback to a legacy mode compatible version
+// -----------------------------------------------------------------------------
+// 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 = false;
 
-// Part of the simplification of React.createElement so we can eventually move
-// from React.createElement to React.jsx
-// https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
-export const warnAboutDefaultPropsOnFunctionComponents = false;
-
-export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
-
-export const enableTrustedTypesIntegration = false;
-
-// Enables a warning when trying to spread a 'key' to an element;
-// a deprecated pattern we want to get rid of in the future
-export const warnAboutSpreadingKeyToJSX = false;
+// Experimental Scope support.
+export const enableScopeAPI = false;
 
-export const warnOnSubscriptionInsideStartTransition = false;
+// Experimental Create Event Handle API.
+export const enableCreateEventHandleAPI = false;
 
-export const enableSuspenseAvoidThisFallback = false;
-export const enableSuspenseAvoidThisFallbackFizz = false;
+// This controls whether you get the `.old` modules or the `.new` modules in
+// the react-reconciler package.
+export const enableNewReconciler = false;
 
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+// Support legacy Primer support on internal FB www
+export const enableLegacyFBSupport = false;
 
-export const enableClientRenderFallbackOnHydrationMismatch = true;
+// -----------------------------------------------------------------------------
+// Ongoing experiments
+//
+// These are features that we're either actively exploring or are reasonably
+// likely to include in an upcoming release.
+// -----------------------------------------------------------------------------
 
-export const enableComponentStackLocations = true;
+export const enableCache = __EXPERIMENTAL__;
 
-export const enableNewReconciler = false;
+export const enableTransitionTracing = false;
 
-export const disableNativeComponentFrames = false;
+// No known bugs, but needs performance testing
+export const enableLazyContextPropagation = false;
 
-// Internal only.
-export const enableGetInspectorDataForInstanceInProduction = false;
+// Enables unstable_avoidThisFallback feature in Fiber
+export const enableSuspenseAvoidThisFallback = false;
+// Enables unstable_avoidThisFallback feature in Fizz
+export const enableSuspenseAvoidThisFallbackFizz = false;
 
 // When a node is unmounted, recurse into the Fiber subtree and clean out
 // references. Each level cleans up more fiber fields than the previous level.
@@ -134,10 +117,65 @@ export const enableGetInspectorDataForInstanceInProduction = false;
 // aggressiveness.
 export const deletedTreeCleanUpLevel = 3;
 
-// Destroy layout effects for components that are hidden because something suspended in an update
-// and recreate them when they are shown again (after the suspended boundary has resolved).
-// Note that this should be an uncommon use case and can be avoided by using the transition API.
-export const enableSuspenseLayoutEffectSemantics = true;
+// -----------------------------------------------------------------------------
+// Chopping Block
+//
+// Planned feature deprecations and breaking changes. Sorted roughly in order of
+// when we we plan to enable them.
+// -----------------------------------------------------------------------------
+
+// This flag enables Strict Effects by default. We're not turning this on until
+// after 18 because it requires migration work. Recommendation is to use
+// <StrictMode /> to gradually upgrade components.
+// If TRUE, trees rendered with createRoot will be StrictEffectsMode.
+// If FALSE, these trees will be StrictLegacyMode.
+export const createRootStrictEffectsByDefault = false;
+
+export const disableModulePatternComponents = false;
+
+export const disableLegacyContext = false;
+
+export const enableUseRefAccessWarning = false;
+
+// Enables time slicing for updates that aren't wrapped in startTransition.
+export const enableSyncDefaultUpdates = true;
+
+// Adds an opt-in to time slicing for updates that aren't wrapped in
+// startTransition. Only relevant when enableSyncDefaultUpdates is disabled.
+export const allowConcurrentByDefault = false;
+
+// Updates that occur in the render phase are not officially supported. But when
+// they do occur, we defer them to a subsequent render by picking a lane that's
+// not currently rendering. We treat them the same as if they came from an
+// interleaved event. Remove this flag once we have migrated to the
+// new behavior.
+// NOTE: Not sure if we'll end up doing this or not.
+export const deferRenderPhaseUpdateToNextBatch = false;
+
+// -----------------------------------------------------------------------------
+// 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 = true;
+
+// Disable javascript: URL strings in href for XSS protection.
+export const disableJavaScriptURLs = false;
+
+export const enableTrustedTypesIntegration = false;
+
+// Prevent the value and checked attributes from syncing with their related
+// DOM properties
+export const disableInputAttributeSyncing = false;
+
+// Filter certain DOM attributes (e.g. src, href) if their values are empty
+// strings. This prevents e.g. <img src=""> from making an unnecessary HTTP
+// request for certain browsers.
+export const enableFilterEmptyStringAttributesDOM = false;
 
 // Changes the behavior for rendering custom elements in both server rendering
 // and client rendering, mostly to allow JSX attributes to apply to the custom
@@ -145,51 +183,74 @@ export const enableSuspenseLayoutEffectSemantics = true;
 // https://github.com/facebook/react/issues/11347
 export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
 
-// --------------------------
-// Future APIs to be deprecated
-// --------------------------
+// Disables children for <textarea> elements
+export const disableTextareaChildren = false;
 
-// Prevent the value and checked attributes from syncing
-// with their related DOM properties
-export const disableInputAttributeSyncing = false;
+// -----------------------------------------------------------------------------
+// JSX Chopping Block
+//
+// Similar to main Chopping Block but only flags related to JSX. These are
+// grouped because we will likely batch all of them into a single major release.
+// -----------------------------------------------------------------------------
 
-export const warnAboutStringRefs = false;
+// New API for JSX transforms to target - https://github.com/reactjs/rfcs/pull/107
 
-export const disableLegacyContext = false;
+// Part of the simplification of React.createElement so we can eventually move
+// from React.createElement to React.jsx
+// https://github.com/reactjs/rfcs/blob/createlement-rfc/text/0000-create-element-changes.md
+export const warnAboutDefaultPropsOnFunctionComponents = false; // deprecate later, not 18.0
 
-// Disables children for <textarea> elements
-export const disableTextareaChildren = false;
+// Enables a warning when trying to spread a 'key' to an element;
+// a deprecated pattern we want to get rid of in the future
+export const warnAboutSpreadingKeyToJSX = false;
 
-export const disableModulePatternComponents = false;
+export const warnAboutStringRefs = false;
 
-// We should remove this flag once the above flag becomes enabled
-export const warnUnstableRenderSubtreeIntoContainer = false;
+// -----------------------------------------------------------------------------
+// Debugging and DevTools
+// -----------------------------------------------------------------------------
 
-// Support legacy Primer support on internal FB www
-export const enableLegacyFBSupport = false;
+// Adds user timing marks for e.g. state updates, suspense, and work loop stuff,
+// for an experimental timeline tool.
+export const enableSchedulingProfiler = __PROFILE__;
 
-// Updates that occur in the render phase are not officially supported. But when
-// they do occur, we defer them to a subsequent render by picking a lane that's
-// not currently rendering. We treat them the same as if they came from an
-// interleaved event. Remove this flag once we have migrated to the
-// new behavior.
-export const deferRenderPhaseUpdateToNextBatch = false;
+// Helps identify side effects in render-phase lifecycle hooks and setState
+// reducers by double invoking them in StrictLegacyMode.
+export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 
-export const enableUseRefAccessWarning = false;
+// Helps identify code that is not safe for planned Offscreen API and Suspense semantics;
+// this feature flag only impacts StrictEffectsMode.
+export const enableStrictEffects = __DEV__;
 
-export const disableSchedulerTimeoutInWorkLoop = false;
+// To preserve the "Pause on caught exceptions" behavior of the debugger, we
+// replay the begin phase of a failed component inside invokeGuardedCallback.
+export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
 
-export const enableLazyContextPropagation = false;
+// Gather advanced timing metrics for Profiler subtrees.
+export const enableProfilerTimer = __PROFILE__;
 
-export const enableSyncDefaultUpdates = true;
+// Record durations for commit and passive effects phases.
+export const enableProfilerCommitHooks = __PROFILE__;
 
-export const allowConcurrentByDefault = false;
+// Phase param passed to onRender callback differentiates between an "update" and a "cascading-update".
+export const enableProfilerNestedUpdatePhase = __PROFILE__;
 
-export const enablePersistentOffscreenHostContainer = false;
+// Adds verbose console logging for e.g. state updates, suspense, and work loop
+// stuff. Intended to enable React core members to more easily debug scheduling
+// issues in DEV builds.
+export const enableDebugTracing = false;
 
-export const consoleManagedByDevToolsDuringStrictMode = true;
+// Track which Fiber(s) schedule render work.
+export const enableUpdaterTracking = __PROFILE__;
 
-// Only enabled in www builds
-export const enableUseMutableSource = false;
+// Only enabled in RN, related to enableComponentStackLocations
+export const disableNativeComponentFrames = false;
 
-export const enableTransitionTracing = false;
+// Internal only.
+export const enableGetInspectorDataForInstanceInProduction = false;
+
+// Profiler API accepts a function to be called when a nested update is scheduled.
+// This callback accepts the component type (class instance or function) the update is scheduled for.
+export const enableProfilerNestedUpdateScheduledHook = false;
+
+export const consoleManagedByDevToolsDuringStrictMode = true;

From b3f3da205b9abfc3c70e7018b03114a33ef43ca5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 23 Feb 2022 18:52:08 -0500
Subject: [PATCH 1160/1603] Land warnOnSubscriptionInsideStartTransition flag
 (#23353)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We're including this in 18. The feature was already enabled — this just
removes the flag.
---
 packages/react-reconciler/src/ReactFiberHooks.new.js       | 7 +------
 packages/react-reconciler/src/ReactFiberHooks.old.js       | 7 +------
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js    | 7 +------
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js    | 7 +------
 packages/react/src/ReactStartTransition.js                 | 7 +------
 packages/react/src/__tests__/ReactStartTransition-test.js  | 1 -
 packages/shared/ReactFeatureFlags.js                       | 1 -
 packages/shared/forks/ReactFeatureFlags.native-fb.js       | 1 -
 packages/shared/forks/ReactFeatureFlags.native-oss.js      | 1 -
 packages/shared/forks/ReactFeatureFlags.test-renderer.js   | 1 -
 .../shared/forks/ReactFeatureFlags.test-renderer.native.js | 1 -
 .../shared/forks/ReactFeatureFlags.test-renderer.www.js    | 1 -
 packages/shared/forks/ReactFeatureFlags.testing.js         | 1 -
 packages/shared/forks/ReactFeatureFlags.testing.www.js     | 1 -
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js     | 1 -
 packages/shared/forks/ReactFeatureFlags.www.js             | 1 -
 16 files changed, 5 insertions(+), 41 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 9e4f954b1e88..31e716935bc3 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -109,7 +109,6 @@ import {
   entangleTransitions as entangleLegacyQueueTransitions,
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
-import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 import {getTreeId} from './ReactFiberTreeContext.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@@ -1992,11 +1991,7 @@ function startTransition(setPending, callback) {
 
     ReactCurrentBatchConfig.transition = prevTransition;
     if (__DEV__) {
-      if (
-        prevTransition === null &&
-        warnOnSubscriptionInsideStartTransition &&
-        currentTransition._updatedFibers
-      ) {
+      if (prevTransition === null && currentTransition._updatedFibers) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index becadf35bd88..bd9e2488a884 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -109,7 +109,6 @@ import {
   entangleTransitions as entangleLegacyQueueTransitions,
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
-import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 import {getTreeId} from './ReactFiberTreeContext.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
@@ -1992,11 +1991,7 @@ function startTransition(setPending, callback) {
 
     ReactCurrentBatchConfig.transition = prevTransition;
     if (__DEV__) {
-      if (
-        prevTransition === null &&
-        warnOnSubscriptionInsideStartTransition &&
-        currentTransition._updatedFibers
-      ) {
+      if (prevTransition === null && currentTransition._updatedFibers) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index cf0fb63f1936..71bce2613251 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -31,7 +31,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   enableUpdaterTracking,
-  warnOnSubscriptionInsideStartTransition,
   enableCache,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -397,11 +396,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
-    if (
-      __DEV__ &&
-      warnOnSubscriptionInsideStartTransition &&
-      ReactCurrentBatchConfig.transition !== null
-    ) {
+    if (__DEV__ && ReactCurrentBatchConfig.transition !== null) {
       const transition = ReactCurrentBatchConfig.transition;
       if (!transition._updatedFibers) {
         transition._updatedFibers = new Set();
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index b823ed913313..7a0247199361 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -31,7 +31,6 @@ import {
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
   enableUpdaterTracking,
-  warnOnSubscriptionInsideStartTransition,
   enableCache,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
@@ -397,11 +396,7 @@ export function requestUpdateLane(fiber: Fiber): Lane {
 
   const isTransition = requestCurrentTransition() !== NoTransition;
   if (isTransition) {
-    if (
-      __DEV__ &&
-      warnOnSubscriptionInsideStartTransition &&
-      ReactCurrentBatchConfig.transition !== null
-    ) {
+    if (__DEV__ && ReactCurrentBatchConfig.transition !== null) {
       const transition = ReactCurrentBatchConfig.transition;
       if (!transition._updatedFibers) {
         transition._updatedFibers = new Set();
diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js
index 48f9ff96ffa7..a7097f5b1c52 100644
--- a/packages/react/src/ReactStartTransition.js
+++ b/packages/react/src/ReactStartTransition.js
@@ -8,7 +8,6 @@
  */
 
 import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
-import {warnOnSubscriptionInsideStartTransition} from 'shared/ReactFeatureFlags';
 
 export function startTransition(scope: () => void) {
   const prevTransition = ReactCurrentBatchConfig.transition;
@@ -24,11 +23,7 @@ export function startTransition(scope: () => void) {
     ReactCurrentBatchConfig.transition = prevTransition;
 
     if (__DEV__) {
-      if (
-        prevTransition === null &&
-        warnOnSubscriptionInsideStartTransition &&
-        currentTransition._updatedFibers
-      ) {
+      if (prevTransition === null && currentTransition._updatedFibers) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
diff --git a/packages/react/src/__tests__/ReactStartTransition-test.js b/packages/react/src/__tests__/ReactStartTransition-test.js
index 94e45fb189e9..2408e7ace1d4 100644
--- a/packages/react/src/__tests__/ReactStartTransition-test.js
+++ b/packages/react/src/__tests__/ReactStartTransition-test.js
@@ -27,7 +27,6 @@ describe('ReactStartTransition', () => {
     useTransition = React.useTransition;
   });
 
-  // @gate warnOnSubscriptionInsideStartTransition || !__DEV__
   it('Warns if a suspicious number of fibers are updated inside startTransition', () => {
     const subs = new Set();
     const useUserSpaceSubscription = () => {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 28512056bf4f..540a9d03ccbc 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -13,7 +13,6 @@
 // Flags that can likely be deleted or landed without consequences
 // -----------------------------------------------------------------------------
 
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const warnAboutDeprecatedLifecycles = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 810c5723e5a4..2e7ed5b2528a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -49,7 +49,6 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index be80da90ebf3..1a64e8c7aa07 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -40,7 +40,6 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index a34948b63b8e..e4f3393fe838 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -40,7 +40,6 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e86dbbecdf85..7169629762f1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -49,7 +49,6 @@ export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index f0c4e70afacc..ec04b6be37a0 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -40,7 +40,6 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index f4a35bdb8979..dfe9625873e8 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -40,7 +40,6 @@ export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e4f80908883e..a9ef92b69a44 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -40,7 +40,6 @@ export const disableTextareaChildren = __EXPERIMENTAL__;
 export const disableModulePatternComponents = true;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
-export const warnOnSubscriptionInsideStartTransition = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 61898e5a6eec..055cbd5d1e97 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -24,7 +24,6 @@ export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
-export const warnOnSubscriptionInsideStartTransition = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index b0e55bdab05f..381fa5532eda 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -30,7 +30,6 @@ export const {
   disableSchedulerTimeoutInWorkLoop,
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
-  warnOnSubscriptionInsideStartTransition,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
   enableClientRenderFallbackOnHydrationMismatch,
 } = dynamicFeatureFlags;

From 1ad8d81292415e26ac070dec03ad84c11fbe207d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 23 Feb 2022 19:34:24 -0500
Subject: [PATCH 1161/1603] Remove object-assign polyfill (#23351)

* Remove object-assign polyfill

We really rely on a more modern environment where this is typically
polyfilled anyway and we don't officially support IE with more extensive
polyfilling anyway. So all environments should have the native version
by now.

* Use shared/assign instead of Object.assign in code

This is so that we have one cached local instance in the bundle.

Ideally we should have a compile do this for us but we already follow
this pattern with hasOwnProperty, isArray, Object.is etc.

* Transform Object.assign to now use shared/assign

We need this to use the shared instance when Object.spread is used.
---
 package.json                                  |  1 -
 packages/jest-react/package.json              |  3 --
 packages/react-art/npm/Circle.js              |  2 +-
 packages/react-art/npm/Rectangle.js           |  2 +-
 packages/react-art/npm/Wedge.js               |  2 +-
 packages/react-art/package.json               |  1 -
 packages/react-client/package.json            |  3 +-
 packages/react-debug-tools/package.json       |  3 +-
 .../react-debug-tools/src/ReactDebugHooks.js  |  3 +-
 .../src/backend/views/Highlighter/Overlay.js  |  3 +-
 packages/react-dom/package.json               |  1 -
 .../react-dom/src/client/ReactDOMInput.js     |  3 +-
 .../react-dom/src/client/ReactDOMSelect.js    |  3 +-
 .../react-dom/src/events/SyntheticEvent.js    |  3 +-
 .../src/server/ReactPartialRenderer.js        | 21 ++++++------
 .../src/test-utils/ReactTestUtils.js          |  3 +-
 packages/react-native-renderer/package.json   |  1 -
 .../src/legacy-events/SyntheticEvent.js       |  8 +++--
 packages/react-noop-renderer/package.json     |  1 -
 packages/react-reconciler/package.json        |  1 -
 .../src/ReactFiberClassComponent.new.js       |  3 +-
 .../src/ReactFiberClassComponent.old.js       |  3 +-
 .../src/ReactFiberLazyComponent.new.js        |  4 ++-
 .../src/ReactFiberLazyComponent.old.js        |  4 ++-
 .../src/ReactUpdateQueue.new.js               |  4 ++-
 .../src/ReactUpdateQueue.old.js               |  4 ++-
 packages/react-server-dom-relay/package.json  |  1 -
 .../react-server-dom-webpack/package.json     |  3 +-
 .../react-server-native-relay/package.json    |  1 -
 packages/react-server/package.json            |  3 +-
 .../src/ReactFizzClassComponent.js            |  7 ++--
 packages/react-server/src/ReactFizzServer.js  |  3 +-
 packages/react-test-renderer/package.json     |  1 -
 packages/react/package.json                   |  3 +-
 packages/react/src/ReactBaseClasses.js        |  3 +-
 packages/react/src/ReactElement.js            |  3 +-
 packages/react/src/ReactSharedInternals.js    |  3 --
 .../src/forks/ReactSharedInternals.umd.js     |  3 --
 packages/scheduler/package.json               |  3 +-
 .../{forks/object-assign.umd.js => assign.js} |  6 ++--
 .../shared/forks/object-assign.inline-umd.js  | 31 ------------------
 packages/use-subscription/package.json        |  3 --
 ...-require.js => transform-object-assign.js} | 10 +++---
 scripts/rollup/build.js                       | 20 ++----------
 scripts/rollup/forks.js                       | 32 -------------------
 45 files changed, 73 insertions(+), 156 deletions(-)
 rename packages/shared/{forks/object-assign.umd.js => assign.js} (57%)
 delete mode 100644 packages/shared/forks/object-assign.inline-umd.js
 rename scripts/babel/{transform-object-assign-require.js => transform-object-assign.js} (77%)

diff --git a/package.json b/package.json
index 9dc97a27eb42..ec226416e211 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,6 @@
     "minimist": "^1.2.3",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
-    "object-assign": "^4.1.1",
     "pacote": "^10.3.0",
     "prettier": "1.19.1",
     "prop-types": "^15.6.2",
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
index 0a1c764be2fe..78907eeb32c7 100644
--- a/packages/jest-react/package.json
+++ b/packages/jest-react/package.json
@@ -23,9 +23,6 @@
     "react": "^17.0.0",
     "react-test-renderer": "^17.0.0"
   },
-  "dependencies": {
-    "object-assign": "^4.1.1"
-  },
   "files": [
     "LICENSE",
     "README.md",
diff --git a/packages/react-art/npm/Circle.js b/packages/react-art/npm/Circle.js
index 1100a3e5a5b9..4e0cca3a47eb 100644
--- a/packages/react-art/npm/Circle.js
+++ b/packages/react-art/npm/Circle.js
@@ -17,7 +17,7 @@
 
 'use strict';
 
-var assign = require('object-assign');
+var assign = Object.assign;
 var PropTypes = require('prop-types');
 var React = require('react');
 var ReactART = require('react-art');
diff --git a/packages/react-art/npm/Rectangle.js b/packages/react-art/npm/Rectangle.js
index 54b33e69a183..89f443e9ceec 100644
--- a/packages/react-art/npm/Rectangle.js
+++ b/packages/react-art/npm/Rectangle.js
@@ -24,7 +24,7 @@
 
 'use strict';
 
-var assign = require('object-assign');
+var assign = Object.assign;
 var PropTypes = require('prop-types');
 var React = require('react');
 var ReactART = require('react-art');
diff --git a/packages/react-art/npm/Wedge.js b/packages/react-art/npm/Wedge.js
index 91c8bc4158b8..90de17e071f6 100644
--- a/packages/react-art/npm/Wedge.js
+++ b/packages/react-art/npm/Wedge.js
@@ -20,7 +20,7 @@
 
 'use strict';
 
-var assign = require('object-assign');
+var assign = Object.assign;
 var PropTypes = require('prop-types');
 var React = require('react');
 var ReactART = require('react-art');
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index fabdcd560f9c..a819d3eb269a 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -25,7 +25,6 @@
     "art": "^0.10.1",
     "create-react-class": "^15.6.2",
     "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1",
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
diff --git a/packages/react-client/package.json b/packages/react-client/package.json
index 7752fcb73f8a..64670a870d8a 100644
--- a/packages/react-client/package.json
+++ b/packages/react-client/package.json
@@ -27,8 +27,7 @@
     "react": "^17.0.0"
   },
   "dependencies": {
-    "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1"
+    "loose-envify": "^1.1.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-debug-tools/package.json b/packages/react-debug-tools/package.json
index 69327edaeb1f..f3ee5806f722 100644
--- a/packages/react-debug-tools/package.json
+++ b/packages/react-debug-tools/package.json
@@ -28,7 +28,6 @@
     "react": "^17.0.0"
   },
   "dependencies": {
-    "error-stack-parser": "^2.0.2",
-    "object-assign": "^4.1.1"
+    "error-stack-parser": "^2.0.2"
   }
 }
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 895e75359867..0ffec00bd3f8 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -20,6 +20,7 @@ import type {
 } from 'react-reconciler/src/ReactInternalTypes';
 
 import ErrorStackParser from 'error-stack-parser';
+import assign from 'shared/assign';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
   FunctionComponent,
@@ -720,7 +721,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
 function resolveDefaultProps(Component, baseProps) {
   if (Component && Component.defaultProps) {
     // Resolve default props. Taken from ReactElement
-    const props = Object.assign({}, baseProps);
+    const props = assign({}, baseProps);
     const defaultProps = Component.defaultProps;
     for (const propName in defaultProps) {
       if (props[propName] === undefined) {
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
index 7e6cc595654b..ba763562a162 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -7,9 +7,10 @@
  * @flow
  */
 
-import assign from 'object-assign';
 import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
 
+const assign = Object.assign;
+
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 import type {Rect} from '../utils';
 
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 71d15b5670dc..25207ffc9c39 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -18,7 +18,6 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1",
     "scheduler": "^0.20.1"
   },
   "peerDependencies": {
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index 8f5098405b57..a4b8dede45a7 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -16,6 +16,7 @@ import {getToStringValue, toString} from './ToStringValue';
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {updateValueIfChanged} from './inputValueTracking';
 import getActiveElement from './getActiveElement';
+import assign from 'shared/assign';
 import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
@@ -62,7 +63,7 @@ export function getHostProps(element: Element, props: Object) {
   const node = ((element: any): InputWithWrapperState);
   const checked = props.checked;
 
-  const hostProps = Object.assign({}, props, {
+  const hostProps = assign({}, props, {
     defaultChecked: undefined,
     defaultValue: undefined,
     value: undefined,
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index df336d4b9225..ece9275e4b37 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -12,6 +12,7 @@ import {getCurrentFiberOwnerNameInDevOrNull} from 'react-reconciler/src/ReactCur
 
 import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
 import {getToStringValue, toString} from './ToStringValue';
+import assign from 'shared/assign';
 import isArray from 'shared/isArray';
 
 let didWarnValueDefaultValue;
@@ -134,7 +135,7 @@ function updateOptions(
  */
 
 export function getHostProps(element: Element, props: Object) {
-  return Object.assign({}, props, {
+  return assign({}, props, {
     value: undefined,
   });
 }
diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 649cab082e61..3609e6794a50 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -9,6 +9,7 @@
 
 /* eslint valid-typeof: 0 */
 
+import assign from 'shared/assign';
 import getEventCharCode from './getEventCharCode';
 
 type EventInterfaceType = {
@@ -78,7 +79,7 @@ function createSyntheticEvent(Interface: EventInterfaceType) {
     return this;
   }
 
-  Object.assign(SyntheticBaseEvent.prototype, {
+  assign(SyntheticBaseEvent.prototype, {
     preventDefault: function() {
       this.defaultPrevented = true;
       const event = this.nativeEvent;
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 1902dc65690c..41c288568043 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -80,6 +80,7 @@ import warnValidStyle from '../shared/warnValidStyle';
 import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
 import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
 import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
+import assign from 'shared/assign';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
 // Based on reading the React.Children implementation. TODO: type this somewhere?
@@ -563,7 +564,7 @@ function resolve(
         }
 
         if (partialState != null) {
-          inst.state = Object.assign({}, inst.state, partialState);
+          inst.state = assign({}, inst.state, partialState);
         }
       }
     } else {
@@ -695,9 +696,9 @@ function resolve(
             if (partialState != null) {
               if (dontMutate) {
                 dontMutate = false;
-                nextState = Object.assign({}, nextState, partialState);
+                nextState = assign({}, nextState, partialState);
               } else {
-                Object.assign(nextState, partialState);
+                assign(nextState, partialState);
               }
             }
           }
@@ -745,7 +746,7 @@ function resolve(
         }
       }
       if (childContext) {
-        context = Object.assign({}, context, childContext);
+        context = assign({}, context, childContext);
       }
     }
   }
@@ -1192,7 +1193,7 @@ class ReactDOMServerRenderer {
             const nextChildren = [
               React.createElement(
                 elementType.type,
-                Object.assign({ref: element.ref}, element.props),
+                assign({ref: element.ref}, element.props),
               ),
             ];
             const frame: Frame = {
@@ -1291,7 +1292,7 @@ class ReactDOMServerRenderer {
             const nextChildren = [
               React.createElement(
                 result,
-                Object.assign({ref: element.ref}, element.props),
+                assign({ref: element.ref}, element.props),
               ),
             ];
             const frame: Frame = {
@@ -1413,7 +1414,7 @@ class ReactDOMServerRenderer {
         }
       }
 
-      props = Object.assign(
+      props = assign(
         {
           type: undefined,
         },
@@ -1485,7 +1486,7 @@ class ReactDOMServerRenderer {
       if (__DEV__) {
         checkFormFieldValueStringCoercion(initialValue);
       }
-      props = Object.assign({}, props, {
+      props = assign({}, props, {
         value: undefined,
         children: '' + initialValue,
       });
@@ -1531,7 +1532,7 @@ class ReactDOMServerRenderer {
       }
       this.currentSelectValue =
         props.value != null ? props.value : props.defaultValue;
-      props = Object.assign({}, props, {
+      props = assign({}, props, {
         value: undefined,
       });
     } else if (tag === 'option') {
@@ -1577,7 +1578,7 @@ class ReactDOMServerRenderer {
           selected = '' + selectValue === value;
         }
 
-        props = Object.assign(
+        props = assign(
           {
             selected: undefined,
           },
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index c83b072447ba..2c89baf398a9 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -21,6 +21,7 @@ import {
   rethrowCaughtError,
   invokeGuardedCallbackAndCatchFirstError,
 } from 'shared/ReactErrorUtils';
+import assign from 'shared/assign';
 import isArray from 'shared/isArray';
 
 // Keep in sync with ReactDOM.js:
@@ -596,7 +597,7 @@ function makeSimulator(eventType) {
     // Since we aren't using pooling, always persist the event. This will make
     // sure it's marked and won't warn when setting additional properties.
     event.persist();
-    Object.assign(event, eventData);
+    assign(event, eventData);
 
     if (directDispatchEventTypes.has(eventType)) {
       accumulateDirectDispatchesSingle(event);
diff --git a/packages/react-native-renderer/package.json b/packages/react-native-renderer/package.json
index bc5066c43ba0..9df888773f2c 100644
--- a/packages/react-native-renderer/package.json
+++ b/packages/react-native-renderer/package.json
@@ -8,7 +8,6 @@
     "directory": "packages/react-native-renderer"
   },
   "dependencies": {
-    "object-assign": "^4.1.1",
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
diff --git a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
index 84d39bbd603d..9e3009d9d8d0 100644
--- a/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
+++ b/packages/react-native-renderer/src/legacy-events/SyntheticEvent.js
@@ -7,6 +7,8 @@
 
 /* eslint valid-typeof: 0 */
 
+import assign from 'shared/assign';
+
 const EVENT_POOL_SIZE = 10;
 
 /**
@@ -110,7 +112,7 @@ function SyntheticEvent(
   return this;
 }
 
-Object.assign(SyntheticEvent.prototype, {
+assign(SyntheticEvent.prototype, {
   preventDefault: function() {
     this.defaultPrevented = true;
     const event = this.nativeEvent;
@@ -236,11 +238,11 @@ SyntheticEvent.extend = function(Interface) {
   function Class() {
     return Super.apply(this, arguments);
   }
-  Object.assign(prototype, Class.prototype);
+  assign(prototype, Class.prototype);
   Class.prototype = prototype;
   Class.prototype.constructor = Class;
 
-  Class.Interface = Object.assign({}, Super.Interface, Interface);
+  Class.Interface = assign({}, Super.Interface, Interface);
   Class.extend = Super.extend;
   addEventPoolingTo(Class);
 
diff --git a/packages/react-noop-renderer/package.json b/packages/react-noop-renderer/package.json
index 22eab24f8c5a..aae14070714c 100644
--- a/packages/react-noop-renderer/package.json
+++ b/packages/react-noop-renderer/package.json
@@ -11,7 +11,6 @@
   },
   "license": "MIT",
   "dependencies": {
-    "object-assign": "^4.1.1",
     "react-reconciler": "*",
     "react-client": "*",
     "react-server": "*"
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index a6b9986adaea..9dc5ae52bcc8 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1",
     "scheduler": "^0.20.1"
   },
   "browserify": {
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 0279cabd519b..23bc16ecce99 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -35,6 +35,7 @@ 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_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
@@ -186,7 +187,7 @@ function applyDerivedStateFromProps(
   const memoizedState =
     partialState === null || partialState === undefined
       ? prevState
-      : Object.assign({}, prevState, partialState);
+      : assign({}, prevState, partialState);
   workInProgress.memoizedState = memoizedState;
 
   // Once the update queue is empty, persist the derived state onto the
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 184993ff35b0..793156401efb 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -35,6 +35,7 @@ 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_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
@@ -186,7 +187,7 @@ function applyDerivedStateFromProps(
   const memoizedState =
     partialState === null || partialState === undefined
       ? prevState
-      : Object.assign({}, prevState, partialState);
+      : assign({}, prevState, partialState);
   workInProgress.memoizedState = memoizedState;
 
   // Once the update queue is empty, persist the derived state onto the
diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.new.js b/packages/react-reconciler/src/ReactFiberLazyComponent.new.js
index 3773f640439b..4bf227dc5e80 100644
--- a/packages/react-reconciler/src/ReactFiberLazyComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberLazyComponent.new.js
@@ -7,10 +7,12 @@
  * @flow
  */
 
+import assign from 'shared/assign';
+
 export function resolveDefaultProps(Component: any, baseProps: Object): Object {
   if (Component && Component.defaultProps) {
     // Resolve default props. Taken from ReactElement
-    const props = Object.assign({}, baseProps);
+    const props = assign({}, baseProps);
     const defaultProps = Component.defaultProps;
     for (const propName in defaultProps) {
       if (props[propName] === undefined) {
diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.old.js b/packages/react-reconciler/src/ReactFiberLazyComponent.old.js
index 3773f640439b..4bf227dc5e80 100644
--- a/packages/react-reconciler/src/ReactFiberLazyComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberLazyComponent.old.js
@@ -7,10 +7,12 @@
  * @flow
  */
 
+import assign from 'shared/assign';
+
 export function resolveDefaultProps(Component: any, baseProps: Object): Object {
   if (Component && Component.defaultProps) {
     // Resolve default props. Taken from ReactElement
-    const props = Object.assign({}, baseProps);
+    const props = assign({}, baseProps);
     const defaultProps = Component.defaultProps;
     for (const propName in defaultProps) {
       if (props[propName] === undefined) {
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactUpdateQueue.new.js
index c9a980890a0a..1f665a88dfa4 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.new.js
@@ -112,6 +112,8 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
+import assign from 'shared/assign';
+
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -442,7 +444,7 @@ function getStateFromUpdate<State>(
         return prevState;
       }
       // Merge the partial state and the previous state.
-      return Object.assign({}, prevState, partialState);
+      return assign({}, prevState, partialState);
     }
     case ForceUpdate: {
       hasForceUpdate = true;
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactUpdateQueue.old.js
index 9ef09b17efd1..e59ea26f2161 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactUpdateQueue.old.js
@@ -112,6 +112,8 @@ import {
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
+import assign from 'shared/assign';
+
 export type Update<State> = {|
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
@@ -442,7 +444,7 @@ function getStateFromUpdate<State>(
         return prevState;
       }
       // Merge the partial state and the previous state.
-      return Object.assign({}, prevState, partialState);
+      return assign({}, prevState, partialState);
     }
     case ForceUpdate: {
       hasForceUpdate = true;
diff --git a/packages/react-server-dom-relay/package.json b/packages/react-server-dom-relay/package.json
index eeceab0da3e0..793363bb30dd 100644
--- a/packages/react-server-dom-relay/package.json
+++ b/packages/react-server-dom-relay/package.json
@@ -8,7 +8,6 @@
     "directory": "packages/react-server-dom-relay"
   },
   "dependencies": {
-    "object-assign": "^4.1.1",
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index af705d975db7..ababa89250e3 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -54,8 +54,7 @@
   "dependencies": {
     "acorn": "^6.2.1",
     "neo-async": "^2.6.1",
-    "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1"
+    "loose-envify": "^1.1.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-server-native-relay/package.json b/packages/react-server-native-relay/package.json
index 1c328bd2ba32..241913f91e6a 100644
--- a/packages/react-server-native-relay/package.json
+++ b/packages/react-server-native-relay/package.json
@@ -8,7 +8,6 @@
     "directory": "packages/react-server-native-relay"
   },
   "dependencies": {
-    "object-assign": "^4.1.1",
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
diff --git a/packages/react-server/package.json b/packages/react-server/package.json
index 3e9252d2615d..8c5c312a693a 100644
--- a/packages/react-server/package.json
+++ b/packages/react-server/package.json
@@ -29,8 +29,7 @@
     "react": "^17.0.0"
   },
   "dependencies": {
-    "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1"
+    "loose-envify": "^1.1.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
index 2e085c3f1a71..12fbeb46f2de 100644
--- a/packages/react-server/src/ReactFizzClassComponent.js
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -17,6 +17,7 @@ import {
 import {get as getInstance, set as setInstance} from 'shared/ReactInstanceMap';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
+import assign from 'shared/assign';
 import isArray from 'shared/isArray';
 
 const didWarnAboutNoopUpdateForComponent = {};
@@ -161,7 +162,7 @@ function applyDerivedStateFromProps(
   const newState =
     partialState === null || partialState === undefined
       ? prevState
-      : Object.assign({}, prevState, partialState);
+      : assign({}, prevState, partialState);
   return newState;
 }
 
@@ -602,9 +603,9 @@ function processUpdateQueue(
         if (partialState != null) {
           if (dontMutate) {
             dontMutate = false;
-            nextState = Object.assign({}, nextState, partialState);
+            nextState = assign({}, nextState, partialState);
           } else {
-            Object.assign(nextState, partialState);
+            assign(nextState, partialState);
           }
         }
       }
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index bdf9b16a2458..a7f5ad834693 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -117,6 +117,7 @@ import {
   enableSuspenseAvoidThisFallbackFizz,
 } from 'shared/ReactFeatureFlags';
 
+import assign from 'shared/assign';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import isArray from 'shared/isArray';
 
@@ -837,7 +838,7 @@ function validateFunctionComponentInDev(Component: any): void {
 function resolveDefaultProps(Component: any, baseProps: Object): Object {
   if (Component && Component.defaultProps) {
     // Resolve default props. Taken from ReactElement
-    const props = Object.assign({}, baseProps);
+    const props = assign({}, baseProps);
     const defaultProps = Component.defaultProps;
     for (const propName in defaultProps) {
       if (props[propName] === undefined) {
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index 26e033764182..814e6b3d264b 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -19,7 +19,6 @@
   },
   "homepage": "https://reactjs.org/",
   "dependencies": {
-    "object-assign": "^4.1.1",
     "react-is": "^17.0.3",
     "react-shallow-renderer": "^16.13.1",
     "scheduler": "^0.20.1"
diff --git a/packages/react/package.json b/packages/react/package.json
index 94703e200510..9d19b02b3202 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -38,8 +38,7 @@
     "node": ">=0.10.0"
   },
   "dependencies": {
-    "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1"
+    "loose-envify": "^1.1.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react/src/ReactBaseClasses.js b/packages/react/src/ReactBaseClasses.js
index e2a004bcc046..23b8f126146d 100644
--- a/packages/react/src/ReactBaseClasses.js
+++ b/packages/react/src/ReactBaseClasses.js
@@ -6,6 +6,7 @@
  */
 
 import ReactNoopUpdateQueue from './ReactNoopUpdateQueue';
+import assign from 'shared/assign';
 
 const emptyObject = {};
 if (__DEV__) {
@@ -139,7 +140,7 @@ function PureComponent(props, context, updater) {
 const pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
 pureComponentPrototype.constructor = PureComponent;
 // Avoid an extra prototype jump for these methods.
-Object.assign(pureComponentPrototype, Component.prototype);
+assign(pureComponentPrototype, Component.prototype);
 pureComponentPrototype.isPureReactComponent = true;
 
 export {Component, PureComponent};
diff --git a/packages/react/src/ReactElement.js b/packages/react/src/ReactElement.js
index e87f31d1ae36..4af5a8bafb5a 100644
--- a/packages/react/src/ReactElement.js
+++ b/packages/react/src/ReactElement.js
@@ -7,6 +7,7 @@
 
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import assign from 'shared/assign';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {checkKeyStringCoercion} from 'shared/CheckStringCoercion';
 
@@ -492,7 +493,7 @@ export function cloneElement(element, config, children) {
   let propName;
 
   // Original props are copied
-  const props = Object.assign({}, element.props);
+  const props = assign({}, element.props);
 
   // Reserved names are extracted
   let key = element.key;
diff --git a/packages/react/src/ReactSharedInternals.js b/packages/react/src/ReactSharedInternals.js
index 3443fb276633..2874b03985b9 100644
--- a/packages/react/src/ReactSharedInternals.js
+++ b/packages/react/src/ReactSharedInternals.js
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import assign from 'object-assign';
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
 import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
 import ReactCurrentActQueue from './ReactCurrentActQueue';
@@ -16,8 +15,6 @@ const ReactSharedInternals = {
   ReactCurrentDispatcher,
   ReactCurrentBatchConfig,
   ReactCurrentOwner,
-  // Used by renderers to avoid bundling object-assign twice in UMD bundles:
-  assign,
 };
 
 if (__DEV__) {
diff --git a/packages/react/src/forks/ReactSharedInternals.umd.js b/packages/react/src/forks/ReactSharedInternals.umd.js
index 5dcfbb5650e6..04e8cb577f7a 100644
--- a/packages/react/src/forks/ReactSharedInternals.umd.js
+++ b/packages/react/src/forks/ReactSharedInternals.umd.js
@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import assign from 'object-assign';
 import * as Scheduler from 'scheduler';
 import ReactCurrentDispatcher from '../ReactCurrentDispatcher';
 import ReactCurrentActQueue from '../ReactCurrentActQueue';
@@ -17,8 +16,6 @@ const ReactSharedInternals = {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
   ReactCurrentBatchConfig,
-  // Used by renderers to avoid bundling object-assign twice in UMD bundles:
-  assign,
 
   // Re-export the schedule API(s) for UMD bundles.
   // This avoids introducing a dependency on a new UMD global in a minor update,
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index 3f88ee56bbf7..50f5778a833f 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -17,8 +17,7 @@
   },
   "homepage": "https://reactjs.org/",
   "dependencies": {
-    "loose-envify": "^1.1.0",
-    "object-assign": "^4.1.1"
+    "loose-envify": "^1.1.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/shared/forks/object-assign.umd.js b/packages/shared/assign.js
similarity index 57%
rename from packages/shared/forks/object-assign.umd.js
rename to packages/shared/assign.js
index 3e5d03c3cca8..b9666e5e8b41 100644
--- a/packages/shared/forks/object-assign.umd.js
+++ b/packages/shared/assign.js
@@ -7,8 +7,6 @@
  * @flow
  */
 
-import * as React from 'react';
+const assign = Object.assign;
 
-const ReactInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-export default ReactInternals.assign;
+export default assign;
diff --git a/packages/shared/forks/object-assign.inline-umd.js b/packages/shared/forks/object-assign.inline-umd.js
deleted file mode 100644
index 553fa44f6b0a..000000000000
--- a/packages/shared/forks/object-assign.inline-umd.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright 2004-present Facebook. All Rights Reserved.
- */
-
-const hasOwnProperty = Object.prototype.hasOwnProperty;
-
-const _assign = function(to, from) {
-  for (const key in from) {
-    if (hasOwnProperty.call(from, key)) {
-      to[key] = from[key];
-    }
-  }
-};
-
-export default Object.assign ||
-  function(target, sources) {
-    if (target == null) {
-      throw new TypeError('Object.assign target cannot be null or undefined');
-    }
-
-    const to = Object(target);
-
-    for (let nextIndex = 1; nextIndex < arguments.length; nextIndex++) {
-      const nextSource = arguments[nextIndex];
-      if (nextSource != null) {
-        _assign(to, Object(nextSource));
-      }
-    }
-
-    return to;
-  };
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index 0c270f5e08ee..cad898b5f646 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -14,9 +14,6 @@
     "cjs/"
   ],
   "license": "MIT",
-  "dependencies": {
-    "object-assign": "^4.1.1"
-  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
diff --git a/scripts/babel/transform-object-assign-require.js b/scripts/babel/transform-object-assign.js
similarity index 77%
rename from scripts/babel/transform-object-assign-require.js
rename to scripts/babel/transform-object-assign.js
index 8b43be53e700..9b20675f39f1 100644
--- a/scripts/babel/transform-object-assign-require.js
+++ b/scripts/babel/transform-object-assign.js
@@ -14,7 +14,7 @@ module.exports = function autoImporter(babel) {
     if (state.id) {
       return state.id;
     }
-    state.id = helperModuleImports.addDefault(path, 'object-assign', {
+    state.id = helperModuleImports.addDefault(path, 'shared/assign', {
       nameHint: 'assign',
     });
     return state.id;
@@ -28,8 +28,8 @@ module.exports = function autoImporter(babel) {
 
     visitor: {
       CallExpression: function(path, file) {
-        if (file.filename.indexOf('object-assign') !== -1) {
-          // Don't replace Object.assign if we're transforming object-assign
+        if (file.filename.indexOf('shared/assign') !== -1) {
+          // Don't replace Object.assign if we're transforming shared/assign
           return;
         }
         if (path.get('callee').matchesPattern('Object.assign')) {
@@ -40,8 +40,8 @@ module.exports = function autoImporter(babel) {
       },
 
       MemberExpression: function(path, file) {
-        if (file.filename.indexOf('object-assign') !== -1) {
-          // Don't replace Object.assign if we're transforming object-assign
+        if (file.filename.indexOf('shared/assign') !== -1) {
+          // Don't replace Object.assign if we're transforming shared/assign
           return;
         }
         if (path.matchesPattern('Object.assign')) {
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index 48401c002b43..c42edbe7eea6 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -8,7 +8,6 @@ const prettier = require('rollup-plugin-prettier');
 const replace = require('rollup-plugin-replace');
 const stripBanner = require('rollup-plugin-strip-banner');
 const chalk = require('chalk');
-const path = require('path');
 const resolve = require('rollup-plugin-node-resolve');
 const fs = require('fs');
 const argv = require('minimist')(process.argv.slice(2));
@@ -127,6 +126,8 @@ const babelPlugins = [
   '@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 = [
@@ -177,22 +178,7 @@ function getBabelConfig(
     options.plugins.push(require('../error-codes/transform-error-messages'));
   }
 
-  switch (bundleType) {
-    case UMD_DEV:
-    case UMD_PROD:
-    case UMD_PROFILING:
-    case NODE_DEV:
-    case NODE_PROD:
-    case NODE_PROFILING:
-      return Object.assign({}, options, {
-        plugins: options.plugins.concat([
-          // Use object-assign polyfill in open source
-          path.resolve('./scripts/babel/transform-object-assign-require'),
-        ]),
-      });
-    default:
-      return options;
-  }
+  return options;
 }
 
 function getRollupOutputOptions(
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index eba8f0d684b6..d45c41a74268 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -36,38 +36,6 @@ const __EXPERIMENTAL__ =
 // algorithm because 1) require.resolve doesn't work with ESM modules, and 2)
 // the behavior is easier to predict.
 const forks = Object.freeze({
-  // Optimization: for UMDs, use a version that we can inline into the React bundle.
-  // Use that from all other bundles.
-
-  // NOTE: This is hard-coded to the main entry point of the (third-party)
-  // object-assign package.
-  './node_modules/object-assign/index.js': (
-    bundleType,
-    entry,
-    dependencies
-  ) => {
-    if (
-      bundleType !== UMD_DEV &&
-      bundleType !== UMD_PROD &&
-      bundleType !== UMD_PROFILING
-    ) {
-      // It's only relevant for UMD bundles since that's where the duplication
-      // happens. Other bundles just require('object-assign') anyway.
-      return null;
-    }
-    if (entry === 'react' || entry === 'react/src/ReactSharedSubset.js') {
-      // Use the forked version that uses ES modules instead of CommonJS.
-      return './packages/shared/forks/object-assign.inline-umd.js';
-    }
-    if (dependencies.indexOf('react') === -1) {
-      // We can only apply the optimizations to bundle that depend on React
-      // because we read assign() from an object exposed on React internals.
-      return null;
-    }
-    // We can use the fork that reads the secret export!
-    return './packages/shared/forks/object-assign.umd.js';
-  },
-
   // NOTE: This is hard-coded to the main entry point of the (third-party)
   // react-shallow-renderer package.
   './node_modules/react-shallow-renderer/index.js': () => {

From 52c393b5d261550609dda955f059a26d1db63538 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 24 Feb 2022 00:23:56 -0500
Subject: [PATCH 1162/1603] Revert to client render on text mismatch (#23354)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Refactor warnForTextDifference

We're going to fork the behavior of this function between concurrent
roots and legacy roots.

The legacy behavior is to warn in dev when the text mismatches during
hydration. In concurrent roots, we'll log a recoverable error and revert
to client rendering. That means this is no longer a development-only
function — it affects the prod behavior, too.

I haven't changed any behavior in this commit. I only rearranged the
code slightly so that the dev environment check is inside the body
instead of around the function call. I also threaded through an
isConcurrentMode argument.

* Revert to client render on text content mismatch

Expands the behavior of enableClientRenderFallbackOnHydrationMismatch to
check text content, too.

If the text is different from what was rendered on the server, we will
recover the UI by falling back to client rendering, up to the nearest
Suspense boundary.
---
 ...DOMServerPartialHydration-test.internal.js |  73 +++++++++++
 .../react-dom/src/client/ReactDOMComponent.js | 118 ++++++++++--------
 .../src/client/ReactDOMHostConfig.js          |  30 +++--
 .../src/ReactFiberHydrationContext.new.js     |  61 ++++-----
 .../src/ReactFiberHydrationContext.old.js     |  61 ++++-----
 .../useMutableSourceHydration-test.js         |  14 ++-
 scripts/error-codes/codes.json                |   3 +-
 7 files changed, 240 insertions(+), 120 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 36c452b8cdf3..f19c38bc38cd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3361,4 +3361,77 @@ describe('ReactDOMServerPartialHydration', () => {
       '<div>1</div><span>client</span><div>2</div>',
     );
   });
+
+  // @gate enableClientRenderFallbackOnHydrationMismatch
+  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" />,
+    );
+    expect(() => {
+      act(() => {
+        ReactDOM.hydrateRoot(container, <DirectTextChild text="bad" />, {
+          onRecoverableError(error) {
+            Scheduler.unstable_yieldValue(error.message);
+          },
+        });
+      });
+    }).toErrorDev(
+      [
+        'Text content did not match. Server: "good" Client: "bad"',
+        'An error occurred during hydration. The server HTML was replaced with ' +
+          'client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
+    expect(Scheduler).toHaveYielded([
+      'Text content does not match server-rendered HTML.',
+      'There was an error while hydrating. Because the error happened outside ' +
+        'of a Suspense boundary, the entire root will switch to client rendering.',
+    ]);
+  });
+
+  // @gate enableClientRenderFallbackOnHydrationMismatch
+  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" />,
+    );
+    expect(() => {
+      act(() => {
+        ReactDOM.hydrateRoot(container2, <TextChildWithSibling text="bad" />, {
+          onRecoverableError(error) {
+            Scheduler.unstable_yieldValue(error.message);
+          },
+        });
+      });
+    }).toErrorDev(
+      [
+        'Text content did not match. Server: "good" Client: "bad"',
+        'An error occurred during hydration. The server HTML was replaced with ' +
+          'client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
+    expect(Scheduler).toHaveYielded([
+      'Text content does not match server-rendered HTML.',
+      'There was an error while hydrating. Because the error happened outside ' +
+        'of a Suspense boundary, the entire root will switch to client rendering.',
+    ]);
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index ffd90c128d46..767b200f2909 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -72,6 +72,7 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
 import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
+  enableClientRenderFallbackOnHydrationMismatch,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -93,13 +94,11 @@ let warnedUnknownTags;
 let suppressHydrationWarning;
 
 let validatePropertiesInDevelopment;
-let warnForTextDifference;
 let warnForPropDifference;
 let warnForExtraAttributes;
 let warnForInvalidEventListener;
 let canDiffStyleForHydrationWarning;
 
-let normalizeMarkupForTextOrAttribute;
 let normalizeHTML;
 
 if (__DEV__) {
@@ -133,45 +132,6 @@ if (__DEV__) {
   // See https://github.com/facebook/react/issues/11807
   canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode;
 
-  // 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;
-
-  normalizeMarkupForTextOrAttribute = function(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, '');
-  };
-
-  warnForTextDifference = function(
-    serverText: string,
-    clientText: string | number,
-  ) {
-    if (didWarnInvalidHydration) {
-      return;
-    }
-    const normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
-    const normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
-    if (normalizedServerText === normalizedClientText) {
-      return;
-    }
-    didWarnInvalidHydration = true;
-    console.error(
-      'Text content did not match. Server: "%s" Client: "%s"',
-      normalizedServerText,
-      normalizedClientText,
-    );
-  };
-
   warnForPropDifference = function(
     propName: string,
     serverValue: mixed,
@@ -248,6 +208,53 @@ if (__DEV__) {
   };
 }
 
+// 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, '');
+}
+
+export function checkForUnmatchedText(
+  serverText: string,
+  clientText: string | number,
+  isConcurrentMode: boolean,
+) {
+  const normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
+  const normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
+  if (normalizedServerText === normalizedClientText) {
+    return;
+  }
+
+  if (__DEV__) {
+    if (!didWarnInvalidHydration) {
+      didWarnInvalidHydration = true;
+      console.error(
+        'Text content did not match. Server: "%s" Client: "%s"',
+        normalizedServerText,
+        normalizedClientText,
+      );
+    }
+  }
+
+  if (isConcurrentMode && enableClientRenderFallbackOnHydrationMismatch) {
+    // In concurrent roots, we throw when there's a text mismatch and revert to
+    // client rendering, up to the nearest Suspense boundary.
+    throw new Error('Text content does not match server-rendered HTML.');
+  }
+}
+
 function getOwnerDocumentFromRootContainer(
   rootContainerElement: Element | Document,
 ): Document {
@@ -858,6 +865,7 @@ export function diffHydratedProperties(
   rawProps: Object,
   parentNamespace: string,
   rootContainerElement: Element | Document,
+  isConcurrentMode: boolean,
 ): null | Array<mixed> {
   let isCustomComponentTag;
   let extraAttributeNames: Set<string>;
@@ -972,15 +980,23 @@ export function diffHydratedProperties(
       // TODO: Should we use domElement.firstChild.nodeValue to compare?
       if (typeof nextProp === 'string') {
         if (domElement.textContent !== nextProp) {
-          if (__DEV__ && !suppressHydrationWarning) {
-            warnForTextDifference(domElement.textContent, nextProp);
+          if (!suppressHydrationWarning) {
+            checkForUnmatchedText(
+              domElement.textContent,
+              nextProp,
+              isConcurrentMode,
+            );
           }
           updatePayload = [CHILDREN, nextProp];
         }
       } else if (typeof nextProp === 'number') {
         if (domElement.textContent !== '' + nextProp) {
-          if (__DEV__ && !suppressHydrationWarning) {
-            warnForTextDifference(domElement.textContent, nextProp);
+          if (!suppressHydrationWarning) {
+            checkForUnmatchedText(
+              domElement.textContent,
+              nextProp,
+              isConcurrentMode,
+            );
           }
           updatePayload = [CHILDREN, '' + nextProp];
         }
@@ -1165,17 +1181,15 @@ export function diffHydratedProperties(
   return updatePayload;
 }
 
-export function diffHydratedText(textNode: Text, text: string): boolean {
+export function diffHydratedText(
+  textNode: Text,
+  text: string,
+  isConcurrentMode: boolean,
+): boolean {
   const isDifferent = textNode.nodeValue !== text;
   return isDifferent;
 }
 
-export function warnForUnmatchedText(textNode: Text, text: string) {
-  if (__DEV__) {
-    warnForTextDifference(textNode.nodeValue, text);
-  }
-}
-
 export function warnForDeletedHydratableElement(
   parentNode: Element | Document,
   child: Element,
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 08cd8cb81c78..4863a16eda68 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -35,7 +35,7 @@ import {
   diffHydratedProperties,
   diffHydratedText,
   trapClickOnNonInteractiveElement,
-  warnForUnmatchedText,
+  checkForUnmatchedText,
   warnForDeletedHydratableElement,
   warnForDeletedHydratableText,
   warnForInsertedHydratedElement,
@@ -71,6 +71,9 @@ import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
 
 import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
+// TODO: Remove this deep import when we delete the legacy root API
+import {ConcurrentMode, NoMode} from 'react-reconciler/src/ReactTypeOfMode';
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -795,12 +798,19 @@ export function hydrateInstance(
   } else {
     parentNamespace = ((hostContext: any): HostContextProd);
   }
+
+  // TODO: Temporary hack to check if we're in a concurrent root. We can delete
+  // when the legacy root API is removed.
+  const isConcurrentMode =
+    ((internalInstanceHandle: Fiber).mode & ConcurrentMode) !== NoMode;
+
   return diffHydratedProperties(
     instance,
     type,
     props,
     parentNamespace,
     rootContainerInstance,
+    isConcurrentMode,
   );
 }
 
@@ -810,7 +820,13 @@ export function hydrateTextInstance(
   internalInstanceHandle: Object,
 ): boolean {
   precacheFiberNode(internalInstanceHandle, textInstance);
-  return diffHydratedText(textInstance, text);
+
+  // TODO: Temporary hack to check if we're in a concurrent root. We can delete
+  // when the legacy root API is removed.
+  const isConcurrentMode =
+    ((internalInstanceHandle: Fiber).mode & ConcurrentMode) !== NoMode;
+
+  return diffHydratedText(textInstance, text, isConcurrentMode);
 }
 
 export function hydrateSuspenseInstance(
@@ -906,10 +922,9 @@ export function didNotMatchHydratedContainerTextInstance(
   parentContainer: Container,
   textInstance: TextInstance,
   text: string,
+  isConcurrentMode: boolean,
 ) {
-  if (__DEV__) {
-    warnForUnmatchedText(textInstance, text);
-  }
+  checkForUnmatchedText(textInstance.nodeValue, text, isConcurrentMode);
 }
 
 export function didNotMatchHydratedTextInstance(
@@ -918,9 +933,10 @@ export function didNotMatchHydratedTextInstance(
   parentInstance: Instance,
   textInstance: TextInstance,
   text: string,
+  isConcurrentMode: boolean,
 ) {
-  if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    warnForUnmatchedText(textInstance, text);
+  if (parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
+    checkForUnmatchedText(textInstance.nodeValue, text, isConcurrentMode);
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 59ed33bb80e7..6905f58e2ab1 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -447,35 +447,38 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   const textInstance: TextInstance = fiber.stateNode;
   const textContent: string = fiber.memoizedProps;
   const shouldUpdate = hydrateTextInstance(textInstance, textContent, fiber);
-  if (__DEV__) {
-    if (shouldUpdate) {
-      // 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: {
-            const parentContainer = returnFiber.stateNode.containerInfo;
-            didNotMatchHydratedContainerTextInstance(
-              parentContainer,
-              textInstance,
-              textContent,
-            );
-            break;
-          }
-          case HostComponent: {
-            const parentType = returnFiber.type;
-            const parentProps = returnFiber.memoizedProps;
-            const parentInstance = returnFiber.stateNode;
-            didNotMatchHydratedTextInstance(
-              parentType,
-              parentProps,
-              parentInstance,
-              textInstance,
-              textContent,
-            );
-            break;
-          }
+  if (shouldUpdate) {
+    // 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) {
+      const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;
+      switch (returnFiber.tag) {
+        case HostRoot: {
+          const parentContainer = returnFiber.stateNode.containerInfo;
+          didNotMatchHydratedContainerTextInstance(
+            parentContainer,
+            textInstance,
+            textContent,
+            // TODO: Delete this argument when we remove the legacy root API.
+            isConcurrentMode,
+          );
+          break;
+        }
+        case HostComponent: {
+          const parentType = returnFiber.type;
+          const parentProps = returnFiber.memoizedProps;
+          const parentInstance = returnFiber.stateNode;
+          didNotMatchHydratedTextInstance(
+            parentType,
+            parentProps,
+            parentInstance,
+            textInstance,
+            textContent,
+            // TODO: Delete this argument when we remove the legacy root API.
+            isConcurrentMode,
+          );
+          break;
         }
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 4ff9011fddc8..b9e88d3a21af 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -447,35 +447,38 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
   const textInstance: TextInstance = fiber.stateNode;
   const textContent: string = fiber.memoizedProps;
   const shouldUpdate = hydrateTextInstance(textInstance, textContent, fiber);
-  if (__DEV__) {
-    if (shouldUpdate) {
-      // 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: {
-            const parentContainer = returnFiber.stateNode.containerInfo;
-            didNotMatchHydratedContainerTextInstance(
-              parentContainer,
-              textInstance,
-              textContent,
-            );
-            break;
-          }
-          case HostComponent: {
-            const parentType = returnFiber.type;
-            const parentProps = returnFiber.memoizedProps;
-            const parentInstance = returnFiber.stateNode;
-            didNotMatchHydratedTextInstance(
-              parentType,
-              parentProps,
-              parentInstance,
-              textInstance,
-              textContent,
-            );
-            break;
-          }
+  if (shouldUpdate) {
+    // 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) {
+      const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;
+      switch (returnFiber.tag) {
+        case HostRoot: {
+          const parentContainer = returnFiber.stateNode.containerInfo;
+          didNotMatchHydratedContainerTextInstance(
+            parentContainer,
+            textInstance,
+            textContent,
+            // TODO: Delete this argument when we remove the legacy root API.
+            isConcurrentMode,
+          );
+          break;
+        }
+        case HostComponent: {
+          const parentType = returnFiber.type;
+          const parentProps = returnFiber.memoizedProps;
+          const parentInstance = returnFiber.stateNode;
+          didNotMatchHydratedTextInstance(
+            parentType,
+            parentProps,
+            parentInstance,
+            textInstance,
+            textContent,
+            // TODO: Delete this argument when we remove the legacy root API.
+            isConcurrentMode,
+          );
+          break;
         }
       }
     }
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 5fe2f861dc5f..4e9bd2f0c997 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -169,6 +169,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate enableUseMutableSource
+  // @gate enableClientRenderFallbackOnHydrationMismatch
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
@@ -204,9 +205,18 @@ describe('useMutableSourceHydration', () => {
         source.value = 'two';
       });
     }).toErrorDev(
-      'Warning: Text content did not match. Server: "only:one" Client: "only:two"',
+      [
+        'Warning: Text content did not match. Server: "only:one" Client: "only:two"',
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
     );
-    expect(Scheduler).toHaveYielded(['only:two']);
+    expect(Scheduler).toHaveYielded([
+      'only:two',
+      'only:two',
+      'Log error: Text content does not match server-rendered HTML.',
+      'Log error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+    ]);
     expect(source.listenerCount).toBe(1);
   });
 
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 9c9de4605f2d..dafa57490349 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -408,5 +408,6 @@
   "420": "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.",
   "421": "There was an error while hydrating this Suspense boundary. Switched to client rendering.",
   "422": "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.",
-  "423": "This root received an early update, before anything was able hydrate. Switched the entire root to client rendering."
+  "423": "This root received an early update, before anything was able hydrate. Switched the entire root to client rendering.",
+  "424": "Text content does not match server-rendered HTML."
 }

From a5b22155c8431c25df728f61869ff1616e51e133 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 24 Feb 2022 01:42:22 -0500
Subject: [PATCH 1163/1603] Warn if renderSubtreeIntoContainer is called
 (#23355)

We already warn for all the other legacy APIs. Forgot to enable
this one.
---
 .../renderSubtreeIntoContainer-test.js        | 69 +++++++++++++------
 packages/react-dom/src/client/ReactDOM.js     | 20 +-----
 .../react-dom/src/client/ReactDOMLegacy.js    |  9 +++
 packages/shared/ReactFeatureFlags.js          |  1 -
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  2 -
 12 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
index 99d1bd92e4a0..f18744a19969 100644
--- a/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
+++ b/packages/react-dom/src/__tests__/renderSubtreeIntoContainer-test.js
@@ -16,8 +16,6 @@ const ReactTestUtils = require('react-dom/test-utils');
 const renderSubtreeIntoContainer = require('react-dom')
   .unstable_renderSubtreeIntoContainer;
 
-const ReactFeatureFlags = require('shared/ReactFeatureFlags');
-
 describe('renderSubtreeIntoContainer', () => {
   it('should pass context when rendering subtree elsewhere', () => {
     const portal = document.createElement('div');
@@ -48,18 +46,13 @@ describe('renderSubtreeIntoContainer', () => {
       }
 
       componentDidMount() {
-        if (ReactFeatureFlags.warnUnstableRenderSubtreeIntoContainer) {
-          expect(
-            function() {
-              renderSubtreeIntoContainer(this, <Component />, portal);
-            }.bind(this),
-          ).toWarnDev(
-            'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated and ' +
-              'will be removed in a future major release. Consider using React Portals instead.',
-          );
-        } else {
-          renderSubtreeIntoContainer(this, <Component />, portal);
-        }
+        expect(
+          function() {
+            renderSubtreeIntoContainer(this, <Component />, portal);
+          }.bind(this),
+        ).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -144,11 +137,19 @@ describe('renderSubtreeIntoContainer', () => {
       }
 
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
 
       componentDidUpdate() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -192,11 +193,19 @@ describe('renderSubtreeIntoContainer', () => {
       }
 
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
 
       componentDidUpdate() {
-        renderSubtreeIntoContainer(this, <Component />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Component />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -217,7 +226,11 @@ describe('renderSubtreeIntoContainer', () => {
       }
 
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <div>hello</div>, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <div>hello</div>, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -247,7 +260,11 @@ describe('renderSubtreeIntoContainer', () => {
         return null;
       }
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Child />, portal);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Child />, portal);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
@@ -278,7 +295,11 @@ describe('renderSubtreeIntoContainer', () => {
         return {value: this.props.value};
       }
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Middle />, portal1);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Middle />, portal1);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
       static childContextTypes = {
         value: PropTypes.string.isRequired,
@@ -290,7 +311,11 @@ describe('renderSubtreeIntoContainer', () => {
         return null;
       }
       componentDidMount() {
-        renderSubtreeIntoContainer(this, <Child />, portal2);
+        expect(() => {
+          renderSubtreeIntoContainer(this, <Child />, portal2);
+        }).toErrorDev(
+          'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported',
+        );
       }
     }
 
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 87ba7bf36101..c3f9e3fcb47e 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -39,10 +39,7 @@ import {
 import {createPortal as createPortalImpl} from 'react-reconciler/src/ReactPortal';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
-import {
-  warnUnstableRenderSubtreeIntoContainer,
-  enableNewReconciler,
-} from 'shared/ReactFeatureFlags';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
 import {
   getInstanceFromNode,
@@ -73,8 +70,6 @@ setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
 setGetCurrentUpdatePriority(getCurrentUpdatePriority);
 setAttemptHydrationAtPriority(runWithPriority);
 
-let didWarnAboutUnstableRenderSubtreeIntoContainer = false;
-
 if (__DEV__) {
   if (
     typeof Map !== 'function' ||
@@ -121,19 +116,6 @@ function renderSubtreeIntoContainer(
   containerNode: Container,
   callback: ?Function,
 ) {
-  if (__DEV__) {
-    if (
-      warnUnstableRenderSubtreeIntoContainer &&
-      !didWarnAboutUnstableRenderSubtreeIntoContainer
-    ) {
-      didWarnAboutUnstableRenderSubtreeIntoContainer = true;
-      console.warn(
-        'ReactDOM.unstable_renderSubtreeIntoContainer() is deprecated ' +
-          'and will be removed in a future major release. Consider using ' +
-          'React Portals instead.',
-      );
-    }
-  }
   return unstable_renderSubtreeIntoContainer(
     parentComponent,
     element,
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 340e151bf893..1c53b5620b67 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -316,6 +316,15 @@ export function unstable_renderSubtreeIntoContainer(
   containerNode: Container,
   callback: ?Function,
 ) {
+  if (__DEV__) {
+    console.error(
+      'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported ' +
+        'in React 18. Consider using a portal instead. Until you switch to ' +
+        "the createRoot API, your app will behave as if it's running React " +
+        '17. Learn more: https://reactjs.org/link/switch-to-createroot',
+    );
+  }
+
   if (!isValidContainerLegacy(containerNode)) {
     throw new Error('Target container is not a DOM element.');
   }
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 540a9d03ccbc..ba8a3bd437cc 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -19,7 +19,6 @@ export const warnAboutDeprecatedLifecycles = true;
 export const enableLazyElements = true;
 export const enableComponentStackLocations = true;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const enablePersistentOffscreenHostContainer = false;
 
 // -----------------------------------------------------------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 2e7ed5b2528a..5bf0f37db9eb 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -47,7 +47,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 1a64e8c7aa07..5c97146a82b2 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index e4f3393fe838..b44bc97206d0 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 7169629762f1..4b8c1b774179 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index ec04b6be37a0..b6f620e2fb70 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = false;
 export const disableModulePatternComponents = true;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index dfe9625873e8..dbfc8fb70453 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = false;
 export const disableModulePatternComponents = false;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index a9ef92b69a44..95fa25cf592c 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -38,7 +38,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enableTrustedTypesIntegration = false;
 export const disableTextareaChildren = __EXPERIMENTAL__;
 export const disableModulePatternComponents = true;
-export const warnUnstableRenderSubtreeIntoContainer = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 381fa5532eda..ac50fe4fd9f3 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -88,8 +88,6 @@ export const enableComponentStackLocations = true;
 
 export const disableTextareaChildren = __EXPERIMENTAL__;
 
-export const warnUnstableRenderSubtreeIntoContainer = false;
-
 // Enable forked reconciler. Piggy-backing on the "variant" global so that we
 // don't have to add another test dimension. The build system will compile this
 // to the correct value.

From 8c4cd65cfaa4614bac7fd7783b4ec502a337eba3 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 24 Feb 2022 10:57:37 -0500
Subject: [PATCH 1164/1603] Add warnings for common root API mistakes (#23356)

For createRoot, a common mistake is to pass JSX as the second argument,
instead of calling root.render.

For hydrateRoot, a common mistake is to forget to pass children as
the second argument.

The type system will enforce correct usage, but since not everyone uses
types we'll log a helpful warning, too.
---
 .../src/__tests__/ReactDOMRoot-test.js        | 23 ++++++++++++++++++
 packages/react-dom/src/client/ReactDOMRoot.js | 24 +++++++++++++++++++
 2 files changed, 47 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 40c966683503..c673423f2b5e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -420,4 +420,27 @@ describe('ReactDOMRoot', () => {
     // Still works in the legacy API
     ReactDOM.render(<div />, commentNode);
   });
+
+  it('warn if no children passed to hydrateRoot', async () => {
+    expect(() =>
+      ReactDOM.hydrateRoot(container),
+    ).toErrorDev(
+      'Must provide initial children as second argument to hydrateRoot.',
+      {withoutStack: true},
+    );
+  });
+
+  it('warn if JSX passed to createRoot', async () => {
+    function App() {
+      return 'Child';
+    }
+
+    expect(() => ReactDOM.createRoot(container, <App />)).toErrorDev(
+      'You passed a JSX element to createRoot. You probably meant to call ' +
+        'root.render instead',
+      {
+        withoutStack: true,
+      },
+    );
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 9665cf07f97e..46786fcdeadf 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -15,6 +15,7 @@ import type {
 } from 'react-reconciler/src/ReactInternalTypes';
 
 import {queueExplicitHydrationTarget} from '../events/ReactDOMEventReplaying';
+import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
 export type RootType = {
   render(children: ReactNodeList): void,
@@ -174,6 +175,20 @@ export function createRoot(
         console.warn(
           'hydrate through createRoot is deprecated. Use ReactDOM.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) {
@@ -237,6 +252,15 @@ export function hydrateRoot(
 
   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;

From 68cb55f262b75f5d5b723104b830daab37b1ea14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 24 Feb 2022 16:31:48 -0500
Subject: [PATCH 1165/1603] Add more warnings for second argument to
 root.render. (#23358)

We already had one for callbacks but containers is also an easy mistake.
---
 .../src/__tests__/ReactDOMRoot-test.js        | 31 +++++++++++++++++++
 packages/react-dom/src/client/ReactDOMRoot.js | 11 +++++++
 2 files changed, 42 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index c673423f2b5e..b39e554e49bc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -51,6 +51,37 @@ describe('ReactDOMRoot', () => {
     expect(callback).not.toHaveBeenCalled();
   });
 
+  it('warn if a container is passed to root.render(...)', async () => {
+    function App() {
+      return 'Child';
+    }
+
+    const root = ReactDOM.createRoot(container);
+    expect(() => root.render(<App />, {})).toErrorDev(
+      '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 = ReactDOM.createRoot(container);
+    expect(() => root.render(<App />, container)).toErrorDev(
+      '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', () => {
     const callback = jest.fn();
     const root = ReactDOM.createRoot(container);
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 46786fcdeadf..57bbe7ab96d6 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -104,7 +104,18 @@ ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = functio
         'render(...): 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(arguments[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 arguments[1] !== 'undefined') {
+      console.error(
+        'You passed a second argument to root.render(...) but it only accepts ' +
+          'one argument.',
+      );
     }
+
     const container = root.containerInfo;
 
     if (container.nodeType !== COMMENT_NODE) {

From 42f15b324f50d0fd98322c21646ac3013e30344a Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 24 Feb 2022 17:28:18 -0500
Subject: [PATCH 1166/1603] [DevTools][Transition Tracing] onTransitionComplete
 and onTransitionStart implmentation (#23313)

* add transition name to startTransition

Add a transitionName to start transition, store the transition start time and name in the batch config, and pass it to the root on render

* Transition Tracing Types and Consts

* Root begin work

The root operates as a tracing marker that has all transitions on it. This PR only tested the root with one transition so far

- Store transitions in memoizedState. Do this in updateHostRoot AND attemptEarlyBailoutIfNoScheduledUpdate. We need to do this in the latter part because even if the root itself doesn't have an update, it could still have new transitions in its transitionLanes map that we need to process.

* Transition Tracing commit phase

- adds a module scoped pending transition callbacks object that contains all transition callbacks that have not yet been processed. This  contains all callbacks before the next paint occurs.
- Add code in the mutation phase to:
        * For the root, if there are transitions that were initialized during this commit in the root transition lanes map, add a transition start call to the pending transition callbacks object. Then, remove the transitions from the root transition lanes map.
        * For roots, in the commit phase, add a transition complete call

We add this code in the mutation phase because we can't add it to the passive phase because then the paint might have occurred before we even know which callbacks to call

* Process Callbacks after paint

At the end of the commit phase, call scheduleTransitionCallbacks to schedule all pending transition callbacks to be called after paint. Then clear the callbacks
---
 .../react-debug-tools/src/ReactDebugHooks.js  |   6 +-
 .../src/ReactFiberBeginWork.new.js            |  10 +-
 .../src/ReactFiberBeginWork.old.js            |  10 +-
 .../src/ReactFiberCommitWork.new.js           |  50 +++++++--
 .../src/ReactFiberCommitWork.old.js           |  50 +++++++--
 .../src/ReactFiberCompleteWork.new.js         |  11 +-
 .../src/ReactFiberCompleteWork.old.js         |  11 +-
 .../src/ReactFiberHooks.new.js                |  28 ++++-
 .../src/ReactFiberHooks.old.js                |  28 ++++-
 .../src/ReactFiberLane.new.js                 |  77 +++++++++++++
 .../src/ReactFiberLane.old.js                 |  77 +++++++++++++
 .../src/ReactFiberRoot.new.js                 |  19 +++-
 .../src/ReactFiberRoot.old.js                 |  19 +++-
 .../ReactFiberTracingMarkerComponent.new.js   |  64 +++++++++++
 .../ReactFiberTracingMarkerComponent.old.js   |  77 +++++++++++++
 .../src/ReactFiberWorkLoop.new.js             |  93 ++++++++++++++++
 .../src/ReactFiberWorkLoop.old.js             |  93 ++++++++++++++++
 .../src/ReactInternalTypes.js                 |   8 +-
 .../__tests__/ReactTransitionTracing-test.js  | 101 ++++++++++++++++++
 packages/react-server/src/ReactFizzHooks.js   |   6 +-
 packages/react/src/ReactCurrentBatchConfig.js |   4 +-
 packages/react/src/ReactHooks.js              |   6 +-
 packages/react/src/ReactStartTransition.js    |  15 ++-
 packages/shared/ReactTypes.js                 |   4 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 25 files changed, 831 insertions(+), 37 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
 create mode 100644 packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 0ffec00bd3f8..b7159859060e 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -13,6 +13,7 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
   ReactProviderType,
+  StartTransitionOptions,
 } from 'shared/ReactTypes';
 import type {
   Fiber,
@@ -291,7 +292,10 @@ function useSyncExternalStore<T>(
   return value;
 }
 
-function useTransition(): [boolean, (() => void) => void] {
+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.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 9b8de1df8018..4435fef43893 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -226,6 +226,7 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
+  getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.new';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {
@@ -1336,6 +1337,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     }
   }
 
+  if (enableTransitionTracing) {
+    workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+  }
+
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
@@ -3495,12 +3500,15 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
   switch (workInProgress.tag) {
     case HostRoot:
       pushHostRootContext(workInProgress);
+      const root: FiberRoot = workInProgress.stateNode;
       if (enableCache) {
-        const root: FiberRoot = workInProgress.stateNode;
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
         pushRootCachePool(root);
       }
+      if (enableTransitionTracing) {
+        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+      }
       resetHydrationState();
       break;
     case HostComponent:
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 457088598e51..b037863aa40d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -226,6 +226,7 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
+  getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {
@@ -1336,6 +1337,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     }
   }
 
+  if (enableTransitionTracing) {
+    workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+  }
+
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
@@ -3495,12 +3500,15 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
   switch (workInProgress.tag) {
     case HostRoot:
       pushHostRootContext(workInProgress);
+      const root: FiberRoot = workInProgress.stateNode;
       if (enableCache) {
-        const root: FiberRoot = workInProgress.stateNode;
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
         pushRootCachePool(root);
       }
+      if (enableTransitionTracing) {
+        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
+      }
       resetHydrationState();
       break;
     case HostComponent:
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 5ff683009668..75553555b928 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -40,6 +40,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   enableCache,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -132,6 +133,8 @@ import {
   markCommitTimeOfFallback,
   enqueuePendingPassiveProfilerEffect,
   restorePendingUpdaters,
+  addTransitionStartCallbackToPendingTransition,
+  addTransitionCompleteCallbackToPendingTransition,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -156,6 +159,7 @@ import {
   onCommitUnmount,
 } from './ReactFiberDevToolsHook.new';
 import {releaseCache, retainCache} from './ReactFiberCacheComponent.new';
+import {clearTransitionsForLanes} from './ReactFiberLane.new';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -983,8 +987,10 @@ function commitLayoutEffectOnFiber(
       case IncompleteClassComponent:
       case ScopeComponent:
       case OffscreenComponent:
-      case LegacyHiddenComponent:
+      case LegacyHiddenComponent: {
         break;
+      }
+
       default:
         throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
@@ -2137,13 +2143,13 @@ export function commitMutationEffects(
   inProgressRoot = root;
   nextEffect = firstChild;
 
-  commitMutationEffects_begin(root);
+  commitMutationEffects_begin(root, committedLanes);
 
   inProgressLanes = null;
   inProgressRoot = null;
 }
 
-function commitMutationEffects_begin(root: FiberRoot) {
+function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
@@ -2166,17 +2172,17 @@ function commitMutationEffects_begin(root: FiberRoot) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
-      commitMutationEffects_complete(root);
+      commitMutationEffects_complete(root, lanes);
     }
   }
 }
 
-function commitMutationEffects_complete(root: FiberRoot) {
+function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     setCurrentDebugFiberInDEV(fiber);
     try {
-      commitMutationEffectsOnFiber(fiber, root);
+      commitMutationEffectsOnFiber(fiber, root, lanes);
     } catch (error) {
       reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
@@ -2194,13 +2200,43 @@ function commitMutationEffects_complete(root: FiberRoot) {
   }
 }
 
-function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
+function commitMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  lanes: Lanes,
+) {
   // TODO: The factoring of this phase could probably be improved. Consider
   // switching on the type of work before checking the flags. That's what
   // we do in all the other phases. I think this one is only different
   // because of the shared reconciliation logic below.
   const flags = finishedWork.flags;
 
+  if (enableTransitionTracing) {
+    switch (finishedWork.tag) {
+      case HostRoot: {
+        const state = finishedWork.memoizedState;
+        const transitions = state.transitions;
+        if (transitions !== null) {
+          transitions.forEach(transition => {
+            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
+            addTransitionStartCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+
+            addTransitionCompleteCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+          });
+
+          clearTransitionsForLanes(root, lanes);
+          state.transitions = null;
+        }
+      }
+    }
+  }
+
   if (flags & ContentReset) {
     commitResetTextContent(finishedWork);
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 769974e048d5..23e9d6070c9a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -40,6 +40,7 @@ import {
   enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   enableCache,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -132,6 +133,8 @@ import {
   markCommitTimeOfFallback,
   enqueuePendingPassiveProfilerEffect,
   restorePendingUpdaters,
+  addTransitionStartCallbackToPendingTransition,
+  addTransitionCompleteCallbackToPendingTransition,
 } from './ReactFiberWorkLoop.old';
 import {
   NoFlags as NoHookEffect,
@@ -156,6 +159,7 @@ import {
   onCommitUnmount,
 } from './ReactFiberDevToolsHook.old';
 import {releaseCache, retainCache} from './ReactFiberCacheComponent.old';
+import {clearTransitionsForLanes} from './ReactFiberLane.old';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -983,8 +987,10 @@ function commitLayoutEffectOnFiber(
       case IncompleteClassComponent:
       case ScopeComponent:
       case OffscreenComponent:
-      case LegacyHiddenComponent:
+      case LegacyHiddenComponent: {
         break;
+      }
+
       default:
         throw new Error(
           'This unit of work tag should not have side-effects. This error is ' +
@@ -2137,13 +2143,13 @@ export function commitMutationEffects(
   inProgressRoot = root;
   nextEffect = firstChild;
 
-  commitMutationEffects_begin(root);
+  commitMutationEffects_begin(root, committedLanes);
 
   inProgressLanes = null;
   inProgressRoot = null;
 }
 
-function commitMutationEffects_begin(root: FiberRoot) {
+function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
@@ -2166,17 +2172,17 @@ function commitMutationEffects_begin(root: FiberRoot) {
       ensureCorrectReturnPointer(child, fiber);
       nextEffect = child;
     } else {
-      commitMutationEffects_complete(root);
+      commitMutationEffects_complete(root, lanes);
     }
   }
 }
 
-function commitMutationEffects_complete(root: FiberRoot) {
+function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     setCurrentDebugFiberInDEV(fiber);
     try {
-      commitMutationEffectsOnFiber(fiber, root);
+      commitMutationEffectsOnFiber(fiber, root, lanes);
     } catch (error) {
       reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
@@ -2194,13 +2200,43 @@ function commitMutationEffects_complete(root: FiberRoot) {
   }
 }
 
-function commitMutationEffectsOnFiber(finishedWork: Fiber, root: FiberRoot) {
+function commitMutationEffectsOnFiber(
+  finishedWork: Fiber,
+  root: FiberRoot,
+  lanes: Lanes,
+) {
   // TODO: The factoring of this phase could probably be improved. Consider
   // switching on the type of work before checking the flags. That's what
   // we do in all the other phases. I think this one is only different
   // because of the shared reconciliation logic below.
   const flags = finishedWork.flags;
 
+  if (enableTransitionTracing) {
+    switch (finishedWork.tag) {
+      case HostRoot: {
+        const state = finishedWork.memoizedState;
+        const transitions = state.transitions;
+        if (transitions !== null) {
+          transitions.forEach(transition => {
+            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
+            addTransitionStartCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+
+            addTransitionCompleteCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+          });
+
+          clearTransitionsForLanes(root, lanes);
+          state.transitions = null;
+        }
+      }
+    }
+  }
+
   if (flags & ContentReset) {
     commitResetTextContent(finishedWork);
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index bb01e2b8a2a2..50ab1d3d9672 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -62,6 +62,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
@@ -141,6 +142,7 @@ import {
   enableCache,
   enableSuspenseLayoutEffectSemantics,
   enablePersistentOffscreenHostContainer,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   renderDidSuspend,
@@ -1570,8 +1572,15 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
         bubbleProperties(workInProgress);
-        return null;
       }
+      return null;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // Bubble subtree flags before so we can set the flag property
+        bubbleProperties(workInProgress);
+      }
+      return null;
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 0d9de679a0f4..81a51eaff8eb 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -62,6 +62,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {NoMode, ConcurrentMode, ProfileMode} from './ReactTypeOfMode';
 import {
@@ -141,6 +142,7 @@ import {
   enableCache,
   enableSuspenseLayoutEffectSemantics,
   enablePersistentOffscreenHostContainer,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   renderDidSuspend,
@@ -1570,8 +1572,15 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
         bubbleProperties(workInProgress);
-        return null;
       }
+      return null;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // Bubble subtree flags before so we can set the flag property
+        bubbleProperties(workInProgress);
+      }
+      return null;
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 31e716935bc3..3f64a7d8f917 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -12,6 +12,7 @@ import type {
   MutableSourceGetSnapshotFn,
   MutableSourceSubscribeFn,
   ReactContext,
+  StartTransitionOptions,
 } from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
@@ -31,6 +32,7 @@ import {
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
   enableUseMutableSource,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -110,6 +112,7 @@ import {
 } from './ReactUpdateQueue.new';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
 import {getTreeId} from './ReactFiberTreeContext.new';
+import {now} from './Scheduler';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1967,7 +1970,7 @@ function rerenderDeferredValue<T>(value: T): T {
   return prevValue;
 }
 
-function startTransition(setPending, callback) {
+function startTransition(setPending, callback, options) {
   const previousPriority = getCurrentUpdatePriority();
   setCurrentUpdatePriority(
     higherEventPriority(previousPriority, ContinuousEventPriority),
@@ -1979,6 +1982,13 @@ function startTransition(setPending, callback) {
   ReactCurrentBatchConfig.transition = {};
   const currentTransition = ReactCurrentBatchConfig.transition;
 
+  if (enableTransitionTracing) {
+    if (options !== undefined && options.name !== undefined) {
+      ReactCurrentBatchConfig.transition.name = options.name;
+      ReactCurrentBatchConfig.transition.startTime = now();
+    }
+  }
+
   if (__DEV__) {
     ReactCurrentBatchConfig.transition._updatedFibers = new Set();
   }
@@ -1990,6 +2000,7 @@ function startTransition(setPending, callback) {
     setCurrentUpdatePriority(previousPriority);
 
     ReactCurrentBatchConfig.transition = prevTransition;
+
     if (__DEV__) {
       if (prevTransition === null && currentTransition._updatedFibers) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
@@ -2006,7 +2017,10 @@ function startTransition(setPending, callback) {
   }
 }
 
-function mountTransition(): [boolean, (() => void) => void] {
+function mountTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   const [isPending, setPending] = mountState(false);
   // The `start` method never changes.
   const start = startTransition.bind(null, setPending);
@@ -2015,14 +2029,20 @@ function mountTransition(): [boolean, (() => void) => void] {
   return [isPending, start];
 }
 
-function updateTransition(): [boolean, (() => void) => void] {
+function updateTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   const [isPending] = updateState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
   return [isPending, start];
 }
 
-function rerenderTransition(): [boolean, (() => void) => void] {
+function rerenderTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   const [isPending] = rerenderState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index bd9e2488a884..d55cac9b26c7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -12,6 +12,7 @@ import type {
   MutableSourceGetSnapshotFn,
   MutableSourceSubscribeFn,
   ReactContext,
+  StartTransitionOptions,
 } from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
@@ -31,6 +32,7 @@ import {
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
   enableUseMutableSource,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -110,6 +112,7 @@ import {
 } from './ReactUpdateQueue.old';
 import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
 import {getTreeId} from './ReactFiberTreeContext.old';
+import {now} from './Scheduler';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1967,7 +1970,7 @@ function rerenderDeferredValue<T>(value: T): T {
   return prevValue;
 }
 
-function startTransition(setPending, callback) {
+function startTransition(setPending, callback, options) {
   const previousPriority = getCurrentUpdatePriority();
   setCurrentUpdatePriority(
     higherEventPriority(previousPriority, ContinuousEventPriority),
@@ -1979,6 +1982,13 @@ function startTransition(setPending, callback) {
   ReactCurrentBatchConfig.transition = {};
   const currentTransition = ReactCurrentBatchConfig.transition;
 
+  if (enableTransitionTracing) {
+    if (options !== undefined && options.name !== undefined) {
+      ReactCurrentBatchConfig.transition.name = options.name;
+      ReactCurrentBatchConfig.transition.startTime = now();
+    }
+  }
+
   if (__DEV__) {
     ReactCurrentBatchConfig.transition._updatedFibers = new Set();
   }
@@ -1990,6 +2000,7 @@ function startTransition(setPending, callback) {
     setCurrentUpdatePriority(previousPriority);
 
     ReactCurrentBatchConfig.transition = prevTransition;
+
     if (__DEV__) {
       if (prevTransition === null && currentTransition._updatedFibers) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
@@ -2006,7 +2017,10 @@ function startTransition(setPending, callback) {
   }
 }
 
-function mountTransition(): [boolean, (() => void) => void] {
+function mountTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   const [isPending, setPending] = mountState(false);
   // The `start` method never changes.
   const start = startTransition.bind(null, setPending);
@@ -2015,14 +2029,20 @@ function mountTransition(): [boolean, (() => void) => void] {
   return [isPending, start];
 }
 
-function updateTransition(): [boolean, (() => void) => void] {
+function updateTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   const [isPending] = updateState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
   return [isPending, start];
 }
 
-function rerenderTransition(): [boolean, (() => void) => void] {
+function rerenderTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   const [isPending] = rerenderState(false);
   const hook = updateWorkInProgressHook();
   const start = hook.memoizedState;
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 452107c907b6..597f99633199 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -8,6 +8,10 @@
  */
 
 import type {FiberRoot} from './ReactInternalTypes';
+import type {
+  Transition,
+  Transitions,
+} from './ReactFiberTracingMarkerComponent.new';
 
 // 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.
@@ -20,6 +24,7 @@ import {
   enableSchedulingProfiler,
   enableUpdaterTracking,
   allowConcurrentByDefault,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
@@ -796,3 +801,75 @@ export function movePendingFibersToMemoized(root: FiberRoot, lanes: Lanes) {
     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 = [];
+    }
+    transitions.push(transition);
+
+    transitionLanesMap[index] = transitions;
+  }
+}
+
+export function getTransitionsForLanes(
+  root: FiberRoot,
+  lanes: Lane | Lanes,
+): Transitions | 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;
+    } else {
+      if (__DEV__) {
+        console.error(
+          'React Bug: transition lanes accessed out of bounds index: %s',
+          index.toString(),
+        );
+      }
+    }
+
+    lanes &= ~lane;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 8360d2630dac..9f366c9ade88 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -8,6 +8,10 @@
  */
 
 import type {FiberRoot} from './ReactInternalTypes';
+import type {
+  Transition,
+  Transitions,
+} from './ReactFiberTracingMarkerComponent.old';
 
 // 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.
@@ -20,6 +24,7 @@ import {
   enableSchedulingProfiler,
   enableUpdaterTracking,
   allowConcurrentByDefault,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
 import {ConcurrentUpdatesByDefaultMode, NoMode} from './ReactTypeOfMode';
@@ -796,3 +801,75 @@ export function movePendingFibersToMemoized(root: FiberRoot, lanes: Lanes) {
     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 = [];
+    }
+    transitions.push(transition);
+
+    transitionLanesMap[index] = transitions;
+  }
+}
+
+export function getTransitionsForLanes(
+  root: FiberRoot,
+  lanes: Lane | Lanes,
+): Transitions | 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;
+    } else {
+      if (__DEV__) {
+        console.error(
+          'React Bug: transition lanes accessed out of bounds index: %s',
+          index.toString(),
+        );
+      }
+    }
+
+    lanes &= ~lane;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 3a4546008ad5..00dd694be4f5 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -13,6 +13,8 @@ import type {
   TransitionTracingCallbacks,
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
+import type {Cache} from './ReactFiberCacheComponent.new';
+import type {Transitions} from './ReactFiberTracingMarkerComponent.new';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
@@ -35,6 +37,12 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
+export type RootState = {
+  element: any,
+  cache: Cache | null,
+  transitions: Transitions | null,
+};
+
 function FiberRootNode(
   containerInfo,
   tag,
@@ -85,6 +93,10 @@ function FiberRootNode(
 
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
+    const transitionLanesMap = (this.transitionLanes = []);
+    for (let i = 0; i < TotalLanes; i++) {
+      transitionLanesMap.push(null);
+    }
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -165,14 +177,17 @@ export function createFiberRoot(
     // retained separately.
     root.pooledCache = initialCache;
     retainCache(initialCache);
-    const initialState = {
+    const initialState: RootState = {
       element: null,
       cache: initialCache,
+      transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
-    const initialState = {
+    const initialState: RootState = {
       element: null,
+      cache: null,
+      transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 56ebcd5cccac..1e561e49facb 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -13,6 +13,8 @@ import type {
   TransitionTracingCallbacks,
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
+import type {Cache} from './ReactFiberCacheComponent.old';
+import type {Transitions} from './ReactFiberTracingMarkerComponent.old';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
@@ -35,6 +37,12 @@ import {initializeUpdateQueue} from './ReactUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
+export type RootState = {
+  element: any,
+  cache: Cache | null,
+  transitions: Transitions | null,
+};
+
 function FiberRootNode(
   containerInfo,
   tag,
@@ -85,6 +93,10 @@ function FiberRootNode(
 
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
+    const transitionLanesMap = (this.transitionLanes = []);
+    for (let i = 0; i < TotalLanes; i++) {
+      transitionLanesMap.push(null);
+    }
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -165,14 +177,17 @@ export function createFiberRoot(
     // retained separately.
     root.pooledCache = initialCache;
     retainCache(initialCache);
-    const initialState = {
+    const initialState: RootState = {
       element: null,
       cache: initialCache,
+      transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
-    const initialState = {
+    const initialState: RootState = {
       element: null,
+      cache: null,
+      transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 15349ce2d68d..aad0c912c531 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -6,8 +6,72 @@
  *
  * @flow
  */
+
+import type {TransitionTracingCallbacks} from './ReactInternalTypes';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
+
+export type SuspenseInfo = {name: string | null};
+
+export type TransitionObject = {
+  transitionName: string,
+  startTime: number,
+};
+
+export type PendingTransitionCallbacks = {
+  transitionStart: Array<TransitionObject> | null,
+  transitionComplete: Array<TransitionObject> | null,
+};
 
 export type Transition = {
+  name: string,
+  startTime: number,
+};
+
+export type BatchConfigTransition = {
+  name?: string,
+  startTime?: number,
   _updatedFibers?: Set<Fiber>,
 };
+
+export type Transitions = Array<Transition> | null;
+
+export type TransitionCallback = 0 | 1;
+
+export const TransitionStart = 0;
+export const TransitionComplete = 1;
+
+export function processTransitionCallbacks(
+  pendingTransitions: PendingTransitionCallbacks,
+  endTime: number,
+  callbacks: TransitionTracingCallbacks,
+): void {
+  if (enableTransitionTracing) {
+    if (pendingTransitions !== null) {
+      const transitionStart = pendingTransitions.transitionStart;
+      if (transitionStart !== null) {
+        transitionStart.forEach(transition => {
+          if (callbacks.onTransitionStart != null) {
+            callbacks.onTransitionStart(
+              transition.transitionName,
+              transition.startTime,
+            );
+          }
+        });
+      }
+
+      const transitionComplete = pendingTransitions.transitionComplete;
+      if (transitionComplete !== null) {
+        transitionComplete.forEach(transition => {
+          if (callbacks.onTransitionComplete != null) {
+            callbacks.onTransitionComplete(
+              transition.transitionName,
+              transition.startTime,
+              endTime,
+            );
+          }
+        });
+      }
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
new file mode 100644
index 000000000000..aad0c912c531
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {TransitionTracingCallbacks} from './ReactInternalTypes';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
+
+export type SuspenseInfo = {name: string | null};
+
+export type TransitionObject = {
+  transitionName: string,
+  startTime: number,
+};
+
+export type PendingTransitionCallbacks = {
+  transitionStart: Array<TransitionObject> | null,
+  transitionComplete: Array<TransitionObject> | null,
+};
+
+export type Transition = {
+  name: string,
+  startTime: number,
+};
+
+export type BatchConfigTransition = {
+  name?: string,
+  startTime?: number,
+  _updatedFibers?: Set<Fiber>,
+};
+
+export type Transitions = Array<Transition> | null;
+
+export type TransitionCallback = 0 | 1;
+
+export const TransitionStart = 0;
+export const TransitionComplete = 1;
+
+export function processTransitionCallbacks(
+  pendingTransitions: PendingTransitionCallbacks,
+  endTime: number,
+  callbacks: TransitionTracingCallbacks,
+): void {
+  if (enableTransitionTracing) {
+    if (pendingTransitions !== null) {
+      const transitionStart = pendingTransitions.transitionStart;
+      if (transitionStart !== null) {
+        transitionStart.forEach(transition => {
+          if (callbacks.onTransitionStart != null) {
+            callbacks.onTransitionStart(
+              transition.transitionName,
+              transition.startTime,
+            );
+          }
+        });
+      }
+
+      const transitionComplete = pendingTransitions.transitionComplete;
+      if (transitionComplete !== null) {
+        transitionComplete.forEach(transition => {
+          if (callbacks.onTransitionComplete != null) {
+            callbacks.onTransitionComplete(
+              transition.transitionName,
+              transition.startTime,
+              endTime,
+            );
+          }
+        });
+      }
+    }
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 71bce2613251..a529454dcd37 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -15,6 +15,11 @@ import type {StackCursor} from './ReactFiberStack.new';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {EventPriority} from './ReactEventPriorities.new';
+import type {
+  PendingTransitionCallbacks,
+  TransitionObject,
+  Transitions,
+} from './ReactFiberTracingMarkerComponent.new';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -32,6 +37,7 @@ import {
   enableStrictEffects,
   enableUpdaterTracking,
   enableCache,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import is from 'shared/objectIs';
@@ -138,6 +144,8 @@ import {
   getHighestPriorityLane,
   addFiberToLanesMap,
   movePendingFibersToMemoized,
+  addTransitionToLanesMap,
+  getTransitionsForLanes,
 } from './ReactFiberLane.new';
 import {
   DiscreteEventPriority,
@@ -231,6 +239,7 @@ import {
   isLegacyActEnvironment,
   isConcurrentActEnvironment,
 } from './ReactFiberAct.new';
+import {processTransitionCallbacks} from './ReactFiberTracingMarkerComponent.new';
 
 const ceil = Math.ceil;
 
@@ -313,6 +322,51 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 // suspense heuristics and opt out of rendering more content.
 const RENDER_TIMEOUT_MS = 500;
 
+let workInProgressTransitions: Transitions | null = null;
+export function getWorkInProgressTransitions() {
+  return workInProgressTransitions;
+}
+
+let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
+
+export function addTransitionStartCallbackToPendingTransition(
+  transition: TransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: [],
+        transitionComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionStart === null) {
+      currentPendingTransitionCallbacks.transitionStart = [];
+    }
+
+    currentPendingTransitionCallbacks.transitionStart.push(transition);
+  }
+}
+
+export function addTransitionCompleteCallbackToPendingTransition(
+  transition: TransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionComplete: [],
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionComplete === null) {
+      currentPendingTransitionCallbacks.transitionComplete = [];
+    }
+
+    currentPendingTransitionCallbacks.transitionComplete.push(transition);
+  }
+}
+
 function resetRenderTimer() {
   workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS;
 }
@@ -515,6 +569,17 @@ export function scheduleUpdateOnFiber(
       }
     }
 
+    if (enableTransitionTracing) {
+      const transition = ReactCurrentBatchConfig.transition;
+      if (transition !== null) {
+        if (transition.startTime === -1) {
+          transition.startTime = now();
+        }
+
+        addTransitionToLanesMap(root, transition, lane);
+      }
+    }
+
     if (root.isDehydrated && root.tag !== LegacyRoot) {
       // This root's shell hasn't hydrated yet. Revert to client rendering.
       if (workInProgressRoot === root) {
@@ -1244,6 +1309,7 @@ export function getExecutionContext(): ExecutionContext {
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
+
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DefaultEventPriority);
@@ -1318,6 +1384,7 @@ export function flushSync(fn) {
 
   const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
+
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
@@ -1329,6 +1396,7 @@ export function flushSync(fn) {
   } finally {
     setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
+
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1617,6 +1685,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
       }
     }
 
+    workInProgressTransitions = getTransitionsForLanes(root, lanes);
     prepareFreshStack(root, lanes);
   }
 
@@ -1701,6 +1770,7 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       }
     }
 
+    workInProgressTransitions = getTransitionsForLanes(root, lanes);
     resetRenderTimer();
     prepareFreshStack(root, lanes);
   }
@@ -1896,6 +1966,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
+
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
@@ -2237,6 +2308,27 @@ function commitRootImpl(
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
+  if (enableTransitionTracing) {
+    const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
+    const prevRootTransitionCallbacks = root.transitionCallbacks;
+    if (
+      prevPendingTransitionCallbacks !== null &&
+      prevRootTransitionCallbacks !== null
+    ) {
+      // TODO(luna) Refactor this code into the Host Config
+      const endTime = now();
+      currentPendingTransitionCallbacks = null;
+
+      scheduleCallback(IdleSchedulerPriority, () =>
+        processTransitionCallbacks(
+          prevPendingTransitionCallbacks,
+          endTime,
+          prevRootTransitionCallbacks,
+        ),
+      );
+    }
+  }
+
   if (__DEV__) {
     if (enableDebugTracing) {
       logCommitStopped();
@@ -2286,6 +2378,7 @@ export function flushPassiveEffects(): boolean {
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
+
     try {
       ReactCurrentBatchConfig.transition = null;
       setCurrentUpdatePriority(priority);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 7a0247199361..86ad6216d128 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -15,6 +15,11 @@ import type {StackCursor} from './ReactFiberStack.old';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {EventPriority} from './ReactEventPriorities.old';
+import type {
+  PendingTransitionCallbacks,
+  TransitionObject,
+  Transitions,
+} from './ReactFiberTracingMarkerComponent.old';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -32,6 +37,7 @@ import {
   enableStrictEffects,
   enableUpdaterTracking,
   enableCache,
+  enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import is from 'shared/objectIs';
@@ -138,6 +144,8 @@ import {
   getHighestPriorityLane,
   addFiberToLanesMap,
   movePendingFibersToMemoized,
+  addTransitionToLanesMap,
+  getTransitionsForLanes,
 } from './ReactFiberLane.old';
 import {
   DiscreteEventPriority,
@@ -231,6 +239,7 @@ import {
   isLegacyActEnvironment,
   isConcurrentActEnvironment,
 } from './ReactFiberAct.old';
+import {processTransitionCallbacks} from './ReactFiberTracingMarkerComponent.old';
 
 const ceil = Math.ceil;
 
@@ -313,6 +322,51 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 // suspense heuristics and opt out of rendering more content.
 const RENDER_TIMEOUT_MS = 500;
 
+let workInProgressTransitions: Transitions | null = null;
+export function getWorkInProgressTransitions() {
+  return workInProgressTransitions;
+}
+
+let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
+
+export function addTransitionStartCallbackToPendingTransition(
+  transition: TransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: [],
+        transitionComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionStart === null) {
+      currentPendingTransitionCallbacks.transitionStart = [];
+    }
+
+    currentPendingTransitionCallbacks.transitionStart.push(transition);
+  }
+}
+
+export function addTransitionCompleteCallbackToPendingTransition(
+  transition: TransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionComplete: [],
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionComplete === null) {
+      currentPendingTransitionCallbacks.transitionComplete = [];
+    }
+
+    currentPendingTransitionCallbacks.transitionComplete.push(transition);
+  }
+}
+
 function resetRenderTimer() {
   workInProgressRootRenderTargetTime = now() + RENDER_TIMEOUT_MS;
 }
@@ -515,6 +569,17 @@ export function scheduleUpdateOnFiber(
       }
     }
 
+    if (enableTransitionTracing) {
+      const transition = ReactCurrentBatchConfig.transition;
+      if (transition !== null) {
+        if (transition.startTime === -1) {
+          transition.startTime = now();
+        }
+
+        addTransitionToLanesMap(root, transition, lane);
+      }
+    }
+
     if (root.isDehydrated && root.tag !== LegacyRoot) {
       // This root's shell hasn't hydrated yet. Revert to client rendering.
       if (workInProgressRoot === root) {
@@ -1244,6 +1309,7 @@ export function getExecutionContext(): ExecutionContext {
 export function deferredUpdates<A>(fn: () => A): A {
   const previousPriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
+
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DefaultEventPriority);
@@ -1318,6 +1384,7 @@ export function flushSync(fn) {
 
   const prevTransition = ReactCurrentBatchConfig.transition;
   const previousPriority = getCurrentUpdatePriority();
+
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
@@ -1329,6 +1396,7 @@ export function flushSync(fn) {
   } finally {
     setCurrentUpdatePriority(previousPriority);
     ReactCurrentBatchConfig.transition = prevTransition;
+
     executionContext = prevExecutionContext;
     // Flush the immediate callbacks that were scheduled during this batch.
     // Note that this will happen even if batchedUpdates is higher up
@@ -1617,6 +1685,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
       }
     }
 
+    workInProgressTransitions = getTransitionsForLanes(root, lanes);
     prepareFreshStack(root, lanes);
   }
 
@@ -1701,6 +1770,7 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       }
     }
 
+    workInProgressTransitions = getTransitionsForLanes(root, lanes);
     resetRenderTimer();
     prepareFreshStack(root, lanes);
   }
@@ -1896,6 +1966,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
   const prevTransition = ReactCurrentBatchConfig.transition;
+
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
@@ -2237,6 +2308,27 @@ function commitRootImpl(
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
+  if (enableTransitionTracing) {
+    const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
+    const prevRootTransitionCallbacks = root.transitionCallbacks;
+    if (
+      prevPendingTransitionCallbacks !== null &&
+      prevRootTransitionCallbacks !== null
+    ) {
+      // TODO(luna) Refactor this code into the Host Config
+      const endTime = now();
+      currentPendingTransitionCallbacks = null;
+
+      scheduleCallback(IdleSchedulerPriority, () =>
+        processTransitionCallbacks(
+          prevPendingTransitionCallbacks,
+          endTime,
+          prevRootTransitionCallbacks,
+        ),
+      );
+    }
+  }
+
   if (__DEV__) {
     if (enableDebugTracing) {
       logCommitStopped();
@@ -2286,6 +2378,7 @@ export function flushPassiveEffects(): boolean {
     const priority = lowerEventPriority(DefaultEventPriority, renderPriority);
     const prevTransition = ReactCurrentBatchConfig.transition;
     const previousPriority = getCurrentUpdatePriority();
+
     try {
       ReactCurrentBatchConfig.transition = null;
       setCurrentUpdatePriority(priority);
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index ed668d9126b6..162ba457d549 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -15,6 +15,7 @@ import type {
   MutableSourceGetSnapshotFn,
   MutableSourceVersion,
   MutableSource,
+  StartTransitionOptions,
 } from 'shared/ReactTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {WorkTag} from './ReactWorkTags';
@@ -25,6 +26,7 @@ import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {Transitions} from './ReactFiberTracingMarkerComponent.new';
 
 // Unwind Circular: moved from ReactFiberHooks.old
 export type HookType =
@@ -320,6 +322,7 @@ export type TransitionTracingCallbacks = {
 // The following fields are only used in transition tracing in Profile builds
 type TransitionTracingOnlyFiberRootProperties = {|
   transitionCallbacks: null | TransitionTracingCallbacks,
+  transitionLanes: Array<Transitions>,
 |};
 
 // Exported FiberRoot type includes all properties,
@@ -369,7 +372,10 @@ export type Dispatcher = {|
   ): void,
   useDebugValue<T>(value: T, formatterFn: ?(value: T) => mixed): void,
   useDeferredValue<T>(value: T): T,
-  useTransition(): [boolean, (() => void) => void],
+  useTransition(): [
+    boolean,
+    (callback: () => void, options?: StartTransitionOptions) => void,
+  ],
   useMutableSource<Source, Snapshot>(
     source: MutableSource<Source>,
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
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 000000000000..0b07a7f778cb
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+
+let useState;
+let startTransition;
+
+describe('ReactInteractionTracing', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    act = require('jest-react').act;
+
+    useState = React.useState;
+    startTransition = React.startTransition;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  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 correctly trace basic interaction', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      await act(async () => {
+        startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        expect(Scheduler).toFlushAndYield([
+          'Page Two',
+          'onTransitionStart(page transition, 1000)',
+          'onTransitionComplete(page transition, 1000, 2000)',
+        ]);
+      });
+    });
+  });
+});
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 5997f1b02b90..c3ffa8cd6abd 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -14,6 +14,7 @@ import type {
   MutableSourceGetSnapshotFn,
   MutableSourceSubscribeFn,
   ReactContext,
+  StartTransitionOptions,
 } from 'shared/ReactTypes';
 
 import type {ResponseState} from './ReactServerFormatConfig';
@@ -505,7 +506,10 @@ function unsupportedStartTransition() {
   throw new Error('startTransition cannot be called during server rendering.');
 }
 
-function useTransition(): [boolean, (callback: () => void) => void] {
+function useTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   resolveCurrentlyRenderingComponent();
   return [false, unsupportedStartTransition];
 }
diff --git a/packages/react/src/ReactCurrentBatchConfig.js b/packages/react/src/ReactCurrentBatchConfig.js
index bf368d6f0b6e..91737680b4aa 100644
--- a/packages/react/src/ReactCurrentBatchConfig.js
+++ b/packages/react/src/ReactCurrentBatchConfig.js
@@ -7,10 +7,10 @@
  * @flow
  */
 
-import type {Transition} from 'react-reconciler/src/ReactFiberTracingMarkerComponent.new';
+import type {BatchConfigTransition} from 'react-reconciler/src/ReactFiberTracingMarkerComponent.new';
 
 type BatchConfig = {
-  transition: Transition | null,
+  transition: BatchConfigTransition | null,
 };
 /**
  * Keeps track of the current batch's configuration such as how long an update
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 12a5350083f3..9dc7a98589e4 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -13,6 +13,7 @@ import type {
   MutableSourceGetSnapshotFn,
   MutableSourceSubscribeFn,
   ReactContext,
+  StartTransitionOptions,
 } from 'shared/ReactTypes';
 
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
@@ -158,7 +159,10 @@ export function useDebugValue<T>(
 
 export const emptyObject = {};
 
-export function useTransition(): [boolean, (() => void) => void] {
+export function useTransition(): [
+  boolean,
+  (callback: () => void, options?: StartTransitionOptions) => void,
+] {
   const dispatcher = resolveDispatcher();
   return dispatcher.useTransition();
 }
diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js
index a7097f5b1c52..634f5442645f 100644
--- a/packages/react/src/ReactStartTransition.js
+++ b/packages/react/src/ReactStartTransition.js
@@ -6,10 +6,15 @@
  *
  * @flow
  */
+import type {StartTransitionOptions} from 'shared/ReactTypes';
 
 import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
+import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 
-export function startTransition(scope: () => void) {
+export function startTransition(
+  scope: () => void,
+  options?: StartTransitionOptions,
+) {
   const prevTransition = ReactCurrentBatchConfig.transition;
   ReactCurrentBatchConfig.transition = {};
   const currentTransition = ReactCurrentBatchConfig.transition;
@@ -17,6 +22,14 @@ export function startTransition(scope: () => void) {
   if (__DEV__) {
     ReactCurrentBatchConfig.transition._updatedFibers = new Set();
   }
+
+  if (enableTransitionTracing) {
+    if (options !== undefined && options.name !== undefined) {
+      ReactCurrentBatchConfig.transition.name = options.name;
+      ReactCurrentBatchConfig.transition.startTime = -1;
+    }
+  }
+
   try {
     scope();
   } finally {
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 43f42bddb91d..066d20552d6f 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -171,3 +171,7 @@ export type OffscreenMode =
   | 'hidden'
   | 'unstable-defer-without-hiding'
   | 'visible';
+
+export type StartTransitionOptions = {
+  name?: string,
+};
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 055cbd5d1e97..36627a5d50d3 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -26,6 +26,7 @@ export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
+export const enableTransitionTracing = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.

From efe4121ee218099539523a713272edadbaafca2a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 24 Feb 2022 20:07:41 -0500
Subject: [PATCH 1167/1603] Add : to beginning and end of every useId (#23360)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The ids generated by useId are unique per React root. You can create
additional ids by concatenating them with locally unique strings.

To support this pattern, no id will ever be a subset of another id. We
achieve this by adding a special character to the beginning and end.

We use a colon (":") because it's uncommon — even if you don't prefix
the ids using the `identifierPrefix` option, collisions are unlikely.

One downside of a colon is that it's not a valid character in DOM
selectors, like `querySelectorAll`. We think this is probably
fine because it's not a common use case in React, and there are
workarounds or alternative solutions. But we're open to reconsidering
this in the future if there's a compelling argument.
---
 .../ReactHooksInspectionIntegration-test.js   |  2 +-
 .../src/__tests__/ReactDOMUseId-test.js       | 26 +++++++++++--------
 .../src/server/ReactDOMServerFormatConfig.js  |  6 ++---
 .../src/ReactFiberHooks.new.js                |  6 ++---
 .../src/ReactFiberHooks.old.js                |  6 ++---
 5 files changed, 25 insertions(+), 21 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index 5b36039ecc5d..f5003e96bdf6 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -614,7 +614,7 @@ describe('ReactHooksInspectionIntegration', () => {
     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(String(tree[0].value).startsWith(':r')).toBe(true);
 
     expect(tree[1]).toEqual({
       id: 1,
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index 036c138d5e97..41c4ddcbcc48 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -93,7 +93,11 @@ describe('useId', () => {
   }
 
   function normalizeTreeIdForTesting(id) {
-    const [serverClientPrefix, base32, hookIndex] = id.split(':');
+    const result = id.match(/:(R|r)(.*):(([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 (
@@ -278,7 +282,7 @@ describe('useId', () => {
     // 'R:' prefix, and the first character after that, which may not correspond
     // to a complete set of 5 bits.
     //
-    // Example: R:clalalalalalalala...
+    // 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
@@ -313,8 +317,8 @@ describe('useId', () => {
 
     // Confirm that every id matches the expected pattern
     for (let i = 0; i < divs.length; i++) {
-      // Example: R:clalalalalalalala...
-      expect(divs[i].id).toMatch(/^R:.(((al)*a?)((la)*l?))*$/);
+      // Example: :Rclalalalalalalala...:
+      expect(divs[i].id).toMatch(/^:R.(((al)*a?)((la)*l?))*:$/);
     }
   });
 
@@ -338,7 +342,7 @@ describe('useId', () => {
       <div
         id="container"
       >
-        R:0, R:0:1, R:0:2
+        :R0:, :R0:1:, :R0:2:
         <!-- -->
       </div>
     `);
@@ -364,7 +368,7 @@ describe('useId', () => {
       <div
         id="container"
       >
-        R:0
+        :R0:
         <!-- -->
       </div>
     `);
@@ -603,10 +607,10 @@ describe('useId', () => {
         id="container"
       >
         <div>
-          custom-prefix-R:1
+          :custom-prefix-R1:
         </div>
         <div>
-          custom-prefix-R:2
+          :custom-prefix-R2:
         </div>
       </div>
     `);
@@ -620,13 +624,13 @@ describe('useId', () => {
         id="container"
       >
         <div>
-          custom-prefix-R:1
+          :custom-prefix-R1:
         </div>
         <div>
-          custom-prefix-R:2
+          :custom-prefix-R2:
         </div>
         <div>
-          custom-prefix-r:0
+          :custom-prefix-r0:
         </div>
       </div>
     `);
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 20887c226015..f623556bb62d 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -130,7 +130,7 @@ export function createResponseState(
     placeholderPrefix: stringToPrecomputedChunk(idPrefix + 'P:'),
     segmentPrefix: stringToPrecomputedChunk(idPrefix + 'S:'),
     boundaryPrefix: idPrefix + 'B:',
-    idPrefix: idPrefix + 'R:',
+    idPrefix: idPrefix,
     nextSuspenseID: 0,
     sentCompleteSegmentFunction: false,
     sentCompleteBoundaryFunction: false,
@@ -242,13 +242,13 @@ export function makeId(
 ): string {
   const idPrefix = responseState.idPrefix;
 
-  let id = idPrefix + treeId;
+  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 += ':' + localId.toString(32);
+    id += localId.toString(32) + ':';
   }
 
   return id;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 3f64a7d8f917..5c4b9357f909 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2072,19 +2072,19 @@ function mountId(): string {
     const treeId = getTreeId();
 
     // Use a captial R prefix for server-generated ids.
-    id = identifierPrefix + 'R:' + treeId;
+    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 += ':' + localId.toString(32);
+      id += localId.toString(32) + ':';
     }
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
-    id = identifierPrefix + 'r:' + globalClientId.toString(32);
+    id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
   }
 
   hook.memoizedState = id;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index d55cac9b26c7..f0fcef733d58 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2072,19 +2072,19 @@ function mountId(): string {
     const treeId = getTreeId();
 
     // Use a captial R prefix for server-generated ids.
-    id = identifierPrefix + 'R:' + treeId;
+    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 += ':' + localId.toString(32);
+      id += localId.toString(32) + ':';
     }
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
-    id = identifierPrefix + 'r:' + globalClientId.toString(32);
+    id = ':' + identifierPrefix + 'r' + globalClientId.toString(32) + ':';
   }
 
   hook.memoizedState = id;

From 8d0d0e9a8aadc4bdddff3a40871dbc54c63264f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 24 Feb 2022 20:09:03 -0500
Subject: [PATCH 1168/1603] Deprecate renderToNodeStream (and fix textarea bug)
 (#23359)

* Deprecate renderToNodeStream

* Use renderToPipeableStream in tests instead of renderToNodeStream

This is the equivalent API. This means that we have way less test coverage
of this API but I feel like that's fine since it has a deprecation warning
in it and we have coverage on renderToString that is mostly the same.

* Fix textarea bug

The test changes revealed a bug with textarea. It happens because we
currently always insert trailing comment nodes. We should optimize that
away. However, we also don't really support complex children so we
should toString it anyway which is what partial renderer used to do.

* Update tests that assert number of nodes

These tests are unnecessarily specific about number of nodes.

I special case these, which these tests already do, because they're good
tests to test that the optimization actually works later when we do
fix it.
---
 .../ReactDOMServerIntegrationElements-test.js | 57 +++++++++++--------
 ...eactDOMServerIntegrationNewContext-test.js | 46 +++++++++++----
 .../ReactDOMServerIntegrationTextarea-test.js |  6 ++
 .../__tests__/ReactServerRendering-test.js    | 16 +++++-
 .../ReactDOMServerIntegrationTestUtils.js     | 14 ++++-
 .../src/server/ReactDOMLegacyServerNode.js    |  5 ++
 .../src/server/ReactDOMServerFormatConfig.js  | 12 +++-
 7 files changed, 113 insertions(+), 43 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
index a856bd42edc1..6a777f3f4325 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
@@ -101,7 +101,7 @@ describe('ReactDOMServerIntegration', () => {
         ) {
           // For plain server markup result we have comments between.
           // If we're able to hydrate, they remain.
-          expect(e.childNodes.length).toBe(5);
+          expect(e.childNodes.length).toBe(render === streamRender ? 6 : 5);
           expectTextNode(e.childNodes[0], ' ');
           expectTextNode(e.childNodes[2], ' ');
           expectTextNode(e.childNodes[4], ' ');
@@ -119,8 +119,8 @@ describe('ReactDOMServerIntegration', () => {
             Text<span>More Text</span>
           </div>,
         );
-        expect(e.childNodes.length).toBe(2);
-        const spanNode = e.childNodes[1];
+        expect(e.childNodes.length).toBe(render === streamRender ? 3 : 2);
+        const spanNode = e.childNodes[render === streamRender ? 2 : 1];
         expectTextNode(e.childNodes[0], 'Text');
         expect(spanNode.tagName).toBe('SPAN');
         expect(spanNode.childNodes.length).toBe(1);
@@ -147,19 +147,19 @@ describe('ReactDOMServerIntegration', () => {
       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);
+        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 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);
+        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 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);
+        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 1);
         expectTextNode(e.childNodes[0], 'foo');
       });
 
@@ -176,7 +176,7 @@ describe('ReactDOMServerIntegration', () => {
           render === streamRender
         ) {
           // In the server render output there's a comment between them.
-          expect(e.childNodes.length).toBe(3);
+          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
           expectTextNode(e.childNodes[0], 'foo');
           expectTextNode(e.childNodes[2], 'bar');
         } else {
@@ -203,7 +203,7 @@ describe('ReactDOMServerIntegration', () => {
             render === streamRender
           ) {
             // In the server render output there's a comment between them.
-            expect(e.childNodes.length).toBe(5);
+            expect(e.childNodes.length).toBe(render === streamRender ? 6 : 5);
             expectTextNode(e.childNodes[0], 'a');
             expectTextNode(e.childNodes[2], 'b');
             expectTextNode(e.childNodes[4], 'c');
@@ -240,11 +240,7 @@ describe('ReactDOMServerIntegration', () => {
             e
           </div>,
         );
-        if (
-          render === serverRender ||
-          render === clientRenderOnServerString ||
-          render === streamRender
-        ) {
+        if (render === serverRender || render === clientRenderOnServerString) {
           // In the server render output there's comments between text nodes.
           expect(e.childNodes.length).toBe(5);
           expectTextNode(e.childNodes[0], 'a');
@@ -253,6 +249,15 @@ describe('ReactDOMServerIntegration', () => {
           expectTextNode(e.childNodes[3].childNodes[0], 'c');
           expectTextNode(e.childNodes[3].childNodes[2], 'd');
           expectTextNode(e.childNodes[4], 'e');
+        } else if (render === streamRender) {
+          // In the server render output there's comments after each text node.
+          expect(e.childNodes.length).toBe(7);
+          expectTextNode(e.childNodes[0], 'a');
+          expectTextNode(e.childNodes[2], 'b');
+          expect(e.childNodes[4].childNodes.length).toBe(4);
+          expectTextNode(e.childNodes[4].childNodes[0], 'c');
+          expectTextNode(e.childNodes[4].childNodes[2], 'd');
+          expectTextNode(e.childNodes[5], 'e');
         } else {
           expect(e.childNodes.length).toBe(4);
           expectTextNode(e.childNodes[0], 'a');
@@ -291,7 +296,7 @@ describe('ReactDOMServerIntegration', () => {
           render === streamRender
         ) {
           // In the server markup there's a comment between.
-          expect(e.childNodes.length).toBe(3);
+          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
           expectTextNode(e.childNodes[0], 'foo');
           expectTextNode(e.childNodes[2], '40');
         } else {
@@ -330,13 +335,13 @@ describe('ReactDOMServerIntegration', () => {
 
       itRenders('null children as blank', async render => {
         const e = await render(<div>{null}foo</div>);
-        expect(e.childNodes.length).toBe(1);
+        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 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);
+        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 1);
         expectTextNode(e.childNodes[0], 'foo');
       });
 
@@ -348,7 +353,7 @@ describe('ReactDOMServerIntegration', () => {
             {false}
           </div>,
         );
-        expect(e.childNodes.length).toBe(1);
+        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 1);
         expectTextNode(e.childNodes[0], 'foo');
       });
 
@@ -735,10 +740,10 @@ describe('ReactDOMServerIntegration', () => {
             </div>,
           );
           expect(e.id).toBe('parent');
-          expect(e.childNodes.length).toBe(3);
+          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
           const child1 = e.childNodes[0];
           const textNode = e.childNodes[1];
-          const child2 = e.childNodes[2];
+          const child2 = e.childNodes[render === streamRender ? 3 : 2];
           expect(child1.id).toBe('child1');
           expect(child1.childNodes.length).toBe(0);
           expectTextNode(textNode, ' ');
@@ -752,10 +757,10 @@ describe('ReactDOMServerIntegration', () => {
         async render => {
           // prettier-ignore
           const e = await render(<div id="parent">  <div id="child" />   </div>); // eslint-disable-line no-multi-spaces
-          expect(e.childNodes.length).toBe(3);
+          expect(e.childNodes.length).toBe(render === streamRender ? 5 : 3);
           const textNode1 = e.childNodes[0];
-          const child = e.childNodes[1];
-          const textNode2 = e.childNodes[2];
+          const child = e.childNodes[render === streamRender ? 2 : 1];
+          const textNode2 = e.childNodes[render === streamRender ? 3 : 2];
           expect(e.id).toBe('parent');
           expectTextNode(textNode1, '  ');
           expect(child.id).toBe('child');
@@ -778,7 +783,9 @@ describe('ReactDOMServerIntegration', () => {
         ) {
           // For plain server markup result we have comments between.
           // If we're able to hydrate, they remain.
-          expect(parent.childNodes.length).toBe(5);
+          expect(parent.childNodes.length).toBe(
+            render === streamRender ? 6 : 5,
+          );
           expectTextNode(parent.childNodes[0], 'a');
           expectTextNode(parent.childNodes[2], 'b');
           expectTextNode(parent.childNodes[4], 'c');
@@ -810,7 +817,7 @@ describe('ReactDOMServerIntegration', () => {
           render === clientRenderOnServerString ||
           render === streamRender
         ) {
-          expect(e.childNodes.length).toBe(3);
+          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
           expectTextNode(e.childNodes[0], '<span>Text1&quot;</span>');
           expectTextNode(e.childNodes[2], '<span>Text2&quot;</span>');
         } else {
@@ -861,7 +868,7 @@ describe('ReactDOMServerIntegration', () => {
           );
           if (render === serverRender || render === streamRender) {
             // We have three nodes because there is a comment between them.
-            expect(e.childNodes.length).toBe(3);
+            expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
             // Everything becomes LF when parsed from server HTML.
             // Null character is ignored.
             expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar');
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
index 85c214067531..4d1016dfdace 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationNewContext-test.js
@@ -409,12 +409,24 @@ describe('ReactDOMServerIntegration', () => {
         </LoggedInUser.Provider>
       );
 
-      const streamAmy = ReactDOMServer.renderToNodeStream(
-        AppWithUser('Amy'),
-      ).setEncoding('utf8');
-      const streamBob = ReactDOMServer.renderToNodeStream(
-        AppWithUser('Bob'),
-      ).setEncoding('utf8');
+      let streamAmy;
+      let streamBob;
+      expect(() => {
+        streamAmy = ReactDOMServer.renderToNodeStream(
+          AppWithUser('Amy'),
+        ).setEncoding('utf8');
+      }).toErrorDev(
+        'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+        {withoutStack: true},
+      );
+      expect(() => {
+        streamBob = ReactDOMServer.renderToNodeStream(
+          AppWithUser('Bob'),
+        ).setEncoding('utf8');
+      }).toErrorDev(
+        'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+        {withoutStack: true},
+      );
 
       // Testing by filling the buffer using internal _read() with a small
       // number of bytes to avoid a test case which needs to align to a
@@ -449,9 +461,14 @@ describe('ReactDOMServerIntegration', () => {
       const streamCount = 34;
 
       for (let i = 0; i < streamCount; i++) {
-        streams[i] = ReactDOMServer.renderToNodeStream(
-          NthRender(i % 2 === 0 ? 'Expected to be recreated' : i),
-        ).setEncoding('utf8');
+        expect(() => {
+          streams[i] = ReactDOMServer.renderToNodeStream(
+            NthRender(i % 2 === 0 ? 'Expected to be recreated' : i),
+          ).setEncoding('utf8');
+        }).toErrorDev(
+          'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+          {withoutStack: true},
+        );
       }
 
       // Testing by filling the buffer using internal _read() with a small
@@ -468,9 +485,14 @@ describe('ReactDOMServerIntegration', () => {
 
       // Recreate those same streams.
       for (let i = 0; i < streamCount; i += 2) {
-        streams[i] = ReactDOMServer.renderToNodeStream(
-          NthRender(i),
-        ).setEncoding('utf8');
+        expect(() => {
+          streams[i] = ReactDOMServer.renderToNodeStream(
+            NthRender(i),
+          ).setEncoding('utf8');
+        }).toErrorDev(
+          'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+          {withoutStack: true},
+        );
       }
 
       // Read a bit from all streams again.
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
index 261b6c041495..1d8b388c4b3a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationTextarea-test.js
@@ -49,6 +49,12 @@ describe('ReactDOMServerIntegrationTextarea', () => {
     expect(e.value).toBe('foo');
   });
 
+  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
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
index 6489151b0550..0c057c5fade0 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -569,7 +569,13 @@ describe('ReactDOMServer', () => {
   describe('renderToNodeStream', () => {
     it('should generate simple markup', () => {
       const SuccessfulElement = React.createElement(() => <img />);
-      const response = ReactDOMServer.renderToNodeStream(SuccessfulElement);
+      let response;
+      expect(() => {
+        response = ReactDOMServer.renderToNodeStream(SuccessfulElement);
+      }).toErrorDev(
+        'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+        {withoutStack: true},
+      );
       expect(response.read().toString()).toMatch(new RegExp('<img' + '/>'));
     });
 
@@ -577,7 +583,13 @@ describe('ReactDOMServer', () => {
       const FailingElement = React.createElement(() => {
         throw new Error('An Error');
       });
-      const response = ReactDOMServer.renderToNodeStream(FailingElement);
+      let response;
+      expect(() => {
+        response = ReactDOMServer.renderToNodeStream(FailingElement);
+      }).toErrorDev(
+        'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+        {withoutStack: true},
+      );
       return new Promise(resolve => {
         response.once('error', () => {
           resolve();
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index 8714059bb386..9f23d7aa96ae 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -154,8 +154,11 @@ module.exports = function(initModules) {
       () =>
         new Promise((resolve, reject) => {
           const writable = new DrainWritable();
-          const s = ReactDOMServer.renderToNodeStream(reactElement);
-          s.on('error', e => reject(e));
+          const s = ReactDOMServer.renderToPipeableStream(reactElement, {
+            onErrorShell(e) {
+              reject(e);
+            },
+          });
           s.pipe(writable);
           writable.on('finish', () => resolve(writable.buffer));
         }),
@@ -168,7 +171,12 @@ module.exports = function(initModules) {
   // Does not render on client or perform client-side revival.
   async function streamRender(reactElement, errorCount = 0) {
     const markup = await renderIntoStream(reactElement, errorCount);
-    return getContainerFromMarkup(reactElement, markup).firstChild;
+    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) => {
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index 71ebab5ac0f0..fd55b2b0a5ce 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -93,6 +93,11 @@ function renderToNodeStream(
   children: ReactNodeList,
   options?: ServerOptions,
 ): Readable {
+  if (__DEV__) {
+    console.error(
+      'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+    );
+  }
   return renderToNodeStreamImpl(children, options, false);
 }
 
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index f623556bb62d..0b87521c185c 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1001,7 +1001,17 @@ function pushStartTextArea(
     target.push(leadingNewline);
   }
 
-  return value;
+  // 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 pushSelfClosing(

From 3a60844a0f3449d7e6d208e31df44c5ba3466e38 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 24 Feb 2022 21:02:06 -0500
Subject: [PATCH 1169/1603] Update error message for suspending at sync
 priority (#23361)

Instead of adding a new Suspense boundary, the default recommendation
is to wrap the suspending update with startTransition.
---
 .../ReactDOMServerSuspense-test.internal.js          |  4 ++--
 .../src/server/ReactDOMLegacyServerBrowser.js        | 10 ++++++----
 packages/react-reconciler/src/ReactFiberThrow.new.js | 12 ++++--------
 packages/react-reconciler/src/ReactFiberThrow.old.js | 12 ++++--------
 .../__tests__/ReactSuspenseWithNoopRenderer-test.js  |  4 +---
 scripts/error-codes/codes.json                       |  3 ++-
 6 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 327b83b94023..1611b904bef1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -187,7 +187,7 @@ describe('ReactDOMServerSuspense', () => {
           1,
         );
       },
-      'Add a <Suspense fallback=...> component higher in the tree',
+      'A component suspended while responding to synchronous input.',
     );
 
     itThrowsWhenRendering(
@@ -200,7 +200,7 @@ describe('ReactDOMServerSuspense', () => {
           1,
         );
       },
-      'Add a <Suspense fallback=...> component higher in the tree',
+      'A component suspended while responding to synchronous input.',
     );
   }
 
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 338c77de436d..1a11911ad531 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -78,11 +78,13 @@ function renderToStringImpl(
   }
 
   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 React component suspended while rendering, but no fallback UI was specified.\n' +
-        '\n' +
-        'Add a <Suspense fallback=...> component higher in the tree to ' +
-        'provide a loading indicator or placeholder to display.',
+      '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.',
     );
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 24eb0a590b1b..cc5e3215c786 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -499,15 +499,11 @@ function throwException(
       // This is a sync/discrete update. We treat this case like an error
       // because discrete renders are expected to produce a complete tree
       // synchronously to maintain consistency with external state.
-
-      // TODO: We should never call getComponentNameFromFiber in production.
-      // Log a warning or something to prevent us from accidentally bundling it.
       const uncaughtSuspenseError = new Error(
-        (getComponentNameFromFiber(sourceFiber) || 'A React component') +
-          ' suspended while rendering, but no fallback UI was specified.\n' +
-          '\n' +
-          'Add a <Suspense fallback=...> component higher in the tree to ' +
-          'provide a loading indicator or placeholder to display.',
+        '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.',
       );
 
       // If we're outside a transition, fall through to the regular error path.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 5a3c720e1cc5..727c613d7622 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -499,15 +499,11 @@ function throwException(
       // This is a sync/discrete update. We treat this case like an error
       // because discrete renders are expected to produce a complete tree
       // synchronously to maintain consistency with external state.
-
-      // TODO: We should never call getComponentNameFromFiber in production.
-      // Log a warning or something to prevent us from accidentally bundling it.
       const uncaughtSuspenseError = new Error(
-        (getComponentNameFromFiber(sourceFiber) || 'A React component') +
-          ' suspended while rendering, but no fallback UI was specified.\n' +
-          '\n' +
-          'Add a <Suspense fallback=...> component higher in the tree to ' +
-          'provide a loading indicator or placeholder to display.',
+        '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.',
       );
 
       // If we're outside a transition, fall through to the regular error path.
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 751caed68ede..dc2d57d225a4 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -1011,9 +1011,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       ReactNoop.flushSync(() => {
         ReactNoop.render(<AsyncText text="Async" />);
       });
-    }).toThrow(
-      'AsyncText suspended while rendering, but no fallback UI was specified.',
-    );
+    }).toThrow('A component suspended while responding to synchronous input.');
   });
 
   // @gate enableCache
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index dafa57490349..367b736931cf 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -409,5 +409,6 @@
   "421": "There was an error while hydrating this Suspense boundary. Switched to client rendering.",
   "422": "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.",
   "423": "This root received an early update, before anything was able hydrate. Switched the entire root to client rendering.",
-  "424": "Text content does not match server-rendered HTML."
+  "424": "Text content does not match server-rendered HTML.",
+  "425": "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."
 }

From 629036a9c4fa925351fe714162dd2218eef3ac56 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 24 Feb 2022 21:24:46 -0500
Subject: [PATCH 1170/1603] Bump versions to prepare for rc.1 (#23362)

---
 ReactVersions.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index 32dde5ab5219..f699ccb24ac2 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,7 +18,7 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.0.0-rc.0';
+const ReactVersion = '18.0.0-rc.1';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
@@ -26,18 +26,18 @@ const nextChannelLabel = 'next';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
-  'eslint-plugin-react-hooks': '4.2.1-rc.0',
-  'jest-react': '0.12.1-rc.0',
+  'eslint-plugin-react-hooks': '4.2.1-rc.1',
+  'jest-react': '0.12.1-rc.1',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.27.0-rc.0',
-  'react-refresh': '0.11.0-rc.0',
+  'react-reconciler': '0.27.0-rc.1',
+  'react-refresh': '0.11.0-rc.1',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.6.0-rc.0',
-  'use-sync-external-store': '1.0.0-rc.0',
-  scheduler: '0.21.0-rc.0',
+  'use-subscription': '1.6.0-rc.1',
+  'use-sync-external-store': '1.0.0-rc.1',
+  scheduler: '0.21.0-rc.1',
 };
 
 // These packages do not exist in the @next or @latest channel, only

From 5d08a24c21dcb3d42ea628ce3f94bdbd0d432756 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 25 Feb 2022 15:46:59 -0500
Subject: [PATCH 1171/1603] useId: Use 'H' to separate main id from hook index
 (#23363)

No id should be a subset of any other id. Currently, this is not true
when there are multiple hooks in the same component. We append the
hook index to the end of the id, except for the first one. So you get
this pattern.

Before this change:

- 1st hook's id: :R0:
- 2nd hook's id: :R0:1:

The first hook's id is a subset of all the other ids in the
same component.

The fix for this is to use a different character to separate the main
id from the hook index. I've chosen a captial 'H' for this because
capital letters are not part of the base 32 character set when encoding
with `toString(32)`.

After this change:

- 1st hook's id: :R0:
- 2nd hook's id: :R0H1:
---
 packages/react-dom/src/__tests__/ReactDOMUseId-test.js      | 4 ++--
 packages/react-dom/src/server/ReactDOMServerFormatConfig.js | 6 +++---
 packages/react-reconciler/src/ReactFiberHooks.new.js        | 6 ++++--
 packages/react-reconciler/src/ReactFiberHooks.old.js        | 6 ++++--
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index 41c4ddcbcc48..d3fb8b3ae70a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -93,7 +93,7 @@ describe('useId', () => {
   }
 
   function normalizeTreeIdForTesting(id) {
-    const result = id.match(/:(R|r)(.*):(([0-9]*):)?/);
+    const result = id.match(/:(R|r)([a-z0-9]*)(H([0-9]*))?:/);
     if (result === undefined) {
       throw new Error('Invalid id format');
     }
@@ -342,7 +342,7 @@ describe('useId', () => {
       <div
         id="container"
       >
-        :R0:, :R0:1:, :R0:2:
+        :R0:, :R0H1:, :R0H2:
         <!-- -->
       </div>
     `);
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 0b87521c185c..7cc5c72a16e5 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -242,16 +242,16 @@ export function makeId(
 ): string {
   const idPrefix = responseState.idPrefix;
 
-  let id = ':' + idPrefix + 'R' + treeId + ':';
+  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 += localId.toString(32) + ':';
+    id += 'H' + localId.toString(32);
   }
 
-  return id;
+  return id + ':';
 }
 
 function encodeHTMLTextNode(text: string): string {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 5c4b9357f909..011c64f59d2c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2072,15 +2072,17 @@ function mountId(): string {
     const treeId = getTreeId();
 
     // Use a captial R prefix for server-generated ids.
-    id = ':' + identifierPrefix + 'R' + treeId + ':';
+    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 += localId.toString(32) + ':';
+      id += 'H' + localId.toString(32);
     }
+
+    id += ':';
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index f0fcef733d58..48f8f14bf2e2 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2072,15 +2072,17 @@ function mountId(): string {
     const treeId = getTreeId();
 
     // Use a captial R prefix for server-generated ids.
-    id = ':' + identifierPrefix + 'R' + treeId + ':';
+    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 += localId.toString(32) + ':';
+      id += 'H' + localId.toString(32);
     }
+
+    id += ':';
   } else {
     // Use a lowercase r prefix for client-generated ids.
     const globalClientId = globalClientIdCounter++;

From f468816ef1000b2fe0086feabc0115b86f299cad Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 25 Feb 2022 18:10:10 -0500
Subject: [PATCH 1172/1603] Fix false positive hydration warnings (#23364)

* Failing test for react#23331

* Don't warn on hydration mismatch if suspended

When something suspends during hydration, we continue rendering the
siblings to warm up the cache and fire off any lazy network requests.
However, if there are any mismatches while rendering the siblings, it's
likely a false positive caused by the earlier suspended component. So
we should suppress any hydration warnings until the tree no
longer suspends.

Fixes #23332

Co-authored-by: Marcel Laverdet <marcel@laverdet.com>
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 66 +++++++++++++++++++
 .../react-dom/src/client/ReactDOMComponent.js | 31 +++++----
 .../src/client/ReactDOMHostConfig.js          | 19 +++++-
 .../src/ReactFiberHydrationContext.new.js     | 27 +++++++-
 .../src/ReactFiberHydrationContext.old.js     | 27 +++++++-
 .../src/ReactFiberThrow.new.js                |  3 +
 .../src/ReactFiberThrow.old.js                |  3 +
 7 files changed, 161 insertions(+), 15 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 01397d00004f..0b14e567c7e0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -301,6 +301,72 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  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(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Loading...</span>
+      </div>,
+    );
+    await act(async () => {
+      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(async () => {
+      ReactDOM.hydrateRoot(container, <HydrateApp />);
+    });
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span id="async">async</span>
+        <span id="after">after</span>
+      </div>,
+    );
+
+    await act(async () => {
+      hydrateResolve();
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span id="async">async</span>
+        <span id="after">after</span>
+      </div>,
+    );
+  });
+
   // @gate experimental
   it('should support nonce scripts', async () => {
     CSPnonce = 'R4nd0m';
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 767b200f2909..1552629da174 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -230,6 +230,7 @@ export function checkForUnmatchedText(
   serverText: string,
   clientText: string | number,
   isConcurrentMode: boolean,
+  shouldWarnDev: boolean,
 ) {
   const normalizedClientText = normalizeMarkupForTextOrAttribute(clientText);
   const normalizedServerText = normalizeMarkupForTextOrAttribute(serverText);
@@ -237,14 +238,16 @@ export function checkForUnmatchedText(
     return;
   }
 
-  if (__DEV__) {
-    if (!didWarnInvalidHydration) {
-      didWarnInvalidHydration = true;
-      console.error(
-        'Text content did not match. Server: "%s" Client: "%s"',
-        normalizedServerText,
-        normalizedClientText,
-      );
+  if (shouldWarnDev) {
+    if (__DEV__) {
+      if (!didWarnInvalidHydration) {
+        didWarnInvalidHydration = true;
+        console.error(
+          'Text content did not match. Server: "%s" Client: "%s"',
+          normalizedServerText,
+          normalizedClientText,
+        );
+      }
     }
   }
 
@@ -866,6 +869,7 @@ export function diffHydratedProperties(
   parentNamespace: string,
   rootContainerElement: Element | Document,
   isConcurrentMode: boolean,
+  shouldWarnDev: boolean,
 ): null | Array<mixed> {
   let isCustomComponentTag;
   let extraAttributeNames: Set<string>;
@@ -985,6 +989,7 @@ export function diffHydratedProperties(
               domElement.textContent,
               nextProp,
               isConcurrentMode,
+              shouldWarnDev,
             );
           }
           updatePayload = [CHILDREN, nextProp];
@@ -996,6 +1001,7 @@ export function diffHydratedProperties(
               domElement.textContent,
               nextProp,
               isConcurrentMode,
+              shouldWarnDev,
             );
           }
           updatePayload = [CHILDREN, '' + nextProp];
@@ -1011,6 +1017,7 @@ export function diffHydratedProperties(
         }
       }
     } else if (
+      shouldWarnDev &&
       __DEV__ &&
       // Convince Flow we've calculated it (it's DEV-only in this method.)
       typeof isCustomComponentTag === 'boolean'
@@ -1142,10 +1149,12 @@ export function diffHydratedProperties(
   }
 
   if (__DEV__) {
-    // $FlowFixMe - Should be inferred as not undefined.
-    if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
+    if (shouldWarnDev) {
       // $FlowFixMe - Should be inferred as not undefined.
-      warnForExtraAttributes(extraAttributeNames);
+      if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
+        // $FlowFixMe - Should be inferred as not undefined.
+        warnForExtraAttributes(extraAttributeNames);
+      }
     }
   }
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 4863a16eda68..97eb494ecba2 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -786,6 +786,7 @@ export function hydrateInstance(
   rootContainerInstance: Container,
   hostContext: HostContext,
   internalInstanceHandle: Object,
+  shouldWarnDev: boolean,
 ): null | Array<mixed> {
   precacheFiberNode(internalInstanceHandle, instance);
   // TODO: Possibly defer this until the commit phase where all the events
@@ -811,6 +812,7 @@ export function hydrateInstance(
     parentNamespace,
     rootContainerInstance,
     isConcurrentMode,
+    shouldWarnDev,
   );
 }
 
@@ -818,6 +820,7 @@ export function hydrateTextInstance(
   textInstance: TextInstance,
   text: string,
   internalInstanceHandle: Object,
+  shouldWarnDev: boolean,
 ): boolean {
   precacheFiberNode(internalInstanceHandle, textInstance);
 
@@ -924,7 +927,13 @@ export function didNotMatchHydratedContainerTextInstance(
   text: string,
   isConcurrentMode: boolean,
 ) {
-  checkForUnmatchedText(textInstance.nodeValue, text, isConcurrentMode);
+  const shouldWarnDev = true;
+  checkForUnmatchedText(
+    textInstance.nodeValue,
+    text,
+    isConcurrentMode,
+    shouldWarnDev,
+  );
 }
 
 export function didNotMatchHydratedTextInstance(
@@ -936,7 +945,13 @@ export function didNotMatchHydratedTextInstance(
   isConcurrentMode: boolean,
 ) {
   if (parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    checkForUnmatchedText(textInstance.nodeValue, text, isConcurrentMode);
+    const shouldWarnDev = true;
+    checkForUnmatchedText(
+      textInstance.nodeValue,
+      text,
+      isConcurrentMode,
+      shouldWarnDev,
+    );
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 6905f58e2ab1..6a7a175d6cff 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -84,6 +84,7 @@ import {queueRecoverableErrors} from './ReactFiberWorkLoop.new';
 let hydrationParentFiber: null | Fiber = null;
 let nextHydratableInstance: null | HydratableInstance = null;
 let isHydrating: boolean = false;
+let didSuspend: boolean = false;
 
 // Hydration errors that were thrown inside this boundary
 let hydrationErrors: Array<mixed> | null = null;
@@ -98,6 +99,12 @@ function warnIfHydrating() {
   }
 }
 
+export function markDidSuspendWhileHydratingDEV() {
+  if (__DEV__) {
+    didSuspend = true;
+  }
+}
+
 function enterHydrationState(fiber: Fiber): boolean {
   if (!supportsHydration) {
     return false;
@@ -110,6 +117,7 @@ function enterHydrationState(fiber: Fiber): boolean {
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
+  didSuspend = false;
   return true;
 }
 
@@ -127,6 +135,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
+  didSuspend = false;
   if (treeContext !== null) {
     restoreSuspendedTreeContext(fiber, treeContext);
   }
@@ -185,6 +194,13 @@ function deleteHydratableInstance(
 
 function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
   if (__DEV__) {
+    if (didSuspend) {
+      // 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;
+    }
+
     switch (returnFiber.tag) {
       case HostRoot: {
         const parentContainer = returnFiber.stateNode.containerInfo;
@@ -418,6 +434,7 @@ function prepareToHydrateHostInstance(
   }
 
   const instance: Instance = fiber.stateNode;
+  const shouldWarnIfMismatchDev = !didSuspend;
   const updatePayload = hydrateInstance(
     instance,
     fiber.type,
@@ -425,6 +442,7 @@ function prepareToHydrateHostInstance(
     rootContainerInstance,
     hostContext,
     fiber,
+    shouldWarnIfMismatchDev,
   );
   // TODO: Type this specific to this type of component.
   fiber.updateQueue = (updatePayload: any);
@@ -446,7 +464,13 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
   const textInstance: TextInstance = fiber.stateNode;
   const textContent: string = fiber.memoizedProps;
-  const shouldUpdate = hydrateTextInstance(textInstance, textContent, fiber);
+  const shouldWarnIfMismatchDev = !didSuspend;
+  const shouldUpdate = hydrateTextInstance(
+    textInstance,
+    textContent,
+    fiber,
+    shouldWarnIfMismatchDev,
+  );
   if (shouldUpdate) {
     // We assume that prepareToHydrateHostTextInstance is called in a context where the
     // hydration parent is the parent host component of this host text.
@@ -616,6 +640,7 @@ function resetHydrationState(): void {
   hydrationParentFiber = null;
   nextHydratableInstance = null;
   isHydrating = false;
+  didSuspend = false;
 }
 
 export function upgradeHydrationErrorsToRecoverable(): void {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index b9e88d3a21af..8c334924943a 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -84,6 +84,7 @@ import {queueRecoverableErrors} from './ReactFiberWorkLoop.old';
 let hydrationParentFiber: null | Fiber = null;
 let nextHydratableInstance: null | HydratableInstance = null;
 let isHydrating: boolean = false;
+let didSuspend: boolean = false;
 
 // Hydration errors that were thrown inside this boundary
 let hydrationErrors: Array<mixed> | null = null;
@@ -98,6 +99,12 @@ function warnIfHydrating() {
   }
 }
 
+export function markDidSuspendWhileHydratingDEV() {
+  if (__DEV__) {
+    didSuspend = true;
+  }
+}
+
 function enterHydrationState(fiber: Fiber): boolean {
   if (!supportsHydration) {
     return false;
@@ -110,6 +117,7 @@ function enterHydrationState(fiber: Fiber): boolean {
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
+  didSuspend = false;
   return true;
 }
 
@@ -127,6 +135,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
+  didSuspend = false;
   if (treeContext !== null) {
     restoreSuspendedTreeContext(fiber, treeContext);
   }
@@ -185,6 +194,13 @@ function deleteHydratableInstance(
 
 function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
   if (__DEV__) {
+    if (didSuspend) {
+      // 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;
+    }
+
     switch (returnFiber.tag) {
       case HostRoot: {
         const parentContainer = returnFiber.stateNode.containerInfo;
@@ -418,6 +434,7 @@ function prepareToHydrateHostInstance(
   }
 
   const instance: Instance = fiber.stateNode;
+  const shouldWarnIfMismatchDev = !didSuspend;
   const updatePayload = hydrateInstance(
     instance,
     fiber.type,
@@ -425,6 +442,7 @@ function prepareToHydrateHostInstance(
     rootContainerInstance,
     hostContext,
     fiber,
+    shouldWarnIfMismatchDev,
   );
   // TODO: Type this specific to this type of component.
   fiber.updateQueue = (updatePayload: any);
@@ -446,7 +464,13 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
   const textInstance: TextInstance = fiber.stateNode;
   const textContent: string = fiber.memoizedProps;
-  const shouldUpdate = hydrateTextInstance(textInstance, textContent, fiber);
+  const shouldWarnIfMismatchDev = !didSuspend;
+  const shouldUpdate = hydrateTextInstance(
+    textInstance,
+    textContent,
+    fiber,
+    shouldWarnIfMismatchDev,
+  );
   if (shouldUpdate) {
     // We assume that prepareToHydrateHostTextInstance is called in a context where the
     // hydration parent is the parent host component of this host text.
@@ -616,6 +640,7 @@ function resetHydrationState(): void {
   hydrationParentFiber = null;
   nextHydratableInstance = null;
   isHydrating = false;
+  didSuspend = false;
 }
 
 export function upgradeHydrationErrorsToRecoverable(): void {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index cc5e3215c786..815cb25ef045 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -83,6 +83,7 @@ import {
 } from './ReactFiberLane.new';
 import {
   getIsHydrating,
+  markDidSuspendWhileHydratingDEV,
   queueHydrationError,
 } from './ReactFiberHydrationContext.new';
 
@@ -513,6 +514,8 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      markDidSuspendWhileHydratingDEV();
+
       const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 727c613d7622..ec89f5ab0cd5 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -83,6 +83,7 @@ import {
 } from './ReactFiberLane.old';
 import {
   getIsHydrating,
+  markDidSuspendWhileHydratingDEV,
   queueHydrationError,
 } from './ReactFiberHydrationContext.old';
 
@@ -513,6 +514,8 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+      markDidSuspendWhileHydratingDEV();
+
       const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.

From a82ef6d40bb0b000a97ca82590bfeaa3637c66bb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 28 Feb 2022 11:14:30 -0500
Subject: [PATCH 1173/1603] Add back skipUnmountedBoundaries flag only for www
 (#23383)

There are a few internal tests that still need to be updated, so I'm
adding this flag back for www only.

The desired behavior rolled out to 10% public, so we're confident there
are no issues.

The open source behavior remains (skipUnmountedBoundaries = true).
---
 .../ReactErrorBoundaries-test.internal.js        |  1 +
 .../src/ReactFiberWorkLoop.new.js                | 16 ++++++++++++++--
 .../src/ReactFiberWorkLoop.old.js                | 16 ++++++++++++++--
 .../__tests__/ReactHooksWithNoopRenderer-test.js |  5 +++++
 ...eactIncrementalErrorHandling-test.internal.js |  1 +
 packages/shared/ReactFeatureFlags.js             |  4 ++++
 .../shared/forks/ReactFeatureFlags.native-fb.js  |  1 +
 .../shared/forks/ReactFeatureFlags.native-oss.js |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js     |  1 +
 .../ReactFeatureFlags.test-renderer.native.js    |  1 +
 .../forks/ReactFeatureFlags.test-renderer.www.js |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js    |  1 +
 .../forks/ReactFeatureFlags.testing.www.js       |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js       |  1 +
 packages/shared/forks/ReactFeatureFlags.www.js   |  1 +
 15 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
index 8b1936cc8e11..c5a1403ddc52 100644
--- a/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
@@ -42,6 +42,7 @@ describe('ReactErrorBoundaries', () => {
     PropTypes = require('prop-types');
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+    ReactFeatureFlags.skipUnmountedBoundaries = true;
     ReactDOM = require('react-dom');
     React = require('react');
     act = require('jest-react').act;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a529454dcd37..7223ad7d052b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -35,6 +35,7 @@ import {
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
+  skipUnmountedBoundaries,
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
@@ -2537,7 +2538,13 @@ export function captureCommitPhaseError(
     return;
   }
 
-  let fiber = nearestMountedAncestor;
+  let fiber = null;
+  if (skipUnmountedBoundaries) {
+    fiber = nearestMountedAncestor;
+  } else {
+    fiber = sourceFiber.return;
+  }
+
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
@@ -2570,9 +2577,14 @@ export function captureCommitPhaseError(
   }
 
   if (__DEV__) {
+    // TODO: Until we re-land skipUnmountedBoundaries (see #20147), this warning
+    // will fire for errors that are thrown by destroy functions inside deleted
+    // trees. What it should instead do is propagate the error to the parent of
+    // the deleted tree. In the meantime, do not add this warning to the
+    // allowlist; this is only for our internal use.
     console.error(
       'Internal React error: Attempted to capture a commit phase error ' +
-        'inside a detached tree. This indicates a bug in React. Potential ' +
+        'inside a detached tree. This indicates a bug in React. Likely ' +
         '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',
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 86ad6216d128..d8bb6b16e29f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -35,6 +35,7 @@ import {
   enableSchedulingProfiler,
   disableSchedulerTimeoutInWorkLoop,
   enableStrictEffects,
+  skipUnmountedBoundaries,
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
@@ -2537,7 +2538,13 @@ export function captureCommitPhaseError(
     return;
   }
 
-  let fiber = nearestMountedAncestor;
+  let fiber = null;
+  if (skipUnmountedBoundaries) {
+    fiber = nearestMountedAncestor;
+  } else {
+    fiber = sourceFiber.return;
+  }
+
   while (fiber !== null) {
     if (fiber.tag === HostRoot) {
       captureCommitPhaseErrorOnRoot(fiber, sourceFiber, error);
@@ -2570,9 +2577,14 @@ export function captureCommitPhaseError(
   }
 
   if (__DEV__) {
+    // TODO: Until we re-land skipUnmountedBoundaries (see #20147), this warning
+    // will fire for errors that are thrown by destroy functions inside deleted
+    // trees. What it should instead do is propagate the error to the parent of
+    // the deleted tree. In the meantime, do not add this warning to the
+    // allowlist; this is only for our internal use.
     console.error(
       'Internal React error: Attempted to capture a commit phase error ' +
-        'inside a detached tree. This indicates a bug in React. Potential ' +
+        'inside a detached tree. This indicates a bug in React. Likely ' +
         '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',
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 97fffdcbd480..811be0963915 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -2351,6 +2351,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         };
       });
 
+      // @gate skipUnmountedBoundaries
       it('should use the nearest still-mounted boundary if there are no unmounted boundaries', () => {
         act(() => {
           ReactNoop.render(
@@ -2376,6 +2377,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
+      // @gate skipUnmountedBoundaries
       it('should skip unmounted boundaries and use the nearest still-mounted boundary', () => {
         function Conditional({showChildren}) {
           if (showChildren) {
@@ -2418,6 +2420,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
+      // @gate skipUnmountedBoundaries
       it('should call getDerivedStateFromError in the nearest still-mounted boundary', () => {
         function Conditional({showChildren}) {
           if (showChildren) {
@@ -2461,6 +2464,7 @@ describe('ReactHooksWithNoopRenderer', () => {
         ]);
       });
 
+      // @gate skipUnmountedBoundaries
       it('should rethrow error if there are no still-mounted boundaries', () => {
         function Conditional({showChildren}) {
           if (showChildren) {
@@ -3186,6 +3190,7 @@ describe('ReactHooksWithNoopRenderer', () => {
       ]);
     });
 
+    // @gate skipUnmountedBoundaries
     it('catches errors thrown in useLayoutEffect', () => {
       class ErrorBoundary extends React.Component {
         state = {error: null};
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 3aa27ceaba69..55ce08b45450 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1017,6 +1017,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(Scheduler).toFlushAndYield(['Foo']);
   });
 
+  // @gate skipUnmountedBoundaries
   it('should not attempt to recover an unmounting error boundary', () => {
     class Parent extends React.Component {
       componentWillUnmount() {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index ba8a3bd437cc..d33d2a92d29c 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -28,6 +28,10 @@ export const enablePersistentOffscreenHostContainer = false;
 // like migrating internal callers or performance testing.
 // -----------------------------------------------------------------------------
 
+// This rolled out to 10% public in www, so we should be able to land, but some
+// internal tests need to be updated. The open source behavior is correct.
+export const skipUnmountedBoundaries = true;
+
 // Destroy layout effects for components that are hidden because something
 // suspended in an update and recreate them when they are shown again (after the
 // suspended boundary has resolved). Note that this should be an uncommon use
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 5bf0f37db9eb..1eb2086c896b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -56,6 +56,7 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 5c97146a82b2..e9850c400a9a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -47,6 +47,7 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b44bc97206d0..cd488a2b7e5d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -47,6 +47,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 4b8c1b774179..54828d7ebd6a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -43,6 +43,7 @@ export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index b6f620e2fb70..6d1dcfa842cc 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -47,6 +47,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index dbfc8fb70453..e6c46ee341f0 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -47,6 +47,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 95fa25cf592c..0ae82026016a 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -47,6 +47,7 @@ export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
+export const skipUnmountedBoundaries = true;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 36627a5d50d3..173713b36cf1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -17,6 +17,7 @@ export const warnAboutSpreadingKeyToJSX = __VARIANT__;
 export const disableInputAttributeSyncing = __VARIANT__;
 export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
+export const skipUnmountedBoundaries = __VARIANT__;
 export const enableUseRefAccessWarning = __VARIANT__;
 export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index ac50fe4fd9f3..cf61f17054d4 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -24,6 +24,7 @@ export const {
   enableLegacyFBSupport,
   deferRenderPhaseUpdateToNextBatch,
   enableDebugTracing,
+  skipUnmountedBoundaries,
   createRootStrictEffectsByDefault,
   enableUseRefAccessWarning,
   disableNativeComponentFrames,

From a2327442157265873bf63f1124c142322f41f6de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Mon, 28 Feb 2022 14:38:13 -0500
Subject: [PATCH 1174/1603] Remove flushControlled from experimental releases
 (#23384)

This brings the exports on npm to parity which simplifies things a bit.

We also don't plan to release this. It is used by Draft.js but that caller
will need to switch to flushSync.
---
 packages/react-dom/index.experimental.js                    | 1 -
 packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index d5db3d8a5940..44f7dcfe0b1e 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -18,7 +18,6 @@ export {
   render,
   unmountComponentAtNode,
   unstable_batchedUpdates,
-  unstable_flushControlled,
   unstable_renderSubtreeIntoContainer,
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   version,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index 79a7351f57f3..4389995171d8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -286,7 +286,7 @@ describe('ReactDOMFiberAsync', () => {
       expect(ops).toEqual(['BC', 'ABCD']);
     });
 
-    // @gate experimental || www
+    // @gate www
     it('flushControlled flushes updates before yielding to browser', () => {
       let inst;
       class Counter extends React.Component {
@@ -326,7 +326,7 @@ describe('ReactDOMFiberAsync', () => {
       ]);
     });
 
-    // @gate experimental || www
+    // @gate www
     it('flushControlled does not flush until end of outermost batchedUpdates', () => {
       let inst;
       class Counter extends React.Component {
@@ -357,7 +357,7 @@ describe('ReactDOMFiberAsync', () => {
       ]);
     });
 
-    // @gate experimental || www
+    // @gate www
     it('flushControlled returns nothing', () => {
       // In the future, we may want to return a thenable "work" object.
       let inst;

From 086fa8ee2f80f0dc34b7d145be72f9843fca975d Mon Sep 17 00:00:00 2001
From: Josh Story <josh.c.story@gmail.com>
Date: Mon, 28 Feb 2022 15:07:39 -0800
Subject: [PATCH 1175/1603] re-trigger load events for img elements on commit
 (#23316)

early load events will be missed by onLoad handlers if they trigger before the tree is committed
to avoid this we reset the src property on the img element to cause the browser to re-load
the img.

Co-authored-by: Josh Story <story@hey.com>
---
 .../ReactDOMImageLoad-test.internal.js        | 576 ++++++++++++++++++
 .../src/client/ReactDOMHostConfig.js          |  48 +-
 2 files changed, 606 insertions(+), 18 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js

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 000000000000..bc7316349196
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
@@ -0,0 +1,576 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let Scheduler;
+// let ReactCache;
+let ReactDOM;
+// let Suspense;
+let originalCreateElement;
+// let TextResource;
+// let textResourceShouldFail;
+
+let images = [];
+let onLoadSpy = null;
+let actualLoadSpy = null;
+
+function PhaseMarkers({children}) {
+  Scheduler.unstable_yieldValue('render start');
+  React.useLayoutEffect(() => {
+    Scheduler.unstable_yieldValue('last layout');
+  });
+  React.useEffect(() => {
+    Scheduler.unstable_yieldValue('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.unstable_yieldValue(props.text);
+  return props.text;
+}
+
+// function AsyncText(props) {
+//   const text = props.text;
+//   try {
+//     TextResource.read([props.text, props.ms]);
+//     Scheduler.unstable_yieldValue(text);
+//     return text;
+//   } catch (promise) {
+//     if (typeof promise.then === 'function') {
+//       Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+//     } else {
+//       Scheduler.unstable_yieldValue(`Error! [${text}]`);
+//     }
+//     throw promise;
+//   }
+// }
+
+function Img({src: maybeSrc, onLoad, useImageLoader, ref}) {
+  const src = maybeSrc || 'default';
+  Scheduler.unstable_yieldValue('Img ' + src);
+  return <img src={src} onLoad={onLoad} />;
+}
+
+function Yield() {
+  Scheduler.unstable_yieldValue('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');
+    // Suspense = React.Suspense;
+
+    onLoadSpy = jest.fn(reactEvent => {
+      const src = reactEvent.target.getAttribute('src');
+      Scheduler.unstable_yieldValue('onLoadSpy [' + src + ']');
+    });
+
+    actualLoadSpy = jest.fn(nativeEvent => {
+      const src = nativeEvent.target.getAttribute('src');
+      Scheduler.unstable_yieldValue('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.unstable_yieldValue(
+    //                     `Promise rejected [${text}]`,
+    //                   );
+    //                   status = 'rejected';
+    //                   value = new Error('Failed to load: ' + text);
+    //                   listeners.forEach(listener => listener.reject(value));
+    //                 } else {
+    //                   Scheduler.unstable_yieldValue(
+    //                     `Promise resolved [${text}]`,
+    //                   );
+    //                   status = 'resolved';
+    //                   value = text;
+    //                   listeners.forEach(listener => listener.resolve(value));
+    //                 }
+    //               }, ms);
+    //             } else {
+    //               listeners.push({resolve, reject});
+    //             }
+    //             break;
+    //           }
+    //           case 'resolved': {
+    //             resolve(value);
+    //             break;
+    //           }
+    //           case 'rejected': {
+    //             reject(value);
+    //             break;
+    //           }
+    //         }
+    //       },
+    //     };
+    //   },
+    //   ([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;
+    };
+
+    Object.defineProperty(HTMLImageElement.prototype, 'src', {
+      get() {
+        return this.getAttribute('src');
+      },
+      set(value) {
+        Scheduler.unstable_yieldValue('load triggered');
+        this.__needsDispatch = true;
+        this.setAttribute('src', value);
+      },
+    });
+  });
+
+  afterEach(() => {
+    document.createElement = originalCreateElement;
+  });
+
+  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 = ReactDOM.createRoot(container);
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <Img onLoad={onLoadSpy} />
+          <Yield />
+          <Text text={'a'} />
+        </PhaseMarkers>,
+      ),
+    );
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      'render start',
+      'Img default',
+      'Yield',
+    ]);
+    const img = last(images);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded([
+      'actualLoadSpy [default]',
+      // no onLoadSpy since we have not completed render
+    ]);
+    expect(Scheduler).toFlushAndYield([
+      'a',
+      'load triggered',
+      'last layout',
+      'last passive',
+    ]);
+    expect(img.__needsDispatch).toBe(true);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded([
+      '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 = ReactDOM.createRoot(container);
+
+    React.startTransition(() =>
+      root.render(
+        <PhaseMarkers>
+          <Img onLoad={onLoadSpy} />
+        </PhaseMarkers>,
+      ),
+    );
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      'render start',
+      'Img default',
+      'load triggered',
+      'last layout',
+    ]);
+    Scheduler.unstable_requestPaint();
+    const img = last(images);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded([
+      'actualLoadSpy [default]',
+      'onLoadSpy [default]',
+    ]);
+    expect(Scheduler).toFlushAndYield(['last passive']);
+    expect(img.__needsDispatch).toBe(false);
+    expect(onLoadSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('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 = ReactDOM.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 />));
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      'render start',
+      'Img a',
+      'Yield',
+    ]);
+    const img = last(images);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded(['actualLoadSpy [a]']);
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      '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);
+    expect(Scheduler).toHaveYielded(['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 = ReactDOM.createRoot(container);
+
+    root.render(
+      <PhaseMarkers>
+        <Img onLoad={onLoadSpy} />
+      </PhaseMarkers>,
+    );
+
+    expect(Scheduler).toFlushAndYield([
+      'render start',
+      'Img default',
+      'load triggered',
+      'last layout',
+      'last passive',
+    ]);
+    const img = last(images);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded([
+      '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 = ReactDOM.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>,
+      ),
+    );
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      'render start',
+      'Img default',
+      'Yield',
+    ]);
+    const img = last(images);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
+    expect(Scheduler).toFlushAndYield([
+      '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
+    expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
+    expect(Scheduler).toFlushWithoutYielding();
+    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 = ReactDOM.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>,
+      ),
+    );
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      // initial render
+      'render start',
+      'Img default',
+      'Yield',
+    ]);
+    const img = last(images);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
+    expect(Scheduler).toFlushAndYield([
+      '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
+    expect(Scheduler).toHaveYielded(['actualLoadSpy [default]']);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(onLoadSpy).not.toHaveBeenCalled();
+  });
+
+  // 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.unstable_yieldValue('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 = ReactDOM.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.unstable_yieldValue('YieldingWithImage');
+      React.useEffect(() => {
+        Scheduler.unstable_yieldValue('Committed');
+      });
+      return (
+        <>
+          <Img src={src} onLoad={onLoadSpy} />
+          <Yield />
+          <Text text={src} />
+        </>
+      );
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOM.createRoot(container);
+
+    root.render(<Base />);
+
+    expect(Scheduler).toFlushWithoutYielding();
+
+    React.startTransition(() => externalSetSrc('a'));
+
+    expect(Scheduler).toFlushAndYieldThrough([
+      'YieldingWithImage',
+      'Img a',
+      'Yield',
+    ]);
+    let img = last(images);
+    loadImage(img);
+    expect(Scheduler).toHaveYielded(['actualLoadSpy [a]']);
+
+    ReactDOM.flushSync(() => externalSetSrcAlt('b'));
+
+    expect(Scheduler).toHaveYielded([
+      'YieldingWithImage',
+      'Img b',
+      'Yield',
+      'b',
+      'load triggered',
+      'Committed',
+    ]);
+    expect(images.length).toBe(2);
+    img = last(images);
+    expect(img.__needsDispatch).toBe(true);
+    loadImage(img);
+
+    expect(Scheduler).toHaveYielded(['actualLoadSpy [b]', 'onLoadSpy [b]']);
+    // why is there another update here?
+    expect(Scheduler).toFlushAndYield([
+      'YieldingWithImage',
+      'Img b',
+      'Yield',
+      'b',
+      'Committed',
+    ]);
+  });
+});
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 97eb494ecba2..fbd04da485fe 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -146,17 +146,6 @@ const STYLE = 'style';
 let eventsEnabled: ?boolean = null;
 let selectionInformation: null | SelectionInformation = null;
 
-function shouldAutoFocusHostComponent(type: string, props: Props): boolean {
-  switch (type) {
-    case 'button':
-    case 'input':
-    case 'select':
-    case 'textarea':
-      return !!props.autoFocus;
-  }
-  return false;
-}
-
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
 
 export function getRootHostContext(
@@ -307,7 +296,17 @@ export function finalizeInitialChildren(
   hostContext: HostContext,
 ): boolean {
   setInitialProperties(domElement, type, props, rootContainerInstance);
-  return shouldAutoFocusHostComponent(type, props);
+  switch (type) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea':
+      return !!props.autoFocus;
+    case 'img':
+      return true;
+    default:
+      return false;
+  }
 }
 
 export function prepareUpdate(
@@ -428,12 +427,25 @@ export function commitMount(
   // 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.
-  if (shouldAutoFocusHostComponent(type, newProps)) {
-    ((domElement: any):
-      | HTMLButtonElement
-      | HTMLInputElement
-      | HTMLSelectElement
-      | HTMLTextAreaElement).focus();
+  switch (type) {
+    case 'button':
+    case 'input':
+    case 'select':
+    case 'textarea':
+      if (newProps.autoFocus) {
+        ((domElement: any):
+          | HTMLButtonElement
+          | HTMLInputElement
+          | HTMLSelectElement
+          | HTMLTextAreaElement).focus();
+      }
+      return;
+    case 'img': {
+      if ((newProps: any).src) {
+        ((domElement: any): HTMLImageElement).src = ((domElement: any): HTMLImageElement).src;
+      }
+      return;
+    }
   }
 }
 

From 75662d6a7d135df9d10055f49c3a4ca09fe4efcc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Mon, 28 Feb 2022 21:35:00 -0500
Subject: [PATCH 1176/1603] Remove hacky stream.locked check, declare as byte
 stream instead (#23387)

We used to check for stream.locked in pull to see if we've been passed to
something that reads yet.

This was a bad hack because it won't actually call pull again if that changes.

The source of this is because the default for "highWaterMark" is 1 on some
streams. So it always wants to add one "chunk" (of size 1).

If we leave our high water mark as 0, we won't fill up any buffers unless we're
asked for more.

This web API is somewhat odd because it would be way more efficient if it
just told us how much the recipient wants instead of calling us once per
chunk.

Anyway, I turns out that if we define ourselves as a "bytes" type of
stream, the default also happens to be a high water mark of 0 so we can
just use that instead.
---
 .../react-dom/src/server/ReactDOMFizzServerBrowser.js    | 9 ++-------
 .../src/ReactFlightDOMServerBrowser.js                   | 9 ++-------
 2 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 15fc69437ca1..a07967ca34f9 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -43,14 +43,9 @@ function renderToReadableStream(
   return new Promise((resolve, reject) => {
     function onCompleteShell() {
       const stream = new ReadableStream({
+        type: 'bytes',
         pull(controller) {
-          // Pull is called immediately even if the stream is not passed to anything.
-          // That's buffering too early. We want to start buffering once the stream
-          // is actually used by something so we can give it the best result possible
-          // at that point.
-          if (stream.locked) {
-            startFlowing(request, controller);
-          }
+          startFlowing(request, controller);
         },
         cancel(reason) {},
       });
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 9d632dfb0712..35518c9d33bf 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -31,17 +31,12 @@ function renderToReadableStream(
     options ? options.onError : undefined,
   );
   const stream = new ReadableStream({
+    type: 'bytes',
     start(controller) {
       startWork(request);
     },
     pull(controller) {
-      // Pull is called immediately even if the stream is not passed to anything.
-      // That's buffering too early. We want to start buffering once the stream
-      // is actually used by something so we can give it the best result possible
-      // at that point.
-      if (stream.locked) {
-        startFlowing(request, controller);
-      }
+      startFlowing(request, controller);
     },
     cancel(reason) {},
   });

From 17806594cc28284fe195f918e8d77de3516848ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 1 Mar 2022 00:13:28 -0500
Subject: [PATCH 1177/1603] Move createRoot/hydrateRoot to react-dom/client
 (#23385)

* Move createRoot/hydrateRoot to /client

We want these APIs ideally to be imported separately from things you
might use in arbitrary components (like flushSync). Those other methods
are "isomorphic" to how the ReactDOM tree is rendered. Similar to hooks.

E.g. importing flushSync into a component that only uses it on the client
should ideally not also pull in the entry client implementation on the
server.

This also creates a nicer parity with /server where the roots are in a
separate entry point.

Unfortunately, I can't quite do this yet because we have some legacy APIs
that we plan on removing (like findDOMNode) and we also haven't implemented
flushSync using a flag like startTransition does yet.

Another problem is that we currently encourage these APIs to be aliased by
/profiling (or unstable_testing). In the future you don't have to alias
them because you can just change your roots to just import those APIs and
they'll still work with the isomorphic forms. Although we might also just
use export conditions for them.

For that all to work, I went with a different strategy for now where the
real API is in / but it comes with a warning if you use it. If you instead
import /client it disables the warning in a wrapper. That means that if you
alias / then import /client that will inturn import the alias and it'll
just work.

In a future breaking changes (likely when we switch to ESM) we can just
remove createRoot/hydrateRoot from / and move away from the aliasing
strategy.

* Update tests to import from react-dom/client

* Fix fixtures

* Update warnings

* Add test for the warning

* Update devtools

* Change order of react-dom, react-dom/client alias

I think the order matters here. The first one takes precedence.

* Require react-dom through client so it can be aliased

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 fixtures/blocks/src/index.js                  |   2 +-
 fixtures/concurrent/time-slicing/src/index.js |   2 +-
 fixtures/ssr/src/index.js                     |   2 +-
 fixtures/ssr/yarn.lock                        |  10 +-
 fixtures/ssr2/src/index.js                    |   2 +-
 .../react-devtools-core/src/standalone.js     |   5 +-
 .../react-devtools-core/webpack.standalone.js |   1 +
 .../webpack.config.js                         |   1 +
 packages/react-devtools-inline/README.md      |   8 +-
 .../react-devtools-inline/webpack.config.js   |   1 +
 .../src/__tests__/TimelineProfiler-test.js    |   6 +-
 .../src/__tests__/console-test.js             |  18 +--
 .../src/__tests__/inspectedElement-test.js    |  14 +-
 .../src/__tests__/preprocessData-test.js      |  49 +++++--
 .../src/__tests__/profilingCache-test.js      |   8 +-
 .../profilingCommitTreeBuilder-test.js        |   8 +-
 .../src/__tests__/profilingHostRoot-test.js   |   8 +-
 .../src/__tests__/store-test.js               |  16 ++-
 .../storeStressTestConcurrent-test.js         |  44 +++----
 .../react-devtools-shell/src/app/index.js     |   8 +-
 packages/react-devtools-shell/src/e2e/app.js  |   4 +-
 .../react-devtools-shell/src/e2e/devtools.js  |   3 +-
 .../react-devtools-shell/webpack.config.js    |   1 +
 packages/react-dom/client.js                  |  57 +++++++++
 packages/react-dom/npm/client.js              |  25 ++++
 packages/react-dom/package.json               |   2 +
 .../ReactDOMConsoleErrorReporting-test.js     |  18 +--
 .../src/__tests__/ReactDOMFiberAsync-test.js  |  24 ++--
 .../src/__tests__/ReactDOMFizzServer-test.js  |  41 +++---
 .../ReactDOMFizzShellHydration-test.js        |  10 +-
 .../src/__tests__/ReactDOMHooks-test.js       |   4 +-
 .../ReactDOMImageLoad-test.internal.js        |  18 +--
 .../ReactDOMNativeEventHeuristic-test.js      |  18 +--
 .../__tests__/ReactDOMNestedEvents-test.js    |   6 +-
 .../src/__tests__/ReactDOMRoot-test.js        |  92 +++++++++-----
 .../ReactDOMSafariMicrotaskBug-test.js        |   6 +-
 ...DOMServerPartialHydration-test.internal.js | 120 ++++++++++--------
 ...MServerSelectiveHydration-test.internal.js |  44 ++++---
 .../ReactDOMServerSuspense-test.internal.js   |   4 +-
 .../src/__tests__/ReactDOMUseId-test.js       |  26 ++--
 .../ReactServerRenderingHydration-test.js     |   4 +-
 .../src/__tests__/ReactTestUtilsAct-test.js   |   6 +-
 .../src/__tests__/ReactUpdates-test.js        |   6 +-
 packages/react-dom/src/client/ReactDOM.js     |  43 ++++++-
 .../react-dom/src/client/ReactDOMLegacy.js    |   6 +-
 packages/react-dom/src/client/ReactDOMRoot.js |   6 +-
 .../DOMPluginEventSystem-test.internal.js     |  16 ++-
 .../__tests__/ChangeEventPlugin-test.js       |  14 +-
 .../__tests__/SimpleEventPlugin-test.js       |   7 +-
 .../__tests__/useFocusWithin-test.internal.js |   6 +-
 .../src/ReactFiberBeginWork.new.js            |   2 +-
 .../src/ReactFiberBeginWork.old.js            |   2 +-
 .../src/ReactFiberDevToolsHook.new.js         |   6 +-
 .../src/ReactFiberDevToolsHook.old.js         |   6 +-
 .../src/__tests__/ReactScope-test.internal.js |   4 +-
 .../ReactSuspenseEffectsSemanticsDOM-test.js  |   6 +-
 .../__tests__/ReactUpdaters-test.internal.js  |   8 +-
 .../useMutableSourceHydration-test.js         |  16 +--
 .../src/__tests__/ReactFresh-test.js          |   4 +-
 .../ReactFlightDOMRelay-test.internal.js      |   6 +-
 .../src/__tests__/ReactFlightDOM-test.js      |  14 +-
 .../__tests__/ReactFlightDOMBrowser-test.js   |   6 +-
 .../ReactCoffeeScriptClass-test.coffee        |   4 +-
 .../react/src/__tests__/ReactES6Class-test.js |   4 +-
 .../ReactStrictMode-test.internal.js          |  12 +-
 .../src/__tests__/ReactStrictMode-test.js     |  13 +-
 .../__tests__/ReactTypeScriptClass-test.ts    |   4 +-
 .../__tests__/testDefinitions/ReactDOM.d.ts   |   1 -
 .../testDefinitions/ReactDOMClient.d.ts       |  18 +++
 .../useSyncExternalStoreShared-test.js        |   6 +-
 scripts/jest/typescript/preprocessor.js       |   2 +-
 scripts/shared/inlinedHostConfigs.js          |  10 ++
 72 files changed, 648 insertions(+), 356 deletions(-)
 create mode 100644 packages/react-dom/client.js
 create mode 100644 packages/react-dom/npm/client.js
 create mode 100644 packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts

diff --git a/fixtures/blocks/src/index.js b/fixtures/blocks/src/index.js
index be279937f4d3..5a833ff3f112 100644
--- a/fixtures/blocks/src/index.js
+++ b/fixtures/blocks/src/index.js
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import './index.css';
 import Router from './Router';
 
diff --git a/fixtures/concurrent/time-slicing/src/index.js b/fixtures/concurrent/time-slicing/src/index.js
index c871ec6c1122..2b99f803f55c 100644
--- a/fixtures/concurrent/time-slicing/src/index.js
+++ b/fixtures/concurrent/time-slicing/src/index.js
@@ -1,5 +1,5 @@
 import React, {PureComponent, unstable_startTransition} from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import _ from 'lodash';
 import Charts from './Charts';
 import Clock from './Clock';
diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index 8bef3639ae75..37cc25cb7167 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {hydrateRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom/client';
 
 import App from './components/App';
 
diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index d3a688915784..3609381253bc 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -4265,7 +4265,7 @@ longest@^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.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==
@@ -5945,6 +5945,14 @@ sax@^1.2.1, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.20.1:
+  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"
+
 "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"
diff --git a/fixtures/ssr2/src/index.js b/fixtures/ssr2/src/index.js
index adf035ad1a88..10c2898e328b 100644
--- a/fixtures/ssr2/src/index.js
+++ b/fixtures/ssr2/src/index.js
@@ -6,7 +6,7 @@
  *
  */
 
-import {hydrateRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom/client';
 import App from './App';
 
 hydrateRoot(document, <App assets={window.assetManifest} />);
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index ab3250d7cff7..c04cad1ddea0 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -11,9 +11,8 @@ import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about flushSync()
   flushSync,
-  // $FlowFixMe Flow does not yet know about createRoot()
-  createRoot,
-} from 'react-dom';
+} from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {
diff --git a/packages/react-devtools-core/webpack.standalone.js b/packages/react-devtools-core/webpack.standalone.js
index 234d638353f4..b7732d664169 100644
--- a/packages/react-devtools-core/webpack.standalone.js
+++ b/packages/react-devtools-core/webpack.standalone.js
@@ -64,6 +64,7 @@ module.exports = {
       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'),
diff --git a/packages/react-devtools-extensions/webpack.config.js b/packages/react-devtools-extensions/webpack.config.js
index ac7c51f3bdc5..3a913e037380 100644
--- a/packages/react-devtools-extensions/webpack.config.js
+++ b/packages/react-devtools-extensions/webpack.config.js
@@ -76,6 +76,7 @@ module.exports = {
       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'),
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index fe071633528c..53edee429bd0 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -60,7 +60,7 @@ const contentWindow = iframe.contentWindow;
 const DevTools = initialize(contentWindow);
 ```
 
-<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.createRoot` or `ReactDOM.createSyncRoot`. **It should not be rendered with `ReactDOM.render`.**
+<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using `ReactDOMClient.createRoot`. **It should not be rendered with `ReactDOM.render`.**
 
 ## Examples
 
@@ -110,8 +110,7 @@ const DevTools = initializeFrontend(contentWindow);
 // 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 either ReactDOM.createRoot()
-// or ReactDOM.createSyncRoot() to render this component.
+// Be sure to use ReactDOMClient.createRoot() to render this component.
 
 // Let the backend know the frontend is ready and listening.
 activateBackend(contentWindow);
@@ -154,8 +153,7 @@ const { contentWindow } = iframe;
 
 // Initialize DevTools UI to listen to the iframe.
 // This returns a React component we can render anywhere in the main window.
-// Be sure to use either ReactDOM.createRoot()
-// or ReactDOM.createSyncRoot() to render this component.
+// Be sure to use ReactDOMClient.createRoot() to render this component.
 const DevTools = initialize(contentWindow);
 
 // Let the backend know to initialize itself.
diff --git a/packages/react-devtools-inline/webpack.config.js b/packages/react-devtools-inline/webpack.config.js
index c53a61b61d41..910204b6d81e 100644
--- a/packages/react-devtools-inline/webpack.config.js
+++ b/packages/react-devtools-inline/webpack.config.js
@@ -51,6 +51,7 @@ module.exports = {
   externals: {
     react: 'react',
     'react-dom': 'react-dom',
+    'react-dom/client': 'react-dom/client',
     'react-is': 'react-is',
     scheduler: 'scheduler',
   },
diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
index f010261a616e..859be719c2ad 100644
--- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -11,7 +11,7 @@
 
 describe('Timeline profiler', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let renderHelper;
   let renderRootHelper;
@@ -31,7 +31,7 @@ describe('Timeline profiler', () => {
     };
     renderRootHelper = element => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(element);
       const unmountFn = () => root.unmount();
       unmountFns.push(unmountFn);
@@ -39,7 +39,7 @@ describe('Timeline profiler', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     store = global.store;
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 1129c153267c..9d69e6c70557 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -7,7 +7,7 @@
  * @flow
  */
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let act;
 let fakeConsole;
 let legacyRender;
@@ -53,7 +53,7 @@ describe('console', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -476,7 +476,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -515,7 +515,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -557,7 +557,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -605,7 +605,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -639,7 +639,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
@@ -719,7 +719,7 @@ describe('console error', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -728,7 +728,7 @@ describe('console error', () => {
 
   it('error in console log throws without interfering with logging', () => {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 7c67a4084ae3..b09a54888657 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -16,6 +16,7 @@ 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;
@@ -52,6 +53,7 @@ describe('InspectedElement', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     PropTypes = require('prop-types');
     TestUtilsAct = require('jest-react').act;
     TestRenderer = utils.requireTestRenderer();
@@ -506,7 +508,7 @@ describe('InspectedElement', () => {
     });
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await utils.actAsync(() => root.render(<Target a={1} b="abc" />));
 
     expect(targetRenderCount).toBe(1);
@@ -2091,25 +2093,25 @@ describe('InspectedElement', () => {
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
   });
 
-  it('should display the root type for ReactDOM.hydrateRoot', async () => {
+  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>';
-      ReactDOM.hydrateRoot(container).render(<Example />);
+      ReactDOMClient.hydrateRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
   });
 
-  it('should display the root type for ReactDOM.createRoot', async () => {
+  it('should display the root type for ReactDOMClient.createRoot', async () => {
     const Example = () => <div />;
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -2133,7 +2135,7 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     shouldThrow = true;
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index 0d5ebff509b9..72086a684cd4 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -12,6 +12,7 @@
 describe('Timeline profiler', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let utils;
 
@@ -76,6 +77,7 @@ describe('Timeline profiler', () => {
 
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
 
       setPerformanceMock = require('react-devtools-shared/src/backend/profilingHooks')
@@ -797,7 +799,7 @@ describe('Timeline profiler', () => {
           return true;
         }
 
-        const root = ReactDOM.createRoot(document.createElement('div'));
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
         utils.act(() => root.render(<App />));
 
         const data = await preprocessData([
@@ -1222,7 +1224,7 @@ describe('Timeline profiler', () => {
 
         const testMarks = [creactCpuProfilerSample()];
 
-        const root = ReactDOM.createRoot(document.createElement('div'));
+        const root = ReactDOMClient.createRoot(document.createElement('div'));
         utils.act(() =>
           root.render(
             <React.Suspense fallback="Loading...">
@@ -1342,7 +1344,9 @@ describe('Timeline profiler', () => {
             // Advance the clock by some arbitrary amount.
             startTime += 50000;
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            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;
@@ -1398,7 +1402,9 @@ describe('Timeline profiler', () => {
               return didMount;
             }
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1434,7 +1440,9 @@ describe('Timeline profiler', () => {
               }
             }
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1471,7 +1479,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1530,7 +1540,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1599,7 +1611,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1664,7 +1678,9 @@ describe('Timeline profiler', () => {
 
             const cpuProfilerSample = creactCpuProfilerSample();
 
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() => {
               root.render(<Component />);
             });
@@ -1730,7 +1746,9 @@ describe('Timeline profiler', () => {
             const testMarks = [creactCpuProfilerSample()];
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <ErrorBoundary>
@@ -1775,7 +1793,9 @@ describe('Timeline profiler', () => {
             }
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <React.Suspense fallback="Loading...">
@@ -1830,7 +1850,9 @@ describe('Timeline profiler', () => {
             }
 
             // Mount and commit the app
-            const root = ReactDOM.createRoot(document.createElement('div'));
+            const root = ReactDOMClient.createRoot(
+              document.createElement('div'),
+            );
             utils.act(() =>
               root.render(
                 <React.Suspense fallback="Loading...">
@@ -1881,6 +1903,7 @@ describe('Timeline profiler', () => {
 
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
 
       store = global.store;
@@ -2071,7 +2094,7 @@ describe('Timeline profiler', () => {
         return true;
       }
 
-      const root = ReactDOM.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
       utils.act(() => root.render(<App />));
       utils.act(() => store.profilerStore.stopProfiling());
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 67db757461a6..f41e39a35d69 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -15,6 +15,7 @@ describe('ProfilingCache', () => {
   let PropTypes;
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
@@ -36,6 +37,7 @@ describe('ProfilingCache', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     TestRenderer = utils.requireTestRenderer();
   });
@@ -771,7 +773,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
@@ -805,7 +807,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
@@ -834,7 +836,7 @@ describe('ProfilingCache', () => {
       return <>{!childUnmounted && <Child />}</>;
     }
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     utils.act(() => root.render(<App />));
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => setChildUnmounted(true));
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index 9923fb33aa82..f218af7730ec 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -12,7 +12,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('commit tree', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let TestRenderer: TestRendererType;
   let legacyRender;
@@ -30,7 +30,7 @@ describe('commit tree', () => {
     store.recordChangeDescriptions = true;
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     TestRenderer = utils.requireTestRenderer();
   });
@@ -146,7 +146,7 @@ describe('commit tree', () => {
 
     it('should support Lazy components (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
@@ -219,7 +219,7 @@ describe('commit tree', () => {
 
     it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
diff --git a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
index 61dc9f6bfd63..9f26e7391d61 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -9,7 +9,7 @@
 
 describe('profiling HostRoot', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let legacyRender;
   let store: Store;
@@ -29,7 +29,7 @@ describe('profiling HostRoot', () => {
     store = global.store;
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     effectDurations = [];
@@ -91,7 +91,7 @@ describe('profiling HostRoot', () => {
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<App />);
     });
     utils.act(() => store.profilerStore.stopProfiling());
@@ -124,7 +124,7 @@ describe('profiling HostRoot', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => root.render(<App />));
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index ee7c65a15682..c7b8d7aab796 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -10,6 +10,7 @@
 describe('Store', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let agent;
   let act;
   let bridge;
@@ -25,6 +26,7 @@ describe('Store', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -120,7 +122,9 @@ describe('Store', () => {
       const Component = () => null;
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container, {unstable_strictMode: true});
+      const root = ReactDOMClient.createRoot(container, {
+        unstable_strictMode: true,
+      });
       act(() => {
         root.render(<App />);
       });
@@ -134,7 +138,7 @@ describe('Store', () => {
       const Component = () => null;
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<App />);
       });
@@ -152,7 +156,7 @@ describe('Store', () => {
       const Component = () => null;
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<App />);
       });
@@ -466,7 +470,7 @@ describe('Store', () => {
       );
 
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<Wrapper shouldSuspense={true} />);
       });
@@ -1070,7 +1074,7 @@ describe('Store', () => {
 
     it('should support Lazy components in (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
@@ -1106,7 +1110,7 @@ describe('Store', () => {
 
     it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index d8f6d67a2ad7..af1541f841eb 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -9,7 +9,7 @@
 
 describe('StoreStressConcurrent', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let act;
   let actAsync;
   let bridge;
@@ -22,7 +22,7 @@ describe('StoreStressConcurrent', () => {
     store.collapseNodesByDefault = false;
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    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.
@@ -67,7 +67,7 @@ describe('StoreStressConcurrent', () => {
     // 1. Render a normal version of [a, b, c, d, e].
     let container = document.createElement('div');
     // $FlowFixMe
-    let root = ReactDOM.createRoot(container);
+    let root = ReactDOMClient.createRoot(container);
     act(() => root.render(<Parent>{[a, b, c, d, e]}</Parent>));
     expect(store).toMatchInlineSnapshot(
       `
@@ -151,7 +151,7 @@ describe('StoreStressConcurrent', () => {
       // Ensure fresh mount.
       container = document.createElement('div');
       // $FlowFixMe
-      root = ReactDOM.createRoot(container);
+      root = ReactDOMClient.createRoot(container);
 
       // Verify mounting 'abcde'.
       act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -181,7 +181,7 @@ describe('StoreStressConcurrent', () => {
     // There'll be no unmounting until the very end.
     container = document.createElement('div');
     // $FlowFixMe
-    root = ReactDOM.createRoot(container);
+    root = ReactDOMClient.createRoot(container);
     for (let i = 0; i < cases.length; i++) {
       // Verify mounting 'abcde'.
       act(() => root.render(<Parent>{cases[i]}</Parent>));
@@ -248,7 +248,7 @@ describe('StoreStressConcurrent', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => root.render(<Root>{steps[i]}</Root>));
       // We snapshot each step once so it doesn't regress.
       snapshots.push(print(store));
@@ -320,7 +320,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() => root.render(<Root>{steps[i]}</Root>));
         expect(print(store)).toMatch(snapshots[i]);
         act(() => root.render(<Root>{steps[j]}</Root>));
@@ -337,7 +337,7 @@ describe('StoreStressConcurrent', () => {
       for (let j = 0; j < steps.length; j++) {
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -410,7 +410,7 @@ describe('StoreStressConcurrent', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -513,7 +513,7 @@ describe('StoreStressConcurrent', () => {
     // 2. Verify check Suspense can render same steps as initial fallback content.
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -538,7 +538,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -584,7 +584,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -642,7 +642,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -692,7 +692,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -746,7 +746,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -901,7 +901,7 @@ describe('StoreStressConcurrent', () => {
     let container = document.createElement('div');
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -925,7 +925,7 @@ describe('StoreStressConcurrent', () => {
     const fallbackSnapshots = [];
     for (let i = 0; i < steps.length; i++) {
       // $FlowFixMe
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() =>
         root.render(
           <Root>
@@ -1059,7 +1059,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1111,7 +1111,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1178,7 +1178,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1230,7 +1230,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
@@ -1282,7 +1282,7 @@ describe('StoreStressConcurrent', () => {
         // Always start with a fresh container and steps[i].
         container = document.createElement('div');
         // $FlowFixMe
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         act(() =>
           root.render(
             <Root>
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index f949b8598f48..b00ea8ad6e90 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -3,12 +3,8 @@
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
 import {createElement} from 'react';
-import {
-  // $FlowFixMe Flow does not yet know about createRoot()
-  createRoot,
-  render,
-  unmountComponentAtNode,
-} from 'react-dom';
+import {createRoot} from 'react-dom/client';
+import {render, unmountComponentAtNode} from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import Iframe from './Iframe';
 import EditableProps from './EditableProps';
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
index a3885e933136..71f33f904487 100644
--- a/packages/react-devtools-shell/src/e2e/app.js
+++ b/packages/react-devtools-shell/src/e2e/app.js
@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 
 const container = document.createElement('div');
 
@@ -13,8 +14,7 @@ const container = document.createElement('div');
 // so that it can load things other than just ToDoList.
 const App = require('./apps/ListApp').default;
 
-// $FlowFixMe Flow doesn't know about createRoot() yet.
-const root = ReactDOM.createRoot(container);
+const root = ReactDOMClient.createRoot(container);
 root.render(<App />);
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
index 5665be4c5f13..059d330e83c9 100644
--- a/packages/react-devtools-shell/src/e2e/devtools.js
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -1,5 +1,6 @@
 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,
@@ -33,7 +34,7 @@ function init(appIframe, devtoolsContainer, appSource) {
 
   inject(contentDocument, appSource, () => {
     // $FlowFixMe Flow doesn't know about createRoot() yet.
-    ReactDOM.createRoot(devtoolsContainer).render(
+    ReactDOMClient.createRoot(devtoolsContainer).render(
       <DevTools
         hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
         showTabBar={true}
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 496bdabd6b76..498b4387c603 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -60,6 +60,7 @@ const config = {
       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/client'),
       'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
diff --git a/packages/react-dom/client.js b/packages/react-dom/client.js
new file mode 100644
index 000000000000..694b75eb1e5f
--- /dev/null
+++ b/packages/react-dom/client.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+'use strict';
+
+import type {Container} from './src/client/ReactDOMHostConfig';
+import type {ReactNodeList} from 'shared/ReactTypes';
+import type {
+  RootType,
+  HydrateRootOptions,
+  CreateRootOptions,
+} from './src/client/ReactDOMRoot';
+
+import {
+  createRoot as createRootImpl,
+  hydrateRoot as hydrateRootImpl,
+  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED as Internals,
+} from './';
+
+export function createRoot(
+  container: Container,
+  options?: CreateRootOptions,
+): RootType {
+  if (__DEV__) {
+    Internals.usingClientEntryPoint = true;
+  }
+  try {
+    return createRootImpl(container, options);
+  } finally {
+    if (__DEV__) {
+      Internals.usingClientEntryPoint = false;
+    }
+  }
+}
+
+export function hydrateRoot(
+  container: Container,
+  children: ReactNodeList,
+  options?: HydrateRootOptions,
+): RootType {
+  if (__DEV__) {
+    Internals.usingClientEntryPoint = true;
+  }
+  try {
+    return hydrateRootImpl(container, children, options);
+  } finally {
+    if (__DEV__) {
+      Internals.usingClientEntryPoint = false;
+    }
+  }
+}
diff --git a/packages/react-dom/npm/client.js b/packages/react-dom/npm/client.js
new file mode 100644
index 000000000000..8e611088d0a3
--- /dev/null
+++ b/packages/react-dom/npm/client.js
@@ -0,0 +1,25 @@
+'use strict';
+
+var m = require('react-dom');
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = m.createRoot;
+  exports.hydrateRoot = m.hydrateRoot;
+} else {
+  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return m.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 25207ffc9c39..655b9947fa50 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -27,6 +27,7 @@
     "LICENSE",
     "README.md",
     "index.js",
+    "client.js",
     "profiling.js",
     "server.js",
     "server.browser.js",
@@ -38,6 +39,7 @@
   ],
   "exports": {
     ".": "./index.js",
+    "./client": "./client.js",
     "./server": {
       "deno": "./server.browser.js",
       "worker": "./server.browser.js",
diff --git a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
index 3507e2440981..1f26e615bb01 100644
--- a/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMConsoleErrorReporting-test.js
@@ -11,6 +11,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
   let act;
   let React;
   let ReactDOM;
+  let ReactDOMClient;
 
   let ErrorBoundary;
   let NoError;
@@ -22,6 +23,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
     act = require('jest-react').act;
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     ErrorBoundary = class extends React.Component {
       state = {error: null};
@@ -49,7 +51,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
     window.removeEventListener('error', windowOnError);
   });
 
-  describe('ReactDOM.createRoot', () => {
+  describe('ReactDOMClient.createRoot', () => {
     it('logs errors during event handlers', () => {
       spyOnDevAndProd(console, 'error');
 
@@ -64,7 +66,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(<Foo />);
       });
@@ -150,7 +152,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         throw Error('Boom');
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       expect(() => {
         act(() => {
           root.render(<Foo />);
@@ -230,7 +232,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         throw Error('Boom');
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(
           <ErrorBoundary>
@@ -315,7 +317,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       expect(() => {
         act(() => {
           root.render(<Foo />);
@@ -383,7 +385,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(
           <ErrorBoundary>
@@ -453,7 +455,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       expect(() => {
         act(() => {
           root.render(<Foo />);
@@ -521,7 +523,7 @@ describe('ReactDOMConsoleErrorReporting', () => {
         return null;
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       act(() => {
         root.render(
           <ErrorBoundary>
diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
index 4389995171d8..a7cecb029b33 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.js
@@ -12,6 +12,7 @@
 let React;
 
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 
@@ -28,6 +29,7 @@ describe('ReactDOMFiberAsync', () => {
     container = document.createElement('div');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
 
@@ -184,7 +186,7 @@ describe('ReactDOMFiberAsync', () => {
           );
         }
       }
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Counter />);
       Scheduler.unstable_flushAll();
       expect(asyncValueRef.current.textContent).toBe('');
@@ -204,7 +206,7 @@ describe('ReactDOMFiberAsync', () => {
     });
 
     it('top-level updates are concurrent', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<div>Hi</div>);
       expect(container.textContent).toEqual('');
       Scheduler.unstable_flushAll();
@@ -226,7 +228,7 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Component />);
       expect(container.textContent).toEqual('');
       Scheduler.unstable_flushAll();
@@ -256,7 +258,7 @@ describe('ReactDOMFiberAsync', () => {
         }
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Component />);
       Scheduler.unstable_flushAll();
 
@@ -298,7 +300,7 @@ describe('ReactDOMFiberAsync', () => {
           return this.state.counter;
         }
       }
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<Counter />);
       Scheduler.unstable_flushAll();
       expect(container.textContent).toEqual('0');
@@ -401,7 +403,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -452,7 +454,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -511,7 +513,7 @@ describe('ReactDOMFiberAsync', () => {
         );
       }
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       await act(async () => {
         root.render(<Form />);
       });
@@ -576,7 +578,7 @@ describe('ReactDOMFiberAsync', () => {
   });
 
   it('updates flush without yielding in the next event', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function Text(props) {
       Scheduler.unstable_yieldValue(props.text);
@@ -621,7 +623,7 @@ describe('ReactDOMFiberAsync', () => {
       return <button ref={ref}>new</button>;
     }
 
-    const oldRoot = ReactDOM.createRoot(container);
+    const oldRoot = ReactDOMClient.createRoot(container);
     act(() => {
       oldRoot.render(<OldApp />);
     });
@@ -633,7 +635,7 @@ describe('ReactDOMFiberAsync', () => {
     expect(container.textContent).toBe('');
 
     // We can now render a new one.
-    const newRoot = ReactDOM.createRoot(container);
+    const newRoot = ReactDOMClient.createRoot(container);
     ReactDOM.flushSync(() => {
       newRoot.render(<NewApp />);
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 0b14e567c7e0..90b339bb281e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -13,7 +13,7 @@ let JSDOM;
 let Stream;
 let Scheduler;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMFizzServer;
 let Suspense;
 let SuspenseList;
@@ -36,7 +36,7 @@ describe('ReactDOMFizzServer', () => {
     JSDOM = require('jsdom').JSDOM;
     Scheduler = require('scheduler');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     if (__EXPERIMENTAL__) {
       ReactDOMFizzServer = require('react-dom/server');
     }
@@ -346,7 +346,7 @@ describe('ReactDOMFizzServer', () => {
     // Client-side
     const [HydrateApp, hydrateResolve] = makeApp();
     await act(async () => {
-      ReactDOM.hydrateRoot(container, <HydrateApp />);
+      ReactDOMClient.hydrateRoot(container, <HydrateApp />);
     });
 
     expect(getVisibleChildren(container)).toEqual(
@@ -424,7 +424,7 @@ describe('ReactDOMFizzServer', () => {
     window.__INIT__ = function() {
       bootstrapped = true;
       // Attempt to hydrate the content.
-      ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -538,7 +538,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -611,7 +611,7 @@ describe('ReactDOMFizzServer', () => {
     window.__INIT__ = function() {
       bootstrapped = true;
       // Attempt to hydrate the content.
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     };
 
     await act(async () => {
@@ -708,7 +708,7 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([]);
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
 
     // We're still loading because we're waiting for the server to stream more content.
@@ -779,7 +779,10 @@ describe('ReactDOMFizzServer', () => {
       pipe(writable);
     });
 
-    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showMore={false} />,
+    );
     Scheduler.unstable_flushAll();
 
     // We're not hydrated yet.
@@ -846,7 +849,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1542,7 +1545,7 @@ describe('ReactDOMFizzServer', () => {
     // We're still showing a fallback.
 
     // Attempt to hydrate the content.
-    ReactDOM.hydrateRoot(container, <App isClient={true} />, {
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1731,7 +1734,7 @@ describe('ReactDOMFizzServer', () => {
 
     let root;
     await act(async () => {
-      root = ReactDOM.hydrateRoot(container, <App isClient={false} />);
+      root = ReactDOMClient.hydrateRoot(container, <App isClient={false} />);
       Scheduler.unstable_flushAll();
       await jest.runAllTimers();
     });
@@ -1817,7 +1820,7 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Log recoverable error: ' + error.message,
@@ -1917,7 +1920,7 @@ describe('ReactDOMFizzServer', () => {
     });
     expect(Scheduler).toHaveYielded(['server']);
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Log recoverable error: ' + error.message,
@@ -2019,7 +2022,7 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -2110,7 +2113,7 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -2198,7 +2201,7 @@ describe('ReactDOMFizzServer', () => {
 
       // Hydrate the tree. Child will throw during render.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(
             'Log recoverable error: ' + error.message,
@@ -2280,7 +2283,7 @@ describe('ReactDOMFizzServer', () => {
       // Hydrate the tree. Child will throw during hydration, but not when it
       // falls back to client rendering.
       isClient = true;
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -2349,7 +2352,7 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container, {
+    const root = ReactDOMClient.createRoot(container, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Logged a recoverable error: ' + error.message,
@@ -2431,7 +2434,7 @@ describe('ReactDOMFizzServer', () => {
     // Hydrate the tree. Child will throw during hydration, but not when it
     // falls back to client rendering.
     isClient = true;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Logged recoverable error: ' + error.message,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
index f2668b74fe67..f3ff64daeec4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -9,7 +9,7 @@
 
 let JSDOM;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let clientAct;
 let ReactDOMFizzServer;
@@ -27,7 +27,7 @@ describe('ReactDOMFizzShellHydration', () => {
     jest.resetModules();
     JSDOM = require('jsdom').JSDOM;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     clientAct = require('jest-react').act;
     ReactDOMFizzServer = require('react-dom/server');
@@ -180,7 +180,7 @@ describe('ReactDOMFizzShellHydration', () => {
 
     // Hydration suspends because the data for the shell hasn't loaded yet
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(Scheduler).toHaveYielded(['Suspend! [Shell]']);
     expect(div.current).toBe(null);
@@ -201,7 +201,7 @@ describe('ReactDOMFizzShellHydration', () => {
       return <AsyncText text="Shell" />;
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await clientAct(async () => {
       root.render(<App />);
     });
@@ -232,7 +232,7 @@ describe('ReactDOMFizzShellHydration', () => {
 
     // Hydration suspends because the data for the shell hasn't loaded yet
     const root = await clientAct(async () => {
-      return ReactDOM.hydrateRoot(container, <App />, {
+      return ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
diff --git a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
index 7aed4305876b..58613152f7fc 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHooks-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 
@@ -22,6 +23,7 @@ describe('ReactDOMHooks', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
 
@@ -127,7 +129,7 @@ describe('ReactDOMHooks', () => {
     const inputRef = createRef();
     const labelRef = createRef();
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<Example inputRef={inputRef} labelRef={labelRef} />);
 
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
index bc7316349196..dc6c35ad9349 100644
--- a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
@@ -13,6 +13,7 @@ let React;
 let Scheduler;
 // let ReactCache;
 let ReactDOM;
+let ReactDOMClient;
 // let Suspense;
 let originalCreateElement;
 // let TextResource;
@@ -89,6 +90,7 @@ describe('ReactDOMImageLoad', () => {
     Scheduler = require('scheduler');
     // ReactCache = require('react-cache');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     // Suspense = React.Suspense;
 
     onLoadSpy = jest.fn(reactEvent => {
@@ -181,7 +183,7 @@ describe('ReactDOMImageLoad', () => {
 
   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 = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     React.startTransition(() =>
       root.render(
@@ -221,7 +223,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('captures the load event if it happens after commit phase and replays it', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     React.startTransition(() =>
       root.render(
@@ -251,7 +253,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('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 = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function Base() {
       const [src, setSrc] = React.useState('a');
@@ -302,7 +304,7 @@ describe('ReactDOMImageLoad', () => {
 
   it('replays load events that happen in passive phase after the passive phase.', async function() {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     root.render(
       <PhaseMarkers>
@@ -328,7 +330,7 @@ describe('ReactDOMImageLoad', () => {
 
   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 = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function ChildSuppressing({children}) {
       const [showChildren, update] = React.useState(true);
@@ -377,7 +379,7 @@ describe('ReactDOMImageLoad', () => {
 
   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 = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function Switch({children}) {
       const [shouldShow, updateShow] = React.useState(true);
@@ -456,7 +458,7 @@ describe('ReactDOMImageLoad', () => {
   //   }
 
   //   const container = document.createElement('div');
-  //   const root = ReactDOM.createRoot(container);
+  //   const root = ReactDOMClient.createRoot(container);
 
   //   React.startTransition(() => root.render(<SuspendingWithImage />));
 
@@ -531,7 +533,7 @@ describe('ReactDOMImageLoad', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     root.render(<Base />);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
index 94c5fe35290b..ab7609b142fe 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNativeEventHeuristic-test.js
@@ -12,6 +12,7 @@
 let React;
 
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 
@@ -23,6 +24,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
     container = document.createElement('div');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
 
@@ -65,7 +67,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(() => {
       root.render(<Form />);
     });
@@ -121,7 +123,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<Form />);
     // Flush
     Scheduler.unstable_flushAll();
@@ -181,7 +183,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<Form />);
     // Flush
     Scheduler.unstable_flushAll();
@@ -212,7 +214,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('mouse over should be user-blocking but not discrete', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -242,7 +244,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('mouse enter should be user-blocking but not discrete', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -274,7 +276,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('continuous native events flush as expected', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo({hovered}) {
@@ -313,7 +315,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('should batch inside native events', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const target = React.createRef(null);
     function Foo() {
@@ -349,7 +351,7 @@ describe('ReactDOMNativeEventHeuristic-test', () => {
   });
 
   it('should not flush discrete events at the end of outermost batchedUpdates', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     let target;
     function Foo() {
diff --git a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
index 6fb1b1072bdf..dd1474b5f9ec 100644
--- a/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMNestedEvents-test.js
@@ -11,7 +11,7 @@
 
 describe('ReactDOMNestedEvents', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let act;
   let useState;
@@ -19,7 +19,7 @@ describe('ReactDOMNestedEvents', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
     useState = React.useState;
@@ -55,7 +55,7 @@ describe('ReactDOMNestedEvents', () => {
 
     const container = document.createElement('div');
     document.body.appendChild(container);
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     await act(async () => {
       root.render(<App />);
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index b39e554e49bc..df693b878499 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -11,6 +11,7 @@
 
 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;
@@ -24,6 +25,7 @@ describe('ReactDOMRoot', () => {
     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('jest-react').act;
@@ -31,15 +33,35 @@ describe('ReactDOMRoot', () => {
   });
 
   it('renders children', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
   });
 
+  it('warns if you import createRoot from react-dom', async () => {
+    expect(() => ReactDOM.createRoot(container)).toErrorDev(
+      'You are importing createRoot from "react-dom" which is not supported. ' +
+        'You should instead import it from "react-dom/client".',
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
+  it('warns if you import hydrateRoot from react-dom', async () => {
+    expect(() => ReactDOM.hydrateRoot(container, null)).toErrorDev(
+      'You are importing hydrateRoot from "react-dom" which is not supported. ' +
+        'You should instead import it from "react-dom/client".',
+      {
+        withoutStack: true,
+      },
+    );
+  });
+
   it('warns if a callback parameter is provided to render', () => {
     const callback = jest.fn();
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() =>
       root.render(<div>Hi</div>, callback),
     ).toErrorDev(
@@ -56,7 +78,7 @@ describe('ReactDOMRoot', () => {
       return 'Child';
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() => root.render(<App />, {})).toErrorDev(
       'You passed a second argument to root.render(...) but it only accepts ' +
         'one argument.',
@@ -71,7 +93,7 @@ describe('ReactDOMRoot', () => {
       return 'Child';
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() => root.render(<App />, container)).toErrorDev(
       '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 " +
@@ -84,7 +106,7 @@ describe('ReactDOMRoot', () => {
 
   it('warns if a callback parameter is provided to unmount', () => {
     const callback = jest.fn();
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     expect(() =>
       root.unmount(callback),
@@ -98,7 +120,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('unmounts children', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -121,7 +143,7 @@ describe('ReactDOMRoot', () => {
     // Does not hydrate by default
     const container1 = document.createElement('div');
     container1.innerHTML = markup;
-    const root1 = ReactDOM.createRoot(container1);
+    const root1 = ReactDOMClient.createRoot(container1);
     root1.render(
       <div>
         <span />
@@ -131,7 +153,7 @@ describe('ReactDOMRoot', () => {
 
     const container2 = document.createElement('div');
     container2.innerHTML = markup;
-    ReactDOM.hydrateRoot(
+    ReactDOMClient.hydrateRoot(
       container2,
       <div>
         <span />
@@ -163,7 +185,7 @@ describe('ReactDOMRoot', () => {
 
   it('clears existing children', async () => {
     container.innerHTML = '<div>a</div><div>b</div>';
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(
       <div>
         <span>c</span>
@@ -184,12 +206,12 @@ describe('ReactDOMRoot', () => {
 
   it('throws a good message on invalid containers', () => {
     expect(() => {
-      ReactDOM.createRoot(<div>Hi</div>);
+      ReactDOMClient.createRoot(<div>Hi</div>);
     }).toThrow('createRoot(...): Target container is not a DOM element.');
   });
 
   it('warns when rendering with legacy API into createRoot() container', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -199,7 +221,7 @@ describe('ReactDOMRoot', () => {
       [
         // We care about this warning:
         'You are calling ReactDOM.render() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          '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.',
@@ -212,7 +234,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when hydrating with legacy API into createRoot() container', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -222,7 +244,7 @@ describe('ReactDOMRoot', () => {
       [
         // We care about this warning:
         'You are calling ReactDOM.hydrate() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
           'Did you mean to call hydrateRoot(container, 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.',
@@ -232,7 +254,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns when unmounting with legacy API (no previous content)', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -243,7 +265,7 @@ describe('ReactDOMRoot', () => {
       [
         // We care about this warning:
         'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
+          '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:
         "The node you're attempting to unmount was rendered by React and is not a top-level container.",
       ],
@@ -261,7 +283,7 @@ describe('ReactDOMRoot', () => {
     // Currently createRoot().render() doesn't clear this.
     container.appendChild(document.createElement('div'));
     // The rest is the same as test above.
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     expect(container.textContent).toEqual('Hi');
@@ -287,20 +309,20 @@ describe('ReactDOMRoot', () => {
   it('warns when passing legacy container to createRoot()', () => {
     ReactDOM.render(<div>Hi</div>, container);
     expect(() => {
-      ReactDOM.createRoot(container);
+      ReactDOMClient.createRoot(container);
     }).toErrorDev(
-      'You are calling ReactDOM.createRoot() on a container that was previously ' +
+      'You are calling ReactDOMClient.createRoot() on a container that was previously ' +
         'passed to ReactDOM.render(). This is not supported.',
       {withoutStack: true},
     );
   });
 
   it('warns when creating two roots managing the same container', () => {
-    ReactDOM.createRoot(container);
+    ReactDOMClient.createRoot(container);
     expect(() => {
-      ReactDOM.createRoot(container);
+      ReactDOMClient.createRoot(container);
     }).toErrorDev(
-      'You are calling ReactDOM.createRoot() on a container that ' +
+      '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},
@@ -308,15 +330,15 @@ describe('ReactDOMRoot', () => {
   });
 
   it('does not warn when creating second root after first one is unmounted', () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.unmount();
     Scheduler.unstable_flushAll();
-    ReactDOM.createRoot(container); // No warning
+    ReactDOMClient.createRoot(container); // No warning
   });
 
   it('warns if creating a root on the document.body', async () => {
     expect(() => {
-      ReactDOM.createRoot(document.body);
+      ReactDOMClient.createRoot(document.body);
     }).toErrorDev(
       'createRoot(): Creating roots directly with document.body is ' +
         'discouraged, since its children are often manipulated by third-party ' +
@@ -328,7 +350,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('warns if updating a root that has had its contents removed', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
     Scheduler.unstable_flushAll();
     container.innerHTML = '';
@@ -345,7 +367,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('opts-in to concurrent default updates', async () => {
-    const root = ReactDOM.createRoot(container, {
+    const root = ReactDOMClient.createRoot(container, {
       unstable_concurrentUpdatesByDefault: true,
     });
 
@@ -377,7 +399,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('unmount is synchronous', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render('Hi');
     });
@@ -391,7 +413,7 @@ describe('ReactDOMRoot', () => {
   });
 
   it('throws if an unmounted root is updated', async () => {
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render('Hi');
     });
@@ -406,9 +428,9 @@ describe('ReactDOMRoot', () => {
 
   it('warns if root is unmounted inside an effect', async () => {
     const container1 = document.createElement('div');
-    const root1 = ReactDOM.createRoot(container1);
+    const root1 = ReactDOMClient.createRoot(container1);
     const container2 = document.createElement('div');
-    const root2 = ReactDOM.createRoot(container2);
+    const root2 = ReactDOMClient.createRoot(container2);
 
     function App({step}) {
       useEffect(() => {
@@ -441,10 +463,10 @@ describe('ReactDOMRoot', () => {
     div.innerHTML = '<!-- react-mount-point-unstable -->';
     const commentNode = div.childNodes[0];
 
-    expect(() => ReactDOM.createRoot(commentNode)).toThrow(
+    expect(() => ReactDOMClient.createRoot(commentNode)).toThrow(
       'createRoot(...): Target container is not a DOM element.',
     );
-    expect(() => ReactDOM.hydrateRoot(commentNode)).toThrow(
+    expect(() => ReactDOMClient.hydrateRoot(commentNode)).toThrow(
       'hydrateRoot(...): Target container is not a DOM element.',
     );
 
@@ -454,7 +476,7 @@ describe('ReactDOMRoot', () => {
 
   it('warn if no children passed to hydrateRoot', async () => {
     expect(() =>
-      ReactDOM.hydrateRoot(container),
+      ReactDOMClient.hydrateRoot(container),
     ).toErrorDev(
       'Must provide initial children as second argument to hydrateRoot.',
       {withoutStack: true},
@@ -466,7 +488,7 @@ describe('ReactDOMRoot', () => {
       return 'Child';
     }
 
-    expect(() => ReactDOM.createRoot(container, <App />)).toErrorDev(
+    expect(() => ReactDOMClient.createRoot(container, <App />)).toErrorDev(
       'You passed a JSX element to createRoot. You probably meant to call ' +
         'root.render instead',
       {
diff --git a/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
index 1e12bb611ca7..0ba0848d8e3c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
@@ -11,7 +11,7 @@
 
 let React;
 
-let ReactDOM;
+let ReactDOMClient;
 let act;
 
 describe('ReactDOMSafariMicrotaskBug-test', () => {
@@ -35,7 +35,7 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
     jest.resetModules();
     container = document.createElement('div');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
 
     document.body.appendChild(container);
@@ -62,7 +62,7 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
         </div>
       );
     }
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<Foo />);
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index f19c38bc38cd..7e25788c9232 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -11,6 +11,7 @@
 
 let React = require('react');
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let ReactFeatureFlags;
@@ -100,6 +101,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
@@ -164,7 +166,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -217,7 +219,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -310,7 +312,7 @@ describe('ReactDOMServerPartialHydration', () => {
       suspend = true;
       client = true;
 
-      ReactDOM.hydrateRoot(container, <App />, {
+      ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
           Scheduler.unstable_yieldValue(error.message);
         },
@@ -426,7 +428,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     suspend2 = true;
-    const root = ReactDOM.hydrateRoot(container, <App />, {
+    const root = ReactDOMClient.hydrateRoot(container, <App />, {
       onHydrated(node) {
         hydrated.push(node);
       },
@@ -483,7 +485,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -517,7 +519,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />, {
+        ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(error.message);
           },
@@ -590,7 +592,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
       shouldSuspend = true;
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />);
+        ReactDOMClient.hydrateRoot(container, <App hasB={false} />);
       });
 
       resolve();
@@ -651,7 +653,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App hasB={false} />, {
+        ReactDOMClient.hydrateRoot(container, <App hasB={false} />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(error.message);
           },
@@ -709,7 +711,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App />, {
+    const root = ReactDOMClient.hydrateRoot(container, <App />, {
       onDeleted(node) {
         deleted.push(node);
       },
@@ -770,7 +772,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }).toErrorDev(
       'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' +
         'ReactDOM.hydrate(element, container) to ' +
-        'ReactDOM.hydrateRoot(container, <App />)' +
+        'ReactDOMClient.hydrateRoot(container, <App />)' +
         '.render(element) or remove the Suspense components from the server ' +
         'rendered components.' +
         '\n    in Suspense (at **)' +
@@ -850,7 +852,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     act(() => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.firstChild.tagName).not.toBe('DIV');
@@ -906,7 +908,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     act(() => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
 
     expect(container.firstChild.children[1].textContent).toBe('Middle');
@@ -955,7 +957,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
     );
@@ -1029,7 +1031,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
     );
@@ -1102,7 +1104,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
       {
@@ -1188,7 +1190,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
       {
@@ -1273,7 +1275,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
       {
@@ -1357,7 +1359,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <App text="Hello" className="hello" />,
     );
@@ -1439,7 +1441,10 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
 
-    ReactDOM.hydrateRoot(container, <App text="Hello" className="hello" />);
+    ReactDOMClient.hydrateRoot(
+      container,
+      <App text="Hello" className="hello" />,
+    );
 
     await act(async () => {
       suspend = true;
@@ -1509,7 +1514,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
@@ -1591,7 +1596,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <Context.Provider value={{text: 'Hello', className: 'hello'}}>
         <App />
@@ -1680,7 +1685,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1742,7 +1747,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1809,7 +1814,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we have the data available quickly for some reason.
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -1882,7 +1887,10 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanB = container.getElementsByTagName('span')[1];
 
-    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showMore={false} />,
+    );
     suspend = true;
     Scheduler.unstable_flushAll();
 
@@ -1962,7 +1970,10 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const spanA = container.getElementsByTagName('span')[0];
 
-    const root = ReactDOM.hydrateRoot(container, <App showMore={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showMore={false} />,
+    );
 
     suspend = true;
     Scheduler.unstable_flushAll();
@@ -2048,7 +2059,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const b = container.getElementsByTagName('span')[1];
     expect(b.textContent).toBe('B');
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    const root = ReactDOMClient.hydrateRoot(container, <App />);
 
     // Increase hydration priority to higher than "offscreen".
     root.unstable_scheduleHydration(b);
@@ -2119,7 +2130,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const container = document.createElement('div');
     container.innerHTML = html;
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -2184,7 +2195,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[1];
 
     suspend = false;
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(error.message);
       },
@@ -2233,7 +2244,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2285,7 +2296,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    const root = ReactDOM.hydrateRoot(
+    const root = ReactDOMClient.hydrateRoot(
       container,
       <ClassName.Provider value={'hello'}>
         <App text="Hello" />
@@ -2388,7 +2399,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2475,7 +2486,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2565,7 +2576,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     await act(async () => {
@@ -2660,7 +2671,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend = true;
     isServerRendering = false;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // We'll do one click before hydrating.
     a.click();
@@ -2747,7 +2758,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -2822,7 +2833,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     // 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 = ReactDOM.createRoot(parentContainer);
+    const parentRoot = ReactDOMClient.createRoot(parentContainer);
     parentRoot.render(<Parent />);
     Scheduler.unstable_flushAll();
 
@@ -2835,7 +2846,7 @@ describe('ReactDOMServerPartialHydration', () => {
     suspend = true;
 
     // Hydrate asynchronously.
-    ReactDOM.hydrateRoot(childContainer, <App />);
+    ReactDOMClient.hydrateRoot(childContainer, <App />);
     jest.runAllTimers();
     Scheduler.unstable_flushAll();
 
@@ -2933,7 +2944,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // hydrating anyway.
     suspend1 = true;
     suspend2 = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
@@ -3019,7 +3030,10 @@ describe('ReactDOMServerPartialHydration', () => {
     container.innerHTML = finalHTML;
 
     suspend = true;
-    const root = ReactDOM.hydrateRoot(container, <App showSibling={false} />);
+    const root = ReactDOMClient.hydrateRoot(
+      container,
+      <App showSibling={false} />,
+    );
     expect(Scheduler).toFlushAndYield([]);
 
     expect(ref.current).toBe(null);
@@ -3105,7 +3119,7 @@ describe('ReactDOMServerPartialHydration', () => {
     // On the client we don't have all data yet but we want to start
     // hydrating anyway.
     suspend = true;
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
@@ -3170,7 +3184,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    ReactDOM.hydrateRoot(container, <App />, {
+    ReactDOMClient.hydrateRoot(container, <App />, {
       onRecoverableError(error) {
         Scheduler.unstable_yieldValue(
           'Log recoverable error: ' + error.message,
@@ -3205,7 +3219,7 @@ describe('ReactDOMServerPartialHydration', () => {
     const span = container.getElementsByTagName('span')[0];
     expect(span.innerHTML).toBe('Hidden child');
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(span.innerHTML).toBe('Hidden child');
@@ -3230,7 +3244,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     const span = container.getElementsByTagName('span')[0];
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     Scheduler.unstable_flushAll();
     expect(ref.current).toBe(span);
     expect(ref.current.innerHTML).toBe('Hidden child');
@@ -3243,7 +3257,7 @@ describe('ReactDOMServerPartialHydration', () => {
       const finalHTML = ReactDOMServer.renderToString(<App />);
       container.innerHTML = finalHTML;
 
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
       Scheduler.unstable_flushAll();
     });
   }
@@ -3321,7 +3335,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <App />, {
+        ReactDOMClient.hydrateRoot(container, <App />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(
               'Log recoverable error: ' + error.message,
@@ -3373,7 +3387,7 @@ describe('ReactDOMServerPartialHydration', () => {
     );
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <DirectTextChild text="bad" />, {
+        ReactDOMClient.hydrateRoot(container, <DirectTextChild text="bad" />, {
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue(error.message);
           },
@@ -3414,11 +3428,15 @@ describe('ReactDOMServerPartialHydration', () => {
     );
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container2, <TextChildWithSibling text="bad" />, {
-          onRecoverableError(error) {
-            Scheduler.unstable_yieldValue(error.message);
+        ReactDOMClient.hydrateRoot(
+          container2,
+          <TextChildWithSibling text="bad" />,
+          {
+            onRecoverableError(error) {
+              Scheduler.unstable_yieldValue(error.message);
+            },
           },
-        });
+        );
       });
     }).toErrorDev(
       [
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 435e90d9b182..91321ea6dd5b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -13,6 +13,7 @@ import {createEventTarget} from 'dom-event-testing-library';
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactFeatureFlags;
 let Scheduler;
@@ -117,6 +118,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     ReactFeatureFlags.enableCreateEventHandleAPI = true;
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
@@ -165,7 +167,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     const span = container.getElementsByTagName('span')[1];
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -243,7 +245,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -341,7 +343,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -440,7 +442,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     isServerRendering = false;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -525,7 +527,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -623,7 +625,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -732,7 +734,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -882,7 +884,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -974,18 +976,18 @@ describe('ReactDOMServerSelectiveHydration', () => {
     beforeEach(async () => {
       document.body.innerHTML = '';
       jest.resetModuleRegistry();
-      let OuterReactDOM;
-      let InnerReactDOM;
+      let OuterReactDOMClient;
+      let InnerReactDOMClient;
       jest.isolateModules(() => {
-        OuterReactDOM = require('react-dom');
+        OuterReactDOMClient = require('react-dom/client');
         OuterScheduler = require('scheduler');
       });
       jest.isolateModules(() => {
-        InnerReactDOM = require('react-dom');
+        InnerReactDOMClient = require('react-dom/client');
         InnerScheduler = require('scheduler');
       });
 
-      expect(OuterReactDOM).not.toBe(InnerReactDOM);
+      expect(OuterReactDOMClient).not.toBe(InnerReactDOMClient);
       expect(OuterScheduler).not.toBe(InnerScheduler);
 
       const outerContainer = document.createElement('div');
@@ -1071,8 +1073,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
       suspendOuter = true;
       suspendInner = true;
 
-      OuterReactDOM.hydrateRoot(outerContainer, <OuterApp />);
-      InnerReactDOM.hydrateRoot(innerContainer, <InnerApp />);
+      OuterReactDOMClient.hydrateRoot(outerContainer, <OuterApp />);
+      InnerReactDOMClient.hydrateRoot(innerContainer, <InnerApp />);
 
       expect(OuterScheduler).toFlushAndYield(['Suspend Outer']);
       expect(InnerScheduler).toFlushAndYield(['Suspend Inner']);
@@ -1271,7 +1273,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     container.innerHTML = finalHTML;
     suspend = true;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     const childDiv = container.firstElementChild;
     dispatchMouseHoverEvent(childDiv);
@@ -1365,7 +1367,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     // A and D will be suspended. We'll click on D which should take
     // priority, after we unsuspend.
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1423,7 +1425,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanB = container.getElementsByTagName('span')[1];
     const spanC = container.getElementsByTagName('span')[2];
 
-    const root = ReactDOM.hydrateRoot(container, <App />);
+    const root = ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1481,7 +1483,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     const spanC = container.getElementsByTagName('span')[4];
 
     act(() => {
-      const root = ReactDOM.hydrateRoot(container, <App a="A" />);
+      const root = ReactDOMClient.hydrateRoot(container, <App a="A" />);
       // Hydrate the shell.
       expect(Scheduler).toFlushAndYieldThrough(['App', 'Commit']);
 
@@ -1607,7 +1609,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     const span = container.getElementsByTagName('span')[1];
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
 
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
@@ -1679,7 +1681,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
 
     suspend = true;
 
-    ReactDOM.hydrateRoot(container, <App />);
+    ReactDOMClient.hydrateRoot(container, <App />);
     // Nothing has been hydrated so far.
     expect(Scheduler).toHaveYielded([]);
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
index 1611b904bef1..83c8605e496e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSuspense-test.internal.js
@@ -13,6 +13,7 @@ const ReactDOMServerIntegrationUtils = require('./utils/ReactDOMServerIntegratio
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let ReactTestUtils;
 let act;
@@ -24,6 +25,7 @@ function initModules() {
 
   React = require('react');
   ReactDOM = require('react-dom');
+  ReactDOMClient = require('react-dom/client');
   ReactDOMServer = require('react-dom/server');
   ReactTestUtils = require('react-dom/test-utils');
   act = require('jest-react').act;
@@ -163,7 +165,7 @@ describe('ReactDOMServerSuspense', () => {
     expect(divB.textContent).toBe('B');
 
     act(() => {
-      ReactDOM.hydrateRoot(parent, example);
+      ReactDOMClient.hydrateRoot(parent, example);
     });
 
     const parent2 = element.parentNode;
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index d3fb8b3ae70a..4148eeaa2e64 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -9,7 +9,7 @@
 
 let JSDOM;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let clientAct;
 let ReactDOMFizzServer;
@@ -29,7 +29,7 @@ describe('useId', () => {
     jest.resetModules();
     JSDOM = require('jsdom').JSDOM;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     clientAct = require('jest-react').act;
     ReactDOMFizzServer = require('react-dom/server');
@@ -136,7 +136,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -181,7 +181,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -220,7 +220,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -256,7 +256,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -311,7 +311,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     const divs = container.querySelectorAll('div');
 
@@ -335,7 +335,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     // We append a suffix to the end of the id to distinguish them
     expect(container).toMatchInlineSnapshot(`
@@ -362,7 +362,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -392,7 +392,7 @@ describe('useId', () => {
       pipe(writable);
     });
     await clientAct(async () => {
-      ReactDOM.hydrateRoot(container, <App />);
+      ReactDOMClient.hydrateRoot(container, <App />);
     });
     expect(container).toMatchInlineSnapshot(`
       <div
@@ -443,7 +443,7 @@ describe('useId', () => {
     });
     const dehydratedSpan = container.getElementsByTagName('span')[0];
     await clientAct(async () => {
-      const root = ReactDOM.hydrateRoot(container, <App />);
+      const root = ReactDOMClient.hydrateRoot(container, <App />);
       expect(Scheduler).toFlushUntilNextPaint([]);
       expect(container).toMatchInlineSnapshot(`
         <div
@@ -524,7 +524,7 @@ describe('useId', () => {
     });
     const dehydratedSpan = container.getElementsByTagName('span')[0];
     await clientAct(async () => {
-      const root = ReactDOM.hydrateRoot(container, <App />);
+      const root = ReactDOMClient.hydrateRoot(container, <App />);
       expect(Scheduler).toFlushUntilNextPaint([]);
       expect(container).toMatchInlineSnapshot(`
         <div
@@ -598,7 +598,7 @@ describe('useId', () => {
     });
     let root;
     await clientAct(async () => {
-      root = ReactDOM.hydrateRoot(container, <App />, {
+      root = ReactDOMClient.hydrateRoot(container, <App />, {
         identifierPrefix: 'custom-prefix-',
       });
     });
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 3d63954a0857..11a7a510afd3 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 
@@ -21,6 +22,7 @@ describe('ReactDOMServerHydration', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
   });
@@ -403,7 +405,7 @@ describe('ReactDOMServerHydration', () => {
     const finalHTML = ReactDOMServer.renderToString(<div />);
     const container = document.createElement('div');
     container.innerHTML = finalHTML;
-    const root = ReactDOM.hydrateRoot(container, <div />);
+    const root = ReactDOMClient.hydrateRoot(container, <div />);
     Scheduler.unstable_flushAll();
     root.render(null);
     Scheduler.unstable_flushAll();
diff --git a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
index 71adc286d08b..ca7aa3317c5c 100644
--- a/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
+++ b/packages/react-dom/src/__tests__/ReactTestUtilsAct-test.js
@@ -9,6 +9,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactTestUtils;
 let Scheduler;
 let act;
@@ -31,7 +32,7 @@ describe('ReactTestUtils.act()', () => {
   if (__EXPERIMENTAL__) {
     let concurrentRoot = null;
     const renderConcurrent = (el, dom) => {
-      concurrentRoot = ReactDOM.createRoot(dom);
+      concurrentRoot = ReactDOMClient.createRoot(dom);
       if (__DEV__) {
         act(() => concurrentRoot.render(el));
       } else {
@@ -100,7 +101,7 @@ describe('ReactTestUtils.act()', () => {
 
     // @gate __DEV__
     it('does not warn in concurrent mode', () => {
-      const root = ReactDOM.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
       act(() => root.render(<App />));
       Scheduler.unstable_flushAll();
     });
@@ -113,6 +114,7 @@ function runActTests(label, render, unmount, rerender) {
       jest.resetModules();
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       ReactTestUtils = require('react-dom/test-utils');
       Scheduler = require('scheduler');
       act = ReactTestUtils.act;
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index 42647abf53b4..9e81a3b20ff1 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactTestUtils;
 let act;
 let Scheduler;
@@ -20,6 +21,7 @@ describe('ReactUpdates', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactTestUtils = require('react-dom/test-utils');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
@@ -1332,7 +1334,7 @@ describe('ReactUpdates', () => {
       );
     }
 
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     let hiddenDiv;
     act(() => {
       root.render(<Foo />);
@@ -1709,7 +1711,7 @@ describe('ReactUpdates', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     expect(() => {
       ReactDOM.flushSync(() => {
         root.render(<NonTerminating />);
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index c3f9e3fcb47e..e85a580aed72 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -9,6 +9,11 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Container} from './ReactDOMHostConfig';
+import type {
+  RootType,
+  HydrateRootOptions,
+  CreateRootOptions,
+} from './ReactDOMRoot';
 
 import {
   findDOMNode,
@@ -17,7 +22,11 @@ import {
   unstable_renderSubtreeIntoContainer,
   unmountComponentAtNode,
 } from './ReactDOMLegacy';
-import {createRoot, hydrateRoot, isValidContainer} from './ReactDOMRoot';
+import {
+  createRoot as createRootImpl,
+  hydrateRoot as hydrateRootImpl,
+  isValidContainer,
+} from './ReactDOMRoot';
 import {createEventHandle} from './ReactDOMEventHandle';
 
 import {
@@ -125,6 +134,7 @@ function renderSubtreeIntoContainer(
 }
 
 const Internals = {
+  usingClientEntryPoint: false,
   // Keep in sync with ReactTestUtils.js.
   // This is an array for better minification.
   Events: [
@@ -137,6 +147,37 @@ const Internals = {
   ],
 };
 
+function createRoot(
+  container: Container,
+  options?: CreateRootOptions,
+): RootType {
+  if (__DEV__) {
+    if (!Internals.usingClientEntryPoint) {
+      console.error(
+        'You are importing createRoot from "react-dom" which is not supported. ' +
+          'You should instead import it from "react-dom/client".',
+      );
+    }
+  }
+  return createRootImpl(container, options);
+}
+
+function hydrateRoot(
+  container: Container,
+  initialChildren: ReactNodeList,
+  options?: HydrateRootOptions,
+): RootType {
+  if (__DEV__) {
+    if (!Internals.usingClientEntryPoint) {
+      console.error(
+        'You are importing hydrateRoot from "react-dom" which is not supported. ' +
+          'You should instead import it from "react-dom/client".',
+      );
+    }
+  }
+  return hydrateRootImpl(container, initialChildren, options);
+}
+
 // Overload the definition to the two valid signatures.
 // Warning, this opts-out of checking the function body.
 declare function flushSync<R>(fn: () => R): R;
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 1c53b5620b67..3b751405a303 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -256,7 +256,7 @@ export function hydrate(
     if (isModernRoot) {
       console.error(
         'You are calling ReactDOM.hydrate() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
           'Did you mean to call hydrateRoot(container, element)?',
       );
     }
@@ -296,7 +296,7 @@ export function render(
     if (isModernRoot) {
       console.error(
         'You are calling ReactDOM.render() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. ' +
+          'passed to ReactDOMClient.createRoot(). This is not supported. ' +
           'Did you mean to call root.render(element)?',
       );
     }
@@ -356,7 +356,7 @@ export function unmountComponentAtNode(container: Container) {
     if (isModernRoot) {
       console.error(
         'You are calling ReactDOM.unmountComponentAtNode() on a container that was previously ' +
-          'passed to ReactDOM.createRoot(). This is not supported. Did you mean to call root.unmount()?',
+          'passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?',
       );
     }
   }
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 57bbe7ab96d6..d71de3bb0c26 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -184,7 +184,7 @@ export function createRoot(
     if (__DEV__) {
       if ((options: any).hydrate) {
         console.warn(
-          'hydrate through createRoot is deprecated. Use ReactDOM.hydrateRoot(container, <App />) instead.',
+          'hydrate through createRoot is deprecated. Use ReactDOMClient.hydrateRoot(container, <App />) instead.',
         );
       } else {
         if (
@@ -369,12 +369,12 @@ function warnIfReactDOMContainerInDEV(container) {
     if (isContainerMarkedAsRoot(container)) {
       if (container._reactRootContainer) {
         console.error(
-          'You are calling ReactDOM.createRoot() on a container that was previously ' +
+          '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 ReactDOM.createRoot() on a container that ' +
+          '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/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 248c07020e55..bcc3f15c44e7 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -14,6 +14,7 @@ import {createEventTarget} from 'dom-event-testing-library';
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let act;
@@ -64,6 +65,7 @@ describe('DOMPluginEventSystem', () => {
 
           React = require('react');
           ReactDOM = require('react-dom');
+          ReactDOMClient = require('react-dom/client');
           Scheduler = require('scheduler');
           ReactDOMServer = require('react-dom/server');
           act = require('jest-react').act;
@@ -616,7 +618,7 @@ describe('DOMPluginEventSystem', () => {
 
           // 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 = ReactDOM.createRoot(parentContainer);
+          const parentRoot = ReactDOMClient.createRoot(parentContainer);
           parentRoot.render(<Parent />);
           Scheduler.unstable_flushAll();
 
@@ -629,7 +631,7 @@ describe('DOMPluginEventSystem', () => {
           suspend = true;
 
           // Hydrate asynchronously.
-          ReactDOM.hydrateRoot(childContainer, <App />);
+          ReactDOMClient.hydrateRoot(childContainer, <App />);
           jest.runAllTimers();
           Scheduler.unstable_flushAll();
 
@@ -1258,6 +1260,7 @@ describe('DOMPluginEventSystem', () => {
 
             React = require('react');
             ReactDOM = require('react-dom');
+            ReactDOMClient = require('react-dom/client');
             Scheduler = require('scheduler');
             ReactDOMServer = require('react-dom/server');
             act = require('jest-react').act;
@@ -1940,7 +1943,7 @@ describe('DOMPluginEventSystem', () => {
               return <button ref={ref}>Press me</button>;
             }
 
-            const root = ReactDOM.createRoot(container);
+            const root = ReactDOMClient.createRoot(container);
             root.render(<Test counter={0} />);
 
             expect(Scheduler).toFlushAndYield(['Test']);
@@ -2561,7 +2564,7 @@ describe('DOMPluginEventSystem', () => {
             const container2 = document.createElement('div');
             document.body.appendChild(container2);
 
-            const root = ReactDOM.createRoot(container2);
+            const root = ReactDOMClient.createRoot(container2);
 
             act(() => {
               root.render(<Component />);
@@ -2648,7 +2651,7 @@ describe('DOMPluginEventSystem', () => {
             const container2 = document.createElement('div');
             document.body.appendChild(container2);
 
-            const root = ReactDOM.createRoot(container2);
+            const root = ReactDOMClient.createRoot(container2);
 
             act(() => {
               root.render(<Component />);
@@ -2715,7 +2718,7 @@ describe('DOMPluginEventSystem', () => {
             const container2 = document.createElement('div');
             document.body.appendChild(container2);
 
-            const root = ReactDOM.createRoot(container2);
+            const root = ReactDOMClient.createRoot(container2);
             act(() => {
               root.render(<Component />);
             });
@@ -2872,6 +2875,7 @@ describe('DOMPluginEventSystem', () => {
 
               React = require('react');
               ReactDOM = require('react-dom');
+              ReactDOMClient = require('react-dom/client');
               Scheduler = require('scheduler');
               ReactDOMServer = require('react-dom/server');
             });
diff --git a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
index b1a5649624ae..db2fd6f7562f 100644
--- a/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/ChangeEventPlugin-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactFeatureFlags;
 let Scheduler;
 let act;
@@ -56,6 +57,7 @@ describe('ChangeEventPlugin', () => {
     };
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
     container = document.createElement('div');
@@ -496,7 +498,7 @@ describe('ChangeEventPlugin', () => {
 
   describe('concurrent mode', () => {
     it('text input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -538,7 +540,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('checkbox input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -593,7 +595,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('textarea', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let textarea;
 
       class ControlledTextarea extends React.Component {
@@ -635,7 +637,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('parent of input', () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -681,7 +683,7 @@ describe('ChangeEventPlugin', () => {
     });
 
     it('is sync for non-input events', async () => {
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       let input;
 
       class ControlledInput extends React.Component {
@@ -729,7 +731,7 @@ describe('ChangeEventPlugin', () => {
     it('mouse enter/leave should be user-blocking but not discrete', async () => {
       const {useState} = React;
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
 
       const target = React.createRef(null);
       function Foo() {
diff --git a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
index ba830d939c5f..cc37fcd0498b 100644
--- a/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
+++ b/packages/react-dom/src/events/plugins/__tests__/SimpleEventPlugin-test.js
@@ -12,6 +12,7 @@
 describe('SimpleEventPlugin', function() {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let act;
 
@@ -39,6 +40,7 @@ describe('SimpleEventPlugin', function() {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     onClick = jest.fn();
@@ -235,6 +237,7 @@ describe('SimpleEventPlugin', function() {
 
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
 
       act = require('jest-react').act;
@@ -242,7 +245,7 @@ describe('SimpleEventPlugin', function() {
 
     it('flushes pending interactive work before exiting event handler', async () => {
       container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       document.body.appendChild(container);
 
       let button;
@@ -317,7 +320,7 @@ describe('SimpleEventPlugin', function() {
     // was dispatched.
     it('end result of many interactive updates is deterministic', async () => {
       container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       document.body.appendChild(container);
 
       let button;
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
index df151bbf72c2..912869280994 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/__tests__/useFocusWithin-test.internal.js
@@ -14,6 +14,7 @@ import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
+let ReactDOMClient;
 let useFocusWithin;
 let act;
 let Scheduler;
@@ -26,6 +27,7 @@ function initializeModules(hasPointerEvents) {
   ReactFeatureFlags.enableCreateEventHandleAPI = true;
   React = require('react');
   ReactDOM = require('react-dom');
+  ReactDOMClient = require('react-dom/client');
   Scheduler = require('scheduler');
   act = require('jest-react').act;
 
@@ -504,7 +506,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         );
       };
 
-      const root = ReactDOM.createRoot(container2);
+      const root = ReactDOMClient.createRoot(container2);
 
       act(() => {
         root.render(<Component />);
@@ -563,7 +565,7 @@ describe.each(table)(`useFocus`, hasPointerEvents => {
         );
       };
 
-      const root = ReactDOM.createRoot(container2);
+      const root = ReactDOMClient.createRoot(container2);
 
       act(() => {
         root.render(<Component />);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4435fef43893..27a414004c1a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2628,7 +2628,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.hydrateRoot(container, <App />)' +
+          'ReactDOMClient.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index b037863aa40d..297d5e7d2b5b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2628,7 +2628,7 @@ function mountDehydratedSuspenseComponent(
       console.error(
         'Cannot hydrate Suspense in legacy mode. Switch from ' +
           'ReactDOM.hydrate(element, container) to ' +
-          'ReactDOM.hydrateRoot(container, <App />)' +
+          'ReactDOMClient.hydrateRoot(container, <App />)' +
           '.render(element) or remove the Suspense components from ' +
           'the server rendered components.',
       );
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
index 8c245e1efb32..999431c69456 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.new.js
@@ -11,7 +11,11 @@ import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {EventPriority} from './ReactEventPriorities.new';
-import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
+// 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 {
   getLabelForLane,
diff --git a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
index defaf397deb7..000219aa0609 100644
--- a/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
+++ b/packages/react-reconciler/src/ReactFiberDevToolsHook.old.js
@@ -11,7 +11,11 @@ import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList, Wakeable} from 'shared/ReactTypes';
 import type {EventPriority} from './ReactEventPriorities.old';
-import type {DevToolsProfilingHooks} from 'react-devtools-shared/src/backend/types';
+// 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 {
   getLabelForLane,
diff --git a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
index 9dd7d85b5b40..2120aae18b18 100644
--- a/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactScope-test.internal.js
@@ -25,10 +25,12 @@ describe('ReactScope', () => {
 
   describe('ReactDOM', () => {
     let ReactDOM;
+    let ReactDOMClient;
     let container;
 
     beforeEach(() => {
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       ReactDOMServer = require('react-dom/server');
       container = document.createElement('div');
       document.body.appendChild(container);
@@ -312,7 +314,7 @@ describe('ReactScope', () => {
       // On the client we don't have all data yet but we want to start
       // hydrating anyway.
       suspend = true;
-      ReactDOM.hydrateRoot(container2, <App />);
+      ReactDOMClient.hydrateRoot(container2, <App />);
       Scheduler.unstable_flushAll();
       jest.runAllTimers();
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
index 8ed56bd5f2d9..cb1196baffe6 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let act;
 
 describe('ReactSuspenseEffectsSemanticsDOM', () => {
@@ -18,7 +18,7 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
   });
 
@@ -63,7 +63,7 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
     }
 
     act(() => {
-      const root = ReactDOM.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(document.createElement('div'));
       root.render(<App />);
     });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
index 44301017338c..b4b0b17ef1db 100644
--- a/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactUpdaters-test.internal.js
@@ -12,6 +12,7 @@
 let React;
 let ReactFeatureFlags;
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let mockDevToolsHook;
 let allSchedulerTags;
@@ -90,6 +91,7 @@ describe('updaters', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     act = require('jest-react').act;
@@ -209,7 +211,7 @@ describe('updaters', () => {
       return count;
     };
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(async () => {
       root.render(<Parent />);
       expect(Scheduler).toFlushAndYieldThrough([
@@ -354,7 +356,7 @@ describe('updaters', () => {
       throw new Error('Hello');
     };
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     await act(async () => {
       root.render(<Parent shouldError={false} />);
     });
@@ -404,7 +406,7 @@ describe('updaters', () => {
       return null;
     };
 
-    const root = ReactDOM.createRoot(document.createElement('div'));
+    const root = ReactDOMClient.createRoot(document.createElement('div'));
     root.render(
       <React.Fragment>
         <SyncPriorityUpdater />
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 4e9bd2f0c997..cb2d7d2ac81b 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -10,7 +10,7 @@
 'use strict';
 
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let act;
@@ -22,7 +22,7 @@ describe('useMutableSourceHydration', () => {
     jest.resetModules();
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
 
@@ -160,7 +160,7 @@ describe('useMutableSourceHydration', () => {
     expect(source.listenerCount).toBe(0);
 
     act(() => {
-      ReactDOM.hydrateRoot(container, <TestComponent />, {
+      ReactDOMClient.hydrateRoot(container, <TestComponent />, {
         mutableSources: [mutableSource],
       });
     });
@@ -195,7 +195,7 @@ describe('useMutableSourceHydration', () => {
 
     expect(() => {
       act(() => {
-        ReactDOM.hydrateRoot(container, <TestComponent />, {
+        ReactDOMClient.hydrateRoot(container, <TestComponent />, {
           mutableSources: [mutableSource],
           onRecoverableError(error) {
             Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -256,7 +256,7 @@ describe('useMutableSourceHydration', () => {
       act(() => {
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            ReactDOM.hydrateRoot(container, <TestComponent />, {
+            ReactDOMClient.hydrateRoot(container, <TestComponent />, {
               mutableSources: [mutableSource],
               onRecoverableError(error) {
                 Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -264,7 +264,7 @@ describe('useMutableSourceHydration', () => {
             });
           });
         } else {
-          ReactDOM.hydrateRoot(container, <TestComponent />, {
+          ReactDOMClient.hydrateRoot(container, <TestComponent />, {
             mutableSources: [mutableSource],
             onRecoverableError(error) {
               Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -349,7 +349,7 @@ describe('useMutableSourceHydration', () => {
         );
         if (gate(flags => flags.enableSyncDefaultUpdates)) {
           React.startTransition(() => {
-            ReactDOM.hydrateRoot(container, fragment, {
+            ReactDOMClient.hydrateRoot(container, fragment, {
               mutableSources: [mutableSource],
               onRecoverableError(error) {
                 Scheduler.unstable_yieldValue('Log error: ' + error.message);
@@ -357,7 +357,7 @@ describe('useMutableSourceHydration', () => {
             });
           });
         } else {
-          ReactDOM.hydrateRoot(container, fragment, {
+          ReactDOMClient.hydrateRoot(container, fragment, {
             mutableSources: [mutableSource],
             onRecoverableError(error) {
               Scheduler.unstable_yieldValue('Log error: ' + error.message);
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 0a31aa9c62f7..378f44d4ffcc 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -13,6 +13,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactFreshRuntime;
 let Scheduler;
 let act;
@@ -28,6 +29,7 @@ describe('ReactFresh', () => {
       ReactFreshRuntime = require('react-refresh/runtime');
       ReactFreshRuntime.injectIntoGlobalHook(global);
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
       Scheduler = require('scheduler');
       act = require('jest-react').act;
       createReactClass = require('create-react-class/factory')(
@@ -2437,7 +2439,7 @@ describe('ReactFresh', () => {
         };
       });
 
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(<AppV1 offscreen={true} />);
       expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
       const el = container.firstChild;
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 11d25a5a1196..dc981b9bd530 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -9,7 +9,7 @@
 
 let act;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let JSResourceReference;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
@@ -21,7 +21,7 @@ describe('ReactFlightDOMRelay', () => {
 
     act = require('jest-react').act;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-server-dom-relay');
     JSResourceReference = require('JSResourceReference');
@@ -100,7 +100,7 @@ describe('ReactFlightDOMRelay', () => {
     const modelClient = readThrough(transport);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     act(() => {
       root.render(modelClient.greeting);
     });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index bcae6c50f7c7..4ca3f903e779 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -27,7 +27,7 @@ global.__webpack_require__ = function(id) {
 let act;
 let Stream;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 
@@ -39,7 +39,7 @@ describe('ReactFlightDOM', () => {
     act = require('jest-react').act;
     Stream = require('stream');
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
   });
@@ -174,7 +174,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -212,7 +212,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -248,7 +248,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(<App response={response} />);
     });
@@ -388,7 +388,7 @@ describe('ReactFlightDOM', () => {
     const response = ReactServerDOMReader.createFromReadableStream(readable);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(
         <Suspense fallback={<p>(loading)</p>}>
@@ -487,7 +487,7 @@ describe('ReactFlightDOM', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const stream1 = getTestStream();
     const {pipe} = ReactServerDOMWriter.renderToPipeableStream(
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 09ea1515c999..c7b97707c166 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -23,7 +23,7 @@ global.__webpack_require__ = function(id) {
 
 let act;
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 
@@ -34,7 +34,7 @@ describe('ReactFlightDOMBrowser', () => {
     webpackMap = {};
     act = require('jest-react').act;
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
   });
@@ -270,7 +270,7 @@ describe('ReactFlightDOMBrowser', () => {
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await act(async () => {
       root.render(
         <Suspense fallback={<p>(loading)</p>}>
diff --git a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
index 3cf0e40b65db..772905b7e014 100644
--- a/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
+++ b/packages/react/src/__tests__/ReactCoffeeScriptClass-test.coffee
@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 PropTypes = null
 React = null
 ReactDOM = null
+ReactDOMClient = null
 act = null
 
 describe 'ReactCoffeeScriptClass', ->
@@ -20,10 +21,11 @@ describe 'ReactCoffeeScriptClass', ->
   beforeEach ->
     React = require 'react'
     ReactDOM = require 'react-dom'
+    ReactDOMClient = require 'react-dom/client'
     act = require('jest-react').act
     PropTypes = require 'prop-types'
     container = document.createElement 'div'
-    root = ReactDOM.createRoot container
+    root = ReactDOMClient.createRoot container
     attachedListener = null
     renderedName = null
     InnerComponent = class extends React.Component
diff --git a/packages/react/src/__tests__/ReactES6Class-test.js b/packages/react/src/__tests__/ReactES6Class-test.js
index 3c15930a3798..67b9e11a4980 100644
--- a/packages/react/src/__tests__/ReactES6Class-test.js
+++ b/packages/react/src/__tests__/ReactES6Class-test.js
@@ -12,6 +12,7 @@
 let PropTypes;
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let act;
 
 describe('ReactES6Class', () => {
@@ -29,9 +30,10 @@ describe('ReactES6Class', () => {
     PropTypes = require('prop-types');
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     act = require('jest-react').act;
     container = document.createElement('div');
-    root = ReactDOM.createRoot(container);
+    root = ReactDOMClient.createRoot(container);
     attachedListener = null;
     renderedName = null;
     Inner = class extends React.Component {
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
index 081be41e1bc8..18f5a4a3caa4 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js
@@ -11,13 +11,13 @@
 
 describe('ReactStrictMode', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let act;
 
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     act = require('jest-react').act;
 
@@ -51,7 +51,7 @@ describe('ReactStrictMode', () => {
     it('should default to not strict', () => {
       act(() => {
         const container = document.createElement('div');
-        const root = ReactDOM.createRoot(container);
+        const root = ReactDOMClient.createRoot(container);
         root.render(<Component label="A" />);
       });
 
@@ -66,7 +66,7 @@ describe('ReactStrictMode', () => {
       it('should support enabling strict mode via createRoot option', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container, {
+          const root = ReactDOMClient.createRoot(container, {
             unstable_strictMode: true,
           });
           root.render(<Component label="A" />);
@@ -87,7 +87,7 @@ describe('ReactStrictMode', () => {
       it('should include legacy + strict effects mode', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container);
+          const root = ReactDOMClient.createRoot(container);
           root.render(
             <React.StrictMode>
               <Component label="A" />
@@ -110,7 +110,7 @@ describe('ReactStrictMode', () => {
       it('should allow level to be increased with nesting', () => {
         act(() => {
           const container = document.createElement('div');
-          const root = ReactDOM.createRoot(container);
+          const root = ReactDOMClient.createRoot(container);
           root.render(
             <>
               <Component label="A" />
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 84fbead1f492..81416f260ae9 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -11,6 +11,7 @@
 
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let ReactDOMServer;
 let Scheduler;
 let PropTypes;
@@ -22,6 +23,7 @@ describe('ReactStrictMode', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
   });
 
@@ -361,6 +363,7 @@ describe('Concurrent Mode', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
   });
 
@@ -406,7 +409,7 @@ describe('Concurrent Mode', () => {
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<StrictRoot />);
     expect(() => Scheduler.unstable_flushAll()).toErrorDev(
       [
@@ -468,7 +471,7 @@ Please update the following components: App`,
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<StrictRoot />);
 
     expect(() => {
@@ -544,7 +547,7 @@ Please update the following components: Parent`,
     }
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     root.render(<StrictRoot foo={true} />);
     expect(() =>
       Scheduler.unstable_flushAll(),
@@ -623,6 +626,7 @@ describe('symbol checks', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
   });
 
   it('should switch from StrictMode to a Fragment and reset state', () => {
@@ -735,6 +739,7 @@ describe('string refs', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
   });
 
   it('should warn within a strict tree', () => {
@@ -820,6 +825,7 @@ describe('context legacy', () => {
     jest.resetModules();
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     PropTypes = require('prop-types');
   });
 
@@ -900,6 +906,7 @@ describe('context legacy', () => {
       jest.resetModules();
       React = require('react');
       ReactDOM = require('react-dom');
+      ReactDOMClient = require('react-dom/client');
     });
 
     if (ReactFeatureFlags.consoleManagedByDevToolsDuringStrictMode) {
diff --git a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
index d9456404bb5e..8d53739d338c 100644
--- a/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
+++ b/packages/react/src/__tests__/ReactTypeScriptClass-test.ts
@@ -1,6 +1,7 @@
 /// <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" />
 
 /*!
@@ -12,6 +13,7 @@
 
 import React = require('react');
 import ReactDOM = require('react-dom');
+import ReactDOMClient = require('react-dom/client');
 import ReactDOMTestUtils = require('react-dom/test-utils');
 import PropTypes = require('prop-types');
 import internalAct = require('jest-react');
@@ -317,7 +319,7 @@ class ClassicRefs extends React.Component {
 describe('ReactTypeScriptClass', function() {
   beforeEach(function() {
     container = document.createElement('div');
-    root = ReactDOM.createRoot(container);
+    root = ReactDOMClient.createRoot(container);
     attachedListener = null;
     renderedName = null;
   });
diff --git a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
index 1d0e883ab162..90ee316124d9 100644
--- a/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOM.d.ts
@@ -13,7 +13,6 @@
  */
 
 declare module 'react-dom' {
-  export function createRoot(container : any) : any
   export function render(element : any, container : any) : any
   export function unmountComponentAtNode(container : any) : void
   export function findDOMNode(instance : 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 000000000000..a97ad21ce6a1
--- /dev/null
+++ b/packages/react/src/__tests__/testDefinitions/ReactDOMClient.d.ts
@@ -0,0 +1,18 @@
+/*!
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * 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/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 2a628990049b..5b0ce4f1a4af 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -13,6 +13,7 @@ let useSyncExternalStore;
 let useSyncExternalStoreWithSelector;
 let React;
 let ReactDOM;
+let ReactDOMClient;
 let Scheduler;
 let act;
 let useState;
@@ -46,6 +47,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
     useState = React.useState;
     useEffect = React.useEffect;
@@ -90,7 +92,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       // the correct behavior, despite the fact that the legacy root API
       // triggers a warning in 18), write a test that uses
       // createLegacyRoot directly.
-      return ReactDOM.createRoot(container);
+      return ReactDOMClient.createRoot(container);
     } else {
       ReactDOM.render(null, container);
       return {
@@ -745,7 +747,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
       if (gate(flags => !flags.enableUseSyncExternalStoreShim)) {
         act(() => {
-          ReactDOM.hydrateRoot(container, <App />);
+          ReactDOMClient.hydrateRoot(container, <App />);
         });
         expect(Scheduler).toHaveYielded([
           // First it hydrates the server rendered HTML
diff --git a/scripts/jest/typescript/preprocessor.js b/scripts/jest/typescript/preprocessor.js
index dbf910754f9b..a4100be8aec4 100644
--- a/scripts/jest/typescript/preprocessor.js
+++ b/scripts/jest/typescript/preprocessor.js
@@ -42,7 +42,7 @@ function compile(content, contentFilename) {
       let source;
       const libRegex = /lib\.(.+\.)?d\.ts$/;
       const jestRegex = /jest\.d\.ts/;
-      const reactRegex = /(?:React|ReactDOM|ReactInternalAct|PropTypes)(?:\.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.
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index b2b9639505a7..4e47b4fd6ffc 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -18,12 +18,17 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/writer.node.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
       'react-interactions',
     ],
     isFlowTyped: true,
@@ -40,12 +45,17 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools',
+      'react-devtools-core',
+      'react-devtools-shell',
+      'react-devtools-shared',
     ],
     isFlowTyped: true,
     isServerSupported: true,

From feefe437fe160cb99facbf9444ad6a32a901c6a3 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 1 Mar 2022 15:39:51 -0500
Subject: [PATCH 1178/1603] Refactor Cache Code (#23393)

This PR refactors the cache code by moving it out of ReactFiberCacheComponent to ReactFiberTransitionPool in anticipation of it being reused by multiple stacks (ie. transition tracing)
---
 .../src/ReactFiberBeginWork.new.js            |  37 ++---
 .../src/ReactFiberBeginWork.old.js            |  37 ++---
 .../src/ReactFiberCacheComponent.new.js       | 142 ----------------
 .../src/ReactFiberCacheComponent.old.js       | 142 ----------------
 .../src/ReactFiberCompleteWork.new.js         |  11 +-
 .../src/ReactFiberCompleteWork.old.js         |  11 +-
 .../src/ReactFiberTransition.new.js           | 154 ++++++++++++++++++
 .../src/ReactFiberTransition.old.js           | 154 ++++++++++++++++++
 .../src/ReactFiberTransitionPool.old.js       | 154 ++++++++++++++++++
 .../src/ReactFiberUnwindWork.new.js           |  15 +-
 .../src/ReactFiberUnwindWork.old.js           |  15 +-
 11 files changed, 518 insertions(+), 354 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberTransition.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberTransition.old.js
 create mode 100644 packages/react-reconciler/src/ReactFiberTransitionPool.old.js

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 27a414004c1a..09a0e16a1e55 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -229,15 +229,7 @@ import {
   getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.new';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
-import {
-  requestCacheFromPool,
-  pushCacheProvider,
-  pushRootCachePool,
-  CacheContext,
-  getSuspendedCachePool,
-  pushSpawnedCachePool,
-  getOffscreenDeferredCachePool,
-} from './ReactFiberCacheComponent.new';
+import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.new';
 import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
@@ -248,6 +240,13 @@ import {
   pushTreeId,
   pushMaterializedTreeId,
 } from './ReactFiberTreeContext.new';
+import {
+  requestCacheFromPool,
+  pushRootTransition,
+  getSuspendedCache,
+  pushTransition,
+  getOffscreenDeferredCache,
+} from './ReactFiberTransition.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -652,7 +651,7 @@ function updateOffscreenComponent(
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransition(workInProgress, null);
         }
       }
       pushRenderLanes(workInProgress, renderLanes);
@@ -666,7 +665,7 @@ function updateOffscreenComponent(
         nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
         if (enableCache) {
           // Save the cache pool so we can resume later.
-          spawnedCachePool = getOffscreenDeferredCachePool();
+          spawnedCachePool = getOffscreenDeferredCache();
         }
       } else {
         nextBaseLanes = renderLanes;
@@ -686,7 +685,7 @@ function updateOffscreenComponent(
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransition(workInProgress, null);
         }
       }
 
@@ -724,7 +723,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState !== null ? prevState.cachePool : null;
-        pushSpawnedCachePool(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool);
       }
 
       pushRenderLanes(workInProgress, subtreeRenderLanes);
@@ -742,7 +741,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        pushSpawnedCachePool(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool);
       }
 
       // Since we're not hidden anymore, reset the state
@@ -758,7 +757,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         if (current !== null) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransition(workInProgress, null);
         }
       }
     }
@@ -1329,7 +1328,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
-    pushRootCachePool(root);
+    pushRootTransition(root);
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
@@ -1910,7 +1909,7 @@ const SUSPENDED_MARKER: SuspenseState = {
 function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
-    cachePool: getSuspendedCachePool(),
+    cachePool: getSuspendedCache(),
   };
 }
 
@@ -1939,7 +1938,7 @@ function updateSuspenseOffscreenState(
       }
     } else {
       // If there's no previous cache pool, grab the current one.
-      cachePool = getSuspendedCachePool();
+      cachePool = getSuspendedCache();
     }
   }
   return {
@@ -3504,7 +3503,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootCachePool(root);
+        pushRootTransition(root);
       }
       if (enableTransitionTracing) {
         workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 297d5e7d2b5b..2db03f39a2cb 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -229,15 +229,7 @@ import {
   getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
-import {
-  requestCacheFromPool,
-  pushCacheProvider,
-  pushRootCachePool,
-  CacheContext,
-  getSuspendedCachePool,
-  pushSpawnedCachePool,
-  getOffscreenDeferredCachePool,
-} from './ReactFiberCacheComponent.old';
+import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
 import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
@@ -248,6 +240,13 @@ import {
   pushTreeId,
   pushMaterializedTreeId,
 } from './ReactFiberTreeContext.old';
+import {
+  requestCacheFromPool,
+  pushRootTransition,
+  getSuspendedCache,
+  pushTransition,
+  getOffscreenDeferredCache,
+} from './ReactFiberTransition.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -652,7 +651,7 @@ function updateOffscreenComponent(
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransition(workInProgress, null);
         }
       }
       pushRenderLanes(workInProgress, renderLanes);
@@ -666,7 +665,7 @@ function updateOffscreenComponent(
         nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
         if (enableCache) {
           // Save the cache pool so we can resume later.
-          spawnedCachePool = getOffscreenDeferredCachePool();
+          spawnedCachePool = getOffscreenDeferredCache();
         }
       } else {
         nextBaseLanes = renderLanes;
@@ -686,7 +685,7 @@ function updateOffscreenComponent(
         // push the cache pool even though we're going to bail out
         // because otherwise there'd be a context mismatch
         if (current !== null) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransition(workInProgress, null);
         }
       }
 
@@ -724,7 +723,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState !== null ? prevState.cachePool : null;
-        pushSpawnedCachePool(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool);
       }
 
       pushRenderLanes(workInProgress, subtreeRenderLanes);
@@ -742,7 +741,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        pushSpawnedCachePool(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool);
       }
 
       // Since we're not hidden anymore, reset the state
@@ -758,7 +757,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         if (current !== null) {
-          pushSpawnedCachePool(workInProgress, null);
+          pushTransition(workInProgress, null);
         }
       }
     }
@@ -1329,7 +1328,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
-    pushRootCachePool(root);
+    pushRootTransition(root);
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
@@ -1910,7 +1909,7 @@ const SUSPENDED_MARKER: SuspenseState = {
 function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
-    cachePool: getSuspendedCachePool(),
+    cachePool: getSuspendedCache(),
   };
 }
 
@@ -1939,7 +1938,7 @@ function updateSuspenseOffscreenState(
       }
     } else {
       // If there's no previous cache pool, grab the current one.
-      cachePool = getSuspendedCachePool();
+      cachePool = getSuspendedCache();
     }
   }
   return {
@@ -3504,7 +3503,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootCachePool(root);
+        pushRootTransition(root);
       }
       if (enableTransitionTracing) {
         workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 3d1db8124b69..14ec05bd5b46 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -8,18 +8,12 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
-import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane.new';
-import type {StackCursor} from './ReactFiberStack.new';
 
 import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
-import {isPrimaryRenderer} from './ReactFiberHostConfig';
-import {createCursor, push, pop} from './ReactFiberStack.new';
 import {pushProvider, popProvider} from './ReactFiberNewContext.new';
 import * as Scheduler from 'scheduler';
-import {getWorkInProgressRoot} from './ReactFiberWorkLoop.new';
 
 export type Cache = {|
   controller: AbortController,
@@ -62,10 +56,6 @@ if (__DEV__ && enableCache) {
   CacheContext._currentRenderer2 = null;
 }
 
-// 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);
-
 // 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).
@@ -131,135 +121,3 @@ export function popCacheProvider(workInProgress: Fiber, cache: Cache) {
   }
   popProvider(CacheContext, workInProgress);
 }
-
-function peekCacheFromPool(): Cache | null {
-  if (!enableCache) {
-    return (null: any);
-  }
-
-  // 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 pushRootCachePool(root: FiberRoot) {
-  if (!enableCache) {
-    return;
-  }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
-}
-
-export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
-  if (!enableCache) {
-    return;
-  }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
-}
-
-export function pushSpawnedCachePool(
-  offscreenWorkInProgress: Fiber,
-  prevCachePool: SpawnedCachePool | null,
-): void {
-  if (!enableCache) {
-    return;
-  }
-
-  if (prevCachePool === null) {
-    push(resumedCache, resumedCache.current, offscreenWorkInProgress);
-  } else {
-    push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
-  }
-}
-
-export function popCachePool(workInProgress: Fiber) {
-  if (!enableCache) {
-    return;
-  }
-
-  pop(resumedCache, workInProgress);
-}
-
-export function getSuspendedCachePool(): SpawnedCachePool | null {
-  if (!enableCache) {
-    return 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 getOffscreenDeferredCachePool(): SpawnedCachePool | null {
-  if (!enableCache) {
-    return 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/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index 74dc9a449a50..a34de4142e4c 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -8,18 +8,12 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
-import type {FiberRoot} from './ReactInternalTypes';
-import type {Lanes} from './ReactFiberLane.old';
-import type {StackCursor} from './ReactFiberStack.old';
 
 import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
-import {isPrimaryRenderer} from './ReactFiberHostConfig';
-import {createCursor, push, pop} from './ReactFiberStack.old';
 import {pushProvider, popProvider} from './ReactFiberNewContext.old';
 import * as Scheduler from 'scheduler';
-import {getWorkInProgressRoot} from './ReactFiberWorkLoop.old';
 
 export type Cache = {|
   controller: AbortController,
@@ -62,10 +56,6 @@ if (__DEV__ && enableCache) {
   CacheContext._currentRenderer2 = null;
 }
 
-// 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);
-
 // 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).
@@ -131,135 +121,3 @@ export function popCacheProvider(workInProgress: Fiber, cache: Cache) {
   }
   popProvider(CacheContext, workInProgress);
 }
-
-function peekCacheFromPool(): Cache | null {
-  if (!enableCache) {
-    return (null: any);
-  }
-
-  // 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 pushRootCachePool(root: FiberRoot) {
-  if (!enableCache) {
-    return;
-  }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
-}
-
-export function popRootCachePool(root: FiberRoot, renderLanes: Lanes) {
-  if (!enableCache) {
-    return;
-  }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
-}
-
-export function pushSpawnedCachePool(
-  offscreenWorkInProgress: Fiber,
-  prevCachePool: SpawnedCachePool | null,
-): void {
-  if (!enableCache) {
-    return;
-  }
-
-  if (prevCachePool === null) {
-    push(resumedCache, resumedCache.current, offscreenWorkInProgress);
-  } else {
-    push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
-  }
-}
-
-export function popCachePool(workInProgress: Fiber) {
-  if (!enableCache) {
-    return;
-  }
-
-  pop(resumedCache, workInProgress);
-}
-
-export function getSuspendedCachePool(): SpawnedCachePool | null {
-  if (!enableCache) {
-    return 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 getOffscreenDeferredCachePool(): SpawnedCachePool | null {
-  if (!enableCache) {
-    return 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/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 50ab1d3d9672..3ca22e58263e 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -162,12 +162,9 @@ import {
 import {resetChildFibers} from './ReactChildFiber.new';
 import {createScopeInstance} from './ReactFiberScope.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
-import {
-  popCacheProvider,
-  popRootCachePool,
-  popCachePool,
-} from './ReactFiberCacheComponent.new';
+import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
+import {popRootTransition, popTransition} from './ReactFiberTransition.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -864,7 +861,7 @@ function completeWork(
     case HostRoot: {
       const fiberRoot = (workInProgress.stateNode: FiberRoot);
       if (enableCache) {
-        popRootCachePool(fiberRoot, renderLanes);
+        popRootTransition(fiberRoot, renderLanes);
 
         let previousCache: Cache | null = null;
         if (current !== null) {
@@ -1553,7 +1550,7 @@ function completeWork(
           workInProgress.flags |= Passive;
         }
         if (current !== null) {
-          popCachePool(workInProgress);
+          popTransition(workInProgress);
         }
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 81a51eaff8eb..bea755f7b4b6 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -162,12 +162,9 @@ import {
 import {resetChildFibers} from './ReactChildFiber.old';
 import {createScopeInstance} from './ReactFiberScope.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
-import {
-  popCacheProvider,
-  popRootCachePool,
-  popCachePool,
-} from './ReactFiberCacheComponent.old';
+import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
+import {popRootTransition, popTransition} from './ReactFiberTransition.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -864,7 +861,7 @@ function completeWork(
     case HostRoot: {
       const fiberRoot = (workInProgress.stateNode: FiberRoot);
       if (enableCache) {
-        popRootCachePool(fiberRoot, renderLanes);
+        popRootTransition(fiberRoot, renderLanes);
 
         let previousCache: Cache | null = null;
         if (current !== null) {
@@ -1553,7 +1550,7 @@ function completeWork(
           workInProgress.flags |= Passive;
         }
         if (current !== null) {
-          popCachePool(workInProgress);
+          popTransition(workInProgress);
         }
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberTransition.new.js b/packages/react-reconciler/src/ReactFiberTransition.new.js
new file mode 100644
index 000000000000..dc3c36a918a0
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTransition.new.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import type {FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane.new';
+import type {StackCursor} from './ReactFiberStack.new';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
+
+import {enableCache} from 'shared/ReactFeatureFlags';
+import {isPrimaryRenderer} from './ReactFiberHostConfig';
+import {createCursor, push, pop} from './ReactFiberStack.new';
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop.new';
+import {
+  createCache,
+  retainCache,
+  CacheContext,
+} from './ReactFiberCacheComponent.new';
+
+// 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);
+
+function peekCacheFromPool(): Cache | null {
+  if (!enableCache) {
+    return (null: any);
+  }
+
+  // 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(root: FiberRoot) {
+  if (enableCache) {
+    return;
+  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
+}
+
+export function popRootTransition(root: FiberRoot, renderLanes: Lanes) {
+  if (enableCache) {
+    return;
+  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
+}
+
+export function pushTransition(
+  offscreenWorkInProgress: Fiber,
+  prevCachePool: SpawnedCachePool | null,
+): void {
+  if (enableCache) {
+    if (prevCachePool === null) {
+      push(resumedCache, resumedCache.current, offscreenWorkInProgress);
+    } else {
+      push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
+    }
+  }
+}
+
+export function popTransition(workInProgress: Fiber) {
+  if (enableCache) {
+    pop(resumedCache, workInProgress);
+  }
+}
+
+export function getSuspendedCache(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return 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 {
+  if (!enableCache) {
+    return 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/ReactFiberTransition.old.js b/packages/react-reconciler/src/ReactFiberTransition.old.js
new file mode 100644
index 000000000000..666e41d5184c
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTransition.old.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import type {FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane.old';
+import type {StackCursor} from './ReactFiberStack.old';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
+
+import {enableCache} from 'shared/ReactFeatureFlags';
+import {isPrimaryRenderer} from './ReactFiberHostConfig';
+import {createCursor, push, pop} from './ReactFiberStack.old';
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop.old';
+import {
+  createCache,
+  retainCache,
+  CacheContext,
+} from './ReactFiberCacheComponent.old';
+
+// 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);
+
+function peekCacheFromPool(): Cache | null {
+  if (!enableCache) {
+    return (null: any);
+  }
+
+  // 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(root: FiberRoot) {
+  if (enableCache) {
+    return;
+  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
+}
+
+export function popRootTransition(root: FiberRoot, renderLanes: Lanes) {
+  if (enableCache) {
+    return;
+  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
+}
+
+export function pushTransition(
+  offscreenWorkInProgress: Fiber,
+  prevCachePool: SpawnedCachePool | null,
+): void {
+  if (enableCache) {
+    if (prevCachePool === null) {
+      push(resumedCache, resumedCache.current, offscreenWorkInProgress);
+    } else {
+      push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
+    }
+  }
+}
+
+export function popTransition(workInProgress: Fiber) {
+  if (enableCache) {
+    pop(resumedCache, workInProgress);
+  }
+}
+
+export function getSuspendedCache(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return 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 {
+  if (!enableCache) {
+    return 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/ReactFiberTransitionPool.old.js b/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
new file mode 100644
index 000000000000..e78670aa3f94
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
@@ -0,0 +1,154 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import type {FiberRoot} from './ReactInternalTypes';
+import type {Lanes} from './ReactFiberLane.old';
+import type {StackCursor} from './ReactFiberStack.old';
+import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
+
+import {enableCache} from 'shared/ReactFeatureFlags';
+import {isPrimaryRenderer} from './ReactFiberHostConfig';
+import {createCursor, push, pop} from './ReactFiberStack.old';
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop.old';
+import {
+  createCache,
+  retainCache,
+  CacheContext,
+} from './ReactFiberCacheComponent.old';
+
+// 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);
+
+function peekCacheFromPool(): Cache | null {
+  if (!enableCache) {
+    return (null: any);
+  }
+
+  // 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 pushRootTransitionPool(root: FiberRoot) {
+  if (enableCache) {
+    return;
+  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
+}
+
+export function popRootTransitionPool(root: FiberRoot, renderLanes: Lanes) {
+  if (enableCache) {
+    return;
+  }
+  // Note: This function currently does nothing but I'll leave it here for
+  // code organization purposes in case that changes.
+}
+
+export function pushTransitionPool(
+  offscreenWorkInProgress: Fiber,
+  prevCachePool: SpawnedCachePool | null,
+): void {
+  if (enableCache) {
+    if (prevCachePool === null) {
+      push(resumedCache, resumedCache.current, offscreenWorkInProgress);
+    } else {
+      push(resumedCache, prevCachePool.pool, offscreenWorkInProgress);
+    }
+  }
+}
+
+export function popTransitionPool(workInProgress: Fiber) {
+  if (enableCache) {
+    pop(resumedCache, workInProgress);
+  }
+}
+
+export function getSuspendedCachePool(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return 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 getOffscreenDeferredCachePool(): SpawnedCachePool | null {
+  if (!enableCache) {
+    return 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/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index aa1b391b0367..faac8f38f05f 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -44,13 +44,10 @@ import {
 } from './ReactFiberContext.new';
 import {popProvider} from './ReactFiberNewContext.new';
 import {popRenderLanes} from './ReactFiberWorkLoop.new';
-import {
-  popCacheProvider,
-  popRootCachePool,
-  popCachePool,
-} from './ReactFiberCacheComponent.new';
+import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
+import {popRootTransition, popTransition} from './ReactFiberTransition.new';
 
 function unwindWork(
   current: Fiber | null,
@@ -84,7 +81,7 @@ function unwindWork(
     case HostRoot: {
       if (enableCache) {
         const root: FiberRoot = workInProgress.stateNode;
-        popRootCachePool(root, renderLanes);
+        popRootTransition(root, renderLanes);
 
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
@@ -158,7 +155,7 @@ function unwindWork(
       popRenderLanes(workInProgress);
       if (enableCache) {
         if (current !== null) {
-          popCachePool(workInProgress);
+          popTransition(workInProgress);
         }
       }
       return null;
@@ -194,7 +191,7 @@ function unwindInterruptedWork(
     case HostRoot: {
       if (enableCache) {
         const root: FiberRoot = interruptedWork.stateNode;
-        popRootCachePool(root, renderLanes);
+        popRootTransition(root, renderLanes);
 
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
@@ -226,7 +223,7 @@ function unwindInterruptedWork(
       popRenderLanes(interruptedWork);
       if (enableCache) {
         if (current !== null) {
-          popCachePool(interruptedWork);
+          popTransition(interruptedWork);
         }
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index cb5df61782bc..4578134d58d0 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -44,13 +44,10 @@ import {
 } from './ReactFiberContext.old';
 import {popProvider} from './ReactFiberNewContext.old';
 import {popRenderLanes} from './ReactFiberWorkLoop.old';
-import {
-  popCacheProvider,
-  popRootCachePool,
-  popCachePool,
-} from './ReactFiberCacheComponent.old';
+import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
+import {popRootTransition, popTransition} from './ReactFiberTransition.old';
 
 function unwindWork(
   current: Fiber | null,
@@ -84,7 +81,7 @@ function unwindWork(
     case HostRoot: {
       if (enableCache) {
         const root: FiberRoot = workInProgress.stateNode;
-        popRootCachePool(root, renderLanes);
+        popRootTransition(root, renderLanes);
 
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
@@ -158,7 +155,7 @@ function unwindWork(
       popRenderLanes(workInProgress);
       if (enableCache) {
         if (current !== null) {
-          popCachePool(workInProgress);
+          popTransition(workInProgress);
         }
       }
       return null;
@@ -194,7 +191,7 @@ function unwindInterruptedWork(
     case HostRoot: {
       if (enableCache) {
         const root: FiberRoot = interruptedWork.stateNode;
-        popRootCachePool(root, renderLanes);
+        popRootTransition(root, renderLanes);
 
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
@@ -226,7 +223,7 @@ function unwindInterruptedWork(
       popRenderLanes(interruptedWork);
       if (enableCache) {
         if (current !== null) {
-          popCachePool(interruptedWork);
+          popTransition(interruptedWork);
         }
       }
 

From f0dd459e0d97081cb3c313ec52285e3e422f8dbf Mon Sep 17 00:00:00 2001
From: Josh Story <josh.c.story@gmail.com>
Date: Tue, 1 Mar 2022 15:23:16 -0800
Subject: [PATCH 1179/1603] reassign src from props not the dom element src
 property (#23395)

The src property on the dom element will return a fully qualified name and this does not match the dom
src attribute or the props provided to react. instead of reading from the element and re-assigning the property we
assign the property from props which is how it was initially assigned during the render

Co-authored-by: Josh Story <story@hey.com>
---
 .../ReactDOMImageLoad-test.internal.js        | 55 +++++++++++++++++++
 .../src/client/ReactDOMHostConfig.js          |  2 +-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
index dc6c35ad9349..50d3687c4ea8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMImageLoad-test.internal.js
@@ -18,6 +18,7 @@ let ReactDOMClient;
 let originalCreateElement;
 // let TextResource;
 // let textResourceShouldFail;
+let originalHTMLImageElementSrcDescriptor;
 
 let images = [];
 let onLoadSpy = null;
@@ -165,6 +166,11 @@ describe('ReactDOMImageLoad', () => {
       return element;
     };
 
+    originalHTMLImageElementSrcDescriptor = Object.getOwnPropertyDescriptor(
+      HTMLImageElement.prototype,
+      'src',
+    );
+
     Object.defineProperty(HTMLImageElement.prototype, 'src', {
       get() {
         return this.getAttribute('src');
@@ -179,6 +185,11 @@ describe('ReactDOMImageLoad', () => {
 
   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() {
@@ -575,4 +586,48 @@ describe('ReactDOMImageLoad', () => {
       'Committed',
     ]);
   });
+
+  it('preserves the src property / attribute when triggering a potential new load event', () => {
+    // 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
+    expect(Scheduler).toFlushAndYieldThrough([
+      '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
+    expect(Scheduler).toFlushAndYield(['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);
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index fbd04da485fe..739c3b023275 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -442,7 +442,7 @@ export function commitMount(
       return;
     case 'img': {
       if ((newProps: any).src) {
-        ((domElement: any): HTMLImageElement).src = ((domElement: any): HTMLImageElement).src;
+        ((domElement: any): HTMLImageElement).src = (newProps: any).src;
       }
       return;
     }

From 0e0b1a45fa09c0a8b162cde655016af97eda5c88 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 2 Mar 2022 09:26:48 -0800
Subject: [PATCH 1180/1603] Show DevTools backend and frontend versions in UI
 (#23399)

This information can help with bug investigation for renderers (like React Native) that embed the DevTools backend into their source (separately from the DevTools frontend, which gets run by the user).

If the DevTools backend is too old to report a version, or if the version reported is the same as the frontend (as will be the case with the browser extension) then only a single version string will be shown, as before. If a different version is reported, then both will be shown separately.
---
 .../src/backend/agent.js                      |  15 +-
 packages/react-devtools-shared/src/bridge.js  |   2 +
 .../src/devtools/store.js                     |  18 ++
 .../views/Settings/GeneralSettings.js         |  71 +++++++-
 .../views/Settings/SettingsShared.css         |   6 +
 .../react-devtools-shell/src/app/index.js     |   2 -
 packages/react-devtools/CHANGELOG.md          | 167 ++++++++++++------
 7 files changed, 213 insertions(+), 68 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index f31e3a6c38a7..0f0ddbc332c1 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -185,6 +185,7 @@ export default class Agent extends EventEmitter<{|
     bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
     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);
@@ -225,7 +226,12 @@ export default class Agent extends EventEmitter<{|
       bridge.send('profilingStatus', true);
     }
 
-    // Send the Bridge protocol after initialization in case the frontend has already requested it.
+    // Send the Bridge protocol and backend versions, after initialization, in case the frontend has already requested it.
+    // The Store may be instantiated beore the agent.
+    const version = process.env.DEVTOOLS_VERSION;
+    if (version) {
+      this._bridge.send('backendVersion', version);
+    }
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
 
     // Notify the frontend if the backend supports the Storage API (e.g. localStorage).
@@ -322,6 +328,13 @@ export default class Agent extends EventEmitter<{|
     return null;
   }
 
+  getBackendVersion = () => {
+    const version = process.env.DEVTOOLS_VERSION;
+    if (version) {
+      this._bridge.send('backendVersion', version);
+    }
+  };
+
   getBridgeProtocol = () => {
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
   };
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index cdeec7aebfc4..ecb5e66672de 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -185,6 +185,7 @@ type SavedPreferencesParams = {|
 |};
 
 export type BackendEvents = {|
+  backendVersion: [string],
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
   fastRefreshScheduled: [],
@@ -219,6 +220,7 @@ type FrontendEvents = {|
   clearWarningsForFiberID: [ElementAndRendererID],
   copyElementPath: [CopyElementPathParams],
   deletePath: [DeletePath],
+  getBackendVersion: [],
   getBridgeProtocol: [],
   getOwnersList: [ElementAndRendererID],
   getProfilingData: [{|rendererID: RendererID|}],
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index a2fda1825fca..ddf647cc210f 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -85,6 +85,7 @@ export type Capabilities = {|
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
 export default class Store extends EventEmitter<{|
+  backendVersion: [],
   collapseNodesByDefault: [],
   componentFilters: [],
   error: [Error],
@@ -98,6 +99,10 @@ export default class Store extends EventEmitter<{|
   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.
@@ -264,6 +269,9 @@ export default class Store extends EventEmitter<{|
       bridge.addListener('bridgeProtocol', this.onBridgeProtocol);
       bridge.send('getBridgeProtocol');
     }
+
+    bridge.addListener('backendVersion', this.onBridgeBackendVersion);
+    bridge.send('getBackendVersion');
   }
 
   // This is only used in tests to avoid memory leaks.
@@ -301,6 +309,10 @@ export default class Store extends EventEmitter<{|
     }
   }
 
+  get backendVersion(): string | null {
+    return this._backendVersion;
+  }
+
   get collapseNodesByDefault(): boolean {
     return this._collapseNodesByDefault;
   }
@@ -1333,6 +1345,7 @@ export default class Store extends EventEmitter<{|
       'unsupportedRendererVersion',
       this.onBridgeUnsupportedRendererVersion,
     );
+    bridge.removeListener('backendVersion', this.onBridgeBackendVersion);
     bridge.removeListener('bridgeProtocol', this.onBridgeProtocol);
 
     if (this._onBridgeProtocolTimeoutID !== null) {
@@ -1359,6 +1372,11 @@ export default class Store extends EventEmitter<{|
     this.emit('unsupportedRendererVersionDetected');
   };
 
+  onBridgeBackendVersion = (backendVersion: string) => {
+    this._backendVersion = backendVersion;
+    this.emit('backendVersion');
+  };
+
   onBridgeProtocol = (bridgeProtocol: BridgeProtocol) => {
     if (this._onBridgeProtocolTimeoutID !== null) {
       clearTimeout(this._onBridgeProtocolTimeoutID);
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 5c5b8a007964..a781f99eb05c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -8,13 +8,26 @@
  */
 
 import * as React from 'react';
-import {useContext} from 'react';
+import {useContext, useMemo} from 'react';
 import {SettingsContext} from './SettingsContext';
 import {StoreContext} from '../context';
 import {CHANGE_LOG_URL} from 'react-devtools-shared/src/constants';
 
 import styles from './SettingsShared.css';
 
+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(_: {||}) {
   const {
     displayDensity,
@@ -25,7 +38,11 @@ export default function GeneralSettings(_: {||}) {
     traceUpdatesEnabled,
   } = useContext(SettingsContext);
 
-  const {supportsTraceUpdates} = useContext(StoreContext);
+  const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
+  const frontendVersion = process.env.DEVTOOLS_VERSION;
+
+  const showBackendVersion =
+    backendVersion && backendVersion !== frontendVersion;
 
   return (
     <div className={styles.Settings}>
@@ -70,15 +87,51 @@ export default function GeneralSettings(_: {||}) {
       )}
 
       <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={CHANGE_LOG_URL}>
-          View release notes
-        </a>{' '}
-        for DevTools version {process.env.DEVTOOLS_VERSION}
-      </div>
-    </div>
-  );
+          href={changelogLink}>
+          {version}
+        </a>
+      </>
+    );
+  }
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
index 9c0ee028c996..dd3f5456c464 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsShared.css
@@ -149,4 +149,10 @@
 
 .Warning {
   color: var(--color-error-text);
+}
+
+.VersionsList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 }
\ No newline at end of file
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index b00ea8ad6e90..89f14c8e3150 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -10,7 +10,6 @@ import Iframe from './Iframe';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import Hydration from './Hydration';
-import InlineWarnings from './InlineWarnings';
 import InspectableElements from './InspectableElements';
 import ReactNativeWeb from './ReactNativeWeb';
 import ToDoList from './ToDoList';
@@ -83,7 +82,6 @@ function mountTestApp() {
   mountApp(Hydration);
   mountApp(ElementTypes);
   mountApp(EditableProps);
-  mountApp(InlineWarnings);
   mountApp(ReactNativeWeb);
   mountApp(Toggle);
   mountApp(ErrorBoundaries);
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 4c3b26578d2a..ac6a27fca96c 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
-## 4.23.0 (January 24, 2022)
+### 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))
@@ -14,12 +15,14 @@
 #### 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)
+### 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)
+### 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):
@@ -50,7 +53,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 #### 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)
+### 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))
@@ -67,19 +71,22 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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)
+### 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)
+### 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)
+### 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))
@@ -94,18 +101,21 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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)
+### 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)
+### 4.19.1
+October 1, 2021
 
 #### Bugfix
 * Fixed potential cache miss when insepcting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472))
 
-## 4.19.0 (September 29, 2021)
+### 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))
@@ -126,7 +136,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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)
+### 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))
@@ -138,7 +149,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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)
+### 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))
@@ -152,7 +164,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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)
+### 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
@@ -160,7 +173,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 * 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)
+### 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)).
@@ -242,7 +256,8 @@ Another thing the new profiler will warn about is long-running renders scheduled
 
 https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c5-271f255c8087.mp4
 
-## 4.14.0 (July 17, 2021)
+### 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))
@@ -254,16 +269,19 @@ https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c
 ##### 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)
+### 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)
+### 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)
+### 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))
 
@@ -276,11 +294,13 @@ https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c
  ([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)
+### 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)
+### 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))
@@ -289,7 +309,8 @@ https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c
 #### 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)
+### 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))
 
@@ -307,33 +328,40 @@ During initialization, DevTools now checks to ensure it's compatible with the ["
 
 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)
+### 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)
+### 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)
+### 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)
+### 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)
+### 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)
+### 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)
+### 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))
@@ -378,23 +406,28 @@ The following features are only enabled when used with (experimental) builds of
 ###### 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)
+### 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)
+### 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)
+### 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)
+### 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)
+### 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
@@ -402,7 +435,8 @@ The following features are only enabled when used with (experimental) builds of
 * 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)
+### 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))
@@ -446,17 +480,20 @@ New values can be added to array props/state/hooks now. Existing values can also
 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)
+### 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)
+### 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)
+### 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))
@@ -466,7 +503,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 * 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)
+### 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))
@@ -488,7 +526,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 * 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)
+### 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))
@@ -501,7 +540,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 #### 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)
+### 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))
@@ -531,7 +571,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 
 ![Vertical Components panel resizing](https://user-images.githubusercontent.com/23095052/74603149-d074c080-50b0-11ea-820f-63db30b4c285.gif)
 
-## 4.4.0 (January 3, 2020)
+### 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))
@@ -544,7 +585,8 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 * 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)
+### 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))
@@ -554,32 +596,38 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 * 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)
+### 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)
+### 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)
+### 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)
+### 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)
+### 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)
+### 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
@@ -588,21 +636,25 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 * 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)
+### 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)
+### 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)
+### 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)
+### 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.
@@ -610,15 +662,18 @@ New keys can be added to object props/state/hooks now. Existing keys can be rena
 * 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)
+### 4.0.2
+August 15, 2019
 #### Permissions cleanup
 * Removed unnecessary `webNavigation ` permission from Chrome and Firefox extensions.
 
-## 4.0.1 (August 15, 2019)
+### 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)
+### 4.0.0
+August 15, 2019
 
 ### General changes
 
@@ -753,4 +808,4 @@ Because this feature adds a small amount of overhead, it can be disabled in the
 
 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)
+![Video demonstrating profiler's component renders list](https://user-images.githubusercontent.com/29597/62234547-bcb97500-b37f-11e9-9615-54fba8b574b9.gif)
\ No newline at end of file

From f6c130f6145dbae5436625560f520957b5e27859 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 2 Mar 2022 10:28:42 -0800
Subject: [PATCH 1181/1603] React DevTools 4.23.0 -> 4.24.0 (#23400)

* React DevTools 4.23.0 -> 4.24.0

* Fixed CHANGELOG header format

* Add separator line beween header version numbers
---
 packages/react-devtools-core/package.json     |   2 +-
 .../chrome/manifest.json                      |   4 +-
 .../edge/manifest.json                        |   4 +-
 .../firefox/manifest.json                     |   2 +-
 packages/react-devtools-inline/package.json   |   2 +-
 packages/react-devtools-timeline/package.json |   2 +-
 packages/react-devtools/CHANGELOG.md          | 143 +++++++++++++++++-
 packages/react-devtools/package.json          |   4 +-
 scripts/devtools/prepare-release.js           |   2 +-
 9 files changed, 153 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index a9b25b0d1bf5..6f03dac65d8b 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.23.0",
+  "version": "4.24.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 1c38827233a8..348479ff320d 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.23.0",
-  "version_name": "4.23.0",
+  "version": "4.24.0",
+  "version_name": "4.24.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index ad0598f8828f..4189285aa7be 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.23.0",
-  "version_name": "4.23.0",
+  "version": "4.24.0",
+  "version_name": "4.24.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index f62c866c8a47..b29d40d767b1 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.23.0",
+  "version": "4.24.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 256c4c790671..435f2b6ab598 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.23.0",
+  "version": "4.24.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 79c44c6ac188..cb9ca857583a 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.23.0",
+  "version": "4.24.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index ac6a27fca96c..60b337bc497b 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -2,10 +2,33 @@
 
 <!-- RELEASE_SCRIPT_TOKEN -->
 
+---
+
+### 4.24.0
+March 2, 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
+* 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
+#### Feature
 * DevTools: Only show StrictMode badge on root elements ([bvaughn](https://github.com/bvaughn) in [#23012](https://github.com/facebook/react/pull/23012))
 
 #### Bugfix
@@ -15,12 +38,16 @@ January 24, 2022
 #### 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
 
@@ -53,6 +80,8 @@ Because React Native embeds a copy of the React DevTools "backend" ([`react-devt
 #### 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
 
@@ -71,6 +100,8 @@ October 31, 2021
 * 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
 
@@ -78,6 +109,8 @@ October 20, 2021
 * 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
 
@@ -85,6 +118,8 @@ October 19, 2021
 * 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
 
@@ -101,6 +136,8 @@ October 15, 2021
 * 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
 
@@ -108,12 +145,16 @@ October 8, 2021
 * 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 insepcting elements ([bvaughn](https://github.com/bvaughn) in [#22472](https://github.com/facebook/react/pull/22472))
 
+---
+
 ### 4.19.0
 September 29, 2021
 
@@ -136,6 +177,8 @@ September 29, 2021
 * 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
 
@@ -143,12 +186,16 @@ September 1, 2021
 * 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
 
@@ -164,6 +211,8 @@ August 24, 2021
 * 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
@@ -173,6 +222,8 @@ August 16, 2021
 * 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
 
@@ -256,6 +307,8 @@ Another thing the new profiler will warn about is long-running renders scheduled
 
 https://user-images.githubusercontent.com/29597/128972017-3ed0e682-751c-46fb-a6c5-271f255c8087.mp4
 
+---
+
 ### 4.14.0
 July 17, 2021
 #### Features
@@ -269,17 +322,23 @@ July 17, 2021
 ##### 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
@@ -294,11 +353,15 @@ May 19, 2021
  ([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
@@ -309,6 +372,8 @@ April 28, 2021
 #### 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
@@ -328,38 +393,52 @@ During initialization, DevTools now checks to ensure it's compatible with the ["
 
 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
@@ -406,26 +485,36 @@ The following features are only enabled when used with (experimental) builds of
 ###### 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
@@ -435,6 +524,8 @@ November 12, 2020
 * 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
@@ -459,6 +550,8 @@ October 19, 2020
 * 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))
@@ -480,6 +573,8 @@ New values can be added to array props/state/hooks now. Existing values can also
 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
@@ -487,11 +582,15 @@ July 15, 2020
 * 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
@@ -503,6 +602,8 @@ July 9, 2020
 * 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
 
@@ -526,6 +627,8 @@ May 18, 2020
 * 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
 
@@ -540,6 +643,8 @@ March 26, 2020
 #### 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
 
@@ -571,6 +676,8 @@ March 3, 2020
 
 ![Vertical Components panel resizing](https://user-images.githubusercontent.com/23095052/74603149-d074c080-50b0-11ea-820f-63db30b4c285.gif)
 
+---
+
 ### 4.4.0
 January 3, 2020
 #### Features
@@ -585,6 +692,8 @@ January 3, 2020
 * 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
@@ -596,6 +705,8 @@ December 20, 2019
 * 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
@@ -603,21 +714,29 @@ November 27, 2019
 * 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
@@ -626,6 +745,8 @@ September 26, 2019
 * 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
@@ -636,23 +757,31 @@ September 19, 2019
 * 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
@@ -662,19 +791,27 @@ August 17, 2019
 * 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
@@ -692,6 +829,8 @@ 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
@@ -778,6 +917,8 @@ 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
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 133aa724cb19..f892b66373b9 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.23.0",
+  "version": "4.24.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.23.0",
+    "react-devtools-core": "4.24.0",
     "update-notifier": "^2.1.0"
   }
 }
diff --git a/scripts/devtools/prepare-release.js b/scripts/devtools/prepare-release.js
index 75e9615dc838..e3a0421225bb 100755
--- a/scripts/devtools/prepare-release.js
+++ b/scripts/devtools/prepare-release.js
@@ -204,7 +204,7 @@ function updateChangelog(nextVersion, commitLog) {
     month: 'long',
     day: 'numeric',
   });
-  const header = `## ${nextVersion} (${dateString})`;
+  const header = `---\n\n### ${nextVersion}\n${dateString}`;
 
   const newChangelog = `${beginning}${RELEASE_SCRIPT_TOKEN}\n\n${header}\n${commitLog}${end}`;
 

From 08644348b62bbfe979570b7174ff493da9bc70e9 Mon Sep 17 00:00:00 2001
From: BIKI DAS <bikid475@gmail.com>
Date: Thu, 3 Mar 2022 00:40:06 +0530
Subject: [PATCH 1182/1603] Added unit Tests in the ReactART, increasing the
 code coverage (#23195)

---
 .../react-art/src/__tests__/ReactART-test.js  |  54 ++++++
 .../__snapshots__/ReactART-test.js.snap       | 169 ++++++++++++++++++
 2 files changed, 223 insertions(+)

diff --git a/packages/react-art/src/__tests__/ReactART-test.js b/packages/react-art/src/__tests__/ReactART-test.js
index 950ec77bb1a6..bbe6f0643d02 100644
--- a/packages/react-art/src/__tests__/ReactART-test.js
+++ b/packages/react-art/src/__tests__/ReactART-test.js
@@ -440,6 +440,60 @@ describe('ReactARTComponents', () => {
     expect(rectangle.toJSON()).toMatchSnapshot();
   });
 
+  it('should generate a <Shape> with positive width when width prop is negative', () => {
+    const rectangle = ReactTestRenderer.create(
+      <Rectangle width={-50} height={50} />,
+    );
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with positive height when height prop is negative', () => {
+    const rectangle = ReactTestRenderer.create(
+      <Rectangle height={-50} width={50} />,
+    );
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when top left radius prop is negative', () => {
+    const rectangle = ReactTestRenderer.create(
+      <Rectangle radiusTopLeft={-25} width={50} height={50} />,
+    );
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when top right radius prop is negative', () => {
+    const rectangle = ReactTestRenderer.create(
+      <Rectangle radiusTopRight={-25} width={50} height={50} />,
+    );
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when bottom right radius prop is negative', () => {
+    const rectangle = ReactTestRenderer.create(
+      <Rectangle radiusBottomRight={-30} width={50} height={50} />,
+    );
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
+  it('should generate a <Shape> with a radius property of 0 when bottom left radius prop is negative', () => {
+    const rectangle = ReactTestRenderer.create(
+      <Rectangle radiusBottomLeft={-25} width={50} height={50} />,
+    );
+    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', () => {
+    const rectangle = ReactTestRenderer.create(
+      <Rectangle
+        radiusTopRight={25}
+        radiusTopLeft={26}
+        width={50}
+        height={40}
+      />,
+    );
+    expect(rectangle.toJSON()).toMatchSnapshot();
+  });
+
   it('should warn if width/height is missing on a Rectangle component', () => {
     expect(() =>
       ReactTestRenderer.create(<Rectangle stroke="green" fill="blue" />),
diff --git a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap
index 2cd122906953..c8c5609ad922 100644
--- a/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap
+++ b/packages/react-art/src/__tests__/__snapshots__/ReactART-test.js.snap
@@ -1,5 +1,174 @@
 // 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={
+    Object {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": Array [
+        [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={
+    Object {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": Array [
+        [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={
+    Object {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": Array [
+        [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={
+    Object {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": Array [
+        [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={
+    Object {
+      "_pivotX": 0,
+      "_pivotY": 0,
+      "path": Array [
+        [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={
+    Object {
+      "_pivotX": 0,
+      "_pivotY": -50,
+      "path": Array [
+        [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={
+    Object {
+      "_pivotX": -50,
+      "_pivotY": 0,
+      "path": Array [
+        [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={

From 05c283c3c31184d68c6a54dfd6a044790b89a08a Mon Sep 17 00:00:00 2001
From: Joshua Gross <joshua.gross@gmail.com>
Date: Wed, 2 Mar 2022 12:00:08 -0800
Subject: [PATCH 1183/1603] Fabric HostComponent as EventEmitter: support
 add/removeEventListener (unstable only) (#23386)

* Implement addEventListener and removeEventListener on Fabric HostComponent

* add files

* re-add CustomEvent

* fix flow

* Need to get CustomEvent from an import since it won't exist on the global scope by default

* yarn prettier-all

* use a mangled name consistently to refer to imperatively registered event handlers

* yarn prettier-all

* fuzzy null check

* fix capture phase event listener logic

* early exit from getEventListeners more often

* make some optimizations to getEventListeners and the bridge plugin

* fix accumulateInto logic

* fix accumulateInto

* Simplifying getListeners at the expense of perf for the non-hot path

* feedback

* fix impl of getListeners to correctly remove function

* pass all args in to event listeners
---
 .../src/ReactFabricEventEmitter.js            |   4 +-
 .../src/ReactFabricHostConfig.js              | 119 +++++++++++++
 .../src/ReactNativeBridgeEventPlugin.js       |  56 +++---
 .../src/ReactNativeEventEmitter.js            |   4 +-
 .../src/ReactNativeGetListener.js             |  36 ----
 .../src/ReactNativeGetListeners.js            | 168 ++++++++++++++++++
 .../Libraries/ReactPrivate/CustomEvent.js     |  14 ++
 .../ReactNativePrivateInterface.js            |   3 +
 .../src/legacy-events/PropagationPhases.js    |  10 ++
 scripts/flow/react-native-host-hooks.js       |   1 +
 10 files changed, 355 insertions(+), 60 deletions(-)
 delete mode 100644 packages/react-native-renderer/src/ReactNativeGetListener.js
 create mode 100644 packages/react-native-renderer/src/ReactNativeGetListeners.js
 create mode 100644 packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/CustomEvent.js
 create mode 100644 packages/react-native-renderer/src/legacy-events/PropagationPhases.js

diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
index d8492156fdc7..c3b89e91779a 100644
--- a/packages/react-native-renderer/src/ReactFabricEventEmitter.js
+++ b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
@@ -18,12 +18,12 @@ import {batchedUpdates} from './legacy-events/ReactGenericBatching';
 import accumulateInto from './legacy-events/accumulateInto';
 
 import {plugins} from './legacy-events/EventPluginRegistry';
-import getListener from './ReactNativeGetListener';
+import getListeners from './ReactNativeGetListeners';
 import {runEventsInBatch} from './legacy-events/EventBatching';
 
 import {RawEventEmitter} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
-export {getListener, registrationNameModules as registrationNames};
+export {getListeners, registrationNameModules as registrationNames};
 
 /**
  * Allows registered plugins an opportunity to extract events from top-level
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 727b782efd76..81295f6e50f6 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -95,6 +95,28 @@ export type RendererInspectionConfig = $ReadOnly<{|
   ) => void,
 |}>;
 
+// TODO?: find a better place for this type to live
+export type EventListenerOptions = $ReadOnly<{|
+  capture?: boolean,
+  once?: boolean,
+  passive?: boolean,
+  signal: mixed, // not yet implemented
+|}>;
+export type EventListenerRemoveOptions = $ReadOnly<{|
+  capture?: boolean,
+|}>;
+
+// TODO?: this will be changed in the future to be w3c-compatible and allow "EventListener" objects as well as functions.
+export type EventListener = Function;
+
+type InternalEventListeners = {
+  [string]: {|
+    listener: EventListener,
+    options: EventListenerOptions,
+    invalidated: boolean,
+  |}[],
+};
+
 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {
   /**
@@ -111,6 +133,7 @@ class ReactFabricHostComponent {
   viewConfig: ViewConfig;
   currentProps: Props;
   _internalInstanceHandle: Object;
+  _eventListeners: ?InternalEventListeners;
 
   constructor(
     tag: number,
@@ -193,6 +216,102 @@ class ReactFabricHostComponent {
 
     return;
   }
+
+  // This API (addEventListener, removeEventListener) attempts to adhere to the
+  // w3 Level2 Events spec as much as possible, treating HostComponent as a DOM node.
+  //
+  // Unless otherwise noted, these methods should "just work" and adhere to the W3 specs.
+  // If they deviate in a way that is not explicitly noted here, you've found a bug!
+  //
+  // See:
+  // * https://www.w3.org/TR/DOM-Level-2-Events/events.html
+  // * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+  // * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
+  //
+  // And notably, not implemented (yet?):
+  // * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
+  //
+  //
+  // Deviations from spec/TODOs:
+  // (1) listener must currently be a function, we do not support EventListener objects yet.
+  // (2) we do not support the `signal` option / AbortSignal yet
+  addEventListener_unstable(
+    eventType: string,
+    listener: EventListener,
+    options: EventListenerOptions | boolean,
+  ) {
+    if (typeof eventType !== 'string') {
+      throw new Error('addEventListener_unstable eventType must be a string');
+    }
+    if (typeof listener !== 'function') {
+      throw new Error('addEventListener_unstable listener must be a function');
+    }
+
+    // The third argument is either boolean indicating "captures" or an object.
+    const optionsObj =
+      typeof options === 'object' && options !== null ? options : {};
+    const capture =
+      (typeof options === 'boolean' ? options : optionsObj.capture) || false;
+    const once = optionsObj.once || false;
+    const passive = optionsObj.passive || false;
+    const signal = null; // TODO: implement signal/AbortSignal
+
+    const eventListeners: InternalEventListeners = this._eventListeners || {};
+    if (this._eventListeners == null) {
+      this._eventListeners = eventListeners;
+    }
+
+    const namedEventListeners = eventListeners[eventType] || [];
+    if (eventListeners[eventType] == null) {
+      eventListeners[eventType] = namedEventListeners;
+    }
+
+    namedEventListeners.push({
+      listener: listener,
+      invalidated: false,
+      options: {
+        capture: capture,
+        once: once,
+        passive: passive,
+        signal: signal,
+      },
+    });
+  }
+
+  // See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
+  removeEventListener_unstable(
+    eventType: string,
+    listener: EventListener,
+    options: EventListenerRemoveOptions | boolean,
+  ) {
+    // eventType and listener must be referentially equal to be removed from the listeners
+    // data structure, but in "options" we only check the `capture` flag, according to spec.
+    // That means if you add the same function as a listener with capture set to true and false,
+    // you must also call removeEventListener twice with capture set to true/false.
+    const optionsObj =
+      typeof options === 'object' && options !== null ? options : {};
+    const capture =
+      (typeof options === 'boolean' ? options : optionsObj.capture) || false;
+
+    // If there are no event listeners or named event listeners, we can bail early - our
+    // job is already done.
+    const eventListeners = this._eventListeners;
+    if (!eventListeners) {
+      return;
+    }
+    const namedEventListeners = eventListeners[eventType];
+    if (!namedEventListeners) {
+      return;
+    }
+
+    // TODO: optimize this path to make remove cheaper
+    eventListeners[eventType] = namedEventListeners.filter(listenerObj => {
+      return !(
+        listenerObj.listener === listener &&
+        listenerObj.options.capture === capture
+      );
+    });
+  }
 }
 
 // eslint-disable-next-line no-unused-expressions
diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
index 212b181c0829..2d74776e4200 100644
--- a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
+++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
@@ -10,13 +10,15 @@
 import type {AnyNativeEvent} from './legacy-events/PluginModuleType';
 import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
 import SyntheticEvent from './legacy-events/SyntheticEvent';
+import type {PropagationPhases} from './legacy-events/PropagationPhases';
 
 // Module provided by RN:
 import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 import accumulateInto from './legacy-events/accumulateInto';
-import getListener from './ReactNativeGetListener';
+import getListeners from './ReactNativeGetListeners';
 import forEachAccumulated from './legacy-events/forEachAccumulated';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
+import isArray from 'shared/isArray';
 
 const {
   customBubblingEventTypes,
@@ -26,10 +28,37 @@ const {
 // Start of inline: the below functions were inlined from
 // EventPropagator.js, as they deviated from ReactDOM's newer
 // implementations.
-function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
+function listenersAtPhase(inst, event, propagationPhase: PropagationPhases) {
   const registrationName =
     event.dispatchConfig.phasedRegistrationNames[propagationPhase];
-  return getListener(inst, registrationName);
+  return getListeners(inst, registrationName, propagationPhase, true);
+}
+
+function accumulateListenersAndInstances(inst, event, listeners) {
+  const listenersLength = listeners
+    ? isArray(listeners)
+      ? listeners.length
+      : 1
+    : 0;
+  if (listenersLength > 0) {
+    event._dispatchListeners = accumulateInto(
+      event._dispatchListeners,
+      listeners,
+    );
+
+    // Avoid allocating additional arrays here
+    if (event._dispatchInstances == null && listenersLength === 1) {
+      event._dispatchInstances = inst;
+    } else {
+      event._dispatchInstances = event._dispatchInstances || [];
+      if (!isArray(event._dispatchInstances)) {
+        event._dispatchInstances = [event._dispatchInstances];
+      }
+      for (let i = 0; i < listenersLength; i++) {
+        event._dispatchInstances.push(inst);
+      }
+    }
+  }
 }
 
 function accumulateDirectionalDispatches(inst, phase, event) {
@@ -38,14 +67,8 @@ function accumulateDirectionalDispatches(inst, phase, event) {
       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);
-  }
+  const listeners = listenersAtPhase(inst, event, phase);
+  accumulateListenersAndInstances(inst, event, listeners);
 }
 
 function getParent(inst) {
@@ -103,14 +126,8 @@ function accumulateDispatches(
 ): 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);
-    }
+    const listeners = getListeners(inst, registrationName, 'bubbled', false);
+    accumulateListenersAndInstances(inst, event, listeners);
   }
 }
 
@@ -130,7 +147,6 @@ function accumulateDirectDispatches(events: ?(Array<Object> | Object)) {
 }
 
 // End of inline
-type PropagationPhases = 'bubbled' | 'captured';
 
 const ReactNativeBridgeEventPlugin = {
   eventTypes: {},
diff --git a/packages/react-native-renderer/src/ReactNativeEventEmitter.js b/packages/react-native-renderer/src/ReactNativeEventEmitter.js
index 2ba35aed39b9..91816a53f82d 100644
--- a/packages/react-native-renderer/src/ReactNativeEventEmitter.js
+++ b/packages/react-native-renderer/src/ReactNativeEventEmitter.js
@@ -17,12 +17,12 @@ import {registrationNameModules} from './legacy-events/EventPluginRegistry';
 import {batchedUpdates} from './legacy-events/ReactGenericBatching';
 import {runEventsInBatch} from './legacy-events/EventBatching';
 import {plugins} from './legacy-events/EventPluginRegistry';
-import getListener from './ReactNativeGetListener';
+import getListeners from './ReactNativeGetListeners';
 import accumulateInto from './legacy-events/accumulateInto';
 
 import {getInstanceFromNode} from './ReactNativeComponentTree';
 
-export {getListener, registrationNameModules as registrationNames};
+export {getListeners, registrationNameModules as registrationNames};
 
 /**
  * Version of `ReactBrowserEventEmitter` that works on the receiving side of a
diff --git a/packages/react-native-renderer/src/ReactNativeGetListener.js b/packages/react-native-renderer/src/ReactNativeGetListener.js
deleted file mode 100644
index 4f76fddd29e7..000000000000
--- a/packages/react-native-renderer/src/ReactNativeGetListener.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @flow
- */
-
-import type {Fiber} from '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/ReactNativeGetListeners.js b/packages/react-native-renderer/src/ReactNativeGetListeners.js
new file mode 100644
index 000000000000..2ab198c50438
--- /dev/null
+++ b/packages/react-native-renderer/src/ReactNativeGetListeners.js
@@ -0,0 +1,168 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ * @flow
+ */
+
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {PropagationPhases} from './legacy-events/PropagationPhases';
+
+import {getFiberCurrentPropsFromNode} from './legacy-events/EventPluginUtils';
+import {CustomEvent} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+
+/**
+ * Get a list of listeners for a specific event, in-order.
+ * For React Native we treat the props-based function handlers
+ * as the first-class citizens, and they are always executed first
+ * for both capture and bubbling phase.
+ *
+ * We need "phase" propagated to this point to support the HostComponent
+ * EventEmitter API, which does not mutate the name of the handler based
+ * on phase (whereas prop handlers are registered as `onMyEvent` and `onMyEvent_Capture`).
+ *
+ * Native system events emitted into React Native
+ * will be emitted both to the prop handler function and to imperative event
+ * listeners.
+ *
+ * This will either return null, a single Function without an array, or
+ * an array of 2+ items.
+ */
+export default function getListeners(
+  inst: Fiber,
+  registrationName: string,
+  phase: PropagationPhases,
+  dispatchToImperativeListeners: boolean,
+): null | Function | Array<Function> {
+  const stateNode = inst.stateNode;
+
+  if (stateNode === null) {
+    return null;
+  }
+
+  // If null: Work in progress (ex: onload events in incremental mode).
+  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.`,
+    );
+  }
+
+  // If there are no imperative listeners, early exit.
+  if (
+    !(
+      dispatchToImperativeListeners &&
+      stateNode.canonical &&
+      stateNode.canonical._eventListeners
+    )
+  ) {
+    return listener;
+  }
+
+  // Below this is the de-optimized path.
+  // If you are using _eventListeners, we do not (yet)
+  // expect this to be as performant as the props-only path.
+  // If/when this becomes a bottleneck, it can be refactored
+  // to avoid unnecessary closures and array allocations.
+  //
+  // Previously, there was only one possible listener for an event:
+  // the onEventName property in props.
+  // Now, it is also possible to have N listeners
+  // for a specific event on a node. Thus, we accumulate all of the listeners,
+  // including the props listener, and return a function that calls them all in
+  // order, starting with the handler prop and then the listeners in order.
+  // We return either a non-empty array or null.
+  const listeners = [];
+  if (listener) {
+    listeners.push(listener);
+  }
+
+  // TODO: for now, all of these events get an `rn:` prefix to enforce
+  // that the user knows they're only getting non-W3C-compliant events
+  // through this imperative event API.
+  // Events might not necessarily be noncompliant, but we currently have
+  // no verification that /any/ events are compliant.
+  // Thus, we prefix to ensure no collision with W3C event names.
+  const requestedPhaseIsCapture = phase === 'captured';
+  const mangledImperativeRegistrationName = requestedPhaseIsCapture
+    ? 'rn:' + registrationName.replace(/Capture$/, '')
+    : 'rn:' + registrationName;
+
+  // Get imperative event listeners for this event
+  if (
+    stateNode.canonical._eventListeners[mangledImperativeRegistrationName] &&
+    stateNode.canonical._eventListeners[mangledImperativeRegistrationName]
+      .length > 0
+  ) {
+    const eventListeners =
+      stateNode.canonical._eventListeners[mangledImperativeRegistrationName];
+
+    eventListeners.forEach(listenerObj => {
+      // Make sure phase of listener matches requested phase
+      const isCaptureEvent =
+        listenerObj.options.capture != null && listenerObj.options.capture;
+      if (isCaptureEvent !== requestedPhaseIsCapture) {
+        return;
+      }
+
+      // For now (this is an area of future optimization) we must wrap
+      // all imperative event listeners in a function to unwrap the SyntheticEvent
+      // and pass them an Event.
+      // When this API is more stable and used more frequently, we can revisit.
+      const listenerFnWrapper = function(syntheticEvent, ...args) {
+        const eventInst = new CustomEvent(mangledImperativeRegistrationName, {
+          detail: syntheticEvent.nativeEvent,
+        });
+        eventInst.isTrusted = true;
+        // setSyntheticEvent is present on the React Native Event shim.
+        // It is used to forward method calls on Event to the underlying SyntheticEvent.
+        // $FlowFixMe
+        eventInst.setSyntheticEvent(syntheticEvent);
+
+        listenerObj.listener(eventInst, ...args);
+      };
+
+      // Only call once?
+      // If so, we ensure that it's only called once by setting a flag
+      // and by removing it from eventListeners once it is called (but only
+      // when it's actually been executed).
+      if (listenerObj.options.once) {
+        listeners.push(function(...args) {
+          // Remove from the event listener once it's been called
+          stateNode.canonical.removeEventListener_unstable(
+            mangledImperativeRegistrationName,
+            listenerObj.listener,
+            listenerObj.capture,
+          );
+
+          // Guard against function being called more than once in
+          // case there are somehow multiple in-flight references to
+          // it being processed
+          if (!listenerObj.invalidated) {
+            listenerObj.invalidated = true;
+            listenerObj.listener(...args);
+          }
+        });
+      } else {
+        listeners.push(listenerFnWrapper);
+      }
+    });
+  }
+
+  if (listeners.length === 0) {
+    return null;
+  }
+  if (listeners.length === 1) {
+    return listeners[0];
+  }
+
+  return listeners;
+}
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/CustomEvent.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/CustomEvent.js
new file mode 100644
index 000000000000..0b0b79c5dddd
--- /dev/null
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/CustomEvent.js
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+// See the react-native repository for a full implementation.
+// This is just a stub, currently to pass `instanceof` checks.
+const CustomEvent = jest.fn();
+
+module.exports = {default: CustomEvent};
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
index 3eaf3a5a3805..dbfb9910c943 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js
@@ -44,4 +44,7 @@ module.exports = {
   get RawEventEmitter() {
     return require('./RawEventEmitter').default;
   },
+  get CustomEvent() {
+    return require('./CustomEvent').default;
+  },
 };
diff --git a/packages/react-native-renderer/src/legacy-events/PropagationPhases.js b/packages/react-native-renderer/src/legacy-events/PropagationPhases.js
new file mode 100644
index 000000000000..7d05d30be8c4
--- /dev/null
+++ b/packages/react-native-renderer/src/legacy-events/PropagationPhases.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type PropagationPhases = 'bubbled' | 'captured';
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index c7a2fc8dc321..896964f06364 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -138,6 +138,7 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
     emit: (channel: string, event: RawEventEmitterEvent) => string,
     ...
   };
+  declare export var CustomEvent: CustomEvent;
 }
 
 declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore' {

From 5662857616f7d645d3f7f5d4709c5bc36c660fcf Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Thu, 3 Mar 2022 12:02:37 -0500
Subject: [PATCH 1184/1603] [Fizz] Export debug function for FB (#24024)

* export debug function for FB

* silence flow
---
 .../src/ReactDOMServerFB.js                       | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index 35a8143125d7..0d7aeef6cbd4 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -92,4 +92,17 @@ function hasFinished(stream: Stream): boolean {
   return stream.destination.done;
 }
 
-export {renderToStream, renderNextChunk, hasFinished, abortStream};
+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};

From cb1e7b1c6ccd989d54b376ee4ae9da72a34f96e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 3 Mar 2022 12:46:12 -0500
Subject: [PATCH 1185/1603] Move onCompleteAll to .allReady Promise (#24025)

* Move onCompleteAll to .allReady Promise

The onCompleteAll callback can sometimes resolve before the promise that
returns the stream which is tough to coordinate. A more idiomatic API
for a one shot event is a Promise.

That way the way you render for SEO or SSG is:

const stream = await renderToReadableStream(...);
await stream.readyAll;
respondWith(stream);

Ideally this should be a sub-class of ReadableStream but we don't yet
compile these to ES6 and they'd had to be to native class to subclass
a native stream.

I have other ideas for overriding the .tee() method in a subclass anyway.
So this is inline with that strategy.

* Reject the Promise on fatal errors
---
 .../ReactDOMFizzServerBrowser-test.js         |  8 +++----
 .../src/server/ReactDOMFizzServerBrowser.js   | 24 +++++++++++++++----
 .../src/server/ReactDOMFizzServerNode.js      |  1 +
 .../src/server/ReactDOMLegacyServerBrowser.js |  2 ++
 .../src/server/ReactDOMLegacyServerNode.js    |  1 +
 packages/react-server/src/ReactFizzServer.js  |  3 +++
 6 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 87d04bdd0765..93e30aa2305b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -105,12 +105,10 @@ describe('ReactDOMFizzServer', () => {
           <Wait />
         </Suspense>
       </div>,
-      {
-        onCompleteAll() {
-          isComplete = true;
-        },
-      },
     );
+
+    stream.allReady.then(() => (isComplete = true));
+
     await jest.runAllTimers();
     expect(isComplete).toBe(false);
     // Resolve the loading.
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index a07967ca34f9..bf90682d3c6a 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -32,23 +32,36 @@ type Options = {|
   bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
-  onCompleteAll?: () => void,
   onError?: (error: mixed) => void,
 |};
 
+// TODO: Move to sub-classing ReadableStream.
+type ReactDOMServerReadableStream = ReadableStream & {
+  allReady: Promise<void>,
+};
+
 function renderToReadableStream(
   children: ReactNodeList,
   options?: Options,
-): Promise<ReadableStream> {
+): Promise<ReactDOMServerReadableStream> {
   return new Promise((resolve, reject) => {
+    let onFatalError;
+    let onCompleteAll;
+    const allReady = new Promise((res, rej) => {
+      onCompleteAll = res;
+      onFatalError = rej;
+    });
+
     function onCompleteShell() {
-      const stream = new ReadableStream({
+      const stream: ReactDOMServerReadableStream = (new ReadableStream({
         type: 'bytes',
         pull(controller) {
           startFlowing(request, controller);
         },
         cancel(reason) {},
-      });
+      }): any);
+      // TODO: Move to sub-classing ReadableStream.
+      stream.allReady = allReady;
       resolve(stream);
     }
     function onErrorShell(error: mixed) {
@@ -66,9 +79,10 @@ function renderToReadableStream(
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
       options ? options.onError : undefined,
-      options ? options.onCompleteAll : undefined,
+      onCompleteAll,
       onCompleteShell,
       onErrorShell,
+      onFatalError,
     );
     if (options && options.signal) {
       const signal = options.signal;
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 15e263618706..39126ed8d426 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -65,6 +65,7 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
     options ? options.onCompleteAll : undefined,
     options ? options.onCompleteShell : undefined,
     options ? options.onErrorShell : undefined,
+    undefined,
   );
 }
 
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 1a11911ad531..778806c9703d 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -67,6 +67,8 @@ function renderToStringImpl(
     onError,
     undefined,
     onCompleteShell,
+    undefined,
+    undefined,
   );
   startWork(request);
   // If anything suspended and is still pending, we'll abort it before writing.
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index fd55b2b0a5ce..7840708c5ad5 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -83,6 +83,7 @@ function renderToNodeStreamImpl(
     onError,
     onCompleteAll,
     undefined,
+    undefined,
   );
   destination.request = request;
   startWork(request);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index a7f5ad834693..306926503d75 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -204,6 +204,7 @@ export opaque type Request = {
   // onErrorShell is called when the shell didn't complete. That means you probably want to
   // emit a different response to the stream instead.
   onErrorShell: (error: mixed) => void,
+  onFatalError: (error: mixed) => void,
 };
 
 // This is a default heuristic for how to split up the HTML content into progressive
@@ -238,6 +239,7 @@ export function createRequest(
   onCompleteAll: void | (() => void),
   onCompleteShell: void | (() => void),
   onErrorShell: void | ((error: mixed) => void),
+  onFatalError: void | ((error: mixed) => void),
 ): Request {
   const pingedTasks = [];
   const abortSet: Set<Task> = new Set();
@@ -263,6 +265,7 @@ export function createRequest(
     onCompleteAll: onCompleteAll === undefined ? noop : onCompleteAll,
     onCompleteShell: onCompleteShell === undefined ? noop : onCompleteShell,
     onErrorShell: onErrorShell === undefined ? noop : onErrorShell,
+    onFatalError: onFatalError === undefined ? noop : onFatalError,
   };
   // This segment represents the root fallback.
   const rootSegment = createPendingSegment(request, 0, null, rootFormatContext);

From 14c2be8dac2d5482fda8a0906a31d239df8551fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 4 Mar 2022 14:38:46 -0500
Subject: [PATCH 1186/1603] Rename Node SSR Callbacks to
 onShellReady/onAllReady and Other Fixes (#24030)

* I forgot to call onFatalError

I can't figure out how to write a test for this because it only happens
when there is a bug in React itself which would then be fixed if we found
it.

We're also covered by the protection of ReadableStream which doesn't leak
other errors to us.

* Abort requests if the reader cancels

No need to continue computing at this point.

* Abort requests if node streams get destroyed

This is if the downstream cancels is for example.

* Rename Node APIs for Parity with allReady

The "Complete" terminology is a little misleading because not everything
has been written yet. It's just "Ready" to be written now.

onShellReady
onShellError
onAllReady

* 'close' should be enough
---
 fixtures/ssr/server/render.js                 |  4 +-
 fixtures/ssr2/server/render.js                |  2 +-
 .../src/__tests__/ReactDOMFizzServer-test.js  |  6 +-
 .../ReactDOMFizzServerBrowser-test.js         | 39 +++++++++++++
 .../__tests__/ReactDOMFizzServerNode-test.js  | 57 +++++++++++++++++--
 .../ReactDOMServerIntegrationTestUtils.js     |  2 +-
 .../src/server/ReactDOMFizzServerBrowser.js   | 18 +++---
 .../src/server/ReactDOMFizzServerNode.js      | 17 ++++--
 .../src/server/ReactDOMLegacyServerBrowser.js |  4 +-
 .../src/server/ReactDOMLegacyServerNode.js    |  4 +-
 .../src/ReactNoopServer.js                    |  8 +--
 packages/react-server/src/ReactFizzServer.js  | 48 ++++++++--------
 12 files changed, 151 insertions(+), 58 deletions(-)

diff --git a/fixtures/ssr/server/render.js b/fixtures/ssr/server/render.js
index ae30e622174c..a4fe698858ab 100644
--- a/fixtures/ssr/server/render.js
+++ b/fixtures/ssr/server/render.js
@@ -22,13 +22,13 @@ export default function render(url, res) {
   let didError = false;
   const {pipe, abort} = renderToPipeableStream(<App assets={assets} />, {
     bootstrapScripts: [assets['main.js']],
-    onCompleteShell() {
+    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);
     },
-    onErrorShell(x) {
+    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>');
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index ccd12af0d363..ea2b6e4696a0 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -49,7 +49,7 @@ module.exports = function render(url, res) {
         res.setHeader('Content-type', 'text/html');
         pipe(res);
       },
-      onErrorShell(x) {
+      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>');
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 90b339bb281e..0aacf5a75524 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -914,7 +914,7 @@ describe('ReactDOMFizzServer', () => {
         </Suspense>,
         {
           identifierPrefix: 'A_',
-          onCompleteShell() {
+          onShellReady() {
             writableA.write('<div id="container-A">');
             pipe(writableA);
             writableA.write('</div>');
@@ -933,7 +933,7 @@ describe('ReactDOMFizzServer', () => {
         </Suspense>,
         {
           identifierPrefix: 'B_',
-          onCompleteShell() {
+          onShellReady() {
             writableB.write('<div id="container-B">');
             pipe(writableB);
             writableB.write('</div>');
@@ -1168,7 +1168,7 @@ describe('ReactDOMFizzServer', () => {
 
         {
           namespaceURI: 'http://www.w3.org/2000/svg',
-          onCompleteShell() {
+          onShellReady() {
             writable.write('<svg>');
             pipe(writable);
             writable.write('</svg>');
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 93e30aa2305b..ad6176e3fa5e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -209,4 +209,43 @@ describe('ReactDOMFizzServer', () => {
     const result = await readResult(stream);
     expect(result).toContain('Loading');
   });
+
+  // @gate experimental
+  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 stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Wait /> />
+        </Suspense>
+      </div>,
+    );
+
+    stream.allReady.then(() => (isComplete = true));
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(false);
+
+    const reader = stream.getReader();
+    reader.cancel();
+
+    hasLoaded = true;
+    resolve();
+
+    await jest.runAllTimers();
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(true);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index a35a250282ec..c1844d7ef78b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -138,7 +138,7 @@ describe('ReactDOMFizzServer', () => {
       </div>,
 
       {
-        onCompleteAll() {
+        onAllReady() {
           isCompleteCalls++;
         },
       },
@@ -179,7 +179,7 @@ describe('ReactDOMFizzServer', () => {
         onError(x) {
           reportedErrors.push(x);
         },
-        onErrorShell(x) {
+        onShellError(x) {
           reportedShellErrors.push(x);
         },
       },
@@ -213,7 +213,7 @@ describe('ReactDOMFizzServer', () => {
         onError(x) {
           reportedErrors.push(x);
         },
-        onErrorShell(x) {
+        onShellError(x) {
           reportedShellErrors.push(x);
         },
       },
@@ -244,7 +244,7 @@ describe('ReactDOMFizzServer', () => {
         onError(x) {
           reportedErrors.push(x);
         },
-        onErrorShell(x) {
+        onShellError(x) {
           reportedShellErrors.push(x);
         },
       },
@@ -298,7 +298,7 @@ describe('ReactDOMFizzServer', () => {
       </div>,
 
       {
-        onCompleteAll() {
+        onAllReady() {
           isCompleteCalls++;
         },
       },
@@ -333,7 +333,7 @@ describe('ReactDOMFizzServer', () => {
       </div>,
 
       {
-        onCompleteAll() {
+        onAllReady() {
           isCompleteCalls++;
         },
       },
@@ -537,4 +537,49 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).not.toContain('context never found');
     expect(output.result).toContain('OK');
   });
+
+  // @gate experimental
+  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() {
+      if (!hasLoaded) {
+        throw promise;
+      }
+      rendered = true;
+      return 'Done';
+    }
+    const {writable, completed} = getTestWritable();
+    const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Wait />
+        </Suspense>
+      </div>,
+      {
+        onAllReady() {
+          isComplete = true;
+        },
+      },
+    );
+    pipe(writable);
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(false);
+
+    writable.end();
+
+    await jest.runAllTimers();
+
+    hasLoaded = true;
+    resolve();
+
+    await completed;
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(true);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index 9f23d7aa96ae..f03825c16d44 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -155,7 +155,7 @@ module.exports = function(initModules) {
         new Promise((resolve, reject) => {
           const writable = new DrainWritable();
           const s = ReactDOMServer.renderToPipeableStream(reactElement, {
-            onErrorShell(e) {
+            onShellError(e) {
               reject(e);
             },
           });
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index bf90682d3c6a..219c4a1bf7b1 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -46,25 +46,27 @@ function renderToReadableStream(
 ): Promise<ReactDOMServerReadableStream> {
   return new Promise((resolve, reject) => {
     let onFatalError;
-    let onCompleteAll;
+    let onAllReady;
     const allReady = new Promise((res, rej) => {
-      onCompleteAll = res;
+      onAllReady = res;
       onFatalError = rej;
     });
 
-    function onCompleteShell() {
+    function onShellReady() {
       const stream: ReactDOMServerReadableStream = (new ReadableStream({
         type: 'bytes',
         pull(controller) {
           startFlowing(request, controller);
         },
-        cancel(reason) {},
+        cancel(reason) {
+          abort(request);
+        },
       }): any);
       // TODO: Move to sub-classing ReadableStream.
       stream.allReady = allReady;
       resolve(stream);
     }
-    function onErrorShell(error: mixed) {
+    function onShellError(error: mixed) {
       reject(error);
     }
     const request = createRequest(
@@ -79,9 +81,9 @@ function renderToReadableStream(
       createRootFormatContext(options ? options.namespaceURI : undefined),
       options ? options.progressiveChunkSize : undefined,
       options ? options.onError : undefined,
-      onCompleteAll,
-      onCompleteShell,
-      onErrorShell,
+      onAllReady,
+      onShellReady,
+      onShellError,
       onFatalError,
     );
     if (options && options.signal) {
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 39126ed8d426..306724c448b0 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -28,6 +28,10 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request, destination);
 }
 
+function createAbortHandler(request) {
+  return () => abort(request);
+}
+
 type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
@@ -36,9 +40,9 @@ type Options = {|
   bootstrapScripts?: Array<string>,
   bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
-  onCompleteShell?: () => void,
-  onErrorShell?: () => void,
-  onCompleteAll?: () => void,
+  onShellReady?: () => void,
+  onShellError?: () => void,
+  onAllReady?: () => void,
   onError?: (error: mixed) => void,
 |};
 
@@ -62,9 +66,9 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
     createRootFormatContext(options ? options.namespaceURI : undefined),
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
-    options ? options.onCompleteAll : undefined,
-    options ? options.onCompleteShell : undefined,
-    options ? options.onErrorShell : undefined,
+    options ? options.onAllReady : undefined,
+    options ? options.onShellReady : undefined,
+    options ? options.onShellError : undefined,
     undefined,
   );
 }
@@ -86,6 +90,7 @@ function renderToPipeableStream(
       hasStartedFlowing = true;
       startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
+      destination.on('close', createAbortHandler(request));
       return destination;
     },
     abort() {
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 778806c9703d..168f38fc59db 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -53,7 +53,7 @@ function renderToStringImpl(
   };
 
   let readyToStream = false;
-  function onCompleteShell() {
+  function onShellReady() {
     readyToStream = true;
   }
   const request = createRequest(
@@ -66,7 +66,7 @@ function renderToStringImpl(
     Infinity,
     onError,
     undefined,
-    onCompleteShell,
+    onShellReady,
     undefined,
     undefined,
   );
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index 7840708c5ad5..f5c6aa1f4600 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -68,7 +68,7 @@ function renderToNodeStreamImpl(
   options: void | ServerOptions,
   generateStaticMarkup: boolean,
 ): Readable {
-  function onCompleteAll() {
+  function onAllReady() {
     // We wait until everything has loaded before starting to write.
     // That way we only end up with fully resolved HTML even if we suspend.
     destination.startedFlowing = true;
@@ -81,7 +81,7 @@ function renderToNodeStreamImpl(
     createRootFormatContext(),
     Infinity,
     onError,
-    onCompleteAll,
+    onAllReady,
     undefined,
     undefined,
   );
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 94815d57f9a8..5bd7e79cf724 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -251,8 +251,8 @@ const ReactNoopServer = ReactFizzServer({
 
 type Options = {
   progressiveChunkSize?: number,
-  onCompleteShell?: () => void,
-  onCompleteAll?: () => void,
+  onShellReady?: () => void,
+  onAllReady?: () => void,
   onError?: (error: mixed) => void,
 };
 
@@ -272,8 +272,8 @@ function render(children: React$Element<any>, options?: Options): Destination {
     null,
     options ? options.progressiveChunkSize : undefined,
     options ? options.onError : undefined,
-    options ? options.onCompleteAll : undefined,
-    options ? options.onCompleteShell : undefined,
+    options ? options.onAllReady : undefined,
+    options ? options.onShellReady : undefined,
   );
   ReactNoopServer.startWork(request);
   ReactNoopServer.startFlowing(request, destination);
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 306926503d75..7a238391493a 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -194,16 +194,16 @@ export opaque type Request = {
   partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
   // onError is called when an error happens anywhere in the tree. It might recover.
   onError: (error: mixed) => void,
-  // onCompleteAll is called when all pending task is done but it may not have flushed yet.
+  // 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.
-  onCompleteAll: () => void,
-  // onCompleteShell is called when there is at least a root fallback ready to show.
+  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.
-  onCompleteShell: () => void,
-  // onErrorShell is called when the shell didn't complete. That means you probably want to
+  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.
-  onErrorShell: (error: mixed) => void,
+  onShellError: (error: mixed) => void,
   onFatalError: (error: mixed) => void,
 };
 
@@ -236,9 +236,9 @@ export function createRequest(
   rootFormatContext: FormatContext,
   progressiveChunkSize: void | number,
   onError: void | ((error: mixed) => void),
-  onCompleteAll: void | (() => void),
-  onCompleteShell: void | (() => void),
-  onErrorShell: void | ((error: mixed) => void),
+  onAllReady: void | (() => void),
+  onShellReady: void | (() => void),
+  onShellError: void | ((error: mixed) => void),
   onFatalError: void | ((error: mixed) => void),
 ): Request {
   const pingedTasks = [];
@@ -262,9 +262,9 @@ export function createRequest(
     completedBoundaries: [],
     partialBoundaries: [],
     onError: onError === undefined ? defaultErrorHandler : onError,
-    onCompleteAll: onCompleteAll === undefined ? noop : onCompleteAll,
-    onCompleteShell: onCompleteShell === undefined ? noop : onCompleteShell,
-    onErrorShell: onErrorShell === undefined ? noop : onErrorShell,
+    onAllReady: onAllReady === undefined ? noop : onAllReady,
+    onShellReady: onShellReady === undefined ? noop : onShellReady,
+    onShellError: onShellError === undefined ? noop : onShellError,
     onFatalError: onFatalError === undefined ? noop : onFatalError,
   };
   // This segment represents the root fallback.
@@ -422,8 +422,10 @@ function fatalError(request: Request, error: mixed): 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 onErrorShell = request.onErrorShell;
-  onErrorShell(error);
+  const onShellError = request.onShellError;
+  onShellError(error);
+  const onFatalError = request.onFatalError;
+  onFatalError(error);
   if (request.destination !== null) {
     request.status = CLOSED;
     closeWithError(request.destination, error);
@@ -1371,8 +1373,8 @@ function erroredTask(
 
   request.allPendingTasks--;
   if (request.allPendingTasks === 0) {
-    const onCompleteAll = request.onCompleteAll;
-    onCompleteAll();
+    const onAllReady = request.onAllReady;
+    onAllReady();
   }
 }
 
@@ -1422,8 +1424,8 @@ function abortTask(task: Task): void {
 
     request.allPendingTasks--;
     if (request.allPendingTasks === 0) {
-      const onCompleteAll = request.onCompleteAll;
-      onCompleteAll();
+      const onAllReady = request.onAllReady;
+      onAllReady();
     }
   }
 }
@@ -1446,9 +1448,9 @@ function finishedTask(
     request.pendingRootTasks--;
     if (request.pendingRootTasks === 0) {
       // We have completed the shell so the shell can't error anymore.
-      request.onErrorShell = noop;
-      const onCompleteShell = request.onCompleteShell;
-      onCompleteShell();
+      request.onShellError = noop;
+      const onShellReady = request.onShellReady;
+      onShellReady();
     }
   } else {
     boundary.pendingTasks--;
@@ -1499,8 +1501,8 @@ function finishedTask(
   if (request.allPendingTasks === 0) {
     // This needs to be called at the very end so that we can synchronously write the result
     // in the callback if needed.
-    const onCompleteAll = request.onCompleteAll;
-    onCompleteAll();
+    const onAllReady = request.onAllReady;
+    onAllReady();
   }
 }
 

From e09518e5bbb78447d6c86481cf0dcafb4b09c734 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Mon, 7 Mar 2022 10:34:11 -0800
Subject: [PATCH 1187/1603] [Fizz] write chunks to a buffer with no re-use
 (#24034)

* write chunks to a buffer with no re-use

chunks were previously enqueued to a ReadableStream as they were written. We now write them to a view over an ArrayBuffer
and enqueue them only when writing has completed or the buffer's size is exceeded. In addition this copy now ensures
we don't attempt to re-send buffers that have already been transferred.

* refactor writeChunk to be more defensive and efficient

We now defend against overflows using the next views length instead of the current one. this protects us against a future where we use byobRequest and we get longer initial views than we might create after overflowing the first time. Additionally we add in an optimization when we have completely filled up the currentView where we avoid creating subarrays of the chunk to write since it lands exactly on a view boundary. Finally we move the view creation to beginWriting to avoid a runtime check on each write and because we want to reset the view on each beginWriting call in case a throw elsewhere in the program leaves the currentView in an unfinished state

* add tests to exercise codepaths dealing with buffer overlows
---
 .../ReactDOMFizzServerBrowser-test.js         | 40 +++++++++++
 .../src/ReactServerStreamConfigBrowser.js     | 70 +++++++++++++++++--
 2 files changed, 105 insertions(+), 5 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index ad6176e3fa5e..278a15306017 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -248,4 +248,44 @@ describe('ReactDOMFizzServer', () => {
     expect(rendered).toBe(false);
     expect(isComplete).toBe(true);
   });
+
+  // @gate experimental
+  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 ReactDOMFizzServer.renderToReadableStream(
+      <>
+        <div>
+          <span>{''}</span>
+        </div>
+        <div>{str492}</div>
+        <div>{str492}</div>
+      </>,
+    );
+
+    let result;
+    result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<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 ReactDOMFizzServer.renderToReadableStream(
+      <>
+        <div>{str2049}</div>
+      </>,
+    );
+
+    result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
+  });
 });
diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js
index 1655fc69da31..1540e994d66c 100644
--- a/packages/react-server/src/ReactServerStreamConfigBrowser.js
+++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js
@@ -21,24 +21,84 @@ export function flushBuffered(destination: Destination) {
   // transform streams. https://github.com/whatwg/streams/issues/960
 }
 
-export function beginWriting(destination: Destination) {}
+const VIEW_SIZE = 512;
+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,
 ): void {
-  destination.enqueue(chunk);
+  if (chunk.length === 0) {
+    return;
+  }
+
+  if (chunk.length > 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.length) {
+    // 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.length;
 }
 
 export function writeChunkAndReturn(
   destination: Destination,
   chunk: PrecomputedChunk | Chunk,
 ): boolean {
-  destination.enqueue(chunk);
-  return destination.desiredSize > 0;
+  writeChunk(destination, chunk);
+  // in web streams there is no backpressure so we can alwas write more
+  return true;
 }
 
-export function completeWriting(destination: Destination) {}
+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();

From 57799b912d365b373d2fe18d637e77480415df91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Mon, 7 Mar 2022 21:13:22 -0800
Subject: [PATCH 1188/1603] Add more feature flag checks (#24037)

---
 packages/react-reconciler/src/ReactFiber.new.js      | 12 ++++++++----
 packages/react-reconciler/src/ReactFiber.old.js      | 12 ++++++++----
 .../src/__tests__/DebugTracing-test.internal.js      |  8 +++-----
 packages/shared/getComponentNameFromType.js          | 11 +++++++++--
 packages/shared/isValidElementType.js                |  3 ++-
 5 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index ae51649b4a90..977a3f67e03d 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -26,6 +26,7 @@ import {
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
   enableTransitionTracing,
+  enableDebugTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   supportsPersistence,
@@ -492,10 +493,6 @@ export function createFiberFromTypeAndProps(
     getTag: switch (type) {
       case REACT_FRAGMENT_TYPE:
         return createFiberFromFragment(pendingProps.children, mode, lanes, key);
-      case REACT_DEBUG_TRACING_MODE_TYPE:
-        fiberTag = Mode;
-        mode |= DebugTracingMode;
-        break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
         mode |= StrictLegacyMode;
@@ -529,6 +526,13 @@ export function createFiberFromTypeAndProps(
           return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
         }
       // eslint-disable-next-line no-fallthrough
+      case REACT_DEBUG_TRACING_MODE_TYPE:
+        if (enableDebugTracing) {
+          fiberTag = Mode;
+          mode |= DebugTracingMode;
+          break;
+        }
+      // eslint-disable-next-line no-fallthrough
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index e590c3f493fb..8999226fc22e 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -26,6 +26,7 @@ import {
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
   enableTransitionTracing,
+  enableDebugTracing,
 } from 'shared/ReactFeatureFlags';
 import {
   supportsPersistence,
@@ -492,10 +493,6 @@ export function createFiberFromTypeAndProps(
     getTag: switch (type) {
       case REACT_FRAGMENT_TYPE:
         return createFiberFromFragment(pendingProps.children, mode, lanes, key);
-      case REACT_DEBUG_TRACING_MODE_TYPE:
-        fiberTag = Mode;
-        mode |= DebugTracingMode;
-        break;
       case REACT_STRICT_MODE_TYPE:
         fiberTag = Mode;
         mode |= StrictLegacyMode;
@@ -529,6 +526,13 @@ export function createFiberFromTypeAndProps(
           return createFiberFromTracingMarker(pendingProps, mode, lanes, key);
         }
       // eslint-disable-next-line no-fallthrough
+      case REACT_DEBUG_TRACING_MODE_TYPE:
+        if (enableDebugTracing) {
+          fiberTag = Mode;
+          mode |= DebugTracingMode;
+          break;
+        }
+      // eslint-disable-next-line no-fallthrough
       default: {
         if (typeof type === 'object' && type !== null) {
           switch (type.$$typeof) {
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index 8be5b0bb9720..f600ccb9c75e 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -45,7 +45,7 @@ describe('DebugTracing', () => {
     });
   });
 
-  // @gate experimental || www
+  // @gate enableDebugTracing
   it('should not log anything for sync render without suspends or state updates', () => {
     ReactTestRenderer.create(
       <React.unstable_DebugTracingMode>
@@ -56,8 +56,7 @@ describe('DebugTracing', () => {
     expect(logs).toEqual([]);
   });
 
-  // @gate build === 'development'
-  // @gate experimental || www
+  // @gate experimental && build === 'development' && enableDebugTracing
   it('should not log anything for concurrent render without suspends or state updates', () => {
     ReactTestRenderer.act(() =>
       ReactTestRenderer.create(
@@ -376,8 +375,7 @@ describe('DebugTracing', () => {
     ]);
   });
 
-  // @gate build === 'development'
-  // @gate experimental || www
+  // @gate experimental && build === 'development' && enableDebugTracing
   it('should not log anything outside of a unstable_DebugTracingMode subtree', () => {
     function ExampleThatCascades() {
       const [didMount, setDidMount] = React.useState(false);
diff --git a/packages/shared/getComponentNameFromType.js b/packages/shared/getComponentNameFromType.js
index 36432e56acad..7a732d915c21 100644
--- a/packages/shared/getComponentNameFromType.js
+++ b/packages/shared/getComponentNameFromType.js
@@ -26,6 +26,8 @@ import {
   REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
 
+import {enableTransitionTracing, enableCache} from './ReactFeatureFlags';
+
 // Keep in sync with react-reconciler/getComponentNameFromFiber
 function getWrappedName(
   outerType: mixed,
@@ -79,9 +81,14 @@ export default function getComponentNameFromType(type: mixed): string | null {
     case REACT_SUSPENSE_LIST_TYPE:
       return 'SuspenseList';
     case REACT_CACHE_TYPE:
-      return 'Cache';
+      if (enableCache) {
+        return 'Cache';
+      }
+    // eslint-disable-next-line no-fallthrough
     case REACT_TRACING_MARKER_TYPE:
-      return 'TracingMarker';
+      if (enableTransitionTracing) {
+        return 'TracingMarker';
+      }
   }
   if (typeof type === 'object') {
     switch (type.$$typeof) {
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 295a39bf4321..d3e4666e79de 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -29,6 +29,7 @@ import {
   enableScopeAPI,
   enableCache,
   enableTransitionTracing,
+  enableDebugTracing,
 } from './ReactFeatureFlags';
 
 const REACT_MODULE_REFERENCE: Symbol = Symbol.for('react.module.reference');
@@ -42,7 +43,7 @@ export default function isValidElementType(type: mixed) {
   if (
     type === REACT_FRAGMENT_TYPE ||
     type === REACT_PROFILER_TYPE ||
-    type === REACT_DEBUG_TRACING_MODE_TYPE ||
+    (enableDebugTracing && type === REACT_DEBUG_TRACING_MODE_TYPE) ||
     type === REACT_STRICT_MODE_TYPE ||
     type === REACT_SUSPENSE_TYPE ||
     type === REACT_SUSPENSE_LIST_TYPE ||

From 6edd55a3ffda9267cdbf3237ba0e44b5d62b6552 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 8 Mar 2022 01:33:52 -0500
Subject: [PATCH 1189/1603] Gate unstable_expectedLoadTime on enableCPUSuspense
 (#24038)

---
 .../react-reconciler/src/ReactFiberBeginWork.new.js    | 10 ++++++++--
 .../react-reconciler/src/ReactFiberBeginWork.old.js    | 10 ++++++++--
 .../src/__tests__/DebugTracing-test.internal.js        |  4 ++--
 .../src/__tests__/ReactCPUSuspense-test.js             |  4 ++++
 packages/shared/ReactFeatureFlags.js                   |  2 ++
 packages/shared/forks/ReactFeatureFlags.native-fb.js   |  1 +
 packages/shared/forks/ReactFeatureFlags.native-oss.js  |  1 +
 .../shared/forks/ReactFeatureFlags.test-renderer.js    |  1 +
 .../forks/ReactFeatureFlags.test-renderer.native.js    |  1 +
 .../forks/ReactFeatureFlags.test-renderer.www.js       |  1 +
 packages/shared/forks/ReactFeatureFlags.testing.js     |  1 +
 packages/shared/forks/ReactFeatureFlags.testing.www.js |  1 +
 packages/shared/forks/ReactFeatureFlags.www.js         |  1 +
 13 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 09a0e16a1e55..181d32febf91 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -29,7 +29,10 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseAvoidThisFallback,
+  enableCPUSuspense,
+} from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
 import {
@@ -2091,7 +2094,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackFragment;
-    } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+    } else if (
+      enableCPUSuspense &&
+      typeof nextProps.unstable_expectedLoadTime === 'number'
+    ) {
       // 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.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 2db03f39a2cb..57a8f9c48fb1 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -29,7 +29,10 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
+import {
+  enableSuspenseAvoidThisFallback,
+  enableCPUSuspense,
+} from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
 import {
@@ -2091,7 +2094,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackFragment;
-    } else if (typeof nextProps.unstable_expectedLoadTime === 'number') {
+    } else if (
+      enableCPUSuspense &&
+      typeof nextProps.unstable_expectedLoadTime === 'number'
+    ) {
       // 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.
diff --git a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
index f600ccb9c75e..eccdef295ad8 100644
--- a/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/DebugTracing-test.internal.js
@@ -98,7 +98,7 @@ describe('DebugTracing', () => {
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
-  // @gate experimental && build === 'development' && enableDebugTracing
+  // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
   it('should log sync render with CPU suspense', () => {
     function Example() {
       console.log('<Example/>');
@@ -178,7 +178,7 @@ describe('DebugTracing', () => {
     expect(logs).toEqual(['log: ⚛️ Example resolved']);
   });
 
-  // @gate experimental && build === 'development' && enableDebugTracing
+  // @gate experimental && build === 'development' && enableDebugTracing && enableCPUSuspense
   it('should log concurrent render with CPU suspense', () => {
     function Example() {
       console.log('<Example/>');
diff --git a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
index 85d3fbbab534..0130fa87d618 100644
--- a/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCPUSuspense-test.js
@@ -108,6 +108,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     }
   }
 
+  // @gate enableCPUSuspense
   it('skips CPU-bound trees on initial mount', async () => {
     function App() {
       return (
@@ -145,6 +146,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCPUSuspense
   it('does not skip CPU-bound trees during updates', async () => {
     let setCount;
 
@@ -193,6 +195,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCPUSuspense
   it('suspend inside CPU-bound tree', async () => {
     function App() {
       return (
@@ -242,6 +245,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
+  // @gate enableCPUSuspense
   it('nested CPU-bound trees', async () => {
     function App() {
       return (
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index d33d2a92d29c..e60f2db9f40b 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -106,6 +106,8 @@ export const enableSuspenseAvoidThisFallback = false;
 // Enables unstable_avoidThisFallback feature in Fizz
 export const enableSuspenseAvoidThisFallbackFizz = false;
 
+export const enableCPUSuspense = __EXPERIMENTAL__;
+
 // When a node is unmounted, recurse into the Fiber subtree and clean out
 // references. Each level cleans up more fiber fields than the previous level.
 // As far as we know, React itself doesn't leak, but because the Fiber contains
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 1eb2086c896b..01a036bb6036 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,6 +50,7 @@ export const disableModulePatternComponents = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index e9850c400a9a..aa44bfafbf79 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index cd488a2b7e5d..2a39b7d17e53 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 54828d7ebd6a..ceb8fb196e90 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,6 +51,7 @@ export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 6d1dcfa842cc..804242d8094d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = true;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index e6c46ee341f0..27a37f53e990 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = false;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 0ae82026016a..6a34c1aa3b3d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,6 +41,7 @@ export const disableModulePatternComponents = true;
 export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index cf61f17054d4..99b68fc7562c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -51,6 +51,7 @@ export const enableUpdaterTracking = __PROFILE__;
 export const enableSuspenseLayoutEffectSemantics = true;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
+export const enableCPUSuspense = true;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =

From d5f1b067c8bbb826b823d0354a28ba31078b70c0 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Tue, 8 Mar 2022 07:55:32 -0500
Subject: [PATCH 1190/1603] [ServerContext] Flight support for ServerContext
 (#23244)

* Flight side of server context

* 1 more test

* rm unused function

* flow+prettier

* flow again =)

* duplicate ReactServerContext across packages

* store default value when lazily initializing server context

* .

* better comment

* derp... missing import

* rm optional chaining

* missed feature flag

* React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ??

* add warning if non ServerContext passed into useServerContext

* pass context in as array of arrays

* make importServerContext nott pollute the global context state

* merge main

* remove useServerContext

* dont rely on object getters in ReactServerContext and disallow JSX

* add symbols to devtools + rename globalServerContextRegistry to just ContextRegistry

* gate test case as experimental

* feedback

* remove unions

* Lint

* fix oopsies (tests/lint/mismatching arguments/signatures

* lint again

* replace-fork

* remove extraneous change

* rebase

* 1 more test

* rm unused function

* flow+prettier

* flow again =)

* duplicate ReactServerContext across packages

* store default value when lazily initializing server context

* .

* better comment

* derp... missing import

* rm optional chaining

* missed feature flag

* React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ??

* add warning if non ServerContext passed into useServerContext

* pass context in as array of arrays

* make importServerContext nott pollute the global context state

* merge main

* remove useServerContext

* dont rely on object getters in ReactServerContext and disallow JSX

* add symbols to devtools + rename globalServerContextRegistry to just ContextRegistry

* gate test case as experimental

* feedback

* remove unions

* Lint

* fix oopsies (tests/lint/mismatching arguments/signatures

* lint again

* replace-fork

* remove extraneous change

* rebase

* reinline

* rebase

* add back changes lost due to rebase being hard

* emit chunk for provider

* remove case for React provider type

* update type for SomeChunk

* enable flag with experimental

* add missing types

* fix flow type

* missing type

* t: any

* revert extraneous type change

* better type

* better type

* feedback

* change import to type import

* test?

* test?

* remove react-dom

* remove react-native-renderer from react-server-native-relay/package.json

* gate change in FiberNewContext, getComponentNameFromType, use switch statement in FlightServer

* getComponentNameFromTpe: server context type gated and use displayName if available

* fallthrough

* lint....

* POP

* lint
---
 .../react-client/src/ReactFlightClient.js     |  18 +
 .../src/ReactFlightClientStream.js            |   5 +
 .../src/__tests__/ReactFlight-test.js         | 352 ++++++++++++++++++
 .../src/backend/ReactSymbols.js               |   5 +
 .../src/backend/renderer.js                   |   2 +
 .../src/__tests__/ReactDOMFizzServer-test.js  |  49 +++
 packages/react-is/src/ReactIs.js              |   2 +
 .../src/ReactNoopFlightServer.js              |   8 +-
 .../src/ReactFiberCacheComponent.new.js       |   2 +
 .../src/ReactFiberCacheComponent.old.js       |   2 +
 .../src/ReactFiberHooks.new.js                |   3 +-
 .../src/ReactFiberHooks.old.js                |   3 +-
 .../src/ReactFiberNewContext.new.js           |  20 +-
 .../src/ReactFiberNewContext.old.js           |  20 +-
 .../src/ReactInternalTypes.js                 |   2 +-
 .../src/ReactFlightDOMRelayProtocol.js        |   1 +
 .../ReactFlightDOMRelayServerHostConfig.js    |   8 +
 .../react-server-dom-webpack/package.json     |   1 -
 .../src/ReactFlightDOMServerBrowser.js        |   3 +
 .../src/ReactFlightDOMServerNode.js           |   3 +
 .../react-server-native-relay/package.json    |   3 +-
 .../src/ReactFlightNativeRelayProtocol.js     |   1 +
 .../ReactFlightNativeRelayServerHostConfig.js |   8 +
 .../react-server/src/ReactFizzNewContext.js   |  15 +-
 packages/react-server/src/ReactFlightHooks.js |  93 +++++
 .../react-server/src/ReactFlightNewContext.js | 269 +++++++++++++
 .../react-server/src/ReactFlightServer.js     | 202 ++++++----
 .../src/ReactFlightServerConfigStream.js      |   9 +
 packages/react/index.classic.fb.js            |   3 +-
 packages/react/index.experimental.js          |   3 +-
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   3 +-
 packages/react/index.stable.js                |   2 +-
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactContext.js            |   4 +
 packages/react/src/ReactServerContext.js      | 104 ++++++
 .../react/src/ReactServerContextRegistry.js   |   5 +
 packages/react/src/ReactSharedInternals.js    |   6 +
 .../src/forks/ReactSharedInternals.umd.js     |   6 +
 packages/shared/ReactFeatureFlags.js          |   1 +
 packages/shared/ReactServerContextRegistry.js |  24 ++
 packages/shared/ReactSymbols.js               |   4 +
 packages/shared/ReactTypes.js                 |  14 +
 .../forks/ReactFeatureFlags.native-fb.js      |   2 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   2 +-
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 packages/shared/getComponentNameFromType.js   |  13 +-
 scripts/error-codes/codes.json                |  18 +-
 53 files changed, 1242 insertions(+), 90 deletions(-)
 create mode 100644 packages/react-server/src/ReactFlightHooks.js
 create mode 100644 packages/react-server/src/ReactFlightNewContext.js
 create mode 100644 packages/react/src/ReactServerContext.js
 create mode 100644 packages/react/src/ReactServerContextRegistry.js
 create mode 100644 packages/shared/ReactServerContextRegistry.js

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 9d5ac3680a8a..dabb215c708f 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -26,6 +26,8 @@ import {
 
 import {REACT_LAZY_TYPE, REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
 
+import {getOrCreateServerContext} from 'shared/ReactServerContextRegistry';
+
 export type JSONValue =
   | number
   | null
@@ -327,6 +329,7 @@ export function parseModelTuple(
   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.
@@ -358,6 +361,21 @@ export function resolveModel(
   }
 }
 
+export function resolveProvider(
+  response: Response,
+  id: number,
+  contextName: string,
+): void {
+  const chunks = response._chunks;
+  chunks.set(
+    id,
+    createInitializedChunk(
+      response,
+      getOrCreateServerContext(contextName).Provider,
+    ),
+  );
+}
+
 export function resolveModule(
   response: Response,
   id: number,
diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js
index 9f07d8cc999a..8af1734de6b7 100644
--- a/packages/react-client/src/ReactFlightClientStream.js
+++ b/packages/react-client/src/ReactFlightClientStream.js
@@ -12,6 +12,7 @@ import type {Response} from './ReactFlightClientHostConfigStream';
 import {
   resolveModule,
   resolveModel,
+  resolveProvider,
   resolveSymbol,
   resolveError,
   createResponse as createResponseBase,
@@ -49,6 +50,10 @@ function processFullRow(response: Response, row: string): void {
       resolveModule(response, id, text);
       return;
     }
+    case 'P': {
+      resolveProvider(response, id, text);
+      return;
+    }
     case 'S': {
       resolveSymbol(response, id, JSON.parse(text));
       return;
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 8d0fbe1609d9..9197a4c3bfe5 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -17,6 +17,8 @@ let ReactNoopFlightServer;
 let ReactNoopFlightClient;
 let ErrorBoundary;
 let NoErrorExpected;
+let Scheduler;
+let ContextRegistry;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
@@ -27,6 +29,10 @@ describe('ReactFlight', () => {
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = require('jest-react').act;
+    Scheduler = require('scheduler');
+    const ReactSharedInternals =
+      React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    ContextRegistry = ReactSharedInternals.ContextRegistry;
 
     ErrorBoundary = class extends React.Component {
       state = {hasError: false, error: null};
@@ -302,4 +308,350 @@ describe('ReactFlight', () => {
       {withoutStack: true},
     );
   });
+
+  describe('ServerContext', () => {
+    // @gate enableServerContext
+    it('supports basic createServerContext usage', () => {
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'hello from server',
+      );
+      function Foo() {
+        const context = React.useContext(ServerContext);
+        return <div>{context}</div>;
+      }
+
+      const transport = ReactNoopFlightServer.render(<Foo />);
+      act(() => {
+        ServerContext._currentRenderer = null;
+        ServerContext._currentRenderer2 = null;
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(<div>hello from server</div>);
+    });
+
+    // @gate enableServerContext
+    it('propagates ServerContext providers in flight', () => {
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+
+      function Foo() {
+        return (
+          <div>
+            <ServerContext.Provider value="hi this is server">
+              <Bar />
+            </ServerContext.Provider>
+          </div>
+        );
+      }
+      function Bar() {
+        const context = React.useContext(ServerContext);
+        return context;
+      }
+
+      const transport = ReactNoopFlightServer.render(<Foo />);
+      act(() => {
+        ServerContext._currentRenderer = null;
+        ServerContext._currentRenderer2 = null;
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(<div>hi this is server</div>);
+    });
+
+    // @gate enableServerContext
+    it('errors if you try passing JSX through ServerContext value', () => {
+      const ServerContext = React.createServerContext('ServerContext', {
+        foo: {
+          bar: <span>hi this is default</span>,
+        },
+      });
+
+      function Foo() {
+        return (
+          <div>
+            <ServerContext.Provider
+              value={{
+                foo: {
+                  bar: <span>hi this is server</span>,
+                },
+              }}>
+              <Bar />
+            </ServerContext.Provider>
+          </div>
+        );
+      }
+      function Bar() {
+        const context = React.useContext(ServerContext);
+        return context.foo.bar;
+      }
+
+      expect(() => {
+        ReactNoopFlightServer.render(<Foo />);
+      }).toErrorDev('React elements are not allowed in ServerContext', {
+        withoutStack: true,
+      });
+    });
+
+    // @gate enableServerContext
+    it('propagates ServerContext and cleansup providers in flight', () => {
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+
+      function Foo() {
+        return (
+          <>
+            <ServerContext.Provider value="hi this is server outer">
+              <ServerContext.Provider value="hi this is server">
+                <Bar />
+              </ServerContext.Provider>
+              <ServerContext.Provider value="hi this is server2">
+                <Bar />
+              </ServerContext.Provider>
+              <Bar />
+            </ServerContext.Provider>
+            <ServerContext.Provider value="hi this is server outer2">
+              <Bar />
+            </ServerContext.Provider>
+            <Bar />
+          </>
+        );
+      }
+      function Bar() {
+        const context = React.useContext(ServerContext);
+        return <span>{context}</span>;
+      }
+
+      const transport = ReactNoopFlightServer.render(<Foo />);
+      act(() => {
+        ServerContext._currentRenderer = null;
+        ServerContext._currentRenderer2 = null;
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <span>hi this is server</span>
+          <span>hi this is server2</span>
+          <span>hi this is server outer</span>
+          <span>hi this is server outer2</span>
+          <span>default</span>
+        </>,
+      );
+    });
+
+    // @gate enableServerContext
+    it('propagates ServerContext providers in flight after suspending', async () => {
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+
+      function Foo() {
+        return (
+          <div>
+            <ServerContext.Provider value="hi this is server">
+              <React.Suspense fallback={'Loading'}>
+                <Bar />
+              </React.Suspense>
+            </ServerContext.Provider>
+          </div>
+        );
+      }
+
+      let resolve;
+      const promise = new Promise(res => {
+        resolve = () => {
+          promise.unsuspend = true;
+          res();
+        };
+      });
+
+      function Bar() {
+        if (!promise.unsuspend) {
+          Scheduler.unstable_yieldValue('suspended');
+          throw promise;
+        }
+        Scheduler.unstable_yieldValue('rendered');
+        const context = React.useContext(ServerContext);
+        return context;
+      }
+
+      const transport = ReactNoopFlightServer.render(<Foo />);
+
+      expect(Scheduler).toHaveYielded(['suspended']);
+
+      await act(async () => {
+        resolve();
+        await promise;
+        jest.runAllImmediates();
+      });
+
+      expect(Scheduler).toHaveYielded(['rendered']);
+
+      act(() => {
+        ServerContext._currentRenderer = null;
+        ServerContext._currentRenderer2 = null;
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(<div>hi this is server</div>);
+    });
+
+    // @gate enableServerContext
+    it('serializes ServerContext to client', async () => {
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+
+      function ClientBar() {
+        Scheduler.unstable_yieldValue('ClientBar');
+        const context = React.useContext(ServerContext);
+        return <span>{context}</span>;
+      }
+
+      const Bar = moduleReference(ClientBar);
+
+      function Foo() {
+        return (
+          <ServerContext.Provider value="hi this is server">
+            <Bar />
+          </ServerContext.Provider>
+        );
+      }
+
+      const model = {
+        foo: <Foo />,
+      };
+
+      const transport = ReactNoopFlightServer.render(model);
+
+      expect(Scheduler).toHaveYielded([]);
+
+      act(() => {
+        ServerContext._currentRenderer = null;
+        ServerContext._currentRenderer2 = null;
+        const flightModel = ReactNoopFlightClient.read(transport);
+        ReactNoop.render(flightModel.foo);
+      });
+
+      expect(Scheduler).toHaveYielded(['ClientBar']);
+      expect(ReactNoop).toMatchRenderedOutput(<span>hi this is server</span>);
+
+      expect(() => {
+        React.createServerContext('ServerContext', 'default');
+      }).toThrow('ServerContext: ServerContext already defined');
+    });
+
+    // @gate enableServerContext
+    it('takes ServerContext from client for refetching usecases', async () => {
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+      function Bar() {
+        return <span>{React.useContext(ServerContext)}</span>;
+      }
+      const transport = ReactNoopFlightServer.render(<Bar />, {}, [
+        ['ServerContext', 'Override'],
+      ]);
+
+      act(() => {
+        const flightModel = ReactNoopFlightClient.read(transport);
+        ReactNoop.render(flightModel);
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(<span>Override</span>);
+    });
+
+    // @gate enableServerContext
+    it('sets default initial value when defined lazily on server or client', async () => {
+      let ServerContext;
+      function inlineLazyServerContextInitialization() {
+        if (!ServerContext) {
+          ServerContext = React.createServerContext('ServerContext', 'default');
+        }
+        return ServerContext;
+      }
+
+      let ClientContext;
+      function inlineContextInitialization() {
+        if (!ClientContext) {
+          ClientContext = React.createServerContext('ServerContext', 'default');
+        }
+        return ClientContext;
+      }
+
+      function ClientBaz() {
+        const context = inlineContextInitialization();
+        const value = React.useContext(context);
+        return <div>{value}</div>;
+      }
+
+      const Baz = moduleReference(ClientBaz);
+
+      function Bar() {
+        return (
+          <article>
+            <div>
+              {React.useContext(inlineLazyServerContextInitialization())}
+            </div>
+            <Baz />
+          </article>
+        );
+      }
+
+      function ServerApp() {
+        const Context = inlineLazyServerContextInitialization();
+        return (
+          <>
+            <Context.Provider value="test">
+              <Bar />
+            </Context.Provider>
+            <Bar />
+          </>
+        );
+      }
+
+      function ClientApp({serverModel}) {
+        return (
+          <>
+            {serverModel}
+            <ClientBaz />
+          </>
+        );
+      }
+
+      const transport = ReactNoopFlightServer.render(<ServerApp />);
+
+      expect(ClientContext).toBe(undefined);
+      act(() => {
+        delete ContextRegistry.ServerContext;
+        ServerContext._currentRenderer = null;
+        ServerContext._currentRenderer2 = null;
+        const serverModel = ReactNoopFlightClient.read(transport);
+        ReactNoop.render(<ClientApp serverModel={serverModel} />);
+      });
+
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <article>
+            <div>test</div>
+            <div>test</div>
+          </article>
+          <article>
+            <div>default</div>
+            <div>default</div>
+          </article>
+          <div>default</div>
+        </>,
+      );
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/ReactSymbols.js b/packages/react-devtools-shared/src/backend/ReactSymbols.js
index ebc6920be8d2..775ad34e7720 100644
--- a/packages/react-devtools-shared/src/backend/ReactSymbols.js
+++ b/packages/react-devtools-shared/src/backend/ReactSymbols.js
@@ -19,6 +19,8 @@ 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_NUMBER = 0xeac7;
@@ -60,3 +62,6 @@ 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)';
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 88c1d5360837..665b85d183a3 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -85,6 +85,7 @@ import {
   FORWARD_REF_SYMBOL_STRING,
   MEMO_NUMBER,
   MEMO_SYMBOL_STRING,
+  SERVER_CONTEXT_SYMBOL_STRING,
 } from './ReactSymbols';
 import {format} from './utils';
 import {
@@ -511,6 +512,7 @@ export function getInternalReactConstants(
             return `${resolvedContext.displayName || 'Context'}.Provider`;
           case CONTEXT_NUMBER:
           case CONTEXT_SYMBOL_STRING:
+          case SERVER_CONTEXT_SYMBOL_STRING:
             // 16.3-16.5 read from "type" because the Consumer is the actual context object.
             // 16.6+ should read from "type._context" because Consumer can be different (in DEV).
             // NOTE Keep in sync with inspectElementRaw()
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 0aacf5a75524..06e83ba128be 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2455,4 +2455,53 @@ describe('ReactDOMFizzServer', () => {
         'Suspense boundary. Switched to client rendering.',
     ]);
   });
+
+  // @gate enableServerContext && experimental
+  it('supports ServerContext', async () => {
+    let ServerContext;
+    function inlineLazyServerContextInitialization() {
+      if (!ServerContext) {
+        ServerContext = React.createServerContext('ServerContext', 'default');
+      }
+      return ServerContext;
+    }
+
+    function Foo() {
+      inlineLazyServerContextInitialization();
+      return (
+        <>
+          <ServerContext.Provider value="hi this is server outer">
+            <ServerContext.Provider value="hi this is server">
+              <Bar />
+            </ServerContext.Provider>
+            <ServerContext.Provider value="hi this is server2">
+              <Bar />
+            </ServerContext.Provider>
+            <Bar />
+          </ServerContext.Provider>
+          <ServerContext.Provider value="hi this is server outer2">
+            <Bar />
+          </ServerContext.Provider>
+          <Bar />
+        </>
+      );
+    }
+    function Bar() {
+      const context = React.useContext(inlineLazyServerContextInitialization());
+      return <span>{context}</span>;
+    }
+
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<Foo />);
+      pipe(writable);
+    });
+
+    expect(getVisibleChildren(container)).toEqual([
+      <span>hi this is server</span>,
+      <span>hi this is server2</span>,
+      <span>hi this is server outer</span>,
+      <span>hi this is server outer2</span>,
+      <span>default</span>,
+    ]);
+  });
 });
diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js
index dd81ec036158..8c5d26a08c2a 100644
--- a/packages/react-is/src/ReactIs.js
+++ b/packages/react-is/src/ReactIs.js
@@ -11,6 +11,7 @@
 
 import {
   REACT_CONTEXT_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
   REACT_ELEMENT_TYPE,
   REACT_FORWARD_REF_TYPE,
   REACT_FRAGMENT_TYPE,
@@ -43,6 +44,7 @@ export function typeOf(object: any) {
             const $$typeofType = type && type.$$typeof;
 
             switch ($$typeofType) {
+              case REACT_SERVER_CONTEXT_TYPE:
               case REACT_CONTEXT_TYPE:
               case REACT_FORWARD_REF_TYPE:
               case REACT_LAZY_TYPE:
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index ca6fedf2ec63..1c607befe74b 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -15,6 +15,7 @@
  */
 
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {ServerContextJSONValue} from 'shared/ReactTypes';
 
 import {saveModule} from 'react-noop-renderer/flight-modules';
 
@@ -62,13 +63,18 @@ type Options = {
   onError?: (error: mixed) => void,
 };
 
-function render(model: ReactModel, options?: Options): Destination {
+function render(
+  model: ReactModel,
+  options?: Options,
+  context?: Array<[string, ServerContextJSONValue]>,
+): Destination {
   const destination: Destination = [];
   const bundlerConfig = undefined;
   const request = ReactNoopFlightServer.createRequest(
     model,
     bundlerConfig,
     options ? options.onError : undefined,
+    context,
   );
   ReactNoopFlightServer.startWork(request);
   ReactNoopFlightServer.startFlowing(request, destination);
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 14ec05bd5b46..67588c3219a9 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -48,6 +48,8 @@ export const CacheContext: ReactContext<Cache> = enableCache
       _currentValue: (null: any),
       _currentValue2: (null: any),
       _threadCount: 0,
+      _defaultValue: (null: any),
+      _globalName: (null: any),
     }
   : (null: any);
 
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index a34de4142e4c..e530619d4166 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -48,6 +48,8 @@ export const CacheContext: ReactContext<Cache> = enableCache
       _currentValue: (null: any),
       _currentValue2: (null: any),
       _threadCount: 0,
+      _defaultValue: (null: any),
+      _globalName: (null: any),
     }
   : (null: any);
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 011c64f59d2c..d1c50b42d8cb 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -2451,7 +2451,6 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
-
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -3264,7 +3263,7 @@ if (__DEV__) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
-      updateHookTypesDev();
+      mountHookTypesDev();
       return mountRefresh();
     };
   }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 48f8f14bf2e2..137ee33cba51 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -2451,7 +2451,6 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
-
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -3264,7 +3263,7 @@ if (__DEV__) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).getCacheForType = getCacheForType;
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useCacheRefresh = function useCacheRefresh() {
       currentHookNameInDev = 'useCacheRefresh';
-      updateHookTypesDev();
+      mountHookTypesDev();
       return mountRefresh();
     };
   }
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 8ff30c810f03..8f269a405021 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -44,7 +44,9 @@ import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
 import {
   enableSuspenseServerRenderer,
   enableLazyContextPropagation,
+  enableServerContext,
 } from 'shared/ReactFeatureFlags';
+import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols';
 
 const valueCursor: StackCursor<mixed> = createCursor(null);
 
@@ -132,9 +134,23 @@ export function popProvider(
   const currentValue = valueCursor.current;
   pop(valueCursor, providerFiber);
   if (isPrimaryRenderer) {
-    context._currentValue = currentValue;
+    if (
+      enableServerContext &&
+      currentValue === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    ) {
+      context._currentValue = context._defaultValue;
+    } else {
+      context._currentValue = currentValue;
+    }
   } else {
-    context._currentValue2 = currentValue;
+    if (
+      enableServerContext &&
+      currentValue === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    ) {
+      context._currentValue2 = context._defaultValue;
+    } else {
+      context._currentValue2 = currentValue;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index 93fe3bc8395c..a48c84204382 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -44,7 +44,9 @@ import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
 import {
   enableSuspenseServerRenderer,
   enableLazyContextPropagation,
+  enableServerContext,
 } from 'shared/ReactFeatureFlags';
+import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols';
 
 const valueCursor: StackCursor<mixed> = createCursor(null);
 
@@ -132,9 +134,23 @@ export function popProvider(
   const currentValue = valueCursor.current;
   pop(valueCursor, providerFiber);
   if (isPrimaryRenderer) {
-    context._currentValue = currentValue;
+    if (
+      enableServerContext &&
+      currentValue === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    ) {
+      context._currentValue = context._defaultValue;
+    } else {
+      context._currentValue = currentValue;
+    }
   } else {
-    context._currentValue2 = currentValue;
+    if (
+      enableServerContext &&
+      currentValue === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    ) {
+      context._currentValue2 = context._defaultValue;
+    } else {
+      context._currentValue2 = currentValue;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 162ba457d549..dd2e09c03b21 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -16,6 +16,7 @@ import type {
   MutableSourceVersion,
   MutableSource,
   StartTransitionOptions,
+  Wakeable,
 } from 'shared/ReactTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {WorkTag} from './ReactWorkTags';
@@ -24,7 +25,6 @@ import type {Flags} from './ReactFiberFlags';
 import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
-import type {Wakeable} from 'shared/ReactTypes';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {Transitions} from './ReactFiberTracingMarkerComponent.new';
 
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
index 94f73b0d7a4a..60d19ecef3f7 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
@@ -20,6 +20,7 @@ export type JSONValue =
 export type RowEncoding =
   | ['J', number, JSONValue]
   | ['M', number, ModuleMetaData]
+  | ['P', number, string]
   | ['S', number, string]
   | [
       'E',
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 971eca0908cb..a29a6449d8b4 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -125,6 +125,14 @@ export function processModuleChunk(
   return ['M', id, moduleMetaData];
 }
 
+export function processProviderChunk(
+  request: Request,
+  id: number,
+  contextName: string,
+): Chunk {
+  return ['P', id, contextName];
+}
+
 export function processSymbolChunk(
   request: Request,
   id: number,
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index ababa89250e3..0a8c3389de71 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -48,7 +48,6 @@
   },
   "peerDependencies": {
     "react": "^17.0.0",
-    "react-dom": "^17.0.0",
     "webpack": "^5.59.0"
   },
   "dependencies": {
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 35518c9d33bf..aeee2d24806d 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {ServerContextJSONValue} from 'shared/ReactTypes';
 import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
 
 import {
@@ -24,11 +25,13 @@ function renderToReadableStream(
   model: ReactModel,
   webpackMap: BundlerConfig,
   options?: Options,
+  context?: Array<[string, ServerContextJSONValue]>,
 ): ReadableStream {
   const request = createRequest(
     model,
     webpackMap,
     options ? options.onError : undefined,
+    context,
   );
   const stream = new ReadableStream({
     type: 'bytes',
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 5f992d4b03e9..c088725f2590 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -10,6 +10,7 @@
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
 import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
 import type {Writable} from 'stream';
+import type {ServerContextJSONValue} from 'shared/ReactTypes';
 
 import {
   createRequest,
@@ -33,11 +34,13 @@ function renderToPipeableStream(
   model: ReactModel,
   webpackMap: BundlerConfig,
   options?: Options,
+  context?: Array<[string, ServerContextJSONValue]>,
 ): Controls {
   const request = createRequest(
     model,
     webpackMap,
     options ? options.onError : undefined,
+    context,
   );
   let hasStartedFlowing = false;
   startWork(request);
diff --git a/packages/react-server-native-relay/package.json b/packages/react-server-native-relay/package.json
index 241913f91e6a..e97b2f9b2be7 100644
--- a/packages/react-server-native-relay/package.json
+++ b/packages/react-server-native-relay/package.json
@@ -11,7 +11,6 @@
     "scheduler": "^0.11.0"
   },
   "peerDependencies": {
-    "react": "^17.0.0",
-    "react-native-renderer": "^17.0.0"
+    "react": "^17.0.0"
   }
 }
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
index 75f6db8039ab..1c32ac0dd4d4 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
@@ -20,6 +20,7 @@ export type JSONValue =
 export type RowEncoding =
   | ['J', number, JSONValue]
   | ['M', number, ModuleMetaData]
+  | ['P', number, string]
   | ['S', number, string]
   | [
       'E',
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 0387d94ecad2..b07c084eaa69 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -122,6 +122,14 @@ export function processModuleChunk(
   return ['M', id, moduleMetaData];
 }
 
+export function processProviderChunk(
+  request: Request,
+  id: number,
+  contextName: string,
+): Chunk {
+  return ['P', id, contextName];
+}
+
 export function processSymbolChunk(
   request: Request,
   id: number,
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
index 0eaa07f839a1..b4386399c334 100644
--- a/packages/react-server/src/ReactFizzNewContext.js
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -9,6 +9,7 @@
 
 import type {ReactContext} from 'shared/ReactTypes';
 
+import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols';
 import {isPrimaryRenderer} from './ReactServerFormatConfig';
 
 let rendererSigil;
@@ -244,7 +245,12 @@ export function popProvider<T>(context: ReactContext<T>): ContextSnapshot {
     }
   }
   if (isPrimaryRenderer) {
-    prevSnapshot.context._currentValue = prevSnapshot.parentValue;
+    const value = prevSnapshot.parentValue;
+    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+      prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
+    } else {
+      prevSnapshot.context._currentValue = value;
+    }
     if (__DEV__) {
       if (
         context._currentRenderer !== undefined &&
@@ -259,7 +265,12 @@ export function popProvider<T>(context: ReactContext<T>): ContextSnapshot {
       context._currentRenderer = rendererSigil;
     }
   } else {
-    prevSnapshot.context._currentValue2 = prevSnapshot.parentValue;
+    const value = prevSnapshot.parentValue;
+    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+      prevSnapshot.context._currentValue2 = prevSnapshot.context._defaultValue;
+    } else {
+      prevSnapshot.context._currentValue2 = value;
+    }
     if (__DEV__) {
       if (
         context._currentRenderer2 !== undefined &&
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
new file mode 100644
index 000000000000..88a2eac86ca2
--- /dev/null
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
+import type {ReactServerContext} from 'shared/ReactTypes';
+import {REACT_SERVER_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import {readContext as readContextImpl} from './ReactFlightNewContext';
+
+function readContext<T>(context: ReactServerContext<T>): T {
+  if (__DEV__) {
+    if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
+      console.error('Only ServerContext is supported in Flight');
+    }
+    if (currentCache === null) {
+      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);
+}
+
+export const Dispatcher: DispatcherType = {
+  useMemo<T>(nextCreate: () => T): T {
+    return nextCreate();
+  },
+  useCallback<T>(callback: T): T {
+    return callback;
+  },
+  useDebugValue(): void {},
+  useDeferredValue: (unsupportedHook: any),
+  useTransition: (unsupportedHook: any),
+  getCacheForType<T>(resourceType: () => T): T {
+    if (!currentCache) {
+      throw new Error('Reading the cache is only supported while rendering.');
+    }
+
+    let entry: T | void = (currentCache.get(resourceType): any);
+    if (entry === undefined) {
+      entry = resourceType();
+      // TODO: Warn if undefined?
+      currentCache.set(resourceType, entry);
+    }
+    return entry;
+  },
+  readContext,
+  useContext: readContext,
+  useReducer: (unsupportedHook: any),
+  useRef: (unsupportedHook: any),
+  useState: (unsupportedHook: any),
+  useInsertionEffect: (unsupportedHook: any),
+  useLayoutEffect: (unsupportedHook: any),
+  useImperativeHandle: (unsupportedHook: any),
+  useEffect: (unsupportedHook: any),
+  useId: (unsupportedHook: any),
+  useMutableSource: (unsupportedHook: any),
+  useSyncExternalStore: (unsupportedHook: any),
+  useCacheRefresh(): <T>(?() => T, ?T) => void {
+    return unsupportedRefresh;
+  },
+};
+
+function unsupportedHook(): void {
+  throw new Error('This Hook is not supported in Server Components.');
+}
+
+function unsupportedRefresh(): void {
+  if (!currentCache) {
+    throw new Error(
+      'Refreshing the cache is not supported in Server Components.',
+    );
+  }
+}
+
+let currentCache: Map<Function, mixed> | null = null;
+
+export function setCurrentCache(cache: Map<Function, mixed> | null) {
+  currentCache = cache;
+  return currentCache;
+}
+
+export function getCurrentCache() {
+  return currentCache;
+}
diff --git a/packages/react-server/src/ReactFlightNewContext.js b/packages/react-server/src/ReactFlightNewContext.js
new file mode 100644
index 000000000000..3f5abaaf0793
--- /dev/null
+++ b/packages/react-server/src/ReactFlightNewContext.js
@@ -0,0 +1,269 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {
+  ReactServerContext,
+  ServerContextJSONValue,
+} from 'shared/ReactTypes';
+
+import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols';
+import {isPrimaryRenderer} from './ReactServerFormatConfig';
+
+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: ServerContextJSONValue> = {
+  parent: null | ContextNode<any>,
+  depth: number, // Short hand to compute the depth of the tree at this node.
+  context: ReactServerContext<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: 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: ServerContextJSONValue>(
+  context: ReactServerContext<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(): 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 (isPrimaryRenderer) {
+    const value = prevSnapshot.parentValue;
+    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+      prevSnapshot.context._currentValue = prevSnapshot.context._defaultValue;
+    } else {
+      prevSnapshot.context._currentValue = value;
+    }
+  } else {
+    const value = prevSnapshot.parentValue;
+    if (value === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+      prevSnapshot.context._currentValue2 = prevSnapshot.context._defaultValue;
+    } else {
+      prevSnapshot.context._currentValue2 = value;
+    }
+  }
+  return (currentActiveSnapshot = prevSnapshot.parent);
+}
+
+export function getActiveContext(): ContextSnapshot {
+  return currentActiveSnapshot;
+}
+
+export function readContext<T>(context: ReactServerContext<T>): T {
+  const value = isPrimaryRenderer
+    ? context._currentValue
+    : context._currentValue2;
+  return value;
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 2b0e7304af17..32a08b1eff81 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   Destination,
   Chunk,
@@ -16,6 +15,11 @@ import type {
   ModuleReference,
   ModuleKey,
 } from './ReactFlightServerConfig';
+import type {ContextSnapshot} from './ReactFlightNewContext';
+import type {
+  ReactProviderType,
+  ServerContextJSONValue,
+} from 'shared/ReactTypes';
 
 import {
   scheduleWork,
@@ -27,6 +31,7 @@ import {
   closeWithError,
   processModelChunk,
   processModuleChunk,
+  processProviderChunk,
   processSymbolChunk,
   processErrorChunk,
   resolveModuleMetaData,
@@ -34,14 +39,25 @@ import {
   isModuleReference,
 } from './ReactFlightServerConfig';
 
+import {Dispatcher, getCurrentCache, setCurrentCache} from './ReactFlightHooks';
+import {
+  pushProvider,
+  popProvider,
+  switchContext,
+  getActiveContext,
+  rootContextSnapshot,
+} from './ReactFlightNewContext';
+
 import {
   REACT_ELEMENT_TYPE,
   REACT_FORWARD_REF_TYPE,
   REACT_FRAGMENT_TYPE,
   REACT_LAZY_TYPE,
   REACT_MEMO_TYPE,
+  REACT_PROVIDER_TYPE,
 } from 'shared/ReactSymbols';
 
+import {getOrCreateServerContext} from 'shared/ReactServerContextRegistry';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import isArray from 'shared/isArray';
 
@@ -68,6 +84,7 @@ type Segment = {
   id: number,
   model: ReactModel,
   ping: () => void,
+  context: ContextSnapshot,
 };
 
 export type Request = {
@@ -84,10 +101,15 @@ export type Request = {
   completedErrorChunks: Array<Chunk>,
   writtenSymbols: Map<Symbol, number>,
   writtenModules: Map<ModuleKey, number>,
+  writtenProviders: Map<string, number>,
   onError: (error: mixed) => void,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
 
+export type Options = {
+  onError?: (error: mixed) => void,
+};
+
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error: mixed) {
@@ -103,6 +125,7 @@ export function createRequest(
   model: ReactModel,
   bundlerConfig: BundlerConfig,
   onError: void | ((error: mixed) => void),
+  context?: Array<[string, ServerContextJSONValue]>,
 ): Request {
   const pingedSegments = [];
   const request = {
@@ -119,17 +142,27 @@ export function createRequest(
     completedErrorChunks: [],
     writtenSymbols: new Map(),
     writtenModules: new Map(),
+    writtenProviders: new Map(),
     onError: onError === undefined ? defaultErrorHandler : onError,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
     },
   };
   request.pendingChunks++;
-  const rootSegment = createSegment(request, model);
+  const rootContext = createRootContext(context);
+  const rootSegment = createSegment(request, model, rootContext);
   pingedSegments.push(rootSegment);
   return request;
 }
 
+function createRootContext(
+  reqContext?: Array<[string, ServerContextJSONValue]>,
+) {
+  return importServerContexts(reqContext);
+}
+
+const POP = {};
+
 function attemptResolveElement(
   type: any,
   key: null | React$Key,
@@ -174,6 +207,30 @@ function attemptResolveElement(
       case REACT_MEMO_TYPE: {
         return attemptResolveElement(type.type, key, ref, props);
       }
+      case REACT_PROVIDER_TYPE: {
+        pushProvider(type._context, props.value);
+        if (__DEV__) {
+          const extraKeys = Object.keys(props).filter(value => {
+            if (value === 'children' || value === 'value') {
+              return false;
+            }
+            return true;
+          });
+          if (extraKeys.length !== 0) {
+            console.error(
+              'ServerContext can only have a value prop and children. Found: %s',
+              JSON.stringify(extraKeys),
+            );
+          }
+        }
+        return [
+          REACT_ELEMENT_TYPE,
+          type,
+          key,
+          // Rely on __popProvider being serialized last to pop the provider.
+          {value: props.value, children: props.children, __pop: POP},
+        ];
+      }
     }
   }
   throw new Error(
@@ -189,11 +246,16 @@ function pingSegment(request: Request, segment: Segment): void {
   }
 }
 
-function createSegment(request: Request, model: ReactModel): Segment {
+function createSegment(
+  request: Request,
+  model: ReactModel,
+  context: ContextSnapshot,
+): Segment {
   const id = request.nextChunkId++;
   const segment = {
     id,
     model,
+    context,
     ping: () => pingSegment(request, segment),
   };
   return segment;
@@ -221,7 +283,6 @@ function isObjectPrototype(object): boolean {
   if (!object) {
     return false;
   }
-  // $FlowFixMe
   const ObjectPrototype = Object.prototype;
   if (object === ObjectPrototype) {
     return true;
@@ -311,7 +372,6 @@ function describeObjectForErrorMessage(
 ): string {
   if (isArray(objectOrArray)) {
     let str = '[';
-    // $FlowFixMe: Should be refined by now.
     const array: $ReadOnlyArray<ReactModel> = objectOrArray;
     for (let i = 0; i < array.length; i++) {
       if (i > 0) {
@@ -336,7 +396,6 @@ function describeObjectForErrorMessage(
     return str;
   } else {
     let str = '{';
-    // $FlowFixMe: Should be refined by now.
     const object: {+[key: string | number]: ReactModel} = objectOrArray;
     const names = Object.keys(object);
     for (let i = 0; i < names.length; i++) {
@@ -365,6 +424,9 @@ function describeObjectForErrorMessage(
   }
 }
 
+let insideContextProps = null;
+let isInsideContextValue = false;
+
 export function resolveModelToJSON(
   request: Request,
   parent: {+[key: string | number]: ReactModel} | $ReadOnlyArray<ReactModel>,
@@ -396,12 +458,32 @@ export function resolveModelToJSON(
       );
   }
 
+  if (__DEV__) {
+    if (
+      parent[0] === REACT_ELEMENT_TYPE &&
+      parent[1] &&
+      parent[1].$$typeof === REACT_PROVIDER_TYPE &&
+      key === '3'
+    ) {
+      insideContextProps = value;
+    } else if (insideContextProps === parent && key === 'value') {
+      isInsideContextValue = true;
+    } else if (insideContextProps === parent && key === 'children') {
+      isInsideContextValue = false;
+    }
+  }
+
   // Resolve server components.
   while (
     typeof value === 'object' &&
     value !== null &&
-    value.$$typeof === REACT_ELEMENT_TYPE
+    (value: any).$$typeof === REACT_ELEMENT_TYPE
   ) {
+    if (__DEV__) {
+      if (isInsideContextValue) {
+        console.error('React elements are not allowed in ServerContext');
+      }
+    }
     // TODO: Concatenate keys of parents onto children.
     const element: React$Element<any> = (value: any);
     try {
@@ -416,7 +498,7 @@ export function resolveModelToJSON(
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.
         request.pendingChunks++;
-        const newSegment = createSegment(request, value);
+        const newSegment = createSegment(request, value, getActiveContext());
         const ping = newSegment.ping;
         x.then(ping, ping);
         return serializeByRefID(newSegment.id);
@@ -478,6 +560,25 @@ export function resolveModelToJSON(
         emitErrorChunk(request, errorId, x);
         return serializeByValueID(errorId);
       }
+    } else if ((value: any).$$typeof === REACT_PROVIDER_TYPE) {
+      const providerKey = ((value: any): ReactProviderType<any>)._context
+        ._globalName;
+      const writtenProviders = request.writtenProviders;
+      let providerId = writtenProviders.get(key);
+      if (providerId === undefined) {
+        request.pendingChunks++;
+        providerId = request.nextChunkId++;
+        writtenProviders.set(providerKey, providerId);
+        emitProviderChunk(request, providerId, providerKey);
+      }
+      return serializeByValueID(providerId);
+    } else if (value === POP) {
+      popProvider();
+      if (__DEV__) {
+        insideContextProps = null;
+        isInsideContextValue = false;
+      }
+      return (undefined: any);
     }
 
     if (__DEV__) {
@@ -515,6 +616,7 @@ export function resolveModelToJSON(
         }
       }
     }
+
     return value;
   }
 
@@ -657,13 +759,23 @@ function emitSymbolChunk(request: Request, id: number, name: string): void {
   request.completedModuleChunks.push(processedChunk);
 }
 
+function emitProviderChunk(
+  request: Request,
+  id: number,
+  contextName: string,
+): void {
+  const processedChunk = processProviderChunk(request, id, contextName);
+  request.completedJSONChunks.push(processedChunk);
+}
+
 function retrySegment(request: Request, segment: Segment): void {
+  switchContext(segment.context);
   try {
     let value = segment.model;
     while (
       typeof value === 'object' &&
       value !== null &&
-      value.$$typeof === REACT_ELEMENT_TYPE
+      (value: any).$$typeof === REACT_ELEMENT_TYPE
     ) {
       // TODO: Concatenate keys of parents onto children.
       const element: React$Element<any> = (value: any);
@@ -696,9 +808,9 @@ function retrySegment(request: Request, segment: Segment): void {
 
 function performWork(request: Request): void {
   const prevDispatcher = ReactCurrentDispatcher.current;
-  const prevCache = currentCache;
+  const prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = Dispatcher;
-  currentCache = request.cache;
+  setCurrentCache(request.cache);
 
   try {
     const pingedSegments = request.pingedSegments;
@@ -715,7 +827,7 @@ function performWork(request: Request): void {
     fatalError(request, error);
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
-    currentCache = prevCache;
+    setCurrentCache(prevCache);
   }
 }
 
@@ -806,56 +918,20 @@ export function startFlowing(request: Request, destination: Destination): void {
   }
 }
 
-function unsupportedHook(): void {
-  throw new Error('This Hook is not supported in Server Components.');
-}
-
-function unsupportedRefresh(): void {
-  if (!currentCache) {
-    throw new Error(
-      'Refreshing the cache is not supported in Server Components.',
-    );
+function importServerContexts(
+  contexts?: Array<[string, ServerContextJSONValue]>,
+) {
+  if (contexts) {
+    const prevContext = getActiveContext();
+    switchContext(rootContextSnapshot);
+    for (let i = 0; i < contexts.length; i++) {
+      const [name, value] = contexts[i];
+      const context = getOrCreateServerContext(name);
+      pushProvider(context, value);
+    }
+    const importedContext = getActiveContext();
+    switchContext(prevContext);
+    return importedContext;
   }
+  return rootContextSnapshot;
 }
-
-let currentCache: Map<Function, mixed> | null = null;
-
-const Dispatcher: DispatcherType = {
-  useMemo<T>(nextCreate: () => T): T {
-    return nextCreate();
-  },
-  useCallback<T>(callback: T): T {
-    return callback;
-  },
-  useDebugValue(): void {},
-  useDeferredValue: (unsupportedHook: any),
-  useTransition: (unsupportedHook: any),
-  getCacheForType<T>(resourceType: () => T): T {
-    if (!currentCache) {
-      throw new Error('Reading the cache is only supported while rendering.');
-    }
-
-    let entry: T | void = (currentCache.get(resourceType): any);
-    if (entry === undefined) {
-      entry = resourceType();
-      // TODO: Warn if undefined?
-      currentCache.set(resourceType, entry);
-    }
-    return entry;
-  },
-  readContext: (unsupportedHook: any),
-  useContext: (unsupportedHook: any),
-  useReducer: (unsupportedHook: any),
-  useRef: (unsupportedHook: any),
-  useState: (unsupportedHook: any),
-  useInsertionEffect: (unsupportedHook: any),
-  useLayoutEffect: (unsupportedHook: any),
-  useImperativeHandle: (unsupportedHook: any),
-  useEffect: (unsupportedHook: any),
-  useId: (unsupportedHook: any),
-  useMutableSource: (unsupportedHook: any),
-  useSyncExternalStore: (unsupportedHook: any),
-  useCacheRefresh(): <T>(?() => T, ?T) => void {
-    return unsupportedRefresh;
-  },
-};
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index 74a90f7a02a7..08e9cbff2f50 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -109,6 +109,15 @@ export function processModuleChunk(
   return stringToChunk(row);
 }
 
+export function processProviderChunk(
+  request: Request,
+  id: number,
+  contextName: string,
+): Chunk {
+  const row = serializeRowHeader('P', id) + contextName + '\n';
+  return stringToChunk(row);
+}
+
 export function processSymbolChunk(
   request: Request,
   id: number,
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 33c770f00fed..76326a0fe59d 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -26,6 +26,7 @@ export {
   createMutableSource,
   createMutableSource as unstable_createMutableSource,
   createRef,
+  createServerContext,
   forwardRef,
   isValidElement,
   lazy,
@@ -53,10 +54,10 @@ export {
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
-  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
+  useSyncExternalStore,
   useTransition,
   useTransition as unstable_useTransition, // TODO: Remove once call sights updated to useTransition
   version,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index d4dc33a4db01..19af075993d5 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -24,6 +24,7 @@ export {
   createFactory,
   createMutableSource as unstable_createMutableSource,
   createRef,
+  createServerContext,
   forwardRef,
   isValidElement,
   lazy,
@@ -46,10 +47,10 @@ export {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
+  useSyncExternalStore,
   useTransition,
   version,
 } from './src/React';
diff --git a/packages/react/index.js b/packages/react/index.js
index e4946bf095b6..084aabb53c6b 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -48,6 +48,7 @@ export {
   createFactory,
   createMutableSource,
   createRef,
+  createServerContext,
   forwardRef,
   isValidElement,
   lazy,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 5b0d75e21460..e9f80ade0610 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -25,6 +25,7 @@ export {
   createMutableSource,
   createMutableSource as unstable_createMutableSource,
   createRef,
+  createServerContext,
   forwardRef,
   isValidElement,
   lazy,
@@ -52,10 +53,10 @@ export {
   useMemo,
   useMutableSource,
   useMutableSource as unstable_useMutableSource,
-  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
+  useSyncExternalStore,
   useTransition,
   useTransition as unstable_useTransition, // TODO: Remove once call sights updated to useTransition
   version,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 53497831e004..3ed868197b6f 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -37,10 +37,10 @@ export {
   useInsertionEffect,
   useLayoutEffect,
   useMemo,
-  useSyncExternalStore,
   useReducer,
   useRef,
   useState,
+  useSyncExternalStore,
   useTransition,
   version,
 } from './src/React';
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index b899f51c80b6..264c1e1dc56d 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -61,6 +61,7 @@ import {
   createFactoryWithValidation,
   cloneElementWithValidation,
 } from './ReactElementValidator';
+import {createServerContext} from './ReactServerContext';
 import {createMutableSource} from './ReactMutableSource';
 import ReactSharedInternals from './ReactSharedInternals';
 import {startTransition} from './ReactStartTransition';
@@ -86,6 +87,7 @@ export {
   Component,
   PureComponent,
   createContext,
+  createServerContext,
   forwardRef,
   lazy,
   memo,
diff --git a/packages/react/src/ReactContext.js b/packages/react/src/ReactContext.js
index 41065c13ef06..e547a411009f 100644
--- a/packages/react/src/ReactContext.js
+++ b/packages/react/src/ReactContext.js
@@ -30,6 +30,10 @@ export function createContext<T>(defaultValue: T): ReactContext<T> {
     // These are circular
     Provider: (null: any),
     Consumer: (null: any),
+
+    // Add these to use same hidden class in VM as ServerContext
+    _defaultValue: (null: any),
+    _globalName: (null: any),
   };
 
   context.Provider = {
diff --git a/packages/react/src/ReactServerContext.js b/packages/react/src/ReactServerContext.js
new file mode 100644
index 000000000000..a561fbb92e79
--- /dev/null
+++ b/packages/react/src/ReactServerContext.js
@@ -0,0 +1,104 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {
+  REACT_PROVIDER_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
+  REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+} from 'shared/ReactSymbols';
+
+import type {
+  ReactServerContext,
+  ServerContextJSONValue,
+} from 'shared/ReactTypes';
+
+import {enableServerContext} from 'shared/ReactFeatureFlags';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+
+const ContextRegistry = ReactSharedInternals.ContextRegistry;
+
+export function createServerContext<T: ServerContextJSONValue>(
+  globalName: string,
+  defaultValue: T,
+): ReactServerContext<T> {
+  if (!enableServerContext) {
+    throw new Error('Not implemented.');
+  }
+  let wasDefined = true;
+  if (!ContextRegistry[globalName]) {
+    wasDefined = false;
+    const context: ReactServerContext<T> = {
+      $$typeof: REACT_SERVER_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,
+
+      _defaultValue: 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),
+      _globalName: globalName,
+    };
+
+    context.Provider = {
+      $$typeof: REACT_PROVIDER_TYPE,
+      _context: context,
+    };
+
+    if (__DEV__) {
+      let hasWarnedAboutUsingConsumer;
+      context._currentRenderer = null;
+      context._currentRenderer2 = null;
+      Object.defineProperties(
+        context,
+        ({
+          Consumer: {
+            get() {
+              if (!hasWarnedAboutUsingConsumer) {
+                console.error(
+                  'Consumer pattern is not supported by ReactServerContext',
+                );
+                hasWarnedAboutUsingConsumer = true;
+              }
+              return null;
+            },
+          },
+        }: any),
+      );
+    }
+    ContextRegistry[globalName] = context;
+  }
+
+  const context = ContextRegistry[globalName];
+  if (context._defaultValue === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED) {
+    context._defaultValue = defaultValue;
+    if (
+      context._currentValue === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    ) {
+      context._currentValue = defaultValue;
+    }
+    if (
+      context._currentValue2 === REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED
+    ) {
+      context._currentValue2 = defaultValue;
+    }
+  } else if (wasDefined) {
+    throw new Error(`ServerContext: ${globalName} already defined`);
+  }
+  return context;
+}
diff --git a/packages/react/src/ReactServerContextRegistry.js b/packages/react/src/ReactServerContextRegistry.js
new file mode 100644
index 000000000000..dda738ac7439
--- /dev/null
+++ b/packages/react/src/ReactServerContextRegistry.js
@@ -0,0 +1,5 @@
+import type {ReactServerContext} from 'shared/ReactTypes';
+
+export const ContextRegistry: {
+  [globalName: string]: ReactServerContext<any>,
+} = {};
diff --git a/packages/react/src/ReactSharedInternals.js b/packages/react/src/ReactSharedInternals.js
index 2874b03985b9..6f160b96ec8b 100644
--- a/packages/react/src/ReactSharedInternals.js
+++ b/packages/react/src/ReactSharedInternals.js
@@ -10,6 +10,8 @@ import ReactCurrentBatchConfig from './ReactCurrentBatchConfig';
 import ReactCurrentActQueue from './ReactCurrentActQueue';
 import ReactCurrentOwner from './ReactCurrentOwner';
 import ReactDebugCurrentFrame from './ReactDebugCurrentFrame';
+import {enableServerContext} from 'shared/ReactFeatureFlags';
+import {ContextRegistry} from './ReactServerContextRegistry';
 
 const ReactSharedInternals = {
   ReactCurrentDispatcher,
@@ -22,4 +24,8 @@ if (__DEV__) {
   ReactSharedInternals.ReactCurrentActQueue = ReactCurrentActQueue;
 }
 
+if (enableServerContext) {
+  ReactSharedInternals.ContextRegistry = ContextRegistry;
+}
+
 export default ReactSharedInternals;
diff --git a/packages/react/src/forks/ReactSharedInternals.umd.js b/packages/react/src/forks/ReactSharedInternals.umd.js
index 04e8cb577f7a..57e96e665477 100644
--- a/packages/react/src/forks/ReactSharedInternals.umd.js
+++ b/packages/react/src/forks/ReactSharedInternals.umd.js
@@ -11,6 +11,8 @@ import ReactCurrentActQueue from '../ReactCurrentActQueue';
 import ReactCurrentOwner from '../ReactCurrentOwner';
 import ReactDebugCurrentFrame from '../ReactDebugCurrentFrame';
 import ReactCurrentBatchConfig from '../ReactCurrentBatchConfig';
+import {enableServerContext} from 'shared/ReactFeatureFlags';
+import {ContextRegistry} from '../ReactServerContextRegistry';
 
 const ReactSharedInternals = {
   ReactCurrentDispatcher,
@@ -30,4 +32,8 @@ if (__DEV__) {
   ReactSharedInternals.ReactDebugCurrentFrame = ReactDebugCurrentFrame;
 }
 
+if (enableServerContext) {
+  ReactSharedInternals.ContextRegistry = ContextRegistry;
+}
+
 export default ReactSharedInternals;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index e60f2db9f40b..7cd1325c5789 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -249,6 +249,7 @@ export const enableUpdaterTracking = __PROFILE__;
 
 // Only enabled in RN, related to enableComponentStackLocations
 export const disableNativeComponentFrames = false;
+export const enableServerContext = __EXPERIMENTAL__;
 
 // Internal only.
 export const enableGetInspectorDataForInstanceInProduction = false;
diff --git a/packages/shared/ReactServerContextRegistry.js b/packages/shared/ReactServerContextRegistry.js
new file mode 100644
index 000000000000..ab8421b3c329
--- /dev/null
+++ b/packages/shared/ReactServerContextRegistry.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols';
+import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {createServerContext} from 'react';
+
+const ContextRegistry = ReactSharedInternals.ContextRegistry;
+
+export function getOrCreateServerContext(globalName: string) {
+  if (!ContextRegistry[globalName]) {
+    ContextRegistry[globalName] = createServerContext(
+      globalName,
+      REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
+    );
+  }
+  return ContextRegistry[globalName];
+}
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 299869d12e8a..6ff9305fa7b0 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -19,6 +19,7 @@ export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
 export const REACT_PROFILER_TYPE = Symbol.for('react.profiler');
 export const REACT_PROVIDER_TYPE = Symbol.for('react.provider');
 export const REACT_CONTEXT_TYPE = Symbol.for('react.context');
+export const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
 export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
 export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
 export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
@@ -32,6 +33,9 @@ export const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
 export const REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
 export const REACT_CACHE_TYPE = Symbol.for('react.cache');
 export const REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker');
+export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+  'react.default_value',
+);
 
 const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 066d20552d6f..17aa509e89eb 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -67,9 +67,23 @@ export type ReactContext<T> = {
   // This value may be added by application code
   // to improve DEV tooling display names
   displayName?: string,
+
+  // only used by ServerContext
+  _defaultValue: T,
+  _globalName: string,
   ...
 };
 
+export type ServerContextJSONValue =
+  | string
+  | boolean
+  | number
+  | null
+  | $ReadOnlyArray<ServerContextJSONValue>
+  | {+[key: string]: ServerContextJSONValue};
+
+export type ReactServerContext<T: any> = ReactContext<T>;
+
 export type ReactPortal = {
   $$typeof: Symbol | number,
   key: null | string,
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 01a036bb6036..8decbc01d680 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -75,6 +75,8 @@ export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableServerContext = false;
+
 export const enableUseMutableSource = true;
 
 export const enableTransitionTracing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index aa44bfafbf79..3ca6029d6785 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -67,6 +67,7 @@ export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 2a39b7d17e53..ca9f71857c02 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -67,6 +67,7 @@ export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index ceb8fb196e90..b2afb7982547 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -65,6 +65,7 @@ export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 804242d8094d..7f776d1d40f1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -67,6 +67,7 @@ export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableServerContext = false;
 
 // Some www surfaces are still using this. Remove once they have been migrated.
 export const enableUseMutableSource = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 27a37f53e990..30346c8c62ce 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -67,6 +67,7 @@ export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
+export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 6a34c1aa3b3d..e75cbaeb5a4a 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -67,7 +67,7 @@ export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
-
+export const enableServerContext = false;
 // Some www surfaces are still using this. Remove once they have been migrated.
 export const enableUseMutableSource = true;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 99b68fc7562c..91a906d90bda 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -102,6 +102,7 @@ export const deletedTreeCleanUpLevel = 3;
 export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
+export const enableServerContext = true;
 
 // Some www surfaces are still using this. Remove once they have been migrated.
 export const enableUseMutableSource = true;
diff --git a/packages/shared/getComponentNameFromType.js b/packages/shared/getComponentNameFromType.js
index 7a732d915c21..91430e225718 100644
--- a/packages/shared/getComponentNameFromType.js
+++ b/packages/shared/getComponentNameFromType.js
@@ -24,9 +24,14 @@ import {
   REACT_LAZY_TYPE,
   REACT_CACHE_TYPE,
   REACT_TRACING_MARKER_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
 } from 'shared/ReactSymbols';
 
-import {enableTransitionTracing, enableCache} from './ReactFeatureFlags';
+import {
+  enableServerContext,
+  enableTransitionTracing,
+  enableCache,
+} from './ReactFeatureFlags';
 
 // Keep in sync with react-reconciler/getComponentNameFromFiber
 function getWrappedName(
@@ -116,6 +121,12 @@ export default function getComponentNameFromType(type: mixed): string | null {
           return null;
         }
       }
+      case REACT_SERVER_CONTEXT_TYPE:
+        if (enableServerContext) {
+          const context2 = ((type: any): ReactContext<any>);
+          return (context2.displayName || context2._globalName) + '.Provider';
+        }
+      // eslint-disable-next-line no-fallthrough
     }
   }
   return null;
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 367b736931cf..92d3bfd128c8 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -405,10 +405,16 @@
   "417": "React currently only supports piping to one writable stream.",
   "418": "Hydration failed because the initial UI does not match what was rendered on the server.",
   "419": "The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.",
-  "420": "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.",
-  "421": "There was an error while hydrating this Suspense boundary. Switched to client rendering.",
-  "422": "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.",
-  "423": "This root received an early update, before anything was able hydrate. Switched the entire root to client rendering.",
-  "424": "Text content does not match server-rendered HTML.",
-  "425": "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."
+  "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 this Suspense boundary. Switched to client rendering.",
+  "423": "There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.",
+  "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"
 }

From a59f53a603306777fc6f949d84ce85f09bba4e4c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 8 Mar 2022 15:13:47 +0100
Subject: [PATCH 1191/1603] Fizz: Prevent UnhandledPromiseRejection if shell
 errors (#24043)

---
 packages/react-dom/src/server/ReactDOMFizzServerBrowser.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 219c4a1bf7b1..1ae511ede561 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -67,6 +67,10 @@ function renderToReadableStream(
       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 = createRequest(

From 9fa654eccd74035de0c2c873e61ecfe3fae1bf09 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 8 Mar 2022 14:36:24 -0500
Subject: [PATCH 1192/1603] Bump versions to rc.2


From 11c5bb6e168297f01f7a5954961706237937c105 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 8 Mar 2022 14:36:24 -0500
Subject: [PATCH 1193/1603] Bump versions to rc.2

---
 ReactVersions.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index f699ccb24ac2..16fcb45623e6 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,7 +18,7 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.0.0-rc.1';
+const ReactVersion = '18.0.0-rc.2';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
@@ -26,18 +26,18 @@ const nextChannelLabel = 'next';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
-  'eslint-plugin-react-hooks': '4.2.1-rc.1',
-  'jest-react': '0.12.1-rc.1',
+  'eslint-plugin-react-hooks': '4.2.1-rc.2',
+  'jest-react': '0.12.1-rc.2',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.27.0-rc.1',
-  'react-refresh': '0.11.0-rc.1',
+  'react-reconciler': '0.27.0-rc.2',
+  'react-refresh': '0.11.0-rc.2',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.6.0-rc.1',
-  'use-sync-external-store': '1.0.0-rc.1',
-  scheduler: '0.21.0-rc.1',
+  'use-subscription': '1.6.0-rc.2',
+  'use-sync-external-store': '1.0.0-rc.2',
+  scheduler: '0.21.0-rc.2',
 };
 
 // These packages do not exist in the @next or @latest channel, only

From c91892ec3c180a8f85a030aea931b58e326a55a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 8 Mar 2022 23:12:50 -0500
Subject: [PATCH 1194/1603] [Fizz] Don't flush empty segments (#24054)

Before this change, we would sometimes write segments without any content
in them. For example for a Suspense boundary that immediately suspends
we might emit something like:

<div hidden id="123">
  <template id="456"></template>
</div>

Where the outer div is just a temporary wrapper and the inner one is a
placeholder for something to be added later.

This serves no purpose.

We should ideally have a heuristic that holds back segments based on byte
size and time. However, this is a straight forward clear win for now.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  4 +++
 packages/react-server/src/ReactFizzServer.js  | 29 +++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 06e83ba128be..3ced96af2956 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -495,6 +495,10 @@ describe('ReactDOMFizzServer', () => {
       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(container.firstChild.nextSibling).toBe(null);
     await act(async () => {
       resolveElement({default: <Text text="Hello" />});
     });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 7a238391493a..c09d21cb55cf 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -488,7 +488,7 @@ function renderSuspenseBoundary(
     // We use the safe form because we don't handle suspending here. Only error handling.
     renderNode(request, task, content);
     contentRootSegment.status = COMPLETED;
-    newBoundary.completedSegments.push(contentRootSegment);
+    queueCompletedSegment(newBoundary, contentRootSegment);
     if (newBoundary.pendingTasks === 0) {
       // 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
@@ -1430,6 +1430,29 @@ function abortTask(task: Task): void {
   }
 }
 
+function queueCompletedSegment(
+  boundary: SuspenseBoundary,
+  segment: Segment,
+): void {
+  if (
+    segment.chunks.length === 0 &&
+    segment.children.length === 1 &&
+    segment.children[0].boundary === null
+  ) {
+    // 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) {
+      queueCompletedSegment(boundary, childSegment);
+    }
+  } else {
+    const completedSegments = boundary.completedSegments;
+    completedSegments.push(segment);
+  }
+}
+
 function finishedTask(
   request: Request,
   boundary: Root | SuspenseBoundary,
@@ -1463,7 +1486,7 @@ function finishedTask(
         // 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) {
-          boundary.completedSegments.push(segment);
+          queueCompletedSegment(boundary, segment);
         }
       }
       if (boundary.parentFlushed) {
@@ -1482,8 +1505,8 @@ function finishedTask(
         // 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) {
+          queueCompletedSegment(boundary, segment);
           const completedSegments = boundary.completedSegments;
-          completedSegments.push(segment);
           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

From b9de50d2f9ad6ff8caae0729976c3cc9a69c176e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 8 Mar 2022 23:13:32 -0500
Subject: [PATCH 1195/1603] Update test to reset modules instead of using
 private state (#24055)

---
 .../src/__tests__/ReactFlight-test.js         | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 9197a4c3bfe5..ef93c2a02587 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -18,7 +18,6 @@ let ReactNoopFlightClient;
 let ErrorBoundary;
 let NoErrorExpected;
 let Scheduler;
-let ContextRegistry;
 
 describe('ReactFlight', () => {
   beforeEach(() => {
@@ -30,9 +29,6 @@ describe('ReactFlight', () => {
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
     act = require('jest-react').act;
     Scheduler = require('scheduler');
-    const ReactSharedInternals =
-      React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    ContextRegistry = ReactSharedInternals.ContextRegistry;
 
     ErrorBoundary = class extends React.Component {
       state = {hasError: false, error: null};
@@ -429,8 +425,6 @@ describe('ReactFlight', () => {
 
       const transport = ReactNoopFlightServer.render(<Foo />);
       act(() => {
-        ServerContext._currentRenderer = null;
-        ServerContext._currentRenderer2 = null;
         ReactNoop.render(ReactNoopFlightClient.read(transport));
       });
 
@@ -631,14 +625,26 @@ describe('ReactFlight', () => {
       const transport = ReactNoopFlightServer.render(<ServerApp />);
 
       expect(ClientContext).toBe(undefined);
+
+      // Reset all modules, except flight-modules which keeps the registry of client components
+      const flightModules = require('react-noop-renderer/flight-modules');
+      jest.resetModules();
+      jest.mock('react-noop-renderer/flight-modules', () => flightModules);
+
+      React = require('react');
+      ReactNoop = require('react-noop-renderer');
+      ReactNoopFlightServer = require('react-noop-renderer/flight-server');
+      ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+      act = require('jest-react').act;
+      Scheduler = require('scheduler');
+
       act(() => {
-        delete ContextRegistry.ServerContext;
-        ServerContext._currentRenderer = null;
-        ServerContext._currentRenderer2 = null;
         const serverModel = ReactNoopFlightClient.read(transport);
         ReactNoop.render(<ClientApp serverModel={serverModel} />);
       });
 
+      expect(ClientContext).not.toBe(ServerContext);
+
       expect(ReactNoop).toMatchRenderedOutput(
         <>
           <article>

From 72a933d2892dac9e5327678b6bd37af8d589bb22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 9 Mar 2022 11:48:03 -0500
Subject: [PATCH 1196/1603] Gate legacy hidden (#24047)

* Gate legacy hidden

* Gate tests

* Remove export from experimental
---
 ...DOMServerPartialHydration-test.internal.js |   4 +-
 .../src/__tests__/ReactUpdates-test.js        |   2 +-
 .../react-reconciler/src/ReactFiber.new.js    |   6 +-
 .../react-reconciler/src/ReactFiber.old.js    |   6 +-
 .../src/ReactFiberBeginWork.new.js            |  14 +-
 .../src/ReactFiberBeginWork.old.js            |  14 +-
 .../src/ReactFiberCompleteWork.new.js         |  10 +-
 .../src/ReactFiberCompleteWork.old.js         |  10 +-
 .../__tests__/ReactContextPropagation-test.js |   6 +-
 .../src/__tests__/ReactIncremental-test.js    |   6 +-
 ...tIncrementalErrorHandling-test.internal.js |   2 +-
 .../ReactIncrementalSideEffects-test.js       |  10 +-
 .../src/__tests__/ReactNewContext-test.js     |   2 +-
 .../src/__tests__/ReactOffscreen-test.js      |   8 +-
 .../ReactSchedulerIntegration-test.js         |   2 +-
 .../ReactSuspenseWithNoopRenderer-test.js     |   4 +-
 .../src/getComponentNameFromFiber.js          |   8 +-
 .../src/__tests__/ReactFresh-test.js          | 181 +++++++++---------
 packages/react/index.experimental.js          |   1 -
 packages/shared/ReactFeatureFlags.js          |   3 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   2 +
 packages/shared/isValidElementType.js         |   3 +-
 29 files changed, 175 insertions(+), 136 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 7e25788c9232..6d02211edffd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3197,7 +3197,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.innerHTML).toBe('Hidden child');
   });
 
-  // @gate experimental || www
+  // @gate www
   it('renders a hidden LegacyHidden component inside a Suspense boundary', async () => {
     const ref = React.createRef();
 
@@ -3225,7 +3225,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(span.innerHTML).toBe('Hidden child');
   });
 
-  // @gate experimental || www
+  // @gate www
   it('renders a visible LegacyHidden component', async () => {
     const ref = React.createRef();
 
diff --git a/packages/react-dom/src/__tests__/ReactUpdates-test.js b/packages/react-dom/src/__tests__/ReactUpdates-test.js
index 9e81a3b20ff1..4fe596b9b7fb 100644
--- a/packages/react-dom/src/__tests__/ReactUpdates-test.js
+++ b/packages/react-dom/src/__tests__/ReactUpdates-test.js
@@ -1302,7 +1302,7 @@ describe('ReactUpdates', () => {
     expect(ops).toEqual(['Foo', 'Bar', 'Baz']);
   });
 
-  // @gate experimental || www
+  // @gate www
   it('delays sync updates inside hidden subtrees in Concurrent Mode', () => {
     const container = document.createElement('div');
 
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 977a3f67e03d..1509d2201117 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -23,6 +23,7 @@ import {
   enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
+  enableLegacyHidden,
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
   enableTransitionTracing,
@@ -510,7 +511,10 @@ export function createFiberFromTypeAndProps(
       case REACT_OFFSCREEN_TYPE:
         return createFiberFromOffscreen(pendingProps, mode, lanes, key);
       case REACT_LEGACY_HIDDEN_TYPE:
-        return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+        if (enableLegacyHidden) {
+          return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+        }
+      // eslint-disable-next-line no-fallthrough
       case REACT_SCOPE_TYPE:
         if (enableScopeAPI) {
           return createFiberFromScope(type, pendingProps, mode, lanes, key);
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 8999226fc22e..ba9f5132b45c 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -23,6 +23,7 @@ import {
   enableStrictEffects,
   enableProfilerTimer,
   enableScopeAPI,
+  enableLegacyHidden,
   enableSyncDefaultUpdates,
   allowConcurrentByDefault,
   enableTransitionTracing,
@@ -510,7 +511,10 @@ export function createFiberFromTypeAndProps(
       case REACT_OFFSCREEN_TYPE:
         return createFiberFromOffscreen(pendingProps, mode, lanes, key);
       case REACT_LEGACY_HIDDEN_TYPE:
-        return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+        if (enableLegacyHidden) {
+          return createFiberFromLegacyHidden(pendingProps, mode, lanes, key);
+        }
+      // eslint-disable-next-line no-fallthrough
       case REACT_SCOPE_TYPE:
         if (enableScopeAPI) {
           return createFiberFromScope(type, pendingProps, mode, lanes, key);
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 181d32febf91..4bae5d0b7b98 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -98,6 +98,7 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
   enableTransitionTracing,
+  enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -640,7 +641,7 @@ function updateOffscreenComponent(
 
   if (
     nextProps.mode === 'hidden' ||
-    nextProps.mode === 'unstable-defer-without-hiding'
+    (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')
   ) {
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
@@ -774,7 +775,7 @@ function updateOffscreenComponent(
     // or some other infra that expects a HostComponent.
     const isHidden =
       nextProps.mode === 'hidden' &&
-      workInProgress.tag !== LegacyHiddenComponent;
+      (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent);
     const offscreenContainer = reconcileOffscreenHostContainer(
       current,
       workInProgress,
@@ -3948,7 +3949,14 @@ function beginWork(
       return updateOffscreenComponent(current, workInProgress, renderLanes);
     }
     case LegacyHiddenComponent: {
-      return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
+      if (enableLegacyHidden) {
+        return updateLegacyHiddenComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      break;
     }
     case CacheComponent: {
       if (enableCache) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 57a8f9c48fb1..583539dd08b5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -98,6 +98,7 @@ import {
   enableSchedulingProfiler,
   enablePersistentOffscreenHostContainer,
   enableTransitionTracing,
+  enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 import isArray from 'shared/isArray';
 import shallowEqual from 'shared/shallowEqual';
@@ -640,7 +641,7 @@ function updateOffscreenComponent(
 
   if (
     nextProps.mode === 'hidden' ||
-    nextProps.mode === 'unstable-defer-without-hiding'
+    (enableLegacyHidden && nextProps.mode === 'unstable-defer-without-hiding')
   ) {
     // Rendering a hidden tree.
     if ((workInProgress.mode & ConcurrentMode) === NoMode) {
@@ -774,7 +775,7 @@ function updateOffscreenComponent(
     // or some other infra that expects a HostComponent.
     const isHidden =
       nextProps.mode === 'hidden' &&
-      workInProgress.tag !== LegacyHiddenComponent;
+      (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent);
     const offscreenContainer = reconcileOffscreenHostContainer(
       current,
       workInProgress,
@@ -3948,7 +3949,14 @@ function beginWork(
       return updateOffscreenComponent(current, workInProgress, renderLanes);
     }
     case LegacyHiddenComponent: {
-      return updateLegacyHiddenComponent(current, workInProgress, renderLanes);
+      if (enableLegacyHidden) {
+        return updateLegacyHiddenComponent(
+          current,
+          workInProgress,
+          renderLanes,
+        );
+      }
+      break;
     }
     case CacheComponent: {
       if (enableCache) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 3ca22e58263e..2a44cf94a14a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -32,6 +32,7 @@ import type {Cache} from './ReactFiberCacheComponent.new';
 import {
   enableClientRenderFallbackOnHydrationMismatch,
   enableSuspenseAvoidThisFallback,
+  enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
@@ -1499,9 +1500,8 @@ function completeWork(
         const prevIsHidden = prevState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
-          newProps.mode !== 'unstable-defer-without-hiding' &&
           // LegacyHidden doesn't do any hiding — it only pre-renders.
-          workInProgress.tag !== LegacyHiddenComponent
+          (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent)
         ) {
           workInProgress.flags |= Visibility;
         }
@@ -1519,9 +1519,9 @@ function completeWork(
             // If so, we need to hide those nodes in the commit phase, so
             // schedule a visibility effect.
             if (
-              workInProgress.tag !== LegacyHiddenComponent &&
-              workInProgress.subtreeFlags & (Placement | Update) &&
-              newProps.mode !== 'unstable-defer-without-hiding'
+              (!enableLegacyHidden ||
+                workInProgress.tag !== LegacyHiddenComponent) &&
+              workInProgress.subtreeFlags & (Placement | Update)
             ) {
               workInProgress.flags |= Visibility;
             }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index bea755f7b4b6..f02a20222d0f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -32,6 +32,7 @@ import type {Cache} from './ReactFiberCacheComponent.old';
 import {
   enableClientRenderFallbackOnHydrationMismatch,
   enableSuspenseAvoidThisFallback,
+  enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
@@ -1499,9 +1500,8 @@ function completeWork(
         const prevIsHidden = prevState !== null;
         if (
           prevIsHidden !== nextIsHidden &&
-          newProps.mode !== 'unstable-defer-without-hiding' &&
           // LegacyHidden doesn't do any hiding — it only pre-renders.
-          workInProgress.tag !== LegacyHiddenComponent
+          (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent)
         ) {
           workInProgress.flags |= Visibility;
         }
@@ -1519,9 +1519,9 @@ function completeWork(
             // If so, we need to hide those nodes in the commit phase, so
             // schedule a visibility effect.
             if (
-              workInProgress.tag !== LegacyHiddenComponent &&
-              workInProgress.subtreeFlags & (Placement | Update) &&
-              newProps.mode !== 'unstable-defer-without-hiding'
+              (!enableLegacyHidden ||
+                workInProgress.tag !== LegacyHiddenComponent) &&
+              workInProgress.subtreeFlags & (Placement | Update)
             ) {
               workInProgress.flags |= Visibility;
             }
diff --git a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
index 24e57002ef30..9b87ab65686e 100644
--- a/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactContextPropagation-test.js
@@ -546,7 +546,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BB');
   });
 
-  // @gate experimental || www
+  // @gate www
   test('context is propagated through offscreen trees', async () => {
     const LegacyHidden = React.unstable_LegacyHidden;
 
@@ -592,7 +592,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BB');
   });
 
-  // @gate experimental || www
+  // @gate www
   test('multiple contexts are propagated across through offscreen trees', async () => {
     // Same as previous test, but with multiple context providers
     const LegacyHidden = React.unstable_LegacyHidden;
@@ -818,7 +818,7 @@ describe('ReactLazyContextPropagation', () => {
     expect(root).toMatchRenderedOutput('BB');
   });
 
-  // @gate experimental || www
+  // @gate www
   test('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.
diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
index 20496019984f..8998ce6162ea 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.js
@@ -270,7 +270,7 @@ describe('ReactIncremental', () => {
     expect(inst.state).toEqual({text: 'bar', text2: 'baz'});
   });
 
-  // @gate experimental || www
+  // @gate www
   it('can deprioritize unfinished work and resume it later', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -316,7 +316,7 @@ describe('ReactIncremental', () => {
     expect(Scheduler).toFlushAndYield(['Middle', 'Middle']);
   });
 
-  // @gate experimental || www
+  // @gate www
   it('can deprioritize a tree from without dropping work', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -1999,7 +1999,7 @@ describe('ReactIncremental', () => {
     });
   }
 
-  // @gate experimental || www
+  // @gate www
   it('provides context when reusing work', () => {
     class Intl extends React.Component {
       static childContextTypes = {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index 55ce08b45450..aafc918469c4 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -310,7 +310,7 @@ describe('ReactIncrementalErrorHandling', () => {
     expect(ReactNoop.getChildren()).toEqual([span('Everything is fine.')]);
   });
 
-  // @gate experimental || www
+  // @gate www
   it('does not include offscreen work when retrying after an error', () => {
     function App(props) {
       if (props.isBroken) {
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
index f0c6bad86319..e09c866d6d67 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalSideEffects-test.js
@@ -424,7 +424,7 @@ describe('ReactIncrementalSideEffects', () => {
     ]);
   });
 
-  // @gate experimental || www
+  // @gate www
   it('preserves a previously rendered node when deprioritized', () => {
     function Middle(props) {
       Scheduler.unstable_yieldValue('Middle');
@@ -475,7 +475,7 @@ describe('ReactIncrementalSideEffects', () => {
     );
   });
 
-  // @gate experimental || www
+  // @gate www
   it('can reuse side-effects after being preempted', () => {
     function Bar(props) {
       Scheduler.unstable_yieldValue('Bar');
@@ -555,7 +555,7 @@ describe('ReactIncrementalSideEffects', () => {
     );
   });
 
-  // @gate experimental || www
+  // @gate www
   it('can reuse side-effects after being preempted, if shouldComponentUpdate is false', () => {
     class Bar extends React.Component {
       shouldComponentUpdate(nextProps) {
@@ -690,7 +690,7 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ReactNoop.getChildrenAsJSX()).toEqual(<span prop={3} />);
   });
 
-  // @gate experimental || www
+  // @gate www
   it('updates a child even though the old props is empty', () => {
     function Foo(props) {
       return (
@@ -930,7 +930,7 @@ describe('ReactIncrementalSideEffects', () => {
     expect(ops).toEqual(['Bar', 'Baz', 'Bar', 'Bar']);
   });
 
-  // @gate experimental || www
+  // @gate www
   it('deprioritizes setStates that happens within a deprioritized tree', () => {
     const barInstances = [];
 
diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
index eb90d61dad6a..3c3fddf204d5 100644
--- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js
@@ -667,7 +667,7 @@ describe('ReactNewContext', () => {
         expect(ReactNoop.getChildren()).toEqual([span(2), span(2)]);
       });
 
-      // @gate experimental || www
+      // @gate www
       it("context consumer doesn't bail out inside hidden subtree", () => {
         const Context = React.createContext('dark');
         const Consumer = getConsumer(Context);
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 4dfd6459a33a..3125fcc29e5f 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -26,7 +26,7 @@ describe('ReactOffscreen', () => {
     return <span prop={props.text} />;
   }
 
-  // @gate experimental || www
+  // @gate www
   it('unstable-defer-without-hiding should never toggle the visibility of its children', async () => {
     function App({mode}) {
       return (
@@ -85,7 +85,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // @gate experimental || www
+  // @gate www
   it('does not defer in legacy mode', async () => {
     let setState;
     function Foo() {
@@ -130,7 +130,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // @gate experimental || www
+  // @gate www
   it('does defer in concurrent mode', async () => {
     let setState;
     function Foo() {
@@ -310,7 +310,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
   });
 
-  // @gate experimental || www
+  // @gate www
   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.
diff --git a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
index fc315ae0da87..5a135d2f06ab 100644
--- a/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSchedulerIntegration-test.js
@@ -122,7 +122,7 @@ describe('ReactSchedulerIntegration', () => {
     expect(Scheduler).toHaveYielded(['A', 'B', 'C']);
   });
 
-  // @gate experimental || www
+  // @gate www
   it('idle updates are not blocked by offscreen work', async () => {
     function Text({text}) {
       Scheduler.unstable_yieldValue(text);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index dc2d57d225a4..3f2f4cc38aa0 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -3073,7 +3073,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     expect(root).toMatchRenderedOutput(<span prop="Foo" />);
   });
 
-  // @gate enableCache
+  // @gate enableCache && enableLegacyHidden
   it('should not render hidden content while suspended on higher pri', async () => {
     function Offscreen() {
       Scheduler.unstable_yieldValue('Offscreen');
@@ -3123,7 +3123,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
     );
   });
 
-  // @gate enableCache
+  // @gate enableCache && enableLegacyHidden
   it('should be able to unblock higher pri content before suspended hidden', async () => {
     function Offscreen() {
       Scheduler.unstable_yieldValue('Offscreen');
diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js
index 5cb87189c975..979914b7c4ba 100644
--- a/packages/react-reconciler/src/getComponentNameFromFiber.js
+++ b/packages/react-reconciler/src/getComponentNameFromFiber.js
@@ -9,6 +9,8 @@
 
 import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
 
+import {enableLegacyHidden} from 'shared/ReactFeatureFlags';
+
 import {
   FunctionComponent,
   ClassComponent,
@@ -86,8 +88,6 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
     case LazyComponent:
       // Name comes from the type in this case; we don't have a tag.
       return getComponentNameFromType(type);
-    case LegacyHiddenComponent:
-      return 'LegacyHidden';
     case Mode:
       if (type === REACT_STRICT_MODE_TYPE) {
         // Don't be less specific than shared/getComponentNameFromType
@@ -120,6 +120,10 @@ export default function getComponentNameFromFiber(fiber: Fiber): string | null {
         return type;
       }
       break;
+    case LegacyHiddenComponent:
+      if (enableLegacyHidden) {
+        return 'LegacyHidden';
+      }
   }
 
   return null;
diff --git a/packages/react-refresh/src/__tests__/ReactFresh-test.js b/packages/react-refresh/src/__tests__/ReactFresh-test.js
index 378f44d4ffcc..935114027783 100644
--- a/packages/react-refresh/src/__tests__/ReactFresh-test.js
+++ b/packages/react-refresh/src/__tests__/ReactFresh-test.js
@@ -2411,107 +2411,106 @@ describe('ReactFresh', () => {
     }
   });
 
+  // @gate www && __DEV__
   it('can hot reload offscreen components', async () => {
-    if (__DEV__ && __EXPERIMENTAL__) {
-      const AppV1 = prepare(() => {
-        function Hello() {
-          React.useLayoutEffect(() => {
-            Scheduler.unstable_yieldValue('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.unstable_yieldValue('App#layout');
-          });
-          return (
-            <LegacyHiddenDiv mode={offscreen ? 'hidden' : 'visible'}>
-              <Hello />
-            </LegacyHiddenDiv>
-          );
-        };
-      });
+    const AppV1 = prepare(() => {
+      function Hello() {
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('Hello#layout');
+        });
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'blue'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      $RefreshReg$(Hello, 'Hello');
 
-      const root = ReactDOMClient.createRoot(container);
-      root.render(<AppV1 offscreen={true} />);
-      expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
-      const el = container.firstChild;
-      expect(el.hidden).toBe(true);
-      expect(el.firstChild).toBe(null); // Offscreen content not flushed yet.
+      return function App({offscreen}) {
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('App#layout');
+        });
+        return (
+          <LegacyHiddenDiv mode={offscreen ? 'hidden' : 'visible'}>
+            <Hello />
+          </LegacyHiddenDiv>
+        );
+      };
+    });
 
-      // Perform a hot update.
-      patch(() => {
-        function Hello() {
-          React.useLayoutEffect(() => {
-            Scheduler.unstable_yieldValue('Hello#layout');
-          });
-          const [val, setVal] = React.useState(0);
-          return (
-            <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
-              {val}
-            </p>
-          );
-        }
-        $RefreshReg$(Hello, 'Hello');
-      });
+    const root = ReactDOMClient.createRoot(container);
+    root.render(<AppV1 offscreen={true} />);
+    expect(Scheduler).toFlushAndYieldThrough(['App#layout']);
+    const el = container.firstChild;
+    expect(el.hidden).toBe(true);
+    expect(el.firstChild).toBe(null); // Offscreen content not flushed yet.
 
-      // 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);
+    // Perform a hot update.
+    patch(() => {
+      function Hello() {
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('Hello#layout');
+        });
+        const [val, setVal] = React.useState(0);
+        return (
+          <p style={{color: 'red'}} onClick={() => setVal(val + 1)}>
+            {val}
+          </p>
+        );
+      }
+      $RefreshReg$(Hello, 'Hello');
+    });
 
-      // Process the offscreen updates.
-      expect(Scheduler).toFlushAndYieldThrough(['Hello#layout']);
-      expect(container.firstChild).toBe(el);
-      expect(el.firstChild.textContent).toBe('0');
-      expect(el.firstChild.style.color).toBe('red');
+    // 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);
 
-      await act(async () => {
-        el.firstChild.dispatchEvent(
-          new MouseEvent('click', {
-            bubbles: true,
-          }),
-        );
-      });
+    // Process the offscreen updates.
+    expect(Scheduler).toFlushAndYieldThrough(['Hello#layout']);
+    expect(container.firstChild).toBe(el);
+    expect(el.firstChild.textContent).toBe('0');
+    expect(el.firstChild.style.color).toBe('red');
+
+    await act(async () => {
+      el.firstChild.dispatchEvent(
+        new MouseEvent('click', {
+          bubbles: true,
+        }),
+      );
+    });
 
-      expect(Scheduler).toHaveYielded(['Hello#layout']);
-      expect(el.firstChild.textContent).toBe('1');
-      expect(el.firstChild.style.color).toBe('red');
+    expect(Scheduler).toHaveYielded(['Hello#layout']);
+    expect(el.firstChild.textContent).toBe('1');
+    expect(el.firstChild.style.color).toBe('red');
 
-      // Hot reload while we're offscreen.
-      patch(() => {
-        function Hello() {
-          React.useLayoutEffect(() => {
-            Scheduler.unstable_yieldValue('Hello#layout');
-          });
-          const [val, setVal] = React.useState(0);
-          return (
-            <p style={{color: 'orange'}} onClick={() => setVal(val + 1)}>
-              {val}
-            </p>
-          );
-        }
-        $RefreshReg$(Hello, 'Hello');
-      });
+    // Hot reload while we're offscreen.
+    patch(() => {
+      function Hello() {
+        React.useLayoutEffect(() => {
+          Scheduler.unstable_yieldValue('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');
+    // 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.
-      expect(Scheduler).toFlushAndYieldThrough(['Hello#layout']);
-      expect(container.firstChild).toBe(el);
-      expect(el.firstChild.textContent).toBe('1');
-      expect(el.firstChild.style.color).toBe('orange');
-    }
+    // Process the offscreen updates.
+    expect(Scheduler).toFlushAndYieldThrough(['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)', () => {
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 19af075993d5..b54fe6fdcd0b 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -32,7 +32,6 @@ export {
   startTransition,
   unstable_Cache,
   unstable_DebugTracingMode,
-  unstable_LegacyHidden,
   unstable_Offscreen,
   unstable_getCacheSignal,
   unstable_getCacheForType,
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 7cd1325c5789..8020d13b3515 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -101,6 +101,9 @@ export const enableTransitionTracing = false;
 // No known bugs, but needs performance testing
 export const enableLazyContextPropagation = false;
 
+// FB-only usage. The new API has different semantics.
+export const enableLegacyHidden = false;
+
 // Enables unstable_avoidThisFallback feature in Fiber
 export const enableSuspenseAvoidThisFallback = false;
 // Enables unstable_avoidThisFallback feature in Fizz
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 8decbc01d680..74e27292d12f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -70,6 +70,7 @@ export const enableUseRefAccessWarning = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableLegacyHidden = true;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 3ca6029d6785..99c98f1f6560 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -61,6 +61,7 @@ export const enableUseRefAccessWarning = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index ca9f71857c02..a1fe05abc227 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -61,6 +61,7 @@ export const enableUseRefAccessWarning = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index b2afb7982547..0ee47c87fc48 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -60,6 +60,7 @@ export const enableUseRefAccessWarning = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7f776d1d40f1..b86fb3dc0a7a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -61,6 +61,7 @@ export const enableUseRefAccessWarning = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 30346c8c62ce..ec488337b064 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -61,6 +61,7 @@ export const enableUseRefAccessWarning = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
 export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e75cbaeb5a4a..27881e5c71a2 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -61,6 +61,7 @@ export const enableUseRefAccessWarning = false;
 
 export const disableSchedulerTimeoutInWorkLoop = false;
 export const enableLazyContextPropagation = false;
+export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
 export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 91a906d90bda..251b0dbe5b7f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -86,6 +86,8 @@ export const enableScopeAPI = true;
 
 export const enableSuspenseCallback = true;
 
+export const enableLegacyHidden = true;
+
 export const enableComponentStackLocations = true;
 
 export const disableTextareaChildren = __EXPERIMENTAL__;
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index d3e4666e79de..12d00f3e06f9 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -30,6 +30,7 @@ import {
   enableCache,
   enableTransitionTracing,
   enableDebugTracing,
+  enableLegacyHidden,
 } from './ReactFeatureFlags';
 
 const REACT_MODULE_REFERENCE: Symbol = Symbol.for('react.module.reference');
@@ -47,7 +48,7 @@ export default function isValidElementType(type: mixed) {
     type === REACT_STRICT_MODE_TYPE ||
     type === REACT_SUSPENSE_TYPE ||
     type === REACT_SUSPENSE_LIST_TYPE ||
-    type === REACT_LEGACY_HIDDEN_TYPE ||
+    (enableLegacyHidden && type === REACT_LEGACY_HIDDEN_TYPE) ||
     type === REACT_OFFSCREEN_TYPE ||
     (enableScopeAPI && type === REACT_SCOPE_TYPE) ||
     (enableCache && type === REACT_CACHE_TYPE) ||

From 48a8574a68066be0385bd90c4a24e3e620eafb92 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 10 Mar 2022 10:35:52 -0800
Subject: [PATCH 1197/1603] Fixed edge case bug in Profiler (#24031)

---
 .../__snapshots__/profilingCache-test.js.snap | 197 ++++++++++++++++++
 .../src/__tests__/profilingCache-test.js      |   5 +-
 .../src/backend/renderer.js                   |  47 ++---
 3 files changed, 220 insertions(+), 29 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 258560929435..3611f67652aa 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -2960,6 +2960,94 @@ Object {
 }
 `;
 
+exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
+Object {
+  "commitData": Array [
+    Object {
+      "changeDescriptions": Map {},
+      "duration": 0,
+      "effectDuration": 0,
+      "fiberActualDurations": Map {},
+      "fiberSelfDurations": Map {},
+      "passiveEffectDuration": 0,
+      "priorityLevel": "Immediate",
+      "timestamp": 34,
+      "updaters": Array [
+        Object {
+          "displayName": "render()",
+          "hocDisplayNames": null,
+          "id": 7,
+          "key": null,
+          "type": 11,
+        },
+      ],
+    },
+  ],
+  "displayName": "Parent",
+  "initialTreeBaseDurations": Map {
+    7 => 11,
+    8 => 11,
+    10 => 0,
+    11 => 1,
+  },
+  "operations": Array [
+    Array [
+      1,
+      7,
+      0,
+      2,
+      4,
+      11,
+      10,
+      8,
+      7,
+    ],
+  ],
+  "rootID": 7,
+  "snapshots": Map {
+    7 => Object {
+      "children": Array [
+        8,
+      ],
+      "displayName": null,
+      "hocDisplayNames": null,
+      "id": 7,
+      "key": null,
+      "type": 11,
+    },
+    8 => Object {
+      "children": Array [
+        10,
+        11,
+      ],
+      "displayName": "Parent",
+      "hocDisplayNames": null,
+      "id": 8,
+      "key": null,
+      "type": 5,
+    },
+    10 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "hocDisplayNames": null,
+      "id": 10,
+      "key": "0",
+      "type": 5,
+    },
+    11 => Object {
+      "children": Array [],
+      "displayName": "Child",
+      "hocDisplayNames": Array [
+        "Memo",
+      ],
+      "id": 11,
+      "key": null,
+      "type": 8,
+    },
+  },
+}
+`;
+
 exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
 Object {
   "dataForRoots": Array [
@@ -3504,6 +3592,115 @@ Object {
       "rootID": 13,
       "snapshots": Array [],
     },
+    Object {
+      "commitData": Array [
+        Object {
+          "changeDescriptions": Array [],
+          "duration": 0,
+          "effectDuration": 0,
+          "fiberActualDurations": Array [],
+          "fiberSelfDurations": Array [],
+          "passiveEffectDuration": 0,
+          "priorityLevel": "Immediate",
+          "timestamp": 34,
+          "updaters": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 7,
+              "key": null,
+              "type": 11,
+            },
+          ],
+        },
+      ],
+      "displayName": "Parent",
+      "initialTreeBaseDurations": Array [
+        Array [
+          7,
+          11,
+        ],
+        Array [
+          8,
+          11,
+        ],
+        Array [
+          10,
+          0,
+        ],
+        Array [
+          11,
+          1,
+        ],
+      ],
+      "operations": Array [
+        Array [
+          1,
+          7,
+          0,
+          2,
+          4,
+          11,
+          10,
+          8,
+          7,
+        ],
+      ],
+      "rootID": 7,
+      "snapshots": Array [
+        Array [
+          7,
+          Object {
+            "children": Array [
+              8,
+            ],
+            "displayName": null,
+            "hocDisplayNames": null,
+            "id": 7,
+            "key": null,
+            "type": 11,
+          },
+        ],
+        Array [
+          8,
+          Object {
+            "children": Array [
+              10,
+              11,
+            ],
+            "displayName": "Parent",
+            "hocDisplayNames": null,
+            "id": 8,
+            "key": null,
+            "type": 5,
+          },
+        ],
+        Array [
+          10,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "hocDisplayNames": null,
+            "id": 10,
+            "key": "0",
+            "type": 5,
+          },
+        ],
+        Array [
+          11,
+          Object {
+            "children": Array [],
+            "displayName": "Child",
+            "hocDisplayNames": Array [
+              "Memo",
+            ],
+            "id": 11,
+            "key": null,
+            "type": 8,
+          },
+        ],
+      ],
+    },
   ],
   "timelineData": Array [
     Object {
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index f41e39a35d69..c1d17fd0f6a3 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -110,10 +110,7 @@ describe('ProfilingCache', () => {
       });
     }
 
-    // No profiling data gets logged for the 2nd root (container B)
-    // because it doesn't render anything while profiling.
-    // (Technically it unmounts but we don't profile root unmounts.)
-    expect(allProfilingDataForRoots).toHaveLength(2);
+    expect(allProfilingDataForRoots).toHaveLength(3);
 
     utils.exportImportHelper(bridge, store);
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 665b85d183a3..32ce8e2a9fe5 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1624,20 +1624,29 @@ export function attach(
     pendingOperations.push(op);
   }
 
-  function flushOrQueueOperations(operations: OperationsArray): void {
-    if (operations.length === 3) {
-      // This operations array is a no op: [renderer ID, root ID, string table size (0)]
-      // We can usually skip sending updates like this across the bridge, unless we're Profiling.
-      // In that case, even though the tree didn't change– some Fibers may have still rendered.
+  function shouldBailoutWithPendingOperations() {
+    if (isProfiling) {
       if (
-        !isProfiling ||
-        currentCommitProfilingMetadata == null ||
-        currentCommitProfilingMetadata.durations.length === 0
+        currentCommitProfilingMetadata != null &&
+        currentCommitProfilingMetadata.durations.length > 0
       ) {
-        return;
+        return false;
       }
     }
 
+    return (
+      pendingOperations.length === 0 &&
+      pendingRealUnmountedIDs.length === 0 &&
+      pendingSimulatedUnmountedIDs.length === 0 &&
+      pendingUnmountedRootID === null
+    );
+  }
+
+  function flushOrQueueOperations(operations: OperationsArray): void {
+    if (shouldBailoutWithPendingOperations()) {
+      return;
+    }
+
     if (pendingOperationsQueue !== null) {
       pendingOperationsQueue.push(operations);
     } else {
@@ -1668,7 +1677,7 @@ export function attach(
 
       recordPendingErrorsAndWarnings();
 
-      if (pendingOperations.length === 0) {
+      if (shouldBailoutWithPendingOperations()) {
         // No warnings or errors to flush; we can bail out early here too.
         return;
       }
@@ -1791,12 +1800,7 @@ export function attach(
     // We do this just before flushing, so we can ignore errors for no-longer-mounted Fibers.
     recordPendingErrorsAndWarnings();
 
-    if (
-      pendingOperations.length === 0 &&
-      pendingRealUnmountedIDs.length === 0 &&
-      pendingSimulatedUnmountedIDs.length === 0 &&
-      pendingUnmountedRootID === null
-    ) {
+    if (shouldBailoutWithPendingOperations()) {
       // If we aren't profiling, we can just bail out here.
       // No use sending an empty update over the bridge.
       //
@@ -1805,9 +1809,7 @@ export function attach(
       // (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.
-      if (!isProfiling) {
-        return;
-      }
+      return;
     }
 
     const numUnmountIDs =
@@ -2724,12 +2726,7 @@ export function attach(
     }
 
     if (isProfiling && isProfilingSupported) {
-      // Make sure at least one Fiber performed work during this commit.
-      // If not, don't send it to the frontend; showing an empty commit in the Profiler is confusing.
-      if (
-        currentCommitProfilingMetadata != null &&
-        currentCommitProfilingMetadata.durations.length > 0
-      ) {
+      if (!shouldBailoutWithPendingOperations()) {
         const commitProfilingMetadata = ((rootToCommitProfilingMetadataMap: any): CommitProfilingMetadataMap).get(
           currentRootID,
         );

From 4a87fb52115ca26b2251bdcc94deeff841b66e52 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 10 Mar 2022 10:36:47 -0800
Subject: [PATCH 1198/1603] Better handle undefined Error stacks in DevTools
 error boundary (#24065)

---
 .../src/devtools/views/ErrorBoundary/ErrorBoundary.js       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index b78f7406ad17..06e187a4beec 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -49,16 +49,16 @@ export default class ErrorBoundary extends Component<Props, State> {
     const errorMessage =
       typeof error === 'object' &&
       error !== null &&
-      error.hasOwnProperty('message')
+      typeof error.message === 'string'
         ? error.message
-        : String(error);
+        : null;
 
     const isTimeout = error instanceof TimeoutError;
 
     const callStack =
       typeof error === 'object' &&
       error !== null &&
-      error.hasOwnProperty('stack')
+      typeof error.stack === 'string'
         ? error.stack
             .split('\n')
             .slice(1)

From 82762bea55d56afda2dcd00a565941be3798e0ac Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 10 Mar 2022 10:37:01 -0800
Subject: [PATCH 1199/1603] React DevTools 4.23.0 -> 4.24.0 (#24066)

* Revert "React DevTools 4.23.0 -> 4.24.0 (#23400)"

This reverts commit f6c130f6145dbae5436625560f520957b5e27859.

* React DevTools 4.23.0 -> 4.24.0

* Added additional, pending bugfixes to CHANGELOG

* Updated DevTools build and release script to fix header format
---
 packages/react-devtools/CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 60b337bc497b..b89fa0c098cc 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -5,13 +5,15 @@
 ---
 
 ### 4.24.0
-March 2, 2022
+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))
 

From 581f0c42ed4baa07309dbda296dc93a101bd922b Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Thu, 10 Mar 2022 11:18:54 -0800
Subject: [PATCH 1200/1603] [Flight] add support for Lazy components in Flight
 server (#24068)

* [Flight] add support for Lazy components in Flight server

Lazy components suspend until resolved just like in Fizz. Add tests to confirm Lazy works with Shared Components and Client Component references.

* Support Lazy elements

React.Lazy can now return an element instead of a Component. This commit implements support for Lazy elements when server rendering.

* add lazy initialization to resolveModelToJson

adding lazying initialization toResolveModelToJson means we use attemptResolveElement's full logic on whatever the resolved type ends up being. This better aligns handling of misued Lazy types like a lazy element being used as a Component or a lazy Component being used as an element.
---
 .../src/__tests__/ReactFlight-test.js         | 207 ++++++++++++++++++
 .../react-server/src/ReactFlightServer.js     |  43 ++--
 2 files changed, 236 insertions(+), 14 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index ef93c2a02587..6213f0b72e08 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -138,6 +138,213 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
   });
 
+  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 />);
+
+    act(() => {
+      const rootModel = ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    await load();
+
+    act(() => {
+      const rootModel = 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 />);
+
+    act(() => {
+      const rootModel = ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    spyOnDevAndProd(console, 'error');
+    await load();
+    expect(console.error).toHaveBeenCalledTimes(1);
+  });
+
+  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 />);
+
+    act(() => {
+      const rootModel = ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    await load();
+
+    act(() => {
+      const rootModel = 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 />);
+
+    act(() => {
+      const rootModel = ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    spyOnDevAndProd(console, 'error');
+    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 = moduleReference(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 />);
+
+    act(() => {
+      const rootModel = ReactNoopFlightClient.read(transport);
+      ReactNoop.render(rootModel);
+    });
+    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+    await load();
+
+    act(() => {
+      const rootModel = 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', () => {
     function EventHandlerProp() {
       return (
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 32a08b1eff81..e08f308a32fd 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -200,6 +200,12 @@ function attemptResolveElement(
       return [REACT_ELEMENT_TYPE, type, key, props];
     }
     switch (type.$$typeof) {
+      case REACT_LAZY_TYPE: {
+        const payload = type._payload;
+        const init = type._init;
+        const wrappedType = init(payload);
+        return attemptResolveElement(wrappedType, key, ref, props);
+      }
       case REACT_FORWARD_REF_TYPE: {
         const render = type.render;
         return render(props, undefined);
@@ -452,10 +458,6 @@ export function resolveModelToJSON(
   switch (value) {
     case REACT_ELEMENT_TYPE:
       return '$';
-    case REACT_LAZY_TYPE:
-      throw new Error(
-        'React Lazy Components are not yet supported on the server.',
-      );
   }
 
   if (__DEV__) {
@@ -477,23 +479,36 @@ export function resolveModelToJSON(
   while (
     typeof value === 'object' &&
     value !== null &&
-    (value: any).$$typeof === REACT_ELEMENT_TYPE
+    ((value: any).$$typeof === REACT_ELEMENT_TYPE ||
+      (value: any).$$typeof === REACT_LAZY_TYPE)
   ) {
     if (__DEV__) {
       if (isInsideContextValue) {
         console.error('React elements are not allowed in ServerContext');
       }
     }
-    // TODO: Concatenate keys of parents onto children.
-    const element: React$Element<any> = (value: any);
+
     try {
-      // Attempt to render the server component.
-      value = attemptResolveElement(
-        element.type,
-        element.key,
-        element.ref,
-        element.props,
-      );
+      switch ((value: any).$$typeof) {
+        case REACT_ELEMENT_TYPE: {
+          // TODO: Concatenate keys of parents onto children.
+          const element: React$Element<any> = (value: any);
+          // Attempt to render the server component.
+          value = attemptResolveElement(
+            element.type,
+            element.key,
+            element.ref,
+            element.props,
+          );
+          break;
+        }
+        case REACT_LAZY_TYPE: {
+          const payload = (value: any)._payload;
+          const init = (value: any)._init;
+          value = init(payload);
+          break;
+        }
+      }
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new segment and resolve it later.

From c8e4789e21f6cb031b92b3bd8a905244bfd808b2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 4 Mar 2022 16:50:29 -0500
Subject: [PATCH 1201/1603] Pass children to hydration root constructor

I already made this change for the concurrent root API in #23309. This
does the same thing for the legacy API.

Doesn't change any behavior, but I will use this in the next steps.
---
 packages/react-art/src/ReactART.js            |   1 -
 .../src/__tests__/ReactDOMRoot-test.js        |   9 ++
 .../react-dom/src/client/ReactDOMLegacy.js    | 119 ++++++++++++------
 packages/react-dom/src/client/ReactDOMRoot.js |   2 +-
 .../react-native-renderer/src/ReactFabric.js  |   1 -
 .../src/ReactNativeRenderer.js                |   1 -
 .../src/createReactNoop.js                    |   3 -
 .../src/ReactFiberReconciler.new.js           |   8 +-
 .../src/ReactFiberReconciler.old.js           |   8 +-
 .../ReactFiberHostContext-test.internal.js    |   2 -
 .../src/ReactTestRenderer.js                  |   1 -
 11 files changed, 99 insertions(+), 56 deletions(-)

diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
index 9d1b6a16c203..44cdf4f240a2 100644
--- a/packages/react-art/src/ReactART.js
+++ b/packages/react-art/src/ReactART.js
@@ -69,7 +69,6 @@ class Surface extends React.Component {
     this._mountNode = createContainer(
       this._surface,
       LegacyRoot,
-      false,
       null,
       false,
       false,
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index df693b878499..9d6a38188376 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -253,6 +253,15 @@ describe('ReactDOMRoot', () => {
     );
   });
 
+  it('callback passed to legacy hydrate() API', () => {
+    container.innerHTML = '<div>Hi</div>';
+    ReactDOM.hydrate(<div>Hi</div>, container, () => {
+      Scheduler.unstable_yieldValue('callback');
+    });
+    expect(container.textContent).toEqual('Hi');
+    expect(Scheduler).toHaveYielded(['callback']);
+  });
+
   it('warns when unmounting with legacy API (no previous content)', () => {
     const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 3b751405a303..af0e35e128bd 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -27,6 +27,7 @@ import {
 
 import {
   createContainer,
+  createHydrationContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
   flushSync,
@@ -109,34 +110,81 @@ function noopOnRecoverableError() {
 
 function legacyCreateRootFromDOMContainer(
   container: Container,
-  forceHydrate: boolean,
+  initialChildren: ReactNodeList,
+  parentComponent: ?React$Component<any, any>,
+  callback: ?Function,
+  isHydrationContainer: boolean,
 ): FiberRoot {
-  // First clear any existing content.
-  if (!forceHydrate) {
+  if (isHydrationContainer) {
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function() {
+        const instance = getPublicRootInstance(root);
+        originalCallback.call(instance);
+      };
+    }
+
+    const root = createHydrationContainer(
+      initialChildren,
+      callback,
+      container,
+      LegacyRoot,
+      null, // hydrationCallbacks
+      false, // isStrictMode
+      false, // concurrentUpdatesByDefaultOverride,
+      '', // identifierPrefix
+      noopOnRecoverableError,
+      // TODO(luna) Support hydration later
+      null,
+    );
+    container._reactRootContainer = root;
+    markContainerAsRoot(root.current, container);
+
+    const rootContainerElement =
+      container.nodeType === COMMENT_NODE ? container.parentNode : container;
+    listenToAllSupportedEvents(rootContainerElement);
+
+    flushSync();
+    return root;
+  } else {
+    // First clear any existing content.
     let rootSibling;
     while ((rootSibling = container.lastChild)) {
       container.removeChild(rootSibling);
     }
-  }
 
-  const root = createContainer(
-    container,
-    LegacyRoot,
-    forceHydrate,
-    null, // hydrationCallbacks
-    false, // isStrictMode
-    false, // concurrentUpdatesByDefaultOverride,
-    '', // identifierPrefix
-    noopOnRecoverableError, // onRecoverableError
-    null, // transitionCallbacks
-  );
-  markContainerAsRoot(root.current, 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
+      noopOnRecoverableError, // onRecoverableError
+      null, // transitionCallbacks
+    );
+    container._reactRootContainer = root;
+    markContainerAsRoot(root.current, container);
+
+    const rootContainerElement =
+      container.nodeType === COMMENT_NODE ? container.parentNode : container;
+    listenToAllSupportedEvents(rootContainerElement);
 
-  const rootContainerElement =
-    container.nodeType === COMMENT_NODE ? container.parentNode : container;
-  listenToAllSupportedEvents(rootContainerElement);
+    // Initial mount should not be batched.
+    flushSync(() => {
+      updateContainer(initialChildren, root, parentComponent, callback);
+    });
 
-  return root;
+    return root;
+  }
 }
 
 function warnOnInvalidCallback(callback: mixed, callerName: string): void {
@@ -164,39 +212,30 @@ function legacyRenderSubtreeIntoContainer(
     warnOnInvalidCallback(callback === undefined ? null : callback, 'render');
   }
 
-  let root = container._reactRootContainer;
-  let fiberRoot: FiberRoot;
-  if (!root) {
+  const maybeRoot = container._reactRootContainer;
+  let root: FiberRoot;
+  if (!maybeRoot) {
     // Initial mount
-    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
+    root = legacyCreateRootFromDOMContainer(
       container,
+      children,
+      parentComponent,
+      callback,
       forceHydrate,
     );
-    fiberRoot = root;
-    if (typeof callback === 'function') {
-      const originalCallback = callback;
-      callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
-        originalCallback.call(instance);
-      };
-    }
-    // Initial mount should not be batched.
-    flushSync(() => {
-      updateContainer(children, fiberRoot, parentComponent, callback);
-    });
   } else {
-    fiberRoot = root;
+    root = maybeRoot;
     if (typeof callback === 'function') {
       const originalCallback = callback;
       callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
+        const instance = getPublicRootInstance(root);
         originalCallback.call(instance);
       };
     }
     // Update
-    updateContainer(children, fiberRoot, parentComponent, callback);
+    updateContainer(children, root, parentComponent, callback);
   }
-  return getPublicRootInstance(fiberRoot);
+  return getPublicRootInstance(root);
 }
 
 export function findDOMNode(
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index d71de3bb0c26..6e7192ae1045 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -225,7 +225,6 @@ export function createRoot(
   const root = createContainer(
     container,
     ConcurrentRoot,
-    false,
     null,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -302,6 +301,7 @@ export function hydrateRoot(
 
   const root = createHydrationContainer(
     initialChildren,
+    null,
     container,
     ConcurrentRoot,
     hydrationCallbacks,
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 127b20fd5dac..e08a98653fb6 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -215,7 +215,6 @@ function render(
     root = createContainer(
       containerTag,
       concurrentRoot ? ConcurrentRoot : LegacyRoot,
-      false,
       null,
       false,
       null,
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 1dca2cd7a1d9..e751195dda00 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -211,7 +211,6 @@ function render(
     root = createContainer(
       containerTag,
       LegacyRoot,
-      false,
       null,
       false,
       null,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index e0ba72076a1a..8e4050dcfa33 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -974,7 +974,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         root = NoopRenderer.createContainer(
           container,
           tag,
-          false,
           null,
           null,
           false,
@@ -996,7 +995,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const fiberRoot = NoopRenderer.createContainer(
         container,
         ConcurrentRoot,
-        false,
         null,
         null,
         false,
@@ -1029,7 +1027,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const fiberRoot = NoopRenderer.createContainer(
         container,
         LegacyRoot,
-        false,
         null,
         null,
         false,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 8607b227e9b4..67eb7f7b232e 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -245,9 +245,6 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
-  // TODO: We can remove hydration-specific stuff from createContainer once
-  // we delete legacy mode. The new root API uses createHydrationContainer.
-  hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -255,6 +252,7 @@ export function createContainer(
   onRecoverableError: (error: mixed) => void,
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
+  const hydrate = false;
   return createFiberRoot(
     containerInfo,
     tag,
@@ -270,6 +268,8 @@ export function createContainer(
 
 export function createHydrationContainer(
   initialChildren: ReactNodeList,
+  // TODO: Remove `callback` when we delete legacy mode.
+  callback: ?Function,
   containerInfo: Container,
   tag: RootTag,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
@@ -305,6 +305,8 @@ export function createHydrationContainer(
   // Caution: React DevTools currently depends on this property
   // being called "element".
   update.payload = {element: initialChildren};
+  update.callback =
+    callback !== undefined && callback !== null ? callback : null;
   enqueueUpdate(current, update, lane);
   scheduleInitialHydrationOnRoot(root, lane, eventTime);
 
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 4970b685b1c1..378035e95e66 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -245,9 +245,6 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
-  // TODO: We can remove hydration-specific stuff from createContainer once
-  // we delete legacy mode. The new root API uses createHydrationContainer.
-  hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -255,6 +252,7 @@ export function createContainer(
   onRecoverableError: (error: mixed) => void,
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
+  const hydrate = false;
   return createFiberRoot(
     containerInfo,
     tag,
@@ -270,6 +268,8 @@ export function createContainer(
 
 export function createHydrationContainer(
   initialChildren: ReactNodeList,
+  // TODO: Remove `callback` when we delete legacy mode.
+  callback: ?Function,
   containerInfo: Container,
   tag: RootTag,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
@@ -305,6 +305,8 @@ export function createHydrationContainer(
   // Caution: React DevTools currently depends on this property
   // being called "element".
   update.payload = {element: initialChildren};
+  update.callback =
+    callback !== undefined && callback !== null ? callback : null;
   enqueueUpdate(current, update, lane);
   scheduleInitialHydrationOnRoot(root, lane, eventTime);
 
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index d0c3d5b236ea..82e23de9965d 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -72,7 +72,6 @@ describe('ReactFiberHostContext', () => {
     const container = Renderer.createContainer(
       /* root: */ null,
       ConcurrentRoot,
-      false,
       null,
       false,
       '',
@@ -136,7 +135,6 @@ describe('ReactFiberHostContext', () => {
     const container = Renderer.createContainer(
       rootContext,
       ConcurrentRoot,
-      false,
       null,
       false,
       '',
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index e850086439a6..76911d701de7 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -473,7 +473,6 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
   let root: FiberRoot | null = createContainer(
     container,
     isConcurrent ? ConcurrentRoot : LegacyRoot,
-    false,
     null,
     isStrictMode,
     concurrentUpdatesByDefault,

From 83b941a519f0528f3c7938f2bc6094a8de60c21e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 4 Mar 2022 12:37:53 -0500
Subject: [PATCH 1202/1603] Add isRootDehydrated function

Currently this does nothing except read a boolean field, but I'm about
to change this logic.

Since this is accessed by React DOM, too, I put the function in a
separate module that can be deep imported. Previously, it was accessing
the FiberRoot directly. The reason it's a separate module is to break a
circular dependency between React DOM and the reconciler.
---
 .../src/events/ReactDOMEventListener.js         |  3 ++-
 .../src/events/ReactDOMEventReplaying.js        |  3 ++-
 .../src/ReactFiberBeginWork.new.js              |  3 ++-
 .../src/ReactFiberBeginWork.old.js              |  3 ++-
 .../src/ReactFiberCommitWork.new.js             |  5 +++--
 .../src/ReactFiberCommitWork.old.js             |  5 +++--
 .../src/ReactFiberCompleteWork.new.js           |  3 ++-
 .../src/ReactFiberCompleteWork.old.js           |  3 ++-
 .../src/ReactFiberReconciler.new.js             |  3 ++-
 .../src/ReactFiberReconciler.old.js             |  3 ++-
 .../src/ReactFiberShellHydration.js             | 17 +++++++++++++++++
 .../src/ReactFiberWorkLoop.new.js               |  5 +++--
 .../src/ReactFiberWorkLoop.old.js               |  5 +++--
 13 files changed, 45 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberShellHydration.js

diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index f8b8231f8f40..e2974586ec6a 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -53,6 +53,7 @@ import {
   setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
 
 const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -386,7 +387,7 @@ export function findInstanceBlockingEvent(
         targetInst = null;
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (root.isDehydrated) {
+        if (isRootDehydrated(root)) {
           // If this happens during a replay something went wrong and it might block
           // the whole system.
           return getContainerFromFiber(nearestMounted);
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 744f5dfda9d9..9de82a99a7be 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -39,6 +39,7 @@ import {
 } from '../client/ReactDOMComponentTree';
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
+import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
 
 let _attemptSynchronousHydration: (fiber: Object) => void;
 
@@ -414,7 +415,7 @@ function attemptExplicitHydrationTarget(
         }
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (root.isDehydrated) {
+        if (isRootDehydrated(root)) {
           queuedTarget.blockedOn = getContainerFromFiber(nearestMounted);
           // We don't currently have a way to increase the priority of
           // a root other than sync.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4bae5d0b7b98..4feff7d26066 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -223,6 +223,7 @@ import {
   createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.new';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   retryDehydratedSuspenseBoundary,
   scheduleUpdateOnFiber,
@@ -1351,7 +1352,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     resetHydrationState();
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
-  if (root.isDehydrated && enterHydrationState(workInProgress)) {
+  if (isRootDehydrated(root) && enterHydrationState(workInProgress)) {
     // If we don't have any current children this might be the first pass.
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 583539dd08b5..bdb53d6b36e5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -223,6 +223,7 @@ import {
   createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.old';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   retryDehydratedSuspenseBoundary,
   scheduleUpdateOnFiber,
@@ -1351,7 +1352,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     resetHydrationState();
     return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
   }
-  if (root.isDehydrated && enterHydrationState(workInProgress)) {
+  if (isRootDehydrated(root) && enterHydrationState(workInProgress)) {
     // If we don't have any current children this might be the first pass.
     // We always try to hydrate. If this isn't a hydration pass there won't
     // be any children to hydrate which is effectively the same thing as
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 75553555b928..6f6b59b4ecee 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -82,6 +82,7 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -1878,7 +1879,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case HostRoot: {
         if (supportsHydration) {
           const root: FiberRoot = finishedWork.stateNode;
-          if (root.isDehydrated) {
+          if (isRootDehydrated(root)) {
             // We've just hydrated. No need to hydrate again.
             root.isDehydrated = false;
             commitHydratedContainer(root.containerInfo);
@@ -1986,7 +1987,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case HostRoot: {
       if (supportsHydration) {
         const root: FiberRoot = finishedWork.stateNode;
-        if (root.isDehydrated) {
+        if (isRootDehydrated(root)) {
           // We've just hydrated. No need to hydrate again.
           root.isDehydrated = false;
           commitHydratedContainer(root.containerInfo);
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 23e9d6070c9a..af044c79cada 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -82,6 +82,7 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -1878,7 +1879,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       case HostRoot: {
         if (supportsHydration) {
           const root: FiberRoot = finishedWork.stateNode;
-          if (root.isDehydrated) {
+          if (isRootDehydrated(root)) {
             // We've just hydrated. No need to hydrate again.
             root.isDehydrated = false;
             commitHydratedContainer(root.containerInfo);
@@ -1986,7 +1987,7 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     case HostRoot: {
       if (supportsHydration) {
         const root: FiberRoot = finishedWork.stateNode;
-        if (root.isDehydrated) {
+        if (isRootDehydrated(root)) {
           // We've just hydrated. No need to hydrate again.
           root.isDehydrated = false;
           commitHydratedContainer(root.containerInfo);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 2a44cf94a14a..e00fdf5850ae 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -160,6 +160,7 @@ import {
   includesSomeLane,
   mergeLanes,
 } from './ReactFiberLane.new';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {resetChildFibers} from './ReactChildFiber.new';
 import {createScopeInstance} from './ReactFiberScope.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
@@ -890,7 +891,7 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!fiberRoot.isDehydrated) {
+        } else if (!isRootDehydrated(fiberRoot)) {
           // 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
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index f02a20222d0f..1c47a291caf0 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -160,6 +160,7 @@ import {
   includesSomeLane,
   mergeLanes,
 } from './ReactFiberLane.old';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {resetChildFibers} from './ReactChildFiber.old';
 import {createScopeInstance} from './ReactFiberScope.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
@@ -890,7 +891,7 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!fiberRoot.isDehydrated) {
+        } else if (!isRootDehydrated(fiberRoot)) {
           // 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
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 67eb7f7b232e..b814c35cf835 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -48,6 +48,7 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.new';
 import {createFiberRoot} from './ReactFiberRoot.new';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   injectInternals,
   markRenderScheduled,
@@ -411,7 +412,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (root.isDehydrated) {
+      if (isRootDehydrated(root)) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 378035e95e66..9665ca44bc52 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -48,6 +48,7 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.old';
 import {createFiberRoot} from './ReactFiberRoot.old';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   injectInternals,
   markRenderScheduled,
@@ -411,7 +412,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (root.isDehydrated) {
+      if (isRootDehydrated(root)) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberShellHydration.js b/packages/react-reconciler/src/ReactFiberShellHydration.js
new file mode 100644
index 000000000000..2f1afde6de96
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberShellHydration.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {FiberRoot} from './ReactInternalTypes';
+
+// 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) {
+  return root.isDehydrated;
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7223ad7d052b..caab7a666f65 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -88,6 +88,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.new';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -581,7 +582,7 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (root.isDehydrated && root.tag !== LegacyRoot) {
+    if (isRootDehydrated(root) && root.tag !== LegacyRoot) {
       // This root's shell hasn't hydrated yet. Revert to client rendering.
       if (workInProgressRoot === root) {
         // If this happened during an interleaved event, interrupt the
@@ -1016,7 +1017,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
-  if (root.isDehydrated) {
+  if (isRootDehydrated(root)) {
     root.isDehydrated = false;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d8bb6b16e29f..04a324cdc83e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -88,6 +88,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.old';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -581,7 +582,7 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (root.isDehydrated && root.tag !== LegacyRoot) {
+    if (isRootDehydrated(root) && root.tag !== LegacyRoot) {
       // This root's shell hasn't hydrated yet. Revert to client rendering.
       if (workInProgressRoot === root) {
         // If this happened during an interleaved event, interrupt the
@@ -1016,7 +1017,7 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
-  if (root.isDehydrated) {
+  if (isRootDehydrated(root)) {
     root.isDehydrated = false;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);

From 02b65fd8c5dbc6bfe2c976841f2f70a593ac9129 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 11 Mar 2022 19:48:36 -0500
Subject: [PATCH 1203/1603] Allow updates at lower pri without forcing client
 render

Currently, if a root is updated before the shell has finished hydrating
(for example, due to a top-level navigation), we immediately revert to
client rendering. This is rare because the root is expected is finish
quickly, but not exceedingly rare because the root may be suspended.

This adds support for updating the root without forcing a client render
as long as the update has lower priority than the initial hydration,
i.e. if the update is wrapped in startTransition.

To implement this, I had to do some refactoring. The main idea here is
to make it closer to how we implement hydration in Suspense boundaries:

- I moved isDehydrated from the shared FiberRoot object to the
HostRoot's state object.
- In the begin phase, I check if the root has received an by comparing
the new children to the initial children. If they are different, we
revert to client rendering, and set isDehydrated to false using a
derived state update (a la getDerivedStateFromProps).
- There are a few places where we used to set root.isDehydrated to false
as a way to force a client render. Instead, I set the ForceClientRender
flag on the root work-in-progress fiber.
- Whenever we fall back to client rendering, I log a recoverable error.

The overall code structure is almost identical to the corresponding
logic for Suspense components.

The reason this works is because if the update has lower priority than
the initial hydration, it won't be processed during the hydration
render, so the children will be the same.

We can go even further and allow updates at _higher_ priority (though
not sync) by implementing selective hydration at the root, like we do
for Suspense boundaries: interrupt the current render, attempt hydration
at slightly higher priority than the update, then continue rendering the
update. I haven't implemented this yet, but I've structured the code in
anticipation of adding this later.
---
 .../ReactDOMFizzShellHydration-test.js        |  36 +++-
 .../src/ReactFiberBeginWork.new.js            | 160 +++++++++++++-----
 .../src/ReactFiberBeginWork.old.js            | 160 +++++++++++++-----
 .../src/ReactFiberCommitWork.new.js           |  24 +--
 .../src/ReactFiberCommitWork.old.js           |  24 +--
 .../src/ReactFiberCompleteWork.new.js         |  31 +++-
 .../src/ReactFiberCompleteWork.old.js         |  31 +++-
 .../src/ReactFiberReconciler.new.js           |   7 +-
 .../src/ReactFiberReconciler.old.js           |   7 +-
 .../src/ReactFiberRoot.new.js                 |  14 +-
 .../src/ReactFiberRoot.old.js                 |  14 +-
 .../src/ReactFiberShellHydration.js           |   4 +-
 .../src/ReactFiberWorkLoop.new.js             |  77 ++++-----
 .../src/ReactFiberWorkLoop.old.js             |  77 ++++-----
 .../src/ReactInternalTypes.js                 |   2 -
 15 files changed, 435 insertions(+), 233 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
index f3ff64daeec4..3584715f91e2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -9,6 +9,7 @@
 
 let JSDOM;
 let React;
+let startTransition;
 let ReactDOMClient;
 let Scheduler;
 let clientAct;
@@ -33,6 +34,8 @@ describe('ReactDOMFizzShellHydration', () => {
     ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
 
+    startTransition = React.startTransition;
+
     textCache = new Map();
 
     // Test Environment
@@ -214,7 +217,36 @@ describe('ReactDOMFizzShellHydration', () => {
     expect(container.textContent).toBe('Shell');
   });
 
-  test('updating the root before the shell hydrates forces a client render', async () => {
+  test(
+    '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);
+      });
+      expect(Scheduler).toHaveYielded(['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" />);
+        });
+      });
+      expect(Scheduler).toHaveYielded(['Initial', 'Updated']);
+      expect(container.textContent).toBe('Updated');
+    },
+  );
+
+  test('updating the root while the shell is suspended forces a client render', async () => {
     function App() {
       return <AsyncText text="Shell" />;
     }
@@ -245,9 +277,9 @@ describe('ReactDOMFizzShellHydration', () => {
       root.render(<Text text="New screen" />);
     });
     expect(Scheduler).toHaveYielded([
+      'New screen',
       'This root received an early update, before anything was able ' +
         'hydrate. Switched the entire root to client rendering.',
-      'New screen',
     ]);
     expect(container.textContent).toBe('New screen');
   });
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4feff7d26066..7dc29bd2b0f0 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactProviderType,
+  ReactContext,
+  ReactNodeList,
+} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -29,6 +33,7 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
+import type {RootState} from './ReactFiberRoot.new';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
@@ -223,7 +228,6 @@ import {
   createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.new';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   retryDehydratedSuspenseBoundary,
   scheduleUpdateOnFiber,
@@ -1312,7 +1316,7 @@ function pushHostRootContext(workInProgress) {
 
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
-  const updateQueue = workInProgress.updateQueue;
+  const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
 
   if (current === null || updateQueue === null) {
     throw new Error(
@@ -1327,7 +1331,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
-  const nextState = workInProgress.memoizedState;
+  const nextState: RootState = workInProgress.memoizedState;
 
   const root: FiberRoot = workInProgress.stateNode;
 
@@ -1342,64 +1346,130 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   }
 
   if (enableTransitionTracing) {
+    // FIXME: Slipped past code review. This is not a safe mutation:
+    // workInProgress.memoizedState is a shared object. Need to fix before
+    // rolling out the Transition Tracing experiment.
     workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
   }
 
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
-  if (nextChildren === prevChildren) {
-    resetHydrationState();
-    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  }
-  if (isRootDehydrated(root) && enterHydrationState(workInProgress)) {
-    // If we don't have any current children this might be the first pass.
-    // We always try to hydrate. If this isn't a hydration pass there won't
-    // be any children to hydrate which is effectively the same thing as
-    // not hydrating.
-
-    if (supportsHydration) {
-      const mutableSourceEagerHydrationData =
-        root.mutableSourceEagerHydrationData;
-      if (mutableSourceEagerHydrationData != null) {
-        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-          const mutableSource = ((mutableSourceEagerHydrationData[
-            i
-          ]: any): MutableSource<any>);
-          const version = mutableSourceEagerHydrationData[i + 1];
-          setWorkInProgressVersion(mutableSource, version);
+  if (supportsHydration && prevState.isDehydrated) {
+    // This is a hydration root whose shell has not yet hydrated. We should
+    // attempt to hydrate.
+    if (workInProgress.flags & ForceClientRender) {
+      // Something errored during a previous attempt to hydrate the shell, so we
+      // forced a client render.
+      const recoverableError = new Error(
+        'There was an error while hydrating. Because the error happened outside ' +
+          'of a Suspense boundary, the entire root will switch to ' +
+          'client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        updateQueue,
+        nextState,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else if (nextChildren !== prevChildren) {
+      const recoverableError = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        updateQueue,
+        nextState,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else {
+      // The outermost shell has not hydrated yet. Start hydrating.
+      enterHydrationState(workInProgress);
+      if (supportsHydration) {
+        const mutableSourceEagerHydrationData =
+          root.mutableSourceEagerHydrationData;
+        if (mutableSourceEagerHydrationData != null) {
+          for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+            const mutableSource = ((mutableSourceEagerHydrationData[
+              i
+            ]: any): MutableSource<any>);
+            const version = mutableSourceEagerHydrationData[i + 1];
+            setWorkInProgressVersion(mutableSource, version);
+          }
         }
       }
-    }
 
-    const child = mountChildFibers(
-      workInProgress,
-      null,
-      nextChildren,
-      renderLanes,
-    );
-    workInProgress.child = child;
+      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;
+      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 {
-    // Otherwise reset hydration state in case we aborted and resumed another
-    // root.
-    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    // 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,
+  updateQueue: UpdateQueue<RootState>,
+  nextState: RootState,
+  nextChildren: ReactNodeList,
+  renderLanes: Lanes,
+  recoverableError: Error,
+) {
+  // Revert to client rendering.
+  resetHydrationState();
+
+  queueHydrationError(recoverableError);
+
+  workInProgress.flags |= ForceClientRender;
+
+  // 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,
+    transitions: nextState.transitions,
+  };
+  // `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;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateHostComponent(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index bdb53d6b36e5..206773b03b33 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactProviderType,
+  ReactContext,
+  ReactNodeList,
+} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -29,6 +33,7 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
+import type {RootState} from './ReactFiberRoot.old';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
@@ -223,7 +228,6 @@ import {
   createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.old';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   retryDehydratedSuspenseBoundary,
   scheduleUpdateOnFiber,
@@ -1312,7 +1316,7 @@ function pushHostRootContext(workInProgress) {
 
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
-  const updateQueue = workInProgress.updateQueue;
+  const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
 
   if (current === null || updateQueue === null) {
     throw new Error(
@@ -1327,7 +1331,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
-  const nextState = workInProgress.memoizedState;
+  const nextState: RootState = workInProgress.memoizedState;
 
   const root: FiberRoot = workInProgress.stateNode;
 
@@ -1342,64 +1346,130 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   }
 
   if (enableTransitionTracing) {
+    // FIXME: Slipped past code review. This is not a safe mutation:
+    // workInProgress.memoizedState is a shared object. Need to fix before
+    // rolling out the Transition Tracing experiment.
     workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
   }
 
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
-  if (nextChildren === prevChildren) {
-    resetHydrationState();
-    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  }
-  if (isRootDehydrated(root) && enterHydrationState(workInProgress)) {
-    // If we don't have any current children this might be the first pass.
-    // We always try to hydrate. If this isn't a hydration pass there won't
-    // be any children to hydrate which is effectively the same thing as
-    // not hydrating.
-
-    if (supportsHydration) {
-      const mutableSourceEagerHydrationData =
-        root.mutableSourceEagerHydrationData;
-      if (mutableSourceEagerHydrationData != null) {
-        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-          const mutableSource = ((mutableSourceEagerHydrationData[
-            i
-          ]: any): MutableSource<any>);
-          const version = mutableSourceEagerHydrationData[i + 1];
-          setWorkInProgressVersion(mutableSource, version);
+  if (supportsHydration && prevState.isDehydrated) {
+    // This is a hydration root whose shell has not yet hydrated. We should
+    // attempt to hydrate.
+    if (workInProgress.flags & ForceClientRender) {
+      // Something errored during a previous attempt to hydrate the shell, so we
+      // forced a client render.
+      const recoverableError = new Error(
+        'There was an error while hydrating. Because the error happened outside ' +
+          'of a Suspense boundary, the entire root will switch to ' +
+          'client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        updateQueue,
+        nextState,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else if (nextChildren !== prevChildren) {
+      const recoverableError = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        updateQueue,
+        nextState,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else {
+      // The outermost shell has not hydrated yet. Start hydrating.
+      enterHydrationState(workInProgress);
+      if (supportsHydration) {
+        const mutableSourceEagerHydrationData =
+          root.mutableSourceEagerHydrationData;
+        if (mutableSourceEagerHydrationData != null) {
+          for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+            const mutableSource = ((mutableSourceEagerHydrationData[
+              i
+            ]: any): MutableSource<any>);
+            const version = mutableSourceEagerHydrationData[i + 1];
+            setWorkInProgressVersion(mutableSource, version);
+          }
         }
       }
-    }
 
-    const child = mountChildFibers(
-      workInProgress,
-      null,
-      nextChildren,
-      renderLanes,
-    );
-    workInProgress.child = child;
+      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;
+      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 {
-    // Otherwise reset hydration state in case we aborted and resumed another
-    // root.
-    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    // 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,
+  updateQueue: UpdateQueue<RootState>,
+  nextState: RootState,
+  nextChildren: ReactNodeList,
+  renderLanes: Lanes,
+  recoverableError: Error,
+) {
+  // Revert to client rendering.
+  resetHydrationState();
+
+  queueHydrationError(recoverableError);
+
+  workInProgress.flags |= ForceClientRender;
+
+  // 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,
+    transitions: nextState.transitions,
+  };
+  // `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;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateHostComponent(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6f6b59b4ecee..776c402a00eb 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -25,6 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {RootState} from './ReactFiberRoot.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -82,7 +83,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -1878,11 +1878,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case HostRoot: {
         if (supportsHydration) {
-          const root: FiberRoot = finishedWork.stateNode;
-          if (isRootDehydrated(root)) {
-            // We've just hydrated. No need to hydrate again.
-            root.isDehydrated = false;
-            commitHydratedContainer(root.containerInfo);
+          if (current !== null) {
+            const prevRootState: RootState = current.memoizedState;
+            if (prevRootState.isDehydrated) {
+              const root: FiberRoot = finishedWork.stateNode;
+              commitHydratedContainer(root.containerInfo);
+            }
           }
         }
         break;
@@ -1986,11 +1987,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case HostRoot: {
       if (supportsHydration) {
-        const root: FiberRoot = finishedWork.stateNode;
-        if (isRootDehydrated(root)) {
-          // We've just hydrated. No need to hydrate again.
-          root.isDehydrated = false;
-          commitHydratedContainer(root.containerInfo);
+        if (current !== null) {
+          const prevRootState: RootState = current.memoizedState;
+          if (prevRootState.isDehydrated) {
+            const root: FiberRoot = finishedWork.stateNode;
+            commitHydratedContainer(root.containerInfo);
+          }
         }
       }
       return;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index af044c79cada..a53d4a2a8752 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -25,6 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {RootState} from './ReactFiberRoot.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -82,7 +83,6 @@ import {
   Visibility,
 } from './ReactFiberFlags';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
@@ -1878,11 +1878,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case HostRoot: {
         if (supportsHydration) {
-          const root: FiberRoot = finishedWork.stateNode;
-          if (isRootDehydrated(root)) {
-            // We've just hydrated. No need to hydrate again.
-            root.isDehydrated = false;
-            commitHydratedContainer(root.containerInfo);
+          if (current !== null) {
+            const prevRootState: RootState = current.memoizedState;
+            if (prevRootState.isDehydrated) {
+              const root: FiberRoot = finishedWork.stateNode;
+              commitHydratedContainer(root.containerInfo);
+            }
           }
         }
         break;
@@ -1986,11 +1987,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case HostRoot: {
       if (supportsHydration) {
-        const root: FiberRoot = finishedWork.stateNode;
-        if (isRootDehydrated(root)) {
-          // We've just hydrated. No need to hydrate again.
-          root.isDehydrated = false;
-          commitHydratedContainer(root.containerInfo);
+        if (current !== null) {
+          const prevRootState: RootState = current.memoizedState;
+          if (prevRootState.isDehydrated) {
+            const root: FiberRoot = finishedWork.stateNode;
+            commitHydratedContainer(root.containerInfo);
+          }
         }
       }
       return;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index e00fdf5850ae..bea984c19f1c 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot.new';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {
   ReactScopeInstance,
@@ -160,7 +161,6 @@ import {
   includesSomeLane,
   mergeLanes,
 } from './ReactFiberLane.new';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {resetChildFibers} from './ReactChildFiber.new';
 import {createScopeInstance} from './ReactFiberScope.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
@@ -891,12 +891,29 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!isRootDehydrated(fiberRoot)) {
-          // 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;
+        } 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);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1c47a291caf0..ef3d4f7979f2 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot.old';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {
   ReactScopeInstance,
@@ -160,7 +161,6 @@ import {
   includesSomeLane,
   mergeLanes,
 } from './ReactFiberLane.old';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {resetChildFibers} from './ReactChildFiber.old';
 import {createScopeInstance} from './ReactFiberScope.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
@@ -891,12 +891,29 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!isRootDehydrated(fiberRoot)) {
-          // 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;
+        } 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);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index b814c35cf835..849470551a2b 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -254,10 +254,12 @@ export function createContainer(
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
   const hydrate = false;
+  const initialChildren = null;
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -285,6 +287,7 @@ export function createHydrationContainer(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -303,9 +306,7 @@ export function createHydrationContainer(
   const eventTime = requestEventTime();
   const lane = requestUpdateLane(current);
   const update = createUpdate(eventTime, lane);
-  // Caution: React DevTools currently depends on this property
-  // being called "element".
-  update.payload = {element: initialChildren};
+  update.payload = {isDehydrated: false};
   update.callback =
     callback !== undefined && callback !== null ? callback : null;
   enqueueUpdate(current, update, lane);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 9665ca44bc52..f7166095ba13 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -254,10 +254,12 @@ export function createContainer(
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
   const hydrate = false;
+  const initialChildren = null;
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -285,6 +287,7 @@ export function createHydrationContainer(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -303,9 +306,7 @@ export function createHydrationContainer(
   const eventTime = requestEventTime();
   const lane = requestUpdateLane(current);
   const update = createUpdate(eventTime, lane);
-  // Caution: React DevTools currently depends on this property
-  // being called "element".
-  update.payload = {element: initialChildren};
+  update.payload = {isDehydrated: false};
   update.callback =
     callback !== undefined && callback !== null ? callback : null;
   enqueueUpdate(current, update, lane);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 00dd694be4f5..7ff03ceead0e 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   SuspenseHydrationCallbacks,
@@ -39,7 +40,8 @@ import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
 export type RootState = {
   element: any,
-  cache: Cache | null,
+  isDehydrated: boolean,
+  cache: Cache,
   transitions: Transitions | null,
 };
 
@@ -59,7 +61,6 @@ function FiberRootNode(
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
-  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
@@ -128,6 +129,7 @@ export function createFiberRoot(
   containerInfo: any,
   tag: RootTag,
   hydrate: boolean,
+  initialChildren: ReactNodeList,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -178,15 +180,17 @@ export function createFiberRoot(
     root.pooledCache = initialCache;
     retainCache(initialCache);
     const initialState: RootState = {
-      element: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
       cache: initialCache,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
-      element: null,
-      cache: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
+      cache: (null: any), // not enabled yet
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 1e561e49facb..179b9c17ae41 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   SuspenseHydrationCallbacks,
@@ -39,7 +40,8 @@ import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
 export type RootState = {
   element: any,
-  cache: Cache | null,
+  isDehydrated: boolean,
+  cache: Cache,
   transitions: Transitions | null,
 };
 
@@ -59,7 +61,6 @@ function FiberRootNode(
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
-  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
@@ -128,6 +129,7 @@ export function createFiberRoot(
   containerInfo: any,
   tag: RootTag,
   hydrate: boolean,
+  initialChildren: ReactNodeList,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -178,15 +180,17 @@ export function createFiberRoot(
     root.pooledCache = initialCache;
     retainCache(initialCache);
     const initialState: RootState = {
-      element: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
       cache: initialCache,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
-      element: null,
-      cache: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
+      cache: (null: any), // not enabled yet
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
diff --git a/packages/react-reconciler/src/ReactFiberShellHydration.js b/packages/react-reconciler/src/ReactFiberShellHydration.js
index 2f1afde6de96..caadb978f69d 100644
--- a/packages/react-reconciler/src/ReactFiberShellHydration.js
+++ b/packages/react-reconciler/src/ReactFiberShellHydration.js
@@ -8,10 +8,12 @@
  */
 
 import type {FiberRoot} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot.new';
 
 // 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) {
-  return root.isDehydrated;
+  const currentState: RootState = root.current.memoizedState;
+  return currentState.isDehydrated;
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index caab7a666f65..558440effa77 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -110,6 +110,7 @@ import {
   StoreConsistency,
   HostEffectMask,
   Hydrating,
+  ForceClientRender,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
@@ -582,34 +583,7 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (isRootDehydrated(root) && root.tag !== LegacyRoot) {
-      // This root's shell hasn't hydrated yet. Revert to client rendering.
-      if (workInProgressRoot === root) {
-        // If this happened during an interleaved event, interrupt the
-        // in-progress hydration. Theoretically, we could attempt to force a
-        // synchronous hydration before switching to client rendering, but the
-        // most common reason the shell hasn't hydrated yet is because it
-        // suspended. So it's very likely to suspend again anyway. For
-        // simplicity, we'll skip that atttempt and go straight to
-        // client rendering.
-        //
-        // Another way to model this would be to give the initial hydration its
-        // own special lane. However, it may not be worth adding a lane solely
-        // for this purpose, so we'll wait until we find another use case before
-        // adding it.
-        //
-        // TODO: Consider only interrupting hydration if the priority of the
-        // update is higher than default.
-        prepareFreshStack(root, NoLanes);
-      }
-      root.isDehydrated = false;
-      const error = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
-      );
-      const onRecoverableError = root.onRecoverableError;
-      onRecoverableError(error);
-    } else if (root === workInProgressRoot) {
+    if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
       // Received an update to a tree that's in the middle of rendering. Mark
@@ -1017,28 +991,42 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // 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;
+
   if (isRootDehydrated(root)) {
-    root.isDehydrated = false;
+    // 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;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
-    const error = new Error(
-      'There was an error while hydrating. Because the error happened outside ' +
-        'of a Suspense boundary, the entire root will switch to ' +
-        'client rendering.',
-    );
-    renderDidError(error);
   }
 
-  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
   if (exitStatus !== RootErrored) {
     // Successfully finished rendering on retry
-    if (errorsFromFirstAttempt !== null) {
-      // 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.
-      queueRecoverableErrors(errorsFromFirstAttempt);
+
+    // 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.
@@ -1454,7 +1442,7 @@ export function popRenderLanes(fiber: Fiber) {
   popFromStack(subtreeRenderLanesCursor, fiber);
 }
 
-function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
+function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
@@ -1480,7 +1468,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
     }
   }
   workInProgressRoot = root;
-  workInProgress = createWorkInProgress(root.current, null);
+  const rootWorkInProgress = createWorkInProgress(root.current, null);
+  workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
@@ -1496,6 +1485,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
+
+  return rootWorkInProgress;
 }
 
 function handleError(root, thrownValue): void {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 04a324cdc83e..c1c090d82b0b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -110,6 +110,7 @@ import {
   StoreConsistency,
   HostEffectMask,
   Hydrating,
+  ForceClientRender,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
@@ -582,34 +583,7 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (isRootDehydrated(root) && root.tag !== LegacyRoot) {
-      // This root's shell hasn't hydrated yet. Revert to client rendering.
-      if (workInProgressRoot === root) {
-        // If this happened during an interleaved event, interrupt the
-        // in-progress hydration. Theoretically, we could attempt to force a
-        // synchronous hydration before switching to client rendering, but the
-        // most common reason the shell hasn't hydrated yet is because it
-        // suspended. So it's very likely to suspend again anyway. For
-        // simplicity, we'll skip that atttempt and go straight to
-        // client rendering.
-        //
-        // Another way to model this would be to give the initial hydration its
-        // own special lane. However, it may not be worth adding a lane solely
-        // for this purpose, so we'll wait until we find another use case before
-        // adding it.
-        //
-        // TODO: Consider only interrupting hydration if the priority of the
-        // update is higher than default.
-        prepareFreshStack(root, NoLanes);
-      }
-      root.isDehydrated = false;
-      const error = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
-      );
-      const onRecoverableError = root.onRecoverableError;
-      onRecoverableError(error);
-    } else if (root === workInProgressRoot) {
+    if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
       // Received an update to a tree that's in the middle of rendering. Mark
@@ -1017,28 +991,42 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // 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;
+
   if (isRootDehydrated(root)) {
-    root.isDehydrated = false;
+    // 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;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
-    const error = new Error(
-      'There was an error while hydrating. Because the error happened outside ' +
-        'of a Suspense boundary, the entire root will switch to ' +
-        'client rendering.',
-    );
-    renderDidError(error);
   }
 
-  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
   if (exitStatus !== RootErrored) {
     // Successfully finished rendering on retry
-    if (errorsFromFirstAttempt !== null) {
-      // 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.
-      queueRecoverableErrors(errorsFromFirstAttempt);
+
+    // 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.
@@ -1454,7 +1442,7 @@ export function popRenderLanes(fiber: Fiber) {
   popFromStack(subtreeRenderLanesCursor, fiber);
 }
 
-function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
+function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
@@ -1480,7 +1468,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
     }
   }
   workInProgressRoot = root;
-  workInProgress = createWorkInProgress(root.current, null);
+  const rootWorkInProgress = createWorkInProgress(root.current, null);
+  workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
@@ -1496,6 +1485,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
+
+  return rootWorkInProgress;
 }
 
 function handleError(root, thrownValue): void {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index dd2e09c03b21..1fa3d4b6680d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -213,8 +213,6 @@ type BaseFiberRootProperties = {|
   // Top context object, used by renderSubtreeIntoContainer
   context: Object | null,
   pendingContext: Object | null,
-  // Determines if we should attempt to hydrate on the initial mount
-  +isDehydrated: boolean,
 
   // Used by useMutableSource hook to avoid tearing during hydration.
   mutableSourceEagerHydrationData?: Array<

From 832e2987e01aa357c3b2e551acae0682ca36fb14 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 11 Mar 2022 21:31:23 -0500
Subject: [PATCH 1204/1603] Revert accdientally merged PR (#24081)

---
 packages/react-art/src/ReactART.js            |   1 +
 .../ReactDOMFizzShellHydration-test.js        |  36 +---
 .../src/__tests__/ReactDOMRoot-test.js        |   9 -
 .../react-dom/src/client/ReactDOMLegacy.js    | 119 +++++--------
 packages/react-dom/src/client/ReactDOMRoot.js |   2 +-
 .../src/events/ReactDOMEventListener.js       |   3 +-
 .../src/events/ReactDOMEventReplaying.js      |   3 +-
 .../react-native-renderer/src/ReactFabric.js  |   1 +
 .../src/ReactNativeRenderer.js                |   1 +
 .../src/createReactNoop.js                    |   3 +
 .../src/ReactFiberBeginWork.new.js            | 159 +++++-------------
 .../src/ReactFiberBeginWork.old.js            | 159 +++++-------------
 .../src/ReactFiberCommitWork.new.js           |  23 ++-
 .../src/ReactFiberCommitWork.old.js           |  23 ++-
 .../src/ReactFiberCompleteWork.new.js         |  30 +---
 .../src/ReactFiberCompleteWork.old.js         |  30 +---
 .../src/ReactFiberReconciler.new.js           |  18 +-
 .../src/ReactFiberReconciler.old.js           |  18 +-
 .../src/ReactFiberRoot.new.js                 |  14 +-
 .../src/ReactFiberRoot.old.js                 |  14 +-
 .../src/ReactFiberShellHydration.js           |  19 ---
 .../src/ReactFiberWorkLoop.new.js             |  80 +++++----
 .../src/ReactFiberWorkLoop.old.js             |  80 +++++----
 .../src/ReactInternalTypes.js                 |   2 +
 .../ReactFiberHostContext-test.internal.js    |   2 +
 .../src/ReactTestRenderer.js                  |   1 +
 26 files changed, 288 insertions(+), 562 deletions(-)
 delete mode 100644 packages/react-reconciler/src/ReactFiberShellHydration.js

diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
index 44cdf4f240a2..9d1b6a16c203 100644
--- a/packages/react-art/src/ReactART.js
+++ b/packages/react-art/src/ReactART.js
@@ -69,6 +69,7 @@ class Surface extends React.Component {
     this._mountNode = createContainer(
       this._surface,
       LegacyRoot,
+      false,
       null,
       false,
       false,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
index 3584715f91e2..f3ff64daeec4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -9,7 +9,6 @@
 
 let JSDOM;
 let React;
-let startTransition;
 let ReactDOMClient;
 let Scheduler;
 let clientAct;
@@ -34,8 +33,6 @@ describe('ReactDOMFizzShellHydration', () => {
     ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
 
-    startTransition = React.startTransition;
-
     textCache = new Map();
 
     // Test Environment
@@ -217,36 +214,7 @@ describe('ReactDOMFizzShellHydration', () => {
     expect(container.textContent).toBe('Shell');
   });
 
-  test(
-    '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);
-      });
-      expect(Scheduler).toHaveYielded(['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" />);
-        });
-      });
-      expect(Scheduler).toHaveYielded(['Initial', 'Updated']);
-      expect(container.textContent).toBe('Updated');
-    },
-  );
-
-  test('updating the root while the shell is suspended forces a client render', async () => {
+  test('updating the root before the shell hydrates forces a client render', async () => {
     function App() {
       return <AsyncText text="Shell" />;
     }
@@ -277,9 +245,9 @@ describe('ReactDOMFizzShellHydration', () => {
       root.render(<Text text="New screen" />);
     });
     expect(Scheduler).toHaveYielded([
-      'New screen',
       'This root received an early update, before anything was able ' +
         'hydrate. Switched the entire root to client rendering.',
+      'New screen',
     ]);
     expect(container.textContent).toBe('New screen');
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 9d6a38188376..df693b878499 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -253,15 +253,6 @@ describe('ReactDOMRoot', () => {
     );
   });
 
-  it('callback passed to legacy hydrate() API', () => {
-    container.innerHTML = '<div>Hi</div>';
-    ReactDOM.hydrate(<div>Hi</div>, container, () => {
-      Scheduler.unstable_yieldValue('callback');
-    });
-    expect(container.textContent).toEqual('Hi');
-    expect(Scheduler).toHaveYielded(['callback']);
-  });
-
   it('warns when unmounting with legacy API (no previous content)', () => {
     const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index af0e35e128bd..3b751405a303 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -27,7 +27,6 @@ import {
 
 import {
   createContainer,
-  createHydrationContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
   flushSync,
@@ -110,81 +109,34 @@ function noopOnRecoverableError() {
 
 function legacyCreateRootFromDOMContainer(
   container: Container,
-  initialChildren: ReactNodeList,
-  parentComponent: ?React$Component<any, any>,
-  callback: ?Function,
-  isHydrationContainer: boolean,
+  forceHydrate: boolean,
 ): FiberRoot {
-  if (isHydrationContainer) {
-    if (typeof callback === 'function') {
-      const originalCallback = callback;
-      callback = function() {
-        const instance = getPublicRootInstance(root);
-        originalCallback.call(instance);
-      };
-    }
-
-    const root = createHydrationContainer(
-      initialChildren,
-      callback,
-      container,
-      LegacyRoot,
-      null, // hydrationCallbacks
-      false, // isStrictMode
-      false, // concurrentUpdatesByDefaultOverride,
-      '', // identifierPrefix
-      noopOnRecoverableError,
-      // TODO(luna) Support hydration later
-      null,
-    );
-    container._reactRootContainer = root;
-    markContainerAsRoot(root.current, container);
-
-    const rootContainerElement =
-      container.nodeType === COMMENT_NODE ? container.parentNode : container;
-    listenToAllSupportedEvents(rootContainerElement);
-
-    flushSync();
-    return root;
-  } else {
-    // First clear any existing content.
+  // First clear any existing content.
+  if (!forceHydrate) {
     let rootSibling;
     while ((rootSibling = container.lastChild)) {
       container.removeChild(rootSibling);
     }
+  }
 
-    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
-      noopOnRecoverableError, // onRecoverableError
-      null, // transitionCallbacks
-    );
-    container._reactRootContainer = root;
-    markContainerAsRoot(root.current, container);
-
-    const rootContainerElement =
-      container.nodeType === COMMENT_NODE ? container.parentNode : container;
-    listenToAllSupportedEvents(rootContainerElement);
+  const root = createContainer(
+    container,
+    LegacyRoot,
+    forceHydrate,
+    null, // hydrationCallbacks
+    false, // isStrictMode
+    false, // concurrentUpdatesByDefaultOverride,
+    '', // identifierPrefix
+    noopOnRecoverableError, // onRecoverableError
+    null, // transitionCallbacks
+  );
+  markContainerAsRoot(root.current, container);
 
-    // Initial mount should not be batched.
-    flushSync(() => {
-      updateContainer(initialChildren, root, parentComponent, callback);
-    });
+  const rootContainerElement =
+    container.nodeType === COMMENT_NODE ? container.parentNode : container;
+  listenToAllSupportedEvents(rootContainerElement);
 
-    return root;
-  }
+  return root;
 }
 
 function warnOnInvalidCallback(callback: mixed, callerName: string): void {
@@ -212,30 +164,39 @@ function legacyRenderSubtreeIntoContainer(
     warnOnInvalidCallback(callback === undefined ? null : callback, 'render');
   }
 
-  const maybeRoot = container._reactRootContainer;
-  let root: FiberRoot;
-  if (!maybeRoot) {
+  let root = container._reactRootContainer;
+  let fiberRoot: FiberRoot;
+  if (!root) {
     // Initial mount
-    root = legacyCreateRootFromDOMContainer(
+    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
       container,
-      children,
-      parentComponent,
-      callback,
       forceHydrate,
     );
+    fiberRoot = root;
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function() {
+        const instance = getPublicRootInstance(fiberRoot);
+        originalCallback.call(instance);
+      };
+    }
+    // Initial mount should not be batched.
+    flushSync(() => {
+      updateContainer(children, fiberRoot, parentComponent, callback);
+    });
   } else {
-    root = maybeRoot;
+    fiberRoot = root;
     if (typeof callback === 'function') {
       const originalCallback = callback;
       callback = function() {
-        const instance = getPublicRootInstance(root);
+        const instance = getPublicRootInstance(fiberRoot);
         originalCallback.call(instance);
       };
     }
     // Update
-    updateContainer(children, root, parentComponent, callback);
+    updateContainer(children, fiberRoot, parentComponent, callback);
   }
-  return getPublicRootInstance(root);
+  return getPublicRootInstance(fiberRoot);
 }
 
 export function findDOMNode(
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 6e7192ae1045..d71de3bb0c26 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -225,6 +225,7 @@ export function createRoot(
   const root = createContainer(
     container,
     ConcurrentRoot,
+    false,
     null,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -301,7 +302,6 @@ export function hydrateRoot(
 
   const root = createHydrationContainer(
     initialChildren,
-    null,
     container,
     ConcurrentRoot,
     hydrationCallbacks,
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index e2974586ec6a..f8b8231f8f40 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -53,7 +53,6 @@ import {
   setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
 
 const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -387,7 +386,7 @@ export function findInstanceBlockingEvent(
         targetInst = null;
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (isRootDehydrated(root)) {
+        if (root.isDehydrated) {
           // If this happens during a replay something went wrong and it might block
           // the whole system.
           return getContainerFromFiber(nearestMounted);
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 9de82a99a7be..744f5dfda9d9 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -39,7 +39,6 @@ import {
 } from '../client/ReactDOMComponentTree';
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
-import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
 
 let _attemptSynchronousHydration: (fiber: Object) => void;
 
@@ -415,7 +414,7 @@ function attemptExplicitHydrationTarget(
         }
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (isRootDehydrated(root)) {
+        if (root.isDehydrated) {
           queuedTarget.blockedOn = getContainerFromFiber(nearestMounted);
           // We don't currently have a way to increase the priority of
           // a root other than sync.
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index e08a98653fb6..127b20fd5dac 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -215,6 +215,7 @@ function render(
     root = createContainer(
       containerTag,
       concurrentRoot ? ConcurrentRoot : LegacyRoot,
+      false,
       null,
       false,
       null,
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index e751195dda00..1dca2cd7a1d9 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -211,6 +211,7 @@ function render(
     root = createContainer(
       containerTag,
       LegacyRoot,
+      false,
       null,
       false,
       null,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 8e4050dcfa33..e0ba72076a1a 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -974,6 +974,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         root = NoopRenderer.createContainer(
           container,
           tag,
+          false,
           null,
           null,
           false,
@@ -995,6 +996,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const fiberRoot = NoopRenderer.createContainer(
         container,
         ConcurrentRoot,
+        false,
         null,
         null,
         false,
@@ -1027,6 +1029,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const fiberRoot = NoopRenderer.createContainer(
         container,
         LegacyRoot,
+        false,
         null,
         null,
         false,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 7dc29bd2b0f0..4bae5d0b7b98 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -7,11 +7,7 @@
  * @flow
  */
 
-import type {
-  ReactProviderType,
-  ReactContext,
-  ReactNodeList,
-} from 'shared/ReactTypes';
+import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -33,7 +29,6 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
-import type {RootState} from './ReactFiberRoot.new';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
@@ -1316,7 +1311,7 @@ function pushHostRootContext(workInProgress) {
 
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
-  const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
+  const updateQueue = workInProgress.updateQueue;
 
   if (current === null || updateQueue === null) {
     throw new Error(
@@ -1331,7 +1326,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
-  const nextState: RootState = workInProgress.memoizedState;
+  const nextState = workInProgress.memoizedState;
 
   const root: FiberRoot = workInProgress.stateNode;
 
@@ -1346,130 +1341,64 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   }
 
   if (enableTransitionTracing) {
-    // FIXME: Slipped past code review. This is not a safe mutation:
-    // workInProgress.memoizedState is a shared object. Need to fix before
-    // rolling out the Transition Tracing experiment.
     workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
   }
 
   // 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.
-    if (workInProgress.flags & ForceClientRender) {
-      // Something errored during a previous attempt to hydrate the shell, so we
-      // forced a client render.
-      const recoverableError = new Error(
-        'There was an error while hydrating. Because the error happened outside ' +
-          'of a Suspense boundary, the entire root will switch to ' +
-          'client rendering.',
-      );
-      return mountHostRootWithoutHydrating(
-        current,
-        workInProgress,
-        updateQueue,
-        nextState,
-        nextChildren,
-        renderLanes,
-        recoverableError,
-      );
-    } else if (nextChildren !== prevChildren) {
-      const recoverableError = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
-      );
-      return mountHostRootWithoutHydrating(
-        current,
-        workInProgress,
-        updateQueue,
-        nextState,
-        nextChildren,
-        renderLanes,
-        recoverableError,
-      );
-    } else {
-      // The outermost shell has not hydrated yet. Start hydrating.
-      enterHydrationState(workInProgress);
-      if (supportsHydration) {
-        const mutableSourceEagerHydrationData =
-          root.mutableSourceEagerHydrationData;
-        if (mutableSourceEagerHydrationData != null) {
-          for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-            const mutableSource = ((mutableSourceEagerHydrationData[
-              i
-            ]: any): MutableSource<any>);
-            const version = mutableSourceEagerHydrationData[i + 1];
-            setWorkInProgressVersion(mutableSource, version);
-          }
+  if (nextChildren === prevChildren) {
+    resetHydrationState();
+    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+  }
+  if (root.isDehydrated && enterHydrationState(workInProgress)) {
+    // If we don't have any current children this might be the first pass.
+    // We always try to hydrate. If this isn't a hydration pass there won't
+    // be any children to hydrate which is effectively the same thing as
+    // not hydrating.
+
+    if (supportsHydration) {
+      const mutableSourceEagerHydrationData =
+        root.mutableSourceEagerHydrationData;
+      if (mutableSourceEagerHydrationData != null) {
+        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+          const mutableSource = ((mutableSourceEagerHydrationData[
+            i
+          ]: any): MutableSource<any>);
+          const version = mutableSourceEagerHydrationData[i + 1];
+          setWorkInProgressVersion(mutableSource, version);
         }
       }
+    }
 
-      const child = mountChildFibers(
-        workInProgress,
-        null,
-        nextChildren,
-        renderLanes,
-      );
-      workInProgress.child = child;
+    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;
-      }
+    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);
-    }
+    // Otherwise reset hydration state in case we aborted and resumed another
+    // root.
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    resetHydrationState();
   }
   return workInProgress.child;
 }
 
-function mountHostRootWithoutHydrating(
-  current: Fiber,
-  workInProgress: Fiber,
-  updateQueue: UpdateQueue<RootState>,
-  nextState: RootState,
-  nextChildren: ReactNodeList,
-  renderLanes: Lanes,
-  recoverableError: Error,
-) {
-  // Revert to client rendering.
-  resetHydrationState();
-
-  queueHydrationError(recoverableError);
-
-  workInProgress.flags |= ForceClientRender;
-
-  // 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,
-    transitions: nextState.transitions,
-  };
-  // `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;
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
-}
-
 function updateHostComponent(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 206773b03b33..583539dd08b5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -7,11 +7,7 @@
  * @flow
  */
 
-import type {
-  ReactProviderType,
-  ReactContext,
-  ReactNodeList,
-} from 'shared/ReactTypes';
+import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -33,7 +29,6 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
-import type {RootState} from './ReactFiberRoot.old';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
@@ -1316,7 +1311,7 @@ function pushHostRootContext(workInProgress) {
 
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
-  const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
+  const updateQueue = workInProgress.updateQueue;
 
   if (current === null || updateQueue === null) {
     throw new Error(
@@ -1331,7 +1326,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
-  const nextState: RootState = workInProgress.memoizedState;
+  const nextState = workInProgress.memoizedState;
 
   const root: FiberRoot = workInProgress.stateNode;
 
@@ -1346,130 +1341,64 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   }
 
   if (enableTransitionTracing) {
-    // FIXME: Slipped past code review. This is not a safe mutation:
-    // workInProgress.memoizedState is a shared object. Need to fix before
-    // rolling out the Transition Tracing experiment.
     workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
   }
 
   // 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.
-    if (workInProgress.flags & ForceClientRender) {
-      // Something errored during a previous attempt to hydrate the shell, so we
-      // forced a client render.
-      const recoverableError = new Error(
-        'There was an error while hydrating. Because the error happened outside ' +
-          'of a Suspense boundary, the entire root will switch to ' +
-          'client rendering.',
-      );
-      return mountHostRootWithoutHydrating(
-        current,
-        workInProgress,
-        updateQueue,
-        nextState,
-        nextChildren,
-        renderLanes,
-        recoverableError,
-      );
-    } else if (nextChildren !== prevChildren) {
-      const recoverableError = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
-      );
-      return mountHostRootWithoutHydrating(
-        current,
-        workInProgress,
-        updateQueue,
-        nextState,
-        nextChildren,
-        renderLanes,
-        recoverableError,
-      );
-    } else {
-      // The outermost shell has not hydrated yet. Start hydrating.
-      enterHydrationState(workInProgress);
-      if (supportsHydration) {
-        const mutableSourceEagerHydrationData =
-          root.mutableSourceEagerHydrationData;
-        if (mutableSourceEagerHydrationData != null) {
-          for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-            const mutableSource = ((mutableSourceEagerHydrationData[
-              i
-            ]: any): MutableSource<any>);
-            const version = mutableSourceEagerHydrationData[i + 1];
-            setWorkInProgressVersion(mutableSource, version);
-          }
+  if (nextChildren === prevChildren) {
+    resetHydrationState();
+    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
+  }
+  if (root.isDehydrated && enterHydrationState(workInProgress)) {
+    // If we don't have any current children this might be the first pass.
+    // We always try to hydrate. If this isn't a hydration pass there won't
+    // be any children to hydrate which is effectively the same thing as
+    // not hydrating.
+
+    if (supportsHydration) {
+      const mutableSourceEagerHydrationData =
+        root.mutableSourceEagerHydrationData;
+      if (mutableSourceEagerHydrationData != null) {
+        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+          const mutableSource = ((mutableSourceEagerHydrationData[
+            i
+          ]: any): MutableSource<any>);
+          const version = mutableSourceEagerHydrationData[i + 1];
+          setWorkInProgressVersion(mutableSource, version);
         }
       }
+    }
 
-      const child = mountChildFibers(
-        workInProgress,
-        null,
-        nextChildren,
-        renderLanes,
-      );
-      workInProgress.child = child;
+    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;
-      }
+    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);
-    }
+    // Otherwise reset hydration state in case we aborted and resumed another
+    // root.
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    resetHydrationState();
   }
   return workInProgress.child;
 }
 
-function mountHostRootWithoutHydrating(
-  current: Fiber,
-  workInProgress: Fiber,
-  updateQueue: UpdateQueue<RootState>,
-  nextState: RootState,
-  nextChildren: ReactNodeList,
-  renderLanes: Lanes,
-  recoverableError: Error,
-) {
-  // Revert to client rendering.
-  resetHydrationState();
-
-  queueHydrationError(recoverableError);
-
-  workInProgress.flags |= ForceClientRender;
-
-  // 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,
-    transitions: nextState.transitions,
-  };
-  // `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;
-  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-  return workInProgress.child;
-}
-
 function updateHostComponent(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 776c402a00eb..75553555b928 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -25,7 +25,6 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
-import type {RootState} from './ReactFiberRoot.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -1878,12 +1877,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case HostRoot: {
         if (supportsHydration) {
-          if (current !== null) {
-            const prevRootState: RootState = current.memoizedState;
-            if (prevRootState.isDehydrated) {
-              const root: FiberRoot = finishedWork.stateNode;
-              commitHydratedContainer(root.containerInfo);
-            }
+          const root: FiberRoot = finishedWork.stateNode;
+          if (root.isDehydrated) {
+            // We've just hydrated. No need to hydrate again.
+            root.isDehydrated = false;
+            commitHydratedContainer(root.containerInfo);
           }
         }
         break;
@@ -1987,12 +1985,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case HostRoot: {
       if (supportsHydration) {
-        if (current !== null) {
-          const prevRootState: RootState = current.memoizedState;
-          if (prevRootState.isDehydrated) {
-            const root: FiberRoot = finishedWork.stateNode;
-            commitHydratedContainer(root.containerInfo);
-          }
+        const root: FiberRoot = finishedWork.stateNode;
+        if (root.isDehydrated) {
+          // We've just hydrated. No need to hydrate again.
+          root.isDehydrated = false;
+          commitHydratedContainer(root.containerInfo);
         }
       }
       return;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index a53d4a2a8752..23e9d6070c9a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -25,7 +25,6 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
-import type {RootState} from './ReactFiberRoot.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -1878,12 +1877,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case HostRoot: {
         if (supportsHydration) {
-          if (current !== null) {
-            const prevRootState: RootState = current.memoizedState;
-            if (prevRootState.isDehydrated) {
-              const root: FiberRoot = finishedWork.stateNode;
-              commitHydratedContainer(root.containerInfo);
-            }
+          const root: FiberRoot = finishedWork.stateNode;
+          if (root.isDehydrated) {
+            // We've just hydrated. No need to hydrate again.
+            root.isDehydrated = false;
+            commitHydratedContainer(root.containerInfo);
           }
         }
         break;
@@ -1987,12 +1985,11 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case HostRoot: {
       if (supportsHydration) {
-        if (current !== null) {
-          const prevRootState: RootState = current.memoizedState;
-          if (prevRootState.isDehydrated) {
-            const root: FiberRoot = finishedWork.stateNode;
-            commitHydratedContainer(root.containerInfo);
-          }
+        const root: FiberRoot = finishedWork.stateNode;
+        if (root.isDehydrated) {
+          // We've just hydrated. No need to hydrate again.
+          root.isDehydrated = false;
+          commitHydratedContainer(root.containerInfo);
         }
       }
       return;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index bea984c19f1c..2a44cf94a14a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -8,7 +8,6 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {RootState} from './ReactFiberRoot.new';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {
   ReactScopeInstance,
@@ -891,29 +890,12 @@ function completeWork(
           // 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();
-            }
-          }
+        } else if (!fiberRoot.isDehydrated) {
+          // 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;
         }
       }
       updateHostContainer(current, workInProgress);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index ef3d4f7979f2..f02a20222d0f 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -8,7 +8,6 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
-import type {RootState} from './ReactFiberRoot.old';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {
   ReactScopeInstance,
@@ -891,29 +890,12 @@ function completeWork(
           // 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();
-            }
-          }
+        } else if (!fiberRoot.isDehydrated) {
+          // 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;
         }
       }
       updateHostContainer(current, workInProgress);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 849470551a2b..8607b227e9b4 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -48,7 +48,6 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.new';
 import {createFiberRoot} from './ReactFiberRoot.new';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   injectInternals,
   markRenderScheduled,
@@ -246,6 +245,9 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
+  // TODO: We can remove hydration-specific stuff from createContainer once
+  // we delete legacy mode. The new root API uses createHydrationContainer.
+  hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -253,13 +255,10 @@ export function createContainer(
   onRecoverableError: (error: mixed) => void,
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
-  const hydrate = false;
-  const initialChildren = null;
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
-    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -271,8 +270,6 @@ export function createContainer(
 
 export function createHydrationContainer(
   initialChildren: ReactNodeList,
-  // TODO: Remove `callback` when we delete legacy mode.
-  callback: ?Function,
   containerInfo: Container,
   tag: RootTag,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
@@ -287,7 +284,6 @@ export function createHydrationContainer(
     containerInfo,
     tag,
     hydrate,
-    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -306,9 +302,9 @@ export function createHydrationContainer(
   const eventTime = requestEventTime();
   const lane = requestUpdateLane(current);
   const update = createUpdate(eventTime, lane);
-  update.payload = {isDehydrated: false};
-  update.callback =
-    callback !== undefined && callback !== null ? callback : null;
+  // Caution: React DevTools currently depends on this property
+  // being called "element".
+  update.payload = {element: initialChildren};
   enqueueUpdate(current, update, lane);
   scheduleInitialHydrationOnRoot(root, lane, eventTime);
 
@@ -413,7 +409,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (isRootDehydrated(root)) {
+      if (root.isDehydrated) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index f7166095ba13..4970b685b1c1 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -48,7 +48,6 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.old';
 import {createFiberRoot} from './ReactFiberRoot.old';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   injectInternals,
   markRenderScheduled,
@@ -246,6 +245,9 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
+  // TODO: We can remove hydration-specific stuff from createContainer once
+  // we delete legacy mode. The new root API uses createHydrationContainer.
+  hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -253,13 +255,10 @@ export function createContainer(
   onRecoverableError: (error: mixed) => void,
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
-  const hydrate = false;
-  const initialChildren = null;
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
-    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -271,8 +270,6 @@ export function createContainer(
 
 export function createHydrationContainer(
   initialChildren: ReactNodeList,
-  // TODO: Remove `callback` when we delete legacy mode.
-  callback: ?Function,
   containerInfo: Container,
   tag: RootTag,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
@@ -287,7 +284,6 @@ export function createHydrationContainer(
     containerInfo,
     tag,
     hydrate,
-    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -306,9 +302,9 @@ export function createHydrationContainer(
   const eventTime = requestEventTime();
   const lane = requestUpdateLane(current);
   const update = createUpdate(eventTime, lane);
-  update.payload = {isDehydrated: false};
-  update.callback =
-    callback !== undefined && callback !== null ? callback : null;
+  // Caution: React DevTools currently depends on this property
+  // being called "element".
+  update.payload = {element: initialChildren};
   enqueueUpdate(current, update, lane);
   scheduleInitialHydrationOnRoot(root, lane, eventTime);
 
@@ -413,7 +409,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (isRootDehydrated(root)) {
+      if (root.isDehydrated) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 7ff03ceead0e..00dd694be4f5 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   SuspenseHydrationCallbacks,
@@ -40,8 +39,7 @@ import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
 export type RootState = {
   element: any,
-  isDehydrated: boolean,
-  cache: Cache,
+  cache: Cache | null,
   transitions: Transitions | null,
 };
 
@@ -61,6 +59,7 @@ function FiberRootNode(
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
+  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
@@ -129,7 +128,6 @@ export function createFiberRoot(
   containerInfo: any,
   tag: RootTag,
   hydrate: boolean,
-  initialChildren: ReactNodeList,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -180,17 +178,15 @@ export function createFiberRoot(
     root.pooledCache = initialCache;
     retainCache(initialCache);
     const initialState: RootState = {
-      element: initialChildren,
-      isDehydrated: hydrate,
+      element: null,
       cache: initialCache,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
-      element: initialChildren,
-      isDehydrated: hydrate,
-      cache: (null: any), // not enabled yet
+      element: null,
+      cache: null,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 179b9c17ae41..1e561e49facb 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   SuspenseHydrationCallbacks,
@@ -40,8 +39,7 @@ import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
 export type RootState = {
   element: any,
-  isDehydrated: boolean,
-  cache: Cache,
+  cache: Cache | null,
   transitions: Transitions | null,
 };
 
@@ -61,6 +59,7 @@ function FiberRootNode(
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
+  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
@@ -129,7 +128,6 @@ export function createFiberRoot(
   containerInfo: any,
   tag: RootTag,
   hydrate: boolean,
-  initialChildren: ReactNodeList,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -180,17 +178,15 @@ export function createFiberRoot(
     root.pooledCache = initialCache;
     retainCache(initialCache);
     const initialState: RootState = {
-      element: initialChildren,
-      isDehydrated: hydrate,
+      element: null,
       cache: initialCache,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
-      element: initialChildren,
-      isDehydrated: hydrate,
-      cache: (null: any), // not enabled yet
+      element: null,
+      cache: null,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
diff --git a/packages/react-reconciler/src/ReactFiberShellHydration.js b/packages/react-reconciler/src/ReactFiberShellHydration.js
deleted file mode 100644
index caadb978f69d..000000000000
--- a/packages/react-reconciler/src/ReactFiberShellHydration.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {FiberRoot} from './ReactInternalTypes';
-import type {RootState} from './ReactFiberRoot.new';
-
-// 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) {
-  const currentState: RootState = root.current.memoizedState;
-  return currentState.isDehydrated;
-}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 558440effa77..7223ad7d052b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -88,7 +88,6 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.new';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -110,7 +109,6 @@ import {
   StoreConsistency,
   HostEffectMask,
   Hydrating,
-  ForceClientRender,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
@@ -583,7 +581,34 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (root === workInProgressRoot) {
+    if (root.isDehydrated && root.tag !== LegacyRoot) {
+      // This root's shell hasn't hydrated yet. Revert to client rendering.
+      if (workInProgressRoot === root) {
+        // If this happened during an interleaved event, interrupt the
+        // in-progress hydration. Theoretically, we could attempt to force a
+        // synchronous hydration before switching to client rendering, but the
+        // most common reason the shell hasn't hydrated yet is because it
+        // suspended. So it's very likely to suspend again anyway. For
+        // simplicity, we'll skip that atttempt and go straight to
+        // client rendering.
+        //
+        // Another way to model this would be to give the initial hydration its
+        // own special lane. However, it may not be worth adding a lane solely
+        // for this purpose, so we'll wait until we find another use case before
+        // adding it.
+        //
+        // TODO: Consider only interrupting hydration if the priority of the
+        // update is higher than default.
+        prepareFreshStack(root, NoLanes);
+      }
+      root.isDehydrated = false;
+      const error = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      const onRecoverableError = root.onRecoverableError;
+      onRecoverableError(error);
+    } else if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
       // Received an update to a tree that's in the middle of rendering. Mark
@@ -991,42 +1016,28 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // 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;
-
-  if (isRootDehydrated(root)) {
-    // 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;
+  if (root.isDehydrated) {
+    root.isDehydrated = false;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
+    const error = new Error(
+      'There was an error while hydrating. Because the error happened outside ' +
+        'of a Suspense boundary, the entire root will switch to ' +
+        'client rendering.',
+    );
+    renderDidError(error);
   }
 
+  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
   if (exitStatus !== RootErrored) {
     // Successfully finished rendering on retry
-
-    // 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);
+    if (errorsFromFirstAttempt !== null) {
+      // 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.
+      queueRecoverableErrors(errorsFromFirstAttempt);
     }
   } else {
     // The UI failed to recover.
@@ -1442,7 +1453,7 @@ export function popRenderLanes(fiber: Fiber) {
   popFromStack(subtreeRenderLanesCursor, fiber);
 }
 
-function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
+function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
@@ -1468,8 +1479,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
     }
   }
   workInProgressRoot = root;
-  const rootWorkInProgress = createWorkInProgress(root.current, null);
-  workInProgress = rootWorkInProgress;
+  workInProgress = createWorkInProgress(root.current, null);
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
@@ -1485,8 +1495,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
-
-  return rootWorkInProgress;
 }
 
 function handleError(root, thrownValue): void {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c1c090d82b0b..d8bb6b16e29f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -88,7 +88,6 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.old';
-import {isRootDehydrated} from './ReactFiberShellHydration';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -110,7 +109,6 @@ import {
   StoreConsistency,
   HostEffectMask,
   Hydrating,
-  ForceClientRender,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
@@ -583,7 +581,34 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (root === workInProgressRoot) {
+    if (root.isDehydrated && root.tag !== LegacyRoot) {
+      // This root's shell hasn't hydrated yet. Revert to client rendering.
+      if (workInProgressRoot === root) {
+        // If this happened during an interleaved event, interrupt the
+        // in-progress hydration. Theoretically, we could attempt to force a
+        // synchronous hydration before switching to client rendering, but the
+        // most common reason the shell hasn't hydrated yet is because it
+        // suspended. So it's very likely to suspend again anyway. For
+        // simplicity, we'll skip that atttempt and go straight to
+        // client rendering.
+        //
+        // Another way to model this would be to give the initial hydration its
+        // own special lane. However, it may not be worth adding a lane solely
+        // for this purpose, so we'll wait until we find another use case before
+        // adding it.
+        //
+        // TODO: Consider only interrupting hydration if the priority of the
+        // update is higher than default.
+        prepareFreshStack(root, NoLanes);
+      }
+      root.isDehydrated = false;
+      const error = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      const onRecoverableError = root.onRecoverableError;
+      onRecoverableError(error);
+    } else if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
       // Received an update to a tree that's in the middle of rendering. Mark
@@ -991,42 +1016,28 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // 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;
-
-  if (isRootDehydrated(root)) {
-    // 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;
+  if (root.isDehydrated) {
+    root.isDehydrated = false;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
+    const error = new Error(
+      'There was an error while hydrating. Because the error happened outside ' +
+        'of a Suspense boundary, the entire root will switch to ' +
+        'client rendering.',
+    );
+    renderDidError(error);
   }
 
+  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
   if (exitStatus !== RootErrored) {
     // Successfully finished rendering on retry
-
-    // 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);
+    if (errorsFromFirstAttempt !== null) {
+      // 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.
+      queueRecoverableErrors(errorsFromFirstAttempt);
     }
   } else {
     // The UI failed to recover.
@@ -1442,7 +1453,7 @@ export function popRenderLanes(fiber: Fiber) {
   popFromStack(subtreeRenderLanesCursor, fiber);
 }
 
-function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
+function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
@@ -1468,8 +1479,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
     }
   }
   workInProgressRoot = root;
-  const rootWorkInProgress = createWorkInProgress(root.current, null);
-  workInProgress = rootWorkInProgress;
+  workInProgress = createWorkInProgress(root.current, null);
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
@@ -1485,8 +1495,6 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
-
-  return rootWorkInProgress;
 }
 
 function handleError(root, thrownValue): void {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 1fa3d4b6680d..dd2e09c03b21 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -213,6 +213,8 @@ type BaseFiberRootProperties = {|
   // Top context object, used by renderSubtreeIntoContainer
   context: Object | null,
   pendingContext: Object | null,
+  // Determines if we should attempt to hydrate on the initial mount
+  +isDehydrated: boolean,
 
   // Used by useMutableSource hook to avoid tearing during hydration.
   mutableSourceEagerHydrationData?: Array<
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 82e23de9965d..d0c3d5b236ea 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -72,6 +72,7 @@ describe('ReactFiberHostContext', () => {
     const container = Renderer.createContainer(
       /* root: */ null,
       ConcurrentRoot,
+      false,
       null,
       false,
       '',
@@ -135,6 +136,7 @@ describe('ReactFiberHostContext', () => {
     const container = Renderer.createContainer(
       rootContext,
       ConcurrentRoot,
+      false,
       null,
       false,
       '',
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 76911d701de7..e850086439a6 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -473,6 +473,7 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
   let root: FiberRoot | null = createContainer(
     container,
     isConcurrent ? ConcurrentRoot : LegacyRoot,
+    false,
     null,
     isStrictMode,
     concurrentUpdatesByDefault,

From 796724086a8a64100abf8bbc848a07daeb37777d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Sat, 12 Mar 2022 13:34:55 -0500
Subject: [PATCH 1205/1603] Match select value against primitives to string but
 not undefined (#24077)

---
 .../ReactDOMServerIntegrationSelect-test.js   | 30 +++++++++++++++++++
 .../src/server/ReactDOMServerFormatConfig.js  | 11 +++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
index 1ad9b0bb6454..6729f994fdaf 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationSelect-test.js
@@ -246,4 +246,34 @@ describe('ReactDOMServerIntegrationSelect', () => {
       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>,
+        1,
+      );
+      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>,
+        1,
+      );
+      expect(e.firstChild.selected).toBe(true);
+      expect(e.lastChild.selected).toBe(false);
+    },
+  );
 });
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 7cc5c72a16e5..a42cb3188722 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -749,7 +749,7 @@ function pushStartOption(
     }
   }
 
-  if (selectedValue !== null) {
+  if (selectedValue != null) {
     let stringValue;
     if (value !== null) {
       if (__DEV__) {
@@ -782,8 +782,13 @@ function pushStartOption(
           break;
         }
       }
-    } else if (selectedValue === stringValue) {
-      target.push(selectedMarkerAttribute);
+    } else {
+      if (__DEV__) {
+        checkAttributeStringCoercion(selectedValue, 'select.value');
+      }
+      if ('' + selectedValue === stringValue) {
+        target.push(selectedMarkerAttribute);
+      }
     }
   } else if (selected) {
     target.push(selectedMarkerAttribute);

From 061ac27bc9c30e758301d9db823677a0803938c8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 12 Mar 2022 19:21:58 -0500
Subject: [PATCH 1206/1603] Fix use of hydrateRoot in DevTools test (#24084)

I noticed while working on a different PR that this test was not
using hydrateRoot correctly. You're meant to pass the initial children
as the second argument.
---
 .../src/__tests__/inspectedElement-test.js                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index b09a54888657..3060d2c325fc 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2099,7 +2099,7 @@ describe('InspectedElement', () => {
     await utils.actAsync(() => {
       const container = document.createElement('div');
       container.innerHTML = '<div></div>';
-      ReactDOMClient.hydrateRoot(container).render(<Example />);
+      ReactDOMClient.hydrateRoot(container, <Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);

From 2bf7c02f0ecddff385f8acb9c797e65884f1a3b3 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 14 Mar 2022 14:17:37 +0100
Subject: [PATCH 1207/1603] Don't hide console error|warn in
 inspectedElement-test (#24086)

---
 .../src/__tests__/inspectedElement-test.js       | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 3060d2c325fc..e6f8c3277d3a 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -459,7 +459,7 @@ describe('InspectedElement', () => {
     const prevInspectedElement = inspectedElement;
 
     // This test causes an intermediate error to be logged but we can ignore it.
-    console.error = () => {};
+    jest.spyOn(console, 'error').mockImplementation(() => {});
 
     // Wait for our check-for-updates poll to get the new data.
     jest.runOnlyPendingTimers();
@@ -2804,16 +2804,18 @@ describe('InspectedElement', () => {
       );
 
       // Suppress expected error and warning.
-      const originalError = console.error;
-      const originalWarn = console.warn;
-      console.error = () => {};
-      console.warn = () => {};
+      const consoleErrorMock = jest
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+      const consoleWarnMock = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {});
 
       // now force error state on <Example />
       await toggleError(true);
 
-      console.error = originalError;
-      console.warn = originalWarn;
+      consoleErrorMock.mockRestore();
+      consoleWarnMock.mockRestore();
 
       // we are in error state now, <Example /> won't show up
       withErrorsOrWarningsIgnored(['Invalid index'], () => {

From 43eb28339a0dc645c27b36f06200da63d57c292f Mon Sep 17 00:00:00 2001
From: Luna <lunaleaps@gmail.com>
Date: Mon, 14 Mar 2022 10:59:21 -0700
Subject: [PATCH 1208/1603] Add skipBubbling property to dispatch config
 (#23366)

---
 .../src/ReactNativeBridgeEventPlugin.js       |  44 +++++++-
 .../src/ReactNativeTypes.js                   |   1 +
 .../__tests__/ReactFabric-test.internal.js    | 100 ++++++++++++++++++
 .../legacy-events/ReactSyntheticEventType.js  |   2 +
 .../ReactNativeViewConfigRegistry.js          |   1 +
 5 files changed, 143 insertions(+), 5 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
index 2d74776e4200..f3ce8a49c28f 100644
--- a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
+++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js
@@ -89,7 +89,12 @@ function getParent(inst) {
 /**
  * Simulates the traversal of a two-phase, capture/bubble event dispatch.
  */
-export function traverseTwoPhase(inst: Object, fn: Function, arg: Function) {
+export function traverseTwoPhase(
+  inst: Object,
+  fn: Function,
+  arg: Function,
+  skipBubbling: boolean,
+) {
   const path = [];
   while (inst) {
     path.push(inst);
@@ -99,14 +104,24 @@ export function traverseTwoPhase(inst: Object, fn: Function, arg: Function) {
   for (i = path.length; i-- > 0; ) {
     fn(path[i], 'captured', arg);
   }
-  for (i = 0; i < path.length; i++) {
-    fn(path[i], 'bubbled', 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);
+    }
   }
 }
 
 function accumulateTwoPhaseDispatchesSingle(event) {
   if (event && event.dispatchConfig.phasedRegistrationNames) {
-    traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
+    traverseTwoPhase(
+      event._targetInst,
+      accumulateDirectionalDispatches,
+      event,
+      false,
+    );
   }
 }
 
@@ -114,6 +129,17 @@ function accumulateTwoPhaseDispatches(events) {
   forEachAccumulated(events, accumulateTwoPhaseDispatchesSingle);
 }
 
+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
@@ -178,7 +204,15 @@ const ReactNativeBridgeEventPlugin = {
       nativeEventTarget,
     );
     if (bubbleDispatchConfig) {
-      accumulateTwoPhaseDispatches(event);
+      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 {
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 55150e83517e..ea6e5d2b41d9 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -73,6 +73,7 @@ export type ViewConfig = $ReadOnly<{
       phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
+        skipBubble?: ?boolean,
       }>,
     }>,
     ...,
diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
index 9f2851382af4..0b38424e6df8 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -633,6 +633,106 @@ describe('ReactFabric', () => {
     expect(touchStart2).toBeCalled();
   });
 
+  describe('skipBubbling', () => {
+    it('should skip bubbling to ancestor if specified', () => {
+      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 = {};
+
+      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,
+        );
+      });
+
+      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', () => {
     const View = createReactNativeComponentClass('RCTView', () => ({
       validAttributes: {
diff --git a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
index 57d019e2a398..436507b84ac1 100644
--- a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
+++ b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
@@ -16,6 +16,7 @@ export type DispatchConfig = {|
   phasedRegistrationNames: {|
     bubbled: null | string,
     captured: null | string,
+    skipBubbling?: ?boolean,
   |},
   registrationName?: string,
 |};
@@ -24,6 +25,7 @@ export type CustomDispatchConfig = {|
   phasedRegistrationNames: {|
     bubbled: null,
     captured: null,
+    skipBubbling?: ?boolean,
   |},
   registrationName?: string,
   customEvent: true,
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
index 194a91e31ae6..de5211f09be9 100644
--- a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -19,6 +19,7 @@ const customBubblingEventTypes: {
     phasedRegistrationNames: $ReadOnly<{|
       captured: string,
       bubbled: string,
+      skipBubbling?: ?boolean,
     |}>,
   |}>,
   ...,

From 63b86e19955a3f68c3e6e4928f4e5b24fd8a8342 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 15 Mar 2022 10:48:26 -0700
Subject: [PATCH 1209/1603] Disable unsupported Bridge protocol version dialog
 and add workaround for old protocol operations format (#24093)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rationale: The only case where the unsupported dialog really matters is React Naive. That's the case where the frontend and backend versions are most likely to mismatch. In React Native, the backend is likely to send the bridge protocol version before sending operations– since the agent does this proactively during initialization.

I've tested the React Native starter app– after forcefully downgrading the backend version to 4.19.1 (see #23307 (comment)) and verified that this change "fixes" things. Not only does DevTools no longer throw an error that causes the UI to be hidden– it works (meaning that the Components tree can be inspected and interacted with).
---
 .../react-devtools-core/src/standalone.js     |  4 +-
 packages/react-devtools-shared/src/bridge.js  |  3 ++
 .../src/devtools/store.js                     | 42 ++++++++++++-------
 .../views/UnsupportedBridgeProtocolDialog.js  |  8 ++--
 .../src/devtools/views/hooks.js               | 11 +++--
 5 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index c04cad1ddea0..6b598efa2244 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -11,7 +11,7 @@ import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about flushSync()
   flushSync,
-} from 'react-dom/client';
+} 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';
@@ -106,9 +106,9 @@ function safeUnmount() {
   flushSync(() => {
     if (root !== null) {
       root.unmount();
+      root = null;
     }
   });
-  root = null;
 }
 
 function reload() {
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index ecb5e66672de..0e5f837ecbc7 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -54,6 +54,9 @@ export const BRIDGE_PROTOCOL: Array<BridgeProtocol> = [
     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',
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index ddf647cc210f..f172cd6aa306 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -180,7 +180,8 @@ export default class Store extends EventEmitter<{|
   _rootSupportsBasicProfiling: boolean = false;
   _rootSupportsTimelineProfiling: boolean = false;
 
-  _unsupportedBridgeProtocol: BridgeProtocol | null = null;
+  _bridgeProtocol: BridgeProtocol | null = null;
+  _unsupportedBridgeProtocolDetected: boolean = false;
   _unsupportedRendererVersionDetected: boolean = false;
 
   // Total number of visible elements (within all roots).
@@ -375,6 +376,10 @@ export default class Store extends EventEmitter<{|
     this.emit('componentFilters');
   }
 
+  get bridgeProtocol(): BridgeProtocol | null {
+    return this._bridgeProtocol;
+  }
+
   get errorCount(): number {
     return this._cachedErrorCount;
   }
@@ -466,8 +471,8 @@ export default class Store extends EventEmitter<{|
     return this._supportsTraceUpdates;
   }
 
-  get unsupportedBridgeProtocol(): BridgeProtocol | null {
-    return this._unsupportedBridgeProtocol;
+  get unsupportedBridgeProtocolDetected(): boolean {
+    return this._unsupportedBridgeProtocolDetected;
   }
 
   get unsupportedRendererVersionDetected(): boolean {
@@ -942,11 +947,21 @@ export default class Store extends EventEmitter<{|
               (operations[i] & PROFILING_FLAG_TIMELINE_SUPPORT) !== 0;
             i++;
 
-            const supportsStrictMode = operations[i] > 0;
-            i++;
+            let supportsStrictMode = false;
+            let hasOwnerMetadata = false;
 
-            const hasOwnerMetadata = operations[i] > 0;
-            i++;
+            // 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);
@@ -1383,14 +1398,13 @@ export default class Store extends EventEmitter<{|
       this._onBridgeProtocolTimeoutID = null;
     }
 
+    this._bridgeProtocol = bridgeProtocol;
+
     if (bridgeProtocol.version !== currentBridgeProtocol.version) {
-      this._unsupportedBridgeProtocol = bridgeProtocol;
-    } else {
-      // If we should happen to get a response after timing out...
-      this._unsupportedBridgeProtocol = null;
+      // 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.
     }
-
-    this.emit('unsupportedBridgeProtocolDetected');
   };
 
   onBridgeProtocolTimeout = () => {
@@ -1398,7 +1412,7 @@ export default class Store extends EventEmitter<{|
 
     // 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._unsupportedBridgeProtocol = BRIDGE_PROTOCOL[0];
+    this._bridgeProtocol = BRIDGE_PROTOCOL[0];
 
     this.emit('unsupportedBridgeProtocolDetected');
   };
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
index d48ab40aa3ea..05f41c6211e7 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -33,20 +33,18 @@ export default function UnsupportedBridgeProtocolDialog(_: {||}) {
   useEffect(() => {
     const updateDialog = () => {
       if (!isVisible) {
-        if (store.unsupportedBridgeProtocol !== null) {
+        if (store.unsupportedBridgeProtocolDetected) {
           dispatch({
             canBeDismissed: false,
             id: MODAL_DIALOG_ID,
             type: 'SHOW',
             content: (
-              <DialogContent
-                unsupportedBridgeProtocol={store.unsupportedBridgeProtocol}
-              />
+              <DialogContent unsupportedBridgeProtocol={store.bridgeProtocol} />
             ),
           });
         }
       } else {
-        if (store.unsupportedBridgeProtocol === null) {
+        if (!store.unsupportedBridgeProtocolDetected) {
           dispatch({
             type: 'HIDE',
             id: MODAL_DIALOG_ID,
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 1a34373fc7e1..897bc928cb0a 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -239,10 +239,13 @@ export function useModalDismissSignal(
       // 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.
-      ownerDocument = ((modalRef.current: any): HTMLDivElement).ownerDocument;
-      ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
-      if (dismissOnClickOutside) {
-        ownerDocument.addEventListener('click', handleDocumentClick, true);
+      const div = modalRef.current;
+      if (div != null) {
+        ownerDocument = div.ownerDocument;
+        ownerDocument.addEventListener('keydown', handleDocumentKeyDown);
+        if (dismissOnClickOutside) {
+          ownerDocument.addEventListener('click', handleDocumentClick, true);
+        }
       }
     }, 0);
 

From ac574d68834cbe7fd053b411e32a1b7687f5a473 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 15 Mar 2022 14:13:00 -0400
Subject: [PATCH 1210/1603] React DevTools 4.24.0 -> 4.24.1 (#24100)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-timeline/package.json            | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 9 ++++++++-
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 6f03dac65d8b..14e4904c257e 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.0",
+  "version": "4.24.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 348479ff320d..3572e6964fa4 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.0",
-  "version_name": "4.24.0",
+  "version": "4.24.1",
+  "version_name": "4.24.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 4189285aa7be..3558fae6faa6 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.0",
-  "version_name": "4.24.0",
+  "version": "4.24.1",
+  "version_name": "4.24.1",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index b29d40d767b1..ec9c59bba102 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.0",
+  "version": "4.24.1",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 435f2b6ab598..a52539385ca1 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.0",
+  "version": "4.24.1",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index cb9ca857583a..788c36244c33 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.0",
+  "version": "4.24.1",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index b89fa0c098cc..bf22b1c69a41 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,13 @@
 
 ---
 
+### 4.24.1
+March 15, 2022
+
+* 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
 
@@ -951,4 +958,4 @@ Because this feature adds a small amount of overhead, it can be disabled in the
 
 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)
\ No newline at end of file
+![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/package.json b/packages/react-devtools/package.json
index f892b66373b9..5b12f46c7966 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.0",
+  "version": "4.24.1",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.0",
+    "react-devtools-core": "4.24.1",
     "update-notifier": "^2.1.0"
   }
 }

From d9677e3492f058e32468b8e728683d1d08bcba6f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 15 Mar 2022 14:21:21 -0400
Subject: [PATCH 1211/1603] Update CHANGELOG.md

---
 packages/react-devtools/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index bf22b1c69a41..b70cce8bb415 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### 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))
 
 ---

From 0412f0c1a46ef60032b70c43d55ec010f908855f Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 15 Mar 2022 16:28:50 -0400
Subject: [PATCH 1212/1603] add offscreen state node (#24026)

Add state node on Offscreen fibers with id (in preparation for transition tracing)
---
 packages/react-reconciler/src/ReactFiber.new.js            | 7 ++++++-
 packages/react-reconciler/src/ReactFiber.old.js            | 7 ++++++-
 .../react-reconciler/src/ReactFiberOffscreenComponent.js   | 2 ++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 1509d2201117..b28f1fee9b0e 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -15,7 +15,10 @@ import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
-import type {OffscreenProps} from './ReactFiberOffscreenComponent';
+import type {
+  OffscreenProps,
+  OffscreenInstance,
+} from './ReactFiberOffscreenComponent';
 
 import {
   createRootStrictEffectsByDefault,
@@ -735,6 +738,8 @@ export function createFiberFromOffscreen(
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
+  const primaryChildInstance: OffscreenInstance = {};
+  fiber.stateNode = primaryChildInstance;
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index ba9f5132b45c..5c4301977a3e 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -15,7 +15,10 @@ import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
-import type {OffscreenProps} from './ReactFiberOffscreenComponent';
+import type {
+  OffscreenProps,
+  OffscreenInstance,
+} from './ReactFiberOffscreenComponent';
 
 import {
   createRootStrictEffectsByDefault,
@@ -735,6 +738,8 @@ export function createFiberFromOffscreen(
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
+  const primaryChildInstance: OffscreenInstance = {};
+  fiber.stateNode = primaryChildInstance;
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 87e1eaa24454..2d0fea0657a8 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -31,3 +31,5 @@ export type OffscreenState = {|
   baseLanes: Lanes,
   cachePool: SpawnedCachePool | null,
 |};
+
+export type OffscreenInstance = {};

From ba5dc6ccde775e742643ac7da16ff5d4b29cc09c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 15 Mar 2022 23:10:23 -0400
Subject: [PATCH 1213/1603] Add authorization header to artifacts request
 (#24106)

* Add authorization header to artifacts request

CircleCI's artifacts API was updated; it now errors unless you're
logged in. This affects any of our workflows that download
build artifacts.

To fix, I added an authorization header to the request.

* Update sizbot to pull artifacts from public mirror

We can't use the normal download-build script in sizebot because it
depends on the CircleCI artifacts API, which was recently changed to
require authorization. And we can't pass an authorization token
without possibly leaking it to the public, since we run sizebot on
PRs from external contributors. As a temporary workaround, this job
will pull the artifacts from a public mirror that I set up. But we
should find some other solution so we don't have to maintain
the mirror.
---
 .circleci/config.yml                          | 23 ++++++++-----------
 .../download-build-artifacts.js               | 10 +++++++-
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a9905a53b7a9..866276dd4c81 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -127,22 +127,19 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - *restore_node_modules
       - run:
           name: Download artifacts for base revision
+          # TODO: We can't use the normal download-build script here because it
+          # depends on the CircleCI artifacts API, which was recently changed to
+          # require authorization. And we can't pass an authorization token
+          # without possibly leaking it to the public, since we run sizebot on
+          # PRs from external contributors. As a temporary workaround, this job
+          # will pull the artifacts from a public mirror that I set up. But we
+          # should find some other solution so we don't have to maintain
+          # the mirror.
           command: |
-              git fetch origin main
-              cd ./scripts/release && yarn && cd ../../
-              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main)
-              mv ./build ./base-build
-      - run:
-          # 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.
-          name: Delete extraneous files
-          command: rm -rf ./base-build/node_modules
+            curl -L --retry 60 --retry-delay 10 --retry-max-time 600 https://react-builds.vercel.app/api/commits/$(git merge-base HEAD origin/main)/artifacts/build.tgz | tar -xz
+            mv ./build ./base-build
 
       - persist_to_workspace:
           root: .
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index fba746520273..4765f41ca651 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -9,6 +9,14 @@ const {getArtifactsList, logPromise} = require('../utils');
 const theme = require('../theme');
 
 const run = async ({build, cwd, releaseChannel}) => {
+  const CIRCLE_TOKEN = process.env.CIRCLE_CI_API_TOKEN;
+  if (!CIRCLE_TOKEN) {
+    console.error(
+      theme.error('Missing required environment variable: CIRCLE_CI_API_TOKEN')
+    );
+    process.exit(1);
+  }
+
   const artifacts = await getArtifactsList(build);
   const buildArtifacts = artifacts.find(entry =>
     entry.path.endsWith('build.tgz')
@@ -24,7 +32,7 @@ const run = async ({build, cwd, releaseChannel}) => {
   // Download and extract artifact
   await exec(`rm -rf ./build`, {cwd});
   await exec(
-    `curl -L $(fwdproxy-config curl) ${buildArtifacts.url} | tar -xvz`,
+    `curl -L $(fwdproxy-config curl) ${buildArtifacts.url} -H "Circle-Token: ${CIRCLE_TOKEN}" | tar -xvz`,
     {
       cwd,
     }

From ef23a9ee8114c939946ceff91becc13415d99d5a Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Wed, 16 Mar 2022 10:12:59 -0400
Subject: [PATCH 1214/1603] Flag for text hydration mismatch (#24107)

* flag for text hydration mismatch

* rm unused import
---
 .../__tests__/ReactDOMServerPartialHydration-test.internal.js | 4 ++--
 packages/react-dom/src/client/ReactDOMComponent.js            | 4 ++--
 packages/shared/ReactFeatureFlags.js                          | 1 +
 packages/shared/forks/ReactFeatureFlags.native-fb.js          | 1 +
 packages/shared/forks/ReactFeatureFlags.native-oss.js         | 1 +
 packages/shared/forks/ReactFeatureFlags.test-renderer.js      | 1 +
 .../shared/forks/ReactFeatureFlags.test-renderer.native.js    | 1 +
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js  | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.js            | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.www.js        | 1 +
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js        | 1 +
 packages/shared/forks/ReactFeatureFlags.www.js                | 1 +
 12 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 6d02211edffd..f27d002db48f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3376,7 +3376,7 @@ describe('ReactDOMServerPartialHydration', () => {
     );
   });
 
-  // @gate enableClientRenderFallbackOnHydrationMismatch
+  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
     function DirectTextChild({text}) {
       return <div>{text}</div>;
@@ -3408,7 +3408,7 @@ describe('ReactDOMServerPartialHydration', () => {
     ]);
   });
 
-  // @gate enableClientRenderFallbackOnHydrationMismatch
+  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
     function Sibling() {
       return 'Sibling';
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 1552629da174..f0fc71b92e83 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -72,7 +72,7 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
 import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
-  enableClientRenderFallbackOnHydrationMismatch,
+  enableClientRenderFallbackOnTextMismatch,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -251,7 +251,7 @@ export function checkForUnmatchedText(
     }
   }
 
-  if (isConcurrentMode && enableClientRenderFallbackOnHydrationMismatch) {
+  if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
     // In concurrent roots, we throw when there's a text mismatch and revert to
     // client rendering, up to the nearest Suspense boundary.
     throw new Error('Text content does not match server-rendered HTML.');
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 8020d13b3515..a6bba286a6d2 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -42,6 +42,7 @@ export const enableSuspenseLayoutEffectSemantics = true;
 
 // TODO: Finish rolling out in www
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 
 // TODO: Need to review this code one more time before landing
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 74e27292d12f..d834914a24f8 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -53,6 +53,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 99c98f1f6560..94c76a4c82f3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index a1fe05abc227..e28fd76fcd87 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 0ee47c87fc48..4214fc7b79bc 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -54,6 +54,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index b86fb3dc0a7a..d025cafa3bc4 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index ec488337b064..40b1fa2d5d79 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 27881e5c71a2..e5e8e7295c84 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -44,6 +44,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 173713b36cf1..1f7de0b6b5a1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -27,6 +27,7 @@ export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
+export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 
 // Enable this flag to help with concurrent mode debugging.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 251b0dbe5b7f..be3d5aa040a2 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,6 +33,7 @@ export const {
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
   enableClientRenderFallbackOnHydrationMismatch,
+  enableClientRenderFallbackOnTextMismatch,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 8fce116998ea525194e02075d1b89ddafc8d698f Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 16 Mar 2022 08:37:10 -0700
Subject: [PATCH 1215/1603] Update DevTools READMEs (#24105)

---
 packages/react-devtools-core/README.md   | 140 +++++++++++++++-------
 packages/react-devtools-inline/README.md | 141 +++++++++++++++++++----
 packages/react-devtools-shared/README.md |   6 +
 packages/react-devtools/OVERVIEW.md      |  12 +-
 packages/react-devtools/README.md        |   8 +-
 5 files changed, 238 insertions(+), 69 deletions(-)
 create mode 100644 packages/react-devtools-shared/README.md

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index d139bf2e3b9b..4ee323fc9910 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -1,66 +1,122 @@
 # `react-devtools-core`
 
-A standalone React DevTools implementation.
+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 is a low-level package. If you're looking for the Electron app you can run, **use `react-devtools` package instead.**
+This package provides two entrypoints: labeled "backend" and "standalone" (frontend). Both APIs are described below.
 
-## API
+# Backend API
 
-### `react-devtools-core`
+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.
 
-This is similar requiring the `react-devtools` package, but provides several configurable options. Unlike `react-devtools`, requiring `react-devtools-core` doesn't connect immediately but instead exports a function:
+### Example
+
+If you are building a non-browser-based React renderer, you can use the backend API like so:
 
 ```js
-const { connectToDevTools } = require("react-devtools-core");
-connectToDevTools(config);
+if (process.env.NODE_ENV !== 'production') {
+  const { connectToDevTools } = require("react-devtools-core");
+
+  // Must be called before packages like react or react-native are imported
+  connectToDevTools({
+    ...config
+  });
+}
 ```
 
-Run `connectToDevTools()` in the same context as React to set up a connection to DevTools.  
-Be sure to run this function *before* importing e.g. `react`, `react-dom`, `react-native`.
+> **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`).
+
+### `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. |
+
+# 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,
 
-The `config` object may contain:
-* `host: string` (defaults to "localhost") - Websocket will connect to this host.
-* `port: number` (defaults to `8097`) - Websocket will connect to this port.
-* `useHttps: boolean` (defaults to `false`) - Websocket should use a secure protocol (wss).
-* `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided.
-* `resolveRNStyle: (style: number) => ?Object` - Used by the React Native style plug-in.
-* `retryConnectionDelay: number` (defaults to `2000`) - Milliseconds delay to wait between retrying a failed Websocket connection.
-* `isAppActive: () => boolean` - If provided, DevTools will poll this method and wait until it returns true before connecting to React.
+  // Host defaults to "localhost"
+  "example.devserver.com",
 
-## `react-devtools-core/standalone`
+  // Optional config for secure socket (WSS).
+  {
+    key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
+    cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
+  }
+);
+```
 
-Renders the DevTools interface into a DOM node.
+### Exported methods
+The `default` export is an object defining the methods described below.
 
+These methods support chaining for convenience. For example:
 ```js
-require("react-devtools-core/standalone")
-  .setContentDOMNode(document.getElementById("container"))
-  .setStatusListener(status => {
-    // This callback is optional...
-  })
-  .startServer(port);
+const DevtoolsUI = require("react-devtools-core/standalone");
+DevtoolsUI.setContentDOMNode(element).startServer();
 ```
 
-Renders DevTools interface into a DOM node over SSL using a custom host name (Default is localhost).
+#### `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 directores 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
-const host = 'dev.server.com';
-const options = {
-  key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
-  cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
-};
-
-
-require("react-devtools-core/standalone")
-  .setContentDOMNode(document.getElementById("container"))
-  .setStatusListener(status => {
-    // This callback is optional...
-  })
-  .startServer(port, host, options);
+function onStatus(
+  message: string,
+  status: 'server-connected' | 'devtools-connected' | 'error'
+): void {
+  // ...
+}
 ```
 
-Reference the `react-devtools` package for a complete integration example.
+#### `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.
 
-## Development
+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
@@ -71,3 +127,5 @@ 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).
\ No newline at end of file
diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 53edee429bd0..23374147673e 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -1,10 +1,16 @@
 # `react-devtools-inline`
 
-React DevTools implementation for embedding within a browser-based IDE (e.g. [CodeSandbox](https://codesandbox.io/), [StackBlitz](https://stackblitz.com/)).
+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).
 
-This is a low-level package. If you're looking for the standalone DevTools app, **use the `react-devtools` package instead.**
+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**.
 
-## Usage
+---
+
+> **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@experimenal`.
+
+---
+
+# 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>).
 
@@ -16,15 +22,18 @@ The frontend and backend can be initialized in any order, but **the backend must
 
 <sup>1</sup> Sandboxed iframes are supported.
 
-## API
+# Backend APIs
+### `initialize(windowOrGlobal)`
+
+Installs the global hook on the window/global object. This hook is how React and DevTools communicate.
 
-### `react-devtools-inline/backend`
+> **This method must be called before React is loaded.** (This includes `import`/`require` statements and `<script>` tags that include React.)
+
+### `activate(windowOrGlobal)`
 
-* **`initialize(contentWindow)`** -
-Installs the global hook on the window. This hook is how React and DevTools communicate. **This method must be called before React is loaded.**<sup>2</sup>
-* **`activate(contentWindow)`** -
 Lets the backend know when the frontend is ready. It should not be called until after the frontend has been initialized, else the frontend might miss important tree-initialization events.
 
+### Example
 ```js
 import { activate, initialize } from 'react-devtools-inline/backend';
 
@@ -41,13 +50,14 @@ initialize(contentWindow);
 activate(contentWindow);
 ```
 
-<sup>2</sup> The backend must be initialized before React is loaded. (This means before any `import` or `require` statements or `<script>` tags that include React.)
+# Frontend APIs
 
-### `react-devtools-inline/frontend`
+### `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.
 
-* **`initialize(contentWindow)`** -
-Configures the DevTools interface to listen to the `window` the backend was injected into. This method returns a React component that can be rendered directly<sup>3</sup>.
+> 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';
 
@@ -60,9 +70,7 @@ const contentWindow = iframe.contentWindow;
 const DevTools = initialize(contentWindow);
 ```
 
-<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using `ReactDOMClient.createRoot`. **It should not be rendered with `ReactDOM.render`.**
-
-## Examples
+# Advanced examples
 
 ### Supporting named hooks
 
@@ -169,7 +177,7 @@ iframe.onload = () => {
 };
 ```
 
-### Advanced integration with custom "wall"
+### 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).
 
@@ -235,25 +243,116 @@ const wall = {
 };
 ```
 
-## Local development
+### 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
+## 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
+### 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
+### 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
+## 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
diff --git a/packages/react-devtools-shared/README.md b/packages/react-devtools-shared/README.md
new file mode 100644
index 000000000000..6dafc8eb034d
--- /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/OVERVIEW.md b/packages/react-devtools/OVERVIEW.md
index 01ed4bd02a88..76aeff3343c6 100644
--- a/packages/react-devtools/OVERVIEW.md
+++ b/packages/react-devtools/OVERVIEW.md
@@ -293,11 +293,13 @@ To mitigate the performance impact of re-rendering a component, DevTools does th
 
 ## Profiler
 
-The Profiler UI is a powerful tool for identifying and fixing performance problems. The primary goal of the new profiler is to minimize its impact (CPU usage) while profiling is active. This can be accomplished by:
+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 on the backend. The backend push-notifies the frontend of when profiling starts or stops by sending a "_profilingStatus_" message. The frontend also asks for the current status after mounting by sending a "_getProfilingStatus_" message. (This is done to support the reload-and-profile functionality.)
+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.
 
@@ -308,6 +310,12 @@ When profiling begins, the backend records the base durations of each fiber curr
 
 This information will eventually be required by the frontend in order to render its profiling graphs, but it will not be sent across the bridge until profiling has completed (to minimize the performance impact of profiling).
 
+### 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.
diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
index b6e1516d67fb..cb13ff78a7c6 100644
--- a/packages/react-devtools/README.md
+++ b/packages/react-devtools/README.md
@@ -1,8 +1,6 @@
 # `react-devtools`
 
-React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).
-
-It works both with React DOM and React Native.
+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)
 
@@ -32,12 +30,12 @@ Run `react-devtools` from the terminal to launch the standalone DevTools app:
 react-devtools
 ```
 
-If you're not in a simulator then you also need to run the following in a command prompt:
+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 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
 

From b075f974229f5eee820e97e87c2c73056c12c0b7 Mon Sep 17 00:00:00 2001
From: Luna <luwe@fb.com>
Date: Wed, 16 Mar 2022 12:05:57 -0700
Subject: [PATCH 1216/1603] Fix dispatch config type for skipBubbling (#24109)

---
 packages/react-native-renderer/src/ReactNativeTypes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index ea6e5d2b41d9..864952c52ff2 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -73,7 +73,7 @@ export type ViewConfig = $ReadOnly<{
       phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
-        skipBubble?: ?boolean,
+        skipBubbling?: ?boolean,
       }>,
     }>,
     ...,

From 1c44437355e21f2992344fdef9ab1c1c5a7f8c2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 16 Mar 2022 20:06:00 -0400
Subject: [PATCH 1217/1603] Fix createRoot container signature (#24110)

The internal Container type represents the types of containers that React
can support in its internals that deal with containers.

This didn't include DocumentFragment which we support specifically for
rendering into shadow roots.

However, not all types makes sense to pass into the createRoot API.

One of those is comment nodes that is deprecated and we don't really fully
support. It really only exists for FB legacy.

For createRoot it doesn't make sense to pass a Document since that will try
to empty the document which removes the HTML tag which doesn't work.
Documents can only be passed to hydrateRoot.

Conversely I'm not sure we actually support hydrating a shadow root properly
so I excluded DocumentFragment from hydrateRoot.
---
 packages/react-dom/client.js                  |  5 ++---
 packages/react-dom/src/client/ReactDOM.js     |  4 ++--
 .../react-dom/src/client/ReactDOMComponent.js | 22 +++++++++----------
 .../src/client/ReactDOMHostConfig.js          |  3 ++-
 packages/react-dom/src/client/ReactDOMRoot.js | 13 ++++++-----
 5 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/packages/react-dom/client.js b/packages/react-dom/client.js
index 694b75eb1e5f..2234cc0a76eb 100644
--- a/packages/react-dom/client.js
+++ b/packages/react-dom/client.js
@@ -9,7 +9,6 @@
 
 'use strict';
 
-import type {Container} from './src/client/ReactDOMHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   RootType,
@@ -24,7 +23,7 @@ import {
 } from './';
 
 export function createRoot(
-  container: Container,
+  container: Element | DocumentFragment,
   options?: CreateRootOptions,
 ): RootType {
   if (__DEV__) {
@@ -40,7 +39,7 @@ export function createRoot(
 }
 
 export function hydrateRoot(
-  container: Container,
+  container: Document | Element,
   children: ReactNodeList,
   options?: HydrateRootOptions,
 ): RootType {
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index e85a580aed72..33e46d37a775 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -148,7 +148,7 @@ const Internals = {
 };
 
 function createRoot(
-  container: Container,
+  container: Element | DocumentFragment,
   options?: CreateRootOptions,
 ): RootType {
   if (__DEV__) {
@@ -163,7 +163,7 @@ function createRoot(
 }
 
 function hydrateRoot(
-  container: Container,
+  container: Document | Element,
   initialChildren: ReactNodeList,
   options?: HydrateRootOptions,
 ): RootType {
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index f0fc71b92e83..7f9b6ac47d8a 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -259,7 +259,7 @@ export function checkForUnmatchedText(
 }
 
 function getOwnerDocumentFromRootContainer(
-  rootContainerElement: Element | Document,
+  rootContainerElement: Element | Document | DocumentFragment,
 ): Document {
   return rootContainerElement.nodeType === DOCUMENT_NODE
     ? (rootContainerElement: any)
@@ -284,7 +284,7 @@ export function trapClickOnNonInteractiveElement(node: HTMLElement) {
 function setInitialDOMProperties(
   tag: string,
   domElement: Element,
-  rootContainerElement: Element | Document,
+  rootContainerElement: Element | Document | DocumentFragment,
   nextProps: Object,
   isCustomComponentTag: boolean,
 ): void {
@@ -371,7 +371,7 @@ function updateDOMProperties(
 export function createElement(
   type: string,
   props: Object,
-  rootContainerElement: Element | Document,
+  rootContainerElement: Element | Document | DocumentFragment,
   parentNamespace: string,
 ): Element {
   let isCustomComponentTag;
@@ -477,7 +477,7 @@ export function createElement(
 
 export function createTextNode(
   text: string,
-  rootContainerElement: Element | Document,
+  rootContainerElement: Element | Document | DocumentFragment,
 ): Text {
   return getOwnerDocumentFromRootContainer(rootContainerElement).createTextNode(
     text,
@@ -488,7 +488,7 @@ export function setInitialProperties(
   domElement: Element,
   tag: string,
   rawProps: Object,
-  rootContainerElement: Element | Document,
+  rootContainerElement: Element | Document | DocumentFragment,
 ): void {
   const isCustomComponentTag = isCustomComponent(tag, rawProps);
   if (__DEV__) {
@@ -614,7 +614,7 @@ export function diffProperties(
   tag: string,
   lastRawProps: Object,
   nextRawProps: Object,
-  rootContainerElement: Element | Document,
+  rootContainerElement: Element | Document | DocumentFragment,
 ): null | Array<mixed> {
   if (__DEV__) {
     validatePropertiesInDevelopment(tag, nextRawProps);
@@ -867,7 +867,7 @@ export function diffHydratedProperties(
   tag: string,
   rawProps: Object,
   parentNamespace: string,
-  rootContainerElement: Element | Document,
+  rootContainerElement: Element | Document | DocumentFragment,
   isConcurrentMode: boolean,
   shouldWarnDev: boolean,
 ): null | Array<mixed> {
@@ -1200,7 +1200,7 @@ export function diffHydratedText(
 }
 
 export function warnForDeletedHydratableElement(
-  parentNode: Element | Document,
+  parentNode: Element | Document | DocumentFragment,
   child: Element,
 ) {
   if (__DEV__) {
@@ -1217,7 +1217,7 @@ export function warnForDeletedHydratableElement(
 }
 
 export function warnForDeletedHydratableText(
-  parentNode: Element | Document,
+  parentNode: Element | Document | DocumentFragment,
   child: Text,
 ) {
   if (__DEV__) {
@@ -1234,7 +1234,7 @@ export function warnForDeletedHydratableText(
 }
 
 export function warnForInsertedHydratedElement(
-  parentNode: Element | Document,
+  parentNode: Element | Document | DocumentFragment,
   tag: string,
   props: Object,
 ) {
@@ -1252,7 +1252,7 @@ export function warnForInsertedHydratedElement(
 }
 
 export function warnForInsertedHydratedText(
-  parentNode: Element | Document,
+  parentNode: Element | Document | DocumentFragment,
   text: string,
 ) {
   if (__DEV__) {
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 739c3b023275..8ded833556c9 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -107,7 +107,8 @@ export type EventTargetChildElement = {
 };
 export type Container =
   | (Element & {_reactRootContainer?: FiberRoot, ...})
-  | (Document & {_reactRootContainer?: FiberRoot, ...});
+  | (Document & {_reactRootContainer?: FiberRoot, ...})
+  | (DocumentFragment & {_reactRootContainer?: FiberRoot, ...});
 export type Instance = Element;
 export type TextInstance = Text;
 export type SuspenseInstance = Comment & {_reactRetry?: () => void, ...};
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index d71de3bb0c26..33074054f1fe 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {Container} from './ReactDOMHostConfig';
 import type {MutableSource, ReactNodeList} from 'shared/ReactTypes';
 import type {
   FiberRoot,
@@ -165,7 +164,7 @@ ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount = funct
 };
 
 export function createRoot(
-  container: Container,
+  container: Element | DocumentFragment,
   options?: CreateRootOptions,
 ): RootType {
   if (!isValidContainer(container)) {
@@ -235,8 +234,10 @@ export function createRoot(
   );
   markContainerAsRoot(root.current, container);
 
-  const rootContainerElement =
-    container.nodeType === COMMENT_NODE ? container.parentNode : container;
+  const rootContainerElement: Document | Element | DocumentFragment =
+    container.nodeType === COMMENT_NODE
+      ? (container.parentNode: any)
+      : container;
   listenToAllSupportedEvents(rootContainerElement);
 
   return new ReactDOMRoot(root);
@@ -253,7 +254,7 @@ function scheduleHydration(target: Node) {
 ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = scheduleHydration;
 
 export function hydrateRoot(
-  container: Container,
+  container: Document | Element,
   initialChildren: ReactNodeList,
   options?: HydrateRootOptions,
 ): RootType {
@@ -351,7 +352,7 @@ export function isValidContainerLegacy(node: any): boolean {
   );
 }
 
-function warnIfReactDOMContainerInDEV(container) {
+function warnIfReactDOMContainerInDEV(container: any) {
   if (__DEV__) {
     if (
       container.nodeType === ELEMENT_NODE &&

From 645ec5d6fce7926e1d23105a93621147ec3d7f17 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 17 Mar 2022 15:40:03 -0400
Subject: [PATCH 1218/1603] fix inspecting an element in a nested renderer bug
 (#24116)

Fixes this issue, where inspecting components in nested renderers results in an error. The reason for this is because we have different fiberToIDMap instances for each renderer, and owners of a component could be in different renderers.

This fix moves the fiberToIDMap and idToArbitraryFiberMap out of the attach method so there's only one instance of each for all renderers.
---
 .../src/__tests__/inspectedElement-test.js    | 56 +++++++++++++++++++
 .../src/backend/renderer.js                   | 22 ++++----
 2 files changed, 67 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index e6f8c3277d3a..919fbb059f76 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2734,6 +2734,62 @@ describe('InspectedElement', () => {
     });
   });
 
+  it('inspecting nested renderers should not throw', async () => {
+    // Ignoring react art warnings
+    spyOn(console, 'error');
+    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 />, document.createElement('div'));
+    });
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <App>
+          ▾ <Child>
+            ▾ <Surface>
+                <svg>
+      [root]
+          <Group>
+    `);
+
+    const inspectedElement = await inspectElementAtIndex(4);
+    expect(inspectedElement.owners).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "displayName": "Child",
+          "hocDisplayNames": null,
+          "id": 3,
+          "key": null,
+          "type": 5,
+        },
+        Object {
+          "displayName": "App",
+          "hocDisplayNames": null,
+          "id": 2,
+          "key": null,
+          "type": 5,
+        },
+      ]
+    `);
+  });
+
   describe('error boundary', () => {
     it('can toggle error', async () => {
       class LocalErrorBoundary extends React.Component<any> {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 32ce8e2a9fe5..4b67a7a8ebe9 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -548,6 +548,17 @@ export function getInternalReactConstants(
   };
 }
 
+// Map of one or more Fibers in a pair to their unique id number.
+// We track both Fibers to support Fast Refresh,
+// which may forcefully replace one of the pair as part of hot reloading.
+// In that case it's still important to be able to locate the previous ID during subsequent renders.
+const fiberToIDMap: Map<Fiber, number> = new Map();
+
+// Map of id to one (arbitrary) Fiber in a pair.
+// 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 idToArbitraryFiberMap: Map<number, Fiber> = new Map();
+
 export function attach(
   hook: DevToolsHook,
   rendererID: number,
@@ -1085,17 +1096,6 @@ export function attach(
     }
   }
 
-  // Map of one or more Fibers in a pair to their unique id number.
-  // We track both Fibers to support Fast Refresh,
-  // which may forcefully replace one of the pair as part of hot reloading.
-  // In that case it's still important to be able to locate the previous ID during subsequent renders.
-  const fiberToIDMap: Map<Fiber, number> = new Map();
-
-  // Map of id to one (arbitrary) Fiber in a pair.
-  // 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 idToArbitraryFiberMap: Map<number, Fiber> = new Map();
-
   // When profiling is supported, we store the latest tree base durations for each Fiber.
   // This is so that we can quickly capture a snapshot of those values if profiling starts.
   // If we didn't store these values, we'd have to crawl the tree when profiling started,

From dbe9e732af1f12757a55adb12a8279d7db898b60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 18 Mar 2022 16:51:40 -0400
Subject: [PATCH 1219/1603] Avoid conditions where control flow is sufficient
 (#24126)

This also fixes a type error since resetTextContent can only be called
on Instances.
---
 .../src/ReactFiberCommitWork.new.js           | 46 ++++++++-----------
 .../src/ReactFiberCommitWork.old.js           | 46 ++++++++-----------
 2 files changed, 38 insertions(+), 54 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 75553555b928..7a941dc15f40 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1567,22 +1567,29 @@ function commitPlacement(finishedWork: Fiber): void {
   const parentFiber = getHostParentFiber(finishedWork);
 
   // Note: these two variables *must* always be updated together.
-  let parent;
-  let isContainer;
-  const parentStateNode = parentFiber.stateNode;
   switch (parentFiber.tag) {
-    case HostComponent:
-      parent = parentStateNode;
-      isContainer = false;
+    case HostComponent: {
+      const parent: Instance = parentFiber.stateNode;
+      if (parentFiber.flags & ContentReset) {
+        // Reset the text content of the parent before doing any insertions
+        resetTextContent(parent);
+        // Clear ContentReset from the effect tag
+        parentFiber.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);
       break;
+    }
     case HostRoot:
-      parent = parentStateNode.containerInfo;
-      isContainer = true;
-      break;
-    case HostPortal:
-      parent = parentStateNode.containerInfo;
-      isContainer = true;
+    case HostPortal: {
+      const parent: Container = parentFiber.stateNode.containerInfo;
+      const before = getHostSibling(finishedWork);
+      insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
       break;
+    }
     // eslint-disable-next-line-no-fallthrough
     default:
       throw new Error(
@@ -1590,21 +1597,6 @@ function commitPlacement(finishedWork: Fiber): void {
           'in React. Please file an issue.',
       );
   }
-  if (parentFiber.flags & ContentReset) {
-    // Reset the text content of the parent before doing any insertions
-    resetTextContent(parent);
-    // Clear ContentReset from the effect tag
-    parentFiber.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.
-  if (isContainer) {
-    insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
-  } else {
-    insertOrAppendPlacementNode(finishedWork, before, parent);
-  }
 }
 
 function insertOrAppendPlacementNodeIntoContainer(
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 23e9d6070c9a..e4b2c3a5387a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1567,22 +1567,29 @@ function commitPlacement(finishedWork: Fiber): void {
   const parentFiber = getHostParentFiber(finishedWork);
 
   // Note: these two variables *must* always be updated together.
-  let parent;
-  let isContainer;
-  const parentStateNode = parentFiber.stateNode;
   switch (parentFiber.tag) {
-    case HostComponent:
-      parent = parentStateNode;
-      isContainer = false;
+    case HostComponent: {
+      const parent: Instance = parentFiber.stateNode;
+      if (parentFiber.flags & ContentReset) {
+        // Reset the text content of the parent before doing any insertions
+        resetTextContent(parent);
+        // Clear ContentReset from the effect tag
+        parentFiber.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);
       break;
+    }
     case HostRoot:
-      parent = parentStateNode.containerInfo;
-      isContainer = true;
-      break;
-    case HostPortal:
-      parent = parentStateNode.containerInfo;
-      isContainer = true;
+    case HostPortal: {
+      const parent: Container = parentFiber.stateNode.containerInfo;
+      const before = getHostSibling(finishedWork);
+      insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
       break;
+    }
     // eslint-disable-next-line-no-fallthrough
     default:
       throw new Error(
@@ -1590,21 +1597,6 @@ function commitPlacement(finishedWork: Fiber): void {
           'in React. Please file an issue.',
       );
   }
-  if (parentFiber.flags & ContentReset) {
-    // Reset the text content of the parent before doing any insertions
-    resetTextContent(parent);
-    // Clear ContentReset from the effect tag
-    parentFiber.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.
-  if (isContainer) {
-    insertOrAppendPlacementNodeIntoContainer(finishedWork, before, parent);
-  } else {
-    insertOrAppendPlacementNode(finishedWork, before, parent);
-  }
 }
 
 function insertOrAppendPlacementNodeIntoContainer(

From 2e0d86d22192ff0b13b71b4ad68fea46bf523ef6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 20 Mar 2022 16:18:51 -0400
Subject: [PATCH 1220/1603] Allow updating dehydrated root at lower priority
 without forcing client render (#24082)

* Pass children to hydration root constructor

I already made this change for the concurrent root API in #23309. This
does the same thing for the legacy API.

Doesn't change any behavior, but I will use this in the next steps.

* Add isRootDehydrated function

Currently this does nothing except read a boolean field, but I'm about
to change this logic.

Since this is accessed by React DOM, too, I put the function in a
separate module that can be deep imported. Previously, it was accessing
the FiberRoot directly. The reason it's a separate module is to break a
circular dependency between React DOM and the reconciler.

* Allow updates at lower pri without forcing client render

Currently, if a root is updated before the shell has finished hydrating
(for example, due to a top-level navigation), we immediately revert to
client rendering. This is rare because the root is expected is finish
quickly, but not exceedingly rare because the root may be suspended.

This adds support for updating the root without forcing a client render
as long as the update has lower priority than the initial hydration,
i.e. if the update is wrapped in startTransition.

To implement this, I had to do some refactoring. The main idea here is
to make it closer to how we implement hydration in Suspense boundaries:

- I moved isDehydrated from the shared FiberRoot object to the
HostRoot's state object.
- In the begin phase, I check if the root has received an by comparing
the new children to the initial children. If they are different, we
revert to client rendering, and set isDehydrated to false using a
derived state update (a la getDerivedStateFromProps).
- There are a few places where we used to set root.isDehydrated to false
as a way to force a client render. Instead, I set the ForceClientRender
flag on the root work-in-progress fiber.
- Whenever we fall back to client rendering, I log a recoverable error.

The overall code structure is almost identical to the corresponding
logic for Suspense components.

The reason this works is because if the update has lower priority than
the initial hydration, it won't be processed during the hydration
render, so the children will be the same.

We can go even further and allow updates at _higher_ priority (though
not sync) by implementing selective hydration at the root, like we do
for Suspense boundaries: interrupt the current render, attempt hydration
at slightly higher priority than the update, then continue rendering the
update. I haven't implemented this yet, but I've structured the code in
anticipation of adding this later.

* Wrap useMutableSource logic in feature flag
---
 packages/react-art/src/ReactART.js            |   1 -
 .../src/backend/renderer.js                   |   9 +-
 .../ReactDOMFizzShellHydration-test.js        |  36 +++-
 .../src/__tests__/ReactDOMRoot-test.js        |   9 +
 .../react-dom/src/client/ReactDOMLegacy.js    | 119 ++++++++-----
 packages/react-dom/src/client/ReactDOMRoot.js |   2 +-
 .../src/events/ReactDOMEventListener.js       |   3 +-
 .../src/events/ReactDOMEventReplaying.js      |   3 +-
 .../react-native-renderer/src/ReactFabric.js  |   1 -
 .../src/ReactNativeRenderer.js                |   1 -
 .../src/createReactNoop.js                    |   3 -
 .../src/ReactFiberBeginWork.new.js            | 164 ++++++++++++------
 .../src/ReactFiberBeginWork.old.js            | 164 ++++++++++++------
 .../src/ReactFiberCommitWork.new.js           |  23 +--
 .../src/ReactFiberCommitWork.old.js           |  23 +--
 .../src/ReactFiberCompleteWork.new.js         |  30 +++-
 .../src/ReactFiberCompleteWork.old.js         |  30 +++-
 .../src/ReactFiberReconciler.new.js           |  20 ++-
 .../src/ReactFiberReconciler.old.js           |  20 ++-
 .../src/ReactFiberRoot.new.js                 |  14 +-
 .../src/ReactFiberRoot.old.js                 |  14 +-
 .../src/ReactFiberShellHydration.js           |  19 ++
 .../src/ReactFiberWorkLoop.new.js             |  80 ++++-----
 .../src/ReactFiberWorkLoop.old.js             |  80 ++++-----
 .../src/ReactInternalTypes.js                 |   2 -
 .../ReactFiberHostContext-test.internal.js    |   2 -
 .../src/ReactTestRenderer.js                  |   1 -
 27 files changed, 571 insertions(+), 302 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberShellHydration.js

diff --git a/packages/react-art/src/ReactART.js b/packages/react-art/src/ReactART.js
index 9d1b6a16c203..44cdf4f240a2 100644
--- a/packages/react-art/src/ReactART.js
+++ b/packages/react-art/src/ReactART.js
@@ -69,7 +69,6 @@ class Surface extends React.Component {
     this._mountNode = createContainer(
       this._surface,
       LegacyRoot,
-      false,
       null,
       false,
       false,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 4b67a7a8ebe9..3c18ce408309 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2704,9 +2704,14 @@ export function attach(
       // TODO: relying on this seems a bit fishy.
       const wasMounted =
         alternate.memoizedState != null &&
-        alternate.memoizedState.element != null;
+        alternate.memoizedState.element != null &&
+        // A dehydrated root is not considered mounted
+        alternate.memoizedState.isDehydrated !== true;
       const isMounted =
-        current.memoizedState != null && current.memoizedState.element != null;
+        current.memoizedState != null &&
+        current.memoizedState.element != null &&
+        // A dehydrated root is not considered mounted
+        current.memoizedState.isDehydrated !== true;
       if (!wasMounted && isMounted) {
         // Mount a new root.
         setRootPseudoKey(currentRootID, current);
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
index f3ff64daeec4..3584715f91e2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzShellHydration-test.js
@@ -9,6 +9,7 @@
 
 let JSDOM;
 let React;
+let startTransition;
 let ReactDOMClient;
 let Scheduler;
 let clientAct;
@@ -33,6 +34,8 @@ describe('ReactDOMFizzShellHydration', () => {
     ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
 
+    startTransition = React.startTransition;
+
     textCache = new Map();
 
     // Test Environment
@@ -214,7 +217,36 @@ describe('ReactDOMFizzShellHydration', () => {
     expect(container.textContent).toBe('Shell');
   });
 
-  test('updating the root before the shell hydrates forces a client render', async () => {
+  test(
+    '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);
+      });
+      expect(Scheduler).toHaveYielded(['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" />);
+        });
+      });
+      expect(Scheduler).toHaveYielded(['Initial', 'Updated']);
+      expect(container.textContent).toBe('Updated');
+    },
+  );
+
+  test('updating the root while the shell is suspended forces a client render', async () => {
     function App() {
       return <AsyncText text="Shell" />;
     }
@@ -245,9 +277,9 @@ describe('ReactDOMFizzShellHydration', () => {
       root.render(<Text text="New screen" />);
     });
     expect(Scheduler).toHaveYielded([
+      'New screen',
       'This root received an early update, before anything was able ' +
         'hydrate. Switched the entire root to client rendering.',
-      'New screen',
     ]);
     expect(container.textContent).toBe('New screen');
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index df693b878499..9d6a38188376 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -253,6 +253,15 @@ describe('ReactDOMRoot', () => {
     );
   });
 
+  it('callback passed to legacy hydrate() API', () => {
+    container.innerHTML = '<div>Hi</div>';
+    ReactDOM.hydrate(<div>Hi</div>, container, () => {
+      Scheduler.unstable_yieldValue('callback');
+    });
+    expect(container.textContent).toEqual('Hi');
+    expect(Scheduler).toHaveYielded(['callback']);
+  });
+
   it('warns when unmounting with legacy API (no previous content)', () => {
     const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js
index 3b751405a303..af0e35e128bd 100644
--- a/packages/react-dom/src/client/ReactDOMLegacy.js
+++ b/packages/react-dom/src/client/ReactDOMLegacy.js
@@ -27,6 +27,7 @@ import {
 
 import {
   createContainer,
+  createHydrationContainer,
   findHostInstanceWithNoPortals,
   updateContainer,
   flushSync,
@@ -109,34 +110,81 @@ function noopOnRecoverableError() {
 
 function legacyCreateRootFromDOMContainer(
   container: Container,
-  forceHydrate: boolean,
+  initialChildren: ReactNodeList,
+  parentComponent: ?React$Component<any, any>,
+  callback: ?Function,
+  isHydrationContainer: boolean,
 ): FiberRoot {
-  // First clear any existing content.
-  if (!forceHydrate) {
+  if (isHydrationContainer) {
+    if (typeof callback === 'function') {
+      const originalCallback = callback;
+      callback = function() {
+        const instance = getPublicRootInstance(root);
+        originalCallback.call(instance);
+      };
+    }
+
+    const root = createHydrationContainer(
+      initialChildren,
+      callback,
+      container,
+      LegacyRoot,
+      null, // hydrationCallbacks
+      false, // isStrictMode
+      false, // concurrentUpdatesByDefaultOverride,
+      '', // identifierPrefix
+      noopOnRecoverableError,
+      // TODO(luna) Support hydration later
+      null,
+    );
+    container._reactRootContainer = root;
+    markContainerAsRoot(root.current, container);
+
+    const rootContainerElement =
+      container.nodeType === COMMENT_NODE ? container.parentNode : container;
+    listenToAllSupportedEvents(rootContainerElement);
+
+    flushSync();
+    return root;
+  } else {
+    // First clear any existing content.
     let rootSibling;
     while ((rootSibling = container.lastChild)) {
       container.removeChild(rootSibling);
     }
-  }
 
-  const root = createContainer(
-    container,
-    LegacyRoot,
-    forceHydrate,
-    null, // hydrationCallbacks
-    false, // isStrictMode
-    false, // concurrentUpdatesByDefaultOverride,
-    '', // identifierPrefix
-    noopOnRecoverableError, // onRecoverableError
-    null, // transitionCallbacks
-  );
-  markContainerAsRoot(root.current, 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
+      noopOnRecoverableError, // onRecoverableError
+      null, // transitionCallbacks
+    );
+    container._reactRootContainer = root;
+    markContainerAsRoot(root.current, container);
+
+    const rootContainerElement =
+      container.nodeType === COMMENT_NODE ? container.parentNode : container;
+    listenToAllSupportedEvents(rootContainerElement);
 
-  const rootContainerElement =
-    container.nodeType === COMMENT_NODE ? container.parentNode : container;
-  listenToAllSupportedEvents(rootContainerElement);
+    // Initial mount should not be batched.
+    flushSync(() => {
+      updateContainer(initialChildren, root, parentComponent, callback);
+    });
 
-  return root;
+    return root;
+  }
 }
 
 function warnOnInvalidCallback(callback: mixed, callerName: string): void {
@@ -164,39 +212,30 @@ function legacyRenderSubtreeIntoContainer(
     warnOnInvalidCallback(callback === undefined ? null : callback, 'render');
   }
 
-  let root = container._reactRootContainer;
-  let fiberRoot: FiberRoot;
-  if (!root) {
+  const maybeRoot = container._reactRootContainer;
+  let root: FiberRoot;
+  if (!maybeRoot) {
     // Initial mount
-    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(
+    root = legacyCreateRootFromDOMContainer(
       container,
+      children,
+      parentComponent,
+      callback,
       forceHydrate,
     );
-    fiberRoot = root;
-    if (typeof callback === 'function') {
-      const originalCallback = callback;
-      callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
-        originalCallback.call(instance);
-      };
-    }
-    // Initial mount should not be batched.
-    flushSync(() => {
-      updateContainer(children, fiberRoot, parentComponent, callback);
-    });
   } else {
-    fiberRoot = root;
+    root = maybeRoot;
     if (typeof callback === 'function') {
       const originalCallback = callback;
       callback = function() {
-        const instance = getPublicRootInstance(fiberRoot);
+        const instance = getPublicRootInstance(root);
         originalCallback.call(instance);
       };
     }
     // Update
-    updateContainer(children, fiberRoot, parentComponent, callback);
+    updateContainer(children, root, parentComponent, callback);
   }
-  return getPublicRootInstance(fiberRoot);
+  return getPublicRootInstance(root);
 }
 
 export function findDOMNode(
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 33074054f1fe..c7820a703a0b 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -224,7 +224,6 @@ export function createRoot(
   const root = createContainer(
     container,
     ConcurrentRoot,
-    false,
     null,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -303,6 +302,7 @@ export function hydrateRoot(
 
   const root = createHydrationContainer(
     initialChildren,
+    null,
     container,
     ConcurrentRoot,
     hydrationCallbacks,
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index f8b8231f8f40..e2974586ec6a 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -53,6 +53,7 @@ import {
   setCurrentUpdatePriority,
 } from 'react-reconciler/src/ReactEventPriorities';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
+import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
 
 const {ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -386,7 +387,7 @@ export function findInstanceBlockingEvent(
         targetInst = null;
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (root.isDehydrated) {
+        if (isRootDehydrated(root)) {
           // If this happens during a replay something went wrong and it might block
           // the whole system.
           return getContainerFromFiber(nearestMounted);
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 744f5dfda9d9..9de82a99a7be 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -39,6 +39,7 @@ import {
 } from '../client/ReactDOMComponentTree';
 import {HostRoot, SuspenseComponent} from 'react-reconciler/src/ReactWorkTags';
 import {isHigherEventPriority} from 'react-reconciler/src/ReactEventPriorities';
+import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration';
 
 let _attemptSynchronousHydration: (fiber: Object) => void;
 
@@ -414,7 +415,7 @@ function attemptExplicitHydrationTarget(
         }
       } else if (tag === HostRoot) {
         const root: FiberRoot = nearestMounted.stateNode;
-        if (root.isDehydrated) {
+        if (isRootDehydrated(root)) {
           queuedTarget.blockedOn = getContainerFromFiber(nearestMounted);
           // We don't currently have a way to increase the priority of
           // a root other than sync.
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 127b20fd5dac..e08a98653fb6 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -215,7 +215,6 @@ function render(
     root = createContainer(
       containerTag,
       concurrentRoot ? ConcurrentRoot : LegacyRoot,
-      false,
       null,
       false,
       null,
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 1dca2cd7a1d9..e751195dda00 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -211,7 +211,6 @@ function render(
     root = createContainer(
       containerTag,
       LegacyRoot,
-      false,
       null,
       false,
       null,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index e0ba72076a1a..8e4050dcfa33 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -974,7 +974,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         root = NoopRenderer.createContainer(
           container,
           tag,
-          false,
           null,
           null,
           false,
@@ -996,7 +995,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const fiberRoot = NoopRenderer.createContainer(
         container,
         ConcurrentRoot,
-        false,
         null,
         null,
         false,
@@ -1029,7 +1027,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       const fiberRoot = NoopRenderer.createContainer(
         container,
         LegacyRoot,
-        false,
         null,
         null,
         false,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4bae5d0b7b98..6fee8d948ebe 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactProviderType,
+  ReactContext,
+  ReactNodeList,
+} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -29,9 +33,11 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
+import type {RootState} from './ReactFiberRoot.new';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
+  enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
@@ -1311,14 +1317,9 @@ function pushHostRootContext(workInProgress) {
 
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
-  const updateQueue = workInProgress.updateQueue;
 
-  if (current === null || updateQueue === null) {
-    throw new Error(
-      '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.',
-    );
+  if (current === null) {
+    throw new Error('Should have a current fiber. This is a bug in React.');
   }
 
   const nextProps = workInProgress.pendingProps;
@@ -1326,8 +1327,8 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
-  const nextState = workInProgress.memoizedState;
 
+  const nextState: RootState = workInProgress.memoizedState;
   const root: FiberRoot = workInProgress.stateNode;
 
   if (enableCache) {
@@ -1341,64 +1342,127 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   }
 
   if (enableTransitionTracing) {
+    // FIXME: Slipped past code review. This is not a safe mutation:
+    // workInProgress.memoizedState is a shared object. Need to fix before
+    // rolling out the Transition Tracing experiment.
     workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
   }
 
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
-  if (nextChildren === prevChildren) {
-    resetHydrationState();
-    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  }
-  if (root.isDehydrated && enterHydrationState(workInProgress)) {
-    // If we don't have any current children this might be the first pass.
-    // We always try to hydrate. If this isn't a hydration pass there won't
-    // be any children to hydrate which is effectively the same thing as
-    // not hydrating.
-
-    if (supportsHydration) {
-      const mutableSourceEagerHydrationData =
-        root.mutableSourceEagerHydrationData;
-      if (mutableSourceEagerHydrationData != null) {
-        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-          const mutableSource = ((mutableSourceEagerHydrationData[
-            i
-          ]: any): MutableSource<any>);
-          const version = mutableSourceEagerHydrationData[i + 1];
-          setWorkInProgressVersion(mutableSource, version);
+  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,
+      transitions: nextState.transitions,
+    };
+    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.
+      const recoverableError = new Error(
+        'There was an error while hydrating. Because the error happened outside ' +
+          'of a Suspense boundary, the entire root will switch to ' +
+          'client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else if (nextChildren !== prevChildren) {
+      const recoverableError = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else {
+      // The outermost shell has not hydrated yet. Start hydrating.
+      enterHydrationState(workInProgress);
+      if (enableUseMutableSource && supportsHydration) {
+        const mutableSourceEagerHydrationData =
+          root.mutableSourceEagerHydrationData;
+        if (mutableSourceEagerHydrationData != null) {
+          for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+            const mutableSource = ((mutableSourceEagerHydrationData[
+              i
+            ]: any): MutableSource<any>);
+            const version = mutableSourceEagerHydrationData[i + 1];
+            setWorkInProgressVersion(mutableSource, version);
+          }
         }
       }
-    }
 
-    const child = mountChildFibers(
-      workInProgress,
-      null,
-      nextChildren,
-      renderLanes,
-    );
-    workInProgress.child = child;
+      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;
+      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 {
-    // Otherwise reset hydration state in case we aborted and resumed another
-    // root.
-    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    // 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,
+  recoverableError: Error,
+) {
+  // Revert to client rendering.
+  resetHydrationState();
+
+  queueHydrationError(recoverableError);
+
+  workInProgress.flags |= ForceClientRender;
+
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateHostComponent(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 583539dd08b5..fc4912e7ec39 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {ReactProviderType, ReactContext} from 'shared/ReactTypes';
+import type {
+  ReactProviderType,
+  ReactContext,
+  ReactNodeList,
+} from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {TypeOfMode} from './ReactTypeOfMode';
@@ -29,9 +33,11 @@ import type {
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
+import type {RootState} from './ReactFiberRoot.old';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
+  enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
 
 import checkPropTypes from 'shared/checkPropTypes';
@@ -1311,14 +1317,9 @@ function pushHostRootContext(workInProgress) {
 
 function updateHostRoot(current, workInProgress, renderLanes) {
   pushHostRootContext(workInProgress);
-  const updateQueue = workInProgress.updateQueue;
 
-  if (current === null || updateQueue === null) {
-    throw new Error(
-      '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.',
-    );
+  if (current === null) {
+    throw new Error('Should have a current fiber. This is a bug in React.');
   }
 
   const nextProps = workInProgress.pendingProps;
@@ -1326,8 +1327,8 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const prevChildren = prevState.element;
   cloneUpdateQueue(current, workInProgress);
   processUpdateQueue(workInProgress, nextProps, null, renderLanes);
-  const nextState = workInProgress.memoizedState;
 
+  const nextState: RootState = workInProgress.memoizedState;
   const root: FiberRoot = workInProgress.stateNode;
 
   if (enableCache) {
@@ -1341,64 +1342,127 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   }
 
   if (enableTransitionTracing) {
+    // FIXME: Slipped past code review. This is not a safe mutation:
+    // workInProgress.memoizedState is a shared object. Need to fix before
+    // rolling out the Transition Tracing experiment.
     workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
   }
 
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
-  if (nextChildren === prevChildren) {
-    resetHydrationState();
-    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
-  }
-  if (root.isDehydrated && enterHydrationState(workInProgress)) {
-    // If we don't have any current children this might be the first pass.
-    // We always try to hydrate. If this isn't a hydration pass there won't
-    // be any children to hydrate which is effectively the same thing as
-    // not hydrating.
-
-    if (supportsHydration) {
-      const mutableSourceEagerHydrationData =
-        root.mutableSourceEagerHydrationData;
-      if (mutableSourceEagerHydrationData != null) {
-        for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
-          const mutableSource = ((mutableSourceEagerHydrationData[
-            i
-          ]: any): MutableSource<any>);
-          const version = mutableSourceEagerHydrationData[i + 1];
-          setWorkInProgressVersion(mutableSource, version);
+  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,
+      transitions: nextState.transitions,
+    };
+    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.
+      const recoverableError = new Error(
+        'There was an error while hydrating. Because the error happened outside ' +
+          'of a Suspense boundary, the entire root will switch to ' +
+          'client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else if (nextChildren !== prevChildren) {
+      const recoverableError = new Error(
+        'This root received an early update, before anything was able ' +
+          'hydrate. Switched the entire root to client rendering.',
+      );
+      return mountHostRootWithoutHydrating(
+        current,
+        workInProgress,
+        nextChildren,
+        renderLanes,
+        recoverableError,
+      );
+    } else {
+      // The outermost shell has not hydrated yet. Start hydrating.
+      enterHydrationState(workInProgress);
+      if (enableUseMutableSource && supportsHydration) {
+        const mutableSourceEagerHydrationData =
+          root.mutableSourceEagerHydrationData;
+        if (mutableSourceEagerHydrationData != null) {
+          for (let i = 0; i < mutableSourceEagerHydrationData.length; i += 2) {
+            const mutableSource = ((mutableSourceEagerHydrationData[
+              i
+            ]: any): MutableSource<any>);
+            const version = mutableSourceEagerHydrationData[i + 1];
+            setWorkInProgressVersion(mutableSource, version);
+          }
         }
       }
-    }
 
-    const child = mountChildFibers(
-      workInProgress,
-      null,
-      nextChildren,
-      renderLanes,
-    );
-    workInProgress.child = child;
+      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;
+      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 {
-    // Otherwise reset hydration state in case we aborted and resumed another
-    // root.
-    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+    // 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,
+  recoverableError: Error,
+) {
+  // Revert to client rendering.
+  resetHydrationState();
+
+  queueHydrationError(recoverableError);
+
+  workInProgress.flags |= ForceClientRender;
+
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
+}
+
 function updateHostComponent(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 7a941dc15f40..fb6040109518 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -25,6 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {RootState} from './ReactFiberRoot.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -1869,11 +1870,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case HostRoot: {
         if (supportsHydration) {
-          const root: FiberRoot = finishedWork.stateNode;
-          if (root.isDehydrated) {
-            // We've just hydrated. No need to hydrate again.
-            root.isDehydrated = false;
-            commitHydratedContainer(root.containerInfo);
+          if (current !== null) {
+            const prevRootState: RootState = current.memoizedState;
+            if (prevRootState.isDehydrated) {
+              const root: FiberRoot = finishedWork.stateNode;
+              commitHydratedContainer(root.containerInfo);
+            }
           }
         }
         break;
@@ -1977,11 +1979,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case HostRoot: {
       if (supportsHydration) {
-        const root: FiberRoot = finishedWork.stateNode;
-        if (root.isDehydrated) {
-          // We've just hydrated. No need to hydrate again.
-          root.isDehydrated = false;
-          commitHydratedContainer(root.containerInfo);
+        if (current !== null) {
+          const prevRootState: RootState = current.memoizedState;
+          if (prevRootState.isDehydrated) {
+            const root: FiberRoot = finishedWork.stateNode;
+            commitHydratedContainer(root.containerInfo);
+          }
         }
       }
       return;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index e4b2c3a5387a..e962039d9ca9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -25,6 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {RootState} from './ReactFiberRoot.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -1869,11 +1870,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       }
       case HostRoot: {
         if (supportsHydration) {
-          const root: FiberRoot = finishedWork.stateNode;
-          if (root.isDehydrated) {
-            // We've just hydrated. No need to hydrate again.
-            root.isDehydrated = false;
-            commitHydratedContainer(root.containerInfo);
+          if (current !== null) {
+            const prevRootState: RootState = current.memoizedState;
+            if (prevRootState.isDehydrated) {
+              const root: FiberRoot = finishedWork.stateNode;
+              commitHydratedContainer(root.containerInfo);
+            }
           }
         }
         break;
@@ -1977,11 +1979,12 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
     }
     case HostRoot: {
       if (supportsHydration) {
-        const root: FiberRoot = finishedWork.stateNode;
-        if (root.isDehydrated) {
-          // We've just hydrated. No need to hydrate again.
-          root.isDehydrated = false;
-          commitHydratedContainer(root.containerInfo);
+        if (current !== null) {
+          const prevRootState: RootState = current.memoizedState;
+          if (prevRootState.isDehydrated) {
+            const root: FiberRoot = finishedWork.stateNode;
+            commitHydratedContainer(root.containerInfo);
+          }
         }
       }
       return;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 2a44cf94a14a..bea984c19f1c 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot.new';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {
   ReactScopeInstance,
@@ -890,12 +891,29 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!fiberRoot.isDehydrated) {
-          // 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;
+        } 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);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index f02a20222d0f..ef3d4f7979f2 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -8,6 +8,7 @@
  */
 
 import type {Fiber} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot.old';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {
   ReactScopeInstance,
@@ -890,12 +891,29 @@ function completeWork(
           // If we hydrated, then we'll need to schedule an update for
           // the commit side-effects on the root.
           markUpdate(workInProgress);
-        } else if (!fiberRoot.isDehydrated) {
-          // 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;
+        } 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);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 8607b227e9b4..136276637d3e 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -48,6 +48,7 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.new';
 import {createFiberRoot} from './ReactFiberRoot.new';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   injectInternals,
   markRenderScheduled,
@@ -245,9 +246,6 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
-  // TODO: We can remove hydration-specific stuff from createContainer once
-  // we delete legacy mode. The new root API uses createHydrationContainer.
-  hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -255,10 +253,13 @@ export function createContainer(
   onRecoverableError: (error: mixed) => void,
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
+  const hydrate = false;
+  const initialChildren = null;
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -270,6 +271,8 @@ export function createContainer(
 
 export function createHydrationContainer(
   initialChildren: ReactNodeList,
+  // TODO: Remove `callback` when we delete legacy mode.
+  callback: ?Function,
   containerInfo: Container,
   tag: RootTag,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
@@ -284,6 +287,7 @@ export function createHydrationContainer(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -298,13 +302,15 @@ export function createHydrationContainer(
   // 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;
   const eventTime = requestEventTime();
   const lane = requestUpdateLane(current);
   const update = createUpdate(eventTime, lane);
-  // Caution: React DevTools currently depends on this property
-  // being called "element".
-  update.payload = {element: initialChildren};
+  update.callback =
+    callback !== undefined && callback !== null ? callback : null;
   enqueueUpdate(current, update, lane);
   scheduleInitialHydrationOnRoot(root, lane, eventTime);
 
@@ -409,7 +415,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (root.isDehydrated) {
+      if (isRootDehydrated(root)) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 4970b685b1c1..e014519320a5 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -48,6 +48,7 @@ import {
   isContextProvider as isLegacyContextProvider,
 } from './ReactFiberContext.old';
 import {createFiberRoot} from './ReactFiberRoot.old';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {
   injectInternals,
   markRenderScheduled,
@@ -245,9 +246,6 @@ function findHostInstanceWithWarning(
 export function createContainer(
   containerInfo: Container,
   tag: RootTag,
-  // TODO: We can remove hydration-specific stuff from createContainer once
-  // we delete legacy mode. The new root API uses createHydrationContainer.
-  hydrate: boolean,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -255,10 +253,13 @@ export function createContainer(
   onRecoverableError: (error: mixed) => void,
   transitionCallbacks: null | TransitionTracingCallbacks,
 ): OpaqueRoot {
+  const hydrate = false;
+  const initialChildren = null;
   return createFiberRoot(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -270,6 +271,8 @@ export function createContainer(
 
 export function createHydrationContainer(
   initialChildren: ReactNodeList,
+  // TODO: Remove `callback` when we delete legacy mode.
+  callback: ?Function,
   containerInfo: Container,
   tag: RootTag,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
@@ -284,6 +287,7 @@ export function createHydrationContainer(
     containerInfo,
     tag,
     hydrate,
+    initialChildren,
     hydrationCallbacks,
     isStrictMode,
     concurrentUpdatesByDefaultOverride,
@@ -298,13 +302,15 @@ export function createHydrationContainer(
   // 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;
   const eventTime = requestEventTime();
   const lane = requestUpdateLane(current);
   const update = createUpdate(eventTime, lane);
-  // Caution: React DevTools currently depends on this property
-  // being called "element".
-  update.payload = {element: initialChildren};
+  update.callback =
+    callback !== undefined && callback !== null ? callback : null;
   enqueueUpdate(current, update, lane);
   scheduleInitialHydrationOnRoot(root, lane, eventTime);
 
@@ -409,7 +415,7 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
     case HostRoot:
       const root: FiberRoot = fiber.stateNode;
-      if (root.isDehydrated) {
+      if (isRootDehydrated(root)) {
         // Flush the first scheduled "update".
         const lanes = getHighestPriorityPendingLanes(root);
         flushRoot(root, lanes);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 00dd694be4f5..7ff03ceead0e 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   SuspenseHydrationCallbacks,
@@ -39,7 +40,8 @@ import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
 export type RootState = {
   element: any,
-  cache: Cache | null,
+  isDehydrated: boolean,
+  cache: Cache,
   transitions: Transitions | null,
 };
 
@@ -59,7 +61,6 @@ function FiberRootNode(
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
-  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
@@ -128,6 +129,7 @@ export function createFiberRoot(
   containerInfo: any,
   tag: RootTag,
   hydrate: boolean,
+  initialChildren: ReactNodeList,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -178,15 +180,17 @@ export function createFiberRoot(
     root.pooledCache = initialCache;
     retainCache(initialCache);
     const initialState: RootState = {
-      element: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
       cache: initialCache,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
-      element: null,
-      cache: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
+      cache: (null: any), // not enabled yet
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 1e561e49facb..179b9c17ae41 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {
   FiberRoot,
   SuspenseHydrationCallbacks,
@@ -39,7 +40,8 @@ import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
 export type RootState = {
   element: any,
-  cache: Cache | null,
+  isDehydrated: boolean,
+  cache: Cache,
   transitions: Transitions | null,
 };
 
@@ -59,7 +61,6 @@ function FiberRootNode(
   this.timeoutHandle = noTimeout;
   this.context = null;
   this.pendingContext = null;
-  this.isDehydrated = hydrate;
   this.callbackNode = null;
   this.callbackPriority = NoLane;
   this.eventTimes = createLaneMap(NoLanes);
@@ -128,6 +129,7 @@ export function createFiberRoot(
   containerInfo: any,
   tag: RootTag,
   hydrate: boolean,
+  initialChildren: ReactNodeList,
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
   isStrictMode: boolean,
   concurrentUpdatesByDefaultOverride: null | boolean,
@@ -178,15 +180,17 @@ export function createFiberRoot(
     root.pooledCache = initialCache;
     retainCache(initialCache);
     const initialState: RootState = {
-      element: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
       cache: initialCache,
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
     const initialState: RootState = {
-      element: null,
-      cache: null,
+      element: initialChildren,
+      isDehydrated: hydrate,
+      cache: (null: any), // not enabled yet
       transitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
diff --git a/packages/react-reconciler/src/ReactFiberShellHydration.js b/packages/react-reconciler/src/ReactFiberShellHydration.js
new file mode 100644
index 000000000000..caadb978f69d
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberShellHydration.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {FiberRoot} from './ReactInternalTypes';
+import type {RootState} from './ReactFiberRoot.new';
+
+// 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) {
+  const currentState: RootState = root.current.memoizedState;
+  return currentState.isDehydrated;
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 7223ad7d052b..558440effa77 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -88,6 +88,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.new';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -109,6 +110,7 @@ import {
   StoreConsistency,
   HostEffectMask,
   Hydrating,
+  ForceClientRender,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
@@ -581,34 +583,7 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (root.isDehydrated && root.tag !== LegacyRoot) {
-      // This root's shell hasn't hydrated yet. Revert to client rendering.
-      if (workInProgressRoot === root) {
-        // If this happened during an interleaved event, interrupt the
-        // in-progress hydration. Theoretically, we could attempt to force a
-        // synchronous hydration before switching to client rendering, but the
-        // most common reason the shell hasn't hydrated yet is because it
-        // suspended. So it's very likely to suspend again anyway. For
-        // simplicity, we'll skip that atttempt and go straight to
-        // client rendering.
-        //
-        // Another way to model this would be to give the initial hydration its
-        // own special lane. However, it may not be worth adding a lane solely
-        // for this purpose, so we'll wait until we find another use case before
-        // adding it.
-        //
-        // TODO: Consider only interrupting hydration if the priority of the
-        // update is higher than default.
-        prepareFreshStack(root, NoLanes);
-      }
-      root.isDehydrated = false;
-      const error = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
-      );
-      const onRecoverableError = root.onRecoverableError;
-      onRecoverableError(error);
-    } else if (root === workInProgressRoot) {
+    if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
       // Received an update to a tree that's in the middle of rendering. Mark
@@ -1016,28 +991,42 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
-  if (root.isDehydrated) {
-    root.isDehydrated = false;
+
+  // Before rendering again, save the errors from the previous attempt.
+  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
+
+  if (isRootDehydrated(root)) {
+    // 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;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
-    const error = new Error(
-      'There was an error while hydrating. Because the error happened outside ' +
-        'of a Suspense boundary, the entire root will switch to ' +
-        'client rendering.',
-    );
-    renderDidError(error);
   }
 
-  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
   if (exitStatus !== RootErrored) {
     // Successfully finished rendering on retry
-    if (errorsFromFirstAttempt !== null) {
-      // 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.
-      queueRecoverableErrors(errorsFromFirstAttempt);
+
+    // 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.
@@ -1453,7 +1442,7 @@ export function popRenderLanes(fiber: Fiber) {
   popFromStack(subtreeRenderLanesCursor, fiber);
 }
 
-function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
+function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
@@ -1479,7 +1468,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
     }
   }
   workInProgressRoot = root;
-  workInProgress = createWorkInProgress(root.current, null);
+  const rootWorkInProgress = createWorkInProgress(root.current, null);
+  workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
@@ -1495,6 +1485,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
+
+  return rootWorkInProgress;
 }
 
 function handleError(root, thrownValue): void {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d8bb6b16e29f..c1c090d82b0b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -88,6 +88,7 @@ import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
 } from './ReactFiber.old';
+import {isRootDehydrated} from './ReactFiberShellHydration';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -109,6 +110,7 @@ import {
   StoreConsistency,
   HostEffectMask,
   Hydrating,
+  ForceClientRender,
   BeforeMutationMask,
   MutationMask,
   LayoutMask,
@@ -581,34 +583,7 @@ export function scheduleUpdateOnFiber(
       }
     }
 
-    if (root.isDehydrated && root.tag !== LegacyRoot) {
-      // This root's shell hasn't hydrated yet. Revert to client rendering.
-      if (workInProgressRoot === root) {
-        // If this happened during an interleaved event, interrupt the
-        // in-progress hydration. Theoretically, we could attempt to force a
-        // synchronous hydration before switching to client rendering, but the
-        // most common reason the shell hasn't hydrated yet is because it
-        // suspended. So it's very likely to suspend again anyway. For
-        // simplicity, we'll skip that atttempt and go straight to
-        // client rendering.
-        //
-        // Another way to model this would be to give the initial hydration its
-        // own special lane. However, it may not be worth adding a lane solely
-        // for this purpose, so we'll wait until we find another use case before
-        // adding it.
-        //
-        // TODO: Consider only interrupting hydration if the priority of the
-        // update is higher than default.
-        prepareFreshStack(root, NoLanes);
-      }
-      root.isDehydrated = false;
-      const error = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
-      );
-      const onRecoverableError = root.onRecoverableError;
-      onRecoverableError(error);
-    } else if (root === workInProgressRoot) {
+    if (root === workInProgressRoot) {
       // TODO: Consolidate with `isInterleavedUpdate` check
 
       // Received an update to a tree that's in the middle of rendering. Mark
@@ -1016,28 +991,42 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 function recoverFromConcurrentError(root, errorRetryLanes) {
   // If an error occurred during hydration, discard server response and fall
   // back to client side render.
-  if (root.isDehydrated) {
-    root.isDehydrated = false;
+
+  // Before rendering again, save the errors from the previous attempt.
+  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
+
+  if (isRootDehydrated(root)) {
+    // 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;
     if (__DEV__) {
       errorHydratingContainer(root.containerInfo);
     }
-    const error = new Error(
-      'There was an error while hydrating. Because the error happened outside ' +
-        'of a Suspense boundary, the entire root will switch to ' +
-        'client rendering.',
-    );
-    renderDidError(error);
   }
 
-  const errorsFromFirstAttempt = workInProgressRootConcurrentErrors;
   const exitStatus = renderRootSync(root, errorRetryLanes);
   if (exitStatus !== RootErrored) {
     // Successfully finished rendering on retry
-    if (errorsFromFirstAttempt !== null) {
-      // 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.
-      queueRecoverableErrors(errorsFromFirstAttempt);
+
+    // 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.
@@ -1453,7 +1442,7 @@ export function popRenderLanes(fiber: Fiber) {
   popFromStack(subtreeRenderLanesCursor, fiber);
 }
 
-function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
+function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   root.finishedWork = null;
   root.finishedLanes = NoLanes;
 
@@ -1479,7 +1468,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
     }
   }
   workInProgressRoot = root;
-  workInProgress = createWorkInProgress(root.current, null);
+  const rootWorkInProgress = createWorkInProgress(root.current, null);
+  workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
@@ -1495,6 +1485,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes) {
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
   }
+
+  return rootWorkInProgress;
 }
 
 function handleError(root, thrownValue): void {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index dd2e09c03b21..1fa3d4b6680d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -213,8 +213,6 @@ type BaseFiberRootProperties = {|
   // Top context object, used by renderSubtreeIntoContainer
   context: Object | null,
   pendingContext: Object | null,
-  // Determines if we should attempt to hydrate on the initial mount
-  +isDehydrated: boolean,
 
   // Used by useMutableSource hook to avoid tearing during hydration.
   mutableSourceEagerHydrationData?: Array<
diff --git a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index d0c3d5b236ea..82e23de9965d 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -72,7 +72,6 @@ describe('ReactFiberHostContext', () => {
     const container = Renderer.createContainer(
       /* root: */ null,
       ConcurrentRoot,
-      false,
       null,
       false,
       '',
@@ -136,7 +135,6 @@ describe('ReactFiberHostContext', () => {
     const container = Renderer.createContainer(
       rootContext,
       ConcurrentRoot,
-      false,
       null,
       false,
       '',
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index e850086439a6..76911d701de7 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -473,7 +473,6 @@ function create(element: React$Element<any>, options: TestRendererOptions) {
   let root: FiberRoot | null = createContainer(
     container,
     isConcurrent ? ConcurrentRoot : LegacyRoot,
-    false,
     null,
     isStrictMode,
     concurrentUpdatesByDefault,

From 577f2de46cb2f6d71380551478a02de3965a764b Mon Sep 17 00:00:00 2001
From: David McCabe <davemccabe@gmail.com>
Date: Sun, 20 Mar 2022 20:41:02 -0700
Subject: [PATCH 1221/1603] enableCacheElement flag (#24131)

* enableCacheElement flag

* Update packages/shared/forks/ReactFeatureFlags.testing.js

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* Update packages/shared/forks/ReactFeatureFlags.test-renderer.js

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* Update packages/shared/forks/ReactFeatureFlags.native-oss.js

Co-authored-by: Ricky <rickhanlonii@gmail.com>

* Update packages/shared/ReactFeatureFlags.js

Co-authored-by: Ricky <rickhanlonii@gmail.com>

Co-authored-by: Dave McCabe <davemccabe@fb.com>
Co-authored-by: Ricky <rickhanlonii@gmail.com>
---
 packages/shared/ReactFeatureFlags.js                          | 1 +
 packages/shared/forks/ReactFeatureFlags.native-fb.js          | 1 +
 packages/shared/forks/ReactFeatureFlags.native-oss.js         | 1 +
 packages/shared/forks/ReactFeatureFlags.test-renderer.js      | 1 +
 .../shared/forks/ReactFeatureFlags.test-renderer.native.js    | 1 +
 packages/shared/forks/ReactFeatureFlags.test-renderer.www.js  | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.js            | 1 +
 packages/shared/forks/ReactFeatureFlags.testing.www.js        | 1 +
 packages/shared/forks/ReactFeatureFlags.www.js                | 1 +
 packages/shared/isValidElementType.js                         | 4 ++--
 10 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index a6bba286a6d2..33261df6d76d 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -96,6 +96,7 @@ export const enableLegacyFBSupport = false;
 // -----------------------------------------------------------------------------
 
 export const enableCache = __EXPERIMENTAL__;
+export const enableCacheElement = __EXPERIMENTAL__;
 
 export const enableTransitionTracing = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index d834914a24f8..facc9c7d7836 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -30,6 +30,7 @@ export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = false;
+export const enableCacheElement = true;
 export const enableSchedulerDebugging = false;
 export const debugRenderPhaseSideEffectsForStrictMode = true;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 94c76a4c82f3..94bd83865896 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -24,6 +24,7 @@ export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = false;
+export const enableCacheElement = false;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index e28fd76fcd87..b0c81a7a8bb3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -24,6 +24,7 @@ export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
+export const enableCacheElement = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 4214fc7b79bc..e05dc109843c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -24,6 +24,7 @@ export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = true;
+export const enableCacheElement = true;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index d025cafa3bc4..042c2519043b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -24,6 +24,7 @@ export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = true;
+export const enableCacheElement = true;
 export const enableSchedulerDebugging = false;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 40b1fa2d5d79..6b640311000f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -24,6 +24,7 @@ export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
+export const enableCacheElement = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e5e8e7295c84..5e41ca9992da 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -24,6 +24,7 @@ export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const enableLazyElements = false;
 export const enableCache = true;
+export const enableCacheElement = true;
 export const disableJavaScriptURLs = true;
 export const disableCommentsAsDOMContainers = true;
 export const disableInputAttributeSyncing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index be3d5aa040a2..d5edae5563a5 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -72,6 +72,7 @@ export const enableSelectiveHydration = true;
 
 export const enableLazyElements = true;
 export const enableCache = true;
+export const enableCacheElement = true;
 
 export const disableJavaScriptURLs = true;
 
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 12d00f3e06f9..87424982afc1 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -27,7 +27,7 @@ import {
 } from 'shared/ReactSymbols';
 import {
   enableScopeAPI,
-  enableCache,
+  enableCacheElement,
   enableTransitionTracing,
   enableDebugTracing,
   enableLegacyHidden,
@@ -51,7 +51,7 @@ export default function isValidElementType(type: mixed) {
     (enableLegacyHidden && type === REACT_LEGACY_HIDDEN_TYPE) ||
     type === REACT_OFFSCREEN_TYPE ||
     (enableScopeAPI && type === REACT_SCOPE_TYPE) ||
-    (enableCache && type === REACT_CACHE_TYPE) ||
+    (enableCacheElement && type === REACT_CACHE_TYPE) ||
     (enableTransitionTracing && type === REACT_TRACING_MARKER_TYPE)
   ) {
     return true;

From de516ca5a635220d0cbe82b8f04003820e3f4072 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 21 Mar 2022 21:36:45 -0400
Subject: [PATCH 1222/1603] Bump versions to rc.3 (#24141)

---
 ReactVersions.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index 16fcb45623e6..17fb8ce8474d 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,7 +18,7 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.0.0-rc.2';
+const ReactVersion = '18.0.0-rc.3';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
@@ -26,18 +26,18 @@ const nextChannelLabel = 'next';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
-  'eslint-plugin-react-hooks': '4.2.1-rc.2',
-  'jest-react': '0.12.1-rc.2',
+  'eslint-plugin-react-hooks': '4.2.1-rc.3',
+  'jest-react': '0.12.1-rc.3',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.27.0-rc.2',
-  'react-refresh': '0.11.0-rc.2',
+  'react-reconciler': '0.27.0-rc.3',
+  'react-refresh': '0.11.0-rc.3',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.6.0-rc.2',
-  'use-sync-external-store': '1.0.0-rc.2',
-  scheduler: '0.21.0-rc.2',
+  'use-subscription': '1.6.0-rc.3',
+  'use-sync-external-store': '1.0.0-rc.3',
+  scheduler: '0.21.0-rc.3',
 };
 
 // These packages do not exist in the @next or @latest channel, only

From 3f8990898309c61c817fbf663f5221d9a00d0eaa Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 23 Mar 2022 14:51:59 +0100
Subject: [PATCH 1223/1603] Fix test-build-devtools if build was generated by
 build-for-devtools (#24088)

Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
---
 package.json                    | 2 +-
 packages/shared/ReactVersion.js | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index ec226416e211..80a697031d51 100644
--- a/package.json
+++ b/package.json
@@ -131,7 +131,7 @@
     "test-prod-build": "yarn test --deprecated 'yarn test --prod --build'",
     "test-build": "yarn test --deprecated 'yarn test --build'",
     "test-build-prod": "yarn test --deprecated 'yarn test --build --prod'",
-    "test-build-devtools": "yarn test --build --project devtools",
+    "test-build-devtools": "node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental",
     "debug-test-build-devtools": "yarn test --deprecated 'yarn test-build-devtools --debug'",
     "test-dom-fixture": "cd fixtures/dom && yarn && yarn prestart && yarn test",
     "flow": "node ./scripts/tasks/flow.js",
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index 8d357322ca3a..51aebd51ee57 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -7,10 +7,10 @@
 
 // TODO: this is special because it gets imported during build.
 //
-// TODO: 17.0.3 has not been released to NPM;
+// TODO: 18.0.0 has not been released to NPM;
 // It exists as a placeholder so that DevTools can support work tag changes between releases.
-// When we next publish a release (either 17.0.3 or 17.1.0), update the matching TODO in backend/renderer.js
+// 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 '17.0.3';
+export default '18.0.0';

From e62a8d754548a490c2a3bcff3b420e5eedaf11c0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 23 Mar 2022 14:04:54 -0700
Subject: [PATCH 1224/1603] Store throws a specific Error type
 (UnsupportedBridgeOperationError) (#24147)

When this Error type is detected, DevTools shows a custom error overlay with upgrade/downgrade instructions.
---
 .../src/UnsupportedBridgeOperationError.js    | 21 ++++++++
 .../src/devtools/store.js                     |  5 +-
 .../views/ErrorBoundary/ErrorBoundary.js      | 21 +++++++-
 .../UnsupportedBridgeOperationView.js         | 50 +++++++++++++++++++
 .../devtools/views/ErrorBoundary/shared.css   |  9 ++++
 5 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/UnsupportedBridgeOperationError.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js

diff --git a/packages/react-devtools-shared/src/UnsupportedBridgeOperationError.js b/packages/react-devtools-shared/src/UnsupportedBridgeOperationError.js
new file mode 100644
index 000000000000..c9c974a08db8
--- /dev/null
+++ b/packages/react-devtools-shared/src/UnsupportedBridgeOperationError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index f172cd6aa306..2c5703505c96 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -44,6 +44,7 @@ import type {
   FrontendBridge,
   BridgeProtocol,
 } from 'react-devtools-shared/src/bridge';
+import UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError';
 
 const debug = (methodName, ...args) => {
   if (__DEBUG__) {
@@ -1252,7 +1253,9 @@ export default class Store extends EventEmitter<{|
           break;
         default:
           this._throwAndEmitError(
-            Error(`Unsupported Bridge operation "${operation}"`),
+            new UnsupportedBridgeOperationError(
+              `Unsupported Bridge operation "${operation}"`,
+            ),
           );
       }
     }
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index 06e187a4beec..f4994e23a9bf 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -10,10 +10,12 @@
 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 UnsupportedBridgeOperationError from 'react-devtools-shared/src/UnsupportedBridgeOperationError';
 import TimeoutError from 'react-devtools-shared/src/TimeoutError';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
@@ -30,6 +32,7 @@ type State = {|
   componentStack: string | null,
   errorMessage: string | null,
   hasError: boolean,
+  isUnsupportedBridgeOperationError: boolean,
   isTimeout: boolean,
 |};
 
@@ -39,6 +42,7 @@ const InitialState: State = {
   componentStack: null,
   errorMessage: null,
   hasError: false,
+  isUnsupportedBridgeOperationError: false,
   isTimeout: false,
 };
 
@@ -54,6 +58,8 @@ export default class ErrorBoundary extends Component<Props, State> {
         : null;
 
     const isTimeout = error instanceof TimeoutError;
+    const isUnsupportedBridgeOperationError =
+      error instanceof UnsupportedBridgeOperationError;
 
     const callStack =
       typeof error === 'object' &&
@@ -69,6 +75,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       callStack,
       errorMessage,
       hasError: true,
+      isUnsupportedBridgeOperationError,
       isTimeout,
     };
   }
@@ -102,6 +109,7 @@ export default class ErrorBoundary extends Component<Props, State> {
       componentStack,
       errorMessage,
       hasError,
+      isUnsupportedBridgeOperationError,
       isTimeout,
     } = this.state;
 
@@ -117,6 +125,14 @@ export default class ErrorBoundary extends Component<Props, State> {
             errorMessage={errorMessage}
           />
         );
+      } else if (isUnsupportedBridgeOperationError) {
+        return (
+          <UnsupportedBridgeOperationView
+            callStack={callStack}
+            componentStack={componentStack}
+            errorMessage={errorMessage}
+          />
+        );
       } else {
         return (
           <ErrorView
@@ -125,7 +141,10 @@ export default class ErrorBoundary extends Component<Props, State> {
             dismissError={
               canDismissProp || canDismissState ? this._dismissError : null
             }
-            errorMessage={errorMessage}>
+            errorMessage={errorMessage}
+            isUnsupportedBridgeOperationError={
+              isUnsupportedBridgeOperationError
+            }>
             <Suspense fallback={<SearchingGitHubIssues />}>
               <SuspendingErrorView
                 callStack={callStack}
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 000000000000..5a04718bec6d
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @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) {
+  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/shared.css b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
index ce8ad5f79ce2..cc6c5efe2bd9 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/shared.css
@@ -121,4 +121,13 @@
 
 .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

From 8df8a57eddbb3e89f0383c9d4d7feb6a13034fef Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 24 Mar 2022 06:06:10 -0700
Subject: [PATCH 1225/1603] React DevTools 4.24.1 -> 4.24.2 (#24150)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-timeline/package.json            | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 9 +++++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 14e4904c257e..14715a4006a9 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 3572e6964fa4..27a6af8e45a4 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.1",
-  "version_name": "4.24.1",
+  "version": "4.24.2",
+  "version_name": "4.24.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 3558fae6faa6..b5a492bfab3a 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.1",
-  "version_name": "4.24.1",
+  "version": "4.24.2",
+  "version_name": "4.24.2",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index ec9c59bba102..94798e6b2bad 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index a52539385ca1..3c925ffd8ec1 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 788c36244c33..bde558a98aa6 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index b70cce8bb415..e4ba4cbd87a8 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,15 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 5b12f46c7966..0da6ef64a7c1 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.1",
+  "version": "4.24.2",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.1",
+    "react-devtools-core": "4.24.2",
     "update-notifier": "^2.1.0"
   }
 }

From 1159ff6193d500046d7bb86c234e167ea4b0becb Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Thu, 24 Mar 2022 10:04:12 -0400
Subject: [PATCH 1226/1603] Add details in READMEs for react-devtools local
 developement (#24148)

* Add details in READMEs for react-devtools local developement

* typo

* update yarn for release script
---
 packages/react-devtools-inline/README.md | 8 ++++++--
 packages/react-devtools-shell/README.md  | 4 +++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index 23374147673e..e6566deac3e1 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -348,10 +348,14 @@ To build dependencies from source, run the following command from the root of th
 yarn build-for-devtools
 ```
 ### Download from CI
-To use the latest build from CI, run the following command from the root of the repository:
+To use the latest build from CI, go to `scripts/release/` and run the following commands:
 ```sh
-./scripts/release/download-experimental-build.js
+yarn
+./download-experimental-build.js --commit=main
 ```
+
+Please note that you might need to [create a Circle CI API Token](https://circleci.com/docs/2.0/managing-api-tokens/) and set up an environment variable `CIRCLE_CI_API_TOKEN`.
+
 ## 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
diff --git a/packages/react-devtools-shell/README.md b/packages/react-devtools-shell/README.md
index 6d1d3b76dc9e..da572de45364 100644
--- a/packages/react-devtools-shell/README.md
+++ b/packages/react-devtools-shell/README.md
@@ -2,7 +2,7 @@ Harness for testing local changes to the `react-devtools-inline` and `react-devt
 
 ## Development
 
-This target should be run in parallel with the `react-devtools-inline` package. The first step then is to run that target following the instructions in the [`react-devtools-inline` README](https://github.com/facebook/react/blob/main/packages/react-devtools-inline/README.md).
+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](https://github.com/facebook/react/tree/main/packages/react-devtools-inline#local-development).
 
 The test harness can then be run as follows:
 ```sh
@@ -10,3 +10,5 @@ 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/

From 6b85823b35f75baec9022a40df336d6aee788ce0 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Thu, 24 Mar 2022 14:12:43 -0400
Subject: [PATCH 1227/1603] Clean up Selective Hydration / Event Replay flag
 (#24156)

* clean up selective hydration / replay flag

* dont export return_targetInst
---
 ...DOMServerPartialHydration-test.internal.js |  91 +------
 ...MServerSelectiveHydration-test.internal.js | 222 ++++--------------
 packages/react-dom/src/client/ReactDOM.js     |   3 -
 .../src/events/ReactDOMEventListener.js       | 123 +---------
 .../src/events/ReactDOMEventReplaying.js      | 142 +----------
 .../DOMPluginEventSystem-test.internal.js     |  11 +-
 .../src/ReactFiberReconciler.js               |   5 -
 .../src/ReactFiberReconciler.new.js           |  14 --
 .../src/ReactFiberReconciler.old.js           |  14 --
 packages/shared/ReactFeatureFlags.js          |   3 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 19 files changed, 72 insertions(+), 565 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index f27d002db48f..697ce84fe7bd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2418,18 +2418,8 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(clicks).toBe(0);
-      expect(container.textContent).toBe('Click meHello');
-    } else {
-      expect(clicks).toBe(1);
-      expect(container.textContent).toBe('Hello');
-    }
+    expect(clicks).toBe(0);
+    expect(container.textContent).toBe('Click meHello');
     document.body.removeChild(container);
   });
 
@@ -2511,17 +2501,7 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(onEvent).toHaveBeenCalledTimes(0);
-    } else {
-      expect(onEvent).toHaveBeenCalledTimes(2);
-    }
-
+    expect(onEvent).toHaveBeenCalledTimes(0);
     document.body.removeChild(container);
   });
 
@@ -2601,16 +2581,7 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(clicks).toBe(0);
-    } else {
-      expect(clicks).toBe(2);
-    }
+    expect(clicks).toBe(0);
 
     document.body.removeChild(container);
   });
@@ -2695,17 +2666,7 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(onEvent).toHaveBeenCalledTimes(0);
-    } else {
-      expect(onEvent).toHaveBeenCalledTimes(2);
-    }
-
+    expect(onEvent).toHaveBeenCalledTimes(0);
     document.body.removeChild(container);
   });
 
@@ -2776,19 +2737,8 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(clicksOnChild).toBe(0);
-      expect(clicksOnParent).toBe(0);
-    } else {
-      expect(clicksOnChild).toBe(1);
-      // This will be zero due to the stopPropagation.
-      expect(clicksOnParent).toBe(0);
-    }
+    expect(clicksOnChild).toBe(0);
+    expect(clicksOnParent).toBe(0);
 
     document.body.removeChild(container);
   });
@@ -2864,16 +2814,7 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     // We're now full hydrated.
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(clicks).toBe(0);
-    } else {
-      expect(clicks).toBe(1);
-    }
+    expect(clicks).toBe(0);
 
     document.body.removeChild(parentContainer);
   });
@@ -3142,19 +3083,9 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      // discrete event not replayed
-      expect(submits).toBe(0);
-      expect(container.textContent).toBe('Click meHello');
-    } else {
-      expect(submits).toBe(1);
-      expect(container.textContent).toBe('Hello');
-    }
+    // discrete event not replayed
+    expect(submits).toBe(0);
+    expect(container.textContent).toBe('Click meHello');
 
     document.body.removeChild(container);
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index 91321ea6dd5b..aec22acb3374 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -268,18 +268,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(Scheduler).toHaveYielded(['D', 'A']);
-    } else {
-      // After the click, we should prioritize D and the Click first,
-      // and only after that render A and C.
-      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
-    }
+    expect(Scheduler).toHaveYielded(['D', 'A']);
 
     document.body.removeChild(container);
   });
@@ -353,16 +342,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     dispatchClickEvent(spanC);
     dispatchClickEvent(spanD);
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
-    } else {
-      expect(Scheduler).toHaveYielded(['App']);
-    }
+    expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
 
     await act(async () => {
       suspend = false;
@@ -370,29 +350,12 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    if (
-      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
-    ) {
-      expect(Scheduler).toHaveYielded([
-        'A',
-        'D',
-        // B should render last since it wasn't clicked.
-        'B',
-      ]);
-    } else {
-      // We should prioritize hydrating A, C and D first since we clicked in
-      // them. Only after they're done will we hydrate B.
-      expect(Scheduler).toHaveYielded([
-        'A',
-        'Clicked A',
-        'C',
-        'Clicked C',
-        'D',
-        'Clicked D',
-        // B should render last since it wasn't clicked.
-        'B',
-      ]);
-    }
+    expect(Scheduler).toHaveYielded([
+      'A',
+      'D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
 
     document.body.removeChild(container);
   });
@@ -546,17 +509,8 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      // no replay
-      expect(Scheduler).toHaveYielded(['D', 'A']);
-    } else {
-      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
-    }
+    // no replay
+    expect(Scheduler).toHaveYielded(['D', 'A']);
 
     document.body.removeChild(container);
   });
@@ -635,42 +589,19 @@ describe('ReactDOMServerSelectiveHydration', () => {
     createEventTarget(spanC).virtualclick();
     createEventTarget(spanD).virtualclick();
 
-    if (
-      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
-    ) {
-      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
-    } else {
-      expect(Scheduler).toHaveYielded(['App']);
-    }
+    expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
     await act(async () => {
       suspend = false;
       resolve();
       await promise;
     });
 
-    if (
-      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
-    ) {
-      expect(Scheduler).toHaveYielded([
-        'A',
-        'D',
-        // B should render last since it wasn't clicked.
-        'B',
-      ]);
-    } else {
-      // We should prioritize hydrating A, C and D first since we clicked in
-      // them. Only after they're done will we hydrate B.
-      expect(Scheduler).toHaveYielded([
-        'A',
-        'Clicked A',
-        'C',
-        'Clicked C',
-        'D',
-        'Clicked D',
-        // B should render last since it wasn't clicked.
-        'B',
-      ]);
-    }
+    expect(Scheduler).toHaveYielded([
+      'A',
+      'D',
+      // B should render last since it wasn't clicked.
+      'B',
+    ]);
 
     document.body.removeChild(container);
   });
@@ -750,37 +681,15 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      // We should prioritize hydrating D first because we clicked it.
-      // but event isnt replayed
-      expect(Scheduler).toHaveYielded([
-        'D',
-        'B', // Ideally this should be later.
-        'C',
-        'Hover C',
-        'A',
-      ]);
-    } else {
-      // We should prioritize hydrating D first because we clicked it.
-      // Next we should hydrate C since that's the current hover target.
-      // To simplify implementation details we hydrate both B and C at
-      // the same time since B was already scheduled.
-      // This is ok because it will at least not continue for nested
-      // boundary. See the next test below.
-      expect(Scheduler).toHaveYielded([
-        'D',
-        'Clicked D',
-        'B', // Ideally this should be later.
-        'C',
-        'Hover C',
-        'A',
-      ]);
-    }
+    // We should prioritize hydrating D first because we clicked it.
+    // but event isnt replayed
+    expect(Scheduler).toHaveYielded([
+      'D',
+      'B', // Ideally this should be later.
+      'C',
+      'Hover C',
+      'A',
+    ]);
 
     document.body.removeChild(container);
   });
@@ -904,47 +813,22 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    if (
-      gate(
-        flags =>
-          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-      )
-    ) {
-      // We should prioritize hydrating D first because we clicked it.
-      // but event isnt replayed
-      expect(Scheduler).toHaveYielded([
-        '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',
-      ]);
-    } else {
-      // We should prioritize hydrating D first because we clicked it.
-      // Next we should hydrate C since that's the current hover target.
-      // To simplify implementation details we hydrate both B and C at
-      // the same time since B was already scheduled.
-      // This is ok because it will at least not continue for nested
-      // boundary. See the next test below.
-      expect(Scheduler).toHaveYielded([
-        'D',
-        'Clicked D',
-        'B', // Ideally this should be later.
-        'C',
-        // Capture phase isn't replayed
-        // Mouseout isn't replayed
-        'Mouse Over C',
-        'Mouse Enter C',
-        'A',
-      ]);
-    }
+    // We should prioritize hydrating D first because we clicked it.
+    // but event isnt replayed
+    expect(Scheduler).toHaveYielded([
+      '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
@@ -1091,19 +975,10 @@ describe('ReactDOMServerSelectiveHydration', () => {
       });
 
       expect(OuterScheduler).toHaveYielded(['Suspend Outer']);
-      if (
-        gate(
-          flags =>
-            flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-        )
-      ) {
-        // InnerApp doesn't see the event because OuterApp calls stopPropagation in
-        // capture phase since the event is blocked on suspended component
-        expect(InnerScheduler).toHaveYielded([]);
-      } else {
-        // no stopPropagation
-        expect(InnerScheduler).toHaveYielded(['Suspend Inner']);
-      }
+
+      // InnerApp doesn't see the event because OuterApp calls stopPropagation in
+      // capture phase since the event is blocked on suspended component
+      expect(InnerScheduler).toHaveYielded([]);
 
       expect(Scheduler).toHaveYielded([]);
     });
@@ -1111,7 +986,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
       document.body.innerHTML = '';
     });
 
-    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
     it('Inner hydrates first then Outer', async () => {
       dispatchMouseHoverEvent(innerDiv);
 
@@ -1168,7 +1042,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
       ]);
     });
 
-    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
     it('Outer hydrates first then Inner', async () => {
       dispatchMouseHoverEvent(innerDiv);
 
@@ -1230,7 +1103,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     });
   });
 
-  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
   it('replays event with null target when tree is dismounted', async () => {
     let suspend = false;
     let resolve;
@@ -1549,7 +1421,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
   it('fires capture event handlers and native events if content is hydratable during discrete event', async () => {
     spyOnDev(console, 'error');
     function Child({text}) {
@@ -1633,7 +1504,6 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
-  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
   it('does not propagate discrete event if it cannot be synchronously hydrated', async () => {
     let triggeredParent = false;
     let triggeredChild = false;
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 33e46d37a775..1d78dc08dea9 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -37,7 +37,6 @@ import {
   flushControlled,
   injectIntoDevTools,
   attemptSynchronousHydration,
-  attemptDiscreteHydration,
   attemptContinuousHydration,
   attemptHydrationAtCurrentPriority,
 } from 'react-reconciler/src/ReactFiberReconciler';
@@ -59,7 +58,6 @@ import {
 import {restoreControlledState} from './ReactDOMComponent';
 import {
   setAttemptSynchronousHydration,
-  setAttemptDiscreteHydration,
   setAttemptContinuousHydration,
   setAttemptHydrationAtCurrentPriority,
   setGetCurrentUpdatePriority,
@@ -73,7 +71,6 @@ import {
 } from '../events/ReactDOMControlledComponent';
 
 setAttemptSynchronousHydration(attemptSynchronousHydration);
-setAttemptDiscreteHydration(attemptDiscreteHydration);
 setAttemptContinuousHydration(attemptContinuousHydration);
 setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
 setGetCurrentUpdatePriority(getCurrentUpdatePriority);
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index e2974586ec6a..6ebb56e74041 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,11 +11,8 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
-import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags';
 import {
   isDiscreteEventThatRequiresHydration,
-  queueDiscreteEvent,
-  hasQueuedDiscreteEvents,
   clearIfContinuousEvent,
   queueIfContinuousEvent,
   attemptSynchronousHydration,
@@ -146,123 +143,7 @@ function dispatchContinuousEvent(
   }
 }
 
-export function dispatchEvent(
-  domEventName: DOMEventName,
-  eventSystemFlags: EventSystemFlags,
-  targetContainer: EventTarget,
-  nativeEvent: AnyNativeEvent,
-): void {
-  if (!_enabled) {
-    return;
-  }
-  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
-    dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
-      domEventName,
-      eventSystemFlags,
-      targetContainer,
-      nativeEvent,
-    );
-  } else {
-    dispatchEventOriginal(
-      domEventName,
-      eventSystemFlags,
-      targetContainer,
-      nativeEvent,
-    );
-  }
-}
-
-function dispatchEventOriginal(
-  domEventName: DOMEventName,
-  eventSystemFlags: EventSystemFlags,
-  targetContainer: EventTarget,
-  nativeEvent: AnyNativeEvent,
-) {
-  // TODO: replaying capture phase events is currently broken
-  // because we used to do it during top-level native bubble handlers
-  // but now we use different bubble and capture handlers.
-  // In eager mode, we attach capture listeners early, so we need
-  // to filter them out until we fix the logic to handle them correctly.
-  const allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
-
-  if (
-    allowReplay &&
-    hasQueuedDiscreteEvents() &&
-    isDiscreteEventThatRequiresHydration(domEventName)
-  ) {
-    // If we already have a queue of discrete events, and this is another discrete
-    // event, then we can't dispatch it regardless of its target, since they
-    // need to dispatch in order.
-    queueDiscreteEvent(
-      null, // Flags that we're not actually blocked on anything as far as we know.
-      domEventName,
-      eventSystemFlags,
-      targetContainer,
-      nativeEvent,
-    );
-    return;
-  }
-
-  const blockedOn = findInstanceBlockingEvent(
-    domEventName,
-    eventSystemFlags,
-    targetContainer,
-    nativeEvent,
-  );
-  if (blockedOn === null) {
-    dispatchEventForPluginEventSystem(
-      domEventName,
-      eventSystemFlags,
-      nativeEvent,
-      return_targetInst,
-      targetContainer,
-    );
-    if (allowReplay) {
-      clearIfContinuousEvent(domEventName, nativeEvent);
-    }
-    return;
-  }
-
-  if (allowReplay) {
-    if (isDiscreteEventThatRequiresHydration(domEventName)) {
-      // This this to be replayed later once the target is available.
-      queueDiscreteEvent(
-        blockedOn,
-        domEventName,
-        eventSystemFlags,
-        targetContainer,
-        nativeEvent,
-      );
-      return;
-    }
-    if (
-      queueIfContinuousEvent(
-        blockedOn,
-        domEventName,
-        eventSystemFlags,
-        targetContainer,
-        nativeEvent,
-      )
-    ) {
-      return;
-    }
-    // We need to clear only if we didn't queue because
-    // queueing is accumulative.
-    clearIfContinuousEvent(domEventName, nativeEvent);
-  }
-
-  // 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,
-  );
-}
-
-function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+function dispatchEvent(
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -348,7 +229,7 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve
   );
 }
 
-export let return_targetInst = null;
+let return_targetInst = null;
 
 // Returns a SuspenseInstance or Container if it's blocked.
 // The return_targetInst field above is conceptually part of the return value.
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 9de82a99a7be..db79c79d8fad 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -14,10 +14,7 @@ import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
-import {
-  enableSelectiveHydration,
-  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-} from 'shared/ReactFeatureFlags';
+import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
 import {
   unstable_scheduleCallback as scheduleCallback,
   unstable_NormalPriority as NormalPriority,
@@ -27,12 +24,8 @@ import {
   getContainerFromFiber,
   getSuspenseInstanceFromFiber,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
-import {
-  findInstanceBlockingEvent,
-  return_targetInst,
-} from './ReactDOMEventListener';
+import {findInstanceBlockingEvent} from './ReactDOMEventListener';
 import {setReplayingEvent, resetReplayingEvent} from './CurrentReplayingEvent';
-import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   getInstanceFromNode,
   getClosestInstanceFromNode,
@@ -51,12 +44,6 @@ export function attemptSynchronousHydration(fiber: Object) {
   _attemptSynchronousHydration(fiber);
 }
 
-let attemptDiscreteHydration: (fiber: Object) => void;
-
-export function setAttemptDiscreteHydration(fn: (fiber: Object) => void) {
-  attemptDiscreteHydration = fn;
-}
-
 let attemptContinuousHydration: (fiber: Object) => void;
 
 export function setAttemptContinuousHydration(fn: (fiber: Object) => void) {
@@ -133,7 +120,7 @@ export function hasQueuedContinuousEvents(): boolean {
   return hasAnyQueuedContinuousEvents;
 }
 
-const discreteReplayableEvents: Array<DOMEventName> = [
+const synchronouslyHydratedEvents: Array<DOMEventName> = [
   'mousedown',
   'mouseup',
   'touchcancel',
@@ -167,7 +154,7 @@ const discreteReplayableEvents: Array<DOMEventName> = [
 export function isDiscreteEventThatRequiresHydration(
   eventType: DOMEventName,
 ): boolean {
-  return discreteReplayableEvents.indexOf(eventType) > -1;
+  return synchronouslyHydratedEvents.indexOf(eventType) > -1;
 }
 
 function createQueuedReplayableEvent(
@@ -186,50 +173,6 @@ function createQueuedReplayableEvent(
   };
 }
 
-export function queueDiscreteEvent(
-  blockedOn: null | Container | SuspenseInstance,
-  domEventName: DOMEventName,
-  eventSystemFlags: EventSystemFlags,
-  targetContainer: EventTarget,
-  nativeEvent: AnyNativeEvent,
-): void {
-  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
-    return;
-  }
-  const queuedEvent = createQueuedReplayableEvent(
-    blockedOn,
-    domEventName,
-    eventSystemFlags,
-    targetContainer,
-    nativeEvent,
-  );
-  queuedDiscreteEvents.push(queuedEvent);
-  if (enableSelectiveHydration) {
-    if (queuedDiscreteEvents.length === 1) {
-      // If this was the first discrete event, we might be able to
-      // synchronously unblock it so that preventDefault still works.
-      while (queuedEvent.blockedOn !== null) {
-        const fiber = getInstanceFromNode(queuedEvent.blockedOn);
-        if (fiber === null) {
-          break;
-        }
-        attemptSynchronousHydration(fiber);
-        if (queuedEvent.blockedOn === null) {
-          // We got unblocked by hydration. Let's try again.
-          replayUnblockedEvents();
-          // If we're reblocked, on an inner boundary, we might need
-          // to attempt hydrating that one.
-          continue;
-        } else {
-          // We're still blocked from hydration, we have to give up
-          // and replay later.
-          break;
-        }
-      }
-    }
-  }
-}
-
 // Resets the replaying for this type of continuous event to no event.
 export function clearIfContinuousEvent(
   domEventName: DOMEventName,
@@ -473,26 +416,14 @@ function attemptReplayContinuousQueuedEvent(
       queuedEvent.nativeEvent,
     );
     if (nextBlockedOn === null) {
-      if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
-        const nativeEvent = queuedEvent.nativeEvent;
-        const nativeEventClone = new nativeEvent.constructor(
-          nativeEvent.type,
-          (nativeEvent: any),
-        );
-        setReplayingEvent(nativeEventClone);
-        nativeEvent.target.dispatchEvent(nativeEventClone);
-        resetReplayingEvent();
-      } else {
-        setReplayingEvent(queuedEvent.nativeEvent);
-        dispatchEventForPluginEventSystem(
-          queuedEvent.domEventName,
-          queuedEvent.eventSystemFlags,
-          queuedEvent.nativeEvent,
-          return_targetInst,
-          targetContainer,
-        );
-        resetReplayingEvent();
-      }
+      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);
@@ -520,55 +451,6 @@ function attemptReplayContinuousQueuedEventInMap(
 
 function replayUnblockedEvents() {
   hasScheduledReplayAttempt = false;
-  if (!enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
-    // First replay discrete events.
-    while (queuedDiscreteEvents.length > 0) {
-      const nextDiscreteEvent = queuedDiscreteEvents[0];
-      if (nextDiscreteEvent.blockedOn !== null) {
-        // We're still blocked.
-        // Increase the priority of this boundary to unblock
-        // the next discrete event.
-        const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
-        if (fiber !== null) {
-          attemptDiscreteHydration(fiber);
-        }
-        break;
-      }
-      const targetContainers = nextDiscreteEvent.targetContainers;
-      while (targetContainers.length > 0) {
-        const targetContainer = targetContainers[0];
-        const nextBlockedOn = findInstanceBlockingEvent(
-          nextDiscreteEvent.domEventName,
-          nextDiscreteEvent.eventSystemFlags,
-          targetContainer,
-          nextDiscreteEvent.nativeEvent,
-        );
-        if (nextBlockedOn === null) {
-          // This whole function is in !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-          // so we don't need the new replay behavior code branch.
-          setReplayingEvent(nextDiscreteEvent.nativeEvent);
-          dispatchEventForPluginEventSystem(
-            nextDiscreteEvent.domEventName,
-            nextDiscreteEvent.eventSystemFlags,
-            nextDiscreteEvent.nativeEvent,
-            return_targetInst,
-            targetContainer,
-          );
-          resetReplayingEvent();
-        } else {
-          // We're still blocked. Try again later.
-          nextDiscreteEvent.blockedOn = nextBlockedOn;
-          break;
-        }
-        // This target container was successfully dispatched. Try the next.
-        targetContainers.shift();
-      }
-      if (nextDiscreteEvent.blockedOn === null) {
-        // We've successfully replayed the first event. Let's try the next one.
-        queuedDiscreteEvents.shift();
-      }
-    }
-  }
   // Next replay any continuous events.
   if (queuedFocus !== null && attemptReplayContinuousQueuedEvent(queuedFocus)) {
     queuedFocus = null;
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index bcc3f15c44e7..0362e4e203a8 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -650,16 +650,7 @@ describe('DOMPluginEventSystem', () => {
 
           // We're now full hydrated.
 
-          if (
-            gate(
-              flags =>
-                flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-            )
-          ) {
-            expect(clicks).toBe(0);
-          } else {
-            expect(clicks).toBe(1);
-          }
+          expect(clicks).toBe(0);
 
           document.body.removeChild(parentContainer);
         });
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index abc676ff2396..aacd2018b7d4 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -27,7 +27,6 @@ import {
   flushPassiveEffects as flushPassiveEffects_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
-  attemptDiscreteHydration as attemptDiscreteHydration_old,
   attemptContinuousHydration as attemptContinuousHydration_old,
   attemptHydrationAtCurrentPriority as attemptHydrationAtCurrentPriority_old,
   findHostInstance as findHostInstance_old,
@@ -65,7 +64,6 @@ import {
   flushPassiveEffects as flushPassiveEffects_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
-  attemptDiscreteHydration as attemptDiscreteHydration_new,
   attemptContinuousHydration as attemptContinuousHydration_new,
   attemptHydrationAtCurrentPriority as attemptHydrationAtCurrentPriority_new,
   findHostInstance as findHostInstance_new,
@@ -124,9 +122,6 @@ export const getPublicRootInstance = enableNewReconciler
 export const attemptSynchronousHydration = enableNewReconciler
   ? attemptSynchronousHydration_new
   : attemptSynchronousHydration_old;
-export const attemptDiscreteHydration = enableNewReconciler
-  ? attemptDiscreteHydration_new
-  : attemptDiscreteHydration_old;
 export const attemptContinuousHydration = enableNewReconciler
   ? attemptContinuousHydration_new
   : attemptContinuousHydration_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 136276637d3e..8ae8e42de46f 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -452,20 +452,6 @@ function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   }
 }
 
-export function attemptDiscreteHydration(fiber: Fiber): void {
-  if (fiber.tag !== SuspenseComponent) {
-    // We ignore HostRoots here because we can't increase
-    // their priority and they should not suspend on I/O,
-    // since you have to wrap anything that might suspend in
-    // Suspense.
-    return;
-  }
-  const eventTime = requestEventTime();
-  const lane = SyncLane;
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
-  markRetryLaneIfNotHydrated(fiber, lane);
-}
-
 export function attemptContinuousHydration(fiber: Fiber): void {
   if (fiber.tag !== SuspenseComponent) {
     // We ignore HostRoots here because we can't increase
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index e014519320a5..31171bb073f9 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -452,20 +452,6 @@ function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   }
 }
 
-export function attemptDiscreteHydration(fiber: Fiber): void {
-  if (fiber.tag !== SuspenseComponent) {
-    // We ignore HostRoots here because we can't increase
-    // their priority and they should not suspend on I/O,
-    // since you have to wrap anything that might suspend in
-    // Suspense.
-    return;
-  }
-  const eventTime = requestEventTime();
-  const lane = SyncLane;
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
-  markRetryLaneIfNotHydrated(fiber, lane);
-}
-
 export function attemptContinuousHydration(fiber: Fiber): void {
   if (fiber.tag !== SuspenseComponent) {
     // We ignore HostRoots here because we can't increase
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 33261df6d76d..8dfb8fddaddf 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -44,9 +44,6 @@ export const enableSuspenseLayoutEffectSemantics = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 
-// TODO: Need to review this code one more time before landing
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-
 // Recoil still uses useMutableSource in www, need to delete
 export const enableUseMutableSource = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index facc9c7d7836..90f3b57a472a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -52,7 +52,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 94bd83865896..805812ec9785 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -43,7 +43,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b0c81a7a8bb3..a6c8bb51343f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -43,7 +43,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e05dc109843c..ca6ae7e68591 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -53,7 +53,6 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 042c2519043b..822ca854730a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -43,7 +43,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 6b640311000f..276b74423270 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -43,7 +43,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 5e41ca9992da..73015250bf53 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -43,7 +43,6 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 1f7de0b6b5a1..bdc3abb2a895 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,7 +25,6 @@ export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
-export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index d5edae5563a5..2a2e0e6ffe20 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,7 +31,6 @@ export const {
   disableSchedulerTimeoutInWorkLoop,
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
-  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
   enableClientRenderFallbackOnHydrationMismatch,
   enableClientRenderFallbackOnTextMismatch,
 } = dynamicFeatureFlags;

From 78fa7109c76225187427266e4f682fb713f3b922 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 24 Mar 2022 16:33:59 -0700
Subject: [PATCH 1228/1603] Release script prompts to stop running DEV scripts
 (#24154)

---
 scripts/devtools/build-and-test.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/scripts/devtools/build-and-test.js b/scripts/devtools/build-and-test.js
index 74df66c5d6d2..3c2f493ddd90 100755
--- a/scripts/devtools/build-and-test.js
+++ b/scripts/devtools/build-and-test.js
@@ -21,6 +21,26 @@ const {
 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);

From 4072bdfd6d1fcebe520e114e04047e06992af839 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 25 Mar 2022 04:20:39 +0000
Subject: [PATCH 1229/1603] Add Node 17 to devEngines

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 80a697031d51..f468506cfa7e 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,7 @@
     "yargs": "^15.3.1"
   },
   "devEngines": {
-    "node": "^12.17.0 || 13.x || 14.x || 15.x || 16.x"
+    "node": "^12.17.0 || 13.x || 14.x || 15.x || 16.x || 17.x"
   },
   "jest": {
     "testRegex": "/scripts/jest/dont-run-jest-directly\\.js$"

From 033fe52b48338aec2522f1918408296cbec523d6 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 25 Mar 2022 09:02:39 -0700
Subject: [PATCH 1230/1603] DevTools imports (#24163)

* Update DevTools imports: react-dom -> react-dom/client
* Silence ReactDOM.render warning in DevTools test shell
---
 packages/react-devtools-core/src/standalone.js        | 5 +----
 packages/react-devtools-extensions/src/main.js        | 3 ++-
 packages/react-devtools-shell/src/app/Iframe/index.js | 4 ++--
 packages/react-devtools-shell/src/app/devtools.js     | 3 +--
 packages/react-devtools-shell/src/app/index.js        | 1 +
 packages/react-devtools-shell/src/e2e/app.js          | 4 ++--
 packages/react-devtools-shell/src/e2e/devtools.js     | 4 ++--
 packages/react-devtools-shell/src/multi/devtools.js   | 2 +-
 8 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 6b598efa2244..72b037d1747d 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -8,10 +8,7 @@
  */
 
 import {createElement} from 'react';
-import {
-  // $FlowFixMe Flow does not yet know about flushSync()
-  flushSync,
-} from 'react-dom';
+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';
diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 2d67aa2cd7bd..a0f9bcea17a2 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -1,7 +1,8 @@
 /* global chrome */
 
 import {createElement} from 'react';
-import {createRoot, flushSync} from 'react-dom';
+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 {getBrowserName, getBrowserTheme} from './utils';
diff --git a/packages/react-devtools-shell/src/app/Iframe/index.js b/packages/react-devtools-shell/src/app/Iframe/index.js
index d22c33f2d9ef..f4b562ee311d 100644
--- a/packages/react-devtools-shell/src/app/Iframe/index.js
+++ b/packages/react-devtools-shell/src/app/Iframe/index.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import {Fragment} from 'react';
-import * as ReactDOM from 'react-dom';
+import {createPortal} from 'react-dom';
 
 export default function Iframe() {
   return (
@@ -56,7 +56,7 @@ function Frame(props) {
         style={iframeStyle}
       />
 
-      {element ? ReactDOM.createPortal(props.children, element) : null}
+      {element ? createPortal(props.children, element) : null}
     </Fragment>
   );
 }
diff --git a/packages/react-devtools-shell/src/app/devtools.js b/packages/react-devtools-shell/src/app/devtools.js
index a4e21c81d772..5915275978a4 100644
--- a/packages/react-devtools-shell/src/app/devtools.js
+++ b/packages/react-devtools-shell/src/app/devtools.js
@@ -1,8 +1,7 @@
 /** @flow */
 
 import {createElement} from 'react';
-// $FlowFixMe Flow does not yet know about createRoot()
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index 89f14c8e3150..3ec70de06715 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -28,6 +28,7 @@ ignoreErrors([
   'Warning: Legacy context API',
   'Warning: Unsafe lifecycle methods',
   'Warning: %s is deprecated in StrictMode.', // findDOMNode
+  'Warning: ReactDOM.render is no longer supported in React 18',
 ]);
 ignoreWarnings(['Warning: componentWillReceiveProps has been renamed']);
 ignoreLogs([]);
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
index 71f33f904487..f9d2ba1dad5c 100644
--- a/packages/react-devtools-shell/src/e2e/app.js
+++ b/packages/react-devtools-shell/src/e2e/app.js
@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as ReactDOMClient from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 
 const container = document.createElement('div');
 
@@ -14,7 +14,7 @@ const container = document.createElement('div');
 // so that it can load things other than just ToDoList.
 const App = require('./apps/ListApp').default;
 
-const root = ReactDOMClient.createRoot(container);
+const root = createRoot(container);
 root.render(<App />);
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
index 059d330e83c9..3b4ac2b99282 100644
--- a/packages/react-devtools-shell/src/e2e/devtools.js
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as ReactDOMClient from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
@@ -34,7 +34,7 @@ function init(appIframe, devtoolsContainer, appSource) {
 
   inject(contentDocument, appSource, () => {
     // $FlowFixMe Flow doesn't know about createRoot() yet.
-    ReactDOMClient.createRoot(devtoolsContainer).render(
+    createRoot(devtoolsContainer).render(
       <DevTools
         hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
         showTabBar={true}
diff --git a/packages/react-devtools-shell/src/multi/devtools.js b/packages/react-devtools-shell/src/multi/devtools.js
index 6b1313fa7a1d..a00e19418bf3 100644
--- a/packages/react-devtools-shell/src/multi/devtools.js
+++ b/packages/react-devtools-shell/src/multi/devtools.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {
   activate as activateBackend,
   createBridge as createBackendBridge,

From a6bdb882b73cd0b2702656d767606c74ac0b6670 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 25 Mar 2022 09:41:13 -0700
Subject: [PATCH 1231/1603] Attach DevTools Tree keyboard events to the Tree
 container (not the document) (#24164)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../src/devtools/views/Components/Tree.js     | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 3126bfc8f0d3..23d136491253 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -126,10 +126,6 @@ export default function Tree(props: Props) {
         return;
       }
 
-      // TODO We should ignore arrow keys if the focus is outside of DevTools.
-      // Otherwise the inline (embedded) DevTools might change selection unexpectedly,
-      // e.g. when a text input or a select has focus.
-
       let element;
       switch (event.key) {
         case 'ArrowDown':
@@ -192,14 +188,25 @@ export default function Tree(props: Props) {
       setIsNavigatingWithKeyboard(true);
     };
 
-    // It's important to listen to the ownerDocument to support the browser extension.
-    // Here we use portals to render individual tabs (e.g. Profiler),
-    // and the root document might belong to a different window.
-    const ownerDocument = treeRef.current.ownerDocument;
-    ownerDocument.addEventListener('keydown', handleKeyDown);
+    // 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 () => {
-      ownerDocument.removeEventListener('keydown', handleKeyDown);
+      container.removeEventListener('keydown', handleKeyDown);
     };
   }, [dispatch, selectedElementID, store]);
 

From 3787230b1bff799bb8837b5a30e2d11d24b77ce1 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@me.com>
Date: Fri, 25 Mar 2022 17:38:10 +0000
Subject: [PATCH 1232/1603] Fix fixture

---
 fixtures/ssr/src/components/Chrome.js | 6 +-----
 fixtures/ssr/src/index.js             | 2 +-
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js
index 23056dab92a4..5cf81a877f7e 100644
--- a/fixtures/ssr/src/components/Chrome.js
+++ b/fixtures/ssr/src/components/Chrome.js
@@ -1,8 +1,4 @@
-import React, {
-  Component,
-  Suspense,
-  unstable_startTransition as startTransition,
-} from 'react';
+import React, {Component, Suspense, startTransition} from 'react';
 
 import Theme, {ThemeToggleButton} from './Theme';
 
diff --git a/fixtures/ssr/src/index.js b/fixtures/ssr/src/index.js
index 37cc25cb7167..f6457ce57067 100644
--- a/fixtures/ssr/src/index.js
+++ b/fixtures/ssr/src/index.js
@@ -3,4 +3,4 @@ import {hydrateRoot} from 'react-dom/client';
 
 import App from './components/App';
 
-let root = hydrateRoot(document, <App assets={window.assetManifest} />);
+hydrateRoot(document, <App assets={window.assetManifest} />);

From e7d0053e65db49a536440eb24e6c1e4961d976f6 Mon Sep 17 00:00:00 2001
From: salazarm <salazarm@users.noreply.github.com>
Date: Fri, 25 Mar 2022 14:03:06 -0400
Subject: [PATCH 1233/1603] [fizz] Fix validateIterable call (#24166)

* fix validate iterable call

* supports iterable

* gate test by experimental
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 23 +++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 3ced96af2956..568a931c7d9e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2508,4 +2508,27 @@ describe('ReactDOMFizzServer', () => {
       <span>default</span>,
     ]);
   });
+
+  // @gate experimental
+  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(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <ul>{mappedJSX}</ul>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <ul>
+        <li>a</li>
+        <li>b</li>
+      </ul>,
+    );
+  });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index c09d21cb55cf..018235aae087 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1181,7 +1181,7 @@ function renderNodeDestructive(
     const iteratorFn = getIteratorFn(node);
     if (iteratorFn) {
       if (__DEV__) {
-        validateIterable(node, iteratorFn());
+        validateIterable(node, iteratorFn);
       }
       const iterator = iteratorFn.call(node);
       if (iterator) {

From ba0aee5d71874202ebf8760a802bb1d6f2f61a5e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Mon, 28 Mar 2022 14:25:30 -0400
Subject: [PATCH 1234/1603] DevTools bugfix: Ignore duplicate welcome "message"
 events (#24186)

---
 .../react-devtools-extensions/src/backend.js  | 21 +++++++++++++++++++
 .../src/contentScript.js                      | 10 ++++-----
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-extensions/src/backend.js b/packages/react-devtools-extensions/src/backend.js
index a102bed3a90a..ad55ed6d50fd 100644
--- a/packages/react-devtools-extensions/src/backend.js
+++ b/packages/react-devtools-extensions/src/backend.js
@@ -6,6 +6,8 @@
 
 'use strict';
 
+let welcomeHasInitialized = false;
+
 function welcome(event) {
   if (
     event.source !== window ||
@@ -14,6 +16,25 @@ function welcome(event) {
     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__);
diff --git a/packages/react-devtools-extensions/src/contentScript.js b/packages/react-devtools-extensions/src/contentScript.js
index c914c6e7b3df..8021fea78052 100644
--- a/packages/react-devtools-extensions/src/contentScript.js
+++ b/packages/react-devtools-extensions/src/contentScript.js
@@ -25,15 +25,15 @@ function handleMessageFromDevtools(message) {
   );
 }
 
-function handleMessageFromPage(evt) {
+function handleMessageFromPage(event) {
   if (
-    evt.source === window &&
-    evt.data &&
-    evt.data.source === 'react-devtools-bridge'
+    event.source === window &&
+    event.data &&
+    event.data.source === 'react-devtools-bridge'
   ) {
     backendInitialized = true;
 
-    port.postMessage(evt.data.payload);
+    port.postMessage(event.data.payload);
   }
 }
 

From fe6e0741286345edb2aa23784c21f8ea611ebdea Mon Sep 17 00:00:00 2001
From: Yash Srivastav <yash111998@gmail.com>
Date: Tue, 29 Mar 2022 10:45:14 +0100
Subject: [PATCH 1235/1603] Fix usage of console.error to prevent transform
 (#24188)

We were suppressing the `react-internals/warning-args` lint rule
for the call to `console.error` in `defaultOnRecoverableError`.

As far as I could tell, the lint rule exists because on dev builds,
we replace all calls to `console.error` with [this error
function](https://github.com/facebook/react/blob/main/packages/shared/consoleWithStackDev.js#L31-L37)
which expects a format string + args and nothing else. We were trying
to pass in an `Error` object directly. After this commit's change,
we will still be passing an `Error` but the transform won't occur.
---
 packages/react-dom/src/client/ReactDOMRoot.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index c7820a703a0b..55c340be7dff 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -81,8 +81,8 @@ const defaultOnRecoverableError =
       reportError
     : (error: mixed) => {
         // In older browsers and test environments, fallback to console.error.
-        // eslint-disable-next-line react-internal/no-production-logging, react-internal/warning-args
-        console.error(error);
+        // eslint-disable-next-line react-internal/no-production-logging
+        console['error'](error);
       };
 
 function ReactDOMRoot(internalRoot: FiberRoot) {

From fc46dba67fc47783bbb5919e656c66c6e51ce16d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 29 Mar 2022 10:53:46 -0400
Subject: [PATCH 1236/1603] Remove rc suffix from versions (#24190)

* Remove rc suffix from versions

* Bump eslint-plugin-react-hooks version

I noticed this one was behind the latest published version
---
 ReactVersions.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index 17fb8ce8474d..c3a865928cdf 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,7 +18,7 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.0.0-rc.3';
+const ReactVersion = '18.0.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
@@ -26,18 +26,18 @@ const nextChannelLabel = 'next';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
-  'eslint-plugin-react-hooks': '4.2.1-rc.3',
-  'jest-react': '0.12.1-rc.3',
+  'eslint-plugin-react-hooks': '4.4.0',
+  'jest-react': '0.12.1',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.27.0-rc.3',
-  'react-refresh': '0.11.0-rc.3',
+  'react-reconciler': '0.27.0',
+  'react-refresh': '0.11.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.6.0-rc.3',
-  'use-sync-external-store': '1.0.0-rc.3',
-  scheduler: '0.21.0-rc.3',
+  'use-subscription': '1.6.0',
+  'use-sync-external-store': '1.0.0',
+  scheduler: '0.21.0',
 };
 
 // These packages do not exist in the @next or @latest channel, only

From eaa493e5325cec0d8ba41bc0a4bcb300d1a72b7d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 29 Mar 2022 11:11:31 -0400
Subject: [PATCH 1237/1603] Profiler should only report stateful hooks that
 change between renders (#24189)

The Profiler has an advanced feature that shows why a component re-rendered. In the case of props and (class) state, it shows the names of props/state values that changed between renders. For hooks, DevTools tries to detect which ones may been related to the update by comparing prev/next internal hook structures.

My initial implementation tried to detect all changed hooks. In hindsight this is confusing, because only stateful hooks (e.g. useState, useReducer, and useSyncExternalStore) can schedule an update. (Other types of hooks can change between renders, but in a reactive way.) This PR changes the behavior to only report hooks that scheduled the update.
---
 .../__snapshots__/profilingCache-test.js.snap | 684 +++++++++---------
 .../src/__tests__/profilingCache-test.js      | 217 ++++--
 .../src/backend/renderer.js                   |  64 +-
 3 files changed, 523 insertions(+), 442 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
index 3611f67652aa..9724472b31cb 100644
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
@@ -4543,245 +4543,6 @@ Object {
 }
 `;
 
-exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 0 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-  },
-  "duration": 0,
-  "effectDuration": 0,
-  "fiberActualDurations": Map {
-    1 => 0,
-    2 => 0,
-    3 => 0,
-    4 => 0,
-  },
-  "fiberSelfDurations": Map {
-    1 => 0,
-    2 => 0,
-    3 => 0,
-    4 => 0,
-  },
-  "passiveEffectDuration": 0,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 1 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": false,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    4 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "fiberSelfDurations": Map {
-    4 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 2 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": false,
-      "didHooksChange": true,
-      "hooks": Array [
-        1,
-      ],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    4 => 0,
-  },
-  "fiberSelfDurations": Map {
-    4 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "Component",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": null,
-      "type": 5,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 3 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": false,
-      "didHooksChange": true,
-      "hooks": Array [
-        0,
-      ],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    4 => 0,
-  },
-  "fiberSelfDurations": Map {
-    4 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "Component",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": null,
-      "type": 5,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 4 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": true,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    4 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "fiberSelfDurations": Map {
-    4 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should properly detect changed hooks: CommitDetails commitIndex: 5 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": true,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    4 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "fiberSelfDurations": Map {
-    4 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
 exports[`ProfilingCache should properly detect changed hooks: imported data 1`] = `
 Object {
   "dataForRoots": Array [
@@ -4790,7 +4551,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              4,
+              3,
               Object {
                 "context": null,
                 "didHooksChange": false,
@@ -4815,10 +4576,6 @@ Object {
               3,
               0,
             ],
-            Array [
-              4,
-              0,
-            ],
           ],
           "fiberSelfDurations": Array [
             Array [
@@ -4833,10 +4590,6 @@ Object {
               3,
               0,
             ],
-            Array [
-              4,
-              0,
-            ],
           ],
           "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
@@ -4854,7 +4607,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              4,
+              3,
               Object {
                 "context": false,
                 "didHooksChange": false,
@@ -4868,12 +4621,8 @@ Object {
             ],
           ],
           "duration": 0,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
             Array [
               3,
               0,
@@ -4888,10 +4637,6 @@ Object {
             ],
           ],
           "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
             Array [
               3,
               0,
@@ -4905,7 +4650,7 @@ Object {
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
@@ -4921,7 +4666,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              4,
+              3,
               Object {
                 "context": false,
                 "didHooksChange": true,
@@ -4935,27 +4680,27 @@ Object {
             ],
           ],
           "duration": 0,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
             Array [
-              4,
+              3,
               0,
             ],
           ],
           "fiberSelfDurations": Array [
             Array [
-              4,
+              3,
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
               "displayName": "Component",
               "hocDisplayNames": null,
-              "id": 4,
+              "id": 3,
               "key": null,
               "type": 5,
             },
@@ -4964,7 +4709,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              4,
+              3,
               Object {
                 "context": false,
                 "didHooksChange": true,
@@ -4978,27 +4723,27 @@ Object {
             ],
           ],
           "duration": 0,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
             Array [
-              4,
+              3,
               0,
             ],
           ],
           "fiberSelfDurations": Array [
             Array [
-              4,
+              3,
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
               "displayName": "Component",
               "hocDisplayNames": null,
-              "id": 4,
+              "id": 3,
               "key": null,
               "type": 5,
             },
@@ -5007,7 +4752,7 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              4,
+              3,
               Object {
                 "context": true,
                 "didHooksChange": false,
@@ -5019,12 +4764,8 @@ Object {
             ],
           ],
           "duration": 0,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
             Array [
               3,
               0,
@@ -5039,10 +4780,6 @@ Object {
             ],
           ],
           "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
             Array [
               3,
               0,
@@ -5056,7 +4793,7 @@ Object {
               0,
             ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
@@ -5072,11 +4809,13 @@ Object {
         Object {
           "changeDescriptions": Array [
             Array [
-              4,
+              3,
               Object {
-                "context": true,
-                "didHooksChange": false,
-                "hooks": Array [],
+                "context": false,
+                "didHooksChange": true,
+                "hooks": Array [
+                  2,
+                ],
                 "isFirstMount": false,
                 "props": Array [],
                 "state": null,
@@ -5084,53 +4823,29 @@ Object {
             ],
           ],
           "duration": 0,
-          "effectDuration": null,
+          "effectDuration": 0,
           "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
             Array [
               3,
               0,
             ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
           ],
           "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
             Array [
               3,
               0,
             ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
           ],
-          "passiveEffectDuration": null,
+          "passiveEffectDuration": 0,
           "priorityLevel": "Immediate",
           "timestamp": 0,
           "updaters": Array [
             Object {
-              "displayName": "render()",
+              "displayName": "Component",
               "hocDisplayNames": null,
-              "id": 1,
+              "id": 3,
               "key": null,
-              "type": 11,
+              "type": 5,
             },
           ],
         },
@@ -5188,23 +4903,13 @@ Object {
           0,
           1,
           3,
-          2,
-          2,
-          0,
-          1,
-          0,
-          4,
-          3,
-          0,
-          1,
-          4,
           5,
-          3,
+          2,
           0,
           2,
           0,
           4,
-          4,
+          3,
           0,
         ],
         Array [
@@ -5312,6 +5017,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
           ],
         ],
         Array [
@@ -5341,6 +5062,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
           ],
         ],
         Array [
@@ -5370,6 +5107,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 4,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
           ],
         ],
         Array [
@@ -5397,7 +5150,23 @@ Object {
               "duration": 0,
               "lanes": "0b0000000000000000000000000000001",
               "timestamp": 10,
-              "type": "commit",
+              "type": "commit",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
             },
           ],
         ],
@@ -5428,6 +5197,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 6,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
           ],
         ],
       ],
@@ -5446,6 +5231,48 @@ Object {
           "type": "layout-effect-mount",
           "warning": null,
         },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
         Object {
           "componentName": "Component",
           "duration": 0,
@@ -5460,6 +5287,34 @@ Object {
           "type": "render",
           "warning": null,
         },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
         Object {
           "componentName": "Component",
           "duration": 0,
@@ -5467,6 +5322,20 @@ Object {
           "type": "render",
           "warning": null,
         },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
         Object {
           "componentName": "Component",
           "duration": 0,
@@ -5474,6 +5343,20 @@ Object {
           "type": "render",
           "warning": null,
         },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
         Object {
           "componentName": "Component",
           "duration": 0,
@@ -5481,6 +5364,20 @@ Object {
           "type": "render",
           "warning": null,
         },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
         Object {
           "componentName": "Component",
           "duration": 0,
@@ -5488,6 +5385,27 @@ Object {
           "type": "render",
           "warning": null,
         },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "layout-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
+        Object {
+          "componentName": "Component",
+          "duration": 0,
+          "timestamp": 10,
+          "type": "passive-effect-mount",
+          "warning": null,
+        },
       ],
       "duration": 20,
       "flamechart": Array [],
@@ -5686,6 +5604,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 2,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 2,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
             Object {
               "batchUID": 3,
               "depth": 0,
@@ -5710,6 +5644,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 3,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 3,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
             Object {
               "batchUID": 4,
               "depth": 0,
@@ -5734,6 +5684,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 4,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 4,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
             Object {
               "batchUID": 5,
               "depth": 0,
@@ -5758,6 +5724,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 5,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 5,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
             Object {
               "batchUID": 6,
               "depth": 0,
@@ -5782,6 +5764,22 @@ Object {
               "timestamp": 10,
               "type": "commit",
             },
+            Object {
+              "batchUID": 6,
+              "depth": 1,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "layout-effects",
+            },
+            Object {
+              "batchUID": 6,
+              "depth": 0,
+              "duration": 0,
+              "lanes": "0b0000000000000000000000000000001",
+              "timestamp": 10,
+              "type": "passive-effects",
+            },
           ],
         ],
         Array [
@@ -5942,12 +5940,6 @@ Object {
           "type": "schedule-render",
           "warning": null,
         },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
       ],
       "snapshotHeight": 0,
       "snapshots": Array [],
@@ -6039,10 +6031,8 @@ Object {
   "changeDescriptions": Map {
     5 => Object {
       "context": null,
-      "didHooksChange": true,
-      "hooks": Array [
-        0,
-      ],
+      "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -6059,10 +6049,8 @@ Object {
     },
     7 => Object {
       "context": null,
-      "didHooksChange": true,
-      "hooks": Array [
-        0,
-      ],
+      "didHooksChange": false,
+      "hooks": Array [],
       "isFirstMount": false,
       "props": Array [
         "count",
@@ -6506,10 +6494,8 @@ Object {
               5,
               Object {
                 "context": null,
-                "didHooksChange": true,
-                "hooks": Array [
-                  0,
-                ],
+                "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [
                   "count",
@@ -6532,10 +6518,8 @@ Object {
               7,
               Object {
                 "context": null,
-                "didHooksChange": true,
-                "hooks": Array [
-                  0,
-                ],
+                "didHooksChange": false,
+                "hooks": Array [],
                 "isFirstMount": false,
                 "props": Array [
                   "count",
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index c1d17fd0f6a3..b5a5d35da23b 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -313,7 +313,6 @@ describe('ProfilingCache', () => {
 
   it('should properly detect changed hooks', () => {
     const Context = React.createContext(0);
-    const Context2 = React.createContext(0);
 
     function reducer(state, action) {
       switch (action.type) {
@@ -324,6 +323,19 @@ describe('ProfilingCache', () => {
       }
     }
 
+    let snapshot = 0;
+    function getServerSnapshot() {
+      return snapshot;
+    }
+    function getClientSnapshot() {
+      return snapshot;
+    }
+
+    let syncExternalStoreCallback;
+    function subscribe(callback) {
+      syncExternalStoreCallback = callback;
+    }
+
     let dispatch = null;
     let setState = null;
 
@@ -331,20 +343,31 @@ describe('ProfilingCache', () => {
       // 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);
-      React.useContext(Context2);
 
-      // These hooks and their dependencies may not change between renders.
-      // We're using them to ensure that they don't trigger false positives.
+      // 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".
+      // 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;
     };
@@ -355,9 +378,7 @@ describe('ProfilingCache', () => {
     utils.act(() =>
       legacyRender(
         <Context.Provider value={true}>
-          <Context2.Provider value={true}>
-            <Component count={1} />
-          </Context2.Provider>
+          <Component count={1} />
         </Context.Provider>,
         container,
       ),
@@ -367,87 +388,173 @@ describe('ProfilingCache', () => {
     utils.act(() =>
       legacyRender(
         <Context.Provider value={true}>
-          <Context2.Provider value={true}>
-            <Component count={2} />
-          </Context2.Provider>
+          <Component count={2} />
         </Context.Provider>,
         container,
       ),
     );
 
-    // Third render has a changed reducer hook
+    // Third render has a changed reducer hook.
     utils.act(() => dispatch({type: 'invert'}));
 
-    // Fourth render has a changed state hook
+    // Fourth render has a changed state hook.
     utils.act(() => setState('def'));
 
-    // Fifth render has a changed context value for context 1, but no changed hook.
+    // Fifth render has a changed context value, but no changed hook.
     utils.act(() =>
       legacyRender(
         <Context.Provider value={false}>
-          <Context2.Provider value={true}>
-            <Component count={2} />
-          </Context2.Provider>
+          <Component count={2} />
         </Context.Provider>,
         container,
       ),
     );
 
-    // Sixth render has another changed context value for context 2, but no changed hook.
-    utils.act(() =>
-      legacyRender(
-        <Context.Provider value={false}>
-          <Context2.Provider value={false}>
-            <Component count={2} />
-          </Context2.Provider>
-        </Context.Provider>,
-        container,
-      ),
-    );
+    // 6th renderer is triggered by a sync external store change.
+    utils.act(() => {
+      snapshot++;
+      syncExternalStoreCallback();
+    });
+
     utils.act(() => store.profilerStore.stopProfiling());
 
-    const allCommitData = [];
+    const rootID = store.roots[0];
 
-    function Validator({commitIndex, previousCommitDetails, rootID}) {
-      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
-      if (previousCommitDetails != null) {
-        expect(commitData).toEqual(previousCommitDetails);
-      } else {
-        allCommitData.push(commitData);
-        expect(commitData).toMatchSnapshot(
-          `CommitDetails commitIndex: ${commitIndex}`,
+    const allChangeDescriptions = [];
+
+    function getChangeDescriptions(commitIndex, label) {
+      let changeDescriptions;
+
+      function Validator() {
+        const commitData = store.profilerStore.getCommitData(
+          rootID,
+          commitIndex,
         );
-      }
-      return null;
-    }
 
-    const rootID = store.roots[0];
+        changeDescriptions = commitData.changeDescriptions;
+
+        allChangeDescriptions.push(changeDescriptions);
+
+        return null;
+      }
 
-    for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
       utils.act(() => {
-        TestRenderer.create(
-          <Validator
-            commitIndex={commitIndex}
-            previousCommitDetails={null}
-            rootID={rootID}
-          />,
-        );
+        TestRenderer.create(<Validator />);
       });
+
+      return changeDescriptions;
     }
 
-    expect(allCommitData).toHaveLength(6);
+    // 1st render: No change
+    expect(getChangeDescriptions(0)).toMatchInlineSnapshot(`
+      Map {
+        3 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+      }
+    `);
+
+    // 2nd render: Changed props
+    expect(getChangeDescriptions(1)).toMatchInlineSnapshot(`
+      Map {
+        3 => Object {
+          "context": false,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+      }
+    `);
+
+    // 3rd render: Changed useReducer
+    expect(getChangeDescriptions(2)).toMatchInlineSnapshot(`
+      Map {
+        3 => Object {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": Array [
+            1,
+          ],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 4th render: Changed useState
+    expect(getChangeDescriptions(3)).toMatchInlineSnapshot(`
+      Map {
+        3 => Object {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": Array [
+            0,
+          ],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 5th render: Changed context
+    expect(getChangeDescriptions(4)).toMatchInlineSnapshot(`
+      Map {
+        3 => Object {
+          "context": true,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+      }
+    `);
+
+    // 6th render: Sync external store
+    expect(getChangeDescriptions(5)).toMatchInlineSnapshot(`
+      Map {
+        3 => Object {
+          "context": false,
+          "didHooksChange": true,
+          "hooks": Array [
+            2,
+          ],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+      }
+    `);
+
+    expect(allChangeDescriptions).toHaveLength(6);
 
     // Export and re-import profile data and make sure it is retained.
     utils.exportImportHelper(bridge, store);
 
+    function ExportImportValidator({commitIndex}) {
+      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
+
+      expect(commitData.changeDescriptions).toEqual(
+        allChangeDescriptions[commitIndex],
+      );
+
+      return null;
+    }
+
     for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
       utils.act(() => {
         TestRenderer.create(
-          <Validator
-            commitIndex={commitIndex}
-            previousCommitDetails={allCommitData[commitIndex]}
-            rootID={rootID}
-          />,
+          <ExportImportValidator commitIndex={commitIndex} />,
         );
       });
     }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 3c18ce408309..50ba03d964ca 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -93,7 +93,6 @@ import {
   enableStyleXFeatures,
 } from 'react-devtools-feature-flags';
 import is from 'shared/objectIs';
-import isArray from 'shared/isArray';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import {getStyleXData} from './StyleX/utils';
 import {createProfilingHooks} from './profilingHooks';
@@ -1444,50 +1443,41 @@ export function attach(
     return null;
   }
 
-  function areHookInputsEqual(
-    nextDeps: Array<mixed>,
-    prevDeps: Array<mixed> | null,
-  ) {
-    if (prevDeps === null) {
+  function isHookThatCanScheduleUpdate(hookObject: any) {
+    const queue = hookObject.queue;
+    if (!queue) {
       return false;
     }
 
-    for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
-      if (is(nextDeps[i], prevDeps[i])) {
-        continue;
-      }
-      return false;
-    }
-    return true;
-  }
+    const boundHasOwnProperty = hasOwnProperty.bind(queue);
 
-  function isEffect(memoizedState) {
-    if (memoizedState === null || typeof memoizedState !== 'object') {
-      return false;
-    }
-    const {deps} = memoizedState;
-    const boundHasOwnProperty = hasOwnProperty.bind(memoizedState);
-    return (
-      boundHasOwnProperty('create') &&
-      boundHasOwnProperty('destroy') &&
-      boundHasOwnProperty('deps') &&
-      boundHasOwnProperty('next') &&
-      boundHasOwnProperty('tag') &&
-      (deps === null || isArray(deps))
-    );
+    // Detect the shape of useState() or useReducer()
+    // using the attributes that are unique to these hooks
+    // but also stable (e.g. not tied to current Lanes implementation)
+    const isStateOrReducer =
+      boundHasOwnProperty('pending') &&
+      boundHasOwnProperty('dispatch') &&
+      typeof queue.dispatch === 'function';
+
+    // Detect useSyncExternalStore()
+    const isSyncExternalStore =
+      boundHasOwnProperty('value') &&
+      boundHasOwnProperty('getSnapshot') &&
+      typeof queue.getSnapshot === 'function';
+
+    // These are the only types of hooks that can schedule an update.
+    return isStateOrReducer || isSyncExternalStore;
   }
 
-  function didHookChange(prev: any, next: any): boolean {
+  function didStatefulHookChange(prev: any, next: any): boolean {
     const prevMemoizedState = prev.memoizedState;
     const nextMemoizedState = next.memoizedState;
 
-    if (isEffect(prevMemoizedState) && isEffect(nextMemoizedState)) {
-      return (
-        prevMemoizedState !== nextMemoizedState &&
-        !areHookInputsEqual(nextMemoizedState.deps, prevMemoizedState.deps)
-      );
+    if (isHookThatCanScheduleUpdate(prev)) {
+      return prevMemoizedState !== nextMemoizedState;
     }
-    return nextMemoizedState !== prevMemoizedState;
+
+    return false;
   }
 
   function didHooksChange(prev: any, next: any): boolean {
@@ -1503,7 +1493,7 @@ export function attach(
       next.hasOwnProperty('queue')
     ) {
       while (next !== null) {
-        if (didHookChange(prev, next)) {
+        if (didStatefulHookChange(prev, next)) {
           return true;
         } else {
           next = next.next;
@@ -1530,7 +1520,7 @@ export function attach(
         next.hasOwnProperty('queue')
       ) {
         while (next !== null) {
-          if (didHookChange(prev, next)) {
+          if (didStatefulHookChange(prev, next)) {
             indices.push(index);
           }
           next = next.next;

From 34aa5cfe0d9b6ec4667e02bf46ab34d83dfb2d6d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 29 Mar 2022 12:04:56 -0400
Subject: [PATCH 1238/1603] Update local package.jsons for 18

---
 packages/create-subscription/package.json       | 4 ++--
 packages/eslint-plugin-react-hooks/package.json | 2 +-
 packages/jest-react/package.json                | 6 +++---
 packages/react-art/package.json                 | 6 +++---
 packages/react-dom/package.json                 | 6 +++---
 packages/react-is/package.json                  | 2 +-
 packages/react-reconciler/package.json          | 6 +++---
 packages/react-test-renderer/package.json       | 8 ++++----
 packages/react/package.json                     | 2 +-
 packages/scheduler/package.json                 | 2 +-
 packages/use-subscription/package.json          | 4 ++--
 packages/use-sync-external-store/package.json   | 2 +-
 12 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/create-subscription/package.json b/packages/create-subscription/package.json
index 3d66d01ce8e3..a7b333446113 100644
--- a/packages/create-subscription/package.json
+++ b/packages/create-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "create-subscription",
   "description": "utility for subscribing to external data sources inside React components",
-  "version": "17.0.0",
+  "version": "18.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
@@ -14,7 +14,7 @@
     "cjs/"
   ],
   "peerDependencies": {
-    "react": "^17.0.0"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "rxjs": "^5.5.6"
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 166dd0309dd7..1c99c2ffd135 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
index 78907eeb32c7..209a3f0ca772 100644
--- a/packages/jest-react/package.json
+++ b/packages/jest-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-react",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Jest matchers and utilities for testing React components.",
   "main": "index.js",
   "repository": {
@@ -20,8 +20,8 @@
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
     "jest": "^23.0.1 || ^24.0.0 || ^25.1.0",
-    "react": "^17.0.0",
-    "react-test-renderer": "^17.0.0"
+    "react": "^18.0.0",
+    "react-test-renderer": "^18.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index a819d3eb269a..ccd1c008ae4a 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "17.0.3",
+  "version": "18.0.0",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -25,10 +25,10 @@
     "art": "^0.10.1",
     "create-react-class": "^15.6.2",
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.20.1"
+    "scheduler": "^0.21.0"
   },
   "peerDependencies": {
-    "react": "17.0.3"
+    "react": "^18.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 655b9947fa50..875de13b0c2f 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "17.0.3",
+  "version": "18.0.0",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -18,10 +18,10 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.20.1"
+    "scheduler": "^0.21.0"
   },
   "peerDependencies": {
-    "react": "17.0.3"
+    "react": "^18.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index e4aac2bc69cc..d4ae919cdb5d 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "17.0.3",
+  "version": "18.0.0",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 9dc5ae52bcc8..329895dc4195 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-reconciler",
   "description": "React package for creating custom renderers.",
-  "version": "0.26.1",
+  "version": "0.27.0",
   "keywords": [
     "react"
   ],
@@ -26,11 +26,11 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^17.0.3"
+    "react": "^18.0.0"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.20.1"
+    "scheduler": "^0.21.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index 814e6b3d264b..b582f4ef6fad 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "17.0.3",
+  "version": "18.0.0",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -19,12 +19,12 @@
   },
   "homepage": "https://reactjs.org/",
   "dependencies": {
-    "react-is": "^17.0.3",
+    "react-is": "^18.0.0",
     "react-shallow-renderer": "^16.13.1",
-    "scheduler": "^0.20.1"
+    "scheduler": "^0.21.0"
   },
   "peerDependencies": {
-    "react": "17.0.3"
+    "react": "^18.0.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react/package.json b/packages/react/package.json
index 9d19b02b3202..05c1338e0591 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "17.0.3",
+  "version": "18.0.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index 50f5778a833f..d626ad2bb62e 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scheduler",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "Cooperative scheduler for the browser environment.",
   "main": "index.js",
   "repository": {
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index cad898b5f646..795d6e1c3604 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-subscription",
   "description": "Reusable hooks",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
@@ -15,7 +15,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "rxjs": "^5.5.6"
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index f2e1bc45a4ef..e93fd354ddc9 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-sync-external-store",
   "description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 3e997fdbaad54bac4aa067895da7814e0f8cfc9e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 29 Mar 2022 12:08:09 -0400
Subject: [PATCH 1239/1603] Bump react-refresh version


From b2b4bddeb85480922542fd1f3f64982d0e916831 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 29 Mar 2022 12:08:09 -0400
Subject: [PATCH 1240/1603] Bump react-refresh version

---
 ReactVersions.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index c3a865928cdf..854344df8725 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -33,7 +33,7 @@ const stablePackages = {
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
   'react-reconciler': '0.27.0',
-  'react-refresh': '0.11.0',
+  'react-refresh': '0.12.0',
   'react-test-renderer': ReactVersion,
   'use-subscription': '1.6.0',
   'use-sync-external-store': '1.0.0',

From 509d2d906591b0fd364b2853433a4fe5b111bf02 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Tue, 29 Mar 2022 18:13:05 +0100
Subject: [PATCH 1241/1603] Add React 18 changelog (#24195)

* Add React 18 to changelog

* Fix typo

Co-authored-by: Rick Hanlon <rickhanlonii@gmail.com>
---
 CHANGELOG.md | 144 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 144 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7ec5b94efdc..0b6fc723709b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,147 @@
+## 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.
+* **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.
+
+## 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 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 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/22739)  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))
+
 ## 17.0.2 (March 22, 2021)
 
 ### React DOM

From adb8ebc927ea091ba5ffba6a9f30dbe62eaee0c5 Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Tue, 29 Mar 2022 14:44:32 -0400
Subject: [PATCH 1242/1603] React DevTools 4.24.2 -> 4.24.3 (#24198)

---
 packages/react-devtools-core/package.json              |  2 +-
 .../react-devtools-extensions/chrome/manifest.json     |  4 ++--
 packages/react-devtools-extensions/edge/manifest.json  |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json    |  2 +-
 packages/react-devtools-inline/package.json            |  2 +-
 packages/react-devtools-timeline/package.json          |  2 +-
 packages/react-devtools/CHANGELOG.md                   | 10 ++++++++++
 packages/react-devtools/package.json                   |  4 ++--
 8 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 14715a4006a9..1aace55d9418 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 27a6af8e45a4..40573a06a7fd 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.2",
-  "version_name": "4.24.2",
+  "version": "4.24.3",
+  "version_name": "4.24.3",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index b5a492bfab3a..c3e5635e2b04 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.2",
-  "version_name": "4.24.2",
+  "version": "4.24.3",
+  "version_name": "4.24.3",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 94798e6b2bad..89733881a639 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 3c925ffd8ec1..f7ac3a4beadf 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index bde558a98aa6..707e11de8cb3 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index e4ba4cbd87a8..12d39e75b868 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,16 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 0da6ef64a7c1..9c343ad39bf4 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.2",
+  "version": "4.24.3",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.2",
+    "react-devtools-core": "4.24.3",
     "update-notifier": "^2.1.0"
   }
 }

From 8acc812c673023ad9b3d5940e94584254a46af2d Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Tue, 29 Mar 2022 23:13:50 +0100
Subject: [PATCH 1243/1603] Add a missing breaking change to changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b6fc723709b..aac9b257b694 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -47,6 +47,7 @@ The existing `renderToString` method keeps working but is discouraged.
 * **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.
 

From cfc76b46582b6614aa1db191734c75ca58c8dacd Mon Sep 17 00:00:00 2001
From: Strek <ssharishkumar@gmail.com>
Date: Wed, 30 Mar 2022 12:18:32 +0530
Subject: [PATCH 1244/1603] Update CHANGELOG.md (#24206)

---
 CHANGELOG.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aac9b257b694..c66576813274 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -95,7 +95,6 @@ The existing `renderToString` method keeps working but is discouraged.
 * 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 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 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))

From 27199d75678bea21f51ab1364e69ef58e0bde663 Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Wed, 30 Mar 2022 09:26:14 -0400
Subject: [PATCH 1245/1603] fix build script for react dev tools (#24193)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f468506cfa7e..a10d76d48570 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

From c9100d95b97913192397772ad81038ba322d068b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Mar 2022 09:26:33 -0400
Subject: [PATCH 1246/1603] DevTools release script: Show changelog before
 minor/patch prompt (#24200)

---
 scripts/devtools/prepare-release.js | 26 ++++++++++++++++++--------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/scripts/devtools/prepare-release.js b/scripts/devtools/prepare-release.js
index e3a0421225bb..fc5a7c893b7d 100755
--- a/scripts/devtools/prepare-release.js
+++ b/scripts/devtools/prepare-release.js
@@ -31,6 +31,16 @@ async function main() {
 
   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]);
@@ -41,6 +51,10 @@ async function main() {
       ? `${major}.${minor + 1}.0`
       : `${major}.${minor}.${patch + 1}`;
 
+  updateChangelog(nextVersion, formattedCommitLog);
+
+  await reviewChangelogPrompt();
+
   updatePackageVersions(previousVersion, nextVersion);
   updateManifestVersions(previousVersion, nextVersion);
 
@@ -52,13 +66,6 @@ async function main() {
   );
   console.log('');
 
-  const sha = await getPreviousCommitSha();
-  const commitLog = await getCommitLog(sha);
-
-  updateChangelog(nextVersion, commitLog);
-
-  await reviewChangelogPrompt();
-
   await commitPendingChanges(previousVersion, nextVersion);
 
   printFinalInstructions();
@@ -89,6 +96,7 @@ async function commitPendingChanges(previousVersion, nextVersion) {
 }
 
 async function getCommitLog(sha) {
+  let shortLog = '';
   let formattedLog = '';
 
   const rawLog = await execRead(`
@@ -103,12 +111,14 @@ async function getCommitLog(sha) {
       const pr = match[2];
 
       formattedLog += `\n* ${title} ([USERNAME](https://github.com/USERNAME) in [#${pr}](${PULL_REQUEST_BASE_URL}${pr}))`;
+      shortLog += `\n* ${title}`;
     } else {
       formattedLog += `\n* ${line}`;
+      shortLog += `\n* ${line}`;
     }
   });
 
-  return formattedLog;
+  return [shortLog, formattedLog];
 }
 
 async function getPreviousCommitSha() {

From 8b95ea2cba17d3dd653324debc1170fa50bda038 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 30 Mar 2022 11:02:51 -0400
Subject: [PATCH 1247/1603] Inline DevTools test snapshots and cleaned up tests
 (#24199)

---
 .../ownersListContext-test.js.snap            |  134 -
 .../profilerContext-test.js.snap              |   41 -
 .../__snapshots__/profilingCache-test.js.snap | 8005 -----------------
 .../profilingCharts-test.js.snap              |  430 -
 .../profilingCommitTreeBuilder-test.js.snap   |  526 --
 .../__snapshots__/store-test.js.snap          |  672 --
 .../__snapshots__/storeOwners-test.js.snap    |  121 -
 .../storeLegacy-v15-test.js.snap              |  499 -
 .../__tests__/legacy/storeLegacy-v15-test.js  |  498 +-
 .../src/__tests__/ownersListContext-test.js   |  184 +-
 .../src/__tests__/profilerContext-test.js     |   40 +-
 .../src/__tests__/profilingCache-test.js      |  718 +-
 .../src/__tests__/profilingCharts-test.js     |  273 +-
 .../profilingCommitTreeBuilder-test.js        |  241 +-
 .../src/__tests__/store-test.js               |  671 +-
 .../src/__tests__/storeOwners-test.js         |  151 +-
 .../src/__tests__/utils.js                    |    2 +-
 17 files changed, 2049 insertions(+), 11157 deletions(-)
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap
 delete mode 100644 packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
deleted file mode 100644
index a92d85a6e624..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/ownersListContext-test.js.snap
+++ /dev/null
@@ -1,134 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-      <Child>
-      <Child>
-`;
-
-exports[`OwnersListContext should fetch the owners list for the selected element that includes filtered components: owners for "Child" 1`] = `
-Array [
-  Object {
-    "displayName": "Grandparent",
-    "hocDisplayNames": null,
-    "id": 2,
-    "key": null,
-    "type": 5,
-  },
-  Object {
-    "displayName": "Parent",
-    "hocDisplayNames": null,
-    "id": 3,
-    "key": null,
-    "type": 5,
-  },
-  Object {
-    "displayName": "Child",
-    "hocDisplayNames": null,
-    "id": 4,
-    "key": null,
-    "type": 5,
-  },
-]
-`;
-
-exports[`OwnersListContext should fetch the owners list for the selected element: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-        <Child>
-`;
-
-exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Child" 1`] = `
-Array [
-  Object {
-    "displayName": "Grandparent",
-    "hocDisplayNames": null,
-    "id": 2,
-    "key": null,
-    "type": 5,
-  },
-  Object {
-    "displayName": "Parent",
-    "hocDisplayNames": null,
-    "id": 3,
-    "key": null,
-    "type": 5,
-  },
-  Object {
-    "displayName": "Child",
-    "hocDisplayNames": null,
-    "id": 4,
-    "key": null,
-    "type": 5,
-  },
-]
-`;
-
-exports[`OwnersListContext should fetch the owners list for the selected element: owners for "Parent" 1`] = `
-Array [
-  Object {
-    "displayName": "Grandparent",
-    "hocDisplayNames": null,
-    "id": 2,
-    "key": null,
-    "type": 5,
-  },
-  Object {
-    "displayName": "Parent",
-    "hocDisplayNames": null,
-    "id": 3,
-    "key": null,
-    "type": 5,
-  },
-]
-`;
-
-exports[`OwnersListContext should include all owners for a component wrapped in react memo: owners for "InnerComponent" 1`] = `
-Array [
-  Object {
-    "displayName": "Grandparent",
-    "hocDisplayNames": null,
-    "id": 2,
-    "key": null,
-    "type": 5,
-  },
-  Object {
-    "displayName": "InnerComponent",
-    "hocDisplayNames": Array [
-      "Memo",
-    ],
-    "id": 3,
-    "key": null,
-    "type": 8,
-  },
-  Object {
-    "displayName": "InnerComponent",
-    "hocDisplayNames": Array [
-      "ForwardRef",
-    ],
-    "id": 4,
-    "key": null,
-    "type": 6,
-  },
-]
-`;
-
-exports[`OwnersListContext should include the current element even if there are no other owners: mount 1`] = `
-[root]
-    <Grandparent>
-`;
-
-exports[`OwnersListContext should include the current element even if there are no other owners: owners for "Grandparent" 1`] = `
-Array [
-  Object {
-    "displayName": "Grandparent",
-    "hocDisplayNames": null,
-    "id": 2,
-    "key": null,
-    "type": 5,
-  },
-]
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap
deleted file mode 100644
index 927f3180b421..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilerContext-test.js.snap
+++ /dev/null
@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProfilerContext should auto-select the root ID matching the Components tab selection if it has profiling data: mounted 1`] = `
-[root]
-  ▾ <Parent>
-      <Child>
-[root]
-  ▾ <Parent>
-      <Child>
-`;
-
-exports[`ProfilerContext should maintain root selection between profiling sessions so long as there is data for that root: mounted 1`] = `
-[root]
-  ▾ <Parent>
-      <Child>
-[root]
-  ▾ <Parent>
-      <Child>
-`;
-
-exports[`ProfilerContext should not select the root ID matching the Components tab selection if it has no profiling data: mounted 1`] = `
-[root]
-  ▾ <Parent>
-      <Child>
-[root]
-  ▾ <Parent>
-      <Child>
-`;
-
-exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: mounted 1`] = `
-[root]
-  ▾ <GrandParent>
-    ▾ <Parent>
-        <Child>
-`;
-
-exports[`ProfilerContext should sync selected element in the Components tab too, provided the element is a match: updated 1`] = `
-[root]
-  ▾ <GrandParent>
-      <Parent>
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
deleted file mode 100644
index 9724472b31cb..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCache-test.js.snap
+++ /dev/null
@@ -1,8005 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProfilingCache should calculate a self duration based on actual children (not filtered children): CommitDetails with filtered self durations 1`] = `
-Object {
-  "changeDescriptions": Map {
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    4 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    6 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-  },
-  "duration": 16,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    1 => 16,
-    2 => 16,
-    4 => 1,
-    6 => 1,
-  },
-  "fiberSelfDurations": Map {
-    1 => 0,
-    2 => 10,
-    4 => 1,
-    6 => 1,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 16,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 1`] = `
-Object {
-  "changeDescriptions": Map {
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    4 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-  },
-  "duration": 15,
-  "effectDuration": 0,
-  "fiberActualDurations": Map {
-    1 => 15,
-    2 => 15,
-    3 => 5,
-    4 => 2,
-  },
-  "fiberSelfDurations": Map {
-    1 => 0,
-    2 => 10,
-    3 => 3,
-    4 => 2,
-  },
-  "passiveEffectDuration": 0,
-  "priorityLevel": "Immediate",
-  "timestamp": 15,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should calculate self duration correctly for suspended views: CommitDetails with filtered self durations 2`] = `
-Object {
-  "changeDescriptions": Map {
-    7 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-  },
-  "duration": 3,
-  "effectDuration": 0,
-  "fiberActualDurations": Map {
-    7 => 3,
-    3 => 3,
-  },
-  "fiberSelfDurations": Map {
-    7 => 3,
-    3 => 0,
-  },
-  "passiveEffectDuration": 0,
-  "priorityLevel": "Immediate",
-  "timestamp": 18,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 0 1`] = `
-Object {
-  "changeDescriptions": Map {
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    4 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    5 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    6 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-  },
-  "duration": 12,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    1 => 12,
-    2 => 12,
-    4 => 0,
-    5 => 1,
-    6 => 1,
-  },
-  "fiberSelfDurations": Map {
-    1 => 0,
-    2 => 10,
-    4 => 0,
-    5 => 1,
-    6 => 1,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 12,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 1 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    5 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    7 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-  },
-  "duration": 13,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    4 => 0,
-    5 => 1,
-    7 => 2,
-    2 => 13,
-    1 => 13,
-  },
-  "fiberSelfDurations": Map {
-    4 => 0,
-    5 => 1,
-    7 => 2,
-    2 => 10,
-    1 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 25,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 2 1`] = `
-Object {
-  "changeDescriptions": Map {
-    4 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-  },
-  "duration": 10,
-  "effectDuration": 0,
-  "fiberActualDurations": Map {
-    4 => 0,
-    2 => 10,
-    1 => 10,
-  },
-  "fiberSelfDurations": Map {
-    4 => 0,
-    2 => 10,
-    1 => 0,
-  },
-  "passiveEffectDuration": 0,
-  "priorityLevel": "Immediate",
-  "timestamp": 35,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should collect data for each commit: CommitDetails commitIndex: 3 1`] = `
-Object {
-  "changeDescriptions": Map {
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-  },
-  "duration": 10,
-  "effectDuration": 0,
-  "fiberActualDurations": Map {
-    2 => 10,
-    1 => 10,
-  },
-  "fiberSelfDurations": Map {
-    2 => 10,
-    1 => 0,
-  },
-  "passiveEffectDuration": 0,
-  "priorityLevel": "Immediate",
-  "timestamp": 45,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should collect data for each commit: imported data 1`] = `
-Object {
-  "dataForRoots": Array [
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 12,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              12,
-            ],
-            Array [
-              2,
-              12,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              6,
-              1,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              6,
-              1,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 12,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 13,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              7,
-              2,
-            ],
-            Array [
-              2,
-              13,
-            ],
-            Array [
-              1,
-              13,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              7,
-              2,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 25,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 10,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              10,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 35,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 10,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              10,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 45,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [],
-      "operations": Array [
-        Array [
-          1,
-          1,
-          17,
-          6,
-          80,
-          97,
-          114,
-          101,
-          110,
-          116,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          48,
-          1,
-          49,
-          1,
-          1,
-          11,
-          0,
-          3,
-          1,
-          1,
-          4,
-          1,
-          12000,
-          1,
-          2,
-          5,
-          1,
-          0,
-          1,
-          0,
-          4,
-          2,
-          12000,
-          1,
-          4,
-          5,
-          2,
-          2,
-          2,
-          3,
-          4,
-          4,
-          0,
-          1,
-          5,
-          5,
-          2,
-          2,
-          2,
-          4,
-          4,
-          5,
-          1000,
-          1,
-          6,
-          8,
-          2,
-          2,
-          2,
-          0,
-          4,
-          6,
-          1000,
-        ],
-        Array [
-          1,
-          1,
-          8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          50,
-          1,
-          7,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          7,
-          2000,
-          4,
-          2,
-          14000,
-          3,
-          2,
-          4,
-          4,
-          5,
-          7,
-          6,
-          4,
-          1,
-          14000,
-        ],
-        Array [
-          1,
-          1,
-          0,
-          2,
-          2,
-          7,
-          5,
-          4,
-          2,
-          11000,
-          3,
-          2,
-          2,
-          4,
-          6,
-          4,
-          1,
-          11000,
-        ],
-        Array [
-          1,
-          1,
-          0,
-          2,
-          1,
-          4,
-        ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [],
-    },
-  ],
-  "timelineData": Array [
-    Object {
-      "batchUIDToMeasuresKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 12,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 12,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          3,
-          Array [
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          4,
-          Array [
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 55,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 55,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 55,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-      ],
-      "componentMeasures": Array [
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 20,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 20,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 21,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 22,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 32,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 32,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 2,
-          "timestamp": 33,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 35,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 45,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 45,
-          "type": "render",
-          "warning": null,
-        },
-      ],
-      "duration": 65,
-      "flamechart": Array [],
-      "internalModuleSourceToRanges": Array [],
-      "laneToLabelKeyValueArray": Array [
-        Array [
-          1,
-          "Sync",
-        ],
-        Array [
-          2,
-          "InputContinuousHydration",
-        ],
-        Array [
-          4,
-          "InputContinuous",
-        ],
-        Array [
-          8,
-          "DefaultHydration",
-        ],
-        Array [
-          16,
-          "Default",
-        ],
-        Array [
-          32,
-          "TransitionHydration",
-        ],
-        Array [
-          64,
-          "Transition",
-        ],
-        Array [
-          128,
-          "Transition",
-        ],
-        Array [
-          256,
-          "Transition",
-        ],
-        Array [
-          512,
-          "Transition",
-        ],
-        Array [
-          1024,
-          "Transition",
-        ],
-        Array [
-          2048,
-          "Transition",
-        ],
-        Array [
-          4096,
-          "Transition",
-        ],
-        Array [
-          8192,
-          "Transition",
-        ],
-        Array [
-          16384,
-          "Transition",
-        ],
-        Array [
-          32768,
-          "Transition",
-        ],
-        Array [
-          65536,
-          "Transition",
-        ],
-        Array [
-          131072,
-          "Transition",
-        ],
-        Array [
-          262144,
-          "Transition",
-        ],
-        Array [
-          524288,
-          "Transition",
-        ],
-        Array [
-          1048576,
-          "Transition",
-        ],
-        Array [
-          2097152,
-          "Transition",
-        ],
-        Array [
-          4194304,
-          "Retry",
-        ],
-        Array [
-          8388608,
-          "Retry",
-        ],
-        Array [
-          16777216,
-          "Retry",
-        ],
-        Array [
-          33554432,
-          "Retry",
-        ],
-        Array [
-          67108864,
-          "Retry",
-        ],
-        Array [
-          134217728,
-          "SelectiveHydration",
-        ],
-        Array [
-          268435456,
-          "IdleHydration",
-        ],
-        Array [
-          536870912,
-          "Idle",
-        ],
-        Array [
-          1073741824,
-          "Offscreen",
-        ],
-      ],
-      "laneToReactMeasureKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 12,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 12,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 22,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 35,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 55,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 55,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 55,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [],
-        ],
-        Array [
-          4,
-          Array [],
-        ],
-        Array [
-          8,
-          Array [],
-        ],
-        Array [
-          16,
-          Array [],
-        ],
-        Array [
-          32,
-          Array [],
-        ],
-        Array [
-          64,
-          Array [],
-        ],
-        Array [
-          128,
-          Array [],
-        ],
-        Array [
-          256,
-          Array [],
-        ],
-        Array [
-          512,
-          Array [],
-        ],
-        Array [
-          1024,
-          Array [],
-        ],
-        Array [
-          2048,
-          Array [],
-        ],
-        Array [
-          4096,
-          Array [],
-        ],
-        Array [
-          8192,
-          Array [],
-        ],
-        Array [
-          16384,
-          Array [],
-        ],
-        Array [
-          32768,
-          Array [],
-        ],
-        Array [
-          65536,
-          Array [],
-        ],
-        Array [
-          131072,
-          Array [],
-        ],
-        Array [
-          262144,
-          Array [],
-        ],
-        Array [
-          524288,
-          Array [],
-        ],
-        Array [
-          1048576,
-          Array [],
-        ],
-        Array [
-          2097152,
-          Array [],
-        ],
-        Array [
-          4194304,
-          Array [],
-        ],
-        Array [
-          8388608,
-          Array [],
-        ],
-        Array [
-          16777216,
-          Array [],
-        ],
-        Array [
-          33554432,
-          Array [],
-        ],
-        Array [
-          67108864,
-          Array [],
-        ],
-        Array [
-          134217728,
-          Array [],
-        ],
-        Array [
-          268435456,
-          Array [],
-        ],
-        Array [
-          536870912,
-          Array [],
-        ],
-        Array [
-          1073741824,
-          Array [],
-        ],
-      ],
-      "nativeEvents": Array [],
-      "networkMeasures": Array [],
-      "otherUserTimingMarks": Array [],
-      "reactVersion": "<filtered-version>",
-      "schedulingEvents": Array [
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 22,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 35,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 45,
-          "type": "schedule-render",
-          "warning": null,
-        },
-      ],
-      "snapshotHeight": 0,
-      "snapshots": Array [],
-      "startTime": -10,
-      "suspenseEvents": Array [],
-      "thrownErrors": Array [],
-    },
-  ],
-  "version": 5,
-}
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 2 1`] = `
-Array [
-  0,
-  1,
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 4 1`] = `
-Array [
-  0,
-  1,
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 5 1`] = `
-Array [
-  0,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 6 1`] = `
-Array [
-  1,
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: FiberCommits: element 7 1`] = `
-Array [
-  2,
-]
-`;
-
-exports[`ProfilingCache should collect data for each rendered fiber: imported data 1`] = `
-Object {
-  "dataForRoots": Array [
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              11,
-            ],
-            Array [
-              2,
-              11,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 11,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              2,
-              11,
-            ],
-            Array [
-              1,
-              11,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 22,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 13,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              7,
-              2,
-            ],
-            Array [
-              2,
-              13,
-            ],
-            Array [
-              1,
-              13,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              6,
-              1,
-            ],
-            Array [
-              7,
-              2,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 35,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [],
-      "operations": Array [
-        Array [
-          1,
-          1,
-          15,
-          6,
-          80,
-          97,
-          114,
-          101,
-          110,
-          116,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          48,
-          1,
-          1,
-          11,
-          0,
-          3,
-          1,
-          1,
-          4,
-          1,
-          11000,
-          1,
-          2,
-          5,
-          1,
-          0,
-          1,
-          0,
-          4,
-          2,
-          11000,
-          1,
-          4,
-          5,
-          2,
-          2,
-          2,
-          3,
-          4,
-          4,
-          0,
-          1,
-          5,
-          8,
-          2,
-          2,
-          2,
-          0,
-          4,
-          5,
-          1000,
-        ],
-        Array [
-          1,
-          1,
-          8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          49,
-          1,
-          6,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          6,
-          1000,
-          4,
-          2,
-          12000,
-          3,
-          2,
-          3,
-          4,
-          6,
-          5,
-          4,
-          1,
-          12000,
-        ],
-        Array [
-          1,
-          1,
-          8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          50,
-          1,
-          7,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          7,
-          2000,
-          4,
-          2,
-          14000,
-          3,
-          2,
-          4,
-          4,
-          6,
-          7,
-          5,
-          4,
-          1,
-          14000,
-        ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [],
-    },
-  ],
-  "timelineData": Array [
-    Object {
-      "batchUIDToMeasuresKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          3,
-          Array [
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-      ],
-      "componentMeasures": Array [
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 20,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 20,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 21,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 31,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 31,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 32,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 42,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 42,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 2,
-          "timestamp": 43,
-          "type": "render",
-          "warning": null,
-        },
-      ],
-      "duration": 55,
-      "flamechart": Array [],
-      "internalModuleSourceToRanges": Array [],
-      "laneToLabelKeyValueArray": Array [
-        Array [
-          1,
-          "Sync",
-        ],
-        Array [
-          2,
-          "InputContinuousHydration",
-        ],
-        Array [
-          4,
-          "InputContinuous",
-        ],
-        Array [
-          8,
-          "DefaultHydration",
-        ],
-        Array [
-          16,
-          "Default",
-        ],
-        Array [
-          32,
-          "TransitionHydration",
-        ],
-        Array [
-          64,
-          "Transition",
-        ],
-        Array [
-          128,
-          "Transition",
-        ],
-        Array [
-          256,
-          "Transition",
-        ],
-        Array [
-          512,
-          "Transition",
-        ],
-        Array [
-          1024,
-          "Transition",
-        ],
-        Array [
-          2048,
-          "Transition",
-        ],
-        Array [
-          4096,
-          "Transition",
-        ],
-        Array [
-          8192,
-          "Transition",
-        ],
-        Array [
-          16384,
-          "Transition",
-        ],
-        Array [
-          32768,
-          "Transition",
-        ],
-        Array [
-          65536,
-          "Transition",
-        ],
-        Array [
-          131072,
-          "Transition",
-        ],
-        Array [
-          262144,
-          "Transition",
-        ],
-        Array [
-          524288,
-          "Transition",
-        ],
-        Array [
-          1048576,
-          "Transition",
-        ],
-        Array [
-          2097152,
-          "Transition",
-        ],
-        Array [
-          4194304,
-          "Retry",
-        ],
-        Array [
-          8388608,
-          "Retry",
-        ],
-        Array [
-          16777216,
-          "Retry",
-        ],
-        Array [
-          33554432,
-          "Retry",
-        ],
-        Array [
-          67108864,
-          "Retry",
-        ],
-        Array [
-          134217728,
-          "SelectiveHydration",
-        ],
-        Array [
-          268435456,
-          "IdleHydration",
-        ],
-        Array [
-          536870912,
-          "Idle",
-        ],
-        Array [
-          1073741824,
-          "Offscreen",
-        ],
-      ],
-      "laneToReactMeasureKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 21,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 32,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 45,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [],
-        ],
-        Array [
-          4,
-          Array [],
-        ],
-        Array [
-          8,
-          Array [],
-        ],
-        Array [
-          16,
-          Array [],
-        ],
-        Array [
-          32,
-          Array [],
-        ],
-        Array [
-          64,
-          Array [],
-        ],
-        Array [
-          128,
-          Array [],
-        ],
-        Array [
-          256,
-          Array [],
-        ],
-        Array [
-          512,
-          Array [],
-        ],
-        Array [
-          1024,
-          Array [],
-        ],
-        Array [
-          2048,
-          Array [],
-        ],
-        Array [
-          4096,
-          Array [],
-        ],
-        Array [
-          8192,
-          Array [],
-        ],
-        Array [
-          16384,
-          Array [],
-        ],
-        Array [
-          32768,
-          Array [],
-        ],
-        Array [
-          65536,
-          Array [],
-        ],
-        Array [
-          131072,
-          Array [],
-        ],
-        Array [
-          262144,
-          Array [],
-        ],
-        Array [
-          524288,
-          Array [],
-        ],
-        Array [
-          1048576,
-          Array [],
-        ],
-        Array [
-          2097152,
-          Array [],
-        ],
-        Array [
-          4194304,
-          Array [],
-        ],
-        Array [
-          8388608,
-          Array [],
-        ],
-        Array [
-          16777216,
-          Array [],
-        ],
-        Array [
-          33554432,
-          Array [],
-        ],
-        Array [
-          67108864,
-          Array [],
-        ],
-        Array [
-          134217728,
-          Array [],
-        ],
-        Array [
-          268435456,
-          Array [],
-        ],
-        Array [
-          536870912,
-          Array [],
-        ],
-        Array [
-          1073741824,
-          Array [],
-        ],
-      ],
-      "nativeEvents": Array [],
-      "networkMeasures": Array [],
-      "otherUserTimingMarks": Array [],
-      "reactVersion": "<filtered-version>",
-      "schedulingEvents": Array [
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 21,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 32,
-          "type": "schedule-render",
-          "warning": null,
-        },
-      ],
-      "snapshotHeight": 0,
-      "snapshots": Array [],
-      "startTime": -10,
-      "suspenseEvents": Array [],
-      "thrownErrors": Array [],
-    },
-  ],
-  "version": 5,
-}
-`;
-
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 1`] = `
-Object {
-  "commitData": Array [
-    Object {
-      "changeDescriptions": Map {
-        4 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [],
-          "state": null,
-        },
-        5 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [],
-          "state": null,
-        },
-        12 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
-        },
-        2 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [
-            "count",
-          ],
-          "state": null,
-        },
-      },
-      "duration": 13,
-      "effectDuration": null,
-      "fiberActualDurations": Map {
-        4 => 0,
-        5 => 1,
-        12 => 2,
-        2 => 13,
-        1 => 13,
-      },
-      "fiberSelfDurations": Map {
-        4 => 0,
-        5 => 1,
-        12 => 2,
-        2 => 10,
-        1 => 0,
-      },
-      "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
-      "timestamp": 13,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 1,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-    Object {
-      "changeDescriptions": Map {
-        4 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [],
-          "state": null,
-        },
-        2 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [
-            "count",
-          ],
-          "state": null,
-        },
-      },
-      "duration": 10,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {
-        4 => 0,
-        2 => 10,
-        1 => 10,
-      },
-      "fiberSelfDurations": Map {
-        4 => 0,
-        2 => 10,
-        1 => 0,
-      },
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 34,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 1,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-    Object {
-      "changeDescriptions": Map {
-        2 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "hooks": null,
-          "isFirstMount": false,
-          "props": Array [
-            "count",
-          ],
-          "state": null,
-        },
-      },
-      "duration": 10,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {
-        2 => 10,
-        1 => 10,
-      },
-      "fiberSelfDurations": Map {
-        2 => 10,
-        1 => 0,
-      },
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 44,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 1,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-  ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {
-    1 => 12,
-    2 => 12,
-    4 => 0,
-    5 => 1,
-    6 => 1,
-  },
-  "operations": Array [
-    Array [
-      1,
-      1,
-      8,
-      5,
-      67,
-      104,
-      105,
-      108,
-      100,
-      1,
-      50,
-      1,
-      12,
-      5,
-      2,
-      2,
-      1,
-      2,
-      4,
-      12,
-      2000,
-      4,
-      2,
-      14000,
-      3,
-      2,
-      4,
-      4,
-      5,
-      12,
-      6,
-      4,
-      1,
-      14000,
-    ],
-    Array [
-      1,
-      1,
-      0,
-      2,
-      2,
-      12,
-      5,
-      4,
-      2,
-      11000,
-      3,
-      2,
-      2,
-      4,
-      6,
-      4,
-      1,
-      11000,
-    ],
-    Array [
-      1,
-      1,
-      0,
-      2,
-      1,
-      4,
-    ],
-  ],
-  "rootID": 1,
-  "snapshots": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        4,
-        5,
-        6,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "type": 5,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "0",
-      "type": 5,
-    },
-    5 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "key": "1",
-      "type": 5,
-    },
-    6 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": Array [
-        "Memo",
-      ],
-      "id": 6,
-      "key": null,
-      "type": 8,
-    },
-  },
-}
-`;
-
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 2`] = `
-Object {
-  "commitData": Array [
-    Object {
-      "changeDescriptions": Map {
-        14 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
-        },
-        16 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
-        },
-        17 => Object {
-          "context": null,
-          "didHooksChange": false,
-          "isFirstMount": true,
-          "props": null,
-          "state": null,
-        },
-      },
-      "duration": 11,
-      "effectDuration": null,
-      "fiberActualDurations": Map {
-        13 => 11,
-        14 => 11,
-        16 => 0,
-        17 => 1,
-      },
-      "fiberSelfDurations": Map {
-        13 => 0,
-        14 => 10,
-        16 => 0,
-        17 => 1,
-      },
-      "passiveEffectDuration": null,
-      "priorityLevel": "Immediate",
-      "timestamp": 24,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 13,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-  ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {},
-  "operations": Array [
-    Array [
-      1,
-      13,
-      15,
-      6,
-      80,
-      97,
-      114,
-      101,
-      110,
-      116,
-      5,
-      67,
-      104,
-      105,
-      108,
-      100,
-      1,
-      48,
-      1,
-      13,
-      11,
-      0,
-      3,
-      1,
-      1,
-      4,
-      13,
-      11000,
-      1,
-      14,
-      5,
-      13,
-      0,
-      1,
-      0,
-      4,
-      14,
-      11000,
-      1,
-      16,
-      5,
-      14,
-      14,
-      2,
-      3,
-      4,
-      16,
-      0,
-      1,
-      17,
-      8,
-      14,
-      14,
-      2,
-      0,
-      4,
-      17,
-      1000,
-    ],
-  ],
-  "rootID": 13,
-  "snapshots": Map {},
-}
-`;
-
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): Data for root Parent 3`] = `
-Object {
-  "commitData": Array [
-    Object {
-      "changeDescriptions": Map {},
-      "duration": 0,
-      "effectDuration": 0,
-      "fiberActualDurations": Map {},
-      "fiberSelfDurations": Map {},
-      "passiveEffectDuration": 0,
-      "priorityLevel": "Immediate",
-      "timestamp": 34,
-      "updaters": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 7,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-  ],
-  "displayName": "Parent",
-  "initialTreeBaseDurations": Map {
-    7 => 11,
-    8 => 11,
-    10 => 0,
-    11 => 1,
-  },
-  "operations": Array [
-    Array [
-      1,
-      7,
-      0,
-      2,
-      4,
-      11,
-      10,
-      8,
-      7,
-    ],
-  ],
-  "rootID": 7,
-  "snapshots": Map {
-    7 => Object {
-      "children": Array [
-        8,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 7,
-      "key": null,
-      "type": 11,
-    },
-    8 => Object {
-      "children": Array [
-        10,
-        11,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 8,
-      "key": null,
-      "type": 5,
-    },
-    10 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 10,
-      "key": "0",
-      "type": 5,
-    },
-    11 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": Array [
-        "Memo",
-      ],
-      "id": 11,
-      "key": null,
-      "type": 8,
-    },
-  },
-}
-`;
-
-exports[`ProfilingCache should collect data for each root (including ones added or mounted after profiling started): imported data 1`] = `
-Object {
-  "dataForRoots": Array [
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              12,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 13,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              12,
-              2,
-            ],
-            Array [
-              2,
-              13,
-            ],
-            Array [
-              1,
-              13,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              1,
-            ],
-            Array [
-              12,
-              2,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 13,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 10,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              10,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 34,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 10,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              10,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              2,
-              10,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 44,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [
-        Array [
-          1,
-          12,
-        ],
-        Array [
-          2,
-          12,
-        ],
-        Array [
-          4,
-          0,
-        ],
-        Array [
-          5,
-          1,
-        ],
-        Array [
-          6,
-          1,
-        ],
-      ],
-      "operations": Array [
-        Array [
-          1,
-          1,
-          8,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          50,
-          1,
-          12,
-          5,
-          2,
-          2,
-          1,
-          2,
-          4,
-          12,
-          2000,
-          4,
-          2,
-          14000,
-          3,
-          2,
-          4,
-          4,
-          5,
-          12,
-          6,
-          4,
-          1,
-          14000,
-        ],
-        Array [
-          1,
-          1,
-          0,
-          2,
-          2,
-          12,
-          5,
-          4,
-          2,
-          11000,
-          3,
-          2,
-          2,
-          4,
-          6,
-          4,
-          1,
-          11000,
-        ],
-        Array [
-          1,
-          1,
-          0,
-          2,
-          1,
-          4,
-        ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [
-        Array [
-          1,
-          Object {
-            "children": Array [
-              2,
-            ],
-            "displayName": null,
-            "hocDisplayNames": null,
-            "id": 1,
-            "key": null,
-            "type": 11,
-          },
-        ],
-        Array [
-          2,
-          Object {
-            "children": Array [
-              4,
-              5,
-              6,
-            ],
-            "displayName": "Parent",
-            "hocDisplayNames": null,
-            "id": 2,
-            "key": null,
-            "type": 5,
-          },
-        ],
-        Array [
-          4,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 4,
-            "key": "0",
-            "type": 5,
-          },
-        ],
-        Array [
-          5,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 5,
-            "key": "1",
-            "type": 5,
-          },
-        ],
-        Array [
-          6,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": Array [
-              "Memo",
-            ],
-            "id": 6,
-            "key": null,
-            "type": 8,
-          },
-        ],
-      ],
-    },
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              14,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              16,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              17,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 11,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              13,
-              11,
-            ],
-            Array [
-              14,
-              11,
-            ],
-            Array [
-              16,
-              0,
-            ],
-            Array [
-              17,
-              1,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              13,
-              0,
-            ],
-            Array [
-              14,
-              10,
-            ],
-            Array [
-              16,
-              0,
-            ],
-            Array [
-              17,
-              1,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 24,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 13,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [],
-      "operations": Array [
-        Array [
-          1,
-          13,
-          15,
-          6,
-          80,
-          97,
-          114,
-          101,
-          110,
-          116,
-          5,
-          67,
-          104,
-          105,
-          108,
-          100,
-          1,
-          48,
-          1,
-          13,
-          11,
-          0,
-          3,
-          1,
-          1,
-          4,
-          13,
-          11000,
-          1,
-          14,
-          5,
-          13,
-          0,
-          1,
-          0,
-          4,
-          14,
-          11000,
-          1,
-          16,
-          5,
-          14,
-          14,
-          2,
-          3,
-          4,
-          16,
-          0,
-          1,
-          17,
-          8,
-          14,
-          14,
-          2,
-          0,
-          4,
-          17,
-          1000,
-        ],
-      ],
-      "rootID": 13,
-      "snapshots": Array [],
-    },
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [],
-          "fiberSelfDurations": Array [],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 34,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 7,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "Parent",
-      "initialTreeBaseDurations": Array [
-        Array [
-          7,
-          11,
-        ],
-        Array [
-          8,
-          11,
-        ],
-        Array [
-          10,
-          0,
-        ],
-        Array [
-          11,
-          1,
-        ],
-      ],
-      "operations": Array [
-        Array [
-          1,
-          7,
-          0,
-          2,
-          4,
-          11,
-          10,
-          8,
-          7,
-        ],
-      ],
-      "rootID": 7,
-      "snapshots": Array [
-        Array [
-          7,
-          Object {
-            "children": Array [
-              8,
-            ],
-            "displayName": null,
-            "hocDisplayNames": null,
-            "id": 7,
-            "key": null,
-            "type": 11,
-          },
-        ],
-        Array [
-          8,
-          Object {
-            "children": Array [
-              10,
-              11,
-            ],
-            "displayName": "Parent",
-            "hocDisplayNames": null,
-            "id": 8,
-            "key": null,
-            "type": 5,
-          },
-        ],
-        Array [
-          10,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": null,
-            "id": 10,
-            "key": "0",
-            "type": 5,
-          },
-        ],
-        Array [
-          11,
-          Object {
-            "children": Array [],
-            "displayName": "Child",
-            "hocDisplayNames": Array [
-              "Memo",
-            ],
-            "id": 11,
-            "key": null,
-            "type": 8,
-          },
-        ],
-      ],
-    },
-  ],
-  "timelineData": Array [
-    Object {
-      "batchUIDToMeasuresKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          3,
-          Array [
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          4,
-          Array [
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          5,
-          Array [
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 54,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 54,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 54,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-      ],
-      "componentMeasures": Array [
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 20,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 20,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 2,
-          "timestamp": 21,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 23,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 33,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 1,
-          "timestamp": 33,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 34,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Child",
-          "duration": 0,
-          "timestamp": 44,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Parent",
-          "duration": 10,
-          "timestamp": 44,
-          "type": "render",
-          "warning": null,
-        },
-      ],
-      "duration": 64,
-      "flamechart": Array [],
-      "internalModuleSourceToRanges": Array [],
-      "laneToLabelKeyValueArray": Array [
-        Array [
-          1,
-          "Sync",
-        ],
-        Array [
-          2,
-          "InputContinuousHydration",
-        ],
-        Array [
-          4,
-          "InputContinuous",
-        ],
-        Array [
-          8,
-          "DefaultHydration",
-        ],
-        Array [
-          16,
-          "Default",
-        ],
-        Array [
-          32,
-          "TransitionHydration",
-        ],
-        Array [
-          64,
-          "Transition",
-        ],
-        Array [
-          128,
-          "Transition",
-        ],
-        Array [
-          256,
-          "Transition",
-        ],
-        Array [
-          512,
-          "Transition",
-        ],
-        Array [
-          1024,
-          "Transition",
-        ],
-        Array [
-          2048,
-          "Transition",
-        ],
-        Array [
-          4096,
-          "Transition",
-        ],
-        Array [
-          8192,
-          "Transition",
-        ],
-        Array [
-          16384,
-          "Transition",
-        ],
-        Array [
-          32768,
-          "Transition",
-        ],
-        Array [
-          65536,
-          "Transition",
-        ],
-        Array [
-          131072,
-          "Transition",
-        ],
-        Array [
-          262144,
-          "Transition",
-        ],
-        Array [
-          524288,
-          "Transition",
-        ],
-        Array [
-          1048576,
-          "Transition",
-        ],
-        Array [
-          2097152,
-          "Transition",
-        ],
-        Array [
-          4194304,
-          "Retry",
-        ],
-        Array [
-          8388608,
-          "Retry",
-        ],
-        Array [
-          16777216,
-          "Retry",
-        ],
-        Array [
-          33554432,
-          "Retry",
-        ],
-        Array [
-          67108864,
-          "Retry",
-        ],
-        Array [
-          134217728,
-          "SelectiveHydration",
-        ],
-        Array [
-          268435456,
-          "IdleHydration",
-        ],
-        Array [
-          536870912,
-          "Idle",
-        ],
-        Array [
-          1073741824,
-          "Offscreen",
-        ],
-      ],
-      "laneToReactMeasureKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 13,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 11,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 23,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 34,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 10,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 44,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 54,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 54,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 54,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [],
-        ],
-        Array [
-          4,
-          Array [],
-        ],
-        Array [
-          8,
-          Array [],
-        ],
-        Array [
-          16,
-          Array [],
-        ],
-        Array [
-          32,
-          Array [],
-        ],
-        Array [
-          64,
-          Array [],
-        ],
-        Array [
-          128,
-          Array [],
-        ],
-        Array [
-          256,
-          Array [],
-        ],
-        Array [
-          512,
-          Array [],
-        ],
-        Array [
-          1024,
-          Array [],
-        ],
-        Array [
-          2048,
-          Array [],
-        ],
-        Array [
-          4096,
-          Array [],
-        ],
-        Array [
-          8192,
-          Array [],
-        ],
-        Array [
-          16384,
-          Array [],
-        ],
-        Array [
-          32768,
-          Array [],
-        ],
-        Array [
-          65536,
-          Array [],
-        ],
-        Array [
-          131072,
-          Array [],
-        ],
-        Array [
-          262144,
-          Array [],
-        ],
-        Array [
-          524288,
-          Array [],
-        ],
-        Array [
-          1048576,
-          Array [],
-        ],
-        Array [
-          2097152,
-          Array [],
-        ],
-        Array [
-          4194304,
-          Array [],
-        ],
-        Array [
-          8388608,
-          Array [],
-        ],
-        Array [
-          16777216,
-          Array [],
-        ],
-        Array [
-          33554432,
-          Array [],
-        ],
-        Array [
-          67108864,
-          Array [],
-        ],
-        Array [
-          134217728,
-          Array [],
-        ],
-        Array [
-          268435456,
-          Array [],
-        ],
-        Array [
-          536870912,
-          Array [],
-        ],
-        Array [
-          1073741824,
-          Array [],
-        ],
-      ],
-      "nativeEvents": Array [],
-      "networkMeasures": Array [],
-      "otherUserTimingMarks": Array [],
-      "reactVersion": "<filtered-version>",
-      "schedulingEvents": Array [
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 23,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 34,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 44,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 44,
-          "type": "schedule-render",
-          "warning": null,
-        },
-      ],
-      "snapshotHeight": 0,
-      "snapshots": Array [],
-      "startTime": 13,
-      "suspenseEvents": Array [],
-      "thrownErrors": Array [],
-    },
-  ],
-  "version": 5,
-}
-`;
-
-exports[`ProfilingCache should handle unexpectedly shallow suspense trees: Empty Suspense node 1`] = `
-Object {
-  "commitData": Array [
-    Object {
-      "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": Array [
-        Object {
-          "displayName": "render()",
-          "hocDisplayNames": null,
-          "id": 1,
-          "key": null,
-          "type": 11,
-        },
-      ],
-    },
-  ],
-  "displayName": "Suspense",
-  "initialTreeBaseDurations": Map {},
-  "operations": Array [
-    Array [
-      1,
-      1,
-      9,
-      8,
-      83,
-      117,
-      115,
-      112,
-      101,
-      110,
-      115,
-      101,
-      1,
-      1,
-      11,
-      0,
-      3,
-      1,
-      1,
-      1,
-      2,
-      12,
-      1,
-      0,
-      1,
-      0,
-      4,
-      2,
-      0,
-    ],
-  ],
-  "rootID": 1,
-  "snapshots": Map {},
-}
-`;
-
-exports[`ProfilingCache should properly detect changed hooks: imported data 1`] = `
-Object {
-  "dataForRoots": Array [
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": false,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": false,
-                "didHooksChange": true,
-                "hooks": Array [
-                  1,
-                ],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "Component",
-              "hocDisplayNames": null,
-              "id": 3,
-              "key": null,
-              "type": 5,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": false,
-                "didHooksChange": true,
-                "hooks": Array [
-                  0,
-                ],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "Component",
-              "hocDisplayNames": null,
-              "id": 3,
-              "key": null,
-              "type": 5,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": true,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              3,
-              Object {
-                "context": false,
-                "didHooksChange": true,
-                "hooks": Array [
-                  2,
-                ],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": 0,
-          "fiberActualDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              3,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": 0,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "Component",
-              "hocDisplayNames": null,
-              "id": 3,
-              "key": null,
-              "type": 5,
-            },
-          ],
-        },
-      ],
-      "displayName": "Component",
-      "initialTreeBaseDurations": Array [],
-      "operations": Array [
-        Array [
-          1,
-          1,
-          27,
-          16,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          46,
-          80,
-          114,
-          111,
-          118,
-          105,
-          100,
-          101,
-          114,
-          9,
-          67,
-          111,
-          109,
-          112,
-          111,
-          110,
-          101,
-          110,
-          116,
-          1,
-          1,
-          11,
-          0,
-          3,
-          1,
-          1,
-          1,
-          2,
-          2,
-          1,
-          0,
-          1,
-          0,
-          4,
-          2,
-          0,
-          1,
-          3,
-          5,
-          2,
-          0,
-          2,
-          0,
-          4,
-          3,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [],
-    },
-  ],
-  "timelineData": Array [
-    Object {
-      "batchUIDToMeasuresKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          3,
-          Array [
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          4,
-          Array [
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          5,
-          Array [
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          6,
-          Array [
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-      ],
-      "componentMeasures": Array [
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "layout-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "passive-effect-mount",
-          "warning": null,
-        },
-      ],
-      "duration": 20,
-      "flamechart": Array [],
-      "internalModuleSourceToRanges": Array [],
-      "laneToLabelKeyValueArray": Array [
-        Array [
-          1,
-          "Sync",
-        ],
-        Array [
-          2,
-          "InputContinuousHydration",
-        ],
-        Array [
-          4,
-          "InputContinuous",
-        ],
-        Array [
-          8,
-          "DefaultHydration",
-        ],
-        Array [
-          16,
-          "Default",
-        ],
-        Array [
-          32,
-          "TransitionHydration",
-        ],
-        Array [
-          64,
-          "Transition",
-        ],
-        Array [
-          128,
-          "Transition",
-        ],
-        Array [
-          256,
-          "Transition",
-        ],
-        Array [
-          512,
-          "Transition",
-        ],
-        Array [
-          1024,
-          "Transition",
-        ],
-        Array [
-          2048,
-          "Transition",
-        ],
-        Array [
-          4096,
-          "Transition",
-        ],
-        Array [
-          8192,
-          "Transition",
-        ],
-        Array [
-          16384,
-          "Transition",
-        ],
-        Array [
-          32768,
-          "Transition",
-        ],
-        Array [
-          65536,
-          "Transition",
-        ],
-        Array [
-          131072,
-          "Transition",
-        ],
-        Array [
-          262144,
-          "Transition",
-        ],
-        Array [
-          524288,
-          "Transition",
-        ],
-        Array [
-          1048576,
-          "Transition",
-        ],
-        Array [
-          2097152,
-          "Transition",
-        ],
-        Array [
-          4194304,
-          "Retry",
-        ],
-        Array [
-          8388608,
-          "Retry",
-        ],
-        Array [
-          16777216,
-          "Retry",
-        ],
-        Array [
-          33554432,
-          "Retry",
-        ],
-        Array [
-          67108864,
-          "Retry",
-        ],
-        Array [
-          134217728,
-          "SelectiveHydration",
-        ],
-        Array [
-          268435456,
-          "IdleHydration",
-        ],
-        Array [
-          536870912,
-          "Idle",
-        ],
-        Array [
-          1073741824,
-          "Offscreen",
-        ],
-      ],
-      "laneToReactMeasureKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 6,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "passive-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [],
-        ],
-        Array [
-          4,
-          Array [],
-        ],
-        Array [
-          8,
-          Array [],
-        ],
-        Array [
-          16,
-          Array [],
-        ],
-        Array [
-          32,
-          Array [],
-        ],
-        Array [
-          64,
-          Array [],
-        ],
-        Array [
-          128,
-          Array [],
-        ],
-        Array [
-          256,
-          Array [],
-        ],
-        Array [
-          512,
-          Array [],
-        ],
-        Array [
-          1024,
-          Array [],
-        ],
-        Array [
-          2048,
-          Array [],
-        ],
-        Array [
-          4096,
-          Array [],
-        ],
-        Array [
-          8192,
-          Array [],
-        ],
-        Array [
-          16384,
-          Array [],
-        ],
-        Array [
-          32768,
-          Array [],
-        ],
-        Array [
-          65536,
-          Array [],
-        ],
-        Array [
-          131072,
-          Array [],
-        ],
-        Array [
-          262144,
-          Array [],
-        ],
-        Array [
-          524288,
-          Array [],
-        ],
-        Array [
-          1048576,
-          Array [],
-        ],
-        Array [
-          2097152,
-          Array [],
-        ],
-        Array [
-          4194304,
-          Array [],
-        ],
-        Array [
-          8388608,
-          Array [],
-        ],
-        Array [
-          16777216,
-          Array [],
-        ],
-        Array [
-          33554432,
-          Array [],
-        ],
-        Array [
-          67108864,
-          Array [],
-        ],
-        Array [
-          134217728,
-          Array [],
-        ],
-        Array [
-          268435456,
-          Array [],
-        ],
-        Array [
-          536870912,
-          Array [],
-        ],
-        Array [
-          1073741824,
-          Array [],
-        ],
-      ],
-      "nativeEvents": Array [],
-      "networkMeasures": Array [],
-      "otherUserTimingMarks": Array [],
-      "reactVersion": "<filtered-version>",
-      "schedulingEvents": Array [
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-state-update",
-          "warning": null,
-        },
-        Object {
-          "componentName": "Component",
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-state-update",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-      ],
-      "snapshotHeight": 0,
-      "snapshots": Array [],
-      "startTime": -10,
-      "suspenseEvents": Array [],
-      "thrownErrors": Array [],
-    },
-  ],
-  "version": 5,
-}
-`;
-
-exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 0 1`] = `
-Object {
-  "changeDescriptions": Map {
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    4 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    5 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    6 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-    7 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "isFirstMount": true,
-      "props": null,
-      "state": null,
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    1 => 0,
-    2 => 0,
-    3 => 0,
-    4 => 0,
-    5 => 0,
-    6 => 0,
-    7 => 0,
-  },
-  "fiberSelfDurations": Map {
-    1 => 0,
-    2 => 0,
-    3 => 0,
-    4 => 0,
-    5 => 0,
-    6 => 0,
-    7 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 1 1`] = `
-Object {
-  "changeDescriptions": Map {
-    5 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-    4 => Object {
-      "context": true,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    7 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [
-        "count",
-      ],
-      "state": null,
-    },
-    6 => Object {
-      "context": Array [
-        "count",
-      ],
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": Array [
-        "count",
-      ],
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-  },
-  "fiberSelfDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "LegacyContextProvider",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "type": 1,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 2 1`] = `
-Object {
-  "changeDescriptions": Map {
-    5 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    4 => Object {
-      "context": false,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    7 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    6 => Object {
-      "context": Array [],
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [
-        "foo",
-      ],
-      "state": Array [],
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "fiberSelfDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 3 1`] = `
-Object {
-  "changeDescriptions": Map {
-    5 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    4 => Object {
-      "context": false,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    7 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    6 => Object {
-      "context": Array [],
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [
-        "foo",
-        "bar",
-      ],
-      "state": Array [],
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "fiberSelfDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should record changed props/state/context/hooks: CommitDetails commitIndex: 4 1`] = `
-Object {
-  "changeDescriptions": Map {
-    5 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    4 => Object {
-      "context": false,
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    7 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    6 => Object {
-      "context": Array [],
-      "didHooksChange": false,
-      "hooks": null,
-      "isFirstMount": false,
-      "props": Array [],
-      "state": null,
-    },
-    2 => Object {
-      "context": null,
-      "didHooksChange": false,
-      "hooks": Array [],
-      "isFirstMount": false,
-      "props": Array [
-        "bar",
-      ],
-      "state": Array [],
-    },
-  },
-  "duration": 0,
-  "effectDuration": null,
-  "fiberActualDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "fiberSelfDurations": Map {
-    5 => 0,
-    4 => 0,
-    7 => 0,
-    6 => 0,
-    3 => 0,
-    2 => 0,
-    1 => 0,
-  },
-  "passiveEffectDuration": null,
-  "priorityLevel": "Immediate",
-  "timestamp": 0,
-  "updaters": Array [
-    Object {
-      "displayName": "render()",
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "type": 11,
-    },
-  ],
-}
-`;
-
-exports[`ProfilingCache should record changed props/state/context/hooks: imported data 1`] = `
-Object {
-  "dataForRoots": Array [
-    Object {
-      "commitData": Array [
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "isFirstMount": true,
-                "props": null,
-                "state": null,
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              1,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": true,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [
-                  "count",
-                ],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": Array [
-                  "count",
-                ],
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": Array [
-                  "count",
-                ],
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "LegacyContextProvider",
-              "hocDisplayNames": null,
-              "id": 2,
-              "key": null,
-              "type": 1,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": false,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": Array [],
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [
-                  "foo",
-                ],
-                "state": Array [],
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": false,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": Array [],
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [
-                  "foo",
-                  "bar",
-                ],
-                "state": Array [],
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-        Object {
-          "changeDescriptions": Array [
-            Array [
-              5,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              4,
-              Object {
-                "context": false,
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              7,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              6,
-              Object {
-                "context": Array [],
-                "didHooksChange": false,
-                "hooks": null,
-                "isFirstMount": false,
-                "props": Array [],
-                "state": null,
-              },
-            ],
-            Array [
-              2,
-              Object {
-                "context": null,
-                "didHooksChange": false,
-                "hooks": Array [],
-                "isFirstMount": false,
-                "props": Array [
-                  "bar",
-                ],
-                "state": Array [],
-              },
-            ],
-          ],
-          "duration": 0,
-          "effectDuration": null,
-          "fiberActualDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "fiberSelfDurations": Array [
-            Array [
-              5,
-              0,
-            ],
-            Array [
-              4,
-              0,
-            ],
-            Array [
-              7,
-              0,
-            ],
-            Array [
-              6,
-              0,
-            ],
-            Array [
-              3,
-              0,
-            ],
-            Array [
-              2,
-              0,
-            ],
-            Array [
-              1,
-              0,
-            ],
-          ],
-          "passiveEffectDuration": null,
-          "priorityLevel": "Immediate",
-          "timestamp": 0,
-          "updaters": Array [
-            Object {
-              "displayName": "render()",
-              "hocDisplayNames": null,
-              "id": 1,
-              "key": null,
-              "type": 11,
-            },
-          ],
-        },
-      ],
-      "displayName": "LegacyContextProvider",
-      "initialTreeBaseDurations": Array [],
-      "operations": Array [
-        Array [
-          1,
-          1,
-          110,
-          21,
-          76,
-          101,
-          103,
-          97,
-          99,
-          121,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          80,
-          114,
-          111,
-          118,
-          105,
-          100,
-          101,
-          114,
-          16,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          46,
-          80,
-          114,
-          111,
-          118,
-          105,
-          100,
-          101,
-          114,
-          21,
-          77,
-          111,
-          100,
-          101,
-          114,
-          110,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          67,
-          111,
-          110,
-          115,
-          117,
-          109,
-          101,
-          114,
-          26,
-          70,
-          117,
-          110,
-          99,
-          116,
-          105,
-          111,
-          110,
-          67,
-          111,
-          109,
-          112,
-          111,
-          110,
-          101,
-          110,
-          116,
-          87,
-          105,
-          116,
-          104,
-          72,
-          111,
-          111,
-          107,
-          115,
-          21,
-          76,
-          101,
-          103,
-          97,
-          99,
-          121,
-          67,
-          111,
-          110,
-          116,
-          101,
-          120,
-          116,
-          67,
-          111,
-          110,
-          115,
-          117,
-          109,
-          101,
-          114,
-          1,
-          1,
-          11,
-          0,
-          3,
-          1,
-          1,
-          1,
-          2,
-          1,
-          1,
-          0,
-          1,
-          0,
-          4,
-          2,
-          0,
-          1,
-          3,
-          2,
-          2,
-          2,
-          2,
-          0,
-          4,
-          3,
-          0,
-          1,
-          4,
-          1,
-          3,
-          2,
-          3,
-          0,
-          4,
-          4,
-          0,
-          1,
-          5,
-          5,
-          4,
-          4,
-          4,
-          0,
-          4,
-          5,
-          0,
-          1,
-          6,
-          1,
-          3,
-          2,
-          5,
-          0,
-          4,
-          6,
-          0,
-          1,
-          7,
-          5,
-          6,
-          6,
-          4,
-          0,
-          4,
-          7,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-        Array [
-          1,
-          1,
-          0,
-        ],
-      ],
-      "rootID": 1,
-      "snapshots": Array [],
-    },
-  ],
-  "timelineData": Array [
-    Object {
-      "batchUIDToMeasuresKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-          ],
-        ],
-        Array [
-          3,
-          Array [
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-          ],
-        ],
-        Array [
-          4,
-          Array [
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-          ],
-        ],
-        Array [
-          5,
-          Array [
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-          ],
-        ],
-      ],
-      "componentMeasures": Array [
-        Object {
-          "componentName": "LegacyContextProvider",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "ModernContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextProvider",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "ModernContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextProvider",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "ModernContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextProvider",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "ModernContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextProvider",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "ModernContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextConsumer",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "FunctionComponentWithHooks",
-          "duration": 0,
-          "timestamp": 10,
-          "type": "render",
-          "warning": null,
-        },
-      ],
-      "duration": 20,
-      "flamechart": Array [],
-      "internalModuleSourceToRanges": Array [],
-      "laneToLabelKeyValueArray": Array [
-        Array [
-          1,
-          "Sync",
-        ],
-        Array [
-          2,
-          "InputContinuousHydration",
-        ],
-        Array [
-          4,
-          "InputContinuous",
-        ],
-        Array [
-          8,
-          "DefaultHydration",
-        ],
-        Array [
-          16,
-          "Default",
-        ],
-        Array [
-          32,
-          "TransitionHydration",
-        ],
-        Array [
-          64,
-          "Transition",
-        ],
-        Array [
-          128,
-          "Transition",
-        ],
-        Array [
-          256,
-          "Transition",
-        ],
-        Array [
-          512,
-          "Transition",
-        ],
-        Array [
-          1024,
-          "Transition",
-        ],
-        Array [
-          2048,
-          "Transition",
-        ],
-        Array [
-          4096,
-          "Transition",
-        ],
-        Array [
-          8192,
-          "Transition",
-        ],
-        Array [
-          16384,
-          "Transition",
-        ],
-        Array [
-          32768,
-          "Transition",
-        ],
-        Array [
-          65536,
-          "Transition",
-        ],
-        Array [
-          131072,
-          "Transition",
-        ],
-        Array [
-          262144,
-          "Transition",
-        ],
-        Array [
-          524288,
-          "Transition",
-        ],
-        Array [
-          1048576,
-          "Transition",
-        ],
-        Array [
-          2097152,
-          "Transition",
-        ],
-        Array [
-          4194304,
-          "Retry",
-        ],
-        Array [
-          8388608,
-          "Retry",
-        ],
-        Array [
-          16777216,
-          "Retry",
-        ],
-        Array [
-          33554432,
-          "Retry",
-        ],
-        Array [
-          67108864,
-          "Retry",
-        ],
-        Array [
-          134217728,
-          "SelectiveHydration",
-        ],
-        Array [
-          268435456,
-          "IdleHydration",
-        ],
-        Array [
-          536870912,
-          "Idle",
-        ],
-        Array [
-          1073741824,
-          "Offscreen",
-        ],
-      ],
-      "laneToReactMeasureKeyValueArray": Array [
-        Array [
-          1,
-          Array [
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 1,
-              "depth": 1,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "layout-effects",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 2,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 3,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 4,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render-idle",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "render",
-            },
-            Object {
-              "batchUID": 5,
-              "depth": 0,
-              "duration": 0,
-              "lanes": "0b0000000000000000000000000000001",
-              "timestamp": 10,
-              "type": "commit",
-            },
-          ],
-        ],
-        Array [
-          2,
-          Array [],
-        ],
-        Array [
-          4,
-          Array [],
-        ],
-        Array [
-          8,
-          Array [],
-        ],
-        Array [
-          16,
-          Array [],
-        ],
-        Array [
-          32,
-          Array [],
-        ],
-        Array [
-          64,
-          Array [],
-        ],
-        Array [
-          128,
-          Array [],
-        ],
-        Array [
-          256,
-          Array [],
-        ],
-        Array [
-          512,
-          Array [],
-        ],
-        Array [
-          1024,
-          Array [],
-        ],
-        Array [
-          2048,
-          Array [],
-        ],
-        Array [
-          4096,
-          Array [],
-        ],
-        Array [
-          8192,
-          Array [],
-        ],
-        Array [
-          16384,
-          Array [],
-        ],
-        Array [
-          32768,
-          Array [],
-        ],
-        Array [
-          65536,
-          Array [],
-        ],
-        Array [
-          131072,
-          Array [],
-        ],
-        Array [
-          262144,
-          Array [],
-        ],
-        Array [
-          524288,
-          Array [],
-        ],
-        Array [
-          1048576,
-          Array [],
-        ],
-        Array [
-          2097152,
-          Array [],
-        ],
-        Array [
-          4194304,
-          Array [],
-        ],
-        Array [
-          8388608,
-          Array [],
-        ],
-        Array [
-          16777216,
-          Array [],
-        ],
-        Array [
-          33554432,
-          Array [],
-        ],
-        Array [
-          67108864,
-          Array [],
-        ],
-        Array [
-          134217728,
-          Array [],
-        ],
-        Array [
-          268435456,
-          Array [],
-        ],
-        Array [
-          536870912,
-          Array [],
-        ],
-        Array [
-          1073741824,
-          Array [],
-        ],
-      ],
-      "nativeEvents": Array [],
-      "networkMeasures": Array [],
-      "otherUserTimingMarks": Array [],
-      "reactVersion": "<filtered-version>",
-      "schedulingEvents": Array [
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "componentName": "LegacyContextProvider",
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-state-update",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-        Object {
-          "lanes": "0b0000000000000000000000000000001",
-          "timestamp": 10,
-          "type": "schedule-render",
-          "warning": null,
-        },
-      ],
-      "snapshotHeight": 0,
-      "snapshots": Array [],
-      "startTime": -10,
-      "suspenseEvents": Array [],
-      "thrownErrors": Array [],
-    },
-  ],
-  "version": 5,
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
deleted file mode 100644
index e118ef9da325..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCharts-test.js.snap
+++ /dev/null
@@ -1,430 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`profiling charts flamegraph chart should contain valid data: 0: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 15,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-        4,
-        5,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 15,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": "first",
-      "parentID": 2,
-      "treeBaseDuration": 3,
-      "type": 8,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "second",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-    5 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "key": "third",
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 8,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`profiling charts flamegraph chart should contain valid data: 0: FlamegraphChartData 1`] = `
-Object {
-  "baseDuration": 15,
-  "depth": 2,
-  "idToDepthMap": Map {
-    2 => 1,
-    5 => 2,
-    4 => 2,
-    3 => 2,
-  },
-  "maxSelfDuration": 10,
-  "renderPathNodes": Set {
-    1,
-    2,
-  },
-  "rows": Array [
-    Array [
-      Object {
-        "actualDuration": 15,
-        "didRender": true,
-        "id": 2,
-        "label": "Parent (10ms of 15ms)",
-        "name": "Parent",
-        "offset": 0,
-        "selfDuration": 10,
-        "treeBaseDuration": 15,
-      },
-    ],
-    Array [
-      Object {
-        "actualDuration": 0,
-        "didRender": true,
-        "id": 5,
-        "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
-        "name": "Child",
-        "offset": 15,
-        "selfDuration": 0,
-        "treeBaseDuration": 0,
-      },
-      Object {
-        "actualDuration": 2,
-        "didRender": true,
-        "id": 4,
-        "label": "Child key=\\"second\\" (2ms of 2ms)",
-        "name": "Child",
-        "offset": 13,
-        "selfDuration": 2,
-        "treeBaseDuration": 2,
-      },
-      Object {
-        "actualDuration": 3,
-        "didRender": true,
-        "id": 3,
-        "label": "Child key=\\"first\\" (3ms of 3ms)",
-        "name": "Child",
-        "offset": 10,
-        "selfDuration": 3,
-        "treeBaseDuration": 3,
-      },
-    ],
-  ],
-}
-`;
-
-exports[`profiling charts flamegraph chart should contain valid data: 1: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 15,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-        4,
-        5,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 15,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": "first",
-      "parentID": 2,
-      "treeBaseDuration": 3,
-      "type": 8,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "second",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-    5 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "key": "third",
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 8,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`profiling charts flamegraph chart should contain valid data: 1: FlamegraphChartData 1`] = `
-Object {
-  "baseDuration": 15,
-  "depth": 2,
-  "idToDepthMap": Map {
-    2 => 1,
-    5 => 2,
-    4 => 2,
-    3 => 2,
-  },
-  "maxSelfDuration": 10,
-  "renderPathNodes": Set {
-    1,
-  },
-  "rows": Array [
-    Array [
-      Object {
-        "actualDuration": 10,
-        "didRender": true,
-        "id": 2,
-        "label": "Parent (10ms of 10ms)",
-        "name": "Parent",
-        "offset": 0,
-        "selfDuration": 10,
-        "treeBaseDuration": 15,
-      },
-    ],
-    Array [
-      Object {
-        "actualDuration": 0,
-        "didRender": false,
-        "id": 5,
-        "label": "Child key=\\"third\\"",
-        "name": "Child",
-        "offset": 15,
-        "selfDuration": 0,
-        "treeBaseDuration": 0,
-      },
-      Object {
-        "actualDuration": 0,
-        "didRender": false,
-        "id": 4,
-        "label": "Child key=\\"second\\"",
-        "name": "Child",
-        "offset": 13,
-        "selfDuration": 0,
-        "treeBaseDuration": 2,
-      },
-      Object {
-        "actualDuration": 0,
-        "didRender": false,
-        "id": 3,
-        "label": "Child key=\\"first\\"",
-        "name": "Child",
-        "offset": 10,
-        "selfDuration": 0,
-        "treeBaseDuration": 3,
-      },
-    ],
-  ],
-}
-`;
-
-exports[`profiling charts ranked chart should contain valid data: 0: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 15,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-        4,
-        5,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 15,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": "first",
-      "parentID": 2,
-      "treeBaseDuration": 3,
-      "type": 8,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "second",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-    5 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "key": "third",
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 8,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`profiling charts ranked chart should contain valid data: 0: RankedChartData 1`] = `
-Object {
-  "maxValue": 10,
-  "nodes": Array [
-    Object {
-      "id": 2,
-      "label": "Parent (10ms)",
-      "name": "Parent",
-      "value": 10,
-    },
-    Object {
-      "id": 3,
-      "label": "Child (Memo) key=\\"first\\" (3ms)",
-      "name": "Child",
-      "value": 3,
-    },
-    Object {
-      "id": 4,
-      "label": "Child (Memo) key=\\"second\\" (2ms)",
-      "name": "Child",
-      "value": 2,
-    },
-    Object {
-      "id": 5,
-      "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
-      "name": "Child",
-      "value": 0,
-    },
-  ],
-}
-`;
-
-exports[`profiling charts ranked chart should contain valid data: 1: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 15,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-        4,
-        5,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 15,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": "first",
-      "parentID": 2,
-      "treeBaseDuration": 3,
-      "type": 8,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "second",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-    5 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "key": "third",
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 8,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`profiling charts ranked chart should contain valid data: 1: RankedChartData 1`] = `
-Object {
-  "maxValue": 10,
-  "nodes": Array [
-    Object {
-      "id": 2,
-      "label": "Parent (10ms)",
-      "name": "Parent",
-      "value": 10,
-    },
-  ],
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
deleted file mode 100644
index 43f3f91c7a24..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/profilingCommitTreeBuilder-test.js.snap
+++ /dev/null
@@ -1,526 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`commit tree Lazy should support Lazy components (createRoot): 0: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-      ],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": null,
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 12,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree Lazy should support Lazy components (createRoot): 1: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-      ],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [
-        6,
-      ],
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": null,
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 12,
-    },
-    6 => Object {
-      "children": Array [],
-      "displayName": "LazyInnerComponent",
-      "hocDisplayNames": null,
-      "id": 6,
-      "key": null,
-      "parentID": 3,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree Lazy should support Lazy components (legacy render): 0: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-      ],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": null,
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 12,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree Lazy should support Lazy components (legacy render): 1: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-      ],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [
-        6,
-      ],
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": null,
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 12,
-    },
-    6 => Object {
-      "children": Array [],
-      "displayName": "LazyInnerComponent",
-      "hocDisplayNames": null,
-      "id": 6,
-      "key": null,
-      "parentID": 3,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 0: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-      ],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": null,
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 12,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (createRoot): 1: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 0: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-      ],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Suspense",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": null,
-      "parentID": 2,
-      "treeBaseDuration": 0,
-      "type": 12,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree Lazy should support Lazy components that are unmounted before resolving (legacy render): 1: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 0,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [],
-      "displayName": "App",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 0,
-      "type": 5,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree should be able to rebuild the store tree for each commit: 0: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 12,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 12,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": "0",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree should be able to rebuild the store tree for each commit: 1: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 16,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-        4,
-        5,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 16,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": "0",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "1",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-    5 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 5,
-      "key": "2",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree should be able to rebuild the store tree for each commit: 2: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 14,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [
-        3,
-        4,
-      ],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 14,
-      "type": 5,
-    },
-    3 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 3,
-      "key": "0",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-    4 => Object {
-      "children": Array [],
-      "displayName": "Child",
-      "hocDisplayNames": null,
-      "id": 4,
-      "key": "1",
-      "parentID": 2,
-      "treeBaseDuration": 2,
-      "type": 8,
-    },
-  },
-  "rootID": 1,
-}
-`;
-
-exports[`commit tree should be able to rebuild the store tree for each commit: 3: CommitTree 1`] = `
-Object {
-  "nodes": Map {
-    1 => Object {
-      "children": Array [
-        2,
-      ],
-      "displayName": null,
-      "hocDisplayNames": null,
-      "id": 1,
-      "key": null,
-      "parentID": 0,
-      "treeBaseDuration": 10,
-      "type": 11,
-    },
-    2 => Object {
-      "children": Array [],
-      "displayName": "Parent",
-      "hocDisplayNames": null,
-      "id": 2,
-      "key": null,
-      "parentID": 1,
-      "treeBaseDuration": 10,
-      "type": 5,
-    },
-  },
-  "rootID": 1,
-}
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
deleted file mode 100644
index eedcaa33fc07..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/store-test.js.snap
+++ /dev/null
@@ -1,672 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Store Lazy should support Lazy components (legacy render): 1: mounted + loading 1`] = `
-[root]
-  ▾ <App>
-      <Suspense>
-`;
-
-exports[`Store Lazy should support Lazy components (legacy render): 2: mounted + loaded 1`] = `
-[root]
-  ▾ <App>
-    ▾ <Suspense>
-        <LazyInnerComponent>
-`;
-
-exports[`Store Lazy should support Lazy components (legacy render): 3: unmounted 1`] = `
-[root]
-    <App>
-`;
-
-exports[`Store Lazy should support Lazy components in (createRoot): 1: mounted + loading 1`] = `
-[root]
-  ▾ <App>
-      <Suspense>
-`;
-
-exports[`Store Lazy should support Lazy components in (createRoot): 2: mounted + loaded 1`] = `
-[root]
-  ▾ <App>
-    ▾ <Suspense>
-        <LazyInnerComponent>
-`;
-
-exports[`Store Lazy should support Lazy components in (createRoot): 3: unmounted 1`] = `
-[root]
-    <App>
-`;
-
-exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 1: mounted + loading 1`] = `
-[root]
-  ▾ <App>
-      <Suspense>
-`;
-
-exports[`Store Lazy should support Lazy components that are unmounted before they finish loading (legacy render): 2: unmounted 1`] = `
-[root]
-    <App>
-`;
-
-exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 1: mounted + loading 1`] = `
-[root]
-  ▾ <App>
-      <Suspense>
-`;
-
-exports[`Store Lazy should support Lazy components that are unmounted before they finish loading in (createRoot): 2: unmounted 1`] = `
-[root]
-    <App>
-`;
-
-exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 1: loading 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Loading>
-`;
-
-exports[`Store collapseNodesByDefault:false should display Suspense nodes properly in various states: 2: resolved 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Inside">
-`;
-
-exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 1: loading 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <SuspenseList>
-        <Component key="A">
-      ▾ <Suspense>
-          <Loading>
-`;
-
-exports[`Store collapseNodesByDefault:false should display a partially rendered SuspenseList: 2: resolved 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <SuspenseList>
-        <Component key="A">
-      ▾ <Suspense>
-          <Component key="B">
-        <Component key="C">
-`;
-
-exports[`Store collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-    ▾ <Parent>
-        <Child>
-`;
-
-exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <Parent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-[root]
-  ▾ <Parent key="B">
-      <Child key="0">
-      <Child key="1">
-`;
-
-exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-      <Child key="3">
-[root]
-  ▾ <Parent key="B">
-      <Child key="0">
-`;
-
-exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
-[root]
-  ▾ <Parent key="A">
-      <Child key="0">
-      <Child key="1">
-      <Child key="2">
-      <Child key="3">
-`;
-
-exports[`Store collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
-
-exports[`Store collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-        <Child key="2">
-        <Child key="3">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-        <Child key="2">
-        <Child key="3">
-`;
-
-exports[`Store collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`Store collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 1: third child is suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Component key="Suspense 1 Content">
-      ▾ <Suspense>
-          <Component key="Suspense 2 Content">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 2: first and third child are suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Loading key="Suspense 1 Fallback">
-      ▾ <Suspense>
-          <Component key="Suspense 2 Content">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 3: second and third child are suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Component key="Suspense 1 Content">
-      ▾ <Suspense>
-          <Loading key="Suspense 2 Fallback">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 4: first and third child are suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Loading key="Suspense 1 Fallback">
-      ▾ <Suspense>
-          <Component key="Suspense 2 Content">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 5: parent is suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Loading key="Parent Fallback">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 6: all children are suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Loading key="Suspense 1 Fallback">
-      ▾ <Suspense>
-          <Loading key="Suspense 2 Fallback">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 7: only third child is suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Component key="Suspense 1 Content">
-      ▾ <Suspense>
-          <Component key="Suspense 2 Content">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 8: first and third child are suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Loading key="Suspense 1 Fallback">
-      ▾ <Suspense>
-          <Component key="Suspense 2 Content">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 9: parent is suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Loading key="Parent Fallback">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 10: parent is suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Loading key="Parent Fallback">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 11: all children are suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Loading key="Suspense 1 Fallback">
-      ▾ <Suspense>
-          <Loading key="Suspense 2 Fallback">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 12: all children are suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Loading key="Suspense 1 Fallback">
-      ▾ <Suspense>
-          <Loading key="Suspense 2 Fallback">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support nested Suspense nodes: 13: third child is suspended 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Unrelated at Start">
-      ▾ <Suspense>
-          <Component key="Suspense 1 Content">
-      ▾ <Suspense>
-          <Component key="Suspense 2 Content">
-      ▾ <Suspense>
-          <Loading key="Suspense 3 Fallback">
-        <Component key="Unrelated at End">
-`;
-
-exports[`Store collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <Foo key="foo">
-        <Component key="0">
-    ▾ <Bar key="bar">
-        <Component key="0">
-        <Component key="1">
-`;
-
-exports[`Store collapseNodesByDefault:false should support reordering of children: 3: reorder children 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <Bar key="bar">
-        <Component key="0">
-        <Component key="1">
-    ▾ <Foo key="foo">
-        <Component key="0">
-`;
-
-exports[`Store collapseNodesByDefault:false should support reordering of children: 4: collapse root 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store collapseNodesByDefault:false should support reordering of children: 5: expand root 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <Bar key="bar">
-        <Component key="0">
-        <Component key="1">
-    ▾ <Foo key="foo">
-        <Component key="0">
-`;
-
-exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 1: loading 1`] = `
-[root]
-  ▸ <Wrapper>
-`;
-
-exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: expand Wrapper and Suspense 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Loading>
-`;
-
-exports[`Store collapseNodesByDefault:true should display Suspense nodes properly in various states: 2: resolved 1`] = `
-[root]
-  ▾ <Wrapper>
-      <Component key="Outside">
-    ▾ <Suspense>
-        <Component key="Inside">
-`;
-
-exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child>
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 1: mount 1`] = `
-[root]
-  ▸ <SuspenseTree>
-`;
-
-exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 2: expand tree 1`] = `
-[root]
-  ▾ <SuspenseTree>
-    ▾ <Suspense>
-      ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 3: toggle fallback on 1`] = `
-[root]
-  ▾ <SuspenseTree>
-    ▾ <Suspense>
-        <Fallback>
-`;
-
-exports[`Store collapseNodesByDefault:true should not add new nodes when suspense is toggled: 4: toggle fallback on 1`] = `
-[root]
-  ▾ <SuspenseTree>
-    ▾ <Suspense>
-      ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
-[root]
-  ▸ <Wrapper>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Nested>
-      ▾ <Nested>
-        ▾ <Nested>
-            <Nested>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
-[root]
-  ▸ <Wrapper>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Nested>
-      ▾ <Nested>
-        ▾ <Nested>
-            <Nested>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▸ <Nested>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Nested>
-      ▾ <Nested>
-        ▾ <Nested>
-            <Nested>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <Parent>
-    ▾ <Parent>
-        <Child key="0">
-        <Child key="1">
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <Parent>
-    ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
-[root]
-  ▸ <Parent key="A">
-[root]
-  ▸ <Parent key="B">
-`;
-
-exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
-[root]
-  ▸ <Parent key="A">
-[root]
-  ▸ <Parent key="B">
-`;
-
-exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
-[root]
-  ▸ <Parent key="A">
-`;
-
-exports[`Store collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
-
-exports[`Store collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
-[root]
-  ▸ <Parent>
-  ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
-[root]
-  ▸ <Parent>
-  ▸ <Parent>
-`;
-
-exports[`Store collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
-
-exports[`Store collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store collapseNodesByDefault:true should support reordering of children: 3: reorder children 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store collapseNodesByDefault:true should support reordering of children: 4: expand root 1`] = `
-[root]
-  ▾ <Root>
-    ▸ <Bar key="bar">
-    ▸ <Foo key="foo">
-`;
-
-exports[`Store collapseNodesByDefault:true should support reordering of children: 5: expand leaves 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <Bar key="bar">
-        <Component key="0">
-        <Component key="1">
-    ▾ <Foo key="foo">
-        <Component key="0">
-`;
-
-exports[`Store collapseNodesByDefault:true should support reordering of children: 6: collapse root 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store should not allow a root node to be collapsed: 1: mount 1`] = `
-[root]
-    <Component>
-`;
-
-exports[`Store should properly handle a root with no visible nodes: 1: mount 1`] = `
-[root]
-    <Root>
-`;
-
-exports[`Store should properly handle a root with no visible nodes: 2: add host nodes 1`] = `[root]`;
-
-exports[`Store should properly serialize non-string key values: 1: mount 1`] = `
-[root]
-    <Child key="123">
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap
deleted file mode 100644
index 28069711fd68..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeOwners-test.js.snap
+++ /dev/null
@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Store owners list should drill through interleaved intermediate components: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <Intermediate key="intermediate">
-        <Leaf key="leaf">
-      ▾ <Wrapper key="wrapper">
-          <Leaf>
-      <Leaf key="leaf">
-`;
-
-exports[`Store owners list should drill through interleaved intermediate components: 2: components owned by <Root> 1`] = `
-"  ▾ <Root>
-    ▾ <Intermediate key=\\"intermediate\\">
-        <Leaf>
-      <Leaf key=\\"leaf\\">"
-`;
-
-exports[`Store owners list should drill through interleaved intermediate components: 3: components owned by <Intermediate> 1`] = `
-"  ▾ <Intermediate key=\\"intermediate\\">
-      <Leaf key=\\"leaf\\">
-    ▾ <Wrapper key=\\"wrapper\\">"
-`;
-
-exports[`Store owners list should drill through intermediate components: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <Intermediate>
-      ▾ <Wrapper>
-          <Leaf>
-`;
-
-exports[`Store owners list should drill through intermediate components: 2: components owned by <Root> 1`] = `
-"  ▾ <Root>
-    ▾ <Intermediate>
-        <Leaf>"
-`;
-
-exports[`Store owners list should drill through intermediate components: 3: components owned by <Intermediate> 1`] = `
-"  ▾ <Intermediate>
-    ▾ <Wrapper>"
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <Intermediate>
-      ▾ <Wrapper>
-          <Leaf>
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 2: components owned by <Root> 1`] = `
-"  ▾ <Root>
-    ▾ <Intermediate>
-        <Leaf>"
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 3: update to add direct 1`] = `
-[root]
-  ▾ <Root>
-      <Leaf>
-    ▾ <Intermediate>
-      ▾ <Wrapper>
-          <Leaf>
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 4: components owned by <Root> 1`] = `
-"  ▾ <Root>
-      <Leaf>
-    ▾ <Intermediate>
-        <Leaf>"
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 5: update to remove indirect 1`] = `
-[root]
-  ▾ <Root>
-      <Leaf>
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 6: components owned by <Root> 1`] = `
-"  ▾ <Root>
-      <Leaf>"
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 7: update to remove both 1`] = `
-[root]
-    <Root>
-`;
-
-exports[`Store owners list should show the proper owners list order and contents after insertions and deletions: 8: components owned by <Root> 1`] = `"    <Root>"`;
-
-exports[`Store owners list should show the proper owners list ordering after reordered children: 1: mount (ascending) 1`] = `
-[root]
-  ▾ <Root>
-      <Leaf key="A">
-      <Leaf key="B">
-      <Leaf key="C">
-`;
-
-exports[`Store owners list should show the proper owners list ordering after reordered children: 2: components owned by <Root> 1`] = `
-"  ▾ <Root>
-      <Leaf key=\\"A\\">
-      <Leaf key=\\"B\\">
-      <Leaf key=\\"C\\">"
-`;
-
-exports[`Store owners list should show the proper owners list ordering after reordered children: 3: update (descending) 1`] = `
-[root]
-  ▾ <Root>
-      <Leaf key="C">
-      <Leaf key="B">
-      <Leaf key="A">
-`;
-
-exports[`Store owners list should show the proper owners list ordering after reordered children: 4: components owned by <Root> 1`] = `
-"  ▾ <Root>
-      <Leaf key=\\"C\\">
-      <Leaf key=\\"B\\">
-      <Leaf key=\\"A\\">"
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap b/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
deleted file mode 100644
index 06628a9e9a02..000000000000
--- a/packages/react-devtools-shared/src/__tests__/legacy/__snapshots__/storeLegacy-v15-test.js.snap
+++ /dev/null
@@ -1,499 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 1: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <div>
-        ▾ <Parent>
-          ▾ <div>
-            ▾ <Child>
-                <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child>
-              <div>
-        <Nothing>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 2: update 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <div>
-        ▾ <Parent>
-          ▾ <div>
-            ▾ <Child>
-                <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child>
-              <div>
-        <Nothing>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Component key="a">
-          <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 2: add child 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Component key="a">
-          <div>
-      ▾ <Component key="b">
-          <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support adding and removing children: 3: remove child 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Component key="b">
-          <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▸ <Parent>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▸ <Parent>
-      ▸ <Parent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-      ▸ <Parent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-      ▸ <Parent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
-[root]
-  ▾ <Parent key="A">
-    ▾ <div>
-      ▾ <Child key="0">
-          <div>
-      ▾ <Child key="1">
-          <div>
-      ▾ <Child key="2">
-          <div>
-[root]
-  ▾ <Parent key="B">
-    ▾ <div>
-      ▾ <Child key="0">
-          <div>
-      ▾ <Child key="1">
-          <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
-[root]
-  ▾ <Parent key="A">
-    ▾ <div>
-      ▾ <Child key="0">
-          <div>
-      ▾ <Child key="1">
-          <div>
-      ▾ <Child key="2">
-          <div>
-      ▾ <Child key="3">
-          <div>
-[root]
-  ▾ <Parent key="B">
-    ▾ <div>
-      ▾ <Child key="0">
-          <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
-[root]
-  ▾ <Parent key="A">
-    ▾ <div>
-      ▾ <Child key="0">
-          <div>
-      ▾ <Child key="1">
-          <div>
-      ▾ <Child key="2">
-          <div>
-      ▾ <Child key="3">
-          <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-          ▾ <Child key="2">
-              <div>
-          ▾ <Child key="3">
-              <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-          ▾ <Child key="2">
-              <div>
-          ▾ <Child key="3">
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-      ▾ <Parent>
-        ▾ <div>
-          ▾ <Child key="0">
-              <div>
-          ▾ <Child key="1">
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 1: mount 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Foo key="foo">
-        ▾ <div>
-          ▾ <Component key="0">
-              <div>
-      ▾ <Bar key="bar">
-        ▾ <div>
-          ▾ <Component key="0">
-              <div>
-          ▾ <Component key="1">
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 2: reorder children 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Bar key="bar">
-        ▾ <div>
-          ▾ <Component key="0">
-              <div>
-          ▾ <Component key="1">
-              <div>
-      ▾ <Foo key="foo">
-        ▾ <div>
-          ▾ <Component key="0">
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 3: collapse root 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:false should support reordering of children: 4: expand root 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Bar key="bar">
-        ▾ <div>
-          ▾ <Component key="0">
-              <div>
-          ▾ <Component key="1">
-              <div>
-      ▾ <Foo key="foo">
-        ▾ <div>
-          ▾ <Component key="0">
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 1: mount 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 3: expand div 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▸ <div>
-      ▸ <Parent>
-        <Nothing>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 4: final update 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▸ <div>
-      ▸ <Parent>
-        <Nothing>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should not filter DOM nodes from the store tree: 5: unmount 1`] = ``;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
-[root]
-  ▸ <Wrapper>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Nested>
-      ▾ <Nested>
-        ▾ <Nested>
-          ▾ <Nested>
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
-[root]
-  ▸ <Wrapper>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Nested>
-      ▾ <Nested>
-        ▾ <Nested>
-          ▾ <Nested>
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▸ <Nested>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
-[root]
-  ▾ <Wrapper>
-    ▾ <Nested>
-      ▾ <Nested>
-        ▾ <Nested>
-          ▾ <Nested>
-              <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand parent div 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▸ <Parent>
-      ▸ <Parent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <Parent>
-        ▸ <div>
-      ▸ <Parent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: expand second Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▾ <Parent>
-        ▸ <div>
-      ▾ <Parent>
-        ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse first Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▸ <Parent>
-      ▾ <Parent>
-        ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse second Parent 1`] = `
-[root]
-  ▾ <Grandparent>
-    ▾ <div>
-      ▸ <Parent>
-      ▸ <Parent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 8: collapse Grandparent 1`] = `
-[root]
-  ▸ <Grandparent>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
-[root]
-  ▸ <Parent key="A">
-[root]
-  ▸ <Parent key="B">
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
-[root]
-  ▸ <Parent key="A">
-[root]
-  ▸ <Parent key="B">
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
-[root]
-  ▸ <Parent key="A">
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
-[root]
-  ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
-[root]
-  ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 1: mount 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 2: reorder children 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 3: expand root 1`] = `
-[root]
-  ▾ <Root>
-    ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand div 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▸ <Bar key="bar">
-      ▸ <Foo key="foo">
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 4: expand leaves 1`] = `
-[root]
-  ▾ <Root>
-    ▾ <div>
-      ▾ <Bar key="bar">
-        ▸ <div>
-      ▾ <Foo key="foo">
-        ▸ <div>
-`;
-
-exports[`Store (legacy) collapseNodesByDefault:true should support reordering of children: 5: collapse root 1`] = `
-[root]
-  ▸ <Root>
-`;
-
-exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
-[root]
-  ▾ <Component>
-      <div>
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
index 9afd3344c985..53c177315716 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/storeLegacy-v15-test.js
@@ -38,7 +38,11 @@ describe('Store (legacy)', () => {
     act(() =>
       ReactDOM.render(<Component count={4} />, document.createElement('div')),
     );
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Component>
+            <div>
+    `);
 
     expect(store.roots).toHaveLength(1);
 
@@ -73,13 +77,53 @@ describe('Store (legacy)', () => {
       const container = document.createElement('div');
 
       act(() => ReactDOM.render(<Grandparent count={4} />, container));
-      expect(store).toMatchSnapshot('1: mount');
+      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(<Grandparent count={2} />, container));
-      expect(store).toMatchSnapshot('2: update');
+      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).toMatchSnapshot('3: unmount');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should support mount and update operations for multiple roots', () => {
@@ -99,19 +143,65 @@ describe('Store (legacy)', () => {
         ReactDOM.render(<Parent key="A" count={3} />, containerA);
         ReactDOM.render(<Parent key="B" count={2} />, containerB);
       });
-      expect(store).toMatchSnapshot('1: mount');
+      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(<Parent key="A" count={4} />, containerA);
         ReactDOM.render(<Parent key="B" count={1} />, containerB);
       });
-      expect(store).toMatchSnapshot('2: update');
+      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).toMatchSnapshot('3: unmount B');
+      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).toMatchSnapshot('4: unmount A');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should not filter DOM nodes from the store tree', () => {
@@ -139,15 +229,43 @@ describe('Store (legacy)', () => {
       act(() =>
         ReactDOM.render(<Grandparent count={4} flip={false} />, container),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <div>
+                ▾ <Parent>
+                  ▾ <div>
+                    ▾ <Child>
+                        <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child>
+                      <div>
+                <Nothing>
+      `);
 
       act(() =>
         ReactDOM.render(<Grandparent count={4} flip={true} />, container),
       );
-      expect(store).toMatchSnapshot('2: update');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <div>
+                ▾ <Parent>
+                  ▾ <div>
+                    ▾ <Child>
+                        <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child>
+                      <div>
+                <Nothing>
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(store).toMatchSnapshot('5: unmount');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should support collapsing parts of the tree', () => {
@@ -172,26 +290,84 @@ describe('Store (legacy)', () => {
           document.createElement('div'),
         ),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      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).toMatchSnapshot('2: collapse first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+      `);
 
       act(() => store.toggleIsCollapsed(parentTwoID, true));
-      expect(store).toMatchSnapshot('3: collapse second Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(parentOneID, false));
-      expect(store).toMatchSnapshot('4: expand first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+              ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(grandparentID, true));
-      expect(store).toMatchSnapshot('5: collapse Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
 
       act(() => store.toggleIsCollapsed(grandparentID, false));
-      expect(store).toMatchSnapshot('6: expand Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▾ <div>
+                  ▾ <Child key="0">
+                      <div>
+                  ▾ <Child key="1">
+                      <div>
+              ▸ <Parent>
+      `);
     });
 
     it('should support adding and removing children', () => {
@@ -208,7 +384,13 @@ describe('Store (legacy)', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Component key="a">
+                  <div>
+      `);
 
       act(() =>
         ReactDOM.render(
@@ -219,7 +401,15 @@ describe('Store (legacy)', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('2: add child');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Component key="a">
+                  <div>
+              ▾ <Component key="b">
+                  <div>
+      `);
 
       act(() =>
         ReactDOM.render(
@@ -229,7 +419,13 @@ describe('Store (legacy)', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('3: remove child');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Component key="b">
+                  <div>
+      `);
     });
 
     it('should support reordering of children', () => {
@@ -246,16 +442,61 @@ describe('Store (legacy)', () => {
       const container = document.createElement('div');
 
       act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
-      expect(store).toMatchSnapshot('1: mount');
+      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(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('2: reorder children');
+      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).toMatchSnapshot('3: collapse root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('4: expand root');
+      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>
+      `);
     });
   });
 
@@ -285,7 +526,10 @@ describe('Store (legacy)', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <div>
+      `);
 
       act(() =>
         ReactDOM.render(
@@ -296,10 +540,13 @@ describe('Store (legacy)', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('2: update');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <div>
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(store).toMatchSnapshot('3: unmount');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should support mount and update operations for multiple roots', () => {
@@ -319,19 +566,32 @@ describe('Store (legacy)', () => {
         ReactDOM.render(<Parent key="A" count={3} />, containerA);
         ReactDOM.render(<Parent key="B" count={2} />, containerB);
       });
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
 
       act(() => {
         ReactDOM.render(<Parent key="A" count={4} />, containerA);
         ReactDOM.render(<Parent key="B" count={1} />, containerB);
       });
-      expect(store).toMatchSnapshot('2: update');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(containerB));
-      expect(store).toMatchSnapshot('3: unmount B');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(containerA));
-      expect(store).toMatchSnapshot('4: unmount A');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should not filter DOM nodes from the store tree', () => {
@@ -359,21 +619,42 @@ describe('Store (legacy)', () => {
       act(() =>
         ReactDOM.render(<Grandparent count={4} flip={false} />, container),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('2: expand Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <div>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
-      expect(store).toMatchSnapshot('3: expand div');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <div>
+              ▸ <Parent>
+                <Nothing>
+      `);
 
       act(() =>
         ReactDOM.render(<Grandparent count={4} flip={true} />, container),
       );
-      expect(store).toMatchSnapshot('4: final update');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <div>
+              ▸ <Parent>
+                <Nothing>
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(store).toMatchSnapshot('5: unmount');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should support expanding parts of the tree', () => {
@@ -398,34 +679,78 @@ describe('Store (legacy)', () => {
           document.createElement('div'),
         ),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
 
       const grandparentID = store.getElementIDAtIndex(0);
 
       act(() => store.toggleIsCollapsed(grandparentID, false));
-      expect(store).toMatchSnapshot('2: expand Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <div>
+      `);
 
       const parentDivID = store.getElementIDAtIndex(1);
       act(() => store.toggleIsCollapsed(parentDivID, false));
-      expect(store).toMatchSnapshot('3: expand parent div');
+      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).toMatchSnapshot('4: expand first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▸ <div>
+              ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(parentTwoID, false));
-      expect(store).toMatchSnapshot('5: expand second Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▾ <Parent>
+                ▸ <div>
+              ▾ <Parent>
+                ▸ <div>
+      `);
 
       act(() => store.toggleIsCollapsed(parentOneID, true));
-      expect(store).toMatchSnapshot('6: collapse first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▾ <Parent>
+                ▸ <div>
+      `);
 
       act(() => store.toggleIsCollapsed(parentTwoID, true));
-      expect(store).toMatchSnapshot('7: collapse second Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <div>
+              ▸ <Parent>
+              ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(grandparentID, true));
-      expect(store).toMatchSnapshot('8: collapse Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
     });
 
     it('should support expanding deep parts of the tree', () => {
@@ -450,28 +775,62 @@ describe('Store (legacy)', () => {
           document.createElement('div'),
         ),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+      `);
 
       const deepestedNodeID = global.agent.getIDForNode(ref);
 
       act(() => store.toggleIsCollapsed(deepestedNodeID, false));
-      expect(store).toMatchSnapshot('2: expand deepest node');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                  ▾ <Nested>
+                      <div>
+      `);
 
       const rootID = store.getElementIDAtIndex(0);
 
       act(() => store.toggleIsCollapsed(rootID, true));
-      expect(store).toMatchSnapshot('3: collapse root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+      `);
 
       act(() => store.toggleIsCollapsed(rootID, false));
-      expect(store).toMatchSnapshot('4: expand root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                  ▾ <Nested>
+                      <div>
+      `);
 
       const id = store.getElementIDAtIndex(1);
 
       act(() => store.toggleIsCollapsed(id, true));
-      expect(store).toMatchSnapshot('5: collapse middle node');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▸ <Nested>
+      `);
 
       act(() => store.toggleIsCollapsed(id, false));
-      expect(store).toMatchSnapshot('6: expand middle node');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                  ▾ <Nested>
+                      <div>
+      `);
     });
 
     it('should support reordering of children', () => {
@@ -488,25 +847,52 @@ describe('Store (legacy)', () => {
       const container = document.createElement('div');
 
       act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
 
       act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('2: reorder children');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('3: expand root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▸ <div>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
-      expect(store).toMatchSnapshot('4: expand div');
+      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).toMatchSnapshot('4: expand leaves');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <div>
+              ▾ <Bar key="bar">
+                ▸ <div>
+              ▾ <Foo key="foo">
+                ▸ <div>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
-      expect(store).toMatchSnapshot('5: collapse root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
     });
   });
 
diff --git a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
index 774b8ee663e7..65920ac5da52 100644
--- a/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/ownersListContext-test.js
@@ -61,6 +61,31 @@ describe('OwnersListContext', () => {
     </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 = () => {
@@ -77,45 +102,31 @@ describe('OwnersListContext', () => {
       legacyRender(<Grandparent />, document.createElement('div')),
     );
 
-    expect(store).toMatchSnapshot('mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+          ▾ <Parent>
+              <Child>
+              <Child>
+    `);
 
     const parent = ((store.getElementAtIndex(1): any): Element);
     const firstChild = ((store.getElementAtIndex(2): any): Element);
 
-    let didFinish = false;
-
-    function Suspender({owner}) {
-      const read = React.useContext(OwnersListContext);
-      const owners = read(owner.id);
-      expect(owners).toMatchSnapshot(
-        `owners for "${(owner && owner.displayName) || ''}"`,
-      );
-      didFinish = true;
-      return null;
-    }
-
-    await utils.actAsync(() =>
-      TestRenderer.create(
-        <Contexts defaultOwnerID={parent.id}>
-          <React.Suspense fallback={null}>
-            <Suspender owner={parent} />
-          </React.Suspense>
-        </Contexts>,
-      ),
-    );
-    expect(didFinish).toBe(true);
-
-    didFinish = false;
-    await utils.actAsync(() =>
-      TestRenderer.create(
-        <Contexts defaultOwnerID={firstChild.id}>
-          <React.Suspense fallback={null}>
-            <Suspender owner={firstChild} />
-          </React.Suspense>
-        </Contexts>,
-      ),
-    );
-    expect(didFinish).toBe(true);
+    expect(await getOwnersListForOwner(parent)).toMatchInlineSnapshot(`
+      Array [
+        "Grandparent",
+        "Parent",
+      ]
+    `);
+
+    expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
+      Array [
+        "Grandparent",
+        "Parent",
+        "Child",
+      ]
+    `);
   });
 
   it('should fetch the owners list for the selected element that includes filtered components', async () => {
@@ -136,32 +147,22 @@ describe('OwnersListContext', () => {
       legacyRender(<Grandparent />, document.createElement('div')),
     );
 
-    expect(store).toMatchSnapshot('mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+            <Child>
+            <Child>
+    `);
 
     const firstChild = ((store.getElementAtIndex(1): any): Element);
 
-    let didFinish = false;
-
-    function Suspender({owner}) {
-      const read = React.useContext(OwnersListContext);
-      const owners = read(owner.id);
-      expect(owners).toMatchSnapshot(
-        `owners for "${(owner && owner.displayName) || ''}"`,
-      );
-      didFinish = true;
-      return null;
-    }
-
-    await utils.actAsync(() =>
-      TestRenderer.create(
-        <Contexts defaultOwnerID={firstChild.id}>
-          <React.Suspense fallback={null}>
-            <Suspender owner={firstChild} />
-          </React.Suspense>
-        </Contexts>,
-      ),
-    );
-    expect(didFinish).toBe(true);
+    expect(await getOwnersListForOwner(firstChild)).toMatchInlineSnapshot(`
+      Array [
+        "Grandparent",
+        "Parent",
+        "Child",
+      ]
+    `);
   });
 
   it('should include the current element even if there are no other owners', async () => {
@@ -174,32 +175,18 @@ describe('OwnersListContext', () => {
       legacyRender(<Grandparent />, document.createElement('div')),
     );
 
-    expect(store).toMatchSnapshot('mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Grandparent>
+    `);
 
     const grandparent = ((store.getElementAtIndex(0): any): Element);
 
-    let didFinish = false;
-
-    function Suspender({owner}) {
-      const read = React.useContext(OwnersListContext);
-      const owners = read(owner.id);
-      expect(owners).toMatchSnapshot(
-        `owners for "${(owner && owner.displayName) || ''}"`,
-      );
-      didFinish = true;
-      return null;
-    }
-
-    await utils.actAsync(() =>
-      TestRenderer.create(
-        <Contexts defaultOwnerID={grandparent.id}>
-          <React.Suspense fallback={null}>
-            <Suspender owner={grandparent} />
-          </React.Suspense>
-        </Contexts>,
-      ),
-    );
-    expect(didFinish).toBe(true);
+    expect(await getOwnersListForOwner(grandparent)).toMatchInlineSnapshot(`
+      Array [
+        "Grandparent",
+      ]
+    `);
   });
 
   it('should include all owners for a component wrapped in react memo', async () => {
@@ -215,28 +202,21 @@ describe('OwnersListContext', () => {
       legacyRender(<Grandparent />, document.createElement('div')),
     );
 
-    let didFinish = false;
-    function Suspender({owner}) {
-      const read = React.useContext(OwnersListContext);
-      const owners = read(owner.id);
-      didFinish = true;
-      expect(owners.length).toBe(3);
-      expect(owners).toMatchSnapshot(
-        `owners for "${(owner && owner.displayName) || ''}"`,
-      );
-      return null;
-    }
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+          ▾ <InnerComponent> [Memo]
+              <InnerComponent> [ForwardRef]
+    `);
 
     const wrapped = ((store.getElementAtIndex(2): any): Element);
-    await utils.actAsync(() =>
-      TestRenderer.create(
-        <Contexts defaultOwnerID={wrapped.id}>
-          <React.Suspense fallback={null}>
-            <Suspender owner={wrapped} />
-          </React.Suspense>
-        </Contexts>,
-      ),
-    );
-    expect(didFinish).toBe(true);
+
+    expect(await getOwnersListForOwner(wrapped)).toMatchInlineSnapshot(`
+      Array [
+        "Grandparent",
+        "InnerComponent",
+        "InnerComponent",
+      ]
+    `);
   });
 });
diff --git a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
index 7a62f415ce9d..ad74f43cc8c2 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerContext-test.js
@@ -153,7 +153,14 @@ describe('ProfilerContext', () => {
     const containerTwo = document.createElement('div');
     utils.act(() => legacyRender(<Parent />, containerOne));
     utils.act(() => legacyRender(<Parent />, containerTwo));
-    expect(store).toMatchSnapshot('mounted');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
 
     // Profile and record updates to both roots.
     await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -192,7 +199,14 @@ describe('ProfilerContext', () => {
     const containerTwo = document.createElement('div');
     utils.act(() => legacyRender(<Parent />, containerOne));
     utils.act(() => legacyRender(<Parent />, containerTwo));
-    expect(store).toMatchSnapshot('mounted');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
 
     // Profile and record updates to only the first root.
     await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -231,7 +245,14 @@ describe('ProfilerContext', () => {
     const containerB = document.createElement('div');
     utils.act(() => legacyRender(<Parent />, containerA));
     utils.act(() => legacyRender(<Parent />, containerB));
-    expect(store).toMatchSnapshot('mounted');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child>
+      [root]
+        ▾ <Parent>
+            <Child>
+    `);
 
     // Profile and record updates.
     await utils.actAsync(() => store.profilerStore.startProfiling());
@@ -290,7 +311,12 @@ describe('ProfilerContext', () => {
     utils.act(() =>
       legacyRender(<GrandParent includeChild={true} />, container),
     );
-    expect(store).toMatchSnapshot('mounted');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <GrandParent>
+          ▾ <Parent>
+              <Child>
+    `);
 
     const parentID = ((store.getElementIDAtIndex(1): any): number);
     const childID = ((store.getElementIDAtIndex(2): any): number);
@@ -305,7 +331,11 @@ describe('ProfilerContext', () => {
     );
     await utils.actAsync(() => store.profilerStore.stopProfiling());
 
-    expect(store).toMatchSnapshot('updated');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <GrandParent>
+            <Parent>
+    `);
 
     let context: Context = ((null: any): Context);
     let selectedElementID = null;
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index b5a5d35da23b..48f12f3dcb69 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -7,7 +7,6 @@
  * @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';
 
@@ -17,7 +16,6 @@ describe('ProfilingCache', () => {
   let ReactDOM;
   let ReactDOMClient;
   let Scheduler;
-  let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
   let legacyRender;
   let store: Store;
@@ -39,7 +37,6 @@ describe('ProfilingCache', () => {
     ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
-    TestRenderer = utils.requireTestRenderer();
   });
 
   it('should collect data for each root (including ones added or mounted after profiling started)', () => {
@@ -61,68 +58,95 @@ describe('ProfilingCache', () => {
     };
     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(<Parent count={2} />, containerA));
-    utils.act(() => legacyRender(<Parent count={1} />, containerB));
+    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(<Parent count={3} />, containerA));
-    utils.act(() => legacyRender(<Parent count={1} />, containerC));
-    utils.act(() => legacyRender(<Parent count={1} />, containerA));
+    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(<Parent count={0} />, containerA));
+    utils.act(() =>
+      legacyRender(
+        <RootA>
+          <Parent count={0} />
+        </RootA>,
+        containerA,
+      ),
+    );
     utils.act(() => store.profilerStore.stopProfiling());
+    utils.act(() => ReactDOM.unmountComponentAtNode(containerA));
 
-    const allProfilingDataForRoots = [];
+    const rootIDs = Array.from(
+      store.profilerStore.profilingData.dataForRoots.values(),
+    ).map(({rootID}) => rootID);
+    expect(rootIDs).toHaveLength(3);
 
-    function Validator({previousProfilingDataForRoot, rootID}) {
-      const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
-      if (previousProfilingDataForRoot != null) {
-        expect(profilingDataForRoot).toEqual(previousProfilingDataForRoot);
-      } else {
-        expect(profilingDataForRoot).toMatchSnapshot(
-          `Data for root ${profilingDataForRoot.displayName}`,
-        );
-      }
-      allProfilingDataForRoots.push(profilingDataForRoot);
-      return null;
-    }
+    const originalProfilingDataForRoot = [];
 
-    const dataForRoots =
-      store.profilerStore.profilingData !== null
-        ? store.profilerStore.profilingData.dataForRoots
-        : null;
-
-    expect(dataForRoots).not.toBeNull();
-
-    if (dataForRoots !== null) {
-      dataForRoots.forEach(dataForRoot => {
-        utils.act(() =>
-          TestRenderer.create(
-            <Validator
-              previousProfilingDataForRoot={null}
-              rootID={dataForRoot.rootID}
-            />,
-          ),
-        );
-      });
-    }
+    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);
 
-    expect(allProfilingDataForRoots).toHaveLength(3);
+    data = store.profilerStore.getDataForRoot(rootIDs[2]);
+    expect(data.displayName).toMatchInlineSnapshot(`"RootB"`);
+    expect(data.commitData).toHaveLength(1);
+    originalProfilingDataForRoot.push(data);
 
     utils.exportImportHelper(bridge, store);
 
-    allProfilingDataForRoots.forEach(profilingDataForRoot => {
-      utils.act(() =>
-        TestRenderer.create(
-          <Validator
-            previousProfilingDataForRoot={profilingDataForRoot}
-            rootID={profilingDataForRoot.rootID}
-          />,
-        ),
-      );
+    rootIDs.forEach((rootID, index) => {
+      const current = store.profilerStore.getDataForRoot(rootID);
+      const prev = originalProfilingDataForRoot[index];
+      expect(current).toEqual(prev);
     });
   });
 
@@ -154,50 +178,20 @@ describe('ProfilingCache', () => {
     utils.act(() => legacyRender(<Parent count={0} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
-    const allCommitData = [];
-
-    function Validator({commitIndex, previousCommitDetails, rootID}) {
-      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
-      if (previousCommitDetails != null) {
-        expect(commitData).toEqual(previousCommitDetails);
-      } else {
-        allCommitData.push(commitData);
-        expect(commitData).toMatchSnapshot(
-          `CommitDetails commitIndex: ${commitIndex}`,
-        );
-      }
-      return null;
-    }
-
     const rootID = store.roots[0];
 
-    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-      utils.act(() => {
-        TestRenderer.create(
-          <Validator
-            commitIndex={commitIndex}
-            previousCommitDetails={null}
-            rootID={rootID}
-          />,
-        );
-      });
-    }
-
-    expect(allCommitData).toHaveLength(4);
+    const prevCommitData = store.profilerStore.getDataForRoot(rootID)
+      .commitData;
+    expect(prevCommitData).toHaveLength(4);
 
     utils.exportImportHelper(bridge, store);
 
-    for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-      utils.act(() => {
-        TestRenderer.create(
-          <Validator
-            commitIndex={commitIndex}
-            previousCommitDetails={allCommitData[commitIndex]}
-            rootID={rootID}
-          />,
-        );
-      });
-    }
+    const nextCommitData = store.profilerStore.getDataForRoot(rootID)
+      .commitData;
+    expect(nextCommitData).toHaveLength(4);
+    nextCommitData.forEach((commitData, index) => {
+      expect(commitData).toEqual(prevCommitData[index]);
+    });
   });
 
   it('should record changed props/state/context/hooks', () => {
@@ -265,49 +259,256 @@ describe('ProfilingCache', () => {
     utils.act(() => legacyRender(<LegacyContextProvider />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
-    const allCommitData = [];
+    const rootID = store.roots[0];
 
-    function Validator({commitIndex, previousCommitDetails, rootID}) {
-      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
-      if (previousCommitDetails != null) {
-        expect(commitData).toEqual(previousCommitDetails);
-      } else {
-        allCommitData.push(commitData);
-        expect(commitData).toMatchSnapshot(
-          `CommitDetails commitIndex: ${commitIndex}`,
-        );
+    let changeDescriptions = store.profilerStore
+      .getDataForRoot(rootID)
+      .commitData.map(commitData => commitData.changeDescriptions);
+    expect(changeDescriptions).toHaveLength(5);
+    expect(changeDescriptions[0]).toMatchInlineSnapshot(`
+      Map {
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        4 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        5 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        6 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
+        7 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "isFirstMount": true,
+          "props": null,
+          "state": null,
+        },
       }
-      return null;
-    }
-
-    const rootID = store.roots[0];
+    `);
+    expect(changeDescriptions[1]).toMatchInlineSnapshot(`
+      Map {
+        5 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+        4 => Object {
+          "context": true,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        7 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [
+            "count",
+          ],
+          "state": null,
+        },
+        6 => Object {
+          "context": Array [
+            "count",
+          ],
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": Array [
+            "count",
+          ],
+        },
+      }
+    `);
+    expect(changeDescriptions[2]).toMatchInlineSnapshot(`
+      Map {
+        5 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        4 => Object {
+          "context": false,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        7 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        6 => Object {
+          "context": Array [],
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [
+            "foo",
+          ],
+          "state": Array [],
+        },
+      }
+    `);
+    expect(changeDescriptions[3]).toMatchInlineSnapshot(`
+      Map {
+        5 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        4 => Object {
+          "context": false,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        7 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        6 => Object {
+          "context": Array [],
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [
+            "foo",
+            "bar",
+          ],
+          "state": Array [],
+        },
+      }
+    `);
+    expect(changeDescriptions[4]).toMatchInlineSnapshot(`
+      Map {
+        5 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        4 => Object {
+          "context": false,
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        7 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        6 => Object {
+          "context": Array [],
+          "didHooksChange": false,
+          "hooks": null,
+          "isFirstMount": false,
+          "props": Array [],
+          "state": null,
+        },
+        2 => Object {
+          "context": null,
+          "didHooksChange": false,
+          "hooks": Array [],
+          "isFirstMount": false,
+          "props": Array [
+            "bar",
+          ],
+          "state": Array [],
+        },
+      }
+    `);
 
-    for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
-      utils.act(() => {
-        TestRenderer.create(
-          <Validator
-            commitIndex={commitIndex}
-            previousCommitDetails={null}
-            rootID={rootID}
-          />,
-        );
-      });
-    }
+    utils.exportImportHelper(bridge, store);
 
-    expect(allCommitData).toHaveLength(5);
+    const prevChangeDescriptions = [...changeDescriptions];
 
-    utils.exportImportHelper(bridge, store);
+    changeDescriptions = store.profilerStore
+      .getDataForRoot(rootID)
+      .commitData.map(commitData => commitData.changeDescriptions);
+    expect(changeDescriptions).toHaveLength(5);
 
     for (let commitIndex = 0; commitIndex < 5; commitIndex++) {
-      utils.act(() => {
-        TestRenderer.create(
-          <Validator
-            commitIndex={commitIndex}
-            previousCommitDetails={allCommitData[commitIndex]}
-            rootID={rootID}
-          />,
-        );
-      });
+      expect(changeDescriptions[commitIndex]).toEqual(
+        prevChangeDescriptions[commitIndex],
+      );
     }
   });
 
@@ -420,33 +621,13 @@ describe('ProfilingCache', () => {
 
     const rootID = store.roots[0];
 
-    const allChangeDescriptions = [];
-
-    function getChangeDescriptions(commitIndex, label) {
-      let changeDescriptions;
-
-      function Validator() {
-        const commitData = store.profilerStore.getCommitData(
-          rootID,
-          commitIndex,
-        );
-
-        changeDescriptions = commitData.changeDescriptions;
-
-        allChangeDescriptions.push(changeDescriptions);
-
-        return null;
-      }
-
-      utils.act(() => {
-        TestRenderer.create(<Validator />);
-      });
-
-      return changeDescriptions;
-    }
+    const changeDescriptions = store.profilerStore
+      .getDataForRoot(rootID)
+      .commitData.map(commitData => commitData.changeDescriptions);
+    expect(changeDescriptions).toHaveLength(6);
 
     // 1st render: No change
-    expect(getChangeDescriptions(0)).toMatchInlineSnapshot(`
+    expect(changeDescriptions[0]).toMatchInlineSnapshot(`
       Map {
         3 => Object {
           "context": null,
@@ -459,7 +640,7 @@ describe('ProfilingCache', () => {
     `);
 
     // 2nd render: Changed props
-    expect(getChangeDescriptions(1)).toMatchInlineSnapshot(`
+    expect(changeDescriptions[1]).toMatchInlineSnapshot(`
       Map {
         3 => Object {
           "context": false,
@@ -475,7 +656,7 @@ describe('ProfilingCache', () => {
     `);
 
     // 3rd render: Changed useReducer
-    expect(getChangeDescriptions(2)).toMatchInlineSnapshot(`
+    expect(changeDescriptions[2]).toMatchInlineSnapshot(`
       Map {
         3 => Object {
           "context": false,
@@ -491,7 +672,7 @@ describe('ProfilingCache', () => {
     `);
 
     // 4th render: Changed useState
-    expect(getChangeDescriptions(3)).toMatchInlineSnapshot(`
+    expect(changeDescriptions[3]).toMatchInlineSnapshot(`
       Map {
         3 => Object {
           "context": false,
@@ -507,7 +688,7 @@ describe('ProfilingCache', () => {
     `);
 
     // 5th render: Changed context
-    expect(getChangeDescriptions(4)).toMatchInlineSnapshot(`
+    expect(changeDescriptions[4]).toMatchInlineSnapshot(`
       Map {
         3 => Object {
           "context": true,
@@ -521,7 +702,7 @@ describe('ProfilingCache', () => {
     `);
 
     // 6th render: Sync external store
-    expect(getChangeDescriptions(5)).toMatchInlineSnapshot(`
+    expect(changeDescriptions[5]).toMatchInlineSnapshot(`
       Map {
         3 => Object {
           "context": false,
@@ -536,31 +717,20 @@ describe('ProfilingCache', () => {
       }
     `);
 
-    expect(allChangeDescriptions).toHaveLength(6);
+    expect(changeDescriptions).toHaveLength(6);
 
     // Export and re-import profile data and make sure it is retained.
     utils.exportImportHelper(bridge, store);
 
-    function ExportImportValidator({commitIndex}) {
+    for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
       const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
-
       expect(commitData.changeDescriptions).toEqual(
-        allChangeDescriptions[commitIndex],
+        changeDescriptions[commitIndex],
       );
-
-      return null;
-    }
-
-    for (let commitIndex = 0; commitIndex < 6; commitIndex++) {
-      utils.act(() => {
-        TestRenderer.create(
-          <ExportImportValidator commitIndex={commitIndex} />,
-        );
-      });
     }
   });
 
-  it('should calculate a self duration based on actual children (not filtered children)', () => {
+  it('should calculate durations based on actual children (not filtered children)', () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
     const Grandparent = () => {
@@ -587,26 +757,38 @@ describe('ProfilingCache', () => {
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
-    let commitData = null;
-
-    function Validator({commitIndex, rootID}) {
-      commitData = store.profilerStore.getCommitData(rootID, commitIndex);
-      expect(commitData).toMatchSnapshot(
-        `CommitDetails with filtered self durations`,
-      );
-      return null;
-    }
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Grandparent>
+            <Child>
+            <Child>
+    `);
 
     const rootID = store.roots[0];
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toHaveLength(1);
 
-    utils.act(() => {
-      TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
-    });
+    // Actual duration should also include both filtered <Parent> components.
+    expect(commitData[0].fiberActualDurations).toMatchInlineSnapshot(`
+      Map {
+        1 => 16,
+        2 => 16,
+        4 => 1,
+        6 => 1,
+      }
+    `);
 
-    expect(commitData).not.toBeNull();
+    expect(commitData[0].fiberSelfDurations).toMatchInlineSnapshot(`
+      Map {
+        1 => 0,
+        2 => 10,
+        4 => 1,
+        6 => 1,
+      }
+    `);
   });
 
-  it('should calculate self duration correctly for suspended views', async () => {
+  it('should calculate durations correctly for suspended views', async () => {
     let data;
     const getData = () => {
       if (data) {
@@ -642,28 +824,37 @@ describe('ProfilingCache', () => {
     );
     utils.act(() => store.profilerStore.stopProfiling());
 
-    const allCommitData = [];
-
-    function Validator({commitIndex, rootID}) {
-      const commitData = store.profilerStore.getCommitData(rootID, commitIndex);
-      allCommitData.push(commitData);
-      expect(commitData).toMatchSnapshot(
-        `CommitDetails with filtered self durations`,
-      );
-      return null;
-    }
-
     const rootID = store.roots[0];
-
-    for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-      utils.act(() => {
-        TestRenderer.create(
-          <Validator commitIndex={commitIndex} rootID={rootID} />,
-        );
-      });
-    }
-
-    expect(allCommitData).toHaveLength(2);
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toHaveLength(2);
+    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 {
+        7 => 3,
+        3 => 3,
+      }
+    `);
+    expect(commitData[1].fiberSelfDurations).toMatchInlineSnapshot(`
+      Map {
+        7 => 3,
+        3 => 0,
+      }
+    `);
   });
 
   it('should collect data for each rendered fiber', () => {
@@ -693,60 +884,53 @@ describe('ProfilingCache', () => {
     utils.act(() => legacyRender(<Parent count={3} />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
+    const rootID = store.roots[0];
     const allFiberCommits = [];
-
-    function Validator({fiberID, previousFiberCommits, rootID}) {
+    for (let index = 0; index < store.numElements; index++) {
+      const fiberID = store.getElementIDAtIndex(index);
       const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
         fiberID,
         rootID,
       });
-      if (previousFiberCommits != null) {
-        expect(fiberCommits).toEqual(previousFiberCommits);
-      } else {
-        allFiberCommits.push(fiberCommits);
-        expect(fiberCommits).toMatchSnapshot(
-          `FiberCommits: element ${fiberID}`,
-        );
-      }
-      return null;
-    }
 
-    const rootID = store.roots[0];
-
-    for (let index = 0; index < store.numElements; index++) {
-      utils.act(() => {
-        const fiberID = store.getElementIDAtIndex(index);
-        if (fiberID == null) {
-          throw Error(`Unexpected null ID for element at index ${index}`);
-        }
-        TestRenderer.create(
-          <Validator
-            fiberID={fiberID}
-            previousFiberCommits={null}
-            rootID={rootID}
-          />,
-        );
-      });
+      allFiberCommits.push(fiberCommits);
     }
 
-    expect(allFiberCommits).toHaveLength(store.numElements);
+    expect(allFiberCommits).toMatchInlineSnapshot(`
+      Array [
+        Array [
+          0,
+          1,
+          2,
+        ],
+        Array [
+          0,
+          1,
+          2,
+        ],
+        Array [
+          1,
+          2,
+        ],
+        Array [
+          2,
+        ],
+        Array [
+          0,
+        ],
+      ]
+    `);
 
     utils.exportImportHelper(bridge, store);
 
     for (let index = 0; index < store.numElements; index++) {
-      utils.act(() => {
-        const fiberID = store.getElementIDAtIndex(index);
-        if (fiberID == null) {
-          throw Error(`Unexpected null ID for element at index ${index}`);
-        }
-        TestRenderer.create(
-          <Validator
-            fiberID={fiberID}
-            previousFiberCommits={allFiberCommits[index]}
-            rootID={rootID}
-          />,
-        );
+      const fiberID = store.getElementIDAtIndex(index);
+      const fiberCommits = store.profilerStore.profilingCache.getFiberCommits({
+        fiberID,
+        rootID,
       });
+
+      expect(fiberCommits).toEqual(allFiberCommits[index]);
     }
   });
 
@@ -757,17 +941,37 @@ describe('ProfilingCache', () => {
     utils.act(() => legacyRender(<React.Suspense />, container));
     utils.act(() => store.profilerStore.stopProfiling());
 
-    function Validator({commitIndex, rootID}) {
-      const profilingDataForRoot = store.profilerStore.getDataForRoot(rootID);
-      expect(profilingDataForRoot).toMatchSnapshot('Empty Suspense node');
-      return null;
-    }
-
     const rootID = store.roots[0];
-
-    utils.act(() => {
-      TestRenderer.create(<Validator commitIndex={0} rootID={rootID} />);
-    });
+    const commitData = store.profilerStore.getDataForRoot(rootID).commitData;
+    expect(commitData).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "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": Array [
+            Object {
+              "displayName": "render()",
+              "hocDisplayNames": null,
+              "id": 1,
+              "key": null,
+              "type": 11,
+            },
+          ],
+        },
+      ]
+    `);
   });
 
   // See https://github.com/facebook/react/issues/18831
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index 16b42f39081e..f2c4e36a1236 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -7,13 +7,11 @@
  * @flow
  */
 
-import typeof TestRendererType from 'react-test-renderer';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('profiling charts', () => {
   let React;
   let Scheduler;
-  let TestRenderer: TestRendererType;
   let legacyRender;
   let store: Store;
   let utils;
@@ -30,9 +28,36 @@ describe('profiling charts', () => {
 
     React = require('react');
     Scheduler = require('scheduler');
-    TestRenderer = utils.requireTestRenderer();
   });
 
+  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', () => {
     it('should contain valid data', () => {
       const Parent = (_: {||}) => {
@@ -55,47 +80,130 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
+
       utils.act(() => legacyRender(<Parent />, container));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
+
       utils.act(() => legacyRender(<Parent />, container));
-      utils.act(() => store.profilerStore.stopProfiling());
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
 
-      let renderFinished = false;
-
-      function Validator({commitIndex, rootID}) {
-        const commitTree = store.profilerStore.profilingCache.getCommitTree({
-          commitIndex,
-          rootID,
-        });
-        const chartData = store.profilerStore.profilingCache.getFlamegraphChartData(
-          {
-            commitIndex,
-            commitTree,
-            rootID,
-          },
-        );
-        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
-        expect(chartData).toMatchSnapshot(
-          `${commitIndex}: FlamegraphChartData`,
-        );
-        renderFinished = true;
-        return null;
-      }
+      utils.act(() => store.profilerStore.stopProfiling());
 
       const rootID = store.roots[0];
 
-      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        renderFinished = false;
-
-        utils.act(() => {
-          TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />,
-          );
-        });
+      const firstCommitData = getFlamegraphChartData(rootID, 0);
+      expect(firstCommitData.commitTree.nodes.size).toBe(5);
+      expect(firstCommitData.chartData.rows).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            Object {
+              "actualDuration": 15,
+              "didRender": true,
+              "id": 2,
+              "label": "Parent (10ms of 15ms)",
+              "name": "Parent",
+              "offset": 0,
+              "selfDuration": 10,
+              "treeBaseDuration": 15,
+            },
+          ],
+          Array [
+            Object {
+              "actualDuration": 0,
+              "didRender": true,
+              "id": 5,
+              "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
+              "name": "Child",
+              "offset": 15,
+              "selfDuration": 0,
+              "treeBaseDuration": 0,
+            },
+            Object {
+              "actualDuration": 2,
+              "didRender": true,
+              "id": 4,
+              "label": "Child key=\\"second\\" (2ms of 2ms)",
+              "name": "Child",
+              "offset": 13,
+              "selfDuration": 2,
+              "treeBaseDuration": 2,
+            },
+            Object {
+              "actualDuration": 3,
+              "didRender": true,
+              "id": 3,
+              "label": "Child key=\\"first\\" (3ms of 3ms)",
+              "name": "Child",
+              "offset": 10,
+              "selfDuration": 3,
+              "treeBaseDuration": 3,
+            },
+          ],
+        ]
+      `);
 
-        expect(renderFinished).toBe(true);
-      }
-
-      expect(renderFinished).toBe(true);
+      const secondCommitData = getFlamegraphChartData(rootID, 1);
+      expect(secondCommitData.commitTree.nodes.size).toBe(5);
+      expect(secondCommitData.chartData.rows).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            Object {
+              "actualDuration": 10,
+              "didRender": true,
+              "id": 2,
+              "label": "Parent (10ms of 10ms)",
+              "name": "Parent",
+              "offset": 0,
+              "selfDuration": 10,
+              "treeBaseDuration": 15,
+            },
+          ],
+          Array [
+            Object {
+              "actualDuration": 0,
+              "didRender": false,
+              "id": 5,
+              "label": "Child key=\\"third\\"",
+              "name": "Child",
+              "offset": 15,
+              "selfDuration": 0,
+              "treeBaseDuration": 0,
+            },
+            Object {
+              "actualDuration": 0,
+              "didRender": false,
+              "id": 4,
+              "label": "Child key=\\"second\\"",
+              "name": "Child",
+              "offset": 13,
+              "selfDuration": 0,
+              "treeBaseDuration": 2,
+            },
+            Object {
+              "actualDuration": 0,
+              "didRender": false,
+              "id": 3,
+              "label": "Child key=\\"first\\"",
+              "name": "Child",
+              "offset": 10,
+              "selfDuration": 0,
+              "treeBaseDuration": 3,
+            },
+          ],
+        ]
+      `);
     });
   });
 
@@ -121,43 +229,74 @@ describe('profiling charts', () => {
       const container = document.createElement('div');
 
       utils.act(() => store.profilerStore.startProfiling());
+
       utils.act(() => legacyRender(<Parent />, container));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
+
       utils.act(() => legacyRender(<Parent />, container));
-      utils.act(() => store.profilerStore.stopProfiling());
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent>
+              <Child key="first"> [Memo]
+              <Child key="second"> [Memo]
+              <Child key="third"> [Memo]
+      `);
 
-      let renderFinished = false;
-
-      function Validator({commitIndex, rootID}) {
-        const commitTree = store.profilerStore.profilingCache.getCommitTree({
-          commitIndex,
-          rootID,
-        });
-        const chartData = store.profilerStore.profilingCache.getRankedChartData(
-          {
-            commitIndex,
-            commitTree,
-            rootID,
-          },
-        );
-        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
-        expect(chartData).toMatchSnapshot(`${commitIndex}: RankedChartData`);
-        renderFinished = true;
-        return null;
-      }
+      utils.act(() => store.profilerStore.stopProfiling());
 
       const rootID = store.roots[0];
 
-      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        renderFinished = false;
-
-        utils.act(() => {
-          TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />,
-          );
-        });
+      // Everything should render the first time.
+      const firstCommitData = getRankedChartData(rootID, 0);
+      expect(firstCommitData.commitTree.nodes.size).toBe(5);
+      expect(firstCommitData.chartData.nodes).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "id": 2,
+            "label": "Parent (10ms)",
+            "name": "Parent",
+            "value": 10,
+          },
+          Object {
+            "id": 3,
+            "label": "Child (Memo) key=\\"first\\" (3ms)",
+            "name": "Child",
+            "value": 3,
+          },
+          Object {
+            "id": 4,
+            "label": "Child (Memo) key=\\"second\\" (2ms)",
+            "name": "Child",
+            "value": 2,
+          },
+          Object {
+            "id": 5,
+            "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
+            "name": "Child",
+            "value": 0,
+          },
+        ]
+      `);
 
-        expect(renderFinished).toBe(true);
-      }
+      // 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(`
+        Array [
+          Object {
+            "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
index f218af7730ec..7fe31d3e9d52 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -7,14 +7,12 @@
  * @flow
  */
 
-import typeof TestRendererType from 'react-test-renderer';
 import type Store from 'react-devtools-shared/src/devtools/store';
 
 describe('commit tree', () => {
   let React;
   let ReactDOMClient;
   let Scheduler;
-  let TestRenderer: TestRendererType;
   let legacyRender;
   let store: Store;
   let utils;
@@ -32,7 +30,6 @@ describe('commit tree', () => {
     React = require('react');
     ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
-    TestRenderer = utils.requireTestRenderer();
   });
 
   it('should be able to rebuild the store tree for each commit', () => {
@@ -51,36 +48,48 @@ describe('commit tree', () => {
 
     utils.act(() => store.profilerStore.startProfiling());
     utils.act(() => legacyRender(<Parent count={1} />, container));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+    `);
     utils.act(() => legacyRender(<Parent count={3} />, container));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+            <Child key="1"> [Memo]
+            <Child key="2"> [Memo]
+    `);
     utils.act(() => legacyRender(<Parent count={2} />, container));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Parent>
+            <Child key="0"> [Memo]
+            <Child key="1"> [Memo]
+    `);
     utils.act(() => legacyRender(<Parent count={0} />, container));
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Parent>
+    `);
     utils.act(() => store.profilerStore.stopProfiling());
 
-    let renderFinished = false;
-
-    function Validator({commitIndex, rootID}) {
-      const commitTree = store.profilerStore.profilingCache.getCommitTree({
-        commitIndex,
-        rootID,
-      });
-      expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
-      renderFinished = true;
-      return null;
-    }
-
     const rootID = store.roots[0];
-
+    const commitTrees = [];
     for (let commitIndex = 0; commitIndex < 4; commitIndex++) {
-      renderFinished = false;
-
-      utils.act(() => {
-        TestRenderer.create(
-          <Validator commitIndex={commitIndex} rootID={rootID} />,
-        );
-      });
-
-      expect(renderFinished).toBe(true);
+      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', () => {
@@ -113,35 +122,39 @@ describe('commit tree', () => {
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => legacyRender(<App renderChildren={true} />, container));
       await Promise.resolve();
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
       utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+      `);
       utils.act(() => legacyRender(<App renderChildren={false} />, container));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
       utils.act(() => store.profilerStore.stopProfiling());
 
-      let renderFinished = false;
-
-      function Validator({commitIndex, rootID}) {
-        const commitTree = store.profilerStore.profilingCache.getCommitTree({
-          commitIndex,
-          rootID,
-        });
-        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
-        renderFinished = true;
-        return null;
-      }
-
       const rootID = store.roots[0];
-
-      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        renderFinished = false;
-
-        utils.act(() => {
-          TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />,
-          );
-        });
-
-        expect(renderFinished).toBe(true);
+      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>
     });
 
     it('should support Lazy components (createRoot)', async () => {
@@ -151,35 +164,39 @@ describe('commit tree', () => {
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
       await Promise.resolve();
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
       utils.act(() => root.render(<App renderChildren={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+      `);
       utils.act(() => root.render(<App renderChildren={false} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
       utils.act(() => store.profilerStore.stopProfiling());
 
-      let renderFinished = false;
-
-      function Validator({commitIndex, rootID}) {
-        const commitTree = store.profilerStore.profilingCache.getCommitTree({
-          commitIndex,
-          rootID,
-        });
-        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
-        renderFinished = true;
-        return null;
-      }
-
       const rootID = store.roots[0];
-
-      for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        renderFinished = false;
-
-        utils.act(() => {
-          TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />,
-          );
-        });
-
-        expect(renderFinished).toBe(true);
+      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>
     });
 
     it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
@@ -187,34 +204,31 @@ describe('commit tree', () => {
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => legacyRender(<App renderChildren={true} />, container));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
       utils.act(() => legacyRender(<App renderChildren={false} />, container));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
       utils.act(() => store.profilerStore.stopProfiling());
 
-      let renderFinished = false;
-
-      function Validator({commitIndex, rootID}) {
-        const commitTree = store.profilerStore.profilingCache.getCommitTree({
-          commitIndex,
-          rootID,
-        });
-        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
-        renderFinished = true;
-        return null;
-      }
-
       const rootID = store.roots[0];
-
+      const commitTrees = [];
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        renderFinished = false;
-
-        utils.act(() => {
-          TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />,
-          );
-        });
-
-        expect(renderFinished).toBe(true);
+        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>
     });
 
     it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
@@ -223,34 +237,31 @@ describe('commit tree', () => {
 
       utils.act(() => store.profilerStore.startProfiling());
       utils.act(() => root.render(<App renderChildren={true} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
       utils.act(() => root.render(<App renderChildren={false} />));
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
       utils.act(() => store.profilerStore.stopProfiling());
 
-      let renderFinished = false;
-
-      function Validator({commitIndex, rootID}) {
-        const commitTree = store.profilerStore.profilingCache.getCommitTree({
-          commitIndex,
-          rootID,
-        });
-        expect(commitTree).toMatchSnapshot(`${commitIndex}: CommitTree`);
-        renderFinished = true;
-        return null;
-      }
-
       const rootID = store.roots[0];
-
+      const commitTrees = [];
       for (let commitIndex = 0; commitIndex < 2; commitIndex++) {
-        renderFinished = false;
-
-        utils.act(() => {
-          TestRenderer.create(
-            <Validator commitIndex={commitIndex} rootID={rootID} />,
-          );
-        });
-
-        expect(renderFinished).toBe(true);
+        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__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index c7b8d7aab796..ad36b0777679 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -41,7 +41,10 @@ describe('Store', () => {
     act(() =>
       legacyRender(<Component count={4} />, document.createElement('div')),
     );
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Component>
+    `);
 
     expect(store.roots).toHaveLength(1);
 
@@ -58,10 +61,13 @@ describe('Store', () => {
     const container = document.createElement('div');
 
     act(() => legacyRender(<Root>{null}</Root>, container));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Root>
+    `);
 
     act(() => legacyRender(<div />, container));
-    expect(store).toMatchSnapshot('2: add host nodes');
+    expect(store).toMatchInlineSnapshot(`[root]`);
   });
 
   // This test is not the same cause as what's reported on GitHub,
@@ -185,13 +191,35 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       act(() => legacyRender(<Grandparent count={4} />, container));
-      expect(store).toMatchSnapshot('1: mount');
+      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">
+      `);
 
       act(() => legacyRender(<Grandparent count={2} />, container));
-      expect(store).toMatchSnapshot('2: update');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(store).toMatchSnapshot('3: unmount');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should support mount and update operations for multiple roots', () => {
@@ -206,19 +234,46 @@ describe('Store', () => {
         legacyRender(<Parent key="A" count={3} />, containerA);
         legacyRender(<Parent key="B" count={2} />, containerB);
       });
-      expect(store).toMatchSnapshot('1: mount');
+      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">
+      `);
 
       act(() => {
         legacyRender(<Parent key="A" count={4} />, containerA);
         legacyRender(<Parent key="B" count={1} />, containerB);
       });
-      expect(store).toMatchSnapshot('2: update');
+      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">
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(containerB));
-      expect(store).toMatchSnapshot('3: unmount B');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Parent key="A">
+              <Child key="0">
+              <Child key="1">
+              <Child key="2">
+              <Child key="3">
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(containerA));
-      expect(store).toMatchSnapshot('4: unmount A');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should filter DOM nodes from the store tree', () => {
@@ -240,7 +295,14 @@ describe('Store', () => {
       act(() =>
         legacyRender(<Grandparent count={4} />, document.createElement('div')),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child>
+            ▾ <Parent>
+                <Child>
+      `);
     });
 
     it('should display Suspense nodes properly in various states', () => {
@@ -266,12 +328,24 @@ describe('Store', () => {
 
       const container = document.createElement('div');
       act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
-      expect(store).toMatchSnapshot('1: loading');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Loading>
+      `);
 
       act(() => {
         legacyRender(<Wrapper shouldSuspense={false} />, container);
       });
-      expect(store).toMatchSnapshot('2: resolved');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Inside">
+      `);
     });
 
     it('should support nested Suspense nodes', () => {
@@ -324,7 +398,20 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('1: third child is suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense>
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -335,7 +422,20 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('2: first and third child are suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense>
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -346,7 +446,20 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('3: second and third child are suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense>
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -357,7 +470,20 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('4: first and third child are suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense>
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -368,7 +494,13 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('5: parent is suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Loading key="Parent Fallback">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -379,7 +511,20 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('6: all children are suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense>
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -390,7 +535,20 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('7: only third child is suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense>
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
 
       const rendererID = getRendererID();
       act(() =>
@@ -400,7 +558,20 @@ describe('Store', () => {
           forceFallback: true,
         }),
       );
-      expect(store).toMatchSnapshot('8: first and third child are suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense>
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         agent.overrideSuspense({
           id: store.getElementIDAtIndex(2),
@@ -408,7 +579,13 @@ describe('Store', () => {
           forceFallback: true,
         }),
       );
-      expect(store).toMatchSnapshot('9: parent is suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Loading key="Parent Fallback">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -419,7 +596,13 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('10: parent is suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Loading key="Parent Fallback">
+      `);
       act(() =>
         agent.overrideSuspense({
           id: store.getElementIDAtIndex(2),
@@ -427,7 +610,20 @@ describe('Store', () => {
           forceFallback: false,
         }),
       );
-      expect(store).toMatchSnapshot('11: all children are suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense>
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         agent.overrideSuspense({
           id: store.getElementIDAtIndex(4),
@@ -435,7 +631,20 @@ describe('Store', () => {
           forceFallback: false,
         }),
       );
-      expect(store).toMatchSnapshot('12: all children are suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Loading key="Suspense 1 Fallback">
+              ▾ <Suspense>
+                  <Loading key="Suspense 2 Fallback">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
       act(() =>
         legacyRender(
           <Wrapper
@@ -446,7 +655,20 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('13: third child is suspended');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Unrelated at Start">
+              ▾ <Suspense>
+                  <Component key="Suspense 1 Content">
+              ▾ <Suspense>
+                  <Component key="Suspense 2 Content">
+              ▾ <Suspense>
+                  <Loading key="Suspense 3 Fallback">
+                <Component key="Unrelated at End">
+      `);
     });
 
     it('should display a partially rendered SuspenseList', () => {
@@ -474,12 +696,27 @@ describe('Store', () => {
       act(() => {
         root.render(<Wrapper shouldSuspense={true} />);
       });
-      expect(store).toMatchSnapshot('1: loading');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <SuspenseList>
+                <Component key="A">
+              ▾ <Suspense>
+                  <Loading>
+      `);
 
       act(() => {
         root.render(<Wrapper shouldSuspense={false} />);
       });
-      expect(store).toMatchSnapshot('2: resolved');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <SuspenseList>
+                <Component key="A">
+              ▾ <Suspense>
+                  <Component key="B">
+                <Component key="C">
+      `);
     });
 
     it('should support collapsing parts of the tree', () => {
@@ -496,26 +733,64 @@ describe('Store', () => {
       act(() =>
         legacyRender(<Grandparent count={2} />, document.createElement('div')),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      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);
 
       act(() => store.toggleIsCollapsed(parentOneID, true));
-      expect(store).toMatchSnapshot('2: collapse first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
 
       act(() => store.toggleIsCollapsed(parentTwoID, true));
-      expect(store).toMatchSnapshot('3: collapse second Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(parentOneID, false));
-      expect(store).toMatchSnapshot('4: expand first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(grandparentID, true));
-      expect(store).toMatchSnapshot('5: collapse Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
 
       act(() => store.toggleIsCollapsed(grandparentID, false));
-      expect(store).toMatchSnapshot('6: expand Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▸ <Parent>
+      `);
     });
 
     it('should support reordering of children', () => {
@@ -530,16 +805,43 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Foo key="foo">
+                <Component key="0">
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+      `);
 
       act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('3: reorder children');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+            ▾ <Foo key="foo">
+                <Component key="0">
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
-      expect(store).toMatchSnapshot('4: collapse root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('5: expand root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+            ▾ <Foo key="foo">
+                <Component key="0">
+      `);
     });
   });
 
@@ -564,7 +866,11 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent>
+          ▸ <Parent>
+      `);
 
       act(() =>
         legacyRender(
@@ -575,10 +881,14 @@ describe('Store', () => {
           container,
         ),
       );
-      expect(store).toMatchSnapshot('2: update');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent>
+          ▸ <Parent>
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(container));
-      expect(store).toMatchSnapshot('3: unmount');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should support mount and update operations for multiple roots', () => {
@@ -593,19 +903,32 @@ describe('Store', () => {
         legacyRender(<Parent key="A" count={3} />, containerA);
         legacyRender(<Parent key="B" count={2} />, containerB);
       });
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
 
       act(() => {
         legacyRender(<Parent key="A" count={4} />, containerA);
         legacyRender(<Parent key="B" count={1} />, containerB);
       });
-      expect(store).toMatchSnapshot('2: update');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+        [root]
+          ▸ <Parent key="B">
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(containerB));
-      expect(store).toMatchSnapshot('3: unmount B');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Parent key="A">
+      `);
 
       act(() => ReactDOM.unmountComponentAtNode(containerA));
-      expect(store).toMatchSnapshot('4: unmount A');
+      expect(store).toMatchInlineSnapshot(``);
     });
 
     it('should filter DOM nodes from the store tree', () => {
@@ -627,13 +950,27 @@ describe('Store', () => {
       act(() =>
         legacyRender(<Grandparent count={4} />, document.createElement('div')),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('2: expand Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
-      expect(store).toMatchSnapshot('3: expand Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child>
+            ▸ <Parent>
+      `);
     });
 
     it('should display Suspense nodes properly in various states', () => {
@@ -659,17 +996,32 @@ describe('Store', () => {
 
       const container = document.createElement('div');
       act(() => legacyRender(<Wrapper shouldSuspense={true} />, container));
-      expect(store).toMatchSnapshot('1: loading');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+      `);
 
       // This test isn't meaningful unless we expand the suspended tree
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(2), false));
-      expect(store).toMatchSnapshot('2: expand Wrapper and Suspense');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Loading>
+      `);
 
       act(() => {
         legacyRender(<Wrapper shouldSuspense={false} />, container);
       });
-      expect(store).toMatchSnapshot('2: resolved');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+              <Component key="Outside">
+            ▾ <Suspense>
+                <Component key="Inside">
+      `);
     });
 
     it('should support expanding parts of the tree', () => {
@@ -686,30 +1038,69 @@ describe('Store', () => {
       act(() =>
         legacyRender(<Grandparent count={2} />, document.createElement('div')),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
 
       const grandparentID = store.getElementIDAtIndex(0);
 
       act(() => store.toggleIsCollapsed(grandparentID, false));
-      expect(store).toMatchSnapshot('2: expand Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
 
       const parentOneID = store.getElementIDAtIndex(1);
       const parentTwoID = store.getElementIDAtIndex(2);
 
       act(() => store.toggleIsCollapsed(parentOneID, false));
-      expect(store).toMatchSnapshot('3: expand first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(parentTwoID, false));
-      expect(store).toMatchSnapshot('4: expand second Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
 
       act(() => store.toggleIsCollapsed(parentOneID, true));
-      expect(store).toMatchSnapshot('5: collapse first Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▾ <Parent>
+                <Child key="0">
+                <Child key="1">
+      `);
 
       act(() => store.toggleIsCollapsed(parentTwoID, true));
-      expect(store).toMatchSnapshot('6: collapse second Parent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Grandparent>
+            ▸ <Parent>
+            ▸ <Parent>
+      `);
 
       act(() => store.toggleIsCollapsed(grandparentID, true));
-      expect(store).toMatchSnapshot('7: collapse Grandparent');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Grandparent>
+      `);
     });
 
     it('should support expanding deep parts of the tree', () => {
@@ -731,28 +1122,59 @@ describe('Store', () => {
           document.createElement('div'),
         ),
       );
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+      `);
 
       const deepestedNodeID = agent.getIDForNode(ref.current);
 
       act(() => store.toggleIsCollapsed(deepestedNodeID, false));
-      expect(store).toMatchSnapshot('2: expand deepest node');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                    <Nested>
+      `);
 
       const rootID = store.getElementIDAtIndex(0);
 
       act(() => store.toggleIsCollapsed(rootID, true));
-      expect(store).toMatchSnapshot('3: collapse root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Wrapper>
+      `);
 
       act(() => store.toggleIsCollapsed(rootID, false));
-      expect(store).toMatchSnapshot('4: expand root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                    <Nested>
+      `);
 
       const id = store.getElementIDAtIndex(1);
 
       act(() => store.toggleIsCollapsed(id, true));
-      expect(store).toMatchSnapshot('5: collapse middle node');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▸ <Nested>
+      `);
 
       act(() => store.toggleIsCollapsed(id, false));
-      expect(store).toMatchSnapshot('6: expand middle node');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Wrapper>
+            ▾ <Nested>
+              ▾ <Nested>
+                ▾ <Nested>
+                    <Nested>
+      `);
     });
 
     it('should support reordering of children', () => {
@@ -767,22 +1189,44 @@ describe('Store', () => {
       const container = document.createElement('div');
 
       act(() => legacyRender(<Root>{[foo, bar]}</Root>, container));
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
 
       act(() => legacyRender(<Root>{[bar, foo]}</Root>, container));
-      expect(store).toMatchSnapshot('3: reorder children');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
-      expect(store).toMatchSnapshot('4: expand root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▸ <Bar key="bar">
+            ▸ <Foo key="foo">
+      `);
 
       act(() => {
         store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
         store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
       });
-      expect(store).toMatchSnapshot('5: expand leaves');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <Root>
+            ▾ <Bar key="bar">
+                <Component key="0">
+                <Component key="1">
+            ▾ <Foo key="foo">
+                <Component key="0">
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
-      expect(store).toMatchSnapshot('6: collapse root');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <Root>
+      `);
     });
 
     it('should not add new nodes when suspense is toggled', () => {
@@ -799,11 +1243,19 @@ describe('Store', () => {
       const Child = () => null;
 
       act(() => legacyRender(<SuspenseTree />, document.createElement('div')));
-      expect(store).toMatchSnapshot('1: mount');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▸ <SuspenseTree>
+      `);
 
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
       act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
-      expect(store).toMatchSnapshot('2: expand tree');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <SuspenseTree>
+            ▾ <Suspense>
+              ▸ <Parent>
+      `);
 
       const rendererID = getRendererID();
       const suspenseID = store.getElementIDAtIndex(1);
@@ -815,7 +1267,12 @@ describe('Store', () => {
           forceFallback: true,
         }),
       );
-      expect(store).toMatchSnapshot('3: toggle fallback on');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <SuspenseTree>
+            ▾ <Suspense>
+                <Fallback>
+      `);
 
       act(() =>
         agent.overrideSuspense({
@@ -824,7 +1281,12 @@ describe('Store', () => {
           forceFallback: false,
         }),
       );
-      expect(store).toMatchSnapshot('4: toggle fallback on');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <SuspenseTree>
+            ▾ <Suspense>
+              ▸ <Parent>
+      `);
     });
   });
 
@@ -940,7 +1402,10 @@ describe('Store', () => {
     const fauxElement = Object.assign({}, <Child />, {key: 123});
 
     act(() => legacyRender([fauxElement], document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Child key="123">
+    `);
   });
 
   it('should show the right display names for special component types', async () => {
@@ -1057,19 +1522,31 @@ describe('Store', () => {
       // Render once to start fetching the lazy component
       act(() => legacyRender(<App renderChildren={true} />, container));
 
-      expect(store).toMatchSnapshot('1: mounted + loading');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
 
       await Promise.resolve();
 
       // Render again after it resolves
       act(() => legacyRender(<App renderChildren={true} />, container));
 
-      expect(store).toMatchSnapshot('2: mounted + loaded');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+      `);
 
       // Render again to unmount it
       act(() => legacyRender(<App renderChildren={false} />, container));
 
-      expect(store).toMatchSnapshot('3: unmounted');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
     });
 
     it('should support Lazy components in (createRoot)', async () => {
@@ -1079,19 +1556,31 @@ describe('Store', () => {
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
 
-      expect(store).toMatchSnapshot('1: mounted + loading');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
 
       await Promise.resolve();
 
       // Render again after it resolves
       act(() => root.render(<App renderChildren={true} />));
 
-      expect(store).toMatchSnapshot('2: mounted + loaded');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+            ▾ <Suspense>
+                <LazyInnerComponent>
+      `);
 
       // Render again to unmount it
       act(() => root.render(<App renderChildren={false} />));
 
-      expect(store).toMatchSnapshot('3: unmounted');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
     });
 
     it('should support Lazy components that are unmounted before they finish loading (legacy render)', async () => {
@@ -1100,12 +1589,19 @@ describe('Store', () => {
       // Render once to start fetching the lazy component
       act(() => legacyRender(<App renderChildren={true} />, container));
 
-      expect(store).toMatchSnapshot('1: mounted + loading');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
 
       // Render again to unmount it before it finishes loading
       act(() => legacyRender(<App renderChildren={false} />, container));
 
-      expect(store).toMatchSnapshot('2: unmounted');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
     });
 
     it('should support Lazy components that are unmounted before they finish loading in (createRoot)', async () => {
@@ -1115,12 +1611,19 @@ describe('Store', () => {
       // Render once to start fetching the lazy component
       act(() => root.render(<App renderChildren={true} />));
 
-      expect(store).toMatchSnapshot('1: mounted + loading');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+          ▾ <App>
+              <Suspense>
+      `);
 
       // Render again to unmount it before it finishes loading
       act(() => root.render(<App renderChildren={false} />));
 
-      expect(store).toMatchSnapshot('2: unmounted');
+      expect(store).toMatchInlineSnapshot(`
+        [root]
+            <App>
+      `);
     });
   });
 
diff --git a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
index 183245a04ffa..c52f4e10ccde 100644
--- a/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeOwners-test.js
@@ -26,6 +26,11 @@ describe('Store owners list', () => {
     legacyRender = utils.legacyRender;
   });
 
+  function getFormattedOwnersList(elementID) {
+    const ownersList = store.getOwnersListForElement(elementID);
+    return printOwnersList(ownersList);
+  }
+
   it('should drill through intermediate components', () => {
     const Root = () => (
       <Intermediate>
@@ -39,17 +44,26 @@ describe('Store owners list', () => {
     const Intermediate = ({children}) => <Wrapper>{children}</Wrapper>;
 
     act(() => legacyRender(<Root />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Intermediate>
+            ▾ <Wrapper>
+                <Leaf>
+    `);
 
     const rootID = store.getElementIDAtIndex(0);
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('2: components owned by <Root>');
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+          ▾ <Intermediate>
+              <Leaf>"
+    `);
 
     const intermediateID = store.getElementIDAtIndex(1);
-    expect(
-      printOwnersList(store.getOwnersListForElement(intermediateID)),
-    ).toMatchSnapshot('3: components owned by <Intermediate>');
+    expect(getFormattedOwnersList(intermediateID)).toMatchInlineSnapshot(`
+      "  ▾ <Intermediate>
+          ▾ <Wrapper>"
+    `);
   });
 
   it('should drill through interleaved intermediate components', () => {
@@ -67,17 +81,30 @@ describe('Store owners list', () => {
     ];
 
     act(() => legacyRender(<Root />, document.createElement('div')));
-    expect(store).toMatchSnapshot('1: mount');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Intermediate key="intermediate">
+              <Leaf key="leaf">
+            ▾ <Wrapper key="wrapper">
+                <Leaf>
+            <Leaf key="leaf">
+    `);
 
     const rootID = store.getElementIDAtIndex(0);
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('2: components owned by <Root>');
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+          ▾ <Intermediate key=\\"intermediate\\">
+              <Leaf>
+            <Leaf key=\\"leaf\\">"
+    `);
 
     const intermediateID = store.getElementIDAtIndex(1);
-    expect(
-      printOwnersList(store.getOwnersListForElement(intermediateID)),
-    ).toMatchSnapshot('3: components owned by <Intermediate>');
+    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', () => {
@@ -103,12 +130,20 @@ describe('Store owners list', () => {
         container,
       ),
     );
-    expect(store).toMatchSnapshot('1: mount');
 
     const rootID = store.getElementIDAtIndex(0);
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('2: components owned by <Root>');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+          ▾ <Intermediate>
+            ▾ <Wrapper>
+                <Leaf>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+          ▾ <Intermediate>
+              <Leaf>"
+    `);
 
     act(() =>
       legacyRender(
@@ -116,11 +151,20 @@ describe('Store owners list', () => {
         container,
       ),
     );
-    expect(store).toMatchSnapshot('3: update to add direct');
-
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('4: components owned by <Root>');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+            <Leaf>
+          ▾ <Intermediate>
+            ▾ <Wrapper>
+                <Leaf>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+            <Leaf>
+          ▾ <Intermediate>
+              <Leaf>"
+    `);
 
     act(() =>
       legacyRender(
@@ -128,11 +172,15 @@ describe('Store owners list', () => {
         container,
       ),
     );
-    expect(store).toMatchSnapshot('5: update to remove indirect');
-
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('6: components owned by <Root>');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+        ▾ <Root>
+            <Leaf>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(`
+      "  ▾ <Root>
+            <Leaf>"
+    `);
 
     act(() =>
       legacyRender(
@@ -140,11 +188,13 @@ describe('Store owners list', () => {
         container,
       ),
     );
-    expect(store).toMatchSnapshot('7: update to remove both');
-
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('8: components owned by <Root>');
+    expect(store).toMatchInlineSnapshot(`
+      [root]
+          <Root>
+    `);
+    expect(getFormattedOwnersList(rootID)).toMatchInlineSnapshot(
+      `"    <Root>"`,
+    );
   });
 
   it('should show the proper owners list ordering after reordered children', () => {
@@ -156,18 +206,35 @@ describe('Store owners list', () => {
 
     const container = document.createElement('div');
     act(() => legacyRender(<Root ascending={true} />, container));
-    expect(store).toMatchSnapshot('1: mount (ascending)');
 
     const rootID = store.getElementIDAtIndex(0);
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('2: components owned by <Root>');
+    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(() => legacyRender(<Root ascending={false} />, container));
-    expect(store).toMatchSnapshot('3: update (descending)');
-
-    expect(
-      printOwnersList(store.getOwnersListForElement(rootID)),
-    ).toMatchSnapshot('4: components owned by <Root>');
+    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__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index a1b4ecca6e64..3e4417b4a01e 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -232,7 +232,7 @@ export function exportImportHelper(bridge: FrontendBridge, store: Store): void {
   );
 
   // Snapshot the JSON-parsed object, rather than the raw string, because Jest formats the diff nicer.
-  expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
+  // expect(parsedProfilingDataExport).toMatchSnapshot('imported data');
 
   act(() => {
     // Apply the new exported-then-imported data so tests can re-run assertions.

From 0415b18a100043df164bcd40639f9373e3358350 Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Wed, 30 Mar 2022 11:07:12 -0400
Subject: [PATCH 1248/1603] [ReactDebugTools] add custom error type for future
 new hooks (#24168)

* [ReactDebugTools] add custom error type for future new hooks

* update per review comments

* remove unused argument
---
 .../react-debug-tools/src/ReactDebugHooks.js  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index b7159859060e..49bf65e3136f 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -356,6 +356,23 @@ const Dispatcher: DispatcherType = {
   useId,
 };
 
+// create a proxy to throw a custom error
+// in case future versions of React adds more hooks
+const DispatcherProxyHandler = {
+  get(target, prop) {
+    if (target.hasOwnProperty(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 = 'UnsupportedFeatureError';
+    throw error;
+  },
+};
+
+const DispatcherProxy = new Proxy(Dispatcher, DispatcherProxyHandler);
+
 // Inspect
 
 export type HookSource = {
@@ -664,7 +681,7 @@ export function inspectHooks<Props>(
 
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
-  currentDispatcher.current = Dispatcher;
+  currentDispatcher.current = DispatcherProxy;
   let ancestorStackError;
   try {
     ancestorStackError = new Error();
@@ -708,7 +725,7 @@ function inspectHooksOfForwardRef<Props, Ref>(
 ): HooksTree {
   const previousDispatcher = currentDispatcher.current;
   let readHookLog;
-  currentDispatcher.current = Dispatcher;
+  currentDispatcher.current = DispatcherProxy;
   let ancestorStackError;
   try {
     ancestorStackError = new Error();

From a0fb3cf37ec6e81de7b7b1ca01b2cc560231e0c1 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Wed, 30 Mar 2022 17:00:29 +0100
Subject: [PATCH 1249/1603] Fix changelog typos

---
 CHANGELOG.md | 104 +++++++++++++++++++++++++--------------------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c66576813274..36fbc4b5875f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ Read [React 18 release post](https://reactjs.org/blog/2022/03/29/react-v18.html)
 
 ### 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.
+* `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.
@@ -18,7 +18,7 @@ Read [React 18 release post](https://reactjs.org/blog/2022/03/29/react-v18.html)
 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.
+* `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.
 
@@ -73,74 +73,74 @@ The existing `renderToString` method keeps working but is discouraged.
 * 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))
+* 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))
+* 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))
+* 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))
+* 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))
+* 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/22739)  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))
+* 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))
 
 ## 17.0.2 (March 22, 2021)
 

From 7e3121e1cfe25f1af5079b3bf487b5b5202400d4 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Wed, 30 Mar 2022 18:05:07 +0200
Subject: [PATCH 1250/1603] Remove unstable_createMutableSource from
 experimental build (#24209)

---
 packages/react/index.experimental.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index b54fe6fdcd0b..287c13729881 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -22,7 +22,6 @@ export {
   createContext,
   createElement,
   createFactory,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   createServerContext,
   forwardRef,

From 77938881f42ac466c573fa24ecc9eff84ff7aca4 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 30 Mar 2022 12:28:49 -0400
Subject: [PATCH 1251/1603] Update @next version (#24218)

Now that 18.0 is out, the next minor is 18.1
---
 ReactVersions.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index 854344df8725..fca66af474b4 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,7 +18,7 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.0.0';
+const ReactVersion = '18.1.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
@@ -26,18 +26,18 @@ const nextChannelLabel = 'next';
 
 const stablePackages = {
   'create-subscription': ReactVersion,
-  'eslint-plugin-react-hooks': '4.4.0',
-  'jest-react': '0.12.1',
+  'eslint-plugin-react-hooks': '4.5.0',
+  'jest-react': '0.13.1',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.27.0',
-  'react-refresh': '0.12.0',
+  'react-reconciler': '0.28.0',
+  'react-refresh': '0.13.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.6.0',
-  'use-sync-external-store': '1.0.0',
-  scheduler: '0.21.0',
+  'use-subscription': '1.7.0',
+  'use-sync-external-store': '1.1.0',
+  scheduler: '0.22.0',
 };
 
 // These packages do not exist in the @next or @latest channel, only

From b76103d66fdb7396cbfcc66a032b31a0cd8ad342 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Wed, 30 Mar 2022 19:37:31 +0100
Subject: [PATCH 1252/1603] Remove React 18 issue template (#24220)

React 18 is just React now.
---
 .github/ISSUE_TEMPLATE/react_18.md | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 .github/ISSUE_TEMPLATE/react_18.md

diff --git a/.github/ISSUE_TEMPLATE/react_18.md b/.github/ISSUE_TEMPLATE/react_18.md
deleted file mode 100644
index 1c0a8792469f..000000000000
--- a/.github/ISSUE_TEMPLATE/react_18.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-name: "💬 React 18"
-about: Bug reports, questions, and general feedback about React 18
-title: 'React 18 '
-labels: 'Type: Discussion, React 18'
-
----
-
-<!--
-  Ask a question or share feedback about the React 18 release here.
--->

From aa05e73150d4a80fe4b1f9cbf61d3b81766fa127 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Thu, 31 Mar 2022 10:43:08 -0400
Subject: [PATCH 1253/1603] Add 4.4.0 release to eslint rules CHANGELOG
 (#24234)

---
 packages/eslint-plugin-react-hooks/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index 6a560c6012f4..cdb0d053ba80 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 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))

From 4db3ff6c1ac092676dffc2251f5dec908eca9c74 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 31 Mar 2022 17:35:51 +0100
Subject: [PATCH 1254/1603] Test suite for hydration diff warnings (#24229)

* Test suite for hydration diff warnings

* Test both variants

* Add more edge cases
---
 .../__tests__/ReactDOMHydrationDiff-test.js   | 1329 +++++++++++++++++
 1 file changed, 1329 insertions(+)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js

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 000000000000..f79ca0c18b63
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -0,0 +1,1329 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+let React;
+let ReactDOMClient;
+let ReactDOMServer;
+let act;
+
+const util = require('util');
+const realConsoleError = console.error;
+
+describe('ReactDOMServerHydration', () => {
+  let container;
+
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server');
+    act = require('react-dom/test-utils').act;
+
+    console.error = jest.fn();
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    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 **)';
+      })
+    );
+  }
+
+  function formatMessage(args) {
+    const [format, ...rest] = args;
+    if (format instanceof Error) {
+      return 'Caught [' + format.message + ']';
+    }
+    if (format.indexOf('Error: Uncaught [') === 0) {
+      // Ignore errors captured by jsdom and their stacks.
+      // We only want console errors in this suite.
+      return null;
+    }
+    rest[rest.length - 1] = normalizeCodeLocInfo(rest[rest.length - 1]);
+    return util.format(format, ...rest);
+  }
+
+  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>
+        );
+      }
+      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
+              in main (at **)
+              in div (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Text content does not match server-rendered HTML.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
+      } else {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
+              in main (at **)
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      }
+    });
+
+    // @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(`
+        Array [
+          "Warning: Prop \`dangerouslySetInnerHTML\` did not match. Server: \\"<span>server</span>\\" Client: \\"<span>client</span>\\"
+            in main (at **)
+            in div (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(`
+        Array [
+          "Warning: Prop \`className\` did not match. Server: \\"child server\\" Client: \\"child client\\"
+            in main (at **)
+            in div (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(`
+        Array [
+          "Warning: Prop \`tabIndex\` did not match. Server: \\"null\\" Client: \\"1\\"
+            in main (at **)
+            in div (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(`
+        Array [
+          "Warning: Extra attributes from the server: tabindex,dir
+            in main (at **)
+            in div (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(`
+        Array [
+          "Warning: Prop \`tabIndex\` did not match. Server: \\"null\\" Client: \\"1\\"
+            in main (at **)
+            in div (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(`
+        Array [
+          "Warning: Prop \`style\` did not match. Server: \\"opacity:0\\" Client: \\"opacity:1\\"
+            in main (at **)
+            in div (at **)
+            in Mismatch (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <header> in <div>.
+                in header (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <header> in <div>.
+                in header (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <footer> in <div>.
+                in footer (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <footer> in <div>.
+                in footer (at **)
+                in div (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>;
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Text content does not match server-rendered HTML.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
+                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">
+              {isClient && 'first'}
+              <main className="2" />
+              <footer className="3" />
+            </div>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching text node for \\"third\\" in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching text node for \\"third\\" in <div>.
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <main> in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <main> in <div>.
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <header> in <div>.
+                in main (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <footer> in <div>.
+                in footer (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <main> in <div>.
+                in footer (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <footer> in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <footer> in <div>.
+                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>;
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain the text node \\"only\\" in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain the text node \\"only\\" in <div>.
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain the text node \\"first\\" in <div>.
+                in main (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <footer> in <div>.
+                in footer (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain the text node \\"second\\" in <div>.
+                in footer (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain the text node \\"third\\" in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain the text node \\"third\\" in <div>.
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          // TODO: This message doesn't seem to have any useful details.
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
+        }
+      });
+
+      // @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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <main> in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <main> in <div>.
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          // TODO: This message doesn't seem to have any useful details.
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
+        }
+      });
+
+      // @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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <p> in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <p> in <div>.
+                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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in Suspense (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <main> in <div>.
+                in main (at **)
+                in Suspense (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <footer> in <div>.
+                in footer (at **)
+                in Suspense (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <main> in <div>.
+                in footer (at **)
+                in Suspense (at **)
+                in div (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>
+          );
+        }
+        // TODO: Why does this not show a fallback mismatch?
+        // And why is this message different from the other ones?
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+            ]
+          `);
+        }
+      });
+
+      // @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>
+          );
+        }
+        // TODO: Why does this not show a fallback mismatch?
+        // And why is this message different from the other ones?
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+            ]
+          `);
+        }
+      });
+    });
+
+    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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <header> in <div>.
+                in header (at **)
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Expected server HTML to contain a matching <header> in <div>.
+                in header (at **)
+                in div (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>
+          );
+        }
+        if (
+          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
+        ) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <header> in <div>.
+                in div (at **)
+                in Mismatch (at **)",
+              "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+              "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+              "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Did not expect server HTML to contain a <header> in <div>.
+                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" />}
+          </>
+        );
+      }
+
+      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+              in footer (at **)
+              in Panel (at **)
+              in div (at **)
+              in ProfileSettings (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
+      } else {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Expected server HTML to contain a matching <footer> in <div>.
+              in footer (at **)
+              in Panel (at **)
+              in div (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" />}
+          </>
+        );
+      }
+
+      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Did not expect server HTML to contain a <footer> in <div>.
+              in div (at **)
+              in ProfileSettings (at **)
+              in Mismatch (at **)",
+            "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
+            "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
+            "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
+          ]
+        `);
+      } else {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Did not expect server HTML to contain a <footer> in <div>.
+              in div (at **)
+              in ProfileSettings (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      }
+    });
+  });
+});

From d352fd09315276b3def318d91f462ee7c49fb1af Mon Sep 17 00:00:00 2001
From: Kay <hello@kunalpanchal.in>
Date: Fri, 1 Apr 2022 01:26:12 +0200
Subject: [PATCH 1255/1603] Fix for SSR2 fixture not working locally  (#24237)

* SS2 fixture not working locally fix

* Fix prettier issue

* prettier excess line fix

* Update render.js

* Update README.md

Co-authored-by: dan <dan.abramov@gmail.com>
---
 fixtures/ssr2/README.md        | 30 ++++++++++++++++++++++++++++++
 fixtures/ssr2/scripts/build.js |  1 -
 fixtures/ssr2/server/render.js |  8 ++++++--
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 fixtures/ssr2/README.md

diff --git a/fixtures/ssr2/README.md b/fixtures/ssr2/README.md
new file mode 100644
index 000000000000..e41d47149e16
--- /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/scripts/build.js b/fixtures/ssr2/scripts/build.js
index 24606053d9f0..452f7c750f61 100644
--- a/fixtures/ssr2/scripts/build.js
+++ b/fixtures/ssr2/scripts/build.js
@@ -40,7 +40,6 @@ webpack(
         console.error(err.details);
       }
       process.exit(1);
-      return;
     }
     const info = stats.toJson();
     if (stats.hasErrors()) {
diff --git a/fixtures/ssr2/server/render.js b/fixtures/ssr2/server/render.js
index ea2b6e4696a0..9c70f8ba016d 100644
--- a/fixtures/ssr2/server/render.js
+++ b/fixtures/ssr2/server/render.js
@@ -20,6 +20,7 @@ let assets = {
 };
 
 module.exports = function render(url, res) {
+  const data = createServerData();
   // This is how you would wire it up previously:
   //
   // res.send(
@@ -36,14 +37,17 @@ module.exports = function render(url, res) {
     console.error('Fatal', error);
   });
   let didError = false;
-  const data = createServerData();
   const {pipe, abort} = renderToPipeableStream(
     <DataProvider data={data}>
       <App assets={assets} />
     </DataProvider>,
     {
       bootstrapScripts: [assets['main.js']],
-      onCompleteShell() {
+      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');

From ebd7ff65b6fea73313c210709c88224910e86339 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Fri, 1 Apr 2022 02:49:54 +0100
Subject: [PATCH 1256/1603] Don't recreate the same fallback on the client if
 hydrating suspends (#24236)

* Delay showing fallback if hydrating suspends

* Fix up

* Include all non-urgent lanes

* Moar tests

* Add test for transitions
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 308 +++++++++++++++++-
 .../__tests__/ReactDOMHydrationDiff-test.js   |  34 +-
 ...DOMServerPartialHydration-test.internal.js |   5 +-
 .../src/ReactFiberBeginWork.new.js            |   1 +
 .../src/ReactFiberBeginWork.old.js            |   1 +
 .../src/ReactFiberLane.new.js                 |   5 +-
 .../src/ReactFiberLane.old.js                 |   5 +-
 .../src/ReactFiberWorkLoop.new.js             |   4 +-
 .../src/ReactFiberWorkLoop.old.js             |   4 +-
 9 files changed, 315 insertions(+), 52 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 568a931c7d9e..295e99b26a69 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -869,16 +869,16 @@ describe('ReactDOMFizzServer', () => {
     });
 
     // We still can't render it on the client.
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to an ' +
-        'error during server rendering. Switched to client rendering.',
-    ]);
+    expect(Scheduler).toFlushAndYield([]);
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // We now resolve it on the client.
     resolveText('Hello');
 
-    Scheduler.unstable_flushAll();
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to an ' +
+        'error during server rendering. Switched to client rendering.',
+    ]);
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(
@@ -2220,6 +2220,286 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
+  // @gate experimental
+  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.unstable_yieldValue('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(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+        onError(error) {
+          Scheduler.unstable_yieldValue('[s!] ' + error.message);
+        },
+      });
+      pipe(writable);
+    });
+    expect(Scheduler).toHaveYielded(['[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.unstable_yieldValue('[c!] ' + error.message);
+      },
+    });
+    // This should not report any errors yet.
+    expect(Scheduler).toFlushAndYield([]);
+    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(async () => {
+      resolveText('Yay!');
+    });
+    expect(Scheduler).toFlushAndYield([
+      'Yay!',
+      '[c!] 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>,
+    );
+  });
+
+  // @gate experimental
+  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.unstable_yieldValue('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(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          <App color="red" />,
+          {
+            onError(error) {
+              Scheduler.unstable_yieldValue('[s!] ' + error.message);
+            },
+          },
+        );
+        pipe(writable);
+      });
+      expect(Scheduler).toHaveYielded(['[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.unstable_yieldValue('[c!] ' + error.message);
+        },
+      });
+      // This should not report any errors yet.
+      expect(Scheduler).toFlushAndYield([]);
+      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" />);
+      });
+      Scheduler.unstable_flushAll();
+      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(async () => {
+        resolveText('Yay!');
+      });
+      expect(Scheduler).toFlushAndYield([
+        'Yay! (red)',
+        '[c!] 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>,
+      );
+    },
+  );
+
+  // @gate experimental
+  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.unstable_yieldValue(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(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          <App fallbackText="Loading..." />,
+          {
+            onError(error) {
+              Scheduler.unstable_yieldValue('[s!] ' + error.message);
+            },
+          },
+        );
+        pipe(writable);
+      });
+      expect(Scheduler).toHaveYielded(['[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.unstable_yieldValue('[c!] ' + error.message);
+          },
+        },
+      );
+      // This should not report any errors yet.
+      expect(Scheduler).toFlushAndYield([]);
+      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..." />);
+      Scheduler.unstable_flushAll();
+      jest.runAllTimers();
+      expect(Scheduler).toHaveYielded([
+        '[c!] 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(async () => {
+        resolveText('Yay!');
+      });
+      expect(Scheduler).toFlushAndYield(['Yay!']);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <span>Yay!</span>
+        </div>,
+      );
+    },
+  );
+
   // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
@@ -2293,17 +2573,12 @@ describe('ReactDOMFizzServer', () => {
         },
       });
 
-      // An error logged but instead of surfacing it to the UI, we switched
-      // to client rendering.
-      expect(Scheduler).toFlushAndYield([
-        'Hydration error',
-        'There was an error while hydrating this Suspense boundary. Switched ' +
-          'to client rendering.',
-      ]);
+      // An error happened but instead of surfacing it to the UI, we suspended.
+      expect(Scheduler).toFlushAndYield([]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
-          Loading...
+          <span>Yay!</span>
           <span />
         </div>,
       );
@@ -2311,7 +2586,12 @@ describe('ReactDOMFizzServer', () => {
       await act(async () => {
         resolveText('Yay!');
       });
-      expect(Scheduler).toFlushAndYield(['Yay!']);
+      expect(Scheduler).toFlushAndYield([
+        'Yay!',
+        'Hydration error',
+        'There was an error while hydrating this Suspense boundary. Switched ' +
+          'to client rendering.',
+      ]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index f79ca0c18b63..a6a1a9989038 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -1046,7 +1046,7 @@ describe('ReactDOMServerHydration', () => {
       });
 
       // @gate __DEV__
-      it('warns when client renders an extra node inside Suspense fallback', () => {
+      it('does not warn when client renders an extra node inside Suspense fallback', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
@@ -1063,27 +1063,18 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // TODO: Why does this not show a fallback mismatch?
-        // And why is this message different from the other ones?
         if (
           gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
         ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-            ]
-          `);
+          // There is no error because we don't actually hydrate fallbacks.
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
         } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-            ]
-          `);
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
         }
       });
 
       // @gate __DEV__
-      it('warns when server renders an extra node inside Suspense fallback', () => {
+      it('does not warn when server renders an extra node inside Suspense fallback', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
@@ -1100,22 +1091,13 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // TODO: Why does this not show a fallback mismatch?
-        // And why is this message different from the other ones?
         if (
           gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
         ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-            ]
-          `);
+          // There is no error because we don't actually hydrate fallbacks.
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
         } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-            ]
-          `);
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
         }
       });
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 697ce84fe7bd..66bfdf9a39ed 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2137,10 +2137,7 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     suspend = true;
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    expect(Scheduler).toFlushAndYield([]);
 
     // We haven't hydrated the second child but the placeholder is still in the list.
     expect(container.textContent).toBe('ALoading B');
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6fee8d948ebe..32da430eef07 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2241,6 +2241,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           } else {
             // Suspended but we should no longer be in dehydrated mode.
             // Therefore we now have to render the fallback.
+            renderDidSuspendDelayIfPossible();
             const nextPrimaryChildren = nextProps.children;
             const nextFallbackChildren = nextProps.fallback;
             const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index fc4912e7ec39..45aa1cd43ba9 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2241,6 +2241,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           } else {
             // Suspended but we should no longer be in dehydrated mode.
             // Therefore we now have to render the fallback.
+            renderDidSuspendDelayIfPossible();
             const nextPrimaryChildren = nextProps.children;
             const nextFallbackChildren = nextProps.fallback;
             const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 597f99633199..3bf65a9093ad 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -458,8 +458,9 @@ export function includesNonIdleWork(lanes: Lanes) {
 export function includesOnlyRetries(lanes: Lanes) {
   return (lanes & RetryLanes) === lanes;
 }
-export function includesOnlyTransitions(lanes: Lanes) {
-  return (lanes & TransitionLanes) === lanes;
+export function includesOnlyNonUrgentLanes(lanes: Lanes) {
+  const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
+  return (lanes & UrgentLanes) === NoLanes;
 }
 
 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 9f366c9ade88..ec884de182ff 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -458,8 +458,9 @@ export function includesNonIdleWork(lanes: Lanes) {
 export function includesOnlyRetries(lanes: Lanes) {
   return (lanes & RetryLanes) === lanes;
 }
-export function includesOnlyTransitions(lanes: Lanes) {
-  return (lanes & TransitionLanes) === lanes;
+export function includesOnlyNonUrgentLanes(lanes: Lanes) {
+  const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
+  return (lanes & UrgentLanes) === NoLanes;
 }
 
 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 558440effa77..3e50d6e39160 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -132,7 +132,7 @@ import {
   pickArbitraryLane,
   includesNonIdleWork,
   includesOnlyRetries,
-  includesOnlyTransitions,
+  includesOnlyNonUrgentLanes,
   includesBlockingLane,
   includesExpiredLane,
   getNextLanes,
@@ -1110,7 +1110,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootSuspendedWithDelay: {
       markRootSuspended(root, lanes);
 
-      if (includesOnlyTransitions(lanes)) {
+      if (includesOnlyNonUrgentLanes(lanes)) {
         // This is a transition, so we should exit without committing a
         // placeholder and without scheduling a timeout. Delay indefinitely
         // until we receive more data.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c1c090d82b0b..2745bb87c09e 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -132,7 +132,7 @@ import {
   pickArbitraryLane,
   includesNonIdleWork,
   includesOnlyRetries,
-  includesOnlyTransitions,
+  includesOnlyNonUrgentLanes,
   includesBlockingLane,
   includesExpiredLane,
   getNextLanes,
@@ -1110,7 +1110,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootSuspendedWithDelay: {
       markRootSuspended(root, lanes);
 
-      if (includesOnlyTransitions(lanes)) {
+      if (includesOnlyNonUrgentLanes(lanes)) {
         // This is a transition, so we should exit without committing a
         // placeholder and without scheduling a timeout. Delay indefinitely
         // until we receive more data.

From c89a15c716febe71b7d857f839829cd1dc74918f Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Fri, 1 Apr 2022 14:38:11 -0400
Subject: [PATCH 1257/1603] [ReactDebugTools] wrap uncaught error from
 rendering user's component (#24216)

* [ReactDebugTools] wrap uncaught error from rendering user's component

* fix lint

* make error names more package specific

* update per review comments

* fix tests

* fix lint

* fix tests

* fix lint

* fix error name & nits

* try catch instead of mocking error

* fix test for older node.js version

* avoid false positive from try-catch in tests
---
 .../react-debug-tools/src/ReactDebugHooks.js  | 30 ++++++++++++++++++-
 .../__tests__/ReactHooksInspection-test.js    | 16 ++++++++--
 .../ReactHooksInspectionIntegration-test.js   | 28 +++++++++++------
 .../src/__tests__/inspectedElement-test.js    |  2 +-
 4 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 49bf65e3136f..3657ed2db059 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -366,7 +366,7 @@ const DispatcherProxyHandler = {
     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 = 'UnsupportedFeatureError';
+    error.name = 'ReactDebugToolsUnsupportedHookError';
     throw error;
   },
 };
@@ -667,6 +667,30 @@ function processDebugValues(
   }
 }
 
+function handleRenderFunctionError(error: any): void {
+  // original error might be any type.
+  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: 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.
+  wrapperError.cause = error;
+  throw wrapperError;
+}
+
 export function inspectHooks<Props>(
   renderFunction: Props => React$Node,
   props: Props,
@@ -686,6 +710,8 @@ export function inspectHooks<Props>(
   try {
     ancestorStackError = new Error();
     renderFunction(props);
+  } catch (error) {
+    handleRenderFunctionError(error);
   } finally {
     readHookLog = hookLog;
     hookLog = [];
@@ -730,6 +756,8 @@ function inspectHooksOfForwardRef<Props, Ref>(
   try {
     ancestorStackError = new Error();
     renderFunction(props, ref);
+  } catch (error) {
+    handleRenderFunctionError(error);
   } finally {
     readHookLog = hookLog;
     hookLog = [];
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
index 50eadbedcbe4..43624ce37aff 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
@@ -276,10 +276,20 @@ describe('ReactHooksInspection', () => {
       },
     };
 
+    let didCatch = false;
     expect(() => {
-      expect(() => {
+      // mock the Error constructor to check the internal of the error instance
+      try {
         ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
-      }).toThrow("Cannot read property 'useState' of null");
+      } catch (error) {
+        expect(error.message).toBe('Error rendering inspected component');
+        // error.cause is the original error
+        expect(error.cause).toBeInstanceOf(Error);
+        expect(error.cause.message).toBe(
+          "Cannot read property 'useState' of null",
+        );
+      }
+      didCatch = true;
     }).toErrorDev(
       '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' +
@@ -289,6 +299,8 @@ describe('ReactHooksInspection', () => {
         'See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
       {withoutStack: true},
     );
+    // avoid false positive if no error was thrown at all
+    expect(didCatch).toBe(true);
 
     expect(getterCalls).toBe(1);
     expect(setterCalls).toHaveLength(2);
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index f5003e96bdf6..e57f084975d6 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -920,16 +920,26 @@ describe('ReactHooksInspectionIntegration', () => {
 
     const renderer = ReactTestRenderer.create(<Foo />);
     const childFiber = renderer.root._currentFiber();
-    expect(() => {
+
+    let didCatch = false;
+
+    try {
       ReactDebugTools.inspectHooksOfFiber(childFiber, FakeDispatcherRef);
-    }).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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-    );
+    } catch (error) {
+      expect(error.message).toBe('Error rendering inspected component');
+      expect(error.cause).toBeInstanceOf(Error);
+      expect(error.cause.message).toBe(
+        '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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
+      );
+      didCatch = true;
+    }
+    // avoid false positive if no error was thrown at all
+    expect(didCatch).toBe(true);
 
     expect(getterCalls).toBe(1);
     expect(setterCalls).toHaveLength(2);
diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 919fbb059f76..81c0a3a75821 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2145,7 +2145,7 @@ describe('InspectedElement', () => {
     expect(value).toBe(null);
 
     const error = errorBoundaryInstance.state.error;
-    expect(error.message).toBe('Expected');
+    expect(error.message).toBe('Error rendering inspected component');
     expect(error.stack).toContain('inspectHooksOfFiber');
   });
 

From b8cfda15e1232554487c7285fb464f22705a23ce Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 1 Apr 2022 17:02:28 -0400
Subject: [PATCH 1258/1603] changed Transitions type to Array<Transition>
 (#24249)

Changed the Transitions type to Array<Transition> because Transitions was confusing
---
 packages/react-reconciler/src/ReactFiberLane.new.js        | 7 ++-----
 packages/react-reconciler/src/ReactFiberLane.old.js        | 7 ++-----
 packages/react-reconciler/src/ReactFiberRoot.new.js        | 4 ++--
 packages/react-reconciler/src/ReactFiberRoot.old.js        | 4 ++--
 .../src/ReactFiberTracingMarkerComponent.new.js            | 2 --
 .../src/ReactFiberTracingMarkerComponent.old.js            | 2 --
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js    | 4 ++--
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js    | 4 ++--
 packages/react-reconciler/src/ReactInternalTypes.js        | 4 ++--
 9 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 3bf65a9093ad..4013545caf8d 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -8,10 +8,7 @@
  */
 
 import type {FiberRoot} from './ReactInternalTypes';
-import type {
-  Transition,
-  Transitions,
-} from './ReactFiberTracingMarkerComponent.new';
+import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 
 // 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.
@@ -824,7 +821,7 @@ export function addTransitionToLanesMap(
 export function getTransitionsForLanes(
   root: FiberRoot,
   lanes: Lane | Lanes,
-): Transitions | null {
+): Array<Transition> | null {
   if (!enableTransitionTracing) {
     return null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index ec884de182ff..37fb44cc1086 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -8,10 +8,7 @@
  */
 
 import type {FiberRoot} from './ReactInternalTypes';
-import type {
-  Transition,
-  Transitions,
-} from './ReactFiberTracingMarkerComponent.old';
+import type {Transition} from './ReactFiberTracingMarkerComponent.old';
 
 // 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.
@@ -824,7 +821,7 @@ export function addTransitionToLanesMap(
 export function getTransitionsForLanes(
   root: FiberRoot,
   lanes: Lane | Lanes,
-): Transitions | null {
+): Array<Transition> | null {
   if (!enableTransitionTracing) {
     return null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 7ff03ceead0e..ba8717a65e9e 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -15,7 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
-import type {Transitions} from './ReactFiberTracingMarkerComponent.new';
+import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
@@ -42,7 +42,7 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  transitions: Transitions | null,
+  transitions: Array<Transition> | null,
 };
 
 function FiberRootNode(
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 179b9c17ae41..1d5edd410cfe 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -15,7 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
-import type {Transitions} from './ReactFiberTracingMarkerComponent.old';
+import type {Transition} from './ReactFiberTracingMarkerComponent.old';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
@@ -42,7 +42,7 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  transitions: Transitions | null,
+  transitions: Array<Transition> | null,
 };
 
 function FiberRootNode(
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index aad0c912c531..cc3834f5cc6c 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -34,8 +34,6 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
-export type Transitions = Array<Transition> | null;
-
 export type TransitionCallback = 0 | 1;
 
 export const TransitionStart = 0;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index aad0c912c531..cc3834f5cc6c 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -34,8 +34,6 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
-export type Transitions = Array<Transition> | null;
-
 export type TransitionCallback = 0 | 1;
 
 export const TransitionStart = 0;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 3e50d6e39160..4da17c7bb6e8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -18,7 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
   TransitionObject,
-  Transitions,
+  Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 
 import {
@@ -325,7 +325,7 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 // suspense heuristics and opt out of rendering more content.
 const RENDER_TIMEOUT_MS = 500;
 
-let workInProgressTransitions: Transitions | null = null;
+let workInProgressTransitions: Array<Transition> | null = null;
 export function getWorkInProgressTransitions() {
   return workInProgressTransitions;
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 2745bb87c09e..2c940a71001d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -18,7 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
   TransitionObject,
-  Transitions,
+  Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 
 import {
@@ -325,7 +325,7 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 // suspense heuristics and opt out of rendering more content.
 const RENDER_TIMEOUT_MS = 500;
 
-let workInProgressTransitions: Transitions | null = null;
+let workInProgressTransitions: Array<Transition> | null = null;
 export function getWorkInProgressTransitions() {
   return workInProgressTransitions;
 }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 1fa3d4b6680d..319bbc1c337d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -26,7 +26,7 @@ import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
-import type {Transitions} from './ReactFiberTracingMarkerComponent.new';
+import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 
 // Unwind Circular: moved from ReactFiberHooks.old
 export type HookType =
@@ -320,7 +320,7 @@ export type TransitionTracingCallbacks = {
 // The following fields are only used in transition tracing in Profile builds
 type TransitionTracingOnlyFiberRootProperties = {|
   transitionCallbacks: null | TransitionTracingCallbacks,
-  transitionLanes: Array<Transitions>,
+  transitionLanes: Array<Array<Transition> | null>,
 |};
 
 // Exported FiberRoot type includes all properties,

From e912da964dbf5f84bf8c4e78e0ac218362bc074e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Noel=20Kim=20=28=EA=B9=80=EB=AF=BC=ED=98=81=29?=
 <noel@chequer.io>
Date: Sun, 3 Apr 2022 10:41:49 +0900
Subject: [PATCH 1259/1603] Update Example render for React v18 (#24259)

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 8f2e04c6a9f9..d2f0e08ecc94 100644
--- a/README.md
+++ b/README.md
@@ -40,14 +40,14 @@ You can improve it by sending pull requests to [this repository](https://github.
 We have several examples [on the website](https://reactjs.org/). Here is the first one to get you started:
 
 ```jsx
+import { createRoot } from 'react-dom/client';
+
 function HelloMessage({ name }) {
   return <div>Hello {name}</div>;
 }
 
-ReactDOM.render(
-  <HelloMessage name="Taylor" />,
-  document.getElementById('container')
-);
+const root = createRoot(document.getElementById('container'));
+root.render(<HelloMessage name="Taylor" />);
 ```
 
 This example will render "Hello Taylor" into a container on the page.

From 985272e26858ce3838fde856b022200b9c7d3dcb Mon Sep 17 00:00:00 2001
From: Hikari Hayashi <rev.hikari@gmail.com>
Date: Mon, 4 Apr 2022 16:47:36 +0800
Subject: [PATCH 1260/1603] Fix name mismatch in react-reconciler custom build.
 (#24272)

---
 .../react-reconciler/src/forks/ReactFiberHostConfig.custom.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 6535d8d3fdec..f2705b7b1df4 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -64,7 +64,7 @@ export const getInstanceFromNode = $$$hostConfig.getInstanceFromNode;
 export const beforeActiveInstanceBlur = $$$hostConfig.beforeActiveInstanceBlur;
 export const afterActiveInstanceBlur = $$$hostConfig.afterActiveInstanceBlur;
 export const preparePortalMount = $$$hostConfig.preparePortalMount;
-export const prepareScopeUpdate = $$$hostConfig.preparePortalMount;
+export const prepareScopeUpdate = $$$hostConfig.prepareScopeUpdate;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 export const detachDeletedInstance = $$$hostConfig.detachDeletedInstance;

From fc47cb1b61ac012f9bd6d7251eb19fcecf364a3b Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Mon, 4 Apr 2022 16:23:58 +0100
Subject: [PATCH 1261/1603] Fix suppressHydrationWarning not working in
 production (#24271)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 92 +++++++++++++++++++
 .../react-dom/src/client/ReactDOMComponent.js | 15 +--
 .../src/client/ReactDOMHostConfig.js          |  5 +-
 3 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 295e99b26a69..d4687ab4d365 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2811,4 +2811,96 @@ describe('ReactDOMFizzServer', () => {
       </ul>,
     );
   });
+
+  // @gate experimental
+  it('suppresses and fixes text mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span
+            suppressHydrationWarning={true}
+            data-attr={isClient ? 'client-attr' : 'server-attr'}>
+            {isClient ? 'Client Text' : 'Server Text'}
+          </span>
+          <span suppressHydrationWarning={true}>{isClient ? 2 : 1}</span>
+          <span suppressHydrationWarning={true}>
+            hello,{isClient ? 'client' : 'server'}
+          </span>
+        </div>
+      );
+    }
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span data-attr="server-attr">Server Text</span>
+        <span>1</span>
+        <span>
+          {'hello,'}
+          {'server'}
+        </span>
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        // Don't miss a hydration error. There should be none.
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    // The text mismatch should be *silently* fixed. Even in production.
+    // The attribute mismatch should be ignored and not fixed.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span data-attr="server-attr">Client Text</span>
+        <span>2</span>
+        <span>
+          {'hello,'}
+          {'client'}
+        </span>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Server HTML</p>
+      </div>,
+    );
+  });
 });
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 7f9b6ac47d8a..75e017a45183 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -91,7 +91,6 @@ const STYLE = 'style';
 const HTML = '__html';
 
 let warnedUnknownTags;
-let suppressHydrationWarning;
 
 let validatePropertiesInDevelopment;
 let warnForPropDifference;
@@ -875,7 +874,6 @@ export function diffHydratedProperties(
   let extraAttributeNames: Set<string>;
 
   if (__DEV__) {
-    suppressHydrationWarning = rawProps[SUPPRESS_HYDRATION_WARNING] === true;
     isCustomComponentTag = isCustomComponent(tag, rawProps);
     validatePropertiesInDevelopment(tag, rawProps);
   }
@@ -984,7 +982,7 @@ export function diffHydratedProperties(
       // TODO: Should we use domElement.firstChild.nodeValue to compare?
       if (typeof nextProp === 'string') {
         if (domElement.textContent !== nextProp) {
-          if (!suppressHydrationWarning) {
+          if (rawProps[SUPPRESS_HYDRATION_WARNING] !== true) {
             checkForUnmatchedText(
               domElement.textContent,
               nextProp,
@@ -996,7 +994,7 @@ export function diffHydratedProperties(
         }
       } else if (typeof nextProp === 'number') {
         if (domElement.textContent !== '' + nextProp) {
-          if (!suppressHydrationWarning) {
+          if (rawProps[SUPPRESS_HYDRATION_WARNING] !== true) {
             checkForUnmatchedText(
               domElement.textContent,
               nextProp,
@@ -1028,7 +1026,7 @@ export function diffHydratedProperties(
         isCustomComponentTag && enableCustomElementPropertySupport
           ? null
           : getPropertyInfo(propKey);
-      if (suppressHydrationWarning) {
+      if (rawProps[SUPPRESS_HYDRATION_WARNING] === true) {
         // Don't bother comparing. We're ignoring all these warnings.
       } else if (
         propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
@@ -1150,8 +1148,11 @@ export function diffHydratedProperties(
 
   if (__DEV__) {
     if (shouldWarnDev) {
-      // $FlowFixMe - Should be inferred as not undefined.
-      if (extraAttributeNames.size > 0 && !suppressHydrationWarning) {
+      if (
+        // $FlowFixMe - Should be inferred as not undefined.
+        extraAttributeNames.size > 0 &&
+        rawProps[SUPPRESS_HYDRATION_WARNING] !== true
+      ) {
         // $FlowFixMe - Should be inferred as not undefined.
         warnForExtraAttributes(extraAttributeNames);
       }
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 8ded833556c9..925f7088e4b0 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -132,10 +132,7 @@ type SelectionInformation = {|
   selectionRange: mixed,
 |};
 
-let SUPPRESS_HYDRATION_WARNING;
-if (__DEV__) {
-  SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
-}
+const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
 
 const SUSPENSE_START_DATA = '$';
 const SUSPENSE_END_DATA = '/$';

From 5f7f5280836a44d4b81c1cb13f51e7482470cf1b Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Tue, 5 Apr 2022 00:04:15 +0100
Subject: [PATCH 1262/1603] Add more tests for suppressHydrationWarning
 (#24275)

* More tests for suppressHydrationWarning

* Move suppressHydration tests to new file

* Extract more tests

* Test name

* Test legacy behavior too
---
 .../src/__tests__/ReactDOMFizzServer-test.js  |  92 ---
 ...actDOMFizzSuppressHydrationWarning-test.js | 698 ++++++++++++++++++
 2 files changed, 698 insertions(+), 92 deletions(-)
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index d4687ab4d365..295e99b26a69 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2811,96 +2811,4 @@ describe('ReactDOMFizzServer', () => {
       </ul>,
     );
   });
-
-  // @gate experimental
-  it('suppresses and fixes text mismatches with suppressHydrationWarning', async () => {
-    function App({isClient}) {
-      return (
-        <div>
-          <span
-            suppressHydrationWarning={true}
-            data-attr={isClient ? 'client-attr' : 'server-attr'}>
-            {isClient ? 'Client Text' : 'Server Text'}
-          </span>
-          <span suppressHydrationWarning={true}>{isClient ? 2 : 1}</span>
-          <span suppressHydrationWarning={true}>
-            hello,{isClient ? 'client' : 'server'}
-          </span>
-        </div>
-      );
-    }
-    await act(async () => {
-      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
-        <App isClient={false} />,
-      );
-      pipe(writable);
-    });
-    expect(getVisibleChildren(container)).toEqual(
-      <div>
-        <span data-attr="server-attr">Server Text</span>
-        <span>1</span>
-        <span>
-          {'hello,'}
-          {'server'}
-        </span>
-      </div>,
-    );
-    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-      onRecoverableError(error) {
-        // Don't miss a hydration error. There should be none.
-        Scheduler.unstable_yieldValue(error.message);
-      },
-    });
-    expect(Scheduler).toFlushAndYield([]);
-    // The text mismatch should be *silently* fixed. Even in production.
-    // The attribute mismatch should be ignored and not fixed.
-    expect(getVisibleChildren(container)).toEqual(
-      <div>
-        <span data-attr="server-attr">Client Text</span>
-        <span>2</span>
-        <span>
-          {'hello,'}
-          {'client'}
-        </span>
-      </div>,
-    );
-  });
-
-  // @gate experimental
-  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(async () => {
-      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.unstable_yieldValue(error.message);
-      },
-    });
-    expect(Scheduler).toFlushAndYield([]);
-    expect(getVisibleChildren(container)).toEqual(
-      <div>
-        <p>Server HTML</p>
-      </div>,
-    );
-  });
 });
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 000000000000..f6e6d3222b90
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
@@ -0,0 +1,698 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+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;
+
+describe('ReactDOMFizzServerHydrationWarning', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    JSDOM = require('jsdom').JSDOM;
+    Scheduler = require('scheduler');
+    React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    if (__EXPERIMENTAL__) {
+      ReactDOMFizzServer = require('react-dom/server');
+    }
+    Stream = require('stream');
+
+    // 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;
+  }
+
+  // @gate experimental
+  it('suppresses and fixes 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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    // The text mismatch should be *silently* fixed. Even in production.
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>Client Text</span>
+        <span>2</span>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  it('suppresses and fixes 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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          {'Client1'}
+          {'Client2'}
+        </span>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        expect(Scheduler).toFlushAndYield([
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
+      }).toErrorDev(
+        [
+          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        ],
+        {withoutStack: true},
+      );
+    } else {
+      // This used to not warn.
+      expect(Scheduler).toFlushAndYield([]);
+    }
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          Hello, <span>Client</span>!
+        </span>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  it('suppresses and fixes client-only single text node mismatches with suppressHydrationWarning', async () => {
+    function App({isClient}) {
+      return (
+        <div>
+          <span suppressHydrationWarning={true}>
+            {isClient ? 'Client' : null}
+          </span>
+        </div>
+      );
+    }
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App isClient={false} />,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span />
+      </div>,
+    );
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        Scheduler.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>{'Client'}</span>
+      </div>,
+    );
+  });
+
+  // TODO: This behavior is not consistent with client-only single text node.
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        expect(Scheduler).toFlushAndYield([
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
+      }).toErrorDev(
+        [
+          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        ],
+        {withoutStack: true},
+      );
+    } else {
+      // This used to not warn.
+      expect(Scheduler).toFlushAndYield([]);
+    }
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span />
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        expect(Scheduler).toFlushAndYield([
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
+      }).toErrorDev(
+        [
+          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        ],
+        {withoutStack: true},
+      );
+    } else {
+      // This used to not warn.
+      expect(Scheduler).toFlushAndYield([]);
+    }
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          <span>Shared</span>
+          {'Client'}
+        </span>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        expect(Scheduler).toFlushAndYield([
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
+      }).toErrorDev(
+        [
+          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        ],
+        {withoutStack: true},
+      );
+    } else {
+      // This used to not warn.
+      expect(Scheduler).toFlushAndYield([]);
+    }
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          <span>Shared</span>
+        </span>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        expect(Scheduler).toFlushAndYield([
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
+      }).toErrorDev(
+        [
+          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        ],
+        {withoutStack: true},
+      );
+    } else {
+      // This used to not warn.
+      expect(Scheduler).toFlushAndYield([]);
+    }
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span>
+          {'Hello, '}
+          {'Client'}
+          {'!'}
+        </span>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  it('suppresses and 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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <span class="server" style="opacity:0" data-serveronly="server-only" />
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Server HTML</p>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        expect(Scheduler).toFlushAndYield([
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
+      }).toErrorDev(
+        [
+          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        ],
+        {withoutStack: true},
+      );
+    } else {
+      // This used to not warn.
+      expect(Scheduler).toFlushAndYield([]);
+    }
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Client and server</p>
+        <p>Client only</p>
+      </div>,
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      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.unstable_yieldValue(error.message);
+      },
+    });
+    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      expect(() => {
+        expect(Scheduler).toFlushAndYield([
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
+      }).toErrorDev(
+        [
+          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        ],
+        {withoutStack: true},
+      );
+    } else {
+      // This used to not warn.
+      expect(Scheduler).toFlushAndYield([]);
+    }
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>Client and server</p>
+      </div>,
+    );
+  });
+});

From 9ededef945f032fa6257711d45a4f198bfdf1633 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Tue, 5 Apr 2022 02:11:22 +0100
Subject: [PATCH 1263/1603] Don't mute hydration errors forcing client render
 (#24276)

* Don't mute hydration errors forcing client render

* Nits
---
 ...actDOMFizzSuppressHydrationWarning-test.js | 21 ++++++---
 .../src/client/ReactDOMHostConfig.js          | 43 +++++++++++++------
 .../src/ReactFiberHydrationContext.new.js     | 34 ++++++++++++---
 .../src/ReactFiberHydrationContext.old.js     | 34 ++++++++++++---
 4 files changed, 99 insertions(+), 33 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
index f6e6d3222b90..4f65ecf241c8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
@@ -248,9 +248,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         ]);
       }).toErrorDev(
         [
+          'Expected server HTML to contain a matching <span> in <span>',
           'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
-        {withoutStack: true},
+        {withoutStack: 1},
       );
     } else {
       // This used to not warn.
@@ -336,9 +337,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         ]);
       }).toErrorDev(
         [
+          'Did not expect server HTML to contain the text node "Server" in <span>',
           'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
-        {withoutStack: true},
+        {withoutStack: 1},
       );
     } else {
       // This used to not warn.
@@ -389,9 +391,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         ]);
       }).toErrorDev(
         [
+          'Expected server HTML to contain a matching text node for "Client" in <span>.',
           'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
-        {withoutStack: true},
+        {withoutStack: 1},
       );
     } else {
       // This used to not warn.
@@ -445,9 +448,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         ]);
       }).toErrorDev(
         [
+          'Did not expect server HTML to contain the text node "Server" in <span>.',
           'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
-        {withoutStack: true},
+        {withoutStack: 1},
       );
     } else {
       // This used to not warn.
@@ -500,9 +504,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         ]);
       }).toErrorDev(
         [
+          'Expected server HTML to contain a matching text node for "Client" in <span>.',
           'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
-        {withoutStack: true},
+        {withoutStack: 1},
       );
     } else {
       // This used to not warn.
@@ -630,9 +635,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         ]);
       }).toErrorDev(
         [
+          'Expected server HTML to contain a matching <p> in <div>.',
           'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
-        {withoutStack: true},
+        {withoutStack: 1},
       );
     } else {
       // This used to not warn.
@@ -681,9 +687,10 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         ]);
       }).toErrorDev(
         [
+          'Did not expect server HTML to contain a <p> in <div>.',
           'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
         ],
-        {withoutStack: true},
+        {withoutStack: 1},
       );
     } else {
       // This used to not warn.
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 925f7088e4b0..d27bdff4305a 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -62,6 +62,7 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
+  enableClientRenderFallbackOnHydrationMismatch,
   enableSuspenseServerRenderer,
   enableCreateEventHandleAPI,
   enableScopeAPI,
@@ -1004,14 +1005,20 @@ export function didNotHydrateInstance(
   parentProps: Props,
   parentInstance: Instance,
   instance: HydratableInstance,
+  isConcurrentMode: boolean,
 ) {
-  if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    if (instance.nodeType === ELEMENT_NODE) {
-      warnForDeletedHydratableElement(parentInstance, (instance: any));
-    } else if (instance.nodeType === COMMENT_NODE) {
-      // TODO: warnForDeletedHydratableSuspenseBoundary
-    } else {
-      warnForDeletedHydratableText(parentInstance, (instance: any));
+  if (__DEV__) {
+    if (
+      (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
+      parentProps[SUPPRESS_HYDRATION_WARNING] !== true
+    ) {
+      if (instance.nodeType === ELEMENT_NODE) {
+        warnForDeletedHydratableElement(parentInstance, (instance: any));
+      } else if (instance.nodeType === COMMENT_NODE) {
+        // TODO: warnForDeletedHydratableSuspenseBoundary
+      } else {
+        warnForDeletedHydratableText(parentInstance, (instance: any));
+      }
     }
   }
 }
@@ -1082,9 +1089,15 @@ export function didNotFindHydratableInstance(
   parentInstance: Instance,
   type: string,
   props: Props,
+  isConcurrentMode: boolean,
 ) {
-  if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    warnForInsertedHydratedElement(parentInstance, type, props);
+  if (__DEV__) {
+    if (
+      (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
+      parentProps[SUPPRESS_HYDRATION_WARNING] !== true
+    ) {
+      warnForInsertedHydratedElement(parentInstance, type, props);
+    }
   }
 }
 
@@ -1093,9 +1106,15 @@ export function didNotFindHydratableTextInstance(
   parentProps: Props,
   parentInstance: Instance,
   text: string,
+  isConcurrentMode: boolean,
 ) {
-  if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    warnForInsertedHydratedText(parentInstance, text);
+  if (__DEV__) {
+    if (
+      (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
+      parentProps[SUPPRESS_HYDRATION_WARNING] !== true
+    ) {
+      warnForInsertedHydratedText(parentInstance, text);
+    }
   }
 }
 
@@ -1104,7 +1123,7 @@ export function didNotFindHydratableSuspenseInstance(
   parentProps: Props,
   parentInstance: Instance,
 ) {
-  if (__DEV__ && parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
+  if (__DEV__) {
     // TODO: warnForInsertedHydratedSuspense(parentInstance);
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 6a7a175d6cff..94ca9e61eec1 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -148,21 +148,26 @@ function warnUnhydratedInstance(
 ) {
   if (__DEV__) {
     switch (returnFiber.tag) {
-      case HostRoot:
+      case HostRoot: {
         didNotHydrateInstanceWithinContainer(
           returnFiber.stateNode.containerInfo,
           instance,
         );
         break;
-      case HostComponent:
+      }
+      case HostComponent: {
+        const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;
         didNotHydrateInstance(
           returnFiber.type,
           returnFiber.memoizedProps,
           returnFiber.stateNode,
           instance,
+          // TODO: Delete this argument when we remove the legacy root API.
+          isConcurrentMode,
         );
         break;
-      case SuspenseComponent:
+      }
+      case SuspenseComponent: {
         const suspenseState: SuspenseState = returnFiber.memoizedState;
         if (suspenseState.dehydrated !== null)
           didNotHydrateInstanceWithinSuspenseInstance(
@@ -170,6 +175,7 @@ function warnUnhydratedInstance(
             instance,
           );
         break;
+      }
     }
   }
 }
@@ -234,33 +240,44 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
         const parentProps = returnFiber.memoizedProps;
         const parentInstance = returnFiber.stateNode;
         switch (fiber.tag) {
-          case HostComponent:
+          case HostComponent: {
             const type = fiber.type;
             const props = fiber.pendingProps;
+            const isConcurrentMode =
+              (returnFiber.mode & ConcurrentMode) !== NoMode;
             didNotFindHydratableInstance(
               parentType,
               parentProps,
               parentInstance,
               type,
               props,
+              // TODO: Delete this argument when we remove the legacy root API.
+              isConcurrentMode,
             );
             break;
-          case HostText:
+          }
+          case HostText: {
             const text = fiber.pendingProps;
+            const isConcurrentMode =
+              (returnFiber.mode & ConcurrentMode) !== NoMode;
             didNotFindHydratableTextInstance(
               parentType,
               parentProps,
               parentInstance,
               text,
+              // TODO: Delete this argument when we remove the legacy root API.
+              isConcurrentMode,
             );
             break;
-          case SuspenseComponent:
+          }
+          case SuspenseComponent: {
             didNotFindHydratableSuspenseInstance(
               parentType,
               parentProps,
               parentInstance,
             );
             break;
+          }
         }
         break;
       }
@@ -476,10 +493,11 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
     // hydration parent is the parent host component of this host text.
     const returnFiber = hydrationParentFiber;
     if (returnFiber !== null) {
-      const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;
       switch (returnFiber.tag) {
         case HostRoot: {
           const parentContainer = returnFiber.stateNode.containerInfo;
+          const isConcurrentMode =
+            (returnFiber.mode & ConcurrentMode) !== NoMode;
           didNotMatchHydratedContainerTextInstance(
             parentContainer,
             textInstance,
@@ -493,6 +511,8 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
           const parentType = returnFiber.type;
           const parentProps = returnFiber.memoizedProps;
           const parentInstance = returnFiber.stateNode;
+          const isConcurrentMode =
+            (returnFiber.mode & ConcurrentMode) !== NoMode;
           didNotMatchHydratedTextInstance(
             parentType,
             parentProps,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 8c334924943a..6af68fe66a79 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -148,21 +148,26 @@ function warnUnhydratedInstance(
 ) {
   if (__DEV__) {
     switch (returnFiber.tag) {
-      case HostRoot:
+      case HostRoot: {
         didNotHydrateInstanceWithinContainer(
           returnFiber.stateNode.containerInfo,
           instance,
         );
         break;
-      case HostComponent:
+      }
+      case HostComponent: {
+        const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;
         didNotHydrateInstance(
           returnFiber.type,
           returnFiber.memoizedProps,
           returnFiber.stateNode,
           instance,
+          // TODO: Delete this argument when we remove the legacy root API.
+          isConcurrentMode,
         );
         break;
-      case SuspenseComponent:
+      }
+      case SuspenseComponent: {
         const suspenseState: SuspenseState = returnFiber.memoizedState;
         if (suspenseState.dehydrated !== null)
           didNotHydrateInstanceWithinSuspenseInstance(
@@ -170,6 +175,7 @@ function warnUnhydratedInstance(
             instance,
           );
         break;
+      }
     }
   }
 }
@@ -234,33 +240,44 @@ function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
         const parentProps = returnFiber.memoizedProps;
         const parentInstance = returnFiber.stateNode;
         switch (fiber.tag) {
-          case HostComponent:
+          case HostComponent: {
             const type = fiber.type;
             const props = fiber.pendingProps;
+            const isConcurrentMode =
+              (returnFiber.mode & ConcurrentMode) !== NoMode;
             didNotFindHydratableInstance(
               parentType,
               parentProps,
               parentInstance,
               type,
               props,
+              // TODO: Delete this argument when we remove the legacy root API.
+              isConcurrentMode,
             );
             break;
-          case HostText:
+          }
+          case HostText: {
             const text = fiber.pendingProps;
+            const isConcurrentMode =
+              (returnFiber.mode & ConcurrentMode) !== NoMode;
             didNotFindHydratableTextInstance(
               parentType,
               parentProps,
               parentInstance,
               text,
+              // TODO: Delete this argument when we remove the legacy root API.
+              isConcurrentMode,
             );
             break;
-          case SuspenseComponent:
+          }
+          case SuspenseComponent: {
             didNotFindHydratableSuspenseInstance(
               parentType,
               parentProps,
               parentInstance,
             );
             break;
+          }
         }
         break;
       }
@@ -476,10 +493,11 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
     // hydration parent is the parent host component of this host text.
     const returnFiber = hydrationParentFiber;
     if (returnFiber !== null) {
-      const isConcurrentMode = (returnFiber.mode & ConcurrentMode) !== NoMode;
       switch (returnFiber.tag) {
         case HostRoot: {
           const parentContainer = returnFiber.stateNode.containerInfo;
+          const isConcurrentMode =
+            (returnFiber.mode & ConcurrentMode) !== NoMode;
           didNotMatchHydratedContainerTextInstance(
             parentContainer,
             textInstance,
@@ -493,6 +511,8 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
           const parentType = returnFiber.type;
           const parentProps = returnFiber.memoizedProps;
           const parentInstance = returnFiber.stateNode;
+          const isConcurrentMode =
+            (returnFiber.mode & ConcurrentMode) !== NoMode;
           didNotMatchHydratedTextInstance(
             parentType,
             parentProps,

From 1d1fa94a66275c42b5339dabf9985379a0c74a23 Mon Sep 17 00:00:00 2001
From: alireza molaee <alirezamolaii@gmail.com>
Date: Tue, 5 Apr 2022 06:26:18 +0430
Subject: [PATCH 1264/1603] Fix false positive warning about react-dom/client
 with UMD builds (#24274)

---
 packages/react-dom/src/client/ReactDOM.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 1d78dc08dea9..9ec6f67cbd7d 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -149,7 +149,7 @@ function createRoot(
   options?: CreateRootOptions,
 ): RootType {
   if (__DEV__) {
-    if (!Internals.usingClientEntryPoint) {
+    if (!Internals.usingClientEntryPoint && !__UMD__) {
       console.error(
         'You are importing createRoot from "react-dom" which is not supported. ' +
           'You should instead import it from "react-dom/client".',
@@ -165,7 +165,7 @@ function hydrateRoot(
   options?: HydrateRootOptions,
 ): RootType {
   if (__DEV__) {
-    if (!Internals.usingClientEntryPoint) {
+    if (!Internals.usingClientEntryPoint && !__UMD__) {
       console.error(
         'You are importing hydrateRoot from "react-dom" which is not supported. ' +
           'You should instead import it from "react-dom/client".',

From af730436c05a2fb2c6d8a334c578fc347392ba38 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 5 Apr 2022 03:59:26 +0200
Subject: [PATCH 1265/1603] test: Update attribute fixture snapshot (#24083)

* test: Update attribute fixture snapshot

* Poke CircleCI

* Poke CircleCI
---
 .../AttributeTableSnapshot.md                  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index cbaadbca7769..52a6bc31ab31 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -9787,14 +9787,14 @@
 | `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)`| (initial, warning)| `<empty string>` |
+| `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)`| (initial, warning)| `<empty string>` |
-| `src=(function)`| (initial, warning)| `<empty string>` |
+| `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>` |
 
@@ -11980,21 +11980,21 @@
 | `value=(empty string)`| (initial)| `<empty string>` |
 | `value=(array with string)`| (changed)| `"string"` |
 | `value=(empty array)`| (initial)| `<empty string>` |
-| `value=(object)`| (changed, ssr error, ssr mismatch)| `"result of toString()"` |
+| `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, ssr mismatch)| `"true"` |
-| `value=(false)`| (changed, ssr mismatch)| `"false"` |
+| `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=(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>` |
 
@@ -12018,7 +12018,7 @@
 | `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=(symbol)`| (initial, warning)| `<empty string>` |
 | `value=(function)`| (initial, warning)| `<empty string>` |
 | `value=(null)`| (initial)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |

From ece5295e5af992d30256f26ca428abdad514f862 Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Thu, 7 Apr 2022 00:42:53 +0800
Subject: [PATCH 1266/1603] Remove unnecessary flag check (#24284)

---
 packages/react-reconciler/src/ReactFiberBeginWork.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberBeginWork.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 32da430eef07..b9a35475e693 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1399,7 +1399,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     } else {
       // The outermost shell has not hydrated yet. Start hydrating.
       enterHydrationState(workInProgress);
-      if (enableUseMutableSource && supportsHydration) {
+      if (enableUseMutableSource) {
         const mutableSourceEagerHydrationData =
           root.mutableSourceEagerHydrationData;
         if (mutableSourceEagerHydrationData != null) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 45aa1cd43ba9..42641c85dd06 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1399,7 +1399,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     } else {
       // The outermost shell has not hydrated yet. Start hydrating.
       enterHydrationState(workInProgress);
-      if (enableUseMutableSource && supportsHydration) {
+      if (enableUseMutableSource) {
         const mutableSourceEagerHydrationData =
           root.mutableSourceEagerHydrationData;
         if (mutableSourceEagerHydrationData != null) {

From 4bc465a16f3270283886221604c1187fc976859b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 6 Apr 2022 19:27:38 -0400
Subject: [PATCH 1267/1603] Rename Controls to PipeableStream (#24286)

This type isn't exported so it's technically not public.

This object mimics a ReadableStream.

Currently this is safe to destructure and call separately but I'm not sure
that's even guaranteed. It should probably be treated as a class in docs.
---
 packages/react-dom/src/server/ReactDOMFizzServerNode.js       | 4 ++--
 .../react-server-dom-webpack/src/ReactFlightDOMServerNode.js  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 306724c448b0..efc6cd817b05 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -46,7 +46,7 @@ type Options = {|
   onError?: (error: mixed) => void,
 |};
 
-type Controls = {|
+type PipeableStream = {|
   // Cancel any pending I/O and put anything remaining into
   // client rendered mode.
   abort(): void,
@@ -76,7 +76,7 @@ function createRequestImpl(children: ReactNodeList, options: void | Options) {
 function renderToPipeableStream(
   children: ReactNodeList,
   options?: Options,
-): Controls {
+): PipeableStream {
   const request = createRequestImpl(children, options);
   let hasStartedFlowing = false;
   startWork(request);
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index c088725f2590..76952b6d5425 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -26,7 +26,7 @@ type Options = {
   onError?: (error: mixed) => void,
 };
 
-type Controls = {|
+type PipeableStream = {|
   pipe<T: Writable>(destination: T): T,
 |};
 
@@ -35,7 +35,7 @@ function renderToPipeableStream(
   webpackMap: BundlerConfig,
   options?: Options,
   context?: Array<[string, ServerContextJSONValue]>,
-): Controls {
+): PipeableStream {
   const request = createRequest(
     model,
     webpackMap,

From bb49abea2377d6391a98cef536e9da4c26ddaa39 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 7 Apr 2022 02:35:01 +0100
Subject: [PATCH 1268/1603] Update some READMEs (#24290)

* Update some READMEs

* Update README.md
---
 packages/react-dom/README.md               | 36 ++++++++++++++--------
 packages/react/README.md                   | 28 +++++++++++++++--
 packages/use-sync-external-store/README.md |  4 +--
 3 files changed, 51 insertions(+), 17 deletions(-)

diff --git a/packages/react-dom/README.md b/packages/react-dom/README.md
index f31dc407837b..44787a5093fc 100644
--- a/packages/react-dom/README.md
+++ b/packages/react-dom/README.md
@@ -13,38 +13,48 @@ npm install react react-dom
 ### In the browser
 
 ```js
-var React = require('react');
-var ReactDOM = require('react-dom');
+import { createRoot } from 'react-dom';
 
-function MyComponent() {
+function App() {
   return <div>Hello World</div>;
 }
 
-ReactDOM.render(<MyComponent />, node);
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
 ```
 
 ### On the server
 
 ```js
-var React = require('react');
-var ReactDOMServer = require('react-dom/server');
+import { renderToPipeableStream } from 'react-dom/server';
 
-function MyComponent() {
+function App() {
   return <div>Hello World</div>;
 }
 
-ReactDOMServer.renderToString(<MyComponent />);
+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`
 
-- `findDOMNode`
-- `render`
-- `unmountComponentAtNode`
+See https://reactjs.org/docs/react-dom.html
+
+### `react-dom/client`
+
+See https://reactjs.org/docs/react-dom-client.html
 
 ### `react-dom/server`
 
-- `renderToString`
-- `renderToStaticMarkup`
+See https://reactjs.org/docs/react-dom-server.html
diff --git a/packages/react/README.md b/packages/react/README.md
index 0033e23bd887..493f9c83395d 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -6,8 +6,32 @@ The `react` package contains only the functionality necessary to define React co
 
 **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.
 
-## Example Usage
+## Usage
 
 ```js
-var React = require('react');
+import { useState } from 'react';
+import { createRoot } from 'react-dom';
+
+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(<App />);
 ```
+
+## Documentation
+
+See https://reactjs.org/
+
+## API
+
+See https://reactjs.org/docs/react-api.html
diff --git a/packages/use-sync-external-store/README.md b/packages/use-sync-external-store/README.md
index c799272a93ef..e9987a399b65 100644
--- a/packages/use-sync-external-store/README.md
+++ b/packages/use-sync-external-store/README.md
@@ -1,5 +1,5 @@
 # use-sync-external-store
 
-Backwards compatible shim for React's `useSyncExternalStore`. Works with any React that supports hooks.
+Backwards-compatible shim for [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). Works with any React that supports Hooks.
 
-Until `useSyncExternalStore` is documented, refer to https://github.com/reactwg/react-18/discussions/86
+See also https://github.com/reactwg/react-18/discussions/86.

From 3e8c91c5f8e142f341b407bdebfe4fe4e0930914 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 7 Apr 2022 13:46:36 +0100
Subject: [PATCH 1269/1603] Fix import in README

---
 packages/react-dom/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/README.md b/packages/react-dom/README.md
index 44787a5093fc..ecba5cfbd4c1 100644
--- a/packages/react-dom/README.md
+++ b/packages/react-dom/README.md
@@ -13,7 +13,7 @@ npm install react react-dom
 ### In the browser
 
 ```js
-import { createRoot } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 function App() {
   return <div>Hello World</div>;

From e8f4a6653dc3f5d9702236a3abed887ca44dcfbb Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 7 Apr 2022 14:12:58 +0100
Subject: [PATCH 1270/1603] Fix import in example

---
 packages/react/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/README.md b/packages/react/README.md
index 493f9c83395d..826563e1b9a1 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -10,7 +10,7 @@ The `react` package contains only the functionality necessary to define React co
 
 ```js
 import { useState } from 'react';
-import { createRoot } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 function Counter() {
   const [count, setCount] = useState(0);

From 0579154772af551bfccf9ff0cc7076a39316344a Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 7 Apr 2022 16:41:38 +0100
Subject: [PATCH 1271/1603] Update create-subscription README (#24294)

---
 packages/create-subscription/README.md | 29 ++------------------------
 1 file changed, 2 insertions(+), 27 deletions(-)

diff --git a/packages/create-subscription/README.md b/packages/create-subscription/README.md
index 39248568a033..281683786adc 100644
--- a/packages/create-subscription/README.md
+++ b/packages/create-subscription/README.md
@@ -1,33 +1,8 @@
 # create-subscription
 
-`create-subscription` is a utility for subscribing to external data sources inside React components. It is officially supported and maintained by the React team.
+`create-subscription` is a utility for subscribing to external data sources inside React components.
 
-## When should you NOT use this?
-
-This utility should be used for subscriptions to a single value that are typically only read in one place and may update frequently (e.g. a component that subscribes to a geolocation API to show a dot on a map).
-
-Other cases have **better long-term solutions**:
-* Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
-* I/O subscriptions (e.g. notifications) that update infrequently should use [`react-cache`](https://github.com/facebook/react/blob/main/packages/react-cache/README.md) instead.
-* Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
-
-## Limitations in async mode
-
-The main motivation for `create-subscription` is to provide a way for library authors to ensure compatibility with React's upcoming asynchronous rendering mode. `create-subscription` guarantees correctness in async mode, accounting for the subtle bugs and edge cases that a library author might otherwise miss.
-
-However, [it achieves correctness by sometimes de-opting to synchronous mode](https://github.com/facebook/react/issues/13186#issuecomment-403959161), obviating the benefits of async rendering. This is an inherent limitation of storing state outside of React's managed state queue and rendering in response to a change event.
-
-The effect of de-opting to sync mode is that the main thread may periodically be blocked (in the case of CPU-bound work), and placeholders may appear earlier than desired (in the case of IO-bound work).
-
-For **full compatibility** with asynchronous rendering, including both **time-slicing** and **React Suspense**, the suggested longer-term solution is to move to one of the patterns described in the previous section.
-
-## What types of subscriptions can this support?
-
-This abstraction can handle a variety of subscription types, including:
-* Event dispatchers like `HTMLInputElement`.
-* Custom pub/sub components like Relay's `FragmentSpecResolver`.
-* Observable types like RxJS `BehaviorSubject` and `ReplaySubject`. (Types like RxJS `Subject` or `Observable` are not supported, because they provide no way to read the "current" value after it has been emitted.)
-* Native Promises.
+**It is no longer maintained and will not be updated. Use the built-in [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore) instead.**
 
 # Installation
 

From d68b09defca37c30d3a7a34d4de884e374c74858 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 7 Apr 2022 18:06:35 +0100
Subject: [PATCH 1272/1603] Fix warning about setState in useEffect (#24295)

* Fix warning about setState in useEffect

* Fix test

* Fix multiple roots
---
 .../src/ReactFiberWorkLoop.new.js             | 38 +++++++++++++++++--
 .../src/ReactFiberWorkLoop.old.js             | 38 +++++++++++++++++--
 2 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 4da17c7bb6e8..3f4071164df5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -396,9 +396,12 @@ let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
 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;
 
 // If two updates are scheduled within the same event, we should treat their
 // event times as simultaneous, even if the actual clock time has advanced
@@ -522,6 +525,12 @@ export function scheduleUpdateOnFiber(
     return null;
   }
 
+  if (__DEV__) {
+    if (isFlushingPassiveEffects) {
+      didScheduleUpdateDuringPassiveEffects = true;
+    }
+  }
+
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
@@ -2204,6 +2213,10 @@ function commitRootImpl(
     // There were no passive effects, so we can immediately release the cache
     // pool for this render.
     releaseRootPooledCache(root, remainingLanes);
+    if (__DEV__) {
+      nestedPassiveUpdateCount = 0;
+      rootWithPassiveNestedUpdates = null;
+    }
   }
 
   // Read this again, since an effect might have updated it
@@ -2420,6 +2433,9 @@ function flushPassiveEffectsImpl() {
   }
 
   if (__DEV__) {
+    isFlushingPassiveEffects = true;
+    didScheduleUpdateDuringPassiveEffects = false;
+
     if (enableDebugTracing) {
       logPassiveEffectsStarted(lanes);
     }
@@ -2463,10 +2479,22 @@ function flushPassiveEffectsImpl() {
 
   flushSyncCallbacks();
 
-  // If additional passive effects were scheduled, increment a counter. If this
-  // exceeds the limit, we'll fire a warning.
-  nestedPassiveUpdateCount =
-    rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;
+  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;
+  }
 
   // TODO: Move to commitPassiveMountEffects
   onPostCommitRootDevTools(root);
@@ -2739,6 +2767,8 @@ function checkForNestedUpdates() {
   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 " +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 2c940a71001d..604a585406ae 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -396,9 +396,12 @@ let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
 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;
 
 // If two updates are scheduled within the same event, we should treat their
 // event times as simultaneous, even if the actual clock time has advanced
@@ -522,6 +525,12 @@ export function scheduleUpdateOnFiber(
     return null;
   }
 
+  if (__DEV__) {
+    if (isFlushingPassiveEffects) {
+      didScheduleUpdateDuringPassiveEffects = true;
+    }
+  }
+
   // Mark that the root has a pending update.
   markRootUpdated(root, lane, eventTime);
 
@@ -2204,6 +2213,10 @@ function commitRootImpl(
     // There were no passive effects, so we can immediately release the cache
     // pool for this render.
     releaseRootPooledCache(root, remainingLanes);
+    if (__DEV__) {
+      nestedPassiveUpdateCount = 0;
+      rootWithPassiveNestedUpdates = null;
+    }
   }
 
   // Read this again, since an effect might have updated it
@@ -2420,6 +2433,9 @@ function flushPassiveEffectsImpl() {
   }
 
   if (__DEV__) {
+    isFlushingPassiveEffects = true;
+    didScheduleUpdateDuringPassiveEffects = false;
+
     if (enableDebugTracing) {
       logPassiveEffectsStarted(lanes);
     }
@@ -2463,10 +2479,22 @@ function flushPassiveEffectsImpl() {
 
   flushSyncCallbacks();
 
-  // If additional passive effects were scheduled, increment a counter. If this
-  // exceeds the limit, we'll fire a warning.
-  nestedPassiveUpdateCount =
-    rootWithPendingPassiveEffects === null ? 0 : nestedPassiveUpdateCount + 1;
+  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;
+  }
 
   // TODO: Move to commitPassiveMountEffects
   onPostCommitRootDevTools(root);
@@ -2739,6 +2767,8 @@ function checkForNestedUpdates() {
   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 " +

From 548b542b41565340a9ffd36d0d4e5e1d244cc113 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 7 Apr 2022 21:06:54 +0200
Subject: [PATCH 1273/1603] Update renderToPipeableStream#options.onShellError
 to match usage (#24299)

---
 packages/react-dom/src/server/ReactDOMFizzServerNode.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index efc6cd817b05..b3d9642e77ae 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -41,7 +41,7 @@ type Options = {|
   bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   onShellReady?: () => void,
-  onShellError?: () => void,
+  onShellError?: (error: mixed) => void,
   onAllReady?: () => void,
   onError?: (error: mixed) => void,
 |};

From f56dfe950b206651913bf0b836c10592c393357d Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 7 Apr 2022 20:12:49 +0100
Subject: [PATCH 1274/1603] Warn on setState() in useInsertionEffect() (#24298)

* Warn on setState() in useInsertionEffect()

* Use existing DEV reset mechanism
---
 .../src/ReactFiberCommitWork.new.js           | 21 +++++
 .../src/ReactFiberCommitWork.old.js           | 21 +++++
 .../src/ReactFiberWorkLoop.new.js             | 17 ++++
 .../src/ReactFiberWorkLoop.old.js             | 17 ++++
 .../ReactHooksWithNoopRenderer-test.js        | 81 +++++++++++++++++++
 5 files changed, 157 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index fb6040109518..d1bbdcdde156 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -136,6 +136,7 @@ import {
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -536,7 +537,17 @@ function commitHookEffectListUnmount(
             }
           }
 
+          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) {
@@ -570,7 +581,17 @@ function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
 
         // Mount
         const create = effect.create;
+        if (__DEV__) {
+          if ((flags & HookInsertion) !== NoHookEffect) {
+            setIsRunningInsertionEffect(true);
+          }
+        }
         effect.destroy = create();
+        if (__DEV__) {
+          if ((flags & HookInsertion) !== NoHookEffect) {
+            setIsRunningInsertionEffect(false);
+          }
+        }
 
         if (enableSchedulingProfiler) {
           if ((flags & HookPassive) !== NoHookEffect) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index e962039d9ca9..bff8b2781310 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -136,6 +136,7 @@ import {
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.old';
 import {
   NoFlags as NoHookEffect,
@@ -536,7 +537,17 @@ function commitHookEffectListUnmount(
             }
           }
 
+          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) {
@@ -570,7 +581,17 @@ function commitHookEffectListMount(flags: HookFlags, finishedWork: Fiber) {
 
         // Mount
         const create = effect.create;
+        if (__DEV__) {
+          if ((flags & HookInsertion) !== NoHookEffect) {
+            setIsRunningInsertionEffect(true);
+          }
+        }
         effect.destroy = create();
+        if (__DEV__) {
+          if ((flags & HookInsertion) !== NoHookEffect) {
+            setIsRunningInsertionEffect(false);
+          }
+        }
 
         if (enableSchedulingProfiler) {
           if ((flags & HookPassive) !== NoHookEffect) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 3f4071164df5..75d9c76b55d1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -409,6 +409,8 @@ let rootWithPassiveNestedUpdates: FiberRoot | null = null;
 let currentEventTime: number = NoTimestamp;
 let currentEventTransitionLane: Lanes = NoLanes;
 
+let isRunningInsertionEffect = false;
+
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -520,6 +522,12 @@ export function scheduleUpdateOnFiber(
 ): FiberRoot | null {
   checkForNestedUpdates();
 
+  if (__DEV__) {
+    if (isRunningInsertionEffect) {
+      console.error('useInsertionEffect must not schedule updates.');
+    }
+  }
+
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
@@ -2551,6 +2559,9 @@ export function captureCommitPhaseError(
   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.
@@ -3162,3 +3173,9 @@ function warnIfSuspenseResolutionNotWrappedWithActDEV(root: FiberRoot): void {
     }
   }
 }
+
+export function setIsRunningInsertionEffect(isRunning: boolean): void {
+  if (__DEV__) {
+    isRunningInsertionEffect = isRunning;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 604a585406ae..17bfc935bc90 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -409,6 +409,8 @@ let rootWithPassiveNestedUpdates: FiberRoot | null = null;
 let currentEventTime: number = NoTimestamp;
 let currentEventTransitionLane: Lanes = NoLanes;
 
+let isRunningInsertionEffect = false;
+
 export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
@@ -520,6 +522,12 @@ export function scheduleUpdateOnFiber(
 ): FiberRoot | null {
   checkForNestedUpdates();
 
+  if (__DEV__) {
+    if (isRunningInsertionEffect) {
+      console.error('useInsertionEffect must not schedule updates.');
+    }
+  }
+
   const root = markUpdateLaneFromFiberToRoot(fiber, lane);
   if (root === null) {
     return null;
@@ -2551,6 +2559,9 @@ export function captureCommitPhaseError(
   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.
@@ -3162,3 +3173,9 @@ function warnIfSuspenseResolutionNotWrappedWithActDEV(root: FiberRoot): void {
     }
   }
 }
+
+export function setIsRunningInsertionEffect(isRunning: boolean): void {
+  if (__DEV__) {
+    isRunningInsertionEffect = isRunning;
+  }
+}
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
index 811be0963915..bacf9da7029a 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.js
@@ -3090,6 +3090,87 @@ describe('ReactHooksWithNoopRenderer', () => {
         }),
       ).toThrow('is not a function');
     });
+
+    it('warns when setState is called from insertion effect setup', () => {
+      function App(props) {
+        const [, setX] = useState(0);
+        useInsertionEffect(() => {
+          setX(1);
+          if (props.throw) {
+            throw Error('No');
+          }
+        }, [props.throw]);
+        return null;
+      }
+
+      const root = ReactNoop.createRoot();
+      expect(() =>
+        act(() => {
+          root.render(<App />);
+        }),
+      ).toErrorDev(['Warning: useInsertionEffect must not schedule updates.']);
+
+      expect(() => {
+        act(() => {
+          root.render(<App throw={true} />);
+        });
+      }).toThrow('No');
+
+      // Should not warn for regular effects after throw.
+      function NotInsertion() {
+        const [, setX] = useState(0);
+        useEffect(() => {
+          setX(1);
+        }, []);
+        return null;
+      }
+      act(() => {
+        root.render(<NotInsertion />);
+      });
+    });
+
+    it('warns when setState is called from insertion effect cleanup', () => {
+      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();
+      act(() => {
+        root.render(<App foo="hello" />);
+      });
+      expect(() => {
+        act(() => {
+          root.render(<App foo="goodbye" />);
+        });
+      }).toErrorDev(['Warning: useInsertionEffect must not schedule updates.']);
+
+      expect(() => {
+        act(() => {
+          root.render(<App throw={true} />);
+        });
+      }).toThrow('No');
+
+      // Should not warn for regular effects after throw.
+      function NotInsertion() {
+        const [, setX] = useState(0);
+        useEffect(() => {
+          setX(1);
+        }, []);
+        return null;
+      }
+      act(() => {
+        root.render(<NotInsertion />);
+      });
+    });
   });
 
   describe('useLayoutEffect', () => {

From 1f7a901d7b2fc073e29a1887553b1bd18080da1b Mon Sep 17 00:00:00 2001
From: Stephen Cyron <63068182+scyron6@users.noreply.github.com>
Date: Thu, 7 Apr 2022 19:22:47 -0400
Subject: [PATCH 1275/1603] Fix false positive lint error with large number of
 branches  (#24287)

* Switched RulesOfHooks.js to use BigInt. Added test and updated .eslintrc.js to use es2020.

* Added BigInt as readonly global in eslintrc.cjs.js and eslintrc.cjs2015.js

* Added comment to RulesOfHooks.js that gets rid of BigInt eslint error

* Got rid of changes in .eslintrc.js and yarn.lock

* Move global down

Co-authored-by: stephen cyron <stephen.cyron@fdmgroup.com>
Co-authored-by: dan <dan.abramov@gmail.com>
---
 .../__tests__/ESLintRulesOfHooks-test.js      | 69 +++++++++++++++++++
 .../src/RulesOfHooks.js                       | 19 ++---
 scripts/rollup/validate/eslintrc.cjs.js       |  1 +
 scripts/rollup/validate/eslintrc.cjs2015.js   |  1 +
 4 files changed, 81 insertions(+), 9 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
index b6b0c8d4a967..044cc58f40c4 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -325,6 +325,75 @@ const tests = {
         useHook();
       }
     `,
+    `
+      // 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>
+        );
+      };
+    `,
     `
       // Valid because the neither the condition nor the loop affect the hook call.
       function App(props) {
diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
index 1273bf1d0c71..31d54e813ae6 100644
--- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+/* global BigInt */
 /* eslint-disable no-for-of-loops/no-for-of-loops */
 
 'use strict';
@@ -175,7 +176,7 @@ export default {
               cyclic.add(cyclicSegment);
             }
 
-            return 0;
+            return BigInt('0');
           }
 
           // add the current segment to pathList
@@ -187,11 +188,11 @@ export default {
           }
 
           if (codePath.thrownSegments.includes(segment)) {
-            paths = 0;
+            paths = BigInt('0');
           } else if (segment.prevSegments.length === 0) {
-            paths = 1;
+            paths = BigInt('1');
           } else {
-            paths = 0;
+            paths = BigInt('0');
             for (const prevSegment of segment.prevSegments) {
               paths += countPathsFromStart(prevSegment, pathList);
             }
@@ -199,7 +200,7 @@ export default {
 
           // 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 === 0) {
+          if (segment.reachable && paths === BigInt('0')) {
             cache.delete(segment.id);
           } else {
             cache.set(segment.id, paths);
@@ -246,7 +247,7 @@ export default {
               cyclic.add(cyclicSegment);
             }
 
-            return 0;
+            return BigInt('0');
           }
 
           // add the current segment to pathList
@@ -258,11 +259,11 @@ export default {
           }
 
           if (codePath.thrownSegments.includes(segment)) {
-            paths = 0;
+            paths = BigInt('0');
           } else if (segment.nextSegments.length === 0) {
-            paths = 1;
+            paths = BigInt('1');
           } else {
-            paths = 0;
+            paths = BigInt('0');
             for (const nextSegment of segment.nextSegments) {
               paths += countPathsToEnd(nextSegment, pathList);
             }
diff --git a/scripts/rollup/validate/eslintrc.cjs.js b/scripts/rollup/validate/eslintrc.cjs.js
index 802141d6bc10..a76aa67155e2 100644
--- a/scripts/rollup/validate/eslintrc.cjs.js
+++ b/scripts/rollup/validate/eslintrc.cjs.js
@@ -7,6 +7,7 @@ module.exports = {
   },
   globals: {
     // ES 6
+    BigInt: 'readonly',
     Map: 'readonly',
     Set: 'readonly',
     Proxy: 'readonly',
diff --git a/scripts/rollup/validate/eslintrc.cjs2015.js b/scripts/rollup/validate/eslintrc.cjs2015.js
index b57956614577..32bb3e83aa3a 100644
--- a/scripts/rollup/validate/eslintrc.cjs2015.js
+++ b/scripts/rollup/validate/eslintrc.cjs2015.js
@@ -7,6 +7,7 @@ module.exports = {
   },
   globals: {
     // ES 6
+    BigInt: 'readonly',
     Map: 'readonly',
     Set: 'readonly',
     Proxy: 'readonly',

From 65f35035a6184865c495934c89477a4d507fba1a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Apr 2022 08:59:12 -0400
Subject: [PATCH 1276/1603] Allow react-devtools-inline createStore() method to
 override Store config params (#24303)

---
 packages/react-devtools-inline/src/frontend.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 0e90c884667a..42c820126f28 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -18,7 +18,9 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 type Config = {|
+  checkBridgeProtocolCompatibility?: boolean,
   supportsNativeInspection?: boolean,
+  supportsProfiling?: boolean,
 |};
 
 export function createStore(bridge: FrontendBridge, config?: Config): Store {
@@ -26,7 +28,8 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {
     checkBridgeProtocolCompatibility: true,
     supportsTraceUpdates: true,
     supportsTimeline: true,
-    supportsNativeInspection: config?.supportsNativeInspection !== false,
+    supportsNativeInspection: true,
+    ...config,
   });
 }
 

From caa60e8fccf4346c64a92fce0e6c171d0ee9764c Mon Sep 17 00:00:00 2001
From: Leo <wtlin1228@gmail.com>
Date: Fri, 8 Apr 2022 23:01:18 +0800
Subject: [PATCH 1277/1603] update types for NonIdleLanes and IdleLane (#24313)

---
 packages/react-reconciler/src/ReactFiberLane.new.js | 4 ++--
 packages/react-reconciler/src/ReactFiberLane.old.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 4013545caf8d..45f9eab645e7 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -73,10 +73,10 @@ export const SomeRetryLane: Lane = RetryLane1;
 
 export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000000000000000;
 
-const NonIdleLanes = /*                                 */ 0b0001111111111111111111111111111;
+const NonIdleLanes: Lanes = /*                          */ 0b0001111111111111111111111111111;
 
 export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
-export const IdleLane: Lanes = /*                       */ 0b0100000000000000000000000000000;
+export const IdleLane: Lane = /*                        */ 0b0100000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 37fb44cc1086..c31ad30144d9 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -73,10 +73,10 @@ export const SomeRetryLane: Lane = RetryLane1;
 
 export const SelectiveHydrationLane: Lane = /*          */ 0b0001000000000000000000000000000;
 
-const NonIdleLanes = /*                                 */ 0b0001111111111111111111111111111;
+const NonIdleLanes: Lanes = /*                          */ 0b0001111111111111111111111111111;
 
 export const IdleHydrationLane: Lane = /*               */ 0b0010000000000000000000000000000;
-export const IdleLane: Lanes = /*                       */ 0b0100000000000000000000000000000;
+export const IdleLane: Lane = /*                        */ 0b0100000000000000000000000000000;
 
 export const OffscreenLane: Lane = /*                   */ 0b1000000000000000000000000000000;
 

From 5b2e7253f92a879894f7371472e43c2cff511b30 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Fri, 8 Apr 2022 11:38:07 -0400
Subject: [PATCH 1278/1603] React DevTools 4.24.3 -> 4.24.4 (#24315)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-timeline/package.json            | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 8 ++++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 1aace55d9418..2d1c61d51342 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.3",
+  "version": "4.24.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 40573a06a7fd..dd7057c0b6a9 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.3",
-  "version_name": "4.24.3",
+  "version": "4.24.4",
+  "version_name": "4.24.4",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index c3e5635e2b04..a3a83de6efca 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.3",
-  "version_name": "4.24.3",
+  "version": "4.24.4",
+  "version_name": "4.24.4",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 89733881a639..31d136496597 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.3",
+  "version": "4.24.4",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index f7ac3a4beadf..2ac74b18c2ac 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.3",
+  "version": "4.24.4",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 707e11de8cb3..aa7240a252d1 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.3",
+  "version": "4.24.4",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 12d39e75b868..448fd719f95d 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,14 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 9c343ad39bf4..49c7c748ba64 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.3",
+  "version": "4.24.4",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.3",
+    "react-devtools-core": "4.24.4",
     "update-notifier": "^2.1.0"
   }
 }

From 4ebaeae40dec52c84c968a25f1f21f4d0f571336 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 8 Apr 2022 11:28:20 -0500
Subject: [PATCH 1279/1603] moved mutation code to passive (#24251)

This PR moves the code for transition tracing in the mutation phase that adds transitions to the pending callbacks object (to be called sometime later after paint) from the mutation to the passive phase.

Things to think about:

Passive effects can be flushed before or after paint. How do we make sure that we get the correct end time for the interaction?
---
 .../src/ReactFiberCommitWork.new.js           | 63 ++++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 63 ++++++++++---------
 .../src/ReactFiberCompleteWork.new.js         | 26 ++++++++
 .../src/ReactFiberCompleteWork.old.js         | 26 ++++++++
 .../src/ReactFiberWorkLoop.new.js             | 51 ++++++++-------
 .../src/ReactFiberWorkLoop.old.js             | 51 ++++++++-------
 6 files changed, 176 insertions(+), 104 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index d1bbdcdde156..6d3b0e555a64 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2227,32 +2227,6 @@ function commitMutationEffectsOnFiber(
   // because of the shared reconciliation logic below.
   const flags = finishedWork.flags;
 
-  if (enableTransitionTracing) {
-    switch (finishedWork.tag) {
-      case HostRoot: {
-        const state = finishedWork.memoizedState;
-        const transitions = state.transitions;
-        if (transitions !== null) {
-          transitions.forEach(transition => {
-            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
-            addTransitionStartCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
-
-            addTransitionCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
-          });
-
-          clearTransitionsForLanes(root, lanes);
-          state.transitions = null;
-        }
-      }
-    }
-  }
-
   if (flags & ContentReset) {
     commitResetTextContent(finishedWork);
   }
@@ -2639,12 +2613,17 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
 export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
+  committedLanes: Lanes,
 ): void {
   nextEffect = finishedWork;
-  commitPassiveMountEffects_begin(finishedWork, root);
+  commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
 }
 
-function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
+function commitPassiveMountEffects_begin(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     const firstChild = fiber.child;
@@ -2652,7 +2631,7 @@ function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
       ensureCorrectReturnPointer(firstChild, fiber);
       nextEffect = firstChild;
     } else {
-      commitPassiveMountEffects_complete(subtreeRoot, root);
+      commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
     }
   }
 }
@@ -2660,13 +2639,15 @@ function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
 function commitPassiveMountEffects_complete(
   subtreeRoot: Fiber,
   root: FiberRoot,
+  committedLanes: Lanes,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
+
     if ((fiber.flags & Passive) !== NoFlags) {
       setCurrentDebugFiberInDEV(fiber);
       try {
-        commitPassiveMountOnFiber(root, fiber);
+        commitPassiveMountOnFiber(root, fiber, committedLanes);
       } catch (error) {
         reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
@@ -2693,6 +2674,7 @@ function commitPassiveMountEffects_complete(
 function commitPassiveMountOnFiber(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
+  committedLanes: Lanes,
 ): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
@@ -2734,6 +2716,27 @@ function commitPassiveMountOnFiber(
           }
         }
       }
+
+      if (enableTransitionTracing) {
+        const transitions = finishedWork.memoizedState.transitions;
+        if (transitions !== null) {
+          transitions.forEach(transition => {
+            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
+            addTransitionStartCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+
+            addTransitionCompleteCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+          });
+
+          clearTransitionsForLanes(finishedRoot, committedLanes);
+          finishedWork.memoizedState.transitions = null;
+        }
+      }
       break;
     }
     case LegacyHiddenComponent:
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index bff8b2781310..9a8ba5bcd6d5 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2227,32 +2227,6 @@ function commitMutationEffectsOnFiber(
   // because of the shared reconciliation logic below.
   const flags = finishedWork.flags;
 
-  if (enableTransitionTracing) {
-    switch (finishedWork.tag) {
-      case HostRoot: {
-        const state = finishedWork.memoizedState;
-        const transitions = state.transitions;
-        if (transitions !== null) {
-          transitions.forEach(transition => {
-            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
-            addTransitionStartCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
-
-            addTransitionCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
-          });
-
-          clearTransitionsForLanes(root, lanes);
-          state.transitions = null;
-        }
-      }
-    }
-  }
-
   if (flags & ContentReset) {
     commitResetTextContent(finishedWork);
   }
@@ -2639,12 +2613,17 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
 export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
+  committedLanes: Lanes,
 ): void {
   nextEffect = finishedWork;
-  commitPassiveMountEffects_begin(finishedWork, root);
+  commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
 }
 
-function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
+function commitPassiveMountEffects_begin(
+  subtreeRoot: Fiber,
+  root: FiberRoot,
+  committedLanes: Lanes,
+) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     const firstChild = fiber.child;
@@ -2652,7 +2631,7 @@ function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
       ensureCorrectReturnPointer(firstChild, fiber);
       nextEffect = firstChild;
     } else {
-      commitPassiveMountEffects_complete(subtreeRoot, root);
+      commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
     }
   }
 }
@@ -2660,13 +2639,15 @@ function commitPassiveMountEffects_begin(subtreeRoot: Fiber, root: FiberRoot) {
 function commitPassiveMountEffects_complete(
   subtreeRoot: Fiber,
   root: FiberRoot,
+  committedLanes: Lanes,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
+
     if ((fiber.flags & Passive) !== NoFlags) {
       setCurrentDebugFiberInDEV(fiber);
       try {
-        commitPassiveMountOnFiber(root, fiber);
+        commitPassiveMountOnFiber(root, fiber, committedLanes);
       } catch (error) {
         reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
@@ -2693,6 +2674,7 @@ function commitPassiveMountEffects_complete(
 function commitPassiveMountOnFiber(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
+  committedLanes: Lanes,
 ): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
@@ -2734,6 +2716,27 @@ function commitPassiveMountOnFiber(
           }
         }
       }
+
+      if (enableTransitionTracing) {
+        const transitions = finishedWork.memoizedState.transitions;
+        if (transitions !== null) {
+          transitions.forEach(transition => {
+            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
+            addTransitionStartCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+
+            addTransitionCompleteCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+            });
+          });
+
+          clearTransitionsForLanes(finishedRoot, committedLanes);
+          finishedWork.memoizedState.transitions = null;
+        }
+      }
       break;
     }
     case LegacyHiddenComponent:
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index bea984c19f1c..979f76b51415 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -153,6 +153,7 @@ import {
   popRenderLanes,
   getRenderTargetTime,
   subtreeRenderLanes,
+  getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.new';
 import {
   OffscreenLane,
@@ -862,6 +863,17 @@ function completeWork(
     }
     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;
+        }
+      }
+
       if (enableCache) {
         popRootTransition(fiberRoot, renderLanes);
 
@@ -918,6 +930,14 @@ function completeWork(
       }
       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 HostComponent: {
@@ -1187,6 +1207,12 @@ function completeWork(
         const offscreenFiber: Fiber = (workInProgress.child: any);
         offscreenFiber.flags |= Visibility;
 
+        // If the suspended state of the boundary changes, we need to schedule
+        // a passive effect, which is when we process the transitions
+        if (enableTransitionTracing) {
+          offscreenFiber.flags |= Passive;
+        }
+
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index ef3d4f7979f2..4b8fa1083cfa 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -153,6 +153,7 @@ import {
   popRenderLanes,
   getRenderTargetTime,
   subtreeRenderLanes,
+  getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.old';
 import {
   OffscreenLane,
@@ -862,6 +863,17 @@ function completeWork(
     }
     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;
+        }
+      }
+
       if (enableCache) {
         popRootTransition(fiberRoot, renderLanes);
 
@@ -918,6 +930,14 @@ function completeWork(
       }
       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 HostComponent: {
@@ -1187,6 +1207,12 @@ function completeWork(
         const offscreenFiber: Fiber = (workInProgress.child: any);
         offscreenFiber.flags |= Visibility;
 
+        // If the suspended state of the boundary changes, we need to schedule
+        // a passive effect, which is when we process the transitions
+        if (enableTransitionTracing) {
+          offscreenFiber.flags |= Passive;
+        }
+
         // TODO: This will still suspend a synchronous tree if anything
         // in the concurrent tree already suspended during this render.
         // This is a known bug.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 75d9c76b55d1..bbd4acdf9e9b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2322,27 +2322,6 @@ function commitRootImpl(
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
-  if (enableTransitionTracing) {
-    const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
-    const prevRootTransitionCallbacks = root.transitionCallbacks;
-    if (
-      prevPendingTransitionCallbacks !== null &&
-      prevRootTransitionCallbacks !== null
-    ) {
-      // TODO(luna) Refactor this code into the Host Config
-      const endTime = now();
-      currentPendingTransitionCallbacks = null;
-
-      scheduleCallback(IdleSchedulerPriority, () =>
-        processTransitionCallbacks(
-          prevPendingTransitionCallbacks,
-          endTime,
-          prevRootTransitionCallbacks,
-        ),
-      );
-    }
-  }
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logCommitStopped();
@@ -2457,7 +2436,7 @@ function flushPassiveEffectsImpl() {
   executionContext |= CommitContext;
 
   commitPassiveUnmountEffects(root.current);
-  commitPassiveMountEffects(root, root.current);
+  commitPassiveMountEffects(root, root.current, lanes);
 
   // TODO: Move to commitPassiveMountEffects
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -2487,6 +2466,34 @@ function flushPassiveEffectsImpl() {
 
   flushSyncCallbacks();
 
+  if (enableTransitionTracing) {
+    const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
+    const prevRootTransitionCallbacks = root.transitionCallbacks;
+    if (
+      prevPendingTransitionCallbacks !== null &&
+      prevRootTransitionCallbacks !== null
+    ) {
+      // TODO(luna) Refactor this code into the Host Config
+      // TODO(luna) The end time here is not necessarily accurate
+      // because passive effects could be called before paint
+      // (synchronously) or after paint (normally). We need
+      // to come up with a way to get the correct end time for both cases.
+      // One solution is in the host config, if the passive effects
+      // have not yet been run, make a call to flush the passive effects
+      // right after paint.
+      const endTime = now();
+      currentPendingTransitionCallbacks = null;
+
+      scheduleCallback(IdleSchedulerPriority, () =>
+        processTransitionCallbacks(
+          prevPendingTransitionCallbacks,
+          endTime,
+          prevRootTransitionCallbacks,
+        ),
+      );
+    }
+  }
+
   if (__DEV__) {
     // If additional passive effects were scheduled, increment a counter. If this
     // exceeds the limit, we'll fire a warning.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 17bfc935bc90..8e2dd32c9f16 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2322,27 +2322,6 @@ function commitRootImpl(
   // If layout work was scheduled, flush it now.
   flushSyncCallbacks();
 
-  if (enableTransitionTracing) {
-    const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
-    const prevRootTransitionCallbacks = root.transitionCallbacks;
-    if (
-      prevPendingTransitionCallbacks !== null &&
-      prevRootTransitionCallbacks !== null
-    ) {
-      // TODO(luna) Refactor this code into the Host Config
-      const endTime = now();
-      currentPendingTransitionCallbacks = null;
-
-      scheduleCallback(IdleSchedulerPriority, () =>
-        processTransitionCallbacks(
-          prevPendingTransitionCallbacks,
-          endTime,
-          prevRootTransitionCallbacks,
-        ),
-      );
-    }
-  }
-
   if (__DEV__) {
     if (enableDebugTracing) {
       logCommitStopped();
@@ -2457,7 +2436,7 @@ function flushPassiveEffectsImpl() {
   executionContext |= CommitContext;
 
   commitPassiveUnmountEffects(root.current);
-  commitPassiveMountEffects(root, root.current);
+  commitPassiveMountEffects(root, root.current, lanes);
 
   // TODO: Move to commitPassiveMountEffects
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -2487,6 +2466,34 @@ function flushPassiveEffectsImpl() {
 
   flushSyncCallbacks();
 
+  if (enableTransitionTracing) {
+    const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
+    const prevRootTransitionCallbacks = root.transitionCallbacks;
+    if (
+      prevPendingTransitionCallbacks !== null &&
+      prevRootTransitionCallbacks !== null
+    ) {
+      // TODO(luna) Refactor this code into the Host Config
+      // TODO(luna) The end time here is not necessarily accurate
+      // because passive effects could be called before paint
+      // (synchronously) or after paint (normally). We need
+      // to come up with a way to get the correct end time for both cases.
+      // One solution is in the host config, if the passive effects
+      // have not yet been run, make a call to flush the passive effects
+      // right after paint.
+      const endTime = now();
+      currentPendingTransitionCallbacks = null;
+
+      scheduleCallback(IdleSchedulerPriority, () =>
+        processTransitionCallbacks(
+          prevPendingTransitionCallbacks,
+          endTime,
+          prevRootTransitionCallbacks,
+        ),
+      );
+    }
+  }
+
   if (__DEV__) {
     // If additional passive effects were scheduled, increment a counter. If this
     // exceeds the limit, we'll fire a warning.

From bafe912a5f20736c40f505a47fcb238a375572a6 Mon Sep 17 00:00:00 2001
From: Leo <wtlin1228@gmail.com>
Date: Sat, 9 Apr 2022 01:51:40 +0800
Subject: [PATCH 1280/1603] update types for InputContinuousLane and
 DefaultLane (#24316)

---
 packages/react-reconciler/src/ReactFiberLane.new.js | 4 ++--
 packages/react-reconciler/src/ReactFiberLane.old.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 45f9eab645e7..4a8344d19e1e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -38,10 +38,10 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
 export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
-export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
+export const InputContinuousLane: Lane = /*             */ 0b0000000000000000000000000000100;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000010000;
+export const DefaultLane: Lane = /*                     */ 0b0000000000000000000000000010000;
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000000100000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111111111111000000;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index c31ad30144d9..280fbefe688a 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -38,10 +38,10 @@ export const NoLane: Lane = /*                          */ 0b0000000000000000000
 export const SyncLane: Lane = /*                        */ 0b0000000000000000000000000000001;
 
 export const InputContinuousHydrationLane: Lane = /*    */ 0b0000000000000000000000000000010;
-export const InputContinuousLane: Lanes = /*            */ 0b0000000000000000000000000000100;
+export const InputContinuousLane: Lane = /*             */ 0b0000000000000000000000000000100;
 
 export const DefaultHydrationLane: Lane = /*            */ 0b0000000000000000000000000001000;
-export const DefaultLane: Lanes = /*                    */ 0b0000000000000000000000000010000;
+export const DefaultLane: Lane = /*                     */ 0b0000000000000000000000000010000;
 
 const TransitionHydrationLane: Lane = /*                */ 0b0000000000000000000000000100000;
 const TransitionLanes: Lanes = /*                       */ 0b0000000001111111111111111000000;

From a9add2fe08cc3fa8fc811f6efce84815827fb98c Mon Sep 17 00:00:00 2001
From: Zhongjan <zjgdmz@yeah.net>
Date: Sat, 9 Apr 2022 02:47:31 +0800
Subject: [PATCH 1281/1603] Fix file path separator compatibility in
 scripts/babel (#24318)

The problem in scripts\babel\transform-object-assign.js is that file path separator has '/' and '\' between Linux, MacOS and Windows, which causes yarn build error. See https://github.com/facebook/react/issues/24103
---
 scripts/babel/transform-object-assign.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/babel/transform-object-assign.js b/scripts/babel/transform-object-assign.js
index 9b20675f39f1..e2724f89e48e 100644
--- a/scripts/babel/transform-object-assign.js
+++ b/scripts/babel/transform-object-assign.js
@@ -28,7 +28,7 @@ module.exports = function autoImporter(babel) {
 
     visitor: {
       CallExpression: function(path, file) {
-        if (file.filename.indexOf('shared/assign') !== -1) {
+        if (/shared(\/|\\)assign/.test(file.filename)) {
           // Don't replace Object.assign if we're transforming shared/assign
           return;
         }
@@ -40,7 +40,7 @@ module.exports = function autoImporter(babel) {
       },
 
       MemberExpression: function(path, file) {
-        if (file.filename.indexOf('shared/assign') !== -1) {
+        if (/shared(\/|\\)assign/.test(file.filename)) {
           // Don't replace Object.assign if we're transforming shared/assign
           return;
         }

From b86baa1cb7b0838169eb762873d53442b9075c94 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 8 Apr 2022 15:34:41 -0400
Subject: [PATCH 1282/1603] Add back lost cache test (#24317)

---
 .../src/__tests__/ReactCache-test.js          | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 6a20f738af8b..804486721f9c 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -238,6 +238,53 @@ describe('ReactCache', () => {
     expect(root).toMatchRenderedOutput('Bye');
   });
 
+  // @gate experimental || www
+  test('multiple new Cache boundaries in the same mount share the same, fresh root cache', async () => {
+    function App() {
+      return (
+        <>
+          <Cache>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="A" />
+            </Suspense>
+          </Cache>
+          <Cache>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="A" />
+            </Suspense>
+          </Cache>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App showMore={false} />);
+    });
+
+    // Even though there are two new <Cache /> trees, they should share the same
+    // data cache. So there should be only a single cache miss for A.
+    expect(Scheduler).toHaveYielded([
+      'Cache miss! [A]',
+      'Loading...',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...Loading...');
+
+    await act(async () => {
+      resolveMostRecentTextCache('A');
+    });
+    expect(Scheduler).toHaveYielded(['A', 'A']);
+    expect(root).toMatchRenderedOutput('AA');
+
+    await act(async () => {
+      root.render('Bye');
+    });
+    // no cleanup: cache is still retained at the root
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput('Bye');
+  });
+
   // @gate experimental || www
   test('multiple new Cache boundaries in the same update share the same, fresh cache', async () => {
     function App({showMore}) {

From 8dcedba15a4a0f5545e3b386355000208884b24f Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Fri, 8 Apr 2022 15:53:40 -0400
Subject: [PATCH 1283/1603] Add fallback shim for AbortController (#24285)

* Add fallback shim for AbortController

* Replace shim with a minimal stub

* replace-fork

* Better minification

* Fix flow

* Even smaller

* replace-fork

* Revert back to object constructor

* replace-fork
---
 .../ReactDOMFizzServerBrowser-test.js         |  1 -
 .../src/ReactFiberCacheComponent.new.js       | 25 +++++++++++++++++--
 .../src/ReactFiberCacheComponent.old.js       | 25 +++++++++++++++++--
 scripts/jest/setupEnvironment.js              |  4 ---
 4 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 278a15306017..792b9611f29f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -12,7 +12,6 @@
 // Polyfills for test environment
 global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
 global.TextEncoder = require('util').TextEncoder;
-global.AbortController = require('abort-controller');
 
 let React;
 let ReactDOMFizzServer;
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 67588c3219a9..268f8c02f825 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -15,8 +15,29 @@ import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {pushProvider, popProvider} from './ReactFiberNewContext.new';
 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 = enableCache
+  ? typeof AbortController !== 'undefined'
+    ? AbortController
+    : (function AbortControllerShim() {
+        const listeners = [];
+        const signal = (this.signal = {
+          aborted: false,
+          addEventListener: (type, listener) => {
+            listeners.push(listener);
+          },
+        });
+
+        this.abort = () => {
+          signal.aborted = true;
+          listeners.forEach(listener => listener());
+        };
+      }: AbortController)
+  : (null: any);
+
 export type Cache = {|
-  controller: AbortController,
+  controller: AbortControllerLocal,
   data: Map<() => mixed, mixed>,
   refCount: number,
 |};
@@ -66,7 +87,7 @@ export function createCache(): Cache {
     return (null: any);
   }
   const cache: Cache = {
-    controller: new AbortController(),
+    controller: new AbortControllerLocal(),
     data: new Map(),
     refCount: 0,
   };
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index e530619d4166..ff141e2389fe 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -15,8 +15,29 @@ import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {pushProvider, popProvider} from './ReactFiberNewContext.old';
 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 = enableCache
+  ? typeof AbortController !== 'undefined'
+    ? AbortController
+    : (function AbortControllerShim() {
+        const listeners = [];
+        const signal = (this.signal = {
+          aborted: false,
+          addEventListener: (type, listener) => {
+            listeners.push(listener);
+          },
+        });
+
+        this.abort = () => {
+          signal.aborted = true;
+          listeners.forEach(listener => listener());
+        };
+      }: AbortController)
+  : (null: any);
+
 export type Cache = {|
-  controller: AbortController,
+  controller: AbortControllerLocal,
   data: Map<() => mixed, mixed>,
   refCount: number,
 |};
@@ -66,7 +87,7 @@ export function createCache(): Cache {
     return (null: any);
   }
   const cache: Cache = {
-    controller: new AbortController(),
+    controller: new AbortControllerLocal(),
     data: new Map(),
     refCount: 0,
   };
diff --git a/scripts/jest/setupEnvironment.js b/scripts/jest/setupEnvironment.js
index d2d510088c45..2ba88b156169 100644
--- a/scripts/jest/setupEnvironment.js
+++ b/scripts/jest/setupEnvironment.js
@@ -1,7 +1,5 @@
 /* eslint-disable */
 
-const AbortController = require('abort-controller');
-
 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.');
@@ -23,8 +21,6 @@ global.__EXPERIMENTAL__ =
 
 global.__VARIANT__ = !!process.env.VARIANT;
 
-global.AbortController = AbortController;
-
 if (typeof window !== 'undefined') {
   global.requestIdleCallback = function(callback) {
     return setTimeout(() => {

From ea7b2ec2898c615f648aec30fcbcf73aed156583 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 6 Apr 2022 23:01:07 -0400
Subject: [PATCH 1284/1603] Remove wrong return pointer warning

I'm about to refactor part of the commit phase to use recursion instead
of iteration. As part of that change, we will no longer assign the
`return` pointer when traversing into a subtree. So I'm disabling
the internal warning that fires if the return pointer is not consistent
with the parent during the commit phase.

I had originally added this warning to help prevent mistakes when
traversing the tree iteratively, but since we're intentionally switching
to recursion instead, we don't need it.
---
 .../__tests__/ReactWrongReturnPointer-test.js | 45 -------------------
 .../src/ReactFiberCommitWork.new.js           | 41 +++++------------
 .../src/ReactFiberCommitWork.old.js           | 41 +++++------------
 3 files changed, 24 insertions(+), 103 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
index ca5c9fac5162..f4303d68c0f4 100644
--- a/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
+++ b/packages/react-dom/src/__tests__/ReactWrongReturnPointer-test.js
@@ -153,51 +153,6 @@ function resolveMostRecentTextCache(text) {
 
 const resolveText = resolveMostRecentTextCache;
 
-// Don't feel too guilty if you have to delete this test.
-// @gate dfsEffectsRefactor
-// @gate __DEV__
-test('warns in DEV if return pointer is inconsistent', async () => {
-  const {useRef, useLayoutEffect} = React;
-
-  let ref = null;
-  function App({text}) {
-    ref = useRef(null);
-    return (
-      <>
-        <Sibling text={text} />
-        <div ref={ref}>{text}</div>
-      </>
-    );
-  }
-
-  function Sibling({text}) {
-    useLayoutEffect(() => {
-      if (text === 'B') {
-        // Mutate the return pointer of the div to point to the wrong alternate.
-        // This simulates the most common type of return pointer inconsistency.
-        const current = ref.current.fiber;
-        const workInProgress = current.alternate;
-        workInProgress.return = current.return;
-      }
-    }, [text]);
-    return null;
-  }
-
-  const root = ReactNoop.createRoot();
-  await act(async () => {
-    root.render(<App text="A" />);
-  });
-
-  spyOnDev(console, 'error');
-  await act(async () => {
-    root.render(<App text="B" />);
-  });
-  expect(console.error.calls.count()).toBe(1);
-  expect(console.error.calls.argsFor(0)[0]).toMatch(
-    'Internal React error: Return pointer is inconsistent with parent.',
-  );
-});
-
 // @gate enableCache
 // @gate enableSuspenseList
 test('regression (#20932): return pointer is correct before entering deleted tree', async () => {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6d3b0e555a64..fa9e70c3923a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -360,7 +360,7 @@ function commitBeforeMutationEffects_begin() {
       (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
       child !== null
     ) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitBeforeMutationEffects_complete();
@@ -382,7 +382,7 @@ function commitBeforeMutationEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2185,7 +2185,7 @@ function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
 
     const child = fiber.child;
     if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitMutationEffects_complete(root, lanes);
@@ -2207,7 +2207,7 @@ function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2425,7 +2425,7 @@ function commitLayoutEffects_begin(
     }
 
     if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
-      ensureCorrectReturnPointer(firstChild, fiber);
+      firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
       commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
@@ -2459,7 +2459,7 @@ function commitLayoutMountEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2628,7 +2628,7 @@ function commitPassiveMountEffects_begin(
     const fiber = nextEffect;
     const firstChild = fiber.child;
     if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
-      ensureCorrectReturnPointer(firstChild, fiber);
+      firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
       commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
@@ -2662,7 +2662,7 @@ function commitPassiveMountEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2849,7 +2849,7 @@ function commitPassiveUnmountEffects_begin() {
     }
 
     if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitPassiveUnmountEffects_complete();
@@ -2868,7 +2868,7 @@ function commitPassiveUnmountEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2923,7 +2923,7 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     // TODO: Only traverse subtree if it has a PassiveStatic flag. (But, if we
     // do this, still need to handle `deletedTreeCleanUpLevel` correctly.)
     if (child !== null) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
@@ -2961,7 +2961,7 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
     }
 
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, returnFiber);
+      sibling.return = returnFiber;
       nextEffect = sibling;
       return;
     }
@@ -3039,23 +3039,6 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
   }
 }
 
-let didWarnWrongReturnPointer = false;
-function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
-  if (__DEV__) {
-    if (!didWarnWrongReturnPointer && fiber.return !== expectedReturnFiber) {
-      didWarnWrongReturnPointer = true;
-      console.error(
-        'Internal React error: Return pointer is inconsistent ' +
-          'with parent.',
-      );
-    }
-  }
-
-  // TODO: Remove this assignment once we're confident that it won't break
-  // anything, by checking the warning logs for the above invariant
-  fiber.return = expectedReturnFiber;
-}
-
 // TODO: Reuse reappearLayoutEffects traversal here?
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableStrictEffects) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 9a8ba5bcd6d5..df30a1bc26f5 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -360,7 +360,7 @@ function commitBeforeMutationEffects_begin() {
       (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags &&
       child !== null
     ) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitBeforeMutationEffects_complete();
@@ -382,7 +382,7 @@ function commitBeforeMutationEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2185,7 +2185,7 @@ function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
 
     const child = fiber.child;
     if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitMutationEffects_complete(root, lanes);
@@ -2207,7 +2207,7 @@ function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2425,7 +2425,7 @@ function commitLayoutEffects_begin(
     }
 
     if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
-      ensureCorrectReturnPointer(firstChild, fiber);
+      firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
       commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
@@ -2459,7 +2459,7 @@ function commitLayoutMountEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2628,7 +2628,7 @@ function commitPassiveMountEffects_begin(
     const fiber = nextEffect;
     const firstChild = fiber.child;
     if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
-      ensureCorrectReturnPointer(firstChild, fiber);
+      firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
       commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
@@ -2662,7 +2662,7 @@ function commitPassiveMountEffects_complete(
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2849,7 +2849,7 @@ function commitPassiveUnmountEffects_begin() {
     }
 
     if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitPassiveUnmountEffects_complete();
@@ -2868,7 +2868,7 @@ function commitPassiveUnmountEffects_complete() {
 
     const sibling = fiber.sibling;
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, fiber.return);
+      sibling.return = fiber.return;
       nextEffect = sibling;
       return;
     }
@@ -2923,7 +2923,7 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
     // TODO: Only traverse subtree if it has a PassiveStatic flag. (But, if we
     // do this, still need to handle `deletedTreeCleanUpLevel` correctly.)
     if (child !== null) {
-      ensureCorrectReturnPointer(child, fiber);
+      child.return = fiber;
       nextEffect = child;
     } else {
       commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
@@ -2961,7 +2961,7 @@ function commitPassiveUnmountEffectsInsideOfDeletedTree_complete(
     }
 
     if (sibling !== null) {
-      ensureCorrectReturnPointer(sibling, returnFiber);
+      sibling.return = returnFiber;
       nextEffect = sibling;
       return;
     }
@@ -3039,23 +3039,6 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
   }
 }
 
-let didWarnWrongReturnPointer = false;
-function ensureCorrectReturnPointer(fiber, expectedReturnFiber) {
-  if (__DEV__) {
-    if (!didWarnWrongReturnPointer && fiber.return !== expectedReturnFiber) {
-      didWarnWrongReturnPointer = true;
-      console.error(
-        'Internal React error: Return pointer is inconsistent ' +
-          'with parent.',
-      );
-    }
-  }
-
-  // TODO: Remove this assignment once we're confident that it won't break
-  // anything, by checking the warning logs for the above invariant
-  fiber.return = expectedReturnFiber;
-}
-
 // TODO: Reuse reappearLayoutEffects traversal here?
 function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
   if (__DEV__ && enableStrictEffects) {

From 12d7a9ad7082106102b7dd9fec4c75abafe1c2a8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 7 Apr 2022 19:00:20 -0400
Subject: [PATCH 1285/1603] Combine commitWork into single switch statement

commitWork is forked into a separate implementation for mutation mode
(DOM) and persistent mode (React Native). But unlike when it was first
introduced, there's more overlap than differences between the forks,
mainly because we've added new types of fibers. So this joins the two
forks and adds more local branches where the behavior actually
diverges: host nodes, host containers, and portals.
---
 .../src/ReactFiberCommitWork.new.js           | 202 +++++-------------
 .../src/ReactFiberCommitWork.old.js           | 202 +++++-------------
 2 files changed, 110 insertions(+), 294 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index fa9e70c3923a..337f3e50b231 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1481,36 +1481,6 @@ function emptyPortalContainer(current: Fiber) {
   replaceContainerChildren(containerInfo, emptyChildSet);
 }
 
-function commitContainer(finishedWork: Fiber) {
-  if (!supportsPersistence) {
-    return;
-  }
-
-  switch (finishedWork.tag) {
-    case ClassComponent:
-    case HostComponent:
-    case HostText: {
-      return;
-    }
-    case HostRoot:
-    case HostPortal: {
-      const portalOrRoot: {
-        containerInfo: Container,
-        pendingChildren: ChildSet,
-        ...
-      } = finishedWork.stateNode;
-      const {containerInfo, pendingChildren} = portalOrRoot;
-      replaceContainerChildren(containerInfo, pendingChildren);
-      return;
-    }
-  }
-
-  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 getHostParentFiber(fiber: Fiber): Fiber {
   let parent = fiber.return;
   while (parent !== null) {
@@ -1830,87 +1800,6 @@ function commitDeletion(
 }
 
 function commitWork(current: Fiber | null, finishedWork: Fiber): void {
-  if (!supportsMutation) {
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case MemoComponent:
-      case SimpleMemoComponent: {
-        commitHookEffectListUnmount(
-          HookInsertion | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
-
-        // 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.
-        // TODO: Check if we're inside an Offscreen subtree that disappeared
-        // during this commit. If so, we would have already unmounted its
-        // layout hooks. (However, since we null out the `destroy` function
-        // right before calling it, the behavior is already correct, so this
-        // would mostly be for modeling purposes.)
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
-          try {
-            startLayoutEffectTimer();
-            commitHookEffectListUnmount(
-              HookLayout | HookHasEffect,
-              finishedWork,
-              finishedWork.return,
-            );
-          } finally {
-            recordLayoutEffectDuration(finishedWork);
-          }
-        } else {
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-        }
-        return;
-      }
-      case Profiler: {
-        return;
-      }
-      case SuspenseComponent: {
-        commitSuspenseCallback(finishedWork);
-        attachSuspenseRetryListeners(finishedWork);
-        return;
-      }
-      case SuspenseListComponent: {
-        attachSuspenseRetryListeners(finishedWork);
-        return;
-      }
-      case HostRoot: {
-        if (supportsHydration) {
-          if (current !== null) {
-            const prevRootState: RootState = current.memoizedState;
-            if (prevRootState.isDehydrated) {
-              const root: FiberRoot = finishedWork.stateNode;
-              commitHydratedContainer(root.containerInfo);
-            }
-          }
-        }
-        break;
-      }
-      case OffscreenComponent:
-      case LegacyHiddenComponent: {
-        return;
-      }
-    }
-
-    commitContainer(finishedWork);
-    return;
-  }
-
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -1955,51 +1844,55 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostComponent: {
-      const instance: Instance = finishedWork.stateNode;
-      if (instance != null) {
-        // Commit the work prepared earlier.
-        const newProps = 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 oldProps = current !== null ? current.memoizedProps : newProps;
-        const type = finishedWork.type;
-        // TODO: Type the updateQueue to be specific to host components.
-        const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
-        finishedWork.updateQueue = null;
-        if (updatePayload !== null) {
-          commitUpdate(
-            instance,
-            updatePayload,
-            type,
-            oldProps,
-            newProps,
-            finishedWork,
-          );
+      if (supportsMutation) {
+        const instance: Instance = finishedWork.stateNode;
+        if (instance != null) {
+          // Commit the work prepared earlier.
+          const newProps = 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 oldProps = current !== null ? current.memoizedProps : newProps;
+          const type = finishedWork.type;
+          // TODO: Type the updateQueue to be specific to host components.
+          const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
+          finishedWork.updateQueue = null;
+          if (updatePayload !== null) {
+            commitUpdate(
+              instance,
+              updatePayload,
+              type,
+              oldProps,
+              newProps,
+              finishedWork,
+            );
+          }
         }
       }
       return;
     }
     case HostText: {
-      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.',
-        );
-      }
+      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 textInstance: TextInstance = finishedWork.stateNode;
-      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;
-      commitTextUpdate(textInstance, oldText, newText);
+        const textInstance: TextInstance = finishedWork.stateNode;
+        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;
+        commitTextUpdate(textInstance, oldText, newText);
+      }
       return;
     }
     case HostRoot: {
-      if (supportsHydration) {
+      if (supportsMutation && supportsHydration) {
         if (current !== null) {
           const prevRootState: RootState = current.memoizedState;
           if (prevRootState.isDehydrated) {
@@ -2008,6 +1901,21 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
           }
         }
       }
+      if (supportsPersistence) {
+        const fiberRoot: FiberRoot = finishedWork.stateNode;
+        const containerInfo = fiberRoot.containerInfo;
+        const pendingChildren = fiberRoot.pendingChildren;
+        replaceContainerChildren(containerInfo, pendingChildren);
+      }
+      return;
+    }
+    case HostPortal: {
+      if (supportsPersistence) {
+        const portal = finishedWork.stateNode;
+        const containerInfo = portal.containerInfo;
+        const pendingChildren = portal.pendingChildren;
+        replaceContainerChildren(containerInfo, pendingChildren);
+      }
       return;
     }
     case Profiler: {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index df30a1bc26f5..cd250eadfd13 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1481,36 +1481,6 @@ function emptyPortalContainer(current: Fiber) {
   replaceContainerChildren(containerInfo, emptyChildSet);
 }
 
-function commitContainer(finishedWork: Fiber) {
-  if (!supportsPersistence) {
-    return;
-  }
-
-  switch (finishedWork.tag) {
-    case ClassComponent:
-    case HostComponent:
-    case HostText: {
-      return;
-    }
-    case HostRoot:
-    case HostPortal: {
-      const portalOrRoot: {
-        containerInfo: Container,
-        pendingChildren: ChildSet,
-        ...
-      } = finishedWork.stateNode;
-      const {containerInfo, pendingChildren} = portalOrRoot;
-      replaceContainerChildren(containerInfo, pendingChildren);
-      return;
-    }
-  }
-
-  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 getHostParentFiber(fiber: Fiber): Fiber {
   let parent = fiber.return;
   while (parent !== null) {
@@ -1830,87 +1800,6 @@ function commitDeletion(
 }
 
 function commitWork(current: Fiber | null, finishedWork: Fiber): void {
-  if (!supportsMutation) {
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case MemoComponent:
-      case SimpleMemoComponent: {
-        commitHookEffectListUnmount(
-          HookInsertion | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
-
-        // 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.
-        // TODO: Check if we're inside an Offscreen subtree that disappeared
-        // during this commit. If so, we would have already unmounted its
-        // layout hooks. (However, since we null out the `destroy` function
-        // right before calling it, the behavior is already correct, so this
-        // would mostly be for modeling purposes.)
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
-          try {
-            startLayoutEffectTimer();
-            commitHookEffectListUnmount(
-              HookLayout | HookHasEffect,
-              finishedWork,
-              finishedWork.return,
-            );
-          } finally {
-            recordLayoutEffectDuration(finishedWork);
-          }
-        } else {
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-        }
-        return;
-      }
-      case Profiler: {
-        return;
-      }
-      case SuspenseComponent: {
-        commitSuspenseCallback(finishedWork);
-        attachSuspenseRetryListeners(finishedWork);
-        return;
-      }
-      case SuspenseListComponent: {
-        attachSuspenseRetryListeners(finishedWork);
-        return;
-      }
-      case HostRoot: {
-        if (supportsHydration) {
-          if (current !== null) {
-            const prevRootState: RootState = current.memoizedState;
-            if (prevRootState.isDehydrated) {
-              const root: FiberRoot = finishedWork.stateNode;
-              commitHydratedContainer(root.containerInfo);
-            }
-          }
-        }
-        break;
-      }
-      case OffscreenComponent:
-      case LegacyHiddenComponent: {
-        return;
-      }
-    }
-
-    commitContainer(finishedWork);
-    return;
-  }
-
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -1955,51 +1844,55 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
       return;
     }
     case HostComponent: {
-      const instance: Instance = finishedWork.stateNode;
-      if (instance != null) {
-        // Commit the work prepared earlier.
-        const newProps = 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 oldProps = current !== null ? current.memoizedProps : newProps;
-        const type = finishedWork.type;
-        // TODO: Type the updateQueue to be specific to host components.
-        const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
-        finishedWork.updateQueue = null;
-        if (updatePayload !== null) {
-          commitUpdate(
-            instance,
-            updatePayload,
-            type,
-            oldProps,
-            newProps,
-            finishedWork,
-          );
+      if (supportsMutation) {
+        const instance: Instance = finishedWork.stateNode;
+        if (instance != null) {
+          // Commit the work prepared earlier.
+          const newProps = 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 oldProps = current !== null ? current.memoizedProps : newProps;
+          const type = finishedWork.type;
+          // TODO: Type the updateQueue to be specific to host components.
+          const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
+          finishedWork.updateQueue = null;
+          if (updatePayload !== null) {
+            commitUpdate(
+              instance,
+              updatePayload,
+              type,
+              oldProps,
+              newProps,
+              finishedWork,
+            );
+          }
         }
       }
       return;
     }
     case HostText: {
-      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.',
-        );
-      }
+      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 textInstance: TextInstance = finishedWork.stateNode;
-      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;
-      commitTextUpdate(textInstance, oldText, newText);
+        const textInstance: TextInstance = finishedWork.stateNode;
+        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;
+        commitTextUpdate(textInstance, oldText, newText);
+      }
       return;
     }
     case HostRoot: {
-      if (supportsHydration) {
+      if (supportsMutation && supportsHydration) {
         if (current !== null) {
           const prevRootState: RootState = current.memoizedState;
           if (prevRootState.isDehydrated) {
@@ -2008,6 +1901,21 @@ function commitWork(current: Fiber | null, finishedWork: Fiber): void {
           }
         }
       }
+      if (supportsPersistence) {
+        const fiberRoot: FiberRoot = finishedWork.stateNode;
+        const containerInfo = fiberRoot.containerInfo;
+        const pendingChildren = fiberRoot.pendingChildren;
+        replaceContainerChildren(containerInfo, pendingChildren);
+      }
+      return;
+    }
+    case HostPortal: {
+      if (supportsPersistence) {
+        const portal = finishedWork.stateNode;
+        const containerInfo = portal.containerInfo;
+        const pendingChildren = portal.pendingChildren;
+        replaceContainerChildren(containerInfo, pendingChildren);
+      }
       return;
     }
     case Profiler: {

From e66e7a0fb875dac2d3e34c005c5be7503f979143 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 7 Apr 2022 19:09:07 -0400
Subject: [PATCH 1286/1603] Inline commitWork into commitMutationOnFiber

There's not really any reason these should be separate functions. The
factoring has gotten sloppy and redundant because there's similar logic
in both places, which is more obvious now that they're combined.

Next I'll start combining the redundant branches.
---
 .../src/ReactFiberCommitWork.new.js           | 357 ++++++++----------
 .../src/ReactFiberCommitWork.old.js           | 357 ++++++++----------
 .../react-reconciler/src/ReactFiberFlags.js   |   2 -
 3 files changed, 320 insertions(+), 396 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 337f3e50b231..35a7e71ed330 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -68,13 +68,11 @@ import {
   NoFlags,
   ContentReset,
   Placement,
-  PlacementAndUpdate,
   ChildDeletion,
   Snapshot,
   Update,
   Ref,
   Hydrating,
-  HydratingAndUpdate,
   Passive,
   BeforeMutationMask,
   MutationMask,
@@ -1799,156 +1797,6 @@ function commitDeletion(
   detachFiberMutation(current);
 }
 
-function commitWork(current: Fiber | null, finishedWork: Fiber): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case MemoComponent:
-    case SimpleMemoComponent: {
-      commitHookEffectListUnmount(
-        HookInsertion | HookHasEffect,
-        finishedWork,
-        finishedWork.return,
-      );
-      commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
-      // 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 (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
-        }
-      } else {
-        commitHookEffectListUnmount(
-          HookLayout | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-      }
-      return;
-    }
-    case ClassComponent: {
-      return;
-    }
-    case HostComponent: {
-      if (supportsMutation) {
-        const instance: Instance = finishedWork.stateNode;
-        if (instance != null) {
-          // Commit the work prepared earlier.
-          const newProps = 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 oldProps = current !== null ? current.memoizedProps : newProps;
-          const type = finishedWork.type;
-          // TODO: Type the updateQueue to be specific to host components.
-          const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
-          finishedWork.updateQueue = null;
-          if (updatePayload !== null) {
-            commitUpdate(
-              instance,
-              updatePayload,
-              type,
-              oldProps,
-              newProps,
-              finishedWork,
-            );
-          }
-        }
-      }
-      return;
-    }
-    case HostText: {
-      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 textInstance: TextInstance = finishedWork.stateNode;
-        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;
-        commitTextUpdate(textInstance, oldText, newText);
-      }
-      return;
-    }
-    case HostRoot: {
-      if (supportsMutation && supportsHydration) {
-        if (current !== null) {
-          const prevRootState: RootState = current.memoizedState;
-          if (prevRootState.isDehydrated) {
-            const root: FiberRoot = finishedWork.stateNode;
-            commitHydratedContainer(root.containerInfo);
-          }
-        }
-      }
-      if (supportsPersistence) {
-        const fiberRoot: FiberRoot = finishedWork.stateNode;
-        const containerInfo = fiberRoot.containerInfo;
-        const pendingChildren = fiberRoot.pendingChildren;
-        replaceContainerChildren(containerInfo, pendingChildren);
-      }
-      return;
-    }
-    case HostPortal: {
-      if (supportsPersistence) {
-        const portal = finishedWork.stateNode;
-        const containerInfo = portal.containerInfo;
-        const pendingChildren = portal.pendingChildren;
-        replaceContainerChildren(containerInfo, pendingChildren);
-      }
-      return;
-    }
-    case Profiler: {
-      return;
-    }
-    case SuspenseComponent: {
-      commitSuspenseCallback(finishedWork);
-      attachSuspenseRetryListeners(finishedWork);
-      return;
-    }
-    case SuspenseListComponent: {
-      attachSuspenseRetryListeners(finishedWork);
-      return;
-    }
-    case IncompleteClassComponent: {
-      return;
-    }
-    case ScopeComponent: {
-      if (enableScopeAPI) {
-        const scopeInstance = finishedWork.stateNode;
-        prepareScopeUpdate(scopeInstance, finishedWork);
-        return;
-      }
-      break;
-    }
-  }
-
-  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 commitSuspenseCallback(finishedWork: Fiber) {
   // TODO: Move this to passive phase
   const newState: SuspenseState | null = finishedWork.memoizedState;
@@ -2133,6 +1981,7 @@ function commitMutationEffectsOnFiber(
   // switching on the type of work before checking the flags. That's what
   // we do in all the other phases. I think this one is only different
   // because of the shared reconciliation logic below.
+  const current = finishedWork.alternate;
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
@@ -2140,7 +1989,6 @@ function commitMutationEffectsOnFiber(
   }
 
   if (flags & Ref) {
-    const current = finishedWork.alternate;
     if (current !== null) {
       commitDetachRef(current);
     }
@@ -2159,7 +2007,6 @@ function commitMutationEffectsOnFiber(
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         if (isHidden) {
-          const current = finishedWork.alternate;
           const wasHidden = current !== null && current.memoizedState !== null;
           if (!wasHidden) {
             // TODO: Move to passive phase
@@ -2171,7 +2018,6 @@ function commitMutationEffectsOnFiber(
       case OffscreenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        const current = finishedWork.alternate;
         const wasHidden = current !== null && current.memoizedState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
@@ -2205,49 +2051,167 @@ function commitMutationEffectsOnFiber(
     }
   }
 
-  // The following switch statement is only concerned about placement,
-  // updates, and deletions. To avoid needing to add a case for every possible
-  // bitmap value, we remove the secondary effects from the effect tag and
-  // switch on that value.
-  const primaryFlags = flags & (Placement | Update | Hydrating);
-  outer: switch (primaryFlags) {
-    case Placement: {
-      commitPlacement(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;
-      break;
-    }
-    case PlacementAndUpdate: {
-      // Placement
-      commitPlacement(finishedWork);
-      // Clear the "placement" from effect tag so that we know that this is
-      // inserted, before any life-cycles like componentDidMount gets called.
-      finishedWork.flags &= ~Placement;
+  // These are related to reconciliation so they affect every fiber type; that's
+  // why they aren't in the main switch statement below.
+  if (flags & Placement) {
+    commitPlacement(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;
+  }
 
-      // Update
-      const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
-      break;
-    }
-    case Hydrating: {
-      finishedWork.flags &= ~Hydrating;
-      break;
-    }
-    case HydratingAndUpdate: {
-      finishedWork.flags &= ~Hydrating;
+  // TODO: Move the ad-hoc flag checks above into the main switch statement.
+  if (flags & Update) {
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case MemoComponent:
+      case SimpleMemoComponent: {
+        commitHookEffectListUnmount(
+          HookInsertion | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
+        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+        // 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 (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          try {
+            startLayoutEffectTimer();
+            commitHookEffectListUnmount(
+              HookLayout | HookHasEffect,
+              finishedWork,
+              finishedWork.return,
+            );
+          } finally {
+            recordLayoutEffectDuration(finishedWork);
+          }
+        } else {
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+        }
+        return;
+      }
+      case ClassComponent: {
+        return;
+      }
+      case HostComponent: {
+        if (supportsMutation) {
+          const instance: Instance = finishedWork.stateNode;
+          if (instance != null) {
+            // Commit the work prepared earlier.
+            const newProps = 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 oldProps =
+              current !== null ? current.memoizedProps : newProps;
+            const type = finishedWork.type;
+            // TODO: Type the updateQueue to be specific to host components.
+            const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
+            finishedWork.updateQueue = null;
+            if (updatePayload !== null) {
+              commitUpdate(
+                instance,
+                updatePayload,
+                type,
+                oldProps,
+                newProps,
+                finishedWork,
+              );
+            }
+          }
+        }
+        return;
+      }
+      case HostText: {
+        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.',
+            );
+          }
 
-      // Update
-      const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
-      break;
-    }
-    case Update: {
-      const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
-      break;
+          const textInstance: TextInstance = finishedWork.stateNode;
+          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;
+          commitTextUpdate(textInstance, oldText, newText);
+        }
+        return;
+      }
+      case HostRoot: {
+        if (supportsMutation && supportsHydration) {
+          if (current !== null) {
+            const prevRootState: RootState = current.memoizedState;
+            if (prevRootState.isDehydrated) {
+              commitHydratedContainer(root.containerInfo);
+            }
+          }
+        }
+        if (supportsPersistence) {
+          const containerInfo = root.containerInfo;
+          const pendingChildren = root.pendingChildren;
+          replaceContainerChildren(containerInfo, pendingChildren);
+        }
+        return;
+      }
+      case HostPortal: {
+        if (supportsPersistence) {
+          const portal = finishedWork.stateNode;
+          const containerInfo = portal.containerInfo;
+          const pendingChildren = portal.pendingChildren;
+          replaceContainerChildren(containerInfo, pendingChildren);
+        }
+        return;
+      }
+      case Profiler: {
+        return;
+      }
+      case SuspenseComponent: {
+        commitSuspenseCallback(finishedWork);
+        attachSuspenseRetryListeners(finishedWork);
+        return;
+      }
+      case SuspenseListComponent: {
+        attachSuspenseRetryListeners(finishedWork);
+        return;
+      }
+      case IncompleteClassComponent: {
+        return;
+      }
+      case ScopeComponent: {
+        if (enableScopeAPI) {
+          const scopeInstance = finishedWork.stateNode;
+          prepareScopeUpdate(scopeInstance, finishedWork);
+        }
+        return;
+      }
+      default: {
+        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.',
+        );
+      }
     }
   }
 }
@@ -3056,7 +3020,6 @@ export {
   commitResetTextContent,
   commitPlacement,
   commitDeletion,
-  commitWork,
   commitAttachRef,
   commitDetachRef,
   invokeLayoutEffectMountInDEV,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index cd250eadfd13..334d08b95259 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -68,13 +68,11 @@ import {
   NoFlags,
   ContentReset,
   Placement,
-  PlacementAndUpdate,
   ChildDeletion,
   Snapshot,
   Update,
   Ref,
   Hydrating,
-  HydratingAndUpdate,
   Passive,
   BeforeMutationMask,
   MutationMask,
@@ -1799,156 +1797,6 @@ function commitDeletion(
   detachFiberMutation(current);
 }
 
-function commitWork(current: Fiber | null, finishedWork: Fiber): void {
-  switch (finishedWork.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case MemoComponent:
-    case SimpleMemoComponent: {
-      commitHookEffectListUnmount(
-        HookInsertion | HookHasEffect,
-        finishedWork,
-        finishedWork.return,
-      );
-      commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
-      // 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 (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
-        }
-      } else {
-        commitHookEffectListUnmount(
-          HookLayout | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-      }
-      return;
-    }
-    case ClassComponent: {
-      return;
-    }
-    case HostComponent: {
-      if (supportsMutation) {
-        const instance: Instance = finishedWork.stateNode;
-        if (instance != null) {
-          // Commit the work prepared earlier.
-          const newProps = 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 oldProps = current !== null ? current.memoizedProps : newProps;
-          const type = finishedWork.type;
-          // TODO: Type the updateQueue to be specific to host components.
-          const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
-          finishedWork.updateQueue = null;
-          if (updatePayload !== null) {
-            commitUpdate(
-              instance,
-              updatePayload,
-              type,
-              oldProps,
-              newProps,
-              finishedWork,
-            );
-          }
-        }
-      }
-      return;
-    }
-    case HostText: {
-      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 textInstance: TextInstance = finishedWork.stateNode;
-        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;
-        commitTextUpdate(textInstance, oldText, newText);
-      }
-      return;
-    }
-    case HostRoot: {
-      if (supportsMutation && supportsHydration) {
-        if (current !== null) {
-          const prevRootState: RootState = current.memoizedState;
-          if (prevRootState.isDehydrated) {
-            const root: FiberRoot = finishedWork.stateNode;
-            commitHydratedContainer(root.containerInfo);
-          }
-        }
-      }
-      if (supportsPersistence) {
-        const fiberRoot: FiberRoot = finishedWork.stateNode;
-        const containerInfo = fiberRoot.containerInfo;
-        const pendingChildren = fiberRoot.pendingChildren;
-        replaceContainerChildren(containerInfo, pendingChildren);
-      }
-      return;
-    }
-    case HostPortal: {
-      if (supportsPersistence) {
-        const portal = finishedWork.stateNode;
-        const containerInfo = portal.containerInfo;
-        const pendingChildren = portal.pendingChildren;
-        replaceContainerChildren(containerInfo, pendingChildren);
-      }
-      return;
-    }
-    case Profiler: {
-      return;
-    }
-    case SuspenseComponent: {
-      commitSuspenseCallback(finishedWork);
-      attachSuspenseRetryListeners(finishedWork);
-      return;
-    }
-    case SuspenseListComponent: {
-      attachSuspenseRetryListeners(finishedWork);
-      return;
-    }
-    case IncompleteClassComponent: {
-      return;
-    }
-    case ScopeComponent: {
-      if (enableScopeAPI) {
-        const scopeInstance = finishedWork.stateNode;
-        prepareScopeUpdate(scopeInstance, finishedWork);
-        return;
-      }
-      break;
-    }
-  }
-
-  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 commitSuspenseCallback(finishedWork: Fiber) {
   // TODO: Move this to passive phase
   const newState: SuspenseState | null = finishedWork.memoizedState;
@@ -2133,6 +1981,7 @@ function commitMutationEffectsOnFiber(
   // switching on the type of work before checking the flags. That's what
   // we do in all the other phases. I think this one is only different
   // because of the shared reconciliation logic below.
+  const current = finishedWork.alternate;
   const flags = finishedWork.flags;
 
   if (flags & ContentReset) {
@@ -2140,7 +1989,6 @@ function commitMutationEffectsOnFiber(
   }
 
   if (flags & Ref) {
-    const current = finishedWork.alternate;
     if (current !== null) {
       commitDetachRef(current);
     }
@@ -2159,7 +2007,6 @@ function commitMutationEffectsOnFiber(
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         if (isHidden) {
-          const current = finishedWork.alternate;
           const wasHidden = current !== null && current.memoizedState !== null;
           if (!wasHidden) {
             // TODO: Move to passive phase
@@ -2171,7 +2018,6 @@ function commitMutationEffectsOnFiber(
       case OffscreenComponent: {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        const current = finishedWork.alternate;
         const wasHidden = current !== null && current.memoizedState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
@@ -2205,49 +2051,167 @@ function commitMutationEffectsOnFiber(
     }
   }
 
-  // The following switch statement is only concerned about placement,
-  // updates, and deletions. To avoid needing to add a case for every possible
-  // bitmap value, we remove the secondary effects from the effect tag and
-  // switch on that value.
-  const primaryFlags = flags & (Placement | Update | Hydrating);
-  outer: switch (primaryFlags) {
-    case Placement: {
-      commitPlacement(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;
-      break;
-    }
-    case PlacementAndUpdate: {
-      // Placement
-      commitPlacement(finishedWork);
-      // Clear the "placement" from effect tag so that we know that this is
-      // inserted, before any life-cycles like componentDidMount gets called.
-      finishedWork.flags &= ~Placement;
+  // These are related to reconciliation so they affect every fiber type; that's
+  // why they aren't in the main switch statement below.
+  if (flags & Placement) {
+    commitPlacement(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;
+  }
 
-      // Update
-      const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
-      break;
-    }
-    case Hydrating: {
-      finishedWork.flags &= ~Hydrating;
-      break;
-    }
-    case HydratingAndUpdate: {
-      finishedWork.flags &= ~Hydrating;
+  // TODO: Move the ad-hoc flag checks above into the main switch statement.
+  if (flags & Update) {
+    switch (finishedWork.tag) {
+      case FunctionComponent:
+      case ForwardRef:
+      case MemoComponent:
+      case SimpleMemoComponent: {
+        commitHookEffectListUnmount(
+          HookInsertion | HookHasEffect,
+          finishedWork,
+          finishedWork.return,
+        );
+        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+        // 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 (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          try {
+            startLayoutEffectTimer();
+            commitHookEffectListUnmount(
+              HookLayout | HookHasEffect,
+              finishedWork,
+              finishedWork.return,
+            );
+          } finally {
+            recordLayoutEffectDuration(finishedWork);
+          }
+        } else {
+          commitHookEffectListUnmount(
+            HookLayout | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+        }
+        return;
+      }
+      case ClassComponent: {
+        return;
+      }
+      case HostComponent: {
+        if (supportsMutation) {
+          const instance: Instance = finishedWork.stateNode;
+          if (instance != null) {
+            // Commit the work prepared earlier.
+            const newProps = 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 oldProps =
+              current !== null ? current.memoizedProps : newProps;
+            const type = finishedWork.type;
+            // TODO: Type the updateQueue to be specific to host components.
+            const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
+            finishedWork.updateQueue = null;
+            if (updatePayload !== null) {
+              commitUpdate(
+                instance,
+                updatePayload,
+                type,
+                oldProps,
+                newProps,
+                finishedWork,
+              );
+            }
+          }
+        }
+        return;
+      }
+      case HostText: {
+        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.',
+            );
+          }
 
-      // Update
-      const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
-      break;
-    }
-    case Update: {
-      const current = finishedWork.alternate;
-      commitWork(current, finishedWork);
-      break;
+          const textInstance: TextInstance = finishedWork.stateNode;
+          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;
+          commitTextUpdate(textInstance, oldText, newText);
+        }
+        return;
+      }
+      case HostRoot: {
+        if (supportsMutation && supportsHydration) {
+          if (current !== null) {
+            const prevRootState: RootState = current.memoizedState;
+            if (prevRootState.isDehydrated) {
+              commitHydratedContainer(root.containerInfo);
+            }
+          }
+        }
+        if (supportsPersistence) {
+          const containerInfo = root.containerInfo;
+          const pendingChildren = root.pendingChildren;
+          replaceContainerChildren(containerInfo, pendingChildren);
+        }
+        return;
+      }
+      case HostPortal: {
+        if (supportsPersistence) {
+          const portal = finishedWork.stateNode;
+          const containerInfo = portal.containerInfo;
+          const pendingChildren = portal.pendingChildren;
+          replaceContainerChildren(containerInfo, pendingChildren);
+        }
+        return;
+      }
+      case Profiler: {
+        return;
+      }
+      case SuspenseComponent: {
+        commitSuspenseCallback(finishedWork);
+        attachSuspenseRetryListeners(finishedWork);
+        return;
+      }
+      case SuspenseListComponent: {
+        attachSuspenseRetryListeners(finishedWork);
+        return;
+      }
+      case IncompleteClassComponent: {
+        return;
+      }
+      case ScopeComponent: {
+        if (enableScopeAPI) {
+          const scopeInstance = finishedWork.stateNode;
+          prepareScopeUpdate(scopeInstance, finishedWork);
+        }
+        return;
+      }
+      default: {
+        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.',
+        );
+      }
     }
   }
 }
@@ -3056,7 +3020,6 @@ export {
   commitResetTextContent,
   commitPlacement,
   commitDeletion,
-  commitWork,
   commitAttachRef,
   commitDetachRef,
   invokeLayoutEffectMountInDEV,
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 805c4bed918e..d22d9a189b6e 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -18,7 +18,6 @@ export const PerformedWork = /*                */ 0b00000000000000000000000001;
 // You can change the rest (and add more).
 export const Placement = /*                    */ 0b00000000000000000000000010;
 export const Update = /*                       */ 0b00000000000000000000000100;
-export const PlacementAndUpdate = /*           */ Placement | Update;
 export const Deletion = /*                     */ 0b00000000000000000000001000;
 export const ChildDeletion = /*                */ 0b00000000000000000000010000;
 export const ContentReset = /*                 */ 0b00000000000000000000100000;
@@ -29,7 +28,6 @@ export const Ref = /*                          */ 0b00000000000000001000000000;
 export const Snapshot = /*                     */ 0b00000000000000010000000000;
 export const Passive = /*                      */ 0b00000000000000100000000000;
 export const Hydrating = /*                    */ 0b00000000000001000000000000;
-export const HydratingAndUpdate = /*           */ Hydrating | Update;
 export const Visibility = /*                   */ 0b00000000000010000000000000;
 export const StoreConsistency = /*             */ 0b00000000000100000000000000;
 

From 54b5b32d53355ad1634a97e604a583e8da6fa842 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 7 Apr 2022 19:51:05 -0400
Subject: [PATCH 1287/1603] Move Update flag check into each switch case

The fiber tag is more specific than the effect flag, so we should always
refine the type of work first, to minimize redundant checks.

In the next step I'll move all other other flag checks in this function
into the same switch statement.
---
 .../src/ReactFiberCommitWork.new.js           | 72 +++++++++----------
 .../src/ReactFiberCommitWork.old.js           | 72 +++++++++----------
 2 files changed, 72 insertions(+), 72 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 35a7e71ed330..33854bc3f74e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2065,13 +2065,14 @@ function commitMutationEffectsOnFiber(
     finishedWork.flags &= ~Hydrating;
   }
 
+  // All logic in these branches should be wrapped in a flag check.
   // TODO: Move the ad-hoc flag checks above into the main switch statement.
-  if (flags & Update) {
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case MemoComponent:
-      case SimpleMemoComponent: {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      if (flags & Update) {
         commitHookEffectListUnmount(
           HookInsertion | HookHasEffect,
           finishedWork,
@@ -2105,12 +2106,11 @@ function commitMutationEffectsOnFiber(
             finishedWork.return,
           );
         }
-        return;
-      }
-      case ClassComponent: {
-        return;
       }
-      case HostComponent: {
+      return;
+    }
+    case HostComponent: {
+      if (flags & Update) {
         if (supportsMutation) {
           const instance: Instance = finishedWork.stateNode;
           if (instance != null) {
@@ -2137,9 +2137,11 @@ function commitMutationEffectsOnFiber(
             }
           }
         }
-        return;
       }
-      case HostText: {
+      return;
+    }
+    case HostText: {
+      if (flags & Update) {
         if (supportsMutation) {
           if (finishedWork.stateNode === null) {
             throw new Error(
@@ -2157,9 +2159,11 @@ function commitMutationEffectsOnFiber(
             current !== null ? current.memoizedProps : newText;
           commitTextUpdate(textInstance, oldText, newText);
         }
-        return;
       }
-      case HostRoot: {
+      return;
+    }
+    case HostRoot: {
+      if (flags & Update) {
         if (supportsMutation && supportsHydration) {
           if (current !== null) {
             const prevRootState: RootState = current.memoizedState;
@@ -2173,45 +2177,41 @@ function commitMutationEffectsOnFiber(
           const pendingChildren = root.pendingChildren;
           replaceContainerChildren(containerInfo, pendingChildren);
         }
-        return;
       }
-      case HostPortal: {
+      return;
+    }
+    case HostPortal: {
+      if (flags & Update) {
         if (supportsPersistence) {
           const portal = finishedWork.stateNode;
           const containerInfo = portal.containerInfo;
           const pendingChildren = portal.pendingChildren;
           replaceContainerChildren(containerInfo, pendingChildren);
         }
-        return;
-      }
-      case Profiler: {
-        return;
       }
-      case SuspenseComponent: {
+      return;
+    }
+    case SuspenseComponent: {
+      if (flags & Update) {
         commitSuspenseCallback(finishedWork);
         attachSuspenseRetryListeners(finishedWork);
-        return;
       }
-      case SuspenseListComponent: {
+      return;
+    }
+    case SuspenseListComponent: {
+      if (flags & Update) {
         attachSuspenseRetryListeners(finishedWork);
-        return;
-      }
-      case IncompleteClassComponent: {
-        return;
       }
-      case ScopeComponent: {
+      return;
+    }
+    case ScopeComponent: {
+      if (flags & Update) {
         if (enableScopeAPI) {
           const scopeInstance = finishedWork.stateNode;
           prepareScopeUpdate(scopeInstance, finishedWork);
         }
-        return;
-      }
-      default: {
-        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.',
-        );
       }
+      return;
     }
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 334d08b95259..de1e3239abbb 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2065,13 +2065,14 @@ function commitMutationEffectsOnFiber(
     finishedWork.flags &= ~Hydrating;
   }
 
+  // All logic in these branches should be wrapped in a flag check.
   // TODO: Move the ad-hoc flag checks above into the main switch statement.
-  if (flags & Update) {
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case MemoComponent:
-      case SimpleMemoComponent: {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      if (flags & Update) {
         commitHookEffectListUnmount(
           HookInsertion | HookHasEffect,
           finishedWork,
@@ -2105,12 +2106,11 @@ function commitMutationEffectsOnFiber(
             finishedWork.return,
           );
         }
-        return;
-      }
-      case ClassComponent: {
-        return;
       }
-      case HostComponent: {
+      return;
+    }
+    case HostComponent: {
+      if (flags & Update) {
         if (supportsMutation) {
           const instance: Instance = finishedWork.stateNode;
           if (instance != null) {
@@ -2137,9 +2137,11 @@ function commitMutationEffectsOnFiber(
             }
           }
         }
-        return;
       }
-      case HostText: {
+      return;
+    }
+    case HostText: {
+      if (flags & Update) {
         if (supportsMutation) {
           if (finishedWork.stateNode === null) {
             throw new Error(
@@ -2157,9 +2159,11 @@ function commitMutationEffectsOnFiber(
             current !== null ? current.memoizedProps : newText;
           commitTextUpdate(textInstance, oldText, newText);
         }
-        return;
       }
-      case HostRoot: {
+      return;
+    }
+    case HostRoot: {
+      if (flags & Update) {
         if (supportsMutation && supportsHydration) {
           if (current !== null) {
             const prevRootState: RootState = current.memoizedState;
@@ -2173,45 +2177,41 @@ function commitMutationEffectsOnFiber(
           const pendingChildren = root.pendingChildren;
           replaceContainerChildren(containerInfo, pendingChildren);
         }
-        return;
       }
-      case HostPortal: {
+      return;
+    }
+    case HostPortal: {
+      if (flags & Update) {
         if (supportsPersistence) {
           const portal = finishedWork.stateNode;
           const containerInfo = portal.containerInfo;
           const pendingChildren = portal.pendingChildren;
           replaceContainerChildren(containerInfo, pendingChildren);
         }
-        return;
-      }
-      case Profiler: {
-        return;
       }
-      case SuspenseComponent: {
+      return;
+    }
+    case SuspenseComponent: {
+      if (flags & Update) {
         commitSuspenseCallback(finishedWork);
         attachSuspenseRetryListeners(finishedWork);
-        return;
       }
-      case SuspenseListComponent: {
+      return;
+    }
+    case SuspenseListComponent: {
+      if (flags & Update) {
         attachSuspenseRetryListeners(finishedWork);
-        return;
-      }
-      case IncompleteClassComponent: {
-        return;
       }
-      case ScopeComponent: {
+      return;
+    }
+    case ScopeComponent: {
+      if (flags & Update) {
         if (enableScopeAPI) {
           const scopeInstance = finishedWork.stateNode;
           prepareScopeUpdate(scopeInstance, finishedWork);
         }
-        return;
-      }
-      default: {
-        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.',
-        );
       }
+      return;
     }
   }
 }

From c99c5f1df6e3c274d34bd2e5f0b27ac4af481f94 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 7 Apr 2022 20:05:50 -0400
Subject: [PATCH 1288/1603] Move ad hoc flag checks into main switch statement

We should always refine the type of fiber before checking the effect
flag, because the fiber tag is more specific.

Now we have a single switch statement for all mutation effects.
---
 .../src/ReactFiberCommitWork.new.js           | 219 ++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 219 ++++++++++--------
 2 files changed, 240 insertions(+), 198 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 33854bc3f74e..09ee3ca15b5f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1899,13 +1899,6 @@ export function isSuspenseBoundaryBeingHidden(
   return false;
 }
 
-function commitResetTextContent(current: Fiber) {
-  if (!supportsMutation) {
-    return;
-  }
-  resetTextContent(current.stateNode);
-}
-
 export function commitMutationEffects(
   root: FiberRoot,
   firstChild: Fiber,
@@ -1977,101 +1970,19 @@ function commitMutationEffectsOnFiber(
   root: FiberRoot,
   lanes: Lanes,
 ) {
-  // TODO: The factoring of this phase could probably be improved. Consider
-  // switching on the type of work before checking the flags. That's what
-  // we do in all the other phases. I think this one is only different
-  // because of the shared reconciliation logic below.
   const current = finishedWork.alternate;
   const flags = finishedWork.flags;
 
-  if (flags & ContentReset) {
-    commitResetTextContent(finishedWork);
-  }
-
-  if (flags & Ref) {
-    if (current !== null) {
-      commitDetachRef(current);
-    }
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (finishedWork.tag === ScopeComponent) {
-        commitAttachRef(finishedWork);
-      }
-    }
-  }
-
-  if (flags & Visibility) {
-    switch (finishedWork.tag) {
-      case SuspenseComponent: {
-        const newState: OffscreenState | null = finishedWork.memoizedState;
-        const isHidden = newState !== null;
-        if (isHidden) {
-          const wasHidden = current !== null && current.memoizedState !== null;
-          if (!wasHidden) {
-            // TODO: Move to passive phase
-            markCommitTimeOfFallback();
-          }
-        }
-        break;
-      }
-      case OffscreenComponent: {
-        const newState: OffscreenState | null = finishedWork.memoizedState;
-        const isHidden = newState !== null;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const offscreenBoundary: Fiber = finishedWork;
-
-        if (supportsMutation) {
-          // TODO: This needs to run whenever there's an insertion or update
-          // inside a hidden Offscreen tree.
-          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-        }
-
-        if (enableSuspenseLayoutEffectSemantics) {
-          if (isHidden) {
-            if (!wasHidden) {
-              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                nextEffect = offscreenBoundary;
-                let offscreenChild = offscreenBoundary.child;
-                while (offscreenChild !== null) {
-                  nextEffect = offscreenChild;
-                  disappearLayoutEffects_begin(offscreenChild);
-                  offscreenChild = offscreenChild.sibling;
-                }
-              }
-            }
-          } else {
-            if (wasHidden) {
-              // TODO: Move re-appear call here for symmetry?
-            }
-          }
-          break;
-        }
-      }
-    }
-  }
-
-  // These are related to reconciliation so they affect every fiber type; that's
-  // why they aren't in the main switch statement below.
-  if (flags & Placement) {
-    commitPlacement(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;
-  }
-
-  // All logic in these branches should be wrapped in a flag check.
-  // TODO: Move the ad-hoc flag checks above into the main switch statement.
+  // 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 reconcilation, because those can be set on all fiber types.
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         commitHookEffectListUnmount(
           HookInsertion | HookHasEffect,
@@ -2109,9 +2020,31 @@ function commitMutationEffectsOnFiber(
       }
       return;
     }
+    case ClassComponent: {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Ref) {
+        if (current !== null) {
+          commitDetachRef(current);
+        }
+      }
+      return;
+    }
     case HostComponent: {
-      if (flags & Update) {
-        if (supportsMutation) {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Ref) {
+        if (current !== null) {
+          commitDetachRef(current);
+        }
+      }
+      if (supportsMutation) {
+        if (flags & ContentReset) {
+          const instance: Instance = finishedWork.stateNode;
+          resetTextContent(instance);
+        }
+
+        if (flags & Update) {
           const instance: Instance = finishedWork.stateNode;
           if (instance != null) {
             // Commit the work prepared earlier.
@@ -2141,6 +2074,8 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostText: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         if (supportsMutation) {
           if (finishedWork.stateNode === null) {
@@ -2163,6 +2098,8 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostRoot: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         if (supportsMutation && supportsHydration) {
           if (current !== null) {
@@ -2181,6 +2118,8 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostPortal: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         if (supportsPersistence) {
           const portal = finishedWork.stateNode;
@@ -2192,27 +2131,110 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case SuspenseComponent: {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Visibility) {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        if (isHidden) {
+          const wasHidden = current !== null && current.memoizedState !== null;
+          if (!wasHidden) {
+            // TODO: Move to passive phase
+            markCommitTimeOfFallback();
+          }
+        }
+      }
       if (flags & Update) {
         commitSuspenseCallback(finishedWork);
         attachSuspenseRetryListeners(finishedWork);
       }
       return;
     }
+    case OffscreenComponent: {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Visibility) {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const offscreenBoundary: Fiber = finishedWork;
+
+        if (supportsMutation) {
+          // TODO: This needs to run whenever there's an insertion or update
+          // inside a hidden Offscreen tree.
+          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+        }
+
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
+                }
+              }
+            }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
+            }
+          }
+        }
+      }
+      return;
+    }
     case SuspenseListComponent: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         attachSuspenseRetryListeners(finishedWork);
       }
       return;
     }
     case ScopeComponent: {
-      if (flags & Update) {
-        if (enableScopeAPI) {
+      if (enableScopeAPI) {
+        commitReconciliationEffects(finishedWork);
+
+        // TODO: This is a temporary solution that allowed us to transition away
+        // from React Flare on www.
+        if (flags & Ref) {
+          if (current !== null) {
+            commitDetachRef(current);
+          }
+          commitAttachRef(finishedWork);
+        }
+        if (flags & Update) {
           const scopeInstance = finishedWork.stateNode;
           prepareScopeUpdate(scopeInstance, finishedWork);
         }
       }
       return;
     }
+    default: {
+      commitReconciliationEffects(finishedWork);
+    }
+  }
+}
+
+function commitReconciliationEffects(finishedWork: Fiber) {
+  // 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) {
+    commitPlacement(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;
   }
 }
 
@@ -3017,7 +3039,6 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
 }
 
 export {
-  commitResetTextContent,
   commitPlacement,
   commitDeletion,
   commitAttachRef,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index de1e3239abbb..d3ef4f402270 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1899,13 +1899,6 @@ export function isSuspenseBoundaryBeingHidden(
   return false;
 }
 
-function commitResetTextContent(current: Fiber) {
-  if (!supportsMutation) {
-    return;
-  }
-  resetTextContent(current.stateNode);
-}
-
 export function commitMutationEffects(
   root: FiberRoot,
   firstChild: Fiber,
@@ -1977,101 +1970,19 @@ function commitMutationEffectsOnFiber(
   root: FiberRoot,
   lanes: Lanes,
 ) {
-  // TODO: The factoring of this phase could probably be improved. Consider
-  // switching on the type of work before checking the flags. That's what
-  // we do in all the other phases. I think this one is only different
-  // because of the shared reconciliation logic below.
   const current = finishedWork.alternate;
   const flags = finishedWork.flags;
 
-  if (flags & ContentReset) {
-    commitResetTextContent(finishedWork);
-  }
-
-  if (flags & Ref) {
-    if (current !== null) {
-      commitDetachRef(current);
-    }
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (finishedWork.tag === ScopeComponent) {
-        commitAttachRef(finishedWork);
-      }
-    }
-  }
-
-  if (flags & Visibility) {
-    switch (finishedWork.tag) {
-      case SuspenseComponent: {
-        const newState: OffscreenState | null = finishedWork.memoizedState;
-        const isHidden = newState !== null;
-        if (isHidden) {
-          const wasHidden = current !== null && current.memoizedState !== null;
-          if (!wasHidden) {
-            // TODO: Move to passive phase
-            markCommitTimeOfFallback();
-          }
-        }
-        break;
-      }
-      case OffscreenComponent: {
-        const newState: OffscreenState | null = finishedWork.memoizedState;
-        const isHidden = newState !== null;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const offscreenBoundary: Fiber = finishedWork;
-
-        if (supportsMutation) {
-          // TODO: This needs to run whenever there's an insertion or update
-          // inside a hidden Offscreen tree.
-          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-        }
-
-        if (enableSuspenseLayoutEffectSemantics) {
-          if (isHidden) {
-            if (!wasHidden) {
-              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                nextEffect = offscreenBoundary;
-                let offscreenChild = offscreenBoundary.child;
-                while (offscreenChild !== null) {
-                  nextEffect = offscreenChild;
-                  disappearLayoutEffects_begin(offscreenChild);
-                  offscreenChild = offscreenChild.sibling;
-                }
-              }
-            }
-          } else {
-            if (wasHidden) {
-              // TODO: Move re-appear call here for symmetry?
-            }
-          }
-          break;
-        }
-      }
-    }
-  }
-
-  // These are related to reconciliation so they affect every fiber type; that's
-  // why they aren't in the main switch statement below.
-  if (flags & Placement) {
-    commitPlacement(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;
-  }
-
-  // All logic in these branches should be wrapped in a flag check.
-  // TODO: Move the ad-hoc flag checks above into the main switch statement.
+  // 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 reconcilation, because those can be set on all fiber types.
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         commitHookEffectListUnmount(
           HookInsertion | HookHasEffect,
@@ -2109,9 +2020,31 @@ function commitMutationEffectsOnFiber(
       }
       return;
     }
+    case ClassComponent: {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Ref) {
+        if (current !== null) {
+          commitDetachRef(current);
+        }
+      }
+      return;
+    }
     case HostComponent: {
-      if (flags & Update) {
-        if (supportsMutation) {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Ref) {
+        if (current !== null) {
+          commitDetachRef(current);
+        }
+      }
+      if (supportsMutation) {
+        if (flags & ContentReset) {
+          const instance: Instance = finishedWork.stateNode;
+          resetTextContent(instance);
+        }
+
+        if (flags & Update) {
           const instance: Instance = finishedWork.stateNode;
           if (instance != null) {
             // Commit the work prepared earlier.
@@ -2141,6 +2074,8 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostText: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         if (supportsMutation) {
           if (finishedWork.stateNode === null) {
@@ -2163,6 +2098,8 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostRoot: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         if (supportsMutation && supportsHydration) {
           if (current !== null) {
@@ -2181,6 +2118,8 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostPortal: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         if (supportsPersistence) {
           const portal = finishedWork.stateNode;
@@ -2192,27 +2131,110 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case SuspenseComponent: {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Visibility) {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        if (isHidden) {
+          const wasHidden = current !== null && current.memoizedState !== null;
+          if (!wasHidden) {
+            // TODO: Move to passive phase
+            markCommitTimeOfFallback();
+          }
+        }
+      }
       if (flags & Update) {
         commitSuspenseCallback(finishedWork);
         attachSuspenseRetryListeners(finishedWork);
       }
       return;
     }
+    case OffscreenComponent: {
+      commitReconciliationEffects(finishedWork);
+
+      if (flags & Visibility) {
+        const newState: OffscreenState | null = finishedWork.memoizedState;
+        const isHidden = newState !== null;
+        const wasHidden = current !== null && current.memoizedState !== null;
+        const offscreenBoundary: Fiber = finishedWork;
+
+        if (supportsMutation) {
+          // TODO: This needs to run whenever there's an insertion or update
+          // inside a hidden Offscreen tree.
+          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+        }
+
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
+                }
+              }
+            }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
+            }
+          }
+        }
+      }
+      return;
+    }
     case SuspenseListComponent: {
+      commitReconciliationEffects(finishedWork);
+
       if (flags & Update) {
         attachSuspenseRetryListeners(finishedWork);
       }
       return;
     }
     case ScopeComponent: {
-      if (flags & Update) {
-        if (enableScopeAPI) {
+      if (enableScopeAPI) {
+        commitReconciliationEffects(finishedWork);
+
+        // TODO: This is a temporary solution that allowed us to transition away
+        // from React Flare on www.
+        if (flags & Ref) {
+          if (current !== null) {
+            commitDetachRef(current);
+          }
+          commitAttachRef(finishedWork);
+        }
+        if (flags & Update) {
           const scopeInstance = finishedWork.stateNode;
           prepareScopeUpdate(scopeInstance, finishedWork);
         }
       }
       return;
     }
+    default: {
+      commitReconciliationEffects(finishedWork);
+    }
+  }
+}
+
+function commitReconciliationEffects(finishedWork: Fiber) {
+  // 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) {
+    commitPlacement(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;
   }
 }
 
@@ -3017,7 +3039,6 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
 }
 
 export {
-  commitResetTextContent,
   commitPlacement,
   commitDeletion,
   commitAttachRef,

From bcc1b3121e3052f88a643eaefe93f300a4bfa7b2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Apr 2022 00:05:15 -0400
Subject: [PATCH 1289/1603] Move reportUncaughtErrorInDev to
 captureCommitPhaseError

reportUncaughtErrorInDev is always followed by captureCommitPhaseError,
so we can move it into that function.
---
 .../src/ReactFiberCommitWork.new.js           | 19 +------------------
 .../src/ReactFiberCommitWork.old.js           | 19 +------------------
 .../src/ReactFiberWorkLoop.new.js             |  2 ++
 .../src/ReactFiberWorkLoop.old.js             |  2 ++
 4 files changed, 6 insertions(+), 36 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 09ee3ca15b5f..f4760c5d89ad 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -180,7 +180,7 @@ let nextEffect: Fiber | null = null;
 let inProgressLanes: Lanes | null = null;
 let inProgressRoot: FiberRoot | null = null;
 
-function reportUncaughtErrorInDEV(error) {
+export function reportUncaughtErrorInDEV(error: mixed) {
   // Wrapping each small part of the commit phase into a guarded
   // callback is a bit too slow (https://github.com/facebook/react/pull/21666).
   // But we rely on it to surface errors to DEV tools like overlays
@@ -221,7 +221,6 @@ function safelyCallCommitHookLayoutEffectListMount(
   try {
     commitHookEffectListMount(HookLayout, current);
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -235,7 +234,6 @@ function safelyCallComponentWillUnmount(
   try {
     callComponentWillUnmountWithTimer(current, instance);
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -249,7 +247,6 @@ function safelyCallComponentDidMount(
   try {
     instance.componentDidMount();
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -259,7 +256,6 @@ function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   try {
     commitAttachRef(current);
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -285,7 +281,6 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
           retVal = ref(null);
         }
       } catch (error) {
-        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
       if (__DEV__) {
@@ -311,7 +306,6 @@ function safelyCallDestroy(
   try {
     destroy();
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -373,7 +367,6 @@ function commitBeforeMutationEffects_complete() {
     try {
       commitBeforeMutationEffectsOnFiber(fiber);
     } catch (error) {
-      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -1926,7 +1919,6 @@ function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
         try {
           commitDeletion(root, childToDelete, fiber);
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(childToDelete, fiber, error);
         }
       }
@@ -1949,7 +1941,6 @@ function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
     try {
       commitMutationEffectsOnFiber(fiber, root, lanes);
     } catch (error) {
-      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2340,7 +2331,6 @@ function commitLayoutMountEffects_complete(
       try {
         commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
       } catch (error) {
-        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2481,7 +2471,6 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
     try {
       reappearLayoutEffectsOnFiber(fiber);
     } catch (error) {
-      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2543,7 +2532,6 @@ function commitPassiveMountEffects_complete(
       try {
         commitPassiveMountOnFiber(root, fiber, committedLanes);
       } catch (error) {
-        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2945,7 +2933,6 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2955,7 +2942,6 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           instance.componentDidMount();
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2975,7 +2961,6 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2999,7 +2984,6 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -3030,7 +3014,6 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index d3ef4f402270..078a5b500ff9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -180,7 +180,7 @@ let nextEffect: Fiber | null = null;
 let inProgressLanes: Lanes | null = null;
 let inProgressRoot: FiberRoot | null = null;
 
-function reportUncaughtErrorInDEV(error) {
+export function reportUncaughtErrorInDEV(error: mixed) {
   // Wrapping each small part of the commit phase into a guarded
   // callback is a bit too slow (https://github.com/facebook/react/pull/21666).
   // But we rely on it to surface errors to DEV tools like overlays
@@ -221,7 +221,6 @@ function safelyCallCommitHookLayoutEffectListMount(
   try {
     commitHookEffectListMount(HookLayout, current);
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -235,7 +234,6 @@ function safelyCallComponentWillUnmount(
   try {
     callComponentWillUnmountWithTimer(current, instance);
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -249,7 +247,6 @@ function safelyCallComponentDidMount(
   try {
     instance.componentDidMount();
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -259,7 +256,6 @@ function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   try {
     commitAttachRef(current);
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -285,7 +281,6 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
           retVal = ref(null);
         }
       } catch (error) {
-        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(current, nearestMountedAncestor, error);
       }
       if (__DEV__) {
@@ -311,7 +306,6 @@ function safelyCallDestroy(
   try {
     destroy();
   } catch (error) {
-    reportUncaughtErrorInDEV(error);
     captureCommitPhaseError(current, nearestMountedAncestor, error);
   }
 }
@@ -373,7 +367,6 @@ function commitBeforeMutationEffects_complete() {
     try {
       commitBeforeMutationEffectsOnFiber(fiber);
     } catch (error) {
-      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -1926,7 +1919,6 @@ function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
         try {
           commitDeletion(root, childToDelete, fiber);
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(childToDelete, fiber, error);
         }
       }
@@ -1949,7 +1941,6 @@ function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
     try {
       commitMutationEffectsOnFiber(fiber, root, lanes);
     } catch (error) {
-      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2340,7 +2331,6 @@ function commitLayoutMountEffects_complete(
       try {
         commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
       } catch (error) {
-        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2481,7 +2471,6 @@ function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
     try {
       reappearLayoutEffectsOnFiber(fiber);
     } catch (error) {
-      reportUncaughtErrorInDEV(error);
       captureCommitPhaseError(fiber, fiber.return, error);
     }
     resetCurrentDebugFiberInDEV();
@@ -2543,7 +2532,6 @@ function commitPassiveMountEffects_complete(
       try {
         commitPassiveMountOnFiber(root, fiber, committedLanes);
       } catch (error) {
-        reportUncaughtErrorInDEV(error);
         captureCommitPhaseError(fiber, fiber.return, error);
       }
       resetCurrentDebugFiberInDEV();
@@ -2945,7 +2933,6 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2955,7 +2942,6 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
         try {
           instance.componentDidMount();
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2975,7 +2961,6 @@ function invokePassiveEffectMountInDEV(fiber: Fiber): void {
         try {
           commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -2999,7 +2984,6 @@ function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
         break;
@@ -3030,7 +3014,6 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
             fiber.return,
           );
         } catch (error) {
-          reportUncaughtErrorInDEV(error);
           captureCommitPhaseError(fiber, fiber.return, error);
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index bbd4acdf9e9b..643724724aaa 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -180,6 +180,7 @@ import {
   invokePassiveEffectMountInDEV,
   invokeLayoutEffectUnmountInDEV,
   invokePassiveEffectUnmountInDEV,
+  reportUncaughtErrorInDEV,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
@@ -2567,6 +2568,7 @@ export function captureCommitPhaseError(
   error: mixed,
 ) {
   if (__DEV__) {
+    reportUncaughtErrorInDEV(error);
     setIsRunningInsertionEffect(false);
   }
   if (sourceFiber.tag === HostRoot) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8e2dd32c9f16..a79e2071b25a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -180,6 +180,7 @@ import {
   invokePassiveEffectMountInDEV,
   invokeLayoutEffectUnmountInDEV,
   invokePassiveEffectUnmountInDEV,
+  reportUncaughtErrorInDEV,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactUpdateQueue.old';
 import {resetContextDependencies} from './ReactFiberNewContext.old';
@@ -2567,6 +2568,7 @@ export function captureCommitPhaseError(
   error: mixed,
 ) {
   if (__DEV__) {
+    reportUncaughtErrorInDEV(error);
     setIsRunningInsertionEffect(false);
   }
   if (sourceFiber.tag === HostRoot) {

From f9e6aef82880615d7d11fb9facf9edfd8c80dcf6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Apr 2022 00:34:56 -0400
Subject: [PATCH 1290/1603] Wrap try-catch directly around each user function

This moves the try-catch from around each fiber's mutation phase to
direclty around each user function (effect function, callback, etc).

We already do this when unmounting because if one unmount function
errors, we still need to call all the others so they can clean up
their resources.

Previously we didn't bother to do this for anything but unmount,
because if a mount effect throws, we're going to delete that whole
tree anyway.

But now that we're switching from an iterative loop to a recursive one,
we don't want every call frame on the stack to have a try-catch, since
the error handling requires additional memory.

Wrapping every user function is a bit tedious, but it's better
for performance. Many of them already had try blocks around
them already.
---
 .../src/ReactFiberCommitWork.new.js           | 152 ++++++++++++------
 .../src/ReactFiberCommitWork.old.js           | 152 ++++++++++++------
 2 files changed, 208 insertions(+), 96 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index f4760c5d89ad..05ea090d8788 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1077,21 +1077,28 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
       if (node.tag === HostComponent) {
         if (hostSubtreeRoot === null) {
           hostSubtreeRoot = node;
-
-          const instance = node.stateNode;
-          if (isHidden) {
-            hideInstance(instance);
-          } else {
-            unhideInstance(node.stateNode, node.memoizedProps);
+          try {
+            const instance = node.stateNode;
+            if (isHidden) {
+              hideInstance(instance);
+            } else {
+              unhideInstance(node.stateNode, node.memoizedProps);
+            }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       } else if (node.tag === HostText) {
         if (hostSubtreeRoot === null) {
-          const instance = node.stateNode;
-          if (isHidden) {
-            hideTextInstance(instance);
-          } else {
-            unhideTextInstance(instance, node.memoizedProps);
+          try {
+            const instance = node.stateNode;
+            if (isHidden) {
+              hideTextInstance(instance);
+            } else {
+              unhideTextInstance(instance, node.memoizedProps);
+            }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       } else if (
@@ -1938,11 +1945,7 @@ function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     setCurrentDebugFiberInDEV(fiber);
-    try {
-      commitMutationEffectsOnFiber(fiber, root, lanes);
-    } catch (error) {
-      captureCommitPhaseError(fiber, fiber.return, error);
-    }
+    commitMutationEffectsOnFiber(fiber, root, lanes);
     resetCurrentDebugFiberInDEV();
 
     const sibling = fiber.sibling;
@@ -1975,12 +1978,19 @@ function commitMutationEffectsOnFiber(
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
-        commitHookEffectListUnmount(
-          HookInsertion | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+        try {
+          commitHookEffectListUnmount(
+            HookInsertion | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+          commitHookEffectListMount(
+            HookInsertion | HookHasEffect,
+            finishedWork,
+          );
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
         // 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,
@@ -1998,15 +2008,20 @@ function commitMutationEffectsOnFiber(
               finishedWork,
               finishedWork.return,
             );
-          } finally {
-            recordLayoutEffectDuration(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
+          recordLayoutEffectDuration(finishedWork);
         } else {
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
+          try {
+            commitHookEffectListUnmount(
+              HookLayout | HookHasEffect,
+              finishedWork,
+              finishedWork.return,
+            );
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2016,7 +2031,7 @@ function commitMutationEffectsOnFiber(
 
       if (flags & Ref) {
         if (current !== null) {
-          commitDetachRef(current);
+          safelyDetachRef(current, current.return);
         }
       }
       return;
@@ -2026,13 +2041,17 @@ function commitMutationEffectsOnFiber(
 
       if (flags & Ref) {
         if (current !== null) {
-          commitDetachRef(current);
+          safelyDetachRef(current, current.return);
         }
       }
       if (supportsMutation) {
         if (flags & ContentReset) {
           const instance: Instance = finishedWork.stateNode;
-          resetTextContent(instance);
+          try {
+            resetTextContent(instance);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
 
         if (flags & Update) {
@@ -2050,14 +2069,22 @@ function commitMutationEffectsOnFiber(
             const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
             finishedWork.updateQueue = null;
             if (updatePayload !== null) {
-              commitUpdate(
-                instance,
-                updatePayload,
-                type,
-                oldProps,
-                newProps,
-                finishedWork,
-              );
+              try {
+                commitUpdate(
+                  instance,
+                  updatePayload,
+                  type,
+                  oldProps,
+                  newProps,
+                  finishedWork,
+                );
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           }
         }
@@ -2083,7 +2110,12 @@ function commitMutationEffectsOnFiber(
           // this case.
           const oldText: string =
             current !== null ? current.memoizedProps : newText;
-          commitTextUpdate(textInstance, oldText, newText);
+
+          try {
+            commitTextUpdate(textInstance, oldText, newText);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2096,14 +2128,26 @@ function commitMutationEffectsOnFiber(
           if (current !== null) {
             const prevRootState: RootState = current.memoizedState;
             if (prevRootState.isDehydrated) {
-              commitHydratedContainer(root.containerInfo);
+              try {
+                commitHydratedContainer(root.containerInfo);
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           }
         }
         if (supportsPersistence) {
           const containerInfo = root.containerInfo;
           const pendingChildren = root.pendingChildren;
-          replaceContainerChildren(containerInfo, pendingChildren);
+          try {
+            replaceContainerChildren(containerInfo, pendingChildren);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2116,7 +2160,11 @@ function commitMutationEffectsOnFiber(
           const portal = finishedWork.stateNode;
           const containerInfo = portal.containerInfo;
           const pendingChildren = portal.pendingChildren;
-          replaceContainerChildren(containerInfo, pendingChildren);
+          try {
+            replaceContainerChildren(containerInfo, pendingChildren);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2136,7 +2184,11 @@ function commitMutationEffectsOnFiber(
         }
       }
       if (flags & Update) {
-        commitSuspenseCallback(finishedWork);
+        try {
+          commitSuspenseCallback(finishedWork);
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
         attachSuspenseRetryListeners(finishedWork);
       }
       return;
@@ -2194,9 +2246,9 @@ function commitMutationEffectsOnFiber(
         // from React Flare on www.
         if (flags & Ref) {
           if (current !== null) {
-            commitDetachRef(current);
+            safelyDetachRef(finishedWork, finishedWork.return);
           }
-          commitAttachRef(finishedWork);
+          safelyAttachRef(finishedWork, finishedWork.return);
         }
         if (flags & Update) {
           const scopeInstance = finishedWork.stateNode;
@@ -2217,7 +2269,11 @@ function commitReconciliationEffects(finishedWork: Fiber) {
   // before the effects on this fiber have fired.
   const flags = finishedWork.flags;
   if (flags & Placement) {
-    commitPlacement(finishedWork);
+    try {
+      commitPlacement(finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
     // 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
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 078a5b500ff9..49521099d384 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1077,21 +1077,28 @@ function hideOrUnhideAllChildren(finishedWork, isHidden) {
       if (node.tag === HostComponent) {
         if (hostSubtreeRoot === null) {
           hostSubtreeRoot = node;
-
-          const instance = node.stateNode;
-          if (isHidden) {
-            hideInstance(instance);
-          } else {
-            unhideInstance(node.stateNode, node.memoizedProps);
+          try {
+            const instance = node.stateNode;
+            if (isHidden) {
+              hideInstance(instance);
+            } else {
+              unhideInstance(node.stateNode, node.memoizedProps);
+            }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       } else if (node.tag === HostText) {
         if (hostSubtreeRoot === null) {
-          const instance = node.stateNode;
-          if (isHidden) {
-            hideTextInstance(instance);
-          } else {
-            unhideTextInstance(instance, node.memoizedProps);
+          try {
+            const instance = node.stateNode;
+            if (isHidden) {
+              hideTextInstance(instance);
+            } else {
+              unhideTextInstance(instance, node.memoizedProps);
+            }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       } else if (
@@ -1938,11 +1945,7 @@ function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
     setCurrentDebugFiberInDEV(fiber);
-    try {
-      commitMutationEffectsOnFiber(fiber, root, lanes);
-    } catch (error) {
-      captureCommitPhaseError(fiber, fiber.return, error);
-    }
+    commitMutationEffectsOnFiber(fiber, root, lanes);
     resetCurrentDebugFiberInDEV();
 
     const sibling = fiber.sibling;
@@ -1975,12 +1978,19 @@ function commitMutationEffectsOnFiber(
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
-        commitHookEffectListUnmount(
-          HookInsertion | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-        commitHookEffectListMount(HookInsertion | HookHasEffect, finishedWork);
+        try {
+          commitHookEffectListUnmount(
+            HookInsertion | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+          commitHookEffectListMount(
+            HookInsertion | HookHasEffect,
+            finishedWork,
+          );
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
         // 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,
@@ -1998,15 +2008,20 @@ function commitMutationEffectsOnFiber(
               finishedWork,
               finishedWork.return,
             );
-          } finally {
-            recordLayoutEffectDuration(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
+          recordLayoutEffectDuration(finishedWork);
         } else {
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
+          try {
+            commitHookEffectListUnmount(
+              HookLayout | HookHasEffect,
+              finishedWork,
+              finishedWork.return,
+            );
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2016,7 +2031,7 @@ function commitMutationEffectsOnFiber(
 
       if (flags & Ref) {
         if (current !== null) {
-          commitDetachRef(current);
+          safelyDetachRef(current, current.return);
         }
       }
       return;
@@ -2026,13 +2041,17 @@ function commitMutationEffectsOnFiber(
 
       if (flags & Ref) {
         if (current !== null) {
-          commitDetachRef(current);
+          safelyDetachRef(current, current.return);
         }
       }
       if (supportsMutation) {
         if (flags & ContentReset) {
           const instance: Instance = finishedWork.stateNode;
-          resetTextContent(instance);
+          try {
+            resetTextContent(instance);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
 
         if (flags & Update) {
@@ -2050,14 +2069,22 @@ function commitMutationEffectsOnFiber(
             const updatePayload: null | UpdatePayload = (finishedWork.updateQueue: any);
             finishedWork.updateQueue = null;
             if (updatePayload !== null) {
-              commitUpdate(
-                instance,
-                updatePayload,
-                type,
-                oldProps,
-                newProps,
-                finishedWork,
-              );
+              try {
+                commitUpdate(
+                  instance,
+                  updatePayload,
+                  type,
+                  oldProps,
+                  newProps,
+                  finishedWork,
+                );
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           }
         }
@@ -2083,7 +2110,12 @@ function commitMutationEffectsOnFiber(
           // this case.
           const oldText: string =
             current !== null ? current.memoizedProps : newText;
-          commitTextUpdate(textInstance, oldText, newText);
+
+          try {
+            commitTextUpdate(textInstance, oldText, newText);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2096,14 +2128,26 @@ function commitMutationEffectsOnFiber(
           if (current !== null) {
             const prevRootState: RootState = current.memoizedState;
             if (prevRootState.isDehydrated) {
-              commitHydratedContainer(root.containerInfo);
+              try {
+                commitHydratedContainer(root.containerInfo);
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           }
         }
         if (supportsPersistence) {
           const containerInfo = root.containerInfo;
           const pendingChildren = root.pendingChildren;
-          replaceContainerChildren(containerInfo, pendingChildren);
+          try {
+            replaceContainerChildren(containerInfo, pendingChildren);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2116,7 +2160,11 @@ function commitMutationEffectsOnFiber(
           const portal = finishedWork.stateNode;
           const containerInfo = portal.containerInfo;
           const pendingChildren = portal.pendingChildren;
-          replaceContainerChildren(containerInfo, pendingChildren);
+          try {
+            replaceContainerChildren(containerInfo, pendingChildren);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       return;
@@ -2136,7 +2184,11 @@ function commitMutationEffectsOnFiber(
         }
       }
       if (flags & Update) {
-        commitSuspenseCallback(finishedWork);
+        try {
+          commitSuspenseCallback(finishedWork);
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
         attachSuspenseRetryListeners(finishedWork);
       }
       return;
@@ -2194,9 +2246,9 @@ function commitMutationEffectsOnFiber(
         // from React Flare on www.
         if (flags & Ref) {
           if (current !== null) {
-            commitDetachRef(current);
+            safelyDetachRef(finishedWork, finishedWork.return);
           }
-          commitAttachRef(finishedWork);
+          safelyAttachRef(finishedWork, finishedWork.return);
         }
         if (flags & Update) {
           const scopeInstance = finishedWork.stateNode;
@@ -2217,7 +2269,11 @@ function commitReconciliationEffects(finishedWork: Fiber) {
   // before the effects on this fiber have fired.
   const flags = finishedWork.flags;
   if (flags & Placement) {
-    commitPlacement(finishedWork);
+    try {
+      commitPlacement(finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
     // 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

From 481dece5808d1207acd66a6a0365efee729cf0f7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Apr 2022 00:45:10 -0400
Subject: [PATCH 1291/1603] Use recursion to traverse during mutation phase

Most of the commit phase uses iterative loops to traverse the tree.
Originally we thought this would be faster than using recursion, but
a while back @trueadm did some performance testing and found that the
loop was slower because we assign to the `return` pointer before
entering a subtree (which we have to do because the `return` pointer
is not always consistent; it could point to one of two fibers).

The other motivation is so we can take advantage of the JS stack to
track contextual information, like the nearest host parent.

We already use recursion in a few places; this changes the mutation
phase to use it, too.
---
 .../react-reconciler/src/ReactCurrentFiber.js | 12 ++-
 .../src/ReactFiberCommitWork.new.js           | 91 ++++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 91 ++++++++++---------
 3 files changed, 108 insertions(+), 86 deletions(-)

diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js
index b2186131a98a..08853b384bc6 100644
--- a/packages/react-reconciler/src/ReactCurrentFiber.js
+++ b/packages/react-reconciler/src/ReactCurrentFiber.js
@@ -51,14 +51,22 @@ export function resetCurrentFiber() {
   }
 }
 
-export function setCurrentFiber(fiber: Fiber) {
+export function setCurrentFiber(fiber: Fiber | null) {
   if (__DEV__) {
-    ReactDebugCurrentFrame.getCurrentStack = getCurrentFiberStackInDev;
+    ReactDebugCurrentFrame.getCurrentStack =
+      fiber === null ? null : getCurrentFiberStackInDev;
     current = fiber;
     isRendering = false;
   }
 }
 
+export function getCurrentFiber(): Fiber | null {
+  if (__DEV__) {
+    return current;
+  }
+  return null;
+}
+
 export function setIsRendering(rendering: boolean) {
   if (__DEV__) {
     isRendering = rendering;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 05ea090d8788..204275544923 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -84,6 +84,7 @@ import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFrom
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
+  getCurrentFiber as getCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
 import {
@@ -1901,62 +1902,50 @@ export function isSuspenseBoundaryBeingHidden(
 
 export function commitMutationEffects(
   root: FiberRoot,
-  firstChild: Fiber,
+  finishedWork: Fiber,
   committedLanes: Lanes,
 ) {
   inProgressLanes = committedLanes;
   inProgressRoot = root;
-  nextEffect = firstChild;
+  nextEffect = finishedWork;
 
-  commitMutationEffects_begin(root, committedLanes);
+  setCurrentDebugFiberInDEV(finishedWork);
+  commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
+  setCurrentDebugFiberInDEV(finishedWork);
 
   inProgressLanes = null;
   inProgressRoot = null;
 }
 
-function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-
-    // 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 childToDelete = deletions[i];
-        try {
-          commitDeletion(root, childToDelete, fiber);
-        } catch (error) {
-          captureCommitPhaseError(childToDelete, fiber, error);
-        }
+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 hae fired.
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      try {
+        commitDeletion(root, childToDelete, parentFiber);
+      } catch (error) {
+        captureCommitPhaseError(childToDelete, parentFiber, error);
       }
     }
-
-    const child = fiber.child;
-    if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
-      child.return = fiber;
-      nextEffect = child;
-    } else {
-      commitMutationEffects_complete(root, lanes);
-    }
   }
-}
 
-function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    setCurrentDebugFiberInDEV(fiber);
-    commitMutationEffectsOnFiber(fiber, root, lanes);
-    resetCurrentDebugFiberInDEV();
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  if (parentFiber.subtreeFlags & MutationMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitMutationEffectsOnFiber(child, root, lanes);
+      child = child.sibling;
     }
-
-    nextEffect = fiber.return;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function commitMutationEffectsOnFiber(
@@ -1975,6 +1964,7 @@ function commitMutationEffectsOnFiber(
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2027,6 +2017,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case ClassComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Ref) {
@@ -2037,6 +2028,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Ref) {
@@ -2045,7 +2037,13 @@ function commitMutationEffectsOnFiber(
         }
       }
       if (supportsMutation) {
-        if (flags & ContentReset) {
+        // 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) {
           const instance: Instance = finishedWork.stateNode;
           try {
             resetTextContent(instance);
@@ -2092,6 +2090,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostText: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2121,6 +2120,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostRoot: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2153,6 +2153,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostPortal: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2170,6 +2171,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case SuspenseComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
@@ -2194,6 +2196,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
@@ -2231,6 +2234,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case SuspenseListComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2240,6 +2244,7 @@ function commitMutationEffectsOnFiber(
     }
     case ScopeComponent: {
       if (enableScopeAPI) {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
         commitReconciliationEffects(finishedWork);
 
         // TODO: This is a temporary solution that allowed us to transition away
@@ -2258,11 +2263,13 @@ function commitMutationEffectsOnFiber(
       return;
     }
     default: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
+
+      return;
     }
   }
 }
-
 function commitReconciliationEffects(finishedWork: Fiber) {
   // Placement effects (insertions, reorders) can be scheduled on any fiber
   // type. They needs to happen after the children effects have fired, but
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 49521099d384..8c1f0b27242b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -84,6 +84,7 @@ import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFrom
 import {
   resetCurrentFiber as resetCurrentDebugFiberInDEV,
   setCurrentFiber as setCurrentDebugFiberInDEV,
+  getCurrentFiber as getCurrentDebugFiberInDEV,
 } from './ReactCurrentFiber';
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
 import {
@@ -1901,62 +1902,50 @@ export function isSuspenseBoundaryBeingHidden(
 
 export function commitMutationEffects(
   root: FiberRoot,
-  firstChild: Fiber,
+  finishedWork: Fiber,
   committedLanes: Lanes,
 ) {
   inProgressLanes = committedLanes;
   inProgressRoot = root;
-  nextEffect = firstChild;
+  nextEffect = finishedWork;
 
-  commitMutationEffects_begin(root, committedLanes);
+  setCurrentDebugFiberInDEV(finishedWork);
+  commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
+  setCurrentDebugFiberInDEV(finishedWork);
 
   inProgressLanes = null;
   inProgressRoot = null;
 }
 
-function commitMutationEffects_begin(root: FiberRoot, lanes: Lanes) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-
-    // 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 childToDelete = deletions[i];
-        try {
-          commitDeletion(root, childToDelete, fiber);
-        } catch (error) {
-          captureCommitPhaseError(childToDelete, fiber, error);
-        }
+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 hae fired.
+  const deletions = parentFiber.deletions;
+  if (deletions !== null) {
+    for (let i = 0; i < deletions.length; i++) {
+      const childToDelete = deletions[i];
+      try {
+        commitDeletion(root, childToDelete, parentFiber);
+      } catch (error) {
+        captureCommitPhaseError(childToDelete, parentFiber, error);
       }
     }
-
-    const child = fiber.child;
-    if ((fiber.subtreeFlags & MutationMask) !== NoFlags && child !== null) {
-      child.return = fiber;
-      nextEffect = child;
-    } else {
-      commitMutationEffects_complete(root, lanes);
-    }
   }
-}
 
-function commitMutationEffects_complete(root: FiberRoot, lanes: Lanes) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    setCurrentDebugFiberInDEV(fiber);
-    commitMutationEffectsOnFiber(fiber, root, lanes);
-    resetCurrentDebugFiberInDEV();
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  if (parentFiber.subtreeFlags & MutationMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitMutationEffectsOnFiber(child, root, lanes);
+      child = child.sibling;
     }
-
-    nextEffect = fiber.return;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function commitMutationEffectsOnFiber(
@@ -1975,6 +1964,7 @@ function commitMutationEffectsOnFiber(
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2027,6 +2017,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case ClassComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Ref) {
@@ -2037,6 +2028,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Ref) {
@@ -2045,7 +2037,13 @@ function commitMutationEffectsOnFiber(
         }
       }
       if (supportsMutation) {
-        if (flags & ContentReset) {
+        // 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) {
           const instance: Instance = finishedWork.stateNode;
           try {
             resetTextContent(instance);
@@ -2092,6 +2090,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostText: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2121,6 +2120,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostRoot: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2153,6 +2153,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case HostPortal: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2170,6 +2171,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case SuspenseComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
@@ -2194,6 +2196,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
@@ -2231,6 +2234,7 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case SuspenseListComponent: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
@@ -2240,6 +2244,7 @@ function commitMutationEffectsOnFiber(
     }
     case ScopeComponent: {
       if (enableScopeAPI) {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
         commitReconciliationEffects(finishedWork);
 
         // TODO: This is a temporary solution that allowed us to transition away
@@ -2258,11 +2263,13 @@ function commitMutationEffectsOnFiber(
       return;
     }
     default: {
+      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
+
+      return;
     }
   }
 }
-
 function commitReconciliationEffects(finishedWork: Fiber) {
   // Placement effects (insertions, reorders) can be scheduled on any fiber
   // type. They needs to happen after the children effects have fired, but

From 46db4e996d686ffbc8ec4cc7d559d6897288b780 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 6 Apr 2022 23:25:39 -0400
Subject: [PATCH 1292/1603] Combine deletion phase into single recursive
 function

Similar to the previous step, this converts the deletion phase into
a single recursive function. Although there's less code, this one is
a bit trickier because it's already contains some stack-like logic
for tracking the nearest host parent. But instead of using the actual
stack, it repeatedly searches up the fiber return path to find the
nearest host parent.

Instead, I've changed it to track the nearest host parent on the
JS stack.

(We still search up the return path once, to set the initial host parent
right before entering a deleted tree. As a follow up, we can instead
push this to the stack as we traverse during the main mutation phase.)
---
 .../src/ReactFiberCommitWork.new.js           | 544 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 544 +++++++++---------
 2 files changed, 550 insertions(+), 538 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 204275544923..9fea320a69ba 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1222,148 +1222,6 @@ function commitDetachRef(current: Fiber) {
   }
 }
 
-// User-originating errors (lifecycles and refs) should not interrupt
-// deletion, so don't let them throw. Host-originating errors should
-// interrupt deletion, so it's okay
-function commitUnmount(
-  finishedRoot: FiberRoot,
-  current: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  onCommitUnmount(current);
-
-  switch (current.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case MemoComponent:
-    case SimpleMemoComponent: {
-      const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
-      if (updateQueue !== null) {
-        const lastEffect = updateQueue.lastEffect;
-        if (lastEffect !== null) {
-          const firstEffect = lastEffect.next;
-
-          let effect = firstEffect;
-          do {
-            const {destroy, tag} = effect;
-            if (destroy !== undefined) {
-              if ((tag & HookInsertion) !== NoHookEffect) {
-                safelyCallDestroy(current, nearestMountedAncestor, destroy);
-              } else if ((tag & HookLayout) !== NoHookEffect) {
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStarted(current);
-                }
-
-                if (
-                  enableProfilerTimer &&
-                  enableProfilerCommitHooks &&
-                  current.mode & ProfileMode
-                ) {
-                  startLayoutEffectTimer();
-                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
-                  recordLayoutEffectDuration(current);
-                } else {
-                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
-                }
-
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStopped();
-                }
-              }
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
-        }
-      }
-      return;
-    }
-    case ClassComponent: {
-      safelyDetachRef(current, nearestMountedAncestor);
-      const instance = current.stateNode;
-      if (typeof instance.componentWillUnmount === 'function') {
-        safelyCallComponentWillUnmount(
-          current,
-          nearestMountedAncestor,
-          instance,
-        );
-      }
-      return;
-    }
-    case HostComponent: {
-      safelyDetachRef(current, nearestMountedAncestor);
-      return;
-    }
-    case HostPortal: {
-      // TODO: this is recursive.
-      // We are also not using this parent because
-      // the portal will get pushed immediately.
-      if (supportsMutation) {
-        unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
-      } else if (supportsPersistence) {
-        emptyPortalContainer(current);
-      }
-      return;
-    }
-    case DehydratedFragment: {
-      if (enableSuspenseCallback) {
-        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-        if (hydrationCallbacks !== null) {
-          const onDeleted = hydrationCallbacks.onDeleted;
-          if (onDeleted) {
-            onDeleted((current.stateNode: SuspenseInstance));
-          }
-        }
-      }
-      return;
-    }
-    case ScopeComponent: {
-      if (enableScopeAPI) {
-        safelyDetachRef(current, nearestMountedAncestor);
-      }
-      return;
-    }
-  }
-}
-
-function commitNestedUnmounts(
-  finishedRoot: FiberRoot,
-  root: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  // While we're inside a removed host node we don't want to call
-  // removeChild on the inner nodes because they're removed by the top
-  // call anyway. We also want to call componentWillUnmount on all
-  // composites before this host node is removed from the tree. Therefore
-  // we do an inner loop while we're still inside the host node.
-  let node: Fiber = root;
-  while (true) {
-    commitUnmount(finishedRoot, node, nearestMountedAncestor);
-    // Visit children because they may contain more composite or host nodes.
-    // Skip portals because commitUnmount() currently visits them recursively.
-    if (
-      node.child !== null &&
-      // If we use mutation we drill down into portals using commitUnmount above.
-      // If we don't use mutation we drill down into portals here instead.
-      (!supportsMutation || node.tag !== HostPortal)
-    ) {
-      node.child.return = node;
-      node = node.child;
-      continue;
-    }
-    if (node === root) {
-      return;
-    }
-    while (node.sibling === null) {
-      if (node.return === null || node.return === root) {
-        return;
-      }
-      node = node.return;
-    }
-    node.sibling.return = node.return;
-    node = node.sibling;
-  }
-}
-
 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.
@@ -1652,152 +1510,302 @@ function insertOrAppendPlacementNode(
   }
 }
 
-function unmountHostComponents(
-  finishedRoot: FiberRoot,
-  current: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  // We only have the top Fiber that was deleted but we need to recurse down its
-  // children to find all the terminal nodes.
-  let node: Fiber = current;
+// 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;
 
-  // Each iteration, currentParent is populated with node's host parent if not
-  // currentParentIsValid.
-  let currentParentIsValid = false;
+function commitDeletionEffects(
+  root: FiberRoot,
+  returnFiber: Fiber,
+  deletedFiber: Fiber,
+) {
+  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.
 
-  // Note: these two variables *must* always be updated together.
-  let currentParent;
-  let currentParentIsContainer;
-
-  while (true) {
-    if (!currentParentIsValid) {
-      let parent = node.return;
-      findParent: while (true) {
-        if (parent === null) {
-          throw new Error(
-            'Expected to find a host parent. This error is likely caused by ' +
-              'a bug in React. Please file an issue.',
-          );
-        }
+    // 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 = returnFiber;
+    findParent: while (parent !== null) {
+      switch (parent.tag) {
+        case HostComponent: {
+          hostParent = parent.stateNode;
+          hostParentIsContainer = false;
+          break findParent;
+        }
+        case HostRoot: {
+          hostParent = parent.stateNode.containerInfo;
+          hostParentIsContainer = true;
+          break findParent;
+        }
+        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);
+  }
 
-        const parentStateNode = parent.stateNode;
-        switch (parent.tag) {
-          case HostComponent:
-            currentParent = parentStateNode;
-            currentParentIsContainer = false;
-            break findParent;
-          case HostRoot:
-            currentParent = parentStateNode.containerInfo;
-            currentParentIsContainer = true;
-            break findParent;
-          case HostPortal:
-            currentParent = parentStateNode.containerInfo;
-            currentParentIsContainer = true;
-            break findParent;
-        }
-        parent = parent.return;
-      }
-      currentParentIsValid = true;
-    }
-
-    if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor);
-      // After all the children have unmounted, it is now safe to remove the
-      // node from the tree.
-      if (currentParentIsContainer) {
-        removeChildFromContainer(
-          ((currentParent: any): Container),
-          (node.stateNode: Instance | TextInstance),
+  detachFiberMutation(deletedFiber);
+}
+
+function recursivelyTraverseDeletionEffects(
+  finishedRoot,
+  nearestMountedAncestor,
+  parent,
+) {
+  // 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,
+) {
+  onCommitUnmount(deletedFiber);
+
+  // 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 HostComponent: {
+      safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    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) {
+            removeChildFromContainer(
+              ((hostParent: any): Container),
+              (deletedFiber.stateNode: Instance | TextInstance),
+            );
+          } else {
+            removeChild(
+              ((hostParent: any): Instance),
+              (deletedFiber.stateNode: Instance | TextInstance),
+            );
+          }
+        }
       } else {
-        removeChild(
-          ((currentParent: any): Instance),
-          (node.stateNode: Instance | TextInstance),
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
         );
       }
-      // Don't visit children because we already visited them.
-    } else if (
-      enableSuspenseServerRenderer &&
-      node.tag === DehydratedFragment
-    ) {
-      if (enableSuspenseCallback) {
-        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-        if (hydrationCallbacks !== null) {
-          const onDeleted = hydrationCallbacks.onDeleted;
-          if (onDeleted) {
-            onDeleted((node.stateNode: SuspenseInstance));
+      return;
+    }
+    case DehydratedFragment: {
+      if (enableSuspenseServerRenderer) {
+        if (enableSuspenseCallback) {
+          const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+          if (hydrationCallbacks !== null) {
+            const onDeleted = hydrationCallbacks.onDeleted;
+            if (onDeleted) {
+              onDeleted((deletedFiber.stateNode: SuspenseInstance));
+            }
           }
         }
-      }
 
-      // Delete the dehydrated suspense boundary and all of its content.
-      if (currentParentIsContainer) {
-        clearSuspenseBoundaryFromContainer(
-          ((currentParent: any): Container),
-          (node.stateNode: SuspenseInstance),
+        // 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),
+              );
+            }
+          }
+        }
+      }
+      return;
+    }
+    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 {
-        clearSuspenseBoundary(
-          ((currentParent: any): Instance),
-          (node.stateNode: SuspenseInstance),
+        emptyPortalContainer(deletedFiber);
+
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
         );
       }
-    } else if (node.tag === HostPortal) {
-      if (node.child !== null) {
-        // When we go into a portal, it becomes the parent to remove from.
-        // We will reassign it back when we pop the portal on the way up.
-        currentParent = node.stateNode.containerInfo;
-        currentParentIsContainer = true;
-        // Visit children because portals might contain host components.
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
-    } else {
-      commitUnmount(finishedRoot, node, nearestMountedAncestor);
-      // Visit children because we may find more host components below.
-      if (node.child !== null) {
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
+      return;
     }
-    if (node === current) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      const updateQueue: FunctionComponentUpdateQueue | null = (deletedFiber.updateQueue: any);
+      if (updateQueue !== null) {
+        const lastEffect = updateQueue.lastEffect;
+        if (lastEffect !== null) {
+          const firstEffect = lastEffect.next;
+
+          let effect = firstEffect;
+          do {
+            const {destroy, tag} = effect;
+            if (destroy !== undefined) {
+              if ((tag & HookInsertion) !== NoHookEffect) {
+                safelyCallDestroy(
+                  deletedFiber,
+                  nearestMountedAncestor,
+                  destroy,
+                );
+              } else if ((tag & HookLayout) !== NoHookEffect) {
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStarted(deletedFiber);
+                }
+
+                if (
+                  enableProfilerTimer &&
+                  enableProfilerCommitHooks &&
+                  deletedFiber.mode & ProfileMode
+                ) {
+                  startLayoutEffectTimer();
+                  safelyCallDestroy(
+                    deletedFiber,
+                    nearestMountedAncestor,
+                    destroy,
+                  );
+                  recordLayoutEffectDuration(deletedFiber);
+                } else {
+                  safelyCallDestroy(
+                    deletedFiber,
+                    nearestMountedAncestor,
+                    destroy,
+                  );
+                }
+
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStopped();
+                }
+              }
+            }
+            effect = effect.next;
+          } while (effect !== firstEffect);
+        }
+      }
+
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
       return;
     }
-    while (node.sibling === null) {
-      if (node.return === null || node.return === current) {
-        return;
+    case ClassComponent: {
+      safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      const instance = deletedFiber.stateNode;
+      if (typeof instance.componentWillUnmount === 'function') {
+        safelyCallComponentWillUnmount(
+          deletedFiber,
+          nearestMountedAncestor,
+          instance,
+        );
       }
-      node = node.return;
-      if (node.tag === HostPortal) {
-        // When we go out of the portal, we need to restore the parent.
-        // Since we don't keep a stack of them, we will search for it.
-        currentParentIsValid = false;
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
+    }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
       }
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
+    }
+    default: {
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
     }
-    node.sibling.return = node.return;
-    node = node.sibling;
-  }
-}
-
-function commitDeletion(
-  finishedRoot: FiberRoot,
-  current: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  if (supportsMutation) {
-    // Recursively delete all host nodes from the parent.
-    // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
-  } else {
-    // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(finishedRoot, current, nearestMountedAncestor);
   }
-
-  detachFiberMutation(current);
 }
-
 function commitSuspenseCallback(finishedWork: Fiber) {
   // TODO: Move this to passive phase
   const newState: SuspenseState | null = finishedWork.memoizedState;
@@ -1907,7 +1915,6 @@ export function commitMutationEffects(
 ) {
   inProgressLanes = committedLanes;
   inProgressRoot = root;
-  nextEffect = finishedWork;
 
   setCurrentDebugFiberInDEV(finishedWork);
   commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
@@ -1929,7 +1936,7 @@ function recursivelyTraverseMutationEffects(
     for (let i = 0; i < deletions.length; i++) {
       const childToDelete = deletions[i];
       try {
-        commitDeletion(root, childToDelete, parentFiber);
+        commitDeletionEffects(root, parentFiber, childToDelete);
       } catch (error) {
         captureCommitPhaseError(childToDelete, parentFiber, error);
       }
@@ -3086,7 +3093,6 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
 
 export {
   commitPlacement,
-  commitDeletion,
   commitAttachRef,
   commitDetachRef,
   invokeLayoutEffectMountInDEV,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 8c1f0b27242b..2f900921f099 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1222,148 +1222,6 @@ function commitDetachRef(current: Fiber) {
   }
 }
 
-// User-originating errors (lifecycles and refs) should not interrupt
-// deletion, so don't let them throw. Host-originating errors should
-// interrupt deletion, so it's okay
-function commitUnmount(
-  finishedRoot: FiberRoot,
-  current: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  onCommitUnmount(current);
-
-  switch (current.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case MemoComponent:
-    case SimpleMemoComponent: {
-      const updateQueue: FunctionComponentUpdateQueue | null = (current.updateQueue: any);
-      if (updateQueue !== null) {
-        const lastEffect = updateQueue.lastEffect;
-        if (lastEffect !== null) {
-          const firstEffect = lastEffect.next;
-
-          let effect = firstEffect;
-          do {
-            const {destroy, tag} = effect;
-            if (destroy !== undefined) {
-              if ((tag & HookInsertion) !== NoHookEffect) {
-                safelyCallDestroy(current, nearestMountedAncestor, destroy);
-              } else if ((tag & HookLayout) !== NoHookEffect) {
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStarted(current);
-                }
-
-                if (
-                  enableProfilerTimer &&
-                  enableProfilerCommitHooks &&
-                  current.mode & ProfileMode
-                ) {
-                  startLayoutEffectTimer();
-                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
-                  recordLayoutEffectDuration(current);
-                } else {
-                  safelyCallDestroy(current, nearestMountedAncestor, destroy);
-                }
-
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStopped();
-                }
-              }
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
-        }
-      }
-      return;
-    }
-    case ClassComponent: {
-      safelyDetachRef(current, nearestMountedAncestor);
-      const instance = current.stateNode;
-      if (typeof instance.componentWillUnmount === 'function') {
-        safelyCallComponentWillUnmount(
-          current,
-          nearestMountedAncestor,
-          instance,
-        );
-      }
-      return;
-    }
-    case HostComponent: {
-      safelyDetachRef(current, nearestMountedAncestor);
-      return;
-    }
-    case HostPortal: {
-      // TODO: this is recursive.
-      // We are also not using this parent because
-      // the portal will get pushed immediately.
-      if (supportsMutation) {
-        unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
-      } else if (supportsPersistence) {
-        emptyPortalContainer(current);
-      }
-      return;
-    }
-    case DehydratedFragment: {
-      if (enableSuspenseCallback) {
-        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-        if (hydrationCallbacks !== null) {
-          const onDeleted = hydrationCallbacks.onDeleted;
-          if (onDeleted) {
-            onDeleted((current.stateNode: SuspenseInstance));
-          }
-        }
-      }
-      return;
-    }
-    case ScopeComponent: {
-      if (enableScopeAPI) {
-        safelyDetachRef(current, nearestMountedAncestor);
-      }
-      return;
-    }
-  }
-}
-
-function commitNestedUnmounts(
-  finishedRoot: FiberRoot,
-  root: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  // While we're inside a removed host node we don't want to call
-  // removeChild on the inner nodes because they're removed by the top
-  // call anyway. We also want to call componentWillUnmount on all
-  // composites before this host node is removed from the tree. Therefore
-  // we do an inner loop while we're still inside the host node.
-  let node: Fiber = root;
-  while (true) {
-    commitUnmount(finishedRoot, node, nearestMountedAncestor);
-    // Visit children because they may contain more composite or host nodes.
-    // Skip portals because commitUnmount() currently visits them recursively.
-    if (
-      node.child !== null &&
-      // If we use mutation we drill down into portals using commitUnmount above.
-      // If we don't use mutation we drill down into portals here instead.
-      (!supportsMutation || node.tag !== HostPortal)
-    ) {
-      node.child.return = node;
-      node = node.child;
-      continue;
-    }
-    if (node === root) {
-      return;
-    }
-    while (node.sibling === null) {
-      if (node.return === null || node.return === root) {
-        return;
-      }
-      node = node.return;
-    }
-    node.sibling.return = node.return;
-    node = node.sibling;
-  }
-}
-
 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.
@@ -1652,152 +1510,302 @@ function insertOrAppendPlacementNode(
   }
 }
 
-function unmountHostComponents(
-  finishedRoot: FiberRoot,
-  current: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  // We only have the top Fiber that was deleted but we need to recurse down its
-  // children to find all the terminal nodes.
-  let node: Fiber = current;
+// 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;
 
-  // Each iteration, currentParent is populated with node's host parent if not
-  // currentParentIsValid.
-  let currentParentIsValid = false;
+function commitDeletionEffects(
+  root: FiberRoot,
+  returnFiber: Fiber,
+  deletedFiber: Fiber,
+) {
+  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.
 
-  // Note: these two variables *must* always be updated together.
-  let currentParent;
-  let currentParentIsContainer;
-
-  while (true) {
-    if (!currentParentIsValid) {
-      let parent = node.return;
-      findParent: while (true) {
-        if (parent === null) {
-          throw new Error(
-            'Expected to find a host parent. This error is likely caused by ' +
-              'a bug in React. Please file an issue.',
-          );
-        }
+    // 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 = returnFiber;
+    findParent: while (parent !== null) {
+      switch (parent.tag) {
+        case HostComponent: {
+          hostParent = parent.stateNode;
+          hostParentIsContainer = false;
+          break findParent;
+        }
+        case HostRoot: {
+          hostParent = parent.stateNode.containerInfo;
+          hostParentIsContainer = true;
+          break findParent;
+        }
+        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);
+  }
 
-        const parentStateNode = parent.stateNode;
-        switch (parent.tag) {
-          case HostComponent:
-            currentParent = parentStateNode;
-            currentParentIsContainer = false;
-            break findParent;
-          case HostRoot:
-            currentParent = parentStateNode.containerInfo;
-            currentParentIsContainer = true;
-            break findParent;
-          case HostPortal:
-            currentParent = parentStateNode.containerInfo;
-            currentParentIsContainer = true;
-            break findParent;
-        }
-        parent = parent.return;
-      }
-      currentParentIsValid = true;
-    }
-
-    if (node.tag === HostComponent || node.tag === HostText) {
-      commitNestedUnmounts(finishedRoot, node, nearestMountedAncestor);
-      // After all the children have unmounted, it is now safe to remove the
-      // node from the tree.
-      if (currentParentIsContainer) {
-        removeChildFromContainer(
-          ((currentParent: any): Container),
-          (node.stateNode: Instance | TextInstance),
+  detachFiberMutation(deletedFiber);
+}
+
+function recursivelyTraverseDeletionEffects(
+  finishedRoot,
+  nearestMountedAncestor,
+  parent,
+) {
+  // 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,
+) {
+  onCommitUnmount(deletedFiber);
+
+  // 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 HostComponent: {
+      safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    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) {
+            removeChildFromContainer(
+              ((hostParent: any): Container),
+              (deletedFiber.stateNode: Instance | TextInstance),
+            );
+          } else {
+            removeChild(
+              ((hostParent: any): Instance),
+              (deletedFiber.stateNode: Instance | TextInstance),
+            );
+          }
+        }
       } else {
-        removeChild(
-          ((currentParent: any): Instance),
-          (node.stateNode: Instance | TextInstance),
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
         );
       }
-      // Don't visit children because we already visited them.
-    } else if (
-      enableSuspenseServerRenderer &&
-      node.tag === DehydratedFragment
-    ) {
-      if (enableSuspenseCallback) {
-        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-        if (hydrationCallbacks !== null) {
-          const onDeleted = hydrationCallbacks.onDeleted;
-          if (onDeleted) {
-            onDeleted((node.stateNode: SuspenseInstance));
+      return;
+    }
+    case DehydratedFragment: {
+      if (enableSuspenseServerRenderer) {
+        if (enableSuspenseCallback) {
+          const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+          if (hydrationCallbacks !== null) {
+            const onDeleted = hydrationCallbacks.onDeleted;
+            if (onDeleted) {
+              onDeleted((deletedFiber.stateNode: SuspenseInstance));
+            }
           }
         }
-      }
 
-      // Delete the dehydrated suspense boundary and all of its content.
-      if (currentParentIsContainer) {
-        clearSuspenseBoundaryFromContainer(
-          ((currentParent: any): Container),
-          (node.stateNode: SuspenseInstance),
+        // 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),
+              );
+            }
+          }
+        }
+      }
+      return;
+    }
+    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 {
-        clearSuspenseBoundary(
-          ((currentParent: any): Instance),
-          (node.stateNode: SuspenseInstance),
+        emptyPortalContainer(deletedFiber);
+
+        recursivelyTraverseDeletionEffects(
+          finishedRoot,
+          nearestMountedAncestor,
+          deletedFiber,
         );
       }
-    } else if (node.tag === HostPortal) {
-      if (node.child !== null) {
-        // When we go into a portal, it becomes the parent to remove from.
-        // We will reassign it back when we pop the portal on the way up.
-        currentParent = node.stateNode.containerInfo;
-        currentParentIsContainer = true;
-        // Visit children because portals might contain host components.
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
-    } else {
-      commitUnmount(finishedRoot, node, nearestMountedAncestor);
-      // Visit children because we may find more host components below.
-      if (node.child !== null) {
-        node.child.return = node;
-        node = node.child;
-        continue;
-      }
+      return;
     }
-    if (node === current) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      const updateQueue: FunctionComponentUpdateQueue | null = (deletedFiber.updateQueue: any);
+      if (updateQueue !== null) {
+        const lastEffect = updateQueue.lastEffect;
+        if (lastEffect !== null) {
+          const firstEffect = lastEffect.next;
+
+          let effect = firstEffect;
+          do {
+            const {destroy, tag} = effect;
+            if (destroy !== undefined) {
+              if ((tag & HookInsertion) !== NoHookEffect) {
+                safelyCallDestroy(
+                  deletedFiber,
+                  nearestMountedAncestor,
+                  destroy,
+                );
+              } else if ((tag & HookLayout) !== NoHookEffect) {
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStarted(deletedFiber);
+                }
+
+                if (
+                  enableProfilerTimer &&
+                  enableProfilerCommitHooks &&
+                  deletedFiber.mode & ProfileMode
+                ) {
+                  startLayoutEffectTimer();
+                  safelyCallDestroy(
+                    deletedFiber,
+                    nearestMountedAncestor,
+                    destroy,
+                  );
+                  recordLayoutEffectDuration(deletedFiber);
+                } else {
+                  safelyCallDestroy(
+                    deletedFiber,
+                    nearestMountedAncestor,
+                    destroy,
+                  );
+                }
+
+                if (enableSchedulingProfiler) {
+                  markComponentLayoutEffectUnmountStopped();
+                }
+              }
+            }
+            effect = effect.next;
+          } while (effect !== firstEffect);
+        }
+      }
+
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
       return;
     }
-    while (node.sibling === null) {
-      if (node.return === null || node.return === current) {
-        return;
+    case ClassComponent: {
+      safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      const instance = deletedFiber.stateNode;
+      if (typeof instance.componentWillUnmount === 'function') {
+        safelyCallComponentWillUnmount(
+          deletedFiber,
+          nearestMountedAncestor,
+          instance,
+        );
       }
-      node = node.return;
-      if (node.tag === HostPortal) {
-        // When we go out of the portal, we need to restore the parent.
-        // Since we don't keep a stack of them, we will search for it.
-        currentParentIsValid = false;
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
+    }
+    case ScopeComponent: {
+      if (enableScopeAPI) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
       }
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
+    }
+    default: {
+      recursivelyTraverseDeletionEffects(
+        finishedRoot,
+        nearestMountedAncestor,
+        deletedFiber,
+      );
+      return;
     }
-    node.sibling.return = node.return;
-    node = node.sibling;
-  }
-}
-
-function commitDeletion(
-  finishedRoot: FiberRoot,
-  current: Fiber,
-  nearestMountedAncestor: Fiber,
-): void {
-  if (supportsMutation) {
-    // Recursively delete all host nodes from the parent.
-    // Detach refs and call componentWillUnmount() on the whole subtree.
-    unmountHostComponents(finishedRoot, current, nearestMountedAncestor);
-  } else {
-    // Detach refs and call componentWillUnmount() on the whole subtree.
-    commitNestedUnmounts(finishedRoot, current, nearestMountedAncestor);
   }
-
-  detachFiberMutation(current);
 }
-
 function commitSuspenseCallback(finishedWork: Fiber) {
   // TODO: Move this to passive phase
   const newState: SuspenseState | null = finishedWork.memoizedState;
@@ -1907,7 +1915,6 @@ export function commitMutationEffects(
 ) {
   inProgressLanes = committedLanes;
   inProgressRoot = root;
-  nextEffect = finishedWork;
 
   setCurrentDebugFiberInDEV(finishedWork);
   commitMutationEffectsOnFiber(finishedWork, root, committedLanes);
@@ -1929,7 +1936,7 @@ function recursivelyTraverseMutationEffects(
     for (let i = 0; i < deletions.length; i++) {
       const childToDelete = deletions[i];
       try {
-        commitDeletion(root, childToDelete, parentFiber);
+        commitDeletionEffects(root, parentFiber, childToDelete);
       } catch (error) {
         captureCommitPhaseError(childToDelete, parentFiber, error);
       }
@@ -3086,7 +3093,6 @@ function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
 
 export {
   commitPlacement,
-  commitDeletion,
   commitAttachRef,
   commitDetachRef,
   invokeLayoutEffectMountInDEV,

From ec52a5698e2dfea7050a0b015f0b79abfb2d81b7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 6 Apr 2022 23:47:17 -0400
Subject: [PATCH 1293/1603] Fix: Don't call cWU if already unmounted

When a tree goes offscreen, we unmount all the effects just like we
would in a normal deletion. (Conceptually it _is_ a deletion; we keep
the fiber around so we can reuse its state if the tree mounts again.)

If an offscreen component gets deleted "for real", we shouldn't unmount
it again.

The fix is to track on the stack whether we're inside a hidden tree.

We already had a stack variable for this purpose, called
`offscreenSubtreeWasHidden`, in another part of the commit phase, so I
reused that variable instead of creating a new one. (The name is a bit
confusing: "was" refers to the current tree before this commit. So, the
"previous current".)

Co-authored-by: dan <dan.abramov@me.com>
---
 .../src/ReactFiberCommitWork.new.js           | 135 +++---
 .../src/ReactFiberCommitWork.old.js           | 135 +++---
 .../ReactSuspenseEffectsSemantics-test.js     |   1 -
 .../ReactSuspenseEffectsSemanticsDOM-test.js  | 386 +++++++++++++++++-
 4 files changed, 555 insertions(+), 102 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 9fea320a69ba..8f7741f74ee1 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1604,7 +1604,9 @@ function commitDeletionEffectsOnFiber(
   // that don't modify the stack.
   switch (deletedFiber.tag) {
     case HostComponent: {
-      safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      if (!offscreenSubtreeWasHidden) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      }
       // Intentional fallthrough to next branch
     }
     // eslint-disable-next-line-no-fallthrough
@@ -1710,54 +1712,56 @@ function commitDeletionEffectsOnFiber(
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
-      const updateQueue: FunctionComponentUpdateQueue | null = (deletedFiber.updateQueue: any);
-      if (updateQueue !== null) {
-        const lastEffect = updateQueue.lastEffect;
-        if (lastEffect !== null) {
-          const firstEffect = lastEffect.next;
-
-          let effect = firstEffect;
-          do {
-            const {destroy, tag} = effect;
-            if (destroy !== undefined) {
-              if ((tag & HookInsertion) !== NoHookEffect) {
-                safelyCallDestroy(
-                  deletedFiber,
-                  nearestMountedAncestor,
-                  destroy,
-                );
-              } else if ((tag & HookLayout) !== NoHookEffect) {
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStarted(deletedFiber);
-                }
-
-                if (
-                  enableProfilerTimer &&
-                  enableProfilerCommitHooks &&
-                  deletedFiber.mode & ProfileMode
-                ) {
-                  startLayoutEffectTimer();
-                  safelyCallDestroy(
-                    deletedFiber,
-                    nearestMountedAncestor,
-                    destroy,
-                  );
-                  recordLayoutEffectDuration(deletedFiber);
-                } else {
+      if (!offscreenSubtreeWasHidden) {
+        const updateQueue: FunctionComponentUpdateQueue | null = (deletedFiber.updateQueue: any);
+        if (updateQueue !== null) {
+          const lastEffect = updateQueue.lastEffect;
+          if (lastEffect !== null) {
+            const firstEffect = lastEffect.next;
+
+            let effect = firstEffect;
+            do {
+              const {destroy, tag} = effect;
+              if (destroy !== undefined) {
+                if ((tag & HookInsertion) !== NoHookEffect) {
                   safelyCallDestroy(
                     deletedFiber,
                     nearestMountedAncestor,
                     destroy,
                   );
-                }
+                } else if ((tag & HookLayout) !== NoHookEffect) {
+                  if (enableSchedulingProfiler) {
+                    markComponentLayoutEffectUnmountStarted(deletedFiber);
+                  }
 
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStopped();
+                  if (
+                    enableProfilerTimer &&
+                    enableProfilerCommitHooks &&
+                    deletedFiber.mode & ProfileMode
+                  ) {
+                    startLayoutEffectTimer();
+                    safelyCallDestroy(
+                      deletedFiber,
+                      nearestMountedAncestor,
+                      destroy,
+                    );
+                    recordLayoutEffectDuration(deletedFiber);
+                  } else {
+                    safelyCallDestroy(
+                      deletedFiber,
+                      nearestMountedAncestor,
+                      destroy,
+                    );
+                  }
+
+                  if (enableSchedulingProfiler) {
+                    markComponentLayoutEffectUnmountStopped();
+                  }
                 }
               }
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
+              effect = effect.next;
+            } while (effect !== firstEffect);
+          }
         }
       }
 
@@ -1769,14 +1773,16 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case ClassComponent: {
-      safelyDetachRef(deletedFiber, nearestMountedAncestor);
-      const instance = deletedFiber.stateNode;
-      if (typeof instance.componentWillUnmount === 'function') {
-        safelyCallComponentWillUnmount(
-          deletedFiber,
-          nearestMountedAncestor,
-          instance,
-        );
+      if (!offscreenSubtreeWasHidden) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        const instance = deletedFiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          safelyCallComponentWillUnmount(
+            deletedFiber,
+            nearestMountedAncestor,
+            instance,
+          );
+        }
       }
       recursivelyTraverseDeletionEffects(
         finishedRoot,
@@ -1796,6 +1802,27 @@ function commitDeletionEffectsOnFiber(
       );
       return;
     }
+    case OffscreenComponent: {
+      // 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;
+      break;
+    }
     default: {
       recursivelyTraverseDeletionEffects(
         finishedRoot,
@@ -2203,13 +2230,21 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
+      const wasHidden = current !== null && current.memoizedState !== null;
+
+      // 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 prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
       recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        const wasHidden = current !== null && current.memoizedState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
         if (supportsMutation) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 2f900921f099..70b416b3a322 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1604,7 +1604,9 @@ function commitDeletionEffectsOnFiber(
   // that don't modify the stack.
   switch (deletedFiber.tag) {
     case HostComponent: {
-      safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      if (!offscreenSubtreeWasHidden) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+      }
       // Intentional fallthrough to next branch
     }
     // eslint-disable-next-line-no-fallthrough
@@ -1710,54 +1712,56 @@ function commitDeletionEffectsOnFiber(
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
-      const updateQueue: FunctionComponentUpdateQueue | null = (deletedFiber.updateQueue: any);
-      if (updateQueue !== null) {
-        const lastEffect = updateQueue.lastEffect;
-        if (lastEffect !== null) {
-          const firstEffect = lastEffect.next;
-
-          let effect = firstEffect;
-          do {
-            const {destroy, tag} = effect;
-            if (destroy !== undefined) {
-              if ((tag & HookInsertion) !== NoHookEffect) {
-                safelyCallDestroy(
-                  deletedFiber,
-                  nearestMountedAncestor,
-                  destroy,
-                );
-              } else if ((tag & HookLayout) !== NoHookEffect) {
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStarted(deletedFiber);
-                }
-
-                if (
-                  enableProfilerTimer &&
-                  enableProfilerCommitHooks &&
-                  deletedFiber.mode & ProfileMode
-                ) {
-                  startLayoutEffectTimer();
-                  safelyCallDestroy(
-                    deletedFiber,
-                    nearestMountedAncestor,
-                    destroy,
-                  );
-                  recordLayoutEffectDuration(deletedFiber);
-                } else {
+      if (!offscreenSubtreeWasHidden) {
+        const updateQueue: FunctionComponentUpdateQueue | null = (deletedFiber.updateQueue: any);
+        if (updateQueue !== null) {
+          const lastEffect = updateQueue.lastEffect;
+          if (lastEffect !== null) {
+            const firstEffect = lastEffect.next;
+
+            let effect = firstEffect;
+            do {
+              const {destroy, tag} = effect;
+              if (destroy !== undefined) {
+                if ((tag & HookInsertion) !== NoHookEffect) {
                   safelyCallDestroy(
                     deletedFiber,
                     nearestMountedAncestor,
                     destroy,
                   );
-                }
+                } else if ((tag & HookLayout) !== NoHookEffect) {
+                  if (enableSchedulingProfiler) {
+                    markComponentLayoutEffectUnmountStarted(deletedFiber);
+                  }
 
-                if (enableSchedulingProfiler) {
-                  markComponentLayoutEffectUnmountStopped();
+                  if (
+                    enableProfilerTimer &&
+                    enableProfilerCommitHooks &&
+                    deletedFiber.mode & ProfileMode
+                  ) {
+                    startLayoutEffectTimer();
+                    safelyCallDestroy(
+                      deletedFiber,
+                      nearestMountedAncestor,
+                      destroy,
+                    );
+                    recordLayoutEffectDuration(deletedFiber);
+                  } else {
+                    safelyCallDestroy(
+                      deletedFiber,
+                      nearestMountedAncestor,
+                      destroy,
+                    );
+                  }
+
+                  if (enableSchedulingProfiler) {
+                    markComponentLayoutEffectUnmountStopped();
+                  }
                 }
               }
-            }
-            effect = effect.next;
-          } while (effect !== firstEffect);
+              effect = effect.next;
+            } while (effect !== firstEffect);
+          }
         }
       }
 
@@ -1769,14 +1773,16 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case ClassComponent: {
-      safelyDetachRef(deletedFiber, nearestMountedAncestor);
-      const instance = deletedFiber.stateNode;
-      if (typeof instance.componentWillUnmount === 'function') {
-        safelyCallComponentWillUnmount(
-          deletedFiber,
-          nearestMountedAncestor,
-          instance,
-        );
+      if (!offscreenSubtreeWasHidden) {
+        safelyDetachRef(deletedFiber, nearestMountedAncestor);
+        const instance = deletedFiber.stateNode;
+        if (typeof instance.componentWillUnmount === 'function') {
+          safelyCallComponentWillUnmount(
+            deletedFiber,
+            nearestMountedAncestor,
+            instance,
+          );
+        }
       }
       recursivelyTraverseDeletionEffects(
         finishedRoot,
@@ -1796,6 +1802,27 @@ function commitDeletionEffectsOnFiber(
       );
       return;
     }
+    case OffscreenComponent: {
+      // 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;
+      break;
+    }
     default: {
       recursivelyTraverseDeletionEffects(
         finishedRoot,
@@ -2203,13 +2230,21 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
+      const wasHidden = current !== null && current.memoizedState !== null;
+
+      // 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 prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
       recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
-        const wasHidden = current !== null && current.memoizedState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
         if (supportsMutation) {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index bdda4f8313df..1825d41fd1da 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -1980,7 +1980,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
 
           // Destroy layout and passive effects in the errored tree.
           'App destroy layout',
-          'ThrowsInWillUnmount componentWillUnmount',
           'Text:Fallback destroy layout',
           'Text:Outside destroy layout',
           'Text:Inside destroy passive',
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
index cb1196baffe6..00c126bb3645 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
@@ -10,18 +10,39 @@
 'use strict';
 
 let React;
+let ReactDOM;
 let ReactDOMClient;
+let Scheduler;
 let act;
+let container;
 
 describe('ReactSuspenseEffectsSemanticsDOM', () => {
   beforeEach(() => {
     jest.resetModules();
 
     React = require('react');
+    ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
     act = require('jest-react').act;
+
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
   });
 
+  async function fakeImport(result) {
+    return {default: result};
+  }
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
   it('should not cause a cycle when combined with a render phase update', () => {
     let scheduleSuspendingUpdate;
 
@@ -63,7 +84,7 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
     }
 
     act(() => {
-      const root = ReactDOMClient.createRoot(document.createElement('div'));
+      const root = ReactDOMClient.createRoot(container);
       root.render(<App />);
     });
 
@@ -71,4 +92,367 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
       scheduleSuspendingUpdate();
     });
   });
+
+  it('does not destroy layout effects twice when hidden child is removed', async () => {
+    function ChildA({label}) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Did mount: ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('Will unmount: ' + label);
+        };
+      }, []);
+      return <Text text={label} />;
+    }
+
+    function ChildB({label}) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Did mount: ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('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);
+    act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...']);
+
+    await LazyChildA;
+    expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
+    expect(container.innerHTML).toBe('A');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
+    expect(container.innerHTML).toBe('Loading...');
+
+    await LazyChildB;
+    expect(Scheduler).toFlushAndYield(['B', 'Did mount: B']);
+    expect(container.innerHTML).toBe('B');
+  });
+
+  it('does not destroy ref cleanup twice when hidden child is removed', async () => {
+    function ChildA({label}) {
+      return (
+        <span
+          ref={node => {
+            if (node) {
+              Scheduler.unstable_yieldValue('Ref mount: ' + label);
+            } else {
+              Scheduler.unstable_yieldValue('Ref unmount: ' + label);
+            }
+          }}>
+          <Text text={label} />
+        </span>
+      );
+    }
+
+    function ChildB({label}) {
+      return (
+        <span
+          ref={node => {
+            if (node) {
+              Scheduler.unstable_yieldValue('Ref mount: ' + label);
+            } else {
+              Scheduler.unstable_yieldValue('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);
+    act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...']);
+
+    await LazyChildA;
+    expect(Scheduler).toFlushAndYield(['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} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...', 'Ref unmount: A']);
+    expect(container.innerHTML).toBe(
+      '<span style="display: none;">A</span>Loading...',
+    );
+
+    await LazyChildB;
+    expect(Scheduler).toFlushAndYield(['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.unstable_yieldValue('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('Will unmount: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    class ChildB extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('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);
+    act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...']);
+
+    await LazyChildA;
+    expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
+    expect(container.innerHTML).toBe('A');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
+    expect(container.innerHTML).toBe('Loading...');
+
+    await LazyChildB;
+    expect(Scheduler).toFlushAndYield(['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.unstable_yieldValue('Did mount: ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('Will unmount: ' + label);
+        };
+      }, []);
+      return <Text text={label} />;
+    }
+    function ChildB({label}) {
+      React.useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Did mount: ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('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);
+    act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...']);
+
+    await LazyChildA;
+    expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
+    expect(container.innerHTML).toBe('A');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
+    expect(container.innerHTML).toBe('Loading...');
+
+    // Destroy the whole tree, including the hidden A
+    ReactDOM.flushSync(() => {
+      root.render(<h1>Hello</h1>);
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    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.unstable_yieldValue('Ref mount: ' + label);
+            } else {
+              Scheduler.unstable_yieldValue('Ref unmount: ' + label);
+            }
+          }}>
+          <Text text={label} />
+        </span>
+      );
+    }
+
+    function ChildB({label}) {
+      return (
+        <span
+          ref={node => {
+            if (node) {
+              Scheduler.unstable_yieldValue('Ref mount: ' + label);
+            } else {
+              Scheduler.unstable_yieldValue('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);
+    act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...']);
+
+    await LazyChildA;
+    expect(Scheduler).toFlushAndYield(['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} />);
+    });
+    expect(Scheduler).toHaveYielded(['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>);
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    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.unstable_yieldValue('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('Will unmount: ' + this.props.label);
+      }
+      render() {
+        return <Text text={this.props.label} />;
+      }
+    }
+
+    class ChildB extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
+      }
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('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);
+    act(() => {
+      root.render(<Parent swap={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...']);
+
+    await LazyChildA;
+    expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
+    expect(container.innerHTML).toBe('A');
+
+    // Swap the position of A and B
+    ReactDOM.flushSync(() => {
+      root.render(<Parent swap={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
+    expect(container.innerHTML).toBe('Loading...');
+
+    // Destroy the whole tree, including the hidden A
+    ReactDOM.flushSync(() => {
+      root.render(<h1>Hello</h1>);
+    });
+    expect(Scheduler).toFlushAndYield([]);
+    expect(container.innerHTML).toBe('<h1>Hello</h1>');
+  });
 });

From 60e63b960f19d4c846cf32d47d2a974297ae253a Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 8 Apr 2022 17:33:52 -0500
Subject: [PATCH 1294/1603] remove console.error in ReactFiberLane (#24319)

We changed the implementation of root.transitionLanes so that, if there is no transitions for a given lane, we use null instead of an array. This means that this error is no longer valid, so we are removing it
---
 packages/react-reconciler/src/ReactFiberLane.new.js | 7 -------
 packages/react-reconciler/src/ReactFiberLane.old.js | 7 -------
 2 files changed, 14 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 4a8344d19e1e..8290c75e882e 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -859,13 +859,6 @@ export function clearTransitionsForLanes(root: FiberRoot, lanes: Lane | Lanes) {
     const transitions = root.transitionLanes[index];
     if (transitions !== null) {
       root.transitionLanes[index] = null;
-    } else {
-      if (__DEV__) {
-        console.error(
-          'React Bug: transition lanes accessed out of bounds index: %s',
-          index.toString(),
-        );
-      }
     }
 
     lanes &= ~lane;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 280fbefe688a..172518373638 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -859,13 +859,6 @@ export function clearTransitionsForLanes(root: FiberRoot, lanes: Lane | Lanes) {
     const transitions = root.transitionLanes[index];
     if (transitions !== null) {
       root.transitionLanes[index] = null;
-    } else {
-      if (__DEV__) {
-        console.error(
-          'React Bug: transition lanes accessed out of bounds index: %s',
-          index.toString(),
-        );
-      }
     }
 
     lanes &= ~lane;

From b0f13e5d391c0deba4327eb15c07e7321f3a871e Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 8 Apr 2022 18:35:18 -0500
Subject: [PATCH 1295/1603] add pendingPassiveTransitions (#24320)

Add pendingPassiveTransitions work loop module level variable. Because workInProgressTransitions might change before we process it in the passive effects, we introduce a new variable, pendingPassiveTransitions, where we store the transitions until we can actually process them in the commit phase.
---
 .../src/ReactFiberCommitWork.new.js           | 26 ++++++-
 .../src/ReactFiberCommitWork.old.js           | 26 ++++++-
 .../src/ReactFiberWorkLoop.new.js             | 72 ++++++++++++++++---
 .../src/ReactFiberWorkLoop.old.js             | 72 ++++++++++++++++---
 4 files changed, 170 insertions(+), 26 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 8f7741f74ee1..c9f40139f64e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {RootState} from './ReactFiberRoot.new';
+import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -2602,15 +2603,22 @@ export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ): void {
   nextEffect = finishedWork;
-  commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
+  commitPassiveMountEffects_begin(
+    finishedWork,
+    root,
+    committedLanes,
+    committedTransitions,
+  );
 }
 
 function commitPassiveMountEffects_begin(
   subtreeRoot: Fiber,
   root: FiberRoot,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2619,7 +2627,12 @@ function commitPassiveMountEffects_begin(
       firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
-      commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
+      commitPassiveMountEffects_complete(
+        subtreeRoot,
+        root,
+        committedLanes,
+        committedTransitions,
+      );
     }
   }
 }
@@ -2628,6 +2641,7 @@ function commitPassiveMountEffects_complete(
   subtreeRoot: Fiber,
   root: FiberRoot,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2635,7 +2649,12 @@ function commitPassiveMountEffects_complete(
     if ((fiber.flags & Passive) !== NoFlags) {
       setCurrentDebugFiberInDEV(fiber);
       try {
-        commitPassiveMountOnFiber(root, fiber, committedLanes);
+        commitPassiveMountOnFiber(
+          root,
+          fiber,
+          committedLanes,
+          committedTransitions,
+        );
       } catch (error) {
         captureCommitPhaseError(fiber, fiber.return, error);
       }
@@ -2662,6 +2681,7 @@ function commitPassiveMountOnFiber(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 70b416b3a322..731eaac9ef9a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -26,6 +26,7 @@ import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {RootState} from './ReactFiberRoot.old';
+import type {Transition} from './ReactFiberTracingMarkerComponent.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -2602,15 +2603,22 @@ export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ): void {
   nextEffect = finishedWork;
-  commitPassiveMountEffects_begin(finishedWork, root, committedLanes);
+  commitPassiveMountEffects_begin(
+    finishedWork,
+    root,
+    committedLanes,
+    committedTransitions,
+  );
 }
 
 function commitPassiveMountEffects_begin(
   subtreeRoot: Fiber,
   root: FiberRoot,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2619,7 +2627,12 @@ function commitPassiveMountEffects_begin(
       firstChild.return = fiber;
       nextEffect = firstChild;
     } else {
-      commitPassiveMountEffects_complete(subtreeRoot, root, committedLanes);
+      commitPassiveMountEffects_complete(
+        subtreeRoot,
+        root,
+        committedLanes,
+        committedTransitions,
+      );
     }
   }
 }
@@ -2628,6 +2641,7 @@ function commitPassiveMountEffects_complete(
   subtreeRoot: Fiber,
   root: FiberRoot,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ) {
   while (nextEffect !== null) {
     const fiber = nextEffect;
@@ -2635,7 +2649,12 @@ function commitPassiveMountEffects_complete(
     if ((fiber.flags & Passive) !== NoFlags) {
       setCurrentDebugFiberInDEV(fiber);
       try {
-        commitPassiveMountOnFiber(root, fiber, committedLanes);
+        commitPassiveMountOnFiber(
+          root,
+          fiber,
+          committedLanes,
+          committedTransitions,
+        );
       } catch (error) {
         captureCommitPhaseError(fiber, fiber.return, error);
       }
@@ -2662,6 +2681,7 @@ function commitPassiveMountOnFiber(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
   committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
 ): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 643724724aaa..b6e7fad4eb94 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -392,6 +392,7 @@ let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
+let pendingPassiveTransitions: Array<Transition> | null = null;
 
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
@@ -1075,7 +1076,11 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootErrored: {
       // We should have already attempted to retry this tree. If we reached
       // this point, it errored again. Commit it.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     case RootSuspended: {
@@ -1115,14 +1120,23 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // lower priority work to do. Instead of committing the fallback
           // immediately, wait for more data to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
+            commitRoot.bind(
+              null,
+              root,
+              workInProgressRootRecoverableErrors,
+              workInProgressTransitions,
+            ),
             msUntilTimeout,
           );
           break;
         }
       }
       // The work expired. Commit immediately.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     case RootSuspendedWithDelay: {
@@ -1153,7 +1167,12 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // Instead of committing the fallback immediately, wait for more data
           // to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
+            commitRoot.bind(
+              null,
+              root,
+              workInProgressRootRecoverableErrors,
+              workInProgressTransitions,
+            ),
             msUntilTimeout,
           );
           break;
@@ -1161,12 +1180,20 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       }
 
       // Commit the placeholder.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     case RootCompleted: {
       // The work completed. Ready to commit.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     default: {
@@ -1290,7 +1317,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root, workInProgressRootRecoverableErrors);
+  commitRoot(
+    root,
+    workInProgressRootRecoverableErrors,
+    workInProgressTransitions,
+  );
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
@@ -1972,7 +2003,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
-function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
+function commitRoot(
+  root: FiberRoot,
+  recoverableErrors: null | Array<mixed>,
+  transitions: Array<Transition> | null,
+) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
@@ -1981,7 +2016,12 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
-    commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
+    commitRootImpl(
+      root,
+      recoverableErrors,
+      transitions,
+      previousUpdateLanePriority,
+    );
   } finally {
     ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
@@ -1993,6 +2033,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
 function commitRootImpl(
   root: FiberRoot,
   recoverableErrors: null | Array<mixed>,
+  transitions: Array<Transition> | null,
   renderPriorityLevel: EventPriority,
 ) {
   do {
@@ -2088,6 +2129,13 @@ function commitRootImpl(
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
       pendingPassiveEffectsRemainingLanes = remainingLanes;
+      // workInProgressTransitions might be overwritten, so we want
+      // to store it in pendingPassiveTransitions until they get processed
+      // We need to pass this through as an argument to commitRoot
+      // because workInProgressTransitions might have changed between
+      // the previous render and commit if we throttle the commit
+      // with setTimeout
+      pendingPassiveTransitions = transitions;
       scheduleCallback(NormalSchedulerPriority, () => {
         flushPassiveEffects();
         // This render triggered passive effects: release the root cache pool
@@ -2408,6 +2456,10 @@ function flushPassiveEffectsImpl() {
     return false;
   }
 
+  // Cache and clear the transitions flag
+  const transitions = pendingPassiveTransitions;
+  pendingPassiveTransitions = null;
+
   const root = rootWithPendingPassiveEffects;
   const lanes = pendingPassiveEffectsLanes;
   rootWithPendingPassiveEffects = null;
@@ -2437,7 +2489,7 @@ function flushPassiveEffectsImpl() {
   executionContext |= CommitContext;
 
   commitPassiveUnmountEffects(root.current);
-  commitPassiveMountEffects(root, root.current, lanes);
+  commitPassiveMountEffects(root, root.current, lanes, transitions);
 
   // TODO: Move to commitPassiveMountEffects
   if (enableProfilerTimer && enableProfilerCommitHooks) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index a79e2071b25a..62714c8cd334 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -392,6 +392,7 @@ let rootWithPendingPassiveEffects: FiberRoot | null = null;
 let pendingPassiveEffectsLanes: Lanes = NoLanes;
 let pendingPassiveProfilerEffects: Array<Fiber> = [];
 let pendingPassiveEffectsRemainingLanes: Lanes = NoLanes;
+let pendingPassiveTransitions: Array<Transition> | null = null;
 
 // Use these to prevent an infinite loop of nested updates
 const NESTED_UPDATE_LIMIT = 50;
@@ -1075,7 +1076,11 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootErrored: {
       // We should have already attempted to retry this tree. If we reached
       // this point, it errored again. Commit it.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     case RootSuspended: {
@@ -1115,14 +1120,23 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // lower priority work to do. Instead of committing the fallback
           // immediately, wait for more data to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
+            commitRoot.bind(
+              null,
+              root,
+              workInProgressRootRecoverableErrors,
+              workInProgressTransitions,
+            ),
             msUntilTimeout,
           );
           break;
         }
       }
       // The work expired. Commit immediately.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     case RootSuspendedWithDelay: {
@@ -1153,7 +1167,12 @@ function finishConcurrentRender(root, exitStatus, lanes) {
           // Instead of committing the fallback immediately, wait for more data
           // to arrive.
           root.timeoutHandle = scheduleTimeout(
-            commitRoot.bind(null, root, workInProgressRootRecoverableErrors),
+            commitRoot.bind(
+              null,
+              root,
+              workInProgressRootRecoverableErrors,
+              workInProgressTransitions,
+            ),
             msUntilTimeout,
           );
           break;
@@ -1161,12 +1180,20 @@ function finishConcurrentRender(root, exitStatus, lanes) {
       }
 
       // Commit the placeholder.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     case RootCompleted: {
       // The work completed. Ready to commit.
-      commitRoot(root, workInProgressRootRecoverableErrors);
+      commitRoot(
+        root,
+        workInProgressRootRecoverableErrors,
+        workInProgressTransitions,
+      );
       break;
     }
     default: {
@@ -1290,7 +1317,11 @@ function performSyncWorkOnRoot(root) {
   const finishedWork: Fiber = (root.current.alternate: any);
   root.finishedWork = finishedWork;
   root.finishedLanes = lanes;
-  commitRoot(root, workInProgressRootRecoverableErrors);
+  commitRoot(
+    root,
+    workInProgressRootRecoverableErrors,
+    workInProgressTransitions,
+  );
 
   // Before exiting, make sure there's a callback scheduled for the next
   // pending level.
@@ -1972,7 +2003,11 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
   }
 }
 
-function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
+function commitRoot(
+  root: FiberRoot,
+  recoverableErrors: null | Array<mixed>,
+  transitions: Array<Transition> | null,
+) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
   // layout phases. Should be able to remove.
   const previousUpdateLanePriority = getCurrentUpdatePriority();
@@ -1981,7 +2016,12 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
   try {
     ReactCurrentBatchConfig.transition = null;
     setCurrentUpdatePriority(DiscreteEventPriority);
-    commitRootImpl(root, recoverableErrors, previousUpdateLanePriority);
+    commitRootImpl(
+      root,
+      recoverableErrors,
+      transitions,
+      previousUpdateLanePriority,
+    );
   } finally {
     ReactCurrentBatchConfig.transition = prevTransition;
     setCurrentUpdatePriority(previousUpdateLanePriority);
@@ -1993,6 +2033,7 @@ function commitRoot(root: FiberRoot, recoverableErrors: null | Array<mixed>) {
 function commitRootImpl(
   root: FiberRoot,
   recoverableErrors: null | Array<mixed>,
+  transitions: Array<Transition> | null,
   renderPriorityLevel: EventPriority,
 ) {
   do {
@@ -2088,6 +2129,13 @@ function commitRootImpl(
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
       pendingPassiveEffectsRemainingLanes = remainingLanes;
+      // workInProgressTransitions might be overwritten, so we want
+      // to store it in pendingPassiveTransitions until they get processed
+      // We need to pass this through as an argument to commitRoot
+      // because workInProgressTransitions might have changed between
+      // the previous render and commit if we throttle the commit
+      // with setTimeout
+      pendingPassiveTransitions = transitions;
       scheduleCallback(NormalSchedulerPriority, () => {
         flushPassiveEffects();
         // This render triggered passive effects: release the root cache pool
@@ -2408,6 +2456,10 @@ function flushPassiveEffectsImpl() {
     return false;
   }
 
+  // Cache and clear the transitions flag
+  const transitions = pendingPassiveTransitions;
+  pendingPassiveTransitions = null;
+
   const root = rootWithPendingPassiveEffects;
   const lanes = pendingPassiveEffectsLanes;
   rootWithPendingPassiveEffects = null;
@@ -2437,7 +2489,7 @@ function flushPassiveEffectsImpl() {
   executionContext |= CommitContext;
 
   commitPassiveUnmountEffects(root.current);
-  commitPassiveMountEffects(root, root.current, lanes);
+  commitPassiveMountEffects(root, root.current, lanes, transitions);
 
   // TODO: Move to commitPassiveMountEffects
   if (enableProfilerTimer && enableProfilerCommitHooks) {

From e0160d50c5a492a925db6ab3f8478e118336c722 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 8 Apr 2022 19:48:30 -0500
Subject: [PATCH 1296/1603] add transition tracing transitions stack (#24321)

Added a transitions stack for to keep track of which transitions are still happening for the current boundary.
* On the root, we will get all transitions that have been initiated for the corresponding lanes.
* Whenever we encounter a suspended boundary, we will add all transitions on the stack onto the boundary
* Whenever we encounter a boundary that just unsuspended, we will add all transitions on the boundary onto the stack
A transition will be considered complete when there are no boundaries that have the associated transition
---
 .../src/ReactFiberBeginWork.new.js            | 17 ++--
 .../src/ReactFiberBeginWork.old.js            | 17 ++--
 .../src/ReactFiberCompleteWork.new.js         |  8 +-
 .../src/ReactFiberCompleteWork.old.js         |  8 +-
 .../src/ReactFiberTransition.new.js           | 77 +++++++++++++++----
 .../src/ReactFiberTransition.old.js           | 77 +++++++++++++++----
 .../src/ReactFiberUnwindWork.new.js           | 23 ++----
 .../src/ReactFiberUnwindWork.old.js           | 23 ++----
 8 files changed, 162 insertions(+), 88 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index b9a35475e693..3df345b6380b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -661,7 +661,7 @@ function updateOffscreenComponent(
         // 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);
+          pushTransition(workInProgress, null, null);
         }
       }
       pushRenderLanes(workInProgress, renderLanes);
@@ -695,7 +695,7 @@ function updateOffscreenComponent(
         // 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);
+          pushTransition(workInProgress, null, null);
         }
       }
 
@@ -733,7 +733,9 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState !== null ? prevState.cachePool : null;
-        pushTransition(workInProgress, prevCachePool);
+        // TODO: Consider if and how Offscreen pre-rendering should
+        // be attributed to the transition that spawned it
+        pushTransition(workInProgress, prevCachePool, null);
       }
 
       pushRenderLanes(workInProgress, subtreeRenderLanes);
@@ -751,7 +753,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        pushTransition(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool, null);
       }
 
       // Since we're not hidden anymore, reset the state
@@ -767,7 +769,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
     }
@@ -1330,10 +1332,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 
   const nextState: RootState = workInProgress.memoizedState;
   const root: FiberRoot = workInProgress.stateNode;
+  pushRootTransition(workInProgress, root, renderLanes);
 
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
-    pushRootTransition(root);
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
@@ -3572,10 +3574,11 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case HostRoot:
       pushHostRootContext(workInProgress);
       const root: FiberRoot = workInProgress.stateNode;
+      pushRootTransition(workInProgress, root, renderLanes);
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootTransition(root);
       }
       if (enableTransitionTracing) {
         workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 42641c85dd06..66324c8dc333 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -661,7 +661,7 @@ function updateOffscreenComponent(
         // 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);
+          pushTransition(workInProgress, null, null);
         }
       }
       pushRenderLanes(workInProgress, renderLanes);
@@ -695,7 +695,7 @@ function updateOffscreenComponent(
         // 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);
+          pushTransition(workInProgress, null, null);
         }
       }
 
@@ -733,7 +733,9 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState !== null ? prevState.cachePool : null;
-        pushTransition(workInProgress, prevCachePool);
+        // TODO: Consider if and how Offscreen pre-rendering should
+        // be attributed to the transition that spawned it
+        pushTransition(workInProgress, prevCachePool, null);
       }
 
       pushRenderLanes(workInProgress, subtreeRenderLanes);
@@ -751,7 +753,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         const prevCachePool = prevState.cachePool;
-        pushTransition(workInProgress, prevCachePool);
+        pushTransition(workInProgress, prevCachePool, null);
       }
 
       // Since we're not hidden anymore, reset the state
@@ -767,7 +769,7 @@ function updateOffscreenComponent(
         // using the same cache. Unless the parent changed, since that means
         // there was a refresh.
         if (current !== null) {
-          pushTransition(workInProgress, null);
+          pushTransition(workInProgress, null, null);
         }
       }
     }
@@ -1330,10 +1332,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
 
   const nextState: RootState = workInProgress.memoizedState;
   const root: FiberRoot = workInProgress.stateNode;
+  pushRootTransition(workInProgress, root, renderLanes);
 
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
-    pushRootTransition(root);
     pushCacheProvider(workInProgress, nextCache);
     if (nextCache !== prevState.cache) {
       // The root cache refreshed.
@@ -3572,10 +3574,11 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case HostRoot:
       pushHostRootContext(workInProgress);
       const root: FiberRoot = workInProgress.stateNode;
+      pushRootTransition(workInProgress, root, renderLanes);
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
-        pushRootTransition(root);
       }
       if (enableTransitionTracing) {
         workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 979f76b51415..e85af7d9f5db 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -875,8 +875,6 @@ function completeWork(
       }
 
       if (enableCache) {
-        popRootTransition(fiberRoot, renderLanes);
-
         let previousCache: Cache | null = null;
         if (current !== null) {
           previousCache = current.memoizedState.cache;
@@ -888,6 +886,7 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
+      popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
@@ -1593,11 +1592,10 @@ function completeWork(
           // Run passive effects to retain/release the cache.
           workInProgress.flags |= Passive;
         }
-        if (current !== null) {
-          popTransition(workInProgress);
-        }
       }
 
+      popTransition(workInProgress, current);
+
       return null;
     }
     case CacheComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 4b8fa1083cfa..dea814c9113a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -875,8 +875,6 @@ function completeWork(
       }
 
       if (enableCache) {
-        popRootTransition(fiberRoot, renderLanes);
-
         let previousCache: Cache | null = null;
         if (current !== null) {
           previousCache = current.memoizedState.cache;
@@ -888,6 +886,7 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
+      popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
@@ -1593,11 +1592,10 @@ function completeWork(
           // Run passive effects to retain/release the cache.
           workInProgress.flags |= Passive;
         }
-        if (current !== null) {
-          popTransition(workInProgress);
-        }
       }
 
+      popTransition(workInProgress, current);
+
       return null;
     }
     case CacheComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberTransition.new.js b/packages/react-reconciler/src/ReactFiberTransition.new.js
index dc3c36a918a0..c855cb395312 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.new.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.new.js
@@ -10,11 +10,15 @@ import type {FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
+import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {enableCache, enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
-import {getWorkInProgressRoot} from './ReactFiberWorkLoop.new';
+import {
+  getWorkInProgressRoot,
+  getWorkInProgressTransitions,
+} from './ReactFiberWorkLoop.new';
 import {
   createCache,
   retainCache,
@@ -25,6 +29,15 @@ import {
 // 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 {
   if (!enableCache) {
     return (null: any);
@@ -75,25 +88,31 @@ export function requestCacheFromPool(renderLanes: Lanes): Cache {
   return freshCache;
 }
 
-export function pushRootTransition(root: FiberRoot) {
-  if (enableCache) {
-    return;
+export function pushRootTransition(
+  workInProgress: Fiber,
+  root: FiberRoot,
+  renderLanes: Lanes,
+) {
+  if (enableTransitionTracing) {
+    const rootTransitions = getWorkInProgressTransitions();
+    push(transitionStack, rootTransitions, workInProgress);
   }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
 }
 
-export function popRootTransition(root: FiberRoot, renderLanes: Lanes) {
-  if (enableCache) {
-    return;
+export function popRootTransition(
+  workInProgress: Fiber,
+  root: FiberRoot,
+  renderLanes: Lanes,
+) {
+  if (enableTransitionTracing) {
+    pop(transitionStack, workInProgress);
   }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
 }
 
 export function pushTransition(
   offscreenWorkInProgress: Fiber,
   prevCachePool: SpawnedCachePool | null,
+  newTransitions: Array<Transition> | null,
 ): void {
   if (enableCache) {
     if (prevCachePool === null) {
@@ -102,12 +121,40 @@ export function pushTransition(
       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) {
-  if (enableCache) {
-    pop(resumedCache, workInProgress);
+export function popTransition(workInProgress: Fiber, current: Fiber | null) {
+  if (current !== null) {
+    if (enableCache) {
+      pop(resumedCache, workInProgress);
+    }
+
+    if (enableTransitionTracing) {
+      pop(transitionStack, workInProgress);
+    }
+  }
+}
+
+export function getSuspendedTransitions(): Array<Transition> | null {
+  if (!enableTransitionTracing) {
+    return null;
   }
+
+  return transitionStack.current;
 }
 
 export function getSuspendedCache(): SpawnedCachePool | null {
diff --git a/packages/react-reconciler/src/ReactFiberTransition.old.js b/packages/react-reconciler/src/ReactFiberTransition.old.js
index 666e41d5184c..ed73d4716622 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.old.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.old.js
@@ -10,11 +10,15 @@ import type {FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
+import type {Transition} from './ReactFiberTracingMarkerComponent.old';
 
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {enableCache, enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
-import {getWorkInProgressRoot} from './ReactFiberWorkLoop.old';
+import {
+  getWorkInProgressRoot,
+  getWorkInProgressTransitions,
+} from './ReactFiberWorkLoop.old';
 import {
   createCache,
   retainCache,
@@ -25,6 +29,15 @@ import {
 // 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 {
   if (!enableCache) {
     return (null: any);
@@ -75,25 +88,31 @@ export function requestCacheFromPool(renderLanes: Lanes): Cache {
   return freshCache;
 }
 
-export function pushRootTransition(root: FiberRoot) {
-  if (enableCache) {
-    return;
+export function pushRootTransition(
+  workInProgress: Fiber,
+  root: FiberRoot,
+  renderLanes: Lanes,
+) {
+  if (enableTransitionTracing) {
+    const rootTransitions = getWorkInProgressTransitions();
+    push(transitionStack, rootTransitions, workInProgress);
   }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
 }
 
-export function popRootTransition(root: FiberRoot, renderLanes: Lanes) {
-  if (enableCache) {
-    return;
+export function popRootTransition(
+  workInProgress: Fiber,
+  root: FiberRoot,
+  renderLanes: Lanes,
+) {
+  if (enableTransitionTracing) {
+    pop(transitionStack, workInProgress);
   }
-  // Note: This function currently does nothing but I'll leave it here for
-  // code organization purposes in case that changes.
 }
 
 export function pushTransition(
   offscreenWorkInProgress: Fiber,
   prevCachePool: SpawnedCachePool | null,
+  newTransitions: Array<Transition> | null,
 ): void {
   if (enableCache) {
     if (prevCachePool === null) {
@@ -102,12 +121,40 @@ export function pushTransition(
       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) {
-  if (enableCache) {
-    pop(resumedCache, workInProgress);
+export function popTransition(workInProgress: Fiber, current: Fiber | null) {
+  if (current !== null) {
+    if (enableCache) {
+      pop(resumedCache, workInProgress);
+    }
+
+    if (enableTransitionTracing) {
+      pop(transitionStack, workInProgress);
+    }
+  }
+}
+
+export function getSuspendedTransitions(): Array<Transition> | null {
+  if (!enableTransitionTracing) {
+    return null;
   }
+
+  return transitionStack.current;
 }
 
 export function getSuspendedCache(): SpawnedCachePool | null {
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index faac8f38f05f..eb2ea2286a27 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -79,13 +79,12 @@ function unwindWork(
       return null;
     }
     case HostRoot: {
+      const root: FiberRoot = workInProgress.stateNode;
       if (enableCache) {
-        const root: FiberRoot = workInProgress.stateNode;
-        popRootTransition(root, renderLanes);
-
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
+      popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
@@ -153,11 +152,7 @@ function unwindWork(
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(workInProgress);
-      if (enableCache) {
-        if (current !== null) {
-          popTransition(workInProgress);
-        }
-      }
+      popTransition(workInProgress, current);
       return null;
     case CacheComponent:
       if (enableCache) {
@@ -189,13 +184,12 @@ function unwindInterruptedWork(
       break;
     }
     case HostRoot: {
+      const root: FiberRoot = interruptedWork.stateNode;
       if (enableCache) {
-        const root: FiberRoot = interruptedWork.stateNode;
-        popRootTransition(root, renderLanes);
-
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
+      popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
       resetMutableSourceWorkInProgressVersions();
@@ -221,12 +215,7 @@ function unwindInterruptedWork(
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(interruptedWork);
-      if (enableCache) {
-        if (current !== null) {
-          popTransition(interruptedWork);
-        }
-      }
-
+      popTransition(interruptedWork, current);
       break;
     case CacheComponent:
       if (enableCache) {
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 4578134d58d0..1eb4d72d98c9 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -79,13 +79,12 @@ function unwindWork(
       return null;
     }
     case HostRoot: {
+      const root: FiberRoot = workInProgress.stateNode;
       if (enableCache) {
-        const root: FiberRoot = workInProgress.stateNode;
-        popRootTransition(root, renderLanes);
-
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
+      popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
       resetMutableSourceWorkInProgressVersions();
@@ -153,11 +152,7 @@ function unwindWork(
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(workInProgress);
-      if (enableCache) {
-        if (current !== null) {
-          popTransition(workInProgress);
-        }
-      }
+      popTransition(workInProgress, current);
       return null;
     case CacheComponent:
       if (enableCache) {
@@ -189,13 +184,12 @@ function unwindInterruptedWork(
       break;
     }
     case HostRoot: {
+      const root: FiberRoot = interruptedWork.stateNode;
       if (enableCache) {
-        const root: FiberRoot = interruptedWork.stateNode;
-        popRootTransition(root, renderLanes);
-
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
+      popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
       resetMutableSourceWorkInProgressVersions();
@@ -221,12 +215,7 @@ function unwindInterruptedWork(
     case OffscreenComponent:
     case LegacyHiddenComponent:
       popRenderLanes(interruptedWork);
-      if (enableCache) {
-        if (current !== null) {
-          popTransition(interruptedWork);
-        }
-      }
-
+      popTransition(interruptedWork, current);
       break;
     case CacheComponent:
       if (enableCache) {

From 0568c0f8cde4ac6657dff9a5a8a7112acc35a748 Mon Sep 17 00:00:00 2001
From: Leo <wtlin1228@gmail.com>
Date: Sun, 10 Apr 2022 03:29:08 +0800
Subject: [PATCH 1297/1603] Replace zero with NoLanes for consistency in
 FiberLane (#24327)

---
 packages/react-reconciler/src/ReactFiberLane.new.js | 10 +++++-----
 packages/react-reconciler/src/ReactFiberLane.old.js | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 8290c75e882e..aa3360bd3c2b 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -483,7 +483,7 @@ export function includesExpiredLane(root: FiberRoot, lanes: Lanes) {
 }
 
 export function isTransitionLane(lane: Lane) {
-  return (lane & TransitionLanes) !== 0;
+  return (lane & TransitionLanes) !== NoLanes;
 }
 
 export function claimNextTransitionLane(): Lane {
@@ -492,7 +492,7 @@ export function claimNextTransitionLane(): Lane {
   // run out of lanes and cycle back to the beginning.
   const lane = nextTransitionLane;
   nextTransitionLane <<= 1;
-  if ((nextTransitionLane & TransitionLanes) === 0) {
+  if ((nextTransitionLane & TransitionLanes) === NoLanes) {
     nextTransitionLane = TransitionLane1;
   }
   return lane;
@@ -501,7 +501,7 @@ export function claimNextTransitionLane(): Lane {
 export function claimNextRetryLane(): Lane {
   const lane = nextRetryLane;
   nextRetryLane <<= 1;
-  if ((nextRetryLane & RetryLanes) === 0) {
+  if ((nextRetryLane & RetryLanes) === NoLanes) {
     nextRetryLane = RetryLane1;
   }
   return lane;
@@ -634,8 +634,8 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.pendingLanes = remainingLanes;
 
   // Let's try everything again
-  root.suspendedLanes = 0;
-  root.pingedLanes = 0;
+  root.suspendedLanes = NoLanes;
+  root.pingedLanes = NoLanes;
 
   root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 172518373638..a65a922d99b9 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -483,7 +483,7 @@ export function includesExpiredLane(root: FiberRoot, lanes: Lanes) {
 }
 
 export function isTransitionLane(lane: Lane) {
-  return (lane & TransitionLanes) !== 0;
+  return (lane & TransitionLanes) !== NoLanes;
 }
 
 export function claimNextTransitionLane(): Lane {
@@ -492,7 +492,7 @@ export function claimNextTransitionLane(): Lane {
   // run out of lanes and cycle back to the beginning.
   const lane = nextTransitionLane;
   nextTransitionLane <<= 1;
-  if ((nextTransitionLane & TransitionLanes) === 0) {
+  if ((nextTransitionLane & TransitionLanes) === NoLanes) {
     nextTransitionLane = TransitionLane1;
   }
   return lane;
@@ -501,7 +501,7 @@ export function claimNextTransitionLane(): Lane {
 export function claimNextRetryLane(): Lane {
   const lane = nextRetryLane;
   nextRetryLane <<= 1;
-  if ((nextRetryLane & RetryLanes) === 0) {
+  if ((nextRetryLane & RetryLanes) === NoLanes) {
     nextRetryLane = RetryLane1;
   }
   return lane;
@@ -634,8 +634,8 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   root.pendingLanes = remainingLanes;
 
   // Let's try everything again
-  root.suspendedLanes = 0;
-  root.pingedLanes = 0;
+  root.suspendedLanes = NoLanes;
+  root.pingedLanes = NoLanes;
 
   root.expiredLanes &= remainingLanes;
   root.mutableReadLanes &= remainingLanes;

From fa580022624974f4a8d0e0a3b67e1dc2fd54d583 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Mon, 11 Apr 2022 09:13:44 -0700
Subject: [PATCH 1298/1603] [Fizz] Pipeable Stream Perf (#24291)

* Add fixture for comparing baseline render perf for renderToString and renderToPipeableStream

Modified from ssr2 and https://github.com/SuperOleg39/react-ssr-perf-test

* Implement buffering in pipeable streams

The previous implementation of pipeable streaming (Node) suffered some performance issues brought about by the high chunk counts and innefficiencies with how node streams handle this situation. In particular the use of cork/uncork was meant to alleviate this but these methods do not do anything unless the receiving Writable Stream implements _writev which many won't.

This change adopts the view based buffering techniques previously implemented for the Browser execution context. The main difference is the use of backpressure provided by the writable stream which is not implementable in the other context. Another change to note is the use of standards constructs like TextEncoder and TypedArrays.

* Implement encodeInto during flushCompletedQueues

encodeInto allows us to write directly to the view buffer that will end up getting streamed instead of encoding into an intermediate buffer and then copying that data.
---
 fixtures/fizz/README.md                       |   30 +
 fixtures/fizz/package.json                    |   53 +
 fixtures/fizz/public/main.css                 |   74 +
 fixtures/fizz/scripts/build.js                |   53 +
 fixtures/fizz/server/delays.js                |   18 +
 fixtures/fizz/server/render-to-buffer.js      |   83 +
 fixtures/fizz/server/render-to-stream.js      |   57 +
 fixtures/fizz/server/render-to-string.js      |   34 +
 fixtures/fizz/server/server.js                |  108 +
 fixtures/fizz/src/App.js                      |   26 +
 fixtures/fizz/src/BigComponent.js             |  181 +
 fixtures/fizz/src/Html.js                     |   34 +
 fixtures/fizz/src/index.js                    |   12 +
 fixtures/fizz/yarn.lock                       | 5254 +++++++++++++++++
 .../src/ReactServerStreamConfigNode.js        |  134 +-
 scripts/flow/environment.js                   |   27 +
 scripts/rollup/bundles.js                     |    5 +-
 17 files changed, 6168 insertions(+), 15 deletions(-)
 create mode 100644 fixtures/fizz/README.md
 create mode 100644 fixtures/fizz/package.json
 create mode 100644 fixtures/fizz/public/main.css
 create mode 100644 fixtures/fizz/scripts/build.js
 create mode 100644 fixtures/fizz/server/delays.js
 create mode 100644 fixtures/fizz/server/render-to-buffer.js
 create mode 100644 fixtures/fizz/server/render-to-stream.js
 create mode 100644 fixtures/fizz/server/render-to-string.js
 create mode 100644 fixtures/fizz/server/server.js
 create mode 100644 fixtures/fizz/src/App.js
 create mode 100644 fixtures/fizz/src/BigComponent.js
 create mode 100644 fixtures/fizz/src/Html.js
 create mode 100644 fixtures/fizz/src/index.js
 create mode 100644 fixtures/fizz/yarn.lock

diff --git a/fixtures/fizz/README.md b/fixtures/fizz/README.md
new file mode 100644
index 000000000000..63acd3ddc545
--- /dev/null
+++ b/fixtures/fizz/README.md
@@ -0,0 +1,30 @@
+# Fizz Fixtures
+
+A set of basic tests for Fizz primarily focussed on baseline perfomrance 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 000000000000..42becc4b8bce
--- /dev/null
+++ b/fixtures/fizz/package.json
@@ -0,0 +1,53 @@
+{
+  "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": "link:../../build/node_modules/react",
+    "react-dom": "link:../../build/node_modules/react-dom",
+    "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": {
+    "start": "concurrently \"npm run server:dev\" \"npm run bundler:dev\"",
+    "start:prod": "concurrently \"npm run server:prod\" \"npm run bundler:prod\"",
+    "server:dev": "cross-env NODE_ENV=development nodemon -- --inspect server/server.js",
+    "server:prod": "cross-env NODE_ENV=production nodemon -- server/server.js",
+    "bundler:dev": "cross-env NODE_ENV=development nodemon -- scripts/build.js",
+    "bundler:prod": "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 000000000000..34b4ecb1ce7f
--- /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 000000000000..452f7c750f61
--- /dev/null
+++ b/fixtures/fizz/scripts/build.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'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 000000000000..20a1e870b4e0
--- /dev/null
+++ b/fixtures/fizz/server/delays.js
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+// 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 000000000000..ba509b812b73
--- /dev/null
+++ b/fixtures/fizz/server/render-to-buffer.js
@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..063d776a8dd7
--- /dev/null
+++ b/fixtures/fizz/server/render-to-stream.js
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..04ffff06b798
--- /dev/null
+++ b/fixtures/fizz/server/render-to-string.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..38519e574310
--- /dev/null
+++ b/fixtures/fizz/server/server.js
@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+'use strict';
+
+const 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 000000000000..8610a4603ced
--- /dev/null
+++ b/fixtures/fizz/src/App.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..e19919910684
--- /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 000000000000..e834f84bac87
--- /dev/null
+++ b/fixtures/fizz/src/Html.js
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..10c2898e328b
--- /dev/null
+++ b/fixtures/fizz/src/index.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+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 000000000000..7b3eeac78715
--- /dev/null
+++ b/fixtures/fizz/yarn.lock
@@ -0,0 +1,5254 @@
+# 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, bn.js@^5.1.1:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.2.0.tgz#358860674396c6997771a9d051fcc1b57d4ae002"
+  integrity sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw==
+
+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.0.1:
+  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.1"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.1.tgz#eaf4add46dd54be3bb3b36c0cf15abbeba7956c3"
+  integrity sha512-/vrA5fguVAKKAVTNJjgSm1tRQDHUU6DbwO9IROu/0WAzC8PKhucDSh18J0RMvVeHAn5puMd+QHC2erPRNf8lmg==
+  dependencies:
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.3"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
+
+browserify-zlib@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
+  integrity sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==
+  dependencies:
+    pako "~1.0.5"
+
+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.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.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:
+  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.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@^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, 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.5:
+  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@link:../../build/node_modules/react-dom":
+  version "0.0.0"
+  uid ""
+
+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@link:../../build/node_modules/react":
+  version "0.0.0"
+  uid ""
+
+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"
+
+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.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.21.0:
+  version "0.21.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
+  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
+  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.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.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/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js
index 4ab3d3cb6f2f..c34d288cd2a4 100644
--- a/packages/react-server/src/ReactServerStreamConfigNode.js
+++ b/packages/react-server/src/ReactServerStreamConfigNode.js
@@ -8,6 +8,7 @@
  */
 
 import type {Writable} from 'stream';
+import {TextEncoder} from 'util';
 
 type MightBeFlushable = {
   flush?: () => void,
@@ -33,46 +34,153 @@ export function flushBuffered(destination: Destination) {
   }
 }
 
+const VIEW_SIZE = 2048;
+let currentView = null;
+let writtenBytes = 0;
+let destinationHasCapacity = true;
+
 export function beginWriting(destination: Destination) {
-  // Older Node streams like http.createServer don't have this.
-  if (typeof destination.cork === 'function') {
-    destination.cork();
+  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;
+    }
+    writeToDestination(destination, textEncoder.encode(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));
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = textEncoder.encodeInto(stringChunk.slice(read), currentView)
+      .written;
+  }
+
+  if (writtenBytes === VIEW_SIZE) {
+    writeToDestination(destination, (currentView: any));
+    currentView = new Uint8Array(VIEW_SIZE);
+    writtenBytes = 0;
+  }
+}
+
+function writeViewChunk(destination: Destination, chunk: PrecomputedChunk) {
+  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: Chunk | PrecomputedChunk,
+  chunk: PrecomputedChunk | Chunk,
 ): void {
-  const nodeBuffer = ((chunk: any): Buffer | string); // close enough
-  destination.write(nodeBuffer);
+  if (typeof chunk === 'string') {
+    writeStringChunk(destination, chunk);
+  } else {
+    writeViewChunk(destination, ((chunk: any): PrecomputedChunk));
+  }
+}
+
+function writeToDestination(destination: Destination, view: Uint8Array) {
+  const currentHasCapacity = destination.write(view);
+  destinationHasCapacity = destinationHasCapacity && currentHasCapacity;
 }
 
 export function writeChunkAndReturn(
   destination: Destination,
-  chunk: Chunk | PrecomputedChunk,
+  chunk: PrecomputedChunk | Chunk,
 ): boolean {
-  const nodeBuffer = ((chunk: any): Buffer | string); // close enough
-  return destination.write(nodeBuffer);
+  writeChunk(destination, chunk);
+  return destinationHasCapacity;
 }
 
 export function completeWriting(destination: Destination) {
-  // Older Node streams like http.createServer don't have this.
-  if (typeof destination.uncork === 'function') {
-    destination.uncork();
+  if (currentView && writtenBytes > 0) {
+    destination.write(currentView.subarray(0, writtenBytes));
   }
+  currentView = null;
+  writtenBytes = 0;
+  destinationHasCapacity = true;
 }
 
 export function close(destination: Destination) {
   destination.end();
 }
 
+const textEncoder = new TextEncoder();
+
 export function stringToChunk(content: string): Chunk {
   return content;
 }
 
 export function stringToPrecomputedChunk(content: string): PrecomputedChunk {
-  return Buffer.from(content, 'utf8');
+  return textEncoder.encode(content);
 }
 
 export function closeWithError(destination: Destination, error: mixed): void {
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 4294964a74b9..f97bd32a4321 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -125,6 +125,33 @@ declare module 'pg' {
   };
 }
 
+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 class TextEncoder {
+    constructor(encoding?: string): TextEncoder;
+    encode(buffer: string): Uint8Array;
+    encodeInto(
+      buffer: string,
+      dest: Uint8Array,
+    ): {read: number, written: number};
+    encoding: string;
+  }
+}
+
 declare module 'pg/lib/utils' {
   declare module.exports: {
     prepareValue(val: any): mixed,
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index f638ec5e5995..dffa9055d845 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -318,7 +318,7 @@ const bundles = [
     global: 'ReactDOMServer',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react'],
+    externals: ['react', 'util'],
   },
   {
     bundleTypes: __EXPERIMENTAL__ ? [FB_WWW_DEV, FB_WWW_PROD] : [],
@@ -347,7 +347,7 @@ const bundles = [
     global: 'ReactServerDOMWriter',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,
-    externals: ['react'],
+    externals: ['react', 'util'],
   },
 
   /******* React Server DOM Webpack Reader *******/
@@ -437,6 +437,7 @@ const bundles = [
       'ReactFlightNativeRelayServerIntegration',
       'JSResourceReferenceImpl',
       'ReactNativeInternalFeatureFlags',
+      'util',
     ],
   },
 

From f993ffc5141a58e2a53d4b822b15744b0542aa93 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 11 Apr 2022 12:34:03 -0400
Subject: [PATCH 1299/1603] Fix infinite update loop that happens when an
 unmemoized value is passed to useDeferredValue (#24247)

* Fix infinite loop if unmemoized val passed to uDV

The current implementation of useDeferredValue will spawn a new
render any time the input value is different from the previous one. So
if you pass an unmemoized value (like an inline object), it will never
stop spawning new renders.

The fix is to only defer during an urgent render. If we're already
inside a transition, retry, offscreen, or other non-urgen render, then
we can use the latest value.

* Temporarily disable "long nested update" warning

DevTools' timeline profiler warns if an update inside a layout effect
results in an expensive re-render. However, it misattributes renders
that are spawned from a sync render at lower priority. This affects the
new implementation of useDeferredValue but it would also apply to things
like Offscreen.

It's not obvious to me how to fix this given how DevTools models the
idea of a "nested update" so I'm disabling the warning for now to
unblock the bugfix for useDeferredValue.
---
 .../src/__tests__/preprocessData-test.js      |  12 +-
 .../src/import-worker/preprocessData.js       |   5 +-
 .../src/ReactFiberHooks.new.js                |  94 +++++---
 .../src/ReactFiberHooks.old.js                |  94 +++++---
 .../src/__tests__/ReactDeferredValue-test.js  | 224 ++++++++++++++++++
 5 files changed, 361 insertions(+), 68 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js

diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index 72086a684cd4..880607ff1d76 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -1463,7 +1463,9 @@ describe('Timeline profiler', () => {
             expect(event.warning).toBe(null);
           });
 
-          it('should warn about long nested (state) updates during layout effects', async () => {
+          // This is temporarily disabled because the warning doesn't work
+          // with useDeferredValue
+          it.skip('should warn about long nested (state) updates during layout effects', async () => {
             function Component() {
               const [didMount, setDidMount] = React.useState(false);
               Scheduler.unstable_yieldValue(
@@ -1523,7 +1525,9 @@ describe('Timeline profiler', () => {
             );
           });
 
-          it('should warn about long nested (forced) updates during layout effects', async () => {
+          // This is temporarily disabled because the warning doesn't work
+          // with useDeferredValue
+          it.skip('should warn about long nested (forced) updates during layout effects', async () => {
             class Component extends React.Component {
               _didMount: boolean = false;
               componentDidMount() {
@@ -1654,7 +1658,9 @@ describe('Timeline profiler', () => {
             });
           });
 
-          it('should not warn about deferred value updates scheduled during commit phase', async () => {
+          // This is temporarily disabled because the warning doesn't work
+          // with useDeferredValue
+          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);
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
index 258eef931a38..110b4e8923fb 100644
--- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -1124,7 +1124,10 @@ export default async function preprocessData(
           lane => profilerData.laneToLabelMap.get(lane) === 'Transition',
         )
       ) {
-        schedulingEvent.warning = WARNING_STRINGS.NESTED_UPDATE;
+        // 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;
       }
     }
   });
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index d1c50b42d8cb..1008f835b6e7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -47,6 +47,8 @@ import {
   NoLanes,
   isSubsetOfLanes,
   includesBlockingLane,
+  includesOnlyNonUrgentLanes,
+  claimNextTransitionLane,
   mergeLanes,
   removeLanes,
   intersectLanes,
@@ -1929,45 +1931,73 @@ function updateMemo<T>(
 }
 
 function mountDeferredValue<T>(value: T): T {
-  const [prevValue, setValue] = mountState(value);
-  mountEffect(() => {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = {};
-    try {
-      setValue(value);
-    } finally {
-      ReactCurrentBatchConfig.transition = prevTransition;
-    }
-  }, [value]);
-  return prevValue;
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = value;
+  return value;
 }
 
 function updateDeferredValue<T>(value: T): T {
-  const [prevValue, setValue] = updateState(value);
-  updateEffect(() => {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = {};
-    try {
-      setValue(value);
-    } finally {
-      ReactCurrentBatchConfig.transition = prevTransition;
-    }
-  }, [value]);
-  return prevValue;
+  const hook = updateWorkInProgressHook();
+  const resolvedCurrentHook: Hook = (currentHook: any);
+  const prevValue: T = resolvedCurrentHook.memoizedState;
+  return updateDeferredValueImpl(hook, prevValue, value);
 }
 
 function rerenderDeferredValue<T>(value: T): T {
-  const [prevValue, setValue] = rerenderState(value);
-  updateEffect(() => {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = {};
-    try {
-      setValue(value);
-    } finally {
-      ReactCurrentBatchConfig.transition = prevTransition;
+  const hook = updateWorkInProgressHook();
+  if (currentHook === null) {
+    // This is a rerender during a mount.
+    hook.memoizedState = value;
+    return value;
+  } else {
+    // This is a rerender during an update.
+    const prevValue: T = currentHook.memoizedState;
+    return updateDeferredValueImpl(hook, prevValue, value);
+  }
+}
+
+function updateDeferredValueImpl<T>(hook: Hook, prevValue: T, value: T): T {
+  const shouldDeferValue = !includesOnlyNonUrgentLanes(renderLanes);
+  if (shouldDeferValue) {
+    // This is an urgent update. If the value has changed, keep using the
+    // previous value and spawn a deferred render to update it later.
+
+    if (!is(value, prevValue)) {
+      // Schedule a deferred render
+      const deferredLane = claimNextTransitionLane();
+      currentlyRenderingFiber.lanes = mergeLanes(
+        currentlyRenderingFiber.lanes,
+        deferredLane,
+      );
+      markSkippedUpdateLanes(deferredLane);
+
+      // Set this to true to indicate that the rendered value is inconsistent
+      // from the latest value. The name "baseState" doesn't really match how we
+      // use it because we're reusing a state hook field instead of creating a
+      // new one.
+      hook.baseState = true;
     }
-  }, [value]);
-  return prevValue;
+
+    // Reuse the previous 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.
+
+    // However, if we're currently inside a spawned render, then we need to mark
+    // this as an update to prevent the fiber from bailing out.
+    //
+    // `baseState` is true when the current value is different from the rendered
+    // value. The name doesn't really match how we use it because we're reusing
+    // a state hook field instead of creating a new one.
+    if (hook.baseState) {
+      // Flip this back to false.
+      hook.baseState = false;
+      markWorkInProgressReceivedUpdate();
+    }
+
+    return value;
+  }
 }
 
 function startTransition(setPending, callback, options) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 137ee33cba51..139e86922422 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -47,6 +47,8 @@ import {
   NoLanes,
   isSubsetOfLanes,
   includesBlockingLane,
+  includesOnlyNonUrgentLanes,
+  claimNextTransitionLane,
   mergeLanes,
   removeLanes,
   intersectLanes,
@@ -1929,45 +1931,73 @@ function updateMemo<T>(
 }
 
 function mountDeferredValue<T>(value: T): T {
-  const [prevValue, setValue] = mountState(value);
-  mountEffect(() => {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = {};
-    try {
-      setValue(value);
-    } finally {
-      ReactCurrentBatchConfig.transition = prevTransition;
-    }
-  }, [value]);
-  return prevValue;
+  const hook = mountWorkInProgressHook();
+  hook.memoizedState = value;
+  return value;
 }
 
 function updateDeferredValue<T>(value: T): T {
-  const [prevValue, setValue] = updateState(value);
-  updateEffect(() => {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = {};
-    try {
-      setValue(value);
-    } finally {
-      ReactCurrentBatchConfig.transition = prevTransition;
-    }
-  }, [value]);
-  return prevValue;
+  const hook = updateWorkInProgressHook();
+  const resolvedCurrentHook: Hook = (currentHook: any);
+  const prevValue: T = resolvedCurrentHook.memoizedState;
+  return updateDeferredValueImpl(hook, prevValue, value);
 }
 
 function rerenderDeferredValue<T>(value: T): T {
-  const [prevValue, setValue] = rerenderState(value);
-  updateEffect(() => {
-    const prevTransition = ReactCurrentBatchConfig.transition;
-    ReactCurrentBatchConfig.transition = {};
-    try {
-      setValue(value);
-    } finally {
-      ReactCurrentBatchConfig.transition = prevTransition;
+  const hook = updateWorkInProgressHook();
+  if (currentHook === null) {
+    // This is a rerender during a mount.
+    hook.memoizedState = value;
+    return value;
+  } else {
+    // This is a rerender during an update.
+    const prevValue: T = currentHook.memoizedState;
+    return updateDeferredValueImpl(hook, prevValue, value);
+  }
+}
+
+function updateDeferredValueImpl<T>(hook: Hook, prevValue: T, value: T): T {
+  const shouldDeferValue = !includesOnlyNonUrgentLanes(renderLanes);
+  if (shouldDeferValue) {
+    // This is an urgent update. If the value has changed, keep using the
+    // previous value and spawn a deferred render to update it later.
+
+    if (!is(value, prevValue)) {
+      // Schedule a deferred render
+      const deferredLane = claimNextTransitionLane();
+      currentlyRenderingFiber.lanes = mergeLanes(
+        currentlyRenderingFiber.lanes,
+        deferredLane,
+      );
+      markSkippedUpdateLanes(deferredLane);
+
+      // Set this to true to indicate that the rendered value is inconsistent
+      // from the latest value. The name "baseState" doesn't really match how we
+      // use it because we're reusing a state hook field instead of creating a
+      // new one.
+      hook.baseState = true;
     }
-  }, [value]);
-  return prevValue;
+
+    // Reuse the previous 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.
+
+    // However, if we're currently inside a spawned render, then we need to mark
+    // this as an update to prevent the fiber from bailing out.
+    //
+    // `baseState` is true when the current value is different from the rendered
+    // value. The name doesn't really match how we use it because we're reusing
+    // a state hook field instead of creating a new one.
+    if (hook.baseState) {
+      // Flip this back to false.
+      hook.baseState = false;
+      markWorkInProgressReceivedUpdate();
+    }
+
+    return value;
+  }
 }
 
 function startTransition(setPending, callback, options) {
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 000000000000..9cd07c066e4c
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
@@ -0,0 +1,224 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let startTransition;
+let useDeferredValue;
+let useMemo;
+let useState;
+
+describe('ReactDeferredValue', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('jest-react').act;
+    startTransition = React.startTransition;
+    useDeferredValue = React.useDeferredValue;
+    useMemo = React.useMemo;
+    useState = React.useState;
+  });
+
+  function Text({text}) {
+    Scheduler.unstable_yieldValue(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(async () => {
+      root.render(<App value={1} />);
+    });
+    expect(Scheduler).toHaveYielded(['Original: 1', 'Deferred: 1']);
+
+    // If it's an urgent update, the value is deferred
+    await act(async () => {
+      root.render(<App value={2} />);
+
+      expect(Scheduler).toFlushUntilNextPaint(['Original: 2']);
+      // The deferred value updates in a separate render
+      expect(Scheduler).toFlushUntilNextPaint(['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
+      expect(Scheduler).toFlushUntilNextPaint(['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(async () => {
+      root.render(<App value={1} />);
+    });
+    expect(Scheduler).toHaveYielded(['Original: 1', 'Deferred: 1']);
+
+    // If it's an urgent update, the value is deferred
+    await act(async () => {
+      root.render(<App value={2} />);
+
+      expect(Scheduler).toFlushUntilNextPaint(['Original: 2']);
+      // The deferred value updates in a separate render
+      expect(Scheduler).toFlushUntilNextPaint(['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
+      expect(Scheduler).toFlushUntilNextPaint(['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(async () => {
+      root.render(<App value={1} />);
+    });
+    expect(Scheduler).toHaveYielded(['Original: 1', 'Deferred: 1']);
+
+    // If it's an urgent update, the value is deferred
+    await act(async () => {
+      root.render(<App value={2} />);
+
+      expect(Scheduler).toFlushUntilNextPaint(['Original: 2']);
+      // The deferred value updates in a separate render
+      expect(Scheduler).toFlushUntilNextPaint(['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
+      expect(Scheduler).toFlushUntilNextPaint(['Original: 3', 'Deferred: 3']);
+    });
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <div>Original: 3</div>
+        <div>Deferred: 3</div>
+      </div>,
+    );
+  });
+});

From d9a0f9e20338f05f0992562075ff034ccde008fe Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Mon, 11 Apr 2022 20:07:22 +0100
Subject: [PATCH 1300/1603] Delete create-subscription folder (#24288)

---
 packages/create-subscription/README.md        | 169 ------
 packages/create-subscription/index.js         |  12 -
 packages/create-subscription/npm/index.js     |   7 -
 packages/create-subscription/package.json     |  22 -
 .../src/__tests__/createSubscription-test.js  | 505 ------------------
 .../src/createSubscription.js                 | 159 ------
 scripts/rollup/bundles.js                     |  17 -
 7 files changed, 891 deletions(-)
 delete mode 100644 packages/create-subscription/README.md
 delete mode 100644 packages/create-subscription/index.js
 delete mode 100644 packages/create-subscription/npm/index.js
 delete mode 100644 packages/create-subscription/package.json
 delete mode 100644 packages/create-subscription/src/__tests__/createSubscription-test.js
 delete mode 100644 packages/create-subscription/src/createSubscription.js

diff --git a/packages/create-subscription/README.md b/packages/create-subscription/README.md
deleted file mode 100644
index 281683786adc..000000000000
--- a/packages/create-subscription/README.md
+++ /dev/null
@@ -1,169 +0,0 @@
-# create-subscription
-
-`create-subscription` is a utility for subscribing to external data sources inside React components.
-
-**It is no longer maintained and will not be updated. Use the built-in [`React.useSyncExternalStore`](https://reactjs.org/docs/hooks-reference.html#usesyncexternalstore) instead.**
-
-# Installation
-
-```sh
-# Yarn
-yarn add create-subscription
-
-# NPM
-npm install create-subscription
-```
-
-# Usage
-
-To configure a subscription, you must provide two methods: `getCurrentValue` and `subscribe`.
-
-```js
-import { createSubscription } from "create-subscription";
-
-const Subscription = createSubscription({
-  getCurrentValue(source) {
-    // Return the current value of the subscription (source),
-    // or `undefined` if the value can't be read synchronously (e.g. native Promises).
-  },
-  subscribe(source, callback) {
-    // Subscribe (e.g. add an event listener) to the subscription (source).
-    // Call callback(newValue) whenever a subscription changes.
-    // Return an unsubscribe method,
-    // Or a no-op if unsubscribe is not supported (e.g. native Promises).
-  }
-});
-```
-
-To use the `Subscription` component, pass the subscribable property (e.g. an event dispatcher, observable) as the `source` property and use a [render prop](https://reactjs.org/docs/render-props.html), `children`, to handle the subscribed value when it changes:
-
-```js
-<Subscription source={eventDispatcher}>
-  {value => <AnotherComponent value={value} />}
-</Subscription>
-```
-
-# Examples
-
-This API can be used to subscribe to a variety of "subscribable" sources, from event dispatchers to RxJS observables. Below are a few examples of how to subscribe to common types.
-
-## Subscribing to event dispatchers
-
-Below is an example showing how `create-subscription` can be used to subscribe to event dispatchers such as DOM elements.
-
-```js
-import React from "react";
-import { createSubscription } from "create-subscription";
-
-// Start with a simple component.
-// In this case, it's a function component, but it could have been a class.
-function FollowerComponent({ followersCount }) {
-  return <div>You have {followersCount} followers!</div>;
-}
-
-// Create a wrapper component to manage the subscription.
-const EventHandlerSubscription = createSubscription({
-  getCurrentValue: eventDispatcher => eventDispatcher.value,
-  subscribe: (eventDispatcher, callback) => {
-    const onChange = event => callback(eventDispatcher.value);
-    eventDispatcher.addEventListener("change", onChange);
-    return () => eventDispatcher.removeEventListener("change", onChange);
-  }
-});
-
-// Your component can now be used as shown below.
-// In this example, 'eventDispatcher' represents a generic event dispatcher.
-<EventHandlerSubscription source={eventDispatcher}>
-  {value => <FollowerComponent followersCount={value} />}
-</EventHandlerSubscription>;
-```
-
-## Subscribing to observables
-
-Below are examples showing how `create-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 BehaviorSubscription = createSubscription({
-  getCurrentValue: behaviorSubject => behaviorSubject.getValue(),
-  subscribe: (behaviorSubject, callback) => {
-    const subscription = behaviorSubject.subscribe(callback);
-    return () => subscription.unsubscribe();
-  }
-});
-```
-
-### `ReplaySubject`
-```js
-const ReplaySubscription = createSubscription({
-  getCurrentValue: replaySubject => {
-    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: (replaySubject, callback) => {
-    const subscription = replaySubject.subscribe(callback);
-    return () => subscription.unsubscribe();
-  }
-});
-```
-
-## Subscribing to a Promise
-
-Below is an example showing how `create-subscription` can be used with native Promises.
-
-**Note** that an initial render value of `undefined` is unavoidable due to the fact that Promises provide no way to synchronously read their current value.
-
-**Note** the lack of a way to "unsubscribe" from a Promise can result in memory leaks as long as something has a reference to the Promise. This should be taken into consideration when determining whether Promises are appropriate to use in this way within your application.
-
-```js
-import React from "react";
-import { createSubscription } from "create-subscription";
-
-// Start with a simple component.
-function LoadingComponent({ loadingStatus }) {
-  if (loadingStatus === undefined) {
-    // Loading
-  } else if (loadingStatus === null) {
-    // Error
-  } else {
-    // Success
-  }
-}
-
-// Wrap the function component with a subscriber HOC.
-// This HOC will manage subscriptions and pass values to the decorated component.
-// It will add and remove subscriptions in an async-safe way when props change.
-const PromiseSubscription = createSubscription({
-  getCurrentValue: promise => {
-    // There is no way to synchronously read a Promise's value,
-    // So this method should return undefined.
-    return undefined;
-  },
-  subscribe: (promise, callback) => {
-    promise.then(
-      // Success
-      value => callback(value),
-      // Failure
-      () => callback(null)
-    );
-
-    // There is no way to "unsubscribe" from a Promise.
-    // create-subscription will still prevent stale values from rendering.
-    return () => {};
-  }
-});
-
-// Your component can now be used as shown below.
-<PromiseSubscription source={loadingPromise}>
-  {loadingStatus => <LoadingComponent loadingStatus={loadingStatus} />}
-</PromiseSubscription>
-```
diff --git a/packages/create-subscription/index.js b/packages/create-subscription/index.js
deleted file mode 100644
index 314587a1351b..000000000000
--- a/packages/create-subscription/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-'use strict';
-
-export * from './src/createSubscription';
diff --git a/packages/create-subscription/npm/index.js b/packages/create-subscription/npm/index.js
deleted file mode 100644
index 6b7a5b017457..000000000000
--- a/packages/create-subscription/npm/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-'use strict';
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./cjs/create-subscription.production.min.js');
-} else {
-  module.exports = require('./cjs/create-subscription.development.js');
-}
diff --git a/packages/create-subscription/package.json b/packages/create-subscription/package.json
deleted file mode 100644
index a7b333446113..000000000000
--- a/packages/create-subscription/package.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "create-subscription",
-  "description": "utility for subscribing to external data sources inside React components",
-  "version": "18.0.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/facebook/react.git",
-    "directory": "packages/create-subscription"
-  },
-  "files": [
-    "LICENSE",
-    "README.md",
-    "index.js",
-    "cjs/"
-  ],
-  "peerDependencies": {
-    "react": "^18.0.0"
-  },
-  "devDependencies": {
-    "rxjs": "^5.5.6"
-  }
-}
diff --git a/packages/create-subscription/src/__tests__/createSubscription-test.js b/packages/create-subscription/src/__tests__/createSubscription-test.js
deleted file mode 100644
index c596bdb954c0..000000000000
--- a/packages/create-subscription/src/__tests__/createSubscription-test.js
+++ /dev/null
@@ -1,505 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @emails react-core
- */
-
-'use strict';
-
-let createSubscription;
-let BehaviorSubject;
-let React;
-let ReactNoop;
-let Scheduler;
-let ReplaySubject;
-
-describe('createSubscription', () => {
-  beforeEach(() => {
-    jest.resetModules();
-    createSubscription = require('create-subscription').createSubscription;
-
-    React = require('react');
-    ReactNoop = require('react-noop-renderer');
-    Scheduler = require('scheduler');
-
-    BehaviorSubject = require('rxjs/BehaviorSubject').BehaviorSubject;
-    ReplaySubject = require('rxjs/ReplaySubject').ReplaySubject;
-  });
-
-  function createBehaviorSubject(initialValue) {
-    const behaviorSubject = new BehaviorSubject();
-    if (initialValue) {
-      behaviorSubject.next(initialValue);
-    }
-    return behaviorSubject;
-  }
-
-  function createReplaySubject(initialValue) {
-    const replaySubject = new ReplaySubject();
-    if (initialValue) {
-      replaySubject.next(initialValue);
-    }
-    return replaySubject;
-  }
-
-  it('supports basic subscription pattern', () => {
-    const Subscription = createSubscription({
-      getCurrentValue: source => source.getValue(),
-      subscribe: (source, callback) => {
-        const subscription = source.subscribe(callback);
-        return () => subscription.unsubscribe;
-      },
-    });
-
-    const observable = createBehaviorSubject();
-    ReactNoop.render(
-      <Subscription source={observable}>
-        {(value = 'default') => {
-          Scheduler.unstable_yieldValue(value);
-          return null;
-        }}
-      </Subscription>,
-    );
-
-    // Updates while subscribed should re-render the child component
-    expect(Scheduler).toFlushAndYield(['default']);
-    observable.next(123);
-    expect(Scheduler).toFlushAndYield([123]);
-    observable.next('abc');
-    expect(Scheduler).toFlushAndYield(['abc']);
-
-    // Unmounting the subscriber should remove listeners
-    ReactNoop.render(<div />);
-    observable.next(456);
-    expect(Scheduler).toFlushAndYield([]);
-  });
-
-  it('should support observable types like RxJS ReplaySubject', () => {
-    const Subscription = createSubscription({
-      getCurrentValue: source => {
-        let currentValue;
-        source
-          .subscribe(value => {
-            currentValue = value;
-          })
-          .unsubscribe();
-        return currentValue;
-      },
-      subscribe: (source, callback) => {
-        const subscription = source.subscribe(callback);
-        return () => subscription.unsubscribe;
-      },
-    });
-
-    function render(value = 'default') {
-      Scheduler.unstable_yieldValue(value);
-      return null;
-    }
-
-    const observable = createReplaySubject('initial');
-
-    ReactNoop.render(<Subscription source={observable}>{render}</Subscription>);
-    expect(Scheduler).toFlushAndYield(['initial']);
-    observable.next('updated');
-    expect(Scheduler).toFlushAndYield(['updated']);
-
-    // Unsetting the subscriber prop should reset subscribed values
-    ReactNoop.render(<Subscription>{render}</Subscription>);
-    expect(Scheduler).toFlushAndYield(['default']);
-  });
-
-  describe('Promises', () => {
-    it('should support Promises', async () => {
-      const Subscription = createSubscription({
-        getCurrentValue: source => undefined,
-        subscribe: (source, callback) => {
-          source.then(
-            value => callback(value),
-            value => callback(value),
-          );
-          // (Can't unsubscribe from a Promise)
-          return () => {};
-        },
-      });
-
-      function render(hasLoaded) {
-        if (hasLoaded === undefined) {
-          Scheduler.unstable_yieldValue('loading');
-        } else {
-          Scheduler.unstable_yieldValue(hasLoaded ? 'finished' : 'failed');
-        }
-        return null;
-      }
-
-      let resolveA, rejectB;
-      const promiseA = new Promise((resolve, reject) => {
-        resolveA = resolve;
-      });
-      const promiseB = new Promise((resolve, reject) => {
-        rejectB = reject;
-      });
-
-      // Test a promise that resolves after render
-      ReactNoop.render(<Subscription source={promiseA}>{render}</Subscription>);
-      expect(Scheduler).toFlushAndYield(['loading']);
-      resolveA(true);
-      await promiseA;
-      expect(Scheduler).toFlushAndYield(['finished']);
-
-      // Test a promise that resolves before render
-      // Note that this will require an extra render anyway,
-      // Because there is no way to synchronously get a Promise's value
-      rejectB(false);
-      ReactNoop.render(<Subscription source={promiseB}>{render}</Subscription>);
-      expect(Scheduler).toFlushAndYield(['loading']);
-      await promiseB.catch(() => true);
-      expect(Scheduler).toFlushAndYield(['failed']);
-    });
-
-    it('should still work if unsubscription is managed incorrectly', async () => {
-      const Subscription = createSubscription({
-        getCurrentValue: source => undefined,
-        subscribe: (source, callback) => {
-          source.then(callback);
-          // (Can't unsubscribe from a Promise)
-          return () => {};
-        },
-      });
-
-      function render(value = 'default') {
-        Scheduler.unstable_yieldValue(value);
-        return null;
-      }
-
-      let resolveA, resolveB;
-      const promiseA = new Promise(resolve => (resolveA = resolve));
-      const promiseB = new Promise(resolve => (resolveB = resolve));
-
-      // Subscribe first to Promise A then Promise B
-      ReactNoop.render(<Subscription source={promiseA}>{render}</Subscription>);
-      expect(Scheduler).toFlushAndYield(['default']);
-      ReactNoop.render(<Subscription source={promiseB}>{render}</Subscription>);
-      expect(Scheduler).toFlushAndYield(['default']);
-
-      // Resolve both Promises
-      resolveB(123);
-      resolveA('abc');
-      await Promise.all([promiseA, promiseB]);
-
-      // Ensure that only Promise B causes an update
-      expect(Scheduler).toFlushAndYield([123]);
-    });
-
-    it('should not call setState for a Promise that resolves after unmount', async () => {
-      const Subscription = createSubscription({
-        getCurrentValue: source => undefined,
-        subscribe: (source, callback) => {
-          source.then(
-            value => callback(value),
-            value => callback(value),
-          );
-          // (Can't unsubscribe from a Promise)
-          return () => {};
-        },
-      });
-
-      function render(hasLoaded) {
-        Scheduler.unstable_yieldValue('rendered');
-        return null;
-      }
-
-      let resolvePromise;
-      const promise = new Promise((resolve, reject) => {
-        resolvePromise = resolve;
-      });
-
-      ReactNoop.render(<Subscription source={promise}>{render}</Subscription>);
-      expect(Scheduler).toFlushAndYield(['rendered']);
-
-      // Unmount
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushWithoutYielding();
-
-      // Resolve Promise should not trigger a setState warning
-      resolvePromise(true);
-      await promise;
-    });
-  });
-
-  it('should unsubscribe from old subscribables and subscribe to new subscribables when props change', () => {
-    const Subscription = createSubscription({
-      getCurrentValue: source => source.getValue(),
-      subscribe: (source, callback) => {
-        const subscription = source.subscribe(callback);
-        return () => subscription.unsubscribe();
-      },
-    });
-
-    function render(value = 'default') {
-      Scheduler.unstable_yieldValue(value);
-      return null;
-    }
-
-    const observableA = createBehaviorSubject('a-0');
-    const observableB = createBehaviorSubject('b-0');
-
-    ReactNoop.render(
-      <Subscription source={observableA}>{render}</Subscription>,
-    );
-
-    // Updates while subscribed should re-render the child component
-    expect(Scheduler).toFlushAndYield(['a-0']);
-
-    // Unsetting the subscriber prop should reset subscribed values
-    ReactNoop.render(
-      <Subscription source={observableB}>{render}</Subscription>,
-    );
-    expect(Scheduler).toFlushAndYield(['b-0']);
-
-    // Updates to the old subscribable should not re-render the child component
-    observableA.next('a-1');
-    expect(Scheduler).toFlushAndYield([]);
-
-    // Updates to the bew subscribable should re-render the child component
-    observableB.next('b-1');
-    expect(Scheduler).toFlushAndYield(['b-1']);
-  });
-
-  it('should ignore values emitted by a new subscribable until the commit phase', () => {
-    const log = [];
-
-    function Child({value}) {
-      Scheduler.unstable_yieldValue('Child: ' + value);
-      return null;
-    }
-
-    const Subscription = createSubscription({
-      getCurrentValue: source => source.getValue(),
-      subscribe: (source, callback) => {
-        const subscription = source.subscribe(callback);
-        return () => subscription.unsubscribe();
-      },
-    });
-
-    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}>
-            {(value = 'default') => {
-              Scheduler.unstable_yieldValue('Subscriber: ' + value);
-              return <Child value={value} />;
-            }}
-          </Subscription>
-        );
-      }
-    }
-
-    const observableA = createBehaviorSubject('a-0');
-    const observableB = createBehaviorSubject('b-0');
-
-    ReactNoop.render(<Parent observed={observableA} />);
-    expect(Scheduler).toFlushAndYield(['Subscriber: a-0', 'Child: a-0']);
-    expect(log).toEqual(['Parent.componentDidMount']);
-
-    // Start React update, but don't finish
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.startTransition(() => {
-        ReactNoop.render(<Parent observed={observableB} />);
-      });
-    } else {
-      ReactNoop.render(<Parent observed={observableB} />);
-    }
-    expect(Scheduler).toFlushAndYieldThrough(['Subscriber: b-0']);
-    expect(log).toEqual(['Parent.componentDidMount']);
-
-    // Emit some updates from the uncommitted subscribable
-    observableB.next('b-1');
-    observableB.next('b-2');
-    observableB.next('b-3');
-
-    // Update again
-    ReactNoop.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.
-    expect(Scheduler).toFlushAndYield([
-      'Child: b-0',
-      'Subscriber: b-3',
-      'Child: b-3',
-      'Subscriber: a-0',
-      'Child: a-0',
-    ]);
-    expect(log).toEqual([
-      'Parent.componentDidMount',
-      'Parent.componentDidUpdate',
-      'Parent.componentDidUpdate',
-    ]);
-  });
-
-  it('should not drop values emitted between updates', () => {
-    const log = [];
-
-    function Child({value}) {
-      Scheduler.unstable_yieldValue('Child: ' + value);
-      return null;
-    }
-
-    const Subscription = createSubscription({
-      getCurrentValue: source => source.getValue(),
-      subscribe: (source, callback) => {
-        const subscription = source.subscribe(callback);
-        return () => subscription.unsubscribe();
-      },
-    });
-
-    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}>
-            {(value = 'default') => {
-              Scheduler.unstable_yieldValue('Subscriber: ' + value);
-              return <Child value={value} />;
-            }}
-          </Subscription>
-        );
-      }
-    }
-
-    const observableA = createBehaviorSubject('a-0');
-    const observableB = createBehaviorSubject('b-0');
-
-    ReactNoop.render(<Parent observed={observableA} />);
-    expect(Scheduler).toFlushAndYield(['Subscriber: a-0', 'Child: a-0']);
-    expect(log).toEqual(['Parent.componentDidMount']);
-
-    // Start React update, but don't finish
-    if (gate(flags => flags.enableSyncDefaultUpdates)) {
-      React.startTransition(() => {
-        ReactNoop.render(<Parent observed={observableB} />);
-      });
-    } else {
-      ReactNoop.render(<Parent observed={observableB} />);
-    }
-    expect(Scheduler).toFlushAndYieldThrough(['Subscriber: b-0']);
-    expect(log).toEqual(['Parent.componentDidMount']);
-
-    // Emit some updates from the old subscribable
-    observableA.next('a-1');
-    observableA.next('a-2');
-
-    // Update again
-    ReactNoop.render(<Parent observed={observableA} />);
-
-    // Flush everything and ensure that the correct subscribable is used
-    // We expect the new subscribable to finish rendering,
-    // But then the updated values from the old subscribable should be used.
-    expect(Scheduler).toFlushAndYield([
-      'Child: b-0',
-      'Subscriber: a-2',
-      'Child: a-2',
-    ]);
-    expect(log).toEqual([
-      'Parent.componentDidMount',
-      'Parent.componentDidUpdate',
-      'Parent.componentDidUpdate',
-    ]);
-
-    // Updates from the new subscribable should be ignored.
-    observableB.next('b-1');
-    expect(Scheduler).toFlushAndYield([]);
-    expect(log).toEqual([
-      'Parent.componentDidMount',
-      'Parent.componentDidUpdate',
-      'Parent.componentDidUpdate',
-    ]);
-  });
-
-  describe('warnings', () => {
-    it('should warn for invalid missing getCurrentValue', () => {
-      expect(() => {
-        createSubscription(
-          {
-            subscribe: () => () => {},
-          },
-          () => null,
-        );
-      }).toErrorDev('Subscription must specify a getCurrentValue function', {
-        withoutStack: true,
-      });
-    });
-
-    it('should warn for invalid missing subscribe', () => {
-      expect(() => {
-        createSubscription(
-          {
-            getCurrentValue: () => () => {},
-          },
-          () => null,
-        );
-      }).toErrorDev('Subscription must specify a subscribe function', {
-        withoutStack: true,
-      });
-    });
-
-    it('should warn if subscribe does not return an unsubscribe method', () => {
-      const Subscription = createSubscription({
-        getCurrentValue: source => undefined,
-        subscribe: (source, callback) => {},
-      });
-
-      const observable = createBehaviorSubject();
-      ReactNoop.render(
-        <Subscription source={observable}>{value => null}</Subscription>,
-      );
-
-      expect(Scheduler).toFlushAndThrow(
-        'A subscription must return an unsubscribe function.',
-      );
-    });
-  });
-});
diff --git a/packages/create-subscription/src/createSubscription.js b/packages/create-subscription/src/createSubscription.js
deleted file mode 100644
index 329a238fc238..000000000000
--- a/packages/create-subscription/src/createSubscription.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import * as React from 'react';
-
-type Unsubscribe = () => void;
-
-export function createSubscription<Property, Value>(
-  config: $ReadOnly<{|
-    // Synchronously gets the value for the subscribed property.
-    // Return undefined if the subscribable value is undefined,
-    // Or does not support synchronous reading (e.g. native Promise).
-    getCurrentValue: (source: Property) => Value | void,
-
-    // Setup a subscription for the subscribable value in props, and return an unsubscribe function.
-    // Return empty function if the property cannot be unsubscribed from (e.g. native Promises).
-    // Due to the variety of change event types, subscribers should provide their own handlers.
-    // Those handlers should not attempt to update state though;
-    // They should call the callback() instead when a subscription changes.
-    subscribe: (
-      source: Property,
-      callback: (value: Value | void) => void,
-    ) => Unsubscribe,
-  |}>,
-): React$ComponentType<{|
-  children: (value: Value | void) => React$Node,
-  source: Property,
-|}> {
-  const {getCurrentValue, subscribe} = config;
-
-  if (__DEV__) {
-    if (typeof getCurrentValue !== 'function') {
-      console.error('Subscription must specify a getCurrentValue function');
-    }
-    if (typeof subscribe !== 'function') {
-      console.error('Subscription must specify a subscribe function');
-    }
-  }
-
-  type Props = {|
-    children: (value: Value) => React$Element<any>,
-    source: Property,
-  |};
-  type State = {|
-    source: Property,
-    value: Value | void,
-  |};
-
-  // Reference: https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3
-  class Subscription extends React.Component<Props, State> {
-    state: State = {
-      source: this.props.source,
-      value:
-        this.props.source != null
-          ? getCurrentValue(this.props.source)
-          : undefined,
-    };
-
-    _hasUnmounted: boolean = false;
-    _unsubscribe: Unsubscribe | null = null;
-
-    static getDerivedStateFromProps(nextProps, prevState) {
-      if (nextProps.source !== prevState.source) {
-        return {
-          source: nextProps.source,
-          value:
-            nextProps.source != null
-              ? getCurrentValue(nextProps.source)
-              : undefined,
-        };
-      }
-
-      return null;
-    }
-
-    componentDidMount() {
-      this.subscribe();
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-      if (this.state.source !== prevState.source) {
-        this.unsubscribe();
-        this.subscribe();
-      }
-    }
-
-    componentWillUnmount() {
-      this.unsubscribe();
-
-      // Track mounted to avoid calling setState after unmounting
-      // For source like Promises that can't be unsubscribed from.
-      this._hasUnmounted = true;
-    }
-
-    render() {
-      return this.props.children(this.state.value);
-    }
-
-    subscribe() {
-      const {source} = this.state;
-      if (source != null) {
-        const callback = (value: Value | void) => {
-          if (this._hasUnmounted) {
-            return;
-          }
-
-          this.setState(state => {
-            // If the value is the same, skip the unnecessary state update.
-            if (value === state.value) {
-              return null;
-            }
-
-            // If this event belongs to an old or uncommitted data source, ignore it.
-            if (source !== state.source) {
-              return null;
-            }
-
-            return {value};
-          });
-        };
-
-        // Store the unsubscribe method for later (in case the subscribable prop changes).
-        const unsubscribe = subscribe(source, callback);
-
-        if (typeof unsubscribe !== 'function') {
-          throw new Error(
-            'A subscription must return an unsubscribe function.',
-          );
-        }
-
-        // It's safe to store unsubscribe on the instance because
-        // We only read or write that property during the "commit" phase.
-        this._unsubscribe = unsubscribe;
-
-        // External values could change between render and mount,
-        // In some cases it may be important to handle this case.
-        const value = getCurrentValue(this.props.source);
-        if (value !== this.state.value) {
-          this.setState({value});
-        }
-      }
-    }
-
-    unsubscribe() {
-      if (typeof this._unsubscribe === 'function') {
-        this._unsubscribe();
-      }
-      this._unsubscribe = null;
-    }
-  }
-
-  return Subscription;
-}
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index dffa9055d845..4819ecb2a47a 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -772,23 +772,6 @@ const bundles = [
     externals: ['react', 'scheduler'],
   },
 
-  /******* createComponentWithSubscriptions *******/
-  {
-    bundleTypes: [NODE_DEV, NODE_PROD],
-    moduleType: ISOMORPHIC,
-    entry: 'create-subscription',
-    global: 'createSubscription',
-    externals: ['react'],
-    minifyWithProdErrorCodes: true,
-    wrapWithModuleBoundaries: true,
-    babel: opts =>
-      Object.assign({}, opts, {
-        plugins: opts.plugins.concat([
-          [require.resolve('@babel/plugin-transform-classes'), {loose: true}],
-        ]),
-      }),
-  },
-
   /******* Hook for managing subscriptions safely *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD],

From 01e2bff1dcd99fffc9b1ea3fc398ad1b36f969eb Mon Sep 17 00:00:00 2001
From: zhoulixiang <18366276315@163.com>
Date: Tue, 12 Apr 2022 03:08:29 +0800
Subject: [PATCH 1301/1603] Remove unnecessary check (#24332)

---
 packages/react-reconciler/src/ReactFiberHooks.new.js | 5 +----
 packages/react-reconciler/src/ReactFiberHooks.old.js | 5 +----
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 1008f835b6e7..b7799d1dedcc 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1624,10 +1624,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
         },
         set current(value) {
           if (currentlyRenderingFiber !== null && !didWarnAboutWrite) {
-            if (
-              hasBeenInitialized ||
-              (!hasBeenInitialized && !didCheckForLazyInit)
-            ) {
+            if (hasBeenInitialized || !didCheckForLazyInit) {
               didWarnAboutWrite = true;
               console.warn(
                 '%s: Unsafe write of a mutable value during render.\n\n' +
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 139e86922422..03360bd6e96c 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1624,10 +1624,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
         },
         set current(value) {
           if (currentlyRenderingFiber !== null && !didWarnAboutWrite) {
-            if (
-              hasBeenInitialized ||
-              (!hasBeenInitialized && !didCheckForLazyInit)
-            ) {
+            if (hasBeenInitialized || !didCheckForLazyInit) {
               didWarnAboutWrite = true;
               console.warn(
                 '%s: Unsafe write of a mutable value during render.\n\n' +

From df5d32f230fea7b2ca1e1ddcb78efd6c3f8d7ef2 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 11 Apr 2022 20:12:59 +0100
Subject: [PATCH 1302/1603] Remove create-subscription from the list

---
 ReactVersions.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index fca66af474b4..fbf12610ac9f 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -25,7 +25,6 @@ const ReactVersion = '18.1.0';
 const nextChannelLabel = 'next';
 
 const stablePackages = {
-  'create-subscription': ReactVersion,
   'eslint-plugin-react-hooks': '4.5.0',
   'jest-react': '0.13.1',
   react: ReactVersion,

From 4997515b96eede5ab1ca622e0439a0707f8d4afd Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Mon, 11 Apr 2022 21:15:13 +0100
Subject: [PATCH 1303/1603] Point useSubscription to useSyncExternalStore shim
 (#24289)

* Point useSubscription to useSyncExternalStore shim

* Update tests

* Update README

* Ad hoc case
---
 packages/use-subscription/README.md           | 28 +-----
 packages/use-subscription/package.json        |  5 +-
 .../src/__tests__/useSubscription-test.js     | 21 ++--
 .../use-subscription/src/useSubscription.js   | 99 +------------------
 packages/use-sync-external-store/package.json |  2 +-
 scripts/rollup/build-all-release-channels.js  |  6 +-
 6 files changed, 22 insertions(+), 139 deletions(-)

diff --git a/packages/use-subscription/README.md b/packages/use-subscription/README.md
index 4ea34e1bca8b..48047e86dffa 100644
--- a/packages/use-subscription/README.md
+++ b/packages/use-subscription/README.md
@@ -1,32 +1,8 @@
 # use-subscription
 
-React hook that safely manages subscriptions in concurrent mode.
+React Hook for subscribing to external data sources.
 
-This utility can be used for subscriptions to a single value that are typically only read in one place and may update frequently (e.g. a component that subscribes to a geolocation API to show a dot on a map).
-
-## When should you NOT use this?
-
-Most other cases have **better long-term solutions**:
-* Redux/Flux stores should use the [context API](https://reactjs.org/docs/context.html) instead.
-* I/O subscriptions (e.g. notifications) that update infrequently should use a mechanism like [`react-cache`](https://github.com/facebook/react/blob/main/packages/react-cache/README.md) instead.
-* Complex libraries like Relay/Apollo should manage subscriptions manually with the same techniques which this library uses under the hood (as referenced [here](https://gist.github.com/bvaughn/d569177d70b50b58bff69c3c4a5353f3)) in a way that is most optimized for their library usage.
-
-## Limitations in concurrent mode
-
-`use-subscription` is safe to use in concurrent mode. However, [it achieves correctness by sometimes de-opting to synchronous mode](https://github.com/facebook/react/issues/13186#issuecomment-403959161), obviating the benefits of concurrent rendering. This is an inherent limitation of storing state outside of React's managed state queue and rendering in response to a change event.
-
-The effect of de-opting to sync mode is that the main thread may periodically be blocked (in the case of CPU-bound work), and placeholders may appear earlier than desired (in the case of IO-bound work).
-
-For **full compatibility** with concurrent rendering, including both **time-slicing** and **React Suspense**, the suggested longer-term solution is to move to one of the patterns described in the previous section.
-
-## What types of subscriptions can this support?
-
-This abstraction can handle a variety of subscription types, including:
-* Event dispatchers like `HTMLInputElement`.
-* Custom pub/sub components like Relay's `FragmentSpecResolver`.
-* Observable types like RxJS `BehaviorSubject` and `ReplaySubject`. (Types like RxJS `Subject` or `Observable` are not supported, because they provide no way to read the "current" value after it has been emitted.)
-
-Note that JavaScript promises are also **not supported** because they provide no way to synchronously read the "current" value.
+**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://reactjs.org/docs/hooks-reference.html#usesyncexternalstore). The `use-subscription` package is now a thin wrapper over `use-sync-external-store` and will not be updated further.**
 
 # Installation
 
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index 795d6e1c3604..c4f27b29d2b7 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -15,9 +15,12 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "rxjs": "^5.5.6"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.0.0"
   }
 }
diff --git a/packages/use-subscription/src/__tests__/useSubscription-test.js b/packages/use-subscription/src/__tests__/useSubscription-test.js
index 60d6eb20ddfc..7e6f26f16226 100644
--- a/packages/use-subscription/src/__tests__/useSubscription-test.js
+++ b/packages/use-subscription/src/__tests__/useSubscription-test.js
@@ -457,17 +457,13 @@ describe('useSubscription', () => {
       renderer.update(<Parent observed={observableA} />);
 
       // Flush everything and ensure that the correct subscribable is used
-      // We expect the new subscribable to finish rendering,
-      // But then the updated values from the old subscribable should be used.
       expect(Scheduler).toFlushAndYield([
-        'Grandchild: b-0',
+        'Child: a-2',
+        'Grandchild: a-2',
         'Child: a-2',
         'Grandchild: a-2',
       ]);
-      expect(log).toEqual([
-        'Parent.componentDidUpdate:b-0',
-        'Parent.componentDidUpdate:a-2',
-      ]);
+      expect(log).toEqual(['Parent.componentDidUpdate:a-2']);
     });
 
     // Updates from the new subscribable should be ignored.
@@ -628,7 +624,10 @@ describe('useSubscription', () => {
       } else {
         mutate('C');
       }
-      expect(Scheduler).toFlushAndYieldThrough(['render:first:C']);
+      expect(Scheduler).toFlushAndYieldThrough([
+        'render:first:C',
+        'render:second:C',
+      ]);
       if (gate(flags => flags.enableSyncDefaultUpdates)) {
         React.startTransition(() => {
           mutate('D');
@@ -636,11 +635,7 @@ describe('useSubscription', () => {
       } else {
         mutate('D');
       }
-      expect(Scheduler).toFlushAndYield([
-        'render:second:C',
-        'render:first:D',
-        'render:second:D',
-      ]);
+      expect(Scheduler).toFlushAndYield(['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
index 4f5c6c70c509..3ca633a5ad57 100644
--- a/packages/use-subscription/src/useSubscription.js
+++ b/packages/use-subscription/src/useSubscription.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {useDebugValue, useEffect, useState} from 'react';
+import {useSyncExternalStore} from 'use-sync-external-store/shim';
 
 // Hook used for safely managing subscriptions in concurrent mode.
 //
@@ -26,100 +26,5 @@ export function useSubscription<Value>({
   getCurrentValue: () => Value,
   subscribe: (callback: Function) => () => void,
 |}): Value {
-  // Read the current value from our subscription.
-  // When this value changes, we'll schedule an update with React.
-  // It's important to also store the hook params so that we can check for staleness.
-  // (See the comment in checkForUpdates() below for more info.)
-  const [state, setState] = useState(() => ({
-    getCurrentValue,
-    subscribe,
-    value: getCurrentValue(),
-  }));
-
-  let valueToReturn = state.value;
-
-  // If parameters have changed since our last render, schedule an update with its current value.
-  if (
-    state.getCurrentValue !== getCurrentValue ||
-    state.subscribe !== subscribe
-  ) {
-    // If the subscription has been updated, we'll schedule another update with React.
-    // React will process this update immediately, so the old subscription value won't be committed.
-    // It is still nice to avoid returning a mismatched value though, so let's override the return value.
-    valueToReturn = getCurrentValue();
-
-    setState({
-      getCurrentValue,
-      subscribe,
-      value: valueToReturn,
-    });
-  }
-
-  // Display the current value for this hook in React DevTools.
-  useDebugValue(valueToReturn);
-
-  // It is important not to subscribe while rendering because this can lead to memory leaks.
-  // (Learn more at reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects)
-  // Instead, we wait until the commit phase to attach our handler.
-  //
-  // We intentionally use a passive effect (useEffect) rather than a synchronous one (useLayoutEffect)
-  // so that we don't stretch the commit phase.
-  // This also has an added benefit when multiple components are subscribed to the same source:
-  // It allows each of the event handlers to safely schedule work without potentially removing an another handler.
-  // (Learn more at https://codesandbox.io/s/k0yvr5970o)
-  useEffect(() => {
-    let didUnsubscribe = false;
-
-    const checkForUpdates = () => {
-      // It's possible that this callback will be invoked even after being unsubscribed,
-      // if it's removed as a result of a subscription event/update.
-      // In this case, React will log a DEV warning about an update from an unmounted component.
-      // We can avoid triggering that warning with this check.
-      if (didUnsubscribe) {
-        return;
-      }
-
-      // We use a state updater function to avoid scheduling work for a stale source.
-      // However it's important to eagerly read the currently value,
-      // so that all scheduled work shares the same value (in the event of multiple subscriptions).
-      // This avoids visual "tearing" when a mutation happens during a (concurrent) render.
-      const value = getCurrentValue();
-
-      setState(prevState => {
-        // Ignore values from stale sources!
-        // Since we subscribe an unsubscribe in a passive effect,
-        // it's possible that this callback will be invoked for a stale (previous) subscription.
-        // This check avoids scheduling an update for that stale subscription.
-        if (
-          prevState.getCurrentValue !== getCurrentValue ||
-          prevState.subscribe !== subscribe
-        ) {
-          return prevState;
-        }
-
-        // Some subscriptions will auto-invoke the handler, even if the value hasn't changed.
-        // If the value hasn't changed, no update is needed.
-        // Return state as-is so React can bail out and avoid an unnecessary render.
-        if (prevState.value === value) {
-          return prevState;
-        }
-
-        return {...prevState, value};
-      });
-    };
-    const unsubscribe = subscribe(checkForUpdates);
-
-    // Because we're subscribing in a passive effect,
-    // it's possible that an update has occurred between render and our effect handler.
-    // Check for this and schedule an update if work has occurred.
-    checkForUpdates();
-
-    return () => {
-      didUnsubscribe = true;
-      unsubscribe();
-    };
-  }, [getCurrentValue, subscribe]);
-
-  // Return the current value for our caller to use while rendering.
-  return valueToReturn;
+  return useSyncExternalStore(subscribe, getCurrentValue);
 }
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index e93fd354ddc9..1e974fbdbac0 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -19,6 +19,6 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0-rc"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }
 }
diff --git a/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 679350716586..4468a778d451 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -251,7 +251,11 @@ function updatePackageVersions(
         }
       }
       if (packageInfo.peerDependencies) {
-        if (!pinToExactVersion && moduleName === 'use-sync-external-store') {
+        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.

From 069d23bb74939c19bc8860ad4013324bd6e1c5f3 Mon Sep 17 00:00:00 2001
From: Afzal Sayed <14029371+afzalsayed96@users.noreply.github.com>
Date: Tue, 12 Apr 2022 02:13:16 +0530
Subject: [PATCH 1304/1603]  [eslint-plugin-exhaustive-deps] Fix exhaustive
 deps check for unstable vars (#24343)

* Fix exhaustive deps for unstable vars

* Fix formatting

* Optimise iterations

* Fix linting
---
 .../ESLintRuleExhaustiveDeps-test.js          | 58 +++++++++++++++++++
 .../src/ExhaustiveDeps.js                     | 13 ++++-
 2 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index 4b6b3370e8b2..5c3c64c173fa 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -1095,6 +1095,22 @@ const tests = {
         }
       `,
     },
+    {
+      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() {
@@ -1581,6 +1597,48 @@ const tests = {
         },
       ],
     },
+    {
+      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.
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 21d48141717c..26d9688ac17c 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -234,7 +234,14 @@ export default {
             if (id.elements[1] === resolved.identifiers[0]) {
               if (name === 'useState') {
                 const references = resolved.references;
+                let writeCount = 0;
                 for (let i = 0; i < references.length; i++) {
+                  if (references[i].isWrite()) {
+                    writeCount++;
+                  }
+                  if (writeCount > 1) {
+                    return false;
+                  }
                   setStateCallSites.set(
                     references[i].identifier,
                     id.elements[0],
@@ -321,7 +328,7 @@ export default {
             pureScopes.has(ref.resolved.scope) &&
             // Stable values are fine though,
             // although we won't check functions deeper.
-            !memoizedIsStablecKnownHookValue(ref.resolved)
+            !memoizedIsStableKnownHookValue(ref.resolved)
           ) {
             return false;
           }
@@ -332,7 +339,7 @@ export default {
       }
 
       // Remember such values. Avoid re-running extra checks on them.
-      const memoizedIsStablecKnownHookValue = memoizeWithWeakMap(
+      const memoizedIsStableKnownHookValue = memoizeWithWeakMap(
         isStableKnownHookValue,
         stableKnownValueCache,
       );
@@ -435,7 +442,7 @@ export default {
           if (!dependencies.has(dependency)) {
             const resolved = reference.resolved;
             const isStable =
-              memoizedIsStablecKnownHookValue(resolved) ||
+              memoizedIsStableKnownHookValue(resolved) ||
               memoizedIsFunctionWithoutCapturedValues(resolved);
             dependencies.set(dependency, {
               isStable,

From 55a21ef7e78a4e35302cbc7ffb19934a23cc6957 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 11 Apr 2022 16:54:25 -0500
Subject: [PATCH 1305/1603] fix pushTransition for transition tracing (#24338)

We forgot to move pushTransition out from the enableCache flag in #24321 in a place that both transition tracing and cache need to push transitions. Move it out from behind the enableCache to prepare for the next PRs.
---
 packages/react-reconciler/src/ReactFiberBeginWork.new.js | 6 ++++--
 packages/react-reconciler/src/ReactFiberBeginWork.old.js | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 3df345b6380b..430a46029ec5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -748,14 +748,16 @@ function updateOffscreenComponent(
 
       subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
 
+      let prevCachePool = null;
       if (enableCache) {
         // 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.cachePool;
-        pushTransition(workInProgress, prevCachePool, null);
+        prevCachePool = prevState.cachePool;
       }
 
+      pushTransition(workInProgress, prevCachePool, null);
+
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
     } else {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 66324c8dc333..05e769018c78 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -748,14 +748,16 @@ function updateOffscreenComponent(
 
       subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
 
+      let prevCachePool = null;
       if (enableCache) {
         // 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.cachePool;
-        pushTransition(workInProgress, prevCachePool, null);
+        prevCachePool = prevState.cachePool;
       }
 
+      pushTransition(workInProgress, prevCachePool, null);
+
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
     } else {

From 8e2f9b086e7abc7a92951d264a6a5d048defd914 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 11 Apr 2022 16:54:57 -0500
Subject: [PATCH 1306/1603] move passive flag (#24339)

Previously, we were only adding the passive flag when we add the Visibility flag, which is only set when we go from primary to fallback. Now, we add the passive flag BOTH when we go from primary to fallback and from fallback to primary.

An alternate solution is to add the passive flag in the same place as the visibility flag in the offscreen complete phase (rather than the suspense complete phase), but this feature is currently only for suspense, and offscreen can be used in different ways, so for now we add the passive flag only in the suspense component's complete phase. We might want to revisit this later when we think about how offscreen should work with transition tracing.
---
 .../src/ReactFiberCompleteWork.new.js         | 94 ++++++++++---------
 .../src/ReactFiberCompleteWork.old.js         | 94 ++++++++++---------
 2 files changed, 98 insertions(+), 90 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index e85af7d9f5db..6beb7eadce37 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1192,55 +1192,59 @@ function completeWork(
       }
 
       // 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 && !prevDidTimeout) {
-        const offscreenFiber: Fiber = (workInProgress.child: any);
-        offscreenFiber.flags |= Visibility;
-
-        // If the suspended state of the boundary changes, we need to schedule
-        // a passive effect, which is when we process the transitions
+      // a passive effect, which is when we process the transitions
+      if (nextDidTimeout !== prevDidTimeout) {
         if (enableTransitionTracing) {
+          const offscreenFiber: Fiber = (workInProgress.child: any);
           offscreenFiber.flags |= Passive;
         }
 
-        // TODO: This will still suspend a synchronous tree if anything
-        // in the concurrent tree already suspended during this render.
-        // This is a known bug.
-        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
-          // TODO: Move this back to throwException because this is too late
-          // if this is a large tree which is common for initial loads. We
-          // don't know if we should restart a render or not until we get
-          // this marker, and this is too late.
-          // If this render already had a ping or lower pri updates,
-          // and this is the first time we know we're going to suspend we
-          // should be able to immediately restart from within throwException.
-          const hasInvisibleChildContext =
-            current === null &&
-            (workInProgress.memoizedProps.unstable_avoidThisFallback !== true ||
-              !enableSuspenseAvoidThisFallback);
-          if (
-            hasInvisibleChildContext ||
-            hasSuspenseContext(
-              suspenseStackCursor.current,
-              (InvisibleParentSuspenseContext: SuspenseContext),
-            )
-          ) {
-            // If this was in an invisible tree or a new render, then showing
-            // this boundary is ok.
-            renderDidSuspend();
-          } else {
-            // Otherwise, we're going to have to hide content so we should
-            // suspend for longer if possible.
-            renderDidSuspendDelayIfPossible();
+        // 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;
+
+          // TODO: This will still suspend a synchronous tree if anything
+          // in the concurrent tree already suspended during this render.
+          // This is a known bug.
+          if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
+            // TODO: Move this back to throwException because this is too late
+            // if this is a large tree which is common for initial loads. We
+            // don't know if we should restart a render or not until we get
+            // this marker, and this is too late.
+            // If this render already had a ping or lower pri updates,
+            // and this is the first time we know we're going to suspend we
+            // should be able to immediately restart from within throwException.
+            const hasInvisibleChildContext =
+              current === null &&
+              (workInProgress.memoizedProps.unstable_avoidThisFallback !==
+                true ||
+                !enableSuspenseAvoidThisFallback);
+            if (
+              hasInvisibleChildContext ||
+              hasSuspenseContext(
+                suspenseStackCursor.current,
+                (InvisibleParentSuspenseContext: SuspenseContext),
+              )
+            ) {
+              // If this was in an invisible tree or a new render, then showing
+              // this boundary is ok.
+              renderDidSuspend();
+            } else {
+              // Otherwise, we're going to have to hide content so we should
+              // suspend for longer if possible.
+              renderDidSuspendDelayIfPossible();
+            }
           }
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index dea814c9113a..fc9414efc279 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1192,55 +1192,59 @@ function completeWork(
       }
 
       // 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 && !prevDidTimeout) {
-        const offscreenFiber: Fiber = (workInProgress.child: any);
-        offscreenFiber.flags |= Visibility;
-
-        // If the suspended state of the boundary changes, we need to schedule
-        // a passive effect, which is when we process the transitions
+      // a passive effect, which is when we process the transitions
+      if (nextDidTimeout !== prevDidTimeout) {
         if (enableTransitionTracing) {
+          const offscreenFiber: Fiber = (workInProgress.child: any);
           offscreenFiber.flags |= Passive;
         }
 
-        // TODO: This will still suspend a synchronous tree if anything
-        // in the concurrent tree already suspended during this render.
-        // This is a known bug.
-        if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
-          // TODO: Move this back to throwException because this is too late
-          // if this is a large tree which is common for initial loads. We
-          // don't know if we should restart a render or not until we get
-          // this marker, and this is too late.
-          // If this render already had a ping or lower pri updates,
-          // and this is the first time we know we're going to suspend we
-          // should be able to immediately restart from within throwException.
-          const hasInvisibleChildContext =
-            current === null &&
-            (workInProgress.memoizedProps.unstable_avoidThisFallback !== true ||
-              !enableSuspenseAvoidThisFallback);
-          if (
-            hasInvisibleChildContext ||
-            hasSuspenseContext(
-              suspenseStackCursor.current,
-              (InvisibleParentSuspenseContext: SuspenseContext),
-            )
-          ) {
-            // If this was in an invisible tree or a new render, then showing
-            // this boundary is ok.
-            renderDidSuspend();
-          } else {
-            // Otherwise, we're going to have to hide content so we should
-            // suspend for longer if possible.
-            renderDidSuspendDelayIfPossible();
+        // 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;
+
+          // TODO: This will still suspend a synchronous tree if anything
+          // in the concurrent tree already suspended during this render.
+          // This is a known bug.
+          if ((workInProgress.mode & ConcurrentMode) !== NoMode) {
+            // TODO: Move this back to throwException because this is too late
+            // if this is a large tree which is common for initial loads. We
+            // don't know if we should restart a render or not until we get
+            // this marker, and this is too late.
+            // If this render already had a ping or lower pri updates,
+            // and this is the first time we know we're going to suspend we
+            // should be able to immediately restart from within throwException.
+            const hasInvisibleChildContext =
+              current === null &&
+              (workInProgress.memoizedProps.unstable_avoidThisFallback !==
+                true ||
+                !enableSuspenseAvoidThisFallback);
+            if (
+              hasInvisibleChildContext ||
+              hasSuspenseContext(
+                suspenseStackCursor.current,
+                (InvisibleParentSuspenseContext: SuspenseContext),
+              )
+            ) {
+              // If this was in an invisible tree or a new render, then showing
+              // this boundary is ok.
+              renderDidSuspend();
+            } else {
+              // Otherwise, we're going to have to hide content so we should
+              // suspend for longer if possible.
+              renderDidSuspendDelayIfPossible();
+            }
           }
         }
       }

From fea6f8da6ab669469f2fa3f18bd3a831f00ab284 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 11 Apr 2022 16:56:20 -0500
Subject: [PATCH 1307/1603] [Transition Tracing] Add transition to
 OffscreenState and pendingSuspenseBoundaries to RootState (#24340)

In this PR we:

Add transitions boilerplate to the OffscreenState. The transitions field will be null on initiation. During the commit phase, if there are any new transitions, we will add any new transitions (either as a result of a transition occurring or a parent suspense boundary completing) to the transitions field. Once the suspense boundary resolves, we no longer need to store the transitions on the boundary, so we can put this field on the Offscreen memoized state
Add pendingSuspenseBoundaries boilerplate to the RootState. This field starts as null. During the commit phase, if a suspense boundary has either gone from fallback to resolved or from resolved to fallback, we will create a new Map if there isn't one, and if there is, we will add (if the boundary is a fallback) or remove the suspense boundary (if the boundary has resolved) from the map.
Add an optional name field to the Suspense boundary
---
 .../src/ReactFiberBeginWork.new.js             | 18 +++++++-----------
 .../src/ReactFiberBeginWork.old.js             | 18 +++++++-----------
 .../src/ReactFiberCommitWork.new.js            |  5 ++---
 .../src/ReactFiberCommitWork.old.js            |  5 ++---
 .../src/ReactFiberOffscreenComponent.js        |  3 ++-
 .../react-reconciler/src/ReactFiberRoot.new.js | 10 ++++++++--
 .../react-reconciler/src/ReactFiberRoot.old.js | 10 ++++++++--
 .../src/ReactFiberSuspenseComponent.new.js     |  1 +
 .../src/ReactFiberSuspenseComponent.old.js     |  1 +
 .../ReactFiberTracingMarkerComponent.new.js    | 10 ++++------
 .../ReactFiberTracingMarkerComponent.old.js    | 10 ++++------
 11 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 430a46029ec5..849da96fb89a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -236,7 +236,6 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.new';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.new';
@@ -652,9 +651,11 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((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,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       if (enableCache) {
@@ -688,6 +689,7 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
         cachePool: spawnedCachePool,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
@@ -723,6 +725,7 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -1345,13 +1348,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     }
   }
 
-  if (enableTransitionTracing) {
-    // FIXME: Slipped past code review. This is not a safe mutation:
-    // workInProgress.memoizedState is a shared object. Need to fix before
-    // rolling out the Transition Tracing experiment.
-    workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
-  }
-
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
@@ -1365,6 +1361,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
+      pendingSuspenseBoundaries: nextState.pendingSuspenseBoundaries,
       transitions: nextState.transitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
@@ -1982,6 +1979,7 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCache(),
+    transitions: null,
   };
 }
 
@@ -2016,6 +2014,7 @@ function updateSuspenseOffscreenState(
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
+    transitions: prevOffscreenState.transitions,
   };
 }
 
@@ -3582,9 +3581,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
       }
-      if (enableTransitionTracing) {
-        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
-      }
       resetHydrationState();
       break;
     case HostComponent:
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 05e769018c78..3459ba79b2fa 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -236,7 +236,6 @@ import {
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
   pushRenderLanes,
-  getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
@@ -652,9 +651,11 @@ function updateOffscreenComponent(
     // Rendering a hidden tree.
     if ((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,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       if (enableCache) {
@@ -688,6 +689,7 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
         cachePool: spawnedCachePool,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
@@ -723,6 +725,7 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
+        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -1345,13 +1348,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     }
   }
 
-  if (enableTransitionTracing) {
-    // FIXME: Slipped past code review. This is not a safe mutation:
-    // workInProgress.memoizedState is a shared object. Need to fix before
-    // rolling out the Transition Tracing experiment.
-    workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
-  }
-
   // Caution: React DevTools currently depends on this property
   // being called "element".
   const nextChildren = nextState.element;
@@ -1365,6 +1361,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
+      pendingSuspenseBoundaries: nextState.pendingSuspenseBoundaries,
       transitions: nextState.transitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
@@ -1982,6 +1979,7 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCache(),
+    transitions: null,
   };
 }
 
@@ -2016,6 +2014,7 @@ function updateSuspenseOffscreenState(
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
+    transitions: prevOffscreenState.transitions,
   };
 }
 
@@ -3582,9 +3581,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
       }
-      if (enableTransitionTracing) {
-        workInProgress.memoizedState.transitions = getWorkInProgressTransitions();
-      }
       resetHydrationState();
       break;
     case HostComponent:
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index c9f40139f64e..05f0b6d09496 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2725,9 +2725,8 @@ function commitPassiveMountOnFiber(
       }
 
       if (enableTransitionTracing) {
-        const transitions = finishedWork.memoizedState.transitions;
-        if (transitions !== null) {
-          transitions.forEach(transition => {
+        if (committedTransitions !== null) {
+          committedTransitions.forEach(transition => {
             // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 731eaac9ef9a..ee52b71c3c56 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2725,9 +2725,8 @@ function commitPassiveMountOnFiber(
       }
 
       if (enableTransitionTracing) {
-        const transitions = finishedWork.memoizedState.transitions;
-        if (transitions !== null) {
-          transitions.forEach(transition => {
+        if (committedTransitions !== null) {
+          committedTransitions.forEach(transition => {
             // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 2d0fea0657a8..6a85b5de78cd 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -10,7 +10,7 @@
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
-
+import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 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
@@ -30,6 +30,7 @@ export type OffscreenState = {|
   // order to unhide the component.
   baseLanes: Lanes,
   cachePool: SpawnedCachePool | null,
+  transitions: Set<Transition> | null,
 |};
 
 export type OffscreenInstance = {};
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index ba8717a65e9e..304073ed019d 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -15,7 +15,10 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
-import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {
+  PendingSuspenseBoundaries,
+  Transition,
+} from './ReactFiberTracingMarkerComponent.new';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
@@ -42,7 +45,8 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  transitions: Array<Transition> | null,
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  transitions: Set<Transition> | null,
 };
 
 function FiberRootNode(
@@ -184,6 +188,7 @@ export function createFiberRoot(
       isDehydrated: hydrate,
       cache: initialCache,
       transitions: null,
+      pendingSuspenseBoundaries: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
@@ -192,6 +197,7 @@ export function createFiberRoot(
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
       transitions: null,
+      pendingSuspenseBoundaries: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 1d5edd410cfe..3c4086394a1a 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -15,7 +15,10 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
-import type {Transition} from './ReactFiberTracingMarkerComponent.old';
+import type {
+  PendingSuspenseBoundaries,
+  Transition,
+} from './ReactFiberTracingMarkerComponent.old';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
@@ -42,7 +45,8 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  transitions: Array<Transition> | null,
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  transitions: Set<Transition> | null,
 };
 
 function FiberRootNode(
@@ -184,6 +188,7 @@ export function createFiberRoot(
       isDehydrated: hydrate,
       cache: initialCache,
       transitions: null,
+      pendingSuspenseBoundaries: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
@@ -192,6 +197,7 @@ export function createFiberRoot(
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
       transitions: null,
+      pendingSuspenseBoundaries: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index 54e37a9004d7..a5952ace9474 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -29,6 +29,7 @@ export type SuspenseProps = {|
   suspenseCallback?: (Set<Wakeable> | null) => mixed,
 
   unstable_expectedLoadTime?: number,
+  unstable_name?: string,
 |};
 
 // A null SuspenseState represents an unsuspended normal Suspense boundary.
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index 95fb1b8c8ab4..2089dc6cac56 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -29,6 +29,7 @@ export type SuspenseProps = {|
   suspenseCallback?: (Set<Wakeable> | null) => mixed,
 
   unstable_expectedLoadTime?: number,
+  unstable_name?: string,
 |};
 
 // A null SuspenseState represents an unsuspended normal Suspense boundary.
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index cc3834f5cc6c..29018efc96f9 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -7,8 +7,9 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks} from './ReactInternalTypes';
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
+
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 
 export type SuspenseInfo = {name: string | null};
@@ -34,10 +35,7 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
-export type TransitionCallback = 0 | 1;
-
-export const TransitionStart = 0;
-export const TransitionComplete = 1;
+export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
   pendingTransitions: PendingTransitionCallbacks,
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index cc3834f5cc6c..29018efc96f9 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -7,8 +7,9 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks} from './ReactInternalTypes';
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
+
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 
 export type SuspenseInfo = {name: string | null};
@@ -34,10 +35,7 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
-export type TransitionCallback = 0 | 1;
-
-export const TransitionStart = 0;
-export const TransitionComplete = 1;
+export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
   pendingTransitions: PendingTransitionCallbacks,

From 80170a0681def183f8f3153425f1086d3d383922 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Mon, 11 Apr 2022 21:01:48 -0400
Subject: [PATCH 1308/1603] Match bundle.name and match upper case entry points
 (#24346)

Fix matching in the build script.

It's possible to provide a custom bundle name in the case we build deep
imports. We should match those names as a convenience.

The script also calls toLowerCase on requested names but some entries have
upper case now.
---
 scripts/rollup/build.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index c42edbe7eea6..52c0b7dc9fe2 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -438,13 +438,21 @@ function shouldSkipBundle(bundle, bundleType) {
     }
   }
   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(
-      // 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.
-      requestedName =>
-        (bundle.entry + '/index.js').indexOf(requestedName) === -1
+      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;

From 4fc394bbecdf55e46d192536e1a545376f90d84b Mon Sep 17 00:00:00 2001
From: sunderls <2394070+sunderls@users.noreply.github.com>
Date: Tue, 12 Apr 2022 15:42:05 +0100
Subject: [PATCH 1309/1603] Fix suspense fallback throttling (#24253)

* fix suspense throttling

* fix lint

* Tweak tests + another test

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>
---
 .../src/ReactFiberCommitWork.new.js           |  11 +-
 .../src/ReactFiberCommitWork.old.js           |  11 +-
 .../__tests__/ReactSuspense-test.internal.js  | 111 ++++++++++++++++++
 3 files changed, 127 insertions(+), 6 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 05f0b6d09496..3535acf18c80 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2209,17 +2209,22 @@ function commitMutationEffectsOnFiber(
       recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
-      if (flags & Visibility) {
-        const newState: OffscreenState | null = finishedWork.memoizedState;
+      const offscreenFiber: Fiber = (finishedWork.child: any);
+
+      if (offscreenFiber.flags & Visibility) {
+        const newState: OffscreenState | null = offscreenFiber.memoizedState;
         const isHidden = newState !== null;
         if (isHidden) {
-          const wasHidden = current !== null && current.memoizedState !== null;
+          const wasHidden =
+            offscreenFiber.alternate !== null &&
+            offscreenFiber.alternate.memoizedState !== null;
           if (!wasHidden) {
             // TODO: Move to passive phase
             markCommitTimeOfFallback();
           }
         }
       }
+
       if (flags & Update) {
         try {
           commitSuspenseCallback(finishedWork);
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index ee52b71c3c56..1cec4f11bbb4 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2209,17 +2209,22 @@ function commitMutationEffectsOnFiber(
       recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       commitReconciliationEffects(finishedWork);
 
-      if (flags & Visibility) {
-        const newState: OffscreenState | null = finishedWork.memoizedState;
+      const offscreenFiber: Fiber = (finishedWork.child: any);
+
+      if (offscreenFiber.flags & Visibility) {
+        const newState: OffscreenState | null = offscreenFiber.memoizedState;
         const isHidden = newState !== null;
         if (isHidden) {
-          const wasHidden = current !== null && current.memoizedState !== null;
+          const wasHidden =
+            offscreenFiber.alternate !== null &&
+            offscreenFiber.alternate.memoizedState !== null;
           if (!wasHidden) {
             // TODO: Move to passive phase
             markCommitTimeOfFallback();
           }
         }
       }
+
       if (flags & Update) {
         try {
           commitSuspenseCallback(finishedWork);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 82ee6ee6bf1d..7adc0345729f 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -285,6 +285,117 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('AsyncAfter SuspenseSibling');
   });
 
+  it('throttles fallback committing globally', () => {
+    function Foo() {
+      Scheduler.unstable_yieldValue('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" ms={200} />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" ms={300} />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    // Committing fallbacks should be throttled.
+    // First, advance some time to skip the first threshold.
+    jest.advanceTimersByTime(600);
+    Scheduler.unstable_advanceTime(600);
+
+    const root = ReactTestRenderer.create(<Foo />, {
+      unstable_isConcurrent: true,
+    });
+
+    expect(Scheduler).toFlushAndYield([
+      'Foo',
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading more...',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // Resolve A.
+    jest.advanceTimersByTime(200);
+    Scheduler.unstable_advanceTime(200);
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    expect(Scheduler).toFlushAndYield(['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(root).toMatchRenderedOutput('Loading...');
+
+    // Resolve B.
+    jest.advanceTimersByTime(100);
+    Scheduler.unstable_advanceTime(100);
+    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+
+    // By this point, B has resolved.
+    // We're still showing the outer fallback.
+    expect(root).toMatchRenderedOutput('Loading...');
+    expect(Scheduler).toFlushAndYield(['A', 'B']);
+    // Then contents of both should pop in together.
+    expect(root).toMatchRenderedOutput('AB');
+  });
+
+  it('does not throttle fallback committing for too long', () => {
+    function Foo() {
+      Scheduler.unstable_yieldValue('Foo');
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <AsyncText text="A" ms={200} />
+          <Suspense fallback={<Text text="Loading more..." />}>
+            <AsyncText text="B" ms={1200} />
+          </Suspense>
+        </Suspense>
+      );
+    }
+
+    // Committing fallbacks should be throttled.
+    // First, advance some time to skip the first threshold.
+    jest.advanceTimersByTime(600);
+    Scheduler.unstable_advanceTime(600);
+
+    const root = ReactTestRenderer.create(<Foo />, {
+      unstable_isConcurrent: true,
+    });
+
+    expect(Scheduler).toFlushAndYield([
+      'Foo',
+      'Suspend! [A]',
+      'Suspend! [B]',
+      'Loading more...',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    // Resolve A.
+    jest.advanceTimersByTime(200);
+    Scheduler.unstable_advanceTime(200);
+    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+    expect(Scheduler).toFlushAndYield(['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(root).toMatchRenderedOutput('Loading...');
+
+    // Wait some more. B is still not resolving.
+    jest.advanceTimersByTime(500);
+    Scheduler.unstable_advanceTime(500);
+    // Give up and render A with a spinner for B.
+    expect(root).toMatchRenderedOutput('ALoading more...');
+
+    // Resolve B.
+    jest.advanceTimersByTime(500);
+    Scheduler.unstable_advanceTime(500);
+    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+    expect(Scheduler).toFlushAndYield(['B']);
+    expect(root).toMatchRenderedOutput('AB');
+  });
+
   // @gate !enableSyncDefaultUpdates
   it(
     'interrupts current render when something suspends with a ' +

From f7cf077cca6524877cb837adb9a8ff54242672b1 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 12 Apr 2022 10:42:08 -0500
Subject: [PATCH 1310/1603] [Transition Tracing] Add Offscreen Queue (#24341)

Adds an Offscreen Queue. We use the offscreen queue to store not yet processed transitions. During the commit phase, we will add these transitions to the transitions field in memoizedState (in the subsequent PR) and clear the transitions field in the updateQueue
---
 .../src/ReactFiberBeginWork.new.js            | 32 +++++++++++++++++++
 .../src/ReactFiberBeginWork.old.js            | 32 +++++++++++++++++++
 .../src/ReactFiberCommitWork.new.js           |  5 +++
 .../src/ReactFiberCommitWork.old.js           |  5 +++
 .../src/ReactFiberOffscreenComponent.js       |  5 +++
 5 files changed, 79 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 849da96fb89a..88876f05f7d8 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {
   OffscreenProps,
   OffscreenState,
+  OffscreenQueue,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -255,6 +256,7 @@ import {
   getSuspendedCache,
   pushTransition,
   getOffscreenDeferredCache,
+  getSuspendedTransitions,
 } from './ReactFiberTransition.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -2161,6 +2163,16 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         renderLanes,
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
+      if (enableTransitionTracing) {
+        const currentTransitions = getSuspendedTransitions();
+        if (currentTransitions !== null) {
+          const primaryChildUpdateQueue: OffscreenQueue = {
+            transitions: currentTransitions,
+          };
+          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+        }
+      }
+
       return fallbackFragment;
     } else if (
       enableCPUSuspense &&
@@ -2281,6 +2293,15 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           prevOffscreenState === null
             ? mountSuspenseOffscreenState(renderLanes)
             : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
         primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
           current,
           renderLanes,
@@ -2322,6 +2343,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           current,
           renderLanes,
         );
+
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
+
         // Skip the primary children, and continue working on the
         // fallback children.
         workInProgress.memoizedState = SUSPENDED_MARKER;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 3459ba79b2fa..418b714117e8 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -26,6 +26,7 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {
   OffscreenProps,
   OffscreenState,
+  OffscreenQueue,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -255,6 +256,7 @@ import {
   getSuspendedCache,
   pushTransition,
   getOffscreenDeferredCache,
+  getSuspendedTransitions,
 } from './ReactFiberTransition.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -2161,6 +2163,16 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         renderLanes,
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
+      if (enableTransitionTracing) {
+        const currentTransitions = getSuspendedTransitions();
+        if (currentTransitions !== null) {
+          const primaryChildUpdateQueue: OffscreenQueue = {
+            transitions: currentTransitions,
+          };
+          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+        }
+      }
+
       return fallbackFragment;
     } else if (
       enableCPUSuspense &&
@@ -2281,6 +2293,15 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           prevOffscreenState === null
             ? mountSuspenseOffscreenState(renderLanes)
             : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
         primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
           current,
           renderLanes,
@@ -2322,6 +2343,17 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           current,
           renderLanes,
         );
+
+        if (enableTransitionTracing) {
+          const currentTransitions = getSuspendedTransitions();
+          if (currentTransitions !== null) {
+            const primaryChildUpdateQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+            };
+            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          }
+        }
+
         // Skip the primary children, and continue working on the
         // fallback children.
         workInProgress.memoizedState = SUSPENDED_MARKER;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 3535acf18c80..dfb0308c012e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2781,6 +2781,11 @@ function commitPassiveMountOnFiber(
           }
         }
       }
+
+      if (enableTransitionTracing) {
+        // TODO: Add code to actually process the update queue
+        finishedWork.updateQueue = null;
+      }
       break;
     }
     case CacheComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 1cec4f11bbb4..5853bcfe5356 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2781,6 +2781,11 @@ function commitPassiveMountOnFiber(
           }
         }
       }
+
+      if (enableTransitionTracing) {
+        // TODO: Add code to actually process the update queue
+        finishedWork.updateQueue = null;
+      }
       break;
     }
     case CacheComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 6a85b5de78cd..05952f77a0fd 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -11,6 +11,7 @@ import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+
 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
@@ -33,4 +34,8 @@ export type OffscreenState = {|
   transitions: Set<Transition> | null,
 |};
 
+export type OffscreenQueue = {|
+  transitions: Array<Transition> | null,
+|} | null;
+
 export type OffscreenInstance = {};

From 8bc527a4cf3e7e8b15ad0312cd49b438181103f2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Apr 2022 15:39:11 -0400
Subject: [PATCH 1311/1603] Bugfix: Fix race condition between interleaved and
 non-interleaved updates (#24353)

* Regression test: Interleaved update race condition

Demonstrates the bug reported in #24350.

* Bugfix: Last update wins, even if interleaved

"Interleaved" updates are updates that are scheduled while a render is
already in progress. We put these on a special queue so that they don't
get processed during the current render. Then we transfer them to
the "real" queue after the render has finished.

There was a race condition where an update is received after the render
has finished but before the interleaved update queue had been
transferred, causing the updates to be queued in the wrong order.

The fix I chose is to check if the interleaved updates queue is empty
before adding any update to the real queue. If it's not empty, then
the new update must also be treated as interleaved.
---
 .../src/ReactFiberInterleavedUpdates.new.js   |  4 ++
 .../src/ReactFiberInterleavedUpdates.old.js   |  4 ++
 .../src/ReactFiberWorkLoop.new.js             | 13 ++++-
 .../src/ReactFiberWorkLoop.old.js             | 13 ++++-
 .../__tests__/ReactInterleavedUpdates-test.js | 48 +++++++++++++++++++
 5 files changed, 78 insertions(+), 4 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
index 65460c7658ab..010730b1e78e 100644
--- a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
@@ -28,6 +28,10 @@ export function pushInterleavedQueue(
   }
 }
 
+export function hasInterleavedUpdates() {
+  return interleavedQueues !== null;
+}
+
 export function enqueueInterleavedUpdates() {
   // Transfer the interleaved updates onto the main queue. Each queue has a
   // `pending` field and an `interleaved` field. When they are not null, they
diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
index 5fd769684ebd..0d3319801daa 100644
--- a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
@@ -28,6 +28,10 @@ export function pushInterleavedQueue(
   }
 }
 
+export function hasInterleavedUpdates() {
+  return interleavedQueues !== null;
+}
+
 export function enqueueInterleavedUpdates() {
   // Transfer the interleaved updates onto the main queue. Each queue has a
   // `pending` field and an `interleaved` field. When they are not null, they
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b6e7fad4eb94..3f0d3278f488 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -195,7 +195,10 @@ import {
   pop as popFromStack,
   createCursor,
 } from './ReactFiberStack.new';
-import {enqueueInterleavedUpdates} from './ReactFiberInterleavedUpdates.new';
+import {
+  enqueueInterleavedUpdates,
+  hasInterleavedUpdates,
+} from './ReactFiberInterleavedUpdates.new';
 
 import {
   markNestedUpdateScheduled,
@@ -723,7 +726,13 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // TODO: Optimize slightly by comparing to root that fiber belongs to.
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
-    workInProgressRoot !== null &&
+    (workInProgressRoot !== null ||
+      // If the interleaved updates queue hasn't been cleared yet, then
+      // we should treat this as an interleaved update, too. This is also a
+      // defensive coding measure in case a new update comes in between when
+      // rendering has finished and when the interleaved updates are transferred
+      // to the main queue.
+      hasInterleavedUpdates() !== null) &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 62714c8cd334..7dbbc9b25f9a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -195,7 +195,10 @@ import {
   pop as popFromStack,
   createCursor,
 } from './ReactFiberStack.old';
-import {enqueueInterleavedUpdates} from './ReactFiberInterleavedUpdates.old';
+import {
+  enqueueInterleavedUpdates,
+  hasInterleavedUpdates,
+} from './ReactFiberInterleavedUpdates.old';
 
 import {
   markNestedUpdateScheduled,
@@ -723,7 +726,13 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
     // TODO: Optimize slightly by comparing to root that fiber belongs to.
     // Requires some refactoring. Not a big deal though since it's rare for
     // concurrent apps to have more than a single root.
-    workInProgressRoot !== null &&
+    (workInProgressRoot !== null ||
+      // If the interleaved updates queue hasn't been cleared yet, then
+      // we should treat this as an interleaved update, too. This is also a
+      // defensive coding measure in case a new update comes in between when
+      // rendering has finished and when the interleaved updates are transferred
+      // to the main queue.
+      hasInterleavedUpdates() !== null) &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
diff --git a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
index c9e66fe0399e..153d4d28bd3f 100644
--- a/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactInterleavedUpdates-test.js
@@ -140,4 +140,52 @@ describe('ReactInterleavedUpdates', () => {
     expect(Scheduler).toHaveYielded([2, 2, 2]);
     expect(root).toMatchRenderedOutput('222');
   });
+
+  test('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(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['A0', 'B0', 'C0']);
+    expect(root).toMatchRenderedOutput('A0B0C0');
+
+    await act(async () => {
+      // Start the render phase.
+      startTransition(() => {
+        setStep(1);
+      });
+      expect(Scheduler).toFlushAndYieldThrough(['A1', 'B1']);
+
+      // Schedule an interleaved update. This gets placed on a special queue.
+      startTransition(() => {
+        setStep(2);
+      });
+
+      // Finish rendering the first update.
+      expect(Scheduler).toFlushUntilNextPaint(['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.
+    expect(Scheduler).toHaveYielded(['A3', 'B3', 'C3']);
+    expect(root).toMatchRenderedOutput('A3B3C3');
+  });
 });

From 168da8d55782f3b34e2a6aa0c4dd0587696afdbd Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Apr 2022 15:41:34 -0400
Subject: [PATCH 1312/1603] Fix typo that happened during rebasing

I changed the type of this functions returned value but forgot to change
the check.

It happens to work before anyway, because eventually the interleaved
updates will get transferred at the beginning of the next render phase.
But this is more logically consistent.
---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 3f0d3278f488..e9381e709f22 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -732,7 +732,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
       // defensive coding measure in case a new update comes in between when
       // rendering has finished and when the interleaved updates are transferred
       // to the main queue.
-      hasInterleavedUpdates() !== null) &&
+      hasInterleavedUpdates()) &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 7dbbc9b25f9a..5d25610f5f4a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -732,7 +732,7 @@ export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
       // defensive coding measure in case a new update comes in between when
       // rendering has finished and when the interleaved updates are transferred
       // to the main queue.
-      hasInterleavedUpdates() !== null) &&
+      hasInterleavedUpdates()) &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
     // then don't treat this as an interleaved update. This pattern is

From ddb1ab1e97588136a3db736696bbc3c8cf9f0210 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 13 Apr 2022 13:07:26 -0500
Subject: [PATCH 1313/1603] Rename react-dom/testing to
 react-dom/unstable_testing in yarn build-for-devtools (#24364)

The shell package wasn't compiling because yarn build-for-devtools was incorrect. The react-dom/test package was renamed to react-dom/unstable_testing. This PR fixes this in the package.json.

Note: Adding packages to the yarn build-for-devtools command isn't great in the long run. Eventually we should make devtools have its own build script.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a10d76d48570..59aed94e1cf9 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/test,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/unstable_testing,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

From d63cd972454125d4572bb8ffbfeccbdf0c5eb27b Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 14 Apr 2022 11:30:04 -0500
Subject: [PATCH 1314/1603] don't stringify objects for console log second
 render (#24373)

Fixes #24302 based on #24306.
---

The current implementation for strict mode double logging stringiness and dims the second log. However, because we stringify everything, including objects, this causes objects to be logged as `[object Object]` etc.

This PR creates a new function that formats console log arguments with a specified style. It does this by:
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
---
Co-authored-by: Billy Janitsch <billy@kensho.com>
---
 .../src/__tests__/console-test.js             | 67 ++++++++++-----
 .../src/__tests__/utils-test.js               | 82 ++++++++++++++++++-
 .../src/backend/console.js                    |  9 +-
 .../src/backend/utils.js                      | 56 +++++++++++++
 packages/react-devtools-shared/src/hook.js    | 80 ++++++++----------
 5 files changed, 223 insertions(+), 71 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 9d69e6c70557..b1f5f6814392 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -494,20 +494,31 @@ describe('console', () => {
     );
     expect(mockLog.mock.calls[0]).toHaveLength(1);
     expect(mockLog.mock.calls[0][0]).toBe('log');
-    expect(mockLog.mock.calls[1]).toHaveLength(2);
-    expect(mockLog.mock.calls[1][0]).toBe('%clog');
+    expect(mockLog.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'log',
+    ]);
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
     expect(mockWarn.mock.calls[0][0]).toBe('warn');
-    expect(mockWarn.mock.calls[1]).toHaveLength(2);
-    expect(mockWarn.mock.calls[1][0]).toBe('%cwarn');
+    expect(mockWarn.mock.calls[1]).toHaveLength(3);
+    expect(mockWarn.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
+      'warn',
+    ]);
 
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
-    expect(mockError.mock.calls[1]).toHaveLength(2);
-    expect(mockError.mock.calls[1][0]).toBe('%cerror');
+    expect(mockError.mock.calls[1]).toHaveLength(3);
+    expect(mockError.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
+      'error',
+    ]);
   });
 
   it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
@@ -577,20 +588,32 @@ describe('console', () => {
     expect(mockLog).toHaveBeenCalledTimes(2);
     expect(mockLog.mock.calls[0]).toHaveLength(1);
     expect(mockLog.mock.calls[0][0]).toBe('log');
-    expect(mockLog.mock.calls[1]).toHaveLength(2);
-    expect(mockLog.mock.calls[1][0]).toBe('%clog');
+    expect(mockLog.mock.calls[1]).toHaveLength(3);
+    expect(mockLog.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'log',
+    ]);
 
     expect(mockWarn).toHaveBeenCalledTimes(2);
     expect(mockWarn.mock.calls[0]).toHaveLength(1);
     expect(mockWarn.mock.calls[0][0]).toBe('warn');
-    expect(mockWarn.mock.calls[1]).toHaveLength(2);
-    expect(mockWarn.mock.calls[1][0]).toBe('%cwarn');
+    expect(mockWarn.mock.calls[1]).toHaveLength(3);
+    expect(mockWarn.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_WARNING_COLOR}`,
+      'warn',
+    ]);
 
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
-    expect(mockError.mock.calls[1]).toHaveLength(2);
-    expect(mockError.mock.calls[1][0]).toBe('%cerror');
+    expect(mockError.mock.calls[1]).toHaveLength(3);
+    expect(mockError.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
+      'error',
+    ]);
   });
 
   it('should not double log in Strict mode initial render for extension', () => {
@@ -666,22 +689,26 @@ describe('console', () => {
     expect(normalizeCodeLocInfo(mockWarn.mock.calls[0][1])).toEqual(
       '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
-    expect(mockWarn.mock.calls[1]).toHaveLength(2);
-    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][0])).toEqual(
-      '%cwarn \n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
-    );
+    expect(mockWarn.mock.calls[1]).toHaveLength(4);
+    expect(mockWarn.mock.calls[1][0]).toEqual('%c%s %s');
     expect(mockWarn.mock.calls[1][1]).toMatch('color: rgba(');
+    expect(mockWarn.mock.calls[1][2]).toEqual('warn');
+    expect(normalizeCodeLocInfo(mockWarn.mock.calls[1][3]).trim()).toEqual(
+      'in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    );
 
     expect(mockError).toHaveBeenCalledTimes(2);
     expect(mockError.mock.calls[0]).toHaveLength(2);
     expect(normalizeCodeLocInfo(mockError.mock.calls[0][1])).toEqual(
       '\n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
     );
-    expect(mockError.mock.calls[1]).toHaveLength(2);
-    expect(normalizeCodeLocInfo(mockError.mock.calls[1][0])).toEqual(
-      '%cerror \n    in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
-    );
+    expect(mockError.mock.calls[1]).toHaveLength(4);
+    expect(mockError.mock.calls[1][0]).toEqual('%c%s %s');
     expect(mockError.mock.calls[1][1]).toMatch('color: rgba(');
+    expect(mockError.mock.calls[1][2]).toEqual('error');
+    expect(normalizeCodeLocInfo(mockError.mock.calls[1][3]).trim()).toEqual(
+      'in Child (at **)\n    in Intermediate (at **)\n    in Parent (at **)',
+    );
   });
 });
 
diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js
index 3ff01c5ef960..02bc6be4657a 100644
--- a/packages/react-devtools-shared/src/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -11,7 +11,10 @@ import {
   getDisplayName,
   getDisplayNameForReactElement,
 } from 'react-devtools-shared/src/utils';
-import {format} from 'react-devtools-shared/src/backend/utils';
+import {
+  format,
+  formatWithStyles,
+} from 'react-devtools-shared/src/backend/utils';
 import {
   REACT_SUSPENSE_LIST_TYPE as SuspenseList,
   REACT_STRICT_MODE_TYPE as StrictMode,
@@ -110,4 +113,81 @@ describe('utils', () => {
       expect(format(Symbol('abc'), 123)).toEqual('Symbol(abc) 123');
     });
   });
+
+  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']);
+    });
+  });
 });
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 95d1f4d10332..5a85b68deac3 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -10,7 +10,7 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {CurrentDispatcherRef, ReactRenderer, WorkTagMap} from './types';
 import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevTools';
-import {format} from './utils';
+import {format, formatWithStyles} from './utils';
 
 import {getInternalReactConstants} from './renderer';
 import {getStackByFiberInDevAndProd} from './DevToolsFiberComponentStack';
@@ -38,7 +38,7 @@ const STYLE_DIRECTIVE_REGEX = /^%c/;
 // so the console color stays consistent
 function isStrictModeOverride(args: Array<string>, method: string): boolean {
   return (
-    args.length === 2 &&
+    args.length >= 2 &&
     STYLE_DIRECTIVE_REGEX.test(args[0]) &&
     args[1] === `color: ${getConsoleColor(method) || ''}`
   );
@@ -246,7 +246,8 @@ export function patch({
                   );
                   if (componentStack !== '') {
                     if (isStrictModeOverride(args, method)) {
-                      args[0] = format(args[0], componentStack);
+                      args[0] = `${args[0]} %s`;
+                      args.push(componentStack);
                     } else {
                       args.push(componentStack);
                     }
@@ -335,7 +336,7 @@ export function patchForStrictMode() {
             } else {
               const color = getConsoleColor(method);
               if (color) {
-                originalMethod(`%c${format(...args)}`, `color: ${color}`);
+                originalMethod(...formatWithStyles(args, `color: ${color}`));
               } else {
                 throw Error('Console color is not defined');
               }
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 09f821f4e187..da911cf94458 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -156,6 +156,62 @@ export function serializeToString(data: any): string {
   });
 }
 
+// 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 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|i|s|f), but not %%(o|O|i|s|f)
+  const REGEXP = /([^%]|^)(%([oOdisf]))/g;
+  if (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];
+  }
+}
+
 // 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
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 5844074863bf..1ea54985fab6 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -172,54 +172,42 @@ export function installHook(target: any): DevToolsHook | null {
   }
 
   // NOTE: KEEP IN SYNC with src/backend/utils.js
-  function format(
-    maybeMessage: any,
-    ...inputArgs: $ReadOnlyArray<any>
-  ): string {
-    const args = inputArgs.slice();
-
-    // Symbols cannot be concatenated with Strings.
-    let formatted = String(maybeMessage);
-
-    // If the first argument is a string, check for substitutions.
-    if (typeof maybeMessage === 'string') {
-      if (args.length) {
-        const REGEXP = /(%?)(%([jds]))/g;
-
-        formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
-          let arg = args.shift();
-          switch (flag) {
-            case 's':
-              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;
-        });
-      }
+  function formatWithStyles(
+    inputArgs: $ReadOnlyArray<any>,
+    style?: string,
+  ): $ReadOnlyArray<any> {
+    if (
+      inputArgs === undefined ||
+      inputArgs === null ||
+      inputArgs.length === 0 ||
+      (typeof inputArgs[0] === 'string' && inputArgs[0].includes('%c')) ||
+      style === undefined
+    ) {
+      return inputArgs;
     }
 
-    // Arguments that remain after formatting.
-    if (args.length) {
-      for (let i = 0; i < args.length; i++) {
-        formatted += ' ' + String(args[i]);
-      }
+    const REGEXP = /(%?)(%([oOdisf]))/g;
+    if (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];
     }
-
-    // Update escaped %% values.
-    formatted = formatted.replace(/%{2,2}/g, '%');
-
-    return String(formatted);
   }
 
   let unpatchFn = null;
@@ -291,7 +279,7 @@ export function installHook(target: any): DevToolsHook | null {
             }
 
             if (color) {
-              originalMethod(`%c${format(...args)}`, `color: ${color}`);
+              originalMethod(...formatWithStyles(args, `color: ${color}`));
             } else {
               throw Error('Console color is not defined');
             }

From 726ba80298dad46b331aca1bcb71ca9b2004ed91 Mon Sep 17 00:00:00 2001
From: Billy Janitsch <billy@kensho.com>
Date: Fri, 15 Apr 2022 11:35:35 -0400
Subject: [PATCH 1315/1603] Synchronize implementations of second render
 logging (#24381)

Minor followup to #24373. The fix for #24373 (comment) didn't get synchronized to the hook implementation.
---
 packages/react-devtools-shared/src/backend/utils.js | 2 +-
 packages/react-devtools-shared/src/hook.js          | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index da911cf94458..f0f78b7f778b 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -187,7 +187,7 @@ export function formatWithStyles(
     return inputArgs;
   }
 
-  // Matches any of %(o|O|i|s|f), but not %%(o|O|i|s|f)
+  // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
   const REGEXP = /([^%]|^)(%([oOdisf]))/g;
   if (inputArgs[0].match(REGEXP)) {
     return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 1ea54985fab6..ad5b33850b76 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -180,13 +180,16 @@ export function installHook(target: any): DevToolsHook | null {
       inputArgs === undefined ||
       inputArgs === null ||
       inputArgs.length === 0 ||
-      (typeof inputArgs[0] === 'string' && inputArgs[0].includes('%c')) ||
+      // Matches any of %c but not %%c
+      (typeof inputArgs[0] === 'string' &&
+        inputArgs[0].match(/([^%]|^)(%c)/g)) ||
       style === undefined
     ) {
       return inputArgs;
     }
 
-    const REGEXP = /(%?)(%([oOdisf]))/g;
+    // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
+    const REGEXP = /([^%]|^)(%([oOdisf]))/g;
     if (inputArgs[0].match(REGEXP)) {
       return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
     } else {

From d40dc73cf903e8a12fd29e900df2406e7f611c5c Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Sat, 16 Apr 2022 10:47:46 -0700
Subject: [PATCH 1316/1603] Escape bootstrapScriptContent for javascript
 embedding into HTML (#24385)

The previous escape was for Text into HTML and breaks script contents. The new escaping ensures that the script contents cannot prematurely close the host script tag by escaping script open and close string sequences using a unicode escape substitution.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 61 +++++++++++++++++++
 .../src/server/ReactDOMServerFormatConfig.js  | 13 +++-
 2 files changed, 73 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 295e99b26a69..da9097c51d5e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2811,4 +2811,65 @@ describe('ReactDOMFizzServer', () => {
       </ul>,
     );
   });
+
+  describe('bootstrapScriptContent escaping', () => {
+    // @gate experimental
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.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);
+    });
+
+    // @gate experimental
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.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, ''),
+      );
+    });
+
+    // @gate experimental
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<div />, {
+          bootstrapScriptContent:
+            'let x = ' + booleanLogicString + '; window.__test_outlet = x;',
+        });
+        pipe(writable);
+      });
+      expect(window.__test_outlet).toBe(1);
+    });
+  });
 });
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index a42cb3188722..f41abe26cfff 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -83,6 +83,17 @@ const startScriptSrc = stringToPrecomputedChunk('<script src="');
 const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
+const scriptRegex = /(<\/|<)(s)(cript)/gi;
+const scriptReplacer = (match, prefix, s, suffix) =>
+  `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
+
+function escapeBootstrapScriptContent(scriptText) {
+  if (__DEV__) {
+    checkHtmlStringCoercion(scriptText);
+  }
+  return ('' + scriptText).replace(scriptRegex, scriptReplacer);
+}
+
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
@@ -102,7 +113,7 @@ export function createResponseState(
   if (bootstrapScriptContent !== undefined) {
     bootstrapChunks.push(
       inlineScriptWithNonce,
-      stringToChunk(escapeTextForBrowser(bootstrapScriptContent)),
+      stringToChunk(escapeBootstrapScriptContent(bootstrapScriptContent)),
       endInlineScript,
     );
   }

From 2bf5eba7247a58aeb7ba23b3b5630d8bf6c2c4da Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Sat, 16 Apr 2022 14:29:12 -0700
Subject: [PATCH 1317/1603] explain the rationale for the chosen escaping
 implemenation in a comment (#24389)

---
 .../src/server/ReactDOMServerFormatConfig.js    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index f41abe26cfff..4814bd0aa333 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -83,16 +83,25 @@ const startScriptSrc = stringToPrecomputedChunk('<script src="');
 const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
-const scriptRegex = /(<\/|<)(s)(cript)/gi;
-const scriptReplacer = (match, prefix, s, suffix) =>
-  `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
-
+/**
+ * This escaping function is designed to work with bootstrapScriptContent only.
+ * 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 escapeBootstrapScriptContent(scriptText) {
   if (__DEV__) {
     checkHtmlStringCoercion(scriptText);
   }
   return ('' + scriptText).replace(scriptRegex, scriptReplacer);
 }
+const scriptRegex = /(<\/|<)(s)(cript)/gi;
+const scriptReplacer = (match, prefix, s, suffix) =>
+  `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(

From ab9cdd34fb6c88d56c83882dbd011b4546878483 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 19 Apr 2022 17:09:07 -0400
Subject: [PATCH 1318/1603] Bugfix: In legacy mode, call suspended tree's
 unmount effects when it is deleted (#24400)

* Bug: Missing unmount when suspended tree deleted

When a suspended tree switches to a fallback, we unmount the effects.
If the suspended tree is then deleted, there's a guard to prevent us
from unmounting the effects again.

However, in legacy mode, we don't unmount effects when a tree suspends.
So if the suspended tree is then deleted, we do need to unmount
the effects.

We're missing a check for legacy/concurrent mode.

* Fix: Unmount suspended tree when it is deleted
---
 .../src/ReactFiberCommitWork.new.js           |  70 +++++++-----
 .../src/ReactFiberCommitWork.old.js           |  70 +++++++-----
 .../ReactSuspenseEffectsSemanticsDOM-test.js  | 103 +++++++++---------
 3 files changed, 139 insertions(+), 104 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index dfb0308c012e..2cb02b2a5466 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1804,24 +1804,36 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
-      // 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;
+      if (
+        // TODO: Remove this dead flag
+        enableSuspenseLayoutEffectSemantics &&
+        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;
     }
     default: {
@@ -2238,13 +2250,21 @@ function commitMutationEffectsOnFiber(
     case OffscreenComponent: {
       const wasHidden = current !== null && current.memoizedState !== null;
 
-      // 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 prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
-      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
-      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+      if (
+        // TODO: Remove this dead flag
+        enableSuspenseLayoutEffectSemantics &&
+        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 prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+      } else {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      }
 
       commitReconciliationEffects(finishedWork);
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 5853bcfe5356..fbd3873fa54f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1804,24 +1804,36 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
-      // 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;
+      if (
+        // TODO: Remove this dead flag
+        enableSuspenseLayoutEffectSemantics &&
+        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;
     }
     default: {
@@ -2238,13 +2250,21 @@ function commitMutationEffectsOnFiber(
     case OffscreenComponent: {
       const wasHidden = current !== null && current.memoizedState !== null;
 
-      // 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 prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
-      recursivelyTraverseMutationEffects(root, finishedWork, lanes);
-      offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+      if (
+        // TODO: Remove this dead flag
+        enableSuspenseLayoutEffectSemantics &&
+        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 prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+      } else {
+        recursivelyTraverseMutationEffects(root, finishedWork, lanes);
+      }
 
       commitReconciliationEffects(finishedWork);
 
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
index 00c126bb3645..8eb89d3783ec 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemanticsDOM-test.js
@@ -93,60 +93,6 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
     });
   });
 
-  it('does not destroy layout effects twice when hidden child is removed', async () => {
-    function ChildA({label}) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('Did mount: ' + label);
-        return () => {
-          Scheduler.unstable_yieldValue('Will unmount: ' + label);
-        };
-      }, []);
-      return <Text text={label} />;
-    }
-
-    function ChildB({label}) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('Did mount: ' + label);
-        return () => {
-          Scheduler.unstable_yieldValue('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);
-    act(() => {
-      root.render(<Parent swap={false} />);
-    });
-    expect(Scheduler).toHaveYielded(['Loading...']);
-
-    await LazyChildA;
-    expect(Scheduler).toFlushAndYield(['A', 'Did mount: A']);
-    expect(container.innerHTML).toBe('A');
-
-    // Swap the position of A and B
-    ReactDOM.flushSync(() => {
-      root.render(<Parent swap={true} />);
-    });
-    expect(Scheduler).toHaveYielded(['Loading...', 'Will unmount: A']);
-    expect(container.innerHTML).toBe('Loading...');
-
-    await LazyChildB;
-    expect(Scheduler).toFlushAndYield(['B', 'Did mount: B']);
-    expect(container.innerHTML).toBe('B');
-  });
-
   it('does not destroy ref cleanup twice when hidden child is removed', async () => {
     function ChildA({label}) {
       return (
@@ -455,4 +401,53 @@ describe('ReactSuspenseEffectsSemanticsDOM', () => {
     expect(Scheduler).toFlushAndYield([]);
     expect(container.innerHTML).toBe('<h1>Hello</h1>');
   });
+
+  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.unstable_yieldValue('Mount');
+        return () => {
+          Scheduler.unstable_yieldValue('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);
+    expect(Scheduler).toHaveYielded(['Child', 'Mount']);
+
+    // Update that suspends, causing the existing tree to switches it to
+    // a fallback.
+    ReactDOM.render(<App showMore={true} />, container);
+    expect(Scheduler).toHaveYielded([
+      '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);
+    expect(Scheduler).toHaveYielded(['Unmount']);
+  });
 });

From a6d53f3468636bcee30c26d4e0df7a4582526d63 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 19 Apr 2022 17:34:30 -0400
Subject: [PATCH 1319/1603] Revert "Clean up Selective Hydration / Event Replay
 flag (#24156)" (#24402)

This reverts commit b5cca182ffd5500b83f20f215d0e16d6dbae0efb.
---
 ...DOMServerPartialHydration-test.internal.js |  91 ++++++-
 ...MServerSelectiveHydration-test.internal.js | 222 ++++++++++++++----
 packages/react-dom/src/client/ReactDOM.js     |   3 +
 .../src/events/ReactDOMEventListener.js       | 123 +++++++++-
 .../src/events/ReactDOMEventReplaying.js      | 142 ++++++++++-
 .../DOMPluginEventSystem-test.internal.js     |  11 +-
 .../src/ReactFiberReconciler.js               |   5 +
 .../src/ReactFiberReconciler.new.js           |  14 ++
 .../src/ReactFiberReconciler.old.js           |  14 ++
 packages/shared/ReactFeatureFlags.js          |   3 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 19 files changed, 565 insertions(+), 72 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 66bfdf9a39ed..19846522ee44 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2415,8 +2415,18 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(clicks).toBe(0);
-    expect(container.textContent).toBe('Click meHello');
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+      expect(container.textContent).toBe('Click meHello');
+    } else {
+      expect(clicks).toBe(1);
+      expect(container.textContent).toBe('Hello');
+    }
     document.body.removeChild(container);
   });
 
@@ -2498,7 +2508,17 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(onEvent).toHaveBeenCalledTimes(0);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(onEvent).toHaveBeenCalledTimes(0);
+    } else {
+      expect(onEvent).toHaveBeenCalledTimes(2);
+    }
+
     document.body.removeChild(container);
   });
 
@@ -2578,7 +2598,16 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(clicks).toBe(0);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+    } else {
+      expect(clicks).toBe(2);
+    }
 
     document.body.removeChild(container);
   });
@@ -2663,7 +2692,17 @@ describe('ReactDOMServerPartialHydration', () => {
       resolve();
       await promise;
     });
-    expect(onEvent).toHaveBeenCalledTimes(0);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(onEvent).toHaveBeenCalledTimes(0);
+    } else {
+      expect(onEvent).toHaveBeenCalledTimes(2);
+    }
+
     document.body.removeChild(container);
   });
 
@@ -2734,8 +2773,19 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    expect(clicksOnChild).toBe(0);
-    expect(clicksOnParent).toBe(0);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicksOnChild).toBe(0);
+      expect(clicksOnParent).toBe(0);
+    } else {
+      expect(clicksOnChild).toBe(1);
+      // This will be zero due to the stopPropagation.
+      expect(clicksOnParent).toBe(0);
+    }
 
     document.body.removeChild(container);
   });
@@ -2811,7 +2861,16 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     // We're now full hydrated.
-    expect(clicks).toBe(0);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(clicks).toBe(0);
+    } else {
+      expect(clicks).toBe(1);
+    }
 
     document.body.removeChild(parentContainer);
   });
@@ -3080,9 +3139,19 @@ describe('ReactDOMServerPartialHydration', () => {
       await promise;
     });
 
-    // discrete event not replayed
-    expect(submits).toBe(0);
-    expect(container.textContent).toBe('Click meHello');
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // discrete event not replayed
+      expect(submits).toBe(0);
+      expect(container.textContent).toBe('Click meHello');
+    } else {
+      expect(submits).toBe(1);
+      expect(container.textContent).toBe('Hello');
+    }
 
     document.body.removeChild(container);
   });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
index aec22acb3374..91321ea6dd5b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js
@@ -268,7 +268,18 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    expect(Scheduler).toHaveYielded(['D', 'A']);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(Scheduler).toHaveYielded(['D', 'A']);
+    } else {
+      // After the click, we should prioritize D and the Click first,
+      // and only after that render A and C.
+      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    }
 
     document.body.removeChild(container);
   });
@@ -342,7 +353,16 @@ describe('ReactDOMServerSelectiveHydration', () => {
     dispatchClickEvent(spanC);
     dispatchClickEvent(spanD);
 
-    expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    } else {
+      expect(Scheduler).toHaveYielded(['App']);
+    }
 
     await act(async () => {
       suspend = false;
@@ -350,12 +370,29 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'D',
-      // B should render last since it wasn't clicked.
-      'B',
-    ]);
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    } else {
+      // We should prioritize hydrating A, C and D first since we clicked in
+      // them. Only after they're done will we hydrate B.
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'Clicked A',
+        'C',
+        'Clicked C',
+        'D',
+        'Clicked D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -509,8 +546,17 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    // no replay
-    expect(Scheduler).toHaveYielded(['D', 'A']);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // no replay
+      expect(Scheduler).toHaveYielded(['D', 'A']);
+    } else {
+      expect(Scheduler).toHaveYielded(['D', 'Clicked D', 'A']);
+    }
 
     document.body.removeChild(container);
   });
@@ -589,19 +635,42 @@ describe('ReactDOMServerSelectiveHydration', () => {
     createEventTarget(spanC).virtualclick();
     createEventTarget(spanD).virtualclick();
 
-    expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded(['App', 'C', 'Clicked C']);
+    } else {
+      expect(Scheduler).toHaveYielded(['App']);
+    }
     await act(async () => {
       suspend = false;
       resolve();
       await promise;
     });
 
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'D',
-      // B should render last since it wasn't clicked.
-      'B',
-    ]);
+    if (
+      ReactFeatureFlags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
+    ) {
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    } else {
+      // We should prioritize hydrating A, C and D first since we clicked in
+      // them. Only after they're done will we hydrate B.
+      expect(Scheduler).toHaveYielded([
+        'A',
+        'Clicked A',
+        'C',
+        'Clicked C',
+        'D',
+        'Clicked D',
+        // B should render last since it wasn't clicked.
+        'B',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -681,15 +750,37 @@ describe('ReactDOMServerSelectiveHydration', () => {
       resolve();
       await promise;
     });
-    // We should prioritize hydrating D first because we clicked it.
-    // but event isnt replayed
-    expect(Scheduler).toHaveYielded([
-      'D',
-      'B', // Ideally this should be later.
-      'C',
-      'Hover C',
-      'A',
-    ]);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // We should prioritize hydrating D first because we clicked it.
+      // but event isnt replayed
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    } else {
+      // We should prioritize hydrating D first because we clicked it.
+      // Next we should hydrate C since that's the current hover target.
+      // To simplify implementation details we hydrate both B and C at
+      // the same time since B was already scheduled.
+      // This is ok because it will at least not continue for nested
+      // boundary. See the next test below.
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'Clicked D',
+        'B', // Ideally this should be later.
+        'C',
+        'Hover C',
+        'A',
+      ]);
+    }
 
     document.body.removeChild(container);
   });
@@ -813,22 +904,47 @@ describe('ReactDOMServerSelectiveHydration', () => {
       await promise;
     });
 
-    // We should prioritize hydrating D first because we clicked it.
-    // but event isnt replayed
-    expect(Scheduler).toHaveYielded([
-      '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',
-    ]);
+    if (
+      gate(
+        flags =>
+          flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+      )
+    ) {
+      // We should prioritize hydrating D first because we clicked it.
+      // but event isnt replayed
+      expect(Scheduler).toHaveYielded([
+        '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',
+      ]);
+    } else {
+      // We should prioritize hydrating D first because we clicked it.
+      // Next we should hydrate C since that's the current hover target.
+      // To simplify implementation details we hydrate both B and C at
+      // the same time since B was already scheduled.
+      // This is ok because it will at least not continue for nested
+      // boundary. See the next test below.
+      expect(Scheduler).toHaveYielded([
+        'D',
+        'Clicked D',
+        'B', // Ideally this should be later.
+        'C',
+        // Capture phase isn't replayed
+        // Mouseout isn't replayed
+        'Mouse Over C',
+        'Mouse Enter C',
+        'A',
+      ]);
+    }
 
     // This test shows existing quirk where stopPropagation on mouseout
     // prevents mouseEnter from firing
@@ -975,10 +1091,19 @@ describe('ReactDOMServerSelectiveHydration', () => {
       });
 
       expect(OuterScheduler).toHaveYielded(['Suspend Outer']);
-
-      // InnerApp doesn't see the event because OuterApp calls stopPropagation in
-      // capture phase since the event is blocked on suspended component
-      expect(InnerScheduler).toHaveYielded([]);
+      if (
+        gate(
+          flags =>
+            flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+        )
+      ) {
+        // InnerApp doesn't see the event because OuterApp calls stopPropagation in
+        // capture phase since the event is blocked on suspended component
+        expect(InnerScheduler).toHaveYielded([]);
+      } else {
+        // no stopPropagation
+        expect(InnerScheduler).toHaveYielded(['Suspend Inner']);
+      }
 
       expect(Scheduler).toHaveYielded([]);
     });
@@ -986,6 +1111,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
       document.body.innerHTML = '';
     });
 
+    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
     it('Inner hydrates first then Outer', async () => {
       dispatchMouseHoverEvent(innerDiv);
 
@@ -1042,6 +1168,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
       ]);
     });
 
+    // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
     it('Outer hydrates first then Inner', async () => {
       dispatchMouseHoverEvent(innerDiv);
 
@@ -1103,6 +1230,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     });
   });
 
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
   it('replays event with null target when tree is dismounted', async () => {
     let suspend = false;
     let resolve;
@@ -1421,6 +1549,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
   it('fires capture event handlers and native events if content is hydratable during discrete event', async () => {
     spyOnDev(console, 'error');
     function Child({text}) {
@@ -1504,6 +1633,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
     document.body.removeChild(container);
   });
 
+  // @gate enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay
   it('does not propagate discrete event if it cannot be synchronously hydrated', async () => {
     let triggeredParent = false;
     let triggeredChild = false;
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 9ec6f67cbd7d..aaf429cad54c 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -37,6 +37,7 @@ import {
   flushControlled,
   injectIntoDevTools,
   attemptSynchronousHydration,
+  attemptDiscreteHydration,
   attemptContinuousHydration,
   attemptHydrationAtCurrentPriority,
 } from 'react-reconciler/src/ReactFiberReconciler';
@@ -58,6 +59,7 @@ import {
 import {restoreControlledState} from './ReactDOMComponent';
 import {
   setAttemptSynchronousHydration,
+  setAttemptDiscreteHydration,
   setAttemptContinuousHydration,
   setAttemptHydrationAtCurrentPriority,
   setGetCurrentUpdatePriority,
@@ -71,6 +73,7 @@ import {
 } from '../events/ReactDOMControlledComponent';
 
 setAttemptSynchronousHydration(attemptSynchronousHydration);
+setAttemptDiscreteHydration(attemptDiscreteHydration);
 setAttemptContinuousHydration(attemptContinuousHydration);
 setAttemptHydrationAtCurrentPriority(attemptHydrationAtCurrentPriority);
 setGetCurrentUpdatePriority(getCurrentUpdatePriority);
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index 6ebb56e74041..e2974586ec6a 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -11,8 +11,11 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
+import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags';
 import {
   isDiscreteEventThatRequiresHydration,
+  queueDiscreteEvent,
+  hasQueuedDiscreteEvents,
   clearIfContinuousEvent,
   queueIfContinuousEvent,
   attemptSynchronousHydration,
@@ -143,7 +146,123 @@ function dispatchContinuousEvent(
   }
 }
 
-function dispatchEvent(
+export function dispatchEvent(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+): void {
+  if (!_enabled) {
+    return;
+  }
+  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+  } else {
+    dispatchEventOriginal(
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+  }
+}
+
+function dispatchEventOriginal(
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+) {
+  // TODO: replaying capture phase events is currently broken
+  // because we used to do it during top-level native bubble handlers
+  // but now we use different bubble and capture handlers.
+  // In eager mode, we attach capture listeners early, so we need
+  // to filter them out until we fix the logic to handle them correctly.
+  const allowReplay = (eventSystemFlags & IS_CAPTURE_PHASE) === 0;
+
+  if (
+    allowReplay &&
+    hasQueuedDiscreteEvents() &&
+    isDiscreteEventThatRequiresHydration(domEventName)
+  ) {
+    // If we already have a queue of discrete events, and this is another discrete
+    // event, then we can't dispatch it regardless of its target, since they
+    // need to dispatch in order.
+    queueDiscreteEvent(
+      null, // Flags that we're not actually blocked on anything as far as we know.
+      domEventName,
+      eventSystemFlags,
+      targetContainer,
+      nativeEvent,
+    );
+    return;
+  }
+
+  const blockedOn = findInstanceBlockingEvent(
+    domEventName,
+    eventSystemFlags,
+    targetContainer,
+    nativeEvent,
+  );
+  if (blockedOn === null) {
+    dispatchEventForPluginEventSystem(
+      domEventName,
+      eventSystemFlags,
+      nativeEvent,
+      return_targetInst,
+      targetContainer,
+    );
+    if (allowReplay) {
+      clearIfContinuousEvent(domEventName, nativeEvent);
+    }
+    return;
+  }
+
+  if (allowReplay) {
+    if (isDiscreteEventThatRequiresHydration(domEventName)) {
+      // This this to be replayed later once the target is available.
+      queueDiscreteEvent(
+        blockedOn,
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        nativeEvent,
+      );
+      return;
+    }
+    if (
+      queueIfContinuousEvent(
+        blockedOn,
+        domEventName,
+        eventSystemFlags,
+        targetContainer,
+        nativeEvent,
+      )
+    ) {
+      return;
+    }
+    // We need to clear only if we didn't queue because
+    // queueing is accumulative.
+    clearIfContinuousEvent(domEventName, nativeEvent);
+  }
+
+  // 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,
+  );
+}
+
+function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay(
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   targetContainer: EventTarget,
@@ -229,7 +348,7 @@ function dispatchEvent(
   );
 }
 
-let return_targetInst = null;
+export let return_targetInst = null;
 
 // Returns a SuspenseInstance or Container if it's blocked.
 // The return_targetInst field above is conceptually part of the return value.
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index db79c79d8fad..9de82a99a7be 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -14,7 +14,10 @@ import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
-import {enableSelectiveHydration} from 'shared/ReactFeatureFlags';
+import {
+  enableSelectiveHydration,
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+} from 'shared/ReactFeatureFlags';
 import {
   unstable_scheduleCallback as scheduleCallback,
   unstable_NormalPriority as NormalPriority,
@@ -24,8 +27,12 @@ import {
   getContainerFromFiber,
   getSuspenseInstanceFromFiber,
 } from 'react-reconciler/src/ReactFiberTreeReflection';
-import {findInstanceBlockingEvent} from './ReactDOMEventListener';
+import {
+  findInstanceBlockingEvent,
+  return_targetInst,
+} from './ReactDOMEventListener';
 import {setReplayingEvent, resetReplayingEvent} from './CurrentReplayingEvent';
+import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   getInstanceFromNode,
   getClosestInstanceFromNode,
@@ -44,6 +51,12 @@ export function attemptSynchronousHydration(fiber: Object) {
   _attemptSynchronousHydration(fiber);
 }
 
+let attemptDiscreteHydration: (fiber: Object) => void;
+
+export function setAttemptDiscreteHydration(fn: (fiber: Object) => void) {
+  attemptDiscreteHydration = fn;
+}
+
 let attemptContinuousHydration: (fiber: Object) => void;
 
 export function setAttemptContinuousHydration(fn: (fiber: Object) => void) {
@@ -120,7 +133,7 @@ export function hasQueuedContinuousEvents(): boolean {
   return hasAnyQueuedContinuousEvents;
 }
 
-const synchronouslyHydratedEvents: Array<DOMEventName> = [
+const discreteReplayableEvents: Array<DOMEventName> = [
   'mousedown',
   'mouseup',
   'touchcancel',
@@ -154,7 +167,7 @@ const synchronouslyHydratedEvents: Array<DOMEventName> = [
 export function isDiscreteEventThatRequiresHydration(
   eventType: DOMEventName,
 ): boolean {
-  return synchronouslyHydratedEvents.indexOf(eventType) > -1;
+  return discreteReplayableEvents.indexOf(eventType) > -1;
 }
 
 function createQueuedReplayableEvent(
@@ -173,6 +186,50 @@ function createQueuedReplayableEvent(
   };
 }
 
+export function queueDiscreteEvent(
+  blockedOn: null | Container | SuspenseInstance,
+  domEventName: DOMEventName,
+  eventSystemFlags: EventSystemFlags,
+  targetContainer: EventTarget,
+  nativeEvent: AnyNativeEvent,
+): void {
+  if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    return;
+  }
+  const queuedEvent = createQueuedReplayableEvent(
+    blockedOn,
+    domEventName,
+    eventSystemFlags,
+    targetContainer,
+    nativeEvent,
+  );
+  queuedDiscreteEvents.push(queuedEvent);
+  if (enableSelectiveHydration) {
+    if (queuedDiscreteEvents.length === 1) {
+      // If this was the first discrete event, we might be able to
+      // synchronously unblock it so that preventDefault still works.
+      while (queuedEvent.blockedOn !== null) {
+        const fiber = getInstanceFromNode(queuedEvent.blockedOn);
+        if (fiber === null) {
+          break;
+        }
+        attemptSynchronousHydration(fiber);
+        if (queuedEvent.blockedOn === null) {
+          // We got unblocked by hydration. Let's try again.
+          replayUnblockedEvents();
+          // If we're reblocked, on an inner boundary, we might need
+          // to attempt hydrating that one.
+          continue;
+        } else {
+          // We're still blocked from hydration, we have to give up
+          // and replay later.
+          break;
+        }
+      }
+    }
+  }
+}
+
 // Resets the replaying for this type of continuous event to no event.
 export function clearIfContinuousEvent(
   domEventName: DOMEventName,
@@ -416,14 +473,26 @@ function attemptReplayContinuousQueuedEvent(
       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();
+      if (enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+        const nativeEvent = queuedEvent.nativeEvent;
+        const nativeEventClone = new nativeEvent.constructor(
+          nativeEvent.type,
+          (nativeEvent: any),
+        );
+        setReplayingEvent(nativeEventClone);
+        nativeEvent.target.dispatchEvent(nativeEventClone);
+        resetReplayingEvent();
+      } else {
+        setReplayingEvent(queuedEvent.nativeEvent);
+        dispatchEventForPluginEventSystem(
+          queuedEvent.domEventName,
+          queuedEvent.eventSystemFlags,
+          queuedEvent.nativeEvent,
+          return_targetInst,
+          targetContainer,
+        );
+        resetReplayingEvent();
+      }
     } else {
       // We're still blocked. Try again later.
       const fiber = getInstanceFromNode(nextBlockedOn);
@@ -451,6 +520,55 @@ function attemptReplayContinuousQueuedEventInMap(
 
 function replayUnblockedEvents() {
   hasScheduledReplayAttempt = false;
+  if (!enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay) {
+    // First replay discrete events.
+    while (queuedDiscreteEvents.length > 0) {
+      const nextDiscreteEvent = queuedDiscreteEvents[0];
+      if (nextDiscreteEvent.blockedOn !== null) {
+        // We're still blocked.
+        // Increase the priority of this boundary to unblock
+        // the next discrete event.
+        const fiber = getInstanceFromNode(nextDiscreteEvent.blockedOn);
+        if (fiber !== null) {
+          attemptDiscreteHydration(fiber);
+        }
+        break;
+      }
+      const targetContainers = nextDiscreteEvent.targetContainers;
+      while (targetContainers.length > 0) {
+        const targetContainer = targetContainers[0];
+        const nextBlockedOn = findInstanceBlockingEvent(
+          nextDiscreteEvent.domEventName,
+          nextDiscreteEvent.eventSystemFlags,
+          targetContainer,
+          nextDiscreteEvent.nativeEvent,
+        );
+        if (nextBlockedOn === null) {
+          // This whole function is in !enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+          // so we don't need the new replay behavior code branch.
+          setReplayingEvent(nextDiscreteEvent.nativeEvent);
+          dispatchEventForPluginEventSystem(
+            nextDiscreteEvent.domEventName,
+            nextDiscreteEvent.eventSystemFlags,
+            nextDiscreteEvent.nativeEvent,
+            return_targetInst,
+            targetContainer,
+          );
+          resetReplayingEvent();
+        } else {
+          // We're still blocked. Try again later.
+          nextDiscreteEvent.blockedOn = nextBlockedOn;
+          break;
+        }
+        // This target container was successfully dispatched. Try the next.
+        targetContainers.shift();
+      }
+      if (nextDiscreteEvent.blockedOn === null) {
+        // We've successfully replayed the first event. Let's try the next one.
+        queuedDiscreteEvents.shift();
+      }
+    }
+  }
   // Next replay any continuous events.
   if (queuedFocus !== null && attemptReplayContinuousQueuedEvent(queuedFocus)) {
     queuedFocus = null;
diff --git a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
index 0362e4e203a8..bcc3f15c44e7 100644
--- a/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
+++ b/packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
@@ -650,7 +650,16 @@ describe('DOMPluginEventSystem', () => {
 
           // We're now full hydrated.
 
-          expect(clicks).toBe(0);
+          if (
+            gate(
+              flags =>
+                flags.enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+            )
+          ) {
+            expect(clicks).toBe(0);
+          } else {
+            expect(clicks).toBe(1);
+          }
 
           document.body.removeChild(parentContainer);
         });
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
index aacd2018b7d4..abc676ff2396 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -27,6 +27,7 @@ import {
   flushPassiveEffects as flushPassiveEffects_old,
   getPublicRootInstance as getPublicRootInstance_old,
   attemptSynchronousHydration as attemptSynchronousHydration_old,
+  attemptDiscreteHydration as attemptDiscreteHydration_old,
   attemptContinuousHydration as attemptContinuousHydration_old,
   attemptHydrationAtCurrentPriority as attemptHydrationAtCurrentPriority_old,
   findHostInstance as findHostInstance_old,
@@ -64,6 +65,7 @@ import {
   flushPassiveEffects as flushPassiveEffects_new,
   getPublicRootInstance as getPublicRootInstance_new,
   attemptSynchronousHydration as attemptSynchronousHydration_new,
+  attemptDiscreteHydration as attemptDiscreteHydration_new,
   attemptContinuousHydration as attemptContinuousHydration_new,
   attemptHydrationAtCurrentPriority as attemptHydrationAtCurrentPriority_new,
   findHostInstance as findHostInstance_new,
@@ -122,6 +124,9 @@ export const getPublicRootInstance = enableNewReconciler
 export const attemptSynchronousHydration = enableNewReconciler
   ? attemptSynchronousHydration_new
   : attemptSynchronousHydration_old;
+export const attemptDiscreteHydration = enableNewReconciler
+  ? attemptDiscreteHydration_new
+  : attemptDiscreteHydration_old;
 export const attemptContinuousHydration = enableNewReconciler
   ? attemptContinuousHydration_new
   : attemptContinuousHydration_old;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 8ae8e42de46f..136276637d3e 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -452,6 +452,20 @@ function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   }
 }
 
+export function attemptDiscreteHydration(fiber: Fiber): void {
+  if (fiber.tag !== SuspenseComponent) {
+    // We ignore HostRoots here because we can't increase
+    // their priority and they should not suspend on I/O,
+    // since you have to wrap anything that might suspend in
+    // Suspense.
+    return;
+  }
+  const eventTime = requestEventTime();
+  const lane = SyncLane;
+  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  markRetryLaneIfNotHydrated(fiber, lane);
+}
+
 export function attemptContinuousHydration(fiber: Fiber): void {
   if (fiber.tag !== SuspenseComponent) {
     // We ignore HostRoots here because we can't increase
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 31171bb073f9..e014519320a5 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -452,6 +452,20 @@ function markRetryLaneIfNotHydrated(fiber: Fiber, retryLane: Lane) {
   }
 }
 
+export function attemptDiscreteHydration(fiber: Fiber): void {
+  if (fiber.tag !== SuspenseComponent) {
+    // We ignore HostRoots here because we can't increase
+    // their priority and they should not suspend on I/O,
+    // since you have to wrap anything that might suspend in
+    // Suspense.
+    return;
+  }
+  const eventTime = requestEventTime();
+  const lane = SyncLane;
+  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  markRetryLaneIfNotHydrated(fiber, lane);
+}
+
 export function attemptContinuousHydration(fiber: Fiber): void {
   if (fiber.tag !== SuspenseComponent) {
     // We ignore HostRoots here because we can't increase
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 8dfb8fddaddf..33261df6d76d 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -44,6 +44,9 @@ export const enableSuspenseLayoutEffectSemantics = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 
+// TODO: Need to review this code one more time before landing
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+
 // Recoil still uses useMutableSource in www, need to delete
 export const enableUseMutableSource = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 90f3b57a472a..facc9c7d7836 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -52,6 +52,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 805812ec9785..94bd83865896 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index a6c8bb51343f..b0c81a7a8bb3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index ca6ae7e68591..e05dc109843c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -53,6 +53,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 822ca854730a..042c2519043b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 276b74423270..6b640311000f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 73015250bf53..5e41ca9992da 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -43,6 +43,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index bdc3abb2a895..1f7de0b6b5a1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -25,6 +25,7 @@ export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
+export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 2a2e0e6ffe20..d5edae5563a5 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -31,6 +31,7 @@ export const {
   disableSchedulerTimeoutInWorkLoop,
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
+  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
   enableClientRenderFallbackOnHydrationMismatch,
   enableClientRenderFallbackOnTextMismatch,
 } = dynamicFeatureFlags;

From 4175f05934d3954827c00b7633c1ce8e4e87d227 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 19 Apr 2022 17:34:49 -0400
Subject: [PATCH 1320/1603] Temporarily feature flag numeric fallback for
 symbols (#24401)

---
 .../react/src/__tests__/ReactElement-test.js  | 112 +++++++++++++++++
 .../src/__tests__/ReactElementJSX-test.js     | 113 ++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |   3 +
 packages/shared/ReactSymbols.js               |  89 ++++++++++----
 .../__tests__/ReactSymbols-test.internal.js   |  16 +++
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   2 +-
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 packages/shared/isValidElementType.js         |  12 +-
 15 files changed, 328 insertions(+), 27 deletions(-)

diff --git a/packages/react/src/__tests__/ReactElement-test.js b/packages/react/src/__tests__/ReactElement-test.js
index cc14e172ef6e..95499947b80f 100644
--- a/packages/react/src/__tests__/ReactElement-test.js
+++ b/packages/react/src/__tests__/ReactElement-test.js
@@ -9,16 +9,26 @@
 
 'use strict';
 
+import {enableSymbolFallbackForWWW} from 'shared/ReactFeatureFlags';
+
 let React;
 let ReactDOM;
 let ReactTestUtils;
 
 describe('ReactElement', () => {
   let ComponentClass;
+  let originalSymbol;
 
   beforeEach(() => {
     jest.resetModules();
 
+    if (enableSymbolFallbackForWWW) {
+      // Delete the native Symbol if we have one to ensure we test the
+      // unpolyfilled environment.
+      originalSymbol = global.Symbol;
+      global.Symbol = undefined;
+    }
+
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('react-dom/test-utils');
@@ -31,6 +41,17 @@ describe('ReactElement', () => {
     };
   });
 
+  afterEach(() => {
+    if (enableSymbolFallbackForWWW) {
+      global.Symbol = originalSymbol;
+    }
+  });
+
+  // @gate enableSymbolFallbackForWWW
+  it('uses the fallback value when in an environment without Symbol', () => {
+    expect((<div />).$$typeof).toBe(0xeac7);
+  });
+
   it('returns a complete element according to spec', () => {
     const element = React.createElement(ComponentClass);
     expect(element.type).toBe(ComponentClass);
@@ -280,6 +301,42 @@ describe('ReactElement', () => {
     expect(element.type.someStaticMethod()).toBe('someReturnValue');
   });
 
+  // NOTE: We're explicitly not using JSX here. This is intended to test
+  // classic JS without JSX.
+  // @gate enableSymbolFallbackForWWW
+  it('identifies valid elements', () => {
+    class Component extends React.Component {
+      render() {
+        return React.createElement('div');
+      }
+    }
+
+    expect(React.isValidElement(React.createElement('div'))).toEqual(true);
+    expect(React.isValidElement(React.createElement(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);
+    if (!__EXPERIMENTAL__) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
+    expect(React.isValidElement(Component)).toEqual(false);
+    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+
+    const jsonElement = JSON.stringify(React.createElement('div'));
+    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
+  });
+
   // NOTE: We're explicitly not using JSX here. This is intended to test
   // classic JS without JSX.
   it('is indistinguishable from a plain object', () => {
@@ -397,6 +454,7 @@ describe('ReactElement', () => {
 
   // NOTE: We're explicitly not using JSX here. This is intended to test
   // classic JS without JSX.
+  // @gate !enableSymbolFallbackForWWW
   it('identifies elements, but not JSON, if Symbols are supported', () => {
     class Component extends React.Component {
       render() {
@@ -429,4 +487,58 @@ describe('ReactElement', () => {
     const jsonElement = JSON.stringify(React.createElement('div'));
     expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
   });
+
+  // NOTE: We're explicitly not using JSX here. This is intended to test
+  // classic JS without JSX.
+  it('identifies elements, but not JSON, if Symbols are supported (with polyfill)', () => {
+    // Rudimentary polyfill
+    // Once all jest engines support Symbols natively we can swap this to test
+    // WITH native Symbols by default.
+    const REACT_ELEMENT_TYPE = function() {}; // fake Symbol
+    const OTHER_SYMBOL = function() {}; // another fake Symbol
+    global.Symbol = function(name) {
+      return OTHER_SYMBOL;
+    };
+    global.Symbol.for = function(key) {
+      if (key === 'react.element') {
+        return REACT_ELEMENT_TYPE;
+      }
+      return OTHER_SYMBOL;
+    };
+
+    jest.resetModules();
+
+    React = require('react');
+
+    class Component extends React.Component {
+      render() {
+        return React.createElement('div');
+      }
+    }
+
+    expect(React.isValidElement(React.createElement('div'))).toEqual(true);
+    expect(React.isValidElement(React.createElement(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);
+    if (!__EXPERIMENTAL__) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
+    expect(React.isValidElement(Component)).toEqual(false);
+    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+
+    const jsonElement = JSON.stringify(React.createElement('div'));
+    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
+  });
 });
diff --git a/packages/react/src/__tests__/ReactElementJSX-test.js b/packages/react/src/__tests__/ReactElementJSX-test.js
index 58ab4f69f5b9..16b53923ffb5 100644
--- a/packages/react/src/__tests__/ReactElementJSX-test.js
+++ b/packages/react/src/__tests__/ReactElementJSX-test.js
@@ -9,6 +9,8 @@
 
 'use strict';
 
+import {enableSymbolFallbackForWWW} from 'shared/ReactFeatureFlags';
+
 let React;
 let ReactDOM;
 let ReactTestUtils;
@@ -20,9 +22,18 @@ let JSXDEVRuntime;
 // A lot of these tests are pulled from ReactElement-test because
 // this api is meant to be backwards compatible.
 describe('ReactElement.jsx', () => {
+  let originalSymbol;
+
   beforeEach(() => {
     jest.resetModules();
 
+    if (enableSymbolFallbackForWWW) {
+      // Delete the native Symbol if we have one to ensure we test the
+      // unpolyfilled environment.
+      originalSymbol = global.Symbol;
+      global.Symbol = undefined;
+    }
+
     React = require('react');
     JSXRuntime = require('react/jsx-runtime');
     JSXDEVRuntime = require('react/jsx-dev-runtime');
@@ -30,6 +41,12 @@ describe('ReactElement.jsx', () => {
     ReactTestUtils = require('react-dom/test-utils');
   });
 
+  afterEach(() => {
+    if (enableSymbolFallbackForWWW) {
+      global.Symbol = originalSymbol;
+    }
+  });
+
   it('allows static methods to be called using the type property', () => {
     class StaticMethodComponentClass extends React.Component {
       render() {
@@ -42,6 +59,48 @@ describe('ReactElement.jsx', () => {
     expect(element.type.someStaticMethod()).toBe('someReturnValue');
   });
 
+  // @gate enableSymbolFallbackForWWW
+  it('identifies valid elements', () => {
+    class Component extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div', {});
+      }
+    }
+
+    expect(React.isValidElement(JSXRuntime.jsx('div', {}))).toEqual(true);
+    expect(React.isValidElement(JSXRuntime.jsx(Component, {}))).toEqual(true);
+    expect(
+      React.isValidElement(JSXRuntime.jsx(JSXRuntime.Fragment, {})),
+    ).toEqual(true);
+    if (__DEV__) {
+      expect(React.isValidElement(JSXDEVRuntime.jsxDEV('div', {}))).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);
+    if (!__EXPERIMENTAL__) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
+    expect(React.isValidElement(Component)).toEqual(false);
+    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+
+    const jsonElement = JSON.stringify(JSXRuntime.jsx('div', {}));
+    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
+  });
+
   it('is indistinguishable from a plain object', () => {
     const element = JSXRuntime.jsx('div', {className: 'foo'});
     const object = {};
@@ -235,6 +294,7 @@ describe('ReactElement.jsx', () => {
     );
   });
 
+  // @gate !enableSymbolFallbackForWWW
   it('identifies elements, but not JSON, if Symbols are supported', () => {
     class Component extends React.Component {
       render() {
@@ -276,6 +336,59 @@ describe('ReactElement.jsx', () => {
     expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
   });
 
+  it('identifies elements, but not JSON, if Symbols are polyfilled', () => {
+    // Rudimentary polyfill
+    // Once all jest engines support Symbols natively we can swap this to test
+    // WITH native Symbols by default.
+    const REACT_ELEMENT_TYPE = function() {}; // fake Symbol
+    const OTHER_SYMBOL = function() {}; // another fake Symbol
+    global.Symbol = function(name) {
+      return OTHER_SYMBOL;
+    };
+    global.Symbol.for = function(key) {
+      if (key === 'react.element') {
+        return REACT_ELEMENT_TYPE;
+      }
+      return OTHER_SYMBOL;
+    };
+
+    jest.resetModules();
+
+    React = require('react');
+    JSXRuntime = require('react/jsx-runtime');
+
+    class Component extends React.Component {
+      render() {
+        return JSXRuntime.jsx('div');
+      }
+    }
+
+    expect(React.isValidElement(JSXRuntime.jsx('div', {}))).toEqual(true);
+    expect(React.isValidElement(JSXRuntime.jsx(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);
+    if (!__EXPERIMENTAL__) {
+      let factory;
+      expect(() => {
+        factory = React.createFactory('div');
+      }).toWarnDev(
+        'Warning: React.createFactory() is deprecated and will be removed in a ' +
+          'future major release. Consider using JSX or use React.createElement() ' +
+          'directly instead.',
+        {withoutStack: true},
+      );
+      expect(React.isValidElement(factory)).toEqual(false);
+    }
+    expect(React.isValidElement(Component)).toEqual(false);
+    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
+
+    const jsonElement = JSON.stringify(JSXRuntime.jsx('div', {}));
+    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
+  });
+
   it('should warn when unkeyed children are passed to jsx', () => {
     const container = document.createElement('div');
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 33261df6d76d..aafe4c74d044 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -28,6 +28,9 @@ export const enablePersistentOffscreenHostContainer = false;
 // like migrating internal callers or performance testing.
 // -----------------------------------------------------------------------------
 
+// This is blocked on adding a symbol polyfill to www.
+export const enableSymbolFallbackForWWW = false;
+
 // This rolled out to 10% public in www, so we should be able to land, but some
 // internal tests need to be updated. The open source behavior is correct.
 export const skipUnmountedBoundaries = true;
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 6ff9305fa7b0..523cc1436dfc 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -11,33 +11,72 @@
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
 
+import {enableSymbolFallbackForWWW} from './ReactFeatureFlags';
+
+const usePolyfill =
+  enableSymbolFallbackForWWW && (typeof Symbol !== 'function' || !Symbol.for);
+
 // The Symbol used to tag the ReactElement-like types.
-export const REACT_ELEMENT_TYPE = Symbol.for('react.element');
-export const REACT_PORTAL_TYPE = Symbol.for('react.portal');
-export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-export const REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-export const REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-export const REACT_CONTEXT_TYPE = Symbol.for('react.context');
-export const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-export const REACT_MEMO_TYPE = Symbol.for('react.memo');
-export const REACT_LAZY_TYPE = Symbol.for('react.lazy');
-export const REACT_SCOPE_TYPE = Symbol.for('react.scope');
-export const REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for(
-  'react.debug_trace_mode',
-);
-export const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-export const REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
-export const REACT_CACHE_TYPE = Symbol.for('react.cache');
-export const REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker');
-export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
-  'react.default_value',
-);
+export const REACT_ELEMENT_TYPE = usePolyfill
+  ? 0xeac7
+  : Symbol.for('react.element');
+export const REACT_PORTAL_TYPE = usePolyfill
+  ? 0xeaca
+  : Symbol.for('react.portal');
+export const REACT_FRAGMENT_TYPE = usePolyfill
+  ? 0xeacb
+  : Symbol.for('react.fragment');
+export const REACT_STRICT_MODE_TYPE = usePolyfill
+  ? 0xeacc
+  : Symbol.for('react.strict_mode');
+export const REACT_PROFILER_TYPE = usePolyfill
+  ? 0xead2
+  : Symbol.for('react.profiler');
+export const REACT_PROVIDER_TYPE = usePolyfill
+  ? 0xeacd
+  : Symbol.for('react.provider');
+export const REACT_CONTEXT_TYPE = usePolyfill
+  ? 0xeace
+  : Symbol.for('react.context');
+export const REACT_SERVER_CONTEXT_TYPE = usePolyfill
+  ? 0xeae6
+  : Symbol.for('react.server_context');
+export const REACT_FORWARD_REF_TYPE = usePolyfill
+  ? 0xead0
+  : Symbol.for('react.forward_ref');
+export const REACT_SUSPENSE_TYPE = usePolyfill
+  ? 0xead1
+  : Symbol.for('react.suspense');
+export const REACT_SUSPENSE_LIST_TYPE = usePolyfill
+  ? 0xead8
+  : Symbol.for('react.suspense_list');
+export const REACT_MEMO_TYPE = usePolyfill ? 0xead3 : Symbol.for('react.memo');
+export const REACT_LAZY_TYPE = usePolyfill ? 0xead4 : Symbol.for('react.lazy');
+export const REACT_SCOPE_TYPE = usePolyfill
+  ? 0xead7
+  : Symbol.for('react.scope');
+export const REACT_DEBUG_TRACING_MODE_TYPE = usePolyfill
+  ? 0xeae1
+  : Symbol.for('react.debug_trace_mode');
+export const REACT_OFFSCREEN_TYPE = usePolyfill
+  ? 0xeae2
+  : Symbol.for('react.offscreen');
+export const REACT_LEGACY_HIDDEN_TYPE = usePolyfill
+  ? 0xeae3
+  : Symbol.for('react.legacy_hidden');
+export const REACT_CACHE_TYPE = usePolyfill
+  ? 0xeae4
+  : Symbol.for('react.cache');
+export const REACT_TRACING_MARKER_TYPE = usePolyfill
+  ? 0xeae5
+  : Symbol.for('react.tracing_marker');
+export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = usePolyfill
+  ? 0xeae7
+  : Symbol.for('react.default_value');
+const MAYBE_ITERATOR_SYMBOL = usePolyfill
+  ? typeof Symbol === 'function' && Symbol.iterator
+  : Symbol.iterator;
 
-const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 
 export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
diff --git a/packages/shared/__tests__/ReactSymbols-test.internal.js b/packages/shared/__tests__/ReactSymbols-test.internal.js
index 53618ba3fe4f..df16a51c7c8f 100644
--- a/packages/shared/__tests__/ReactSymbols-test.internal.js
+++ b/packages/shared/__tests__/ReactSymbols-test.internal.js
@@ -26,4 +26,20 @@ describe('ReactSymbols', () => {
   it('Symbol values should be unique', () => {
     expectToBeUnique(Object.entries(require('shared/ReactSymbols')));
   });
+
+  // @gate enableSymbolFallbackForWWW
+  it('numeric values should be unique', () => {
+    const originalSymbolFor = global.Symbol.for;
+    global.Symbol.for = null;
+    try {
+      const entries = Object.entries(require('shared/ReactSymbols')).filter(
+        // REACT_ASYNC_MODE_TYPE and REACT_CONCURRENT_MODE_TYPE have the same numeric value
+        // for legacy backwards compatibility
+        ([key]) => key !== 'REACT_ASYNC_MODE_TYPE',
+      );
+      expectToBeUnique(entries);
+    } finally {
+      global.Symbol.for = originalSymbolFor;
+    }
+  });
 });
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index facc9c7d7836..f2ce77374235 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -83,6 +83,7 @@ export const enableServerContext = false;
 export const enableUseMutableSource = true;
 
 export const enableTransitionTracing = false;
+export const enableSymbolFallbackForWWW = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 94bd83865896..43855df94f90 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -74,6 +74,7 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
+export const enableSymbolFallbackForWWW = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b0c81a7a8bb3..4283aa16e120 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -74,6 +74,7 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
+export const enableSymbolFallbackForWWW = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index e05dc109843c..938b4d136d73 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -72,6 +72,7 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
+export const enableSymbolFallbackForWWW = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 042c2519043b..7ad5cc56d9d9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -76,6 +76,7 @@ export const enableServerContext = false;
 export const enableUseMutableSource = true;
 
 export const enableTransitionTracing = false;
+export const enableSymbolFallbackForWWW = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 6b640311000f..0f65c001e540 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -74,6 +74,7 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
+export const enableSymbolFallbackForWWW = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 5e41ca9992da..93d9860413db 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -75,6 +75,7 @@ export const enableServerContext = false;
 export const enableUseMutableSource = true;
 
 export const enableTransitionTracing = false;
+export const enableSymbolFallbackForWWW = false;
 
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 1f7de0b6b5a1..cfc32d6bacff 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -29,7 +29,7 @@ export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __
 export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
-
+export const enableSymbolFallbackForWWW = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index d5edae5563a5..a108f7a144b9 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -115,6 +115,7 @@ export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
 
 export const enableTransitionTracing = false;
 
+export const enableSymbolFallbackForWWW = true;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 87424982afc1..598a53666f60 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -31,9 +31,19 @@ import {
   enableTransitionTracing,
   enableDebugTracing,
   enableLegacyHidden,
+  enableSymbolFallbackForWWW,
 } from './ReactFeatureFlags';
 
-const REACT_MODULE_REFERENCE: Symbol = Symbol.for('react.module.reference');
+let REACT_MODULE_REFERENCE;
+if (enableSymbolFallbackForWWW) {
+  if (typeof Symbol === 'function') {
+    REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+  } else {
+    REACT_MODULE_REFERENCE = 0;
+  }
+} else {
+  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
+}
 
 export default function isValidElementType(type: mixed) {
   if (typeof type === 'string' || typeof type === 'function') {

From 1e748b4528cec1e5e8c8413f8b2e9bcde999d981 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Apr 2022 10:17:52 -0400
Subject: [PATCH 1321/1603] Land enableLazyElements flag (#24407)

This flag is already enabled on all relevant surfaces. We can remove it.
---
 .../src/ReactChildFiber.new.js                | 79 ++++++++-----------
 .../src/ReactChildFiber.old.js                | 79 ++++++++-----------
 .../src/__tests__/ReactLazy-test.internal.js  |  4 -
 packages/react-server/src/ReactFizzServer.js  | 15 ++--
 packages/shared/ReactFeatureFlags.js          |  1 -
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 13 files changed, 68 insertions(+), 118 deletions(-)

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 55246de7c59b..e7eb67328af0 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -23,10 +23,7 @@ import {
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
 import isArray from 'shared/isArray';
-import {
-  warnAboutStringRefs,
-  enableLazyElements,
-} from 'shared/ReactFeatureFlags';
+import {warnAboutStringRefs} from 'shared/ReactFeatureFlags';
 import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
@@ -414,8 +411,7 @@ function ChildReconciler(shouldTrackSideEffects) {
         // 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.
-        (enableLazyElements &&
-          typeof elementType === 'object' &&
+        (typeof elementType === 'object' &&
           elementType !== null &&
           elementType.$$typeof === REACT_LAZY_TYPE &&
           resolveLazy(elementType) === current.type)
@@ -530,11 +526,9 @@ function ChildReconciler(shouldTrackSideEffects) {
           return created;
         }
         case REACT_LAZY_TYPE: {
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            return createChild(returnFiber, init(payload), lanes);
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          return createChild(returnFiber, init(payload), lanes);
         }
       }
 
@@ -601,11 +595,9 @@ function ChildReconciler(shouldTrackSideEffects) {
           }
         }
         case REACT_LAZY_TYPE: {
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            return updateSlot(returnFiber, oldFiber, init(payload), lanes);
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          return updateSlot(returnFiber, oldFiber, init(payload), lanes);
         }
       }
 
@@ -663,17 +655,15 @@ function ChildReconciler(shouldTrackSideEffects) {
           return updatePortal(returnFiber, matchedFiber, newChild, lanes);
         }
         case REACT_LAZY_TYPE:
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            return updateFromMap(
-              existingChildren,
-              returnFiber,
-              newIdx,
-              init(payload),
-              lanes,
-            );
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          return updateFromMap(
+            existingChildren,
+            returnFiber,
+            newIdx,
+            init(payload),
+            lanes,
+          );
       }
 
       if (isArray(newChild) || getIteratorFn(newChild)) {
@@ -732,14 +722,10 @@ function ChildReconciler(shouldTrackSideEffects) {
           );
           break;
         case REACT_LAZY_TYPE:
-          if (enableLazyElements) {
-            const payload = child._payload;
-            const init = (child._init: any);
-            warnOnInvalidKey(init(payload), knownKeys, returnFiber);
-            break;
-          }
-        // We intentionally fallthrough here if enableLazyElements is not on.
-        // eslint-disable-next-lined no-fallthrough
+          const payload = child._payload;
+          const init = (child._init: any);
+          warnOnInvalidKey(init(payload), knownKeys, returnFiber);
+          break;
         default:
           break;
       }
@@ -1175,8 +1161,7 @@ function ChildReconciler(shouldTrackSideEffects) {
             // 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.
-            (enableLazyElements &&
-              typeof elementType === 'object' &&
+            (typeof elementType === 'object' &&
               elementType !== null &&
               elementType.$$typeof === REACT_LAZY_TYPE &&
               resolveLazy(elementType) === child.type)
@@ -1302,17 +1287,15 @@ function ChildReconciler(shouldTrackSideEffects) {
             ),
           );
         case REACT_LAZY_TYPE:
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            // TODO: This function is supposed to be non-recursive.
-            return reconcileChildFibers(
-              returnFiber,
-              currentFirstChild,
-              init(payload),
-              lanes,
-            );
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          // TODO: This function is supposed to be non-recursive.
+          return reconcileChildFibers(
+            returnFiber,
+            currentFirstChild,
+            init(payload),
+            lanes,
+          );
       }
 
       if (isArray(newChild)) {
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index ae45c2eadcfa..320924d6030e 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -23,10 +23,7 @@ import {
 } from 'shared/ReactSymbols';
 import {ClassComponent, HostText, HostPortal, Fragment} from './ReactWorkTags';
 import isArray from 'shared/isArray';
-import {
-  warnAboutStringRefs,
-  enableLazyElements,
-} from 'shared/ReactFeatureFlags';
+import {warnAboutStringRefs} from 'shared/ReactFeatureFlags';
 import {checkPropStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
@@ -414,8 +411,7 @@ function ChildReconciler(shouldTrackSideEffects) {
         // 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.
-        (enableLazyElements &&
-          typeof elementType === 'object' &&
+        (typeof elementType === 'object' &&
           elementType !== null &&
           elementType.$$typeof === REACT_LAZY_TYPE &&
           resolveLazy(elementType) === current.type)
@@ -530,11 +526,9 @@ function ChildReconciler(shouldTrackSideEffects) {
           return created;
         }
         case REACT_LAZY_TYPE: {
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            return createChild(returnFiber, init(payload), lanes);
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          return createChild(returnFiber, init(payload), lanes);
         }
       }
 
@@ -601,11 +595,9 @@ function ChildReconciler(shouldTrackSideEffects) {
           }
         }
         case REACT_LAZY_TYPE: {
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            return updateSlot(returnFiber, oldFiber, init(payload), lanes);
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          return updateSlot(returnFiber, oldFiber, init(payload), lanes);
         }
       }
 
@@ -663,17 +655,15 @@ function ChildReconciler(shouldTrackSideEffects) {
           return updatePortal(returnFiber, matchedFiber, newChild, lanes);
         }
         case REACT_LAZY_TYPE:
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            return updateFromMap(
-              existingChildren,
-              returnFiber,
-              newIdx,
-              init(payload),
-              lanes,
-            );
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          return updateFromMap(
+            existingChildren,
+            returnFiber,
+            newIdx,
+            init(payload),
+            lanes,
+          );
       }
 
       if (isArray(newChild) || getIteratorFn(newChild)) {
@@ -732,14 +722,10 @@ function ChildReconciler(shouldTrackSideEffects) {
           );
           break;
         case REACT_LAZY_TYPE:
-          if (enableLazyElements) {
-            const payload = child._payload;
-            const init = (child._init: any);
-            warnOnInvalidKey(init(payload), knownKeys, returnFiber);
-            break;
-          }
-        // We intentionally fallthrough here if enableLazyElements is not on.
-        // eslint-disable-next-lined no-fallthrough
+          const payload = child._payload;
+          const init = (child._init: any);
+          warnOnInvalidKey(init(payload), knownKeys, returnFiber);
+          break;
         default:
           break;
       }
@@ -1175,8 +1161,7 @@ function ChildReconciler(shouldTrackSideEffects) {
             // 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.
-            (enableLazyElements &&
-              typeof elementType === 'object' &&
+            (typeof elementType === 'object' &&
               elementType !== null &&
               elementType.$$typeof === REACT_LAZY_TYPE &&
               resolveLazy(elementType) === child.type)
@@ -1302,17 +1287,15 @@ function ChildReconciler(shouldTrackSideEffects) {
             ),
           );
         case REACT_LAZY_TYPE:
-          if (enableLazyElements) {
-            const payload = newChild._payload;
-            const init = newChild._init;
-            // TODO: This function is supposed to be non-recursive.
-            return reconcileChildFibers(
-              returnFiber,
-              currentFirstChild,
-              init(payload),
-              lanes,
-            );
-          }
+          const payload = newChild._payload;
+          const init = newChild._init;
+          // TODO: This function is supposed to be non-recursive.
+          return reconcileChildFibers(
+            returnFiber,
+            currentFirstChild,
+            init(payload),
+            lanes,
+          );
       }
 
       if (isArray(newChild)) {
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 769679c9a701..01e974225936 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -1268,7 +1268,6 @@ describe('ReactLazy', () => {
     expect(componentStackMessage).toContain('in Lazy');
   });
 
-  // @gate enableLazyElements
   it('mount and reorder lazy types', async () => {
     class Child extends React.Component {
       componentWillUnmount() {
@@ -1385,7 +1384,6 @@ describe('ReactLazy', () => {
     expect(root).toMatchRenderedOutput('ba');
   });
 
-  // @gate enableLazyElements
   it('mount and reorder lazy types (legacy mode)', async () => {
     class Child extends React.Component {
       componentDidMount() {
@@ -1474,7 +1472,6 @@ describe('ReactLazy', () => {
     expect(root).toMatchRenderedOutput('ba');
   });
 
-  // @gate enableLazyElements
   it('mount and reorder lazy elements', async () => {
     class Child extends React.Component {
       componentDidMount() {
@@ -1556,7 +1553,6 @@ describe('ReactLazy', () => {
     expect(root).toMatchRenderedOutput('ba');
   });
 
-  // @gate enableLazyElements
   it('mount and reorder lazy elements (legacy mode)', async () => {
     class Child extends React.Component {
       componentDidMount() {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 018235aae087..d206a69e48c3 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -113,7 +113,6 @@ import {
   disableModulePatternComponents,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
-  enableLazyElements,
   enableSuspenseAvoidThisFallbackFizz,
 } from 'shared/ReactFeatureFlags';
 
@@ -1162,14 +1161,12 @@ function renderNodeDestructive(
         );
       // eslint-disable-next-line-no-fallthrough
       case REACT_LAZY_TYPE: {
-        if (enableLazyElements) {
-          const lazyNode: LazyComponentType<any, any> = (node: any);
-          const payload = lazyNode._payload;
-          const init = lazyNode._init;
-          const resolvedNode = init(payload);
-          renderNodeDestructive(request, task, resolvedNode);
-          return;
-        }
+        const lazyNode: LazyComponentType<any, any> = (node: any);
+        const payload = lazyNode._payload;
+        const init = lazyNode._init;
+        const resolvedNode = init(payload);
+        renderNodeDestructive(request, task, resolvedNode);
+        return;
       }
     }
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index aafe4c74d044..f7529132aef7 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -16,7 +16,6 @@
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const warnAboutDeprecatedLifecycles = true;
-export const enableLazyElements = true;
 export const enableComponentStackLocations = true;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 export const enablePersistentOffscreenHostContainer = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f2ce77374235..91795dca3093 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -28,7 +28,6 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableLazyElements = false;
 export const enableCache = false;
 export const enableCacheElement = true;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 43855df94f90..3d816e86143c 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -22,7 +22,6 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = __PROFILE__;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableLazyElements = false;
 export const enableCache = false;
 export const enableCacheElement = false;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 4283aa16e120..1aeb14817ad7 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -22,7 +22,6 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
 export const enableCacheElement = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 938b4d136d73..9c19dc2a47c2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -22,7 +22,6 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableLazyElements = false;
 export const enableCache = true;
 export const enableCacheElement = true;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 7ad5cc56d9d9..75e1df4dc34b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -22,7 +22,6 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableLazyElements = false;
 export const enableCache = true;
 export const enableCacheElement = true;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 0f65c001e540..262e67017da1 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -22,7 +22,6 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
-export const enableLazyElements = false;
 export const enableCache = __EXPERIMENTAL__;
 export const enableCacheElement = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 93d9860413db..ed97f8e51ebc 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -22,7 +22,6 @@ export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
-export const enableLazyElements = false;
 export const enableCache = true;
 export const enableCacheElement = true;
 export const disableJavaScriptURLs = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a108f7a144b9..5c64417f0bac 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -70,7 +70,6 @@ export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 
-export const enableLazyElements = true;
 export const enableCache = true;
 export const enableCacheElement = true;
 

From 392808a1f7fa2909492a742116ba8b549e862d70 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Apr 2022 10:21:36 -0400
Subject: [PATCH 1322/1603] Land enableClientRenderFallbackOnTextMismatch flag
 (#24405)

This flag is already enabled on all relevant surfaces. We can remove it.
---
 .../__tests__/ReactServerRendering-test.js    |  37 -----
 .../src/client/ReactDOMHostConfig.js          |  25 ++-
 .../src/server/ReactPartialRenderer.js        |  85 +++++-----
 .../src/ReactFiberBeginWork.new.js            | 151 +++++++++---------
 .../src/ReactFiberBeginWork.old.js            | 151 +++++++++---------
 .../src/ReactFiberCommitWork.new.js           |  45 +++---
 .../src/ReactFiberCommitWork.old.js           |  45 +++---
 .../src/ReactFiberCompleteWork.new.js         | 136 ++++++++--------
 .../src/ReactFiberCompleteWork.old.js         | 136 ++++++++--------
 .../src/ReactFiberHydrationContext.new.js     |  53 +++---
 .../src/ReactFiberHydrationContext.old.js     |  53 +++---
 .../src/ReactFiberNewContext.new.js           |  11 +-
 .../src/ReactFiberNewContext.old.js           |  11 +-
 .../src/ReactFiberUnwindWork.new.js           |  28 ++--
 .../src/ReactFiberUnwindWork.old.js           |  28 ++--
 .../src/ReactFiberWorkLoop.new.js             |  37 ++---
 .../src/ReactFiberWorkLoop.old.js             |  37 ++---
 packages/shared/ReactFeatureFlags.js          |   1 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 26 files changed, 473 insertions(+), 605 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
index 0c057c5fade0..23be43a7735a 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -14,8 +14,6 @@ let React;
 let ReactDOMServer;
 let PropTypes;
 let ReactCurrentDispatcher;
-const enableSuspenseServerRenderer = require('shared/ReactFeatureFlags')
-  .enableSuspenseServerRenderer;
 
 describe('ReactDOMServer', () => {
   beforeEach(() => {
@@ -678,41 +676,6 @@ describe('ReactDOMServer', () => {
     expect(markup).toBe('<div></div>');
   });
 
-  if (!enableSuspenseServerRenderer) {
-    it('throws for unsupported types on the server', () => {
-      expect(() => {
-        ReactDOMServer.renderToString(<React.Suspense />);
-      }).toThrow('ReactDOMServer does not yet support Suspense.');
-
-      async function fakeImport(result) {
-        return {default: result};
-      }
-
-      expect(() => {
-        const LazyFoo = React.lazy(() =>
-          fakeImport(
-            new Promise(resolve =>
-              resolve(function Foo() {
-                return <div />;
-              }),
-            ),
-          ),
-        );
-        ReactDOMServer.renderToString(<LazyFoo />);
-      }).toThrow('ReactDOMServer does not yet support Suspense.');
-    });
-
-    it('throws when suspending on the server', () => {
-      function AsyncFoo() {
-        throw new Promise(() => {});
-      }
-
-      expect(() => {
-        ReactDOMServer.renderToString(<AsyncFoo />);
-      }).toThrow('ReactDOMServer does not yet support Suspense.');
-    });
-  }
-
   it('does not get confused by throwing null', () => {
     function Bad() {
       // eslint-disable-next-line no-throw-literal
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index d27bdff4305a..0cf031776399 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -63,7 +63,6 @@ import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
   enableClientRenderFallbackOnHydrationMismatch,
-  enableSuspenseServerRenderer,
   enableCreateEventHandleAPI,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
@@ -747,19 +746,17 @@ function getNextHydratable(node) {
     if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
       break;
     }
-    if (enableSuspenseServerRenderer) {
-      if (nodeType === COMMENT_NODE) {
-        const nodeData = (node: any).data;
-        if (
-          nodeData === SUSPENSE_START_DATA ||
-          nodeData === SUSPENSE_FALLBACK_START_DATA ||
-          nodeData === SUSPENSE_PENDING_START_DATA
-        ) {
-          break;
-        }
-        if (nodeData === SUSPENSE_END_DATA) {
-          return null;
-        }
+    if (nodeType === COMMENT_NODE) {
+      const nodeData = (node: any).data;
+      if (
+        nodeData === SUSPENSE_START_DATA ||
+        nodeData === SUSPENSE_FALLBACK_START_DATA ||
+        nodeData === SUSPENSE_PENDING_START_DATA
+      ) {
+        break;
+      }
+      if (nodeData === SUSPENSE_END_DATA) {
+        return null;
       }
     }
   }
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
index 41c288568043..03f5355ef0e7 100644
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ b/packages/react-dom/src/server/ReactPartialRenderer.js
@@ -21,7 +21,6 @@ import {
   warnAboutDeprecatedLifecycles,
   disableLegacyContext,
   disableModulePatternComponents,
-  enableSuspenseServerRenderer,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -965,21 +964,17 @@ class ReactDOMServerRenderer {
           outBuffer += this.render(child, frame.context, frame.domNamespace);
         } catch (err) {
           if (err != null && typeof err.then === 'function') {
-            if (enableSuspenseServerRenderer) {
-              if (this.suspenseDepth <= 0) {
-                throw new Error(
-                  // TODO: include component name. This is a bit tricky with current factoring.
-                  'A React component suspended while rendering, but no fallback UI was specified.\n' +
-                    '\n' +
-                    'Add a <Suspense fallback=...> component higher in the tree to ' +
-                    'provide a loading indicator or placeholder to display.',
-                );
-              }
-
-              suspended = true;
-            } else {
-              throw new Error('ReactDOMServer does not yet support Suspense.');
+            if (this.suspenseDepth <= 0) {
+              throw new Error(
+                // TODO: include component name. This is a bit tricky with current factoring.
+                'A React component suspended while rendering, but no fallback UI was specified.\n' +
+                  '\n' +
+                  'Add a <Suspense fallback=...> component higher in the tree to ' +
+                  'provide a loading indicator or placeholder to display.',
+              );
             }
+
+            suspended = true;
           } else {
             throw err;
           }
@@ -1097,39 +1092,35 @@ class ReactDOMServerRenderer {
           return '';
         }
         case REACT_SUSPENSE_TYPE: {
-          if (enableSuspenseServerRenderer) {
-            const fallback = ((nextChild: any): ReactElement).props.fallback;
-            const fallbackChildren = toArray(fallback);
-            const nextChildren = toArray(
-              ((nextChild: any): ReactElement).props.children,
-            );
-            const fallbackFrame: Frame = {
-              type: null,
-              domNamespace: parentNamespace,
-              children: fallbackChildren,
-              childIndex: 0,
-              context: context,
-              footer: '<!--/$-->',
-            };
-            const frame: Frame = {
-              fallbackFrame,
-              type: REACT_SUSPENSE_TYPE,
-              domNamespace: parentNamespace,
-              children: nextChildren,
-              childIndex: 0,
-              context: context,
-              footer: '<!--/$-->',
-            };
-            if (__DEV__) {
-              ((frame: any): FrameDev).debugElementStack = [];
-              ((fallbackFrame: any): FrameDev).debugElementStack = [];
-            }
-            this.stack.push(frame);
-            this.suspenseDepth++;
-            return '<!--$-->';
-          } else {
-            throw new Error('ReactDOMServer does not yet support Suspense.');
+          const fallback = ((nextChild: any): ReactElement).props.fallback;
+          const fallbackChildren = toArray(fallback);
+          const nextChildren = toArray(
+            ((nextChild: any): ReactElement).props.children,
+          );
+          const fallbackFrame: Frame = {
+            type: null,
+            domNamespace: parentNamespace,
+            children: fallbackChildren,
+            childIndex: 0,
+            context: context,
+            footer: '<!--/$-->',
+          };
+          const frame: Frame = {
+            fallbackFrame,
+            type: REACT_SUSPENSE_TYPE,
+            domNamespace: parentNamespace,
+            children: nextChildren,
+            childIndex: 0,
+            context: context,
+            footer: '<!--/$-->',
+          };
+          if (__DEV__) {
+            ((frame: any): FrameDev).debugElementStack = [];
+            ((fallbackFrame: any): FrameDev).debugElementStack = [];
           }
+          this.stack.push(frame);
+          this.suspenseDepth++;
+          return '<!--$-->';
         }
         // eslint-disable-next-line-no-fallthrough
         case REACT_SCOPE_TYPE: {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 88876f05f7d8..442c95b65125 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -96,7 +96,6 @@ import {
   disableModulePatternComponents,
   enableProfilerCommitHooks,
   enableProfilerTimer,
-  enableSuspenseServerRenderer,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableCache,
@@ -2134,17 +2133,15 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     // If we're currently hydrating, try to hydrate this boundary.
     tryToClaimNextHydratableInstance(workInProgress);
     // This could've been a dehydrated suspense component.
-    if (enableSuspenseServerRenderer) {
-      const suspenseState: null | SuspenseState = workInProgress.memoizedState;
-      if (suspenseState !== null) {
-        const dehydrated = suspenseState.dehydrated;
-        if (dehydrated !== null) {
-          return mountDehydratedSuspenseComponent(
-            workInProgress,
-            dehydrated,
-            renderLanes,
-          );
-        }
+    const suspenseState: null | SuspenseState = workInProgress.memoizedState;
+    if (suspenseState !== null) {
+      const dehydrated = suspenseState.dehydrated;
+      if (dehydrated !== null) {
+        return mountDehydratedSuspenseComponent(
+          workInProgress,
+          dehydrated,
+          renderLanes,
+        );
       }
     }
 
@@ -2220,59 +2217,57 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // The current tree is already showing a fallback
 
       // Special path for hydration
-      if (enableSuspenseServerRenderer) {
-        const dehydrated = prevState.dehydrated;
-        if (dehydrated !== null) {
-          if (!didSuspend) {
-            return updateDehydratedSuspenseComponent(
-              current,
-              workInProgress,
-              dehydrated,
-              prevState,
-              renderLanes,
-            );
-          } else if (workInProgress.flags & ForceClientRender) {
-            // Something errored during hydration. Try again without hydrating.
-            workInProgress.flags &= ~ForceClientRender;
-            return retrySuspenseComponentWithoutHydrating(
-              current,
-              workInProgress,
-              renderLanes,
-              new Error(
-                'There was an error while hydrating this Suspense boundary. ' +
-                  'Switched to client rendering.',
-              ),
-            );
-          } else if (
-            (workInProgress.memoizedState: null | SuspenseState) !== null
-          ) {
-            // Something suspended and we should still be in dehydrated mode.
-            // Leave the existing child in place.
-            workInProgress.child = current.child;
-            // The dehydrated completion pass expects this flag to be there
-            // but the normal suspense pass doesn't.
-            workInProgress.flags |= DidCapture;
-            return null;
-          } else {
-            // Suspended but we should no longer be in dehydrated mode.
-            // Therefore we now have to render the fallback.
-            renderDidSuspendDelayIfPossible();
-            const nextPrimaryChildren = nextProps.children;
-            const nextFallbackChildren = nextProps.fallback;
-            const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
-              current,
-              workInProgress,
-              nextPrimaryChildren,
-              nextFallbackChildren,
-              renderLanes,
-            );
-            const primaryChildFragment: Fiber = (workInProgress.child: any);
-            primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
-              renderLanes,
-            );
-            workInProgress.memoizedState = SUSPENDED_MARKER;
-            return fallbackChildFragment;
-          }
+      const dehydrated = prevState.dehydrated;
+      if (dehydrated !== null) {
+        if (!didSuspend) {
+          return updateDehydratedSuspenseComponent(
+            current,
+            workInProgress,
+            dehydrated,
+            prevState,
+            renderLanes,
+          );
+        } else if (workInProgress.flags & ForceClientRender) {
+          // Something errored during hydration. Try again without hydrating.
+          workInProgress.flags &= ~ForceClientRender;
+          return retrySuspenseComponentWithoutHydrating(
+            current,
+            workInProgress,
+            renderLanes,
+            new Error(
+              'There was an error while hydrating this Suspense boundary. ' +
+                'Switched to client rendering.',
+            ),
+          );
+        } else if (
+          (workInProgress.memoizedState: null | SuspenseState) !== null
+        ) {
+          // Something suspended and we should still be in dehydrated mode.
+          // Leave the existing child in place.
+          workInProgress.child = current.child;
+          // The dehydrated completion pass expects this flag to be there
+          // but the normal suspense pass doesn't.
+          workInProgress.flags |= DidCapture;
+          return null;
+        } else {
+          // Suspended but we should no longer be in dehydrated mode.
+          // Therefore we now have to render the fallback.
+          renderDidSuspendDelayIfPossible();
+          const nextPrimaryChildren = nextProps.children;
+          const nextFallbackChildren = nextProps.fallback;
+          const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
+            current,
+            workInProgress,
+            nextPrimaryChildren,
+            nextFallbackChildren,
+            renderLanes,
+          );
+          const primaryChildFragment: Fiber = (workInProgress.child: any);
+          primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
+            renderLanes,
+          );
+          workInProgress.memoizedState = SUSPENDED_MARKER;
+          return fallbackChildFragment;
         }
       }
 
@@ -3657,20 +3652,18 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case SuspenseComponent: {
       const state: SuspenseState | null = workInProgress.memoizedState;
       if (state !== null) {
-        if (enableSuspenseServerRenderer) {
-          if (state.dehydrated !== null) {
-            pushSuspenseContext(
-              workInProgress,
-              setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-            );
-            // We know that this component will suspend again because if it has
-            // been unsuspended it has committed as a resolved Suspense component.
-            // If it needs to be retried, it should have work scheduled on it.
-            workInProgress.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 (state.dehydrated !== null) {
+          pushSuspenseContext(
+            workInProgress,
+            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+          );
+          // We know that this component will suspend again because if it has
+          // been unsuspended it has committed as a resolved Suspense component.
+          // If it needs to be retried, it should have work scheduled on it.
+          workInProgress.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
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 418b714117e8..1632501b26db 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -96,7 +96,6 @@ import {
   disableModulePatternComponents,
   enableProfilerCommitHooks,
   enableProfilerTimer,
-  enableSuspenseServerRenderer,
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableCache,
@@ -2134,17 +2133,15 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     // If we're currently hydrating, try to hydrate this boundary.
     tryToClaimNextHydratableInstance(workInProgress);
     // This could've been a dehydrated suspense component.
-    if (enableSuspenseServerRenderer) {
-      const suspenseState: null | SuspenseState = workInProgress.memoizedState;
-      if (suspenseState !== null) {
-        const dehydrated = suspenseState.dehydrated;
-        if (dehydrated !== null) {
-          return mountDehydratedSuspenseComponent(
-            workInProgress,
-            dehydrated,
-            renderLanes,
-          );
-        }
+    const suspenseState: null | SuspenseState = workInProgress.memoizedState;
+    if (suspenseState !== null) {
+      const dehydrated = suspenseState.dehydrated;
+      if (dehydrated !== null) {
+        return mountDehydratedSuspenseComponent(
+          workInProgress,
+          dehydrated,
+          renderLanes,
+        );
       }
     }
 
@@ -2220,59 +2217,57 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // The current tree is already showing a fallback
 
       // Special path for hydration
-      if (enableSuspenseServerRenderer) {
-        const dehydrated = prevState.dehydrated;
-        if (dehydrated !== null) {
-          if (!didSuspend) {
-            return updateDehydratedSuspenseComponent(
-              current,
-              workInProgress,
-              dehydrated,
-              prevState,
-              renderLanes,
-            );
-          } else if (workInProgress.flags & ForceClientRender) {
-            // Something errored during hydration. Try again without hydrating.
-            workInProgress.flags &= ~ForceClientRender;
-            return retrySuspenseComponentWithoutHydrating(
-              current,
-              workInProgress,
-              renderLanes,
-              new Error(
-                'There was an error while hydrating this Suspense boundary. ' +
-                  'Switched to client rendering.',
-              ),
-            );
-          } else if (
-            (workInProgress.memoizedState: null | SuspenseState) !== null
-          ) {
-            // Something suspended and we should still be in dehydrated mode.
-            // Leave the existing child in place.
-            workInProgress.child = current.child;
-            // The dehydrated completion pass expects this flag to be there
-            // but the normal suspense pass doesn't.
-            workInProgress.flags |= DidCapture;
-            return null;
-          } else {
-            // Suspended but we should no longer be in dehydrated mode.
-            // Therefore we now have to render the fallback.
-            renderDidSuspendDelayIfPossible();
-            const nextPrimaryChildren = nextProps.children;
-            const nextFallbackChildren = nextProps.fallback;
-            const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
-              current,
-              workInProgress,
-              nextPrimaryChildren,
-              nextFallbackChildren,
-              renderLanes,
-            );
-            const primaryChildFragment: Fiber = (workInProgress.child: any);
-            primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
-              renderLanes,
-            );
-            workInProgress.memoizedState = SUSPENDED_MARKER;
-            return fallbackChildFragment;
-          }
+      const dehydrated = prevState.dehydrated;
+      if (dehydrated !== null) {
+        if (!didSuspend) {
+          return updateDehydratedSuspenseComponent(
+            current,
+            workInProgress,
+            dehydrated,
+            prevState,
+            renderLanes,
+          );
+        } else if (workInProgress.flags & ForceClientRender) {
+          // Something errored during hydration. Try again without hydrating.
+          workInProgress.flags &= ~ForceClientRender;
+          return retrySuspenseComponentWithoutHydrating(
+            current,
+            workInProgress,
+            renderLanes,
+            new Error(
+              'There was an error while hydrating this Suspense boundary. ' +
+                'Switched to client rendering.',
+            ),
+          );
+        } else if (
+          (workInProgress.memoizedState: null | SuspenseState) !== null
+        ) {
+          // Something suspended and we should still be in dehydrated mode.
+          // Leave the existing child in place.
+          workInProgress.child = current.child;
+          // The dehydrated completion pass expects this flag to be there
+          // but the normal suspense pass doesn't.
+          workInProgress.flags |= DidCapture;
+          return null;
+        } else {
+          // Suspended but we should no longer be in dehydrated mode.
+          // Therefore we now have to render the fallback.
+          renderDidSuspendDelayIfPossible();
+          const nextPrimaryChildren = nextProps.children;
+          const nextFallbackChildren = nextProps.fallback;
+          const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
+            current,
+            workInProgress,
+            nextPrimaryChildren,
+            nextFallbackChildren,
+            renderLanes,
+          );
+          const primaryChildFragment: Fiber = (workInProgress.child: any);
+          primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
+            renderLanes,
+          );
+          workInProgress.memoizedState = SUSPENDED_MARKER;
+          return fallbackChildFragment;
         }
       }
 
@@ -3657,20 +3652,18 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     case SuspenseComponent: {
       const state: SuspenseState | null = workInProgress.memoizedState;
       if (state !== null) {
-        if (enableSuspenseServerRenderer) {
-          if (state.dehydrated !== null) {
-            pushSuspenseContext(
-              workInProgress,
-              setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-            );
-            // We know that this component will suspend again because if it has
-            // been unsuspended it has committed as a resolved Suspense component.
-            // If it needs to be retried, it should have work scheduled on it.
-            workInProgress.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 (state.dehydrated !== null) {
+          pushSuspenseContext(
+            workInProgress,
+            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
+          );
+          // We know that this component will suspend again because if it has
+          // been unsuspended it has committed as a resolved Suspense component.
+          // If it needs to be retried, it should have work scheduled on it.
+          workInProgress.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
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 2cb02b2a5466..6712e27bd28e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -34,7 +34,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableSchedulingProfiler,
-  enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
   enableStrictEffects,
@@ -1652,33 +1651,31 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case DehydratedFragment: {
-      if (enableSuspenseServerRenderer) {
-        if (enableSuspenseCallback) {
-          const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-          if (hydrationCallbacks !== null) {
-            const onDeleted = hydrationCallbacks.onDeleted;
-            if (onDeleted) {
-              onDeleted((deletedFiber.stateNode: SuspenseInstance));
-            }
+      if (enableSuspenseCallback) {
+        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+        if (hydrationCallbacks !== null) {
+          const onDeleted = hydrationCallbacks.onDeleted;
+          if (onDeleted) {
+            onDeleted((deletedFiber.stateNode: SuspenseInstance));
           }
         }
+      }
 
-        // Dehydrated fragments don't have any children
+      // 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),
-              );
-            }
+      // 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),
+            );
           }
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index fbd3873fa54f..a00355b6f5fc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -34,7 +34,6 @@ import {
   enableProfilerCommitHooks,
   enableProfilerNestedUpdatePhase,
   enableSchedulingProfiler,
-  enableSuspenseServerRenderer,
   enableSuspenseCallback,
   enableScopeAPI,
   enableStrictEffects,
@@ -1652,33 +1651,31 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case DehydratedFragment: {
-      if (enableSuspenseServerRenderer) {
-        if (enableSuspenseCallback) {
-          const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-          if (hydrationCallbacks !== null) {
-            const onDeleted = hydrationCallbacks.onDeleted;
-            if (onDeleted) {
-              onDeleted((deletedFiber.stateNode: SuspenseInstance));
-            }
+      if (enableSuspenseCallback) {
+        const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+        if (hydrationCallbacks !== null) {
+          const onDeleted = hydrationCallbacks.onDeleted;
+          if (onDeleted) {
+            onDeleted((deletedFiber.stateNode: SuspenseInstance));
           }
         }
+      }
 
-        // Dehydrated fragments don't have any children
+      // 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),
-              );
-            }
+      // 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),
+            );
           }
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 6beb7eadce37..683d29ab3c88 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -138,7 +138,6 @@ import {
 } from './ReactFiberHydrationContext.new';
 import {
   enableSuspenseCallback,
-  enableSuspenseServerRenderer,
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
@@ -1066,85 +1065,82 @@ function completeWork(
       popSuspenseContext(workInProgress);
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
-      if (enableSuspenseServerRenderer) {
-        if (
-          enableClientRenderFallbackOnHydrationMismatch &&
-          hasUnhydratedTailNodes() &&
-          (workInProgress.mode & ConcurrentMode) !== NoMode &&
-          (workInProgress.flags & DidCapture) === NoFlags
-        ) {
-          warnIfUnhydratedTailNodes(workInProgress);
-          resetHydrationState();
-          workInProgress.flags |=
-            ForceClientRender | Incomplete | ShouldCapture;
-          return 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.
-          const wasHydrated = popHydrationState(workInProgress);
-          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 Flow doesn't support type casting in combination with the -= operator
-                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                  }
+      if (
+        enableClientRenderFallbackOnHydrationMismatch &&
+        hasUnhydratedTailNodes() &&
+        (workInProgress.mode & ConcurrentMode) !== NoMode &&
+        (workInProgress.flags & DidCapture) === NoFlags
+      ) {
+        warnIfUnhydratedTailNodes(workInProgress);
+        resetHydrationState();
+        workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+        return 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.
+        const wasHydrated = popHydrationState(workInProgress);
+        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 Flow doesn't support type casting in combination with the -= operator
+                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                 }
               }
             }
-            return null;
-          } else {
-            // 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.
-              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 Flow doesn't support type casting in combination with the -= operator
-                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                  }
+          }
+          return null;
+        } else {
+          // 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.
+            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 Flow doesn't support type casting in combination with the -= operator
+                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                 }
               }
             }
-            return null;
           }
+          return null;
         }
-
-        // 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.
-        upgradeHydrationErrorsToRecoverable();
       }
 
+      // 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.
+      upgradeHydrationErrorsToRecoverable();
+
       if ((workInProgress.flags & DidCapture) !== NoFlags) {
         // Something suspended. Re-render with the fallback children.
         workInProgress.lanes = renderLanes;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index fc9414efc279..549e3da16b03 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -138,7 +138,6 @@ import {
 } from './ReactFiberHydrationContext.old';
 import {
   enableSuspenseCallback,
-  enableSuspenseServerRenderer,
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
@@ -1066,85 +1065,82 @@ function completeWork(
       popSuspenseContext(workInProgress);
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
-      if (enableSuspenseServerRenderer) {
-        if (
-          enableClientRenderFallbackOnHydrationMismatch &&
-          hasUnhydratedTailNodes() &&
-          (workInProgress.mode & ConcurrentMode) !== NoMode &&
-          (workInProgress.flags & DidCapture) === NoFlags
-        ) {
-          warnIfUnhydratedTailNodes(workInProgress);
-          resetHydrationState();
-          workInProgress.flags |=
-            ForceClientRender | Incomplete | ShouldCapture;
-          return 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.
-          const wasHydrated = popHydrationState(workInProgress);
-          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 Flow doesn't support type casting in combination with the -= operator
-                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                  }
+      if (
+        enableClientRenderFallbackOnHydrationMismatch &&
+        hasUnhydratedTailNodes() &&
+        (workInProgress.mode & ConcurrentMode) !== NoMode &&
+        (workInProgress.flags & DidCapture) === NoFlags
+      ) {
+        warnIfUnhydratedTailNodes(workInProgress);
+        resetHydrationState();
+        workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+        return 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.
+        const wasHydrated = popHydrationState(workInProgress);
+        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 Flow doesn't support type casting in combination with the -= operator
+                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                 }
               }
             }
-            return null;
-          } else {
-            // 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.
-              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 Flow doesn't support type casting in combination with the -= operator
-                    workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                  }
+          }
+          return null;
+        } else {
+          // 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.
+            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 Flow doesn't support type casting in combination with the -= operator
+                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
                 }
               }
             }
-            return null;
           }
+          return null;
         }
-
-        // 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.
-        upgradeHydrationErrorsToRecoverable();
       }
 
+      // 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.
+      upgradeHydrationErrorsToRecoverable();
+
       if ((workInProgress.flags & DidCapture) !== NoFlags) {
         // Something suspended. Re-render with the fallback children.
         workInProgress.lanes = renderLanes;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 94ca9e61eec1..98981e904a90 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -68,10 +68,7 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {
-  enableClientRenderFallbackOnHydrationMismatch,
-  enableSuspenseServerRenderer,
-} from 'shared/ReactFeatureFlags';
+import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.new';
 import {
   getSuspendedTreeContext,
@@ -347,32 +344,30 @@ function tryHydrate(fiber, nextInstance) {
       return false;
     }
     case SuspenseComponent: {
-      if (enableSuspenseServerRenderer) {
-        const suspenseInstance: null | SuspenseInstance = canHydrateSuspenseInstance(
-          nextInstance,
+      const suspenseInstance: null | SuspenseInstance = canHydrateSuspenseInstance(
+        nextInstance,
+      );
+      if (suspenseInstance !== null) {
+        const suspenseState: SuspenseState = {
+          dehydrated: suspenseInstance,
+          treeContext: getSuspendedTreeContext(),
+          retryLane: OffscreenLane,
+        };
+        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,
         );
-        if (suspenseInstance !== null) {
-          const suspenseState: SuspenseState = {
-            dehydrated: suspenseInstance,
-            treeContext: getSuspendedTreeContext(),
-            retryLane: OffscreenLane,
-          };
-          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 true;
-        }
+        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 true;
       }
       return false;
     }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 6af68fe66a79..fd9825692784 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -68,10 +68,7 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {
-  enableClientRenderFallbackOnHydrationMismatch,
-  enableSuspenseServerRenderer,
-} from 'shared/ReactFeatureFlags';
+import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.old';
 import {
   getSuspendedTreeContext,
@@ -347,32 +344,30 @@ function tryHydrate(fiber, nextInstance) {
       return false;
     }
     case SuspenseComponent: {
-      if (enableSuspenseServerRenderer) {
-        const suspenseInstance: null | SuspenseInstance = canHydrateSuspenseInstance(
-          nextInstance,
+      const suspenseInstance: null | SuspenseInstance = canHydrateSuspenseInstance(
+        nextInstance,
+      );
+      if (suspenseInstance !== null) {
+        const suspenseState: SuspenseState = {
+          dehydrated: suspenseInstance,
+          treeContext: getSuspendedTreeContext(),
+          retryLane: OffscreenLane,
+        };
+        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,
         );
-        if (suspenseInstance !== null) {
-          const suspenseState: SuspenseState = {
-            dehydrated: suspenseInstance,
-            treeContext: getSuspendedTreeContext(),
-            retryLane: OffscreenLane,
-          };
-          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 true;
-        }
+        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 true;
       }
       return false;
     }
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 8f269a405021..68862e568818 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -42,7 +42,6 @@ import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.new';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
 import {
-  enableSuspenseServerRenderer,
   enableLazyContextPropagation,
   enableServerContext,
 } from 'shared/ReactFeatureFlags';
@@ -295,10 +294,7 @@ function propagateContextChange_eager<T>(
     } else if (fiber.tag === ContextProvider) {
       // Don't scan deeper if this is a matching provider
       nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
-    } else if (
-      enableSuspenseServerRenderer &&
-      fiber.tag === DehydratedFragment
-    ) {
+    } 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.
@@ -425,10 +421,7 @@ function propagateContextChanges<T>(
         }
         dep = dependency.next;
       }
-    } else if (
-      enableSuspenseServerRenderer &&
-      fiber.tag === DehydratedFragment
-    ) {
+    } 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.
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index a48c84204382..de96664e774a 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -42,7 +42,6 @@ import is from 'shared/objectIs';
 import {createUpdate, ForceUpdate} from './ReactUpdateQueue.old';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
 import {
-  enableSuspenseServerRenderer,
   enableLazyContextPropagation,
   enableServerContext,
 } from 'shared/ReactFeatureFlags';
@@ -295,10 +294,7 @@ function propagateContextChange_eager<T>(
     } else if (fiber.tag === ContextProvider) {
       // Don't scan deeper if this is a matching provider
       nextFiber = fiber.type === workInProgress.type ? null : fiber.child;
-    } else if (
-      enableSuspenseServerRenderer &&
-      fiber.tag === DehydratedFragment
-    ) {
+    } 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.
@@ -425,10 +421,7 @@ function propagateContextChanges<T>(
         }
         dep = dependency.next;
       }
-    } else if (
-      enableSuspenseServerRenderer &&
-      fiber.tag === DehydratedFragment
-    ) {
+    } 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.
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index eb2ea2286a27..c97c3e2ebc16 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -28,11 +28,7 @@ import {
 } from './ReactWorkTags';
 import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags';
 import {NoMode, ProfileMode} from './ReactTypeOfMode';
-import {
-  enableSuspenseServerRenderer,
-  enableProfilerTimer,
-  enableCache,
-} from 'shared/ReactFeatureFlags';
+import {enableProfilerTimer, enableCache} from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.new';
 import {popSuspenseContext} from './ReactFiberSuspenseContext.new';
@@ -108,20 +104,18 @@ function unwindWork(
     }
     case SuspenseComponent: {
       popSuspenseContext(workInProgress);
-      if (enableSuspenseServerRenderer) {
-        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 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;
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 1eb4d72d98c9..260b574b264f 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -28,11 +28,7 @@ import {
 } from './ReactWorkTags';
 import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags';
 import {NoMode, ProfileMode} from './ReactTypeOfMode';
-import {
-  enableSuspenseServerRenderer,
-  enableProfilerTimer,
-  enableCache,
-} from 'shared/ReactFeatureFlags';
+import {enableProfilerTimer, enableCache} from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.old';
 import {popSuspenseContext} from './ReactFiberSuspenseContext.old';
@@ -108,20 +104,18 @@ function unwindWork(
     }
     case SuspenseComponent: {
       popSuspenseContext(workInProgress);
-      if (enableSuspenseServerRenderer) {
-        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 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;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e9381e709f22..aa20335cbec9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -23,7 +23,6 @@ import type {
 
 import {
   warnAboutDeprecatedLifecycles,
-  enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableCreateEventHandleAPI,
   enableProfilerTimer,
@@ -2776,26 +2775,22 @@ export function retryDehydratedSuspenseBoundary(boundaryFiber: Fiber) {
 export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
   let retryLane = NoLane; // Default
   let retryCache: WeakSet<Wakeable> | Set<Wakeable> | null;
-  if (enableSuspenseServerRenderer) {
-    switch (boundaryFiber.tag) {
-      case SuspenseComponent:
-        retryCache = boundaryFiber.stateNode;
-        const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;
-        if (suspenseState !== null) {
-          retryLane = suspenseState.retryLane;
-        }
-        break;
-      case SuspenseListComponent:
-        retryCache = boundaryFiber.stateNode;
-        break;
-      default:
-        throw new Error(
-          'Pinged unknown suspense boundary type. ' +
-            'This is probably a bug in React.',
-        );
-    }
-  } else {
-    retryCache = boundaryFiber.stateNode;
+  switch (boundaryFiber.tag) {
+    case SuspenseComponent:
+      retryCache = boundaryFiber.stateNode;
+      const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;
+      if (suspenseState !== null) {
+        retryLane = suspenseState.retryLane;
+      }
+      break;
+    case SuspenseListComponent:
+      retryCache = boundaryFiber.stateNode;
+      break;
+    default:
+      throw new Error(
+        'Pinged unknown suspense boundary type. ' +
+          'This is probably a bug in React.',
+      );
   }
 
   if (retryCache !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 5d25610f5f4a..e2c3a76c7fc2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -23,7 +23,6 @@ import type {
 
 import {
   warnAboutDeprecatedLifecycles,
-  enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
   enableCreateEventHandleAPI,
   enableProfilerTimer,
@@ -2776,26 +2775,22 @@ export function retryDehydratedSuspenseBoundary(boundaryFiber: Fiber) {
 export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
   let retryLane = NoLane; // Default
   let retryCache: WeakSet<Wakeable> | Set<Wakeable> | null;
-  if (enableSuspenseServerRenderer) {
-    switch (boundaryFiber.tag) {
-      case SuspenseComponent:
-        retryCache = boundaryFiber.stateNode;
-        const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;
-        if (suspenseState !== null) {
-          retryLane = suspenseState.retryLane;
-        }
-        break;
-      case SuspenseListComponent:
-        retryCache = boundaryFiber.stateNode;
-        break;
-      default:
-        throw new Error(
-          'Pinged unknown suspense boundary type. ' +
-            'This is probably a bug in React.',
-        );
-    }
-  } else {
-    retryCache = boundaryFiber.stateNode;
+  switch (boundaryFiber.tag) {
+    case SuspenseComponent:
+      retryCache = boundaryFiber.stateNode;
+      const suspenseState: null | SuspenseState = boundaryFiber.memoizedState;
+      if (suspenseState !== null) {
+        retryLane = suspenseState.retryLane;
+      }
+      break;
+    case SuspenseListComponent:
+      retryCache = boundaryFiber.stateNode;
+      break;
+    default:
+      throw new Error(
+        'Pinged unknown suspense boundary type. ' +
+          'This is probably a bug in React.',
+      );
   }
 
   if (retryCache !== null) {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index f7529132aef7..c2a128741d99 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -13,7 +13,6 @@
 // Flags that can likely be deleted or landed without consequences
 // -----------------------------------------------------------------------------
 
-export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const warnAboutDeprecatedLifecycles = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 91795dca3093..a70d23958293 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -26,7 +26,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = __PROFILE__;
-export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableCache = false;
 export const enableCacheElement = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 3d816e86143c..5768925fdd0b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = __PROFILE__;
-export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableCache = false;
 export const enableCacheElement = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 1aeb14817ad7..6c5c9ffe6596 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableCache = __EXPERIMENTAL__;
 export const enableCacheElement = __EXPERIMENTAL__;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 9c19dc2a47c2..dfc904212e61 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableCache = true;
 export const enableCacheElement = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 75e1df4dc34b..23228bf8b0ec 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableCache = true;
 export const enableCacheElement = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 262e67017da1..87e9fd0fe7d6 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSuspenseServerRenderer = false;
 export const enableSelectiveHydration = false;
 export const enableCache = __EXPERIMENTAL__;
 export const enableCacheElement = __EXPERIMENTAL__;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index ed97f8e51ebc..fdb4725c47b4 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 export const enableCache = true;
 export const enableCacheElement = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 5c64417f0bac..8e6b57b25b1b 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -67,7 +67,6 @@ export const disableLegacyContext = __EXPERIMENTAL__;
 export const warnAboutStringRefs = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
-export const enableSuspenseServerRenderer = true;
 export const enableSelectiveHydration = true;
 
 export const enableCache = true;

From 354772952a8228255cc7e8e32906e427e5255c30 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Apr 2022 10:26:25 -0400
Subject: [PATCH 1323/1603] Land enableSelectiveHydration flag (#24406)

This flag is already enabled on all relevant surfaces. We can remove it.
---
 .../src/events/ReactDOMEventReplaying.js      | 93 +++++++++----------
 packages/shared/ReactFeatureFlags.js          |  1 -
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 10 files changed, 43 insertions(+), 59 deletions(-)

diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 9de82a99a7be..a5d669732b4a 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -14,10 +14,7 @@ import type {EventSystemFlags} from './EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
-import {
-  enableSelectiveHydration,
-  enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-} from 'shared/ReactFeatureFlags';
+import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags';
 import {
   unstable_scheduleCallback as scheduleCallback,
   unstable_NormalPriority as NormalPriority,
@@ -204,27 +201,25 @@ export function queueDiscreteEvent(
     nativeEvent,
   );
   queuedDiscreteEvents.push(queuedEvent);
-  if (enableSelectiveHydration) {
-    if (queuedDiscreteEvents.length === 1) {
-      // If this was the first discrete event, we might be able to
-      // synchronously unblock it so that preventDefault still works.
-      while (queuedEvent.blockedOn !== null) {
-        const fiber = getInstanceFromNode(queuedEvent.blockedOn);
-        if (fiber === null) {
-          break;
-        }
-        attemptSynchronousHydration(fiber);
-        if (queuedEvent.blockedOn === null) {
-          // We got unblocked by hydration. Let's try again.
-          replayUnblockedEvents();
-          // If we're reblocked, on an inner boundary, we might need
-          // to attempt hydrating that one.
-          continue;
-        } else {
-          // We're still blocked from hydration, we have to give up
-          // and replay later.
-          break;
-        }
+  if (queuedDiscreteEvents.length === 1) {
+    // If this was the first discrete event, we might be able to
+    // synchronously unblock it so that preventDefault still works.
+    while (queuedEvent.blockedOn !== null) {
+      const fiber = getInstanceFromNode(queuedEvent.blockedOn);
+      if (fiber === null) {
+        break;
+      }
+      attemptSynchronousHydration(fiber);
+      if (queuedEvent.blockedOn === null) {
+        // We got unblocked by hydration. Let's try again.
+        replayUnblockedEvents();
+        // If we're reblocked, on an inner boundary, we might need
+        // to attempt hydrating that one.
+        continue;
+      } else {
+        // We're still blocked from hydration, we have to give up
+        // and replay later.
+        break;
       }
     }
   }
@@ -428,33 +423,31 @@ function attemptExplicitHydrationTarget(
 }
 
 export function queueExplicitHydrationTarget(target: Node): void {
-  if (enableSelectiveHydration) {
-    // TODO: This will read the priority if it's dispatched by the React
-    // event system but not native events. Should read window.event.type, like
-    // we do for updates (getCurrentEventPriority).
-    const updatePriority = getCurrentUpdatePriority();
-    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);
+  // TODO: This will read the priority if it's dispatched by the React
+  // event system but not native events. Should read window.event.type, like
+  // we do for updates (getCurrentEventPriority).
+  const updatePriority = getCurrentUpdatePriority();
+  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(
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index c2a128741d99..8f2872de99f1 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -13,7 +13,6 @@
 // Flags that can likely be deleted or landed without consequences
 // -----------------------------------------------------------------------------
 
-export const enableSelectiveHydration = true;
 export const warnAboutDeprecatedLifecycles = true;
 export const enableComponentStackLocations = true;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index a70d23958293..4aa7a4187f60 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -26,7 +26,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = __PROFILE__;
-export const enableSelectiveHydration = false;
 export const enableCache = false;
 export const enableCacheElement = true;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 5768925fdd0b..a210ced18e6a 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = __PROFILE__;
-export const enableSelectiveHydration = false;
 export const enableCache = false;
 export const enableCacheElement = false;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 6c5c9ffe6596..c4d6d046a3c9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSelectiveHydration = false;
 export const enableCache = __EXPERIMENTAL__;
 export const enableCacheElement = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index dfc904212e61..aee9188ca896 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSelectiveHydration = false;
 export const enableCache = true;
 export const enableCacheElement = true;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 23228bf8b0ec..340b180dd4d7 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSelectiveHydration = false;
 export const enableCache = true;
 export const enableCacheElement = true;
 export const enableSchedulerDebugging = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 87e9fd0fe7d6..3b7013f5bacd 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSelectiveHydration = false;
 export const enableCache = __EXPERIMENTAL__;
 export const enableCacheElement = __EXPERIMENTAL__;
 export const disableJavaScriptURLs = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index fdb4725c47b4..15e4ac5e6d6e 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -20,7 +20,6 @@ export const enableProfilerCommitHooks = false;
 export const enableProfilerNestedUpdatePhase = false;
 export const enableProfilerNestedUpdateScheduledHook = false;
 export const enableUpdaterTracking = false;
-export const enableSelectiveHydration = true;
 export const enableCache = true;
 export const enableCacheElement = true;
 export const disableJavaScriptURLs = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 8e6b57b25b1b..0d0fbf1a0626 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -67,7 +67,6 @@ export const disableLegacyContext = __EXPERIMENTAL__;
 export const warnAboutStringRefs = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
-export const enableSelectiveHydration = true;
 
 export const enableCache = true;
 export const enableCacheElement = true;

From 0dc4e6663dc875e0f734b1a96b26ebc33902323a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Apr 2022 14:09:11 -0400
Subject: [PATCH 1324/1603] Land enableClientRenderFallbackOnHydrationMismatch
 (#24410)

This flag is already enabled on all relevant surfaces. We can remove it.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 113 ++----
 ...actDOMFizzSuppressHydrationWarning-test.js | 205 ++++------
 .../__tests__/ReactDOMHydrationDiff-test.js   | 381 ++----------------
 ...DOMServerPartialHydration-test.internal.js |  49 +--
 .../src/client/ReactDOMHostConfig.js          |  16 +-
 .../src/ReactFiberCompleteWork.new.js         |   2 -
 .../src/ReactFiberCompleteWork.old.js         |   2 -
 .../src/ReactFiberHydrationContext.new.js     |   2 -
 .../src/ReactFiberHydrationContext.old.js     |   2 -
 .../useMutableSourceHydration-test.js         |   2 +-
 packages/shared/ReactFeatureFlags.js          |   1 -
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 20 files changed, 175 insertions(+), 609 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index da9097c51d5e..bc609efcf0d0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1832,41 +1832,26 @@ describe('ReactDOMFizzServer', () => {
       },
     });
 
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        // The first paint switches to client rendering due to mismatch
-        expect(Scheduler).toFlushUntilNextPaint([
-          'client',
-          'Log recoverable error: Hydration failed because the initial ' +
-            'UI does not match what was rendered on the server.',
-          'Log recoverable error: There was an error while hydrating. ' +
-            'Because the error happened outside of a Suspense boundary, the ' +
-            'entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-          'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
-            '    in div (at **)\n' +
-            '    in App (at **)',
-        ],
-        {withoutStack: 1},
-      );
-      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    } else {
-      const serverRenderedDiv = container.getElementsByTagName('div')[0];
-      // The first paint uses the server snapshot
-      expect(Scheduler).toFlushUntilNextPaint(['server']);
-      expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-      // Hydration succeeded
-      expect(ref.current).toEqual(serverRenderedDiv);
-
-      // Asynchronously we detect that the store has changed on the client,
-      // and patch up the inconsistency
-      expect(Scheduler).toFlushUntilNextPaint(['client']);
-      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-      expect(ref.current).toEqual(serverRenderedDiv);
-    }
+    expect(() => {
+      // The first paint switches to client rendering due to mismatch
+      expect(Scheduler).toFlushUntilNextPaint([
+        'client',
+        'Log recoverable error: Hydration failed because the initial ' +
+          'UI does not match what was rendered on the server.',
+        'Log recoverable error: There was an error while hydrating. ' +
+          'Because the error happened outside of a Suspense boundary, the ' +
+          'entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+        'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
+          '    in div (at **)\n' +
+          '    in App (at **)',
+      ],
+      {withoutStack: 1},
+    );
+    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
   });
 
   // The selector implementation uses the lazy ref initialization pattern
@@ -1932,43 +1917,27 @@ describe('ReactDOMFizzServer', () => {
       },
     });
 
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      // The first paint uses the client due to mismatch forcing client render
-      expect(() => {
-        // The first paint switches to client rendering due to mismatch
-        expect(Scheduler).toFlushUntilNextPaint([
-          'client',
-          'Log recoverable error: Hydration failed because the initial ' +
-            'UI does not match what was rendered on the server.',
-          'Log recoverable error: There was an error while hydrating. ' +
-            'Because the error happened outside of a Suspense boundary, the ' +
-            'entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content',
-          'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
-            '    in div (at **)\n' +
-            '    in App (at **)',
-        ],
-        {withoutStack: 1},
-      );
-      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-    } else {
-      const serverRenderedDiv = container.getElementsByTagName('div')[0];
-
-      // The first paint uses the server snapshot
-      expect(Scheduler).toFlushUntilNextPaint(['server']);
-      expect(getVisibleChildren(container)).toEqual(<div>server</div>);
-      // Hydration succeeded
-      expect(ref.current).toEqual(serverRenderedDiv);
-
-      // Asynchronously we detect that the store has changed on the client,
-      // and patch up the inconsistency
-      expect(Scheduler).toFlushUntilNextPaint(['client']);
-      expect(getVisibleChildren(container)).toEqual(<div>client</div>);
-      expect(ref.current).toEqual(serverRenderedDiv);
-    }
+    // The first paint uses the client due to mismatch forcing client render
+    expect(() => {
+      // The first paint switches to client rendering due to mismatch
+      expect(Scheduler).toFlushUntilNextPaint([
+        'client',
+        'Log recoverable error: Hydration failed because the initial ' +
+          'UI does not match what was rendered on the server.',
+        'Log recoverable error: There was an error while hydrating. ' +
+          'Because the error happened outside of a Suspense boundary, the ' +
+          'entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content',
+        'Warning: Expected server HTML to contain a matching <div> in <div>.\n' +
+          '    in div (at **)\n' +
+          '    in App (at **)',
+      ],
+      {withoutStack: 1},
+    );
+    expect(getVisibleChildren(container)).toEqual(<div>client</div>);
   });
 
   // @gate experimental
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
index 4f65ecf241c8..ac53da312729 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
@@ -240,23 +240,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Expected server HTML to contain a matching <span> in <span>',
-          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    } else {
-      // This used to not warn.
-      expect(Scheduler).toFlushAndYield([]);
-    }
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Expected server HTML to contain a matching <span> in <span>',
+        'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <span>
@@ -329,23 +324,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Did not expect server HTML to contain the text node "Server" in <span>',
-          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    } else {
-      // This used to not warn.
-      expect(Scheduler).toFlushAndYield([]);
-    }
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Did not expect server HTML to contain the text node "Server" in <span>',
+        'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <span />
@@ -383,23 +373,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Expected server HTML to contain a matching text node for "Client" in <span>.',
-          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    } else {
-      // This used to not warn.
-      expect(Scheduler).toFlushAndYield([]);
-    }
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Expected server HTML to contain a matching text node for "Client" in <span>.',
+        'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <span>
@@ -440,23 +425,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Did not expect server HTML to contain the text node "Server" in <span>.',
-          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    } else {
-      // This used to not warn.
-      expect(Scheduler).toFlushAndYield([]);
-    }
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Did not expect server HTML to contain the text node "Server" in <span>.',
+        'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <span>
@@ -495,24 +475,19 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Expected server HTML to contain a matching text node for "Client" in <span>.',
-          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    } else {
-      // This used to not warn.
-      expect(Scheduler).toFlushAndYield([]);
-    }
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Expected server HTML to contain a matching text node for "Client" in <span>.',
+        'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <span>
@@ -627,23 +602,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Expected server HTML to contain a matching <p> in <div>.',
-          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    } else {
-      // This used to not warn.
-      expect(Scheduler).toFlushAndYield([]);
-    }
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Expected server HTML to contain a matching <p> in <div>.',
+        'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <p>Client and server</p>
@@ -679,23 +649,18 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
-      }).toErrorDev(
-        [
-          'Did not expect server HTML to contain a <p> in <div>.',
-          'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
-        ],
-        {withoutStack: 1},
-      );
-    } else {
-      // This used to not warn.
-      expect(Scheduler).toFlushAndYield([]);
-    }
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Hydration failed because the initial UI does not match what was rendered on the server.',
+        'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+      ]);
+    }).toErrorDev(
+      [
+        'Did not expect server HTML to contain a <p> in <div>.',
+        'An error occurred during hydration. The server HTML was replaced with client content in <div>.',
+      ],
+      {withoutStack: 1},
+    );
     expect(getVisibleChildren(container)).toEqual(
       <div>
         <p>Client and server</p>
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index a6a1a9989038..9237493c6dce 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -83,7 +83,7 @@ describe('ReactDOMServerHydration', () => {
           </div>
         );
       }
-      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
+      if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
         expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
             "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
@@ -262,10 +262,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <main> in <div>.
                 in main (at **)
@@ -276,16 +273,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -299,10 +286,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <header> in <div>.
                 in header (at **)
@@ -313,16 +297,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <header> in <div>.
-                in header (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -336,10 +310,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <main> in <div>.
                 in main (at **)
@@ -350,16 +321,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -373,10 +334,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <footer> in <div>.
                 in footer (at **)
@@ -387,16 +345,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <footer> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
     });
 
@@ -406,9 +354,7 @@ describe('ReactDOMServerHydration', () => {
         function Mismatch({isClient}) {
           return <div className="parent">{isClient && 'only'}</div>;
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
+        if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
           expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
@@ -441,10 +387,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
                 in div (at **)
@@ -454,15 +397,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching text node for \\"second\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -476,10 +410,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
                 in div (at **)
@@ -489,15 +420,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching text node for \\"first\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -511,10 +433,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching text node for \\"third\\" in <div>.
                 in div (at **)
@@ -524,15 +443,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching text node for \\"third\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
     });
   });
@@ -548,10 +458,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Did not expect server HTML to contain a <main> in <div>.
                 in div (at **)
@@ -561,15 +468,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <main> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -583,10 +481,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <main> in <div>.
                 in main (at **)
@@ -598,16 +493,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <header> in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -621,10 +506,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <footer> in <div>.
                 in footer (at **)
@@ -635,16 +517,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <main> in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -658,10 +530,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Did not expect server HTML to contain a <footer> in <div>.
                 in div (at **)
@@ -671,15 +540,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <footer> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
     });
 
@@ -689,10 +549,7 @@ describe('ReactDOMServerHydration', () => {
         function Mismatch({isClient}) {
           return <div className="parent">{!isClient && 'only'}</div>;
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Did not expect server HTML to contain the text node \\"only\\" in <div>.
                 in div (at **)
@@ -702,15 +559,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain the text node \\"only\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -724,10 +572,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <main> in <div>.
                 in main (at **)
@@ -739,16 +584,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain the text node \\"first\\" in <div>.
-                in main (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -762,10 +597,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <footer> in <div>.
                 in footer (at **)
@@ -776,16 +608,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain the text node \\"second\\" in <div>.
-                in footer (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -799,10 +621,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Did not expect server HTML to contain the text node \\"third\\" in <div>.
                 in div (at **)
@@ -812,15 +631,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain the text node \\"third\\" in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
     });
   });
@@ -844,20 +654,14 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          // TODO: This message doesn't seem to have any useful details.
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        // TODO: This message doesn't seem to have any useful details.
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
               "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
-        }
       });
 
       // @gate __DEV__
@@ -873,10 +677,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Did not expect server HTML to contain a <main> in <div>.
                 in div (at **)
@@ -886,15 +687,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <main> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -911,20 +703,14 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          // TODO: This message doesn't seem to have any useful details.
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        // TODO: This message doesn't seem to have any useful details.
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
               "Caught [Hydration failed because the initial UI does not match what was rendered on the server.]",
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
-        }
       });
 
       // @gate __DEV__
@@ -941,10 +727,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Did not expect server HTML to contain a <p> in <div>.
                 in div (at **)
@@ -954,15 +737,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <p> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -978,10 +752,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <main> in <div>.
                 in main (at **)
@@ -992,17 +763,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <main> in <div>.
-                in main (at **)
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -1018,10 +778,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <footer> in <div>.
                 in footer (at **)
@@ -1032,17 +789,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating this Suspense boundary. Switched to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <main> in <div>.
-                in footer (at **)
-                in Suspense (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -1063,14 +809,8 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          // There is no error because we don't actually hydrate fallbacks.
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
-        }
+        // There is no error because we don't actually hydrate fallbacks.
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
       });
 
       // @gate __DEV__
@@ -1091,14 +831,8 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          // There is no error because we don't actually hydrate fallbacks.
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
-        }
+        // There is no error because we don't actually hydrate fallbacks.
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
       });
     });
 
@@ -1118,10 +852,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Expected server HTML to contain a matching <header> in <div>.
                 in header (at **)
@@ -1134,16 +865,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Expected server HTML to contain a matching <header> in <div>.
-                in header (at **)
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
@@ -1161,10 +882,7 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        if (
-          gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)
-        ) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Did not expect server HTML to contain a <header> in <div>.
                 in div (at **)
@@ -1174,15 +892,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Did not expect server HTML to contain a <header> in <div>.
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
     });
   });
@@ -1222,8 +931,7 @@ describe('ReactDOMServerHydration', () => {
         );
       }
 
-      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
             "Warning: Expected server HTML to contain a matching <footer> in <div>.
               in footer (at **)
@@ -1236,18 +944,6 @@ describe('ReactDOMServerHydration', () => {
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
-      } else {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Expected server HTML to contain a matching <footer> in <div>.
-              in footer (at **)
-              in Panel (at **)
-              in div (at **)
-              in ProfileSettings (at **)
-              in Mismatch (at **)",
-          ]
-        `);
-      }
     });
 
     // @gate __DEV__
@@ -1284,8 +980,7 @@ describe('ReactDOMServerHydration', () => {
         );
       }
 
-      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
             "Warning: Did not expect server HTML to contain a <footer> in <div>.
               in div (at **)
@@ -1296,16 +991,6 @@ describe('ReactDOMServerHydration', () => {
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
-      } else {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Did not expect server HTML to contain a <footer> in <div>.
-              in div (at **)
-              in ProfileSettings (at **)
-              in Mismatch (at **)",
-          ]
-        `);
-      }
     });
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 19846522ee44..4fce6008bcf5 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -224,16 +224,7 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      Scheduler.unstable_flushAll();
-    } else {
-      expect(() => {
-        Scheduler.unstable_flushAll();
-      }).toErrorDev(
-        // TODO: This error should not be logged in this case. It's a false positive.
-        'Did not expect server HTML to contain the text node "Hello" in <div>.',
-      );
-    }
+    Scheduler.unstable_flushAll();
     jest.runAllTimers();
 
     // Expect the server-generated HTML to stay intact.
@@ -249,7 +240,6 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.textContent).toBe('HelloHello');
   });
 
-  // @gate enableClientRenderFallbackOnHydrationMismatch
   it('falls back to client rendering boundary on mismatch', async () => {
     // We can't use the toErrorDev helper here because this is async.
     const originalConsoleError = console.error;
@@ -532,15 +522,11 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(container.innerHTML).toContain('<span>A</span>');
     expect(container.innerHTML).not.toContain('<span>B</span>');
 
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(Scheduler).toHaveYielded([
-        'There was an error while hydrating this Suspense boundary. ' +
-          'Switched to client rendering.',
-      ]);
-      expect(ref.current).not.toBe(span);
-    } else {
-      expect(ref.current).toBe(span);
-    }
+    expect(Scheduler).toHaveYielded([
+      'There was an error while hydrating this Suspense boundary. ' +
+        'Switched to client rendering.',
+    ]);
+    expect(ref.current).not.toBe(span);
   });
 
   it('recovers with client render when server rendered additional nodes at suspense root after unsuspending', async () => {
@@ -603,11 +589,7 @@ describe('ReactDOMServerPartialHydration', () => {
 
       expect(container.innerHTML).toContain('<span>A</span>');
       expect(container.innerHTML).not.toContain('<span>B</span>');
-      if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-        expect(ref.current).not.toBe(span);
-      } else {
-        expect(ref.current).toBe(span);
-      }
+      expect(ref.current).not.toBe(span);
       if (__DEV__) {
         expect(mockError).toHaveBeenCalledWith(
           'Warning: Did not expect server HTML to contain a <%s> in <%s>.%s',
@@ -660,20 +642,14 @@ describe('ReactDOMServerPartialHydration', () => {
         });
       });
     }).toErrorDev('Did not expect server HTML to contain a <span> in <div>');
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(Scheduler).toHaveYielded([
-        'Hydration failed because the initial UI does not match what was rendered on the server.',
-        'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
-      ]);
-    }
+    expect(Scheduler).toHaveYielded([
+      'Hydration failed because the initial UI does not match what was rendered on the server.',
+      'There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+    ]);
 
     expect(container.innerHTML).toContain('<span>A</span>');
     expect(container.innerHTML).not.toContain('<span>B</span>');
-    if (gate(flags => flags.enableClientRenderFallbackOnHydrationMismatch)) {
-      expect(ref.current).not.toBe(span);
-    } else {
-      expect(ref.current).toBe(span);
-    }
+    expect(ref.current).not.toBe(span);
   });
 
   it('calls the onDeleted hydration callback if the parent gets deleted', async () => {
@@ -3292,7 +3268,6 @@ describe('ReactDOMServerPartialHydration', () => {
 
   itHydratesWithoutMismatch('an empty string in class component', TestAppClass);
 
-  // @gate enableClientRenderFallbackOnHydrationMismatch
   it('fallback to client render on hydration mismatch at root', async () => {
     let isClient = false;
     let suspend = true;
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 0cf031776399..4b640055e5b4 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -62,7 +62,6 @@ import dangerousStyleValue from '../shared/dangerousStyleValue';
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
 import {
-  enableClientRenderFallbackOnHydrationMismatch,
   enableCreateEventHandleAPI,
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
@@ -1005,10 +1004,7 @@ export function didNotHydrateInstance(
   isConcurrentMode: boolean,
 ) {
   if (__DEV__) {
-    if (
-      (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
-      parentProps[SUPPRESS_HYDRATION_WARNING] !== true
-    ) {
+    if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
       if (instance.nodeType === ELEMENT_NODE) {
         warnForDeletedHydratableElement(parentInstance, (instance: any));
       } else if (instance.nodeType === COMMENT_NODE) {
@@ -1089,10 +1085,7 @@ export function didNotFindHydratableInstance(
   isConcurrentMode: boolean,
 ) {
   if (__DEV__) {
-    if (
-      (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
-      parentProps[SUPPRESS_HYDRATION_WARNING] !== true
-    ) {
+    if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
       warnForInsertedHydratedElement(parentInstance, type, props);
     }
   }
@@ -1106,10 +1099,7 @@ export function didNotFindHydratableTextInstance(
   isConcurrentMode: boolean,
 ) {
   if (__DEV__) {
-    if (
-      (enableClientRenderFallbackOnHydrationMismatch && isConcurrentMode) ||
-      parentProps[SUPPRESS_HYDRATION_WARNING] !== true
-    ) {
+    if (isConcurrentMode || parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
       warnForInsertedHydratedText(parentInstance, text);
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 683d29ab3c88..4cbae604140b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -31,7 +31,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import {
-  enableClientRenderFallbackOnHydrationMismatch,
   enableSuspenseAvoidThisFallback,
   enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
@@ -1066,7 +1065,6 @@ function completeWork(
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
       if (
-        enableClientRenderFallbackOnHydrationMismatch &&
         hasUnhydratedTailNodes() &&
         (workInProgress.mode & ConcurrentMode) !== NoMode &&
         (workInProgress.flags & DidCapture) === NoFlags
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 549e3da16b03..dd2703f396ee 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -31,7 +31,6 @@ import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import {
-  enableClientRenderFallbackOnHydrationMismatch,
   enableSuspenseAvoidThisFallback,
   enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
@@ -1066,7 +1065,6 @@ function completeWork(
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
       if (
-        enableClientRenderFallbackOnHydrationMismatch &&
         hasUnhydratedTailNodes() &&
         (workInProgress.mode & ConcurrentMode) !== NoMode &&
         (workInProgress.flags & DidCapture) === NoFlags
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 98981e904a90..26b05d008ac5 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -68,7 +68,6 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.new';
 import {
   getSuspendedTreeContext,
@@ -378,7 +377,6 @@ function tryHydrate(fiber, nextInstance) {
 
 function shouldClientRenderOnMismatch(fiber: Fiber) {
   return (
-    enableClientRenderFallbackOnHydrationMismatch &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     (fiber.flags & DidCapture) === NoFlags
   );
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index fd9825692784..cf7890e3edba 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -68,7 +68,6 @@ import {
   didNotFindHydratableTextInstance,
   didNotFindHydratableSuspenseInstance,
 } from './ReactFiberHostConfig';
-import {enableClientRenderFallbackOnHydrationMismatch} from 'shared/ReactFeatureFlags';
 import {OffscreenLane} from './ReactFiberLane.old';
 import {
   getSuspendedTreeContext,
@@ -378,7 +377,6 @@ function tryHydrate(fiber, nextInstance) {
 
 function shouldClientRenderOnMismatch(fiber: Fiber) {
   return (
-    enableClientRenderFallbackOnHydrationMismatch &&
     (fiber.mode & ConcurrentMode) !== NoMode &&
     (fiber.flags & DidCapture) === NoFlags
   );
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index cb2d7d2ac81b..a22e8114f605 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -169,7 +169,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate enableUseMutableSource
-  // @gate enableClientRenderFallbackOnHydrationMismatch
+  // @gate enableClientRenderFallbackOnTextMismatch
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 8f2872de99f1..218a3514f0f3 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -41,7 +41,6 @@ export const skipUnmountedBoundaries = true;
 export const enableSuspenseLayoutEffectSemantics = true;
 
 // TODO: Finish rolling out in www
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 
 // TODO: Need to review this code one more time before landing
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 4aa7a4187f60..6baef5948997 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,7 +50,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a210ced18e6a..e9398deee80d 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c4d6d046a3c9..c3ca7f565c73 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index aee9188ca896..d186c1852e6b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 340b180dd4d7..e258b155c2c1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 3b7013f5bacd..d173aaa1b30a 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 15e4ac5e6d6e..c2842d955938 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnHydrationMismatch = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index cfc32d6bacff..253cb58a2d1f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -26,7 +26,6 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
-export const enableClientRenderFallbackOnHydrationMismatch = __VARIANT__;
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableSymbolFallbackForWWW = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 0d0fbf1a0626..5a8f89bae840 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,7 +32,6 @@ export const {
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-  enableClientRenderFallbackOnHydrationMismatch,
   enableClientRenderFallbackOnTextMismatch,
 } = dynamicFeatureFlags;
 

From 9ae80d6a2bf8f48f20e3d62b9672f21c1ff77bd8 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 20 Apr 2022 14:52:54 -0700
Subject: [PATCH 1325/1603] Suppress hydration warnings when a preceding
 sibling suspends (#24404)

* Add failing test case for #24384

If a components suspends during hydration we expect there to be mismatches with server rendered HTML but we were not always supressing warning messages related to these expected mismatches

* Mark hydration as suspending on every thrownException

previously hydration would only be marked as supsending when a genuine error was thrown. This created an opportunity for a hydration mismatch that would warn after which later hydration mismatches would not lead to warnings. By moving the marker check earlier in the thrownException function we get the hydration context to enter the didSuspend state on both error and thrown promise cases which eliminates this gap.

* Fix failing test related to client render fallbacks

This test was actually subject to the project identified in the issue fixed in this branch. After fixing the underlying issue the assertion logic needed to change to pick the right warning which now emits after hydration successfully completes on promise resolution. I changed the container type to 'section' to make the error message slightly easier to read/understand (for me)

* Only mark didSuspend on suspense path

For unknown reasons the didSuspend was being set only on the error path and nto the suspense path. The original change hoisted this to happen on both paths. This change moves the didSuspend call to the suspense path only. This appears to be a noop because if the error path marked didSuspend it would suppress later warnings but if it does not the warning functions themsevles do that suppression (after the first one which necessarily already happened)

* gate test on hydration fallback flags

* refactor didSuspend to didSuspendOrError

the orignial behavior applied the hydration warning bailout to error paths only. originally I moved it to Suspense paths only but this commit restores it to both paths and renames the marker function as didThrow rather than didSuspend

The logic here is that for either case if we get a mismatch in hydration we want to warm up components but effectively consider the hydration for this boundary halted

* factor tests to assert different behavior between prod and dev

* add DEV suffix to didSuspendOrError to better indicate this feature should only affect dev behavior

* move tests back to ReactDOMFizzServer-test

* fix comment casing

* drop extra flag gates in tests

* add test for user error case

* remove unnecessary gate

* Make test better

it now has an intentional client mismatch that would error if there wasn't suppression brought about by the earlier error. when it client renders it has the updated value not found in the server response but we do not see a hydration warning because it was superseded by the thrown error in that render
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 243 ++++++++++++++++++
 ...DOMServerPartialHydration-test.internal.js |  12 +-
 .../src/ReactFiberHydrationContext.new.js     |  21 +-
 .../src/ReactFiberHydrationContext.old.js     |  21 +-
 .../src/ReactFiberThrow.new.js                |  11 +-
 .../src/ReactFiberThrow.old.js                |  11 +-
 6 files changed, 290 insertions(+), 29 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index bc609efcf0d0..bf5388597571 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2841,4 +2841,247 @@ describe('ReactDOMFizzServer', () => {
       expect(window.__test_outlet).toBe(1);
     });
   });
+
+  // @gate experimental && enableClientRenderFallbackOnTextMismatch
+  it('#24384: Suspending should halt hydration warnings while still allowing siblings to warm up', 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(async () => {
+      const {pipe} = ReactDOMFizzServer.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.unstable_yieldValue(
+          'Logged recoverable error: ' + error.message,
+        );
+      },
+    });
+    Scheduler.unstable_flushAll();
+
+    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();
+    expect(() => {
+      expect(Scheduler).toFlushAndYield([
+        'Logged recoverable error: Text content does not match server-rendered HTML.',
+        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+      ]);
+    }).toErrorDev(
+      'Warning: Prop `name` did not match. Server: "initial" Client: "replaced"',
+    );
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="replaced">replaced</h2>
+      </div>,
+    );
+
+    expect(Scheduler).toFlushAndYield([]);
+  });
+
+  // @gate experimental && enableClientRenderFallbackOnTextMismatch
+  it('only warns once on hydration mismatch while within a suspense boundary', async () => {
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
+
+    const App = ({text}) => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <h2>{text}</h2>
+            <h2>{text}</h2>
+            <h2>{text}</h2>
+          </Suspense>
+        </div>
+      );
+    };
+
+    try {
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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.unstable_yieldValue(
+            'Logged recoverable error: ' + error.message,
+          );
+        },
+      });
+      expect(Scheduler).toFlushAndYield([
+        'Logged recoverable error: Text content does not match server-rendered HTML.',
+        'Logged recoverable error: Text content does not match server-rendered HTML.',
+        'Logged recoverable error: Text content does not match server-rendered HTML.',
+        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+      ]);
+
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <h2>replaced</h2>
+          <h2>replaced</h2>
+          <h2>replaced</h2>
+        </div>,
+      );
+
+      expect(Scheduler).toFlushAndYield([]);
+      if (__DEV__) {
+        expect(mockError.mock.calls.length).toBe(1);
+        expect(mockError.mock.calls[0]).toEqual([
+          'Warning: Text content did not match. Server: "%s" Client: "%s"%s',
+          'initial',
+          'replaced',
+          '\n' +
+            '    in h2 (at **)\n' +
+            '    in Suspense (at **)\n' +
+            '    in div (at **)\n' +
+            '    in App (at **)',
+        ]);
+      } else {
+        expect(mockError.mock.calls.length).toBe(0);
+      }
+    } finally {
+      console.error = originalConsoleError;
+    }
+  });
+
+  // @gate experimental
+  it('supresses hydration warnings when an error occurs within a Suspense boundary', async () => {
+    let isClient = false;
+    let shouldThrow = true;
+
+    function ThrowUntilOnClient({children}) {
+      if (isClient && shouldThrow) {
+        throw new Error('uh oh');
+      }
+      return children;
+    }
+
+    function StopThrowingOnClient() {
+      if (isClient) {
+        shouldThrow = false;
+      }
+      return null;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ThrowUntilOnClient>
+              <h1>one</h1>
+            </ThrowUntilOnClient>
+            <h2>two</h2>
+            <h3>{isClient ? 'five' : 'three'}</h3>
+            <StopThrowingOnClient />
+          </Suspense>
+        </div>
+      );
+    };
+
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.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.unstable_yieldValue(
+          'Logged recoverable error: ' + error.message,
+        );
+      },
+    });
+    expect(Scheduler).toFlushAndYield([
+      'Logged recoverable error: uh oh',
+      'Logged recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
+      'Logged recoverable error: Hydration failed because the initial UI does not match what was rendered on the server.',
+      'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+    ]);
+
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <h1>one</h1>
+        <h2>two</h2>
+        <h3>five</h3>
+      </div>,
+    );
+
+    expect(Scheduler).toFlushAndYield([]);
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index 4fce6008bcf5..fe9d8dd453cd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -285,7 +285,7 @@ describe('ReactDOMServerPartialHydration', () => {
     }
     try {
       const finalHTML = ReactDOMServer.renderToString(<App />);
-      const container = document.createElement('div');
+      const container = document.createElement('section');
       container.innerHTML = finalHTML;
       expect(Scheduler).toHaveYielded([
         'Hello',
@@ -350,12 +350,14 @@ describe('ReactDOMServerPartialHydration', () => {
       );
 
       if (__DEV__) {
-        expect(mockError.mock.calls[0]).toEqual([
+        const secondToLastCall =
+          mockError.mock.calls[mockError.mock.calls.length - 2];
+        expect(secondToLastCall).toEqual([
           'Warning: Expected server HTML to contain a matching <%s> in <%s>.%s',
-          'div',
-          'div',
+          'article',
+          'section',
           '\n' +
-            '    in div (at **)\n' +
+            '    in article (at **)\n' +
             '    in Component (at **)\n' +
             '    in Suspense (at **)\n' +
             '    in App (at **)',
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 26b05d008ac5..e0e592d32790 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -80,7 +80,10 @@ import {queueRecoverableErrors} from './ReactFiberWorkLoop.new';
 let hydrationParentFiber: null | Fiber = null;
 let nextHydratableInstance: null | HydratableInstance = null;
 let isHydrating: boolean = false;
-let didSuspend: 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 errors that were thrown inside this boundary
 let hydrationErrors: Array<mixed> | null = null;
@@ -95,9 +98,9 @@ function warnIfHydrating() {
   }
 }
 
-export function markDidSuspendWhileHydratingDEV() {
+export function markDidThrowWhileHydratingDEV() {
   if (__DEV__) {
-    didSuspend = true;
+    didSuspendOrErrorDEV = true;
   }
 }
 
@@ -113,7 +116,7 @@ function enterHydrationState(fiber: Fiber): boolean {
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
-  didSuspend = false;
+  didSuspendOrErrorDEV = false;
   return true;
 }
 
@@ -131,7 +134,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
-  didSuspend = false;
+  didSuspendOrErrorDEV = false;
   if (treeContext !== null) {
     restoreSuspendedTreeContext(fiber, treeContext);
   }
@@ -196,7 +199,7 @@ function deleteHydratableInstance(
 
 function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
   if (__DEV__) {
-    if (didSuspend) {
+    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.
@@ -444,7 +447,7 @@ function prepareToHydrateHostInstance(
   }
 
   const instance: Instance = fiber.stateNode;
-  const shouldWarnIfMismatchDev = !didSuspend;
+  const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
   const updatePayload = hydrateInstance(
     instance,
     fiber.type,
@@ -474,7 +477,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
   const textInstance: TextInstance = fiber.stateNode;
   const textContent: string = fiber.memoizedProps;
-  const shouldWarnIfMismatchDev = !didSuspend;
+  const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
   const shouldUpdate = hydrateTextInstance(
     textInstance,
     textContent,
@@ -653,7 +656,7 @@ function resetHydrationState(): void {
   hydrationParentFiber = null;
   nextHydratableInstance = null;
   isHydrating = false;
-  didSuspend = false;
+  didSuspendOrErrorDEV = false;
 }
 
 export function upgradeHydrationErrorsToRecoverable(): void {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index cf7890e3edba..a4fd5c93e22e 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -80,7 +80,10 @@ import {queueRecoverableErrors} from './ReactFiberWorkLoop.old';
 let hydrationParentFiber: null | Fiber = null;
 let nextHydratableInstance: null | HydratableInstance = null;
 let isHydrating: boolean = false;
-let didSuspend: 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 errors that were thrown inside this boundary
 let hydrationErrors: Array<mixed> | null = null;
@@ -95,9 +98,9 @@ function warnIfHydrating() {
   }
 }
 
-export function markDidSuspendWhileHydratingDEV() {
+export function markDidThrowWhileHydratingDEV() {
   if (__DEV__) {
-    didSuspend = true;
+    didSuspendOrErrorDEV = true;
   }
 }
 
@@ -113,7 +116,7 @@ function enterHydrationState(fiber: Fiber): boolean {
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
-  didSuspend = false;
+  didSuspendOrErrorDEV = false;
   return true;
 }
 
@@ -131,7 +134,7 @@ function reenterHydrationStateFromDehydratedSuspenseInstance(
   hydrationParentFiber = fiber;
   isHydrating = true;
   hydrationErrors = null;
-  didSuspend = false;
+  didSuspendOrErrorDEV = false;
   if (treeContext !== null) {
     restoreSuspendedTreeContext(fiber, treeContext);
   }
@@ -196,7 +199,7 @@ function deleteHydratableInstance(
 
 function warnNonhydratedInstance(returnFiber: Fiber, fiber: Fiber) {
   if (__DEV__) {
-    if (didSuspend) {
+    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.
@@ -444,7 +447,7 @@ function prepareToHydrateHostInstance(
   }
 
   const instance: Instance = fiber.stateNode;
-  const shouldWarnIfMismatchDev = !didSuspend;
+  const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
   const updatePayload = hydrateInstance(
     instance,
     fiber.type,
@@ -474,7 +477,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
 
   const textInstance: TextInstance = fiber.stateNode;
   const textContent: string = fiber.memoizedProps;
-  const shouldWarnIfMismatchDev = !didSuspend;
+  const shouldWarnIfMismatchDev = !didSuspendOrErrorDEV;
   const shouldUpdate = hydrateTextInstance(
     textInstance,
     textContent,
@@ -653,7 +656,7 @@ function resetHydrationState(): void {
   hydrationParentFiber = null;
   nextHydratableInstance = null;
   isHydrating = false;
-  didSuspend = false;
+  didSuspendOrErrorDEV = false;
 }
 
 export function upgradeHydrationErrorsToRecoverable(): void {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 815cb25ef045..7db27ba935d0 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -83,7 +83,7 @@ import {
 } from './ReactFiberLane.new';
 import {
   getIsHydrating,
-  markDidSuspendWhileHydratingDEV,
+  markDidThrowWhileHydratingDEV,
   queueHydrationError,
 } from './ReactFiberHydrationContext.new';
 
@@ -453,6 +453,12 @@ function throwException(
     const wakeable: Wakeable = (value: any);
     resetSuspendedComponent(sourceFiber, rootRenderLanes);
 
+    if (__DEV__) {
+      if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+        markDidThrowWhileHydratingDEV();
+      }
+    }
+
     if (__DEV__) {
       if (enableDebugTracing) {
         if (sourceFiber.mode & DebugTracingMode) {
@@ -514,8 +520,7 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
-      markDidSuspendWhileHydratingDEV();
-
+      markDidThrowWhileHydratingDEV();
       const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index ec89f5ab0cd5..a8e75e9ce661 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -83,7 +83,7 @@ import {
 } from './ReactFiberLane.old';
 import {
   getIsHydrating,
-  markDidSuspendWhileHydratingDEV,
+  markDidThrowWhileHydratingDEV,
   queueHydrationError,
 } from './ReactFiberHydrationContext.old';
 
@@ -453,6 +453,12 @@ function throwException(
     const wakeable: Wakeable = (value: any);
     resetSuspendedComponent(sourceFiber, rootRenderLanes);
 
+    if (__DEV__) {
+      if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
+        markDidThrowWhileHydratingDEV();
+      }
+    }
+
     if (__DEV__) {
       if (enableDebugTracing) {
         if (sourceFiber.mode & DebugTracingMode) {
@@ -514,8 +520,7 @@ function throwException(
   } else {
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
-      markDidSuspendWhileHydratingDEV();
-
+      markDidThrowWhileHydratingDEV();
       const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
       // If the error was thrown during hydration, we may be able to recover by
       // discarding the dehydrated content and switching to a client render.

From bd081376665f5f081dcf4bf72f06b7e563c8046d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 20 Apr 2022 23:30:46 -0400
Subject: [PATCH 1326/1603] Fix: useDeferredValue should reuse previous value
 (#24413)

During an urgent update, useDeferredValue should reuse the previous
value. The regression test I added shows that it was reverting to
the initial value instead.

The cause of the bug was trivial: the update path doesn't update the
hook's `memoizedState` field. Only the mount path.

None of the existing tests happened to catch this because to trigger the
bug, you have to do an urgent update that isn't the first update after
initial render. In all of the existing tests that included an urgent
update, it was the first update, so the "previous" value and the initial
value happened to be the same thing.
---
 .../src/ReactFiberHooks.new.js                |  1 +
 .../src/ReactFiberHooks.old.js                |  1 +
 .../src/__tests__/ReactDeferredValue-test.js  | 75 +++++++++++++++++++
 3 files changed, 77 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index b7799d1dedcc..1742d00ae158 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1993,6 +1993,7 @@ function updateDeferredValueImpl<T>(hook: Hook, prevValue: T, value: T): T {
       markWorkInProgressReceivedUpdate();
     }
 
+    hook.memoizedState = value;
     return value;
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 03360bd6e96c..20717bde1cd7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1993,6 +1993,7 @@ function updateDeferredValueImpl<T>(hook: Hook, prevValue: T, value: T): T {
       markWorkInProgressReceivedUpdate();
     }
 
+    hook.memoizedState = value;
     return value;
   }
 }
diff --git a/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js b/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
index 9cd07c066e4c..a799a53c81ca 100644
--- a/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactDeferredValue-test.js
@@ -221,4 +221,79 @@ describe('ReactDeferredValue', () => {
       </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} />);
+      expect(Scheduler).toFlushUntilNextPaint(['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} />);
+      });
+      expect(Scheduler).toFlushUntilNextPaint(['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} />);
+      // 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).
+      expect(Scheduler).toFlushUntilNextPaint(['Original: 3']);
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>Original: 3</div>
+          <div>Deferred: 2</div>
+        </div>,
+      );
+      expect(Scheduler).toFlushUntilNextPaint(['Deferred: 3']);
+      expect(root).toMatchRenderedOutput(
+        <div>
+          <div>Original: 3</div>
+          <div>Deferred: 3</div>
+        </div>,
+      );
+    });
+  });
 });

From 6d3b6d0f408136479d7298f1a14d79e8a12f0c65 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 22 Apr 2022 14:23:26 -0400
Subject: [PATCH 1327/1603] forwardRef et al shouldn't affect if props reused
 (#24421)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.

Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
---
 .../src/ReactFiberBeginWork.new.js            |  18 +++
 .../src/ReactFiberBeginWork.old.js            |  18 +++
 .../src/__tests__/ReactMemo-test.js           | 153 ++++++++++++++++++
 3 files changed, 189 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 442c95b65125..0764f16c89a0 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -598,6 +598,24 @@ function updateSimpleMemoComponent(
       (__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
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 1632501b26db..6d6e15e24af6 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -598,6 +598,24 @@ function updateSimpleMemoComponent(
       (__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
diff --git a/packages/react-reconciler/src/__tests__/ReactMemo-test.js b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
index 0bbab43d33e0..fca80e8e691a 100644
--- a/packages/react-reconciler/src/__tests__/ReactMemo-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactMemo-test.js
@@ -179,6 +179,159 @@ describe('memo', () => {
         expect(ReactNoop.getChildren()).toEqual([span('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.unstable_yieldValue('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.unstable_yieldValue('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.unstable_yieldValue(
+                '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(async () => {
+          root.render(<App prop="A" />);
+        });
+        expect(Scheduler).toHaveYielded([
+          'SimpleMemo [A0]',
+          'ComplexMemo [A0]',
+          'MemoWithIndirection [A0]',
+        ]);
+
+        // Demonstrate what happens when the props change
+        await act(async () => {
+          root.render(<App prop="B" />);
+        });
+        expect(Scheduler).toHaveYielded([
+          '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(async () => {
+          root.render(<App prop="B" />);
+        });
+        // Nothing re-renders
+        expect(Scheduler).toHaveYielded([]);
+
+        // 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(async () => {
+          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
+        expect(Scheduler).toHaveYielded([
+          'SimpleMemo [B1]',
+          'ComplexMemo [B1]',
+          'MemoWithIndirection [B1]',
+        ]);
+
+        // Do the same thing again. We should still reuse the props object.
+        await act(async () => {
+          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
+        expect(Scheduler).toHaveYielded([
+          'SimpleMemo [B2]',
+          'ComplexMemo [B2]',
+          'MemoWithIndirection [B2]',
+        ]);
+      });
+
       it('accepts custom comparison function', async () => {
         function Counter({count}) {
           return <Text text={count} />;

From bd4784c8f8c6b17cf45c712db8ed8ed19a622b26 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Mon, 25 Apr 2022 16:16:32 +0100
Subject: [PATCH 1328/1603] Revert #24236 (Don't recreate the same fallback on
 the client if hydrating suspends) (#24434)

* Revert #24236 (Don't recreate the same fallback on the client if hydrating suspends)

* Use @gate FIXME
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 38 +++++++++++--------
 .../__tests__/ReactDOMHydrationDiff-test.js   | 18 ++++++---
 ...DOMServerPartialHydration-test.internal.js |  5 ++-
 .../src/ReactFiberBeginWork.new.js            |  1 -
 .../src/ReactFiberBeginWork.old.js            |  1 -
 .../src/ReactFiberLane.new.js                 |  3 ++
 .../src/ReactFiberLane.old.js                 |  3 ++
 .../src/ReactFiberWorkLoop.new.js             |  4 +-
 .../src/ReactFiberWorkLoop.old.js             |  4 +-
 9 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index bf5388597571..72ed9f8775da 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -869,16 +869,15 @@ describe('ReactDOMFizzServer', () => {
     });
 
     // We still can't render it on the client.
-    expect(Scheduler).toFlushAndYield([]);
-    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
-
-    // We now resolve it on the client.
-    resolveText('Hello');
-
     expect(Scheduler).toFlushAndYield([
       '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>Loading...</div>);
+
+    // We now resolve it on the client.
+    resolveText('Hello');
+    Scheduler.unstable_flushAll();
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(
@@ -2189,7 +2188,10 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
+  // Disabled because of a WWW late mutations regression.
+  // We may want to re-enable this if we figure out why.
   // @gate experimental
+  // @gate FIXME
   it('does not recreate the fallback if server errors and hydration suspends', async () => {
     let isClient = false;
 
@@ -2268,7 +2270,10 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // Disabled because of a WWW late mutations regression.
+  // We may want to re-enable this if we figure out why.
   // @gate experimental
+  // @gate FIXME
   it(
     'does not recreate the fallback if server errors and hydration suspends ' +
       'and root receives a transition',
@@ -2364,7 +2369,10 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
+  // Disabled because of a WWW late mutations regression.
+  // We may want to re-enable this if we figure out why.
   // @gate experimental
+  // @gate FIXME
   it(
     'recreates the fallback if server errors and hydration suspends but ' +
       'client receives new props',
@@ -2542,12 +2550,17 @@ describe('ReactDOMFizzServer', () => {
         },
       });
 
-      // An error happened but instead of surfacing it to the UI, we suspended.
-      expect(Scheduler).toFlushAndYield([]);
+      // An error logged but instead of surfacing it to the UI, we switched
+      // to client rendering.
+      expect(Scheduler).toFlushAndYield([
+        'Hydration error',
+        'There was an error while hydrating this Suspense boundary. Switched ' +
+          'to client rendering.',
+      ]);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
-          <span>Yay!</span>
+          Loading...
           <span />
         </div>,
       );
@@ -2555,12 +2568,7 @@ describe('ReactDOMFizzServer', () => {
       await act(async () => {
         resolveText('Yay!');
       });
-      expect(Scheduler).toFlushAndYield([
-        'Yay!',
-        'Hydration error',
-        'There was an error while hydrating this Suspense boundary. Switched ' +
-          'to client rendering.',
-      ]);
+      expect(Scheduler).toFlushAndYield(['Yay!']);
       expect(getVisibleChildren(container)).toEqual(
         <div>
           <span />
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index 9237493c6dce..f6b5a0b428a7 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -792,7 +792,7 @@ describe('ReactDOMServerHydration', () => {
       });
 
       // @gate __DEV__
-      it('does not warn when client renders an extra node inside Suspense fallback', () => {
+      it('warns when client renders an extra node inside Suspense fallback', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
@@ -809,12 +809,15 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // There is no error because we don't actually hydrate fallbacks.
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+          ]
+        `);
       });
 
       // @gate __DEV__
-      it('does not warn when server renders an extra node inside Suspense fallback', () => {
+      it('warns when server renders an extra node inside Suspense fallback', () => {
         function Mismatch({isClient}) {
           return (
             <div className="parent">
@@ -831,8 +834,11 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // There is no error because we don't actually hydrate fallbacks.
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`Array []`);
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+          ]
+        `);
       });
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index fe9d8dd453cd..e4d33645820e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -2115,7 +2115,10 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     suspend = true;
-    expect(Scheduler).toFlushAndYield([]);
+    expect(Scheduler).toFlushAndYield([
+      'The server could not finish this Suspense boundary, likely due to ' +
+        'an error during server rendering. Switched to client rendering.',
+    ]);
 
     // We haven't hydrated the second child but the placeholder is still in the list.
     expect(container.textContent).toBe('ALoading B');
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 0764f16c89a0..1538e32fca27 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         } else {
           // Suspended but we should no longer be in dehydrated mode.
           // Therefore we now have to render the fallback.
-          renderDidSuspendDelayIfPossible();
           const nextPrimaryChildren = nextProps.children;
           const nextFallbackChildren = nextProps.fallback;
           const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 6d6e15e24af6..c50ca6357a5d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2270,7 +2270,6 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         } else {
           // Suspended but we should no longer be in dehydrated mode.
           // Therefore we now have to render the fallback.
-          renderDidSuspendDelayIfPossible();
           const nextPrimaryChildren = nextProps.children;
           const nextFallbackChildren = nextProps.fallback;
           const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index aa3360bd3c2b..708c9318b3a9 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {
   const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
   return (lanes & UrgentLanes) === NoLanes;
 }
+export function includesOnlyTransitions(lanes: Lanes) {
+  return (lanes & TransitionLanes) === lanes;
+}
 
 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   if (
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index a65a922d99b9..e71aa5575abb 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -459,6 +459,9 @@ export function includesOnlyNonUrgentLanes(lanes: Lanes) {
   const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
   return (lanes & UrgentLanes) === NoLanes;
 }
+export function includesOnlyTransitions(lanes: Lanes) {
+  return (lanes & TransitionLanes) === lanes;
+}
 
 export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   if (
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index aa20335cbec9..89c880d86855 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -131,7 +131,7 @@ import {
   pickArbitraryLane,
   includesNonIdleWork,
   includesOnlyRetries,
-  includesOnlyNonUrgentLanes,
+  includesOnlyTransitions,
   includesBlockingLane,
   includesExpiredLane,
   getNextLanes,
@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootSuspendedWithDelay: {
       markRootSuspended(root, lanes);
 
-      if (includesOnlyNonUrgentLanes(lanes)) {
+      if (includesOnlyTransitions(lanes)) {
         // This is a transition, so we should exit without committing a
         // placeholder and without scheduling a timeout. Delay indefinitely
         // until we receive more data.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index e2c3a76c7fc2..2f5dbe8530ce 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -131,7 +131,7 @@ import {
   pickArbitraryLane,
   includesNonIdleWork,
   includesOnlyRetries,
-  includesOnlyNonUrgentLanes,
+  includesOnlyTransitions,
   includesBlockingLane,
   includesExpiredLane,
   getNextLanes,
@@ -1150,7 +1150,7 @@ function finishConcurrentRender(root, exitStatus, lanes) {
     case RootSuspendedWithDelay: {
       markRootSuspended(root, lanes);
 
-      if (includesOnlyNonUrgentLanes(lanes)) {
+      if (includesOnlyTransitions(lanes)) {
         // This is a transition, so we should exit without committing a
         // placeholder and without scheduling a timeout. Delay indefinitely
         // until we receive more data.

From 6bf3deef59a1c910d4cda57409411cb0a6bcd43e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Michael=20=E3=82=B5=E3=82=A4=E3=83=88=E3=83=BC=20=E4=B8=AD?=
 =?UTF-8?q?=E6=9D=91=20Bashurov?= <accounts@saitonakamura.me>
Date: Tue, 26 Apr 2022 21:45:04 +0300
Subject: [PATCH 1329/1603] Upgrade react-shallow-renderer to support react 18
 (#24442)

To a minimum version that support react 18
---
 packages/react-test-renderer/package.json |  2 +-
 yarn.lock                                 | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index b582f4ef6fad..b46c58b9ff49 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -20,7 +20,7 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "react-is": "^18.0.0",
-    "react-shallow-renderer": "^16.13.1",
+    "react-shallow-renderer": "^16.15.0",
     "scheduler": "^0.21.0"
   },
   "peerDependencies": {
diff --git a/yarn.lock b/yarn.lock
index f376e74f8c5a..f9d8524bd6c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13655,13 +13655,13 @@ react-native-web@0.0.0-26873b469:
     prop-types "^15.6.0"
     react-timer-mixin "^0.13.4"
 
-react-shallow-renderer@^16.13.1:
-  version "16.14.1"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
-  integrity sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==
+react-shallow-renderer@^16.15.0:
+  version "16.15.0"
+  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
+  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
   dependencies:
     object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0"
+    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
 
 react-timer-mixin@^0.13.4:
   version "0.13.4"

From 22edb9f777d27369fd2c1fad378f74e237b6dfd3 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 26 Apr 2022 16:28:48 -0400
Subject: [PATCH 1330/1603] React `version` field should match package.json
 (#24445)

The `version` field exported by the React package currently corresponds
to the `@next` release for that build. This updates the build script
to output the same version that is used in the package.json file.

It works by doing a find-and-replace of the React version after the
build has completed. This is a bit weird but it saves us from having
to build the `@next` and `@latest` releases separately; they are
identical except for the version numbers.
---
 .../react/src/__tests__/ReactVersion-test.js  | 26 ++++++
 scripts/rollup/build-all-release-channels.js  | 85 ++++++++++++++-----
 2 files changed, 90 insertions(+), 21 deletions(-)
 create mode 100644 packages/react/src/__tests__/ReactVersion-test.js

diff --git a/packages/react/src/__tests__/ReactVersion-test.js b/packages/react/src/__tests__/ReactVersion-test.js
new file mode 100644
index 000000000000..c163756e17c4
--- /dev/null
+++ b/packages/react/src/__tests__/ReactVersion-test.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @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/scripts/rollup/build-all-release-channels.js b/scripts/rollup/build-all-release-channels.js
index 4468a778d451..652d744eaaac 100644
--- a/scripts/rollup/build-all-release-channels.js
+++ b/scripts/rollup/build-all-release-channels.js
@@ -38,6 +38,20 @@ if (dateString.startsWith("'")) {
   dateString = dateString.substr(1, 8);
 }
 
+// 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 + '-' + nextChannelLabel + '-' + 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`
+);
+
 if (process.env.CIRCLE_NODE_TOTAL) {
   // In CI, we use multiple concurrent processes. Allocate half the processes to
   // build the stable channel, and the other half for experimental. Override
@@ -48,33 +62,21 @@ if (process.env.CIRCLE_NODE_TOTAL) {
   if (index < halfTotal) {
     const nodeTotal = halfTotal;
     const nodeIndex = index;
-    updateTheReactVersionThatDevToolsReads(
-      ReactVersion + '-' + sha + '-' + dateString
-    );
     buildForChannel('stable', nodeTotal, nodeIndex);
     processStable('./build');
   } else {
     const nodeTotal = total - halfTotal;
     const nodeIndex = index - halfTotal;
-    updateTheReactVersionThatDevToolsReads(
-      ReactVersion + '-experimental-' + sha + '-' + dateString
-    );
     buildForChannel('experimental', nodeTotal, nodeIndex);
     processExperimental('./build');
   }
 } else {
   // Running locally, no concurrency. Move each channel's build artifacts into
   // a temporary directory so that they don't conflict.
-  updateTheReactVersionThatDevToolsReads(
-    ReactVersion + '-' + sha + '-' + dateString
-  );
   buildForChannel('stable', '', '');
   const stableDir = tmp.dirSync().name;
   crossDeviceRenameSync('./build', stableDir);
   processStable(stableDir);
-  updateTheReactVersionThatDevToolsReads(
-    ReactVersion + '-experimental-' + sha + '-' + dateString
-  );
   buildForChannel('experimental', '', '');
   const experimentalDir = tmp.dirSync().name;
   crossDeviceRenameSync('./build', experimentalDir);
@@ -129,6 +131,10 @@ function processStable(buildDir) {
       true
     );
     fs.renameSync(buildDir + '/node_modules', buildDir + '/oss-stable');
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/oss-stable',
+      ReactVersion + '-' + nextChannelLabel + '-' + sha + '-' + dateString
+    );
 
     // Now do the semver ones
     const semverVersionsMap = new Map();
@@ -142,6 +148,10 @@ function processStable(buildDir) {
       defaultVersionIfNotFound,
       false
     );
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/oss-stable-semver',
+      ReactVersion
+    );
   }
 
   if (fs.existsSync(buildDir + '/facebook-www')) {
@@ -152,6 +162,10 @@ function processStable(buildDir) {
         fs.renameSync(filePath, filePath.replace('.js', '.classic.js'));
       }
     }
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/facebook-www',
+      ReactVersion + '-www-classic-' + sha + '-' + dateString
+    );
   }
 
   if (fs.existsSync(buildDir + '/sizes')) {
@@ -162,7 +176,7 @@ function processStable(buildDir) {
 function processExperimental(buildDir, version) {
   if (fs.existsSync(buildDir + '/node_modules')) {
     const defaultVersionIfNotFound =
-      '0.0.0' + '-' + 'experimental' + '-' + sha + '-' + dateString;
+      '0.0.0' + '-experimental-' + sha + '-' + dateString;
     const versionsMap = new Map();
     for (const moduleName in stablePackages) {
       versionsMap.set(moduleName, defaultVersionIfNotFound);
@@ -177,6 +191,13 @@ function processExperimental(buildDir, version) {
       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')) {
@@ -187,6 +208,10 @@ function processExperimental(buildDir, version) {
         fs.renameSync(filePath, filePath.replace('.js', '.modern.js'));
       }
     }
+    updatePlaceholderReactVersionInCompiledArtifacts(
+      buildDir + '/facebook-www',
+      ReactVersion + '-www-modern-' + sha + '-' + dateString
+    );
   }
 
   if (fs.existsSync(buildDir + '/sizes')) {
@@ -278,14 +303,32 @@ function updatePackageVersions(
   }
 }
 
-function updateTheReactVersionThatDevToolsReads(version) {
-  // Overwrite the ReactVersion module before the build script runs so that it
-  // is included in the final bundles. This only runs in CI, so it's fine to
-  // edit the source file.
-  fs.writeFileSync(
-    './packages/shared/ReactVersion.js',
-    `export default '${version}';\n`
-  );
+function updatePlaceholderReactVersionInCompiledArtifacts(
+  artifactsDirectory,
+  newVersion
+) {
+  // Update the version of React in the compiled artifacts by searching for
+  // the placeholder string and replacing it with a new one.
+  const artifactFilenames = String(
+    spawnSync('grep', [
+      '-lr',
+      PLACEHOLDER_REACT_VERSION,
+      '--',
+      artifactsDirectory,
+    ]).stdout
+  )
+    .trim()
+    .split('\n')
+    .filter(filename => filename.endsWith('.js'));
+
+  for (const artifactFilename of artifactFilenames) {
+    const originalText = fs.readFileSync(artifactFilename, 'utf8');
+    const replacedText = originalText.replace(
+      PLACEHOLDER_REACT_VERSION,
+      newVersion
+    );
+    fs.writeFileSync(artifactFilename, replacedText);
+  }
 }
 
 /**

From 72b7462fe73ea2f7bc296bc58670baf9677ce8b2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 26 Apr 2022 16:58:44 -0400
Subject: [PATCH 1331/1603] Bump local package.json versions for 18.1 release
 (#24447)

---
 packages/eslint-plugin-react-hooks/package.json | 2 +-
 packages/jest-react/package.json                | 6 +++---
 packages/react-art/package.json                 | 6 +++---
 packages/react-dom/package.json                 | 6 +++---
 packages/react-is/package.json                  | 2 +-
 packages/react-reconciler/package.json          | 6 +++---
 packages/react-refresh/package.json             | 2 +-
 packages/react-test-renderer/package.json       | 8 ++++----
 packages/react/package.json                     | 2 +-
 packages/scheduler/package.json                 | 2 +-
 packages/shared/ReactVersion.js                 | 2 +-
 packages/use-subscription/package.json          | 4 ++--
 packages/use-sync-external-store/package.json   | 2 +-
 13 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 1c99c2ffd135..3c0be3c704dc 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.4.0",
+  "version": "4.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
index 209a3f0ca772..38953825d10e 100644
--- a/packages/jest-react/package.json
+++ b/packages/jest-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-react",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "description": "Jest matchers and utilities for testing React components.",
   "main": "index.js",
   "repository": {
@@ -20,8 +20,8 @@
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
     "jest": "^23.0.1 || ^24.0.0 || ^25.1.0",
-    "react": "^18.0.0",
-    "react-test-renderer": "^18.0.0"
+    "react": "^18.1.0",
+    "react-test-renderer": "^18.1.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index ccd1c008ae4a..338bd862f0e6 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -25,10 +25,10 @@
     "art": "^0.10.1",
     "create-react-class": "^15.6.2",
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.21.0"
+    "scheduler": "^0.22.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.1.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 875de13b0c2f..4904cdb42371 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -18,10 +18,10 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.21.0"
+    "scheduler": "^0.22.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.1.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index d4ae919cdb5d..d618efa682df 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 329895dc4195..497f001765bc 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-reconciler",
   "description": "React package for creating custom renderers.",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "keywords": [
     "react"
   ],
@@ -26,11 +26,11 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.1.0"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.21.0"
+    "scheduler": "^0.22.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index 4ba195d0dd1f..a6b3e0190a55 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "0.11.0",
+  "version": "0.13.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index b46c58b9ff49..b28596e19238 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "18.0.0",
+  "version": "18.1.0",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -19,12 +19,12 @@
   },
   "homepage": "https://reactjs.org/",
   "dependencies": {
-    "react-is": "^18.0.0",
+    "react-is": "^18.1.0",
     "react-shallow-renderer": "^16.15.0",
-    "scheduler": "^0.21.0"
+    "scheduler": "^0.22.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0"
+    "react": "^18.1.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react/package.json b/packages/react/package.json
index 05c1338e0591..70c9dc2fe4b3 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "18.0.0",
+  "version": "18.1.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index d626ad2bb62e..676e9b867436 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scheduler",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "Cooperative scheduler for the browser environment.",
   "main": "index.js",
   "repository": {
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index 51aebd51ee57..73bd1b56e65f 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -13,4 +13,4 @@
 // 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 '18.0.0';
+export default '18.1.0';
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index c4f27b29d2b7..2305a1532b41 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-subscription",
   "description": "Reusable hooks",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
@@ -21,6 +21,6 @@
     "rxjs": "^5.5.6"
   },
   "dependencies": {
-    "use-sync-external-store": "^1.0.0"
+    "use-sync-external-store": "^1.1.0"
   }
 }
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index 1e974fbdbac0..f8ed0643afc7 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-sync-external-store",
   "description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 2633a6efc45ed6b4f9b73fa795fcc494dbc22ca9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 26 Apr 2022 16:58:53 -0400
Subject: [PATCH 1332/1603] Bump `@next` versions (#24448)

18.2 will be the next release
---
 ReactVersions.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index fbf12610ac9f..7bf673d45154 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,25 +18,25 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.1.0';
+const ReactVersion = '18.2.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
 const nextChannelLabel = 'next';
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '4.5.0',
-  'jest-react': '0.13.1',
+  'eslint-plugin-react-hooks': '4.6.0',
+  'jest-react': '0.14.0',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.28.0',
-  'react-refresh': '0.13.0',
+  'react-reconciler': '0.29.0',
+  'react-refresh': '0.14.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.7.0',
-  'use-sync-external-store': '1.1.0',
-  scheduler: '0.22.0',
+  'use-subscription': '1.8.0',
+  'use-sync-external-store': '1.2.0',
+  scheduler: '0.23.0',
 };
 
 // These packages do not exist in the @next or @latest channel, only

From 9c25728d10dac574761359f359e34ca1010a8b11 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Tue, 26 Apr 2022 22:05:29 +0100
Subject: [PATCH 1333/1603] Changelog for 18.1 (#24411)

* 1810-changelog

* Update CHANGELOG.md

Co-authored-by: Strek <ssharishkumar@gmail.com>

* Update CHANGELOG.md

Co-authored-by: Strek <ssharishkumar@gmail.com>
---
 CHANGELOG.md | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 36fbc4b5875f..e384b34d313f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,32 @@
+## 18.1.0 (TODO)
+
+### 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 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.

From d78460490be08435ee50025ea792ec4d5a5a999e Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Tue, 26 Apr 2022 22:07:33 +0100
Subject: [PATCH 1334/1603] Add date to changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e384b34d313f..ee55ca7e0825 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## 18.1.0 (TODO)
+## 18.1.0 (April 26, 2022)
 
 ### React DOM
 

From 53b95e5511c7cb5364de374a99da728cf256dc4b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 26 Apr 2022 17:09:08 -0400
Subject: [PATCH 1335/1603] Fill in date in changelog for 18.1 (#24449)


From 9f80a48ad464c9240ea7f9d3f37251559cf7fe7e Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Wed, 27 Apr 2022 02:03:08 +0100
Subject: [PATCH 1336/1603] Add missing item to the changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee55ca7e0825..bfb9dceff97c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 * 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. ([@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))

From 340060cccd21b47f364646c894a3406b0f0341ba Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 28 Apr 2022 16:03:34 +0100
Subject: [PATCH 1337/1603] Add @Andarist to changelog credits

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bfb9dceff97c..dcb99e0752a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@
 * 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. ([@acdlite](https://github.com/acdlite) in [#24421](https://github.com/facebook/react/pull/24421))
+* 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))

From ce13860281f833de8a3296b7a3dad9caced102e9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 28 Apr 2022 15:05:41 -0400
Subject: [PATCH 1338/1603] Remove enablePersistentOffscreenHostContainer flag
 (#24460)

This was a Fabric-related experiment that we ended up not shipping.
---
 .../src/ReactFabricHostConfig.js              |  32 ----
 .../src/createReactNoop.js                    | 179 +-----------------
 .../react-reconciler/src/ReactFiber.new.js    |  25 +--
 .../react-reconciler/src/ReactFiber.old.js    |  25 +--
 .../src/ReactFiberBeginWork.new.js            | 109 +----------
 .../src/ReactFiberBeginWork.old.js            | 109 +----------
 .../src/ReactFiberCompleteWork.new.js         |  72 +------
 .../src/ReactFiberCompleteWork.old.js         |  72 +------
 .../ReactFiberHostConfigWithNoPersistence.js  |   2 -
 .../src/ReactFiberThrow.new.js                |  25 ---
 .../src/ReactFiberThrow.old.js                |  25 ---
 .../src/forks/ReactFiberHostConfig.custom.js  |   4 -
 packages/shared/ReactFeatureFlags.js          |   1 -
 .../ReactFeatureFlags.native-fb-dynamic.js    |  18 +-
 .../forks/ReactFeatureFlags.native-fb.js      |   5 +-
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   2 -
 scripts/flow/xplat.js                         |   1 -
 24 files changed, 25 insertions(+), 688 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 81295f6e50f6..515c4e0f9665 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {ElementRef} from 'react';
 import type {
   HostComponent,
@@ -545,37 +544,6 @@ export function cloneInstance(
   };
 }
 
-// TODO: These two methods should be replaced with `createOffscreenInstance` and
-// `cloneOffscreenInstance`. I did it this way for now because the offscreen
-// instance is stored on an extra HostComponent fiber instead of the
-// OffscreenComponent fiber, and I didn't want to add an extra check to the
-// generic HostComponent path. Instead we should use the OffscreenComponent
-// fiber, but currently Fabric expects a 1:1 correspondence between Fabric
-// instances and host fibers, so I'm leaving this optimization for later once
-// we can confirm this won't break any downstream expectations.
-export function getOffscreenContainerType(): string {
-  return 'RCTView';
-}
-
-export function getOffscreenContainerProps(
-  mode: OffscreenMode,
-  children: ReactNodeList,
-): Props {
-  if (mode === 'hidden') {
-    return {
-      children,
-      style: {display: 'none'},
-    };
-  } else {
-    return {
-      children,
-      style: {
-        flex: 1,
-      },
-    };
-  }
-}
-
 export function cloneHiddenInstance(
   instance: Instance,
   type: string,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 8e4050dcfa33..13a0f49105c2 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -19,7 +19,7 @@ import type {
   TransitionTracingCallbacks,
 } from 'react-reconciler/src/ReactInternalTypes';
 import type {UpdateQueue} from 'react-reconciler/src/ReactUpdateQueue';
-import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
+import type {ReactNodeList} from 'shared/ReactTypes';
 import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
 import * as Scheduler from 'scheduler/unstable_mock';
@@ -595,20 +595,6 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           container.children = newChildren;
         },
 
-        getOffscreenContainerType(): string {
-          return 'offscreen';
-        },
-
-        getOffscreenContainerProps(
-          mode: OffscreenMode,
-          children: ReactNodeList,
-        ): Props {
-          return {
-            hidden: mode === 'hidden',
-            children,
-          };
-        },
-
         cloneHiddenInstance(
           instance: Instance,
           type: string,
@@ -721,9 +707,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
   function getChildren(root) {
     if (root) {
-      return useMutation
-        ? root.children
-        : removeOffscreenContainersFromChildren(root.children, false);
+      return root.children;
     } else {
       return null;
     }
@@ -731,169 +715,12 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
 
   function getPendingChildren(root) {
     if (root) {
-      return useMutation
-        ? root.children
-        : removeOffscreenContainersFromChildren(root.pendingChildren, false);
+      return root.children;
     } else {
       return null;
     }
   }
 
-  function removeOffscreenContainersFromChildren(children, hideNearestNode) {
-    // Mutation mode and persistent mode have different outputs for Offscreen
-    // and Suspense trees. Persistent mode adds an additional host node wrapper,
-    // whereas mutation mode does not.
-    //
-    // This function removes the offscreen host wrappers so that the output is
-    // consistent. If the offscreen node is hidden, it transfers the hiddenness
-    // to the child nodes, to mimic how it works in mutation mode. That way our
-    // tests don't have to fork tree assertions.
-    //
-    // So, it takes a tree that looks like this:
-    //
-    //    <offscreen hidden={true}>
-    //      <span>A</span>
-    //      <span>B</span>
-    //    </offscren>
-    //
-    // And turns it into this:
-    //
-    //   <span hidden={true}>A</span>
-    //   <span hidden={true}>B</span>
-    //
-    // We don't mutate the original tree, but instead return a copy.
-    //
-    // This function is only used by our test assertions, via the `getChildren`
-    // and `getChildrenAsJSX` methods.
-    let didClone = false;
-    const newChildren = [];
-    for (let i = 0; i < children.length; i++) {
-      const child = children[i];
-      const innerChildren = child.children;
-      if (innerChildren !== undefined) {
-        // This is a host instance instance
-        const instance: Instance = (child: any);
-        if (instance.type === 'offscreen') {
-          // This is an offscreen wrapper instance. Remove it from the tree
-          // and recursively return its children, as if it were a fragment.
-          didClone = true;
-          if (instance.text !== null) {
-            // If this offscreen tree contains only text, we replace it with
-            // a text child. Related to `shouldReplaceTextContent` feature.
-            const offscreenTextInstance: TextInstance = {
-              text: instance.text,
-              id: instanceCounter++,
-              parent: instance.parent,
-              hidden: hideNearestNode || instance.hidden,
-              context: instance.context,
-            };
-            // Hide from unit tests
-            Object.defineProperty(offscreenTextInstance, 'id', {
-              value: offscreenTextInstance.id,
-              enumerable: false,
-            });
-            Object.defineProperty(offscreenTextInstance, 'parent', {
-              value: offscreenTextInstance.parent,
-              enumerable: false,
-            });
-            Object.defineProperty(offscreenTextInstance, 'context', {
-              value: offscreenTextInstance.context,
-              enumerable: false,
-            });
-            newChildren.push(offscreenTextInstance);
-          } else {
-            // Skip the offscreen node and replace it with its children
-            const offscreenChildren = removeOffscreenContainersFromChildren(
-              innerChildren,
-              hideNearestNode || instance.hidden,
-            );
-            newChildren.push.apply(newChildren, offscreenChildren);
-          }
-        } else {
-          // This is a regular (non-offscreen) instance. If the nearest
-          // offscreen boundary is hidden, hide this node.
-          const hidden = hideNearestNode ? true : instance.hidden;
-          const clonedChildren = removeOffscreenContainersFromChildren(
-            instance.children,
-            // We never need to hide the children of this node, since if we're
-            // inside a hidden tree, then the hidden style will be applied to
-            // this node.
-            false,
-          );
-          if (
-            clonedChildren === instance.children &&
-            hidden === instance.hidden
-          ) {
-            // No changes. Reuse the original instance without cloning.
-            newChildren.push(instance);
-          } else {
-            didClone = true;
-            const clone: Instance = {
-              id: instance.id,
-              type: instance.type,
-              parent: instance.parent,
-              children: clonedChildren,
-              text: instance.text,
-              prop: instance.prop,
-              hidden: hideNearestNode ? true : instance.hidden,
-              context: instance.context,
-            };
-            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,
-            });
-            newChildren.push(clone);
-          }
-        }
-      } else {
-        // This is a text instance
-        const textInstance: TextInstance = (child: any);
-        if (hideNearestNode) {
-          didClone = true;
-          const clone = {
-            text: textInstance.text,
-            id: textInstance.id,
-            parent: textInstance.parent,
-            hidden: textInstance.hidden || hideNearestNode,
-            context: textInstance.context,
-          };
-          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,
-          });
-
-          newChildren.push(clone);
-        } else {
-          newChildren.push(textInstance);
-        }
-      }
-    }
-    // There are some tests that assume reference equality, so preserve it
-    // when possible. Alternatively, we could update the tests to compare the
-    // ids instead.
-    return didClone ? newChildren : children;
-  }
-
   function getChildrenAsJSX(root) {
     const children = childToJSX(getChildren(root), null);
     if (children === null) {
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index b28f1fee9b0e..33fc93ef9361 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -14,7 +14,7 @@ import type {RootTag} from './ReactRootTags';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes} from './ReactFiberLane.new';
-import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
+import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {
   OffscreenProps,
   OffscreenInstance,
@@ -32,10 +32,6 @@ import {
   enableTransitionTracing,
   enableDebugTracing,
 } from 'shared/ReactFeatureFlags';
-import {
-  supportsPersistence,
-  getOffscreenContainerType,
-} from './ReactFiberHostConfig';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
 import {
@@ -605,25 +601,6 @@ export function createFiberFromTypeAndProps(
   return fiber;
 }
 
-export function createOffscreenHostContainerFiber(
-  props: Props,
-  fiberMode: TypeOfMode,
-  lanes: Lanes,
-  key: null | string,
-): Fiber {
-  if (supportsPersistence) {
-    const type = getOffscreenContainerType();
-    const fiber = createFiber(HostComponent, props, key, fiberMode);
-    fiber.elementType = type;
-    fiber.type = type;
-    fiber.lanes = lanes;
-    return fiber;
-  } else {
-    // Only implemented in persistent mode
-    throw new Error('Not implemented.');
-  }
-}
-
 export function createFiberFromElement(
   element: ReactElement,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 5c4301977a3e..a65f460c6b27 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -14,7 +14,7 @@ import type {RootTag} from './ReactRootTags';
 import type {WorkTag} from './ReactWorkTags';
 import type {TypeOfMode} from './ReactTypeOfMode';
 import type {Lanes} from './ReactFiberLane.old';
-import type {SuspenseInstance, Props} from './ReactFiberHostConfig';
+import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {
   OffscreenProps,
   OffscreenInstance,
@@ -32,10 +32,6 @@ import {
   enableTransitionTracing,
   enableDebugTracing,
 } from 'shared/ReactFeatureFlags';
-import {
-  supportsPersistence,
-  getOffscreenContainerType,
-} from './ReactFiberHostConfig';
 import {NoFlags, Placement, StaticMask} from './ReactFiberFlags';
 import {ConcurrentRoot} from './ReactRootTags';
 import {
@@ -605,25 +601,6 @@ export function createFiberFromTypeAndProps(
   return fiber;
 }
 
-export function createOffscreenHostContainerFiber(
-  props: Props,
-  fiberMode: TypeOfMode,
-  lanes: Lanes,
-  key: null | string,
-): Fiber {
-  if (supportsPersistence) {
-    const type = getOffscreenContainerType();
-    const fiber = createFiber(HostComponent, props, key, fiberMode);
-    fiber.elementType = type;
-    fiber.type = type;
-    fiber.lanes = lanes;
-    return fiber;
-  } else {
-    // Only implemented in persistent mode
-    throw new Error('Not implemented.');
-  }
-}
-
 export function createFiberFromElement(
   element: ReactElement,
   mode: TypeOfMode,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 1538e32fca27..662ac5bbe59a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -102,7 +102,6 @@ import {
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
-  enablePersistentOffscreenHostContainer,
   enableTransitionTracing,
   enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
@@ -161,8 +160,6 @@ import {
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
-  supportsPersistence,
-  getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldError, shouldSuspend} from './ReactFiberReconciler';
@@ -226,7 +223,6 @@ import {
   createFiberFromFragment,
   createFiberFromOffscreen,
   createWorkInProgress,
-  createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.new';
 import {
@@ -241,7 +237,6 @@ import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.new';
 import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.new';
-import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.new';
 import is from 'shared/objectIs';
 import {
   getForksAtLevel,
@@ -800,67 +795,8 @@ function updateOffscreenComponent(
     pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
-  if (enablePersistentOffscreenHostContainer && supportsPersistence) {
-    // In persistent mode, the offscreen children are wrapped in a host node.
-    // TODO: Optimize this to use the OffscreenComponent fiber instead of
-    // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
-    // or some other infra that expects a HostComponent.
-    const isHidden =
-      nextProps.mode === 'hidden' &&
-      (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent);
-    const offscreenContainer = reconcileOffscreenHostContainer(
-      current,
-      workInProgress,
-      isHidden,
-      nextChildren,
-      renderLanes,
-    );
-    return offscreenContainer;
-  } else {
-    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-    return workInProgress.child;
-  }
-}
-
-function reconcileOffscreenHostContainer(
-  currentOffscreen: Fiber | null,
-  offscreen: Fiber,
-  isHidden: boolean,
-  children: any,
-  renderLanes: Lanes,
-) {
-  const containerProps = getOffscreenContainerProps(
-    isHidden ? 'hidden' : 'visible',
-    children,
-  );
-  let hostContainer;
-  if (currentOffscreen === null) {
-    hostContainer = createOffscreenHostContainerFiber(
-      containerProps,
-      offscreen.mode,
-      renderLanes,
-      null,
-    );
-  } else {
-    const currentHostContainer = currentOffscreen.child;
-    if (currentHostContainer === null) {
-      hostContainer = createOffscreenHostContainerFiber(
-        containerProps,
-        offscreen.mode,
-        renderLanes,
-        null,
-      );
-      hostContainer.flags |= Placement;
-    } else {
-      hostContainer = createWorkInProgress(
-        currentHostContainer,
-        containerProps,
-      );
-    }
-  }
-  hostContainer.return = offscreen;
-  offscreen.child = hostContainer;
-  return hostContainer;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
 }
 
 // Note: These happen to have identical begin phases, for now. We shouldn't hold
@@ -2575,24 +2511,6 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
-      // In persistent mode, the offscreen children are wrapped in a host node.
-      // We need to complete it now, because we're going to skip over its normal
-      // complete phase and go straight to rendering the fallback.
-      const currentOffscreenContainer = currentPrimaryChildFragment.child;
-      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
-      const containerProps = getOffscreenContainerProps(
-        'hidden',
-        primaryChildren,
-      );
-      offscreenContainer.pendingProps = containerProps;
-      offscreenContainer.memoizedProps = containerProps;
-      completeSuspendedOffscreenHostContainer(
-        currentOffscreenContainer,
-        offscreenContainer,
-      );
-    }
-
     // 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.
@@ -2602,29 +2520,6 @@ function updateSuspenseFallbackChildren(
       currentPrimaryChildFragment,
       primaryChildProps,
     );
-
-    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
-      // In persistent mode, the offscreen children are wrapped in a host node.
-      // We need to complete it now, because we're going to skip over its normal
-      // complete phase and go straight to rendering the fallback.
-      const currentOffscreenContainer = currentPrimaryChildFragment.child;
-      if (currentOffscreenContainer !== null) {
-        const isHidden = true;
-        const offscreenContainer = reconcileOffscreenHostContainer(
-          currentPrimaryChildFragment,
-          primaryChildFragment,
-          isHidden,
-          primaryChildren,
-          renderLanes,
-        );
-        offscreenContainer.memoizedProps = offscreenContainer.pendingProps;
-        completeSuspendedOffscreenHostContainer(
-          currentOffscreenContainer,
-          offscreenContainer,
-        );
-      }
-    }
-
     // 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.)
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index c50ca6357a5d..81815280e07e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -102,7 +102,6 @@ import {
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
-  enablePersistentOffscreenHostContainer,
   enableTransitionTracing,
   enableLegacyHidden,
 } from 'shared/ReactFeatureFlags';
@@ -161,8 +160,6 @@ import {
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
-  supportsPersistence,
-  getOffscreenContainerProps,
 } from './ReactFiberHostConfig';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import {shouldError, shouldSuspend} from './ReactFiberReconciler';
@@ -226,7 +223,6 @@ import {
   createFiberFromFragment,
   createFiberFromOffscreen,
   createWorkInProgress,
-  createOffscreenHostContainerFiber,
   isSimpleFunctionComponent,
 } from './ReactFiber.old';
 import {
@@ -241,7 +237,6 @@ import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
 import {createCapturedValue} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.old';
-import {completeSuspendedOffscreenHostContainer} from './ReactFiberCompleteWork.old';
 import is from 'shared/objectIs';
 import {
   getForksAtLevel,
@@ -800,67 +795,8 @@ function updateOffscreenComponent(
     pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
-  if (enablePersistentOffscreenHostContainer && supportsPersistence) {
-    // In persistent mode, the offscreen children are wrapped in a host node.
-    // TODO: Optimize this to use the OffscreenComponent fiber instead of
-    // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
-    // or some other infra that expects a HostComponent.
-    const isHidden =
-      nextProps.mode === 'hidden' &&
-      (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent);
-    const offscreenContainer = reconcileOffscreenHostContainer(
-      current,
-      workInProgress,
-      isHidden,
-      nextChildren,
-      renderLanes,
-    );
-    return offscreenContainer;
-  } else {
-    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
-    return workInProgress.child;
-  }
-}
-
-function reconcileOffscreenHostContainer(
-  currentOffscreen: Fiber | null,
-  offscreen: Fiber,
-  isHidden: boolean,
-  children: any,
-  renderLanes: Lanes,
-) {
-  const containerProps = getOffscreenContainerProps(
-    isHidden ? 'hidden' : 'visible',
-    children,
-  );
-  let hostContainer;
-  if (currentOffscreen === null) {
-    hostContainer = createOffscreenHostContainerFiber(
-      containerProps,
-      offscreen.mode,
-      renderLanes,
-      null,
-    );
-  } else {
-    const currentHostContainer = currentOffscreen.child;
-    if (currentHostContainer === null) {
-      hostContainer = createOffscreenHostContainerFiber(
-        containerProps,
-        offscreen.mode,
-        renderLanes,
-        null,
-      );
-      hostContainer.flags |= Placement;
-    } else {
-      hostContainer = createWorkInProgress(
-        currentHostContainer,
-        containerProps,
-      );
-    }
-  }
-  hostContainer.return = offscreen;
-  offscreen.child = hostContainer;
-  return hostContainer;
+  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
+  return workInProgress.child;
 }
 
 // Note: These happen to have identical begin phases, for now. We shouldn't hold
@@ -2575,24 +2511,6 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
-      // In persistent mode, the offscreen children are wrapped in a host node.
-      // We need to complete it now, because we're going to skip over its normal
-      // complete phase and go straight to rendering the fallback.
-      const currentOffscreenContainer = currentPrimaryChildFragment.child;
-      const offscreenContainer: Fiber = (primaryChildFragment.child: any);
-      const containerProps = getOffscreenContainerProps(
-        'hidden',
-        primaryChildren,
-      );
-      offscreenContainer.pendingProps = containerProps;
-      offscreenContainer.memoizedProps = containerProps;
-      completeSuspendedOffscreenHostContainer(
-        currentOffscreenContainer,
-        offscreenContainer,
-      );
-    }
-
     // 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.
@@ -2602,29 +2520,6 @@ function updateSuspenseFallbackChildren(
       currentPrimaryChildFragment,
       primaryChildProps,
     );
-
-    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
-      // In persistent mode, the offscreen children are wrapped in a host node.
-      // We need to complete it now, because we're going to skip over its normal
-      // complete phase and go straight to rendering the fallback.
-      const currentOffscreenContainer = currentPrimaryChildFragment.child;
-      if (currentOffscreenContainer !== null) {
-        const isHidden = true;
-        const offscreenContainer = reconcileOffscreenHostContainer(
-          currentPrimaryChildFragment,
-          primaryChildFragment,
-          isHidden,
-          primaryChildren,
-          renderLanes,
-        );
-        offscreenContainer.memoizedProps = offscreenContainer.pendingProps;
-        completeSuspendedOffscreenHostContainer(
-          currentOffscreenContainer,
-          offscreenContainer,
-        );
-      }
-    }
-
     // 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.)
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 4cbae604140b..fe8f93e4d219 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -141,7 +141,6 @@ import {
   enableProfilerTimer,
   enableCache,
   enableSuspenseLayoutEffectSemantics,
-  enablePersistentOffscreenHostContainer,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -347,11 +346,7 @@ if (supportsMutation) {
         if (child !== null) {
           child.return = node;
         }
-        if (enablePersistentOffscreenHostContainer) {
-          appendAllChildren(parent, node, false, false);
-        } else {
-          appendAllChildren(parent, node, true, true);
-        }
+        appendAllChildren(parent, node, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -416,11 +411,7 @@ if (supportsMutation) {
         if (child !== null) {
           child.return = node;
         }
-        if (enablePersistentOffscreenHostContainer) {
-          appendAllChildrenToContainer(containerChildSet, node, false, false);
-        } else {
-          appendAllChildrenToContainer(containerChildSet, node, true, true);
-        }
+        appendAllChildrenToContainer(containerChildSet, node, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -768,65 +759,6 @@ function bubbleProperties(completedWork: Fiber) {
   return didBailout;
 }
 
-export function completeSuspendedOffscreenHostContainer(
-  current: Fiber | null,
-  workInProgress: Fiber,
-) {
-  // This is a fork of the complete phase for HostComponent. We use it when
-  // a suspense tree is in its fallback state, because in that case the primary
-  // tree that includes the offscreen boundary is skipped over without a
-  // regular complete phase.
-  //
-  // We can optimize this path further by inlining the update logic for
-  // offscreen instances specifically, i.e. skipping the `prepareUpdate` call.
-  const rootContainerInstance = getRootHostContainer();
-  const type = workInProgress.type;
-  const newProps = workInProgress.memoizedProps;
-  if (current !== null) {
-    updateHostComponent(
-      current,
-      workInProgress,
-      type,
-      newProps,
-      rootContainerInstance,
-    );
-  } else {
-    const currentHostContext = getHostContext();
-    const instance = createInstance(
-      type,
-      newProps,
-      rootContainerInstance,
-      currentHostContext,
-      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,
-        rootContainerInstance,
-        currentHostContext,
-      )
-    ) {
-      markUpdate(workInProgress);
-    }
-
-    if (workInProgress.ref !== null) {
-      // If there is a ref on a host node we need to schedule a callback
-      markRef(workInProgress);
-    }
-  }
-  bubbleProperties(workInProgress);
-}
-
 function completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index dd2703f396ee..abf1deb9ff38 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -141,7 +141,6 @@ import {
   enableProfilerTimer,
   enableCache,
   enableSuspenseLayoutEffectSemantics,
-  enablePersistentOffscreenHostContainer,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -347,11 +346,7 @@ if (supportsMutation) {
         if (child !== null) {
           child.return = node;
         }
-        if (enablePersistentOffscreenHostContainer) {
-          appendAllChildren(parent, node, false, false);
-        } else {
-          appendAllChildren(parent, node, true, true);
-        }
+        appendAllChildren(parent, node, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -416,11 +411,7 @@ if (supportsMutation) {
         if (child !== null) {
           child.return = node;
         }
-        if (enablePersistentOffscreenHostContainer) {
-          appendAllChildrenToContainer(containerChildSet, node, false, false);
-        } else {
-          appendAllChildrenToContainer(containerChildSet, node, true, true);
-        }
+        appendAllChildrenToContainer(containerChildSet, node, true, true);
       } else if (node.child !== null) {
         node.child.return = node;
         node = node.child;
@@ -768,65 +759,6 @@ function bubbleProperties(completedWork: Fiber) {
   return didBailout;
 }
 
-export function completeSuspendedOffscreenHostContainer(
-  current: Fiber | null,
-  workInProgress: Fiber,
-) {
-  // This is a fork of the complete phase for HostComponent. We use it when
-  // a suspense tree is in its fallback state, because in that case the primary
-  // tree that includes the offscreen boundary is skipped over without a
-  // regular complete phase.
-  //
-  // We can optimize this path further by inlining the update logic for
-  // offscreen instances specifically, i.e. skipping the `prepareUpdate` call.
-  const rootContainerInstance = getRootHostContainer();
-  const type = workInProgress.type;
-  const newProps = workInProgress.memoizedProps;
-  if (current !== null) {
-    updateHostComponent(
-      current,
-      workInProgress,
-      type,
-      newProps,
-      rootContainerInstance,
-    );
-  } else {
-    const currentHostContext = getHostContext();
-    const instance = createInstance(
-      type,
-      newProps,
-      rootContainerInstance,
-      currentHostContext,
-      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,
-        rootContainerInstance,
-        currentHostContext,
-      )
-    ) {
-      markUpdate(workInProgress);
-    }
-
-    if (workInProgress.ref !== null) {
-      // If there is a ref on a host node we need to schedule a callback
-      markRef(workInProgress);
-    }
-  }
-  bubbleProperties(workInProgress);
-}
-
 function completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
index 9f194fbc8a8d..c34449f6a246 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js
@@ -25,7 +25,5 @@ export const createContainerChildSet = shim;
 export const appendChildToContainerChildSet = shim;
 export const finalizeContainerChildren = shim;
 export const replaceContainerChildren = shim;
-export const getOffscreenContainerType = shim;
-export const getOffscreenContainerProps = shim;
 export const cloneHiddenInstance = shim;
 export const cloneHiddenTextInstance = shim;
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 7db27ba935d0..9a3d1b619235 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -34,17 +34,12 @@ import {
   ForceUpdateForLegacySuspense,
   ForceClientRender,
 } from './ReactFiberFlags';
-import {
-  supportsPersistence,
-  getOffscreenContainerProps,
-} from './ReactFiberHostConfig';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableLazyContextPropagation,
   enableUpdaterTracking,
-  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -336,26 +331,6 @@ function markSuspenseBoundaryShouldCapture(
       // all lifecycle effect tags.
       sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
-      if (supportsPersistence && enablePersistentOffscreenHostContainer) {
-        // Another legacy Suspense quirk. In persistent mode, if this is the
-        // initial mount, override the props of the host container to hide
-        // its contents.
-        const currentSuspenseBoundary = suspenseBoundary.alternate;
-        if (currentSuspenseBoundary === null) {
-          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-          const offscreenContainer = offscreenFiber.child;
-          if (offscreenContainer !== null) {
-            const children = offscreenContainer.memoizedProps.children;
-            const containerProps = getOffscreenContainerProps(
-              'hidden',
-              children,
-            );
-            offscreenContainer.pendingProps = containerProps;
-            offscreenContainer.memoizedProps = containerProps;
-          }
-        }
-      }
-
       if (sourceFiber.tag === ClassComponent) {
         const currentSourceFiber = sourceFiber.alternate;
         if (currentSourceFiber === null) {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index a8e75e9ce661..66f91a69d343 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -34,17 +34,12 @@ import {
   ForceUpdateForLegacySuspense,
   ForceClientRender,
 } from './ReactFiberFlags';
-import {
-  supportsPersistence,
-  getOffscreenContainerProps,
-} from './ReactFiberHostConfig';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
   enableLazyContextPropagation,
   enableUpdaterTracking,
-  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
@@ -336,26 +331,6 @@ function markSuspenseBoundaryShouldCapture(
       // all lifecycle effect tags.
       sourceFiber.flags &= ~(LifecycleEffectMask | Incomplete);
 
-      if (supportsPersistence && enablePersistentOffscreenHostContainer) {
-        // Another legacy Suspense quirk. In persistent mode, if this is the
-        // initial mount, override the props of the host container to hide
-        // its contents.
-        const currentSuspenseBoundary = suspenseBoundary.alternate;
-        if (currentSuspenseBoundary === null) {
-          const offscreenFiber: Fiber = (suspenseBoundary.child: any);
-          const offscreenContainer = offscreenFiber.child;
-          if (offscreenContainer !== null) {
-            const children = offscreenContainer.memoizedProps.children;
-            const containerProps = getOffscreenContainerProps(
-              'hidden',
-              children,
-            );
-            offscreenContainer.pendingProps = containerProps;
-            offscreenContainer.memoizedProps = containerProps;
-          }
-        }
-      }
-
       if (sourceFiber.tag === ClassComponent) {
         const currentSourceFiber = sourceFiber.alternate;
         if (currentSourceFiber === null) {
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index f2705b7b1df4..e8856f00ae40 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -121,10 +121,6 @@ export const appendChildToContainerChildSet =
 export const finalizeContainerChildren =
   $$$hostConfig.finalizeContainerChildren;
 export const replaceContainerChildren = $$$hostConfig.replaceContainerChildren;
-export const getOffscreenContainerType =
-  $$$hostConfig.getOffscreenContainerType;
-export const getOffscreenContainerProps =
-  $$$hostConfig.getOffscreenContainerProps;
 export const cloneHiddenInstance = $$$hostConfig.cloneHiddenInstance;
 export const cloneHiddenTextInstance = $$$hostConfig.cloneHiddenTextInstance;
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 218a3514f0f3..7b76a1f7524c 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -16,7 +16,6 @@
 export const warnAboutDeprecatedLifecycles = true;
 export const enableComponentStackLocations = true;
 export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
-export const enablePersistentOffscreenHostContainer = false;
 
 // -----------------------------------------------------------------------------
 // Land or remove (moderate effort)
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
index 63f75e83b765..7138679c536e 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js
@@ -7,8 +7,10 @@
  * @flow strict
  */
 
-import typeof * as ExportsType from './ReactFeatureFlags.native-fb-dynamic';
-import typeof * as DynamicFlagsType from 'ReactNativeInternalFeatureFlags';
+// NOTE: There are no flags, currently. Uncomment the stuff below if we add one.
+
+// import typeof * as ExportsType from './ReactFeatureFlags.native-fb-dynamic';
+// import typeof * as DynamicFlagsType from 'ReactNativeInternalFeatureFlags';
 
 // 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,
@@ -20,10 +22,8 @@ import typeof * as DynamicFlagsType from 'ReactNativeInternalFeatureFlags';
 // flag here but it won't be set to `true` in any of our test runs. Need to
 // update the test configuration.
 
-export const enablePersistentOffscreenHostContainer = __VARIANT__;
-
-// Flow magic to verify the exports of this file match the original version.
-// eslint-disable-next-line no-unused-vars
-type Check<_X, Y: _X, X: Y = _X> = null;
-// eslint-disable-next-line no-unused-expressions
-(null: Check<ExportsType, DynamicFlagsType>);
+// // Flow magic to verify the exports of this file match the original version.
+// // eslint-disable-next-line no-unused-vars
+// type Check<_X, Y: _X, X: Y = _X> = null;
+// // eslint-disable-next-line no-unused-expressions
+// (null: Check<ExportsType, DynamicFlagsType>);
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 6baef5948997..ea80fba1da24 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -10,13 +10,14 @@
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as ExportsType from './ReactFeatureFlags.native-fb';
 
+// NOTE: There are no flags, currently. Uncomment the stuff below if we add one.
 // Re-export dynamic flags from the internal module. Intentionally using *
 // because this import is compiled to a `require` call.
-import * as dynamicFlags from 'ReactNativeInternalFeatureFlags';
+// import * as dynamicFlags from 'ReactNativeInternalFeatureFlags';
 
 // 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 {enablePersistentOffscreenHostContainer} = dynamicFlags;
+// export const {} = dynamicFlags;
 
 // The rest of the flags are static for better dead code elimination.
 export const enableDebugTracing = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index e9398deee80d..9a5c2bca40a7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -62,7 +62,6 @@ export const enableLazyContextPropagation = false;
 export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
-export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index c3ca7f565c73..157fda232ed3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -62,7 +62,6 @@ export const enableLazyContextPropagation = false;
 export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
-export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index d186c1852e6b..0a770e1438a8 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -61,7 +61,6 @@ export const enableLazyContextPropagation = false;
 export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
-export const enablePersistentOffscreenHostContainer = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableServerContext = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index e258b155c2c1..157f9d6a4152 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -62,7 +62,6 @@ export const enableLazyContextPropagation = false;
 export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
-export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d173aaa1b30a..072c58b5c8ec 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -62,7 +62,6 @@ export const enableLazyContextPropagation = false;
 export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = false;
-export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index c2842d955938..a607e3ea7f71 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -62,7 +62,6 @@ export const enableLazyContextPropagation = false;
 export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = true;
 export const allowConcurrentByDefault = true;
-export const enablePersistentOffscreenHostContainer = false;
 export const enableCustomElementPropertySupport = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 253cb58a2d1f..7a89e41ad54f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -60,6 +60,5 @@ export const disableNativeComponentFrames = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableStrictEffects = false;
 export const allowConcurrentByDefault = true;
-export const enablePersistentOffscreenHostContainer = 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
index 5a8f89bae840..a1932e21c4e1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -99,8 +99,6 @@ export const allowConcurrentByDefault = true;
 
 export const deletedTreeCleanUpLevel = 3;
 
-export const enablePersistentOffscreenHostContainer = false;
-
 export const consoleManagedByDevToolsDuringStrictMode = true;
 export const enableServerContext = true;
 
diff --git a/scripts/flow/xplat.js b/scripts/flow/xplat.js
index c013af3e125d..45c12d2a6f60 100644
--- a/scripts/flow/xplat.js
+++ b/scripts/flow/xplat.js
@@ -8,5 +8,4 @@
  */
 
 declare module 'ReactNativeInternalFeatureFlags' {
-  declare export var enablePersistentOffscreenHostContainer: boolean;
 }

From 6c36aee9443d4b30d13137dbb1660f73522aa3c9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 2 May 2022 18:17:01 -0700
Subject: [PATCH 1339/1603] Fixed wrong method call for LRU cache (#24477)

---
 .../react-devtools-shared/src/inspectedElementMutableSource.js  | 2 +-
 packages/react-devtools-shared/src/types.js                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index b5ea32b96082..d91d8de8c1de 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -102,7 +102,7 @@ export function inspectElement({
       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.remove(id);
+        inspectedElementCache.del(id);
 
         throw Error(`Element "${id}" not found`);
 
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index 6eb3e2f3a768..ca0943ac9234 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -86,9 +86,9 @@ 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,
-  remove: (key: K) => void,
   reset: () => void,
   set: (key: K, value: V) => void,
 |};

From 99eef9e2df7b6aade461a1a958eb3838239e72c4 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 3 May 2022 10:16:53 -0400
Subject: [PATCH 1340/1603] Hide children of Offscreen after destroy effects
 (#24446)

---
 .../src/ReactFiberCommitWork.new.js           | 67 +++++++++++++------
 .../src/ReactFiberCommitWork.old.js           | 67 +++++++++++++------
 packages/shared/ReactFeatureFlags.js          |  1 +
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 12 files changed, 106 insertions(+), 38 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6712e27bd28e..0c89aba8cdbd 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -42,6 +42,7 @@ import {
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
+  enableFlipOffscreenUnhideOrder,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2270,28 +2271,56 @@ function commitMutationEffectsOnFiber(
         const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
-        if (supportsMutation) {
-          // TODO: This needs to run whenever there's an insertion or update
-          // inside a hidden Offscreen tree.
-          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-        }
-
-        if (enableSuspenseLayoutEffectSemantics) {
-          if (isHidden) {
-            if (!wasHidden) {
-              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                nextEffect = offscreenBoundary;
-                let offscreenChild = offscreenBoundary.child;
-                while (offscreenChild !== null) {
-                  nextEffect = offscreenChild;
-                  disappearLayoutEffects_begin(offscreenChild);
-                  offscreenChild = offscreenChild.sibling;
+        if (enableFlipOffscreenUnhideOrder) {
+          if (enableSuspenseLayoutEffectSemantics) {
+            if (isHidden) {
+              if (!wasHidden) {
+                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                  nextEffect = offscreenBoundary;
+                  let offscreenChild = offscreenBoundary.child;
+                  while (offscreenChild !== null) {
+                    nextEffect = offscreenChild;
+                    disappearLayoutEffects_begin(offscreenChild);
+                    offscreenChild = offscreenChild.sibling;
+                  }
                 }
               }
+            } else {
+              if (wasHidden) {
+                // TODO: Move re-appear call here for symmetry?
+              }
             }
-          } else {
-            if (wasHidden) {
-              // TODO: Move re-appear call here for symmetry?
+          }
+
+          if (supportsMutation) {
+            // TODO: This needs to run whenever there's an insertion or update
+            // inside a hidden Offscreen tree.
+            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+          }
+        } else {
+          if (supportsMutation) {
+            // TODO: This needs to run whenever there's an insertion or update
+            // inside a hidden Offscreen tree.
+            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+          }
+
+          if (enableSuspenseLayoutEffectSemantics) {
+            if (isHidden) {
+              if (!wasHidden) {
+                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                  nextEffect = offscreenBoundary;
+                  let offscreenChild = offscreenBoundary.child;
+                  while (offscreenChild !== null) {
+                    nextEffect = offscreenChild;
+                    disappearLayoutEffects_begin(offscreenChild);
+                    offscreenChild = offscreenChild.sibling;
+                  }
+                }
+              }
+            } else {
+              if (wasHidden) {
+                // TODO: Move re-appear call here for symmetry?
+              }
             }
           }
         }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index a00355b6f5fc..0cd78fdc13a3 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -42,6 +42,7 @@ import {
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
+  enableFlipOffscreenUnhideOrder,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2270,28 +2271,56 @@ function commitMutationEffectsOnFiber(
         const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
-        if (supportsMutation) {
-          // TODO: This needs to run whenever there's an insertion or update
-          // inside a hidden Offscreen tree.
-          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-        }
-
-        if (enableSuspenseLayoutEffectSemantics) {
-          if (isHidden) {
-            if (!wasHidden) {
-              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                nextEffect = offscreenBoundary;
-                let offscreenChild = offscreenBoundary.child;
-                while (offscreenChild !== null) {
-                  nextEffect = offscreenChild;
-                  disappearLayoutEffects_begin(offscreenChild);
-                  offscreenChild = offscreenChild.sibling;
+        if (enableFlipOffscreenUnhideOrder) {
+          if (enableSuspenseLayoutEffectSemantics) {
+            if (isHidden) {
+              if (!wasHidden) {
+                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                  nextEffect = offscreenBoundary;
+                  let offscreenChild = offscreenBoundary.child;
+                  while (offscreenChild !== null) {
+                    nextEffect = offscreenChild;
+                    disappearLayoutEffects_begin(offscreenChild);
+                    offscreenChild = offscreenChild.sibling;
+                  }
                 }
               }
+            } else {
+              if (wasHidden) {
+                // TODO: Move re-appear call here for symmetry?
+              }
             }
-          } else {
-            if (wasHidden) {
-              // TODO: Move re-appear call here for symmetry?
+          }
+
+          if (supportsMutation) {
+            // TODO: This needs to run whenever there's an insertion or update
+            // inside a hidden Offscreen tree.
+            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+          }
+        } else {
+          if (supportsMutation) {
+            // TODO: This needs to run whenever there's an insertion or update
+            // inside a hidden Offscreen tree.
+            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+          }
+
+          if (enableSuspenseLayoutEffectSemantics) {
+            if (isHidden) {
+              if (!wasHidden) {
+                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                  nextEffect = offscreenBoundary;
+                  let offscreenChild = offscreenBoundary.child;
+                  while (offscreenChild !== null) {
+                    nextEffect = offscreenChild;
+                    disappearLayoutEffects_begin(offscreenChild);
+                    offscreenChild = offscreenChild.sibling;
+                  }
+                }
+              }
+            } else {
+              if (wasHidden) {
+                // TODO: Move re-appear call here for symmetry?
+              }
             }
           }
         }
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 7b76a1f7524c..c3c65214e4b5 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -38,6 +38,7 @@ export const skipUnmountedBoundaries = true;
 //
 // TODO: Finish rolling out in www
 export const enableSuspenseLayoutEffectSemantics = true;
+export const enableFlipOffscreenUnhideOrder = false;
 
 // TODO: Finish rolling out in www
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index ea80fba1da24..dcd338c5bc97 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -59,6 +59,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
+export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = true;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 9a5c2bca40a7..7bd8fd832080 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
+export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 157fda232ed3..f24d692b3a16 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
+export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 0a770e1438a8..69be47410039 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -44,6 +44,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
+export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 157f9d6a4152..6100e7db998d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
+export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 072c58b5c8ec..bce4d6c114b0 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
+export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index a607e3ea7f71..22b96d4ec7a3 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -49,6 +49,7 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = true;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
+export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 7a89e41ad54f..ab0a2e1aa41c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -29,6 +29,7 @@ export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableSymbolFallbackForWWW = __VARIANT__;
+export const enableFlipOffscreenUnhideOrder = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a1932e21c4e1..2f222b2e6140 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,6 +33,7 @@ export const {
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
   enableClientRenderFallbackOnTextMismatch,
+  enableFlipOffscreenUnhideOrder,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From b4eb0ad71fb365cb760a5b9ab1a1e2dd6193fac7 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 3 May 2022 11:07:47 -0700
Subject: [PATCH 1341/1603] Do not replay erroring beginWork with
 invokeGuardedCallback when suspended or previously errored (#24480)

When hydrating a suspense boundary an error or a suspending fiber can often lead to a cascade of hydration errors. While in many cases these errors are simply discarded (e.g. when teh root does not commit and we fall back to client rendering) the use of invokeGuardedCallback can lead to many of these errors appearing as uncaught in the browser console. This change avoids error replaying using invokeGuardedCallback when we are hydrating a suspense boundary and have either already suspended or we have one previous error which was replayed.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 441 +++++++++++++++++-
 .../src/ReactFiberHydrationContext.new.js     |   7 +
 .../src/ReactFiberHydrationContext.old.js     |   7 +
 .../src/ReactFiberWorkLoop.new.js             |  11 +-
 .../src/ReactFiberWorkLoop.old.js             |  11 +-
 5 files changed, 468 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 72ed9f8775da..105fe10eef57 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -2850,8 +2850,84 @@ describe('ReactDOMFizzServer', () => {
     });
   });
 
+  // @gate experimental
+  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(async () => {
+      const {pipe} = ReactDOMFizzServer.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.unstable_yieldValue(
+          'Logged recoverable error: ' + error.message,
+        );
+      },
+    });
+    Scheduler.unstable_flushAll();
+
+    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();
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>A</p>
+        <h2 name="hello">world</h2>
+      </div>,
+    );
+  });
+
   // @gate experimental && enableClientRenderFallbackOnTextMismatch
-  it('#24384: Suspending should halt hydration warnings while still allowing siblings to warm up', async () => {
+  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 => {
@@ -3092,4 +3168,367 @@ describe('ReactDOMFizzServer', () => {
 
     expect(Scheduler).toFlushAndYield([]);
   });
+
+  // @gate experimental && __DEV__
+  it('does not invokeGuardedCallback for errors after the first hydration error', async () => {
+    // We can't use the toErrorDev helper here because this is async.
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      if (args.length > 1) {
+        if (typeof args[1] === 'object') {
+          mockError(args[0].split('\n')[0]);
+          return;
+        }
+      }
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
+    let isClient = false;
+    let shouldThrow = true;
+
+    function ThrowUntilOnClient({children, message}) {
+      if (isClient && shouldThrow) {
+        Scheduler.unstable_yieldValue('throwing: ' + message);
+        throw new Error(message);
+      }
+      return children;
+    }
+
+    function StopThrowingOnClient() {
+      if (isClient) {
+        shouldThrow = false;
+      }
+      return null;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ThrowUntilOnClient message="first error">
+              <h1>one</h1>
+            </ThrowUntilOnClient>
+            <ThrowUntilOnClient message="second error">
+              <h2>two</h2>
+            </ThrowUntilOnClient>
+            <ThrowUntilOnClient message="third error">
+              <h3>three</h3>
+            </ThrowUntilOnClient>
+            <StopThrowingOnClient />
+          </Suspense>
+        </div>
+      );
+    };
+
+    try {
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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.unstable_yieldValue(
+            'Logged recoverable error: ' + error.message,
+          );
+        },
+      });
+      expect(Scheduler).toFlushAndYield([
+        'throwing: first error',
+        // this repeated first error is the invokeGuardedCallback throw
+        'throwing: first error',
+        // these are actually thrown during render but no iGC repeat and no queueing as hydration errors
+        'throwing: second error',
+        'throwing: third error',
+        // all hydration errors are still queued
+        'Logged recoverable error: first error',
+        'Logged recoverable error: second error',
+        'Logged recoverable error: third error',
+        // other recoverable errors are queued as hydration errors
+        'Logged recoverable error: There was an error while hydrating this Suspense boundary. Switched to client rendering.',
+      ]);
+      // These Uncaught error calls are the error reported by the runtime (jsdom here, browser in actual use)
+      // when invokeGuardedCallback is used to replay an error in dev using event dispatching in the document
+      expect(mockError.mock.calls).toEqual([
+        // we only get one because we suppress invokeGuardedCallback after the first one when hydrating in a
+        // suspense boundary
+        ['Error: Uncaught [Error: first error]'],
+      ]);
+      mockError.mockClear();
+
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <h1>one</h1>
+          <h2>two</h2>
+          <h3>three</h3>
+        </div>,
+      );
+
+      expect(Scheduler).toFlushAndYield([]);
+      expect(mockError.mock.calls).toEqual([]);
+    } finally {
+      console.error = originalConsoleError;
+    }
+  });
+
+  // @gate experimental
+  it('does not invokeGuardedCallback for errors after a preceding fiber suspends', async () => {
+    // We can't use the toErrorDev helper here because this is async.
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      if (args.length > 1) {
+        if (typeof args[1] === 'object') {
+          mockError(args[0].split('\n')[0]);
+          return;
+        }
+      }
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
+    let isClient = false;
+    let shouldThrow = true;
+    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.unstable_yieldValue('suspending');
+        throw promise;
+      }
+      return null;
+    }
+
+    function ThrowUntilOnClient({children, message}) {
+      if (isClient && shouldThrow) {
+        Scheduler.unstable_yieldValue('throwing: ' + message);
+        throw new Error(message);
+      }
+      return children;
+    }
+
+    function StopThrowingOnClient() {
+      if (isClient) {
+        shouldThrow = false;
+      }
+      return null;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ComponentThatSuspendsOnClient />
+            <ThrowUntilOnClient message="first error">
+              <h1>one</h1>
+            </ThrowUntilOnClient>
+            <ThrowUntilOnClient message="second error">
+              <h2>two</h2>
+            </ThrowUntilOnClient>
+            <ThrowUntilOnClient message="third error">
+              <h3>three</h3>
+            </ThrowUntilOnClient>
+            <StopThrowingOnClient />
+          </Suspense>
+        </div>
+      );
+    };
+
+    try {
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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.unstable_yieldValue(
+            'Logged recoverable error: ' + error.message,
+          );
+        },
+      });
+      expect(Scheduler).toFlushAndYield([
+        'suspending',
+        'throwing: first error',
+        // There is no repeated first error because we already suspended and no
+        // invokeGuardedCallback is used if we are in dev
+        // or in prod there is just never an invokeGuardedCallback
+        'throwing: second error',
+        'throwing: third error',
+      ]);
+      expect(mockError.mock.calls).toEqual([]);
+
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <h1>one</h1>
+          <h2>two</h2>
+          <h3>three</h3>
+        </div>,
+      );
+      await unsuspend();
+      // Since our client components only throw on the very first render there are no
+      // new throws in this pass
+      expect(Scheduler).toFlushAndYield([]);
+
+      expect(mockError.mock.calls).toEqual([]);
+    } finally {
+      console.error = originalConsoleError;
+    }
+  });
+
+  // @gate experimental && __DEV__
+  it('suspending after erroring will cause errors previously queued to be silenced until the boundary resolves', async () => {
+    // We can't use the toErrorDev helper here because this is async.
+    const originalConsoleError = console.error;
+    const mockError = jest.fn();
+    console.error = (...args) => {
+      if (args.length > 1) {
+        if (typeof args[1] === 'object') {
+          mockError(args[0].split('\n')[0]);
+          return;
+        }
+      }
+      mockError(...args.map(normalizeCodeLocInfo));
+    };
+    let isClient = false;
+    let shouldThrow = true;
+    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.unstable_yieldValue('suspending');
+        throw promise;
+      }
+      return null;
+    }
+
+    function ThrowUntilOnClient({children, message}) {
+      if (isClient && shouldThrow) {
+        Scheduler.unstable_yieldValue('throwing: ' + message);
+        throw new Error(message);
+      }
+      return children;
+    }
+
+    function StopThrowingOnClient() {
+      if (isClient) {
+        shouldThrow = false;
+      }
+      return null;
+    }
+
+    const App = () => {
+      return (
+        <div>
+          <Suspense fallback={<h1>Loading...</h1>}>
+            <ThrowUntilOnClient message="first error">
+              <h1>one</h1>
+            </ThrowUntilOnClient>
+            <ThrowUntilOnClient message="second error">
+              <h2>two</h2>
+            </ThrowUntilOnClient>
+            <ComponentThatSuspendsOnClient />
+            <ThrowUntilOnClient message="third error">
+              <h3>three</h3>
+            </ThrowUntilOnClient>
+            <StopThrowingOnClient />
+          </Suspense>
+        </div>
+      );
+    };
+
+    try {
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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.unstable_yieldValue(
+            'Logged recoverable error: ' + error.message,
+          );
+        },
+      });
+      expect(Scheduler).toFlushAndYield([
+        'throwing: first error',
+        // duplicate because first error is re-done in invokeGuardedCallback
+        'throwing: first error',
+        'throwing: second error',
+        'suspending',
+        'throwing: third error',
+      ]);
+      // These Uncaught error calls are the error reported by the runtime (jsdom here, browser in actual use)
+      // when invokeGuardedCallback is used to replay an error in dev using event dispatching in the document
+      expect(mockError.mock.calls).toEqual([
+        // we only get one because we suppress invokeGuardedCallback after the first one when hydrating in a
+        // suspense boundary
+        ['Error: Uncaught [Error: first error]'],
+      ]);
+      mockError.mockClear();
+
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          <h1>one</h1>
+          <h2>two</h2>
+          <h3>three</h3>
+        </div>,
+      );
+      await unsuspend();
+      // Since our client components only throw on the very first render there are no
+      // new throws in this pass
+      expect(Scheduler).toFlushAndYield([]);
+      expect(mockError.mock.calls).toEqual([]);
+    } finally {
+      console.error = originalConsoleError;
+    }
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index e0e592d32790..636a467475df 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -104,6 +104,13 @@ export function markDidThrowWhileHydratingDEV() {
   }
 }
 
+export function didSuspendOrErrorWhileHydratingDEV() {
+  if (__DEV__) {
+    return didSuspendOrErrorDEV;
+  }
+  return false;
+}
+
 function enterHydrationState(fiber: Fiber): boolean {
   if (!supportsHydration) {
     return false;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index a4fd5c93e22e..3befb348c05a 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -104,6 +104,13 @@ export function markDidThrowWhileHydratingDEV() {
   }
 }
 
+export function didSuspendOrErrorWhileHydratingDEV() {
+  if (__DEV__) {
+    return didSuspendOrErrorDEV;
+  }
+  return false;
+}
+
 function enterHydrationState(fiber: Fiber): boolean {
   if (!supportsHydration) {
     return false;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 89c880d86855..b4343485259a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -88,6 +88,7 @@ import {
   assignFiberPropertiesInDEV,
 } from './ReactFiber.new';
 import {isRootDehydrated} from './ReactFiberShellHydration';
+import {didSuspendOrErrorWhileHydratingDEV} from './ReactFiberHydrationContext.new';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -3001,11 +3002,13 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
       return originalBeginWork(current, unitOfWork, lanes);
     } catch (originalError) {
       if (
-        originalError !== null &&
-        typeof originalError === 'object' &&
-        typeof originalError.then === 'function'
+        didSuspendOrErrorWhileHydratingDEV() ||
+        (originalError !== null &&
+          typeof originalError === 'object' &&
+          typeof originalError.then === 'function')
       ) {
-        // Don't replay promises. Treat everything else like an error.
+        // Don't replay promises.
+        // Don't replay errors if we are hydrating and have already suspended or handled an error
         throw originalError;
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 2f5dbe8530ce..58757a37367c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -88,6 +88,7 @@ import {
   assignFiberPropertiesInDEV,
 } from './ReactFiber.old';
 import {isRootDehydrated} from './ReactFiberShellHydration';
+import {didSuspendOrErrorWhileHydratingDEV} from './ReactFiberHydrationContext.old';
 import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
 import {
   HostRoot,
@@ -3001,11 +3002,13 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
       return originalBeginWork(current, unitOfWork, lanes);
     } catch (originalError) {
       if (
-        originalError !== null &&
-        typeof originalError === 'object' &&
-        typeof originalError.then === 'function'
+        didSuspendOrErrorWhileHydratingDEV() ||
+        (originalError !== null &&
+          typeof originalError === 'object' &&
+          typeof originalError.then === 'function')
       ) {
-        // Don't replay promises. Treat everything else like an error.
+        // Don't replay promises.
+        // Don't replay errors if we are hydrating and have already suspended or handled an error
         throw originalError;
       }
 

From a10a9a6b5b891dd3ce238bf39a6147bb0f3a1d2a Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 3 May 2022 14:24:23 -0400
Subject: [PATCH 1342/1603] Add test for hiding children after layout destroy
 (#24483)

---
 .../src/__tests__/ReactOffscreen-test.js      | 41 +++++++++++++++++++
 packages/shared/ReactFeatureFlags.js          |  2 +-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 3125fcc29e5f..13257a82b81b 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -310,6 +310,47 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
   });
 
+  // @gate experimental || www
+  // @gate enableSuspenseLayoutEffectSemantics
+  // @gate enableFlipOffscreenUnhideOrder
+  it('hides children of offscreen after layout effects are destroyed', async () => {
+    const root = ReactNoop.createRoot();
+    function Child({text}) {
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('Mount layout');
+        return () => {
+          // The child should not be hidden yet.
+          expect(root).toMatchRenderedOutput(<span prop="Child" />);
+          Scheduler.unstable_yieldValue('Unmount layout');
+        };
+      }, []);
+      return <Text text="Child" />;
+    }
+
+    await act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Child', 'Mount layout']);
+    expect(root).toMatchRenderedOutput(<span prop="Child" />);
+
+    // Hide the tree. The layout effect is unmounted.
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Unmount layout', 'Child']);
+
+    // After the layout effect is unmounted, the child is hidden.
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
+  });
+
   // @gate www
   it('does not toggle effects for LegacyHidden component', async () => {
     // LegacyHidden is meant to be the same as offscreen except it doesn't
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index c3c65214e4b5..051840469e3f 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -38,7 +38,7 @@ export const skipUnmountedBoundaries = true;
 //
 // TODO: Finish rolling out in www
 export const enableSuspenseLayoutEffectSemantics = true;
-export const enableFlipOffscreenUnhideOrder = false;
+export const enableFlipOffscreenUnhideOrder = true;
 
 // TODO: Finish rolling out in www
 export const enableClientRenderFallbackOnTextMismatch = true;

From 6cbf0f7fac772c3fd18706d73af00f3fd06a55b5 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Tue, 3 May 2022 17:12:23 -0400
Subject: [PATCH 1343/1603] Fork ReactSymbols (#24484)

* Fork ReactSymbols

* Fix tests

* Update jest config
---
 packages/shared/ReactSymbols.js               | 89 +++++-------------
 packages/shared/ReactSymbols.www.js           | 93 +++++++++++++++++++
 .../__tests__/ReactSymbols-test.internal.js   |  2 +-
 scripts/jest/setupTests.www.js                |  4 +
 scripts/rollup/forks.js                       | 11 +++
 5 files changed, 134 insertions(+), 65 deletions(-)
 create mode 100644 packages/shared/ReactSymbols.www.js

diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 523cc1436dfc..6ff9305fa7b0 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -11,72 +11,33 @@
 // When adding new symbols to this file,
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
 
-import {enableSymbolFallbackForWWW} from './ReactFeatureFlags';
-
-const usePolyfill =
-  enableSymbolFallbackForWWW && (typeof Symbol !== 'function' || !Symbol.for);
-
 // The Symbol used to tag the ReactElement-like types.
-export const REACT_ELEMENT_TYPE = usePolyfill
-  ? 0xeac7
-  : Symbol.for('react.element');
-export const REACT_PORTAL_TYPE = usePolyfill
-  ? 0xeaca
-  : Symbol.for('react.portal');
-export const REACT_FRAGMENT_TYPE = usePolyfill
-  ? 0xeacb
-  : Symbol.for('react.fragment');
-export const REACT_STRICT_MODE_TYPE = usePolyfill
-  ? 0xeacc
-  : Symbol.for('react.strict_mode');
-export const REACT_PROFILER_TYPE = usePolyfill
-  ? 0xead2
-  : Symbol.for('react.profiler');
-export const REACT_PROVIDER_TYPE = usePolyfill
-  ? 0xeacd
-  : Symbol.for('react.provider');
-export const REACT_CONTEXT_TYPE = usePolyfill
-  ? 0xeace
-  : Symbol.for('react.context');
-export const REACT_SERVER_CONTEXT_TYPE = usePolyfill
-  ? 0xeae6
-  : Symbol.for('react.server_context');
-export const REACT_FORWARD_REF_TYPE = usePolyfill
-  ? 0xead0
-  : Symbol.for('react.forward_ref');
-export const REACT_SUSPENSE_TYPE = usePolyfill
-  ? 0xead1
-  : Symbol.for('react.suspense');
-export const REACT_SUSPENSE_LIST_TYPE = usePolyfill
-  ? 0xead8
-  : Symbol.for('react.suspense_list');
-export const REACT_MEMO_TYPE = usePolyfill ? 0xead3 : Symbol.for('react.memo');
-export const REACT_LAZY_TYPE = usePolyfill ? 0xead4 : Symbol.for('react.lazy');
-export const REACT_SCOPE_TYPE = usePolyfill
-  ? 0xead7
-  : Symbol.for('react.scope');
-export const REACT_DEBUG_TRACING_MODE_TYPE = usePolyfill
-  ? 0xeae1
-  : Symbol.for('react.debug_trace_mode');
-export const REACT_OFFSCREEN_TYPE = usePolyfill
-  ? 0xeae2
-  : Symbol.for('react.offscreen');
-export const REACT_LEGACY_HIDDEN_TYPE = usePolyfill
-  ? 0xeae3
-  : Symbol.for('react.legacy_hidden');
-export const REACT_CACHE_TYPE = usePolyfill
-  ? 0xeae4
-  : Symbol.for('react.cache');
-export const REACT_TRACING_MARKER_TYPE = usePolyfill
-  ? 0xeae5
-  : Symbol.for('react.tracing_marker');
-export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = usePolyfill
-  ? 0xeae7
-  : Symbol.for('react.default_value');
-const MAYBE_ITERATOR_SYMBOL = usePolyfill
-  ? typeof Symbol === 'function' && Symbol.iterator
-  : Symbol.iterator;
+export const REACT_ELEMENT_TYPE = Symbol.for('react.element');
+export const REACT_PORTAL_TYPE = Symbol.for('react.portal');
+export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
+export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
+export const REACT_PROFILER_TYPE = Symbol.for('react.profiler');
+export const REACT_PROVIDER_TYPE = Symbol.for('react.provider');
+export const REACT_CONTEXT_TYPE = Symbol.for('react.context');
+export const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
+export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
+export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
+export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
+export const REACT_MEMO_TYPE = Symbol.for('react.memo');
+export const REACT_LAZY_TYPE = Symbol.for('react.lazy');
+export const REACT_SCOPE_TYPE = Symbol.for('react.scope');
+export const REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for(
+  'react.debug_trace_mode',
+);
+export const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
+export const REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
+export const REACT_CACHE_TYPE = Symbol.for('react.cache');
+export const REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker');
+export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+  'react.default_value',
+);
 
+const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 
 export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
diff --git a/packages/shared/ReactSymbols.www.js b/packages/shared/ReactSymbols.www.js
new file mode 100644
index 000000000000..523cc1436dfc
--- /dev/null
+++ b/packages/shared/ReactSymbols.www.js
@@ -0,0 +1,93 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// ATTENTION
+// When adding new symbols to this file,
+// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
+
+import {enableSymbolFallbackForWWW} from './ReactFeatureFlags';
+
+const usePolyfill =
+  enableSymbolFallbackForWWW && (typeof Symbol !== 'function' || !Symbol.for);
+
+// The Symbol used to tag the ReactElement-like types.
+export const REACT_ELEMENT_TYPE = usePolyfill
+  ? 0xeac7
+  : Symbol.for('react.element');
+export const REACT_PORTAL_TYPE = usePolyfill
+  ? 0xeaca
+  : Symbol.for('react.portal');
+export const REACT_FRAGMENT_TYPE = usePolyfill
+  ? 0xeacb
+  : Symbol.for('react.fragment');
+export const REACT_STRICT_MODE_TYPE = usePolyfill
+  ? 0xeacc
+  : Symbol.for('react.strict_mode');
+export const REACT_PROFILER_TYPE = usePolyfill
+  ? 0xead2
+  : Symbol.for('react.profiler');
+export const REACT_PROVIDER_TYPE = usePolyfill
+  ? 0xeacd
+  : Symbol.for('react.provider');
+export const REACT_CONTEXT_TYPE = usePolyfill
+  ? 0xeace
+  : Symbol.for('react.context');
+export const REACT_SERVER_CONTEXT_TYPE = usePolyfill
+  ? 0xeae6
+  : Symbol.for('react.server_context');
+export const REACT_FORWARD_REF_TYPE = usePolyfill
+  ? 0xead0
+  : Symbol.for('react.forward_ref');
+export const REACT_SUSPENSE_TYPE = usePolyfill
+  ? 0xead1
+  : Symbol.for('react.suspense');
+export const REACT_SUSPENSE_LIST_TYPE = usePolyfill
+  ? 0xead8
+  : Symbol.for('react.suspense_list');
+export const REACT_MEMO_TYPE = usePolyfill ? 0xead3 : Symbol.for('react.memo');
+export const REACT_LAZY_TYPE = usePolyfill ? 0xead4 : Symbol.for('react.lazy');
+export const REACT_SCOPE_TYPE = usePolyfill
+  ? 0xead7
+  : Symbol.for('react.scope');
+export const REACT_DEBUG_TRACING_MODE_TYPE = usePolyfill
+  ? 0xeae1
+  : Symbol.for('react.debug_trace_mode');
+export const REACT_OFFSCREEN_TYPE = usePolyfill
+  ? 0xeae2
+  : Symbol.for('react.offscreen');
+export const REACT_LEGACY_HIDDEN_TYPE = usePolyfill
+  ? 0xeae3
+  : Symbol.for('react.legacy_hidden');
+export const REACT_CACHE_TYPE = usePolyfill
+  ? 0xeae4
+  : Symbol.for('react.cache');
+export const REACT_TRACING_MARKER_TYPE = usePolyfill
+  ? 0xeae5
+  : Symbol.for('react.tracing_marker');
+export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = usePolyfill
+  ? 0xeae7
+  : Symbol.for('react.default_value');
+const MAYBE_ITERATOR_SYMBOL = usePolyfill
+  ? typeof Symbol === 'function' && Symbol.iterator
+  : Symbol.iterator;
+
+const FAUX_ITERATOR_SYMBOL = '@@iterator';
+
+export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
+  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;
+}
diff --git a/packages/shared/__tests__/ReactSymbols-test.internal.js b/packages/shared/__tests__/ReactSymbols-test.internal.js
index df16a51c7c8f..4b6a2d0bc61c 100644
--- a/packages/shared/__tests__/ReactSymbols-test.internal.js
+++ b/packages/shared/__tests__/ReactSymbols-test.internal.js
@@ -32,7 +32,7 @@ describe('ReactSymbols', () => {
     const originalSymbolFor = global.Symbol.for;
     global.Symbol.for = null;
     try {
-      const entries = Object.entries(require('shared/ReactSymbols')).filter(
+      const entries = Object.entries(require('shared/ReactSymbols.www')).filter(
         // REACT_ASYNC_MODE_TYPE and REACT_CONCURRENT_MODE_TYPE have the same numeric value
         // for legacy backwards compatibility
         ([key]) => key !== 'REACT_ASYNC_MODE_TYPE',
diff --git a/scripts/jest/setupTests.www.js b/scripts/jest/setupTests.www.js
index c0058cb6e084..e80448db4e07 100644
--- a/scripts/jest/setupTests.www.js
+++ b/scripts/jest/setupTests.www.js
@@ -19,6 +19,10 @@ jest.mock('shared/ReactFeatureFlags', () => {
   return wwwFlags;
 });
 
+jest.mock('shared/ReactSymbols', () => {
+  return jest.requireActual('shared/ReactSymbols.www');
+});
+
 jest.mock('scheduler/src/SchedulerFeatureFlags', () => {
   const schedulerSrcPath = process.cwd() + '/packages/scheduler';
   jest.mock(
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index d45c41a74268..5c3abebc5e49 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -138,6 +138,17 @@ const forks = Object.freeze({
     return null;
   },
 
+  './packages/shared/ReactSymbols.js': bundleType => {
+    switch (bundleType) {
+      case FB_WWW_DEV:
+      case FB_WWW_PROD:
+      case FB_WWW_PROFILING:
+        return './packages/shared/ReactSymbols.www.js';
+      default:
+        return './packages/shared/ReactSymbols.js';
+    }
+  },
+
   './packages/scheduler/index.js': (bundleType, entry, dependencies) => {
     switch (bundleType) {
       case UMD_DEV:

From c7e494b55320768863b821be96896b28f0a280ef Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 3 May 2022 15:52:56 -0700
Subject: [PATCH 1344/1603] [React DevTools] Fix regex for formateWithStyles
 function (#24486)

The previous regex to detect string substitutions is not quite right, this PR fixes it by:

Check to make sure we are starting either at the beginning of the line or we match a character that's not % to make sure we capture all the % in a row.
Make sure there are an odd number of % (the first X pairs are escaped % characters. The odd % followed by a letter is the string substitution)
---
 packages/react-devtools-shared/src/backend/utils.js | 3 ++-
 packages/react-devtools-shared/src/hook.js          | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index f0f78b7f778b..4a01b1804b9d 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -1,3 +1,4 @@
+/**
 /**
  * Copyright (c) Facebook, Inc. and its affiliates.
  *
@@ -188,7 +189,7 @@ export function formatWithStyles(
   }
 
   // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
-  const REGEXP = /([^%]|^)(%([oOdisf]))/g;
+  const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
   if (inputArgs[0].match(REGEXP)) {
     return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
   } else {
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index ad5b33850b76..8250bebc9354 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -189,7 +189,7 @@ export function installHook(target: any): DevToolsHook | null {
     }
 
     // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
-    const REGEXP = /([^%]|^)(%([oOdisf]))/g;
+    const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
     if (inputArgs[0].match(REGEXP)) {
       return [`%c${inputArgs[0]}`, style, ...inputArgs.slice(1)];
     } else {

From 3dc9a8af05f98d185ca55d56f163dbb46e7ad3f4 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 4 May 2022 13:25:27 -0700
Subject: [PATCH 1345/1603] fix forward ref (#24494)

Resolves #24428

---

For fiber types that render user code, we check the PerformedWork flag rather than the props, ref, and state to see if the fiber rendered (rather than bailing out/etc.) so we know whether we need to do things like record profile durations. ForwardRef wasn't added to this list, which caused #24428.
---
 packages/react-devtools-shared/src/backend/renderer.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 50ba03d964ca..c161902df711 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -1570,6 +1570,7 @@ export function attach(
       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.
         // eslint-disable-next-line no-bitwise

From 024a7274fb07f154676ec6443b83a4e31f259c22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 4 May 2022 23:05:37 -0400
Subject: [PATCH 1346/1603] Constrain the container type of createPortal
 (#24496)

We already constrained the type of createRoot (can't take document) and hydrateRoot (can't take fragments).
---
 packages/react-dom/src/client/ReactDOM.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index aaf429cad54c..04355605ed57 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -107,7 +107,7 @@ setBatchingImplementation(
 
 function createPortal(
   children: ReactNodeList,
-  container: Container,
+  container: Element | DocumentFragment,
   key: ?string = null,
 ): React$Portal {
   if (!isValidContainer(container)) {

From d4acbe85d55b6048d65b6ff258b7996516d4aa58 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 5 May 2022 11:46:57 -0400
Subject: [PATCH 1347/1603] Fixed possible undefined error in TreeContext
 reducer (#24501)

---
 .../src/devtools/views/Components/TreeContext.js       | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index f6854468dc6e..0252ac350fd9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -377,12 +377,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         }
         break;
       case 'SELECT_PREVIOUS_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
-        if (store.errorCount === 0 && store.warningCount === 0) {
+        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
+        if (elementIndicesWithErrorsOrWarnings.length === 0) {
           return state;
         }
 
-        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
-
         let flatIndex = 0;
         if (selectedElementIndex !== null) {
           // Resume from the current position in the list.
@@ -419,12 +418,11 @@ function reduceTreeState(store: Store, state: State, action: Action): State {
         break;
       }
       case 'SELECT_NEXT_ELEMENT_WITH_ERROR_OR_WARNING_IN_TREE': {
-        if (store.errorCount === 0 && store.warningCount === 0) {
+        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
+        if (elementIndicesWithErrorsOrWarnings.length === 0) {
           return state;
         }
 
-        const elementIndicesWithErrorsOrWarnings = store.getElementsWithErrorsAndWarnings();
-
         let flatIndex = -1;
         if (selectedElementIndex !== null) {
           // Resume from the current position in the list.

From 547b707493735327373a9f8792343f73a5b080da Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 5 May 2022 10:19:08 -0700
Subject: [PATCH 1348/1603] React DevTools 4.24.4 -> 4.24.5 (#24503)

---
 packages/react-devtools-core/package.json            |  2 +-
 .../react-devtools-extensions/chrome/manifest.json   |  4 ++--
 .../react-devtools-extensions/edge/manifest.json     |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json  |  2 +-
 packages/react-devtools-inline/package.json          |  2 +-
 packages/react-devtools-timeline/package.json        |  2 +-
 packages/react-devtools/CHANGELOG.md                 | 12 ++++++++++++
 packages/react-devtools/package.json                 |  4 ++--
 8 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 2d1c61d51342..f9adf9aaa0f9 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index dd7057c0b6a9..beb4ff7413ef 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.4",
-  "version_name": "4.24.4",
+  "version": "4.24.5",
+  "version_name": "4.24.5",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index a3a83de6efca..1f47b0b0aaa6 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.4",
-  "version_name": "4.24.4",
+  "version": "4.24.5",
+  "version_name": "4.24.5",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 31d136496597..62056db3a715 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 2ac74b18c2ac..3b8cf6bda102 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index aa7240a252d1..a82111f0cf9d 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 448fd719f95d..c08bd7f41386 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,18 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 49c7c748ba64..a7f4c35b0342 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.4",
+  "version": "4.24.5",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.4",
+    "react-devtools-core": "4.24.5",
     "update-notifier": "^2.1.0"
   }
 }

From e531a4a62d0b88301ac06d4efd3f5a30faa03c94 Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Thu, 5 May 2022 20:17:23 -0400
Subject: [PATCH 1349/1603] [React DevTools] Improve DevTools UI when
 Inspecting a user Component that Throws an Error  (#24248)

* [ReactDevTools] custom view for errors occur in user's code

* [ReactDevTools] show message for unsupported feature

* fix bad import

* fix typo

* fix issues from rebasing

* prettier

* sync error names

* sync error name with upstream

* fix lint & better comment

* fix error message for test

* better error message per review

* add missing file

* remove dead enum & provide component name in error message

* better error message

* better user facing error message
---
 .../src/__tests__/inspectedElement-test.js    |  2 +-
 .../src/backend/renderer.js                   | 48 +++++++++++++++++
 .../src/backend/types.js                      |  3 +-
 .../react-devtools-shared/src/backendAPI.js   |  2 +-
 .../views/ErrorBoundary/CaughtErrorView.js    | 44 ++++++++++++++++
 .../views/ErrorBoundary/ErrorBoundary.js      | 51 +++++++++++++++++--
 .../src/{ => errors}/TimeoutError.js          |  0
 .../src/errors/UnknownHookError.js            | 21 ++++++++
 .../src/errors/UserError.js                   | 21 ++++++++
 .../src/inspectedElementMutableSource.js      | 22 ++++++--
 10 files changed, 201 insertions(+), 13 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
 rename packages/react-devtools-shared/src/{ => errors}/TimeoutError.js (100%)
 create mode 100644 packages/react-devtools-shared/src/errors/UnknownHookError.js
 create mode 100644 packages/react-devtools-shared/src/errors/UserError.js

diff --git a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
index 81c0a3a75821..919fbb059f76 100644
--- a/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/inspectedElement-test.js
@@ -2145,7 +2145,7 @@ describe('InspectedElement', () => {
     expect(value).toBe(null);
 
     const error = errorBoundaryInstance.state.error;
-    expect(error.message).toBe('Error rendering inspected component');
+    expect(error.message).toBe('Expected');
     expect(error.stack).toContain('inspectHooksOfFiber');
   });
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index c161902df711..5e09a2d0f804 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -3607,10 +3607,58 @@ export function attach(
     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 fiber = findCurrentFiberUsingSlowPathById(id);
+          const componentName =
+            fiber != null ? getDisplayNameForFiber(fiber) : null;
+          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,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 4d975dbfec0d..92ad42c3010c 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -289,8 +289,9 @@ export type InspectElementError = {|
   id: number,
   responseID: number,
   type: 'error',
+  errorType: 'user' | 'unknown-hook' | 'uncaught',
   message: string,
-  stack: string,
+  stack?: string,
 |};
 
 export type InspectElementFullData = {|
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index 3849899b7df0..adf0c5e8b091 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -10,7 +10,7 @@
 import {hydrate, fillInPath} from 'react-devtools-shared/src/hydration';
 import {separateDisplayNameAndHOCs} from 'react-devtools-shared/src/utils';
 import Store from 'react-devtools-shared/src/devtools/store';
-import TimeoutError from 'react-devtools-shared/src/TimeoutError';
+import TimeoutError from 'react-devtools-shared/src/errors/TimeoutError';
 
 import type {
   InspectedElement as InspectedElementBackend,
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 000000000000..c4511ba0312b
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 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) {
+  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
index f4994e23a9bf..d207fcfe4f73 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -15,8 +15,11 @@ 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/TimeoutError';
+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 = {|
@@ -34,6 +37,8 @@ type State = {|
   hasError: boolean,
   isUnsupportedBridgeOperationError: boolean,
   isTimeout: boolean,
+  isUserError: boolean,
+  isUnknownHookError: boolean,
 |};
 
 const InitialState: State = {
@@ -44,6 +49,8 @@ const InitialState: State = {
   hasError: false,
   isUnsupportedBridgeOperationError: false,
   isTimeout: false,
+  isUserError: false,
+  isUnknownHookError: false,
 };
 
 export default class ErrorBoundary extends Component<Props, State> {
@@ -58,6 +65,8 @@ export default class ErrorBoundary extends Component<Props, State> {
         : null;
 
     const isTimeout = error instanceof TimeoutError;
+    const isUserError = error instanceof UserError;
+    const isUnknownHookError = error instanceof UnknownHookError;
     const isUnsupportedBridgeOperationError =
       error instanceof UnsupportedBridgeOperationError;
 
@@ -76,7 +85,9 @@ export default class ErrorBoundary extends Component<Props, State> {
       errorMessage,
       hasError: true,
       isUnsupportedBridgeOperationError,
+      isUnknownHookError,
       isTimeout,
+      isUserError,
     };
   }
 
@@ -111,6 +122,8 @@ export default class ErrorBoundary extends Component<Props, State> {
       hasError,
       isUnsupportedBridgeOperationError,
       isTimeout,
+      isUserError,
+      isUnknownHookError,
     } = this.state;
 
     if (hasError) {
@@ -133,6 +146,37 @@ export default class ErrorBoundary extends Component<Props, State> {
             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
@@ -141,10 +185,7 @@ export default class ErrorBoundary extends Component<Props, State> {
             dismissError={
               canDismissProp || canDismissState ? this._dismissError : null
             }
-            errorMessage={errorMessage}
-            isUnsupportedBridgeOperationError={
-              isUnsupportedBridgeOperationError
-            }>
+            errorMessage={errorMessage}>
             <Suspense fallback={<SearchingGitHubIssues />}>
               <SuspendingErrorView
                 callStack={callStack}
diff --git a/packages/react-devtools-shared/src/TimeoutError.js b/packages/react-devtools-shared/src/errors/TimeoutError.js
similarity index 100%
rename from packages/react-devtools-shared/src/TimeoutError.js
rename to packages/react-devtools-shared/src/errors/TimeoutError.js
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 000000000000..c00be01bb4e8
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/UnknownHookError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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 000000000000..81a9ee86e5e1
--- /dev/null
+++ b/packages/react-devtools-shared/src/errors/UserError.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+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/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index d91d8de8c1de..bb687bf98d7a 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -27,6 +27,8 @@ import type {
   InspectedElement as InspectedElementFrontend,
   InspectedElementResponseType,
 } from 'react-devtools-shared/src/devtools/views/Components/types';
+import UserError from 'react-devtools-shared/src/errors/UserError';
+import UnknownHookError from 'react-devtools-shared/src/errors/UnknownHookError';
 
 // Maps element ID to inspected data.
 // We use an LRU for this rather than a WeakMap because of how the "no-change" optimization works.
@@ -80,14 +82,24 @@ export function inspectElement({
 
     let inspectedElement;
     switch (type) {
-      case 'error':
-        const {message, stack} = ((data: any): InspectElementError);
-
+      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.
-        const error = new Error(message);
-        error.stack = stack;
+        error.stack = stack || error.stack;
 
         throw error;
+      }
 
       case 'no-change':
         // This is a no-op for the purposes of our cache.

From 46a6d77e32d00c8c71ab989ca88b1c51aad07cdd Mon Sep 17 00:00:00 2001
From: Timothy Yung <yungsters@fb.com>
Date: Fri, 6 May 2022 11:24:04 -0700
Subject: [PATCH 1350/1603] Unify JSResourceReference Interfaces (#24507)

---
 .../ReactFlightDOMRelayClientHostConfig.js    |  2 +-
 .../ReactFlightDOMRelayServerHostConfig.js    |  5 +--
 ...eference.js => JSResourceReferenceImpl.js} |  8 ++---
 .../ReactFlightDOMRelayClientIntegration.js   |  4 +--
 .../ReactFlightDOMRelay-test.internal.js      |  6 ++--
 .../ReactFlightNativeRelayClientHostConfig.js |  2 +-
 .../ReactFlightNativeRelayServerHostConfig.js |  3 +-
 .../src/__mocks__/JSResourceReferenceImpl.js  |  4 +--
 ...ReactFlightNativeRelayClientIntegration.js |  4 +--
 scripts/flow/react-relay-hooks.js             | 33 ++++++++++++-------
 scripts/rollup/bundles.js                     |  4 +--
 yarn.lock                                     |  2 +-
 12 files changed, 45 insertions(+), 32 deletions(-)
 rename packages/react-server-dom-relay/src/__mocks__/{JSResourceReference.js => JSResourceReferenceImpl.js} (66%)

diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
index 35203ee92c5c..30718865ccda 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -9,7 +9,7 @@
 
 import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
 
-import type JSResourceReference from 'JSResourceReference';
+import type {JSResourceReference} from 'JSResourceReference';
 
 export type ModuleReference<T> = JSResourceReference<T>;
 
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index a29a6449d8b4..8fcd823204cb 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -11,7 +11,8 @@ import type {RowEncoding, JSONValue} from './ReactFlightDOMRelayProtocol';
 
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 
-import JSResourceReference from 'JSResourceReference';
+import type {JSResourceReference} from 'JSResourceReference';
+import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 import hasOwnProperty from 'shared/hasOwnProperty';
 import isArray from 'shared/isArray';
@@ -39,7 +40,7 @@ export type {
 } from 'ReactFlightDOMRelayServerIntegration';
 
 export function isModuleReference(reference: Object): boolean {
-  return reference instanceof JSResourceReference;
+  return reference instanceof JSResourceReferenceImpl;
 }
 
 export type ModuleKey = ModuleReference<any>;
diff --git a/packages/react-server-dom-relay/src/__mocks__/JSResourceReference.js b/packages/react-server-dom-relay/src/__mocks__/JSResourceReferenceImpl.js
similarity index 66%
rename from packages/react-server-dom-relay/src/__mocks__/JSResourceReference.js
rename to packages/react-server-dom-relay/src/__mocks__/JSResourceReferenceImpl.js
index 18dab0739c65..2891385ae97e 100644
--- a/packages/react-server-dom-relay/src/__mocks__/JSResourceReference.js
+++ b/packages/react-server-dom-relay/src/__mocks__/JSResourceReferenceImpl.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-class JSResourceReference {
-  constructor(exportedValue) {
-    this._moduleId = exportedValue;
+class JSResourceReferenceImpl {
+  constructor(moduleId) {
+    this._moduleId = moduleId;
   }
   getModuleId() {
     return this._moduleId;
   }
 }
 
-module.exports = JSResourceReference;
+module.exports = JSResourceReferenceImpl;
diff --git a/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js b/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
index 25403877da25..4d89b5a2b8b3 100644
--- a/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
+++ b/packages/react-server-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-import JSResourceReference from 'JSResourceReference';
+import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 const ReactFlightDOMRelayClientIntegration = {
   resolveModuleReference(moduleData) {
-    return new JSResourceReference(moduleData);
+    return new JSResourceReferenceImpl(moduleData);
   },
   preloadModule(moduleReference) {},
   requireModule(moduleReference) {
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index dc981b9bd530..daf01d5d69be 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -10,7 +10,7 @@
 let act;
 let React;
 let ReactDOMClient;
-let JSResourceReference;
+let JSResourceReferenceImpl;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
 let SuspenseList;
@@ -24,7 +24,7 @@ describe('ReactFlightDOMRelay', () => {
     ReactDOMClient = require('react-dom/client');
     ReactDOMFlightRelayServer = require('react-server-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-server-dom-relay');
-    JSResourceReference = require('JSResourceReference');
+    JSResourceReferenceImpl = require('JSResourceReferenceImpl');
     if (gate(flags => flags.enableSuspenseList)) {
       SuspenseList = React.SuspenseList;
     }
@@ -84,7 +84,7 @@ describe('ReactFlightDOMRelay', () => {
         </span>
       );
     }
-    const User = new JSResourceReference(UserClient);
+    const User = new JSResourceReferenceImpl(UserClient);
 
     function Greeting({firstName, lastName}) {
       return <User greeting="Hello" name={firstName + ' ' + lastName} />;
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
index d8e27657b292..eb6f0080e371 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
@@ -9,7 +9,7 @@
 
 import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
 
-import type JSResourceReference from 'JSResourceReference';
+import type {JSResourceReference} from 'JSResourceReference';
 
 export type ModuleReference<T> = JSResourceReference<T>;
 
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index b07c084eaa69..c139769fe453 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -11,9 +11,10 @@ import type {RowEncoding, JSONValue} from './ReactFlightNativeRelayProtocol';
 import type {Request, ReactModel} from 'react-server/src/ReactFlightServer';
 import hasOwnProperty from 'shared/hasOwnProperty';
 import isArray from 'shared/isArray';
+import type {JSResourceReference} from 'JSResourceReference';
 import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
-export type ModuleReference<T> = JSResourceReferenceImpl<T>;
+export type ModuleReference<T> = JSResourceReference<T>;
 
 import type {
   Destination,
diff --git a/packages/react-server-native-relay/src/__mocks__/JSResourceReferenceImpl.js b/packages/react-server-native-relay/src/__mocks__/JSResourceReferenceImpl.js
index 8fc06aca7a30..2891385ae97e 100644
--- a/packages/react-server-native-relay/src/__mocks__/JSResourceReferenceImpl.js
+++ b/packages/react-server-native-relay/src/__mocks__/JSResourceReferenceImpl.js
@@ -8,8 +8,8 @@
 'use strict';
 
 class JSResourceReferenceImpl {
-  constructor(exportedValue) {
-    this._moduleId = exportedValue;
+  constructor(moduleId) {
+    this._moduleId = moduleId;
   }
   getModuleId() {
     return this._moduleId;
diff --git a/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js b/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
index ea8f508ea294..64cc55bc22b9 100644
--- a/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
+++ b/packages/react-server-native-relay/src/__mocks__/ReactFlightNativeRelayClientIntegration.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-import JSResourceReference from 'JSResourceReference';
+import JSResourceReferenceImpl from 'JSResourceReferenceImpl';
 
 const ReactFlightNativeRelayClientIntegration = {
   resolveModuleReference(moduleData) {
-    return new JSResourceReference(moduleData);
+    return new JSResourceReferenceImpl(moduleData);
   },
   preloadModule(moduleReference) {},
   requireModule(moduleReference) {
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
index 73eb20ef4127..9f452689976a 100644
--- a/scripts/flow/react-relay-hooks.js
+++ b/scripts/flow/react-relay-hooks.js
@@ -15,24 +15,29 @@ type JSONValue =
   | {+[key: string]: JSONValue}
   | $ReadOnlyArray<JSONValue>;
 
-declare class JSResourceReference<T> {
-  _moduleId: T;
-  getModuleId(): string;
-}
-
-// Haste
 declare module 'JSResourceReference' {
-  declare export default typeof JSResourceReference;
+  declare export interface JSResourceReference<T> {
+    getModuleId(): string;
+    getModuleIdAsRef(): $Flow$ModuleRef<T>;
+    getModuleIfRequired(): ?T;
+    load(): Promise<T>;
+    preload(): void;
+  }
 }
 
-// Metro
 declare module 'JSResourceReferenceImpl' {
-  declare export default class JSResourceReferenceImpl<
-    T,
-  > extends JSResourceReference<T> {}
+  declare export default class JSResourceReferenceImpl<T> {
+    getModuleId(): string;
+    getModuleIdAsRef(): $Flow$ModuleRef<T>;
+    getModuleIfRequired(): ?T;
+    load(): Promise<T>;
+    preload(): void;
+  }
 }
 
 declare module 'ReactFlightDOMRelayServerIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
   declare export function emitRow(
@@ -49,6 +54,8 @@ declare module 'ReactFlightDOMRelayServerIntegration' {
 }
 
 declare module 'ReactFlightDOMRelayClientIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type ModuleMetaData;
   declare export function resolveModuleReference<T>(
     moduleData: ModuleMetaData,
@@ -62,6 +69,8 @@ declare module 'ReactFlightDOMRelayClientIntegration' {
 }
 
 declare module 'ReactFlightNativeRelayServerIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type Destination;
   declare export opaque type BundlerConfig;
   declare export function emitRow(
@@ -78,6 +87,8 @@ declare module 'ReactFlightNativeRelayServerIntegration' {
 }
 
 declare module 'ReactFlightNativeRelayClientIntegration' {
+  import type {JSResourceReference} from 'JSResourceReference';
+
   declare export opaque type ModuleMetaData;
   declare export function resolveModuleReference<T>(
     moduleData: ModuleMetaData,
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 4819ecb2a47a..0c8a3b64030c 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -405,7 +405,7 @@ const bundles = [
     externals: [
       'react',
       'ReactFlightDOMRelayServerIntegration',
-      'JSResourceReference',
+      'JSResourceReferenceImpl',
     ],
   },
 
@@ -420,7 +420,7 @@ const bundles = [
     externals: [
       'react',
       'ReactFlightDOMRelayClientIntegration',
-      'JSResourceReference',
+      'JSResourceReferenceImpl',
     ],
   },
 
diff --git a/yarn.lock b/yarn.lock
index f9d8524bd6c1..4f9e9225b382 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13629,7 +13629,7 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.8:
     prop-types "^15.6.2"
     scheduler "^0.13.0"
 
-react-is@^16.8.1, "react-is@npm:react-is":
+react-is@^16.8.1, react-is@^17.0.1, "react-is@npm:react-is":
   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==

From d20c3af9d11ea4a35bfc76cb44c15af9d42059c4 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 6 May 2022 12:36:03 -0700
Subject: [PATCH 1351/1603] [DevTools][Bug] Fix Race Condition When Unmounting
 Fibers (#24510)

When we delete fibers, we will call onCommitFiberUnmount on every deleted fiber to also remove them from the element tree. However, there are some cases where fibers aren't deleted but we still want to remove them from the element tree (ex. offscreen). In the second case, we recursively remove these children during handleCommitFiberRoot.

When we remove an element, we will untrack its corresponding fiber ID. However, because of fast refresh, we don't do this immediately, opting to instead add the value to a set to process later. However, before the set has been processed, we unmount that fiber again, we will get duplicate unmounts.

To fix this, handleCommitFiberRoot explicitly flushes all the fibers in the set before starting the deletion process. We also need to do this in handleCommitFiberUnmount in case handleCommitFiberRoot gets called first.
---
 packages/react-devtools-shared/src/backend/renderer.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 5e09a2d0f804..055b57ee4b52 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2630,6 +2630,10 @@ export function attach(
   }
 
   function handleCommitFiberUnmount(fiber) {
+    // Flush any pending Fibers that we are untracking before processing the new commit.
+    // If we don't do this, we might end up double-deleting Fibers in some cases (like Legacy Suspense).
+    untrackFibers();
+
     // This is not recursive.
     // We can't traverse fibers after unmounting so instead
     // we rely on React telling us about each unmount.

From 8197c73ec334e4430d892cead14aa371f13467a9 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 10 May 2022 10:17:36 -0700
Subject: [PATCH 1352/1603] Support document rendering (#24523)

* Support Document as a container for hydration and rendering

Previously Document was not handled effectively as a container. in particual when hydrating if there was a fallback to client rendering React would attempt to append a new <html> element into the document before clearing out the existing one which errored leaving the application in brokent state.

The initial approach I took was to recycle the documentElement and never remove or append it, always just moving it to the right fiber and appending the right children (heady/body) as needed. However in testing a simple approach in modern browsers it seems like treating the documentElement like any other element works fine. This change modifies the clearContainer method to remove the documentElement if the container is a DOCUMENT_NODE. Once the container is cleared React can append a new documentElement via normal means.

* Allow Document as container for createRoot

previously rendering into Document was broken and only hydration worked because React did not properly deal with the documentElement and would error in a broken state if used that way. With the previous commit addressing this limitation this change re-adds Document as a valid container for createRoot.

It should be noted that if you use document with createRoot it will drop anything a 3rd party scripts adds the page before rendering for the first time.
---
 packages/react-dom/client.js                        | 2 +-
 packages/react-dom/src/client/ReactDOM.js           | 2 +-
 packages/react-dom/src/client/ReactDOMHostConfig.js | 5 ++---
 packages/react-dom/src/client/ReactDOMRoot.js       | 2 +-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react-dom/client.js b/packages/react-dom/client.js
index 2234cc0a76eb..0992c68d5b8e 100644
--- a/packages/react-dom/client.js
+++ b/packages/react-dom/client.js
@@ -23,7 +23,7 @@ import {
 } from './';
 
 export function createRoot(
-  container: Element | DocumentFragment,
+  container: Element | Document | DocumentFragment,
   options?: CreateRootOptions,
 ): RootType {
   if (__DEV__) {
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 04355605ed57..1c664588407b 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -148,7 +148,7 @@ const Internals = {
 };
 
 function createRoot(
-  container: Element | DocumentFragment,
+  container: Element | Document | DocumentFragment,
   options?: CreateRootOptions,
 ): RootType {
   if (__DEV__) {
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 4b640055e5b4..e4973ec667b5 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -672,9 +672,8 @@ export function clearContainer(container: Container): void {
   if (container.nodeType === ELEMENT_NODE) {
     ((container: any): Element).textContent = '';
   } else if (container.nodeType === DOCUMENT_NODE) {
-    const body = ((container: any): Document).body;
-    if (body != null) {
-      body.textContent = '';
+    if (container.documentElement) {
+      container.removeChild(container.documentElement);
     }
   }
 }
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 55c340be7dff..49084d0f9bfa 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -164,7 +164,7 @@ ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount = funct
 };
 
 export function createRoot(
-  container: Element | DocumentFragment,
+  container: Element | Document | DocumentFragment,
   options?: CreateRootOptions,
 ): RootType {
   if (!isValidContainer(container)) {

From 7d9e17a9826595dacbf9e19e8f85b07837adf276 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 11 May 2022 09:01:05 -0700
Subject: [PATCH 1353/1603] [DevTools] Add Pragma to Only Run Tests if Version
 Requirement Satisfied (#24533)

This PR:

Adds a transform-react-version-pragma that transforms // @reactVersion SEMVER_VERSION into _test_react_version(...) and _test_react_version_focus(...) that lets us only run a test if it satisfies the right react version.
Adds _test_react_version and _test_react_version_focus to the devtools setupEnv file
Add a devtools preprocessor file for devtools specific plugins
---
 .../src/__tests__/setupEnv.js                 |  24 ++++
 .../transform-react-version-pragma-test.js    | 127 ++++++++++++++++++
 .../babel/transform-react-version-pragma.js   | 107 +++++++++++++++
 scripts/jest/devtools/preprocessor.js         |   9 ++
 scripts/jest/preprocessor.js                  |   4 +
 5 files changed, 271 insertions(+)
 create mode 100644 packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js
 create mode 100644 scripts/babel/transform-react-version-pragma.js
 create mode 100644 scripts/jest/devtools/preprocessor.js

diff --git a/packages/react-devtools-shared/src/__tests__/setupEnv.js b/packages/react-devtools-shared/src/__tests__/setupEnv.js
index e8b0fa74c811..59725ad5dea4 100644
--- a/packages/react-devtools-shared/src/__tests__/setupEnv.js
+++ b/packages/react-devtools-shared/src/__tests__/setupEnv.js
@@ -1,5 +1,8 @@
 'use strict';
 
+const semver = require('semver');
+const ReactVersion = require('../../../shared/ReactVersion');
+
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -24,3 +27,24 @@ global.process.env.DARK_MODE_DIMMED_LOG_COLOR = DARK_MODE_DIMMED_LOG_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_WARNING_COLOR = LIGHT_MODE_DIMMED_WARNING_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR = LIGHT_MODE_DIMMED_ERROR_COLOR;
 global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
+
+global._test_react_version = (range, testName, callback) => {
+  const trimmedRange = range.replaceAll(' ', '');
+  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+
+  if (shouldPass) {
+    test(testName, callback);
+  }
+};
+
+global._test_react_version_focus = (range, testName, callback) => {
+  const trimmedRange = range.replaceAll(' ', '');
+  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+
+  if (shouldPass) {
+    // eslint-disable-next-line jest/no-focused-tests
+    test.only(testName, callback);
+  }
+};
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 000000000000..7160aea7353b
--- /dev/null
+++ b/packages/react-devtools-shared/src/__tests__/transform-react-version-pragma-test.js
@@ -0,0 +1,127 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+const semver = require('semver');
+
+let shouldPass;
+let isFocused;
+describe('transform-react-version-pragma', () => {
+  // eslint-disable-next-line no-unused-vars
+  const _test_react_version = (range, testName, cb) => {
+    test(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) => {
+    test(testName, (...args) => {
+      shouldPass = semver.satisfies('18.0.0', range);
+      isFocused = true;
+      return cb(...args);
+    });
+  };
+
+  beforeEach(() => {
+    shouldPass = null;
+    isFocused = false;
+  });
+
+  // @reactVersion >= 17.9
+  test('reactVersion flag is on >=', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion >= 18.1
+  test('reactVersion flag is off >=', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  test('reactVersion flag is on <=', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion <= 17.9
+  test('reactVersion flag is off <=', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion > 17.9
+  test('reactVersion flag is on >', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion > 18.1
+  test('reactVersion flag is off >', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion < 18.1
+  test('reactVersion flag is on <', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion < 17.0.0
+  test('reactVersion flag is off <', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  // @reactVersion = 18.0
+  test('reactVersion flag is on =', () => {
+    expect(shouldPass).toBe(true);
+  });
+
+  // @reactVersion = 18.1
+  test('reactVersion flag is off =', () => {
+    expect(shouldPass).toBe(false);
+  });
+
+  /* eslint-disable jest/no-focused-tests */
+
+  // @reactVersion >= 18.1
+  fit('reactVersion fit', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  test.only('reactVersion test.only', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion <= 17.1
+  test('reactVersion multiple pragmas fail', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion >= 17.1
+  test('reactVersion multiple pragmas pass', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(false);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion <= 17.1
+  test.only('reactVersion focused multiple pragmas fail', () => {
+    expect(shouldPass).toBe(false);
+    expect(isFocused).toBe(true);
+  });
+
+  // @reactVersion <= 18.1
+  // @reactVersion >= 17.1
+  test.only('reactVersion focused multiple pragmas pass', () => {
+    expect(shouldPass).toBe(true);
+    expect(isFocused).toBe(true);
+  });
+});
diff --git a/scripts/babel/transform-react-version-pragma.js b/scripts/babel/transform-react-version-pragma.js
new file mode 100644
index 000000000000..ddf7f31ec502
--- /dev/null
+++ b/scripts/babel/transform-react-version-pragma.js
@@ -0,0 +1,107 @@
+'use strict';
+
+/* eslint-disable no-for-of-loops/no-for-of-loops */
+
+const GATE_VERSION_STR = '@reactVersion ';
+
+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) {
+    let conditions = null;
+    for (const line of comments) {
+      const commentStr = line.value.trim();
+      if (commentStr.startsWith(GATE_VERSION_STR)) {
+        const condition = t.stringLiteral(
+          commentStr.slice(GATE_VERSION_STR.length)
+        );
+        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: '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 = statement.leadingComments;
+                if (comments !== undefined) {
+                  const condition = buildGateVersionCondition(comments);
+                  if (condition !== null) {
+                    callee.name =
+                      callee.name === 'fit'
+                        ? '_test_react_version_focus'
+                        : '_test_react_version';
+                    expression.arguments = [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 = statement.leadingComments;
+                if (comments !== undefined) {
+                  const condition = buildGateVersionCondition(comments);
+                  if (condition !== null) {
+                    statement.expression = t.callExpression(
+                      t.identifier('_test_react_version_focus'),
+                      [condition, ...expression.arguments]
+                    );
+                  }
+                }
+              }
+              break;
+            }
+          }
+        }
+        return;
+      },
+    },
+  };
+}
+
+module.exports = transform;
diff --git a/scripts/jest/devtools/preprocessor.js b/scripts/jest/devtools/preprocessor.js
new file mode 100644
index 000000000000..836f02c4bd66
--- /dev/null
+++ b/scripts/jest/devtools/preprocessor.js
@@ -0,0 +1,9 @@
+'use strict';
+
+const pathToTransformReactVersionPragma = require.resolve(
+  '../../babel/transform-react-version-pragma'
+);
+
+module.exports = {
+  devtoolsPlugins: [pathToTransformReactVersionPragma],
+};
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
index d7a5a2cdab6d..773496bd1dab 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -7,6 +7,7 @@ const coffee = require('coffee-script');
 
 const tsPreprocessor = require('./typescript/preprocessor');
 const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
+const {devtoolsPlugins} = require('./devtools/preprocessor.js');
 
 const pathToBabel = path.join(
   require.resolve('@babel/core'),
@@ -82,6 +83,9 @@ module.exports = {
       const plugins = (isTestFile ? testOnlyPlugins : sourceOnlyPlugins).concat(
         babelOptions.plugins
       );
+      if (isTestFile && isInDevToolsPackages) {
+        plugins.push(...devtoolsPlugins);
+      }
       return babel.transform(
         src,
         Object.assign(

From 34da5aa69b0694348fee9c3cd1351ecc70cd5bb1 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 12 May 2022 08:51:32 -0400
Subject: [PATCH 1354/1603] Only treat updates to lazy as a new mount in legacy
 mode (#24530)

* Only treat updates to lazy as a new mount in legacy mode

* Update name and swap current check

* Flip order back
---
 .../src/ReactFiberBeginWork.new.js            | 60 +++++++------------
 .../src/ReactFiberBeginWork.old.js            | 60 +++++++------------
 2 files changed, 40 insertions(+), 80 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 662ac5bbe59a..9ca86babe3e7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1110,16 +1110,8 @@ function updateClassComponent(
   const instance = workInProgress.stateNode;
   let shouldUpdate;
   if (instance === null) {
-    if (current !== null) {
-      // A class component without an instance only mounts if it suspended
-      // inside a non-concurrent tree, in an inconsistent state. We want to
-      // treat it like a new mount, even though an empty version of it already
-      // committed. Disconnect the alternate pointers.
-      current.alternate = null;
-      workInProgress.alternate = null;
-      // Since this is conceptually a new fiber, schedule a Placement effect
-      workInProgress.flags |= Placement;
-    }
+    resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress);
+
     // In the initial pass we might need to construct the instance.
     constructClassInstance(workInProgress, Component, nextProps);
     mountClassInstance(workInProgress, Component, nextProps, renderLanes);
@@ -1469,16 +1461,7 @@ function mountLazyComponent(
   elementType,
   renderLanes,
 ) {
-  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;
-  }
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
 
   const props = workInProgress.pendingProps;
   const lazyComponent: LazyComponentType<any, any> = elementType;
@@ -1588,16 +1571,7 @@ function mountIncompleteClassComponent(
   nextProps,
   renderLanes,
 ) {
-  if (_current !== null) {
-    // An incomplete 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;
-  }
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
 
   // Promote the fiber to a class and try rendering again.
   workInProgress.tag = ClassComponent;
@@ -1635,16 +1609,7 @@ function mountIndeterminateComponent(
   Component,
   renderLanes,
 ) {
-  if (_current !== null) {
-    // An indeterminate 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;
-  }
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
 
   const props = workInProgress.pendingProps;
   let context;
@@ -3376,6 +3341,21 @@ export function checkIfWorkInProgressReceivedUpdate() {
   return didReceiveUpdate;
 }
 
+function resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress) {
+  if ((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,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 81815280e07e..32dc0c8e8183 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1110,16 +1110,8 @@ function updateClassComponent(
   const instance = workInProgress.stateNode;
   let shouldUpdate;
   if (instance === null) {
-    if (current !== null) {
-      // A class component without an instance only mounts if it suspended
-      // inside a non-concurrent tree, in an inconsistent state. We want to
-      // treat it like a new mount, even though an empty version of it already
-      // committed. Disconnect the alternate pointers.
-      current.alternate = null;
-      workInProgress.alternate = null;
-      // Since this is conceptually a new fiber, schedule a Placement effect
-      workInProgress.flags |= Placement;
-    }
+    resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress);
+
     // In the initial pass we might need to construct the instance.
     constructClassInstance(workInProgress, Component, nextProps);
     mountClassInstance(workInProgress, Component, nextProps, renderLanes);
@@ -1469,16 +1461,7 @@ function mountLazyComponent(
   elementType,
   renderLanes,
 ) {
-  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;
-  }
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
 
   const props = workInProgress.pendingProps;
   const lazyComponent: LazyComponentType<any, any> = elementType;
@@ -1588,16 +1571,7 @@ function mountIncompleteClassComponent(
   nextProps,
   renderLanes,
 ) {
-  if (_current !== null) {
-    // An incomplete 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;
-  }
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
 
   // Promote the fiber to a class and try rendering again.
   workInProgress.tag = ClassComponent;
@@ -1635,16 +1609,7 @@ function mountIndeterminateComponent(
   Component,
   renderLanes,
 ) {
-  if (_current !== null) {
-    // An indeterminate 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;
-  }
+  resetSuspendedCurrentOnMountInLegacyMode(_current, workInProgress);
 
   const props = workInProgress.pendingProps;
   let context;
@@ -3376,6 +3341,21 @@ export function checkIfWorkInProgressReceivedUpdate() {
   return didReceiveUpdate;
 }
 
+function resetSuspendedCurrentOnMountInLegacyMode(current, workInProgress) {
+  if ((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,

From 852f10b5cf188f8aa797f9a809f0caeaa95a4231 Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Thu, 12 May 2022 10:29:36 -0400
Subject: [PATCH 1355/1603] fix a bug in console.log with non-string args
 (#24546)

---
 packages/react-devtools-shared/src/backend/utils.js | 3 ++-
 packages/react-devtools-shared/src/hook.js          | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 4a01b1804b9d..169623a1633a 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -181,8 +181,9 @@ export function formatWithStyles(
     inputArgs === undefined ||
     inputArgs === null ||
     inputArgs.length === 0 ||
+    typeof inputArgs[0] !== 'string' ||
     // Matches any of %c but not %%c
-    (typeof inputArgs[0] === 'string' && inputArgs[0].match(/([^%]|^)(%c)/g)) ||
+    inputArgs[0].match(/([^%]|^)(%c)/g) ||
     style === undefined
   ) {
     return inputArgs;
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 8250bebc9354..d41ea4559159 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -180,9 +180,9 @@ export function installHook(target: any): DevToolsHook | null {
       inputArgs === undefined ||
       inputArgs === null ||
       inputArgs.length === 0 ||
+      typeof inputArgs[0] !== 'string' ||
       // Matches any of %c but not %%c
-      (typeof inputArgs[0] === 'string' &&
-        inputArgs[0].match(/([^%]|^)(%c)/g)) ||
+      inputArgs[0].match(/([^%]|^)(%c)/g) ||
       style === undefined
     ) {
       return inputArgs;

From 52c434be1dffd0d599a7977ce9cf8bb3326c7806 Mon Sep 17 00:00:00 2001
From: "Mengdi \"Monday\" Chen" <mengdi@fb.com>
Date: Thu, 12 May 2022 10:52:55 -0400
Subject: [PATCH 1356/1603] React DevTools 4.24.5 -> 4.24.6 (#24547)

---
 packages/react-devtools-core/package.json              |  2 +-
 .../react-devtools-extensions/chrome/manifest.json     |  4 ++--
 packages/react-devtools-extensions/edge/manifest.json  |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json    |  2 +-
 packages/react-devtools-inline/package.json            |  2 +-
 packages/react-devtools-timeline/package.json          |  2 +-
 packages/react-devtools/CHANGELOG.md                   | 10 ++++++++++
 packages/react-devtools/package.json                   |  4 ++--
 8 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index f9adf9aaa0f9..d53a0057463f 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.5",
+  "version": "4.24.6",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index beb4ff7413ef..b8f09f0014d8 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.5",
-  "version_name": "4.24.5",
+  "version": "4.24.6",
+  "version_name": "4.24.6",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 1f47b0b0aaa6..b7e96ed72dd3 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.5",
-  "version_name": "4.24.5",
+  "version": "4.24.6",
+  "version_name": "4.24.6",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 62056db3a715..9b0c048de8c3 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.5",
+  "version": "4.24.6",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 3b8cf6bda102..46fd8c811f28 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.5",
+  "version": "4.24.6",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index a82111f0cf9d..79228556454e 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.5",
+  "version": "4.24.6",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index c08bd7f41386..945c99ca7517 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,16 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index a7f4c35b0342..ce466c9619fe 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.5",
+  "version": "4.24.6",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.5",
+    "react-devtools-core": "4.24.6",
     "update-notifier": "^2.1.0"
   }
 }

From 62662633d1293f47ab0f5ee444a2a2fd52df322a Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@gmail.com>
Date: Thu, 12 May 2022 12:40:17 -0400
Subject: [PATCH 1357/1603] Remove enableFlipOffscreenUnhideOrder (#24545)

---
 .../src/ReactFiberCommitWork.new.js           | 67 ++++++-------------
 .../src/ReactFiberCommitWork.old.js           | 67 ++++++-------------
 .../src/__tests__/ReactOffscreen-test.js      |  1 -
 packages/shared/ReactFeatureFlags.js          |  1 -
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 13 files changed, 38 insertions(+), 107 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 0c89aba8cdbd..5a94be4f6a87 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -42,7 +42,6 @@ import {
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
-  enableFlipOffscreenUnhideOrder,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2271,59 +2270,31 @@ function commitMutationEffectsOnFiber(
         const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
-        if (enableFlipOffscreenUnhideOrder) {
-          if (enableSuspenseLayoutEffectSemantics) {
-            if (isHidden) {
-              if (!wasHidden) {
-                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                  nextEffect = offscreenBoundary;
-                  let offscreenChild = offscreenBoundary.child;
-                  while (offscreenChild !== null) {
-                    nextEffect = offscreenChild;
-                    disappearLayoutEffects_begin(offscreenChild);
-                    offscreenChild = offscreenChild.sibling;
-                  }
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
                 }
               }
-            } else {
-              if (wasHidden) {
-                // TODO: Move re-appear call here for symmetry?
-              }
             }
-          }
-
-          if (supportsMutation) {
-            // TODO: This needs to run whenever there's an insertion or update
-            // inside a hidden Offscreen tree.
-            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-          }
-        } else {
-          if (supportsMutation) {
-            // TODO: This needs to run whenever there's an insertion or update
-            // inside a hidden Offscreen tree.
-            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-          }
-
-          if (enableSuspenseLayoutEffectSemantics) {
-            if (isHidden) {
-              if (!wasHidden) {
-                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                  nextEffect = offscreenBoundary;
-                  let offscreenChild = offscreenBoundary.child;
-                  while (offscreenChild !== null) {
-                    nextEffect = offscreenChild;
-                    disappearLayoutEffects_begin(offscreenChild);
-                    offscreenChild = offscreenChild.sibling;
-                  }
-                }
-              }
-            } else {
-              if (wasHidden) {
-                // TODO: Move re-appear call here for symmetry?
-              }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
             }
           }
         }
+
+        if (supportsMutation) {
+          // TODO: This needs to run whenever there's an insertion or update
+          // inside a hidden Offscreen tree.
+          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+        }
       }
       return;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 0cd78fdc13a3..439a46b1204d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -42,7 +42,6 @@ import {
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
-  enableFlipOffscreenUnhideOrder,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -2271,59 +2270,31 @@ function commitMutationEffectsOnFiber(
         const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
-        if (enableFlipOffscreenUnhideOrder) {
-          if (enableSuspenseLayoutEffectSemantics) {
-            if (isHidden) {
-              if (!wasHidden) {
-                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                  nextEffect = offscreenBoundary;
-                  let offscreenChild = offscreenBoundary.child;
-                  while (offscreenChild !== null) {
-                    nextEffect = offscreenChild;
-                    disappearLayoutEffects_begin(offscreenChild);
-                    offscreenChild = offscreenChild.sibling;
-                  }
+        if (enableSuspenseLayoutEffectSemantics) {
+          if (isHidden) {
+            if (!wasHidden) {
+              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+                nextEffect = offscreenBoundary;
+                let offscreenChild = offscreenBoundary.child;
+                while (offscreenChild !== null) {
+                  nextEffect = offscreenChild;
+                  disappearLayoutEffects_begin(offscreenChild);
+                  offscreenChild = offscreenChild.sibling;
                 }
               }
-            } else {
-              if (wasHidden) {
-                // TODO: Move re-appear call here for symmetry?
-              }
             }
-          }
-
-          if (supportsMutation) {
-            // TODO: This needs to run whenever there's an insertion or update
-            // inside a hidden Offscreen tree.
-            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-          }
-        } else {
-          if (supportsMutation) {
-            // TODO: This needs to run whenever there's an insertion or update
-            // inside a hidden Offscreen tree.
-            hideOrUnhideAllChildren(offscreenBoundary, isHidden);
-          }
-
-          if (enableSuspenseLayoutEffectSemantics) {
-            if (isHidden) {
-              if (!wasHidden) {
-                if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                  nextEffect = offscreenBoundary;
-                  let offscreenChild = offscreenBoundary.child;
-                  while (offscreenChild !== null) {
-                    nextEffect = offscreenChild;
-                    disappearLayoutEffects_begin(offscreenChild);
-                    offscreenChild = offscreenChild.sibling;
-                  }
-                }
-              }
-            } else {
-              if (wasHidden) {
-                // TODO: Move re-appear call here for symmetry?
-              }
+          } else {
+            if (wasHidden) {
+              // TODO: Move re-appear call here for symmetry?
             }
           }
         }
+
+        if (supportsMutation) {
+          // TODO: This needs to run whenever there's an insertion or update
+          // inside a hidden Offscreen tree.
+          hideOrUnhideAllChildren(offscreenBoundary, isHidden);
+        }
       }
       return;
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 13257a82b81b..d1e836c252ec 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -312,7 +312,6 @@ describe('ReactOffscreen', () => {
 
   // @gate experimental || www
   // @gate enableSuspenseLayoutEffectSemantics
-  // @gate enableFlipOffscreenUnhideOrder
   it('hides children of offscreen after layout effects are destroyed', async () => {
     const root = ReactNoop.createRoot();
     function Child({text}) {
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 051840469e3f..7b76a1f7524c 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -38,7 +38,6 @@ export const skipUnmountedBoundaries = true;
 //
 // TODO: Finish rolling out in www
 export const enableSuspenseLayoutEffectSemantics = true;
-export const enableFlipOffscreenUnhideOrder = true;
 
 // TODO: Finish rolling out in www
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index dcd338c5bc97..ea80fba1da24 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -59,7 +59,6 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = true;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 7bd8fd832080..9a5c2bca40a7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -49,7 +49,6 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index f24d692b3a16..157fda232ed3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -49,7 +49,6 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 69be47410039..0a770e1438a8 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -44,7 +44,6 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 6100e7db998d..157f9d6a4152 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -49,7 +49,6 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index bce4d6c114b0..072c58b5c8ec 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -49,7 +49,6 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 22b96d4ec7a3..a607e3ea7f71 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -49,7 +49,6 @@ export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = true;
 export const deletedTreeCleanUpLevel = 3;
 export const enableSuspenseLayoutEffectSemantics = false;
-export const enableFlipOffscreenUnhideOrder = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index ab0a2e1aa41c..7a89e41ad54f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -29,7 +29,6 @@ export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableSymbolFallbackForWWW = __VARIANT__;
-export const enableFlipOffscreenUnhideOrder = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 2f222b2e6140..a1932e21c4e1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,7 +33,6 @@ export const {
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
   enableClientRenderFallbackOnTextMismatch,
-  enableFlipOffscreenUnhideOrder,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 2c8a1452b82b9ec5ebfa3f370b31fda19610ae92 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Thu, 12 May 2022 17:58:18 +0100
Subject: [PATCH 1358/1603] Fix ignored setState in Safari when iframe is
 touched (#24459)

---
 .../ReactDOMSafariMicrotaskBug-test.js        | 41 ++++++++++++++++---
 .../src/ReactFiberWorkLoop.new.js             |  9 ++--
 .../src/ReactFiberWorkLoop.old.js             |  9 ++--
 3 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
index 0ba0848d8e3c..ef820ac77c6c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js
@@ -16,7 +16,7 @@ let act;
 
 describe('ReactDOMSafariMicrotaskBug-test', () => {
   let container;
-  let simulateSafariBug;
+  let flushMicrotasksPrematurely;
 
   beforeEach(() => {
     // In Safari, microtasks don't always run on clean stack.
@@ -27,9 +27,12 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
     window.queueMicrotask = function(cb) {
       queue.push(cb);
     };
-    simulateSafariBug = function() {
-      queue.forEach(cb => cb());
-      queue = [];
+    flushMicrotasksPrematurely = function() {
+      while (queue.length > 0) {
+        const prevQueue = queue;
+        queue = [];
+        prevQueue.forEach(cb => cb());
+      }
     };
 
     jest.resetModules();
@@ -45,7 +48,7 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
     document.body.removeChild(container);
   });
 
-  it('should be resilient to buggy queueMicrotask', async () => {
+  it('should deal with premature microtask in commit phase', async () => {
     let ran = false;
     function Foo() {
       const [state, setState] = React.useState(0);
@@ -55,7 +58,7 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
             if (!ran) {
               ran = true;
               setState(1);
-              simulateSafariBug();
+              flushMicrotasksPrematurely();
             }
           }}>
           {state}
@@ -68,4 +71,30 @@ describe('ReactDOMSafariMicrotaskBug-test', () => {
     });
     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={() => {
+            setState(1);
+            flushMicrotasksPrematurely();
+          }}>
+          {state}
+        </button>
+      );
+    }
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Foo />);
+    });
+    expect(container.textContent).toBe('0');
+    await act(async () => {
+      container.firstChild.dispatchEvent(
+        new MouseEvent('click', {bubbles: true}),
+      );
+    });
+    expect(container.textContent).toBe('1');
+  });
 });
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index b4343485259a..6e438aaa7bb6 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -835,9 +835,12 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
           // 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.
-          if (executionContext === NoContext) {
-            // It's only safe to do this conditionally because we always
-            // check for pending work before we exit the task.
+          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).
             flushSyncCallbacks();
           }
         });
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 58757a37367c..3e02a4fe3769 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -835,9 +835,12 @@ function ensureRootIsScheduled(root: FiberRoot, currentTime: number) {
           // 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.
-          if (executionContext === NoContext) {
-            // It's only safe to do this conditionally because we always
-            // check for pending work before we exit the task.
+          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).
             flushSyncCallbacks();
           }
         });

From 0ecb77d4c54664e20abd89df0d19ef4e4594f4c8 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 13 May 2022 15:34:33 -0700
Subject: [PATCH 1359/1603] [DevTools] Fix formatWithStyles not styling the
 results if the first argument is an object + Added unit tests (#24554)

formatWithStyles currently doesn't style the array argument if the first argument is an object. This PR fixes this and also adds unit tests.
---
 .../src/__tests__/utils-test.js               | 21 +++++++++++++++++++
 .../src/backend/utils.js                      |  5 ++---
 packages/react-devtools-shared/src/hook.js    |  6 +++---
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js
index 02bc6be4657a..ed8920295837 100644
--- a/packages/react-devtools-shared/src/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -189,5 +189,26 @@ describe('utils', () => {
       ]);
       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',
+      ]);
+    });
   });
 });
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 169623a1633a..5c4b1289855b 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -181,9 +181,8 @@ export function formatWithStyles(
     inputArgs === undefined ||
     inputArgs === null ||
     inputArgs.length === 0 ||
-    typeof inputArgs[0] !== 'string' ||
     // Matches any of %c but not %%c
-    inputArgs[0].match(/([^%]|^)(%c)/g) ||
+    (typeof inputArgs[0] === 'string' && inputArgs[0].match(/([^%]|^)(%c)/g)) ||
     style === undefined
   ) {
     return inputArgs;
@@ -191,7 +190,7 @@ export function formatWithStyles(
 
   // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
   const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
-  if (inputArgs[0].match(REGEXP)) {
+  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) => {
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index d41ea4559159..8adbb7534a25 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -180,9 +180,9 @@ export function installHook(target: any): DevToolsHook | null {
       inputArgs === undefined ||
       inputArgs === null ||
       inputArgs.length === 0 ||
-      typeof inputArgs[0] !== 'string' ||
       // Matches any of %c but not %%c
-      inputArgs[0].match(/([^%]|^)(%c)/g) ||
+      (typeof inputArgs[0] === 'string' &&
+        inputArgs[0].match(/([^%]|^)(%c)/g)) ||
       style === undefined
     ) {
       return inputArgs;
@@ -190,7 +190,7 @@ export function installHook(target: any): DevToolsHook | null {
 
     // Matches any of %(o|O|d|i|s|f), but not %%(o|O|d|i|s|f)
     const REGEXP = /([^%]|^)((%%)*)(%([oOdisf]))/g;
-    if (inputArgs[0].match(REGEXP)) {
+    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) => {

From 4c03bb6ed01a448185d9a1554229208a9480560d Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 13 May 2022 21:54:50 -0700
Subject: [PATCH 1360/1603] [DevTools] ignore tests without reactVersion pragma
 if REACT_VERSION specified (#24555)

In DevTools tests, if the REACT_VERSION specified, we know this is a regression test (testing older React Versions). Because a lot of tests test the DevTools front end and we don't want to run them in the regression test scenario, we decided to only run tests that have the // @reactVersion pragma defined.

Because if there are no tests specified, jest will fail, we also opt to use jest.skip to skip all the tests that we don't want to run for a specific React version istead.

This PR makes this change.
---
 .../transform-react-version-pragma-test.js    | 31 ++++++++++++--
 .../babel/transform-react-version-pragma.js   | 41 +++++++++++--------
 scripts/jest/config.build-devtools.js         |  4 +-
 scripts/jest/devtools/preprocessor.js         | 13 +++++-
 .../jest/devtools}/setupEnv.js                | 14 +++++--
 scripts/jest/preprocessor.js                  |  4 +-
 6 files changed, 77 insertions(+), 30 deletions(-)
 rename {packages/react-devtools-shared/src/__tests__ => scripts/jest/devtools}/setupEnv.js (86%)

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
index 7160aea7353b..f48419e01a9d 100644
--- 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
@@ -10,27 +10,40 @@ const semver = require('semver');
 
 let shouldPass;
 let isFocused;
+let shouldIgnore;
 describe('transform-react-version-pragma', () => {
+  const originalTest = test;
+
   // eslint-disable-next-line no-unused-vars
   const _test_react_version = (range, testName, cb) => {
-    test(testName, (...args) => {
-      shouldPass = semver.satisfies('18.0.0', range);
+    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) => {
-    test(testName, (...args) => {
-      shouldPass = semver.satisfies('18.0.0', range);
+    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) => {
+      shouldIgnore = true;
+      shouldPass = false;
+      return cb(...args);
+    });
+  };
+
   beforeEach(() => {
     shouldPass = null;
     isFocused = false;
+    shouldIgnore = false;
   });
 
   // @reactVersion >= 17.9
@@ -124,4 +137,14 @@ describe('transform-react-version-pragma', () => {
     expect(shouldPass).toBe(true);
     expect(isFocused).toBe(true);
   });
+
+  test('ignore test if no reactVersion', () => {
+    expect(shouldPass).toBe(false);
+    expect(shouldIgnore).toBe(true);
+  });
+
+  test.only('ignore focused test if no reactVersion', () => {
+    expect(shouldPass).toBe(false);
+    expect(shouldIgnore).toBe(true);
+  });
 });
diff --git a/scripts/babel/transform-react-version-pragma.js b/scripts/babel/transform-react-version-pragma.js
index ddf7f31ec502..272d0d2fa59d 100644
--- a/scripts/babel/transform-react-version-pragma.js
+++ b/scripts/babel/transform-react-version-pragma.js
@@ -19,6 +19,10 @@ function transform(babel) {
   // See info about semver ranges here:
   // https://www.npmjs.com/package/semver
   function buildGateVersionCondition(comments) {
+    if (!comments) {
+      return null;
+    }
+
     let conditions = null;
     for (const line of comments) {
       const commentStr = line.value.trim();
@@ -62,15 +66,15 @@ function transform(babel) {
                 callee.name === 'fit'
               ) {
                 const comments = statement.leadingComments;
-                if (comments !== undefined) {
-                  const condition = buildGateVersionCondition(comments);
-                  if (condition !== null) {
-                    callee.name =
-                      callee.name === 'fit'
-                        ? '_test_react_version_focus'
-                        : '_test_react_version';
-                    expression.arguments = [condition, ...expression.arguments];
-                  }
+                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 {
+                  callee.name = '_test_ignore_for_react_version';
                 }
               }
               break;
@@ -84,14 +88,17 @@ function transform(babel) {
                 callee.property.name === 'only'
               ) {
                 const comments = statement.leadingComments;
-                if (comments !== undefined) {
-                  const condition = buildGateVersionCondition(comments);
-                  if (condition !== null) {
-                    statement.expression = t.callExpression(
-                      t.identifier('_test_react_version_focus'),
-                      [condition, ...expression.arguments]
-                    );
-                  }
+                const condition = buildGateVersionCondition(comments);
+                if (condition !== null) {
+                  statement.expression = t.callExpression(
+                    t.identifier('_test_react_version_focus'),
+                    [condition, ...expression.arguments]
+                  );
+                } else {
+                  statement.expression = t.callExpression(
+                    t.identifier('_test_ignore_for_react_version'),
+                    expression.arguments
+                  );
                 }
               }
               break;
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 7f0688c272eb..5a9cdd61e38f 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -89,9 +89,7 @@ module.exports = Object.assign({}, baseConfig, {
   setupFiles: [
     ...baseConfig.setupFiles,
     require.resolve('./setupTests.build.js'),
-    require.resolve(
-      '../../packages/react-devtools-shared/src/__tests__/setupEnv.js'
-    ),
+    require.resolve('./devtools/setupEnv.js'),
   ],
   setupFilesAfterEnv: [
     require.resolve(
diff --git a/scripts/jest/devtools/preprocessor.js b/scripts/jest/devtools/preprocessor.js
index 836f02c4bd66..b9dfb9937bc4 100644
--- a/scripts/jest/devtools/preprocessor.js
+++ b/scripts/jest/devtools/preprocessor.js
@@ -4,6 +4,17 @@ const pathToTransformReactVersionPragma = require.resolve(
   '../../babel/transform-react-version-pragma'
 );
 
+function getDevToolsPlugins(filePath) {
+  const plugins = [];
+  if (
+    process.env.REACT_VERSION ||
+    filePath.match(/\/transform-react-version-pragma-test/)
+  ) {
+    plugins.push(pathToTransformReactVersionPragma);
+  }
+  return plugins;
+}
+
 module.exports = {
-  devtoolsPlugins: [pathToTransformReactVersionPragma],
+  getDevToolsPlugins,
 };
diff --git a/packages/react-devtools-shared/src/__tests__/setupEnv.js b/scripts/jest/devtools/setupEnv.js
similarity index 86%
rename from packages/react-devtools-shared/src/__tests__/setupEnv.js
rename to scripts/jest/devtools/setupEnv.js
index 59725ad5dea4..a9c638a92ff9 100644
--- a/packages/react-devtools-shared/src/__tests__/setupEnv.js
+++ b/scripts/jest/devtools/setupEnv.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const semver = require('semver');
-const ReactVersion = require('../../../shared/ReactVersion');
+const ReactVersion = require('../../../packages/shared/ReactVersion');
 
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
@@ -30,21 +30,29 @@ global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
 
 global._test_react_version = (range, testName, callback) => {
   const trimmedRange = range.replaceAll(' ', '');
-  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const reactVersion = process.env.REACT_VERSION || ReactVersion.default;
   const shouldPass = semver.satisfies(reactVersion, trimmedRange);
 
   if (shouldPass) {
     test(testName, callback);
+  } else {
+    test.skip(testName, callback);
   }
 };
 
 global._test_react_version_focus = (range, testName, callback) => {
   const trimmedRange = range.replaceAll(' ', '');
-  const reactVersion = process.env.REACT_VERSION || ReactVersion;
+  const reactVersion = process.env.REACT_VERSION || ReactVersion.default;
   const shouldPass = semver.satisfies(reactVersion, trimmedRange);
 
   if (shouldPass) {
     // eslint-disable-next-line jest/no-focused-tests
     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/preprocessor.js b/scripts/jest/preprocessor.js
index 773496bd1dab..0acae1833d39 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -7,7 +7,7 @@ const coffee = require('coffee-script');
 
 const tsPreprocessor = require('./typescript/preprocessor');
 const createCacheKeyFunction = require('fbjs-scripts/jest/createCacheKeyFunction');
-const {devtoolsPlugins} = require('./devtools/preprocessor.js');
+const {getDevToolsPlugins} = require('./devtools/preprocessor.js');
 
 const pathToBabel = path.join(
   require.resolve('@babel/core'),
@@ -84,7 +84,7 @@ module.exports = {
         babelOptions.plugins
       );
       if (isTestFile && isInDevToolsPackages) {
-        plugins.push(...devtoolsPlugins);
+        plugins.push(...getDevToolsPlugins(filePath));
       }
       return babel.transform(
         src,

From c5e039d9b0857b10fbcea861469ad0948c84b045 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 16 May 2022 08:30:43 -0700
Subject: [PATCH 1361/1603] [DevTools] Add jest-cli --reactVersion argument
 (#24556)

Add `--reactVersion` argument. This argument is only used in DevTools. When this is specified, run only the tests that have the `// @reactVersion` pragma that satisfies the semver version range. Otherwise, run tests as normal
---
 scripts/jest/jest-cli.js | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index e1a2d9b4285a..effecf3d22ef 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -5,6 +5,7 @@ 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';
@@ -104,6 +105,11 @@ const argv = yargs
       type: 'boolean',
       default: false,
     },
+    reactVersion: {
+      describe: 'DevTools testing for specific version of React',
+      requiresArg: true,
+      type: 'string',
+    },
   }).argv;
 
 function logError(message) {
@@ -166,11 +172,20 @@ function validateOptions() {
       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()) {
@@ -314,6 +329,10 @@ function getEnvars() {
     envars.VARIANT = true;
   }
 
+  if (argv.reactVersion) {
+    envars.REACT_VERSION = semver.coerce(argv.reactVersion);
+  }
+
   return envars;
 }
 

From 357a61324f8d746a7f745dfc57009ba952c7d640 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 16 May 2022 10:23:46 -0700
Subject: [PATCH 1362/1603] [DevTools][Transition Tracing] Added support for
 Suspense Boundaries (#23365)

This PR:

* During the passive effect complete phase for Offscreen, we add all the transitions that were added to the update queue in the render phase to the transitions set on the memoziedState. We also add the stateNode for the Offscreen component to the root pendingSuspenseBoundaries map if the suspense boundary has gone from shown to fallback. We remove the stateNode if the boundary goes from fallback to shown.
* During the passive effect complete phase for the HostRoot, for each transition that was initiated during this commit, we add a pending transitionStart callback. We also add them to the transition set on the memoizedState for the HostRoot. If the root pendingSuspenseBoundaries is empty, we add a pending transitionComplete callback.
---
 .../src/ReactFiberCommitWork.new.js           | 167 +++++++++++++++-
 .../src/ReactFiberCommitWork.old.js           | 167 +++++++++++++++-
 .../__tests__/ReactTransitionTracing-test.js  | 181 ++++++++++++++++++
 3 files changed, 497 insertions(+), 18 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 5a94be4f6a87..7e8459d496d9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -22,7 +22,10 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {UpdateQueue} from './ReactUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {
+  OffscreenState,
+  OffscreenInstance,
+} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {RootState} from './ReactFiberRoot.new';
@@ -62,6 +65,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
@@ -1001,7 +1005,8 @@ function commitLayoutEffectOnFiber(
       case IncompleteClassComponent:
       case ScopeComponent:
       case OffscreenComponent:
-      case LegacyHiddenComponent: {
+      case LegacyHiddenComponent:
+      case TracingMarkerComponent: {
         break;
       }
 
@@ -1066,6 +1071,89 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
   }
 }
 
+function commitTransitionProgress(
+  finishedRoot: FiberRoot,
+  offscreenFiber: Fiber,
+) {
+  if (enableTransitionTracing) {
+    // This function adds suspense boundaries to the root
+    // or tracing marker's pendingSuspenseBoundaries 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 rootState: RootState = finishedRoot.current.memoizedState;
+    // TODO(luna) move pendingSuspenseBoundaries and transitions from
+    // HostRoot fiber to FiberRoot
+    const rootPendingBoundaries = rootState.pendingSuspenseBoundaries;
+    const rootTransitions = rootState.transitions;
+
+    // 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.unstable_name
+    ) {
+      name = parent.memoizedProps.unstable_name;
+    }
+
+    if (rootPendingBoundaries !== null) {
+      if (previousFiber === null) {
+        // Initial mount
+        if (isHidden) {
+          rootPendingBoundaries.set(offscreenInstance, {
+            name,
+          });
+        }
+      } 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 (rootPendingBoundaries.has(offscreenInstance)) {
+            rootPendingBoundaries.delete(offscreenInstance);
+
+            if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
+              rootTransitions.forEach(transition => {
+                addTransitionCompleteCallbackToPendingTransition({
+                  transitionName: transition.name,
+                  startTime: transition.startTime,
+                });
+              });
+            }
+          }
+        } else if (!wasHidden && isHidden) {
+          // The suspense boundaries was just hidden. Add the boundary
+          // to the pending boundary set if it's there
+          rootPendingBoundaries.set(offscreenInstance, {
+            name,
+          });
+        }
+      }
+    }
+  }
+}
+
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
   // Only hide or unhide the top-most host nodes.
   let hostSubtreeRoot = null;
@@ -2747,22 +2835,48 @@ function commitPassiveMountOnFiber(
       }
 
       if (enableTransitionTracing) {
+        // Get the transitions that were initiatized during the render
+        // and add a start transition callback for each of them
+        const state = finishedWork.memoizedState;
+        // TODO Since it's a mutable field, this should live on the FiberRoot
+        if (state.transitions === null) {
+          state.transitions = new Set([]);
+        }
+        const pendingTransitions = state.transitions;
+        const pendingSuspenseBoundaries = state.pendingSuspenseBoundaries;
+
+        // Initial render
         if (committedTransitions !== null) {
           committedTransitions.forEach(transition => {
-            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
+            pendingTransitions.add(transition);
+          });
 
-            addTransitionCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
+          if (
+            pendingSuspenseBoundaries === null ||
+            pendingSuspenseBoundaries.size === 0
+          ) {
+            pendingTransitions.forEach(transition => {
+              addTransitionCompleteCallbackToPendingTransition({
+                transitionName: transition.name,
+                startTime: transition.startTime,
+              });
             });
-          });
+          }
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
-          finishedWork.memoizedState.transitions = null;
+        }
+
+        // If there are no more pending suspense boundaries we
+        // clear the transitions because they are all complete.
+        if (
+          pendingSuspenseBoundaries === null ||
+          pendingSuspenseBoundaries.size === 0
+        ) {
+          state.transitions = null;
         }
       }
       break;
@@ -2800,9 +2914,44 @@ function commitPassiveMountOnFiber(
       }
 
       if (enableTransitionTracing) {
-        // TODO: Add code to actually process the update queue
+        const isFallback = finishedWork.memoizedState;
+        const queue = (finishedWork.updateQueue: any);
+        const rootMemoizedState = finishedRoot.current.memoizedState;
+
+        if (queue !== null) {
+          // We have one instance of the pendingSuspenseBoundaries map.
+          // We only need one because we update it during the commit phase.
+          // We instantiate a new Map if we haven't already
+          if (rootMemoizedState.pendingSuspenseBoundaries === null) {
+            rootMemoizedState.pendingSuspenseBoundaries = new Map();
+          }
+
+          if (isFallback) {
+            const transitions = queue.transitions;
+            let prevTransitions = finishedWork.memoizedState.transitions;
+            // 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 (transitions !== null) {
+              if (prevTransitions === null) {
+                // We only have one instance of the transitions set
+                // because we update it only during the commit phase. We
+                // will create the set on a as needed basis in the commit phase
+                finishedWork.memoizedState.transitions = prevTransitions = new Set();
+              }
+
+              transitions.forEach(transition => {
+                prevTransitions.add(transition);
+              });
+            }
+          }
+        }
+
+        commitTransitionProgress(finishedRoot, finishedWork);
+
         finishedWork.updateQueue = null;
       }
+
       break;
     }
     case CacheComponent: {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 439a46b1204d..4dceedd3a303 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -22,7 +22,10 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {UpdateQueue} from './ReactUpdateQueue.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {
+  OffscreenState,
+  OffscreenInstance,
+} from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {RootState} from './ReactFiberRoot.old';
@@ -62,6 +65,7 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {detachDeletedInstance} from './ReactFiberHostConfig';
 import {
@@ -1001,7 +1005,8 @@ function commitLayoutEffectOnFiber(
       case IncompleteClassComponent:
       case ScopeComponent:
       case OffscreenComponent:
-      case LegacyHiddenComponent: {
+      case LegacyHiddenComponent:
+      case TracingMarkerComponent: {
         break;
       }
 
@@ -1066,6 +1071,89 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
   }
 }
 
+function commitTransitionProgress(
+  finishedRoot: FiberRoot,
+  offscreenFiber: Fiber,
+) {
+  if (enableTransitionTracing) {
+    // This function adds suspense boundaries to the root
+    // or tracing marker's pendingSuspenseBoundaries 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 rootState: RootState = finishedRoot.current.memoizedState;
+    // TODO(luna) move pendingSuspenseBoundaries and transitions from
+    // HostRoot fiber to FiberRoot
+    const rootPendingBoundaries = rootState.pendingSuspenseBoundaries;
+    const rootTransitions = rootState.transitions;
+
+    // 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.unstable_name
+    ) {
+      name = parent.memoizedProps.unstable_name;
+    }
+
+    if (rootPendingBoundaries !== null) {
+      if (previousFiber === null) {
+        // Initial mount
+        if (isHidden) {
+          rootPendingBoundaries.set(offscreenInstance, {
+            name,
+          });
+        }
+      } 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 (rootPendingBoundaries.has(offscreenInstance)) {
+            rootPendingBoundaries.delete(offscreenInstance);
+
+            if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
+              rootTransitions.forEach(transition => {
+                addTransitionCompleteCallbackToPendingTransition({
+                  transitionName: transition.name,
+                  startTime: transition.startTime,
+                });
+              });
+            }
+          }
+        } else if (!wasHidden && isHidden) {
+          // The suspense boundaries was just hidden. Add the boundary
+          // to the pending boundary set if it's there
+          rootPendingBoundaries.set(offscreenInstance, {
+            name,
+          });
+        }
+      }
+    }
+  }
+}
+
 function hideOrUnhideAllChildren(finishedWork, isHidden) {
   // Only hide or unhide the top-most host nodes.
   let hostSubtreeRoot = null;
@@ -2747,22 +2835,48 @@ function commitPassiveMountOnFiber(
       }
 
       if (enableTransitionTracing) {
+        // Get the transitions that were initiatized during the render
+        // and add a start transition callback for each of them
+        const state = finishedWork.memoizedState;
+        // TODO Since it's a mutable field, this should live on the FiberRoot
+        if (state.transitions === null) {
+          state.transitions = new Set([]);
+        }
+        const pendingTransitions = state.transitions;
+        const pendingSuspenseBoundaries = state.pendingSuspenseBoundaries;
+
+        // Initial render
         if (committedTransitions !== null) {
           committedTransitions.forEach(transition => {
-            // TODO(luna) Do we want to log TransitionStart in the startTransition callback instead?
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
+            pendingTransitions.add(transition);
+          });
 
-            addTransitionCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
+          if (
+            pendingSuspenseBoundaries === null ||
+            pendingSuspenseBoundaries.size === 0
+          ) {
+            pendingTransitions.forEach(transition => {
+              addTransitionCompleteCallbackToPendingTransition({
+                transitionName: transition.name,
+                startTime: transition.startTime,
+              });
             });
-          });
+          }
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
-          finishedWork.memoizedState.transitions = null;
+        }
+
+        // If there are no more pending suspense boundaries we
+        // clear the transitions because they are all complete.
+        if (
+          pendingSuspenseBoundaries === null ||
+          pendingSuspenseBoundaries.size === 0
+        ) {
+          state.transitions = null;
         }
       }
       break;
@@ -2800,9 +2914,44 @@ function commitPassiveMountOnFiber(
       }
 
       if (enableTransitionTracing) {
-        // TODO: Add code to actually process the update queue
+        const isFallback = finishedWork.memoizedState;
+        const queue = (finishedWork.updateQueue: any);
+        const rootMemoizedState = finishedRoot.current.memoizedState;
+
+        if (queue !== null) {
+          // We have one instance of the pendingSuspenseBoundaries map.
+          // We only need one because we update it during the commit phase.
+          // We instantiate a new Map if we haven't already
+          if (rootMemoizedState.pendingSuspenseBoundaries === null) {
+            rootMemoizedState.pendingSuspenseBoundaries = new Map();
+          }
+
+          if (isFallback) {
+            const transitions = queue.transitions;
+            let prevTransitions = finishedWork.memoizedState.transitions;
+            // 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 (transitions !== null) {
+              if (prevTransitions === null) {
+                // We only have one instance of the transitions set
+                // because we update it only during the commit phase. We
+                // will create the set on a as needed basis in the commit phase
+                finishedWork.memoizedState.transitions = prevTransitions = new Set();
+              }
+
+              transitions.forEach(transition => {
+                prevTransitions.add(transition);
+              });
+            }
+          }
+        }
+
+        commitTransitionProgress(finishedRoot, finishedWork);
+
         finishedWork.updateQueue = null;
       }
+
       break;
     }
     case CacheComponent: {
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 0b07a7f778cb..07481c68f94d 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -13,9 +13,14 @@ let ReactNoop;
 let Scheduler;
 let act;
 
+let getCacheForType;
 let useState;
+let Suspense;
 let startTransition;
 
+let caches;
+let seededCache;
+
 describe('ReactInteractionTracing', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -28,13 +33,121 @@ describe('ReactInteractionTracing', () => {
 
     useState = React.useState;
     startTransition = React.startTransition;
+    Suspense = React.Suspense;
+
+    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.unstable_yieldValue(`Suspend [${text}]`);
+          throw record.value;
+        case 'rejected':
+          Scheduler.unstable_yieldValue(`Error [${text}]`);
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(fullText);
+    return fullText;
+  }
+
   function Text({text}) {
     Scheduler.unstable_yieldValue(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.
@@ -98,4 +211,72 @@ describe('ReactInteractionTracing', () => {
       });
     });
   });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace interactions for async roots', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(page transition, 1000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Page Two');
+
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'onTransitionComplete(page transition, 1000, 3000)',
+      ]);
+    });
+  });
 });

From a412d787e997da9e47e47886cf7a8fed2ccb6bee Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 18 May 2022 11:13:19 -0400
Subject: [PATCH 1363/1603] Remove dependency on build artifacts mirror
 (#24575)

This reverts #24106.

There was a regression in CircleCI's artifacts API recently where you
could no longer access artifacts without an authorization token. This
broke our size reporting CI job because we can't use an authorization
token on external PRs without potentially leaking it. As a temporary
workaround, I changed the size reporting job to use a public mirror of
our build artifacts.

The CircleCI API has since been fixed to no longer require
authorization, so we can revert the workaround.
---
 .circleci/config.yml                          | 23 +++++++++++--------
 .../download-build-artifacts.js               | 10 +-------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 866276dd4c81..a9905a53b7a9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -127,19 +127,22 @@ jobs:
     environment: *environment
     steps:
       - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
       - run:
           name: Download artifacts for base revision
-          # TODO: We can't use the normal download-build script here because it
-          # depends on the CircleCI artifacts API, which was recently changed to
-          # require authorization. And we can't pass an authorization token
-          # without possibly leaking it to the public, since we run sizebot on
-          # PRs from external contributors. As a temporary workaround, this job
-          # will pull the artifacts from a public mirror that I set up. But we
-          # should find some other solution so we don't have to maintain
-          # the mirror.
           command: |
-            curl -L --retry 60 --retry-delay 10 --retry-max-time 600 https://react-builds.vercel.app/api/commits/$(git merge-base HEAD origin/main)/artifacts/build.tgz | tar -xz
-            mv ./build ./base-build
+              git fetch origin main
+              cd ./scripts/release && yarn && cd ../../
+              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main)
+              mv ./build ./base-build
+      - run:
+          # 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.
+          name: Delete extraneous files
+          command: rm -rf ./base-build/node_modules
 
       - persist_to_workspace:
           root: .
diff --git a/scripts/release/shared-commands/download-build-artifacts.js b/scripts/release/shared-commands/download-build-artifacts.js
index 4765f41ca651..fba746520273 100644
--- a/scripts/release/shared-commands/download-build-artifacts.js
+++ b/scripts/release/shared-commands/download-build-artifacts.js
@@ -9,14 +9,6 @@ const {getArtifactsList, logPromise} = require('../utils');
 const theme = require('../theme');
 
 const run = async ({build, cwd, releaseChannel}) => {
-  const CIRCLE_TOKEN = process.env.CIRCLE_CI_API_TOKEN;
-  if (!CIRCLE_TOKEN) {
-    console.error(
-      theme.error('Missing required environment variable: CIRCLE_CI_API_TOKEN')
-    );
-    process.exit(1);
-  }
-
   const artifacts = await getArtifactsList(build);
   const buildArtifacts = artifacts.find(entry =>
     entry.path.endsWith('build.tgz')
@@ -32,7 +24,7 @@ const run = async ({build, cwd, releaseChannel}) => {
   // Download and extract artifact
   await exec(`rm -rf ./build`, {cwd});
   await exec(
-    `curl -L $(fwdproxy-config curl) ${buildArtifacts.url} -H "Circle-Token: ${CIRCLE_TOKEN}" | tar -xvz`,
+    `curl -L $(fwdproxy-config curl) ${buildArtifacts.url} | tar -xvz`,
     {
       cwd,
     }

From b77c12576d332d5cee07305a6afee68203d43e9c Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 18 May 2022 09:37:17 -0700
Subject: [PATCH 1364/1603] [DevTools] Add React Version Pragma to Tests
 (#24576)

This PR adds the reactVersion pragma to tests.

Tests without the reactVersion pragma won't be run if the reactVersion pragma isn't specified.

Tested each React version manually with the pragma to make sure the tests pass
---
 .../FastRefreshDevToolsIntegration-test.js    |  2 +
 .../src/__tests__/TimelineProfiler-test.js    | 39 +++++++++++++++++++
 .../src/__tests__/bridge-test.js              |  1 +
 .../src/__tests__/componentStacks-test.js     |  1 +
 .../src/__tests__/console-test.js             | 16 ++++++++
 .../src/__tests__/editing-test.js             | 21 ++++++++++
 .../src/__tests__/events-test.js              |  7 ++++
 .../src/__tests__/legacy/editing-test.js      | 12 ++++++
 .../__tests__/legacy/inspectElement-test.js   | 13 +++++++
 .../src/__tests__/preprocessData-test.js      | 27 +++++++++++++
 .../profilerChangeDescriptions-test.js        |  1 +
 .../src/__tests__/profilerStore-test.js       |  7 ++++
 .../src/__tests__/profilingCache-test.js      | 12 ++++++
 .../src/__tests__/profilingCharts-test.js     |  2 +
 .../profilingCommitTreeBuilder-test.js        |  5 +++
 .../src/__tests__/profilingHostRoot-test.js   |  3 ++
 .../src/__tests__/store-test.js               | 39 +++++++++++++++++++
 .../__tests__/storeComponentFilters-test.js   |  9 +++++
 .../src/__tests__/storeStressSync-test.js     |  4 ++
 .../storeStressTestConcurrent-test.js         |  4 ++
 .../src/__tests__/utils-test.js               | 23 +++++++++++
 21 files changed, 248 insertions(+)

diff --git a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
index b2b4fe9fc96d..b3e9761868c4 100644
--- a/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
+++ b/packages/react-devtools-shared/src/__tests__/FastRefreshDevToolsIntegration-test.js
@@ -123,6 +123,7 @@ describe('Fast Refresh', () => {
     return ReactFreshRuntime.createSignatureFunctionForTransform();
   }
 
+  // @reactVersion >= 16.9
   it('should not break the DevTools store', () => {
     render(`
       function Parent() {
@@ -186,6 +187,7 @@ describe('Fast Refresh', () => {
     expect(container.firstChild).not.toBe(element);
   });
 
+  // @reactVersion >= 16.9
   it('should not break when there are warnings in between patching', () => {
     withErrorsOrWarningsIgnored(['Expected:'], () => {
       render(`
diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
index 859be719c2ad..107192a4770a 100644
--- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -124,6 +124,7 @@ describe('Timeline profiler', () => {
       setPerformanceMock(null);
     });
 
+    // @reactVersion >=18.0
     it('should mark sync render without suspends or state updates', () => {
       renderHelper(<div />);
 
@@ -145,6 +146,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark concurrent render without suspends or state updates', () => {
       renderRootHelper(<div />);
 
@@ -175,6 +177,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark render yields', async () => {
       function Bar() {
         Scheduler.unstable_yieldValue('Bar');
@@ -204,6 +207,7 @@ describe('Timeline profiler', () => {
         `);
     });
 
+    // @reactVersion >=18.0
     it('should mark sync render with suspense that resolves', async () => {
       const fakeSuspensePromise = Promise.resolve(true);
       function Example() {
@@ -246,6 +250,7 @@ describe('Timeline profiler', () => {
           `);
     });
 
+    // @reactVersion >=18.0
     it('should mark sync render with suspense that rejects', async () => {
       const fakeSuspensePromise = Promise.reject(new Error('error'));
       function Example() {
@@ -284,6 +289,7 @@ describe('Timeline profiler', () => {
       expect(clearedMarks).toContain(`--suspense-rejected-0-Example`);
     });
 
+    // @reactVersion >=18.0
     it('should mark concurrent render with suspense that resolves', async () => {
       const fakeSuspensePromise = Promise.resolve(true);
       function Example() {
@@ -335,6 +341,7 @@ describe('Timeline profiler', () => {
         `);
     });
 
+    // @reactVersion >=18.0
     it('should mark concurrent render with suspense that rejects', async () => {
       const fakeSuspensePromise = Promise.reject(new Error('error'));
       function Example() {
@@ -386,6 +393,7 @@ describe('Timeline profiler', () => {
           `);
     });
 
+    // @reactVersion >=18.0
     it('should mark cascading class component state updates', () => {
       class Example extends React.Component {
         state = {didMount: false};
@@ -440,6 +448,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark cascading class component force updates', () => {
       class Example extends React.Component {
         componentDidMount() {
@@ -493,6 +502,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark render phase state updates for class component', () => {
       class Example extends React.Component {
         state = {didRender: false};
@@ -546,6 +556,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark render phase force updates for class component', () => {
       let forced = false;
       class Example extends React.Component {
@@ -600,6 +611,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark cascading layout updates', () => {
       function Example() {
         const [didMount, setDidMount] = React.useState(false);
@@ -654,6 +666,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark cascading passive updates', () => {
       function Example() {
         const [didMount, setDidMount] = React.useState(false);
@@ -703,6 +716,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark render phase updates', () => {
       function Example() {
         const [didRender, setDidRender] = React.useState(false);
@@ -737,6 +751,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark sync render that throws', async () => {
       spyOn(console, 'error');
 
@@ -799,6 +814,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark concurrent render that throws', async () => {
       spyOn(console, 'error');
 
@@ -879,6 +895,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >=18.0
     it('should mark passive and layout effects', async () => {
       function ComponentWithEffects() {
         React.useLayoutEffect(() => {
@@ -1015,6 +1032,7 @@ describe('Timeline profiler', () => {
     });
 
     describe('lane labels', () => {
+      // @reactVersion >=18.0
       it('regression test SyncLane', () => {
         renderHelper(<div />);
 
@@ -1036,6 +1054,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('regression test DefaultLane', () => {
         renderRootHelper(<div />);
         expect(clearedMarks).toMatchInlineSnapshot(`
@@ -1045,6 +1064,7 @@ describe('Timeline profiler', () => {
               `);
       });
 
+      // @reactVersion >=18.0
       it('regression test InputDiscreteLane', async () => {
         const targetRef = React.createRef(null);
 
@@ -1086,6 +1106,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('regression test InputContinuousLane', async () => {
         const targetRef = React.createRef(null);
 
@@ -1170,6 +1191,7 @@ describe('Timeline profiler', () => {
         utils.act(() => store.profilerStore.startProfiling());
       });
 
+      // @reactVersion >=18.0
       it('should mark sync render without suspends or state updates', () => {
         renderHelper(<div />);
 
@@ -1186,6 +1208,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark concurrent render without suspends or state updates', () => {
         utils.act(() => renderRootHelper(<div />));
 
@@ -1202,6 +1225,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark concurrent render without suspends or state updates', () => {
         let updaterFn;
 
@@ -1281,6 +1305,7 @@ describe('Timeline profiler', () => {
         expect(timelineData.batchUIDToMeasuresMap.size).toBe(2);
       });
 
+      // @reactVersion >=18.0
       it('should mark render yields', async () => {
         function Bar() {
           Scheduler.unstable_yieldValue('Bar');
@@ -1365,6 +1390,7 @@ describe('Timeline profiler', () => {
         expect(timelineData.componentMeasures).toHaveLength(2);
       });
 
+      // @reactVersion >=18.0
       it('should mark sync render with suspense that rejects', async () => {
         let rejectFn;
         let rejected = false;
@@ -1422,6 +1448,7 @@ describe('Timeline profiler', () => {
         expect(timelineData.componentMeasures).toHaveLength(2);
       });
 
+      // @reactVersion >=18.0
       it('should mark concurrent render with suspense that resolves', async () => {
         let resolveFn;
         let resolved = false;
@@ -1479,6 +1506,7 @@ describe('Timeline profiler', () => {
         expect(timelineData.componentMeasures).toHaveLength(2);
       });
 
+      // @reactVersion >=18.0
       it('should mark concurrent render with suspense that rejects', async () => {
         let rejectFn;
         let rejected = false;
@@ -1536,6 +1564,7 @@ describe('Timeline profiler', () => {
         expect(timelineData.componentMeasures).toHaveLength(2);
       });
 
+      // @reactVersion >=18.0
       it('should mark cascading class component state updates', () => {
         class Example extends React.Component {
           state = {didMount: false};
@@ -1594,6 +1623,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark cascading class component force updates', () => {
         let forced = false;
         class Example extends React.Component {
@@ -1651,6 +1681,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark render phase state updates for class component', () => {
         class Example extends React.Component {
           state = {didRender: false};
@@ -1719,6 +1750,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark render phase force updates for class component', () => {
         let forced = false;
         class Example extends React.Component {
@@ -1786,6 +1818,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark cascading layout updates', () => {
         function Example() {
           const [didMount, setDidMount] = React.useState(false);
@@ -1848,6 +1881,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark cascading passive updates', () => {
         function Example() {
           const [didMount, setDidMount] = React.useState(false);
@@ -1909,6 +1943,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark render phase updates', () => {
         function Example() {
           const [didRender, setDidRender] = React.useState(false);
@@ -1956,6 +1991,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark sync render that throws', async () => {
         spyOn(console, 'error');
 
@@ -2049,6 +2085,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark concurrent render that throws', async () => {
         spyOn(console, 'error');
 
@@ -2167,6 +2204,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >=18.0
       it('should mark passive and layout effects', async () => {
         function ComponentWithEffects() {
           React.useLayoutEffect(() => {
@@ -2406,6 +2444,7 @@ describe('Timeline profiler', () => {
     });
 
     describe('when not profiling', () => {
+      // @reactVersion >=18.0
       it('should not log any marks', () => {
         renderHelper(<div />);
 
diff --git a/packages/react-devtools-shared/src/__tests__/bridge-test.js b/packages/react-devtools-shared/src/__tests__/bridge-test.js
index 3d24997b60fe..031d6e598e60 100644
--- a/packages/react-devtools-shared/src/__tests__/bridge-test.js
+++ b/packages/react-devtools-shared/src/__tests__/bridge-test.js
@@ -14,6 +14,7 @@ describe('Bridge', () => {
     Bridge = require('react-devtools-shared/src/bridge').default;
   });
 
+  // @reactVersion >=16.0
   it('should shutdown properly', () => {
     const wall = {
       listen: jest.fn(() => () => {}),
diff --git a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
index 48dbd400a959..506900c291e5 100644
--- a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
+++ b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
@@ -49,6 +49,7 @@ describe('component stack', () => {
     React = require('react');
   });
 
+  // @reactVersion >=16.9
   it('should log the current component stack along with an error or warning', () => {
     const Grandparent = () => <Parent />;
     const Parent = () => <Child />;
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index b1f5f6814392..ae4e0f842f51 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -69,6 +69,7 @@ describe('console', () => {
     );
   }
 
+  // @reactVersion >=18.0
   it('should not patch console methods that are not explicitly overridden', () => {
     expect(fakeConsole.error).not.toBe(mockError);
     expect(fakeConsole.info).toBe(mockInfo);
@@ -76,6 +77,7 @@ describe('console', () => {
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
+  // @reactVersion >=18.0
   it('should patch the console when appendComponentStack is enabled', () => {
     unpatchConsole();
 
@@ -92,6 +94,7 @@ describe('console', () => {
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
+  // @reactVersion >=18.0
   it('should patch the console when breakOnConsoleErrors is enabled', () => {
     unpatchConsole();
 
@@ -108,6 +111,7 @@ describe('console', () => {
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
+  // @reactVersion >=18.0
   it('should patch the console when showInlineWarningsAndErrors is enabled', () => {
     unpatchConsole();
 
@@ -124,6 +128,7 @@ describe('console', () => {
     expect(fakeConsole.warn).not.toBe(mockWarn);
   });
 
+  // @reactVersion >=18.0
   it('should only patch the console once', () => {
     const {error, warn} = fakeConsole;
 
@@ -137,6 +142,7 @@ describe('console', () => {
     expect(fakeConsole.warn).toBe(warn);
   });
 
+  // @reactVersion >=18.0
   it('should un-patch when requested', () => {
     expect(fakeConsole.error).not.toBe(mockError);
     expect(fakeConsole.warn).not.toBe(mockWarn);
@@ -147,6 +153,7 @@ describe('console', () => {
     expect(fakeConsole.warn).toBe(mockWarn);
   });
 
+  // @reactVersion >=18.0
   it('should pass through logs when there is no current fiber', () => {
     expect(mockLog).toHaveBeenCalledTimes(0);
     expect(mockWarn).toHaveBeenCalledTimes(0);
@@ -165,6 +172,7 @@ describe('console', () => {
     expect(mockError.mock.calls[0][0]).toBe('error');
   });
 
+  // @reactVersion >=18.0
   it('should not append multiple stacks', () => {
     global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
 
@@ -187,6 +195,7 @@ describe('console', () => {
     expect(mockError.mock.calls[0][1]).toBe('\n    in Child (at fake.js:123)');
   });
 
+  // @reactVersion >=18.0
   it('should append component stacks to errors and warnings logged during render', () => {
     global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
 
@@ -222,6 +231,7 @@ describe('console', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should append component stacks to errors and warnings logged from effects', () => {
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
@@ -274,6 +284,7 @@ describe('console', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should append component stacks to errors and warnings logged from commit hooks', () => {
     global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
 
@@ -332,6 +343,7 @@ describe('console', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should append component stacks to errors and warnings logged from gDSFP', () => {
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
@@ -371,6 +383,7 @@ describe('console', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should append stacks after being uninstalled and reinstalled', () => {
     global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = false;
 
@@ -410,6 +423,7 @@ describe('console', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should be resilient to prepareStackTrace', () => {
     global.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ = true;
 
@@ -459,6 +473,7 @@ describe('console', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should correctly log Symbols', () => {
     const Component = ({children}) => {
       fakeConsole.warn('Symbol:', Symbol(''));
@@ -753,6 +768,7 @@ describe('console error', () => {
     legacyRender = utils.legacyRender;
   });
 
+  // @reactVersion >=18.0
   it('error in console log throws without interfering with logging', () => {
     const container = document.createElement('div');
     const root = ReactDOMClient.createRoot(container);
diff --git a/packages/react-devtools-shared/src/__tests__/editing-test.js b/packages/react-devtools-shared/src/__tests__/editing-test.js
index 39355a940e60..8213a38cb412 100644
--- a/packages/react-devtools-shared/src/__tests__/editing-test.js
+++ b/packages/react-devtools-shared/src/__tests__/editing-test.js
@@ -109,6 +109,7 @@ describe('editing interface', () => {
       expect(inputRef.current.value).toBe('initial');
     }
 
+    // @reactVersion >= 16.9
     it('should have editable values', async () => {
       await mountTestApp();
 
@@ -175,6 +176,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @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();
@@ -209,6 +211,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 17.0
     it('should have editable paths', async () => {
       await mountTestApp();
 
@@ -259,6 +262,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should enable adding new object properties and array values', async () => {
       await mountTestApp();
 
@@ -339,6 +343,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 17.0
     it('should have deletable keys', async () => {
       await mountTestApp();
 
@@ -390,6 +395,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should support editing host component values', async () => {
       await mountTestApp();
 
@@ -453,6 +459,7 @@ describe('editing interface', () => {
       });
     }
 
+    // @reactVersion >= 16.9
     it('should have editable values', async () => {
       await mountTestApp();
 
@@ -490,6 +497,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @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();
@@ -513,6 +521,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should have editable paths', async () => {
       await mountTestApp();
 
@@ -547,6 +556,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should enable adding new object properties and array values', async () => {
       await mountTestApp();
 
@@ -595,6 +605,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should have deletable keys', async () => {
       await mountTestApp();
 
@@ -668,6 +679,7 @@ describe('editing interface', () => {
       });
     }
 
+    // @reactVersion >= 16.9
     it('should have editable values', async () => {
       await mountTestApp();
 
@@ -712,6 +724,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @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();
@@ -738,6 +751,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 17.0
     it('should have editable paths', async () => {
       await mountTestApp();
 
@@ -773,6 +787,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should enable adding new object properties and array values', async () => {
       await mountTestApp();
 
@@ -822,6 +837,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 17.0
     it('should have deletable keys', async () => {
       await mountTestApp();
 
@@ -925,6 +941,7 @@ describe('editing interface', () => {
       });
     }
 
+    // @reactVersion >= 16.9
     it('should have editable values', async () => {
       await mountTestApp();
 
@@ -973,6 +990,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     // 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();
@@ -1003,6 +1021,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should have editable paths', async () => {
       await mountTestApp();
 
@@ -1043,6 +1062,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should enable adding new object properties and array values', async () => {
       await mountTestApp();
 
@@ -1096,6 +1116,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.9
     it('should have deletable keys', async () => {
       await mountTestApp();
 
diff --git a/packages/react-devtools-shared/src/__tests__/events-test.js b/packages/react-devtools-shared/src/__tests__/events-test.js
index ef1f864deddc..4dc826d20485 100644
--- a/packages/react-devtools-shared/src/__tests__/events-test.js
+++ b/packages/react-devtools-shared/src/__tests__/events-test.js
@@ -16,10 +16,12 @@ describe('events', () => {
     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();
 
@@ -31,6 +33,7 @@ describe('events', () => {
     expect(callback).toHaveBeenCalledWith(123);
   });
 
+  // @reactVersion >=16
   it('notifies all attached listeners of events', () => {
     const callback1 = jest.fn();
     const callback2 = jest.fn();
@@ -48,6 +51,7 @@ describe('events', () => {
     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');
@@ -67,6 +71,7 @@ describe('events', () => {
     expect(callback).toHaveBeenCalledWith(123);
   });
 
+  // @reactVersion >= 16.0
   it('removes attached listeners', () => {
     const callback1 = jest.fn();
     const callback2 = jest.fn();
@@ -81,6 +86,7 @@ describe('events', () => {
     expect(callback2).toHaveBeenCalledWith(123);
   });
 
+  // @reactVersion >= 16.0
   it('removes all listeners', () => {
     const callback1 = jest.fn();
     const callback2 = jest.fn();
@@ -98,6 +104,7 @@ describe('events', () => {
     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);
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js b/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
index b6df4d43e45c..99ccb631ddc5 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/editing-test.js
@@ -84,6 +84,7 @@ describe('editing interface', () => {
       });
     }
 
+    // @reactVersion >= 16.0
     it('should have editable values', () => {
       mountTestApp();
 
@@ -125,6 +126,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should have editable paths', () => {
       mountTestApp();
 
@@ -158,6 +160,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should enable adding new object properties and array values', async () => {
       await mountTestApp();
 
@@ -206,6 +209,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should have deletable keys', () => {
       mountTestApp();
 
@@ -282,6 +286,7 @@ describe('editing interface', () => {
       });
     }
 
+    // @reactVersion >= 16.0
     it('should have editable values', () => {
       mountTestApp();
 
@@ -319,6 +324,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should have editable paths', () => {
       mountTestApp();
 
@@ -353,6 +359,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should enable adding new object properties and array values', async () => {
       await mountTestApp();
 
@@ -401,6 +408,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should have deletable keys', () => {
       mountTestApp();
 
@@ -502,6 +510,7 @@ describe('editing interface', () => {
       });
     }
 
+    // @reactVersion >= 16.0
     it('should have editable values', () => {
       mountTestApp();
 
@@ -546,6 +555,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should have editable paths', () => {
       mountTestApp();
 
@@ -581,6 +591,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should enable adding new object properties and array values', async () => {
       await mountTestApp();
 
@@ -630,6 +641,7 @@ describe('editing interface', () => {
       });
     });
 
+    // @reactVersion >= 16.0
     it('should have deletable keys', () => {
       mountTestApp();
 
diff --git a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
index 6e8016c3f4a1..1ace87653848 100644
--- a/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
+++ b/packages/react-devtools-shared/src/__tests__/legacy/inspectElement-test.js
@@ -62,6 +62,7 @@ describe('InspectedElementContext', () => {
     ReactDOM = require('react-dom');
   });
 
+  // @reactVersion >= 16.0
   it('should inspect the currently selected element', async () => {
     const Example = () => null;
 
@@ -89,6 +90,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should support simple data types', async () => {
     const Example = () => null;
 
@@ -140,6 +142,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should support complex data types', async () => {
     const Immutable = require('immutable');
 
@@ -324,6 +327,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should support objects with no prototype', async () => {
     const Example = () => null;
 
@@ -353,6 +357,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should support objects with overridden hasOwnProperty', async () => {
     const Example = () => null;
 
@@ -377,6 +382,7 @@ describe('InspectedElementContext', () => {
     expect(inspectedElement.props.object.hasOwnProperty).toBe(true);
   });
 
+  // @reactVersion >= 16.0
   it('should not consume iterables while inspecting', async () => {
     const Example = () => null;
 
@@ -421,6 +427,7 @@ describe('InspectedElementContext', () => {
     expect(iteratable.next().value).toBeUndefined();
   });
 
+  // @reactVersion >= 16.0
   it('should support custom objects with enumerable properties and getters', async () => {
     class CustomData {
       _number = 42;
@@ -470,6 +477,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should support objects with with inherited keys', async () => {
     const Example = () => null;
 
@@ -562,6 +570,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should allow component prop value and value`s prototype has same name params.', async () => {
     const testData = Object.create(
       {
@@ -621,6 +630,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should not dehydrate nested values until explicitly requested', async () => {
     const Example = () => null;
 
@@ -723,6 +733,7 @@ describe('InspectedElementContext', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should enable inspected values to be stored as global variables', () => {
     const Example = () => null;
 
@@ -778,6 +789,7 @@ describe('InspectedElementContext', () => {
     expect(global.$reactTemp1).toBe(nestedObject.a.b);
   });
 
+  // @reactVersion >= 16.0
   it('should enable inspected values to be copied to the clipboard', () => {
     const Example = () => null;
 
@@ -834,6 +846,7 @@ describe('InspectedElementContext', () => {
     );
   });
 
+  // @reactVersion >= 16.0
   it('should enable complex values to be copied to the clipboard', () => {
     const Immutable = require('immutable');
 
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index 880607ff1d76..4257c925ef33 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -107,6 +107,7 @@ describe('Timeline profiler', () => {
           .getLanesFromTransportDecimalBitmask;
       });
 
+      // @reactVersion >= 18.0
       it('should return array of lane numbers from bitmask string', () => {
         expect(getLanesFromTransportDecimalBitmask('1')).toEqual([0]);
         expect(getLanesFromTransportDecimalBitmask('512')).toEqual([9]);
@@ -126,6 +127,7 @@ describe('Timeline profiler', () => {
         ).toEqual(Array.from(Array(31).keys()));
       });
 
+      // @reactVersion >= 18.0
       it('should return empty array if laneBitmaskString is not a bitmask', () => {
         expect(getLanesFromTransportDecimalBitmask('')).toEqual([]);
         expect(getLanesFromTransportDecimalBitmask('hello')).toEqual([]);
@@ -133,6 +135,7 @@ describe('Timeline profiler', () => {
         expect(getLanesFromTransportDecimalBitmask('-0')).toEqual([]);
       });
 
+      // @reactVersion >= 18.0
       it('should ignore lanes outside REACT_TOTAL_NUM_LANES', () => {
         const REACT_TOTAL_NUM_LANES = require('react-devtools-timeline/src/constants')
           .REACT_TOTAL_NUM_LANES;
@@ -258,10 +261,12 @@ describe('Timeline profiler', () => {
         startTime = 0;
       });
 
+      // @reactVersion >= 18.0
       it('should throw given an empty timeline', async () => {
         await expect(async () => preprocessData([])).rejects.toThrow();
       });
 
+      // @reactVersion >= 18.0
       it('should throw given a timeline with no Profile event', async () => {
         const randomSample = createUserTimingEntry({
           dur: 100,
@@ -277,6 +282,7 @@ describe('Timeline profiler', () => {
         ).rejects.toThrow();
       });
 
+      // @reactVersion >= 18.0
       it('should throw given a timeline without an explicit profiler version mark nor any other React marks', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
 
@@ -287,6 +293,7 @@ describe('Timeline profiler', () => {
         );
       });
 
+      // @reactVersion >= 18.0
       it('should throw given a timeline with React scheduling marks, but without an explicit profiler version mark', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
         const scheduleRenderSample = createUserTimingEntry({
@@ -300,6 +307,7 @@ describe('Timeline profiler', () => {
         );
       });
 
+      // @reactVersion >= 18.0
       it('should return empty data given a timeline with no React scheduling profiling marks', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
         const randomSample = createUserTimingEntry({
@@ -403,6 +411,7 @@ describe('Timeline profiler', () => {
           `);
       });
 
+      // @reactVersion >= 18.0
       it('should process legacy data format (before lane labels were added)', async () => {
         const cpuProfilerSample = creactCpuProfilerSample();
 
@@ -602,6 +611,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >= 18.0
       it('should process a sample legacy render sequence', async () => {
         utils.legacyRender(<div />, document.createElement('div'));
 
@@ -788,6 +798,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >= 18.0
       it('should process a sample createRoot render sequence', async () => {
         function App() {
           const [didMount, setDidMount] = React.useState(false);
@@ -1119,6 +1130,7 @@ describe('Timeline profiler', () => {
         `);
       });
 
+      // @reactVersion >= 18.0
       it('should error if events and measures are incomplete', async () => {
         const container = document.createElement('div');
         utils.legacyRender(<div />, container);
@@ -1136,6 +1148,7 @@ describe('Timeline profiler', () => {
         expect(error).toHaveBeenCalled();
       });
 
+      // @reactVersion >= 18.0
       it('should error if work is completed without being started', async () => {
         const container = document.createElement('div');
         utils.legacyRender(<div />, container);
@@ -1153,6 +1166,7 @@ describe('Timeline profiler', () => {
         expect(error).toHaveBeenCalled();
       });
 
+      // @reactVersion >= 18.0
       it('should populate other user timing marks', async () => {
         const userTimingData = createUserTimingData([]);
         userTimingData.push(
@@ -1202,6 +1216,7 @@ describe('Timeline profiler', () => {
           `);
       });
 
+      // @reactVersion >= 18.0
       it('should include a suspended resource "displayName" if one is set', async () => {
         let promise = null;
         let resolvedValue = null;
@@ -1245,6 +1260,7 @@ describe('Timeline profiler', () => {
 
       describe('warnings', () => {
         describe('long event handlers', () => {
+          // @reactVersion >= 18.0
           it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {
             function App() {
               return null;
@@ -1267,6 +1283,7 @@ describe('Timeline profiler', () => {
             expect(event.warning).toBe(null);
           });
 
+          // @reactVersion >= 18.0
           it('should not warn about long events if the cause was non-React JavaScript', async () => {
             function App() {
               return null;
@@ -1291,6 +1308,7 @@ describe('Timeline profiler', () => {
             expect(event.warning).toBe(null);
           });
 
+          // @reactVersion >= 18.0
           it('should warn when React scedules a long (sync) update inside of an event', async () => {
             function App() {
               return null;
@@ -1330,6 +1348,7 @@ describe('Timeline profiler', () => {
             );
           });
 
+          // @reactVersion >= 18.0
           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.unstable_yieldValue(`${id}:${value}`);
@@ -1390,6 +1409,7 @@ describe('Timeline profiler', () => {
         });
 
         describe('nested updates', () => {
+          // @reactVersion >= 18.0
           it('should not warn about short nested (state) updates during layout effects', async () => {
             function Component() {
               const [didMount, setDidMount] = React.useState(false);
@@ -1425,6 +1445,7 @@ describe('Timeline profiler', () => {
             expect(event.warning).toBe(null);
           });
 
+          // @reactVersion >= 18.0
           it('should not warn about short (forced) updates during layout effects', async () => {
             class Component extends React.Component {
               _didMount: boolean = false;
@@ -1588,6 +1609,7 @@ describe('Timeline profiler', () => {
             );
           });
 
+          // @reactVersion >= 18.0
           it('should not warn about transition updates scheduled during commit phase', async () => {
             function Component() {
               const [value, setValue] = React.useState(0);
@@ -1729,6 +1751,7 @@ describe('Timeline profiler', () => {
         });
 
         describe('errors thrown while rendering', () => {
+          // @reactVersion >= 18.0
           it('shoult parse Errors thrown during render', async () => {
             spyOn(console, 'error');
 
@@ -1776,6 +1799,7 @@ describe('Timeline profiler', () => {
         describe('suspend during an update', () => {
           // This also tests an edge case where the a component suspends while profiling
           // before the first commit is logged (so the lane-to-labels map will not yet exist).
+          // @reactVersion >= 18.0
           it('should warn about suspending during an udpate', async () => {
             let promise = null;
             let resolvedValue = null;
@@ -1833,6 +1857,7 @@ describe('Timeline profiler', () => {
             );
           });
 
+          // @reactVersion >= 18.0
           it('should not warn about suspending during an transition', async () => {
             let promise = null;
             let resolvedValue = null;
@@ -1920,6 +1945,7 @@ describe('Timeline profiler', () => {
       global.IS_REACT_ACT_ENVIRONMENT = true;
     });
 
+    // @reactVersion >= 18.0
     it('should process a sample legacy render sequence', async () => {
       utils.legacyRender(<div />, document.createElement('div'));
       utils.act(() => store.profilerStore.stopProfiling());
@@ -2089,6 +2115,7 @@ describe('Timeline profiler', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should process a sample createRoot render sequence', async () => {
       function App() {
         const [didMount, setDidMount] = React.useState(false);
diff --git a/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
index eee3a66b03a5..ab22fd5dca68 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerChangeDescriptions-test.js
@@ -26,6 +26,7 @@ describe('Profiler change descriptions', () => {
     React = require('react');
   });
 
+  // @reactVersion >=18.0
   it('should identify useContext as the cause for a re-render', () => {
     const Context = React.createContext(0);
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
index 7f553bed82e8..3a1a025d4a38 100644
--- a/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilerStore-test.js
@@ -30,6 +30,7 @@ describe('ProfilerStore', () => {
     ReactDOM = require('react-dom');
   });
 
+  // @reactVersion >= 16.9
   it('should not remove profiling data when roots are unmounted', async () => {
     const Parent = ({count}) =>
       new Array(count)
@@ -66,6 +67,7 @@ describe('ProfilerStore', () => {
     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 = {
@@ -83,6 +85,7 @@ describe('ProfilerStore', () => {
     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();
@@ -124,6 +127,7 @@ describe('ProfilerStore', () => {
     expect(data.operations).toHaveLength(1);
   });
 
+  // @reactVersion >= 16.9
   it('should filter empty commits alt', () => {
     let commitCount = 0;
 
@@ -175,6 +179,7 @@ describe('ProfilerStore', () => {
     expect(data.operations).toHaveLength(1);
   });
 
+  // @reactVersion >= 16.9
   it('should throw if component filters are modified while profiling', () => {
     utils.act(() => store.profilerStore.startProfiling());
 
@@ -190,6 +195,7 @@ describe('ProfilerStore', () => {
     }).toThrow('Cannot modify filter preferences while profiling');
   });
 
+  // @reactVersion >= 16.9
   it('should not throw if state contains a property hasOwnProperty ', () => {
     let setStateCallback;
     const ControlledInput = () => {
@@ -222,6 +228,7 @@ describe('ProfilerStore', () => {
     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 = () => {
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 48f12f3dcb69..eb4a1aceba92 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -39,6 +39,7 @@ describe('ProfilingCache', () => {
     Scheduler = require('scheduler');
   });
 
+  // @reactVersion >= 16.9
   it('should collect data for each root (including ones added or mounted after profiling started)', () => {
     const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
@@ -150,6 +151,7 @@ describe('ProfilingCache', () => {
     });
   });
 
+  // @reactVersion >= 16.9
   it('should collect data for each commit', () => {
     const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
@@ -194,6 +196,7 @@ describe('ProfilingCache', () => {
     });
   });
 
+  // @reactVersion >= 16.9
   it('should record changed props/state/context/hooks', () => {
     let instance = null;
 
@@ -512,6 +515,7 @@ describe('ProfilingCache', () => {
     }
   });
 
+  // @reactVersion >= 18.0
   it('should properly detect changed hooks', () => {
     const Context = React.createContext(0);
 
@@ -730,6 +734,7 @@ describe('ProfilingCache', () => {
     }
   });
 
+  // @reactVersion >= 16.9
   it('should calculate durations based on actual children (not filtered children)', () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
@@ -788,6 +793,7 @@ describe('ProfilingCache', () => {
     `);
   });
 
+  // @reactVersion >= 17.0
   it('should calculate durations correctly for suspended views', async () => {
     let data;
     const getData = () => {
@@ -857,6 +863,7 @@ describe('ProfilingCache', () => {
     `);
   });
 
+  // @reactVersion >= 16.9
   it('should collect data for each rendered fiber', () => {
     const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
@@ -934,6 +941,7 @@ describe('ProfilingCache', () => {
     }
   });
 
+  // @reactVersion >= 18.0
   it('should handle unexpectedly shallow suspense trees', () => {
     const container = document.createElement('div');
 
@@ -975,6 +983,7 @@ describe('ProfilingCache', () => {
   });
 
   // See https://github.com/facebook/react/issues/18831
+  // @reactVersion >= 16.9
   it('should not crash during route transitions with Suspense', () => {
     const RouterContext = React.createContext();
 
@@ -1063,6 +1072,7 @@ describe('ProfilingCache', () => {
     expect(container.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() {
@@ -1093,6 +1103,7 @@ describe('ProfilingCache', () => {
     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() {
@@ -1127,6 +1138,7 @@ describe('ProfilingCache', () => {
     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() {
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index f2c4e36a1236..2f3cc1741341 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -59,6 +59,7 @@ describe('profiling charts', () => {
   }
 
   describe('flamegraph chart', () => {
+    // @reactVersion >= 16.9
     it('should contain valid data', () => {
       const Parent = (_: {||}) => {
         Scheduler.unstable_advanceTime(10);
@@ -208,6 +209,7 @@ describe('profiling charts', () => {
   });
 
   describe('ranked chart', () => {
+    // @reactVersion >= 16.9
     it('should contain valid data', () => {
       const Parent = (_: {||}) => {
         Scheduler.unstable_advanceTime(10);
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
index 7fe31d3e9d52..d05491ebecf4 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCommitTreeBuilder-test.js
@@ -32,6 +32,7 @@ describe('commit tree', () => {
     Scheduler = require('scheduler');
   });
 
+  // @reactVersion >= 16.9
   it('should be able to rebuild the store tree for each commit', () => {
     const Parent = ({count}) => {
       Scheduler.unstable_advanceTime(10);
@@ -116,6 +117,7 @@ describe('commit tree', () => {
       LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent));
     });
 
+    // @reactVersion >= 16.9
     it('should support Lazy components (legacy render)', async () => {
       const container = document.createElement('div');
 
@@ -157,6 +159,7 @@ describe('commit tree', () => {
       expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
     });
 
+    // @reactVersion >= 18.0
     it('should support Lazy components (createRoot)', async () => {
       const container = document.createElement('div');
       const root = ReactDOMClient.createRoot(container);
@@ -199,6 +202,7 @@ describe('commit tree', () => {
       expect(commitTrees[2].nodes.size).toBe(2); // <Root> + <App>
     });
 
+    // @reactVersion >= 16.9
     it('should support Lazy components that are unmounted before resolving (legacy render)', async () => {
       const container = document.createElement('div');
 
@@ -231,6 +235,7 @@ describe('commit tree', () => {
       expect(commitTrees[1].nodes.size).toBe(2); // <Root> + <App>
     });
 
+    // @reactVersion >= 18.0
     it('should support Lazy components that are unmounted before resolving (createRoot)', async () => {
       const container = document.createElement('div');
       const root = ReactDOMClient.createRoot(container);
diff --git a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
index 9f26e7391d61..6e84d0130fae 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingHostRoot-test.js
@@ -49,6 +49,7 @@ describe('profiling HostRoot', () => {
     };
   });
 
+  // @reactVersion >=18.0
   it('should expose passive and layout effect durations for render()', () => {
     function App() {
       React.useEffect(() => {
@@ -77,6 +78,7 @@ describe('profiling HostRoot', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should expose passive and layout effect durations for createRoot()', () => {
     function App() {
       React.useEffect(() => {
@@ -106,6 +108,7 @@ describe('profiling HostRoot', () => {
     );
   });
 
+  // @reactVersion >=18.0
   it('should properly reset passive and layout effect durations between commits', () => {
     function App({shouldCascade}) {
       const [, setState] = React.useState(false);
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index ad36b0777679..56795d232895 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -35,6 +35,7 @@ describe('Store', () => {
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
   });
 
+  // @reactVersion >= 18.0
   it('should not allow a root node to be collapsed', () => {
     const Component = () => <div>Hi</div>;
 
@@ -55,6 +56,7 @@ describe('Store', () => {
     );
   });
 
+  // @reactVersion >= 18.0
   it('should properly handle a root with no visible nodes', () => {
     const Root = ({children}) => children;
 
@@ -75,6 +77,7 @@ describe('Store', () => {
   // 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', () => {
     const promise = new Promise(resolve => {});
 
@@ -109,6 +112,7 @@ describe('Store', () => {
     `);
   });
 
+  // @reactVersion >= 18.0
   it('should handle multibyte character strings', () => {
     const Component = () => null;
     Component.displayName = '🟩💜🔵';
@@ -139,6 +143,7 @@ describe('Store', () => {
       expect(store.getElementAtIndex(1).isStrictModeNonCompliant).toBe(false);
     });
 
+    // @reactVersion >= 18.0
     it('should mark non strict root elements as not strict', () => {
       const App = () => <Component />;
       const Component = () => null;
@@ -177,6 +182,7 @@ describe('Store', () => {
       store.collapseNodesByDefault = false;
     });
 
+    // @reactVersion >= 18.0
     it('should support mount and update operations', () => {
       const Grandparent = ({count}) => (
         <React.Fragment>
@@ -222,6 +228,7 @@ describe('Store', () => {
       expect(store).toMatchInlineSnapshot(``);
     });
 
+    // @reactVersion >= 18.0
     it('should support mount and update operations for multiple roots', () => {
       const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
@@ -276,6 +283,7 @@ describe('Store', () => {
       expect(store).toMatchInlineSnapshot(``);
     });
 
+    // @reactVersion >= 18.0
     it('should filter DOM nodes from the store tree', () => {
       const Grandparent = () => (
         <div>
@@ -305,6 +313,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should display Suspense nodes properly in various states', () => {
       const Loading = () => <div>Loading...</div>;
       const SuspendingComponent = () => {
@@ -348,6 +357,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support nested Suspense nodes', () => {
       const Component = () => null;
       const Loading = () => <div>Loading...</div>;
@@ -719,6 +729,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support collapsing parts of the tree', () => {
       const Grandparent = ({count}) => (
         <React.Fragment>
@@ -793,6 +804,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support reordering of children', () => {
       const Root = ({children}) => children;
       const Component = () => null;
@@ -850,6 +862,7 @@ describe('Store', () => {
       store.collapseNodesByDefault = true;
     });
 
+    // @reactVersion >= 18.0
     it('should support mount and update operations', () => {
       const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
@@ -891,6 +904,7 @@ describe('Store', () => {
       expect(store).toMatchInlineSnapshot(``);
     });
 
+    // @reactVersion >= 18.0
     it('should support mount and update operations for multiple roots', () => {
       const Parent = ({count}) =>
         new Array(count).fill(true).map((_, index) => <Child key={index} />);
@@ -931,6 +945,7 @@ describe('Store', () => {
       expect(store).toMatchInlineSnapshot(``);
     });
 
+    // @reactVersion >= 18.0
     it('should filter DOM nodes from the store tree', () => {
       const Grandparent = () => (
         <div>
@@ -973,6 +988,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should display Suspense nodes properly in various states', () => {
       const Loading = () => <div>Loading...</div>;
       const SuspendingComponent = () => {
@@ -1024,6 +1040,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support expanding parts of the tree', () => {
       const Grandparent = ({count}) => (
         <React.Fragment>
@@ -1103,6 +1120,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support expanding deep parts of the tree', () => {
       const Wrapper = ({forwardedRef}) => (
         <Nested depth={3} forwardedRef={forwardedRef} />
@@ -1177,6 +1195,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support reordering of children', () => {
       const Root = ({children}) => children;
       const Component = () => null;
@@ -1229,6 +1248,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should not add new nodes when suspense is toggled', () => {
       const SuspenseTree = () => {
         return (
@@ -1295,6 +1315,7 @@ describe('Store', () => {
       store.collapseNodesByDefault = false;
     });
 
+    // @reactVersion >= 18.0
     it('should support a single root with a single child', () => {
       const Grandparent = () => (
         <React.Fragment>
@@ -1312,6 +1333,7 @@ describe('Store', () => {
       }
     });
 
+    // @reactVersion >= 18.0
     it('should support multiple roots with one children each', () => {
       const Grandparent = () => <Parent />;
       const Parent = () => <Child />;
@@ -1327,6 +1349,7 @@ describe('Store', () => {
       }
     });
 
+    // @reactVersion >= 18.0
     it('should support a single root with multiple top level children', () => {
       const Grandparent = () => <Parent />;
       const Parent = () => <Child />;
@@ -1347,6 +1370,7 @@ describe('Store', () => {
       }
     });
 
+    // @reactVersion >= 18.0
     it('should support multiple roots with multiple top level children', () => {
       const Grandparent = () => <Parent />;
       const Parent = () => <Child />;
@@ -1375,6 +1399,7 @@ describe('Store', () => {
     });
   });
 
+  // @reactVersion >= 18.0
   it('detects and updates profiling support based on the attached roots', () => {
     const Component = () => null;
 
@@ -1394,6 +1419,7 @@ describe('Store', () => {
     expect(store.rootSupportsBasicProfiling).toBe(false);
   });
 
+  // @reactVersion >= 18.0
   it('should properly serialize non-string key values', () => {
     const Child = () => null;
 
@@ -1516,6 +1542,7 @@ describe('Store', () => {
       LazyComponent = React.lazy(() => fakeImport(LazyInnerComponent));
     });
 
+    // @reactVersion >= 18.0
     it('should support Lazy components (legacy render)', async () => {
       const container = document.createElement('div');
 
@@ -1549,6 +1576,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support Lazy components in (createRoot)', async () => {
       const container = document.createElement('div');
       const root = ReactDOMClient.createRoot(container);
@@ -1583,6 +1611,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('should support Lazy components that are unmounted before they finish loading (legacy render)', async () => {
       const container = document.createElement('div');
 
@@ -1604,6 +1633,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     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);
@@ -1628,6 +1658,7 @@ describe('Store', () => {
   });
 
   describe('inline errors and warnings', () => {
+    // @reactVersion >= 18.0
     it('during render are counted', () => {
       function Example() {
         console.error('test-only: render error');
@@ -1657,6 +1688,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('during layout get counted', () => {
       function Example() {
         React.useLayoutEffect(() => {
@@ -1698,6 +1730,7 @@ describe('Store', () => {
         jest.advanceTimersByTime(1000);
       }
 
+      // @reactVersion >= 18.0
       it('are counted (after a delay)', () => {
         function Example() {
           React.useEffect(() => {
@@ -1731,6 +1764,7 @@ describe('Store', () => {
         expect(store).toMatchInlineSnapshot(``);
       });
 
+      // @reactVersion >= 18.0
       it('are flushed early when there is a new commit', () => {
         function Example() {
           React.useEffect(() => {
@@ -1794,6 +1828,7 @@ describe('Store', () => {
       });
     });
 
+    // @reactVersion >= 18.0
     it('from react get counted', () => {
       const container = document.createElement('div');
       function Example() {
@@ -1818,6 +1853,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('can be cleared for the whole app', () => {
       function Example() {
         console.error('test-only: render error');
@@ -1859,6 +1895,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('can be cleared for particular Fiber (only warnings)', () => {
       function Example() {
         console.error('test-only: render error');
@@ -1904,6 +1941,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('can be cleared for a particular Fiber (only errors)', () => {
       function Example() {
         console.error('test-only: render error');
@@ -1949,6 +1987,7 @@ describe('Store', () => {
       `);
     });
 
+    // @reactVersion >= 18.0
     it('are updated when fibers are removed from the tree', () => {
       function ComponentWithWarning() {
         console.warn('test-only: render warning');
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index baa19e0787df..e9e30de830a1 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -41,6 +41,7 @@ describe('Store component filters', () => {
     legacyRender = utils.legacyRender;
   });
 
+  // @reactVersion >= 16.0
   it('should throw if filters are updated while profiling', () => {
     act(() => store.profilerStore.startProfiling());
     expect(() => (store.componentFilters = [])).toThrow(
@@ -48,6 +49,7 @@ describe('Store component filters', () => {
     );
   });
 
+  // @reactVersion >= 16.0
   it('should support filtering by element type', () => {
     class ClassComponent extends React.Component<{|children: React$Node|}> {
       render() {
@@ -135,6 +137,7 @@ describe('Store component filters', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should ignore invalid ElementTypeRoot filter', () => {
     const Component = () => <div>Hi</div>;
 
@@ -159,6 +162,7 @@ describe('Store component filters', () => {
     `);
   });
 
+  // @reactVersion >= 16.2
   it('should filter by display name', () => {
     const Text = ({label}) => label;
     const Foo = () => <Text label="foo" />;
@@ -219,6 +223,7 @@ describe('Store component filters', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should filter by path', () => {
     const Component = () => <div>Hi</div>;
 
@@ -252,6 +257,7 @@ describe('Store component filters', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should filter HOCs', () => {
     const Component = () => <div>Hi</div>;
     const Foo = () => <Component />;
@@ -285,6 +291,7 @@ describe('Store component filters', () => {
     `);
   });
 
+  // @reactVersion >= 16.0
   it('should not send a bridge update if the set of enabled filters has not changed', () => {
     act(() => (store.componentFilters = [utils.createHOCFilter(true)]));
 
@@ -315,6 +322,7 @@ describe('Store component filters', () => {
     );
   });
 
+  // @reactVersion >= 18.0
   it('should not break when Suspense nodes are filtered from the tree', () => {
     const promise = new Promise(() => {});
 
@@ -363,6 +371,7 @@ describe('Store component filters', () => {
   });
 
   describe('inline errors and warnings', () => {
+    // @reactVersion >= 17.0
     it('only counts for unfiltered components', () => {
       function ComponentWithWarning() {
         console.warn('test-only: render warning');
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
index 57558525f49d..7e85a34bc057 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -33,6 +33,7 @@ describe('StoreStress (Legacy Mode)', () => {
 
   // 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
   it('should handle a stress test with different tree operations (Legacy Mode)', () => {
     let setShowX;
     const A = () => 'a';
@@ -174,6 +175,7 @@ describe('StoreStress (Legacy Mode)', () => {
     expect(print(store)).toBe('');
   });
 
+  // @reactVersion >= 16.9
   it('should handle stress test with reordering (Legacy Mode)', () => {
     const A = () => 'a';
     const B = () => 'b';
@@ -274,6 +276,7 @@ describe('StoreStress (Legacy Mode)', () => {
     }
   });
 
+  // @reactVersion >= 18.0
   it('should handle a stress test for Suspense (Legacy Mode)', async () => {
     const A = () => 'a';
     const B = () => 'b';
@@ -667,6 +670,7 @@ describe('StoreStress (Legacy Mode)', () => {
     }
   });
 
+  // @reactVersion >= 18.0
   it('should handle a stress test for Suspense without type change (Legacy Mode)', () => {
     const A = () => 'a';
     const B = () => 'b';
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
index af1541f841eb..dbe02994cbb6 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressTestConcurrent-test.js
@@ -39,6 +39,7 @@ describe('StoreStressConcurrent', () => {
 
   // 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)', () => {
     let setShowX;
     const A = () => 'a';
@@ -207,6 +208,7 @@ describe('StoreStressConcurrent', () => {
     expect(print(store)).toBe('');
   });
 
+  // @reactVersion >= 18.0
   it('should handle stress test with reordering (Concurrent Mode)', () => {
     const A = () => 'a';
     const B = () => 'b';
@@ -368,6 +370,7 @@ describe('StoreStressConcurrent', () => {
     }
   });
 
+  // @reactVersion >= 18.0
   it('should handle a stress test for Suspense (Concurrent Mode)', async () => {
     const A = () => 'a';
     const B = () => 'b';
@@ -841,6 +844,7 @@ describe('StoreStressConcurrent', () => {
     }
   });
 
+  // @reactVersion >= 18.0
   it('should handle a stress test for Suspense without type change (Concurrent Mode)', async () => {
     const A = () => 'a';
     const B = () => 'b';
diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js
index ed8920295837..7d001e4a5e7d 100644
--- a/packages/react-devtools-shared/src/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -23,27 +23,32 @@ import {createElement} from 'react/src/ReactElement';
 
 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');
@@ -51,6 +56,7 @@ describe('utils', () => {
   });
 
   describe('getDisplayNameForReactElement', () => {
+    // @reactVersion >= 16.0
     it('should return correct display name for an element with function type', () => {
       function FauxComponent() {}
       FauxComponent.displayName = 'OverrideDisplayName';
@@ -60,16 +66,19 @@ describe('utils', () => {
       );
     });
 
+    // @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(
@@ -77,6 +86,7 @@ describe('utils', () => {
       );
     });
 
+    // @reactVersion >= 16.0
     it('should return NotImplementedInDevtools for an element with invalid type', () => {
       const element = createElement(true);
       expect(getDisplayNameForReactElement(element)).toEqual(
@@ -84,6 +94,7 @@ describe('utils', () => {
       );
     });
 
+    // @reactVersion >= 16.0
     it('should return Element for null type', () => {
       const element = createElement();
       expect(getDisplayNameForReactElement(element)).toEqual('Element');
@@ -91,42 +102,50 @@ describe('utils', () => {
   });
 
   describe('format', () => {
+    // @reactVersion >= 16.0
     it('should format simple strings', () => {
       expect(format('a', 'b', 'c')).toEqual('a b c');
     });
 
+    // @reactVersion >= 16.0
     it('should format multiple argument types', () => {
       expect(format('abc', 123, true)).toEqual('abc 123 true');
     });
 
+    // @reactVersion >= 16.0
     it('should support string substitutions', () => {
       expect(format('a %s b %s c', 123, true)).toEqual('a 123 b true c');
     });
 
+    // @reactVersion >= 16.0
     it('should gracefully handle Symbol types', () => {
       expect(format(Symbol('a'), 'b', Symbol('c'))).toEqual(
         'Symbol(a) b Symbol(c)',
       );
     });
 
+    // @reactVersion >= 16.0
     it('should gracefully handle Symbol type for the first argument', () => {
       expect(format(Symbol('abc'), 123)).toEqual('Symbol(abc) 123');
     });
   });
 
   describe('formatWithStyles', () => {
+    // @reactVersion >= 16.0
     it('should format empty arrays', () => {
       expect(formatWithStyles([])).toEqual([]);
       expect(formatWithStyles([], 'gray')).toEqual([]);
       expect(formatWithStyles(undefined)).toEqual(undefined);
     });
 
+    // @reactVersion >= 16.0
     it('should bail out of strings with styles', () => {
       expect(
         formatWithStyles(['%ca', 'color: green', 'b', 'c'], 'color: gray'),
       ).toEqual(['%ca', 'color: green', 'b', 'c']);
     });
 
+    // @reactVersion >= 16.0
     it('should format simple strings', () => {
       expect(formatWithStyles(['a'])).toEqual(['a']);
 
@@ -145,6 +164,7 @@ describe('utils', () => {
       ]);
     });
 
+    // @reactVersion >= 16.0
     it('should format string substituions', () => {
       expect(
         formatWithStyles(['%s %s %s', 'a', 'b', 'c'], 'color: gray'),
@@ -157,6 +177,7 @@ describe('utils', () => {
       ).toEqual(['%c%s %s', 'color: gray', 'a', 'b', 'c']);
     });
 
+    // @reactVersion >= 16.0
     it('should support multiple argument types', () => {
       const symbol = Symbol('a');
       expect(
@@ -176,6 +197,7 @@ describe('utils', () => {
       ]);
     });
 
+    // @reactVersion >= 16.0
     it('should properly format escaped string substituions', () => {
       expect(formatWithStyles(['%%s'], 'color: gray')).toEqual([
         '%c%s',
@@ -190,6 +212,7 @@ describe('utils', () => {
       expect(formatWithStyles(['%%c%c'], 'color: gray')).toEqual(['%%c%c']);
     });
 
+    // @reactVersion >= 16.0
     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]]);

From 769875806ca7b90b6ce9178531628e97ef43cd84 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 18 May 2022 13:48:21 -0400
Subject: [PATCH 1365/1603] Add option for source maps when running tests
 (#24577)

I added a `--sourceMaps` option to our test command that enables inline
source maps. I've kept it disabled by default, since it makes the tests
run slower. But it's super useful when attaching to a debugger.
---
 scripts/jest/jest-cli.js     | 12 ++++++++++++
 scripts/jest/preprocessor.js |  3 +++
 2 files changed, 15 insertions(+)

diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index effecf3d22ef..b47731d4dbf4 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -110,6 +110,12 @@ const argv = yargs
       requiresArg: true,
       type: 'string',
     },
+    sourceMaps: {
+      describe:
+        'Enable inline source maps when tranforming source files with Jest. Useful for debugging, but makes it slower.',
+      type: 'boolean',
+      default: false,
+    },
   }).argv;
 
 function logError(message) {
@@ -333,6 +339,12 @@ function getEnvars() {
     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';
+  }
+
   return envars;
 }
 
diff --git a/scripts/jest/preprocessor.js b/scripts/jest/preprocessor.js
index 0acae1833d39..43e8f18d02b8 100644
--- a/scripts/jest/preprocessor.js
+++ b/scripts/jest/preprocessor.js
@@ -93,6 +93,9 @@ module.exports = {
           babelOptions,
           {
             plugins,
+            sourceMaps: process.env.JEST_ENABLE_SOURCE_MAPS
+              ? process.env.JEST_ENABLE_SOURCE_MAPS
+              : false,
           }
         )
       );

From 835d9c9f4724b71b429a6b7aaced6da1448e7fb8 Mon Sep 17 00:00:00 2001
From: Blake Friedman <blake.friedman@gmail.com>
Date: Wed, 18 May 2022 20:14:27 +0100
Subject: [PATCH 1366/1603] Handle github rate limiting response (#24573)

Make the error messages clearer when the API doesn't respond with 200.
---
 .../release/shared-commands/get-build-id-for-commit.js   | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/scripts/release/shared-commands/get-build-id-for-commit.js b/scripts/release/shared-commands/get-build-id-for-commit.js
index a5c6d96b02c8..d3f7ead487b3 100644
--- a/scripts/release/shared-commands/get-build-id-for-commit.js
+++ b/scripts/release/shared-commands/get-build-id-for-commit.js
@@ -23,7 +23,14 @@ async function getBuildIdForCommit(sha) {
     );
 
     if (!statusesResponse.ok) {
-      throw Error('Could not find commit for: ' + sha);
+      if (statusesResponse.status === 404) {
+        throw Error('Could not find commit for: ' + sha);
+      }
+      const {message, documentation_url} = await statusesResponse.json();
+      const msg = documentation_url
+        ? `${message}\n\t${documentation_url}`
+        : message;
+      throw Error(msg);
     }
 
     const {statuses, state} = await statusesResponse.json();

From d89657bc8f60e9d00e3f73d5bda262fdcb651cdc Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 19 May 2022 07:52:30 -0700
Subject: [PATCH 1367/1603] [DevTools] Use Inline Snapshots for
 storeStressTestSync (#24583)

Change storeStressTestSync to use inline snapshots instead of a snapshot file. We want to do this because some tests are gated and not called in regression tests, and if snapshot tests are not called when there is a corresponding .snap file, that test will fail.

Arguably inline snapshots are a better pattern anyway, so enforcing this in DevTools tests IMO makes sense
---
 .../storeStressSync-test.js.snap              | 493 ------------------
 .../src/__tests__/storeStressSync-test.js     | 460 +++++++++++++++-
 2 files changed, 454 insertions(+), 499 deletions(-)
 delete mode 100644 packages/react-devtools-shared/src/__tests__/__snapshots__/storeStressSync-test.js.snap

diff --git a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeStressSync-test.js.snap b/packages/react-devtools-shared/src/__tests__/__snapshots__/storeStressSync-test.js.snap
deleted file mode 100644
index 76ce00a1098e..000000000000
--- a/packages/react-devtools-shared/src/__tests__/__snapshots__/storeStressSync-test.js.snap
+++ /dev/null
@@ -1,493 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 1`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 2`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 3`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-        <C key="c">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 4`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <B key="b">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 5`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 6`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 7`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 8`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 9`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 10`] = `
-[root]
-  ▾ <Root>
-      <X>
-      <Suspense>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 11`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <B key="b">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense (Legacy Mode) 12`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 1`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 2`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 3`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <A key="a">
-          <B key="b">
-          <C key="c">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 4`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <C key="c">
-          <B key="b">
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 5`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <C key="c">
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 6`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <C key="c">
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 7`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <C key="c">
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 8`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <A key="a">
-          <B key="b">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 9`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 10`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 11`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <B key="b">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 12`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-      ▾ <MaybeSuspend>
-          <A key="a">
-          <Z>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 13`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 14`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 15`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-        <C key="c">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 16`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <B key="b">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 17`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 18`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 19`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <C key="c">
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 20`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-        <B key="b">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 21`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 22`] = `
-[root]
-  ▾ <Root>
-      <X>
-      <Suspense>
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 23`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <B key="b">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test for Suspense without type change (Legacy Mode) 24`] = `
-[root]
-  ▾ <Root>
-      <X>
-    ▾ <Suspense>
-        <A key="a">
-      <Y>
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test with different tree operations (Legacy Mode): 1: abcde 1`] = `
-[root]
-  ▾ <Parent>
-      <A key="a">
-      <B key="b">
-      <C key="c">
-      <D key="d">
-      <E key="e">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle a stress test with different tree operations (Legacy Mode): 2: abxde 1`] = `
-[root]
-  ▾ <Parent>
-      <A key="a">
-      <B key="b">
-    ▾ <C key="c">
-        <X>
-      <D key="d">
-      <E key="e">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 1`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 2`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 3`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 4`] = `
-[root]
-  ▾ <Root>
-      <D key="d">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 5`] = `
-[root]
-  ▾ <Root>
-      <E key="e">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 6`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 7`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 8`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 9`] = `
-[root]
-  ▾ <Root>
-      <D key="d">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 10`] = `
-[root]
-  ▾ <Root>
-      <E key="e">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 11`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-      <B key="b">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 12`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-      <A key="a">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 13`] = `
-[root]
-  ▾ <Root>
-      <B key="b">
-      <C key="c">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 14`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-      <B key="b">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 15`] = `
-[root]
-  ▾ <Root>
-      <A key="a">
-      <C key="c">
-`;
-
-exports[`StoreStress (Legacy Mode) should handle stress test with reordering (Legacy Mode) 16`] = `
-[root]
-  ▾ <Root>
-      <C key="c">
-      <A key="a">
-`;
diff --git a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
index 7e85a34bc057..6c7f6a938183 100644
--- a/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeStressSync-test.js
@@ -62,7 +62,15 @@ describe('StoreStress (Legacy Mode)', () => {
     // 1. Render a normal version of [a, b, c, d, e].
     let container = document.createElement('div');
     act(() => legacyRender(<Parent>{[a, b, c, d, e]}</Parent>, container));
-    expect(store).toMatchSnapshot('1: abcde');
+    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);
 
@@ -71,7 +79,16 @@ describe('StoreStress (Legacy Mode)', () => {
     act(() => {
       setShowX(true);
     });
-    expect(store).toMatchSnapshot('2: abxde');
+    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);
 
@@ -208,6 +225,95 @@ describe('StoreStress (Legacy Mode)', () => {
       [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;
     };
@@ -218,7 +324,7 @@ describe('StoreStress (Legacy Mode)', () => {
     for (let i = 0; i < steps.length; i++) {
       act(() => legacyRender(<Root>{steps[i]}</Root>, container));
       // We snapshot each step once so it doesn't regress.
-      expect(store).toMatchSnapshot();
+      expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
       snapshots.push(print(store));
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(print(store)).toBe('');
@@ -305,6 +411,112 @@ describe('StoreStress (Legacy Mode)', () => {
       a,
     ];
 
+    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 = () => {
       throw new Promise(() => {});
     };
@@ -329,7 +541,7 @@ describe('StoreStress (Legacy Mode)', () => {
         ),
       );
       // We snapshot each step once so it doesn't regress.
-      expect(store).toMatchSnapshot();
+      expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
       snapshots.push(print(store));
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(print(store)).toBe('');
@@ -699,6 +911,242 @@ describe('StoreStress (Legacy Mode)', () => {
       a,
     ];
 
+    const stepsSnapshot = [
+      `
+        [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>
+      `,
+    ];
+
+    const stepsSnapshotTwo = [
+      `
+        [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 = () => {
       throw new Promise(() => {});
     };
@@ -743,7 +1191,7 @@ describe('StoreStress (Legacy Mode)', () => {
         ),
       );
       // We snapshot each step once so it doesn't regress.
-      expect(store).toMatchSnapshot();
+      expect(store).toMatchInlineSnapshot(stepsSnapshot[i]);
       snapshots.push(print(store));
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(print(store)).toBe('');
@@ -769,7 +1217,7 @@ describe('StoreStress (Legacy Mode)', () => {
         ),
       );
       // We snapshot each step once so it doesn't regress.
-      expect(store).toMatchSnapshot();
+      expect(store).toMatchInlineSnapshot(stepsSnapshotTwo[i]);
       fallbackSnapshots.push(print(store));
       act(() => ReactDOM.unmountComponentAtNode(container));
       expect(print(store)).toBe('');

From 6e2f38f3a4d58f11bbe86ca6f938c27767366967 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 19 May 2022 09:59:36 -0700
Subject: [PATCH 1368/1603] [DevTools] Remove string.replaceAll Call in
 @reactVersion Pragma Functions (#24584)

`string.replaceAll` doesn't exist in our CircleCI Docker environment. We also don't need it in this case because `semver.satisfies` allows for whitespace when specifying a range. This PR removes the unnecessary call.
---
 scripts/jest/devtools/setupEnv.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/scripts/jest/devtools/setupEnv.js b/scripts/jest/devtools/setupEnv.js
index a9c638a92ff9..7ef6003e5182 100644
--- a/scripts/jest/devtools/setupEnv.js
+++ b/scripts/jest/devtools/setupEnv.js
@@ -29,9 +29,8 @@ global.process.env.LIGHT_MODE_DIMMED_ERROR_COLOR = LIGHT_MODE_DIMMED_ERROR_COLOR
 global.process.env.LIGHT_MODE_DIMMED_LOG_COLOR = LIGHT_MODE_DIMMED_LOG_COLOR;
 
 global._test_react_version = (range, testName, callback) => {
-  const trimmedRange = range.replaceAll(' ', '');
   const reactVersion = process.env.REACT_VERSION || ReactVersion.default;
-  const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+  const shouldPass = semver.satisfies(reactVersion, range);
 
   if (shouldPass) {
     test(testName, callback);
@@ -41,9 +40,8 @@ global._test_react_version = (range, testName, callback) => {
 };
 
 global._test_react_version_focus = (range, testName, callback) => {
-  const trimmedRange = range.replaceAll(' ', '');
   const reactVersion = process.env.REACT_VERSION || ReactVersion.default;
-  const shouldPass = semver.satisfies(reactVersion, trimmedRange);
+  const shouldPass = semver.satisfies(reactVersion, range);
 
   if (shouldPass) {
     // eslint-disable-next-line jest/no-focused-tests

From 82c64e1a49239158c0daa7f0d603d2ad2ee667a9 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 20 May 2022 19:10:43 +0200
Subject: [PATCH 1369/1603] Match Preact behavior for boolean props on custom
 elements (#24541)

* Log unexpected warnings when testing with ReactDOMServerIntegrationTestUtils

* Add test

Following https://github.com/facebook/react/issues/9230#issuecomment-322007671 except that `foo={true}` renders an empty string.
See https://github.com/facebook/react/issues/9230#issuecomment-1123464720 for rationale.

* Match Preact behavior for boolean props on custom elements

* Poke CircleCI
---
 .../__tests__/DOMPropertyOperations-test.js   | 28 +++++++++++++++++--
 .../src/__tests__/ReactDOMComponent-test.js   |  8 ++++--
 ...eactDOMServerIntegrationAttributes-test.js | 12 ++++++--
 .../ReactDOMServerIntegrationTestUtils.js     |  2 +-
 .../src/client/DOMPropertyOperations.js       | 13 +++++++++
 .../react-dom/src/client/ReactDOMComponent.js | 14 ++++++++--
 .../src/server/ReactDOMServerFormatConfig.js  |  8 +++++-
 packages/react-dom/src/shared/DOMProperty.js  |  5 ++++
 8 files changed, 79 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
index ab5ca9a54952..73e3b4b49bfc 100644
--- a/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
+++ b/packages/react-dom/src/__tests__/DOMPropertyOperations-test.js
@@ -10,7 +10,10 @@
 'use strict';
 
 // Set by `yarn test-fire`.
-const {disableInputAttributeSyncing} = require('shared/ReactFeatureFlags');
+const {
+  enableCustomElementPropertySupport,
+  disableInputAttributeSyncing,
+} = require('shared/ReactFeatureFlags');
 
 describe('DOMPropertyOperations', () => {
   let React;
@@ -256,8 +259,12 @@ describe('DOMPropertyOperations', () => {
       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('true');
-      expect(customElement.getAttribute('onfalse')).toBe('false');
+      expect(customElement.getAttribute('ontrue')).toBe(
+        enableCustomElementPropertySupport ? '' : 'true',
+      );
+      expect(customElement.getAttribute('onfalse')).toBe(
+        enableCustomElementPropertySupport ? null : 'false',
+      );
 
       // Dispatch the corresponding event names to make sure that nothing crashes.
       customElement.dispatchEvent(new Event('string'));
@@ -959,6 +966,21 @@ describe('DOMPropertyOperations', () => {
       expect(customElement.foo).toBe(null);
     });
 
+    // @gate enableCustomElementPropertySupport
+    it('boolean props should not be stringified in attributes', () => {
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      ReactDOM.render(<my-custom-element foo={true} />, container);
+      const customElement = container.querySelector('my-custom-element');
+
+      expect(customElement.getAttribute('foo')).toBe('');
+
+      // true => false
+      ReactDOM.render(<my-custom-element foo={false} />, container);
+
+      expect(customElement.getAttribute('foo')).toBe(null);
+    });
+
     // @gate enableCustomElementPropertySupport
     it('custom element custom event handlers assign multiple types', () => {
       const container = document.createElement('div');
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index fb7d7cf41ada..ec547d8cbaa8 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2689,9 +2689,13 @@ describe('ReactDOMComponent', () => {
       const container = document.createElement('div');
       ReactDOM.render(<some-custom-element foo={true} />, container);
       const node = container.firstChild;
-      expect(node.getAttribute('foo')).toBe('true');
+      expect(node.getAttribute('foo')).toBe(
+        ReactFeatureFlags.enableCustomElementPropertySupport ? '' : 'true',
+      );
       ReactDOM.render(<some-custom-element foo={false} />, container);
-      expect(node.getAttribute('foo')).toBe('false');
+      expect(node.getAttribute('foo')).toBe(
+        ReactFeatureFlags.enableCustomElementPropertySupport ? null : 'false',
+      );
       ReactDOM.render(<some-custom-element />, container);
       expect(node.hasAttribute('foo')).toBe(false);
       ReactDOM.render(<some-custom-element foo={true} />, container);
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index b32146d55e44..13b57e08a282 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -696,12 +696,20 @@ describe('ReactDOMServerIntegration', () => {
 
     itRenders('unknown boolean `true` attributes as strings', async render => {
       const e = await render(<custom-element foo={true} />);
-      expect(e.getAttribute('foo')).toBe('true');
+      if (ReactFeatureFlags.enableCustomElementPropertySupport) {
+        expect(e.getAttribute('foo')).toBe('');
+      } else {
+        expect(e.getAttribute('foo')).toBe('true');
+      }
     });
 
     itRenders('unknown boolean `false` attributes as strings', async render => {
       const e = await render(<custom-element foo={false} />);
-      expect(e.getAttribute('foo')).toBe('false');
+      if (ReactFeatureFlags.enableCustomElementPropertySupport) {
+        expect(e.getAttribute('foo')).toBe(null);
+      } else {
+        expect(e.getAttribute('foo')).toBe('false');
+      }
     });
 
     itRenders(
diff --git a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
index f03825c16d44..5465d1f33d36 100644
--- a/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
+++ b/packages/react-dom/src/__tests__/utils/ReactDOMServerIntegrationTestUtils.js
@@ -89,7 +89,7 @@ module.exports = function(initModules) {
         console.log(
           `We expected ${count} warning(s), but saw ${filteredWarnings.length} warning(s).`,
         );
-        if (filteredWarnings.count > 0) {
+        if (filteredWarnings.length > 0) {
           console.log(`We saw these warnings:`);
           for (let i = 0; i < filteredWarnings.length; i++) {
             console.log(...filteredWarnings[i]);
diff --git a/packages/react-dom/src/client/DOMPropertyOperations.js b/packages/react-dom/src/client/DOMPropertyOperations.js
index f3d6fdac8979..eed5767e8a00 100644
--- a/packages/react-dom/src/client/DOMPropertyOperations.js
+++ b/packages/react-dom/src/client/DOMPropertyOperations.js
@@ -115,6 +115,7 @@ export function getValueForAttribute(
   node: Element,
   name: string,
   expected: mixed,
+  isCustomComponentTag: boolean,
 ): mixed {
   if (__DEV__) {
     if (!isAttributeNameSafe(name)) {
@@ -124,6 +125,13 @@ export function getValueForAttribute(
       return expected === undefined ? undefined : null;
     }
     const value = node.getAttribute(name);
+
+    if (enableCustomElementPropertySupport) {
+      if (isCustomComponentTag && value === '') {
+        return true;
+      }
+    }
+
     if (__DEV__) {
       checkAttributeStringCoercion(expected, name);
     }
@@ -196,6 +204,11 @@ export function setValueForProperty(
   if (shouldRemoveAttribute(name, value, propertyInfo, isCustomComponentTag)) {
     value = null;
   }
+  if (enableCustomElementPropertySupport) {
+    if (isCustomComponentTag && value === true) {
+      value = '';
+    }
+  }
 
   // If the prop isn't in the special list, treat it as a simple attribute.
   if (isCustomComponentTag || propertyInfo === null) {
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 75e017a45183..19eb70e583b3 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -1081,7 +1081,12 @@ export function diffHydratedProperties(
       } else if (isCustomComponentTag && !enableCustomElementPropertySupport) {
         // $FlowFixMe - Should be inferred as not undefined.
         extraAttributeNames.delete(propKey.toLowerCase());
-        serverValue = getValueForAttribute(domElement, propKey, nextProp);
+        serverValue = getValueForAttribute(
+          domElement,
+          propKey,
+          nextProp,
+          isCustomComponentTag,
+        );
 
         if (nextProp !== serverValue) {
           warnForPropDifference(propKey, serverValue, nextProp);
@@ -1128,7 +1133,12 @@ export function diffHydratedProperties(
             // $FlowFixMe - Should be inferred as not undefined.
             extraAttributeNames.delete(propKey);
           }
-          serverValue = getValueForAttribute(domElement, propKey, nextProp);
+          serverValue = getValueForAttribute(
+            domElement,
+            propKey,
+            nextProp,
+            isCustomComponentTag,
+          );
         }
 
         const dontWarnCustomElement =
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 4814bd0aa333..c8d6d35ceb6b 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1156,7 +1156,7 @@ function pushStartCustomElement(
   let innerHTML = null;
   for (let propKey in props) {
     if (hasOwnProperty.call(props, propKey)) {
-      const propValue = props[propKey];
+      let propValue = props[propKey];
       if (propValue == null) {
         continue;
       }
@@ -1169,6 +1169,12 @@ function pushStartCustomElement(
         // so skip it.
         continue;
       }
+      if (enableCustomElementPropertySupport && propValue === false) {
+        continue;
+      }
+      if (enableCustomElementPropertySupport && propValue === true) {
+        propValue = '';
+      }
       if (enableCustomElementPropertySupport && propKey === 'className') {
         // className gets rendered as class on the client, so it should be
         // rendered as class on the server.
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 278a9fd12b00..b5540debb71d 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -162,6 +162,11 @@ export function shouldRemoveAttribute(
     return true;
   }
   if (isCustomComponentTag) {
+    if (enableCustomElementPropertySupport) {
+      if (value === false) {
+        return true;
+      }
+    }
     return false;
   }
   if (propertyInfo !== null) {

From 5a1e558df21bd3cafbaea01cc418fa69d14a8cab Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 23 May 2022 10:50:53 -0700
Subject: [PATCH 1370/1603] [DevTools] Regression Test Jest Config (#24598)

Some older React versions have different module import names and are missing certain features. This PR mocks modules that don't exist and maps modules in older versions to the ones that are required in tests. Specifically:

* In React v16.5, scheduler is named schedule
* In pre concurrent React, there is no act
* Prior to React v18.0, react-dom/client doesn't exist
* In DevTools, we expect to use scheduler/tracing-profiling instead of scheduler/tracing
---
 scripts/jest/config.build-devtools.js         |  7 +++-
 .../config.build-devtools-regression.js       | 41 +++++++++++++++++++
 .../setupTests.build-devtools-regression.js   | 30 ++++++++++++++
 3 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 scripts/jest/devtools/config.build-devtools-regression.js
 create mode 100644 scripts/jest/devtools/setupTests.build-devtools-regression.js

diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index 5a9cdd61e38f..ecea02fa338c 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -3,6 +3,7 @@
 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';
@@ -49,7 +50,10 @@ moduleNameMapper['^react-reconciler/([^/]+)$'] =
 
 module.exports = Object.assign({}, baseConfig, {
   // Redirect imports to the compiled bundles
-  moduleNameMapper,
+  moduleNameMapper: {
+    ...moduleNameMapper,
+    ...devtoolsRegressionConfig.moduleNameMapper,
+  },
   // Don't run bundle tests on -test.internal.* files
   testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'],
   // Exclude the build output from transforms
@@ -88,6 +92,7 @@ module.exports = Object.assign({}, baseConfig, {
   ],
   setupFiles: [
     ...baseConfig.setupFiles,
+    ...devtoolsRegressionConfig.setupFiles,
     require.resolve('./setupTests.build.js'),
     require.resolve('./devtools/setupEnv.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 000000000000..2b8b650173c1
--- /dev/null
+++ b/scripts/jest/devtools/config.build-devtools-regression.js
@@ -0,0 +1,41 @@
+'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/setupTests.build-devtools-regression.js b/scripts/jest/devtools/setupTests.build-devtools-regression.js
new file mode 100644
index 000000000000..d0126731512b
--- /dev/null
+++ b/scripts/jest/devtools/setupTests.build-devtools-regression.js
@@ -0,0 +1,30 @@
+'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');
+});
+
+// act doesn't exist in older versions of React, but
+// DevTools tests sometimes import and depend on act to run.
+// If act doesn't exist for a particular version of React, we will
+// mock it with a function. This should work in most tests
+// that we want to call with older versions of React.
+// TODO (luna) Refactor act in DevTools test utils to not depend
+// on act in react-dom or react-test-renderer so we don't need to do this
+jest.mock('react-test-renderer', () => {
+  const reactTestRenderer = jest.requireActual('react-test-renderer');
+  if (!reactTestRenderer.act) {
+    reactTestRenderer.act = fn => fn();
+  }
+  return reactTestRenderer;
+});
+
+jest.mock('react-dom/test-utils', () => {
+  const testUtils = jest.requireActual('react-dom/test-utils');
+  if (!testUtils.act) {
+    testUtils.act = fn => fn();
+  }
+  return testUtils;
+});

From 210fee474d7152b08171c2953678b607f8baad3e Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 23 May 2022 11:33:04 -0700
Subject: [PATCH 1371/1603] [DevTools] Make Devtools Regression Build (#24599)

This PR adds a script that downloads the specified react version from NPM (ie. react-dom, react, and react-test-renderer) and replaces the corresponding files in the build folder with the downloaded react files.

The scheduler package, unlike react-dom, react, and react-test-renderer, is versioned differently, so we also need to specifically account for that in the script.
---
 .../download_devtools_regression_build.js     | 114 ++++++++++++++++++
 1 file changed, 114 insertions(+)
 create mode 100755 scripts/circleci/download_devtools_regression_build.js

diff --git a/scripts/circleci/download_devtools_regression_build.js b/scripts/circleci/download_devtools_regression_build.js
new file mode 100755
index 000000000000..6a1aa23cb9cc
--- /dev/null
+++ b/scripts/circleci/download_devtools_regression_build.js
@@ -0,0 +1,114 @@
+#!/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 fs = require('fs');
+
+const INSTALL_PACKAGES = ['react-dom', 'react', 'react-test-renderer'];
+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 version = process.argv[2];
+
+async function downloadRegressionBuild() {
+  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 = INSTALL_PACKAGES.reduce(
+    (str, name) => `${str} ${name}@${version}`,
+    ''
+  );
+  await exec(
+    `npm install --prefix ${REGRESSION_FOLDER} ${downloadPackagesStr}`
+  );
+
+  // 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 = INSTALL_PACKAGES.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 -r ${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 = INSTALL_PACKAGES.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`
+    )
+  );
+  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 ther
+  if (semver.lte(semver.coerce(version).version, '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 -r ${join(buildPath, 'scheduler')}`);
+    await exec(
+      `mv ${join(
+        regressionBuildPath,
+        'node_modules',
+        'scheduler'
+      )} ${buildPath}`
+    );
+  }
+}
+
+async function main() {
+  try {
+    await downloadRegressionBuild();
+  } catch (e) {
+    console.log(chalk.red(e));
+  } finally {
+    console.log(chalk.bold.white(`Removing regression build`));
+    await exec(`rm -r ${regressionBuildPath}`);
+  }
+}
+
+main();

From 1e98682dd383ca07f2819dc8987bd46cdb5fa028 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 23 May 2022 14:18:17 -0700
Subject: [PATCH 1372/1603] [DevTools] Fix moduleNameMapper Order in DevTools
 Config  #24602)

We need the regression config moduleNameMapper to come before the current moduleNameMapper so when it tries to map "/^react-dom\/([^/]+)$/ it doesn't get confused. The reason is because order in which the mappings are defined matters. Patterns are checked one by one until one fits, and the most specific rule should be listed first.
---
 .../react-devtools-shared/src/__tests__/profilingCache-test.js  | 2 +-
 scripts/jest/config.build-devtools.js                           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index eb4a1aceba92..1a84be03aa50 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -734,7 +734,7 @@ describe('ProfilingCache', () => {
     }
   });
 
-  // @reactVersion >= 16.9
+  // @reactVersion >= 18.0
   it('should calculate durations based on actual children (not filtered children)', () => {
     store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
 
diff --git a/scripts/jest/config.build-devtools.js b/scripts/jest/config.build-devtools.js
index ecea02fa338c..dd74a4ce984a 100644
--- a/scripts/jest/config.build-devtools.js
+++ b/scripts/jest/config.build-devtools.js
@@ -51,8 +51,8 @@ moduleNameMapper['^react-reconciler/([^/]+)$'] =
 module.exports = Object.assign({}, baseConfig, {
   // Redirect imports to the compiled bundles
   moduleNameMapper: {
-    ...moduleNameMapper,
     ...devtoolsRegressionConfig.moduleNameMapper,
+    ...moduleNameMapper,
   },
   // Don't run bundle tests on -test.internal.* files
   testPathIgnorePatterns: ['/node_modules/', '-test.internal.js$'],

From a2505792ed17fd4d7ddc69561053c3ac90899491 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 24 May 2022 06:46:22 -0700
Subject: [PATCH 1373/1603] [DevTools] Add CircleCI Chron Job For DevTools
 Regression Tests  (#24601)

This PR adds an hourly chron job on Circle CI that runs regression tests on the most recent DevTools build for React v16.0, v16.5, v16.8 v17.0 and v18.0.
---
 .circleci/config.yml | 49 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a9905a53b7a9..31d52c7e6a61 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -222,6 +222,25 @@ jobs:
             RELEASE_CHANNEL: experimental
           command: ./scripts/circleci/run_devtools_e2e_tests.js
 
+  run_devtools_tests_for_versions:
+    docker: *docker
+    environment: *environment
+    parallelism: *TEST_PARALLELISM
+    parameters:
+      version:
+        type: string
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Install nested packages from Yarn cache
+          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >>
+      - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci
+
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -494,6 +513,36 @@ workflows:
           requires:
             - setup
 
+  devtools_regression_tests:
+    unless: << pipeline.parameters.prerelease_commit_sha >>
+    triggers:
+      - schedule:
+          # DevTools regression tests run hourly
+          cron: "0 * * * *"
+          filters:
+            branches:
+              only:
+                - main
+    jobs:
+      - setup
+      - yarn_build_combined:
+          requires:
+            - setup
+      - build_devtools_and_process_artifacts:
+          requires:
+            - yarn_build_combined
+      - run_devtools_tests_for_versions:
+          requires:
+            - build_devtools_and_process_artifacts
+          matrix:
+            parameters:
+              version:
+                - "16.0"
+                - "16.5" # schedule package
+                - "16.8" # hooks
+                - "17.0" 
+                - "18.0"
+
   # Used to publish a prerelease manually via the command line
   publish_preleases:
     when: << pipeline.parameters.prerelease_commit_sha >>

From 2c68776abe2100bbf749ac4451b90e66f8290f2f Mon Sep 17 00:00:00 2001
From: Alexandru Tasica <contact@alexandrutasica.ro>
Date: Wed, 25 May 2022 16:56:35 +0300
Subject: [PATCH 1374/1603] fix scripts folder text (#24609)

---
 scripts/circleci/download_devtools_regression_build.js | 2 +-
 scripts/jest/jest-cli.js                               | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/circleci/download_devtools_regression_build.js b/scripts/circleci/download_devtools_regression_build.js
index 6a1aa23cb9cc..d8b7c88a0a7e 100755
--- a/scripts/circleci/download_devtools_regression_build.js
+++ b/scripts/circleci/download_devtools_regression_build.js
@@ -75,7 +75,7 @@ async function downloadRegressionBuild() {
   // 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 ther
+  // is imported by older React versions and will break if it's not there
   if (semver.lte(semver.coerce(version).version, '18.0.0')) {
     await exec(`npm install --prefix ${REGRESSION_FOLDER} scheduler@0.20.1`);
   }
diff --git a/scripts/jest/jest-cli.js b/scripts/jest/jest-cli.js
index b47731d4dbf4..4aaf59ba728f 100644
--- a/scripts/jest/jest-cli.js
+++ b/scripts/jest/jest-cli.js
@@ -112,7 +112,7 @@ const argv = yargs
     },
     sourceMaps: {
       describe:
-        'Enable inline source maps when tranforming source files with Jest. Useful for debugging, but makes it slower.',
+        'Enable inline source maps when transforming source files with Jest. Useful for debugging, but makes it slower.',
       type: 'boolean',
       default: false,
     },

From b2763d3eaa4a56ce9c973945783aba7cac63478f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 25 May 2022 15:42:02 -0400
Subject: [PATCH 1375/1603] Move hydration code out of normal Suspense path
 (#24532)

* Move hydration code out of normal Suspense path

Shuffling some code around to make it easier to follow. The logic for
updating a dehydrated Suspense boundary is significantly different
from the logic for a client-rendered Suspense boundary. Most of it was
already lifted out into a separate function; this moves the remaining
hydration-specific logic out of updateSuspenseComponent and into
updateDehydratedSuspenseComponent instead.

No expected changes to program behavior.

* Extract hydration logic in complete phase, too

Same as previous step but for the complete phase. This is a separate
commit to make bisecting easier in case something breaks. The logic
is very subtle but mostly all I've done is extract it to
another function.
---
 .../src/ReactFiberBeginWork.new.js            | 500 ++++++++----------
 .../src/ReactFiberBeginWork.old.js            | 500 ++++++++----------
 .../src/ReactFiberCompleteWork.new.js         | 190 ++++---
 .../src/ReactFiberCompleteWork.old.js         | 190 ++++---
 4 files changed, 682 insertions(+), 698 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 9ca86babe3e7..a025055807f5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2049,6 +2049,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   // a stack.
   if (current === null) {
     // Initial mount
+
+    // Special path for hydration
     // If we're currently hydrating, try to hydrate this boundary.
     tryToClaimNextHydratableInstance(workInProgress);
     // This could've been a dehydrated suspense component.
@@ -2129,161 +2131,65 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   } else {
     // This is an update.
 
-    // If the current fiber has a SuspenseState, that means it's already showing
-    // a fallback.
+    // Special path for hydration
     const prevState: null | SuspenseState = current.memoizedState;
     if (prevState !== null) {
-      // The current tree is already showing a fallback
-
-      // Special path for hydration
       const dehydrated = prevState.dehydrated;
       if (dehydrated !== null) {
-        if (!didSuspend) {
-          return updateDehydratedSuspenseComponent(
-            current,
-            workInProgress,
-            dehydrated,
-            prevState,
-            renderLanes,
-          );
-        } else if (workInProgress.flags & ForceClientRender) {
-          // Something errored during hydration. Try again without hydrating.
-          workInProgress.flags &= ~ForceClientRender;
-          return retrySuspenseComponentWithoutHydrating(
-            current,
-            workInProgress,
-            renderLanes,
-            new Error(
-              'There was an error while hydrating this Suspense boundary. ' +
-                'Switched to client rendering.',
-            ),
-          );
-        } else if (
-          (workInProgress.memoizedState: null | SuspenseState) !== null
-        ) {
-          // Something suspended and we should still be in dehydrated mode.
-          // Leave the existing child in place.
-          workInProgress.child = current.child;
-          // The dehydrated completion pass expects this flag to be there
-          // but the normal suspense pass doesn't.
-          workInProgress.flags |= DidCapture;
-          return null;
-        } else {
-          // Suspended but we should no longer be in dehydrated mode.
-          // Therefore we now have to render the fallback.
-          const nextPrimaryChildren = nextProps.children;
-          const nextFallbackChildren = nextProps.fallback;
-          const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
-            current,
-            workInProgress,
-            nextPrimaryChildren,
-            nextFallbackChildren,
-            renderLanes,
-          );
-          const primaryChildFragment: Fiber = (workInProgress.child: any);
-          primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
-            renderLanes,
-          );
-          workInProgress.memoizedState = SUSPENDED_MARKER;
-          return fallbackChildFragment;
-        }
-      }
-
-      if (showFallback) {
-        const nextFallbackChildren = nextProps.fallback;
-        const nextPrimaryChildren = nextProps.children;
-        const fallbackChildFragment = updateSuspenseFallbackChildren(
+        return updateDehydratedSuspenseComponent(
           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 = getSuspendedTransitions();
-          if (currentTransitions !== null) {
-            const primaryChildUpdateQueue: OffscreenQueue = {
-              transitions: currentTransitions,
-            };
-            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
-          }
-        }
-        primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
-          current,
-          renderLanes,
-        );
-        workInProgress.memoizedState = SUSPENDED_MARKER;
-        return fallbackChildFragment;
-      } else {
-        const nextPrimaryChildren = nextProps.children;
-        const primaryChildFragment = updateSuspensePrimaryChildren(
-          current,
-          workInProgress,
-          nextPrimaryChildren,
+          didSuspend,
+          nextProps,
+          dehydrated,
+          prevState,
           renderLanes,
         );
-        workInProgress.memoizedState = null;
-        return primaryChildFragment;
       }
-    } else {
-      // The current tree is not already showing a fallback.
-      if (showFallback) {
-        // Timed out.
-        const nextFallbackChildren = nextProps.fallback;
-        const nextPrimaryChildren = nextProps.children;
-        const fallbackChildFragment = 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);
-        primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
-          current,
-          renderLanes,
-        );
+    }
 
-        if (enableTransitionTracing) {
-          const currentTransitions = getSuspendedTransitions();
-          if (currentTransitions !== null) {
-            const primaryChildUpdateQueue: OffscreenQueue = {
-              transitions: currentTransitions,
-            };
-            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
-          }
+    if (showFallback) {
+      const nextFallbackChildren = nextProps.fallback;
+      const nextPrimaryChildren = nextProps.children;
+      const fallbackChildFragment = 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 = getSuspendedTransitions();
+        if (currentTransitions !== null) {
+          const primaryChildUpdateQueue: OffscreenQueue = {
+            transitions: currentTransitions,
+          };
+          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
-
-        // Skip the primary children, and continue working on the
-        // fallback children.
-        workInProgress.memoizedState = SUSPENDED_MARKER;
-        return fallbackChildFragment;
-      } else {
-        // Still haven't timed out. Continue rendering the children, like we
-        // normally do.
-        const nextPrimaryChildren = nextProps.children;
-        const primaryChildFragment = updateSuspensePrimaryChildren(
-          current,
-          workInProgress,
-          nextPrimaryChildren,
-          renderLanes,
-        );
-        workInProgress.memoizedState = null;
-        return primaryChildFragment;
       }
+      primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
+        current,
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      return fallbackChildFragment;
+    } else {
+      const nextPrimaryChildren = nextProps.children;
+      const primaryChildFragment = updateSuspensePrimaryChildren(
+        current,
+        workInProgress,
+        nextPrimaryChildren,
+        renderLanes,
+      );
+      workInProgress.memoizedState = null;
+      return primaryChildFragment;
     }
   }
 }
@@ -2637,146 +2543,194 @@ function mountDehydratedSuspenseComponent(
 function updateDehydratedSuspenseComponent(
   current: Fiber,
   workInProgress: Fiber,
+  didSuspend: boolean,
+  nextProps: any,
   suspenseInstance: SuspenseInstance,
   suspenseState: SuspenseState,
   renderLanes: Lanes,
 ): null | Fiber {
-  // We should never be hydrating at this point because it is the first pass,
-  // but after we've already committed once.
-  warnIfHydrating();
+  if (!didSuspend) {
+    // This is the first render pass. Attempt to hydrate.
 
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-      // TODO: When we delete legacy mode, we should make this error argument
-      // required — every concurrent mode path that causes hydration to
-      // de-opt to client rendering should have an error message.
-      null,
-    );
-  }
+    // We should never be hydrating at this point because it is the first pass,
+    // but after we've already committed once.
+    warnIfHydrating();
 
-  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.
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-      // TODO: The server should serialize the error message so we can log it
-      // here on the client. Or, in production, a hash/id that corresponds to
-      // the error.
-      new Error(
-        'The server could not finish this Suspense boundary, likely ' +
-          'due to an error during server rendering. Switched to ' +
-          'client rendering.',
-      ),
-    );
-  }
+    if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        // TODO: When we delete legacy mode, we should make this error argument
+        // required — every concurrent mode path that causes hydration to
+        // de-opt to client rendering should have an error message.
+        null,
+      );
+    }
 
-  if (
-    enableLazyContextPropagation &&
-    // TODO: Factoring is a little weird, since we check this right below, too.
-    // But don't want to re-arrange the if-else chain until/unless this
-    // feature lands.
-    !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,
+    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.
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
         renderLanes,
+        // TODO: The server should serialize the error message so we can log it
+        // here on the client. Or, in production, a hash/id that corresponds to
+        // the error.
+        new Error(
+          'The server could not finish this Suspense boundary, likely ' +
+            'due to an error during server rendering. Switched to ' +
+            'client rendering.',
+        ),
       );
-      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;
-        // TODO: Ideally this would inherit the event time of the current render
-        const eventTime = NoTimestamp;
-        scheduleUpdateOnFiber(current, attemptHydrationAtLane, eventTime);
-      } else {
-        // We have already tried to ping at a higher priority than we're rendering with
-        // so if we got here, we must have failed to hydrate at those levels. We must
-        // now give up. Instead, we're going to delete the whole subtree and instead inject
-        // a new real Suspense boundary to take its place, which may render content
-        // or fallback. This might suspend for a while and if it does we might still have
-        // an opportunity to hydrate before this pass commits.
-      }
-    }
-
-    // If we have scheduled higher pri work above, this will probably just abort the render
-    // since we now have higher priority work, but in case it doesn't, we need to prepare to
-    // render something, if we time out. Even if that requires us to delete everything and
-    // skip hydration.
-    // Delay having to do this as long as the suspense timeout allows us.
-    renderDidSuspendDelayIfPossible();
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-      new Error(
-        '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.',
-      ),
-    );
-  } 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).
-    workInProgress.flags |= DidCapture;
-    // Leave the child in place. I.e. the dehydrated fragment.
-    workInProgress.child = current.child;
-    // Register a callback to retry this boundary once the server has sent the result.
-    const retry = retryDehydratedSuspenseBoundary.bind(null, current);
-    registerSuspenseInstanceRetry(suspenseInstance, retry);
-    return null;
+    }
+
+    if (
+      enableLazyContextPropagation &&
+      // TODO: Factoring is a little weird, since we check this right below, too.
+      // But don't want to re-arrange the if-else chain until/unless this
+      // feature lands.
+      !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;
+          // TODO: Ideally this would inherit the event time of the current render
+          const eventTime = NoTimestamp;
+          scheduleUpdateOnFiber(current, attemptHydrationAtLane, eventTime);
+        } else {
+          // We have already tried to ping at a higher priority than we're rendering with
+          // so if we got here, we must have failed to hydrate at those levels. We must
+          // now give up. Instead, we're going to delete the whole subtree and instead inject
+          // a new real Suspense boundary to take its place, which may render content
+          // or fallback. This might suspend for a while and if it does we might still have
+          // an opportunity to hydrate before this pass commits.
+        }
+      }
+
+      // If we have scheduled higher pri work above, this will probably just abort the render
+      // since we now have higher priority work, but in case it doesn't, we need to prepare to
+      // render something, if we time out. Even if that requires us to delete everything and
+      // skip hydration.
+      // Delay having to do this as long as the suspense timeout allows us.
+      renderDidSuspendDelayIfPossible();
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        new Error(
+          '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.',
+        ),
+      );
+    } 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).
+      workInProgress.flags |= DidCapture;
+      // Leave the child in place. I.e. the dehydrated fragment.
+      workInProgress.child = current.child;
+      // Register a callback to retry this boundary once the server has sent the result.
+      const retry = retryDehydratedSuspenseBoundary.bind(null, current);
+      registerSuspenseInstanceRetry(suspenseInstance, retry);
+      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 first attempt.
-    reenterHydrationStateFromDehydratedSuspenseInstance(
-      workInProgress,
-      suspenseInstance,
-      suspenseState.treeContext,
-    );
-    const nextProps = workInProgress.pendingProps;
-    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;
+    // 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.
+      workInProgress.flags &= ~ForceClientRender;
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        new Error(
+          'There was an error while hydrating this Suspense boundary. ' +
+            'Switched to client rendering.',
+        ),
+      );
+    } else if ((workInProgress.memoizedState: null | SuspenseState) !== null) {
+      // Something suspended and we should still be in dehydrated mode.
+      // Leave the existing child in place.
+      workInProgress.child = current.child;
+      // The dehydrated completion pass expects this flag to be there
+      // but the normal suspense pass doesn't.
+      workInProgress.flags |= DidCapture;
+      return null;
+    } else {
+      // Suspended but we should no longer be in dehydrated mode.
+      // Therefore we now have to render the fallback.
+      const nextPrimaryChildren = nextProps.children;
+      const nextFallbackChildren = nextProps.fallback;
+      const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
+        current,
+        workInProgress,
+        nextPrimaryChildren,
+        nextFallbackChildren,
+        renderLanes,
+      );
+      const primaryChildFragment: Fiber = (workInProgress.child: any);
+      primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      return fallbackChildFragment;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 32dc0c8e8183..a43a1d6b4560 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2049,6 +2049,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   // a stack.
   if (current === null) {
     // Initial mount
+
+    // Special path for hydration
     // If we're currently hydrating, try to hydrate this boundary.
     tryToClaimNextHydratableInstance(workInProgress);
     // This could've been a dehydrated suspense component.
@@ -2129,161 +2131,65 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
   } else {
     // This is an update.
 
-    // If the current fiber has a SuspenseState, that means it's already showing
-    // a fallback.
+    // Special path for hydration
     const prevState: null | SuspenseState = current.memoizedState;
     if (prevState !== null) {
-      // The current tree is already showing a fallback
-
-      // Special path for hydration
       const dehydrated = prevState.dehydrated;
       if (dehydrated !== null) {
-        if (!didSuspend) {
-          return updateDehydratedSuspenseComponent(
-            current,
-            workInProgress,
-            dehydrated,
-            prevState,
-            renderLanes,
-          );
-        } else if (workInProgress.flags & ForceClientRender) {
-          // Something errored during hydration. Try again without hydrating.
-          workInProgress.flags &= ~ForceClientRender;
-          return retrySuspenseComponentWithoutHydrating(
-            current,
-            workInProgress,
-            renderLanes,
-            new Error(
-              'There was an error while hydrating this Suspense boundary. ' +
-                'Switched to client rendering.',
-            ),
-          );
-        } else if (
-          (workInProgress.memoizedState: null | SuspenseState) !== null
-        ) {
-          // Something suspended and we should still be in dehydrated mode.
-          // Leave the existing child in place.
-          workInProgress.child = current.child;
-          // The dehydrated completion pass expects this flag to be there
-          // but the normal suspense pass doesn't.
-          workInProgress.flags |= DidCapture;
-          return null;
-        } else {
-          // Suspended but we should no longer be in dehydrated mode.
-          // Therefore we now have to render the fallback.
-          const nextPrimaryChildren = nextProps.children;
-          const nextFallbackChildren = nextProps.fallback;
-          const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
-            current,
-            workInProgress,
-            nextPrimaryChildren,
-            nextFallbackChildren,
-            renderLanes,
-          );
-          const primaryChildFragment: Fiber = (workInProgress.child: any);
-          primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
-            renderLanes,
-          );
-          workInProgress.memoizedState = SUSPENDED_MARKER;
-          return fallbackChildFragment;
-        }
-      }
-
-      if (showFallback) {
-        const nextFallbackChildren = nextProps.fallback;
-        const nextPrimaryChildren = nextProps.children;
-        const fallbackChildFragment = updateSuspenseFallbackChildren(
+        return updateDehydratedSuspenseComponent(
           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 = getSuspendedTransitions();
-          if (currentTransitions !== null) {
-            const primaryChildUpdateQueue: OffscreenQueue = {
-              transitions: currentTransitions,
-            };
-            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
-          }
-        }
-        primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
-          current,
-          renderLanes,
-        );
-        workInProgress.memoizedState = SUSPENDED_MARKER;
-        return fallbackChildFragment;
-      } else {
-        const nextPrimaryChildren = nextProps.children;
-        const primaryChildFragment = updateSuspensePrimaryChildren(
-          current,
-          workInProgress,
-          nextPrimaryChildren,
+          didSuspend,
+          nextProps,
+          dehydrated,
+          prevState,
           renderLanes,
         );
-        workInProgress.memoizedState = null;
-        return primaryChildFragment;
       }
-    } else {
-      // The current tree is not already showing a fallback.
-      if (showFallback) {
-        // Timed out.
-        const nextFallbackChildren = nextProps.fallback;
-        const nextPrimaryChildren = nextProps.children;
-        const fallbackChildFragment = 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);
-        primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
-          current,
-          renderLanes,
-        );
+    }
 
-        if (enableTransitionTracing) {
-          const currentTransitions = getSuspendedTransitions();
-          if (currentTransitions !== null) {
-            const primaryChildUpdateQueue: OffscreenQueue = {
-              transitions: currentTransitions,
-            };
-            primaryChildFragment.updateQueue = primaryChildUpdateQueue;
-          }
+    if (showFallback) {
+      const nextFallbackChildren = nextProps.fallback;
+      const nextPrimaryChildren = nextProps.children;
+      const fallbackChildFragment = 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 = getSuspendedTransitions();
+        if (currentTransitions !== null) {
+          const primaryChildUpdateQueue: OffscreenQueue = {
+            transitions: currentTransitions,
+          };
+          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
-
-        // Skip the primary children, and continue working on the
-        // fallback children.
-        workInProgress.memoizedState = SUSPENDED_MARKER;
-        return fallbackChildFragment;
-      } else {
-        // Still haven't timed out. Continue rendering the children, like we
-        // normally do.
-        const nextPrimaryChildren = nextProps.children;
-        const primaryChildFragment = updateSuspensePrimaryChildren(
-          current,
-          workInProgress,
-          nextPrimaryChildren,
-          renderLanes,
-        );
-        workInProgress.memoizedState = null;
-        return primaryChildFragment;
       }
+      primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
+        current,
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      return fallbackChildFragment;
+    } else {
+      const nextPrimaryChildren = nextProps.children;
+      const primaryChildFragment = updateSuspensePrimaryChildren(
+        current,
+        workInProgress,
+        nextPrimaryChildren,
+        renderLanes,
+      );
+      workInProgress.memoizedState = null;
+      return primaryChildFragment;
     }
   }
 }
@@ -2637,146 +2543,194 @@ function mountDehydratedSuspenseComponent(
 function updateDehydratedSuspenseComponent(
   current: Fiber,
   workInProgress: Fiber,
+  didSuspend: boolean,
+  nextProps: any,
   suspenseInstance: SuspenseInstance,
   suspenseState: SuspenseState,
   renderLanes: Lanes,
 ): null | Fiber {
-  // We should never be hydrating at this point because it is the first pass,
-  // but after we've already committed once.
-  warnIfHydrating();
+  if (!didSuspend) {
+    // This is the first render pass. Attempt to hydrate.
 
-  if ((workInProgress.mode & ConcurrentMode) === NoMode) {
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-      // TODO: When we delete legacy mode, we should make this error argument
-      // required — every concurrent mode path that causes hydration to
-      // de-opt to client rendering should have an error message.
-      null,
-    );
-  }
+    // We should never be hydrating at this point because it is the first pass,
+    // but after we've already committed once.
+    warnIfHydrating();
 
-  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.
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-      // TODO: The server should serialize the error message so we can log it
-      // here on the client. Or, in production, a hash/id that corresponds to
-      // the error.
-      new Error(
-        'The server could not finish this Suspense boundary, likely ' +
-          'due to an error during server rendering. Switched to ' +
-          'client rendering.',
-      ),
-    );
-  }
+    if ((workInProgress.mode & ConcurrentMode) === NoMode) {
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        // TODO: When we delete legacy mode, we should make this error argument
+        // required — every concurrent mode path that causes hydration to
+        // de-opt to client rendering should have an error message.
+        null,
+      );
+    }
 
-  if (
-    enableLazyContextPropagation &&
-    // TODO: Factoring is a little weird, since we check this right below, too.
-    // But don't want to re-arrange the if-else chain until/unless this
-    // feature lands.
-    !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,
+    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.
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
         renderLanes,
+        // TODO: The server should serialize the error message so we can log it
+        // here on the client. Or, in production, a hash/id that corresponds to
+        // the error.
+        new Error(
+          'The server could not finish this Suspense boundary, likely ' +
+            'due to an error during server rendering. Switched to ' +
+            'client rendering.',
+        ),
       );
-      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;
-        // TODO: Ideally this would inherit the event time of the current render
-        const eventTime = NoTimestamp;
-        scheduleUpdateOnFiber(current, attemptHydrationAtLane, eventTime);
-      } else {
-        // We have already tried to ping at a higher priority than we're rendering with
-        // so if we got here, we must have failed to hydrate at those levels. We must
-        // now give up. Instead, we're going to delete the whole subtree and instead inject
-        // a new real Suspense boundary to take its place, which may render content
-        // or fallback. This might suspend for a while and if it does we might still have
-        // an opportunity to hydrate before this pass commits.
-      }
-    }
-
-    // If we have scheduled higher pri work above, this will probably just abort the render
-    // since we now have higher priority work, but in case it doesn't, we need to prepare to
-    // render something, if we time out. Even if that requires us to delete everything and
-    // skip hydration.
-    // Delay having to do this as long as the suspense timeout allows us.
-    renderDidSuspendDelayIfPossible();
-    return retrySuspenseComponentWithoutHydrating(
-      current,
-      workInProgress,
-      renderLanes,
-      new Error(
-        '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.',
-      ),
-    );
-  } 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).
-    workInProgress.flags |= DidCapture;
-    // Leave the child in place. I.e. the dehydrated fragment.
-    workInProgress.child = current.child;
-    // Register a callback to retry this boundary once the server has sent the result.
-    const retry = retryDehydratedSuspenseBoundary.bind(null, current);
-    registerSuspenseInstanceRetry(suspenseInstance, retry);
-    return null;
+    }
+
+    if (
+      enableLazyContextPropagation &&
+      // TODO: Factoring is a little weird, since we check this right below, too.
+      // But don't want to re-arrange the if-else chain until/unless this
+      // feature lands.
+      !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;
+          // TODO: Ideally this would inherit the event time of the current render
+          const eventTime = NoTimestamp;
+          scheduleUpdateOnFiber(current, attemptHydrationAtLane, eventTime);
+        } else {
+          // We have already tried to ping at a higher priority than we're rendering with
+          // so if we got here, we must have failed to hydrate at those levels. We must
+          // now give up. Instead, we're going to delete the whole subtree and instead inject
+          // a new real Suspense boundary to take its place, which may render content
+          // or fallback. This might suspend for a while and if it does we might still have
+          // an opportunity to hydrate before this pass commits.
+        }
+      }
+
+      // If we have scheduled higher pri work above, this will probably just abort the render
+      // since we now have higher priority work, but in case it doesn't, we need to prepare to
+      // render something, if we time out. Even if that requires us to delete everything and
+      // skip hydration.
+      // Delay having to do this as long as the suspense timeout allows us.
+      renderDidSuspendDelayIfPossible();
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        new Error(
+          '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.',
+        ),
+      );
+    } 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).
+      workInProgress.flags |= DidCapture;
+      // Leave the child in place. I.e. the dehydrated fragment.
+      workInProgress.child = current.child;
+      // Register a callback to retry this boundary once the server has sent the result.
+      const retry = retryDehydratedSuspenseBoundary.bind(null, current);
+      registerSuspenseInstanceRetry(suspenseInstance, retry);
+      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 first attempt.
-    reenterHydrationStateFromDehydratedSuspenseInstance(
-      workInProgress,
-      suspenseInstance,
-      suspenseState.treeContext,
-    );
-    const nextProps = workInProgress.pendingProps;
-    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;
+    // 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.
+      workInProgress.flags &= ~ForceClientRender;
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        new Error(
+          'There was an error while hydrating this Suspense boundary. ' +
+            'Switched to client rendering.',
+        ),
+      );
+    } else if ((workInProgress.memoizedState: null | SuspenseState) !== null) {
+      // Something suspended and we should still be in dehydrated mode.
+      // Leave the existing child in place.
+      workInProgress.child = current.child;
+      // The dehydrated completion pass expects this flag to be there
+      // but the normal suspense pass doesn't.
+      workInProgress.flags |= DidCapture;
+      return null;
+    } else {
+      // Suspended but we should no longer be in dehydrated mode.
+      // Therefore we now have to render the fallback.
+      const nextPrimaryChildren = nextProps.children;
+      const nextFallbackChildren = nextProps.fallback;
+      const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
+        current,
+        workInProgress,
+        nextPrimaryChildren,
+        nextFallbackChildren,
+        renderLanes,
+      );
+      const primaryChildFragment: Fiber = (workInProgress.child: any);
+      primaryChildFragment.memoizedState = mountSuspenseOffscreenState(
+        renderLanes,
+      );
+      workInProgress.memoizedState = SUSPENDED_MARKER;
+      return fallbackChildFragment;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index fe8f93e4d219..39ff1261660a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -759,6 +759,93 @@ function bubbleProperties(completedWork: Fiber) {
   return didBailout;
 }
 
+function completeDehydratedSuspenseBoundary(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextState: SuspenseState | null,
+): boolean {
+  if (
+    hasUnhydratedTailNodes() &&
+    (workInProgress.mode & ConcurrentMode) !== NoMode &&
+    (workInProgress.flags & DidCapture) === NoFlags
+  ) {
+    warnIfUnhydratedTailNodes(workInProgress);
+    resetHydrationState();
+    workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+
+    return false;
+  }
+
+  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 Flow doesn't support type casting in combination with the -= operator
+              workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
+      return false;
+    } else {
+      // 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.
+        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 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.
+    upgradeHydrationErrorsToRecoverable();
+
+    // Fall through to normal Suspense path
+    return true;
+  }
+}
+
 function completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -996,80 +1083,35 @@ function completeWork(
       popSuspenseContext(workInProgress);
       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 (
-        hasUnhydratedTailNodes() &&
-        (workInProgress.mode & ConcurrentMode) !== NoMode &&
-        (workInProgress.flags & DidCapture) === NoFlags
+        current === null ||
+        (current.memoizedState !== null &&
+          current.memoizedState.dehydrated !== null)
       ) {
-        warnIfUnhydratedTailNodes(workInProgress);
-        resetHydrationState();
-        workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
-        return 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.
-        const wasHydrated = popHydrationState(workInProgress);
-        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 Flow doesn't support type casting in combination with the -= operator
-                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                }
-              }
-            }
-          }
-          return null;
-        } else {
-          // 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.
-            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 Flow doesn't support type casting in combination with the -= operator
-                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                }
-              }
-            }
+        const fallthroughToNormalSuspensePath = completeDehydratedSuspenseBoundary(
+          current,
+          workInProgress,
+          nextState,
+        );
+        if (!fallthroughToNormalSuspensePath) {
+          if (workInProgress.flags & ShouldCapture) {
+            // Special case. There were remaining unhydrated nodes. We treat
+            // this as a mismatch. Revert to client rendering.
+            return workInProgress;
+          } else {
+            // Did not finish hydrating, either because this is the initial
+            // render or because something suspended.
+            return null;
           }
-          return null;
         }
-      }
 
-      // 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.
-      upgradeHydrationErrorsToRecoverable();
+        // Continue with the normal Suspense path.
+      }
 
       if ((workInProgress.flags & DidCapture) !== NoFlags) {
         // Something suspended. Re-render with the fallback children.
@@ -1086,13 +1128,9 @@ function completeWork(
       }
 
       const nextDidTimeout = nextState !== null;
-      let prevDidTimeout = false;
-      if (current === null) {
-        popHydrationState(workInProgress);
-      } else {
-        const prevState: null | SuspenseState = current.memoizedState;
-        prevDidTimeout = prevState !== null;
-      }
+      const prevDidTimeout =
+        current !== null &&
+        (current.memoizedState: null | SuspenseState) !== null;
 
       if (enableCache && nextDidTimeout) {
         const offscreenFiber: Fiber = (workInProgress.child: any);
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index abf1deb9ff38..90c283966e65 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -759,6 +759,93 @@ function bubbleProperties(completedWork: Fiber) {
   return didBailout;
 }
 
+function completeDehydratedSuspenseBoundary(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextState: SuspenseState | null,
+): boolean {
+  if (
+    hasUnhydratedTailNodes() &&
+    (workInProgress.mode & ConcurrentMode) !== NoMode &&
+    (workInProgress.flags & DidCapture) === NoFlags
+  ) {
+    warnIfUnhydratedTailNodes(workInProgress);
+    resetHydrationState();
+    workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
+
+    return false;
+  }
+
+  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 Flow doesn't support type casting in combination with the -= operator
+              workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
+            }
+          }
+        }
+      }
+      return false;
+    } else {
+      // 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.
+        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 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.
+    upgradeHydrationErrorsToRecoverable();
+
+    // Fall through to normal Suspense path
+    return true;
+  }
+}
+
 function completeWork(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -996,80 +1083,35 @@ function completeWork(
       popSuspenseContext(workInProgress);
       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 (
-        hasUnhydratedTailNodes() &&
-        (workInProgress.mode & ConcurrentMode) !== NoMode &&
-        (workInProgress.flags & DidCapture) === NoFlags
+        current === null ||
+        (current.memoizedState !== null &&
+          current.memoizedState.dehydrated !== null)
       ) {
-        warnIfUnhydratedTailNodes(workInProgress);
-        resetHydrationState();
-        workInProgress.flags |= ForceClientRender | Incomplete | ShouldCapture;
-        return 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.
-        const wasHydrated = popHydrationState(workInProgress);
-        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 Flow doesn't support type casting in combination with the -= operator
-                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                }
-              }
-            }
-          }
-          return null;
-        } else {
-          // 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.
-            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 Flow doesn't support type casting in combination with the -= operator
-                  workInProgress.treeBaseDuration -= ((primaryChildFragment.treeBaseDuration: any): number);
-                }
-              }
-            }
+        const fallthroughToNormalSuspensePath = completeDehydratedSuspenseBoundary(
+          current,
+          workInProgress,
+          nextState,
+        );
+        if (!fallthroughToNormalSuspensePath) {
+          if (workInProgress.flags & ShouldCapture) {
+            // Special case. There were remaining unhydrated nodes. We treat
+            // this as a mismatch. Revert to client rendering.
+            return workInProgress;
+          } else {
+            // Did not finish hydrating, either because this is the initial
+            // render or because something suspended.
+            return null;
           }
-          return null;
         }
-      }
 
-      // 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.
-      upgradeHydrationErrorsToRecoverable();
+        // Continue with the normal Suspense path.
+      }
 
       if ((workInProgress.flags & DidCapture) !== NoFlags) {
         // Something suspended. Re-render with the fallback children.
@@ -1086,13 +1128,9 @@ function completeWork(
       }
 
       const nextDidTimeout = nextState !== null;
-      let prevDidTimeout = false;
-      if (current === null) {
-        popHydrationState(workInProgress);
-      } else {
-        const prevState: null | SuspenseState = current.memoizedState;
-        prevDidTimeout = prevState !== null;
-      }
+      const prevDidTimeout =
+        current !== null &&
+        (current.memoizedState: null | SuspenseState) !== null;
 
       if (enableCache && nextDidTimeout) {
         const offscreenFiber: Fiber = (workInProgress.child: any);

From 05c34dea91eced40d08cd72432087c1e26a4f59c Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 25 May 2022 14:10:50 -0700
Subject: [PATCH 1376/1603] [Test] Outer boundary should not report errors from
 an inner boundary (#24618)

* Test to assert that hydration errors of an inner suspended boundary are not retained by an unsuspended outer boundary

* lints
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 105fe10eef57..9a6cfd457c8d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3531,4 +3531,50 @@ describe('ReactDOMFizzServer', () => {
       console.error = originalConsoleError;
     }
   });
+
+  // @gate experimental
+  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(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error.message);
+      },
+    });
+
+    expect(Scheduler).toFlushAndYield([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A<b>B</b>
+      </div>,
+    );
+
+    resolveText('A');
+    expect(Scheduler).toFlushAndYield([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        A<b>B</b>
+      </div>,
+    );
+  });
 });

From 1328ff70cd69f02e48ec5505a1f93501b2bcaef4 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 25 May 2022 17:53:44 -0700
Subject: [PATCH 1377/1603] [DevTools] Regression-proof e2e Tests (#24620)

This PR:

* Increases test retry count to 2 so that flaky tests have more of a chance to pass
* Ideally most e2e tests will run for all React versions (and ensure DevTools elegantly fails if React doesn't support its features). However, some features aren't supported in older React versions at all (ex. Profiling) Add runOnlyForReactRange function in these cases to skip tests that don't satisfy the correct React semver range
* Fix should allow searching for component by name test, which was flaky because sometimes the Searchbox would be unfocused the second time we try to type in it
* Edited test Should allow elements to be inspected to check that element inspect gracefully fails in older React versions
* Updated config to add a config.use.url field and a config.use.react_version field, which change depending on the React Version (and whether it's specified)
---
 .../__tests__/__e2e__/components.test.js      | 86 +++++++++++++------
 .../__tests__/__e2e__/profiler.test.js        |  6 +-
 .../__tests__/__e2e__/utils.js                | 17 ++++
 .../playwright.config.js                      | 13 +++
 .../src/devtools/views/Components/KeyValue.js |  6 +-
 5 files changed, 99 insertions(+), 29 deletions(-)
 create mode 100644 packages/react-devtools-inline/__tests__/__e2e__/utils.js

diff --git a/packages/react-devtools-inline/__tests__/__e2e__/components.test.js b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
index 20a721beec6a..aaa201305b93 100644
--- a/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
+++ b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
@@ -2,10 +2,12 @@
 
 '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;
@@ -13,7 +15,7 @@ test.describe('Components', () => {
   test.beforeEach(async ({browser}) => {
     page = await browser.newPage();
 
-    await page.goto('http://localhost:8080/e2e.html', {
+    await page.goto(config.use.url, {
       waitUntil: 'domcontentloaded',
     });
 
@@ -51,32 +53,60 @@ test.describe('Components', () => {
     // Select the first list item in DevTools.
     await devToolsUtils.selectElement(page, 'ListItem', 'List\nApp');
 
+    // 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 [propName, propValue, sourceText] = await page.evaluate(() => {
-      const {createTestNameSelector, findAllNodes} = window.REACT_DOM_DEVTOOLS;
-      const container = document.getElementById('devtools');
+    const [propName, propValue, sourceText] = await page.evaluate(
+      isEditable => {
+        const {
+          createTestNameSelector,
+          findAllNodes,
+        } = window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
 
-      const editableName = findAllNodes(container, [
-        createTestNameSelector('InspectedElementPropsTree'),
-        createTestNameSelector('EditableName'),
-      ])[0];
-      const editableValue = findAllNodes(container, [
-        createTestNameSelector('InspectedElementPropsTree'),
-        createTestNameSelector('EditableValue'),
-      ])[0];
-      const source = findAllNodes(container, [
-        createTestNameSelector('InspectedElementView-Source'),
-      ])[0];
+        // Get name of first prop
+        const selectorName = isEditable.name
+          ? 'EditableName'
+          : 'NonEditableName';
+        const nameElement = findAllNodes(container, [
+          createTestNameSelector('InspectedElementPropsTree'),
+          createTestNameSelector(selectorName),
+        ])[0];
+        const name = isEditable.name
+          ? nameElement.value
+          : nameElement.innerText;
+
+        // Get value of first prop
+        const selectorValue = isEditable.value
+          ? 'EditableValue'
+          : 'NonEditableValue';
+        const valueElement = findAllNodes(container, [
+          createTestNameSelector('InspectedElementPropsTree'),
+          createTestNameSelector(selectorValue),
+        ])[0];
+        const source = findAllNodes(container, [
+          createTestNameSelector('InspectedElementView-Source'),
+        ])[0];
+        const value = isEditable.value
+          ? valueElement.value
+          : valueElement.innerText;
 
-      return [editableName.value, editableValue.value, source.innerText];
-    });
+        return [name, value, source.innerText];
+      },
+      {name: isEditableName, value: isEditableValue}
+    );
 
     expect(propName).toBe('label');
     expect(propValue).toBe('"one"');
-    expect(sourceText).toContain('ListApp.js');
+    expect(sourceText).toMatch(/ListApp[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\nApp');
 
@@ -109,6 +139,8 @@ test.describe('Components', () => {
   });
 
   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');
 
@@ -162,19 +194,23 @@ test.describe('Components', () => {
       });
     }
 
-    await page.evaluate(() => {
-      const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
-      const container = document.getElementById('devtools');
+    async function focusComponentSearch() {
+      await page.evaluate(() => {
+        const {createTestNameSelector, focusWithin} = window.REACT_DOM_DEVTOOLS;
+        const container = document.getElementById('devtools');
 
-      focusWithin(container, [
-        createTestNameSelector('ComponentSearchInput-Input'),
-      ]);
-    });
+        focusWithin(container, [
+          createTestNameSelector('ComponentSearchInput-Input'),
+        ]);
+      });
+    }
 
+    await focusComponentSearch();
     page.keyboard.insertText('List');
     let count = await getComponentSearchResultsCount();
     expect(count).toBe('1 | 4');
 
+    await focusComponentSearch();
     page.keyboard.insertText('Item');
     count = await getComponentSearchResultsCount();
     expect(count).toBe('1 | 3');
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js b/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
index 13612d4eb3ad..191c32fc7fd7 100644
--- a/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
+++ b/packages/react-devtools-inline/__tests__/__e2e__/profiler.test.js
@@ -2,6 +2,7 @@
 
 'use strict';
 
+const {runOnlyForReactRange} = require('./utils');
 const listAppUtils = require('./list-app-utils');
 const devToolsUtils = require('./devtools-utils');
 const {test, expect} = require('@playwright/test');
@@ -12,8 +13,7 @@ test.describe('Profiler', () => {
 
   test.beforeEach(async ({browser}) => {
     page = await browser.newPage();
-
-    await page.goto('http://localhost:8080/e2e.html', {
+    await page.goto(config.use.url, {
       waitUntil: 'domcontentloaded',
     });
 
@@ -23,6 +23,8 @@ test.describe('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 {
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 000000000000..5f0505b71e07
--- /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/playwright.config.js b/packages/react-devtools-inline/playwright.config.js
index 8d65b94fd486..5e0f333bf29a 100644
--- a/packages/react-devtools-inline/playwright.config.js
+++ b/packages/react-devtools-inline/playwright.config.js
@@ -1,3 +1,8 @@
+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,
@@ -7,7 +12,15 @@ const config = {
       // 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,
   },
+  // Some of our e2e tests can be flaky. Retry tests to make sure the error isn't transient
+  retries: 2,
 };
 
 module.exports = config;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index b9fcf02145b0..5e805baf1f7a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -231,7 +231,7 @@ export default function KeyValue({
     );
   } else {
     renderedName = (
-      <span className={styles.Name}>
+      <span className={styles.Name} data-testname="NonEditableName">
         {name}
         {!!hookName && <span className={styles.HookName}>({hookName})</span>}
       </span>
@@ -286,7 +286,9 @@ export default function KeyValue({
             {displayValue}
           </a>
         ) : (
-          <span className={styles.Value}>{displayValue}</span>
+          <span className={styles.Value} data-testname="NonEditableValue">
+            {displayValue}
+          </span>
         )}
       </div>
     );

From 3133dfa6ee8d1a8355c0249007176955d4b7d6b0 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 26 May 2022 08:36:00 -0700
Subject: [PATCH 1378/1603] DevTools] e2e Regression Testing App (#24619)

This PR adds an e2e regression app to the react-devtools-shell package. This app:

* Has an app.js and an appLegacy.js entrypoint because apps prior to React 18 need to use ReactDOM.render. These files will create and render multiple test apps (though they currently only render the List)
* Moved the ListApp out of the e2e folder and into an e2e-apps folder so that both e2e and e2e-regression can use the same test apps
* Creates a ListAppLegacy app because prior to React 16.8 hooks didn't exist.
* Added a devtools file for the e2e-regression
* Modifies the webpack config so that the e2e-regression React app can use different a different React version than DevTools
---
 .../react-devtools-shell/e2e-regression.html  |  40 +++
 packages/react-devtools-shell/index.html      |   1 +
 packages/react-devtools-shell/package.json    |   3 +-
 .../src/{e2e/apps => e2e-apps}/ListApp.js     |   0
 .../src/e2e-apps/ListAppLegacy.js             |  55 ++++
 .../src/e2e-regression/app-legacy.js          |  33 +++
 .../src/e2e-regression/app.js                 |  25 ++
 .../src/e2e-regression/devtools.js            |  54 ++++
 packages/react-devtools-shell/src/e2e/app.js  |   2 +-
 .../react-devtools-shell/webpack.config.js    | 235 +++++++++++-------
 10 files changed, 358 insertions(+), 90 deletions(-)
 create mode 100644 packages/react-devtools-shell/e2e-regression.html
 rename packages/react-devtools-shell/src/{e2e/apps => e2e-apps}/ListApp.js (100%)
 create mode 100644 packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
 create mode 100644 packages/react-devtools-shell/src/e2e-regression/app-legacy.js
 create mode 100644 packages/react-devtools-shell/src/e2e-regression/app.js
 create mode 100644 packages/react-devtools-shell/src/e2e-regression/devtools.js

diff --git a/packages/react-devtools-shell/e2e-regression.html b/packages/react-devtools-shell/e2e-regression.html
new file mode 100644
index 000000000000..25ecd75ffe76
--- /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/index.html b/packages/react-devtools-shell/index.html
index bc539559bbb6..81b9c2ce18cc 100644
--- a/packages/react-devtools-shell/index.html
+++ b/packages/react-devtools-shell/index.html
@@ -51,6 +51,7 @@
         <a href="/multi.html">multi DevTools</a>
         |
         <a href="/e2e.html">e2e tests</a>
+        <a href="/e2e-regression.html">e2e regression tests</a>
       </span>
     </div>
 
diff --git a/packages/react-devtools-shell/package.json b/packages/react-devtools-shell/package.json
index 15eecd46325c..03c835f01b9d 100644
--- a/packages/react-devtools-shell/package.json
+++ b/packages/react-devtools-shell/package.json
@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "immutable": "^4.0.0-rc.12",
-    "react-native-web": "0.0.0-26873b469"
+    "react-native-web": "0.0.0-26873b469",
+    "semver": "^6.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
diff --git a/packages/react-devtools-shell/src/e2e/apps/ListApp.js b/packages/react-devtools-shell/src/e2e-apps/ListApp.js
similarity index 100%
rename from packages/react-devtools-shell/src/e2e/apps/ListApp.js
rename to packages/react-devtools-shell/src/e2e-apps/ListApp.js
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 000000000000..ae18b7183a05
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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';
+
+export default function App() {
+  return <List />;
+}
+
+class List extends React.Component {
+  constructor(props) {
+    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() {
+    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>
+    );
+  }
+}
+
+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 000000000000..abb65dc36a3b
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-regression/app-legacy.js
@@ -0,0 +1,33 @@
+/** @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 {gte} from 'semver';
+import ListApp from '../e2e-apps/ListApp';
+import ListAppLegacy from '../e2e-apps/ListAppLegacy';
+const version = process.env.E2E_APP_REACT_VERSION;
+
+function mountApp(App) {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  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 000000000000..eaf0e7701437
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-regression/app.js
@@ -0,0 +1,25 @@
+/** @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 {createRoot} from 'react-dom/client';
+import ListApp from '../e2e-apps/ListApp';
+
+function mountApp(App) {
+  const container = document.createElement('div');
+
+  ((document.body: any): HTMLBodyElement).appendChild(container);
+
+  const root = createRoot(container);
+  root.render(<App />);
+}
+function mountTestApp() {
+  mountApp(ListApp);
+}
+
+mountTestApp();
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+window.parent.REACT_DOM_APP = ReactDOM;
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 000000000000..d8554eb55865
--- /dev/null
+++ b/packages/react-devtools-shell/src/e2e-regression/devtools.js
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+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.
+// $FlowFixMer
+__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, () => {
+    // $FlowFixMe Flow doesn't know about createRoot() yet.
+    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-regression.js');
+
+// ReactDOM Test Selector APIs used by Playwright e2e tests
+window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
index f9d2ba1dad5c..708b392e2efc 100644
--- a/packages/react-devtools-shell/src/e2e/app.js
+++ b/packages/react-devtools-shell/src/e2e/app.js
@@ -12,7 +12,7 @@ const container = document.createElement('div');
 
 // TODO We may want to parameterize this app
 // so that it can load things other than just ToDoList.
-const App = require('./apps/ListApp').default;
+const App = require('../e2e-apps/ListApp').default;
 
 const root = createRoot(container);
 root.render(<App />);
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 498b4387c603..fbfa0d5e19a6 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -1,5 +1,6 @@
 const {resolve} = require('path');
 const {DefinePlugin} = require('webpack');
+const fs = require('fs');
 const {
   DARK_MODE_DIMMED_WARNING_COLOR,
   DARK_MODE_DIMMED_ERROR_COLOR,
@@ -11,6 +12,12 @@ const {
   getVersionString,
 } = require('react-devtools-extensions/utils');
 const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
+const semver = require('semver');
+
+const ReactVersionSrc = fs.readFileSync(require.resolve('shared/ReactVersion'));
+const currentReactVersion = /export default '([^']+)';/.exec(
+  ReactVersionSrc,
+)[1];
 
 const NODE_ENV = process.env.NODE_ENV;
 if (!NODE_ENV) {
@@ -38,105 +45,157 @@ const __DEV__ = NODE_ENV === 'development';
 
 const DEVTOOLS_VERSION = getVersionString();
 
-const config = {
-  mode: __DEV__ ? 'development' : 'production',
-  devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
-  entry: {
+// 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) => {
+  const config = {
+    mode: __DEV__ ? 'development' : 'production',
+    devtool: __DEV__ ? 'cheap-source-map' : 'source-map',
+    entry,
+    node: {
+      // source-maps package has a dependency on 'fs'
+      // but this build won't trigger that code path
+      fs: 'empty',
+    },
+    resolve: {
+      alias,
+    },
+    optimization: {
+      minimize: false,
+    },
+    plugins: [
+      new 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.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
+        'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
+        'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
+        'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
+        'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
+        'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
+        '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]',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  };
+
+  if (TARGET === 'local') {
+    // Local dev server build.
+    config.devServer = {
+      hot: true,
+      port: 8080,
+      clientLogLevel: 'warning',
+      publicPath: '/dist/',
+      stats: 'errors-only',
+    };
+  } else {
+    // Static build to deploy somewhere else.
+    config.output = {
+      path: resolve(__dirname, 'dist'),
+      filename: '[name].js',
+    };
+  }
+  return config;
+};
+
+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',
   },
-  node: {
-    // source-maps package has a dependency on 'fs'
-    // but this build won't trigger that code path
-    fs: 'empty',
-  },
-  resolve: {
-    alias: {
-      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/client'),
-      'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
-      'react-is': resolve(builtModulesDir, 'react-is'),
-      scheduler: resolve(builtModulesDir, 'scheduler'),
-    },
+  {
+    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/client'),
+    'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+    'react-is': resolve(builtModulesDir, 'react-is'),
+    scheduler: resolve(builtModulesDir, 'scheduler'),
   },
-  optimization: {
-    minimize: false,
-  },
-  plugins: [
-    new 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.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
-      'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
-      'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
-      'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
-    }),
-  ],
-  module: {
-    rules: [
+);
+
+// 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(
       {
-        test: /\.js$/,
-        loader: 'babel-loader',
-        options: {
-          configFile: resolve(
-            __dirname,
-            '..',
-            'react-devtools-shared',
-            'babel.config.js',
-          ),
-        },
+        'e2e-app-regression': './src/e2e-regression/app-legacy.js',
       },
       {
-        test: /\.css$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              sourceMap: true,
-              modules: true,
-              localIdentName: '[local]',
-            },
-          },
-        ],
+        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')}),
       },
-    ],
-  },
-};
-
-if (TARGET === 'local') {
-  // Local dev server build.
-  config.devServer = {
-    hot: true,
-    port: 8080,
-    clientLogLevel: 'warning',
-    publicPath: '/dist/',
-    stats: 'errors-only',
-  };
-} else {
-  // Static build to deploy somewhere else.
-  config.output = {
-    path: resolve(__dirname, 'dist'),
-    filename: '[name].js',
-  };
-}
+    )
+  : 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'),
+        scheduler: resolve(E2E_APP_BUILD_DIR, 'scheduler'),
+      },
+    );
 
-module.exports = config;
+module.exports = [app, e2eRegressionApp];

From 1bed20731fa2789c46d7bff89cd44c3ea9d51abf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 27 May 2022 16:16:24 -0400
Subject: [PATCH 1379/1603] Add a module map option to the Webpack Flight
 Client (#24629)

On the server we have a similar translation map from the file path that the
loader uses to the refer to the original module and to the bundled module ID.

The Flight server is optimized to emit the smallest format for the client.
However during SSR, the same client component might go by a different
module ID since it's a different bundle than the client bundle.

This provides an option to add a translation map from client ID to SSR ID
when reading the Flight stream.

Ideally we should have a special SSR Flight Client that takes this option
but for now we only have one Client for both.
---
 .../react-client/src/ReactFlightClient.js     | 10 +++-
 .../src/ReactFlightClientStream.js            |  6 +-
 .../ReactFlightClientHostConfig.custom.js     |  1 +
 .../src/ReactNoopFlightClient.js              |  4 +-
 .../ReactFlightDOMRelayClientHostConfig.js    | 14 ++++-
 .../ReactFlightDOMRelay-test.internal.js      |  2 +-
 .../ReactFlightClientWebpackBundlerConfig.js  | 12 ++++
 .../src/ReactFlightDOMClient.js               | 29 +++++++--
 .../__tests__/ReactFlightDOMBrowser-test.js   | 59 +++++++++++++++++++
 .../ReactFlightNativeRelayClientHostConfig.js | 14 ++++-
 10 files changed, 137 insertions(+), 14 deletions(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index dabb215c708f..13fb0897e747 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -15,6 +15,7 @@ import type {
   ModuleMetaData,
   UninitializedModel,
   Response,
+  BundlerConfig,
 } from './ReactFlightClientHostConfig';
 
 import {
@@ -97,6 +98,7 @@ Chunk.prototype.then = function<T>(resolve: () => mixed) {
 };
 
 export type ResponseBase = {
+  _bundlerConfig: BundlerConfig,
   _chunks: Map<number, SomeChunk<any>>,
   readRoot<T>(): T,
   ...
@@ -338,9 +340,10 @@ export function parseModelTuple(
   return value;
 }
 
-export function createResponse(): ResponseBase {
+export function createResponse(bundlerConfig: BundlerConfig): ResponseBase {
   const chunks: Map<number, SomeChunk<any>> = new Map();
   const response = {
+    _bundlerConfig: bundlerConfig,
     _chunks: chunks,
     readRoot: readRoot,
   };
@@ -384,7 +387,10 @@ export function resolveModule(
   const chunks = response._chunks;
   const chunk = chunks.get(id);
   const moduleMetaData: ModuleMetaData = parseModel(response, model);
-  const moduleReference = resolveModuleReference(moduleMetaData);
+  const moduleReference = resolveModuleReference(
+    response._bundlerConfig,
+    moduleMetaData,
+  );
 
   // 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
diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js
index 8af1734de6b7..ed27a10f6e33 100644
--- a/packages/react-client/src/ReactFlightClientStream.js
+++ b/packages/react-client/src/ReactFlightClientStream.js
@@ -9,6 +9,8 @@
 
 import type {Response} from './ReactFlightClientHostConfigStream';
 
+import type {BundlerConfig} from './ReactFlightClientHostConfig';
+
 import {
   resolveModule,
   resolveModel,
@@ -121,11 +123,11 @@ function createFromJSONCallback(response: Response) {
   };
 }
 
-export function createResponse(): Response {
+export function createResponse(bundlerConfig: BundlerConfig): Response {
   // NOTE: CHECK THE COMPILER OUTPUT EACH TIME YOU CHANGE THIS.
   // It should be inlined to one object literal but minor changes can break it.
   const stringDecoder = supportsBinaryStreams ? createStringDecoder() : null;
-  const response: any = createResponseBase();
+  const response: any = createResponseBase(bundlerConfig);
   response._partialRow = '';
   if (supportsBinaryStreams) {
     response._stringDecoder = stringDecoder;
diff --git a/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js b/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js
index 5f0b9d2c7114..829e5e65e999 100644
--- a/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js
+++ b/packages/react-client/src/forks/ReactFlightClientHostConfig.custom.js
@@ -26,6 +26,7 @@
 declare var $$$hostConfig: any;
 
 export type Response = any;
+export opaque type BundlerConfig = mixed; // eslint-disable-line no-undef
 export opaque type ModuleMetaData = mixed; // eslint-disable-line no-undef
 export opaque type ModuleReference<T> = mixed; // eslint-disable-line no-undef
 export const resolveModuleReference = $$$hostConfig.resolveModuleReference;
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightClient.js b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
index df586c6efb2c..52af83c5ef62 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightClient.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
@@ -22,7 +22,7 @@ type Source = Array<string>;
 
 const {createResponse, processStringChunk, close} = ReactFlightClient({
   supportsBinaryStreams: false,
-  resolveModuleReference(idx: string) {
+  resolveModuleReference(bundlerConfig: null, idx: string) {
     return idx;
   },
   preloadModule(idx: string) {},
@@ -35,7 +35,7 @@ const {createResponse, processStringChunk, close} = ReactFlightClient({
 });
 
 function read<T>(source: Source): T {
-  const response = createResponse(source);
+  const response = createResponse(source, null);
   for (let i = 0; i < source.length; i++) {
     processStringChunk(response, source[i], 0);
   }
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
index 30718865ccda..308bbef0ed23 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -11,6 +11,8 @@ import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
 
 import type {JSResourceReference} from 'JSResourceReference';
 
+import type {ModuleMetaData} from 'ReactFlightDOMRelayClientIntegration';
+
 export type ModuleReference<T> = JSResourceReference<T>;
 
 import {
@@ -19,19 +21,29 @@ import {
 } from 'react-client/src/ReactFlightClient';
 
 export {
-  resolveModuleReference,
   preloadModule,
   requireModule,
 } from 'ReactFlightDOMRelayClientIntegration';
 
+import {resolveModuleReference as resolveModuleReferenceImpl} from 'ReactFlightDOMRelayClientIntegration';
+
 import isArray from 'shared/isArray';
 
 export type {ModuleMetaData} from 'ReactFlightDOMRelayClientIntegration';
 
+export type BundlerConfig = null;
+
 export type UninitializedModel = JSONValue;
 
 export type Response = ResponseBase;
 
+export function resolveModuleReference<T>(
+  bundlerConfig: BundlerConfig,
+  moduleData: ModuleMetaData,
+): ModuleReference<T> {
+  return resolveModuleReferenceImpl(moduleData);
+}
+
 function parseModelRecursively(response: Response, parentObj, value) {
   if (typeof value === 'string') {
     return parseModelString(response, parentObj, value);
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index daf01d5d69be..0444add03790 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -31,7 +31,7 @@ describe('ReactFlightDOMRelay', () => {
   });
 
   function readThrough(data) {
-    const response = ReactDOMFlightRelayClient.createResponse();
+    const response = ReactDOMFlightRelayClient.createResponse(null);
     for (let i = 0; i < data.length; i++) {
       const chunk = data[i];
       ReactDOMFlightRelayClient.resolveRow(response, chunk);
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index f3c4e1bf1c16..d36642532f56 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -7,6 +7,14 @@
  * @flow
  */
 
+export type WebpackSSRMap = {
+  [clientId: string]: {
+    [clientExportName: string]: ModuleMetaData,
+  },
+};
+
+export type BundlerConfig = null | WebpackSSRMap;
+
 export opaque type ModuleMetaData = {
   id: string,
   chunks: Array<string>,
@@ -17,8 +25,12 @@ export opaque type ModuleMetaData = {
 export opaque type ModuleReference<T> = ModuleMetaData;
 
 export function resolveModuleReference<T>(
+  bundlerConfig: BundlerConfig,
   moduleData: ModuleMetaData,
 ): ModuleReference<T> {
+  if (bundlerConfig) {
+    return bundlerConfig[moduleData.id][moduleData.name];
+  }
   return moduleData;
 }
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
index 9c9d17c11f53..d8b5def41e04 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
@@ -9,6 +9,8 @@
 
 import type {Response as FlightResponse} from 'react-client/src/ReactFlightClientStream';
 
+import type {BundlerConfig} from './ReactFlightClientWebpackBundlerConfig';
+
 import {
   createResponse,
   reportGlobalError,
@@ -17,6 +19,10 @@ import {
   close,
 } from 'react-client/src/ReactFlightClientStream';
 
+export type Options = {
+  moduleMap?: BundlerConfig,
+};
+
 function startReadingFromStream(
   response: FlightResponse,
   stream: ReadableStream,
@@ -37,16 +43,24 @@ function startReadingFromStream(
   reader.read().then(progress, error);
 }
 
-function createFromReadableStream(stream: ReadableStream): FlightResponse {
-  const response: FlightResponse = createResponse();
+function createFromReadableStream(
+  stream: ReadableStream,
+  options?: Options,
+): FlightResponse {
+  const response: FlightResponse = createResponse(
+    options && options.moduleMap ? options.moduleMap : null,
+  );
   startReadingFromStream(response, stream);
   return response;
 }
 
 function createFromFetch(
   promiseForResponse: Promise<Response>,
+  options?: Options,
 ): FlightResponse {
-  const response: FlightResponse = createResponse();
+  const response: FlightResponse = createResponse(
+    options && options.moduleMap ? options.moduleMap : null,
+  );
   promiseForResponse.then(
     function(r) {
       startReadingFromStream(response, (r.body: any));
@@ -58,8 +72,13 @@ function createFromFetch(
   return response;
 }
 
-function createFromXHR(request: XMLHttpRequest): FlightResponse {
-  const response: FlightResponse = createResponse();
+function createFromXHR(
+  request: XMLHttpRequest,
+  options?: Options,
+): FlightResponse {
+  const response: FlightResponse = createResponse(
+    options && options.moduleMap ? options.moduleMap : null,
+  );
   let processedLength = 0;
   function progress(e: ProgressEvent): void {
     const chunk = request.responseText;
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index c7b97707c166..3337b19d11fc 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -24,6 +24,7 @@ global.__webpack_require__ = function(id) {
 let act;
 let React;
 let ReactDOMClient;
+let ReactDOMServer;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 
@@ -35,6 +36,7 @@ describe('ReactFlightDOMBrowser', () => {
     act = require('jest-react').act;
     React = require('react');
     ReactDOMClient = require('react-dom/client');
+    ReactDOMServer = require('react-dom/server.browser');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
   });
@@ -69,6 +71,18 @@ describe('ReactFlightDOMBrowser', () => {
     }
   }
 
+  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 makeDelayedText(Model) {
     let error, _resolve, _reject;
     let promise = new Promise((resolve, reject) => {
@@ -453,4 +467,49 @@ describe('ReactFlightDOMBrowser', () => {
     // Final pending chunk is written; stream should be closed.
     expect(isDone).toBeTruthy();
   });
+
+  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 = moduleReference(ClientComponent);
+    const ClientComponentOnTheServer = moduleReference(ClientComponent);
+
+    // In the SSR bundle this module won't exist. We simulate this by deleting it.
+    const clientId = webpackMap[ClientComponentOnTheClient.filepath].default.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.filepath].default;
+    const translationMap = {
+      [clientId]: {
+        d: ssrMetaData,
+      },
+    };
+
+    function App() {
+      return <ClientComponentOnTheClient />;
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(
+      <App />,
+      webpackMap,
+    );
+    const response = ReactServerDOMReader.createFromReadableStream(stream, {
+      moduleMap: translationMap,
+    });
+
+    function ClientRoot() {
+      return response.readRoot();
+    }
+
+    const ssrStream = await ReactDOMServer.renderToReadableStream(
+      <ClientRoot />,
+    );
+    const result = await readResult(ssrStream);
+    expect(result).toEqual('<span>Client Component</span>');
+  });
 });
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
index eb6f0080e371..83ab8800d459 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
@@ -11,6 +11,8 @@ import type {JSONValue, ResponseBase} from 'react-client/src/ReactFlightClient';
 
 import type {JSResourceReference} from 'JSResourceReference';
 
+import type {ModuleMetaData} from 'ReactFlightNativeRelayClientIntegration';
+
 export type ModuleReference<T> = JSResourceReference<T>;
 
 import {
@@ -19,19 +21,29 @@ import {
 } from 'react-client/src/ReactFlightClient';
 
 export {
-  resolveModuleReference,
   preloadModule,
   requireModule,
 } from 'ReactFlightNativeRelayClientIntegration';
 
+import {resolveModuleReference as resolveModuleReferenceImpl} from 'ReactFlightNativeRelayClientIntegration';
+
 import isArray from 'shared/isArray';
 
 export type {ModuleMetaData} from 'ReactFlightNativeRelayClientIntegration';
 
+export type BundlerConfig = null;
+
 export type UninitializedModel = JSONValue;
 
 export type Response = ResponseBase;
 
+export function resolveModuleReference<T>(
+  bundlerConfig: BundlerConfig,
+  moduleData: ModuleMetaData,
+): ModuleReference<T> {
+  return resolveModuleReferenceImpl(moduleData);
+}
+
 function parseModelRecursively(response: Response, parentObj, value) {
   if (typeof value === 'string') {
     return parseModelString(response, parentObj, value);

From f7860538a6e48e61be34f4ba1dfb3f2713820742 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?=
 <francoischalifour@users.noreply.github.com>
Date: Fri, 27 May 2022 23:16:51 +0200
Subject: [PATCH 1380/1603] Fix typo in useSyncExternalStore main entry point
 error (#24631)

---
 packages/use-sync-external-store/src/useSyncExternalStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/use-sync-external-store/src/useSyncExternalStore.js b/packages/use-sync-external-store/src/useSyncExternalStore.js
index f1bb95556d2b..b8abd5b6857f 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStore.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStore.js
@@ -22,7 +22,7 @@ if (__DEV__) {
       '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" +
+      "'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'.",

From a2766387efe68b318b23d8c35c70b850d1e6a250 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Sat, 28 May 2022 08:30:38 -0700
Subject: [PATCH 1381/1603] [Fizz] Improve text separator byte efficiency
 (#24630)

* [Fizz] Improve text separator byte efficiency

Previously text separators were inserted following any Text node in Fizz. This increases bytes sent when streaming and in some cases such as title elements these separators are not interpreted as comment nodes and leak into the visual aspects of a page as escaped text.

The reason simple tracking on the last pushed type doesn't work is that Segments can be filled in asynchronously later and so you cannot know in a single pass whether the preceding content was a text node or not. This commit adds a concept of TextEmbedding which provides a best effort signal to Segments on whether they are embedded within text. This allows the later resolution of that Segment to add text separators when possibly necessary but avoid them when they are surely not.

The current implementation can only "peek" head if the segment is a the Root Segment or a Suspense Boundary Segment. In these cases we know there is no trailing text embedding and we can eliminate the separator at the end of the segment if the last emitted element was Text. In normal Segments we cannot peek and thus have to assume there might be a trailing text embedding and we issue a separator defensively. This should be rare in practice as it is assumed most components that will cause segment creation will also emit some markup at the edges.

* [Fizz] Improve separator efficiency when flushing delayed segments

The method by which we get segment markup into the DOM differs depending on when the Segment resolves.

If a Segment resolves before flushing begins for it's parent it will be emitted inline with the parent markup. In these cases separators may be necessary because they are how we clue the browser into breakup up text into distinct nodes that will later match up with what will be hydrated on the client.

If a Segment resolves after flushing has happened a script will be used to patch up the DOM in the client. when this happens if there are any text nodes on the boundary of the patch they won't be "merged" and thus will continue to have distinct representation as Nodes in the DOM. Thus we can avoid doing any separators at the boundaries in these cases.

After applying these changes the only time you will get text separators as follows

* in between serial text nodes that emit at the same time - these are necessary and cannot be eliminated unless we stop relying on the browser to automatically parse the correct text nodes when processing this HTML
* after a final text node in a non-boundary segment that resolves before it's parent has flushed - these are sometimes extraneous, like when the next emitted thing is a non-Text node.

In all other cases text separators should be omitted which means the general byte efficiency of this approach should be pretty good
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 422 ++++++++++++++++++
 .../ReactDOMServerIntegrationElements-test.js |  57 ++-
 .../src/__tests__/ReactDOMUseId-test.js       |   2 -
 .../ReactDOMLegacyServerStreamConfig.js       |  11 -
 .../src/server/ReactDOMServerFormatConfig.js  |  25 +-
 .../ReactDOMServerLegacyFormatConfig.js       |  25 +-
 .../server/ReactNativeServerFormatConfig.js   |  13 +-
 .../src/ReactNoopServer.js                    |  16 +-
 .../ReactDOMServerFB-test.internal.js         |   4 +-
 packages/react-server/src/ReactFizzServer.js  |  62 ++-
 .../forks/ReactServerFormatConfig.custom.js   |   1 +
 11 files changed, 579 insertions(+), 59 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 9a6cfd457c8d..56ae7c8a0965 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -234,6 +234,11 @@ describe('ReactDOMFizzServer', () => {
     return readText(text);
   }
 
+  function AsyncTextWrapped({as, text}) {
+    const As = as;
+    return <As>{readText(text)}</As>;
+  }
+
   // @gate experimental
   it('should asynchronously load a lazy component', async () => {
     let resolveA;
@@ -3577,4 +3582,421 @@ describe('ReactDOMFizzServer', () => {
       </div>,
     );
   });
+
+  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);
+      });
+    }
+
+    // @gate experimental
+    it('it only includes separators between adjacent text nodes', async () => {
+      function App({name}) {
+        return (
+          <div>
+            hello<b>world, {name}</b>!
+          </div>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+          <App name="Foo" />,
+        );
+        pipe(writable);
+      });
+
+      expect(container.innerHTML).toEqual(
+        '<div>hello<b>world, <!-- -->Foo</b>!</div>',
+      );
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          hello<b>world, {'Foo'}</b>!
+        </div>,
+      );
+    });
+
+    // @gate experimental
+    it('it does not insert text separators even when adjacent text is in a delayed segment', async () => {
+      function App({name}) {
+        return (
+          <Suspense fallback={'loading...'}>
+            <div id="app-div">
+              hello
+              <b>
+                world, <AsyncText text={name} />
+              </b>
+              !
+            </div>
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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'));
+
+      expect(container.firstElementChild.outerHTML).toEqual(
+        '<div id="app-div">hello<b>world, Foo</b>!</div>',
+      );
+      // there are extra script nodes at the end of container
+      expect(container.childNodes.length).toBe(5);
+      const div = container.childNodes[1];
+      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);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div id="app-div">
+          hello<b>world, {'Foo'}</b>!
+        </div>,
+      );
+    });
+
+    // @gate experimental
+    it('it works with multiple adjacent segments', async () => {
+      function App() {
+        return (
+          <Suspense fallback={'loading...'}>
+            <div id="app-div">
+              h<AsyncText text={'ello'} />
+              w<AsyncText text={'orld'} />
+            </div>
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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(container.firstElementChild.outerHTML).toEqual(
+        '<div id="app-div">helloworld</div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div id="app-div">{['h', 'ello', 'w', 'orld']}</div>,
+      );
+    });
+
+    // @gate experimental
+    it('it works when some segments are flushed and others are patched', async () => {
+      function App() {
+        return (
+          <Suspense fallback={'loading...'}>
+            <div id="app-div">
+              h<AsyncText text={'ello'} />
+              w<AsyncText text={'orld'} />
+            </div>
+          </Suspense>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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(container.firstElementChild.outerHTML).toEqual(
+        '<div id="app-div">h<!-- -->ello<!-- -->world</div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div id="app-div">{['h', 'ello', 'w', 'orld']}</div>,
+      );
+    });
+
+    // @gate experimental
+    it('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} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('world'));
+        pipe(writable);
+      });
+
+      expect(container.firstElementChild.outerHTML).toEqual(
+        '<div>hello<b>world<!-- --></b></div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          hello<b>world</b>
+        </div>,
+      );
+    });
+
+    // @gate experimental
+    it('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} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('world'));
+        pipe(writable);
+      });
+
+      expect(container.firstElementChild.outerHTML).toEqual(
+        '<div>hello<b>world</b></div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div>
+          hello<b>world</b>
+        </div>,
+      );
+    });
+
+    // @gate experimental
+    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} = ReactDOMFizzServer.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(async () => {
+        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);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div id="app-div">
+          {'start'}
+          {'firststart'}
+          {'first suspended'}
+          {'firstend'}
+          {'[loading second]'}
+          {'end'}
+        </div>,
+      );
+
+      await act(async () => {
+        resolveText('second suspended');
+      });
+
+      expect(container.firstElementChild.outerHTML).toEqual(
+        '<div id="app-div">start<!--$-->firststartfirst suspendedfirstend<!--/$--><!--$-->secondstart<b>second suspended</b><!--/$-->end</div>',
+      );
+
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(
+        <div id="app-div">
+          {'start'}
+          {'firststart'}
+          {'first suspended'}
+          {'firstend'}
+          {'secondstart'}
+          <b>second suspended</b>
+          {'end'}
+        </div>,
+      );
+    });
+
+    // @gate experimental
+    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} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        await afterImmediate();
+        await act(() => resolveText('world'));
+        pipe(writable);
+      });
+
+      expect(container.innerHTML).toEqual(
+        '<div><!--$-->hello<!-- -->world<!-- --><!--/$--><!--$-->world<!-- --><!--/$--><!--$-->hello<!-- -->world<!-- --><br><!--/$--><!--$-->world<!-- --><br><!--/$--></div>',
+      );
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      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>,
+      );
+    });
+  });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
index 6a777f3f4325..0dcfbbd78c8a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationElements-test.js
@@ -101,7 +101,7 @@ describe('ReactDOMServerIntegration', () => {
         ) {
           // For plain server markup result we have comments between.
           // If we're able to hydrate, they remain.
-          expect(e.childNodes.length).toBe(render === streamRender ? 6 : 5);
+          expect(e.childNodes.length).toBe(5);
           expectTextNode(e.childNodes[0], ' ');
           expectTextNode(e.childNodes[2], ' ');
           expectTextNode(e.childNodes[4], ' ');
@@ -119,8 +119,8 @@ describe('ReactDOMServerIntegration', () => {
             Text<span>More Text</span>
           </div>,
         );
-        expect(e.childNodes.length).toBe(render === streamRender ? 3 : 2);
-        const spanNode = e.childNodes[render === streamRender ? 2 : 1];
+        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);
@@ -147,19 +147,19 @@ describe('ReactDOMServerIntegration', () => {
       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(render === streamRender ? 2 : 1);
+        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(render === streamRender ? 2 : 1);
+        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(render === streamRender ? 2 : 1);
+        expect(e.childNodes.length).toBe(1);
         expectTextNode(e.childNodes[0], 'foo');
       });
 
@@ -176,7 +176,7 @@ describe('ReactDOMServerIntegration', () => {
           render === streamRender
         ) {
           // In the server render output there's a comment between them.
-          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
+          expect(e.childNodes.length).toBe(3);
           expectTextNode(e.childNodes[0], 'foo');
           expectTextNode(e.childNodes[2], 'bar');
         } else {
@@ -203,7 +203,7 @@ describe('ReactDOMServerIntegration', () => {
             render === streamRender
           ) {
             // In the server render output there's a comment between them.
-            expect(e.childNodes.length).toBe(render === streamRender ? 6 : 5);
+            expect(e.childNodes.length).toBe(5);
             expectTextNode(e.childNodes[0], 'a');
             expectTextNode(e.childNodes[2], 'b');
             expectTextNode(e.childNodes[4], 'c');
@@ -240,7 +240,11 @@ describe('ReactDOMServerIntegration', () => {
             e
           </div>,
         );
-        if (render === serverRender || render === clientRenderOnServerString) {
+        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');
@@ -249,15 +253,6 @@ describe('ReactDOMServerIntegration', () => {
           expectTextNode(e.childNodes[3].childNodes[0], 'c');
           expectTextNode(e.childNodes[3].childNodes[2], 'd');
           expectTextNode(e.childNodes[4], 'e');
-        } else if (render === streamRender) {
-          // In the server render output there's comments after each text node.
-          expect(e.childNodes.length).toBe(7);
-          expectTextNode(e.childNodes[0], 'a');
-          expectTextNode(e.childNodes[2], 'b');
-          expect(e.childNodes[4].childNodes.length).toBe(4);
-          expectTextNode(e.childNodes[4].childNodes[0], 'c');
-          expectTextNode(e.childNodes[4].childNodes[2], 'd');
-          expectTextNode(e.childNodes[5], 'e');
         } else {
           expect(e.childNodes.length).toBe(4);
           expectTextNode(e.childNodes[0], 'a');
@@ -296,7 +291,7 @@ describe('ReactDOMServerIntegration', () => {
           render === streamRender
         ) {
           // In the server markup there's a comment between.
-          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
+          expect(e.childNodes.length).toBe(3);
           expectTextNode(e.childNodes[0], 'foo');
           expectTextNode(e.childNodes[2], '40');
         } else {
@@ -335,13 +330,13 @@ describe('ReactDOMServerIntegration', () => {
 
       itRenders('null children as blank', async render => {
         const e = await render(<div>{null}foo</div>);
-        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 1);
+        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(render === streamRender ? 2 : 1);
+        expect(e.childNodes.length).toBe(1);
         expectTextNode(e.childNodes[0], 'foo');
       });
 
@@ -353,7 +348,7 @@ describe('ReactDOMServerIntegration', () => {
             {false}
           </div>,
         );
-        expect(e.childNodes.length).toBe(render === streamRender ? 2 : 1);
+        expect(e.childNodes.length).toBe(1);
         expectTextNode(e.childNodes[0], 'foo');
       });
 
@@ -740,10 +735,10 @@ describe('ReactDOMServerIntegration', () => {
             </div>,
           );
           expect(e.id).toBe('parent');
-          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
+          expect(e.childNodes.length).toBe(3);
           const child1 = e.childNodes[0];
           const textNode = e.childNodes[1];
-          const child2 = e.childNodes[render === streamRender ? 3 : 2];
+          const child2 = e.childNodes[2];
           expect(child1.id).toBe('child1');
           expect(child1.childNodes.length).toBe(0);
           expectTextNode(textNode, ' ');
@@ -757,10 +752,10 @@ describe('ReactDOMServerIntegration', () => {
         async render => {
           // prettier-ignore
           const e = await render(<div id="parent">  <div id="child" />   </div>); // eslint-disable-line no-multi-spaces
-          expect(e.childNodes.length).toBe(render === streamRender ? 5 : 3);
+          expect(e.childNodes.length).toBe(3);
           const textNode1 = e.childNodes[0];
-          const child = e.childNodes[render === streamRender ? 2 : 1];
-          const textNode2 = e.childNodes[render === streamRender ? 3 : 2];
+          const child = e.childNodes[1];
+          const textNode2 = e.childNodes[2];
           expect(e.id).toBe('parent');
           expectTextNode(textNode1, '  ');
           expect(child.id).toBe('child');
@@ -783,9 +778,7 @@ describe('ReactDOMServerIntegration', () => {
         ) {
           // For plain server markup result we have comments between.
           // If we're able to hydrate, they remain.
-          expect(parent.childNodes.length).toBe(
-            render === streamRender ? 6 : 5,
-          );
+          expect(parent.childNodes.length).toBe(5);
           expectTextNode(parent.childNodes[0], 'a');
           expectTextNode(parent.childNodes[2], 'b');
           expectTextNode(parent.childNodes[4], 'c');
@@ -817,7 +810,7 @@ describe('ReactDOMServerIntegration', () => {
           render === clientRenderOnServerString ||
           render === streamRender
         ) {
-          expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
+          expect(e.childNodes.length).toBe(3);
           expectTextNode(e.childNodes[0], '<span>Text1&quot;</span>');
           expectTextNode(e.childNodes[2], '<span>Text2&quot;</span>');
         } else {
@@ -868,7 +861,7 @@ describe('ReactDOMServerIntegration', () => {
           );
           if (render === serverRender || render === streamRender) {
             // We have three nodes because there is a comment between them.
-            expect(e.childNodes.length).toBe(render === streamRender ? 4 : 3);
+            expect(e.childNodes.length).toBe(3);
             // Everything becomes LF when parsed from server HTML.
             // Null character is ignored.
             expectNode(e.childNodes[0], TEXT_NODE_TYPE, 'foo\nbar');
diff --git a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
index 4148eeaa2e64..53d972119081 100644
--- a/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMUseId-test.js
@@ -343,7 +343,6 @@ describe('useId', () => {
         id="container"
       >
         :R0:, :R0H1:, :R0H2:
-        <!-- -->
       </div>
     `);
   });
@@ -369,7 +368,6 @@ describe('useId', () => {
         id="container"
       >
         :R0:
-        <!-- -->
       </div>
     `);
   });
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js b/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
index 55418357f447..6f471a5552a5 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerStreamConfig.js
@@ -24,7 +24,6 @@ export function flushBuffered(destination: Destination) {}
 
 export function beginWriting(destination: Destination) {}
 
-let prevWasCommentSegmenter = false;
 export function writeChunk(
   destination: Destination,
   chunk: Chunk | PrecomputedChunk,
@@ -36,16 +35,6 @@ export function writeChunkAndReturn(
   destination: Destination,
   chunk: Chunk | PrecomputedChunk,
 ): boolean {
-  if (prevWasCommentSegmenter) {
-    prevWasCommentSegmenter = false;
-    if (chunk[0] !== '<') {
-      destination.push('<!-- -->');
-    }
-  }
-  if (chunk === '<!-- -->') {
-    prevWasCommentSegmenter = true;
-    return true;
-  }
   return destination.push(chunk);
 }
 
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index c8d6d35ceb6b..06fda6a65709 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -284,13 +284,30 @@ export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-): void {
+  textEmbedded: boolean,
+): boolean {
   if (text === '') {
     // Empty text doesn't have a DOM node representation and the hydration is aware of this.
-    return;
+    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>,
+  responseState: ResponseState,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+): void {
+  if (lastPushedText && textEmbedded) {
+    target.push(textSeparator);
   }
-  // TODO: Avoid adding a text separator in common cases.
-  target.push(stringToChunk(encodeHTMLTextNode(text)), textSeparator);
 }
 
 const styleNameCache: Map<string, PrecomputedChunk> = new Map();
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index c3d09f481fb6..9d430f7b482c 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -12,6 +12,7 @@ import type {FormatContext} from './ReactDOMServerFormatConfig';
 import {
   createResponseState as createResponseStateImpl,
   pushTextInstance as pushTextInstanceImpl,
+  pushSegmentFinale as pushSegmentFinaleImpl,
   writeStartCompletedSuspenseBoundary as writeStartCompletedSuspenseBoundaryImpl,
   writeStartClientRenderedSuspenseBoundary as writeStartClientRenderedSuspenseBoundaryImpl,
   writeEndCompletedSuspenseBoundary as writeEndCompletedSuspenseBoundaryImpl,
@@ -105,11 +106,31 @@ export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-): void {
+  textEmbedded: boolean,
+): boolean {
   if (responseState.generateStaticMarkup) {
     target.push(stringToChunk(escapeTextForBrowser(text)));
+    return false;
+  } else {
+    return pushTextInstanceImpl(target, text, responseState, textEmbedded);
+  }
+}
+
+export function pushSegmentFinale(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+): void {
+  if (responseState.generateStaticMarkup) {
+    return;
   } else {
-    pushTextInstanceImpl(target, text, responseState);
+    return pushSegmentFinaleImpl(
+      target,
+      responseState,
+      lastPushedText,
+      textEmbedded,
+    );
   }
 }
 
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index e2b555720163..470fed5ce6d0 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -122,7 +122,9 @@ export function pushTextInstance(
   target: Array<Chunk | PrecomputedChunk>,
   text: string,
   responseState: ResponseState,
-): void {
+  // This Renderer does not use this argument
+  textEmbedded: boolean,
+): boolean {
   target.push(
     INSTANCE,
     RAW_TEXT, // Type
@@ -130,6 +132,7 @@ export function pushTextInstance(
     // TODO: props { text: text }
     END, // End of children
   );
+  return false;
 }
 
 export function pushStartInstance(
@@ -156,6 +159,14 @@ export function pushEndInstance(
   target.push(END);
 }
 
+// In this Renderer this is a noop
+export function pushSegmentFinale(
+  target: Array<Chunk | PrecomputedChunk>,
+  responseState: ResponseState,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
+): void {}
+
 export function writeCompletedRoot(
   destination: Destination,
   responseState: ResponseState,
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 5bd7e79cf724..8cbd0c84dba7 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -98,12 +98,18 @@ const ReactNoopServer = ReactFizzServer({
     return null;
   },
 
-  pushTextInstance(target: Array<Uint8Array>, text: string): void {
+  pushTextInstance(
+    target: Array<Uint8Array>,
+    text: string,
+    responseState: ResponseState,
+    textEmbedded: boolean,
+  ): boolean {
     const textInstance: TextInstance = {
       text,
       hidden: false,
     };
     target.push(Buffer.from(JSON.stringify(textInstance), 'utf8'), POP);
+    return false;
   },
   pushStartInstance(
     target: Array<Uint8Array>,
@@ -128,6 +134,14 @@ const ReactNoopServer = ReactFizzServer({
     target.push(POP);
   },
 
+  // This is a noop in ReactNoop
+  pushSegmentFinale(
+    target: Array<Uint8Array>,
+    responseState: ResponseState,
+    lastPushedText: boolean,
+    textEmbedded: boolean,
+  ): void {},
+
   writeCompletedRoot(
     destination: Destination,
     responseState: ResponseState,
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index 7444ae6f9093..8c7c6844ab96 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -93,9 +93,7 @@ describe('ReactDOMServerFB', () => {
     await jest.runAllTimers();
 
     const result = readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
-    );
+    expect(result).toMatchInlineSnapshot(`"<div><!--$-->Done<!--/$--></div>"`);
   });
 
   it('should throw an error when an error is thrown at the root', () => {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index d206a69e48c3..5b0a3de560a6 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -56,6 +56,7 @@ import {
   pushEndInstance,
   pushStartCompletedSuspenseBoundary,
   pushEndCompletedSuspenseBoundary,
+  pushSegmentFinale,
   UNINITIALIZED_SUSPENSE_BOUNDARY_ID,
   assignSuspenseBoundaryID,
   getChildFormatContext,
@@ -169,6 +170,9 @@ type Segment = {
   formatContext: 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 OPEN = 0;
@@ -267,7 +271,15 @@ export function createRequest(
     onFatalError: onFatalError === undefined ? noop : onFatalError,
   };
   // This segment represents the root fallback.
-  const rootSegment = createPendingSegment(request, 0, null, rootFormatContext);
+  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 = createTask(
@@ -346,6 +358,8 @@ function createPendingSegment(
   index: number,
   boundary: null | SuspenseBoundary,
   formatContext: FormatContext,
+  lastPushedText: boolean,
+  textEmbedded: boolean,
 ): Segment {
   return {
     status: PENDING,
@@ -356,6 +370,8 @@ function createPendingSegment(
     children: [],
     formatContext,
     boundary,
+    lastPushedText,
+    textEmbedded,
   };
 }
 
@@ -459,8 +475,13 @@ function renderSuspenseBoundary(
     insertionIndex,
     newBoundary,
     parentSegment.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(
@@ -468,6 +489,9 @@ function renderSuspenseBoundary(
     0,
     null,
     parentSegment.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.
@@ -486,6 +510,12 @@ function renderSuspenseBoundary(
   try {
     // We use the safe form because we don't handle suspending here. Only error handling.
     renderNode(request, task, content);
+    pushSegmentFinale(
+      contentRootSegment.chunks,
+      request.responseState,
+      contentRootSegment.lastPushedText,
+      contentRootSegment.textEmbedded,
+    );
     contentRootSegment.status = COMPLETED;
     queueCompletedSegment(newBoundary, contentRootSegment);
     if (newBoundary.pendingTasks === 0) {
@@ -561,15 +591,18 @@ function renderHostElement(
     request.responseState,
     segment.formatContext,
   );
+  segment.lastPushedText = false;
   const prevContext = segment.formatContext;
   segment.formatContext = getChildFormatContext(prevContext, type, props);
   // 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);
+
   // 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.
   segment.formatContext = prevContext;
   pushEndInstance(segment.chunks, type, props);
+  segment.lastPushedText = false;
   popComponentStackInDEV(task);
 }
 
@@ -1216,15 +1249,23 @@ function renderNodeDestructive(
   }
 
   if (typeof node === 'string') {
-    pushTextInstance(task.blockedSegment.chunks, node, request.responseState);
+    const segment = task.blockedSegment;
+    segment.lastPushedText = pushTextInstance(
+      task.blockedSegment.chunks,
+      node,
+      request.responseState,
+      segment.lastPushedText,
+    );
     return;
   }
 
   if (typeof node === 'number') {
-    pushTextInstance(
+    const segment = task.blockedSegment;
+    segment.lastPushedText = pushTextInstance(
       task.blockedSegment.chunks,
       '' + node,
       request.responseState,
+      segment.lastPushedText,
     );
     return;
   }
@@ -1268,8 +1309,14 @@ function spawnNewSuspendedTask(
     insertionIndex,
     null,
     segment.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;
   const newTask = createTask(
     request,
     task.node,
@@ -1545,6 +1592,12 @@ function retryTask(request: Request, task: Task): void {
     // 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.
     renderNodeDestructive(request, task, task.node);
+    pushSegmentFinale(
+      segment.chunks,
+      request.responseState,
+      segment.lastPushedText,
+      segment.textEmbedded,
+    );
 
     task.abortSet.delete(task);
     segment.status = COMPLETED;
@@ -1625,6 +1678,9 @@ function flushSubtree(
       // 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.
       const segmentID = (segment.id = request.nextSegmentId++);
+      // 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.responseState, segmentID);
     }
     case COMPLETED: {
diff --git a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
index 035490fb3f65..ecb3218ea1da 100644
--- a/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
+++ b/packages/react-server/src/forks/ReactServerFormatConfig.custom.js
@@ -43,6 +43,7 @@ export const pushStartCompletedSuspenseBoundary =
   $$$hostConfig.pushStartCompletedSuspenseBoundary;
 export const pushEndCompletedSuspenseBoundary =
   $$$hostConfig.pushEndCompletedSuspenseBoundary;
+export const pushSegmentFinale = $$$hostConfig.pushSegmentFinale;
 export const writeCompletedRoot = $$$hostConfig.writeCompletedRoot;
 export const writePlaceholder = $$$hostConfig.writePlaceholder;
 export const writeStartCompletedSuspenseBoundary =

From aec575914a0fd76c9db8998ea62c3ee975de70d7 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Sun, 29 May 2022 23:07:10 -0700
Subject: [PATCH 1382/1603] [Fizz] Send errors down to client (#24551)

* use return from onError

* export getSuspenseInstanceFallbackError

* stringToChunk

* return string from onError in downstream type signatures

* 1 more type

* support encoding errors in html stream and escape user input

This commit adds another way to get errors to the suspense instance by encoding them as dataset properties of a template element at the head of the boundary. Previously if there was an error before the boundary flushed there was no way to stream the error to the client because there would never be a client render instruction.

Additionally the error is sent in 3 parts

1) error hash - this is always sent (dev or prod) if one is provided
2) error message - Dev only
3) error component stack - Dev only, this now captures the stack at the point of error

Another item addressed in this commit is the escaping of potentially unsafe data. all error components are escaped as test for browers when written into the html and as javascript strings when written into a client render instruction.

* nits

Co-authored-by: Marco Salazar <salazarm@fb.com>
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 457 ++++++++++++++++--
 .../ReactDOMFizzServerBrowser-test.js         |  22 +-
 .../__tests__/ReactDOMFizzServerNode-test.js  |  30 +-
 .../src/client/ReactDOMHostConfig.js          |  24 +
 .../src/server/ReactDOMFizzServerBrowser.js   |   2 +-
 .../src/server/ReactDOMFizzServerNode.js      |   2 +-
 .../src/server/ReactDOMServerFormatConfig.js  | 110 ++++-
 .../ReactDOMServerLegacyFormatConfig.js       |   4 +
 .../server/ReactNativeServerFormatConfig.js   |   8 +
 .../src/ReactNoopServer.js                    |   2 +-
 .../src/ReactFiberBeginWork.new.js            |  21 +-
 .../src/ReactFiberBeginWork.old.js            |  21 +-
 .../ReactFiberHostConfigWithNoHydration.js    |   1 +
 .../src/forks/ReactFiberHostConfig.custom.js  |   2 +
 .../ReactDOMServerFB-test.internal.js         |   7 +-
 packages/react-server/src/ReactFizzServer.js  | 129 ++++-
 scripts/error-codes/codes.json                |   3 +-
 17 files changed, 768 insertions(+), 77 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 56ae7c8a0965..66ae2c25e690 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -89,6 +89,48 @@ describe('ReactDOMFizzServer', () => {
     });
   });
 
+  function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
+    const mappedErrows = errorsArr.map(error => {
+      if (error.componentStack) {
+        return [
+          error.message,
+          error.hash,
+          normalizeCodeLocInfo(error.componentStack),
+        ];
+      } else if (error.hash) {
+        return [error.message, error.hash];
+      }
+      return error.message;
+    });
+    if (__DEV__) {
+      expect(mappedErrows).toEqual(
+        toBeDevArr,
+        // .map(([errorMessage, errorHash, errorComponentStack]) => {
+        //   if (typeof error === 'string' || error instanceof String) {
+        //     return error;
+        //   }
+        //   let str = JSON.stringify(error).replace(/\\n/g, '\n');
+        //   // this gets stripped away by normalizeCodeLocInfo...
+        //   // Kind of hacky but lets strip it away here too just so they match...
+        //   // easier than fixing the regex to account for this edge case
+        //   if (str.endsWith('at **)"}')) {
+        //     str = str.replace(/at \*\*\)\"}$/, 'at **)');
+        //   }
+        //   return str;
+        // }),
+      );
+    } else {
+      expect(mappedErrows).toEqual(toBeProdArr);
+    }
+  }
+
+  // @TODO we will use this in a followup change once we start exposing componentStacks from server errors
+  // function componentStack(components) {
+  //   return components
+  //     .map(component => `\n    in ${component} (at **)`)
+  //     .join('');
+  // }
+
   async function act(callback) {
     await callback();
     // Await one turn around the event loop.
@@ -413,8 +455,6 @@ describe('ReactDOMFizzServer', () => {
       });
     });
 
-    const loggedErrors = [];
-
     function App({isClient}) {
       return (
         <div>
@@ -426,24 +466,32 @@ describe('ReactDOMFizzServer', () => {
     }
 
     let bootstrapped = false;
+    const errors = [];
     window.__INIT__ = function() {
       bootstrapped = true;
       // Attempt to hydrate the content.
       ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
         onRecoverableError(error) {
-          Scheduler.unstable_yieldValue(error.message);
+          errors.push(error);
         },
       });
     };
 
+    const theError = new Error('Test');
+    const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'Hash of (' + x.message + ')';
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
         {
           bootstrapScriptContent: '__INIT__();',
-          onError(x) {
-            loggedErrors.push(x);
-          },
+          onError,
         },
       );
       pipe(writable);
@@ -458,7 +506,6 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([]);
 
-    const theError = new Error('Test');
     await act(async () => {
       rejectComponent(theError);
     });
@@ -469,10 +516,14 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // Now we can client render it instead.
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    expect(Scheduler).toFlushAndYield([]);
+    expectErrors(
+      errors,
+      [theError.message],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
+    );
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
@@ -520,7 +571,14 @@ describe('ReactDOMFizzServer', () => {
       });
     });
 
+    const theError = new Error('Test');
     const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'hash of (' + x.message + ')';
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
 
     function App({isClient}) {
       return (
@@ -537,19 +595,18 @@ describe('ReactDOMFizzServer', () => {
         <App isClient={false} />,
 
         {
-          onError(x) {
-            loggedErrors.push(x);
-          },
+          onError,
         },
       );
       pipe(writable);
     });
     expect(loggedErrors).toEqual([]);
 
+    const errors = [];
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.unstable_yieldValue(error.message);
+        errors.push(error);
       },
     });
     Scheduler.unstable_flushAll();
@@ -559,7 +616,6 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([]);
 
-    const theError = new Error('Test');
     await act(async () => {
       rejectElement(theError);
     });
@@ -570,14 +626,161 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // Now we can client render it instead.
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    expect(Scheduler).toFlushAndYield([]);
+
+    expectErrors(
+      errors,
+      [theError.message],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
+    );
 
     // The client rendered HTML is now in place.
-    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+    // expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
+
+    expect(loggedErrors).toEqual([theError]);
+  });
+
+  // @gate experimental
+  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>}>
+            <Erroring isClient={isClient} />
+          </Suspense>
+        </div>
+      );
+    }
+
+    const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return 'hash(' + x.message + ')';
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App />,
 
+        {
+          onError,
+        },
+      );
+      pipe(writable);
+    });
+    expect(loggedErrors).toEqual([theError]);
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error);
+      },
+    });
+    Scheduler.unstable_flushAll();
+
+    expect(getVisibleChildren(container)).toEqual(<div>Hello World</div>);
+
+    expectErrors(
+      errors,
+      [theError.message],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
+    );
+  });
+
+  // @gate experimental
+  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 expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <App />,
+
+        {
+          onError,
+        },
+      );
+      pipe(writable);
+    });
+    expect(loggedErrors).toEqual([]);
+
+    const errors = [];
+    // Attempt to hydrate the content.
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error);
+      },
+    });
+    Scheduler.unstable_flushAll();
+
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    await act(async () => {
+      rejectComponent(theError);
+    });
+
+    expect(loggedErrors).toEqual([theError]);
+    expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
+
+    // Now we can client render it instead.
+    expect(Scheduler).toFlushAndYield([]);
+
+    expectErrors(
+      errors,
+      [theError.message],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
+    );
+
+    // The client rendered HTML is now in place.
+    expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
     expect(loggedErrors).toEqual([theError]);
   });
 
@@ -849,18 +1052,25 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    const loggedErrors = [];
+    function onError(error) {
+      loggedErrors.push(error);
+      return `Hash of (${error.message})`;
+    }
+
     let controls;
     await act(async () => {
-      controls = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      controls = ReactDOMFizzServer.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) {
-        Scheduler.unstable_yieldValue(error.message);
+        errors.push(error);
       },
     });
     Scheduler.unstable_flushAll();
@@ -874,10 +1084,14 @@ describe('ReactDOMFizzServer', () => {
     });
 
     // We still can't render it on the client.
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to an ' +
-        'error during server rendering. Switched to client rendering.',
-    ]);
+    expect(Scheduler).toFlushAndYield([]);
+    expectErrors(
+      errors,
+      ['This Suspense boundary was aborted by the server'],
+      [
+        '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>Loading...</div>);
 
     // We now resolve it on the client.
@@ -1535,16 +1749,22 @@ describe('ReactDOMFizzServer', () => {
       );
     }
 
+    const theError = new Error('Test');
     const loggedErrors = [];
+    function onError(x) {
+      loggedErrors.push(x);
+      return `hash of (${x.message})`;
+    }
+    // const expectedHash = onError(theError);
+    // loggedErrors.length = 0;
+
     let controls;
     await act(async () => {
       controls = ReactDOMFizzServer.renderToPipeableStream(
         <App isClient={false} />,
 
         {
-          onError(x) {
-            loggedErrors.push(x);
-          },
+          onError,
         },
       );
       controls.pipe(writable);
@@ -1552,10 +1772,11 @@ describe('ReactDOMFizzServer', () => {
 
     // We're still showing a fallback.
 
+    const errors = [];
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
       onRecoverableError(error) {
-        Scheduler.unstable_yieldValue(error.message);
+        errors.push(error);
       },
     });
     Scheduler.unstable_flushAll();
@@ -1565,7 +1786,6 @@ describe('ReactDOMFizzServer', () => {
 
     expect(loggedErrors).toEqual([]);
 
-    const theError = new Error('Test');
     // Error the content, but we don't have a fallback yet.
     await act(async () => {
       rejectText('Hello', theError);
@@ -1586,10 +1806,14 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Loading...</div>);
 
     // That will let us client render it instead.
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    expect(Scheduler).toFlushAndYield([]);
+    expectErrors(
+      errors,
+      [theError.message],
+      [
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ],
+    );
 
     // The client rendered HTML is now in place.
     expect(getVisibleChildren(container)).toEqual(
@@ -2178,11 +2402,10 @@ describe('ReactDOMFizzServer', () => {
 
       // Hydrate the tree. Child will throw during render.
       isClient = true;
+      const errors = [];
       ReactDOMClient.hydrateRoot(container, <App />, {
         onRecoverableError(error) {
-          Scheduler.unstable_yieldValue(
-            'Log recoverable error: ' + error.message,
-          );
+          errors.push(error.message);
         },
       });
 
@@ -2190,6 +2413,8 @@ describe('ReactDOMFizzServer', () => {
       // shouldn't be called.
       expect(Scheduler).toFlushAndYield([]);
       expect(getVisibleChildren(container)).toEqual('Oops!');
+
+      expectErrors(errors, [], []);
     },
   );
 
@@ -2794,6 +3019,160 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  describe('error escaping', () => {
+    //@gate experimental
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+      expect(window.__outlet).toEqual({});
+    });
+    //@gate experimental
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+
+      await act(() => {
+        rejectComponent(new Error(dangerousErrorString));
+      });
+      expect(window.__outlet).toEqual({});
+    });
+    //@gate experimental
+    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 expectedHash = onError(theError);
+      // loggedErrors.length = 0;
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
+          onError,
+        });
+        pipe(writable);
+      });
+
+      expect(loggedErrors).toEqual([theError]);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error) {
+          errors.push(error);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+
+      // If escaping were not done we would get a message that says "bad hash"
+      expectErrors(
+        errors,
+        [theError.message],
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        ],
+      );
+    });
+  });
+
   describe('bootstrapScriptContent escaping', () => {
     // @gate experimental
     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 () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 792b9611f29f..3aacf68cc3b2 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -193,6 +193,7 @@ describe('ReactDOMFizzServer', () => {
 
   // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
     const controller = new AbortController();
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
@@ -200,13 +201,22 @@ describe('ReactDOMFizzServer', () => {
           <InfiniteSuspend />
         </Suspense>
       </div>,
-      {signal: controller.signal},
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
     );
 
     controller.abort();
 
     const result = await readResult(stream);
     expect(result).toContain('Loading');
+
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
   });
 
   // @gate experimental
@@ -223,12 +233,18 @@ describe('ReactDOMFizzServer', () => {
       rendered = true;
       return 'Done';
     }
+    const errors = [];
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
           <Wait /> />
         </Suspense>
       </div>,
+      {
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
     );
 
     stream.allReady.then(() => (isComplete = true));
@@ -239,6 +255,10 @@ describe('ReactDOMFizzServer', () => {
     const reader = stream.getReader();
     reader.cancel();
 
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
+
     hasLoaded = true;
     resolve();
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index c1844d7ef78b..cb5ec892bd2c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -211,7 +211,7 @@ describe('ReactDOMFizzServer', () => {
 
       {
         onError(x) {
-          reportedErrors.push(x);
+          reportedErrors.push(x.message);
         },
         onShellError(x) {
           reportedShellErrors.push(x);
@@ -224,7 +224,10 @@ describe('ReactDOMFizzServer', () => {
 
     expect(output.error).toBe(theError);
     expect(output.result).toBe('');
-    expect(reportedErrors).toEqual([theError]);
+    expect(reportedErrors).toEqual([
+      theError.message,
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(reportedShellErrors).toEqual([theError]);
   });
 
@@ -289,6 +292,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   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();
     const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
@@ -298,6 +302,9 @@ describe('ReactDOMFizzServer', () => {
       </div>,
 
       {
+        onError(x) {
+          errors.push(x.message);
+        },
         onAllReady() {
           isCompleteCalls++;
         },
@@ -314,6 +321,9 @@ describe('ReactDOMFizzServer', () => {
 
     await completed;
 
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
     expect(isCompleteCalls).toBe(1);
@@ -322,6 +332,7 @@ describe('ReactDOMFizzServer', () => {
   // @gate experimental
   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();
     const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
@@ -333,6 +344,9 @@ describe('ReactDOMFizzServer', () => {
       </div>,
 
       {
+        onError(x) {
+          errors.push(x.message);
+        },
         onAllReady() {
           isCompleteCalls++;
         },
@@ -349,6 +363,11 @@ describe('ReactDOMFizzServer', () => {
 
     await completed;
 
+    expect(errors).toEqual([
+      // There are two boundaries that abort
+      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
     expect(isCompleteCalls).toBe(1);
@@ -552,6 +571,7 @@ describe('ReactDOMFizzServer', () => {
       rendered = true;
       return 'Done';
     }
+    const errors = [];
     const {writable, completed} = getTestWritable();
     const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
       <div>
@@ -560,6 +580,9 @@ describe('ReactDOMFizzServer', () => {
         </Suspense>
       </div>,
       {
+        onError(x) {
+          errors.push(x.message);
+        },
         onAllReady() {
           isComplete = true;
         },
@@ -579,6 +602,9 @@ describe('ReactDOMFizzServer', () => {
 
     await completed;
 
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
     expect(rendered).toBe(false);
     expect(isComplete).toBe(true);
   });
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index e4973ec667b5..fb7d4e66e91f 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -729,6 +729,30 @@ export function isSuspenseInstancePending(instance: SuspenseInstance) {
 export function isSuspenseInstanceFallback(instance: SuspenseInstance) {
   return instance.data === SUSPENSE_FALLBACK_START_DATA;
 }
+export function getSuspenseInstanceFallbackErrorDetails(
+  instance: SuspenseInstance,
+) {
+  const nextSibling = instance.nextSibling;
+  let errorMessage /*, errorComponentStack, errorHash*/;
+  if (
+    nextSibling &&
+    nextSibling.nodeType === ELEMENT_NODE &&
+    nextSibling.nodeName.toLowerCase() === 'template'
+  ) {
+    const msg = ((nextSibling: any): HTMLTemplateElement).dataset.msg;
+    if (msg !== null) errorMessage = msg;
+
+    // @TODO read and return hash and componentStack once we know how we are goign to
+    // expose this extra errorInfo to onRecoverableError
+
+    // const hash = ((nextSibling: any): HTMLTemplateElement).dataset.hash;
+    // if (hash !== null) errorHash = hash;
+
+    // const stack = ((nextSibling: any): HTMLTemplateElement).dataset.stack;
+    // if (stack !== null) errorComponentStack = stack;
+  }
+  return {errorMessage /*, errorComponentStack, errorHash*/};
+}
 
 export function registerSuspenseInstanceRetry(
   instance: SuspenseInstance,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 1ae511ede561..136f50dd9949 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -32,7 +32,7 @@ type Options = {|
   bootstrapModules?: Array<string>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
-  onError?: (error: mixed) => void,
+  onError?: (error: mixed) => ?string,
 |};
 
 // TODO: Move to sub-classing ReadableStream.
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index b3d9642e77ae..c5318c2024aa 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -43,7 +43,7 @@ type Options = {|
   onShellReady?: () => void,
   onShellError?: (error: mixed) => void,
   onAllReady?: () => void,
-  onError?: (error: mixed) => void,
+  onError?: (error: mixed) => ?string,
 |};
 
 type PipeableStream = {|
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 06fda6a65709..f006477c4b0a 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1526,6 +1526,19 @@ const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(
 );
 const endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
 
+const clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk(
+  '<template data-hash="',
+);
+const clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk(
+  '" data-msg="',
+);
+const clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk(
+  '" data-stack="',
+);
+const clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk(
+  '"></template>',
+);
+
 export function pushStartCompletedSuspenseBoundary(
   target: Array<Chunk | PrecomputedChunk>,
 ) {
@@ -1563,8 +1576,43 @@ export function writeStartPendingSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
+  errorHash: ?string,
+  errorMesssage: ?string,
+  errorComponentStack: ?string,
 ): boolean {
-  return writeChunkAndReturn(destination, startClientRenderedSuspenseBoundary);
+  let result;
+  result = writeChunkAndReturn(
+    destination,
+    startClientRenderedSuspenseBoundary,
+  );
+  if (errorHash) {
+    writeChunk(destination, clientRenderedSuspenseBoundaryError1);
+    writeChunk(destination, stringToChunk(escapeTextForBrowser(errorHash)));
+    // In prod errorMessage will usually be nullish but there is one case where
+    // it is used (currently when the server aborts the task) so we leave it ungated.
+    if (errorMesssage) {
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1A);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorMesssage)),
+      );
+    }
+    if (__DEV__) {
+      // Component stacks are currently only captured in dev
+      if (errorComponentStack) {
+        writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
+        writeChunk(
+          destination,
+          stringToChunk(escapeTextForBrowser(errorComponentStack)),
+        );
+      }
+    }
+    result = writeChunkAndReturn(
+      destination,
+      clientRenderedSuspenseBoundaryError2,
+    );
+  }
+  return result;
 }
 export function writeEndCompletedSuspenseBoundary(
   destination: Destination,
@@ -1724,7 +1772,7 @@ export function writeEndSegment(
 // const SUSPENSE_PENDING_START_DATA = '$?';
 // const SUSPENSE_FALLBACK_START_DATA = '$!';
 //
-// function clientRenderBoundary(suspenseBoundaryID) {
+// function clientRenderBoundary(suspenseBoundaryID, errorHash, errorMsg, errorComponentStack) {
 //   // Find the fallback's first element.
 //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
 //   if (!suspenseIdNode) {
@@ -1736,6 +1784,11 @@ export function writeEndSegment(
 //   const suspenseNode = suspenseIdNode.previousSibling;
 //   // Tag it to be client rendered.
 //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+//   // assign error metadata to first sibling
+//   let dataset = suspenseIdNode.dataset;
+//   if (errorHash) dataset.hash = errorHash;
+//   if (errorMsg) dataset.msg = errorMsg;
+//   if (errorComponentStack) dataset.stack = errorComponentStack;
 //   // Tell React to retry it if the parent already hydrated.
 //   if (suspenseNode._reactRetry) {
 //     suspenseNode._reactRetry();
@@ -1823,7 +1876,7 @@ const completeSegmentFunction =
 const completeBoundaryFunction =
   'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
 const clientRenderFunction =
-  'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
+  'function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.hash=c),d&&(a.msg=d),e&&(a.stack=e),b._reactRetry&&b._reactRetry())}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
   completeSegmentFunction + ';$RS("',
@@ -1896,12 +1949,17 @@ const clientRenderScript1Full = stringToPrecomputedChunk(
   clientRenderFunction + ';$RX("',
 );
 const clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
-const clientRenderScript2 = stringToPrecomputedChunk('")</script>');
+const clientRenderScript1A = stringToPrecomputedChunk('"');
+const clientRenderScript2 = stringToPrecomputedChunk(')</script>');
+const clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
 
 export function writeClientRenderBoundaryInstruction(
   destination: Destination,
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
+  errorHash: ?string,
+  errorMessage?: string,
+  errorComponentStack?: string,
 ): boolean {
   writeChunk(destination, responseState.startInlineScript);
   if (!responseState.sentClientRenderFunction) {
@@ -1920,5 +1978,49 @@ export function writeClientRenderBoundaryInstruction(
   }
 
   writeChunk(destination, boundaryID);
+  writeChunk(destination, clientRenderScript1A);
+  if (errorHash || errorMessage || errorComponentStack) {
+    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    writeChunk(
+      destination,
+      stringToChunk(escapeJSStringsForInstructionScripts(errorHash || '')),
+    );
+  }
+  if (errorMessage || errorComponentStack) {
+    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    writeChunk(
+      destination,
+      stringToChunk(escapeJSStringsForInstructionScripts(errorMessage || '')),
+    );
+  }
+  if (errorComponentStack) {
+    writeChunk(destination, clientRenderErrorScriptArgInterstitial);
+    writeChunk(
+      destination,
+      stringToChunk(escapeJSStringsForInstructionScripts(errorComponentStack)),
+    );
+  }
   return writeChunkAndReturn(destination, clientRenderScript2);
 }
+
+const regexForJSStringsInScripts = /[<\u2028\u2029]/g;
+function escapeJSStringsForInstructionScripts(input: string): string {
+  const escaped = JSON.stringify(input);
+  return escaped.replace(regexForJSStringsInScripts, 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',
+        );
+      }
+    }
+  });
+}
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 9d430f7b482c..71716d7b71f2 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -148,6 +148,10 @@ export function writeStartCompletedSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
+  // flushing these error arguments are not currently supported in this legacy streaming format.
+  errorHash: ?string,
+  errorMessage?: string,
+  errorComponentStack?: string,
 ): boolean {
   if (responseState.generateStaticMarkup) {
     // A client rendered boundary is done and doesn't need a representation in the HTML
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 470fed5ce6d0..d65a30180a4d 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -225,6 +225,10 @@ export function writeStartPendingSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
+  // TODO: encode error for native
+  errorHash: ?string,
+  errorMessage: ?string,
+  errorComponentStack: ?string,
 ): boolean {
   return writeChunkAndReturn(destination, SUSPENSE_CLIENT_RENDER);
 }
@@ -295,6 +299,10 @@ export function writeClientRenderBoundaryInstruction(
   destination: Destination,
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
+  // TODO: encode error for native
+  errorHash: ?string,
+  errorMessage: ?string,
+  errorComponentStack: ?string,
 ): boolean {
   writeChunk(destination, SUSPENSE_UPDATE_TO_CLIENT_RENDER);
   return writeChunkAndReturn(destination, formatID(boundaryID));
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 8cbd0c84dba7..14003b8291b3 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -267,7 +267,7 @@ type Options = {
   progressiveChunkSize?: number,
   onShellReady?: () => void,
   onAllReady?: () => void,
-  onError?: (error: mixed) => void,
+  onError?: (error: mixed) => ?string,
 };
 
 function render(children: React$Element<any>, options?: Options): Destination {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index a025055807f5..f1f5913b0143 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -157,6 +157,7 @@ import {
   shouldSetTextContent,
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
+  getSuspenseInstanceFallbackErrorDetails,
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
@@ -2572,18 +2573,22 @@ function updateDehydratedSuspenseComponent(
       // 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.
+      const {errorMessage} = getSuspenseInstanceFallbackErrorDetails(
+        suspenseInstance,
+      );
+      const error = errorMessage
+        ? // eslint-disable-next-line react-internal/prod-error-codes
+          new Error(errorMessage)
+        : new Error(
+            'The server could not finish this Suspense boundary, likely ' +
+              'due to an error during server rendering. Switched to ' +
+              'client rendering.',
+          );
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
         renderLanes,
-        // TODO: The server should serialize the error message so we can log it
-        // here on the client. Or, in production, a hash/id that corresponds to
-        // the error.
-        new Error(
-          'The server could not finish this Suspense boundary, likely ' +
-            'due to an error during server rendering. Switched to ' +
-            'client rendering.',
-        ),
+        error,
       );
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index a43a1d6b4560..2303227185d2 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -157,6 +157,7 @@ import {
   shouldSetTextContent,
   isSuspenseInstancePending,
   isSuspenseInstanceFallback,
+  getSuspenseInstanceFallbackErrorDetails,
   registerSuspenseInstanceRetry,
   supportsHydration,
   isPrimaryRenderer,
@@ -2572,18 +2573,22 @@ function updateDehydratedSuspenseComponent(
       // 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.
+      const {errorMessage} = getSuspenseInstanceFallbackErrorDetails(
+        suspenseInstance,
+      );
+      const error = errorMessage
+        ? // eslint-disable-next-line react-internal/prod-error-codes
+          new Error(errorMessage)
+        : new Error(
+            'The server could not finish this Suspense boundary, likely ' +
+              'due to an error during server rendering. Switched to ' +
+              'client rendering.',
+          );
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
         renderLanes,
-        // TODO: The server should serialize the error message so we can log it
-        // here on the client. Or, in production, a hash/id that corresponds to
-        // the error.
-        new Error(
-          'The server could not finish this Suspense boundary, likely ' +
-            'due to an error during server rendering. Switched to ' +
-            'client rendering.',
-        ),
+        error,
       );
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index 1392cf8a2608..f61c0eb7789e 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -26,6 +26,7 @@ export const canHydrateTextInstance = shim;
 export const canHydrateSuspenseInstance = shim;
 export const isSuspenseInstancePending = shim;
 export const isSuspenseInstanceFallback = shim;
+export const getSuspenseInstanceFallbackErrorDetails = shim;
 export const registerSuspenseInstanceRetry = shim;
 export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index e8856f00ae40..8ef999f432fb 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -136,6 +136,8 @@ export const isSuspenseInstancePending =
   $$$hostConfig.isSuspenseInstancePending;
 export const isSuspenseInstanceFallback =
   $$$hostConfig.isSuspenseInstanceFallback;
+export const getSuspenseInstanceFallbackErrorDetails =
+  $$$hostConfig.getSuspenseInstanceFallbackErrorDetails;
 export const registerSuspenseInstanceRetry =
   $$$hostConfig.registerSuspenseInstanceRetry;
 export const getNextHydratableSibling = $$$hostConfig.getNextHydratableSibling;
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index 8c7c6844ab96..22ae1e6d71ec 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -169,6 +169,7 @@ describe('ReactDOMServerFB', () => {
   });
 
   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>}>
@@ -177,7 +178,7 @@ describe('ReactDOMServerFB', () => {
       </div>,
       {
         onError(x) {
-          console.error(x);
+          errors.push(x.message);
         },
       },
     );
@@ -189,5 +190,9 @@ describe('ReactDOMServerFB', () => {
 
     const remaining = readResult(stream);
     expect(remaining).toEqual('');
+
+    expect(errors).toEqual([
+      'This Suspense boundary was aborted by the server',
+    ]);
   });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 5b0a3de560a6..5376ca2764ff 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -131,6 +131,9 @@ type LegacyContext = {
 type SuspenseBoundary = {
   id: SuspenseBoundaryID,
   rootSegmentID: number,
+  errorHash: ?string, // the error hash if it errors
+  errorMessage?: string, // the error string if it errors
+  errorComponentStack?: string, // the error component stack if it errors
   forceClientRender: boolean, // if it errors or infinitely suspends
   parentFlushed: boolean,
   pendingTasks: number, // when it reaches zero we can show this boundary's content
@@ -196,7 +199,9 @@ export opaque type Request = {
   completedBoundaries: Array<SuspenseBoundary>, // Completed but not yet fully flushed boundaries to show.
   partialBoundaries: Array<SuspenseBoundary>, // Partially completed boundaries that can flush its segments early.
   // onError is called when an error happens anywhere in the tree. It might recover.
-  onError: (error: mixed) => void,
+  // 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) => ?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,
@@ -229,6 +234,7 @@ const DEFAULT_PROGRESSIVE_CHUNK_SIZE = 12800;
 
 function defaultErrorHandler(error: mixed) {
   console['error'](error); // Don't transform to our wrapper
+  return null;
 }
 
 function noop(): void {}
@@ -238,7 +244,7 @@ export function createRequest(
   responseState: ResponseState,
   rootFormatContext: FormatContext,
   progressiveChunkSize: void | number,
-  onError: void | ((error: mixed) => void),
+  onError: void | ((error: mixed) => ?string),
   onAllReady: void | (() => void),
   onShellReady: void | (() => void),
   onShellError: void | ((error: mixed) => void),
@@ -317,6 +323,7 @@ function createSuspenseBoundary(
     completedSegments: [],
     byteSize: 0,
     fallbackAbortableTasks,
+    errorHash: null,
   };
 }
 
@@ -426,11 +433,44 @@ function popComponentStackInDEV(task: Task): void {
   }
 }
 
-function logRecoverableError(request: Request, error: mixed): void {
+// stash the component stack of an unwinding error until it is processed
+let lastBoundaryErrorComponentStackDev: ?string = null;
+
+function captureBoundaryErrorDetailsDev(
+  boundary: SuspenseBoundary,
+  error: mixed,
+) {
+  if (__DEV__) {
+    let errorMessage;
+    if (typeof error === 'string') {
+      errorMessage = error;
+    } else if (error && typeof error.message === 'string') {
+      errorMessage = error.message;
+    } else {
+      // eslint-disable-next-line react-internal/safe-string-coercion
+      errorMessage = String(error);
+    }
+
+    const errorComponentStack =
+      lastBoundaryErrorComponentStackDev || getCurrentStackInDEV();
+    lastBoundaryErrorComponentStackDev = null;
+
+    boundary.errorMessage = errorMessage;
+    boundary.errorComponentStack = errorComponentStack;
+  }
+}
+
+function logRecoverableError(request: Request, error: any): ?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;
-  onError(error);
+  const errorHash = request.onError(error);
+  if (errorHash != null && typeof errorHash !== '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 errorHash}" instead`,
+    );
+  }
+  return errorHash;
 }
 
 function fatalError(request: Request, error: mixed): void {
@@ -527,8 +567,12 @@ function renderSuspenseBoundary(
     }
   } catch (error) {
     contentRootSegment.status = ERRORED;
-    logRecoverableError(request, error);
     newBoundary.forceClientRender = true;
+    newBoundary.errorHash = logRecoverableError(request, error);
+    if (__DEV__) {
+      captureBoundaryErrorDetailsDev(newBoundary, error);
+    }
+
     // 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.
@@ -1165,9 +1209,38 @@ function validateIterable(iterable, iteratorFn: Function): void {
   }
 }
 
+function renderNodeDestructive(
+  request: Request,
+  task: Task,
+  node: ReactNodeList,
+): void {
+  if (__DEV__) {
+    // In Dev we wrap renderNodeDestructiveImpl in a try / catch so we can capture
+    // a component stack at the right place in the tree. We don't do this in renderNode
+    // becuase it is not called at every layer of the tree and we may lose frames
+    try {
+      return renderNodeDestructiveImpl(request, task, node);
+    } catch (x) {
+      if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
+        // This is a Wakable, noop
+      } else {
+        // This is an error, stash the component stack if it is null.
+        lastBoundaryErrorComponentStackDev =
+          lastBoundaryErrorComponentStackDev !== null
+            ? lastBoundaryErrorComponentStackDev
+            : getCurrentStackInDEV();
+      }
+      // rethrow so normal suspense logic can handle thrown value accordingly
+      throw x;
+    }
+  } else {
+    return renderNodeDestructiveImpl(request, task, node);
+  }
+}
+
 // This function by it self renders a node and consumes the task by mutating it
 // to update the current execution state.
-function renderNodeDestructive(
+function renderNodeDestructiveImpl(
   request: Request,
   task: Task,
   node: ReactNodeList,
@@ -1197,7 +1270,27 @@ function renderNodeDestructive(
         const lazyNode: LazyComponentType<any, any> = (node: any);
         const payload = lazyNode._payload;
         const init = lazyNode._init;
-        const resolvedNode = init(payload);
+        let resolvedNode;
+        if (__DEV__) {
+          try {
+            resolvedNode = init(payload);
+          } catch (x) {
+            if (
+              typeof x === 'object' &&
+              x !== null &&
+              typeof x.then === 'function'
+            ) {
+              // this Lazy initializer is suspending. push a temporary frame onto the stack so it can be
+              // popped off in spawnNewSuspendedTask. This aligns stack behavior between Lazy in element position
+              // vs Component position. We do not want the frame for Errors so we exclusively do this in
+              // the wakeable branch
+              pushBuiltInComponentStackInDEV(task, 'Lazy');
+            }
+            throw x;
+          }
+        } else {
+          resolvedNode = init(payload);
+        }
         renderNodeDestructive(request, task, resolvedNode);
         return;
       }
@@ -1395,13 +1488,17 @@ function erroredTask(
   error: mixed,
 ) {
   // Report the error to a global handler.
-  logRecoverableError(request, error);
+  const errorHash = logRecoverableError(request, error);
   if (boundary === null) {
     fatalError(request, error);
   } else {
     boundary.pendingTasks--;
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
+      boundary.errorHash = errorHash;
+      if (__DEV__) {
+        captureBoundaryErrorDetailsDev(boundary, error);
+      }
 
       // Regardless of what happens next, this boundary won't be displayed,
       // so we can flush it, if the parent already flushed.
@@ -1456,6 +1553,13 @@ function abortTask(task: Task): void {
 
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
+      const error = new Error(
+        'This Suspense boundary was aborted by the server',
+      );
+      boundary.errorHash = request.onError(error);
+      if (__DEV__) {
+        captureBoundaryErrorDetailsDev(boundary, error);
+      }
       if (boundary.parentFlushed) {
         request.clientRenderedBoundaries.push(boundary);
       }
@@ -1734,8 +1838,10 @@ function flushSegment(
     writeStartClientRenderedSuspenseBoundary(
       destination,
       request.responseState,
+      boundary.errorHash,
+      boundary.errorMessage,
+      boundary.errorComponentStack,
     );
-
     // Flush the fallback.
     flushSubtree(request, destination, segment);
 
@@ -1815,6 +1921,9 @@ function flushClientRenderedBoundary(
     destination,
     request.responseState,
     boundary.id,
+    boundary.errorHash,
+    boundary.errorMessage,
+    boundary.errorComponentStack,
   );
 }
 
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 92d3bfd128c8..7a93b9a0ac64 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -416,5 +416,6 @@
   "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"
+  "431": "React elements are not allowed in ServerContext",
+  "432": "This Suspense boundary was aborted by the server"
 }

From f534cc6ea4e7cffbfd53b00e14cd0b1849b291f1 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 31 May 2022 12:23:44 -0400
Subject: [PATCH 1383/1603] [DevTools] Add --replaceBuild option to Older React
 Builds Download Script (#24621)

This PR adds a `--replaceBuild` option to the script that downloads older React version builds. If this flag is true, we will replace the contents of the `build` folder with the contents of the `build-regression` folder and remove the `build-regression` folder after, which was the original behavior.

However, for e2e tests, we need both the original build (for DevTools) and the new build (for the React Apps), so we need both the `build` and the `build-regression` folders. Not adding the `--replaceBuild` option will do this.

This PR also modifies the circle CI config to reflect this change.
---
 .circleci/config.yml                          |  2 +-
 .../download_devtools_regression_build.js     | 22 +++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 31d52c7e6a61..d0c2bd991811 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -238,7 +238,7 @@ jobs:
       - run:
           name: Install nested packages from Yarn cache
           command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
-      - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >>
+      - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> --replaceBuild
       - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci
 
   yarn_lint_build:
diff --git a/scripts/circleci/download_devtools_regression_build.js b/scripts/circleci/download_devtools_regression_build.js
index d8b7c88a0a7e..01ef377094cc 100755
--- a/scripts/circleci/download_devtools_regression_build.js
+++ b/scripts/circleci/download_devtools_regression_build.js
@@ -6,6 +6,7 @@ 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 INSTALL_PACKAGES = ['react-dom', 'react', 'react-test-renderer'];
@@ -16,7 +17,10 @@ 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() {
   console.log(chalk.bold.white(`Downloading React v${version}\n`));
@@ -39,6 +43,12 @@ async function downloadRegressionBuild() {
     `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 = INSTALL_PACKAGES.reduce(
@@ -102,12 +112,20 @@ async function downloadRegressionBuild() {
 
 async function main() {
   try {
+    if (!version) {
+      console.log(chalk.red('Must specify React version to download'));
+      return;
+    }
     await downloadRegressionBuild();
   } catch (e) {
     console.log(chalk.red(e));
   } finally {
-    console.log(chalk.bold.white(`Removing regression build`));
-    await exec(`rm -r ${regressionBuildPath}`);
+    // 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}`);
+    }
   }
 }
 

From 0b545551e6dea328797e64eed6a9677bf4051eae Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 31 May 2022 14:39:30 -0400
Subject: [PATCH 1384/1603] [DevTools] Modify DevTools e2e test script for
 regression tests (#24642)

Modified the `run_devtools_e2e_tests` script so that you can pass in a React version. If you pass in a version, it will build the DevTools shell and run the e2e tests with that version.
---
 scripts/circleci/run_devtools_e2e_tests.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/scripts/circleci/run_devtools_e2e_tests.js b/scripts/circleci/run_devtools_e2e_tests.js
index 2c05db087e03..023c0ffc5407 100755
--- a/scripts/circleci/run_devtools_e2e_tests.js
+++ b/scripts/circleci/run_devtools_e2e_tests.js
@@ -6,7 +6,7 @@ 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');
 
@@ -74,7 +74,15 @@ function runTestShell() {
 
   logBright('Starting testing shell server');
 
-  serverProcess = spawn('yarn', ['start'], {cwd: shellPackagePath});
+  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('Compiled successfully.')) {
       logBright('Testing shell server running');
@@ -106,8 +114,15 @@ function runTestShell() {
 
 async function runEndToEndTests() {
   logBright('Running e2e tests');
+  if (!reactVersion) {
+    testProcess = spawn('yarn', ['test:e2e'], {cwd: inlinePackagePath});
+  } else {
+    testProcess = spawn('yarn', ['test:e2e'], {
+      cwd: inlinePackagePath,
+      env: {...process.env, REACT_VERSION: reactVersion},
+    });
+  }
 
-  testProcess = spawn('yarn', ['test:e2e'], {cwd: inlinePackagePath});
   testProcess.stdout.on('data', data => {
     // Log without formatting because Playwright applies its own formatting.
     const formatted = format(data);

From be1fd48e96a617f3758d179ebfb0386a382af942 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Tue, 31 May 2022 15:32:21 -0400
Subject: [PATCH 1385/1603] [DevTools] mock requestAnimationFrame with
 setTimeout as a temporary fix for #24626 (#24633)

* mock requestAnimationFrame as a temp workaround for #24626

* give name to constant variable
---
 packages/react-devtools-extensions/src/main.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index a0f9bcea17a2..156eb81d07de 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -30,6 +30,23 @@ const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
 const isChrome = getBrowserName() === 'Chrome';
 const isEdge = getBrowserName() === 'Edge';
 
+// since Chromium v102, requestAnimationFrame no longer fires in devtools_page (i.e. this file)
+// mock requestAnimationFrame with setTimeout as a temporary workaround
+// https://github.com/facebook/react/issues/24626
+// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
+if (isChrome || isEdge) {
+  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;
+}
+
 let panelCreated = false;
 
 // The renderer interface can't read saved component filters directly,

From 25837acfee5f5305d49fe19649e010dbf4f887a2 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 31 May 2022 16:16:07 -0400
Subject: [PATCH 1386/1603] React DevTools 4.24.6 -> 4.24.7 (#24646)

---
 packages/react-devtools-core/package.json                | 2 +-
 packages/react-devtools-extensions/chrome/manifest.json  | 4 ++--
 packages/react-devtools-extensions/edge/manifest.json    | 4 ++--
 packages/react-devtools-extensions/firefox/manifest.json | 2 +-
 packages/react-devtools-inline/package.json              | 2 +-
 packages/react-devtools-timeline/package.json            | 2 +-
 packages/react-devtools/CHANGELOG.md                     | 8 ++++++++
 packages/react-devtools/package.json                     | 4 ++--
 8 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index d53a0057463f..5a65c4c60aeb 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.6",
+  "version": "4.24.7",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index b8f09f0014d8..3bf02c4e5788 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.6",
-  "version_name": "4.24.6",
+  "version": "4.24.7",
+  "version_name": "4.24.7",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index b7e96ed72dd3..809c7be653fc 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.6",
-  "version_name": "4.24.6",
+  "version": "4.24.7",
+  "version_name": "4.24.7",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 9b0c048de8c3..07399c15a2c2 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.6",
+  "version": "4.24.7",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 46fd8c811f28..991d1b707c9f 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.6",
+  "version": "4.24.7",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 79228556454e..4dd4cc661adb 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.6",
+  "version": "4.24.7",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 945c99ca7517..a469d9da9acc 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,14 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index ce466c9619fe..91e6d6b752aa 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.6",
+  "version": "4.24.7",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.6",
+    "react-devtools-core": "4.24.7",
     "update-notifier": "^2.1.0"
   }
 }

From 26a5b3c7f781e93b5bcf4e5a7a6f13233409475d Mon Sep 17 00:00:00 2001
From: Josh Larson <josh.larson@shopify.com>
Date: Tue, 31 May 2022 15:20:36 -0500
Subject: [PATCH 1387/1603] Explicitly set `highWaterMark` to 0 for
 `ReadableStream` (#24641)

* Explicitly set highWaterMark to 0 for ReadableStreams

This is because not all streaming implementations respect the
default behavior of settings highWaterMark to 0 for byte streams.
Being explicit guarantees the intended behavior across runtimes.

* Remove size methods and add FlowFixMe instead
---
 .../src/server/ReactDOMFizzServerBrowser.js   | 20 ++++++++++-------
 .../src/ReactFlightDOMServerBrowser.js        | 22 +++++++++++--------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 136f50dd9949..35fbf0e6023c 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -53,15 +53,19 @@ function renderToReadableStream(
     });
 
     function onShellReady() {
-      const stream: ReactDOMServerReadableStream = (new ReadableStream({
-        type: 'bytes',
-        pull(controller) {
-          startFlowing(request, controller);
+      const stream: ReactDOMServerReadableStream = (new ReadableStream(
+        {
+          type: 'bytes',
+          pull(controller) {
+            startFlowing(request, controller);
+          },
+          cancel(reason) {
+            abort(request);
+          },
         },
-        cancel(reason) {
-          abort(request);
-        },
-      }): any);
+        // $FlowFixMe size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      ): any);
       // TODO: Move to sub-classing ReadableStream.
       stream.allReady = allReady;
       resolve(stream);
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index aeee2d24806d..a00eb8c44106 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -33,16 +33,20 @@ function renderToReadableStream(
     options ? options.onError : undefined,
     context,
   );
-  const stream = new ReadableStream({
-    type: 'bytes',
-    start(controller) {
-      startWork(request);
+  const stream = new ReadableStream(
+    {
+      type: 'bytes',
+      start(controller) {
+        startWork(request);
+      },
+      pull(controller) {
+        startFlowing(request, controller);
+      },
+      cancel(reason) {},
     },
-    pull(controller) {
-      startFlowing(request, controller);
-    },
-    cancel(reason) {},
-  });
+    // $FlowFixMe size() methods are not allowed on byte streams.
+    {highWaterMark: 0},
+  );
   return stream;
 }
 

From dd4950c90e65a6c53870fd61d2aea67bce7d6713 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 31 May 2022 14:53:32 -0700
Subject: [PATCH 1388/1603] [Flight] Implement useId hook (#24172)

* Implements useId hook for Flight server.

The approach for ids for Flight is different from Fizz/Client where there is a need for determinancy. Flight rendered elements will not be rendered on the client and as such the ids generated in a request only need to be unique. However since FLight does support refetching subtrees it is possible a client will need to patch up a part of the tree rather than replacing the entire thing so it is not safe to use a simple incrementing counter. To solve for this we allow the caller to specify a prefix. On an initial fetch it is likely this will be empty but on refetches or subtrees we expect to have a client `useId` provide the prefix since it will guaranteed be unique for that subtree and thus for the entire tree. It is also possible that we will automatically provide prefixes based on a client/Fizz useId on refetches

in addition to the core change I also modified the structure of options for renderToReadableStream where `onError`, `context`, and the new `identifierPrefix` are properties of an Options object argument to avoid the clumsiness of a growing list of optional function arguments.

* defend against useId call outside of rendering

* switch to S from F for Server Component ids

* default to empty string identifier prefix

* Add a test demonstrating that there is no warning when double rendering on the client a server component that used useId

* lints and gates
---
 .../src/__tests__/ReactFlight-test.js         | 100 +++++++++++++++++-
 .../src/ReactNoopFlightServer.js              |  11 +-
 .../src/ReactFlightDOMRelayServer.js          |   3 +
 .../src/ReactFlightDOMServerBrowser.js        |   6 +-
 .../src/ReactFlightDOMServerNode.js           |   5 +-
 packages/react-server/src/ReactFlightHooks.js |  22 +++-
 .../react-server/src/ReactFlightServer.js     |  19 +++-
 scripts/error-codes/codes.json                |   3 +-
 8 files changed, 149 insertions(+), 20 deletions(-)

diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 6213f0b72e08..505b9072ff7c 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -512,6 +512,99 @@ describe('ReactFlight', () => {
     );
   });
 
+  describe('Hooks', () => {
+    function DivWithId({children}) {
+      const id = React.useId();
+      return <div prop={id}>{children}</div>;
+    }
+
+    it('should support useId', () => {
+      function App() {
+        return (
+          <>
+            <DivWithId />
+            <DivWithId />
+          </>
+        );
+      }
+
+      const transport = ReactNoopFlightServer.render(<App />);
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop=":S1:" />
+          <div prop=":S2:" />
+        </>,
+      );
+    });
+
+    it('accepts an identifier prefix that prefixes generated ids', () => {
+      function App() {
+        return (
+          <>
+            <DivWithId />
+            <DivWithId />
+          </>
+        );
+      }
+
+      const transport = ReactNoopFlightServer.render(<App />, {
+        identifierPrefix: 'foo',
+      });
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop=":fooS1:" />
+          <div prop=":fooS2:" />
+        </>,
+      );
+    });
+
+    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 = React.useId();
+        const div = <div prop={id}>{id}</div>;
+        return <ClientDoublerModuleRef el={div} />;
+      }
+
+      function ClientDoubler({el}) {
+        Scheduler.unstable_yieldValue('ClientDoubler');
+        return (
+          <>
+            {el}
+            {el}
+          </>
+        );
+      }
+
+      const ClientDoublerModuleRef = moduleReference(ClientDoubler);
+
+      const transport = ReactNoopFlightServer.render(<App />);
+      expect(Scheduler).toHaveYielded([]);
+
+      act(() => {
+        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      });
+
+      expect(Scheduler).toHaveYielded(['ClientDoubler']);
+      expect(ReactNoop).toMatchRenderedOutput(
+        <>
+          <div prop=":S1:">:S1:</div>
+          <div prop=":S1:">:S1:</div>
+        </>,
+      );
+    });
+  });
+
   describe('ServerContext', () => {
     // @gate enableServerContext
     it('supports basic createServerContext usage', () => {
@@ -759,15 +852,14 @@ describe('ReactFlight', () => {
       function Bar() {
         return <span>{React.useContext(ServerContext)}</span>;
       }
-      const transport = ReactNoopFlightServer.render(<Bar />, {}, [
-        ['ServerContext', 'Override'],
-      ]);
+      const transport = ReactNoopFlightServer.render(<Bar />, {
+        context: [['ServerContext', 'Override']],
+      });
 
       act(() => {
         const flightModel = ReactNoopFlightClient.read(transport);
         ReactNoop.render(flightModel);
       });
-
       expect(ReactNoop).toMatchRenderedOutput(<span>Override</span>);
     });
 
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 1c607befe74b..3a84a06d0843 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -61,20 +61,19 @@ const ReactNoopFlightServer = ReactFlightServer({
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
-function render(
-  model: ReactModel,
-  options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
-): Destination {
+function render(model: ReactModel, options?: Options): Destination {
   const destination: Destination = [];
   const bundlerConfig = undefined;
   const request = ReactNoopFlightServer.createRequest(
     model,
     bundlerConfig,
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   ReactNoopFlightServer.startWork(request);
   ReactNoopFlightServer.startFlowing(request, destination);
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
index 7feb6e3f0eff..5e65921193ba 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
@@ -21,6 +21,7 @@ import {
 
 type Options = {
   onError?: (error: mixed) => void,
+  identifierPrefix?: string,
 };
 
 function render(
@@ -33,6 +34,8 @@ function render(
     model,
     config,
     options ? options.onError : undefined,
+    undefined, // not currently set up to supply context overrides
+    options ? options.identifierPrefix : undefined,
   );
   startWork(request);
   startFlowing(request, destination);
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index a00eb8c44106..bfd47cc40a69 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -19,19 +19,21 @@ import {
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
 function renderToReadableStream(
   model: ReactModel,
   webpackMap: BundlerConfig,
   options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
 ): ReadableStream {
   const request = createRequest(
     model,
     webpackMap,
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   const stream = new ReadableStream(
     {
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 76952b6d5425..b89a91a456b8 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -24,6 +24,8 @@ function createDrainHandler(destination, request) {
 
 type Options = {
   onError?: (error: mixed) => void,
+  context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 };
 
 type PipeableStream = {|
@@ -40,7 +42,8 @@ function renderToPipeableStream(
     model,
     webpackMap,
     options ? options.onError : undefined,
-    context,
+    options ? options.context : undefined,
+    options ? options.identifierPrefix : undefined,
   );
   let hasStartedFlowing = false;
   startWork(request);
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index 88a2eac86ca2..5b10d8c7a1f6 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -8,10 +8,21 @@
  */
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
+import type {Request} from './ReactFlightServer';
 import type {ReactServerContext} from 'shared/ReactTypes';
 import {REACT_SERVER_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {readContext as readContextImpl} from './ReactFlightNewContext';
 
+let currentRequest = null;
+
+export function prepareToUseHooksForRequest(request: Request) {
+  currentRequest = request;
+}
+
+export function resetHooksForRequest() {
+  currentRequest = null;
+}
+
 function readContext<T>(context: ReactServerContext<T>): T {
   if (__DEV__) {
     if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
@@ -61,7 +72,7 @@ export const Dispatcher: DispatcherType = {
   useLayoutEffect: (unsupportedHook: any),
   useImperativeHandle: (unsupportedHook: any),
   useEffect: (unsupportedHook: any),
-  useId: (unsupportedHook: any),
+  useId,
   useMutableSource: (unsupportedHook: any),
   useSyncExternalStore: (unsupportedHook: any),
   useCacheRefresh(): <T>(?() => T, ?T) => void {
@@ -91,3 +102,12 @@ export function setCurrentCache(cache: Map<Function, mixed> | null) {
 export function getCurrentCache() {
   return currentCache;
 }
+
+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) + ':';
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index e08f308a32fd..d1399ce63ae8 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -39,7 +39,13 @@ import {
   isModuleReference,
 } from './ReactFlightServerConfig';
 
-import {Dispatcher, getCurrentCache, setCurrentCache} from './ReactFlightHooks';
+import {
+  Dispatcher,
+  getCurrentCache,
+  prepareToUseHooksForRequest,
+  resetHooksForRequest,
+  setCurrentCache,
+} from './ReactFlightHooks';
 import {
   pushProvider,
   popProvider,
@@ -102,14 +108,12 @@ export type Request = {
   writtenSymbols: Map<Symbol, number>,
   writtenModules: Map<ModuleKey, number>,
   writtenProviders: Map<string, number>,
+  identifierPrefix: string,
+  identifierCount: number,
   onError: (error: mixed) => void,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
 };
 
-export type Options = {
-  onError?: (error: mixed) => void,
-};
-
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
 function defaultErrorHandler(error: mixed) {
@@ -126,6 +130,7 @@ export function createRequest(
   bundlerConfig: BundlerConfig,
   onError: void | ((error: mixed) => void),
   context?: Array<[string, ServerContextJSONValue]>,
+  identifierPrefix?: string,
 ): Request {
   const pingedSegments = [];
   const request = {
@@ -143,6 +148,8 @@ export function createRequest(
     writtenSymbols: new Map(),
     writtenModules: new Map(),
     writtenProviders: new Map(),
+    identifierPrefix: identifierPrefix || '',
+    identifierCount: 1,
     onError: onError === undefined ? defaultErrorHandler : onError,
     toJSON: function(key: string, value: ReactModel): ReactJSONValue {
       return resolveModelToJSON(request, this, key, value);
@@ -826,6 +833,7 @@ function performWork(request: Request): void {
   const prevCache = getCurrentCache();
   ReactCurrentDispatcher.current = Dispatcher;
   setCurrentCache(request.cache);
+  prepareToUseHooksForRequest(request);
 
   try {
     const pingedSegments = request.pingedSegments;
@@ -843,6 +851,7 @@ function performWork(request: Request): void {
   } finally {
     ReactCurrentDispatcher.current = prevDispatcher;
     setCurrentCache(prevCache);
+    resetHooksForRequest();
   }
 }
 
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 7a93b9a0ac64..a8c8810bbe49 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -417,5 +417,6 @@
   "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": "This Suspense boundary was aborted by the server"
+  "432": "This Suspense boundary was aborted by the server",
+  "433": "useId can only be used while React is rendering"
 }

From b1858b110d2888034355ee6dd9c0b581feabbed3 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 31 May 2022 19:13:41 -0400
Subject: [PATCH 1389/1603] [DevTools] devtools-test-shell Regression App fixes
 (#24644)

Made a couple of fixes to the `devtools-test-shell`
* test selectors aren't available in > React v18.0 either, so we'll need to mock the test selector functions there as well
* `react-dom/client` should map to `react-dom/client` and not `react-dom`
---
 packages/react-devtools-shell/src/e2e-regression/app.js | 8 +++++++-
 packages/react-devtools-shell/webpack.config.js         | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shell/src/e2e-regression/app.js b/packages/react-devtools-shell/src/e2e-regression/app.js
index eaf0e7701437..d97f1a3f774d 100644
--- a/packages/react-devtools-shell/src/e2e-regression/app.js
+++ b/packages/react-devtools-shell/src/e2e-regression/app.js
@@ -22,4 +22,10 @@ function mountTestApp() {
 mountTestApp();
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
-window.parent.REACT_DOM_APP = ReactDOM;
+// 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/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index fbfa0d5e19a6..26d27a08a7cf 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -193,7 +193,7 @@ const e2eRegressionApp = semver.lt(REACT_VERSION, '18.0.0')
       {
         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'),
+        'react-dom/client': resolve(E2E_APP_BUILD_DIR, 'react-dom/client'),
         scheduler: resolve(E2E_APP_BUILD_DIR, 'scheduler'),
       },
     );

From d2c9e834ae07377edbc94128eec4480693b64292 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 1 Jun 2022 10:55:26 -0400
Subject: [PATCH 1390/1603] [DevTools] Run e2e Regression Tests Hourly on
 Circle CI (#24648)

Modifies Circle CI so we run e2e regression tests hourly on Circle CI
---
 .circleci/config.yml | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index d0c2bd991811..f3cd8191ee71 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -241,6 +241,36 @@ jobs:
       - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> --replaceBuild
       - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci
 
+  run_devtools_e2e_tests_for_versions:
+    docker: *docker
+    environment: *environment
+    parallelism: *TEST_PARALLELISM
+    parameters:
+      version:
+        type: string
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Install nested packages from Yarn cache
+          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
+      - run:
+          name: Playwright install deps
+          command: |
+            npx playwright install
+            sudo npx playwright install-deps
+      - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >>
+      - run:
+          environment:
+            RELEASE_CHANNEL: experimental
+          command: ./scripts/circleci/run_devtools_e2e_tests.js << parameters.version >>
+      - run:
+          name: Cleanup build regression folder
+          command: rm -r ./build-regression
+
   yarn_lint_build:
     docker: *docker
     environment: *environment
@@ -542,6 +572,17 @@ workflows:
                 - "16.8" # hooks
                 - "17.0" 
                 - "18.0"
+      - run_devtools_e2e_tests_for_versions:
+          requires:
+            - build_devtools_and_process_artifacts
+          matrix:
+            parameters:
+              version:
+                - "16.0"
+                - "16.5" # schedule package
+                - "16.8" # hooks
+                - "17.0" 
+                - "18.0"
 
   # Used to publish a prerelease manually via the command line
   publish_preleases:

From d300cebde2a63e742ccb8b6aa7b0f61db1ae29b4 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Wed, 1 Jun 2022 13:04:09 -0400
Subject: [PATCH 1391/1603] [DevTools] only polyfill requestAnimationFrame when
 necessary (#24651)

---
 .../react-devtools-extensions/src/main.js     | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 156eb81d07de..a8875eacfd60 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -33,18 +33,25 @@ const isEdge = getBrowserName() === 'Edge';
 // since Chromium v102, requestAnimationFrame no longer fires in devtools_page (i.e. this file)
 // mock requestAnimationFrame with setTimeout as a temporary workaround
 // https://github.com/facebook/react/issues/24626
-// The polyfill is based on https://gist.github.com/jalbam/5fe05443270fa6d8136238ec72accbc0
 if (isChrome || isEdge) {
-  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;
+  const timeoutID = setTimeout(() => {
+    // if requestAnimationFrame is not working, polyfill it
+    // 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;
+  }, 400);
+
+  requestAnimationFrame(() => {
+    clearTimeout(timeoutID);
+  });
 }
 
 let panelCreated = false;

From 7a5b8227c7d67aefe62f015cf0e961e28075d897 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 2 Jun 2022 21:55:35 -0400
Subject: [PATCH 1392/1603] Allow aritfacts download even if CI is broken
 (#24666)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Allow aritfacts download even if CI is broken

Adds an option to the download script to disable the CI check and
continue downloading the artifacts even if CI is broken.

I often rely on this to debug broken build artifacts. I was thinking
the sizebot should also use this when downloading the base artifacts
from main, since for the purposes of size tracking, it really doesn't
matter whether the base commit is broken.

* Sizebot should work even if base rev is broken

Sizebot works by downloading the build artifacts for the base revision
and comparing the fize sizes, but the download script will fail if
the base revision has a failing CI job. This happens more often than it
should because of flaky cron jobs, but even when it does, we shouldn't
let it affect the sizebot — for the purposes of tracking sizes, it
doesn't really matter whether the base revision is broken.
---
 .circleci/config.yml                                     | 6 +++---
 .../release/shared-commands/get-build-id-for-commit.js   | 4 ++--
 scripts/release/shared-commands/parse-params.js          | 9 ++++++++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index f3cd8191ee71..8057e3e31291 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -134,7 +134,7 @@ jobs:
           command: |
               git fetch origin main
               cd ./scripts/release && yarn && cd ../../
-              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main)
+              scripts/release/download-experimental-build.js --commit=$(git merge-base HEAD origin/main) --allowBrokenCI
               mv ./build ./base-build
       - run:
           # TODO: The `download-experimental-build` script copies the npm
@@ -570,7 +570,7 @@ workflows:
                 - "16.0"
                 - "16.5" # schedule package
                 - "16.8" # hooks
-                - "17.0" 
+                - "17.0"
                 - "18.0"
       - run_devtools_e2e_tests_for_versions:
           requires:
@@ -581,7 +581,7 @@ workflows:
                 - "16.0"
                 - "16.5" # schedule package
                 - "16.8" # hooks
-                - "17.0" 
+                - "17.0"
                 - "18.0"
 
   # Used to publish a prerelease manually via the command line
diff --git a/scripts/release/shared-commands/get-build-id-for-commit.js b/scripts/release/shared-commands/get-build-id-for-commit.js
index d3f7ead487b3..fa0c2ebec4a7 100644
--- a/scripts/release/shared-commands/get-build-id-for-commit.js
+++ b/scripts/release/shared-commands/get-build-id-for-commit.js
@@ -15,7 +15,7 @@ function scrapeBuildIDFromStatus(status) {
   return /\/facebook\/react\/([0-9]+)/.exec(status.target_url)[1];
 }
 
-async function getBuildIdForCommit(sha) {
+async function getBuildIdForCommit(sha, allowBrokenCI = false) {
   const retryLimit = Date.now() + RETRY_TIMEOUT;
   retry: while (true) {
     const statusesResponse = await fetch(
@@ -34,7 +34,7 @@ async function getBuildIdForCommit(sha) {
     }
 
     const {statuses, state} = await statusesResponse.json();
-    if (state === 'failure') {
+    if (!allowBrokenCI && state === 'failure') {
       throw new Error(`Base commit is broken: ${sha}`);
     }
     for (let i = 0; i < statuses.length; i++) {
diff --git a/scripts/release/shared-commands/parse-params.js b/scripts/release/shared-commands/parse-params.js
index 4467007ad8a5..1866cbb8aafd 100644
--- a/scripts/release/shared-commands/parse-params.js
+++ b/scripts/release/shared-commands/parse-params.js
@@ -34,6 +34,13 @@ const paramDefinitions = [
     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 () => {
@@ -61,7 +68,7 @@ module.exports = async () => {
   try {
     if (params.build === null) {
       params.build = await logPromise(
-        getBuildIdForCommit(params.commit),
+        getBuildIdForCommit(params.commit, params.allowBrokenCI),
         theme`Getting build ID for commit "${params.commit}"`
       );
     }

From a97a0810eae4428dd55dc1fa1b94ee1f9c18715b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 6 Jun 2022 09:57:35 -0400
Subject: [PATCH 1393/1603] DevTools e2e workflow: Download build artifacts
 (#24676)

When running the hourly DevTools testing workflow, we don't need to
build React from scratch each time; we can download its build artifacts,
like we do for sizebot and the release workflow.
---
 .circleci/config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 8057e3e31291..199f834d2083 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -555,12 +555,12 @@ workflows:
                 - main
     jobs:
       - setup
-      - yarn_build_combined:
+      - get_base_build:
           requires:
             - setup
       - build_devtools_and_process_artifacts:
           requires:
-            - yarn_build_combined
+            - get_base_build
       - run_devtools_tests_for_versions:
           requires:
             - build_devtools_and_process_artifacts

From a621cb099dafb8bd77370ed4f4d832f049642183 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 6 Jun 2022 10:38:02 -0400
Subject: [PATCH 1394/1603] Fix CI: Download to build instead of base-build
 (#24677)

Fixes a mistake in #24676. The get_base_build job downloads artifacts to
`base-build` instead of `build`, so that sizebot can compare the two
directories. For most other jobs, though, we want it to produce the
same output as the normal build job.
---
 .circleci/config.yml | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 199f834d2083..217b9c9adda4 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -122,7 +122,28 @@ jobs:
           paths:
             - build
 
-  get_base_build:
+  download_build:
+    docker: *docker
+    environment: *environment
+    parameters:
+      revision:
+        type: string
+    steps:
+      - checkout
+      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *restore_node_modules
+      - run:
+          name: Download artifacts for revision
+          command: |
+              git fetch origin main
+              cd ./scripts/release && yarn && cd ../../
+              scripts/release/download-experimental-build.js --commit=<< parameters.revision >> --allowBrokenCI
+      - persist_to_workspace:
+          root: .
+          paths:
+            - base-build
+
+  download_base_build_for_sizebot:
     docker: *docker
     environment: *environment
     steps:
@@ -493,7 +514,7 @@ workflows:
                 # - "-r=www-modern --env=production --variant=true"
 
                 # TODO: Test more persistent configurations?
-      - get_base_build:
+      - download_base_build_for_sizebot:
           filters:
             branches:
               ignore:
@@ -506,7 +527,7 @@ workflows:
               ignore:
                 - main
           requires:
-            - get_base_build
+            - download_base_build_for_sizebot
             - yarn_build_combined
       - yarn_lint_build:
           requires:
@@ -555,12 +576,13 @@ workflows:
                 - main
     jobs:
       - setup
-      - get_base_build:
+      - download_build:
           requires:
             - setup
+          revision: << pipeline.git.revision >>
       - build_devtools_and_process_artifacts:
           requires:
-            - get_base_build
+            - download_build
       - run_devtools_tests_for_versions:
           requires:
             - build_devtools_and_process_artifacts

From dfd6f96f7699adc005a1b0a011b7c8e7261345ce Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 6 Jun 2022 11:29:37 -0400
Subject: [PATCH 1395/1603] Fix CI: Remove copypasta from sizebot download job

This was copy pasted from the similar job that exists to download
base artifacts for sizebot.
---
 .circleci/config.yml | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 217b9c9adda4..eb724fb680b5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -138,10 +138,6 @@ jobs:
               git fetch origin main
               cd ./scripts/release && yarn && cd ../../
               scripts/release/download-experimental-build.js --commit=<< parameters.revision >> --allowBrokenCI
-      - persist_to_workspace:
-          root: .
-          paths:
-            - base-build
 
   download_base_build_for_sizebot:
     docker: *docker

From 652dcf6550f3586377e910cf41b4846eff374210 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 6 Jun 2022 11:33:22 -0400
Subject: [PATCH 1396/1603] Fix CI: Persist build artifacts to workspace

The download_build job needs to persist its artifacts to the workspace
so downstream jobs can access them.

Persist the same directories as the normal build job.
---
 .circleci/config.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index eb724fb680b5..123962b04537 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -138,6 +138,10 @@ jobs:
               git fetch origin main
               cd ./scripts/release && yarn && cd ../../
               scripts/release/download-experimental-build.js --commit=<< parameters.revision >> --allowBrokenCI
+      - persist_to_workspace:
+          root: .
+          paths:
+            - build
 
   download_base_build_for_sizebot:
     docker: *docker

From 4ddd8b455ce1dac02c56a18790d5068a7714c1a0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 6 Jun 2022 11:53:11 -0400
Subject: [PATCH 1397/1603] Track revs that intentionally fork the reconciler
 (#24671)

* Track revs that intentionaly fork the reconciler

When we fork the the "old" and "new" reconciler implementations, it can
be difficult to keep track of which commits introduced the delta
in behavior. This makes bisecting difficult if one of the changes
introduces a bug.

I've added a new file called `forked-revisions` that contains the list
of commits that intentionally forked the reconcilers.

In CI, we'll confirm that the reconcilers are identical except for the
changes in the listed revisions. This also ensures that the revisions
can be cleanly reverted.

* [TEST] Add trivial divergence between forks

This should fail CI. We'll see if the next commit fixes it.

* [TEST] Update list of forked revisions

This should fix CI

* Revert temporary fork

This reverts the temporary fork added in the previous commits that was
used to test CI.

* Update error message when CI fails
---
 .circleci/config.yml                | 15 ++++++++++++++-
 scripts/merge-fork/forked-revisions |  0
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 scripts/merge-fork/forked-revisions

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 123962b04537..591cf4adece0 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -425,11 +425,24 @@ jobs:
       - checkout
       - run: yarn workspaces info | head -n -1 > workspace_info.txt
       - *restore_node_modules
+      - run:
+          name: Fetch revisions that contain an intentional fork
+          # This will fetch each revision listed in the `forked-revisions` file,
+          # which may be necessary if it's not part of main. For example, it
+          # may have been part of a PR branch that was squashed on merge.
+          command: |
+            cut -d " " -f 1 scripts/merge-fork/forked-revisions | xargs -r git fetch origin
+      - run:
+          name: Revert forked revisions
+          # This will revert the changes without committing. At the end, it's
+          # expected that both forks will be identical.
+          command: |
+            cut -d " " -f 1 scripts/merge-fork/forked-revisions | xargs -r git revert --no-commit
       - run:
           name: Confirm reconciler forks are the same
           command: |
             yarn replace-fork
-            git diff --quiet || (echo "Reconciler forks are not the same! Run yarn replace-fork. Or, if this was intentional, disable this CI check." && false)
+            git diff --quiet || (echo "Reconciler forks are not the same! Run yarn replace-fork. Or, if this was intentional, add the commit SHA to scripts/merge-fork/forked-revisions." && false)
 
 
 workflows:
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
new file mode 100644
index 000000000000..e69de29bb2d1

From 1cd90d2ccc791f3ed25d93ceb7137746185f6e34 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 6 Jun 2022 12:15:59 -0400
Subject: [PATCH 1398/1603] Refactor of interleaved ("concurrent") update queue
 (#24663)

* Always push updates to interleaved queue first

Interleaves updates (updates that are scheduled while another render
is already is progress) go into a special queue that isn't applied until
the end of the current render. They are transferred to the "real" queue
at the beginning of the next render.

Currently we check during `setState` whether an update should go
directly onto the real queue or onto the special interleaved queue. The
logic is subtle and it can lead to bugs if you mess it up, as in #24400.

Instead, this changes it to always go onto the interleaved queue. The
behavior is the same but the logic is simpler.

As a further step, we can also wait to update the `childLanes` until
the end of the current render. I'll do this in the next step.

* Move setState return path traversal to own call

A lot of the logic around scheduling an update needs access to the
fiber root. To obtain this reference, we must walk up the fiber return
path. We also do this to update `childLanes` on all the parent
nodes, so we can use the same traversal for both purposes.

The traversal currently happens inside `scheduleUpdateOnFiber`, but
sometimes we need to access it beyond that function, too.

So I've hoisted the traversal out of `scheduleUpdateOnFiber` into its
own function call that happens at the beginning of the
`setState` algorithm.

* Rename ReactInterleavedUpdates -> ReactFiberConcurrentUpdates

The scope of this module is expanding so I've renamed accordingly. No
behavioral changes.

* Enqueue and update childLanes in same function

During a setState, the childLanes are updated immediately, even if a
render is already in progress. This can lead to subtle concurrency bugs,
so the plan is to wait until the in-progress render has finished before
updating the childLanes, to prevent subtle concurrency bugs.

As a step toward that change, when scheduling an update, we should not
update the childLanes directly, but instead defer to the
ReactConcurrentUpdates module to do it at the appropriate time.

This makes markUpdateLaneFromFiberToRoot a private function that is
only called from the ReactConcurrentUpdates module.

* [FORKED] Don't update childLanes until after current render

(This is the riskiest commit in the stack. Only affects the "new"
reconciler fork.)

Updates that occur in a concurrent event while a render is already in
progress can't be processed during that render. This is tricky to get
right. Previously we solved this by adding concurrent updates to a
special `interleaved` queue, then transferring the `interleaved` queue
to the `pending` queue after the render phase had completed.

However, we would still mutate the `childLanes` along the parent path
immediately, which can lead to its own subtle data races.

Instead, we can queue the entire operation until after the render phase
has completed. This replaces the need for an `interleaved` field on
every fiber/hook queue.

The main motivation for this change, aside from simplifying the logic a
bit, is so we can read information about the current fiber while we're
walking up its return path, like whether it's inside a hidden tree.
(I haven't done anything like that in this commit, though.)

* Add 17691ac to forked revisions
---
 .../src/createReactNoop.js                    |   2 +-
 .../src/ReactFiberBeginWork.new.js            |  13 +-
 .../src/ReactFiberBeginWork.old.js            |  13 +-
 .../src/ReactFiberClassComponent.new.js       |  16 +-
 .../src/ReactFiberClassComponent.old.js       |  16 +-
 ...w.js => ReactFiberClassUpdateQueue.new.js} |  72 +++---
 ...d.js => ReactFiberClassUpdateQueue.old.js} |  58 ++---
 .../src/ReactFiberCommitWork.new.js           |   4 +-
 .../src/ReactFiberCommitWork.old.js           |   4 +-
 .../src/ReactFiberConcurrentUpdates.new.js    | 206 ++++++++++++++++++
 .../src/ReactFiberConcurrentUpdates.old.js    | 184 ++++++++++++++++
 .../src/ReactFiberHooks.new.js                |  94 +++-----
 .../src/ReactFiberHooks.old.js                |  78 +++----
 .../src/ReactFiberHotReloading.new.js         |   6 +-
 .../src/ReactFiberHotReloading.old.js         |   6 +-
 .../src/ReactFiberInterleavedUpdates.new.js   |  59 -----
 .../src/ReactFiberInterleavedUpdates.old.js   |  59 -----
 .../src/ReactFiberNewContext.new.js           |   4 +-
 .../src/ReactFiberNewContext.old.js           |   4 +-
 .../src/ReactFiberReconciler.new.js           |  78 +++++--
 .../src/ReactFiberReconciler.old.js           |  78 +++++--
 .../src/ReactFiberRoot.new.js                 |   2 +-
 .../src/ReactFiberRoot.old.js                 |   2 +-
 .../src/ReactFiberThrow.new.js                |   4 +-
 .../src/ReactFiberThrow.old.js                |   4 +-
 .../src/ReactFiberWorkLoop.new.js             | 117 +++-------
 .../src/ReactFiberWorkLoop.old.js             | 107 ++-------
 scripts/merge-fork/forked-revisions           |   1 +
 28 files changed, 729 insertions(+), 562 deletions(-)
 rename packages/react-reconciler/src/{ReactUpdateQueue.new.js => ReactFiberClassUpdateQueue.new.js} (94%)
 rename packages/react-reconciler/src/{ReactUpdateQueue.old.js => ReactFiberClassUpdateQueue.old.js} (96%)
 create mode 100644 packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
 delete mode 100644 packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
 delete mode 100644 packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 13a0f49105c2..d055149a0986 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -18,7 +18,7 @@ import type {
   Fiber,
   TransitionTracingCallbacks,
 } from 'react-reconciler/src/ReactInternalTypes';
-import type {UpdateQueue} from 'react-reconciler/src/ReactUpdateQueue';
+import type {UpdateQueue} from 'react-reconciler/src/ReactFiberClassUpdateQueue.new';
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {RootTag} from 'react-reconciler/src/ReactRootTags';
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index f1f5913b0143..4f227ed4710c 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -33,7 +33,7 @@ import type {
   CacheComponentState,
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.new';
-import type {UpdateQueue} from './ReactUpdateQueue.new';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import type {RootState} from './ReactFiberRoot.new';
 import {
   enableSuspenseAvoidThisFallback,
@@ -131,7 +131,7 @@ import {
   cloneUpdateQueue,
   initializeUpdateQueue,
   enqueueCapturedUpdate,
-} from './ReactUpdateQueue.new';
+} from './ReactFiberClassUpdateQueue.new';
 import {
   NoLane,
   NoLanes,
@@ -234,6 +234,7 @@ import {
   getWorkInProgressRoot,
   pushRenderLanes,
 } from './ReactFiberWorkLoop.new';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.new';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.new';
 import {createCapturedValue} from './ReactCapturedValue';
@@ -2626,7 +2627,13 @@ function updateDehydratedSuspenseComponent(
           suspenseState.retryLane = attemptHydrationAtLane;
           // TODO: Ideally this would inherit the event time of the current render
           const eventTime = NoTimestamp;
-          scheduleUpdateOnFiber(current, attemptHydrationAtLane, eventTime);
+          enqueueConcurrentRenderForLane(current, attemptHydrationAtLane);
+          scheduleUpdateOnFiber(
+            root,
+            current,
+            attemptHydrationAtLane,
+            eventTime,
+          );
         } 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
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 2303227185d2..63a8ae2212c7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -33,7 +33,7 @@ import type {
   CacheComponentState,
   SpawnedCachePool,
 } from './ReactFiberCacheComponent.old';
-import type {UpdateQueue} from './ReactUpdateQueue.old';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import type {RootState} from './ReactFiberRoot.old';
 import {
   enableSuspenseAvoidThisFallback,
@@ -131,7 +131,7 @@ import {
   cloneUpdateQueue,
   initializeUpdateQueue,
   enqueueCapturedUpdate,
-} from './ReactUpdateQueue.old';
+} from './ReactFiberClassUpdateQueue.old';
 import {
   NoLane,
   NoLanes,
@@ -234,6 +234,7 @@ import {
   getWorkInProgressRoot,
   pushRenderLanes,
 } from './ReactFiberWorkLoop.old';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
 import {createCapturedValue} from './ReactCapturedValue';
@@ -2626,7 +2627,13 @@ function updateDehydratedSuspenseComponent(
           suspenseState.retryLane = attemptHydrationAtLane;
           // TODO: Ideally this would inherit the event time of the current render
           const eventTime = NoTimestamp;
-          scheduleUpdateOnFiber(current, attemptHydrationAtLane, eventTime);
+          enqueueConcurrentRenderForLane(current, attemptHydrationAtLane);
+          scheduleUpdateOnFiber(
+            root,
+            current,
+            attemptHydrationAtLane,
+            eventTime,
+          );
         } 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
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 23bc16ecce99..45977bfa6fee 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
-import type {UpdateQueue} from './ReactUpdateQueue.new';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import type {Flags} from './ReactFiberFlags';
 
 import * as React from 'react';
@@ -58,7 +58,7 @@ import {
   ForceUpdate,
   initializeUpdateQueue,
   cloneUpdateQueue,
-} from './ReactUpdateQueue.new';
+} from './ReactFiberClassUpdateQueue.new';
 import {NoLanes} from './ReactFiberLane.new';
 import {
   cacheContext,
@@ -215,9 +215,9 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update, lane);
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueUpdate(fiber, update, lane);
     if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitions(root, fiber, lane);
     }
 
@@ -250,9 +250,9 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update, lane);
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueUpdate(fiber, update, lane);
     if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitions(root, fiber, lane);
     }
 
@@ -284,9 +284,9 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update, lane);
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueUpdate(fiber, update, lane);
     if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitions(root, fiber, lane);
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index 793156401efb..a921cf2f47ba 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
-import type {UpdateQueue} from './ReactUpdateQueue.old';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import type {Flags} from './ReactFiberFlags';
 
 import * as React from 'react';
@@ -58,7 +58,7 @@ import {
   ForceUpdate,
   initializeUpdateQueue,
   cloneUpdateQueue,
-} from './ReactUpdateQueue.old';
+} from './ReactFiberClassUpdateQueue.old';
 import {NoLanes} from './ReactFiberLane.old';
 import {
   cacheContext,
@@ -215,9 +215,9 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update, lane);
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueUpdate(fiber, update, lane);
     if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitions(root, fiber, lane);
     }
 
@@ -250,9 +250,9 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update, lane);
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueUpdate(fiber, update, lane);
     if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitions(root, fiber, lane);
     }
 
@@ -284,9 +284,9 @@ const classComponentUpdater = {
       update.callback = callback;
     }
 
-    enqueueUpdate(fiber, update, lane);
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueUpdate(fiber, update, lane);
     if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitions(root, fiber, lane);
     }
 
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
similarity index 94%
rename from packages/react-reconciler/src/ReactUpdateQueue.new.js
rename to packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
index 1f665a88dfa4..0311920ba299 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@@ -107,9 +107,12 @@ import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags
 import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   markSkippedUpdateLanes,
-  isInterleavedUpdate,
+  isUnsafeClassRenderPhaseUpdate,
 } from './ReactFiberWorkLoop.new';
-import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
+import {
+  enqueueConcurrentClassUpdate,
+  unsafe_markUpdateLaneFromFiberToRoot,
+} from './ReactFiberConcurrentUpdates.new';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
 import assign from 'shared/assign';
@@ -129,7 +132,6 @@ export type Update<State> = {|
 
 export type SharedQueue<State> = {|
   pending: Update<State> | null,
-  interleaved: Update<State> | null,
   lanes: Lanes,
 |};
 
@@ -169,7 +171,6 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     lastBaseUpdate: null,
     shared: {
       pending: null,
-      interleaved: null,
       lanes: NoLanes,
     },
     effects: null,
@@ -214,40 +215,15 @@ 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;
+    return null;
   }
 
   const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
 
-  if (isInterleavedUpdate(fiber, lane)) {
-    const interleaved = sharedQueue.interleaved;
-    if (interleaved === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-      // At the end of the current render, this queue's interleaved updates will
-      // be transferred to the pending queue.
-      pushInterleavedQueue(sharedQueue);
-    } else {
-      update.next = interleaved.next;
-      interleaved.next = update;
-    }
-    sharedQueue.interleaved = update;
-  } else {
-    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;
-  }
-
   if (__DEV__) {
     if (
       currentlyProcessingQueue === sharedQueue &&
@@ -262,6 +238,28 @@ export function enqueueUpdate<State>(
       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) {
@@ -622,17 +620,7 @@ export function processUpdateQueue<State>(
     queue.firstBaseUpdate = newFirstBaseUpdate;
     queue.lastBaseUpdate = newLastBaseUpdate;
 
-    // Interleaved updates are stored on a separate queue. We aren't going to
-    // process them during this render, but we do need to track which lanes
-    // are remaining.
-    const lastInterleaved = queue.shared.interleaved;
-    if (lastInterleaved !== null) {
-      let interleaved = lastInterleaved;
-      do {
-        newLanes = mergeLanes(newLanes, interleaved.lane);
-        interleaved = ((interleaved: any).next: Update<State>);
-      } while (interleaved !== lastInterleaved);
-    } else if (firstBaseUpdate === null) {
+    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;
diff --git a/packages/react-reconciler/src/ReactUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
similarity index 96%
rename from packages/react-reconciler/src/ReactUpdateQueue.old.js
rename to packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
index e59ea26f2161..cc1643eeefed 100644
--- a/packages/react-reconciler/src/ReactUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
@@ -107,9 +107,12 @@ import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags
 import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   markSkippedUpdateLanes,
-  isInterleavedUpdate,
+  isUnsafeClassRenderPhaseUpdate,
 } from './ReactFiberWorkLoop.old';
-import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
+import {
+  enqueueConcurrentClassUpdate,
+  unsafe_markUpdateLaneFromFiberToRoot,
+} from './ReactFiberConcurrentUpdates.old';
 import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
 import assign from 'shared/assign';
@@ -214,40 +217,15 @@ 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;
+    return null;
   }
 
   const sharedQueue: SharedQueue<State> = (updateQueue: any).shared;
 
-  if (isInterleavedUpdate(fiber, lane)) {
-    const interleaved = sharedQueue.interleaved;
-    if (interleaved === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-      // At the end of the current render, this queue's interleaved updates will
-      // be transferred to the pending queue.
-      pushInterleavedQueue(sharedQueue);
-    } else {
-      update.next = interleaved.next;
-      interleaved.next = update;
-    }
-    sharedQueue.interleaved = update;
-  } else {
-    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;
-  }
-
   if (__DEV__) {
     if (
       currentlyProcessingQueue === sharedQueue &&
@@ -262,6 +240,28 @@ export function enqueueUpdate<State>(
       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) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 7e8459d496d9..d023c1f776b3 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -19,7 +19,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
-import type {UpdateQueue} from './ReactUpdateQueue.new';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {
@@ -100,7 +100,7 @@ import {
   startPassiveEffectTimer,
 } from './ReactProfilerTimer.new';
 import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
-import {commitUpdateQueue} from './ReactUpdateQueue.new';
+import {commitUpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import {
   getPublicInstance,
   supportsMutation,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 4dceedd3a303..a9eae21939df 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -19,7 +19,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
-import type {UpdateQueue} from './ReactUpdateQueue.old';
+import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {
@@ -100,7 +100,7 @@ import {
   startPassiveEffectTimer,
 } from './ReactProfilerTimer.old';
 import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
-import {commitUpdateQueue} from './ReactUpdateQueue.old';
+import {commitUpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import {
   getPublicInstance,
   supportsMutation,
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
new file mode 100644
index 000000000000..ed5a02cfea9e
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -0,0 +1,206 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {FiberRoot} from './ReactInternalTypes';
+import type {
+  UpdateQueue as HookQueue,
+  Update as HookUpdate,
+} from './ReactFiberHooks.new';
+import type {
+  SharedQueue as ClassQueue,
+  Update as ClassUpdate,
+} from './ReactFiberClassUpdateQueue.new';
+import type {Lane, Lanes} from './ReactFiberLane.new';
+
+import {warnAboutUpdateOnNotYetMountedFiberInDEV} from './ReactFiberWorkLoop.new';
+import {NoLane, NoLanes, mergeLanes} from './ReactFiberLane.new';
+import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
+import {HostRoot} from './ReactWorkTags';
+
+type ConcurrentUpdate = {
+  next: ConcurrentUpdate,
+};
+
+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;
+
+export function finishQueueingConcurrentUpdates(): Lanes {
+  const endIndex = concurrentQueuesIndex;
+  concurrentQueuesIndex = 0;
+
+  let lanes = 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) {
+      lanes = mergeLanes(lanes, lane);
+      markUpdateLaneFromFiberToRoot(fiber, lane);
+    }
+  }
+
+  return lanes;
+}
+
+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;
+
+  // 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);
+}
+
+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 {
+  markUpdateLaneFromFiberToRoot(sourceFiber, lane);
+  return getRootForUpdatedFiber(sourceFiber);
+}
+
+function markUpdateLaneFromFiberToRoot(sourceFiber: Fiber, lane: Lane): void {
+  // 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 parent = sourceFiber.return;
+  while (parent !== null) {
+    parent.childLanes = mergeLanes(parent.childLanes, lane);
+    alternate = parent.alternate;
+    if (alternate !== null) {
+      alternate.childLanes = mergeLanes(alternate.childLanes, lane);
+    }
+    parent = parent.return;
+  }
+}
+
+function getRootForUpdatedFiber(sourceFiber: Fiber): FiberRoot | null {
+  // 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/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
new file mode 100644
index 000000000000..8f3a11c938f6
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -0,0 +1,184 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {FiberRoot} from './ReactInternalTypes';
+import type {
+  UpdateQueue as HookQueue,
+  Update as HookUpdate,
+} from './ReactFiberHooks.old';
+import type {
+  SharedQueue as ClassQueue,
+  Update as ClassUpdate,
+} from './ReactFiberClassUpdateQueue.old';
+import type {Lane} from './ReactFiberLane.old';
+
+import {warnAboutUpdateOnNotYetMountedFiberInDEV} from './ReactFiberWorkLoop.old';
+import {mergeLanes} from './ReactFiberLane.old';
+import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
+import {HostRoot} from './ReactWorkTags';
+
+// An array of all update queues that received updates during the current
+// render. When this render exits, either because it finishes or because it is
+// interrupted, the interleaved updates will be transferred onto the main part
+// of the queue.
+let concurrentQueues: Array<
+  HookQueue<any, any> | ClassQueue<any>,
+> | null = null;
+
+export function pushConcurrentUpdateQueue(
+  queue: HookQueue<any, any> | ClassQueue<any>,
+) {
+  if (concurrentQueues === null) {
+    concurrentQueues = [queue];
+  } else {
+    concurrentQueues.push(queue);
+  }
+}
+
+export function finishQueueingConcurrentUpdates() {
+  // Transfer the interleaved updates onto the main queue. Each queue has a
+  // `pending` field and an `interleaved` field. When they are not null, they
+  // point to the last node in a circular linked list. We need to append the
+  // interleaved list to the end of the pending list by joining them into a
+  // single, circular list.
+  if (concurrentQueues !== null) {
+    for (let i = 0; i < concurrentQueues.length; i++) {
+      const queue = concurrentQueues[i];
+      const lastInterleavedUpdate = queue.interleaved;
+      if (lastInterleavedUpdate !== null) {
+        queue.interleaved = null;
+        const firstInterleavedUpdate = lastInterleavedUpdate.next;
+        const lastPendingUpdate = queue.pending;
+        if (lastPendingUpdate !== null) {
+          const firstPendingUpdate = lastPendingUpdate.next;
+          lastPendingUpdate.next = (firstInterleavedUpdate: any);
+          lastInterleavedUpdate.next = (firstPendingUpdate: any);
+        }
+        queue.pending = (lastInterleavedUpdate: any);
+      }
+    }
+    concurrentQueues = null;
+  }
+}
+
+export function enqueueConcurrentHookUpdate<S, A>(
+  fiber: Fiber,
+  queue: HookQueue<S, A>,
+  update: HookUpdate<S, A>,
+  lane: Lane,
+) {
+  const interleaved = queue.interleaved;
+  if (interleaved === null) {
+    // This is the first update. Create a circular list.
+    update.next = update;
+    // At the end of the current render, this queue's interleaved updates will
+    // be transferred to the pending queue.
+    pushConcurrentUpdateQueue(queue);
+  } else {
+    update.next = interleaved.next;
+    interleaved.next = update;
+  }
+  queue.interleaved = update;
+
+  return markUpdateLaneFromFiberToRoot(fiber, lane);
+}
+
+export function enqueueConcurrentHookUpdateAndEagerlyBailout<S, A>(
+  fiber: Fiber,
+  queue: HookQueue<S, A>,
+  update: HookUpdate<S, A>,
+  lane: Lane,
+): void {
+  const interleaved = queue.interleaved;
+  if (interleaved === null) {
+    // This is the first update. Create a circular list.
+    update.next = update;
+    // At the end of the current render, this queue's interleaved updates will
+    // be transferred to the pending queue.
+    pushConcurrentUpdateQueue(queue);
+  } else {
+    update.next = interleaved.next;
+    interleaved.next = update;
+  }
+  queue.interleaved = update;
+}
+
+export function enqueueConcurrentClassUpdate<State>(
+  fiber: Fiber,
+  queue: ClassQueue<State>,
+  update: ClassUpdate<State>,
+  lane: Lane,
+) {
+  const interleaved = queue.interleaved;
+  if (interleaved === null) {
+    // This is the first update. Create a circular list.
+    update.next = update;
+    // At the end of the current render, this queue's interleaved updates will
+    // be transferred to the pending queue.
+    pushConcurrentUpdateQueue(queue);
+  } else {
+    update.next = interleaved.next;
+    interleaved.next = update;
+  }
+  queue.interleaved = update;
+
+  return markUpdateLaneFromFiberToRoot(fiber, lane);
+}
+
+export function enqueueConcurrentRenderForLane(fiber: Fiber, lane: Lane) {
+  return markUpdateLaneFromFiberToRoot(fiber, lane);
+}
+
+// Calling this function outside this module should only be done for backwards
+// compatibility and should always be accompanied by a warning.
+export const unsafe_markUpdateLaneFromFiberToRoot = markUpdateLaneFromFiberToRoot;
+
+function markUpdateLaneFromFiberToRoot(
+  sourceFiber: Fiber,
+  lane: Lane,
+): FiberRoot | null {
+  // 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);
+  }
+  if (__DEV__) {
+    if (
+      alternate === null &&
+      (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags
+    ) {
+      warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
+    }
+  }
+  // Walk the parent path to the root and update the child lanes.
+  let node = sourceFiber;
+  let parent = sourceFiber.return;
+  while (parent !== null) {
+    parent.childLanes = mergeLanes(parent.childLanes, lane);
+    alternate = parent.alternate;
+    if (alternate !== null) {
+      alternate.childLanes = mergeLanes(alternate.childLanes, lane);
+    } else {
+      if (__DEV__) {
+        if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
+          warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
+        }
+      }
+    }
+    node = parent;
+    parent = parent.return;
+  }
+  if (node.tag === HostRoot) {
+    const root: FiberRoot = node.stateNode;
+    return root;
+  } else {
+    return null;
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 1742d00ae158..697e87dd0137 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -87,7 +87,6 @@ import {
   requestUpdateLane,
   requestEventTime,
   markSkippedUpdateLanes,
-  isInterleavedUpdate,
 } from './ReactFiberWorkLoop.new';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -111,14 +110,18 @@ import {
   createUpdate as createLegacyQueueUpdate,
   enqueueUpdate as enqueueLegacyQueueUpdate,
   entangleTransitions as entangleLegacyQueueTransitions,
-} from './ReactUpdateQueue.new';
-import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.new';
+} from './ReactFiberClassUpdateQueue.new';
+import {
+  enqueueConcurrentHookUpdate,
+  enqueueConcurrentHookUpdateAndEagerlyBailout,
+  enqueueConcurrentRenderForLane,
+} from './ReactFiberConcurrentUpdates.new';
 import {getTreeId} from './ReactFiberTreeContext.new';
 import {now} from './Scheduler';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
-type Update<S, A> = {|
+export type Update<S, A> = {|
   lane: Lane,
   action: A,
   hasEagerState: boolean,
@@ -128,7 +131,6 @@ type Update<S, A> = {|
 
 export type UpdateQueue<S, A> = {|
   pending: Update<S, A> | null,
-  interleaved: Update<S, A> | null,
   lanes: Lanes,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
@@ -738,7 +740,6 @@ function mountReducer<S, I, A>(
   hook.memoizedState = hook.baseState = initialState;
   const queue: UpdateQueue<S, A> = {
     pending: null,
-    interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: reducer,
@@ -885,22 +886,7 @@ function updateReducer<S, I, A>(
     queue.lastRenderedState = newState;
   }
 
-  // Interleaved updates are stored on a separate queue. We aren't going to
-  // process them during this render, but we do need to track which lanes
-  // are remaining.
-  const lastInterleaved = queue.interleaved;
-  if (lastInterleaved !== null) {
-    let interleaved = lastInterleaved;
-    do {
-      const interleavedLane = interleaved.lane;
-      currentlyRenderingFiber.lanes = mergeLanes(
-        currentlyRenderingFiber.lanes,
-        interleavedLane,
-      );
-      markSkippedUpdateLanes(interleavedLane);
-      interleaved = ((interleaved: any).next: Update<S, A>);
-    } while (interleaved !== lastInterleaved);
-  } else if (baseQueue === null) {
+  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;
@@ -1208,7 +1194,6 @@ function useMutableSource<Source, Snapshot>(
     // including any interleaving updates that occur.
     const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
       pending: null,
-      interleaved: null,
       lanes: NoLanes,
       dispatch: null,
       lastRenderedReducer: basicStateReducer,
@@ -1497,7 +1482,10 @@ function checkIfSnapshotChanged(inst) {
 }
 
 function forceStoreRerender(fiber) {
-  scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+  const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+  if (root !== null) {
+    scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+  }
 }
 
 function mountState<S>(
@@ -1511,7 +1499,6 @@ function mountState<S>(
   hook.memoizedState = hook.baseState = initialState;
   const queue: UpdateQueue<S, BasicStateAction<S>> = {
     pending: null,
-    interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
@@ -2153,10 +2140,13 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
     switch (provider.tag) {
       case CacheComponent:
       case HostRoot: {
+        // Schedule an update on the cache boundary to trigger a refresh.
         const lane = requestUpdateLane(provider);
         const eventTime = requestEventTime();
-        const root = scheduleUpdateOnFiber(provider, lane, eventTime);
+        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
+        const root = enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         if (root !== null) {
+          scheduleUpdateOnFiber(root, provider, lane, eventTime);
           entangleLegacyQueueTransitions(root, provider, lane);
         }
 
@@ -2170,13 +2160,10 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           seededCache.data.set(seedKey, seedValue);
         }
 
-        // Schedule an update on the cache boundary to trigger a refresh.
-        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
         const payload = {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -2213,10 +2200,10 @@ function dispatchReducerAction<S, A>(
   if (isRenderPhaseUpdate(fiber)) {
     enqueueRenderPhaseUpdate(queue, update);
   } else {
-    enqueueUpdate(fiber, queue, update, lane);
-    const eventTime = requestEventTime();
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
     if (root !== null) {
+      const eventTime = requestEventTime();
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitionUpdate(root, queue, lane);
     }
   }
@@ -2252,8 +2239,6 @@ function dispatchSetState<S, A>(
   if (isRenderPhaseUpdate(fiber)) {
     enqueueRenderPhaseUpdate(queue, update);
   } else {
-    enqueueUpdate(fiber, queue, update, lane);
-
     const alternate = fiber.alternate;
     if (
       fiber.lanes === NoLanes &&
@@ -2283,6 +2268,8 @@ function dispatchSetState<S, A>(
             // 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;
           }
         } catch (error) {
@@ -2294,9 +2281,11 @@ function dispatchSetState<S, A>(
         }
       }
     }
-    const eventTime = requestEventTime();
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
     if (root !== null) {
+      const eventTime = requestEventTime();
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitionUpdate(root, queue, lane);
     }
   }
@@ -2331,38 +2320,7 @@ function enqueueRenderPhaseUpdate<S, A>(
   queue.pending = update;
 }
 
-function enqueueUpdate<S, A>(
-  fiber: Fiber,
-  queue: UpdateQueue<S, A>,
-  update: Update<S, A>,
-  lane: Lane,
-) {
-  if (isInterleavedUpdate(fiber, lane)) {
-    const interleaved = queue.interleaved;
-    if (interleaved === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-      // At the end of the current render, this queue's interleaved updates will
-      // be transferred to the pending queue.
-      pushInterleavedQueue(queue);
-    } else {
-      update.next = interleaved.next;
-      interleaved.next = update;
-    }
-    queue.interleaved = update;
-  } else {
-    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>,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 20717bde1cd7..fc25083fe425 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -87,7 +87,6 @@ import {
   requestUpdateLane,
   requestEventTime,
   markSkippedUpdateLanes,
-  isInterleavedUpdate,
 } from './ReactFiberWorkLoop.old';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -111,14 +110,18 @@ import {
   createUpdate as createLegacyQueueUpdate,
   enqueueUpdate as enqueueLegacyQueueUpdate,
   entangleTransitions as entangleLegacyQueueTransitions,
-} from './ReactUpdateQueue.old';
-import {pushInterleavedQueue} from './ReactFiberInterleavedUpdates.old';
+} from './ReactFiberClassUpdateQueue.old';
+import {
+  enqueueConcurrentHookUpdate,
+  enqueueConcurrentHookUpdateAndEagerlyBailout,
+  enqueueConcurrentRenderForLane,
+} from './ReactFiberConcurrentUpdates.old';
 import {getTreeId} from './ReactFiberTreeContext.old';
 import {now} from './Scheduler';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
-type Update<S, A> = {|
+export type Update<S, A> = {|
   lane: Lane,
   action: A,
   hasEagerState: boolean,
@@ -1497,7 +1500,10 @@ function checkIfSnapshotChanged(inst) {
 }
 
 function forceStoreRerender(fiber) {
-  scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+  const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+  if (root !== null) {
+    scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+  }
 }
 
 function mountState<S>(
@@ -2153,10 +2159,13 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
     switch (provider.tag) {
       case CacheComponent:
       case HostRoot: {
+        // Schedule an update on the cache boundary to trigger a refresh.
         const lane = requestUpdateLane(provider);
         const eventTime = requestEventTime();
-        const root = scheduleUpdateOnFiber(provider, lane, eventTime);
+        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
+        const root = enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         if (root !== null) {
+          scheduleUpdateOnFiber(root, provider, lane, eventTime);
           entangleLegacyQueueTransitions(root, provider, lane);
         }
 
@@ -2170,13 +2179,10 @@ function refreshCache<T>(fiber: Fiber, seedKey: ?() => T, seedValue: T) {
           seededCache.data.set(seedKey, seedValue);
         }
 
-        // Schedule an update on the cache boundary to trigger a refresh.
-        const refreshUpdate = createLegacyQueueUpdate(eventTime, lane);
         const payload = {
           cache: seededCache,
         };
         refreshUpdate.payload = payload;
-        enqueueLegacyQueueUpdate(provider, refreshUpdate, lane);
         return;
       }
     }
@@ -2213,10 +2219,10 @@ function dispatchReducerAction<S, A>(
   if (isRenderPhaseUpdate(fiber)) {
     enqueueRenderPhaseUpdate(queue, update);
   } else {
-    enqueueUpdate(fiber, queue, update, lane);
-    const eventTime = requestEventTime();
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
     if (root !== null) {
+      const eventTime = requestEventTime();
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitionUpdate(root, queue, lane);
     }
   }
@@ -2252,8 +2258,6 @@ function dispatchSetState<S, A>(
   if (isRenderPhaseUpdate(fiber)) {
     enqueueRenderPhaseUpdate(queue, update);
   } else {
-    enqueueUpdate(fiber, queue, update, lane);
-
     const alternate = fiber.alternate;
     if (
       fiber.lanes === NoLanes &&
@@ -2283,6 +2287,13 @@ function dispatchSetState<S, A>(
             // 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,
+              lane,
+            );
             return;
           }
         } catch (error) {
@@ -2294,9 +2305,11 @@ function dispatchSetState<S, A>(
         }
       }
     }
-    const eventTime = requestEventTime();
-    const root = scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    const root = enqueueConcurrentHookUpdate(fiber, queue, update, lane);
     if (root !== null) {
+      const eventTime = requestEventTime();
+      scheduleUpdateOnFiber(root, fiber, lane, eventTime);
       entangleTransitionUpdate(root, queue, lane);
     }
   }
@@ -2331,38 +2344,7 @@ function enqueueRenderPhaseUpdate<S, A>(
   queue.pending = update;
 }
 
-function enqueueUpdate<S, A>(
-  fiber: Fiber,
-  queue: UpdateQueue<S, A>,
-  update: Update<S, A>,
-  lane: Lane,
-) {
-  if (isInterleavedUpdate(fiber, lane)) {
-    const interleaved = queue.interleaved;
-    if (interleaved === null) {
-      // This is the first update. Create a circular list.
-      update.next = update;
-      // At the end of the current render, this queue's interleaved updates will
-      // be transferred to the pending queue.
-      pushInterleavedQueue(queue);
-    } else {
-      update.next = interleaved.next;
-      interleaved.next = update;
-    }
-    queue.interleaved = update;
-  } else {
-    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>,
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index 0867ffeb7843..22b78280f9cb 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -20,6 +20,7 @@ import {
   scheduleUpdateOnFiber,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.new';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.new';
 import {updateContainer} from './ReactFiberReconciler.new';
 import {emptyContextObject} from './ReactFiberContext.new';
 import {SyncLane, NoTimestamp} from './ReactFiberLane.new';
@@ -321,7 +322,10 @@ function scheduleFibersWithFamiliesRecursively(
       fiber._debugNeedsRemount = true;
     }
     if (needsRemount || needsRender) {
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
     if (child !== null && !needsRemount) {
       scheduleFibersWithFamiliesRecursively(
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index 4a5f53d3be73..805176560c4b 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -20,6 +20,7 @@ import {
   scheduleUpdateOnFiber,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.old';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.old';
 import {updateContainer} from './ReactFiberReconciler.old';
 import {emptyContextObject} from './ReactFiberContext.old';
 import {SyncLane, NoTimestamp} from './ReactFiberLane.old';
@@ -321,7 +322,10 @@ function scheduleFibersWithFamiliesRecursively(
       fiber._debugNeedsRemount = true;
     }
     if (needsRemount || needsRender) {
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
     if (child !== null && !needsRemount) {
       scheduleFibersWithFamiliesRecursively(
diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
deleted file mode 100644
index 010730b1e78e..000000000000
--- a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.new.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {UpdateQueue as HookQueue} from './ReactFiberHooks.new';
-import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.new';
-
-// An array of all update queues that received updates during the current
-// render. When this render exits, either because it finishes or because it is
-// interrupted, the interleaved updates will be transferred onto the main part
-// of the queue.
-let interleavedQueues: Array<
-  HookQueue<any, any> | ClassQueue<any>,
-> | null = null;
-
-export function pushInterleavedQueue(
-  queue: HookQueue<any, any> | ClassQueue<any>,
-) {
-  if (interleavedQueues === null) {
-    interleavedQueues = [queue];
-  } else {
-    interleavedQueues.push(queue);
-  }
-}
-
-export function hasInterleavedUpdates() {
-  return interleavedQueues !== null;
-}
-
-export function enqueueInterleavedUpdates() {
-  // Transfer the interleaved updates onto the main queue. Each queue has a
-  // `pending` field and an `interleaved` field. When they are not null, they
-  // point to the last node in a circular linked list. We need to append the
-  // interleaved list to the end of the pending list by joining them into a
-  // single, circular list.
-  if (interleavedQueues !== null) {
-    for (let i = 0; i < interleavedQueues.length; i++) {
-      const queue = interleavedQueues[i];
-      const lastInterleavedUpdate = queue.interleaved;
-      if (lastInterleavedUpdate !== null) {
-        queue.interleaved = null;
-        const firstInterleavedUpdate = lastInterleavedUpdate.next;
-        const lastPendingUpdate = queue.pending;
-        if (lastPendingUpdate !== null) {
-          const firstPendingUpdate = lastPendingUpdate.next;
-          lastPendingUpdate.next = (firstInterleavedUpdate: any);
-          lastInterleavedUpdate.next = (firstPendingUpdate: any);
-        }
-        queue.pending = (lastInterleavedUpdate: any);
-      }
-    }
-    interleavedQueues = null;
-  }
-}
diff --git a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js b/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
deleted file mode 100644
index 0d3319801daa..000000000000
--- a/packages/react-reconciler/src/ReactFiberInterleavedUpdates.old.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {UpdateQueue as HookQueue} from './ReactFiberHooks.old';
-import type {SharedQueue as ClassQueue} from './ReactUpdateQueue.old';
-
-// An array of all update queues that received updates during the current
-// render. When this render exits, either because it finishes or because it is
-// interrupted, the interleaved updates will be transferred onto the main part
-// of the queue.
-let interleavedQueues: Array<
-  HookQueue<any, any> | ClassQueue<any>,
-> | null = null;
-
-export function pushInterleavedQueue(
-  queue: HookQueue<any, any> | ClassQueue<any>,
-) {
-  if (interleavedQueues === null) {
-    interleavedQueues = [queue];
-  } else {
-    interleavedQueues.push(queue);
-  }
-}
-
-export function hasInterleavedUpdates() {
-  return interleavedQueues !== null;
-}
-
-export function enqueueInterleavedUpdates() {
-  // Transfer the interleaved updates onto the main queue. Each queue has a
-  // `pending` field and an `interleaved` field. When they are not null, they
-  // point to the last node in a circular linked list. We need to append the
-  // interleaved list to the end of the pending list by joining them into a
-  // single, circular list.
-  if (interleavedQueues !== null) {
-    for (let i = 0; i < interleavedQueues.length; i++) {
-      const queue = interleavedQueues[i];
-      const lastInterleavedUpdate = queue.interleaved;
-      if (lastInterleavedUpdate !== null) {
-        queue.interleaved = null;
-        const firstInterleavedUpdate = lastInterleavedUpdate.next;
-        const lastPendingUpdate = queue.pending;
-        if (lastPendingUpdate !== null) {
-          const firstPendingUpdate = lastPendingUpdate.next;
-          lastPendingUpdate.next = (firstInterleavedUpdate: any);
-          lastInterleavedUpdate.next = (firstPendingUpdate: any);
-        }
-        queue.pending = (lastInterleavedUpdate: any);
-      }
-    }
-    interleavedQueues = null;
-  }
-}
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index 68862e568818..eae7b232c5eb 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -15,7 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Lanes} from './ReactFiberLane.new';
-import type {SharedQueue} from './ReactUpdateQueue.new';
+import type {SharedQueue} from './ReactFiberClassUpdateQueue.new';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.new';
@@ -39,7 +39,7 @@ import {
 } from './ReactFiberFlags';
 
 import is from 'shared/objectIs';
-import {createUpdate, ForceUpdate} from './ReactUpdateQueue.new';
+import {createUpdate, ForceUpdate} from './ReactFiberClassUpdateQueue.new';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.new';
 import {
   enableLazyContextPropagation,
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index de96664e774a..cbc2d0069b35 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -15,7 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Lanes} from './ReactFiberLane.old';
-import type {SharedQueue} from './ReactUpdateQueue.old';
+import type {SharedQueue} from './ReactFiberClassUpdateQueue.old';
 
 import {isPrimaryRenderer} from './ReactFiberHostConfig';
 import {createCursor, push, pop} from './ReactFiberStack.old';
@@ -39,7 +39,7 @@ import {
 } from './ReactFiberFlags';
 
 import is from 'shared/objectIs';
-import {createUpdate, ForceUpdate} from './ReactUpdateQueue.old';
+import {createUpdate, ForceUpdate} from './ReactFiberClassUpdateQueue.old';
 import {markWorkInProgressReceivedUpdate} from './ReactFiberBeginWork.old';
 import {
   enableLazyContextPropagation,
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index 136276637d3e..f9899c93b921 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -68,11 +68,12 @@ import {
   discreteUpdates,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.new';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.new';
 import {
   createUpdate,
   enqueueUpdate,
   entangleTransitions,
-} from './ReactUpdateQueue.new';
+} from './ReactFiberClassUpdateQueue.new';
 import {
   isRendering as ReactCurrentFiberIsRendering,
   current as ReactCurrentFiberCurrent,
@@ -377,9 +378,9 @@ export function updateContainer(
     update.callback = callback;
   }
 
-  enqueueUpdate(current, update, lane);
-  const root = scheduleUpdateOnFiber(current, lane, eventTime);
+  const root = enqueueUpdate(current, update, lane);
   if (root !== null) {
+    scheduleUpdateOnFiber(root, current, lane, eventTime);
     entangleTransitions(root, current, lane);
   }
 
@@ -413,7 +414,7 @@ export function getPublicRootInstance(
 
 export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
-    case HostRoot:
+    case HostRoot: {
       const root: FiberRoot = fiber.stateNode;
       if (isRootDehydrated(root)) {
         // Flush the first scheduled "update".
@@ -421,15 +422,22 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
         flushRoot(root, lanes);
       }
       break;
-    case SuspenseComponent:
-      const eventTime = requestEventTime();
-      flushSync(() => scheduleUpdateOnFiber(fiber, SyncLane, eventTime));
+    }
+    case SuspenseComponent: {
+      flushSync(() => {
+        const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+        if (root !== null) {
+          const eventTime = requestEventTime();
+          scheduleUpdateOnFiber(root, fiber, SyncLane, eventTime);
+        }
+      });
       // 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;
+    }
   }
 }
 
@@ -460,9 +468,12 @@ export function attemptDiscreteHydration(fiber: Fiber): void {
     // Suspense.
     return;
   }
-  const eventTime = requestEventTime();
   const lane = SyncLane;
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    const eventTime = requestEventTime();
+    scheduleUpdateOnFiber(root, fiber, lane, eventTime);
+  }
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -474,9 +485,12 @@ export function attemptContinuousHydration(fiber: Fiber): void {
     // Suspense.
     return;
   }
-  const eventTime = requestEventTime();
   const lane = SelectiveHydrationLane;
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    const eventTime = requestEventTime();
+    scheduleUpdateOnFiber(root, fiber, lane, eventTime);
+  }
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -486,9 +500,12 @@ export function attemptHydrationAtCurrentPriority(fiber: Fiber): void {
     // their priority other than synchronously flush it.
     return;
   }
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    const eventTime = requestEventTime();
+    scheduleUpdateOnFiber(root, fiber, lane, eventTime);
+  }
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -664,7 +681,10 @@ if (__DEV__) {
       // Shallow cloning props works as a workaround for now to bypass the bailout check.
       fiber.memoizedProps = {...fiber.memoizedProps};
 
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
   };
   overrideHookStateDeletePath = (
@@ -685,7 +705,10 @@ if (__DEV__) {
       // Shallow cloning props works as a workaround for now to bypass the bailout check.
       fiber.memoizedProps = {...fiber.memoizedProps};
 
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
   };
   overrideHookStateRenamePath = (
@@ -707,7 +730,10 @@ if (__DEV__) {
       // Shallow cloning props works as a workaround for now to bypass the bailout check.
       fiber.memoizedProps = {...fiber.memoizedProps};
 
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
   };
 
@@ -717,14 +743,20 @@ if (__DEV__) {
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
   overridePropsDeletePath = (fiber: Fiber, path: Array<string | number>) => {
     fiber.pendingProps = copyWithDelete(fiber.memoizedProps, path);
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
   overridePropsRenamePath = (
     fiber: Fiber,
@@ -735,11 +767,17 @@ if (__DEV__) {
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
 
   scheduleUpdate = (fiber: Fiber) => {
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
 
   setErrorHandler = (newShouldErrorImpl: Fiber => ?boolean) => {
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index e014519320a5..58ee3656d501 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -68,11 +68,12 @@ import {
   discreteUpdates,
   flushPassiveEffects,
 } from './ReactFiberWorkLoop.old';
+import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.old';
 import {
   createUpdate,
   enqueueUpdate,
   entangleTransitions,
-} from './ReactUpdateQueue.old';
+} from './ReactFiberClassUpdateQueue.old';
 import {
   isRendering as ReactCurrentFiberIsRendering,
   current as ReactCurrentFiberCurrent,
@@ -377,9 +378,9 @@ export function updateContainer(
     update.callback = callback;
   }
 
-  enqueueUpdate(current, update, lane);
-  const root = scheduleUpdateOnFiber(current, lane, eventTime);
+  const root = enqueueUpdate(current, update, lane);
   if (root !== null) {
+    scheduleUpdateOnFiber(root, current, lane, eventTime);
     entangleTransitions(root, current, lane);
   }
 
@@ -413,7 +414,7 @@ export function getPublicRootInstance(
 
 export function attemptSynchronousHydration(fiber: Fiber): void {
   switch (fiber.tag) {
-    case HostRoot:
+    case HostRoot: {
       const root: FiberRoot = fiber.stateNode;
       if (isRootDehydrated(root)) {
         // Flush the first scheduled "update".
@@ -421,15 +422,22 @@ export function attemptSynchronousHydration(fiber: Fiber): void {
         flushRoot(root, lanes);
       }
       break;
-    case SuspenseComponent:
-      const eventTime = requestEventTime();
-      flushSync(() => scheduleUpdateOnFiber(fiber, SyncLane, eventTime));
+    }
+    case SuspenseComponent: {
+      flushSync(() => {
+        const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+        if (root !== null) {
+          const eventTime = requestEventTime();
+          scheduleUpdateOnFiber(root, fiber, SyncLane, eventTime);
+        }
+      });
       // 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;
+    }
   }
 }
 
@@ -460,9 +468,12 @@ export function attemptDiscreteHydration(fiber: Fiber): void {
     // Suspense.
     return;
   }
-  const eventTime = requestEventTime();
   const lane = SyncLane;
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    const eventTime = requestEventTime();
+    scheduleUpdateOnFiber(root, fiber, lane, eventTime);
+  }
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -474,9 +485,12 @@ export function attemptContinuousHydration(fiber: Fiber): void {
     // Suspense.
     return;
   }
-  const eventTime = requestEventTime();
   const lane = SelectiveHydrationLane;
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    const eventTime = requestEventTime();
+    scheduleUpdateOnFiber(root, fiber, lane, eventTime);
+  }
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -486,9 +500,12 @@ export function attemptHydrationAtCurrentPriority(fiber: Fiber): void {
     // their priority other than synchronously flush it.
     return;
   }
-  const eventTime = requestEventTime();
   const lane = requestUpdateLane(fiber);
-  scheduleUpdateOnFiber(fiber, lane, eventTime);
+  const root = enqueueConcurrentRenderForLane(fiber, lane);
+  if (root !== null) {
+    const eventTime = requestEventTime();
+    scheduleUpdateOnFiber(root, fiber, lane, eventTime);
+  }
   markRetryLaneIfNotHydrated(fiber, lane);
 }
 
@@ -664,7 +681,10 @@ if (__DEV__) {
       // Shallow cloning props works as a workaround for now to bypass the bailout check.
       fiber.memoizedProps = {...fiber.memoizedProps};
 
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
   };
   overrideHookStateDeletePath = (
@@ -685,7 +705,10 @@ if (__DEV__) {
       // Shallow cloning props works as a workaround for now to bypass the bailout check.
       fiber.memoizedProps = {...fiber.memoizedProps};
 
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
   };
   overrideHookStateRenamePath = (
@@ -707,7 +730,10 @@ if (__DEV__) {
       // Shallow cloning props works as a workaround for now to bypass the bailout check.
       fiber.memoizedProps = {...fiber.memoizedProps};
 
-      scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+      const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+      if (root !== null) {
+        scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+      }
     }
   };
 
@@ -717,14 +743,20 @@ if (__DEV__) {
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
   overridePropsDeletePath = (fiber: Fiber, path: Array<string | number>) => {
     fiber.pendingProps = copyWithDelete(fiber.memoizedProps, path);
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
   overridePropsRenamePath = (
     fiber: Fiber,
@@ -735,11 +767,17 @@ if (__DEV__) {
     if (fiber.alternate) {
       fiber.alternate.pendingProps = fiber.pendingProps;
     }
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
 
   scheduleUpdate = (fiber: Fiber) => {
-    scheduleUpdateOnFiber(fiber, SyncLane, NoTimestamp);
+    const root = enqueueConcurrentRenderForLane(fiber, SyncLane);
+    if (root !== null) {
+      scheduleUpdateOnFiber(root, fiber, SyncLane, NoTimestamp);
+    }
   };
 
   setErrorHandler = (newShouldErrorImpl: Fiber => ?boolean) => {
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 304073ed019d..ca9edcc3ded7 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -37,7 +37,7 @@ import {
   enableUpdaterTracking,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
-import {initializeUpdateQueue} from './ReactUpdateQueue.new';
+import {initializeUpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 3c4086394a1a..f9c9e8091c8d 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -37,7 +37,7 @@ import {
   enableUpdaterTracking,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
-import {initializeUpdateQueue} from './ReactUpdateQueue.old';
+import {initializeUpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 9a3d1b619235..3d13cd6407b4 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {CapturedValue} from './ReactCapturedValue';
-import type {Update} from './ReactUpdateQueue.new';
+import type {Update} from './ReactFiberClassUpdateQueue.new';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 
@@ -48,7 +48,7 @@ import {
   CaptureUpdate,
   ForceUpdate,
   enqueueUpdate,
-} from './ReactUpdateQueue.new';
+} from './ReactFiberClassUpdateQueue.new';
 import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading.new';
 import {
   suspenseStackCursor,
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index 66f91a69d343..ba0dfb5c32aa 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactInternalTypes';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {CapturedValue} from './ReactCapturedValue';
-import type {Update} from './ReactUpdateQueue.old';
+import type {Update} from './ReactFiberClassUpdateQueue.old';
 import type {Wakeable} from 'shared/ReactTypes';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 
@@ -48,7 +48,7 @@ import {
   CaptureUpdate,
   ForceUpdate,
   enqueueUpdate,
-} from './ReactUpdateQueue.old';
+} from './ReactFiberClassUpdateQueue.old';
 import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading.old';
 import {
   suspenseStackCursor,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 6e438aaa7bb6..9857207dfb23 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -105,11 +105,9 @@ import {
 import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
-  Placement,
   Incomplete,
   StoreConsistency,
   HostEffectMask,
-  Hydrating,
   ForceClientRender,
   BeforeMutationMask,
   MutationMask,
@@ -182,7 +180,7 @@ import {
   invokePassiveEffectUnmountInDEV,
   reportUncaughtErrorInDEV,
 } from './ReactFiberCommitWork.new';
-import {enqueueUpdate} from './ReactUpdateQueue.new';
+import {enqueueUpdate} from './ReactFiberClassUpdateQueue.new';
 import {resetContextDependencies} from './ReactFiberNewContext.new';
 import {
   resetHooksAfterThrow,
@@ -196,9 +194,9 @@ import {
   createCursor,
 } from './ReactFiberStack.new';
 import {
-  enqueueInterleavedUpdates,
-  hasInterleavedUpdates,
-} from './ReactFiberInterleavedUpdates.new';
+  enqueueConcurrentRenderForLane,
+  finishQueueingConcurrentUpdates,
+} from './ReactFiberConcurrentUpdates.new';
 
 import {
   markNestedUpdateScheduled,
@@ -521,10 +519,11 @@ function requestRetryLane(fiber: Fiber) {
 }
 
 export function scheduleUpdateOnFiber(
+  root: FiberRoot,
   fiber: Fiber,
   lane: Lane,
   eventTime: number,
-): FiberRoot | null {
+) {
   checkForNestedUpdates();
 
   if (__DEV__) {
@@ -533,11 +532,6 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  const root = markUpdateLaneFromFiberToRoot(fiber, lane);
-  if (root === null) {
-    return null;
-  }
-
   if (__DEV__) {
     if (isFlushingPassiveEffects) {
       didScheduleUpdateDuringPassiveEffects = true;
@@ -606,8 +600,6 @@ export function scheduleUpdateOnFiber(
     }
 
     if (root === workInProgressRoot) {
-      // TODO: Consolidate with `isInterleavedUpdate` check
-
       // Received an update to a tree that's in the middle of rendering. Mark
       // that there was an interleaved update work on this root. Unless the
       // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
@@ -650,7 +642,6 @@ export function scheduleUpdateOnFiber(
       flushSyncCallbacksOnlyInLegacyMode();
     }
   }
-  return root;
 }
 
 export function scheduleInitialHydrationOnRoot(
@@ -673,73 +664,15 @@ export function scheduleInitialHydrationOnRoot(
   ensureRootIsScheduled(root, eventTime);
 }
 
-// This is split into a separate function so we can mark a fiber with pending
-// work without treating it as a typical update that originates from an event;
-// e.g. retrying a Suspense boundary isn't an update, but it does schedule work
-// on a fiber.
-function markUpdateLaneFromFiberToRoot(
-  sourceFiber: Fiber,
-  lane: Lane,
-): FiberRoot | null {
-  // 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);
-  }
-  if (__DEV__) {
-    if (
-      alternate === null &&
-      (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags
-    ) {
-      warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
-    }
-  }
-  // Walk the parent path to the root and update the child lanes.
-  let node = sourceFiber;
-  let parent = sourceFiber.return;
-  while (parent !== null) {
-    parent.childLanes = mergeLanes(parent.childLanes, lane);
-    alternate = parent.alternate;
-    if (alternate !== null) {
-      alternate.childLanes = mergeLanes(alternate.childLanes, lane);
-    } else {
-      if (__DEV__) {
-        if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
-          warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
-        }
-      }
-    }
-    node = parent;
-    parent = parent.return;
-  }
-  if (node.tag === HostRoot) {
-    const root: FiberRoot = node.stateNode;
-    return root;
-  } else {
-    return null;
-  }
-}
-
-export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
+export function isUnsafeClassRenderPhaseUpdate(fiber: Fiber) {
+  // Check if this is a render phase update. Only called by class components,
+  // which special (deprecated) behavior for UNSAFE_componentWillReceive props.
   return (
-    // TODO: Optimize slightly by comparing to root that fiber belongs to.
-    // Requires some refactoring. Not a big deal though since it's rare for
-    // concurrent apps to have more than a single root.
-    (workInProgressRoot !== null ||
-      // If the interleaved updates queue hasn't been cleared yet, then
-      // we should treat this as an interleaved update, too. This is also a
-      // defensive coding measure in case a new update comes in between when
-      // rendering has finished and when the interleaved updates are transferred
-      // to the main queue.
-      hasInterleavedUpdates()) &&
-    (fiber.mode & ConcurrentMode) !== NoMode &&
-    // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
-    // then don't treat this as an interleaved update. This pattern is
-    // accompanied by a warning but we haven't fully deprecated it yet. We can
-    // remove once the deferRenderPhaseUpdateToNextBatch flag is enabled.
-    (deferRenderPhaseUpdateToNextBatch ||
-      (executionContext & RenderContext) === NoContext)
+    // TODO: Remove outdated deferRenderPhaseUpdateToNextBatch experiment. We
+    // decided not to enable it.
+    (!deferRenderPhaseUpdateToNextBatch ||
+      (fiber.mode & ConcurrentMode) === NoMode) &&
+    (executionContext & RenderContext) !== NoContext
   );
 }
 
@@ -1541,7 +1474,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   workInProgressRootConcurrentErrors = null;
   workInProgressRootRecoverableErrors = null;
 
-  enqueueInterleavedUpdates();
+  finishQueueingConcurrentUpdates();
 
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
@@ -2113,9 +2046,15 @@ function commitRootImpl(
   root.callbackNode = null;
   root.callbackPriority = NoLane;
 
-  // Update the first and last pending times on this root. The new first
-  // pending time is whatever is left on the root fiber.
+  // Check which lanes no longer have any work scheduled on them, and mark
+  // those as finished.
   let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
+
+  // 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 = finishQueueingConcurrentUpdates();
+  remainingLanes = mergeLanes(remainingLanes, concurrentlyUpdatedLanes);
+
   markRootFinished(root, remainingLanes);
 
   if (root === workInProgressRoot) {
@@ -2617,9 +2556,8 @@ function captureCommitPhaseErrorOnRoot(
 ) {
   const errorInfo = createCapturedValue(error, sourceFiber);
   const update = createRootErrorUpdate(rootFiber, errorInfo, (SyncLane: Lane));
-  enqueueUpdate(rootFiber, update, (SyncLane: Lane));
+  const root = enqueueUpdate(rootFiber, update, (SyncLane: Lane));
   const eventTime = requestEventTime();
-  const root = markUpdateLaneFromFiberToRoot(rootFiber, (SyncLane: Lane));
   if (root !== null) {
     markRootUpdated(root, SyncLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
@@ -2667,9 +2605,8 @@ export function captureCommitPhaseError(
           errorInfo,
           (SyncLane: Lane),
         );
-        enqueueUpdate(fiber, update, (SyncLane: Lane));
+        const root = enqueueUpdate(fiber, update, (SyncLane: Lane));
         const eventTime = requestEventTime();
-        const root = markUpdateLaneFromFiberToRoot(fiber, (SyncLane: Lane));
         if (root !== null) {
           markRootUpdated(root, SyncLane, eventTime);
           ensureRootIsScheduled(root, eventTime);
@@ -2760,7 +2697,7 @@ function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
   }
   // TODO: Special case idle priority?
   const eventTime = requestEventTime();
-  const root = markUpdateLaneFromFiberToRoot(boundaryFiber, retryLane);
+  const root = enqueueConcurrentRenderForLane(boundaryFiber, retryLane);
   if (root !== null) {
     markRootUpdated(root, retryLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
@@ -2931,7 +2868,7 @@ function invokeEffectsInDev(
 }
 
 let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
-function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
+export function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber: Fiber) {
   if (__DEV__) {
     if ((executionContext & RenderContext) !== NoContext) {
       // We let the other warning about render phase updates deal with this one.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 3e02a4fe3769..5a9f93bbada2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -105,11 +105,9 @@ import {
 import {LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
-  Placement,
   Incomplete,
   StoreConsistency,
   HostEffectMask,
-  Hydrating,
   ForceClientRender,
   BeforeMutationMask,
   MutationMask,
@@ -182,7 +180,7 @@ import {
   invokePassiveEffectUnmountInDEV,
   reportUncaughtErrorInDEV,
 } from './ReactFiberCommitWork.old';
-import {enqueueUpdate} from './ReactUpdateQueue.old';
+import {enqueueUpdate} from './ReactFiberClassUpdateQueue.old';
 import {resetContextDependencies} from './ReactFiberNewContext.old';
 import {
   resetHooksAfterThrow,
@@ -196,9 +194,9 @@ import {
   createCursor,
 } from './ReactFiberStack.old';
 import {
-  enqueueInterleavedUpdates,
-  hasInterleavedUpdates,
-} from './ReactFiberInterleavedUpdates.old';
+  enqueueConcurrentRenderForLane,
+  finishQueueingConcurrentUpdates,
+} from './ReactFiberConcurrentUpdates.old';
 
 import {
   markNestedUpdateScheduled,
@@ -521,10 +519,11 @@ function requestRetryLane(fiber: Fiber) {
 }
 
 export function scheduleUpdateOnFiber(
+  root: FiberRoot,
   fiber: Fiber,
   lane: Lane,
   eventTime: number,
-): FiberRoot | null {
+) {
   checkForNestedUpdates();
 
   if (__DEV__) {
@@ -533,11 +532,6 @@ export function scheduleUpdateOnFiber(
     }
   }
 
-  const root = markUpdateLaneFromFiberToRoot(fiber, lane);
-  if (root === null) {
-    return null;
-  }
-
   if (__DEV__) {
     if (isFlushingPassiveEffects) {
       didScheduleUpdateDuringPassiveEffects = true;
@@ -606,8 +600,6 @@ export function scheduleUpdateOnFiber(
     }
 
     if (root === workInProgressRoot) {
-      // TODO: Consolidate with `isInterleavedUpdate` check
-
       // Received an update to a tree that's in the middle of rendering. Mark
       // that there was an interleaved update work on this root. Unless the
       // `deferRenderPhaseUpdateToNextBatch` flag is off and this is a render
@@ -650,7 +642,6 @@ export function scheduleUpdateOnFiber(
       flushSyncCallbacksOnlyInLegacyMode();
     }
   }
-  return root;
 }
 
 export function scheduleInitialHydrationOnRoot(
@@ -673,73 +664,15 @@ export function scheduleInitialHydrationOnRoot(
   ensureRootIsScheduled(root, eventTime);
 }
 
-// This is split into a separate function so we can mark a fiber with pending
-// work without treating it as a typical update that originates from an event;
-// e.g. retrying a Suspense boundary isn't an update, but it does schedule work
-// on a fiber.
-function markUpdateLaneFromFiberToRoot(
-  sourceFiber: Fiber,
-  lane: Lane,
-): FiberRoot | null {
-  // 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);
-  }
-  if (__DEV__) {
-    if (
-      alternate === null &&
-      (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags
-    ) {
-      warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
-    }
-  }
-  // Walk the parent path to the root and update the child lanes.
-  let node = sourceFiber;
-  let parent = sourceFiber.return;
-  while (parent !== null) {
-    parent.childLanes = mergeLanes(parent.childLanes, lane);
-    alternate = parent.alternate;
-    if (alternate !== null) {
-      alternate.childLanes = mergeLanes(alternate.childLanes, lane);
-    } else {
-      if (__DEV__) {
-        if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
-          warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
-        }
-      }
-    }
-    node = parent;
-    parent = parent.return;
-  }
-  if (node.tag === HostRoot) {
-    const root: FiberRoot = node.stateNode;
-    return root;
-  } else {
-    return null;
-  }
-}
-
-export function isInterleavedUpdate(fiber: Fiber, lane: Lane) {
+export function isUnsafeClassRenderPhaseUpdate(fiber: Fiber) {
+  // Check if this is a render phase update. Only called by class components,
+  // which special (deprecated) behavior for UNSAFE_componentWillReceive props.
   return (
-    // TODO: Optimize slightly by comparing to root that fiber belongs to.
-    // Requires some refactoring. Not a big deal though since it's rare for
-    // concurrent apps to have more than a single root.
-    (workInProgressRoot !== null ||
-      // If the interleaved updates queue hasn't been cleared yet, then
-      // we should treat this as an interleaved update, too. This is also a
-      // defensive coding measure in case a new update comes in between when
-      // rendering has finished and when the interleaved updates are transferred
-      // to the main queue.
-      hasInterleavedUpdates()) &&
-    (fiber.mode & ConcurrentMode) !== NoMode &&
-    // If this is a render phase update (i.e. UNSAFE_componentWillReceiveProps),
-    // then don't treat this as an interleaved update. This pattern is
-    // accompanied by a warning but we haven't fully deprecated it yet. We can
-    // remove once the deferRenderPhaseUpdateToNextBatch flag is enabled.
-    (deferRenderPhaseUpdateToNextBatch ||
-      (executionContext & RenderContext) === NoContext)
+    // TODO: Remove outdated deferRenderPhaseUpdateToNextBatch experiment. We
+    // decided not to enable it.
+    (!deferRenderPhaseUpdateToNextBatch ||
+      (fiber.mode & ConcurrentMode) === NoMode) &&
+    (executionContext & RenderContext) !== NoContext
   );
 }
 
@@ -1541,7 +1474,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   workInProgressRootConcurrentErrors = null;
   workInProgressRootRecoverableErrors = null;
 
-  enqueueInterleavedUpdates();
+  finishQueueingConcurrentUpdates();
 
   if (__DEV__) {
     ReactStrictModeWarnings.discardPendingWarnings();
@@ -2617,9 +2550,8 @@ function captureCommitPhaseErrorOnRoot(
 ) {
   const errorInfo = createCapturedValue(error, sourceFiber);
   const update = createRootErrorUpdate(rootFiber, errorInfo, (SyncLane: Lane));
-  enqueueUpdate(rootFiber, update, (SyncLane: Lane));
+  const root = enqueueUpdate(rootFiber, update, (SyncLane: Lane));
   const eventTime = requestEventTime();
-  const root = markUpdateLaneFromFiberToRoot(rootFiber, (SyncLane: Lane));
   if (root !== null) {
     markRootUpdated(root, SyncLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
@@ -2667,9 +2599,8 @@ export function captureCommitPhaseError(
           errorInfo,
           (SyncLane: Lane),
         );
-        enqueueUpdate(fiber, update, (SyncLane: Lane));
+        const root = enqueueUpdate(fiber, update, (SyncLane: Lane));
         const eventTime = requestEventTime();
-        const root = markUpdateLaneFromFiberToRoot(fiber, (SyncLane: Lane));
         if (root !== null) {
           markRootUpdated(root, SyncLane, eventTime);
           ensureRootIsScheduled(root, eventTime);
@@ -2760,7 +2691,7 @@ function retryTimedOutBoundary(boundaryFiber: Fiber, retryLane: Lane) {
   }
   // TODO: Special case idle priority?
   const eventTime = requestEventTime();
-  const root = markUpdateLaneFromFiberToRoot(boundaryFiber, retryLane);
+  const root = enqueueConcurrentRenderForLane(boundaryFiber, retryLane);
   if (root !== null) {
     markRootUpdated(root, retryLane, eventTime);
     ensureRootIsScheduled(root, eventTime);
@@ -2931,7 +2862,7 @@ function invokeEffectsInDev(
 }
 
 let didWarnStateUpdateForNotYetMountedComponent: Set<string> | null = null;
-function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber) {
+export function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber: Fiber) {
   if (__DEV__) {
     if ((executionContext & RenderContext) !== NoContext) {
       // We let the other warning about render phase updates deal with this one.
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index e69de29bb2d1..76d977e1f1c1 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -0,0 +1 @@
+17691acc071d56261d43c3cf183f287d983baa9b [FORKED] Don't update childLanes until after current render

From 254b49e5897b4e493c88ecec5c80abeacda90526 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 6 Jun 2022 10:36:58 -0700
Subject: [PATCH 1399/1603] Add snapshot testing on e2e test failure (#24672)

We have a currently unreproducible flaky e2e test. This PR captures snapshots on e2e test failures so we can better debug flaky e2e tests that don't fail locally.
---
 .circleci/config.yml                                       | 2 ++
 .../__tests__/__e2e__/components.test.js                   | 1 -
 packages/react-devtools-inline/playwright.config.js        | 3 ++-
 scripts/circleci/run_devtools_e2e_tests.js                 | 7 +++++--
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 591cf4adece0..6fa0208d682e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -291,6 +291,8 @@ jobs:
       - run:
           name: Cleanup build regression folder
           command: rm -r ./build-regression
+      - store_artifacts:
+          path: ./tmp/screenshots
 
   yarn_lint_build:
     docker: *docker
diff --git a/packages/react-devtools-inline/__tests__/__e2e__/components.test.js b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
index aaa201305b93..4df0318b0fce 100644
--- a/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
+++ b/packages/react-devtools-inline/__tests__/__e2e__/components.test.js
@@ -210,7 +210,6 @@ test.describe('Components', () => {
     let count = await getComponentSearchResultsCount();
     expect(count).toBe('1 | 4');
 
-    await focusComponentSearch();
     page.keyboard.insertText('Item');
     count = await getComponentSearchResultsCount();
     expect(count).toBe('1 | 3');
diff --git a/packages/react-devtools-inline/playwright.config.js b/packages/react-devtools-inline/playwright.config.js
index 5e0f333bf29a..9054af7ccf5a 100644
--- a/packages/react-devtools-inline/playwright.config.js
+++ b/packages/react-devtools-inline/playwright.config.js
@@ -18,9 +18,10 @@ const config = {
     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: 2,
+  retries: 3,
 };
 
 module.exports = config;
diff --git a/scripts/circleci/run_devtools_e2e_tests.js b/scripts/circleci/run_devtools_e2e_tests.js
index 023c0ffc5407..3ae98c42c54f 100755
--- a/scripts/circleci/run_devtools_e2e_tests.js
+++ b/scripts/circleci/run_devtools_e2e_tests.js
@@ -9,6 +9,7 @@ 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 screenshotPath = join(ROOT_PATH, 'tmp', 'screenshots');
 
 let buildProcess = null;
 let serverProcess = null;
@@ -115,9 +116,11 @@ function runTestShell() {
 async function runEndToEndTests() {
   logBright('Running e2e tests');
   if (!reactVersion) {
-    testProcess = spawn('yarn', ['test:e2e'], {cwd: inlinePackagePath});
+    testProcess = spawn('yarn', ['test:e2e', `--output=${screenshotPath}`], {
+      cwd: inlinePackagePath,
+    });
   } else {
-    testProcess = spawn('yarn', ['test:e2e'], {
+    testProcess = spawn('yarn', ['test:e2e', `--output=${screenshotPath}`], {
       cwd: inlinePackagePath,
       env: {...process.env, REACT_VERSION: reactVersion},
     });

From 4f29ba1cc52061e439cede3813e100557b23a15c Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Mon, 6 Jun 2022 17:23:32 -0400
Subject: [PATCH 1400/1603] support errorInfo in onRecoverableError (#24591)

* extend onRecoverableError API to support errorInfo

errorInfo has been used in Error Boundaries wiht componentDidCatch for a while now. To date this metadata only contained a componentStack. onRecoverableError only receives an error (type mixed) argument and thus providing additional error metadata was not possible without mutating user created mixed objects.

This change modifies rootConcurrentErrors rootRecoverableErrors, and hydrationErrors so all expect CapturedValue types. additionally a new factory function allows the creation of CapturedValues from a value plus a hash and stack.

In general, client derived CapturedValues will be created using the original function which derives a componentStack from a fiber and server originated CapturedValues will be created using with a passed in hash and optional componentStack.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 191 +++++++++++-------
 .../ReactDOMFizzServerBrowser-test.js         |   4 +-
 .../__tests__/ReactDOMFizzServerNode-test.js  |  10 +-
 .../__tests__/ReactDOMHydrationDiff-test.js   |  52 ++++-
 ...DOMServerPartialHydration-test.internal.js |  73 +++++--
 .../src/client/ReactDOMHostConfig.js          |  55 +++--
 .../src/server/ReactDOMServerFormatConfig.js  |  78 ++++---
 .../ReactDOMServerLegacyFormatConfig.js       |   9 +-
 .../server/ReactNativeServerFormatConfig.js   |   4 +-
 .../src/ReactCapturedValue.js                 |  17 +-
 .../src/ReactFiberBeginWork.new.js            |  73 ++++---
 .../src/ReactFiberBeginWork.old.js            |  73 ++++---
 .../src/ReactFiberHydrationContext.new.js     |   5 +-
 .../src/ReactFiberHydrationContext.old.js     |   5 +-
 .../src/ReactFiberThrow.new.js                |  10 +-
 .../src/ReactFiberThrow.old.js                |  10 +-
 .../src/ReactFiberWorkLoop.new.js             |  29 ++-
 .../src/ReactFiberWorkLoop.old.js             |  29 ++-
 .../src/ReactInternalTypes.js                 |   5 +-
 .../ReactDOMServerFB-test.internal.js         |   2 +-
 packages/react-server/src/ReactFizzServer.js  |  26 +--
 scripts/error-codes/codes.json                |   2 +-
 22 files changed, 495 insertions(+), 267 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 66ae2c25e690..7104350fde00 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -90,46 +90,28 @@ describe('ReactDOMFizzServer', () => {
   });
 
   function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
-    const mappedErrows = errorsArr.map(error => {
-      if (error.componentStack) {
-        return [
-          error.message,
-          error.hash,
-          normalizeCodeLocInfo(error.componentStack),
-        ];
-      } else if (error.hash) {
-        return [error.message, error.hash];
+    const mappedErrows = errorsArr.map(({error, errorInfo}) => {
+      const stack = errorInfo && errorInfo.componentStack;
+      const digest = errorInfo && errorInfo.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,
-        // .map(([errorMessage, errorHash, errorComponentStack]) => {
-        //   if (typeof error === 'string' || error instanceof String) {
-        //     return error;
-        //   }
-        //   let str = JSON.stringify(error).replace(/\\n/g, '\n');
-        //   // this gets stripped away by normalizeCodeLocInfo...
-        //   // Kind of hacky but lets strip it away here too just so they match...
-        //   // easier than fixing the regex to account for this edge case
-        //   if (str.endsWith('at **)"}')) {
-        //     str = str.replace(/at \*\*\)\"}$/, 'at **)');
-        //   }
-        //   return str;
-        // }),
-      );
+      expect(mappedErrows).toEqual(toBeDevArr);
     } else {
       expect(mappedErrows).toEqual(toBeProdArr);
     }
   }
 
-  // @TODO we will use this in a followup change once we start exposing componentStacks from server errors
-  // function componentStack(components) {
-  //   return components
-  //     .map(component => `\n    in ${component} (at **)`)
-  //     .join('');
-  // }
+  function componentStack(components) {
+    return components
+      .map(component => `\n    in ${component} (at **)`)
+      .join('');
+  }
 
   async function act(callback) {
     await callback();
@@ -471,8 +453,8 @@ describe('ReactDOMFizzServer', () => {
       bootstrapped = true;
       // Attempt to hydrate the content.
       ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-        onRecoverableError(error) {
-          errors.push(error);
+        onRecoverableError(error, errorInfo) {
+          errors.push({error, errorInfo});
         },
       });
     };
@@ -483,8 +465,8 @@ describe('ReactDOMFizzServer', () => {
       loggedErrors.push(x);
       return 'Hash of (' + x.message + ')';
     }
-    // const expectedHash = onError(theError);
-    // loggedErrors.length = 0;
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
 
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -519,9 +501,18 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expectErrors(
       errors,
-      [theError.message],
       [
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        [
+          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,
+        ],
       ],
     );
 
@@ -577,8 +568,8 @@ describe('ReactDOMFizzServer', () => {
       loggedErrors.push(x);
       return 'hash of (' + x.message + ')';
     }
-    // const expectedHash = onError(theError);
-    // loggedErrors.length = 0;
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
 
     function App({isClient}) {
       return (
@@ -605,8 +596,8 @@ describe('ReactDOMFizzServer', () => {
     const errors = [];
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-      onRecoverableError(error) {
-        errors.push(error);
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
       },
     });
     Scheduler.unstable_flushAll();
@@ -630,9 +621,18 @@ describe('ReactDOMFizzServer', () => {
 
     expectErrors(
       errors,
-      [theError.message],
       [
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        [
+          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,
+        ],
       ],
     );
 
@@ -675,8 +675,8 @@ describe('ReactDOMFizzServer', () => {
       loggedErrors.push(x);
       return 'hash(' + x.message + ')';
     }
-    // const expectedHash = onError(theError);
-    // loggedErrors.length = 0;
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
 
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -693,8 +693,8 @@ describe('ReactDOMFizzServer', () => {
     const errors = [];
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-      onRecoverableError(error) {
-        errors.push(error);
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
       },
     });
     Scheduler.unstable_flushAll();
@@ -703,9 +703,18 @@ describe('ReactDOMFizzServer', () => {
 
     expectErrors(
       errors,
-      [theError.message],
       [
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        [
+          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,
+        ],
       ],
     );
   });
@@ -735,8 +744,8 @@ describe('ReactDOMFizzServer', () => {
       loggedErrors.push(x);
       return 'hash(' + x.message + ')';
     }
-    // const expectedHash = onError(theError);
-    // loggedErrors.length = 0;
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
 
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -753,8 +762,8 @@ describe('ReactDOMFizzServer', () => {
     const errors = [];
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-      onRecoverableError(error) {
-        errors.push(error);
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
       },
     });
     Scheduler.unstable_flushAll();
@@ -773,9 +782,18 @@ describe('ReactDOMFizzServer', () => {
 
     expectErrors(
       errors,
-      [theError.message],
       [
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        [
+          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,
+        ],
       ],
     );
 
@@ -1053,9 +1071,10 @@ describe('ReactDOMFizzServer', () => {
     }
 
     const loggedErrors = [];
+    const expectedDigest = 'Hash for Abort';
     function onError(error) {
       loggedErrors.push(error);
-      return `Hash of (${error.message})`;
+      return expectedDigest;
     }
 
     let controls;
@@ -1069,8 +1088,8 @@ describe('ReactDOMFizzServer', () => {
     const errors = [];
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App />, {
-      onRecoverableError(error) {
-        errors.push(error);
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
       },
     });
     Scheduler.unstable_flushAll();
@@ -1087,9 +1106,12 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expectErrors(
       errors,
-      ['This Suspense boundary was aborted by the server'],
+      [['This Suspense boundary was aborted by the server.', expectedDigest]],
       [
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        [
+          '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...</div>);
@@ -1755,8 +1777,8 @@ describe('ReactDOMFizzServer', () => {
       loggedErrors.push(x);
       return `hash of (${x.message})`;
     }
-    // const expectedHash = onError(theError);
-    // loggedErrors.length = 0;
+    const expectedDigest = onError(theError);
+    loggedErrors.length = 0;
 
     let controls;
     await act(async () => {
@@ -1775,8 +1797,8 @@ describe('ReactDOMFizzServer', () => {
     const errors = [];
     // Attempt to hydrate the content.
     ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-      onRecoverableError(error) {
-        errors.push(error);
+      onRecoverableError(error, errorInfo) {
+        errors.push({error, errorInfo});
       },
     });
     Scheduler.unstable_flushAll();
@@ -1809,9 +1831,25 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expectErrors(
       errors,
-      [theError.message],
       [
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        [
+          theError.message,
+          expectedDigest,
+          componentStack([
+            'AsyncText',
+            'h1',
+            'Suspense',
+            'div',
+            'Suspense',
+            'App',
+          ]),
+        ],
+      ],
+      [
+        [
+          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          expectedDigest,
+        ],
       ],
     );
 
@@ -3142,8 +3180,8 @@ describe('ReactDOMFizzServer', () => {
         loggedErrors.push(x);
         return x.message.replace('bad message', 'bad hash');
       }
-      // const expectedHash = onError(theError);
-      // loggedErrors.length = 0;
+      const expectedDigest = onError(theError);
+      loggedErrors.length = 0;
 
       await act(async () => {
         const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />, {
@@ -3156,8 +3194,8 @@ describe('ReactDOMFizzServer', () => {
 
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-        onRecoverableError(error) {
-          errors.push(error);
+        onRecoverableError(error, errorInfo) {
+          errors.push({error, errorInfo});
         },
       });
       expect(Scheduler).toFlushAndYield([]);
@@ -3165,9 +3203,18 @@ describe('ReactDOMFizzServer', () => {
       // If escaping were not done we would get a message that says "bad hash"
       expectErrors(
         errors,
-        [theError.message],
         [
-          'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+          [
+            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,
+          ],
         ],
       );
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 3aacf68cc3b2..a1429b0d2a17 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -215,7 +215,7 @@ describe('ReactDOMFizzServer', () => {
     expect(result).toContain('Loading');
 
     expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server.',
     ]);
   });
 
@@ -256,7 +256,7 @@ describe('ReactDOMFizzServer', () => {
     reader.cancel();
 
     expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server.',
     ]);
 
     hasLoaded = true;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index cb5ec892bd2c..a625a8df0e2f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -226,7 +226,7 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toBe('');
     expect(reportedErrors).toEqual([
       theError.message,
-      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server.',
     ]);
     expect(reportedShellErrors).toEqual([theError]);
   });
@@ -322,7 +322,7 @@ describe('ReactDOMFizzServer', () => {
     await completed;
 
     expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server.',
     ]);
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
@@ -365,8 +365,8 @@ describe('ReactDOMFizzServer', () => {
 
     expect(errors).toEqual([
       // There are two boundaries that abort
-      'This Suspense boundary was aborted by the server',
-      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server.',
+      'This Suspense boundary was aborted by the server.',
     ]);
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
@@ -603,7 +603,7 @@ describe('ReactDOMFizzServer', () => {
     await completed;
 
     expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server.',
     ]);
     expect(rendered).toBe(false);
     expect(isComplete).toBe(true);
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index f6b5a0b428a7..f2ddab69cdd0 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -11,6 +11,7 @@ let React;
 let ReactDOMClient;
 let ReactDOMServer;
 let act;
+let usingPartialRenderer;
 
 const util = require('util');
 const realConsoleError = console.error;
@@ -25,6 +26,8 @@ describe('ReactDOMServerHydration', () => {
     ReactDOMServer = require('react-dom/server');
     act = require('react-dom/test-utils').act;
 
+    usingPartialRenderer = global.__WWW__ && !__EXPERIMENTAL__;
+
     console.error = jest.fn();
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -727,9 +730,16 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
+
+        // @TODO FB bundles use a different renderer that does not serialize errors to the client
+        const mismatchEl = usingPartialRenderer ? '<p>' : '<template>';
+        // @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(`
             Array [
-              "Warning: Did not expect server HTML to contain a <p> in <div>.
+              "Warning: Did not expect server HTML to contain a ${mismatchEl} in <div>.
                 in div (at **)
                 in Mismatch (at **)",
               "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
@@ -809,11 +819,21 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-          ]
-        `);
+        // We gate this assertion becuase fb-classic uses PartialRenderer for renderToString and it does not
+        // serialize server errors and send to client
+        if (usingPartialRenderer) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [This Suspense boundary was aborted by the server.]",
+            ]
+          `);
+        }
       });
 
       // @gate __DEV__
@@ -834,11 +854,21 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-          ]
-        `);
+        // We gate this assertion becuase fb-classic uses PartialRenderer for renderToString and it does not
+        // serialize server errors and send to client
+        if (usingPartialRenderer) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
+            ]
+          `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Caught [This Suspense boundary was aborted by the server.]",
+            ]
+          `);
+        }
       });
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index e4d33645820e..c27eabe3e97d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -19,6 +19,7 @@ let Suspense;
 let SuspenseList;
 let act;
 let IdleEventPriority;
+let usingPartialRenderer;
 
 function normalizeCodeLocInfo(strOrErr) {
   if (strOrErr && strOrErr.replace) {
@@ -110,6 +111,8 @@ describe('ReactDOMServerPartialHydration', () => {
       SuspenseList = React.SuspenseList;
     }
 
+    usingPartialRenderer = global.__WWW__ && !__EXPERIMENTAL__;
+
     IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
 
@@ -1668,10 +1671,16 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    // we exclude fb bundles with partial renderer
+    if (__DEV__ && !usingPartialRenderer) {
+      expect(Scheduler).toFlushAndYield([
+        'This Suspense boundary was aborted by the server.',
+      ]);
+    } else {
+      expect(Scheduler).toFlushAndYield([
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ]);
+    }
     jest.runAllTimers();
 
     expect(container.textContent).toBe('Hello');
@@ -1730,10 +1739,16 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    // we exclude fb bundles with partial renderer
+    if (__DEV__ && !usingPartialRenderer) {
+      expect(Scheduler).toFlushAndYield([
+        'This Suspense boundary was aborted by the server.',
+      ]);
+    } else {
+      expect(Scheduler).toFlushAndYield([
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client 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
@@ -1797,10 +1812,16 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    // we exclude fb bundles with partial renderer
+    if (__DEV__ && !usingPartialRenderer) {
+      expect(Scheduler).toFlushAndYield([
+        'This Suspense boundary was aborted by the server.',
+      ]);
+    } else {
+      expect(Scheduler).toFlushAndYield([
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client 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
@@ -2115,10 +2136,16 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     suspend = true;
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    // we exclude fb bundles with partial renderer
+    if (__DEV__ && !usingPartialRenderer) {
+      expect(Scheduler).toFlushAndYield([
+        'This Suspense boundary was aborted by the server.',
+      ]);
+    } else {
+      expect(Scheduler).toFlushAndYield([
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ]);
+    }
 
     // We haven't hydrated the second child but the placeholder is still in the list.
     expect(container.textContent).toBe('ALoading B');
@@ -2178,10 +2205,16 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    expect(Scheduler).toFlushAndYield([
-      'The server could not finish this Suspense boundary, likely due to ' +
-        'an error during server rendering. Switched to client rendering.',
-    ]);
+    // we exclude fb bundles with partial renderer
+    if (__DEV__ && !usingPartialRenderer) {
+      expect(Scheduler).toFlushAndYield([
+        'This Suspense boundary was aborted by the server.',
+      ]);
+    } else {
+      expect(Scheduler).toFlushAndYield([
+        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+      ]);
+    }
     jest.runAllTimers();
 
     expect(ref.current).toBe(span);
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index fb7d4e66e91f..17684548d4db 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -729,29 +729,44 @@ export function isSuspenseInstancePending(instance: SuspenseInstance) {
 export function isSuspenseInstanceFallback(instance: SuspenseInstance) {
   return instance.data === SUSPENSE_FALLBACK_START_DATA;
 }
+
 export function getSuspenseInstanceFallbackErrorDetails(
   instance: SuspenseInstance,
-) {
-  const nextSibling = instance.nextSibling;
-  let errorMessage /*, errorComponentStack, errorHash*/;
-  if (
-    nextSibling &&
-    nextSibling.nodeType === ELEMENT_NODE &&
-    nextSibling.nodeName.toLowerCase() === 'template'
-  ) {
-    const msg = ((nextSibling: any): HTMLTemplateElement).dataset.msg;
-    if (msg !== null) errorMessage = msg;
-
-    // @TODO read and return hash and componentStack once we know how we are goign to
-    // expose this extra errorInfo to onRecoverableError
-
-    // const hash = ((nextSibling: any): HTMLTemplateElement).dataset.hash;
-    // if (hash !== null) errorHash = hash;
-
-    // const stack = ((nextSibling: any): HTMLTemplateElement).dataset.stack;
-    // if (stack !== null) errorComponentStack = stack;
+): {digest: ?string, message?: string, stack?: string} {
+  const dataset =
+    instance.nextSibling && ((instance.nextSibling: any): HTMLElement).dataset;
+  let digest, message, stack;
+  if (dataset) {
+    digest = dataset.dgst;
+    if (__DEV__) {
+      message = dataset.msg;
+      stack = dataset.stck;
+    }
+  }
+  if (__DEV__) {
+    return {
+      message,
+      digest,
+      stack,
+    };
+  } else {
+    // Object gets DCE'd if constructed in tail position and matches callsite destructuring
+    return {
+      digest,
+    };
   }
-  return {errorMessage /*, errorComponentStack, errorHash*/};
+
+  // let value = {message: undefined, hash: undefined};
+  // const nextSibling = instance.nextSibling;
+  // if (nextSibling) {
+  //   const dataset = ((nextSibling: any): HTMLTemplateElement).dataset;
+  //   value.message = dataset.msg;
+  //   value.hash = dataset.hash;
+  //   if (__DEV__) {
+  //     value.stack = dataset.stack;
+  //   }
+  // }
+  // return value;
 }
 
 export function registerSuspenseInstanceRetry(
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index f006477c4b0a..95e02a41b463 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1527,16 +1527,22 @@ const startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(
 const endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
 
 const clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk(
-  '<template data-hash="',
+  '<template',
+);
+const clientRenderedSuspenseBoundaryErrorAttrInterstitial = stringToPrecomputedChunk(
+  '"',
 );
 const clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk(
-  '" data-msg="',
+  ' data-dgst="',
 );
 const clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk(
-  '" data-stack="',
+  ' data-msg="',
+);
+const clientRenderedSuspenseBoundaryError1C = stringToPrecomputedChunk(
+  ' data-stck="',
 );
 const clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk(
-  '"></template>',
+  '></template>',
 );
 
 export function pushStartCompletedSuspenseBoundary(
@@ -1576,7 +1582,7 @@ export function writeStartPendingSuspenseBoundary(
 export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
-  errorHash: ?string,
+  errorDigest: ?string,
   errorMesssage: ?string,
   errorComponentStack: ?string,
 ): boolean {
@@ -1585,33 +1591,43 @@ export function writeStartClientRenderedSuspenseBoundary(
     destination,
     startClientRenderedSuspenseBoundary,
   );
-  if (errorHash) {
-    writeChunk(destination, clientRenderedSuspenseBoundaryError1);
-    writeChunk(destination, stringToChunk(escapeTextForBrowser(errorHash)));
-    // In prod errorMessage will usually be nullish but there is one case where
-    // it is used (currently when the server aborts the task) so we leave it ungated.
+  writeChunk(destination, clientRenderedSuspenseBoundaryError1);
+  if (errorDigest) {
+    writeChunk(destination, clientRenderedSuspenseBoundaryError1A);
+    writeChunk(destination, stringToChunk(escapeTextForBrowser(errorDigest)));
+    writeChunk(
+      destination,
+      clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+    );
+  }
+  if (__DEV__) {
     if (errorMesssage) {
-      writeChunk(destination, clientRenderedSuspenseBoundaryError1A);
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
       writeChunk(
         destination,
         stringToChunk(escapeTextForBrowser(errorMesssage)),
       );
+      writeChunk(
+        destination,
+        clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+      );
     }
-    if (__DEV__) {
-      // Component stacks are currently only captured in dev
-      if (errorComponentStack) {
-        writeChunk(destination, clientRenderedSuspenseBoundaryError1B);
-        writeChunk(
-          destination,
-          stringToChunk(escapeTextForBrowser(errorComponentStack)),
-        );
-      }
+    if (errorComponentStack) {
+      writeChunk(destination, clientRenderedSuspenseBoundaryError1C);
+      writeChunk(
+        destination,
+        stringToChunk(escapeTextForBrowser(errorComponentStack)),
+      );
+      writeChunk(
+        destination,
+        clientRenderedSuspenseBoundaryErrorAttrInterstitial,
+      );
     }
-    result = writeChunkAndReturn(
-      destination,
-      clientRenderedSuspenseBoundaryError2,
-    );
   }
+  result = writeChunkAndReturn(
+    destination,
+    clientRenderedSuspenseBoundaryError2,
+  );
   return result;
 }
 export function writeEndCompletedSuspenseBoundary(
@@ -1772,7 +1788,7 @@ export function writeEndSegment(
 // const SUSPENSE_PENDING_START_DATA = '$?';
 // const SUSPENSE_FALLBACK_START_DATA = '$!';
 //
-// function clientRenderBoundary(suspenseBoundaryID, errorHash, errorMsg, errorComponentStack) {
+// function clientRenderBoundary(suspenseBoundaryID, errorDigest, errorMsg, errorComponentStack) {
 //   // Find the fallback's first element.
 //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
 //   if (!suspenseIdNode) {
@@ -1786,9 +1802,9 @@ export function writeEndSegment(
 //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
 //   // assign error metadata to first sibling
 //   let dataset = suspenseIdNode.dataset;
-//   if (errorHash) dataset.hash = errorHash;
+//   if (errorDigest) dataset.dgst = errorDigest;
 //   if (errorMsg) dataset.msg = errorMsg;
-//   if (errorComponentStack) dataset.stack = errorComponentStack;
+//   if (errorComponentStack) dataset.stck = errorComponentStack;
 //   // Tell React to retry it if the parent already hydrated.
 //   if (suspenseNode._reactRetry) {
 //     suspenseNode._reactRetry();
@@ -1876,7 +1892,7 @@ const completeSegmentFunction =
 const completeBoundaryFunction =
   'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
 const clientRenderFunction =
-  'function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.hash=c),d&&(a.msg=d),e&&(a.stack=e),b._reactRetry&&b._reactRetry())}';
+  'function $RX(b,c,d,e){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),b._reactRetry&&b._reactRetry())}';
 
 const completeSegmentScript1Full = stringToPrecomputedChunk(
   completeSegmentFunction + ';$RS("',
@@ -1957,7 +1973,7 @@ export function writeClientRenderBoundaryInstruction(
   destination: Destination,
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
-  errorHash: ?string,
+  errorDigest: ?string,
   errorMessage?: string,
   errorComponentStack?: string,
 ): boolean {
@@ -1979,11 +1995,11 @@ export function writeClientRenderBoundaryInstruction(
 
   writeChunk(destination, boundaryID);
   writeChunk(destination, clientRenderScript1A);
-  if (errorHash || errorMessage || errorComponentStack) {
+  if (errorDigest || errorMessage || errorComponentStack) {
     writeChunk(destination, clientRenderErrorScriptArgInterstitial);
     writeChunk(
       destination,
-      stringToChunk(escapeJSStringsForInstructionScripts(errorHash || '')),
+      stringToChunk(escapeJSStringsForInstructionScripts(errorDigest || '')),
     );
   }
   if (errorMessage || errorComponentStack) {
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 71716d7b71f2..375562e80b56 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -149,9 +149,9 @@ export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
   // flushing these error arguments are not currently supported in this legacy streaming format.
-  errorHash: ?string,
-  errorMessage?: string,
-  errorComponentStack?: string,
+  errorDigest: ?string,
+  errorMessage: ?string,
+  errorComponentStack: ?string,
 ): boolean {
   if (responseState.generateStaticMarkup) {
     // A client rendered boundary is done and doesn't need a representation in the HTML
@@ -161,6 +161,9 @@ export function writeStartClientRenderedSuspenseBoundary(
   return writeStartClientRenderedSuspenseBoundaryImpl(
     destination,
     responseState,
+    errorDigest,
+    errorMessage,
+    errorComponentStack,
   );
 }
 export function writeEndCompletedSuspenseBoundary(
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index d65a30180a4d..3c2c23c911fa 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -226,7 +226,7 @@ export function writeStartClientRenderedSuspenseBoundary(
   destination: Destination,
   responseState: ResponseState,
   // TODO: encode error for native
-  errorHash: ?string,
+  errorDigest: ?string,
   errorMessage: ?string,
   errorComponentStack: ?string,
 ): boolean {
@@ -300,7 +300,7 @@ export function writeClientRenderBoundaryInstruction(
   responseState: ResponseState,
   boundaryID: SuspenseBoundaryID,
   // TODO: encode error for native
-  errorHash: ?string,
+  errorDigest: ?string,
   errorMessage: ?string,
   errorComponentStack: ?string,
 ): boolean {
diff --git a/packages/react-reconciler/src/ReactCapturedValue.js b/packages/react-reconciler/src/ReactCapturedValue.js
index 8b87eb9a6c1b..64b1f18515d5 100644
--- a/packages/react-reconciler/src/ReactCapturedValue.js
+++ b/packages/react-reconciler/src/ReactCapturedValue.js
@@ -15,9 +15,10 @@ export type CapturedValue<T> = {|
   value: T,
   source: Fiber | null,
   stack: string | null,
+  digest: string | null,
 |};
 
-export function createCapturedValue<T>(
+export function createCapturedValueAtFiber<T>(
   value: T,
   source: Fiber,
 ): CapturedValue<T> {
@@ -27,5 +28,19 @@ export function createCapturedValue<T>(
     value,
     source,
     stack: getStackByFiberInDevAndProd(source),
+    digest: null,
+  };
+}
+
+export function createCapturedValue<T>(
+  value: T,
+  digest: ?string,
+  stack: ?string,
+): CapturedValue<T> {
+  return {
+    value,
+    source: null,
+    stack: stack != null ? stack : null,
+    digest: digest != null ? digest : null,
   };
 }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 4f227ed4710c..aa7ec7c5f9bd 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -237,7 +237,11 @@ import {
 import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.new';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.new';
-import {createCapturedValue} from './ReactCapturedValue';
+import {
+  createCapturedValue,
+  createCapturedValueAtFiber,
+  type CapturedValue,
+} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.new';
 import is from 'shared/objectIs';
 import {
@@ -1074,7 +1078,7 @@ function updateClassComponent(
         // Schedule the error boundary to re-render using updated state
         const update = createClassErrorUpdate(
           workInProgress,
-          createCapturedValue(error, workInProgress),
+          createCapturedValueAtFiber(error, workInProgress),
           lane,
         );
         enqueueCapturedUpdate(workInProgress, update);
@@ -1322,10 +1326,13 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     if (workInProgress.flags & ForceClientRender) {
       // Something errored during a previous attempt to hydrate the shell, so we
       // forced a client render.
-      const recoverableError = new Error(
-        'There was an error while hydrating. Because the error happened outside ' +
-          'of a Suspense boundary, the entire root will switch to ' +
-          'client rendering.',
+      const recoverableError = createCapturedValueAtFiber(
+        new Error(
+          'There was an error while hydrating. Because the error happened outside ' +
+            'of a Suspense boundary, the entire root will switch to ' +
+            'client rendering.',
+        ),
+        workInProgress,
       );
       return mountHostRootWithoutHydrating(
         current,
@@ -1335,9 +1342,12 @@ function updateHostRoot(current, workInProgress, renderLanes) {
         recoverableError,
       );
     } else if (nextChildren !== prevChildren) {
-      const recoverableError = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
+      const recoverableError = createCapturedValueAtFiber(
+        new Error(
+          'This root received an early update, before anything was able ' +
+            'hydrate. Switched the entire root to client rendering.',
+        ),
+        workInProgress,
       );
       return mountHostRootWithoutHydrating(
         current,
@@ -1400,7 +1410,7 @@ function mountHostRootWithoutHydrating(
   workInProgress: Fiber,
   nextChildren: ReactNodeList,
   renderLanes: Lanes,
-  recoverableError: Error,
+  recoverableError: CapturedValue<mixed>,
 ) {
   // Revert to client rendering.
   resetHydrationState();
@@ -2429,7 +2439,7 @@ function retrySuspenseComponentWithoutHydrating(
   current: Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
-  recoverableError: Error | null,
+  recoverableError: CapturedValue<mixed> | null,
 ) {
   // Falling back to client rendering. Because this has performance
   // implications, it's considered a recoverable error, even though the user
@@ -2574,22 +2584,29 @@ function updateDehydratedSuspenseComponent(
       // 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.
-      const {errorMessage} = getSuspenseInstanceFallbackErrorDetails(
-        suspenseInstance,
-      );
-      const error = errorMessage
+      let digest, message, stack;
+      if (__DEV__) {
+        ({digest, message, stack} = getSuspenseInstanceFallbackErrorDetails(
+          suspenseInstance,
+        ));
+      } else {
+        ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
+      }
+
+      const error = message
         ? // eslint-disable-next-line react-internal/prod-error-codes
-          new Error(errorMessage)
+          new Error(message)
         : new Error(
             'The server could not finish this Suspense boundary, likely ' +
               'due to an error during server rendering. Switched to ' +
               'client rendering.',
           );
+      const capturedValue = createCapturedValue(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
         renderLanes,
-        error,
+        capturedValue,
       );
     }
 
@@ -2650,10 +2667,7 @@ function updateDehydratedSuspenseComponent(
       // skip hydration.
       // Delay having to do this as long as the suspense timeout allows us.
       renderDidSuspendDelayIfPossible();
-      return retrySuspenseComponentWithoutHydrating(
-        current,
-        workInProgress,
-        renderLanes,
+      const capturedValue = createCapturedValue(
         new Error(
           'This Suspense boundary received an update before it finished ' +
             'hydrating. This caused the boundary to switch to client rendering. ' +
@@ -2661,6 +2675,12 @@ function updateDehydratedSuspenseComponent(
             'in startTransition.',
         ),
       );
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        capturedValue,
+      );
     } 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
@@ -2707,15 +2727,18 @@ function updateDehydratedSuspenseComponent(
     if (workInProgress.flags & ForceClientRender) {
       // Something errored during hydration. Try again without hydrating.
       workInProgress.flags &= ~ForceClientRender;
-      return retrySuspenseComponentWithoutHydrating(
-        current,
-        workInProgress,
-        renderLanes,
+      const capturedValue = createCapturedValue(
         new Error(
           'There was an error while hydrating this Suspense boundary. ' +
             'Switched to client rendering.',
         ),
       );
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        capturedValue,
+      );
     } else if ((workInProgress.memoizedState: null | SuspenseState) !== null) {
       // Something suspended and we should still be in dehydrated mode.
       // Leave the existing child in place.
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 63a8ae2212c7..4601d0dded1c 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -237,7 +237,11 @@ import {
 import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
 import {pushCacheProvider, CacheContext} from './ReactFiberCacheComponent.old';
-import {createCapturedValue} from './ReactCapturedValue';
+import {
+  createCapturedValue,
+  createCapturedValueAtFiber,
+  type CapturedValue,
+} from './ReactCapturedValue';
 import {createClassErrorUpdate} from './ReactFiberThrow.old';
 import is from 'shared/objectIs';
 import {
@@ -1074,7 +1078,7 @@ function updateClassComponent(
         // Schedule the error boundary to re-render using updated state
         const update = createClassErrorUpdate(
           workInProgress,
-          createCapturedValue(error, workInProgress),
+          createCapturedValueAtFiber(error, workInProgress),
           lane,
         );
         enqueueCapturedUpdate(workInProgress, update);
@@ -1322,10 +1326,13 @@ function updateHostRoot(current, workInProgress, renderLanes) {
     if (workInProgress.flags & ForceClientRender) {
       // Something errored during a previous attempt to hydrate the shell, so we
       // forced a client render.
-      const recoverableError = new Error(
-        'There was an error while hydrating. Because the error happened outside ' +
-          'of a Suspense boundary, the entire root will switch to ' +
-          'client rendering.',
+      const recoverableError = createCapturedValueAtFiber(
+        new Error(
+          'There was an error while hydrating. Because the error happened outside ' +
+            'of a Suspense boundary, the entire root will switch to ' +
+            'client rendering.',
+        ),
+        workInProgress,
       );
       return mountHostRootWithoutHydrating(
         current,
@@ -1335,9 +1342,12 @@ function updateHostRoot(current, workInProgress, renderLanes) {
         recoverableError,
       );
     } else if (nextChildren !== prevChildren) {
-      const recoverableError = new Error(
-        'This root received an early update, before anything was able ' +
-          'hydrate. Switched the entire root to client rendering.',
+      const recoverableError = createCapturedValueAtFiber(
+        new Error(
+          'This root received an early update, before anything was able ' +
+            'hydrate. Switched the entire root to client rendering.',
+        ),
+        workInProgress,
       );
       return mountHostRootWithoutHydrating(
         current,
@@ -1400,7 +1410,7 @@ function mountHostRootWithoutHydrating(
   workInProgress: Fiber,
   nextChildren: ReactNodeList,
   renderLanes: Lanes,
-  recoverableError: Error,
+  recoverableError: CapturedValue<mixed>,
 ) {
   // Revert to client rendering.
   resetHydrationState();
@@ -2429,7 +2439,7 @@ function retrySuspenseComponentWithoutHydrating(
   current: Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
-  recoverableError: Error | null,
+  recoverableError: CapturedValue<mixed> | null,
 ) {
   // Falling back to client rendering. Because this has performance
   // implications, it's considered a recoverable error, even though the user
@@ -2574,22 +2584,29 @@ function updateDehydratedSuspenseComponent(
       // 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.
-      const {errorMessage} = getSuspenseInstanceFallbackErrorDetails(
-        suspenseInstance,
-      );
-      const error = errorMessage
+      let digest, message, stack;
+      if (__DEV__) {
+        ({digest, message, stack} = getSuspenseInstanceFallbackErrorDetails(
+          suspenseInstance,
+        ));
+      } else {
+        ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
+      }
+
+      const error = message
         ? // eslint-disable-next-line react-internal/prod-error-codes
-          new Error(errorMessage)
+          new Error(message)
         : new Error(
             'The server could not finish this Suspense boundary, likely ' +
               'due to an error during server rendering. Switched to ' +
               'client rendering.',
           );
+      const capturedValue = createCapturedValue(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,
         workInProgress,
         renderLanes,
-        error,
+        capturedValue,
       );
     }
 
@@ -2650,10 +2667,7 @@ function updateDehydratedSuspenseComponent(
       // skip hydration.
       // Delay having to do this as long as the suspense timeout allows us.
       renderDidSuspendDelayIfPossible();
-      return retrySuspenseComponentWithoutHydrating(
-        current,
-        workInProgress,
-        renderLanes,
+      const capturedValue = createCapturedValue(
         new Error(
           'This Suspense boundary received an update before it finished ' +
             'hydrating. This caused the boundary to switch to client rendering. ' +
@@ -2661,6 +2675,12 @@ function updateDehydratedSuspenseComponent(
             'in startTransition.',
         ),
       );
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        capturedValue,
+      );
     } 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
@@ -2707,15 +2727,18 @@ function updateDehydratedSuspenseComponent(
     if (workInProgress.flags & ForceClientRender) {
       // Something errored during hydration. Try again without hydrating.
       workInProgress.flags &= ~ForceClientRender;
-      return retrySuspenseComponentWithoutHydrating(
-        current,
-        workInProgress,
-        renderLanes,
+      const capturedValue = createCapturedValue(
         new Error(
           'There was an error while hydrating this Suspense boundary. ' +
             'Switched to client rendering.',
         ),
       );
+      return retrySuspenseComponentWithoutHydrating(
+        current,
+        workInProgress,
+        renderLanes,
+        capturedValue,
+      );
     } else if ((workInProgress.memoizedState: null | SuspenseState) !== null) {
       // Something suspended and we should still be in dehydrated mode.
       // Leave the existing child in place.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 636a467475df..fc18efab3716 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -19,6 +19,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {TreeContext} from './ReactFiberTreeContext.new';
+import type {CapturedValue} from './ReactCapturedValue';
 
 import {
   HostComponent,
@@ -86,7 +87,7 @@ let isHydrating: boolean = false;
 let didSuspendOrErrorDEV: boolean = false;
 
 // Hydration errors that were thrown inside this boundary
-let hydrationErrors: Array<mixed> | null = null;
+let hydrationErrors: Array<CapturedValue<mixed>> | null = null;
 
 function warnIfHydrating() {
   if (__DEV__) {
@@ -680,7 +681,7 @@ function getIsHydrating(): boolean {
   return isHydrating;
 }
 
-export function queueHydrationError(error: mixed): void {
+export function queueHydrationError(error: CapturedValue<mixed>): void {
   if (hydrationErrors === null) {
     hydrationErrors = [error];
   } else {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 3befb348c05a..099b02fbcecc 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -19,6 +19,7 @@ import type {
 } from './ReactFiberHostConfig';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {TreeContext} from './ReactFiberTreeContext.old';
+import type {CapturedValue} from './ReactCapturedValue';
 
 import {
   HostComponent,
@@ -86,7 +87,7 @@ let isHydrating: boolean = false;
 let didSuspendOrErrorDEV: boolean = false;
 
 // Hydration errors that were thrown inside this boundary
-let hydrationErrors: Array<mixed> | null = null;
+let hydrationErrors: Array<CapturedValue<mixed>> | null = null;
 
 function warnIfHydrating() {
   if (__DEV__) {
@@ -680,7 +681,7 @@ function getIsHydrating(): boolean {
   return isHydrating;
 }
 
-export function queueHydrationError(error: mixed): void {
+export function queueHydrationError(error: CapturedValue<mixed>): void {
   if (hydrationErrors === null) {
     hydrationErrors = [error];
   } else {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 3d13cd6407b4..f3dc2edf00f0 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -41,7 +41,7 @@ import {
   enableLazyContextPropagation,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
-import {createCapturedValue} from './ReactCapturedValue';
+import {createCapturedValueAtFiber} from './ReactCapturedValue';
 import {
   enqueueCapturedUpdate,
   createUpdate,
@@ -517,7 +517,7 @@ function throwException(
 
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
-        queueHydrationError(value);
+        queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
         return;
       }
     } else {
@@ -525,12 +525,12 @@ function throwException(
     }
   }
 
+  value = createCapturedValueAtFiber(value, sourceFiber);
+  renderDidError(value);
+
   // 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.
-  renderDidError(value);
-
-  value = createCapturedValue(value, sourceFiber);
   let workInProgress = returnFiber;
   do {
     switch (workInProgress.tag) {
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index ba0dfb5c32aa..b6ddcec76d39 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -41,7 +41,7 @@ import {
   enableLazyContextPropagation,
   enableUpdaterTracking,
 } from 'shared/ReactFeatureFlags';
-import {createCapturedValue} from './ReactCapturedValue';
+import {createCapturedValueAtFiber} from './ReactCapturedValue';
 import {
   enqueueCapturedUpdate,
   createUpdate,
@@ -517,7 +517,7 @@ function throwException(
 
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
-        queueHydrationError(value);
+        queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
         return;
       }
     } else {
@@ -525,12 +525,12 @@ function throwException(
     }
   }
 
+  value = createCapturedValueAtFiber(value, sourceFiber);
+  renderDidError(value);
+
   // 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.
-  renderDidError(value);
-
-  value = createCapturedValue(value, sourceFiber);
   let workInProgress = returnFiber;
   do {
     switch (workInProgress.tag) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 9857207dfb23..82963ea0fa9d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -187,7 +187,10 @@ import {
   ContextOnlyDispatcher,
   getIsUpdatingOpaqueValueInRenderPhaseInDEV,
 } from './ReactFiberHooks.new';
-import {createCapturedValue} from './ReactCapturedValue';
+import {
+  createCapturedValueAtFiber,
+  type CapturedValue,
+} from './ReactCapturedValue';
 import {
   push as pushToStack,
   pop as popFromStack,
@@ -310,10 +313,14 @@ let workInProgressRootRenderPhaseUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
 // Errors that are thrown during the render phase.
-let workInProgressRootConcurrentErrors: Array<mixed> | null = null;
+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<mixed> | null = null;
+let workInProgressRootRecoverableErrors: Array<
+  CapturedValue<mixed>,
+> | null = null;
 
 // The most recent time we committed a fallback. This lets us ensure a train
 // model where we don't commit new loading states in too quick succession.
@@ -998,7 +1005,7 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   return exitStatus;
 }
 
-export function queueRecoverableErrors(errors: Array<mixed>) {
+export function queueRecoverableErrors(errors: Array<CapturedValue<mixed>>) {
   if (workInProgressRootRecoverableErrors === null) {
     workInProgressRootRecoverableErrors = errors;
   } else {
@@ -1629,7 +1636,7 @@ export function renderDidSuspendDelayIfPossible(): void {
   }
 }
 
-export function renderDidError(error: mixed) {
+export function renderDidError(error: CapturedValue<mixed>) {
   if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {
     workInProgressRootExitStatus = RootErrored;
   }
@@ -1950,7 +1957,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
 
 function commitRoot(
   root: FiberRoot,
-  recoverableErrors: null | Array<mixed>,
+  recoverableErrors: null | Array<CapturedValue<mixed>>,
   transitions: Array<Transition> | null,
 ) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
@@ -1977,7 +1984,7 @@ function commitRoot(
 
 function commitRootImpl(
   root: FiberRoot,
-  recoverableErrors: null | Array<mixed>,
+  recoverableErrors: null | Array<CapturedValue<mixed>>,
   transitions: Array<Transition> | null,
   renderPriorityLevel: EventPriority,
 ) {
@@ -2274,7 +2281,9 @@ function commitRootImpl(
     const onRecoverableError = root.onRecoverableError;
     for (let i = 0; i < recoverableErrors.length; i++) {
       const recoverableError = recoverableErrors[i];
-      onRecoverableError(recoverableError);
+      const componentStack = recoverableError.stack;
+      const digest = recoverableError.digest;
+      onRecoverableError(recoverableError.value, {componentStack, digest});
     }
   }
 
@@ -2554,7 +2563,7 @@ function captureCommitPhaseErrorOnRoot(
   sourceFiber: Fiber,
   error: mixed,
 ) {
-  const errorInfo = createCapturedValue(error, sourceFiber);
+  const errorInfo = createCapturedValueAtFiber(error, sourceFiber);
   const update = createRootErrorUpdate(rootFiber, errorInfo, (SyncLane: Lane));
   const root = enqueueUpdate(rootFiber, update, (SyncLane: Lane));
   const eventTime = requestEventTime();
@@ -2599,7 +2608,7 @@ export function captureCommitPhaseError(
         (typeof instance.componentDidCatch === 'function' &&
           !isAlreadyFailedLegacyErrorBoundary(instance))
       ) {
-        const errorInfo = createCapturedValue(error, sourceFiber);
+        const errorInfo = createCapturedValueAtFiber(error, sourceFiber);
         const update = createClassErrorUpdate(
           fiber,
           errorInfo,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 5a9f93bbada2..dc517877393c 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -187,7 +187,10 @@ import {
   ContextOnlyDispatcher,
   getIsUpdatingOpaqueValueInRenderPhaseInDEV,
 } from './ReactFiberHooks.old';
-import {createCapturedValue} from './ReactCapturedValue';
+import {
+  createCapturedValueAtFiber,
+  type CapturedValue,
+} from './ReactCapturedValue';
 import {
   push as pushToStack,
   pop as popFromStack,
@@ -310,10 +313,14 @@ let workInProgressRootRenderPhaseUpdatedLanes: Lanes = NoLanes;
 // Lanes that were pinged (in an interleaved event) during this render.
 let workInProgressRootPingedLanes: Lanes = NoLanes;
 // Errors that are thrown during the render phase.
-let workInProgressRootConcurrentErrors: Array<mixed> | null = null;
+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<mixed> | null = null;
+let workInProgressRootRecoverableErrors: Array<
+  CapturedValue<mixed>,
+> | null = null;
 
 // The most recent time we committed a fallback. This lets us ensure a train
 // model where we don't commit new loading states in too quick succession.
@@ -998,7 +1005,7 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   return exitStatus;
 }
 
-export function queueRecoverableErrors(errors: Array<mixed>) {
+export function queueRecoverableErrors(errors: Array<CapturedValue<mixed>>) {
   if (workInProgressRootRecoverableErrors === null) {
     workInProgressRootRecoverableErrors = errors;
   } else {
@@ -1629,7 +1636,7 @@ export function renderDidSuspendDelayIfPossible(): void {
   }
 }
 
-export function renderDidError(error: mixed) {
+export function renderDidError(error: CapturedValue<mixed>) {
   if (workInProgressRootExitStatus !== RootSuspendedWithDelay) {
     workInProgressRootExitStatus = RootErrored;
   }
@@ -1950,7 +1957,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
 
 function commitRoot(
   root: FiberRoot,
-  recoverableErrors: null | Array<mixed>,
+  recoverableErrors: null | Array<CapturedValue<mixed>>,
   transitions: Array<Transition> | null,
 ) {
   // TODO: This no longer makes any sense. We already wrap the mutation and
@@ -1977,7 +1984,7 @@ function commitRoot(
 
 function commitRootImpl(
   root: FiberRoot,
-  recoverableErrors: null | Array<mixed>,
+  recoverableErrors: null | Array<CapturedValue<mixed>>,
   transitions: Array<Transition> | null,
   renderPriorityLevel: EventPriority,
 ) {
@@ -2268,7 +2275,9 @@ function commitRootImpl(
     const onRecoverableError = root.onRecoverableError;
     for (let i = 0; i < recoverableErrors.length; i++) {
       const recoverableError = recoverableErrors[i];
-      onRecoverableError(recoverableError);
+      const componentStack = recoverableError.stack;
+      const digest = recoverableError.digest;
+      onRecoverableError(recoverableError.value, {componentStack, digest});
     }
   }
 
@@ -2548,7 +2557,7 @@ function captureCommitPhaseErrorOnRoot(
   sourceFiber: Fiber,
   error: mixed,
 ) {
-  const errorInfo = createCapturedValue(error, sourceFiber);
+  const errorInfo = createCapturedValueAtFiber(error, sourceFiber);
   const update = createRootErrorUpdate(rootFiber, errorInfo, (SyncLane: Lane));
   const root = enqueueUpdate(rootFiber, update, (SyncLane: Lane));
   const eventTime = requestEventTime();
@@ -2593,7 +2602,7 @@ export function captureCommitPhaseError(
         (typeof instance.componentDidCatch === 'function' &&
           !isAlreadyFailedLegacyErrorBoundary(instance))
       ) {
-        const errorInfo = createCapturedValue(error, sourceFiber);
+        const errorInfo = createCapturedValueAtFiber(error, sourceFiber);
         const update = createClassErrorUpdate(
           fiber,
           errorInfo,
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 319bbc1c337d..618260b47c20 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -247,7 +247,10 @@ type BaseFiberRootProperties = {|
   // a reference to.
   identifierPrefix: string,
 
-  onRecoverableError: (error: mixed) => void,
+  onRecoverableError: (
+    error: mixed,
+    errorInfo: {digest?: ?string, componentStack?: ?string},
+  ) => void,
 |};
 
 // The following attributes are only used by DevTools and are only present in DEV builds.
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index 22ae1e6d71ec..857a374f3e81 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -192,7 +192,7 @@ describe('ReactDOMServerFB', () => {
     expect(remaining).toEqual('');
 
     expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server',
+      'This Suspense boundary was aborted by the server.',
     ]);
   });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 5376ca2764ff..2b0a3d82e060 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -131,7 +131,7 @@ type LegacyContext = {
 type SuspenseBoundary = {
   id: SuspenseBoundaryID,
   rootSegmentID: number,
-  errorHash: ?string, // the error hash if it errors
+  errorDigest: ?string, // the error hash if it errors
   errorMessage?: string, // the error string if it errors
   errorComponentStack?: string, // the error component stack if it errors
   forceClientRender: boolean, // if it errors or infinitely suspends
@@ -323,7 +323,7 @@ function createSuspenseBoundary(
     completedSegments: [],
     byteSize: 0,
     fallbackAbortableTasks,
-    errorHash: null,
+    errorDigest: null,
   };
 }
 
@@ -463,14 +463,14 @@ function captureBoundaryErrorDetailsDev(
 function logRecoverableError(request: Request, error: any): ?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 errorHash = request.onError(error);
-  if (errorHash != null && typeof errorHash !== 'string') {
+  const errorDigest = request.onError(error);
+  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 errorHash}" instead`,
+      `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 errorHash;
+  return errorDigest;
 }
 
 function fatalError(request: Request, error: mixed): void {
@@ -568,7 +568,7 @@ function renderSuspenseBoundary(
   } catch (error) {
     contentRootSegment.status = ERRORED;
     newBoundary.forceClientRender = true;
-    newBoundary.errorHash = logRecoverableError(request, error);
+    newBoundary.errorDigest = logRecoverableError(request, error);
     if (__DEV__) {
       captureBoundaryErrorDetailsDev(newBoundary, error);
     }
@@ -1488,14 +1488,14 @@ function erroredTask(
   error: mixed,
 ) {
   // Report the error to a global handler.
-  const errorHash = logRecoverableError(request, error);
+  const errorDigest = logRecoverableError(request, error);
   if (boundary === null) {
     fatalError(request, error);
   } else {
     boundary.pendingTasks--;
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
-      boundary.errorHash = errorHash;
+      boundary.errorDigest = errorDigest;
       if (__DEV__) {
         captureBoundaryErrorDetailsDev(boundary, error);
       }
@@ -1554,9 +1554,9 @@ function abortTask(task: Task): void {
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
       const error = new Error(
-        'This Suspense boundary was aborted by the server',
+        'This Suspense boundary was aborted by the server.',
       );
-      boundary.errorHash = request.onError(error);
+      boundary.errorDigest = request.onError(error);
       if (__DEV__) {
         captureBoundaryErrorDetailsDev(boundary, error);
       }
@@ -1838,7 +1838,7 @@ function flushSegment(
     writeStartClientRenderedSuspenseBoundary(
       destination,
       request.responseState,
-      boundary.errorHash,
+      boundary.errorDigest,
       boundary.errorMessage,
       boundary.errorComponentStack,
     );
@@ -1921,7 +1921,7 @@ function flushClientRenderedBoundary(
     destination,
     request.responseState,
     boundary.id,
-    boundary.errorHash,
+    boundary.errorDigest,
     boundary.errorMessage,
     boundary.errorComponentStack,
   );
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index a8c8810bbe49..826fe3b5db87 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -417,6 +417,6 @@
   "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": "This Suspense boundary was aborted by the server",
+  "432": "This Suspense boundary was aborted by the server.",
   "433": "useId can only be used while React is rendering"
 }

From bcbeb52bf36c6f5ecdad46a48e87cf4354c5a64f Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 7 Jun 2022 03:33:36 -0400
Subject: [PATCH 1401/1603] [Fizz] Disallow complex children in <title>
 elements (#24679)

* [Fizz] Disallow complex children in <title> elements

<title> Elements in the DOM can only have Text content. In Fizz if more than one text node is emitted an HTML comment node is used as a text separator. Unfortunately because of the content restriction of the DOM representation of the title element this separator is displayed as escaped text which is not what the component author intended.

This commit special cases title handling, primarily to issue warnings if you pass complex children to <title>. At the moment title expects to receive a single child or an array of length 1. In both cases the type of that child must be string or number. If anything more complex is provided a warning will be logged to the console explaining why this is problematic.

There is no runtime behavior change so broken things are still broken (e.g. returning two text nodes which will cause a separator or using Suspense inside title children) but they should at least be accompanied by warnings that are useful.

One edge case that will now warn but won't technically break an application is if you use a Component that returns a single string as a child of title. This is a form of indirection that works but becasue we cannot discriminate between a Component that will follow the rules and one that violates them the warning is issued regardless.

* fixup dev warning conditional logic

* lints

* fix bugs
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 191 ++++++++++++++++++
 .../src/server/ReactDOMServerFormatConfig.js  |  71 +++++++
 scripts/error-codes/codes.json                |   3 +-
 3 files changed, 264 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 7104350fde00..cca05ad88724 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -4425,4 +4425,195 @@ describe('ReactDOMFizzServer', () => {
       );
     });
   });
+
+  describe('title children', () => {
+    function prepareJSDOMForTitle() {
+      // Test Environment
+      const jsdom = new JSDOM('<!DOCTYPE html><html><head>\u0000', {
+        runScripts: 'dangerously',
+      });
+      window = jsdom.window;
+      document = jsdom.window.document;
+      container = document.getElementsByTagName('head')[0];
+    }
+
+    // @gate experimental
+    it('should accept a single string child', async () => {
+      // a Single string child
+      function App() {
+        return <title>hello</title>;
+      }
+
+      prepareJSDOMForTitle();
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
+    });
+
+    // @gate experimental
+    it('should accept children array of length 1 containing a string', async () => {
+      // a Single string child
+      function App() {
+        return <title>{['hello']}</title>;
+      }
+
+      prepareJSDOMForTitle();
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
+
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          errors.push(error.message);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors).toEqual([]);
+      expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
+    });
+
+    // @gate experimental
+    it('should warn in dev when given an array of length 2 or more', async () => {
+      const originalConsoleError = console.error;
+      const mockError = jest.fn();
+      console.error = (...args) => {
+        if (args.length > 1) {
+          if (typeof args[1] === 'object') {
+            mockError(args[0].split('\n')[0]);
+            return;
+          }
+        }
+        mockError(...args.map(normalizeCodeLocInfo));
+      };
+
+      // a Single string child
+      function App() {
+        return <title>{['hello1', 'hello2']}</title>;
+      }
+
+      try {
+        prepareJSDOMForTitle();
+
+        await act(async () => {
+          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+          pipe(writable);
+        });
+        if (__DEV__) {
+          expect(mockError).toHaveBeenCalledWith(
+            'Warning: A title element received an array with more than 1 element as children. ' +
+              'In browsers title Elements can only have Text Nodes as children. If ' +
+              'the children being rendered output more than a single text node in aggregate the browser ' +
+              'will display markup and comments as text in the title and hydration will likely fail and ' +
+              'fall back to client rendering%s',
+            '\n' + '    in title (at **)\n' + '    in App (at **)',
+          );
+        } else {
+          expect(mockError).not.toHaveBeenCalled();
+        }
+
+        expect(getVisibleChildren(container)).toEqual(
+          <title>{'hello1<!-- -->hello2'}</title>,
+        );
+
+        const errors = [];
+        ReactDOMClient.hydrateRoot(container, <App />, {
+          onRecoverableError(error) {
+            errors.push(error.message);
+          },
+        });
+        expect(Scheduler).toFlushAndYield([]);
+        expect(errors).toEqual(
+          [
+            gate(flags => flags.enableClientRenderFallbackOnTextMismatch)
+              ? 'Text content does not match server-rendered HTML.'
+              : null,
+            'Hydration failed because the initial UI does not match what was rendered on the server.',
+            'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+          ].filter(Boolean),
+        );
+        expect(getVisibleChildren(container)).toEqual(
+          <title>{['hello1', 'hello2']}</title>,
+        );
+      } finally {
+        console.error = originalConsoleError;
+      }
+    });
+
+    // @gate experimental
+    it('should warn in dev if you pass a React Component as a child to <title>', async () => {
+      const originalConsoleError = console.error;
+      const mockError = jest.fn();
+      console.error = (...args) => {
+        if (args.length > 1) {
+          if (typeof args[1] === 'object') {
+            mockError(args[0].split('\n')[0]);
+            return;
+          }
+        }
+        mockError(...args.map(normalizeCodeLocInfo));
+      };
+
+      function IndirectTitle() {
+        return 'hello';
+      }
+
+      function App() {
+        return (
+          <title>
+            <IndirectTitle />
+          </title>
+        );
+      }
+
+      try {
+        prepareJSDOMForTitle();
+
+        await act(async () => {
+          const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+          pipe(writable);
+        });
+        if (__DEV__) {
+          expect(mockError).toHaveBeenCalledWith(
+            'Warning: A title element received a React element for children. ' +
+              'In the browser title Elements can only have Text Nodes as children. If ' +
+              'the children being rendered output more than a single text node in aggregate the browser ' +
+              'will display markup and comments as text in the title and hydration will likely fail and ' +
+              'fall back to client rendering%s',
+            '\n' + '    in title (at **)\n' + '    in App (at **)',
+          );
+        } else {
+          expect(mockError).not.toHaveBeenCalled();
+        }
+
+        expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
+
+        const errors = [];
+        ReactDOMClient.hydrateRoot(container, <App />, {
+          onRecoverableError(error) {
+            errors.push(error.message);
+          },
+        });
+        expect(Scheduler).toFlushAndYield([]);
+        expect(errors).toEqual([]);
+        expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
+      } finally {
+        console.error = originalConsoleError;
+      }
+    });
+  });
 });
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 95e02a41b463..36c9469d6081 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1120,6 +1120,75 @@ function pushStartMenuItem(
   return null;
 }
 
+function pushStartTitle(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  responseState: ResponseState,
+): ReactNodeList {
+  target.push(startChunkForTag('title'));
+
+  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 'dangerouslySetInnerHTML':
+          throw new Error(
+            '`dangerouslySetInnerHTML` does not make sense on <title>.',
+          );
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          pushAttribute(target, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+  target.push(endOfStartTag);
+
+  if (__DEV__) {
+    const child =
+      Array.isArray(children) && children.length < 2
+        ? children[0] || null
+        : children;
+    if (Array.isArray(children) && children.length > 1) {
+      console.error(
+        'A title element received an array with more than 1 element as children. ' +
+          'In browsers title Elements can only have Text Nodes as children. If ' +
+          'the children being rendered output more than a single text node in aggregate the browser ' +
+          'will display markup and comments as text in the title and hydration will likely fail and ' +
+          'fall back to client rendering',
+      );
+    } else if (child != null && child.$$typeof != null) {
+      console.error(
+        'A title element received a React element for children. ' +
+          'In the browser title Elements can only have Text Nodes as children. If ' +
+          'the children being rendered output more than a single text node in aggregate the browser ' +
+          'will display markup and comments as text in the title and hydration will likely fail and ' +
+          'fall back to client rendering',
+      );
+    } else if (
+      child != null &&
+      typeof child !== 'string' &&
+      typeof child !== 'number'
+    ) {
+      console.error(
+        'A title element received a value that was not a string or number for children. ' +
+          'In the browser title Elements can only have Text Nodes as children. If ' +
+          'the children being rendered output more than a single text node in aggregate the browser ' +
+          'will display markup and comments as text in the title and hydration will likely fail and ' +
+          'fall back to client rendering',
+      );
+    }
+  }
+  return children;
+}
+
 function pushStartGenericElement(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
@@ -1390,6 +1459,8 @@ export function pushStartInstance(
       return pushInput(target, props, responseState);
     case 'menuitem':
       return pushStartMenuItem(target, props, responseState);
+    case 'title':
+      return pushStartTitle(target, props, responseState);
     // Newline eating tags
     case 'listing':
     case 'pre': {
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 826fe3b5db87..00748befe6d8 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -418,5 +418,6 @@
   "430": "ServerContext can only have a value prop and children. Found: %s",
   "431": "React elements are not allowed in ServerContext",
   "432": "This Suspense boundary was aborted by the server.",
-  "433": "useId can only be used while React is rendering"
+  "433": "useId can only be used while React is rendering",
+  "434": "`dangerouslySetInnerHTML` does not make sense on <title>."
 }

From 3bb154bbab78038f1b0aad42f10c006b71eac8da Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 7 Jun 2022 11:05:04 -0700
Subject: [PATCH 1402/1603] [DevTools] Run Devtools Regression Tests Once a Day
 (#24678)

We don't need to run DevTools regression tests once an hour, and also it makes getting the most recent react build or react devtools build really annoying, so run them once a day instead
---
 .circleci/config.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 6fa0208d682e..327ea1b5e0a9 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -583,8 +583,8 @@ workflows:
     unless: << pipeline.parameters.prerelease_commit_sha >>
     triggers:
       - schedule:
-          # DevTools regression tests run hourly
-          cron: "0 * * * *"
+          # DevTools regression tests run once a day
+          cron: "0 0 * * *"
           filters:
             branches:
               only:

From 7e8a020a4aa8a24e5f0c0ce06b25e485d2888f57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 7 Jun 2022 15:12:51 -0400
Subject: [PATCH 1403/1603] Remove extra Server Context argument (#24683)

This was left over from a refactor.
---
 .../react-server-dom-webpack/src/ReactFlightDOMServerNode.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index b89a91a456b8..6bb32203baff 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -36,7 +36,6 @@ function renderToPipeableStream(
   model: ReactModel,
   webpackMap: BundlerConfig,
   options?: Options,
-  context?: Array<[string, ServerContextJSONValue]>,
 ): PipeableStream {
   const request = createRequest(
     model,

From 79f54c16dc3d5298e6037df75db2beb3552896e9 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 7 Jun 2022 20:04:02 -0400
Subject: [PATCH 1404/1603] Bugfix: Revealing a hidden update (#24685)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add `isHidden` to OffscreenInstance

We need to be able to read whether an offscreen tree is hidden from
an imperative event. We can store this on its OffscreenInstance.

We were already scheduling a commit effect whenever the visibility
changes, in order to toggle the inner effects. So we can reuse that.

* [FORKED] Bugfix: Revealing a hidden update

This fixes a bug I discovered related to revealing a hidden Offscreen
tree. When this happens, we include in that render all the updates that
had previously been deferred — that is, all the updates that would have
already committed if the tree weren't hidden. This is necessary to avoid
tearing with the surrounding contents. (This was the "flickering"
Suspense bug we found a few years ago: #18411.)

The way we do this is by tracking the lanes of the updates that were
deferred by a hidden tree. These are the "base" lanes. Then, in order
to reveal the hidden tree, we process any update that matches one of
those base lanes.

The bug I discovered is that some of these base lanes may include
updates that were not present at the time the tree was hidden. We cannot
flush those updates earlier that the surrounding contents — that, too,
could cause tearing.

The crux of the problem is that we sometimes reuse the same lane for
base updates and for non-base updates. So the lane alone isn't
sufficient to distinguish between these cases. We must track this in
some other way.

The solution I landed upon was to add an extra OffscreenLane bit to any
update that is made to a hidden tree. Then later when we reveal the
tree, we'll know not to treat them as base updates.

The extra OffscreenLane bit is removed as soon as that lane is committed
by the root (markRootFinished) — at that point, it gets
"upgraded" to a base update.

The trickiest part of this algorithm is reliably detecting when an
update is made to a hidden tree. What makes this challenging is when the
update is received during a concurrent event, while a render is already
in progress — it's possible the work-in-progress render is about to
flip the visibility of the tree that's being updated, leading to a race
condition.

To avoid a race condition, we will wait to read the visibility of the
tree until the current render has finished. In other words, this makes
it an atomic operation. Most of this logic was already implemented
in #24663.

Because this bugfix depends on a moderately risky refactor to the update
queue (#24663), it only works in the "new" reconciler fork. We will roll
it out gradually to www before landing in the main fork.

* Add previous commit to list of forked revisions
---
 .../react-reconciler/src/ReactFiber.new.js    |   4 +-
 .../react-reconciler/src/ReactFiber.old.js    |   4 +-
 .../src/ReactFiberClassUpdateQueue.new.js     |  21 +-
 .../src/ReactFiberCommitWork.new.js           |  11 +
 .../src/ReactFiberCommitWork.old.js           |  11 +
 .../src/ReactFiberConcurrentUpdates.new.js    |  52 +++-
 .../src/ReactFiberHooks.new.js                |  18 +-
 .../src/ReactFiberLane.new.js                 |  33 +++
 .../src/ReactFiberOffscreenComponent.js       |   4 +-
 .../src/ReactFiberRoot.new.js                 |   2 +
 .../src/ReactFiberWorkLoop.new.js             |   7 +-
 .../src/ReactInternalTypes.js                 |   2 +
 .../src/__tests__/ReactOffscreen-test.js      | 122 +++++++++
 .../__tests__/ReactOffscreenSuspense-test.js  | 246 ++++++++++++++++++
 scripts/merge-fork/forked-revisions           |   1 +
 15 files changed, 520 insertions(+), 18 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 33fc93ef9361..58aabf70afa5 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -715,7 +715,9 @@ export function createFiberFromOffscreen(
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
-  const primaryChildInstance: OffscreenInstance = {};
+  const primaryChildInstance: OffscreenInstance = {
+    isHidden: false,
+  };
   fiber.stateNode = primaryChildInstance;
   return fiber;
 }
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index a65f460c6b27..afa8f26503cc 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -715,7 +715,9 @@ export function createFiberFromOffscreen(
   const fiber = createFiber(OffscreenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
-  const primaryChildInstance: OffscreenInstance = {};
+  const primaryChildInstance: OffscreenInstance = {
+    isHidden: false,
+  };
   fiber.stateNode = primaryChildInstance;
   return fiber;
 }
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
index 0311920ba299..ae9254add8d8 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@@ -90,8 +90,10 @@ import type {Lanes, Lane} from './ReactFiberLane.new';
 import {
   NoLane,
   NoLanes,
+  OffscreenLane,
   isSubsetOfLanes,
   mergeLanes,
+  removeLanes,
   isTransitionLane,
   intersectLanes,
   markRootEntangled,
@@ -108,6 +110,7 @@ import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   markSkippedUpdateLanes,
   isUnsafeClassRenderPhaseUpdate,
+  getWorkInProgressRootRenderLanes,
 } from './ReactFiberWorkLoop.new';
 import {
   enqueueConcurrentClassUpdate,
@@ -523,9 +526,23 @@ export function processUpdateQueue<State>(
 
     let update = firstBaseUpdate;
     do {
-      const updateLane = update.lane;
+      // TODO: Don't need this field anymore
       const updateEventTime = update.eventTime;
-      if (!isSubsetOfLanes(renderLanes, updateLane)) {
+
+      // 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.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index d023c1f776b3..8448f8c25eb2 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2309,8 +2309,14 @@ function commitMutationEffectsOnFiber(
       const offscreenFiber: Fiber = (finishedWork.child: any);
 
       if (offscreenFiber.flags & Visibility) {
+        const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
         const newState: OffscreenState | null = offscreenFiber.memoizedState;
         const isHidden = newState !== null;
+
+        // Track the current state on the Offscreen instance so we can
+        // read it during an event
+        offscreenInstance.isHidden = isHidden;
+
         if (isHidden) {
           const wasHidden =
             offscreenFiber.alternate !== null &&
@@ -2354,10 +2360,15 @@ function commitMutationEffectsOnFiber(
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
+        const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
+        // Track the current state on the Offscreen instance so we can
+        // read it during an event
+        offscreenInstance.isHidden = isHidden;
+
         if (enableSuspenseLayoutEffectSemantics) {
           if (isHidden) {
             if (!wasHidden) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index a9eae21939df..ab273999764b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2309,8 +2309,14 @@ function commitMutationEffectsOnFiber(
       const offscreenFiber: Fiber = (finishedWork.child: any);
 
       if (offscreenFiber.flags & Visibility) {
+        const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
         const newState: OffscreenState | null = offscreenFiber.memoizedState;
         const isHidden = newState !== null;
+
+        // Track the current state on the Offscreen instance so we can
+        // read it during an event
+        offscreenInstance.isHidden = isHidden;
+
         if (isHidden) {
           const wasHidden =
             offscreenFiber.alternate !== null &&
@@ -2354,10 +2360,15 @@ function commitMutationEffectsOnFiber(
       commitReconciliationEffects(finishedWork);
 
       if (flags & Visibility) {
+        const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
         const newState: OffscreenState | null = finishedWork.memoizedState;
         const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
+        // Track the current state on the Offscreen instance so we can
+        // read it during an event
+        offscreenInstance.isHidden = isHidden;
+
         if (enableSuspenseLayoutEffectSemantics) {
           if (isHidden) {
             if (!wasHidden) {
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index ed5a02cfea9e..ee35a11640e2 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -17,14 +17,21 @@ import type {
   Update as ClassUpdate,
 } from './ReactFiberClassUpdateQueue.new';
 import type {Lane, Lanes} from './ReactFiberLane.new';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
 import {warnAboutUpdateOnNotYetMountedFiberInDEV} from './ReactFiberWorkLoop.new';
-import {NoLane, NoLanes, mergeLanes} from './ReactFiberLane.new';
+import {
+  NoLane,
+  NoLanes,
+  mergeLanes,
+  markHiddenUpdate,
+} from './ReactFiberLane.new';
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
-import {HostRoot} from './ReactWorkTags';
+import {HostRoot, OffscreenComponent} from './ReactWorkTags';
 
-type ConcurrentUpdate = {
+export type ConcurrentUpdate = {
   next: ConcurrentUpdate,
+  lane: Lane,
 };
 
 type ConcurrentQueue = {
@@ -38,11 +45,13 @@ type ConcurrentQueue = {
 const concurrentQueues: Array<any> = [];
 let concurrentQueuesIndex = 0;
 
-export function finishQueueingConcurrentUpdates(): Lanes {
+let concurrentlyUpdatedLanes: Lanes = NoLanes;
+
+export function finishQueueingConcurrentUpdates(): void {
   const endIndex = concurrentQueuesIndex;
   concurrentQueuesIndex = 0;
 
-  let lanes = NoLanes;
+  concurrentlyUpdatedLanes = NoLanes;
 
   let i = 0;
   while (i < endIndex) {
@@ -68,12 +77,13 @@ export function finishQueueingConcurrentUpdates(): Lanes {
     }
 
     if (lane !== NoLane) {
-      lanes = mergeLanes(lanes, lane);
-      markUpdateLaneFromFiberToRoot(fiber, lane);
+      markUpdateLaneFromFiberToRoot(fiber, update, lane);
     }
   }
+}
 
-  return lanes;
+export function getConcurrentlyUpdatedLanes(): Lanes {
+  return concurrentlyUpdatedLanes;
 }
 
 function enqueueUpdate(
@@ -89,6 +99,8 @@ function enqueueUpdate(
   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.
@@ -151,11 +163,15 @@ export function unsafe_markUpdateLaneFromFiberToRoot(
   sourceFiber: Fiber,
   lane: Lane,
 ): FiberRoot | null {
-  markUpdateLaneFromFiberToRoot(sourceFiber, lane);
+  markUpdateLaneFromFiberToRoot(sourceFiber, null, lane);
   return getRootForUpdatedFiber(sourceFiber);
 }
 
-function markUpdateLaneFromFiberToRoot(sourceFiber: Fiber, lane: Lane): void {
+function markUpdateLaneFromFiberToRoot(
+  sourceFiber: Fiber,
+  update: ConcurrentUpdate | null,
+  lane: Lane,
+): void {
   // Update the source fiber's lanes
   sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
   let alternate = sourceFiber.alternate;
@@ -163,15 +179,31 @@ function markUpdateLaneFromFiberToRoot(sourceFiber: Fiber, lane: Lane): void {
     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) {
+      const offscreenInstance: OffscreenInstance = parent.stateNode;
+      if (offscreenInstance.isHidden) {
+        isHidden = true;
+      }
+    }
+
+    node = parent;
     parent = parent.return;
   }
+
+  if (isHidden && update !== null && node.tag === HostRoot) {
+    const root: FiberRoot = node.stateNode;
+    markHiddenUpdate(root, update, lane);
+  }
 }
 
 function getRootForUpdatedFiber(sourceFiber: Fiber): FiberRoot | null {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 697e87dd0137..c3ff781fb5f7 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -44,6 +44,7 @@ import {
 import {
   NoLane,
   SyncLane,
+  OffscreenLane,
   NoLanes,
   isSubsetOfLanes,
   includesBlockingLane,
@@ -83,6 +84,7 @@ import {
 } from './ReactHookEffectTags';
 import {
   getWorkInProgressRoot,
+  getWorkInProgressRootRenderLanes,
   scheduleUpdateOnFiber,
   requestUpdateLane,
   requestEventTime,
@@ -811,8 +813,20 @@ function updateReducer<S, I, A>(
     let newBaseQueueLast = null;
     let update = first;
     do {
-      const updateLane = update.lane;
-      if (!isSubsetOfLanes(renderLanes, updateLane)) {
+      // 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.
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 708c9318b3a9..bb76950eb973 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -9,6 +9,7 @@
 
 import type {FiberRoot} from './ReactInternalTypes';
 import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
 
 // 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.
@@ -648,6 +649,7 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
+  const hiddenUpdates = root.hiddenUpdates;
 
   // Clear the lanes that no longer have pending work
   let lanes = noLongerPendingLanes;
@@ -659,6 +661,21 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
     eventTimes[index] = NoTimestamp;
     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;
   }
 }
@@ -694,6 +711,22 @@ export function markRootEntangled(root: FiberRoot, entangledLanes: Lanes) {
   }
 }
 
+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,
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 05952f77a0fd..b43188103e6f 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -38,4 +38,6 @@ export type OffscreenQueue = {|
   transitions: Array<Transition> | null,
 |} | null;
 
-export type OffscreenInstance = {};
+export type OffscreenInstance = {|
+  isHidden: boolean,
+|};
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index ca9edcc3ded7..d8d275278717 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -80,6 +80,8 @@ function FiberRootNode(
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  this.hiddenUpdates = createLaneMap(null);
+
   this.identifierPrefix = identifierPrefix;
   this.onRecoverableError = onRecoverableError;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 82963ea0fa9d..e7e95b2694e0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -199,6 +199,7 @@ import {
 import {
   enqueueConcurrentRenderForLane,
   finishQueueingConcurrentUpdates,
+  getConcurrentlyUpdatedLanes,
 } from './ReactFiberConcurrentUpdates.new';
 
 import {
@@ -425,6 +426,10 @@ export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
 
+export function getWorkInProgressRootRenderLanes(): Lanes {
+  return workInProgressRootRenderLanes;
+}
+
 export function requestEventTime() {
   if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
     // We're inside React, so it's fine to read the actual time.
@@ -2059,7 +2064,7 @@ function commitRootImpl(
 
   // 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 = finishQueueingConcurrentUpdates();
+  const concurrentlyUpdatedLanes = getConcurrentlyUpdatedLanes();
   remainingLanes = mergeLanes(remainingLanes, concurrentlyUpdatedLanes);
 
   markRootFinished(root, remainingLanes);
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 618260b47c20..c6a7ed58b0b0 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -27,6 +27,7 @@ import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
 
 // Unwind Circular: moved from ReactFiberHooks.old
 export type HookType =
@@ -225,6 +226,7 @@ type BaseFiberRootProperties = {|
   callbackPriority: Lane,
   eventTimes: LaneMap<number>,
   expirationTimes: LaneMap<number>,
+  hiddenUpdates: LaneMap<Array<ConcurrentUpdate> | null>,
 
   pendingLanes: Lanes,
   suspendedLanes: Lanes,
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index d1e836c252ec..42b462100f31 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -6,6 +6,7 @@ let LegacyHidden;
 let Offscreen;
 let useState;
 let useLayoutEffect;
+let useEffect;
 
 describe('ReactOffscreen', () => {
   beforeEach(() => {
@@ -19,6 +20,7 @@ describe('ReactOffscreen', () => {
     Offscreen = React.unstable_Offscreen;
     useState = React.useState;
     useLayoutEffect = React.useLayoutEffect;
+    useEffect = React.useEffect;
   });
 
   function Text(props) {
@@ -473,4 +475,124 @@ describe('ReactOffscreen', () => {
     // Now it's visible
     expect(root).toMatchRenderedOutput(<span>Hi</span>);
   });
+
+  // Only works in new reconciler
+  // @gate variant
+  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.
+
+    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.unstable_yieldValue(
+            'Tearing! Inner and outer are inconsistent!',
+          );
+        } else {
+          Scheduler.unstable_yieldValue('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 (
+        <>
+          <Text text={'Outer: ' + outer} />
+          <Offscreen mode={show ? 'visible' : 'hidden'}>
+            <Child outer={outer} />
+          </Offscreen>
+        </>
+      );
+    }
+
+    // Render a hidden tree
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App show={false} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Outer: 0',
+      'Inner: 0',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Outer: 0" />
+        <span hidden={true} prop="Inner: 0" />
+      </>,
+    );
+
+    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.
+      expect(Scheduler).toFlushUntilNextPaint(['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.
+      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} />);
+      });
+
+      expect(Scheduler).toHaveYielded([
+        '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',
+
+        'Inner and outer are consistent',
+      ]);
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span prop="Outer: 1" />
+          <span prop="Inner: 1" />
+        </>,
+      );
+    });
+    expect(Scheduler).toHaveYielded([
+      'Outer: 2',
+      'Inner: 2',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Outer: 2" />
+        <span prop="Inner: 2" />
+      </>,
+    );
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
new file mode 100644
index 000000000000..3e5c25ce0271
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
@@ -0,0 +1,246 @@
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Offscreen;
+let Suspense;
+let useState;
+let useEffect;
+let textCache;
+
+describe('ReactOffscreen', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('jest-react').act;
+    Offscreen = React.unstable_Offscreen;
+    Suspense = React.Suspense;
+    useState = React.useState;
+    useEffect = React.useEffect;
+
+    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.unstable_yieldValue(`Suspend! [${text}]`);
+          throw record.value;
+        case 'rejected':
+          throw record.value;
+        case 'resolved':
+          return record.value;
+      }
+    } else {
+      Scheduler.unstable_yieldValue(`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.unstable_yieldValue(text);
+    return text;
+  }
+
+  function AsyncText({text}) {
+    readText(text);
+    Scheduler.unstable_yieldValue(text);
+    return text;
+  }
+
+  // Only works in new reconciler
+  // @gate variant
+  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 Offscreen
+    // 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.unstable_yieldValue(
+            'Tearing! Inner and outer are inconsistent!',
+          );
+        } else {
+          Scheduler.unstable_yieldValue('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 (
+        <>
+          <span>
+            <Text text={'Outer: ' + outer} />
+          </span>
+          <Offscreen mode={show ? 'visible' : 'hidden'}>
+            <span>
+              <Child outer={outer} />
+            </span>
+          </Offscreen>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <span>
+              <AsyncText text={'Async: ' + outer} />
+            </span>
+          </Suspense>
+        </>
+      );
+    }
+
+    // Render a hidden tree
+    const root = ReactNoop.createRoot();
+    resolveText('Async: 0');
+    await act(async () => {
+      root.render(<App show={true} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Outer: 0',
+      'Inner: 0',
+      'Async: 0',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Outer: 0</span>
+        <span>Inner: 0</span>
+        <span>Async: 0</span>
+      </>,
+    );
+
+    await act(async () => {
+      // Update a value both inside and outside the hidden tree. These values
+      // must always be consistent.
+      setOuter(1);
+      setInner(1);
+      // In the same render, also hide the offscreen tree.
+      root.render(<App show={false} />);
+
+      expect(Scheduler).toFlushAndYieldThrough([
+        // The outer update will commit, but the inner update is deferred until
+        // a later render.
+        'Outer: 1',
+
+        // Something suspended. This means we won't commit immediately; there
+        // will be an async gap between render and commit. In this test, we will
+        // use this property to schedule a concurrent update. The fact that
+        // we're using Suspense to schedule a concurrent update is not directly
+        // relevant to the test — we could also use time slicing, but I've
+        // chosen to use Suspense the because implementation details of time
+        // slicing are more volatile.
+        'Suspend! [Async: 1]',
+
+        'Loading...',
+      ]);
+      // Assert that we haven't committed quite yet
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Outer: 0</span>
+          <span>Inner: 0</span>
+          <span>Async: 0</span>
+        </>,
+      );
+
+      // Before the tree commits, schedule a concurrent event. The inner update
+      // is to a tree that's just about to be hidden.
+      setOuter(2);
+      setInner(2);
+
+      // Commit the previous render.
+      jest.runAllTimers();
+      expect(root).toMatchRenderedOutput(
+        <>
+          <span>Outer: 1</span>
+          <span hidden={true}>Inner: 0</span>
+          <span hidden={true}>Async: 0</span>
+          Loading...
+        </>,
+      );
+
+      // Now reveal the hidden tree at high priority.
+      ReactNoop.flushSync(() => {
+        root.render(<App show={true} />);
+      });
+      expect(Scheduler).toHaveYielded([
+        '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',
+
+        'Suspend! [Async: 1]',
+        'Loading...',
+        'Inner and outer are consistent',
+      ]);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Outer: 2',
+      'Inner: 2',
+      'Suspend! [Async: 2]',
+      'Loading...',
+      'Inner and outer are consistent',
+    ]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Outer: 2</span>
+        <span>Inner: 2</span>
+        <span hidden={true}>Async: 0</span>
+        Loading...
+      </>,
+    );
+  });
+});
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index 76d977e1f1c1..517ed44977fe 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -1 +1,2 @@
+31882b5dd66f34f70d341ea2781cacbe802bf4d5 [FORKED] Bugfix: Revealing a hidden update
 17691acc071d56261d43c3cf183f287d983baa9b [FORKED] Don't update childLanes until after current render

From b345523528f6b346c3a6de2145d5df6b2e23ca75 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 7 Jun 2022 22:36:09 -0700
Subject: [PATCH 1405/1603] [Fizz] Support abort reasons (#24680)

* [Fizz] Support abort reasons

Fizz supports aborting the render but does not currently accept a reason. The various render functions that use Fizz have some automatic and some user-controlled abort semantics that can be useful to communicate with the running program and users about why an Abort happened.

This change implements abort reasons for renderToReadableStream and renderToPipeable stream as well as legacy renderers such as renderToString and related implementations.

For AbortController implementations the reason passed to the abort method is forwarded to Fizz and sent to the onError handler. If no reason is provided the AbortController should construct an AbortError DOMException and as a fallback Fizz will generate a similar error in the absence of a reason

For pipeable  streams, an abort function is returned alongside pipe which already accepted a reason. That reason is now forwarded to Fizz and the implementation described above.

For legacy renderers there is no exposed abort functionality but it is used internally and the reasons provided give useful context to, for instance to the fact that Suspense is not supported in renderToString-like renderers
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 180 +++++-
 .../ReactDOMFizzServerBrowser-test.js         | 577 +++++++++++-------
 .../__tests__/ReactDOMFizzServerNode-test.js  |  14 +-
 .../__tests__/ReactDOMHydrationDiff-test.js   |   4 +-
 ...DOMServerPartialHydration-test.internal.js |  50 +-
 .../__tests__/ReactServerRendering-test.js    |  55 ++
 .../src/server/ReactDOMFizzServerBrowser.js   |   2 +-
 .../src/server/ReactDOMFizzServerNode.js      |  25 +-
 .../src/server/ReactDOMLegacyServerBrowser.js |  96 +--
 .../src/server/ReactDOMLegacyServerImpl.js    |  97 +++
 .../ReactDOMLegacyServerNode.classic.fb.js    |  19 +
 .../src/server/ReactDOMLegacyServerNode.js    | 104 +---
 .../server/ReactDOMLegacyServerNodeStream.js  | 106 ++++
 .../ReactDOMServerFB-test.internal.js         |   2 +-
 packages/react-server/src/ReactFizzServer.js  |  34 +-
 scripts/error-codes/codes.json                |   4 +-
 scripts/shared/inlinedHostConfigs.js          |   3 +
 17 files changed, 950 insertions(+), 422 deletions(-)
 create mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
 create mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js
 create mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index cca05ad88724..703e3280da58 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -1106,7 +1106,13 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
     expectErrors(
       errors,
-      [['This Suspense boundary was aborted by the server.', expectedDigest]],
+      [
+        [
+          'The server did not finish this Suspense boundary: The render was aborted by the server without a reason.',
+          expectedDigest,
+          componentStack(['h1', 'Suspense', 'div', 'App']),
+        ],
+      ],
       [
         [
           'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
@@ -3057,6 +3063,178 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate experimental
+  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(async () => {
+      const {
+        pipe,
+        abort: abortImpl,
+      } = ReactDOMFizzServer.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});
+      },
+    });
+
+    expect(Scheduler).toFlushAndYield([]);
+
+    expectErrors(
+      errors,
+      [
+        [
+          'The server did not finish this Suspense boundary: foobar',
+          'a digest',
+          componentStack(['Suspense', 'p', 'div', 'App']),
+        ],
+        [
+          'The server did not finish this Suspense boundary: foobar',
+          'a digest',
+          componentStack(['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',
+        ],
+      ],
+    );
+  });
+
+  // @gate experimental
+  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(async () => {
+      const {
+        pipe,
+        abort: abortImpl,
+      } = ReactDOMFizzServer.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});
+      },
+    });
+
+    expect(Scheduler).toFlushAndYield([]);
+
+    expectErrors(
+      errors,
+      [
+        [
+          'The server did not finish this Suspense boundary: uh oh',
+          'a digest',
+          componentStack(['Suspense', 'p', 'div', 'App']),
+        ],
+        [
+          'The server did not finish this Suspense boundary: uh oh',
+          'a digest',
+          componentStack(['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',
+        ],
+      ],
+    );
+  });
+
   describe('error escaping', () => {
     //@gate experimental
     it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index a1429b0d2a17..7ece6de67c28 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -14,13 +14,20 @@ global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStr
 global.TextEncoder = require('util').TextEncoder;
 
 let React;
+let ReactDOMClient;
 let ReactDOMFizzServer;
 let Suspense;
+let Scheduler;
+let JSDOM;
+let document;
+let container;
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
+    ReactDOMClient = require('react-dom/client');
+    Scheduler = require('scheduler');
     if (__EXPERIMENTAL__) {
       ReactDOMFizzServer = require('react-dom/server.browser');
     }
@@ -48,90 +55,137 @@ describe('ReactDOMFizzServer', () => {
     }
   }
 
-  // @gate experimental
-  it('should call renderToReadableStream', async () => {
-    const stream = await ReactDOMFizzServer.renderToReadableStream(
-      <div>hello world</div>,
-    );
-    const result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
-  });
+  describe('renderToReadableStream', () => {
+    // @gate experimental
+    it('should call renderToReadableStream', async () => {
+      const stream = await ReactDOMFizzServer.renderToReadableStream(
+        <div>hello world</div>,
+      );
+      const result = await readResult(stream);
+      expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+    });
+
+    // @gate experimental
+    it('should emit DOCTYPE at the root of the document', async () => {
+      const stream = await ReactDOMFizzServer.renderToReadableStream(
+        <html>
+          <body>hello world</body>
+        </html>,
+      );
+      const result = await readResult(stream);
+      expect(result).toMatchInlineSnapshot(
+        `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+      );
+    });
 
-  // @gate experimental
-  it('should emit DOCTYPE at the root of the document', async () => {
-    const stream = await ReactDOMFizzServer.renderToReadableStream(
-      <html>
-        <body>hello world</body>
-      </html>,
-    );
-    const result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
-    );
-  });
+    // @gate experimental
+    it('should emit bootstrap script src at the end', async () => {
+      const stream = await ReactDOMFizzServer.renderToReadableStream(
+        <div>hello world</div>,
+        {
+          bootstrapScriptContent: 'INIT();',
+          bootstrapScripts: ['init.js'],
+          bootstrapModules: ['init.mjs'],
+        },
+      );
+      const result = await readResult(stream);
+      expect(result).toMatchInlineSnapshot(
+        `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+      );
+    });
+
+    // @gate experimental
+    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 ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback="Loading">
+            <Wait />
+          </Suspense>
+        </div>,
+      );
 
-  // @gate experimental
-  it('should emit bootstrap script src at the end', async () => {
-    const stream = await ReactDOMFizzServer.renderToReadableStream(
-      <div>hello world</div>,
-      {
-        bootstrapScriptContent: 'INIT();',
-        bootstrapScripts: ['init.js'],
-        bootstrapModules: ['init.mjs'],
-      },
-    );
-    const result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
-    );
-  });
+      stream.allReady.then(() => (isComplete = true));
 
-  // @gate experimental
-  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 ReactDOMFizzServer.renderToReadableStream(
-      <div>
-        <Suspense fallback="Loading">
-          <Wait />
-        </Suspense>
-      </div>,
-    );
-
-    stream.allReady.then(() => (isComplete = true));
-
-    await jest.runAllTimers();
-    expect(isComplete).toBe(false);
-    // Resolve the loading.
-    hasLoaded = true;
-    await resolve();
-
-    await jest.runAllTimers();
-
-    expect(isComplete).toBe(true);
-
-    const result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
-    );
-  });
+      await jest.runAllTimers();
+      expect(isComplete).toBe(false);
+      // Resolve the loading.
+      hasLoaded = true;
+      await resolve();
 
-  // @gate experimental
-  it('should reject the promise when an error is thrown at the root', async () => {
-    const reportedErrors = [];
-    let caughtError = null;
-    try {
-      await ReactDOMFizzServer.renderToReadableStream(
+      await jest.runAllTimers();
+
+      expect(isComplete).toBe(true);
+
+      const result = await readResult(stream);
+      expect(result).toMatchInlineSnapshot(
+        `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
+      );
+    });
+
+    // @gate experimental
+    it('should reject the promise when an error is thrown at the root', async () => {
+      const reportedErrors = [];
+      let caughtError = null;
+      try {
+        await ReactDOMFizzServer.renderToReadableStream(
+          <div>
+            <Throw />
+          </div>,
+          {
+            onError(x) {
+              reportedErrors.push(x);
+            },
+          },
+        );
+      } catch (error) {
+        caughtError = error;
+      }
+      expect(caughtError).toBe(theError);
+      expect(reportedErrors).toEqual([theError]);
+    });
+
+    // @gate experimental
+    it('should reject the promise when an error is thrown inside a fallback', async () => {
+      const reportedErrors = [];
+      let caughtError = null;
+      try {
+        await 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]);
+    });
+
+    // @gate experimental
+    it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+      const reportedErrors = [];
+      const stream = await ReactDOMFizzServer.renderToReadableStream(
         <div>
-          <Throw />
+          <Suspense fallback={<div>Loading</div>}>
+            <Throw />
+          </Suspense>
         </div>,
         {
           onError(x) {
@@ -139,172 +193,263 @@ describe('ReactDOMFizzServer', () => {
           },
         },
       );
-    } catch (error) {
-      caughtError = error;
-    }
-    expect(caughtError).toBe(theError);
-    expect(reportedErrors).toEqual([theError]);
-  });
 
-  // @gate experimental
-  it('should reject the promise when an error is thrown inside a fallback', async () => {
-    const reportedErrors = [];
-    let caughtError = null;
-    try {
-      await ReactDOMFizzServer.renderToReadableStream(
+      const result = await readResult(stream);
+      expect(result).toContain('Loading');
+      expect(reportedErrors).toEqual([theError]);
+    });
+
+    // @gate experimental
+    it('should be able to complete by aborting even if the promise never resolves', async () => {
+      const errors = [];
+      const controller = new AbortController();
+      const stream = await ReactDOMFizzServer.renderToReadableStream(
         <div>
-          <Suspense fallback={<Throw />}>
+          <Suspense fallback={<div>Loading</div>}>
             <InfiniteSuspend />
           </Suspense>
         </div>,
         {
+          signal: controller.signal,
           onError(x) {
-            reportedErrors.push(x);
+            errors.push(x.message);
           },
         },
       );
-    } catch (error) {
-      caughtError = error;
-    }
-    expect(caughtError).toBe(theError);
-    expect(reportedErrors).toEqual([theError]);
-  });
 
-  // @gate experimental
-  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
-    const reportedErrors = [];
-    const stream = await ReactDOMFizzServer.renderToReadableStream(
-      <div>
-        <Suspense fallback={<div>Loading</div>}>
-          <Throw />
-        </Suspense>
-      </div>,
-      {
-        onError(x) {
-          reportedErrors.push(x);
+      controller.abort();
+
+      const result = await readResult(stream);
+      expect(result).toContain('Loading');
+
+      expect(errors).toEqual([
+        'The render was aborted by the server without a reason.',
+      ]);
+    });
+
+    // @gate experimental
+    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 ReactDOMFizzServer.renderToReadableStream(
+        <div>
+          <Suspense fallback={<div>Loading</div>}>
+            <Wait /> />
+          </Suspense>
+        </div>,
+        {
+          onError(x) {
+            errors.push(x.message);
+          },
         },
-      },
-    );
+      );
 
-    const result = await readResult(stream);
-    expect(result).toContain('Loading');
-    expect(reportedErrors).toEqual([theError]);
-  });
+      stream.allReady.then(() => (isComplete = true));
+
+      expect(rendered).toBe(false);
+      expect(isComplete).toBe(false);
+
+      const reader = stream.getReader();
+      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(isComplete).toBe(true);
+    });
+
+    // @gate experimental
+    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 ReactDOMFizzServer.renderToReadableStream(
+        <>
+          <div>
+            <span>{''}</span>
+          </div>
+          <div>{str492}</div>
+          <div>{str492}</div>
+        </>,
+      );
 
-  // @gate experimental
-  it('should be able to complete by aborting even if the promise never resolves', async () => {
-    const errors = [];
-    const controller = new AbortController();
-    const stream = await ReactDOMFizzServer.renderToReadableStream(
-      <div>
-        <Suspense fallback={<div>Loading</div>}>
-          <InfiniteSuspend />
-        </Suspense>
-      </div>,
-      {
+      let result;
+      result = await readResult(stream);
+      expect(result).toMatchInlineSnapshot(
+        `"<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 ReactDOMFizzServer.renderToReadableStream(
+        <>
+          <div>{str2049}</div>
+        </>,
+      );
+
+      result = await readResult(stream);
+      expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
+    });
+
+    // @gate experimental
+    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 ReactDOMFizzServer.renderToReadableStream(<App />, {
         signal: controller.signal,
         onError(x) {
-          errors.push(x.message);
+          errors.push(x);
+          return 'a digest';
         },
-      },
-    );
+      });
 
-    controller.abort();
+      // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+      // The abort call itself should set this property but since we are testing in node we
+      // set it here manually
+      controller.signal.reason = 'foobar';
+      controller.abort('foobar');
 
-    const result = await readResult(stream);
-    expect(result).toContain('Loading');
-
-    expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server.',
-    ]);
-  });
+      expect(errors).toEqual(['foobar', 'foobar']);
+    });
 
-  // @gate experimental
-  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) {
+    // @gate experimental
+    it('Supports custom abort reasons with an Error', async () => {
+      const promise = new Promise(r => {});
+      function Wait() {
         throw promise;
       }
-      rendered = true;
-      return 'Done';
-    }
-    const errors = [];
-    const stream = await ReactDOMFizzServer.renderToReadableStream(
-      <div>
-        <Suspense fallback={<div>Loading</div>}>
-          <Wait /> />
-        </Suspense>
-      </div>,
-      {
+      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 ReactDOMFizzServer.renderToReadableStream(<App />, {
+        signal: controller.signal,
         onError(x) {
           errors.push(x.message);
+          return 'a digest';
         },
-      },
-    );
-
-    stream.allReady.then(() => (isComplete = true));
+      });
 
-    expect(rendered).toBe(false);
-    expect(isComplete).toBe(false);
+      // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+      // The abort call itself should set this property but since we are testing in node we
+      // set it here manually
+      controller.signal.reason = new Error('uh oh');
+      controller.abort(new Error('uh oh'));
 
-    const reader = stream.getReader();
-    reader.cancel();
-
-    expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server.',
-    ]);
-
-    hasLoaded = true;
-    resolve();
+      expect(errors).toEqual(['uh oh', 'uh oh']);
+    });
+  });
 
-    await jest.runAllTimers();
+  describe('renderToString', () => {
+    beforeEach(() => {
+      JSDOM = require('jsdom').JSDOM;
 
-    expect(rendered).toBe(false);
-    expect(isComplete).toBe(true);
-  });
+      // 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');
+    });
+
+    // @gate experimental
+    it('refers users to apis that support Suspense when somethign suspends', () => {
+      function App({isClient}) {
+        return (
+          <div>
+            <Suspense fallback={'fallback'}>
+              {isClient ? 'resolved' : <InfiniteSuspend />}
+            </Suspense>
+          </div>
+        );
+      }
+      container.innerHTML = ReactDOMFizzServer.renderToString(
+        <App isClient={false} />,
+      );
 
-  // @gate experimental
-  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 ReactDOMFizzServer.renderToReadableStream(
-      <>
-        <div>
-          <span>{''}</span>
-        </div>
-        <div>{str492}</div>
-        <div>{str492}</div>
-      </>,
-    );
-
-    let result;
-    result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(
-      `"<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 ReactDOMFizzServer.renderToReadableStream(
-      <>
-        <div>{str2049}</div>
-      </>,
-    );
-
-    result = await readResult(stream);
-    expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
+      const errors = [];
+      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+        onRecoverableError(error, errorInfo) {
+          errors.push(error.message);
+        },
+      });
+
+      expect(Scheduler).toFlushAndYield([]);
+      expect(errors.length).toBe(1);
+      if (__DEV__) {
+        expect(errors[0]).toBe(
+          'The server did not finish this Suspense boundary: 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.',
+        );
+      }
+    });
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index a625a8df0e2f..303275bab5ec 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -226,7 +226,7 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toBe('');
     expect(reportedErrors).toEqual([
       theError.message,
-      'This Suspense boundary was aborted by the server.',
+      'The destination stream errored while writing data.',
     ]);
     expect(reportedShellErrors).toEqual([theError]);
   });
@@ -317,13 +317,11 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toContain('Loading');
     expect(isCompleteCalls).toBe(0);
 
-    abort();
+    abort(new Error('uh oh'));
 
     await completed;
 
-    expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server.',
-    ]);
+    expect(errors).toEqual(['uh oh']);
     expect(output.error).toBe(undefined);
     expect(output.result).toContain('Loading');
     expect(isCompleteCalls).toBe(1);
@@ -365,8 +363,8 @@ describe('ReactDOMFizzServer', () => {
 
     expect(errors).toEqual([
       // There are two boundaries that abort
-      'This Suspense boundary was aborted by the server.',
-      'This Suspense boundary was aborted by the server.',
+      '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');
@@ -603,7 +601,7 @@ describe('ReactDOMFizzServer', () => {
     await completed;
 
     expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server.',
+      'The destination stream errored while writing data.',
     ]);
     expect(rendered).toBe(false);
     expect(isComplete).toBe(true);
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index f2ddab69cdd0..e8e7dffee5d6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -830,7 +830,7 @@ describe('ReactDOMServerHydration', () => {
         } else {
           expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
-              "Caught [This Suspense boundary was aborted by the server.]",
+              "Caught [The server did not finish this Suspense boundary: 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]",
             ]
           `);
         }
@@ -865,7 +865,7 @@ describe('ReactDOMServerHydration', () => {
         } else {
           expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
-              "Caught [This Suspense boundary was aborted by the server.]",
+              "Caught [The server did not finish this Suspense boundary: 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]",
             ]
           `);
         }
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index c27eabe3e97d..e086448d6914 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -1674,11 +1674,17 @@ describe('ReactDOMServerPartialHydration', () => {
     // we exclude fb bundles with partial renderer
     if (__DEV__ && !usingPartialRenderer) {
       expect(Scheduler).toFlushAndYield([
-        'This Suspense boundary was aborted by the server.',
+        'The server did not finish this Suspense boundary: 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(Scheduler).toFlushAndYield([
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        'The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering. Switched to client rendering.',
       ]);
     }
     jest.runAllTimers();
@@ -1742,11 +1748,17 @@ describe('ReactDOMServerPartialHydration', () => {
     // we exclude fb bundles with partial renderer
     if (__DEV__ && !usingPartialRenderer) {
       expect(Scheduler).toFlushAndYield([
-        'This Suspense boundary was aborted by the server.',
+        'The server did not finish this Suspense boundary: 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(Scheduler).toFlushAndYield([
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        'The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering. Switched to client rendering.',
       ]);
     }
     // This will have exceeded the suspended time so we should timeout.
@@ -1815,11 +1827,17 @@ describe('ReactDOMServerPartialHydration', () => {
     // we exclude fb bundles with partial renderer
     if (__DEV__ && !usingPartialRenderer) {
       expect(Scheduler).toFlushAndYield([
-        'This Suspense boundary was aborted by the server.',
+        'The server did not finish this Suspense boundary: 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(Scheduler).toFlushAndYield([
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        'The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering. Switched to client rendering.',
       ]);
     }
     // This will have exceeded the suspended time so we should timeout.
@@ -2139,11 +2157,17 @@ describe('ReactDOMServerPartialHydration', () => {
     // we exclude fb bundles with partial renderer
     if (__DEV__ && !usingPartialRenderer) {
       expect(Scheduler).toFlushAndYield([
-        'This Suspense boundary was aborted by the server.',
+        'The server did not finish this Suspense boundary: 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(Scheduler).toFlushAndYield([
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        'The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering. Switched to client rendering.',
       ]);
     }
 
@@ -2208,11 +2232,17 @@ describe('ReactDOMServerPartialHydration', () => {
     // we exclude fb bundles with partial renderer
     if (__DEV__ && !usingPartialRenderer) {
       expect(Scheduler).toFlushAndYield([
-        'This Suspense boundary was aborted by the server.',
+        'The server did not finish this Suspense boundary: 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(Scheduler).toFlushAndYield([
-        'The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.',
+        'The server could not finish this Suspense boundary, likely due to ' +
+          'an error during server rendering. Switched to client rendering.',
       ]);
     }
     jest.runAllTimers();
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
index 23be43a7735a..fed698807718 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -14,6 +14,7 @@ let React;
 let ReactDOMServer;
 let PropTypes;
 let ReactCurrentDispatcher;
+let useingPartialRenderer;
 
 describe('ReactDOMServer', () => {
   beforeEach(() => {
@@ -24,6 +25,8 @@ describe('ReactDOMServer', () => {
     ReactCurrentDispatcher =
       React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .ReactCurrentDispatcher;
+
+    useingPartialRenderer = global.__WWW__ && !__EXPERIMENTAL__;
   });
 
   describe('renderToString', () => {
@@ -562,6 +565,23 @@ describe('ReactDOMServer', () => {
         '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>,
+      );
+      if (useingPartialRenderer) {
+        expect(response).toEqual('<!--$!-->fallback<!--/$-->');
+      } else {
+        expect(response).toEqual('fallback');
+      }
+    });
   });
 
   describe('renderToNodeStream', () => {
@@ -618,6 +638,41 @@ describe('ReactDOMServer', () => {
         expect(response.read()).toBeNull();
       });
     });
+
+    it('should refer users to new apis when using suspense', async () => {
+      let resolve = null;
+      const promise = new Promise(res => {
+        resolve = () => {
+          resolved = true;
+          res();
+        };
+      });
+      let resolved = false;
+      function Suspender() {
+        if (resolved) {
+          return 'resolved';
+        }
+        throw promise;
+      }
+
+      let response;
+      expect(() => {
+        response = ReactDOMServer.renderToNodeStream(
+          <div>
+            <React.Suspense fallback={'fallback'}>
+              <Suspender />
+            </React.Suspense>
+          </div>,
+        );
+      }).toErrorDev(
+        'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+        {withoutStack: true},
+      );
+      await resolve();
+      expect(response.read().toString()).toEqual(
+        '<div><!--$-->resolved<!-- --><!--/$--></div>',
+      );
+    });
   });
 
   it('warns with a no-op when an async setState is triggered', () => {
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 35fbf0e6023c..fc35fdb28679 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -97,7 +97,7 @@ function renderToReadableStream(
     if (options && options.signal) {
       const signal = options.signal;
       const listener = () => {
-        abort(request);
+        abort(request, (signal: any).reason);
         signal.removeEventListener('abort', listener);
       };
       signal.addEventListener('abort', listener);
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index c5318c2024aa..ce2b2e503086 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -28,8 +28,8 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request, destination);
 }
 
-function createAbortHandler(request) {
-  return () => abort(request);
+function createAbortHandler(request, reason) {
+  return () => abort(request, reason);
 }
 
 type Options = {|
@@ -90,11 +90,26 @@ function renderToPipeableStream(
       hasStartedFlowing = true;
       startFlowing(request, destination);
       destination.on('drain', createDrainHandler(destination, request));
-      destination.on('close', createAbortHandler(request));
+      destination.on(
+        'error',
+        createAbortHandler(
+          request,
+          // eslint-disable-next-line react-internal/prod-error-codes
+          new Error('The destination stream errored while writing data.'),
+        ),
+      );
+      destination.on(
+        'close',
+        createAbortHandler(
+          request,
+          // eslint-disable-next-line react-internal/prod-error-codes
+          new Error('The destination stream closed early.'),
+        ),
+      );
       return destination;
     },
-    abort() {
-      abort(request);
+    abort(reason) {
+      abort(request, reason);
     },
   };
 }
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 168f38fc59db..71786e4b5078 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -7,104 +7,36 @@
  * @flow
  */
 
-import ReactVersion from 'shared/ReactVersion';
-
 import type {ReactNodeList} from 'shared/ReactTypes';
 
-import {
-  createRequest,
-  startWork,
-  startFlowing,
-  abort,
-} from 'react-server/src/ReactFizzServer';
-
-import {
-  createResponseState,
-  createRootFormatContext,
-} from './ReactDOMServerLegacyFormatConfig';
+import {version, renderToStringImpl} from './ReactDOMLegacyServerImpl';
 
 type ServerOptions = {
   identifierPrefix?: string,
 };
 
-function onError() {
-  // Non-fatal errors are ignored.
-}
-
-function renderToStringImpl(
-  children: ReactNodeList,
-  options: void | ServerOptions,
-  generateStaticMarkup: boolean,
-): string {
-  let didFatal = false;
-  let fatalError = null;
-  let result = '';
-  const destination = {
-    push(chunk) {
-      if (chunk !== null) {
-        result += chunk;
-      }
-      return true;
-    },
-    destroy(error) {
-      didFatal = true;
-      fatalError = error;
-    },
-  };
-
-  let readyToStream = false;
-  function onShellReady() {
-    readyToStream = true;
-  }
-  const request = createRequest(
-    children,
-    createResponseState(
-      generateStaticMarkup,
-      options ? options.identifierPrefix : undefined,
-    ),
-    createRootFormatContext(),
-    Infinity,
-    onError,
-    undefined,
-    onShellReady,
-    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);
-  startFlowing(request, destination);
-  if (didFatal) {
-    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;
-}
-
 function renderToString(
   children: ReactNodeList,
   options?: ServerOptions,
 ): string {
-  return renderToStringImpl(children, options, false);
+  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);
+  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',
+  );
 }
 
 function renderToNodeStream() {
@@ -126,5 +58,5 @@ export {
   renderToStaticMarkup,
   renderToNodeStream,
   renderToStaticNodeStream,
-  ReactVersion as version,
+  version,
 };
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
new file mode 100644
index 000000000000..27e41b42e43a
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -0,0 +1,97 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import ReactVersion from 'shared/ReactVersion';
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerLegacyFormatConfig';
+
+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 = {
+    push(chunk) {
+      if (chunk !== null) {
+        result += chunk;
+      }
+      return true;
+    },
+    destroy(error) {
+      didFatal = true;
+      fatalError = error;
+    },
+  };
+
+  let readyToStream = false;
+  function onShellReady() {
+    readyToStream = true;
+  }
+  const request = createRequest(
+    children,
+    createResponseState(
+      generateStaticMarkup,
+      options ? options.identifierPrefix : undefined,
+    ),
+    createRootFormatContext(),
+    Infinity,
+    onError,
+    undefined,
+    onShellReady,
+    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) {
+    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.classic.fb.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js
new file mode 100644
index 000000000000..f542d77e295a
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 {
+  renderToString,
+  renderToStaticMarkup,
+  version,
+} from './ReactDOMServerLegacyPartialRendererBrowser';
+
+export {
+  renderToNodeStream,
+  renderToStaticNodeStream,
+} from './ReactDOMLegacyServerNodeStream';
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index f5c6aa1f4600..20e89de8b430 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -9,104 +9,38 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 
-import type {Request} from 'react-server/src/ReactFizzServer';
-
-import {
-  createRequest,
-  startWork,
-  startFlowing,
-  abort,
-} from 'react-server/src/ReactFizzServer';
-
+import {version, renderToStringImpl} from './ReactDOMLegacyServerImpl';
 import {
-  createResponseState,
-  createRootFormatContext,
-} from './ReactDOMServerLegacyFormatConfig';
-
-import {
-  version,
-  renderToString,
-  renderToStaticMarkup,
-} from './ReactDOMLegacyServerBrowser';
-
-import {Readable} from 'stream';
+  renderToNodeStream,
+  renderToStaticNodeStream,
+} from './ReactDOMLegacyServerNodeStream';
 
 type ServerOptions = {
   identifierPrefix?: string,
 };
 
-class ReactMarkupReadableStream extends Readable {
-  request: Request;
-  startedFlowing: boolean;
-  constructor() {
-    // Calls the stream.Readable(options) constructor. Consider exposing built-in
-    // features like highWaterMark in the future.
-    super({});
-    this.request = (null: any);
-    this.startedFlowing = false;
-  }
-
-  _destroy(err, callback) {
-    abort(this.request);
-    // $FlowFixMe: The type definition for the callback should allow undefined and null.
-    callback(err);
-  }
-
-  _read(size) {
-    if (this.startedFlowing) {
-      startFlowing(this.request, this);
-    }
-  }
-}
-
-function onError() {
-  // Non-fatal errors are ignored.
-}
-
-function renderToNodeStreamImpl(
+function renderToString(
   children: ReactNodeList,
-  options: void | ServerOptions,
-  generateStaticMarkup: boolean,
-): Readable {
-  function onAllReady() {
-    // We wait until everything has loaded before starting to write.
-    // That way we only end up with fully resolved HTML even if we suspend.
-    destination.startedFlowing = true;
-    startFlowing(request, destination);
-  }
-  const destination = new ReactMarkupReadableStream();
-  const request = createRequest(
+  options?: ServerOptions,
+): string {
+  return renderToStringImpl(
     children,
-    createResponseState(false, options ? options.identifierPrefix : undefined),
-    createRootFormatContext(),
-    Infinity,
-    onError,
-    onAllReady,
-    undefined,
-    undefined,
+    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',
   );
-  destination.request = request;
-  startWork(request);
-  return destination;
 }
 
-function renderToNodeStream(
+function renderToStaticMarkup(
   children: ReactNodeList,
   options?: ServerOptions,
-): Readable {
-  if (__DEV__) {
-    console.error(
-      'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
-    );
-  }
-  return renderToNodeStreamImpl(children, options, false);
-}
-
-function renderToStaticNodeStream(
-  children: ReactNodeList,
-  options?: ServerOptions,
-): Readable {
-  return renderToNodeStreamImpl(children, options, true);
+): 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 {
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
new file mode 100644
index 000000000000..25b88156e075
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import type {Request} from 'react-server/src/ReactFizzServer';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerLegacyFormatConfig';
+
+import {Readable} from 'stream';
+
+type ServerOptions = {
+  identifierPrefix?: string,
+};
+
+class ReactMarkupReadableStream extends Readable {
+  request: Request;
+  startedFlowing: boolean;
+  constructor() {
+    // Calls the stream.Readable(options) constructor. Consider exposing built-in
+    // features like highWaterMark in the future.
+    super({});
+    this.request = (null: any);
+    this.startedFlowing = false;
+  }
+
+  _destroy(err, callback) {
+    abort(this.request);
+    // $FlowFixMe: The type definition for the callback should allow undefined and null.
+    callback(err);
+  }
+
+  _read(size) {
+    if (this.startedFlowing) {
+      startFlowing(this.request, this);
+    }
+  }
+}
+
+function onError() {
+  // Non-fatal errors are ignored.
+}
+
+function renderToNodeStreamImpl(
+  children: ReactNodeList,
+  options: void | ServerOptions,
+  generateStaticMarkup: boolean,
+): Readable {
+  function onAllReady() {
+    // We wait until everything has loaded before starting to write.
+    // That way we only end up with fully resolved HTML even if we suspend.
+    destination.startedFlowing = true;
+    startFlowing(request, destination);
+  }
+  const destination = new ReactMarkupReadableStream();
+  const request = createRequest(
+    children,
+    createResponseState(false, options ? options.identifierPrefix : undefined),
+    createRootFormatContext(),
+    Infinity,
+    onError,
+    onAllReady,
+    undefined,
+    undefined,
+  );
+  destination.request = request;
+  startWork(request);
+  return destination;
+}
+
+function renderToNodeStream(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): Readable {
+  if (__DEV__) {
+    console.error(
+      'renderToNodeStream is deprecated. Use renderToPipeableStream instead.',
+    );
+  }
+  return renderToNodeStreamImpl(children, options, false);
+}
+
+function renderToStaticNodeStream(
+  children: ReactNodeList,
+  options?: ServerOptions,
+): Readable {
+  return renderToNodeStreamImpl(children, options, true);
+}
+
+export {renderToNodeStream, renderToStaticNodeStream};
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
index 857a374f3e81..53de82a1ec28 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactDOMServerFB-test.internal.js
@@ -192,7 +192,7 @@ describe('ReactDOMServerFB', () => {
     expect(remaining).toEqual('');
 
     expect(errors).toEqual([
-      'This Suspense boundary was aborted by the server.',
+      'The render was aborted by the server without a reason.',
     ]);
   });
 });
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 2b0a3d82e060..9e6551d938c0 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1530,10 +1530,9 @@ function abortTaskSoft(task: Task): void {
   finishedTask(request, boundary, segment);
 }
 
-function abortTask(task: Task): void {
+function abortTask(task: Task, request: Request, reason: mixed): void {
   // This aborts the task and aborts the parent that it blocks, putting it into
   // client rendered mode.
-  const request: Request = this;
   const boundary = task.blockedBoundary;
   const segment = task.blockedSegment;
   segment.status = ABORTED;
@@ -1553,12 +1552,27 @@ function abortTask(task: Task): void {
 
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
-      const error = new Error(
-        'This Suspense boundary was aborted by the server.',
-      );
+      let error =
+        reason === undefined
+          ? new Error('The render was aborted by the server without a reason.')
+          : reason;
       boundary.errorDigest = request.onError(error);
       if (__DEV__) {
-        captureBoundaryErrorDetailsDev(boundary, error);
+        const errorPrefix =
+          'The server did not finish this Suspense boundary: ';
+        if (error && typeof error.message === 'string') {
+          error = errorPrefix + error.message;
+        } else {
+          // eslint-disable-next-line react-internal/safe-string-coercion
+          error = errorPrefix + String(error);
+        }
+        const previousTaskInDev = currentTaskInDEV;
+        currentTaskInDEV = task;
+        try {
+          captureBoundaryErrorDetailsDev(boundary, error);
+        } finally {
+          currentTaskInDEV = previousTaskInDev;
+        }
       }
       if (boundary.parentFlushed) {
         request.clientRenderedBoundaries.push(boundary);
@@ -1567,7 +1581,9 @@ function abortTask(task: Task): void {
 
     // 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(abortTask, request);
+    boundary.fallbackAbortableTasks.forEach(fallbackTask =>
+      abortTask(fallbackTask, request, reason),
+    );
     boundary.fallbackAbortableTasks.clear();
 
     request.allPendingTasks--;
@@ -2159,10 +2175,10 @@ export function startFlowing(request: Request, destination: Destination): void {
 }
 
 // This is called to early terminate a request. It puts all pending boundaries in client rendered state.
-export function abort(request: Request): void {
+export function abort(request: Request, reason: mixed): void {
   try {
     const abortableTasks = request.abortableTasks;
-    abortableTasks.forEach(abortTask, request);
+    abortableTasks.forEach(task => abortTask(task, request, reason));
     abortableTasks.clear();
     if (request.destination !== null) {
       flushCompletedQueues(request, request.destination);
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 00748befe6d8..48afd882a0c7 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -417,7 +417,7 @@
   "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": "This Suspense boundary was aborted by the server.",
+  "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>."
-}
+}
\ No newline at end of file
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 4e47b4fd6ffc..eb0eef910983 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -69,8 +69,11 @@ module.exports = [
     paths: [
       'react-dom',
       'react-server-dom-webpack',
+      'react-dom/src/server/ReactDOMLegacyServerImpl.js', // not an entrypoint, but only usable in *Brower and *Node files
       'react-dom/src/server/ReactDOMLegacyServerBrowser.js', // react-dom/server.browser
       'react-dom/src/server/ReactDOMLegacyServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js',
+      'react-dom/src/server/ReactDOMLegacyServerNodeStream.js', // file indirection to support partial forking of some methods in *Node
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
     ],
     isFlowTyped: true,

From 47944142f57d8c1c7b79eaf6522de38e76137ca5 Mon Sep 17 00:00:00 2001
From: Mathieu Dutour <mathieu@dutour.me>
Date: Wed, 8 Jun 2022 18:00:10 +0200
Subject: [PATCH 1406/1603] `now` isn't part of the react-reconciler config
 anymore (#24689)

---
 packages/react-reconciler/README.md                           | 4 ----
 .../react-reconciler/src/forks/ReactFiberHostConfig.custom.js | 1 -
 2 files changed, 5 deletions(-)

diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index 8b0fc1b9eae7..c2f7991acdb2 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -187,10 +187,6 @@ You can leave it empty.
 
 This method is called for a container that's used as a portal target. Usually you can leave it empty.
 
-#### `now()`
-
-You can proxy this to `performance.now()` or its equivalent in your environment.
-
 #### `scheduleTimeout(fn, delay)`
 
 You can proxy this to `setTimeout` or its equivalent in your environment.
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 8ef999f432fb..8afc9a3aa2cb 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -54,7 +54,6 @@ export const createTextInstance = $$$hostConfig.createTextInstance;
 export const scheduleTimeout = $$$hostConfig.scheduleTimeout;
 export const cancelTimeout = $$$hostConfig.cancelTimeout;
 export const noTimeout = $$$hostConfig.noTimeout;
-export const now = $$$hostConfig.now;
 export const isPrimaryRenderer = $$$hostConfig.isPrimaryRenderer;
 export const warnsIfNotActing = $$$hostConfig.warnsIfNotActing;
 export const supportsMutation = $$$hostConfig.supportsMutation;

From 060505e9dce2f3d5d9d67c2a9415b94e5b0ca291 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 8 Jun 2022 09:49:31 -0700
Subject: [PATCH 1407/1603] Fix misapplying prod error opt-out (#24688)

The eslint-disable-next-line opt out for prod error minification was not properly working. In the build a replacable error was output even though it was not failing the build. This change refactors the code to avoid the erroneous behavior but a fix for the lint may be better
---
 .../src/ReactFiberBeginWork.new.js            | 19 +++++++++++--------
 .../src/ReactFiberBeginWork.old.js            | 19 +++++++++++--------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index aa7ec7c5f9bd..bda70790734d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2593,14 +2593,17 @@ function updateDehydratedSuspenseComponent(
         ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
       }
 
-      const error = message
-        ? // eslint-disable-next-line react-internal/prod-error-codes
-          new Error(message)
-        : new Error(
-            'The server could not finish this Suspense boundary, likely ' +
-              'due to an error during server rendering. Switched to ' +
-              'client rendering.',
-          );
+      let error;
+      if (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.',
+        );
+      }
       const capturedValue = createCapturedValue(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 4601d0dded1c..5050ae80d85c 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2593,14 +2593,17 @@ function updateDehydratedSuspenseComponent(
         ({digest} = getSuspenseInstanceFallbackErrorDetails(suspenseInstance));
       }
 
-      const error = message
-        ? // eslint-disable-next-line react-internal/prod-error-codes
-          new Error(message)
-        : new Error(
-            'The server could not finish this Suspense boundary, likely ' +
-              'due to an error during server rendering. Switched to ' +
-              'client rendering.',
-          );
+      let error;
+      if (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.',
+        );
+      }
       const capturedValue = createCapturedValue(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,

From 42b330c1c9bf71ca512c56c204bca36bdd53b3c6 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Jun 2022 13:07:05 -0400
Subject: [PATCH 1408/1603] Fix check_error_codes CI job (#24692)

The diff command was missing a --quiet argument, causing the job not to
fail when unminified messages were found.
---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 327ea1b5e0a9..2a259a76a5cd 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -329,7 +329,7 @@ jobs:
           name: Search build artifacts for unminified errors
           command: |
             yarn extract-errors
-            git diff || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
+            git diff --quiet || (echo "Found unminified errors. Either update the error codes map or disable error minification for the affected build, if appropriate." && false)
 
   yarn_test:
     docker: *docker

From 3e92eb0fce762aca49d2ea18b869a2fd8a75089e Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Wed, 8 Jun 2022 16:01:06 -0400
Subject: [PATCH 1409/1603] [DevTools] find best renderer when inspecting
 (#24665)

* [DevTools] find best renderer when inspecting

* fix lint

* fix test

* fix lint

* move logic to agent

* fix lint

* style improvements per review comments

* fix lint & flow

* re-add try catch for safety
---
 .../src/backend/agent.js                      | 24 +++++++++---
 .../src/backend/legacy/renderer.js            |  8 ++++
 .../src/backend/renderer.js                   |  5 +++
 .../src/backend/types.js                      |  3 +-
 .../backend/views/Highlighter/Highlighter.js  |  5 ++-
 .../src/backend/views/Highlighter/Overlay.js  | 37 ++++++++++---------
 .../src/backend/views/Highlighter/index.js    |  4 +-
 7 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 0f0ddbc332c1..a5bb7139f616 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -309,17 +309,31 @@ export default class Agent extends EventEmitter<{|
     return renderer.getInstanceAndStyle(id);
   }
 
-  getIDForNode(node: Object): number | null {
+  getBestMatchingRendererInterface(node: Object): RendererInterface | null {
+    let bestMatch = null;
     for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
       ]: any): RendererInterface);
+      const fiber = renderer.getFiberForNative(node);
+      if (fiber !== null) {
+        // check if fiber.stateNode is matching the original hostInstance
+        if (fiber.stateNode === node) {
+          return renderer;
+        } else if (bestMatch === null) {
+          bestMatch = renderer;
+        }
+      }
+    }
+    // if an exact match is not found, return the first valid renderer as fallback
+    return bestMatch;
+  }
 
+  getIDForNode(node: Object): number | null {
+    const rendererInterface = this.getBestMatchingRendererInterface(node);
+    if (rendererInterface != null) {
       try {
-        const id = renderer.getFiberIDForNative(node, true);
-        if (id !== null) {
-          return id;
-        }
+        return rendererInterface.getFiberIDForNative(node, true);
       } catch (error) {
         // Some old React versions might throw if they can't find a match.
         // If so we should ignore it...
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index f24b5bac85bb..a3b1a860b8ac 100644
--- a/packages/react-devtools-shared/src/backend/legacy/renderer.js
+++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -148,6 +148,10 @@ export function attach(
 
   let getInternalIDForNative: GetFiberIDForNative = ((null: any): GetFiberIDForNative);
   let findNativeNodeForInternalID: (id: number) => ?NativeType;
+  let getFiberForNative = (node: NativeType) => {
+    // Not implemented.
+    return null;
+  };
 
   if (renderer.ComponentTree) {
     getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
@@ -160,6 +164,9 @@ export function attach(
       const internalInstance = idToInternalInstanceMap.get(id);
       return renderer.ComponentTree.getNodeFromInstance(internalInstance);
     };
+    getFiberForNative = (node: NativeType) => {
+      return renderer.ComponentTree.getClosestInstanceFromNode(node);
+    };
   } else if (renderer.Mount.getID && renderer.Mount.getNode) {
     getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
       // Not implemented.
@@ -1094,6 +1101,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getDisplayNameForFiberID,
+    getFiberForNative,
     getFiberIDForNative: getInternalIDForNative,
     getInstanceAndStyle,
     findNativeNodesForFiberID: (id: number) => {
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 055b57ee4b52..5f9033af9903 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2818,6 +2818,10 @@ export function attach(
     return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null;
   }
 
+  function getFiberForNative(hostInstance) {
+    return renderer.findFiberByHostInstance(hostInstance);
+  }
+
   function getFiberIDForNative(
     hostInstance,
     findNearestUnfilteredAncestor = false,
@@ -4490,6 +4494,7 @@ export function attach(
     flushInitialOperations,
     getBestMatchForTrackedPath,
     getDisplayNameForFiberID,
+    getFiberForNative,
     getFiberIDForNative,
     getInstanceAndStyle,
     getOwnersList,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 92ad42c3010c..81ed15b04ae7 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -93,7 +93,7 @@ export type Lane = number;
 export type Lanes = number;
 
 export type ReactRenderer = {
-  findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber,
+  findFiberByHostInstance: (hostInstance: NativeType) => Fiber | null,
   version: string,
   rendererPackageName: string,
   bundleType: BundleType,
@@ -350,6 +350,7 @@ export type RendererInterface = {
   findNativeNodesForFiberID: FindNativeNodesForFiberID,
   flushInitialOperations: () => void,
   getBestMatchForTrackedPath: () => PathMatch | null,
+  getFiberForNative: (component: NativeType) => Fiber | null,
   getFiberIDForNative: GetFiberIDForNative,
   getDisplayNameForFiberID: GetDisplayNameForFiberID,
   getInstanceAndStyle(id: number): InstanceAndStyle,
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
index b547913cda46..3a5228658e21 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type Agent from 'react-devtools-shared/src/backend/agent';
+
 import Overlay from './Overlay';
 
 const SHOW_DURATION = 2000;
@@ -26,6 +28,7 @@ export function hideOverlay() {
 export function showOverlay(
   elements: Array<HTMLElement> | null,
   componentName: string | null,
+  agent: Agent,
   hideAfterTimeout: boolean,
 ) {
   // TODO (npm-packages) Detect RN and support it somehow
@@ -42,7 +45,7 @@ export function showOverlay(
   }
 
   if (overlay === null) {
-    overlay = new Overlay();
+    overlay = new Overlay(agent);
   }
 
   overlay.inspect(elements, componentName);
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
index ba763562a162..b9bfae87a86d 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -9,13 +9,13 @@
 
 import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
 
-const assign = Object.assign;
-
-import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 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.
@@ -153,8 +153,9 @@ export default class Overlay {
   container: HTMLElement;
   tip: OverlayTip;
   rects: Array<OverlayRect>;
+  agent: Agent;
 
-  constructor() {
+  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;
@@ -170,6 +171,8 @@ export default class Overlay {
     this.tip = new OverlayTip(doc, this.container);
     this.rects = [];
 
+    this.agent = agent;
+
     doc.body.appendChild(this.container);
   }
 
@@ -230,22 +233,20 @@ export default class Overlay {
       name = elements[0].nodeName.toLowerCase();
 
       const node = elements[0];
-      const hook: DevToolsHook =
-        node.ownerDocument.defaultView.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-      if (hook != null && hook.rendererInterfaces != null) {
-        let ownerName = null;
-        // eslint-disable-next-line no-for-of-loops/no-for-of-loops
-        for (const rendererInterface of hook.rendererInterfaces.values()) {
-          const id = rendererInterface.getFiberIDForNative(node, true);
-          if (id !== null) {
-            ownerName = rendererInterface.getDisplayNameForFiberID(id, true);
-            break;
+      const rendererInterface = this.agent.getBestMatchingRendererInterface(
+        node,
+      );
+      if (rendererInterface) {
+        const id = rendererInterface.getFiberIDForNative(node, true);
+        if (id) {
+          const ownerName = rendererInterface.getDisplayNameForFiberID(
+            id,
+            true,
+          );
+          if (ownerName) {
+            name += ' (in ' + ownerName + ')';
           }
         }
-
-        if (ownerName) {
-          name += ' (in ' + ownerName + ')';
-        }
       }
     }
 
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
index 1f3b8974b657..683c37fd8d02 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -118,7 +118,7 @@ export default function setupHighlighter(
         node.scrollIntoView({block: 'nearest', inline: 'nearest'});
       }
 
-      showOverlay(nodes, displayName, hideAfterTimeout);
+      showOverlay(nodes, displayName, agent, hideAfterTimeout);
 
       if (openNativeElementsPanel) {
         window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
@@ -171,7 +171,7 @@ export default function setupHighlighter(
 
     // Don't pass the name explicitly.
     // It will be inferred from DOM tag and Fiber owner.
-    showOverlay([target], null, false);
+    showOverlay([target], null, agent, false);
 
     selectFiberForNode(target);
   }

From 9e3b772b8cabbd8cadc7522ebe3dde3279e79d9e Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 8 Jun 2022 16:59:49 -0700
Subject: [PATCH 1410/1603] Update error transform to allow excluding errors
 inside subexpressions like ternaries (#24693)

* Update error transform to allow excluding errors inside subexpressions like ternaries

* make leadingcomments aggregation walk the expression stack
---
 .../transform-error-messages.js.snap          | 24 ++++++++++
 .../__tests__/transform-error-messages.js     | 48 +++++++++++++++++++
 .../error-codes/transform-error-messages.js   | 15 +++++-
 3 files changed, 86 insertions(+), 1 deletion(-)

diff --git a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
index 97870a4b31b8..924dcdfa91f8 100644
--- a/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
+++ b/scripts/error-codes/__tests__/__snapshots__/transform-error-messages.js.snap
@@ -1,10 +1,34 @@
 // 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();"
diff --git a/scripts/error-codes/__tests__/transform-error-messages.js b/scripts/error-codes/__tests__/transform-error-messages.js
index 3cf08b69e848..e3f761596a9f 100644
--- a/scripts/error-codes/__tests__/transform-error-messages.js
+++ b/scripts/error-codes/__tests__/transform-error-messages.js
@@ -106,6 +106,54 @@ new Error(\`Expected \${foo} target to \` + \`be an array; got \${bar}\`);
     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();
   });
diff --git a/scripts/error-codes/transform-error-messages.js b/scripts/error-codes/transform-error-messages.js
index a429ed4008b6..18cd4e06852e 100644
--- a/scripts/error-codes/transform-error-messages.js
+++ b/scripts/error-codes/transform-error-messages.js
@@ -62,8 +62,21 @@ module.exports = function(babel) {
       //     throw Error(`A ${adj} message that contains ${noun}`);
       //   }
 
+      let leadingComments = [];
+
       const statementParent = path.getStatementParent();
-      const leadingComments = statementParent.node.leadingComments;
+      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

From 8186b19378d9085fcdec32c42e2ec8845c1f8ce0 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 8 Jun 2022 22:29:10 -0400
Subject: [PATCH 1411/1603] Check for infinite update loops even if unmounted
 (#24697)

* [FORKED] Check for infinite update loops even if unmounted

The infinite update loop check doesn't need to run if the component
already unmounted, because an update to an unmounted component can't
cause a re-render. But because we used to run the check in this case,
anyway, I found one test in www that happens to "rely on" this behavior
(accidentally). The test is a pretty messy snapshot thing that I have no
interest fixing so to unblock the sync I'm just going to switch this
back to how it was.

* Add previous commit to forked revisions
---
 .../src/ReactFiberConcurrentUpdates.new.js           | 12 +++++++++++-
 .../src/ReactFiberConcurrentUpdates.old.js           | 12 +++++++++++-
 .../react-reconciler/src/ReactFiberWorkLoop.new.js   |  6 +++---
 .../react-reconciler/src/ReactFiberWorkLoop.old.js   |  4 +---
 scripts/merge-fork/forked-revisions                  |  1 +
 5 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index ee35a11640e2..74e19f40b498 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -19,7 +19,10 @@ import type {
 import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
-import {warnAboutUpdateOnNotYetMountedFiberInDEV} from './ReactFiberWorkLoop.new';
+import {
+  warnAboutUpdateOnNotYetMountedFiberInDEV,
+  throwIfInfiniteUpdateLoopDetected,
+} from './ReactFiberWorkLoop.new';
 import {
   NoLane,
   NoLanes,
@@ -207,6 +210,13 @@ function markUpdateLaneFromFiberToRoot(
 }
 
 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
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 8f3a11c938f6..42b6520238c1 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -18,7 +18,10 @@ import type {
 } from './ReactFiberClassUpdateQueue.old';
 import type {Lane} from './ReactFiberLane.old';
 
-import {warnAboutUpdateOnNotYetMountedFiberInDEV} from './ReactFiberWorkLoop.old';
+import {
+  warnAboutUpdateOnNotYetMountedFiberInDEV,
+  throwIfInfiniteUpdateLoopDetected,
+} from './ReactFiberWorkLoop.old';
 import {mergeLanes} from './ReactFiberLane.old';
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot} from './ReactWorkTags';
@@ -143,6 +146,13 @@ function markUpdateLaneFromFiberToRoot(
   sourceFiber: Fiber,
   lane: Lane,
 ): 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();
+
   // Update the source fiber's lanes
   sourceFiber.lanes = mergeLanes(sourceFiber.lanes, lane);
   let alternate = sourceFiber.alternate;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index e7e95b2694e0..21f9d17850f1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -536,8 +536,6 @@ export function scheduleUpdateOnFiber(
   lane: Lane,
   eventTime: number,
 ) {
-  checkForNestedUpdates();
-
   if (__DEV__) {
     if (isRunningInsertionEffect) {
       console.error('useInsertionEffect must not schedule updates.');
@@ -2782,10 +2780,12 @@ function jnd(timeElapsed: number) {
     : ceil(timeElapsed / 1960) * 1960;
 }
 
-function checkForNestedUpdates() {
+export function throwIfInfiniteUpdateLoopDetected() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
+    nestedPassiveUpdateCount = 0;
     rootWithNestedUpdates = null;
+    rootWithPassiveNestedUpdates = null;
 
     throw new Error(
       'Maximum update depth exceeded. This can happen when a component ' +
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index dc517877393c..4f0af4387098 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -531,8 +531,6 @@ export function scheduleUpdateOnFiber(
   lane: Lane,
   eventTime: number,
 ) {
-  checkForNestedUpdates();
-
   if (__DEV__) {
     if (isRunningInsertionEffect) {
       console.error('useInsertionEffect must not schedule updates.');
@@ -2771,7 +2769,7 @@ function jnd(timeElapsed: number) {
     : ceil(timeElapsed / 1960) * 1960;
 }
 
-function checkForNestedUpdates() {
+export function throwIfInfiniteUpdateLoopDetected() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
     rootWithNestedUpdates = null;
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index 517ed44977fe..c4bdf3a85b0e 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -1,2 +1,3 @@
+58bb11764bf0bb6db47527a64f693f67cdd3b0bb [FORKED] Check for infinite update loops even if unmounted
 31882b5dd66f34f70d341ea2781cacbe802bf4d5 [FORKED] Bugfix: Revealing a hidden update
 17691acc071d56261d43c3cf183f287d983baa9b [FORKED] Don't update childLanes until after current render

From a8555c308e06eacf807ec47caafd1e0e789d2c54 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 9 Jun 2022 17:10:42 -0700
Subject: [PATCH 1412/1603] [Transition Tracing] Add Tracing Marker Stack
 (#24661)

When a suspense boundary suspends or commits, we need to notify the corresponding tracing markers so that they know when to log that they've completed. To do this, we add a stack of tracing markers. In the begin phase, we will push the tracing markers onto the stack, and during the complete/unwind phase we will pop the tracing markers off the stack

In a later PR, we will store the active tracing markers on the suspense boundary, and during the commit phase we will process the active tracing markers by adding/removing the boundary as appropriate.
---
 .../src/ReactFiberBeginWork.new.js            |  7 ++++
 .../src/ReactFiberBeginWork.old.js            |  7 ++++
 .../src/ReactFiberCompleteWork.new.js         |  2 ++
 .../src/ReactFiberCompleteWork.old.js         |  2 ++
 .../ReactFiberTracingMarkerComponent.new.js   | 36 +++++++++++++++++++
 .../ReactFiberTracingMarkerComponent.old.js   | 36 +++++++++++++++++++
 .../src/ReactFiberUnwindWork.new.js           | 18 +++++++++-
 .../src/ReactFiberUnwindWork.old.js           | 18 +++++++++-
 8 files changed, 124 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index bda70790734d..6520ce1717ab 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -258,6 +258,7 @@ import {
   getOffscreenDeferredCache,
   getSuspendedTransitions,
 } from './ReactFiberTransition.new';
+import {pushTracingMarker} from './ReactFiberTracingMarkerComponent.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -887,6 +888,7 @@ function updateTracingMarkerComponent(
     return null;
   }
 
+  pushTracingMarker(workInProgress);
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -3678,6 +3680,11 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        pushTracingMarker(workInProgress);
+      }
+    }
   }
   return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 5050ae80d85c..2ad8c43d34ac 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -258,6 +258,7 @@ import {
   getOffscreenDeferredCache,
   getSuspendedTransitions,
 } from './ReactFiberTransition.old';
+import {pushTracingMarker} from './ReactFiberTracingMarkerComponent.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -887,6 +888,7 @@ function updateTracingMarkerComponent(
     return null;
   }
 
+  pushTracingMarker(workInProgress);
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -3678,6 +3680,11 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        pushTracingMarker(workInProgress);
+      }
+    }
   }
   return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
 }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 39ff1261660a..13cc557f0711 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -165,6 +165,7 @@ import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -1585,6 +1586,7 @@ function completeWork(
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
         // Bubble subtree flags before so we can set the flag property
+        popTracingMarker(workInProgress);
         bubbleProperties(workInProgress);
       }
       return null;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 90c283966e65..8f0fedc27a7a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -165,6 +165,7 @@ import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -1585,6 +1586,7 @@ function completeWork(
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
         // Bubble subtree flags before so we can set the flag property
+        popTracingMarker(workInProgress);
         bubbleProperties(workInProgress);
       }
       return null;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 29018efc96f9..a2d6e505d473 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -9,8 +9,10 @@
 
 import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
+import type {StackCursor} from './ReactFiberStack.new';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
+import {createCursor, push, pop} from './ReactFiberStack.new';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -71,3 +73,37 @@ export function processTransitionCallbacks(
     }
   }
 }
+
+// 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 tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
+
+export function pushTracingMarker(workInProgress: Fiber): void {
+  if (enableTransitionTracing) {
+    if (tracingMarkerStack.current === null) {
+      push(tracingMarkerStack, [workInProgress], workInProgress);
+    } else {
+      push(
+        tracingMarkerStack,
+        tracingMarkerStack.current.concat(workInProgress),
+        workInProgress,
+      );
+    }
+  }
+}
+
+export function popTracingMarker(workInProgress: Fiber): void {
+  if (enableTransitionTracing) {
+    pop(tracingMarkerStack, workInProgress);
+  }
+}
+
+export function getTracingMarkers(): Array<Fiber> | null {
+  if (enableTransitionTracing) {
+    return tracingMarkerStack.current;
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 29018efc96f9..2c2ce96cda0a 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -9,8 +9,10 @@
 
 import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
+import type {StackCursor} from './ReactFiberStack.old';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
+import {createCursor, push, pop} from './ReactFiberStack.old';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -71,3 +73,37 @@ export function processTransitionCallbacks(
     }
   }
 }
+
+// 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 tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
+
+export function pushTracingMarker(workInProgress: Fiber): void {
+  if (enableTransitionTracing) {
+    if (tracingMarkerStack.current === null) {
+      push(tracingMarkerStack, [workInProgress], workInProgress);
+    } else {
+      push(
+        tracingMarkerStack,
+        tracingMarkerStack.current.concat(workInProgress),
+        workInProgress,
+      );
+    }
+  }
+}
+
+export function popTracingMarker(workInProgress: Fiber): void {
+  if (enableTransitionTracing) {
+    pop(tracingMarkerStack, workInProgress);
+  }
+}
+
+export function getTracingMarkers(): Array<Fiber> | null {
+  if (enableTransitionTracing) {
+    return tracingMarkerStack.current;
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index c97c3e2ebc16..03788ff2c943 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -25,10 +25,15 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags';
 import {NoMode, ProfileMode} from './ReactTypeOfMode';
-import {enableProfilerTimer, enableCache} from 'shared/ReactFeatureFlags';
+import {
+  enableProfilerTimer,
+  enableCache,
+  enableTransitionTracing,
+} from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.new';
 import {popSuspenseContext} from './ReactFiberSuspenseContext.new';
@@ -44,6 +49,7 @@ import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
 
 function unwindWork(
   current: Fiber | null,
@@ -154,6 +160,11 @@ function unwindWork(
         popCacheProvider(workInProgress, cache);
       }
       return null;
+    case TracingMarkerComponent:
+      if (enableTransitionTracing) {
+        popTracingMarker(workInProgress);
+      }
+      return null;
     default:
       return null;
   }
@@ -217,6 +228,11 @@ function unwindInterruptedWork(
         popCacheProvider(interruptedWork, cache);
       }
       break;
+    case TracingMarkerComponent:
+      if (enableTransitionTracing) {
+        popTracingMarker(interruptedWork);
+      }
+      break;
     default:
       break;
   }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index 260b574b264f..ba2e202dd552 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -25,10 +25,15 @@ import {
   OffscreenComponent,
   LegacyHiddenComponent,
   CacheComponent,
+  TracingMarkerComponent,
 } from './ReactWorkTags';
 import {DidCapture, NoFlags, ShouldCapture} from './ReactFiberFlags';
 import {NoMode, ProfileMode} from './ReactTypeOfMode';
-import {enableProfilerTimer, enableCache} from 'shared/ReactFeatureFlags';
+import {
+  enableProfilerTimer,
+  enableCache,
+  enableTransitionTracing,
+} from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.old';
 import {popSuspenseContext} from './ReactFiberSuspenseContext.old';
@@ -44,6 +49,7 @@ import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
 
 function unwindWork(
   current: Fiber | null,
@@ -154,6 +160,11 @@ function unwindWork(
         popCacheProvider(workInProgress, cache);
       }
       return null;
+    case TracingMarkerComponent:
+      if (enableTransitionTracing) {
+        popTracingMarker(workInProgress);
+      }
+      return null;
     default:
       return null;
   }
@@ -217,6 +228,11 @@ function unwindInterruptedWork(
         popCacheProvider(interruptedWork, cache);
       }
       break;
+    case TracingMarkerComponent:
+      if (enableTransitionTracing) {
+        popTracingMarker(interruptedWork);
+      }
+      break;
     default:
       break;
   }

From f7b44539ca9c2d126c7d12cfd0d9d4f13ad5851f Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Fri, 10 Jun 2022 10:38:33 -0400
Subject: [PATCH 1413/1603] [DevTools] enable "reload & profile" button for
 timeline view (#24702)

---
 .../src/devtools/views/Profiler/Profiler.js                   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 3b5ad02351aa..f9f98fae656f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -113,9 +113,7 @@ function Profiler(_: {||}) {
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
             <RecordToggle disabled={!supportsProfiling} />
-            <ReloadAndProfileButton
-              disabled={selectedTabID === 'timeline' || !supportsProfiling}
-            />
+            <ReloadAndProfileButton disabled={!supportsProfiling} />
             <ClearProfilingDataButton />
             <ProfilingImportExportButtons />
             <div className={styles.VRule} />

From a8c9cb18b7e5d9eb3817272a1260f9f6b79815a2 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 13 Jun 2022 11:27:40 -0400
Subject: [PATCH 1414/1603] Land enableSuspenseLayoutEffectSemantics flag
 (#24713)

This was released to open source in 18.0 and is already hardcoded to
true in www.
---
 .../src/ReactFiberBeginWork.new.js            |  5 +-
 .../src/ReactFiberBeginWork.old.js            |  5 +-
 .../src/ReactFiberClassComponent.new.js       | 21 ++-----
 .../src/ReactFiberClassComponent.old.js       | 21 ++-----
 .../src/ReactFiberCommitWork.new.js           | 55 ++++++-------------
 .../src/ReactFiberCommitWork.old.js           | 55 ++++++-------------
 .../src/ReactFiberCompleteWork.new.js         |  6 +-
 .../src/ReactFiberCompleteWork.old.js         |  6 +-
 .../src/ReactFiberHooks.new.js                | 11 +---
 .../src/ReactFiberHooks.old.js                | 11 +---
 .../src/__tests__/ReactLazy-test.internal.js  | 29 +++-------
 .../src/__tests__/ReactOffscreen-test.js      |  4 --
 .../__tests__/ReactSuspense-test.internal.js  |  1 -
 .../ReactSuspenseEffectsSemantics-test.js     | 20 -------
 .../ReactSuspenseFuzz-test.internal.js        | 12 ----
 packages/shared/ReactFeatureFlags.js          |  8 ---
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 24 files changed, 59 insertions(+), 219 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 6520ce1717ab..0688ae8a04f6 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -100,7 +100,6 @@ import {
   enableScopeAPI,
   enableCache,
   enableLazyContextPropagation,
-  enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
   enableTransitionTracing,
   enableLegacyHidden,
@@ -944,9 +943,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
   ) {
     // Schedule a Ref effect
     workInProgress.flags |= Ref;
-    if (enableSuspenseLayoutEffectSemantics) {
-      workInProgress.flags |= RefStatic;
-    }
+    workInProgress.flags |= RefStatic;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 2ad8c43d34ac..74595fda4342 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -100,7 +100,6 @@ import {
   enableScopeAPI,
   enableCache,
   enableLazyContextPropagation,
-  enableSuspenseLayoutEffectSemantics,
   enableSchedulingProfiler,
   enableTransitionTracing,
   enableLegacyHidden,
@@ -944,9 +943,7 @@ function markRef(current: Fiber | null, workInProgress: Fiber) {
   ) {
     // Schedule a Ref effect
     workInProgress.flags |= Ref;
-    if (enableSuspenseLayoutEffectSemantics) {
-      workInProgress.flags |= RefStatic;
-    }
+    workInProgress.flags |= RefStatic;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index 45977bfa6fee..c0a3418c93ba 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -27,7 +27,6 @@ import {
   warnAboutDeprecatedLifecycles,
   enableStrictEffects,
   enableLazyContextPropagation,
-  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,10 +907,7 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    let fiberFlags: Flags = Update;
-    if (enableSuspenseLayoutEffectSemantics) {
-      fiberFlags |= LayoutStatic;
-    }
+    let fiberFlags: Flags = Update | LayoutStatic;
     if (
       __DEV__ &&
       enableStrictEffects &&
@@ -989,10 +985,7 @@ function resumeMountClassInstance(
     // 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') {
-      let fiberFlags: Flags = Update;
-      if (enableSuspenseLayoutEffectSemantics) {
-        fiberFlags |= LayoutStatic;
-      }
+      let fiberFlags: Flags = Update | LayoutStatic;
       if (
         __DEV__ &&
         enableStrictEffects &&
@@ -1043,10 +1036,7 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      let fiberFlags: Flags = Update;
-      if (enableSuspenseLayoutEffectSemantics) {
-        fiberFlags |= LayoutStatic;
-      }
+      let fiberFlags: Flags = Update | LayoutStatic;
       if (
         __DEV__ &&
         enableStrictEffects &&
@@ -1060,10 +1050,7 @@ function resumeMountClassInstance(
     // 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') {
-      let fiberFlags: Flags = Update;
-      if (enableSuspenseLayoutEffectSemantics) {
-        fiberFlags |= LayoutStatic;
-      }
+      let fiberFlags: Flags = Update | LayoutStatic;
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index a921cf2f47ba..aa709f7ad6cf 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -27,7 +27,6 @@ import {
   warnAboutDeprecatedLifecycles,
   enableStrictEffects,
   enableLazyContextPropagation,
-  enableSuspenseLayoutEffectSemantics,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
 import {isMounted} from './ReactFiberTreeReflection';
@@ -908,10 +907,7 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    let fiberFlags: Flags = Update;
-    if (enableSuspenseLayoutEffectSemantics) {
-      fiberFlags |= LayoutStatic;
-    }
+    let fiberFlags: Flags = Update | LayoutStatic;
     if (
       __DEV__ &&
       enableStrictEffects &&
@@ -989,10 +985,7 @@ function resumeMountClassInstance(
     // 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') {
-      let fiberFlags: Flags = Update;
-      if (enableSuspenseLayoutEffectSemantics) {
-        fiberFlags |= LayoutStatic;
-      }
+      let fiberFlags: Flags = Update | LayoutStatic;
       if (
         __DEV__ &&
         enableStrictEffects &&
@@ -1043,10 +1036,7 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      let fiberFlags: Flags = Update;
-      if (enableSuspenseLayoutEffectSemantics) {
-        fiberFlags |= LayoutStatic;
-      }
+      let fiberFlags: Flags = Update | LayoutStatic;
       if (
         __DEV__ &&
         enableStrictEffects &&
@@ -1060,10 +1050,7 @@ function resumeMountClassInstance(
     // 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') {
-      let fiberFlags: Flags = Update;
-      if (enableSuspenseLayoutEffectSemantics) {
-        fiberFlags |= LayoutStatic;
-      }
+      let fiberFlags: Flags = Update | LayoutStatic;
       if (
         __DEV__ &&
         enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 8448f8c25eb2..fef5a029d4ab 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -41,7 +41,6 @@ import {
   enableScopeAPI,
   enableStrictEffects,
   deletedTreeCleanUpLevel,
-  enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
@@ -173,7 +172,6 @@ if (__DEV__) {
 
 // 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.
-// Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
 let offscreenSubtreeWasHidden: boolean = false;
 
@@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber(
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        if (
-          !enableSuspenseLayoutEffectSemantics ||
-          !offscreenSubtreeWasHidden
-        ) {
+        if (!offscreenSubtreeWasHidden) {
           // 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
@@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber(
     }
   }
 
-  if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
+  if (!offscreenSubtreeWasHidden) {
     if (enableScopeAPI) {
       // TODO: This is a temporary solution that allowed us to transition away
       // from React Flare on www.
@@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
-      if (
-        // TODO: Remove this dead flag
-        enableSuspenseLayoutEffectSemantics &&
-        deletedFiber.mode & ConcurrentMode
-      ) {
+      if (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.
@@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber(
     case OffscreenComponent: {
       const wasHidden = current !== null && current.memoizedState !== null;
 
-      if (
-        // TODO: Remove this dead flag
-        enableSuspenseLayoutEffectSemantics &&
-        finishedWork.mode & ConcurrentMode
-      ) {
+      if (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.
@@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber(
         // read it during an event
         offscreenInstance.isHidden = isHidden;
 
-        if (enableSuspenseLayoutEffectSemantics) {
-          if (isHidden) {
-            if (!wasHidden) {
-              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                nextEffect = offscreenBoundary;
-                let offscreenChild = offscreenBoundary.child;
-                while (offscreenChild !== null) {
-                  nextEffect = offscreenChild;
-                  disappearLayoutEffects_begin(offscreenChild);
-                  offscreenChild = offscreenChild.sibling;
-                }
+        if (isHidden) {
+          if (!wasHidden) {
+            if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+              nextEffect = offscreenBoundary;
+              let offscreenChild = offscreenBoundary.child;
+              while (offscreenChild !== null) {
+                nextEffect = offscreenChild;
+                disappearLayoutEffects_begin(offscreenChild);
+                offscreenChild = offscreenChild.sibling;
               }
             }
-          } else {
-            if (wasHidden) {
-              // TODO: Move re-appear call here for symmetry?
-            }
+          }
+        } else {
+          if (wasHidden) {
+            // TODO: Move re-appear call here for symmetry?
           }
         }
 
@@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin(
     const fiber = nextEffect;
     const firstChild = fiber.child;
 
-    if (
-      enableSuspenseLayoutEffectSemantics &&
-      fiber.tag === OffscreenComponent &&
-      isModernRoot
-    ) {
+    if (fiber.tag === OffscreenComponent && isModernRoot) {
       // Keep track of the current Offscreen stack's state.
       const isHidden = fiber.memoizedState !== null;
       const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index ab273999764b..da9e3c565da6 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -41,7 +41,6 @@ import {
   enableScopeAPI,
   enableStrictEffects,
   deletedTreeCleanUpLevel,
-  enableSuspenseLayoutEffectSemantics,
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
@@ -173,7 +172,6 @@ if (__DEV__) {
 
 // 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.
-// Only used when enableSuspenseLayoutEffectSemantics is enabled.
 let offscreenSubtreeIsHidden: boolean = false;
 let offscreenSubtreeWasHidden: boolean = false;
 
@@ -710,10 +708,7 @@ function commitLayoutEffectOnFiber(
       case FunctionComponent:
       case ForwardRef:
       case SimpleMemoComponent: {
-        if (
-          !enableSuspenseLayoutEffectSemantics ||
-          !offscreenSubtreeWasHidden
-        ) {
+        if (!offscreenSubtreeWasHidden) {
           // 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
@@ -1018,7 +1013,7 @@ function commitLayoutEffectOnFiber(
     }
   }
 
-  if (!enableSuspenseLayoutEffectSemantics || !offscreenSubtreeWasHidden) {
+  if (!offscreenSubtreeWasHidden) {
     if (enableScopeAPI) {
       // TODO: This is a temporary solution that allowed us to transition away
       // from React Flare on www.
@@ -1889,11 +1884,7 @@ function commitDeletionEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
-      if (
-        // TODO: Remove this dead flag
-        enableSuspenseLayoutEffectSemantics &&
-        deletedFiber.mode & ConcurrentMode
-      ) {
+      if (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.
@@ -2341,11 +2332,7 @@ function commitMutationEffectsOnFiber(
     case OffscreenComponent: {
       const wasHidden = current !== null && current.memoizedState !== null;
 
-      if (
-        // TODO: Remove this dead flag
-        enableSuspenseLayoutEffectSemantics &&
-        finishedWork.mode & ConcurrentMode
-      ) {
+      if (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.
@@ -2369,23 +2356,21 @@ function commitMutationEffectsOnFiber(
         // read it during an event
         offscreenInstance.isHidden = isHidden;
 
-        if (enableSuspenseLayoutEffectSemantics) {
-          if (isHidden) {
-            if (!wasHidden) {
-              if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-                nextEffect = offscreenBoundary;
-                let offscreenChild = offscreenBoundary.child;
-                while (offscreenChild !== null) {
-                  nextEffect = offscreenChild;
-                  disappearLayoutEffects_begin(offscreenChild);
-                  offscreenChild = offscreenChild.sibling;
-                }
+        if (isHidden) {
+          if (!wasHidden) {
+            if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
+              nextEffect = offscreenBoundary;
+              let offscreenChild = offscreenBoundary.child;
+              while (offscreenChild !== null) {
+                nextEffect = offscreenChild;
+                disappearLayoutEffects_begin(offscreenChild);
+                offscreenChild = offscreenChild.sibling;
               }
             }
-          } else {
-            if (wasHidden) {
-              // TODO: Move re-appear call here for symmetry?
-            }
+          }
+        } else {
+          if (wasHidden) {
+            // TODO: Move re-appear call here for symmetry?
           }
         }
 
@@ -2483,11 +2468,7 @@ function commitLayoutEffects_begin(
     const fiber = nextEffect;
     const firstChild = fiber.child;
 
-    if (
-      enableSuspenseLayoutEffectSemantics &&
-      fiber.tag === OffscreenComponent &&
-      isModernRoot
-    ) {
+    if (fiber.tag === OffscreenComponent && isModernRoot) {
       // Keep track of the current Offscreen stack's state.
       const isHidden = fiber.memoizedState !== null;
       const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 13cc557f0711..c5230bce9202 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -140,7 +140,6 @@ import {
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
-  enableSuspenseLayoutEffectSemantics,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -174,10 +173,7 @@ function markUpdate(workInProgress: Fiber) {
 }
 
 function markRef(workInProgress: Fiber) {
-  workInProgress.flags |= Ref;
-  if (enableSuspenseLayoutEffectSemantics) {
-    workInProgress.flags |= RefStatic;
-  }
+  workInProgress.flags |= Ref | RefStatic;
 }
 
 function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 8f0fedc27a7a..4dbc447dd989 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -140,7 +140,6 @@ import {
   enableScopeAPI,
   enableProfilerTimer,
   enableCache,
-  enableSuspenseLayoutEffectSemantics,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -174,10 +173,7 @@ function markUpdate(workInProgress: Fiber) {
 }
 
 function markRef(workInProgress: Fiber) {
-  workInProgress.flags |= Ref;
-  if (enableSuspenseLayoutEffectSemantics) {
-    workInProgress.flags |= RefStatic;
-  }
+  workInProgress.flags |= Ref | RefStatic;
 }
 
 function hadNoMutationsEffects(current: null | Fiber, completedWork: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index c3ff781fb5f7..4cc4dda6fa61 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -30,7 +30,6 @@ import {
   enableUseRefAccessWarning,
   enableStrictEffects,
   enableLazyContextPropagation,
-  enableSuspenseLayoutEffectSemantics,
   enableUseMutableSource,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
@@ -1749,10 +1748,7 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  let fiberFlags: Flags = UpdateEffect;
-  if (enableSuspenseLayoutEffectSemantics) {
-    fiberFlags |= LayoutStaticEffect;
-  }
+  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   if (
     __DEV__ &&
     enableStrictEffects &&
@@ -1819,10 +1815,7 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  let fiberFlags: Flags = UpdateEffect;
-  if (enableSuspenseLayoutEffectSemantics) {
-    fiberFlags |= LayoutStaticEffect;
-  }
+  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   if (
     __DEV__ &&
     enableStrictEffects &&
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index fc25083fe425..81fdcb7696be 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -30,7 +30,6 @@ import {
   enableUseRefAccessWarning,
   enableStrictEffects,
   enableLazyContextPropagation,
-  enableSuspenseLayoutEffectSemantics,
   enableUseMutableSource,
   enableTransitionTracing,
 } from 'shared/ReactFeatureFlags';
@@ -1754,10 +1753,7 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  let fiberFlags: Flags = UpdateEffect;
-  if (enableSuspenseLayoutEffectSemantics) {
-    fiberFlags |= LayoutStaticEffect;
-  }
+  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   if (
     __DEV__ &&
     enableStrictEffects &&
@@ -1824,10 +1820,7 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  let fiberFlags: Flags = UpdateEffect;
-  if (enableSuspenseLayoutEffectSemantics) {
-    fiberFlags |= LayoutStaticEffect;
-  }
+  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   if (
     __DEV__ &&
     enableStrictEffects &&
diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
index 01e974225936..682ceb87dfb9 100644
--- a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -1350,11 +1350,7 @@ describe('ReactLazy', () => {
     expect(Scheduler).toFlushAndYield(['Init B2', 'Loading...']);
     jest.runAllTimers();
 
-    gate(flags => {
-      if (flags.enableSuspenseLayoutEffectSemantics) {
-        expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']);
-      }
-    });
+    expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']);
 
     // The suspense boundary should've triggered now.
     expect(root).toMatchRenderedOutput('Loading...');
@@ -1364,23 +1360,12 @@ describe('ReactLazy', () => {
     expect(Scheduler).toFlushAndYield(['Init A2']);
     await LazyChildA2;
 
-    gate(flags => {
-      if (flags.enableSuspenseLayoutEffectSemantics) {
-        expect(Scheduler).toFlushAndYield([
-          'b',
-          'a',
-          'Did mount: b',
-          'Did mount: a',
-        ]);
-      } else {
-        expect(Scheduler).toFlushAndYield([
-          'b',
-          'a',
-          'Did update: b',
-          'Did update: a',
-        ]);
-      }
-    });
+    expect(Scheduler).toFlushAndYield([
+      'b',
+      'a',
+      'Did mount: b',
+      'Did mount: a',
+    ]);
     expect(root).toMatchRenderedOutput('ba');
   });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 42b462100f31..0f9fd6dd5b21 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -179,7 +179,6 @@ describe('ReactOffscreen', () => {
   });
 
   // @gate experimental || www
-  // @gate enableSuspenseLayoutEffectSemantics
   it('mounts without layout effects when hidden', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -218,7 +217,6 @@ describe('ReactOffscreen', () => {
   });
 
   // @gate experimental || www
-  // @gate enableSuspenseLayoutEffectSemantics
   it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -265,7 +263,6 @@ describe('ReactOffscreen', () => {
   });
 
   // @gate experimental || www
-  // @gate enableSuspenseLayoutEffectSemantics
   it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -313,7 +310,6 @@ describe('ReactOffscreen', () => {
   });
 
   // @gate experimental || www
-  // @gate enableSuspenseLayoutEffectSemantics
   it('hides children of offscreen after layout effects are destroyed', async () => {
     const root = ReactNoop.createRoot();
     function Child({text}) {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
index 7adc0345729f..05483e15c7dc 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -727,7 +727,6 @@ describe('ReactSuspense', () => {
     expect(root).toMatchRenderedOutput('new value');
   });
 
-  // @gate enableSuspenseLayoutEffectSemantics
   it('re-fires layout effects when re-showing Suspense', () => {
     function TextWithLayout(props) {
       Scheduler.unstable_yieldValue(props.text);
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
index 1825d41fd1da..976d7ecf4f79 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseEffectsSemantics-test.js
@@ -565,7 +565,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be destroyed and recreated for function components', async () => {
       function App({children = null}) {
@@ -694,7 +693,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be destroyed and recreated for class components', async () => {
       class ClassText extends React.Component {
@@ -839,7 +837,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be destroyed and recreated when nested below host components', async () => {
       function App({children = null}) {
@@ -949,7 +946,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be destroyed and recreated even if there is a bailout because of memoization', async () => {
       const MemoizedText = React.memo(Text, () => true);
@@ -1065,7 +1061,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should respect nested suspense boundaries', async () => {
       function App({innerChildren = null, outerChildren = null}) {
@@ -1288,7 +1283,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should show nested host nodes if multiple boundaries resolve at the same time', async () => {
       function App({innerChildren = null, outerChildren = null}) {
@@ -1398,7 +1392,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be cleaned up inside of a fallback that suspends', async () => {
       function App({fallbackChildren = null, outerChildren = null}) {
@@ -1541,7 +1534,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be cleaned up inside of a fallback that suspends (alternate)', async () => {
       function App({fallbackChildren = null, outerChildren = null}) {
@@ -1661,7 +1653,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be cleaned up deeper inside of a subtree that suspends', async () => {
       function ConditionalSuspense({shouldSuspend}) {
@@ -1744,7 +1735,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
     });
 
     describe('that throw errors', () => {
-      // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
       it('are properly handled for componentDidMount', async () => {
         let componentDidMountShouldThrow = false;
@@ -1883,7 +1873,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
         expect(ReactNoop.getChildren()).toEqual([span('Error')]);
       });
 
-      // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
       it('are properly handled for componentWillUnmount', async () => {
         class ThrowsInWillUnmount extends React.Component {
@@ -1995,7 +1984,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
         expect(ReactNoop.getChildren()).toEqual([span('Error')]);
       });
 
-      // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled for layout effect creation', async () => {
@@ -2135,7 +2123,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
         expect(ReactNoop.getChildren()).toEqual([span('Error')]);
       });
 
-      // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled for layout effect destruction', async () => {
@@ -2247,7 +2234,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       });
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be only destroy layout effects once if a tree suspends in multiple places', async () => {
       class ClassText extends React.Component {
@@ -2386,7 +2372,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       ]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be only destroy layout effects once if a component suspends multiple times', async () => {
       class ClassText extends React.Component {
@@ -2670,7 +2655,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be cleared and reset for host components', async () => {
       function App({children}) {
@@ -2767,7 +2751,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be cleared and reset for class components', async () => {
       class ClassComponent extends React.Component {
@@ -2868,7 +2851,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should be cleared and reset for function components with useImperativeHandle', async () => {
       const FunctionComponent = React.forwardRef((props, ref) => {
@@ -2973,7 +2955,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
       expect(ReactNoop.getChildren()).toEqual([]);
     });
 
-    // @gate enableSuspenseLayoutEffectSemantics
     // @gate enableCache
     it('should not reset for user-managed values', async () => {
       function RefChecker({forwardedRef}) {
@@ -3071,7 +3052,6 @@ describe('ReactSuspenseEffectsSemantics', () => {
     });
 
     describe('that throw errors', () => {
-      // @gate enableSuspenseLayoutEffectSemantics
       // @gate enableCache
       // @gate replayFailedUnitOfWorkWithInvokeGuardedCallback
       it('are properly handled in ref callbacks', async () => {
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
index 957d5f37c70f..0cc39c98e046 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -176,18 +176,6 @@ describe('ReactSuspenseFuzz', () => {
         const legacyOutput = ReactNoop.getChildrenAsJSX();
         expect(legacyOutput).toEqual(expectedOutput);
         ReactNoop.renderLegacySyncRoot(null);
-
-        // Observable behavior differs here in a way that's expected:
-        // If enableSuspenseLayoutEffectSemantics is enabled, layout effects are destroyed on re-suspend
-        // before larger 'beginAfter' timers have a chance to fire.
-        if (!flags.enableSuspenseLayoutEffectSemantics) {
-          resetCache();
-          const concurrentRoot = ReactNoop.createRoot();
-          concurrentRoot.render(children);
-          resolveAllTasks();
-          const concurrentOutput = concurrentRoot.getChildrenAsJSX();
-          expect(concurrentOutput).toEqual(expectedOutput);
-        }
       });
     }
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 7b76a1f7524c..33d233f92e4e 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -31,14 +31,6 @@ export const enableSymbolFallbackForWWW = false;
 // internal tests need to be updated. The open source behavior is correct.
 export const skipUnmountedBoundaries = true;
 
-// Destroy layout effects for components that are hidden because something
-// suspended in an update and recreate them when they are shown again (after the
-// suspended boundary has resolved). Note that this should be an uncommon use
-// case and can be avoided by using the transition API.
-//
-// TODO: Finish rolling out in www
-export const enableSuspenseLayoutEffectSemantics = true;
-
 // TODO: Finish rolling out in www
 export const enableClientRenderFallbackOnTextMismatch = true;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index ea80fba1da24..0e07c9f67d99 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -58,7 +58,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
-export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = true;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 9a5c2bca40a7..933d914ce5a6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
-export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 157fda232ed3..b218c53470bd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
-export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 0a770e1438a8..b76a1b8506d1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -43,7 +43,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
-export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 157f9d6a4152..63ba329f01a9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
-export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 072c58b5c8ec..9e5a9107ab2b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = false;
 export const deletedTreeCleanUpLevel = 3;
-export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index a607e3ea7f71..a4c3e1ba3267 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -48,7 +48,6 @@ export const enableFilterEmptyStringAttributesDOM = false;
 export const disableNativeComponentFrames = false;
 export const skipUnmountedBoundaries = true;
 export const deletedTreeCleanUpLevel = 3;
-export const enableSuspenseLayoutEffectSemantics = false;
 export const enableGetInspectorDataForInstanceInProduction = false;
 export const enableNewReconciler = false;
 export const deferRenderPhaseUpdateToNextBatch = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index a1932e21c4e1..938d7589c4e2 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -48,7 +48,6 @@ export const enableProfilerNestedUpdateScheduledHook =
   __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
 export const enableUpdaterTracking = __PROFILE__;
 
-export const enableSuspenseLayoutEffectSemantics = true;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;

From 29c2c633159cb2171bb04fe84b9caa09904388e8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Mon, 13 Jun 2022 11:58:03 -0400
Subject: [PATCH 1415/1603] Land enableClientRenderFallbackOnTextMismatch
 (#24714)

This was released to open source in 18.0 and is already hardcoded to
true in www.

From 327e4a1f96fbb874001b17684fbb073046a84938 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sun, 12 Jun 2022 18:12:33 -0400
Subject: [PATCH 1416/1603] [Follow-up] Land
 enableClientRenderFallbackOnTextMismatch

This was meant to land in the previous commit; forgot to stage the
changes when I was rebasing.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 18 ++++++-------
 .../__tests__/ReactDOMHydrationDiff-test.js   | 25 ++-----------------
 ...DOMServerPartialHydration-test.internal.js |  2 --
 .../react-dom/src/client/ReactDOMComponent.js |  3 +--
 .../useMutableSourceHydration-test.js         |  1 -
 packages/shared/ReactFeatureFlags.js          |  3 ---
 .../forks/ReactFeatureFlags.native-fb.js      |  1 -
 .../forks/ReactFeatureFlags.native-oss.js     |  1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 -
 .../ReactFeatureFlags.test-renderer.native.js |  1 -
 .../ReactFeatureFlags.test-renderer.www.js    |  1 -
 .../shared/forks/ReactFeatureFlags.testing.js |  1 -
 .../forks/ReactFeatureFlags.testing.www.js    |  1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 -
 .../shared/forks/ReactFeatureFlags.www.js     |  1 -
 15 files changed, 10 insertions(+), 51 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 703e3280da58..2ac61bf8b9c4 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3535,7 +3535,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental && enableClientRenderFallbackOnTextMismatch
+  // @gate experimental
   it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -3625,7 +3625,7 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
   });
 
-  // @gate experimental && enableClientRenderFallbackOnTextMismatch
+  // @gate experimental
   it('only warns once on hydration mismatch while within a suspense boundary', async () => {
     const originalConsoleError = console.error;
     const mockError = jest.fn();
@@ -4715,15 +4715,11 @@ describe('ReactDOMFizzServer', () => {
           },
         });
         expect(Scheduler).toFlushAndYield([]);
-        expect(errors).toEqual(
-          [
-            gate(flags => flags.enableClientRenderFallbackOnTextMismatch)
-              ? 'Text content does not match server-rendered HTML.'
-              : null,
-            'Hydration failed because the initial UI does not match what was rendered on the server.',
-            'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-          ].filter(Boolean),
-        );
+        expect(errors).toEqual([
+          'Text content does not match server-rendered HTML.',
+          'Hydration failed because the initial UI does not match what was rendered on the server.',
+          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+        ]);
         expect(getVisibleChildren(container)).toEqual(
           <title>{['hello1', 'hello2']}</title>,
         );
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index e8e7dffee5d6..e1e9068eb101 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -86,8 +86,7 @@ describe('ReactDOMServerHydration', () => {
           </div>
         );
       }
-      if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
             "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
               in main (at **)
@@ -98,16 +97,6 @@ describe('ReactDOMServerHydration', () => {
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
-      } else {
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-          Array [
-            "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
-              in main (at **)
-              in div (at **)
-              in Mismatch (at **)",
-          ]
-        `);
-      }
     });
 
     // @gate __DEV__
@@ -357,8 +346,7 @@ describe('ReactDOMServerHydration', () => {
         function Mismatch({isClient}) {
           return <div className="parent">{isClient && 'only'}</div>;
         }
-        if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
                 in div (at **)
@@ -368,15 +356,6 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
-                in div (at **)
-                in Mismatch (at **)",
-            ]
-          `);
-        }
       });
 
       // @gate __DEV__
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index e086448d6914..bd9987dbfd8f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3416,7 +3416,6 @@ describe('ReactDOMServerPartialHydration', () => {
     );
   });
 
-  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
     function DirectTextChild({text}) {
       return <div>{text}</div>;
@@ -3448,7 +3447,6 @@ describe('ReactDOMServerPartialHydration', () => {
     ]);
   });
 
-  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
     function Sibling() {
       return 'Sibling';
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 19eb70e583b3..5a3ff307323d 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -72,7 +72,6 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
 import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
-  enableClientRenderFallbackOnTextMismatch,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -250,7 +249,7 @@ export function checkForUnmatchedText(
     }
   }
 
-  if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
+  if (isConcurrentMode) {
     // In concurrent roots, we throw when there's a text mismatch and revert to
     // client rendering, up to the nearest Suspense boundary.
     throw new Error('Text content does not match server-rendered HTML.');
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index a22e8114f605..183fecdc40bb 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -169,7 +169,6 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate enableUseMutableSource
-  // @gate enableClientRenderFallbackOnTextMismatch
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 33d233f92e4e..6b666217f41b 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -31,9 +31,6 @@ export const enableSymbolFallbackForWWW = false;
 // internal tests need to be updated. The open source behavior is correct.
 export const skipUnmountedBoundaries = true;
 
-// TODO: Finish rolling out in www
-export const enableClientRenderFallbackOnTextMismatch = true;
-
 // TODO: Need to review this code one more time before landing
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 0e07c9f67d99..f015f47c652e 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -51,7 +51,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 933d914ce5a6..c06c4f56c72d 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b218c53470bd..3770fd1943d2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index b76a1b8506d1..557c50ba3e01 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -50,7 +50,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 63ba329f01a9..3eb792406b9d 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 9e5a9107ab2b..32763075ce61 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index a4c3e1ba3267..59230d8e7446 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,7 +41,6 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
-export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 7a89e41ad54f..255a183d42ff 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -26,7 +26,6 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
-export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableSymbolFallbackForWWW = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 938d7589c4e2..70f8ad6ff3d1 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,7 +32,6 @@ export const {
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
-  enableClientRenderFallbackOnTextMismatch,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 7cf8dfd94f29a42102e5e553395d9bb1b1710c42 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 13 Jun 2022 10:56:21 -0700
Subject: [PATCH 1417/1603] [Transition Tracing] Create/Process Marker Complete
 Callback (#24700)

This PR adds code to add a marker complete callback to the queue. It also adds code to process marker complete callback.

Marker complete callbacks, in addition to the fields that transition complete callbacks need, also have a `markerName` field
---
 .../ReactFiberTracingMarkerComponent.new.js   | 16 +++++++++++++
 .../ReactFiberTracingMarkerComponent.old.js   | 16 +++++++++++++
 .../src/ReactFiberWorkLoop.new.js             | 23 +++++++++++++++++++
 .../src/ReactFiberWorkLoop.old.js             | 23 +++++++++++++++++++
 4 files changed, 78 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index a2d6e505d473..593ebfc2d7da 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -21,9 +21,11 @@ export type TransitionObject = {
   startTime: number,
 };
 
+export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
   transitionStart: Array<TransitionObject> | null,
   transitionComplete: Array<TransitionObject> | null,
+  markerComplete: Array<MarkerTransitionObject> | null,
 };
 
 export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerComplete = pendingTransitions.markerComplete;
+      if (markerComplete !== null) {
+        markerComplete.forEach(transition => {
+          if (callbacks.onMarkerComplete != null) {
+            callbacks.onMarkerComplete(
+              transition.transitionName,
+              transition.markerName,
+              transition.startTime,
+              endTime,
+            );
+          }
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 2c2ce96cda0a..a632af8e1cb9 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -21,9 +21,11 @@ export type TransitionObject = {
   startTime: number,
 };
 
+export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
   transitionStart: Array<TransitionObject> | null,
   transitionComplete: Array<TransitionObject> | null,
+  markerComplete: Array<MarkerTransitionObject> | null,
 };
 
 export type Transition = {
@@ -58,6 +60,20 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerComplete = pendingTransitions.markerComplete;
+      if (markerComplete !== null) {
+        markerComplete.forEach(transition => {
+          if (callbacks.onMarkerComplete != null) {
+            callbacks.onMarkerComplete(
+              transition.transitionName,
+              transition.markerName,
+              transition.startTime,
+              endTime,
+            );
+          }
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 21f9d17850f1..edf3c7ee7674 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
   TransitionObject,
+  MarkerTransitionObject,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 
@@ -350,6 +351,7 @@ export function addTransitionStartCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: [],
         transitionComplete: null,
+        markerComplete: null,
       };
     }
 
@@ -361,6 +363,26 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerCompleteCallbackToPendingTransition(
+  transition: MarkerTransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionComplete: null,
+        markerComplete: [],
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerComplete === null) {
+      currentPendingTransitionCallbacks.markerComplete = [];
+    }
+
+    currentPendingTransitionCallbacks.markerComplete.push(transition);
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: TransitionObject,
 ) {
@@ -369,6 +391,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: null,
         transitionComplete: [],
+        markerComplete: null,
       };
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 4f0af4387098..bfddf20a89cd 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -18,6 +18,7 @@ import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
   TransitionObject,
+  MarkerTransitionObject,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 
@@ -349,6 +350,7 @@ export function addTransitionStartCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: [],
         transitionComplete: null,
+        markerComplete: null,
       };
     }
 
@@ -360,6 +362,26 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerCompleteCallbackToPendingTransition(
+  transition: MarkerTransitionObject,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionComplete: null,
+        markerComplete: [],
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerComplete === null) {
+      currentPendingTransitionCallbacks.markerComplete = [];
+    }
+
+    currentPendingTransitionCallbacks.markerComplete.push(transition);
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: TransitionObject,
 ) {
@@ -368,6 +390,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
       currentPendingTransitionCallbacks = {
         transitionStart: null,
         transitionComplete: [],
+        markerComplete: null,
       };
     }
 

From be229c5655074642ee664f532f2e7411dd7dccc7 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Mon, 13 Jun 2022 12:36:49 -0700
Subject: [PATCH 1418/1603] Changelog for 18.2 (#24717)

* 1820-changelog

* generalize date and fix version typo

* reword, edit, and condense

* punctuation

* Nits

Co-authored-by: dan <dan.abramov@gmail.com>
---
 CHANGELOG.md | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dcb99e0752a0..6feb38c59d82 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## 18.2.0 (TODO)
+
+### 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 ([@gnoff](https://github.com/gnoff) in [#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

From 54f17e490f8b8f39ef9f296c87cd0fba217ce28c Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 14 Jun 2022 11:48:01 -0700
Subject: [PATCH 1419/1603] [Transition Tracing] Fix Cache and Transitions Pop
 Order (#24719)

We push the Cache before the transition so we should pop the transition before the cache. This PR fixes this issue.
---
 packages/react-reconciler/src/ReactFiberTransition.new.js | 8 ++++----
 packages/react-reconciler/src/ReactFiberTransition.old.js | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberTransition.new.js b/packages/react-reconciler/src/ReactFiberTransition.new.js
index c855cb395312..bb5f5d93d202 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.new.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.new.js
@@ -139,13 +139,13 @@ export function pushTransition(
 
 export function popTransition(workInProgress: Fiber, current: Fiber | null) {
   if (current !== null) {
-    if (enableCache) {
-      pop(resumedCache, workInProgress);
-    }
-
     if (enableTransitionTracing) {
       pop(transitionStack, workInProgress);
     }
+
+    if (enableCache) {
+      pop(resumedCache, workInProgress);
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberTransition.old.js b/packages/react-reconciler/src/ReactFiberTransition.old.js
index ed73d4716622..1abb0e2180ab 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.old.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.old.js
@@ -139,13 +139,13 @@ export function pushTransition(
 
 export function popTransition(workInProgress: Fiber, current: Fiber | null) {
   if (current !== null) {
-    if (enableCache) {
-      pop(resumedCache, workInProgress);
-    }
-
     if (enableTransitionTracing) {
       pop(transitionStack, workInProgress);
     }
+
+    if (enableCache) {
+      pop(resumedCache, workInProgress);
+    }
   }
 }
 

From 89bae8f371eb2cf49dbe310ec7f04d0e52e32f98 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 14 Jun 2022 12:49:54 -0700
Subject: [PATCH 1420/1603] Update Changelog release date for 18.2.0

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6feb38c59d82..ec7061b86267 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-## 18.2.0 (TODO)
+## 18.2.0 (June 14, 2022)
 
 ### React DOM
 

From 5cc2487e0858c8d3c5415137b3c3a95d8f5a0356 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 14 Jun 2022 13:24:00 -0700
Subject: [PATCH 1421/1603] bump versions for next release (#24725)

---
 ReactVersions.js                                | 16 ++++++++--------
 packages/eslint-plugin-react-hooks/package.json |  2 +-
 packages/jest-react/package.json                |  6 +++---
 packages/react-art/package.json                 |  6 +++---
 packages/react-dom/package.json                 |  6 +++---
 packages/react-is/package.json                  |  2 +-
 packages/react-reconciler/package.json          |  6 +++---
 packages/react-refresh/package.json             |  2 +-
 packages/react-test-renderer/package.json       |  8 ++++----
 packages/react/package.json                     |  2 +-
 packages/scheduler/package.json                 |  2 +-
 packages/shared/ReactVersion.js                 |  2 +-
 packages/use-subscription/package.json          |  4 ++--
 packages/use-sync-external-store/package.json   |  2 +-
 14 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index 7bf673d45154..acb76f56c482 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -18,25 +18,25 @@
 //
 //   0.0.0-experimental-241c4467e-20200129
 
-const ReactVersion = '18.2.0';
+const ReactVersion = '18.3.0';
 
 // The label used by the @next channel. Represents the upcoming release's
 // stability. Could be "alpha", "beta", "rc", etc.
 const nextChannelLabel = 'next';
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '4.6.0',
-  'jest-react': '0.14.0',
+  'eslint-plugin-react-hooks': '4.7.0',
+  'jest-react': '0.15.0',
   react: ReactVersion,
   'react-art': ReactVersion,
   'react-dom': ReactVersion,
   'react-is': ReactVersion,
-  'react-reconciler': '0.29.0',
-  'react-refresh': '0.14.0',
+  'react-reconciler': '0.30.0',
+  'react-refresh': '0.15.0',
   'react-test-renderer': ReactVersion,
-  'use-subscription': '1.8.0',
-  'use-sync-external-store': '1.2.0',
-  scheduler: '0.23.0',
+  'use-subscription': '1.9.0',
+  'use-sync-external-store': '1.3.0',
+  scheduler: '0.24.0',
 };
 
 // These packages do not exist in the @next or @latest channel, only
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 3c0be3c704dc..3f14cee36511 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/jest-react/package.json b/packages/jest-react/package.json
index 38953825d10e..9921c329e941 100644
--- a/packages/jest-react/package.json
+++ b/packages/jest-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jest-react",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Jest matchers and utilities for testing React components.",
   "main": "index.js",
   "repository": {
@@ -20,8 +20,8 @@
   "homepage": "https://reactjs.org/",
   "peerDependencies": {
     "jest": "^23.0.1 || ^24.0.0 || ^25.1.0",
-    "react": "^18.1.0",
-    "react-test-renderer": "^18.1.0"
+    "react": "^18.2.0",
+    "react-test-renderer": "^18.2.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-art/package.json b/packages/react-art/package.json
index 338bd862f0e6..d1468dabde0e 100644
--- a/packages/react-art/package.json
+++ b/packages/react-art/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-art",
   "description": "React ART is a JavaScript library for drawing vector graphics using React. It provides declarative and reactive bindings to the ART library. Using the same declarative API you can render the output to either Canvas, SVG or VML (IE8).",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "main": "index.js",
   "repository": {
     "type": "git",
@@ -25,10 +25,10 @@
     "art": "^0.10.1",
     "create-react-class": "^15.6.2",
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.22.0"
+    "scheduler": "^0.23.0"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 4904cdb42371..86993240c72c 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -18,10 +18,10 @@
   "homepage": "https://reactjs.org/",
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.22.0"
+    "scheduler": "^0.23.0"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react-is/package.json b/packages/react-is/package.json
index d618efa682df..403e7a7fefd4 100644
--- a/packages/react-is/package.json
+++ b/packages/react-is/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-is",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "description": "Brand checking of React Elements.",
   "main": "index.js",
   "repository": {
diff --git a/packages/react-reconciler/package.json b/packages/react-reconciler/package.json
index 497f001765bc..2306c61e9e6c 100644
--- a/packages/react-reconciler/package.json
+++ b/packages/react-reconciler/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-reconciler",
   "description": "React package for creating custom renderers.",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "keywords": [
     "react"
   ],
@@ -26,11 +26,11 @@
     "node": ">=0.10.0"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "dependencies": {
     "loose-envify": "^1.1.0",
-    "scheduler": "^0.22.0"
+    "scheduler": "^0.23.0"
   },
   "browserify": {
     "transform": [
diff --git a/packages/react-refresh/package.json b/packages/react-refresh/package.json
index a6b3e0190a55..5469ef31fea4 100644
--- a/packages/react-refresh/package.json
+++ b/packages/react-refresh/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "0.13.0",
+  "version": "0.14.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/react-test-renderer/package.json b/packages/react-test-renderer/package.json
index b28596e19238..f49332fd5216 100644
--- a/packages/react-test-renderer/package.json
+++ b/packages/react-test-renderer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-test-renderer",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "description": "React package for snapshot testing.",
   "main": "index.js",
   "repository": {
@@ -19,12 +19,12 @@
   },
   "homepage": "https://reactjs.org/",
   "dependencies": {
-    "react-is": "^18.1.0",
+    "react-is": "^18.2.0",
     "react-shallow-renderer": "^16.15.0",
-    "scheduler": "^0.22.0"
+    "scheduler": "^0.23.0"
   },
   "peerDependencies": {
-    "react": "^18.1.0"
+    "react": "^18.2.0"
   },
   "files": [
     "LICENSE",
diff --git a/packages/react/package.json b/packages/react/package.json
index 70c9dc2fe4b3..ab362a97a429 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -4,7 +4,7 @@
   "keywords": [
     "react"
   ],
-  "version": "18.1.0",
+  "version": "18.2.0",
   "homepage": "https://reactjs.org/",
   "bugs": "https://github.com/facebook/react/issues",
   "license": "MIT",
diff --git a/packages/scheduler/package.json b/packages/scheduler/package.json
index 676e9b867436..3266c05bad38 100644
--- a/packages/scheduler/package.json
+++ b/packages/scheduler/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scheduler",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "Cooperative scheduler for the browser environment.",
   "main": "index.js",
   "repository": {
diff --git a/packages/shared/ReactVersion.js b/packages/shared/ReactVersion.js
index 73bd1b56e65f..578cc9435556 100644
--- a/packages/shared/ReactVersion.js
+++ b/packages/shared/ReactVersion.js
@@ -13,4 +13,4 @@
 // 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 '18.1.0';
+export default '18.2.0';
diff --git a/packages/use-subscription/package.json b/packages/use-subscription/package.json
index 2305a1532b41..628586ff600b 100644
--- a/packages/use-subscription/package.json
+++ b/packages/use-subscription/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-subscription",
   "description": "Reusable hooks",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
@@ -21,6 +21,6 @@
     "rxjs": "^5.5.6"
   },
   "dependencies": {
-    "use-sync-external-store": "^1.1.0"
+    "use-sync-external-store": "^1.2.0"
   }
 }
diff --git a/packages/use-sync-external-store/package.json b/packages/use-sync-external-store/package.json
index f8ed0643afc7..b79c3501c05f 100644
--- a/packages/use-sync-external-store/package.json
+++ b/packages/use-sync-external-store/package.json
@@ -1,7 +1,7 @@
 {
   "name": "use-sync-external-store",
   "description": "Backwards compatible shim for React's useSyncExternalStore. Works with any React that supports hooks.",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From 567500d71083f84cdd4259a76f8a1289d159747f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 14 Jun 2022 16:48:33 -0400
Subject: [PATCH 1422/1603] Move renderToString tests out of the streamable API
 tests (#24724)

ReactDOMFizzServer(Browser/Node)-test file is really meant to just be a
very shallow tests of the Browser/Node specific streaming APIs.

Most of the general streaming tests are in ReactDOMFizzServer-test instead
of testing all streaming related things in each environment.

The legacy renderToString APIs are mostly covered by ReactServerRendering-test
et al for historical reasons.
---
 .../ReactDOMFizzServerBrowser-test.js         | 643 ++++++++----------
 .../ReactServerRenderingHydration-test.js     |  96 +++
 2 files changed, 387 insertions(+), 352 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 7ece6de67c28..489ffc32b96e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -14,20 +14,13 @@ global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStr
 global.TextEncoder = require('util').TextEncoder;
 
 let React;
-let ReactDOMClient;
 let ReactDOMFizzServer;
 let Suspense;
-let Scheduler;
-let JSDOM;
-let document;
-let container;
 
 describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    ReactDOMClient = require('react-dom/client');
-    Scheduler = require('scheduler');
     if (__EXPERIMENTAL__) {
       ReactDOMFizzServer = require('react-dom/server.browser');
     }
@@ -55,137 +48,90 @@ describe('ReactDOMFizzServer', () => {
     }
   }
 
-  describe('renderToReadableStream', () => {
-    // @gate experimental
-    it('should call renderToReadableStream', async () => {
-      const stream = await ReactDOMFizzServer.renderToReadableStream(
-        <div>hello world</div>,
-      );
-      const result = await readResult(stream);
-      expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
-    });
-
-    // @gate experimental
-    it('should emit DOCTYPE at the root of the document', async () => {
-      const stream = await ReactDOMFizzServer.renderToReadableStream(
-        <html>
-          <body>hello world</body>
-        </html>,
-      );
-      const result = await readResult(stream);
-      expect(result).toMatchInlineSnapshot(
-        `"<!DOCTYPE html><html><body>hello world</body></html>"`,
-      );
-    });
-
-    // @gate experimental
-    it('should emit bootstrap script src at the end', async () => {
-      const stream = await ReactDOMFizzServer.renderToReadableStream(
-        <div>hello world</div>,
-        {
-          bootstrapScriptContent: 'INIT();',
-          bootstrapScripts: ['init.js'],
-          bootstrapModules: ['init.mjs'],
-        },
-      );
-      const result = await readResult(stream);
-      expect(result).toMatchInlineSnapshot(
-        `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
-      );
-    });
-
-    // @gate experimental
-    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 ReactDOMFizzServer.renderToReadableStream(
-        <div>
-          <Suspense fallback="Loading">
-            <Wait />
-          </Suspense>
-        </div>,
-      );
-
-      stream.allReady.then(() => (isComplete = true));
-
-      await jest.runAllTimers();
-      expect(isComplete).toBe(false);
-      // Resolve the loading.
-      hasLoaded = true;
-      await resolve();
-
-      await jest.runAllTimers();
-
-      expect(isComplete).toBe(true);
+  // @gate experimental
+  it('should call renderToReadableStream', async () => {
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>hello world</div>,
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
 
-      const result = await readResult(stream);
-      expect(result).toMatchInlineSnapshot(
-        `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
-      );
-    });
+  // @gate experimental
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <html>
+        <body>hello world</body>
+      </html>,
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+    );
+  });
 
-    // @gate experimental
-    it('should reject the promise when an error is thrown at the root', async () => {
-      const reportedErrors = [];
-      let caughtError = null;
-      try {
-        await ReactDOMFizzServer.renderToReadableStream(
-          <div>
-            <Throw />
-          </div>,
-          {
-            onError(x) {
-              reportedErrors.push(x);
-            },
-          },
-        );
-      } catch (error) {
-        caughtError = error;
-      }
-      expect(caughtError).toBe(theError);
-      expect(reportedErrors).toEqual([theError]);
-    });
+  // @gate experimental
+  it('should emit bootstrap script src at the end', async () => {
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>hello world</div>,
+      {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      },
+    );
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
 
-    // @gate experimental
-    it('should reject the promise when an error is thrown inside a fallback', async () => {
-      const reportedErrors = [];
-      let caughtError = null;
-      try {
-        await ReactDOMFizzServer.renderToReadableStream(
-          <div>
-            <Suspense fallback={<Throw />}>
-              <InfiniteSuspend />
-            </Suspense>
-          </div>,
-          {
-            onError(x) {
-              reportedErrors.push(x);
-            },
-          },
-        );
-      } catch (error) {
-        caughtError = error;
+  // @gate experimental
+  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;
       }
-      expect(caughtError).toBe(theError);
-      expect(reportedErrors).toEqual([theError]);
-    });
+      return 'Done';
+    }
+    let isComplete = false;
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback="Loading">
+          <Wait />
+        </Suspense>
+      </div>,
+    );
+
+    stream.allReady.then(() => (isComplete = true));
+
+    await jest.runAllTimers();
+    expect(isComplete).toBe(false);
+    // Resolve the loading.
+    hasLoaded = true;
+    await resolve();
+
+    await jest.runAllTimers();
+
+    expect(isComplete).toBe(true);
+
+    const result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<div><!--$-->Done<!-- --><!--/$--></div>"`,
+    );
+  });
 
-    // @gate experimental
-    it('should not error the stream when an error is thrown inside suspense boundary', async () => {
-      const reportedErrors = [];
-      const stream = await ReactDOMFizzServer.renderToReadableStream(
+  // @gate experimental
+  it('should reject the promise when an error is thrown at the root', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await ReactDOMFizzServer.renderToReadableStream(
         <div>
-          <Suspense fallback={<div>Loading</div>}>
-            <Throw />
-          </Suspense>
+          <Throw />
         </div>,
         {
           onError(x) {
@@ -193,263 +139,256 @@ describe('ReactDOMFizzServer', () => {
           },
         },
       );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
 
-      const result = await readResult(stream);
-      expect(result).toContain('Loading');
-      expect(reportedErrors).toEqual([theError]);
-    });
-
-    // @gate experimental
-    it('should be able to complete by aborting even if the promise never resolves', async () => {
-      const errors = [];
-      const controller = new AbortController();
-      const stream = await ReactDOMFizzServer.renderToReadableStream(
+  // @gate experimental
+  it('should reject the promise when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await ReactDOMFizzServer.renderToReadableStream(
         <div>
-          <Suspense fallback={<div>Loading</div>}>
+          <Suspense fallback={<Throw />}>
             <InfiniteSuspend />
           </Suspense>
         </div>,
         {
-          signal: controller.signal,
           onError(x) {
-            errors.push(x.message);
+            reportedErrors.push(x);
           },
         },
       );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
 
-      controller.abort();
-
-      const result = await readResult(stream);
-      expect(result).toContain('Loading');
-
-      expect(errors).toEqual([
-        'The render was aborted by the server without a reason.',
-      ]);
-    });
-
-    // @gate experimental
-    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 ReactDOMFizzServer.renderToReadableStream(
-        <div>
-          <Suspense fallback={<div>Loading</div>}>
-            <Wait /> />
-          </Suspense>
-        </div>,
-        {
-          onError(x) {
-            errors.push(x.message);
-          },
+  // @gate experimental
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Throw />
+        </Suspense>
+      </div>,
+      {
+        onError(x) {
+          reportedErrors.push(x);
         },
-      );
-
-      stream.allReady.then(() => (isComplete = true));
-
-      expect(rendered).toBe(false);
-      expect(isComplete).toBe(false);
-
-      const reader = stream.getReader();
-      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(isComplete).toBe(true);
-    });
+    const result = await readResult(stream);
+    expect(result).toContain('Loading');
+    expect(reportedErrors).toEqual([theError]);
+  });
 
-    // @gate experimental
-    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 ReactDOMFizzServer.renderToReadableStream(
-        <>
-          <div>
-            <span>{''}</span>
-          </div>
-          <div>{str492}</div>
-          <div>{str492}</div>
-        </>,
-      );
+  // @gate experimental
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <InfiniteSuspend />
+        </Suspense>
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
 
-      let result;
-      result = await readResult(stream);
-      expect(result).toMatchInlineSnapshot(
-        `"<div><span></span></div><div>${str492}</div><div>${str492}</div>"`,
-      );
+    controller.abort();
 
-      // 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 ReactDOMFizzServer.renderToReadableStream(
-        <>
-          <div>{str2049}</div>
-        </>,
-      );
+    const result = await readResult(stream);
+    expect(result).toContain('Loading');
 
-      result = await readResult(stream);
-      expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
-    });
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
 
-    // @gate experimental
-    it('Supports custom abort reasons with a string', async () => {
-      const promise = new Promise(r => {});
-      function Wait() {
+  // @gate experimental
+  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;
       }
-      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 ReactDOMFizzServer.renderToReadableStream(<App />, {
-        signal: controller.signal,
+      rendered = true;
+      return 'Done';
+    }
+    const errors = [];
+    const stream = await ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <Suspense fallback={<div>Loading</div>}>
+          <Wait /> />
+        </Suspense>
+      </div>,
+      {
         onError(x) {
-          errors.push(x);
-          return 'a digest';
+          errors.push(x.message);
         },
-      });
+      },
+    );
 
-      // @TODO this is a hack to work around lack of support for abortSignal.reason in node
-      // The abort call itself should set this property but since we are testing in node we
-      // set it here manually
-      controller.signal.reason = 'foobar';
-      controller.abort('foobar');
+    stream.allReady.then(() => (isComplete = true));
 
-      expect(errors).toEqual(['foobar', 'foobar']);
-    });
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(false);
 
-    // @gate experimental
-    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 reader = stream.getReader();
+    reader.cancel();
 
-      const errors = [];
-      const controller = new AbortController();
-      await ReactDOMFizzServer.renderToReadableStream(<App />, {
-        signal: controller.signal,
-        onError(x) {
-          errors.push(x.message);
-          return 'a digest';
-        },
-      });
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
 
-      // @TODO this is a hack to work around lack of support for abortSignal.reason in node
-      // The abort call itself should set this property but since we are testing in node we
-      // set it here manually
-      controller.signal.reason = new Error('uh oh');
-      controller.abort(new Error('uh oh'));
+    hasLoaded = true;
+    resolve();
 
-      expect(errors).toEqual(['uh oh', 'uh oh']);
-    });
+    await jest.runAllTimers();
+
+    expect(rendered).toBe(false);
+    expect(isComplete).toBe(true);
   });
 
-  describe('renderToString', () => {
-    beforeEach(() => {
-      JSDOM = require('jsdom').JSDOM;
+  // @gate experimental
+  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 ReactDOMFizzServer.renderToReadableStream(
+      <>
+        <div>
+          <span>{''}</span>
+        </div>
+        <div>{str492}</div>
+        <div>{str492}</div>
+      </>,
+    );
+
+    let result;
+    result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(
+      `"<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 ReactDOMFizzServer.renderToReadableStream(
+      <>
+        <div>{str2049}</div>
+      </>,
+    );
+
+    result = await readResult(stream);
+    expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
+  });
 
-      // Test Environment
-      const jsdom = new JSDOM(
-        '<!DOCTYPE html><html><head></head><body><div id="container">',
-        {
-          runScripts: 'dangerously',
-        },
+  // @gate experimental
+  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>
       );
-      document = jsdom.window.document;
-      container = document.getElementById('container');
+    }
+
+    const errors = [];
+    const controller = new AbortController();
+    await ReactDOMFizzServer.renderToReadableStream(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x);
+        return 'a digest';
+      },
     });
 
-    // @gate experimental
-    it('refers users to apis that support Suspense when somethign suspends', () => {
-      function App({isClient}) {
-        return (
-          <div>
-            <Suspense fallback={'fallback'}>
-              {isClient ? 'resolved' : <InfiniteSuspend />}
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = 'foobar';
+    controller.abort('foobar');
+
+    expect(errors).toEqual(['foobar', 'foobar']);
+  });
+
+  // @gate experimental
+  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>
-          </div>
-        );
-      }
-      container.innerHTML = ReactDOMFizzServer.renderToString(
-        <App isClient={false} />,
+          </p>
+          <span>
+            <Suspense fallback={'span'}>
+              <Wait />
+            </Suspense>
+          </span>
+        </div>
       );
+    }
 
-      const errors = [];
-      ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
-        onRecoverableError(error, errorInfo) {
-          errors.push(error.message);
-        },
-      });
-
-      expect(Scheduler).toFlushAndYield([]);
-      expect(errors.length).toBe(1);
-      if (__DEV__) {
-        expect(errors[0]).toBe(
-          'The server did not finish this Suspense boundary: 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.',
-        );
-      }
+    const errors = [];
+    const controller = new AbortController();
+    await ReactDOMFizzServer.renderToReadableStream(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x.message);
+        return 'a digest';
+      },
     });
+
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = new Error('uh oh');
+    controller.abort(new Error('uh oh'));
+
+    expect(errors).toEqual(['uh oh', 'uh oh']);
   });
 });
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 11a7a510afd3..4cf2b7336e0b 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -9,10 +9,13 @@
 
 'use strict';
 
+global.TextEncoder = require('util').TextEncoder;
+
 let React;
 let ReactDOM;
 let ReactDOMClient;
 let ReactDOMServer;
+let ReactDOMServerBrowser;
 let Scheduler;
 
 // These tests rely both on ReactDOMServer and ReactDOM.
@@ -24,6 +27,7 @@ describe('ReactDOMServerHydration', () => {
     ReactDOM = require('react-dom');
     ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server');
+    ReactDOMServerBrowser = require('react-dom/server.browser');
     Scheduler = require('scheduler');
   });
 
@@ -598,4 +602,96 @@ describe('ReactDOMServerHydration', () => {
     expect(customElement.str).toBe(undefined);
     expect(customElement.obj).toBe(undefined);
   });
+
+  // @gate experimental || !www || !__DEV__
+  it('refers users to apis that support Suspense when something suspends', () => {
+    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);
+      },
+    });
+
+    expect(Scheduler).toFlushAndYield([]);
+    expect(errors.length).toBe(1);
+    if (__DEV__) {
+      expect(errors[0]).toBe(
+        'The server did not finish this Suspense boundary: 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.',
+      );
+    }
+  });
+
+  // @gate experimental || !www || !__DEV__
+  it('refers users to apis that support Suspense when something suspends (browser)', () => {
+    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);
+      },
+    });
+
+    expect(Scheduler).toFlushAndYield([]);
+    expect(errors.length).toBe(1);
+    if (__DEV__) {
+      expect(errors[0]).toBe(
+        'The server did not finish this Suspense boundary: 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.',
+      );
+    }
+  });
 });

From 6522179f43949d3b5d9b7d46f7a2f9574eebce81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 14 Jun 2022 17:11:01 -0400
Subject: [PATCH 1423/1603] Enable no-longer experimental (#24727)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 79 +++----------------
 .../ReactDOMFizzServerBrowser-test.js         | 16 +---
 .../__tests__/ReactDOMFizzServerNode-test.js  | 19 +----
 ...actDOMFizzSuppressHydrationWarning-test.js | 17 +---
 4 files changed, 16 insertions(+), 115 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 2ac61bf8b9c4..5d72131e483f 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -37,9 +37,7 @@ describe('ReactDOMFizzServer', () => {
     Scheduler = require('scheduler');
     React = require('react');
     ReactDOMClient = require('react-dom/client');
-    if (__EXPERIMENTAL__) {
-      ReactDOMFizzServer = require('react-dom/server');
-    }
+    ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
     Suspense = React.Suspense;
     if (gate(flags => flags.enableSuspenseList)) {
@@ -263,7 +261,6 @@ describe('ReactDOMFizzServer', () => {
     return <As>{readText(text)}</As>;
   }
 
-  // @gate experimental
   it('should asynchronously load a lazy component', async () => {
     let resolveA;
     const LazyA = React.lazy(() => {
@@ -330,7 +327,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('#23331: does not warn about hydration mismatches if something suspended in an earlier sibling', async () => {
     const makeApp = () => {
       let resolve;
@@ -396,7 +392,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should support nonce scripts', async () => {
     CSPnonce = 'R4nd0m';
     try {
@@ -428,7 +423,6 @@ describe('ReactDOMFizzServer', () => {
     }
   });
 
-  // @gate experimental
   it('should client render a boundary if a lazy component rejects', async () => {
     let rejectComponent;
     const LazyComponent = React.lazy(() => {
@@ -522,7 +516,6 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should asynchronously load a lazy element', async () => {
     let resolveElement;
     const lazyElement = React.lazy(() => {
@@ -552,7 +545,6 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
 
-  // @gate experimental
   it('should client render a boundary if a lazy element rejects', async () => {
     let rejectElement;
     const element = <Text text="Hello" />;
@@ -642,7 +634,6 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   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) {
@@ -719,7 +710,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   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(() => {
@@ -802,7 +792,6 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should asynchronously load the suspense boundary', async () => {
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -821,7 +810,6 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Hello World</div>);
   });
 
-  // @gate experimental
   it('waits for pending content to come in from the server and then hydrates it', async () => {
     const ref = React.createRef();
 
@@ -885,7 +873,6 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(h1);
   });
 
-  // @gate experimental
   it('handles an error on the client if the server ends up erroring', async () => {
     const ref = React.createRef();
 
@@ -967,7 +954,7 @@ describe('ReactDOMFizzServer', () => {
   });
 
   // @gate enableSuspenseList
-  // @gate experimental
+
   it('shows inserted items before pending in a SuspenseList as fallbacks while hydrating', async () => {
     const ref = React.createRef();
 
@@ -1056,7 +1043,6 @@ describe('ReactDOMFizzServer', () => {
     expect(ref.current).toBe(span);
   });
 
-  // @gate experimental
   it('client renders a boundary if it does not resolve before aborting', async () => {
     function App() {
       return (
@@ -1134,7 +1120,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   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
@@ -1225,7 +1210,6 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
-  // @gate experimental
   it('can resolve async content in esoteric parents', async () => {
     function AsyncOption({text}) {
       return <option>{readText(text)}</option>;
@@ -1323,7 +1307,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('can resolve async content in table parents', async () => {
     function AsyncTableBody({className, children}) {
       return <tbody className={readText(className)}>{children}</tbody>;
@@ -1396,7 +1379,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('can stream into an SVG container', async () => {
     function AsyncPath({id}) {
       return <path id={readText(id)} />;
@@ -1461,7 +1443,6 @@ describe('ReactDOMFizzServer', () => {
     );
   }
 
-  // @gate experimental
   it('should include a component stack across suspended boundaries', async () => {
     function B() {
       const children = [readText('Hello'), readText('World')];
@@ -1561,7 +1542,6 @@ describe('ReactDOMFizzServer', () => {
     }
   });
 
-  // @gate experimental
   it('should can suspend in a class component with legacy context', async () => {
     class TestProvider extends React.Component {
       static childContextTypes = {
@@ -1629,7 +1609,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should resume the context from where it left off', async () => {
     const ContextA = React.createContext('A0');
     const ContextB = React.createContext('B0');
@@ -1694,7 +1673,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should recover the outer context when an error happens inside a provider', async () => {
     const ContextA = React.createContext('A0');
     const ContextB = React.createContext('B0');
@@ -1761,7 +1739,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('client renders a boundary if it errors before finishing the fallback', async () => {
     function App({isClient}) {
       return (
@@ -1869,7 +1846,6 @@ describe('ReactDOMFizzServer', () => {
     expect(loggedErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should be able to abort the fallback if the main content finishes first', async () => {
     await act(async () => {
       const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -1899,7 +1875,7 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>Hello</div>);
   });
 
-  // @gate experimental && enableSuspenseAvoidThisFallbackFizz
+  // @gate enableSuspenseAvoidThisFallbackFizz
   it('should respect unstable_avoidThisFallback', async () => {
     const resolved = {
       0: false,
@@ -2046,7 +2022,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('calls getServerSnapshot instead of getSnapshot', async () => {
     const ref = React.createRef();
 
@@ -2127,7 +2102,7 @@ describe('ReactDOMFizzServer', () => {
   });
 
   // The selector implementation uses the lazy ref initialization pattern
-  // @gate experimental
+
   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.
@@ -2212,7 +2187,6 @@ describe('ReactDOMFizzServer', () => {
     expect(getVisibleChildren(container)).toEqual(<div>client</div>);
   });
 
-  // @gate experimental
   it(
     'errors during hydration in the shell force a client render at the ' +
       'root, and during the client render it recovers',
@@ -2295,7 +2269,6 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
-  // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
       'boundary, and during the client render it recovers',
@@ -2389,7 +2362,6 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
-  // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
       'boundary, and during the client render it fails again',
@@ -2464,7 +2436,7 @@ describe('ReactDOMFizzServer', () => {
 
   // Disabled because of a WWW late mutations regression.
   // We may want to re-enable this if we figure out why.
-  // @gate experimental
+
   // @gate FIXME
   it('does not recreate the fallback if server errors and hydration suspends', async () => {
     let isClient = false;
@@ -2546,7 +2518,7 @@ describe('ReactDOMFizzServer', () => {
 
   // Disabled because of a WWW late mutations regression.
   // We may want to re-enable this if we figure out why.
-  // @gate experimental
+
   // @gate FIXME
   it(
     'does not recreate the fallback if server errors and hydration suspends ' +
@@ -2645,7 +2617,7 @@ describe('ReactDOMFizzServer', () => {
 
   // Disabled because of a WWW late mutations regression.
   // We may want to re-enable this if we figure out why.
-  // @gate experimental
+
   // @gate FIXME
   it(
     'recreates the fallback if server errors and hydration suspends but ' +
@@ -2751,7 +2723,6 @@ describe('ReactDOMFizzServer', () => {
     },
   );
 
-  // @gate experimental
   it(
     'errors during hydration force a client render at the nearest Suspense ' +
       'boundary, and during the client render it recovers, then a deeper ' +
@@ -2921,7 +2892,6 @@ describe('ReactDOMFizzServer', () => {
     expect(container.textContent).toEqual('AB');
   });
 
-  // @gate experimental
   it('logs multiple hydration errors in the same render', async () => {
     let isClient = false;
 
@@ -2991,7 +2961,7 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
-  // @gate enableServerContext && experimental
+  // @gate enableServerContext
   it('supports ServerContext', async () => {
     let ServerContext;
     function inlineLazyServerContextInitialization() {
@@ -3040,7 +3010,6 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
-  // @gate experimental
   it('Supports iterable', async () => {
     const Immutable = require('immutable');
 
@@ -3063,7 +3032,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('Supports custom abort reasons with a string', async () => {
     function App() {
       return (
@@ -3150,7 +3118,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('Supports custom abort reasons with an Error', async () => {
     function App() {
       return (
@@ -3236,7 +3203,6 @@ describe('ReactDOMFizzServer', () => {
   });
 
   describe('error escaping', () => {
-    //@gate experimental
     it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
       window.__outlet = {};
 
@@ -3281,7 +3247,7 @@ describe('ReactDOMFizzServer', () => {
       });
       expect(window.__outlet).toEqual({});
     });
-    //@gate experimental
+
     it('escapes error hash, message, and component stack values in clientRenderInstruction (javascript escaping)', async () => {
       window.__outlet = {};
 
@@ -3333,7 +3299,7 @@ describe('ReactDOMFizzServer', () => {
       });
       expect(window.__outlet).toEqual({});
     });
-    //@gate experimental
+
     it('escapes such that attributes cannot be masked', async () => {
       const dangerousErrorString = '" data-msg="bad message" data-foo="';
       const theError = new Error(dangerousErrorString);
@@ -3399,7 +3365,6 @@ describe('ReactDOMFizzServer', () => {
   });
 
   describe('bootstrapScriptContent escaping', () => {
-    // @gate experimental
     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 =
@@ -3416,7 +3381,6 @@ describe('ReactDOMFizzServer', () => {
       expect(window.__test_outlet).toMatch(stringWithScriptsInIt);
     });
 
-    // @gate experimental
     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.
@@ -3441,7 +3405,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     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
@@ -3459,7 +3422,6 @@ describe('ReactDOMFizzServer', () => {
     });
   });
 
-  // @gate experimental
   it('#24384: Suspending should halt hydration warnings and not emit any if hydration completes successfully after unsuspending', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -3535,7 +3497,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -3625,7 +3586,6 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
   });
 
-  // @gate experimental
   it('only warns once on hydration mismatch while within a suspense boundary', async () => {
     const originalConsoleError = console.error;
     const mockError = jest.fn();
@@ -3704,7 +3664,6 @@ describe('ReactDOMFizzServer', () => {
     }
   });
 
-  // @gate experimental
   it('supresses hydration warnings when an error occurs within a Suspense boundary', async () => {
     let isClient = false;
     let shouldThrow = true;
@@ -3778,7 +3737,7 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
   });
 
-  // @gate experimental && __DEV__
+  // @gate __DEV__
   it('does not invokeGuardedCallback for errors after the first hydration error', async () => {
     // We can't use the toErrorDev helper here because this is async.
     const originalConsoleError = console.error;
@@ -3890,7 +3849,6 @@ describe('ReactDOMFizzServer', () => {
     }
   });
 
-  // @gate experimental
   it('does not invokeGuardedCallback for errors after a preceding fiber suspends', async () => {
     // We can't use the toErrorDev helper here because this is async.
     const originalConsoleError = console.error;
@@ -4013,7 +3971,7 @@ describe('ReactDOMFizzServer', () => {
     }
   });
 
-  // @gate experimental && __DEV__
+  // @gate __DEV__
   it('suspending after erroring will cause errors previously queued to be silenced until the boundary resolves', async () => {
     // We can't use the toErrorDev helper here because this is async.
     const originalConsoleError = console.error;
@@ -4141,7 +4099,6 @@ describe('ReactDOMFizzServer', () => {
     }
   });
 
-  // @gate experimental
   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
@@ -4196,7 +4153,6 @@ describe('ReactDOMFizzServer', () => {
       });
     }
 
-    // @gate experimental
     it('it only includes separators between adjacent text nodes', async () => {
       function App({name}) {
         return (
@@ -4231,7 +4187,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     it('it does not insert text separators even when adjacent text is in a delayed segment', async () => {
       function App({name}) {
         return (
@@ -4287,7 +4242,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     it('it works with multiple adjacent segments', async () => {
       function App() {
         return (
@@ -4333,7 +4287,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     it('it works when some segments are flushed and others are patched', async () => {
       function App() {
         return (
@@ -4376,7 +4329,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     it('it does not prepend a text separators if the segment follows a non-Text Node', async () => {
       function App() {
         return (
@@ -4417,7 +4369,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     it('it does not prepend a text separators if the segments first emission is a non-Text Node', async () => {
       function App() {
         return (
@@ -4456,7 +4407,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     it('should not insert separators for text inside Suspense boundaries even if they would otherwise be considered text-embedded', async () => {
       function App() {
         return (
@@ -4541,7 +4491,6 @@ describe('ReactDOMFizzServer', () => {
       );
     });
 
-    // @gate experimental
     it('(only) includes extraneous text separators in segments that complete before flushing, followed by nothing or a non-Text node', async () => {
       function App() {
         return (
@@ -4615,7 +4564,6 @@ describe('ReactDOMFizzServer', () => {
       container = document.getElementsByTagName('head')[0];
     }
 
-    // @gate experimental
     it('should accept a single string child', async () => {
       // a Single string child
       function App() {
@@ -4640,7 +4588,6 @@ describe('ReactDOMFizzServer', () => {
       expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
     });
 
-    // @gate experimental
     it('should accept children array of length 1 containing a string', async () => {
       // a Single string child
       function App() {
@@ -4665,7 +4612,6 @@ describe('ReactDOMFizzServer', () => {
       expect(getVisibleChildren(container)).toEqual(<title>hello</title>);
     });
 
-    // @gate experimental
     it('should warn in dev when given an array of length 2 or more', async () => {
       const originalConsoleError = console.error;
       const mockError = jest.fn();
@@ -4728,7 +4674,6 @@ describe('ReactDOMFizzServer', () => {
       }
     });
 
-    // @gate experimental
     it('should warn in dev if you pass a React Component as a child to <title>', async () => {
       const originalConsoleError = console.error;
       const mockError = jest.fn();
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index 489ffc32b96e..af5f3d9b3565 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -21,9 +21,7 @@ describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    if (__EXPERIMENTAL__) {
-      ReactDOMFizzServer = require('react-dom/server.browser');
-    }
+    ReactDOMFizzServer = require('react-dom/server.browser');
     Suspense = React.Suspense;
   });
 
@@ -48,7 +46,6 @@ describe('ReactDOMFizzServer', () => {
     }
   }
 
-  // @gate experimental
   it('should call renderToReadableStream', async () => {
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>hello world</div>,
@@ -57,7 +54,6 @@ describe('ReactDOMFizzServer', () => {
     expect(result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
-  // @gate experimental
   it('should emit DOCTYPE at the root of the document', async () => {
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <html>
@@ -70,7 +66,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should emit bootstrap script src at the end', async () => {
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>hello world</div>,
@@ -86,7 +81,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('emits all HTML as one unit if we wait until the end to start', async () => {
     let hasLoaded = false;
     let resolve;
@@ -124,7 +118,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should reject the promise when an error is thrown at the root', async () => {
     const reportedErrors = [];
     let caughtError = null;
@@ -146,7 +139,6 @@ describe('ReactDOMFizzServer', () => {
     expect(reportedErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should reject the promise when an error is thrown inside a fallback', async () => {
     const reportedErrors = [];
     let caughtError = null;
@@ -170,7 +162,6 @@ describe('ReactDOMFizzServer', () => {
     expect(reportedErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
     const reportedErrors = [];
     const stream = await ReactDOMFizzServer.renderToReadableStream(
@@ -191,7 +182,6 @@ describe('ReactDOMFizzServer', () => {
     expect(reportedErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     const errors = [];
     const controller = new AbortController();
@@ -219,7 +209,6 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
-  // @gate experimental
   it('should not continue rendering after the reader cancels', async () => {
     let hasLoaded = false;
     let resolve;
@@ -268,7 +257,6 @@ describe('ReactDOMFizzServer', () => {
     expect(isComplete).toBe(true);
   });
 
-  // @gate experimental
   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)`;
@@ -308,7 +296,6 @@ describe('ReactDOMFizzServer', () => {
     expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
   });
 
-  // @gate experimental
   it('Supports custom abort reasons with a string', async () => {
     const promise = new Promise(r => {});
     function Wait() {
@@ -350,7 +337,6 @@ describe('ReactDOMFizzServer', () => {
     expect(errors).toEqual(['foobar', 'foobar']);
   });
 
-  // @gate experimental
   it('Supports custom abort reasons with an Error', async () => {
     const promise = new Promise(r => {});
     function Wait() {
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index 303275bab5ec..f5f85c953148 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -19,9 +19,7 @@ describe('ReactDOMFizzServer', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
-    if (__EXPERIMENTAL__) {
-      ReactDOMFizzServer = require('react-dom/server');
-    }
+    ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
     Suspense = React.Suspense;
   });
@@ -56,7 +54,6 @@ describe('ReactDOMFizzServer', () => {
     throw theInfinitePromise;
   }
 
-  // @gate experimental
   it('should call renderToPipeableStream', () => {
     const {writable, output} = getTestWritable();
     const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -67,7 +64,6 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toMatchInlineSnapshot(`"<div>hello world</div>"`);
   });
 
-  // @gate experimental
   it('should emit DOCTYPE at the root of the document', () => {
     const {writable, output} = getTestWritable();
     const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -82,7 +78,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should emit bootstrap script src at the end', () => {
     const {writable, output} = getTestWritable();
     const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -100,7 +95,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should start writing after pipe', () => {
     const {writable, output} = getTestWritable();
     const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
@@ -117,7 +111,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('emits all HTML as one unit if we wait until the end to start', async () => {
     let hasLoaded = false;
     let resolve;
@@ -165,7 +158,6 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
-  // @gate experimental
   it('should error the stream when an error is thrown at the root', async () => {
     const reportedErrors = [];
     const reportedShellErrors = [];
@@ -197,7 +189,6 @@ describe('ReactDOMFizzServer', () => {
     expect(reportedShellErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should error the stream when an error is thrown inside a fallback', async () => {
     const reportedErrors = [];
     const reportedShellErrors = [];
@@ -231,7 +222,6 @@ describe('ReactDOMFizzServer', () => {
     expect(reportedShellErrors).toEqual([theError]);
   });
 
-  // @gate experimental
   it('should not error the stream when an error is thrown inside suspense boundary', async () => {
     const reportedErrors = [];
     const reportedShellErrors = [];
@@ -263,7 +253,6 @@ describe('ReactDOMFizzServer', () => {
     expect(reportedShellErrors).toEqual([]);
   });
 
-  // @gate experimental
   it('should not attempt to render the fallback if the main content completes first', async () => {
     const {writable, output, completed} = getTestWritable();
 
@@ -289,7 +278,6 @@ describe('ReactDOMFizzServer', () => {
     expect(renderedFallback).toBe(false);
   });
 
-  // @gate experimental
   it('should be able to complete by aborting even if the promise never resolves', async () => {
     let isCompleteCalls = 0;
     const errors = [];
@@ -327,7 +315,6 @@ describe('ReactDOMFizzServer', () => {
     expect(isCompleteCalls).toBe(1);
   });
 
-  // @gate experimental
   it('should be able to complete by abort when the fallback is also suspended', async () => {
     let isCompleteCalls = 0;
     const errors = [];
@@ -371,7 +358,6 @@ describe('ReactDOMFizzServer', () => {
     expect(isCompleteCalls).toBe(1);
   });
 
-  // @gate experimental
   it('should be able to get context value when promise resolves', async () => {
     class DelayClient {
       get() {
@@ -422,7 +408,6 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toContain('OK');
   });
 
-  // @gate experimental
   it('should be able to get context value when calls renderToPipeableStream twice at the same time', async () => {
     class DelayClient {
       get() {
@@ -497,7 +482,6 @@ describe('ReactDOMFizzServer', () => {
     expect(output1.result).toContain('OK');
   });
 
-  // @gate experimental
   it('should be able to pop context after suspending', async () => {
     class DelayClient {
       get() {
@@ -555,7 +539,6 @@ describe('ReactDOMFizzServer', () => {
     expect(output.result).toContain('OK');
   });
 
-  // @gate experimental
   it('should not continue rendering after the writable ends unexpectedly', async () => {
     let hasLoaded = false;
     let resolve;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
index ac53da312729..2ce501bd664b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuppressHydrationWarning-test.js
@@ -29,9 +29,7 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     Scheduler = require('scheduler');
     React = require('react');
     ReactDOMClient = require('react-dom/client');
-    if (__EXPERIMENTAL__) {
-      ReactDOMFizzServer = require('react-dom/server');
-    }
+    ReactDOMFizzServer = require('react-dom/server');
     Stream = require('stream');
 
     // Test Environment
@@ -127,7 +125,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
       : children;
   }
 
-  // @gate experimental
   it('suppresses and fixes text mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -167,7 +164,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('suppresses and fixes multiple text node mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -209,7 +205,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('errors on text-to-element mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -261,7 +256,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('suppresses and fixes client-only single text node mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -297,7 +291,7 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
   });
 
   // TODO: This behavior is not consistent with client-only single text node.
-  // @gate experimental
+
   it('errors on server-only single text node mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -343,7 +337,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('errors on client-only extra text node mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -395,7 +388,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('errors on server-only extra text node mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -446,7 +438,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('errors on element-to-text mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -499,7 +490,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('suppresses and does not fix attribute mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -538,7 +528,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('suppresses and does not fix html mismatches with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -576,7 +565,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('errors on insertions with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (
@@ -622,7 +610,6 @@ describe('ReactDOMFizzServerHydrationWarning', () => {
     );
   });
 
-  // @gate experimental
   it('errors on deletions with suppressHydrationWarning', async () => {
     function App({isClient}) {
       return (

From 256aefbea1449869620fb26f6ec695536ab453f5 Mon Sep 17 00:00:00 2001
From: dan <dan.abramov@me.com>
Date: Tue, 14 Jun 2022 22:34:30 +0100
Subject: [PATCH 1424/1603] Typo

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ec7061b86267..f180bf6be8ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@
 
 ### 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 ([@gnoff](https://github.com/gnoff) in [#24591](https://github.com/facebook/react/pull/24591)
+* 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))

From 522f47345f79bb117f338384e75c8a79622bd735 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 14 Jun 2022 20:16:42 -0400
Subject: [PATCH 1425/1603] Move the Error creation to be lazy (#24728)

Creating an Error captures a stack trace which can be somewhat expensive.
We shouldn't do tthat always for every render.

This also ensures that the stack trace is more useful because you can
follow through the Node.js code to see the cause.
---
 .../src/server/ReactDOMFizzServerNode.js         | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index ce2b2e503086..4728a48a0552 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -29,7 +29,8 @@ function createDrainHandler(destination, request) {
 }
 
 function createAbortHandler(request, reason) {
-  return () => abort(request, reason);
+  // eslint-disable-next-line react-internal/prod-error-codes
+  return () => abort(request, new Error(reason));
 }
 
 type Options = {|
@@ -49,7 +50,7 @@ type Options = {|
 type PipeableStream = {|
   // Cancel any pending I/O and put anything remaining into
   // client rendered mode.
-  abort(): void,
+  abort(reason: mixed): void,
   pipe<T: Writable>(destination: T): T,
 |};
 
@@ -94,21 +95,16 @@ function renderToPipeableStream(
         'error',
         createAbortHandler(
           request,
-          // eslint-disable-next-line react-internal/prod-error-codes
-          new Error('The destination stream errored while writing data.'),
+          'The destination stream errored while writing data.',
         ),
       );
       destination.on(
         'close',
-        createAbortHandler(
-          request,
-          // eslint-disable-next-line react-internal/prod-error-codes
-          new Error('The destination stream closed early.'),
-        ),
+        createAbortHandler(request, 'The destination stream closed early.'),
       );
       return destination;
     },
-    abort(reason) {
+    abort(reason: mixed) {
       abort(request, reason);
     },
   };

From fcd720d3631a23a9e273db60bf2d35ff5f7dc406 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 15 Jun 2022 11:51:51 -0700
Subject: [PATCH 1426/1603] [Transition Tracing] Push Transition When Offscreen
 Becomes Visible (#24718)

This PR pushes all of a suspense boundary's transitions onto the transition stack when it goes from hidden to visible so we can pass it to any child suspense boundaries or tracing markers.
---
 .../react-reconciler/src/ReactFiberBeginWork.new.js  | 12 +++++++++++-
 .../react-reconciler/src/ReactFiberBeginWork.old.js  | 12 +++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 0688ae8a04f6..c8c1f3cbb05a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -779,7 +779,17 @@ function updateOffscreenComponent(
         prevCachePool = prevState.cachePool;
       }
 
-      pushTransition(workInProgress, prevCachePool, null);
+      let transitions = null;
+      if (
+        workInProgress.memoizedState !== null &&
+        workInProgress.memoizedState.transitions !== null
+      ) {
+        // 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
+        transitions = workInProgress.memoizedState.transitions;
+      }
+
+      pushTransition(workInProgress, prevCachePool, transitions);
 
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 74595fda4342..8f98c76b3b1a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -779,7 +779,17 @@ function updateOffscreenComponent(
         prevCachePool = prevState.cachePool;
       }
 
-      pushTransition(workInProgress, prevCachePool, null);
+      let transitions = null;
+      if (
+        workInProgress.memoizedState !== null &&
+        workInProgress.memoizedState.transitions !== null
+      ) {
+        // 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
+        transitions = workInProgress.memoizedState.transitions;
+      }
+
+      pushTransition(workInProgress, prevCachePool, transitions);
 
       // Since we're not hidden anymore, reset the state
       workInProgress.memoizedState = null;

From c3d7a7e3d72937443ef75b7e29335c98ad0f1424 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 15 Jun 2022 22:13:22 -0400
Subject: [PATCH 1427/1603] Bugfix: Offscreen instance is null during setState
 (#24734)

* [FORKED] Bugfix: Offscreen instance is null during setState

During a setState, we traverse up the return path and check if any
parent Offscreen components are currently hidden. To do that, we must
access the Offscreen fiber's `stateNode` field.

On a mounted Offscreen fiber, the `stateNode` is never null, so usually
we don't need to refine the type. When a fiber is unmounted, though,
we null out its `stateNode` field to prevent memory cycles. However,
we also null out its `return` field, so I had assumed that an unmounted
Offscreen fiber would never be reachable.

What I didn't consider is that it's possible to call `setState` on a
fiber that never finished mounting. Because it never mounted, it was
never deleted. Because it was never deleted, its `return` field was
never disconnected.

This pattern is always accompanied by a warning but we still need to
account for it. There may also be other patterns where an unmounted
Offscreen instance is reachable, too.

The discovery also 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 initial render, like on the stack.

The fix is to add a null check before reading the instance
during setState.

* Add previous commit to list of forked revisions
---
 .../src/ReactFiberConcurrentUpdates.new.js    | 21 +++++++-
 .../src/__tests__/ReactOffscreen-test.js      | 51 +++++++++++++++++++
 scripts/merge-fork/forked-revisions           |  1 +
 3 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index 74e19f40b498..4114da9dd226 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -193,8 +193,25 @@ function markUpdateLaneFromFiberToRoot(
     }
 
     if (parent.tag === OffscreenComponent) {
-      const offscreenInstance: OffscreenInstance = parent.stateNode;
-      if (offscreenInstance.isHidden) {
+      // 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.isHidden) {
         isHidden = true;
       }
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 0f9fd6dd5b21..bed5691426a4 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -7,6 +7,7 @@ let Offscreen;
 let useState;
 let useLayoutEffect;
 let useEffect;
+let startTransition;
 
 describe('ReactOffscreen', () => {
   beforeEach(() => {
@@ -21,6 +22,7 @@ describe('ReactOffscreen', () => {
     useState = React.useState;
     useLayoutEffect = React.useLayoutEffect;
     useEffect = React.useEffect;
+    startTransition = React.startTransition;
   });
 
   function Text(props) {
@@ -591,4 +593,53 @@ describe('ReactOffscreen', () => {
       </>,
     );
   });
+
+  // TODO: Create TestFlag alias for Offscreen
+  // @gate experimental || www
+  it('regression: Offscreen 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(async () => {
+      root.render(<Offscreen hidden={false} />);
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput(null);
+
+    await act(async () => {
+      // Partially render a component
+      startTransition(() => {
+        root.render(
+          <Offscreen hidden={false}>
+            <Child />
+            <Text text="Sibling" />
+          </Offscreen>,
+        );
+      });
+      expect(Scheduler).toFlushAndYieldThrough(['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 Offscreen 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.
+      expect(() => {
+        setState('Updated');
+      }).toErrorDev(
+        "Can't perform a React state update on a component that hasn't mounted yet",
+      );
+    });
+    expect(root).toMatchRenderedOutput(null);
+  });
 });
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index c4bdf3a85b0e..e4099dd72ffd 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -1,3 +1,4 @@
+d410f0a1bbb12e972b0e99bb9faea10c7e62894d [FORKED] Bugfix: Offscreen instance is null during setState
 58bb11764bf0bb6db47527a64f693f67cdd3b0bb [FORKED] Check for infinite update loops even if unmounted
 31882b5dd66f34f70d341ea2781cacbe802bf4d5 [FORKED] Bugfix: Revealing a hidden update
 17691acc071d56261d43c3cf183f287d983baa9b [FORKED] Don't update childLanes until after current render

From 229c86af07302d40b70c41de18106f80fe89836c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 16 Jun 2022 11:38:37 -0400
Subject: [PATCH 1428/1603] Revert "Land
 enableClientRenderFallbackOnTextMismatch" (#24738)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 327e4a1f96fbb874001b17684fbb073046a84938.

Turns out we hadn't rolled this out internally yet — I mistook
enableClientRenderFallbackOnHydrationMismatch for
said enableClientRenderFallbackOnTextMismatch. Need to revert
until we finish rolling out the change.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 16 ++++++++----
 .../__tests__/ReactDOMHydrationDiff-test.js   | 25 +++++++++++++++++--
 ...DOMServerPartialHydration-test.internal.js |  2 ++
 .../react-dom/src/client/ReactDOMComponent.js |  3 ++-
 .../useMutableSourceHydration-test.js         |  1 +
 packages/shared/ReactFeatureFlags.js          |  3 +++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 15 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 5d72131e483f..5ff919693e23 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3497,6 +3497,7 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate enableClientRenderFallbackOnTextMismatch
   it('#24384: Suspending should halt hydration warnings but still emit hydration warnings after unsuspending if mismatches are genuine', async () => {
     const makeApp = () => {
       let resolve, resolved;
@@ -3586,6 +3587,7 @@ describe('ReactDOMFizzServer', () => {
     expect(Scheduler).toFlushAndYield([]);
   });
 
+  // @gate enableClientRenderFallbackOnTextMismatch
   it('only warns once on hydration mismatch while within a suspense boundary', async () => {
     const originalConsoleError = console.error;
     const mockError = jest.fn();
@@ -4661,11 +4663,15 @@ describe('ReactDOMFizzServer', () => {
           },
         });
         expect(Scheduler).toFlushAndYield([]);
-        expect(errors).toEqual([
-          'Text content does not match server-rendered HTML.',
-          'Hydration failed because the initial UI does not match what was rendered on the server.',
-          'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
-        ]);
+        expect(errors).toEqual(
+          [
+            gate(flags => flags.enableClientRenderFallbackOnTextMismatch)
+              ? 'Text content does not match server-rendered HTML.'
+              : null,
+            'Hydration failed because the initial UI does not match what was rendered on the server.',
+            'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+          ].filter(Boolean),
+        );
         expect(getVisibleChildren(container)).toEqual(
           <title>{['hello1', 'hello2']}</title>,
         );
diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index e1e9068eb101..e8e7dffee5d6 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -86,7 +86,8 @@ describe('ReactDOMServerHydration', () => {
           </div>
         );
       }
-      expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+      if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
           Array [
             "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
               in main (at **)
@@ -97,6 +98,16 @@ describe('ReactDOMServerHydration', () => {
             "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
           ]
         `);
+      } else {
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+          Array [
+            "Warning: Text content did not match. Server: \\"server\\" Client: \\"client\\"
+              in main (at **)
+              in div (at **)
+              in Mismatch (at **)",
+          ]
+        `);
+      }
     });
 
     // @gate __DEV__
@@ -346,7 +357,8 @@ describe('ReactDOMServerHydration', () => {
         function Mismatch({isClient}) {
           return <div className="parent">{isClient && 'only'}</div>;
         }
-        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+        if (gate(flags => flags.enableClientRenderFallbackOnTextMismatch)) {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
                 in div (at **)
@@ -356,6 +368,15 @@ describe('ReactDOMServerHydration', () => {
               "Caught [There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.]",
             ]
           `);
+        } else {
+          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+            Array [
+              "Warning: Text content did not match. Server: \\"\\" Client: \\"only\\"
+                in div (at **)
+                in Mismatch (at **)",
+            ]
+          `);
+        }
       });
 
       // @gate __DEV__
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index bd9987dbfd8f..e086448d6914 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -3416,6 +3416,7 @@ describe('ReactDOMServerPartialHydration', () => {
     );
   });
 
+  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (direct text child)", async () => {
     function DirectTextChild({text}) {
       return <div>{text}</div>;
@@ -3447,6 +3448,7 @@ describe('ReactDOMServerPartialHydration', () => {
     ]);
   });
 
+  // @gate enableClientRenderFallbackOnTextMismatch
   it("falls back to client rendering when there's a text mismatch (text child with siblings)", async () => {
     function Sibling() {
       return 'Sibling';
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 5a3ff307323d..19eb70e583b3 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -72,6 +72,7 @@ import {validateProperties as validateUnknownProperties} from '../shared/ReactDO
 import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
+  enableClientRenderFallbackOnTextMismatch,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -249,7 +250,7 @@ export function checkForUnmatchedText(
     }
   }
 
-  if (isConcurrentMode) {
+  if (isConcurrentMode && enableClientRenderFallbackOnTextMismatch) {
     // In concurrent roots, we throw when there's a text mismatch and revert to
     // client rendering, up to the nearest Suspense boundary.
     throw new Error('Text content does not match server-rendered HTML.');
diff --git a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
index 183fecdc40bb..a22e8114f605 100644
--- a/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
+++ b/packages/react-reconciler/src/__tests__/useMutableSourceHydration-test.js
@@ -169,6 +169,7 @@ describe('useMutableSourceHydration', () => {
   });
 
   // @gate enableUseMutableSource
+  // @gate enableClientRenderFallbackOnTextMismatch
   it('should detect a tear before hydrating a component', () => {
     const source = createSource('one');
     const mutableSource = createMutableSource(source, param => param.version);
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 6b666217f41b..33d233f92e4e 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -31,6 +31,9 @@ export const enableSymbolFallbackForWWW = false;
 // internal tests need to be updated. The open source behavior is correct.
 export const skipUnmountedBoundaries = true;
 
+// TODO: Finish rolling out in www
+export const enableClientRenderFallbackOnTextMismatch = true;
+
 // TODO: Need to review this code one more time before landing
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f015f47c652e..0e07c9f67d99 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -51,6 +51,7 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index c06c4f56c72d..933d914ce5a6 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -41,6 +41,7 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 3770fd1943d2..b218c53470bd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -41,6 +41,7 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 557c50ba3e01..b76a1b8506d1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -50,6 +50,7 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableUseRefAccessWarning = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 3eb792406b9d..63ba329f01a9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -41,6 +41,7 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 32763075ce61..9e5a9107ab2b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -41,6 +41,7 @@ export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = false;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 59230d8e7446..a4c3e1ba3267 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -41,6 +41,7 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
+export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
 export const enableLegacyFBSupport = !__EXPERIMENTAL__;
 export const enableFilterEmptyStringAttributesDOM = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 255a183d42ff..7a89e41ad54f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -26,6 +26,7 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const enableSyncDefaultUpdates = __VARIANT__;
 export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
+export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
 export const enableSymbolFallbackForWWW = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 70f8ad6ff3d1..938d7589c4e2 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -32,6 +32,7 @@ export const {
   enableLazyContextPropagation,
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
+  enableClientRenderFallbackOnTextMismatch,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.

From 7cf9f5e03a245b4a879c5abc84e5ffb2824370e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kerim=20B=C3=BCy=C3=BCkaky=C3=BCz?=
 <99087793+kbuyukakyuz@users.noreply.github.com>
Date: Fri, 17 Jun 2022 20:43:17 +0300
Subject: [PATCH 1429/1603] Extra space (#24612)

---
 packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 26d9688ac17c..c2341886872c 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -352,7 +352,7 @@ export default {
       const currentRefsInEffectCleanup = new Map();
 
       // Is this reference inside a cleanup function for this effect node?
-      // We can check by traversing scopes upwards  from the reference, and checking
+      // 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) {
         let curScope = reference.from;

From a7c322c6f5fd33acfecf1d50dec4f911c3e9daf4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Siyabend=20=C3=9Cr=C3=BCn?= <urunsiyabend@gmail.com>
Date: Fri, 17 Jun 2022 20:43:52 +0300
Subject: [PATCH 1430/1603] Fix typo in dangerfile.js (insiginificant ->
 insignificant) (#24393)

---
 dangerfile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dangerfile.js b/dangerfile.js
index f612c80a7e54..fa5336cc633f 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -41,7 +41,7 @@ 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
-  // insiginificant or non-existent.
+  // insignificant or non-existent.
   'oss-stable/react-dom/cjs/react-dom.production.min.js',
   'oss-experimental/react-dom/cjs/react-dom.production.min.js',
   'facebook-www/ReactDOM-prod.classic.js',

From 72ebc703ac8abacd44fdeb1e3d66eb28b75e5a5b Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Fri, 17 Jun 2022 14:43:10 -0400
Subject: [PATCH 1431/1603] [DevTools] fix useDeferredValue to match reconciler
 change (#24742)

* [DevTools] fix useDeferredValue to match reconciler change

* fixup

* update test to catch original issue

* fix lint

* add safer tests for other composite hooks
---
 .../react-debug-tools/src/ReactDebugHooks.js  |  8 +---
 .../ReactHooksInspectionIntegration-test.js   | 44 ++++++++++++++++---
 2 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 3657ed2db059..940873725cb2 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -310,15 +310,11 @@ function useTransition(): [
 }
 
 function useDeferredValue<T>(value: T): T {
-  // useDeferredValue() composes multiple hooks internally.
-  // Advance the current hook index the same number of times
-  // so that subsequent hooks have the right memoized state.
-  nextHook(); // State
-  nextHook(); // Effect
+  const hook = nextHook();
   hookLog.push({
     primitive: 'DeferredValue',
     stackError: new Error(),
-    value,
+    value: hook !== null ? hook.memoizedState : value,
   });
   return value;
 }
diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
index e57f084975d6..db1a015efc2f 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspectionIntegration-test.js
@@ -546,6 +546,7 @@ describe('ReactHooksInspectionIntegration', () => {
     function Foo(props) {
       React.useTransition();
       const memoizedValue = React.useMemo(() => 'hello', []);
+      React.useMemo(() => 'not used', []);
       return <div>{memoizedValue}</div>;
     }
     const renderer = ReactTestRenderer.create(<Foo />);
@@ -566,16 +567,24 @@ describe('ReactHooksInspectionIntegration', () => {
         value: 'hello',
         subHooks: [],
       },
+      {
+        id: 2,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'not used',
+        subHooks: [],
+      },
     ]);
   });
 
-  it('should support composite useDeferredValue hook', () => {
+  it('should support useDeferredValue hook', () => {
     function Foo(props) {
       React.useDeferredValue('abc', {
         timeoutMs: 500,
       });
-      const [state] = React.useState(() => 'hello', []);
-      return <div>{state}</div>;
+      const memoizedValue = React.useMemo(() => 1, []);
+      React.useMemo(() => 2, []);
+      return <div>{memoizedValue}</div>;
     }
     const renderer = ReactTestRenderer.create(<Foo />);
     const childFiber = renderer.root.findByType(Foo)._currentFiber();
@@ -590,9 +599,16 @@ describe('ReactHooksInspectionIntegration', () => {
       },
       {
         id: 1,
-        isStateEditable: true,
-        name: 'State',
-        value: 'hello',
+        isStateEditable: false,
+        name: 'Memo',
+        value: 1,
+        subHooks: [],
+      },
+      {
+        id: 2,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 2,
         subHooks: [],
       },
     ]);
@@ -1012,6 +1028,7 @@ describe('ReactHooksInspectionIntegration', () => {
         () => {},
       );
       React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
       return <div />;
     }
     const renderer = ReactTestRenderer.create(<Foo />);
@@ -1032,6 +1049,13 @@ describe('ReactHooksInspectionIntegration', () => {
         value: 'memo',
         subHooks: [],
       },
+      {
+        id: 2,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'not used',
+        subHooks: [],
+      },
     ]);
   });
 
@@ -1043,6 +1067,7 @@ describe('ReactHooksInspectionIntegration', () => {
         () => 'snapshot',
       );
       React.useMemo(() => 'memo', []);
+      React.useMemo(() => 'not used', []);
       return value;
     }
 
@@ -1064,6 +1089,13 @@ describe('ReactHooksInspectionIntegration', () => {
         value: 'memo',
         subHooks: [],
       },
+      {
+        id: 2,
+        isStateEditable: false,
+        name: 'Memo',
+        value: 'not used',
+        subHooks: [],
+      },
     ]);
   });
 });

From 12a738f1a87889bb5f7c4159641573fd04140664 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 17 Jun 2022 16:43:46 -0400
Subject: [PATCH 1432/1603] [Transition Tracing] Add Support for Multiple
 Transitions on Root (#24732)

We can think of transitions on the root as a bunch of tracing markers. Therefore, we can map each transition to a map of pending suspense boundaries. When a transition's pending suspense boundary map is empty, we know that it's complete. This PR:
* Combines the `pendingSuspenseBoundaries` and `transitions` into one `incompleteTransitions` object. This object is a map from a `transition` to a map of `pendingSuspenseBoundaries`
* Refactored code to make it so that every transition has its own `pendingSuspenseBoundaries` map rather than sharing just one.
* Moves the transition complete callback to the root. Alternatively, we can also keep a map of pendingSuspenseBoundaries to transitions on the Offscreen marker, but it's simpler to just call the transition complete callback on the root instead. We also only do this if there are transitions pending, so it shouldn't make too big of a difference
---
 .../react-reconciler/src/ReactFiber.new.js    |   2 +
 .../react-reconciler/src/ReactFiber.old.js    |   2 +
 .../src/ReactFiberBeginWork.new.js            |  15 +-
 .../src/ReactFiberBeginWork.old.js            |  15 +-
 .../src/ReactFiberCommitWork.new.js           | 161 +++++++-------
 .../src/ReactFiberCommitWork.old.js           | 161 +++++++-------
 .../src/ReactFiberOffscreenComponent.js       |   8 +-
 .../src/ReactFiberRoot.new.js                 |  15 +-
 .../src/ReactFiberRoot.old.js                 |  15 +-
 .../__tests__/ReactTransitionTracing-test.js  | 198 ++++++++++++++++++
 10 files changed, 394 insertions(+), 198 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 58aabf70afa5..c5a5919494d8 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -717,6 +717,8 @@ export function createFiberFromOffscreen(
   fiber.lanes = lanes;
   const primaryChildInstance: OffscreenInstance = {
     isHidden: false,
+    pendingMarkers: null,
+    transitions: null,
   };
   fiber.stateNode = primaryChildInstance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index afa8f26503cc..9a4e3e2aa0e4 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -717,6 +717,8 @@ export function createFiberFromOffscreen(
   fiber.lanes = lanes;
   const primaryChildInstance: OffscreenInstance = {
     isHidden: false,
+    pendingMarkers: null,
+    transitions: null,
   };
   fiber.stateNode = primaryChildInstance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index c8c1f3cbb05a..385f5d3b0074 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -675,7 +675,6 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
-        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       if (enableCache) {
@@ -709,7 +708,6 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
         cachePool: spawnedCachePool,
-        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
@@ -745,7 +743,6 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
-        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -780,13 +777,10 @@ function updateOffscreenComponent(
       }
 
       let transitions = null;
-      if (
-        workInProgress.memoizedState !== null &&
-        workInProgress.memoizedState.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
-        transitions = workInProgress.memoizedState.transitions;
+        transitions = workInProgress.stateNode.transitions;
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -1323,8 +1317,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
-      pendingSuspenseBoundaries: nextState.pendingSuspenseBoundaries,
-      transitions: nextState.transitions,
+      incompleteTransitions: nextState.incompleteTransitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
     // `baseState` can always be the last state because the root doesn't
@@ -1920,7 +1913,6 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCache(),
-    transitions: null,
   };
 }
 
@@ -1955,7 +1947,6 @@ function updateSuspenseOffscreenState(
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
-    transitions: prevOffscreenState.transitions,
   };
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 8f98c76b3b1a..8be41d4b19e8 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -675,7 +675,6 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
-        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       if (enableCache) {
@@ -709,7 +708,6 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
         cachePool: spawnedCachePool,
-        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
@@ -745,7 +743,6 @@ function updateOffscreenComponent(
       const nextState: OffscreenState = {
         baseLanes: NoLanes,
         cachePool: null,
-        transitions: null,
       };
       workInProgress.memoizedState = nextState;
       // Push the lanes that were skipped when we bailed out.
@@ -780,13 +777,10 @@ function updateOffscreenComponent(
       }
 
       let transitions = null;
-      if (
-        workInProgress.memoizedState !== null &&
-        workInProgress.memoizedState.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
-        transitions = workInProgress.memoizedState.transitions;
+        transitions = workInProgress.stateNode.transitions;
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -1323,8 +1317,7 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
-      pendingSuspenseBoundaries: nextState.pendingSuspenseBoundaries,
-      transitions: nextState.transitions,
+      incompleteTransitions: nextState.incompleteTransitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
     // `baseState` can always be the last state because the root doesn't
@@ -1920,7 +1913,6 @@ function mountSuspenseOffscreenState(renderLanes: Lanes): OffscreenState {
   return {
     baseLanes: renderLanes,
     cachePool: getSuspendedCache(),
-    transitions: null,
   };
 }
 
@@ -1955,7 +1947,6 @@ function updateSuspenseOffscreenState(
   return {
     baseLanes: mergeLanes(prevOffscreenState.baseLanes, renderLanes),
     cachePool,
-    transitions: prevOffscreenState.transitions,
   };
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index fef5a029d4ab..641063bc91fa 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1066,10 +1066,7 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
   }
 }
 
-function commitTransitionProgress(
-  finishedRoot: FiberRoot,
-  offscreenFiber: Fiber,
-) {
+function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
     // or tracing marker's pendingSuspenseBoundaries map.
@@ -1094,12 +1091,7 @@ function commitTransitionProgress(
     const wasHidden = prevState !== null;
     const isHidden = nextState !== null;
 
-    const rootState: RootState = finishedRoot.current.memoizedState;
-    // TODO(luna) move pendingSuspenseBoundaries and transitions from
-    // HostRoot fiber to FiberRoot
-    const rootPendingBoundaries = rootState.pendingSuspenseBoundaries;
-    const rootTransitions = rootState.transitions;
-
+    const pendingMarkers = offscreenInstance.pendingMarkers;
     // If there is a name on the suspense boundary, store that in
     // the pending boundaries.
     let name = null;
@@ -1112,38 +1104,26 @@ function commitTransitionProgress(
       name = parent.memoizedProps.unstable_name;
     }
 
-    if (rootPendingBoundaries !== null) {
-      if (previousFiber === null) {
-        // Initial mount
-        if (isHidden) {
-          rootPendingBoundaries.set(offscreenInstance, {
+    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(pendingBoundaries => {
+          pendingBoundaries.set(offscreenInstance, {
             name,
           });
-        }
-      } 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 (rootPendingBoundaries.has(offscreenInstance)) {
-            rootPendingBoundaries.delete(offscreenInstance);
-
-            if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
-              rootTransitions.forEach(transition => {
-                addTransitionCompleteCallbackToPendingTransition({
-                  transitionName: transition.name,
-                  startTime: transition.startTime,
-                });
-              });
-            }
+        });
+      }
+    } 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(pendingBoundaries => {
+          if (pendingBoundaries.has(offscreenInstance)) {
+            pendingBoundaries.delete(offscreenInstance);
           }
-        } else if (!wasHidden && isHidden) {
-          // The suspense boundaries was just hidden. Add the boundary
-          // to the pending boundary set if it's there
-          rootPendingBoundaries.set(offscreenInstance, {
-            name,
-          });
-        }
+        });
       }
     }
   }
@@ -2830,45 +2810,46 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const state = finishedWork.memoizedState;
-        // TODO Since it's a mutable field, this should live on the FiberRoot
-        if (state.transitions === null) {
-          state.transitions = new Set([]);
-        }
-        const pendingTransitions = state.transitions;
-        const pendingSuspenseBoundaries = state.pendingSuspenseBoundaries;
-
+        let incompleteTransitions = state.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
+          if (state.incompleteTransitions === null) {
+            state.incompleteTransitions = incompleteTransitions = new Map();
+          }
+
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
-            pendingTransitions.add(transition);
+
+            if (!incompleteTransitions.has(transition)) {
+              incompleteTransitions.set(transition, null);
+            }
           });
 
-          if (
-            pendingSuspenseBoundaries === null ||
-            pendingSuspenseBoundaries.size === 0
-          ) {
-            pendingTransitions.forEach(transition => {
+          clearTransitionsForLanes(finishedRoot, committedLanes);
+        }
+
+        if (incompleteTransitions !== null) {
+          incompleteTransitions.forEach((pendingBoundaries, transition) => {
+            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
-            });
-          }
-
-          clearTransitionsForLanes(finishedRoot, committedLanes);
+              incompleteTransitions.delete(transition);
+            }
+          });
         }
 
         // If there are no more pending suspense boundaries we
         // clear the transitions because they are all complete.
         if (
-          pendingSuspenseBoundaries === null ||
-          pendingSuspenseBoundaries.size === 0
+          incompleteTransitions === null ||
+          incompleteTransitions.size === 0
         ) {
-          state.transitions = null;
+          state.incompleteTransitions = null;
         }
       }
       break;
@@ -2909,39 +2890,59 @@ function commitPassiveMountOnFiber(
         const isFallback = finishedWork.memoizedState;
         const queue = (finishedWork.updateQueue: any);
         const rootMemoizedState = finishedRoot.current.memoizedState;
+        const instance = finishedWork.stateNode;
 
         if (queue !== null) {
-          // We have one instance of the pendingSuspenseBoundaries map.
-          // We only need one because we update it during the commit phase.
-          // We instantiate a new Map if we haven't already
-          if (rootMemoizedState.pendingSuspenseBoundaries === null) {
-            rootMemoizedState.pendingSuspenseBoundaries = new Map();
-          }
-
           if (isFallback) {
             const transitions = queue.transitions;
-            let prevTransitions = finishedWork.memoizedState.transitions;
-            // 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 (transitions !== null) {
-              if (prevTransitions === null) {
-                // We only have one instance of the transitions set
-                // because we update it only during the commit phase. We
-                // will create the set on a as needed basis in the commit phase
-                finishedWork.memoizedState.transitions = prevTransitions = new Set();
-              }
+            let prevTransitions = instance.transitions;
+            let rootIncompleteTransitions =
+              rootMemoizedState.incompleteTransitions;
+
+            // We lazily instantiate transition tracing relevant maps
+            // and sets in the commit phase as we need to use them. We only
+            // instantiate them in the fallback phase on an as needed basis
+            if (rootMemoizedState.incompleteTransitions === null) {
+              // TODO(luna): Move this to the fiber root
+              rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
+            }
+            if (instance.pendingMarkers === null) {
+              instance.pendingMarkers = new Set();
+            }
+            if (transitions !== null && prevTransitions === null) {
+              instance.transitions = prevTransitions = new Set();
+            }
 
+            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.
                 prevTransitions.add(transition);
+
+                // Add the root transition's pending suspense boundary set to
+                // the queue's marker set. We will iterate through the marker
+                // set when we toggle state on the suspense boundary and
+                // add or remove the pending suspense boundaries as needed.
+                if (!rootIncompleteTransitions.has(transition)) {
+                  rootIncompleteTransitions.set(transition, new Map());
+                }
+                instance.pendingMarkers.add(
+                  rootIncompleteTransitions.get(transition),
+                );
               });
             }
           }
-        }
 
-        commitTransitionProgress(finishedRoot, finishedWork);
+          commitTransitionProgress(finishedWork);
 
-        finishedWork.updateQueue = null;
+          if (
+            instance.pendingMarkers === null ||
+            instance.pendingMarkers.size === 0
+          ) {
+            finishedWork.updateQueue = null;
+          }
+        }
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index da9e3c565da6..00ed3bfe50a5 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1066,10 +1066,7 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
   }
 }
 
-function commitTransitionProgress(
-  finishedRoot: FiberRoot,
-  offscreenFiber: Fiber,
-) {
+function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
     // or tracing marker's pendingSuspenseBoundaries map.
@@ -1094,12 +1091,7 @@ function commitTransitionProgress(
     const wasHidden = prevState !== null;
     const isHidden = nextState !== null;
 
-    const rootState: RootState = finishedRoot.current.memoizedState;
-    // TODO(luna) move pendingSuspenseBoundaries and transitions from
-    // HostRoot fiber to FiberRoot
-    const rootPendingBoundaries = rootState.pendingSuspenseBoundaries;
-    const rootTransitions = rootState.transitions;
-
+    const pendingMarkers = offscreenInstance.pendingMarkers;
     // If there is a name on the suspense boundary, store that in
     // the pending boundaries.
     let name = null;
@@ -1112,38 +1104,26 @@ function commitTransitionProgress(
       name = parent.memoizedProps.unstable_name;
     }
 
-    if (rootPendingBoundaries !== null) {
-      if (previousFiber === null) {
-        // Initial mount
-        if (isHidden) {
-          rootPendingBoundaries.set(offscreenInstance, {
+    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(pendingBoundaries => {
+          pendingBoundaries.set(offscreenInstance, {
             name,
           });
-        }
-      } 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 (rootPendingBoundaries.has(offscreenInstance)) {
-            rootPendingBoundaries.delete(offscreenInstance);
-
-            if (rootPendingBoundaries.size === 0 && rootTransitions !== null) {
-              rootTransitions.forEach(transition => {
-                addTransitionCompleteCallbackToPendingTransition({
-                  transitionName: transition.name,
-                  startTime: transition.startTime,
-                });
-              });
-            }
+        });
+      }
+    } 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(pendingBoundaries => {
+          if (pendingBoundaries.has(offscreenInstance)) {
+            pendingBoundaries.delete(offscreenInstance);
           }
-        } else if (!wasHidden && isHidden) {
-          // The suspense boundaries was just hidden. Add the boundary
-          // to the pending boundary set if it's there
-          rootPendingBoundaries.set(offscreenInstance, {
-            name,
-          });
-        }
+        });
       }
     }
   }
@@ -2830,45 +2810,46 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const state = finishedWork.memoizedState;
-        // TODO Since it's a mutable field, this should live on the FiberRoot
-        if (state.transitions === null) {
-          state.transitions = new Set([]);
-        }
-        const pendingTransitions = state.transitions;
-        const pendingSuspenseBoundaries = state.pendingSuspenseBoundaries;
-
+        let incompleteTransitions = state.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
+          if (state.incompleteTransitions === null) {
+            state.incompleteTransitions = incompleteTransitions = new Map();
+          }
+
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
-            pendingTransitions.add(transition);
+
+            if (!incompleteTransitions.has(transition)) {
+              incompleteTransitions.set(transition, null);
+            }
           });
 
-          if (
-            pendingSuspenseBoundaries === null ||
-            pendingSuspenseBoundaries.size === 0
-          ) {
-            pendingTransitions.forEach(transition => {
+          clearTransitionsForLanes(finishedRoot, committedLanes);
+        }
+
+        if (incompleteTransitions !== null) {
+          incompleteTransitions.forEach((pendingBoundaries, transition) => {
+            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
-            });
-          }
-
-          clearTransitionsForLanes(finishedRoot, committedLanes);
+              incompleteTransitions.delete(transition);
+            }
+          });
         }
 
         // If there are no more pending suspense boundaries we
         // clear the transitions because they are all complete.
         if (
-          pendingSuspenseBoundaries === null ||
-          pendingSuspenseBoundaries.size === 0
+          incompleteTransitions === null ||
+          incompleteTransitions.size === 0
         ) {
-          state.transitions = null;
+          state.incompleteTransitions = null;
         }
       }
       break;
@@ -2909,39 +2890,59 @@ function commitPassiveMountOnFiber(
         const isFallback = finishedWork.memoizedState;
         const queue = (finishedWork.updateQueue: any);
         const rootMemoizedState = finishedRoot.current.memoizedState;
+        const instance = finishedWork.stateNode;
 
         if (queue !== null) {
-          // We have one instance of the pendingSuspenseBoundaries map.
-          // We only need one because we update it during the commit phase.
-          // We instantiate a new Map if we haven't already
-          if (rootMemoizedState.pendingSuspenseBoundaries === null) {
-            rootMemoizedState.pendingSuspenseBoundaries = new Map();
-          }
-
           if (isFallback) {
             const transitions = queue.transitions;
-            let prevTransitions = finishedWork.memoizedState.transitions;
-            // 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 (transitions !== null) {
-              if (prevTransitions === null) {
-                // We only have one instance of the transitions set
-                // because we update it only during the commit phase. We
-                // will create the set on a as needed basis in the commit phase
-                finishedWork.memoizedState.transitions = prevTransitions = new Set();
-              }
+            let prevTransitions = instance.transitions;
+            let rootIncompleteTransitions =
+              rootMemoizedState.incompleteTransitions;
+
+            // We lazily instantiate transition tracing relevant maps
+            // and sets in the commit phase as we need to use them. We only
+            // instantiate them in the fallback phase on an as needed basis
+            if (rootMemoizedState.incompleteTransitions === null) {
+              // TODO(luna): Move this to the fiber root
+              rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
+            }
+            if (instance.pendingMarkers === null) {
+              instance.pendingMarkers = new Set();
+            }
+            if (transitions !== null && prevTransitions === null) {
+              instance.transitions = prevTransitions = new Set();
+            }
 
+            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.
                 prevTransitions.add(transition);
+
+                // Add the root transition's pending suspense boundary set to
+                // the queue's marker set. We will iterate through the marker
+                // set when we toggle state on the suspense boundary and
+                // add or remove the pending suspense boundaries as needed.
+                if (!rootIncompleteTransitions.has(transition)) {
+                  rootIncompleteTransitions.set(transition, new Map());
+                }
+                instance.pendingMarkers.add(
+                  rootIncompleteTransitions.get(transition),
+                );
               });
             }
           }
-        }
 
-        commitTransitionProgress(finishedRoot, finishedWork);
+          commitTransitionProgress(finishedWork);
 
-        finishedWork.updateQueue = null;
+          if (
+            instance.pendingMarkers === null ||
+            instance.pendingMarkers.size === 0
+          ) {
+            finishedWork.updateQueue = null;
+          }
+        }
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index b43188103e6f..3f5ef38424d7 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -10,7 +10,10 @@
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
-import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {
+  Transition,
+  PendingSuspenseBoundaries,
+} from './ReactFiberTracingMarkerComponent.new';
 
 export type OffscreenProps = {|
   // TODO: Pick an API before exposing the Offscreen type. I've chosen an enum
@@ -31,7 +34,6 @@ export type OffscreenState = {|
   // order to unhide the component.
   baseLanes: Lanes,
   cachePool: SpawnedCachePool | null,
-  transitions: Set<Transition> | null,
 |};
 
 export type OffscreenQueue = {|
@@ -40,4 +42,6 @@ export type OffscreenQueue = {|
 
 export type OffscreenInstance = {|
   isHidden: boolean,
+  pendingMarkers: Set<PendingSuspenseBoundaries> | null,
+  transitions: Set<Transition> | null,
 |};
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index d8d275278717..9cdd8064f10c 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -45,8 +45,13 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
-  transitions: 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, PendingSuspenseBoundaries> | null,
 };
 
 function FiberRootNode(
@@ -189,8 +194,7 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: initialCache,
-      transitions: null,
-      pendingSuspenseBoundaries: null,
+      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
@@ -198,8 +202,7 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
-      transitions: null,
-      pendingSuspenseBoundaries: null,
+      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index f9c9e8091c8d..303543cab931 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -45,8 +45,13 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
-  transitions: 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, PendingSuspenseBoundaries> | null,
 };
 
 function FiberRootNode(
@@ -187,8 +192,7 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: initialCache,
-      transitions: null,
-      pendingSuspenseBoundaries: null,
+      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
@@ -196,8 +200,7 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
-      transitions: null,
-      pendingSuspenseBoundaries: null,
+      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 07481c68f94d..9f5648b85b53 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -279,4 +279,202 @@ describe('ReactInteractionTracing', () => {
       ]);
     });
   });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace multiple separate root interactions', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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 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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(page transition, 1000)',
+      ]);
+
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'onTransitionComplete(page transition, 1000, 2000)',
+      ]);
+
+      startTransition(() => showTextFn(), {name: 'text transition'});
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        'Page Two',
+        'onTransitionStart(text transition, 2000)',
+      ]);
+
+      await resolveText('Show Text');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Show Text',
+        'onTransitionComplete(text transition, 2000, 3000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace multiple intertwined root interactions', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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 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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(page transition, 1000)',
+      ]);
+    });
+
+    await act(async () => {
+      startTransition(() => showTextFn(), {name: 'show text'});
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(show text, 2000)',
+      ]);
+    });
+
+    await act(async () => {
+      await resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'onTransitionComplete(page transition, 1000, 3000)',
+      ]);
+
+      await resolveText('Show Text');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Show Text',
+        'onTransitionComplete(show text, 2000, 4000)',
+      ]);
+    });
+  });
 });

From 0f0aca3ab35354040950ac0001fd4c01d70dceb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Sat, 18 Jun 2022 11:01:58 -0400
Subject: [PATCH 1433/1603] Aborting early should not infinitely suspend
 (#24751)

Before this change we weren't calling onError nor onFatalError if you abort
before completing the shell.

This means that the render never completes and hangs.

Aborting early can happen before even creating the stream for AbortSignal,
before rendering starts in Node since there's an setImmediate atm, or
during rendering.
---
 .../ReactDOMFizzServerBrowser-test.js         | 115 +++++++++++++++++-
 .../__tests__/ReactDOMFizzServerNode-test.js  |  49 +++++++-
 .../src/server/ReactDOMFizzServerBrowser.js   |  12 +-
 .../src/server/ReactDOMLegacyServerImpl.js    |   2 +-
 packages/react-server/src/ReactFizzServer.js  |  33 ++---
 5 files changed, 181 insertions(+), 30 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
index af5f3d9b3565..3df7eb79de6c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerBrowser-test.js
@@ -17,7 +17,7 @@ let React;
 let ReactDOMFizzServer;
 let Suspense;
 
-describe('ReactDOMFizzServer', () => {
+describe('ReactDOMFizzServerBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
@@ -209,6 +209,113 @@ describe('ReactDOMFizzServer', () => {
     ]);
   });
 
+  it('should reject if aborting before the shell is complete', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = ReactDOMFizzServer.renderToReadableStream(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    await jest.runAllTimers();
+
+    const theReason = new Error('aborted for reasons');
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = theReason;
+    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 = 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 render was aborted by the server without a reason.',
+    );
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  it('should reject if passing an already aborted signal', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = theReason;
+    controller.abort(theReason);
+
+    const promise = 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;
@@ -226,7 +333,7 @@ describe('ReactDOMFizzServer', () => {
     const stream = await ReactDOMFizzServer.renderToReadableStream(
       <div>
         <Suspense fallback={<div>Loading</div>}>
-          <Wait /> />
+          <Wait />
         </Suspense>
       </div>,
       {
@@ -296,7 +403,7 @@ describe('ReactDOMFizzServer', () => {
     expect(result).toMatchInlineSnapshot(`"<div>${str2049}</div>"`);
   });
 
-  it('Supports custom abort reasons with a string', async () => {
+  it('supports custom abort reasons with a string', async () => {
     const promise = new Promise(r => {});
     function Wait() {
       throw promise;
@@ -337,7 +444,7 @@ describe('ReactDOMFizzServer', () => {
     expect(errors).toEqual(['foobar', 'foobar']);
   });
 
-  it('Supports custom abort reasons with an Error', async () => {
+  it('supports custom abort reasons with an Error', async () => {
     const promise = new Promise(r => {});
     function Wait() {
       throw promise;
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
index f5f85c953148..f3a6aa50c3fd 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServerNode-test.js
@@ -15,7 +15,7 @@ let React;
 let ReactDOMFizzServer;
 let Suspense;
 
-describe('ReactDOMFizzServer', () => {
+describe('ReactDOMFizzServerNode', () => {
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
@@ -166,7 +166,6 @@ describe('ReactDOMFizzServer', () => {
       <div>
         <Throw />
       </div>,
-
       {
         onError(x) {
           reportedErrors.push(x);
@@ -232,7 +231,6 @@ describe('ReactDOMFizzServer', () => {
           <Throw />
         </Suspense>
       </div>,
-
       {
         onError(x) {
           reportedErrors.push(x);
@@ -288,7 +286,6 @@ describe('ReactDOMFizzServer', () => {
           <InfiniteSuspend />
         </Suspense>
       </div>,
-
       {
         onError(x) {
           errors.push(x.message);
@@ -315,6 +312,49 @@ describe('ReactDOMFizzServer', () => {
     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 = [];
@@ -327,7 +367,6 @@ describe('ReactDOMFizzServer', () => {
           </Suspense>
         </Suspense>
       </div>,
-
       {
         onError(x) {
           errors.push(x.message);
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index fc35fdb28679..acfe13e4ebbc 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -96,11 +96,15 @@ function renderToReadableStream(
     );
     if (options && options.signal) {
       const signal = options.signal;
-      const listener = () => {
+      if (signal.aborted) {
         abort(request, (signal: any).reason);
-        signal.removeEventListener('abort', listener);
-      };
-      signal.addEventListener('abort', listener);
+      } else {
+        const listener = () => {
+          abort(request, (signal: any).reason);
+          signal.removeEventListener('abort', listener);
+        };
+        signal.addEventListener('abort', listener);
+      }
     }
     startWork(request);
   });
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
index 27e41b42e43a..504201f3c24f 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -76,7 +76,7 @@ function renderToStringImpl(
   // That way we write only client-rendered boundaries from the start.
   abort(request, abortReason);
   startFlowing(request, destination);
-  if (didFatal) {
+  if (didFatal && fatalError !== abortReason) {
     throw fatalError;
   }
 
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 9e6551d938c0..a8a3fe693207 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -1530,7 +1530,7 @@ function abortTaskSoft(task: Task): void {
   finishedTask(request, boundary, segment);
 }
 
-function abortTask(task: Task, request: Request, reason: mixed): void {
+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;
@@ -1541,35 +1541,30 @@ function abortTask(task: Task, request: Request, reason: mixed): void {
     request.allPendingTasks--;
     // We didn't complete the root so we have nothing to show. We can close
     // the request;
-    if (request.status !== CLOSED) {
-      request.status = CLOSED;
-      if (request.destination !== null) {
-        close(request.destination);
-      }
+    if (request.status !== CLOSING && request.status !== CLOSED) {
+      logRecoverableError(request, error);
+      fatalError(request, error);
     }
   } else {
     boundary.pendingTasks--;
 
     if (!boundary.forceClientRender) {
       boundary.forceClientRender = true;
-      let error =
-        reason === undefined
-          ? new Error('The render was aborted by the server without a reason.')
-          : reason;
       boundary.errorDigest = request.onError(error);
       if (__DEV__) {
         const errorPrefix =
           'The server did not finish this Suspense boundary: ';
+        let errorMessage;
         if (error && typeof error.message === 'string') {
-          error = errorPrefix + error.message;
+          errorMessage = errorPrefix + error.message;
         } else {
           // eslint-disable-next-line react-internal/safe-string-coercion
-          error = errorPrefix + String(error);
+          errorMessage = errorPrefix + String(error);
         }
         const previousTaskInDev = currentTaskInDEV;
         currentTaskInDEV = task;
         try {
-          captureBoundaryErrorDetailsDev(boundary, error);
+          captureBoundaryErrorDetailsDev(boundary, errorMessage);
         } finally {
           currentTaskInDEV = previousTaskInDev;
         }
@@ -1582,7 +1577,7 @@ function abortTask(task: Task, request: Request, reason: mixed): void {
     // 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, reason),
+      abortTask(fallbackTask, request, error),
     );
     boundary.fallbackAbortableTasks.clear();
 
@@ -2178,8 +2173,14 @@ export function startFlowing(request: Request, destination: Destination): void {
 export function abort(request: Request, reason: mixed): void {
   try {
     const abortableTasks = request.abortableTasks;
-    abortableTasks.forEach(task => abortTask(task, request, reason));
-    abortableTasks.clear();
+    if (abortableTasks.size > 0) {
+      const error =
+        reason === undefined
+          ? new Error('The render was aborted by the server without a reason.')
+          : reason;
+      abortableTasks.forEach(task => abortTask(task, request, error));
+      abortableTasks.clear();
+    }
     if (request.destination !== null) {
       flushCompletedQueues(request, request.destination);
     }

From f796fa13ad13ee9939cb7847bfa90ada860068b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Sat, 18 Jun 2022 15:02:11 -0400
Subject: [PATCH 1434/1603] Rename Segment to Task in Flight (#24753)

In Fizz this got split into Task and Segment. We don't have a concept of
Segment in Flight yet because we don't inline multiple segments into one
"Row". We just emit one "Row" for each Segment if something suspends.

This makes Flight non-deterministic atm but that's something we'll want to
address.

Regardless, right now, this is more like a Task than a Segment.
---
 .../react-server/src/ReactFlightServer.js     | 64 +++++++++----------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index d1399ce63ae8..4fc18de3a1dd 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -86,7 +86,7 @@ export type ReactModel =
 
 type ReactModelObject = {+[key: string]: ReactModel};
 
-type Segment = {
+type Task = {
   id: number,
   model: ReactModel,
   ping: () => void,
@@ -101,7 +101,7 @@ export type Request = {
   cache: Map<Function, mixed>,
   nextChunkId: number,
   pendingChunks: number,
-  pingedSegments: Array<Segment>,
+  pingedTasks: Array<Task>,
   completedModuleChunks: Array<Chunk>,
   completedJSONChunks: Array<Chunk>,
   completedErrorChunks: Array<Chunk>,
@@ -132,7 +132,7 @@ export function createRequest(
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
 ): Request {
-  const pingedSegments = [];
+  const pingedTasks = [];
   const request = {
     status: OPEN,
     fatalError: null,
@@ -141,7 +141,7 @@ export function createRequest(
     cache: new Map(),
     nextChunkId: 0,
     pendingChunks: 0,
-    pingedSegments: pingedSegments,
+    pingedTasks: pingedTasks,
     completedModuleChunks: [],
     completedJSONChunks: [],
     completedErrorChunks: [],
@@ -157,8 +157,8 @@ export function createRequest(
   };
   request.pendingChunks++;
   const rootContext = createRootContext(context);
-  const rootSegment = createSegment(request, model, rootContext);
-  pingedSegments.push(rootSegment);
+  const rootTask = createTask(request, model, rootContext);
+  pingedTasks.push(rootTask);
   return request;
 }
 
@@ -251,27 +251,27 @@ function attemptResolveElement(
   );
 }
 
-function pingSegment(request: Request, segment: Segment): void {
-  const pingedSegments = request.pingedSegments;
-  pingedSegments.push(segment);
-  if (pingedSegments.length === 1) {
+function pingTask(request: Request, task: Task): void {
+  const pingedTasks = request.pingedTasks;
+  pingedTasks.push(task);
+  if (pingedTasks.length === 1) {
     scheduleWork(() => performWork(request));
   }
 }
 
-function createSegment(
+function createTask(
   request: Request,
   model: ReactModel,
   context: ContextSnapshot,
-): Segment {
+): Task {
   const id = request.nextChunkId++;
-  const segment = {
+  const task = {
     id,
     model,
     context,
-    ping: () => pingSegment(request, segment),
+    ping: () => pingTask(request, task),
   };
-  return segment;
+  return task;
 }
 
 function serializeByValueID(id: number): string {
@@ -518,12 +518,12 @@ export function resolveModelToJSON(
       }
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-        // Something suspended, we'll need to create a new segment and resolve it later.
+        // Something suspended, we'll need to create a new task and resolve it later.
         request.pendingChunks++;
-        const newSegment = createSegment(request, value, getActiveContext());
-        const ping = newSegment.ping;
+        const newTask = createTask(request, value, getActiveContext());
+        const ping = newTask.ping;
         x.then(ping, ping);
-        return serializeByRefID(newSegment.id);
+        return serializeByRefID(newTask.id);
       } else {
         logRecoverableError(request, x);
         // Something errored. We'll still send everything we have up until this point.
@@ -790,10 +790,10 @@ function emitProviderChunk(
   request.completedJSONChunks.push(processedChunk);
 }
 
-function retrySegment(request: Request, segment: Segment): void {
-  switchContext(segment.context);
+function retryTask(request: Request, task: Task): void {
+  switchContext(task.context);
   try {
-    let value = segment.model;
+    let value = task.model;
     while (
       typeof value === 'object' &&
       value !== null &&
@@ -802,9 +802,9 @@ function retrySegment(request: Request, segment: Segment): void {
       // TODO: Concatenate keys of parents onto children.
       const element: React$Element<any> = (value: any);
       // Attempt to render the server component.
-      // Doing this here lets us reuse this same segment if the next component
+      // Doing this here lets us reuse this same task if the next component
       // also suspends.
-      segment.model = value;
+      task.model = value;
       value = attemptResolveElement(
         element.type,
         element.key,
@@ -812,18 +812,18 @@ function retrySegment(request: Request, segment: Segment): void {
         element.props,
       );
     }
-    const processedChunk = processModelChunk(request, segment.id, value);
+    const processedChunk = processModelChunk(request, task.id, value);
     request.completedJSONChunks.push(processedChunk);
   } catch (x) {
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       // Something suspended again, let's pick it back up later.
-      const ping = segment.ping;
+      const ping = task.ping;
       x.then(ping, ping);
       return;
     } else {
       logRecoverableError(request, x);
       // This errored, we need to serialize this error to the
-      emitErrorChunk(request, segment.id, x);
+      emitErrorChunk(request, task.id, x);
     }
   }
 }
@@ -836,11 +836,11 @@ function performWork(request: Request): void {
   prepareToUseHooksForRequest(request);
 
   try {
-    const pingedSegments = request.pingedSegments;
-    request.pingedSegments = [];
-    for (let i = 0; i < pingedSegments.length; i++) {
-      const segment = pingedSegments[i];
-      retrySegment(request, segment);
+    const pingedTasks = request.pingedTasks;
+    request.pingedTasks = [];
+    for (let i = 0; i < pingedTasks.length; i++) {
+      const task = pingedTasks[i];
+      retryTask(request, task);
     }
     if (request.destination !== null) {
       flushCompletedChunks(request, request.destination);

From 0f216ae31d91f882134707af99d5da9c01e1f603 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Sat, 18 Jun 2022 22:34:31 -0400
Subject: [PATCH 1435/1603] Add entry points for "static" server rendering
 passes (#24752)

This will be used to add optimizations for static server rendering.
---
 packages/react-dom/npm/static.browser.js      |   7 +
 packages/react-dom/npm/static.js              |   3 +
 packages/react-dom/npm/static.node.js         |   7 +
 packages/react-dom/package.json               |  14 +-
 .../src/__tests__/ReactDOMFizzStatic-test.js  | 237 ++++++++++
 .../ReactDOMFizzStaticBrowser-test.js         | 412 +++++++++++++++++
 .../__tests__/ReactDOMFizzStaticNode-test.js  | 421 ++++++++++++++++++
 .../src/server/ReactDOMFizzStaticBrowser.js   |  98 ++++
 .../src/server/ReactDOMFizzStaticNode.js      | 112 +++++
 packages/react-dom/static.browser.js          |  10 +
 packages/react-dom/static.js                  |  10 +
 packages/react-dom/static.node.js             |  13 +
 scripts/rollup/bundles.js                     |  21 +
 scripts/rollup/modules.js                     |   1 +
 scripts/rollup/packaging.js                   |   4 +
 scripts/shared/inlinedHostConfigs.js          |  10 +
 16 files changed, 1379 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-dom/npm/static.browser.js
 create mode 100644 packages/react-dom/npm/static.js
 create mode 100644 packages/react-dom/npm/static.node.js
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
 create mode 100644 packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
 create mode 100644 packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
 create mode 100644 packages/react-dom/src/server/ReactDOMFizzStaticNode.js
 create mode 100644 packages/react-dom/static.browser.js
 create mode 100644 packages/react-dom/static.js
 create mode 100644 packages/react-dom/static.node.js

diff --git a/packages/react-dom/npm/static.browser.js b/packages/react-dom/npm/static.browser.js
new file mode 100644
index 000000000000..7212cd1f6a00
--- /dev/null
+++ b/packages/react-dom/npm/static.browser.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom-static.browser.production.min.js');
+} else {
+  module.exports = require('./cjs/react-dom-static.browser.development.js');
+}
diff --git a/packages/react-dom/npm/static.js b/packages/react-dom/npm/static.js
new file mode 100644
index 000000000000..2e39a9b183d0
--- /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 000000000000..266e8c911670
--- /dev/null
+++ b/packages/react-dom/npm/static.node.js
@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./cjs/react-dom-static.node.production.min.js');
+} else {
+  module.exports = require('./cjs/react-dom-static.node.development.js');
+}
diff --git a/packages/react-dom/package.json b/packages/react-dom/package.json
index 86993240c72c..ca84673501ff 100644
--- a/packages/react-dom/package.json
+++ b/packages/react-dom/package.json
@@ -32,6 +32,9 @@
     "server.js",
     "server.browser.js",
     "server.node.js",
+    "static.js",
+    "static.browser.js",
+    "static.node.js",
     "test-utils.js",
     "unstable_testing.js",
     "cjs/",
@@ -48,6 +51,14 @@
     },
     "./server.browser": "./server.browser.js",
     "./server.node": "./server.node.js",
+    "./static": {
+      "deno": "./static.browser.js",
+      "worker": "./static.browser.js",
+      "browser": "./static.browser.js",
+      "default": "./static.node.js"
+    },
+    "./static.browser": "./static.browser.js",
+    "./static.node": "./static.node.js",
     "./profiling": "./profiling.js",
     "./test-utils": "./test-utils.js",
     "./unstable_testing": "./unstable_testing.js",
@@ -55,7 +66,8 @@
     "./package.json": "./package.json"
   },
   "browser": {
-    "./server.js": "./server.browser.js"
+    "./server.js": "./server.browser.js",
+    "./static.js": "./static.browser.js"
   },
   "browserify": {
     "transform": [
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 000000000000..b4d0158f9ae6
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStatic-test.js
@@ -0,0 +1,237 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let JSDOM;
+let Stream;
+let React;
+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');
+    ReactDOMClient = require('react-dom/client');
+    if (__EXPERIMENTAL__) {
+      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;
+        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;
+  }
+
+  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);
+  }
+
+  // @gate experimental
+  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.prerenderToNodeStreams(<App />);
+
+    resolveText('Hello');
+
+    const result = await promise;
+
+    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>);
+  });
+});
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 000000000000..bd180ae7ce9c
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticBrowser-test.js
@@ -0,0 +1,412 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+// Polyfills for test environment
+global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStream;
+global.TextEncoder = require('util').TextEncoder;
+
+let React;
+let ReactDOMFizzStatic;
+let Suspense;
+
+describe('ReactDOMFizzStaticBrowser', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    if (__EXPERIMENTAL__) {
+      ReactDOMFizzStatic = require('react-dom/static.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 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 experimental
+  it('should call prerender', async () => {
+    const result = await ReactDOMFizzStatic.prerender(<div>hello world</div>);
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  // @gate experimental
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const result = await ReactDOMFizzStatic.prerender(
+      <html>
+        <body>hello world</body>
+      </html>,
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(
+      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+    );
+  });
+
+  // @gate experimental
+  it('should emit bootstrap script src at the end', async () => {
+    const result = await ReactDOMFizzStatic.prerender(<div>hello world</div>, {
+      bootstrapScriptContent: 'INIT();',
+      bootstrapScripts: ['init.js'],
+      bootstrapModules: ['init.mjs'],
+    });
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
+
+  // @gate experimental
+  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.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>"`,
+    );
+  });
+
+  // @gate experimental
+  it('should reject the promise when an error is thrown at the root', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await ReactDOMFizzStatic.prerender(
+        <div>
+          <Throw />
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  // @gate experimental
+  it('should reject the promise when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await 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]);
+  });
+
+  // @gate experimental
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const result = await 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]);
+  });
+
+  // @gate experimental
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const resultPromise = ReactDOMFizzStatic.prerender(
+      <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([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  // @gate experimental
+  it('should reject if aborting before the shell is complete', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = ReactDOMFizzStatic.prerender(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    await jest.runAllTimers();
+
+    const theReason = new Error('aborted for reasons');
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = theReason;
+    controller.abort(theReason);
+
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  // @gate experimental
+  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.prerender(
+      <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 render was aborted by the server without a reason.',
+    );
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  // @gate experimental
+  it('should reject if passing an already aborted signal', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = theReason;
+    controller.abort(theReason);
+
+    const promise = 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 experimental
+  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.prerender(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x);
+        return 'a digest';
+      },
+    });
+
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = 'foobar';
+    controller.abort('foobar');
+
+    await resultPromise;
+
+    expect(errors).toEqual(['foobar', 'foobar']);
+  });
+
+  // @gate experimental
+  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.prerender(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x.message);
+        return 'a digest';
+      },
+    });
+
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = new Error('uh oh');
+    controller.abort(new Error('uh oh'));
+
+    await resultPromise;
+
+    expect(errors).toEqual(['uh oh', 'uh oh']);
+  });
+});
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 000000000000..dfcbf16186f8
--- /dev/null
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzStaticNode-test.js
@@ -0,0 +1,421 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// TODO: This should actually run in `@jest-environment node` but we currently
+// run an old jest that doesn't support AbortController so we use DOM for now.
+
+'use strict';
+
+let React;
+let ReactDOMFizzStatic;
+let Suspense;
+
+describe('ReactDOMFizzStaticNode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    React = require('react');
+    if (__EXPERIMENTAL__) {
+      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));
+    });
+  }
+
+  // @gate experimental
+  it('should call prerenderToNodeStreams', async () => {
+    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+      <div>hello world</div>,
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(`"<div>hello world</div>"`);
+  });
+
+  // @gate experimental
+  it('should emit DOCTYPE at the root of the document', async () => {
+    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+      <html>
+        <body>hello world</body>
+      </html>,
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(
+      `"<!DOCTYPE html><html><body>hello world</body></html>"`,
+    );
+  });
+
+  // @gate experimental
+  it('should emit bootstrap script src at the end', async () => {
+    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+      <div>hello world</div>,
+      {
+        bootstrapScriptContent: 'INIT();',
+        bootstrapScripts: ['init.js'],
+        bootstrapModules: ['init.mjs'],
+      },
+    );
+    const prelude = await readContent(result.prelude);
+    expect(prelude).toMatchInlineSnapshot(
+      `"<div>hello world</div><script>INIT();</script><script src=\\"init.js\\" async=\\"\\"></script><script type=\\"module\\" src=\\"init.mjs\\" async=\\"\\"></script>"`,
+    );
+  });
+
+  // @gate experimental
+  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.prerenderToNodeStreams(
+      <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 experimental
+  it('should reject the promise when an error is thrown at the root', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await ReactDOMFizzStatic.prerenderToNodeStreams(
+        <div>
+          <Throw />
+        </div>,
+        {
+          onError(x) {
+            reportedErrors.push(x);
+          },
+        },
+      );
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theError);
+    expect(reportedErrors).toEqual([theError]);
+  });
+
+  // @gate experimental
+  it('should reject the promise when an error is thrown inside a fallback', async () => {
+    const reportedErrors = [];
+    let caughtError = null;
+    try {
+      await ReactDOMFizzStatic.prerenderToNodeStreams(
+        <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 experimental
+  it('should not error the stream when an error is thrown inside suspense boundary', async () => {
+    const reportedErrors = [];
+    const result = await ReactDOMFizzStatic.prerenderToNodeStreams(
+      <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 experimental
+  it('should be able to complete by aborting even if the promise never resolves', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const resultPromise = ReactDOMFizzStatic.prerenderToNodeStreams(
+      <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([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  // @gate experimental
+  it('should reject if aborting before the shell is complete', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const promise = ReactDOMFizzStatic.prerenderToNodeStreams(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      {
+        signal: controller.signal,
+        onError(x) {
+          errors.push(x.message);
+        },
+      },
+    );
+
+    await jest.runAllTimers();
+
+    const theReason = new Error('aborted for reasons');
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = theReason;
+    controller.abort(theReason);
+
+    let caughtError = null;
+    try {
+      await promise;
+    } catch (error) {
+      caughtError = error;
+    }
+    expect(caughtError).toBe(theReason);
+    expect(errors).toEqual(['aborted for reasons']);
+  });
+
+  // @gate experimental
+  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.prerenderToNodeStreams(
+      <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 render was aborted by the server without a reason.',
+    );
+    expect(errors).toEqual([
+      'The render was aborted by the server without a reason.',
+    ]);
+  });
+
+  // @gate experimental
+  it('should reject if passing an already aborted signal', async () => {
+    const errors = [];
+    const controller = new AbortController();
+    const theReason = new Error('aborted for reasons');
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = theReason;
+    controller.abort(theReason);
+
+    const promise = ReactDOMFizzStatic.prerenderToNodeStreams(
+      <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 experimental
+  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.prerenderToNodeStreams(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x);
+        return 'a digest';
+      },
+    });
+
+    await jest.runAllTimers();
+
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = 'foobar';
+    controller.abort('foobar');
+
+    await resultPromise;
+
+    expect(errors).toEqual(['foobar', 'foobar']);
+  });
+
+  // @gate experimental
+  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.prerenderToNodeStreams(<App />, {
+      signal: controller.signal,
+      onError(x) {
+        errors.push(x.message);
+        return 'a digest';
+      },
+    });
+
+    await jest.runAllTimers();
+
+    // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+    // The abort call itself should set this property but since we are testing in node we
+    // set it here manually
+    controller.signal.reason = new Error('uh oh');
+    controller.abort(new Error('uh oh'));
+
+    await resultPromise;
+
+    expect(errors).toEqual(['uh oh', 'uh oh']);
+  });
+});
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
new file mode 100644
index 000000000000..989d2de31ba0
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -0,0 +1,98 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerFormatConfig';
+
+type Options = {|
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string>,
+  bootstrapModules?: Array<string>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+|};
+
+type StaticResult = {|
+  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) {
+            startFlowing(request, controller);
+          },
+        },
+        // $FlowFixMe size() methods are not allowed on byte streams.
+        {highWaterMark: 0},
+      );
+
+      const result = {
+        prelude: stream,
+      };
+      resolve(result);
+    }
+    const request = createRequest(
+      children,
+      createResponseState(
+        options ? options.identifierPrefix : undefined,
+        undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : 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);
+  });
+}
+
+export {prerender, 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 000000000000..e799c21a8b78
--- /dev/null
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {ReactNodeList} from 'shared/ReactTypes';
+import {Writable, Readable} from 'stream';
+
+import ReactVersion from 'shared/ReactVersion';
+
+import {
+  createRequest,
+  startWork,
+  startFlowing,
+  abort,
+} from 'react-server/src/ReactFizzServer';
+
+import {
+  createResponseState,
+  createRootFormatContext,
+} from './ReactDOMServerFormatConfig';
+
+type Options = {|
+  identifierPrefix?: string,
+  namespaceURI?: string,
+  bootstrapScriptContent?: string,
+  bootstrapScripts?: Array<string>,
+  bootstrapModules?: Array<string>,
+  progressiveChunkSize?: number,
+  signal?: AbortSignal,
+  onError?: (error: mixed) => ?string,
+|};
+
+type StaticResult = {|
+  prelude: Readable,
+|};
+
+function createFakeWritable(readable): 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 prerenderToNodeStreams(
+  children: ReactNodeList,
+  options?: Options,
+): Promise<StaticResult> {
+  return new Promise((resolve, reject) => {
+    const onFatalError = reject;
+
+    function onAllReady() {
+      const readable = new Readable({
+        read() {
+          startFlowing(request, writable);
+        },
+      });
+      const writable = createFakeWritable(readable);
+
+      const result = {
+        prelude: readable,
+      };
+      resolve(result);
+    }
+
+    const request = createRequest(
+      children,
+      createResponseState(
+        options ? options.identifierPrefix : undefined,
+        undefined,
+        options ? options.bootstrapScriptContent : undefined,
+        options ? options.bootstrapScripts : undefined,
+        options ? options.bootstrapModules : 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);
+  });
+}
+
+export {prerenderToNodeStreams, ReactVersion as version};
diff --git a/packages/react-dom/static.browser.js b/packages/react-dom/static.browser.js
new file mode 100644
index 000000000000..440740105f2f
--- /dev/null
+++ b/packages/react-dom/static.browser.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {prerender, version} from './src/server/ReactDOMFizzStaticBrowser';
diff --git a/packages/react-dom/static.js b/packages/react-dom/static.js
new file mode 100644
index 000000000000..21f347feb164
--- /dev/null
+++ b/packages/react-dom/static.js
@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export * from './static.node';
diff --git a/packages/react-dom/static.node.js b/packages/react-dom/static.node.js
new file mode 100644
index 000000000000..00bcfa89c02c
--- /dev/null
+++ b/packages/react-dom/static.node.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export {
+  prerenderToNodeStreams,
+  version,
+} from './src/server/ReactDOMFizzStaticNode';
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 0c8a3b64030c..68407ef01183 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -330,6 +330,27 @@ const bundles = [
     externals: ['react'],
   },
 
+  /******* React DOM Fizz Static *******/
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
+    moduleType: RENDERER,
+    entry: 'react-dom/static.browser',
+    global: 'ReactDOMStatic',
+    minifyWithProdErrorCodes: true,
+    wrapWithModuleBoundaries: false,
+    externals: ['react'],
+  },
+  {
+    bundleTypes: __EXPERIMENTAL__ ? [NODE_DEV, NODE_PROD] : [],
+    moduleType: RENDERER,
+    entry: 'react-dom/static.node',
+    name: 'react-dom-static.node',
+    global: 'ReactDOMStatic',
+    minifyWithProdErrorCodes: false,
+    wrapWithModuleBoundaries: false,
+    externals: ['react', 'util', 'stream'],
+  },
+
   /******* React Server DOM Webpack Writer *******/
   {
     bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
diff --git a/scripts/rollup/modules.js b/scripts/rollup/modules.js
index 2461e28850cc..68fa90bc3b91 100644
--- a/scripts/rollup/modules.js
+++ b/scripts/rollup/modules.js
@@ -12,6 +12,7 @@ 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,
diff --git a/scripts/rollup/packaging.js b/scripts/rollup/packaging.js
index 592314c39424..bd66d0b63473 100644
--- a/scripts/rollup/packaging.js
+++ b/scripts/rollup/packaging.js
@@ -153,6 +153,7 @@ function filterOutEntrypoints(name) {
   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');
   }
@@ -189,6 +190,9 @@ function filterOutEntrypoints(name) {
           delete exportsJSON['./' + filename.replace(/\.js$/, '')];
         }
       }
+      if (browserJSON) {
+        delete browserJSON['./' + filename];
+      }
     }
 
     // We only export the source directory so Jest and Rollup can access them
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index eb0eef910983..458c5410eaf1 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -13,13 +13,19 @@ module.exports = [
       'react-dom',
       'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerNode.js',
+      'react-dom/static.node',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack',
     ],
     paths: [
       'react-dom',
       'react-dom/client',
+      'react-dom/server',
+      'react-dom/server.node',
+      'react-dom/static',
+      'react-dom/static.node',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
+      'react-dom/src/server/ReactDOMFizzStaticNode.js',
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer',
       'react-server-dom-webpack/writer.node.server',
@@ -40,14 +46,18 @@ module.exports = [
       'react-dom',
       'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js',
+      'react-dom/static.browser',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack',
     ],
     paths: [
       'react-dom',
       'react-dom/client',
+      'react-dom/server.browser',
+      'react-dom/static.browser',
       'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
+      'react-dom/src/server/ReactDOMFizzStaticBrowser.js',
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server

From 56389e81ffe17c97f3137f18cc6446a4b2c956de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Sun, 19 Jun 2022 11:05:41 -0400
Subject: [PATCH 1436/1603] Abort Flight (#24754)

Add aborting to the Flight Server. This encodes the reason as an "error"
row that gets thrown client side. These are still exposed in prod which
is a follow up we'll still have to do to encode them as digests instead.

The error is encoded once and then referenced by each row that needs to
be updated.
---
 .../ReactFlightDOMRelayServerHostConfig.js    |  8 ++
 .../src/ReactFlightDOMServerBrowser.js        | 18 ++++-
 .../src/ReactFlightDOMServerNode.js           |  5 ++
 .../src/__tests__/ReactFlightDOM-test.js      | 76 ++++++++++++++++---
 .../__tests__/ReactFlightDOMBrowser-test.js   | 74 +++++++++++++++++-
 .../ReactFlightNativeRelayServerHostConfig.js |  8 ++
 .../react-server/src/ReactFlightServer.js     | 67 +++++++++++++++-
 .../src/ReactFlightServerConfigStream.js      | 10 +++
 8 files changed, 250 insertions(+), 16 deletions(-)

diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 8fcd823204cb..0ec5b2cf0dc4 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -117,6 +117,14 @@ export function processModelChunk(
   return ['J', id, json];
 }
 
+export function processReferenceChunk(
+  request: Request,
+  id: number,
+  reference: string,
+): Chunk {
+  return ['J', id, reference];
+}
+
 export function processModuleChunk(
   request: Request,
   id: number,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index bfd47cc40a69..93d047e4a043 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -15,12 +15,14 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  abort,
 } from 'react-server/src/ReactFlightServer';
 
 type Options = {
-  onError?: (error: mixed) => void,
-  context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
+  signal?: AbortSignal,
+  context?: Array<[string, ServerContextJSONValue]>,
+  onError?: (error: mixed) => void,
 };
 
 function renderToReadableStream(
@@ -35,6 +37,18 @@ function renderToReadableStream(
     options ? options.context : undefined,
     options ? options.identifierPrefix : 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);
+    }
+  }
   const stream = new ReadableStream(
     {
       type: 'bytes',
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 6bb32203baff..69fa772a304a 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -16,6 +16,7 @@ import {
   createRequest,
   startWork,
   startFlowing,
+  abort,
 } from 'react-server/src/ReactFlightServer';
 
 function createDrainHandler(destination, request) {
@@ -29,6 +30,7 @@ type Options = {
 };
 
 type PipeableStream = {|
+  abort(reason: mixed): void,
   pipe<T: Writable>(destination: T): T,
 |};
 
@@ -58,6 +60,9 @@ function renderToPipeableStream(
       destination.on('drain', createDrainHandler(destination, request));
       return destination;
     },
+    abort(reason: mixed) {
+      abort(request, reason);
+    },
   };
 }
 
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 4ca3f903e779..b68a9b28284b 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -30,6 +30,7 @@ let React;
 let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
+let Suspense;
 
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
@@ -42,6 +43,7 @@ describe('ReactFlightDOM', () => {
     ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
+    Suspense = React.Suspense;
   });
 
   function getTestStream() {
@@ -92,6 +94,11 @@ describe('ReactFlightDOM', () => {
     }
   }
 
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
   it('should resolve HTML using Node streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -133,8 +140,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should resolve the root', async () => {
-    const {Suspense} = React;
-
     // Model
     function Text({children}) {
       return <span>{children}</span>;
@@ -184,8 +189,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should not get confused by $', async () => {
-    const {Suspense} = React;
-
     // Model
     function RootModel() {
       return {text: '$1'};
@@ -220,8 +223,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should not get confused by @', async () => {
-    const {Suspense} = React;
-
     // Model
     function RootModel() {
       return {text: '@div'};
@@ -257,7 +258,6 @@ describe('ReactFlightDOM', () => {
 
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
-    const {Suspense} = React;
 
     // Client Components
 
@@ -460,8 +460,6 @@ describe('ReactFlightDOM', () => {
   });
 
   it('should preserve state of client components on refetch', async () => {
-    const {Suspense} = React;
-
     // Client
 
     function Page({response}) {
@@ -545,4 +543,64 @@ describe('ReactFlightDOM', () => {
     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 = [];
+
+    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 {writable, readable} = getTestStream();
+    const {pipe, abort} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      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(async () => {
+      abort('for reasons');
+    });
+    expect(container.innerHTML).toBe('<p>Error: for reasons</p>');
+
+    expect(reportedErrors).toEqual(['for reasons']);
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 3337b19d11fc..e2cc4989c8ee 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -27,6 +27,7 @@ let ReactDOMClient;
 let ReactDOMServer;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
+let Suspense;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
@@ -39,6 +40,7 @@ describe('ReactFlightDOMBrowser', () => {
     ReactDOMServer = require('react-dom/server.browser');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
+    Suspense = React.Suspense;
   });
 
   function moduleReference(moduleExport) {
@@ -108,6 +110,11 @@ describe('ReactFlightDOMBrowser', () => {
     return [DelayedText, _resolve, _reject];
   }
 
+  const theInfinitePromise = new Promise(() => {});
+  function InfiniteSuspend() {
+    throw theInfinitePromise;
+  }
+
   it('should resolve HTML using W3C streams', async () => {
     function Text({children}) {
       return <span>{children}</span>;
@@ -180,7 +187,6 @@ describe('ReactFlightDOMBrowser', () => {
 
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
-    const {Suspense} = React;
 
     // Client Components
 
@@ -356,8 +362,6 @@ describe('ReactFlightDOMBrowser', () => {
   });
 
   it('should close the stream upon completion when rendering to W3C streams', async () => {
-    const {Suspense} = React;
-
     // Model
     function Text({children}) {
       return children;
@@ -512,4 +516,68 @@ describe('ReactFlightDOMBrowser', () => {
     const result = await readResult(ssrStream);
     expect(result).toEqual('<span>Client Component</span>');
   });
+
+  it('should be able to complete after aborting and throw the reason client-side', async () => {
+    const reportedErrors = [];
+
+    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 = ReactServerDOMWriter.renderToReadableStream(
+      <div>
+        <InfiniteSuspend />
+      </div>,
+      webpackMap,
+      {
+        signal: controller.signal,
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      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(async () => {
+      // @TODO this is a hack to work around lack of support for abortSignal.reason in node
+      // The abort call itself should set this property but since we are testing in node we
+      // set it here manually
+      controller.signal.reason = 'for reasons';
+      controller.abort('for reasons');
+    });
+    expect(container.innerHTML).toBe('<p>Error: for reasons</p>');
+
+    expect(reportedErrors).toEqual(['for reasons']);
+  });
 });
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index c139769fe453..5c9360701ab8 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -114,6 +114,14 @@ export function processModelChunk(
   return ['J', id, json];
 }
 
+export function processReferenceChunk(
+  request: Request,
+  id: number,
+  reference: string,
+): Chunk {
+  return ['J', id, reference];
+}
+
 export function processModuleChunk(
   request: Request,
   id: number,
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 4fc18de3a1dd..814f8f1a4f9d 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -34,6 +34,7 @@ import {
   processProviderChunk,
   processSymbolChunk,
   processErrorChunk,
+  processReferenceChunk,
   resolveModuleMetaData,
   getModuleKey,
   isModuleReference,
@@ -86,8 +87,14 @@ export type ReactModel =
 
 type ReactModelObject = {+[key: string]: ReactModel};
 
+const PENDING = 0;
+const COMPLETED = 1;
+const ABORTED = 3;
+const ERRORED = 4;
+
 type Task = {
   id: number,
+  status: 0 | 1 | 3 | 4,
   model: ReactModel,
   ping: () => void,
   context: ContextSnapshot,
@@ -101,6 +108,7 @@ export type Request = {
   cache: Map<Function, mixed>,
   nextChunkId: number,
   pendingChunks: number,
+  abortableTasks: Set<Task>,
   pingedTasks: Array<Task>,
   completedModuleChunks: Array<Chunk>,
   completedJSONChunks: Array<Chunk>,
@@ -132,6 +140,7 @@ export function createRequest(
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
 ): Request {
+  const abortSet: Set<Task> = new Set();
   const pingedTasks = [];
   const request = {
     status: OPEN,
@@ -141,6 +150,7 @@ export function createRequest(
     cache: new Map(),
     nextChunkId: 0,
     pendingChunks: 0,
+    abortableTasks: abortSet,
     pingedTasks: pingedTasks,
     completedModuleChunks: [],
     completedJSONChunks: [],
@@ -157,7 +167,7 @@ export function createRequest(
   };
   request.pendingChunks++;
   const rootContext = createRootContext(context);
-  const rootTask = createTask(request, model, rootContext);
+  const rootTask = createTask(request, model, rootContext, abortSet);
   pingedTasks.push(rootTask);
   return request;
 }
@@ -263,14 +273,17 @@ function createTask(
   request: Request,
   model: ReactModel,
   context: ContextSnapshot,
+  abortSet: Set<Task>,
 ): Task {
   const id = request.nextChunkId++;
   const task = {
     id,
+    status: PENDING,
     model,
     context,
     ping: () => pingTask(request, task),
   };
+  abortSet.add(task);
   return task;
 }
 
@@ -520,7 +533,12 @@ export function resolveModelToJSON(
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // Something suspended, we'll need to create a new task and resolve it later.
         request.pendingChunks++;
-        const newTask = createTask(request, value, getActiveContext());
+        const newTask = createTask(
+          request,
+          value,
+          getActiveContext(),
+          request.abortableTasks,
+        );
         const ping = newTask.ping;
         x.then(ping, ping);
         return serializeByRefID(newTask.id);
@@ -791,6 +809,10 @@ function emitProviderChunk(
 }
 
 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;
+  }
   switchContext(task.context);
   try {
     let value = task.model;
@@ -814,6 +836,8 @@ function retryTask(request: Request, task: Task): void {
     }
     const processedChunk = processModelChunk(request, task.id, value);
     request.completedJSONChunks.push(processedChunk);
+    request.abortableTasks.delete(task);
+    task.status = COMPLETED;
   } catch (x) {
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
       // Something suspended again, let's pick it back up later.
@@ -821,6 +845,8 @@ function retryTask(request: Request, task: Task): void {
       x.then(ping, ping);
       return;
     } else {
+      request.abortableTasks.delete(task);
+      task.status = ERRORED;
       logRecoverableError(request, x);
       // This errored, we need to serialize this error to the
       emitErrorChunk(request, task.id, x);
@@ -855,6 +881,15 @@ function performWork(request: Request): void {
   }
 }
 
+function abortTask(task: Task, request: Request, errorId: number): void {
+  task.status = ABORTED;
+  // 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 = processReferenceChunk(request, task.id, ref);
+  request.completedJSONChunks.push(processedChunk);
+}
+
 function flushCompletedChunks(
   request: Request,
   destination: Destination,
@@ -942,6 +977,34 @@ export function startFlowing(request: Request, destination: Destination): void {
   }
 }
 
+// This is called to early terminate a request. It creates an error at all pending tasks.
+export function abort(request: Request, reason: mixed): void {
+  try {
+    const abortableTasks = request.abortableTasks;
+    if (abortableTasks.size > 0) {
+      // We have tasks to abort. We'll emit one error row and then emit a reference
+      // to that row from every row that's still remaining.
+      const error =
+        reason === undefined
+          ? new Error('The render was aborted by the server without a reason.')
+          : reason;
+
+      logRecoverableError(request, error);
+      request.pendingChunks++;
+      const errorId = request.nextChunkId++;
+      emitErrorChunk(request, errorId, error);
+      abortableTasks.forEach(task => abortTask(task, request, errorId));
+      abortableTasks.clear();
+    }
+    if (request.destination !== null) {
+      flushCompletedChunks(request, request.destination);
+    }
+  } catch (error) {
+    logRecoverableError(request, error);
+    fatalError(request, error);
+  }
+}
+
 function importServerContexts(
   contexts?: Array<[string, ServerContextJSONValue]>,
 ) {
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index 08e9cbff2f50..b9772ef6f2ea 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -99,6 +99,16 @@ export function processModelChunk(
   return stringToChunk(row);
 }
 
+export function processReferenceChunk(
+  request: Request,
+  id: number,
+  reference: string,
+): Chunk {
+  const json = stringify(reference);
+  const row = serializeRowHeader('J', id) + json + '\n';
+  return stringToChunk(row);
+}
+
 export function processModuleChunk(
   request: Request,
   id: number,

From d6255f0ac4d3282272165a68f64ab3444d6790d3 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Mon, 20 Jun 2022 15:06:40 -0400
Subject: [PATCH 1437/1603] [DevTool] fix build-for-devtools script (#24764)

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 59aed94e1cf9..2e8445521b0a 100644
--- a/package.json
+++ b/package.json
@@ -108,7 +108,7 @@
   "scripts": {
     "build": "node ./scripts/rollup/build.js",
     "build-combined": "node ./scripts/rollup/build-all-release-channels.js",
-    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/unstable_testing,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
+    "build-for-devtools": "cross-env RELEASE_CHANNEL=experimental yarn build react/index,react/jsx,react-dom/index,react-dom/unstable_testing,react-dom/test-utils,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --type=NODE && cp -r ./build/node_modules build/oss-experimental/",
     "build-for-devtools-dev": "yarn build-for-devtools --type=NODE_DEV",
     "build-for-devtools-prod": "yarn build-for-devtools --type=NODE_PROD",
     "linc": "node ./scripts/tasks/linc.js",

From cf665c4b73a28b034c8173f4d929205fb12d2d2e Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 20 Jun 2022 20:08:54 -0400
Subject: [PATCH 1438/1603] [DevTools] Refactor incompleteTransitions field
 from Root Fiber memoized state to FiberRoot (#24765)

`incompleteTransitions` persists across renders, so it should be part of the `fiber.stateNode` (ie FiberRoot) rather than `fiber.memoizedState`
---
 .../src/ReactFiberBeginWork.new.js            |  1 -
 .../src/ReactFiberBeginWork.old.js            |  1 -
 .../src/ReactFiberCommitWork.new.js           | 31 +++++++++----------
 .../src/ReactFiberCommitWork.old.js           | 31 +++++++++----------
 .../src/ReactFiberRoot.new.js                 | 14 +--------
 .../src/ReactFiberRoot.old.js                 | 14 +--------
 .../src/ReactInternalTypes.js                 | 10 ++++++
 7 files changed, 42 insertions(+), 60 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 385f5d3b0074..0d575e14332e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
-      incompleteTransitions: nextState.incompleteTransitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
     // `baseState` can always be the last state because the root doesn't
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 8be41d4b19e8..9bbaf40bd1ad 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -1317,7 +1317,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
       element: nextChildren,
       isDehydrated: false,
       cache: nextState.cache,
-      incompleteTransitions: nextState.incompleteTransitions,
     };
     const updateQueue: UpdateQueue<RootState> = (workInProgress.updateQueue: any);
     // `baseState` can always be the last state because the root doesn't
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 641063bc91fa..6f983e8d249d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
-        const state = finishedWork.memoizedState;
-        let incompleteTransitions = state.incompleteTransitions;
+        const root = finishedWork.stateNode;
+        let incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (state.incompleteTransitions === null) {
-            state.incompleteTransitions = incompleteTransitions = new Map();
+          if (incompleteTransitions === null) {
+            root.incompleteTransitions = incompleteTransitions = new Map();
           }
 
           committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
           incompleteTransitions === null ||
           incompleteTransitions.size === 0
         ) {
-          state.incompleteTransitions = null;
+          root.incompleteTransitions = null;
         }
       }
       break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
         const queue = (finishedWork.updateQueue: any);
-        const rootMemoizedState = finishedRoot.current.memoizedState;
         const instance = finishedWork.stateNode;
 
         if (queue !== null) {
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions =
-              rootMemoizedState.incompleteTransitions;
+            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
 
             // We lazily instantiate transition tracing relevant maps
             // and sets in the commit phase as we need to use them. We only
             // instantiate them in the fallback phase on an as needed basis
-            if (rootMemoizedState.incompleteTransitions === null) {
-              // TODO(luna): Move this to the fiber root
-              rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
+            if (rootIncompleteTransitions === null) {
+              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
             }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
                 // the queue's marker set. We will iterate through the marker
                 // set when we toggle state on the suspense boundary and
                 // add or remove the pending suspense boundaries as needed.
-                if (!rootIncompleteTransitions.has(transition)) {
-                  rootIncompleteTransitions.set(transition, new Map());
+                if (rootIncompleteTransitions !== null) {
+                  if (!rootIncompleteTransitions.has(transition)) {
+                    rootIncompleteTransitions.set(transition, new Map());
+                  }
+                  instance.pendingMarkers.add(
+                    rootIncompleteTransitions.get(transition),
+                  );
                 }
-                instance.pendingMarkers.add(
-                  rootIncompleteTransitions.get(transition),
-                );
               });
             }
           }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 00ed3bfe50a5..147a25d74a80 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2809,12 +2809,12 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
-        const state = finishedWork.memoizedState;
-        let incompleteTransitions = state.incompleteTransitions;
+        const root = finishedWork.stateNode;
+        let incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (state.incompleteTransitions === null) {
-            state.incompleteTransitions = incompleteTransitions = new Map();
+          if (incompleteTransitions === null) {
+            root.incompleteTransitions = incompleteTransitions = new Map();
           }
 
           committedTransitions.forEach(transition => {
@@ -2849,7 +2849,7 @@ function commitPassiveMountOnFiber(
           incompleteTransitions === null ||
           incompleteTransitions.size === 0
         ) {
-          state.incompleteTransitions = null;
+          root.incompleteTransitions = null;
         }
       }
       break;
@@ -2889,22 +2889,19 @@ function commitPassiveMountOnFiber(
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
         const queue = (finishedWork.updateQueue: any);
-        const rootMemoizedState = finishedRoot.current.memoizedState;
         const instance = finishedWork.stateNode;
 
         if (queue !== null) {
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions =
-              rootMemoizedState.incompleteTransitions;
+            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
 
             // We lazily instantiate transition tracing relevant maps
             // and sets in the commit phase as we need to use them. We only
             // instantiate them in the fallback phase on an as needed basis
-            if (rootMemoizedState.incompleteTransitions === null) {
-              // TODO(luna): Move this to the fiber root
-              rootMemoizedState.incompleteTransitions = rootIncompleteTransitions = new Map();
+            if (rootIncompleteTransitions === null) {
+              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
             }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
@@ -2924,12 +2921,14 @@ function commitPassiveMountOnFiber(
                 // the queue's marker set. We will iterate through the marker
                 // set when we toggle state on the suspense boundary and
                 // add or remove the pending suspense boundaries as needed.
-                if (!rootIncompleteTransitions.has(transition)) {
-                  rootIncompleteTransitions.set(transition, new Map());
+                if (rootIncompleteTransitions !== null) {
+                  if (!rootIncompleteTransitions.has(transition)) {
+                    rootIncompleteTransitions.set(transition, new Map());
+                  }
+                  instance.pendingMarkers.add(
+                    rootIncompleteTransitions.get(transition),
+                  );
                 }
-                instance.pendingMarkers.add(
-                  rootIncompleteTransitions.get(transition),
-                );
               });
             }
           }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 9cdd8064f10c..d8ac576f4fd4 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -15,10 +15,6 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
-import type {
-  PendingSuspenseBoundaries,
-  Transition,
-} from './ReactFiberTracingMarkerComponent.new';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
@@ -45,13 +41,6 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  // 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, PendingSuspenseBoundaries> | null,
 };
 
 function FiberRootNode(
@@ -109,6 +98,7 @@ function FiberRootNode(
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
+    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -194,7 +184,6 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: initialCache,
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
@@ -202,7 +191,6 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 303543cab931..de2a9bd2cf80 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -15,10 +15,6 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
-import type {
-  PendingSuspenseBoundaries,
-  Transition,
-} from './ReactFiberTracingMarkerComponent.old';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
@@ -45,13 +41,6 @@ export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-  // 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, PendingSuspenseBoundaries> | null,
 };
 
 function FiberRootNode(
@@ -107,6 +96,7 @@ function FiberRootNode(
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
+    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
@@ -192,7 +182,6 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: initialCache,
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   } else {
@@ -200,7 +189,6 @@ export function createFiberRoot(
       element: initialChildren,
       isDehydrated: hydrate,
       cache: (null: any), // not enabled yet
-      incompleteTransitions: null,
     };
     uninitializedFiber.memoizedState = initialState;
   }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index c6a7ed58b0b0..abf8a98e99ff 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -26,6 +26,9 @@ import type {Lane, Lanes, LaneMap} from './ReactFiberLane.old';
 import type {RootTag} from './ReactRootTags';
 import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
+// Doing this because there's a merge conflict because of the way sync-reconciler-fork
+// is implemented
+import type {PendingSuspenseBoundaries} from './ReactFiberTracingMarkerComponent.new';
 import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
 
@@ -326,6 +329,13 @@ export type TransitionTracingCallbacks = {
 type TransitionTracingOnlyFiberRootProperties = {|
   transitionCallbacks: null | TransitionTracingCallbacks,
   transitionLanes: Array<Array<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, PendingSuspenseBoundaries> | null,
 |};
 
 // Exported FiberRoot type includes all properties,

From 9abe745aa748271be170c67cc43b09f62ca5f2dc Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 23 Jun 2022 14:19:23 -0400
Subject: [PATCH 1439/1603] [DevTools][Timeline Profiler] Component Stacks
 Backend (#24776)

This PR adds a component stack field to the `schedule-state-update` event. The algorithm is as follows:
* During profiling, whenever a state update happens collect the parents of the fiber that caused the state update and store it in a map
* After profiling finishes, post process the `schedule-state-update` event and using the parent fibers, generate the component stack by using`describeFiber`, a function that uses error throwing to get the location of the component by calling the component without props.

---

Co-authored-by: Blake Friedman <blake.friedman@gmail.com>
---
 .../src/__tests__/TimelineProfiler-test.js    | 89 +++++++++++++++++++
 .../src/__tests__/preprocessData-test.js      | 20 +++++
 .../backend/DevToolsFiberComponentStack.js    |  2 +-
 .../src/backend/profilingHooks.js             | 53 ++++++++++-
 .../src/backend/renderer.js                   |  2 +
 packages/react-devtools-timeline/src/types.js |  1 +
 packages/shared/ReactComponentStackFrame.js   |  3 +
 7 files changed, 167 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
index 107192a4770a..e5d0962db01b 100644
--- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -9,6 +9,15 @@
 
 'use strict';
 
+function normalizeCodeLocInfo(str) {
+  return (
+    typeof str === 'string' &&
+    str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
+      return '\n    in ' + name + ' (at **)';
+    })
+  );
+}
+
 describe('Timeline profiler', () => {
   let React;
   let ReactDOMClient;
@@ -1175,6 +1184,18 @@ describe('Timeline profiler', () => {
         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;
@@ -1256,6 +1277,8 @@ describe('Timeline profiler', () => {
           Array [
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000000000100",
               "timestamp": 10,
               "type": "schedule-state-update",
@@ -1263,6 +1286,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000001000000",
               "timestamp": 10,
               "type": "schedule-state-update",
@@ -1270,6 +1295,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000001000000",
               "timestamp": 10,
               "type": "schedule-state-update",
@@ -1277,6 +1304,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000000010000",
               "timestamp": 10,
               "type": "schedule-state-update",
@@ -1614,6 +1643,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000000000001",
               "timestamp": 20,
               "type": "schedule-state-update",
@@ -1741,6 +1772,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000000010000",
               "timestamp": 10,
               "type": "schedule-state-update",
@@ -1872,6 +1905,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000000000001",
               "timestamp": 21,
               "type": "schedule-state-update",
@@ -1934,6 +1969,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000000010000",
               "timestamp": 21,
               "type": "schedule-state-update",
@@ -1982,6 +2019,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "Example",
+              "componentStack": "
+              in Example (at **)",
               "lanes": "0b0000000000000000000000000010000",
               "timestamp": 20,
               "type": "schedule-state-update",
@@ -2065,6 +2104,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "ErrorBoundary",
+              "componentStack": "
+              in ErrorBoundary (at **)",
               "lanes": "0b0000000000000000000000000000001",
               "timestamp": 20,
               "type": "schedule-state-update",
@@ -2177,6 +2218,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "ErrorBoundary",
+              "componentStack": "
+              in ErrorBoundary (at **)",
               "lanes": "0b0000000000000000000000000000001",
               "timestamp": 30,
               "type": "schedule-state-update",
@@ -2441,6 +2484,52 @@ describe('Timeline profiler', () => {
           }
         `);
       });
+
+      it('should generate component stacks for state update', async () => {
+        function CommponentWithChildren({initialRender}) {
+          Scheduler.unstable_yieldValue('Render ComponentWithChildren');
+          return <Child initialRender={initialRender} />;
+        }
+
+        function Child({initialRender}) {
+          const [didRender, setDidRender] = React.useState(initialRender);
+          if (!didRender) {
+            setDidRender(true);
+          }
+          Scheduler.unstable_yieldValue('Render Child');
+          return null;
+        }
+
+        renderRootHelper(<CommponentWithChildren initialRender={false} />);
+
+        expect(Scheduler).toFlushAndYield([
+          'Render ComponentWithChildren',
+          'Render Child',
+          'Render Child',
+        ]);
+
+        const timelineData = stopProfilingAndGetTimelineData();
+        expect(timelineData.schedulingEvents).toMatchInlineSnapshot(`
+          Array [
+            Object {
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-render",
+              "warning": null,
+            },
+            Object {
+              "componentName": "Child",
+              "componentStack": "
+              in Child (at **)
+              in CommponentWithChildren (at **)",
+              "lanes": "0b0000000000000000000000000010000",
+              "timestamp": 10,
+              "type": "schedule-state-update",
+              "warning": null,
+            },
+          ]
+        `);
+      });
     });
 
     describe('when not profiling', () => {
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index 4257c925ef33..e4ef96e0756f 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -9,6 +9,15 @@
 
 'use strict';
 
+function normalizeCodeLocInfo(str) {
+  return (
+    typeof str === 'string' &&
+    str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
+      return '\n    in ' + name + ' (at **)';
+    })
+  );
+}
+
 describe('Timeline profiler', () => {
   let React;
   let ReactDOM;
@@ -2134,6 +2143,15 @@ describe('Timeline profiler', () => {
       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(`
         Object {
           "batchUIDToMeasuresMap": Map {
@@ -2415,6 +2433,8 @@ describe('Timeline profiler', () => {
             },
             Object {
               "componentName": "App",
+              "componentStack": "
+            in App (at **)",
               "lanes": "0b0000000000000000000000000010000",
               "timestamp": 10,
               "type": "schedule-state-update",
diff --git a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
index b1f5948ab647..6907d1e05410 100644
--- a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
+++ b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
@@ -21,7 +21,7 @@ import {
   describeClassComponentFrame,
 } from './DevToolsComponentStackFrame';
 
-function describeFiber(
+export function describeFiber(
   workTagMap: WorkTagMap,
   workInProgress: Fiber,
   currentDispatcherRef: CurrentDispatcherRef,
diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js
index c02d08ca9232..2110545d8a66 100644
--- a/packages/react-devtools-shared/src/backend/profilingHooks.js
+++ b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -11,6 +11,8 @@ 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';
@@ -22,6 +24,8 @@ import type {
   ReactMeasureType,
   TimelineData,
   SuspenseEvent,
+  SchedulingEvent,
+  ReactScheduleStateUpdateEvent,
 } from 'react-devtools-timeline/src/types';
 
 import isArray from 'shared/isArray';
@@ -29,6 +33,7 @@ import {
   REACT_TOTAL_NUM_LANES,
   SCHEDULING_PROFILER_VERSION,
 } from 'react-devtools-timeline/src/constants';
+import {describeFiber} from './DevToolsFiberComponentStack';
 
 // Add padding to the start/stop time of the profile.
 // This makes the UI nicer to use.
@@ -98,17 +103,22 @@ 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;
 
@@ -774,6 +784,16 @@ export function createProfilingHooks({
     }
   }
 
+  function getParentFibers(fiber: Fiber): Array<Fiber> {
+    const parents = [];
+    let parent = fiber;
+    while (parent !== null) {
+      parents.push(parent);
+      parent = parent.return;
+    }
+    return parents;
+  }
+
   function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
     if (isProfiling || supportsUserTimingV3) {
       const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
@@ -781,13 +801,17 @@ export function createProfilingHooks({
       if (isProfiling) {
         // TODO (timeline) Record and cache component stack
         if (currentTimelineData) {
-          currentTimelineData.schedulingEvents.push({
+          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));
+          currentTimelineData.schedulingEvents.push(event);
         }
       }
 
@@ -831,6 +855,7 @@ export function createProfilingHooks({
         currentBatchUID = 0;
         currentReactComponentMeasure = null;
         currentReactMeasuresStack = [];
+        currentFiberStacks = new Map();
         currentTimelineData = {
           // Session wide metadata; only collected once.
           internalModuleSourceToRanges,
@@ -858,6 +883,30 @@ export function createProfilingHooks({
           snapshotHeight: 0,
         };
         nextRenderShouldStartNewBatch = true;
+      } else {
+        // 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();
       }
     }
   }
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 5f9033af9903..9959cad7aa52 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -660,6 +660,8 @@ export function attach(
       getDisplayNameForFiber,
       getIsProfiling: () => isProfiling,
       getLaneLabelMap,
+      currentDispatcherRef: renderer.currentDispatcherRef,
+      workTagMap: ReactTypeOfWork,
       reactVersion: version,
     });
 
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index 9469523a1e2c..b62405b28a16 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -51,6 +51,7 @@ export type ReactScheduleRenderEvent = {|
 |};
 export type ReactScheduleStateUpdateEvent = {|
   ...BaseReactScheduleEvent,
+  +componentStack?: string,
   +type: 'schedule-state-update',
 |};
 export type ReactScheduleForceUpdateEvent = {|
diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js
index c101003e569e..ddf2d094d2a9 100644
--- a/packages/shared/ReactComponentStackFrame.js
+++ b/packages/shared/ReactComponentStackFrame.js
@@ -131,6 +131,9 @@ export function describeNativeComponentFrame(
       } 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
       fn();
     }
   } catch (sample) {

From 955cad9bcc6d755b2a672f8038fe9754e0fe5108 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 23 Jun 2022 18:47:47 -0400
Subject: [PATCH 1440/1603] [DevTools] Clean Up DevTools Code (#24782)

This PR cleans up the DevTools codebase by:
* Consolidating `normalizeCodeLocInfo` into one place
* Remove unused source argument in the DevTools component stacks code
---
 .../src/__tests__/TimelineProfiler-test.js       |  9 +--------
 .../src/__tests__/componentStacks-test.js        | 16 +---------------
 .../src/__tests__/console-test.js                | 12 +++---------
 .../src/__tests__/preprocessData-test.js         |  9 +--------
 .../react-devtools-shared/src/__tests__/utils.js | 16 ++++++++++++++++
 .../src/backend/DevToolsComponentStackFrame.js   | 14 +++-----------
 .../src/backend/DevToolsFiberComponentStack.js   | 12 ++++--------
 7 files changed, 29 insertions(+), 59 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
index e5d0962db01b..faa0fd725cd0 100644
--- a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
+++ b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -9,14 +9,7 @@
 
 'use strict';
 
-function normalizeCodeLocInfo(str) {
-  return (
-    typeof str === 'string' &&
-    str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
-      return '\n    in ' + name + ' (at **)';
-    })
-  );
-}
+import {normalizeCodeLocInfo} from './utils';
 
 describe('Timeline profiler', () => {
   let React;
diff --git a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
index 506900c291e5..5648217683f6 100644
--- a/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
+++ b/packages/react-devtools-shared/src/__tests__/componentStacks-test.js
@@ -7,21 +7,7 @@
  * @flow
  */
 
-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 **)';
-  });
-}
+import {normalizeCodeLocInfo} from './utils';
 
 describe('component stack', () => {
   let React;
diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index ae4e0f842f51..40eb388a955c 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -6,6 +6,9 @@
  *
  * @flow
  */
+
+import {normalizeCodeLocInfo} from './utils';
+
 let React;
 let ReactDOMClient;
 let act;
@@ -60,15 +63,6 @@ describe('console', () => {
     legacyRender = utils.legacyRender;
   });
 
-  function normalizeCodeLocInfo(str) {
-    return (
-      str &&
-      str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
-        return '\n    in ' + name + ' (at **)';
-      })
-    );
-  }
-
   // @reactVersion >=18.0
   it('should not patch console methods that are not explicitly overridden', () => {
     expect(fakeConsole.error).not.toBe(mockError);
diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index e4ef96e0756f..d6d49d28c6ca 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -9,14 +9,7 @@
 
 'use strict';
 
-function normalizeCodeLocInfo(str) {
-  return (
-    typeof str === 'string' &&
-    str.replace(/\n +(?:at|in) ([\S]+)[^\n]*/g, function(m, name) {
-      return '\n    in ' + name + ' (at **)';
-    })
-  );
-}
+import {normalizeCodeLocInfo} from './utils';
 
 describe('Timeline profiler', () => {
   let React;
diff --git a/packages/react-devtools-shared/src/__tests__/utils.js b/packages/react-devtools-shared/src/__tests__/utils.js
index 3e4417b4a01e..5d3b5308cffa 100644
--- a/packages/react-devtools-shared/src/__tests__/utils.js
+++ b/packages/react-devtools-shared/src/__tests__/utils.js
@@ -289,3 +289,19 @@ export function overrideFeatureFlags(overrideFlags) {
     };
   });
 }
+
+export 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 **)';
+  });
+}
diff --git a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
index db84d32e2e45..1c5631e84f83 100644
--- a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
+++ b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js
@@ -12,7 +12,6 @@
 // while still maintaining support for multiple renderer versions
 // (which use different values for ReactTypeOfWork).
 
-import type {Source} from 'shared/ReactElementType';
 import type {LazyComponent} from 'react/src/ReactLazy';
 import type {CurrentDispatcherRef} from './types';
 
@@ -36,7 +35,6 @@ import {disableLogs, reenableLogs} from './DevToolsConsolePatching';
 let prefix;
 export function describeBuiltInComponentFrame(
   name: string,
-  source: void | null | Source,
   ownerFn: void | null | Function,
 ): string {
   if (prefix === undefined) {
@@ -204,7 +202,6 @@ export function describeNativeComponentFrame(
 
 export function describeClassComponentFrame(
   ctor: Function,
-  source: void | null | Source,
   ownerFn: void | null | Function,
   currentDispatcherRef: CurrentDispatcherRef,
 ): string {
@@ -213,7 +210,6 @@ export function describeClassComponentFrame(
 
 export function describeFunctionComponentFrame(
   fn: Function,
-  source: void | null | Source,
   ownerFn: void | null | Function,
   currentDispatcherRef: CurrentDispatcherRef,
 ): string {
@@ -227,7 +223,6 @@ function shouldConstruct(Component: Function) {
 
 export function describeUnknownElementTypeFrameInDEV(
   type: any,
-  source: void | null | Source,
   ownerFn: void | null | Function,
   currentDispatcherRef: CurrentDispatcherRef,
 ): string {
@@ -245,15 +240,15 @@ export function describeUnknownElementTypeFrameInDEV(
     );
   }
   if (typeof type === 'string') {
-    return describeBuiltInComponentFrame(type, source, ownerFn);
+    return describeBuiltInComponentFrame(type, ownerFn);
   }
   switch (type) {
     case SUSPENSE_NUMBER:
     case SUSPENSE_SYMBOL_STRING:
-      return describeBuiltInComponentFrame('Suspense', source, ownerFn);
+      return describeBuiltInComponentFrame('Suspense', ownerFn);
     case SUSPENSE_LIST_NUMBER:
     case SUSPENSE_LIST_SYMBOL_STRING:
-      return describeBuiltInComponentFrame('SuspenseList', source, ownerFn);
+      return describeBuiltInComponentFrame('SuspenseList', ownerFn);
   }
   if (typeof type === 'object') {
     switch (type.$$typeof) {
@@ -261,7 +256,6 @@ export function describeUnknownElementTypeFrameInDEV(
       case FORWARD_REF_SYMBOL_STRING:
         return describeFunctionComponentFrame(
           type.render,
-          source,
           ownerFn,
           currentDispatcherRef,
         );
@@ -270,7 +264,6 @@ export function describeUnknownElementTypeFrameInDEV(
         // Memo may contain any component type so we recursively resolve it.
         return describeUnknownElementTypeFrameInDEV(
           type.type,
-          source,
           ownerFn,
           currentDispatcherRef,
         );
@@ -283,7 +276,6 @@ export function describeUnknownElementTypeFrameInDEV(
           // Lazy may contain any component type so we recursively resolve it.
           return describeUnknownElementTypeFrameInDEV(
             init(payload),
-            source,
             ownerFn,
             currentDispatcherRef,
           );
diff --git a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
index 6907d1e05410..4bec30e92b45 100644
--- a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
+++ b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js
@@ -43,36 +43,32 @@ export function describeFiber(
       ? workInProgress._debugOwner.type
       : null
     : null;
-  const source = __DEV__ ? workInProgress._debugSource : null;
   switch (workInProgress.tag) {
     case HostComponent:
-      return describeBuiltInComponentFrame(workInProgress.type, source, owner);
+      return describeBuiltInComponentFrame(workInProgress.type, owner);
     case LazyComponent:
-      return describeBuiltInComponentFrame('Lazy', source, owner);
+      return describeBuiltInComponentFrame('Lazy', owner);
     case SuspenseComponent:
-      return describeBuiltInComponentFrame('Suspense', source, owner);
+      return describeBuiltInComponentFrame('Suspense', owner);
     case SuspenseListComponent:
-      return describeBuiltInComponentFrame('SuspenseList', source, owner);
+      return describeBuiltInComponentFrame('SuspenseList', owner);
     case FunctionComponent:
     case IndeterminateComponent:
     case SimpleMemoComponent:
       return describeFunctionComponentFrame(
         workInProgress.type,
-        source,
         owner,
         currentDispatcherRef,
       );
     case ForwardRef:
       return describeFunctionComponentFrame(
         workInProgress.type.render,
-        source,
         owner,
         currentDispatcherRef,
       );
     case ClassComponent:
       return describeClassComponentFrame(
         workInProgress.type,
-        source,
         owner,
         currentDispatcherRef,
       );

From 652e6c5a1b2067cbe1964c6b4ec1af5ff295d7ed Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Sat, 25 Jun 2022 18:13:41 -0500
Subject: [PATCH 1441/1603] [sizebot] Add link to diff view (#24790)

Updates the sizebot output so that the file names link to a diff view of
the corresponding build artifact.

Example diff view: https://react-builds.vercel.app/commits/955cad9bcc6d755b2a672f8038fe9754e0fe5108/files/oss-stable-semver/react-dom/cjs/react-dom.production.min.js?compare=c3d7a7e3d72937443ef75b7e29335c98ad0f1424

The diff view itself is rendered by a Next.js app that I built as a side
project and is hosted at https://react-builds.vercel.app. If we find
this useful enough I could move the app to a React-owned repo but since
this isn't a critical feature it might be OK to leave it separate for
now, so we don't need to commit to supporting it indefinitely.
---
 dangerfile.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/dangerfile.js b/dangerfile.js
index fa5336cc633f..59bc43466b11 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -84,9 +84,10 @@ const header = `
   | Name | +/- | Base | Current | +/- gzip | Base gzip | Current gzip |
   | ---- | --- | ---- | ------- | -------- | --------- | ------------ |`;
 
-function row(result) {
+function row(result, baseSha, headSha) {
+  const diffViewUrl = `https://react-builds.vercel.app/commits/${headSha}/files/${result.path}?compare=${baseSha}`;
   // prettier-ignore
-  return `| ${result.path} | **${change(result.change)}** | ${kbs(result.baseSize)} | ${kbs(result.headSize)} | ${change(result.changeGzip)} | ${kbs(result.baseSizeGzip)} | ${kbs(result.headSizeGzip)}`;
+  return `| [${result.path}](${diffViewUrl}) | **${change(result.change)}** | ${kbs(result.baseSize)} | ${kbs(result.headSize)} | ${change(result.changeGzip)} | ${kbs(result.baseSizeGzip)} | ${kbs(result.headSizeGzip)}`;
 }
 
 (async function() {
@@ -196,7 +197,7 @@ function row(result) {
           artifactPath
       );
     }
-    criticalResults.push(row(result));
+    criticalResults.push(row(result, baseSha, headSha));
   }
 
   let significantResults = [];
@@ -212,7 +213,7 @@ function row(result) {
       // Skip critical artifacts. We added those earlier, in a fixed order.
       !CRITICAL_ARTIFACT_PATHS.has(result.path)
     ) {
-      criticalResults.push(row(result));
+      criticalResults.push(row(result, baseSha, headSha));
     }
 
     // Do the same for results that exceed the significant threshold. These
@@ -224,7 +225,7 @@ function row(result) {
       result.change === Infinity ||
       result.change === -1
     ) {
-      significantResults.push(row(result));
+      significantResults.push(row(result, baseSha, headSha));
     }
   }
 

From 167853026cb193f81c0474d3bf9ef9e03dde203e Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Sun, 26 Jun 2022 12:22:10 -0700
Subject: [PATCH 1442/1603] fix hydration warning suppression in text
 comparisons (#24784)

* fix hydration warning suppression in text comparisons

* lint

* lowercase test
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 48 +++++++++++++++++++
 .../src/client/ReactDOMHostConfig.js          |  4 +-
 .../src/ReactFiberHydrationContext.new.js     |  2 +
 .../src/ReactFiberHydrationContext.old.js     |  2 +
 4 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 5ff919693e23..60a3a3938df3 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -4146,6 +4146,54 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  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(async () => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+      pipe(writable);
+    });
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(container, <App isClient={true} />, {
+      onRecoverableError(error) {
+        errors.push(error.message);
+      },
+    });
+
+    expect(Scheduler).toFlushAndYield([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>lazy</p>
+        <p>some {'text'}</p>
+      </div>,
+    );
+
+    resolve({default: () => <p>lazy</p>});
+    expect(Scheduler).toFlushAndYield([]);
+    expect(errors).toEqual([]);
+    expect(getVisibleChildren(container)).toEqual(
+      <div>
+        <p>lazy</p>
+        <p>some {'text'}</p>
+      </div>,
+    );
+  });
+
   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
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 17684548d4db..3744bbdcdd37 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -971,8 +971,8 @@ export function didNotMatchHydratedContainerTextInstance(
   textInstance: TextInstance,
   text: string,
   isConcurrentMode: boolean,
+  shouldWarnDev: boolean,
 ) {
-  const shouldWarnDev = true;
   checkForUnmatchedText(
     textInstance.nodeValue,
     text,
@@ -988,9 +988,9 @@ export function didNotMatchHydratedTextInstance(
   textInstance: TextInstance,
   text: string,
   isConcurrentMode: boolean,
+  shouldWarnDev: boolean,
 ) {
   if (parentProps[SUPPRESS_HYDRATION_WARNING] !== true) {
-    const shouldWarnDev = true;
     checkForUnmatchedText(
       textInstance.nodeValue,
       text,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index fc18efab3716..141abb712c8f 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -508,6 +508,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
             textContent,
             // TODO: Delete this argument when we remove the legacy root API.
             isConcurrentMode,
+            shouldWarnIfMismatchDev,
           );
           break;
         }
@@ -525,6 +526,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
             textContent,
             // TODO: Delete this argument when we remove the legacy root API.
             isConcurrentMode,
+            shouldWarnIfMismatchDev,
           );
           break;
         }
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 099b02fbcecc..736463823d38 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -508,6 +508,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
             textContent,
             // TODO: Delete this argument when we remove the legacy root API.
             isConcurrentMode,
+            shouldWarnIfMismatchDev,
           );
           break;
         }
@@ -525,6 +526,7 @@ function prepareToHydrateHostTextInstance(fiber: Fiber): boolean {
             textContent,
             // TODO: Delete this argument when we remove the legacy root API.
             isConcurrentMode,
+            shouldWarnIfMismatchDev,
           );
           break;
         }

From a4bed469697a1e23c398fe80228df31ef6d4b612 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 27 Jun 2022 12:46:43 -0400
Subject: [PATCH 1443/1603] [Transition Tracing] Add Tracing Markers (#24686)

This PR adds support for Tracing Markers as well as onTracingMarkerComplete
---
 .../react-reconciler/src/ReactFiber.new.js    |   6 +
 .../react-reconciler/src/ReactFiber.old.js    |   6 +
 .../src/ReactFiberBeginWork.new.js            |  31 +-
 .../src/ReactFiberBeginWork.old.js            |  31 +-
 .../src/ReactFiberCommitWork.new.js           |  41 ++
 .../src/ReactFiberCommitWork.old.js           |  41 ++
 .../src/ReactFiberCompleteWork.new.js         |  11 +-
 .../src/ReactFiberCompleteWork.old.js         |  11 +-
 .../src/ReactFiberOffscreenComponent.js       |   2 +
 .../ReactFiberTracingMarkerComponent.new.js   |   5 +
 .../ReactFiberTracingMarkerComponent.old.js   |   5 +
 .../src/ReactFiberTransition.new.js           |   2 +-
 .../src/ReactFiberTransition.old.js           |   2 +-
 .../__tests__/ReactTransitionTracing-test.js  | 361 ++++++++++++++++++
 14 files changed, 543 insertions(+), 12 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index c5a5919494d8..e78db21baf74 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -19,6 +19,7 @@ import type {
   OffscreenProps,
   OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 
 import {
   createRootStrictEffectsByDefault,
@@ -757,6 +758,11 @@ export function createFiberFromTracingMarker(
   const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
   fiber.elementType = REACT_TRACING_MARKER_TYPE;
   fiber.lanes = lanes;
+  const tracingMarkerInstance: TracingMarkerInstance = {
+    transitions: null,
+    pendingSuspenseBoundaries: null,
+  };
+  fiber.stateNode = tracingMarkerInstance;
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 9a4e3e2aa0e4..15019976d0ab 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -19,6 +19,7 @@ import type {
   OffscreenProps,
   OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 
 import {
   createRootStrictEffectsByDefault,
@@ -757,6 +758,11 @@ export function createFiberFromTracingMarker(
   const fiber = createFiber(TracingMarkerComponent, pendingProps, key, mode);
   fiber.elementType = REACT_TRACING_MARKER_TYPE;
   fiber.lanes = lanes;
+  const tracingMarkerInstance: TracingMarkerInstance = {
+    transitions: null,
+    pendingSuspenseBoundaries: null,
+  };
+  fiber.stateNode = tracingMarkerInstance;
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 0d575e14332e..9f60e0ab227e 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -35,6 +35,7 @@ import type {
 } from './ReactFiberCacheComponent.new';
 import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import type {RootState} from './ReactFiberRoot.new';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
@@ -255,9 +256,12 @@ import {
   getSuspendedCache,
   pushTransition,
   getOffscreenDeferredCache,
-  getSuspendedTransitions,
+  getPendingTransitions,
 } from './ReactFiberTransition.new';
-import {pushTracingMarker} from './ReactFiberTracingMarkerComponent.new';
+import {
+  getTracingMarkers,
+  pushTracingMarker,
+} from './ReactFiberTracingMarkerComponent.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -891,6 +895,20 @@ function updateTracingMarkerComponent(
     return null;
   }
 
+  // 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 = {
+        transitions: new Set(currentTransitions),
+        pendingSuspenseBoundaries: new Map(),
+      };
+      workInProgress.stateNode = markerInstance;
+    }
+  }
+
   pushTracingMarker(workInProgress);
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -2093,10 +2111,13 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
       if (enableTransitionTracing) {
-        const currentTransitions = getSuspendedTransitions();
+        const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
+          // If there are no transitions, we don't need to keep track of tracing markers
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2177,10 +2198,12 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           ? mountSuspenseOffscreenState(renderLanes)
           : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
       if (enableTransitionTracing) {
-        const currentTransitions = getSuspendedTransitions();
+        const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 9bbaf40bd1ad..ca25b272e473 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -35,6 +35,7 @@ import type {
 } from './ReactFiberCacheComponent.old';
 import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import type {RootState} from './ReactFiberRoot.old';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 import {
   enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
@@ -255,9 +256,12 @@ import {
   getSuspendedCache,
   pushTransition,
   getOffscreenDeferredCache,
-  getSuspendedTransitions,
+  getPendingTransitions,
 } from './ReactFiberTransition.old';
-import {pushTracingMarker} from './ReactFiberTracingMarkerComponent.old';
+import {
+  getTracingMarkers,
+  pushTracingMarker,
+} from './ReactFiberTracingMarkerComponent.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
 
@@ -891,6 +895,20 @@ function updateTracingMarkerComponent(
     return null;
   }
 
+  // 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 = {
+        transitions: new Set(currentTransitions),
+        pendingSuspenseBoundaries: new Map(),
+      };
+      workInProgress.stateNode = markerInstance;
+    }
+  }
+
   pushTracingMarker(workInProgress);
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -2093,10 +2111,13 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       );
       workInProgress.memoizedState = SUSPENDED_MARKER;
       if (enableTransitionTracing) {
-        const currentTransitions = getSuspendedTransitions();
+        const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
+          // If there are no transitions, we don't need to keep track of tracing markers
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2177,10 +2198,12 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           ? mountSuspenseOffscreenState(renderLanes)
           : updateSuspenseOffscreenState(prevOffscreenState, renderLanes);
       if (enableTransitionTracing) {
-        const currentTransitions = getSuspendedTransitions();
+        const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6f983e8d249d..da00d7761f9c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -138,6 +138,7 @@ import {
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -2910,6 +2911,7 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
+            // TODO(luna): Combine the root code with the tracing marker code
             if (transitions !== null) {
               transitions.forEach(transition => {
                 // Add all the transitions saved in the update queue during
@@ -2931,6 +2933,23 @@ function commitPassiveMountOnFiber(
                 }
               });
             }
+
+            const tracingMarkers = queue.tracingMarkers;
+            if (tracingMarkers !== null) {
+              tracingMarkers.forEach(marker => {
+                const markerInstance = marker.stateNode;
+                // There should only be a few tracing marker transitions because
+                // they should be only associated with the transition that
+                // caused them
+                markerInstance.transitions.forEach(transition => {
+                  if (instance.transitions.has(transition)) {
+                    instance.pendingMarkers.add(
+                      markerInstance.pendingSuspenseBoundaries,
+                    );
+                  }
+                });
+              });
+            }
           }
 
           commitTransitionProgress(finishedWork);
@@ -2967,6 +2986,28 @@ function commitPassiveMountOnFiber(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // Get the transitions that were initiatized during the render
+        // and add a start transition callback for each of them
+        const instance = finishedWork.stateNode;
+        if (
+          instance.pendingSuspenseBoundaries === null ||
+          instance.pendingSuspenseBoundaries.size === 0
+        ) {
+          instance.transitions.forEach(transition => {
+            addMarkerCompleteCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+              markerName: finishedWork.memoizedProps.name,
+            });
+          });
+          instance.transitions = null;
+          instance.pendingSuspenseBoundaries = null;
+        }
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 147a25d74a80..677db2f10b0e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -138,6 +138,7 @@ import {
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -2910,6 +2911,7 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
+            // TODO(luna): Combine the root code with the tracing marker code
             if (transitions !== null) {
               transitions.forEach(transition => {
                 // Add all the transitions saved in the update queue during
@@ -2931,6 +2933,23 @@ function commitPassiveMountOnFiber(
                 }
               });
             }
+
+            const tracingMarkers = queue.tracingMarkers;
+            if (tracingMarkers !== null) {
+              tracingMarkers.forEach(marker => {
+                const markerInstance = marker.stateNode;
+                // There should only be a few tracing marker transitions because
+                // they should be only associated with the transition that
+                // caused them
+                markerInstance.transitions.forEach(transition => {
+                  if (instance.transitions.has(transition)) {
+                    instance.pendingMarkers.add(
+                      markerInstance.pendingSuspenseBoundaries,
+                    );
+                  }
+                });
+              });
+            }
           }
 
           commitTransitionProgress(finishedWork);
@@ -2967,6 +2986,28 @@ function commitPassiveMountOnFiber(
       }
       break;
     }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        // Get the transitions that were initiatized during the render
+        // and add a start transition callback for each of them
+        const instance = finishedWork.stateNode;
+        if (
+          instance.pendingSuspenseBoundaries === null ||
+          instance.pendingSuspenseBoundaries.size === 0
+        ) {
+          instance.transitions.forEach(transition => {
+            addMarkerCompleteCallbackToPendingTransition({
+              transitionName: transition.name,
+              startTime: transition.startTime,
+              markerName: finishedWork.memoizedProps.name,
+            });
+          });
+          instance.transitions = null;
+          instance.pendingSuspenseBoundaries = null;
+        }
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index c5230bce9202..f6a54052f92d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1581,9 +1581,18 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        // Bubble subtree flags before so we can set the flag property
         popTracingMarker(workInProgress);
         bubbleProperties(workInProgress);
+
+        if (
+          current === null ||
+          (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;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 4dbc447dd989..b99d3451d332 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1581,9 +1581,18 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        // Bubble subtree flags before so we can set the flag property
         popTracingMarker(workInProgress);
         bubbleProperties(workInProgress);
+
+        if (
+          current === null ||
+          (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;
     }
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 3f5ef38424d7..00904d9fdd8e 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {
@@ -38,6 +39,7 @@ export type OffscreenState = {|
 
 export type OffscreenQueue = {|
   transitions: Array<Transition> | null,
+  tracingMarkers: Array<Fiber> | null,
 |} | null;
 
 export type OffscreenInstance = {|
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 593ebfc2d7da..3a136cda686f 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -39,6 +39,11 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
+export type TracingMarkerInstance = {|
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  transitions: Set<Transition> | null,
+|} | null;
+
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index a632af8e1cb9..5f119b3a4b66 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -39,6 +39,11 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
+export type TracingMarkerInstance = {|
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  transitions: Set<Transition> | null,
+|} | null;
+
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
diff --git a/packages/react-reconciler/src/ReactFiberTransition.new.js b/packages/react-reconciler/src/ReactFiberTransition.new.js
index bb5f5d93d202..527cb89877f6 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.new.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.new.js
@@ -149,7 +149,7 @@ export function popTransition(workInProgress: Fiber, current: Fiber | null) {
   }
 }
 
-export function getSuspendedTransitions(): Array<Transition> | null {
+export function getPendingTransitions(): Array<Transition> | null {
   if (!enableTransitionTracing) {
     return null;
   }
diff --git a/packages/react-reconciler/src/ReactFiberTransition.old.js b/packages/react-reconciler/src/ReactFiberTransition.old.js
index 1abb0e2180ab..8323559d58f8 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.old.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.old.js
@@ -149,7 +149,7 @@ export function popTransition(workInProgress: Fiber, current: Fiber | null) {
   }
 }
 
-export function getSuspendedTransitions(): Array<Transition> | null {
+export function getPendingTransitions(): Array<Transition> | null {
   if (!enableTransitionTracing) {
     return null;
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 9f5648b85b53..2fd5a3633e42 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -477,4 +477,365 @@ describe('ReactInteractionTracing', () => {
       ]);
     });
   });
+
+  // @gate enableTransitionTracing
+  it('should correctly trace interactions for tracing markers complete', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Suspend [Marker Text]',
+        'Loading...',
+        'Loading...',
+        'onTransitionStart(page transition, 1000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Page Two');
+
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'Suspend [Marker Text]',
+        'Loading...',
+        'onMarkerComplete(page transition, sync marker, 1000, 3000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Marker Text');
+
+      expect(Scheduler).toFlushAndYield([
+        'Marker Text',
+        '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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..." />}>
+                <AsyncText text="Outer Text" />
+                <Suspense fallback={<Text text="Inner One..." />}>
+                  <React.unstable_TracingMarker name="marker one">
+                    <AsyncText text="Inner Text One" />
+                  </React.unstable_TracingMarker>
+                </Suspense>
+                <Suspense fallback={<Text text="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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Outer Text]',
+        'Suspend [Inner Text One]',
+        'Inner One...',
+        'Suspend [Inner Text Two]',
+        'Inner Two...',
+        'Outer...',
+        'onTransitionStart(page transition, 1000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Inner Text Two');
+      expect(Scheduler).toFlushAndYield([]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Outer Text');
+      expect(Scheduler).toFlushAndYield([
+        'Outer Text',
+        'Suspend [Inner Text One]',
+        'Inner One...',
+        'Inner Text Two',
+        'onMarkerComplete(page transition, marker two, 1000, 4000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      await resolveText('Inner Text One');
+      expect(Scheduler).toFlushAndYield([
+        'Inner Text One',
+        'onMarkerComplete(page transition, marker one, 1000, 5000)',
+        'onMarkerComplete(page transition, outer marker, 1000, 5000)',
+        'onTransitionComplete(page transition, 1000, 5000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it.skip('marker interaction cancelled when name changes', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    let setMarkerNameFn;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      const [markerName, setMarkerName] = useState('old marker');
+      setMarkerNameFn = () => setMarkerName('new marker');
+
+      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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(page transition, 1000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      setMarkerNameFn();
+
+      expect(Scheduler).toFlushAndYield(['Suspend [Page Two]', 'Loading...']);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      resolveText('Page Two');
+
+      // Marker complete is not called because the marker name changed
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'onTransitionComplete(page transition, 1000, 3000)',
+      ]);
+    });
+  });
+
+  // @gate enableTransitionTracing
+  it.skip('marker changes to new interaction when name changes', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    let setMarkerNameFn;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      const [markerName, setMarkerName] = useState('old marker');
+      setMarkerNameFn = () => setMarkerName('new marker');
+
+      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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(page transition, 1000)',
+      ]);
+
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      startTransition(() => setMarkerNameFn(), {name: 'marker transition'});
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'onTransitionStart(marker transition, 2000)',
+      ]);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      resolveText('Page Two');
+
+      // Marker complete is not called because the marker name changed
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'onMarkerComplete(new marker, 2000, 3000)',
+        'onTransitionComplete(page transition, 1000, 3000)',
+      ]);
+    });
+  });
 });

From 88574c1b8bd4ed187f09a9c91d327784fe50dbe8 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 28 Jun 2022 13:09:59 -0400
Subject: [PATCH 1444/1603] Fix enableTransitionTracing flag (#24801)

Move `enableTransitionTracing` to `dynamicFeatureFlags` so it runs when you run `yarn test`
---
 packages/react-noop-renderer/src/createReactNoop.js | 2 ++
 packages/react-reconciler/src/ReactFiber.new.js     | 3 +++
 packages/react-reconciler/src/ReactFiber.old.js     | 3 +++
 packages/react/index.classic.fb.js                  | 1 +
 packages/shared/forks/ReactFeatureFlags.www.js      | 3 +--
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index d055149a0986..24970fbcc18d 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -806,6 +806,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           false,
           '',
           onRecoverableError,
+          null,
         );
         roots.set(rootID, root);
       }
@@ -859,6 +860,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         false,
         '',
         onRecoverableError,
+        null,
       );
       return {
         _Scheduler: Scheduler,
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index e78db21baf74..e81801ad5c8f 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -734,6 +734,9 @@ export function createFiberFromLegacyHidden(
   const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
   fiber.lanes = lanes;
+  // Adding a stateNode for legacy hidden because it's currently using
+  // the offscreen implementation, which depends on a state node
+  fiber.stateNode = {};
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 15019976d0ab..75fcba88bbd1 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -734,6 +734,9 @@ export function createFiberFromLegacyHidden(
   const fiber = createFiber(LegacyHiddenComponent, pendingProps, key, mode);
   fiber.elementType = REACT_LEGACY_HIDDEN_TYPE;
   fiber.lanes = lanes;
+  // Adding a stateNode for legacy hidden because it's currently using
+  // the offscreen implementation, which depends on a state node
+  fiber.stateNode = {};
   return fiber;
 }
 
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 76326a0fe59d..0a2795a62651 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -34,6 +34,7 @@ export {
   startTransition,
   startTransition as unstable_startTransition, // TODO: Remove once call sights updated to startTransition
   unstable_Cache,
+  unstable_TracingMarker,
   unstable_DebugTracingMode,
   unstable_LegacyHidden,
   unstable_Offscreen,
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 938d7589c4e2..50d078d3f0fd 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -33,6 +33,7 @@ export const {
   enableSyncDefaultUpdates,
   enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay,
   enableClientRenderFallbackOnTextMismatch,
+  enableTransitionTracing,
 } = dynamicFeatureFlags;
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
@@ -106,8 +107,6 @@ export const enableUseMutableSource = true;
 
 export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
 
-export const enableTransitionTracing = false;
-
 export const enableSymbolFallbackForWWW = true;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars

From 2e1c8841e97923e7af50c5c5311e3724b7b6555d Mon Sep 17 00:00:00 2001
From: Blake Friedman <blakef@fb.com>
Date: Tue, 28 Jun 2022 22:15:24 +0100
Subject: [PATCH 1445/1603] [DevTools] front-end for profiling event stack
 (#24805)

* [DevTools] front-end for profiling event stack

Adds a side-bar to the profiling tab. Users can now select an update event, and are
shown the callstack from the originating component. When a source path is available
there is now UI to jump to source.

Add FB enabled feature flag: enableProfilerComponentTree for the side-bar.

resolves #24170
---
 .../react-devtools-extensions/src/main.js     |   5 +
 .../src/__tests__/utils-test.js               |  18 +++
 .../config/DevToolsFeatureFlags.core-fb.js    |   1 +
 .../config/DevToolsFeatureFlags.core-oss.js   |   1 +
 .../config/DevToolsFeatureFlags.default.js    |   1 +
 .../DevToolsFeatureFlags.extension-fb.js      |   1 +
 .../DevToolsFeatureFlags.extension-oss.js     |   1 +
 .../src/devtools/utils.js                     |  25 ++++
 .../views/Components/ViewSourceContext.js     |  21 ++++
 .../src/devtools/views/DevTools.js            | 109 ++++++++++--------
 .../src/devtools/views/Profiler/Profiler.js   |   9 +-
 .../views/Profiler/SidebarEventInfo.css       |  70 +++++++++++
 .../views/Profiler/SidebarEventInfo.js        |  86 ++++++++++++++
 .../react-devtools-timeline/src/CanvasPage.js |   6 +
 .../src/content-views/SchedulingEventsView.js |  27 ++++-
 .../react-devtools-timeline/src/utils/flow.js |  13 +++
 16 files changed, 346 insertions(+), 48 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
 create mode 100644 packages/react-devtools-timeline/src/utils/flow.js

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index a8875eacfd60..3f4d24e730e3 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -245,6 +245,10 @@ function createPanelIfReactLoaded() {
           }
         };
 
+        const viewSourceLineFunction = (url, line) => {
+          chrome.devtools.panels.openResource(url, line);
+        };
+
         let debugIDCounter = 0;
 
         // For some reason in Firefox, chrome.runtime.sendMessage() from a content script
@@ -381,6 +385,7 @@ function createPanelIfReactLoaded() {
               warnIfUnsupportedVersionDetected: true,
               viewAttributeSourceFunction,
               viewElementSourceFunction,
+              viewSourceLineFunction,
             }),
           );
         };
diff --git a/packages/react-devtools-shared/src/__tests__/utils-test.js b/packages/react-devtools-shared/src/__tests__/utils-test.js
index 7d001e4a5e7d..6c322c4fa844 100644
--- a/packages/react-devtools-shared/src/__tests__/utils-test.js
+++ b/packages/react-devtools-shared/src/__tests__/utils-test.js
@@ -11,6 +11,7 @@ import {
   getDisplayName,
   getDisplayNameForReactElement,
 } from 'react-devtools-shared/src/utils';
+import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils';
 import {
   format,
   formatWithStyles,
@@ -53,6 +54,23 @@ describe('utils', () => {
       const FauxComponent = {name: {}};
       expect(getDisplayName(FauxComponent, 'Fallback')).toEqual('Fallback');
     });
+
+    it('should parse a component stack trace', () => {
+      expect(
+        stackToComponentSources(`
+    at Foobar (http://localhost:3000/static/js/bundle.js:103:74)
+    at a
+    at header
+    at div
+    at App`),
+      ).toEqual([
+        ['Foobar', ['http://localhost:3000/static/js/bundle.js', 103, 74]],
+        ['a', null],
+        ['header', null],
+        ['div', null],
+        ['App', null],
+      ]);
+    });
   });
 
   describe('getDisplayNameForReactElement', () => {
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
index f382a2b4b2e2..59b8e61a42ae 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js
@@ -19,6 +19,7 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = true;
 export const isInternalFacebookBuild = true;
+export const enableProfilerComponentTree = true;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index 579efaedd619..034368121988 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -19,6 +19,7 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
+export const enableProfilerComponentTree = false;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index 3bd4efb101c7..01d5fd01075c 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -19,3 +19,4 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
+export const enableProfilerComponentTree = 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
index d86b0ddf73ab..76d5546efb3d 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js
@@ -19,6 +19,7 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = true;
 export const isInternalFacebookBuild = true;
+export const enableProfilerComponentTree = true;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index f1a307306242..678ba417e2c9 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -19,6 +19,7 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
+export const enableProfilerComponentTree = false;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 35e34b9c8cf4..7cbce2d771de 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -185,3 +185,28 @@ export function smartStringify(value: any) {
 
   return JSON.stringify(value);
 }
+
+// [url, row, column]
+export type Stack = [string, number, number];
+
+const STACK_DELIMETER = /\n\s+at /;
+const STACK_SOURCE_LOCATION = /([^\s]+) \((.+):(.+):(.+)\)/;
+
+export function stackToComponentSources(
+  stack: string,
+): Array<[string, ?Stack]> {
+  const out = [];
+  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, [url, parseInt(row, 10), parseInt(column, 10)]]);
+      } else {
+        out.push([entry, null]);
+      }
+    });
+  return out;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
new file mode 100644
index 000000000000..daf216245bb7
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {createContext} from 'react';
+
+import type {ViewSourceLine} from 'react-devtools-shared/src/devtools/views/DevTools';
+
+export type Context = {|
+  viewSourceLineFunction: ViewSourceLine | null,
+|};
+
+const ViewSourceContext = createContext<Context>(((null: any): Context));
+ViewSourceContext.displayName = 'ViewSourceContext';
+
+export default ViewSourceContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index b16429b5bcff..49c947ba9138 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -27,6 +27,7 @@ import TabBar from './TabBar';
 import {SettingsContextController} from './Settings/SettingsContext';
 import {TreeContextController} from './Components/TreeContext';
 import ViewElementSourceContext from './Components/ViewElementSourceContext';
+import ViewSourceContext from './Components/ViewSourceContext';
 import FetchFileWithCachingContext from './Components/FetchFileWithCachingContext';
 import HookNamesModuleLoaderContext from 'react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext';
 import {ProfilerContextController} from './Profiler/ProfilerContext';
@@ -57,6 +58,7 @@ export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
 ) => void;
+export type ViewSourceLine = (url: string, row: number, column: number) => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
@@ -77,6 +79,7 @@ export type Props = {|
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
   viewElementSourceFunction?: ?ViewElementSource,
+  viewSourceLineFunction?: ?ViewSourceLine,
   readOnly?: boolean,
   hideSettings?: boolean,
   hideToggleErrorAction?: boolean,
@@ -136,6 +139,7 @@ export default function DevTools({
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
   viewElementSourceFunction,
+  viewSourceLineFunction,
   readOnly,
   hideSettings,
   hideToggleErrorAction,
@@ -199,6 +203,15 @@ export default function DevTools({
     [canViewElementSourceFunction, viewElementSourceFunction],
   );
 
+  const viewSource = useMemo(
+    () => ({
+      viewSourceLineFunction: viewSourceLineFunction || null,
+      // todo(blakef): Add inspect(...) method here and remove viewElementSource
+      // to consolidate source code inspection.
+    }),
+    [viewSourceLineFunction],
+  );
+
   const contextMenu = useMemo(
     () => ({
       isEnabledForInspectedElement: enabledInspectedElementContextMenu,
@@ -267,55 +280,59 @@ export default function DevTools({
                 componentsPortalContainer={componentsPortalContainer}
                 profilerPortalContainer={profilerPortalContainer}>
                 <ViewElementSourceContext.Provider value={viewElementSource}>
-                  <HookNamesModuleLoaderContext.Provider
-                    value={hookNamesModuleLoaderFunction || null}>
-                    <FetchFileWithCachingContext.Provider
-                      value={fetchFileWithCaching || null}>
-                      <TreeContextController>
-                        <ProfilerContextController>
-                          <TimelineContextController>
-                            <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"
+                  <ViewSourceContext.Provider value={viewSource}>
+                    <HookNamesModuleLoaderContext.Provider
+                      value={hookNamesModuleLoaderFunction || null}>
+                      <FetchFileWithCachingContext.Provider
+                        value={fetchFileWithCaching || null}>
+                        <TreeContextController>
+                          <ProfilerContextController>
+                            <TimelineContextController>
+                              <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>
-                                )}
-                                <div
-                                  className={styles.TabContent}
-                                  hidden={tab !== 'components'}>
-                                  <Components
-                                    portalContainer={componentsPortalContainer}
-                                  />
-                                </div>
-                                <div
-                                  className={styles.TabContent}
-                                  hidden={tab !== 'profiler'}>
-                                  <Profiler
-                                    portalContainer={profilerPortalContainer}
-                                  />
                                 </div>
-                              </div>
-                            </ThemeProvider>
-                          </TimelineContextController>
-                        </ProfilerContextController>
-                      </TreeContextController>
-                    </FetchFileWithCachingContext.Provider>
-                  </HookNamesModuleLoaderContext.Provider>
+                              </ThemeProvider>
+                            </TimelineContextController>
+                          </ProfilerContextController>
+                        </TreeContextController>
+                      </FetchFileWithCachingContext.Provider>
+                    </HookNamesModuleLoaderContext.Provider>
+                  </ViewSourceContext.Provider>
                 </ViewElementSourceContext.Provider>
               </SettingsContextController>
               <UnsupportedBridgeProtocolDialog />
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index f9f98fae656f..0d7e23f2e388 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -17,6 +17,7 @@ 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';
@@ -33,6 +34,7 @@ import {SettingsModalContextController} from 'react-devtools-shared/src/devtools
 import portaledContent from '../portaledContent';
 import {StoreContext} from '../context';
 import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
+import {enableProfilerComponentTree} from 'react-devtools-feature-flags';
 
 import styles from './Profiler.css';
 
@@ -55,6 +57,8 @@ function Profiler(_: {||}) {
   const {supportsTimeline} = useContext(StoreContext);
 
   const isLegacyProfilerSelected = selectedTabID !== 'timeline';
+  const isRightColumnVisible =
+    isLegacyProfilerSelected || enableProfilerComponentTree;
 
   let view = null;
   if (didRecordCommits || selectedTabID === 'timeline') {
@@ -102,6 +106,9 @@ function Profiler(_: {||}) {
           }
         }
         break;
+      case 'timeline':
+        sidebar = <SidebarEventInfo />;
+        break;
       default:
         break;
     }
@@ -145,7 +152,7 @@ function Profiler(_: {||}) {
             <ModalDialog />
           </div>
         </div>
-        {isLegacyProfilerSelected && (
+        {isRightColumnVisible && (
           <div className={styles.RightColumn}>{sidebar}</div>
         )}
         <SettingsModal />
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 000000000000..b16e8b97847f
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css
@@ -0,0 +1,70 @@
+.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;
+}
+
+.Label {
+  display: flex;
+  justify-content: space-between;
+
+  font-weight: bold;
+}
+
+[data-source="true"]:hover .Label > .Button {
+  background-color: var(--color-background-hover);
+}
+
+.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);
+}
+
+.Button {
+  display: flex;
+  flex: 1;
+
+  max-width: 95%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-source="true"] .Button {
+  cursor: pointer;
+}
+
+
+.Button > span {
+  display: block;
+  text-align: left;
+}
+
+.Source {
+}
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 000000000000..b32308d5d5df
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import * as React from 'react';
+import {isStateUpdateEvent} from 'react-devtools-timeline/src/utils/flow';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import ViewSourceContext from '../Components/ViewSourceContext';
+import {useContext, useMemo} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils';
+
+import styles from './SidebarEventInfo.css';
+
+export type Props = {||};
+
+export default function SidebarEventInfo(_: Props) {
+  const {profilingData, selectedCommitIndex} = useContext(ProfilerContext);
+  const {viewSourceLineFunction} = useContext(ViewSourceContext);
+
+  const {stack} = useMemo(() => {
+    if (
+      selectedCommitIndex == null ||
+      profilingData == null ||
+      profilingData.timelineData.length === 0
+    ) {
+      return {};
+    }
+    const {schedulingEvents} = profilingData.timelineData[0];
+
+    const event = schedulingEvents[selectedCommitIndex];
+    if (!isStateUpdateEvent(event)) {
+      return {};
+    }
+
+    let componentStack = null;
+    if (event.componentStack) {
+      componentStack = stackToComponentSources(event.componentStack);
+    }
+
+    return {
+      stack: componentStack,
+    };
+  }, [profilingData, selectedCommitIndex]);
+
+  let components;
+  if (stack) {
+    components = stack.map(([displayName, source], index) => {
+      const hasSource = source != null;
+
+      const onClick = () => {
+        if (viewSourceLineFunction != null && source != null) {
+          viewSourceLineFunction(...source);
+        }
+      };
+
+      return (
+        <li key={index} className={styles.ListItem} data-source={hasSource}>
+          <label className={styles.Label}>
+            <Button className={styles.Button} onClick={onClick}>
+              {displayName}
+            </Button>
+            {hasSource && (
+              <ButtonIcon className={styles.Source} type="view-source" />
+            )}
+          </label>
+        </li>
+      );
+    });
+  }
+
+  return (
+    <>
+      <div className={styles.Toolbar}>Event Component Tree</div>
+      <div className={styles.Content} tabIndex={0}>
+        <ol className={styles.List}>{components}</ol>
+      </div>
+    </>
+  );
+}
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 8ef42b1dd37d..116d7b28567d 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -63,6 +63,7 @@ import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useCo
 import {getBatchRange} from './utils/getBatchRange';
 import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
 import {TimelineSearchContext} from './TimelineSearchContext';
+import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
 
 import styles from './CanvasPage.css';
 
@@ -528,6 +529,8 @@ function AutoSizedCanvas({
     ref: canvasRef,
   });
 
+  const {selectCommitIndex} = useContext(ProfilerContext);
+
   useEffect(() => {
     const {current: userTimingMarksView} = userTimingMarksViewRef;
     if (userTimingMarksView) {
@@ -563,6 +566,9 @@ function AutoSizedCanvas({
           });
         }
       };
+      schedulingEventsView.onClick = (schedulingEvent, eventIndex) => {
+        selectCommitIndex(eventIndex);
+      };
     }
 
     const {current: suspenseEventsView} = suspenseEventsViewRef;
diff --git a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
index 3798d261e0b1..4c35ee682894 100644
--- a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
@@ -9,6 +9,7 @@
 
 import type {SchedulingEvent, TimelineData} from '../types';
 import type {
+  ClickInteraction,
   Interaction,
   MouseMoveInteraction,
   Rect,
@@ -45,6 +46,9 @@ export class SchedulingEventsView extends View {
 
   _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);
@@ -243,7 +247,7 @@ export class SchedulingEventsView extends View {
         timestamp - eventTimestampAllowance <= hoverTimestamp &&
         hoverTimestamp <= timestamp + eventTimestampAllowance
       ) {
-        this.currentCursor = 'context-menu';
+        this.currentCursor = 'pointer';
         viewRefs.hoveredView = this;
         onHover(event);
         return;
@@ -253,11 +257,32 @@ export class SchedulingEventsView extends View {
     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/utils/flow.js b/packages/react-devtools-timeline/src/utils/flow.js
new file mode 100644
index 000000000000..0754e23a001f
--- /dev/null
+++ b/packages/react-devtools-timeline/src/utils/flow.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import type {SchedulingEvent} from '../types';
+
+export function isStateUpdateEvent(event: SchedulingEvent): boolean %checks {
+  return event.type === 'schedule-state-update';
+}

From d1432ba93e971b249d7055dbb3b91e34eb0d2100 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 28 Jun 2022 21:17:14 -0400
Subject: [PATCH 1446/1603] [Transition Tracing] Fix excess calls to the
 transition start callback (#24806)

This PR fixes a bug where we would add a transition to the lanes map every time an update occurs. However, we didn't factor in that there might be multiple updates in a transition, which would cause the transition to be added multiple times to the transitionLanes map.

This changes the transitionLanes object from an Array of Arrays to an Array of Sets so that we only add a transition if it hasn't been added before, avoiding duplicates
---
 .../src/ReactFiberLane.new.js                 |  4 +-
 .../src/ReactFiberLane.old.js                 |  4 +-
 .../src/ReactInternalTypes.js                 |  2 +-
 .../__tests__/ReactTransitionTracing-test.js  | 63 +++++++++++++++++++
 4 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index bb76950eb973..c3f8f5329ac7 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -846,9 +846,9 @@ export function addTransitionToLanesMap(
     const index = laneToIndex(lane);
     let transitions = transitionLanesMap[index];
     if (transitions === null) {
-      transitions = [];
+      transitions = new Set();
     }
-    transitions.push(transition);
+    transitions.add(transition);
 
     transitionLanesMap[index] = transitions;
   }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index e71aa5575abb..49f5d06acbc4 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -813,9 +813,9 @@ export function addTransitionToLanesMap(
     const index = laneToIndex(lane);
     let transitions = transitionLanesMap[index];
     if (transitions === null) {
-      transitions = [];
+      transitions = new Set();
     }
-    transitions.push(transition);
+    transitions.add(transition);
 
     transitionLanesMap[index] = transitions;
   }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index abf8a98e99ff..0f6e9bcaf79f 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -328,7 +328,7 @@ export type TransitionTracingCallbacks = {
 // The following fields are only used in transition tracing in Profile builds
 type TransitionTracingOnlyFiberRootProperties = {|
   transitionCallbacks: null | TransitionTracingCallbacks,
-  transitionLanes: Array<Array<Transition> | null>,
+  transitionLanes: Array<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
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 2fd5a3633e42..1926f47fb64d 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -212,6 +212,69 @@ describe('ReactInteractionTracing', () => {
     });
   });
 
+  // @gate enableTransitionTracing
+  it('multiple updates in transition callback should only result in one transitionStart/transitionComplete call', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One: hide']);
+
+      await act(async () => {
+        startTransition(
+          () => {
+            navigateToPageTwo();
+            setText();
+          },
+          {name: 'page transition'},
+        );
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        expect(Scheduler).toFlushAndYield([
+          '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 = {

From f01e119b7d6b32104d37a7a9247fdd5a25bd29d2 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Wed, 29 Jun 2022 13:02:53 -0400
Subject: [PATCH 1447/1603] [DevTools] Log page URL in internal build (#24799)

* test log

* fix attribute name

* fix lint

* tabs can be empty

* improve coding style per comments
---
 packages/react-devtools-extensions/src/main.js   | 12 +++++++++++-
 packages/react-devtools-shared/src/Logger.js     |  2 +-
 .../src/registerDevToolsEventLogger.js           | 16 ++++++++++++++--
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 3f4d24e730e3..82e8f5f530ae 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -115,7 +115,17 @@ function createPanelIfReactLoaded() {
 
       const tabId = chrome.devtools.inspectedWindow.tabId;
 
-      registerDevToolsEventLogger('extension');
+      registerDevToolsEventLogger('extension', async () => {
+        // TODO: after we upgrade to Manifest V3, chrome.tabs.query returns a Promise
+        // without the callback.
+        return new Promise(resolve => {
+          chrome.tabs.query({active: true, currentWindow: true}, tabs => {
+            resolve({
+              page_url: tabs[0]?.url,
+            });
+          });
+        });
+      });
 
       function initBridgeAndStore() {
         const port = chrome.runtime.connect({
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index aa1f194e60b8..bf9d9719ac19 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -33,7 +33,7 @@ export type LogEvent =
       +inspected_element_number_of_hooks: number | null,
     |};
 
-export type LogFunction = LogEvent => void;
+export type LogFunction = LogEvent => void | Promise<void>;
 
 let logFunctions: Array<LogFunction> = [];
 export const logEvent: LogFunction =
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 8ce531449904..08c317fe9313 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -15,8 +15,17 @@ import {enableLogger} from 'react-devtools-feature-flags';
 let loggingIFrame = null;
 let missedEvents = [];
 
-export function registerDevToolsEventLogger(surface: string) {
-  function logEvent(event: LogEvent) {
+type LoggerContext = {|
+  page_url: ?string,
+|};
+
+export function registerDevToolsEventLogger(
+  surface: string,
+  fetchAdditionalContext: ?() =>
+    | LoggerContext
+    | ?(() => Promise<LoggerContext>),
+): void {
+  async function logEvent(event: LogEvent) {
     if (enableLogger) {
       if (loggingIFrame != null) {
         loggingIFrame.contentWindow.postMessage(
@@ -26,6 +35,9 @@ export function registerDevToolsEventLogger(surface: string) {
             context: {
               surface,
               version: process.env.DEVTOOLS_VERSION,
+              ...(fetchAdditionalContext != null
+                ? await fetchAdditionalContext()
+                : {}),
             },
           },
           '*',

From cd80d3274d48155d0f83347daab3eda57009f41b Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 29 Jun 2022 13:38:27 -0400
Subject: [PATCH 1448/1603] [DevTools] Add column number to
 viewSourceLineFunction (#24814)

Add column number for `viewSourceLineFunction` and renamed the function to `viewUrlSourceFunction` to match the other source function naming conventions
---
 packages/react-devtools-extensions/src/main.js         |  6 +++---
 .../src/devtools/views/Components/ViewSourceContext.js |  4 ++--
 .../src/devtools/views/DevTools.js                     | 10 +++++-----
 .../src/devtools/views/Profiler/SidebarEventInfo.js    |  6 +++---
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 82e8f5f530ae..15bf1e8a3289 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -255,8 +255,8 @@ function createPanelIfReactLoaded() {
           }
         };
 
-        const viewSourceLineFunction = (url, line) => {
-          chrome.devtools.panels.openResource(url, line);
+        const viewUrlSourceFunction = (url, line, col) => {
+          chrome.devtools.panels.openResource(url, line, col);
         };
 
         let debugIDCounter = 0;
@@ -395,7 +395,7 @@ function createPanelIfReactLoaded() {
               warnIfUnsupportedVersionDetected: true,
               viewAttributeSourceFunction,
               viewElementSourceFunction,
-              viewSourceLineFunction,
+              viewUrlSourceFunction,
             }),
           );
         };
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
index daf216245bb7..39d6ccc47087 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
@@ -9,10 +9,10 @@
 
 import {createContext} from 'react';
 
-import type {ViewSourceLine} from 'react-devtools-shared/src/devtools/views/DevTools';
+import type {ViewUrlSource} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 export type Context = {|
-  viewSourceLineFunction: ViewSourceLine | null,
+  viewUrlSourceFunction: ViewUrlSource | null,
 |};
 
 const ViewSourceContext = createContext<Context>(((null: any): Context));
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index 49c947ba9138..a78261e9fc30 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -58,7 +58,7 @@ export type ViewElementSource = (
   id: number,
   inspectedElement: InspectedElement,
 ) => void;
-export type ViewSourceLine = (url: string, row: number, column: number) => void;
+export type ViewUrlSource = (url: string, row: number, column: number) => void;
 export type ViewAttributeSource = (
   id: number,
   path: Array<string | number>,
@@ -79,7 +79,7 @@ export type Props = {|
   warnIfUnsupportedVersionDetected?: boolean,
   viewAttributeSourceFunction?: ?ViewAttributeSource,
   viewElementSourceFunction?: ?ViewElementSource,
-  viewSourceLineFunction?: ?ViewSourceLine,
+  viewUrlSourceFunction?: ?ViewUrlSource,
   readOnly?: boolean,
   hideSettings?: boolean,
   hideToggleErrorAction?: boolean,
@@ -139,7 +139,7 @@ export default function DevTools({
   warnIfUnsupportedVersionDetected = false,
   viewAttributeSourceFunction,
   viewElementSourceFunction,
-  viewSourceLineFunction,
+  viewUrlSourceFunction,
   readOnly,
   hideSettings,
   hideToggleErrorAction,
@@ -205,11 +205,11 @@ export default function DevTools({
 
   const viewSource = useMemo(
     () => ({
-      viewSourceLineFunction: viewSourceLineFunction || null,
+      viewUrlSourceFunction: viewUrlSourceFunction || null,
       // todo(blakef): Add inspect(...) method here and remove viewElementSource
       // to consolidate source code inspection.
     }),
-    [viewSourceLineFunction],
+    [viewUrlSourceFunction],
   );
 
   const contextMenu = useMemo(
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
index b32308d5d5df..0ad5aedd86cb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -22,7 +22,7 @@ export type Props = {||};
 
 export default function SidebarEventInfo(_: Props) {
   const {profilingData, selectedCommitIndex} = useContext(ProfilerContext);
-  const {viewSourceLineFunction} = useContext(ViewSourceContext);
+  const {viewUrlSourceFunction} = useContext(ViewSourceContext);
 
   const {stack} = useMemo(() => {
     if (
@@ -55,8 +55,8 @@ export default function SidebarEventInfo(_: Props) {
       const hasSource = source != null;
 
       const onClick = () => {
-        if (viewSourceLineFunction != null && source != null) {
-          viewSourceLineFunction(...source);
+        if (viewUrlSourceFunction != null && source != null) {
+          viewUrlSourceFunction(...source);
         }
       };
 

From 1974d08c93ddf171779fde59215e8430f36d281a Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 29 Jun 2022 19:00:48 -0400
Subject: [PATCH 1449/1603] [DevTools] Fix Bugs With Component Stacks (#24815)

This PR:
* Simplifies the code in `SidebarEventInfo` by passing it the actual clicked event rather than an index.
* Lightly refactored the `SidebarEventInfo` code so that it can be used for more than just `schedulingEvents`
* Fixes bug. Previously, whenever a state update event was clicked, we updated the `selectedCommitIndex` in the `ProfilerContext`. However, this index is used for the selected commit in the Flamegraph profiler, which caused a bug where if you would change the contents of the event sidebar, the commit sidebar in the Flamegraph profiler would change too. This PR replaces this with the actual event info instead
---
 .../views/Profiler/SidebarEventInfo.js        | 105 ++++++++----------
 .../react-devtools-timeline/src/CanvasPage.js |  20 ++--
 .../src/EventTooltip.js                       |   4 +-
 .../src/TimelineContext.js                    |  17 ++-
 packages/react-devtools-timeline/src/types.js |   2 +-
 5 files changed, 78 insertions(+), 70 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
index 0ad5aedd86cb..c26f2c2faec7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -7,80 +7,73 @@
  * @flow
  */
 
+import type {SchedulingEvent} from 'react-devtools-timeline/src/types';
+
 import * as React from 'react';
-import {isStateUpdateEvent} from 'react-devtools-timeline/src/utils/flow';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import ViewSourceContext from '../Components/ViewSourceContext';
-import {useContext, useMemo} from 'react';
-import {ProfilerContext} from './ProfilerContext';
+import {useContext} from 'react';
+import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils';
 
 import styles from './SidebarEventInfo.css';
 
 export type Props = {||};
 
-export default function SidebarEventInfo(_: Props) {
-  const {profilingData, selectedCommitIndex} = useContext(ProfilerContext);
+function SchedulingEventInfo({eventInfo}: {eventInfo: SchedulingEvent}) {
   const {viewUrlSourceFunction} = useContext(ViewSourceContext);
 
-  const {stack} = useMemo(() => {
-    if (
-      selectedCommitIndex == null ||
-      profilingData == null ||
-      profilingData.timelineData.length === 0
-    ) {
-      return {};
-    }
-    const {schedulingEvents} = profilingData.timelineData[0];
+  const componentStack = eventInfo.componentStack
+    ? stackToComponentSources(eventInfo.componentStack)
+    : null;
 
-    const event = schedulingEvents[selectedCommitIndex];
-    if (!isStateUpdateEvent(event)) {
-      return {};
+  const viewSource = source => {
+    if (viewUrlSourceFunction != null && source != null) {
+      viewUrlSourceFunction(...source);
     }
+  };
 
-    let componentStack = null;
-    if (event.componentStack) {
-      componentStack = stackToComponentSources(event.componentStack);
-    }
-
-    return {
-      stack: componentStack,
-    };
-  }, [profilingData, selectedCommitIndex]);
-
-  let components;
-  if (stack) {
-    components = stack.map(([displayName, source], index) => {
-      const hasSource = source != null;
-
-      const onClick = () => {
-        if (viewUrlSourceFunction != null && source != null) {
-          viewUrlSourceFunction(...source);
-        }
-      };
+  return (
+    <div className={styles.Content} tabIndex={0}>
+      {componentStack ? (
+        <ol className={styles.List}>
+          {componentStack.map(([displayName, source], index) => {
+            const hasSource = source != null;
 
-      return (
-        <li key={index} className={styles.ListItem} data-source={hasSource}>
-          <label className={styles.Label}>
-            <Button className={styles.Button} onClick={onClick}>
-              {displayName}
-            </Button>
-            {hasSource && (
-              <ButtonIcon className={styles.Source} type="view-source" />
-            )}
-          </label>
-        </li>
-      );
-    });
-  }
+            return (
+              <li
+                key={index}
+                className={styles.ListItem}
+                data-source={hasSource}>
+                <label className={styles.Label}>
+                  <Button
+                    className={styles.Button}
+                    onClick={() => viewSource(source)}>
+                    {displayName}
+                  </Button>
+                  {hasSource && (
+                    <ButtonIcon className={styles.Source} type="view-source" />
+                  )}
+                </label>
+              </li>
+            );
+          })}
+        </ol>
+      ) : null}
+    </div>
+  );
+}
 
-  return (
+export default function SidebarEventInfo(_: Props) {
+  const {selectedEvent} = useContext(TimelineContext);
+  // (TODO) Refactor in next PR so this supports multiple types of events
+  return selectedEvent ? (
     <>
       <div className={styles.Toolbar}>Event Component Tree</div>
-      <div className={styles.Content} tabIndex={0}>
-        <ol className={styles.List}>{components}</ol>
-      </div>
+      {selectedEvent.schedulingEvent ? (
+        <SchedulingEventInfo eventInfo={selectedEvent.schedulingEvent} />
+      ) : null}
     </>
-  );
+  ) : null;
 }
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 116d7b28567d..3abc8ea7a399 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -9,7 +9,7 @@
 
 import type {Point} from './view-base';
 import type {
-  ReactHoverContextInfo,
+  ReactEventInfo,
   TimelineData,
   ReactMeasure,
   ViewState,
@@ -63,7 +63,7 @@ import useContextMenu from 'react-devtools-shared/src/devtools/ContextMenu/useCo
 import {getBatchRange} from './utils/getBatchRange';
 import {MAX_ZOOM_LEVEL, MIN_ZOOM_LEVEL} from './view-base/constants';
 import {TimelineSearchContext} from './TimelineSearchContext';
-import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler/ProfilerContext';
+import {TimelineContext} from './TimelineContext';
 
 import styles from './CanvasPage.css';
 
@@ -132,7 +132,7 @@ const zoomToBatch = (
   viewState.updateHorizontalScrollState(scrollState);
 };
 
-const EMPTY_CONTEXT_INFO: ReactHoverContextInfo = {
+const EMPTY_CONTEXT_INFO: ReactEventInfo = {
   componentMeasure: null,
   flamechartStackFrame: null,
   measure: null,
@@ -162,10 +162,7 @@ function AutoSizedCanvas({
 
   const [isContextMenuShown, setIsContextMenuShown] = useState<boolean>(false);
   const [mouseLocation, setMouseLocation] = useState<Point>(zeroPoint); // DOM coordinates
-  const [
-    hoveredEvent,
-    setHoveredEvent,
-  ] = useState<ReactHoverContextInfo | null>(null);
+  const [hoveredEvent, setHoveredEvent] = useState<ReactEventInfo | null>(null);
 
   const resetHoveredEvent = useCallback(
     () => setHoveredEvent(EMPTY_CONTEXT_INFO),
@@ -529,7 +526,7 @@ function AutoSizedCanvas({
     ref: canvasRef,
   });
 
-  const {selectCommitIndex} = useContext(ProfilerContext);
+  const {selectEvent} = useContext(TimelineContext);
 
   useEffect(() => {
     const {current: userTimingMarksView} = userTimingMarksViewRef;
@@ -566,8 +563,11 @@ function AutoSizedCanvas({
           });
         }
       };
-      schedulingEventsView.onClick = (schedulingEvent, eventIndex) => {
-        selectCommitIndex(eventIndex);
+      schedulingEventsView.onClick = schedulingEvent => {
+        selectEvent({
+          ...EMPTY_CONTEXT_INFO,
+          schedulingEvent,
+        });
       };
     }
 
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index b084e8821b82..13c25444213f 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -13,7 +13,7 @@ import type {
   NativeEvent,
   NetworkMeasure,
   ReactComponentMeasure,
-  ReactHoverContextInfo,
+  ReactEventInfo,
   ReactMeasure,
   TimelineData,
   SchedulingEvent,
@@ -35,7 +35,7 @@ type Props = {|
   canvasRef: {|current: HTMLCanvasElement | null|},
   data: TimelineData,
   height: number,
-  hoveredEvent: ReactHoverContextInfo | null,
+  hoveredEvent: ReactEventInfo | null,
   origin: Point,
   width: number,
 |};
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
index f024ec68dccf..c753fe1c28d6 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -23,6 +23,7 @@ import type {
   TimelineData,
   SearchRegExpStateChangeCallback,
   ViewState,
+  ReactEventInfo,
 } from './types';
 import type {RefObject} from 'shared/ReactTypes';
 
@@ -33,6 +34,8 @@ export type Context = {|
   searchInputContainerRef: RefObject,
   setFile: (file: File | null) => void,
   viewState: ViewState,
+  selectEvent: ReactEventInfo => void,
+  selectedEvent: ReactEventInfo,
 |};
 
 const TimelineContext = createContext<Context>(((null: any): Context));
@@ -121,6 +124,8 @@ function TimelineContextController({children}: Props) {
     return state;
   }, [file]);
 
+  const [selectedEvent, selectEvent] = useState<ReactEventInfo | null>(null);
+
   const value = useMemo(
     () => ({
       file,
@@ -129,8 +134,18 @@ function TimelineContextController({children}: Props) {
       searchInputContainerRef,
       setFile,
       viewState,
+      selectEvent,
+      selectedEvent,
     }),
-    [file, inMemoryTimelineData, isTimelineSupported, setFile, viewState],
+    [
+      file,
+      inMemoryTimelineData,
+      isTimelineSupported,
+      setFile,
+      viewState,
+      selectEvent,
+      selectedEvent,
+    ],
   );
 
   return (
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index b62405b28a16..0d8766726ff5 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -240,7 +240,7 @@ export type TimelineDataExport = {|
   thrownErrors: ThrownError[],
 |};
 
-export type ReactHoverContextInfo = {|
+export type ReactEventInfo = {|
   componentMeasure: ReactComponentMeasure | null,
   flamechartStackFrame: FlamechartStackFrame | null,
   measure: ReactMeasure | null,

From 4e1fcfa77175765a7d51d70a2e519569012593d8 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 29 Jun 2022 20:54:06 -0400
Subject: [PATCH 1450/1603] [DevTools] Resign Timeline Profiler Sidebar
 (#24816)

This PR:
* Redesigned the sidebar to resemble the flamegraph profiler sidebar and added title and timestamp to the sidebar
* Added ability to copy the component stack (for places where you're unable to link to source)

https://user-images.githubusercontent.com/2735514/176564897-5301d6d4-429a-4ea3-86cd-74427cff4ce6.mov
---
 .../src/devtools/views/Button.css             |   1 +
 .../views/Profiler/SidebarEventInfo.css       |  48 ++++-----
 .../views/Profiler/SidebarEventInfo.js        | 102 +++++++++++-------
 .../src/EventTooltip.js                       |  20 ++--
 .../src/utils/formatting.js                   |  15 +++
 5 files changed, 106 insertions(+), 80 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Button.css b/packages/react-devtools-shared/src/devtools/views/Button.css
index d3885372b485..182b1b2526d3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.css
+++ b/packages/react-devtools-shared/src/devtools/views/Button.css
@@ -5,6 +5,7 @@
   padding: 0;
   border-radius: 0.25rem;
   flex: 0 0 auto;
+  cursor: pointer;
 }
 .ButtonContent {
   display: inline-flex;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css
index b16e8b97847f..98b0dad5325d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.css
@@ -20,18 +20,15 @@
 }
 
 .ListItem {
-  margin: 0;
+  flex: 1 1;
+  margin: 0 0 0.5rem;
 }
 
 .Label {
-  display: flex;
-  justify-content: space-between;
-
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: bold;
-}
-
-[data-source="true"]:hover .Label > .Button {
-  background-color: var(--color-background-hover);
+  flex: 1 1;
 }
 
 .Value {
@@ -39,32 +36,31 @@
   font-size: var(--font-size-monospace-normal);
 }
 
-.NothingSelected {
-  display: flex;
+.Row {  
+  display: flex;  
+  flex-direction: row;  
   align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--color-dim);
-}
-
-.Button {
-  display: flex;
-  flex: 1;
+  border-top: 1px solid var(--color-border);
+} 
 
-  max-width: 95%;
+.UnclickableSource,
+.ClickableSource {
+  width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sans-normal);
 }
 
-[data-source="true"] .Button {
-  cursor: pointer;
+.UnclickableSource {
+  color: var(--color-dim);
 }
 
-
-.Button > span {
-  display: block;
-  text-align: left;
+.ClickableSource {
+  color: var(--color-text);
 }
 
-.Source {
+.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
index c26f2c2faec7..18bd77443eb9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -15,18 +15,25 @@ import ButtonIcon from '../ButtonIcon';
 import ViewSourceContext from '../Components/ViewSourceContext';
 import {useContext} from 'react';
 import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
+import {
+  formatTimestamp,
+  getSchedulingEventLabel,
+} from 'react-devtools-timeline/src/utils/formatting';
 import {stackToComponentSources} from 'react-devtools-shared/src/devtools/utils';
+import {copy} from 'clipboard-js';
 
 import styles from './SidebarEventInfo.css';
 
 export type Props = {||};
 
-function SchedulingEventInfo({eventInfo}: {eventInfo: SchedulingEvent}) {
-  const {viewUrlSourceFunction} = useContext(ViewSourceContext);
+type SchedulingEventProps = {|
+  eventInfo: SchedulingEvent,
+|};
 
-  const componentStack = eventInfo.componentStack
-    ? stackToComponentSources(eventInfo.componentStack)
-    : null;
+function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
+  const {viewUrlSourceFunction} = useContext(ViewSourceContext);
+  const {componentName, timestamp} = eventInfo;
+  const componentStack = eventInfo.componentStack || null;
 
   const viewSource = source => {
     if (viewUrlSourceFunction != null && source != null) {
@@ -35,45 +42,60 @@ function SchedulingEventInfo({eventInfo}: {eventInfo: SchedulingEvent}) {
   };
 
   return (
-    <div className={styles.Content} tabIndex={0}>
-      {componentStack ? (
-        <ol className={styles.List}>
-          {componentStack.map(([displayName, source], index) => {
-            const hasSource = source != null;
-
-            return (
-              <li
-                key={index}
-                className={styles.ListItem}
-                data-source={hasSource}>
-                <label className={styles.Label}>
-                  <Button
-                    className={styles.Button}
-                    onClick={() => viewSource(source)}>
-                    {displayName}
-                  </Button>
-                  {hasSource && (
-                    <ButtonIcon className={styles.Source} type="view-source" />
-                  )}
-                </label>
-              </li>
-            );
-          })}
-        </ol>
-      ) : null}
-    </div>
+    <>
+      <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={() => copy(componentStack)}
+                  title="Copy component stack to clipboard">
+                  <ButtonIcon type="copy" />
+                </Button>
+              </div>
+              <ul className={styles.List}>
+                {stackToComponentSources(componentStack).map(
+                  ([displayName, source], index) => {
+                    return (
+                      <li key={index}>
+                        <Button
+                          className={
+                            source
+                              ? styles.ClickableSource
+                              : styles.UnclickableSource
+                          }
+                          disabled={!source}
+                          onClick={() => viewSource(source)}>
+                          {displayName}
+                        </Button>
+                      </li>
+                    );
+                  },
+                )}
+              </ul>
+            </li>
+          )}
+        </ul>
+      </div>
+    </>
   );
 }
 
 export default function SidebarEventInfo(_: Props) {
   const {selectedEvent} = useContext(TimelineContext);
   // (TODO) Refactor in next PR so this supports multiple types of events
-  return selectedEvent ? (
-    <>
-      <div className={styles.Toolbar}>Event Component Tree</div>
-      {selectedEvent.schedulingEvent ? (
-        <SchedulingEventInfo eventInfo={selectedEvent.schedulingEvent} />
-      ) : null}
-    </>
-  ) : null;
+  if (selectedEvent && selectedEvent.schedulingEvent) {
+    return <SchedulingEventInfo eventInfo={selectedEvent.schedulingEvent} />;
+  }
+
+  return null;
 }
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index 13c25444213f..de607ddd5b19 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -24,7 +24,12 @@ import type {
 } from './types';
 
 import * as React from 'react';
-import {formatDuration, formatTimestamp, trimString} from './utils/formatting';
+import {
+  formatDuration,
+  formatTimestamp,
+  trimString,
+  getSchedulingEventLabel,
+} from './utils/formatting';
 import {getBatchRange} from './utils/getBatchRange';
 import useSmartTooltip from './utils/useSmartTooltip';
 import styles from './EventTooltip.css';
@@ -40,19 +45,6 @@ type Props = {|
   width: number,
 |};
 
-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;
-  }
-}
-
 function getReactMeasureLabel(type): string | null {
   switch (type) {
     case 'commit':
diff --git a/packages/react-devtools-timeline/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js
index f5e589444236..83354afe96f1 100644
--- a/packages/react-devtools-timeline/src/utils/formatting.js
+++ b/packages/react-devtools-timeline/src/utils/formatting.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {SchedulingEvent} from '../types';
+
 import prettyMilliseconds from 'pretty-ms';
 
 export function formatTimestamp(ms: number) {
@@ -28,3 +30,16 @@ export function trimString(string: string, length: number): string {
   }
   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;
+  }
+}

From 6b6cf8311c05a10667c852e833d6f7f51fa476c7 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 29 Jun 2022 23:31:42 -0400
Subject: [PATCH 1451/1603] Land forked reconciler changes (#24817)

This applies forked changes from the "new" reconciler to the "old" one.

Includes:

- d410f0a [FORKED] Bugfix: Offscreen instance is null during setState
- 58bb117 [FORKED] Check for infinite update loops even if unmounted
- 31882b5 [FORKED] Bugfix: Revealing a hidden update
- 17691ac [FORKED] Don't update childLanes until after current render
---
 .../src/ReactFiberClassUpdateQueue.old.js     |  35 +-
 .../src/ReactFiberCompleteWork.new.js         |  20 +-
 .../src/ReactFiberCompleteWork.old.js         |  20 +-
 .../src/ReactFiberConcurrentUpdates.new.js    |   8 +-
 .../src/ReactFiberConcurrentUpdates.old.js    | 305 +++++++++++-------
 .../src/ReactFiberHooks.old.js                |  46 ++-
 .../src/ReactFiberLane.old.js                 |  33 ++
 .../src/ReactFiberRoot.old.js                 |   2 +
 .../src/ReactFiberWorkLoop.old.js             |  17 +-
 .../src/__tests__/ReactOffscreen-test.js      |   3 +-
 .../__tests__/ReactOffscreenSuspense-test.js  |   5 +-
 scripts/merge-fork/forked-revisions           |   4 -
 12 files changed, 307 insertions(+), 191 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
index cc1643eeefed..3b39da9ae418 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
@@ -90,8 +90,10 @@ import type {Lanes, Lane} from './ReactFiberLane.old';
 import {
   NoLane,
   NoLanes,
+  OffscreenLane,
   isSubsetOfLanes,
   mergeLanes,
+  removeLanes,
   isTransitionLane,
   intersectLanes,
   markRootEntangled,
@@ -108,6 +110,7 @@ import {StrictLegacyMode} from './ReactTypeOfMode';
 import {
   markSkippedUpdateLanes,
   isUnsafeClassRenderPhaseUpdate,
+  getWorkInProgressRootRenderLanes,
 } from './ReactFiberWorkLoop.old';
 import {
   enqueueConcurrentClassUpdate,
@@ -132,7 +135,6 @@ export type Update<State> = {|
 
 export type SharedQueue<State> = {|
   pending: Update<State> | null,
-  interleaved: Update<State> | null,
   lanes: Lanes,
 |};
 
@@ -172,7 +174,6 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     lastBaseUpdate: null,
     shared: {
       pending: null,
-      interleaved: null,
       lanes: NoLanes,
     },
     effects: null,
@@ -525,9 +526,23 @@ export function processUpdateQueue<State>(
 
     let update = firstBaseUpdate;
     do {
-      const updateLane = update.lane;
+      // TODO: Don't need this field anymore
       const updateEventTime = update.eventTime;
-      if (!isSubsetOfLanes(renderLanes, updateLane)) {
+
+      // 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.
@@ -622,17 +637,7 @@ export function processUpdateQueue<State>(
     queue.firstBaseUpdate = newFirstBaseUpdate;
     queue.lastBaseUpdate = newLastBaseUpdate;
 
-    // Interleaved updates are stored on a separate queue. We aren't going to
-    // process them during this render, but we do need to track which lanes
-    // are remaining.
-    const lastInterleaved = queue.shared.interleaved;
-    if (lastInterleaved !== null) {
-      let interleaved = lastInterleaved;
-      do {
-        newLanes = mergeLanes(newLanes, interleaved.lane);
-        interleaved = ((interleaved: any).next: Update<State>);
-      } while (interleaved !== lastInterleaved);
-    } else if (firstBaseUpdate === null) {
+    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;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index f6a54052f92d..66b484a3d461 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1522,17 +1522,15 @@ function completeWork(
         // at offscreen priority.
         if (includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane))) {
           bubbleProperties(workInProgress);
-          if (supportsMutation) {
-            // 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;
-            }
+          // 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;
           }
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index b99d3451d332..1fc8a388ea2d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1522,17 +1522,15 @@ function completeWork(
         // at offscreen priority.
         if (includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane))) {
           bubbleProperties(workInProgress);
-          if (supportsMutation) {
-            // 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;
-            }
+          // 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;
           }
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index 4114da9dd226..7a29e8166b7f 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -166,8 +166,14 @@ 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 getRootForUpdatedFiber(sourceFiber);
+  return root;
 }
 
 function markUpdateLaneFromFiberToRoot(
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 42b6520238c1..0d2cbb44c96a 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -16,100 +16,128 @@ import type {
   SharedQueue as ClassQueue,
   Update as ClassUpdate,
 } from './ReactFiberClassUpdateQueue.old';
-import type {Lane} from './ReactFiberLane.old';
+import type {Lane, Lanes} from './ReactFiberLane.old';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
 import {
   warnAboutUpdateOnNotYetMountedFiberInDEV,
   throwIfInfiniteUpdateLoopDetected,
 } from './ReactFiberWorkLoop.old';
-import {mergeLanes} from './ReactFiberLane.old';
+import {
+  NoLane,
+  NoLanes,
+  mergeLanes,
+  markHiddenUpdate,
+} from './ReactFiberLane.old';
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
-import {HostRoot} from './ReactWorkTags';
-
-// An array of all update queues that received updates during the current
-// render. When this render exits, either because it finishes or because it is
-// interrupted, the interleaved updates will be transferred onto the main part
-// of the queue.
-let concurrentQueues: Array<
-  HookQueue<any, any> | ClassQueue<any>,
-> | null = null;
-
-export function pushConcurrentUpdateQueue(
-  queue: HookQueue<any, any> | ClassQueue<any>,
-) {
-  if (concurrentQueues === null) {
-    concurrentQueues = [queue];
-  } else {
-    concurrentQueues.push(queue);
-  }
-}
+import {HostRoot, OffscreenComponent} from './ReactWorkTags';
+
+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;
 
-export function finishQueueingConcurrentUpdates() {
-  // Transfer the interleaved updates onto the main queue. Each queue has a
-  // `pending` field and an `interleaved` field. When they are not null, they
-  // point to the last node in a circular linked list. We need to append the
-  // interleaved list to the end of the pending list by joining them into a
-  // single, circular list.
-  if (concurrentQueues !== null) {
-    for (let i = 0; i < concurrentQueues.length; i++) {
-      const queue = concurrentQueues[i];
-      const lastInterleavedUpdate = queue.interleaved;
-      if (lastInterleavedUpdate !== null) {
-        queue.interleaved = null;
-        const firstInterleavedUpdate = lastInterleavedUpdate.next;
-        const lastPendingUpdate = queue.pending;
-        if (lastPendingUpdate !== null) {
-          const firstPendingUpdate = lastPendingUpdate.next;
-          lastPendingUpdate.next = (firstInterleavedUpdate: any);
-          lastInterleavedUpdate.next = (firstPendingUpdate: any);
-        }
-        queue.pending = (lastInterleavedUpdate: any);
+  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);
     }
-    concurrentQueues = null;
   }
 }
 
-export function enqueueConcurrentHookUpdate<S, A>(
+export function getConcurrentlyUpdatedLanes(): Lanes {
+  return concurrentlyUpdatedLanes;
+}
+
+function enqueueUpdate(
   fiber: Fiber,
-  queue: HookQueue<S, A>,
-  update: HookUpdate<S, A>,
+  queue: ConcurrentQueue | null,
+  update: ConcurrentUpdate | null,
   lane: Lane,
 ) {
-  const interleaved = queue.interleaved;
-  if (interleaved === null) {
-    // This is the first update. Create a circular list.
-    update.next = update;
-    // At the end of the current render, this queue's interleaved updates will
-    // be transferred to the pending queue.
-    pushConcurrentUpdateQueue(queue);
-  } else {
-    update.next = interleaved.next;
-    interleaved.next = update;
+  // 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);
   }
-  queue.interleaved = update;
+}
 
-  return markUpdateLaneFromFiberToRoot(fiber, 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>,
-  lane: Lane,
 ): void {
-  const interleaved = queue.interleaved;
-  if (interleaved === null) {
-    // This is the first update. Create a circular list.
-    update.next = update;
-    // At the end of the current render, this queue's interleaved updates will
-    // be transferred to the pending queue.
-    pushConcurrentUpdateQueue(queue);
-  } else {
-    update.next = interleaved.next;
-    interleaved.next = update;
-  }
-  queue.interleaved = update;
+  // 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);
 }
 
 export function enqueueConcurrentClassUpdate<State>(
@@ -117,78 +145,127 @@ export function enqueueConcurrentClassUpdate<State>(
   queue: ClassQueue<State>,
   update: ClassUpdate<State>,
   lane: Lane,
-) {
-  const interleaved = queue.interleaved;
-  if (interleaved === null) {
-    // This is the first update. Create a circular list.
-    update.next = update;
-    // At the end of the current render, this queue's interleaved updates will
-    // be transferred to the pending queue.
-    pushConcurrentUpdateQueue(queue);
-  } else {
-    update.next = interleaved.next;
-    interleaved.next = update;
-  }
-  queue.interleaved = update;
-
-  return markUpdateLaneFromFiberToRoot(fiber, 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) {
-  return markUpdateLaneFromFiberToRoot(fiber, lane);
+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 const unsafe_markUpdateLaneFromFiberToRoot = markUpdateLaneFromFiberToRoot;
-
-function markUpdateLaneFromFiberToRoot(
+export function unsafe_markUpdateLaneFromFiberToRoot(
   sourceFiber: Fiber,
   lane: Lane,
 ): 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();
+  // 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,
+): void {
   // 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);
   }
-  if (__DEV__) {
-    if (
-      alternate === null &&
-      (sourceFiber.flags & (Placement | Hydrating)) !== NoFlags
-    ) {
-      warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
-    }
-  }
   // Walk the parent path to the root and update the child lanes.
-  let node = sourceFiber;
+  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);
-    } else {
-      if (__DEV__) {
-        if ((parent.flags & (Placement | Hydrating)) !== NoFlags) {
-          warnAboutUpdateOnNotYetMountedFiberInDEV(sourceFiber);
-        }
+    }
+
+    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.isHidden) {
+        isHidden = true;
       }
     }
+
     node = parent;
     parent = parent.return;
   }
-  if (node.tag === HostRoot) {
+
+  if (isHidden && update !== null && node.tag === HostRoot) {
     const root: FiberRoot = node.stateNode;
-    return root;
-  } else {
-    return null;
+    markHiddenUpdate(root, update, lane);
+  }
+}
+
+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/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 81fdcb7696be..c3cb1ed82016 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -43,6 +43,7 @@ import {
 import {
   NoLane,
   SyncLane,
+  OffscreenLane,
   NoLanes,
   isSubsetOfLanes,
   includesBlockingLane,
@@ -82,6 +83,7 @@ import {
 } from './ReactHookEffectTags';
 import {
   getWorkInProgressRoot,
+  getWorkInProgressRootRenderLanes,
   scheduleUpdateOnFiber,
   requestUpdateLane,
   requestEventTime,
@@ -130,7 +132,6 @@ export type Update<S, A> = {|
 
 export type UpdateQueue<S, A> = {|
   pending: Update<S, A> | null,
-  interleaved: Update<S, A> | null,
   lanes: Lanes,
   dispatch: (A => mixed) | null,
   lastRenderedReducer: ((S, A) => S) | null,
@@ -740,7 +741,6 @@ function mountReducer<S, I, A>(
   hook.memoizedState = hook.baseState = initialState;
   const queue: UpdateQueue<S, A> = {
     pending: null,
-    interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: reducer,
@@ -812,8 +812,20 @@ function updateReducer<S, I, A>(
     let newBaseQueueLast = null;
     let update = first;
     do {
-      const updateLane = update.lane;
-      if (!isSubsetOfLanes(renderLanes, updateLane)) {
+      // 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.
@@ -887,22 +899,7 @@ function updateReducer<S, I, A>(
     queue.lastRenderedState = newState;
   }
 
-  // Interleaved updates are stored on a separate queue. We aren't going to
-  // process them during this render, but we do need to track which lanes
-  // are remaining.
-  const lastInterleaved = queue.interleaved;
-  if (lastInterleaved !== null) {
-    let interleaved = lastInterleaved;
-    do {
-      const interleavedLane = interleaved.lane;
-      currentlyRenderingFiber.lanes = mergeLanes(
-        currentlyRenderingFiber.lanes,
-        interleavedLane,
-      );
-      markSkippedUpdateLanes(interleavedLane);
-      interleaved = ((interleaved: any).next: Update<S, A>);
-    } while (interleaved !== lastInterleaved);
-  } else if (baseQueue === null) {
+  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;
@@ -1210,7 +1207,6 @@ function useMutableSource<Source, Snapshot>(
     // including any interleaving updates that occur.
     const newQueue: UpdateQueue<Snapshot, BasicStateAction<Snapshot>> = {
       pending: null,
-      interleaved: null,
       lanes: NoLanes,
       dispatch: null,
       lastRenderedReducer: basicStateReducer,
@@ -1516,7 +1512,6 @@ function mountState<S>(
   hook.memoizedState = hook.baseState = initialState;
   const queue: UpdateQueue<S, BasicStateAction<S>> = {
     pending: null,
-    interleaved: null,
     lanes: NoLanes,
     dispatch: null,
     lastRenderedReducer: basicStateReducer,
@@ -2281,12 +2276,7 @@ function dispatchSetState<S, A>(
             // 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,
-              lane,
-            );
+            enqueueConcurrentHookUpdateAndEagerlyBailout(fiber, queue, update);
             return;
           }
         } catch (error) {
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 49f5d06acbc4..b3f31ec0ceac 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -9,6 +9,7 @@
 
 import type {FiberRoot} from './ReactInternalTypes';
 import type {Transition} from './ReactFiberTracingMarkerComponent.old';
+import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.old';
 
 // 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.
@@ -648,6 +649,7 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
+  const hiddenUpdates = root.hiddenUpdates;
 
   // Clear the lanes that no longer have pending work
   let lanes = noLongerPendingLanes;
@@ -659,6 +661,21 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
     eventTimes[index] = NoTimestamp;
     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;
   }
 }
@@ -694,6 +711,22 @@ export function markRootEntangled(root: FiberRoot, entangledLanes: Lanes) {
   }
 }
 
+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,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index de2a9bd2cf80..7bf68ae5d270 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -74,6 +74,8 @@ function FiberRootNode(
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
 
+  this.hiddenUpdates = createLaneMap(null);
+
   this.identifierPrefix = identifierPrefix;
   this.onRecoverableError = onRecoverableError;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index bfddf20a89cd..cb24a22798db 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -200,6 +200,7 @@ import {
 import {
   enqueueConcurrentRenderForLane,
   finishQueueingConcurrentUpdates,
+  getConcurrentlyUpdatedLanes,
 } from './ReactFiberConcurrentUpdates.old';
 
 import {
@@ -448,6 +449,10 @@ export function getWorkInProgressRoot(): FiberRoot | null {
   return workInProgressRoot;
 }
 
+export function getWorkInProgressRootRenderLanes(): Lanes {
+  return workInProgressRootRenderLanes;
+}
+
 export function requestEventTime() {
   if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
     // We're inside React, so it's fine to read the actual time.
@@ -2074,9 +2079,15 @@ function commitRootImpl(
   root.callbackNode = null;
   root.callbackPriority = NoLane;
 
-  // Update the first and last pending times on this root. The new first
-  // pending time is whatever is left on the root fiber.
+  // Check which lanes no longer have any work scheduled on them, and mark
+  // those as finished.
   let remainingLanes = mergeLanes(finishedWork.lanes, finishedWork.childLanes);
+
+  // 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);
+
   markRootFinished(root, remainingLanes);
 
   if (root === workInProgressRoot) {
@@ -2795,7 +2806,9 @@ function jnd(timeElapsed: number) {
 export function throwIfInfiniteUpdateLoopDetected() {
   if (nestedUpdateCount > NESTED_UPDATE_LIMIT) {
     nestedUpdateCount = 0;
+    nestedPassiveUpdateCount = 0;
     rootWithNestedUpdates = null;
+    rootWithPassiveNestedUpdates = null;
 
     throw new Error(
       'Maximum update depth exceeded. This can happen when a component ' +
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index bed5691426a4..7553d1ebba6a 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -474,8 +474,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span>Hi</span>);
   });
 
-  // Only works in new reconciler
-  // @gate variant
+  // @gate experimental || www
   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
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
index 3e5c25ce0271..5bd523b0203d 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
@@ -86,8 +86,7 @@ describe('ReactOffscreen', () => {
     return text;
   }
 
-  // Only works in new reconciler
-  // @gate variant
+  // @gate experimental || www
   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
@@ -168,7 +167,7 @@ describe('ReactOffscreen', () => {
       // In the same render, also hide the offscreen tree.
       root.render(<App show={false} />);
 
-      expect(Scheduler).toFlushAndYieldThrough([
+      expect(Scheduler).toFlushUntilNextPaint([
         // The outer update will commit, but the inner update is deferred until
         // a later render.
         'Outer: 1',
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index e4099dd72ffd..e69de29bb2d1 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -1,4 +0,0 @@
-d410f0a1bbb12e972b0e99bb9faea10c7e62894d [FORKED] Bugfix: Offscreen instance is null during setState
-58bb11764bf0bb6db47527a64f693f67cdd3b0bb [FORKED] Check for infinite update loops even if unmounted
-31882b5dd66f34f70d341ea2781cacbe802bf4d5 [FORKED] Bugfix: Revealing a hidden update
-17691acc071d56261d43c3cf183f287d983baa9b [FORKED] Don't update childLanes until after current render

From a7b192e0f16a5a585796c78cfdb688845d7710a5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Jun 2022 09:44:54 -0400
Subject: [PATCH 1452/1603] Add test gate alias for Offscreen (#24749)

Offscreen is only enabled in the www and experimental channels. Instead
of listing these on every Offscreen test, I added a test gate alias
called `enableOffscreen`. Makes it easier to grep for these, and edit or
remove the channels later.
---
 .../src/__tests__/ReactOffscreen-test.js      | 21 +++++++++----------
 .../__tests__/ReactOffscreenSuspense-test.js  |  2 +-
 scripts/jest/TestFlags.js                     |  2 ++
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 7553d1ebba6a..589e64764675 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -30,7 +30,7 @@ describe('ReactOffscreen', () => {
     return <span prop={props.text} />;
   }
 
-  // @gate www
+  // @gate enableLegacyHidden
   it('unstable-defer-without-hiding should never toggle the visibility of its children', async () => {
     function App({mode}) {
       return (
@@ -180,7 +180,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   it('mounts without layout effects when hidden', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -218,7 +218,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
   });
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   it('mounts/unmounts layout effects when visibility changes (starting visible)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -264,7 +264,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span prop="Child" />);
   });
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   it('mounts/unmounts layout effects when visibility changes (starting hidden)', async () => {
     function Child({text}) {
       useLayoutEffect(() => {
@@ -311,7 +311,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
   });
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   it('hides children of offscreen after layout effects are destroyed', async () => {
     const root = ReactNoop.createRoot();
     function Child({text}) {
@@ -350,7 +350,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span hidden={true} prop="Child" />);
   });
 
-  // @gate www
+  // @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.
@@ -398,7 +398,7 @@ describe('ReactOffscreen', () => {
     expect(Scheduler).toHaveYielded(['Unmount layout']);
   });
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   it('hides new insertions into an already hidden tree', async () => {
     const root = ReactNoop.createRoot();
     await act(async () => {
@@ -428,7 +428,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   it('hides updated nodes inside an already hidden tree', async () => {
     const root = ReactNoop.createRoot();
     await act(async () => {
@@ -474,7 +474,7 @@ describe('ReactOffscreen', () => {
     expect(root).toMatchRenderedOutput(<span>Hi</span>);
   });
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   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
@@ -593,8 +593,7 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // TODO: Create TestFlag alias for Offscreen
-  // @gate experimental || www
+  // @gate enableOffscreen
   it('regression: Offscreen instance is sometimes null during setState', async () => {
     let setState;
     function Child() {
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
index 5bd523b0203d..b4b531b45e8f 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
@@ -86,7 +86,7 @@ describe('ReactOffscreen', () => {
     return text;
   }
 
-  // @gate experimental || www
+  // @gate enableOffscreen
   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
diff --git a/scripts/jest/TestFlags.js b/scripts/jest/TestFlags.js
index e76a93638336..ee093653182a 100644
--- a/scripts/jest/TestFlags.js
+++ b/scripts/jest/TestFlags.js
@@ -87,6 +87,8 @@ function getTestFlags() {
       // This isn't a flag, just a useful alias for tests.
       enableUseSyncExternalStoreShim: !__VARIANT__,
       enableSuspenseList: releaseChannel === 'experimental' || www,
+      enableOffscreen: releaseChannel === 'experimental' || www,
+      enableLegacyHidden: www,
 
       // If there's a naming conflict between scheduler and React feature flags, the
       // React ones take precedence.

From 1859329021892484051339a76c2250fa4ca5f77e Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Jun 2022 10:03:29 -0400
Subject: [PATCH 1453/1603] Track nearest Suspense handler on stack (#24585)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [FORKED] Add HiddenContext to track if subtree is hidden

This adds a new stack cursor for tracking whether we're rendering inside
a subtree that's currently hidden.

This corresponds to the same place where we're already tracking the
"base lanes" needed to reveal a hidden subtree — that is, when going
from hidden -> visible, the base lanes are the ones that we skipped
over when we deferred the subtree. We must includes all the base lanes
and their updates in order to avoid an inconsistency with the
surrounding content that already committed.

I consolidated the base lanes logic and the hidden logic into the same
set of push/pop calls.

This is intended to replace the InvisibleParentContext that is currently
part of SuspenseContext, but I haven't done that part yet.

* Add previous commit to forked revisions

* [FORKED] Track nearest Suspense handler on stack

Instead of traversing the return path whenever something suspends to
find the nearest Suspense boundary, we can push the Suspense boundary
onto the stack before entering its subtree. This doesn't affect the
overall algorithm that much, but because we already do all the same
logic in the begin phase, we can save some redundant work by tracking
that information on the stack instead of recomputing it every time.

* Add previous commit to forked revisions
---
 .../src/ReactFiberBeginWork.new.js            | 180 +++++++++---------
 .../src/ReactFiberCompleteWork.new.js         |  76 ++++----
 .../src/ReactFiberHiddenContext.new.js        |  70 +++++++
 .../src/ReactFiberHiddenContext.old.js        |   1 +
 .../src/ReactFiberSuspenseComponent.new.js    |  32 ----
 .../src/ReactFiberSuspenseContext.new.js      | 112 ++++++++---
 .../src/ReactFiberThrow.new.js                |  33 +---
 .../src/ReactFiberUnwindWork.new.js           |  19 +-
 .../src/ReactFiberWorkLoop.new.js             |  56 ++----
 scripts/merge-fork/forked-revisions           |   2 +
 10 files changed, 316 insertions(+), 265 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberHiddenContext.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberHiddenContext.old.js

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 9f60e0ab227e..e4f4d7173b4b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -37,7 +37,6 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import type {RootState} from './ReactFiberRoot.new';
 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 import {
-  enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
   enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
@@ -167,14 +166,19 @@ import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.new';
 import {
   suspenseStackCursor,
-  pushSuspenseContext,
-  InvisibleParentSuspenseContext,
+  pushSuspenseListContext,
   ForceSuspenseFallback,
-  hasSuspenseContext,
-  setDefaultShallowSuspenseContext,
-  addSubtreeSuspenseContext,
-  setShallowSuspenseContext,
+  hasSuspenseListContext,
+  setDefaultShallowSuspenseListContext,
+  setShallowSuspenseListContext,
+  pushPrimaryTreeSuspenseHandler,
+  pushFallbackTreeSuspenseHandler,
+  popSuspenseHandler,
 } from './ReactFiberSuspenseContext.new';
+import {
+  pushHiddenContext,
+  reuseHiddenContextOnStack,
+} from './ReactFiberHiddenContext.new';
 import {findFirstSuspended} from './ReactFiberSuspenseComponent.new';
 import {
   pushProvider,
@@ -232,7 +236,6 @@ import {
   renderDidSuspendDelayIfPossible,
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
-  pushRenderLanes,
 } from './ReactFiberWorkLoop.new';
 import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.new';
 import {setWorkInProgressVersion} from './ReactMutableSource.new';
@@ -688,21 +691,14 @@ function updateOffscreenComponent(
           pushTransition(workInProgress, null, null);
         }
       }
-      pushRenderLanes(workInProgress, renderLanes);
+      reuseHiddenContextOnStack(workInProgress);
     } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
-      let spawnedCachePool: SpawnedCachePool | null = null;
       // We're hidden, and we're not rendering at Offscreen. We will bail out
       // and resume this tree later.
-      let nextBaseLanes;
+      let nextBaseLanes = renderLanes;
       if (prevState !== null) {
-        const prevBaseLanes = prevState.baseLanes;
-        nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
-        if (enableCache) {
-          // Save the cache pool so we can resume later.
-          spawnedCachePool = getOffscreenDeferredCache();
-        }
-      } else {
-        nextBaseLanes = renderLanes;
+        // Include the base lanes from the last render
+        nextBaseLanes = mergeLanes(nextBaseLanes, prevState.baseLanes);
       }
 
       // Schedule this fiber to re-render at offscreen priority. Then bailout.
@@ -711,7 +707,8 @@ function updateOffscreenComponent(
       );
       const nextState: OffscreenState = {
         baseLanes: nextBaseLanes,
-        cachePool: spawnedCachePool,
+        // Save the cache pool so we can resume later.
+        cachePool: enableCache ? getOffscreenDeferredCache() : null,
       };
       workInProgress.memoizedState = nextState;
       workInProgress.updateQueue = null;
@@ -725,7 +722,7 @@ function updateOffscreenComponent(
 
       // We're about to bail out, but we need to push this to the stack anyway
       // to avoid a push/pop misalignment.
-      pushRenderLanes(workInProgress, nextBaseLanes);
+      reuseHiddenContextOnStack(workInProgress);
 
       if (enableLazyContextPropagation && current !== null) {
         // Since this tree will resume rendering in a separate render, we need
@@ -749,9 +746,6 @@ function updateOffscreenComponent(
         cachePool: null,
       };
       workInProgress.memoizedState = nextState;
-      // Push the lanes that were skipped when we bailed out.
-      const subtreeRenderLanes =
-        prevState !== null ? prevState.baseLanes : renderLanes;
       if (enableCache && 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
@@ -762,16 +756,17 @@ function updateOffscreenComponent(
         pushTransition(workInProgress, prevCachePool, null);
       }
 
-      pushRenderLanes(workInProgress, subtreeRenderLanes);
+      // Push the lanes that were skipped when we bailed out.
+      if (prevState !== null) {
+        pushHiddenContext(workInProgress, prevState);
+      } else {
+        reuseHiddenContextOnStack(workInProgress);
+      }
     }
   } else {
     // Rendering a visible tree.
-    let subtreeRenderLanes;
     if (prevState !== null) {
       // We're going from hidden -> visible.
-
-      subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
-
       let prevCachePool = null;
       if (enableCache) {
         // If the render that spawned this one accessed the cache pool, resume
@@ -789,13 +784,15 @@ function updateOffscreenComponent(
 
       pushTransition(workInProgress, prevCachePool, transitions);
 
+      // Push the lanes that were skipped when we bailed out.
+      pushHiddenContext(workInProgress, prevState);
+
       // 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.
-      subtreeRenderLanes = renderLanes;
 
       if (enableCache) {
         // If the render that spawned this one accessed the cache pool, resume
@@ -805,8 +802,11 @@ function updateOffscreenComponent(
           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);
     }
-    pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
@@ -1969,7 +1969,6 @@ function updateSuspenseOffscreenState(
 
 // TODO: Probably should inline this back
 function shouldRemainOnFallback(
-  suspenseContext: SuspenseContext,
   current: null | Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
@@ -1989,7 +1988,8 @@ function shouldRemainOnFallback(
   }
 
   // Not currently showing content. Consult the Suspense context.
-  return hasSuspenseContext(
+  const suspenseContext: SuspenseContext = suspenseStackCursor.current;
+  return hasSuspenseListContext(
     suspenseContext,
     (ForceSuspenseFallback: SuspenseContext),
   );
@@ -2010,50 +2010,18 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     }
   }
 
-  let suspenseContext: SuspenseContext = suspenseStackCursor.current;
-
   let showFallback = false;
   const didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;
-
   if (
     didSuspend ||
-    shouldRemainOnFallback(
-      suspenseContext,
-      current,
-      workInProgress,
-      renderLanes,
-    )
+    shouldRemainOnFallback(current, workInProgress, renderLanes)
   ) {
     // Something in this boundary's subtree already suspended. Switch to
     // rendering the fallback children.
     showFallback = true;
     workInProgress.flags &= ~DidCapture;
-  } else {
-    // Attempting the main content
-    if (
-      current === null ||
-      (current.memoizedState: null | SuspenseState) !== null
-    ) {
-      // This is a new mount or this boundary is already showing a fallback state.
-      // Mark this subtree context as having at least one invisible parent that could
-      // handle the fallback state.
-      // Avoided boundaries are not considered since they cannot handle preferred fallback states.
-      if (
-        !enableSuspenseAvoidThisFallback ||
-        nextProps.unstable_avoidThisFallback !== true
-      ) {
-        suspenseContext = addSubtreeSuspenseContext(
-          suspenseContext,
-          InvisibleParentSuspenseContext,
-        );
-      }
-    }
   }
 
-  suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
-
-  pushSuspenseContext(workInProgress, suspenseContext);
-
   // 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.
@@ -2081,24 +2049,40 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
     // Special path for hydration
     // If we're currently hydrating, try to hydrate this boundary.
-    tryToClaimNextHydratableInstance(workInProgress);
-    // This could've been a dehydrated suspense component.
-    const suspenseState: null | SuspenseState = workInProgress.memoizedState;
-    if (suspenseState !== null) {
-      const dehydrated = suspenseState.dehydrated;
-      if (dehydrated !== null) {
-        return mountDehydratedSuspenseComponent(
-          workInProgress,
-          dehydrated,
-          renderLanes,
-        );
+    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);
+      }
+      tryToClaimNextHydratableInstance(workInProgress);
+      // This could've been a dehydrated suspense component.
+      const suspenseState: null | SuspenseState = workInProgress.memoizedState;
+      if (suspenseState !== null) {
+        const dehydrated = suspenseState.dehydrated;
+        if (dehydrated !== null) {
+          return mountDehydratedSuspenseComponent(
+            workInProgress,
+            dehydrated,
+            renderLanes,
+          );
+        }
       }
+      // If hydration didn't succeed, fall through to the normal Suspense path.
+      // To avoid a stack mismatch we need to pop the Suspense handler that we
+      // pushed above. This will become less awkward when move the hydration
+      // logic to its own fiber.
+      popSuspenseHandler(workInProgress);
     }
 
     const nextPrimaryChildren = nextProps.children;
     const nextFallbackChildren = nextProps.fallback;
 
     if (showFallback) {
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
       const fallbackFragment = mountSuspenseFallbackChildren(
         workInProgress,
         nextPrimaryChildren,
@@ -2131,6 +2115,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // 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);
       const fallbackFragment = mountSuspenseFallbackChildren(
         workInProgress,
         nextPrimaryChildren,
@@ -2154,6 +2139,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       workInProgress.lanes = SomeRetryLane;
       return fallbackFragment;
     } else {
+      pushPrimaryTreeSuspenseHandler(workInProgress);
       return mountSuspensePrimaryChildren(
         workInProgress,
         nextPrimaryChildren,
@@ -2181,6 +2167,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     }
 
     if (showFallback) {
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
       const nextFallbackChildren = nextProps.fallback;
       const nextPrimaryChildren = nextProps.children;
       const fallbackChildFragment = updateSuspenseFallbackChildren(
@@ -2215,6 +2203,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackChildFragment;
     } else {
+      pushPrimaryTreeSuspenseHandler(workInProgress);
+
       const nextPrimaryChildren = nextProps.children;
       const primaryChildFragment = updateSuspensePrimaryChildren(
         current,
@@ -2585,6 +2575,7 @@ function updateDehydratedSuspenseComponent(
 ): 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.
@@ -2751,6 +2742,8 @@ function updateDehydratedSuspenseComponent(
 
     if (workInProgress.flags & ForceClientRender) {
       // Something errored during hydration. Try again without hydrating.
+      pushPrimaryTreeSuspenseHandler(workInProgress);
+
       workInProgress.flags &= ~ForceClientRender;
       const capturedValue = createCapturedValue(
         new Error(
@@ -2767,6 +2760,10 @@ function updateDehydratedSuspenseComponent(
     } 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.
@@ -2775,6 +2772,8 @@ function updateDehydratedSuspenseComponent(
     } 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;
       const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
@@ -3070,12 +3069,12 @@ function updateSuspenseListComponent(
 
   let suspenseContext: SuspenseContext = suspenseStackCursor.current;
 
-  const shouldForceFallback = hasSuspenseContext(
+  const shouldForceFallback = hasSuspenseListContext(
     suspenseContext,
     (ForceSuspenseFallback: SuspenseContext),
   );
   if (shouldForceFallback) {
-    suspenseContext = setShallowSuspenseContext(
+    suspenseContext = setShallowSuspenseListContext(
       suspenseContext,
       ForceSuspenseFallback,
     );
@@ -3093,9 +3092,9 @@ function updateSuspenseListComponent(
         renderLanes,
       );
     }
-    suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
+    suspenseContext = setDefaultShallowSuspenseListContext(suspenseContext);
   }
-  pushSuspenseContext(workInProgress, suspenseContext);
+  pushSuspenseListContext(workInProgress, suspenseContext);
 
   if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     // In legacy mode, SuspenseList doesn't work so we just
@@ -3559,10 +3558,9 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const state: SuspenseState | null = workInProgress.memoizedState;
       if (state !== null) {
         if (state.dehydrated !== null) {
-          pushSuspenseContext(
-            workInProgress,
-            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-          );
+          // 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.
@@ -3585,10 +3583,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
         } else {
           // The primary child fragment does not have pending work marked
           // on it
-          pushSuspenseContext(
-            workInProgress,
-            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-          );
+          pushPrimaryTreeSuspenseHandler(workInProgress);
           // The primary children do not have pending work with sufficient
           // priority. Bailout.
           const child = bailoutOnAlreadyFinishedWork(
@@ -3608,10 +3603,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
           }
         }
       } else {
-        pushSuspenseContext(
-          workInProgress,
-          setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-        );
+        pushPrimaryTreeSuspenseHandler(workInProgress);
       }
       break;
     }
@@ -3669,7 +3661,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
         renderState.tail = null;
         renderState.lastEffect = null;
       }
-      pushSuspenseContext(workInProgress, suspenseStackCursor.current);
+      pushSuspenseListContext(workInProgress, suspenseStackCursor.current);
 
       if (hasChildWork) {
         break;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 66b484a3d461..913abb20c413 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -27,7 +27,6 @@ import type {
   SuspenseState,
   SuspenseListRenderState,
 } from './ReactFiberSuspenseComponent.new';
-import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import {
@@ -109,14 +108,17 @@ import {
 } from './ReactFiberHostContext.new';
 import {
   suspenseStackCursor,
-  InvisibleParentSuspenseContext,
-  hasSuspenseContext,
-  popSuspenseContext,
-  pushSuspenseContext,
-  setShallowSuspenseContext,
+  popSuspenseListContext,
+  popSuspenseHandler,
+  pushSuspenseListContext,
+  setShallowSuspenseListContext,
   ForceSuspenseFallback,
-  setDefaultShallowSuspenseContext,
+  setDefaultShallowSuspenseListContext,
 } from './ReactFiberSuspenseContext.new';
+import {
+  popHiddenContext,
+  isCurrentTreeHidden,
+} from './ReactFiberHiddenContext.new';
 import {findFirstSuspended} from './ReactFiberSuspenseComponent.new';
 import {
   isContextProvider as isLegacyContextProvider,
@@ -146,9 +148,7 @@ import {
   renderDidSuspend,
   renderDidSuspendDelayIfPossible,
   renderHasNotSuspendedYet,
-  popRenderLanes,
   getRenderTargetTime,
-  subtreeRenderLanes,
   getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.new';
 import {
@@ -1077,7 +1077,7 @@ function completeWork(
       return null;
     }
     case SuspenseComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseHandler(workInProgress);
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
       // Special path for dehydrated boundaries. We may eventually move this
@@ -1186,25 +1186,23 @@ function completeWork(
             // If this render already had a ping or lower pri updates,
             // and this is the first time we know we're going to suspend we
             // should be able to immediately restart from within throwException.
-            const hasInvisibleChildContext =
-              current === null &&
-              (workInProgress.memoizedProps.unstable_avoidThisFallback !==
-                true ||
-                !enableSuspenseAvoidThisFallback);
-            if (
-              hasInvisibleChildContext ||
-              hasSuspenseContext(
-                suspenseStackCursor.current,
-                (InvisibleParentSuspenseContext: SuspenseContext),
-              )
-            ) {
-              // If this was in an invisible tree or a new render, then showing
-              // this boundary is ok.
-              renderDidSuspend();
-            } else {
-              // Otherwise, we're going to have to hide content so we should
-              // suspend for longer if possible.
+
+            // Check if this is a "bad" fallback state or a good one. A bad
+            // fallback state is one that we only show as a last resort; if this
+            // is a transition, we'll block it from displaying, and wait for
+            // more data to arrive.
+            const isBadFallback =
+              // It's bad to switch to a fallback if content is already visible
+              (current !== null && !prevDidTimeout && !isCurrentTreeHidden()) ||
+              // Experimental: Some fallbacks are always bad
+              (enableSuspenseAvoidThisFallback &&
+                workInProgress.memoizedProps.unstable_avoidThisFallback ===
+                  true);
+
+            if (isBadFallback) {
               renderDidSuspendDelayIfPossible();
+            } else {
+              renderDidSuspend();
             }
           }
         }
@@ -1266,7 +1264,7 @@ function completeWork(
       return null;
     }
     case SuspenseListComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseListContext(workInProgress);
 
       const renderState: null | SuspenseListRenderState =
         workInProgress.memoizedState;
@@ -1332,11 +1330,11 @@ function completeWork(
                 workInProgress.subtreeFlags = NoFlags;
                 resetChildFibers(workInProgress, renderLanes);
 
-                // Set up the Suspense Context to force suspense and immediately
-                // rerender the children.
-                pushSuspenseContext(
+                // Set up the Suspense List Context to force suspense and
+                // immediately rerender the children.
+                pushSuspenseListContext(
                   workInProgress,
-                  setShallowSuspenseContext(
+                  setShallowSuspenseListContext(
                     suspenseStackCursor.current,
                     ForceSuspenseFallback,
                   ),
@@ -1459,14 +1457,16 @@ function completeWork(
         // setting it the first time we go from not suspended to suspended.
         let suspenseContext = suspenseStackCursor.current;
         if (didSuspendAlready) {
-          suspenseContext = setShallowSuspenseContext(
+          suspenseContext = setShallowSuspenseListContext(
             suspenseContext,
             ForceSuspenseFallback,
           );
         } else {
-          suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
+          suspenseContext = setDefaultShallowSuspenseListContext(
+            suspenseContext,
+          );
         }
-        pushSuspenseContext(workInProgress, suspenseContext);
+        pushSuspenseListContext(workInProgress, suspenseContext);
         // Do a pass over the next row.
         // Don't bubble properties in this case.
         return next;
@@ -1499,7 +1499,7 @@ function completeWork(
     }
     case OffscreenComponent:
     case LegacyHiddenComponent: {
-      popRenderLanes(workInProgress);
+      popHiddenContext(workInProgress);
       const nextState: OffscreenState | null = workInProgress.memoizedState;
       const nextIsHidden = nextState !== null;
 
@@ -1520,7 +1520,7 @@ function completeWork(
       } else {
         // Don't bubble properties for hidden children unless we're rendering
         // at offscreen priority.
-        if (includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane))) {
+        if (includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
           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
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.new.js b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
new file mode 100644
index 000000000000..6f6309d6edb9
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactInternalTypes';
+import type {StackCursor} from './ReactFiberStack.new';
+import type {Lanes} from './ReactFiberLane.new';
+
+import {createCursor, push, pop} from './ReactFiberStack.new';
+
+import {getRenderLanes, setRenderLanes} from './ReactFiberWorkLoop.new';
+import {NoLanes, mergeLanes} from './ReactFiberLane.new';
+
+// 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 prevRenderLanesStackCursor: StackCursor<Lanes> = createCursor(
+  NoLanes,
+);
+
+export function pushHiddenContext(fiber: Fiber, context: HiddenContext): void {
+  const prevRenderLanes = getRenderLanes();
+  push(prevRenderLanesStackCursor, prevRenderLanes, 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.
+  setRenderLanes(mergeLanes(prevRenderLanes, 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(prevRenderLanesStackCursor, getRenderLanes(), fiber);
+  push(
+    currentTreeHiddenStackCursor,
+    currentTreeHiddenStackCursor.current,
+    fiber,
+  );
+}
+
+export function popHiddenContext(fiber: Fiber): void {
+  // Restore the previous render lanes from the stack
+  setRenderLanes(prevRenderLanesStackCursor.current);
+
+  pop(currentTreeHiddenStackCursor, fiber);
+  pop(prevRenderLanesStackCursor, fiber);
+}
+
+export function isCurrentTreeHidden() {
+  return currentTreeHiddenStackCursor.current !== null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
new file mode 100644
index 000000000000..087fc9e69be5
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
@@ -0,0 +1 @@
+// Intentionally blank. File only exists in new reconciler fork.
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index a5952ace9474..a67a5fd8e6d1 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -13,7 +13,6 @@ import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.new';
 import type {TreeContext} from './ReactFiberTreeContext.new';
 
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -67,37 +66,6 @@ export type SuspenseListRenderState = {|
   tailMode: SuspenseListTailMode,
 |};
 
-export function shouldCaptureSuspense(
-  workInProgress: Fiber,
-  hasInvisibleParent: boolean,
-): boolean {
-  // If it was the primary children that just suspended, capture and render the
-  // fallback. Otherwise, don't capture and bubble to the next boundary.
-  const nextState: SuspenseState | null = workInProgress.memoizedState;
-  if (nextState !== null) {
-    if (nextState.dehydrated !== null) {
-      // A dehydrated boundary always captures.
-      return true;
-    }
-    return false;
-  }
-  const props = workInProgress.memoizedProps;
-  // Regular boundaries always capture.
-  if (
-    !enableSuspenseAvoidThisFallback ||
-    props.unstable_avoidThisFallback !== true
-  ) {
-    return true;
-  }
-  // If it's a boundary we should avoid, then we prefer to bubble up to the
-  // parent boundary if it is currently invisible.
-  if (hasInvisibleParent) {
-    return false;
-  }
-  // If the parent is not able to handle it, we must handle it.
-  return true;
-}
-
 export function findFirstSuspended(row: Fiber): null | Fiber {
   let node = row;
   while (node !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js b/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js
index fd6892063091..a49862d3fad8 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js
@@ -9,33 +9,96 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.new';
+import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.new';
+import {isCurrentTreeHidden} from './ReactFiberHiddenContext.new';
+import {SuspenseComponent} 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,
+);
+
+function shouldAvoidedBoundaryCapture(
+  workInProgress: Fiber,
+  handlerOnStack: Fiber,
+  props: any,
+): boolean {
+  if (enableSuspenseAvoidThisFallback) {
+    // If the parent is already showing content, and we're not inside a hidden
+    // tree, then we should show the avoided fallback.
+    if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) {
+      return true;
+    }
+
+    // If the handler on the stack is also an avoided boundary, then we should
+    // favor this inner one.
+    if (
+      handlerOnStack.tag === SuspenseComponent &&
+      handlerOnStack.memoizedProps.unstable_avoidThisFallback === true
+    ) {
+      return true;
+    }
+
+    // If this avoided boundary is dehydrated, then it should capture.
+    const suspenseState: SuspenseState | null = workInProgress.memoizedState;
+    if (suspenseState !== null && suspenseState.dehydrated !== null) {
+      return true;
+    }
+  }
+
+  // If none of those cases apply, then we should avoid this fallback and show
+  // the outer one instead.
+  return false;
+}
+
+export function pushPrimaryTreeSuspenseHandler(handler: Fiber): void {
+  const props = handler.pendingProps;
+  const handlerOnStack = suspenseHandlerStackCursor.current;
+  if (
+    enableSuspenseAvoidThisFallback &&
+    props.unstable_avoidThisFallback === true &&
+    handlerOnStack !== null &&
+    !shouldAvoidedBoundaryCapture(handler, handlerOnStack, props)
+  ) {
+    // This boundary should not capture if something suspends. Reuse the
+    // existing handler on the stack.
+    push(suspenseHandlerStackCursor, handlerOnStack, handler);
+  } else {
+    // Push this handler onto the stack.
+    push(suspenseHandlerStackCursor, handler, 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.
+  push(suspenseHandlerStackCursor, getSuspenseHandler(), fiber);
+}
+
+export function getSuspenseHandler(): Fiber | null {
+  return suspenseHandlerStackCursor.current;
+}
+
+export function popSuspenseHandler(fiber: Fiber): void {
+  pop(suspenseHandlerStackCursor, 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;
 
-// The Suspense Context is split into two parts. The lower bits is
-// inherited deeply down the subtree. The upper bits only affect
-// this immediate suspense boundary and gets reset each new
-// boundary or suspense list.
 const SubtreeSuspenseContextMask: SuspenseContext = 0b01;
 
-// Subtree Flags:
-
-// InvisibleParentSuspenseContext indicates that one of our parent Suspense
-// boundaries is not currently showing visible main content.
-// Either because it is already showing a fallback or is not mounted at all.
-// We can use this to determine if it is desirable to trigger a fallback at
-// the parent. If not, then we might need to trigger undesirable boundaries
-// and/or suspend the commit to avoid hiding the parent content.
-export const InvisibleParentSuspenseContext: SubtreeSuspenseContext = 0b01;
-
-// Shallow Flags:
-
 // 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;
@@ -44,40 +107,33 @@ export const suspenseStackCursor: StackCursor<SuspenseContext> = createCursor(
   DefaultSuspenseContext,
 );
 
-export function hasSuspenseContext(
+export function hasSuspenseListContext(
   parentContext: SuspenseContext,
   flag: SuspenseContext,
 ): boolean {
   return (parentContext & flag) !== 0;
 }
 
-export function setDefaultShallowSuspenseContext(
+export function setDefaultShallowSuspenseListContext(
   parentContext: SuspenseContext,
 ): SuspenseContext {
   return parentContext & SubtreeSuspenseContextMask;
 }
 
-export function setShallowSuspenseContext(
+export function setShallowSuspenseListContext(
   parentContext: SuspenseContext,
   shallowContext: ShallowSuspenseContext,
 ): SuspenseContext {
   return (parentContext & SubtreeSuspenseContextMask) | shallowContext;
 }
 
-export function addSubtreeSuspenseContext(
-  parentContext: SuspenseContext,
-  subtreeContext: SubtreeSuspenseContext,
-): SuspenseContext {
-  return parentContext | subtreeContext;
-}
-
-export function pushSuspenseContext(
+export function pushSuspenseListContext(
   fiber: Fiber,
   newContext: SuspenseContext,
 ): void {
   push(suspenseStackCursor, newContext, fiber);
 }
 
-export function popSuspenseContext(fiber: Fiber): void {
+export function popSuspenseListContext(fiber: Fiber): void {
   pop(suspenseStackCursor, fiber);
 }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index f3dc2edf00f0..92af7312a78c 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -13,13 +13,11 @@ import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {CapturedValue} from './ReactCapturedValue';
 import type {Update} from './ReactFiberClassUpdateQueue.new';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {SuspenseContext} from './ReactFiberSuspenseContext.new';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {
   ClassComponent,
   HostRoot,
-  SuspenseComponent,
   IncompleteClassComponent,
   FunctionComponent,
   ForwardRef,
@@ -34,7 +32,6 @@ import {
   ForceUpdateForLegacySuspense,
   ForceClientRender,
 } from './ReactFiberFlags';
-import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.new';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
@@ -50,11 +47,7 @@ import {
   enqueueUpdate,
 } from './ReactFiberClassUpdateQueue.new';
 import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading.new';
-import {
-  suspenseStackCursor,
-  InvisibleParentSuspenseContext,
-  hasSuspenseContext,
-} from './ReactFiberSuspenseContext.new';
+import {getSuspenseHandler} from './ReactFiberSuspenseContext.new';
 import {
   renderDidError,
   renderDidSuspendDelayIfPossible,
@@ -269,26 +262,6 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
-  let node = returnFiber;
-  const hasInvisibleParentBoundary = hasSuspenseContext(
-    suspenseStackCursor.current,
-    (InvisibleParentSuspenseContext: SuspenseContext),
-  );
-  do {
-    if (
-      node.tag === SuspenseComponent &&
-      shouldCaptureSuspense(node, hasInvisibleParentBoundary)
-    ) {
-      return node;
-    }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== null);
-  return null;
-}
-
 function markSuspenseBoundaryShouldCapture(
   suspenseBoundary: Fiber,
   returnFiber: Fiber,
@@ -444,7 +417,7 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
+    const suspenseBoundary = getSuspenseHandler();
     if (suspenseBoundary !== null) {
       suspenseBoundary.flags &= ~ForceClientRender;
       markSuspenseBoundaryShouldCapture(
@@ -496,7 +469,7 @@ function throwException(
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
       markDidThrowWhileHydratingDEV();
-      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
+      const suspenseBoundary = 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
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 03788ff2c943..6b2dca917d39 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -36,7 +36,11 @@ import {
 } from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.new';
-import {popSuspenseContext} from './ReactFiberSuspenseContext.new';
+import {
+  popSuspenseListContext,
+  popSuspenseHandler,
+} from './ReactFiberSuspenseContext.new';
+import {popHiddenContext} from './ReactFiberHiddenContext.new';
 import {resetHydrationState} from './ReactFiberHydrationContext.new';
 import {
   isContextProvider as isLegacyContextProvider,
@@ -44,7 +48,6 @@ import {
   popTopLevelContextObject as popTopLevelLegacyContextObject,
 } from './ReactFiberContext.new';
 import {popProvider} from './ReactFiberNewContext.new';
-import {popRenderLanes} from './ReactFiberWorkLoop.new';
 import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
@@ -109,7 +112,7 @@ function unwindWork(
       return null;
     }
     case SuspenseComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseHandler(workInProgress);
       const suspenseState: null | SuspenseState = workInProgress.memoizedState;
       if (suspenseState !== null && suspenseState.dehydrated !== null) {
         if (workInProgress.alternate === null) {
@@ -137,7 +140,7 @@ function unwindWork(
       return null;
     }
     case SuspenseListComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseListContext(workInProgress);
       // SuspenseList doesn't actually catch anything. It should've been
       // caught by a nested boundary. If not, it should bubble through.
       return null;
@@ -151,7 +154,7 @@ function unwindWork(
       return null;
     case OffscreenComponent:
     case LegacyHiddenComponent:
-      popRenderLanes(workInProgress);
+      popHiddenContext(workInProgress);
       popTransition(workInProgress, current);
       return null;
     case CacheComponent:
@@ -208,10 +211,10 @@ function unwindInterruptedWork(
       popHostContainer(interruptedWork);
       break;
     case SuspenseComponent:
-      popSuspenseContext(interruptedWork);
+      popSuspenseHandler(interruptedWork);
       break;
     case SuspenseListComponent:
-      popSuspenseContext(interruptedWork);
+      popSuspenseListContext(interruptedWork);
       break;
     case ContextProvider:
       const context: ReactContext<any> = interruptedWork.type._context;
@@ -219,7 +222,7 @@ function unwindInterruptedWork(
       break;
     case OffscreenComponent:
     case LegacyHiddenComponent:
-      popRenderLanes(interruptedWork);
+      popHiddenContext(interruptedWork);
       popTransition(interruptedWork, current);
       break;
     case CacheComponent:
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index edf3c7ee7674..de03d9f1daa2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -11,7 +11,6 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
-import type {StackCursor} from './ReactFiberStack.new';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {EventPriority} from './ReactEventPriorities.new';
@@ -192,11 +191,6 @@ import {
   createCapturedValueAtFiber,
   type CapturedValue,
 } from './ReactCapturedValue';
-import {
-  push as pushToStack,
-  pop as popFromStack,
-  createCursor,
-} from './ReactFiberStack.new';
 import {
   enqueueConcurrentRenderForLane,
   finishQueueingConcurrentUpdates,
@@ -285,26 +279,20 @@ let workInProgress: Fiber | null = null;
 // The lanes we're rendering
 let workInProgressRootRenderLanes: Lanes = NoLanes;
 
-// Stack that allows components to change the render lanes for its subtree
-// This is a superset of the lanes we started working on at the root. The only
-// case where it's different from `workInProgressRootRenderLanes` is when we
-// enter a subtree that is hidden and needs to be unhidden: Suspense and
-// Offscreen component.
+// 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 subtreeRenderLanes.
-export let subtreeRenderLanes: Lanes = NoLanes;
-const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
+// Most things in begin/complete phases should deal with renderLanes.
+export let renderLanes: Lanes = NoLanes;
 
 // Whether to root completed, errored, suspended, etc.
 let workInProgressRootExitStatus: RootExitStatus = RootInProgress;
 // A fatal error, if one is thrown
 let workInProgressRootFatalError: mixed = null;
-// "Included" lanes refer to lanes that were worked on during this render. It's
-// slightly different than `renderLanes` because `renderLanes` can change as you
-// enter and exit an Offscreen tree. This value is the combination of all render
-// lanes for the entire render phase.
-let workInProgressRootIncludedLanes: Lanes = NoLanes;
 // 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;
@@ -1455,18 +1443,16 @@ export function flushControlled(fn: () => mixed): void {
   }
 }
 
-export function pushRenderLanes(fiber: Fiber, lanes: Lanes) {
-  pushToStack(subtreeRenderLanesCursor, subtreeRenderLanes, fiber);
-  subtreeRenderLanes = mergeLanes(subtreeRenderLanes, lanes);
-  workInProgressRootIncludedLanes = mergeLanes(
-    workInProgressRootIncludedLanes,
-    lanes,
-  );
+// 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 setRenderLanes(subtreeRenderLanes: Lanes) {
+  renderLanes = subtreeRenderLanes;
 }
 
-export function popRenderLanes(fiber: Fiber) {
-  subtreeRenderLanes = subtreeRenderLanesCursor.current;
-  popFromStack(subtreeRenderLanesCursor, fiber);
+export function getRenderLanes(): Lanes {
+  return renderLanes;
 }
 
 function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
@@ -1497,7 +1483,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   workInProgressRoot = root;
   const rootWorkInProgress = createWorkInProgress(root.current, null);
   workInProgress = rootWorkInProgress;
-  workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
+  workInProgressRootRenderLanes = renderLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
@@ -1864,10 +1850,10 @@ function performUnitOfWork(unitOfWork: Fiber): void {
   let next;
   if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
     startProfilerTimer(unitOfWork);
-    next = beginWork(current, unitOfWork, subtreeRenderLanes);
+    next = beginWork(current, unitOfWork, renderLanes);
     stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
   } else {
-    next = beginWork(current, unitOfWork, subtreeRenderLanes);
+    next = beginWork(current, unitOfWork, renderLanes);
   }
 
   resetCurrentDebugFiberInDEV();
@@ -1901,10 +1887,10 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         !enableProfilerTimer ||
         (completedWork.mode & ProfileMode) === NoMode
       ) {
-        next = completeWork(current, completedWork, subtreeRenderLanes);
+        next = completeWork(current, completedWork, renderLanes);
       } else {
         startProfilerTimer(completedWork);
-        next = completeWork(current, completedWork, subtreeRenderLanes);
+        next = completeWork(current, completedWork, renderLanes);
         // Update render duration assuming we didn't error.
         stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);
       }
@@ -1919,7 +1905,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       // 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, completedWork, subtreeRenderLanes);
+      const next = unwindWork(current, completedWork, renderLanes);
 
       // Because this fiber did not complete, don't reset its lanes.
 
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index e69de29bb2d1..4a723374fb87 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -0,0 +1,2 @@
+6ab05ee2e9c5b1f4c8dc1f7ae8906bf613788ba7 [FORKED] Track nearest Suspense handler on stack
+051ac55cb75f426b81f8f75b143f34255476b9bc [FORKED] Add HiddenContext to track if subtree is hidden
\ No newline at end of file

From 401296310fbc6a9e769936eda6a6d0269e9c84d0 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 30 Jun 2022 11:16:32 -0400
Subject: [PATCH 1454/1603] [Transition Tracing] Refactor Transition Tracing
 Root Code (#24766)

This PR refactors the transition tracing root code by reusing the tracing marker code. Namely it:
* Refactors the tracing marker code so that it takes a tracing marker instance instead of a tracing marker fiber and rename the stack to `markerInstance` instead of `tracingMarker`
* Pushes the root code onto the stack
* Moves the instantiation of `root.incompleteTransitions` to the begin phase when we are pushing the root to the stack rather than in the commit phase
---
 .../src/ReactFiberBeginWork.new.js            | 37 ++++++--
 .../src/ReactFiberBeginWork.old.js            | 37 ++++++--
 .../src/ReactFiberCommitWork.new.js           | 93 ++++++-------------
 .../src/ReactFiberCommitWork.old.js           | 93 ++++++-------------
 .../src/ReactFiberCompleteWork.new.js         | 16 +++-
 .../src/ReactFiberCompleteWork.old.js         | 16 +++-
 .../src/ReactFiberOffscreenComponent.js       |  4 +-
 .../src/ReactFiberRoot.new.js                 |  2 +-
 .../src/ReactFiberRoot.old.js                 |  2 +-
 .../ReactFiberTracingMarkerComponent.new.js   | 67 +++++++++++--
 .../ReactFiberTracingMarkerComponent.old.js   | 67 +++++++++++--
 .../src/ReactFiberUnwindWork.new.js           | 26 +++++-
 .../src/ReactFiberUnwindWork.old.js           | 26 +++++-
 .../src/ReactInternalTypes.js                 |  2 +-
 14 files changed, 309 insertions(+), 179 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index e4f4d7173b4b..2816e72c6007 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -27,6 +27,7 @@ import type {
   OffscreenProps,
   OffscreenState,
   OffscreenQueue,
+  OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -262,8 +263,9 @@ import {
   getPendingTransitions,
 } from './ReactFiberTransition.new';
 import {
-  getTracingMarkers,
-  pushTracingMarker,
+  getMarkerInstances,
+  pushMarkerInstance,
+  pushRootMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -779,7 +781,10 @@ function updateOffscreenComponent(
       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
-        transitions = workInProgress.stateNode.transitions;
+        const instance: OffscreenInstance | null = workInProgress.stateNode;
+        if (instance !== null && instance.transitions != null) {
+          transitions = Array.from(instance.transitions);
+        }
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(
     }
   }
 
-  pushTracingMarker(workInProgress);
+  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+  if (instance !== null) {
+    pushMarkerInstance(workInProgress, instance);
+  }
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const root: FiberRoot = workInProgress.stateNode;
   pushRootTransition(workInProgress, root, renderLanes);
 
+  if (enableTransitionTracing) {
+    pushRootMarkerInstance(workInProgress);
+  }
+
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
     pushCacheProvider(workInProgress, nextCache);
@@ -2098,10 +2110,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           // If there are no transitions, we don't need to keep track of tracing markers
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2188,10 +2200,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -3509,6 +3521,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const root: FiberRoot = workInProgress.stateNode;
       pushRootTransition(workInProgress, root, renderLanes);
 
+      if (enableTransitionTracing) {
+        pushRootMarkerInstance(workInProgress);
+      }
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
@@ -3694,7 +3710,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        pushTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          pushMarkerInstance(workInProgress, instance);
+        }
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index ca25b272e473..8b19780af34d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -27,6 +27,7 @@ import type {
   OffscreenProps,
   OffscreenState,
   OffscreenQueue,
+  OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -259,8 +260,9 @@ import {
   getPendingTransitions,
 } from './ReactFiberTransition.old';
 import {
-  getTracingMarkers,
-  pushTracingMarker,
+  getMarkerInstances,
+  pushMarkerInstance,
+  pushRootMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -784,7 +786,10 @@ function updateOffscreenComponent(
       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
-        transitions = workInProgress.stateNode.transitions;
+        const instance: OffscreenInstance | null = workInProgress.stateNode;
+        if (instance !== null && instance.transitions != null) {
+          transitions = Array.from(instance.transitions);
+        }
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(
     }
   }
 
-  pushTracingMarker(workInProgress);
+  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+  if (instance !== null) {
+    pushMarkerInstance(workInProgress, instance);
+  }
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const root: FiberRoot = workInProgress.stateNode;
   pushRootTransition(workInProgress, root, renderLanes);
 
+  if (enableTransitionTracing) {
+    pushRootMarkerInstance(workInProgress);
+  }
+
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
     pushCacheProvider(workInProgress, nextCache);
@@ -2114,10 +2126,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           // If there are no transitions, we don't need to keep track of tracing markers
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2200,10 +2212,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -3510,6 +3522,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const root: FiberRoot = workInProgress.stateNode;
       pushRootTransition(workInProgress, root, renderLanes);
 
+      if (enableTransitionTracing) {
+        pushRootMarkerInstance(workInProgress);
+      }
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
@@ -3702,7 +3718,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        pushTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          pushMarkerInstance(workInProgress, instance);
+        }
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index da00d7761f9c..30709cffa506 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2811,47 +2811,35 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const root = finishedWork.stateNode;
-        let incompleteTransitions = root.incompleteTransitions;
+        const incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (incompleteTransitions === null) {
-            root.incompleteTransitions = incompleteTransitions = new Map();
-          }
-
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
-
-            if (!incompleteTransitions.has(transition)) {
-              incompleteTransitions.set(transition, null);
-            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        if (incompleteTransitions !== null) {
-          incompleteTransitions.forEach((pendingBoundaries, transition) => {
-            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+        incompleteTransitions.forEach(
+          ({pendingSuspenseBoundaries}, transition) => {
+            if (
+              pendingSuspenseBoundaries === null ||
+              pendingSuspenseBoundaries.size === 0
+            ) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
               incompleteTransitions.delete(transition);
             }
-          });
-        }
+          },
+        );
 
-        // If there are no more pending suspense boundaries we
-        // clear the transitions because they are all complete.
-        if (
-          incompleteTransitions === null ||
-          incompleteTransitions.size === 0
-        ) {
-          root.incompleteTransitions = null;
-        }
+        clearTransitionsForLanes(finishedRoot, committedLanes);
       }
       break;
     }
@@ -2896,14 +2884,6 @@ function commitPassiveMountOnFiber(
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
-
-            // We lazily instantiate transition tracing relevant maps
-            // and sets in the commit phase as we need to use them. We only
-            // instantiate them in the fallback phase on an as needed basis
-            if (rootIncompleteTransitions === null) {
-              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
-            }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
             }
@@ -2911,56 +2891,43 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
-            // TODO(luna): Combine the root code with the tracing marker code
             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.
                 prevTransitions.add(transition);
-
-                // Add the root transition's pending suspense boundary set to
-                // the queue's marker set. We will iterate through the marker
-                // set when we toggle state on the suspense boundary and
-                // add or remove the pending suspense boundaries as needed.
-                if (rootIncompleteTransitions !== null) {
-                  if (!rootIncompleteTransitions.has(transition)) {
-                    rootIncompleteTransitions.set(transition, new Map());
-                  }
-                  instance.pendingMarkers.add(
-                    rootIncompleteTransitions.get(transition),
-                  );
-                }
               });
             }
 
-            const tracingMarkers = queue.tracingMarkers;
-            if (tracingMarkers !== null) {
-              tracingMarkers.forEach(marker => {
-                const markerInstance = marker.stateNode;
+            const markerInstances = queue.markerInstances;
+            if (markerInstances !== null) {
+              markerInstances.forEach(markerInstance => {
+                if (markerInstance.pendingSuspenseBoundaries === null) {
+                  markerInstance.pendingSuspenseBoundaries = new Map();
+                }
+
+                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
-                markerInstance.transitions.forEach(transition => {
-                  if (instance.transitions.has(transition)) {
-                    instance.pendingMarkers.add(
-                      markerInstance.pendingSuspenseBoundaries,
-                    );
-                  }
-                });
+                if (markerTransitions !== null) {
+                  markerTransitions.forEach(transition => {
+                    if (instance.transitions.has(transition)) {
+                      instance.pendingMarkers.add(
+                        markerInstance.pendingSuspenseBoundaries,
+                      );
+                    }
+                  });
+                }
               });
             }
           }
 
-          commitTransitionProgress(finishedWork);
-
-          if (
-            instance.pendingMarkers === null ||
-            instance.pendingMarkers.size === 0
-          ) {
-            finishedWork.updateQueue = null;
-          }
+          finishedWork.updateQueue = null;
         }
+
+        commitTransitionProgress(finishedWork);
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 677db2f10b0e..7f596a12641c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2811,47 +2811,35 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const root = finishedWork.stateNode;
-        let incompleteTransitions = root.incompleteTransitions;
+        const incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (incompleteTransitions === null) {
-            root.incompleteTransitions = incompleteTransitions = new Map();
-          }
-
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
-
-            if (!incompleteTransitions.has(transition)) {
-              incompleteTransitions.set(transition, null);
-            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        if (incompleteTransitions !== null) {
-          incompleteTransitions.forEach((pendingBoundaries, transition) => {
-            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+        incompleteTransitions.forEach(
+          ({pendingSuspenseBoundaries}, transition) => {
+            if (
+              pendingSuspenseBoundaries === null ||
+              pendingSuspenseBoundaries.size === 0
+            ) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
               incompleteTransitions.delete(transition);
             }
-          });
-        }
+          },
+        );
 
-        // If there are no more pending suspense boundaries we
-        // clear the transitions because they are all complete.
-        if (
-          incompleteTransitions === null ||
-          incompleteTransitions.size === 0
-        ) {
-          root.incompleteTransitions = null;
-        }
+        clearTransitionsForLanes(finishedRoot, committedLanes);
       }
       break;
     }
@@ -2896,14 +2884,6 @@ function commitPassiveMountOnFiber(
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
-
-            // We lazily instantiate transition tracing relevant maps
-            // and sets in the commit phase as we need to use them. We only
-            // instantiate them in the fallback phase on an as needed basis
-            if (rootIncompleteTransitions === null) {
-              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
-            }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
             }
@@ -2911,56 +2891,43 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
-            // TODO(luna): Combine the root code with the tracing marker code
             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.
                 prevTransitions.add(transition);
-
-                // Add the root transition's pending suspense boundary set to
-                // the queue's marker set. We will iterate through the marker
-                // set when we toggle state on the suspense boundary and
-                // add or remove the pending suspense boundaries as needed.
-                if (rootIncompleteTransitions !== null) {
-                  if (!rootIncompleteTransitions.has(transition)) {
-                    rootIncompleteTransitions.set(transition, new Map());
-                  }
-                  instance.pendingMarkers.add(
-                    rootIncompleteTransitions.get(transition),
-                  );
-                }
               });
             }
 
-            const tracingMarkers = queue.tracingMarkers;
-            if (tracingMarkers !== null) {
-              tracingMarkers.forEach(marker => {
-                const markerInstance = marker.stateNode;
+            const markerInstances = queue.markerInstances;
+            if (markerInstances !== null) {
+              markerInstances.forEach(markerInstance => {
+                if (markerInstance.pendingSuspenseBoundaries === null) {
+                  markerInstance.pendingSuspenseBoundaries = new Map();
+                }
+
+                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
-                markerInstance.transitions.forEach(transition => {
-                  if (instance.transitions.has(transition)) {
-                    instance.pendingMarkers.add(
-                      markerInstance.pendingSuspenseBoundaries,
-                    );
-                  }
-                });
+                if (markerTransitions !== null) {
+                  markerTransitions.forEach(transition => {
+                    if (instance.transitions.has(transition)) {
+                      instance.pendingMarkers.add(
+                        markerInstance.pendingSuspenseBoundaries,
+                      );
+                    }
+                  });
+                }
               });
             }
           }
 
-          commitTransitionProgress(finishedWork);
-
-          if (
-            instance.pendingMarkers === null ||
-            instance.pendingMarkers.size === 0
-          ) {
-            finishedWork.updateQueue = null;
-          }
+          finishedWork.updateQueue = null;
         }
+
+        commitTransitionProgress(finishedWork);
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 913abb20c413..3fb9f8dfb126 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -28,6 +28,7 @@ import type {
   SuspenseListRenderState,
 } from './ReactFiberSuspenseComponent.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import {
   enableSuspenseAvoidThisFallback,
@@ -164,7 +165,10 @@ import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -900,6 +904,11 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -1579,7 +1588,10 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(workInProgress);
+        }
         bubbleProperties(workInProgress);
 
         if (
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1fc8a388ea2d..6dd8fb07ab09 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -29,6 +29,7 @@ import type {
 } from './ReactFiberSuspenseComponent.old';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import {
   enableSuspenseAvoidThisFallback,
@@ -164,7 +165,10 @@ import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -900,6 +904,11 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -1579,7 +1588,10 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(workInProgress);
+        }
         bubbleProperties(workInProgress);
 
         if (
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 00904d9fdd8e..4fdff5c8dfb0 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -8,12 +8,12 @@
  */
 
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
-import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {
   Transition,
   PendingSuspenseBoundaries,
+  TracingMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
 export type OffscreenProps = {|
@@ -39,7 +39,7 @@ export type OffscreenState = {|
 
 export type OffscreenQueue = {|
   transitions: Array<Transition> | null,
-  tracingMarkers: Array<Fiber> | null,
+  markerInstances: Array<TracingMarkerInstance> | null,
 |} | null;
 
 export type OffscreenInstance = {|
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index d8ac576f4fd4..f171ca0de394 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -92,13 +92,13 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
+  this.incompleteTransitions = new Map();
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
     const transitionLanesMap = (this.transitionLanes = []);
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
-    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 7bf68ae5d270..9b37cee41eda 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -92,13 +92,13 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
+  this.incompleteTransitions = new Map();
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
     const transitionLanesMap = (this.transitionLanes = []);
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
-    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 3a136cda686f..0eb87bc3d6db 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -13,6 +13,7 @@ import type {StackCursor} from './ReactFiberStack.new';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.new';
+import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -100,31 +101,77 @@ export function processTransitionCallbacks(
 // 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 tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
+const markerInstanceStack: StackCursor<Array<TracingMarkerInstance> | null> = createCursor(
+  null,
+);
 
-export function pushTracingMarker(workInProgress: Fiber): void {
+export function pushRootMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    if (tracingMarkerStack.current === null) {
-      push(tracingMarkerStack, [workInProgress], workInProgress);
+    // 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 = workInProgress.stateNode;
+
+    if (transitions !== null) {
+      transitions.forEach(transition => {
+        if (!root.incompleteTransitions.has(transition)) {
+          root.incompleteTransitions.set(transition, {
+            transitions: new Set([transition]),
+            pendingSuspenseBoundaries: null,
+          });
+        }
+      });
+    }
+
+    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(
-        tracingMarkerStack,
-        tracingMarkerStack.current.concat(workInProgress),
+        markerInstanceStack,
+        markerInstanceStack.current.concat(markerInstance),
         workInProgress,
       );
     }
   }
 }
 
-export function popTracingMarker(workInProgress: Fiber): void {
+export function popMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    pop(tracingMarkerStack, workInProgress);
+    pop(markerInstanceStack, workInProgress);
   }
 }
 
-export function getTracingMarkers(): Array<Fiber> | null {
+export function getMarkerInstances(): Array<TracingMarkerInstance> | null {
   if (enableTransitionTracing) {
-    return tracingMarkerStack.current;
+    return markerInstanceStack.current;
   }
   return null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 5f119b3a4b66..6f25d1f72b82 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -13,6 +13,7 @@ import type {StackCursor} from './ReactFiberStack.old';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.old';
+import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -100,31 +101,77 @@ export function processTransitionCallbacks(
 // 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 tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
+const markerInstanceStack: StackCursor<Array<TracingMarkerInstance> | null> = createCursor(
+  null,
+);
 
-export function pushTracingMarker(workInProgress: Fiber): void {
+export function pushRootMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    if (tracingMarkerStack.current === null) {
-      push(tracingMarkerStack, [workInProgress], workInProgress);
+    // 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 = workInProgress.stateNode;
+
+    if (transitions !== null) {
+      transitions.forEach(transition => {
+        if (!root.incompleteTransitions.has(transition)) {
+          root.incompleteTransitions.set(transition, {
+            transitions: new Set([transition]),
+            pendingSuspenseBoundaries: null,
+          });
+        }
+      });
+    }
+
+    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(
-        tracingMarkerStack,
-        tracingMarkerStack.current.concat(workInProgress),
+        markerInstanceStack,
+        markerInstanceStack.current.concat(markerInstance),
         workInProgress,
       );
     }
   }
 }
 
-export function popTracingMarker(workInProgress: Fiber): void {
+export function popMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    pop(tracingMarkerStack, workInProgress);
+    pop(markerInstanceStack, workInProgress);
   }
 }
 
-export function getTracingMarkers(): Array<Fiber> | null {
+export function getMarkerInstances(): Array<TracingMarkerInstance> | null {
   if (enableTransitionTracing) {
-    return tracingMarkerStack.current;
+    return markerInstanceStack.current;
   }
   return null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 6b2dca917d39..2659a74d80fd 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -12,6 +12,7 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
@@ -52,7 +53,10 @@ import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.new';
 
 function unwindWork(
   current: Fiber | null,
@@ -89,6 +93,11 @@ function unwindWork(
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -165,7 +174,9 @@ function unwindWork(
       return null;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        if (workInProgress.stateNode !== null) {
+          popMarkerInstance(workInProgress);
+        }
       }
       return null;
     default:
@@ -197,6 +208,11 @@ function unwindInterruptedWork(
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(interruptedWork);
+      }
+
       popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
@@ -233,7 +249,11 @@ function unwindInterruptedWork(
       break;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(interruptedWork);
+        const instance: TracingMarkerInstance | null =
+          interruptedWork.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(interruptedWork);
+        }
       }
       break;
     default:
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index ba2e202dd552..f56c8ce5d289 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -12,6 +12,7 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 import {
@@ -49,7 +50,10 @@ import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.old';
 
 function unwindWork(
   current: Fiber | null,
@@ -86,6 +90,11 @@ function unwindWork(
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -162,7 +171,9 @@ function unwindWork(
       return null;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        if (workInProgress.stateNode !== null) {
+          popMarkerInstance(workInProgress);
+        }
       }
       return null;
     default:
@@ -194,6 +205,11 @@ function unwindInterruptedWork(
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(interruptedWork);
+      }
+
       popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
@@ -230,7 +246,11 @@ function unwindInterruptedWork(
       break;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(interruptedWork);
+        const instance: TracingMarkerInstance | null =
+          interruptedWork.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(interruptedWork);
+        }
       }
       break;
     default:
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 0f6e9bcaf79f..8aad50f4bfc6 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -335,7 +335,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // 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, PendingSuspenseBoundaries> | null,
+  incompleteTransitions: Map<Transition, PendingSuspenseBoundaries>,
 |};
 
 // Exported FiberRoot type includes all properties,

From e61fd91f5c523adb63a3b97375ac95ac657dc07f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 30 Jun 2022 11:48:25 -0400
Subject: [PATCH 1455/1603] Revert "[Transition Tracing] Refactor Transition
 Tracing Root Code (#24766)" (#24829)

This reverts commit 401296310fbc6a9e769936eda6a6d0269e9c84d0 because it's
failing on main, likely due to conflict with something that landed before the
PR was merged. Need to rebase and fix.
---
 .../src/ReactFiberBeginWork.new.js            | 37 ++------
 .../src/ReactFiberBeginWork.old.js            | 37 ++------
 .../src/ReactFiberCommitWork.new.js           | 93 +++++++++++++------
 .../src/ReactFiberCommitWork.old.js           | 93 +++++++++++++------
 .../src/ReactFiberCompleteWork.new.js         | 16 +---
 .../src/ReactFiberCompleteWork.old.js         | 16 +---
 .../src/ReactFiberOffscreenComponent.js       |  4 +-
 .../src/ReactFiberRoot.new.js                 |  2 +-
 .../src/ReactFiberRoot.old.js                 |  2 +-
 .../ReactFiberTracingMarkerComponent.new.js   | 67 ++-----------
 .../ReactFiberTracingMarkerComponent.old.js   | 67 ++-----------
 .../src/ReactFiberUnwindWork.new.js           | 26 +-----
 .../src/ReactFiberUnwindWork.old.js           | 26 +-----
 .../src/ReactInternalTypes.js                 |  2 +-
 14 files changed, 179 insertions(+), 309 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 2816e72c6007..e4f4d7173b4b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -27,7 +27,6 @@ import type {
   OffscreenProps,
   OffscreenState,
   OffscreenQueue,
-  OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -263,9 +262,8 @@ import {
   getPendingTransitions,
 } from './ReactFiberTransition.new';
 import {
-  getMarkerInstances,
-  pushMarkerInstance,
-  pushRootMarkerInstance,
+  getTracingMarkers,
+  pushTracingMarker,
 } from './ReactFiberTracingMarkerComponent.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -781,10 +779,7 @@ function updateOffscreenComponent(
       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);
-        }
+        transitions = workInProgress.stateNode.transitions;
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -914,10 +909,7 @@ function updateTracingMarkerComponent(
     }
   }
 
-  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
-  if (instance !== null) {
-    pushMarkerInstance(workInProgress, instance);
-  }
+  pushTracingMarker(workInProgress);
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -1321,10 +1313,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const root: FiberRoot = workInProgress.stateNode;
   pushRootTransition(workInProgress, root, renderLanes);
 
-  if (enableTransitionTracing) {
-    pushRootMarkerInstance(workInProgress);
-  }
-
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
     pushCacheProvider(workInProgress, nextCache);
@@ -2110,10 +2098,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           // If there are no transitions, we don't need to keep track of tracing markers
-          const parentMarkerInstances = getMarkerInstances();
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2200,10 +2188,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          const parentMarkerInstances = getMarkerInstances();
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -3521,10 +3509,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const root: FiberRoot = workInProgress.stateNode;
       pushRootTransition(workInProgress, root, renderLanes);
 
-      if (enableTransitionTracing) {
-        pushRootMarkerInstance(workInProgress);
-      }
-
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
@@ -3710,10 +3694,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
-        if (instance !== null) {
-          pushMarkerInstance(workInProgress, instance);
-        }
+        pushTracingMarker(workInProgress);
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 8b19780af34d..ca25b272e473 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -27,7 +27,6 @@ import type {
   OffscreenProps,
   OffscreenState,
   OffscreenQueue,
-  OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -260,9 +259,8 @@ import {
   getPendingTransitions,
 } from './ReactFiberTransition.old';
 import {
-  getMarkerInstances,
-  pushMarkerInstance,
-  pushRootMarkerInstance,
+  getTracingMarkers,
+  pushTracingMarker,
 } from './ReactFiberTracingMarkerComponent.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -786,10 +784,7 @@ function updateOffscreenComponent(
       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);
-        }
+        transitions = workInProgress.stateNode.transitions;
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -914,10 +909,7 @@ function updateTracingMarkerComponent(
     }
   }
 
-  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
-  if (instance !== null) {
-    pushMarkerInstance(workInProgress, instance);
-  }
+  pushTracingMarker(workInProgress);
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -1321,10 +1313,6 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const root: FiberRoot = workInProgress.stateNode;
   pushRootTransition(workInProgress, root, renderLanes);
 
-  if (enableTransitionTracing) {
-    pushRootMarkerInstance(workInProgress);
-  }
-
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
     pushCacheProvider(workInProgress, nextCache);
@@ -2126,10 +2114,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           // If there are no transitions, we don't need to keep track of tracing markers
-          const parentMarkerInstances = getMarkerInstances();
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2212,10 +2200,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          const parentMarkerInstances = getMarkerInstances();
+          const currentTracingMarkers = getTracingMarkers();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
+            tracingMarkers: currentTracingMarkers,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -3522,10 +3510,6 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const root: FiberRoot = workInProgress.stateNode;
       pushRootTransition(workInProgress, root, renderLanes);
 
-      if (enableTransitionTracing) {
-        pushRootMarkerInstance(workInProgress);
-      }
-
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
@@ -3718,10 +3702,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
-        if (instance !== null) {
-          pushMarkerInstance(workInProgress, instance);
-        }
+        pushTracingMarker(workInProgress);
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 30709cffa506..da00d7761f9c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2811,35 +2811,47 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const root = finishedWork.stateNode;
-        const incompleteTransitions = root.incompleteTransitions;
+        let incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
+          if (incompleteTransitions === null) {
+            root.incompleteTransitions = incompleteTransitions = new Map();
+          }
+
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
+
+            if (!incompleteTransitions.has(transition)) {
+              incompleteTransitions.set(transition, null);
+            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        incompleteTransitions.forEach(
-          ({pendingSuspenseBoundaries}, transition) => {
-            if (
-              pendingSuspenseBoundaries === null ||
-              pendingSuspenseBoundaries.size === 0
-            ) {
+        if (incompleteTransitions !== null) {
+          incompleteTransitions.forEach((pendingBoundaries, transition) => {
+            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
               incompleteTransitions.delete(transition);
             }
-          },
-        );
+          });
+        }
 
-        clearTransitionsForLanes(finishedRoot, committedLanes);
+        // If there are no more pending suspense boundaries we
+        // clear the transitions because they are all complete.
+        if (
+          incompleteTransitions === null ||
+          incompleteTransitions.size === 0
+        ) {
+          root.incompleteTransitions = null;
+        }
       }
       break;
     }
@@ -2884,6 +2896,14 @@ function commitPassiveMountOnFiber(
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
+            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
+
+            // We lazily instantiate transition tracing relevant maps
+            // and sets in the commit phase as we need to use them. We only
+            // instantiate them in the fallback phase on an as needed basis
+            if (rootIncompleteTransitions === null) {
+              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
+            }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
             }
@@ -2891,43 +2911,56 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
+            // TODO(luna): Combine the root code with the tracing marker code
             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.
                 prevTransitions.add(transition);
-              });
-            }
 
-            const markerInstances = queue.markerInstances;
-            if (markerInstances !== null) {
-              markerInstances.forEach(markerInstance => {
-                if (markerInstance.pendingSuspenseBoundaries === null) {
-                  markerInstance.pendingSuspenseBoundaries = new Map();
+                // Add the root transition's pending suspense boundary set to
+                // the queue's marker set. We will iterate through the marker
+                // set when we toggle state on the suspense boundary and
+                // add or remove the pending suspense boundaries as needed.
+                if (rootIncompleteTransitions !== null) {
+                  if (!rootIncompleteTransitions.has(transition)) {
+                    rootIncompleteTransitions.set(transition, new Map());
+                  }
+                  instance.pendingMarkers.add(
+                    rootIncompleteTransitions.get(transition),
+                  );
                 }
+              });
+            }
 
-                const markerTransitions = markerInstance.transitions;
+            const tracingMarkers = queue.tracingMarkers;
+            if (tracingMarkers !== null) {
+              tracingMarkers.forEach(marker => {
+                const markerInstance = marker.stateNode;
                 // 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.has(transition)) {
-                      instance.pendingMarkers.add(
-                        markerInstance.pendingSuspenseBoundaries,
-                      );
-                    }
-                  });
-                }
+                markerInstance.transitions.forEach(transition => {
+                  if (instance.transitions.has(transition)) {
+                    instance.pendingMarkers.add(
+                      markerInstance.pendingSuspenseBoundaries,
+                    );
+                  }
+                });
               });
             }
           }
 
-          finishedWork.updateQueue = null;
-        }
+          commitTransitionProgress(finishedWork);
 
-        commitTransitionProgress(finishedWork);
+          if (
+            instance.pendingMarkers === null ||
+            instance.pendingMarkers.size === 0
+          ) {
+            finishedWork.updateQueue = null;
+          }
+        }
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7f596a12641c..677db2f10b0e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2811,35 +2811,47 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const root = finishedWork.stateNode;
-        const incompleteTransitions = root.incompleteTransitions;
+        let incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
+          if (incompleteTransitions === null) {
+            root.incompleteTransitions = incompleteTransitions = new Map();
+          }
+
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
+
+            if (!incompleteTransitions.has(transition)) {
+              incompleteTransitions.set(transition, null);
+            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        incompleteTransitions.forEach(
-          ({pendingSuspenseBoundaries}, transition) => {
-            if (
-              pendingSuspenseBoundaries === null ||
-              pendingSuspenseBoundaries.size === 0
-            ) {
+        if (incompleteTransitions !== null) {
+          incompleteTransitions.forEach((pendingBoundaries, transition) => {
+            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
               incompleteTransitions.delete(transition);
             }
-          },
-        );
+          });
+        }
 
-        clearTransitionsForLanes(finishedRoot, committedLanes);
+        // If there are no more pending suspense boundaries we
+        // clear the transitions because they are all complete.
+        if (
+          incompleteTransitions === null ||
+          incompleteTransitions.size === 0
+        ) {
+          root.incompleteTransitions = null;
+        }
       }
       break;
     }
@@ -2884,6 +2896,14 @@ function commitPassiveMountOnFiber(
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
+            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
+
+            // We lazily instantiate transition tracing relevant maps
+            // and sets in the commit phase as we need to use them. We only
+            // instantiate them in the fallback phase on an as needed basis
+            if (rootIncompleteTransitions === null) {
+              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
+            }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
             }
@@ -2891,43 +2911,56 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
+            // TODO(luna): Combine the root code with the tracing marker code
             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.
                 prevTransitions.add(transition);
-              });
-            }
 
-            const markerInstances = queue.markerInstances;
-            if (markerInstances !== null) {
-              markerInstances.forEach(markerInstance => {
-                if (markerInstance.pendingSuspenseBoundaries === null) {
-                  markerInstance.pendingSuspenseBoundaries = new Map();
+                // Add the root transition's pending suspense boundary set to
+                // the queue's marker set. We will iterate through the marker
+                // set when we toggle state on the suspense boundary and
+                // add or remove the pending suspense boundaries as needed.
+                if (rootIncompleteTransitions !== null) {
+                  if (!rootIncompleteTransitions.has(transition)) {
+                    rootIncompleteTransitions.set(transition, new Map());
+                  }
+                  instance.pendingMarkers.add(
+                    rootIncompleteTransitions.get(transition),
+                  );
                 }
+              });
+            }
 
-                const markerTransitions = markerInstance.transitions;
+            const tracingMarkers = queue.tracingMarkers;
+            if (tracingMarkers !== null) {
+              tracingMarkers.forEach(marker => {
+                const markerInstance = marker.stateNode;
                 // 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.has(transition)) {
-                      instance.pendingMarkers.add(
-                        markerInstance.pendingSuspenseBoundaries,
-                      );
-                    }
-                  });
-                }
+                markerInstance.transitions.forEach(transition => {
+                  if (instance.transitions.has(transition)) {
+                    instance.pendingMarkers.add(
+                      markerInstance.pendingSuspenseBoundaries,
+                    );
+                  }
+                });
               });
             }
           }
 
-          finishedWork.updateQueue = null;
-        }
+          commitTransitionProgress(finishedWork);
 
-        commitTransitionProgress(finishedWork);
+          if (
+            instance.pendingMarkers === null ||
+            instance.pendingMarkers.size === 0
+          ) {
+            finishedWork.updateQueue = null;
+          }
+        }
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 3fb9f8dfb126..913abb20c413 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -28,7 +28,6 @@ import type {
   SuspenseListRenderState,
 } from './ReactFiberSuspenseComponent.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
-import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import {
   enableSuspenseAvoidThisFallback,
@@ -165,10 +164,7 @@ import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
-import {
-  popMarkerInstance,
-  popRootMarkerInstance,
-} from './ReactFiberTracingMarkerComponent.new';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -904,11 +900,6 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
-
-      if (enableTransitionTracing) {
-        popRootMarkerInstance(workInProgress);
-      }
-
       popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -1588,10 +1579,7 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
-        if (instance !== null) {
-          popMarkerInstance(workInProgress);
-        }
+        popTracingMarker(workInProgress);
         bubbleProperties(workInProgress);
 
         if (
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 6dd8fb07ab09..1fc8a388ea2d 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -29,7 +29,6 @@ import type {
 } from './ReactFiberSuspenseComponent.old';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
-import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import {
   enableSuspenseAvoidThisFallback,
@@ -165,10 +164,7 @@ import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
-import {
-  popMarkerInstance,
-  popRootMarkerInstance,
-} from './ReactFiberTracingMarkerComponent.old';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -904,11 +900,6 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
-
-      if (enableTransitionTracing) {
-        popRootMarkerInstance(workInProgress);
-      }
-
       popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -1588,10 +1579,7 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
-        if (instance !== null) {
-          popMarkerInstance(workInProgress);
-        }
+        popTracingMarker(workInProgress);
         bubbleProperties(workInProgress);
 
         if (
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 4fdff5c8dfb0..00904d9fdd8e 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -8,12 +8,12 @@
  */
 
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {
   Transition,
   PendingSuspenseBoundaries,
-  TracingMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
 export type OffscreenProps = {|
@@ -39,7 +39,7 @@ export type OffscreenState = {|
 
 export type OffscreenQueue = {|
   transitions: Array<Transition> | null,
-  markerInstances: Array<TracingMarkerInstance> | null,
+  tracingMarkers: Array<Fiber> | null,
 |} | null;
 
 export type OffscreenInstance = {|
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index f171ca0de394..d8ac576f4fd4 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -92,13 +92,13 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
-  this.incompleteTransitions = new Map();
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
     const transitionLanesMap = (this.transitionLanes = []);
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
+    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 9b37cee41eda..7bf68ae5d270 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -92,13 +92,13 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
-  this.incompleteTransitions = new Map();
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
     const transitionLanesMap = (this.transitionLanes = []);
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
+    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 0eb87bc3d6db..3a136cda686f 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -13,7 +13,6 @@ import type {StackCursor} from './ReactFiberStack.new';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.new';
-import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -101,77 +100,31 @@ export function processTransitionCallbacks(
 // 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,
-);
+const tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
 
-export function pushRootMarkerInstance(workInProgress: Fiber): void {
+export function pushTracingMarker(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 = workInProgress.stateNode;
-
-    if (transitions !== null) {
-      transitions.forEach(transition => {
-        if (!root.incompleteTransitions.has(transition)) {
-          root.incompleteTransitions.set(transition, {
-            transitions: new Set([transition]),
-            pendingSuspenseBoundaries: null,
-          });
-        }
-      });
-    }
-
-    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);
+    if (tracingMarkerStack.current === null) {
+      push(tracingMarkerStack, [workInProgress], workInProgress);
     } else {
       push(
-        markerInstanceStack,
-        markerInstanceStack.current.concat(markerInstance),
+        tracingMarkerStack,
+        tracingMarkerStack.current.concat(workInProgress),
         workInProgress,
       );
     }
   }
 }
 
-export function popMarkerInstance(workInProgress: Fiber): void {
+export function popTracingMarker(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    pop(markerInstanceStack, workInProgress);
+    pop(tracingMarkerStack, workInProgress);
   }
 }
 
-export function getMarkerInstances(): Array<TracingMarkerInstance> | null {
+export function getTracingMarkers(): Array<Fiber> | null {
   if (enableTransitionTracing) {
-    return markerInstanceStack.current;
+    return tracingMarkerStack.current;
   }
   return null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 6f25d1f72b82..5f119b3a4b66 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -13,7 +13,6 @@ import type {StackCursor} from './ReactFiberStack.old';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.old';
-import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -101,77 +100,31 @@ export function processTransitionCallbacks(
 // 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,
-);
+const tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
 
-export function pushRootMarkerInstance(workInProgress: Fiber): void {
+export function pushTracingMarker(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 = workInProgress.stateNode;
-
-    if (transitions !== null) {
-      transitions.forEach(transition => {
-        if (!root.incompleteTransitions.has(transition)) {
-          root.incompleteTransitions.set(transition, {
-            transitions: new Set([transition]),
-            pendingSuspenseBoundaries: null,
-          });
-        }
-      });
-    }
-
-    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);
+    if (tracingMarkerStack.current === null) {
+      push(tracingMarkerStack, [workInProgress], workInProgress);
     } else {
       push(
-        markerInstanceStack,
-        markerInstanceStack.current.concat(markerInstance),
+        tracingMarkerStack,
+        tracingMarkerStack.current.concat(workInProgress),
         workInProgress,
       );
     }
   }
 }
 
-export function popMarkerInstance(workInProgress: Fiber): void {
+export function popTracingMarker(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    pop(markerInstanceStack, workInProgress);
+    pop(tracingMarkerStack, workInProgress);
   }
 }
 
-export function getMarkerInstances(): Array<TracingMarkerInstance> | null {
+export function getTracingMarkers(): Array<Fiber> | null {
   if (enableTransitionTracing) {
-    return markerInstanceStack.current;
+    return tracingMarkerStack.current;
   }
   return null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 2659a74d80fd..6b2dca917d39 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -12,7 +12,6 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
-import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
@@ -53,10 +52,7 @@ import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
-import {
-  popMarkerInstance,
-  popRootMarkerInstance,
-} from './ReactFiberTracingMarkerComponent.new';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
 
 function unwindWork(
   current: Fiber | null,
@@ -93,11 +89,6 @@ function unwindWork(
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
-
-      if (enableTransitionTracing) {
-        popRootMarkerInstance(workInProgress);
-      }
-
       popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -174,9 +165,7 @@ function unwindWork(
       return null;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        if (workInProgress.stateNode !== null) {
-          popMarkerInstance(workInProgress);
-        }
+        popTracingMarker(workInProgress);
       }
       return null;
     default:
@@ -208,11 +197,6 @@ function unwindInterruptedWork(
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
-
-      if (enableTransitionTracing) {
-        popRootMarkerInstance(interruptedWork);
-      }
-
       popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
@@ -249,11 +233,7 @@ function unwindInterruptedWork(
       break;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        const instance: TracingMarkerInstance | null =
-          interruptedWork.stateNode;
-        if (instance !== null) {
-          popMarkerInstance(interruptedWork);
-        }
+        popTracingMarker(interruptedWork);
       }
       break;
     default:
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index f56c8ce5d289..ba2e202dd552 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -12,7 +12,6 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
-import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 import {
@@ -50,10 +49,7 @@ import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
-import {
-  popMarkerInstance,
-  popRootMarkerInstance,
-} from './ReactFiberTracingMarkerComponent.old';
+import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
 
 function unwindWork(
   current: Fiber | null,
@@ -90,11 +86,6 @@ function unwindWork(
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
-
-      if (enableTransitionTracing) {
-        popRootMarkerInstance(workInProgress);
-      }
-
       popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -171,9 +162,7 @@ function unwindWork(
       return null;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        if (workInProgress.stateNode !== null) {
-          popMarkerInstance(workInProgress);
-        }
+        popTracingMarker(workInProgress);
       }
       return null;
     default:
@@ -205,11 +194,6 @@ function unwindInterruptedWork(
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
-
-      if (enableTransitionTracing) {
-        popRootMarkerInstance(interruptedWork);
-      }
-
       popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
@@ -246,11 +230,7 @@ function unwindInterruptedWork(
       break;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        const instance: TracingMarkerInstance | null =
-          interruptedWork.stateNode;
-        if (instance !== null) {
-          popMarkerInstance(interruptedWork);
-        }
+        popTracingMarker(interruptedWork);
       }
       break;
     default:
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 8aad50f4bfc6..0f6e9bcaf79f 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -335,7 +335,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // 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, PendingSuspenseBoundaries>,
+  incompleteTransitions: Map<Transition, PendingSuspenseBoundaries> | null,
 |};
 
 // Exported FiberRoot type includes all properties,

From 4cd788aef03d8f32c03e4dac4d0cf28b220cedfb Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 30 Jun 2022 13:16:08 -0400
Subject: [PATCH 1456/1603] Revert "Revert [Transition Tracing] Refactor
 Transition Tracing Root Code" (#24830)

* refactor root

* old

* Add comments and push actual marker instance in pushMarkerInstance

* old

* refactor pushRootMarkerInstance

* old

* fix test
---
 .../react-reconciler/src/ReactFiber.new.js    |  7 +-
 .../react-reconciler/src/ReactFiber.old.js    |  7 +-
 .../src/ReactFiberBeginWork.new.js            | 37 ++++++--
 .../src/ReactFiberBeginWork.old.js            | 37 ++++++--
 .../src/ReactFiberCommitWork.new.js           | 93 ++++++-------------
 .../src/ReactFiberCommitWork.old.js           | 93 ++++++-------------
 .../src/ReactFiberCompleteWork.new.js         | 16 +++-
 .../src/ReactFiberCompleteWork.old.js         | 16 +++-
 .../src/ReactFiberOffscreenComponent.js       |  4 +-
 .../src/ReactFiberRoot.new.js                 |  2 +-
 .../src/ReactFiberRoot.old.js                 |  2 +-
 .../ReactFiberTracingMarkerComponent.new.js   | 67 +++++++++++--
 .../ReactFiberTracingMarkerComponent.old.js   | 67 +++++++++++--
 .../src/ReactFiberUnwindWork.new.js           | 26 +++++-
 .../src/ReactFiberUnwindWork.old.js           | 26 +++++-
 .../src/ReactInternalTypes.js                 |  2 +-
 16 files changed, 321 insertions(+), 181 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index e81801ad5c8f..6865ef0b67a2 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -736,7 +736,12 @@ export function createFiberFromLegacyHidden(
   fiber.lanes = lanes;
   // Adding a stateNode for legacy hidden because it's currently using
   // the offscreen implementation, which depends on a state node
-  fiber.stateNode = {};
+  const instance: OffscreenInstance = {
+    isHidden: false,
+    pendingMarkers: null,
+    transitions: null,
+  };
+  fiber.stateNode = instance;
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 75fcba88bbd1..1dac6117dfd0 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -736,7 +736,12 @@ export function createFiberFromLegacyHidden(
   fiber.lanes = lanes;
   // Adding a stateNode for legacy hidden because it's currently using
   // the offscreen implementation, which depends on a state node
-  fiber.stateNode = {};
+  const instance: OffscreenInstance = {
+    isHidden: false,
+    pendingMarkers: null,
+    transitions: null,
+  };
+  fiber.stateNode = instance;
   return fiber;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index e4f4d7173b4b..2816e72c6007 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -27,6 +27,7 @@ import type {
   OffscreenProps,
   OffscreenState,
   OffscreenQueue,
+  OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -262,8 +263,9 @@ import {
   getPendingTransitions,
 } from './ReactFiberTransition.new';
 import {
-  getTracingMarkers,
-  pushTracingMarker,
+  getMarkerInstances,
+  pushMarkerInstance,
+  pushRootMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -779,7 +781,10 @@ function updateOffscreenComponent(
       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
-        transitions = workInProgress.stateNode.transitions;
+        const instance: OffscreenInstance | null = workInProgress.stateNode;
+        if (instance !== null && instance.transitions != null) {
+          transitions = Array.from(instance.transitions);
+        }
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(
     }
   }
 
-  pushTracingMarker(workInProgress);
+  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+  if (instance !== null) {
+    pushMarkerInstance(workInProgress, instance);
+  }
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const root: FiberRoot = workInProgress.stateNode;
   pushRootTransition(workInProgress, root, renderLanes);
 
+  if (enableTransitionTracing) {
+    pushRootMarkerInstance(workInProgress);
+  }
+
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
     pushCacheProvider(workInProgress, nextCache);
@@ -2098,10 +2110,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           // If there are no transitions, we don't need to keep track of tracing markers
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2188,10 +2200,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -3509,6 +3521,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const root: FiberRoot = workInProgress.stateNode;
       pushRootTransition(workInProgress, root, renderLanes);
 
+      if (enableTransitionTracing) {
+        pushRootMarkerInstance(workInProgress);
+      }
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
@@ -3694,7 +3710,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        pushTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          pushMarkerInstance(workInProgress, instance);
+        }
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index ca25b272e473..8b19780af34d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -27,6 +27,7 @@ import type {
   OffscreenProps,
   OffscreenState,
   OffscreenQueue,
+  OffscreenInstance,
 } from './ReactFiberOffscreenComponent';
 import type {
   Cache,
@@ -259,8 +260,9 @@ import {
   getPendingTransitions,
 } from './ReactFiberTransition.old';
 import {
-  getTracingMarkers,
-  pushTracingMarker,
+  getMarkerInstances,
+  pushMarkerInstance,
+  pushRootMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -784,7 +786,10 @@ function updateOffscreenComponent(
       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
-        transitions = workInProgress.stateNode.transitions;
+        const instance: OffscreenInstance | null = workInProgress.stateNode;
+        if (instance !== null && instance.transitions != null) {
+          transitions = Array.from(instance.transitions);
+        }
       }
 
       pushTransition(workInProgress, prevCachePool, transitions);
@@ -909,7 +914,10 @@ function updateTracingMarkerComponent(
     }
   }
 
-  pushTracingMarker(workInProgress);
+  const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+  if (instance !== null) {
+    pushMarkerInstance(workInProgress, instance);
+  }
   const nextChildren = workInProgress.pendingProps.children;
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
@@ -1313,6 +1321,10 @@ function updateHostRoot(current, workInProgress, renderLanes) {
   const root: FiberRoot = workInProgress.stateNode;
   pushRootTransition(workInProgress, root, renderLanes);
 
+  if (enableTransitionTracing) {
+    pushRootMarkerInstance(workInProgress);
+  }
+
   if (enableCache) {
     const nextCache: Cache = nextState.cache;
     pushCacheProvider(workInProgress, nextCache);
@@ -2114,10 +2126,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           // If there are no transitions, we don't need to keep track of tracing markers
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2200,10 +2212,10 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          const currentTracingMarkers = getTracingMarkers();
+          const parentMarkerInstances = getMarkerInstances();
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
-            tracingMarkers: currentTracingMarkers,
+            markerInstances: parentMarkerInstances,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -3510,6 +3522,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const root: FiberRoot = workInProgress.stateNode;
       pushRootTransition(workInProgress, root, renderLanes);
 
+      if (enableTransitionTracing) {
+        pushRootMarkerInstance(workInProgress);
+      }
+
       if (enableCache) {
         const cache: Cache = current.memoizedState.cache;
         pushCacheProvider(workInProgress, cache);
@@ -3702,7 +3718,10 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        pushTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          pushMarkerInstance(workInProgress, instance);
+        }
       }
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index da00d7761f9c..30709cffa506 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2811,47 +2811,35 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const root = finishedWork.stateNode;
-        let incompleteTransitions = root.incompleteTransitions;
+        const incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (incompleteTransitions === null) {
-            root.incompleteTransitions = incompleteTransitions = new Map();
-          }
-
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
-
-            if (!incompleteTransitions.has(transition)) {
-              incompleteTransitions.set(transition, null);
-            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        if (incompleteTransitions !== null) {
-          incompleteTransitions.forEach((pendingBoundaries, transition) => {
-            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+        incompleteTransitions.forEach(
+          ({pendingSuspenseBoundaries}, transition) => {
+            if (
+              pendingSuspenseBoundaries === null ||
+              pendingSuspenseBoundaries.size === 0
+            ) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
               incompleteTransitions.delete(transition);
             }
-          });
-        }
+          },
+        );
 
-        // If there are no more pending suspense boundaries we
-        // clear the transitions because they are all complete.
-        if (
-          incompleteTransitions === null ||
-          incompleteTransitions.size === 0
-        ) {
-          root.incompleteTransitions = null;
-        }
+        clearTransitionsForLanes(finishedRoot, committedLanes);
       }
       break;
     }
@@ -2896,14 +2884,6 @@ function commitPassiveMountOnFiber(
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
-
-            // We lazily instantiate transition tracing relevant maps
-            // and sets in the commit phase as we need to use them. We only
-            // instantiate them in the fallback phase on an as needed basis
-            if (rootIncompleteTransitions === null) {
-              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
-            }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
             }
@@ -2911,56 +2891,43 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
-            // TODO(luna): Combine the root code with the tracing marker code
             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.
                 prevTransitions.add(transition);
-
-                // Add the root transition's pending suspense boundary set to
-                // the queue's marker set. We will iterate through the marker
-                // set when we toggle state on the suspense boundary and
-                // add or remove the pending suspense boundaries as needed.
-                if (rootIncompleteTransitions !== null) {
-                  if (!rootIncompleteTransitions.has(transition)) {
-                    rootIncompleteTransitions.set(transition, new Map());
-                  }
-                  instance.pendingMarkers.add(
-                    rootIncompleteTransitions.get(transition),
-                  );
-                }
               });
             }
 
-            const tracingMarkers = queue.tracingMarkers;
-            if (tracingMarkers !== null) {
-              tracingMarkers.forEach(marker => {
-                const markerInstance = marker.stateNode;
+            const markerInstances = queue.markerInstances;
+            if (markerInstances !== null) {
+              markerInstances.forEach(markerInstance => {
+                if (markerInstance.pendingSuspenseBoundaries === null) {
+                  markerInstance.pendingSuspenseBoundaries = new Map();
+                }
+
+                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
-                markerInstance.transitions.forEach(transition => {
-                  if (instance.transitions.has(transition)) {
-                    instance.pendingMarkers.add(
-                      markerInstance.pendingSuspenseBoundaries,
-                    );
-                  }
-                });
+                if (markerTransitions !== null) {
+                  markerTransitions.forEach(transition => {
+                    if (instance.transitions.has(transition)) {
+                      instance.pendingMarkers.add(
+                        markerInstance.pendingSuspenseBoundaries,
+                      );
+                    }
+                  });
+                }
               });
             }
           }
 
-          commitTransitionProgress(finishedWork);
-
-          if (
-            instance.pendingMarkers === null ||
-            instance.pendingMarkers.size === 0
-          ) {
-            finishedWork.updateQueue = null;
-          }
+          finishedWork.updateQueue = null;
         }
+
+        commitTransitionProgress(finishedWork);
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 677db2f10b0e..7f596a12641c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2811,47 +2811,35 @@ function commitPassiveMountOnFiber(
         // Get the transitions that were initiatized during the render
         // and add a start transition callback for each of them
         const root = finishedWork.stateNode;
-        let incompleteTransitions = root.incompleteTransitions;
+        const incompleteTransitions = root.incompleteTransitions;
         // Initial render
         if (committedTransitions !== null) {
-          if (incompleteTransitions === null) {
-            root.incompleteTransitions = incompleteTransitions = new Map();
-          }
-
           committedTransitions.forEach(transition => {
             addTransitionStartCallbackToPendingTransition({
               transitionName: transition.name,
               startTime: transition.startTime,
             });
-
-            if (!incompleteTransitions.has(transition)) {
-              incompleteTransitions.set(transition, null);
-            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        if (incompleteTransitions !== null) {
-          incompleteTransitions.forEach((pendingBoundaries, transition) => {
-            if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+        incompleteTransitions.forEach(
+          ({pendingSuspenseBoundaries}, transition) => {
+            if (
+              pendingSuspenseBoundaries === null ||
+              pendingSuspenseBoundaries.size === 0
+            ) {
               addTransitionCompleteCallbackToPendingTransition({
                 transitionName: transition.name,
                 startTime: transition.startTime,
               });
               incompleteTransitions.delete(transition);
             }
-          });
-        }
+          },
+        );
 
-        // If there are no more pending suspense boundaries we
-        // clear the transitions because they are all complete.
-        if (
-          incompleteTransitions === null ||
-          incompleteTransitions.size === 0
-        ) {
-          root.incompleteTransitions = null;
-        }
+        clearTransitionsForLanes(finishedRoot, committedLanes);
       }
       break;
     }
@@ -2896,14 +2884,6 @@ function commitPassiveMountOnFiber(
           if (isFallback) {
             const transitions = queue.transitions;
             let prevTransitions = instance.transitions;
-            let rootIncompleteTransitions = finishedRoot.incompleteTransitions;
-
-            // We lazily instantiate transition tracing relevant maps
-            // and sets in the commit phase as we need to use them. We only
-            // instantiate them in the fallback phase on an as needed basis
-            if (rootIncompleteTransitions === null) {
-              finishedRoot.incompleteTransitions = rootIncompleteTransitions = new Map();
-            }
             if (instance.pendingMarkers === null) {
               instance.pendingMarkers = new Set();
             }
@@ -2911,56 +2891,43 @@ function commitPassiveMountOnFiber(
               instance.transitions = prevTransitions = new Set();
             }
 
-            // TODO(luna): Combine the root code with the tracing marker code
             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.
                 prevTransitions.add(transition);
-
-                // Add the root transition's pending suspense boundary set to
-                // the queue's marker set. We will iterate through the marker
-                // set when we toggle state on the suspense boundary and
-                // add or remove the pending suspense boundaries as needed.
-                if (rootIncompleteTransitions !== null) {
-                  if (!rootIncompleteTransitions.has(transition)) {
-                    rootIncompleteTransitions.set(transition, new Map());
-                  }
-                  instance.pendingMarkers.add(
-                    rootIncompleteTransitions.get(transition),
-                  );
-                }
               });
             }
 
-            const tracingMarkers = queue.tracingMarkers;
-            if (tracingMarkers !== null) {
-              tracingMarkers.forEach(marker => {
-                const markerInstance = marker.stateNode;
+            const markerInstances = queue.markerInstances;
+            if (markerInstances !== null) {
+              markerInstances.forEach(markerInstance => {
+                if (markerInstance.pendingSuspenseBoundaries === null) {
+                  markerInstance.pendingSuspenseBoundaries = new Map();
+                }
+
+                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
-                markerInstance.transitions.forEach(transition => {
-                  if (instance.transitions.has(transition)) {
-                    instance.pendingMarkers.add(
-                      markerInstance.pendingSuspenseBoundaries,
-                    );
-                  }
-                });
+                if (markerTransitions !== null) {
+                  markerTransitions.forEach(transition => {
+                    if (instance.transitions.has(transition)) {
+                      instance.pendingMarkers.add(
+                        markerInstance.pendingSuspenseBoundaries,
+                      );
+                    }
+                  });
+                }
               });
             }
           }
 
-          commitTransitionProgress(finishedWork);
-
-          if (
-            instance.pendingMarkers === null ||
-            instance.pendingMarkers.size === 0
-          ) {
-            finishedWork.updateQueue = null;
-          }
+          finishedWork.updateQueue = null;
         }
+
+        commitTransitionProgress(finishedWork);
       }
 
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 913abb20c413..3fb9f8dfb126 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -28,6 +28,7 @@ import type {
   SuspenseListRenderState,
 } from './ReactFiberSuspenseComponent.new';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import {
   enableSuspenseAvoidThisFallback,
@@ -164,7 +165,10 @@ import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.new';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -900,6 +904,11 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -1579,7 +1588,10 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(workInProgress);
+        }
         bubbleProperties(workInProgress);
 
         if (
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1fc8a388ea2d..6dd8fb07ab09 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -29,6 +29,7 @@ import type {
 } from './ReactFiberSuspenseComponent.old';
 import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import {
   enableSuspenseAvoidThisFallback,
@@ -164,7 +165,10 @@ import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.old';
 
 function markUpdate(workInProgress: Fiber) {
   // Tag the fiber with an update effect. This turns a Placement into
@@ -900,6 +904,11 @@ function completeWork(
         }
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, fiberRoot, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -1579,7 +1588,10 @@ function completeWork(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        const instance: TracingMarkerInstance | null = workInProgress.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(workInProgress);
+        }
         bubbleProperties(workInProgress);
 
         if (
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 00904d9fdd8e..4fdff5c8dfb0 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -8,12 +8,12 @@
  */
 
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
-import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {
   Transition,
   PendingSuspenseBoundaries,
+  TracingMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
 export type OffscreenProps = {|
@@ -39,7 +39,7 @@ export type OffscreenState = {|
 
 export type OffscreenQueue = {|
   transitions: Array<Transition> | null,
-  tracingMarkers: Array<Fiber> | null,
+  markerInstances: Array<TracingMarkerInstance> | null,
 |} | null;
 
 export type OffscreenInstance = {|
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index d8ac576f4fd4..f171ca0de394 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -92,13 +92,13 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
+  this.incompleteTransitions = new Map();
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
     const transitionLanesMap = (this.transitionLanes = []);
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
-    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 7bf68ae5d270..9b37cee41eda 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -92,13 +92,13 @@ function FiberRootNode(
     this.hydrationCallbacks = null;
   }
 
+  this.incompleteTransitions = new Map();
   if (enableTransitionTracing) {
     this.transitionCallbacks = null;
     const transitionLanesMap = (this.transitionLanes = []);
     for (let i = 0; i < TotalLanes; i++) {
       transitionLanesMap.push(null);
     }
-    this.incompleteTransitions = null;
   }
 
   if (enableProfilerTimer && enableProfilerCommitHooks) {
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 3a136cda686f..0eb87bc3d6db 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -13,6 +13,7 @@ import type {StackCursor} from './ReactFiberStack.new';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.new';
+import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -100,31 +101,77 @@ export function processTransitionCallbacks(
 // 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 tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
+const markerInstanceStack: StackCursor<Array<TracingMarkerInstance> | null> = createCursor(
+  null,
+);
 
-export function pushTracingMarker(workInProgress: Fiber): void {
+export function pushRootMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    if (tracingMarkerStack.current === null) {
-      push(tracingMarkerStack, [workInProgress], workInProgress);
+    // 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 = workInProgress.stateNode;
+
+    if (transitions !== null) {
+      transitions.forEach(transition => {
+        if (!root.incompleteTransitions.has(transition)) {
+          root.incompleteTransitions.set(transition, {
+            transitions: new Set([transition]),
+            pendingSuspenseBoundaries: null,
+          });
+        }
+      });
+    }
+
+    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(
-        tracingMarkerStack,
-        tracingMarkerStack.current.concat(workInProgress),
+        markerInstanceStack,
+        markerInstanceStack.current.concat(markerInstance),
         workInProgress,
       );
     }
   }
 }
 
-export function popTracingMarker(workInProgress: Fiber): void {
+export function popMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    pop(tracingMarkerStack, workInProgress);
+    pop(markerInstanceStack, workInProgress);
   }
 }
 
-export function getTracingMarkers(): Array<Fiber> | null {
+export function getMarkerInstances(): Array<TracingMarkerInstance> | null {
   if (enableTransitionTracing) {
-    return tracingMarkerStack.current;
+    return markerInstanceStack.current;
   }
   return null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 5f119b3a4b66..6f25d1f72b82 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -13,6 +13,7 @@ import type {StackCursor} from './ReactFiberStack.old';
 
 import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.old';
+import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
 export type SuspenseInfo = {name: string | null};
 
@@ -100,31 +101,77 @@ export function processTransitionCallbacks(
 // 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 tracingMarkerStack: StackCursor<Array<Fiber> | null> = createCursor(null);
+const markerInstanceStack: StackCursor<Array<TracingMarkerInstance> | null> = createCursor(
+  null,
+);
 
-export function pushTracingMarker(workInProgress: Fiber): void {
+export function pushRootMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    if (tracingMarkerStack.current === null) {
-      push(tracingMarkerStack, [workInProgress], workInProgress);
+    // 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 = workInProgress.stateNode;
+
+    if (transitions !== null) {
+      transitions.forEach(transition => {
+        if (!root.incompleteTransitions.has(transition)) {
+          root.incompleteTransitions.set(transition, {
+            transitions: new Set([transition]),
+            pendingSuspenseBoundaries: null,
+          });
+        }
+      });
+    }
+
+    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(
-        tracingMarkerStack,
-        tracingMarkerStack.current.concat(workInProgress),
+        markerInstanceStack,
+        markerInstanceStack.current.concat(markerInstance),
         workInProgress,
       );
     }
   }
 }
 
-export function popTracingMarker(workInProgress: Fiber): void {
+export function popMarkerInstance(workInProgress: Fiber): void {
   if (enableTransitionTracing) {
-    pop(tracingMarkerStack, workInProgress);
+    pop(markerInstanceStack, workInProgress);
   }
 }
 
-export function getTracingMarkers(): Array<Fiber> | null {
+export function getMarkerInstances(): Array<TracingMarkerInstance> | null {
   if (enableTransitionTracing) {
-    return tracingMarkerStack.current;
+    return markerInstanceStack.current;
   }
   return null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 6b2dca917d39..2659a74d80fd 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -12,6 +12,7 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.new';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.new';
 import {
@@ -52,7 +53,10 @@ import {popCacheProvider} from './ReactFiberCacheComponent.new';
 import {transferActualDuration} from './ReactProfilerTimer.new';
 import {popTreeContext} from './ReactFiberTreeContext.new';
 import {popRootTransition, popTransition} from './ReactFiberTransition.new';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.new';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.new';
 
 function unwindWork(
   current: Fiber | null,
@@ -89,6 +93,11 @@ function unwindWork(
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -165,7 +174,9 @@ function unwindWork(
       return null;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        if (workInProgress.stateNode !== null) {
+          popMarkerInstance(workInProgress);
+        }
       }
       return null;
     default:
@@ -197,6 +208,11 @@ function unwindInterruptedWork(
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(interruptedWork);
+      }
+
       popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
@@ -233,7 +249,11 @@ function unwindInterruptedWork(
       break;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(interruptedWork);
+        const instance: TracingMarkerInstance | null =
+          interruptedWork.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(interruptedWork);
+        }
       }
       break;
     default:
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index ba2e202dd552..f56c8ce5d289 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -12,6 +12,7 @@ import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 
 import {resetWorkInProgressVersions as resetMutableSourceWorkInProgressVersions} from './ReactMutableSource.old';
 import {
@@ -49,7 +50,10 @@ import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
 import {popRootTransition, popTransition} from './ReactFiberTransition.old';
-import {popTracingMarker} from './ReactFiberTracingMarkerComponent.old';
+import {
+  popMarkerInstance,
+  popRootMarkerInstance,
+} from './ReactFiberTracingMarkerComponent.old';
 
 function unwindWork(
   current: Fiber | null,
@@ -86,6 +90,11 @@ function unwindWork(
         const cache: Cache = workInProgress.memoizedState.cache;
         popCacheProvider(workInProgress, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(workInProgress);
+      }
+
       popRootTransition(workInProgress, root, renderLanes);
       popHostContainer(workInProgress);
       popTopLevelLegacyContextObject(workInProgress);
@@ -162,7 +171,9 @@ function unwindWork(
       return null;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(workInProgress);
+        if (workInProgress.stateNode !== null) {
+          popMarkerInstance(workInProgress);
+        }
       }
       return null;
     default:
@@ -194,6 +205,11 @@ function unwindInterruptedWork(
         const cache: Cache = interruptedWork.memoizedState.cache;
         popCacheProvider(interruptedWork, cache);
       }
+
+      if (enableTransitionTracing) {
+        popRootMarkerInstance(interruptedWork);
+      }
+
       popRootTransition(interruptedWork, root, renderLanes);
       popHostContainer(interruptedWork);
       popTopLevelLegacyContextObject(interruptedWork);
@@ -230,7 +246,11 @@ function unwindInterruptedWork(
       break;
     case TracingMarkerComponent:
       if (enableTransitionTracing) {
-        popTracingMarker(interruptedWork);
+        const instance: TracingMarkerInstance | null =
+          interruptedWork.stateNode;
+        if (instance !== null) {
+          popMarkerInstance(interruptedWork);
+        }
       }
       break;
     default:
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 0f6e9bcaf79f..8aad50f4bfc6 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -335,7 +335,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // 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, PendingSuspenseBoundaries> | null,
+  incompleteTransitions: Map<Transition, PendingSuspenseBoundaries>,
 |};
 
 // Exported FiberRoot type includes all properties,

From c1f5884ffeceb8be2277e10c81aeaffca2dfe9d8 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 5 Jul 2022 11:40:44 -0400
Subject: [PATCH 1457/1603] Add missing null checks to OffscreenInstance code
 (#24846)

`stateNode` is any-typed, so when reading from `stateNode` we should always cast
it to the specific type for that type of work. I noticed a place in the commit
phase where OffscreenInstance wasn't being cast. When I added the type
assertion, it exposed some type errors where nullable values were being accessed
without first being refined.

I added the required null checks without verifying the logic of the existing
code. If the existing logic was correct, then the extra null checks won't have
any affect on the behavior, because all they do is refine from a nullable type
to a non-nullable type in places where the type was assumed to already be
non-nullable. But the result looks a bit fishy to me, so I also left behind some
TODOs to follow up and verify it's correct.
---
 .../src/ReactFiberCommitWork.new.js           | 31 ++++++++++++++-----
 .../src/ReactFiberCommitWork.old.js           | 31 ++++++++++++++-----
 .../ReactFiberTracingMarkerComponent.new.js   |  2 +-
 .../ReactFiberTracingMarkerComponent.old.js   |  2 +-
 4 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 30709cffa506..3d6d9cde8b29 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -25,6 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {
   OffscreenState,
   OffscreenInstance,
+  OffscreenQueue,
 } from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
@@ -2877,8 +2878,8 @@ function commitPassiveMountOnFiber(
 
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
-        const queue = (finishedWork.updateQueue: any);
-        const instance = finishedWork.stateNode;
+        const queue: OffscreenQueue = (finishedWork.updateQueue: any);
+        const instance: OffscreenInstance = finishedWork.stateNode;
 
         if (queue !== null) {
           if (isFallback) {
@@ -2896,7 +2897,11 @@ function commitPassiveMountOnFiber(
                 // Add all the transitions saved in the update queue during
                 // the render phase (ie the transitions associated with this boundary)
                 // into the transitions set.
-                prevTransitions.add(transition);
+                if (prevTransitions === null) {
+                  // TODO: What if prevTransitions is null?
+                } else {
+                  prevTransitions.add(transition);
+                }
               });
             }
 
@@ -2913,10 +2918,22 @@ function commitPassiveMountOnFiber(
                 // caused them
                 if (markerTransitions !== null) {
                   markerTransitions.forEach(transition => {
-                    if (instance.transitions.has(transition)) {
-                      instance.pendingMarkers.add(
-                        markerInstance.pendingSuspenseBoundaries,
-                      );
+                    if (instance.transitions === null) {
+                      // TODO: What if instance.transitions is null?
+                    } else {
+                      if (instance.transitions.has(transition)) {
+                        if (
+                          instance.pendingMarkers === null ||
+                          markerInstance.pendingSuspenseBoundaries === null
+                        ) {
+                          // TODO: What if instance.pendingMarkers is null?
+                          // TODO: What if markerInstance.pendingSuspenseBoundaries is null?
+                        } else {
+                          instance.pendingMarkers.add(
+                            markerInstance.pendingSuspenseBoundaries,
+                          );
+                        }
+                      }
                     }
                   });
                 }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7f596a12641c..4c1cb2226c96 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -25,6 +25,7 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {
   OffscreenState,
   OffscreenInstance,
+  OffscreenQueue,
 } from './ReactFiberOffscreenComponent';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
@@ -2877,8 +2878,8 @@ function commitPassiveMountOnFiber(
 
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
-        const queue = (finishedWork.updateQueue: any);
-        const instance = finishedWork.stateNode;
+        const queue: OffscreenQueue = (finishedWork.updateQueue: any);
+        const instance: OffscreenInstance = finishedWork.stateNode;
 
         if (queue !== null) {
           if (isFallback) {
@@ -2896,7 +2897,11 @@ function commitPassiveMountOnFiber(
                 // Add all the transitions saved in the update queue during
                 // the render phase (ie the transitions associated with this boundary)
                 // into the transitions set.
-                prevTransitions.add(transition);
+                if (prevTransitions === null) {
+                  // TODO: What if prevTransitions is null?
+                } else {
+                  prevTransitions.add(transition);
+                }
               });
             }
 
@@ -2913,10 +2918,22 @@ function commitPassiveMountOnFiber(
                 // caused them
                 if (markerTransitions !== null) {
                   markerTransitions.forEach(transition => {
-                    if (instance.transitions.has(transition)) {
-                      instance.pendingMarkers.add(
-                        markerInstance.pendingSuspenseBoundaries,
-                      );
+                    if (instance.transitions === null) {
+                      // TODO: What if instance.transitions is null?
+                    } else {
+                      if (instance.transitions.has(transition)) {
+                        if (
+                          instance.pendingMarkers === null ||
+                          markerInstance.pendingSuspenseBoundaries === null
+                        ) {
+                          // TODO: What if instance.pendingMarkers is null?
+                          // TODO: What if markerInstance.pendingSuspenseBoundaries is null?
+                        } else {
+                          instance.pendingMarkers.add(
+                            markerInstance.pendingSuspenseBoundaries,
+                          );
+                        }
+                      }
                     }
                   });
                 }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 0eb87bc3d6db..23d02575c1fa 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -43,7 +43,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
-|} | null;
+|};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 6f25d1f72b82..0bbdd053883f 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -43,7 +43,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
-|} | null;
+|};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 

From 82e9e9909876591dbe808cdac7110610e63c3896 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 5 Jul 2022 17:51:27 -0400
Subject: [PATCH 1458/1603] Suspending inside a hidden tree should not cause
 fallbacks to appear (#24699)

* [FORKED] Hidden trees should capture Suspense

If something suspends inside a hidden tree, it should not affect
anything in the visible part of the UI. This means that Offscreen acts
like a Suspense boundary whenever it's in its hidden state.

* Add previous commit to forked revisions
---
 .../react-reconciler/src/ReactFiber.new.js    |   2 +
 .../react-reconciler/src/ReactFiber.old.js    |   2 +
 .../src/ReactFiberBeginWork.new.js            | 189 +++++++---
 .../src/ReactFiberBeginWork.old.js            |   2 +
 .../src/ReactFiberCommitWork.new.js           | 107 ++++--
 .../src/ReactFiberCommitWork.old.js           |   2 +-
 .../src/ReactFiberCompleteWork.new.js         |  13 +-
 .../src/ReactFiberOffscreenComponent.js       |   6 +-
 .../src/ReactFiberSuspenseContext.new.js      |  15 +-
 .../src/ReactFiberThrow.new.js                |  98 ++++--
 .../src/ReactFiberUnwindWork.new.js           |  17 +-
 .../src/ReactFiberWorkLoop.new.js             |   7 +
 .../__tests__/ReactOffscreenSuspense-test.js  | 326 ++++++++++++++++++
 scripts/error-codes/codes.json                |   5 +-
 scripts/merge-fork/forked-revisions           |   3 +-
 15 files changed, 672 insertions(+), 122 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 6865ef0b67a2..91d1211c2072 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -719,6 +719,7 @@ export function createFiberFromOffscreen(
   const primaryChildInstance: OffscreenInstance = {
     isHidden: false,
     pendingMarkers: null,
+    retryCache: null,
     transitions: null,
   };
   fiber.stateNode = primaryChildInstance;
@@ -740,6 +741,7 @@ export function createFiberFromLegacyHidden(
     isHidden: false,
     pendingMarkers: null,
     transitions: null,
+    retryCache: null,
   };
   fiber.stateNode = instance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 1dac6117dfd0..90d0d7a7ac6f 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -719,6 +719,7 @@ export function createFiberFromOffscreen(
   const primaryChildInstance: OffscreenInstance = {
     isHidden: false,
     pendingMarkers: null,
+    retryCache: null,
     transitions: null,
   };
   fiber.stateNode = primaryChildInstance;
@@ -740,6 +741,7 @@ export function createFiberFromLegacyHidden(
     isHidden: false,
     pendingMarkers: null,
     transitions: null,
+    retryCache: null,
   };
   fiber.stateNode = instance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 2816e72c6007..c3bf502ac618 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -174,6 +174,8 @@ import {
   setShallowSuspenseListContext,
   pushPrimaryTreeSuspenseHandler,
   pushFallbackTreeSuspenseHandler,
+  pushOffscreenSuspenseHandler,
+  reuseSuspenseHandlerOnStack,
   popSuspenseHandler,
 } from './ReactFiberSuspenseContext.new';
 import {
@@ -678,6 +680,52 @@ function updateOffscreenComponent(
     (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;
+
+      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 = NoLanes;
+        while (currentChild !== null) {
+          currentChildLanes = mergeLanes(
+            mergeLanes(currentChildLanes, currentChild.lanes),
+            currentChild.childLanes,
+          );
+          currentChild = currentChild.sibling;
+        }
+        const lanesWeJustAttempted = nextBaseLanes;
+        const remainingChildLanes = removeLanes(
+          currentChildLanes,
+          lanesWeJustAttempted,
+        );
+        workInProgress.childLanes = remainingChildLanes;
+      } else {
+        workInProgress.childLanes = NoLanes;
+        workInProgress.child = null;
+      }
+
+      return deferHiddenOffscreenComponent(
+        current,
+        workInProgress,
+        nextBaseLanes,
+        renderLanes,
+      );
+    }
+
     if ((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
@@ -694,50 +742,28 @@ function updateOffscreenComponent(
         }
       }
       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.
-      let nextBaseLanes = renderLanes;
-      if (prevState !== null) {
-        // Include the base lanes from the last render
-        nextBaseLanes = mergeLanes(nextBaseLanes, prevState.baseLanes);
-      }
 
-      // Schedule this fiber to re-render at offscreen priority. Then bailout.
+      // Schedule this fiber to re-render at Offscreen priority
       workInProgress.lanes = workInProgress.childLanes = laneToLanes(
         OffscreenLane,
       );
-      const nextState: OffscreenState = {
-        baseLanes: nextBaseLanes,
-        // Save the cache pool so we can resume later.
-        cachePool: enableCache ? getOffscreenDeferredCache() : null,
-      };
-      workInProgress.memoizedState = nextState;
-      workInProgress.updateQueue = null;
-      if (enableCache) {
-        // 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);
 
-      if (enableLazyContextPropagation && 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,
-        );
-      }
+      // Include the base lanes from the last render
+      const nextBaseLanes =
+        prevState !== null
+          ? mergeLanes(prevState.baseLanes, renderLanes)
+          : renderLanes;
 
-      return null;
+      return deferHiddenOffscreenComponent(
+        current,
+        workInProgress,
+        nextBaseLanes,
+        renderLanes,
+      );
     } else {
       // This is the second render. The surrounding visible content has already
       // committed. Now we resume rendering the hidden tree.
@@ -764,6 +790,7 @@ function updateOffscreenComponent(
       } else {
         reuseHiddenContextOnStack(workInProgress);
       }
+      pushOffscreenSuspenseHandler(workInProgress);
     }
   } else {
     // Rendering a visible tree.
@@ -791,6 +818,7 @@ function updateOffscreenComponent(
 
       // 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;
@@ -811,6 +839,7 @@ function updateOffscreenComponent(
       // 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);
     }
   }
 
@@ -818,6 +847,46 @@ function updateOffscreenComponent(
   return workInProgress.child;
 }
 
+function deferHiddenOffscreenComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextBaseLanes: Lanes,
+  renderLanes: Lanes,
+) {
+  const nextState: OffscreenState = {
+    baseLanes: nextBaseLanes,
+    // Save the cache pool so we can resume later.
+    cachePool: enableCache ? getOffscreenDeferredCache() : null,
+  };
+  workInProgress.memoizedState = nextState;
+  if (enableCache) {
+    // 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 (enableLazyContextPropagation && 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,
+    );
+  }
+
+  return null;
+}
+
 // 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.
@@ -2109,13 +2178,19 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          // If there are no transitions, we don't need to keep track of tracing markers
           const parentMarkerInstances = getMarkerInstances();
-          const primaryChildUpdateQueue: OffscreenQueue = {
-            transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
-          };
-          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          const offscreenQueue: OffscreenQueue | null = (primaryChildFragment.updateQueue: any);
+          if (offscreenQueue === null) {
+            const newOffscreenQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+              markerInstances: parentMarkerInstances,
+              wakeables: null,
+            };
+            primaryChildFragment.updateQueue = newOffscreenQueue;
+          } else {
+            offscreenQueue.transitions = currentTransitions;
+            offscreenQueue.markerInstances = parentMarkerInstances;
+          }
         }
       }
 
@@ -2140,6 +2215,8 @@ function updateSuspenseComponent(current, workInProgress, 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
@@ -2201,11 +2278,31 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           const parentMarkerInstances = getMarkerInstances();
-          const primaryChildUpdateQueue: OffscreenQueue = {
-            transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
-          };
-          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          const offscreenQueue: OffscreenQueue | null = (primaryChildFragment.updateQueue: any);
+          const currentOffscreenQueue: OffscreenQueue | null = (current.updateQueue: any);
+          if (offscreenQueue === null) {
+            const newOffscreenQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+              markerInstances: parentMarkerInstances,
+              wakeables: 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,
+              wakeables:
+                currentOffscreenQueue !== null
+                  ? currentOffscreenQueue.wakeables
+                  : null,
+            };
+            primaryChildFragment.updateQueue = newOffscreenQueue;
+          } else {
+            offscreenQueue.transitions = currentTransitions;
+            offscreenQueue.markerInstances = parentMarkerInstances;
+          }
         }
       }
       primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 8b19780af34d..a4fccc0bbd73 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2130,6 +2130,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
             markerInstances: parentMarkerInstances,
+            wakeables: null,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
@@ -2216,6 +2217,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
           const primaryChildUpdateQueue: OffscreenQueue = {
             transitions: currentTransitions,
             markerInstances: parentMarkerInstances,
+            wakeables: null,
           };
           primaryChildFragment.updateQueue = primaryChildUpdateQueue;
         }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 3d6d9cde8b29..2bb8b00d1c4d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1953,40 +1953,65 @@ function commitSuspenseHydrationCallbacks(
   }
 }
 
-function attachSuspenseRetryListeners(finishedWork: Fiber) {
+function getRetryCache(finishedWork) {
+  // TODO: Unify the interface for the retry cache so we don't have to switch
+  // on the tag like this.
+  switch (finishedWork.tag) {
+    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 = 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: Set<Wakeable>,
+) {
   // 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 wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
-  if (wakeables !== null) {
-    finishedWork.updateQueue = null;
-    let retryCache = finishedWork.stateNode;
-    if (retryCache === null) {
-      retryCache = finishedWork.stateNode = new PossiblyWeakSet();
-    }
-    wakeables.forEach(wakeable => {
-      // Memoize using the boundary fiber to prevent redundant listeners.
-      const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
-      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 retryCache = getRetryCache(finishedWork);
+  wakeables.forEach(wakeable => {
+    // Memoize using the boundary fiber to prevent redundant listeners.
+    const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
+    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.',
+            );
           }
         }
-
-        wakeable.then(retry, retry);
       }
-    });
-  }
+
+      wakeable.then(retry, retry);
+    }
+  });
 }
 
 // This function detects when a Suspense boundary goes from visible to hidden.
@@ -2307,7 +2332,11 @@ function commitMutationEffectsOnFiber(
         } catch (error) {
           captureCommitPhaseError(finishedWork, finishedWork.return, error);
         }
-        attachSuspenseRetryListeners(finishedWork);
+        const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
+        if (wakeables !== null) {
+          finishedWork.updateQueue = null;
+          attachSuspenseRetryListeners(finishedWork, wakeables);
+        }
       }
       return;
     }
@@ -2362,6 +2391,18 @@ function commitMutationEffectsOnFiber(
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);
         }
       }
+
+      // TODO: Move to passive phase
+      if (flags & Update) {
+        const offscreenQueue: OffscreenQueue | null = (finishedWork.updateQueue: any);
+        if (offscreenQueue !== null) {
+          const wakeables = offscreenQueue.wakeables;
+          if (wakeables !== null) {
+            offscreenQueue.wakeables = null;
+            attachSuspenseRetryListeners(finishedWork, wakeables);
+          }
+        }
+      }
       return;
     }
     case SuspenseListComponent: {
@@ -2369,7 +2410,11 @@ function commitMutationEffectsOnFiber(
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
-        attachSuspenseRetryListeners(finishedWork);
+        const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
+        if (wakeables !== null) {
+          finishedWork.updateQueue = null;
+          attachSuspenseRetryListeners(finishedWork, wakeables);
+        }
       }
       return;
     }
@@ -2878,7 +2923,7 @@ function commitPassiveMountOnFiber(
 
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
-        const queue: OffscreenQueue = (finishedWork.updateQueue: any);
+        const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
         const instance: OffscreenInstance = finishedWork.stateNode;
 
         if (queue !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 4c1cb2226c96..95318b19a856 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2878,7 +2878,7 @@ function commitPassiveMountOnFiber(
 
       if (enableTransitionTracing) {
         const isFallback = finishedWork.memoizedState;
-        const queue: OffscreenQueue = (finishedWork.updateQueue: any);
+        const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
         const instance: OffscreenInstance = finishedWork.stateNode;
 
         if (queue !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 3fb9f8dfb126..058a14d802aa 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1508,6 +1508,7 @@ function completeWork(
     }
     case OffscreenComponent:
     case LegacyHiddenComponent: {
+      popSuspenseHandler(workInProgress);
       popHiddenContext(workInProgress);
       const nextState: OffscreenState | null = workInProgress.memoizedState;
       const nextIsHidden = nextState !== null;
@@ -1529,7 +1530,11 @@ function completeWork(
       } else {
         // Don't bubble properties for hidden children unless we're rendering
         // at offscreen priority.
-        if (includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
+        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
@@ -1544,6 +1549,12 @@ function completeWork(
         }
       }
 
+      if (workInProgress.updateQueue !== null) {
+        // Schedule an effect to attach Suspense retry listeners
+        // TODO: Move to passive phase
+        workInProgress.flags |= Update;
+      }
+
       if (enableCache) {
         let previousCache: Cache | null = null;
         if (
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 4fdff5c8dfb0..0c989dd53fe6 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
+import type {ReactNodeList, OffscreenMode, Wakeable} from 'shared/ReactTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {
@@ -40,10 +40,12 @@ export type OffscreenState = {|
 export type OffscreenQueue = {|
   transitions: Array<Transition> | null,
   markerInstances: Array<TracingMarkerInstance> | null,
-|} | null;
+  wakeables: Set<Wakeable> | null,
+|};
 
 export type OffscreenInstance = {|
   isHidden: boolean,
   pendingMarkers: Set<PendingSuspenseBoundaries> | null,
   transitions: Set<Transition> | null,
+  retryCache: WeakSet<Wakeable> | Set<Wakeable> | null,
 |};
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js b/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js
index a49862d3fad8..c73dd77d559f 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseContext.new.js
@@ -14,7 +14,7 @@ import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
 import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 import {isCurrentTreeHidden} from './ReactFiberHiddenContext.new';
-import {SuspenseComponent} from './ReactWorkTags';
+import {SuspenseComponent, 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.
@@ -77,6 +77,19 @@ 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 pushOffscreenSuspenseHandler(fiber: Fiber): void {
+  if (fiber.tag === OffscreenComponent) {
+    push(suspenseHandlerStackCursor, fiber, fiber);
+  } else {
+    // This is a LegacyHidden component.
+    reuseSuspenseHandlerOnStack(fiber);
+  }
+}
+
+export function reuseSuspenseHandlerOnStack(fiber: Fiber) {
   push(suspenseHandlerStackCursor, getSuspenseHandler(), fiber);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 92af7312a78c..4a75d3076ab6 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -13,6 +13,7 @@ import type {Lane, Lanes} from './ReactFiberLane.new';
 import type {CapturedValue} from './ReactCapturedValue';
 import type {Update} from './ReactFiberClassUpdateQueue.new';
 import type {Wakeable} from 'shared/ReactTypes';
+import type {OffscreenQueue} from './ReactFiberOffscreenComponent';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {
@@ -22,6 +23,8 @@ import {
   FunctionComponent,
   ForwardRef,
   SimpleMemoComponent,
+  SuspenseComponent,
+  OffscreenComponent,
 } from './ReactWorkTags';
 import {
   DidCapture,
@@ -196,33 +199,6 @@ function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {
   }
 }
 
-function attachRetryListener(
-  suspenseBoundary: Fiber,
-  root: FiberRoot,
-  wakeable: Wakeable,
-  lanes: Lanes,
-) {
-  // 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").
-  const wakeables: Set<Wakeable> | null = (suspenseBoundary.updateQueue: any);
-  if (wakeables === null) {
-    const updateQueue = (new Set(): any);
-    updateQueue.add(wakeable);
-    suspenseBoundary.updateQueue = updateQueue;
-  } else {
-    wakeables.add(wakeable);
-  }
-}
-
 function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   if (enableLazyContextPropagation) {
     const currentSourceFiber = sourceFiber.alternate;
@@ -419,20 +395,70 @@ function throwException(
     // Schedule the nearest Suspense to re-render the timed out view.
     const suspenseBoundary = getSuspenseHandler();
     if (suspenseBoundary !== null) {
-      suspenseBoundary.flags &= ~ForceClientRender;
-      markSuspenseBoundaryShouldCapture(
-        suspenseBoundary,
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
+      switch (suspenseBoundary.tag) {
+        case SuspenseComponent: {
+          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").
+          const wakeables: Set<Wakeable> | null = (suspenseBoundary.updateQueue: any);
+          if (wakeables === null) {
+            suspenseBoundary.updateQueue = new Set([wakeable]);
+          } else {
+            wakeables.add(wakeable);
+          }
+          break;
+        }
+        case OffscreenComponent: {
+          if (suspenseBoundary.mode & ConcurrentMode) {
+            suspenseBoundary.flags |= ShouldCapture;
+            const offscreenQueue: OffscreenQueue | null = (suspenseBoundary.updateQueue: any);
+            if (offscreenQueue === null) {
+              const newOffscreenQueue: OffscreenQueue = {
+                transitions: null,
+                markerInstances: null,
+                wakeables: new Set([wakeable]),
+              };
+              suspenseBoundary.updateQueue = newOffscreenQueue;
+            } else {
+              const wakeables = offscreenQueue.wakeables;
+              if (wakeables === null) {
+                offscreenQueue.wakeables = new Set([wakeable]);
+              } else {
+                wakeables.add(wakeable);
+              }
+            }
+            break;
+          }
+        }
+        // eslint-disable-next-line no-fallthrough
+        default: {
+          throw new Error(
+            `Unexpected Suspense handler tag (${suspenseBoundary.tag}). This ` +
+              'is a bug in React.',
+          );
+        }
+      }
       // We only attach ping listeners in concurrent mode. Legacy Suspense always
       // commits fallbacks synchronously, so there are no pings.
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      attachRetryListener(suspenseBoundary, root, wakeable, rootRenderLanes);
       return;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
index 2659a74d80fd..1de655dfb026 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.new.js
@@ -162,10 +162,24 @@ function unwindWork(
       popProvider(context, workInProgress);
       return null;
     case OffscreenComponent:
-    case LegacyHiddenComponent:
+    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:
       if (enableCache) {
         const cache: Cache = workInProgress.memoizedState.cache;
@@ -238,6 +252,7 @@ function unwindInterruptedWork(
       break;
     case OffscreenComponent:
     case LegacyHiddenComponent:
+      popSuspenseHandler(interruptedWork);
       popHiddenContext(interruptedWork);
       popTransition(interruptedWork, current);
       break;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index de03d9f1daa2..74049d3a2136 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -20,6 +20,7 @@ import type {
   MarkerTransitionObject,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -96,6 +97,7 @@ import {
   ClassComponent,
   SuspenseComponent,
   SuspenseListComponent,
+  OffscreenComponent,
   FunctionComponent,
   ForwardRef,
   MemoComponent,
@@ -2748,6 +2750,11 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
     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. ' +
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
index b4b531b45e8f..d2b6dbce65be 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
@@ -2,10 +2,12 @@ let React;
 let ReactNoop;
 let Scheduler;
 let act;
+let LegacyHidden;
 let Offscreen;
 let Suspense;
 let useState;
 let useEffect;
+let startTransition;
 let textCache;
 
 describe('ReactOffscreen', () => {
@@ -16,10 +18,12 @@ describe('ReactOffscreen', () => {
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
+    LegacyHidden = React.unstable_LegacyHidden;
     Offscreen = React.unstable_Offscreen;
     Suspense = React.Suspense;
     useState = React.useState;
     useEffect = React.useEffect;
+    startTransition = React.startTransition;
 
     textCache = new Map();
   });
@@ -86,6 +90,328 @@ describe('ReactOffscreen', () => {
     return text;
   }
 
+  // Only works in new reconciler
+  // @gate variant
+  // @gate enableOffscreen
+  test('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>
+          <Offscreen mode="hidden">
+            <span>
+              <AsyncText text="Hidden" />
+            </span>
+          </Offscreen>
+        </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(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['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');
+    });
+    expect(Scheduler).toHaveYielded(['Hidden']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Visible</span>
+        <span hidden={true}>Hidden</span>
+      </>,
+    );
+  });
+
+  // @gate www
+  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 Offscreen, LegacyHidden never captures if something suspends
+    await act(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded([
+      '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...
+      </>,
+    );
+  });
+
+  // Only works in new reconciler
+  // @gate variant
+  // @gate experimental || www
+  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>
+          <Offscreen mode={open ? 'visible' : 'hidden'}>
+            <span>{children}</span>
+          </Offscreen>
+        </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(async () => {
+      root.render(
+        <Details open={false}>
+          <AsyncText text="Async" />
+        </Details>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['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(async () => {
+      startTransition(() => {
+        root.render(
+          <Details open={true}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['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');
+    });
+    expect(Scheduler).toHaveYielded(['Open', 'Async']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>Async</span>
+      </>,
+    );
+  });
+
+  // Only works in new reconciler
+  // @gate variant
+  // @gate enableOffscreen
+  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>
+          <Offscreen mode={open ? 'visible' : 'hidden'}>
+            <span>{children}</span>
+          </Offscreen>
+        </Suspense>
+      );
+    }
+
+    // Initial mount. Nothing suspends
+    await act(async () => {
+      root.render(
+        <Details open={true}>
+          <Text text="(empty)" />
+        </Details>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['Open', '(empty)']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Open</span>
+        <span>(empty)</span>
+      </>,
+    );
+
+    // Update that suspends inside the currently visible tree
+    await act(async () => {
+      startTransition(() => {
+        root.render(
+          <Details open={true}>
+            <AsyncText text="Async" />
+          </Details>,
+        );
+      });
+    });
+    expect(Scheduler).toHaveYielded(['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(async () => {
+      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.
+    expect(Scheduler).toHaveYielded(['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');
+    });
+    expect(Scheduler).toHaveYielded(['Async']);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span>Closed</span>
+        <span hidden={true}>Async</span>
+      </>,
+    );
+  });
+
+  // @gate experimental || www
+  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 (
+        <Offscreen mode={show ? 'visible' : 'hidden'}>
+          <span>
+            <Child />
+          </span>
+        </Offscreen>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('A');
+    await act(async () => {
+      root.render(<App show={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['A']);
+
+    await act(async () => {
+      startTransition(() => {
+        setText('B');
+      });
+    });
+  });
+
+  // Only works in new reconciler
+  // @gate variant
+  // @gate experimental || www
+  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 (
+        <Offscreen mode={show ? 'visible' : 'hidden'}>
+          <span>
+            <Child />
+          </span>
+        </Offscreen>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    resolveText('A0');
+    await act(async () => {
+      root.render(<App show={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['A0']);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>A0</span>);
+
+    await act(async () => {
+      setStep(1);
+      ReactNoop.flushSync(() => {
+        setText('B');
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      // 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(async () => {
+      resolveText('B1');
+    });
+    expect(Scheduler).toHaveYielded(['B1']);
+    expect(root).toMatchRenderedOutput(<span hidden={true}>B1</span>);
+  });
+
+  // Only works in new reconciler
   // @gate enableOffscreen
   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
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 48afd882a0c7..010afa06e70f 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -419,5 +419,6 @@
   "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>."
-}
\ No newline at end of file
+  "434": "`dangerouslySetInnerHTML` does not make sense on <title>.",
+  "435": "Unexpected Suspense handler tag (%s). This is a bug in React."
+}
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index 4a723374fb87..64912a3ba95e 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -1,2 +1,3 @@
+67de5e3fb09eecfab91321246246095058a708a9 [FORKED] Hidden trees should capture Suspense
 6ab05ee2e9c5b1f4c8dc1f7ae8906bf613788ba7 [FORKED] Track nearest Suspense handler on stack
-051ac55cb75f426b81f8f75b143f34255476b9bc [FORKED] Add HiddenContext to track if subtree is hidden
\ No newline at end of file
+051ac55cb75f426b81f8f75b143f34255476b9bc [FORKED] Add HiddenContext to track if subtree is hidden

From deab1263a8b8a2cea96bcbff27358570cccc7284 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 6 Jul 2022 09:37:46 -0400
Subject: [PATCH 1459/1603] [Transition Tracing] Change Transition Type Passed
 Pending Transitions (#24856)

This PR changes the type of the object we store in the pending transitions callbacks map. Previously, we were recreating the transition object that we initially created during `startTransition`. However, we can actually reuse the object instead (and it also gives us a stable way to identify a transition). This PR changes the implementation to reuse the transition object instead of creating a new one
---
 .../src/ReactFiberCommitWork.new.js           | 15 +++-------
 .../src/ReactFiberCommitWork.old.js           | 15 +++-------
 .../ReactFiberTracingMarkerComponent.new.js   | 28 ++++++++-----------
 .../ReactFiberTracingMarkerComponent.old.js   | 28 ++++++++-----------
 .../src/ReactFiberWorkLoop.new.js             |  9 +++---
 .../src/ReactFiberWorkLoop.old.js             |  9 +++---
 6 files changed, 40 insertions(+), 64 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 2bb8b00d1c4d..3d19e98ccb04 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2861,10 +2861,7 @@ function commitPassiveMountOnFiber(
         // Initial render
         if (committedTransitions !== null) {
           committedTransitions.forEach(transition => {
-            addTransitionStartCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
+            addTransitionStartCallbackToPendingTransition(transition);
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2876,10 +2873,7 @@ function commitPassiveMountOnFiber(
               pendingSuspenseBoundaries === null ||
               pendingSuspenseBoundaries.size === 0
             ) {
-              addTransitionCompleteCallbackToPendingTransition({
-                transitionName: transition.name,
-                startTime: transition.startTime,
-              });
+              addTransitionCompleteCallbackToPendingTransition(transition);
               incompleteTransitions.delete(transition);
             }
           },
@@ -3026,9 +3020,8 @@ function commitPassiveMountOnFiber(
         ) {
           instance.transitions.forEach(transition => {
             addMarkerCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-              markerName: finishedWork.memoizedProps.name,
+              transition,
+              name: finishedWork.memoizedProps.name,
             });
           });
           instance.transitions = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 95318b19a856..54030004af75 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2816,10 +2816,7 @@ function commitPassiveMountOnFiber(
         // Initial render
         if (committedTransitions !== null) {
           committedTransitions.forEach(transition => {
-            addTransitionStartCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-            });
+            addTransitionStartCallbackToPendingTransition(transition);
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
@@ -2831,10 +2828,7 @@ function commitPassiveMountOnFiber(
               pendingSuspenseBoundaries === null ||
               pendingSuspenseBoundaries.size === 0
             ) {
-              addTransitionCompleteCallbackToPendingTransition({
-                transitionName: transition.name,
-                startTime: transition.startTime,
-              });
+              addTransitionCompleteCallbackToPendingTransition(transition);
               incompleteTransitions.delete(transition);
             }
           },
@@ -2981,9 +2975,8 @@ function commitPassiveMountOnFiber(
         ) {
           instance.transitions.forEach(transition => {
             addMarkerCompleteCallbackToPendingTransition({
-              transitionName: transition.name,
-              startTime: transition.startTime,
-              markerName: finishedWork.memoizedProps.name,
+              transition,
+              name: finishedWork.memoizedProps.name,
             });
           });
           instance.transitions = null;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 23d02575c1fa..e7522fd93fa4 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
 export type SuspenseInfo = {name: string | null};
 
-export type TransitionObject = {
-  transitionName: string,
-  startTime: number,
+export type MarkerTransition = {
+  transition: Transition,
+  name: string,
 };
 
-export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
-  transitionStart: Array<TransitionObject> | null,
-  transitionComplete: Array<TransitionObject> | null,
-  markerComplete: Array<MarkerTransitionObject> | null,
+  transitionStart: Array<Transition> | null,
+  transitionComplete: Array<Transition> | null,
+  markerComplete: Array<MarkerTransition> | null,
 };
 
 export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
       if (transitionStart !== null) {
         transitionStart.forEach(transition => {
           if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(
-              transition.transitionName,
-              transition.startTime,
-            );
+            callbacks.onTransitionStart(transition.name, transition.startTime);
           }
         });
       }
 
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
-        markerComplete.forEach(transition => {
+        markerComplete.forEach(marker => {
           if (callbacks.onMarkerComplete != null) {
             callbacks.onMarkerComplete(
-              transition.transitionName,
-              transition.markerName,
-              transition.startTime,
+              marker.transition.name,
+              marker.name,
+              marker.transition.startTime,
               endTime,
             );
           }
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
         transitionComplete.forEach(transition => {
           if (callbacks.onTransitionComplete != null) {
             callbacks.onTransitionComplete(
-              transition.transitionName,
+              transition.name,
               transition.startTime,
               endTime,
             );
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 0bbdd053883f..0aba8780968a 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -17,16 +17,15 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
 export type SuspenseInfo = {name: string | null};
 
-export type TransitionObject = {
-  transitionName: string,
-  startTime: number,
+export type MarkerTransition = {
+  transition: Transition,
+  name: string,
 };
 
-export type MarkerTransitionObject = TransitionObject & {markerName: string};
 export type PendingTransitionCallbacks = {
-  transitionStart: Array<TransitionObject> | null,
-  transitionComplete: Array<TransitionObject> | null,
-  markerComplete: Array<MarkerTransitionObject> | null,
+  transitionStart: Array<Transition> | null,
+  transitionComplete: Array<Transition> | null,
+  markerComplete: Array<MarkerTransition> | null,
 };
 
 export type Transition = {
@@ -58,22 +57,19 @@ export function processTransitionCallbacks(
       if (transitionStart !== null) {
         transitionStart.forEach(transition => {
           if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(
-              transition.transitionName,
-              transition.startTime,
-            );
+            callbacks.onTransitionStart(transition.name, transition.startTime);
           }
         });
       }
 
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
-        markerComplete.forEach(transition => {
+        markerComplete.forEach(marker => {
           if (callbacks.onMarkerComplete != null) {
             callbacks.onMarkerComplete(
-              transition.transitionName,
-              transition.markerName,
-              transition.startTime,
+              marker.transition.name,
+              marker.name,
+              marker.transition.startTime,
               endTime,
             );
           }
@@ -85,7 +81,7 @@ export function processTransitionCallbacks(
         transitionComplete.forEach(transition => {
           if (callbacks.onTransitionComplete != null) {
             callbacks.onTransitionComplete(
-              transition.transitionName,
+              transition.name,
               transition.startTime,
               endTime,
             );
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 74049d3a2136..f3c141d76cf5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
-  TransitionObject,
-  MarkerTransitionObject,
+  MarkerTransition,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -334,7 +333,7 @@ export function getWorkInProgressTransitions() {
 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
 
 export function addTransitionStartCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -354,7 +353,7 @@ export function addTransitionStartCallbackToPendingTransition(
 }
 
 export function addMarkerCompleteCallbackToPendingTransition(
-  transition: MarkerTransitionObject,
+  transition: MarkerTransition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -374,7 +373,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
 }
 
 export function addTransitionCompleteCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index cb24a22798db..3d3a32d8c9d5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -17,8 +17,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
-  TransitionObject,
-  MarkerTransitionObject,
+  MarkerTransition,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 
@@ -344,7 +343,7 @@ export function getWorkInProgressTransitions() {
 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
 
 export function addTransitionStartCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -364,7 +363,7 @@ export function addTransitionStartCallbackToPendingTransition(
 }
 
 export function addMarkerCompleteCallbackToPendingTransition(
-  transition: MarkerTransitionObject,
+  transition: MarkerTransition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -384,7 +383,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
 }
 
 export function addTransitionCompleteCallbackToPendingTransition(
-  transition: TransitionObject,
+  transition: Transition,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {

From 8e35b5060875c875f468878f94bc3c0d7d45c52d Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 6 Jul 2022 09:38:28 -0400
Subject: [PATCH 1460/1603] [Transition Tracing] Refactor Code to Remove
 OffscreeInstance TODOs (#24855)

Refactored code to pass flow and remove TODOs introduced in #24846
---
 .../src/ReactFiberCommitWork.new.js           | 44 ++++++-------------
 .../src/ReactFiberCommitWork.old.js           | 44 ++++++-------------
 2 files changed, 28 insertions(+), 60 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 3d19e98ccb04..e5cfebea5f88 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2923,34 +2923,21 @@ function commitPassiveMountOnFiber(
         if (queue !== null) {
           if (isFallback) {
             const transitions = queue.transitions;
-            let prevTransitions = instance.transitions;
-            if (instance.pendingMarkers === null) {
-              instance.pendingMarkers = new Set();
-            }
-            if (transitions !== null && prevTransitions === null) {
-              instance.transitions = prevTransitions = new Set();
-            }
-
             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 (prevTransitions === null) {
-                  // TODO: What if prevTransitions is null?
-                } else {
-                  prevTransitions.add(transition);
+                if (instance.transitions === null) {
+                  instance.transitions = new Set();
                 }
+                instance.transitions.add(transition);
               });
             }
 
             const markerInstances = queue.markerInstances;
             if (markerInstances !== null) {
               markerInstances.forEach(markerInstance => {
-                if (markerInstance.pendingSuspenseBoundaries === null) {
-                  markerInstance.pendingSuspenseBoundaries = new Map();
-                }
-
                 const markerTransitions = markerInstance.transitions;
                 // There should only be a few tracing marker transitions because
                 // they should be only associated with the transition that
@@ -2958,21 +2945,18 @@ function commitPassiveMountOnFiber(
                 if (markerTransitions !== null) {
                   markerTransitions.forEach(transition => {
                     if (instance.transitions === null) {
-                      // TODO: What if instance.transitions is null?
-                    } else {
-                      if (instance.transitions.has(transition)) {
-                        if (
-                          instance.pendingMarkers === null ||
-                          markerInstance.pendingSuspenseBoundaries === null
-                        ) {
-                          // TODO: What if instance.pendingMarkers is null?
-                          // TODO: What if markerInstance.pendingSuspenseBoundaries is null?
-                        } else {
-                          instance.pendingMarkers.add(
-                            markerInstance.pendingSuspenseBoundaries,
-                          );
-                        }
+                      instance.transitions = new Set();
+                    } else if (instance.transitions.has(transition)) {
+                      if (markerInstance.pendingSuspenseBoundaries === null) {
+                        markerInstance.pendingSuspenseBoundaries = new Map();
+                      }
+                      if (instance.pendingMarkers === null) {
+                        instance.pendingMarkers = new Set();
                       }
+
+                      instance.pendingMarkers.add(
+                        markerInstance.pendingSuspenseBoundaries,
+                      );
                     }
                   });
                 }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 54030004af75..eae4bc52e358 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2878,34 +2878,21 @@ function commitPassiveMountOnFiber(
         if (queue !== null) {
           if (isFallback) {
             const transitions = queue.transitions;
-            let prevTransitions = instance.transitions;
-            if (instance.pendingMarkers === null) {
-              instance.pendingMarkers = new Set();
-            }
-            if (transitions !== null && prevTransitions === null) {
-              instance.transitions = prevTransitions = new Set();
-            }
-
             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 (prevTransitions === null) {
-                  // TODO: What if prevTransitions is null?
-                } else {
-                  prevTransitions.add(transition);
+                if (instance.transitions === null) {
+                  instance.transitions = new Set();
                 }
+                instance.transitions.add(transition);
               });
             }
 
             const markerInstances = queue.markerInstances;
             if (markerInstances !== null) {
               markerInstances.forEach(markerInstance => {
-                if (markerInstance.pendingSuspenseBoundaries === null) {
-                  markerInstance.pendingSuspenseBoundaries = new Map();
-                }
-
                 const markerTransitions = markerInstance.transitions;
                 // There should only be a few tracing marker transitions because
                 // they should be only associated with the transition that
@@ -2913,21 +2900,18 @@ function commitPassiveMountOnFiber(
                 if (markerTransitions !== null) {
                   markerTransitions.forEach(transition => {
                     if (instance.transitions === null) {
-                      // TODO: What if instance.transitions is null?
-                    } else {
-                      if (instance.transitions.has(transition)) {
-                        if (
-                          instance.pendingMarkers === null ||
-                          markerInstance.pendingSuspenseBoundaries === null
-                        ) {
-                          // TODO: What if instance.pendingMarkers is null?
-                          // TODO: What if markerInstance.pendingSuspenseBoundaries is null?
-                        } else {
-                          instance.pendingMarkers.add(
-                            markerInstance.pendingSuspenseBoundaries,
-                          );
-                        }
+                      instance.transitions = new Set();
+                    } else if (instance.transitions.has(transition)) {
+                      if (markerInstance.pendingSuspenseBoundaries === null) {
+                        markerInstance.pendingSuspenseBoundaries = new Map();
+                      }
+                      if (instance.pendingMarkers === null) {
+                        instance.pendingMarkers = new Set();
                       }
+
+                      instance.pendingMarkers.add(
+                        markerInstance.pendingSuspenseBoundaries,
+                      );
                     }
                   });
                 }

From c3b18571dbf27b47675619aefc9cc9a4a06dbe18 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 7 Jul 2022 10:43:25 -0400
Subject: [PATCH 1461/1603] [DevTools][Bugfix] Fix DevTools Perf Issue When
 Unmounting Large React Subtrees (#24863)

We've recently had multiple reports where, if React DevTools was installed, unmounting large React subtrees would take a huge performance hit (ex. from 50ms to 7 seconds).

Digging in more, we realized for every fiber that unmounts, we called `untrackFibers`, which calls `clearTimeout` (and does some work manipulating a set, but this wasn't the bulk of the time). We ten call `recordUnmount`, which adds the timer back. Adding and removing the timer so many times was taking upwards of 50ms per timer add/remove call, which was resulting in exorbitant amounts of time spent in DevTools deleting subtrees.

It looks like we are calling `untrackFibers` so many times to avoid a race condition with Suspense children where we unmount them twice (first a "virtual" unmount when the suspense boundary is toggled from visible to invisible, and then an actual unmount when the new children are rendered) without modifying `fiberIDMap`. We can fix this race condition by using the `untrackFibersSet` as a lock and not calling `recordUnmount` if the fiber is in the set and hasn't been processed yet. This works because the only way fibers are added in the set is via `recordUnmount` anyway.

This PR also adds a test to make sure this change doesn't regress the previous behavior.

**Before**
![image](https://user-images.githubusercontent.com/2735514/177655428-774ee306-0568-49ce-987e-b5213b613265.png)

**After**
![image](https://user-images.githubusercontent.com/2735514/177655604-a217583f-787e-438e-b6f9-18953fe32444.png)
---
 .../src/__tests__/store-test.js               | 44 +++++++++++++++++++
 .../src/backend/renderer.js                   | 17 +++----
 2 files changed, 53 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index 56795d232895..a6dc02f844e5 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -13,6 +13,7 @@ describe('Store', () => {
   let ReactDOMClient;
   let agent;
   let act;
+  let actAsync;
   let bridge;
   let getRendererID;
   let legacyRender;
@@ -30,6 +31,7 @@ describe('Store', () => {
 
     const utils = require('./utils');
     act = utils.act;
+    actAsync = utils.actAsync;
     getRendererID = utils.getRendererID;
     legacyRender = utils.legacyRender;
     withErrorsOrWarningsIgnored = utils.withErrorsOrWarningsIgnored;
@@ -2064,5 +2066,47 @@ describe('Store', () => {
       expect(store.errorCount).toBe(0);
       expect(store.warningCount).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>
+        );
+      }
+
+      const container = document.createElement('div');
+      const root = ReactDOMClient.createRoot(container);
+      await actAsync(() => root.render(<App renderA={true} />));
+
+      expect(store).toMatchInlineSnapshot(`
+          [root]
+            ▾ <App>
+              ▾ <Suspense>
+                  <ChildA>
+        `);
+
+      await actAsync(() => root.render(<App renderA={false} />));
+
+      expect(store).toMatchInlineSnapshot(`
+          [root]
+            ▾ <App>
+              ▾ <Suspense>
+                  <ChildB>
+        `);
+    });
   });
 });
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 9959cad7aa52..f2d6dad45f00 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2632,14 +2632,15 @@ export function attach(
   }
 
   function handleCommitFiberUnmount(fiber) {
-    // Flush any pending Fibers that we are untracking before processing the new commit.
-    // If we don't do this, we might end up double-deleting Fibers in some cases (like Legacy Suspense).
-    untrackFibers();
-
-    // This is not recursive.
-    // We can't traverse fibers after unmounting so instead
-    // we rely on React telling us about each unmount.
-    recordUnmount(fiber, false);
+    // If the untrackFiberSet already has the unmounted Fiber, this means we've already
+    // recordedUnmount, so we don't need to do it again. If we don't do this, we might
+    // end up double-deleting Fibers in some cases (like Legacy Suspense).
+    if (!untrackFibersSet.has(fiber)) {
+      // This is not recursive.
+      // We can't traverse fibers after unmounting so instead
+      // we rely on React telling us about each unmount.
+      recordUnmount(fiber, false);
+    }
   }
 
   function handlePostCommitFiberRoot(root) {

From 95e22ff528c875b090de51a0fb0d83181c4d1111 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 7 Jul 2022 16:57:42 -0400
Subject: [PATCH 1462/1603] Delete Partial Renderer SSR implementation (#24868)

This removes the old server rendering implementation (the "Partial Renderer").
It was replaced in React 18 with a new streaming implementation (Fizz).

We hadn't removed it from the codebase yet because Facebook hadn't finished
rolling out Fizz in production; it's been behind a feature flag while we run
performance tests and migrate our internal infrastructure.

The diff to land Fizz will land imminently, and once it does, we can merge
this commit.
---
 .../__tests__/ReactDOMHydrationDiff-test.js   |   33 +-
 ...DOMServerPartialHydration-test.internal.js |   18 +-
 .../__tests__/ReactServerRendering-test.js    |    9 +-
 .../ReactServerRenderingHydration-test.js     |    2 -
 .../ReactDOMLegacyServerBrowser.classic.fb.js |   16 -
 .../ReactDOMLegacyServerNode.classic.fb.js    |   19 -
 ...ctDOMServerLegacyPartialRendererBrowser.js |   32 -
 .../src/server/ReactDOMStringRenderer.js      |   39 -
 .../src/server/ReactPartialRenderer.js        | 1646 -----------------
 .../src/server/ReactPartialRendererContext.js |  160 --
 .../src/server/ReactPartialRendererHooks.js   |  555 ------
 11 files changed, 11 insertions(+), 2518 deletions(-)
 delete mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerBrowser.classic.fb.js
 delete mode 100644 packages/react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js
 delete mode 100644 packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
 delete mode 100644 packages/react-dom/src/server/ReactDOMStringRenderer.js
 delete mode 100644 packages/react-dom/src/server/ReactPartialRenderer.js
 delete mode 100644 packages/react-dom/src/server/ReactPartialRendererContext.js
 delete mode 100644 packages/react-dom/src/server/ReactPartialRendererHooks.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
index e8e7dffee5d6..080bc047343e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMHydrationDiff-test.js
@@ -11,7 +11,6 @@ let React;
 let ReactDOMClient;
 let ReactDOMServer;
 let act;
-let usingPartialRenderer;
 
 const util = require('util');
 const realConsoleError = console.error;
@@ -26,8 +25,6 @@ describe('ReactDOMServerHydration', () => {
     ReactDOMServer = require('react-dom/server');
     act = require('react-dom/test-utils').act;
 
-    usingPartialRenderer = global.__WWW__ && !__EXPERIMENTAL__;
-
     console.error = jest.fn();
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -731,15 +728,13 @@ describe('ReactDOMServerHydration', () => {
           );
         }
 
-        // @TODO FB bundles use a different renderer that does not serialize errors to the client
-        const mismatchEl = usingPartialRenderer ? '<p>' : '<template>';
         // @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(`
             Array [
-              "Warning: Did not expect server HTML to contain a ${mismatchEl} in <div>.
+              "Warning: Did not expect server HTML to contain a <template> in <div>.
                 in div (at **)
                 in Mismatch (at **)",
               "Warning: An error occurred during hydration. The server HTML was replaced with client content in <div>.",
@@ -819,21 +814,12 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // We gate this assertion becuase fb-classic uses PartialRenderer for renderToString and it does not
-        // serialize server errors and send to client
-        if (usingPartialRenderer) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-            ]
-          `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Caught [The server did not finish this Suspense boundary: 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]",
             ]
           `);
-        }
       });
 
       // @gate __DEV__
@@ -854,21 +840,12 @@ describe('ReactDOMServerHydration', () => {
             </div>
           );
         }
-        // We gate this assertion becuase fb-classic uses PartialRenderer for renderToString and it does not
-        // serialize server errors and send to client
-        if (usingPartialRenderer) {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
-            Array [
-              "Caught [The server could not finish this Suspense boundary, likely due to an error during server rendering. Switched to client rendering.]",
-            ]
-          `);
-        } else {
-          expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
+
+        expect(testMismatch(Mismatch)).toMatchInlineSnapshot(`
             Array [
               "Caught [The server did not finish this Suspense boundary: 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]",
             ]
           `);
-        }
       });
     });
 
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index e086448d6914..c8a44764d771 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -19,7 +19,6 @@ let Suspense;
 let SuspenseList;
 let act;
 let IdleEventPriority;
-let usingPartialRenderer;
 
 function normalizeCodeLocInfo(strOrErr) {
   if (strOrErr && strOrErr.replace) {
@@ -111,8 +110,6 @@ describe('ReactDOMServerPartialHydration', () => {
       SuspenseList = React.SuspenseList;
     }
 
-    usingPartialRenderer = global.__WWW__ && !__EXPERIMENTAL__;
-
     IdleEventPriority = require('react-reconciler/constants').IdleEventPriority;
   });
 
@@ -1671,8 +1668,7 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    // we exclude fb bundles with partial renderer
-    if (__DEV__ && !usingPartialRenderer) {
+    if (__DEV__) {
       expect(Scheduler).toFlushAndYield([
         'The server did not finish this Suspense boundary: The server used' +
           ' "renderToString" which does not support Suspense. If you intended' +
@@ -1745,8 +1741,7 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    // we exclude fb bundles with partial renderer
-    if (__DEV__ && !usingPartialRenderer) {
+    if (__DEV__) {
       expect(Scheduler).toFlushAndYield([
         'The server did not finish this Suspense boundary: The server used' +
           ' "renderToString" which does not support Suspense. If you intended' +
@@ -1824,8 +1819,7 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    // we exclude fb bundles with partial renderer
-    if (__DEV__ && !usingPartialRenderer) {
+    if (__DEV__) {
       expect(Scheduler).toFlushAndYield([
         'The server did not finish this Suspense boundary: The server used' +
           ' "renderToString" which does not support Suspense. If you intended' +
@@ -2154,8 +2148,7 @@ describe('ReactDOMServerPartialHydration', () => {
     });
 
     suspend = true;
-    // we exclude fb bundles with partial renderer
-    if (__DEV__ && !usingPartialRenderer) {
+    if (__DEV__) {
       expect(Scheduler).toFlushAndYield([
         'The server did not finish this Suspense boundary: The server used' +
           ' "renderToString" which does not support Suspense. If you intended' +
@@ -2229,8 +2222,7 @@ describe('ReactDOMServerPartialHydration', () => {
         Scheduler.unstable_yieldValue(error.message);
       },
     });
-    // we exclude fb bundles with partial renderer
-    if (__DEV__ && !usingPartialRenderer) {
+    if (__DEV__) {
       expect(Scheduler).toFlushAndYield([
         'The server did not finish this Suspense boundary: The server used' +
           ' "renderToString" which does not support Suspense. If you intended' +
diff --git a/packages/react-dom/src/__tests__/ReactServerRendering-test.js b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
index fed698807718..c22846fa637f 100644
--- a/packages/react-dom/src/__tests__/ReactServerRendering-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRendering-test.js
@@ -14,7 +14,6 @@ let React;
 let ReactDOMServer;
 let PropTypes;
 let ReactCurrentDispatcher;
-let useingPartialRenderer;
 
 describe('ReactDOMServer', () => {
   beforeEach(() => {
@@ -25,8 +24,6 @@ describe('ReactDOMServer', () => {
     ReactCurrentDispatcher =
       React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
         .ReactCurrentDispatcher;
-
-    useingPartialRenderer = global.__WWW__ && !__EXPERIMENTAL__;
   });
 
   describe('renderToString', () => {
@@ -576,11 +573,7 @@ describe('ReactDOMServer', () => {
           <Suspender />
         </React.Suspense>,
       );
-      if (useingPartialRenderer) {
-        expect(response).toEqual('<!--$!-->fallback<!--/$-->');
-      } else {
-        expect(response).toEqual('fallback');
-      }
+      expect(response).toEqual('fallback');
     });
   });
 
diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
index 4cf2b7336e0b..663cce63c565 100644
--- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
@@ -603,7 +603,6 @@ describe('ReactDOMServerHydration', () => {
     expect(customElement.obj).toBe(undefined);
   });
 
-  // @gate experimental || !www || !__DEV__
   it('refers users to apis that support Suspense when something suspends', () => {
     const theInfinitePromise = new Promise(() => {});
     function InfiniteSuspend() {
@@ -649,7 +648,6 @@ describe('ReactDOMServerHydration', () => {
     }
   });
 
-  // @gate experimental || !www || !__DEV__
   it('refers users to apis that support Suspense when something suspends (browser)', () => {
     const theInfinitePromise = new Promise(() => {});
     function InfiniteSuspend() {
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.classic.fb.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.classic.fb.js
deleted file mode 100644
index 26ade8144113..000000000000
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.classic.fb.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export {
-  renderToString,
-  renderToStaticMarkup,
-  renderToNodeStream,
-  renderToStaticNodeStream,
-  version,
-} from './ReactDOMServerLegacyPartialRendererBrowser';
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js
deleted file mode 100644
index f542d77e295a..000000000000
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-export {
-  renderToString,
-  renderToStaticMarkup,
-  version,
-} from './ReactDOMServerLegacyPartialRendererBrowser';
-
-export {
-  renderToNodeStream,
-  renderToStaticNodeStream,
-} from './ReactDOMLegacyServerNodeStream';
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js b/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
deleted file mode 100644
index f810d7472b01..000000000000
--- a/packages/react-dom/src/server/ReactDOMServerLegacyPartialRendererBrowser.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import ReactVersion from 'shared/ReactVersion';
-
-import {renderToString, renderToStaticMarkup} from './ReactDOMStringRenderer';
-
-function renderToNodeStream() {
-  throw new Error(
-    'ReactDOMServer.renderToNodeStream(): The streaming API is not available ' +
-      'in the browser. Use ReactDOMServer.renderToString() instead.',
-  );
-}
-
-function renderToStaticNodeStream() {
-  throw new Error(
-    'ReactDOMServer.renderToStaticNodeStream(): The streaming API is not available ' +
-      'in the browser. Use ReactDOMServer.renderToStaticMarkup() instead.',
-  );
-}
-
-export {
-  renderToString,
-  renderToStaticMarkup,
-  renderToNodeStream,
-  renderToStaticNodeStream,
-  ReactVersion as version,
-};
diff --git a/packages/react-dom/src/server/ReactDOMStringRenderer.js b/packages/react-dom/src/server/ReactDOMStringRenderer.js
deleted file mode 100644
index f2dbb68648aa..000000000000
--- a/packages/react-dom/src/server/ReactDOMStringRenderer.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import type {ServerOptions} from './ReactPartialRenderer';
-import ReactPartialRenderer from './ReactPartialRenderer';
-
-/**
- * Render a ReactElement to its initial HTML. This should only be used on the
- * server.
- * See https://reactjs.org/docs/react-dom-server.html#rendertostring
- */
-export function renderToString(element, options?: ServerOptions) {
-  const renderer = new ReactPartialRenderer(element, false, options);
-  try {
-    const markup = renderer.read(Infinity);
-    return markup;
-  } finally {
-    renderer.destroy();
-  }
-}
-
-/**
- * Similar to renderToString, except this doesn't create extra DOM attributes
- * such as data-react-id that React uses internally.
- * See https://reactjs.org/docs/react-dom-server.html#rendertostaticmarkup
- */
-export function renderToStaticMarkup(element, options?: ServerOptions) {
-  const renderer = new ReactPartialRenderer(element, true, options);
-  try {
-    const markup = renderer.read(Infinity);
-    return markup;
-  } finally {
-    renderer.destroy();
-  }
-}
diff --git a/packages/react-dom/src/server/ReactPartialRenderer.js b/packages/react-dom/src/server/ReactPartialRenderer.js
deleted file mode 100644
index 03f5355ef0e7..000000000000
--- a/packages/react-dom/src/server/ReactPartialRenderer.js
+++ /dev/null
@@ -1,1646 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {ThreadID} from './ReactThreadIDAllocator';
-import type {ReactElement} from 'shared/ReactElementType';
-import type {LazyComponent} from 'react/src/ReactLazy';
-import type {ReactProvider, ReactContext} from 'shared/ReactTypes';
-
-import * as React from 'react';
-import isArray from 'shared/isArray';
-import getComponentNameFromType from 'shared/getComponentNameFromType';
-import {describeUnknownElementTypeFrameInDEV} from 'shared/ReactComponentStackFrame';
-import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {
-  warnAboutDeprecatedLifecycles,
-  disableLegacyContext,
-  disableModulePatternComponents,
-  enableScopeAPI,
-} from 'shared/ReactFeatureFlags';
-import {
-  checkPropStringCoercion,
-  checkFormFieldValueStringCoercion,
-} from 'shared/CheckStringCoercion';
-
-import {
-  REACT_DEBUG_TRACING_MODE_TYPE,
-  REACT_FORWARD_REF_TYPE,
-  REACT_FRAGMENT_TYPE,
-  REACT_STRICT_MODE_TYPE,
-  REACT_SUSPENSE_TYPE,
-  REACT_SUSPENSE_LIST_TYPE,
-  REACT_PORTAL_TYPE,
-  REACT_PROFILER_TYPE,
-  REACT_PROVIDER_TYPE,
-  REACT_CONTEXT_TYPE,
-  REACT_LAZY_TYPE,
-  REACT_MEMO_TYPE,
-  REACT_SCOPE_TYPE,
-  REACT_LEGACY_HIDDEN_TYPE,
-} from 'shared/ReactSymbols';
-
-import {
-  emptyObject,
-  processContext,
-  validateContextBounds,
-} from './ReactPartialRendererContext';
-import {allocThreadID, freeThreadID} from './ReactThreadIDAllocator';
-import {
-  createMarkupForCustomAttribute,
-  createMarkupForProperty,
-} from './DOMMarkupOperations';
-import escapeTextForBrowser from './escapeTextForBrowser';
-import {
-  prepareToUseHooks,
-  finishHooks,
-  resetHooksState,
-  Dispatcher,
-  currentPartialRenderer,
-  setCurrentPartialRenderer,
-} from './ReactPartialRendererHooks';
-import {
-  HTML_NAMESPACE,
-  getIntrinsicNamespace,
-  getChildNamespace,
-} from '../shared/DOMNamespaces';
-import {checkControlledValueProps} from '../shared/ReactControlledValuePropTypes';
-import assertValidProps from '../shared/assertValidProps';
-import dangerousStyleValue from '../shared/dangerousStyleValue';
-import hyphenateStyleName from '../shared/hyphenateStyleName';
-import isCustomComponentFn from '../shared/isCustomComponent';
-import omittedCloseTags from '../shared/omittedCloseTags';
-import warnValidStyle from '../shared/warnValidStyle';
-import {validateProperties as validateARIAProperties} from '../shared/ReactDOMInvalidARIAHook';
-import {validateProperties as validateInputProperties} from '../shared/ReactDOMNullInputValuePropHook';
-import {validateProperties as validateUnknownProperties} from '../shared/ReactDOMUnknownPropertyHook';
-import assign from 'shared/assign';
-import hasOwnProperty from 'shared/hasOwnProperty';
-
-// Based on reading the React.Children implementation. TODO: type this somewhere?
-type ReactNode = string | number | ReactElement;
-type FlatReactChildren = Array<null | ReactNode>;
-type toArrayType = (children: mixed) => FlatReactChildren;
-const toArray = ((React.Children.toArray: any): toArrayType);
-
-// This is only used in DEV.
-// Each entry is `this.stack` from a currently executing renderer instance.
-// (There may be more than one because ReactDOMServer is reentrant).
-// Each stack is an array of frames which may contain nested stacks of elements.
-const currentDebugStacks = [];
-
-const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
-let ReactDebugCurrentFrame;
-let prevGetCurrentStackImpl = null;
-let getCurrentServerStackImpl = () => '';
-let describeStackFrame = element => '';
-
-let validatePropertiesInDevelopment = (type, props) => {};
-let pushCurrentDebugStack = (stack: Array<Frame>) => {};
-let pushElementToDebugStack = (element: ReactElement) => {};
-let popCurrentDebugStack = () => {};
-let hasWarnedAboutUsingContextAsConsumer = false;
-
-if (__DEV__) {
-  ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-
-  validatePropertiesInDevelopment = function(type, props) {
-    validateARIAProperties(type, props);
-    validateInputProperties(type, props);
-    validateUnknownProperties(type, props, null);
-  };
-
-  describeStackFrame = function(element): string {
-    return describeUnknownElementTypeFrameInDEV(
-      element.type,
-      element._source,
-      null,
-    );
-  };
-
-  pushCurrentDebugStack = function(stack: Array<Frame>) {
-    currentDebugStacks.push(stack);
-
-    if (currentDebugStacks.length === 1) {
-      // We are entering a server renderer.
-      // Remember the previous (e.g. client) global stack implementation.
-      prevGetCurrentStackImpl = ReactDebugCurrentFrame.getCurrentStack;
-      ReactDebugCurrentFrame.getCurrentStack = getCurrentServerStackImpl;
-    }
-  };
-
-  pushElementToDebugStack = function(element: ReactElement) {
-    // For the innermost executing ReactDOMServer call,
-    const stack = currentDebugStacks[currentDebugStacks.length - 1];
-    // Take the innermost executing frame (e.g. <Foo>),
-    const frame: Frame = stack[stack.length - 1];
-    // and record that it has one more element associated with it.
-    ((frame: any): FrameDev).debugElementStack.push(element);
-    // We only need this because we tail-optimize single-element
-    // children and directly handle them in an inner loop instead of
-    // creating separate frames for them.
-  };
-
-  popCurrentDebugStack = function() {
-    currentDebugStacks.pop();
-
-    if (currentDebugStacks.length === 0) {
-      // We are exiting the server renderer.
-      // Restore the previous (e.g. client) global stack implementation.
-      ReactDebugCurrentFrame.getCurrentStack = prevGetCurrentStackImpl;
-      prevGetCurrentStackImpl = null;
-    }
-  };
-
-  getCurrentServerStackImpl = function(): string {
-    if (currentDebugStacks.length === 0) {
-      // Nothing is currently rendering.
-      return '';
-    }
-    // ReactDOMServer is reentrant so there may be multiple calls at the same time.
-    // Take the frames from the innermost call which is the last in the array.
-    const frames = currentDebugStacks[currentDebugStacks.length - 1];
-    let stack = '';
-    // Go through every frame in the stack from the innermost one.
-    for (let i = frames.length - 1; i >= 0; i--) {
-      const frame: Frame = frames[i];
-      // Every frame might have more than one debug element stack entry associated with it.
-      // This is because single-child nesting doesn't create materialized frames.
-      // Instead it would push them through `pushElementToDebugStack()`.
-      const debugElementStack = ((frame: any): FrameDev).debugElementStack;
-      for (let ii = debugElementStack.length - 1; ii >= 0; ii--) {
-        stack += describeStackFrame(debugElementStack[ii]);
-      }
-    }
-    return stack;
-  };
-}
-
-let didWarnDefaultInputValue = false;
-let didWarnDefaultChecked = false;
-let didWarnDefaultSelectValue = false;
-let didWarnDefaultTextareaValue = false;
-let didWarnInvalidOptionChildren = false;
-let didWarnInvalidOptionInnerHTML = false;
-const didWarnAboutNoopUpdateForComponent = {};
-const didWarnAboutBadClass = {};
-const didWarnAboutModulePatternComponent = {};
-const didWarnAboutDeprecatedWillMount = {};
-const didWarnAboutUndefinedDerivedState = {};
-const didWarnAboutUninitializedState = {};
-const didWarnAboutLegacyLifecyclesAndDerivedState = {};
-const valuePropNames = ['value', 'defaultValue'];
-const newlineEatingTags = {
-  listing: true,
-  pre: true,
-  textarea: true,
-};
-
-// 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 = {};
-function validateDangerousTag(tag) {
-  if (!validatedTagCache.hasOwnProperty(tag)) {
-    if (!VALID_TAG_REGEX.test(tag)) {
-      throw new Error(`Invalid tag: ${tag}`);
-    }
-
-    validatedTagCache[tag] = true;
-  }
-}
-
-const styleNameCache = {};
-const processStyleName = function(styleName) {
-  if (styleNameCache.hasOwnProperty(styleName)) {
-    return styleNameCache[styleName];
-  }
-  const result = hyphenateStyleName(styleName);
-  styleNameCache[styleName] = result;
-  return result;
-};
-
-function createMarkupForStyles(styles): string | null {
-  let serialized = '';
-  let delimiter = '';
-  for (const styleName in styles) {
-    if (!styles.hasOwnProperty(styleName)) {
-      continue;
-    }
-    const isCustomProperty = styleName.indexOf('--') === 0;
-    const styleValue = styles[styleName];
-    if (__DEV__) {
-      if (!isCustomProperty) {
-        warnValidStyle(styleName, styleValue);
-      }
-    }
-    if (styleValue != null) {
-      serialized +=
-        delimiter +
-        (isCustomProperty ? styleName : processStyleName(styleName)) +
-        ':';
-      serialized += dangerousStyleValue(
-        styleName,
-        styleValue,
-        isCustomProperty,
-      );
-
-      delimiter = ';';
-    }
-  }
-  return serialized || null;
-}
-
-function warnNoop(
-  publicInstance: React$Component<any, 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(
-      '%s(...): Can only update a mounting component. ' +
-        'This usually means you called %s() outside componentWillMount() on the server. ' +
-        'This is a no-op.\n\nPlease check the code for the %s component.',
-      callerName,
-      callerName,
-      componentName,
-    );
-    didWarnAboutNoopUpdateForComponent[warningKey] = true;
-  }
-}
-
-function shouldConstruct(Component) {
-  return Component.prototype && Component.prototype.isReactComponent;
-}
-
-function getNonChildrenInnerMarkup(props) {
-  const innerHTML = props.dangerouslySetInnerHTML;
-  if (innerHTML != null) {
-    if (innerHTML.__html != null) {
-      return innerHTML.__html;
-    }
-  } else {
-    const content = props.children;
-    if (typeof content === 'string' || typeof content === 'number') {
-      return escapeTextForBrowser(content);
-    }
-  }
-  return null;
-}
-
-function flattenTopLevelChildren(children: mixed): FlatReactChildren {
-  if (!React.isValidElement(children)) {
-    return toArray(children);
-  }
-  const element = ((children: any): ReactElement);
-  if (element.type !== REACT_FRAGMENT_TYPE) {
-    return [element];
-  }
-  const fragmentChildren = element.props.children;
-  if (!React.isValidElement(fragmentChildren)) {
-    return toArray(fragmentChildren);
-  }
-  const fragmentChildElement = ((fragmentChildren: any): ReactElement);
-  return [fragmentChildElement];
-}
-
-function flattenOptionChildren(children: mixed): ?string {
-  if (children === undefined || children === null) {
-    return children;
-  }
-  let content = '';
-  // Flatten children and warn if they aren't strings or numbers;
-  // invalid types are ignored.
-  React.Children.forEach((children: any), function(child) {
-    if (child == null) {
-      return;
-    }
-    content += (child: any);
-    if (__DEV__) {
-      if (
-        !didWarnInvalidOptionChildren &&
-        typeof child !== 'string' &&
-        typeof child !== 'number'
-      ) {
-        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 STYLE = 'style';
-const RESERVED_PROPS = {
-  children: null,
-  dangerouslySetInnerHTML: null,
-  suppressContentEditableWarning: null,
-  suppressHydrationWarning: null,
-};
-
-function createOpenTagMarkup(
-  tagVerbatim: string,
-  tagLowercase: string,
-  props: Object,
-  namespace: string,
-  makeStaticMarkup: boolean,
-  isRootElement: boolean,
-): string {
-  let ret = '<' + tagVerbatim;
-
-  const isCustomComponent = isCustomComponentFn(tagLowercase, props);
-
-  for (const propKey in props) {
-    if (!hasOwnProperty.call(props, propKey)) {
-      continue;
-    }
-    let propValue = props[propKey];
-    if (propValue == null) {
-      continue;
-    }
-    if (propKey === STYLE) {
-      propValue = createMarkupForStyles(propValue);
-    }
-    let markup = null;
-    if (isCustomComponent) {
-      if (!RESERVED_PROPS.hasOwnProperty(propKey)) {
-        markup = createMarkupForCustomAttribute(propKey, propValue);
-      }
-    } else {
-      markup = createMarkupForProperty(propKey, propValue);
-    }
-    if (markup) {
-      ret += ' ' + markup;
-    }
-  }
-
-  return ret;
-}
-
-function resolve(
-  child: mixed,
-  context: Object,
-  threadID: ThreadID,
-): {|
-  child: mixed,
-  context: Object,
-|} {
-  while (React.isValidElement(child)) {
-    // Safe because we just checked it's an element.
-    const element: ReactElement = (child: any);
-    const Component = element.type;
-    if (__DEV__) {
-      pushElementToDebugStack(element);
-    }
-    if (typeof Component !== 'function') {
-      break;
-    }
-    processChild(element, Component);
-  }
-
-  // Extra closure so queue and replace can be captured properly
-  function processChild(element, Component) {
-    const isClass = shouldConstruct(Component);
-    const publicContext = processContext(Component, context, threadID, isClass);
-
-    let queue = [];
-    let replace = false;
-    const updater = {
-      isMounted: function(publicInstance) {
-        return false;
-      },
-      enqueueForceUpdate: function(publicInstance) {
-        if (queue === null) {
-          warnNoop(publicInstance, 'forceUpdate');
-          return null;
-        }
-      },
-      enqueueReplaceState: function(publicInstance, completeState) {
-        replace = true;
-        queue = [completeState];
-      },
-      enqueueSetState: function(publicInstance, currentPartialState) {
-        if (queue === null) {
-          warnNoop(publicInstance, 'setState');
-          return null;
-        }
-        queue.push(currentPartialState);
-      },
-    };
-
-    let inst;
-    if (isClass) {
-      inst = new Component(element.props, publicContext, updater);
-
-      if (typeof Component.getDerivedStateFromProps === 'function') {
-        if (__DEV__) {
-          if (inst.state === null || inst.state === undefined) {
-            const componentName =
-              getComponentNameFromType(Component) || 'Unknown';
-            if (!didWarnAboutUninitializedState[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,
-                inst.state === null ? 'null' : 'undefined',
-                componentName,
-              );
-              didWarnAboutUninitializedState[componentName] = true;
-            }
-          }
-
-          // 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 Component.getDerivedStateFromProps === 'function' ||
-            typeof inst.getSnapshotBeforeUpdate === 'function'
-          ) {
-            let foundWillMountName = null;
-            let foundWillReceivePropsName = null;
-            let foundWillUpdateName = null;
-            if (
-              typeof inst.componentWillMount === 'function' &&
-              inst.componentWillMount.__suppressDeprecationWarning !== true
-            ) {
-              foundWillMountName = 'componentWillMount';
-            } else if (typeof inst.UNSAFE_componentWillMount === 'function') {
-              foundWillMountName = 'UNSAFE_componentWillMount';
-            }
-            if (
-              typeof inst.componentWillReceiveProps === 'function' &&
-              inst.componentWillReceiveProps.__suppressDeprecationWarning !==
-                true
-            ) {
-              foundWillReceivePropsName = 'componentWillReceiveProps';
-            } else if (
-              typeof inst.UNSAFE_componentWillReceiveProps === 'function'
-            ) {
-              foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
-            }
-            if (
-              typeof inst.componentWillUpdate === 'function' &&
-              inst.componentWillUpdate.__suppressDeprecationWarning !== true
-            ) {
-              foundWillUpdateName = 'componentWillUpdate';
-            } else if (typeof inst.UNSAFE_componentWillUpdate === 'function') {
-              foundWillUpdateName = 'UNSAFE_componentWillUpdate';
-            }
-            if (
-              foundWillMountName !== null ||
-              foundWillReceivePropsName !== null ||
-              foundWillUpdateName !== null
-            ) {
-              const componentName =
-                getComponentNameFromType(Component) || 'Component';
-              const newApiName =
-                typeof Component.getDerivedStateFromProps === 'function'
-                  ? 'getDerivedStateFromProps()'
-                  : 'getSnapshotBeforeUpdate()';
-              if (!didWarnAboutLegacyLifecyclesAndDerivedState[componentName]) {
-                didWarnAboutLegacyLifecyclesAndDerivedState[
-                  componentName
-                ] = true;
-                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://reactjs.org/link/unsafe-component-lifecycles',
-                  componentName,
-                  newApiName,
-                  foundWillMountName !== null
-                    ? `\n  ${foundWillMountName}`
-                    : '',
-                  foundWillReceivePropsName !== null
-                    ? `\n  ${foundWillReceivePropsName}`
-                    : '',
-                  foundWillUpdateName !== null
-                    ? `\n  ${foundWillUpdateName}`
-                    : '',
-                );
-              }
-            }
-          }
-        }
-
-        const partialState = Component.getDerivedStateFromProps.call(
-          null,
-          element.props,
-          inst.state,
-        );
-
-        if (__DEV__) {
-          if (partialState === undefined) {
-            const componentName =
-              getComponentNameFromType(Component) || 'Unknown';
-            if (!didWarnAboutUndefinedDerivedState[componentName]) {
-              console.error(
-                '%s.getDerivedStateFromProps(): A valid state object (or null) must be returned. ' +
-                  'You have returned undefined.',
-                componentName,
-              );
-              didWarnAboutUndefinedDerivedState[componentName] = true;
-            }
-          }
-        }
-
-        if (partialState != null) {
-          inst.state = assign({}, inst.state, partialState);
-        }
-      }
-    } else {
-      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 componentIdentity = {};
-      prepareToUseHooks(componentIdentity);
-      inst = Component(element.props, publicContext, updater);
-      inst = finishHooks(Component, element.props, inst, publicContext);
-
-      if (__DEV__) {
-        // Support for module components is deprecated and is removed behind a flag.
-        // Whether or not it would crash later, we want to show a good message in DEV first.
-        if (inst != null && inst.render != null) {
-          const componentName =
-            getComponentNameFromType(Component) || 'Unknown';
-          if (!didWarnAboutModulePatternComponent[componentName]) {
-            console.error(
-              'The <%s /> component appears to be a function component that returns a class instance. ' +
-                'Change %s to a class that extends React.Component instead. ' +
-                "If you can't use a class try assigning the prototype on the function as a workaround. " +
-                "`%s.prototype = React.Component.prototype`. Don't use an arrow function since it " +
-                'cannot be called with `new` by React.',
-              componentName,
-              componentName,
-              componentName,
-            );
-            didWarnAboutModulePatternComponent[componentName] = true;
-          }
-        }
-      }
-
-      // If the flag is on, everything is assumed to be a function component.
-      // Otherwise, we also do the unfortunate dynamic checks.
-      if (
-        disableModulePatternComponents ||
-        inst == null ||
-        inst.render == null
-      ) {
-        child = inst;
-        return;
-      }
-    }
-
-    inst.props = element.props;
-    inst.context = publicContext;
-    inst.updater = updater;
-
-    let initialState = inst.state;
-    if (initialState === undefined) {
-      inst.state = initialState = null;
-    }
-    if (
-      typeof inst.UNSAFE_componentWillMount === 'function' ||
-      typeof inst.componentWillMount === 'function'
-    ) {
-      if (typeof inst.componentWillMount === 'function') {
-        // In order to support react-lifecycles-compat polyfilled components,
-        // Unsafe lifecycles should not be invoked for any component with the new gDSFP.
-        if (typeof Component.getDerivedStateFromProps !== 'function') {
-          if (__DEV__) {
-            if (
-              warnAboutDeprecatedLifecycles &&
-              inst.componentWillMount.__suppressDeprecationWarning !== true
-            ) {
-              const componentName =
-                getComponentNameFromType(Component) || '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://reactjs.org/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;
-              }
-            }
-          }
-
-          inst.componentWillMount();
-        }
-      }
-      if (
-        typeof inst.UNSAFE_componentWillMount === 'function' &&
-        typeof Component.getDerivedStateFromProps !== 'function'
-      ) {
-        // In order to support react-lifecycles-compat polyfilled components,
-        // Unsafe lifecycles should not be invoked for any component with the new gDSFP.
-        inst.UNSAFE_componentWillMount();
-      }
-      if (queue.length) {
-        const oldQueue = queue;
-        const oldReplace = replace;
-        queue = null;
-        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, element.props, publicContext)
-                : partial;
-            if (partialState != null) {
-              if (dontMutate) {
-                dontMutate = false;
-                nextState = assign({}, nextState, partialState);
-              } else {
-                assign(nextState, partialState);
-              }
-            }
-          }
-          inst.state = nextState;
-        }
-      } else {
-        queue = null;
-      }
-    }
-    child = inst.render();
-
-    let childContext;
-    if (disableLegacyContext) {
-      if (__DEV__) {
-        const childContextTypes = Component.childContextTypes;
-        if (childContextTypes !== undefined) {
-          console.error(
-            '%s uses the legacy childContextTypes API which is no longer supported. ' +
-              'Use React.createContext() instead.',
-            getComponentNameFromType(Component) || 'Unknown',
-          );
-        }
-      }
-    } else {
-      if (typeof inst.getChildContext === 'function') {
-        const childContextTypes = Component.childContextTypes;
-        if (typeof childContextTypes === 'object') {
-          childContext = inst.getChildContext();
-          for (const contextKey in childContext) {
-            if (!(contextKey in childContextTypes)) {
-              throw new Error(
-                `${getComponentNameFromType(Component) ||
-                  'Unknown'}.getChildContext(): key "${contextKey}" is not defined in childContextTypes.`,
-              );
-            }
-          }
-        } else {
-          if (__DEV__) {
-            console.error(
-              '%s.getChildContext(): childContextTypes must be defined in order to ' +
-                'use getChildContext().',
-              getComponentNameFromType(Component) || 'Unknown',
-            );
-          }
-        }
-      }
-      if (childContext) {
-        context = assign({}, context, childContext);
-      }
-    }
-  }
-  return {child, context};
-}
-
-type Frame = {
-  type: mixed,
-  domNamespace: string,
-  children: FlatReactChildren,
-  fallbackFrame?: Frame,
-  childIndex: number,
-  context: Object,
-  footer: string,
-  ...
-};
-
-type FrameDev = Frame & {|debugElementStack: Array<ReactElement>|};
-
-class ReactDOMServerRenderer {
-  threadID: ThreadID;
-  stack: Array<Frame>;
-  exhausted: boolean;
-  // TODO: type this more strictly:
-  currentSelectValue: any;
-  previousWasTextNode: boolean;
-  makeStaticMarkup: boolean;
-  suspenseDepth: number;
-
-  contextIndex: number;
-  contextStack: Array<ReactContext<any>>;
-  contextValueStack: Array<any>;
-  contextProviderStack: ?Array<ReactProvider<any>>; // DEV-only
-
-  constructor(children: mixed, makeStaticMarkup: boolean) {
-    const flatChildren = flattenTopLevelChildren(children);
-
-    const topFrame: Frame = {
-      type: null,
-      // Assume all trees start in the HTML namespace (not totally true, but
-      // this is what we did historically)
-      domNamespace: HTML_NAMESPACE,
-      children: flatChildren,
-      childIndex: 0,
-      context: emptyObject,
-      footer: '',
-    };
-    if (__DEV__) {
-      ((topFrame: any): FrameDev).debugElementStack = [];
-    }
-    this.threadID = allocThreadID();
-    this.stack = [topFrame];
-    this.exhausted = false;
-    this.currentSelectValue = null;
-    this.previousWasTextNode = false;
-    this.makeStaticMarkup = makeStaticMarkup;
-    this.suspenseDepth = 0;
-
-    // Context (new API)
-    this.contextIndex = -1;
-    this.contextStack = [];
-    this.contextValueStack = [];
-
-    if (__DEV__) {
-      this.contextProviderStack = [];
-    }
-  }
-
-  destroy() {
-    if (!this.exhausted) {
-      this.exhausted = true;
-      this.clearProviders();
-      freeThreadID(this.threadID);
-    }
-  }
-
-  /**
-   * Note: We use just two stacks regardless of how many context providers you have.
-   * Providers are always popped in the reverse order to how they were pushed
-   * so we always know on the way down which provider you'll encounter next on the way up.
-   * On the way down, we push the current provider, and its context value *before*
-   * we mutated it, onto the stacks. Therefore, on the way up, we always know which
-   * provider needs to be "restored" to which value.
-   * https://github.com/facebook/react/pull/12985#issuecomment-396301248
-   */
-
-  pushProvider<T>(provider: ReactProvider<T>): void {
-    const index = ++this.contextIndex;
-    const context: ReactContext<any> = provider.type._context;
-    const threadID = this.threadID;
-    validateContextBounds(context, threadID);
-    const previousValue = context[threadID];
-
-    // Remember which value to restore this context to on our way up.
-    this.contextStack[index] = context;
-    this.contextValueStack[index] = previousValue;
-    if (__DEV__) {
-      // Only used for push/pop mismatch warnings.
-      (this.contextProviderStack: any)[index] = provider;
-    }
-
-    // Mutate the current value.
-    context[threadID] = provider.props.value;
-  }
-
-  popProvider<T>(provider: ReactProvider<T>): void {
-    const index = this.contextIndex;
-    if (__DEV__) {
-      if (index < 0 || provider !== (this.contextProviderStack: any)[index]) {
-        console.error('Unexpected pop.');
-      }
-    }
-
-    const context: ReactContext<any> = this.contextStack[index];
-    const previousValue = this.contextValueStack[index];
-
-    // "Hide" these null assignments from Flow by using `any`
-    // because conceptually they are deletions--as long as we
-    // promise to never access values beyond `this.contextIndex`.
-    this.contextStack[index] = (null: any);
-    this.contextValueStack[index] = (null: any);
-    if (__DEV__) {
-      (this.contextProviderStack: any)[index] = (null: any);
-    }
-    this.contextIndex--;
-
-    // Restore to the previous value we stored as we were walking down.
-    // We've already verified that this context has been expanded to accommodate
-    // this thread id, so we don't need to do it again.
-    context[this.threadID] = previousValue;
-  }
-
-  clearProviders(): void {
-    // Restore any remaining providers on the stack to previous values
-    for (let index = this.contextIndex; index >= 0; index--) {
-      const context: ReactContext<any> = this.contextStack[index];
-      const previousValue = this.contextValueStack[index];
-      context[this.threadID] = previousValue;
-    }
-  }
-
-  read(bytes: number): string | null {
-    if (this.exhausted) {
-      return null;
-    }
-
-    const prevPartialRenderer = currentPartialRenderer;
-    setCurrentPartialRenderer(this);
-    const prevDispatcher = ReactCurrentDispatcher.current;
-    ReactCurrentDispatcher.current = Dispatcher;
-    try {
-      // Markup generated within <Suspense> ends up buffered until we know
-      // nothing in that boundary suspended
-      const out = [''];
-      let suspended = false;
-      while (out[0].length < bytes) {
-        if (this.stack.length === 0) {
-          this.exhausted = true;
-          freeThreadID(this.threadID);
-          break;
-        }
-        const frame: Frame = this.stack[this.stack.length - 1];
-        if (suspended || frame.childIndex >= frame.children.length) {
-          const footer = frame.footer;
-          if (footer !== '') {
-            this.previousWasTextNode = false;
-          }
-          this.stack.pop();
-          if (frame.type === 'select') {
-            this.currentSelectValue = null;
-          } else if (
-            frame.type != null &&
-            frame.type.type != null &&
-            frame.type.type.$$typeof === REACT_PROVIDER_TYPE
-          ) {
-            const provider: ReactProvider<any> = (frame.type: any);
-            this.popProvider(provider);
-          } else if (frame.type === REACT_SUSPENSE_TYPE) {
-            this.suspenseDepth--;
-            const buffered = out.pop();
-
-            if (suspended) {
-              suspended = false;
-              // If rendering was suspended at this boundary, render the fallbackFrame
-              const fallbackFrame = frame.fallbackFrame;
-
-              if (!fallbackFrame) {
-                throw new Error(
-                  'ReactDOMServer did not find an internal fallback frame for Suspense. ' +
-                    'This is a bug in React. Please file an issue.',
-                );
-              }
-
-              this.stack.push(fallbackFrame);
-              out[this.suspenseDepth] += '<!--$!-->';
-              // Skip flushing output since we're switching to the fallback
-              continue;
-            } else {
-              out[this.suspenseDepth] += buffered;
-            }
-          }
-
-          // Flush output
-          out[this.suspenseDepth] += footer;
-          continue;
-        }
-        const child = frame.children[frame.childIndex++];
-
-        let outBuffer = '';
-        if (__DEV__) {
-          pushCurrentDebugStack(this.stack);
-          // We're starting work on this frame, so reset its inner stack.
-          ((frame: any): FrameDev).debugElementStack.length = 0;
-        }
-        try {
-          outBuffer += this.render(child, frame.context, frame.domNamespace);
-        } catch (err) {
-          if (err != null && typeof err.then === 'function') {
-            if (this.suspenseDepth <= 0) {
-              throw new Error(
-                // TODO: include component name. This is a bit tricky with current factoring.
-                'A React component suspended while rendering, but no fallback UI was specified.\n' +
-                  '\n' +
-                  'Add a <Suspense fallback=...> component higher in the tree to ' +
-                  'provide a loading indicator or placeholder to display.',
-              );
-            }
-
-            suspended = true;
-          } else {
-            throw err;
-          }
-        } finally {
-          if (__DEV__) {
-            popCurrentDebugStack();
-          }
-        }
-        if (out.length <= this.suspenseDepth) {
-          out.push('');
-        }
-        out[this.suspenseDepth] += outBuffer;
-      }
-      return out[0];
-    } finally {
-      ReactCurrentDispatcher.current = prevDispatcher;
-      setCurrentPartialRenderer(prevPartialRenderer);
-      resetHooksState();
-    }
-  }
-
-  render(
-    child: ReactNode | null,
-    context: Object,
-    parentNamespace: string,
-  ): string {
-    if (typeof child === 'string' || typeof child === 'number') {
-      const text = '' + child;
-      if (text === '') {
-        return '';
-      }
-      if (this.makeStaticMarkup) {
-        return escapeTextForBrowser(text);
-      }
-      if (this.previousWasTextNode) {
-        return '<!-- -->' + escapeTextForBrowser(text);
-      }
-      this.previousWasTextNode = true;
-      return escapeTextForBrowser(text);
-    } else {
-      let nextChild;
-      ({child: nextChild, context} = resolve(child, context, this.threadID));
-      if (nextChild === null || nextChild === false) {
-        return '';
-      } else if (!React.isValidElement(nextChild)) {
-        if (nextChild != null && nextChild.$$typeof != null) {
-          // Catch unexpected special types early.
-          const $$typeof = nextChild.$$typeof;
-
-          if ($$typeof === 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.',
-            );
-          }
-
-          // Catch-all to prevent an infinite loop if React.Children.toArray() supports some new type.
-          throw new Error(
-            `Unknown element-like object type: ${($$typeof: any).toString()}. This is likely a bug in React. ` +
-              'Please file an issue.',
-          );
-        }
-        const nextChildren = toArray(nextChild);
-        const frame: Frame = {
-          type: null,
-          domNamespace: parentNamespace,
-          children: nextChildren,
-          childIndex: 0,
-          context: context,
-          footer: '',
-        };
-        if (__DEV__) {
-          ((frame: any): FrameDev).debugElementStack = [];
-        }
-        this.stack.push(frame);
-        return '';
-      }
-      // Safe because we just checked it's an element.
-      const nextElement = ((nextChild: any): ReactElement);
-      const elementType = nextElement.type;
-
-      if (typeof elementType === 'string') {
-        return this.renderDOM(nextElement, context, parentNamespace);
-      }
-
-      switch (elementType) {
-        // TODO: 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.
-        case REACT_LEGACY_HIDDEN_TYPE:
-        case REACT_DEBUG_TRACING_MODE_TYPE:
-        case REACT_STRICT_MODE_TYPE:
-        case REACT_PROFILER_TYPE:
-        case REACT_SUSPENSE_LIST_TYPE:
-        case REACT_FRAGMENT_TYPE: {
-          const nextChildren = toArray(
-            ((nextChild: any): ReactElement).props.children,
-          );
-          const frame: Frame = {
-            type: null,
-            domNamespace: parentNamespace,
-            children: nextChildren,
-            childIndex: 0,
-            context: context,
-            footer: '',
-          };
-          if (__DEV__) {
-            ((frame: any): FrameDev).debugElementStack = [];
-          }
-          this.stack.push(frame);
-          return '';
-        }
-        case REACT_SUSPENSE_TYPE: {
-          const fallback = ((nextChild: any): ReactElement).props.fallback;
-          const fallbackChildren = toArray(fallback);
-          const nextChildren = toArray(
-            ((nextChild: any): ReactElement).props.children,
-          );
-          const fallbackFrame: Frame = {
-            type: null,
-            domNamespace: parentNamespace,
-            children: fallbackChildren,
-            childIndex: 0,
-            context: context,
-            footer: '<!--/$-->',
-          };
-          const frame: Frame = {
-            fallbackFrame,
-            type: REACT_SUSPENSE_TYPE,
-            domNamespace: parentNamespace,
-            children: nextChildren,
-            childIndex: 0,
-            context: context,
-            footer: '<!--/$-->',
-          };
-          if (__DEV__) {
-            ((frame: any): FrameDev).debugElementStack = [];
-            ((fallbackFrame: any): FrameDev).debugElementStack = [];
-          }
-          this.stack.push(frame);
-          this.suspenseDepth++;
-          return '<!--$-->';
-        }
-        // eslint-disable-next-line-no-fallthrough
-        case REACT_SCOPE_TYPE: {
-          if (enableScopeAPI) {
-            const nextChildren = toArray(
-              ((nextChild: any): ReactElement).props.children,
-            );
-            const frame: Frame = {
-              type: null,
-              domNamespace: parentNamespace,
-              children: nextChildren,
-              childIndex: 0,
-              context: context,
-              footer: '',
-            };
-            if (__DEV__) {
-              ((frame: any): FrameDev).debugElementStack = [];
-            }
-            this.stack.push(frame);
-            return '';
-          }
-          throw new Error(
-            'ReactDOMServer does not yet support scope components.',
-          );
-        }
-        // eslint-disable-next-line-no-fallthrough
-        default:
-          break;
-      }
-      if (typeof elementType === 'object' && elementType !== null) {
-        switch (elementType.$$typeof) {
-          case REACT_FORWARD_REF_TYPE: {
-            const element: ReactElement = ((nextChild: any): ReactElement);
-            let nextChildren;
-            const componentIdentity = {};
-            prepareToUseHooks(componentIdentity);
-            nextChildren = elementType.render(element.props, element.ref);
-            nextChildren = finishHooks(
-              elementType.render,
-              element.props,
-              nextChildren,
-              element.ref,
-            );
-            nextChildren = toArray(nextChildren);
-            const frame: Frame = {
-              type: null,
-              domNamespace: parentNamespace,
-              children: nextChildren,
-              childIndex: 0,
-              context: context,
-              footer: '',
-            };
-            if (__DEV__) {
-              ((frame: any): FrameDev).debugElementStack = [];
-            }
-            this.stack.push(frame);
-            return '';
-          }
-          case REACT_MEMO_TYPE: {
-            const element: ReactElement = ((nextChild: any): ReactElement);
-            const nextChildren = [
-              React.createElement(
-                elementType.type,
-                assign({ref: element.ref}, element.props),
-              ),
-            ];
-            const frame: Frame = {
-              type: null,
-              domNamespace: parentNamespace,
-              children: nextChildren,
-              childIndex: 0,
-              context: context,
-              footer: '',
-            };
-            if (__DEV__) {
-              ((frame: any): FrameDev).debugElementStack = [];
-            }
-            this.stack.push(frame);
-            return '';
-          }
-          case REACT_PROVIDER_TYPE: {
-            const provider: ReactProvider<any> = (nextChild: any);
-            const nextProps = provider.props;
-            const nextChildren = toArray(nextProps.children);
-            const frame: Frame = {
-              type: provider,
-              domNamespace: parentNamespace,
-              children: nextChildren,
-              childIndex: 0,
-              context: context,
-              footer: '',
-            };
-            if (__DEV__) {
-              ((frame: any): FrameDev).debugElementStack = [];
-            }
-
-            this.pushProvider(provider);
-
-            this.stack.push(frame);
-            return '';
-          }
-          case REACT_CONTEXT_TYPE: {
-            let reactContext = (nextChild: any).type;
-            // The logic below for Context differs depending on PROD or DEV mode. In
-            // DEV mode, we create a separate object for Context.Consumer that acts
-            // like a proxy to Context. This proxy object adds unnecessary code in PROD
-            // so we use the old behaviour (Context.Consumer references Context) to
-            // reduce size and overhead. The separate object references context via
-            // a property called "_context", which also gives us the ability to check
-            // in DEV mode if this property exists or not and warn if it does not.
-            if (__DEV__) {
-              if ((reactContext: any)._context === undefined) {
-                // This may be because it's a Context (rather than a Consumer).
-                // Or it may be because it's older React where they're the same thing.
-                // We only want to warn if we're sure it's a new React.
-                if (reactContext !== reactContext.Consumer) {
-                  if (!hasWarnedAboutUsingContextAsConsumer) {
-                    hasWarnedAboutUsingContextAsConsumer = true;
-                    console.error(
-                      'Rendering <Context> directly is not supported and will be removed in ' +
-                        'a future major release. Did you mean to render <Context.Consumer> instead?',
-                    );
-                  }
-                }
-              } else {
-                reactContext = (reactContext: any)._context;
-              }
-            }
-            const nextProps: any = (nextChild: any).props;
-            const threadID = this.threadID;
-            validateContextBounds(reactContext, threadID);
-            const nextValue = reactContext[threadID];
-
-            const nextChildren = toArray(nextProps.children(nextValue));
-            const frame: Frame = {
-              type: nextChild,
-              domNamespace: parentNamespace,
-              children: nextChildren,
-              childIndex: 0,
-              context: context,
-              footer: '',
-            };
-            if (__DEV__) {
-              ((frame: any): FrameDev).debugElementStack = [];
-            }
-            this.stack.push(frame);
-            return '';
-          }
-          // eslint-disable-next-line-no-fallthrough
-          case REACT_LAZY_TYPE: {
-            const element: ReactElement = (nextChild: any);
-            const lazyComponent: LazyComponent<any, any> = (nextChild: any)
-              .type;
-            // Attempt to initialize lazy component regardless of whether the
-            // suspense server-side renderer is enabled so synchronously
-            // resolved constructors are supported.
-            const payload = lazyComponent._payload;
-            const init = lazyComponent._init;
-            const result = init(payload);
-            const nextChildren = [
-              React.createElement(
-                result,
-                assign({ref: element.ref}, element.props),
-              ),
-            ];
-            const frame: Frame = {
-              type: null,
-              domNamespace: parentNamespace,
-              children: nextChildren,
-              childIndex: 0,
-              context: context,
-              footer: '',
-            };
-            if (__DEV__) {
-              ((frame: any): FrameDev).debugElementStack = [];
-            }
-            this.stack.push(frame);
-            return '';
-          }
-        }
-      }
-
-      let info = '';
-      if (__DEV__) {
-        const owner = nextElement._owner;
-        if (
-          elementType === undefined ||
-          (typeof elementType === 'object' &&
-            elementType !== null &&
-            Object.keys(elementType).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.';
-        }
-        const ownerName = owner ? getComponentNameFromType(owner) : null;
-        if (ownerName) {
-          info += '\n\nCheck the render method of `' + ownerName + '`.';
-        }
-      }
-
-      throw new Error(
-        'Element type is invalid: expected a string (for built-in ' +
-          'components) or a class/function (for composite components) ' +
-          `but got: ${
-            elementType == null ? elementType : typeof elementType
-          }.${info}`,
-      );
-    }
-  }
-
-  renderDOM(
-    element: ReactElement,
-    context: Object,
-    parentNamespace: string,
-  ): string {
-    const tag = element.type;
-
-    let namespace = parentNamespace;
-    if (parentNamespace === HTML_NAMESPACE) {
-      namespace = getIntrinsicNamespace(tag);
-    }
-
-    let props = element.props;
-
-    if (__DEV__) {
-      if (namespace === HTML_NAMESPACE) {
-        const isCustomComponent = isCustomComponentFn(tag, props);
-        // Should this check be gated by parent namespace? Not sure we want to
-        // allow <SVG> or <mATH>.
-        if (!isCustomComponent && tag.toLowerCase() !== element.type) {
-          console.error(
-            '<%s /> is using incorrect casing. ' +
-              'Use PascalCase for React components, ' +
-              'or lowercase for HTML elements.',
-            element.type,
-          );
-        }
-      }
-    }
-
-    validateDangerousTag(tag);
-
-    if (tag === 'input') {
-      if (__DEV__) {
-        checkControlledValueProps('input', props);
-
-        if (
-          props.checked !== undefined &&
-          props.defaultChecked !== undefined &&
-          !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://reactjs.org/link/controlled-components',
-            'A component',
-            props.type,
-          );
-          didWarnDefaultChecked = true;
-        }
-        if (
-          props.value !== undefined &&
-          props.defaultValue !== undefined &&
-          !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://reactjs.org/link/controlled-components',
-            'A component',
-            props.type,
-          );
-          didWarnDefaultInputValue = true;
-        }
-      }
-
-      props = assign(
-        {
-          type: undefined,
-        },
-        props,
-        {
-          defaultChecked: undefined,
-          defaultValue: undefined,
-          value: props.value != null ? props.value : props.defaultValue,
-          checked: props.checked != null ? props.checked : props.defaultChecked,
-        },
-      );
-    } else if (tag === 'textarea') {
-      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://reactjs.org/link/controlled-components',
-          );
-          didWarnDefaultTextareaValue = true;
-        }
-      }
-
-      let initialValue = props.value;
-      if (initialValue == null) {
-        let defaultValue = props.defaultValue;
-        // TODO (yungsters): Remove support for children content in <textarea>.
-        let textareaChildren = props.children;
-        if (textareaChildren != null) {
-          if (__DEV__) {
-            console.error(
-              'Use the `defaultValue` or `value` props instead of setting ' +
-                'children on <textarea>.',
-            );
-          }
-
-          if (defaultValue != null) {
-            throw new Error(
-              'If you supply `defaultValue` on a <textarea>, do not pass children.',
-            );
-          }
-
-          if (isArray(textareaChildren)) {
-            if (textareaChildren.length > 1) {
-              throw new Error('<textarea> can only have at most one child.');
-            }
-
-            textareaChildren = textareaChildren[0];
-          }
-
-          if (__DEV__) {
-            checkPropStringCoercion(textareaChildren, 'children');
-          }
-          defaultValue = '' + textareaChildren;
-        }
-        if (defaultValue == null) {
-          defaultValue = '';
-        }
-        initialValue = defaultValue;
-      }
-
-      if (__DEV__) {
-        checkFormFieldValueStringCoercion(initialValue);
-      }
-      props = assign({}, props, {
-        value: undefined,
-        children: '' + initialValue,
-      });
-    } else if (tag === 'select') {
-      if (__DEV__) {
-        checkControlledValueProps('select', props);
-
-        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.',
-              propName,
-            );
-          } else if (!props.multiple && propNameIsArray) {
-            console.error(
-              'The `%s` prop supplied to <select> must be a scalar ' +
-                'value if `multiple` is false.',
-              propName,
-            );
-          }
-        }
-
-        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://reactjs.org/link/controlled-components',
-          );
-          didWarnDefaultSelectValue = true;
-        }
-      }
-      this.currentSelectValue =
-        props.value != null ? props.value : props.defaultValue;
-      props = assign({}, props, {
-        value: undefined,
-      });
-    } else if (tag === 'option') {
-      let selected = null;
-      const selectValue = this.currentSelectValue;
-      if (selectValue != null) {
-        let value;
-        if (props.value != null) {
-          if (__DEV__) {
-            checkFormFieldValueStringCoercion(props.value);
-          }
-          value = props.value + '';
-        } else {
-          if (__DEV__) {
-            if (props.dangerouslySetInnerHTML != null) {
-              if (!didWarnInvalidOptionInnerHTML) {
-                didWarnInvalidOptionInnerHTML = true;
-                console.error(
-                  'Pass a `value` prop if you set dangerouslyInnerHTML so React knows ' +
-                    'which value should be selected.',
-                );
-              }
-            }
-          }
-          value = flattenOptionChildren(props.children);
-        }
-        selected = false;
-        if (isArray(selectValue)) {
-          // multiple
-          for (let j = 0; j < selectValue.length; j++) {
-            if (__DEV__) {
-              checkFormFieldValueStringCoercion(selectValue[j]);
-            }
-            if ('' + selectValue[j] === value) {
-              selected = true;
-              break;
-            }
-          }
-        } else {
-          if (__DEV__) {
-            checkFormFieldValueStringCoercion(selectValue);
-          }
-          selected = '' + selectValue === value;
-        }
-
-        props = assign(
-          {
-            selected: undefined,
-          },
-          props,
-          {
-            selected: selected,
-          },
-        );
-      }
-    }
-
-    if (__DEV__) {
-      validatePropertiesInDevelopment(tag, props);
-    }
-
-    assertValidProps(tag, props);
-
-    let out = createOpenTagMarkup(
-      element.type,
-      tag,
-      props,
-      namespace,
-      this.makeStaticMarkup,
-      this.stack.length === 1,
-    );
-    let footer = '';
-    if (omittedCloseTags.hasOwnProperty(tag)) {
-      out += '/>';
-    } else {
-      out += '>';
-      footer = '</' + element.type + '>';
-    }
-    let children;
-    const innerMarkup = getNonChildrenInnerMarkup(props);
-    if (innerMarkup != null) {
-      children = [];
-      if (
-        newlineEatingTags.hasOwnProperty(tag) &&
-        innerMarkup.charAt(0) === '\n'
-      ) {
-        // text/html ignores the first character in these tags if it's a newline
-        // Prefer to break application/xml over text/html (for now) by adding
-        // a newline specifically to get eaten by the parser. (Alternately for
-        // 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>
-        out += '\n';
-      }
-      out += innerMarkup;
-    } else {
-      children = toArray(props.children);
-    }
-    const frame = {
-      domNamespace: getChildNamespace(parentNamespace, element.type),
-      type: tag,
-      children,
-      childIndex: 0,
-      context: context,
-      footer: footer,
-    };
-    if (__DEV__) {
-      ((frame: any): FrameDev).debugElementStack = [];
-    }
-    this.stack.push(frame);
-    this.previousWasTextNode = false;
-    return out;
-  }
-}
-
-export default ReactDOMServerRenderer;
diff --git a/packages/react-dom/src/server/ReactPartialRendererContext.js b/packages/react-dom/src/server/ReactPartialRendererContext.js
deleted file mode 100644
index 65af591e3651..000000000000
--- a/packages/react-dom/src/server/ReactPartialRendererContext.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {ThreadID} from './ReactThreadIDAllocator';
-import type {ReactContext} from 'shared/ReactTypes';
-
-import {disableLegacyContext} from 'shared/ReactFeatureFlags';
-import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
-import getComponentNameFromType from 'shared/getComponentNameFromType';
-import checkPropTypes from 'shared/checkPropTypes';
-
-let didWarnAboutInvalidateContextType;
-if (__DEV__) {
-  didWarnAboutInvalidateContextType = new Set();
-}
-
-export const emptyObject = {};
-if (__DEV__) {
-  Object.freeze(emptyObject);
-}
-
-function maskContext(type, context) {
-  const contextTypes = type.contextTypes;
-  if (!contextTypes) {
-    return emptyObject;
-  }
-  const maskedContext = {};
-  for (const contextName in contextTypes) {
-    maskedContext[contextName] = context[contextName];
-  }
-  return maskedContext;
-}
-
-function checkContextTypes(typeSpecs, values, location: string) {
-  if (__DEV__) {
-    checkPropTypes(typeSpecs, values, location, 'Component');
-  }
-}
-
-export function validateContextBounds(
-  context: ReactContext<any>,
-  threadID: ThreadID,
-) {
-  // If we don't have enough slots in this context to store this threadID,
-  // fill it in without leaving any holes to ensure that the VM optimizes
-  // this as non-holey index properties.
-  // (Note: If `react` package is < 16.6, _threadCount is undefined.)
-  for (let i = context._threadCount | 0; i <= threadID; i++) {
-    // We assume that this is the same as the defaultValue which might not be
-    // true if we're rendering inside a secondary renderer but they are
-    // secondary because these use cases are very rare.
-    context[i] = context._currentValue2;
-    context._threadCount = i + 1;
-  }
-}
-
-export function processContext(
-  type: Function,
-  context: Object,
-  threadID: ThreadID,
-  isClass: boolean,
-) {
-  if (isClass) {
-    const contextType = type.contextType;
-    if (__DEV__) {
-      if ('contextType' in (type: any)) {
-        const isValid =
-          // Allow null for conditional declaration
-          contextType === null ||
-          (contextType !== undefined &&
-            contextType.$$typeof === REACT_CONTEXT_TYPE &&
-            contextType._context === undefined); // Not a <Context.Consumer>
-
-        if (!isValid && !didWarnAboutInvalidateContextType.has(type)) {
-          didWarnAboutInvalidateContextType.add(type);
-
-          let addendum = '';
-          if (contextType === undefined) {
-            addendum =
-              ' However, it is set to undefined. ' +
-              'This can be caused by a typo or by mixing up named and default imports. ' +
-              'This can also happen due to a circular dependency, so ' +
-              'try moving the createContext() call to a separate file.';
-          } else if (typeof contextType !== 'object') {
-            addendum = ' However, it is set to a ' + typeof contextType + '.';
-          } else if (contextType.$$typeof === REACT_PROVIDER_TYPE) {
-            addendum =
-              ' Did you accidentally pass the Context.Provider instead?';
-          } else if (contextType._context !== undefined) {
-            // <Context.Consumer>
-            addendum =
-              ' Did you accidentally pass the Context.Consumer instead?';
-          } else {
-            addendum =
-              ' However, it is set to an object with keys {' +
-              Object.keys(contextType).join(', ') +
-              '}.';
-          }
-          console.error(
-            '%s defines an invalid contextType. ' +
-              'contextType should point to the Context object returned by React.createContext().%s',
-            getComponentNameFromType(type) || 'Component',
-            addendum,
-          );
-        }
-      }
-    }
-    if (typeof contextType === 'object' && contextType !== null) {
-      validateContextBounds(contextType, threadID);
-      return contextType[threadID];
-    }
-    if (disableLegacyContext) {
-      if (__DEV__) {
-        if (type.contextTypes) {
-          console.error(
-            '%s uses the legacy contextTypes API which is no longer supported. ' +
-              'Use React.createContext() with static contextType instead.',
-            getComponentNameFromType(type) || 'Unknown',
-          );
-        }
-      }
-      return emptyObject;
-    } else {
-      const maskedContext = maskContext(type, context);
-      if (__DEV__) {
-        if (type.contextTypes) {
-          checkContextTypes(type.contextTypes, maskedContext, 'context');
-        }
-      }
-      return maskedContext;
-    }
-  } else {
-    if (disableLegacyContext) {
-      if (__DEV__) {
-        if (type.contextTypes) {
-          console.error(
-            '%s uses the legacy contextTypes API which is no longer supported. ' +
-              'Use React.createContext() with React.useContext() instead.',
-            getComponentNameFromType(type) || 'Unknown',
-          );
-        }
-      }
-      return undefined;
-    } else {
-      const maskedContext = maskContext(type, context);
-      if (__DEV__) {
-        if (type.contextTypes) {
-          checkContextTypes(type.contextTypes, maskedContext, 'context');
-        }
-      }
-      return maskedContext;
-    }
-  }
-}
diff --git a/packages/react-dom/src/server/ReactPartialRendererHooks.js b/packages/react-dom/src/server/ReactPartialRendererHooks.js
deleted file mode 100644
index 2940c47bde46..000000000000
--- a/packages/react-dom/src/server/ReactPartialRendererHooks.js
+++ /dev/null
@@ -1,555 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
-
-import type {
-  MutableSource,
-  MutableSourceGetSnapshotFn,
-  MutableSourceSubscribeFn,
-  ReactContext,
-} from 'shared/ReactTypes';
-import type PartialRenderer from './ReactPartialRenderer';
-
-import {validateContextBounds} from './ReactPartialRendererContext';
-
-import {enableCache} from 'shared/ReactFeatureFlags';
-import is from 'shared/objectIs';
-
-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 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;
-// 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://reactjs.org/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://reactjs.org/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(', ')}]`,
-      );
-    }
-  }
-  for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) {
-    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(componentIdentity: Object): void {
-  currentlyRenderingComponent = componentIdentity;
-  if (__DEV__) {
-    isInHookUserCodeInDev = false;
-  }
-
-  // The following should have already been reset
-  // didScheduleRenderPhaseUpdate = false;
-  // firstWorkInProgressHook = null;
-  // numberOfReRenders = 0;
-  // renderPhaseUpdates = null;
-  // workInProgressHook = null;
-}
-
-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;
-    numberOfReRenders += 1;
-
-    // Start over from the beginning of the list
-    workInProgressHook = null;
-
-    children = Component(props, refOrContext);
-  }
-  resetHooksState();
-  return children;
-}
-
-// Reset the internal hooks state if an error occurs while rendering a component
-export function resetHooksState(): void {
-  if (__DEV__) {
-    isInHookUserCodeInDev = false;
-  }
-
-  currentlyRenderingComponent = null;
-  didScheduleRenderPhaseUpdate = false;
-  firstWorkInProgressHook = null;
-  numberOfReRenders = 0;
-  renderPhaseUpdates = null;
-  workInProgressHook = null;
-}
-
-function getCacheSignal() {
-  throw new Error('Not implemented.');
-}
-
-function getCacheForType<T>(resourceType: () => T): T {
-  throw new Error('Not implemented.');
-}
-
-function readContext<T>(context: ReactContext<T>): T {
-  const threadID = currentPartialRenderer.threadID;
-  validateContextBounds(context, threadID);
-  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 context[threadID];
-}
-
-function useContext<T>(context: ReactContext<T>): T {
-  if (__DEV__) {
-    currentHookNameInDev = 'useContext';
-  }
-  resolveCurrentlyRenderingComponent();
-  const threadID = currentPartialRenderer.threadID;
-  validateContextBounds(context, threadID);
-  return context[threadID];
-}
-
-function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
-  // $FlowFixMe: 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) {
-        renderPhaseUpdates.delete(queue);
-        let newState = workInProgressHook.memoizedState;
-        let update = firstRenderPhaseUpdate;
-        do {
-          // Process this render phase update. We don't have to check the
-          // priority because it will always be the same as the current
-          // render's.
-          const action = update.action;
-          if (__DEV__) {
-            isInHookUserCodeInDev = true;
-          }
-          newState = reducer(newState, action);
-          if (__DEV__) {
-            isInHookUserCodeInDev = false;
-          }
-          update = update.next;
-        } while (update !== null);
-
-        workInProgressHook.memoizedState = newState;
-
-        return [newState, dispatch];
-      }
-    }
-    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;
-    }
-    workInProgressHook.memoizedState = initialState;
-    const queue: UpdateQueue<A> = (workInProgressHook.queue = {
-      last: null,
-      dispatch: null,
-    });
-    const dispatch: Dispatch<A> = (queue.dispatch = (dispatchAction.bind(
-      null,
-      currentlyRenderingComponent,
-      queue,
-    ): any));
-    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;
-  }
-  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);
-    }
-    workInProgressHook.memoizedState = ref;
-    return ref;
-  } else {
-    return previousRef;
-  }
-}
-
-function useInsertionEffect(
-  create: () => mixed,
-  inputs: Array<mixed> | void | null,
-) {
-  if (__DEV__) {
-    currentHookNameInDev = 'useInsertionEffect';
-    console.error(
-      'useInsertionEffect does nothing on the server, because its effect cannot ' +
-        "be encoded into the server renderer's output format. This will lead " +
-        'to a mismatch between the initial, non-hydrated UI and the intended ' +
-        'UI. To avoid this, useInsertionEffect should only be used in ' +
-        'components that render exclusively on the client.',
-    );
-  }
-}
-
-export function useLayoutEffect(
-  create: () => (() => void) | void,
-  inputs: Array<mixed> | void | null,
-) {
-  if (__DEV__) {
-    currentHookNameInDev = 'useLayoutEffect';
-    console.error(
-      'useLayoutEffect does nothing on the server, because its effect cannot ' +
-        "be encoded into the server renderer's output format. This will lead " +
-        'to a mismatch between the initial, non-hydrated UI and the intended ' +
-        'UI. To avoid this, useLayoutEffect should only be used in ' +
-        'components that render exclusively on the client. ' +
-        'See https://reactjs.org/link/uselayouteffect-ssr for common fixes.',
-    );
-  }
-}
-
-function dispatchAction<A>(
-  componentIdentity: Object,
-  queue: UpdateQueue<A>,
-  action: A,
-) {
-  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) {
-      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);
-}
-
-// TODO Decide on how to implement this hook for server rendering.
-// If a mutation occurs during render, consider triggering a Suspense boundary
-// and falling back to client rendering.
-function useMutableSource<Source, Snapshot>(
-  source: MutableSource<Source>,
-  getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
-  subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-): Snapshot {
-  resolveCurrentlyRenderingComponent();
-  return getSnapshot(source._source);
-}
-
-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): T {
-  resolveCurrentlyRenderingComponent();
-  return value;
-}
-
-function useTransition(): [boolean, (callback: () => void) => void] {
-  resolveCurrentlyRenderingComponent();
-  const startTransition = callback => {
-    callback();
-  };
-  return [false, startTransition];
-}
-
-function useId(): string {
-  throw new Error('Not implemented.');
-}
-
-function useCacheRefresh(): <T>(?() => T, ?T) => void {
-  throw new Error('Not implemented.');
-}
-
-function noop(): void {}
-
-export let currentPartialRenderer: PartialRenderer = (null: any);
-export function setCurrentPartialRenderer(renderer: PartialRenderer) {
-  currentPartialRenderer = renderer;
-}
-
-export const Dispatcher: DispatcherType = {
-  readContext,
-  useContext,
-  useMemo,
-  useReducer,
-  useRef,
-  useState,
-  useInsertionEffect,
-  useLayoutEffect,
-  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.
-  useMutableSource,
-  useSyncExternalStore,
-};
-
-if (enableCache) {
-  Dispatcher.getCacheSignal = getCacheSignal;
-  Dispatcher.getCacheForType = getCacheForType;
-  Dispatcher.useCacheRefresh = useCacheRefresh;
-}

From 5e4e2dae0ba1836d26fa4e5edb4475d3b3e0a60c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Jul 2022 11:51:40 -0400
Subject: [PATCH 1463/1603] Defer setState callbacks until component is visible
 (#24872)

A class component `setState` callback should not fire if a component is inside a
hidden Offscreen tree. Instead, it should wait until the next time the component
is made visible.
---
 .../src/ReactFiberClassUpdateQueue.new.js     | 103 ++++++++++++------
 .../src/ReactFiberClassUpdateQueue.old.js     | 103 ++++++++++++------
 .../src/ReactFiberCommitWork.new.js           |  35 ++++--
 .../src/ReactFiberCommitWork.old.js           |  35 ++++--
 .../src/__tests__/ReactOffscreen-test.js      |  56 ++++++++++
 5 files changed, 254 insertions(+), 78 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
index ae9254add8d8..d3e6996a49a2 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@@ -102,7 +102,12 @@ import {
   enterDisallowedContextReadInDEV,
   exitDisallowedContextReadInDEV,
 } from './ReactFiberNewContext.new';
-import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags';
+import {
+  Callback,
+  Visibility,
+  ShouldCapture,
+  DidCapture,
+} from './ReactFiberFlags';
 
 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
@@ -136,6 +141,7 @@ export type Update<State> = {|
 export type SharedQueue<State> = {|
   pending: Update<State> | null,
   lanes: Lanes,
+  hiddenCallbacks: Array<() => mixed> | null,
 |};
 
 export type UpdateQueue<State> = {|
@@ -143,7 +149,7 @@ export type UpdateQueue<State> = {|
   firstBaseUpdate: Update<State> | null,
   lastBaseUpdate: Update<State> | null,
   shared: SharedQueue<State>,
-  effects: Array<Update<State>> | null,
+  callbacks: Array<() => mixed> | null,
 |};
 
 export const UpdateState = 0;
@@ -175,8 +181,9 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     shared: {
       pending: null,
       lanes: NoLanes,
+      hiddenCallbacks: null,
     },
-    effects: null,
+    callbacks: null,
   };
   fiber.updateQueue = queue;
 }
@@ -194,7 +201,7 @@ export function cloneUpdateQueue<State>(
       firstBaseUpdate: currentQueue.firstBaseUpdate,
       lastBaseUpdate: currentQueue.lastBaseUpdate,
       shared: currentQueue.shared,
-      effects: currentQueue.effects,
+      callbacks: null,
     };
     workInProgress.updateQueue = clone;
   }
@@ -326,7 +333,9 @@ export function enqueueCapturedUpdate<State>(
 
             tag: update.tag,
             payload: update.payload,
-            callback: update.callback,
+            // When this update is rebased, we should not fire its
+            // callback again.
+            callback: null,
 
             next: null,
           };
@@ -355,7 +364,7 @@ export function enqueueCapturedUpdate<State>(
         firstBaseUpdate: newFirst,
         lastBaseUpdate: newLast,
         shared: currentQueue.shared,
-        effects: currentQueue.effects,
+        callbacks: currentQueue.callbacks,
       };
       workInProgress.updateQueue = queue;
       return;
@@ -577,7 +586,10 @@ export function processUpdateQueue<State>(
 
             tag: update.tag,
             payload: update.payload,
-            callback: update.callback,
+
+            // When this update is rebased, we should not fire its
+            // callback again.
+            callback: null,
 
             next: null,
           };
@@ -594,18 +606,16 @@ export function processUpdateQueue<State>(
           instance,
         );
         const callback = update.callback;
-        if (
-          callback !== null &&
-          // If the update was already committed, we should not queue its
-          // callback again.
-          update.lane !== NoLane
-        ) {
+        if (callback !== null) {
           workInProgress.flags |= Callback;
-          const effects = queue.effects;
-          if (effects === null) {
-            queue.effects = [update];
+          if (isHiddenUpdate) {
+            workInProgress.flags |= Visibility;
+          }
+          const callbacks = queue.callbacks;
+          if (callbacks === null) {
+            queue.callbacks = [callback];
           } else {
-            effects.push(update);
+            callbacks.push(callback);
           }
         }
       }
@@ -679,22 +689,51 @@ export function checkHasForceUpdateAfterProcessing(): boolean {
   return hasForceUpdate;
 }
 
-export function commitUpdateQueue<State>(
-  finishedWork: Fiber,
-  finishedQueue: UpdateQueue<State>,
-  instance: any,
+export function deferHiddenCallbacks<State>(
+  updateQueue: UpdateQueue<State>,
 ): void {
-  // Commit the effects
-  const effects = finishedQueue.effects;
-  finishedQueue.effects = null;
-  if (effects !== null) {
-    for (let i = 0; i < effects.length; i++) {
-      const effect = effects[i];
-      const callback = effect.callback;
-      if (callback !== null) {
-        effect.callback = null;
-        callCallback(callback, instance);
-      }
+  // 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/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
index 3b39da9ae418..38b43941fc1b 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
@@ -102,7 +102,12 @@ import {
   enterDisallowedContextReadInDEV,
   exitDisallowedContextReadInDEV,
 } from './ReactFiberNewContext.old';
-import {Callback, ShouldCapture, DidCapture} from './ReactFiberFlags';
+import {
+  Callback,
+  Visibility,
+  ShouldCapture,
+  DidCapture,
+} from './ReactFiberFlags';
 
 import {debugRenderPhaseSideEffectsForStrictMode} from 'shared/ReactFeatureFlags';
 
@@ -136,6 +141,7 @@ export type Update<State> = {|
 export type SharedQueue<State> = {|
   pending: Update<State> | null,
   lanes: Lanes,
+  hiddenCallbacks: Array<() => mixed> | null,
 |};
 
 export type UpdateQueue<State> = {|
@@ -143,7 +149,7 @@ export type UpdateQueue<State> = {|
   firstBaseUpdate: Update<State> | null,
   lastBaseUpdate: Update<State> | null,
   shared: SharedQueue<State>,
-  effects: Array<Update<State>> | null,
+  callbacks: Array<() => mixed> | null,
 |};
 
 export const UpdateState = 0;
@@ -175,8 +181,9 @@ export function initializeUpdateQueue<State>(fiber: Fiber): void {
     shared: {
       pending: null,
       lanes: NoLanes,
+      hiddenCallbacks: null,
     },
-    effects: null,
+    callbacks: null,
   };
   fiber.updateQueue = queue;
 }
@@ -194,7 +201,7 @@ export function cloneUpdateQueue<State>(
       firstBaseUpdate: currentQueue.firstBaseUpdate,
       lastBaseUpdate: currentQueue.lastBaseUpdate,
       shared: currentQueue.shared,
-      effects: currentQueue.effects,
+      callbacks: null,
     };
     workInProgress.updateQueue = clone;
   }
@@ -326,7 +333,9 @@ export function enqueueCapturedUpdate<State>(
 
             tag: update.tag,
             payload: update.payload,
-            callback: update.callback,
+            // When this update is rebased, we should not fire its
+            // callback again.
+            callback: null,
 
             next: null,
           };
@@ -355,7 +364,7 @@ export function enqueueCapturedUpdate<State>(
         firstBaseUpdate: newFirst,
         lastBaseUpdate: newLast,
         shared: currentQueue.shared,
-        effects: currentQueue.effects,
+        callbacks: currentQueue.callbacks,
       };
       workInProgress.updateQueue = queue;
       return;
@@ -577,7 +586,10 @@ export function processUpdateQueue<State>(
 
             tag: update.tag,
             payload: update.payload,
-            callback: update.callback,
+
+            // When this update is rebased, we should not fire its
+            // callback again.
+            callback: null,
 
             next: null,
           };
@@ -594,18 +606,16 @@ export function processUpdateQueue<State>(
           instance,
         );
         const callback = update.callback;
-        if (
-          callback !== null &&
-          // If the update was already committed, we should not queue its
-          // callback again.
-          update.lane !== NoLane
-        ) {
+        if (callback !== null) {
           workInProgress.flags |= Callback;
-          const effects = queue.effects;
-          if (effects === null) {
-            queue.effects = [update];
+          if (isHiddenUpdate) {
+            workInProgress.flags |= Visibility;
+          }
+          const callbacks = queue.callbacks;
+          if (callbacks === null) {
+            queue.callbacks = [callback];
           } else {
-            effects.push(update);
+            callbacks.push(callback);
           }
         }
       }
@@ -679,22 +689,51 @@ export function checkHasForceUpdateAfterProcessing(): boolean {
   return hasForceUpdate;
 }
 
-export function commitUpdateQueue<State>(
-  finishedWork: Fiber,
-  finishedQueue: UpdateQueue<State>,
-  instance: any,
+export function deferHiddenCallbacks<State>(
+  updateQueue: UpdateQueue<State>,
 ): void {
-  // Commit the effects
-  const effects = finishedQueue.effects;
-  finishedQueue.effects = null;
-  if (effects !== null) {
-    for (let i = 0; i < effects.length; i++) {
-      const effect = effects[i];
-      const callback = effect.callback;
-      if (callback !== null) {
-        effect.callback = null;
-        callCallback(callback, instance);
-      }
+  // 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/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index e5cfebea5f88..5c46585431b9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -75,6 +75,7 @@ import {
   ChildDeletion,
   Snapshot,
   Update,
+  Callback,
   Ref,
   Hydrating,
   Passive,
@@ -100,7 +101,11 @@ import {
   startPassiveEffectTimer,
 } from './ReactProfilerTimer.new';
 import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
-import {commitUpdateQueue} from './ReactFiberClassUpdateQueue.new';
+import {
+  deferHiddenCallbacks,
+  commitHiddenCallbacks,
+  commitCallbacks,
+} from './ReactFiberClassUpdateQueue.new';
 import {
   getPublicInstance,
   supportsMutation,
@@ -854,7 +859,7 @@ function commitLayoutEffectOnFiber(
         const updateQueue: UpdateQueue<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (updateQueue !== null) {
+        if (finishedWork.flags & Callback && updateQueue !== null) {
           if (__DEV__) {
             if (
               finishedWork.type === finishedWork.elementType &&
@@ -885,7 +890,7 @@ function commitLayoutEffectOnFiber(
           // 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.
-          commitUpdateQueue(finishedWork, updateQueue, instance);
+          commitCallbacks(updateQueue, instance);
         }
         break;
       }
@@ -895,7 +900,7 @@ function commitLayoutEffectOnFiber(
         const updateQueue: UpdateQueue<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (updateQueue !== null) {
+        if (finishedWork.flags & Callback && updateQueue !== null) {
           let instance = null;
           if (finishedWork.child !== null) {
             switch (finishedWork.child.tag) {
@@ -907,7 +912,7 @@ function commitLayoutEffectOnFiber(
                 break;
             }
           }
-          commitUpdateQueue(finishedWork, updateQueue, instance);
+          commitCallbacks(updateQueue, instance);
         }
         break;
       }
@@ -1059,6 +1064,10 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
         safelyCallComponentDidMount(node, node.return, instance);
       }
       safelyAttachRef(node, node.return);
+      const updateQueue: UpdateQueue<*> | null = (node.updateQueue: any);
+      if (updateQueue !== null) {
+        commitHiddenCallbacks(updateQueue, instance);
+      }
       break;
     }
     case HostComponent: {
@@ -2155,6 +2164,15 @@ function commitMutationEffectsOnFiber(
           safelyDetachRef(current, current.return);
         }
       }
+
+      if (flags & Callback && offscreenSubtreeIsHidden) {
+        const updateQueue: UpdateQueue<
+          *,
+        > | null = (finishedWork.updateQueue: any);
+        if (updateQueue !== null) {
+          deferHiddenCallbacks(updateQueue);
+        }
+      }
       return;
     }
     case HostComponent: {
@@ -2341,16 +2359,21 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
+      const newState: OffscreenState | null = finishedWork.memoizedState;
+      const isHidden = newState !== null;
       const wasHidden = current !== null && current.memoizedState !== null;
 
       if (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;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden || isHidden;
         offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
         recursivelyTraverseMutationEffects(root, finishedWork, lanes);
         offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
       } else {
         recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       }
@@ -2359,8 +2382,6 @@ function commitMutationEffectsOnFiber(
 
       if (flags & Visibility) {
         const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
-        const newState: OffscreenState | null = finishedWork.memoizedState;
-        const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
         // Track the current state on the Offscreen instance so we can
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index eae4bc52e358..ab279b6b05e3 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -75,6 +75,7 @@ import {
   ChildDeletion,
   Snapshot,
   Update,
+  Callback,
   Ref,
   Hydrating,
   Passive,
@@ -100,7 +101,11 @@ import {
   startPassiveEffectTimer,
 } from './ReactProfilerTimer.old';
 import {ConcurrentMode, NoMode, ProfileMode} from './ReactTypeOfMode';
-import {commitUpdateQueue} from './ReactFiberClassUpdateQueue.old';
+import {
+  deferHiddenCallbacks,
+  commitHiddenCallbacks,
+  commitCallbacks,
+} from './ReactFiberClassUpdateQueue.old';
 import {
   getPublicInstance,
   supportsMutation,
@@ -854,7 +859,7 @@ function commitLayoutEffectOnFiber(
         const updateQueue: UpdateQueue<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (updateQueue !== null) {
+        if (finishedWork.flags & Callback && updateQueue !== null) {
           if (__DEV__) {
             if (
               finishedWork.type === finishedWork.elementType &&
@@ -885,7 +890,7 @@ function commitLayoutEffectOnFiber(
           // 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.
-          commitUpdateQueue(finishedWork, updateQueue, instance);
+          commitCallbacks(updateQueue, instance);
         }
         break;
       }
@@ -895,7 +900,7 @@ function commitLayoutEffectOnFiber(
         const updateQueue: UpdateQueue<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (updateQueue !== null) {
+        if (finishedWork.flags & Callback && updateQueue !== null) {
           let instance = null;
           if (finishedWork.child !== null) {
             switch (finishedWork.child.tag) {
@@ -907,7 +912,7 @@ function commitLayoutEffectOnFiber(
                 break;
             }
           }
-          commitUpdateQueue(finishedWork, updateQueue, instance);
+          commitCallbacks(updateQueue, instance);
         }
         break;
       }
@@ -1059,6 +1064,10 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
         safelyCallComponentDidMount(node, node.return, instance);
       }
       safelyAttachRef(node, node.return);
+      const updateQueue: UpdateQueue<*> | null = (node.updateQueue: any);
+      if (updateQueue !== null) {
+        commitHiddenCallbacks(updateQueue, instance);
+      }
       break;
     }
     case HostComponent: {
@@ -2130,6 +2139,15 @@ function commitMutationEffectsOnFiber(
           safelyDetachRef(current, current.return);
         }
       }
+
+      if (flags & Callback && offscreenSubtreeIsHidden) {
+        const updateQueue: UpdateQueue<
+          *,
+        > | null = (finishedWork.updateQueue: any);
+        if (updateQueue !== null) {
+          deferHiddenCallbacks(updateQueue);
+        }
+      }
       return;
     }
     case HostComponent: {
@@ -2312,16 +2330,21 @@ function commitMutationEffectsOnFiber(
       return;
     }
     case OffscreenComponent: {
+      const newState: OffscreenState | null = finishedWork.memoizedState;
+      const isHidden = newState !== null;
       const wasHidden = current !== null && current.memoizedState !== null;
 
       if (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;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden || isHidden;
         offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden || wasHidden;
         recursivelyTraverseMutationEffects(root, finishedWork, lanes);
         offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
       } else {
         recursivelyTraverseMutationEffects(root, finishedWork, lanes);
       }
@@ -2330,8 +2353,6 @@ function commitMutationEffectsOnFiber(
 
       if (flags & Visibility) {
         const offscreenInstance: OffscreenInstance = finishedWork.stateNode;
-        const newState: OffscreenState | null = finishedWork.memoizedState;
-        const isHidden = newState !== null;
         const offscreenBoundary: Fiber = finishedWork;
 
         // Track the current state on the Offscreen instance so we can
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 589e64764675..1df22cd76bfa 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -640,4 +640,60 @@ describe('ReactOffscreen', () => {
     });
     expect(root).toMatchRenderedOutput(null);
   });
+
+  // @gate enableOffscreen
+  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(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['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(async () => {
+      child.setState({text: 'B'}, () => {
+        Scheduler.unstable_yieldValue('B update finished');
+      });
+    });
+    expect(Scheduler).toHaveYielded(['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(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+      child.setState({text: 'C'}, () => {
+        Scheduler.unstable_yieldValue('C update finished');
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      'C',
+      'B update finished',
+      'C update finished',
+    ]);
+    expect(root).toMatchRenderedOutput(<span prop="C" />);
+  });
 });

From 30eb267abdb032bf78e6394bd9ad79102e1d3fb1 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Jul 2022 11:55:53 -0400
Subject: [PATCH 1464/1603] Land forked reconciler changes (#24878)

This applies forked changes from the "new" reconciler to the "old" one.

Includes:

- 67de5e3 [FORKED] Hidden trees should capture Suspense
- 6ab05ee [FORKED] Track nearest Suspense handler on stack
- 051ac55 [FORKED] Add HiddenContext to track if subtree is hidden
---
 .../src/ReactFiberBeginWork.old.js            | 359 +++++++++++-------
 .../src/ReactFiberCommitWork.old.js           | 105 +++--
 .../src/ReactFiberCompleteWork.old.js         |  87 +++--
 .../src/ReactFiberHiddenContext.old.js        |  71 +++-
 .../src/ReactFiberSuspenseComponent.old.js    |  32 --
 .../src/ReactFiberSuspenseContext.old.js      | 125 ++++--
 .../src/ReactFiberThrow.old.js                | 131 ++++---
 .../src/ReactFiberUnwindWork.old.js           |  36 +-
 .../src/ReactFiberWorkLoop.old.js             |  63 ++-
 .../__tests__/ReactOffscreenSuspense-test.js  |   8 -
 scripts/merge-fork/forked-revisions           |   3 -
 11 files changed, 634 insertions(+), 386 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index a4fccc0bbd73..f9a53f661007 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -38,7 +38,6 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import type {RootState} from './ReactFiberRoot.old';
 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 import {
-  enableSuspenseAvoidThisFallback,
   enableCPUSuspense,
   enableUseMutableSource,
 } from 'shared/ReactFeatureFlags';
@@ -168,14 +167,21 @@ import {shouldError, shouldSuspend} from './ReactFiberReconciler';
 import {pushHostContext, pushHostContainer} from './ReactFiberHostContext.old';
 import {
   suspenseStackCursor,
-  pushSuspenseContext,
-  InvisibleParentSuspenseContext,
+  pushSuspenseListContext,
   ForceSuspenseFallback,
-  hasSuspenseContext,
-  setDefaultShallowSuspenseContext,
-  addSubtreeSuspenseContext,
-  setShallowSuspenseContext,
+  hasSuspenseListContext,
+  setDefaultShallowSuspenseListContext,
+  setShallowSuspenseListContext,
+  pushPrimaryTreeSuspenseHandler,
+  pushFallbackTreeSuspenseHandler,
+  pushOffscreenSuspenseHandler,
+  reuseSuspenseHandlerOnStack,
+  popSuspenseHandler,
 } from './ReactFiberSuspenseContext.old';
+import {
+  pushHiddenContext,
+  reuseHiddenContextOnStack,
+} from './ReactFiberHiddenContext.old';
 import {findFirstSuspended} from './ReactFiberSuspenseComponent.old';
 import {
   pushProvider,
@@ -233,7 +239,6 @@ import {
   renderDidSuspendDelayIfPossible,
   markSkippedUpdateLanes,
   getWorkInProgressRoot,
-  pushRenderLanes,
 } from './ReactFiberWorkLoop.old';
 import {enqueueConcurrentRenderForLane} from './ReactFiberConcurrentUpdates.old';
 import {setWorkInProgressVersion} from './ReactMutableSource.old';
@@ -675,6 +680,52 @@ function updateOffscreenComponent(
     (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;
+
+      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 = NoLanes;
+        while (currentChild !== null) {
+          currentChildLanes = mergeLanes(
+            mergeLanes(currentChildLanes, currentChild.lanes),
+            currentChild.childLanes,
+          );
+          currentChild = currentChild.sibling;
+        }
+        const lanesWeJustAttempted = nextBaseLanes;
+        const remainingChildLanes = removeLanes(
+          currentChildLanes,
+          lanesWeJustAttempted,
+        );
+        workInProgress.childLanes = remainingChildLanes;
+      } else {
+        workInProgress.childLanes = NoLanes;
+        workInProgress.child = null;
+      }
+
+      return deferHiddenOffscreenComponent(
+        current,
+        workInProgress,
+        nextBaseLanes,
+        renderLanes,
+      );
+    }
+
     if ((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
@@ -690,57 +741,29 @@ function updateOffscreenComponent(
           pushTransition(workInProgress, null, null);
         }
       }
-      pushRenderLanes(workInProgress, renderLanes);
+      reuseHiddenContextOnStack(workInProgress);
+      pushOffscreenSuspenseHandler(workInProgress);
     } else if (!includesSomeLane(renderLanes, (OffscreenLane: Lane))) {
-      let spawnedCachePool: SpawnedCachePool | null = null;
       // We're hidden, and we're not rendering at Offscreen. We will bail out
       // and resume this tree later.
-      let nextBaseLanes;
-      if (prevState !== null) {
-        const prevBaseLanes = prevState.baseLanes;
-        nextBaseLanes = mergeLanes(prevBaseLanes, renderLanes);
-        if (enableCache) {
-          // Save the cache pool so we can resume later.
-          spawnedCachePool = getOffscreenDeferredCache();
-        }
-      } else {
-        nextBaseLanes = renderLanes;
-      }
 
-      // Schedule this fiber to re-render at offscreen priority. Then bailout.
+      // Schedule this fiber to re-render at Offscreen priority
       workInProgress.lanes = workInProgress.childLanes = laneToLanes(
         OffscreenLane,
       );
-      const nextState: OffscreenState = {
-        baseLanes: nextBaseLanes,
-        cachePool: spawnedCachePool,
-      };
-      workInProgress.memoizedState = nextState;
-      workInProgress.updateQueue = null;
-      if (enableCache) {
-        // 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.
-      pushRenderLanes(workInProgress, nextBaseLanes);
+      // Include the base lanes from the last render
+      const nextBaseLanes =
+        prevState !== null
+          ? mergeLanes(prevState.baseLanes, renderLanes)
+          : renderLanes;
 
-      if (enableLazyContextPropagation && 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,
-        );
-      }
-
-      return null;
+      return deferHiddenOffscreenComponent(
+        current,
+        workInProgress,
+        nextBaseLanes,
+        renderLanes,
+      );
     } else {
       // This is the second render. The surrounding visible content has already
       // committed. Now we resume rendering the hidden tree.
@@ -751,9 +774,6 @@ function updateOffscreenComponent(
         cachePool: null,
       };
       workInProgress.memoizedState = nextState;
-      // Push the lanes that were skipped when we bailed out.
-      const subtreeRenderLanes =
-        prevState !== null ? prevState.baseLanes : renderLanes;
       if (enableCache && 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
@@ -764,16 +784,18 @@ function updateOffscreenComponent(
         pushTransition(workInProgress, prevCachePool, null);
       }
 
-      pushRenderLanes(workInProgress, subtreeRenderLanes);
+      // 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.
-    let subtreeRenderLanes;
     if (prevState !== null) {
       // We're going from hidden -> visible.
-
-      subtreeRenderLanes = mergeLanes(prevState.baseLanes, renderLanes);
-
       let prevCachePool = null;
       if (enableCache) {
         // If the render that spawned this one accessed the cache pool, resume
@@ -794,13 +816,16 @@ function updateOffscreenComponent(
 
       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.
-      subtreeRenderLanes = renderLanes;
 
       if (enableCache) {
         // If the render that spawned this one accessed the cache pool, resume
@@ -810,14 +835,58 @@ function updateOffscreenComponent(
           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);
     }
-    pushRenderLanes(workInProgress, subtreeRenderLanes);
   }
 
   reconcileChildren(current, workInProgress, nextChildren, renderLanes);
   return workInProgress.child;
 }
 
+function deferHiddenOffscreenComponent(
+  current: Fiber | null,
+  workInProgress: Fiber,
+  nextBaseLanes: Lanes,
+  renderLanes: Lanes,
+) {
+  const nextState: OffscreenState = {
+    baseLanes: nextBaseLanes,
+    // Save the cache pool so we can resume later.
+    cachePool: enableCache ? getOffscreenDeferredCache() : null,
+  };
+  workInProgress.memoizedState = nextState;
+  if (enableCache) {
+    // 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 (enableLazyContextPropagation && 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,
+    );
+  }
+
+  return null;
+}
+
 // 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.
@@ -1981,7 +2050,6 @@ function updateSuspenseOffscreenState(
 
 // TODO: Probably should inline this back
 function shouldRemainOnFallback(
-  suspenseContext: SuspenseContext,
   current: null | Fiber,
   workInProgress: Fiber,
   renderLanes: Lanes,
@@ -2001,7 +2069,8 @@ function shouldRemainOnFallback(
   }
 
   // Not currently showing content. Consult the Suspense context.
-  return hasSuspenseContext(
+  const suspenseContext: SuspenseContext = suspenseStackCursor.current;
+  return hasSuspenseListContext(
     suspenseContext,
     (ForceSuspenseFallback: SuspenseContext),
   );
@@ -2022,50 +2091,18 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     }
   }
 
-  let suspenseContext: SuspenseContext = suspenseStackCursor.current;
-
   let showFallback = false;
   const didSuspend = (workInProgress.flags & DidCapture) !== NoFlags;
-
   if (
     didSuspend ||
-    shouldRemainOnFallback(
-      suspenseContext,
-      current,
-      workInProgress,
-      renderLanes,
-    )
+    shouldRemainOnFallback(current, workInProgress, renderLanes)
   ) {
     // Something in this boundary's subtree already suspended. Switch to
     // rendering the fallback children.
     showFallback = true;
     workInProgress.flags &= ~DidCapture;
-  } else {
-    // Attempting the main content
-    if (
-      current === null ||
-      (current.memoizedState: null | SuspenseState) !== null
-    ) {
-      // This is a new mount or this boundary is already showing a fallback state.
-      // Mark this subtree context as having at least one invisible parent that could
-      // handle the fallback state.
-      // Avoided boundaries are not considered since they cannot handle preferred fallback states.
-      if (
-        !enableSuspenseAvoidThisFallback ||
-        nextProps.unstable_avoidThisFallback !== true
-      ) {
-        suspenseContext = addSubtreeSuspenseContext(
-          suspenseContext,
-          InvisibleParentSuspenseContext,
-        );
-      }
-    }
   }
 
-  suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
-
-  pushSuspenseContext(workInProgress, suspenseContext);
-
   // 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.
@@ -2093,24 +2130,40 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
 
     // Special path for hydration
     // If we're currently hydrating, try to hydrate this boundary.
-    tryToClaimNextHydratableInstance(workInProgress);
-    // This could've been a dehydrated suspense component.
-    const suspenseState: null | SuspenseState = workInProgress.memoizedState;
-    if (suspenseState !== null) {
-      const dehydrated = suspenseState.dehydrated;
-      if (dehydrated !== null) {
-        return mountDehydratedSuspenseComponent(
-          workInProgress,
-          dehydrated,
-          renderLanes,
-        );
+    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);
+      }
+      tryToClaimNextHydratableInstance(workInProgress);
+      // This could've been a dehydrated suspense component.
+      const suspenseState: null | SuspenseState = workInProgress.memoizedState;
+      if (suspenseState !== null) {
+        const dehydrated = suspenseState.dehydrated;
+        if (dehydrated !== null) {
+          return mountDehydratedSuspenseComponent(
+            workInProgress,
+            dehydrated,
+            renderLanes,
+          );
+        }
       }
+      // If hydration didn't succeed, fall through to the normal Suspense path.
+      // To avoid a stack mismatch we need to pop the Suspense handler that we
+      // pushed above. This will become less awkward when move the hydration
+      // logic to its own fiber.
+      popSuspenseHandler(workInProgress);
     }
 
     const nextPrimaryChildren = nextProps.children;
     const nextFallbackChildren = nextProps.fallback;
 
     if (showFallback) {
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
       const fallbackFragment = mountSuspenseFallbackChildren(
         workInProgress,
         nextPrimaryChildren,
@@ -2125,14 +2178,19 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       if (enableTransitionTracing) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
-          // If there are no transitions, we don't need to keep track of tracing markers
           const parentMarkerInstances = getMarkerInstances();
-          const primaryChildUpdateQueue: OffscreenQueue = {
-            transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
-            wakeables: null,
-          };
-          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          const offscreenQueue: OffscreenQueue | null = (primaryChildFragment.updateQueue: any);
+          if (offscreenQueue === null) {
+            const newOffscreenQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+              markerInstances: parentMarkerInstances,
+              wakeables: null,
+            };
+            primaryChildFragment.updateQueue = newOffscreenQueue;
+          } else {
+            offscreenQueue.transitions = currentTransitions;
+            offscreenQueue.markerInstances = parentMarkerInstances;
+          }
         }
       }
 
@@ -2144,6 +2202,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       // 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);
       const fallbackFragment = mountSuspenseFallbackChildren(
         workInProgress,
         nextPrimaryChildren,
@@ -2156,6 +2215,8 @@ function updateSuspenseComponent(current, workInProgress, 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
@@ -2167,6 +2228,7 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       workInProgress.lanes = SomeRetryLane;
       return fallbackFragment;
     } else {
+      pushPrimaryTreeSuspenseHandler(workInProgress);
       return mountSuspensePrimaryChildren(
         workInProgress,
         nextPrimaryChildren,
@@ -2194,6 +2256,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
     }
 
     if (showFallback) {
+      pushFallbackTreeSuspenseHandler(workInProgress);
+
       const nextFallbackChildren = nextProps.fallback;
       const nextPrimaryChildren = nextProps.children;
       const fallbackChildFragment = updateSuspenseFallbackChildren(
@@ -2214,12 +2278,31 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
         const currentTransitions = getPendingTransitions();
         if (currentTransitions !== null) {
           const parentMarkerInstances = getMarkerInstances();
-          const primaryChildUpdateQueue: OffscreenQueue = {
-            transitions: currentTransitions,
-            markerInstances: parentMarkerInstances,
-            wakeables: null,
-          };
-          primaryChildFragment.updateQueue = primaryChildUpdateQueue;
+          const offscreenQueue: OffscreenQueue | null = (primaryChildFragment.updateQueue: any);
+          const currentOffscreenQueue: OffscreenQueue | null = (current.updateQueue: any);
+          if (offscreenQueue === null) {
+            const newOffscreenQueue: OffscreenQueue = {
+              transitions: currentTransitions,
+              markerInstances: parentMarkerInstances,
+              wakeables: 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,
+              wakeables:
+                currentOffscreenQueue !== null
+                  ? currentOffscreenQueue.wakeables
+                  : null,
+            };
+            primaryChildFragment.updateQueue = newOffscreenQueue;
+          } else {
+            offscreenQueue.transitions = currentTransitions;
+            offscreenQueue.markerInstances = parentMarkerInstances;
+          }
         }
       }
       primaryChildFragment.childLanes = getRemainingWorkInPrimaryTree(
@@ -2229,6 +2312,8 @@ function updateSuspenseComponent(current, workInProgress, renderLanes) {
       workInProgress.memoizedState = SUSPENDED_MARKER;
       return fallbackChildFragment;
     } else {
+      pushPrimaryTreeSuspenseHandler(workInProgress);
+
       const nextPrimaryChildren = nextProps.children;
       const primaryChildFragment = updateSuspensePrimaryChildren(
         current,
@@ -2599,6 +2684,7 @@ function updateDehydratedSuspenseComponent(
 ): 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.
@@ -2765,6 +2851,8 @@ function updateDehydratedSuspenseComponent(
 
     if (workInProgress.flags & ForceClientRender) {
       // Something errored during hydration. Try again without hydrating.
+      pushPrimaryTreeSuspenseHandler(workInProgress);
+
       workInProgress.flags &= ~ForceClientRender;
       const capturedValue = createCapturedValue(
         new Error(
@@ -2781,6 +2869,10 @@ function updateDehydratedSuspenseComponent(
     } 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.
@@ -2789,6 +2881,8 @@ function updateDehydratedSuspenseComponent(
     } 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;
       const fallbackChildFragment = mountSuspenseFallbackAfterRetryWithoutHydrating(
@@ -3084,12 +3178,12 @@ function updateSuspenseListComponent(
 
   let suspenseContext: SuspenseContext = suspenseStackCursor.current;
 
-  const shouldForceFallback = hasSuspenseContext(
+  const shouldForceFallback = hasSuspenseListContext(
     suspenseContext,
     (ForceSuspenseFallback: SuspenseContext),
   );
   if (shouldForceFallback) {
-    suspenseContext = setShallowSuspenseContext(
+    suspenseContext = setShallowSuspenseListContext(
       suspenseContext,
       ForceSuspenseFallback,
     );
@@ -3107,9 +3201,9 @@ function updateSuspenseListComponent(
         renderLanes,
       );
     }
-    suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
+    suspenseContext = setDefaultShallowSuspenseListContext(suspenseContext);
   }
-  pushSuspenseContext(workInProgress, suspenseContext);
+  pushSuspenseListContext(workInProgress, suspenseContext);
 
   if ((workInProgress.mode & ConcurrentMode) === NoMode) {
     // In legacy mode, SuspenseList doesn't work so we just
@@ -3577,10 +3671,9 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
       const state: SuspenseState | null = workInProgress.memoizedState;
       if (state !== null) {
         if (state.dehydrated !== null) {
-          pushSuspenseContext(
-            workInProgress,
-            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-          );
+          // 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.
@@ -3603,10 +3696,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
         } else {
           // The primary child fragment does not have pending work marked
           // on it
-          pushSuspenseContext(
-            workInProgress,
-            setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-          );
+          pushPrimaryTreeSuspenseHandler(workInProgress);
           // The primary children do not have pending work with sufficient
           // priority. Bailout.
           const child = bailoutOnAlreadyFinishedWork(
@@ -3626,10 +3716,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
           }
         }
       } else {
-        pushSuspenseContext(
-          workInProgress,
-          setDefaultShallowSuspenseContext(suspenseStackCursor.current),
-        );
+        pushPrimaryTreeSuspenseHandler(workInProgress);
       }
       break;
     }
@@ -3687,7 +3774,7 @@ function attemptEarlyBailoutIfNoScheduledUpdate(
         renderState.tail = null;
         renderState.lastEffect = null;
       }
-      pushSuspenseContext(workInProgress, suspenseStackCursor.current);
+      pushSuspenseListContext(workInProgress, suspenseStackCursor.current);
 
       if (hasChildWork) {
         break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index ab279b6b05e3..7415997335ea 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1962,40 +1962,65 @@ function commitSuspenseHydrationCallbacks(
   }
 }
 
-function attachSuspenseRetryListeners(finishedWork: Fiber) {
+function getRetryCache(finishedWork) {
+  // TODO: Unify the interface for the retry cache so we don't have to switch
+  // on the tag like this.
+  switch (finishedWork.tag) {
+    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 = 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: Set<Wakeable>,
+) {
   // 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 wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
-  if (wakeables !== null) {
-    finishedWork.updateQueue = null;
-    let retryCache = finishedWork.stateNode;
-    if (retryCache === null) {
-      retryCache = finishedWork.stateNode = new PossiblyWeakSet();
-    }
-    wakeables.forEach(wakeable => {
-      // Memoize using the boundary fiber to prevent redundant listeners.
-      const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
-      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 retryCache = getRetryCache(finishedWork);
+  wakeables.forEach(wakeable => {
+    // Memoize using the boundary fiber to prevent redundant listeners.
+    const retry = resolveRetryWakeable.bind(null, finishedWork, wakeable);
+    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.',
+            );
           }
         }
-
-        wakeable.then(retry, retry);
       }
-    });
-  }
+
+      wakeable.then(retry, retry);
+    }
+  });
 }
 
 // This function detects when a Suspense boundary goes from visible to hidden.
@@ -2325,7 +2350,11 @@ function commitMutationEffectsOnFiber(
         } catch (error) {
           captureCommitPhaseError(finishedWork, finishedWork.return, error);
         }
-        attachSuspenseRetryListeners(finishedWork);
+        const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
+        if (wakeables !== null) {
+          finishedWork.updateQueue = null;
+          attachSuspenseRetryListeners(finishedWork, wakeables);
+        }
       }
       return;
     }
@@ -2383,6 +2412,18 @@ function commitMutationEffectsOnFiber(
           hideOrUnhideAllChildren(offscreenBoundary, isHidden);
         }
       }
+
+      // TODO: Move to passive phase
+      if (flags & Update) {
+        const offscreenQueue: OffscreenQueue | null = (finishedWork.updateQueue: any);
+        if (offscreenQueue !== null) {
+          const wakeables = offscreenQueue.wakeables;
+          if (wakeables !== null) {
+            offscreenQueue.wakeables = null;
+            attachSuspenseRetryListeners(finishedWork, wakeables);
+          }
+        }
+      }
       return;
     }
     case SuspenseListComponent: {
@@ -2390,7 +2431,11 @@ function commitMutationEffectsOnFiber(
       commitReconciliationEffects(finishedWork);
 
       if (flags & Update) {
-        attachSuspenseRetryListeners(finishedWork);
+        const wakeables: Set<Wakeable> | null = (finishedWork.updateQueue: any);
+        if (wakeables !== null) {
+          finishedWork.updateQueue = null;
+          attachSuspenseRetryListeners(finishedWork, wakeables);
+        }
       }
       return;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 6dd8fb07ab09..d21f726693dc 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -27,7 +27,6 @@ import type {
   SuspenseState,
   SuspenseListRenderState,
 } from './ReactFiberSuspenseComponent.old';
-import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
 import type {OffscreenState} from './ReactFiberOffscreenComponent';
 import type {TracingMarkerInstance} from './ReactFiberTracingMarkerComponent.old';
 import type {Cache} from './ReactFiberCacheComponent.old';
@@ -110,14 +109,17 @@ import {
 } from './ReactFiberHostContext.old';
 import {
   suspenseStackCursor,
-  InvisibleParentSuspenseContext,
-  hasSuspenseContext,
-  popSuspenseContext,
-  pushSuspenseContext,
-  setShallowSuspenseContext,
+  popSuspenseListContext,
+  popSuspenseHandler,
+  pushSuspenseListContext,
+  setShallowSuspenseListContext,
   ForceSuspenseFallback,
-  setDefaultShallowSuspenseContext,
+  setDefaultShallowSuspenseListContext,
 } from './ReactFiberSuspenseContext.old';
+import {
+  popHiddenContext,
+  isCurrentTreeHidden,
+} from './ReactFiberHiddenContext.old';
 import {findFirstSuspended} from './ReactFiberSuspenseComponent.old';
 import {
   isContextProvider as isLegacyContextProvider,
@@ -147,9 +149,7 @@ import {
   renderDidSuspend,
   renderDidSuspendDelayIfPossible,
   renderHasNotSuspendedYet,
-  popRenderLanes,
   getRenderTargetTime,
-  subtreeRenderLanes,
   getWorkInProgressTransitions,
 } from './ReactFiberWorkLoop.old';
 import {
@@ -1086,7 +1086,7 @@ function completeWork(
       return null;
     }
     case SuspenseComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseHandler(workInProgress);
       const nextState: null | SuspenseState = workInProgress.memoizedState;
 
       // Special path for dehydrated boundaries. We may eventually move this
@@ -1195,25 +1195,23 @@ function completeWork(
             // If this render already had a ping or lower pri updates,
             // and this is the first time we know we're going to suspend we
             // should be able to immediately restart from within throwException.
-            const hasInvisibleChildContext =
-              current === null &&
-              (workInProgress.memoizedProps.unstable_avoidThisFallback !==
-                true ||
-                !enableSuspenseAvoidThisFallback);
-            if (
-              hasInvisibleChildContext ||
-              hasSuspenseContext(
-                suspenseStackCursor.current,
-                (InvisibleParentSuspenseContext: SuspenseContext),
-              )
-            ) {
-              // If this was in an invisible tree or a new render, then showing
-              // this boundary is ok.
-              renderDidSuspend();
-            } else {
-              // Otherwise, we're going to have to hide content so we should
-              // suspend for longer if possible.
+
+            // Check if this is a "bad" fallback state or a good one. A bad
+            // fallback state is one that we only show as a last resort; if this
+            // is a transition, we'll block it from displaying, and wait for
+            // more data to arrive.
+            const isBadFallback =
+              // It's bad to switch to a fallback if content is already visible
+              (current !== null && !prevDidTimeout && !isCurrentTreeHidden()) ||
+              // Experimental: Some fallbacks are always bad
+              (enableSuspenseAvoidThisFallback &&
+                workInProgress.memoizedProps.unstable_avoidThisFallback ===
+                  true);
+
+            if (isBadFallback) {
               renderDidSuspendDelayIfPossible();
+            } else {
+              renderDidSuspend();
             }
           }
         }
@@ -1275,7 +1273,7 @@ function completeWork(
       return null;
     }
     case SuspenseListComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseListContext(workInProgress);
 
       const renderState: null | SuspenseListRenderState =
         workInProgress.memoizedState;
@@ -1341,11 +1339,11 @@ function completeWork(
                 workInProgress.subtreeFlags = NoFlags;
                 resetChildFibers(workInProgress, renderLanes);
 
-                // Set up the Suspense Context to force suspense and immediately
-                // rerender the children.
-                pushSuspenseContext(
+                // Set up the Suspense List Context to force suspense and
+                // immediately rerender the children.
+                pushSuspenseListContext(
                   workInProgress,
-                  setShallowSuspenseContext(
+                  setShallowSuspenseListContext(
                     suspenseStackCursor.current,
                     ForceSuspenseFallback,
                   ),
@@ -1468,14 +1466,16 @@ function completeWork(
         // setting it the first time we go from not suspended to suspended.
         let suspenseContext = suspenseStackCursor.current;
         if (didSuspendAlready) {
-          suspenseContext = setShallowSuspenseContext(
+          suspenseContext = setShallowSuspenseListContext(
             suspenseContext,
             ForceSuspenseFallback,
           );
         } else {
-          suspenseContext = setDefaultShallowSuspenseContext(suspenseContext);
+          suspenseContext = setDefaultShallowSuspenseListContext(
+            suspenseContext,
+          );
         }
-        pushSuspenseContext(workInProgress, suspenseContext);
+        pushSuspenseListContext(workInProgress, suspenseContext);
         // Do a pass over the next row.
         // Don't bubble properties in this case.
         return next;
@@ -1508,7 +1508,8 @@ function completeWork(
     }
     case OffscreenComponent:
     case LegacyHiddenComponent: {
-      popRenderLanes(workInProgress);
+      popSuspenseHandler(workInProgress);
+      popHiddenContext(workInProgress);
       const nextState: OffscreenState | null = workInProgress.memoizedState;
       const nextIsHidden = nextState !== null;
 
@@ -1529,7 +1530,11 @@ function completeWork(
       } else {
         // Don't bubble properties for hidden children unless we're rendering
         // at offscreen priority.
-        if (includesSomeLane(subtreeRenderLanes, (OffscreenLane: Lane))) {
+        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
@@ -1544,6 +1549,12 @@ function completeWork(
         }
       }
 
+      if (workInProgress.updateQueue !== null) {
+        // Schedule an effect to attach Suspense retry listeners
+        // TODO: Move to passive phase
+        workInProgress.flags |= Update;
+      }
+
       if (enableCache) {
         let previousCache: Cache | null = null;
         if (
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
index 087fc9e69be5..c62fa3d12fa8 100644
--- a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
@@ -1 +1,70 @@
-// Intentionally blank. File only exists in new reconciler fork.
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Fiber} from './ReactInternalTypes';
+import type {StackCursor} from './ReactFiberStack.old';
+import type {Lanes} from './ReactFiberLane.old';
+
+import {createCursor, push, pop} from './ReactFiberStack.old';
+
+import {getRenderLanes, setRenderLanes} from './ReactFiberWorkLoop.old';
+import {NoLanes, mergeLanes} from './ReactFiberLane.old';
+
+// 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 prevRenderLanesStackCursor: StackCursor<Lanes> = createCursor(
+  NoLanes,
+);
+
+export function pushHiddenContext(fiber: Fiber, context: HiddenContext): void {
+  const prevRenderLanes = getRenderLanes();
+  push(prevRenderLanesStackCursor, prevRenderLanes, 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.
+  setRenderLanes(mergeLanes(prevRenderLanes, 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(prevRenderLanesStackCursor, getRenderLanes(), fiber);
+  push(
+    currentTreeHiddenStackCursor,
+    currentTreeHiddenStackCursor.current,
+    fiber,
+  );
+}
+
+export function popHiddenContext(fiber: Fiber): void {
+  // Restore the previous render lanes from the stack
+  setRenderLanes(prevRenderLanesStackCursor.current);
+
+  pop(currentTreeHiddenStackCursor, fiber);
+  pop(prevRenderLanesStackCursor, fiber);
+}
+
+export function isCurrentTreeHidden() {
+  return currentTreeHiddenStackCursor.current !== null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index 2089dc6cac56..cdcde4fd6700 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -13,7 +13,6 @@ import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {Lane} from './ReactFiberLane.old';
 import type {TreeContext} from './ReactFiberTreeContext.old';
 
-import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 import {SuspenseComponent, SuspenseListComponent} from './ReactWorkTags';
 import {NoFlags, DidCapture} from './ReactFiberFlags';
 import {
@@ -67,37 +66,6 @@ export type SuspenseListRenderState = {|
   tailMode: SuspenseListTailMode,
 |};
 
-export function shouldCaptureSuspense(
-  workInProgress: Fiber,
-  hasInvisibleParent: boolean,
-): boolean {
-  // If it was the primary children that just suspended, capture and render the
-  // fallback. Otherwise, don't capture and bubble to the next boundary.
-  const nextState: SuspenseState | null = workInProgress.memoizedState;
-  if (nextState !== null) {
-    if (nextState.dehydrated !== null) {
-      // A dehydrated boundary always captures.
-      return true;
-    }
-    return false;
-  }
-  const props = workInProgress.memoizedProps;
-  // Regular boundaries always capture.
-  if (
-    !enableSuspenseAvoidThisFallback ||
-    props.unstable_avoidThisFallback !== true
-  ) {
-    return true;
-  }
-  // If it's a boundary we should avoid, then we prefer to bubble up to the
-  // parent boundary if it is currently invisible.
-  if (hasInvisibleParent) {
-    return false;
-  }
-  // If the parent is not able to handle it, we must handle it.
-  return true;
-}
-
 export function findFirstSuspended(row: Fiber): null | Fiber {
   let node = row;
   while (node !== null) {
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseContext.old.js b/packages/react-reconciler/src/ReactFiberSuspenseContext.old.js
index 2bb3512fa301..4186467d6534 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseContext.old.js
@@ -9,33 +9,109 @@
 
 import type {Fiber} from './ReactInternalTypes';
 import type {StackCursor} from './ReactFiberStack.old';
+import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
 
+import {enableSuspenseAvoidThisFallback} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.old';
+import {isCurrentTreeHidden} from './ReactFiberHiddenContext.old';
+import {SuspenseComponent, 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,
+);
+
+function shouldAvoidedBoundaryCapture(
+  workInProgress: Fiber,
+  handlerOnStack: Fiber,
+  props: any,
+): boolean {
+  if (enableSuspenseAvoidThisFallback) {
+    // If the parent is already showing content, and we're not inside a hidden
+    // tree, then we should show the avoided fallback.
+    if (handlerOnStack.alternate !== null && !isCurrentTreeHidden()) {
+      return true;
+    }
+
+    // If the handler on the stack is also an avoided boundary, then we should
+    // favor this inner one.
+    if (
+      handlerOnStack.tag === SuspenseComponent &&
+      handlerOnStack.memoizedProps.unstable_avoidThisFallback === true
+    ) {
+      return true;
+    }
+
+    // If this avoided boundary is dehydrated, then it should capture.
+    const suspenseState: SuspenseState | null = workInProgress.memoizedState;
+    if (suspenseState !== null && suspenseState.dehydrated !== null) {
+      return true;
+    }
+  }
+
+  // If none of those cases apply, then we should avoid this fallback and show
+  // the outer one instead.
+  return false;
+}
+
+export function pushPrimaryTreeSuspenseHandler(handler: Fiber): void {
+  const props = handler.pendingProps;
+  const handlerOnStack = suspenseHandlerStackCursor.current;
+  if (
+    enableSuspenseAvoidThisFallback &&
+    props.unstable_avoidThisFallback === true &&
+    handlerOnStack !== null &&
+    !shouldAvoidedBoundaryCapture(handler, handlerOnStack, props)
+  ) {
+    // This boundary should not capture if something suspends. Reuse the
+    // existing handler on the stack.
+    push(suspenseHandlerStackCursor, handlerOnStack, handler);
+  } else {
+    // Push this handler onto the stack.
+    push(suspenseHandlerStackCursor, handler, 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 pushOffscreenSuspenseHandler(fiber: Fiber): void {
+  if (fiber.tag === OffscreenComponent) {
+    push(suspenseHandlerStackCursor, fiber, fiber);
+  } else {
+    // This is a LegacyHidden component.
+    reuseSuspenseHandlerOnStack(fiber);
+  }
+}
+
+export function reuseSuspenseHandlerOnStack(fiber: Fiber) {
+  push(suspenseHandlerStackCursor, getSuspenseHandler(), fiber);
+}
+
+export function getSuspenseHandler(): Fiber | null {
+  return suspenseHandlerStackCursor.current;
+}
+
+export function popSuspenseHandler(fiber: Fiber): void {
+  pop(suspenseHandlerStackCursor, 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;
 
-// The Suspense Context is split into two parts. The lower bits is
-// inherited deeply down the subtree. The upper bits only affect
-// this immediate suspense boundary and gets reset each new
-// boundary or suspense list.
 const SubtreeSuspenseContextMask: SuspenseContext = 0b01;
 
-// Subtree Flags:
-
-// InvisibleParentSuspenseContext indicates that one of our parent Suspense
-// boundaries is not currently showing visible main content.
-// Either because it is already showing a fallback or is not mounted at all.
-// We can use this to determine if it is desirable to trigger a fallback at
-// the parent. If not, then we might need to trigger undesirable boundaries
-// and/or suspend the commit to avoid hiding the parent content.
-export const InvisibleParentSuspenseContext: SubtreeSuspenseContext = 0b01;
-
-// Shallow Flags:
-
 // 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;
@@ -44,40 +120,33 @@ export const suspenseStackCursor: StackCursor<SuspenseContext> = createCursor(
   DefaultSuspenseContext,
 );
 
-export function hasSuspenseContext(
+export function hasSuspenseListContext(
   parentContext: SuspenseContext,
   flag: SuspenseContext,
 ): boolean {
   return (parentContext & flag) !== 0;
 }
 
-export function setDefaultShallowSuspenseContext(
+export function setDefaultShallowSuspenseListContext(
   parentContext: SuspenseContext,
 ): SuspenseContext {
   return parentContext & SubtreeSuspenseContextMask;
 }
 
-export function setShallowSuspenseContext(
+export function setShallowSuspenseListContext(
   parentContext: SuspenseContext,
   shallowContext: ShallowSuspenseContext,
 ): SuspenseContext {
   return (parentContext & SubtreeSuspenseContextMask) | shallowContext;
 }
 
-export function addSubtreeSuspenseContext(
-  parentContext: SuspenseContext,
-  subtreeContext: SubtreeSuspenseContext,
-): SuspenseContext {
-  return parentContext | subtreeContext;
-}
-
-export function pushSuspenseContext(
+export function pushSuspenseListContext(
   fiber: Fiber,
   newContext: SuspenseContext,
 ): void {
   push(suspenseStackCursor, newContext, fiber);
 }
 
-export function popSuspenseContext(fiber: Fiber): void {
+export function popSuspenseListContext(fiber: Fiber): void {
   pop(suspenseStackCursor, fiber);
 }
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index b6ddcec76d39..d34c32770e88 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -13,17 +13,18 @@ import type {Lane, Lanes} from './ReactFiberLane.old';
 import type {CapturedValue} from './ReactCapturedValue';
 import type {Update} from './ReactFiberClassUpdateQueue.old';
 import type {Wakeable} from 'shared/ReactTypes';
-import type {SuspenseContext} from './ReactFiberSuspenseContext.old';
+import type {OffscreenQueue} from './ReactFiberOffscreenComponent';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 import {
   ClassComponent,
   HostRoot,
-  SuspenseComponent,
   IncompleteClassComponent,
   FunctionComponent,
   ForwardRef,
   SimpleMemoComponent,
+  SuspenseComponent,
+  OffscreenComponent,
 } from './ReactWorkTags';
 import {
   DidCapture,
@@ -34,7 +35,6 @@ import {
   ForceUpdateForLegacySuspense,
   ForceClientRender,
 } from './ReactFiberFlags';
-import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   enableDebugTracing,
@@ -50,11 +50,7 @@ import {
   enqueueUpdate,
 } from './ReactFiberClassUpdateQueue.old';
 import {markFailedErrorBoundaryForHotReloading} from './ReactFiberHotReloading.old';
-import {
-  suspenseStackCursor,
-  InvisibleParentSuspenseContext,
-  hasSuspenseContext,
-} from './ReactFiberSuspenseContext.old';
+import {getSuspenseHandler} from './ReactFiberSuspenseContext.old';
 import {
   renderDidError,
   renderDidSuspendDelayIfPossible,
@@ -203,33 +199,6 @@ function attachPingListener(root: FiberRoot, wakeable: Wakeable, lanes: Lanes) {
   }
 }
 
-function attachRetryListener(
-  suspenseBoundary: Fiber,
-  root: FiberRoot,
-  wakeable: Wakeable,
-  lanes: Lanes,
-) {
-  // 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").
-  const wakeables: Set<Wakeable> | null = (suspenseBoundary.updateQueue: any);
-  if (wakeables === null) {
-    const updateQueue = (new Set(): any);
-    updateQueue.add(wakeable);
-    suspenseBoundary.updateQueue = updateQueue;
-  } else {
-    wakeables.add(wakeable);
-  }
-}
-
 function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   if (enableLazyContextPropagation) {
     const currentSourceFiber = sourceFiber.alternate;
@@ -269,26 +238,6 @@ function resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   }
 }
 
-function getNearestSuspenseBoundaryToCapture(returnFiber: Fiber) {
-  let node = returnFiber;
-  const hasInvisibleParentBoundary = hasSuspenseContext(
-    suspenseStackCursor.current,
-    (InvisibleParentSuspenseContext: SuspenseContext),
-  );
-  do {
-    if (
-      node.tag === SuspenseComponent &&
-      shouldCaptureSuspense(node, hasInvisibleParentBoundary)
-    ) {
-      return node;
-    }
-    // This boundary already captured during this render. Continue to the next
-    // boundary.
-    node = node.return;
-  } while (node !== null);
-  return null;
-}
-
 function markSuspenseBoundaryShouldCapture(
   suspenseBoundary: Fiber,
   returnFiber: Fiber,
@@ -444,22 +393,72 @@ function throwException(
     }
 
     // Schedule the nearest Suspense to re-render the timed out view.
-    const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
+    const suspenseBoundary = getSuspenseHandler();
     if (suspenseBoundary !== null) {
-      suspenseBoundary.flags &= ~ForceClientRender;
-      markSuspenseBoundaryShouldCapture(
-        suspenseBoundary,
-        returnFiber,
-        sourceFiber,
-        root,
-        rootRenderLanes,
-      );
+      switch (suspenseBoundary.tag) {
+        case SuspenseComponent: {
+          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").
+          const wakeables: Set<Wakeable> | null = (suspenseBoundary.updateQueue: any);
+          if (wakeables === null) {
+            suspenseBoundary.updateQueue = new Set([wakeable]);
+          } else {
+            wakeables.add(wakeable);
+          }
+          break;
+        }
+        case OffscreenComponent: {
+          if (suspenseBoundary.mode & ConcurrentMode) {
+            suspenseBoundary.flags |= ShouldCapture;
+            const offscreenQueue: OffscreenQueue | null = (suspenseBoundary.updateQueue: any);
+            if (offscreenQueue === null) {
+              const newOffscreenQueue: OffscreenQueue = {
+                transitions: null,
+                markerInstances: null,
+                wakeables: new Set([wakeable]),
+              };
+              suspenseBoundary.updateQueue = newOffscreenQueue;
+            } else {
+              const wakeables = offscreenQueue.wakeables;
+              if (wakeables === null) {
+                offscreenQueue.wakeables = new Set([wakeable]);
+              } else {
+                wakeables.add(wakeable);
+              }
+            }
+            break;
+          }
+        }
+        // eslint-disable-next-line no-fallthrough
+        default: {
+          throw new Error(
+            `Unexpected Suspense handler tag (${suspenseBoundary.tag}). This ` +
+              'is a bug in React.',
+          );
+        }
+      }
       // We only attach ping listeners in concurrent mode. Legacy Suspense always
       // commits fallbacks synchronously, so there are no pings.
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      attachRetryListener(suspenseBoundary, root, wakeable, rootRenderLanes);
       return;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
@@ -496,7 +495,7 @@ function throwException(
     // This is a regular error, not a Suspense wakeable.
     if (getIsHydrating() && sourceFiber.mode & ConcurrentMode) {
       markDidThrowWhileHydratingDEV();
-      const suspenseBoundary = getNearestSuspenseBoundaryToCapture(returnFiber);
+      const suspenseBoundary = 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
diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
index f56c8ce5d289..218d41919eb2 100644
--- a/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberUnwindWork.old.js
@@ -37,7 +37,11 @@ import {
 } from 'shared/ReactFeatureFlags';
 
 import {popHostContainer, popHostContext} from './ReactFiberHostContext.old';
-import {popSuspenseContext} from './ReactFiberSuspenseContext.old';
+import {
+  popSuspenseListContext,
+  popSuspenseHandler,
+} from './ReactFiberSuspenseContext.old';
+import {popHiddenContext} from './ReactFiberHiddenContext.old';
 import {resetHydrationState} from './ReactFiberHydrationContext.old';
 import {
   isContextProvider as isLegacyContextProvider,
@@ -45,7 +49,6 @@ import {
   popTopLevelContextObject as popTopLevelLegacyContextObject,
 } from './ReactFiberContext.old';
 import {popProvider} from './ReactFiberNewContext.old';
-import {popRenderLanes} from './ReactFiberWorkLoop.old';
 import {popCacheProvider} from './ReactFiberCacheComponent.old';
 import {transferActualDuration} from './ReactProfilerTimer.old';
 import {popTreeContext} from './ReactFiberTreeContext.old';
@@ -118,7 +121,7 @@ function unwindWork(
       return null;
     }
     case SuspenseComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseHandler(workInProgress);
       const suspenseState: null | SuspenseState = workInProgress.memoizedState;
       if (suspenseState !== null && suspenseState.dehydrated !== null) {
         if (workInProgress.alternate === null) {
@@ -146,7 +149,7 @@ function unwindWork(
       return null;
     }
     case SuspenseListComponent: {
-      popSuspenseContext(workInProgress);
+      popSuspenseListContext(workInProgress);
       // SuspenseList doesn't actually catch anything. It should've been
       // caught by a nested boundary. If not, it should bubble through.
       return null;
@@ -159,10 +162,24 @@ function unwindWork(
       popProvider(context, workInProgress);
       return null;
     case OffscreenComponent:
-    case LegacyHiddenComponent:
-      popRenderLanes(workInProgress);
+    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:
       if (enableCache) {
         const cache: Cache = workInProgress.memoizedState.cache;
@@ -224,10 +241,10 @@ function unwindInterruptedWork(
       popHostContainer(interruptedWork);
       break;
     case SuspenseComponent:
-      popSuspenseContext(interruptedWork);
+      popSuspenseHandler(interruptedWork);
       break;
     case SuspenseListComponent:
-      popSuspenseContext(interruptedWork);
+      popSuspenseListContext(interruptedWork);
       break;
     case ContextProvider:
       const context: ReactContext<any> = interruptedWork.type._context;
@@ -235,7 +252,8 @@ function unwindInterruptedWork(
       break;
     case OffscreenComponent:
     case LegacyHiddenComponent:
-      popRenderLanes(interruptedWork);
+      popSuspenseHandler(interruptedWork);
+      popHiddenContext(interruptedWork);
       popTransition(interruptedWork, current);
       break;
     case CacheComponent:
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 3d3a32d8c9d5..235d0523cbbf 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -11,7 +11,6 @@ import type {Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
-import type {StackCursor} from './ReactFiberStack.old';
 import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {EventPriority} from './ReactEventPriorities.old';
@@ -20,6 +19,7 @@ import type {
   MarkerTransition,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
+import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
 import {
   warnAboutDeprecatedLifecycles,
@@ -96,6 +96,7 @@ import {
   ClassComponent,
   SuspenseComponent,
   SuspenseListComponent,
+  OffscreenComponent,
   FunctionComponent,
   ForwardRef,
   MemoComponent,
@@ -191,11 +192,6 @@ import {
   createCapturedValueAtFiber,
   type CapturedValue,
 } from './ReactCapturedValue';
-import {
-  push as pushToStack,
-  pop as popFromStack,
-  createCursor,
-} from './ReactFiberStack.old';
 import {
   enqueueConcurrentRenderForLane,
   finishQueueingConcurrentUpdates,
@@ -284,26 +280,20 @@ let workInProgress: Fiber | null = null;
 // The lanes we're rendering
 let workInProgressRootRenderLanes: Lanes = NoLanes;
 
-// Stack that allows components to change the render lanes for its subtree
-// This is a superset of the lanes we started working on at the root. The only
-// case where it's different from `workInProgressRootRenderLanes` is when we
-// enter a subtree that is hidden and needs to be unhidden: Suspense and
-// Offscreen component.
+// 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 subtreeRenderLanes.
-export let subtreeRenderLanes: Lanes = NoLanes;
-const subtreeRenderLanesCursor: StackCursor<Lanes> = createCursor(NoLanes);
+// Most things in begin/complete phases should deal with renderLanes.
+export let renderLanes: Lanes = NoLanes;
 
 // Whether to root completed, errored, suspended, etc.
 let workInProgressRootExitStatus: RootExitStatus = RootInProgress;
 // A fatal error, if one is thrown
 let workInProgressRootFatalError: mixed = null;
-// "Included" lanes refer to lanes that were worked on during this render. It's
-// slightly different than `renderLanes` because `renderLanes` can change as you
-// enter and exit an Offscreen tree. This value is the combination of all render
-// lanes for the entire render phase.
-let workInProgressRootIncludedLanes: Lanes = NoLanes;
 // 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;
@@ -1454,18 +1444,16 @@ export function flushControlled(fn: () => mixed): void {
   }
 }
 
-export function pushRenderLanes(fiber: Fiber, lanes: Lanes) {
-  pushToStack(subtreeRenderLanesCursor, subtreeRenderLanes, fiber);
-  subtreeRenderLanes = mergeLanes(subtreeRenderLanes, lanes);
-  workInProgressRootIncludedLanes = mergeLanes(
-    workInProgressRootIncludedLanes,
-    lanes,
-  );
+// 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 setRenderLanes(subtreeRenderLanes: Lanes) {
+  renderLanes = subtreeRenderLanes;
 }
 
-export function popRenderLanes(fiber: Fiber) {
-  subtreeRenderLanes = subtreeRenderLanesCursor.current;
-  popFromStack(subtreeRenderLanesCursor, fiber);
+export function getRenderLanes(): Lanes {
+  return renderLanes;
 }
 
 function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
@@ -1496,7 +1484,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   workInProgressRoot = root;
   const rootWorkInProgress = createWorkInProgress(root.current, null);
   workInProgress = rootWorkInProgress;
-  workInProgressRootRenderLanes = subtreeRenderLanes = workInProgressRootIncludedLanes = lanes;
+  workInProgressRootRenderLanes = renderLanes = lanes;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
@@ -1863,10 +1851,10 @@ function performUnitOfWork(unitOfWork: Fiber): void {
   let next;
   if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
     startProfilerTimer(unitOfWork);
-    next = beginWork(current, unitOfWork, subtreeRenderLanes);
+    next = beginWork(current, unitOfWork, renderLanes);
     stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
   } else {
-    next = beginWork(current, unitOfWork, subtreeRenderLanes);
+    next = beginWork(current, unitOfWork, renderLanes);
   }
 
   resetCurrentDebugFiberInDEV();
@@ -1900,10 +1888,10 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         !enableProfilerTimer ||
         (completedWork.mode & ProfileMode) === NoMode
       ) {
-        next = completeWork(current, completedWork, subtreeRenderLanes);
+        next = completeWork(current, completedWork, renderLanes);
       } else {
         startProfilerTimer(completedWork);
-        next = completeWork(current, completedWork, subtreeRenderLanes);
+        next = completeWork(current, completedWork, renderLanes);
         // Update render duration assuming we didn't error.
         stopProfilerTimerIfRunningAndRecordDelta(completedWork, false);
       }
@@ -1918,7 +1906,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
       // 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, completedWork, subtreeRenderLanes);
+      const next = unwindWork(current, completedWork, renderLanes);
 
       // Because this fiber did not complete, don't reset its lanes.
 
@@ -2761,6 +2749,11 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) {
     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. ' +
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
index d2b6dbce65be..290dd33b89a0 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
@@ -90,8 +90,6 @@ describe('ReactOffscreen', () => {
     return text;
   }
 
-  // Only works in new reconciler
-  // @gate variant
   // @gate enableOffscreen
   test('basic example of suspending inside hidden tree', async () => {
     const root = ReactNoop.createRoot();
@@ -172,8 +170,6 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // Only works in new reconciler
-  // @gate variant
   // @gate experimental || www
   test("suspending inside currently hidden tree that's switching to visible", async () => {
     const root = ReactNoop.createRoot();
@@ -233,8 +229,6 @@ describe('ReactOffscreen', () => {
     );
   });
 
-  // Only works in new reconciler
-  // @gate variant
   // @gate enableOffscreen
   test("suspending inside currently visible tree that's switching to hidden", async () => {
     const root = ReactNoop.createRoot();
@@ -354,8 +348,6 @@ describe('ReactOffscreen', () => {
     });
   });
 
-  // Only works in new reconciler
-  // @gate variant
   // @gate experimental || www
   test('updates at multiple priorities that suspend inside hidden tree', async () => {
     let setText;
diff --git a/scripts/merge-fork/forked-revisions b/scripts/merge-fork/forked-revisions
index 64912a3ba95e..e69de29bb2d1 100644
--- a/scripts/merge-fork/forked-revisions
+++ b/scripts/merge-fork/forked-revisions
@@ -1,3 +0,0 @@
-67de5e3fb09eecfab91321246246095058a708a9 [FORKED] Hidden trees should capture Suspense
-6ab05ee2e9c5b1f4c8dc1f7ae8906bf613788ba7 [FORKED] Track nearest Suspense handler on stack
-051ac55cb75f426b81f8f75b143f34255476b9bc [FORKED] Add HiddenContext to track if subtree is hidden

From 80208e7696b8e391fe301ab312c73cd5f500bd4c Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 8 Jul 2022 12:13:29 -0400
Subject: [PATCH 1465/1603] [Transition Tracing] Add onTransitionProgress
 Callback (#24833)

This PR adds support for `onTransitionProgress` (`onTransitionProgress(transitionName: string, startTime: number, currentTime: number, pending: Array<{name: null | string}>)`)

We call this callback when:
    * When **a child suspense boundary of the transition commits in a fallback state**. Only the suspense boundaries that are triggered and commit in a fallback state when the transition first occurs (and all subsequent suspense boundaries in the initial suspense boundary's subtree) are considered a part of the transition
    * **A child suspense boundary of the transition resolves**

When we call `onTransitionProgress`, we call the function with a `pending` array. This array contains the names of the transition's suspense boundaries that are still in a fallback state
---
 .../src/ReactFiberCommitWork.new.js           |  61 ++--
 .../src/ReactFiberCommitWork.old.js           |  61 ++--
 .../src/ReactFiberOffscreenComponent.js       |   3 +-
 .../ReactFiberTracingMarkerComponent.new.js   |  19 +-
 .../ReactFiberTracingMarkerComponent.old.js   |  19 +-
 .../src/ReactFiberWorkLoop.new.js             |  29 ++
 .../src/ReactFiberWorkLoop.old.js             |  29 ++
 .../__tests__/ReactTransitionTracing-test.js  | 328 +++++++++++++++++-
 8 files changed, 498 insertions(+), 51 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 5c46585431b9..6f46abdcddcd 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -143,6 +143,7 @@ import {
   enqueuePendingPassiveProfilerEffect,
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
+  addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
@@ -1119,10 +1120,24 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // The suspense boundaries was just hidden. Add the boundary
       // to the pending boundary set if it's there
       if (pendingMarkers !== null) {
-        pendingMarkers.forEach(pendingBoundaries => {
-          pendingBoundaries.set(offscreenInstance, {
-            name,
-          });
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (
+            pendingBoundaries !== null &&
+            !pendingBoundaries.has(offscreenInstance)
+          ) {
+            pendingBoundaries.set(offscreenInstance, {
+              name,
+            });
+            if (markerInstance.transitions !== null) {
+              markerInstance.transitions.forEach(transition => {
+                addTransitionProgressCallbackToPendingTransition(
+                  transition,
+                  pendingBoundaries,
+                );
+              });
+            }
+          }
         });
       }
     } else if (wasHidden && !isHidden) {
@@ -1130,9 +1145,21 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // the boundary from the pending suspense boundaries set
       // if it's there
       if (pendingMarkers !== null) {
-        pendingMarkers.forEach(pendingBoundaries => {
-          if (pendingBoundaries.has(offscreenInstance)) {
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (
+            pendingBoundaries !== null &&
+            pendingBoundaries.has(offscreenInstance)
+          ) {
             pendingBoundaries.delete(offscreenInstance);
+            if (markerInstance.transitions !== null) {
+              markerInstance.transitions.forEach(transition => {
+                addTransitionProgressCallbackToPendingTransition(
+                  transition,
+                  pendingBoundaries,
+                );
+              });
+            }
           }
         });
       }
@@ -2888,17 +2915,13 @@ function commitPassiveMountOnFiber(
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        incompleteTransitions.forEach(
-          ({pendingSuspenseBoundaries}, transition) => {
-            if (
-              pendingSuspenseBoundaries === null ||
-              pendingSuspenseBoundaries.size === 0
-            ) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
-              incompleteTransitions.delete(transition);
-            }
-          },
-        );
+        incompleteTransitions.forEach((markerInstance, transition) => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+            addTransitionCompleteCallbackToPendingTransition(transition);
+            incompleteTransitions.delete(transition);
+          }
+        });
 
         clearTransitionsForLanes(finishedRoot, committedLanes);
       }
@@ -2975,9 +2998,7 @@ function commitPassiveMountOnFiber(
                         instance.pendingMarkers = new Set();
                       }
 
-                      instance.pendingMarkers.add(
-                        markerInstance.pendingSuspenseBoundaries,
-                      );
+                      instance.pendingMarkers.add(markerInstance);
                     }
                   });
                 }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 7415997335ea..bc7fc9ae36a6 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -143,6 +143,7 @@ import {
   enqueuePendingPassiveProfilerEffect,
   restorePendingUpdaters,
   addTransitionStartCallbackToPendingTransition,
+  addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
@@ -1119,10 +1120,24 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // The suspense boundaries was just hidden. Add the boundary
       // to the pending boundary set if it's there
       if (pendingMarkers !== null) {
-        pendingMarkers.forEach(pendingBoundaries => {
-          pendingBoundaries.set(offscreenInstance, {
-            name,
-          });
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (
+            pendingBoundaries !== null &&
+            !pendingBoundaries.has(offscreenInstance)
+          ) {
+            pendingBoundaries.set(offscreenInstance, {
+              name,
+            });
+            if (markerInstance.transitions !== null) {
+              markerInstance.transitions.forEach(transition => {
+                addTransitionProgressCallbackToPendingTransition(
+                  transition,
+                  pendingBoundaries,
+                );
+              });
+            }
+          }
         });
       }
     } else if (wasHidden && !isHidden) {
@@ -1130,9 +1145,21 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // the boundary from the pending suspense boundaries set
       // if it's there
       if (pendingMarkers !== null) {
-        pendingMarkers.forEach(pendingBoundaries => {
-          if (pendingBoundaries.has(offscreenInstance)) {
+        pendingMarkers.forEach(markerInstance => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (
+            pendingBoundaries !== null &&
+            pendingBoundaries.has(offscreenInstance)
+          ) {
             pendingBoundaries.delete(offscreenInstance);
+            if (markerInstance.transitions !== null) {
+              markerInstance.transitions.forEach(transition => {
+                addTransitionProgressCallbackToPendingTransition(
+                  transition,
+                  pendingBoundaries,
+                );
+              });
+            }
           }
         });
       }
@@ -2888,17 +2915,13 @@ function commitPassiveMountOnFiber(
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
 
-        incompleteTransitions.forEach(
-          ({pendingSuspenseBoundaries}, transition) => {
-            if (
-              pendingSuspenseBoundaries === null ||
-              pendingSuspenseBoundaries.size === 0
-            ) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
-              incompleteTransitions.delete(transition);
-            }
-          },
-        );
+        incompleteTransitions.forEach((markerInstance, transition) => {
+          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          if (pendingBoundaries === null || pendingBoundaries.size === 0) {
+            addTransitionCompleteCallbackToPendingTransition(transition);
+            incompleteTransitions.delete(transition);
+          }
+        });
 
         clearTransitionsForLanes(finishedRoot, committedLanes);
       }
@@ -2975,9 +2998,7 @@ function commitPassiveMountOnFiber(
                         instance.pendingMarkers = new Set();
                       }
 
-                      instance.pendingMarkers.add(
-                        markerInstance.pendingSuspenseBoundaries,
-                      );
+                      instance.pendingMarkers.add(markerInstance);
                     }
                   });
                 }
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 0c989dd53fe6..ca1a3938410f 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -12,7 +12,6 @@ import type {Lanes} from './ReactFiberLane.old';
 import type {SpawnedCachePool} from './ReactFiberCacheComponent.new';
 import type {
   Transition,
-  PendingSuspenseBoundaries,
   TracingMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
@@ -45,7 +44,7 @@ export type OffscreenQueue = {|
 
 export type OffscreenInstance = {|
   isHidden: boolean,
-  pendingMarkers: Set<PendingSuspenseBoundaries> | null,
+  pendingMarkers: Set<TracingMarkerInstance> | null,
   transitions: Set<Transition> | null,
   retryCache: WeakSet<Wakeable> | Set<Wakeable> | null,
 |};
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index e7522fd93fa4..8e1a60d38cab 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -24,6 +24,7 @@ export type MarkerTransition = {
 
 export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
+  transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
@@ -76,6 +77,19 @@ export function processTransitionCallbacks(
         });
       }
 
+      const transitionProgress = pendingTransitions.transitionProgress;
+      const onTransitionProgress = callbacks.onTransitionProgress;
+      if (onTransitionProgress != null && transitionProgress !== null) {
+        transitionProgress.forEach((pending, transition) => {
+          onTransitionProgress(
+            transition.name,
+            transition.startTime,
+            endTime,
+            Array.from(pending.values()),
+          );
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {
@@ -117,10 +131,11 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
     if (transitions !== null) {
       transitions.forEach(transition => {
         if (!root.incompleteTransitions.has(transition)) {
-          root.incompleteTransitions.set(transition, {
+          const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
             pendingSuspenseBoundaries: null,
-          });
+          };
+          root.incompleteTransitions.set(transition, markerInstance);
         }
       });
     }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 0aba8780968a..0a5693823eda 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -24,6 +24,7 @@ export type MarkerTransition = {
 
 export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
+  transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
@@ -76,6 +77,19 @@ export function processTransitionCallbacks(
         });
       }
 
+      const transitionProgress = pendingTransitions.transitionProgress;
+      const onTransitionProgress = callbacks.onTransitionProgress;
+      if (onTransitionProgress != null && transitionProgress !== null) {
+        transitionProgress.forEach((pending, transition) => {
+          onTransitionProgress(
+            transition.name,
+            transition.startTime,
+            endTime,
+            Array.from(pending.values()),
+          );
+        });
+      }
+
       const transitionComplete = pendingTransitions.transitionComplete;
       if (transitionComplete !== null) {
         transitionComplete.forEach(transition => {
@@ -117,10 +131,11 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
     if (transitions !== null) {
       transitions.forEach(transition => {
         if (!root.incompleteTransitions.has(transition)) {
-          root.incompleteTransitions.set(transition, {
+          const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
             pendingSuspenseBoundaries: null,
-          });
+          };
+          root.incompleteTransitions.set(transition, markerInstance);
         }
       });
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index f3c141d76cf5..11d41148abb8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -17,6 +17,7 @@ import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
   MarkerTransition,
+  PendingSuspenseBoundaries,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -339,6 +340,7 @@ export function addTransitionStartCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: [],
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: null,
       };
@@ -359,6 +361,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: [],
       };
@@ -372,6 +375,31 @@ export function addMarkerCompleteCallbackToPendingTransition(
   }
 }
 
+export function addTransitionProgressCallbackToPendingTransition(
+  transition: Transition,
+  boundaries: PendingSuspenseBoundaries,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: new Map(),
+        transitionComplete: null,
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionProgress === null) {
+      currentPendingTransitionCallbacks.transitionProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.transitionProgress.set(
+      transition,
+      boundaries,
+    );
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: Transition,
 ) {
@@ -379,6 +407,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: [],
         markerComplete: null,
       };
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 235d0523cbbf..539d7e2f7731 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -17,6 +17,7 @@ import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
   MarkerTransition,
+  PendingSuspenseBoundaries,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -339,6 +340,7 @@ export function addTransitionStartCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: [],
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: null,
       };
@@ -359,6 +361,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: null,
         markerComplete: [],
       };
@@ -372,6 +375,31 @@ export function addMarkerCompleteCallbackToPendingTransition(
   }
 }
 
+export function addTransitionProgressCallbackToPendingTransition(
+  transition: Transition,
+  boundaries: PendingSuspenseBoundaries,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: new Map(),
+        transitionComplete: null,
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.transitionProgress === null) {
+      currentPendingTransitionCallbacks.transitionProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.transitionProgress.set(
+      transition,
+      boundaries,
+    );
+  }
+}
+
 export function addTransitionCompleteCallbackToPendingTransition(
   transition: Transition,
 ) {
@@ -379,6 +407,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
     if (currentPendingTransitionCallbacks === null) {
       currentPendingTransitionCallbacks = {
         transitionStart: null,
+        transitionProgress: null,
         transitionComplete: [],
         markerComplete: null,
       };
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 1926f47fb64d..c590741094bb 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -168,6 +168,12 @@ describe('ReactInteractionTracing', () => {
           `onTransitionStart(${name}, ${startTime})`,
         );
       },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
       onTransitionComplete: (name, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
@@ -283,6 +289,12 @@ describe('ReactInteractionTracing', () => {
           `onTransitionStart(${name}, ${startTime})`,
         );
       },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
       onTransitionComplete: (name, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
@@ -301,7 +313,7 @@ describe('ReactInteractionTracing', () => {
           {navigate ? (
             <Suspense
               fallback={<Text text="Loading..." />}
-              name="suspense page">
+              unstable_name="suspense page">
               <AsyncText text="Page Two" />
             </Suspense>
           ) : (
@@ -330,6 +342,7 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Page Two]',
         'Loading...',
         'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 2000, [suspense page])',
       ]);
 
       ReactNoop.expire(1000);
@@ -338,6 +351,7 @@ describe('ReactInteractionTracing', () => {
 
       expect(Scheduler).toFlushAndYield([
         'Page Two',
+        'onTransitionProgress(page transition, 1000, 3000, [])',
         'onTransitionComplete(page transition, 1000, 3000)',
       ]);
     });
@@ -351,6 +365,12 @@ describe('ReactInteractionTracing', () => {
           `onTransitionStart(${name}, ${startTime})`,
         );
       },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
       onTransitionComplete: (name, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
@@ -377,13 +397,15 @@ describe('ReactInteractionTracing', () => {
           {navigate ? (
             <>
               {showText ? (
-                <Suspense fallback={<Text text="Show Text Loading..." />}>
+                <Suspense
+                  unstable_name="show text"
+                  fallback={<Text text="Show Text Loading..." />}>
                   <AsyncText text="Show Text" />
                 </Suspense>
               ) : null}
               <Suspense
                 fallback={<Text text="Loading..." />}
-                name="suspense page">
+                unstable_name="suspense page">
                 <AsyncText text="Page Two" />
               </Suspense>
             </>
@@ -410,6 +432,7 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Page Two]',
         'Loading...',
         'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 1000, [suspense page])',
       ]);
 
       await resolveText('Page Two');
@@ -417,6 +440,7 @@ describe('ReactInteractionTracing', () => {
       await advanceTimers(1000);
       expect(Scheduler).toFlushAndYield([
         'Page Two',
+        'onTransitionProgress(page transition, 1000, 2000, [])',
         'onTransitionComplete(page transition, 1000, 2000)',
       ]);
 
@@ -426,6 +450,7 @@ describe('ReactInteractionTracing', () => {
         'Show Text Loading...',
         'Page Two',
         'onTransitionStart(text transition, 2000)',
+        'onTransitionProgress(text transition, 2000, 2000, [show text])',
       ]);
 
       await resolveText('Show Text');
@@ -433,6 +458,7 @@ describe('ReactInteractionTracing', () => {
       await advanceTimers(1000);
       expect(Scheduler).toFlushAndYield([
         'Show Text',
+        'onTransitionProgress(text transition, 2000, 3000, [])',
         'onTransitionComplete(text transition, 2000, 3000)',
       ]);
     });
@@ -446,6 +472,12 @@ describe('ReactInteractionTracing', () => {
           `onTransitionStart(${name}, ${startTime})`,
         );
       },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
       onTransitionComplete: (name, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
@@ -470,13 +502,15 @@ describe('ReactInteractionTracing', () => {
           {navigate ? (
             <>
               {showText ? (
-                <Suspense fallback={<Text text="Show Text Loading..." />}>
+                <Suspense
+                  unstable_name="show text"
+                  fallback={<Text text="Show Text Loading..." />}>
                   <AsyncText text="Show Text" />
                 </Suspense>
               ) : null}
               <Suspense
                 fallback={<Text text="Loading..." />}
-                name="suspense page">
+                unstable_name="suspense page">
                 <AsyncText text="Page Two" />
               </Suspense>
             </>
@@ -505,6 +539,7 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Page Two]',
         'Loading...',
         'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 2000, [suspense page])',
       ]);
     });
 
@@ -517,6 +552,7 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Page Two]',
         'Loading...',
         'onTransitionStart(show text, 2000)',
+        'onTransitionProgress(show text, 2000, 2000, [show text])',
       ]);
     });
 
@@ -527,6 +563,7 @@ describe('ReactInteractionTracing', () => {
 
       expect(Scheduler).toFlushAndYield([
         'Page Two',
+        'onTransitionProgress(page transition, 1000, 3000, [])',
         'onTransitionComplete(page transition, 1000, 3000)',
       ]);
 
@@ -536,11 +573,292 @@ describe('ReactInteractionTracing', () => {
 
       expect(Scheduler).toFlushAndYield([
         '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    let navigateToPageTwo;
+    function App() {
+      const [navigate, setNavigate] = useState(false);
+      navigateToPageTwo = () => {
+        setNavigate(true);
+      };
+
+      return (
+        <div>
+          {navigate ? (
+            <>
+              <Suspense
+                fallback={<Text text="Loading..." />}
+                unstable_name="suspense page">
+                <AsyncText text="Page Two" />
+                <Suspense
+                  unstable_name="show text one"
+                  fallback={<Text text="Show Text One Loading..." />}>
+                  <AsyncText text="Show Text One" />
+                </Suspense>
+                <div>
+                  <Suspense
+                    unstable_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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text Two]',
+        'Show Text Two Loading...',
+        'Loading...',
+        'onTransitionStart(page transition, 1000)',
+        'onTransitionProgress(page transition, 1000, 2000, [suspense page])',
+      ]);
+
+      resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text Two]',
+        'Show Text Two Loading...',
+        'onTransitionProgress(page transition, 1000, 3000, [show text one, show text two])',
+      ]);
+
+      resolveText('Show Text One');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Show Text One',
+        'onTransitionProgress(page transition, 1000, 4000, [show text two])',
+      ]);
+
+      resolveText('Show Text Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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..." />}
+                unstable_name="suspense page">
+                <AsyncText text="Page Two" />
+                {/* showTextOne is entangled with navigate */}
+                {showTextOne ? (
+                  <Suspense
+                    unstable_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
+                    unstable_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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+    });
+
+    await act(async () => {
+      startTransition(() => setNavigate(), {name: 'navigate'});
+      startTransition(() => setShowTextOne(), {name: 'show text one'});
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        'Loading...',
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        '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);
+
+      expect(Scheduler).toFlushAndYield([
+        'Page Two',
+        'Suspend [Show Text One]',
+        'Show Text One Loading...',
+        'Suspend [Show Text]',
+        'Show Text Loading...',
+        'Suspend [Show Text Two]',
+        'Show Text Two Loading...',
+        '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);
+
+      expect(Scheduler).toFlushAndYield([
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        '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);
+
+      expect(Scheduler).toFlushAndYield([
+        '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 interactions for tracing markers complete', async () => {
     const transitionCallbacks = {

From dd2d6522754f52c70d02c51db25eb7cbd5d1c8eb Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Fri, 8 Jul 2022 12:31:44 -0400
Subject: [PATCH 1466/1603] [Transition Tracing] Tracing Marker Name Change in
 Update Warning (#24873)

We should only support Tracing Marker's name field during component mount. This PR adds a warning if the Tracing Marker's name changes during an update.
---
 .../src/ReactFiberBeginWork.new.js            |  9 +++
 .../src/ReactFiberBeginWork.old.js            |  9 +++
 .../src/ReactFiberCommitWork.new.js           | 16 ++--
 .../src/ReactFiberCommitWork.old.js           | 16 ++--
 .../__tests__/ReactTransitionTracing-test.js  | 80 +++++++++++++++++++
 5 files changed, 116 insertions(+), 14 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index c3bf502ac618..ab0705fa7a96 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -981,6 +981,15 @@ function updateTracingMarkerComponent(
       };
       workInProgress.stateNode = markerInstance;
     }
+  } else {
+    if (__DEV__) {
+      if (current.memoizedProps.name !== workInProgress.pendingProps.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;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index f9a53f661007..48a932df7803 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -981,6 +981,15 @@ function updateTracingMarkerComponent(
       };
       workInProgress.stateNode = markerInstance;
     }
+  } else {
+    if (__DEV__) {
+      if (current.memoizedProps.name !== workInProgress.pendingProps.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;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6f46abdcddcd..097628db06d1 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -3044,14 +3044,16 @@ function commitPassiveMountOnFiber(
           instance.pendingSuspenseBoundaries === null ||
           instance.pendingSuspenseBoundaries.size === 0
         ) {
-          instance.transitions.forEach(transition => {
-            addMarkerCompleteCallbackToPendingTransition({
-              transition,
-              name: finishedWork.memoizedProps.name,
+          if (instance.transitions !== null) {
+            instance.transitions.forEach(transition => {
+              addMarkerCompleteCallbackToPendingTransition({
+                transition,
+                name: finishedWork.memoizedProps.name,
+              });
             });
-          });
-          instance.transitions = null;
-          instance.pendingSuspenseBoundaries = null;
+            instance.transitions = null;
+            instance.pendingSuspenseBoundaries = null;
+          }
         }
       }
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index bc7fc9ae36a6..252200fd5fbf 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -3044,14 +3044,16 @@ function commitPassiveMountOnFiber(
           instance.pendingSuspenseBoundaries === null ||
           instance.pendingSuspenseBoundaries.size === 0
         ) {
-          instance.transitions.forEach(transition => {
-            addMarkerCompleteCallbackToPendingTransition({
-              transition,
-              name: finishedWork.memoizedProps.name,
+          if (instance.transitions !== null) {
+            instance.transitions.forEach(transition => {
+              addMarkerCompleteCallbackToPendingTransition({
+                transition,
+                name: finishedWork.memoizedProps.name,
+              });
             });
-          });
-          instance.transitions = null;
-          instance.pendingSuspenseBoundaries = null;
+            instance.transitions = null;
+            instance.pendingSuspenseBoundaries = null;
+          }
         }
       }
       break;
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index c590741094bb..29d9cc8f492a 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -1059,6 +1059,86 @@ describe('ReactInteractionTracing', () => {
     });
   });
 
+  // @gate enableTransitionTracing
+  it('warns when marker name changes', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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({transitionCallbacks});
+    await act(async () => {
+      startTransition(
+        () => root.render(<App markerName="one" markerKey="key" />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        '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);
+      expect(() => {
+        // onMarkerComplete shouldn't be called for transitions with
+        // new keys
+        expect(Scheduler).toFlushAndYield([
+          'two',
+          'onTransitionStart(transition two, 1000)',
+          'onTransitionComplete(transition two, 1000, 2000)',
+        ]);
+      }).toErrorDev(
+        'Changing the name of a tracing marker after mount is not supported.',
+      );
+      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
+      expect(Scheduler).toFlushAndYield([
+        'three',
+        'onTransitionStart(transition three, 2000)',
+        'onMarkerComplete(transition three, three, 2000, 3000)',
+        'onTransitionComplete(transition three, 2000, 3000)',
+      ]);
+    });
+  });
+
   // @gate enableTransitionTracing
   it.skip('marker interaction cancelled when name changes', async () => {
     const transitionCallbacks = {

From e225fa43ada4f4cf3d3ba4982cdd81bb093eaa46 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 11 Jul 2022 18:00:49 -0400
Subject: [PATCH 1467/1603] [Transition Tracing] Don't call transition
 callbacks if no transition name specified (#24887)

This PR checks to see if `transition.name` is defined before adding the transition so we avoid doing unnecessary work for transitions without a transition name
---
 .../src/ReactFiberWorkLoop.new.js             |  2 +-
 .../src/ReactFiberWorkLoop.old.js             |  2 +-
 .../__tests__/ReactTransitionTracing-test.js  | 81 +++++++++++++++++++
 3 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 11d41148abb8..67e84f263c08 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -641,7 +641,7 @@ export function scheduleUpdateOnFiber(
 
     if (enableTransitionTracing) {
       const transition = ReactCurrentBatchConfig.transition;
-      if (transition !== null) {
+      if (transition !== null && transition.name != null) {
         if (transition.startTime === -1) {
           transition.startTime = now();
         }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 539d7e2f7731..a3a9c88d842b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -641,7 +641,7 @@ export function scheduleUpdateOnFiber(
 
     if (enableTransitionTracing) {
       const transition = ReactCurrentBatchConfig.transition;
-      if (transition !== null) {
+      if (transition !== null && transition.name != null) {
         if (transition.startTime === -1) {
           transition.startTime = now();
         }
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 29d9cc8f492a..bd92a41d4832 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -160,6 +160,87 @@ describe('ReactInteractionTracing', () => {
     return Promise.resolve().then(() => {});
   }
 
+  // @gate enableTransitionTracing
+  it(' should not call callbacks when transition is not defined', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App navigate={false} />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      await act(async () => {
+        startTransition(() => root.render(<App navigate={true} />));
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        // Doesn't call transition or marker code
+        expect(Scheduler).toFlushAndYield(['Page Two']);
+
+        startTransition(() => root.render(<App navigate={false} />), {
+          name: 'transition',
+        });
+        expect(Scheduler).toFlushAndYield([
+          'Page One',
+          'onTransitionStart(transition, 2000)',
+          'onTransitionComplete(transition, 2000, 2000)',
+        ]);
+      });
+    });
+  });
+
   // @gate enableTransitionTracing
   it('should correctly trace basic interaction', async () => {
     const transitionCallbacks = {

From b8c96b136d9968fd593ea0ed44adfc2ac39b6b8d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Jul 2022 13:10:14 -0400
Subject: [PATCH 1468/1603] Move ref commit effects inside switch statement

Only certain fiber types can have refs attached to them, so this moves the
Ref effect logic out of the common path and into the corresponding branch
of the layout phase's switch statement.

The types of fibers this affects are host components and class components.
Function components are not affected because they can only have a ref via
useImperativeHandle, which has a different implementation. The experimental
Scope type attaches its refs in the mutation phase, not the layout phase.
---
 .../src/ReactFiberCommitWork.new.js           | 25 ++++++++-----------
 .../src/ReactFiberCommitWork.old.js           | 25 ++++++++-----------
 2 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 097628db06d1..eae4ff6bd408 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -893,6 +893,12 @@ function commitLayoutEffectOnFiber(
           // TODO: revisit this when we implement resuming.
           commitCallbacks(updateQueue, instance);
         }
+
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostRoot: {
@@ -930,6 +936,11 @@ function commitLayoutEffectOnFiber(
           commitMount(instance, type, props, finishedWork);
         }
 
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostText: {
@@ -1020,20 +1031,6 @@ function commitLayoutEffectOnFiber(
         );
     }
   }
-
-  if (!offscreenSubtreeWasHidden) {
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
-        commitAttachRef(finishedWork);
-      }
-    } else {
-      if (finishedWork.flags & Ref) {
-        commitAttachRef(finishedWork);
-      }
-    }
-  }
 }
 
 function reappearLayoutEffectsOnFiber(node: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 252200fd5fbf..5b3ae31df0b0 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -893,6 +893,12 @@ function commitLayoutEffectOnFiber(
           // TODO: revisit this when we implement resuming.
           commitCallbacks(updateQueue, instance);
         }
+
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostRoot: {
@@ -930,6 +936,11 @@ function commitLayoutEffectOnFiber(
           commitMount(instance, type, props, finishedWork);
         }
 
+        if (finishedWork.flags & Ref) {
+          if (!offscreenSubtreeWasHidden) {
+            commitAttachRef(finishedWork);
+          }
+        }
         break;
       }
       case HostText: {
@@ -1020,20 +1031,6 @@ function commitLayoutEffectOnFiber(
         );
     }
   }
-
-  if (!offscreenSubtreeWasHidden) {
-    if (enableScopeAPI) {
-      // TODO: This is a temporary solution that allowed us to transition away
-      // from React Flare on www.
-      if (finishedWork.flags & Ref && finishedWork.tag !== ScopeComponent) {
-        commitAttachRef(finishedWork);
-      }
-    } else {
-      if (finishedWork.flags & Ref) {
-        commitAttachRef(finishedWork);
-      }
-    }
-  }
 }
 
 function reappearLayoutEffectsOnFiber(node: Fiber) {

From 3df7e8f5dcc3e379d8ce738da2a87029467bcf1d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 8 Jul 2022 13:28:45 -0400
Subject: [PATCH 1469/1603] Move flag check into each switch case

The fiber tag is more specific than the effect flag, so we should always
refine the type of work first, to minimize redundant checks.
---
 .../src/ReactFiberCommitWork.new.js           | 293 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 293 +++++++++---------
 2 files changed, 302 insertions(+), 284 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index eae4ff6bd408..438fff61ff61 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -711,11 +711,12 @@ function commitLayoutEffectOnFiber(
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
-  if ((finishedWork.flags & LayoutMask) !== NoFlags) {
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
           // 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,
@@ -739,128 +740,128 @@ function commitLayoutEffectOnFiber(
             commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
           }
         }
-        break;
       }
-      case ClassComponent: {
-        const instance = finishedWork.stateNode;
-        if (finishedWork.flags & Update) {
-          if (!offscreenSubtreeWasHidden) {
-            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 === finishedWork.elementType &&
-                  !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',
-                    );
-                  }
-                }
-              }
+      break;
+    }
+    case ClassComponent: {
+      if (flags & Update) {
+        if (!offscreenSubtreeWasHidden) {
+          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 (
-                enableProfilerTimer &&
-                enableProfilerCommitHooks &&
-                finishedWork.mode & ProfileMode
+                finishedWork.type === finishedWork.elementType &&
+                !didWarnAboutReassigningProps
               ) {
-                try {
-                  startLayoutEffectTimer();
-                  instance.componentDidMount();
-                } finally {
-                  recordLayoutEffectDuration(finishedWork);
+                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',
+                  );
                 }
-              } else {
+              }
+            }
+            if (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
                 instance.componentDidMount();
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
               }
             } else {
-              const prevProps =
-                finishedWork.elementType === finishedWork.type
-                  ? current.memoizedProps
-                  : resolveDefaultProps(
-                      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 === finishedWork.elementType &&
-                  !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',
-                    );
-                  }
-                }
-              }
+              instance.componentDidMount();
+            }
+          } else {
+            const prevProps =
+              finishedWork.elementType === finishedWork.type
+                ? current.memoizedProps
+                : resolveDefaultProps(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 (
-                enableProfilerTimer &&
-                enableProfilerCommitHooks &&
-                finishedWork.mode & ProfileMode
+                finishedWork.type === finishedWork.elementType &&
+                !didWarnAboutReassigningProps
               ) {
-                try {
-                  startLayoutEffectTimer();
-                  instance.componentDidUpdate(
-                    prevProps,
-                    prevState,
-                    instance.__reactInternalSnapshotBeforeUpdate,
+                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',
                   );
-                } finally {
-                  recordLayoutEffectDuration(finishedWork);
                 }
-              } else {
+                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 (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
                 instance.componentDidUpdate(
                   prevProps,
                   prevState,
                   instance.__reactInternalSnapshotBeforeUpdate,
                 );
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
               }
+            } else {
+              instance.componentDidUpdate(
+                prevProps,
+                prevState,
+                instance.__reactInternalSnapshotBeforeUpdate,
+              );
             }
           }
         }
+      }
 
+      if (flags & Callback) {
         // 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<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (finishedWork.flags & Callback && updateQueue !== null) {
+        if (updateQueue !== null) {
+          const instance = finishedWork.stateNode;
           if (__DEV__) {
             if (
               finishedWork.type === finishedWork.elementType &&
@@ -893,21 +894,23 @@ function commitLayoutEffectOnFiber(
           // TODO: revisit this when we implement resuming.
           commitCallbacks(updateQueue, instance);
         }
+      }
 
-        if (finishedWork.flags & Ref) {
-          if (!offscreenSubtreeWasHidden) {
-            commitAttachRef(finishedWork);
-          }
+      if (flags & Ref) {
+        if (!offscreenSubtreeWasHidden) {
+          commitAttachRef(finishedWork);
         }
-        break;
       }
-      case HostRoot: {
+      break;
+    }
+    case HostRoot: {
+      if (flags & Callback) {
         // 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<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (finishedWork.flags & Callback && updateQueue !== null) {
+        if (updateQueue !== null) {
           let instance = null;
           if (finishedWork.child !== null) {
             switch (finishedWork.child.tag) {
@@ -921,9 +924,11 @@ function commitLayoutEffectOnFiber(
           }
           commitCallbacks(updateQueue, instance);
         }
-        break;
       }
-      case HostComponent: {
+      break;
+    }
+    case HostComponent: {
+      if (flags & Update) {
         const instance: Instance = finishedWork.stateNode;
 
         // Renderers may schedule work to be done after host components are mounted
@@ -935,24 +940,26 @@ function commitLayoutEffectOnFiber(
           const props = finishedWork.memoizedProps;
           commitMount(instance, type, props, finishedWork);
         }
+      }
 
-        if (finishedWork.flags & Ref) {
-          if (!offscreenSubtreeWasHidden) {
-            commitAttachRef(finishedWork);
-          }
+      if (flags & Ref) {
+        if (!offscreenSubtreeWasHidden) {
+          commitAttachRef(finishedWork);
         }
-        break;
-      }
-      case HostText: {
-        // We have no life-cycles associated with text.
-        break;
       }
-      case HostPortal: {
-        // We have no life-cycles associated with portals.
-        break;
-      }
-      case Profiler: {
-        if (enableProfilerTimer) {
+      break;
+    }
+    case HostText: {
+      // We have no life-cycles associated with text.
+      break;
+    }
+    case HostPortal: {
+      // We have no life-cycles associated with portals.
+      break;
+    }
+    case Profiler: {
+      if (enableProfilerTimer) {
+        if (flags & Update) {
           const {onCommit, onRender} = finishedWork.memoizedProps;
           const {effectDuration} = finishedWork.stateNode;
 
@@ -1009,27 +1016,29 @@ function commitLayoutEffectOnFiber(
             }
           }
         }
-        break;
       }
-      case SuspenseComponent: {
+      break;
+    }
+    case SuspenseComponent: {
+      if (flags & Update) {
         commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-        break;
       }
-      case SuspenseListComponent:
-      case IncompleteClassComponent:
-      case ScopeComponent:
-      case OffscreenComponent:
-      case LegacyHiddenComponent:
-      case TracingMarkerComponent: {
-        break;
-      }
-
-      default:
-        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.',
-        );
+      break;
+    }
+    case SuspenseListComponent:
+    case IncompleteClassComponent:
+    case ScopeComponent:
+    case OffscreenComponent:
+    case LegacyHiddenComponent:
+    case TracingMarkerComponent: {
+      break;
     }
+
+    default:
+      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.',
+      );
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 5b3ae31df0b0..b675bdc01c22 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -711,11 +711,12 @@ function commitLayoutEffectOnFiber(
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
-  if ((finishedWork.flags & LayoutMask) !== NoFlags) {
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
           // 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,
@@ -739,128 +740,128 @@ function commitLayoutEffectOnFiber(
             commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
           }
         }
-        break;
       }
-      case ClassComponent: {
-        const instance = finishedWork.stateNode;
-        if (finishedWork.flags & Update) {
-          if (!offscreenSubtreeWasHidden) {
-            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 === finishedWork.elementType &&
-                  !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',
-                    );
-                  }
-                }
-              }
+      break;
+    }
+    case ClassComponent: {
+      if (flags & Update) {
+        if (!offscreenSubtreeWasHidden) {
+          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 (
-                enableProfilerTimer &&
-                enableProfilerCommitHooks &&
-                finishedWork.mode & ProfileMode
+                finishedWork.type === finishedWork.elementType &&
+                !didWarnAboutReassigningProps
               ) {
-                try {
-                  startLayoutEffectTimer();
-                  instance.componentDidMount();
-                } finally {
-                  recordLayoutEffectDuration(finishedWork);
+                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',
+                  );
                 }
-              } else {
+              }
+            }
+            if (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
                 instance.componentDidMount();
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
               }
             } else {
-              const prevProps =
-                finishedWork.elementType === finishedWork.type
-                  ? current.memoizedProps
-                  : resolveDefaultProps(
-                      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 === finishedWork.elementType &&
-                  !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',
-                    );
-                  }
-                }
-              }
+              instance.componentDidMount();
+            }
+          } else {
+            const prevProps =
+              finishedWork.elementType === finishedWork.type
+                ? current.memoizedProps
+                : resolveDefaultProps(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 (
-                enableProfilerTimer &&
-                enableProfilerCommitHooks &&
-                finishedWork.mode & ProfileMode
+                finishedWork.type === finishedWork.elementType &&
+                !didWarnAboutReassigningProps
               ) {
-                try {
-                  startLayoutEffectTimer();
-                  instance.componentDidUpdate(
-                    prevProps,
-                    prevState,
-                    instance.__reactInternalSnapshotBeforeUpdate,
+                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',
                   );
-                } finally {
-                  recordLayoutEffectDuration(finishedWork);
                 }
-              } else {
+                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 (
+              enableProfilerTimer &&
+              enableProfilerCommitHooks &&
+              finishedWork.mode & ProfileMode
+            ) {
+              try {
+                startLayoutEffectTimer();
                 instance.componentDidUpdate(
                   prevProps,
                   prevState,
                   instance.__reactInternalSnapshotBeforeUpdate,
                 );
+              } finally {
+                recordLayoutEffectDuration(finishedWork);
               }
+            } else {
+              instance.componentDidUpdate(
+                prevProps,
+                prevState,
+                instance.__reactInternalSnapshotBeforeUpdate,
+              );
             }
           }
         }
+      }
 
+      if (flags & Callback) {
         // 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<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (finishedWork.flags & Callback && updateQueue !== null) {
+        if (updateQueue !== null) {
+          const instance = finishedWork.stateNode;
           if (__DEV__) {
             if (
               finishedWork.type === finishedWork.elementType &&
@@ -893,21 +894,23 @@ function commitLayoutEffectOnFiber(
           // TODO: revisit this when we implement resuming.
           commitCallbacks(updateQueue, instance);
         }
+      }
 
-        if (finishedWork.flags & Ref) {
-          if (!offscreenSubtreeWasHidden) {
-            commitAttachRef(finishedWork);
-          }
+      if (flags & Ref) {
+        if (!offscreenSubtreeWasHidden) {
+          commitAttachRef(finishedWork);
         }
-        break;
       }
-      case HostRoot: {
+      break;
+    }
+    case HostRoot: {
+      if (flags & Callback) {
         // 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<
           *,
         > | null = (finishedWork.updateQueue: any);
-        if (finishedWork.flags & Callback && updateQueue !== null) {
+        if (updateQueue !== null) {
           let instance = null;
           if (finishedWork.child !== null) {
             switch (finishedWork.child.tag) {
@@ -921,9 +924,11 @@ function commitLayoutEffectOnFiber(
           }
           commitCallbacks(updateQueue, instance);
         }
-        break;
       }
-      case HostComponent: {
+      break;
+    }
+    case HostComponent: {
+      if (flags & Update) {
         const instance: Instance = finishedWork.stateNode;
 
         // Renderers may schedule work to be done after host components are mounted
@@ -935,24 +940,26 @@ function commitLayoutEffectOnFiber(
           const props = finishedWork.memoizedProps;
           commitMount(instance, type, props, finishedWork);
         }
+      }
 
-        if (finishedWork.flags & Ref) {
-          if (!offscreenSubtreeWasHidden) {
-            commitAttachRef(finishedWork);
-          }
+      if (flags & Ref) {
+        if (!offscreenSubtreeWasHidden) {
+          commitAttachRef(finishedWork);
         }
-        break;
-      }
-      case HostText: {
-        // We have no life-cycles associated with text.
-        break;
       }
-      case HostPortal: {
-        // We have no life-cycles associated with portals.
-        break;
-      }
-      case Profiler: {
-        if (enableProfilerTimer) {
+      break;
+    }
+    case HostText: {
+      // We have no life-cycles associated with text.
+      break;
+    }
+    case HostPortal: {
+      // We have no life-cycles associated with portals.
+      break;
+    }
+    case Profiler: {
+      if (enableProfilerTimer) {
+        if (flags & Update) {
           const {onCommit, onRender} = finishedWork.memoizedProps;
           const {effectDuration} = finishedWork.stateNode;
 
@@ -1009,27 +1016,29 @@ function commitLayoutEffectOnFiber(
             }
           }
         }
-        break;
       }
-      case SuspenseComponent: {
+      break;
+    }
+    case SuspenseComponent: {
+      if (flags & Update) {
         commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-        break;
       }
-      case SuspenseListComponent:
-      case IncompleteClassComponent:
-      case ScopeComponent:
-      case OffscreenComponent:
-      case LegacyHiddenComponent:
-      case TracingMarkerComponent: {
-        break;
-      }
-
-      default:
-        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.',
-        );
+      break;
+    }
+    case SuspenseListComponent:
+    case IncompleteClassComponent:
+    case ScopeComponent:
+    case OffscreenComponent:
+    case LegacyHiddenComponent:
+    case TracingMarkerComponent: {
+      break;
     }
+
+    default:
+      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.',
+      );
   }
 }
 

From a1b1e391e1663a401b84642b2107390fe9451a38 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jul 2022 12:57:34 -0400
Subject: [PATCH 1470/1603] Wrap try-catch directly around each user function

(This is the same as f9e6aef, but for the layout phase rather than the
mutation phase.)

This moves the try-catch from around each fiber's layout phase to
direclty around each user function (effect function, callback, etc).

We already do this when unmounting because if one unmount function
errors, we still need to call all the others so they can clean up
their resources.

Previously we didn't bother to do this for anything but unmount,
because if a mount effect throws, we're going to delete that whole
tree anyway.

But now that we're switching from an iterative loop to a recursive one,
we don't want every call frame on the stack to have a try-catch, since
the error handling requires additional memory.

Wrapping every user function is a bit tedious, but it's better
for performance. Many of them already had try blocks around
them already.
---
 .../src/ReactFiberCommitWork.new.js           | 190 ++++++++++++------
 .../src/ReactFiberCommitWork.old.js           | 190 ++++++++++++------
 2 files changed, 248 insertions(+), 132 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 438fff61ff61..b4b9fb719529 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -733,11 +733,19 @@ function commitLayoutEffectOnFiber(
                 HookLayout | HookHasEffect,
                 finishedWork,
               );
-            } finally {
-              recordLayoutEffectDuration(finishedWork);
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
             }
+            recordLayoutEffectDuration(finishedWork);
           } else {
-            commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+            try {
+              commitHookEffectListMount(
+                HookLayout | HookHasEffect,
+                finishedWork,
+              );
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+            }
           }
         }
       }
@@ -786,11 +794,24 @@ function commitLayoutEffectOnFiber(
               try {
                 startLayoutEffectTimer();
                 instance.componentDidMount();
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
               }
+              recordLayoutEffectDuration(finishedWork);
             } else {
-              instance.componentDidMount();
+              try {
+                instance.componentDidMount();
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           } else {
             const prevProps =
@@ -840,15 +861,28 @@ function commitLayoutEffectOnFiber(
                   prevState,
                   instance.__reactInternalSnapshotBeforeUpdate,
                 );
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
               }
+              recordLayoutEffectDuration(finishedWork);
             } else {
-              instance.componentDidUpdate(
-                prevProps,
-                prevState,
-                instance.__reactInternalSnapshotBeforeUpdate,
-              );
+              try {
+                instance.componentDidUpdate(
+                  prevProps,
+                  prevState,
+                  instance.__reactInternalSnapshotBeforeUpdate,
+                );
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           }
         }
@@ -892,13 +926,21 @@ function commitLayoutEffectOnFiber(
           // 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.
-          commitCallbacks(updateQueue, instance);
+          try {
+            commitCallbacks(updateQueue, instance);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          commitAttachRef(finishedWork);
+          try {
+            commitAttachRef(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;
@@ -922,7 +964,11 @@ function commitLayoutEffectOnFiber(
                 break;
             }
           }
-          commitCallbacks(updateQueue, instance);
+          try {
+            commitCallbacks(updateQueue, instance);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;
@@ -938,13 +984,21 @@ function commitLayoutEffectOnFiber(
         if (current === null && finishedWork.flags & Update) {
           const type = finishedWork.type;
           const props = finishedWork.memoizedProps;
-          commitMount(instance, type, props, finishedWork);
+          try {
+            commitMount(instance, type, props, finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          commitAttachRef(finishedWork);
+          try {
+            commitAttachRef(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;
@@ -960,60 +1014,64 @@ function commitLayoutEffectOnFiber(
     case Profiler: {
       if (enableProfilerTimer) {
         if (flags & Update) {
-          const {onCommit, onRender} = finishedWork.memoizedProps;
-          const {effectDuration} = finishedWork.stateNode;
+          try {
+            const {onCommit, onRender} = finishedWork.memoizedProps;
+            const {effectDuration} = finishedWork.stateNode;
 
-          const commitTime = getCommitTime();
+            const commitTime = getCommitTime();
 
-          let phase = current === null ? 'mount' : 'update';
-          if (enableProfilerNestedUpdatePhase) {
-            if (isCurrentUpdateNested()) {
-              phase = 'nested-update';
+            let phase = current === null ? 'mount' : 'update';
+            if (enableProfilerNestedUpdatePhase) {
+              if (isCurrentUpdateNested()) {
+                phase = 'nested-update';
+              }
             }
-          }
 
-          if (typeof onRender === 'function') {
-            onRender(
-              finishedWork.memoizedProps.id,
-              phase,
-              finishedWork.actualDuration,
-              finishedWork.treeBaseDuration,
-              finishedWork.actualStartTime,
-              commitTime,
-            );
-          }
-
-          if (enableProfilerCommitHooks) {
-            if (typeof onCommit === 'function') {
-              onCommit(
+            if (typeof onRender === 'function') {
+              onRender(
                 finishedWork.memoizedProps.id,
                 phase,
-                effectDuration,
+                finishedWork.actualDuration,
+                finishedWork.treeBaseDuration,
+                finishedWork.actualStartTime,
                 commitTime,
               );
             }
 
-            // 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.
-            enqueuePendingPassiveProfilerEffect(finishedWork);
-
-            // 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.
-            let parentFiber = finishedWork.return;
-            outer: while (parentFiber !== null) {
-              switch (parentFiber.tag) {
-                case HostRoot:
-                  const root = parentFiber.stateNode;
-                  root.effectDuration += effectDuration;
-                  break outer;
-                case Profiler:
-                  const parentStateNode = parentFiber.stateNode;
-                  parentStateNode.effectDuration += effectDuration;
-                  break outer;
+            if (enableProfilerCommitHooks) {
+              if (typeof onCommit === 'function') {
+                onCommit(
+                  finishedWork.memoizedProps.id,
+                  phase,
+                  effectDuration,
+                  commitTime,
+                );
+              }
+
+              // 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.
+              enqueuePendingPassiveProfilerEffect(finishedWork);
+
+              // 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.
+              let parentFiber = finishedWork.return;
+              outer: while (parentFiber !== null) {
+                switch (parentFiber.tag) {
+                  case HostRoot:
+                    const root = parentFiber.stateNode;
+                    root.effectDuration += effectDuration;
+                    break outer;
+                  case Profiler:
+                    const parentStateNode = parentFiber.stateNode;
+                    parentStateNode.effectDuration += effectDuration;
+                    break outer;
+                }
+                parentFiber = parentFiber.return;
               }
-              parentFiber = parentFiber.return;
             }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       }
@@ -1021,7 +1079,11 @@ function commitLayoutEffectOnFiber(
     }
     case SuspenseComponent: {
       if (flags & Update) {
-        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+        try {
+          commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
       }
       break;
     }
@@ -2617,11 +2679,7 @@ function commitLayoutMountEffects_complete(
     if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
       setCurrentDebugFiberInDEV(fiber);
-      try {
-        commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
+      commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
       resetCurrentDebugFiberInDEV();
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index b675bdc01c22..40c8f263d65f 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -733,11 +733,19 @@ function commitLayoutEffectOnFiber(
                 HookLayout | HookHasEffect,
                 finishedWork,
               );
-            } finally {
-              recordLayoutEffectDuration(finishedWork);
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
             }
+            recordLayoutEffectDuration(finishedWork);
           } else {
-            commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+            try {
+              commitHookEffectListMount(
+                HookLayout | HookHasEffect,
+                finishedWork,
+              );
+            } catch (error) {
+              captureCommitPhaseError(finishedWork, finishedWork.return, error);
+            }
           }
         }
       }
@@ -786,11 +794,24 @@ function commitLayoutEffectOnFiber(
               try {
                 startLayoutEffectTimer();
                 instance.componentDidMount();
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
               }
+              recordLayoutEffectDuration(finishedWork);
             } else {
-              instance.componentDidMount();
+              try {
+                instance.componentDidMount();
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           } else {
             const prevProps =
@@ -840,15 +861,28 @@ function commitLayoutEffectOnFiber(
                   prevState,
                   instance.__reactInternalSnapshotBeforeUpdate,
                 );
-              } finally {
-                recordLayoutEffectDuration(finishedWork);
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
               }
+              recordLayoutEffectDuration(finishedWork);
             } else {
-              instance.componentDidUpdate(
-                prevProps,
-                prevState,
-                instance.__reactInternalSnapshotBeforeUpdate,
-              );
+              try {
+                instance.componentDidUpdate(
+                  prevProps,
+                  prevState,
+                  instance.__reactInternalSnapshotBeforeUpdate,
+                );
+              } catch (error) {
+                captureCommitPhaseError(
+                  finishedWork,
+                  finishedWork.return,
+                  error,
+                );
+              }
             }
           }
         }
@@ -892,13 +926,21 @@ function commitLayoutEffectOnFiber(
           // 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.
-          commitCallbacks(updateQueue, instance);
+          try {
+            commitCallbacks(updateQueue, instance);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          commitAttachRef(finishedWork);
+          try {
+            commitAttachRef(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;
@@ -922,7 +964,11 @@ function commitLayoutEffectOnFiber(
                 break;
             }
           }
-          commitCallbacks(updateQueue, instance);
+          try {
+            commitCallbacks(updateQueue, instance);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;
@@ -938,13 +984,21 @@ function commitLayoutEffectOnFiber(
         if (current === null && finishedWork.flags & Update) {
           const type = finishedWork.type;
           const props = finishedWork.memoizedProps;
-          commitMount(instance, type, props, finishedWork);
+          try {
+            commitMount(instance, type, props, finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          commitAttachRef(finishedWork);
+          try {
+            commitAttachRef(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;
@@ -960,60 +1014,64 @@ function commitLayoutEffectOnFiber(
     case Profiler: {
       if (enableProfilerTimer) {
         if (flags & Update) {
-          const {onCommit, onRender} = finishedWork.memoizedProps;
-          const {effectDuration} = finishedWork.stateNode;
+          try {
+            const {onCommit, onRender} = finishedWork.memoizedProps;
+            const {effectDuration} = finishedWork.stateNode;
 
-          const commitTime = getCommitTime();
+            const commitTime = getCommitTime();
 
-          let phase = current === null ? 'mount' : 'update';
-          if (enableProfilerNestedUpdatePhase) {
-            if (isCurrentUpdateNested()) {
-              phase = 'nested-update';
+            let phase = current === null ? 'mount' : 'update';
+            if (enableProfilerNestedUpdatePhase) {
+              if (isCurrentUpdateNested()) {
+                phase = 'nested-update';
+              }
             }
-          }
 
-          if (typeof onRender === 'function') {
-            onRender(
-              finishedWork.memoizedProps.id,
-              phase,
-              finishedWork.actualDuration,
-              finishedWork.treeBaseDuration,
-              finishedWork.actualStartTime,
-              commitTime,
-            );
-          }
-
-          if (enableProfilerCommitHooks) {
-            if (typeof onCommit === 'function') {
-              onCommit(
+            if (typeof onRender === 'function') {
+              onRender(
                 finishedWork.memoizedProps.id,
                 phase,
-                effectDuration,
+                finishedWork.actualDuration,
+                finishedWork.treeBaseDuration,
+                finishedWork.actualStartTime,
                 commitTime,
               );
             }
 
-            // 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.
-            enqueuePendingPassiveProfilerEffect(finishedWork);
-
-            // 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.
-            let parentFiber = finishedWork.return;
-            outer: while (parentFiber !== null) {
-              switch (parentFiber.tag) {
-                case HostRoot:
-                  const root = parentFiber.stateNode;
-                  root.effectDuration += effectDuration;
-                  break outer;
-                case Profiler:
-                  const parentStateNode = parentFiber.stateNode;
-                  parentStateNode.effectDuration += effectDuration;
-                  break outer;
+            if (enableProfilerCommitHooks) {
+              if (typeof onCommit === 'function') {
+                onCommit(
+                  finishedWork.memoizedProps.id,
+                  phase,
+                  effectDuration,
+                  commitTime,
+                );
+              }
+
+              // 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.
+              enqueuePendingPassiveProfilerEffect(finishedWork);
+
+              // 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.
+              let parentFiber = finishedWork.return;
+              outer: while (parentFiber !== null) {
+                switch (parentFiber.tag) {
+                  case HostRoot:
+                    const root = parentFiber.stateNode;
+                    root.effectDuration += effectDuration;
+                    break outer;
+                  case Profiler:
+                    const parentStateNode = parentFiber.stateNode;
+                    parentStateNode.effectDuration += effectDuration;
+                    break outer;
+                }
+                parentFiber = parentFiber.return;
               }
-              parentFiber = parentFiber.return;
             }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       }
@@ -1021,7 +1079,11 @@ function commitLayoutEffectOnFiber(
     }
     case SuspenseComponent: {
       if (flags & Update) {
-        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+        try {
+          commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
       }
       break;
     }
@@ -2617,11 +2679,7 @@ function commitLayoutMountEffects_complete(
     if ((fiber.flags & LayoutMask) !== NoFlags) {
       const current = fiber.alternate;
       setCurrentDebugFiberInDEV(fiber);
-      try {
-        commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
+      commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
       resetCurrentDebugFiberInDEV();
     }
 

From b641d0209717d1127296d26b53b8dc056d9e6952 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jul 2022 13:25:31 -0400
Subject: [PATCH 1471/1603] Use recursion to traverse during layout phase

This converts the layout phase to iterate over its effects
recursively instead of iteratively. This makes it easier to track
contextual information, like whether a fiber is inside a hidden tree.

We already made this change for the mutation phase. See 481dece for
more context.
---
 .../src/ReactFiberCommitWork.new.js           | 208 ++++++++----------
 .../src/ReactFiberCommitWork.old.js           | 208 ++++++++----------
 2 files changed, 186 insertions(+), 230 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index b4b9fb719529..2900de2d6548 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -716,6 +716,11 @@ function commitLayoutEffectOnFiber(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
           // At this point layout effects have already been destroyed (during mutation phase).
@@ -752,6 +757,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case ClassComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
           const instance = finishedWork.stateNode;
@@ -946,6 +956,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case HostRoot: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Callback) {
         // TODO: I think this is now always non-null by the time it reaches the
         // commit phase. Consider removing the type check.
@@ -974,6 +989,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case HostComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         const instance: Instance = finishedWork.stateNode;
 
@@ -1003,15 +1023,12 @@ function commitLayoutEffectOnFiber(
       }
       break;
     }
-    case HostText: {
-      // We have no life-cycles associated with text.
-      break;
-    }
-    case HostPortal: {
-      // We have no life-cycles associated with portals.
-      break;
-    }
     case Profiler: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (enableProfilerTimer) {
         if (flags & Update) {
           try {
@@ -1078,6 +1095,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case SuspenseComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         try {
           commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
@@ -1087,20 +1109,58 @@ function commitLayoutEffectOnFiber(
       }
       break;
     }
-    case SuspenseListComponent:
-    case IncompleteClassComponent:
-    case ScopeComponent:
-    case OffscreenComponent:
-    case LegacyHiddenComponent:
-    case TracingMarkerComponent: {
+    case OffscreenComponent: {
+      const isModernRoot = (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. Turn its layout
+            // effects back on.
+            // TODO: Convert this to use recursion
+            nextEffect = finishedWork;
+            reappearLayoutEffects_begin(finishedWork);
+          }
+
+          recursivelyTraverseLayoutEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+          );
+          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        }
+      } else {
+        recursivelyTraverseLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
+      }
       break;
     }
-
-    default:
-      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.',
+    default: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
       );
+      break;
+    }
   }
 }
 
@@ -2591,112 +2651,30 @@ export function commitLayoutEffects(
 ): void {
   inProgressLanes = committedLanes;
   inProgressRoot = root;
-  nextEffect = finishedWork;
 
-  commitLayoutEffects_begin(finishedWork, root, committedLanes);
+  const current = finishedWork.alternate;
+  commitLayoutEffectOnFiber(root, current, finishedWork, committedLanes);
 
   inProgressLanes = null;
   inProgressRoot = null;
 }
 
-function commitLayoutEffects_begin(
-  subtreeRoot: Fiber,
+function recursivelyTraverseLayoutEffects(
   root: FiberRoot,
-  committedLanes: Lanes,
-) {
-  // Suspense layout effects semantics don't change for legacy roots.
-  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
-
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
-
-    if (fiber.tag === OffscreenComponent && isModernRoot) {
-      // Keep track of the current Offscreen stack's state.
-      const isHidden = fiber.memoizedState !== null;
-      const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
-      if (newOffscreenSubtreeIsHidden) {
-        // The Offscreen tree is hidden. Skip over its layout effects.
-        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
-        continue;
-      } else {
-        // TODO (Offscreen) Also check: subtreeFlags & LayoutMask
-        const current = fiber.alternate;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const newOffscreenSubtreeWasHidden =
-          wasHidden || offscreenSubtreeWasHidden;
-        const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
-        const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-
-        // Traverse the Offscreen subtree with the current Offscreen as the root.
-        offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
-        offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-
-        if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
-          // This is the root of a reappearing boundary. Turn its layout effects
-          // back on.
-          nextEffect = fiber;
-          reappearLayoutEffects_begin(fiber);
-        }
-
-        let child = firstChild;
-        while (child !== null) {
-          nextEffect = child;
-          commitLayoutEffects_begin(
-            child, // New root; bubble back up to here and stop.
-            root,
-            committedLanes,
-          );
-          child = child.sibling;
-        }
-
-        // Restore Offscreen state and resume in our-progress traversal.
-        nextEffect = fiber;
-        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
-        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
-        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
-
-        continue;
-      }
-    }
-
-    if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
-    }
-  }
-}
-
-function commitLayoutMountEffects_complete(
-  subtreeRoot: Fiber,
-  root: FiberRoot,
-  committedLanes: Lanes,
+  parentFiber: Fiber,
+  lanes: Lanes,
 ) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if ((fiber.flags & LayoutMask) !== NoFlags) {
-      const current = fiber.alternate;
-      setCurrentDebugFiberInDEV(fiber);
-      commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
-      resetCurrentDebugFiberInDEV();
-    }
-
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
-    }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  if (parentFiber.subtreeFlags & LayoutMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      const current = child.alternate;
+      commitLayoutEffectOnFiber(root, current, child, lanes);
+      child = child.sibling;
     }
-
-    nextEffect = fiber.return;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function disappearLayoutEffects_begin(subtreeRoot: Fiber) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 40c8f263d65f..9c7235b56a2e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -716,6 +716,11 @@ function commitLayoutEffectOnFiber(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
           // At this point layout effects have already been destroyed (during mutation phase).
@@ -752,6 +757,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case ClassComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
           const instance = finishedWork.stateNode;
@@ -946,6 +956,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case HostRoot: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Callback) {
         // TODO: I think this is now always non-null by the time it reaches the
         // commit phase. Consider removing the type check.
@@ -974,6 +989,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case HostComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         const instance: Instance = finishedWork.stateNode;
 
@@ -1003,15 +1023,12 @@ function commitLayoutEffectOnFiber(
       }
       break;
     }
-    case HostText: {
-      // We have no life-cycles associated with text.
-      break;
-    }
-    case HostPortal: {
-      // We have no life-cycles associated with portals.
-      break;
-    }
     case Profiler: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (enableProfilerTimer) {
         if (flags & Update) {
           try {
@@ -1078,6 +1095,11 @@ function commitLayoutEffectOnFiber(
       break;
     }
     case SuspenseComponent: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+      );
       if (flags & Update) {
         try {
           commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
@@ -1087,20 +1109,58 @@ function commitLayoutEffectOnFiber(
       }
       break;
     }
-    case SuspenseListComponent:
-    case IncompleteClassComponent:
-    case ScopeComponent:
-    case OffscreenComponent:
-    case LegacyHiddenComponent:
-    case TracingMarkerComponent: {
+    case OffscreenComponent: {
+      const isModernRoot = (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. Turn its layout
+            // effects back on.
+            // TODO: Convert this to use recursion
+            nextEffect = finishedWork;
+            reappearLayoutEffects_begin(finishedWork);
+          }
+
+          recursivelyTraverseLayoutEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+          );
+          offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
+          offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
+        }
+      } else {
+        recursivelyTraverseLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+        );
+      }
       break;
     }
-
-    default:
-      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.',
+    default: {
+      recursivelyTraverseLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
       );
+      break;
+    }
   }
 }
 
@@ -2591,112 +2651,30 @@ export function commitLayoutEffects(
 ): void {
   inProgressLanes = committedLanes;
   inProgressRoot = root;
-  nextEffect = finishedWork;
 
-  commitLayoutEffects_begin(finishedWork, root, committedLanes);
+  const current = finishedWork.alternate;
+  commitLayoutEffectOnFiber(root, current, finishedWork, committedLanes);
 
   inProgressLanes = null;
   inProgressRoot = null;
 }
 
-function commitLayoutEffects_begin(
-  subtreeRoot: Fiber,
+function recursivelyTraverseLayoutEffects(
   root: FiberRoot,
-  committedLanes: Lanes,
-) {
-  // Suspense layout effects semantics don't change for legacy roots.
-  const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;
-
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
-
-    if (fiber.tag === OffscreenComponent && isModernRoot) {
-      // Keep track of the current Offscreen stack's state.
-      const isHidden = fiber.memoizedState !== null;
-      const newOffscreenSubtreeIsHidden = isHidden || offscreenSubtreeIsHidden;
-      if (newOffscreenSubtreeIsHidden) {
-        // The Offscreen tree is hidden. Skip over its layout effects.
-        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
-        continue;
-      } else {
-        // TODO (Offscreen) Also check: subtreeFlags & LayoutMask
-        const current = fiber.alternate;
-        const wasHidden = current !== null && current.memoizedState !== null;
-        const newOffscreenSubtreeWasHidden =
-          wasHidden || offscreenSubtreeWasHidden;
-        const prevOffscreenSubtreeIsHidden = offscreenSubtreeIsHidden;
-        const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
-
-        // Traverse the Offscreen subtree with the current Offscreen as the root.
-        offscreenSubtreeIsHidden = newOffscreenSubtreeIsHidden;
-        offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
-
-        if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
-          // This is the root of a reappearing boundary. Turn its layout effects
-          // back on.
-          nextEffect = fiber;
-          reappearLayoutEffects_begin(fiber);
-        }
-
-        let child = firstChild;
-        while (child !== null) {
-          nextEffect = child;
-          commitLayoutEffects_begin(
-            child, // New root; bubble back up to here and stop.
-            root,
-            committedLanes,
-          );
-          child = child.sibling;
-        }
-
-        // Restore Offscreen state and resume in our-progress traversal.
-        nextEffect = fiber;
-        offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
-        offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
-        commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
-
-        continue;
-      }
-    }
-
-    if ((fiber.subtreeFlags & LayoutMask) !== NoFlags && firstChild !== null) {
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      commitLayoutMountEffects_complete(subtreeRoot, root, committedLanes);
-    }
-  }
-}
-
-function commitLayoutMountEffects_complete(
-  subtreeRoot: Fiber,
-  root: FiberRoot,
-  committedLanes: Lanes,
+  parentFiber: Fiber,
+  lanes: Lanes,
 ) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if ((fiber.flags & LayoutMask) !== NoFlags) {
-      const current = fiber.alternate;
-      setCurrentDebugFiberInDEV(fiber);
-      commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
-      resetCurrentDebugFiberInDEV();
-    }
-
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
-    }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  if (parentFiber.subtreeFlags & LayoutMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      const current = child.alternate;
+      commitLayoutEffectOnFiber(root, current, child, lanes);
+      child = child.sibling;
     }
-
-    nextEffect = fiber.return;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function disappearLayoutEffects_begin(subtreeRoot: Fiber) {

From 5e8c1961c03269ca0ee741182f3c877e0766efb8 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 12 Jul 2022 14:59:54 -0400
Subject: [PATCH 1472/1603] [Transition Tracing] onMarkerProgress (#24861)

This PR adds support for `onMarkerProgress` (`onTransitionProgress(transitionName: string, markerName: string, startTime: number, currentTime: number, pending: Array<{name: null | string}>)`)

We call this callback when:
    * When **a child suspense boundary of the marker commits in a fallback state**. Only the suspense boundaries that are triggered and commit in a fallback state when the transition first occurs (and all subsequent suspense boundaries in the initial suspense boundary's subtree) are considered a part of the transition
    * **A child suspense boundary of the marker resolves**

When we call `onMarkerProgress`, we call the function with a `pending` array. This array contains the names of the transition's suspense boundaries that are still in a fallback state
---
 .../src/ReactFiberBeginWork.new.js            |   1 +
 .../src/ReactFiberBeginWork.old.js            |   1 +
 .../src/ReactFiberCommitWork.new.js           |  60 ++++---
 .../src/ReactFiberCommitWork.old.js           |  60 ++++---
 .../ReactFiberTracingMarkerComponent.new.js   |  24 +++
 .../ReactFiberTracingMarkerComponent.old.js   |  24 +++
 .../src/ReactFiberWorkLoop.new.js             |  31 ++++
 .../src/ReactFiberWorkLoop.old.js             |  31 ++++
 .../__tests__/ReactTransitionTracing-test.js  | 160 +++++++++++++++++-
 9 files changed, 344 insertions(+), 48 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index ab0705fa7a96..a13b9f7a811b 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -978,6 +978,7 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
         pendingSuspenseBoundaries: new Map(),
+        name: workInProgress.pendingProps.name,
       };
       workInProgress.stateNode = markerInstance;
     }
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 48a932df7803..b7b32a43adb7 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -978,6 +978,7 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
         pendingSuspenseBoundaries: new Map(),
+        name: workInProgress.pendingProps.name,
       };
       workInProgress.stateNode = markerInstance;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 2900de2d6548..c17a5b1ba63d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -145,6 +145,7 @@ import {
   addTransitionStartCallbackToPendingTransition,
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.new';
@@ -1250,6 +1251,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
@@ -1257,13 +1259,21 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             pendingBoundaries.set(offscreenInstance, {
               name,
             });
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -1275,18 +1285,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.delete(offscreenInstance);
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -3083,19 +3102,18 @@ function commitPassiveMountOnFiber(
         // and add a start transition callback for each of them
         const instance = finishedWork.stateNode;
         if (
-          instance.pendingSuspenseBoundaries === null ||
-          instance.pendingSuspenseBoundaries.size === 0
+          instance.transitions !== null &&
+          (instance.pendingSuspenseBoundaries === null ||
+            instance.pendingSuspenseBoundaries.size === 0)
         ) {
-          if (instance.transitions !== null) {
-            instance.transitions.forEach(transition => {
-              addMarkerCompleteCallbackToPendingTransition({
-                transition,
-                name: finishedWork.memoizedProps.name,
-              });
+          instance.transitions.forEach(transition => {
+            addMarkerCompleteCallbackToPendingTransition({
+              transition,
+              name: finishedWork.memoizedProps.name,
             });
-            instance.transitions = null;
-            instance.pendingSuspenseBoundaries = null;
-          }
+          });
+          instance.transitions = null;
+          instance.pendingSuspenseBoundaries = null;
         }
       }
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 9c7235b56a2e..d2efc3edf2cc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -145,6 +145,7 @@ import {
   addTransitionStartCallbackToPendingTransition,
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
+  addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
 } from './ReactFiberWorkLoop.old';
@@ -1250,6 +1251,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
@@ -1257,13 +1259,21 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             pendingBoundaries.set(offscreenInstance, {
               name,
             });
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -1275,18 +1285,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
           ) {
             pendingBoundaries.delete(offscreenInstance);
-            if (markerInstance.transitions !== null) {
-              markerInstance.transitions.forEach(transition => {
-                addTransitionProgressCallbackToPendingTransition(
-                  transition,
+            if (transitions !== null) {
+              if (markerInstance.name) {
+                addMarkerProgressCallbackToPendingTransition(
+                  markerInstance.name,
+                  transitions,
                   pendingBoundaries,
                 );
-              });
+              } else {
+                transitions.forEach(transition => {
+                  addTransitionProgressCallbackToPendingTransition(
+                    transition,
+                    pendingBoundaries,
+                  );
+                });
+              }
             }
           }
         });
@@ -3083,19 +3102,18 @@ function commitPassiveMountOnFiber(
         // and add a start transition callback for each of them
         const instance = finishedWork.stateNode;
         if (
-          instance.pendingSuspenseBoundaries === null ||
-          instance.pendingSuspenseBoundaries.size === 0
+          instance.transitions !== null &&
+          (instance.pendingSuspenseBoundaries === null ||
+            instance.pendingSuspenseBoundaries.size === 0)
         ) {
-          if (instance.transitions !== null) {
-            instance.transitions.forEach(transition => {
-              addMarkerCompleteCallbackToPendingTransition({
-                transition,
-                name: finishedWork.memoizedProps.name,
-              });
+          instance.transitions.forEach(transition => {
+            addMarkerCompleteCallbackToPendingTransition({
+              transition,
+              name: finishedWork.memoizedProps.name,
             });
-            instance.transitions = null;
-            instance.pendingSuspenseBoundaries = null;
-          }
+          });
+          instance.transitions = null;
+          instance.pendingSuspenseBoundaries = null;
         }
       }
       break;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 8e1a60d38cab..ceae6dec3364 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
+  markerProgress: Map<string, TracingMarkerInstance> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
 
@@ -43,6 +44,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
+  name?: string,
 |};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -63,6 +65,28 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerProgress = pendingTransitions.markerProgress;
+      const onMarkerProgress = callbacks.onMarkerProgress;
+      if (onMarkerProgress != null && markerProgress !== null) {
+        markerProgress.forEach((markerInstance, markerName) => {
+          if (markerInstance.transitions !== null) {
+            const pending =
+              markerInstance.pendingSuspenseBoundaries !== null
+                ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
+                : [];
+            markerInstance.transitions.forEach(transition => {
+              onMarkerProgress(
+                transition.name,
+                markerName,
+                transition.startTime,
+                endTime,
+                pending,
+              );
+            });
+          }
+        });
+      }
+
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
         markerComplete.forEach(marker => {
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 0a5693823eda..bf9268445a06 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -26,6 +26,7 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
   transitionComplete: Array<Transition> | null,
+  markerProgress: Map<string, TracingMarkerInstance> | null,
   markerComplete: Array<MarkerTransition> | null,
 };
 
@@ -43,6 +44,7 @@ export type BatchConfigTransition = {
 export type TracingMarkerInstance = {|
   pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
   transitions: Set<Transition> | null,
+  name?: string,
 |};
 
 export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
@@ -63,6 +65,28 @@ export function processTransitionCallbacks(
         });
       }
 
+      const markerProgress = pendingTransitions.markerProgress;
+      const onMarkerProgress = callbacks.onMarkerProgress;
+      if (onMarkerProgress != null && markerProgress !== null) {
+        markerProgress.forEach((markerInstance, markerName) => {
+          if (markerInstance.transitions !== null) {
+            const pending =
+              markerInstance.pendingSuspenseBoundaries !== null
+                ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
+                : [];
+            markerInstance.transitions.forEach(transition => {
+              onMarkerProgress(
+                transition.name,
+                markerName,
+                transition.startTime,
+                endTime,
+                pending,
+              );
+            });
+          }
+        });
+      }
+
       const markerComplete = pendingTransitions.markerComplete;
       if (markerComplete !== null) {
         markerComplete.forEach(marker => {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 67e84f263c08..92ffbd4e723f 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -342,6 +342,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionStart: [],
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -354,6 +355,33 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerProgressCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerProgress === null) {
+      currentPendingTransitionCallbacks.markerProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerProgress.set(markerName, {
+      pendingSuspenseBoundaries,
+      transitions,
+    });
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   transition: MarkerTransition,
 ) {
@@ -363,6 +391,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: [],
       };
     }
@@ -385,6 +414,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: new Map(),
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -409,6 +439,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: [],
+        markerProgress: null,
         markerComplete: null,
       };
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index a3a9c88d842b..c522a0697034 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -342,6 +342,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionStart: [],
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -354,6 +355,33 @@ export function addTransitionStartCallbackToPendingTransition(
   }
 }
 
+export function addMarkerProgressCallbackToPendingTransition(
+  markerName: string,
+  transitions: Set<Transition>,
+  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+) {
+  if (enableTransitionTracing) {
+    if (currentPendingTransitionCallbacks === null) {
+      currentPendingTransitionCallbacks = {
+        transitionStart: null,
+        transitionProgress: null,
+        transitionComplete: null,
+        markerProgress: new Map(),
+        markerComplete: null,
+      };
+    }
+
+    if (currentPendingTransitionCallbacks.markerProgress === null) {
+      currentPendingTransitionCallbacks.markerProgress = new Map();
+    }
+
+    currentPendingTransitionCallbacks.markerProgress.set(markerName, {
+      pendingSuspenseBoundaries,
+      transitions,
+    });
+  }
+}
+
 export function addMarkerCompleteCallbackToPendingTransition(
   transition: MarkerTransition,
 ) {
@@ -363,6 +391,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: [],
       };
     }
@@ -385,6 +414,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: new Map(),
         transitionComplete: null,
+        markerProgress: null,
         markerComplete: null,
       };
     }
@@ -409,6 +439,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionStart: null,
         transitionProgress: null,
         transitionComplete: [],
+        markerProgress: null,
         markerComplete: null,
       };
     }
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index bd92a41d4832..3c0011a9cb88 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -941,18 +941,114 @@ describe('ReactInteractionTracing', () => {
   });
 
   // @gate enableTransitionTracing
-  it('should correctly trace interactions for tracing markers complete', async () => {
+  it('should correctly trace basic interaction with tracing markers', async () => {
     const transitionCallbacks = {
       onTransitionStart: (name, startTime) => {
         Scheduler.unstable_yieldValue(
           `onTransitionStart(${name}, ${startTime})`,
         );
       },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
       onTransitionComplete: (name, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
         );
       },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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({transitionCallbacks});
+    await act(async () => {
+      root.render(<App />);
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      await act(async () => {
+        startTransition(() => navigateToPageTwo(), {name: 'page transition'});
+
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+
+        expect(Scheduler).toFlushAndYield([
+          '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
       onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
@@ -971,13 +1067,13 @@ describe('ReactInteractionTracing', () => {
           {navigate ? (
             <Suspense
               fallback={<Text text="Loading..." />}
-              name="suspense page">
+              unstable_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">
+                  unstable_name="marker suspense">
                   <AsyncText text="Marker Text" />
                 </Suspense>
               </React.unstable_TracingMarker>
@@ -1020,6 +1116,7 @@ describe('ReactInteractionTracing', () => {
         'Page Two',
         'Suspend [Marker Text]',
         'Loading...',
+        'onMarkerProgress(page transition, async marker, 1000, 3000, [marker suspense])',
         'onMarkerComplete(page transition, sync marker, 1000, 3000)',
       ]);
 
@@ -1029,6 +1126,7 @@ describe('ReactInteractionTracing', () => {
 
       expect(Scheduler).toFlushAndYield([
         'Marker Text',
+        'onMarkerProgress(page transition, async marker, 1000, 4000, [])',
         'onMarkerComplete(page transition, async marker, 1000, 4000)',
         'onTransitionComplete(page transition, 1000, 4000)',
       ]);
@@ -1048,6 +1146,18 @@ describe('ReactInteractionTracing', () => {
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
         );
       },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
       onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
@@ -1066,14 +1176,20 @@ describe('ReactInteractionTracing', () => {
         <div>
           {navigate ? (
             <React.unstable_TracingMarker name="outer marker">
-              <Suspense fallback={<Text text="Outer..." />}>
+              <Suspense
+                fallback={<Text text="Outer..." />}
+                unstable_name="outer">
                 <AsyncText text="Outer Text" />
-                <Suspense fallback={<Text text="Inner One..." />}>
+                <Suspense
+                  fallback={<Text text="Inner One..." />}
+                  unstable_name="inner one">
                   <React.unstable_TracingMarker name="marker one">
                     <AsyncText text="Inner Text One" />
                   </React.unstable_TracingMarker>
                 </Suspense>
-                <Suspense fallback={<Text text="Inner Two..." />}>
+                <Suspense
+                  fallback={<Text text="Inner Two..." />}
+                  unstable_name="inner two">
                   <React.unstable_TracingMarker name="marker two">
                     <AsyncText text="Inner Text Two" />
                   </React.unstable_TracingMarker>
@@ -1110,6 +1226,7 @@ describe('ReactInteractionTracing', () => {
         'Inner Two...',
         'Outer...',
         'onTransitionStart(page transition, 1000)',
+        'onMarkerProgress(page transition, outer marker, 1000, 2000, [outer])',
       ]);
 
       ReactNoop.expire(1000);
@@ -1125,6 +1242,7 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Inner Text One]',
         'Inner One...',
         'Inner Text Two',
+        'onMarkerProgress(page transition, outer marker, 1000, 4000, [inner one])',
         'onMarkerComplete(page transition, marker two, 1000, 4000)',
       ]);
 
@@ -1133,6 +1251,7 @@ describe('ReactInteractionTracing', () => {
       await resolveText('Inner Text One');
       expect(Scheduler).toFlushAndYield([
         '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)',
@@ -1233,6 +1352,18 @@ describe('ReactInteractionTracing', () => {
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
         );
       },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
       onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
@@ -1279,6 +1410,7 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Page Two]',
         'Loading...',
         'onTransitionStart(page transition, 1000)',
+        'onMarkerProgress(page transition, old marker, 1000, 1000, [<null>])',
       ]);
 
       ReactNoop.expire(1000);
@@ -1311,6 +1443,18 @@ describe('ReactInteractionTracing', () => {
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
         );
       },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
       onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
@@ -1357,6 +1501,7 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Page Two]',
         'Loading...',
         'onTransitionStart(page transition, 1000)',
+        'onMarkerProgress(page transition, old marker, 1000, 2000, [<null>])',
       ]);
 
       ReactNoop.expire(1000);
@@ -1367,6 +1512,9 @@ describe('ReactInteractionTracing', () => {
         'Suspend [Page Two]',
         'Loading...',
         'onTransitionStart(marker transition, 2000)',
+        'onMarkerProgress(marker transition, new marker, 2000, 3000, [])',
+        'onMarkerComplete(marker transition, new marker, 2000, 3000)',
+        'onTransitionComplete(marker transition, 2000, 3000)',
       ]);
       ReactNoop.expire(1000);
       await advanceTimers(1000);

From fa20b319fcfad50d7b981ec57f111b4e24d6f559 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 12 Jul 2022 15:48:04 -0400
Subject: [PATCH 1473/1603] [Transition Tracing] Code Cleanup (#24880)

This PR cleans up some of the transition tracing code by:
* Looping through marker transitions only when we process the markerComplete callback (rather than in the commit phase) so we block for less time during commit.
* Renaming `PendingSuspenseBoundaries` to `pendingBoundaries`
* Cleaning up the callback functions
---
 .../react-reconciler/src/ReactFiber.new.js    |  2 +-
 .../react-reconciler/src/ReactFiber.old.js    |  2 +-
 .../src/ReactFiberBeginWork.new.js            |  2 +-
 .../src/ReactFiberBeginWork.old.js            |  2 +-
 .../src/ReactFiberCommitWork.new.js           | 28 ++++-----
 .../src/ReactFiberCommitWork.old.js           | 28 ++++-----
 .../ReactFiberTracingMarkerComponent.new.js   | 62 ++++++++-----------
 .../ReactFiberTracingMarkerComponent.old.js   | 62 ++++++++-----------
 .../src/ReactFiberWorkLoop.new.js             | 21 ++++---
 .../src/ReactFiberWorkLoop.old.js             | 21 ++++---
 .../src/ReactInternalTypes.js                 |  8 ++-
 11 files changed, 111 insertions(+), 127 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 91d1211c2072..b8bbb0d07ac8 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -770,7 +770,7 @@ export function createFiberFromTracingMarker(
   fiber.lanes = lanes;
   const tracingMarkerInstance: TracingMarkerInstance = {
     transitions: null,
-    pendingSuspenseBoundaries: null,
+    pendingBoundaries: null,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 90d0d7a7ac6f..da24de2f63ab 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -770,7 +770,7 @@ export function createFiberFromTracingMarker(
   fiber.lanes = lanes;
   const tracingMarkerInstance: TracingMarkerInstance = {
     transitions: null,
-    pendingSuspenseBoundaries: null,
+    pendingBoundaries: null,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index a13b9f7a811b..1d3ca68b05b5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -977,7 +977,7 @@ function updateTracingMarkerComponent(
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
-        pendingSuspenseBoundaries: new Map(),
+        pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,
       };
       workInProgress.stateNode = markerInstance;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index b7b32a43adb7..1fa498e29a92 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -977,7 +977,7 @@ function updateTracingMarkerComponent(
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
         transitions: new Set(currentTransitions),
-        pendingSuspenseBoundaries: new Map(),
+        pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,
       };
       workInProgress.stateNode = markerInstance;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index c17a5b1ba63d..9f3cb69b59ef 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1210,7 +1210,7 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
-    // or tracing marker's pendingSuspenseBoundaries map.
+    // 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
@@ -1250,7 +1250,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // to the pending boundary set if it's there
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
@@ -1284,7 +1284,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // if it's there
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
@@ -2977,7 +2977,7 @@ function commitPassiveMountOnFiber(
         }
 
         incompleteTransitions.forEach((markerInstance, transition) => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           if (pendingBoundaries === null || pendingBoundaries.size === 0) {
             addTransitionCompleteCallbackToPendingTransition(transition);
             incompleteTransitions.delete(transition);
@@ -3052,8 +3052,8 @@ function commitPassiveMountOnFiber(
                     if (instance.transitions === null) {
                       instance.transitions = new Set();
                     } else if (instance.transitions.has(transition)) {
-                      if (markerInstance.pendingSuspenseBoundaries === null) {
-                        markerInstance.pendingSuspenseBoundaries = new Map();
+                      if (markerInstance.pendingBoundaries === null) {
+                        markerInstance.pendingBoundaries = new Map();
                       }
                       if (instance.pendingMarkers === null) {
                         instance.pendingMarkers = new Set();
@@ -3103,17 +3103,15 @@ function commitPassiveMountOnFiber(
         const instance = finishedWork.stateNode;
         if (
           instance.transitions !== null &&
-          (instance.pendingSuspenseBoundaries === null ||
-            instance.pendingSuspenseBoundaries.size === 0)
+          (instance.pendingBoundaries === null ||
+            instance.pendingBoundaries.size === 0)
         ) {
-          instance.transitions.forEach(transition => {
-            addMarkerCompleteCallbackToPendingTransition({
-              transition,
-              name: finishedWork.memoizedProps.name,
-            });
-          });
+          addMarkerCompleteCallbackToPendingTransition(
+            finishedWork.memoizedProps.name,
+            instance.transitions,
+          );
           instance.transitions = null;
-          instance.pendingSuspenseBoundaries = null;
+          instance.pendingBoundaries = null;
         }
       }
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index d2efc3edf2cc..bcb822298012 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1210,7 +1210,7 @@ function reappearLayoutEffectsOnFiber(node: Fiber) {
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
-    // or tracing marker's pendingSuspenseBoundaries map.
+    // 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
@@ -1250,7 +1250,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // to the pending boundary set if it's there
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
@@ -1284,7 +1284,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
       // if it's there
       if (pendingMarkers !== null) {
         pendingMarkers.forEach(markerInstance => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
           if (
             pendingBoundaries !== null &&
@@ -2977,7 +2977,7 @@ function commitPassiveMountOnFiber(
         }
 
         incompleteTransitions.forEach((markerInstance, transition) => {
-          const pendingBoundaries = markerInstance.pendingSuspenseBoundaries;
+          const pendingBoundaries = markerInstance.pendingBoundaries;
           if (pendingBoundaries === null || pendingBoundaries.size === 0) {
             addTransitionCompleteCallbackToPendingTransition(transition);
             incompleteTransitions.delete(transition);
@@ -3052,8 +3052,8 @@ function commitPassiveMountOnFiber(
                     if (instance.transitions === null) {
                       instance.transitions = new Set();
                     } else if (instance.transitions.has(transition)) {
-                      if (markerInstance.pendingSuspenseBoundaries === null) {
-                        markerInstance.pendingSuspenseBoundaries = new Map();
+                      if (markerInstance.pendingBoundaries === null) {
+                        markerInstance.pendingBoundaries = new Map();
                       }
                       if (instance.pendingMarkers === null) {
                         instance.pendingMarkers = new Set();
@@ -3103,17 +3103,15 @@ function commitPassiveMountOnFiber(
         const instance = finishedWork.stateNode;
         if (
           instance.transitions !== null &&
-          (instance.pendingSuspenseBoundaries === null ||
-            instance.pendingSuspenseBoundaries.size === 0)
+          (instance.pendingBoundaries === null ||
+            instance.pendingBoundaries.size === 0)
         ) {
-          instance.transitions.forEach(transition => {
-            addMarkerCompleteCallbackToPendingTransition({
-              transition,
-              name: finishedWork.memoizedProps.name,
-            });
-          });
+          addMarkerCompleteCallbackToPendingTransition(
+            finishedWork.memoizedProps.name,
+            instance.transitions,
+          );
           instance.transitions = null;
-          instance.pendingSuspenseBoundaries = null;
+          instance.pendingBoundaries = null;
         }
       }
       break;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index ceae6dec3364..fea28213ff82 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -17,17 +17,12 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
 export type SuspenseInfo = {name: string | null};
 
-export type MarkerTransition = {
-  transition: Transition,
-  name: string,
-};
-
 export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
-  transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
+  transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerProgress: Map<string, TracingMarkerInstance> | null,
-  markerComplete: Array<MarkerTransition> | null,
+  markerComplete: Map<string, Set<Transition>> | null,
 };
 
 export type Transition = {
@@ -42,12 +37,12 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
   name?: string,
 |};
 
-export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
+export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
   pendingTransitions: PendingTransitionCallbacks,
@@ -57,12 +52,11 @@ export function processTransitionCallbacks(
   if (enableTransitionTracing) {
     if (pendingTransitions !== null) {
       const transitionStart = pendingTransitions.transitionStart;
-      if (transitionStart !== null) {
-        transitionStart.forEach(transition => {
-          if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(transition.name, transition.startTime);
-          }
-        });
+      const onTransitionStart = callbacks.onTransitionStart;
+      if (transitionStart !== null && onTransitionStart != null) {
+        transitionStart.forEach(transition =>
+          onTransitionStart(transition.name, transition.startTime),
+        );
       }
 
       const markerProgress = pendingTransitions.markerProgress;
@@ -71,8 +65,8 @@ export function processTransitionCallbacks(
         markerProgress.forEach((markerInstance, markerName) => {
           if (markerInstance.transitions !== null) {
             const pending =
-              markerInstance.pendingSuspenseBoundaries !== null
-                ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
+              markerInstance.pendingBoundaries !== null
+                ? Array.from(markerInstance.pendingBoundaries.values())
                 : [];
             markerInstance.transitions.forEach(transition => {
               onMarkerProgress(
@@ -88,16 +82,17 @@ export function processTransitionCallbacks(
       }
 
       const markerComplete = pendingTransitions.markerComplete;
-      if (markerComplete !== null) {
-        markerComplete.forEach(marker => {
-          if (callbacks.onMarkerComplete != null) {
-            callbacks.onMarkerComplete(
-              marker.transition.name,
-              marker.name,
-              marker.transition.startTime,
+      const onMarkerComplete = callbacks.onMarkerComplete;
+      if (markerComplete !== null && onMarkerComplete != null) {
+        markerComplete.forEach((transitions, markerName) => {
+          transitions.forEach(transition => {
+            onMarkerComplete(
+              transition.name,
+              markerName,
+              transition.startTime,
               endTime,
             );
-          }
+          });
         });
       }
 
@@ -115,16 +110,11 @@ export function processTransitionCallbacks(
       }
 
       const transitionComplete = pendingTransitions.transitionComplete;
-      if (transitionComplete !== null) {
-        transitionComplete.forEach(transition => {
-          if (callbacks.onTransitionComplete != null) {
-            callbacks.onTransitionComplete(
-              transition.name,
-              transition.startTime,
-              endTime,
-            );
-          }
-        });
+      const onTransitionComplete = callbacks.onTransitionComplete;
+      if (transitionComplete !== null && onTransitionComplete != null) {
+        transitionComplete.forEach(transition =>
+          onTransitionComplete(transition.name, transition.startTime, endTime),
+        );
       }
     }
   }
@@ -157,7 +147,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
         if (!root.incompleteTransitions.has(transition)) {
           const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
-            pendingSuspenseBoundaries: null,
+            pendingBoundaries: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index bf9268445a06..ddd8289d8a4b 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -17,17 +17,12 @@ import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
 export type SuspenseInfo = {name: string | null};
 
-export type MarkerTransition = {
-  transition: Transition,
-  name: string,
-};
-
 export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
-  transitionProgress: Map<Transition, PendingSuspenseBoundaries> | null,
+  transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerProgress: Map<string, TracingMarkerInstance> | null,
-  markerComplete: Array<MarkerTransition> | null,
+  markerComplete: Map<string, Set<Transition>> | null,
 };
 
 export type Transition = {
@@ -42,12 +37,12 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
   name?: string,
 |};
 
-export type PendingSuspenseBoundaries = Map<OffscreenInstance, SuspenseInfo>;
+export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
   pendingTransitions: PendingTransitionCallbacks,
@@ -57,12 +52,11 @@ export function processTransitionCallbacks(
   if (enableTransitionTracing) {
     if (pendingTransitions !== null) {
       const transitionStart = pendingTransitions.transitionStart;
-      if (transitionStart !== null) {
-        transitionStart.forEach(transition => {
-          if (callbacks.onTransitionStart != null) {
-            callbacks.onTransitionStart(transition.name, transition.startTime);
-          }
-        });
+      const onTransitionStart = callbacks.onTransitionStart;
+      if (transitionStart !== null && onTransitionStart != null) {
+        transitionStart.forEach(transition =>
+          onTransitionStart(transition.name, transition.startTime),
+        );
       }
 
       const markerProgress = pendingTransitions.markerProgress;
@@ -71,8 +65,8 @@ export function processTransitionCallbacks(
         markerProgress.forEach((markerInstance, markerName) => {
           if (markerInstance.transitions !== null) {
             const pending =
-              markerInstance.pendingSuspenseBoundaries !== null
-                ? Array.from(markerInstance.pendingSuspenseBoundaries.values())
+              markerInstance.pendingBoundaries !== null
+                ? Array.from(markerInstance.pendingBoundaries.values())
                 : [];
             markerInstance.transitions.forEach(transition => {
               onMarkerProgress(
@@ -88,16 +82,17 @@ export function processTransitionCallbacks(
       }
 
       const markerComplete = pendingTransitions.markerComplete;
-      if (markerComplete !== null) {
-        markerComplete.forEach(marker => {
-          if (callbacks.onMarkerComplete != null) {
-            callbacks.onMarkerComplete(
-              marker.transition.name,
-              marker.name,
-              marker.transition.startTime,
+      const onMarkerComplete = callbacks.onMarkerComplete;
+      if (markerComplete !== null && onMarkerComplete != null) {
+        markerComplete.forEach((transitions, markerName) => {
+          transitions.forEach(transition => {
+            onMarkerComplete(
+              transition.name,
+              markerName,
+              transition.startTime,
               endTime,
             );
-          }
+          });
         });
       }
 
@@ -115,16 +110,11 @@ export function processTransitionCallbacks(
       }
 
       const transitionComplete = pendingTransitions.transitionComplete;
-      if (transitionComplete !== null) {
-        transitionComplete.forEach(transition => {
-          if (callbacks.onTransitionComplete != null) {
-            callbacks.onTransitionComplete(
-              transition.name,
-              transition.startTime,
-              endTime,
-            );
-          }
-        });
+      const onTransitionComplete = callbacks.onTransitionComplete;
+      if (transitionComplete !== null && onTransitionComplete != null) {
+        transitionComplete.forEach(transition =>
+          onTransitionComplete(transition.name, transition.startTime, endTime),
+        );
       }
     }
   }
@@ -157,7 +147,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
         if (!root.incompleteTransitions.has(transition)) {
           const markerInstance: TracingMarkerInstance = {
             transitions: new Set([transition]),
-            pendingSuspenseBoundaries: null,
+            pendingBoundaries: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 92ffbd4e723f..4e965bb3f42d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {EventPriority} from './ReactEventPriorities.new';
 import type {
   PendingTransitionCallbacks,
-  MarkerTransition,
-  PendingSuspenseBoundaries,
+  PendingBoundaries,
   Transition,
 } from './ReactFiberTracingMarkerComponent.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -358,7 +357,7 @@ export function addTransitionStartCallbackToPendingTransition(
 export function addMarkerProgressCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  pendingBoundaries: PendingBoundaries | null,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -376,14 +375,15 @@ export function addMarkerProgressCallbackToPendingTransition(
     }
 
     currentPendingTransitionCallbacks.markerProgress.set(markerName, {
-      pendingSuspenseBoundaries,
+      pendingBoundaries,
       transitions,
     });
   }
 }
 
 export function addMarkerCompleteCallbackToPendingTransition(
-  transition: MarkerTransition,
+  markerName: string,
+  transitions: Set<Transition>,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -392,21 +392,24 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
-        markerComplete: [],
+        markerComplete: new Map(),
       };
     }
 
     if (currentPendingTransitionCallbacks.markerComplete === null) {
-      currentPendingTransitionCallbacks.markerComplete = [];
+      currentPendingTransitionCallbacks.markerComplete = new Map();
     }
 
-    currentPendingTransitionCallbacks.markerComplete.push(transition);
+    currentPendingTransitionCallbacks.markerComplete.set(
+      markerName,
+      transitions,
+    );
   }
 }
 
 export function addTransitionProgressCallbackToPendingTransition(
   transition: Transition,
-  boundaries: PendingSuspenseBoundaries,
+  boundaries: PendingBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c522a0697034..4b2e523d40a2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -16,8 +16,7 @@ import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {EventPriority} from './ReactEventPriorities.old';
 import type {
   PendingTransitionCallbacks,
-  MarkerTransition,
-  PendingSuspenseBoundaries,
+  PendingBoundaries,
   Transition,
 } from './ReactFiberTracingMarkerComponent.old';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
@@ -358,7 +357,7 @@ export function addTransitionStartCallbackToPendingTransition(
 export function addMarkerProgressCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
-  pendingSuspenseBoundaries: PendingSuspenseBoundaries | null,
+  pendingBoundaries: PendingBoundaries | null,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -376,14 +375,15 @@ export function addMarkerProgressCallbackToPendingTransition(
     }
 
     currentPendingTransitionCallbacks.markerProgress.set(markerName, {
-      pendingSuspenseBoundaries,
+      pendingBoundaries,
       transitions,
     });
   }
 }
 
 export function addMarkerCompleteCallbackToPendingTransition(
-  transition: MarkerTransition,
+  markerName: string,
+  transitions: Set<Transition>,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -392,21 +392,24 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
-        markerComplete: [],
+        markerComplete: new Map(),
       };
     }
 
     if (currentPendingTransitionCallbacks.markerComplete === null) {
-      currentPendingTransitionCallbacks.markerComplete = [];
+      currentPendingTransitionCallbacks.markerComplete = new Map();
     }
 
-    currentPendingTransitionCallbacks.markerComplete.push(transition);
+    currentPendingTransitionCallbacks.markerComplete.set(
+      markerName,
+      transitions,
+    );
   }
 }
 
 export function addTransitionProgressCallbackToPendingTransition(
   transition: Transition,
-  boundaries: PendingSuspenseBoundaries,
+  boundaries: PendingBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 8aad50f4bfc6..e017674dda20 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -28,8 +28,10 @@ import type {TimeoutHandle, NoTimeout} from './ReactFiberHostConfig';
 import type {Cache} from './ReactFiberCacheComponent.old';
 // Doing this because there's a merge conflict because of the way sync-reconciler-fork
 // is implemented
-import type {PendingSuspenseBoundaries} from './ReactFiberTracingMarkerComponent.new';
-import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {
+  TracingMarkerInstance,
+  Transition,
+} from './ReactFiberTracingMarkerComponent.new';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
 
 // Unwind Circular: moved from ReactFiberHooks.old
@@ -335,7 +337,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // 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, PendingSuspenseBoundaries>,
+  incompleteTransitions: Map<Array<Transition>, TracingMarkerInstance>,
 |};
 
 // Exported FiberRoot type includes all properties,

From f5916d15b66cce92bf0a6a4c8752154cadcc0cf8 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 12 Jul 2022 15:59:58 -0400
Subject: [PATCH 1474/1603] [Transition Tracing][Code Cleanup] Delete Marker
 Name Change Tests (#24908)

We decided that changing the Tracing Marker name wasn't allowed and we would error, so this PR deletes all the tests that tested name change behavior
---
 .../__tests__/ReactTransitionTracing-test.js  | 190 ------------------
 1 file changed, 190 deletions(-)

diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 3c0011a9cb88..3036f7ee0a1d 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -1338,194 +1338,4 @@ describe('ReactInteractionTracing', () => {
       ]);
     });
   });
-
-  // @gate enableTransitionTracing
-  it.skip('marker interaction cancelled when name changes', async () => {
-    const transitionCallbacks = {
-      onTransitionStart: (name, startTime) => {
-        Scheduler.unstable_yieldValue(
-          `onTransitionStart(${name}, ${startTime})`,
-        );
-      },
-      onTransitionComplete: (name, startTime, endTime) => {
-        Scheduler.unstable_yieldValue(
-          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
-        );
-      },
-      onMarkerProgress: (
-        transitioName,
-        markerName,
-        startTime,
-        currentTime,
-        pending,
-      ) => {
-        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
-        Scheduler.unstable_yieldValue(
-          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
-        );
-      },
-      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
-        Scheduler.unstable_yieldValue(
-          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
-        );
-      },
-    };
-
-    let navigateToPageTwo;
-    let setMarkerNameFn;
-    function App() {
-      const [navigate, setNavigate] = useState(false);
-      navigateToPageTwo = () => {
-        setNavigate(true);
-      };
-
-      const [markerName, setMarkerName] = useState('old marker');
-      setMarkerNameFn = () => setMarkerName('new marker');
-
-      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({transitionCallbacks});
-    await act(async () => {
-      root.render(<App />);
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
-
-      expect(Scheduler).toFlushAndYield(['Page One']);
-
-      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
-      expect(Scheduler).toFlushAndYield([
-        'Suspend [Page Two]',
-        'Loading...',
-        'onTransitionStart(page transition, 1000)',
-        'onMarkerProgress(page transition, old marker, 1000, 1000, [<null>])',
-      ]);
-
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
-      setMarkerNameFn();
-
-      expect(Scheduler).toFlushAndYield(['Suspend [Page Two]', 'Loading...']);
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
-      resolveText('Page Two');
-
-      // Marker complete is not called because the marker name changed
-      expect(Scheduler).toFlushAndYield([
-        'Page Two',
-        'onTransitionComplete(page transition, 1000, 3000)',
-      ]);
-    });
-  });
-
-  // @gate enableTransitionTracing
-  it.skip('marker changes to new interaction when name changes', async () => {
-    const transitionCallbacks = {
-      onTransitionStart: (name, startTime) => {
-        Scheduler.unstable_yieldValue(
-          `onTransitionStart(${name}, ${startTime})`,
-        );
-      },
-      onTransitionComplete: (name, startTime, endTime) => {
-        Scheduler.unstable_yieldValue(
-          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
-        );
-      },
-      onMarkerProgress: (
-        transitioName,
-        markerName,
-        startTime,
-        currentTime,
-        pending,
-      ) => {
-        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
-        Scheduler.unstable_yieldValue(
-          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
-        );
-      },
-      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
-        Scheduler.unstable_yieldValue(
-          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
-        );
-      },
-    };
-
-    let navigateToPageTwo;
-    let setMarkerNameFn;
-    function App() {
-      const [navigate, setNavigate] = useState(false);
-      navigateToPageTwo = () => {
-        setNavigate(true);
-      };
-
-      const [markerName, setMarkerName] = useState('old marker');
-      setMarkerNameFn = () => setMarkerName('new marker');
-
-      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({transitionCallbacks});
-    await act(async () => {
-      root.render(<App />);
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
-
-      expect(Scheduler).toFlushAndYield(['Page One']);
-
-      startTransition(() => navigateToPageTwo(), {name: 'page transition'});
-      expect(Scheduler).toFlushAndYield([
-        'Suspend [Page Two]',
-        'Loading...',
-        'onTransitionStart(page transition, 1000)',
-        'onMarkerProgress(page transition, old marker, 1000, 2000, [<null>])',
-      ]);
-
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
-      startTransition(() => setMarkerNameFn(), {name: 'marker transition'});
-
-      expect(Scheduler).toFlushAndYield([
-        'Suspend [Page Two]',
-        'Loading...',
-        'onTransitionStart(marker transition, 2000)',
-        'onMarkerProgress(marker transition, new marker, 2000, 3000, [])',
-        'onMarkerComplete(marker transition, new marker, 2000, 3000)',
-        'onTransitionComplete(marker transition, 2000, 3000)',
-      ]);
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
-      resolveText('Page Two');
-
-      // Marker complete is not called because the marker name changed
-      expect(Scheduler).toFlushAndYield([
-        'Page Two',
-        'onMarkerComplete(new marker, 2000, 3000)',
-        'onTransitionComplete(page transition, 1000, 3000)',
-      ]);
-    });
-  });
 });

From de3c069843af825503b91ed10d04d03db2aa1c94 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jul 2022 14:36:31 -0400
Subject: [PATCH 1475/1603] Move flag check into each switch case

The fiber tag is more specific than the effect flag, so we should always
refine the type of work first, to minimize redundant checks.
---
 .../src/ReactFiberCommitWork.new.js           | 333 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 333 +++++++++---------
 2 files changed, 346 insertions(+), 320 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 9f3cb69b59ef..949f4f29c895 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2884,20 +2884,18 @@ function commitPassiveMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    if ((fiber.flags & Passive) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      try {
-        commitPassiveMountOnFiber(
-          root,
-          fiber,
-          committedLanes,
-          committedTransitions,
-        );
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      commitPassiveMountOnFiber(
+        root,
+        fiber,
+        committedLanes,
+        committedTransitions,
+      );
+    } catch (error) {
+      captureCommitPhaseError(fiber, fiber.return, error);
     }
+    resetCurrentDebugFiberInDEV();
 
     if (fiber === subtreeRoot) {
       nextEffect = null;
@@ -2921,176 +2919,187 @@ function commitPassiveMountOnFiber(
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ): void {
+  const flags = finishedWork.flags;
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        try {
+      if (flags & Passive) {
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          startPassiveEffectTimer();
+          try {
+            commitHookEffectListMount(
+              HookPassive | HookHasEffect,
+              finishedWork,
+            );
+          } finally {
+            recordPassiveEffectDuration(finishedWork);
+          }
+        } else {
           commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
-        } finally {
-          recordPassiveEffectDuration(finishedWork);
         }
-      } else {
-        commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
       }
       break;
     }
     case HostRoot: {
-      if (enableCache) {
-        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 (flags & Passive) {
+        if (enableCache) {
+          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 = finishedWork.stateNode;
-        const incompleteTransitions = root.incompleteTransitions;
-        // Initial render
-        if (committedTransitions !== null) {
-          committedTransitions.forEach(transition => {
-            addTransitionStartCallbackToPendingTransition(transition);
+        if (enableTransitionTracing) {
+          // Get the transitions that were initiatized during the render
+          // and add a start transition callback for each of them
+          const root = 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) {
+              addTransitionCompleteCallbackToPendingTransition(transition);
+              incompleteTransitions.delete(transition);
+            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
-
-        incompleteTransitions.forEach((markerInstance, transition) => {
-          const pendingBoundaries = markerInstance.pendingBoundaries;
-          if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-            addTransitionCompleteCallbackToPendingTransition(transition);
-            incompleteTransitions.delete(transition);
-          }
-        });
-
-        clearTransitionsForLanes(finishedRoot, committedLanes);
       }
       break;
     }
     case LegacyHiddenComponent:
     case OffscreenComponent: {
-      if (enableCache) {
-        let previousCache: Cache | null = null;
-        if (
-          finishedWork.alternate !== null &&
-          finishedWork.alternate.memoizedState !== null &&
-          finishedWork.alternate.memoizedState.cachePool !== null
-        ) {
-          previousCache = finishedWork.alternate.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 (flags & Passive) {
+        if (enableCache) {
+          let previousCache: Cache | null = null;
+          if (
+            finishedWork.alternate !== null &&
+            finishedWork.alternate.memoizedState !== null &&
+            finishedWork.alternate.memoizedState.cachePool !== null
+          ) {
+            previousCache = finishedWork.alternate.memoizedState.cachePool.pool;
           }
-          if (previousCache != null) {
-            releaseCache(previousCache);
+          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) {
-        const isFallback = finishedWork.memoizedState;
-        const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
-        const instance: OffscreenInstance = finishedWork.stateNode;
+        if (enableTransitionTracing) {
+          const isFallback = finishedWork.memoizedState;
+          const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
+          const instance: OffscreenInstance = finishedWork.stateNode;
 
-        if (queue !== null) {
-          if (isFallback) {
-            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);
-              });
-            }
+          if (queue !== null) {
+            if (isFallback) {
+              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();
+              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);
                       }
-                      if (instance.pendingMarkers === null) {
-                        instance.pendingMarkers = new Set();
-                      }
-
-                      instance.pendingMarkers.add(markerInstance);
-                    }
-                  });
-                }
-              });
+                    });
+                  }
+                });
+              }
             }
+
+            finishedWork.updateQueue = null;
           }
 
-          finishedWork.updateQueue = null;
+          commitTransitionProgress(finishedWork);
         }
-
-        commitTransitionProgress(finishedWork);
       }
-
       break;
     }
     case CacheComponent: {
-      if (enableCache) {
-        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);
+      if (flags & Passive) {
+        if (enableCache) {
+          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);
+            }
           }
         }
       }
@@ -3098,20 +3107,24 @@ function commitPassiveMountOnFiber(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        // Get the transitions that were initiatized during the render
-        // and add a start transition callback for each of them
-        const instance = finishedWork.stateNode;
-        if (
-          instance.transitions !== null &&
-          (instance.pendingBoundaries === null ||
-            instance.pendingBoundaries.size === 0)
-        ) {
-          addMarkerCompleteCallbackToPendingTransition(
-            finishedWork.memoizedProps.name,
-            instance.transitions,
-          );
-          instance.transitions = null;
-          instance.pendingBoundaries = null;
+        if (flags & Passive) {
+          // Get the transitions that were initiatized during the render
+          // and add a start transition callback for each of them
+          const instance = finishedWork.stateNode;
+          if (
+            instance.transitions !== null &&
+            (instance.pendingBoundaries === null ||
+              instance.pendingBoundaries.size === 0)
+          ) {
+            instance.transitions.forEach(transition => {
+              addMarkerCompleteCallbackToPendingTransition(
+                finishedWork.memoizedProps.name,
+                instance.transitions,
+              );
+            });
+            instance.transitions = null;
+            instance.pendingBoundaries = null;
+          }
         }
       }
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index bcb822298012..f5e60b1d45cc 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2884,20 +2884,18 @@ function commitPassiveMountEffects_complete(
   while (nextEffect !== null) {
     const fiber = nextEffect;
 
-    if ((fiber.flags & Passive) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      try {
-        commitPassiveMountOnFiber(
-          root,
-          fiber,
-          committedLanes,
-          committedTransitions,
-        );
-      } catch (error) {
-        captureCommitPhaseError(fiber, fiber.return, error);
-      }
-      resetCurrentDebugFiberInDEV();
+    setCurrentDebugFiberInDEV(fiber);
+    try {
+      commitPassiveMountOnFiber(
+        root,
+        fiber,
+        committedLanes,
+        committedTransitions,
+      );
+    } catch (error) {
+      captureCommitPhaseError(fiber, fiber.return, error);
     }
+    resetCurrentDebugFiberInDEV();
 
     if (fiber === subtreeRoot) {
       nextEffect = null;
@@ -2921,176 +2919,187 @@ function commitPassiveMountOnFiber(
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ): void {
+  const flags = finishedWork.flags;
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        try {
+      if (flags & Passive) {
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          startPassiveEffectTimer();
+          try {
+            commitHookEffectListMount(
+              HookPassive | HookHasEffect,
+              finishedWork,
+            );
+          } finally {
+            recordPassiveEffectDuration(finishedWork);
+          }
+        } else {
           commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
-        } finally {
-          recordPassiveEffectDuration(finishedWork);
         }
-      } else {
-        commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
       }
       break;
     }
     case HostRoot: {
-      if (enableCache) {
-        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 (flags & Passive) {
+        if (enableCache) {
+          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 = finishedWork.stateNode;
-        const incompleteTransitions = root.incompleteTransitions;
-        // Initial render
-        if (committedTransitions !== null) {
-          committedTransitions.forEach(transition => {
-            addTransitionStartCallbackToPendingTransition(transition);
+        if (enableTransitionTracing) {
+          // Get the transitions that were initiatized during the render
+          // and add a start transition callback for each of them
+          const root = 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) {
+              addTransitionCompleteCallbackToPendingTransition(transition);
+              incompleteTransitions.delete(transition);
+            }
           });
 
           clearTransitionsForLanes(finishedRoot, committedLanes);
         }
-
-        incompleteTransitions.forEach((markerInstance, transition) => {
-          const pendingBoundaries = markerInstance.pendingBoundaries;
-          if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-            addTransitionCompleteCallbackToPendingTransition(transition);
-            incompleteTransitions.delete(transition);
-          }
-        });
-
-        clearTransitionsForLanes(finishedRoot, committedLanes);
       }
       break;
     }
     case LegacyHiddenComponent:
     case OffscreenComponent: {
-      if (enableCache) {
-        let previousCache: Cache | null = null;
-        if (
-          finishedWork.alternate !== null &&
-          finishedWork.alternate.memoizedState !== null &&
-          finishedWork.alternate.memoizedState.cachePool !== null
-        ) {
-          previousCache = finishedWork.alternate.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 (flags & Passive) {
+        if (enableCache) {
+          let previousCache: Cache | null = null;
+          if (
+            finishedWork.alternate !== null &&
+            finishedWork.alternate.memoizedState !== null &&
+            finishedWork.alternate.memoizedState.cachePool !== null
+          ) {
+            previousCache = finishedWork.alternate.memoizedState.cachePool.pool;
           }
-          if (previousCache != null) {
-            releaseCache(previousCache);
+          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) {
-        const isFallback = finishedWork.memoizedState;
-        const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
-        const instance: OffscreenInstance = finishedWork.stateNode;
+        if (enableTransitionTracing) {
+          const isFallback = finishedWork.memoizedState;
+          const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
+          const instance: OffscreenInstance = finishedWork.stateNode;
 
-        if (queue !== null) {
-          if (isFallback) {
-            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);
-              });
-            }
+          if (queue !== null) {
+            if (isFallback) {
+              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();
+              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);
                       }
-                      if (instance.pendingMarkers === null) {
-                        instance.pendingMarkers = new Set();
-                      }
-
-                      instance.pendingMarkers.add(markerInstance);
-                    }
-                  });
-                }
-              });
+                    });
+                  }
+                });
+              }
             }
+
+            finishedWork.updateQueue = null;
           }
 
-          finishedWork.updateQueue = null;
+          commitTransitionProgress(finishedWork);
         }
-
-        commitTransitionProgress(finishedWork);
       }
-
       break;
     }
     case CacheComponent: {
-      if (enableCache) {
-        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);
+      if (flags & Passive) {
+        if (enableCache) {
+          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);
+            }
           }
         }
       }
@@ -3098,20 +3107,24 @@ function commitPassiveMountOnFiber(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        // Get the transitions that were initiatized during the render
-        // and add a start transition callback for each of them
-        const instance = finishedWork.stateNode;
-        if (
-          instance.transitions !== null &&
-          (instance.pendingBoundaries === null ||
-            instance.pendingBoundaries.size === 0)
-        ) {
-          addMarkerCompleteCallbackToPendingTransition(
-            finishedWork.memoizedProps.name,
-            instance.transitions,
-          );
-          instance.transitions = null;
-          instance.pendingBoundaries = null;
+        if (flags & Passive) {
+          // Get the transitions that were initiatized during the render
+          // and add a start transition callback for each of them
+          const instance = finishedWork.stateNode;
+          if (
+            instance.transitions !== null &&
+            (instance.pendingBoundaries === null ||
+              instance.pendingBoundaries.size === 0)
+          ) {
+            instance.transitions.forEach(transition => {
+              addMarkerCompleteCallbackToPendingTransition(
+                finishedWork.memoizedProps.name,
+                instance.transitions,
+              );
+            });
+            instance.transitions = null;
+            instance.pendingBoundaries = null;
+          }
         }
       }
       break;

From bb1357b38170e81cfbf2398cc6fefcf7a1ef2ccb Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jul 2022 14:45:21 -0400
Subject: [PATCH 1476/1603] Wrap try-catch directly around each user function

(This is the same as f9e6aef, but for the passive mount phase rather than the
mutation phase.)

This moves the try-catch from around each fiber's passive mount phase to
direclty around each user function (effect function, callback, etc).

We already do this when unmounting because if one unmount function
errors, we still need to call all the others so they can clean up
their resources.

Previously we didn't bother to do this for anything but unmount,
because if a mount effect throws, we're going to delete that whole
tree anyway.

But now that we're switching from an iterative loop to a recursive one,
we don't want every call frame on the stack to have a try-catch, since
the error handling requires additional memory.

Wrapping every user function is a bit tedious, but it's better
for performance. Many of them already had try blocks around
them already.
---
 .../src/ReactFiberCommitWork.new.js           | 30 +++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 30 +++++++++++--------
 2 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 949f4f29c895..c009612e811a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2885,16 +2885,12 @@ function commitPassiveMountEffects_complete(
     const fiber = nextEffect;
 
     setCurrentDebugFiberInDEV(fiber);
-    try {
-      commitPassiveMountOnFiber(
-        root,
-        fiber,
-        committedLanes,
-        committedTransitions,
-      );
-    } catch (error) {
-      captureCommitPhaseError(fiber, fiber.return, error);
-    }
+    commitPassiveMountOnFiber(
+      root,
+      fiber,
+      committedLanes,
+      committedTransitions,
+    );
     resetCurrentDebugFiberInDEV();
 
     if (fiber === subtreeRoot) {
@@ -2936,11 +2932,19 @@ function commitPassiveMountOnFiber(
               HookPassive | HookHasEffect,
               finishedWork,
             );
-          } finally {
-            recordPassiveEffectDuration(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
+          recordPassiveEffectDuration(finishedWork);
         } else {
-          commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
+          try {
+            commitHookEffectListMount(
+              HookPassive | HookHasEffect,
+              finishedWork,
+            );
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index f5e60b1d45cc..9eed4a232328 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2885,16 +2885,12 @@ function commitPassiveMountEffects_complete(
     const fiber = nextEffect;
 
     setCurrentDebugFiberInDEV(fiber);
-    try {
-      commitPassiveMountOnFiber(
-        root,
-        fiber,
-        committedLanes,
-        committedTransitions,
-      );
-    } catch (error) {
-      captureCommitPhaseError(fiber, fiber.return, error);
-    }
+    commitPassiveMountOnFiber(
+      root,
+      fiber,
+      committedLanes,
+      committedTransitions,
+    );
     resetCurrentDebugFiberInDEV();
 
     if (fiber === subtreeRoot) {
@@ -2936,11 +2932,19 @@ function commitPassiveMountOnFiber(
               HookPassive | HookHasEffect,
               finishedWork,
             );
-          } finally {
-            recordPassiveEffectDuration(finishedWork);
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
+          recordPassiveEffectDuration(finishedWork);
         } else {
-          commitHookEffectListMount(HookPassive | HookHasEffect, finishedWork);
+          try {
+            commitHookEffectListMount(
+              HookPassive | HookHasEffect,
+              finishedWork,
+            );
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
+          }
         }
       }
       break;

From 7a4336c4040bb26d8fe143f96d842acae4c728b5 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 12 Jul 2022 15:02:07 -0400
Subject: [PATCH 1477/1603] Use recursion to traverse during passive mount
 phase

This converts the layout phase to iterate over its effects
recursively instead of iteratively. This makes it easier to track
contextual information, like whether a fiber is inside a hidden tree.

We already made this change for the mutation phase. See 481dece for
more context.
---
 .../src/ReactFiberCommitWork.new.js           | 104 ++++++++++--------
 .../src/ReactFiberCommitWork.old.js           | 104 ++++++++++--------
 2 files changed, 112 insertions(+), 96 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index c009612e811a..cd091c1cd155 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2843,70 +2843,37 @@ export function commitPassiveMountEffects(
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ): void {
-  nextEffect = finishedWork;
-  commitPassiveMountEffects_begin(
-    finishedWork,
+  setCurrentDebugFiberInDEV(finishedWork);
+  commitPassiveMountOnFiber(
     root,
+    finishedWork,
     committedLanes,
     committedTransitions,
   );
+  resetCurrentDebugFiberInDEV();
 }
 
-function commitPassiveMountEffects_begin(
-  subtreeRoot: Fiber,
+function recursivelyTraversePassiveMountEffects(
   root: FiberRoot,
+  parentFiber: Fiber,
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
-    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      commitPassiveMountEffects_complete(
-        subtreeRoot,
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  if (parentFiber.subtreeFlags & PassiveMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitPassiveMountOnFiber(
         root,
+        child,
         committedLanes,
         committedTransitions,
       );
+      child = child.sibling;
     }
   }
-}
-
-function commitPassiveMountEffects_complete(
-  subtreeRoot: Fiber,
-  root: FiberRoot,
-  committedLanes: Lanes,
-  committedTransitions: Array<Transition> | null,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-
-    setCurrentDebugFiberInDEV(fiber);
-    commitPassiveMountOnFiber(
-      root,
-      fiber,
-      committedLanes,
-      committedTransitions,
-    );
-    resetCurrentDebugFiberInDEV();
-
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
-    }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
-    }
-
-    nextEffect = fiber.return;
-  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function commitPassiveMountOnFiber(
@@ -2920,6 +2887,12 @@ function commitPassiveMountOnFiber(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (
           enableProfilerTimer &&
@@ -2950,6 +2923,12 @@ function commitPassiveMountOnFiber(
       break;
     }
     case HostRoot: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (enableCache) {
           let previousCache: Cache | null = null;
@@ -3000,6 +2979,12 @@ function commitPassiveMountOnFiber(
     }
     case LegacyHiddenComponent:
     case OffscreenComponent: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (enableCache) {
           let previousCache: Cache | null = null;
@@ -3087,6 +3072,12 @@ function commitPassiveMountOnFiber(
       break;
     }
     case CacheComponent: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (enableCache) {
           let previousCache: Cache | null = null;
@@ -3111,6 +3102,12 @@ function commitPassiveMountOnFiber(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+        );
         if (flags & Passive) {
           // Get the transitions that were initiatized during the render
           // and add a start transition callback for each of them
@@ -3130,7 +3127,18 @@ function commitPassiveMountOnFiber(
             instance.pendingBoundaries = null;
           }
         }
+        break;
       }
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    default: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       break;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 9eed4a232328..6c23972a43dd 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2843,70 +2843,37 @@ export function commitPassiveMountEffects(
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ): void {
-  nextEffect = finishedWork;
-  commitPassiveMountEffects_begin(
-    finishedWork,
+  setCurrentDebugFiberInDEV(finishedWork);
+  commitPassiveMountOnFiber(
     root,
+    finishedWork,
     committedLanes,
     committedTransitions,
   );
+  resetCurrentDebugFiberInDEV();
 }
 
-function commitPassiveMountEffects_begin(
-  subtreeRoot: Fiber,
+function recursivelyTraversePassiveMountEffects(
   root: FiberRoot,
+  parentFiber: Fiber,
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
-    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && firstChild !== null) {
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      commitPassiveMountEffects_complete(
-        subtreeRoot,
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  if (parentFiber.subtreeFlags & PassiveMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitPassiveMountOnFiber(
         root,
+        child,
         committedLanes,
         committedTransitions,
       );
+      child = child.sibling;
     }
   }
-}
-
-function commitPassiveMountEffects_complete(
-  subtreeRoot: Fiber,
-  root: FiberRoot,
-  committedLanes: Lanes,
-  committedTransitions: Array<Transition> | null,
-) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-
-    setCurrentDebugFiberInDEV(fiber);
-    commitPassiveMountOnFiber(
-      root,
-      fiber,
-      committedLanes,
-      committedTransitions,
-    );
-    resetCurrentDebugFiberInDEV();
-
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
-    }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
-    }
-
-    nextEffect = fiber.return;
-  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function commitPassiveMountOnFiber(
@@ -2920,6 +2887,12 @@ function commitPassiveMountOnFiber(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (
           enableProfilerTimer &&
@@ -2950,6 +2923,12 @@ function commitPassiveMountOnFiber(
       break;
     }
     case HostRoot: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (enableCache) {
           let previousCache: Cache | null = null;
@@ -3000,6 +2979,12 @@ function commitPassiveMountOnFiber(
     }
     case LegacyHiddenComponent:
     case OffscreenComponent: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (enableCache) {
           let previousCache: Cache | null = null;
@@ -3087,6 +3072,12 @@ function commitPassiveMountOnFiber(
       break;
     }
     case CacheComponent: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       if (flags & Passive) {
         if (enableCache) {
           let previousCache: Cache | null = null;
@@ -3111,6 +3102,12 @@ function commitPassiveMountOnFiber(
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+        );
         if (flags & Passive) {
           // Get the transitions that were initiatized during the render
           // and add a start transition callback for each of them
@@ -3130,7 +3127,18 @@ function commitPassiveMountOnFiber(
             instance.pendingBoundaries = null;
           }
         }
+        break;
       }
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    default: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
       break;
     }
   }

From 4bc83e682119085481a7c940d23c5f1568be002b Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Wed, 13 Jul 2022 15:21:32 -0400
Subject: [PATCH 1478/1603] [DevTools] enable `enableProfilerComponentTree`
 flag for all builds (#24921)

---
 .../src/config/DevToolsFeatureFlags.core-oss.js                 | 2 +-
 .../src/config/DevToolsFeatureFlags.default.js                  | 2 +-
 .../src/config/DevToolsFeatureFlags.extension-oss.js            | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
index 034368121988..8102c6b751c9 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js
@@ -19,7 +19,7 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
-export const enableProfilerComponentTree = false;
+export const enableProfilerComponentTree = true;
 
 /************************************************************************
  * Do not edit the code below.
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
index 01d5fd01075c..5d522b121b7b 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.default.js
@@ -19,4 +19,4 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
-export const enableProfilerComponentTree = false;
+export const enableProfilerComponentTree = true;
diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
index 678ba417e2c9..2e6cabf4b56f 100644
--- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
+++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js
@@ -19,7 +19,7 @@ export const enableNamedHooksFeature = true;
 export const enableProfilerChangedHookIndices = true;
 export const enableStyleXFeatures = false;
 export const isInternalFacebookBuild = false;
-export const enableProfilerComponentTree = false;
+export const enableProfilerComponentTree = true;
 
 /************************************************************************
  * Do not edit the code below.

From f629495199791ce2811661ab50c37aac7898f862 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 13 Jul 2022 15:27:12 -0400
Subject: [PATCH 1479/1603] [Transition Tracing] Rename transitionCallbacks to
 unstable_transitionCallbacks  (#24920)

Renaming transitionCallbacks to unstable_transitionCallbacks as per convention
---
 packages/react-dom/src/client/ReactDOMRoot.js |  6 +--
 .../src/createReactNoop.js                    |  6 +--
 .../__tests__/ReactTransitionTracing-test.js  | 48 ++++++++++++++-----
 3 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index 49084d0f9bfa..ed3faa9381a3 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -26,9 +26,9 @@ export type RootType = {
 export type CreateRootOptions = {
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
+  unstable_transitionCallbacks?: TransitionTracingCallbacks,
   identifierPrefix?: string,
   onRecoverableError?: (error: mixed) => void,
-  transitionCallbacks?: TransitionTracingCallbacks,
   ...
 };
 
@@ -216,8 +216,8 @@ export function createRoot(
     if (options.onRecoverableError !== undefined) {
       onRecoverableError = options.onRecoverableError;
     }
-    if (options.transitionCallbacks !== undefined) {
-      transitionCallbacks = options.transitionCallbacks;
+    if (options.unstable_transitionCallbacks !== undefined) {
+      transitionCallbacks = options.unstable_transitionCallbacks;
     }
   }
 
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 24970fbcc18d..df2b3a839a52 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -68,7 +68,7 @@ type TextInstance = {|
 |};
 type HostContext = Object;
 type CreateRootOptions = {
-  transitionCallbacks?: TransitionTracingCallbacks,
+  unstable_transitionCallbacks?: TransitionTracingCallbacks,
   ...
 };
 
@@ -828,8 +828,8 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
         false,
         '',
         onRecoverableError,
-        options && options.transitionCallbacks
-          ? options.transitionCallbacks
+        options && options.unstable_transitionCallbacks
+          ? options.unstable_transitionCallbacks
           : null,
       );
       return {
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index 3036f7ee0a1d..fe2d4e008f94 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -212,7 +212,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App navigate={false} />);
       ReactNoop.expire(1000);
@@ -276,7 +278,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -333,7 +337,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -404,7 +410,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -497,7 +505,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -602,7 +612,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -717,7 +729,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -846,7 +860,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -1000,7 +1016,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -1085,7 +1103,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -1203,7 +1223,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       root.render(<App />);
       ReactNoop.expire(1000);
@@ -1286,7 +1308,9 @@ describe('ReactInteractionTracing', () => {
       );
     }
 
-    const root = ReactNoop.createRoot({transitionCallbacks});
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
     await act(async () => {
       startTransition(
         () => root.render(<App markerName="one" markerKey="key" />),

From d54880d4241aab772e6e2e6aedbb7176b9f2c191 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Wed, 13 Jul 2022 15:57:50 -0400
Subject: [PATCH 1480/1603] React DevTools 4.24.7 -> 4.25.0 (#24919)

---
 packages/react-devtools-core/package.json             |  2 +-
 .../react-devtools-extensions/chrome/manifest.json    |  4 ++--
 packages/react-devtools-extensions/edge/manifest.json |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json   |  2 +-
 packages/react-devtools-inline/package.json           |  2 +-
 packages/react-devtools-timeline/package.json         |  2 +-
 packages/react-devtools/CHANGELOG.md                  | 11 +++++++++++
 packages/react-devtools/package.json                  |  4 ++--
 8 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 5a65c4c60aeb..2ccfa2db38a0 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.24.7",
+  "version": "4.25.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index 3bf02c4e5788..ce0f47c0486b 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.24.7",
-  "version_name": "4.24.7",
+  "version": "4.25.0",
+  "version_name": "4.25.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 809c7be653fc..534f4664eed4 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.24.7",
-  "version_name": "4.24.7",
+  "version": "4.25.0",
+  "version_name": "4.25.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 07399c15a2c2..954bfc9fd70d 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.24.7",
+  "version": "4.25.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 991d1b707c9f..44edd5c3080a 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.24.7",
+  "version": "4.25.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 4dd4cc661adb..c21f038bb680 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.24.7",
+  "version": "4.25.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index a469d9da9acc..433c782b2ece 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,17 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index 91e6d6b752aa..ac35f477877d 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.24.7",
+  "version": "4.25.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.24.7",
+    "react-devtools-core": "4.25.0",
     "update-notifier": "^2.1.0"
   }
 }

From 02206099afe9bf54435fe0bd978a4ccf3df9cace Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 14 Jul 2022 11:08:08 -0400
Subject: [PATCH 1481/1603] Use recursion to traverse during passive unmount
 phase (#24918)

This converts the layout phase to iterate over its effects recursively
instead of iteratively. This makes it easier to track contextual
information, like whether a fiber is inside a hidden tree.

We already made this change for several other phases, like mutation and
layout mount. See 481dece for more context.
---
 .../src/ReactFiberCommitWork.new.js           | 160 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 160 +++++++++---------
 2 files changed, 154 insertions(+), 166 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index cd091c1cd155..13ad7bd12e74 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -3144,85 +3144,72 @@ function commitPassiveMountOnFiber(
   }
 }
 
-export function commitPassiveUnmountEffects(firstChild: Fiber): void {
-  nextEffect = firstChild;
-  commitPassiveUnmountEffects_begin();
+export function commitPassiveUnmountEffects(finishedWork: Fiber): void {
+  setCurrentDebugFiberInDEV(finishedWork);
+  commitPassiveUnmountOnFiber(finishedWork);
+  resetCurrentDebugFiberInDEV();
 }
 
-function commitPassiveUnmountEffects_begin() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const child = fiber.child;
+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 ((nextEffect.flags & ChildDeletion) !== NoFlags) {
-      const deletions = fiber.deletions;
-      if (deletions !== null) {
-        for (let i = 0; i < deletions.length; i++) {
-          const fiberToDelete = deletions[i];
-          nextEffect = fiberToDelete;
+  if ((parentFiber.flags & ChildDeletion) !== NoFlags) {
+    if (deletions !== null) {
+      for (let i = 0; i < deletions.length; i++) {
+        const childToDelete = deletions[i];
+        try {
+          // TODO: Convert this to use recursion
+          nextEffect = childToDelete;
           commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
-            fiberToDelete,
-            fiber,
+            childToDelete,
+            parentFiber,
           );
+        } catch (error) {
+          captureCommitPhaseError(childToDelete, parentFiber, error);
         }
-
-        if (deletedTreeCleanUpLevel >= 1) {
-          // 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 = fiber.alternate;
-          if (previousFiber !== null) {
-            let detachedChild = previousFiber.child;
-            if (detachedChild !== null) {
-              previousFiber.child = null;
-              do {
-                const detachedSibling = detachedChild.sibling;
-                detachedChild.sibling = null;
-                detachedChild = detachedSibling;
-              } while (detachedChild !== null);
-            }
-          }
-        }
-
-        nextEffect = fiber;
       }
     }
 
-    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
-      child.return = fiber;
-      nextEffect = child;
-    } else {
-      commitPassiveUnmountEffects_complete();
+    if (deletedTreeCleanUpLevel >= 1) {
+      // 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 {
+            const detachedSibling = detachedChild.sibling;
+            detachedChild.sibling = null;
+            detachedChild = detachedSibling;
+          } while (detachedChild !== null);
+        }
+      }
     }
   }
-}
-
-function commitPassiveUnmountEffects_complete() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if ((fiber.flags & Passive) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
 
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  // TODO: Split PassiveMask into separate masks for mount and unmount?
+  if (parentFiber.subtreeFlags & PassiveMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitPassiveUnmountOnFiber(child);
+      child = child.sibling;
     }
-
-    nextEffect = fiber.return;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
@@ -3230,27 +3217,34 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        commitHookEffectListUnmount(
-          HookPassive | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-        recordPassiveEffectDuration(finishedWork);
-      } else {
-        commitHookEffectListUnmount(
-          HookPassive | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+      if (finishedWork.flags & Passive) {
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          startPassiveEffectTimer();
+          commitHookEffectListUnmount(
+            HookPassive | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+          recordPassiveEffectDuration(finishedWork);
+        } else {
+          commitHookEffectListUnmount(
+            HookPassive | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+        }
       }
       break;
     }
+    default: {
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 6c23972a43dd..a25a1ff3cd51 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -3144,85 +3144,72 @@ function commitPassiveMountOnFiber(
   }
 }
 
-export function commitPassiveUnmountEffects(firstChild: Fiber): void {
-  nextEffect = firstChild;
-  commitPassiveUnmountEffects_begin();
+export function commitPassiveUnmountEffects(finishedWork: Fiber): void {
+  setCurrentDebugFiberInDEV(finishedWork);
+  commitPassiveUnmountOnFiber(finishedWork);
+  resetCurrentDebugFiberInDEV();
 }
 
-function commitPassiveUnmountEffects_begin() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const child = fiber.child;
+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 ((nextEffect.flags & ChildDeletion) !== NoFlags) {
-      const deletions = fiber.deletions;
-      if (deletions !== null) {
-        for (let i = 0; i < deletions.length; i++) {
-          const fiberToDelete = deletions[i];
-          nextEffect = fiberToDelete;
+  if ((parentFiber.flags & ChildDeletion) !== NoFlags) {
+    if (deletions !== null) {
+      for (let i = 0; i < deletions.length; i++) {
+        const childToDelete = deletions[i];
+        try {
+          // TODO: Convert this to use recursion
+          nextEffect = childToDelete;
           commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
-            fiberToDelete,
-            fiber,
+            childToDelete,
+            parentFiber,
           );
+        } catch (error) {
+          captureCommitPhaseError(childToDelete, parentFiber, error);
         }
-
-        if (deletedTreeCleanUpLevel >= 1) {
-          // 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 = fiber.alternate;
-          if (previousFiber !== null) {
-            let detachedChild = previousFiber.child;
-            if (detachedChild !== null) {
-              previousFiber.child = null;
-              do {
-                const detachedSibling = detachedChild.sibling;
-                detachedChild.sibling = null;
-                detachedChild = detachedSibling;
-              } while (detachedChild !== null);
-            }
-          }
-        }
-
-        nextEffect = fiber;
       }
     }
 
-    if ((fiber.subtreeFlags & PassiveMask) !== NoFlags && child !== null) {
-      child.return = fiber;
-      nextEffect = child;
-    } else {
-      commitPassiveUnmountEffects_complete();
+    if (deletedTreeCleanUpLevel >= 1) {
+      // 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 {
+            const detachedSibling = detachedChild.sibling;
+            detachedChild.sibling = null;
+            detachedChild = detachedSibling;
+          } while (detachedChild !== null);
+        }
+      }
     }
   }
-}
-
-function commitPassiveUnmountEffects_complete() {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    if ((fiber.flags & Passive) !== NoFlags) {
-      setCurrentDebugFiberInDEV(fiber);
-      commitPassiveUnmountOnFiber(fiber);
-      resetCurrentDebugFiberInDEV();
-    }
 
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  // TODO: Split PassiveMask into separate masks for mount and unmount?
+  if (parentFiber.subtreeFlags & PassiveMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitPassiveUnmountOnFiber(child);
+      child = child.sibling;
     }
-
-    nextEffect = fiber.return;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
@@ -3230,27 +3217,34 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        commitHookEffectListUnmount(
-          HookPassive | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
-        recordPassiveEffectDuration(finishedWork);
-      } else {
-        commitHookEffectListUnmount(
-          HookPassive | HookHasEffect,
-          finishedWork,
-          finishedWork.return,
-        );
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+      if (finishedWork.flags & Passive) {
+        if (
+          enableProfilerTimer &&
+          enableProfilerCommitHooks &&
+          finishedWork.mode & ProfileMode
+        ) {
+          startPassiveEffectTimer();
+          commitHookEffectListUnmount(
+            HookPassive | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+          recordPassiveEffectDuration(finishedWork);
+        } else {
+          commitHookEffectListUnmount(
+            HookPassive | HookHasEffect,
+            finishedWork,
+            finishedWork.return,
+          );
+        }
       }
       break;
     }
+    default: {
+      recursivelyTraversePassiveUnmountEffects(finishedWork);
+      break;
+    }
   }
 }
 

From 6daf600609e7699106673b37b507097bc2ea5139 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Mon, 18 Jul 2022 13:22:47 -0400
Subject: [PATCH 1482/1603] add transistion callbacks to hydrateRoot (#24937)

This PR adds transition callbacks to hydrateRoot.
---
 packages/react-dom/src/client/ReactDOMRoot.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index ed3faa9381a3..c522d91f21ff 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -40,6 +40,7 @@ export type HydrateRootOptions = {
   // Options for all roots
   unstable_strictMode?: boolean,
   unstable_concurrentUpdatesByDefault?: boolean,
+  unstable_transitionCallbacks?: TransitionTracingCallbacks,
   identifierPrefix?: string,
   onRecoverableError?: (error: mixed) => void,
   ...
@@ -282,6 +283,7 @@ export function hydrateRoot(
   let concurrentUpdatesByDefaultOverride = false;
   let identifierPrefix = '';
   let onRecoverableError = defaultOnRecoverableError;
+  let transitionCallbacks = null;
   if (options !== null && options !== undefined) {
     if (options.unstable_strictMode === true) {
       isStrictMode = true;
@@ -298,6 +300,9 @@ export function hydrateRoot(
     if (options.onRecoverableError !== undefined) {
       onRecoverableError = options.onRecoverableError;
     }
+    if (options.unstable_transitionCallbacks !== undefined) {
+      transitionCallbacks = options.unstable_transitionCallbacks;
+    }
   }
 
   const root = createHydrationContainer(
@@ -310,8 +315,7 @@ export function hydrateRoot(
     concurrentUpdatesByDefaultOverride,
     identifierPrefix,
     onRecoverableError,
-    // TODO(luna) Support hydration later
-    null,
+    transitionCallbacks,
   );
   markContainerAsRoot(root.current, container);
   // This can't be a comment node since hydration doesn't work on comment nodes anyway.

From 992911981bc35b6fc3e7cacb4294d6d782527603 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Mon, 18 Jul 2022 15:52:53 -0400
Subject: [PATCH 1483/1603] [DevTools] add simple usage events for internal
 logging (#24888)

* [DevTools] add simple events for internal logging

* fix lint

* fix lint

* better event name

* fix flow

* better way to fix flow

* combine 'select-element'

* use same event name for selecting element by inspecting
---
 packages/react-devtools-shared/src/Logger.js     |  9 +++++++++
 .../src/devtools/views/Components/Element.js     |  2 ++
 .../views/Components/InspectHostNodesToggle.js   |  2 ++
 .../views/Components/InspectedElementView.js     | 16 ++++++++--------
 .../src/devtools/views/Components/Tree.js        |  2 ++
 .../devtools/views/Profiler/ProfilerContext.js   |  9 +++++----
 6 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index bf9d9719ac19..f899a49f5d7f 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -31,6 +31,15 @@ export type LogEvent =
       +duration_ms: number,
       +inspected_element_display_name: string | null,
       +inspected_element_number_of_hooks: number | null,
+    |}
+  | {|
+      +event_name: 'select-element',
+    |}
+  | {|
+      +event_name: 'inspect-element-button-clicked',
+    |}
+  | {|
+      +event_name: 'profiling-start',
     |};
 
 export type LogFunction = LogEvent => void | Promise<void>;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index ed6f00055bc1..05051eb63cb1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -17,6 +17,7 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 import {SettingsContext} from '../Settings/SettingsContext';
 import {StoreContext} from '../context';
 import {useSubscription} from '../hooks';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import type {ItemData} from './Tree';
 import type {Element as ElementType} from './types';
@@ -76,6 +77,7 @@ export default function Element({data, index, style}: Props) {
 
   const handleClick = ({metaKey}) => {
     if (id !== null) {
+      logEvent({event_name: 'select-element'});
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
         payload: metaKey ? null : id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
index 29782b2b303d..e850417af5c3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -12,6 +12,7 @@ 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() {
   const [isInspecting, setIsInspecting] = useState(false);
@@ -22,6 +23,7 @@ export default function InspectHostNodesToggle() {
       setIsInspecting(isChecked);
 
       if (isChecked) {
+        logEvent({event_name: 'inspect-element-button-clicked'});
         bridge.send('startInspectingNative');
       } else {
         bridge.send('stopInspectingNative', false);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index 37fe664d40e7..e823bfcfc263 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -33,6 +33,7 @@ import {
   storeAsGlobal as storeAsGlobalAPI,
 } from 'react-devtools-shared/src/backendAPI';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import styles from './InspectedElementView.css';
 
@@ -301,14 +302,13 @@ function OwnerView({
     clearHighlightNativeElement,
   } = useHighlightNativeElement();
 
-  const handleClick = useCallback(
-    () =>
-      dispatch({
-        type: 'SELECT_ELEMENT_BY_ID',
-        payload: id,
-      }),
-    [dispatch, id],
-  );
+  const handleClick = useCallback(() => {
+    logEvent({event_name: 'select-element'});
+    dispatch({
+      type: 'SELECT_ELEMENT_BY_ID',
+      payload: id,
+    });
+  }, [dispatch, id]);
 
   const onMouseEnter = () => highlightNativeElement(id);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 23d136491253..84bda98eaa31 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -36,6 +36,7 @@ import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtool
 import styles from './Tree.css';
 import ButtonIcon from '../ButtonIcon';
 import Button from '../Button';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 // Never indent more than this number of pixels (even if we have the room).
 const DEFAULT_INDENTATION_SIZE = 12;
@@ -103,6 +104,7 @@ export default function Tree(props: Props) {
     function handleStopInspectingNative(didSelectNode) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
+        logEvent({event_name: 'select-element'});
       }
     }
     bridge.addListener('stopInspectingNative', handleStopInspectingNative);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index be98e05372aa..fd2cad6f31ba 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -16,6 +16,7 @@ import {
   TreeStateContext,
 } from '../Components/TreeContext';
 import {StoreContext} from '../context';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import type {ProfilingDataFrontend} from './types';
 
@@ -191,10 +192,10 @@ function ProfilerContextController({children}: Props) {
     });
   }
 
-  const startProfiling = useCallback(
-    () => store.profilerStore.startProfiling(),
-    [store],
-  );
+  const startProfiling = useCallback(() => {
+    logEvent({event_name: 'profiling-start'});
+    store.profilerStore.startProfiling();
+  }, [store]);
   const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
     store,
   ]);

From 697702bf341dcf63c47f6de9645970d45f6cf9ef Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 13 Jul 2022 11:45:53 -0400
Subject: [PATCH 1484/1603] Use recursion to traverse during "disappear layout"
 phase

This converts the "disappear layout" phase to iterate over its effects
recursively instead of iteratively. This makes it easier to track
contextual information, like whether a fiber is inside a hidden tree.

We already made this change for several other phases, like mutation and
layout mount. See 481dece for more context.
---
 .../src/ReactFiberCommitWork.new.js           | 149 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 149 +++++++++---------
 2 files changed, 142 insertions(+), 156 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 13ad7bd12e74..b7240c362dbf 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -2565,13 +2565,8 @@ function commitMutationEffectsOnFiber(
         if (isHidden) {
           if (!wasHidden) {
             if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-              nextEffect = offscreenBoundary;
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
-              }
+              // Disappear the layout effects of all the children
+              recursivelyTraverseDisappearLayoutEffects(offscreenBoundary);
             }
           }
         } else {
@@ -2696,87 +2691,85 @@ function recursivelyTraverseLayoutEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function disappearLayoutEffects_begin(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
-
-    // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case MemoComponent:
-      case SimpleMemoComponent: {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          fiber.mode & ProfileMode
-        ) {
-          try {
-            startLayoutEffectTimer();
-            commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
-          } finally {
-            recordLayoutEffectDuration(fiber);
-          }
-        } else {
-          commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
-        }
-        break;
-      }
-      case ClassComponent: {
-        // TODO (Offscreen) Check: flags & RefStatic
-        safelyDetachRef(fiber, fiber.return);
-
-        const instance = fiber.stateNode;
-        if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
-        }
-        break;
-      }
-      case HostComponent: {
-        safelyDetachRef(fiber, fiber.return);
-        break;
-      }
-      case OffscreenComponent: {
-        // Check if this is a
-        const isHidden = fiber.memoizedState !== null;
-        if (isHidden) {
-          // Nested Offscreen tree is already hidden. Don't disappear
-          // its effects.
-          disappearLayoutEffects_complete(subtreeRoot);
-          continue;
+function disappearLayoutEffects(finishedWork: Fiber) {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      // TODO (Offscreen) Check: flags & LayoutStatic
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          commitHookEffectListUnmount(
+            HookLayout,
+            finishedWork,
+            finishedWork.return,
+          );
+        } finally {
+          recordLayoutEffectDuration(finishedWork);
         }
-        break;
+      } else {
+        commitHookEffectListUnmount(
+          HookLayout,
+          finishedWork,
+          finishedWork.return,
+        );
       }
-    }
 
-    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
-    if (firstChild !== null) {
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      disappearLayoutEffects_complete(subtreeRoot);
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
     }
-  }
-}
+    case ClassComponent: {
+      // TODO (Offscreen) Check: flags & RefStatic
+      safelyDetachRef(finishedWork, finishedWork.return);
 
-function disappearLayoutEffects_complete(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
+      const instance = finishedWork.stateNode;
+      if (typeof instance.componentWillUnmount === 'function') {
+        safelyCallComponentWillUnmount(
+          finishedWork,
+          finishedWork.return,
+          instance,
+        );
+      }
 
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
     }
+    case HostComponent: {
+      // TODO (Offscreen) Check: flags & RefStatic
+      safelyDetachRef(finishedWork, finishedWork.return);
 
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+      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;
+    }
+    default: {
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
+    }
+  }
+}
 
-    nextEffect = fiber.return;
+function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  let child = parentFiber.child;
+  while (child !== null) {
+    disappearLayoutEffects(child);
+    child = child.sibling;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index a25a1ff3cd51..d0efa065bdd9 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -2565,13 +2565,8 @@ function commitMutationEffectsOnFiber(
         if (isHidden) {
           if (!wasHidden) {
             if ((offscreenBoundary.mode & ConcurrentMode) !== NoMode) {
-              nextEffect = offscreenBoundary;
-              let offscreenChild = offscreenBoundary.child;
-              while (offscreenChild !== null) {
-                nextEffect = offscreenChild;
-                disappearLayoutEffects_begin(offscreenChild);
-                offscreenChild = offscreenChild.sibling;
-              }
+              // Disappear the layout effects of all the children
+              recursivelyTraverseDisappearLayoutEffects(offscreenBoundary);
             }
           }
         } else {
@@ -2696,87 +2691,85 @@ function recursivelyTraverseLayoutEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function disappearLayoutEffects_begin(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
-
-    // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
-    switch (fiber.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case MemoComponent:
-      case SimpleMemoComponent: {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          fiber.mode & ProfileMode
-        ) {
-          try {
-            startLayoutEffectTimer();
-            commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
-          } finally {
-            recordLayoutEffectDuration(fiber);
-          }
-        } else {
-          commitHookEffectListUnmount(HookLayout, fiber, fiber.return);
-        }
-        break;
-      }
-      case ClassComponent: {
-        // TODO (Offscreen) Check: flags & RefStatic
-        safelyDetachRef(fiber, fiber.return);
-
-        const instance = fiber.stateNode;
-        if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
-        }
-        break;
-      }
-      case HostComponent: {
-        safelyDetachRef(fiber, fiber.return);
-        break;
-      }
-      case OffscreenComponent: {
-        // Check if this is a
-        const isHidden = fiber.memoizedState !== null;
-        if (isHidden) {
-          // Nested Offscreen tree is already hidden. Don't disappear
-          // its effects.
-          disappearLayoutEffects_complete(subtreeRoot);
-          continue;
+function disappearLayoutEffects(finishedWork: Fiber) {
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case MemoComponent:
+    case SimpleMemoComponent: {
+      // TODO (Offscreen) Check: flags & LayoutStatic
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          commitHookEffectListUnmount(
+            HookLayout,
+            finishedWork,
+            finishedWork.return,
+          );
+        } finally {
+          recordLayoutEffectDuration(finishedWork);
         }
-        break;
+      } else {
+        commitHookEffectListUnmount(
+          HookLayout,
+          finishedWork,
+          finishedWork.return,
+        );
       }
-    }
 
-    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
-    if (firstChild !== null) {
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      disappearLayoutEffects_complete(subtreeRoot);
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
     }
-  }
-}
+    case ClassComponent: {
+      // TODO (Offscreen) Check: flags & RefStatic
+      safelyDetachRef(finishedWork, finishedWork.return);
 
-function disappearLayoutEffects_complete(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
+      const instance = finishedWork.stateNode;
+      if (typeof instance.componentWillUnmount === 'function') {
+        safelyCallComponentWillUnmount(
+          finishedWork,
+          finishedWork.return,
+          instance,
+        );
+      }
 
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
     }
+    case HostComponent: {
+      // TODO (Offscreen) Check: flags & RefStatic
+      safelyDetachRef(finishedWork, finishedWork.return);
 
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+      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;
+    }
+    default: {
+      recursivelyTraverseDisappearLayoutEffects(finishedWork);
+      break;
+    }
+  }
+}
 
-    nextEffect = fiber.return;
+function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  let child = parentFiber.child;
+  while (child !== null) {
+    disappearLayoutEffects(child);
+    child = child.sibling;
   }
 }
 

From 41287d44753f0ea03d54bd8296d733ff82dfe336 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 14 Jul 2022 17:55:28 -0400
Subject: [PATCH 1485/1603] Use recursion to traverse during "reappear layout"
 phase

This converts the "reappear layout" phase to iterate over its effects
recursively instead of iteratively. This makes it easier to track
contextual information, like whether a fiber is inside a hidden tree.

We already made this change for several other phases, like mutation and
layout mount. See 481dece for more context.
---
 .../src/ReactFiberCommitWork.new.js           | 166 ++++++++----------
 .../src/ReactFiberCommitWork.old.js           | 166 ++++++++----------
 2 files changed, 154 insertions(+), 178 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index b7240c362dbf..406aa4b0a9c2 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1132,11 +1132,12 @@ function commitLayoutEffectOnFiber(
           if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
             // This is the root of a reappearing boundary. Turn its layout
             // effects back on.
-            // TODO: Convert this to use recursion
-            nextEffect = finishedWork;
-            reappearLayoutEffects_begin(finishedWork);
+            recursivelyTraverseReappearLayoutEffects(finishedWork);
           }
 
+          // TODO: We shouldn't traverse twice when reappearing layout effects.
+          // Move this into the else block of the above if statement, and modify
+          // reappearLayoutEffects to fire regular layout effects, too.
           recursivelyTraverseLayoutEffects(
             finishedRoot,
             finishedWork,
@@ -1165,48 +1166,6 @@ function commitLayoutEffectOnFiber(
   }
 }
 
-function reappearLayoutEffectsOnFiber(node: Fiber) {
-  // Turn on layout effects in a tree that previously disappeared.
-  // TODO (Offscreen) Check: flags & LayoutStatic
-  switch (node.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        node.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          safelyCallCommitHookLayoutEffectListMount(node, node.return);
-        } finally {
-          recordLayoutEffectDuration(node);
-        }
-      } else {
-        safelyCallCommitHookLayoutEffectListMount(node, node.return);
-      }
-      break;
-    }
-    case ClassComponent: {
-      const instance = node.stateNode;
-      if (typeof instance.componentDidMount === 'function') {
-        safelyCallComponentDidMount(node, node.return, instance);
-      }
-      safelyAttachRef(node, node.return);
-      const updateQueue: UpdateQueue<*> | null = (node.updateQueue: any);
-      if (updateQueue !== null) {
-        commitHiddenCallbacks(updateQueue, instance);
-      }
-      break;
-    }
-    case HostComponent: {
-      safelyAttachRef(node, node.return);
-      break;
-    }
-  }
-}
-
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
@@ -2773,60 +2732,89 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
   }
 }
 
-function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
+function reappearLayoutEffects(finishedWork: Fiber) {
+  // Turn on layout effects in a tree that previously disappeared.
+  // TODO (Offscreen) Check: flags & LayoutStatic
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
 
-    if (fiber.tag === OffscreenComponent) {
-      const isHidden = fiber.memoizedState !== null;
-      if (isHidden) {
-        // Nested Offscreen tree is still hidden. Don't re-appear its effects.
-        reappearLayoutEffects_complete(subtreeRoot);
-        continue;
+      // TODO: Check for LayoutStatic flag
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          safelyCallCommitHookLayoutEffectListMount(
+            finishedWork,
+            finishedWork.return,
+          );
+        } finally {
+          recordLayoutEffectDuration(finishedWork);
+        }
+      } else {
+        safelyCallCommitHookLayoutEffectListMount(
+          finishedWork,
+          finishedWork.return,
+        );
       }
+      break;
     }
+    case ClassComponent: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
 
-    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
-    if (firstChild !== null) {
-      // This node may have been reused from a previous render, so we can't
-      // assume its return pointer is correct.
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      reappearLayoutEffects_complete(subtreeRoot);
+      const instance = finishedWork.stateNode;
+      // TODO: Check for LayoutStatic flag
+      if (typeof instance.componentDidMount === 'function') {
+        safelyCallComponentDidMount(
+          finishedWork,
+          finishedWork.return,
+          instance,
+        );
+      }
+      // TODO: Check for RefStatic flag
+      safelyAttachRef(finishedWork, finishedWork.return);
+      const updateQueue: UpdateQueue<
+        *,
+      > | null = (finishedWork.updateQueue: any);
+      if (updateQueue !== null) {
+        commitHiddenCallbacks(updateQueue, instance);
+      }
+      break;
     }
-  }
-}
-
-function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
+    case HostComponent: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
 
-    // TODO (Offscreen) Check: flags & LayoutStatic
-    setCurrentDebugFiberInDEV(fiber);
-    try {
-      reappearLayoutEffectsOnFiber(fiber);
-    } catch (error) {
-      captureCommitPhaseError(fiber, fiber.return, error);
+      // TODO: Check for RefStatic flag
+      safelyAttachRef(finishedWork, finishedWork.return);
+      break;
     }
-    resetCurrentDebugFiberInDEV();
-
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
+    case OffscreenComponent: {
+      const isHidden = finishedWork.memoizedState !== null;
+      if (isHidden) {
+        // Nested Offscreen tree is still hidden. Don't re-appear its effects.
+      } else {
+        recursivelyTraverseReappearLayoutEffects(finishedWork);
+      }
+      break;
     }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      // This node may have been reused from a previous render, so we can't
-      // assume its return pointer is correct.
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+    default: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      break;
     }
+  }
+}
 
-    nextEffect = fiber.return;
+function recursivelyTraverseReappearLayoutEffects(parentFiber: Fiber) {
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  let child = parentFiber.child;
+  while (child !== null) {
+    reappearLayoutEffects(child);
+    child = child.sibling;
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index d0efa065bdd9..e1256e3fc842 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1132,11 +1132,12 @@ function commitLayoutEffectOnFiber(
           if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
             // This is the root of a reappearing boundary. Turn its layout
             // effects back on.
-            // TODO: Convert this to use recursion
-            nextEffect = finishedWork;
-            reappearLayoutEffects_begin(finishedWork);
+            recursivelyTraverseReappearLayoutEffects(finishedWork);
           }
 
+          // TODO: We shouldn't traverse twice when reappearing layout effects.
+          // Move this into the else block of the above if statement, and modify
+          // reappearLayoutEffects to fire regular layout effects, too.
           recursivelyTraverseLayoutEffects(
             finishedRoot,
             finishedWork,
@@ -1165,48 +1166,6 @@ function commitLayoutEffectOnFiber(
   }
 }
 
-function reappearLayoutEffectsOnFiber(node: Fiber) {
-  // Turn on layout effects in a tree that previously disappeared.
-  // TODO (Offscreen) Check: flags & LayoutStatic
-  switch (node.tag) {
-    case FunctionComponent:
-    case ForwardRef:
-    case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        node.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          safelyCallCommitHookLayoutEffectListMount(node, node.return);
-        } finally {
-          recordLayoutEffectDuration(node);
-        }
-      } else {
-        safelyCallCommitHookLayoutEffectListMount(node, node.return);
-      }
-      break;
-    }
-    case ClassComponent: {
-      const instance = node.stateNode;
-      if (typeof instance.componentDidMount === 'function') {
-        safelyCallComponentDidMount(node, node.return, instance);
-      }
-      safelyAttachRef(node, node.return);
-      const updateQueue: UpdateQueue<*> | null = (node.updateQueue: any);
-      if (updateQueue !== null) {
-        commitHiddenCallbacks(updateQueue, instance);
-      }
-      break;
-    }
-    case HostComponent: {
-      safelyAttachRef(node, node.return);
-      break;
-    }
-  }
-}
-
 function commitTransitionProgress(offscreenFiber: Fiber) {
   if (enableTransitionTracing) {
     // This function adds suspense boundaries to the root
@@ -2773,60 +2732,89 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
   }
 }
 
-function reappearLayoutEffects_begin(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
-    const firstChild = fiber.child;
+function reappearLayoutEffects(finishedWork: Fiber) {
+  // Turn on layout effects in a tree that previously disappeared.
+  // TODO (Offscreen) Check: flags & LayoutStatic
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
 
-    if (fiber.tag === OffscreenComponent) {
-      const isHidden = fiber.memoizedState !== null;
-      if (isHidden) {
-        // Nested Offscreen tree is still hidden. Don't re-appear its effects.
-        reappearLayoutEffects_complete(subtreeRoot);
-        continue;
+      // TODO: Check for LayoutStatic flag
+      if (
+        enableProfilerTimer &&
+        enableProfilerCommitHooks &&
+        finishedWork.mode & ProfileMode
+      ) {
+        try {
+          startLayoutEffectTimer();
+          safelyCallCommitHookLayoutEffectListMount(
+            finishedWork,
+            finishedWork.return,
+          );
+        } finally {
+          recordLayoutEffectDuration(finishedWork);
+        }
+      } else {
+        safelyCallCommitHookLayoutEffectListMount(
+          finishedWork,
+          finishedWork.return,
+        );
       }
+      break;
     }
+    case ClassComponent: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
 
-    // TODO (Offscreen) Check: subtreeFlags & LayoutStatic
-    if (firstChild !== null) {
-      // This node may have been reused from a previous render, so we can't
-      // assume its return pointer is correct.
-      firstChild.return = fiber;
-      nextEffect = firstChild;
-    } else {
-      reappearLayoutEffects_complete(subtreeRoot);
+      const instance = finishedWork.stateNode;
+      // TODO: Check for LayoutStatic flag
+      if (typeof instance.componentDidMount === 'function') {
+        safelyCallComponentDidMount(
+          finishedWork,
+          finishedWork.return,
+          instance,
+        );
+      }
+      // TODO: Check for RefStatic flag
+      safelyAttachRef(finishedWork, finishedWork.return);
+      const updateQueue: UpdateQueue<
+        *,
+      > | null = (finishedWork.updateQueue: any);
+      if (updateQueue !== null) {
+        commitHiddenCallbacks(updateQueue, instance);
+      }
+      break;
     }
-  }
-}
-
-function reappearLayoutEffects_complete(subtreeRoot: Fiber) {
-  while (nextEffect !== null) {
-    const fiber = nextEffect;
+    case HostComponent: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
 
-    // TODO (Offscreen) Check: flags & LayoutStatic
-    setCurrentDebugFiberInDEV(fiber);
-    try {
-      reappearLayoutEffectsOnFiber(fiber);
-    } catch (error) {
-      captureCommitPhaseError(fiber, fiber.return, error);
+      // TODO: Check for RefStatic flag
+      safelyAttachRef(finishedWork, finishedWork.return);
+      break;
     }
-    resetCurrentDebugFiberInDEV();
-
-    if (fiber === subtreeRoot) {
-      nextEffect = null;
-      return;
+    case OffscreenComponent: {
+      const isHidden = finishedWork.memoizedState !== null;
+      if (isHidden) {
+        // Nested Offscreen tree is still hidden. Don't re-appear its effects.
+      } else {
+        recursivelyTraverseReappearLayoutEffects(finishedWork);
+      }
+      break;
     }
-
-    const sibling = fiber.sibling;
-    if (sibling !== null) {
-      // This node may have been reused from a previous render, so we can't
-      // assume its return pointer is correct.
-      sibling.return = fiber.return;
-      nextEffect = sibling;
-      return;
+    default: {
+      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      break;
     }
+  }
+}
 
-    nextEffect = fiber.return;
+function recursivelyTraverseReappearLayoutEffects(parentFiber: Fiber) {
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  let child = parentFiber.child;
+  while (child !== null) {
+    reappearLayoutEffects(child);
+    child = child.sibling;
   }
 }
 

From 679eea3282967742473910aed1209ac8c21f2a67 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 14 Jul 2022 12:29:18 -0400
Subject: [PATCH 1486/1603] Extract layout effects to separate functions

There's a lot of duplicated code between commitLayoutEffectOnFiber and the
"reappear layout effects" path that happens when an Offscreen tree goes from
hidden back to visible. I'm going to refactor these to share more of the same
code. As a first step, this extracts the shared parts into separate functions.

This may not save much on code size because Closure will likely inline some of
it, anyway, but it makes it harder for the two paths to accidentally diverge.
---
 .../src/ReactFiberCommitWork.new.js           | 597 +++++++++---------
 .../src/ReactFiberCommitWork.old.js           | 597 +++++++++---------
 2 files changed, 588 insertions(+), 606 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 406aa4b0a9c2..0e723f275d3a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -706,6 +706,272 @@ export function commitPassiveEffectDurations(
   }
 }
 
+function commitHookLayoutEffects(finishedWork: Fiber) {
+  // 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 (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    finishedWork.mode & ProfileMode
+  ) {
+    try {
+      startLayoutEffectTimer();
+      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+    recordLayoutEffectDuration(finishedWork);
+  } else {
+    try {
+      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+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 === finishedWork.elementType &&
+        !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 (
+      enableProfilerTimer &&
+      enableProfilerCommitHooks &&
+      finishedWork.mode & ProfileMode
+    ) {
+      try {
+        startLayoutEffectTimer();
+        instance.componentDidMount();
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+      recordLayoutEffectDuration(finishedWork);
+    } else {
+      try {
+        instance.componentDidMount();
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+    }
+  } else {
+    const prevProps =
+      finishedWork.elementType === finishedWork.type
+        ? current.memoizedProps
+        : resolveDefaultProps(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 === finishedWork.elementType &&
+        !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 (
+      enableProfilerTimer &&
+      enableProfilerCommitHooks &&
+      finishedWork.mode & ProfileMode
+    ) {
+      try {
+        startLayoutEffectTimer();
+        instance.componentDidUpdate(
+          prevProps,
+          prevState,
+          instance.__reactInternalSnapshotBeforeUpdate,
+        );
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+      recordLayoutEffectDuration(finishedWork);
+    } else {
+      try {
+        instance.componentDidUpdate(
+          prevProps,
+          prevState,
+          instance.__reactInternalSnapshotBeforeUpdate,
+        );
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+    }
+  }
+}
+
+function commitClassCallbacks(finishedWork: Fiber, current: Fiber | null) {
+  // 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<*> | null = (finishedWork.updateQueue: any);
+  if (updateQueue !== null) {
+    const instance = finishedWork.stateNode;
+    if (__DEV__) {
+      if (
+        finishedWork.type === finishedWork.elementType &&
+        !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 {
+      commitCallbacks(updateQueue, instance);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+function commitHostComponentMount(finishedWork: Fiber, current: Fiber | null) {
+  const type = finishedWork.type;
+  const props = finishedWork.memoizedProps;
+  const instance: Instance = finishedWork.stateNode;
+  try {
+    commitMount(instance, type, props, finishedWork);
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+function commitProfilerUpdate(finishedWork: Fiber, current: Fiber | null) {
+  if (enableProfilerTimer) {
+    try {
+      const {onCommit, onRender} = finishedWork.memoizedProps;
+      const {effectDuration} = finishedWork.stateNode;
+
+      const commitTime = getCommitTime();
+
+      let phase = current === null ? 'mount' : 'update';
+      if (enableProfilerNestedUpdatePhase) {
+        if (isCurrentUpdateNested()) {
+          phase = 'nested-update';
+        }
+      }
+
+      if (typeof onRender === 'function') {
+        onRender(
+          finishedWork.memoizedProps.id,
+          phase,
+          finishedWork.actualDuration,
+          finishedWork.treeBaseDuration,
+          finishedWork.actualStartTime,
+          commitTime,
+        );
+      }
+
+      if (enableProfilerCommitHooks) {
+        if (typeof onCommit === 'function') {
+          onCommit(
+            finishedWork.memoizedProps.id,
+            phase,
+            effectDuration,
+            commitTime,
+          );
+        }
+
+        // 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.
+        enqueuePendingPassiveProfilerEffect(finishedWork);
+
+        // 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.
+        let parentFiber = finishedWork.return;
+        outer: while (parentFiber !== null) {
+          switch (parentFiber.tag) {
+            case HostRoot:
+              const root = parentFiber.stateNode;
+              root.effectDuration += effectDuration;
+              break outer;
+            case Profiler:
+              const parentStateNode = parentFiber.stateNode;
+              parentStateNode.effectDuration += effectDuration;
+              break outer;
+          }
+          parentFiber = parentFiber.return;
+        }
+      }
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
 function commitLayoutEffectOnFiber(
   finishedRoot: FiberRoot,
   current: Fiber | null,
@@ -724,35 +990,7 @@ function commitLayoutEffectOnFiber(
       );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
-          // 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 (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            finishedWork.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              commitHookEffectListMount(
-                HookLayout | HookHasEffect,
-                finishedWork,
-              );
-            } catch (error) {
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
-            }
-            recordLayoutEffectDuration(finishedWork);
-          } else {
-            try {
-              commitHookEffectListMount(
-                HookLayout | HookHasEffect,
-                finishedWork,
-              );
-            } catch (error) {
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
-            }
-          }
+          commitHookLayoutEffects(finishedWork);
         }
       }
       break;
@@ -765,193 +1003,17 @@ function commitLayoutEffectOnFiber(
       );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
-          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 === finishedWork.elementType &&
-                !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 (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
-                instance.componentDidMount();
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-              recordLayoutEffectDuration(finishedWork);
-            } else {
-              try {
-                instance.componentDidMount();
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-            }
-          } else {
-            const prevProps =
-              finishedWork.elementType === finishedWork.type
-                ? current.memoizedProps
-                : resolveDefaultProps(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 === finishedWork.elementType &&
-                !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 (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
-                instance.componentDidUpdate(
-                  prevProps,
-                  prevState,
-                  instance.__reactInternalSnapshotBeforeUpdate,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-              recordLayoutEffectDuration(finishedWork);
-            } else {
-              try {
-                instance.componentDidUpdate(
-                  prevProps,
-                  prevState,
-                  instance.__reactInternalSnapshotBeforeUpdate,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-            }
-          }
+          commitClassLayoutLifecycles(finishedWork, current);
         }
       }
 
       if (flags & Callback) {
-        // 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<
-          *,
-        > | null = (finishedWork.updateQueue: any);
-        if (updateQueue !== null) {
-          const instance = finishedWork.stateNode;
-          if (__DEV__) {
-            if (
-              finishedWork.type === finishedWork.elementType &&
-              !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 {
-            commitCallbacks(updateQueue, instance);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+        commitClassCallbacks(finishedWork, current);
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          try {
-            commitAttachRef(finishedWork);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
+          safelyAttachRef(finishedWork, finishedWork.return);
         }
       }
       break;
@@ -995,31 +1057,18 @@ function commitLayoutEffectOnFiber(
         finishedWork,
         committedLanes,
       );
-      if (flags & Update) {
-        const instance: Instance = finishedWork.stateNode;
-
-        // 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 && finishedWork.flags & Update) {
-          const type = finishedWork.type;
-          const props = finishedWork.memoizedProps;
-          try {
-            commitMount(instance, type, props, finishedWork);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+
+      // 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 && flags & Update) {
+        commitHostComponentMount(finishedWork, current);
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          try {
-            commitAttachRef(finishedWork);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
+          safelyAttachRef(finishedWork, finishedWork.return);
         }
       }
       break;
@@ -1030,68 +1079,10 @@ function commitLayoutEffectOnFiber(
         finishedWork,
         committedLanes,
       );
-      if (enableProfilerTimer) {
-        if (flags & Update) {
-          try {
-            const {onCommit, onRender} = finishedWork.memoizedProps;
-            const {effectDuration} = finishedWork.stateNode;
-
-            const commitTime = getCommitTime();
-
-            let phase = current === null ? 'mount' : 'update';
-            if (enableProfilerNestedUpdatePhase) {
-              if (isCurrentUpdateNested()) {
-                phase = 'nested-update';
-              }
-            }
-
-            if (typeof onRender === 'function') {
-              onRender(
-                finishedWork.memoizedProps.id,
-                phase,
-                finishedWork.actualDuration,
-                finishedWork.treeBaseDuration,
-                finishedWork.actualStartTime,
-                commitTime,
-              );
-            }
-
-            if (enableProfilerCommitHooks) {
-              if (typeof onCommit === 'function') {
-                onCommit(
-                  finishedWork.memoizedProps.id,
-                  phase,
-                  effectDuration,
-                  commitTime,
-                );
-              }
-
-              // 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.
-              enqueuePendingPassiveProfilerEffect(finishedWork);
-
-              // 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.
-              let parentFiber = finishedWork.return;
-              outer: while (parentFiber !== null) {
-                switch (parentFiber.tag) {
-                  case HostRoot:
-                    const root = parentFiber.stateNode;
-                    root.effectDuration += effectDuration;
-                    break outer;
-                  case Profiler:
-                    const parentStateNode = parentFiber.stateNode;
-                    parentStateNode.effectDuration += effectDuration;
-                    break outer;
-                }
-                parentFiber = parentFiber.return;
-              }
-            }
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+      // TODO: Should this fire inside an offscreen tree? Or should it wait to
+      // fire when the tree becomes visible again.
+      if (flags & Update) {
+        commitProfilerUpdate(finishedWork, current);
       }
       break;
     }
@@ -1102,11 +1093,7 @@ function commitLayoutEffectOnFiber(
         committedLanes,
       );
       if (flags & Update) {
-        try {
-          commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-        } catch (error) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error);
-        }
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
       }
       break;
     }
@@ -2079,15 +2066,19 @@ function commitSuspenseHydrationCallbacks(
       if (prevState !== null) {
         const suspenseInstance = prevState.dehydrated;
         if (suspenseInstance !== null) {
-          commitHydratedSuspenseInstance(suspenseInstance);
-          if (enableSuspenseCallback) {
-            const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-            if (hydrationCallbacks !== null) {
-              const onHydrated = hydrationCallbacks.onHydrated;
-              if (onHydrated) {
-                onHydrated(suspenseInstance);
+          try {
+            commitHydratedSuspenseInstance(suspenseInstance);
+            if (enableSuspenseCallback) {
+              const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+              if (hydrationCallbacks !== null) {
+                const onHydrated = hydrationCallbacks.onHydrated;
+                if (onHydrated) {
+                  onHydrated(suspenseInstance);
+                }
               }
             }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index e1256e3fc842..13ae7fef3278 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -706,6 +706,272 @@ export function commitPassiveEffectDurations(
   }
 }
 
+function commitHookLayoutEffects(finishedWork: Fiber) {
+  // 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 (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    finishedWork.mode & ProfileMode
+  ) {
+    try {
+      startLayoutEffectTimer();
+      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+    recordLayoutEffectDuration(finishedWork);
+  } else {
+    try {
+      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+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 === finishedWork.elementType &&
+        !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 (
+      enableProfilerTimer &&
+      enableProfilerCommitHooks &&
+      finishedWork.mode & ProfileMode
+    ) {
+      try {
+        startLayoutEffectTimer();
+        instance.componentDidMount();
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+      recordLayoutEffectDuration(finishedWork);
+    } else {
+      try {
+        instance.componentDidMount();
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+    }
+  } else {
+    const prevProps =
+      finishedWork.elementType === finishedWork.type
+        ? current.memoizedProps
+        : resolveDefaultProps(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 === finishedWork.elementType &&
+        !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 (
+      enableProfilerTimer &&
+      enableProfilerCommitHooks &&
+      finishedWork.mode & ProfileMode
+    ) {
+      try {
+        startLayoutEffectTimer();
+        instance.componentDidUpdate(
+          prevProps,
+          prevState,
+          instance.__reactInternalSnapshotBeforeUpdate,
+        );
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+      recordLayoutEffectDuration(finishedWork);
+    } else {
+      try {
+        instance.componentDidUpdate(
+          prevProps,
+          prevState,
+          instance.__reactInternalSnapshotBeforeUpdate,
+        );
+      } catch (error) {
+        captureCommitPhaseError(finishedWork, finishedWork.return, error);
+      }
+    }
+  }
+}
+
+function commitClassCallbacks(finishedWork: Fiber, current: Fiber | null) {
+  // 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<*> | null = (finishedWork.updateQueue: any);
+  if (updateQueue !== null) {
+    const instance = finishedWork.stateNode;
+    if (__DEV__) {
+      if (
+        finishedWork.type === finishedWork.elementType &&
+        !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 {
+      commitCallbacks(updateQueue, instance);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+function commitHostComponentMount(finishedWork: Fiber, current: Fiber | null) {
+  const type = finishedWork.type;
+  const props = finishedWork.memoizedProps;
+  const instance: Instance = finishedWork.stateNode;
+  try {
+    commitMount(instance, type, props, finishedWork);
+  } catch (error) {
+    captureCommitPhaseError(finishedWork, finishedWork.return, error);
+  }
+}
+
+function commitProfilerUpdate(finishedWork: Fiber, current: Fiber | null) {
+  if (enableProfilerTimer) {
+    try {
+      const {onCommit, onRender} = finishedWork.memoizedProps;
+      const {effectDuration} = finishedWork.stateNode;
+
+      const commitTime = getCommitTime();
+
+      let phase = current === null ? 'mount' : 'update';
+      if (enableProfilerNestedUpdatePhase) {
+        if (isCurrentUpdateNested()) {
+          phase = 'nested-update';
+        }
+      }
+
+      if (typeof onRender === 'function') {
+        onRender(
+          finishedWork.memoizedProps.id,
+          phase,
+          finishedWork.actualDuration,
+          finishedWork.treeBaseDuration,
+          finishedWork.actualStartTime,
+          commitTime,
+        );
+      }
+
+      if (enableProfilerCommitHooks) {
+        if (typeof onCommit === 'function') {
+          onCommit(
+            finishedWork.memoizedProps.id,
+            phase,
+            effectDuration,
+            commitTime,
+          );
+        }
+
+        // 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.
+        enqueuePendingPassiveProfilerEffect(finishedWork);
+
+        // 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.
+        let parentFiber = finishedWork.return;
+        outer: while (parentFiber !== null) {
+          switch (parentFiber.tag) {
+            case HostRoot:
+              const root = parentFiber.stateNode;
+              root.effectDuration += effectDuration;
+              break outer;
+            case Profiler:
+              const parentStateNode = parentFiber.stateNode;
+              parentStateNode.effectDuration += effectDuration;
+              break outer;
+          }
+          parentFiber = parentFiber.return;
+        }
+      }
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
 function commitLayoutEffectOnFiber(
   finishedRoot: FiberRoot,
   current: Fiber | null,
@@ -724,35 +990,7 @@ function commitLayoutEffectOnFiber(
       );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
-          // 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 (
-            enableProfilerTimer &&
-            enableProfilerCommitHooks &&
-            finishedWork.mode & ProfileMode
-          ) {
-            try {
-              startLayoutEffectTimer();
-              commitHookEffectListMount(
-                HookLayout | HookHasEffect,
-                finishedWork,
-              );
-            } catch (error) {
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
-            }
-            recordLayoutEffectDuration(finishedWork);
-          } else {
-            try {
-              commitHookEffectListMount(
-                HookLayout | HookHasEffect,
-                finishedWork,
-              );
-            } catch (error) {
-              captureCommitPhaseError(finishedWork, finishedWork.return, error);
-            }
-          }
+          commitHookLayoutEffects(finishedWork);
         }
       }
       break;
@@ -765,193 +1003,17 @@ function commitLayoutEffectOnFiber(
       );
       if (flags & Update) {
         if (!offscreenSubtreeWasHidden) {
-          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 === finishedWork.elementType &&
-                !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 (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
-                instance.componentDidMount();
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-              recordLayoutEffectDuration(finishedWork);
-            } else {
-              try {
-                instance.componentDidMount();
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-            }
-          } else {
-            const prevProps =
-              finishedWork.elementType === finishedWork.type
-                ? current.memoizedProps
-                : resolveDefaultProps(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 === finishedWork.elementType &&
-                !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 (
-              enableProfilerTimer &&
-              enableProfilerCommitHooks &&
-              finishedWork.mode & ProfileMode
-            ) {
-              try {
-                startLayoutEffectTimer();
-                instance.componentDidUpdate(
-                  prevProps,
-                  prevState,
-                  instance.__reactInternalSnapshotBeforeUpdate,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-              recordLayoutEffectDuration(finishedWork);
-            } else {
-              try {
-                instance.componentDidUpdate(
-                  prevProps,
-                  prevState,
-                  instance.__reactInternalSnapshotBeforeUpdate,
-                );
-              } catch (error) {
-                captureCommitPhaseError(
-                  finishedWork,
-                  finishedWork.return,
-                  error,
-                );
-              }
-            }
-          }
+          commitClassLayoutLifecycles(finishedWork, current);
         }
       }
 
       if (flags & Callback) {
-        // 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<
-          *,
-        > | null = (finishedWork.updateQueue: any);
-        if (updateQueue !== null) {
-          const instance = finishedWork.stateNode;
-          if (__DEV__) {
-            if (
-              finishedWork.type === finishedWork.elementType &&
-              !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 {
-            commitCallbacks(updateQueue, instance);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+        commitClassCallbacks(finishedWork, current);
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          try {
-            commitAttachRef(finishedWork);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
+          safelyAttachRef(finishedWork, finishedWork.return);
         }
       }
       break;
@@ -995,31 +1057,18 @@ function commitLayoutEffectOnFiber(
         finishedWork,
         committedLanes,
       );
-      if (flags & Update) {
-        const instance: Instance = finishedWork.stateNode;
-
-        // 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 && finishedWork.flags & Update) {
-          const type = finishedWork.type;
-          const props = finishedWork.memoizedProps;
-          try {
-            commitMount(instance, type, props, finishedWork);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+
+      // 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 && flags & Update) {
+        commitHostComponentMount(finishedWork, current);
       }
 
       if (flags & Ref) {
         if (!offscreenSubtreeWasHidden) {
-          try {
-            commitAttachRef(finishedWork);
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
+          safelyAttachRef(finishedWork, finishedWork.return);
         }
       }
       break;
@@ -1030,68 +1079,10 @@ function commitLayoutEffectOnFiber(
         finishedWork,
         committedLanes,
       );
-      if (enableProfilerTimer) {
-        if (flags & Update) {
-          try {
-            const {onCommit, onRender} = finishedWork.memoizedProps;
-            const {effectDuration} = finishedWork.stateNode;
-
-            const commitTime = getCommitTime();
-
-            let phase = current === null ? 'mount' : 'update';
-            if (enableProfilerNestedUpdatePhase) {
-              if (isCurrentUpdateNested()) {
-                phase = 'nested-update';
-              }
-            }
-
-            if (typeof onRender === 'function') {
-              onRender(
-                finishedWork.memoizedProps.id,
-                phase,
-                finishedWork.actualDuration,
-                finishedWork.treeBaseDuration,
-                finishedWork.actualStartTime,
-                commitTime,
-              );
-            }
-
-            if (enableProfilerCommitHooks) {
-              if (typeof onCommit === 'function') {
-                onCommit(
-                  finishedWork.memoizedProps.id,
-                  phase,
-                  effectDuration,
-                  commitTime,
-                );
-              }
-
-              // 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.
-              enqueuePendingPassiveProfilerEffect(finishedWork);
-
-              // 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.
-              let parentFiber = finishedWork.return;
-              outer: while (parentFiber !== null) {
-                switch (parentFiber.tag) {
-                  case HostRoot:
-                    const root = parentFiber.stateNode;
-                    root.effectDuration += effectDuration;
-                    break outer;
-                  case Profiler:
-                    const parentStateNode = parentFiber.stateNode;
-                    parentStateNode.effectDuration += effectDuration;
-                    break outer;
-                }
-                parentFiber = parentFiber.return;
-              }
-            }
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+      // TODO: Should this fire inside an offscreen tree? Or should it wait to
+      // fire when the tree becomes visible again.
+      if (flags & Update) {
+        commitProfilerUpdate(finishedWork, current);
       }
       break;
     }
@@ -1102,11 +1093,7 @@ function commitLayoutEffectOnFiber(
         committedLanes,
       );
       if (flags & Update) {
-        try {
-          commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
-        } catch (error) {
-          captureCommitPhaseError(finishedWork, finishedWork.return, error);
-        }
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
       }
       break;
     }
@@ -2079,15 +2066,19 @@ function commitSuspenseHydrationCallbacks(
       if (prevState !== null) {
         const suspenseInstance = prevState.dehydrated;
         if (suspenseInstance !== null) {
-          commitHydratedSuspenseInstance(suspenseInstance);
-          if (enableSuspenseCallback) {
-            const hydrationCallbacks = finishedRoot.hydrationCallbacks;
-            if (hydrationCallbacks !== null) {
-              const onHydrated = hydrationCallbacks.onHydrated;
-              if (onHydrated) {
-                onHydrated(suspenseInstance);
+          try {
+            commitHydratedSuspenseInstance(suspenseInstance);
+            if (enableSuspenseCallback) {
+              const hydrationCallbacks = finishedRoot.hydrationCallbacks;
+              if (hydrationCallbacks !== null) {
+                const onHydrated = hydrationCallbacks.onHydrated;
+                if (onHydrated) {
+                  onHydrated(suspenseInstance);
+                }
               }
             }
+          } catch (error) {
+            captureCommitPhaseError(finishedWork, finishedWork.return, error);
           }
         }
       }

From cfb6cfa25031992569a328530b4fb8612a5d377b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 15 Jul 2022 12:49:30 -0400
Subject: [PATCH 1487/1603] Reused components commit with timing as new ones

When an Offscreen tree goes from hidden -> visible, the tree may include
both reused components that were unmounted when the tree was hidden, and
also brand new components that didn't exist in the hidden tree.

Currently when this happens, we commit all the reused components'
effects first, before committing the new ones, using two separate
traversals of the tree.

Instead, we should fire all the effects with the same timing as if it
were a completely new tree. See the test I wrote for an example.

This is also more efficient because we only need to traverse the
tree once.
---
 .../src/ReactFiberCommitWork.new.js           | 256 +++++++++++-------
 .../src/ReactFiberCommitWork.old.js           | 256 +++++++++++-------
 .../src/__tests__/ReactOffscreen-test.js      | 171 ++++++++++++
 3 files changed, 489 insertions(+), 194 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 0e723f275d3a..200e661c7017 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -225,18 +225,6 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
   }
 };
 
-// Capture errors so they don't interrupt mounting.
-function safelyCallCommitHookLayoutEffectListMount(
-  current: Fiber,
-  nearestMountedAncestor: Fiber | null,
-) {
-  try {
-    commitHookEffectListMount(HookLayout, current);
-  } catch (error) {
-    captureCommitPhaseError(current, nearestMountedAncestor, error);
-  }
-}
-
 // Capture errors so they don't interrupt unmounting.
 function safelyCallComponentWillUnmount(
   current: Fiber,
@@ -250,19 +238,6 @@ function safelyCallComponentWillUnmount(
   }
 }
 
-// Capture errors so they don't interrupt mounting.
-function safelyCallComponentDidMount(
-  current: Fiber,
-  nearestMountedAncestor: Fiber | null,
-  instance: any,
-) {
-  try {
-    instance.componentDidMount();
-  } catch (error) {
-    captureCommitPhaseError(current, nearestMountedAncestor, error);
-  }
-}
-
 // Capture errors so they don't interrupt mounting.
 function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   try {
@@ -706,7 +681,7 @@ export function commitPassiveEffectDurations(
   }
 }
 
-function commitHookLayoutEffects(finishedWork: Fiber) {
+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
@@ -718,14 +693,14 @@ function commitHookLayoutEffects(finishedWork: Fiber) {
   ) {
     try {
       startLayoutEffectTimer();
-      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+      commitHookEffectListMount(hookFlags, finishedWork);
     } catch (error) {
       captureCommitPhaseError(finishedWork, finishedWork.return, error);
     }
     recordLayoutEffectDuration(finishedWork);
   } else {
     try {
-      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+      commitHookEffectListMount(hookFlags, finishedWork);
     } catch (error) {
       captureCommitPhaseError(finishedWork, finishedWork.return, error);
     }
@@ -853,7 +828,7 @@ function commitClassLayoutLifecycles(
   }
 }
 
-function commitClassCallbacks(finishedWork: Fiber, current: Fiber | null) {
+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<*> | null = (finishedWork.updateQueue: any);
@@ -897,7 +872,7 @@ function commitClassCallbacks(finishedWork: Fiber, current: Fiber | null) {
   }
 }
 
-function commitHostComponentMount(finishedWork: Fiber, current: Fiber | null) {
+function commitHostComponentMount(finishedWork: Fiber) {
   const type = finishedWork.type;
   const props = finishedWork.memoizedProps;
   const instance: Instance = finishedWork.stateNode;
@@ -978,6 +953,8 @@ function commitLayoutEffectOnFiber(
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
+  // 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:
@@ -989,9 +966,7 @@ function commitLayoutEffectOnFiber(
         committedLanes,
       );
       if (flags & Update) {
-        if (!offscreenSubtreeWasHidden) {
-          commitHookLayoutEffects(finishedWork);
-        }
+        commitHookLayoutEffects(finishedWork, HookLayout | HookHasEffect);
       }
       break;
     }
@@ -1002,19 +977,15 @@ function commitLayoutEffectOnFiber(
         committedLanes,
       );
       if (flags & Update) {
-        if (!offscreenSubtreeWasHidden) {
-          commitClassLayoutLifecycles(finishedWork, current);
-        }
+        commitClassLayoutLifecycles(finishedWork, current);
       }
 
       if (flags & Callback) {
-        commitClassCallbacks(finishedWork, current);
+        commitClassCallbacks(finishedWork);
       }
 
       if (flags & Ref) {
-        if (!offscreenSubtreeWasHidden) {
-          safelyAttachRef(finishedWork, finishedWork.return);
-        }
+        safelyAttachRef(finishedWork, finishedWork.return);
       }
       break;
     }
@@ -1063,13 +1034,11 @@ function commitLayoutEffectOnFiber(
       // These effects should only be committed when components are first mounted,
       // aka when there is no current/alternate.
       if (current === null && flags & Update) {
-        commitHostComponentMount(finishedWork, current);
+        commitHostComponentMount(finishedWork);
       }
 
       if (flags & Ref) {
-        if (!offscreenSubtreeWasHidden) {
-          safelyAttachRef(finishedWork, finishedWork.return);
-        }
+        safelyAttachRef(finishedWork, finishedWork.return);
       }
       break;
     }
@@ -1117,19 +1086,25 @@ function commitLayoutEffectOnFiber(
           offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
 
           if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
-            // This is the root of a reappearing boundary. Turn its layout
-            // effects back on.
-            recursivelyTraverseReappearLayoutEffects(finishedWork);
+            // 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,
+              committedLanes,
+              includeWorkInProgressEffects,
+            );
+          } else {
+            recursivelyTraverseLayoutEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+            );
           }
-
-          // TODO: We shouldn't traverse twice when reappearing layout effects.
-          // Move this into the else block of the above if statement, and modify
-          // reappearLayoutEffects to fire regular layout effects, too.
-          recursivelyTraverseLayoutEffects(
-            finishedRoot,
-            finishedWork,
-            committedLanes,
-          );
           offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
           offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
         }
@@ -2723,90 +2698,177 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
   }
 }
 
-function reappearLayoutEffects(finishedWork: Fiber) {
+function reappearLayoutEffects(
+  finishedRoot: FiberRoot,
+  current: Fiber | null,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  // 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,
+) {
   // Turn on layout effects in a tree that previously disappeared.
-  // TODO (Offscreen) Check: flags & LayoutStatic
+  const flags = finishedWork.flags;
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
-
-      // TODO: Check for LayoutStatic flag
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          safelyCallCommitHookLayoutEffectListMount(
-            finishedWork,
-            finishedWork.return,
-          );
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
-        }
-      } else {
-        safelyCallCommitHookLayoutEffectListMount(
-          finishedWork,
-          finishedWork.return,
-        );
-      }
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
+      // TODO: Check flags & LayoutStatic
+      commitHookLayoutEffects(finishedWork, HookLayout);
       break;
     }
     case ClassComponent: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
 
-      const instance = finishedWork.stateNode;
       // TODO: Check for LayoutStatic flag
+      const instance = finishedWork.stateNode;
       if (typeof instance.componentDidMount === 'function') {
-        safelyCallComponentDidMount(
-          finishedWork,
-          finishedWork.return,
-          instance,
-        );
+        try {
+          instance.componentDidMount();
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
       }
-      // TODO: Check for RefStatic flag
-      safelyAttachRef(finishedWork, finishedWork.return);
+
+      // Commit any callbacks that would have fired while the component
+      // was hidden.
       const updateQueue: UpdateQueue<
         *,
       > | null = (finishedWork.updateQueue: any);
       if (updateQueue !== null) {
         commitHiddenCallbacks(updateQueue, instance);
       }
+
+      // 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 HostComponent: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
 
-      // TODO: Check for RefStatic flag
+      // 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) {
+        commitHostComponentMount(finishedWork);
+      }
+
+      // TODO: Check flags & Ref
       safelyAttachRef(finishedWork, finishedWork.return);
       break;
     }
+    case Profiler: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
+      // TODO: Figure out how Profiler updates should work with Offscreen
+      if (includeWorkInProgressEffects && flags & Update) {
+        commitProfilerUpdate(finishedWork, current);
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
+
+      // TODO: Figure out how Suspense hydration callbacks should work
+      // with Offscreen.
+      if (includeWorkInProgressEffects && flags & Update) {
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+      }
+      break;
+    }
     case OffscreenComponent: {
-      const isHidden = finishedWork.memoizedState !== null;
+      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(finishedWork);
+        recursivelyTraverseReappearLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          includeWorkInProgressEffects,
+        );
       }
       break;
     }
     default: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
       break;
     }
   }
 }
 
-function recursivelyTraverseReappearLayoutEffects(parentFiber: Fiber) {
+function recursivelyTraverseReappearLayoutEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  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)
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
   let child = parentFiber.child;
   while (child !== null) {
-    reappearLayoutEffects(child);
+    const current = child.alternate;
+    reappearLayoutEffects(
+      finishedRoot,
+      current,
+      child,
+      committedLanes,
+      childShouldIncludeWorkInProgressEffects,
+    );
     child = child.sibling;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 export function commitPassiveMountEffects(
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 13ae7fef3278..4b979151da99 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -225,18 +225,6 @@ const callComponentWillUnmountWithTimer = function(current, instance) {
   }
 };
 
-// Capture errors so they don't interrupt mounting.
-function safelyCallCommitHookLayoutEffectListMount(
-  current: Fiber,
-  nearestMountedAncestor: Fiber | null,
-) {
-  try {
-    commitHookEffectListMount(HookLayout, current);
-  } catch (error) {
-    captureCommitPhaseError(current, nearestMountedAncestor, error);
-  }
-}
-
 // Capture errors so they don't interrupt unmounting.
 function safelyCallComponentWillUnmount(
   current: Fiber,
@@ -250,19 +238,6 @@ function safelyCallComponentWillUnmount(
   }
 }
 
-// Capture errors so they don't interrupt mounting.
-function safelyCallComponentDidMount(
-  current: Fiber,
-  nearestMountedAncestor: Fiber | null,
-  instance: any,
-) {
-  try {
-    instance.componentDidMount();
-  } catch (error) {
-    captureCommitPhaseError(current, nearestMountedAncestor, error);
-  }
-}
-
 // Capture errors so they don't interrupt mounting.
 function safelyAttachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
   try {
@@ -706,7 +681,7 @@ export function commitPassiveEffectDurations(
   }
 }
 
-function commitHookLayoutEffects(finishedWork: Fiber) {
+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
@@ -718,14 +693,14 @@ function commitHookLayoutEffects(finishedWork: Fiber) {
   ) {
     try {
       startLayoutEffectTimer();
-      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+      commitHookEffectListMount(hookFlags, finishedWork);
     } catch (error) {
       captureCommitPhaseError(finishedWork, finishedWork.return, error);
     }
     recordLayoutEffectDuration(finishedWork);
   } else {
     try {
-      commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
+      commitHookEffectListMount(hookFlags, finishedWork);
     } catch (error) {
       captureCommitPhaseError(finishedWork, finishedWork.return, error);
     }
@@ -853,7 +828,7 @@ function commitClassLayoutLifecycles(
   }
 }
 
-function commitClassCallbacks(finishedWork: Fiber, current: Fiber | null) {
+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<*> | null = (finishedWork.updateQueue: any);
@@ -897,7 +872,7 @@ function commitClassCallbacks(finishedWork: Fiber, current: Fiber | null) {
   }
 }
 
-function commitHostComponentMount(finishedWork: Fiber, current: Fiber | null) {
+function commitHostComponentMount(finishedWork: Fiber) {
   const type = finishedWork.type;
   const props = finishedWork.memoizedProps;
   const instance: Instance = finishedWork.stateNode;
@@ -978,6 +953,8 @@ function commitLayoutEffectOnFiber(
   finishedWork: Fiber,
   committedLanes: Lanes,
 ): void {
+  // 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:
@@ -989,9 +966,7 @@ function commitLayoutEffectOnFiber(
         committedLanes,
       );
       if (flags & Update) {
-        if (!offscreenSubtreeWasHidden) {
-          commitHookLayoutEffects(finishedWork);
-        }
+        commitHookLayoutEffects(finishedWork, HookLayout | HookHasEffect);
       }
       break;
     }
@@ -1002,19 +977,15 @@ function commitLayoutEffectOnFiber(
         committedLanes,
       );
       if (flags & Update) {
-        if (!offscreenSubtreeWasHidden) {
-          commitClassLayoutLifecycles(finishedWork, current);
-        }
+        commitClassLayoutLifecycles(finishedWork, current);
       }
 
       if (flags & Callback) {
-        commitClassCallbacks(finishedWork, current);
+        commitClassCallbacks(finishedWork);
       }
 
       if (flags & Ref) {
-        if (!offscreenSubtreeWasHidden) {
-          safelyAttachRef(finishedWork, finishedWork.return);
-        }
+        safelyAttachRef(finishedWork, finishedWork.return);
       }
       break;
     }
@@ -1063,13 +1034,11 @@ function commitLayoutEffectOnFiber(
       // These effects should only be committed when components are first mounted,
       // aka when there is no current/alternate.
       if (current === null && flags & Update) {
-        commitHostComponentMount(finishedWork, current);
+        commitHostComponentMount(finishedWork);
       }
 
       if (flags & Ref) {
-        if (!offscreenSubtreeWasHidden) {
-          safelyAttachRef(finishedWork, finishedWork.return);
-        }
+        safelyAttachRef(finishedWork, finishedWork.return);
       }
       break;
     }
@@ -1117,19 +1086,25 @@ function commitLayoutEffectOnFiber(
           offscreenSubtreeWasHidden = newOffscreenSubtreeWasHidden;
 
           if (offscreenSubtreeWasHidden && !prevOffscreenSubtreeWasHidden) {
-            // This is the root of a reappearing boundary. Turn its layout
-            // effects back on.
-            recursivelyTraverseReappearLayoutEffects(finishedWork);
+            // 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,
+              committedLanes,
+              includeWorkInProgressEffects,
+            );
+          } else {
+            recursivelyTraverseLayoutEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+            );
           }
-
-          // TODO: We shouldn't traverse twice when reappearing layout effects.
-          // Move this into the else block of the above if statement, and modify
-          // reappearLayoutEffects to fire regular layout effects, too.
-          recursivelyTraverseLayoutEffects(
-            finishedRoot,
-            finishedWork,
-            committedLanes,
-          );
           offscreenSubtreeIsHidden = prevOffscreenSubtreeIsHidden;
           offscreenSubtreeWasHidden = prevOffscreenSubtreeWasHidden;
         }
@@ -2723,90 +2698,177 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
   }
 }
 
-function reappearLayoutEffects(finishedWork: Fiber) {
+function reappearLayoutEffects(
+  finishedRoot: FiberRoot,
+  current: Fiber | null,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  // 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,
+) {
   // Turn on layout effects in a tree that previously disappeared.
-  // TODO (Offscreen) Check: flags & LayoutStatic
+  const flags = finishedWork.flags;
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
-
-      // TODO: Check for LayoutStatic flag
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
-        try {
-          startLayoutEffectTimer();
-          safelyCallCommitHookLayoutEffectListMount(
-            finishedWork,
-            finishedWork.return,
-          );
-        } finally {
-          recordLayoutEffectDuration(finishedWork);
-        }
-      } else {
-        safelyCallCommitHookLayoutEffectListMount(
-          finishedWork,
-          finishedWork.return,
-        );
-      }
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
+      // TODO: Check flags & LayoutStatic
+      commitHookLayoutEffects(finishedWork, HookLayout);
       break;
     }
     case ClassComponent: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
 
-      const instance = finishedWork.stateNode;
       // TODO: Check for LayoutStatic flag
+      const instance = finishedWork.stateNode;
       if (typeof instance.componentDidMount === 'function') {
-        safelyCallComponentDidMount(
-          finishedWork,
-          finishedWork.return,
-          instance,
-        );
+        try {
+          instance.componentDidMount();
+        } catch (error) {
+          captureCommitPhaseError(finishedWork, finishedWork.return, error);
+        }
       }
-      // TODO: Check for RefStatic flag
-      safelyAttachRef(finishedWork, finishedWork.return);
+
+      // Commit any callbacks that would have fired while the component
+      // was hidden.
       const updateQueue: UpdateQueue<
         *,
       > | null = (finishedWork.updateQueue: any);
       if (updateQueue !== null) {
         commitHiddenCallbacks(updateQueue, instance);
       }
+
+      // 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 HostComponent: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
 
-      // TODO: Check for RefStatic flag
+      // 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) {
+        commitHostComponentMount(finishedWork);
+      }
+
+      // TODO: Check flags & Ref
       safelyAttachRef(finishedWork, finishedWork.return);
       break;
     }
+    case Profiler: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
+      // TODO: Figure out how Profiler updates should work with Offscreen
+      if (includeWorkInProgressEffects && flags & Update) {
+        commitProfilerUpdate(finishedWork, current);
+      }
+      break;
+    }
+    case SuspenseComponent: {
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
+
+      // TODO: Figure out how Suspense hydration callbacks should work
+      // with Offscreen.
+      if (includeWorkInProgressEffects && flags & Update) {
+        commitSuspenseHydrationCallbacks(finishedRoot, finishedWork);
+      }
+      break;
+    }
     case OffscreenComponent: {
-      const isHidden = finishedWork.memoizedState !== null;
+      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(finishedWork);
+        recursivelyTraverseReappearLayoutEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          includeWorkInProgressEffects,
+        );
       }
       break;
     }
     default: {
-      recursivelyTraverseReappearLayoutEffects(finishedWork);
+      recursivelyTraverseReappearLayoutEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        includeWorkInProgressEffects,
+      );
       break;
     }
   }
 }
 
-function recursivelyTraverseReappearLayoutEffects(parentFiber: Fiber) {
+function recursivelyTraverseReappearLayoutEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  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)
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
   let child = parentFiber.child;
   while (child !== null) {
-    reappearLayoutEffects(child);
+    const current = child.alternate;
+    reappearLayoutEffects(
+      finishedRoot,
+      current,
+      child,
+      committedLanes,
+      childShouldIncludeWorkInProgressEffects,
+    );
     child = child.sibling;
   }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
 export function commitPassiveMountEffects(
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 1df22cd76bfa..c2fe2f77552b 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -696,4 +696,175 @@ describe('ReactOffscreen', () => {
     ]);
     expect(root).toMatchRenderedOutput(<span prop="C" />);
   });
+
+  // @gate enableOffscreen
+  it('does not call componentDidUpdate when reappearing a hidden class component', async () => {
+    class Child extends React.Component {
+      componentDidMount() {
+        Scheduler.unstable_yieldValue('componentDidMount');
+      }
+      componentDidUpdate() {
+        Scheduler.unstable_yieldValue('componentDidUpdate');
+      }
+      componentWillUnmount() {
+        Scheduler.unstable_yieldValue('componentWillUnmount');
+      }
+      render() {
+        return 'Child';
+      }
+    }
+
+    // Initial mount
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['componentDidMount']);
+
+    // Hide the class component
+    await act(async () => {
+      root.render(
+        <Offscreen mode="hidden">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['componentWillUnmount']);
+
+    // Reappear the class component. componentDidMount should fire, not
+    // componentDidUpdate.
+    await act(async () => {
+      root.render(
+        <Offscreen mode="visible">
+          <Child />
+        </Offscreen>,
+      );
+    });
+    expect(Scheduler).toHaveYielded(['componentDidMount']);
+  });
+
+  // @gate enableOffscreen
+  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.unstable_yieldValue('Mount ' + label);
+          return () => {
+            Scheduler.unstable_yieldValue('Unmount ' + label);
+          };
+        }, [label]);
+        return label;
+      }
+
+      // Initial mount
+      const root = ReactNoop.createRoot();
+      await act(async () => {
+        root.render(
+          <Offscreen mode="visible">
+            <Child key="B" label="B" />
+          </Offscreen>,
+        );
+      });
+      expect(Scheduler).toHaveYielded(['Mount B']);
+
+      // Hide the component
+      await act(async () => {
+        root.render(
+          <Offscreen mode="hidden">
+            <Child key="B" label="B" />
+          </Offscreen>,
+        );
+      });
+      expect(Scheduler).toHaveYielded(['Unmount B']);
+
+      // Reappear the component and also add some new siblings.
+      await act(async () => {
+        root.render(
+          <Offscreen mode="visible">
+            <Child key="A" label="A" />
+            <Child key="B" label="B" />
+            <Child key="C" label="C" />
+          </Offscreen>,
+        );
+      });
+      // 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.
+      expect(Scheduler).toHaveYielded(['Mount A', 'Mount B', 'Mount C']);
+    },
+  );
+
+  // @gate enableOffscreen
+  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.unstable_yieldValue('Mount ' + this.props.label);
+        }
+        componentWillUnmount() {
+          Scheduler.unstable_yieldValue('Unmount ' + this.props.label);
+        }
+        render() {
+          return this.props.label;
+        }
+      }
+
+      // Initial mount
+      const bRef = React.createRef();
+      const root = ReactNoop.createRoot();
+      await act(async () => {
+        root.render(
+          <Offscreen mode="visible">
+            <Child key="B" ref={bRef} label="B" />
+          </Offscreen>,
+        );
+      });
+      expect(Scheduler).toHaveYielded(['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(async () => {
+        root.render(
+          <Offscreen mode="hidden">
+            <Child key="B" ref={bRef} label="B" />
+          </Offscreen>,
+        );
+      });
+      expect(Scheduler).toHaveYielded(['Unmount B']);
+
+      // Reappear the component and also add some new siblings.
+      await act(async () => {
+        setStateB(null, () => {
+          Scheduler.unstable_yieldValue('setState callback B');
+        });
+        root.render(
+          <Offscreen mode="visible">
+            <Child key="A" label="A" />
+            <Child key="B" ref={bRef} label="B" />
+            <Child key="C" label="C" />
+          </Offscreen>,
+        );
+      });
+      // 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.
+      expect(Scheduler).toHaveYielded([
+        'Mount A',
+        'Mount B',
+        'setState callback B',
+        'Mount C',
+      ]);
+    },
+  );
 });

From 3ddbedd0520a9738d8c3c7ce0268542e02f9738a Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Tue, 19 Jul 2022 15:22:09 -0400
Subject: [PATCH 1488/1603] [devtools] log more events + metadata (#24951)

* [devtools] log more events + metadata

* better typing

* consistent string type
---
 packages/react-devtools-shared/src/Logger.js     |  6 +++---
 .../src/devtools/views/Components/Element.js     |  2 +-
 .../views/Components/InspectedElementView.js     |  2 +-
 .../src/devtools/views/Components/Tree.js        |  2 +-
 .../devtools/views/Profiler/ProfilerContext.js   | 16 ++++++++--------
 .../src/registerDevToolsEventLogger.js           |  3 ++-
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index f899a49f5d7f..a23b5ee391a4 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -42,14 +42,14 @@ export type LogEvent =
       +event_name: 'profiling-start',
     |};
 
-export type LogFunction = LogEvent => void | Promise<void>;
+export type LogFunction = (LogEvent, ?Object) => void | Promise<void>;
 
 let logFunctions: Array<LogFunction> = [];
 export const logEvent: LogFunction =
   enableLogger === true
-    ? function logEvent(event: LogEvent): void {
+    ? function logEvent(event: LogEvent, metadata: ?Object): void {
         logFunctions.forEach(log => {
-          log(event);
+          log(event, metadata);
         });
       }
     : function logEvent() {};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 05051eb63cb1..841b61dc13cb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -77,7 +77,7 @@ export default function Element({data, index, style}: Props) {
 
   const handleClick = ({metaKey}) => {
     if (id !== null) {
-      logEvent({event_name: 'select-element'});
+      logEvent({event_name: 'select-element'}, {source: 'click-element'});
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
         payload: metaKey ? null : id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index e823bfcfc263..b192c87e193d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -303,7 +303,7 @@ function OwnerView({
   } = useHighlightNativeElement();
 
   const handleClick = useCallback(() => {
-    logEvent({event_name: 'select-element'});
+    logEvent({event_name: 'select-element'}, {source: 'owner-view'});
     dispatch({
       type: 'SELECT_ELEMENT_BY_ID',
       payload: id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 84bda98eaa31..1fc9400613ef 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -104,7 +104,7 @@ export default function Tree(props: Props) {
     function handleStopInspectingNative(didSelectNode) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
-        logEvent({event_name: 'select-element'});
+        logEvent({event_name: 'select-element'}, {source: 'inspector'});
       }
     }
     bridge.addListener('stopInspectingNative', handleStopInspectingNative);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index fd2cad6f31ba..721ebfc5a7ae 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -192,14 +192,6 @@ function ProfilerContextController({children}: Props) {
     });
   }
 
-  const startProfiling = useCallback(() => {
-    logEvent({event_name: 'profiling-start'});
-    store.profilerStore.startProfiling();
-  }, [store]);
-  const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
-    store,
-  ]);
-
   const [
     isCommitFilterEnabled,
     setIsCommitFilterEnabled,
@@ -217,6 +209,14 @@ function ProfilerContextController({children}: Props) {
     'flame-chart',
   );
 
+  const startProfiling = useCallback(() => {
+    logEvent({event_name: 'profiling-start'}, {current_tab: selectedTabID});
+    store.profilerStore.startProfiling();
+  }, [store, selectedTabID]);
+  const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
+    store,
+  ]);
+
   if (isProfiling) {
     batchedUpdates(() => {
       if (selectedCommitIndex !== null) {
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 08c317fe9313..9c5c5455d0a7 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -25,7 +25,7 @@ export function registerDevToolsEventLogger(
     | LoggerContext
     | ?(() => Promise<LoggerContext>),
 ): void {
-  async function logEvent(event: LogEvent) {
+  async function logEvent(event: LogEvent, metadata: ?Object) {
     if (enableLogger) {
       if (loggingIFrame != null) {
         loggingIFrame.contentWindow.postMessage(
@@ -35,6 +35,7 @@ export function registerDevToolsEventLogger(
             context: {
               surface,
               version: process.env.DEVTOOLS_VERSION,
+              metadata: metadata != null ? JSON.stringify(metadata) : '',
               ...(fetchAdditionalContext != null
                 ? await fetchAdditionalContext()
                 : {}),

From 59bc52a16c5bdec6de5fc87de4d900ebc20389b2 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 21 Jul 2022 21:46:10 +0200
Subject: [PATCH 1489/1603] Add 4.5.0 release to eslint rules CHANGELOG
 (#24853)

Eye-balled from https://app.renovatebot.com/package-diff?name=eslint-plugin-react-hooks&from=4.4.0&to=4.5.0#d2h-042857 which changes were included.
---
 packages/eslint-plugin-react-hooks/CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index cdb0d053ba80..8a0882d24ec4 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,7 @@
+## 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.

From 9bd0dd4c181a5be8b6c62cc5d90a727570f08b9c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 21 Jul 2022 21:46:43 +0200
Subject: [PATCH 1490/1603] test(react-debug-tools): Improve coverage of
 currentDispatcher.current setter (#24945)

---
 .../__tests__/ReactHooksInspection-test.js    | 44 +++++--------------
 1 file changed, 12 insertions(+), 32 deletions(-)

diff --git a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
index 43624ce37aff..998d946e4afd 100644
--- a/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
+++ b/packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js
@@ -256,12 +256,11 @@ describe('ReactHooksInspection', () => {
   });
 
   it('should support an injected dispatcher', () => {
-    function Foo(props) {
-      const [state] = React.useState('hello world');
-      return <div>{state}</div>;
-    }
-
-    const initial = {};
+    const initial = {
+      useState() {
+        throw new Error("Should've been proxied");
+      },
+    };
     let current = initial;
     let getterCalls = 0;
     const setterCalls = [];
@@ -276,33 +275,14 @@ describe('ReactHooksInspection', () => {
       },
     };
 
-    let didCatch = false;
-    expect(() => {
-      // mock the Error constructor to check the internal of the error instance
-      try {
-        ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
-      } catch (error) {
-        expect(error.message).toBe('Error rendering inspected component');
-        // error.cause is the original error
-        expect(error.cause).toBeInstanceOf(Error);
-        expect(error.cause.message).toBe(
-          "Cannot read property 'useState' of null",
-        );
-      }
-      didCatch = true;
-    }).toErrorDev(
-      '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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.',
-      {withoutStack: true},
-    );
-    // avoid false positive if no error was thrown at all
-    expect(didCatch).toBe(true);
+    function Foo(props) {
+      const [state] = FakeDispatcherRef.current.useState('hello world');
+      return <div>{state}</div>;
+    }
+
+    ReactDebugTools.inspectHooks(Foo, {}, FakeDispatcherRef);
 
-    expect(getterCalls).toBe(1);
+    expect(getterCalls).toBe(2);
     expect(setterCalls).toHaveLength(2);
     expect(setterCalls[0]).not.toBe(initial);
     expect(setterCalls[1]).toBe(initial);

From 6b28bc9c5aa91e1d848c97c380e284d3f518b3bd Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Thu, 21 Jul 2022 21:46:57 +0200
Subject: [PATCH 1491/1603] test: Throw custom error instead of relying on
 runtime error (#24946)

---
 .../useSyncExternalStoreShared-test.js        | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
index 5b0ce4f1a4af..225c397bbd5a 100644
--- a/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
+++ b/packages/use-sync-external-store/src/__tests__/useSyncExternalStoreShared-test.js
@@ -900,7 +900,12 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
 
     it('selector can throw on update', async () => {
       const store = createExternalStore({a: 'a'});
-      const selector = state => state.a.toUpperCase();
+      const selector = state => {
+        if (typeof state.a !== 'string') {
+          throw new TypeError('Malformed state');
+        }
+        return state.a.toUpperCase();
+      };
 
       function App() {
         const a = useSyncExternalStoreWithSelector(
@@ -927,15 +932,18 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       await act(() => {
         store.set({});
       });
-      expect(container.textContent).toEqual(
-        "Cannot read property 'toUpperCase' of undefined",
-      );
+      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) => left.a.trim() === right.a.trim();
+      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(
@@ -963,9 +971,7 @@ describe('Shared useSyncExternalStore behavior (shim and built-in)', () => {
       await act(() => {
         store.set({});
       });
-      expect(container.textContent).toEqual(
-        "Cannot read property 'trim' of undefined",
-      );
+      expect(container.textContent).toEqual('Malformed state');
     });
   });
 });

From 49f8254d6dec7c6de789116e20ffc5a9401aa725 Mon Sep 17 00:00:00 2001
From: davidrenne <davidrenne@gmail.com>
Date: Fri, 22 Jul 2022 11:24:49 -0400
Subject: [PATCH 1492/1603] Bug fix for <App /> vs. <Counter /> (#24972)

---
 packages/react/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/README.md b/packages/react/README.md
index 826563e1b9a1..a4aa151da728 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -25,7 +25,7 @@ function Counter() {
 }
 
 const root = createRoot(document.getElementById('root'));
-root.render(<App />);
+root.render(<Counter />);
 ```
 
 ## Documentation

From b66936ece7d9ad41a33e077933c9af0bda8bff87 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 25 Jul 2022 09:02:12 +0200
Subject: [PATCH 1493/1603] devtools: Remove ForwardRef/Memo from display name
 if `displayName` is set (#21952)

* feat(devtools): Remove ForwardRef/Memo from display name if `displayName` is set

* Avoid potentially wasting work by inlining `functionName`
---
 .../src/__tests__/profilingCharts-test.js     | 36 +++++++++----------
 .../src/__tests__/store-test.js               |  6 ++--
 .../src/backend/renderer.js                   | 20 ++++++-----
 packages/react-devtools-shared/src/utils.js   | 27 +++++++-------
 4 files changed, 46 insertions(+), 43 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index 2f3cc1741341..cf8d4aae4a71 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -125,8 +125,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": true,
               "id": 5,
-              "label": "Child key=\\"third\\" (<0.1ms of <0.1ms)",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"third\\" (<0.1ms of <0.1ms)",
+              "name": "Memo(Child)",
               "offset": 15,
               "selfDuration": 0,
               "treeBaseDuration": 0,
@@ -135,8 +135,8 @@ describe('profiling charts', () => {
               "actualDuration": 2,
               "didRender": true,
               "id": 4,
-              "label": "Child key=\\"second\\" (2ms of 2ms)",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"second\\" (2ms of 2ms)",
+              "name": "Memo(Child)",
               "offset": 13,
               "selfDuration": 2,
               "treeBaseDuration": 2,
@@ -145,8 +145,8 @@ describe('profiling charts', () => {
               "actualDuration": 3,
               "didRender": true,
               "id": 3,
-              "label": "Child key=\\"first\\" (3ms of 3ms)",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"first\\" (3ms of 3ms)",
+              "name": "Memo(Child)",
               "offset": 10,
               "selfDuration": 3,
               "treeBaseDuration": 3,
@@ -176,8 +176,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": false,
               "id": 5,
-              "label": "Child key=\\"third\\"",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"third\\"",
+              "name": "Memo(Child)",
               "offset": 15,
               "selfDuration": 0,
               "treeBaseDuration": 0,
@@ -186,8 +186,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": false,
               "id": 4,
-              "label": "Child key=\\"second\\"",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"second\\"",
+              "name": "Memo(Child)",
               "offset": 13,
               "selfDuration": 0,
               "treeBaseDuration": 2,
@@ -196,8 +196,8 @@ describe('profiling charts', () => {
               "actualDuration": 0,
               "didRender": false,
               "id": 3,
-              "label": "Child key=\\"first\\"",
-              "name": "Child",
+              "label": "Memo(Child) key=\\"first\\"",
+              "name": "Memo(Child)",
               "offset": 10,
               "selfDuration": 0,
               "treeBaseDuration": 3,
@@ -267,20 +267,20 @@ describe('profiling charts', () => {
           },
           Object {
             "id": 3,
-            "label": "Child (Memo) key=\\"first\\" (3ms)",
-            "name": "Child",
+            "label": "Memo(Child) (Memo) key=\\"first\\" (3ms)",
+            "name": "Memo(Child)",
             "value": 3,
           },
           Object {
             "id": 4,
-            "label": "Child (Memo) key=\\"second\\" (2ms)",
-            "name": "Child",
+            "label": "Memo(Child) (Memo) key=\\"second\\" (2ms)",
+            "name": "Memo(Child)",
             "value": 2,
           },
           Object {
             "id": 5,
-            "label": "Child (Memo) key=\\"third\\" (<0.1ms)",
-            "name": "Child",
+            "label": "Memo(Child) (Memo) key=\\"third\\" (<0.1ms)",
+            "name": "Memo(Child)",
             "value": 0,
           },
         ]
diff --git a/packages/react-devtools-shared/src/__tests__/store-test.js b/packages/react-devtools-shared/src/__tests__/store-test.js
index a6dc02f844e5..e739c939f138 100644
--- a/packages/react-devtools-shared/src/__tests__/store-test.js
+++ b/packages/react-devtools-shared/src/__tests__/store-test.js
@@ -1507,7 +1507,7 @@ describe('Store', () => {
             <MyComponent> [ForwardRef]
           ▾ <Anonymous> [ForwardRef]
               <MyComponent2>
-            <Custom> [ForwardRef]
+            <Custom>
             <MyComponent4> [Memo]
           ▾ <MyComponent> [Memo]
               <MyComponent> [ForwardRef]
@@ -1515,8 +1515,8 @@ describe('Store', () => {
             <Baz> [Memo][withFoo][withBar]
             <Baz> [ForwardRef][withFoo][withBar]
             <Cache>
-            <memoRefOverride> [Memo]
-            <forwardRefOverride> [ForwardRef]
+            <memoRefOverride>
+            <forwardRefOverride>
     `);
   });
 
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index f2d6dad45f00..df1c5d53e077 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -30,6 +30,7 @@ import {
 import {
   deletePathInObject,
   getDisplayName,
+  getWrappedDisplayName,
   getDefaultComponentFilters,
   getInObject,
   getUID,
@@ -451,10 +452,11 @@ export function getInternalReactConstants(
       case IndeterminateComponent:
         return getDisplayName(resolvedType);
       case ForwardRef:
-        // Mirror https://github.com/facebook/react/blob/7c21bf72ace77094fd1910cc350a548287ef8350/packages/shared/getComponentName.js#L27-L37
-        return (
-          (type && type.displayName) ||
-          getDisplayName(resolvedType, 'Anonymous')
+        return getWrappedDisplayName(
+          elementType,
+          resolvedType,
+          'ForwardRef',
+          'Anonymous',
         );
       case HostRoot:
         const fiberRoot = fiber.stateNode;
@@ -475,10 +477,12 @@ export function getInternalReactConstants(
         return 'Lazy';
       case MemoComponent:
       case SimpleMemoComponent:
-        return (
-          (elementType && elementType.displayName) ||
-          (type && type.displayName) ||
-          getDisplayName(resolvedType, 'Anonymous')
+        // Display name in React does not use `Memo` as a wrapper but fallback name.
+        return getWrappedDisplayName(
+          elementType,
+          resolvedType,
+          'Memo',
+          'Anonymous',
         );
       case SuspenseComponent:
         return 'Suspense';
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 181820646e9f..77a75dd2c672 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -101,6 +101,19 @@ export function getAllEnumerableKeys(
   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 {
+  return (
+    (outerType: any).displayName ||
+    `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
+  );
+}
+
 export function getDisplayName(
   type: Function,
   fallbackName: string = 'Anonymous',
@@ -445,20 +458,6 @@ export function separateDisplayNameAndHOCs(
       break;
   }
 
-  if (type === ElementTypeMemo) {
-    if (hocDisplayNames === null) {
-      hocDisplayNames = ['Memo'];
-    } else {
-      hocDisplayNames.unshift('Memo');
-    }
-  } else if (type === ElementTypeForwardRef) {
-    if (hocDisplayNames === null) {
-      hocDisplayNames = ['ForwardRef'];
-    } else {
-      hocDisplayNames.unshift('ForwardRef');
-    }
-  }
-
   return [displayName, hocDisplayNames];
 }
 

From 5f34b051dfb708ef6e8dc8e55d5e1bbd209381e8 Mon Sep 17 00:00:00 2001
From: Mengdi Chen <mengdi@fb.com>
Date: Mon, 25 Jul 2022 11:53:38 -0400
Subject: [PATCH 1494/1603] [Devtools] add logs for profiler tab switch &
 settings change (#24966)

* [devtools] add logs for profiler tab switch & settings change

* prettier

* remove unnecessary console.log

* better naming: logEvent -> loggerEvent

* use same object for event and metadata
---
 packages/react-devtools-shared/src/Logger.js  | 28 +++++++++++--
 .../src/devtools/views/Components/Element.js  |  5 ++-
 .../views/Components/InspectedElementView.js  |  5 ++-
 .../src/devtools/views/Components/Tree.js     |  5 ++-
 .../views/Profiler/ProfilerContext.js         | 13 +++++-
 .../views/Settings/SettingsContext.js         | 42 +++++++++++++++----
 .../src/devtools/views/hooks.js               |  5 +++
 .../src/registerDevToolsEventLogger.js        | 13 ++++--
 8 files changed, 96 insertions(+), 20 deletions(-)

diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index a23b5ee391a4..ddf60f8fd70f 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -9,7 +9,7 @@
 
 import {enableLogger} from 'react-devtools-feature-flags';
 
-export type LogEvent =
+export type LoggerEvent =
   | {|
       +event_name: 'loaded-dev-tools',
     |}
@@ -34,22 +34,42 @@ export type LogEvent =
     |}
   | {|
       +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,
+        ...
+      },
     |};
 
-export type LogFunction = (LogEvent, ?Object) => void | Promise<void>;
+export type LogFunction = LoggerEvent => void | Promise<void>;
 
 let logFunctions: Array<LogFunction> = [];
 export const logEvent: LogFunction =
   enableLogger === true
-    ? function logEvent(event: LogEvent, metadata: ?Object): void {
+    ? function logEvent(event: LoggerEvent): void {
         logFunctions.forEach(log => {
-          log(event, metadata);
+          log(event);
         });
       }
     : function logEvent() {};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 841b61dc13cb..1dab6f3f7db7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -77,7 +77,10 @@ export default function Element({data, index, style}: Props) {
 
   const handleClick = ({metaKey}) => {
     if (id !== null) {
-      logEvent({event_name: 'select-element'}, {source: 'click-element'});
+      logEvent({
+        event_name: 'select-element',
+        metadata: {source: 'click-element'},
+      });
       dispatch({
         type: 'SELECT_ELEMENT_BY_ID',
         payload: metaKey ? null : id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index b192c87e193d..88b9ee63ec9f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -303,7 +303,10 @@ function OwnerView({
   } = useHighlightNativeElement();
 
   const handleClick = useCallback(() => {
-    logEvent({event_name: 'select-element'}, {source: 'owner-view'});
+    logEvent({
+      event_name: 'select-element',
+      metadata: {source: 'owner-view'},
+    });
     dispatch({
       type: 'SELECT_ELEMENT_BY_ID',
       payload: id,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 1fc9400613ef..2ac3333d59ae 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -104,7 +104,10 @@ export default function Tree(props: Props) {
     function handleStopInspectingNative(didSelectNode) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
-        logEvent({event_name: 'select-element'}, {source: 'inspector'});
+        logEvent({
+          event_name: 'select-element',
+          metadata: {source: 'inspector'},
+        });
       }
     }
     bridge.addListener('stopInspectingNative', handleStopInspectingNative);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 721ebfc5a7ae..5ae29122a413 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -207,10 +207,21 @@ function ProfilerContextController({children}: Props) {
   const [selectedTabID, selectTab] = useLocalStorage<TabID>(
     'React::DevTools::Profiler::defaultTab',
     'flame-chart',
+    value => {
+      logEvent({
+        event_name: 'profiler-tab-changed',
+        metadata: {
+          tabId: value,
+        },
+      });
+    },
   );
 
   const startProfiling = useCallback(() => {
-    logEvent({event_name: 'profiling-start'}, {current_tab: selectedTabID});
+    logEvent({
+      event_name: 'profiling-start',
+      metadata: {current_tab: selectedTabID},
+    });
     store.profilerStore.startProfiling();
   }, [store, selectedTabID]);
   const stopProfiling = useCallback(() => store.profilerStore.stopProfiling(), [
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 09c815b49b97..3ee4ad0c86b9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -27,6 +27,7 @@ import {
 } from 'react-devtools-shared/src/constants';
 import {useLocalStorage} from '../hooks';
 import {BridgeContext} from '../context';
+import {logEvent} from 'react-devtools-shared/src/Logger';
 
 import type {BrowserTheme} from '../DevTools';
 
@@ -68,6 +69,22 @@ type Context = {|
 const SettingsContext = 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 = {|
@@ -85,47 +102,56 @@ function SettingsContextController({
 }: Props) {
   const bridge = useContext(BridgeContext);
 
-  const [displayDensity, setDisplayDensity] = useLocalStorage<DisplayDensity>(
+  const [
+    displayDensity,
+    setDisplayDensity,
+  ] = useLocalStorageWithLog<DisplayDensity>(
     'React::DevTools::displayDensity',
     'compact',
   );
-  const [theme, setTheme] = useLocalStorage<Theme>(
+  const [theme, setTheme] = useLocalStorageWithLog<Theme>(
     'React::DevTools::theme',
     'auto',
   );
   const [
     appendComponentStack,
     setAppendComponentStack,
-  ] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY, true);
+  ] = useLocalStorageWithLog<boolean>(
+    LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+    true,
+  );
   const [
     breakOnConsoleErrors,
     setBreakOnConsoleErrors,
-  ] = useLocalStorage<boolean>(
+  ] = useLocalStorageWithLog<boolean>(
     LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
     false,
   );
-  const [parseHookNames, setParseHookNames] = useLocalStorage<boolean>(
+  const [parseHookNames, setParseHookNames] = useLocalStorageWithLog<boolean>(
     LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
     false,
   );
   const [
     hideConsoleLogsInStrictMode,
     sethideConsoleLogsInStrictMode,
-  ] = useLocalStorage<boolean>(
+  ] = useLocalStorageWithLog<boolean>(
     LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
     false,
   );
   const [
     showInlineWarningsAndErrors,
     setShowInlineWarningsAndErrors,
-  ] = useLocalStorage<boolean>(
+  ] = useLocalStorageWithLog<boolean>(
     LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
     true,
   );
   const [
     traceUpdatesEnabled,
     setTraceUpdatesEnabled,
-  ] = useLocalStorage<boolean>(LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY, false);
+  ] = useLocalStorageWithLog<boolean>(
+    LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
+    false,
+  );
 
   const documentElements = useMemo<DocumentElements>(() => {
     const array: Array<HTMLElement> = [
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 897bc928cb0a..a4f51b461ca6 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -144,6 +144,7 @@ export function useIsOverflowing(
 export function useLocalStorage<T>(
   key: string,
   initialValue: T | (() => T),
+  onValueSet?: (any, string) => void,
 ): [T, (value: T | (() => T)) => void] {
   const getValueFromLocalStorage = useCallback(() => {
     try {
@@ -173,6 +174,10 @@ export function useLocalStorage<T>(
 
         // Notify listeners that this setting has changed.
         window.dispatchEvent(new Event(key));
+
+        if (onValueSet != null) {
+          onValueSet(valueToStore, key);
+        }
       } catch (error) {
         console.log(error);
       }
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 9c5c5455d0a7..5e1aeba0cd63 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -7,7 +7,7 @@
  * @flow strict-local
  */
 
-import type {LogEvent} from 'react-devtools-shared/src/Logger';
+import type {LoggerEvent} from 'react-devtools-shared/src/Logger';
 
 import {registerEventLogger} from 'react-devtools-shared/src/Logger';
 import {enableLogger} from 'react-devtools-feature-flags';
@@ -25,9 +25,14 @@ export function registerDevToolsEventLogger(
     | LoggerContext
     | ?(() => Promise<LoggerContext>),
 ): void {
-  async function logEvent(event: LogEvent, metadata: ?Object) {
+  async function logEvent(event: LoggerEvent) {
     if (enableLogger) {
       if (loggingIFrame != null) {
+        let metadata = null;
+        if (event.metadata != null) {
+          metadata = event.metadata;
+          delete event.metadata;
+        }
         loggingIFrame.contentWindow.postMessage(
           {
             source: 'react-devtools-logging',
@@ -35,7 +40,7 @@ export function registerDevToolsEventLogger(
             context: {
               surface,
               version: process.env.DEVTOOLS_VERSION,
-              metadata: metadata != null ? JSON.stringify(metadata) : '',
+              metadata: metadata !== null ? JSON.stringify(metadata) : '',
               ...(fetchAdditionalContext != null
                 ? await fetchAdditionalContext()
                 : {}),
@@ -56,7 +61,7 @@ export function registerDevToolsEventLogger(
 
     loggingIFrame = iframe;
     if (missedEvents.length > 0) {
-      missedEvents.forEach(logEvent);
+      missedEvents.forEach(event => logEvent(event));
       missedEvents = [];
     }
   }

From 2c7dea73659da283fa433f5fd657a5a29797fd67 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 26 Jul 2022 00:35:51 -0400
Subject: [PATCH 1495/1603] Implement Offscreen in Fizz (#24988)

During server rendering, a visible Offscreen subtree acts exactly like a
fragment: a pure indirection.

A hidden Offscreen subtree is not server rendered at all. It's ignored
during hydration, too. Prerendering happens only on the client. We
considered prerendering hidden trees on the server, too, but our
conclusion is that it's a waste of bytes and server computation. We
can't think of any compelling cases where it's the right trade off. (If
we ever change our mind, though, the way we'll likely model it is to
treat it as if it's a Suspense boundary with an empty fallback.)
---
 ...DOMServerPartialHydration-test.internal.js | 99 +++++++++++++++++++
 packages/react-server/src/ReactFizzServer.js  | 35 +++++--
 2 files changed, 126 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
index c8a44764d771..167faa30f41c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -17,6 +17,7 @@ let Scheduler;
 let ReactFeatureFlags;
 let Suspense;
 let SuspenseList;
+let Offscreen;
 let act;
 let IdleEventPriority;
 
@@ -106,6 +107,7 @@ describe('ReactDOMServerPartialHydration', () => {
     ReactDOMServer = require('react-dom/server');
     Scheduler = require('scheduler');
     Suspense = React.Suspense;
+    Offscreen = React.unstable_Offscreen;
     if (gate(flags => flags.enableSuspenseList)) {
       SuspenseList = React.SuspenseList;
     }
@@ -3283,6 +3285,103 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current.innerHTML).toBe('Hidden child');
   });
 
+  // @gate enableOffscreen
+  it('a visible Offscreen component acts like a fragment', async () => {
+    const ref = React.createRef();
+
+    function App() {
+      return (
+        <Offscreen mode="visible">
+          <span ref={ref}>Child</span>
+        </Offscreen>
+      );
+    }
+
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    expect(Scheduler).toHaveYielded([]);
+
+    const container = document.createElement('div');
+    container.innerHTML = finalHTML;
+
+    // Visible Offscreen 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 />);
+    expect(Scheduler).toFlushAndYield([]);
+    expect(ref.current).toBe(span);
+  });
+
+  // @gate enableOffscreen
+  it('a hidden Offscreen component is skipped over during server rendering', async () => {
+    const visibleRef = React.createRef();
+
+    function HiddenChild() {
+      Scheduler.unstable_yieldValue('HiddenChild');
+      return <span>Hidden</span>;
+    }
+
+    function App() {
+      Scheduler.unstable_yieldValue('App');
+      return (
+        <>
+          <span ref={visibleRef}>Visible</span>
+          <Offscreen mode="hidden">
+            <HiddenChild />
+          </Offscreen>
+        </>
+      );
+    }
+
+    // During server rendering, the Child component should not be evaluated,
+    // because it's inside a hidden tree.
+    const finalHTML = ReactDOMServer.renderToString(<App />);
+    expect(Scheduler).toHaveYielded(['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 />);
+    expect(Scheduler).toFlushUntilNextPaint(['App']);
+    expect(visibleRef.current).toBe(visibleSpan);
+
+    // Subsequently, the hidden child is prerendered on the client
+    expect(Scheduler).toFlushUntilNextPaint(['HiddenChild']);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <span>
+          Visible
+        </span>
+        <span
+          style="display: none;"
+        >
+          Hidden
+        </span>
+      </div>
+    `);
+  });
+
   function itHydratesWithoutMismatch(msg, App) {
     it('hydrates without mismatch ' + msg, () => {
       const container = document.createElement('div');
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index a8a3fe693207..f2974e0507e1 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -16,6 +16,7 @@ import type {
   ReactNodeList,
   ReactContext,
   ReactProviderType,
+  OffscreenMode,
 } from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {
@@ -107,6 +108,7 @@ import {
   REACT_PROVIDER_TYPE,
   REACT_CONTEXT_TYPE,
   REACT_SCOPE_TYPE,
+  REACT_OFFSCREEN_TYPE,
 } from 'shared/ReactSymbols';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -1062,6 +1064,18 @@ function renderLazyComponent(
   popComponentStackInDEV(task);
 }
 
+function renderOffscreen(request: Request, task: Task, props: Object): void {
+  const mode: ?OffscreenMode = (props.mode: any);
+  if (mode === 'hidden') {
+    // A hidden Offscreen boundary is not server rendered. Prerendering happens
+    // on the client.
+  } else {
+    // A visible Offscreen boundary is treated exactly like a fragment: a
+    // pure indirection.
+    renderNodeDestructive(request, task, props.children);
+  }
+}
+
 function renderElement(
   request: Request,
   task: Task,
@@ -1084,14 +1098,15 @@ function renderElement(
   }
 
   switch (type) {
-    // TODO: 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: Add REACT_OFFSCREEN_TYPE here too with the same capability.
+    // 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_DEBUG_TRACING_MODE_TYPE:
     case REACT_STRICT_MODE_TYPE:
@@ -1100,6 +1115,10 @@ function renderElement(
       renderNodeDestructive(request, task, props.children);
       return;
     }
+    case REACT_OFFSCREEN_TYPE: {
+      renderOffscreen(request, task, props);
+      return;
+    }
     case REACT_SUSPENSE_LIST_TYPE: {
       pushBuiltInComponentStackInDEV(task, 'SuspenseList');
       // TODO: SuspenseList should control the boundaries.

From 4ea064eb0915b355b584bff376e90dbae0e8b169 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 29 Jul 2022 19:22:57 -0400
Subject: [PATCH 1496/1603] Don't fire passive effects during initial mount of
 a hidden Offscreen tree (#24967)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Change OffscreenInstance isHidden to bitmask

The isHidden field of OffscreenInstance is a boolean that represents
whether the tree is currently hidden. To implement resuable effects, we
need to also track whether the passive effects are currently connected.
So I've changed this field to a bitmask.

No other behavior has changed in this commit. I'll update the effects
behavior in the following steps.

* Extract passive mount effects to separate functions

I'm about to add a "reappear passive effects" function that will share
much of the same code as commitPassiveMountEffectOnFiber. To minimize
the duplicated code, I've extracted the shared parts into separate
functions, similar to what I did for commitLayoutEffectOnFiber and
reappearLayoutEffects.

This may not save much on code size because Closure will likely inline
some of it, anyway, but it makes it harder for the two paths to
accidentally diverge.

* Don't mount passive effects in a new hidden tree

This changes the behavior of Offscreen so that passive effects do not
fire when prerendering a brand new tree. Previously, Offscreen did not
affect passive effects at all — only layout effects, which mount or
unmount whenever the visibility of the tree changes.

When hiding an already visible tree, the behavior of passive effects is
unchanged, for now; unlike layout effects, the passive effects will not
get unmounted. Pre-rendered updates to a hidden tree in this state will
also fire normally. This is only temporary, though — the plan is for
passive effects to act more like layout effects, and unmount them when
the tree is hidden. Perhaps after a delay so that if the visibility
toggles quickly back and forth, the effects don't need to remount. I'll
implement this separately.

* "Atomic" passive commit effects must always fire

There are a few cases where commit phase logic always needs to fire even
inside a hidden tree. In general, we should try to design algorithms
that don't depend on a commit effect running during prerendering, but
there's at least one case where I think it makes sense.

The experimental Cache component uses reference counting to keep track
of the lifetime of a cache instance. This allows us to expose an
AbortSignal object that data frameworks can use to cancel aborted
requests. These cache objects are considered alive even inside a
prerendered tree.

To implement this I added an "atomic" passive effect traversal that runs
even when a tree is hidden. (As a follow up, we should add a special
subtree flag so that we can skip over nodes that don't have them. There
are a number of similar subtree flag optimizations that we have planned,
so I'll leave them for a later refactor.)

The only other feature that currently depends on this behavior is
Transition Tracing. I did not add a test for this because Transition
Tracing is still in development and doesn't yet work with Offscreen.
---
 .../react-reconciler/src/ReactFiber.new.js    |   5 +-
 .../react-reconciler/src/ReactFiber.old.js    |   5 +-
 .../src/ReactFiberCommitWork.new.js           | 664 ++++++++++++++----
 .../src/ReactFiberCommitWork.old.js           | 664 ++++++++++++++----
 .../src/ReactFiberConcurrentUpdates.new.js    |   6 +-
 .../src/ReactFiberConcurrentUpdates.old.js    |   6 +-
 .../react-reconciler/src/ReactFiberFlags.js   |   2 +-
 .../src/ReactFiberOffscreenComponent.js       |   7 +-
 .../src/__tests__/ReactCache-test.js          |  34 +
 .../src/__tests__/ReactOffscreen-test.js      | 179 ++++-
 10 files changed, 1250 insertions(+), 322 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index b8bbb0d07ac8..560a3d0ec332 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -61,6 +61,7 @@ import {
   CacheComponent,
   TracingMarkerComponent,
 } from './ReactWorkTags';
+import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.new';
@@ -717,7 +718,7 @@ export function createFiberFromOffscreen(
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
   const primaryChildInstance: OffscreenInstance = {
-    isHidden: false,
+    visibility: OffscreenVisible,
     pendingMarkers: null,
     retryCache: null,
     transitions: null,
@@ -738,7 +739,7 @@ export function createFiberFromLegacyHidden(
   // Adding a stateNode for legacy hidden because it's currently using
   // the offscreen implementation, which depends on a state node
   const instance: OffscreenInstance = {
-    isHidden: false,
+    visibility: OffscreenVisible,
     pendingMarkers: null,
     transitions: null,
     retryCache: null,
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index da24de2f63ab..0a29c4dce782 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -61,6 +61,7 @@ import {
   CacheComponent,
   TracingMarkerComponent,
 } from './ReactWorkTags';
+import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
 
 import {isDevToolsPresent} from './ReactFiberDevToolsHook.old';
@@ -717,7 +718,7 @@ export function createFiberFromOffscreen(
   fiber.elementType = REACT_OFFSCREEN_TYPE;
   fiber.lanes = lanes;
   const primaryChildInstance: OffscreenInstance = {
-    isHidden: false,
+    visibility: OffscreenVisible,
     pendingMarkers: null,
     retryCache: null,
     transitions: null,
@@ -738,7 +739,7 @@ export function createFiberFromLegacyHidden(
   // Adding a stateNode for legacy hidden because it's currently using
   // the offscreen implementation, which depends on a state node
   const instance: OffscreenInstance = {
-    isHidden: false,
+    visibility: OffscreenVisible,
     pendingMarkers: null,
     transitions: null,
     retryCache: null,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 200e661c7017..4f9b4ce42689 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -173,6 +173,10 @@ import {
 } from './ReactFiberDevToolsHook.new';
 import {releaseCache, retainCache} from './ReactFiberCacheComponent.new';
 import {clearTransitionsForLanes} from './ReactFiberLane.new';
+import {
+  OffscreenVisible,
+  OffscreenPassiveEffectsConnected,
+} from './ReactFiberOffscreenComponent';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -2424,14 +2428,8 @@ function commitMutationEffectsOnFiber(
       const offscreenFiber: Fiber = (finishedWork.child: any);
 
       if (offscreenFiber.flags & Visibility) {
-        const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
         const newState: OffscreenState | null = offscreenFiber.memoizedState;
         const isHidden = newState !== null;
-
-        // Track the current state on the Offscreen instance so we can
-        // read it during an event
-        offscreenInstance.isHidden = isHidden;
-
         if (isHidden) {
           const wasHidden =
             offscreenFiber.alternate !== null &&
@@ -2485,7 +2483,11 @@ function commitMutationEffectsOnFiber(
 
         // Track the current state on the Offscreen instance so we can
         // read it during an event
-        offscreenInstance.isHidden = isHidden;
+        if (isHidden) {
+          offscreenInstance.visibility &= ~OffscreenVisible;
+        } else {
+          offscreenInstance.visibility |= OffscreenVisible;
+        }
 
         if (isHidden) {
           if (!wasHidden) {
@@ -2871,6 +2873,167 @@ function recursivelyTraverseReappearLayoutEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
+function commitHookPassiveMountEffects(
+  finishedWork: Fiber,
+  hookFlags: HookFlags,
+) {
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    finishedWork.mode & ProfileMode
+  ) {
+    startPassiveEffectTimer();
+    try {
+      commitHookEffectListMount(hookFlags, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+    recordPassiveEffectDuration(finishedWork);
+  } else {
+    try {
+      commitHookEffectListMount(hookFlags, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+function commitOffscreenPassiveMountEffects(
+  current: Fiber | null,
+  finishedWork: Fiber,
+  instance: OffscreenInstance,
+) {
+  if (enableCache) {
+    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);
+  }
+}
+
+function commitCachePassiveMountEffect(
+  current: Fiber | null,
+  finishedWork: Fiber,
+) {
+  if (enableCache) {
+    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
+  const instance = finishedWork.stateNode;
+  if (
+    instance.transitions !== null &&
+    (instance.pendingBoundaries === null ||
+      instance.pendingBoundaries.size === 0)
+  ) {
+    instance.transitions.forEach(transition => {
+      addMarkerCompleteCallbackToPendingTransition(
+        finishedWork.memoizedProps.name,
+        instance.transitions,
+      );
+    });
+    instance.transitions = null;
+    instance.pendingBoundaries = null;
+  }
+}
+
 export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
@@ -2916,6 +3079,9 @@ function commitPassiveMountOnFiber(
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ): void {
+  // 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:
@@ -2928,31 +3094,10 @@ function commitPassiveMountOnFiber(
         committedTransitions,
       );
       if (flags & Passive) {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
-          startPassiveEffectTimer();
-          try {
-            commitHookEffectListMount(
-              HookPassive | HookHasEffect,
-              finishedWork,
-            );
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-          recordPassiveEffectDuration(finishedWork);
-        } else {
-          try {
-            commitHookEffectListMount(
-              HookPassive | HookHasEffect,
-              finishedWork,
-            );
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+        commitHookPassiveMountEffects(
+          finishedWork,
+          HookPassive | HookHasEffect,
+        );
       }
       break;
     }
@@ -3013,6 +3158,82 @@ function commitPassiveMountOnFiber(
     }
     case LegacyHiddenComponent:
     case OffscreenComponent: {
+      // TODO: Pass `current` as argument to this function
+      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.
+          recursivelyTraversePassiveMountEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+          );
+        } else {
+          if (finishedWork.mode & ConcurrentMode) {
+            // The effects are currently disconnected. Since the tree is hidden,
+            // don't connect them. This also applies to the initial render.
+            if (enableCache || enableTransitionTracing) {
+              // "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,
+              );
+            }
+          } else {
+            // Legacy Mode: Fire the effects even if the tree is hidden.
+            instance.visibility |= OffscreenPassiveEffectsConnected;
+            recursivelyTraversePassiveMountEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+            );
+          }
+        }
+      } else {
+        // Tree is visible
+        if (instance.visibility & OffscreenPassiveEffectsConnected) {
+          // The effects are currently connected. Update them.
+          recursivelyTraversePassiveMountEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+          );
+        } 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;
+          recursivelyTraverseReconnectPassiveEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+            includeWorkInProgressEffects,
+          );
+        }
+      }
+
+      if (flags & Passive) {
+        const current = finishedWork.alternate;
+        commitOffscreenPassiveMountEffects(current, finishedWork, instance);
+      }
+      break;
+    }
+    case CacheComponent: {
       recursivelyTraversePassiveMountEffects(
         finishedRoot,
         finishedWork,
@@ -3020,146 +3241,294 @@ function commitPassiveMountOnFiber(
         committedTransitions,
       );
       if (flags & Passive) {
-        if (enableCache) {
-          let previousCache: Cache | null = null;
-          if (
-            finishedWork.alternate !== null &&
-            finishedWork.alternate.memoizedState !== null &&
-            finishedWork.alternate.memoizedState.cachePool !== null
-          ) {
-            previousCache = finishedWork.alternate.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);
-            }
-          }
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        commitCachePassiveMountEffect(current, finishedWork);
+      }
+      break;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+        );
+        if (flags & Passive) {
+          commitTracingMarkerPassiveMountEffect(finishedWork);
         }
+        break;
+      }
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    default: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
+      break;
+    }
+  }
+}
 
-        if (enableTransitionTracing) {
-          const isFallback = finishedWork.memoizedState;
-          const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
-          const instance: OffscreenInstance = finishedWork.stateNode;
-
-          if (queue !== null) {
-            if (isFallback) {
-              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);
-                });
-              }
+function recursivelyTraverseReconnectPassiveEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  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 & PassiveMask) !== NoFlags;
 
-              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);
-                      }
-                    });
-                  }
-                });
-              }
-            }
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  let child = parentFiber.child;
+  while (child !== null) {
+    reconnectPassiveEffects(
+      finishedRoot,
+      child,
+      committedLanes,
+      committedTransitions,
+      childShouldIncludeWorkInProgressEffects,
+    );
+    child = child.sibling;
+  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
+}
 
-            finishedWork.updateQueue = null;
+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,
+) {
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraverseReconnectPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        includeWorkInProgressEffects,
+      );
+      // 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:
+    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,
+          );
+        } else {
+          if (finishedWork.mode & ConcurrentMode) {
+            // The effects are currently disconnected. Since the tree is hidden,
+            // don't connect them. This also applies to the initial render.
+            if (enableCache || enableTransitionTracing) {
+              // "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,
+              );
+            }
+          } else {
+            // Legacy Mode: Fire the effects even if the tree is hidden.
+            instance.visibility |= OffscreenPassiveEffectsConnected;
+            recursivelyTraverseReconnectPassiveEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+              includeWorkInProgressEffects,
+            );
           }
+        }
+      } 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;
 
-          commitTransitionProgress(finishedWork);
+        recursivelyTraverseReconnectPassiveEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          includeWorkInProgressEffects,
+        );
+      }
+
+      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,
+      );
+      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,
+        );
+        if (includeWorkInProgressEffects && flags & Passive) {
+          commitTracingMarkerPassiveMountEffect(finishedWork);
         }
+        break;
+      }
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    default: {
+      recursivelyTraverseReconnectPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        includeWorkInProgressEffects,
+      );
+      break;
+    }
+  }
+}
+
+function recursivelyTraverseAtomicPassiveEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+) {
+  // "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 prevDebugFiber = getCurrentDebugFiberInDEV();
+  // TODO: Add special flag for atomic effects
+  if (parentFiber.subtreeFlags & PassiveMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitAtomicPassiveEffects(
+        finishedRoot,
+        child,
+        committedLanes,
+        committedTransitions,
+      );
+      child = child.sibling;
+    }
+  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
+}
+
+function commitAtomicPassiveEffects(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+) {
+  // "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,
+      );
+      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: {
-      recursivelyTraversePassiveMountEffects(
+      recursivelyTraverseAtomicPassiveEffects(
         finishedRoot,
         finishedWork,
         committedLanes,
         committedTransitions,
       );
       if (flags & Passive) {
-        if (enableCache) {
-          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);
-            }
-          }
-        }
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        commitCachePassiveMountEffect(current, finishedWork);
       }
       break;
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        recursivelyTraversePassiveMountEffects(
+        recursivelyTraverseAtomicPassiveEffects(
           finishedRoot,
           finishedWork,
           committedLanes,
           committedTransitions,
         );
         if (flags & Passive) {
-          // Get the transitions that were initiatized during the render
-          // and add a start transition callback for each of them
-          const instance = finishedWork.stateNode;
-          if (
-            instance.transitions !== null &&
-            (instance.pendingBoundaries === null ||
-              instance.pendingBoundaries.size === 0)
-          ) {
-            instance.transitions.forEach(transition => {
-              addMarkerCompleteCallbackToPendingTransition(
-                finishedWork.memoizedProps.name,
-                instance.transitions,
-              );
-            });
-            instance.transitions = null;
-            instance.pendingBoundaries = null;
-          }
+          commitTracingMarkerPassiveMountEffect(finishedWork);
         }
         break;
       }
@@ -3167,7 +3536,7 @@ function commitPassiveMountOnFiber(
     }
     // eslint-disable-next-line-no-fallthrough
     default: {
-      recursivelyTraversePassiveMountEffects(
+      recursivelyTraverseAtomicPassiveEffects(
         finishedRoot,
         finishedWork,
         committedLanes,
@@ -3275,6 +3644,11 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
       }
       break;
     }
+    // TODO: Disconnect passive effects when a tree is hidden, perhaps after
+    // a delay.
+    // case OffscreenComponent: {
+    //   ...
+    // }
     default: {
       recursivelyTraversePassiveUnmountEffects(finishedWork);
       break;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 4b979151da99..bd16246302de 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -173,6 +173,10 @@ import {
 } from './ReactFiberDevToolsHook.old';
 import {releaseCache, retainCache} from './ReactFiberCacheComponent.old';
 import {clearTransitionsForLanes} from './ReactFiberLane.old';
+import {
+  OffscreenVisible,
+  OffscreenPassiveEffectsConnected,
+} from './ReactFiberOffscreenComponent';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -2424,14 +2428,8 @@ function commitMutationEffectsOnFiber(
       const offscreenFiber: Fiber = (finishedWork.child: any);
 
       if (offscreenFiber.flags & Visibility) {
-        const offscreenInstance: OffscreenInstance = offscreenFiber.stateNode;
         const newState: OffscreenState | null = offscreenFiber.memoizedState;
         const isHidden = newState !== null;
-
-        // Track the current state on the Offscreen instance so we can
-        // read it during an event
-        offscreenInstance.isHidden = isHidden;
-
         if (isHidden) {
           const wasHidden =
             offscreenFiber.alternate !== null &&
@@ -2485,7 +2483,11 @@ function commitMutationEffectsOnFiber(
 
         // Track the current state on the Offscreen instance so we can
         // read it during an event
-        offscreenInstance.isHidden = isHidden;
+        if (isHidden) {
+          offscreenInstance.visibility &= ~OffscreenVisible;
+        } else {
+          offscreenInstance.visibility |= OffscreenVisible;
+        }
 
         if (isHidden) {
           if (!wasHidden) {
@@ -2871,6 +2873,167 @@ function recursivelyTraverseReappearLayoutEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
+function commitHookPassiveMountEffects(
+  finishedWork: Fiber,
+  hookFlags: HookFlags,
+) {
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    finishedWork.mode & ProfileMode
+  ) {
+    startPassiveEffectTimer();
+    try {
+      commitHookEffectListMount(hookFlags, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+    recordPassiveEffectDuration(finishedWork);
+  } else {
+    try {
+      commitHookEffectListMount(hookFlags, finishedWork);
+    } catch (error) {
+      captureCommitPhaseError(finishedWork, finishedWork.return, error);
+    }
+  }
+}
+
+function commitOffscreenPassiveMountEffects(
+  current: Fiber | null,
+  finishedWork: Fiber,
+  instance: OffscreenInstance,
+) {
+  if (enableCache) {
+    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);
+  }
+}
+
+function commitCachePassiveMountEffect(
+  current: Fiber | null,
+  finishedWork: Fiber,
+) {
+  if (enableCache) {
+    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
+  const instance = finishedWork.stateNode;
+  if (
+    instance.transitions !== null &&
+    (instance.pendingBoundaries === null ||
+      instance.pendingBoundaries.size === 0)
+  ) {
+    instance.transitions.forEach(transition => {
+      addMarkerCompleteCallbackToPendingTransition(
+        finishedWork.memoizedProps.name,
+        instance.transitions,
+      );
+    });
+    instance.transitions = null;
+    instance.pendingBoundaries = null;
+  }
+}
+
 export function commitPassiveMountEffects(
   root: FiberRoot,
   finishedWork: Fiber,
@@ -2916,6 +3079,9 @@ function commitPassiveMountOnFiber(
   committedLanes: Lanes,
   committedTransitions: Array<Transition> | null,
 ): void {
+  // 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:
@@ -2928,31 +3094,10 @@ function commitPassiveMountOnFiber(
         committedTransitions,
       );
       if (flags & Passive) {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
-          startPassiveEffectTimer();
-          try {
-            commitHookEffectListMount(
-              HookPassive | HookHasEffect,
-              finishedWork,
-            );
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-          recordPassiveEffectDuration(finishedWork);
-        } else {
-          try {
-            commitHookEffectListMount(
-              HookPassive | HookHasEffect,
-              finishedWork,
-            );
-          } catch (error) {
-            captureCommitPhaseError(finishedWork, finishedWork.return, error);
-          }
-        }
+        commitHookPassiveMountEffects(
+          finishedWork,
+          HookPassive | HookHasEffect,
+        );
       }
       break;
     }
@@ -3013,6 +3158,82 @@ function commitPassiveMountOnFiber(
     }
     case LegacyHiddenComponent:
     case OffscreenComponent: {
+      // TODO: Pass `current` as argument to this function
+      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.
+          recursivelyTraversePassiveMountEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+          );
+        } else {
+          if (finishedWork.mode & ConcurrentMode) {
+            // The effects are currently disconnected. Since the tree is hidden,
+            // don't connect them. This also applies to the initial render.
+            if (enableCache || enableTransitionTracing) {
+              // "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,
+              );
+            }
+          } else {
+            // Legacy Mode: Fire the effects even if the tree is hidden.
+            instance.visibility |= OffscreenPassiveEffectsConnected;
+            recursivelyTraversePassiveMountEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+            );
+          }
+        }
+      } else {
+        // Tree is visible
+        if (instance.visibility & OffscreenPassiveEffectsConnected) {
+          // The effects are currently connected. Update them.
+          recursivelyTraversePassiveMountEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+          );
+        } 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;
+          recursivelyTraverseReconnectPassiveEffects(
+            finishedRoot,
+            finishedWork,
+            committedLanes,
+            committedTransitions,
+            includeWorkInProgressEffects,
+          );
+        }
+      }
+
+      if (flags & Passive) {
+        const current = finishedWork.alternate;
+        commitOffscreenPassiveMountEffects(current, finishedWork, instance);
+      }
+      break;
+    }
+    case CacheComponent: {
       recursivelyTraversePassiveMountEffects(
         finishedRoot,
         finishedWork,
@@ -3020,146 +3241,294 @@ function commitPassiveMountOnFiber(
         committedTransitions,
       );
       if (flags & Passive) {
-        if (enableCache) {
-          let previousCache: Cache | null = null;
-          if (
-            finishedWork.alternate !== null &&
-            finishedWork.alternate.memoizedState !== null &&
-            finishedWork.alternate.memoizedState.cachePool !== null
-          ) {
-            previousCache = finishedWork.alternate.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);
-            }
-          }
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        commitCachePassiveMountEffect(current, finishedWork);
+      }
+      break;
+    }
+    case TracingMarkerComponent: {
+      if (enableTransitionTracing) {
+        recursivelyTraversePassiveMountEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+        );
+        if (flags & Passive) {
+          commitTracingMarkerPassiveMountEffect(finishedWork);
         }
+        break;
+      }
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    default: {
+      recursivelyTraversePassiveMountEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+      );
+      break;
+    }
+  }
+}
 
-        if (enableTransitionTracing) {
-          const isFallback = finishedWork.memoizedState;
-          const queue: OffscreenQueue | null = (finishedWork.updateQueue: any);
-          const instance: OffscreenInstance = finishedWork.stateNode;
-
-          if (queue !== null) {
-            if (isFallback) {
-              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);
-                });
-              }
+function recursivelyTraverseReconnectPassiveEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+  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 & PassiveMask) !== NoFlags;
 
-              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);
-                      }
-                    });
-                  }
-                });
-              }
-            }
+  // TODO (Offscreen) Check: flags & (RefStatic | LayoutStatic)
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  let child = parentFiber.child;
+  while (child !== null) {
+    reconnectPassiveEffects(
+      finishedRoot,
+      child,
+      committedLanes,
+      committedTransitions,
+      childShouldIncludeWorkInProgressEffects,
+    );
+    child = child.sibling;
+  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
+}
 
-            finishedWork.updateQueue = null;
+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,
+) {
+  const flags = finishedWork.flags;
+  switch (finishedWork.tag) {
+    case FunctionComponent:
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      recursivelyTraverseReconnectPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        includeWorkInProgressEffects,
+      );
+      // 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:
+    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,
+          );
+        } else {
+          if (finishedWork.mode & ConcurrentMode) {
+            // The effects are currently disconnected. Since the tree is hidden,
+            // don't connect them. This also applies to the initial render.
+            if (enableCache || enableTransitionTracing) {
+              // "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,
+              );
+            }
+          } else {
+            // Legacy Mode: Fire the effects even if the tree is hidden.
+            instance.visibility |= OffscreenPassiveEffectsConnected;
+            recursivelyTraverseReconnectPassiveEffects(
+              finishedRoot,
+              finishedWork,
+              committedLanes,
+              committedTransitions,
+              includeWorkInProgressEffects,
+            );
           }
+        }
+      } 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;
 
-          commitTransitionProgress(finishedWork);
+        recursivelyTraverseReconnectPassiveEffects(
+          finishedRoot,
+          finishedWork,
+          committedLanes,
+          committedTransitions,
+          includeWorkInProgressEffects,
+        );
+      }
+
+      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,
+      );
+      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,
+        );
+        if (includeWorkInProgressEffects && flags & Passive) {
+          commitTracingMarkerPassiveMountEffect(finishedWork);
         }
+        break;
+      }
+      // Intentional fallthrough to next branch
+    }
+    // eslint-disable-next-line-no-fallthrough
+    default: {
+      recursivelyTraverseReconnectPassiveEffects(
+        finishedRoot,
+        finishedWork,
+        committedLanes,
+        committedTransitions,
+        includeWorkInProgressEffects,
+      );
+      break;
+    }
+  }
+}
+
+function recursivelyTraverseAtomicPassiveEffects(
+  finishedRoot: FiberRoot,
+  parentFiber: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+) {
+  // "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 prevDebugFiber = getCurrentDebugFiberInDEV();
+  // TODO: Add special flag for atomic effects
+  if (parentFiber.subtreeFlags & PassiveMask) {
+    let child = parentFiber.child;
+    while (child !== null) {
+      setCurrentDebugFiberInDEV(child);
+      commitAtomicPassiveEffects(
+        finishedRoot,
+        child,
+        committedLanes,
+        committedTransitions,
+      );
+      child = child.sibling;
+    }
+  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
+}
+
+function commitAtomicPassiveEffects(
+  finishedRoot: FiberRoot,
+  finishedWork: Fiber,
+  committedLanes: Lanes,
+  committedTransitions: Array<Transition> | null,
+) {
+  // "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,
+      );
+      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: {
-      recursivelyTraversePassiveMountEffects(
+      recursivelyTraverseAtomicPassiveEffects(
         finishedRoot,
         finishedWork,
         committedLanes,
         committedTransitions,
       );
       if (flags & Passive) {
-        if (enableCache) {
-          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);
-            }
-          }
-        }
+        // TODO: Pass `current` as argument to this function
+        const current = finishedWork.alternate;
+        commitCachePassiveMountEffect(current, finishedWork);
       }
       break;
     }
     case TracingMarkerComponent: {
       if (enableTransitionTracing) {
-        recursivelyTraversePassiveMountEffects(
+        recursivelyTraverseAtomicPassiveEffects(
           finishedRoot,
           finishedWork,
           committedLanes,
           committedTransitions,
         );
         if (flags & Passive) {
-          // Get the transitions that were initiatized during the render
-          // and add a start transition callback for each of them
-          const instance = finishedWork.stateNode;
-          if (
-            instance.transitions !== null &&
-            (instance.pendingBoundaries === null ||
-              instance.pendingBoundaries.size === 0)
-          ) {
-            instance.transitions.forEach(transition => {
-              addMarkerCompleteCallbackToPendingTransition(
-                finishedWork.memoizedProps.name,
-                instance.transitions,
-              );
-            });
-            instance.transitions = null;
-            instance.pendingBoundaries = null;
-          }
+          commitTracingMarkerPassiveMountEffect(finishedWork);
         }
         break;
       }
@@ -3167,7 +3536,7 @@ function commitPassiveMountOnFiber(
     }
     // eslint-disable-next-line-no-fallthrough
     default: {
-      recursivelyTraversePassiveMountEffects(
+      recursivelyTraverseAtomicPassiveEffects(
         finishedRoot,
         finishedWork,
         committedLanes,
@@ -3275,6 +3644,11 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
       }
       break;
     }
+    // TODO: Disconnect passive effects when a tree is hidden, perhaps after
+    // a delay.
+    // case OffscreenComponent: {
+    //   ...
+    // }
     default: {
       recursivelyTraversePassiveUnmountEffects(finishedWork);
       break;
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index 7a29e8166b7f..e49638978202 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -31,6 +31,7 @@ import {
 } from './ReactFiberLane.new';
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
+import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 
 export type ConcurrentUpdate = {
   next: ConcurrentUpdate,
@@ -217,7 +218,10 @@ function markUpdateLaneFromFiberToRoot(
       // account for it. (There may be other cases that we haven't discovered,
       // too.)
       const offscreenInstance: OffscreenInstance | null = parent.stateNode;
-      if (offscreenInstance !== null && offscreenInstance.isHidden) {
+      if (
+        offscreenInstance !== null &&
+        !(offscreenInstance.visibility & OffscreenVisible)
+      ) {
         isHidden = true;
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 0d2cbb44c96a..7dd87358cf6a 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -31,6 +31,7 @@ import {
 } from './ReactFiberLane.old';
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
+import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 
 export type ConcurrentUpdate = {
   next: ConcurrentUpdate,
@@ -217,7 +218,10 @@ function markUpdateLaneFromFiberToRoot(
       // account for it. (There may be other cases that we haven't discovered,
       // too.)
       const offscreenInstance: OffscreenInstance | null = parent.stateNode;
-      if (offscreenInstance !== null && offscreenInstance.isHidden) {
+      if (
+        offscreenInstance !== null &&
+        !(offscreenInstance.visibility & OffscreenVisible)
+      ) {
         isHidden = true;
       }
     }
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index d22d9a189b6e..961c94bdd168 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -87,7 +87,7 @@ export const MutationMask =
 export const LayoutMask = Update | Callback | Ref | Visibility;
 
 // TODO: Split into PassiveMountMask and PassiveUnmountMask
-export const PassiveMask = Passive | ChildDeletion;
+export const PassiveMask = Passive | Visibility | ChildDeletion;
 
 // Union of tags that don't get reset on clones.
 // This allows certain concepts to persist without recalculating them,
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index ca1a3938410f..7bdaf83b9032 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -42,8 +42,13 @@ export type OffscreenQueue = {|
   wakeables: Set<Wakeable> | null,
 |};
 
+type OffscreenVisibility = number;
+
+export const OffscreenVisible = /*                     */ 0b01;
+export const OffscreenPassiveEffectsConnected = /*     */ 0b10;
+
 export type OffscreenInstance = {|
-  isHidden: boolean,
+  visibility: OffscreenVisibility,
   pendingMarkers: Set<TracingMarkerInstance> | null,
   transitions: Set<Transition> | null,
   retryCache: WeakSet<Wakeable> | Set<Wakeable> | null,
diff --git a/packages/react-reconciler/src/__tests__/ReactCache-test.js b/packages/react-reconciler/src/__tests__/ReactCache-test.js
index 804486721f9c..970bf940f27c 100644
--- a/packages/react-reconciler/src/__tests__/ReactCache-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactCache-test.js
@@ -6,6 +6,7 @@ let getCacheForType;
 let Scheduler;
 let act;
 let Suspense;
+let Offscreen;
 let useCacheRefresh;
 let startTransition;
 let useState;
@@ -23,6 +24,7 @@ describe('ReactCache', () => {
     Scheduler = require('scheduler');
     act = require('jest-react').act;
     Suspense = React.Suspense;
+    Offscreen = React.unstable_Offscreen;
     getCacheSignal = React.unstable_getCacheSignal;
     getCacheForType = React.unstable_getCacheForType;
     useCacheRefresh = React.unstable_useCacheRefresh;
@@ -1590,4 +1592,36 @@ describe('ReactCache', () => {
     ]);
     expect(root).toMatchRenderedOutput('Bye!');
   });
+
+  // @gate enableOffscreen
+  // @gate enableCache
+  test('prerender a new cache boundary inside an Offscreen tree', async () => {
+    function App({prerenderMore}) {
+      return (
+        <Offscreen mode="hidden">
+          <div>
+            {prerenderMore ? (
+              <Cache>
+                <AsyncText text="More" />
+              </Cache>
+            ) : null}
+          </div>
+        </Offscreen>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App prerenderMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded([]);
+    expect(root).toMatchRenderedOutput(<div hidden={true} />);
+
+    seedNextTextCache('More');
+    await act(async () => {
+      root.render(<App prerenderMore={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['More']);
+    expect(root).toMatchRenderedOutput(<div hidden={true}>More</div>);
+  });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index c2fe2f77552b..7658c3aedbdc 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -486,22 +486,29 @@ describe('ReactOffscreen', () => {
     // 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({outer}) {
+    function Child() {
       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.unstable_yieldValue(
-            'Tearing! Inner and outer are inconsistent!',
-          );
-        } else {
-          Scheduler.unstable_yieldValue('Inner and outer are consistent');
-        }
-      }, [inner, outer]);
+        currentInner = inner;
+        return () => {
+          currentInner = null;
+        };
+      }, [inner]);
 
       return <Text text={'Inner: ' + inner} />;
     }
@@ -510,11 +517,19 @@ describe('ReactOffscreen', () => {
     function App({show}) {
       const [outer, _setOuter] = useState(0);
       setOuter = _setOuter;
+
+      useEffect(() => {
+        currentOuter = outer;
+        return () => {
+          currentOuter = null;
+        };
+      }, [outer]);
+
       return (
         <>
           <Text text={'Outer: ' + outer} />
           <Offscreen mode={show ? 'visible' : 'hidden'}>
-            <Child outer={outer} />
+            <Child />
           </Offscreen>
         </>
       );
@@ -525,17 +540,14 @@ describe('ReactOffscreen', () => {
     await act(async () => {
       root.render(<App show={false} />);
     });
-    expect(Scheduler).toHaveYielded([
-      'Outer: 0',
-      'Inner: 0',
-      'Inner and outer are consistent',
-    ]);
+    expect(Scheduler).toHaveYielded(['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
@@ -570,8 +582,6 @@ describe('ReactOffscreen', () => {
         // update were erroneously processed, then Inner would be inconsistent
         // with Outer.
         'Inner: 1',
-
-        'Inner and outer are consistent',
       ]);
       expect(root).toMatchRenderedOutput(
         <>
@@ -579,18 +589,16 @@ describe('ReactOffscreen', () => {
           <span prop="Inner: 1" />
         </>,
       );
+      expect(areOuterAndInnerConsistent()).toBe(true);
     });
-    expect(Scheduler).toHaveYielded([
-      'Outer: 2',
-      'Inner: 2',
-      'Inner and outer are consistent',
-    ]);
+    expect(Scheduler).toHaveYielded(['Outer: 2', 'Inner: 2']);
     expect(root).toMatchRenderedOutput(
       <>
         <span prop="Outer: 2" />
         <span prop="Inner: 2" />
       </>,
     );
+    expect(areOuterAndInnerConsistent()).toBe(true);
   });
 
   // @gate enableOffscreen
@@ -867,4 +875,127 @@ describe('ReactOffscreen', () => {
       ]);
     },
   );
+
+  // @gate enableOffscreen
+  it('defer passive effects when prerendering a new Offscreen tree', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Mount ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showMore}) {
+      return (
+        <>
+          <Child label="Shell" />
+          <Offscreen mode={showMore ? 'visible' : 'hidden'}>
+            <Child label="More" />
+          </Offscreen>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Mount the app without showing the extra content
+    await act(async () => {
+      root.render(<App showMore={false} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      // 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(async () => {
+      root.render(<App showMore={true} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Shell',
+      'More',
+
+      // Mount the passive effects in the newly revealed tree, the ones that
+      // were skipped during pre-rendering.
+      'Mount More',
+    ]);
+  });
+
+  // @gate enableOffscreen
+  it("don't defer passive effects when prerendering in a tree whose effects are already connected", async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Mount ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showMore, step}) {
+      return (
+        <>
+          <Child label={'Shell ' + step} />
+          <Offscreen mode={showMore ? 'visible' : 'hidden'}>
+            <Child label={'More ' + step} />
+          </Offscreen>
+        </>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Mount the app, including the extra content
+    await act(async () => {
+      root.render(<App showMore={true} step={1} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      '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(async () => {
+      root.render(<App showMore={false} step={2} />);
+    });
+    expect(Scheduler).toHaveYielded([
+      // 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',
+    ]);
+  });
 });

From 80f3d88190c07c2da11b5cac58a44c3b90fbc296 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Fri, 29 Jul 2022 19:34:28 -0400
Subject: [PATCH 1497/1603] Mount/unmount passive effects when Offscreen
 visibility changes (#24977)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Remove unnecessary try-catch from passive deletion

The individual unmount calls are already wrapped in a catch block, so
this outer one serves no purpose.

* Extract passive unmount effects to separate functions

I'm about to add a "disconnect passive effects" function that will share
much of the same code as commitPassiveUnmountOnFiber. To minimize the
duplicated code, I've extracted the shared parts into separate
functions, similar to what I did for commitLayoutEffectOnFiber and
reappearLayoutEffects.

This may not save much on code size because Closure will likely inline
some of it, anyway, but it makes it harder for the two paths to
accidentally diverge.

* Mount/unmount passive effects on hide/show

This changes the behavior of Offscreen so that passive effects are
unmounted when the tree is hidden, and re-mounted when the tree is
revealed again. This is already how layout effects worked.

In the future we will likely add an option or heuristic to only unmount
the effects of a hidden tree after a delay. That way if the tree quickly
switches back to visible, we can skip toggling the effects entirely.

This change does not apply to suspended trees, which happen to use
the Offscreen fiber type as an implementation detail. Passive effects
remain mounted while the tree is suspended, for the reason described
above — it's likely that the suspended tree will resolve and switch
back to visible within a short time span.

At a high level, what this capability enables is a feature we refer to
as "resuable state". The real value proposition here isn't so much the
behavior of effects — it's that you can switch back to a previously
rendered tree without losing the state of the UI.

* Add more coverage for nested Offscreen cases
---
 .../src/ReactFiberCommitWork.new.js           | 240 ++++++++++------
 .../src/ReactFiberCommitWork.old.js           | 240 ++++++++++------
 .../src/ReactFiberCompleteWork.new.js         |  25 +-
 .../src/ReactFiberCompleteWork.old.js         |  25 +-
 .../src/__tests__/ReactOffscreen-test.js      | 263 +++++++++++++++++-
 5 files changed, 616 insertions(+), 177 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 4f9b4ce42689..3f7417fc626d 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -3553,6 +3553,60 @@ export function commitPassiveUnmountEffects(finishedWork: Fiber): void {
   resetCurrentDebugFiberInDEV();
 }
 
+function detachAlternateSiblings(parentFiber: Fiber) {
+  if (deletedTreeCleanUpLevel >= 1) {
+    // 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 {
+          const detachedSibling = detachedChild.sibling;
+          detachedChild.sibling = null;
+          detachedChild = detachedSibling;
+        } while (detachedChild !== null);
+      }
+    }
+  }
+}
+
+function commitHookPassiveUnmountEffects(
+  finishedWork: Fiber,
+  nearestMountedAncestor,
+  hookFlags: HookFlags,
+) {
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    finishedWork.mode & ProfileMode
+  ) {
+    startPassiveEffectTimer();
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+    recordPassiveEffectDuration(finishedWork);
+  } else {
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+  }
+}
+
 function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
   // Deletions effects can be scheduled on any fiber type. They need to happen
   // before the children effects have fired.
@@ -3562,44 +3616,15 @@ function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
     if (deletions !== null) {
       for (let i = 0; i < deletions.length; i++) {
         const childToDelete = deletions[i];
-        try {
-          // TODO: Convert this to use recursion
-          nextEffect = childToDelete;
-          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
-            childToDelete,
-            parentFiber,
-          );
-        } catch (error) {
-          captureCommitPhaseError(childToDelete, parentFiber, error);
-        }
-      }
-    }
-
-    if (deletedTreeCleanUpLevel >= 1) {
-      // 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 {
-            const detachedSibling = detachedChild.sibling;
-            detachedChild.sibling = null;
-            detachedChild = detachedSibling;
-          } while (detachedChild !== null);
-        }
+        // TODO: Convert this to use recursion
+        nextEffect = childToDelete;
+        commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+          childToDelete,
+          parentFiber,
+        );
       }
     }
+    detachAlternateSiblings(parentFiber);
   }
 
   const prevDebugFiber = getCurrentDebugFiberInDEV();
@@ -3622,33 +3647,40 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
     case SimpleMemoComponent: {
       recursivelyTraversePassiveUnmountEffects(finishedWork);
       if (finishedWork.flags & Passive) {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
-          startPassiveEffectTimer();
-          commitHookEffectListUnmount(
-            HookPassive | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-          recordPassiveEffectDuration(finishedWork);
-        } else {
-          commitHookEffectListUnmount(
-            HookPassive | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-        }
+        commitHookPassiveUnmountEffects(
+          finishedWork,
+          finishedWork.return,
+          HookPassive | HookHasEffect,
+        );
       }
       break;
     }
-    // TODO: Disconnect passive effects when a tree is hidden, perhaps after
-    // a delay.
-    // case OffscreenComponent: {
-    //   ...
-    // }
+    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);
+      } else {
+        recursivelyTraversePassiveUnmountEffects(finishedWork);
+      }
+
+      break;
+    }
     default: {
       recursivelyTraversePassiveUnmountEffects(finishedWork);
       break;
@@ -3656,6 +3688,70 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
   }
 }
 
+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];
+        // TODO: Convert this to use recursion
+        nextEffect = childToDelete;
+        commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+          childToDelete,
+          parentFiber,
+        );
+      }
+    }
+    detachAlternateSiblings(parentFiber);
+  }
+
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  // TODO: Check PassiveStatic flag
+  let child = parentFiber.child;
+  while (child !== null) {
+    setCurrentDebugFiberInDEV(child);
+    disconnectPassiveEffect(child);
+    child = child.sibling;
+  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
+}
+
+function disconnectPassiveEffect(finishedWork: Fiber): void {
+  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;
+    }
+  }
+}
+
 function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
   deletedSubtreeRoot: Fiber,
   nearestMountedAncestor: Fiber | null,
@@ -3728,25 +3824,11 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        current.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        commitHookEffectListUnmount(
-          HookPassive,
-          current,
-          nearestMountedAncestor,
-        );
-        recordPassiveEffectDuration(current);
-      } else {
-        commitHookEffectListUnmount(
-          HookPassive,
-          current,
-          nearestMountedAncestor,
-        );
-      }
+      commitHookPassiveUnmountEffects(
+        current,
+        nearestMountedAncestor,
+        HookPassive,
+      );
       break;
     }
     // TODO: run passive unmount effects when unmounting a root.
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index bd16246302de..b0e16e8ab2ae 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -3553,6 +3553,60 @@ export function commitPassiveUnmountEffects(finishedWork: Fiber): void {
   resetCurrentDebugFiberInDEV();
 }
 
+function detachAlternateSiblings(parentFiber: Fiber) {
+  if (deletedTreeCleanUpLevel >= 1) {
+    // 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 {
+          const detachedSibling = detachedChild.sibling;
+          detachedChild.sibling = null;
+          detachedChild = detachedSibling;
+        } while (detachedChild !== null);
+      }
+    }
+  }
+}
+
+function commitHookPassiveUnmountEffects(
+  finishedWork: Fiber,
+  nearestMountedAncestor,
+  hookFlags: HookFlags,
+) {
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    finishedWork.mode & ProfileMode
+  ) {
+    startPassiveEffectTimer();
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+    recordPassiveEffectDuration(finishedWork);
+  } else {
+    commitHookEffectListUnmount(
+      hookFlags,
+      finishedWork,
+      nearestMountedAncestor,
+    );
+  }
+}
+
 function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
   // Deletions effects can be scheduled on any fiber type. They need to happen
   // before the children effects have fired.
@@ -3562,44 +3616,15 @@ function recursivelyTraversePassiveUnmountEffects(parentFiber: Fiber): void {
     if (deletions !== null) {
       for (let i = 0; i < deletions.length; i++) {
         const childToDelete = deletions[i];
-        try {
-          // TODO: Convert this to use recursion
-          nextEffect = childToDelete;
-          commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
-            childToDelete,
-            parentFiber,
-          );
-        } catch (error) {
-          captureCommitPhaseError(childToDelete, parentFiber, error);
-        }
-      }
-    }
-
-    if (deletedTreeCleanUpLevel >= 1) {
-      // 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 {
-            const detachedSibling = detachedChild.sibling;
-            detachedChild.sibling = null;
-            detachedChild = detachedSibling;
-          } while (detachedChild !== null);
-        }
+        // TODO: Convert this to use recursion
+        nextEffect = childToDelete;
+        commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+          childToDelete,
+          parentFiber,
+        );
       }
     }
+    detachAlternateSiblings(parentFiber);
   }
 
   const prevDebugFiber = getCurrentDebugFiberInDEV();
@@ -3622,33 +3647,40 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
     case SimpleMemoComponent: {
       recursivelyTraversePassiveUnmountEffects(finishedWork);
       if (finishedWork.flags & Passive) {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
-          startPassiveEffectTimer();
-          commitHookEffectListUnmount(
-            HookPassive | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-          recordPassiveEffectDuration(finishedWork);
-        } else {
-          commitHookEffectListUnmount(
-            HookPassive | HookHasEffect,
-            finishedWork,
-            finishedWork.return,
-          );
-        }
+        commitHookPassiveUnmountEffects(
+          finishedWork,
+          finishedWork.return,
+          HookPassive | HookHasEffect,
+        );
       }
       break;
     }
-    // TODO: Disconnect passive effects when a tree is hidden, perhaps after
-    // a delay.
-    // case OffscreenComponent: {
-    //   ...
-    // }
+    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);
+      } else {
+        recursivelyTraversePassiveUnmountEffects(finishedWork);
+      }
+
+      break;
+    }
     default: {
       recursivelyTraversePassiveUnmountEffects(finishedWork);
       break;
@@ -3656,6 +3688,70 @@ function commitPassiveUnmountOnFiber(finishedWork: Fiber): void {
   }
 }
 
+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];
+        // TODO: Convert this to use recursion
+        nextEffect = childToDelete;
+        commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
+          childToDelete,
+          parentFiber,
+        );
+      }
+    }
+    detachAlternateSiblings(parentFiber);
+  }
+
+  const prevDebugFiber = getCurrentDebugFiberInDEV();
+  // TODO: Check PassiveStatic flag
+  let child = parentFiber.child;
+  while (child !== null) {
+    setCurrentDebugFiberInDEV(child);
+    disconnectPassiveEffect(child);
+    child = child.sibling;
+  }
+  setCurrentDebugFiberInDEV(prevDebugFiber);
+}
+
+function disconnectPassiveEffect(finishedWork: Fiber): void {
+  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;
+    }
+  }
+}
+
 function commitPassiveUnmountEffectsInsideOfDeletedTree_begin(
   deletedSubtreeRoot: Fiber,
   nearestMountedAncestor: Fiber | null,
@@ -3728,25 +3824,11 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
     case FunctionComponent:
     case ForwardRef:
     case SimpleMemoComponent: {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        current.mode & ProfileMode
-      ) {
-        startPassiveEffectTimer();
-        commitHookEffectListUnmount(
-          HookPassive,
-          current,
-          nearestMountedAncestor,
-        );
-        recordPassiveEffectDuration(current);
-      } else {
-        commitHookEffectListUnmount(
-          HookPassive,
-          current,
-          nearestMountedAncestor,
-        );
-      }
+      commitHookPassiveUnmountEffects(
+        current,
+        nearestMountedAncestor,
+        HookPassive,
+      );
       break;
     }
     // TODO: run passive unmount effects when unmounting a root.
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 058a14d802aa..e1d24857c93b 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1513,15 +1513,22 @@ function completeWork(
       const nextState: OffscreenState | null = workInProgress.memoizedState;
       const nextIsHidden = nextState !== null;
 
-      if (current !== null) {
-        const prevState: OffscreenState | null = current.memoizedState;
-        const prevIsHidden = prevState !== null;
-        if (
-          prevIsHidden !== nextIsHidden &&
-          // LegacyHidden doesn't do any hiding — it only pre-renders.
-          (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent)
-        ) {
-          workInProgress.flags |= Visibility;
+      // 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;
+          }
         }
       }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index d21f726693dc..10f8e43e35bd 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1513,15 +1513,22 @@ function completeWork(
       const nextState: OffscreenState | null = workInProgress.memoizedState;
       const nextIsHidden = nextState !== null;
 
-      if (current !== null) {
-        const prevState: OffscreenState | null = current.memoizedState;
-        const prevIsHidden = prevState !== null;
-        if (
-          prevIsHidden !== nextIsHidden &&
-          // LegacyHidden doesn't do any hiding — it only pre-renders.
-          (!enableLegacyHidden || workInProgress.tag !== LegacyHiddenComponent)
-        ) {
-          workInProgress.flags |= Visibility;
+      // 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;
+          }
         }
       }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
index 7658c3aedbdc..4e77f831f928 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreen-test.js
@@ -7,6 +7,7 @@ let Offscreen;
 let useState;
 let useLayoutEffect;
 let useEffect;
+let useMemo;
 let startTransition;
 
 describe('ReactOffscreen', () => {
@@ -22,6 +23,7 @@ describe('ReactOffscreen', () => {
     useState = React.useState;
     useLayoutEffect = React.useLayoutEffect;
     useEffect = React.useEffect;
+    useMemo = React.useMemo;
     startTransition = React.startTransition;
   });
 
@@ -939,7 +941,122 @@ describe('ReactOffscreen', () => {
   });
 
   // @gate enableOffscreen
-  it("don't defer passive effects when prerendering in a tree whose effects are already connected", async () => {
+  it('passive effects are connected and disconnected when the visibility changes', async () => {
+    function Child({step}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue(`Commit mount [${step}]`);
+        return () => {
+          Scheduler.unstable_yieldValue(`Commit unmount [${step}]`);
+        };
+      }, [step]);
+      return <Text text={step} />;
+    }
+
+    function App({show, step}) {
+      return (
+        <Offscreen mode={show ? 'visible' : 'hidden'}>
+          {useMemo(
+            () => (
+              <Child step={step} />
+            ),
+            [step],
+          )}
+        </Offscreen>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App show={true} step={1} />);
+    });
+    expect(Scheduler).toHaveYielded([1, 'Commit mount [1]']);
+    expect(root).toMatchRenderedOutput(<span prop={1} />);
+
+    // Hide the tree. This will unmount the effect.
+    await act(async () => {
+      root.render(<App show={false} step={1} />);
+    });
+    expect(Scheduler).toHaveYielded(['Commit unmount [1]']);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop={1} />);
+
+    // Update.
+    await act(async () => {
+      root.render(<App show={false} step={2} />);
+    });
+    // The update is prerendered but no effects are fired
+    expect(Scheduler).toHaveYielded([2]);
+    expect(root).toMatchRenderedOutput(<span hidden={true} prop={2} />);
+
+    // Reveal the tree.
+    await act(async () => {
+      root.render(<App show={true} step={2} />);
+    });
+    // The update doesn't render because it was already prerendered, but we do
+    // fire the effect.
+    expect(Scheduler).toHaveYielded(['Commit mount [2]']);
+    expect(root).toMatchRenderedOutput(<span prop={2} />);
+  });
+
+  // @gate enableOffscreen
+  it('passive effects are unmounted on hide in the same order as during a deletion: parent before child', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Mount Child');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount Child');
+        };
+      }, []);
+      return <div>Hi</div>;
+    }
+    function Parent() {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Mount Parent');
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount Parent');
+        };
+      }, []);
+      return <Child />;
+    }
+
+    function App({show}) {
+      return (
+        <Offscreen mode={show ? 'visible' : 'hidden'}>
+          <Parent />
+        </Offscreen>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<App show={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Mount Child', 'Mount Parent']);
+
+    // First demonstrate what happens during a normal deletion
+    await act(async () => {
+      root.render(null);
+    });
+    expect(Scheduler).toHaveYielded(['Unmount Parent', 'Unmount Child']);
+
+    // Now redo the same thing but hide instead of deleting
+    await act(async () => {
+      root.render(<App show={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Mount Child', 'Mount Parent']);
+    await act(async () => {
+      root.render(<App show={false} />);
+    });
+    // The order is the same as during a deletion: parent before child
+    expect(Scheduler).toHaveYielded(['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 enableOffscreen
+  it.skip("don't defer passive effects when prerendering in a tree whose effects are already connected", async () => {
     function Child({label}) {
       useEffect(() => {
         Scheduler.unstable_yieldValue('Mount ' + label);
@@ -998,4 +1115,148 @@ describe('ReactOffscreen', () => {
       'Mount More 2',
     ]);
   });
+
+  // @gate enableOffscreen
+  it('does not mount effects when prerendering a nested Offscreen boundary', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Mount ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showOuter, showInner}) {
+      return (
+        <Offscreen mode={showOuter ? 'visible' : 'hidden'}>
+          {useMemo(
+            () => (
+              <div>
+                <Child label="Outer" />
+                {showInner ? (
+                  <Offscreen mode="visible">
+                    <div>
+                      <Child label="Inner" />
+                    </div>
+                  </Offscreen>
+                ) : null}
+              </div>
+            ),
+            [showInner],
+          )}
+        </Offscreen>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender the outer contents. No effects should mount.
+    await act(async () => {
+      root.render(<App showOuter={false} showInner={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Outer']);
+    expect(root).toMatchRenderedOutput(
+      <div hidden={true}>
+        <span prop="Outer" />
+      </div>,
+    );
+
+    // Prerender the inner contents. No effects should mount.
+    await act(async () => {
+      root.render(<App showOuter={false} showInner={true} />);
+    });
+    expect(Scheduler).toHaveYielded(['Outer', 'Inner']);
+    expect(root).toMatchRenderedOutput(
+      <div hidden={true}>
+        <span prop="Outer" />
+        <div>
+          <span prop="Inner" />
+        </div>
+      </div>,
+    );
+
+    // Reveal the prerendered tree
+    await act(async () => {
+      root.render(<App showOuter={true} showInner={true} />);
+    });
+    // The effects fire, but the tree is not re-rendered because it already
+    // prerendered.
+    expect(Scheduler).toHaveYielded(['Mount Outer', 'Mount Inner']);
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <span prop="Outer" />
+        <div>
+          <span prop="Inner" />
+        </div>
+      </div>,
+    );
+  });
+
+  // @gate enableOffscreen
+  it('reveal an outer Offscreen boundary without revealing an inner one', async () => {
+    function Child({label}) {
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('Mount ' + label);
+        return () => {
+          Scheduler.unstable_yieldValue('Unmount ' + label);
+        };
+      }, [label]);
+      return <Text text={label} />;
+    }
+
+    function App({showOuter, showInner}) {
+      return (
+        <Offscreen mode={showOuter ? 'visible' : 'hidden'}>
+          {useMemo(
+            () => (
+              <div>
+                <Child label="Outer" />
+                <Offscreen mode={showInner ? 'visible' : 'hidden'}>
+                  <div>
+                    <Child label="Inner" />
+                  </div>
+                </Offscreen>
+              </div>
+            ),
+            [showInner],
+          )}
+        </Offscreen>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+
+    // Prerender the whole tree.
+    await act(async () => {
+      root.render(<App showOuter={false} showInner={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['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(async () => {
+      root.render(<App showOuter={true} showInner={false} />);
+    });
+    expect(Scheduler).toHaveYielded(['Mount Outer']);
+    expect(root).toMatchRenderedOutput(
+      <div>
+        <span prop="Outer" />
+        <div hidden={true}>
+          <span prop="Inner" />
+        </div>
+      </div>,
+    );
+  });
 });

From 3f3b46c845333be5d8efcd9acb06e3ff57358189 Mon Sep 17 00:00:00 2001
From: Konpaku Youmu <saber2pr@gmail.com>
Date: Sat, 30 Jul 2022 16:57:13 +0800
Subject: [PATCH 1498/1603] docs(react-devtools-inline):
 `react-dom@experimental` instead of `react-dom@experimenal` (#25001)

---
 packages/react-devtools-inline/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index e6566deac3e1..c1037910cede 100644
--- a/packages/react-devtools-inline/README.md
+++ b/packages/react-devtools-inline/README.md
@@ -6,7 +6,7 @@ If you're looking for the standalone React DevTools UI, **we suggest using [`rea
 
 ---
 
-> **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@experimenal`.
+> **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`.
 
 ---
 

From 9fcaf88d58cfd942e2fdd303ae8291dbf4828969 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Mon, 1 Aug 2022 23:30:04 -0400
Subject: [PATCH 1499/1603] Remove rootContainerInstance from unnecessary
 places (#25024)

We only really use this for the create APIs since the DOM requires it.

We could probably use the Host Context for this instead since they're
updated at the same time and the namespace is related to this concept.
---
 .../react-dom/src/client/ReactDOMComponent.js | 12 +-------
 .../src/client/ReactDOMHostConfig.js          | 15 ++--------
 .../src/ReactFabricHostConfig.js              |  3 --
 .../src/ReactNativeHostConfig.js              |  3 --
 .../src/createReactNoop.js                    |  6 +---
 .../src/ReactFiberCompleteWork.new.js         | 30 +++----------------
 .../src/ReactFiberCompleteWork.old.js         | 30 +++----------------
 .../src/ReactFiberHostContext.new.js          |  5 +---
 .../src/ReactFiberHostContext.old.js          |  5 +---
 .../src/ReactFiberHydrationContext.new.js     |  2 --
 .../src/ReactFiberHydrationContext.old.js     |  2 --
 .../src/ReactTestHostConfig.js                |  1 -
 12 files changed, 14 insertions(+), 100 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 19eb70e583b3..93c1534c235b 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -283,7 +283,6 @@ export function trapClickOnNonInteractiveElement(node: HTMLElement) {
 function setInitialDOMProperties(
   tag: string,
   domElement: Element,
-  rootContainerElement: Element | Document | DocumentFragment,
   nextProps: Object,
   isCustomComponentTag: boolean,
 ): void {
@@ -487,7 +486,6 @@ export function setInitialProperties(
   domElement: Element,
   tag: string,
   rawProps: Object,
-  rootContainerElement: Element | Document | DocumentFragment,
 ): void {
   const isCustomComponentTag = isCustomComponent(tag, rawProps);
   if (__DEV__) {
@@ -571,13 +569,7 @@ export function setInitialProperties(
 
   assertValidProps(tag, props);
 
-  setInitialDOMProperties(
-    tag,
-    domElement,
-    rootContainerElement,
-    props,
-    isCustomComponentTag,
-  );
+  setInitialDOMProperties(tag, domElement, props, isCustomComponentTag);
 
   switch (tag) {
     case 'input':
@@ -613,7 +605,6 @@ export function diffProperties(
   tag: string,
   lastRawProps: Object,
   nextRawProps: Object,
-  rootContainerElement: Element | Document | DocumentFragment,
 ): null | Array<mixed> {
   if (__DEV__) {
     validatePropertiesInDevelopment(tag, nextRawProps);
@@ -866,7 +857,6 @@ export function diffHydratedProperties(
   tag: string,
   rawProps: Object,
   parentNamespace: string,
-  rootContainerElement: Element | Document | DocumentFragment,
   isConcurrentMode: boolean,
   shouldWarnDev: boolean,
 ): null | Array<mixed> {
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 3744bbdcdd37..12a14df0f1c1 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -181,7 +181,6 @@ export function getRootHostContext(
 export function getChildHostContext(
   parentHostContext: HostContext,
   type: string,
-  rootContainerInstance: Container,
 ): HostContext {
   if (__DEV__) {
     const parentHostContextDev = ((parentHostContext: any): HostContextDev);
@@ -289,10 +288,9 @@ export function finalizeInitialChildren(
   domElement: Instance,
   type: string,
   props: Props,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
-  setInitialProperties(domElement, type, props, rootContainerInstance);
+  setInitialProperties(domElement, type, props);
   switch (type) {
     case 'button':
     case 'input':
@@ -311,7 +309,6 @@ export function prepareUpdate(
   type: string,
   oldProps: Props,
   newProps: Props,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): null | Array<mixed> {
   if (__DEV__) {
@@ -329,13 +326,7 @@ export function prepareUpdate(
       validateDOMNesting(null, string, ownAncestorInfo);
     }
   }
-  return diffProperties(
-    domElement,
-    type,
-    oldProps,
-    newProps,
-    rootContainerInstance,
-  );
+  return diffProperties(domElement, type, oldProps, newProps);
 }
 
 export function shouldSetTextContent(type: string, props: Props): boolean {
@@ -828,7 +819,6 @@ export function hydrateInstance(
   instance: Instance,
   type: string,
   props: Props,
-  rootContainerInstance: Container,
   hostContext: HostContext,
   internalInstanceHandle: Object,
   shouldWarnDev: boolean,
@@ -855,7 +845,6 @@ export function hydrateInstance(
     type,
     props,
     parentNamespace,
-    rootContainerInstance,
     isConcurrentMode,
     shouldWarnDev,
   );
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 515c4e0f9665..c5c029006578 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -404,7 +404,6 @@ export function finalizeInitialChildren(
   parentInstance: Instance,
   type: string,
   props: Props,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
   return false;
@@ -419,7 +418,6 @@ export function getRootHostContext(
 export function getChildHostContext(
   parentHostContext: HostContext,
   type: string,
-  rootContainerInstance: Container,
 ): HostContext {
   const prevIsInAParentText = parentHostContext.isInAParentText;
   const isInAParentText =
@@ -453,7 +451,6 @@ export function prepareUpdate(
   type: string,
   oldProps: Props,
   newProps: Props,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): null | Object {
   const viewConfig = instance.canonical.viewConfig;
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 10c5e37f41bc..5b03399e103f 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -166,7 +166,6 @@ export function finalizeInitialChildren(
   parentInstance: Instance,
   type: string,
   props: Props,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
   // Don't send a no-op message over the bridge.
@@ -199,7 +198,6 @@ export function getRootHostContext(
 export function getChildHostContext(
   parentHostContext: HostContext,
   type: string,
-  rootContainerInstance: Container,
 ): HostContext {
   const prevIsInAParentText = parentHostContext.isInAParentText;
   const isInAParentText =
@@ -230,7 +228,6 @@ export function prepareUpdate(
   type: string,
   oldProps: Props,
   newProps: Props,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): null | Object {
   return UPDATE_SIGNAL;
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index df2b3a839a52..858c562d48bf 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -276,11 +276,7 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
       return NO_CONTEXT;
     },
 
-    getChildHostContext(
-      parentHostContext: HostContext,
-      type: string,
-      rootcontainerInstance: Container,
-    ) {
+    getChildHostContext(parentHostContext: HostContext, type: string) {
       if (type === 'offscreen') {
         return parentHostContext;
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index e1d24857c93b..7a8843941eee 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -255,7 +255,6 @@ if (supportsMutation) {
     workInProgress: Fiber,
     type: Type,
     newProps: Props,
-    rootContainerInstance: Container,
   ) {
     // If we have an alternate, that means this is an update and we need to
     // schedule a side-effect to do the updates.
@@ -280,7 +279,6 @@ if (supportsMutation) {
       type,
       oldProps,
       newProps,
-      rootContainerInstance,
       currentHostContext,
     );
     // TODO: Type this specific to this type of component.
@@ -458,7 +456,6 @@ if (supportsMutation) {
     workInProgress: Fiber,
     type: Type,
     newProps: Props,
-    rootContainerInstance: Container,
   ) {
     const currentInstance = current.stateNode;
     const oldProps = current.memoizedProps;
@@ -480,7 +477,6 @@ if (supportsMutation) {
         type,
         oldProps,
         newProps,
-        rootContainerInstance,
         currentHostContext,
       );
     }
@@ -501,13 +497,7 @@ if (supportsMutation) {
       recyclableInstance,
     );
     if (
-      finalizeInitialChildren(
-        newInstance,
-        type,
-        newProps,
-        rootContainerInstance,
-        currentHostContext,
-      )
+      finalizeInitialChildren(newInstance, type, newProps, currentHostContext)
     ) {
       markUpdate(workInProgress);
     }
@@ -555,7 +545,6 @@ if (supportsMutation) {
     workInProgress: Fiber,
     type: Type,
     newProps: Props,
-    rootContainerInstance: Container,
   ) {
     // Noop
   };
@@ -964,16 +953,9 @@ function completeWork(
     }
     case HostComponent: {
       popHostContext(workInProgress);
-      const rootContainerInstance = getRootHostContainer();
       const type = workInProgress.type;
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(
-          current,
-          workInProgress,
-          type,
-          newProps,
-          rootContainerInstance,
-        );
+        updateHostComponent(current, workInProgress, type, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -1002,17 +984,14 @@ function completeWork(
           // TODO: Move this and createInstance step into the beginPhase
           // to consolidate.
           if (
-            prepareToHydrateHostInstance(
-              workInProgress,
-              rootContainerInstance,
-              currentHostContext,
-            )
+            prepareToHydrateHostInstance(workInProgress, currentHostContext)
           ) {
             // If changes to the hydrated node need to be applied at the
             // commit-phase we mark this as such.
             markUpdate(workInProgress);
           }
         } else {
+          const rootContainerInstance = getRootHostContainer();
           const instance = createInstance(
             type,
             newProps,
@@ -1033,7 +1012,6 @@ function completeWork(
               instance,
               type,
               newProps,
-              rootContainerInstance,
               currentHostContext,
             )
           ) {
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 10f8e43e35bd..1ff1a5173ec1 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -255,7 +255,6 @@ if (supportsMutation) {
     workInProgress: Fiber,
     type: Type,
     newProps: Props,
-    rootContainerInstance: Container,
   ) {
     // If we have an alternate, that means this is an update and we need to
     // schedule a side-effect to do the updates.
@@ -280,7 +279,6 @@ if (supportsMutation) {
       type,
       oldProps,
       newProps,
-      rootContainerInstance,
       currentHostContext,
     );
     // TODO: Type this specific to this type of component.
@@ -458,7 +456,6 @@ if (supportsMutation) {
     workInProgress: Fiber,
     type: Type,
     newProps: Props,
-    rootContainerInstance: Container,
   ) {
     const currentInstance = current.stateNode;
     const oldProps = current.memoizedProps;
@@ -480,7 +477,6 @@ if (supportsMutation) {
         type,
         oldProps,
         newProps,
-        rootContainerInstance,
         currentHostContext,
       );
     }
@@ -501,13 +497,7 @@ if (supportsMutation) {
       recyclableInstance,
     );
     if (
-      finalizeInitialChildren(
-        newInstance,
-        type,
-        newProps,
-        rootContainerInstance,
-        currentHostContext,
-      )
+      finalizeInitialChildren(newInstance, type, newProps, currentHostContext)
     ) {
       markUpdate(workInProgress);
     }
@@ -555,7 +545,6 @@ if (supportsMutation) {
     workInProgress: Fiber,
     type: Type,
     newProps: Props,
-    rootContainerInstance: Container,
   ) {
     // Noop
   };
@@ -964,16 +953,9 @@ function completeWork(
     }
     case HostComponent: {
       popHostContext(workInProgress);
-      const rootContainerInstance = getRootHostContainer();
       const type = workInProgress.type;
       if (current !== null && workInProgress.stateNode != null) {
-        updateHostComponent(
-          current,
-          workInProgress,
-          type,
-          newProps,
-          rootContainerInstance,
-        );
+        updateHostComponent(current, workInProgress, type, newProps);
 
         if (current.ref !== workInProgress.ref) {
           markRef(workInProgress);
@@ -1002,17 +984,14 @@ function completeWork(
           // TODO: Move this and createInstance step into the beginPhase
           // to consolidate.
           if (
-            prepareToHydrateHostInstance(
-              workInProgress,
-              rootContainerInstance,
-              currentHostContext,
-            )
+            prepareToHydrateHostInstance(workInProgress, currentHostContext)
           ) {
             // If changes to the hydrated node need to be applied at the
             // commit-phase we mark this as such.
             markUpdate(workInProgress);
           }
         } else {
+          const rootContainerInstance = getRootHostContainer();
           const instance = createInstance(
             type,
             newProps,
@@ -1033,7 +1012,6 @@ function completeWork(
               instance,
               type,
               newProps,
-              rootContainerInstance,
               currentHostContext,
             )
           ) {
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.new.js b/packages/react-reconciler/src/ReactFiberHostContext.new.js
index e7d9433136ad..282414a658cb 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.new.js
@@ -75,11 +75,8 @@ function getHostContext(): HostContext {
 }
 
 function pushHostContext(fiber: Fiber): void {
-  const rootInstance: Container = requiredContext(
-    rootInstanceStackCursor.current,
-  );
   const context: HostContext = requiredContext(contextStackCursor.current);
-  const nextContext = getChildHostContext(context, fiber.type, rootInstance);
+  const nextContext = getChildHostContext(context, fiber.type);
 
   // Don't push this Fiber's context unless it's unique.
   if (context === nextContext) {
diff --git a/packages/react-reconciler/src/ReactFiberHostContext.old.js b/packages/react-reconciler/src/ReactFiberHostContext.old.js
index 667aeaf0ddef..a4735b4bb697 100644
--- a/packages/react-reconciler/src/ReactFiberHostContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHostContext.old.js
@@ -75,11 +75,8 @@ function getHostContext(): HostContext {
 }
 
 function pushHostContext(fiber: Fiber): void {
-  const rootInstance: Container = requiredContext(
-    rootInstanceStackCursor.current,
-  );
   const context: HostContext = requiredContext(contextStackCursor.current);
-  const nextContext = getChildHostContext(context, fiber.type, rootInstance);
+  const nextContext = getChildHostContext(context, fiber.type);
 
   // Don't push this Fiber's context unless it's unique.
   if (context === nextContext) {
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 141abb712c8f..fd3f9b18a492 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -444,7 +444,6 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
 
 function prepareToHydrateHostInstance(
   fiber: Fiber,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
@@ -460,7 +459,6 @@ function prepareToHydrateHostInstance(
     instance,
     fiber.type,
     fiber.memoizedProps,
-    rootContainerInstance,
     hostContext,
     fiber,
     shouldWarnIfMismatchDev,
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 736463823d38..9ac9e4dc666b 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -444,7 +444,6 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
 
 function prepareToHydrateHostInstance(
   fiber: Fiber,
-  rootContainerInstance: Container,
   hostContext: HostContext,
 ): boolean {
   if (!supportsHydration) {
@@ -460,7 +459,6 @@ function prepareToHydrateHostInstance(
     instance,
     fiber.type,
     fiber.memoizedProps,
-    rootContainerInstance,
     hostContext,
     fiber,
     shouldWarnIfMismatchDev,
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index 840912db3088..e049c3500c70 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -128,7 +128,6 @@ export function getRootHostContext(
 export function getChildHostContext(
   parentHostContext: HostContext,
   type: string,
-  rootContainerInstance: Container,
 ): HostContext {
   return NO_CONTEXT;
 }

From e193be87e683fd7c1a03f09505013c67a454040f Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 3 Aug 2022 13:24:41 -0400
Subject: [PATCH 1500/1603] [Transition Tracing] Add Offscreen Test (#25035)

Add a test to make sure offscreen trees don't stop transitions from completing.
---
 .../__tests__/ReactTransitionTracing-test.js  | 72 +++++++++++++++++++
 1 file changed, 72 insertions(+)

diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index fe2d4e008f94..ae4812afa8ec 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -16,6 +16,7 @@ let act;
 let getCacheForType;
 let useState;
 let Suspense;
+let Offscreen;
 let startTransition;
 
 let caches;
@@ -34,6 +35,7 @@ describe('ReactInteractionTracing', () => {
     useState = React.useState;
     startTransition = React.startTransition;
     Suspense = React.Suspense;
+    Offscreen = React.unstable_Offscreen;
 
     getCacheForType = React.unstable_getCacheForType;
 
@@ -1362,4 +1364,74 @@ describe('ReactInteractionTracing', () => {
       ]);
     });
   });
+
+  // @gate enableTransitionTracing
+  it('offscreen trees should not stop transition from completing', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App() {
+      return (
+        <React.unstable_TracingMarker name="marker">
+          <Suspense fallback={<Text text="Loading..." />}>
+            <AsyncText text="Text" />
+          </Suspense>
+          <Offscreen mode="hidden">
+            <Suspense fallback={<Text text="Hidden Loading..." />}>
+              <AsyncText text="Hidden Text" />
+            </Suspense>
+          </Offscreen>
+        </React.unstable_TracingMarker>
+      );
+    }
+
+    const root = ReactNoop.createRoot({
+      unstable_transitionCallbacks: transitionCallbacks,
+    });
+    await act(() => {
+      startTransition(() => root.render(<App />), {name: 'transition'});
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Text]',
+      'Loading...',
+      'Suspend [Hidden Text]',
+      'Hidden Loading...',
+      'onTransitionStart(transition, 0)',
+    ]);
+
+    await act(() => {
+      resolveText('Text');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    expect(Scheduler).toHaveYielded([
+      'Text',
+      'onMarkerComplete(transition, marker, 0, 2000)',
+      'onTransitionComplete(transition, 0, 2000)',
+    ]);
+
+    await act(() => {
+      resolveText('Hidden Text');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    expect(Scheduler).toHaveYielded(['Hidden Text']);
+  });
 });

From b4204ede66284e7153ffb11fd434cd9b9a64a56f Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 3 Aug 2022 17:03:53 -0400
Subject: [PATCH 1501/1603] Clean up unused Deletion flag (#24992)

This was replaced by the ChildDeletion flag when we refactored the
commit phase.
---
 .../react-reconciler/src/ReactFiberFlags.js   | 55 +++++++++----------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 961c94bdd168..0f755d865f42 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,53 +12,52 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b00000000000000000000000000;
-export const PerformedWork = /*                */ 0b00000000000000000000000001;
+export const NoFlags = /*                      */ 0b0000000000000000000000000;
+export const PerformedWork = /*                */ 0b0000000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b00000000000000000000000010;
-export const Update = /*                       */ 0b00000000000000000000000100;
-export const Deletion = /*                     */ 0b00000000000000000000001000;
-export const ChildDeletion = /*                */ 0b00000000000000000000010000;
-export const ContentReset = /*                 */ 0b00000000000000000000100000;
-export const Callback = /*                     */ 0b00000000000000000001000000;
-export const DidCapture = /*                   */ 0b00000000000000000010000000;
-export const ForceClientRender = /*            */ 0b00000000000000000100000000;
-export const Ref = /*                          */ 0b00000000000000001000000000;
-export const Snapshot = /*                     */ 0b00000000000000010000000000;
-export const Passive = /*                      */ 0b00000000000000100000000000;
-export const Hydrating = /*                    */ 0b00000000000001000000000000;
-export const Visibility = /*                   */ 0b00000000000010000000000000;
-export const StoreConsistency = /*             */ 0b00000000000100000000000000;
+export const Placement = /*                    */ 0b0000000000000000000000010;
+export const Update = /*                       */ 0b0000000000000000000000100;
+export const ChildDeletion = /*                */ 0b0000000000000000000001000;
+export const ContentReset = /*                 */ 0b0000000000000000000010000;
+export const Callback = /*                     */ 0b0000000000000000000100000;
+export const DidCapture = /*                   */ 0b0000000000000000001000000;
+export const ForceClientRender = /*            */ 0b0000000000000000010000000;
+export const Ref = /*                          */ 0b0000000000000000100000000;
+export const Snapshot = /*                     */ 0b0000000000000001000000000;
+export const Passive = /*                      */ 0b0000000000000010000000000;
+export const Hydrating = /*                    */ 0b0000000000000100000000000;
+export const Visibility = /*                   */ 0b0000000000001000000000000;
+export const StoreConsistency = /*             */ 0b0000000000010000000000000;
 
 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 = /*               */ 0b00000000000111111111111111;
+export const HostEffectMask = /*               */ 0b0000000000011111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b00000000001000000000000000;
-export const ShouldCapture = /*                */ 0b00000000010000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b00000000100000000000000000;
-export const DidPropagateContext = /*          */ 0b00000001000000000000000000;
-export const NeedsPropagation = /*             */ 0b00000010000000000000000000;
-export const Forked = /*                       */ 0b00000100000000000000000000;
+export const Incomplete = /*                   */ 0b0000000000100000000000000;
+export const ShouldCapture = /*                */ 0b0000000001000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b0000000010000000000000000;
+export const DidPropagateContext = /*          */ 0b0000000100000000000000000;
+export const NeedsPropagation = /*             */ 0b0000001000000000000000000;
+export const Forked = /*                       */ 0b0000010000000000000000000;
 
 // 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 RefStatic = /*                    */ 0b00001000000000000000000000;
-export const LayoutStatic = /*                 */ 0b00010000000000000000000000;
-export const PassiveStatic = /*                */ 0b00100000000000000000000000;
+export const RefStatic = /*                    */ 0b0000100000000000000000000;
+export const LayoutStatic = /*                 */ 0b0001000000000000000000000;
+export const PassiveStatic = /*                */ 0b0010000000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b01000000000000000000000000;
-export const MountPassiveDev = /*              */ 0b10000000000000000000000000;
+export const MountLayoutDev = /*               */ 0b0100000000000000000000000;
+export const MountPassiveDev = /*              */ 0b1000000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.

From ca990e9a753597768765e71c98fe650789c9ee8b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 4 Aug 2022 21:20:15 -0400
Subject: [PATCH 1502/1603] Add API to force Scheduler to yield for macrotask
 (#25044)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We need a way to yield control of the main thread and schedule a
continuation in a separate macrotask. (This is related to some Suspense
optimizations we have planned.)

Our solution needs account for how Scheduler is implemented. Scheduler
tasks are not 1:1 with real browser macrotasks — many Scheduler "tasks"
can be executed within a single browser task. If a Scheduler task yields
control and posts a continuation, but there's still time left in the
frame, Scheduler will execute the continuation immediately
(synchronously) without yielding control back to the main thread. That's
not what we want — we want to schedule a new macrotask regardless of
where we are in the browser's render cycle.

There are several ways we could approach this. What I ended up doing was
adding a new Scheduler method `unstable_requestYield`. (It's similar to
the existing `unstable_requestPaint` that we use to yield at the end of
the frame.)

It works by setting the internal start time of the current work loop to
a large negative number, so that when the `shouldYield` call computes
how much time has elapsed, it's guaranteed to exceed the deadline. The
advantage of doing it this way is that there are no additional checks in
the normal hot path of the work loop.

The existing layering between Scheduler and React DOM is not ideal. None
of the APIs are public, so despite the fact that Scheduler is a separate
package, I consider that a private implementation detail, and think of
them as part of the same unit.

So for now, though, I think it makes sense to implement this macrotask
logic directly inside of Scheduler instead of layering it on top.

The rough eventual plan for Scheduler is turn it into a `postTask`
prollyfill. Because `postTask` does not yet have an equivalent for
`shouldYield`, we would split that out into its own layer, perhaps
directly inside the reconciler. In that world, the macrotask logic I've
added in this commit would likely live in that same layer. When the
native `postTask` is available, we may not even need any additional
logic because it uses actual browser tasks.
---
 .../npm/umd/scheduler.development.js          |  8 +++
 .../npm/umd/scheduler.production.min.js       |  8 +++
 .../npm/umd/scheduler.profiling.min.js        |  8 +++
 .../scheduler/src/__tests__/Scheduler-test.js | 49 +++++++++++++++++++
 .../src/__tests__/SchedulerMock-test.js       | 34 +++++++++++++
 .../src/__tests__/SchedulerPostTask-test.js   | 49 +++++++++++++++++++
 packages/scheduler/src/forks/Scheduler.js     | 10 ++--
 packages/scheduler/src/forks/SchedulerMock.js |  6 +++
 .../scheduler/src/forks/SchedulerPostTask.js  |  5 ++
 9 files changed, 174 insertions(+), 3 deletions(-)

diff --git a/packages/scheduler/npm/umd/scheduler.development.js b/packages/scheduler/npm/umd/scheduler.development.js
index b960dc91132e..21316812d145 100644
--- a/packages/scheduler/npm/umd/scheduler.development.js
+++ b/packages/scheduler/npm/umd/scheduler.development.js
@@ -54,6 +54,13 @@
     );
   }
 
+  function unstable_requestYield() {
+    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestYield.apply(
+      this,
+      arguments
+    );
+  }
+
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -116,6 +123,7 @@
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
     unstable_requestPaint: unstable_requestPaint,
+    unstable_requestYield: unstable_requestYield,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
diff --git a/packages/scheduler/npm/umd/scheduler.production.min.js b/packages/scheduler/npm/umd/scheduler.production.min.js
index 0c2584331b84..41c76570e1ab 100644
--- a/packages/scheduler/npm/umd/scheduler.production.min.js
+++ b/packages/scheduler/npm/umd/scheduler.production.min.js
@@ -54,6 +54,13 @@
     );
   }
 
+  function unstable_requestYield() {
+    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestYield.apply(
+      this,
+      arguments
+    );
+  }
+
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -110,6 +117,7 @@
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
     unstable_requestPaint: unstable_requestPaint,
+    unstable_requestYield: unstable_requestYield,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
diff --git a/packages/scheduler/npm/umd/scheduler.profiling.min.js b/packages/scheduler/npm/umd/scheduler.profiling.min.js
index 0c2584331b84..41c76570e1ab 100644
--- a/packages/scheduler/npm/umd/scheduler.profiling.min.js
+++ b/packages/scheduler/npm/umd/scheduler.profiling.min.js
@@ -54,6 +54,13 @@
     );
   }
 
+  function unstable_requestYield() {
+    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestYield.apply(
+      this,
+      arguments
+    );
+  }
+
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -110,6 +117,7 @@
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
     unstable_requestPaint: unstable_requestPaint,
+    unstable_requestYield: unstable_requestYield,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
diff --git a/packages/scheduler/src/__tests__/Scheduler-test.js b/packages/scheduler/src/__tests__/Scheduler-test.js
index 6df0a3ba1d24..82cd773629a2 100644
--- a/packages/scheduler/src/__tests__/Scheduler-test.js
+++ b/packages/scheduler/src/__tests__/Scheduler-test.js
@@ -18,6 +18,8 @@ let performance;
 let cancelCallback;
 let scheduleCallback;
 let requestPaint;
+let requestYield;
+let shouldYield;
 let NormalPriority;
 
 // The Scheduler implementation uses browser APIs like `MessageChannel` and
@@ -42,6 +44,8 @@ describe('SchedulerBrowser', () => {
     scheduleCallback = Scheduler.unstable_scheduleCallback;
     NormalPriority = Scheduler.unstable_NormalPriority;
     requestPaint = Scheduler.unstable_requestPaint;
+    requestYield = Scheduler.unstable_requestYield;
+    shouldYield = Scheduler.unstable_shouldYield;
   });
 
   afterEach(() => {
@@ -475,4 +479,49 @@ describe('SchedulerBrowser', () => {
       'Yield at 5ms',
     ]);
   });
+
+  it('requestYield forces a yield immediately', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Original Task');
+      runtime.log('shouldYield: ' + shouldYield());
+      runtime.log('requestYield');
+      requestYield();
+      runtime.log('shouldYield: ' + shouldYield());
+      return () => {
+        runtime.log('Continuation Task');
+        runtime.log('shouldYield: ' + shouldYield());
+        runtime.log('Advance time past frame deadline');
+        runtime.advanceTime(10000);
+        runtime.log('shouldYield: ' + shouldYield());
+      };
+    });
+    runtime.assertLog(['Post Message']);
+
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Original Task',
+      'shouldYield: false',
+      'requestYield',
+      // Immediately after calling requestYield, shouldYield starts
+      // returning true, even though no time has elapsed in the frame
+      'shouldYield: true',
+
+      // The continuation should be scheduled in a separate macrotask.
+      'Post Message',
+    ]);
+
+    // No time has elapsed
+    expect(performance.now()).toBe(0);
+
+    // Subsequent tasks work as normal
+    runtime.fireMessageEvent();
+    runtime.assertLog([
+      'Message Event',
+      'Continuation Task',
+      'shouldYield: false',
+      'Advance time past frame deadline',
+      'shouldYield: true',
+    ]);
+  });
 });
diff --git a/packages/scheduler/src/__tests__/SchedulerMock-test.js b/packages/scheduler/src/__tests__/SchedulerMock-test.js
index c4bcee206181..8b01ec3c0e31 100644
--- a/packages/scheduler/src/__tests__/SchedulerMock-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerMock-test.js
@@ -725,5 +725,39 @@ describe('Scheduler', () => {
       scheduleCallback(ImmediatePriority, 42);
       expect(Scheduler).toFlushWithoutYielding();
     });
+
+    it('requestYield forces a yield immediately', () => {
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.unstable_yieldValue('Original Task');
+        Scheduler.unstable_yieldValue(
+          'shouldYield: ' + Scheduler.unstable_shouldYield(),
+        );
+        Scheduler.unstable_yieldValue('requestYield');
+        Scheduler.unstable_requestYield();
+        Scheduler.unstable_yieldValue(
+          'shouldYield: ' + Scheduler.unstable_shouldYield(),
+        );
+        return () => {
+          Scheduler.unstable_yieldValue('Continuation Task');
+          Scheduler.unstable_yieldValue(
+            'shouldYield: ' + Scheduler.unstable_shouldYield(),
+          );
+          Scheduler.unstable_yieldValue('Advance time past frame deadline');
+          Scheduler.unstable_yieldValue(
+            'shouldYield: ' + Scheduler.unstable_shouldYield(),
+          );
+        };
+      });
+
+      // The continuation should be scheduled in a separate macrotask.
+      expect(Scheduler).toFlushUntilNextPaint([
+        'Original Task',
+        'shouldYield: false',
+        'requestYield',
+        // Immediately after calling requestYield, shouldYield starts
+        // returning true
+        'shouldYield: true',
+      ]);
+    });
   });
 });
diff --git a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
index 19c38ad8972f..2dbb96dd8993 100644
--- a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
@@ -22,6 +22,8 @@ let NormalPriority;
 let UserBlockingPriority;
 let LowPriority;
 let IdlePriority;
+let shouldYield;
+let requestYield;
 
 // The Scheduler postTask implementation uses a new postTask browser API to
 // schedule work on the main thread. This test suite mocks all browser methods
@@ -44,6 +46,8 @@ describe('SchedulerPostTask', () => {
     NormalPriority = Scheduler.unstable_NormalPriority;
     LowPriority = Scheduler.unstable_LowPriority;
     IdlePriority = Scheduler.unstable_IdlePriority;
+    shouldYield = Scheduler.unstable_shouldYield;
+    requestYield = Scheduler.unstable_requestYield;
   });
 
   afterEach(() => {
@@ -296,4 +300,49 @@ describe('SchedulerPostTask', () => {
       'E',
     ]);
   });
+
+  it('requestYield forces a yield immediately', () => {
+    scheduleCallback(NormalPriority, () => {
+      runtime.log('Original Task');
+      runtime.log('shouldYield: ' + shouldYield());
+      runtime.log('requestYield');
+      requestYield();
+      runtime.log('shouldYield: ' + shouldYield());
+      return () => {
+        runtime.log('Continuation Task');
+        runtime.log('shouldYield: ' + shouldYield());
+        runtime.log('Advance time past frame deadline');
+        runtime.advanceTime(10000);
+        runtime.log('shouldYield: ' + shouldYield());
+      };
+    });
+    runtime.assertLog(['Post Task 0 [user-visible]']);
+
+    runtime.flushTasks();
+    runtime.assertLog([
+      'Task 0 Fired',
+      'Original Task',
+      'shouldYield: false',
+      'requestYield',
+      // Immediately after calling requestYield, shouldYield starts
+      // returning true, even though no time has elapsed in the frame
+      'shouldYield: true',
+
+      // The continuation should be scheduled in a separate macrotask.
+      'Post Task 1 [user-visible]',
+    ]);
+
+    // No time has elapsed
+    expect(performance.now()).toBe(0);
+
+    // Subsequent tasks work as normal
+    runtime.flushTasks();
+    runtime.assertLog([
+      'Task 1 Fired',
+      'Continuation Task',
+      'shouldYield: false',
+      'Advance time past frame deadline',
+      'shouldYield: true',
+    ]);
+  });
 });
diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index 0b7c54c10ba8..ea440375a35a 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -495,6 +495,11 @@ function requestPaint() {
   // Since we yield every frame regardless, `requestPaint` has no effect.
 }
 
+function requestYield() {
+  // Force a yield at the next opportunity.
+  startTime = -99999;
+}
+
 function forceFrameRate(fps) {
   if (fps < 0 || fps > 125) {
     // Using console['error'] to evade Babel and ESLint
@@ -598,8 +603,6 @@ function cancelHostTimeout() {
   taskTimeoutID = -1;
 }
 
-const unstable_requestPaint = requestPaint;
-
 export {
   ImmediatePriority as unstable_ImmediatePriority,
   UserBlockingPriority as unstable_UserBlockingPriority,
@@ -613,7 +616,8 @@ export {
   unstable_wrapCallback,
   unstable_getCurrentPriorityLevel,
   shouldYieldToHost as unstable_shouldYield,
-  unstable_requestPaint,
+  requestPaint as unstable_requestPaint,
+  requestYield as unstable_requestYield,
   unstable_continueExecution,
   unstable_pauseExecution,
   unstable_getFirstCallbackNode,
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 5f7c8dc8e83a..6898be823904 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -608,6 +608,11 @@ function requestPaint() {
   needsPaint = true;
 }
 
+function requestYield() {
+  // Force a yield at the next opportunity.
+  shouldYieldForPaint = needsPaint = true;
+}
+
 export {
   ImmediatePriority as unstable_ImmediatePriority,
   UserBlockingPriority as unstable_UserBlockingPriority,
@@ -622,6 +627,7 @@ export {
   unstable_getCurrentPriorityLevel,
   shouldYieldToHost as unstable_shouldYield,
   requestPaint as unstable_requestPaint,
+  requestYield as unstable_requestYield,
   unstable_continueExecution,
   unstable_pauseExecution,
   unstable_getFirstCallbackNode,
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
index c07f7f03819c..4e51a5873430 100644
--- a/packages/scheduler/src/forks/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -67,6 +67,11 @@ export function unstable_requestPaint() {
   // Since we yield every frame regardless, `requestPaint` has no effect.
 }
 
+export function unstable_requestYield() {
+  // Force a yield at the next opportunity.
+  deadline = -99999;
+}
+
 type SchedulerCallback<T> = (
   didTimeout_DEPRECATED: boolean,
 ) =>

From 17e2a15bea2df9232411a35c6d967fa18f6e8b25 Mon Sep 17 00:00:00 2001
From: Krishnamohan Yerrabilli <krishnamohan72452964@gmail.com>
Date: Mon, 8 Aug 2022 17:01:34 +0530
Subject: [PATCH 1503/1603] Added a comma to understand better the Readme file
 for the contributor and the viewer. (#24798)

* Small change for Readme file

Added a comma, for better understanding for the contributor and the viewer.

* Update CODE_OF_CONDUCT.md

* Updated, requested changes are done!
---
 CODE_OF_CONDUCT.md | 2 +-
 README.md          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 08b500a22185..3f798c90cdb8 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -26,7 +26,7 @@ Examples of unacceptable behavior by participants include:
   advances
 * Trolling, insulting/derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing others' private information, such as a physical or electronic
+* Publishing other's private information, such as a physical or electronic
   address, without explicit permission
 * Other conduct which could reasonably be considered inappropriate in a
   professional setting
diff --git a/README.md b/README.md
index d2f0e08ecc94..d543ce96788e 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ root.render(<HelloMessage name="Taylor" />);
 
 This example will render "Hello Taylor" into a container on the page.
 
-You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
+You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
 
 ## Contributing
 

From 7a227276e653b481b73ed9e9178244b53d61f730 Mon Sep 17 00:00:00 2001
From: ZA Syed <49692373+zahad-a-s@users.noreply.github.com>
Date: Wed, 10 Aug 2022 15:14:31 -0400
Subject: [PATCH 1504/1603] revert last grammatical edit (#25067)

on line 29, #24798 edited (others') to (other's); however, the subject here is plural (e.g. "others in the community"), thus (others') is grammatically correct
---
 CODE_OF_CONDUCT.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 3f798c90cdb8..08b500a22185 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -26,7 +26,7 @@ Examples of unacceptable behavior by participants include:
   advances
 * Trolling, insulting/derogatory comments, and personal or political attacks
 * Public or private harassment
-* Publishing other's private information, such as a physical or electronic
+* 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

From 7bcc687720bbb31873768399dd87c27d8c231011 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Thu, 11 Aug 2022 15:24:56 +0200
Subject: [PATCH 1505/1603] Remove argument committedLanes from
 reappearLayoutEffects and recursivelyTraverseReappearLayoutEffects (#25080)

---
 .../react-reconciler/src/ReactFiberCommitWork.new.js  | 11 -----------
 .../react-reconciler/src/ReactFiberCommitWork.old.js  | 11 -----------
 2 files changed, 22 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 3f7417fc626d..6a8b095f11a2 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -1099,7 +1099,6 @@ function commitLayoutEffectOnFiber(
             recursivelyTraverseReappearLayoutEffects(
               finishedRoot,
               finishedWork,
-              committedLanes,
               includeWorkInProgressEffects,
             );
           } else {
@@ -2704,7 +2703,6 @@ function reappearLayoutEffects(
   finishedRoot: FiberRoot,
   current: Fiber | null,
   finishedWork: Fiber,
-  committedLanes: Lanes,
   // 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.
@@ -2719,7 +2717,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
       // TODO: Check flags & LayoutStatic
@@ -2730,7 +2727,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
 
@@ -2772,7 +2768,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
 
@@ -2792,7 +2787,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
       // TODO: Figure out how Profiler updates should work with Offscreen
@@ -2805,7 +2799,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
 
@@ -2825,7 +2818,6 @@ function reappearLayoutEffects(
         recursivelyTraverseReappearLayoutEffects(
           finishedRoot,
           finishedWork,
-          committedLanes,
           includeWorkInProgressEffects,
         );
       }
@@ -2835,7 +2827,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
       break;
@@ -2846,7 +2837,6 @@ function reappearLayoutEffects(
 function recursivelyTraverseReappearLayoutEffects(
   finishedRoot: FiberRoot,
   parentFiber: Fiber,
-  committedLanes: Lanes,
   includeWorkInProgressEffects: boolean,
 ) {
   // This function visits both newly finished work and nodes that were re-used
@@ -2865,7 +2855,6 @@ function recursivelyTraverseReappearLayoutEffects(
       finishedRoot,
       current,
       child,
-      committedLanes,
       childShouldIncludeWorkInProgressEffects,
     );
     child = child.sibling;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index b0e16e8ab2ae..651414549b09 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -1099,7 +1099,6 @@ function commitLayoutEffectOnFiber(
             recursivelyTraverseReappearLayoutEffects(
               finishedRoot,
               finishedWork,
-              committedLanes,
               includeWorkInProgressEffects,
             );
           } else {
@@ -2704,7 +2703,6 @@ function reappearLayoutEffects(
   finishedRoot: FiberRoot,
   current: Fiber | null,
   finishedWork: Fiber,
-  committedLanes: Lanes,
   // 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.
@@ -2719,7 +2717,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
       // TODO: Check flags & LayoutStatic
@@ -2730,7 +2727,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
 
@@ -2772,7 +2768,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
 
@@ -2792,7 +2787,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
       // TODO: Figure out how Profiler updates should work with Offscreen
@@ -2805,7 +2799,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
 
@@ -2825,7 +2818,6 @@ function reappearLayoutEffects(
         recursivelyTraverseReappearLayoutEffects(
           finishedRoot,
           finishedWork,
-          committedLanes,
           includeWorkInProgressEffects,
         );
       }
@@ -2835,7 +2827,6 @@ function reappearLayoutEffects(
       recursivelyTraverseReappearLayoutEffects(
         finishedRoot,
         finishedWork,
-        committedLanes,
         includeWorkInProgressEffects,
       );
       break;
@@ -2846,7 +2837,6 @@ function reappearLayoutEffects(
 function recursivelyTraverseReappearLayoutEffects(
   finishedRoot: FiberRoot,
   parentFiber: Fiber,
-  committedLanes: Lanes,
   includeWorkInProgressEffects: boolean,
 ) {
   // This function visits both newly finished work and nodes that were re-used
@@ -2865,7 +2855,6 @@ function recursivelyTraverseReappearLayoutEffects(
       finishedRoot,
       current,
       child,
-      committedLanes,
       childShouldIncludeWorkInProgressEffects,
     );
     child = child.sibling;

From 4e60dbd90506ab7e08f9fe13922e18a1778b9bcb Mon Sep 17 00:00:00 2001
From: Robert Balicki <robert.balicki@gmail.com>
Date: Thu, 11 Aug 2022 16:47:02 -0700
Subject: [PATCH 1506/1603] [easy] Clarify folders in react devtools readme
 #25077

Clarify the folder from which we run various commands in the react-devtools readme
---
 packages/react-devtools/README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
index cb13ff78a7c6..e64cae6bc7d9 100644
--- a/packages/react-devtools/README.md
+++ b/packages/react-devtools/README.md
@@ -129,7 +129,7 @@ To use the latest build from CI, run the following command from the root of the
 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 `../react-devtools-core`
-* Run `yarn start` in this folder
+* 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.

From 8ef3a7c08c55c13995267902859381da8b5985ac Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 11 Aug 2022 22:01:56 -0400
Subject: [PATCH 1507/1603] Resume immediately pinged fiber without unwinding
 (#25074)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Yield to main thread if continuation is returned

Instead of using an imperative method `requestYield` to ask Scheduler to
yield to the main thread, we can assume that any time a Scheduler task
returns a continuation callback, it's because it wants to yield to the
main thread. We can assume the task already checked some condition that
caused it to return a continuation, so we don't need to do any
additional checks — we can immediately yield and schedule a new task
for the continuation.

The replaces the `requestYield` API that I added in ca990e9.

* Move unwind after error into main work loop

I need to be able to yield to the main thread in between when an error
is thrown and when the stack is unwound. (This is the motivation behind
the refactor, but it isn't implemented in this commit.) Currently the
unwind is inlined directly into `handleError`.

Instead, I've moved the unwind logic into the main work loop. At the
very beginning of the function, we check to see if the work-in-progress
is in a "suspended" state — that is, whether it needs to be unwound. If
it is, we will enter the unwind phase instead of the begin phase.

We only need to perform this check when we first enter the work loop:
at the beginning of a Scheduler chunk, or after something throws. We
don't need to perform it after every unit of work.

* Yield to main thread whenever a fiber suspends

When a fiber suspends, we should yield to the main thread in case the
data is already cached, to unblock a potential ping event.

By itself, this commit isn't useful because we don't do anything special
in the case where to do receive an immediate ping event. I've split this
out only to demonstrate that it doesn't break any existing behavior.

See the next commit for full context and motivation.

* Resume immediately pinged fiber without unwinding

If a fiber suspends, and is pinged immediately in a microtask (or a
regular task that fires before React resumes rendering), try rendering
the same fiber again without unwinding the stack. This can be super
helpful when working with promises and async-await, because even if the
outermost promise hasn't been cached before, the underlying data may
have been preloaded. In many cases, we can continue rendering
immediately without having to show a fallback.

This optimization should work during any concurrent (time-sliced)
render. It doesn't work during discrete updates because those are
semantically required to finish synchronously — those get the current
behavior.
---
 .../src/ReactFiberThrow.new.js                |  13 +-
 .../src/ReactFiberThrow.old.js                |  13 +-
 .../src/ReactFiberWakeable.new.js             |  50 ++++++
 .../src/ReactFiberWakeable.old.js             |  50 ++++++
 .../src/ReactFiberWorkLoop.new.js             | 151 ++++++++++++++----
 .../src/ReactFiberWorkLoop.old.js             | 151 ++++++++++++++----
 .../__tests__/ReactOffscreenSuspense-test.js  |  41 +++--
 .../ReactSuspenseWithNoopRenderer-test.js     |  22 ++-
 .../src/__tests__/ReactWakeable-test.js       |  67 ++++++++
 .../npm/umd/scheduler.development.js          |   8 -
 .../npm/umd/scheduler.production.min.js       |   8 -
 .../npm/umd/scheduler.profiling.min.js        |   8 -
 .../scheduler/src/__tests__/Scheduler-test.js |  31 +---
 .../src/__tests__/SchedulerMock-test.js       |  58 ++++---
 .../src/__tests__/SchedulerPostTask-test.js   |  31 +---
 packages/scheduler/src/forks/Scheduler.js     |  12 +-
 packages/scheduler/src/forks/SchedulerMock.js |  20 ++-
 .../scheduler/src/forks/SchedulerPostTask.js  |   5 -
 18 files changed, 539 insertions(+), 200 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactFiberWakeable.new.js
 create mode 100644 packages/react-reconciler/src/ReactFiberWakeable.old.js
 create mode 100644 packages/react-reconciler/src/__tests__/ReactWakeable-test.js

diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index 4a75d3076ab6..c17218f83be4 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -357,7 +357,7 @@ function throwException(
   sourceFiber: Fiber,
   value: mixed,
   rootRenderLanes: Lanes,
-) {
+): Wakeable | null {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
 
@@ -459,7 +459,7 @@ function throwException(
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      return;
+      return wakeable;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
@@ -474,7 +474,7 @@ function throwException(
         // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
-        return;
+        return wakeable;
       }
 
       // This is a sync/discrete update. We treat this case like an error
@@ -517,7 +517,7 @@ function throwException(
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
         queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
-        return;
+        return null;
       }
     } else {
       // Otherwise, fall through to the error path.
@@ -540,7 +540,7 @@ function throwException(
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
         const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
         enqueueCapturedUpdate(workInProgress, update);
-        return;
+        return null;
       }
       case ClassComponent:
         // Capture and retry
@@ -564,7 +564,7 @@ function throwException(
             lane,
           );
           enqueueCapturedUpdate(workInProgress, update);
-          return;
+          return null;
         }
         break;
       default:
@@ -572,6 +572,7 @@ function throwException(
     }
     workInProgress = workInProgress.return;
   } while (workInProgress !== null);
+  return null;
 }
 
 export {throwException, createRootErrorUpdate, createClassErrorUpdate};
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index d34c32770e88..d6c5255807f3 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -357,7 +357,7 @@ function throwException(
   sourceFiber: Fiber,
   value: mixed,
   rootRenderLanes: Lanes,
-) {
+): Wakeable | null {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
 
@@ -459,7 +459,7 @@ function throwException(
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      return;
+      return wakeable;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
@@ -474,7 +474,7 @@ function throwException(
         // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
-        return;
+        return wakeable;
       }
 
       // This is a sync/discrete update. We treat this case like an error
@@ -517,7 +517,7 @@ function throwException(
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
         queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
-        return;
+        return null;
       }
     } else {
       // Otherwise, fall through to the error path.
@@ -540,7 +540,7 @@ function throwException(
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
         const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
         enqueueCapturedUpdate(workInProgress, update);
-        return;
+        return null;
       }
       case ClassComponent:
         // Capture and retry
@@ -564,7 +564,7 @@ function throwException(
             lane,
           );
           enqueueCapturedUpdate(workInProgress, update);
-          return;
+          return null;
         }
         break;
       default:
@@ -572,6 +572,7 @@ function throwException(
     }
     workInProgress = workInProgress.return;
   } while (workInProgress !== null);
+  return null;
 }
 
 export {throwException, createRootErrorUpdate, createClassErrorUpdate};
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.new.js b/packages/react-reconciler/src/ReactFiberWakeable.new.js
new file mode 100644
index 000000000000..589d61eae814
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberWakeable.new.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+
+let suspendedWakeable: Wakeable | null = null;
+let wasPinged = false;
+let adHocSuspendCount: number = 0;
+
+const MAX_AD_HOC_SUSPEND_COUNT = 50;
+
+export function suspendedWakeableWasPinged() {
+  return wasPinged;
+}
+
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  adHocSuspendCount++;
+  suspendedWakeable = wakeable;
+}
+
+export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
+  if (wakeable === suspendedWakeable) {
+    // This ping is from the wakeable that just suspended. Mark it as pinged.
+    // When the work loop resumes, we'll immediately try rendering the fiber
+    // again instead of unwinding the stack.
+    wasPinged = true;
+    return true;
+  }
+  return false;
+}
+
+export function resetWakeableState() {
+  suspendedWakeable = null;
+  wasPinged = false;
+  adHocSuspendCount = 0;
+}
+
+export function throwIfInfinitePingLoopDetected() {
+  if (adHocSuspendCount > MAX_AD_HOC_SUSPEND_COUNT) {
+    // TODO: Guard against an infinite loop by throwing an error if the same
+    // component suspends too many times in a row. This should be thrown from
+    // the render phase so that it gets the component stack.
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.old.js b/packages/react-reconciler/src/ReactFiberWakeable.old.js
new file mode 100644
index 000000000000..589d61eae814
--- /dev/null
+++ b/packages/react-reconciler/src/ReactFiberWakeable.old.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import type {Wakeable} from 'shared/ReactTypes';
+
+let suspendedWakeable: Wakeable | null = null;
+let wasPinged = false;
+let adHocSuspendCount: number = 0;
+
+const MAX_AD_HOC_SUSPEND_COUNT = 50;
+
+export function suspendedWakeableWasPinged() {
+  return wasPinged;
+}
+
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  adHocSuspendCount++;
+  suspendedWakeable = wakeable;
+}
+
+export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
+  if (wakeable === suspendedWakeable) {
+    // This ping is from the wakeable that just suspended. Mark it as pinged.
+    // When the work loop resumes, we'll immediately try rendering the fiber
+    // again instead of unwinding the stack.
+    wasPinged = true;
+    return true;
+  }
+  return false;
+}
+
+export function resetWakeableState() {
+  suspendedWakeable = null;
+  wasPinged = false;
+  adHocSuspendCount = 0;
+}
+
+export function throwIfInfinitePingLoopDetected() {
+  if (adHocSuspendCount > MAX_AD_HOC_SUSPEND_COUNT) {
+    // TODO: Guard against an infinite loop by throwing an error if the same
+    // component suspends too many times in a row. This should be thrown from
+    // the render phase so that it gets the component stack.
+  }
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 4e965bb3f42d..a8844d2c1a41 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -86,6 +86,7 @@ import {
 import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
+  resetWorkInProgress,
 } from './ReactFiber.new';
 import {isRootDehydrated} from './ReactFiberShellHydration';
 import {didSuspendOrErrorWhileHydratingDEV} from './ReactFiberHydrationContext.new';
@@ -245,6 +246,12 @@ import {
   isConcurrentActEnvironment,
 } from './ReactFiberAct.new';
 import {processTransitionCallbacks} from './ReactFiberTracingMarkerComponent.new';
+import {
+  resetWakeableState,
+  trackSuspendedWakeable,
+  suspendedWakeableWasPinged,
+  attemptToPingSuspendedWakeable,
+} from './ReactFiberWakeable.new';
 
 const ceil = Math.ceil;
 
@@ -280,6 +287,12 @@ let workInProgress: Fiber | null = null;
 // The lanes we're rendering
 let workInProgressRootRenderLanes: Lanes = NoLanes;
 
+// 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 workInProgressIsSuspended: 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
@@ -1543,11 +1556,13 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
       );
       interruptedWork = interruptedWork.return;
     }
+    resetWakeableState();
   }
   workInProgressRoot = root;
   const rootWorkInProgress = createWorkInProgress(root.current, null);
   workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = renderLanes = lanes;
+  workInProgressIsSuspended = false;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
@@ -1566,7 +1581,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   return rootWorkInProgress;
 }
 
-function handleError(root, thrownValue): void {
+function handleError(root, thrownValue): Wakeable | null {
   do {
     let erroredWork = workInProgress;
     try {
@@ -1592,7 +1607,7 @@ function handleError(root, thrownValue): void {
         // intentionally not calling those, we need set it here.
         // TODO: Consider calling `unwindWork` to pop the contexts.
         workInProgress = null;
-        return;
+        return null;
       }
 
       if (enableProfilerTimer && erroredWork.mode & ProfileMode) {
@@ -1625,14 +1640,21 @@ function handleError(root, thrownValue): void {
         }
       }
 
-      throwException(
+      const maybeWakeable = throwException(
         root,
         erroredWork.return,
         erroredWork,
         thrownValue,
         workInProgressRootRenderLanes,
       );
-      completeUnitOfWork(erroredWork);
+      // Setting this to `true` tells the work loop to unwind the stack instead
+      // of entering the begin phase. It's called "suspended" because it usually
+      // happens because of Suspense, but it also applies to errors. Think of it
+      // as suspending the execution of the work loop.
+      workInProgressIsSuspended = true;
+
+      // Return to the normal work loop.
+      return maybeWakeable;
     } catch (yetAnotherThrownValue) {
       // Something in the return path also threw.
       thrownValue = yetAnotherThrownValue;
@@ -1646,8 +1668,6 @@ function handleError(root, thrownValue): void {
       }
       continue;
     }
-    // Return to the normal work loop.
-    return;
   } while (true);
 }
 
@@ -1810,7 +1830,14 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 // The work loop is an extremely hot path. Tell Closure not to inline it.
 /** @noinline */
 function workLoopSync() {
-  // Already timed out, so perform work without checking if we need to yield.
+  // Perform work without checking if we need to yield between fiber.
+
+  if (workInProgressIsSuspended && workInProgress !== null) {
+    // The current work-in-progress was already attempted. We need to unwind
+    // it before we continue the normal work loop.
+    resumeSuspendedUnitOfWork(workInProgress);
+  }
+
   while (workInProgress !== null) {
     performUnitOfWork(workInProgress);
   }
@@ -1860,7 +1887,14 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       workLoopConcurrent();
       break;
     } catch (thrownValue) {
-      handleError(root, thrownValue);
+      const maybeWakeable = handleError(root, thrownValue);
+      if (maybeWakeable !== null) {
+        // If this fiber just suspended, it's possible the data is already
+        // cached. Yield to the the main thread to give it a chance to ping. If
+        // it does, we can retry immediately without unwinding the stack.
+        trackSuspendedWakeable(maybeWakeable);
+        break;
+      }
     }
   } while (true);
   resetContextDependencies();
@@ -1899,6 +1933,13 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
 /** @noinline */
 function workLoopConcurrent() {
   // Perform work until Scheduler asks us to yield
+
+  if (workInProgressIsSuspended && workInProgress !== null) {
+    // The current work-in-progress was already attempted. We need to unwind
+    // it before we continue the normal work loop.
+    resumeSuspendedUnitOfWork(workInProgress);
+  }
+
   while (workInProgress !== null && !shouldYield()) {
     performUnitOfWork(workInProgress);
   }
@@ -1932,6 +1973,56 @@ function performUnitOfWork(unitOfWork: Fiber): void {
   ReactCurrentOwner.current = null;
 }
 
+function resumeSuspendedUnitOfWork(unitOfWork: Fiber): void {
+  // This is a fork of performUnitOfWork specifcally for resuming a fiber that
+  // just suspended. In some cases, we may choose to retry the fiber immediately
+  // instead of unwinding the stack. It's a separate function to keep the
+  // additional logic out of the work loop's hot path.
+
+  if (!suspendedWakeableWasPinged()) {
+    // The wakeable wasn't pinged. Return to the normal work loop. This will
+    // unwind the stack, and potentially result in showing a fallback.
+    workInProgressIsSuspended = false;
+    resetWakeableState();
+    completeUnitOfWork(unitOfWork);
+    return;
+  }
+
+  // The work-in-progress was immediately pinged. Instead of unwinding the
+  // stack and potentially showing a fallback, reset the fiber and try rendering
+  // it again.
+  unitOfWork = workInProgress = resetWorkInProgress(unitOfWork, renderLanes);
+
+  const current = unitOfWork.alternate;
+  setCurrentDebugFiberInDEV(unitOfWork);
+
+  let next;
+  if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
+    startProfilerTimer(unitOfWork);
+    next = beginWork(current, unitOfWork, renderLanes);
+    stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
+  } else {
+    next = beginWork(current, unitOfWork, renderLanes);
+  }
+
+  // The begin phase finished successfully without suspending. Reset the state
+  // used to track the fiber while it was suspended. Then return to the normal
+  // work loop.
+  workInProgressIsSuspended = false;
+  resetWakeableState();
+
+  resetCurrentDebugFiberInDEV();
+  unitOfWork.memoizedProps = unitOfWork.pendingProps;
+  if (next === null) {
+    // If this doesn't spawn new work, complete the current work.
+    completeUnitOfWork(unitOfWork);
+  } else {
+    workInProgress = next;
+  }
+
+  ReactCurrentOwner.current = 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.
@@ -2743,27 +2834,31 @@ export function pingSuspendedRoot(
     // 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.
-
-    // 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)
-    ) {
-      // Restart from the root.
-      prepareFreshStack(root, NoLanes);
+    const didPingSuspendedWakeable = attemptToPingSuspendedWakeable(wakeable);
+    if (didPingSuspendedWakeable) {
+      // Successfully pinged the in-progress fiber. Don't unwind the stack.
     } 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,
-      );
+      // TODO: If we're rendering sync either due to Sync, Batched or expired,
+      // we should probably never restart.
+
+      // 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)
+      ) {
+        // Restart from the root.
+        prepareFreshStack(root, NoLanes);
+      } 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,
+        );
+      }
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 4b2e523d40a2..14e378794bfb 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -86,6 +86,7 @@ import {
 import {
   createWorkInProgress,
   assignFiberPropertiesInDEV,
+  resetWorkInProgress,
 } from './ReactFiber.old';
 import {isRootDehydrated} from './ReactFiberShellHydration';
 import {didSuspendOrErrorWhileHydratingDEV} from './ReactFiberHydrationContext.old';
@@ -245,6 +246,12 @@ import {
   isConcurrentActEnvironment,
 } from './ReactFiberAct.old';
 import {processTransitionCallbacks} from './ReactFiberTracingMarkerComponent.old';
+import {
+  resetWakeableState,
+  trackSuspendedWakeable,
+  suspendedWakeableWasPinged,
+  attemptToPingSuspendedWakeable,
+} from './ReactFiberWakeable.old';
 
 const ceil = Math.ceil;
 
@@ -280,6 +287,12 @@ let workInProgress: Fiber | null = null;
 // The lanes we're rendering
 let workInProgressRootRenderLanes: Lanes = NoLanes;
 
+// 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 workInProgressIsSuspended: 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
@@ -1543,11 +1556,13 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
       );
       interruptedWork = interruptedWork.return;
     }
+    resetWakeableState();
   }
   workInProgressRoot = root;
   const rootWorkInProgress = createWorkInProgress(root.current, null);
   workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = renderLanes = lanes;
+  workInProgressIsSuspended = false;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
@@ -1566,7 +1581,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   return rootWorkInProgress;
 }
 
-function handleError(root, thrownValue): void {
+function handleError(root, thrownValue): Wakeable | null {
   do {
     let erroredWork = workInProgress;
     try {
@@ -1592,7 +1607,7 @@ function handleError(root, thrownValue): void {
         // intentionally not calling those, we need set it here.
         // TODO: Consider calling `unwindWork` to pop the contexts.
         workInProgress = null;
-        return;
+        return null;
       }
 
       if (enableProfilerTimer && erroredWork.mode & ProfileMode) {
@@ -1625,14 +1640,21 @@ function handleError(root, thrownValue): void {
         }
       }
 
-      throwException(
+      const maybeWakeable = throwException(
         root,
         erroredWork.return,
         erroredWork,
         thrownValue,
         workInProgressRootRenderLanes,
       );
-      completeUnitOfWork(erroredWork);
+      // Setting this to `true` tells the work loop to unwind the stack instead
+      // of entering the begin phase. It's called "suspended" because it usually
+      // happens because of Suspense, but it also applies to errors. Think of it
+      // as suspending the execution of the work loop.
+      workInProgressIsSuspended = true;
+
+      // Return to the normal work loop.
+      return maybeWakeable;
     } catch (yetAnotherThrownValue) {
       // Something in the return path also threw.
       thrownValue = yetAnotherThrownValue;
@@ -1646,8 +1668,6 @@ function handleError(root, thrownValue): void {
       }
       continue;
     }
-    // Return to the normal work loop.
-    return;
   } while (true);
 }
 
@@ -1810,7 +1830,14 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 // The work loop is an extremely hot path. Tell Closure not to inline it.
 /** @noinline */
 function workLoopSync() {
-  // Already timed out, so perform work without checking if we need to yield.
+  // Perform work without checking if we need to yield between fiber.
+
+  if (workInProgressIsSuspended && workInProgress !== null) {
+    // The current work-in-progress was already attempted. We need to unwind
+    // it before we continue the normal work loop.
+    resumeSuspendedUnitOfWork(workInProgress);
+  }
+
   while (workInProgress !== null) {
     performUnitOfWork(workInProgress);
   }
@@ -1860,7 +1887,14 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       workLoopConcurrent();
       break;
     } catch (thrownValue) {
-      handleError(root, thrownValue);
+      const maybeWakeable = handleError(root, thrownValue);
+      if (maybeWakeable !== null) {
+        // If this fiber just suspended, it's possible the data is already
+        // cached. Yield to the the main thread to give it a chance to ping. If
+        // it does, we can retry immediately without unwinding the stack.
+        trackSuspendedWakeable(maybeWakeable);
+        break;
+      }
     }
   } while (true);
   resetContextDependencies();
@@ -1899,6 +1933,13 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
 /** @noinline */
 function workLoopConcurrent() {
   // Perform work until Scheduler asks us to yield
+
+  if (workInProgressIsSuspended && workInProgress !== null) {
+    // The current work-in-progress was already attempted. We need to unwind
+    // it before we continue the normal work loop.
+    resumeSuspendedUnitOfWork(workInProgress);
+  }
+
   while (workInProgress !== null && !shouldYield()) {
     performUnitOfWork(workInProgress);
   }
@@ -1932,6 +1973,56 @@ function performUnitOfWork(unitOfWork: Fiber): void {
   ReactCurrentOwner.current = null;
 }
 
+function resumeSuspendedUnitOfWork(unitOfWork: Fiber): void {
+  // This is a fork of performUnitOfWork specifcally for resuming a fiber that
+  // just suspended. In some cases, we may choose to retry the fiber immediately
+  // instead of unwinding the stack. It's a separate function to keep the
+  // additional logic out of the work loop's hot path.
+
+  if (!suspendedWakeableWasPinged()) {
+    // The wakeable wasn't pinged. Return to the normal work loop. This will
+    // unwind the stack, and potentially result in showing a fallback.
+    workInProgressIsSuspended = false;
+    resetWakeableState();
+    completeUnitOfWork(unitOfWork);
+    return;
+  }
+
+  // The work-in-progress was immediately pinged. Instead of unwinding the
+  // stack and potentially showing a fallback, reset the fiber and try rendering
+  // it again.
+  unitOfWork = workInProgress = resetWorkInProgress(unitOfWork, renderLanes);
+
+  const current = unitOfWork.alternate;
+  setCurrentDebugFiberInDEV(unitOfWork);
+
+  let next;
+  if (enableProfilerTimer && (unitOfWork.mode & ProfileMode) !== NoMode) {
+    startProfilerTimer(unitOfWork);
+    next = beginWork(current, unitOfWork, renderLanes);
+    stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
+  } else {
+    next = beginWork(current, unitOfWork, renderLanes);
+  }
+
+  // The begin phase finished successfully without suspending. Reset the state
+  // used to track the fiber while it was suspended. Then return to the normal
+  // work loop.
+  workInProgressIsSuspended = false;
+  resetWakeableState();
+
+  resetCurrentDebugFiberInDEV();
+  unitOfWork.memoizedProps = unitOfWork.pendingProps;
+  if (next === null) {
+    // If this doesn't spawn new work, complete the current work.
+    completeUnitOfWork(unitOfWork);
+  } else {
+    workInProgress = next;
+  }
+
+  ReactCurrentOwner.current = 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.
@@ -2743,27 +2834,31 @@ export function pingSuspendedRoot(
     // 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.
-
-    // 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)
-    ) {
-      // Restart from the root.
-      prepareFreshStack(root, NoLanes);
+    const didPingSuspendedWakeable = attemptToPingSuspendedWakeable(wakeable);
+    if (didPingSuspendedWakeable) {
+      // Successfully pinged the in-progress fiber. Don't unwind the stack.
     } 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,
-      );
+      // TODO: If we're rendering sync either due to Sync, Batched or expired,
+      // we should probably never restart.
+
+      // 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)
+      ) {
+        // Restart from the root.
+        prepareFreshStack(root, NoLanes);
+      } 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,
+        );
+      }
     }
   }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
index 290dd33b89a0..3c3a79a8efd7 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenSuspense-test.js
@@ -485,22 +485,33 @@ describe('ReactOffscreen', () => {
       // In the same render, also hide the offscreen tree.
       root.render(<App show={false} />);
 
-      expect(Scheduler).toFlushUntilNextPaint([
-        // The outer update will commit, but the inner update is deferred until
-        // a later render.
-        'Outer: 1',
-
-        // Something suspended. This means we won't commit immediately; there
-        // will be an async gap between render and commit. In this test, we will
-        // use this property to schedule a concurrent update. The fact that
-        // we're using Suspense to schedule a concurrent update is not directly
-        // relevant to the test — we could also use time slicing, but I've
-        // chosen to use Suspense the because implementation details of time
-        // slicing are more volatile.
-        'Suspend! [Async: 1]',
+      if (gate(flags => flags.enableSyncDefaultUpdates)) {
+        expect(Scheduler).toFlushUntilNextPaint([
+          // The outer update will commit, but the inner update is deferred until
+          // a later render.
+          'Outer: 1',
+
+          // Something suspended. This means we won't commit immediately; there
+          // will be an async gap between render and commit. In this test, we will
+          // use this property to schedule a concurrent update. The fact that
+          // we're using Suspense to schedule a concurrent update is not directly
+          // relevant to the test — we could also use time slicing, but I've
+          // chosen to use Suspense the because implementation details of time
+          // slicing are more volatile.
+          'Suspend! [Async: 1]',
+
+          'Loading...',
+        ]);
+      } else {
+        // When default updates are time sliced, React yields before preparing
+        // the fallback.
+        expect(Scheduler).toFlushUntilNextPaint([
+          'Outer: 1',
+          'Suspend! [Async: 1]',
+        ]);
+        expect(Scheduler).toFlushUntilNextPaint(['Loading...']);
+      }
 
-        'Loading...',
-      ]);
       // Assert that we haven't committed quite yet
       expect(root).toMatchRenderedOutput(
         <>
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
index 3f2f4cc38aa0..07838b223e68 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.js
@@ -963,33 +963,36 @@ describe('ReactSuspenseWithNoopRenderer', () => {
 
   // @gate enableCache
   it('resolves successfully even if fallback render is pending', async () => {
-    ReactNoop.render(
+    const root = ReactNoop.createRoot();
+    root.render(
       <>
         <Suspense fallback={<Text text="Loading..." />} />
       </>,
     );
     expect(Scheduler).toFlushAndYield([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+    expect(root).toMatchRenderedOutput(null);
     if (gate(flags => flags.enableSyncDefaultUpdates)) {
       React.startTransition(() => {
-        ReactNoop.render(
+        root.render(
           <>
             <Suspense fallback={<Text text="Loading..." />}>
               <AsyncText text="Async" />
+              <Text text="Sibling" />
             </Suspense>
           </>,
         );
       });
     } else {
-      ReactNoop.render(
+      root.render(
         <>
           <Suspense fallback={<Text text="Loading..." />}>
             <AsyncText text="Async" />
+            <Text text="Sibling" />
           </Suspense>
         </>,
       );
     }
-    expect(ReactNoop.flushNextYield()).toEqual(['Suspend! [Async]']);
+    expect(Scheduler).toFlushAndYieldThrough(['Suspend! [Async]', 'Sibling']);
 
     await resolveText('Async');
     expect(Scheduler).toFlushAndYield([
@@ -998,8 +1001,14 @@ describe('ReactSuspenseWithNoopRenderer', () => {
       'Loading...',
       // Once we've completed the boundary we restarted.
       'Async',
+      'Sibling',
     ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+    expect(root).toMatchRenderedOutput(
+      <>
+        <span prop="Async" />
+        <span prop="Sibling" />
+      </>,
+    );
   });
 
   // @gate enableCache
@@ -3859,7 +3868,6 @@ describe('ReactSuspenseWithNoopRenderer', () => {
         'Suspend! [A2]',
         'Loading...',
         'Suspend! [B2]',
-        'Loading...',
       ]);
       expect(root).toMatchRenderedOutput(
         <>
diff --git a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
new file mode 100644
index 000000000000..848962c696c0
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
@@ -0,0 +1,67 @@
+'use strict';
+
+let React;
+let ReactNoop;
+let Scheduler;
+let act;
+let Suspense;
+let startTransition;
+
+describe('ReactWakeable', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+    act = require('jest-react').act;
+    Suspense = React.Suspense;
+    startTransition = React.startTransition;
+  });
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return props.text;
+  }
+
+  test('if suspended fiber is pinged in a microtask, retry immediately without unwinding the stack', async () => {
+    let resolved = false;
+    function Async() {
+      if (resolved) {
+        return <Text text="Async" />;
+      }
+      Scheduler.unstable_yieldValue('Suspend!');
+      throw Promise.resolve().then(() => {
+        Scheduler.unstable_yieldValue('Resolve in microtask');
+        resolved = true;
+      });
+    }
+
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    await act(async () => {
+      startTransition(() => {
+        ReactNoop.render(<App />);
+      });
+
+      // React will yield when the async component suspends.
+      expect(Scheduler).toFlushUntilNextPaint(['Suspend!']);
+
+      // Wait for microtasks to resolve
+      // TODO: The async form of `act` should automatically yield to microtasks
+      // when a continuation is returned, the way Scheduler does.
+      await null;
+
+      expect(Scheduler).toHaveYielded(['Resolve in microtask']);
+    });
+
+    // Finished rendering without unwinding the stack.
+    expect(Scheduler).toHaveYielded(['Async']);
+  });
+});
diff --git a/packages/scheduler/npm/umd/scheduler.development.js b/packages/scheduler/npm/umd/scheduler.development.js
index 21316812d145..b960dc91132e 100644
--- a/packages/scheduler/npm/umd/scheduler.development.js
+++ b/packages/scheduler/npm/umd/scheduler.development.js
@@ -54,13 +54,6 @@
     );
   }
 
-  function unstable_requestYield() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestYield.apply(
-      this,
-      arguments
-    );
-  }
-
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -123,7 +116,6 @@
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
     unstable_requestPaint: unstable_requestPaint,
-    unstable_requestYield: unstable_requestYield,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
diff --git a/packages/scheduler/npm/umd/scheduler.production.min.js b/packages/scheduler/npm/umd/scheduler.production.min.js
index 41c76570e1ab..0c2584331b84 100644
--- a/packages/scheduler/npm/umd/scheduler.production.min.js
+++ b/packages/scheduler/npm/umd/scheduler.production.min.js
@@ -54,13 +54,6 @@
     );
   }
 
-  function unstable_requestYield() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestYield.apply(
-      this,
-      arguments
-    );
-  }
-
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -117,7 +110,6 @@
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
     unstable_requestPaint: unstable_requestPaint,
-    unstable_requestYield: unstable_requestYield,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
diff --git a/packages/scheduler/npm/umd/scheduler.profiling.min.js b/packages/scheduler/npm/umd/scheduler.profiling.min.js
index 41c76570e1ab..0c2584331b84 100644
--- a/packages/scheduler/npm/umd/scheduler.profiling.min.js
+++ b/packages/scheduler/npm/umd/scheduler.profiling.min.js
@@ -54,13 +54,6 @@
     );
   }
 
-  function unstable_requestYield() {
-    return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_requestYield.apply(
-      this,
-      arguments
-    );
-  }
-
   function unstable_runWithPriority() {
     return global.React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.Scheduler.unstable_runWithPriority.apply(
       this,
@@ -117,7 +110,6 @@
     unstable_cancelCallback: unstable_cancelCallback,
     unstable_shouldYield: unstable_shouldYield,
     unstable_requestPaint: unstable_requestPaint,
-    unstable_requestYield: unstable_requestYield,
     unstable_runWithPriority: unstable_runWithPriority,
     unstable_next: unstable_next,
     unstable_wrapCallback: unstable_wrapCallback,
diff --git a/packages/scheduler/src/__tests__/Scheduler-test.js b/packages/scheduler/src/__tests__/Scheduler-test.js
index 82cd773629a2..925c64202bb4 100644
--- a/packages/scheduler/src/__tests__/Scheduler-test.js
+++ b/packages/scheduler/src/__tests__/Scheduler-test.js
@@ -18,7 +18,6 @@ let performance;
 let cancelCallback;
 let scheduleCallback;
 let requestPaint;
-let requestYield;
 let shouldYield;
 let NormalPriority;
 
@@ -44,7 +43,6 @@ describe('SchedulerBrowser', () => {
     scheduleCallback = Scheduler.unstable_scheduleCallback;
     NormalPriority = Scheduler.unstable_NormalPriority;
     requestPaint = Scheduler.unstable_requestPaint;
-    requestYield = Scheduler.unstable_requestYield;
     shouldYield = Scheduler.unstable_shouldYield;
   });
 
@@ -480,19 +478,13 @@ describe('SchedulerBrowser', () => {
     ]);
   });
 
-  it('requestYield forces a yield immediately', () => {
+  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('requestYield');
-      requestYield();
-      runtime.log('shouldYield: ' + shouldYield());
+      runtime.log('Return a continuation');
       return () => {
         runtime.log('Continuation Task');
-        runtime.log('shouldYield: ' + shouldYield());
-        runtime.log('Advance time past frame deadline');
-        runtime.advanceTime(10000);
-        runtime.log('shouldYield: ' + shouldYield());
       };
     });
     runtime.assertLog(['Post Message']);
@@ -501,27 +493,20 @@ describe('SchedulerBrowser', () => {
     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',
-      'requestYield',
-      // Immediately after calling requestYield, shouldYield starts
-      // returning true, even though no time has elapsed in the frame
-      'shouldYield: true',
+      'Return a continuation',
 
-      // The continuation should be scheduled in a separate macrotask.
+      // 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);
 
-    // Subsequent tasks work as normal
     runtime.fireMessageEvent();
-    runtime.assertLog([
-      'Message Event',
-      'Continuation Task',
-      'shouldYield: false',
-      'Advance time past frame deadline',
-      'shouldYield: true',
-    ]);
+    runtime.assertLog(['Message Event', 'Continuation Task']);
   });
 });
diff --git a/packages/scheduler/src/__tests__/SchedulerMock-test.js b/packages/scheduler/src/__tests__/SchedulerMock-test.js
index 8b01ec3c0e31..aa17e88ececd 100644
--- a/packages/scheduler/src/__tests__/SchedulerMock-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerMock-test.js
@@ -726,37 +726,53 @@ describe('Scheduler', () => {
       expect(Scheduler).toFlushWithoutYielding();
     });
 
-    it('requestYield forces a yield immediately', () => {
+    it('toFlushUntilNextPaint stops if a continuation is returned', () => {
       scheduleCallback(NormalPriority, () => {
         Scheduler.unstable_yieldValue('Original Task');
-        Scheduler.unstable_yieldValue(
-          'shouldYield: ' + Scheduler.unstable_shouldYield(),
-        );
-        Scheduler.unstable_yieldValue('requestYield');
-        Scheduler.unstable_requestYield();
-        Scheduler.unstable_yieldValue(
-          'shouldYield: ' + Scheduler.unstable_shouldYield(),
-        );
+        Scheduler.unstable_yieldValue('shouldYield: ' + shouldYield());
+        Scheduler.unstable_yieldValue('Return a continuation');
         return () => {
           Scheduler.unstable_yieldValue('Continuation Task');
-          Scheduler.unstable_yieldValue(
-            'shouldYield: ' + Scheduler.unstable_shouldYield(),
-          );
-          Scheduler.unstable_yieldValue('Advance time past frame deadline');
-          Scheduler.unstable_yieldValue(
-            'shouldYield: ' + Scheduler.unstable_shouldYield(),
-          );
         };
       });
 
-      // The continuation should be scheduled in a separate macrotask.
       expect(Scheduler).toFlushUntilNextPaint([
         'Original Task',
+        // Immediately before returning a continuation, `shouldYield` returns
+        // false, which means there must be time remaining in the frame.
         'shouldYield: false',
-        'requestYield',
-        // Immediately after calling requestYield, shouldYield starts
-        // returning true
-        'shouldYield: true',
+        'Return a continuation',
+
+        // The continuation should not flush yet.
+      ]);
+
+      // No time has elapsed
+      expect(Scheduler.unstable_now()).toBe(0);
+
+      // Continue the task
+      expect(Scheduler).toFlushAndYield(['Continuation Task']);
+    });
+
+    it("toFlushAndYield keeps flushing even if there's a continuation", () => {
+      scheduleCallback(NormalPriority, () => {
+        Scheduler.unstable_yieldValue('Original Task');
+        Scheduler.unstable_yieldValue('shouldYield: ' + shouldYield());
+        Scheduler.unstable_yieldValue('Return a continuation');
+        return () => {
+          Scheduler.unstable_yieldValue('Continuation Task');
+        };
+      });
+
+      expect(Scheduler).toFlushAndYield([
+        '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
index 2dbb96dd8993..cc1fc8b63f67 100644
--- a/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
+++ b/packages/scheduler/src/__tests__/SchedulerPostTask-test.js
@@ -23,7 +23,6 @@ let UserBlockingPriority;
 let LowPriority;
 let IdlePriority;
 let shouldYield;
-let requestYield;
 
 // The Scheduler postTask implementation uses a new postTask browser API to
 // schedule work on the main thread. This test suite mocks all browser methods
@@ -47,7 +46,6 @@ describe('SchedulerPostTask', () => {
     LowPriority = Scheduler.unstable_LowPriority;
     IdlePriority = Scheduler.unstable_IdlePriority;
     shouldYield = Scheduler.unstable_shouldYield;
-    requestYield = Scheduler.unstable_requestYield;
   });
 
   afterEach(() => {
@@ -301,19 +299,13 @@ describe('SchedulerPostTask', () => {
     ]);
   });
 
-  it('requestYield forces a yield immediately', () => {
+  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('requestYield');
-      requestYield();
-      runtime.log('shouldYield: ' + shouldYield());
+      runtime.log('Return a continuation');
       return () => {
         runtime.log('Continuation Task');
-        runtime.log('shouldYield: ' + shouldYield());
-        runtime.log('Advance time past frame deadline');
-        runtime.advanceTime(10000);
-        runtime.log('shouldYield: ' + shouldYield());
       };
     });
     runtime.assertLog(['Post Task 0 [user-visible]']);
@@ -322,27 +314,20 @@ describe('SchedulerPostTask', () => {
     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',
-      'requestYield',
-      // Immediately after calling requestYield, shouldYield starts
-      // returning true, even though no time has elapsed in the frame
-      'shouldYield: true',
+      'Return a continuation',
 
-      // The continuation should be scheduled in a separate macrotask.
+      // 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);
 
-    // Subsequent tasks work as normal
     runtime.flushTasks();
-    runtime.assertLog([
-      'Task 1 Fired',
-      'Continuation Task',
-      'shouldYield: false',
-      'Advance time past frame deadline',
-      'shouldYield: true',
-    ]);
+    runtime.assertLog(['Task 1 Fired', 'Continuation Task']);
   });
 });
diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js
index ea440375a35a..3350c798fabe 100644
--- a/packages/scheduler/src/forks/Scheduler.js
+++ b/packages/scheduler/src/forks/Scheduler.js
@@ -212,10 +212,14 @@ function workLoop(hasTimeRemaining, initialTime) {
       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.
         currentTask.callback = continuationCallback;
         if (enableProfiling) {
           markTaskYield(currentTask, currentTime);
         }
+        advanceTimers(currentTime);
+        return true;
       } else {
         if (enableProfiling) {
           markTaskCompleted(currentTask, currentTime);
@@ -224,8 +228,8 @@ function workLoop(hasTimeRemaining, initialTime) {
         if (currentTask === peek(taskQueue)) {
           pop(taskQueue);
         }
+        advanceTimers(currentTime);
       }
-      advanceTimers(currentTime);
     } else {
       pop(taskQueue);
     }
@@ -495,11 +499,6 @@ function requestPaint() {
   // Since we yield every frame regardless, `requestPaint` has no effect.
 }
 
-function requestYield() {
-  // Force a yield at the next opportunity.
-  startTime = -99999;
-}
-
 function forceFrameRate(fps) {
   if (fps < 0 || fps > 125) {
     // Using console['error'] to evade Babel and ESLint
@@ -617,7 +616,6 @@ export {
   unstable_getCurrentPriorityLevel,
   shouldYieldToHost as unstable_shouldYield,
   requestPaint as unstable_requestPaint,
-  requestYield as unstable_requestYield,
   unstable_continueExecution,
   unstable_pauseExecution,
   unstable_getFirstCallbackNode,
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index 6898be823904..a1374005ed05 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -195,10 +195,22 @@ function workLoop(hasTimeRemaining, initialTime) {
       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.
         currentTask.callback = continuationCallback;
         if (enableProfiling) {
           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) {
           markTaskCompleted(currentTask, currentTime);
@@ -207,8 +219,8 @@ function workLoop(hasTimeRemaining, initialTime) {
         if (currentTask === peek(taskQueue)) {
           pop(taskQueue);
         }
+        advanceTimers(currentTime);
       }
-      advanceTimers(currentTime);
     } else {
       pop(taskQueue);
     }
@@ -608,11 +620,6 @@ function requestPaint() {
   needsPaint = true;
 }
 
-function requestYield() {
-  // Force a yield at the next opportunity.
-  shouldYieldForPaint = needsPaint = true;
-}
-
 export {
   ImmediatePriority as unstable_ImmediatePriority,
   UserBlockingPriority as unstable_UserBlockingPriority,
@@ -627,7 +634,6 @@ export {
   unstable_getCurrentPriorityLevel,
   shouldYieldToHost as unstable_shouldYield,
   requestPaint as unstable_requestPaint,
-  requestYield as unstable_requestYield,
   unstable_continueExecution,
   unstable_pauseExecution,
   unstable_getFirstCallbackNode,
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
index 4e51a5873430..c07f7f03819c 100644
--- a/packages/scheduler/src/forks/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -67,11 +67,6 @@ export function unstable_requestPaint() {
   // Since we yield every frame regardless, `requestPaint` has no effect.
 }
 
-export function unstable_requestYield() {
-  // Force a yield at the next opportunity.
-  deadline = -99999;
-}
-
 type SchedulerCallback<T> = (
   didTimeout_DEPRECATED: boolean,
 ) =>

From 32baab38f8f48f629ccd3f7564251b91dc2d777d Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 11 Aug 2022 23:04:45 -0400
Subject: [PATCH 1508/1603] [Transition Tracing] Add Tag Field to Marker
 Instance (#25085)

We were previously using `markerInstance.name` to figure out whether the marker instance was on the tracing marker or the root, but this is unsustainable. This adds a tag field so we can explicitly check this.
---
 .../react-reconciler/src/ReactFiber.new.js     |  2 ++
 .../react-reconciler/src/ReactFiber.old.js     |  2 ++
 .../src/ReactFiberBeginWork.new.js             |  2 ++
 .../src/ReactFiberBeginWork.old.js             |  2 ++
 .../src/ReactFiberCommitWork.new.js            | 18 ++++++++++++++----
 .../src/ReactFiberCommitWork.old.js            | 18 ++++++++++++++----
 .../ReactFiberTracingMarkerComponent.new.js    |  6 ++++++
 .../ReactFiberTracingMarkerComponent.old.js    |  6 ++++++
 8 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index 560a3d0ec332..fc2d03109fd2 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -98,6 +98,7 @@ import {
   REACT_CACHE_TYPE,
   REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
+import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent.new';
 
 export type {Fiber};
 
@@ -770,6 +771,7 @@ export function createFiberFromTracingMarker(
   fiber.elementType = REACT_TRACING_MARKER_TYPE;
   fiber.lanes = lanes;
   const tracingMarkerInstance: TracingMarkerInstance = {
+    tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
   };
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 0a29c4dce782..572c1b770ada 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -98,6 +98,7 @@ import {
   REACT_CACHE_TYPE,
   REACT_TRACING_MARKER_TYPE,
 } from 'shared/ReactSymbols';
+import {TransitionTracingMarker} from './ReactFiberTracingMarkerComponent.old';
 
 export type {Fiber};
 
@@ -770,6 +771,7 @@ export function createFiberFromTracingMarker(
   fiber.elementType = REACT_TRACING_MARKER_TYPE;
   fiber.lanes = lanes;
   const tracingMarkerInstance: TracingMarkerInstance = {
+    tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
   };
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 1d3ca68b05b5..61edb46d32f2 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -268,6 +268,7 @@ import {
   getMarkerInstances,
   pushMarkerInstance,
   pushRootMarkerInstance,
+  TransitionTracingMarker,
 } from './ReactFiberTracingMarkerComponent.new';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -976,6 +977,7 @@ function updateTracingMarkerComponent(
     const currentTransitions = getPendingTransitions();
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
+        tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
         pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 1fa498e29a92..65403e6c8ad3 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -268,6 +268,7 @@ import {
   getMarkerInstances,
   pushMarkerInstance,
   pushRootMarkerInstance,
+  TransitionTracingMarker,
 } from './ReactFiberTracingMarkerComponent.old';
 
 const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
@@ -976,6 +977,7 @@ function updateTracingMarkerComponent(
     const currentTransitions = getPendingTransitions();
     if (currentTransitions !== null) {
       const markerInstance: TracingMarkerInstance = {
+        tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
         pendingBoundaries: new Map(),
         name: workInProgress.pendingProps.name,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 6a8b095f11a2..eb696d06eb4a 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -177,6 +177,10 @@ import {
   OffscreenVisible,
   OffscreenPassiveEffectsConnected,
 } from './ReactFiberOffscreenComponent';
+import {
+  TransitionRoot,
+  TransitionTracingMarker,
+} from './ReactFiberTracingMarkerComponent.new';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -1184,13 +1188,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
               name,
             });
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,
@@ -1216,13 +1223,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
           ) {
             pendingBoundaries.delete(offscreenInstance);
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 651414549b09..6c17402e0846 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -177,6 +177,10 @@ import {
   OffscreenVisible,
   OffscreenPassiveEffectsConnected,
 } from './ReactFiberOffscreenComponent';
+import {
+  TransitionRoot,
+  TransitionTracingMarker,
+} from './ReactFiberTracingMarkerComponent.old';
 
 let didWarnAboutUndefinedSnapshotBeforeUpdate: Set<mixed> | null = null;
 if (__DEV__) {
@@ -1184,13 +1188,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
               name,
             });
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,
@@ -1216,13 +1223,16 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
           ) {
             pendingBoundaries.delete(offscreenInstance);
             if (transitions !== null) {
-              if (markerInstance.name) {
+              if (
+                markerInstance.tag === TransitionTracingMarker &&
+                markerInstance.name !== undefined
+              ) {
                 addMarkerProgressCallbackToPendingTransition(
                   markerInstance.name,
                   transitions,
                   pendingBoundaries,
                 );
-              } else {
+              } else if (markerInstance.tag === TransitionRoot) {
                 transitions.forEach(transition => {
                   addTransitionProgressCallbackToPendingTransition(
                     transition,
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index fea28213ff82..31cc4c06841a 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -37,11 +37,16 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
+  tag?: TracingMarkerTag,
   pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
   name?: string,
 |};
 
+export const TransitionRoot = 0;
+export const TransitionTracingMarker = 1;
+export type TracingMarkerTag = 0 | 1;
+
 export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
@@ -146,6 +151,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
       transitions.forEach(transition => {
         if (!root.incompleteTransitions.has(transition)) {
           const markerInstance: TracingMarkerInstance = {
+            tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
           };
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index ddd8289d8a4b..0e3c352d7728 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -37,11 +37,16 @@ export type BatchConfigTransition = {
 };
 
 export type TracingMarkerInstance = {|
+  tag?: TracingMarkerTag,
   pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
   name?: string,
 |};
 
+export const TransitionRoot = 0;
+export const TransitionTracingMarker = 1;
+export type TracingMarkerTag = 0 | 1;
+
 export type PendingBoundaries = Map<OffscreenInstance, SuspenseInfo>;
 
 export function processTransitionCallbacks(
@@ -146,6 +151,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
       transitions.forEach(transition => {
         if (!root.incompleteTransitions.has(transition)) {
           const markerInstance: TracingMarkerInstance = {
+            tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
           };

From 796d31809b3683083d3b62ccbab4f00dec8ffb1f Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Fri, 12 Aug 2022 13:27:53 -0700
Subject: [PATCH 1509/1603] Implement basic stylesheet Resources for react-dom
 (#25060)

Implement basic support for "Resources". In the context of this commit, the only thing that is currently a Resource are

<link rel="stylesheet" precedence="some-value" ...>

Resources can be rendered anywhere in the react tree, even outside of normal parenting rules, for instance you can render a resource before you have rendered the <html><head> tags for your application. In the stream we reorder this so the browser always receives valid HTML and resources are emitted either in place (normal circumstances) or at the top of the <head> (when you render them above or before the <head> in your react tree)

On the client, resources opt into an entirely different hydration path. Instead of matching the location within the Document these resources are queried for in the entire document. It is an error to have more than one resource with the same href attribute.

The use of precedence here as an opt-in signal for resourcifying the link is in preparation for a more complete Resource implementation which will dedupe resource references (multiple will be valid), hoist to the appropriate container (body, head, or elsewhere), order (according to precedence) and Suspend boundaries that depend on them. More details will come in the coming weeks on this plan.

This feature is gated by an experimental flag and will only be made available in experimental builds until some future time.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 404 +++++++++++++++++-
 .../src/__tests__/ReactDOMRoot-test.js        |   1 +
 .../react-dom/src/client/ReactDOMComponent.js |  14 +-
 .../src/client/ReactDOMHostConfig.js          |  68 ++-
 packages/react-dom/src/client/ReactDOMRoot.js |   3 +-
 .../src/server/ReactDOMServerFormatConfig.js  | 109 ++++-
 .../server/ReactNativeServerFormatConfig.js   |   2 +
 .../src/ReactNoopServer.js                    |   2 +
 .../ReactFiberHostConfigWithNoHydration.js    |   2 +
 .../src/ReactFiberHydrationContext.new.js     |  41 ++
 .../src/ReactFiberHydrationContext.old.js     |  41 ++
 .../src/forks/ReactFiberHostConfig.custom.js  |   3 +
 packages/react-server/src/ReactFizzServer.js  |  50 ++-
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 scripts/error-codes/codes.json                |   4 +-
 24 files changed, 729 insertions(+), 26 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 60a3a3938df3..10d3237bf38d 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -128,6 +128,8 @@ describe('ReactDOMFizzServer', () => {
     buffer = '';
     const fakeBody = document.createElement('body');
     fakeBody.innerHTML = bufferedContent;
+    const parent =
+      container.nodeName === '#document' ? container.body : container;
     while (fakeBody.firstChild) {
       const node = fakeBody.firstChild;
       if (
@@ -137,13 +139,37 @@ describe('ReactDOMFizzServer', () => {
         const script = document.createElement('script');
         script.textContent = node.textContent;
         fakeBody.removeChild(node);
-        container.appendChild(script);
+        parent.appendChild(script);
       } else {
-        container.appendChild(node);
+        parent.appendChild(node);
       }
     }
   }
 
+  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;
+    }
+    // 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;
+    // Test Environment
+    const jsdom = new JSDOM(bufferedContent, {
+      runScripts: 'dangerously',
+    });
+    window = jsdom.window;
+    document = jsdom.window.document;
+    container = document;
+    buffer = '';
+  }
+
   function getVisibleChildren(element) {
     const children = [];
     let node = element.firstChild;
@@ -4194,6 +4220,380 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  // @gate enableFloat
+  it('emits html and head start tags (the preamble) before other content if rendered in the shell', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <>
+          <title data-baz="baz">a title</title>
+          <html data-foo="foo">
+            <head data-bar="bar" />
+            <body>a body</body>
+          </html>
+        </>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(document)).toEqual(
+      <html data-foo="foo">
+        <head data-bar="bar">
+          <title data-baz="baz">a title</title>
+        </head>
+        <body>a body</body>
+      </html>,
+    );
+
+    // Hydrate the same thing on the client. We expect this to still fail because <title> is not a Resource
+    // and is unmatched on hydration
+    const errors = [];
+    ReactDOMClient.hydrateRoot(
+      document,
+      <>
+        <title data-baz="baz">a title</title>
+        <html data-foo="foo">
+          <head data-bar="bar" />
+          <body>a body</body>
+        </html>
+      </>,
+      {
+        onRecoverableError: (err, errInfo) => {
+          errors.push(err.message);
+        },
+      },
+    );
+    expect(() => {
+      try {
+        expect(() => {
+          expect(Scheduler).toFlushWithoutYielding();
+        }).toThrow('Invalid insertion of HTML node in #document node.');
+      } catch (e) {
+        console.log('e', e);
+      }
+    }).toErrorDev(
+      [
+        'Warning: Expected server HTML to contain a matching <title> in <#document>.',
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
+        'Warning: validateDOMNesting(...): <title> cannot appear as a child of <#document>',
+      ],
+      {withoutStack: 1},
+    );
+    expect(errors).toEqual([
+      'Hydration failed because the initial UI does not match what was rendered on the server.',
+      'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+    ]);
+    expect(getVisibleChildren(document)).toEqual();
+    expect(() => {
+      expect(Scheduler).toFlushWithoutYielding();
+    }).toThrow('The node to be removed is not a child of this node.');
+  });
+
+  // @gate enableFloat
+  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 actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.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>');
+  });
+
+  // @gate enableFloat
+  it('recognizes stylesheet links as attributes during hydration', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <>
+          <link rel="stylesheet" href="foo" precedence="default" />
+          <html>
+            <head>
+              <link rel="author" precedence="this is a nonsense prop" />
+            </head>
+            <body>a body</body>
+          </html>
+        </>,
+      );
+      pipe(writable);
+    });
+    // precedence for stylesheets is mapped to a valid data attribute that is recognized on the client
+    // as opting this node into resource semantics. the use of precedence on the author link is just a
+    // non standard attribute which React allows but is not given any special treatment.
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-rprec="default" />
+          <link rel="author" precedence="this is a nonsense prop" />
+        </head>
+        <body>a body</body>
+      </html>,
+    );
+
+    // It hydrates successfully
+    const root = ReactDOMClient.hydrateRoot(
+      document,
+      <>
+        <link rel="stylesheet" href="foo" precedence="default" />
+        <html>
+          <head>
+            <link rel="author" precedence="this is a nonsense prop" />
+          </head>
+          <body>a body</body>
+        </html>
+      </>,
+    );
+    // We manually capture uncaught errors b/c Jest does not play well with errors thrown in
+    // microtasks after the test completes even when it is expecting to fail (e.g. when the gate is false)
+    // We need to flush the scheduler at the end even if there was an earlier throw otherwise this test will
+    // fail even when failure is expected. This is primarily caused by invokeGuardedCallback replaying commit
+    // phase errors which get rethrown in a microtask
+    const uncaughtErrors = [];
+    try {
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getVisibleChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" data-rprec="default" />
+            <link rel="author" precedence="this is a nonsense prop" />
+          </head>
+          <body>a body</body>
+        </html>,
+      );
+    } catch (e) {
+      uncaughtErrors.push(e);
+    }
+    try {
+      expect(Scheduler).toFlushWithoutYielding();
+    } catch (e) {
+      uncaughtErrors.push(e);
+    }
+
+    root.render(
+      <>
+        <link rel="stylesheet" href="foo" precedence="default" data-bar="bar" />
+        <html>
+          <head />
+          <body>a body</body>
+        </html>
+      </>,
+    );
+    try {
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getVisibleChildren(document)).toEqual(
+        <html>
+          <head>
+            <link
+              rel="stylesheet"
+              href="foo"
+              data-rprec="default"
+              data-bar="bar"
+            />
+          </head>
+          <body>a body</body>
+        </html>,
+      );
+    } catch (e) {
+      uncaughtErrors.push(e);
+    }
+    try {
+      expect(Scheduler).toFlushWithoutYielding();
+    } catch (e) {
+      uncaughtErrors.push(e);
+    }
+
+    if (uncaughtErrors.length > 0) {
+      throw uncaughtErrors[0];
+    }
+  });
+
+  // Temporarily this test is expected to fail everywhere. When we have resource hoisting
+  // it should start to pass and we can adjust the gate accordingly
+  // @gate false && enableFloat
+  it('should insert missing resources during hydration', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <body>foo</body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    const uncaughtErrors = [];
+    ReactDOMClient.hydrateRoot(
+      document,
+      <>
+        <link rel="stylesheet" href="foo" precedence="foo" />
+        <html>
+          <head />
+          <body>foo</body>
+        </html>
+      </>,
+    );
+    try {
+      expect(Scheduler).toFlushWithoutYielding();
+      expect(getVisibleChildren(document)).toEqual(
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" precedence="foo" />
+          </head>
+          <body>foo</body>
+        </html>,
+      );
+    } catch (e) {
+      uncaughtErrors.push(e);
+    }
+
+    // need to flush again to get the invoke guarded callback error to throw in microtask
+    try {
+      expect(Scheduler).toFlushWithoutYielding();
+    } catch (e) {
+      uncaughtErrors.push(e);
+    }
+
+    if (uncaughtErrors.length) {
+      throw uncaughtErrors[0];
+    }
+  });
+
+  // @gate experimental && enableFloat
+  it('fail hydration if a suitable resource cannot be found in the DOM for a given location (href)', async () => {
+    gate(flags => {
+      if (!(__EXPERIMENTAL__ && flags.enableFloat)) {
+        throw new Error('bailing out of test');
+      }
+    });
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <html>
+          <head />
+          <body>a body</body>
+        </html>,
+      );
+      pipe(writable);
+    });
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(
+      document,
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" precedence="low" />
+        </head>
+        <body>a body</body>
+      </html>,
+      {
+        onRecoverableError(err, errInfo) {
+          errors.push(err.message);
+        },
+      },
+    );
+    expect(() => {
+      expect(Scheduler).toFlushWithoutYielding();
+    }).toErrorDev(
+      [
+        'Warning: A matching Hydratable Resource was not found in the DOM for <link rel="stylesheet" href="foo">',
+        'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
+      ],
+      {withoutStack: 1},
+    );
+    expect(errors).toEqual([
+      'Hydration failed because the initial UI does not match what was rendered on the server.',
+      'Hydration failed because the initial UI does not match what was rendered on the server.',
+      'There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.',
+    ]);
+  });
+
+  // @gate experimental && enableFloat
+  it('should error in dev when rendering more than one resource for a given location (href)', async () => {
+    gate(flags => {
+      if (!(__EXPERIMENTAL__ && flags.enableFloat)) {
+        throw new Error('bailing out of test');
+      }
+    });
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.renderToPipeableStream(
+        <>
+          <link rel="stylesheet" href="foo" precedence="low" />
+          <link rel="stylesheet" href="foo" precedence="high" />
+          <html>
+            <head />
+            <body>a body</body>
+          </html>
+        </>,
+      );
+      pipe(writable);
+    });
+    expect(getVisibleChildren(document)).toEqual(
+      <html>
+        <head>
+          <link rel="stylesheet" href="foo" data-rprec="low" />
+          <link rel="stylesheet" href="foo" data-rprec="high" />
+        </head>
+        <body>a body</body>
+      </html>,
+    );
+
+    const errors = [];
+    ReactDOMClient.hydrateRoot(
+      document,
+      <>
+        <html>
+          <head>
+            <link rel="stylesheet" href="foo" precedence="low" />
+            <link rel="stylesheet" href="foo" precedence="high" />
+          </head>
+          <body>a body</body>
+        </html>
+      </>,
+      {
+        onRecoverableError(err, errInfo) {
+          errors.push(err.message);
+        },
+      },
+    );
+    expect(() => {
+      expect(Scheduler).toFlushWithoutYielding();
+    }).toErrorDev([
+      'Warning: 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 "foo"',
+      'Warning: 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 "foo"',
+    ]);
+    expect(errors).toEqual([]);
+  });
+
   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
diff --git a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
index 9d6a38188376..0245cebd0a9b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMRoot-test.js
@@ -358,6 +358,7 @@ describe('ReactDOMRoot', () => {
     );
   });
 
+  // @gate !__DEV__ || !enableFloat
   it('warns if updating a root that has had its contents removed', async () => {
     const root = ReactDOMClient.createRoot(container);
     root.render(<div>Hi</div>);
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 93c1534c235b..8b48bae61a49 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -73,6 +73,7 @@ import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
   enableClientRenderFallbackOnTextMismatch,
+  enableFloat,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -257,7 +258,7 @@ export function checkForUnmatchedText(
   }
 }
 
-function getOwnerDocumentFromRootContainer(
+export function getOwnerDocumentFromRootContainer(
   rootContainerElement: Element | Document | DocumentFragment,
 ): Document {
   return rootContainerElement.nodeType === DOCUMENT_NODE
@@ -1018,6 +1019,17 @@ export function diffHydratedProperties(
           : getPropertyInfo(propKey);
       if (rawProps[SUPPRESS_HYDRATION_WARNING] === true) {
         // Don't bother comparing. We're ignoring all these warnings.
+      } else if (
+        enableFloat &&
+        tag === 'link' &&
+        rawProps.rel === 'stylesheet' &&
+        propKey === 'precedence'
+      ) {
+        // @TODO this is a temporary rule while we haven't implemented HostResources yet. This is used to allow
+        // for hydrating Resources (at the moment, stylesheets with a precedence prop) by using a data attribute.
+        // When we implement HostResources there will be no hydration directly so this code can be deleted
+        // $FlowFixMe - Should be inferred as not undefined.
+        extraAttributeNames.delete('data-rprec');
       } else if (
         propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
         propKey === SUPPRESS_HYDRATION_WARNING ||
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 12a14df0f1c1..52646306767c 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -40,6 +40,7 @@ import {
   warnForDeletedHydratableText,
   warnForInsertedHydratedElement,
   warnForInsertedHydratedText,
+  getOwnerDocumentFromRootContainer,
 } from './ReactDOMComponent';
 import {getSelectionInformation, restoreSelection} from './ReactInputSelection';
 import setTextContent from './setTextContent';
@@ -64,6 +65,7 @@ import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 import {
   enableCreateEventHandleAPI,
   enableScopeAPI,
+  enableFloat,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {listenToAllSupportedEvents} from '../events/DOMPluginEventSystem';
@@ -675,6 +677,14 @@ export function clearContainer(container: Container): void {
 
 export const supportsHydration = true;
 
+export function isHydratableResource(type: string, props: Props) {
+  return (
+    type === 'link' &&
+    typeof (props: any).precedence === 'string' &&
+    (props: any).rel === 'stylesheet'
+  );
+}
+
 export function canHydrateInstance(
   instance: HydratableInstance,
   type: string,
@@ -769,10 +779,25 @@ export function registerSuspenseInstanceRetry(
 
 function getNextHydratable(node) {
   // Skip non-hydratable nodes.
-  for (; node != null; node = node.nextSibling) {
+  for (; node != null; node = ((node: any): Node).nextSibling) {
     const nodeType = node.nodeType;
-    if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
-      break;
+    if (enableFloat) {
+      if (nodeType === ELEMENT_NODE) {
+        if (
+          ((node: any): Element).tagName === 'LINK' &&
+          ((node: any): Element).hasAttribute('data-rprec')
+        ) {
+          continue;
+        }
+        break;
+      }
+      if (nodeType === TEXT_NODE) {
+        break;
+      }
+    } else {
+      if (nodeType === ELEMENT_NODE || nodeType === TEXT_NODE) {
+        break;
+      }
     }
     if (nodeType === COMMENT_NODE) {
       const nodeData = (node: any).data;
@@ -873,6 +898,43 @@ export function hydrateSuspenseInstance(
   precacheFiberNode(internalInstanceHandle, suspenseInstance);
 }
 
+export function getMatchingResourceInstance(
+  type: string,
+  props: Props,
+  rootHostContainer: Container,
+): ?Instance {
+  if (enableFloat) {
+    switch (type) {
+      case 'link': {
+        if (typeof (props: any).href !== 'string') {
+          return null;
+        }
+        const selector = `link[rel="stylesheet"][data-rprec][href="${
+          (props: any).href
+        }"]`;
+        const link = getOwnerDocumentFromRootContainer(
+          rootHostContainer,
+        ).querySelector(selector);
+        if (__DEV__) {
+          const allLinks = getOwnerDocumentFromRootContainer(
+            rootHostContainer,
+          ).querySelectorAll(selector);
+          if (allLinks.length > 1) {
+            console.error(
+              '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".',
+              (props: any).href,
+            );
+          }
+        }
+        return link;
+      }
+    }
+  }
+  return null;
+}
+
 export function getNextHydratableInstanceAfterSuspenseInstance(
   suspenseInstance: SuspenseInstance,
 ): null | HydratableInstance {
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index c522d91f21ff..9fbed21bd176 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -15,6 +15,7 @@ import type {
 
 import {queueExplicitHydrationTarget} from '../events/ReactDOMEventReplaying';
 import {REACT_ELEMENT_TYPE} from 'shared/ReactSymbols';
+import {enableFloat} from 'shared/ReactFeatureFlags';
 
 export type RootType = {
   render(children: ReactNodeList): void,
@@ -118,7 +119,7 @@ ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = functio
 
     const container = root.containerInfo;
 
-    if (container.nodeType !== COMMENT_NODE) {
+    if (!enableFloat && container.nodeType !== COMMENT_NODE) {
       const hostInstance = findHostInstanceWithNoPortals(root.current);
       if (hostInstance) {
         if (hostInstance.parentNode !== container) {
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 36c9469d6081..e9601b38a79a 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -20,6 +20,7 @@ import {Children} from 'react';
 import {
   enableFilterEmptyStringAttributesDOM,
   enableCustomElementPropertySupport,
+  enableFloat,
 } from 'shared/ReactFeatureFlags';
 
 import type {
@@ -1056,6 +1057,52 @@ function pushStartTextArea(
   return null;
 }
 
+function pushLink(
+  target: Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  responseState: ResponseState,
+): ReactNodeList {
+  const isStylesheet = props.rel === 'stylesheet';
+  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`.',
+          );
+        case 'precedence': {
+          if (isStylesheet) {
+            if (propValue === true || typeof propValue === 'string') {
+              pushAttribute(target, responseState, 'data-rprec', propValue);
+            } else if (__DEV__) {
+              throw new Error(
+                `the "precedence" prop for links to stylehseets expects to receive a string but received something of type "${typeof propValue}" instead.`,
+              );
+            }
+            break;
+          }
+          // intentionally fall through
+        }
+        // eslint-disable-next-line-no-fallthrough
+        default:
+          pushAttribute(target, responseState, propKey, propValue);
+          break;
+      }
+    }
+  }
+
+  target.push(endOfStartTagSelfClosing);
+  return null;
+}
+
 function pushSelfClosing(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
@@ -1189,6 +1236,39 @@ function pushStartTitle(
   return children;
 }
 
+function pushStartHead(
+  target: Array<Chunk | PrecomputedChunk>,
+  preamble: ?Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  responseState: ResponseState,
+): ReactNodeList {
+  // Preamble type is nullable for feature off cases but is guaranteed when feature is on
+  target = enableFloat ? (preamble: any) : target;
+
+  return pushStartGenericElement(target, props, tag, responseState);
+}
+
+function pushStartHtml(
+  target: Array<Chunk | PrecomputedChunk>,
+  preamble: ?Array<Chunk | PrecomputedChunk>,
+  props: Object,
+  tag: string,
+  formatContext: FormatContext,
+  responseState: ResponseState,
+): ReactNodeList {
+  // Preamble type is nullable for feature off cases but is guaranteed when feature is on
+  target = enableFloat ? (preamble: any) : target;
+
+  if (formatContext.insertionMode === ROOT_HTML_MODE) {
+    // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
+    // then we also emit the DOCTYPE as part of the root content as a convenience for
+    // rendering the whole document.
+    target.push(DOCTYPE);
+  }
+  return pushStartGenericElement(target, props, tag, responseState);
+}
+
 function pushStartGenericElement(
   target: Array<Chunk | PrecomputedChunk>,
   props: Object,
@@ -1405,6 +1485,7 @@ const DOCTYPE: PrecomputedChunk = stringToPrecomputedChunk('<!DOCTYPE html>');
 
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
+  preamble: ?Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
   responseState: ResponseState,
@@ -1461,6 +1542,8 @@ export function pushStartInstance(
       return pushStartMenuItem(target, props, responseState);
     case 'title':
       return pushStartTitle(target, props, responseState);
+    case 'link':
+      return pushLink(target, props, responseState);
     // Newline eating tags
     case 'listing':
     case 'pre': {
@@ -1475,7 +1558,6 @@ export function pushStartInstance(
     case 'hr':
     case 'img':
     case 'keygen':
-    case 'link':
     case 'meta':
     case 'param':
     case 'source':
@@ -1495,14 +1577,18 @@ export function pushStartInstance(
     case 'missing-glyph': {
       return pushStartGenericElement(target, props, type, responseState);
     }
+    // Preamble start tags
+    case 'head':
+      return pushStartHead(target, preamble, props, type, responseState);
     case 'html': {
-      if (formatContext.insertionMode === ROOT_HTML_MODE) {
-        // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
-        // then we also emit the DOCTYPE as part of the root content as a convenience for
-        // rendering the whole document.
-        target.push(DOCTYPE);
-      }
-      return pushStartGenericElement(target, props, type, responseState);
+      return pushStartHtml(
+        target,
+        preamble,
+        props,
+        type,
+        formatContext,
+        responseState,
+      );
     }
     default: {
       if (type.indexOf('-') === -1 && typeof props.is !== 'string') {
@@ -1521,6 +1607,7 @@ const endTag2 = stringToPrecomputedChunk('>');
 
 export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
+  postamble: ?Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
@@ -1546,6 +1633,12 @@ export function pushEndInstance(
       // No close tag needed.
       break;
     }
+    // Postamble end tags
+    case 'body':
+    case 'html':
+      // Preamble type is nullable for feature off cases but is guaranteed when feature is on
+      target = enableFloat ? (postamble: any) : target;
+    // Intentional fallthrough
     default: {
       target.push(endTag1, stringToChunk(type), endTag2);
     }
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 3c2c23c911fa..422d0ba3aed2 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -137,6 +137,7 @@ export function pushTextInstance(
 
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
+  preamble: ?Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
   responseState: ResponseState,
@@ -153,6 +154,7 @@ export function pushStartInstance(
 
 export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
+  postamble: ?Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index 14003b8291b3..e70de39ab386 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -113,6 +113,7 @@ const ReactNoopServer = ReactFizzServer({
   },
   pushStartInstance(
     target: Array<Uint8Array>,
+    preamble: Array<Uint8Array>,
     type: string,
     props: Object,
   ): ReactNodeList {
@@ -128,6 +129,7 @@ const ReactNoopServer = ReactFizzServer({
 
   pushEndInstance(
     target: Array<Uint8Array>,
+    postamble: Array<Uint8Array>,
     type: string,
     props: Object,
   ): void {
diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
index f61c0eb7789e..9eba0aad9dc2 100644
--- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
+++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js
@@ -24,10 +24,12 @@ export const supportsHydration = false;
 export const canHydrateInstance = shim;
 export const canHydrateTextInstance = shim;
 export const canHydrateSuspenseInstance = shim;
+export const isHydratableResource = shim;
 export const isSuspenseInstancePending = shim;
 export const isSuspenseInstanceFallback = shim;
 export const getSuspenseInstanceFallbackErrorDetails = shim;
 export const registerSuspenseInstanceRetry = shim;
+export const getMatchingResourceInstance = shim;
 export const getNextHydratableSibling = shim;
 export const getFirstHydratableChild = shim;
 export const getFirstHydratableChildWithinContainer = shim;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index fd3f9b18a492..23010daad497 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -34,6 +34,7 @@ import {
   NoFlags,
   DidCapture,
 } from './ReactFiberFlags';
+import {enableFloat} from 'shared/ReactFeatureFlags';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -45,7 +46,9 @@ import {
   canHydrateInstance,
   canHydrateTextInstance,
   canHydrateSuspenseInstance,
+  isHydratableResource,
   getNextHydratableSibling,
+  getMatchingResourceInstance,
   getFirstHydratableChild,
   getFirstHydratableChildWithinContainer,
   getFirstHydratableChildWithinSuspenseInstance,
@@ -75,6 +78,7 @@ import {
   restoreSuspendedTreeContext,
 } from './ReactFiberTreeContext.new';
 import {queueRecoverableErrors} from './ReactFiberWorkLoop.new';
+import {getRootHostContainer} from './ReactFiberHostContext.new';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -404,6 +408,19 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
+  if (enableFloat) {
+    if (
+      fiber.tag === HostComponent &&
+      isHydratableResource(fiber.type, fiber.pendingProps)
+    ) {
+      fiber.stateNode = getMatchingResourceInstance(
+        fiber.type,
+        fiber.pendingProps,
+        getRootHostContainer(),
+      );
+      return;
+    }
+  }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
     if (shouldClientRenderOnMismatch(fiber)) {
@@ -596,6 +613,30 @@ function popHydrationState(fiber: Fiber): boolean {
   if (!supportsHydration) {
     return false;
   }
+  if (
+    enableFloat &&
+    isHydrating &&
+    isHydratableResource(fiber.type, fiber.memoizedProps)
+  ) {
+    if (fiber.stateNode === null) {
+      if (__DEV__) {
+        const rel = fiber.memoizedProps.rel
+          ? `rel="${fiber.memoizedProps.rel}" `
+          : '';
+        const href = fiber.memoizedProps.href
+          ? `href="${fiber.memoizedProps.href}"`
+          : '';
+        console.error(
+          'A matching Hydratable Resource was not found in the DOM for <%s %s%s>.',
+          fiber.type,
+          rel,
+          href,
+        );
+      }
+      throwOnHydrationMismatch(fiber);
+    }
+    return true;
+  }
   if (fiber !== hydrationParentFiber) {
     // We're deeper than the current hydration context, inside an inserted
     // tree.
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 9ac9e4dc666b..28371e823e5c 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -34,6 +34,7 @@ import {
   NoFlags,
   DidCapture,
 } from './ReactFiberFlags';
+import {enableFloat} from 'shared/ReactFeatureFlags';
 
 import {
   createFiberFromHostInstanceForDeletion,
@@ -45,7 +46,9 @@ import {
   canHydrateInstance,
   canHydrateTextInstance,
   canHydrateSuspenseInstance,
+  isHydratableResource,
   getNextHydratableSibling,
+  getMatchingResourceInstance,
   getFirstHydratableChild,
   getFirstHydratableChildWithinContainer,
   getFirstHydratableChildWithinSuspenseInstance,
@@ -75,6 +78,7 @@ import {
   restoreSuspendedTreeContext,
 } from './ReactFiberTreeContext.old';
 import {queueRecoverableErrors} from './ReactFiberWorkLoop.old';
+import {getRootHostContainer} from './ReactFiberHostContext.old';
 
 // The deepest Fiber on the stack involved in a hydration context.
 // This may have been an insertion or a hydration.
@@ -404,6 +408,19 @@ function tryToClaimNextHydratableInstance(fiber: Fiber): void {
   if (!isHydrating) {
     return;
   }
+  if (enableFloat) {
+    if (
+      fiber.tag === HostComponent &&
+      isHydratableResource(fiber.type, fiber.pendingProps)
+    ) {
+      fiber.stateNode = getMatchingResourceInstance(
+        fiber.type,
+        fiber.pendingProps,
+        getRootHostContainer(),
+      );
+      return;
+    }
+  }
   let nextInstance = nextHydratableInstance;
   if (!nextInstance) {
     if (shouldClientRenderOnMismatch(fiber)) {
@@ -596,6 +613,30 @@ function popHydrationState(fiber: Fiber): boolean {
   if (!supportsHydration) {
     return false;
   }
+  if (
+    enableFloat &&
+    isHydrating &&
+    isHydratableResource(fiber.type, fiber.memoizedProps)
+  ) {
+    if (fiber.stateNode === null) {
+      if (__DEV__) {
+        const rel = fiber.memoizedProps.rel
+          ? `rel="${fiber.memoizedProps.rel}" `
+          : '';
+        const href = fiber.memoizedProps.href
+          ? `href="${fiber.memoizedProps.href}"`
+          : '';
+        console.error(
+          'A matching Hydratable Resource was not found in the DOM for <%s %s%s>.',
+          fiber.type,
+          rel,
+          href,
+        );
+      }
+      throwOnHydrationMismatch(fiber);
+    }
+    return true;
+  }
   if (fiber !== hydrationParentFiber) {
     // We're deeper than the current hydration context, inside an inserted
     // tree.
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 8afc9a3aa2cb..9bb5d6e271c4 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -186,3 +186,6 @@ export const didNotFindHydratableTextInstance =
 export const didNotFindHydratableSuspenseInstance =
   $$$hostConfig.didNotFindHydratableSuspenseInstance;
 export const errorHydratingContainer = $$$hostConfig.errorHydratingContainer;
+export const isHydratableResource = $$$hostConfig.isHydratableResource;
+export const getMatchingResourceInstance =
+  $$$hostConfig.getMatchingResourceInstance;
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f2974e0507e1..84db02300fb8 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -117,6 +117,7 @@ import {
   warnAboutDefaultPropsOnFunctionComponents,
   enableScopeAPI,
   enableSuspenseAvoidThisFallbackFizz,
+  enableFloat,
 } from 'shared/ReactFeatureFlags';
 
 import assign from 'shared/assign';
@@ -200,6 +201,8 @@ export opaque type Request = {
   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.
+  +preamble: ?Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted before any segment chunks.
+  +postamble: ?Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted after segments, waiting for all pending root tasks to finish
   // 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
@@ -272,6 +275,8 @@ export function createRequest(
     clientRenderedBoundaries: [],
     completedBoundaries: [],
     partialBoundaries: [],
+    preamble: enableFloat ? [] : null,
+    postamble: enableFloat ? [] : null,
     onError: onError === undefined ? defaultErrorHandler : onError,
     onAllReady: onAllReady === undefined ? noop : onAllReady,
     onShellReady: onShellReady === undefined ? noop : onShellReady,
@@ -632,6 +637,7 @@ function renderHostElement(
   const segment = task.blockedSegment;
   const children = pushStartInstance(
     segment.chunks,
+    request.preamble,
     type,
     props,
     request.responseState,
@@ -647,7 +653,7 @@ function renderHostElement(
   // 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.
   segment.formatContext = prevContext;
-  pushEndInstance(segment.chunks, type, props);
+  pushEndInstance(segment.chunks, request.postamble, type, props);
   segment.lastPushedText = false;
   popComponentStackInDEV(task);
 }
@@ -2063,20 +2069,33 @@ function flushCompletedQueues(
 
     // TODO: Emit preloading.
 
-    // TODO: It's kind of unfortunate to keep checking this array after we've already
-    // emitted the root.
+    let i;
     const completedRootSegment = request.completedRootSegment;
-    if (completedRootSegment !== null && request.pendingRootTasks === 0) {
-      flushSegment(request, destination, completedRootSegment);
-      request.completedRootSegment = null;
-      writeCompletedRoot(destination, request.responseState);
+    if (completedRootSegment !== null) {
+      if (request.pendingRootTasks === 0) {
+        if (enableFloat) {
+          const preamble: Array<
+            Chunk | PrecomputedChunk,
+          > = (request.preamble: any);
+          for (i = 0; i < preamble.length; i++) {
+            // we expect the preamble to be tiny and will ignore backpressure
+            writeChunk(destination, preamble[i]);
+          }
+        }
+
+        flushSegment(request, destination, completedRootSegment);
+        request.completedRootSegment = null;
+        writeCompletedRoot(destination, request.responseState);
+      } else {
+        // We haven't flushed the root yet so we don't need to check boundaries further down
+        return;
+      }
     }
 
     // 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;
-    let i;
     for (i = 0; i < clientRenderedBoundaries.length; i++) {
       const boundary = clientRenderedBoundaries[i];
       if (!flushClientRenderedBoundary(request, destination, boundary)) {
@@ -2139,8 +2158,6 @@ function flushCompletedQueues(
     }
     largeBoundaries.splice(0, i);
   } finally {
-    completeWriting(destination);
-    flushBuffered(destination);
     if (
       request.allPendingTasks === 0 &&
       request.pingedTasks.length === 0 &&
@@ -2149,6 +2166,16 @@ function flushCompletedQueues(
       // We don't need to check any partially completed segments because
       // either they have pending task or they're complete.
     ) {
+      if (enableFloat) {
+        const postamble: Array<
+          Chunk | PrecomputedChunk,
+        > = (request.postamble: any);
+        for (let i = 0; i < postamble.length; i++) {
+          writeChunk(destination, postamble[i]);
+        }
+      }
+      completeWriting(destination);
+      flushBuffered(destination);
       if (__DEV__) {
         if (request.abortableTasks.size !== 0) {
           console.error(
@@ -2158,6 +2185,9 @@ function flushCompletedQueues(
       }
       // We're done.
       close(destination);
+    } else {
+      completeWriting(destination);
+      flushBuffered(destination);
     }
   }
 }
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 33d233f92e4e..98c9b53dcab2 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -116,6 +116,8 @@ export const enableCPUSuspense = __EXPERIMENTAL__;
 // aggressiveness.
 export const deletedTreeCleanUpLevel = 3;
 
+export const enableFloat = __EXPERIMENTAL__;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 0e07c9f67d99..3b54f76f1a52 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -81,6 +81,7 @@ export const enableUseMutableSource = true;
 export const enableTransitionTracing = false;
 export const enableSymbolFallbackForWWW = false;
 
+export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 933d914ce5a6..fc125d411073 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -70,6 +70,7 @@ export const enableUseMutableSource = false;
 export const enableTransitionTracing = false;
 export const enableSymbolFallbackForWWW = false;
 
+export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b218c53470bd..cbdd24ef5a90 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -70,6 +70,7 @@ export const enableUseMutableSource = false;
 export const enableTransitionTracing = false;
 export const enableSymbolFallbackForWWW = false;
 
+export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index b76a1b8506d1..ec4e9deddc72 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -68,6 +68,7 @@ export const enableUseMutableSource = false;
 export const enableTransitionTracing = false;
 export const enableSymbolFallbackForWWW = false;
 
+export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 63ba329f01a9..6fd3a292861f 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -72,6 +72,7 @@ export const enableUseMutableSource = true;
 export const enableTransitionTracing = false;
 export const enableSymbolFallbackForWWW = false;
 
+export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 9e5a9107ab2b..0faa78126ee5 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -70,6 +70,7 @@ export const enableUseMutableSource = false;
 export const enableTransitionTracing = false;
 export const enableSymbolFallbackForWWW = false;
 
+export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index a4c3e1ba3267..b987da6c350b 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -71,6 +71,7 @@ export const enableUseMutableSource = true;
 export const enableTransitionTracing = false;
 export const enableSymbolFallbackForWWW = false;
 
+export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 7a89e41ad54f..dd6dcff47b30 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -60,5 +60,6 @@ export const disableNativeComponentFrames = false;
 export const createRootStrictEffectsByDefault = false;
 export const enableStrictEffects = false;
 export const allowConcurrentByDefault = true;
+export const enableFloat = 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
index 50d078d3f0fd..4876ac1ff30e 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -52,6 +52,7 @@ export const enableUpdaterTracking = __PROFILE__;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableFloat = false;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 010afa06e70f..d5f273fe1e4d 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -420,5 +420,7 @@
   "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."
+  "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 stylehseets expects to receive a string but received something of type \"%s\" instead."
 }

From 6ef466c681c987493432608be56f2e01f94268d7 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Tue, 16 Aug 2022 04:17:49 -0700
Subject: [PATCH 1510/1603] make preamble and postamble types explicit and fix
 typo (#25102)

---
 .../src/server/ReactDOMServerFormatConfig.js    | 17 ++++++++---------
 .../src/server/ReactNativeServerFormatConfig.js |  4 ++--
 packages/react-server/src/ReactFizzServer.js    | 16 ++++++----------
 scripts/error-codes/codes.json                  |  2 +-
 4 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index e9601b38a79a..1cf876940d3f 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -1084,7 +1084,7 @@ function pushLink(
               pushAttribute(target, responseState, 'data-rprec', propValue);
             } else if (__DEV__) {
               throw new Error(
-                `the "precedence" prop for links to stylehseets expects to receive a string but received something of type "${typeof propValue}" instead.`,
+                `the "precedence" prop for links to stylesheets expects to receive a string but received something of type "${typeof propValue}" instead.`,
               );
             }
             break;
@@ -1238,27 +1238,27 @@ function pushStartTitle(
 
 function pushStartHead(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: ?Array<Chunk | PrecomputedChunk>,
+  preamble: Array<Chunk | PrecomputedChunk>,
   props: Object,
   tag: string,
   responseState: ResponseState,
 ): ReactNodeList {
   // Preamble type is nullable for feature off cases but is guaranteed when feature is on
-  target = enableFloat ? (preamble: any) : target;
+  target = enableFloat ? preamble : target;
 
   return pushStartGenericElement(target, props, tag, responseState);
 }
 
 function pushStartHtml(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: ?Array<Chunk | PrecomputedChunk>,
+  preamble: Array<Chunk | PrecomputedChunk>,
   props: Object,
   tag: string,
   formatContext: FormatContext,
   responseState: ResponseState,
 ): ReactNodeList {
   // Preamble type is nullable for feature off cases but is guaranteed when feature is on
-  target = enableFloat ? (preamble: any) : target;
+  target = enableFloat ? preamble : target;
 
   if (formatContext.insertionMode === ROOT_HTML_MODE) {
     // If we're rendering the html tag and we're at the root (i.e. not in foreignObject)
@@ -1485,7 +1485,7 @@ const DOCTYPE: PrecomputedChunk = stringToPrecomputedChunk('<!DOCTYPE html>');
 
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: ?Array<Chunk | PrecomputedChunk>,
+  preamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
   responseState: ResponseState,
@@ -1607,7 +1607,7 @@ const endTag2 = stringToPrecomputedChunk('>');
 
 export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  postamble: ?Array<Chunk | PrecomputedChunk>,
+  postamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
@@ -1636,8 +1636,7 @@ export function pushEndInstance(
     // Postamble end tags
     case 'body':
     case 'html':
-      // Preamble type is nullable for feature off cases but is guaranteed when feature is on
-      target = enableFloat ? (postamble: any) : target;
+      target = enableFloat ? postamble : target;
     // Intentional fallthrough
     default: {
       target.push(endTag1, stringToChunk(type), endTag2);
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 422d0ba3aed2..92685d4f85be 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -137,7 +137,7 @@ export function pushTextInstance(
 
 export function pushStartInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  preamble: ?Array<Chunk | PrecomputedChunk>,
+  preamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
   responseState: ResponseState,
@@ -154,7 +154,7 @@ export function pushStartInstance(
 
 export function pushEndInstance(
   target: Array<Chunk | PrecomputedChunk>,
-  postamble: ?Array<Chunk | PrecomputedChunk>,
+  postamble: Array<Chunk | PrecomputedChunk>,
   type: string,
   props: Object,
 ): void {
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 84db02300fb8..7828c808f16c 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -201,8 +201,8 @@ export opaque type Request = {
   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.
-  +preamble: ?Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted before any segment chunks.
-  +postamble: ?Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted after segments, waiting for all pending root tasks to finish
+  +preamble: Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted before any segment chunks.
+  +postamble: Array<Chunk | PrecomputedChunk>, // Chunks that need to be emitted after segments, waiting for all pending root tasks to finish
   // 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
@@ -275,8 +275,8 @@ export function createRequest(
     clientRenderedBoundaries: [],
     completedBoundaries: [],
     partialBoundaries: [],
-    preamble: enableFloat ? [] : null,
-    postamble: enableFloat ? [] : null,
+    preamble: [],
+    postamble: [],
     onError: onError === undefined ? defaultErrorHandler : onError,
     onAllReady: onAllReady === undefined ? noop : onAllReady,
     onShellReady: onShellReady === undefined ? noop : onShellReady,
@@ -2074,9 +2074,7 @@ function flushCompletedQueues(
     if (completedRootSegment !== null) {
       if (request.pendingRootTasks === 0) {
         if (enableFloat) {
-          const preamble: Array<
-            Chunk | PrecomputedChunk,
-          > = (request.preamble: any);
+          const preamble = request.preamble;
           for (i = 0; i < preamble.length; i++) {
             // we expect the preamble to be tiny and will ignore backpressure
             writeChunk(destination, preamble[i]);
@@ -2167,9 +2165,7 @@ function flushCompletedQueues(
       // either they have pending task or they're complete.
     ) {
       if (enableFloat) {
-        const postamble: Array<
-          Chunk | PrecomputedChunk,
-        > = (request.postamble: any);
+        const postamble = request.postamble;
         for (let i = 0; i < postamble.length; i++) {
           writeChunk(destination, postamble[i]);
         }
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index d5f273fe1e4d..15e92133a14d 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -422,5 +422,5 @@
   "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 stylehseets expects to receive a string but received something of type \"%s\" instead."
+  "437": "the \"precedence\" prop for links to stylesheets expects to receive a string but received something of type \"%s\" instead."
 }

From 1e5245df89e45b788acf3af3769f0d816b18458d Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Wed, 17 Aug 2022 08:31:05 +0100
Subject: [PATCH 1511/1603] support subresource integrity for bootstrapScripts
 and bootstrapModules (#25104)

---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 55 +++++++++++++++++++
 .../src/server/ReactDOMFizzServerBrowser.js   |  5 +-
 .../src/server/ReactDOMFizzServerNode.js      |  5 +-
 .../src/server/ReactDOMFizzStaticBrowser.js   |  5 +-
 .../src/server/ReactDOMFizzStaticNode.js      |  6 +-
 .../src/server/ReactDOMServerFormatConfig.js  | 39 +++++++++++--
 6 files changed, 101 insertions(+), 14 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 10d3237bf38d..3812baffc748 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -3390,6 +3390,61 @@ describe('ReactDOMFizzServer', () => {
     });
   });
 
+  it('accepts an integrity property for bootstrapScripts and bootstrapModules', async () => {
+    await actIntoEmptyDocument(() => {
+      const {pipe} = ReactDOMFizzServer.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 />
+        <body>
+          <div>hello world</div>
+        </body>
+      </html>,
+    );
+    expect(
+      Array.from(document.getElementsByTagName('script')).map(n => n.outerHTML),
+    ).toEqual([
+      '<script src="foo" 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>',
+    ]);
+  });
+
   describe('bootstrapScriptContent escaping', () => {
     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 = '';
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index acfe13e4ebbc..2f626c922aa1 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -28,8 +29,8 @@ type Options = {|
   namespaceURI?: string,
   nonce?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 4728a48a0552..6790c44bccac 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -9,6 +9,7 @@
 
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Writable} from 'stream';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -38,8 +39,8 @@ type Options = {|
   namespaceURI?: string,
   nonce?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   onShellReady?: () => void,
   onShellError?: (error: mixed) => void,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
index 989d2de31ba0..38e4c948f6b9 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -27,8 +28,8 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
index e799c21a8b78..b5f0022d1295 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -8,6 +8,8 @@
  */
 
 import type {ReactNodeList} from 'shared/ReactTypes';
+import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
+
 import {Writable, Readable} from 'stream';
 
 import ReactVersion from 'shared/ReactVersion';
@@ -28,8 +30,8 @@ type Options = {|
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
-  bootstrapScripts?: Array<string>,
-  bootstrapModules?: Array<string>,
+  bootstrapScripts?: Array<string | BootstrapScriptDescriptor>,
+  bootstrapModules?: Array<string | BootstrapScriptDescriptor>,
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 1cf876940d3f..308e35a20b3a 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -82,6 +82,7 @@ const endInlineScript = stringToPrecomputedChunk('</script>');
 
 const startScriptSrc = stringToPrecomputedChunk('<script src="');
 const startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
+const scriptIntegirty = stringToPrecomputedChunk('" integrity="');
 const endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 /**
@@ -104,13 +105,17 @@ const scriptRegex = /(<\/|<)(s)(cript)/gi;
 const scriptReplacer = (match, prefix, s, suffix) =>
   `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
 
+export type BootstrapScriptDescriptor = {
+  src: string,
+  integrity?: string,
+};
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
   nonce: string | void,
   bootstrapScriptContent: string | void,
-  bootstrapScripts: Array<string> | void,
-  bootstrapModules: Array<string> | void,
+  bootstrapScripts: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
+  bootstrapModules: $ReadOnlyArray<string | BootstrapScriptDescriptor> | void,
 ): ResponseState {
   const idPrefix = identifierPrefix === undefined ? '' : identifierPrefix;
   const inlineScriptWithNonce =
@@ -129,20 +134,42 @@ export function createResponseState(
   }
   if (bootstrapScripts !== undefined) {
     for (let i = 0; i < bootstrapScripts.length; i++) {
+      const scriptConfig = bootstrapScripts[i];
+      const src =
+        typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
+      const integrity =
+        typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
       bootstrapChunks.push(
         startScriptSrc,
-        stringToChunk(escapeTextForBrowser(bootstrapScripts[i])),
-        endAsyncScript,
+        stringToChunk(escapeTextForBrowser(src)),
       );
+      if (integrity) {
+        bootstrapChunks.push(
+          scriptIntegirty,
+          stringToChunk(escapeTextForBrowser(integrity)),
+        );
+      }
+      bootstrapChunks.push(endAsyncScript);
     }
   }
   if (bootstrapModules !== undefined) {
     for (let i = 0; i < bootstrapModules.length; i++) {
+      const scriptConfig = bootstrapModules[i];
+      const src =
+        typeof scriptConfig === 'string' ? scriptConfig : scriptConfig.src;
+      const integrity =
+        typeof scriptConfig === 'string' ? undefined : scriptConfig.integrity;
       bootstrapChunks.push(
         startModuleSrc,
-        stringToChunk(escapeTextForBrowser(bootstrapModules[i])),
-        endAsyncScript,
+        stringToChunk(escapeTextForBrowser(src)),
       );
+      if (integrity) {
+        bootstrapChunks.push(
+          scriptIntegirty,
+          stringToChunk(escapeTextForBrowser(integrity)),
+        );
+      }
+      bootstrapChunks.push(endAsyncScript);
     }
   }
   return {

From 19e9a4c68e16356f5079cb1d3939ac1515a9fdad Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Thu, 18 Aug 2022 14:33:36 +0100
Subject: [PATCH 1512/1603] Add missing createServerContext for experimental
 shared subset (#25114)

---
 packages/react/src/ReactSharedSubset.experimental.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react/src/ReactSharedSubset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js
index 932aa1da6d0c..4a9ad873c1dc 100644
--- a/packages/react/src/ReactSharedSubset.experimental.js
+++ b/packages/react/src/ReactSharedSubset.experimental.js
@@ -19,6 +19,7 @@ export {
   createElement,
   createMutableSource as unstable_createMutableSource,
   createRef,
+  createServerContext,
   forwardRef,
   isValidElement,
   lazy,

From 26ba5fb2e003e334c51b0e2ea750faa32a27a8f9 Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Fri, 19 Aug 2022 16:18:14 -0700
Subject: [PATCH 1513/1603] [DevTools] Add events necessary for click to
 inspect on RN (#25111)

* Add inspectingNative events for RN

* Enable inspection toggle UI for RN

* Add a stopInspectingNative method for agent
---
 packages/react-devtools-core/src/standalone.js              | 2 +-
 packages/react-devtools-shared/src/backend/agent.js         | 6 ++++++
 .../src/backend/views/Highlighter/index.js                  | 4 ++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 72b037d1747d..ff69b709dab0 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -256,7 +256,7 @@ function initialize(socket: WebSocket) {
 
   store = new Store(bridge, {
     checkBridgeProtocolCompatibility: true,
-    supportsNativeInspection: false,
+    supportsNativeInspection: true,
   });
 
   log('Connected');
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index a5bb7139f616..222a883ce761 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -144,6 +144,8 @@ type PersistedSelection = {|
 export default class Agent extends EventEmitter<{|
   hideNativeHighlight: [],
   showNativeHighlight: [NativeType],
+  startInspectingNative: [],
+  stopInspectingNative: [],
   shutdown: [],
   traceUpdates: [Set<NativeType>],
 |}> {
@@ -655,6 +657,10 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
+  stopInspectingNative = (selected: boolean) => {
+    this._bridge.send('stopInspectingNative', selected);
+  };
+
   storeAsGlobal = ({count, id, path, rendererID}: StoreAsGlobalParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
index 683c37fd8d02..9355fab10969 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -48,6 +48,8 @@ export default function setupHighlighter(
       window.addEventListener('pointerdown', onPointerDown, true);
       window.addEventListener('pointerover', onPointerOver, true);
       window.addEventListener('pointerup', onPointerUp, true);
+    } else {
+      agent.emit('startInspectingNative');
     }
   }
 
@@ -74,6 +76,8 @@ export default function setupHighlighter(
       window.removeEventListener('pointerdown', onPointerDown, true);
       window.removeEventListener('pointerover', onPointerOver, true);
       window.removeEventListener('pointerup', onPointerUp, true);
+    } else {
+      agent.emit('stopInspectingNative');
     }
   }
 

From 1b69a8bb73f653c3f421cc1f7ae00ad9ce1f24be Mon Sep 17 00:00:00 2001
From: Evren <57806596+evrenkaraarslan@users.noreply.github.com>
Date: Sun, 21 Aug 2022 22:16:01 +0300
Subject: [PATCH 1514/1603] fixture: Fix typo from perfomrance to performance
 (#25100)

---
 fixtures/fizz/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fixtures/fizz/README.md b/fixtures/fizz/README.md
index 63acd3ddc545..7cd118b8947b 100644
--- a/fixtures/fizz/README.md
+++ b/fixtures/fizz/README.md
@@ -1,6 +1,6 @@
 # Fizz Fixtures
 
-A set of basic tests for Fizz primarily focussed on baseline perfomrance of legacy renderToString and streaming implementations.
+A set of basic tests for Fizz primarily focussed on baseline performance of legacy renderToString and streaming implementations.
 
 ## Setup
 

From e25648b0a89eab6f82bea2c2a1ef90866ac82b33 Mon Sep 17 00:00:00 2001
From: taiga <44428053+taiga39@users.noreply.github.com>
Date: Tue, 23 Aug 2022 01:40:26 +0900
Subject: [PATCH 1515/1603] devtools: Fix typo from directores to directories
 (#25124)

---
 packages/react-devtools-core/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools-core/README.md b/packages/react-devtools-core/README.md
index 4ee323fc9910..af6b3a1264ef 100644
--- a/packages/react-devtools-core/README.md
+++ b/packages/react-devtools-core/README.md
@@ -90,7 +90,7 @@ Set the DOM element DevTools UI should be rendered into on initialization.
 _Optional_ callback to be notified when DevTools `WebSocket` closes (or errors).
 
 #### `setProjectRoots(roots: Array<string>)`
-_Optional_ set of root directores for source files. These roots can be used to open an inspected component's source code using an IDE.
+_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).

From 9e67e7a31582079263665fac0391220b99d8bb86 Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Tue, 23 Aug 2022 01:36:02 -0700
Subject: [PATCH 1516/1603] Scaffolding for useMemoCache hook (#25123)

* Scaffolding for useMemoCache hook
* cleanup leftovers from copy/paste of use() diff

Co-authored-by: Andrew Clark <git@andrewclark.io>
---
 .../src/ReactFiberHooks.new.js                | 53 +++++++++++++++++++
 .../src/ReactFiberHooks.old.js                | 53 +++++++++++++++++++
 .../src/ReactInternalTypes.js                 |  1 +
 packages/react-server/src/ReactFizzHooks.js   |  9 +++-
 packages/react-server/src/ReactFlightHooks.js |  3 ++
 .../src/ReactSuspenseTestUtils.js             |  1 +
 packages/react/index.classic.fb.js            |  1 +
 packages/react/index.experimental.js          |  1 +
 packages/react/index.js                       |  1 +
 packages/react/index.modern.fb.js             |  1 +
 packages/react/src/React.js                   |  2 +
 packages/react/src/ReactHooks.js              |  6 +++
 packages/shared/ReactFeatureFlags.js          |  4 ++
 .../forks/ReactFeatureFlags.native-fb.js      |  1 +
 .../forks/ReactFeatureFlags.native-oss.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |  1 +
 .../ReactFeatureFlags.test-renderer.native.js |  1 +
 .../ReactFeatureFlags.test-renderer.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js |  1 +
 .../forks/ReactFeatureFlags.testing.www.js    |  1 +
 .../shared/forks/ReactFeatureFlags.www.js     |  1 +
 21 files changed, 143 insertions(+), 1 deletion(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 4cc4dda6fa61..074bad71b3bc 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -32,6 +32,7 @@ import {
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
+  enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -721,6 +722,10 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   };
 }
 
+function useMemoCache(size: number): Array<any> {
+  throw new Error('Not implemented.');
+}
+
 function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
   // $FlowFixMe: Flow doesn't like mixed types
   return typeof action === 'function' ? action(state) : action;
@@ -2416,6 +2421,9 @@ if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
+if (enableUseMemoCacheHook) {
+  (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -2444,6 +2452,9 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
+}
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -2471,6 +2482,9 @@ if (enableCache) {
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2499,6 +2513,9 @@ if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2674,6 +2691,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2816,6 +2836,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2958,6 +2981,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3101,6 +3127,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3260,6 +3289,14 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3419,6 +3456,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3579,4 +3624,12 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index c3cb1ed82016..9e461e54678b 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -32,6 +32,7 @@ import {
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
+  enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
 import {
@@ -721,6 +722,10 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   };
 }
 
+function useMemoCache(size: number): Array<any> {
+  throw new Error('Not implemented.');
+}
+
 function basicStateReducer<S>(state: S, action: BasicStateAction<S>): S {
   // $FlowFixMe: Flow doesn't like mixed types
   return typeof action === 'function' ? action(state) : action;
@@ -2416,6 +2421,9 @@ if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
+if (enableUseMemoCacheHook) {
+  (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -2444,6 +2452,9 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
+}
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -2471,6 +2482,9 @@ if (enableCache) {
   (HooksDispatcherOnUpdate: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnUpdate: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2499,6 +2513,9 @@ if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseMemoCacheHook) {
+  (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2674,6 +2691,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2816,6 +2836,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2958,6 +2981,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3101,6 +3127,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3260,6 +3289,14 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3419,6 +3456,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3579,4 +3624,12 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseMemoCacheHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
+      size: number,
+    ): Array<any> {
+      warnInvalidHookAccess();
+      return useMemoCache(size);
+    };
+  }
 }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index e017674dda20..e9a4b61039f6 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -403,6 +403,7 @@ export type Dispatcher = {|
   ): T,
   useId(): string,
   useCacheRefresh?: () => <T>(?() => T, ?T) => void,
+  useMemoCache?: (size: number) => Array<any>,
 
   unstable_isNewReconciler?: boolean,
 |};
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index c3ffa8cd6abd..960800e903c2 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -25,7 +25,7 @@ import {getTreeId} from './ReactFizzTreeContext';
 
 import {makeId} from './ReactServerFormatConfig';
 
-import {enableCache} from 'shared/ReactFeatureFlags';
+import {enableCache, enableUseMemoCacheHook} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
 type BasicStateAction<S> = (S => S) | S;
@@ -537,6 +537,10 @@ function useCacheRefresh(): <T>(?() => T, ?T) => void {
   return unsupportedRefresh;
 }
 
+function useMemoCache(size: number): Array<any> {
+  return new Array(size);
+}
+
 function noop(): void {}
 
 export const Dispatcher: DispatcherType = {
@@ -567,6 +571,9 @@ if (enableCache) {
   Dispatcher.getCacheForType = getCacheForType;
   Dispatcher.useCacheRefresh = useCacheRefresh;
 }
+if (enableUseMemoCacheHook) {
+  Dispatcher.useMemoCache = useMemoCache;
+}
 
 export let currentResponseState: null | ResponseState = (null: any);
 export function setCurrentResponseState(
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index 5b10d8c7a1f6..a9782c712aca 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -78,6 +78,9 @@ export const Dispatcher: DispatcherType = {
   useCacheRefresh(): <T>(?() => T, ?T) => void {
     return unsupportedRefresh;
   },
+  useMemoCache(size: number): Array<any> {
+    return new Array(size);
+  },
 };
 
 function unsupportedHook(): void {
diff --git a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
index d75f1f7c9b45..abd6cb5779b4 100644
--- a/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
+++ b/packages/react-suspense-test-utils/src/ReactSuspenseTestUtils.js
@@ -46,6 +46,7 @@ export function waitForSuspense<T>(fn: () => T): Promise<T> {
     useMutableSource: unsupported,
     useSyncExternalStore: unsupported,
     useCacheRefresh: unsupported,
+    useMemoCache: unsupported,
   };
   // Not using async/await because we don't compile it.
   return new Promise((resolve, reject) => {
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 0a2795a62651..65cc12a7cfc2 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -42,6 +42,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 287c13729881..7bfb6bc21f05 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -35,6 +35,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.js b/packages/react/index.js
index 084aabb53c6b..77cd739625b9 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -63,6 +63,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index e9f80ade0610..e9e4202d7ae5 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -40,6 +40,7 @@ export {
   unstable_getCacheSignal,
   unstable_getCacheForType,
   unstable_useCacheRefresh,
+  unstable_useMemoCache,
   useId,
   useCallback,
   useContext,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 264c1e1dc56d..701c4d1781c1 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -55,6 +55,7 @@ import {
   useDeferredValue,
   useId,
   useCacheRefresh,
+  useMemoCache,
 } from './ReactHooks';
 import {
   createElementWithValidation,
@@ -127,6 +128,7 @@ export {
   getCacheForType as unstable_getCacheForType,
   useCacheRefresh as unstable_useCacheRefresh,
   REACT_CACHE_TYPE as unstable_Cache,
+  useMemoCache as unstable_useMemoCache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
   // enableTransitionTracing
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 9dc7a98589e4..197edfaedc55 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -204,3 +204,9 @@ export function useCacheRefresh(): <T>(?() => T, ?T) => void {
   // $FlowFixMe This is unstable, thus optional
   return dispatcher.useCacheRefresh();
 }
+
+export function useMemoCache(size: number): Array<any> {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.useMemoCache(size);
+}
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 98c9b53dcab2..0bd4fc6c04ab 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -118,6 +118,10 @@ export const deletedTreeCleanUpLevel = 3;
 
 export const enableFloat = __EXPERIMENTAL__;
 
+// Enables unstable_useMemoCache hook, intended as a compilation target for
+// auto-memoization.
+export const enableUseMemoCacheHook = __EXPERIMENTAL__;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 3b54f76f1a52..ec5ae1bf63a7 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,6 +50,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index fc125d411073..2ed90a83b9a5 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index cbdd24ef5a90..81992652fe96 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index ec4e9deddc72..5d6eba8f7fbe 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -49,6 +49,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 6fd3a292861f..5e7caa5fa6cd 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 0faa78126ee5..84a2d4f84ac8 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index b987da6c350b..040e2caa2c16 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 4876ac1ff30e..90a3f9007cd6 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -53,6 +53,7 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableFloat = false;
+export const enableUseMemoCacheHook = true;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler =

From 5d1ce651393524639a3b4b1e861a0413a4d25629 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Tue, 23 Aug 2022 18:19:07 +0100
Subject: [PATCH 1517/1603] Align StrictMode behaviour with production (#25049)

* Skip double invoking effects in Offscreen

* Run yarn replace-fork

* Use executionContext to disable profiler timer

* Restructure recursion into two functions

* Fix ReactStrictMode test

* Use gate pragma in ReacetOffscreenStrictMode test

* Set and reset current debug fiber in dev

* Skip over paths that don't include any insertions

* Extract common logic to check for profiling to a helper function

* Remove hasPassiveEffects flag from StrictMode

* Fix flow issues

* Revert "Skip over paths that don't include any insertions"
---
 .../src/ReactChildFiber.new.js                |  13 +-
 .../src/ReactChildFiber.old.js                |  13 +-
 .../src/ReactFiberCommitWork.new.js           | 211 +++---------------
 .../src/ReactFiberCommitWork.old.js           | 211 +++---------------
 .../react-reconciler/src/ReactFiberFlags.js   |  55 ++---
 .../src/ReactFiberWorkLoop.new.js             | 117 +++++-----
 .../src/ReactFiberWorkLoop.old.js             | 117 +++++-----
 .../ReactOffscreenStrictMode-test.js          |  95 ++++++++
 ...StrictEffectsModeDefaults-test.internal.js |  27 ++-
 .../src/__tests__/ReactStrictMode-test.js     |  74 +++---
 10 files changed, 376 insertions(+), 557 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js

diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index e7eb67328af0..71971c03892c 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -13,7 +13,12 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
+import {
+  Placement,
+  ChildDeletion,
+  Forked,
+  PlacementDEV,
+} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -343,7 +348,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       const oldIndex = current.index;
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.flags |= Placement;
+        newFiber.flags |= Placement | PlacementDEV;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
@@ -351,7 +356,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       }
     } else {
       // This is an insertion.
-      newFiber.flags |= Placement;
+      newFiber.flags |= Placement | PlacementDEV;
       return lastPlacedIndex;
     }
   }
@@ -360,7 +365,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // 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;
+      newFiber.flags |= Placement | PlacementDEV;
     }
     return newFiber;
   }
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 320924d6030e..86f75fbf65ea 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -13,7 +13,12 @@ import type {Fiber} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
-import {Placement, ChildDeletion, Forked} from './ReactFiberFlags';
+import {
+  Placement,
+  ChildDeletion,
+  Forked,
+  PlacementDEV,
+} from './ReactFiberFlags';
 import {
   getIteratorFn,
   REACT_ELEMENT_TYPE,
@@ -343,7 +348,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       const oldIndex = current.index;
       if (oldIndex < lastPlacedIndex) {
         // This is a move.
-        newFiber.flags |= Placement;
+        newFiber.flags |= Placement | PlacementDEV;
         return lastPlacedIndex;
       } else {
         // This item can stay in place.
@@ -351,7 +356,7 @@ function ChildReconciler(shouldTrackSideEffects) {
       }
     } else {
       // This is an insertion.
-      newFiber.flags |= Placement;
+      newFiber.flags |= Placement | PlacementDEV;
       return lastPlacedIndex;
     }
   }
@@ -360,7 +365,7 @@ function ChildReconciler(shouldTrackSideEffects) {
     // 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;
+      newFiber.flags |= Placement | PlacementDEV;
     }
     return newFiber;
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index eb696d06eb4a..5d944a4d88d4 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -40,7 +40,6 @@ import {
   enableSchedulingProfiler,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableStrictEffects,
   deletedTreeCleanUpLevel,
   enableUpdaterTracking,
   enableCache,
@@ -148,6 +147,9 @@ import {
   addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
+  getExecutionContext,
+  CommitContext,
+  NoContext,
 } from './ReactFiberWorkLoop.new';
 import {
   NoFlags as NoHookEffect,
@@ -200,6 +202,15 @@ let nextEffect: Fiber | null = null;
 let inProgressLanes: Lanes | null = null;
 let inProgressRoot: FiberRoot | null = null;
 
+function shouldProfile(current: Fiber): boolean {
+  return (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    (current.mode & ProfileMode) !== NoMode &&
+    (getExecutionContext() & CommitContext) !== NoContext
+  );
+}
+
 export function reportUncaughtErrorInDEV(error: mixed) {
   // Wrapping each small part of the commit phase into a guarded
   // callback is a bit too slow (https://github.com/facebook/react/pull/21666).
@@ -217,11 +228,7 @@ export function reportUncaughtErrorInDEV(error: mixed) {
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
-  if (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    current.mode & ProfileMode
-  ) {
+  if (shouldProfile(current)) {
     try {
       startLayoutEffectTimer();
       instance.componentWillUnmount();
@@ -261,11 +268,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
     if (typeof ref === 'function') {
       let retVal;
       try {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          current.mode & ProfileMode
-        ) {
+        if (shouldProfile(current)) {
           try {
             startLayoutEffectTimer();
             retVal = ref(null);
@@ -641,7 +644,11 @@ export function commitPassiveEffectDurations(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
 ): void {
-  if (enableProfilerTimer && enableProfilerCommitHooks) {
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    getExecutionContext() & CommitContext
+  ) {
     // Only Profilers with work in their subtree will have an Update effect scheduled.
     if ((finishedWork.flags & Update) !== NoFlags) {
       switch (finishedWork.tag) {
@@ -694,11 +701,7 @@ function commitHookLayoutEffects(finishedWork: Fiber, hookFlags: HookFlags) {
   // 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 (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    finishedWork.mode & ProfileMode
-  ) {
+  if (shouldProfile(finishedWork)) {
     try {
       startLayoutEffectTimer();
       commitHookEffectListMount(hookFlags, finishedWork);
@@ -751,11 +754,7 @@ function commitClassLayoutLifecycles(
         }
       }
     }
-    if (
-      enableProfilerTimer &&
-      enableProfilerCommitHooks &&
-      finishedWork.mode & ProfileMode
-    ) {
+    if (shouldProfile(finishedWork)) {
       try {
         startLayoutEffectTimer();
         instance.componentDidMount();
@@ -806,11 +805,7 @@ function commitClassLayoutLifecycles(
         }
       }
     }
-    if (
-      enableProfilerTimer &&
-      enableProfilerCommitHooks &&
-      finishedWork.mode & ProfileMode
-    ) {
+    if (shouldProfile(finishedWork)) {
       try {
         startLayoutEffectTimer();
         instance.componentDidUpdate(
@@ -892,7 +887,7 @@ function commitHostComponentMount(finishedWork: Fiber) {
 }
 
 function commitProfilerUpdate(finishedWork: Fiber, current: Fiber | null) {
-  if (enableProfilerTimer) {
+  if (enableProfilerTimer && getExecutionContext() & CommitContext) {
     try {
       const {onCommit, onRender} = finishedWork.memoizedProps;
       const {effectDuration} = finishedWork.stateNode;
@@ -1341,11 +1336,7 @@ function commitAttachRef(finishedWork: Fiber) {
     }
     if (typeof ref === 'function') {
       let retVal;
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
+      if (shouldProfile(finishedWork)) {
         try {
           startLayoutEffectTimer();
           retVal = ref(instanceToUse);
@@ -1384,11 +1375,7 @@ function commitDetachRef(current: Fiber) {
   const currentRef = current.ref;
   if (currentRef !== null) {
     if (typeof currentRef === 'function') {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        current.mode & ProfileMode
-      ) {
+      if (shouldProfile(current)) {
         try {
           startLayoutEffectTimer();
           currentRef(null);
@@ -1914,11 +1901,7 @@ function commitDeletionEffectsOnFiber(
                     markComponentLayoutEffectUnmountStarted(deletedFiber);
                   }
 
-                  if (
-                    enableProfilerTimer &&
-                    enableProfilerCommitHooks &&
-                    deletedFiber.mode & ProfileMode
-                  ) {
+                  if (shouldProfile(deletedFiber)) {
                     startLayoutEffectTimer();
                     safelyCallDestroy(
                       deletedFiber,
@@ -2237,11 +2220,7 @@ function commitMutationEffectsOnFiber(
         // 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 (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
+        if (shouldProfile(finishedWork)) {
           try {
             startLayoutEffectTimer();
             commitHookEffectListUnmount(
@@ -2627,18 +2606,14 @@ function recursivelyTraverseLayoutEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function disappearLayoutEffects(finishedWork: Fiber) {
+export function disappearLayoutEffects(finishedWork: Fiber) {
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
       // TODO (Offscreen) Check: flags & LayoutStatic
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
+      if (shouldProfile(finishedWork)) {
         try {
           startLayoutEffectTimer();
           commitHookEffectListUnmount(
@@ -2709,7 +2684,7 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
   }
 }
 
-function reappearLayoutEffects(
+export function reappearLayoutEffects(
   finishedRoot: FiberRoot,
   current: Fiber | null,
   finishedWork: Fiber,
@@ -2876,11 +2851,7 @@ function commitHookPassiveMountEffects(
   finishedWork: Fiber,
   hookFlags: HookFlags,
 ) {
-  if (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    finishedWork.mode & ProfileMode
-  ) {
+  if (shouldProfile(finishedWork)) {
     startPassiveEffectTimer();
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
@@ -3304,7 +3275,7 @@ function recursivelyTraverseReconnectPassiveEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function reconnectPassiveEffects(
+export function reconnectPassiveEffects(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
   committedLanes: Lanes,
@@ -3585,11 +3556,7 @@ function commitHookPassiveUnmountEffects(
   nearestMountedAncestor,
   hookFlags: HookFlags,
 ) {
-  if (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    finishedWork.mode & ProfileMode
-  ) {
+  if (shouldProfile(finishedWork)) {
     startPassiveEffectTimer();
     commitHookEffectListUnmount(
       hookFlags,
@@ -3718,7 +3685,7 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber: Fiber): void {
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function disconnectPassiveEffect(finishedWork: Fiber): void {
+export function disconnectPassiveEffect(finishedWork: Fiber): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -3870,112 +3837,4 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
   }
 }
 
-// TODO: Reuse reappearLayoutEffects traversal here?
-function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        try {
-          instance.componentDidMount();
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            fiber,
-            fiber.return,
-          );
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListUnmount(
-            HookPassive | HookHasEffect,
-            fiber,
-            fiber.return,
-          );
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-      }
-    }
-  }
-}
-
-export {
-  commitPlacement,
-  commitAttachRef,
-  commitDetachRef,
-  invokeLayoutEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokePassiveEffectUnmountInDEV,
-};
+export {commitPlacement, commitAttachRef, commitDetachRef};
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 6c17402e0846..8afa97a5ab7b 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -40,7 +40,6 @@ import {
   enableSchedulingProfiler,
   enableSuspenseCallback,
   enableScopeAPI,
-  enableStrictEffects,
   deletedTreeCleanUpLevel,
   enableUpdaterTracking,
   enableCache,
@@ -148,6 +147,9 @@ import {
   addMarkerProgressCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
+  getExecutionContext,
+  CommitContext,
+  NoContext,
 } from './ReactFiberWorkLoop.old';
 import {
   NoFlags as NoHookEffect,
@@ -200,6 +202,15 @@ let nextEffect: Fiber | null = null;
 let inProgressLanes: Lanes | null = null;
 let inProgressRoot: FiberRoot | null = null;
 
+function shouldProfile(current: Fiber): boolean {
+  return (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    (current.mode & ProfileMode) !== NoMode &&
+    (getExecutionContext() & CommitContext) !== NoContext
+  );
+}
+
 export function reportUncaughtErrorInDEV(error: mixed) {
   // Wrapping each small part of the commit phase into a guarded
   // callback is a bit too slow (https://github.com/facebook/react/pull/21666).
@@ -217,11 +228,7 @@ export function reportUncaughtErrorInDEV(error: mixed) {
 const callComponentWillUnmountWithTimer = function(current, instance) {
   instance.props = current.memoizedProps;
   instance.state = current.memoizedState;
-  if (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    current.mode & ProfileMode
-  ) {
+  if (shouldProfile(current)) {
     try {
       startLayoutEffectTimer();
       instance.componentWillUnmount();
@@ -261,11 +268,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
     if (typeof ref === 'function') {
       let retVal;
       try {
-        if (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          current.mode & ProfileMode
-        ) {
+        if (shouldProfile(current)) {
           try {
             startLayoutEffectTimer();
             retVal = ref(null);
@@ -641,7 +644,11 @@ export function commitPassiveEffectDurations(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
 ): void {
-  if (enableProfilerTimer && enableProfilerCommitHooks) {
+  if (
+    enableProfilerTimer &&
+    enableProfilerCommitHooks &&
+    getExecutionContext() & CommitContext
+  ) {
     // Only Profilers with work in their subtree will have an Update effect scheduled.
     if ((finishedWork.flags & Update) !== NoFlags) {
       switch (finishedWork.tag) {
@@ -694,11 +701,7 @@ function commitHookLayoutEffects(finishedWork: Fiber, hookFlags: HookFlags) {
   // 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 (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    finishedWork.mode & ProfileMode
-  ) {
+  if (shouldProfile(finishedWork)) {
     try {
       startLayoutEffectTimer();
       commitHookEffectListMount(hookFlags, finishedWork);
@@ -751,11 +754,7 @@ function commitClassLayoutLifecycles(
         }
       }
     }
-    if (
-      enableProfilerTimer &&
-      enableProfilerCommitHooks &&
-      finishedWork.mode & ProfileMode
-    ) {
+    if (shouldProfile(finishedWork)) {
       try {
         startLayoutEffectTimer();
         instance.componentDidMount();
@@ -806,11 +805,7 @@ function commitClassLayoutLifecycles(
         }
       }
     }
-    if (
-      enableProfilerTimer &&
-      enableProfilerCommitHooks &&
-      finishedWork.mode & ProfileMode
-    ) {
+    if (shouldProfile(finishedWork)) {
       try {
         startLayoutEffectTimer();
         instance.componentDidUpdate(
@@ -892,7 +887,7 @@ function commitHostComponentMount(finishedWork: Fiber) {
 }
 
 function commitProfilerUpdate(finishedWork: Fiber, current: Fiber | null) {
-  if (enableProfilerTimer) {
+  if (enableProfilerTimer && getExecutionContext() & CommitContext) {
     try {
       const {onCommit, onRender} = finishedWork.memoizedProps;
       const {effectDuration} = finishedWork.stateNode;
@@ -1341,11 +1336,7 @@ function commitAttachRef(finishedWork: Fiber) {
     }
     if (typeof ref === 'function') {
       let retVal;
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
+      if (shouldProfile(finishedWork)) {
         try {
           startLayoutEffectTimer();
           retVal = ref(instanceToUse);
@@ -1384,11 +1375,7 @@ function commitDetachRef(current: Fiber) {
   const currentRef = current.ref;
   if (currentRef !== null) {
     if (typeof currentRef === 'function') {
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        current.mode & ProfileMode
-      ) {
+      if (shouldProfile(current)) {
         try {
           startLayoutEffectTimer();
           currentRef(null);
@@ -1914,11 +1901,7 @@ function commitDeletionEffectsOnFiber(
                     markComponentLayoutEffectUnmountStarted(deletedFiber);
                   }
 
-                  if (
-                    enableProfilerTimer &&
-                    enableProfilerCommitHooks &&
-                    deletedFiber.mode & ProfileMode
-                  ) {
+                  if (shouldProfile(deletedFiber)) {
                     startLayoutEffectTimer();
                     safelyCallDestroy(
                       deletedFiber,
@@ -2237,11 +2220,7 @@ function commitMutationEffectsOnFiber(
         // 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 (
-          enableProfilerTimer &&
-          enableProfilerCommitHooks &&
-          finishedWork.mode & ProfileMode
-        ) {
+        if (shouldProfile(finishedWork)) {
           try {
             startLayoutEffectTimer();
             commitHookEffectListUnmount(
@@ -2627,18 +2606,14 @@ function recursivelyTraverseLayoutEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function disappearLayoutEffects(finishedWork: Fiber) {
+export function disappearLayoutEffects(finishedWork: Fiber) {
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
     case MemoComponent:
     case SimpleMemoComponent: {
       // TODO (Offscreen) Check: flags & LayoutStatic
-      if (
-        enableProfilerTimer &&
-        enableProfilerCommitHooks &&
-        finishedWork.mode & ProfileMode
-      ) {
+      if (shouldProfile(finishedWork)) {
         try {
           startLayoutEffectTimer();
           commitHookEffectListUnmount(
@@ -2709,7 +2684,7 @@ function recursivelyTraverseDisappearLayoutEffects(parentFiber: Fiber) {
   }
 }
 
-function reappearLayoutEffects(
+export function reappearLayoutEffects(
   finishedRoot: FiberRoot,
   current: Fiber | null,
   finishedWork: Fiber,
@@ -2876,11 +2851,7 @@ function commitHookPassiveMountEffects(
   finishedWork: Fiber,
   hookFlags: HookFlags,
 ) {
-  if (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    finishedWork.mode & ProfileMode
-  ) {
+  if (shouldProfile(finishedWork)) {
     startPassiveEffectTimer();
     try {
       commitHookEffectListMount(hookFlags, finishedWork);
@@ -3304,7 +3275,7 @@ function recursivelyTraverseReconnectPassiveEffects(
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function reconnectPassiveEffects(
+export function reconnectPassiveEffects(
   finishedRoot: FiberRoot,
   finishedWork: Fiber,
   committedLanes: Lanes,
@@ -3585,11 +3556,7 @@ function commitHookPassiveUnmountEffects(
   nearestMountedAncestor,
   hookFlags: HookFlags,
 ) {
-  if (
-    enableProfilerTimer &&
-    enableProfilerCommitHooks &&
-    finishedWork.mode & ProfileMode
-  ) {
+  if (shouldProfile(finishedWork)) {
     startPassiveEffectTimer();
     commitHookEffectListUnmount(
       hookFlags,
@@ -3718,7 +3685,7 @@ function recursivelyTraverseDisconnectPassiveEffects(parentFiber: Fiber): void {
   setCurrentDebugFiberInDEV(prevDebugFiber);
 }
 
-function disconnectPassiveEffect(finishedWork: Fiber): void {
+export function disconnectPassiveEffect(finishedWork: Fiber): void {
   switch (finishedWork.tag) {
     case FunctionComponent:
     case ForwardRef:
@@ -3870,112 +3837,4 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
   }
 }
 
-// TODO: Reuse reappearLayoutEffects traversal here?
-function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListMount(HookLayout | HookHasEffect, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        try {
-          instance.componentDidMount();
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectMountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListMount(HookPassive | HookHasEffect, fiber);
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokeLayoutEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListUnmount(
-            HookLayout | HookHasEffect,
-            fiber,
-            fiber.return,
-          );
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-        break;
-      }
-      case ClassComponent: {
-        const instance = fiber.stateNode;
-        if (typeof instance.componentWillUnmount === 'function') {
-          safelyCallComponentWillUnmount(fiber, fiber.return, instance);
-        }
-        break;
-      }
-    }
-  }
-}
-
-function invokePassiveEffectUnmountInDEV(fiber: Fiber): void {
-  if (__DEV__ && enableStrictEffects) {
-    // 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: {
-        try {
-          commitHookEffectListUnmount(
-            HookPassive | HookHasEffect,
-            fiber,
-            fiber.return,
-          );
-        } catch (error) {
-          captureCommitPhaseError(fiber, fiber.return, error);
-        }
-      }
-    }
-  }
-}
-
-export {
-  commitPlacement,
-  commitAttachRef,
-  commitDetachRef,
-  invokeLayoutEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokePassiveEffectUnmountInDEV,
-};
+export {commitPlacement, commitAttachRef, commitDetachRef};
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 0f755d865f42..9059d115c129 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,52 +12,53 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b0000000000000000000000000;
-export const PerformedWork = /*                */ 0b0000000000000000000000001;
+export const NoFlags = /*                      */ 0b00000000000000000000000000;
+export const PerformedWork = /*                */ 0b00000000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b0000000000000000000000010;
-export const Update = /*                       */ 0b0000000000000000000000100;
-export const ChildDeletion = /*                */ 0b0000000000000000000001000;
-export const ContentReset = /*                 */ 0b0000000000000000000010000;
-export const Callback = /*                     */ 0b0000000000000000000100000;
-export const DidCapture = /*                   */ 0b0000000000000000001000000;
-export const ForceClientRender = /*            */ 0b0000000000000000010000000;
-export const Ref = /*                          */ 0b0000000000000000100000000;
-export const Snapshot = /*                     */ 0b0000000000000001000000000;
-export const Passive = /*                      */ 0b0000000000000010000000000;
-export const Hydrating = /*                    */ 0b0000000000000100000000000;
-export const Visibility = /*                   */ 0b0000000000001000000000000;
-export const StoreConsistency = /*             */ 0b0000000000010000000000000;
+export const Placement = /*                    */ 0b00000000000000000000000010;
+export const Update = /*                       */ 0b00000000000000000000000100;
+export const ChildDeletion = /*                */ 0b00000000000000000000001000;
+export const ContentReset = /*                 */ 0b00000000000000000000010000;
+export const Callback = /*                     */ 0b00000000000000000000100000;
+export const DidCapture = /*                   */ 0b00000000000000000001000000;
+export const ForceClientRender = /*            */ 0b00000000000000000010000000;
+export const Ref = /*                          */ 0b00000000000000000100000000;
+export const Snapshot = /*                     */ 0b00000000000000001000000000;
+export const Passive = /*                      */ 0b00000000000000010000000000;
+export const Hydrating = /*                    */ 0b00000000000000100000000000;
+export const Visibility = /*                   */ 0b00000000000001000000000000;
+export const StoreConsistency = /*             */ 0b00000000000010000000000000;
 
 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 = /*               */ 0b0000000000011111111111111;
+export const HostEffectMask = /*               */ 0b00000000000011111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b0000000000100000000000000;
-export const ShouldCapture = /*                */ 0b0000000001000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b0000000010000000000000000;
-export const DidPropagateContext = /*          */ 0b0000000100000000000000000;
-export const NeedsPropagation = /*             */ 0b0000001000000000000000000;
-export const Forked = /*                       */ 0b0000010000000000000000000;
+export const Incomplete = /*                   */ 0b00000000000100000000000000;
+export const ShouldCapture = /*                */ 0b00000000001000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b00000000010000000000000000;
+export const DidPropagateContext = /*          */ 0b00000000100000000000000000;
+export const NeedsPropagation = /*             */ 0b00000001000000000000000000;
+export const Forked = /*                       */ 0b00000010000000000000000000;
 
 // 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 RefStatic = /*                    */ 0b0000100000000000000000000;
-export const LayoutStatic = /*                 */ 0b0001000000000000000000000;
-export const PassiveStatic = /*                */ 0b0010000000000000000000000;
+export const RefStatic = /*                    */ 0b00000100000000000000000000;
+export const LayoutStatic = /*                 */ 0b00001000000000000000000000;
+export const PassiveStatic = /*                */ 0b00010000000000000000000000;
 
 // These flags allow us to traverse to fibers that have effects on mount
 // without traversing the entire tree after every commit for
 // double invoking
-export const MountLayoutDev = /*               */ 0b0100000000000000000000000;
-export const MountPassiveDev = /*              */ 0b1000000000000000000000000;
+export const MountLayoutDev = /*               */ 0b00100000000000000000000000;
+export const MountPassiveDev = /*              */ 0b01000000000000000000000000;
+export const PlacementDEV = /*                 */ 0b10000000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a8844d2c1a41..a1416e6c4cf0 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -7,11 +7,12 @@
  * @flow
  */
 
+import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
+
 import type {Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.new';
-import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.new';
 import type {EventPriority} from './ReactEventPriorities.new';
 import type {
@@ -90,7 +91,13 @@ import {
 } from './ReactFiber.new';
 import {isRootDehydrated} from './ReactFiberShellHydration';
 import {didSuspendOrErrorWhileHydratingDEV} from './ReactFiberHydrationContext.new';
-import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  ProfileMode,
+  ConcurrentMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
+} from './ReactTypeOfMode';
 import {
   HostRoot,
   IndeterminateComponent,
@@ -104,7 +111,7 @@ import {
   SimpleMemoComponent,
   Profiler,
 } from './ReactWorkTags';
-import {LegacyRoot} from './ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
   Incomplete,
@@ -115,8 +122,7 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
-  MountPassiveDev,
-  MountLayoutDev,
+  PlacementDEV,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -176,10 +182,10 @@ import {
   commitPassiveEffectDurations,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
-  invokeLayoutEffectMountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectUnmountInDEV,
+  disappearLayoutEffects,
+  reconnectPassiveEffects,
+  reappearLayoutEffects,
+  disconnectPassiveEffect,
   reportUncaughtErrorInDEV,
 } from './ReactFiberCommitWork.new';
 import {enqueueUpdate} from './ReactFiberClassUpdateQueue.new';
@@ -267,7 +273,7 @@ type ExecutionContext = number;
 export const NoContext = /*             */ 0b000;
 const BatchedContext = /*               */ 0b001;
 const RenderContext = /*                */ 0b010;
-const CommitContext = /*                */ 0b100;
+export const CommitContext = /*         */ 0b100;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 const RootInProgress = 0;
@@ -2422,7 +2428,7 @@ function commitRootImpl(
 
   if (__DEV__ && enableStrictEffects) {
     if (!rootDidHavePassiveEffects) {
-      commitDoubleInvokeEffectsInDEV(root.current, false);
+      commitDoubleInvokeEffectsInDEV(root);
     }
   }
 
@@ -2639,7 +2645,7 @@ function flushPassiveEffectsImpl() {
   }
 
   if (__DEV__ && enableStrictEffects) {
-    commitDoubleInvokeEffectsInDEV(root.current, true);
+    commitDoubleInvokeEffectsInDEV(root);
   }
 
   executionContext = prevExecutionContext;
@@ -2993,64 +2999,57 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
   }
 }
 
-function commitDoubleInvokeEffectsInDEV(
-  fiber: Fiber,
-  hasPassiveEffects: boolean,
+function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+  root: FiberRoot,
+  parentFiber: Fiber,
+  isInStrictMode: boolean,
 ) {
-  if (__DEV__ && enableStrictEffects) {
-    // 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.
+  let child = parentFiber.child;
+  while (child !== null) {
+    doubleInvokeEffectsInDEV(root, child, isInStrictMode);
+    child = child.sibling;
+  }
+}
 
+function doubleInvokeEffectsInDEV(
+  root: FiberRoot,
+  fiber: Fiber,
+  parentIsInStrictMode: boolean,
+) {
+  const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
+  const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+  if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(
-        fiber,
-        MountPassiveDev,
-        invokePassiveEffectUnmountInDEV,
-      );
-    }
-
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
+    if (isInStrictMode) {
+      disappearLayoutEffects(fiber);
+      disconnectPassiveEffect(fiber);
+      reappearLayoutEffects(root, fiber.alternate, fiber, false);
+      reconnectPassiveEffects(root, fiber, NoLanes, null, false);
     }
     resetCurrentDebugFiberInDEV();
+  } else {
+    recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode);
   }
 }
 
-function invokeEffectsInDev(
-  firstChild: Fiber,
-  fiberFlags: Flags,
-  invokeEffectFn: (fiber: Fiber) => void,
-): void {
+function commitDoubleInvokeEffectsInDEV(root: FiberRoot) {
   if (__DEV__ && enableStrictEffects) {
-    // We don't need to re-check StrictEffectsMode here.
-    // This function is only called if that check has already passed.
+    let doubleInvokeEffects = true;
 
-    let current = 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;
-        }
-      }
+    if (root.tag === LegacyRoot && !(root.current.mode & StrictLegacyMode)) {
+      doubleInvokeEffects = false;
+    }
+    if (
+      root.tag === ConcurrentRoot &&
+      !(root.current.mode & (StrictLegacyMode | StrictEffectsMode))
+    ) {
+      doubleInvokeEffects = false;
     }
+    recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+      root,
+      root.current,
+      doubleInvokeEffects,
+    );
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 14e378794bfb..8343bad2ab48 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -7,11 +7,12 @@
  * @flow
  */
 
+import {REACT_STRICT_MODE_TYPE} from 'shared/ReactSymbols';
+
 import type {Wakeable} from 'shared/ReactTypes';
 import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {SuspenseState} from './ReactFiberSuspenseComponent.old';
-import type {Flags} from './ReactFiberFlags';
 import type {FunctionComponentUpdateQueue} from './ReactFiberHooks.old';
 import type {EventPriority} from './ReactEventPriorities.old';
 import type {
@@ -90,7 +91,13 @@ import {
 } from './ReactFiber.old';
 import {isRootDehydrated} from './ReactFiberShellHydration';
 import {didSuspendOrErrorWhileHydratingDEV} from './ReactFiberHydrationContext.old';
-import {NoMode, ProfileMode, ConcurrentMode} from './ReactTypeOfMode';
+import {
+  NoMode,
+  ProfileMode,
+  ConcurrentMode,
+  StrictLegacyMode,
+  StrictEffectsMode,
+} from './ReactTypeOfMode';
 import {
   HostRoot,
   IndeterminateComponent,
@@ -104,7 +111,7 @@ import {
   SimpleMemoComponent,
   Profiler,
 } from './ReactWorkTags';
-import {LegacyRoot} from './ReactRootTags';
+import {ConcurrentRoot, LegacyRoot} from './ReactRootTags';
 import {
   NoFlags,
   Incomplete,
@@ -115,8 +122,7 @@ import {
   MutationMask,
   LayoutMask,
   PassiveMask,
-  MountPassiveDev,
-  MountLayoutDev,
+  PlacementDEV,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -176,10 +182,10 @@ import {
   commitPassiveEffectDurations,
   commitPassiveMountEffects,
   commitPassiveUnmountEffects,
-  invokeLayoutEffectMountInDEV,
-  invokePassiveEffectMountInDEV,
-  invokeLayoutEffectUnmountInDEV,
-  invokePassiveEffectUnmountInDEV,
+  disappearLayoutEffects,
+  reconnectPassiveEffects,
+  reappearLayoutEffects,
+  disconnectPassiveEffect,
   reportUncaughtErrorInDEV,
 } from './ReactFiberCommitWork.old';
 import {enqueueUpdate} from './ReactFiberClassUpdateQueue.old';
@@ -267,7 +273,7 @@ type ExecutionContext = number;
 export const NoContext = /*             */ 0b000;
 const BatchedContext = /*               */ 0b001;
 const RenderContext = /*                */ 0b010;
-const CommitContext = /*                */ 0b100;
+export const CommitContext = /*         */ 0b100;
 
 type RootExitStatus = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 const RootInProgress = 0;
@@ -2422,7 +2428,7 @@ function commitRootImpl(
 
   if (__DEV__ && enableStrictEffects) {
     if (!rootDidHavePassiveEffects) {
-      commitDoubleInvokeEffectsInDEV(root.current, false);
+      commitDoubleInvokeEffectsInDEV(root);
     }
   }
 
@@ -2639,7 +2645,7 @@ function flushPassiveEffectsImpl() {
   }
 
   if (__DEV__ && enableStrictEffects) {
-    commitDoubleInvokeEffectsInDEV(root.current, true);
+    commitDoubleInvokeEffectsInDEV(root);
   }
 
   executionContext = prevExecutionContext;
@@ -2993,64 +2999,57 @@ function flushRenderPhaseStrictModeWarningsInDEV() {
   }
 }
 
-function commitDoubleInvokeEffectsInDEV(
-  fiber: Fiber,
-  hasPassiveEffects: boolean,
+function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+  root: FiberRoot,
+  parentFiber: Fiber,
+  isInStrictMode: boolean,
 ) {
-  if (__DEV__ && enableStrictEffects) {
-    // 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.
+  let child = parentFiber.child;
+  while (child !== null) {
+    doubleInvokeEffectsInDEV(root, child, isInStrictMode);
+    child = child.sibling;
+  }
+}
 
+function doubleInvokeEffectsInDEV(
+  root: FiberRoot,
+  fiber: Fiber,
+  parentIsInStrictMode: boolean,
+) {
+  const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
+  const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+  if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectUnmountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(
-        fiber,
-        MountPassiveDev,
-        invokePassiveEffectUnmountInDEV,
-      );
-    }
-
-    invokeEffectsInDev(fiber, MountLayoutDev, invokeLayoutEffectMountInDEV);
-    if (hasPassiveEffects) {
-      invokeEffectsInDev(fiber, MountPassiveDev, invokePassiveEffectMountInDEV);
+    if (isInStrictMode) {
+      disappearLayoutEffects(fiber);
+      disconnectPassiveEffect(fiber);
+      reappearLayoutEffects(root, fiber.alternate, fiber, false);
+      reconnectPassiveEffects(root, fiber, NoLanes, null, false);
     }
     resetCurrentDebugFiberInDEV();
+  } else {
+    recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode);
   }
 }
 
-function invokeEffectsInDev(
-  firstChild: Fiber,
-  fiberFlags: Flags,
-  invokeEffectFn: (fiber: Fiber) => void,
-): void {
+function commitDoubleInvokeEffectsInDEV(root: FiberRoot) {
   if (__DEV__ && enableStrictEffects) {
-    // We don't need to re-check StrictEffectsMode here.
-    // This function is only called if that check has already passed.
+    let doubleInvokeEffects = true;
 
-    let current = 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;
-        }
-      }
+    if (root.tag === LegacyRoot && !(root.current.mode & StrictLegacyMode)) {
+      doubleInvokeEffects = false;
+    }
+    if (
+      root.tag === ConcurrentRoot &&
+      !(root.current.mode & (StrictLegacyMode | StrictEffectsMode))
+    ) {
+      doubleInvokeEffects = false;
     }
+    recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+      root,
+      root.current,
+      doubleInvokeEffects,
+    );
   }
 }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
new file mode 100644
index 000000000000..f750a9b7ef0d
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
@@ -0,0 +1,95 @@
+let React;
+let Offscreen;
+let ReactNoop;
+let act;
+let log;
+
+describe('ReactOffscreenStrictMode', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    log = [];
+
+    React = require('react');
+    Offscreen = React.unstable_Offscreen;
+    ReactNoop = require('react-noop-renderer');
+    act = require('jest-react').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__ && enableStrictEffects && enableOffscreen
+  it('should trigger strict effects when offscreen is visible', () => {
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="visible">
+            <Component label="A" />
+          </Offscreen>
+        </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__ && enableStrictEffects && enableOffscreen
+  it('should not trigger strict effects when offscreen is hidden', () => {
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="hidden">
+            <Component label="A" />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['A: render', 'A: render']);
+
+    log = [];
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="visible">
+            <Component label="A" />
+          </Offscreen>
+        </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',
+    ]);
+  });
+});
diff --git a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
index f2041b4ba1e3..54150ad2d4be 100644
--- a/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/StrictEffectsModeDefaults-test.internal.js
@@ -153,10 +153,8 @@ describe('StrictEffectsMode defaults', () => {
           </>,
         );
 
-        expect(Scheduler).toFlushAndYieldThrough([
-          'useLayoutEffect mount "one"',
-        ]);
         expect(Scheduler).toFlushAndYield([
+          'useLayoutEffect mount "one"',
           'useEffect mount "one"',
           'useLayoutEffect unmount "one"',
           'useEffect unmount "one"',
@@ -381,6 +379,29 @@ describe('StrictEffectsMode defaults', () => {
       expect(Scheduler).toHaveYielded([]);
     });
 
+    it('disconnects refs during double invoking', () => {
+      const onRefMock = jest.fn();
+      function App({text}) {
+        return (
+          <span
+            ref={ref => {
+              onRefMock(ref);
+            }}>
+            text
+          </span>
+        );
+      }
+
+      act(() => {
+        ReactNoop.render(<App text={'mount'} />);
+      });
+
+      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', () => {
       class App extends React.PureComponent {
         test() {}
diff --git a/packages/react/src/__tests__/ReactStrictMode-test.js b/packages/react/src/__tests__/ReactStrictMode-test.js
index 81416f260ae9..8aebe33426a0 100644
--- a/packages/react/src/__tests__/ReactStrictMode-test.js
+++ b/packages/react/src/__tests__/ReactStrictMode-test.js
@@ -67,6 +67,7 @@ describe('ReactStrictMode', () => {
     );
   });
 
+  // @gate __DEV__ && !enableStrictEffects
   it('should invoke precommit lifecycle methods twice', () => {
     let log = [];
     let shouldComponentUpdate = false;
@@ -107,24 +108,15 @@ describe('ReactStrictMode', () => {
       container,
     );
 
-    if (__DEV__) {
-      expect(log).toEqual([
-        'constructor',
-        'constructor',
-        'getDerivedStateFromProps',
-        'getDerivedStateFromProps',
-        'render',
-        'render',
-        'componentDidMount',
-      ]);
-    } else {
-      expect(log).toEqual([
-        'constructor',
-        'getDerivedStateFromProps',
-        'render',
-        'componentDidMount',
-      ]);
-    }
+    expect(log).toEqual([
+      'constructor',
+      'constructor',
+      'getDerivedStateFromProps',
+      'getDerivedStateFromProps',
+      'render',
+      'render',
+      'componentDidMount',
+    ]);
 
     log = [];
     shouldComponentUpdate = true;
@@ -135,24 +127,15 @@ describe('ReactStrictMode', () => {
       </React.StrictMode>,
       container,
     );
-    if (__DEV__) {
-      expect(log).toEqual([
-        'getDerivedStateFromProps',
-        'getDerivedStateFromProps',
-        'shouldComponentUpdate',
-        'shouldComponentUpdate',
-        'render',
-        'render',
-        'componentDidUpdate',
-      ]);
-    } else {
-      expect(log).toEqual([
-        'getDerivedStateFromProps',
-        'shouldComponentUpdate',
-        'render',
-        'componentDidUpdate',
-      ]);
-    }
+    expect(log).toEqual([
+      'getDerivedStateFromProps',
+      'getDerivedStateFromProps',
+      'shouldComponentUpdate',
+      'shouldComponentUpdate',
+      'render',
+      'render',
+      'componentDidUpdate',
+    ]);
 
     log = [];
     shouldComponentUpdate = false;
@@ -164,19 +147,12 @@ describe('ReactStrictMode', () => {
       container,
     );
 
-    if (__DEV__) {
-      expect(log).toEqual([
-        'getDerivedStateFromProps',
-        'getDerivedStateFromProps',
-        'shouldComponentUpdate',
-        'shouldComponentUpdate',
-      ]);
-    } else {
-      expect(log).toEqual([
-        'getDerivedStateFromProps',
-        'shouldComponentUpdate',
-      ]);
-    }
+    expect(log).toEqual([
+      'getDerivedStateFromProps',
+      'getDerivedStateFromProps',
+      'shouldComponentUpdate',
+      'shouldComponentUpdate',
+    ]);
   });
 
   it('should invoke setState callbacks twice', () => {

From 3d443cad74bdd8f3d617c39756afe02d51f8d636 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Wed, 24 Aug 2022 03:18:05 +0200
Subject: [PATCH 1518/1603] Update fixtures/flight to webpack 5 (#25115)

* Add new flight fixture

* Move flight dir files

* Enable writeToDisk and distDir

* Move flight2 -> flight

* flight2 -> flight

* Remove unused files

* Remove unused files

* Run prettier

* Ignore eslint cache

Co-authored-by: Sebastian Markbage <sebastian@calyptus.eu>
---
 fixtures/flight/.env                          |     1 -
 fixtures/flight/config/env.js                 |     2 -
 fixtures/flight/config/jest/babelTransform.js |    29 +
 fixtures/flight/config/paths.js               |     6 +-
 fixtures/flight/config/pnpTs.js               |    35 -
 fixtures/flight/config/webpack.config.js      |   421 +-
 .../persistentCache/createEnvironmentHash.js  |     9 +
 .../flight/config/webpackDevServer.config.js  |   140 +-
 fixtures/flight/package.json                  |   143 +-
 fixtures/flight/scripts/build.js              |    18 +-
 fixtures/flight/scripts/start.js              |    25 +-
 fixtures/flight/yarn.lock                     | 12889 +++++++---------
 .../src/ReactFlightWebpackNodeLoader.js       |     2 +-
 13 files changed, 5774 insertions(+), 7946 deletions(-)
 delete mode 100644 fixtures/flight/.env
 create mode 100644 fixtures/flight/config/jest/babelTransform.js
 delete mode 100644 fixtures/flight/config/pnpTs.js
 create mode 100644 fixtures/flight/config/webpack/persistentCache/createEnvironmentHash.js

diff --git a/fixtures/flight/.env b/fixtures/flight/.env
deleted file mode 100644
index 7d910f1484c5..000000000000
--- a/fixtures/flight/.env
+++ /dev/null
@@ -1 +0,0 @@
-SKIP_PREFLIGHT_CHECK=true
\ No newline at end of file
diff --git a/fixtures/flight/config/env.js b/fixtures/flight/config/env.js
index 56ac7fbd0e75..ce1d7b78f382 100644
--- a/fixtures/flight/config/env.js
+++ b/fixtures/flight/config/env.js
@@ -86,8 +86,6 @@ function getClientEnvironment(publicUrl) {
         WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
         WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
         // Whether or not react-refresh is enabled.
-        // react-refresh is not 100% stable at this time,
-        // which is why it's disabled by default.
         // It is defined here so it is available in the webpackHotDevClient.
         FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
       }
diff --git a/fixtures/flight/config/jest/babelTransform.js b/fixtures/flight/config/jest/babelTransform.js
new file mode 100644
index 000000000000..5b391e405562
--- /dev/null
+++ b/fixtures/flight/config/jest/babelTransform.js
@@ -0,0 +1,29 @@
+'use strict';
+
+const babelJest = require('babel-jest').default;
+
+const hasJsxRuntime = (() => {
+  if (process.env.DISABLE_NEW_JSX_TRANSFORM === 'true') {
+    return false;
+  }
+
+  try {
+    require.resolve('react/jsx-runtime');
+    return true;
+  } catch (e) {
+    return false;
+  }
+})();
+
+module.exports = babelJest.createTransformer({
+  presets: [
+    [
+      require.resolve('babel-preset-react-app'),
+      {
+        runtime: hasJsxRuntime ? 'automatic' : 'classic',
+      },
+    ],
+  ],
+  babelrc: false,
+  configFile: false,
+});
diff --git a/fixtures/flight/config/paths.js b/fixtures/flight/config/paths.js
index 20c5e1201803..01f2dd1fd295 100644
--- a/fixtures/flight/config/paths.js
+++ b/fixtures/flight/config/paths.js
@@ -21,6 +21,8 @@ const publicUrlOrPath = getPublicUrlOrPath(
   process.env.PUBLIC_URL
 );
 
+const buildPath = process.env.BUILD_PATH || 'build';
+
 const moduleFileExtensions = [
   'web.mjs',
   'mjs',
@@ -52,7 +54,7 @@ const resolveModule = (resolveFn, filePath) => {
 module.exports = {
   dotenv: resolveApp('.env'),
   appPath: resolveApp('.'),
-  appBuild: resolveApp('build'),
+  appBuild: resolveApp(buildPath),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveModule(resolveApp, 'src/index'),
@@ -64,6 +66,8 @@ module.exports = {
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
+  appWebpackCache: resolveApp('node_modules/.cache'),
+  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
 };
diff --git a/fixtures/flight/config/pnpTs.js b/fixtures/flight/config/pnpTs.js
deleted file mode 100644
index 71b9c6c3b07a..000000000000
--- a/fixtures/flight/config/pnpTs.js
+++ /dev/null
@@ -1,35 +0,0 @@
-'use strict';
-
-const {resolveModuleName} = require('ts-pnp');
-
-exports.resolveModuleName = (
-  typescript,
-  moduleName,
-  containingFile,
-  compilerOptions,
-  resolutionHost
-) => {
-  return resolveModuleName(
-    moduleName,
-    containingFile,
-    compilerOptions,
-    resolutionHost,
-    typescript.resolveModuleName
-  );
-};
-
-exports.resolveTypeReferenceDirective = (
-  typescript,
-  moduleName,
-  containingFile,
-  compilerOptions,
-  resolutionHost
-) => {
-  return resolveModuleName(
-    moduleName,
-    containingFile,
-    compilerOptions,
-    resolutionHost,
-    typescript.resolveTypeReferenceDirective
-  );
-};
diff --git a/fixtures/flight/config/webpack.config.js b/fixtures/flight/config/webpack.config.js
index abcff50d4d18..05590ff0353e 100644
--- a/fixtures/flight/config/webpack.config.js
+++ b/fixtures/flight/config/webpack.config.js
@@ -8,18 +8,15 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ESLintPlugin = require('eslint-webpack-plugin');
@@ -27,28 +24,37 @@ const paths = require('./paths');
 const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
-const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+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 postcssNormalize = require('postcss-normalize');
-
-const appPackageJson = require(paths.appPackageJson);
+const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
-const webpackDevClientEntry = require.resolve(
-  'react-dev-utils/webpackHotDevClient'
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
+const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
+  '@pmmmwh/react-refresh-webpack-plugin'
 );
-const reactRefreshOverlayEntry = require.resolve(
-  'react-dev-utils/refreshOverlayInterop'
+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 emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === 'true';
+const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === 'true';
+
 const imageInlineSizeLimit = parseInt(
   process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
 );
@@ -56,6 +62,11 @@ const imageInlineSizeLimit = parseInt(
 // 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;
 
@@ -119,22 +130,42 @@ module.exports = function(webpackEnv) {
         // package.json
         loader: require.resolve('postcss-loader'),
         options: {
-          // Necessary for external CSS imports to work
-          // https://github.com/facebook/create-react-app/issues/2677
-          ident: 'postcss',
-          plugins: () => [
-            require('postcss-flexbugs-fixes'),
-            require('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.
-            postcssNormalize(),
-          ],
+          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,
         },
       },
@@ -160,6 +191,9 @@ module.exports = function(webpackEnv) {
   };
 
   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,
@@ -170,34 +204,10 @@ module.exports = function(webpackEnv) {
       : isEnvDevelopment && 'cheap-module-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:
-      isEnvDevelopment && !shouldUseReactRefresh
-        ? [
-            // Include an alternative client for WebpackDevServer. A client's job is to
-            // connect to WebpackDevServer by a socket and get notified about changes.
-            // When you save a file, the client will either apply hot updates (in case
-            // of CSS changes), or refresh the page (in case of JS changes). When you
-            // make a syntax error, this client will display a syntax error overlay.
-            // Note: instead of the default WebpackDevServer client, we use a custom one
-            // to bring better experience for Create React App users. You can replace
-            // the line below with these two lines if you prefer the stock client:
-            //
-            // require.resolve('webpack-dev-server/client') + '?/',
-            // require.resolve('webpack/hot/dev-server'),
-            //
-            // When using the experimental react-refresh integration,
-            // the webpack plugin takes care of injecting the dev client for us.
-            webpackDevClientEntry,
-            // Finally, this is your app's code:
-            paths.appIndexJs,
-            // We include the app code last so that if there is a runtime error during
-            // initialization, it doesn't blow up the WebpackDevServer client, and
-            // changing JS code would still trigger a refresh.
-          ]
-        : paths.appIndexJs,
+    entry: paths.appIndexJs,
     output: {
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
+      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.
@@ -205,12 +215,11 @@ module.exports = function(webpackEnv) {
       filename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].js'
         : isEnvDevelopment && 'static/js/bundle.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
       // 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.
@@ -223,12 +232,22 @@ module.exports = function(webpackEnv) {
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple webpack runtimes (from different apps)
-      // are used on the same page.
-      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
-      // this defaults to 'window', but by setting it to 'this' then
-      // module chunks which are built will work in web workers as well.
-      globalObject: 'this',
+    },
+    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,
@@ -272,41 +291,10 @@ module.exports = function(webpackEnv) {
               ascii_only: true,
             },
           },
-          sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
-          },
-          cssProcessorPluginOptions: {
-            preset: ['default', {minifyFontValues: {removeQuotes: false}}],
-          },
-        }),
+        new CssMinimizerPlugin(),
       ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        name: false,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: {
-        name: entrypoint => `runtime-${entrypoint.name}`,
-      },
     },
     resolve: {
       // This allows you to set a fallback for where webpack should look for modules.
@@ -337,9 +325,6 @@ module.exports = function(webpackEnv) {
         ...(modules.webpackAliases || {}),
       },
       plugins: [
-        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-        // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
         // 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,
@@ -347,22 +332,24 @@ module.exports = function(webpackEnv) {
         // Make sure your source files are compiled, as they will not be processed in any way.
         new ModuleScopePlugin(paths.appSrc, [
           paths.appPackageJson,
-          reactRefreshOverlayEntry,
+          reactRefreshRuntimeEntry,
+          reactRefreshWebpackPluginRuntimeEntry,
+          babelRuntimeEntry,
+          babelRuntimeEntryHelpers,
+          babelRuntimeRegenerator,
         ]),
       ],
     },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
     module: {
       strictExportPresence: true,
       rules: [
-        // Disable require.ensure as it's not a standard language feature.
-        {parser: {requireEnsure: false}},
+        // 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
@@ -372,11 +359,12 @@ module.exports = function(webpackEnv) {
             // https://github.com/jshttp/mime-db
             {
               test: [/\.avif$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                mimetype: 'image/avif',
-                name: 'static/media/[name].[hash:8].[ext]',
+              type: 'asset',
+              mimetype: 'image/avif',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
               },
             },
             // "url" loader works like "file" loader except that it embeds assets
@@ -384,10 +372,37 @@ module.exports = function(webpackEnv) {
             // A missing `test` is equivalent to a match.
             {
               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                name: 'static/media/[name].[hash:8].[ext]',
+              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.
@@ -410,17 +425,6 @@ module.exports = function(webpackEnv) {
                 ],
 
                 plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent:
-                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
                   isEnvDevelopment &&
                     shouldUseReactRefresh &&
                     require.resolve('react-refresh/babel'),
@@ -476,6 +480,9 @@ module.exports = function(webpackEnv) {
                 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.
@@ -493,6 +500,7 @@ module.exports = function(webpackEnv) {
                   ? shouldUseSourceMap
                   : isEnvDevelopment,
                 modules: {
+                  mode: 'local',
                   getLocalIdent: getCSSModuleLocalIdent,
                 },
               }),
@@ -509,6 +517,9 @@ module.exports = function(webpackEnv) {
                   sourceMap: isEnvProduction
                     ? shouldUseSourceMap
                     : isEnvDevelopment,
+                  modules: {
+                    mode: 'icss',
+                  },
                 },
                 'sass-loader'
               ),
@@ -529,6 +540,7 @@ module.exports = function(webpackEnv) {
                     ? shouldUseSourceMap
                     : isEnvDevelopment,
                   modules: {
+                    mode: 'local',
                     getLocalIdent: getCSSModuleLocalIdent,
                   },
                 },
@@ -541,21 +553,18 @@ module.exports = function(webpackEnv) {
             // This loader doesn't use a "test" so it will catch all modules
             // that fall through the other loaders.
             {
-              loader: require.resolve('file-loader'),
               // 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$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
+              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: [
       // Generates an `index.html` file with the <script> injected.
@@ -605,33 +614,17 @@ module.exports = function(webpackEnv) {
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (CSS and Fast Refresh):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Experimental hot reloading for React .
       // https://github.com/facebook/react/tree/main/packages/react-refresh
       isEnvDevelopment &&
         shouldUseReactRefresh &&
         new ReactRefreshWebpackPlugin({
-          overlay: {
-            entry: webpackDevClientEntry,
-            // The expected exports are slightly different from what the overlay exports,
-            // so an interop is included here to enable feedback on module-level errors.
-            module: reactRefreshOverlayEntry,
-            // Since we ship a custom dev client and overlay integration,
-            // the bundled socket handling logic can be eliminated.
-            sockIntegration: false,
-          },
+          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(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output
@@ -645,7 +638,7 @@ module.exports = function(webpackEnv) {
       //   `index.html`
       // - "entrypoints" key: Array of files which are included in `index.html`,
       //   can be used to reconstruct the HTML if necessary
-      new ManifestPlugin({
+      new WebpackManifestPlugin({
         fileName: 'asset-manifest.json',
         publicPath: paths.publicUrlOrPath,
         generate: (seed, files, entrypoints) => {
@@ -668,7 +661,10 @@ module.exports = function(webpackEnv) {
       // 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(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the webpack build.
       isEnvProduction &&
@@ -685,69 +681,80 @@ module.exports = function(webpackEnv) {
       // TypeScript type checking
       useTypeScript &&
         new ForkTsCheckerWebpackPlugin({
-          typescript: resolve.sync('typescript', {
-            basedir: paths.appNodeModules,
-          }),
           async: isEnvDevelopment,
-          checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          resolveTypeReferenceDirectiveModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          tsconfig: paths.appTsConfig,
-          reportFiles: [
+          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.
-            '../**/src/**/*.{ts,tsx}',
-            '**/src/**/*.{ts,tsx}',
-            '!**/src/**/__tests__/**',
-            '!**/src/**/?(*.)(spec|test).*',
-            '!**/src/setupProxy.*',
-            '!**/src/setupTests.*',
-          ],
-          silent: true,
-          // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
-        }),
-      new ESLintPlugin({
-        // Plugin options
-        extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
-        formatter: require.resolve('react-dev-utils/eslintFormatter'),
-        eslintPath: require.resolve('eslint'),
-        context: paths.appSrc,
-        cache: true,
-        // ESLint class options
-        cwd: paths.appPath,
-        resolvePluginsRelativeTo: __dirname,
-        baseConfig: {
-          extends: [require.resolve('eslint-config-react-app/base')],
-          rules: {
-            ...(!hasJsxRuntime && {
-              'react/react-in-jsx-scope': 'error',
-            }),
+            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',
+          },
+        }),
+      // !disableESLintPlugin &&
+      //   new ESLintPlugin({
+      //     // Plugin options
+      //     extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
+      //     formatter: require.resolve('react-dev-utils/eslintFormatter'),
+      //     eslintPath: require.resolve('eslint'),
+      //     failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
+      //     context: paths.appSrc,
+      //     cache: true,
+      //     cacheLocation: path.resolve(
+      //       paths.appNodeModules,
+      //       '.cache/.eslintcache'
+      //     ),
+      //     // ESLint class options
+      //     cwd: paths.appPath,
+      //     resolvePluginsRelativeTo: __dirname,
+      //     baseConfig: {
+      //       extends: [require.resolve('eslint-config-react-app/base')],
+      //       rules: {
+      //         ...(!hasJsxRuntime && {
+      //           'react/react-in-jsx-scope': 'error',
+      //         }),
+      //       },
+      //     },
+      //   }),
       // Fork Start
       new ReactFlightWebpackPlugin({isServer: false}),
       // Fork End
     ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,
diff --git a/fixtures/flight/config/webpack/persistentCache/createEnvironmentHash.js b/fixtures/flight/config/webpack/persistentCache/createEnvironmentHash.js
new file mode 100644
index 000000000000..9f4c3f3551b3
--- /dev/null
+++ b/fixtures/flight/config/webpack/persistentCache/createEnvironmentHash.js
@@ -0,0 +1,9 @@
+'use strict';
+const {createHash} = require('crypto');
+
+module.exports = env => {
+  const hash = createHash('md5');
+  hash.update(JSON.stringify(env));
+
+  return hash.digest('hex');
+};
diff --git a/fixtures/flight/config/webpackDevServer.config.js b/fixtures/flight/config/webpackDevServer.config.js
index 8870c04d7e21..b934754fd9db 100644
--- a/fixtures/flight/config/webpackDevServer.config.js
+++ b/fixtures/flight/config/webpackDevServer.config.js
@@ -1,7 +1,6 @@
 'use strict';
 
 const fs = require('fs');
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
 const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
 const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
 const ignoredFiles = require('react-dev-utils/ignoredFiles');
@@ -11,10 +10,12 @@ const getHttpsConfig = require('./getHttpsConfig');
 
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function(proxy, allowedHost) {
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -32,102 +33,101 @@ module.exports = function(proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // Note: ["localhost", ".localhost"] will support subdomains - but we might
+    // want to allow setting the allowedHosts manually for more complex setups
+    allowedHosts: disableFirewall ? 'all' : [allowedHost],
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': '*',
+      'Access-Control-Allow-Headers': '*',
+    },
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    contentBasePublicPath: paths.publicUrlOrPath,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // Use 'ws' instead of 'sockjs-node' on server since we're using native
-    // websockets in `webpackHotDevClient`.
-    transportMode: 'ws',
-    // Prevent a WS client from getting injected as we're already including
-    // `webpackHotDevClient`.
-    injectClient: false,
-    // Enable custom sockjs pathname for websocket connection to hot reloading server.
-    // Enable custom sockjs hostname, pathname and port for websocket connection
-    // to hot reloading server.
-    sockHost,
-    sockPath,
-    sockPort,
-    // It is important to tell WebpackDevServer to use the same "publicPath" path as
-    // we specified in the webpack config. When homepage is '.', default to serving
-    // from the root.
-    // remove last slash so user can land on `/test` instead of `/test/`
-    publicPath: paths.publicUrlOrPath.slice(0, -1),
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      publicPath: [paths.publicUrlOrPath],
+      // By default files from `contentBase` will not trigger a page reload.
+      watch: {
+        // Reportedly, this avoids CPU overload on some systems.
+        // https://github.com/facebook/create-react-app/issues/293
+        // src/node_modules is not ignored to support absolute imports
+        // https://github.com/facebook/create-react-app/issues/1065
+        ignored: ignoredFiles(paths.appSrc),
+      },
+    },
+    client: {
+      webSocketURL: {
+        // Enable custom sockjs pathname for websocket connection to hot reloading server.
+        // Enable custom sockjs hostname, pathname and port for websocket connection
+        // to hot reloading server.
+        hostname: sockHost,
+        pathname: sockPath,
+        port: sockPort,
+      },
+      overlay: {
+        errors: true,
+        warnings: false,
+      },
     },
-    writeToDisk: filePath => {
-      return /react-client-manifest\.json$/.test(filePath);
+    devMiddleware: {
+      // Fork Start
+      writeToDisk: filePath => {
+        return /react-client-manifest\.json$/.test(filePath);
+      },
+      // Fork End
+
+      // It is important to tell WebpackDevServer to use the same "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
     },
+
     https: getHttpsConfig(),
     host,
-    overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
       index: paths.publicUrlOrPath,
     },
-    public: allowedHost,
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    before(app, server) {
-      // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
+    onBeforeSetupMiddleware(devServer) {
+      // Keep `evalSourceMapMiddleware`
       // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
-      // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
+      devServer.app.use(evalSourceMapMiddleware(devServer));
 
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
-        require(paths.proxySetup)(app);
+        require(paths.proxySetup)(devServer.app);
       }
     },
-    after(app) {
+    onAfterSetupMiddleware(devServer) {
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
-      app.use(redirectServedPath(paths.publicUrlOrPath));
+      devServer.app.use(redirectServedPath(paths.publicUrlOrPath));
 
       // This service worker file is effectively a 'no-op' that will reset any
       // previous service worker registered for the same host:port combination.
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
+      devServer.app.use(noopServiceWorkerMiddleware(paths.publicUrlOrPath));
     },
   };
 };
diff --git a/fixtures/flight/package.json b/fixtures/flight/package.json
index 27cf494b00d2..680c1a005522 100644
--- a/fixtures/flight/package.json
+++ b/fixtures/flight/package.json
@@ -4,76 +4,69 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "7.12.3",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/register": "^7.7.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
-    "@svgr/webpack": "5.4.0",
-    "@typescript-eslint/eslint-plugin": "^4.5.0",
-    "@typescript-eslint/parser": "^4.5.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.6.0",
-    "babel-loader": "8.1.0",
-    "babel-plugin-named-asset-import": "^0.3.7",
-    "babel-preset-react-app": "^10.0.0",
+    "@babel/core": "^7.16.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
+    "@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",
     "bfj": "^7.0.2",
-    "camelcase": "^6.1.0",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "concurrently": "^5.0.0",
-    "css-loader": "4.3.0",
-    "dotenv": "8.2.0",
-    "dotenv-expand": "5.1.0",
-    "eslint": "^7.11.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.5",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.9.2",
-    "eslint-webpack-plugin": "^2.1.0",
-    "express": "^4.17.1",
-    "file-loader": "6.1.1",
-    "fs-extra": "^9.0.1",
-    "html-webpack-plugin": "4.5.0",
-    "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.0",
-    "jest-circus": "26.6.0",
-    "jest-resolve": "26.6.0",
-    "jest-watch-typeahead": "0.6.1",
-    "mini-css-extract-plugin": "0.11.3",
-    "nodemon": "^2.0.6",
-    "optimize-css-assets-webpack-plugin": "5.0.4",
-    "pnp-webpack-plugin": "1.6.4",
-    "postcss-flexbugs-fixes": "4.2.1",
-    "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
-    "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "5.0.2",
-    "prompts": "2.4.0",
-    "react-app-polyfill": "^2.0.0",
-    "react-dev-utils": "^11.0.1",
-    "react-refresh": "^0.8.3",
-    "resolve": "1.18.1",
-    "resolve-url-loader": "^3.1.2",
-    "sass-loader": "8.0.2",
-    "semver": "7.3.2",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "4.2.3",
-    "ts-pnp": "1.2.0",
-    "url-loader": "4.1.1",
-    "webpack": "4.44.2",
-    "webpack-dev-server": "3.11.0",
-    "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "5.1.4"
+    "browserslist": "^4.18.1",
+    "camelcase": "^6.2.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "concurrently": "^7.3.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",
+    "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": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-dev-utils": "^12.0.1",
+    "react-dom": "^18.2.0",
+    "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",
+    "web-vitals": "^2.1.0",
+    "webpack": "^5.64.4",
+    "webpack-dev-server": "^4.6.0",
+    "webpack-manifest-plugin": "^4.0.2",
+    "workbox-webpack-plugin": "^6.4.1"
   },
   "scripts": {
     "prestart": "cp -r ../../build/node_modules/* ./node_modules/",
     "prebuild": "cp -r ../../build/node_modules/* ./node_modules/",
     "start": "concurrently \"npm run start:server\" \"npm run start:client\"",
-    "start:client": "node scripts/start.js",
-    "start:server": "NODE_ENV=development nodemon -- --experimental-loader ./loader/index.js --conditions=react-server server",
+    "start:client": "NODE_ENV=development BUILD_PATH=dist node scripts/start.js",
+    "start:server": "NODE_ENV=development BUILD_PATH=dist nodemon -- --experimental-loader ./loader/index.js --conditions=react-server server",
     "start:prod": "node scripts/build.js && concurrently \"npm run start:prod-server\" \"npm run start:prod-client\"",
     "start:prod-client": "cd ./build && python -m SimpleHTTPServer 3000",
     "start:prod-server": "NODE_ENV=production node --experimental-loader ./loader/index.js --conditions=react-server server",
@@ -81,7 +74,10 @@
     "test": "node scripts/test.js --env=jsdom"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": {
     "production": [
@@ -95,11 +91,6 @@
       "last 1 safari version"
     ]
   },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
   "jest": {
     "roots": [
       "<rootDir>/src"
@@ -111,15 +102,16 @@
     "setupFiles": [
       "react-app-polyfill/jsdom"
     ],
-    "setupFilesAfterEnv": [],
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ],
     "testMatch": [
       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
     "testEnvironment": "jsdom",
-    "testRunner": "<rootDir>/node_modules/jest-circus/runner.js",
     "transform": {
-      "^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
+      "^.+\\.(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"
     },
@@ -149,5 +141,10 @@
       "jest-watch-typeahead/testname"
     ],
     "resetMocks": true
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }
diff --git a/fixtures/flight/scripts/build.js b/fixtures/flight/scripts/build.js
index a5a6429d725d..20d12bd2ed56 100644
--- a/fixtures/flight/scripts/build.js
+++ b/fixtures/flight/scripts/build.js
@@ -176,13 +176,19 @@ function build(previousFileSizes) {
           process.env.CI.toLowerCase() !== 'false') &&
         messages.warnings.length
       ) {
-        console.log(
-          chalk.yellow(
-            '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
+        // Ignore sourcemap warnings in CI builds. See #8227 for more info.
+        const filteredWarnings = messages.warnings.filter(
+          w => !/Failed to parse source map/.test(w)
         );
-        return reject(new Error(messages.warnings.join('\n\n')));
+        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 = {
diff --git a/fixtures/flight/scripts/start.js b/fixtures/flight/scripts/start.js
index 1a51119e03be..1473c3bff20a 100644
--- a/fixtures/flight/scripts/start.js
+++ b/fixtures/flight/scripts/start.js
@@ -84,28 +84,19 @@ checkBrowsers(paths.appPath, isInteractive)
     const appName = require(paths.appPackageJson).name;
 
     const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
     const urls = prepareUrls(
       protocol,
       HOST,
       port,
       paths.publicUrlOrPath.slice(0, -1)
     );
-    const devSocket = {
-      warnings: warnings =>
-        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: errors =>
-        devServer.sockWrite(devServer.sockets, 'errors', errors),
-    };
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
       appName,
       config,
-      devSocket,
       urls,
       useYarn,
       useTypeScript,
-      tscCompileOnError,
       webpack,
     });
     // Load proxy config
@@ -116,16 +107,14 @@ checkBrowsers(paths.appPath, isInteractive)
       paths.publicUrlOrPath
     );
     // Serve webpack assets generated by the compiler over a web server.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
+    const serverConfig = {
+      ...createDevServerConfig(proxyConfig, urls.lanUrlForConfig),
+      host: HOST,
+      port,
+    };
+    const devServer = new WebpackDevServer(serverConfig, compiler);
     // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
-      if (err) {
-        return console.log(err);
-      }
+    devServer.startCallback(() => {
       if (isInteractive) {
         clearConsole();
       }
diff --git a/fixtures/flight/yarn.lock b/fixtures/flight/yarn.lock
index 3a8e86245ddf..45e4a581594c 100644
--- a/fixtures/flight/yarn.lock
+++ b/fixtures/flight/yarn.lock
@@ -2,18 +2,27 @@
 # yarn lockfile v1
 
 
-"@babel/code-frame@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.44.tgz#2a02643368de80916162be70865c97774f3adbd9"
+"@adobe/css-tools@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.0.1.tgz#b38b444ad3aa5fedbb15f2f746dcd934226a12dd"
+  integrity sha512-+u76oB43nOHrF4DDWRLWDCtci7f3QJoEBigemIdIeTi1ODqjx6Tad9NCVnPRwewWlKkVab5PlK8DCtPTyX7S8g==
+
+"@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:
-    "@babel/highlight" "7.0.0-beta.44"
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
 
-"@babel/code-frame@7.10.4", "@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==
+"@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:
-    "@babel/highlight" "^7.10.4"
+    json-schema "^0.4.0"
+    jsonpointer "^5.0.0"
+    leven "^3.1.0"
 
 "@babel/code-frame@^7.0.0":
   version "7.0.0"
@@ -21,38 +30,30 @@
   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.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.12.1", "@babel/compat-data@^7.12.5", "@babel/compat-data@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.12.7.tgz#9329b4782a7d6bbd7eef57e11addf91ee3ef1e41"
-  integrity sha512-YaxPMGs/XIWtYqrdEOZOCPsVWfEoriXopnsz3/i7apYPXQ3698UFhS6dVT1KN5qOsWmVgw/FOrmQgpRaZayGsw==
-
-"@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/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/core@^7.1.0":
   version "7.7.2"
@@ -73,7 +74,28 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.12.3", "@babel/core@^7.7.5", "@babel/core@^7.8.4", "@babel/core@^7.9.0":
+"@babel/core@^7.11.1", "@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/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==
@@ -95,27 +117,16 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
-  dependencies:
-    "@babel/types" "7.0.0-beta.44"
-    jsesc "^2.5.1"
-    lodash "^4.2.0"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
-
-"@babel/generator@^7.0.0":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.1.2.tgz#fde75c072575ce7abbd97322e8fef5bae67e4630"
+"@babel/eslint-parser@^7.16.3":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/eslint-parser/-/eslint-parser-7.18.9.tgz#255a63796819a97b7578751bb08ab9f2a375a031"
+  integrity sha512-KzSGpMBggz4fKbRbWLNyPVTuQr6cmCcBhOyXTw/fieOVaw5oYAwcAj4a7UKcDYCPxQq+CG1NCDZH9e2JTXquiQ==
   dependencies:
-    "@babel/types" "^7.1.2"
-    jsesc "^2.5.1"
-    lodash "^4.17.10"
-    source-map "^0.5.0"
-    trim-right "^1.0.1"
+    eslint-scope "^5.1.1"
+    eslint-visitor-keys "^2.1.0"
+    semver "^6.3.0"
 
-"@babel/generator@^7.12.1", "@babel/generator@^7.12.5":
+"@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==
@@ -124,6 +135,15 @@
     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.7.2":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.7.2.tgz#2f4852d04131a5e17ea4f6645488b5da66ebf3af"
@@ -133,66 +153,51 @@
     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-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.12.4":
-  version "7.12.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.12.4.tgz#55fc1ead5242caa0ca2875dcb8eed6d311e50f48"
-  integrity sha512-AjEa0jrQqNk7eDQOo0pTfUOwQBMF+xVqrausQwT9/rTKy0g04ggFNaJpaE09IQMn9yExluigWMJcj0WC7bq+Og==
+"@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/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-module-imports" "^7.12.1"
-    "@babel/types" "^7.12.1"
+    "@babel/types" "^7.18.6"
 
-"@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==
+"@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-annotate-as-pure" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/helper-explode-assignable-expression" "^7.18.6"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-compilation-targets@^7.12.1", "@babel/helper-compilation-targets@^7.12.5":
-  version "7.12.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.12.5.tgz#cb470c76198db6a24e9dbc8987275631e5d29831"
-  integrity sha512-+qH6NrscMolUlzOYngSBMIOQpKUGPPsc61Bu5W10mg84LxZ7cmvnBHzARKbDoFxVvqqAbj6Tg6N7bSrWSPXMyw==
+"@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.12.5"
-    "@babel/helper-validator-option" "^7.12.1"
-    browserslist "^4.14.5"
-    semver "^5.5.0"
+    "@babel/compat-data" "^7.18.8"
+    "@babel/helper-validator-option" "^7.18.6"
+    browserslist "^4.20.2"
+    semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.12.1.tgz#3c45998f431edd4a9214c5f1d3ad1448a6137f6e"
-  integrity sha512-hkL++rWeta/OVOBTRJc9a5Azh5mt5WgZUGAKMD8JM141YsE08K//bp1unBBieO6rUKkIPyUE0USQ30jAy3Sk1w==
+"@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.18.9":
+  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-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-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-regexp-features-plugin@^7.12.1":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.7.tgz#2084172e95443fa0a09214ba1bb328f9aea1278f"
-  integrity sha512-idnutvQPdpbduutvi3JVfEgcVIHooQnhvhx0Nk9isOINOIGYkZea1Pk2JlJRiUnMefrlvr0vkByATBY/mB4vjQ==
+"@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.10.4"
-    regexpu-core "^4.7.1"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    regexpu-core "^5.1.0"
 
 "@babel/helper-create-regexp-features-plugin@^7.7.0":
   version "7.7.2"
@@ -201,37 +206,29 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.6.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.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.12.1.tgz#8006a466695c4ad86a2a5f2fb15b5f2c31ad5633"
-  integrity sha512-dmUwH8XmlrUpVqgtZ737tK88v07l840z9j3OEhCLwKTkjlvKpfqXVIZ0wpK3aeOxspwGrf/5AP5qLx4rO3w5rA==
+"@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/types" "^7.12.1"
+    "@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-function-name@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.44.tgz#e18552aaae2231100a6e485e03854bc3532d44dd"
-  dependencies:
-    "@babel/helper-get-function-arity" "7.0.0-beta.44"
-    "@babel/template" "7.0.0-beta.44"
-    "@babel/types" "7.0.0-beta.44"
+"@babel/helper-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.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
+"@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/helper-get-function-arity" "^7.0.0"
-    "@babel/template" "^7.1.0"
-    "@babel/types" "^7.0.0"
+    "@babel/types" "^7.18.6"
 
 "@babel/helper-function-name@^7.10.4":
   version "7.10.4"
@@ -242,6 +239,14 @@
     "@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.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.7.0.tgz#44a5ad151cfff8ed2599c91682dda2ec2c8430a3"
@@ -250,18 +255,6 @@
     "@babel/template" "^7.7.0"
     "@babel/types" "^7.7.0"
 
-"@babel/helper-get-function-arity@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.44.tgz#d03ca6dd2b9f7b0b1e6b32c56c72836140db3a15"
-  dependencies:
-    "@babel/types" "7.0.0-beta.44"
-
-"@babel/helper-get-function-arity@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
-  dependencies:
-    "@babel/types" "^7.0.0"
-
 "@babel/helper-get-function-arity@^7.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"
@@ -275,12 +268,12 @@
   dependencies:
     "@babel/types" "^7.7.0"
 
-"@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==
+"@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.10.4"
+    "@babel/types" "^7.18.6"
 
 "@babel/helper-member-expression-to-functions@^7.12.1":
   version "7.12.7"
@@ -289,13 +282,21 @@
   dependencies:
     "@babel/types" "^7.12.7"
 
-"@babel/helper-module-imports@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
+"@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.0.0"
+    "@babel/types" "^7.18.9"
+
+"@babel/helper-module-imports@^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-imports@^7.12.1", "@babel/helper-module-imports@^7.12.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==
@@ -317,6 +318,20 @@
     "@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-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"
@@ -324,6 +339,13 @@
   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-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"
@@ -333,20 +355,26 @@
   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-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.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.12.1.tgz#8c4dbbf916314f6047dc05e6a2217074238347fd"
-  integrity sha512-9d0KQCRM8clMPcDwo8SevNs+/9a8yWVVmaE80FGJcEP8N1qToREmWEGnBn8BUlJhYRFz6fqxeRL1sl5Ogsed7A==
+"@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.10.4"
-    "@babel/helper-wrap-function" "^7.10.4"
-    "@babel/types" "^7.12.1"
+    "@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-replace-supers@^7.12.1":
   version "7.12.5"
@@ -358,6 +386,17 @@
     "@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-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"
@@ -365,59 +404,71 @@
   dependencies:
     "@babel/types" "^7.12.1"
 
-"@babel/helper-skip-transparent-expression-wrappers@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.12.1.tgz#462dc63a7e435ade8468385c63d2b84cce4b3cbf"
-  integrity sha512-Mf5AUuhG1/OCChOJ/HcADmvcHM42WJockombn8ATJG3OnyiSxBK/Mm5x78BQWvmtXZKHgbjdGL2kin/HOLlZGA==
-  dependencies:
-    "@babel/types" "^7.12.1"
-
-"@babel/helper-split-export-declaration@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0-beta.44.tgz#c0b351735e0fbcb3822c8ad8db4e583b05ebd9dc"
+"@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.0.0-beta.44"
+    "@babel/types" "^7.18.6"
 
-"@babel/helper-split-export-declaration@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.0.0.tgz#3aae285c0311c2ab095d997b8c9a94cad547d813"
+"@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.0.0"
+    "@babel/types" "^7.18.9"
 
-"@babel/helper-split-export-declaration@^7.10.4", "@babel/helper-split-export-declaration@^7.11.0":
+"@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.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-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-option@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9"
-  integrity sha512-YpJabsXlJVWP0USHjnC/AQDTLlZERbON577YUVO/wLpqyj6HAtVYnWaQaN0iUN+1/tWn3c+uKKXjRut5115Y2A==
+"@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-wrap-function@^7.10.4":
-  version "7.12.3"
-  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.12.3.tgz#3332339fc4d1fbbf1c27d7958c27d34708e990d9"
-  integrity sha512-Cvb8IuJDln3rs6tzjW3Y8UeelAOdnpB8xtQ4sme2MSZ9wOxrbThporC0y/EtE16VAtoyEfLM404Xr1e0OOp+ow==
+"@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-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.10.4"
-    "@babel/template" "^7.10.4"
-    "@babel/traverse" "^7.10.4"
-    "@babel/types" "^7.10.4"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/template" "^7.18.10"
+    "@babel/traverse" "^7.18.11"
+    "@babel/types" "^7.18.10"
 
-"@babel/helpers@^7.12.1", "@babel/helpers@^7.12.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==
@@ -426,6 +477,15 @@
     "@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"
@@ -434,14 +494,6 @@
     "@babel/traverse" "^7.7.0"
     "@babel/types" "^7.7.0"
 
-"@babel/highlight@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
-  dependencies:
-    chalk "^2.0.0"
-    esutils "^2.0.2"
-    js-tokens "^3.0.0"
-
 "@babel/highlight@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
@@ -459,151 +511,188 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.1.2":
+"@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":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.1.2.tgz#85c5c47af6d244fab77bce6b9bd830e38c978409"
 
-"@babel/parser@^7.12.3", "@babel/parser@^7.12.7":
+"@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.7.0", "@babel/parser@^7.7.2":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.7.2.tgz#ea8334dc77416bfd9473eb470fd00d8245b3943b"
 
-"@babel/plugin-proposal-async-generator-functions@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e"
-  integrity sha512-d+/o30tJxFxrA1lhzJqiUcEJdI6jKlNregCv5bASeGf2Q4MXmnwH7viDo7nhx1/ohf09oaH8j1GVYG/e3Yqk6A==
+"@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.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.12.1"
-    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-class-properties@7.12.1", "@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==
+"@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-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@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-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==
+"@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-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-decorators" "^7.12.1"
+    "@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-dynamic-import@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.12.1.tgz#43eb5c2a3487ecd98c5c8ea8b5fdb69a2749b2dc"
-  integrity sha512-a4rhUSZFuq5W8/OO8H7BL5zspjnc1FLd9hlOxIK/f7qG4a0qsqk8uvF/ywgBA8/OmjsapjpvaEOYItfGG1qIvQ==
+"@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-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-export-namespace-from@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.1.tgz#8b9b8f376b2d88f5dd774e4d24a5cc2e3679b6d4"
-  integrity sha512-6CThGf0irEkzujYS5LQcjBx8j/4aQGiVv7J9+2f7pGfxqyKh3WnmVJYW3hdrQjyksErMGBPQrCnHfOtna+WLbw==
+"@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-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@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-json-strings@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.12.1.tgz#d45423b517714eedd5621a9dfdc03fa9f4eb241c"
-  integrity sha512-GoLDUi6U9ZLzlSda2Df++VSqDJg3CG+dR0+iWsv6XRw1rEq+zwt4DirM9yrxW6XWaTpmai1cWJLMfM8qQJf+yw==
+"@babel/plugin-proposal-decorators@^7.16.4":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.18.10.tgz#788650d01e518a8a722eb8b3055dd9d73ecb7a35"
+  integrity sha512-wdGTwWF5QtpTY/gbBtQLAiCnoxfD4qMbN87NYZle1dOZ9Os8Y6zXcKrIaOU8W+TIvFUWVGG9tUgNww3CjXRVVw==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/helper-create-class-features-plugin" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/helper-replace-supers" "^7.18.9"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/plugin-syntax-decorators" "^7.18.6"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.12.1.tgz#f2c490d36e1b3c9659241034a5d2cd50263a2751"
-  integrity sha512-k8ZmVv0JU+4gcUGeCDZOGd0lCIamU/sMtIiX3UWnUc5yzgq6YUGyEolNYD+MLYKfSzgECPcqetVcJP9Afe/aCA==
+"@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.10.4"
-    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@7.12.1", "@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==
+"@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.10.4"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-export-namespace-from" "^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==
+"@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.10.4"
-    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.12.1", "@babel/plugin-proposal-numeric-separator@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.7.tgz#8bf253de8139099fea193b297d23a9d406ef056b"
-  integrity sha512-8c+uy0qmnRTeukiGsjLGy6uVs/TFjJchGXUeBqlG4VWYOdJWkhhVPdQ3uHwbmalfJwv2JsV0qffXP4asRfL2SQ==
+"@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.10.4"
+    "@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.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.12.1.tgz#def9bd03cea0f9b72283dac0ec22d289c7691069"
-  integrity sha512-s6SowJIjzlhx8o7lsFx5zmY4At6CTtDvgNQDdPzkBQucle58A6b/TTeEBYtyDgmcXjUTM+vE8YOGHZzzbc/ioA==
+"@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/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@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.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.12.1.tgz#ccc2421af64d3aae50b558a71cede929a5ab2942"
-  integrity sha512-hFvIjgprh9mMw5v42sJWLI1lzU5L2sznP805zeT6rySVRA0Y18StRhDqhSxlap0oVgItRsB6WSROp4YnJTJz0g==
+"@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.10.4"
-    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@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==
+"@babel/plugin-proposal-optional-chaining@^7.16.0", "@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.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@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-optional-chaining@^7.12.1", "@babel/plugin-proposal-optional-chaining@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.12.7.tgz#e02f0ea1b5dc59d401ec16fb824679f683d3303c"
-  integrity sha512-4ovylXZ0PWmwoOvhU2vhnzVNnm88/Sm9nx7V8BPgMvAzn5zDou3/Awy0EjglyubVHasJj+XCEkr/r1X3P5elCA==
+"@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-plugin-utils" "^7.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/helper-create-class-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-methods@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.12.1.tgz#86814f6e7a21374c980c10d38b4493e703f4a389"
-  integrity sha512-mwZ1phvH7/NHK6Kf8LP7MYDogGV+DKB1mryFOEwx5EBNQrosvIczzZFTUmWaeujd5xT6G1ELYWUz3CutMhjE1w==
+"@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-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@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.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.12.1.tgz#2a183958d417765b9eae334f47758e5d6a82e072"
-  integrity sha512-MYq+l+PvHuw/rKUz1at/vb6nCnQ2gmJBNaM62z0OgH7B2W1D9pvkpYtlti9bGtizNIU1K3zm4bZF9F91efVY0w==
+"@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.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@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"
@@ -612,7 +701,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-syntax-async-generators@^7.8.0", "@babel/plugin-syntax-async-generators@^7.8.4":
+"@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==
@@ -626,21 +715,35 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-class-properties@^7.12.1", "@babel/plugin-syntax-class-properties@^7.8.3":
+"@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-decorators@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.12.1.tgz#81a8b535b284476c41be6de06853a8802b98c5dd"
-  integrity sha512-ir9YW5daRrTYiy9UJ2TzdNIJEZu8KclVzDcfSt4iEmOtwQ4llPtWInNKJyKnVXp1vE4bbVd5S31M/im3mYMO1w==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.14.5"
+
+"@babel/plugin-syntax-decorators@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.18.6.tgz#2e45af22835d0b0f8665da2bfd4463649ce5dbc1"
+  integrity sha512-fqyLgjcxf/1yhyZ6A+yo1u9gJ7eleFQod2lkaUsF9DQ7sbbY3Ligym3L0+I2c0WmqNKDpoD9UTb1AKP3qRMOAQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@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==
@@ -654,33 +757,40 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-flow@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.1.tgz#a77670d9abe6d63e8acadf4c31bb1eb5a506bbdd"
-  integrity sha512-1lBLLmtxrwpm4VKmtVFselI/P3pX+G63fAtUUt6b2Nzgao77KNDwyuRt90Mj2/9pKobtt68FdvjfqohZjg/FCA==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
+
+"@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-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
+"@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":
+"@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.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.12.1.tgz#9d9d357cc818aa7ae7935917c1257f67677a0926"
-  integrity sha512-1yRi7yAtB0ETgxdY9ti/p2TivUxJkTdhu/ZbF9MshVGqOx1TdB3b7xCXs49Fupgg50N45KcAsRP/ZqWjs9SRjg==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
@@ -689,7 +799,7 @@
   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":
+"@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==
@@ -703,106 +813,120 @@
   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":
+"@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":
+"@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":
+"@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", "@babel/plugin-syntax-top-level-await@^7.8.3":
+"@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.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.12.1.tgz#460ba9d77077653803c3dd2e673f76d66b4029e5"
-  integrity sha512-UZNEcCY+4Dp9yYRCAHrHDU+9ZXLYaY9MgBXSRLkB9WjYFRR6quJBumfVrEkUxrePPBwFcpWfNKXqVRQQtm7mMA==
+"@babel/plugin-syntax-typescript@^7.18.6", "@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-arrow-functions@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.12.1.tgz#8083ffc86ac8e777fbe24b5967c4b2521f3cb2b3"
-  integrity sha512-5QB50qyN44fzzz4/qxDPQMBCTHgxg3n0xRBLJUmBlLoU/sFvxVWGZF/ZUfMVDQuJUKXaBhbupxIzIfZ6Fwk/0A==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-async-to-generator@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.12.1.tgz#3849a49cc2a22e9743cbd6b52926d30337229af1"
-  integrity sha512-SDtqoEcarK1DFlRJ1hHRY5HvJUj5kX4qmtpMAm2QnhOlyuMC4TMdCRgW6WXpv93rZeYNeLP22y8Aq2dbcDRM1A==
+"@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.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-remap-async-to-generator" "^7.12.1"
+    "@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-block-scoped-functions@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.12.1.tgz#f2a1a365bde2b7112e0a6ded9067fdd7c07905d9"
-  integrity sha512-5OpxfuYnSgPalRpo8EWGPzIYf0lHBWORCkj5M0oLBwHdlux9Ri36QqGW3/LR13RSVOAoUUMzoPI/jpE4ABcHoA==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-block-scoping@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.12.1.tgz#f0ee727874b42a208a48a586b84c3d222c2bbef1"
-  integrity sha512-zJyAC9sZdE60r1nVQHblcfCj29Dh2Y0DOvlMkcqSo0ckqjiCwNiUezUKw+RjOCwGfpLRwnAeQ2XlLpsnGkvv9w==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-classes@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.12.1.tgz#65e650fcaddd3d88ddce67c0f834a3d436a32db6"
-  integrity sha512-/74xkA7bVdzQTBeSUhLLJgYIcxw/dpEpCdRDiHgPJ3Mv6uC11UhjpOhl72CgqbBCmt1qtssCyB2xnJm1+PFjog==
+"@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.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"
+    "@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-computed-properties@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.12.1.tgz#d68cf6c9b7f838a8a4144badbe97541ea0904852"
-  integrity sha512-vVUOYpPWB7BkgUWPo4C44mUQHpTZXakEqFjbv8rQMg7TC6S6ZhGZ3otQcRH6u7+adSlE5i0sp63eMC/XGffrzg==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-destructuring@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz#b9a570fe0d0a8d460116413cb4f97e8e08b2f847"
-  integrity sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-dotall-regex@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.12.1.tgz#a1d16c14862817b6409c0a678d6f9373ca9cd975"
-  integrity sha512-B2pXeRKoLszfEW7J4Hg9LoFaWEbr/kzo3teWHmtFCszjRNa/b40f9mfeqZsIDLLt/FjwQ6pz/Gdlwy85xNckBA==
+"@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.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
 "@babel/plugin-transform-dotall-regex@^7.4.4":
   version "7.7.0"
@@ -811,419 +935,346 @@
     "@babel/helper-create-regexp-features-plugin" "^7.7.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-duplicate-keys@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.12.1.tgz#745661baba295ac06e686822797a69fbaa2ca228"
-  integrity sha512-iRght0T0HztAb/CazveUpUQrZY+aGKKaWXMJ4uf9YJtqxSUe09j3wteztCUDRHs+SRAL7yMuFqUsLoAKKzgXjw==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-exponentiation-operator@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.12.1.tgz#b0f2ed356ba1be1428ecaf128ff8a24f02830ae0"
-  integrity sha512-7tqwy2bv48q+c1EHbXK0Zx3KXd2RVQp6OC7PbwFNt/dPTAV3Lu5sWtWuAj8owr5wqtWnqHfl2/mJlUmqkChKug==
+"@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.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@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==
+"@babel/plugin-transform-flow-strip-types@^7.16.0":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.18.9.tgz#5b4cc521426263b5ce08893a2db41097ceba35bf"
+  integrity sha512-+G6rp2zRuOAInY5wcggsx4+QVao1qPM0osC9fTUVlAV3zOrzTCnrMAFVnR6+a3T8wz1wFIH7KhYMcMB3u1n80A==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-flow" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-flow" "^7.18.6"
 
-"@babel/plugin-transform-for-of@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.12.1.tgz#07640f28867ed16f9511c99c888291f560921cfa"
-  integrity sha512-Zaeq10naAsuHo7heQvyV0ptj4dlZJwZgNAtBYBnu5nNKJoW62m0zKcIEyVECrUKErkUkg6ajMy4ZfnVZciSBhg==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-function-name@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.12.1.tgz#2ec76258c70fe08c6d7da154003a480620eba667"
-  integrity sha512-JF3UgJUILoFrFMEnOJLJkRHSk6LUSXLmEFsA23aR2O5CSLUxbeUX1IZ1YQ7Sn0aXb601Ncwjx73a+FVqgcljVw==
+"@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-function-name" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-compilation-targets" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-literals@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.12.1.tgz#d73b803a26b37017ddf9d3bb8f4dc58bfb806f57"
-  integrity sha512-+PxVGA+2Ag6uGgL0A5f+9rklOnnMccwEBzwYFL3EUaKuiyVnUipyXncFcfjSkbimLrODoqki1U9XxZzTvfN7IQ==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@babel/plugin-transform-member-expression-literals@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.12.1.tgz#496038602daf1514a64d43d8e17cbb2755e0c3ad"
-  integrity sha512-1sxePl6z9ad0gFMB9KqmYofk34flq62aqMt9NqliS/7hPEpURUCMbyHXrMPlo282iY7nAvUB1aQd5mg79UD9Jg==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-modules-amd@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.12.1.tgz#3154300b026185666eebb0c0ed7f8415fefcf6f9"
-  integrity sha512-tDW8hMkzad5oDtzsB70HIQQRBiTKrhfgwC/KkJeGsaNFTdWhKNt/BiE8c5yj19XiGyrxpbkOfH87qkNg1YGlOQ==
+"@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.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@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-commonjs@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.12.1.tgz#fa403124542636c786cf9b460a0ffbb48a86e648"
-  integrity sha512-dY789wq6l0uLY8py9c1B48V8mVL5gZh/+PQ5ZPrylPYsnAvnEMjqsUXkuoDVPeVK+0VyGar+D08107LzDQ6pag==
+"@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.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-simple-access" "^7.12.1"
+    "@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-systemjs@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.12.1.tgz#663fea620d593c93f214a464cd399bf6dc683086"
-  integrity sha512-Hn7cVvOavVh8yvW6fLwveFqSnd7rbQN3zJvoPNyNaQSvgfKmDBO9U1YL9+PCXGRlZD9tNdWTy5ACKqMuzyn32Q==
+"@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.10.4"
-    "@babel/helper-module-transforms" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-validator-identifier" "^7.10.4"
+    "@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-umd@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.12.1.tgz#eb5a218d6b1c68f3d6217b8fa2cc82fec6547902"
-  integrity sha512-aEIubCS0KHKM0zUos5fIoQm+AZUMt1ZvMpqz0/H5qAQ7vWylr9+PLYurT+Ic7ID/bKLd4q8hDovaG3Zch2uz5Q==
+"@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.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-module-transforms" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-named-capturing-groups-regex@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.12.1.tgz#b407f5c96be0d9f5f88467497fa82b30ac3e8753"
-  integrity sha512-tB43uQ62RHcoDp9v2Nsf+dSM8sbNodbEicbQNA53zHz8pWUhsgHSJCGpt7daXxRydjb0KnfmB+ChXOv3oADp1Q==
+"@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.12.1"
+    "@babel/helper-create-regexp-features-plugin" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-new-target@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.12.1.tgz#80073f02ee1bb2d365c3416490e085c95759dec0"
-  integrity sha512-+eW/VLcUL5L9IvJH7rT1sT0CzkdUTvPrXC2PXTn/7z7tXLBuKvezYbGdxD5WMRoyvyaujOq2fWoKl869heKjhw==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-object-super@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.12.1.tgz#4ea08696b8d2e65841d0c7706482b048bed1066e"
-  integrity sha512-AvypiGJH9hsquNUn+RXVcBdeE3KHPZexWRdimhuV59cSoOt5kFBmqlByorAeUlGG2CJWd0U+4ZtNKga/TB0cAw==
+"@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.10.4"
-    "@babel/helper-replace-supers" "^7.12.1"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-replace-supers" "^7.18.6"
 
-"@babel/plugin-transform-parameters@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.12.1.tgz#d2e963b038771650c922eff593799c96d853255d"
-  integrity sha512-xq9C5EQhdPK23ZeCdMxl8bbRnAgHFrw5EOC3KJUsSylZqdkCaFEXxGSBuTSObOpiiHHNyb82es8M1QYgfQGfNg==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-property-literals@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.12.1.tgz#41bc81200d730abb4456ab8b3fbd5537b59adecd"
-  integrity sha512-6MTCR/mZ1MQS+AwZLplX4cEySjCpnIF26ToWo942nqn8hXSm7McaHQNeGx/pt7suI1TWOWMfa/NgBhiqSnX0cQ==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-react-constant-elements@^7.9.0":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.12.1.tgz#4471f0851feec3231cc9aaa0dccde39947c1ac1e"
-  integrity sha512-KOHd0tIRLoER+J+8f9DblZDa1fLGPwaaN1DI1TVHuQFOpjHV22C3CUB3obeC4fexHY9nx+fH0hQNvLFFfA1mxA==
+"@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.10.4"
-
-"@babel/plugin-transform-react-display-name@7.12.1", "@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-jsx-development@^7.12.1", "@babel/plugin-transform-react-jsx-development@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.12.7.tgz#4c2a647de79c7e2b16bfe4540677ba3121e82a08"
-  integrity sha512-Rs3ETtMtR3VLXFeYRChle5SsP/P9Jp/6dsewBQfokDSzKJThlsuFcnzLTDRALiUmTC48ej19YD9uN1mupEeEDg==
-  dependencies:
-    "@babel/helper-builder-react-jsx-experimental" "^7.12.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.12.1"
-
-"@babel/plugin-transform-react-jsx-self@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.12.1.tgz#ef43cbca2a14f1bd17807dbe4376ff89d714cf28"
-  integrity sha512-FbpL0ieNWiiBB5tCldX17EtXgmzeEZjFrix72rQYeq9X6nUK38HCaxexzVQrZWXanxKJPKVVIU37gFjEQYkPkA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-react-jsx-source@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.12.1.tgz#d07de6863f468da0809edcf79a1aa8ce2a82a26b"
-  integrity sha512-keQ5kBfjJNRc6zZN1/nVHCd6LLIHq4aUKcVnvE/2l+ZZROSbqoiGFRtT5t3Is89XJxBQaP7NLZX2jgGHdZvvFQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-react-jsx@^7.12.1", "@babel/plugin-transform-react-jsx@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.12.7.tgz#8b14d45f6eccd41b7f924bcb65c021e9f0a06f7f"
-  integrity sha512-YFlTi6MEsclFAPIDNZYiCRbneg1MFGao9pPG9uD5htwE0vDbPaMUMeYd6itWjw7K4kro4UbdQf3ljmFl9y48dQ==
-  dependencies:
-    "@babel/helper-builder-react-jsx" "^7.10.4"
-    "@babel/helper-builder-react-jsx-experimental" "^7.12.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-jsx" "^7.12.1"
-
-"@babel/plugin-transform-react-pure-annotations@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.12.1.tgz#05d46f0ab4d1339ac59adf20a1462c91b37a1a42"
-  integrity sha512-RqeaHiwZtphSIUZ5I85PEH19LOSzxfuEazoY7/pWASCAIBuATQzpSVD+eT6MebeeZT2F4eSL0u4vw6n4Nm0Mjg==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.10.4"
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-regenerator@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.1.tgz#5f0a28d842f6462281f06a964e88ba8d7ab49753"
-  integrity sha512-gYrHqs5itw6i4PflFX3OdBPMQdPbF4bj2REIUxlMRUFk0/ZOAIpDFuViuxPjUL7YC8UPnf+XG7/utJvqXdPKng==
-  dependencies:
-    regenerator-transform "^0.14.2"
-
-"@babel/plugin-transform-reserved-words@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.12.1.tgz#6fdfc8cc7edcc42b36a7c12188c6787c873adcd8"
-  integrity sha512-pOnUfhyPKvZpVyBHhSBoX8vfA09b7r00Pmm1sH+29ae2hMTKVmSp4Ztsr8KBKjLjx17H0eJqaRC3bR2iThM54A==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.18.9"
 
-"@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.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.12.1.tgz#0bf9cac5550fce0cfdf043420f661d645fdc75e3"
-  integrity sha512-GFZS3c/MhX1OusqB1MZ1ct2xRzX5ppQh2JU1h2Pnfk88HtFTM+TWQqJNfwkmxtPQtb/s1tk87oENfXJlx7rSDw==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-
-"@babel/plugin-transform-spread@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.12.1.tgz#527f9f311be4ec7fdc2b79bb89f7bf884b3e1e1e"
-  integrity sha512-vuLp8CP0BE18zVYjsEBZ5xoCecMK6LBMMxYzJnh01rxQRvhNhH1csMMmBfNo5tGpGO+NhdSNW2mzIvBu3K1fng==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
-
-"@babel/plugin-transform-sticky-regex@^7.12.1", "@babel/plugin-transform-sticky-regex@^7.12.7":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.12.7.tgz#560224613ab23987453948ed21d0b0b193fa7fad"
-  integrity sha512-VEiqZL5N/QvDbdjfYQBhruN0HYjSPjC4XkeqW4ny/jNtH9gcbgaqBIXYEZCNnESMAGs0/K/R7oFGMhOyu/eIxg==
+"@babel/plugin-transform-react-display-name@^7.16.0", "@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-template-literals@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.12.1.tgz#b43ece6ed9a79c0c71119f576d299ef09d942843"
-  integrity sha512-b4Zx3KHi+taXB1dVRBhVJtEPi9h1THCeKmae2qP0YdUHIFhVjtpqqNfxeVAa1xeHVhAy4SbHxEwx5cltAu5apw==
+"@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/helper-plugin-utils" "^7.10.4"
+    "@babel/plugin-transform-react-jsx" "^7.18.6"
 
-"@babel/plugin-transform-typeof-symbol@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.12.1.tgz#9ca6be343d42512fbc2e68236a82ae64bc7af78a"
-  integrity sha512-EPGgpGy+O5Kg5pJFNDKuxt9RdmTgj5sgrus2XVeMp/ZIbOESadgILUbm50SNpghOh3/6yrbsH+NB5+WJTmsA7Q==
+"@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-plugin-utils" "^7.10.4"
+    "@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-typescript@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.12.1.tgz#d92cc0af504d510e26a754a7dbc2e5c8cd9c7ab4"
-  integrity sha512-VrsBByqAIntM+EYMqSm59SiMEf7qkmI9dqMt6RbD/wlwueWmYcI0FFK5Fj47pP6DRZm+3teXjosKlwcZJ5lIMw==
+"@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-create-class-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-syntax-typescript" "^7.12.1"
+    "@babel/helper-annotate-as-pure" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-transform-unicode-escapes@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.1.tgz#5232b9f81ccb07070b7c3c36c67a1b78f1845709"
-  integrity sha512-I8gNHJLIc7GdApm7wkVnStWssPNbSRMPtgHdmH3sRM1zopz09UWPS4x5V4n1yz/MIWTVnJ9sp6IkuXdWM4w+2Q==
+"@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.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    regenerator-transform "^0.15.0"
 
-"@babel/plugin-transform-unicode-regex@^7.12.1":
-  version "7.12.1"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.12.1.tgz#cc9661f61390db5c65e3febaccefd5c6ac3faecb"
-  integrity sha512-SqH4ClNngh/zGwHZOOQMTD+e8FGWexILV+ePMyiDJttAWRh5dhDL8rcl5lSgU3Huiq6Zn6pWTMvdPAb21Dwdyg==
+"@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-create-regexp-features-plugin" "^7.12.1"
-    "@babel/helper-plugin-utils" "^7.10.4"
+    "@babel/helper-plugin-utils" "^7.18.6"
 
-"@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==
+"@babel/plugin-transform-runtime@^7.16.4":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.18.10.tgz#37d14d1fa810a368fd635d4d1476c0154144a96f"
+  integrity sha512-q5mMeYAdfEbpBAgzl7tBre/la3LeCxmDO1+wMXRdPWbcoMjR3GiXlCLk7JBZVVye0bqTGNMbt0yYVXX1B1jEWQ==
   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/helper-module-imports" "^7.18.6"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    babel-plugin-polyfill-corejs2 "^0.3.2"
+    babel-plugin-polyfill-corejs3 "^0.5.3"
+    babel-plugin-polyfill-regenerator "^0.4.0"
+    semver "^6.3.0"
 
-"@babel/preset-env@^7.8.4", "@babel/preset-env@^7.9.5":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.12.7.tgz#54ea21dbe92caf6f10cb1a0a576adc4ebf094b55"
-  integrity sha512-OnNdfAr1FUQg7ksb7bmbKoby4qFOHw6DKWWUNB9KqnnCldxhxJlP+21dpyaWFmf2h0rTbOkXJtAGevY3XW1eew==
-  dependencies:
-    "@babel/compat-data" "^7.12.7"
-    "@babel/helper-compilation-targets" "^7.12.5"
-    "@babel/helper-module-imports" "^7.12.5"
-    "@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.7"
-    "@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.7"
-    "@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-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-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-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-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-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-typescript@^7.18.6":
+  version "7.18.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.18.12.tgz#712e9a71b9e00fde9f8c0238e0cceee86ab2f8fd"
+  integrity sha512-2vjjam0cum0miPkenUbQswKowuxs/NjMwIKEq0zwegRxXk12C9YOF9STXnaUptITOtOJHKHpzvvWYOjbm6tc0w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.18.9"
+    "@babel/helper-plugin-utils" "^7.18.9"
+    "@babel/plugin-syntax-typescript" "^7.18.6"
+
+"@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-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/preset-env@^7.11.0", "@babel/preset-env@^7.12.1", "@babel/preset-env@^7.16.4":
+  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-json-strings" "^7.8.0"
+    "@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.0"
+    "@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.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.7"
-    "@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.7"
-    core-js-compat "^3.7.0"
-    semver "^5.5.0"
+    "@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-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==
+"@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"
@@ -1231,50 +1282,26 @@
     "@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-react@^7.9.4":
-  version "7.12.7"
-  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.12.7.tgz#36d61d83223b07b6ac4ec55cf016abb0f70be83b"
-  integrity sha512-wKeTdnGUP5AEYCYQIMeXMMwU7j+2opxrG0WzuZfxuuW9nhKvvALBjl67653CWamZJVefuJGI219G591RSldrqQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.10.4"
-    "@babel/plugin-transform-react-display-name" "^7.12.1"
-    "@babel/plugin-transform-react-jsx" "^7.12.7"
-    "@babel/plugin-transform-react-jsx-development" "^7.12.7"
-    "@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==
+"@babel/preset-react@^7.12.5", "@babel/preset-react@^7.16.0":
+  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.10.4"
-    "@babel/plugin-transform-typescript" "^7.12.1"
+    "@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/register@^7.7.0":
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.7.0.tgz#4e23ecf840296ef79c605baaa5c89e1a2426314b"
-  integrity sha512-HV3GJzTvSoyOMWGYn2TAh6uL6g+gqKTgEZ99Q3+X9UURT1VPT/WcU46R61XftIc5rXytcOHZ4Z0doDlsjPomIg==
+"@babel/preset-typescript@^7.16.0":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz#ce64be3e63eddc44240c6358daefac17b3186399"
+  integrity sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==
   dependencies:
-    find-cache-dir "^2.0.0"
-    lodash "^4.17.13"
-    make-dir "^2.1.0"
-    pirates "^4.0.0"
-    source-map-support "^0.5.16"
+    "@babel/helper-plugin-utils" "^7.18.6"
+    "@babel/helper-validator-option" "^7.18.6"
+    "@babel/plugin-transform-typescript" "^7.18.6"
 
 "@babel/runtime-corejs3@^7.10.2":
   version "7.12.5"
@@ -1284,36 +1311,19 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@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.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@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.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
+"@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.18.9", "@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:
-    "@babel/code-frame" "7.0.0-beta.44"
-    "@babel/types" "7.0.0-beta.44"
-    babylon "7.0.0-beta.44"
-    lodash "^4.2.0"
-
-"@babel/template@^7.1.0":
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.1.2.tgz#090484a574fef5a2d2d7726a674eceda5c5b5644"
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.1.2"
-    "@babel/types" "^7.1.2"
+    regenerator-runtime "^0.13.4"
 
 "@babel/template@^7.10.4", "@babel/template@^7.12.7", "@babel/template@^7.3.3":
   version "7.12.7"
@@ -1324,6 +1334,15 @@
     "@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.7.0":
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.0.tgz#4fadc1b8e734d97f56de39c77de76f2562e597d0"
@@ -1332,36 +1351,7 @@
     "@babel/parser" "^7.7.0"
     "@babel/types" "^7.7.0"
 
-"@babel/traverse@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.44.tgz#a970a2c45477ad18017e2e465a0606feee0d2966"
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.44"
-    "@babel/generator" "7.0.0-beta.44"
-    "@babel/helper-function-name" "7.0.0-beta.44"
-    "@babel/helper-split-export-declaration" "7.0.0-beta.44"
-    "@babel/types" "7.0.0-beta.44"
-    babylon "7.0.0-beta.44"
-    debug "^3.1.0"
-    globals "^11.1.0"
-    invariant "^2.2.0"
-    lodash "^4.2.0"
-
-"@babel/traverse@^7.1.0":
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.1.0.tgz#503ec6669387efd182c3888c4eec07bcc45d91b2"
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.0.0"
-    "@babel/helper-function-name" "^7.1.0"
-    "@babel/helper-split-export-declaration" "^7.0.0"
-    "@babel/parser" "^7.1.0"
-    "@babel/types" "^7.0.0"
-    debug "^3.1.0"
-    globals "^11.1.0"
-    lodash "^4.17.10"
-
-"@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9":
+"@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==
@@ -1376,6 +1366,22 @@
     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.7.0", "@babel/traverse@^7.7.2":
   version "7.7.2"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.7.2.tgz#ef0a65e07a2f3c550967366b3d9b62a2dcbeae09"
@@ -1390,15 +1396,7 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
-"@babel/types@7.0.0-beta.44":
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
-  dependencies:
-    esutils "^2.0.2"
-    lodash "^4.2.0"
-    to-fast-properties "^2.0.0"
-
-"@babel/types@^7.0.0", "@babel/types@^7.1.2":
+"@babel/types@^7.0.0":
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.2.tgz#183e7952cf6691628afdc2e2b90d03240bac80c0"
   dependencies:
@@ -1406,7 +1404,7 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.10.4", "@babel/types@^7.10.5", "@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":
+"@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==
@@ -1415,6 +1413,15 @@
     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.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"
@@ -1428,65 +1435,150 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
-"@cnakazawa/watch@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.3.tgz#099139eaec7ebf07a27c1786a3ff64f39464d2ef"
+"@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:
-    exec-sh "^0.3.2"
-    minimist "^1.2.0"
+    "@csstools/selector-specificity" "^2.0.2"
+    postcss-selector-parser "^6.0.10"
 
-"@csstools/convert-colors@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@csstools/convert-colors/-/convert-colors-1.4.0.tgz#ad495dc41b12e75d588c6db8b9834f08fa131eb7"
+"@csstools/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/normalize.css@^10.1.0":
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
-  integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
+"@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"
 
-"@eslint/eslintrc@^0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.2.2.tgz#d01fc791e2fc33e88a29d6f3dc7e93d0cd784b76"
-  integrity sha512-EfB5OHNYp1F4px/LI/FEnGylop7nOqkQ1LRzCM0KccA2U8tvV8w01KBv37LbO7nW4H+YhKyo2LcJhRwjjV17QQ==
+"@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:
-    ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
-    import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
-    lodash "^4.17.19"
-    minimatch "^3.0.4"
-    strip-json-comments "^3.1.1"
+    postcss-value-parser "^4.2.0"
 
-"@hapi/address@2.x.x":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.2.tgz#1c794cd6dbf2354d1eb1ef10e0303f573e1c7222"
+"@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"
 
-"@hapi/bourne@1.x.x":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@hapi/bourne/-/bourne-1.3.2.tgz#0a7095adea067243ce3283e1b56b8a8f453b242a"
+"@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"
 
-"@hapi/hoek@8.x.x", "@hapi/hoek@^8.3.0":
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-8.5.0.tgz#2f9ce301c8898e1c3248b0a8564696b24d1a9a5a"
+"@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==
 
-"@hapi/joi@^15.1.0":
-  version "15.1.1"
-  resolved "https://registry.yarnpkg.com/@hapi/joi/-/joi-15.1.1.tgz#c675b8a71296f02833f8d6d243b34c57b8ce19d7"
-  integrity sha512-entf8ZMOK8sc+8YfeOlM8pCfg3b5+WZIKBfUaaJT8UsjAAPjartzxIYm3TIbjvA4u+u++KbcXD38k682nVHDAQ==
+"@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==
+
+"@eslint/eslintrc@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
+  integrity sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==
   dependencies:
-    "@hapi/address" "2.x.x"
-    "@hapi/bourne" "1.x.x"
-    "@hapi/hoek" "8.x.x"
-    "@hapi/topo" "3.x.x"
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.3.2"
+    globals "^13.15.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"
 
-"@hapi/topo@3.x.x":
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/@hapi/topo/-/topo-3.1.6.tgz#68d935fa3eae7fdd5ab0d7f953f3205d8b2bfc29"
+"@humanwhocodes/config-array@^0.10.4":
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.10.4.tgz#01e7366e57d2ad104feea63e72248f22015c520c"
+  integrity sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==
   dependencies:
-    "@hapi/hoek" "^8.3.0"
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/gitignore-to-minimatch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz#316b0a63b91c10e53f242efb4ace5c3b34e8728d"
+  integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  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==
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
@@ -1504,177 +1596,276 @@
   resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.2.tgz#26520bf09abe4a5644cd5414e37125a8954241dd"
   integrity sha512-tsAQNx32a8CoFhjhijUIhI4kccIAgmGhy8LZMZgGfmXcpMbPRUqn5LWmgRttILi6yeGmBJd2xsPkFMs0PzgPCw==
 
-"@jest/console@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/console/-/console-26.6.2.tgz#4e04bc464014358b03ab4937805ee36a0aeb98f2"
-  integrity sha512-IY1R2i2aLsLr7Id3S6p2BA82GNWryt4oSvEXLAKc+L2zdi89dSkE8xC1C+0kpATG4JhBJREnQOH7/zmccM2B0g==
+"@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" "^26.6.2"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     chalk "^4.0.0"
-    jest-message-util "^26.6.2"
-    jest-util "^26.6.2"
+    jest-message-util "^28.1.3"
+    jest-util "^28.1.3"
     slash "^3.0.0"
 
-"@jest/core@^26.6.0", "@jest/core@^26.6.3":
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/core/-/core-26.6.3.tgz#7639fcb3833d748a4656ada54bde193051e45fad"
-  integrity sha512-xvV1kKbhfUqFVuZ8Cyo+JPpipAHHAV3kcDBftiduK8EICXmTFddryy3P7NfZt8Pv37rA9nEJBKCCkglCPt/Xjw==
+"@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" "^26.6.2"
-    "@jest/reporters" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@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.4"
-    jest-changed-files "^26.6.2"
-    jest-config "^26.6.3"
-    jest-haste-map "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-resolve-dependencies "^26.6.3"
-    jest-runner "^26.6.3"
-    jest-runtime "^26.6.3"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    jest-watcher "^26.6.2"
-    micromatch "^4.0.2"
-    p-each-series "^2.1.0"
+    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@^26.6.0", "@jest/environment@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-26.6.2.tgz#ba364cc72e221e79cc8f0a99555bf5d7577cf92c"
-  integrity sha512-nFy+fHl28zUrRsCeMB61VDThV1pVTtlEokBRgqPrcT1JNq4yRNIyTHfyht6PqtUvY9IsuLGTrbG8kPXjSZIZwA==
+"@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" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/fake-timers" "^27.5.1"
+    "@jest/types" "^27.5.1"
     "@types/node" "*"
-    jest-mock "^26.6.2"
+    jest-mock "^27.5.1"
 
-"@jest/fake-timers@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-26.6.2.tgz#459c329bcf70cee4af4d7e3f3e67848123535aad"
-  integrity sha512-14Uleatt7jdzefLPYM3KLcnUl1ZNikaKq34enpb5XG9i81JpppDb5muZvonvKyrl7ftEHkKS5L5/eB/kxJ+bvA==
+"@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" "^26.6.2"
-    "@sinonjs/fake-timers" "^6.0.1"
+    "@jest/types" "^27.5.1"
+    "@sinonjs/fake-timers" "^8.0.1"
     "@types/node" "*"
-    jest-message-util "^26.6.2"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
+    jest-message-util "^27.5.1"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
 
-"@jest/globals@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-26.6.2.tgz#5b613b78a1aa2655ae908eba638cc96a20df720a"
-  integrity sha512-85Ltnm7HlB/KesBUuALwQ68YTU72w9H2xW9FjZ1eL1U3lhtefjjl5c2MiUbpXt/i6LaPRvoOFJ22yCBSfQ0JIA==
+"@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" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    expect "^26.6.2"
+    "@jest/environment" "^27.5.1"
+    "@jest/types" "^27.5.1"
+    expect "^27.5.1"
 
-"@jest/reporters@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-26.6.2.tgz#1f518b99637a5f18307bd3ecf9275f6882a667f6"
-  integrity sha512-h2bW53APG4HvkOnVMo8q3QXa6pcaNt1HkwVsOPMBV6LD/q9oSpxNSYZQYkAnjdMjrJ86UuYeLo+aEZClV6opnw==
+"@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" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@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.4"
+    graceful-fs "^4.2.9"
     istanbul-lib-coverage "^3.0.0"
-    istanbul-lib-instrument "^4.0.3"
+    istanbul-lib-instrument "^5.1.0"
     istanbul-lib-report "^3.0.0"
     istanbul-lib-source-maps "^4.0.0"
-    istanbul-reports "^3.0.2"
-    jest-haste-map "^26.6.2"
-    jest-resolve "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
+    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 "^7.0.0"
-  optionalDependencies:
-    node-notifier "^8.0.0"
+    v8-to-istanbul "^8.1.0"
 
-"@jest/source-map@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-26.6.2.tgz#29af5e1e2e324cafccc936f218309f54ab69d535"
-  integrity sha512-YwYcCwAnNmOVsZ8mr3GfnzdXDAl4LaenZP5z+G0c8bzC9/dugL8zRmxZzdoTl4IaS3CryS1uWnROLPFmb6lVvA==
+"@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.4"
+    graceful-fs "^4.2.9"
     source-map "^0.6.0"
 
-"@jest/test-result@^26.6.0", "@jest/test-result@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-26.6.2.tgz#55da58b62df134576cc95476efa5f7949e3f5f18"
-  integrity sha512-5O7H5c/7YlojphYNrK02LlDIV2GNPYisKwHm2QTKjNZeEzezCbwYs9swJySv2UfPMyZ0VdsmMv7jIlD/IKYQpQ==
+"@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" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@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-sequencer@^26.6.3":
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-26.6.3.tgz#98e8a45100863886d074205e8ffdc5a7eb582b17"
-  integrity sha512-YHlVIjP5nfEyjlrSr8t/YdNfU/1XEt7c5b4OxcXCjyRhjzLYu/rO69/WHPuYcbCWkz8kAeZVZp2N2+IOLLEPGw==
+"@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/test-result" "^26.6.2"
-    graceful-fs "^4.2.4"
-    jest-haste-map "^26.6.2"
-    jest-runner "^26.6.3"
-    jest-runtime "^26.6.3"
+    "@jest/console" "^28.1.3"
+    "@jest/types" "^28.1.3"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
 
-"@jest/transform@^26.6.2":
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b"
-  integrity sha512-E9JjhUgNzvuQ+vVAL21vlyfy12gP0GhazGgJC4h6qUt1jSdUXGWJ1wfu/X7Sd8etSgxV4ovT1pb9v5D6QW4XgA==
+"@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" "^26.6.2"
-    babel-plugin-istanbul "^6.0.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.4"
-    jest-haste-map "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-util "^26.6.2"
-    micromatch "^4.0.2"
-    pirates "^4.0.1"
+    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@^26.6.0", "@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==
+"@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" "^15.0.0"
+    "@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.0", "@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.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/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/source-map@^0.3.2":
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
+  integrity sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@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.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"
+
+"@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==
+
 "@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"
@@ -1696,45 +1887,50 @@
     "@nodelib/fs.scandir" "2.1.3"
     fastq "^1.6.0"
 
-"@npmcli/move-file@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@npmcli/move-file/-/move-file-1.0.1.tgz#de103070dac0f48ce49cf6693c23af59c0f70464"
-  integrity sha512-Uv6h1sT+0DrblvIrolFtbvM1FgWm+/sy4B3pvLp67Zys+thcukzS5ekn7HsZFGpWP4Q3fYJCljbWQE/XivMRLw==
-  dependencies:
-    mkdirp "^1.0.4"
-
-"@pmmmwh/react-refresh-webpack-plugin@0.4.2":
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.4.2.tgz#1f9741e0bde9790a0e13272082ed7272a083620d"
-  integrity sha512-Loc4UDGutcZ+Bd56hBInkm6JyjyCwWy4t2wcDXzN8EDPANgVRj0VP8Nxn0Zq2pc+WKauZwEivQgbDGg4xZO20A==
+"@pmmmwh/react-refresh-webpack-plugin@^0.5.3":
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.7.tgz#58f8217ba70069cc6a73f5d7e05e85b458c150e2"
+  integrity sha512-bcKCAzF0DV2IIROp9ZHkRJa6O4jy7NlnHdWL3GmcUxYWNjLXkK5kfELELwEfSP5hXPfVL/qOGMAROuMQb9GG8Q==
   dependencies:
-    ansi-html "^0.0.7"
+    ansi-html-community "^0.0.8"
+    common-path-prefix "^3.0.0"
+    core-js-pure "^3.8.1"
     error-stack-parser "^2.0.6"
-    html-entities "^1.2.1"
-    native-url "^0.2.6"
-    schema-utils "^2.6.5"
+    find-up "^5.0.0"
+    html-entities "^2.1.0"
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@rollup/plugin-node-resolve@^7.1.1":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca"
-  integrity sha512-RxtSL3XmdTAE2byxekYLnx+98kEUOrPHF/KRVjLH+DEIHy6kjIw7YINQzn+NXiH/NTrQLAwYs0GWB+csWygA9Q==
+"@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:
-    "@rollup/pluginutils" "^3.0.8"
-    "@types/resolve" "0.0.8"
+    "@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.14.2"
+    resolve "^1.19.0"
 
-"@rollup/plugin-replace@^2.3.1":
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.4.tgz#7dd84c17755d62b509577f2db37eb524d7ca88ca"
-  integrity sha512-waBhMzyAtjCL1GwZes2jaE9MjuQ/DQF2BatH3fRivUF3z0JBFrU0U6iBNC/4WR+2rLKhaAhPWDNPYp4mI6RqdQ==
+"@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.0.8", "@rollup/pluginutils@^3.1.0":
+"@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==
@@ -1743,10 +1939,15 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@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==
+"@rushstack/eslint-patch@^1.1.0":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz#0c8b74c50f29ee44f423f7416829c0bf8bb5eb27"
+  integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
+
+"@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"
@@ -1755,20 +1956,22 @@
   dependencies:
     type-detect "4.0.8"
 
-"@sinonjs/fake-timers@^6.0.1":
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz#293674fccb3262ac782c7aadfdeca86b10c75c40"
-  integrity sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==
+"@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@^1.1.1":
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.2.tgz#e6786b6af5799f82f7ab3a82e53f6182d2b91a58"
-  integrity sha512-yBMPqmd1yEJo/280PAMkychuaALyQ9Lkb5q1ck3mjJrFuEobIfhnQ4J3mbvBoISmR3SWMWV+cGB/I0lCQee79A==
+"@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 "^2.6.1"
+    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"
@@ -1824,7 +2027,7 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^5.4.0"
     "@svgr/babel-plugin-transform-svg-component" "^5.5.0"
 
-"@svgr/core@^5.4.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==
@@ -1840,7 +2043,7 @@
   dependencies:
     "@babel/types" "^7.12.6"
 
-"@svgr/plugin-jsx@^5.4.0", "@svgr/plugin-jsx@^5.5.0":
+"@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==
@@ -1850,7 +2053,7 @@
     "@svgr/hast-util-to-babel-ast" "^5.5.0"
     svg-parser "^2.0.2"
 
-"@svgr/plugin-svgo@^5.4.0":
+"@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==
@@ -1859,33 +2062,81 @@
     deepmerge "^4.2.2"
     svgo "^1.2.2"
 
-"@svgr/webpack@5.4.0":
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-5.4.0.tgz#b68bc86e29cf007292b96ced65f80971175632e0"
-  integrity sha512-LjepnS/BSAvelnOnnzr6Gg0GcpLmnZ9ThGFK5WJtm1xOqdBE/1IACZU7MMdVzjyUkfFqGz87eRE4hFaSLiUwYg==
-  dependencies:
-    "@babel/core" "^7.9.0"
-    "@babel/plugin-transform-react-constant-elements" "^7.9.0"
-    "@babel/preset-env" "^7.9.5"
-    "@babel/preset-react" "^7.9.4"
-    "@svgr/core" "^5.4.0"
-    "@svgr/plugin-jsx" "^5.4.0"
-    "@svgr/plugin-svgo" "^5.4.0"
-    loader-utils "^2.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==
+"@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:
-    defer-to-connect "^1.0.1"
+    "@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"
 
-"@types/anymatch@*":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/anymatch/-/anymatch-1.3.1.tgz#336badc1beecb9dacc38bea2cf32adf627a8421a"
-  integrity sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==
+"@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", "@types/babel__core@^7.1.7":
+"@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==
@@ -1896,6 +2147,17 @@
     "@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"
@@ -1922,10 +2184,48 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
-"@types/eslint@^7.2.4":
-  version "7.2.6"
-  resolved "https://registry.yarnpkg.com/@types/eslint/-/eslint-7.2.6.tgz#5e9aff555a975596c03a98b59ecd103decc70c3c"
-  integrity sha512-I+1sYH+NPQ3/tVqCeUSBwTE/0heyvtXqpIopUUArlBm0Kpocb8FbMa3AZ/ASKIFpN3rnEx932TTXDbt9OXsNDw==
+"@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/connect-history-api-fallback@^1.3.5":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
+  integrity sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==
+  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@*", "@types/eslint@^7.29.0 || ^8.4.1":
+  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" "*"
@@ -1940,13 +2240,29 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/glob@^7.1.1":
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.3.tgz#e6ba80f36b7daad2c685acd9266382e68985c183"
-  integrity sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==
+"@types/estree@^0.0.51":
+  version "0.0.51"
+  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.51.tgz#cfd70924a25a3fd32b218e5e420e6897e1ac4f40"
+  integrity sha512-CuPgU6f3eT/XgKKPqKd/gLZV1Xmvf1a2R5POBOGQa6uv82xpls89HU5zKeVoyR8XzHd1RGNOlQlvUe3CFkjWNQ==
+
+"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
+  version "4.17.30"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz#0f2f99617fa8f9696170c46152ccf7500b34ac04"
+  integrity sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==
   dependencies:
-    "@types/minimatch" "*"
     "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+
+"@types/express@*", "@types/express@^4.17.13":
+  version "4.17.13"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.13.tgz#a76e2995728999bab51a33fabce1d705a3709034"
+  integrity sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "^4.17.18"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
 
 "@types/graceful-fs@^4.1.2":
   version "4.1.4"
@@ -1955,10 +2271,17 @@
   dependencies:
     "@types/node" "*"
 
-"@types/html-minifier-terser@^5.0.0":
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50"
-  integrity sha512-giAlZwstKbmvMk1OO7WXSj4OZ0keXAcl2TQq4LWHiiPH2ByaH7WeUzng+Qej8UPxxv+8lRTuouo0iaNDBuzIBA==
+"@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-proxy@^1.17.8":
+  version "1.17.9"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.9.tgz#7f0e7931343761efde1e2bf48c40f02f3f75705a"
+  integrity sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==
+  dependencies:
+    "@types/node" "*"
 
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
@@ -1982,360 +2305,371 @@
   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", "@types/json-schema@^7.0.6":
   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.3":
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.3.tgz#bdfd69d61e464dcc81b25159c270d75a73c1a636"
+"@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/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
-"@types/minimatch@*":
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
-  integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
+"@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/node@*":
   version "14.14.10"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.10.tgz#5958a82e41863cfc71f2307b3748e3491ba03785"
   integrity sha512-J32dgx2hw8vXrSbu4ZlVhn1Nm3GbeCFNw2FWL8S5QKucHGY0cyNwjdQdO+KMBZ4wpmC7KhLCiNsdk1RFRIYUQQ==
 
-"@types/normalize-package-data@^2.4.0":
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
-  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
-
 "@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.0.0":
-  version "2.1.5"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.1.5.tgz#b6ab3bba29e16b821d84e09ecfaded462b816b00"
-  integrity sha512-UEyp8LwZ4Dg30kVU2Q3amHHyTn1jEdhCIE59ANed76GaT1Vp76DD3ZWSAxgCrw6wJ0TqeoBpqmfUHiUDPs//HQ==
+"@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/resolve@0.0.8":
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
-  integrity sha512-auApPaJf3NPfe18hSoJkp8EbZzer2ISk7o8mCC3M9he/a04+gbMF97NkpD2S8riMGvm4BMRI59/SZQSaLTKpsQ==
-  dependencies:
-    "@types/node" "*"
-
-"@types/source-list-map@*":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@types/source-list-map/-/source-list-map-0.1.2.tgz#0078836063ffaf17412349bba364087e0ac02ec9"
-  integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
-
-"@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/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/tapable@*", "@types/tapable@^1.0.5":
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74"
-  integrity sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==
+"@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/uglify-js@*":
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.11.1.tgz#97ff30e61a0aa6876c270b5f538737e2d6ab8ceb"
-  integrity sha512-7npvPKV+jINLu1SpSYVWG8KvyJBhBa8tmzMMdDoVc2pWUYHN8KIXlPJhjJ4LT97c4dXJA2SHL/q6ADbDriZN+Q==
+"@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:
-    source-map "^0.6.1"
+    "@types/react" "*"
 
-"@types/webpack-sources@*":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-2.1.0.tgz#8882b0bd62d1e0ce62f183d0d01b72e6e82e8c10"
-  integrity sha512-LXn/oYIpBeucgP1EIJbKQ2/4ZmpvRl+dlrFdX7+94SKRUV3Evy3FsfMZY318vGhkWUS5MPhtOM3w1/hCOAOXcg==
+"@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/node" "*"
-    "@types/source-list-map" "*"
-    source-map "^0.7.3"
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
 
-"@types/webpack@^4.41.8":
-  version "4.41.25"
-  resolved "https://registry.yarnpkg.com/@types/webpack/-/webpack-4.41.25.tgz#4d3b5aecc4e44117b376280fbfd2dc36697968c4"
-  integrity sha512-cr6kZ+4m9lp86ytQc1jPOJXgINQyz3kLLunZ57jznW+WIAL0JqZbGubQk4GlD42MuQL5JGOABrxdpqqWeovlVQ==
+"@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/anymatch" "*"
     "@types/node" "*"
-    "@types/tapable" "*"
-    "@types/uglify-js" "*"
-    "@types/webpack-sources" "*"
-    source-map "^0.6.0"
-
-"@types/yargs-parser@*":
-  version "13.1.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
-
-"@types/yargs@^15.0.0":
-  version "15.0.11"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-15.0.11.tgz#361d7579ecdac1527687bcebf9946621c12ab78c"
-  integrity sha512-jfcNBxHFYJ4nPIacsi3woz1+kvUO6s1CyeEhtnDHBjHUMNj5UlW2GynmnSgiJJEdNg9yW5C8lfoNRZrHGv5EqA==
-  dependencies:
-    "@types/yargs-parser" "*"
-
-"@typescript-eslint/eslint-plugin@^4.5.0":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.9.1.tgz#66758cbe129b965fe9c63b04b405d0cf5280868b"
-  integrity sha512-QRLDSvIPeI1pz5tVuurD+cStNR4sle4avtHhxA+2uyixWGFjKzJ+EaFVRW6dA/jOgjV5DTAjOxboQkRDE8cRlQ==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "4.9.1"
-    "@typescript-eslint/scope-manager" "4.9.1"
-    debug "^4.1.1"
-    functional-red-black-tree "^1.0.1"
-    regexpp "^3.0.0"
-    semver "^7.3.2"
-    tsutils "^3.17.1"
-
-"@typescript-eslint/experimental-utils@4.9.1", "@typescript-eslint/experimental-utils@^4.0.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.9.1.tgz#86633e8395191d65786a808dc3df030a55267ae2"
-  integrity sha512-c3k/xJqk0exLFs+cWSJxIjqLYwdHCuLWhnpnikmPQD2+NGAx9KjLYlBDcSI81EArh9FDYSL6dslAUSwILeWOxg==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/scope-manager" "4.9.1"
-    "@typescript-eslint/types" "4.9.1"
-    "@typescript-eslint/typescript-estree" "4.9.1"
-    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@^4.5.0":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.9.1.tgz#2d74c4db5dd5117379a9659081a4d1ec02629055"
-  integrity sha512-Gv2VpqiomvQ2v4UL+dXlQcZ8zCX4eTkoIW+1aGVWT6yTO+6jbxsw7yQl2z2pPl/4B9qa5JXeIbhJpONKjXIy3g==
-  dependencies:
-    "@typescript-eslint/scope-manager" "4.9.1"
-    "@typescript-eslint/types" "4.9.1"
-    "@typescript-eslint/typescript-estree" "4.9.1"
-    debug "^4.1.1"
-
-"@typescript-eslint/scope-manager@4.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.9.1.tgz#cc2fde310b3f3deafe8436a924e784eaab265103"
-  integrity sha512-sa4L9yUfD/1sg9Kl8OxPxvpUcqxKXRjBeZxBuZSSV1v13hjfEJkn84n0An2hN8oLQ1PmEl2uA6FkI07idXeFgQ==
-  dependencies:
-    "@typescript-eslint/types" "4.9.1"
-    "@typescript-eslint/visitor-keys" "4.9.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.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.9.1.tgz#a1a7dd80e4e5ac2c593bc458d75dd1edaf77faa2"
-  integrity sha512-fjkT+tXR13ks6Le7JiEdagnwEFc49IkOyys7ueWQ4O8k4quKPwPJudrwlVOJCUQhXo45PrfIvIarcrEjFTNwUA==
-
-"@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"
+"@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==
 
-"@typescript-eslint/typescript-estree@4.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.9.1.tgz#6e5b86ff5a5f66809e1f347469fadeec69ac50bf"
-  integrity sha512-bzP8vqwX6Vgmvs81bPtCkLtM/Skh36NE6unu6tsDeU/ZFoYthlTXbBmpIrvosgiDKlWTfb2ZpPELHH89aQjeQw==
-  dependencies:
-    "@typescript-eslint/types" "4.9.1"
-    "@typescript-eslint/visitor-keys" "4.9.1"
-    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"
+"@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==
 
-"@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==
+"@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:
-    eslint-visitor-keys "^1.1.0"
+    "@types/express" "*"
 
-"@typescript-eslint/visitor-keys@4.9.1":
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.9.1.tgz#d76374a58c4ead9e92b454d186fea63487b25ae1"
-  integrity sha512-9gspzc6UqLQHd7lXQS7oWs+hrYggspv/rk6zzEMhCbYwPE/sF7oxo7GAjkS35Tdlt7wguIG+ViWCPtVZHz/ybQ==
+"@types/serve-static@*", "@types/serve-static@^1.13.10":
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.0.tgz#c7930ff61afb334e121a9da780aac0d9b8f34155"
+  integrity sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==
   dependencies:
-    "@typescript-eslint/types" "4.9.1"
-    eslint-visitor-keys "^2.0.0"
+    "@types/mime" "*"
+    "@types/node" "*"
 
-"@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==
+"@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:
-    "@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==
+    "@types/node" "*"
 
-"@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==
+"@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==
 
-"@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==
+"@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:
-    "@webassemblyjs/wast-printer" "1.9.0"
+    "@types/jest" "*"
 
-"@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==
+"@types/trusted-types@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
 
-"@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==
+"@types/ws@^8.5.1":
+  version "8.5.3"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
+  integrity sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==
   dependencies:
-    "@webassemblyjs/ast" "1.9.0"
+    "@types/node" "*"
 
-"@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==
+"@types/yargs-parser@*":
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-13.1.0.tgz#c563aa192f39350a1d18da36c5a8da382bbd8228"
 
-"@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==
+"@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:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/helper-wasm-bytecode" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
+    "@types/yargs-parser" "*"
 
-"@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==
+"@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:
-    "@xtuc/ieee754" "^1.2.0"
+    "@types/yargs-parser" "*"
 
-"@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==
+"@typescript-eslint/eslint-plugin@^5.5.0":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.33.1.tgz#c0a480d05211660221eda963cc844732fe9b1714"
+  integrity sha512-S1iZIxrTvKkU3+m63YUOxYPKaP+yWDQrdhxTglVDVEVBf+aCSw85+BmJnyUaQQsk5TXFG/LpBu9fa+LrAQ91fQ==
   dependencies:
+    "@typescript-eslint/scope-manager" "5.33.1"
+    "@typescript-eslint/type-utils" "5.33.1"
+    "@typescript-eslint/utils" "5.33.1"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/experimental-utils@^5.0.0":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.33.1.tgz#5fa908addffb82ea8fb0e62cb47c387de1bff536"
+  integrity sha512-wk2o+4wojvKz/x3UCbsgjgXl0lyLPYQsfKP0MdRzj4jtsQr4bVtgWUWck6+N3GzThUTbUFyyKLduWPwePhh0xQ==
+  dependencies:
+    "@typescript-eslint/utils" "5.33.1"
+
+"@typescript-eslint/parser@^5.5.0":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.33.1.tgz#e4b253105b4d2a4362cfaa4e184e2d226c440ff3"
+  integrity sha512-IgLLtW7FOzoDlmaMoXdxG8HOCByTBXrB1V2ZQYSEV1ggMmJfAkMWTwUjjzagS6OkfpySyhKFkBw7A9jYmcHpZA==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.33.1"
+    "@typescript-eslint/types" "5.33.1"
+    "@typescript-eslint/typescript-estree" "5.33.1"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.33.1":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.33.1.tgz#8d31553e1b874210018ca069b3d192c6d23bc493"
+  integrity sha512-8ibcZSqy4c5m69QpzJn8XQq9NnqAToC8OdH/W6IXPXv83vRyEDPYLdjAlUx8h/rbusq6MkW4YdQzURGOqsn3CA==
+  dependencies:
+    "@typescript-eslint/types" "5.33.1"
+    "@typescript-eslint/visitor-keys" "5.33.1"
+
+"@typescript-eslint/type-utils@5.33.1":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.33.1.tgz#1a14e94650a0ae39f6e3b77478baff002cec4367"
+  integrity sha512-X3pGsJsD8OiqhNa5fim41YtlnyiWMF/eKsEZGsHID2HcDqeSC5yr/uLOeph8rNF2/utwuI0IQoAK3fpoxcLl2g==
+  dependencies:
+    "@typescript-eslint/utils" "5.33.1"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.33.1":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.33.1.tgz#3faef41793d527a519e19ab2747c12d6f3741ff7"
+  integrity sha512-7K6MoQPQh6WVEkMrMW5QOA5FO+BOwzHSNd0j3+BlBwd6vtzfZceJ8xJ7Um2XDi/O3umS8/qDX6jdy2i7CijkwQ==
+
+"@typescript-eslint/typescript-estree@5.33.1":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.33.1.tgz#a573bd360790afdcba80844e962d8b2031984f34"
+  integrity sha512-JOAzJ4pJ+tHzA2pgsWQi4804XisPHOtbvwUyqsuuq8+y5B5GMZs7lI1xDWs6V2d7gE/Ez5bTGojSK12+IIPtXA==
+  dependencies:
+    "@typescript-eslint/types" "5.33.1"
+    "@typescript-eslint/visitor-keys" "5.33.1"
+    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.33.1", "@typescript-eslint/utils@^5.13.0":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.33.1.tgz#171725f924fe1fe82bb776522bb85bc034e88575"
+  integrity sha512-uphZjkMaZ4fE8CR4dU7BquOV6u0doeQAr8n6cQenl/poMaIyJtBu8eys5uk6u5HiDH01Mj5lzbJ5SfeDz7oqMQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.33.1"
+    "@typescript-eslint/types" "5.33.1"
+    "@typescript-eslint/typescript-estree" "5.33.1"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
+"@typescript-eslint/visitor-keys@5.33.1":
+  version "5.33.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.33.1.tgz#0155c7571c8cd08956580b880aea327d5c34a18b"
+  integrity sha512-nwIxOK8Z2MPWltLKMLOEZwmfBZReqUdbEoHQXeCpa+sRVARe5twpJGHCB4dk9903Yaf0nMAlGbQfaAH92F60eg==
+  dependencies:
+    "@typescript-eslint/types" "5.33.1"
+    eslint-visitor-keys "^3.3.0"
+
+"@webassemblyjs/ast@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
+  integrity sha512-ukBh14qFLjxTQNTXocdyksN5QdM28S1CxHt2rdskFyL+xFV7VremuBLVbmCePj+URalXBENx/9Lm7lnhihtCSw==
+  dependencies:
+    "@webassemblyjs/helper-numbers" "1.11.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+
+"@webassemblyjs/floating-point-hex-parser@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.11.1.tgz#f6c61a705f0fd7a6aecaa4e8198f23d9dc179e4f"
+  integrity sha512-iGRfyc5Bq+NnNuX8b5hwBrRjzf0ocrJPI6GWFodBFzmFnyvrQ83SHKhmilCU/8Jv67i4GJZBMhEzltxzcNagtQ==
+
+"@webassemblyjs/helper-api-error@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-api-error/-/helper-api-error-1.11.1.tgz#1a63192d8788e5c012800ba6a7a46c705288fd16"
+  integrity sha512-RlhS8CBCXfRUR/cwo2ho9bkheSXG0+NwooXcc3PAILALf2QLdFyj7KGsKRbVc95hZnhnERon4kW/D3SZpp6Tcg==
+
+"@webassemblyjs/helper-buffer@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-buffer/-/helper-buffer-1.11.1.tgz#832a900eb444884cde9a7cad467f81500f5e5ab5"
+  integrity sha512-gwikF65aDNeeXa8JxXa2BAk+REjSyhrNC9ZwdT0f8jc4dQQeDQ7G4m0f2QCLPJiMTTO6wfDmRmj/pW0PsUvIcA==
+
+"@webassemblyjs/helper-numbers@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-numbers/-/helper-numbers-1.11.1.tgz#64d81da219fbbba1e3bd1bfc74f6e8c4e10a62ae"
+  integrity sha512-vDkbxiB8zfnPdNK9Rajcey5C0w+QJugEglN0of+kmO8l7lDb77AnlKYQF7aarZuCrv+l0UvqL+68gSDr3k9LPQ==
+  dependencies:
+    "@webassemblyjs/floating-point-hex-parser" "1.11.1"
+    "@webassemblyjs/helper-api-error" "1.11.1"
     "@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/helper-wasm-bytecode@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.11.1.tgz#f328241e41e7b199d0b20c18e88429c4433295e1"
+  integrity sha512-PvpoOGiJwXeTrSf/qfudJhwlvDQxFgelbMqtq52WWiXC6Xgg1IREdngmPN3bs4RoO83PnL/nFrxucXj1+BX62Q==
 
-"@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==
+"@webassemblyjs/helper-wasm-section@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.11.1.tgz#21ee065a7b635f319e738f0dd73bfbda281c097a"
+  integrity sha512-10P9No29rYX1j7F3EVPX3JvGPQPae+AomuSTPiF9eBQeChHI6iqjMIwR9JmOJXwpnn/oVGDk7I5IlskuMwU/pg==
   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/ast" "1.11.1"
+    "@webassemblyjs/helper-buffer" "1.11.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+    "@webassemblyjs/wasm-gen" "1.11.1"
 
-"@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==
+"@webassemblyjs/ieee754@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/ieee754/-/ieee754-1.11.1.tgz#963929e9bbd05709e7e12243a099180812992614"
+  integrity sha512-hJ87QIPtAMKbFq6CGTkZYJivEwZDbQUgYd3qKSadTNOhVY7p+gfP6Sr0lLRVTaG1JjFj+r3YchoqRYxNH3M0GQ==
   dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-buffer" "1.9.0"
-    "@webassemblyjs/wasm-gen" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
+    "@xtuc/ieee754" "^1.2.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==
+"@webassemblyjs/leb128@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/leb128/-/leb128-1.11.1.tgz#ce814b45574e93d76bae1fb2644ab9cdd9527aa5"
+  integrity sha512-BJ2P0hNZ0u+Th1YZXJpzW6miwqQUGcIHT1G/sf72gLVD9DZ5AdYTqPNbHZh6K1M5VmKvFXwGSWZADz+qBWxeRw==
   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"
+"@webassemblyjs/utf8@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/utf8/-/utf8-1.11.1.tgz#d1f8b764369e7c6e6bae350e854dec9a59f0a3ff"
+  integrity sha512-9kqcxAEdMhiwQkHpkNiorZzqpGrodQQ2IGrHHxCy+Ozng0ofyMA0lTqiLkVs1uzTRejX+/O0EOT7KxqVPuXosQ==
+
+"@webassemblyjs/wasm-edit@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-edit/-/wasm-edit-1.11.1.tgz#ad206ebf4bf95a058ce9880a8c092c5dec8193d6"
+  integrity sha512-g+RsupUC1aTHfR8CDgnsVRVZFJqdkFHpsHMfJuWQzWU3tvnLC07UqHICfP+4XyL2tnr1amvl1Sdp06TnYCmVkA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/helper-buffer" "1.11.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+    "@webassemblyjs/helper-wasm-section" "1.11.1"
+    "@webassemblyjs/wasm-gen" "1.11.1"
+    "@webassemblyjs/wasm-opt" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    "@webassemblyjs/wast-printer" "1.11.1"
+
+"@webassemblyjs/wasm-gen@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-gen/-/wasm-gen-1.11.1.tgz#86c5ea304849759b7d88c47a32f4f039ae3c8f76"
+  integrity sha512-F7QqKXwwNlMmsulj6+O7r4mmtAlCWfO/0HdgOxSklZfQcDu0TpLiD1mRt/zF25Bk59FIjEuGAIyn5ei4yMfLhA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+    "@webassemblyjs/ieee754" "1.11.1"
+    "@webassemblyjs/leb128" "1.11.1"
+    "@webassemblyjs/utf8" "1.11.1"
+
+"@webassemblyjs/wasm-opt@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-opt/-/wasm-opt-1.11.1.tgz#657b4c2202f4cf3b345f8a4c6461c8c2418985f2"
+  integrity sha512-VqnkNqnZlU5EB64pp1l7hdm3hmQw7Vgqa0KF/KCNO9sIpI6Fk6brDEiX+iCOYrvMuBWDws0NkTOxYEb85XQHHw==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/helper-buffer" "1.11.1"
+    "@webassemblyjs/wasm-gen" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+
+"@webassemblyjs/wasm-parser@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wasm-parser/-/wasm-parser-1.11.1.tgz#86ca734534f417e9bd3c67c7a1c75d8be41fb199"
+  integrity sha512-rrBujw+dJu32gYB7/Lup6UhdkPx9S9SnobZzRVL7VcBH9Bt9bCBLEuX/YXOOtBsOZ4NQrRykKhffRWHvigQvOA==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/helper-api-error" "1.11.1"
+    "@webassemblyjs/helper-wasm-bytecode" "1.11.1"
+    "@webassemblyjs/ieee754" "1.11.1"
+    "@webassemblyjs/leb128" "1.11.1"
+    "@webassemblyjs/utf8" "1.11.1"
+
+"@webassemblyjs/wast-printer@1.11.1":
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/@webassemblyjs/wast-printer/-/wast-printer-1.11.1.tgz#d0c73beda8eec5426f10ae8ef55cee5e7084c2f0"
+  integrity sha512-IQboUWM4eKzWW+N/jij2sRatKMh99QEelo3Eb2q0qXkvPRISAj8Qxtmw5itwqK+TTkBuUIE45AxYPToqPtL5gg==
+  dependencies:
+    "@webassemblyjs/ast" "1.11.1"
     "@xtuc/long" "4.2.2"
 
 "@xtuc/ieee754@^1.2.0":
@@ -2351,9 +2685,15 @@ abab@^2.0.3:
   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==
+
 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:
   version "1.3.5"
@@ -2362,13 +2702,13 @@ accepts@~1.3.4, accepts@~1.3.5:
     mime-types "~2.1.18"
     negotiator "0.6.1"
 
-accepts@~1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd"
-  integrity sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==
+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.24"
-    negotiator "0.6.2"
+    mime-types "~2.1.34"
+    negotiator "0.6.3"
 
 acorn-globals@^6.0.0:
   version "6.0.0"
@@ -2378,61 +2718,70 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.3.1:
-  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-import-assertions@^1.7.6:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz#ba2b5939ce62c238db6d93d81c9b111b29b855e9"
+  integrity sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==
 
-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-node@^1.8.2:
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
+  integrity sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==
+  dependencies:
+    acorn "^7.0.0"
+    acorn-walk "^7.0.0"
+    xtend "^4.0.2"
+
+acorn-walk@^7.0.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@^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==
-
-acorn@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.0.tgz#949d36f2c292535da602283586c2477c57eb2d6c"
-
-acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.0.0, 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==
 
-address@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/address/-/address-1.1.2.tgz#bf1116c9c758c51b7a933d296b72c221ed9428b6"
+acorn@^8.2.4, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
+  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"
 
-adjust-sourcemap-loader@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/adjust-sourcemap-loader/-/adjust-sourcemap-loader-3.0.0.tgz#5ae12fb5b7b1c585e80bbb5a63ec163a1a45e61e"
-  integrity sha512-YBrGyT2/uVQ/c6Rr+t6ZJXniY03YtHGMJQYal368burRGYKqhx9qGTWqcBU5s1CwYY9E/ri63RYyG1IacMZtqw==
+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"
 
-aggregate-error@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
-  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+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:
-    clean-stack "^2.0.0"
-    indent-string "^4.0.0"
-
-ajv-errors@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.0.tgz#ecf021fa108fd17dfb5e6b383f2dd233e31ffc59"
+    debug "4"
 
-ajv-keywords@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.2.0.tgz#e86b819c602cf8821ad637413698f1dec021847a"
+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"
@@ -2443,16 +2792,14 @@ ajv-keywords@^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:
-  version "6.5.4"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.5.4.tgz#247d5274110db653706b550fcc2b797ca28cfc59"
+ajv-keywords@^5.0.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 "^2.0.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
+    fast-deep-equal "^3.1.3"
 
-ajv@^6.10.0, ajv@^6.10.2:
+ajv@^6.10.0:
   version "6.10.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.2.tgz#d3cea04d6b017b2894ad69040fec8b623eb4bd52"
   dependencies:
@@ -2461,7 +2808,7 @@ ajv@^6.10.0, ajv@^6.10.2:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
+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==
@@ -2471,25 +2818,15 @@ ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-alphanum-sort@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
-
-ansi-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==
+ajv@^8.0.0, ajv@^8.6.0, ajv@^8.8.0:
+  version "8.11.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
+  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
   dependencies:
-    string-width "^3.0.0"
-
-ansi-colors@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.1.0.tgz#dcfaacc90ef9187de413ec3ef8d5eb981a98808f"
-
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
+    fast-deep-equal "^3.1.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+    uri-js "^4.2.2"
 
 ansi-escapes@^4.2.1:
   version "4.2.1"
@@ -2504,17 +2841,10 @@ ansi-escapes@^4.3.1:
   dependencies:
     type-fest "^0.11.0"
 
-ansi-html@0.0.7, ansi-html@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
-
-ansi-regex@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
+ansi-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@^4.1.0:
   version "4.1.0"
@@ -2525,7 +2855,17 @@ ansi-regex@^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.0, ansi-styles@^3.2.1:
+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:
@@ -2538,14 +2878,12 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   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"
-  dependencies:
-    micromatch "^3.1.4"
-    normalize-path "^2.1.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, anymatch@~3.1.1:
+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==
@@ -2553,16 +2891,18 @@ anymatch@^3.0.3, anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-aproba@^1.0.3, aproba@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/aproba/-/aproba-1.2.0.tgz#6802e6264efd18c790a1b0d517f0f2627bf2c94a"
-
-are-we-there-yet@~1.1.2:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
+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:
-    delegates "^1.0.0"
-    readable-stream "^2.0.6"
+    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"
@@ -2570,6 +2910,11 @@ argparse@^1.0.7:
   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@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b"
@@ -2578,29 +2923,19 @@ aria-query@^4.2.2:
     "@babel/runtime" "^7.10.2"
     "@babel/runtime-corejs3" "^7.10.2"
 
-arity-n@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/arity-n/-/arity-n-1.0.4.tgz#d9e76b11733e08569c0847ae7b39b2860b30b745"
-
-arr-diff@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
-
-arr-flatten@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/arr-flatten/-/arr-flatten-1.1.0.tgz#36048bbff4e7b47e136644316c99669ea5ae91f1"
-
-arr-union@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/arr-union/-/arr-union-3.1.0.tgz#e39b09aea9def866a8f206e288af63919bae39c4"
+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-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-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-includes@^3.1.1:
   version "3.1.2"
@@ -2613,199 +2948,108 @@ array-includes@^3.1.1:
     get-intrinsic "^1.0.1"
     is-string "^1.0.5"
 
-array-union@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/array-union/-/array-union-1.0.2.tgz#9a34410e4f4e3da23dea375be5be70f24778ec39"
+array-includes@^3.1.4, array-includes@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.5.tgz#2c320010db8d31031fd2a5f6b3bbd4b1aad31bdb"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
   dependencies:
-    array-uniq "^1.0.1"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+    get-intrinsic "^1.1.1"
+    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-uniq@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/array-uniq/-/array-uniq-1.0.3.tgz#af6ac877a25cc7f74e058894753858dfdb24fdb6"
-
-array-unique@^0.3.2:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
-
-array.prototype.flat@^1.2.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz#6ef638b43312bd401b4c6199fdec7e2dc9e9a123"
-  integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
+array.prototype.flat@^1.2.5:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
+  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
 
-array.prototype.flatmap@^1.2.3:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz#94cfd47cc1556ec0747d97f7c7738c58122004c9"
-  integrity sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==
+array.prototype.flatmap@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    function-bind "^1.1.1"
-
-arrify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/arrify/-/arrify-2.0.1.tgz#c9655e9331e0abcd588d2a7cad7e9956f66701fa"
-  integrity sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
 
 asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
 
-asn1.js@^4.0.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
-  dependencies:
-    bn.js "^4.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-asn1@~0.2.3:
-  version "0.2.4"
-  resolved "https://registry.yarnpkg.com/asn1/-/asn1-0.2.4.tgz#8d2475dfab553bb33e77b54e59e880bb8ce23136"
-  dependencies:
-    safer-buffer "~2.1.0"
-
-assert-plus@1.0.0, assert-plus@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
-
-assert@^1.1.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/assert/-/assert-1.4.1.tgz#99912d591836b5a6f5b345c0f07eefc08fc65d91"
-  dependencies:
-    util "0.10.3"
-
-assign-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
-
 ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
 
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
+async@^3.2.3:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.4.tgz#2d22e00f8cddeb5fde5dd33522b56d1cf569a81c"
+  integrity sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==
 
-async-each@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
 
-async-limiter@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8"
-
-async@^2.6.2:
-  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"
-
-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:
+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.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
-
-autoprefixer@^9.6.1:
-  version "9.7.1"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.1.tgz#9ffc44c55f5ca89253d9bb7186cefb01ef57747f"
+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.7.2"
-    caniuse-lite "^1.0.30001006"
-    chalk "^2.4.2"
+    browserslist "^4.21.3"
+    caniuse-lite "^1.0.30001373"
+    fraction.js "^4.2.0"
     normalize-range "^0.1.2"
-    num2fraction "^1.2.2"
-    postcss "^7.0.21"
-    postcss-value-parser "^4.0.2"
-
-aws-sign2@~0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.7.0.tgz#b46e890934a9591f2d2f6f86d7e6a9f1b3fe76a8"
-
-aws4@^1.8.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
 
-axe-core@^4.0.2:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.1.tgz#70a7855888e287f7add66002211a423937063eaf"
-  integrity sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==
+axe-core@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.3.tgz#11c74d23d5013c0fa5d183796729bc3482bd2f6f"
+  integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
 
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
   integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
 
-babel-eslint@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
-  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.7.0"
-    "@babel/traverse" "^7.7.0"
-    "@babel/types" "^7.7.0"
-    eslint-visitor-keys "^1.0.0"
-    resolve "^1.12.0"
-
-babel-eslint@^8.2.3:
-  version "8.2.6"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.6.tgz#6270d0c73205628067c0f7ae1693a9e797acefd9"
-  dependencies:
-    "@babel/code-frame" "7.0.0-beta.44"
-    "@babel/traverse" "7.0.0-beta.44"
-    "@babel/types" "7.0.0-beta.44"
-    babylon "7.0.0-beta.44"
-    eslint-scope "3.7.1"
-    eslint-visitor-keys "^1.0.0"
-
-babel-extract-comments@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
-  dependencies:
-    babylon "^6.18.0"
-
-babel-jest@^26.6.0, babel-jest@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
-  integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
+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" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/babel__core" "^7.1.7"
-    babel-plugin-istanbul "^6.0.0"
-    babel-preset-jest "^26.6.2"
+    "@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.4"
+    graceful-fs "^4.2.9"
     slash "^3.0.0"
 
-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==
+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 "^2.1.0"
-    loader-utils "^1.4.0"
-    mkdirp "^0.5.3"
-    pify "^4.0.1"
+    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:
@@ -2815,55 +3059,69 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-istanbul@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
-  integrity sha512-AF55rZXpe7trmEylbaE1Gv54wn6rwU03aptvRoVIGP8YykoSxqdVLV1TfwflBCE/QtHmqtP8SWlTENqbK8GCSQ==
+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 "^4.0.0"
+    istanbul-lib-instrument "^5.0.4"
     test-exclude "^6.0.0"
 
-babel-plugin-jest-hoist@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-26.6.2.tgz#8185bd030348d254c6d7dd974355e6a28b21e62d"
-  integrity sha512-PO9t0697lNTmcEHH69mdtYiOIkkOlj9fySqfO3K1eCcdISevLAE0xY59VLLUj0SoiPiTX/JU2CYFpILydUa5Lw==
+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@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==
+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.7.2"
-    cosmiconfig "^6.0.0"
-    resolve "^1.12.0"
+    "@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-named-asset-import@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz#156cd55d3f1228a5765774340937afc8398067dd"
-  integrity sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw==
+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-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-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-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"
+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-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.26.0"
+    "@babel/helper-define-polyfill-provider" "^0.3.2"
 
-babel-plugin-transform-react-remove-prop-types@0.4.24:
+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"
@@ -2883,80 +3141,44 @@ babel-preset-current-node-syntax@^1.0.0:
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-syntax-top-level-await" "^7.8.3"
 
-babel-preset-jest@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-26.6.2.tgz#747872b1171df032252426586881d62d31798fee"
-  integrity sha512-YvdtlVm9t3k777c5NPQIv6cxFFFapys25HiUmuSgHwIZhfifweR5c5Sf5nwE3MAbfu327CYSvps8Yx6ANLyleQ==
+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 "^26.6.2"
+    babel-plugin-jest-hoist "^27.5.1"
     babel-preset-current-node-syntax "^1.0.0"
 
-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"
-
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babylon@7.0.0-beta.44:
-  version "7.0.0-beta.44"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
+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.0.2:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.0.tgz#cab1e6118f051095e58b5281aea8c1cd22bfc0e3"
-
-base@^0.11.1:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/base/-/base-0.11.2.tgz#7bde5ced145b6d551a90db87f83c558b4eb48a8f"
-  dependencies:
-    cache-base "^1.0.1"
-    class-utils "^0.3.5"
-    component-emitter "^1.2.1"
-    define-property "^1.0.0"
-    isobject "^3.0.1"
-    mixin-deep "^1.2.0"
-    pascalcase "^0.1.1"
-
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
 
-bcrypt-pbkdf@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.2.tgz#a4301d389b6a43f9b67ff3ca11a3f6637e360e9e"
-  dependencies:
-    tweetnacl "^0.14.3"
-
 bfj@^7.0.2:
   version "7.0.2"
   resolved "https://registry.yarnpkg.com/bfj/-/bfj-7.0.2.tgz#1988ce76f3add9ac2913fd8ba47aad9e651bfbb2"
@@ -2967,18 +3189,10 @@ bfj@^7.0.2:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
-big.js@^3.1.3:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328"
 
-binary-extensions@^1.0.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.12.0.tgz#c2d780f53d45bba8317a8902d4ceeaf3a6385b14"
-
 binary-extensions@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
@@ -2988,55 +3202,38 @@ bluebird@^3.5.5:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
 
-bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
-  version "4.11.8"
-  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
-
-body-parser@1.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==
+body-parser@1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
   dependencies:
-    bytes "3.1.0"
+    bytes "3.1.2"
     content-type "~1.0.4"
     debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.7.2"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
     iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
+    on-finished "2.4.1"
+    qs "6.10.3"
+    raw-body "2.5.1"
+    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"
+bonjour-service@^1.0.11:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.13.tgz#4ac003dc1626023252d58adf2946f57e5da450c1"
+  integrity sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==
   dependencies:
-    array-flatten "^2.1.0"
-    deep-equal "^1.0.1"
+    array-flatten "^2.1.2"
     dns-equal "^1.0.0"
-    dns-txt "^2.0.2"
-    multicast-dns "^6.0.1"
-    multicast-dns-service-types "^1.1.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"
 
-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"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -3044,100 +3241,25 @@ brace-expansion@^1.1.7:
     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"
-  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:
+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.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"
 
-brorand@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
-
 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==
 
-browserify-aes@^1.0.0, browserify-aes@^1.0.4:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-aes/-/browserify-aes-1.2.0.tgz#326734642f403dabc3003209853bb70ad428ef48"
-  dependencies:
-    buffer-xor "^1.0.3"
-    cipher-base "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.3"
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-browserify-cipher@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-cipher/-/browserify-cipher-1.0.1.tgz#8d6474c1b870bfdabcd3bcfcc1934a10e94f15f0"
-  dependencies:
-    browserify-aes "^1.0.4"
-    browserify-des "^1.0.0"
-    evp_bytestokey "^1.0.0"
-
-browserify-des@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/browserify-des/-/browserify-des-1.0.2.tgz#3af4f1f59839403572f1c66204375f7a7f703e9c"
-  dependencies:
-    cipher-base "^1.0.1"
-    des.js "^1.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
-
-browserify-rsa@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
-  dependencies:
-    bn.js "^4.1.0"
-    randombytes "^2.0.1"
-
-browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
-
-browserify-zlib@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/browserify-zlib/-/browserify-zlib-0.2.0.tgz#2869459d9aa3be245fe8fe2ca1f46e2e7f54d73f"
-  dependencies:
-    pako "~1.0.5"
-
-browserslist@4.14.2:
-  version "4.14.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.14.2.tgz#1b3cec458a1ba87588cc5e9be62f19b6d48813ce"
-  integrity sha512-HI4lPveGKUR0x2StIz+2FXfDk9SfVMrxn6PLh1JeGUwcuoDkdKZebWiyLRJ68iIPDpMI4JLVDf7S7XzslgWOhw==
-  dependencies:
-    caniuse-lite "^1.0.30001125"
-    electron-to-chromium "^1.3.564"
-    escalade "^3.0.2"
-    node-releases "^1.1.61"
-
 browserslist@^4.0.0:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.1.2.tgz#632feb46d1cbdd6bb1a6eb660eff68f2345ae7e7"
@@ -3146,7 +3268,7 @@ browserslist@^4.0.0:
     electron-to-chromium "^1.3.73"
     node-releases "^1.0.0-alpha.12"
 
-browserslist@^4.14.5, browserslist@^4.15.0, browserslist@^4.6.2:
+browserslist@^4.14.5:
   version "4.15.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.15.0.tgz#3d48bbca6a3f378e86102ffd017d9a03f122bdb0"
   integrity sha512-IJ1iysdMkGmjjYeRlDU8PQejVwxvVO5QOfXH7ylW31GO6LwNRSmm/SgRXtNsEXqMLl2e+2H5eEJ7sfynF8TCaQ==
@@ -3157,13 +3279,15 @@ browserslist@^4.14.5, browserslist@^4.15.0, browserslist@^4.6.2:
     escalade "^3.1.1"
     node-releases "^1.1.67"
 
-browserslist@^4.6.4, browserslist@^4.7.2:
-  version "4.7.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.2.tgz#1bb984531a476b5d389cedecb195b2cd69fb1348"
+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.30001004"
-    electron-to-chromium "^1.3.295"
-    node-releases "^1.1.38"
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
 
 bser@^2.0.0:
   version "2.0.0"
@@ -3175,113 +3299,19 @@ buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
 
-buffer-indexof@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
-
-buffer-xor@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
-
-buffer@^4.3.0:
-  version "4.9.1"
-  resolved "https://registry.yarnpkg.com/buffer/-/buffer-4.9.1.tgz#6d1bb601b07a4efced97094132093027c95bc298"
-  dependencies:
-    base64-js "^1.0.2"
-    ieee754 "^1.1.4"
-    isarray "^1.0.0"
-
-builtin-modules@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-1.1.1.tgz#270f076c5a72c02f5b65a47df94c5fe3a278892f"
-
 builtin-modules@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
   integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
 
-builtin-status-codes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
-bytes@3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
-  integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-cacache@^12.0.2:
-  version "12.0.3"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-12.0.3.tgz#be99abba4e1bf5df461cd5a2c1071fc432573390"
-  dependencies:
-    bluebird "^3.5.5"
-    chownr "^1.1.1"
-    figgy-pudding "^3.5.1"
-    glob "^7.1.4"
-    graceful-fs "^4.1.15"
-    infer-owner "^1.0.3"
-    lru-cache "^5.1.1"
-    mississippi "^3.0.0"
-    mkdirp "^0.5.1"
-    move-concurrently "^1.0.1"
-    promise-inflight "^1.0.1"
-    rimraf "^2.6.3"
-    ssri "^6.0.1"
-    unique-filename "^1.1.1"
-    y18n "^4.0.0"
-
-cacache@^15.0.5:
-  version "15.0.5"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-15.0.5.tgz#69162833da29170d6732334643c60e005f5f17d0"
-  integrity sha512-lloiL22n7sOjEEXdL8NAjTgv9a1u43xICE9/203qonkZUCj5X1UEWIdf2/Y0d6QcCtMzbKQyhrcDbdvlZTs/+A==
-  dependencies:
-    "@npmcli/move-file" "^1.0.1"
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    glob "^7.1.4"
-    infer-owner "^1.0.4"
-    lru-cache "^6.0.0"
-    minipass "^3.1.1"
-    minipass-collect "^1.0.2"
-    minipass-flush "^1.0.5"
-    minipass-pipeline "^1.2.2"
-    mkdirp "^1.0.3"
-    p-map "^4.0.0"
-    promise-inflight "^1.0.1"
-    rimraf "^3.0.2"
-    ssri "^8.0.0"
-    tar "^6.0.2"
-    unique-filename "^1.1.1"
-
-cache-base@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2"
-  dependencies:
-    collection-visit "^1.0.0"
-    component-emitter "^1.2.1"
-    get-value "^2.0.6"
-    has-value "^1.0.0"
-    isobject "^3.0.1"
-    set-value "^2.0.0"
-    to-object-path "^0.3.0"
-    union-value "^1.0.0"
-    unset-value "^1.0.0"
-
-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"
+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"
@@ -3291,11 +3321,19 @@ call-bind@^1.0.0:
     function-bind "^1.1.1"
     get-intrinsic "^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"
+
 callsites@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
 
-camel-case@^4.1.1:
+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==
@@ -3303,20 +3341,26 @@ camel-case@^4.1.1:
     pascal-case "^3.1.2"
     tslib "^2.0.3"
 
-camelcase@5.3.1, camelcase@^5.3.1:
+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@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
-
-camelcase@^6.0.0, camelcase@^6.1.0, camelcase@^6.2.0:
+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"
@@ -3330,37 +3374,20 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000888:
   version "1.0.30000889"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000889.tgz#53e266c83e725ad3bd2e4a3ea76d5031a8aa4c3e"
 
-caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001004, caniuse-lite@^1.0.30001006:
-  version "1.0.30001008"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001008.tgz#b8841b1df78a9f5ed9702537ef592f1f8772c0d9"
-
-caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.30001164:
+caniuse-lite@^1.0.30001164:
   version "1.0.30001165"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001165.tgz#32955490d2f60290bb186bb754f2981917fa744f"
   integrity sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==
 
-capture-exit@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
-  dependencies:
-    rsvp "^4.8.4"
-
-case-sensitive-paths-webpack-plugin@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.3.0.tgz#23ac613cc9a856e4f88ff8bb73bbb5e989825cf7"
-  integrity sha512-/4YgnZS8y1UXXmC02xD5rRrBEu6T5ub+mQHLNRj0fzTRbgdBYhsNo2V5EqwgqrExjxsjtF/OpAKAMkKsxbD5XQ==
-
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
+caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
+  version "1.0.30001378"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001378.tgz#3d2159bf5a8f9ca093275b0d3ecc717b00f27b67"
+  integrity sha512-JVQnfoO7FK7WvU4ZkBRbPjaot4+YqxogSDosHv0Hv5mWpUESmN+UubMU6L/hGz8QlQ2aY5U0vR6MOs6j/CXpNA==
 
-chalk@2.4.2, chalk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
-  dependencies:
-    ansi-styles "^3.2.1"
-    escape-string-regexp "^1.0.5"
-    supports-color "^5.3.0"
+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"
@@ -3386,62 +3413,43 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.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.1"
+  resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-2.0.1.tgz#6dafdb25f9d3349914079f010ba8d0e6ff9cd01e"
+  integrity sha512-oSvEeo6ZUD7NepqAat3RqoucZ5SeqLJgOvVIwkafu6IP3V0pO38s/ypdVUmDDK6qIIHNlYHJAKX9E7R7HoKElw==
+
 check-types@^11.1.1:
   version "11.1.2"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-11.1.2.tgz#86a7c12bf5539f6324eb0e70ca8896c0e38f3e2f"
   integrity sha512-tzWzvgePgLORb9/3a0YenggReLKAIb2owL03H2Xdoe5pKcUyWRSEQ8xfCar8t2SIAuEDwtmx2da1YB52YuHQMQ==
 
-chokidar@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
-  integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==
+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 "^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.4.3"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.3.tgz#c1df38231448e45ca4ac588e6c79573ba6a57d5b"
-  integrity sha512-DtM3g7juCXQxFVSNPNByEC2+NImtBuxQQvWlHunpJIS5Ocr0lG306cC7FCi7cEA0fzmybPUIl4txBIobk1gGOQ==
-  dependencies:
-    anymatch "~3.1.1"
+    anymatch "~3.1.2"
     braces "~3.0.2"
-    glob-parent "~5.1.0"
+    glob-parent "~5.1.2"
     is-binary-path "~2.1.0"
     is-glob "~4.0.1"
     normalize-path "~3.0.0"
-    readdirp "~3.5.0"
+    readdirp "~3.6.0"
   optionalDependencies:
-    fsevents "~2.1.2"
-
-chownr@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
-
-chownr@^1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.3.tgz#42d837d5239688d55f303003a508230fa6727142"
-
-chownr@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
-  integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
+    fsevents "~2.3.2"
 
 chrome-trace-event@^1.0.2:
   version "1.0.2"
@@ -3449,87 +3457,31 @@ chrome-trace-event@^1.0.2:
   dependencies:
     tslib "^1.9.0"
 
-ci-info@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
-
-cipher-base@^1.0.0, cipher-base@^1.0.1, cipher-base@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/cipher-base/-/cipher-base-1.0.4.tgz#8760e4ecc272f4c363532f926d874aae2c1397de"
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-cjs-module-lexer@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-0.6.0.tgz#4186fcca0eae175970aee870b9fe2d6cf8d5655f"
-  integrity sha512-uc2Vix1frTfnuzxxu1Hp4ktSvM3QaI4oXl4ZUqL1wjTu/BGki9TrCWoqLTg/drR1KwAEarXuRFCG2Svr1GxPFw==
+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==
 
-class-utils@^0.3.5:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
-  dependencies:
-    arr-union "^3.1.0"
-    define-property "^0.2.5"
-    isobject "^3.0.0"
-    static-extend "^0.1.1"
+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@^4.2.3:
-  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==
+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"
 
-clean-stack@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
-  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
-
-cli-boxes@^2.2.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
-  integrity sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==
-
-cliui@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
-  dependencies:
-    string-width "^2.1.1"
-    strip-ansi "^4.0.0"
-    wrap-ansi "^2.0.0"
-
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-5.0.0.tgz#deefcfdb2e800784aa34f46fa08e06851c7bbbc5"
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
-cliui@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-6.0.0.tgz#511d702c0c4e41ca156d7d0e96021f23e13225b1"
-  integrity sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
+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 "^6.2.0"
-
-clone-deep@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/clone-deep/-/clone-deep-4.0.1.tgz#c19fd9bdbbf85942b4fd979c84dcf7d5f07c2387"
-  dependencies:
-    is-plain-object "^2.0.4"
-    kind-of "^6.0.2"
-    shallow-clone "^3.0.0"
-
-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"
+    wrap-ansi "^7.0.0"
 
 co@^4.6.0:
   version "4.6.0"
@@ -3543,29 +3495,12 @@ coa@^2.0.2:
     chalk "^2.4.1"
     q "^1.1.2"
 
-coa@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.1.tgz#f3f8b0b15073e35d70263fb1042cb2c023db38af"
-  dependencies:
-    q "^1.1.2"
-
-code-point-at@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
-
 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==
 
-collection-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
-  dependencies:
-    map-visit "^1.0.0"
-    object-visit "^1.0.0"
-
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   dependencies:
@@ -3582,42 +3517,29 @@ color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
-color-name@^1.0.0, color-name@~1.1.4:
+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"
 
-color-string@^1.5.2:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
-color@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.0.0.tgz#d920b4328d534a3ac8295d68f7bd4ba6c427be9a"
-  dependencies:
-    color-convert "^1.9.1"
-    color-string "^1.5.2"
+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@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
   integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
 
-colors@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
-
-combined-stream@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
-  dependencies:
-    delayed-stream "~1.0.0"
+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.6:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.7.tgz#2d1d24317afb8abe95d6d2c0b07b57813539d828"
+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"
 
@@ -3625,10 +3547,20 @@ commander@^2.20.0:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
 
-commander@^4.1.1:
-  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-path-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
+  integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==
 
 common-tags@^1.8.0:
   version "1.8.0"
@@ -3638,16 +3570,6 @@ commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
 
-component-emitter@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.2.1.tgz#137918d6d78283f7df7a6b7c5a63e140e69425e6"
-
-compose-function@3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
-  dependencies:
-    arity-n "^1.0.4"
-
 compressible@~2.0.16:
   version "2.0.18"
   resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -3672,127 +3594,69 @@ concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
 
-concat-stream@^1.5.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
-  dependencies:
-    buffer-from "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^2.2.2"
-    typedarray "^0.0.6"
-
-concurrently@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/concurrently/-/concurrently-5.0.0.tgz#99c7567d009411fbdc98299d553c4b99a978612c"
-  integrity sha512-1yDvK8mduTIdxIxV9C60KoiOySUl/lfekpdbI+U5GXaPrgdffEavFa9QZB3vh68oWOpbCC+TuvxXV9YRPMvUrA==
-  dependencies:
-    chalk "^2.4.2"
-    date-fns "^2.0.1"
-    lodash "^4.17.15"
-    read-pkg "^4.0.1"
-    rxjs "^6.5.2"
+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 "^4.5.0"
-    tree-kill "^1.2.1"
-    yargs "^12.0.5"
-
-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"
-
-confusing-browser-globals@^1.0.10:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.10.tgz#30d1e7f3d1b882b25ec4933d1d1adac353d20a59"
-  integrity sha512-gNld/3lySHwuhaVluJUKLePYirM3QNCKzVxqAdhJII9/WXKVX5PURzMVJspS1jTslSqjeuG4KMVTSouit5YPHA==
-
-connect-history-api-fallback@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"
-  integrity sha512-e54B99q/OUoH64zYYRf3HBP5z24G38h5D3qXu23JGRoigpX5Ss4r9ZnDk3g0Z8uQC2x2lPaJ+UlWBc1ZWBWdLg==
-
-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"
+    supports-color "^8.1.0"
+    tree-kill "^1.2.2"
+    yargs "^17.3.1"
 
-console-control-strings@^1.0.0, console-control-strings@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
-
-constants-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
+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==
 
-contains-path@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
+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.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.3.tgz#e130caf7e7279087c5616c2007d0485698984fbd"
-  integrity sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==
+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.1.2"
+    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"
 
-convert-source-map@1.7.0, 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"
-
-convert-source-map@^0.3.3:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-0.3.5.tgz#f1d802950af7dd2631a1febe0596550c86ab3190"
-
 convert-source-map@^1.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"
+
 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.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
-  integrity sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==
-
-copy-concurrently@^1.0.0:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
-  dependencies:
-    aproba "^1.1.1"
-    fs-write-stream-atomic "^1.0.8"
-    iferr "^0.1.5"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.0"
-
-copy-descriptor@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
 
-core-js-compat@^3.6.2, core-js-compat@^3.7.0:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.8.1.tgz#8d1ddd341d660ba6194cbe0ce60f4c794c87a36e"
-  integrity sha512-a16TLmy9NVD1rkjUGbwuyWkiDoN0FDpAwrfLONvHFQx0D9k7J9y0srwMT8QP/Z6HE3MIFaVynEeYwZwPX1o5RQ==
+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.15.0"
+    browserslist "^4.21.3"
     semver "7.0.0"
 
 core-js-pure@^3.0.0:
@@ -3800,36 +3664,20 @@ core-js-pure@^3.0.0:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.8.1.tgz#23f84048f366fdfcf52d3fd1c68fec349177d119"
   integrity sha512-Se+LaxqXlVXGvmexKGPvnUIYC1jwXu1H6Pkyb3uBM5d8/NELMYCHs/4/roD7721NxrTLyv7e5nXd5/QLBO+10g==
 
-core-js@^2.4.0:
-  version "2.5.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
+core-js-pure@^3.8.1:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.24.1.tgz#8839dde5da545521bf282feb7dc6d0b425f39fd3"
+  integrity sha512-r1nJk41QLLPyozHUUPmILCEMtMw24NG4oWK6RbsDdjzQgg9ZvrUsPBj1MnG0wXXp1DCDU6j+wUvEmBSrtRbLXg==
 
-core-js@^3.6.5:
-  version "3.8.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.8.1.tgz#f51523668ac8a294d1285c3b9db44025fda66d47"
-  integrity sha512-9Id2xHY1W7m8hCl8NkhQn5CufmF/WuR30BTRewvCXc1aZd3kMECwNZ69ndLbekKfakw9Rf2Xyc+QR6E7Gg+obg==
+core-js@^3.19.2:
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.24.1.tgz#cf7724d41724154010a6576b7b57d94c5d66e64f"
+  integrity sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==
 
-core-util-is@1.0.2, core-util-is@~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"
 
-cosmiconfig@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-4.0.0.tgz#760391549580bbd2df1e562bc177b13c290972dc"
-  dependencies:
-    is-directory "^0.3.1"
-    js-yaml "^3.9.0"
-    parse-json "^4.0.0"
-    require-from-string "^2.0.1"
-
-cosmiconfig@^5.0.0:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.0.6.tgz#dca6cf680a0bd03589aff684700858c81abeeb39"
-  dependencies:
-    is-directory "^0.3.1"
-    js-yaml "^3.9.0"
-    parse-json "^4.0.0"
-
 cosmiconfig@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
@@ -3852,35 +3700,7 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-create-ecdh@^4.0.0:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.3.tgz#c9111b6f33045c4697f144787f9254cdc77c45ff"
-  dependencies:
-    bn.js "^4.1.0"
-    elliptic "^6.0.0"
-
-create-hash@^1.1.0, create-hash@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
-  dependencies:
-    cipher-base "^1.0.1"
-    inherits "^2.0.1"
-    md5.js "^1.3.4"
-    ripemd160 "^2.0.1"
-    sha.js "^2.4.0"
-
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
-  version "1.1.7"
-  resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
-  dependencies:
-    cipher-base "^1.0.3"
-    create-hash "^1.1.0"
-    inherits "^2.0.1"
-    ripemd160 "^2.0.0"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
-cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2:
+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==
@@ -3889,107 +3709,65 @@ cross-spawn@7.0.3, cross-spawn@^7.0.0, cross-spawn@^7.0.2:
     shebang-command "^2.0.0"
     which "^2.0.1"
 
-cross-spawn@^6.0.0:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
-crypto-browserify@^3.11.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/crypto-browserify/-/crypto-browserify-3.12.0.tgz#396cf9f3137f03e4b8e532c58f698254e00f80ec"
-  dependencies:
-    browserify-cipher "^1.0.0"
-    browserify-sign "^4.0.0"
-    create-ecdh "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.0"
-    diffie-hellman "^5.0.0"
-    inherits "^2.0.1"
-    pbkdf2 "^3.0.3"
-    public-encrypt "^4.0.0"
-    randombytes "^2.0.0"
-    randomfill "^1.0.3"
-
-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=
-
 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@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz#dfdefd3254bf8a82027993674ccf35483bfcb3c5"
-  dependencies:
-    postcss "^7.0.5"
-
-css-color-names@0.0.4, css-color-names@^0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
-
-css-declaration-sorter@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-4.0.1.tgz#c198940f63a76d7e36c1e71018b001721054cb22"
+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 "^7.0.1"
-    timsort "^0.3.0"
+    postcss-selector-parser "^6.0.9"
 
-css-has-pseudo@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz#3c642ab34ca242c59c41a125df9105841f6966ee"
-  dependencies:
-    postcss "^7.0.6"
-    postcss-selector-parser "^5.0.0-rc.4"
+css-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-loader@4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-4.3.0.tgz#c888af64b2a5b2e85462c72c0f4a85c7e2e0821e"
-  integrity sha512-rdezjCjScIrsL8BSYszgT4s476IcNKt6yX69t0pHjJVnPUTDpn4WfIpDQTN3wCJvUvfsz/mFjuGOekf3PY3NUg==
-  dependencies:
-    camelcase "^6.0.0"
-    cssesc "^3.0.0"
-    icss-utils "^4.1.1"
-    loader-utils "^2.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.1"
-    semver "^7.3.2"
+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@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
-  dependencies:
-    postcss "^7.0.5"
+css-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-base-adapter@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/css-select-base-adapter/-/css-select-base-adapter-0.1.0.tgz#0102b3d14630df86c3eb9fa9f5456270106cf990"
-
-css-select@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
-  dependencies:
-    boolbase "~1.0.0"
-    css-what "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
-
 css-select@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.0.0.tgz#7aa2921392114831f68db175c0b6a555df74bbd5"
@@ -3999,19 +3777,16 @@ css-select@^2.0.0:
     domutils "^1.7.0"
     nth-check "^1.0.1"
 
-css-tree@1.0.0-alpha.28:
-  version "1.0.0-alpha.28"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.28.tgz#8e8968190d886c9477bc8d61e96f61af3f7ffa7f"
-  dependencies:
-    mdn-data "~1.1.0"
-    source-map "^0.5.3"
-
-css-tree@1.0.0-alpha.29:
-  version "1.0.0-alpha.29"
-  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.29.tgz#3fa9d4ef3142cbd1c301e7664c1f352bd82f5a39"
+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:
-    mdn-data "~1.1.0"
-    source-map "^0.5.3"
+    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"
@@ -4020,110 +3795,85 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
-css-unit-converter@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
-
-css-url-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-1.1.0.tgz#83834230cc9f74c457de59eebd1543feeb83b7ec"
+css-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.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
 
-css@^2.0.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
-  dependencies:
-    inherits "^2.0.3"
-    source-map "^0.6.1"
-    source-map-resolve "^0.5.2"
-    urix "^0.1.0"
-
-cssdb@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-4.4.0.tgz#3bf2f2a68c10f5c6a08abd92378331ee803cddb0"
+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@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-1.0.1.tgz#ef7bd8d0229ed6a3a7051ff7771265fe7330e0a8"
+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==
 
-cssesc@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703"
+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@^4.0.7:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.7.tgz#51ec662ccfca0f88b396dcd9679cdb931be17f76"
-  dependencies:
-    css-declaration-sorter "^4.0.1"
-    cssnano-util-raw-cache "^4.0.1"
-    postcss "^7.0.0"
-    postcss-calc "^7.0.1"
-    postcss-colormin "^4.0.3"
-    postcss-convert-values "^4.0.1"
-    postcss-discard-comments "^4.0.2"
-    postcss-discard-duplicates "^4.0.2"
-    postcss-discard-empty "^4.0.1"
-    postcss-discard-overridden "^4.0.1"
-    postcss-merge-longhand "^4.0.11"
-    postcss-merge-rules "^4.0.3"
-    postcss-minify-font-values "^4.0.2"
-    postcss-minify-gradients "^4.0.2"
-    postcss-minify-params "^4.0.2"
-    postcss-minify-selectors "^4.0.2"
-    postcss-normalize-charset "^4.0.1"
-    postcss-normalize-display-values "^4.0.2"
-    postcss-normalize-positions "^4.0.2"
-    postcss-normalize-repeat-style "^4.0.2"
-    postcss-normalize-string "^4.0.2"
-    postcss-normalize-timing-functions "^4.0.2"
-    postcss-normalize-unicode "^4.0.1"
-    postcss-normalize-url "^4.0.1"
-    postcss-normalize-whitespace "^4.0.2"
-    postcss-ordered-values "^4.1.2"
-    postcss-reduce-initial "^4.0.3"
-    postcss-reduce-transforms "^4.0.2"
-    postcss-svgo "^4.0.2"
-    postcss-unique-selectors "^4.0.1"
-
-cssnano-util-get-arguments@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-arguments/-/cssnano-util-get-arguments-4.0.0.tgz#ed3a08299f21d75741b20f3b81f194ed49cc150f"
-
-cssnano-util-get-match@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/cssnano-util-get-match/-/cssnano-util-get-match-4.0.0.tgz#c0e4ca07f5386bb17ec5e52250b4f5961365156d"
-
-cssnano-util-raw-cache@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-raw-cache/-/cssnano-util-raw-cache-4.0.1.tgz#b26d5fd5f72a11dfe7a7846fb4c67260f96bf282"
-  dependencies:
-    postcss "^7.0.0"
-
-cssnano-util-same-parent@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/cssnano-util-same-parent/-/cssnano-util-same-parent-4.0.1.tgz#574082fb2859d2db433855835d9a8456ea18bbf3"
-
-cssnano@^4.1.10:
-  version "4.1.10"
-  resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-4.1.10.tgz#0ac41f0b13d13d465487e111b778d42da631b8b2"
-  dependencies:
-    cosmiconfig "^5.0.0"
-    cssnano-preset-default "^4.0.7"
-    is-resolvable "^1.0.0"
-    postcss "^7.0.0"
+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==
 
-csso@^3.5.0:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/csso/-/csso-3.5.1.tgz#7b9eb8be61628973c1b261e169d2f024008e758b"
+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:
-    css-tree "1.0.0-alpha.29"
+    cssnano-preset-default "^5.2.12"
+    lilconfig "^2.0.3"
+    yaml "^1.10.2"
 
 csso@^4.0.2:
   version "4.0.2"
@@ -4131,6 +3881,13 @@ csso@^4.0.2:
   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"
@@ -4141,34 +3898,22 @@ cssom@~0.3.6:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssstyle@^2.2.0:
+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"
 
-cyclist@~0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-0.2.2.tgz#1b33792e11e914a2fd6d6ed6447464444e5fa640"
-
-d@1, d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
-damerau-levenshtein@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz#143c1641cb3d85c60c32329e26899adea8701791"
-  integrity sha512-JVrozIeElnj3QzfUIt8tB8YMluBJom4Vw9qTPpjGYQ9fYlB3D/rb6OordUxf3xeFB35LKWs0xqcO5U6ySvBtug==
+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==
 
-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"
+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"
@@ -4179,85 +3924,53 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.0.1:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.7.0.tgz#8271d943cc4636a1f27698f1b8d6a9f1ceb74026"
-  integrity sha512-wxYp2PGoUDN5ZEACc61aOtYFvSsJUylIvCjpjDOqM1UDaKIIuMJ9fAnMYFHV3TQaDpfTVxhwNK/GiCaHKuemTA==
-
-date-now@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
+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.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
+debug@2.6.9, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   dependencies:
     ms "2.0.0"
 
+debug@4, debug@^4.3.2, debug@^4.3.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.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
   dependencies:
     ms "2.0.0"
 
-debug@^3.1.0:
-  version "3.2.5"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.5.tgz#c2418fbfd7a29f4d4f70ff4cea604d4b64c46407"
-  dependencies:
-    ms "^2.1.1"
-
-debug@^3.1.1, debug@^3.2.6:
+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@^3.2.5:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
-  dependencies:
-    ms "^2.1.1"
-
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
   dependencies:
     ms "^2.1.1"
 
-decamelize@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
-
-decimal.js@^10.2.0:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
-  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
-
-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"
-
-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"
+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==
 
 dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
   integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
 
-deep-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.0.1.tgz#f5d260292b660e084eff4cdbc9f08ad3247448b5"
-
-deep-extend@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
-
 deep-is@^0.1.3, deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
@@ -4268,17 +3981,17 @@ deepmerge@^4.2.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-gateway@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
+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 "^1.0.0"
-    ip-regex "^2.1.0"
+    execa "^5.0.0"
 
-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-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"
@@ -4286,64 +3999,36 @@ define-properties@^1.1.2, define-properties@^1.1.3:
   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"
+define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
   dependencies:
-    is-descriptor "^0.1.0"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
 
-define-property@^1.0.0:
+defined@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-1.0.0.tgz#769ebaaf3f4a63aad3af9e8d304c9bbe79bfb0e6"
-  dependencies:
-    is-descriptor "^1.0.0"
-
-define-property@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/define-property/-/define-property-2.0.2.tgz#d459689e8d654ba77e02a817f8710d702cb16e9d"
-  dependencies:
-    is-descriptor "^1.0.2"
-    isobject "^3.0.1"
-
-del@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"
-  integrity sha512-QwGuEUouP2kVwQenAsOof5Fv8K9t3D8Ca8NxcXKrIpEHjTXK5J2nXLdP+ALI1cgv8wj7KuwBhTwBkOZSJKM5XQ==
-  dependencies:
-    "@types/glob" "^7.1.1"
-    globby "^6.1.0"
-    is-path-cwd "^2.0.0"
-    is-path-in-cwd "^2.0.0"
-    p-map "^2.0.0"
-    pify "^4.0.1"
-    rimraf "^2.6.3"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==
 
 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@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"
 
-des.js@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.0.tgz#c074d2e2aa6a8a9a07dbd61f9a15c2cd83ec8ecc"
-  dependencies:
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-
-detect-libc@^1.0.2:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
+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"
@@ -4354,25 +4039,37 @@ detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
 
-detect-port-alt@1.1.6:
+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@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-26.6.2.tgz#48ba99157de1923412eed41db6b6d4aa9ca7c0b1"
-  integrity sha512-Mv/TDa3nZ9sbc5soK+OoA74BsS3mL37yixCvUAQkiuA4Wz6YtwP/K47n2rv2ovzHZvoiQeA5FTQOschKkEwB0Q==
-
-diffie-hellman@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
+detective@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/detective/-/detective-5.2.1.tgz#6af01eeda11015acb0e73f933242b70f24f91034"
+  integrity sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==
   dependencies:
-    bn.js "^4.1.0"
-    miller-rabin "^4.0.0"
-    randombytes "^2.0.0"
+    acorn-node "^1.8.2"
+    defined "^1.0.0"
+    minimist "^1.2.6"
+
+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"
@@ -4381,29 +4078,21 @@ dir-glob@^3.0.1:
   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-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
 
-dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
-  dependencies:
-    ip "^1.1.0"
-    safe-buffer "^5.0.1"
-
-dns-txt@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/dns-txt/-/dns-txt-2.0.2.tgz#b91d806f5d27188e4ab3e7d107d881a1cc4642b6"
-  dependencies:
-    buffer-indexof "^1.0.0"
-
-doctrine@1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
+dns-packet@^5.2.2:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.4.0.tgz#1f88477cf9f27e78a213fb6d118ae38e759a879b"
+  integrity sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==
   dependencies:
-    esutils "^2.0.2"
-    isarray "^1.0.0"
+    "@leichtgewicht/ip-codec" "^2.0.1"
 
 doctrine@^2.1.0:
   version "2.1.0"
@@ -4417,9 +4106,15 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-dom-converter@~0.2:
+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"
 
@@ -4430,14 +4125,24 @@ dom-serializer@0:
     domelementtype "~1.1.1"
     entities "~1.1.1"
 
-domain-browser@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
+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"
@@ -4449,24 +4154,12 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-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"
+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:
-    dom-serializer "0"
-    domelementtype "1"
+    domelementtype "^2.2.0"
 
 domutils@^1.7.0:
   version "1.7.0"
@@ -4475,6 +4168,15 @@ domutils@^1.7.0:
     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"
@@ -4483,67 +4185,33 @@ dot-case@^3.0.4:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
-dot-prop@^4.1.1:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
-  dependencies:
-    is-obj "^1.0.0"
-
-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"
-
-dotenv-expand@5.1.0:
+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@8.2.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
-  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
-
-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"
-
-duplexify@^3.4.2, duplexify@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.6.0.tgz#592903f5d80b38d037220541264d69a198fb3410"
-  dependencies:
-    end-of-stream "^1.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-    stream-shift "^1.0.0"
+dotenv@^10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-10.0.0.tgz#3d4227b8fb95f81096cdd2b66653fb2c7085ba81"
+  integrity sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==
 
-ecc-jsbn@~0.1.1:
+duplexer@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
+  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
 
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
-ejs@^2.6.1:
-  version "2.7.4"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
-  integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
-
-electron-to-chromium@^1.3.295:
-  version "1.3.306"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.306.tgz#e8265301d053d5f74e36cb876486830261fbe946"
+ejs@^3.1.6:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.8.tgz#758d32910c78047585c7ef1f92f9ee041c1c190b"
+  integrity sha512-/sXZeMlhS0ArkfX2Aw780gJzXSMPnKjtspYZv+f3NiKLlubezAHDU5+9xz6gd3/NhG3txQCo6xlglmTS+oTGEQ==
+  dependencies:
+    jake "^10.8.5"
 
-electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.612:
+electron-to-chromium@^1.3.612:
   version "1.3.617"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.617.tgz#4192fa4db846c6ad51fffe3a06e71727e9699a74"
   integrity sha512-yHXyI0fHnU0oLxdu21otLYpW3qwkbo8EBTpqeS9w14fwNjFy65SG6unrS3Gg+wX1JKWlAFCcNt13fG0nsCo/1A==
@@ -4552,39 +4220,29 @@ electron-to-chromium@^1.3.73:
   version "1.3.73"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.73.tgz#aa67787067d58cc3920089368b3b8d6fe0fc12f6"
 
-elliptic@^6.0.0:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
-  dependencies:
-    bn.js "^4.4.0"
-    brorand "^1.0.1"
-    hash.js "^1.0.0"
-    hmac-drbg "^1.0.0"
-    inherits "^2.0.1"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.0"
+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==
 
-emittery@^0.7.1:
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.2.tgz#25595908e13af0f5674ab419396e2fb394cdfa82"
-  integrity sha512-A8OG5SR/ij3SsJdWDJdkkSYUjQdCUx6APQXem0SaEePBSRg4eymGYwBkKo1Y6DU+af/Jn2dBQqDBvjnr9Vi8nQ==
+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==
 
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156"
+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.0.0:
-  version "9.2.0"
-  resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.0.tgz#a26da8e832b16a9753309f25e35e3c0efb9a066a"
-  integrity sha512-DNc3KFPK18bPdElMJnf/Pkv5TXhxFU3YFDEuGLDRtPmV4rkmCjBkCSEp22u6rBHdSN9Vlp/GK7k98prmE1Jgug==
-
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
+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"
@@ -4595,39 +4253,24 @@ encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
 
-end-of-stream@^1.0.0, end-of-stream@^1.1.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
-  dependencies:
-    once "^1.4.0"
-
-enhanced-resolve@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz#3b806f3bfafc1ec7de69551ef93cca46c1704126"
-  integrity sha512-3e87LvavsdxyoCfGusJnrZ5G8SLPOFeHSNpZI/ATL9a5leXo2k0w6MKnbqhdBad9qTobSfB20Ld7UmgoNbAZkQ==
+enhanced-resolve@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz#0dc579c3bb2a1032e357ac45b8f3a6f3ad4fb1e6"
+  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
   dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
+    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.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"
 
-errno@^0.1.3, errno@~0.1.7:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
-  dependencies:
-    prr "~1.0.1"
-
-error-ex@^1.2.0, error-ex@^1.3.1:
+error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   dependencies:
@@ -4655,16 +4298,17 @@ es-abstract@^1.12.0:
     string.prototype.trimleft "^2.1.0"
     string.prototype.trimright "^2.1.0"
 
-es-abstract@^1.17.0-next.1:
-  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==
+es-abstract@^1.18.0-next.1:
+  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"
@@ -4672,25 +4316,36 @@ es-abstract@^1.17.0-next.1:
     string.prototype.trimend "^1.0.1"
     string.prototype.trimstart "^1.0.1"
 
-es-abstract@^1.18.0-next.0, es-abstract@^1.18.0-next.1:
-  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==
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.20.1.tgz#027292cd6ef44bd12b1913b828116f54787d1814"
+  integrity sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==
   dependencies:
+    call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
     function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.1"
+    get-symbol-description "^1.0.0"
     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"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.4"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.0"
     object-keys "^1.1.1"
-    object.assign "^4.1.1"
-    string.prototype.trimend "^1.0.1"
-    string.prototype.trimstart "^1.0.1"
+    object.assign "^4.1.2"
+    regexp.prototype.flags "^1.4.3"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
 
-es-abstract@^1.5.1, es-abstract@^1.6.1:
+es-abstract@^1.5.1:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
   dependencies:
@@ -4700,6 +4355,18 @@ es-abstract@^1.5.1, es-abstract@^1.6.1:
     is-callable "^1.1.3"
     is-regex "^1.0.4"
 
+es-module-lexer@^0.9.0:
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
+  integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
 es-to-primitive@^1.1.1, es-to-primitive@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.0.tgz#edf72478033456e8dda8ef09e00ad9650707f377"
@@ -4717,189 +4384,162 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.50:
-  version "0.10.52"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.52.tgz#bb21777e919a04263736ded120a9d665f10ea63f"
-  dependencies:
-    es6-iterator "~2.0.3"
-    es6-symbol "~3.1.2"
-    next-tick "~1.0.0"
-
-es6-iterator@2.0.3, es6-iterator@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-symbol@^3.1.1, es6-symbol@~3.1.2:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
-  dependencies:
-    d "^1.0.1"
-    ext "^1.1.2"
-
-escalade@^3.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-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==
+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-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@2.0.0, escape-string-regexp@^2.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"
+
+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@^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@^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.14.1:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
-  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+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 "^4.2.0"
+    estraverse "^5.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-react-app@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-6.0.0.tgz#ccff9fc8e36b322902844cbd79197982be355a0e"
-  integrity sha512-bpoAAC+YRfzq0dsTk+6v9aHm/uqnDwayNAXleMypGl6CpxI9oXXscVHo4fk3eJPIn+rsbtNetB4r/ZIidFIE8A==
-  dependencies:
-    confusing-browser-globals "^1.0.10"
-
-eslint-import-resolver-node@^0.3.4:
-  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==
+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.6:
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz#4048b958395da89668252001dbd9eca6b83bacbd"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
   dependencies:
-    debug "^2.6.9"
-    resolve "^1.13.1"
+    debug "^3.2.7"
+    resolve "^1.20.0"
 
-eslint-module-utils@^2.6.0:
-  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==
+eslint-module-utils@^2.7.3:
+  version "2.7.4"
+  resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz#4f3e41116aaf13a20792261e61d3a2e7e0583974"
+  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
   dependencies:
-    debug "^2.6.9"
-    pkg-dir "^2.0.0"
+    debug "^3.2.7"
 
-eslint-plugin-flowtype@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-5.2.0.tgz#a4bef5dc18f9b2bdb41569a4ab05d73805a3d261"
-  integrity sha512-z7ULdTxuhlRJcEe1MVljePXricuPOrsWfScRXFhNzVD5dmTHWjIF57AxD0e7AbEoLSbjSsaA5S+hCg43WvpXJQ==
+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.15"
+    lodash "^4.17.21"
     string-natural-compare "^3.0.1"
 
-eslint-plugin-import@^2.22.1:
-  version "2.22.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
-  integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
+eslint-plugin-import@^2.25.3:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz#f812dc47be4f2b72b478a021605a59fc6fe8b88b"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
   dependencies:
-    array-includes "^3.1.1"
-    array.prototype.flat "^1.2.3"
-    contains-path "^0.1.0"
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
     debug "^2.6.9"
-    doctrine "1.5.0"
-    eslint-import-resolver-node "^0.3.4"
-    eslint-module-utils "^2.6.0"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.7.3"
     has "^1.0.3"
-    minimatch "^3.0.4"
-    object.values "^1.1.1"
-    read-pkg-up "^2.0.0"
-    resolve "^1.17.0"
-    tsconfig-paths "^3.9.0"
-
-eslint-plugin-jest@^24.1.0:
-  version "24.1.3"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-24.1.3.tgz#fa3db864f06c5623ff43485ca6c0e8fc5fe8ba0c"
-  integrity sha512-dNGGjzuEzCE3d5EPZQ/QGtmlMotqnYWD/QpCZ1UuZlrMAdhG5rldh0N0haCvhGnUkSeuORS5VNROwF9Hrgn3Lg==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "^4.0.1"
-
-eslint-plugin-jsx-a11y@^6.3.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.4.1.tgz#a2d84caa49756942f42f1ffab9002436391718fd"
-  integrity sha512-0rGPJBbwHoGNPU73/QCLP/vveMlM1b1Z9PponxO87jfr6tuH5ligXbDT6nHSSzBC8ovX2Z+BQu7Bk5D/Xgq9zg==
-  dependencies:
-    "@babel/runtime" "^7.11.2"
+    is-core-module "^2.8.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.values "^1.1.5"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
+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.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz#93736fc91b83fdc38cc8d115deedfc3091aef1ff"
+  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
     aria-query "^4.2.2"
-    array-includes "^3.1.1"
+    array-includes "^3.1.5"
     ast-types-flow "^0.0.7"
-    axe-core "^4.0.2"
+    axe-core "^4.4.3"
     axobject-query "^2.2.0"
-    damerau-levenshtein "^1.0.6"
-    emoji-regex "^9.0.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
     has "^1.0.3"
-    jsx-ast-utils "^3.1.0"
+    jsx-ast-utils "^3.3.2"
     language-tags "^1.0.5"
+    minimatch "^3.1.2"
+    semver "^6.3.0"
 
-eslint-plugin-react-hooks@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz#8c229c268d468956334c943bb45fc860280f5556"
-  integrity sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==
+eslint-plugin-react-hooks@^4.3.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
-eslint-plugin-react@^7.21.5:
-  version "7.21.5"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.21.5.tgz#50b21a412b9574bfe05b21db176e8b7b3b15bff3"
-  integrity sha512-8MaEggC2et0wSF6bUeywF7qQ46ER81irOdWS4QWxnnlAEsnzeBevk1sWh7fhpCghPpXb+8Ks7hvaft6L/xsR6g==
+eslint-plugin-react@^7.27.1:
+  version "7.30.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.30.1.tgz#2be4ab23ce09b5949c6631413ba64b2810fd3e22"
+  integrity sha512-NbEvI9jtqO46yJA3wcRF9Mo0lF9T/jhdHqhCHXiXtD+Zcb98812wvokjWpU7Q4QH5edo6dmqrukxVvWWXHlsUg==
   dependencies:
-    array-includes "^3.1.1"
-    array.prototype.flatmap "^1.2.3"
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
     doctrine "^2.1.0"
-    has "^1.0.3"
+    estraverse "^5.3.0"
     jsx-ast-utils "^2.4.1 || ^3.0.0"
-    object.entries "^1.1.2"
-    object.fromentries "^2.0.2"
-    object.values "^1.1.1"
-    prop-types "^15.7.2"
-    resolve "^1.18.1"
-    string.prototype.matchall "^4.0.2"
-
-eslint-plugin-testing-library@^3.9.2:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-3.10.1.tgz#4dd02306d601c3238fdabf1d1dbc5f2a8e85d531"
-  integrity sha512-nQIFe2muIFv2oR2zIuXE4vTbcFNx8hZKRzgHZqJg8rfopIWwoTwtlbCCNELT/jXzVe1uZF68ALGYoDXjLczKiQ==
-  dependencies:
-    "@typescript-eslint/experimental-utils" "^3.10.1"
-
-eslint-scope@3.7.1:
-  version "3.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
-eslint-scope@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.1"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.7"
 
-eslint-scope@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.0.0.tgz#e87c8887c73e8d1ec84f1ca591645c358bfc8fb9"
+eslint-plugin-testing-library@^5.0.1:
+  version "5.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.6.0.tgz#91e810ecb838f86decc9b5202876c87e42d73ea7"
+  integrity sha512-y63TRzPhGCMNsnUwMGJU1MFWc/3GvYw+nzobp9QiyNTTKsgAt5RKAOT1I34+XqVBpX1lC8bScoOjCkP7iRv0Mw==
   dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
+    "@typescript-eslint/utils" "^5.13.0"
 
-eslint-scope@^5.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==
@@ -4907,111 +4547,112 @@ eslint-scope@^5.1.1:
     esrecurse "^4.3.0"
     estraverse "^4.1.1"
 
-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==
+eslint-scope@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.1.1.tgz#fff34894c2f65e5226d3041ac480b4513a163642"
+  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
   dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
-
-eslint-visitor-keys@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.1.0.tgz#e2a82cea84ff246ad6fb57f9bde5b46621459ec2"
+    esrecurse "^4.3.0"
+    estraverse "^5.2.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-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-3.0.0.tgz#8aebaface7345bb33559db0a1f13a1d2d48c3672"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
 
 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-webpack-plugin@^2.1.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/eslint-webpack-plugin/-/eslint-webpack-plugin-2.4.1.tgz#9353ec46a31d29558734a38a05eb14c5760a7144"
-  integrity sha512-cj8iPWZKuAiVD8MMgTSunyMCAvxQxp5mxoPHZl1UMGkApFXaXJHdCFcCR+oZEJbBNhReNa5SjESIn34uqUbBtg==
+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:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz#f6480fa6b1f30efe2d1968aa8ac745b862469826"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+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.2.4"
-    arrify "^2.0.1"
-    jest-worker "^26.6.2"
-    micromatch "^4.0.2"
-    schema-utils "^3.0.0"
+    "@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@^7.11.0:
-  version "7.15.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.15.0.tgz#eb155fb8ed0865fcf5d903f76be2e5b6cd7e0bc7"
-  integrity sha512-Vr64xFDT8w30wFll643e7cGrIkPEU50yIiI36OdSIDoSGguIeaLzBo0vpGvzo9RECUqq7htURfwEtKqwytkqzA==
+eslint@^8.3.0:
+  version "8.22.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.22.0.tgz#78fcb044196dfa7eef30a9d65944f6f980402c48"
+  integrity sha512-ci4t0sz6vSRKdmkOGmprBo6fmI4PrphDFMy5JEq/fNS0gQkJM3rLmrqcp8ipMcdobH3KtUP40KniAE9W19S4wA==
   dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@eslint/eslintrc" "^0.2.2"
+    "@eslint/eslintrc" "^1.3.0"
+    "@humanwhocodes/config-array" "^0.10.4"
+    "@humanwhocodes/gitignore-to-minimatch" "^1.0.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
-    debug "^4.0.1"
+    debug "^4.3.2"
     doctrine "^3.0.0"
-    enquirer "^2.3.5"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.1"
-    esquery "^1.2.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.3.3"
+    esquery "^1.4.0"
     esutils "^2.0.2"
-    file-entry-cache "^6.0.0"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
     functional-red-black-tree "^1.0.1"
-    glob-parent "^5.0.0"
-    globals "^12.1.0"
-    ignore "^4.0.6"
+    glob-parent "^6.0.1"
+    globals "^13.15.0"
+    globby "^11.1.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
     import-fresh "^3.0.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    js-yaml "^3.13.1"
+    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
-    lodash "^4.17.19"
-    minimatch "^3.0.4"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
     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"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
     strip-json-comments "^3.1.0"
-    table "^5.2.3"
     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==
+espree@^9.3.2, espree@^9.3.3:
+  version "9.3.3"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.3.3.tgz#2dd37c4162bb05f433ad3c1a52ddf8a49dc08e9d"
+  integrity sha512-ORs1Rt/uQTqUKjDdGCyrtYxbazf5umATSf/K4qxjmZHORR6HJk+2s/2Pqe+Kk49HHINC/xNIrGfgh8sZcll0ng==
   dependencies:
-    acorn "^7.4.0"
-    acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^1.3.0"
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
 
-esquery@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
-  integrity sha512-olpvt9QG0vniUBZspVRN6lwB7hOZoTRtT+jzR+tS4ffYx2mzbw+z0XCOk44aaLYKApNX5nMm+E+P6o25ip/DHQ==
+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"
 
-esrecurse@^4.1.0:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.2.1.tgz#007a3b9fdbc2b3bb87e4879ea19c92fdbd3942cf"
-  dependencies:
-    estraverse "^4.1.0"
-
 esrecurse@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
@@ -5019,7 +4660,7 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.1.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.2.0.tgz#0dee3fed31fcd469618ce7342099fc1afa0bdb13"
 
@@ -5028,10 +4669,10 @@ estraverse@^5.1.0, estraverse@^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==
+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"
@@ -5050,194 +4691,107 @@ eventemitter3@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
 
-events@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/events/-/events-3.0.0.tgz#9a0a0dfaf62893d92b875b8f2698ca4114973e88"
-
-eventsource@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/eventsource/-/eventsource-1.0.7.tgz#8fbc72c93fcd34088090bc0a4e64f4b5cee6d8d0"
-  dependencies:
-    original "^1.0.0"
-
-evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
-  dependencies:
-    md5.js "^1.3.4"
-    safe-buffer "^5.1.1"
-
-exec-sh@^0.3.2:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
-
-execa@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
-execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
+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@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
-  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+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.0"
-    get-stream "^5.0.0"
-    human-signals "^1.1.1"
+    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.0"
-    onetime "^5.1.0"
-    signal-exit "^3.0.2"
+    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-brackets@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622"
-  dependencies:
-    debug "^2.3.3"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    posix-character-classes "^0.1.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-expect@^26.6.0, expect@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/expect/-/expect-26.6.2.tgz#c6b996bf26bf3fe18b67b2d0f51fc981ba934417"
-  integrity sha512-9/hlOBkQl2l/PLHJx6JjoDF6xPKcJEsUlWKb23rKE7KzeDqUZKXKNMW27KIue5JMdBV9HgmoJPcc8HtO85t9IA==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    ansi-styles "^4.0.0"
-    jest-get-type "^26.3.0"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-regex-util "^26.0.0"
-
-express@^4.17.1:
-  version "4.17.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134"
-  integrity sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==
-  dependencies:
-    accepts "~1.3.7"
+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"
+
+express@^4.17.3:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
+  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
+  dependencies:
+    accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
+    body-parser "1.20.0"
+    content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.4.0"
+    cookie "0.5.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
-    depd "~1.1.2"
+    depd "2.0.0"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "~1.1.2"
+    finalhandler "1.2.0"
     fresh "0.5.2"
+    http-errors "2.0.0"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     parseurl "~1.3.3"
     path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
+    proxy-addr "~2.0.7"
+    qs "6.10.3"
     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"
+    safe-buffer "5.2.1"
+    send "0.18.0"
+    serve-static "1.15.0"
+    setprototypeof "1.2.0"
+    statuses "2.0.1"
     type-is "~1.6.18"
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-ext@^1.1.2:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.2.0.tgz#8dd8d2dd21bcced3045be09621fa0cbf73908ba4"
-  dependencies:
-    type "^2.0.0"
-
-extend-shallow@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
-  dependencies:
-    is-extendable "^0.1.0"
-
-extend-shallow@^3.0.0, extend-shallow@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8"
-  dependencies:
-    assign-symbols "^1.0.0"
-    is-extendable "^1.0.1"
-
-extend@~3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
-
-extglob@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
-  dependencies:
-    array-unique "^0.3.2"
-    define-property "^1.0.0"
-    expand-brackets "^2.1.4"
-    extend-shallow "^2.0.1"
-    fragment-cache "^0.2.1"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-
-extsprintf@^1.2.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"
 
-fast-deep-equal@^3.1.1:
+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==
+fast-glob@^3.2.11, 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.0"
+    glob-parent "^5.1.2"
     merge2 "^1.3.0"
-    micromatch "^4.0.2"
-    picomatch "^2.2.1"
+    micromatch "^4.0.4"
 
 fast-json-stable-stringify@^2.0.0:
   version "2.0.0"
@@ -5260,15 +4814,10 @@ fastq@^1.6.0:
   dependencies:
     reusify "^1.0.4"
 
-faye-websocket@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.10.0.tgz#4e492f8d04dfb6f89003507f6edbf2d501e7c6f4"
-  dependencies:
-    websocket-driver ">=0.5.1"
-
-faye-websocket@~0.11.1:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.3.tgz#5c0e9a8968e8912c286639fde977a8b209f2508e"
+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"
 
@@ -5278,38 +4827,32 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-figgy-pudding@^3.5.1:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790"
-
-file-entry-cache@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.0.tgz#7921a89c391c6d93efec2169ac6bf300c527ea0a"
-  integrity sha512-fqoO76jZ3ZnYrXLDRxBR1YvOvc0k844kcOg40bgsPrE25LAb/PDqTY+ho64Xh2c8ZXgIKldchCFHczG2UVRcWA==
+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.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.1.1.tgz#a6f29dfb3f5933a1c350b2dbaa20ac5be0539baa"
-  integrity sha512-Klt8C4BjWSXYQAfhpYYkG4qHNTna4toMHEbWrI5IuVoxbU6uiDKeKAP99R8mmbJi3lvewn/jQBOgU4+NS3tDQw==
+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@6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/filesize/-/filesize-6.1.0.tgz#e81bdaa780e2451d714d71c0d7a4f3238d37ad00"
-  integrity sha512-LpCHtPQ3sFx67z+uh2HnSyWSLLu5Jxo21795uRDuar/EOuYWXib5EmPaGIBuSnRqH2IODiKA2k5re/K9OnN/Yg==
-
-fill-range@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-4.0.0.tgz#d544811d428f98eb06a63dc402d2403c328c38f7"
+filelist@^1.0.1:
+  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:
-    extend-shallow "^2.0.1"
-    is-number "^3.0.0"
-    repeat-string "^1.6.1"
-    to-regex-range "^2.1.0"
+    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.0.1:
   version "7.0.1"
@@ -5318,35 +4861,19 @@ fill-range@^7.0.1:
   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==
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
   dependencies:
     debug "2.6.9"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     parseurl "~1.3.3"
-    statuses "~1.5.0"
+    statuses "2.0.1"
     unpipe "~1.0.0"
 
-find-cache-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.0.0.tgz#4c1faed59f45184530fb9d7fa123a4d04a98472d"
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^1.0.0"
-    pkg-dir "^3.0.0"
-
-find-cache-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
-  dependencies:
-    commondir "^1.0.1"
-    make-dir "^2.0.0"
-    pkg-dir "^3.0.0"
-
 find-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"
@@ -5356,7 +4883,13 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
-find-up@4.1.0, find-up@^4.0.0, find-up@^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==
@@ -5364,17 +4897,13 @@ find-up@4.1.0, find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.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"
-
-find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+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 "^3.0.0"
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
 
 flat-cache@^3.0.4:
   version "3.0.4"
@@ -5389,88 +4918,72 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.1.0.tgz#a5d06b4a8b01e3a63771daa5cb7a1903e2e57067"
   integrity sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==
 
-flatten@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
-
-flush-write-stream@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.4"
-
 follow-redirects@^1.0.0:
   version "1.5.8"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.8.tgz#1dbfe13e45ad969f813e86c00e5296f525c885a1"
   dependencies:
     debug "=3.1.0"
 
-for-in@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
-
-forever-agent@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91"
-
-fork-ts-checker-webpack-plugin@4.1.6:
-  version "4.1.6"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-4.1.6.tgz#5055c703febcf37fa06405d400c122b905167fc5"
-  integrity sha512-DUxuQaKoqfNne8iikd14SAkh5uw4+8vNifp6gmA73yYNS6ywLIWSLD/n/mBzHQRpW3J7rbATEakmiA8JvkTyZw==
+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.5.5"
-    chalk "^2.4.1"
-    micromatch "^3.1.10"
+    "@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"
-    semver "^5.6.0"
+    schema-utils "2.7.0"
+    semver "^7.3.2"
     tapable "^1.0.0"
-    worker-rpc "^0.1.0"
 
-form-data@~2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.2.tgz#4970498be604c20c005d4f5c23aecd21d6b49099"
+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.6"
+    combined-stream "^1.0.8"
     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"
+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"
-  dependencies:
-    map-cache "^0.2.2"
+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==
 
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
 
-from2@^2.1.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
-  dependencies:
-    inherits "^2.0.1"
-    readable-stream "^2.0.0"
-
-fs-extra@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-7.0.0.tgz#8cc3f47ce07ef7b3593a11b9fb245f7e34c041d6"
+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.1.2"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
 
-fs-extra@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+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 "^4.0.0"
-    universalify "^0.1.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
 
 fs-extra@^9.0.1:
   version "9.0.1"
@@ -5482,82 +4995,52 @@ fs-extra@^9.0.1:
     jsonfile "^6.0.1"
     universalify "^1.0.0"
 
-fs-minipass@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
-  dependencies:
-    minipass "^2.2.1"
-
-fs-minipass@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb"
-  integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==
-  dependencies:
-    minipass "^3.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"
-  dependencies:
-    graceful-fs "^4.1.2"
-    iferr "^0.1.5"
-    imurmurhash "^0.1.4"
-    readable-stream "1 || 2"
+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@^1.2.7:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.9.tgz#3f5ed66583ccd6f400b5a00db6f7e861363e388f"
-  dependencies:
-    nan "^2.12.1"
-    node-pre-gyp "^0.12.0"
-
-fsevents@^2.1.2:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.2.1.tgz#1fb02ded2036a8ac288d507a65962bd87b97628d"
-  integrity sha512-bTLYHSeC0UH/EFXS9KqWnXuOl/wHK5Z/d+ghd5AsFMYN7wIGkUCOJyzy88+wJKkZPGON8u4Z9f6U4FdgURE9qA==
-
-fsevents@~2.1.2:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
-  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
+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.0, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.5.tgz#cce0505fe1ffb80503e6f9e46cc64e46a12a9621"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
 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"
-
-gensync@^1.0.0-beta.1:
+functions-have-names@^1.2.2:
+  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@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
-
-get-caller-file@^2.0.1:
+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, get-intrinsic@^1.0.1:
   version "1.0.1"
@@ -5568,6 +5051,15 @@ get-intrinsic@^1.0.0, get-intrinsic@^1.0.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.2.tgz#336975123e05ad0b7ba41f152ee4aadbea6cf598"
+  integrity sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.1.tgz#6f7764f88ea11e0b514bd9bd860a132259992ca4"
@@ -5577,54 +5069,39 @@ get-package-type@^0.1.0:
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
   integrity sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==
 
-get-stream@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
+get-stream@^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-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"
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/get-symbol-description/-/get-symbol-description-1.0.0.tgz#7fdb81c900101fbd564dd5f1a30af5aadc1e58d6"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
   dependencies:
-    pump "^3.0.0"
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
 
-get-stream@^5.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==
+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:
-    pump "^3.0.0"
+    is-glob "^4.0.1"
 
-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"
+glob-parent@^6.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"
 
-getpass@^0.1.1:
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/getpass/-/getpass-0.1.7.tgz#5eff8e3e684d569ae4cb2b1282604e8ba62149fa"
-  dependencies:
-    assert-plus "^1.0.0"
-
-glob-parent@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
-  dependencies:
-    is-glob "^3.1.0"
-    path-dirname "^1.0.0"
-
-glob-parent@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.0.tgz#5f4c1d1e748d30cd73ad2944b3577a81b081e8c2"
-  dependencies:
-    is-glob "^4.0.1"
-
-glob-parent@^5.1.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-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@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2:
+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:
@@ -5646,16 +5123,10 @@ glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-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-modules@2.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"
 
@@ -5671,57 +5142,30 @@ globals@^11.1.0:
   version "11.8.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.8.0.tgz#c1ef45ee9bed6badf0663c5cb90e8d1adec1321d"
 
-globals@^12.1.0:
-  version "12.4.0"
-  resolved "https://registry.yarnpkg.com/globals/-/globals-12.4.0.tgz#a18813576a41b00a24a97e7f815918c2e19925f8"
-  integrity sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==
+globals@^13.15.0:
+  version "13.17.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-13.17.0.tgz#902eb1e680a41da93945adbdcb5a9f361ba69bd4"
+  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
   dependencies:
-    type-fest "^0.8.1"
+    type-fest "^0.20.2"
 
-globby@11.0.1, globby@^11.0.1:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/globby/-/globby-11.0.1.tgz#9a2bf107a068f3ffeabc49ad702c79ede8cfd357"
-  integrity sha512-iH9RmgwCmUJHi2z5o2l3eTtGBtXek1OYlHrbcxOYugyHLmAsZrPj43OtHThd62Buh/Vv6VyCBD2bdyWcGNQqoQ==
+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.1.1"
-    ignore "^5.1.4"
-    merge2 "^1.3.0"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
     slash "^3.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@^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.2, graceful-fs@^4.1.6:
+graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
-graceful-fs@^4.1.15, graceful-fs@^4.2.0:
+graceful-fs@^4.2.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
 
@@ -5730,41 +5174,35 @@ graceful-fs@^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"
+graceful-fs@^4.2.6, 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@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
+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.1"
-    pify "^4.0.1"
+    duplexer "^0.1.2"
 
 handle-thing@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
 
-har-schema@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/har-schema/-/har-schema-2.0.0.tgz#a94c2224ebcac04782a0d9035521f24735b7ec92"
-
-har-validator@~5.1.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"
-
 harmony-reflect@^1.4.6:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.1.tgz#c108d4f2bb451efef7a37861fdbdae72c9bdefa9"
 
-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-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"
@@ -5775,6 +5213,13 @@ has-flag@^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:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
 has-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
@@ -5784,88 +5229,34 @@ has-symbols@^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-unicode@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/has-unicode/-/has-unicode-2.0.1.tgz#e0e6fe6a28cf51138855e086d1691e771de2a8b9"
-
-has-value@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-0.3.1.tgz#7b1f58bada62ca827ec0a2078025654845995e1f"
-  dependencies:
-    get-value "^2.0.3"
-    has-values "^0.1.4"
-    isobject "^2.0.0"
-
-has-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-value/-/has-value-1.0.0.tgz#18b281da585b1c5c51def24c930ed29a0be6b177"
-  dependencies:
-    get-value "^2.0.6"
-    has-values "^1.0.0"
-    isobject "^3.0.0"
-
-has-values@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-0.1.4.tgz#6d61de95d91dfca9b9a02089ad384bff8f62b771"
+has-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-values@^1.0.0:
+has-tostringtag@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-values/-/has-values-1.0.0.tgz#95b0b63fec2146619a6fe57fe75628d5a39efe4f"
+  resolved "https://registry.yarnpkg.com/has-tostringtag/-/has-tostringtag-1.0.0.tgz#7e133818a7d394734f941e73c3d3f9291e658b25"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
   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-symbols "^1.0.2"
 
-has@^1.0.0, has@^1.0.1, has@^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"
 
-hash-base@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-hash.js@^1.0.0, hash.js@^1.0.3:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.5.tgz#e38ab4b85dfb1e0c40fe9265c0e9b54854c23812"
-  dependencies:
-    inherits "^2.0.3"
-    minimalistic-assert "^1.0.1"
-
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hex-color-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
-
-hmac-drbg@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
-  dependencies:
-    hash.js "^1.0.3"
-    minimalistic-assert "^1.0.0"
-    minimalistic-crypto-utils "^1.0.1"
-
 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==
 
-hosted-git-info@^2.1.4:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
-
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -5875,18 +5266,6 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-hsl-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
-
-hsla-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
-
-html-comment-regex@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"
-
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3"
@@ -5894,72 +5273,64 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
-html-entities@^1.2.1, html-entities@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.3.1.tgz#fb9a1a4b5b14c5daba82d3e34c6ae4fe701a0e44"
-  integrity sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==
+html-entities@^2.1.0, 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==
 
-html-minifier-terser@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
-  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
+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.1"
-    clean-css "^4.2.3"
-    commander "^4.1.1"
+    camel-case "^4.1.2"
+    clean-css "^5.2.2"
+    commander "^8.3.0"
     he "^1.2.0"
-    param-case "^3.0.3"
+    param-case "^3.0.4"
     relateurl "^0.2.7"
-    terser "^4.6.3"
-
-html-webpack-plugin@4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz#625097650886b97ea5dae331c320e3238f6c121c"
-  integrity sha512-MouoXEYSjTzCrjIxWwg8gxL5fE2X2WZJLmBYXlaJhQUH5K/b5OrqmV7T4dB7iu0xkmJ6JlUuV6fFVtnqbPopZw==
-  dependencies:
-    "@types/html-minifier-terser" "^5.0.0"
-    "@types/tapable" "^1.0.5"
-    "@types/webpack" "^4.41.8"
-    html-minifier-terser "^5.0.1"
-    loader-utils "^1.2.3"
-    lodash "^4.17.15"
-    pretty-error "^2.1.1"
-    tapable "^1.1.3"
-    util.promisify "1.0.0"
+    terser "^5.10.0"
 
-htmlparser2@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.3.0.tgz#cc70d05a59f6542e43f0e685c982e14c924a9efe"
+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:
-    domelementtype "1"
-    domhandler "2.1"
-    domutils "1.1"
-    readable-stream "1.0"
+    "@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"
 
-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==
+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"
 
-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==
+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 "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
+    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"
@@ -5970,113 +5341,101 @@ http-errors@~1.6.2:
     setprototypeof "1.1.0"
     statuses ">= 1.4.0 < 2"
 
-http-errors@~1.7.2:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
-  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.4"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
 http-parser-js@>=0.4.0:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
 
-http-proxy-middleware@0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz#183c7dc4aa1479150306498c210cdaf96080a43a"
-  integrity sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==
+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:
-    http-proxy "^1.17.0"
-    is-glob "^4.0.0"
-    lodash "^4.17.11"
-    micromatch "^3.1.10"
+    "@tootallnate/once" "1"
+    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.17.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.0.tgz#dbe55f63e75a347db7f3d99974f2692a314a6a3a"
+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-signature@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/http-signature/-/http-signature-1.2.0.tgz#9aecd925114772f3d95b65a60abb8f7c18fbace1"
+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:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
+    agent-base "6"
+    debug "4"
 
-https-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-
-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==
 
-iconv-lite@0.4.24, iconv-lite@^0.4.4:
+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"
 
-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==
+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:
-    postcss "^7.0.14"
+    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.0.2"
+  resolved "https://registry.yarnpkg.com/idb/-/idb-7.0.2.tgz#7a067e20dd16539938e456814b7d714ba8db3892"
+  integrity sha512-jjKrT1EnyZewQ/gCBb/eyiYrhGzws2FeY92Yx8qT9S9GeQAmo4JFVIiWRIfKW/6Ob9A+UDAOW9j9jn58fy2HIg==
 
-identity-obj-proxy@3.0.0:
+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.4:
-  version "1.1.12"
-  resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.12.tgz#50bf24e5b9c8bb98af4964c941cdb0918da7b60b"
-
-iferr@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
-
 ignore-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=
+  integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
 
-ignore-walk@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.1.tgz#a83e62e7d272ac0e3b551aaa82831a19b69f82f8"
-  dependencies:
-    minimatch "^3.0.4"
-
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-
-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==
-
-immer@7.0.9:
-  version "7.0.9"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-7.0.9.tgz#28e7552c21d39dd76feccd2b800b7bc86ee4a62e"
-  integrity sha512-Vs/gxoM4DqNAYR7pugIxi0Xc8XAun/uy7AQu4fLLqaTBHxjOP9pJ266Q9MWA/ly4z6rAFZbvViOtihxUZ7O28A==
+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==
 
-import-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
-  dependencies:
-    import-from "^2.1.0"
+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.0.0:
   version "3.1.0"
@@ -6093,24 +5452,6 @@ import-fresh@^3.1.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-import-from@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
-  dependencies:
-    resolve-from "^3.0.0"
-
-import-lazy@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
-  integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
-
-import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/import-local/-/import-local-2.0.0.tgz#55070be38a5993cf18ef6db7e961f5bee5c5a09d"
-  dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
-
 import-local@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/import-local/-/import-local-3.0.2.tgz#a8cfd0431d1de4a2199703d003e3e62364fa6db6"
@@ -6132,10 +5473,6 @@ indexes-of@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
 
-infer-owner@^1.0.3, infer-owner@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/infer-owner/-/infer-owner-1.0.4.tgz#c4cefcaa8e51051c2a40ba2ce8a3d27295af9467"
-
 inflight@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
@@ -6143,101 +5480,48 @@ inflight@^1.0.4:
     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:
+inherits@2, inherits@2.0.3, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
 
-inherits@2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.1.tgz#b17d08d326b4423e568eff719f91b0b1cbdf69f1"
-
 inherits@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ini@^1.3.5, ini@~1.3.0:
+ini@^1.3.5:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
 
-internal-ip@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
-  integrity sha512-S1zBo1D6zcsyuC6PMmY5+55YMILQ9av8lotMx447Bq6SAgo/sDK6y6uUKmuYhW7eacnIhFfsPmCNYdDzsnnDCg==
-  dependencies:
-    default-gateway "^4.2.0"
-    ipaddr.js "^1.9.0"
-
-internal-slot@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
-  integrity sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
   dependencies:
-    es-abstract "^1.17.0-next.1"
+    get-intrinsic "^1.1.0"
     has "^1.0.3"
-    side-channel "^1.0.2"
-
-invariant@^2.2.0:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
-  dependencies:
-    loose-envify "^1.0.0"
-
-invert-kv@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
-
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-
-ip@^1.1.0, ip@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
-
-ipaddr.js@1.9.0:
-  version "1.9.0"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.0.tgz#37df74e430a0e47550fe54a2defe30d8acd95f65"
-  integrity sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==
+    side-channel "^1.0.4"
 
-ipaddr.js@^1.9.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==
 
-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-absolute-url@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
-  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
-
-is-accessor-descriptor@^0.1.6:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz#a9e12cb3ae8d876727eeef3843f8a0897b5c98d6"
-  dependencies:
-    kind-of "^3.0.2"
-
-is-accessor-descriptor@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz#169c2f6d3df1f992618072365c9b0ea1f6878656"
-  dependencies:
-    kind-of "^6.0.0"
+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-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-
-is-binary-path@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-1.0.1.tgz#75f16642b480f187a711c814161fd3a4a7655898"
+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:
-    binary-extensions "^1.0.0"
+    has-bigints "^1.0.1"
 
 is-binary-path@~2.1.0:
   version "2.1.0"
@@ -6246,15 +5530,13 @@ is-binary-path@~2.1.0:
   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"
-
-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"
+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:
-    builtin-modules "^1.0.0"
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
 
 is-callable@^1.1.3, is-callable@^1.1.4:
   version "1.1.4"
@@ -6265,95 +5547,43 @@ is-callable@^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-ci@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
-  dependencies:
-    ci-info "^2.0.0"
-
-is-color-stop@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-color-stop/-/is-color-stop-1.1.0.tgz#cfff471aee4dd5c9e158598fbe12967b5cdad345"
-  dependencies:
-    css-color-names "^0.0.4"
-    hex-color-regex "^1.1.0"
-    hsl-regex "^1.0.0"
-    hsla-regex "^1.0.0"
-    rgb-regex "^1.0.1"
-    rgba-regex "^1.0.0"
+is-callable@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.4.tgz#47301d58dd0259407865547853df6d61fe471945"
+  integrity sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==
 
-is-core-module@^2.0.0, is-core-module@^2.1.0:
+is-core-module@^2.1.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"
-  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"
+is-core-module@^2.8.1, is-core-module@^2.9.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.10.0.tgz#9012ede0a91c69587e647514e1d5277019e728ed"
+  integrity sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==
   dependencies:
-    kind-of "^6.0.0"
+    has "^1.0.3"
 
 is-date-object@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.1.tgz#9aa20eb6aeebbff77fbd33e74ca01b33581d3a16"
 
-is-descriptor@^0.1.0:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-0.1.6.tgz#366d8240dde487ca51823b1ab9f07a10a78251ca"
-  dependencies:
-    is-accessor-descriptor "^0.1.6"
-    is-data-descriptor "^0.1.4"
-    kind-of "^5.0.0"
-
-is-descriptor@^1.0.0, is-descriptor@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-descriptor/-/is-descriptor-1.0.2.tgz#3b159746a66604b04f8c81524ba365c5f14d86ec"
-  dependencies:
-    is-accessor-descriptor "^1.0.0"
-    is-data-descriptor "^1.0.0"
-    kind-of "^6.0.2"
-
-is-directory@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
-
 is-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-extendable@^0.1.0, is-extendable@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
-
-is-extendable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-1.0.1.tgz#a7470f9e426733d81bd81e1155264e3a3507cab4"
-  dependencies:
-    is-plain-object "^2.0.4"
+is-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.0, is-extglob@^2.1.1:
+is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
 
-is-fullwidth-code-point@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
-  dependencies:
-    number-is-nan "^1.0.0"
-
-is-fullwidth-code-point@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
-
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
@@ -6362,12 +5592,6 @@ is-generator-fn@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-generator-fn/-/is-generator-fn-2.1.0.tgz#7d140adc389aaf3011a8f2a2a4cfa6faadffb118"
 
-is-glob@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-3.1.0.tgz#7ba5ae24217804ac70707b96922567486cc3e84a"
-  dependencies:
-    is-extglob "^2.1.0"
-
 is-glob@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.0.tgz#9521c76845cc2610a85203ddf080a958c2ffabc0"
@@ -6380,13 +5604,12 @@ is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-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==
+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:
-    global-dirs "^2.0.1"
-    is-path-inside "^3.0.1"
+    is-extglob "^2.1.1"
 
 is-module@^1.0.0:
   version "1.0.0"
@@ -6398,69 +5621,36 @@ is-negative-zero@^2.0.0:
   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-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
 
-is-number@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
+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:
-    kind-of "^3.0.2"
+    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-obj@^1.0.0, is-obj@^1.0.1:
+is-obj@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
 
-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-cwd@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.2.0.tgz#67d43b82664a7b5191fd9119127eb300048a9fdb"
-  integrity sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==
-
-is-path-in-cwd@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.1.0.tgz#bfe2dca26c69f397265a4009963602935a053acb"
-  integrity sha512-rNocXHgipO+rvnP6dk3zI20RpOtrAM/kzbB258Uw5BWr3TpXi861yzjo16Dn4hUox07iw5AyeMLHWsujkjzvRQ==
-  dependencies:
-    is-path-inside "^2.1.0"
-
-is-path-inside@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-2.1.0.tgz#7c9810587d659a40d27bcdb4d5616eab059494b2"
-  integrity sha512-wiyhTzfDWsvwAW53OBWF5zuvaOGlZ6PwYxAbPVDhpm+gM09xKQGjBq/8uYN12aDvMxnAnq3dxTyoSoRNmg5YFg==
-  dependencies:
-    path-is-inside "^1.0.2"
-
-is-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-plain-obj@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
-
-is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
-  dependencies:
-    isobject "^3.0.1"
+is-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.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
-  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+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"
@@ -6475,21 +5665,29 @@ is-regex@^1.1.1:
   dependencies:
     has-symbols "^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-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-regexp/-/is-regexp-1.0.0.tgz#fd2d883545c46bac5a633e7b9a09e87fa2cb5069"
 
-is-resolvable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88"
-
-is-root@2.1.0:
+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-stream@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
 
 is-stream@^2.0.0:
   version "2.0.0"
@@ -6501,11 +5699,12 @@ is-string@^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@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-3.0.0.tgz#9321dbd29c212e5ca99c4fa9794c714bcafa2f75"
+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:
-    html-comment-regex "^1.1.0"
+    has-tostringtag "^1.0.0"
 
 is-symbol@^1.0.2:
   version "1.0.2"
@@ -6513,36 +5712,33 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.0"
 
-is-typedarray@^1.0.0, is-typedarray@~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-windows@^1.0.2:
+is-weakref@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
-
-is-wsl@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-1.1.0.tgz#1f16e4aa22b04d1336b66188a66af3c600c3a66d"
+  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.1.1, is-wsl@^2.2.0:
+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==
-
-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:
+isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
@@ -6550,33 +5746,25 @@ isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
 
-isobject@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"
-  dependencies:
-    isarray "1.0.0"
-
-isobject@^3.0.0, isobject@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
-
-isstream@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
-
 istanbul-lib-coverage@^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-instrument@^4.0.0, istanbul-lib-instrument@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz#873c6fff897450118222774696a3f28902d77c1d"
-  integrity sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==
+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.7.5"
+    "@babel/core" "^7.12.3"
+    "@babel/parser" "^7.14.7"
     "@istanbuljs/schema" "^0.1.2"
-    istanbul-lib-coverage "^3.0.0"
+    istanbul-lib-coverage "^3.2.0"
     semver "^6.3.0"
 
 istanbul-lib-report@^3.0.0:
@@ -6597,235 +5785,286 @@ istanbul-lib-source-maps@^4.0.0:
     istanbul-lib-coverage "^3.0.0"
     source-map "^0.6.1"
 
-istanbul-reports@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-3.0.2.tgz#d593210e5000683750cb09fc0644e4b6e27fd53b"
-  integrity sha512-9tZvz7AiR3PEDNGiV9vIouQ/EAcqMXFmkcA1CDFTwOB98OZVDL0PH9glHotf5Ugp6GCOTypfzGWI/OqjWNCRUw==
+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@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
-  integrity sha512-fDS7szLcY9sCtIip8Fjry9oGf3I2ht/QT21bAHm5Dmf0mD4X3ReNUf17y+bO6fR8WgbIZTlbyG1ak/53cbRzKQ==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    execa "^4.0.0"
-    throat "^5.0.0"
-
-jest-circus@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-26.6.0.tgz#7d9647b2e7f921181869faae1f90a2629fd70705"
-  integrity sha512-L2/Y9szN6FJPWFK8kzWXwfp+FOR7xq0cUL4lIsdbIdwz3Vh6P1nrpcqOleSzr28zOtSHQNV9Z7Tl+KkuK7t5Ng==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.6.0"
-    "@jest/test-result" "^26.6.0"
-    "@jest/types" "^26.6.0"
-    "@types/babel__traverse" "^7.0.4"
+jake@^10.8.5:
+  version "10.8.5"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
+  integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
+  dependencies:
+    async "^3.2.3"
+    chalk "^4.0.2"
+    filelist "^1.0.1"
+    minimatch "^3.0.4"
+
+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 "^26.6.0"
+    expect "^27.5.1"
     is-generator-fn "^2.0.0"
-    jest-each "^26.6.0"
-    jest-matcher-utils "^26.6.0"
-    jest-message-util "^26.6.0"
-    jest-runner "^26.6.0"
-    jest-runtime "^26.6.0"
-    jest-snapshot "^26.6.0"
-    jest-util "^26.6.0"
-    pretty-format "^26.6.0"
-    stack-utils "^2.0.2"
-    throat "^5.0.0"
-
-jest-cli@^26.6.0:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-26.6.3.tgz#43117cfef24bc4cd691a174a8796a532e135e92a"
-  integrity sha512-GF9noBSa9t08pSyl3CY4frMrqp+aQXFGFkf5hEPbh/pIUFYWMK6ZLTfbmadxJVcJrdRoChlWQsA2VkJcDFK8hg==
-  dependencies:
-    "@jest/core" "^26.6.3"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    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.4"
+    graceful-fs "^4.2.9"
     import-local "^3.0.2"
-    is-ci "^2.0.0"
-    jest-config "^26.6.3"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
+    jest-config "^27.5.1"
+    jest-util "^27.5.1"
+    jest-validate "^27.5.1"
     prompts "^2.0.1"
-    yargs "^15.4.1"
+    yargs "^16.2.0"
 
-jest-config@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-26.6.3.tgz#64f41444eef9eb03dc51d5c53b75c8c71f645349"
-  integrity sha512-t5qdIj/bCj2j7NFVHb2nFB4aUdfucDn3JRKgrZnplb8nieAirAzRSHP8uDEd+qV6ygzg9Pz4YG7UTJf94LPSyg==
+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.1.0"
-    "@jest/test-sequencer" "^26.6.3"
-    "@jest/types" "^26.6.2"
-    babel-jest "^26.6.3"
+    "@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.4"
-    jest-environment-jsdom "^26.6.2"
-    jest-environment-node "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-jasmine2 "^26.6.3"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
+    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@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394"
-  integrity sha512-6m+9Z3Gv9wN0WFVasqjCL/06+EFCMTqDEUl/b87HYK2rAPTyfz4ZIuSlPhY51PIQRWx5TaxeF1qmXKe9gfN3sA==
+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 "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
+    diff-sequences "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
 
-jest-docblock@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-26.0.0.tgz#3e2fa20899fc928cb13bd0ff68bd3711a36889b5"
-  integrity sha512-RDZ4Iz3QbtRWycd8bUEPxQsTlYazfYn/h5R65Fc6gOfwozFhoImx+affzky/FFBuqISPTqjXomoIGJVKBWoo0w==
-  dependencies:
-    detect-newline "^3.0.0"
-
-jest-each@^26.6.0, jest-each@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-26.6.2.tgz#02526438a77a67401c8a6382dfe5999952c167cb"
-  integrity sha512-Mer/f0KaATbjl8MCJ+0GEpNdqmnVmDYqCTJYTvoo7rqmRiDllmp2AYN+06F93nXcY3ur9ShIjS+CO/uD+BbH4A==
+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:
-    "@jest/types" "^26.6.2"
     chalk "^4.0.0"
-    jest-get-type "^26.3.0"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
+    diff-sequences "^28.1.1"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
 
-jest-environment-jsdom@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-26.6.2.tgz#78d09fe9cf019a357009b9b7e1f101d23bd1da3e"
-  integrity sha512-jgPqCruTlt3Kwqg5/WVFyHIOJHsiAvhcp2qiR2QQstuG9yWox5+iHpU3ZrcBxW14T4fe5Z68jAfLRh7joCSP2Q==
+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:
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/node" "*"
-    jest-mock "^26.6.2"
-    jest-util "^26.6.2"
-    jsdom "^16.4.0"
+    detect-newline "^3.0.0"
 
-jest-environment-node@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-26.6.2.tgz#824e4c7fb4944646356f11ac75b229b0035f2b0c"
-  integrity sha512-zhtMio3Exty18dy8ee8eJ9kjnRyZC1N4C1Nt/VShN1apyXc8rWGtJ9lI7vqiWcyyXS4BVSEn9lxAM2D+07/Tag==
+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/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@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 "^26.6.2"
-    jest-util "^26.6.2"
+    jest-mock "^27.5.1"
+    jest-util "^27.5.1"
 
-jest-get-type@^26.3.0:
-  version "26.3.0"
-  resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0"
-  integrity sha512-TpfaviN1R2pQWkIihlfEanwOXK0zcxrKEE4MlU6Tn7keoXdN6/3gK/xl0yEh8DOunn5pOVGKf8hB4R9gVh04ig==
+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@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-26.6.2.tgz#dd7e60fe7dc0e9f911a23d79c5ff7fb5c2cafeaa"
-  integrity sha512-easWIJXIw71B2RdR8kgqpjQrbMRWQBgiBwXYEhtGUTaX+doCjBheluShdDMeR8IMfJiTqH4+zfhtg29apJf/8w==
+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" "^26.6.2"
+    "@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.4"
-    jest-regex-util "^26.0.0"
-    jest-serializer "^26.6.2"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
-    micromatch "^4.0.2"
-    sane "^4.0.3"
+    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.1.2"
-
-jest-jasmine2@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-26.6.3.tgz#adc3cf915deacb5212c93b9f3547cd12958f2edd"
-  integrity sha512-kPKUrQtc8aYwBV7CqBg5pu+tmYXlvFlSFYn18ev4gPFtrRzB15N2gW/Roew3187q2w2eHuu0MU9TJz6w0/nPEg==
-  dependencies:
-    "@babel/traverse" "^7.1.0"
-    "@jest/environment" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    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 "^26.6.2"
+    expect "^27.5.1"
     is-generator-fn "^2.0.0"
-    jest-each "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    pretty-format "^26.6.2"
-    throat "^5.0.0"
-
-jest-leak-detector@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-26.6.2.tgz#7717cf118b92238f2eba65054c8a0c9c653a91af"
-  integrity sha512-i4xlXpsVSMeKvg2cEKdfhh0H39qlJlP5Ex1yQxwF9ubahboQYMgTtz5oML35AVA3B4Eu+YsmwaiKVev9KCvLxg==
+    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:
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
+    chalk "^4.0.0"
+    jest-diff "^27.5.1"
+    jest-get-type "^27.5.1"
+    pretty-format "^27.5.1"
 
-jest-matcher-utils@^26.6.0, jest-matcher-utils@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-26.6.2.tgz#8e6fd6e863c8b2d31ac6472eeb237bc595e53e7a"
-  integrity sha512-llnc8vQgYcNqDrqRDXWwMr9i7rS5XFiCwvh6DTP7Jqa2mqpcCBBlpCbn+trkG0KNhPu/h8rzyBkriOtBstvWhw==
+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 "^26.6.2"
-    jest-get-type "^26.3.0"
-    pretty-format "^26.6.2"
+    jest-diff "^28.1.3"
+    jest-get-type "^28.0.2"
+    pretty-format "^28.1.3"
 
-jest-message-util@^26.6.0, jest-message-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-26.6.2.tgz#58173744ad6fc0506b5d21150b9be56ef001ca07"
-  integrity sha512-rGiLePzQ3AzwUshu2+Rn+UMFk0pHN58sOG+IaJbk5Jxuqo3NYO1U2/MIR4S1sKgsoYSXSzdtSa0TgrmtUwEbmA==
+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.0.0"
-    "@jest/types" "^26.6.2"
+    "@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.4"
-    micromatch "^4.0.2"
-    pretty-format "^26.6.2"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^27.5.1"
     slash "^3.0.0"
-    stack-utils "^2.0.2"
+    stack-utils "^2.0.3"
 
-jest-mock@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-26.6.2.tgz#d6cb712b041ed47fe0d9b6fc3474bc6543feb302"
-  integrity sha512-YyFjePHHp1LzpzYcmgqkJ0nm0gg/lJx2aZFzFy1S6eUqNjXsOqTK10zNRff2dNfssgokjkG65OlWNcIlgd3zew==
+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" "^26.6.2"
+    "@jest/types" "^27.5.1"
     "@types/node" "*"
 
 jest-pnp-resolver@^1.2.2:
@@ -6833,195 +6072,209 @@ jest-pnp-resolver@^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@^26.0.0:
-  version "26.0.0"
-  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-26.0.0.tgz#d25e7184b36e39fd466c3bc41be0971e821fee28"
-  integrity sha512-Gv3ZIs/nA48/Zvjrl34bf+oD76JHiGDUxNOVgUjh3j890sblXryjY4rss71fPtD/njchl6PSE2hIhvyWa1eT0A==
+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-resolve-dependencies@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-26.6.3.tgz#6680859ee5d22ee5dcd961fe4871f59f4c784fb6"
-  integrity sha512-pVwUjJkxbhe4RY8QEWzN3vns2kqyuldKpxlxJlzEYfKSvY6/bMvxoFrYYzUO1Gx28yKWN37qyV7rIoIp2h8fTg==
-  dependencies:
-    "@jest/types" "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-snapshot "^26.6.2"
+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@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.0.tgz#070fe7159af87b03e50f52ea5e17ee95bbee40e1"
-  integrity sha512-tRAz2bwraHufNp+CCmAD8ciyCpXCs1NQxB5EJAmtCFy6BN81loFEGWKzYu26Y62lAJJe4X4jg36Kf+NsQyiStQ==
+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" "^26.6.0"
-    chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    jest-pnp-resolver "^1.2.2"
-    jest-util "^26.6.0"
-    read-pkg-up "^7.0.1"
-    resolve "^1.17.0"
-    slash "^3.0.0"
+    "@jest/types" "^27.5.1"
+    jest-regex-util "^27.5.1"
+    jest-snapshot "^27.5.1"
 
-jest-resolve@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-26.6.2.tgz#a3ab1517217f469b504f1b56603c5bb541fbb507"
-  integrity sha512-sOxsZOq25mT1wRsfHcbtkInS+Ek7Q8jCHUB0ZUTP0tc/c41QHriU/NunqMfCUWsL4H3MHpvQD4QR9kSYhS7UvQ==
+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" "^26.6.2"
+    "@jest/types" "^27.5.1"
     chalk "^4.0.0"
-    graceful-fs "^4.2.4"
+    graceful-fs "^4.2.9"
+    jest-haste-map "^27.5.1"
     jest-pnp-resolver "^1.2.2"
-    jest-util "^26.6.2"
-    read-pkg-up "^7.0.1"
-    resolve "^1.18.1"
+    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@^26.6.0, jest-runner@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-26.6.3.tgz#2d1fed3d46e10f233fd1dbd3bfaa3fe8924be159"
-  integrity sha512-atgKpRHnaA2OvByG/HpGA4g6CSPS/1LK0jK3gATJAoptC1ojltpmVlYC3TYgdmGp+GLuhzpH30Gvs36szSL2JQ==
+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" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@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.7.1"
-    exit "^0.1.2"
-    graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-docblock "^26.0.0"
-    jest-haste-map "^26.6.2"
-    jest-leak-detector "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
-    jest-runtime "^26.6.3"
-    jest-util "^26.6.2"
-    jest-worker "^26.6.2"
+    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 "^5.0.0"
-
-jest-runtime@^26.6.0, jest-runtime@^26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-26.6.3.tgz#4f64efbcfac398331b74b4b3c82d27d401b8fa2b"
-  integrity sha512-lrzyR3N8sacTAMeonbqpnSka1dHNux2uk0qqDXVkMv2c/A3wYnvQ4EXuI013Y6+gSKSCxdaczvf4HF0mVXHRdw==
-  dependencies:
-    "@jest/console" "^26.6.2"
-    "@jest/environment" "^26.6.2"
-    "@jest/fake-timers" "^26.6.2"
-    "@jest/globals" "^26.6.2"
-    "@jest/source-map" "^26.6.2"
-    "@jest/test-result" "^26.6.2"
-    "@jest/transform" "^26.6.2"
-    "@jest/types" "^26.6.2"
-    "@types/yargs" "^15.0.0"
+    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 "^0.6.0"
+    cjs-module-lexer "^1.0.0"
     collect-v8-coverage "^1.0.0"
-    exit "^0.1.2"
+    execa "^5.0.0"
     glob "^7.1.3"
-    graceful-fs "^4.2.4"
-    jest-config "^26.6.3"
-    jest-haste-map "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-mock "^26.6.2"
-    jest-regex-util "^26.0.0"
-    jest-resolve "^26.6.2"
-    jest-snapshot "^26.6.2"
-    jest-util "^26.6.2"
-    jest-validate "^26.6.2"
+    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"
-    yargs "^15.4.1"
 
-jest-serializer@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1"
-  integrity sha512-S5wqyz0DXnNJPd/xfIzZ5Xnp1HrJWBczg8mMfMpN78OJ5eDxXyf+Ygld9wX1DnUWbIbhM1YDY95NjR4CBXkb2g==
+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.4"
+    graceful-fs "^4.2.9"
 
-jest-snapshot@^26.6.0, jest-snapshot@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-26.6.2.tgz#f3b0af1acb223316850bd14e1beea9837fb39c84"
-  integrity sha512-OLhxz05EzUtsAmOMzuupt1lHYXCNib0ECyuZ/PZOx9TrZcC8vL0x+DUG3TL+GLX3yHG45e6YGjIm0XwDc3q3og==
+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/types" "^26.6.2"
+    "@jest/transform" "^27.5.1"
+    "@jest/types" "^27.5.1"
     "@types/babel__traverse" "^7.0.4"
-    "@types/prettier" "^2.0.0"
+    "@types/prettier" "^2.1.5"
+    babel-preset-current-node-syntax "^1.0.0"
     chalk "^4.0.0"
-    expect "^26.6.2"
-    graceful-fs "^4.2.4"
-    jest-diff "^26.6.2"
-    jest-get-type "^26.3.0"
-    jest-haste-map "^26.6.2"
-    jest-matcher-utils "^26.6.2"
-    jest-message-util "^26.6.2"
-    jest-resolve "^26.6.2"
+    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 "^26.6.2"
+    pretty-format "^27.5.1"
     semver "^7.3.2"
 
-jest-util@^26.6.0, jest-util@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1"
-  integrity sha512-MDW0fKfsn0OI7MS7Euz6h8HNDXVQ0gaM9uW6RjfDmd1DAFcaxX9OqIakHIqhbnmF08Cf2DLDG+ulq8YQQ0Lp0Q==
+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" "^26.6.2"
+    "@jest/types" "^27.5.1"
     "@types/node" "*"
     chalk "^4.0.0"
-    graceful-fs "^4.2.4"
-    is-ci "^2.0.0"
-    micromatch "^4.0.2"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
 
-jest-validate@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-26.6.2.tgz#23d380971587150467342911c3d7b4ac57ab20ec"
-  integrity sha512-NEYZ9Aeyj0i5rQqbq+tpIOom0YS1u2MVu6+euBsvpgIme+FOfRmoC4R5p0JiAUpaFvFy24xgrpMknarR/93XjQ==
+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" "^26.6.2"
-    camelcase "^6.0.0"
+    "@jest/types" "^27.5.1"
+    camelcase "^6.2.0"
     chalk "^4.0.0"
-    jest-get-type "^26.3.0"
+    jest-get-type "^27.5.1"
     leven "^3.1.0"
-    pretty-format "^26.6.2"
+    pretty-format "^27.5.1"
 
-jest-watch-typeahead@0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-0.6.1.tgz#45221b86bb6710b7e97baaa1640ae24a07785e63"
-  integrity sha512-ITVnHhj3Jd/QkqQcTqZfRgjfyRhDFM/auzgVo2RKvSwi18YMvh0WvXDJFoFED6c7jd/5jxtu4kSOb9PTu2cPVg==
+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 "^26.0.0"
-    jest-watcher "^26.3.0"
-    slash "^3.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"
-    strip-ansi "^6.0.0"
 
-jest-watcher@^26.3.0, jest-watcher@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-26.6.2.tgz#a5b683b8f9d68dbcb1d7dae32172d2cca0592975"
-  integrity sha512-WKJob0P/Em2csiVthsI68p6aGKTIcsfjH9Gsx1f0A3Italz43e3ho0geSAVsmj09RWOELP1AZ/DXyJgOgDKxXQ==
+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" "^26.6.2"
-    "@jest/types" "^26.6.2"
+    "@jest/test-result" "^28.1.3"
+    "@jest/types" "^28.1.3"
     "@types/node" "*"
     ansi-escapes "^4.2.1"
     chalk "^4.0.0"
-    jest-util "^26.6.2"
+    emittery "^0.10.2"
+    jest-util "^28.1.3"
     string-length "^4.0.1"
 
-jest-worker@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
-  dependencies:
-    merge-stream "^2.0.0"
-    supports-color "^6.1.0"
-
-jest-worker@^26.5.0, jest-worker@^26.6.2:
+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==
@@ -7030,30 +6283,37 @@ jest-worker@^26.5.0, jest-worker@^26.6.2:
     merge-stream "^2.0.0"
     supports-color "^7.0.0"
 
-jest@26.6.0:
-  version "26.6.0"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.0.tgz#546b25a1d8c888569dbbe93cae131748086a4a25"
-  integrity sha512-jxTmrvuecVISvKFFhOkjsWRZV7sFqdSUAd1ajOKY+/QE/aLBVstsJ/dX8GczLzwiT6ZEwwmZqtCUHLHHQVzcfA==
+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:
-    "@jest/core" "^26.6.0"
-    import-local "^3.0.2"
-    jest-cli "^26.6.0"
+    "@types/node" "*"
+    merge-stream "^2.0.0"
+    supports-color "^8.0.0"
 
-js-tokens@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
+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"
 
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
 
-js-yaml@^3.12.0, js-yaml@^3.9.0:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.12.0.tgz#eaed656ec8344f10f527c6bfa1b6e2244de167d1"
-  dependencies:
-    argparse "^1.0.7"
-    esprima "^4.0.0"
-
 js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
@@ -7061,40 +6321,44 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
+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.4.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.4.0.tgz#36005bde2d136f73eee1a830c6d45e55408edddb"
-  integrity sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==
+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.3"
-    acorn "^7.1.1"
+    abab "^2.0.5"
+    acorn "^8.2.4"
     acorn-globals "^6.0.0"
     cssom "^0.4.4"
-    cssstyle "^2.2.0"
+    cssstyle "^2.3.0"
     data-urls "^2.0.0"
-    decimal.js "^10.2.0"
+    decimal.js "^10.2.1"
     domexception "^2.0.1"
-    escodegen "^1.14.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
     html-encoding-sniffer "^2.0.1"
-    is-potential-custom-element-name "^1.0.0"
+    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 "5.1.1"
-    request "^2.88.2"
-    request-promise-native "^1.0.8"
-    saxes "^5.0.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
     symbol-tree "^3.2.4"
-    tough-cookie "^3.0.1"
+    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.0.0"
-    ws "^7.2.3"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
     xml-name-validator "^3.0.0"
 
 jsesc@^2.5.1:
@@ -7105,16 +6369,7 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
-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"
-
-json-parse-even-better-errors@^2.3.0:
+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==
@@ -7123,26 +6378,20 @@ json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
 
-json-schema@0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"
+json-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"
 
-json-stringify-safe@~5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
-
-json3@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
-
-json5@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-0.5.1.tgz#1eade7acc012034ad84e2396767ead9fa5495821"
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
@@ -7162,11 +6411,10 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
-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"
+json5@^2.2.0, json5@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.1.tgz#655d50ed1e6f95ad1a3caababd2b0efda10b395c"
+  integrity sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==
 
 jsonfile@^6.0.1:
   version "6.1.0"
@@ -7177,16 +6425,12 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
-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"
+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.1.0:
+"jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.1.0.tgz#642f1d7b88aa6d7eb9d8f2210e166478444fa891"
   integrity sha512-d4/UOjg+mxAWxCiF0c5UTSwyqbchkbqCvK87aBovhnh8GtysTjWmgC63tY0cJx/HzGgm9qnA147jVBdpOiQ2RA==
@@ -7194,35 +6438,15 @@ jsprim@^1.2.2:
     array-includes "^3.1.1"
     object.assign "^4.1.1"
 
-keyv@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
-  integrity sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==
-  dependencies:
-    json-buffer "3.0.0"
-
-killable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
-  integrity sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==
-
-kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64"
-  dependencies:
-    is-buffer "^1.1.5"
-
-kind-of@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-4.0.0.tgz#20813df3d712928b207378691a45066fae72dd57"
+jsx-ast-utils@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz#76b3e6e6cece5c69d49a5792c3d01bd1a0cdc7ea"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
   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"
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
@@ -7230,6 +6454,11 @@ 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==
+
 language-subtag-registry@~0.3.2:
   version "0.3.21"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
@@ -7242,26 +6471,6 @@ language-tags@^1.0.5:
   dependencies:
     language-subtag-registry "~0.3.2"
 
-last-call-webpack-plugin@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz#9742df0e10e3cf46e5c0381c2de90d3a7a2d7555"
-  dependencies:
-    lodash "^4.17.5"
-    webpack-sources "^1.1.0"
-
-latest-version@^5.0.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/latest-version/-/latest-version-5.1.0.tgz#119dfe908fe38d15dfa43ecd13fa12ec8832face"
-  integrity sha512-weT+r0kTkRQdCdYCNtkMwWXQTMEswKrFBkm4ckQOMVhhqhIMI1UT2hMj+1iigIhgSZm5gTmrRXBNoGUgaTY1xA==
-  dependencies:
-    package-json "^6.3.0"
-
-lcid@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/lcid/-/lcid-2.0.0.tgz#6ef5d2df60e52f82eb228a4c373e8d1f397253cf"
-  dependencies:
-    invert-kv "^2.0.0"
-
 leven@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
@@ -7281,33 +6490,22 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lilconfig@^2.0.3, lilconfig@^2.0.5, lilconfig@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/lilconfig/-/lilconfig-2.0.6.tgz#32a384558bd58af3d4c6e077dd1ad1d397bc69d4"
+  integrity sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==
+
 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=
 
-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-runner@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
-
-loader-utils@1.2.3, loader-utils@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
+loader-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.0:
+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==
@@ -7316,29 +6514,10 @@ loader-utils@2.0.0, loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.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"
-
-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@^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"
+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"
@@ -7354,48 +6533,40 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash._reinterpolate@^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"
+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.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"
 
-lodash.template@^4.2.4:
-  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.template@^4.5.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.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.17.10, lodash@^4.17.5, lodash@^4.2.0:
+lodash@^4.17.10:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
-lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15:
+lodash@^4.17.13, lodash@^4.17.15:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
 
@@ -7404,12 +6575,12 @@ lodash@^4.17.19:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
-loglevel@^1.6.8:
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.1.tgz#005fde2f5e6e47068f935ff28573e125ef72f197"
-  integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
+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.0.0, loose-envify@^1.4.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"
   dependencies:
@@ -7422,22 +6593,6 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-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"
-  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"
@@ -7445,6 +6600,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+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==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
@@ -7452,20 +6612,7 @@ magic-string@^0.25.0, magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.4"
 
-make-dir@^1.0.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
-  dependencies:
-    pify "^3.0.0"
-
-make-dir@^2.0.0, make-dir@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
-  dependencies:
-    pify "^4.0.1"
-    semver "^5.6.0"
-
-make-dir@^3.0.0, make-dir@^3.0.2:
+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==
@@ -7478,64 +6625,25 @@ makeerror@1.0.x:
   dependencies:
     tmpl "1.0.x"
 
-map-age-cleaner@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.2.tgz#098fb15538fd3dbe461f12745b0ca8568d4e3f74"
-  dependencies:
-    p-defer "^1.0.0"
-
-map-cache@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/map-cache/-/map-cache-0.2.2.tgz#c32abd0bd6525d9b051645bb4f26ac5dc98a0dbf"
-
-map-visit@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/map-visit/-/map-visit-1.0.0.tgz#ecdca8f13144e660f1b5bd41f12f3479d98dfb8f"
-  dependencies:
-    object-visit "^1.0.0"
-
-md5.js@^1.3.4:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-    safe-buffer "^5.1.2"
+mdn-data@2.0.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"
 
-mdn-data@~1.1.0:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-1.1.4.tgz#50b5d4ffc4575276573c4eedb8780812a8419f01"
-
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
 
-mem@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-4.0.0.tgz#6437690d9471678f6cc83659c00cbafcd6b0cdaf"
-  dependencies:
-    map-age-cleaner "^0.1.1"
-    mimic-fn "^1.0.0"
-    p-is-promise "^1.1.0"
-
-memory-fs@^0.4.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"
-
-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==
+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:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
+    fs-monkey "^1.0.3"
 
 merge-descriptors@1.0.1:
   version "1.0.1"
@@ -7545,7 +6653,7 @@ 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.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==
@@ -7554,28 +6662,6 @@ methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
 
-microevent.ts@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/microevent.ts/-/microevent.ts-0.1.1.tgz#70b09b83f43df5172d0205a63025bce0f7357fa0"
-
-micromatch@^3.1.10, micromatch@^3.1.4:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
 micromatch@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.2.tgz#4fcb0999bf9fbc2fcbdd212f6d629b9a56c39259"
@@ -7584,12 +6670,13 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-miller-rabin@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
+micromatch@^4.0.4, micromatch@^4.0.5:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
   dependencies:
-    bn.js "^4.0.0"
-    brorand "^1.0.1"
+    braces "^3.0.2"
+    picomatch "^2.3.1"
 
 mime-db@1.40.0:
   version "1.40.0"
@@ -7601,6 +6688,11 @@ mime-db@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"
@@ -7610,7 +6702,7 @@ mime-db@~1.36.0:
   version "1.36.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.36.0.tgz#5020478db3c7fe93aad7bbcc4dcf869c43363397"
 
-mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18, mime-types@~2.1.19:
+mime-types@^2.1.12, mime-types@~2.1.17, mime-types@~2.1.18:
   version "2.1.20"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.20.tgz#930cb719d571e903738520f8470911548ca2cc19"
   dependencies:
@@ -7623,6 +6715,13 @@ mime-types@^2.1.27:
   dependencies:
     mime-db "1.44.0"
 
+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.24:
   version "2.1.24"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.24.tgz#b6f8d0b3e951efb77dedeca194cff6d16f676f81"
@@ -7635,52 +6734,51 @@ mime@1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^2.4.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
-
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
 
-mimic-response@^1.0.0, mimic-response@^1.0.1:
+min-indent@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-1.0.1.tgz#4923538878eef42063cb8a3e3b0798781487ab1b"
-  integrity sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
+  integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-mini-css-extract-plugin@0.11.3:
-  version "0.11.3"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz#15b0910a7f32e62ffde4a7430cfefbd700724ea6"
-  integrity sha512-n9BA8LonkOkW1/zn+IbLPQmovsL0wMb9yx75fMJQZf2X1Zoec9yTZtyMePcyu19wPkmFbzZZA6fLTotpFhQsOA==
+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:
-    loader-utils "^1.1.0"
-    normalize-url "1.9.1"
-    schema-utils "^1.0.0"
-    webpack-sources "^1.1.0"
+    schema-utils "^4.0.0"
 
-minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
 
-minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
-
 minimatch@3.0.4, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   dependencies:
     brace-expansion "^1.1.7"
 
+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.0"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.1.0.tgz#1717b464f4971b144f6aabe8f2d0b8e4511e09c7"
+  integrity sha512-9TPBGGak4nHfGZsPBohm9AWg6NoT7QTCehS3BIJABslyZbzxfV78QM2Y6+i741OPZIafFAaiiEMh5OyIrJPgtg==
+  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.1.1, minimist@^1.2.0:
+minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
 
@@ -7689,193 +6787,65 @@ minimist@^1.2.5:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
 
-minipass-collect@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"
-  integrity sha512-6T6lH0H8OG9kITm/Jm6tdooIbogG9e0tLgpY6mphXSm/A9u8Nq1ryBG+Qspiub9LjWlBPsPS3tWQ/Botq4FdxA==
-  dependencies:
-    minipass "^3.0.0"
-
-minipass-flush@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/minipass-flush/-/minipass-flush-1.0.5.tgz#82e7135d7e89a50ffe64610a787953c4c4cbb373"
-  integrity sha512-JmQSYYpPUqX5Jyn1mXaRwOda1uQ8HP5KAT/oDSLCzt1BYRhQU0/hDtsB1ufZfEEzMZ9aAVmsBw8+FWsIXlClWw==
-  dependencies:
-    minipass "^3.0.0"
+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==
 
-minipass-pipeline@^1.2.2:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/minipass-pipeline/-/minipass-pipeline-1.2.4.tgz#68472f79711c084657c067c5c6ad93cddea8214c"
-  integrity sha512-xuIq7cIOt09RPRJ19gdi4b+RiNvDFYe5JH+ggNvBqGqpQXcru3PcRmOZuHBKWK1Txf9+cQ+HMVN4d6z46LZP7A==
+mkdirp@~0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
-    minipass "^3.0.0"
-
-minipass@^2.2.1, minipass@^2.3.3:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.4.tgz#4768d7605ed6194d6d576169b9e12ef71e9d9957"
-  dependencies:
-    safe-buffer "^5.1.2"
-    yallist "^3.0.0"
-
-minipass@^3.0.0, minipass@^3.1.1:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.1.3.tgz#7d42ff1f39635482e15f9cdb53184deebd5815fd"
-  integrity sha512-Mgd2GdMVzY+x3IJ+oHnVM+KG3lA5c8tnabyJKmHSaG2kAGpudxuOf8ToDkhumF7UzME7DecbQE9uOZhNm7PuJg==
-  dependencies:
-    yallist "^4.0.0"
-
-minizlib@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-1.1.0.tgz#11e13658ce46bc3a70a267aac58359d1e0c29ceb"
-  dependencies:
-    minipass "^2.2.1"
-
-minizlib@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931"
-  integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==
-  dependencies:
-    minipass "^3.0.0"
-    yallist "^4.0.0"
-
-mississippi@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-3.0.0.tgz#ea0a3291f97e0b5e8776b363d5f0a12d94c67022"
-  dependencies:
-    concat-stream "^1.5.0"
-    duplexify "^3.4.2"
-    end-of-stream "^1.1.0"
-    flush-write-stream "^1.0.0"
-    from2 "^2.1.0"
-    parallel-transform "^1.1.0"
-    pump "^3.0.0"
-    pumpify "^1.3.3"
-    stream-each "^1.1.0"
-    through2 "^2.0.0"
-
-mixin-deep@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
-  dependencies:
-    for-in "^1.0.2"
-    is-extendable "^1.0.1"
-
-mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
-  dependencies:
-    minimist "0.0.8"
-
-mkdirp@^0.5.3, mkdirp@^0.5.5:
-  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, mkdirp@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
-  integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==
-
-move-concurrently@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
-  dependencies:
-    aproba "^1.1.1"
-    copy-concurrently "^1.0.0"
-    fs-write-stream-atomic "^1.0.8"
-    mkdirp "^0.5.1"
-    rimraf "^2.5.4"
-    run-queue "^1.0.3"
+    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.1, ms@^2.1.1:
+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:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
+  integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
+
+ms@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.1.tgz#30a5864eb3ebb0a66f2ebe6d727af06a09d86e0a"
 
-multicast-dns-service-types@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz#899f11d9686e5e05cb91b35d5f0e63b773cfc901"
-
-multicast-dns@^6.0.1:
-  version "6.2.3"
-  resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-6.2.3.tgz#a0ec7bd9055c4282f790c3c82f4e28db3b31b229"
+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 "^1.3.1"
+    dns-packet "^5.2.2"
     thunky "^1.0.2"
 
-nan@^2.12.1:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.0.tgz#7818f722027b2459a86f0295d434d1fc2336c52c"
-
-nanoid@^3.1.20:
-  version "3.1.20"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
-  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
-
-nanomatch@^1.2.9:
-  version "1.2.13"
-  resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    fragment-cache "^0.2.1"
-    is-windows "^1.0.2"
-    kind-of "^6.0.2"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.1"
-
-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"
+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==
 
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
-needle@^2.2.1:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.4.tgz#51931bff82533b1928b7d1d69e01f1b00ffd2a4e"
-  dependencies:
-    debug "^2.1.2"
-    iconv-lite "^0.4.4"
-    sax "^1.2.4"
-
 negotiator@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.1.tgz#2b327184e8992101177b28563fb5e7102acd0ca9"
 
-negotiator@0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
-  integrity sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==
+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:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.2.tgz#489105ce7bc54e709d736b195f82135048c50fcc"
-
-neo-async@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.1.tgz#ac27ada66167fa8849a6addd837f6b189ad2081c"
-
-next-tick@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
-
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
+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"
@@ -7885,146 +6855,54 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
-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-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"
 
-node-libs-browser@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
-  dependencies:
-    assert "^1.1.1"
-    browserify-zlib "^0.2.0"
-    buffer "^4.3.0"
-    console-browserify "^1.1.0"
-    constants-browserify "^1.0.0"
-    crypto-browserify "^3.11.0"
-    domain-browser "^1.1.1"
-    events "^3.0.0"
-    https-browserify "^1.0.0"
-    os-browserify "^0.3.0"
-    path-browserify "0.0.1"
-    process "^0.11.10"
-    punycode "^1.2.4"
-    querystring-es3 "^0.2.0"
-    readable-stream "^2.3.3"
-    stream-browserify "^2.0.1"
-    stream-http "^2.7.2"
-    string_decoder "^1.0.0"
-    timers-browserify "^2.0.4"
-    tty-browserify "0.0.0"
-    url "^0.11.0"
-    util "^0.11.0"
-    vm-browserify "^1.0.1"
-
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-
-node-notifier@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-8.0.0.tgz#a7eee2d51da6d0f7ff5094bc7108c911240c1620"
-  integrity sha512-46z7DUmcjoYdaWyXouuFNNfUo6eFa94t23c53c+lG/9Cvauk4a98rAUp9672X5dxGdQmLpPzTxzu8f/OeEPaFA==
-  dependencies:
-    growly "^1.3.0"
-    is-wsl "^2.2.0"
-    semver "^7.3.2"
-    shellwords "^0.1.1"
-    uuid "^8.3.0"
-    which "^2.0.2"
-
-node-pre-gyp@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz#39ba4bb1439da030295f899e3b520b7785766149"
-  dependencies:
-    detect-libc "^1.0.2"
-    mkdirp "^0.5.1"
-    needle "^2.2.1"
-    nopt "^4.0.1"
-    npm-packlist "^1.1.6"
-    npmlog "^4.0.2"
-    rc "^1.2.7"
-    rimraf "^2.6.1"
-    semver "^5.3.0"
-    tar "^4"
-
 node-releases@^1.0.0-alpha.12:
   version "1.0.0-alpha.12"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.0.0-alpha.12.tgz#32e461b879ea76ac674e511d9832cf29da345268"
   dependencies:
     semver "^5.3.0"
 
-node-releases@^1.1.38:
-  version "1.1.39"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.39.tgz#c1011f30343aff5b633153b10ff691d278d08e8d"
-  dependencies:
-    semver "^6.3.0"
-
-node-releases@^1.1.61, node-releases@^1.1.67:
+node-releases@^1.1.67:
   version "1.1.67"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.67.tgz#28ebfcccd0baa6aad8e8d4d8fe4cbc49ae239c12"
   integrity sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==
 
-nodemon@^2.0.6:
+node-releases@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.yarnpkg.com/nodemon/-/nodemon-2.0.6.tgz#1abe1937b463aaf62f0d52e2b7eaadf28cc2240d"
-  integrity sha512-4I3YDSKXg6ltYpcnZeHompqac4E6JeAMpGm8tJnB9Y3T0ehasLa4139dJOcCrB93HHrUMsCrKtoAlXTqT5n4AQ==
+  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.2.2"
-    debug "^3.2.6"
+    chokidar "^3.5.2"
+    debug "^3.2.7"
     ignore-by-default "^1.0.1"
     minimatch "^3.0.4"
-    pstree.remy "^1.1.7"
+    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.3"
-    update-notifier "^4.1.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"
+    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 sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=
+  integrity sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==
   dependencies:
     abbrev "1"
 
-normalize-package-data@^2.3.2:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.4.0.tgz#12f95a307d58352075a04907b84ac8be98ac012f"
-  dependencies:
-    hosted-git-info "^2.1.4"
-    is-builtin-module "^1.0.0"
-    semver "2 || 3 || 4 || 5"
-    validate-npm-package-license "^3.0.1"
-
-normalize-package-data@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
-  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
-  dependencies:
-    hosted-git-info "^2.1.4"
-    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"
-  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"
@@ -8033,91 +6911,49 @@ normalize-range@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
 
-normalize-url@1.9.1:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
-  dependencies:
-    object-assign "^4.0.1"
-    prepend-http "^1.0.0"
-    query-string "^4.1.0"
-    sort-keys "^1.0.0"
-
-normalize-url@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
-
-normalize-url@^4.1.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-4.5.0.tgz#453354087e6ca96957bd8f5baf753f5982142129"
-  integrity sha512-2s47yzUxdexf1OhyRi4Em83iQk0aPvwTddtFz4hnSSw9dCEsLEGf6SwIO8ss/19S9iBb5sJaOuTvTGDeZI00BQ==
-
-npm-bundled@^1.0.1:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.0.5.tgz#3c1732b7ba936b3a10325aef616467c0ccbcc979"
-
-npm-packlist@^1.1.6:
-  version "1.1.11"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.1.11.tgz#84e8c683cbe7867d34b1d357d893ce29e28a02de"
-  dependencies:
-    ignore-walk "^3.0.1"
-    npm-bundled "^1.0.1"
-
-npm-run-path@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
-  dependencies:
-    path-key "^2.0.0"
+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.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"
 
-npmlog@^4.0.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
-  dependencies:
-    are-we-there-yet "~1.1.2"
-    console-control-strings "~1.1.0"
-    gauge "~2.7.3"
-    set-blocking "~2.0.0"
-
-nth-check@^1.0.1, nth-check@~1.0.1:
+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"
+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==
 
-oauth-sign@~0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.9.0.tgz#47a7b016baa68b5fa0ecf3dee08a85c679ac6455"
-
-object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
-object-copy@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/object-copy/-/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
-  dependencies:
-    copy-descriptor "^0.1.0"
-    define-property "^0.2.5"
-    kind-of "^3.0.3"
+object-hash@^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.12.0, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
 object-inspect@^1.6.0:
   version "1.6.0"
@@ -8136,12 +6972,6 @@ object-keys@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
 
-object-visit@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-visit/-/object-visit-1.0.1.tgz#f79c4493af0c5377b59fe39d395e41042dd045bb"
-  dependencies:
-    isobject "^3.0.0"
-
 object.assign@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
@@ -8161,34 +6991,33 @@ object.assign@^4.1.1:
     has-symbols "^1.0.1"
     object-keys "^1.1.1"
 
-object.entries@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.0.tgz#2024fc6d6ba246aee38bdb0ffd5cfbcf371b7519"
+object.assign@^4.1.2, object.assign@^4.1.3:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.4.tgz#9673c7c7c351ab8c4d0b516f4343ebf4dfb7799f"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
   dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.12.0"
-    function-bind "^1.1.1"
-    has "^1.0.3"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
 
-object.entries@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.3.tgz#c601c7f168b62374541a07ddbd3e2d5e4f7711a6"
-  integrity sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.1.5.tgz#e1acdd17c4de2cd96d5a08487cfb9db84d881861"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    has "^1.0.3"
+    es-abstract "^1.19.1"
 
-object.fromentries@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.3.tgz#13cefcffa702dc67750314a3305e8cb3fad1d072"
-  integrity sha512-IDUSMXs6LOSJBWE++L0lzIbSqHl9KDCfff2x/JSEIDtEUavUnyMYC2ZGay/04Zq4UT8lvd4xNhU4/YHKibAOlw==
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/object.fromentries/-/object.fromentries-2.0.5.tgz#7b37b205109c21e741e605727fe8b0ad5fa08251"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    has "^1.0.3"
+    es-abstract "^1.19.1"
 
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
@@ -8197,20 +7026,13 @@ object.getownpropertydescriptors@^2.0.3:
     define-properties "^1.1.2"
     es-abstract "^1.5.1"
 
-object.pick@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/object.pick/-/object.pick-1.3.0.tgz#87a10ac4c1694bd2e1cbf53591a66141fb5dd747"
-  dependencies:
-    isobject "^3.0.1"
-
-object.values@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
+object.hasown@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.1.tgz#ad1eecc60d03f49460600430d97f23882cf592a3"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
   dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.6.1"
-    function-bind "^1.1.0"
-    has "^1.0.1"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
 
 object.values@^1.1.0:
   version "1.1.0"
@@ -8221,23 +7043,23 @@ object.values@^1.1.0:
     function-bind "^1.1.1"
     has "^1.0.3"
 
-object.values@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.2.tgz#7a2015e06fcb0f546bd652486ce8583a4731c731"
-  integrity sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.5.tgz#959f63e3ce9ef108720333082131e4a459b716ac"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    has "^1.0.3"
+    es-abstract "^1.19.1"
 
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
 
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
+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"
 
@@ -8246,40 +7068,27 @@ on-headers@~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:
+once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
   dependencies:
     wrappy "1"
 
-onetime@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
+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@^7.0.2:
-  version "7.3.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-7.3.0.tgz#45461fdee46444f3645b6e14eb3ca94b82e1be69"
-  integrity sha512-mgLwQIx2F/ye9SmbrUkurZCnkoXyXyu9EbHtJZrICjVAJfyMArdHp3KkixGdZx1ZHFPNIwl0DDM1dFFqXbTLZw==
-  dependencies:
-    is-docker "^2.0.0"
-    is-wsl "^2.1.1"
-
-opn@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
-  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
-  dependencies:
-    is-wsl "^1.1.0"
-
-optimize-css-assets-webpack-plugin@5.0.4:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.4.tgz#85883c6528aaa02e30bbad9908c92926bb52dc90"
-  integrity sha512-wqd6FdI2a5/FdoiCNNkEvLeA//lHHfG24Ln2Xm2qqdIk4aOlsR18jwpyOihqQ8849W3qu2DX8fOYxpvTMj+93A==
+open@^8.0.9, 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:
-    cssnano "^4.1.10"
-    last-call-webpack-plugin "^3.0.0"
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
 
 optionator@^0.8.1:
   version "0.8.2"
@@ -8304,67 +7113,6 @@ optionator@^0.9.1:
     type-check "^0.4.0"
     word-wrap "^1.2.3"
 
-original@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/original/-/original-1.0.2.tgz#e442a61cffe1c5fd20a65f3261c26663b303f25f"
-  dependencies:
-    url-parse "^1.4.3"
-
-os-browserify@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/os-browserify/-/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
-
-os-homedir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
-
-os-locale@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/os-locale/-/os-locale-3.0.1.tgz#3b014fbf01d87f60a1e5348d80fe870dc82c4620"
-  dependencies:
-    execa "^0.10.0"
-    lcid "^2.0.0"
-    mem "^4.0.0"
-
-os-tmpdir@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/os-tmpdir/-/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
-
-osenv@^0.1.4:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/osenv/-/osenv-0.1.5.tgz#85cdfafaeb28e8677f416e287592b5f3f49ea410"
-  dependencies:
-    os-homedir "^1.0.0"
-    os-tmpdir "^1.0.0"
-
-p-cancelable@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-cancelable/-/p-cancelable-1.1.0.tgz#d078d15a3af409220c886f1d9a0ca2e441ab26cc"
-  integrity sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==
-
-p-defer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
-
-p-each-series@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/p-each-series/-/p-each-series-2.2.0.tgz#105ab0357ce72b202a8a8b94933672657b5e2a9a"
-  integrity sha512-ycIL2+1V32th+8scbpTvyHNaHe02z0sjgh91XXjAk+ZeXoPN4Z46DVUnzdso0aX4KckKw0FNNFHdjZ2UsZvxiA==
-
-p-finally@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"
-
-p-is-promise@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/p-is-promise/-/p-is-promise-1.1.0.tgz#9c9456989e9f6588017b0434d56097675c3da05e"
-
-p-limit@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
-  dependencies:
-    p-try "^1.0.0"
-
 p-limit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.0.0.tgz#e624ed54ee8c460a778b3c9f3670496ff8a57aec"
@@ -8385,12 +7133,6 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
-p-locate@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
-  dependencies:
-    p-limit "^1.1.0"
-
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -8404,56 +7146,26 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-p-map@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
-  integrity sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==
-
-p-map@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
-  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+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:
-    aggregate-error "^3.0.0"
+    p-limit "^3.0.2"
 
-p-retry@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
-  integrity sha512-XE6G4+YTTkT2a0UWb2kjZe8xNwf8bIbnqpc/IS/idOBVhyves0mK5OJgeocjx7q5pvX/6m23xuzVPYT1uGM73w==
+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:
-    retry "^0.12.0"
-
-p-try@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
+    "@types/retry" "0.12.0"
+    retry "^0.13.1"
 
 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@^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.6"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258"
-
-parallel-transform@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.1.0.tgz#d410f065b05da23081fcd10f28854c29bda33b06"
-  dependencies:
-    cyclist "~0.2.2"
-    inherits "^2.0.3"
-    readable-stream "^2.1.5"
-
-param-case@^3.0.3:
+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==
@@ -8467,29 +7179,6 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-asn1@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.1.tgz#f6bf293818332bd0dab54efb16087724745e6ca8"
-  dependencies:
-    asn1.js "^4.0.0"
-    browserify-aes "^1.0.0"
-    create-hash "^1.1.0"
-    evp_bytestokey "^1.0.0"
-    pbkdf2 "^3.0.3"
-
-parse-json@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
-  dependencies:
-    error-ex "^1.2.0"
-
-parse-json@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
-  dependencies:
-    error-ex "^1.3.1"
-    json-parse-better-errors "^1.0.1"
-
 parse-json@^5.0.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.1.0.tgz#f96088cdf24a8faa9aea9a009f2d9d942c999646"
@@ -8500,10 +7189,20 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse5@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+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:
   version "1.3.2"
@@ -8522,18 +7221,6 @@ pascal-case@^3.1.2:
     no-case "^3.0.4"
     tslib "^2.0.3"
 
-pascalcase@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
-
-path-browserify@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
-
-path-dirname@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
-
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
@@ -8547,15 +7234,6 @@ 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.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
-  integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
-
-path-key@^2.0.0, path-key@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/path-key/-/path-key-2.0.1.tgz#411cadb574c5a140d3a4b1910d40d80cc9f40b40"
-
 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"
@@ -8565,667 +7243,582 @@ path-parse@^1.0.5, path-parse@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
 
+path-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"
 
-path-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
-  dependencies:
-    pify "^2.0.0"
-
 path-type@^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.0.17"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.17.tgz#976c206530617b14ebb32114239f7b09336e93a6"
-  dependencies:
-    create-hash "^1.1.2"
-    create-hmac "^1.1.4"
-    ripemd160 "^2.0.1"
-    safe-buffer "^5.0.1"
-    sha.js "^2.4.8"
-
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
+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==
+
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1, picomatch@^2.2.2:
   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:
+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@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
-
-pify@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+pirates@^4.0.4:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.5.tgz#feec352ea5c3268fb23a37c702ab1699f35a5f3b"
+  integrity sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ==
 
-pinkie-promise@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
+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:
-    pinkie "^2.0.0"
+    find-up "^4.0.0"
 
-pinkie@^2.0.0:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
+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"
 
-pirates@^4.0.0, pirates@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
+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:
-    node-modules-regexp "^1.0.0"
+    postcss-selector-parser "^6.0.10"
 
-pkg-dir@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
-  dependencies:
-    find-up "^2.1.0"
-
-pkg-dir@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-3.0.0.tgz#2749020f239ed990881b1f71210d51eb6523bea3"
-  dependencies:
-    find-up "^3.0.0"
-
-pkg-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"
-
-pnp-webpack-plugin@1.6.4:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
-  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
-  dependencies:
-    ts-pnp "^1.1.6"
-
-portfinder@^1.0.26:
-  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"
-
-postcss-attribute-case-insensitive@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.1.tgz#b2a721a0d279c2f9103a36331c88981526428cc7"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0"
+postcss-browser-comments@^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-browser-comments@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-browser-comments/-/postcss-browser-comments-3.0.0.tgz#1248d2d935fb72053c8e1f61a84a57292d9f65e9"
-  integrity sha512-qfVjLfq7HFd2e0HW4s1dvU8X080OZdG46fFbIBFjW7US7YPDcWfRvdElvwMJr2LI6hMmD+7LnH2HcmXTs+uOig==
+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 "^7"
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
 
-postcss-calc@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-7.0.1.tgz#36d77bab023b0ecbb9789d84dcb23c4941145436"
+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:
-    css-unit-converter "^1.1.1"
-    postcss "^7.0.5"
-    postcss-selector-parser "^5.0.0-rc.4"
-    postcss-value-parser "^3.3.1"
+    postcss-value-parser "^4.2.0"
 
-postcss-color-functional-notation@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz#5efd37a88fbabeb00a2966d1e53d98ced93f74e0"
+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 "^7.0.2"
-    postcss-values-parser "^2.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-color-gray@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz#532a31eb909f8da898ceffe296fdc1f864be8547"
+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:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.5"
-    postcss-values-parser "^2.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-color-hex-alpha@^5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz#a8d9ca4c39d497c9661e374b9c51899ef0f87388"
+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 "^7.0.14"
-    postcss-values-parser "^2.0.1"
+    postcss-value-parser "^4.2.0"
 
-postcss-color-mod-function@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz#816ba145ac11cc3cb6baa905a75a49f903e4d31d"
+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:
-    "@csstools/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
+    browserslist "^4.16.6"
+    caniuse-api "^3.0.0"
+    colord "^2.9.1"
+    postcss-value-parser "^4.2.0"
 
-postcss-color-rebeccapurple@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz#c7a89be872bb74e45b1e3022bfe5748823e6de77"
+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:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
+    browserslist "^4.20.3"
+    postcss-value-parser "^4.2.0"
 
-postcss-colormin@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-4.0.3.tgz#ae060bce93ed794ac71264f08132d550956bd381"
+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:
-    browserslist "^4.0.0"
-    color "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-convert-values@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-4.0.1.tgz#ca3813ed4da0f812f9d43703584e449ebe189a7f"
+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 "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-custom-media@^7.0.8:
-  version "7.0.8"
-  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz#fffd13ffeffad73621be5f387076a28b00294e0c"
+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 "^7.0.14"
+    postcss-selector-parser "^6.0.4"
 
-postcss-custom-properties@^8.0.11:
-  version "8.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
+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 "^7.0.17"
-    postcss-values-parser "^2.0.1"
+    postcss-selector-parser "^6.0.10"
 
-postcss-custom-selectors@^5.1.2:
+postcss-discard-comments@^5.1.2:
   version "5.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz#64858c6eb2ecff2fb41d0b28c9dd7b3db4de7fba"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-5.1.2.tgz#8df5e81d2925af2780075840c1526f0660e53696"
+  integrity sha512-+L8208OVbHVF2UQf1iDmRcbdjJkuBF6IS29yBDSiWUIzpYaAhtNl6JYnYm12FnkeCwQqF5LeklOu6rAqgfBZqQ==
 
-postcss-dir-pseudo-class@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz#6e3a4177d0edb3abcc85fdb6fbb1c26dabaeaba2"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
+postcss-discard-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-comments@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz#1fbabd2c246bff6aaad7997b2b0918f4d7af4033"
-  dependencies:
-    postcss "^7.0.0"
+postcss-discard-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-duplicates@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-4.0.2.tgz#3fe133cd3c82282e550fc9b239176a9207b784eb"
-  dependencies:
-    postcss "^7.0.0"
+postcss-discard-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-discard-empty@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-4.0.1.tgz#c8c951e9f73ed9428019458444a02ad90bb9f765"
+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:
-    postcss "^7.0.0"
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-discard-overridden@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-4.0.1.tgz#652aef8a96726f029f5e3e00146ee7a4e755ff57"
+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 "^7.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-double-position-gradients@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz#fc927d52fddc896cb3a2812ebc5df147e110522e"
-  dependencies:
-    postcss "^7.0.5"
-    postcss-values-parser "^2.0.0"
+postcss-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-env-function@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-2.0.2.tgz#0f3e3d3c57f094a92c2baf4b6241f0b0da5365d7"
+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 "^7.0.2"
-    postcss-values-parser "^2.0.0"
+    postcss-selector-parser "^6.0.9"
 
-postcss-flexbugs-fixes@4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-4.2.1.tgz#9218a65249f30897deab1033aced8578562a6690"
-  integrity sha512-9SiofaZ9CWpQWxOwRh1b/r85KD5y7GgvsNt1056k6OYLvWUun0czCvogfJgylC22uJTwW1KzY3Gz65NZRlvoiQ==
+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 "^7.0.26"
+    postcss-selector-parser "^6.0.9"
 
-postcss-focus-visible@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz#477d107113ade6024b14128317ade2bd1e17046e"
-  dependencies:
-    postcss "^7.0.2"
+postcss-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-focus-within@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz#763b8788596cee9b874c999201cdde80659ef680"
-  dependencies:
-    postcss "^7.0.2"
+postcss-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-font-variant@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz#71dd3c6c10a0d846c5eda07803439617bbbabacc"
+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 "^7.0.2"
+    postcss-value-parser "^4.2.0"
 
-postcss-gap-properties@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz#431c192ab3ed96a3c3d09f2ff615960f902c1715"
+postcss-import@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.1.0.tgz#a7333ffe32f0b8795303ee9e40215dac922781f0"
+  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
   dependencies:
-    postcss "^7.0.2"
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
 
-postcss-image-set-function@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz#28920a2f29945bed4c3198d7df6496d410d3f288"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
+postcss-initial@^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-initial@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-3.0.0.tgz#1772512faf11421b791fb2ca6879df5f68aa0517"
+postcss-js@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00"
+  integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==
   dependencies:
-    lodash.template "^4.2.4"
-    postcss "^7.0.2"
+    camelcase-css "^2.0.1"
 
-postcss-lab-function@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz#bb51a6856cd12289ab4ae20db1e3821ef13d7d2e"
+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/convert-colors" "^1.4.0"
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-load-config@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-2.0.0.tgz#f1312ddbf5912cd747177083c5ef7a19d62ee484"
+postcss-load-config@^3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
+  integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
   dependencies:
-    cosmiconfig "^4.0.0"
-    import-cwd "^2.0.0"
+    lilconfig "^2.0.5"
+    yaml "^1.10.2"
 
-postcss-loader@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-3.0.0.tgz#6b97943e47c72d845fa9e03f273773d4e8dd6c2d"
+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:
-    loader-utils "^1.1.0"
-    postcss "^7.0.0"
-    postcss-load-config "^2.0.0"
-    schema-utils "^1.0.0"
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.5"
 
-postcss-logical@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-3.0.0.tgz#2495d0f8b82e9f262725f75f9401b34e7b45d5b5"
-  dependencies:
-    postcss "^7.0.2"
+postcss-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@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz#b75bb6cbc217c8ac49433e12f22048814a4f5ed5"
-  dependencies:
-    postcss "^7.0.2"
+postcss-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@^4.0.11:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz#62f49a13e4a0ee04e7b98f42bb16062ca2549e24"
+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:
-    css-color-names "0.0.4"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    stylehacks "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    stylehacks "^5.1.0"
 
-postcss-merge-rules@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-4.0.3.tgz#362bea4ff5a1f98e4075a713c6cb25aefef9a650"
+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.0.0"
+    browserslist "^4.16.6"
     caniuse-api "^3.0.0"
-    cssnano-util-same-parent "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
-    vendors "^1.0.0"
+    cssnano-utils "^3.1.0"
+    postcss-selector-parser "^6.0.5"
 
-postcss-minify-font-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-4.0.2.tgz#cd4c344cce474343fac5d82206ab2cbcb8afd5a6"
+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 "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-minify-gradients@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-4.0.2.tgz#93b29c2ff5099c535eecda56c4aa6e665a663471"
+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:
-    cssnano-util-get-arguments "^4.0.0"
-    is-color-stop "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    colord "^2.9.1"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-minify-params@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-4.0.2.tgz#6b9cef030c11e35261f95f618c90036d680db874"
+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:
-    alphanum-sort "^1.0.0"
-    browserslist "^4.0.0"
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    uniqs "^2.0.0"
+    browserslist "^4.16.6"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-minify-selectors@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-4.0.2.tgz#e2e5eb40bfee500d0cd9243500f5f8ea4262fbd8"
+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:
-    alphanum-sort "^1.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
+    postcss-selector-parser "^6.0.5"
 
-postcss-modules-extract-imports@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e"
-  dependencies:
-    postcss "^7.0.5"
+postcss-modules-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@^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==
+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 "^4.1.1"
-    postcss "^7.0.32"
+    icss-utils "^5.0.0"
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
-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-values@^3.0.0:
+postcss-modules-scope@^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==
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
   dependencies:
-    icss-utils "^4.0.0"
-    postcss "^7.0.6"
+    postcss-selector-parser "^6.0.4"
 
-postcss-nesting@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.0.tgz#6e26a770a0c8fcba33782a6b6f350845e1a448f6"
+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:
-    postcss "^7.0.2"
+    icss-utils "^5.0.0"
 
-postcss-normalize-charset@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4"
+postcss-nested@5.0.6:
+  version "5.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc"
+  integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==
   dependencies:
-    postcss "^7.0.0"
+    postcss-selector-parser "^6.0.6"
 
-postcss-normalize-display-values@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.2.tgz#0dbe04a4ce9063d4667ed2be476bb830c825935a"
+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:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
 
-postcss-normalize-positions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-positions/-/postcss-normalize-positions-4.0.2.tgz#05f757f84f260437378368a91f8932d4b102917f"
-  dependencies:
-    cssnano-util-get-arguments "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+postcss-normalize-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-repeat-style@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-4.0.2.tgz#c4ebbc289f3991a028d44751cbdd11918b17910c"
+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:
-    cssnano-util-get-arguments "^4.0.0"
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-normalize-string@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-string/-/postcss-normalize-string-4.0.2.tgz#cd44c40ab07a0c7a36dc5e99aace1eca4ec2690c"
+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:
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-normalize-timing-functions@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-4.0.2.tgz#8e009ca2a3949cdaf8ad23e6b6ab99cb5e7d28d9"
+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:
-    cssnano-util-get-match "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-normalize-unicode@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-unicode/-/postcss-normalize-unicode-4.0.1.tgz#841bd48fdcf3019ad4baa7493a3d363b52ae1cfb"
+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:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-normalize-url@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-4.0.1.tgz#10e437f86bc7c7e58f7b9652ed878daaa95faae1"
+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:
-    is-absolute-url "^2.0.0"
-    normalize-url "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-normalize-whitespace@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-normalize-whitespace/-/postcss-normalize-whitespace-4.0.2.tgz#bf1d4070fe4fcea87d1348e825d8cc0c5faa7d82"
+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:
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    browserslist "^4.16.6"
+    postcss-value-parser "^4.2.0"
 
-postcss-normalize@8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-normalize/-/postcss-normalize-8.0.1.tgz#90e80a7763d7fdf2da6f2f0f82be832ce4f66776"
-  integrity sha512-rt9JMS/m9FHIRroDDBGSMsyW1c0fkvOJPy62ggxSHUldJO7B195TqFMqIf+lY5ezpDcYOV4j86aUp3/XbxzCCQ==
+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:
-    "@csstools/normalize.css" "^10.1.0"
-    browserslist "^4.6.2"
-    postcss "^7.0.17"
-    postcss-browser-comments "^3.0.0"
-    sanitize.css "^10.0.0"
+    normalize-url "^6.0.1"
+    postcss-value-parser "^4.2.0"
 
-postcss-ordered-values@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-4.1.2.tgz#0cf75c820ec7d5c4d280189559e0b571ebac0eee"
+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:
-    cssnano-util-get-arguments "^4.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-overflow-shorthand@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz#31ecf350e9c6f6ddc250a78f0c3e111f32dd4c30"
+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:
-    postcss "^7.0.2"
+    "@csstools/normalize.css" "*"
+    postcss-browser-comments "^4"
+    sanitize.css "*"
 
-postcss-page-break@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-2.0.0.tgz#add52d0e0a528cabe6afee8b46e2abb277df46bf"
-  dependencies:
-    postcss "^7.0.2"
+postcss-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-place@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-4.0.1.tgz#e9f39d33d2dc584e46ee1db45adb77ca9d1dcc62"
-  dependencies:
-    postcss "^7.0.2"
-    postcss-values-parser "^2.0.0"
-
-postcss-preset-env@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz#c34ddacf8f902383b35ad1e030f178f4cdf118a5"
-  dependencies:
-    autoprefixer "^9.6.1"
-    browserslist "^4.6.4"
-    caniuse-lite "^1.0.30000981"
-    css-blank-pseudo "^0.1.4"
-    css-has-pseudo "^0.10.0"
-    css-prefers-color-scheme "^3.1.1"
-    cssdb "^4.4.0"
-    postcss "^7.0.17"
-    postcss-attribute-case-insensitive "^4.0.1"
-    postcss-color-functional-notation "^2.0.1"
-    postcss-color-gray "^5.0.0"
-    postcss-color-hex-alpha "^5.0.3"
-    postcss-color-mod-function "^3.0.3"
-    postcss-color-rebeccapurple "^4.0.1"
-    postcss-custom-media "^7.0.8"
-    postcss-custom-properties "^8.0.11"
-    postcss-custom-selectors "^5.1.2"
-    postcss-dir-pseudo-class "^5.0.0"
-    postcss-double-position-gradients "^1.0.0"
-    postcss-env-function "^2.0.2"
-    postcss-focus-visible "^4.0.0"
-    postcss-focus-within "^3.0.0"
-    postcss-font-variant "^4.0.0"
-    postcss-gap-properties "^2.0.0"
-    postcss-image-set-function "^3.0.1"
-    postcss-initial "^3.0.0"
-    postcss-lab-function "^2.0.1"
-    postcss-logical "^3.0.0"
-    postcss-media-minmax "^4.0.0"
-    postcss-nesting "^7.0.0"
-    postcss-overflow-shorthand "^2.0.0"
-    postcss-page-break "^2.0.0"
-    postcss-place "^4.0.1"
-    postcss-pseudo-class-any-link "^6.0.0"
-    postcss-replace-overflow-wrap "^3.0.0"
-    postcss-selector-matches "^4.0.0"
-    postcss-selector-not "^4.0.0"
-
-postcss-pseudo-class-any-link@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz#2ed3eed393b3702879dec4a87032b210daeb04d1"
+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:
-    postcss "^7.0.2"
-    postcss-selector-parser "^5.0.0-rc.3"
+    cssnano-utils "^3.1.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-reduce-initial@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz#7fd42ebea5e9c814609639e2c2e84ae270ba48df"
+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:
-    browserslist "^4.0.0"
-    caniuse-api "^3.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
+    postcss-value-parser "^4.2.0"
 
-postcss-reduce-transforms@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-4.0.2.tgz#17efa405eacc6e07be3414a5ca2d1074681d4e29"
-  dependencies:
-    cssnano-util-get-match "^4.0.0"
-    has "^1.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
+postcss-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-replace-overflow-wrap@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz#61b360ffdaedca84c7c918d2b0f0d0ea559ab01c"
+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 "^7.0.2"
+    postcss-selector-parser "^6.0.10"
 
-postcss-safe-parser@5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz#459dd27df6bc2ba64608824ba39e45dacf5e852d"
-  integrity sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==
+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:
-    postcss "^8.1.0"
+    browserslist "^4.16.6"
+    caniuse-api "^3.0.0"
 
-postcss-selector-matches@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz#71c8248f917ba2cc93037c9637ee09c64436fcff"
+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:
-    balanced-match "^1.0.0"
-    postcss "^7.0.2"
+    postcss-value-parser "^4.2.0"
 
-postcss-selector-not@^4.0.0:
+postcss-replace-overflow-wrap@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz#c68ff7ba96527499e832724a2674d65603b645c0"
-  dependencies:
-    balanced-match "^1.0.0"
-    postcss "^7.0.2"
+  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-parser@^3.0.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz#4f875f4afb0c96573d5cf4d74011aee250a7e865"
-  dependencies:
-    dot-prop "^4.1.1"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^5.0.0, postcss-selector-parser@^5.0.0-rc.4:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c"
-  dependencies:
-    cssesc "^2.0.0"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-selector-parser@^5.0.0-rc.3:
-  version "5.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0-rc.3.tgz#c4525dcc8eb90166c53dcbf0cb9317ceff5a15b5"
+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:
-    babel-eslint "^8.2.3"
-    cssesc "^1.0.1"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
+    postcss-selector-parser "^6.0.10"
 
-postcss-selector-parser@^6.0.0:
-  version "6.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c"
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6, 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"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
+    util-deprecate "^1.0.2"
 
 postcss-selector-parser@^6.0.2:
   version "6.0.4"
@@ -9237,89 +7830,47 @@ postcss-selector-parser@^6.0.2:
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
-postcss-svgo@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258"
+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:
-    is-svg "^3.0.0"
-    postcss "^7.0.0"
-    postcss-value-parser "^3.0.0"
-    svgo "^1.0.0"
+    postcss-value-parser "^4.2.0"
+    svgo "^2.7.0"
 
-postcss-unique-selectors@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-4.0.1.tgz#9446911f3289bfd64c6d680f073c03b1f9ee4bac"
+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:
-    alphanum-sort "^1.0.0"
-    postcss "^7.0.0"
-    uniqs "^2.0.0"
+    postcss-selector-parser "^6.0.5"
 
-postcss-value-parser@^3.0.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"
-
-postcss-value-parser@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-
-postcss-value-parser@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9"
+postcss-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-values-parser@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.0.tgz#1ba42cae31367c44f96721cb5eb99462bfb39705"
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss-values-parser@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
-  dependencies:
-    flatten "^1.0.2"
-    indexes-of "^1.0.1"
-    uniq "^1.0.1"
-
-postcss@7.0.21, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.21, postcss@^7.0.6:
-  version "7.0.21"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.21.tgz#06bb07824c19c2021c5d056d5b10c35b989f7e17"
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^7, postcss@^7.0.26, postcss@^7.0.32:
-  version "7.0.35"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
-  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.2, postcss@^7.0.5:
-  version "7.0.5"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.5.tgz#70e6443e36a6d520b0fd4e7593fcca3635ee9f55"
+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:
-    chalk "^2.4.1"
+    picocolors "^0.2.1"
     source-map "^0.6.1"
-    supports-color "^5.5.0"
 
-postcss@^8.1.0:
-  version "8.1.14"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.1.14.tgz#77d6a5db2fdc0afa918e24af5323a53fb8727f2e"
-  integrity sha512-KatkyVPBKfENS+c3dpXJoDXnDD5UZs5exAnDksLqaRJPKwYphEPZt4N0m0i049v2/BtWVQibAhxW4ilXXcolpA==
+postcss@^8.3.5, postcss@^8.4.14, 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:
-    colorette "^1.2.1"
-    nanoid "^3.1.20"
-    source-map "^0.6.1"
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
 
 prelude-ls@^1.2.1:
   version "1.2.1"
@@ -9330,53 +7881,47 @@ 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"
-
-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=
-
 pretty-bytes@^5.3.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
   integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
 
-pretty-error@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-2.1.1.tgz#5f4f87c8f91e5ae3f3ba87ab4cf5e03b1a17f1a3"
+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:
-    renderkid "^2.0.1"
-    utila "~0.4"
+    lodash "^4.17.20"
+    renderkid "^3.0.0"
 
-pretty-format@^26.6.0, pretty-format@^26.6.2:
-  version "26.6.2"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.6.2.tgz#e35c2705f14cb7fe2fe94fa078345b444120fc93"
-  integrity sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
+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:
-    "@jest/types" "^26.6.2"
-    ansi-regex "^5.0.0"
-    ansi-styles "^4.0.0"
+    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"
+
 process-nextick-args@~2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
 
-process@^0.11.10:
-  version "0.11.10"
-  resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
-
-progress@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.0.tgz#8a1be366bf8fc23db2bd23f10c6fe920b4389d1f"
-
-promise-inflight@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
-
 promise@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
@@ -9384,14 +7929,6 @@ promise@^8.1.0:
   dependencies:
     asap "~2.0.6"
 
-prompts@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.0.tgz#4aa5de0723a231d1ee9121c40fdf663df73f61d7"
-  integrity sha512-awZAKrk3vN6CroQukBL+R9051a4R3zCZBlJm/HBfrSZ8iTpYix3VX1vU4mveiLpiwmOJT4wokTF9m6HUk4KqWQ==
-  dependencies:
-    kleur "^3.0.3"
-    sisteransi "^1.0.5"
-
 prompts@^2.0.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.2.1.tgz#f901dd2a2dfee080359c0e20059b24188d75ad35"
@@ -9399,118 +7936,60 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.7.2:
-  version "15.7.2"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
+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.8.1"
+    react-is "^16.13.1"
 
-proxy-addr@~2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
-  integrity sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==
+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.1.2"
-    ipaddr.js "1.9.0"
-
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+    forwarded "0.2.0"
+    ipaddr.js "1.9.1"
 
-psl@^1.1.28:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.4.0.tgz#5dd26156cdb69fa1fdb8ab1991667d3f80ced7c2"
+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.7:
+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"
-  dependencies:
-    bn.js "^4.1.0"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    parse-asn1 "^5.0.0"
-    randombytes "^2.0.1"
-    safe-buffer "^5.1.2"
-
-pump@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pump@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/pump/-/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
-  dependencies:
-    end-of-stream "^1.1.0"
-    once "^1.3.1"
-
-pumpify@^1.3.3:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.5.1.tgz#36513be246ab27570b1a374a5ce278bfd74370ce"
-  dependencies:
-    duplexify "^3.6.0"
-    inherits "^2.0.3"
-    pump "^2.0.0"
-
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-
-punycode@^1.2.4:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
-
 punycode@^2.1.0, punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
-pupa@^2.0.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"
-
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
 
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
-  integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
-
-qs@~6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-
-query-string@^4.1.0:
-  version "4.3.4"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
+qs@6.10.3:
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
   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"
+    side-channel "^1.0.4"
 
-querystring@0.2.0, querystring@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-
-querystringify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755"
+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==
 
 raf@^3.4.1:
   version "3.4.1"
@@ -9519,12 +7998,6 @@ raf@^3.4.1:
   dependencies:
     performance-now "^2.1.0"
 
-randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
-  dependencies:
-    safe-buffer "^5.1.0"
-
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -9532,141 +8005,110 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
 
-randomfill@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/randomfill/-/randomfill-1.0.4.tgz#c92196fc86ab42be983f1bf31778224931d61458"
-  dependencies:
-    randombytes "^2.0.5"
-    safe-buffer "^5.1.0"
-
 range-parser@^1.2.1, range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
 
-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==
+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.0"
-    http-errors "1.7.2"
+    bytes "3.1.2"
+    http-errors "2.0.0"
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-rc@^1.2.7, rc@^1.2.8:
-  version "1.2.8"
-  resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
-  dependencies:
-    deep-extend "^0.6.0"
-    ini "~1.3.0"
-    minimist "^1.2.0"
-    strip-json-comments "~2.0.1"
-
-react-app-polyfill@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-2.0.0.tgz#a0bea50f078b8a082970a9d853dc34b6dcc6a3cf"
-  integrity sha512-0sF4ny9v/B7s6aoehwze9vJNWcmCemAUYBVasscVr92+UYiEqDXOxfKjXN685mDaMRNF3WdhHQs76oTODMocFA==
+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.6.5"
+    core-js "^3.19.2"
     object-assign "^4.1.1"
     promise "^8.1.0"
     raf "^3.4.1"
-    regenerator-runtime "^0.13.7"
-    whatwg-fetch "^3.4.1"
-
-react-dev-utils@^11.0.1:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.1.tgz#30106c2055acfd6b047d2dc478a85c356e66fe45"
-  integrity sha512-rlgpCupaW6qQqvu0hvv2FDv40QG427fjghV56XyPcP5aKtOAPzNAhQ7bHqk1YdS2vpW1W7aSV3JobedxuPlBAA==
-  dependencies:
-    "@babel/code-frame" "7.10.4"
-    address "1.1.2"
-    browserslist "4.14.2"
-    chalk "2.4.2"
-    cross-spawn "7.0.3"
-    detect-port-alt "1.1.6"
-    escape-string-regexp "2.0.0"
-    filesize "6.1.0"
-    find-up "4.1.0"
-    fork-ts-checker-webpack-plugin "4.1.6"
-    global-modules "2.0.0"
-    globby "11.0.1"
-    gzip-size "5.1.1"
-    immer "7.0.9"
-    is-root "2.1.0"
-    loader-utils "2.0.0"
-    open "^7.0.2"
-    pkg-up "3.1.0"
-    prompts "2.4.0"
-    react-error-overlay "^6.0.8"
-    recursive-readdir "2.2.2"
-    shell-quote "1.7.2"
-    strip-ansi "6.0.0"
-    text-table "0.2.0"
-
-react-error-overlay@^6.0.8:
-  version "6.0.8"
-  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
-  integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
-
-react-is@^16.8.1:
-  version "16.11.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.11.0.tgz#b85dfecd48ad1ce469ff558a882ca8e8313928fa"
+    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@^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-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.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
-react-refresh@^0.8.3:
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
-  integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
-
-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"
+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==
 
-read-pkg-up@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
-  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
-  dependencies:
-    find-up "^4.1.0"
-    read-pkg "^5.2.0"
-    type-fest "^0.8.1"
+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==
 
-read-pkg@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
+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:
-    load-json-file "^2.0.0"
-    normalize-package-data "^2.3.2"
-    path-type "^2.0.0"
+    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"
-
-read-pkg@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
-  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+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:
-    "@types/normalize-package-data" "^2.4.0"
-    normalize-package-data "^2.5.0"
-    parse-json "^5.0.0"
-    type-fest "^0.6.0"
+    pify "^2.3.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6:
+readable-stream@^2.0.1:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   dependencies:
@@ -9678,15 +8120,6 @@ read-pkg@^5.2.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@1.0:
-  version "1.0.34"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readable-stream@^3.0.6:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.4.0.tgz#a51c26754658e0a3c21dbf59163bd45ba6f447fc"
@@ -9695,84 +8128,85 @@ readable-stream@^3.0.6:
     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"
-  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==
+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:
+recursive-readdir@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
+  integrity sha512-nRCcW9Sj7NuZwa2XvH9co8NPeXUBhZP7CRKJtU+cS6PW9FpCIFoI5ib0NT1ZrbNuPoRy0ylyCaUL8Gih4LSyFg==
   dependencies:
     minimatch "3.0.4"
 
+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.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-unicode-properties@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e"
   dependencies:
     regenerate "^1.4.0"
 
-regenerate-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"
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
+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, regenerator-runtime@^0.13.7:
+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"
+regenerator-runtime@^0.13.9:
+  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==
 
-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"
+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:
-    extend-shallow "^3.0.2"
-    safe-regex "^1.1.0"
+    "@babel/runtime" "^7.8.4"
 
 regex-parser@^2.2.11:
   version "2.2.11"
   resolved "https://registry.yarnpkg.com/regex-parser/-/regex-parser-2.2.11.tgz#3b37ec9049e19479806e878cabe7c1ca83ccfe58"
   integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
 
-regexp.prototype.flags@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz#7aba89b3c13a64509dabcf3ca8d9fbb9bdf5cb75"
-  integrity sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==
+regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
   dependencies:
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
+    functions-have-names "^1.2.2"
 
-regexpp@^3.0.0, regexpp@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
-  integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
+regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
 regexpu-core@^4.6.0:
   version "4.6.0"
@@ -9785,40 +8219,26 @@ regexpu-core@^4.6.0:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.1.0"
 
-regexpu-core@^4.7.1:
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
-  integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
-  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"
-
-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:
+regexpu-core@^5.1.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==
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.1.0.tgz#2f8504c3fd0ebe11215783a41541e21c79942c6d"
+  integrity sha512-bb6hk+xWd2PEOkj5It46A16zFMs2mv86Iwpdu94la4S3sJ7C973h2dHpYKwIBGaWSO7cIRJ+UX0IeMaWcO4qwA==
   dependencies:
-    rc "^1.2.8"
+    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"
 
 regjsgen@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
 
-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.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.6.0.tgz#83414c5354afd7d6627b16af5f10f41c4e71808d"
+  integrity sha512-ozE883Uigtqj3bx7OhL1KNbCzGyW2NQZPl6Hs09WTvCuZD5sTI4JY58bkbQWa/Y9hxIsvJ3M8Nbf7j54IqeZbA==
 
 regjsparser@^0.6.0:
   version "0.6.0"
@@ -9826,10 +8246,10 @@ regjsparser@^0.6.0:
   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==
+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"
 
@@ -9838,96 +8258,30 @@ relateurl@^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"
-
-renderkid@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-2.0.2.tgz#12d310f255360c07ad8fde253f6c9e9de372d2aa"
-  dependencies:
-    css-select "^1.1.0"
-    dom-converter "~0.2"
-    htmlparser2 "~3.3.0"
-    strip-ansi "^3.0.0"
-    utila "^0.4.0"
-
-repeat-element@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
-
-repeat-string@^1.6.1:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
-
-request-promise-core@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
-  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
+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:
-    lodash "^4.17.19"
-
-request-promise-native@^1.0.8:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
-  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
-  dependencies:
-    request-promise-core "1.1.4"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
-request@^2.88.2:
-  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"
+    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"
 
-require-from-string@^2.0.1:
+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"
-
-require-main-filename@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
-
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/require-main-filename/-/require-main-filename-2.0.0.tgz#d0b329ecc7cc0f61649f62215be69af54aa8989b"
+  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"
 
-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-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -9935,10 +8289,6 @@ resolve-cwd@^3.0.0:
   dependencies:
     resolve-from "^5.0.0"
 
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@@ -9948,41 +8298,32 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
-resolve-url-loader@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/resolve-url-loader/-/resolve-url-loader-3.1.2.tgz#235e2c28e22e3e432ba7a5d4e305c59a58edfc08"
-  integrity sha512-QEb4A76c8Mi7I3xNKXlRKQSlLBwjUV/ULFMP+G7n3/7tJZ8MG5wsZ3ucxP1Jz8Vevn6fnJsxDx9cIls+utGzPQ==
-  dependencies:
-    adjust-sourcemap-loader "3.0.0"
-    camelcase "5.3.1"
-    compose-function "3.0.3"
-    convert-source-map "1.7.0"
-    es6-iterator "2.0.3"
-    loader-utils "1.2.3"
-    postcss "7.0.21"
-    rework "1.0.1"
-    rework-visit "1.0.0"
+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-url@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
+resolve.exports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
+  integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@1.18.1:
-  version "1.18.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.18.1.tgz#018fcb2c5b207d2a6424aee361c5a266da8f4130"
-  integrity sha512-lDfCPaMKfOJXjy0dPayzPdF1phampNWr3qFCjAu+rw/qbQmr5jWH5xN2hwh9QKfw9E5v4hwV7A+jrCmL8yjjqA==
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.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.0.0"
-    path-parse "^1.0.6"
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^1.10.0, resolve@^1.12.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
-  dependencies:
-    path-parse "^1.0.6"
-
-resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1:
+resolve@^1.14.2:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c"
   integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg==
@@ -9990,64 +8331,31 @@ resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1:
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
-resolve@^1.3.2, resolve@^1.8.1:
+resolve@^1.3.2:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
   dependencies:
     path-parse "^1.0.5"
 
-responselike@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
-  integrity sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.4"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.4.tgz#3d37a113d6429f496ec4752d2a2e58efb1fd4660"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
   dependencies:
-    lowercase-keys "^1.0.0"
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
 
-ret@~0.1.10:
-  version "0.1.15"
-  resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
-
-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==
 
-rework-visit@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rework-visit/-/rework-visit-1.0.0.tgz#9945b2803f219e2f7aca00adb8bc9f640f842c9a"
-
-rework@1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rework/-/rework-1.0.1.tgz#30806a841342b54510aa4110850cd48534144aa7"
-  dependencies:
-    convert-source-map "^0.3.3"
-    css "^2.0.0"
-
-rgb-regex@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
-
-rgba-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
-
-rimraf@^2.5.4, rimraf@^2.6.1:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.2.tgz#2ed8150d24a16ea8651e6d6ef0f47c4158ce7a36"
-  dependencies:
-    glob "^7.0.5"
-
-rimraf@^2.6.3:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
-  dependencies:
-    glob "^7.1.3"
-
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -10055,137 +8363,93 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
-ripemd160@^2.0.0, ripemd160@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-2.0.2.tgz#a1c1a6f624751577ba5d07914cbc92850585890c"
-  dependencies:
-    hash-base "^3.0.0"
-    inherits "^2.0.1"
-
-rollup-plugin-babel@^4.3.3:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-babel/-/rollup-plugin-babel-4.4.0.tgz#d15bd259466a9d1accbdb2fe2fff17c52d030acb"
-  integrity sha512-Lek/TYp1+7g7I+uMfJnnSJ7YWoD58ajo6Oarhlex7lvUce+RCKRuGRSgztDO3/MF/PuGKmUL5iTHKf208UNszw==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    rollup-pluginutils "^2.8.1"
-
-rollup-plugin-terser@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-5.3.1.tgz#8c650062c22a8426c64268548957463bf981b413"
-  integrity sha512-1pkwkervMJQGFYvM9nscrUoncPwiKR/K+bHdjv6PFgRo3cgPHoRT83y2Aa3GvINj4539S15t/tpFPb775TDs6w==
+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.5.5"
-    jest-worker "^24.9.0"
-    rollup-pluginutils "^2.8.2"
+    "@babel/code-frame" "^7.10.4"
+    jest-worker "^26.2.1"
     serialize-javascript "^4.0.0"
-    terser "^4.6.2"
-
-rollup-pluginutils@^2.8.1, 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"
+    terser "^5.0.0"
 
-rollup@^1.31.1:
-  version "1.32.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.32.1.tgz#4480e52d9d9e2ae4b46ba0d9ddeaf3163940f9c4"
-  integrity sha512-/2HA0Ec70TvQnXdzynFffkjA6XN+1e2pEv/uKS5Ulca40g2L7KuOE3riasHoNVHOsFD5KKZgDsMk1CP3Tw9s+A==
-  dependencies:
-    "@types/estree" "*"
-    "@types/node" "*"
-    acorn "^7.1.0"
-
-rsvp@^4.8.4:
-  version "4.8.5"
-  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
+rollup@^2.43.1:
+  version "2.78.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.78.0.tgz#00995deae70c0f712ea79ad904d5f6b033209d9e"
+  integrity sha512-4+YfbQC9QEVvKTanHhIAFVUFSRsezvQF8vFOJwtGfb9Bb+r014S+qryr9PSmw8x6sMnPkmFBGAvIFVQxvJxjtg==
+  optionalDependencies:
+    fsevents "~2.3.2"
 
 run-parallel@^1.1.9:
   version "1.1.10"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.10.tgz#60a51b2ae836636c81377df16cb107351bcd13ef"
   integrity sha512-zb/1OuZ6flOlH6tQyMPUrE3x3Ulxjlo9WIVXR4yVYi4H9UXQaeIsPbLn2R3O3vQCnDKkAl2qHiuocKKX4Tz/Sw==
 
-run-queue@^1.0.0, run-queue@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/run-queue/-/run-queue-1.0.3.tgz#e848396f057d223f24386924618e25694161ec47"
-  dependencies:
-    aproba "^1.1.1"
-
-rxjs@^6.5.2:
-  version "6.5.3"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.3.tgz#510e26317f4db91a7eb1de77d9dd9ba0a4899a3a"
+rxjs@^7.0.0:
+  version "7.5.6"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.6.tgz#0446577557862afd6903517ce7cae79ecb9662bc"
+  integrity sha512-dnyv2/YsXhnm461G+R/Pe5bWP41Nm6LBXEYWI6eiFP4fiwx6WRI/CD0zbdVAudd9xwLEF2IDcKXLHit0FYjUzw==
   dependencies:
-    tslib "^1.9.0"
+    tslib "^2.1.0"
 
-safe-buffer@5.1.2, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2, safe-buffer@^5.1.0, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
 
+safe-buffer@5.2.1, safe-buffer@>=5.1.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.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
 
-safe-regex@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
-  dependencies:
-    ret "~0.1.10"
-
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"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"
 
-sane@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
-  dependencies:
-    "@cnakazawa/watch" "^1.0.3"
-    anymatch "^2.0.0"
-    capture-exit "^2.0.0"
-    exec-sh "^0.3.2"
-    execa "^1.0.0"
-    fb-watchman "^2.0.0"
-    micromatch "^3.1.4"
-    minimist "^1.1.1"
-    walker "~1.0.5"
+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==
 
-sanitize.css@^10.0.0:
-  version "10.0.0"
-  resolved "https://registry.yarnpkg.com/sanitize.css/-/sanitize.css-10.0.0.tgz#b5cb2547e96d8629a60947544665243b1dc3657a"
-  integrity sha512-vTxrZz4dX5W86M6oVWVdOVe72ZiPs41Oi7Z6Km4W5Turyz28mrXSJhhEBZoRtzJWIv3833WKVwLSDWWkEfupMg==
-
-sass-loader@8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
-  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+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:
-    clone-deep "^4.0.1"
-    loader-utils "^1.2.3"
-    neo-async "^2.6.1"
-    schema-utils "^2.6.1"
-    semver "^6.3.0"
+    klona "^2.0.4"
+    neo-async "^2.6.2"
 
-sax@^1.2.4, sax@~1.2.4:
+sax@~1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-saxes@^5.0.0:
+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"
 
-schema-utils@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-1.0.0.tgz#0b79a93204d7b600d4b2850d1f66c2a34951c770"
+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.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:
-    ajv "^6.1.0"
-    ajv-errors "^1.0.0"
-    ajv-keywords "^3.1.0"
+    "@types/json-schema" "^7.0.4"
+    ajv "^6.12.2"
+    ajv-keywords "^3.4.1"
 
-schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.7.0, schema-utils@^2.7.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==
@@ -10203,71 +8467,86 @@ schema-utils@^3.0.0:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.1.0, schema-utils@^3.1.1:
+  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@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
+  integrity sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    ajv "^8.8.0"
+    ajv-formats "^2.1.1"
+    ajv-keywords "^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.10.7:
-  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@^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==
+selfsigned@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.0.1.tgz#8b2df7fa56bf014d19b6007655fff209c0ef0a56"
+  integrity sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==
   dependencies:
-    semver "^6.3.0"
-
-"semver@2 || 3 || 4 || 5", semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1:
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
+    node-forge "^1"
 
-semver@7.0.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@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@^5.3.0, semver@^5.4.1:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.1.tgz#7dfdd8814bdb7cabc7be0fb1d734cfb66c940477"
 
-semver@^5.6.0, semver@^5.7.1:
+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@^6.0.0, semver@^6.2.0, semver@^6.3.0:
+semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
 
-semver@^7.2.1, semver@^7.3.2:
+semver@^7.3.2:
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.4.tgz#27aaa7d2e4ca76452f98d3add093a72c943edc97"
   integrity sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==
   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==
+semver@^7.3.5, semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
   dependencies:
     debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
+    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 "~1.7.2"
+    http-errors "2.0.0"
     mime "1.6.0"
-    ms "2.1.1"
-    on-finished "~2.3.0"
+    ms "2.1.3"
+    on-finished "2.4.1"
     range-parser "~1.2.1"
-    statuses "~1.5.0"
+    statuses "2.0.1"
 
 serialize-javascript@^4.0.0:
   version "4.0.0"
@@ -10276,10 +8555,10 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
-  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
+serialize-javascript@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-6.0.0.tgz#efae5d88f45d7924141da8b5c3a7a7e663fefeb8"
+  integrity sha512-Qr3TosvguFt8ePWqsvRfrKyQXIiW+nGbYpy8XK24NQHE83caxWt+mIymTT19DGFbNWNLfEwsrkSmN64lVWB9ag==
   dependencies:
     randombytes "^2.1.0"
 
@@ -10296,69 +8575,24 @@ serve-index@^1.9.1:
     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==
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.17.1"
-
-set-blocking@^2.0.0, set-blocking@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
-
-set-value@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.1"
-    to-object-path "^0.3.0"
-
-set-value@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.3"
-    split-string "^3.0.1"
-
-setimmediate@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+    send "0.18.0"
 
 setprototypeof@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
 
-setprototypeof@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.1.tgz#7e95acb24aa92f5885e0abef5ba131330d4ae683"
-  integrity sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==
-
-sha.js@^2.4.0, sha.js@^2.4.8:
-  version "2.4.11"
-  resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.11.tgz#37a5cf0b81ecbc6943de109ba2960d1b26584ae7"
-  dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-shallow-clone@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/shallow-clone/-/shallow-clone-3.0.1.tgz#8f2981ad92531f55035b01fb230769a40e02efa3"
-  dependencies:
-    kind-of "^6.0.2"
-
-shebang-command@^1.2.0:
+setprototypeof@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"
+  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"
@@ -10367,40 +8601,40 @@ shebang-command@^2.0.0:
   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"
-
 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.2:
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
-
-shellwords@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
+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==
 
-side-channel@^1.0.2, side-channel@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.3.tgz#cdc46b057550bbab63706210838df5d4c19519c3"
-  integrity sha512-A6+ByhlLkksFoUepsGxfj5x1gTSrs+OydsRptUxeNCabQpCFUvcwIczgOigI8vhY/OJCnPnyE9rGiwgvr9cS1g==
+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:
-    es-abstract "^1.18.0-next.0"
-    object-inspect "^1.8.0"
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
 
-signal-exit@^3.0.0, signal-exit@^3.0.2:
+signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+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==
+
+simple-update-notifier@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz#7edf75c5bdd04f88828d632f762b2bc32996a9cc"
+  integrity sha512-BBKgR84BJQJm6WjWFMHgLVuo61FBDSj1z/xSFUIozqO6wO7ii0JxCqlIud7Enr/+LhlbNI0whErq96P2qHNWew==
   dependencies:
-    is-arrayish "^0.3.1"
+    semver "~7.0.0"
 
 sisteransi@^1.0.3:
   version "1.0.3"
@@ -10415,87 +8649,42 @@ slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
 
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
-snapdragon-node@^2.0.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
-  dependencies:
-    define-property "^1.0.0"
-    isobject "^3.0.0"
-    snapdragon-util "^3.0.1"
-
-snapdragon-util@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/snapdragon-util/-/snapdragon-util-3.0.1.tgz#f956479486f2acd79700693f6f7b805e45ab56e2"
-  dependencies:
-    kind-of "^3.2.0"
-
-snapdragon@^0.8.1:
-  version "0.8.2"
-  resolved "https://registry.yarnpkg.com/snapdragon/-/snapdragon-0.8.2.tgz#64922e7c565b0e14204ba1aa7d6964278d25182d"
-  dependencies:
-    base "^0.11.1"
-    debug "^2.2.0"
-    define-property "^0.2.5"
-    extend-shallow "^2.0.1"
-    map-cache "^0.2.2"
-    source-map "^0.5.6"
-    source-map-resolve "^0.5.0"
-    use "^3.1.0"
-
-sockjs-client@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
-  dependencies:
-    debug "^3.2.5"
-    eventsource "^1.0.7"
-    faye-websocket "~0.11.1"
-    inherits "^2.0.3"
-    json3 "^3.3.2"
-    url-parse "^1.4.3"
-
-sockjs@0.3.20:
-  version "0.3.20"
-  resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.20.tgz#b26a283ec562ef8b2687b44033a4eeceac75d855"
-  integrity sha512-SpmVOVpdq0DJc0qArhF3E5xsxvaiqGNb73XfgBpK1y3UD5gs8DSo8aCTsuT5pX8rssdc2NDIzANwP9eCAiSdTA==
-  dependencies:
-    faye-websocket "^0.10.0"
-    uuid "^3.4.0"
-    websocket-driver "0.6.5"
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-sort-keys@^1.0.0:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
+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:
-    is-plain-obj "^1.0.0"
+    faye-websocket "^0.11.3"
+    uuid "^8.3.2"
+    websocket-driver "^0.7.4"
 
 source-list-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.0.tgz#aaa47403f7b245a92fbc97ea08f250d6087ed085"
 
-source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
-  dependencies:
-    atob "^2.1.1"
-    decode-uri-component "^0.2.0"
-    resolve-url "^0.2.1"
-    source-map-url "^0.4.0"
-    urix "^0.1.0"
+source-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-support@^0.5.16, source-map-support@~0.5.12:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
+source-map-js@^1.0.1, 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-loader@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/source-map-loader/-/source-map-loader-3.0.1.tgz#9ae5edc7c2d42570934be4c95d1ccc6352eba52d"
+  integrity sha512-Vp1UsfyPvgujKQzi4pyDiTOnE3E4H+yHvkVRN3c/9PJmQS4CQJExvcDvaX/D+RV+xQben9HJ56jMJS3CgUeWyA==
   dependencies:
-    buffer-from "^1.0.0"
-    source-map "^0.6.0"
+    abab "^2.0.5"
+    iconv-lite "^0.6.3"
+    source-map-js "^1.0.1"
 
 source-map-support@^0.5.6:
   version "0.5.9"
@@ -10504,31 +8693,34 @@ source-map-support@^0.5.6:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@~0.5.19:
-  version "0.5.19"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
-  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
+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"
-
 source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
-source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6:
+source-map@^0.5.0:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
-source-map@^0.7.3, source-map@~0.7.2:
+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==
 
+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.4:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -10537,29 +8729,7 @@ sourcemap-codec@^1.4.4:
 spawn-command@^0.0.2-1:
   version "0.0.2-1"
   resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0"
-  integrity sha1-YvXpRmmBwbeW3Fkpk34RycaSG9A=
-
-spdx-correct@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.0.1.tgz#434434ff9d1726b4d9f4219d1004813d80639e30"
-  dependencies:
-    spdx-expression-parse "^3.0.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz#2ea450aee74f2a89bfb94519c07fcd6f41322977"
-
-spdx-expression-parse@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
-  dependencies:
-    spdx-exceptions "^2.1.0"
-    spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.1.tgz#e2a303236cac54b04031fa7a5a79c7e701df852f"
+  integrity sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==
 
 spdy-transport@^3.0.0:
   version "3.0.0"
@@ -10583,52 +8753,18 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-split-string@^3.0.1, split-string@^3.0.2:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
-  dependencies:
-    extend-shallow "^3.0.0"
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
 
-sshpk@^1.7.0:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.14.2.tgz#c6fc61648a3d9c4e764fd3fcdf4ea105e492ba98"
-  dependencies:
-    asn1 "~0.2.3"
-    assert-plus "^1.0.0"
-    dashdash "^1.12.0"
-    getpass "^0.1.1"
-    safer-buffer "^2.0.2"
-  optionalDependencies:
-    bcrypt-pbkdf "^1.0.0"
-    ecc-jsbn "~0.1.1"
-    jsbn "~0.1.0"
-    tweetnacl "~0.14.0"
-
-ssri@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
-  dependencies:
-    figgy-pudding "^3.5.1"
-
-ssri@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/ssri/-/ssri-8.0.0.tgz#79ca74e21f8ceaeddfcb4b90143c458b8d988808"
-  integrity sha512-aq/pz989nxVYwn16Tsbj1TqFpD5LLrQxHf5zaHuieFV+R0Bbr4y8qUsOA45hXT/N4/9UNXTarBjnjVmjSOVaAA==
-  dependencies:
-    minipass "^3.1.1"
-
-stable@^0.1.8, stable@~0.1.6:
+stable@^0.1.8:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
 
-stack-utils@^2.0.2:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.3.tgz#cd5f030126ff116b78ccb3c027fe302713b61277"
-  integrity sha512-gL//fkxfWUsIlFL2Tl42Cl6+HFALEaB1FU76I/Fy+oZjRreP7OPMXFlGbxM7NQsI0ZpUfw76sHnv0WNYuTb7Iw==
+stack-utils@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.5.tgz#d25265fca995154659dbbfba3b49254778d2fdd5"
+  integrity sha512-xrQcmYhOsn/1kX+Vraq+7j4oE2j/6BFscZ0etmYg81xuM8Gq0022Pxb8+IqgOFUIaxHs0KaSb7T1+OegiNrNFA==
   dependencies:
     escape-string-regexp "^2.0.0"
 
@@ -10637,54 +8773,15 @@ stackframe@^1.1.1:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
   integrity sha512-GrdeshiRmS1YLMYgzF16olf2jJ/IzxXY9lhKOskuVziubpTYcYqyOwYeJKzQkwy7uN0fYSsbsC4RQaXf9LCrYA==
 
-static-extend@^0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
-  dependencies:
-    define-property "^0.2.5"
-    object-copy "^0.1.0"
+statuses@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", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
+"statuses@>= 1.4.0 < 2":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
 
-stealthy-require@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
-  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-
-stream-browserify@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.1.tgz#66266ee5f9bdb9940a4e4514cafb43bb71e5c9db"
-  dependencies:
-    inherits "~2.0.1"
-    readable-stream "^2.0.2"
-
-stream-each@^1.1.0:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/stream-each/-/stream-each-1.2.3.tgz#ebe27a0c389b04fbcc233642952e10731afa9bae"
-  dependencies:
-    end-of-stream "^1.1.0"
-    stream-shift "^1.0.0"
-
-stream-http@^2.7.2:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.3.tgz#b2d242469288a5a27ec4fe8933acf623de6514fc"
-  dependencies:
-    builtin-status-codes "^3.0.0"
-    inherits "^2.0.1"
-    readable-stream "^2.3.6"
-    to-arraybuffer "^1.0.0"
-    xtend "^4.0.0"
-
-stream-shift@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
-
-strict-uri-encode@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
-
 string-length@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
@@ -10693,35 +8790,28 @@ string-length@^4.0.1:
     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@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-1.0.2.tgz#118bdf5b8cdc51a2a7e70d211e07e2b0b9b107d3"
-  dependencies:
-    code-point-at "^1.0.0"
-    is-fullwidth-code-point "^1.0.0"
-    strip-ansi "^3.0.0"
-
-"string-width@^1.0.2 || 2", string-width@^2.0.0, string-width@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
-  dependencies:
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^4.0.0"
-
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-3.1.0.tgz#22767be21b62af1081574306f69ac51b62203961"
+string-width@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
   dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^5.2.0"
 
-string-width@^4.0.0, string-width@^4.2.0:
+string-width@^4.2.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==
@@ -10730,26 +8820,28 @@ string-width@^4.0.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string-width@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff"
+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 "^5.2.0"
+    strip-ansi "^6.0.1"
 
-string.prototype.matchall@^4.0.2:
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.3.tgz#24243399bc31b0a49d19e2b74171a15653ec996a"
-  integrity sha512-OBxYDA2ifZQ2e13cP82dWFMaCV9CGF8GzmN4fljBVw5O5wep0lu4gacm1OL6MjROoUnB8VbkWRThqkV2YFLNxw==
+string.prototype.matchall@^4.0.6, string.prototype.matchall@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz#8e6ecb0d8a1fb1fda470d81acecb2dba057a481d"
+  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.18.0-next.1"
-    has-symbols "^1.0.1"
-    internal-slot "^1.0.2"
-    regexp.prototype.flags "^1.3.0"
-    side-channel "^1.0.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.1"
+    side-channel "^1.0.4"
 
 string.prototype.trimend@^1.0.1:
   version "1.0.3"
@@ -10759,6 +8851,15 @@ string.prototype.trimend@^1.0.1:
     call-bind "^1.0.0"
     define-properties "^1.1.3"
 
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz#914a65baaab25fbdd4ee291ca7dde57e869cb8d0"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
 string.prototype.trimleft@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634"
@@ -10781,11 +8882,14 @@ string.prototype.trimstart@^1.0.1:
     call-bind "^1.0.0"
     define-properties "^1.1.3"
 
-string_decoder@^1.0.0, string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz#5466d93ba58cfa2134839f81d7f42437e8c01fef"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
   dependencies:
-    safe-buffer "~5.1.0"
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
 
 string_decoder@^1.1.1:
   version "1.3.0"
@@ -10793,9 +8897,11 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  dependencies:
+    safe-buffer "~5.1.0"
 
 stringify-object@^3.3.0:
   version "3.3.0"
@@ -10805,30 +8911,32 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-strip-ansi@6.0.0, strip-ansi@^6.0.0:
+strip-ansi@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.2.0.tgz#8c9a536feb6afc962bdfa5b104a5091c1ad9c0ae"
+  dependencies:
+    ansi-regex "^4.1.0"
+
+strip-ansi@^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"
 
-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"
+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 "^3.0.0"
+    ansi-regex "^5.0.1"
 
-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"
+strip-ansi@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.0.1.tgz#61740a08ce36b61e50e65653f07060d000975fb2"
+  integrity sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==
   dependencies:
-    ansi-regex "^4.1.0"
+    ansi-regex "^6.0.1"
 
 strip-bom@^3.0.0:
   version "3.0.0"
@@ -10839,53 +8947,40 @@ strip-bom@^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@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
-  dependencies:
-    babel-extract-comments "^1.0.0"
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-
-strip-eof@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
+strip-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-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.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"
-
-style-loader@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.3.0.tgz#828b4a3b3b7e7aa5847ce7bae9e874512114249e"
-  integrity sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^2.7.0"
-
-stylehacks@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.1.tgz#3186595d047ab0df813d213e51c8b94e0b9010f2"
-  dependencies:
-    browserslist "^4.0.0"
-    postcss "^7.0.0"
-    postcss-selector-parser "^3.0.0"
+style-loader@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-3.3.1.tgz#057dfa6b3d4d7c7064462830f9113ed417d38575"
+  integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
 
-supports-color@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b"
-  integrity sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=
+stylehacks@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.0.tgz#a40066490ca0caca04e96c6b02153ddc39913520"
+  integrity sha512-SzLmvHQTrIWfSgljkQCw2++C9+Ne91d/6Sp92I8c5uHTcy/PgeHamwITIbBW9wnFTY/3ZfSXR9HIL6Ikqmcu6Q==
   dependencies:
-    has-flag "^2.0.0"
+    browserslist "^4.16.6"
+    postcss-selector-parser "^6.0.4"
 
 supports-color@^5.3.0, supports-color@^5.5.0:
   version "5.5.0"
@@ -10893,12 +8988,6 @@ supports-color@^5.3.0, supports-color@^5.5.0:
   dependencies:
     has-flag "^3.0.0"
 
-supports-color@^6.1.0:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
-  dependencies:
-    has-flag "^3.0.0"
-
 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"
@@ -10906,6 +8995,13 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   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.1.0"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.1.0.tgz#f663df252af5f37c5d49bbd7eeefa9e0b9e59e47"
@@ -10914,30 +9010,16 @@ supports-hyperlinks@^2.0.0:
     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.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.1.1.tgz#12384b03335bcecd85cfa5f4e3375fed671cb985"
-  dependencies:
-    coa "~2.0.1"
-    colors "~1.1.2"
-    css-select "^2.0.0"
-    css-select-base-adapter "~0.1.0"
-    css-tree "1.0.0-alpha.28"
-    css-url-regex "^1.1.0"
-    csso "^3.5.0"
-    js-yaml "^3.12.0"
-    mkdirp "~0.5.1"
-    object.values "^1.0.4"
-    sax "~1.2.4"
-    stable "~0.1.6"
-    unquote "~1.1.1"
-    util.promisify "~1.0.0"
-
 svgo@^1.2.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167"
@@ -10956,134 +9038,104 @@ svgo@^1.2.2:
     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==
 
-table@^5.2.3:
-  version "5.4.6"
-  resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"
-  dependencies:
-    ajv "^6.10.2"
-    lodash "^4.17.14"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
+tailwindcss@^3.0.2:
+  version "3.1.8"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.1.8.tgz#4f8520550d67a835d32f2f4021580f9fddb7b741"
+  integrity sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==
+  dependencies:
+    arg "^5.0.2"
+    chokidar "^3.5.3"
+    color-name "^1.1.4"
+    detective "^5.2.1"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    lilconfig "^2.0.6"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.14"
+    postcss-import "^14.1.0"
+    postcss-js "^4.0.0"
+    postcss-load-config "^3.1.4"
+    postcss-nested "5.0.6"
+    postcss-selector-parser "^6.0.10"
+    postcss-value-parser "^4.2.0"
+    quick-lru "^5.1.1"
+    resolve "^1.22.1"
 
 tapable@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.0.tgz#0d076a172e3d9ba088fd2272b2668fb8d194b78c"
 
-tapable@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-
-tar@^4:
-  version "4.4.6"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.6.tgz#63110f09c00b4e60ac8bcfe1bf3c8660235fbc9b"
-  dependencies:
-    chownr "^1.0.1"
-    fs-minipass "^1.2.5"
-    minipass "^2.3.3"
-    minizlib "^1.1.0"
-    mkdirp "^0.5.0"
-    safe-buffer "^5.1.2"
-    yallist "^3.0.2"
-
-tar@^6.0.2:
-  version "6.0.5"
-  resolved "https://registry.yarnpkg.com/tar/-/tar-6.0.5.tgz#bde815086e10b39f1dcd298e89d596e1535e200f"
-  integrity sha512-0b4HOimQHj9nXNEAA7zWwMM91Zhhba3pspja6sQbgTpynOJf+bkjBnfybNYzbpLbnwXnbyB4LOREvlyXLkCHSg==
-  dependencies:
-    chownr "^2.0.0"
-    fs-minipass "^2.0.0"
-    minipass "^3.0.0"
-    minizlib "^2.1.1"
-    mkdirp "^1.0.3"
-    yallist "^4.0.0"
+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==
 
-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=
+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.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.3.0.tgz#6f6c5b295695a16130996ad5ab01a8bd726e8bf8"
-  integrity sha512-WrH/pui8YCwmeiAoxV+lpRH9HpRtgBhSR2ViBPgpGb/wnYDzp21R4MN45fsCGvLROvY67o3byhJRYRONJyImVQ==
+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:
-    temp-dir "^1.0.0"
-    type-fest "^0.3.1"
-    unique-string "^1.0.0"
-
-term-size@^2.1.0:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.1.tgz#2a6a54840432c2fb6320fea0f415531e90189f54"
-  integrity sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==
+    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@4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-4.2.3.tgz#28daef4a83bd17c1db0297070adc07fc8cfc6a9a"
-  integrity sha512-jTgXh40RnvOrLQNgIkwEKnQ8rmHjHK4u+6UBEi+W+FPmvb+uo+chJXntKe7/3lW5mNysgSWD60KyesnhW8D6MQ==
-  dependencies:
-    cacache "^15.0.5"
-    find-cache-dir "^3.3.1"
-    jest-worker "^26.5.0"
-    p-limit "^3.0.2"
-    schema-utils "^3.0.0"
-    serialize-javascript "^5.0.1"
-    source-map "^0.6.1"
-    terser "^5.3.4"
-    webpack-sources "^1.4.3"
-
-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.3.9"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.3.9.tgz#e4be37f80553d02645668727777687dad26bbca8"
+  integrity sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==
   dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
+    ansi-escapes "^4.2.1"
+    supports-hyperlinks "^2.0.0"
 
-terser@^4.6.2, terser@^4.6.3:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.2.5:
+  version "5.3.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.3.5.tgz#f7d82286031f915a4f8fb81af4bd35d2e3c011bc"
+  integrity sha512-AOEDLDxD2zylUGf/wxHxklEkOe2/r+seuyOWujejFrIxHf11brA1/dWQNIgXa1c6/Wkxgu7zvv0JhOWfc2ELEA==
   dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
+    "@jridgewell/trace-mapping" "^0.3.14"
+    jest-worker "^27.4.5"
+    schema-utils "^3.1.1"
+    serialize-javascript "^6.0.0"
+    terser "^5.14.1"
 
-terser@^5.3.4:
-  version "5.5.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.5.1.tgz#540caa25139d6f496fdea056e414284886fb2289"
-  integrity sha512-6VGWZNVP2KTUcltUQJ25TtNjx/XgdDsBDKGt8nN0MpydU36LmbPPcMBd2kmtZNNGVVDLg44k7GKeHHj+4zPIBQ==
+terser@^5.0.0, terser@^5.10.0, terser@^5.14.1:
+  version "5.14.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.14.2.tgz#9ac9f22b06994d736174f4091aa368db896f1c10"
+  integrity sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==
   dependencies:
+    "@jridgewell/source-map" "^0.3.2"
+    acorn "^8.5.0"
     commander "^2.20.0"
-    source-map "~0.7.2"
-    source-map-support "~0.5.19"
+    source-map-support "~0.5.20"
 
 test-exclude@^6.0.0:
   version "6.0.0"
@@ -11094,66 +9146,27 @@ test-exclude@^6.0.0:
     glob "^7.1.4"
     minimatch "^3.0.4"
 
-text-table@0.2.0, text-table@^0.2.0:
+text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
-throat@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
-  integrity sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==
-
-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"
+throat@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/throat/-/throat-6.0.1.tgz#d514fedad95740c12c2d7fc70ea863eb51ade375"
+  integrity sha512-8hmiGIJMDlwjg7dlJ4yKGLK8EsYqKgPWbG3b4wjJddKNwc7N7Dpn08Df4szr/sZdMVeOstrdYSsqzX6BYbcB+w==
 
 thunky@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.0.2.tgz#a862e018e3fb1ea2ec3fce5d55605cf57f247371"
 
-timers-browserify@^2.0.4:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.10.tgz#1d28e3d2aadf1d5a5996c4e9f95601cd053480ae"
-  dependencies:
-    setimmediate "^1.0.4"
-
-timsort@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
-
 tmpl@1.0.x:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
 
-to-arraybuffer@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
 
-to-object-path@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"
-  dependencies:
-    kind-of "^3.0.2"
-
-to-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"
-  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"
@@ -11161,19 +9174,10 @@ to-regex-range@^5.0.1:
   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"
-  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==
+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"
@@ -11182,22 +9186,21 @@ touch@^3.1.0:
   dependencies:
     nopt "~1.0.10"
 
-tough-cookie@^2.3.3, 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==
+tough-cookie@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
+  integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
   dependencies:
-    psl "^1.1.28"
+    psl "^1.1.33"
     punycode "^2.1.1"
+    universalify "^0.1.2"
 
-tough-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
-  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
+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:
-    ip-regex "^2.1.0"
-    psl "^1.1.28"
-    punycode "^2.1.1"
+    punycode "^2.1.0"
 
 tr46@^2.0.2:
   version "2.0.2"
@@ -11206,33 +9209,31 @@ tr46@^2.0.2:
   dependencies:
     punycode "^2.1.1"
 
-tree-kill@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/tree-kill/-/tree-kill-1.2.1.tgz#5398f374e2f292b9dcc7b2e71e30a5c3bb6c743a"
-  integrity sha512-4hjqbObwlh2dLyW4tcz0Ymw0ggoaVDMveUB9w8kFSQScdRLo0gxO9J7WFcUBo+W3C1TLdFIEwNOWebgZZ0RH9Q==
+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"
 
-trim-right@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/trim-right/-/trim-right-1.0.1.tgz#cb2e1203067e0c8de1f614094b9fe45704ea6003"
+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==
 
 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-pnp@1.2.0, ts-pnp@^1.1.6:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
-  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
-
-tsconfig-paths@^3.9.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.9.0.tgz#098547a6c4448807e8fcb8eae081064ee9a3c90b"
-  integrity sha512-dRcuzokWhajtZWkQsDVKbWyY+jgcLC5sqJhg2PSgf4ZkH2aHPvaOY8YWGhmjb68b5qqTfasSsDO9k7RUiEmZAw==
+tsconfig-paths@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
   dependencies:
     "@types/json5" "^0.0.29"
     json5 "^1.0.1"
-    minimist "^1.2.0"
+    minimist "^1.2.6"
     strip-bom "^3.0.0"
 
 tslib@^1.8.1:
@@ -11248,25 +9249,17 @@ tslib@^2.0.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
 
-tsutils@^3.17.1:
-  version "3.17.1"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759"
-  dependencies:
-    tslib "^1.8.1"
-
-tty-browserify@0.0.0:
-  version "0.0.0"
-  resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
+tslib@^2.1.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
 
-tunnel-agent@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
+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:
-    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"
+    tslib "^1.8.1"
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
@@ -11291,26 +9284,21 @@ type-fest@^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.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
-  integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
+type-fest@^0.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.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.5.2.tgz#d6ef42a0356c6cd45f49485c3b6281fc148e48a2"
 
-type-fest@^0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
-  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
-
-type-fest@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
-  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==
-
-type-is@~1.6.17, type-is@~1.6.18:
+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==
@@ -11318,14 +9306,6 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
-
-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
-
 typedarray-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"
@@ -11333,21 +9313,30 @@ typedarray-to-buffer@^3.1.5:
   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"
-
-undefsafe@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/undefsafe/-/undefsafe-2.0.3.tgz#6b166e7094ad46313b2202da7ecc2cd7cc6e7aae"
-  integrity sha512-nrXZwwXrD/T/JXeygJqdCO6NZZ1L66HrxM/Z7mIq2oPanoN0F1nLx3lwJMu6AwJY69hdixaFQOuoYsMjE5/C2A==
+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:
-    debug "^2.2.0"
+    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==
 
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
 
+unicode-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@^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"
@@ -11355,55 +9344,36 @@ unicode-match-property-ecmascript@^1.0.4:
     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.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
 
-unicode-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.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@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.4.tgz#5a533f31b4317ea76f17d807fa0d116546111dd0"
 
-union-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
-  dependencies:
-    arr-union "^3.1.0"
-    get-value "^2.0.6"
-    is-extendable "^0.1.1"
-    set-value "^0.4.3"
+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==
 
 uniq@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
 
-uniqs@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
-
-unique-filename@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unique-filename/-/unique-filename-1.1.1.tgz#1d69769369ada0583103a1e6ae87681b56573230"
-  dependencies:
-    unique-slug "^2.0.0"
-
-unique-slug@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unique-slug/-/unique-slug-2.0.1.tgz#5e9edc6d1ce8fb264db18a507ef9bd8544451ca6"
-  dependencies:
-    imurmurhash "^0.1.4"
-
-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"
-
 unique-string@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/unique-string/-/unique-string-2.0.0.tgz#39c6451f81afb2749de2b233e3f7c5e8843bd89d"
@@ -11411,9 +9381,10 @@ unique-string@^2.0.0:
   dependencies:
     crypto-random-string "^2.0.0"
 
-universalify@^0.1.0:
+universalify@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
+  integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
 universalify@^1.0.0:
   version "1.0.0"
@@ -11433,36 +9404,18 @@ unquote@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
 
-unset-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
-  dependencies:
-    has-value "^0.3.1"
-    isobject "^3.0.0"
-
-upath@^1.1.1, upath@^1.1.2, upath@^1.2.0:
+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-notifier@^4.1.0:
-  version "4.1.3"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-4.1.3.tgz#be86ee13e8ce48fb50043ff72057b5bd598e1ea3"
-  integrity sha512-Yld6Z0RyCYGB6ckIjffGOSOmHXj1gMeE7aROz4MG+XMkmixBX4jUngrGXNYz7wPKBmtoD4MnBa2Anu7RSKht/A==
+update-browserslist-db@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.5.tgz#be06a5eedd62f107b7c19eb5bcefb194411abf38"
+  integrity sha512-dteFFpCyvuDdr9S/ff1ISkKt/9YZxKjI9WlRR99c180GaztJtRa/fn18FdxGVKVsnPY7/a/FDN68mcvUmP4U7Q==
   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"
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
 
 uri-js@^4.2.2:
   version "4.2.2"
@@ -11470,68 +9423,18 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
-urix@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
-
-url-loader@4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
-  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
-  dependencies:
-    loader-utils "^2.0.0"
-    mime-types "^2.1.27"
-    schema-utils "^3.0.0"
-
-url-parse-lax@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-3.0.0.tgz#16b5cafc07dbe3676c1b1999177823d6503acb0c"
-  integrity sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=
-  dependencies:
-    prepend-http "^2.0.0"
-
-url-parse@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.3.tgz#bfaee455c889023219d757e045fa6a684ec36c15"
-  dependencies:
-    querystringify "^2.0.0"
-    requires-port "^1.0.0"
-
-url@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-use@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
-
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
 
-util.promisify@1.0.0, util.promisify@~1.0.0:
+util.promisify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
   dependencies:
     define-properties "^1.1.2"
     object.getownpropertydescriptors "^2.0.3"
 
-util@0.10.3:
-  version "0.10.3"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
-  dependencies:
-    inherits "2.0.1"
-
-util@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
-  dependencies:
-    inherits "2.0.3"
-
-utila@^0.4.0, utila@~0.4:
+utila@~0.4:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
 
@@ -11539,60 +9442,28 @@ 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.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.2.tgz#1b4af4955eb3077c501c23872fc6513811587131"
-
-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==
-
-uuid@^8.3.0:
-  version "8.3.1"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
-  integrity sha512-FOmRr+FmWEIG8uhZv6C2bTgEVXsHk08kE7mPlrBbEe+c3r9pjceVPgupIfNIhc4yx55H69OXANrUaSuu9eInKg==
+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.1.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.1.0.tgz#e14de37b31a6d194f5690d67efc4e7f6fc6ab30e"
 
-v8-to-istanbul@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-7.0.0.tgz#b4fe00e35649ef7785a9b7fcebcea05f37c332fc"
-  integrity sha512-fLL2rFuQpMtm9r8hrAV2apXX/WqHJ6+IC4/eQVdMDGBUgH/YMV4Gv3duk3kjmyg6uiQWBAA9nJwue4iJUOkHeA==
+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"
 
-validate-npm-package-license@^3.0.1:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
-  dependencies:
-    spdx-correct "^3.0.0"
-    spdx-expression-parse "^3.0.0"
-
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
 
-vendors@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"
-
-verror@1.10.0:
-  version "1.10.0"
-  resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"
-  dependencies:
-    assert-plus "^1.0.0"
-    core-util-is "1.0.2"
-    extsprintf "^1.2.0"
-
-vm-browserify@^1.0.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
-
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"
@@ -11607,29 +9478,19 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
-walker@^1.0.7, walker@~1.0.5:
+walker@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/walker/-/walker-1.0.7.tgz#2f7f9b8fd10d677262b18a884e28d19618e028fb"
   dependencies:
     makeerror "1.0.x"
 
-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==
+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"
-    neo-async "^2.5.0"
-  optionalDependencies:
-    chokidar "^3.4.1"
-    watchpack-chokidar2 "^2.0.1"
 
 wbuf@^1.1.0, wbuf@^1.7.3:
   version "1.7.3"
@@ -11637,6 +9498,16 @@ wbuf@^1.1.0, wbuf@^1.7.3:
   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"
@@ -11647,122 +9518,109 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
-webpack-dev-middleware@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
-  integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
+webpack-dev-middleware@^5.3.1:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz#efae67c2793908e7311f1d9b06f2a08dcc97e51f"
+  integrity sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==
   dependencies:
-    memory-fs "^0.4.1"
-    mime "^2.4.4"
-    mkdirp "^0.5.1"
+    colorette "^2.0.10"
+    memfs "^3.4.3"
+    mime-types "^2.1.31"
     range-parser "^1.2.1"
-    webpack-log "^2.0.0"
-
-webpack-dev-server@3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
-  integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==
-  dependencies:
-    ansi-html "0.0.7"
-    bonjour "^3.5.0"
-    chokidar "^2.1.8"
+    schema-utils "^4.0.0"
+
+webpack-dev-server@^4.6.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.10.0.tgz#de270d0009eba050546912be90116e7fd740a9ca"
+  integrity sha512-7dezwAs+k6yXVFZ+MaL8VnE+APobiO3zvpp3rBHe/HmWQ+avwh0Q3d0xxacOiBybZZ3syTZw9HXzpa3YNbAZDQ==
+  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 "^1.6.0"
-    debug "^4.1.1"
-    del "^4.1.1"
-    express "^4.17.1"
-    html-entities "^1.3.1"
-    http-proxy-middleware "0.19.1"
-    import-local "^2.0.0"
-    internal-ip "^4.3.0"
-    ip "^1.1.5"
-    is-absolute-url "^3.0.3"
-    killable "^1.0.1"
-    loglevel "^1.6.8"
-    opn "^5.5.0"
-    p-retry "^3.0.1"
-    portfinder "^1.0.26"
-    schema-utils "^1.0.0"
-    selfsigned "^1.10.7"
-    semver "^6.3.0"
+    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"
+    open "^8.0.9"
+    p-retry "^4.5.0"
+    rimraf "^3.0.2"
+    schema-utils "^4.0.0"
+    selfsigned "^2.0.1"
     serve-index "^1.9.1"
-    sockjs "0.3.20"
-    sockjs-client "1.4.0"
+    sockjs "^0.3.24"
     spdy "^4.0.2"
-    strip-ansi "^3.0.1"
-    supports-color "^6.1.0"
-    url "^0.11.0"
-    webpack-dev-middleware "^3.7.2"
-    webpack-log "^2.0.0"
-    ws "^6.2.1"
-    yargs "^13.3.2"
-
-webpack-log@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"
-  dependencies:
-    ansi-colors "^3.0.0"
-    uuid "^3.3.2"
-
-webpack-manifest-plugin@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/webpack-manifest-plugin/-/webpack-manifest-plugin-2.2.0.tgz#19ca69b435b0baec7e29fbe90fb4015de2de4f16"
-  integrity sha512-9S6YyKKKh/Oz/eryM1RyLVDVmy3NSPV0JXMRhZ18fJsq+AwGxUY34X54VNwkzYcEmEkDwNxuEOboCZEebJXBAQ==
-  dependencies:
-    fs-extra "^7.0.0"
-    lodash ">=3.5 <5"
-    object.entries "^1.1.0"
-    tapable "^1.0.0"
+    webpack-dev-middleware "^5.3.1"
+    ws "^8.4.2"
 
-webpack-sources@^1.1.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.3.0.tgz#2a28dcb9f1f45fe960d8f1493252b5ee6530fa85"
+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:
-    source-list-map "^2.0.0"
-    source-map "~0.6.1"
+    tapable "^2.0.0"
+    webpack-sources "^2.2.0"
 
-webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
+webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   dependencies:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@4.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"
-
-websocket-driver@0.6.5:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/websocket-driver/-/websocket-driver-0.6.5.tgz#5cb2556ceb85f4373c6d8238aa691c8454e13a36"
-  integrity sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=
+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:
-    websocket-extensions ">=0.1.1"
+    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.74.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
+  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
+  dependencies:
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.10.0"
+    es-module-lexer "^0.9.0"
+    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.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
 
 websocket-driver@>=0.5.1:
   version "0.7.0"
@@ -11771,6 +9629,15 @@ websocket-driver@>=0.5.1:
     http-parser-js ">=0.4.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"
@@ -11781,15 +9648,24 @@ whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
-whatwg-fetch@^3.4.1:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.5.0.tgz#605a2cd0a7146e5db141e29d1c62ab84c0c4c868"
-  integrity sha512-jXkLtsR42xhXg7akoDKvKWE40eJeI+2KZqcp2h3NsOrRnDvtWX36KcKl30dy+hxECivdk2BVUHVNrPtoMBUx6A==
+whatwg-fetch@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
+  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
 
 whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
 
+whatwg-url@^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:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.4.0.tgz#50fb9615b05469591d2b2bd6dfaed2942ed72837"
@@ -11799,36 +9675,39 @@ whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^6.1.0"
 
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
+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@^1.2.9, which@^1.3.1:
+which@^1.3.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
   dependencies:
     isexe "^2.0.0"
 
-which@^2.0.1, which@^2.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"
 
-wide-align@^1.1.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"
-  dependencies:
-    string-width "^1.0.2 || 2"
-
-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"
-
 word-wrap@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
@@ -11838,190 +9717,179 @@ wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
 
-workbox-background-sync@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-5.1.4.tgz#5ae0bbd455f4e9c319e8d827c055bb86c894fd12"
-  integrity sha512-AH6x5pYq4vwQvfRDWH+vfOePfPIYQ00nCEB7dJRU1e0n9+9HMRyvI63FlDvtFT2AvXVRsXvUt7DNMEToyJLpSA==
+workbox-background-sync@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.4.tgz#3141afba3cc8aa2ae14c24d0f6811374ba8ff6a9"
+  integrity sha512-0r4INQZMyPky/lj4Ou98qxcThrETucOde+7mRGJl13MPJugQNKeZQOdIJe/1AchOP23cTqHcN/YVpD6r8E6I8g==
   dependencies:
-    workbox-core "^5.1.4"
+    idb "^7.0.1"
+    workbox-core "6.5.4"
 
-workbox-broadcast-update@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-5.1.4.tgz#0eeb89170ddca7f6914fa3523fb14462891f2cfc"
-  integrity sha512-HTyTWkqXvHRuqY73XrwvXPud/FN6x3ROzkfFPsRjtw/kGZuZkPzfeH531qdUGfhtwjmtO/ZzXcWErqVzJNdXaA==
+workbox-broadcast-update@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.4.tgz#8441cff5417cd41f384ba7633ca960a7ffe40f66"
+  integrity sha512-I/lBERoH1u3zyBosnpPEtcAVe5lwykx9Yg1k6f8/BGEPGaMMgZrwVrqL1uA9QZ1NGGFoyE6t9i7lBjOlDhFEEw==
   dependencies:
-    workbox-core "^5.1.4"
+    workbox-core "6.5.4"
 
-workbox-build@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-5.1.4.tgz#23d17ed5c32060c363030c8823b39d0eabf4c8c7"
-  integrity sha512-xUcZn6SYU8usjOlfLb9Y2/f86Gdo+fy1fXgH8tJHjxgpo53VVsqRX0lUDw8/JuyzNmXuo8vXX14pXX2oIm9Bow==
+workbox-build@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.4.tgz#7d06d31eb28a878817e1c991c05c5b93409f0389"
+  integrity sha512-kgRevLXEYvUW9WS4XoziYqZ8Q9j/2ziJYEtTrjdz5/L/cTUa2XfyMP2i7c3p34lgqJ03+mTiz13SdFef2POwbA==
   dependencies:
-    "@babel/core" "^7.8.4"
-    "@babel/preset-env" "^7.8.4"
-    "@babel/runtime" "^7.8.4"
-    "@hapi/joi" "^15.1.0"
-    "@rollup/plugin-node-resolve" "^7.1.1"
-    "@rollup/plugin-replace" "^2.3.1"
-    "@surma/rollup-plugin-off-main-thread" "^1.1.1"
+    "@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 "^8.1.0"
+    fs-extra "^9.0.1"
     glob "^7.1.6"
-    lodash.template "^4.5.0"
+    lodash "^4.17.20"
     pretty-bytes "^5.3.0"
-    rollup "^1.31.1"
-    rollup-plugin-babel "^4.3.3"
-    rollup-plugin-terser "^5.3.1"
-    source-map "^0.7.3"
-    source-map-url "^0.4.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 "^1.0.2"
-    tempy "^0.3.0"
+    strip-comments "^2.0.1"
+    tempy "^0.6.0"
     upath "^1.2.0"
-    workbox-background-sync "^5.1.4"
-    workbox-broadcast-update "^5.1.4"
-    workbox-cacheable-response "^5.1.4"
-    workbox-core "^5.1.4"
-    workbox-expiration "^5.1.4"
-    workbox-google-analytics "^5.1.4"
-    workbox-navigation-preload "^5.1.4"
-    workbox-precaching "^5.1.4"
-    workbox-range-requests "^5.1.4"
-    workbox-routing "^5.1.4"
-    workbox-strategies "^5.1.4"
-    workbox-streams "^5.1.4"
-    workbox-sw "^5.1.4"
-    workbox-window "^5.1.4"
-
-workbox-cacheable-response@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-5.1.4.tgz#9ff26e1366214bdd05cf5a43da9305b274078a54"
-  integrity sha512-0bfvMZs0Of1S5cdswfQK0BXt6ulU5kVD4lwer2CeI+03czHprXR3V4Y8lPTooamn7eHP8Iywi5QjyAMjw0qauA==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-core@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-5.1.4.tgz#8bbfb2362ecdff30e25d123c82c79ac65d9264f4"
-  integrity sha512-+4iRQan/1D8I81nR2L5vcbaaFskZC2CL17TLbvWVzQ4qiF/ytOGF6XeV54pVxAvKUtkLANhk8TyIUMtiMw2oDg==
-
-workbox-expiration@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-5.1.4.tgz#92b5df461e8126114943a3b15c55e4ecb920b163"
-  integrity sha512-oDO/5iC65h2Eq7jctAv858W2+CeRW5e0jZBMNRXpzp0ZPvuT6GblUiHnAsC5W5lANs1QS9atVOm4ifrBiYY7AQ==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-google-analytics@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-5.1.4.tgz#b3376806b1ac7d7df8418304d379707195fa8517"
-  integrity sha512-0IFhKoEVrreHpKgcOoddV+oIaVXBFKXUzJVBI+nb0bxmcwYuZMdteBTp8AEDJacENtc9xbR0wa9RDCnYsCDLjA==
-  dependencies:
-    workbox-background-sync "^5.1.4"
-    workbox-core "^5.1.4"
-    workbox-routing "^5.1.4"
-    workbox-strategies "^5.1.4"
-
-workbox-navigation-preload@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-5.1.4.tgz#30d1b720d26a05efc5fa11503e5cc1ed5a78902a"
-  integrity sha512-Wf03osvK0wTflAfKXba//QmWC5BIaIZARU03JIhAEO2wSB2BDROWI8Q/zmianf54kdV7e1eLaIEZhth4K4MyfQ==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-precaching@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-5.1.4.tgz#874f7ebdd750dd3e04249efae9a1b3f48285fe6b"
-  integrity sha512-gCIFrBXmVQLFwvAzuGLCmkUYGVhBb7D1k/IL7pUJUO5xacjLcFUaLnnsoVepBGAiKw34HU1y/YuqvTKim9qAZA==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-range-requests@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-5.1.4.tgz#7066a12c121df65bf76fdf2b0868016aa2bab859"
-  integrity sha512-1HSujLjgTeoxHrMR2muDW2dKdxqCGMc1KbeyGcmjZZAizJTFwu7CWLDmLv6O1ceWYrhfuLFJO+umYMddk2XMhw==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-routing@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-5.1.4.tgz#3e8cd86bd3b6573488d1a2ce7385e547b547e970"
-  integrity sha512-8ljknRfqE1vEQtnMtzfksL+UXO822jJlHTIR7+BtJuxQ17+WPZfsHqvk1ynR/v0EHik4x2+826Hkwpgh4GKDCw==
-  dependencies:
-    workbox-core "^5.1.4"
-
-workbox-strategies@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-5.1.4.tgz#96b1418ccdfde5354612914964074d466c52d08c"
-  integrity sha512-VVS57LpaJTdjW3RgZvPwX0NlhNmscR7OQ9bP+N/34cYMDzXLyA6kqWffP6QKXSkca1OFo/v6v7hW7zrrguo6EA==
-  dependencies:
-    workbox-core "^5.1.4"
-    workbox-routing "^5.1.4"
-
-workbox-streams@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-5.1.4.tgz#05754e5e3667bdc078df2c9315b3f41210d8cac0"
-  integrity sha512-xU8yuF1hI/XcVhJUAfbQLa1guQUhdLMPQJkdT0kn6HP5CwiPOGiXnSFq80rAG4b1kJUChQQIGPrq439FQUNVrw==
-  dependencies:
-    workbox-core "^5.1.4"
-    workbox-routing "^5.1.4"
-
-workbox-sw@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-5.1.4.tgz#2bb34c9f7381f90d84cef644816d45150011d3db"
-  integrity sha512-9xKnKw95aXwSNc8kk8gki4HU0g0W6KXu+xks7wFuC7h0sembFnTrKtckqZxbSod41TDaGh+gWUA5IRXrL0ECRA==
-
-workbox-webpack-plugin@5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-5.1.4.tgz#7bfe8c16e40fe9ed8937080ac7ae9c8bde01e79c"
-  integrity sha512-PZafF4HpugZndqISi3rZ4ZK4A4DxO8rAqt2FwRptgsDx7NF8TVKP86/huHquUsRjMGQllsNdn4FNl8CD/UvKmQ==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    fast-json-stable-stringify "^2.0.0"
-    source-map-url "^0.4.0"
-    upath "^1.1.2"
-    webpack-sources "^1.3.0"
-    workbox-build "^5.1.4"
+    workbox-background-sync "6.5.4"
+    workbox-broadcast-update "6.5.4"
+    workbox-cacheable-response "6.5.4"
+    workbox-core "6.5.4"
+    workbox-expiration "6.5.4"
+    workbox-google-analytics "6.5.4"
+    workbox-navigation-preload "6.5.4"
+    workbox-precaching "6.5.4"
+    workbox-range-requests "6.5.4"
+    workbox-recipes "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
+    workbox-streams "6.5.4"
+    workbox-sw "6.5.4"
+    workbox-window "6.5.4"
+
+workbox-cacheable-response@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.4.tgz#a5c6ec0c6e2b6f037379198d4ef07d098f7cf137"
+  integrity sha512-DCR9uD0Fqj8oB2TSWQEm1hbFs/85hXXoayVwFKLVuIuxwJaihBsLsp4y7J9bvZbqtPJ1KlCkmYVGQKrBU4KAug==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-core@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.4.tgz#df48bf44cd58bb1d1726c49b883fb1dffa24c9ba"
+  integrity sha512-OXYb+m9wZm8GrORlV2vBbE5EC1FKu71GGp0H4rjmxmF4/HLbMCoTFws87M3dFwgpmg0v00K++PImpNQ6J5NQ6Q==
 
-workbox-window@^5.1.4:
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-5.1.4.tgz#2740f7dea7f93b99326179a62f1cc0ca2c93c863"
-  integrity sha512-vXQtgTeMCUq/4pBWMfQX8Ee7N2wVC4Q7XYFqLnfbXJ2hqew/cU1uMTD2KqGEgEpE4/30luxIxgE+LkIa8glBYw==
+workbox-expiration@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.4.tgz#501056f81e87e1d296c76570bb483ce5e29b4539"
+  integrity sha512-jUP5qPOpH1nXtjGGh1fRBa1wJL2QlIb5mGpct3NzepjGG2uFFBn4iiEBiI9GUmfAFR2ApuRhDydjcRmYXddiEQ==
   dependencies:
-    workbox-core "^5.1.4"
+    idb "^7.0.1"
+    workbox-core "6.5.4"
 
-worker-farm@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.7.0.tgz#26a94c5391bbca926152002f69b84a4bf772e5a8"
+workbox-google-analytics@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.4.tgz#c74327f80dfa4c1954cbba93cd7ea640fe7ece7d"
+  integrity sha512-8AU1WuaXsD49249Wq0B2zn4a/vvFfHkpcFfqAFHNHwln3jK9QUYmzdkKXGIZl9wyKNP+RRX30vcgcyWMcZ9VAg==
   dependencies:
-    errno "~0.1.7"
+    workbox-background-sync "6.5.4"
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
 
-worker-rpc@^0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"
+workbox-navigation-preload@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.4.tgz#ede56dd5f6fc9e860a7e45b2c1a8f87c1c793212"
+  integrity sha512-IIwf80eO3cr8h6XSQJF+Hxj26rg2RPFVUmJLUlM0+A2GzB4HFbQyKkrgD5y2d84g2IbJzP4B4j5dPBRzamHrng==
   dependencies:
-    microevent.ts "~0.1.1"
+    workbox-core "6.5.4"
 
-wrap-ansi@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
+workbox-precaching@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.4.tgz#740e3561df92c6726ab5f7471e6aac89582cab72"
+  integrity sha512-hSMezMsW6btKnxHB4bFy2Qfwey/8SYdGWvVIKFaUm8vJ4E53JAY+U2JwLTRD8wbLWoP6OVUdFlXsTdKu9yoLTg==
   dependencies:
-    string-width "^1.0.1"
-    strip-ansi "^3.0.1"
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
 
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
+workbox-range-requests@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.4.tgz#86b3d482e090433dab38d36ae031b2bb0bd74399"
+  integrity sha512-Je2qR1NXCFC8xVJ/Lux6saH6IrQGhMpDrPXWZWWS8n/RD+WZfKa6dSZwU+/QksfEadJEr/NfY+aP/CXFFK5JFg==
   dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
+    workbox-core "6.5.4"
 
-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==
+workbox-recipes@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.4.tgz#cca809ee63b98b158b2702dcfb741b5cc3e24acb"
+  integrity sha512-QZNO8Ez708NNwzLNEXTG4QYSKQ1ochzEtRLGaq+mr2PyoEIC1xFW7MrWxrONUxBFOByksds9Z4//lKAX8tHyUA==
+  dependencies:
+    workbox-cacheable-response "6.5.4"
+    workbox-core "6.5.4"
+    workbox-expiration "6.5.4"
+    workbox-precaching "6.5.4"
+    workbox-routing "6.5.4"
+    workbox-strategies "6.5.4"
+
+workbox-routing@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.4.tgz#6a7fbbd23f4ac801038d9a0298bc907ee26fe3da"
+  integrity sha512-apQswLsbrrOsBUWtr9Lf80F+P1sHnQdYodRo32SjiByYi36IDyL2r7BH1lJtFX8fwNHDa1QOVY74WKLLS6o5Pg==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-strategies@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.4.tgz#4edda035b3c010fc7f6152918370699334cd204d"
+  integrity sha512-DEtsxhx0LIYWkJBTQolRxG4EI0setTJkqR4m7r4YpBdxtWJH1Mbg01Cj8ZjNOO8etqfA3IZaOPHUxCs8cBsKLw==
+  dependencies:
+    workbox-core "6.5.4"
+
+workbox-streams@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.4.tgz#1cb3c168a6101df7b5269d0353c19e36668d7d69"
+  integrity sha512-FXKVh87d2RFXkliAIheBojBELIPnWbQdyDvsH3t74Cwhg0fDheL1T8BqSM86hZvC0ZESLsznSYWw+Va+KVbUzg==
+  dependencies:
+    workbox-core "6.5.4"
+    workbox-routing "6.5.4"
+
+workbox-sw@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.4.tgz#d93e9c67924dd153a61367a4656ff4d2ae2ed736"
+  integrity sha512-vo2RQo7DILVRoH5LjGqw3nphavEjK4Qk+FenXeUsknKn14eCNedHOXWbmnvP4ipKhlE35pvJ4yl4YYf6YsJArA==
+
+workbox-webpack-plugin@^6.4.1:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.4.tgz#baf2d3f4b8f435f3469887cf4fba2b7fac3d0fd7"
+  integrity sha512-LmWm/zoaahe0EGmMTrSLUi+BjyR3cdGEfU3fS6PN1zKFYbqAKuQ+Oy/27e4VSXsyIwAw8+QDfk1XHNGtZu9nQg==
+  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.5.4"
+
+workbox-window@6.5.4:
+  version "6.5.4"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.4.tgz#d991bc0a94dff3c2dbb6b84558cff155ca878e91"
+  integrity sha512-HnLZJDwYBE+hpG25AQBO8RUWBJRaCsI9ksQJEp3aCOFCaG5kqaToAYXFRAHxzRluM2cQbGzdQF5rjKPWPA1fug==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+    workbox-core "6.5.4"
+
+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"
@@ -12041,22 +9909,15 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-ws@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
-  dependencies:
-    async-limiter "~1.0.0"
-
-ws@^7.2.3:
-  version "7.4.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.4.1.tgz#a333be02696bd0e54cea0434e21dcc8a9ac294bb"
-  integrity sha512-pTsP8UAfhy3sk1lSk/O/s4tjD0CRwvMnzvwr4OKGX7ZvqZtUyx4KIJB5JWbkykPoc55tixMGgTNoh3k4FkNGFQ==
+ws@^7.4.6:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
-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==
+ws@^8.4.2:
+  version "8.8.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
+  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
 
 xml-name-validator@^3.0.0:
   version "3.0.0"
@@ -12067,17 +9928,15 @@ xmlchars@^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.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
-
-"y18n@^3.2.1 || ^4.0.0", y18n@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
+xtend@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-yallist@^3.0.0, yallist@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.0.2.tgz#8452b4bb7e83c7c188d8041c1a837c773d6d8bb9"
+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@^4.0.0:
   version "4.0.0"
@@ -12089,80 +9948,46 @@ yaml@^1.10.0, yaml@^1.7.2:
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
   integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
 
-yargs-parser@^11.1.1:
-  version "11.1.1"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-11.1.1.tgz#879a0865973bca9f6bab5cbdf3b1c67ec7d3bcf4"
-  integrity sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
+yaml@^1.10.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-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@^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.0.0:
+  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@^12.0.5:
-  version "12.0.5"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13"
-  integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==
+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 "^4.0.0"
-    decamelize "^1.2.0"
-    find-up "^3.0.0"
-    get-caller-file "^1.0.1"
-    os-locale "^3.0.0"
-    require-directory "^2.1.1"
-    require-main-filename "^1.0.1"
-    set-blocking "^2.0.0"
-    string-width "^2.0.0"
-    which-module "^2.0.0"
-    y18n "^3.2.1 || ^4.0.0"
-    yargs-parser "^11.1.1"
-
-yargs@^13.3.2:
-  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"
-
-yargs@^15.4.1:
-  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"
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
     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"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
+yargs@^17.3.1:
+  version "17.5.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.5.1.tgz#e109900cab6fcb7fd44b1d8249166feb0b36e58e"
+  integrity sha512-t6YAJcxDkNX7NFYiVtKvWUz8l+PaKTLiL63mJYWR2GnHq2gjEWISzsLp9wg3aY36dY1j+gfIEL3pIF+XlJJfbA==
+  dependencies:
+    cliui "^7.0.2"
+    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.0.0"
 
 yocto-queue@^0.1.0:
   version "0.1.0"
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 9652f03405af..737a8502801b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import acorn from 'acorn';
+import {acorn} from 'acorn';
 
 type ResolveContext = {
   conditions: Array<string>,

From 181525338e62a698c05ca04cf91fdccdafd2b5db Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Wed, 24 Aug 2022 11:25:22 -0700
Subject: [PATCH 1519/1603] [DevTools] Highlight RN elements on hover (#25106)

* [DevTools] Highlight RN elements on hover

* Remove unused TODO
---
 .../src/backend/views/Highlighter/Highlighter.js     | 12 +++++++++---
 .../src/backend/views/Highlighter/index.js           |  6 +++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
index 3a5228658e21..9d3098cbfdfc 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
@@ -16,7 +16,11 @@ const SHOW_DURATION = 2000;
 let timeoutID: TimeoutID | null = null;
 let overlay: Overlay | null = null;
 
-export function hideOverlay() {
+export function hideOverlay(agent: Agent) {
+  if (window.document == null) {
+    agent.emit('hideNativeHighlight');
+    return;
+  }
   timeoutID = null;
 
   if (overlay !== null) {
@@ -31,8 +35,10 @@ export function showOverlay(
   agent: Agent,
   hideAfterTimeout: boolean,
 ) {
-  // TODO (npm-packages) Detect RN and support it somehow
   if (window.document == null) {
+    if (elements != null && elements[0] != null) {
+      agent.emit('showNativeHighlight', elements[0]);
+    }
     return;
   }
 
@@ -51,6 +57,6 @@ export function showOverlay(
   overlay.inspect(elements, componentName);
 
   if (hideAfterTimeout) {
-    timeoutID = setTimeout(hideOverlay, SHOW_DURATION);
+    timeoutID = setTimeout(() => hideOverlay(agent), SHOW_DURATION);
   }
 }
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
index 9355fab10969..38d951623c48 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js
@@ -54,7 +54,7 @@ export default function setupHighlighter(
   }
 
   function stopInspectingNative() {
-    hideOverlay();
+    hideOverlay(agent);
     removeListenersOnWindow(window);
     iframesListeningTo.forEach(function(frame) {
       try {
@@ -82,7 +82,7 @@ export default function setupHighlighter(
   }
 
   function clearNativeElementHighlight() {
-    hideOverlay();
+    hideOverlay(agent);
   }
 
   function highlightNativeElement({
@@ -129,7 +129,7 @@ export default function setupHighlighter(
         bridge.send('syncSelectionToNativeElementsPanel');
       }
     } else {
-      hideOverlay();
+      hideOverlay(agent);
     }
   }
 

From 3f70e68cea8d2ed0f53d35420105ae20e22ce428 Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Wed, 24 Aug 2022 11:26:08 -0700
Subject: [PATCH 1520/1603] Return closestInstance in
 `getInspectorDataForViewAtPoint` (#25118)

---
 packages/react-native-renderer/src/ReactNativeFiberInspector.js | 1 +
 packages/react-native-renderer/src/ReactNativeTypes.js          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
index a0f543a9c4e4..f0c6a8de2f56 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js
@@ -217,6 +217,7 @@ if (__DEV__) {
                 pointerY: locationY,
                 frame: {left: pageX, top: pageY, width, height},
                 touchedViewTag: nativeViewTag,
+                closestInstance,
               });
             },
           );
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 864952c52ff2..8a9968c0a080 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -150,6 +150,7 @@ export type InspectorData = $ReadOnly<{|
 export type TouchedViewDataAtPoint = $ReadOnly<{|
   pointerY: number,
   touchedViewTag?: number,
+  closestInstance?: Object,
   frame: $ReadOnly<{|
     top: number,
     left: number,

From 38c5d8a035c6e8070ab00d9cf7b9d2fae7752fdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 24 Aug 2022 19:05:39 -0400
Subject: [PATCH 1521/1603] Test the node-register hooks in unit tests (#25132)

---
 .../react-server-dom-webpack/node-register.js |  2 +-
 .../react-server-dom-webpack/package.json     |  1 +
 .../src/ReactFlightWebpackNodeRegister.js     |  2 +-
 .../src/__tests__/ReactFlightDOM-test.js      | 37 +++-------
 .../__tests__/ReactFlightDOMBrowser-test.js   | 44 ++++--------
 .../src/__tests__/utils/WebpackMock.js        | 67 +++++++++++++++++++
 scripts/rollup/bundles.js                     |  3 +-
 7 files changed, 94 insertions(+), 62 deletions(-)
 create mode 100644 packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js

diff --git a/packages/react-server-dom-webpack/node-register.js b/packages/react-server-dom-webpack/node-register.js
index 03754438bf33..e0490f3a1768 100644
--- a/packages/react-server-dom-webpack/node-register.js
+++ b/packages/react-server-dom-webpack/node-register.js
@@ -7,4 +7,4 @@
  * @flow
  */
 
-export * from './src/ReactFlightWebpackNodeRegister';
+module.exports = require('./src/ReactFlightWebpackNodeRegister');
diff --git a/packages/react-server-dom-webpack/package.json b/packages/react-server-dom-webpack/package.json
index 0a8c3389de71..45ba3669f90a 100644
--- a/packages/react-server-dom-webpack/package.json
+++ b/packages/react-server-dom-webpack/package.json
@@ -35,6 +35,7 @@
     "./writer.browser.server": "./writer.browser.server.js",
     "./node-loader": "./esm/react-server-dom-webpack-node-loader.js",
     "./node-register": "./node-register.js",
+    "./src/*": "./src/*",
     "./package.json": "./package.json"
   },
   "main": "index.js",
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index a5f889d3eb15..1b528fba4302 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -57,7 +57,7 @@ module.exports = function register() {
     },
   };
 
-  (require: any).extensions['.client.js'] = function(module, path) {
+  Module._extensions['.client.js'] = function(module, path) {
     const moduleId = url.pathToFileURL(path).href;
     const moduleReference: {[string]: any} = {
       $$typeof: MODULE_REFERENCE,
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index b68a9b28284b..4616246bb50b 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -17,14 +17,9 @@ global.TextDecoder = require('util').TextDecoder;
 // TODO: we can replace this with FlightServer.act().
 global.setImmediate = cb => cb();
 
-let webpackModuleIdx = 0;
-let webpackModules = {};
-let webpackMap = {};
-global.__webpack_require__ = function(id) {
-  return webpackModules[id];
-};
-
 let act;
+let clientExports;
+let webpackMap;
 let Stream;
 let React;
 let ReactDOMClient;
@@ -35,15 +30,17 @@ let Suspense;
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
     jest.resetModules();
-    webpackModules = {};
-    webpackMap = {};
     act = require('jest-react').act;
+    const WebpackMock = require('./utils/WebpackMock');
+    clientExports = WebpackMock.clientExports;
+    webpackMap = WebpackMock.webpackMap;
+
     Stream = require('stream');
     React = require('react');
+    Suspense = React.Suspense;
     ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
-    Suspense = React.Suspense;
   });
 
   function getTestStream() {
@@ -64,22 +61,6 @@ describe('ReactFlightDOM', () => {
     };
   }
 
-  function moduleReference(moduleExport) {
-    const idx = webpackModuleIdx++;
-    webpackModules[idx] = {
-      d: moduleExport,
-    };
-    webpackMap['path/' + idx] = {
-      default: {
-        id: '' + idx,
-        chunks: [],
-        name: 'd',
-      },
-    };
-    const MODULE_TAG = Symbol.for('react.module.reference');
-    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
-  }
-
   async function waitForSuspense(fn) {
     while (true) {
       try {
@@ -345,7 +326,7 @@ describe('ReactFlightDOM', () => {
       return <div>{games}</div>;
     }
 
-    const MyErrorBoundaryClient = moduleReference(MyErrorBoundary);
+    const MyErrorBoundaryClient = clientExports(MyErrorBoundary);
 
     function ProfileContent() {
       return (
@@ -470,7 +451,7 @@ describe('ReactFlightDOM', () => {
       return <input />;
     }
 
-    const InputClient = moduleReference(Input);
+    const InputClient = clientExports(Input);
 
     // Server
 
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index e2cc4989c8ee..43573af1df14 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -14,13 +14,9 @@ global.ReadableStream = require('web-streams-polyfill/ponyfill/es6').ReadableStr
 global.TextEncoder = require('util').TextEncoder;
 global.TextDecoder = require('util').TextDecoder;
 
-let webpackModuleIdx = 0;
-let webpackModules = {};
-let webpackMap = {};
-global.__webpack_require__ = function(id) {
-  return webpackModules[id];
-};
-
+let clientExports;
+let webpackMap;
+let webpackModules;
 let act;
 let React;
 let ReactDOMClient;
@@ -32,9 +28,11 @@ let Suspense;
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
     jest.resetModules();
-    webpackModules = {};
-    webpackMap = {};
     act = require('jest-react').act;
+    const WebpackMock = require('./utils/WebpackMock');
+    clientExports = WebpackMock.clientExports;
+    webpackMap = WebpackMock.webpackMap;
+    webpackModules = WebpackMock.webpackModules;
     React = require('react');
     ReactDOMClient = require('react-dom/client');
     ReactDOMServer = require('react-dom/server.browser');
@@ -43,22 +41,6 @@ describe('ReactFlightDOMBrowser', () => {
     Suspense = React.Suspense;
   });
 
-  function moduleReference(moduleExport) {
-    const idx = webpackModuleIdx++;
-    webpackModules[idx] = {
-      d: moduleExport,
-    };
-    webpackMap['path/' + idx] = {
-      default: {
-        id: '' + idx,
-        chunks: [],
-        name: 'd',
-      },
-    };
-    const MODULE_TAG = Symbol.for('react.module.reference');
-    return {$$typeof: MODULE_TAG, filepath: 'path/' + idx, name: 'default'};
-  }
-
   async function waitForSuspense(fn) {
     while (true) {
       try {
@@ -249,7 +231,7 @@ describe('ReactFlightDOMBrowser', () => {
       return <div>{games}</div>;
     }
 
-    const MyErrorBoundaryClient = moduleReference(MyErrorBoundary);
+    const MyErrorBoundaryClient = clientExports(MyErrorBoundary);
 
     function ProfileContent() {
       return (
@@ -478,19 +460,19 @@ describe('ReactFlightDOMBrowser', () => {
     }
     // The Client build may not have the same IDs as the Server bundles for the same
     // component.
-    const ClientComponentOnTheClient = moduleReference(ClientComponent);
-    const ClientComponentOnTheServer = moduleReference(ClientComponent);
+    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.filepath].default.id;
+    const clientId = webpackMap[ClientComponentOnTheClient.filepath]['*'].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.filepath].default;
+    const ssrMetaData = webpackMap[ClientComponentOnTheServer.filepath]['*'];
     const translationMap = {
       [clientId]: {
-        d: ssrMetaData,
+        '*': ssrMetaData,
       },
     };
 
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 000000000000..2cd21b0f2df1
--- /dev/null
+++ b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const url = require('url');
+const Module = require('module');
+
+let webpackModuleIdx = 0;
+const webpackModules = {};
+const webpackMap = {};
+global.__webpack_require__ = function(id) {
+  return webpackModules[id];
+};
+
+const previousLoader = Module._extensions['.client.js'];
+
+const register = require('react-server-dom-webpack/node-register');
+// Register node loader
+register();
+
+const nodeLoader = Module._extensions['.client.js'];
+
+if (previousLoader === nodeLoader) {
+  throw new Error(
+    'Expected the Node loader to register the .client.js extension',
+  );
+}
+
+Module._extensions['.client.js'] = previousLoader;
+
+exports.webpackMap = webpackMap;
+exports.webpackModules = webpackModules;
+
+exports.clientExports = function clientExports(moduleExports) {
+  const idx = '' + webpackModuleIdx++;
+  webpackModules[idx] = moduleExports;
+  const path = url.pathToFileURL(idx).href;
+  webpackMap[path] = {
+    '': {
+      id: idx,
+      chunks: [],
+      name: '',
+    },
+    '*': {
+      id: idx,
+      chunks: [],
+      name: '*',
+    },
+  };
+  for (const name in moduleExports) {
+    webpackMap[path] = {
+      [name]: {
+        id: idx,
+        chunks: [],
+        name: name,
+      },
+    };
+  }
+  const mod = {exports: {}};
+  nodeLoader(mod, idx);
+  return mod.exports;
+};
diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index 68407ef01183..f93225d9d15d 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -408,7 +408,8 @@ const bundles = [
   {
     bundleTypes: [NODE_ES2015],
     moduleType: RENDERER_UTILS,
-    entry: 'react-server-dom-webpack/node-register',
+    entry: 'react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js',
+    name: 'react-server-dom-webpack-node-register',
     global: 'ReactFlightWebpackNodeRegister',
     minifyWithProdErrorCodes: false,
     wrapWithModuleBoundaries: false,

From d0f396651bd654a9c2058d9c779aab843651ca9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 25 Aug 2022 07:47:38 -0400
Subject: [PATCH 1522/1603] Allow functions to be used as module references
 (#25137)

---
 .../react-server/src/ReactFlightServer.js     | 93 +++++++++++--------
 1 file changed, 54 insertions(+), 39 deletions(-)

diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 814f8f1a4f9d..1577687c0040 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -195,6 +195,10 @@ function attemptResolveElement(
     );
   }
   if (typeof type === 'function') {
+    if (isModuleReference(type)) {
+      // This is a reference to a client component.
+      return [REACT_ELEMENT_TYPE, type, key, props];
+    }
     // This is a server-side component.
     return type(props);
   } else if (typeof type === 'string') {
@@ -295,6 +299,52 @@ function serializeByRefID(id: number): string {
   return '@' + id.toString(16);
 }
 
+function serializeModuleReference(
+  request: Request,
+  parent: {+[key: string | number]: ReactModel} | $ReadOnlyArray<ReactModel>,
+  key: string,
+  moduleReference: ModuleReference<any>,
+): string {
+  const moduleKey: ModuleKey = getModuleKey(moduleReference);
+  const writtenModules = request.writtenModules;
+  const existingId = writtenModules.get(moduleKey);
+  if (existingId !== undefined) {
+    if (parent[0] === REACT_ELEMENT_TYPE && key === '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 serializeByRefID(existingId);
+    }
+    return serializeByValueID(existingId);
+  }
+  try {
+    const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
+      request.bundlerConfig,
+      moduleReference,
+    );
+    request.pendingChunks++;
+    const moduleId = request.nextChunkId++;
+    emitModuleChunk(request, moduleId, moduleMetaData);
+    writtenModules.set(moduleKey, moduleId);
+    if (parent[0] === REACT_ELEMENT_TYPE && key === '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 serializeByRefID(moduleId);
+    }
+    return serializeByValueID(moduleId);
+  } catch (x) {
+    request.pendingChunks++;
+    const errorId = request.nextChunkId++;
+    emitErrorChunk(request, errorId, x);
+    return serializeByValueID(errorId);
+  }
+}
+
 function escapeStringValue(value: string): string {
   if (value[0] === '$' || value[0] === '@') {
     // We need to escape $ or @ prefixed strings since we use those to encode
@@ -561,45 +611,7 @@ export function resolveModelToJSON(
 
   if (typeof value === 'object') {
     if (isModuleReference(value)) {
-      const moduleReference: ModuleReference<any> = (value: any);
-      const moduleKey: ModuleKey = getModuleKey(moduleReference);
-      const writtenModules = request.writtenModules;
-      const existingId = writtenModules.get(moduleKey);
-      if (existingId !== undefined) {
-        if (parent[0] === REACT_ELEMENT_TYPE && key === '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 serializeByRefID(existingId);
-        }
-        return serializeByValueID(existingId);
-      }
-      try {
-        const moduleMetaData: ModuleMetaData = resolveModuleMetaData(
-          request.bundlerConfig,
-          moduleReference,
-        );
-        request.pendingChunks++;
-        const moduleId = request.nextChunkId++;
-        emitModuleChunk(request, moduleId, moduleMetaData);
-        writtenModules.set(moduleKey, moduleId);
-        if (parent[0] === REACT_ELEMENT_TYPE && key === '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 serializeByRefID(moduleId);
-        }
-        return serializeByValueID(moduleId);
-      } catch (x) {
-        request.pendingChunks++;
-        const errorId = request.nextChunkId++;
-        emitErrorChunk(request, errorId, x);
-        return serializeByValueID(errorId);
-      }
+      return serializeModuleReference(request, parent, key, (value: any));
     } else if ((value: any).$$typeof === REACT_PROVIDER_TYPE) {
       const providerKey = ((value: any): ReactProviderType<any>)._context
         ._globalName;
@@ -673,6 +685,9 @@ export function resolveModelToJSON(
   }
 
   if (typeof value === 'function') {
+    if (isModuleReference(value)) {
+      return serializeModuleReference(request, parent, key, (value: any));
+    }
     if (/^on[A-Z]/.test(key)) {
       throw new Error(
         'Event handlers cannot be passed to client component props. ' +

From c8b778b7f44faba63d1d2eeb9f7d95da282e0a34 Mon Sep 17 00:00:00 2001
From: kwzr <kwzr.poyo@gmail.com>
Date: Fri, 26 Aug 2022 00:56:24 +0900
Subject: [PATCH 1523/1603] Fix typo: supportsMicrotask -> supportsMicrotasks
 (#25142)

---
 packages/react-reconciler/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-reconciler/README.md b/packages/react-reconciler/README.md
index c2f7991acdb2..102fbf42e141 100644
--- a/packages/react-reconciler/README.md
+++ b/packages/react-reconciler/README.md
@@ -199,7 +199,7 @@ You can proxy this to `clearTimeout` or its equivalent in your environment.
 
 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`.
 
-#### `supportsMicrotask`
+#### `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)`

From b79894259a2f54bcc457ea91f35411878c11e32c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 25 Aug 2022 12:27:30 -0400
Subject: [PATCH 1524/1603] [Flight] Add support for Webpack Async Modules
 (#25138)

This lets you await the result of require(...) which will then
mark the result as async which will then let the client unwrap the Promise
before handing it over in the same way.
---
 .../ReactFlightClientWebpackBundlerConfig.js  | 68 +++++++++++++---
 .../ReactFlightServerWebpackBundlerConfig.js  | 22 +++++-
 .../src/ReactFlightWebpackNodeRegister.js     | 35 +++++++++
 .../src/__tests__/ReactFlightDOM-test.js      | 77 +++++++++++++++++++
 .../src/__tests__/utils/WebpackMock.js        | 13 ++++
 5 files changed, 202 insertions(+), 13 deletions(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index d36642532f56..288f63bfdc92 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Thenable} from 'shared/ReactTypes';
+
 export type WebpackSSRMap = {
   [clientId: string]: {
     [clientExportName: string]: ModuleMetaData,
@@ -19,6 +21,7 @@ export opaque type ModuleMetaData = {
   id: string,
   chunks: Array<string>,
   name: string,
+  async: boolean,
 };
 
 // eslint-disable-next-line no-unused-vars
@@ -29,7 +32,17 @@ export function resolveModuleReference<T>(
   moduleData: ModuleMetaData,
 ): ModuleReference<T> {
   if (bundlerConfig) {
-    return bundlerConfig[moduleData.id][moduleData.name];
+    const resolvedModuleData = bundlerConfig[moduleData.id][moduleData.name];
+    if (moduleData.async) {
+      return {
+        id: resolvedModuleData.id,
+        chunks: resolvedModuleData.chunks,
+        name: resolvedModuleData.name,
+        async: true,
+      };
+    } else {
+      return resolvedModuleData;
+    }
   }
   return moduleData;
 }
@@ -39,39 +52,72 @@ export function resolveModuleReference<T>(
 // 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> | Error> = new Map();
+const asyncModuleCache: Map<string, Thenable<any>> = new Map();
 
 // Start preloading the modules since we might need them soon.
 // This function doesn't suspend.
 export function preloadModule<T>(moduleData: ModuleReference<T>): void {
   const chunks = moduleData.chunks;
+  const promises = [];
   for (let i = 0; i < chunks.length; i++) {
     const chunkId = chunks[i];
     const entry = chunkCache.get(chunkId);
     if (entry === undefined) {
       const thenable = __webpack_chunk_load__(chunkId);
+      promises.push(thenable);
       const resolve = chunkCache.set.bind(chunkCache, chunkId, null);
       const reject = chunkCache.set.bind(chunkCache, chunkId);
       thenable.then(resolve, reject);
       chunkCache.set(chunkId, thenable);
     }
   }
+  if (moduleData.async) {
+    const modulePromise: any = Promise.all(promises).then(() => {
+      return __webpack_require__(moduleData.id);
+    });
+    modulePromise.then(
+      value => {
+        modulePromise.status = 'fulfilled';
+        modulePromise.value = value;
+      },
+      reason => {
+        modulePromise.status = 'rejected';
+        modulePromise.reason = reason;
+      },
+    );
+    asyncModuleCache.set(moduleData.id, modulePromise);
+  }
 }
 
 // Actually require the module or suspend if it's not yet ready.
 // Increase priority if necessary.
 export function requireModule<T>(moduleData: ModuleReference<T>): T {
-  const chunks = moduleData.chunks;
-  for (let i = 0; i < chunks.length; i++) {
-    const chunkId = chunks[i];
-    const entry = chunkCache.get(chunkId);
-    if (entry !== null) {
-      // We assume that preloadModule has been called before.
-      // So we don't expect to see entry being undefined here, that's an error.
-      // Let's throw either an error or the Promise.
-      throw entry;
+  let moduleExports;
+  if (moduleData.async) {
+    // We assume that preloadModule has been called before, which
+    // should have added something to the module cache.
+    const promise: any = asyncModuleCache.get(moduleData.id);
+    if (promise.status === 'fulfilled') {
+      moduleExports = promise.value;
+    } else if (promise.status === 'rejected') {
+      throw promise.reason;
+    } else {
+      throw promise;
+    }
+  } else {
+    const chunks = moduleData.chunks;
+    for (let i = 0; i < chunks.length; i++) {
+      const chunkId = chunks[i];
+      const entry = chunkCache.get(chunkId);
+      if (entry !== null) {
+        // We assume that preloadModule has been called before.
+        // So we don't expect to see entry being undefined here, that's an error.
+        // Let's throw either an error or the Promise.
+        throw entry;
+      }
     }
+    moduleExports = __webpack_require__(moduleData.id);
   }
-  const moduleExports = __webpack_require__(moduleData.id);
   if (moduleData.name === '*') {
     // This is a placeholder value that represents that the caller imported this
     // as a CommonJS module as is.
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index c8469eeba806..caeed14a7b7b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -20,12 +20,14 @@ export type ModuleReference<T> = {
   $$typeof: Symbol,
   filepath: string,
   name: string,
+  async: boolean,
 };
 
 export type ModuleMetaData = {
   id: string,
   chunks: Array<string>,
   name: string,
+  async: boolean,
 };
 
 export type ModuleKey = string;
@@ -33,7 +35,12 @@ export type ModuleKey = string;
 const MODULE_TAG = Symbol.for('react.module.reference');
 
 export function getModuleKey(reference: ModuleReference<any>): ModuleKey {
-  return reference.filepath + '#' + reference.name;
+  return (
+    reference.filepath +
+    '#' +
+    reference.name +
+    (reference.async ? '#async' : '')
+  );
 }
 
 export function isModuleReference(reference: Object): boolean {
@@ -44,5 +51,16 @@ export function resolveModuleMetaData<T>(
   config: BundlerConfig,
   moduleReference: ModuleReference<T>,
 ): ModuleMetaData {
-  return config[moduleReference.filepath][moduleReference.name];
+  const resolvedModuleData =
+    config[moduleReference.filepath][moduleReference.name];
+  if (moduleReference.async) {
+    return {
+      id: resolvedModuleData.id,
+      chunks: resolvedModuleData.chunks,
+      name: resolvedModuleData.name,
+      async: true,
+    };
+  } else {
+    return resolvedModuleData;
+  }
 }
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index 1b528fba4302..0c1ec39aff90 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -14,6 +14,8 @@ const Module = require('module');
 
 module.exports = function register() {
   const MODULE_REFERENCE = Symbol.for('react.module.reference');
+  const PROMISE_PROTOTYPE = Promise.prototype;
+
   const proxyHandlers = {
     get: function(target, name, receiver) {
       switch (name) {
@@ -26,6 +28,8 @@ module.exports = function register() {
           return target.filepath;
         case 'name':
           return target.name;
+        case 'async':
+          return target.async;
         // We need to special case this because createElement reads it if we pass this
         // reference.
         case 'defaultProps':
@@ -39,8 +43,33 @@ module.exports = function register() {
             // This a placeholder value that tells the client to conditionally use the
             // whole object or just the default export.
             name: '',
+            async: target.async,
           };
           return true;
+        case '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 then = function then(resolve, reject) {
+              const moduleReference: {[string]: any} = {
+                $$typeof: MODULE_REFERENCE,
+                filepath: target.filepath,
+                name: '*', // Represents the whole object instead of a particular import.
+                async: true,
+              };
+              return Promise.resolve(
+                resolve(new Proxy(moduleReference, proxyHandlers)),
+              );
+            };
+            // 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.
+            then.$$typeof = MODULE_REFERENCE;
+            then.filepath = target.filepath;
+            // then.name is conveniently already "then" which is the export name we need.
+            // This will break if it's minified though.
+            return then;
+          }
       }
       let cachedReference = target[name];
       if (!cachedReference) {
@@ -48,10 +77,15 @@ module.exports = function register() {
           $$typeof: MODULE_REFERENCE,
           filepath: target.filepath,
           name: name,
+          async: target.async,
         };
       }
       return cachedReference;
     },
+    getPrototypeOf(target) {
+      // Pretend to be a Promise in case anyone asks.
+      return PROMISE_PROTOTYPE;
+    },
     set: function() {
       throw new Error('Cannot assign to a client module from a server module.');
     },
@@ -63,6 +97,7 @@ module.exports = function register() {
       $$typeof: MODULE_REFERENCE,
       filepath: moduleId,
       name: '*', // Represents the whole object instead of a particular import.
+      async: false,
     };
     module.exports = new Proxy(moduleReference, 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
index 4616246bb50b..4b6995a9edb9 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -237,6 +237,83 @@ describe('ReactFlightDOM', () => {
     expect(container.innerHTML).toBe('<p>@div</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>{response.readRoot()}</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} = ReactServerDOMWriter.renderToPipeableStream(
+      <AsyncModuleRef text={AsyncModuleRef2.exportName} />,
+      webpackMap,
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>Async: Module</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>{response.readRoot()}</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} = ReactServerDOMWriter.renderToPipeableStream(
+      <ThenRef />,
+      webpackMap,
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<App response={response} />);
+    });
+    expect(container.innerHTML).toBe('<p>and then</p>');
+  });
+
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
 
diff --git a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
index 2cd21b0f2df1..78f78505b6b2 100644
--- a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
+++ b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
@@ -52,6 +52,19 @@ exports.clientExports = function clientExports(moduleExports) {
       name: '*',
     },
   };
+  if (typeof moduleExports.then === 'function') {
+    moduleExports.then(asyncModuleExports => {
+      for (const name in asyncModuleExports) {
+        webpackMap[path] = {
+          [name]: {
+            id: idx,
+            chunks: [],
+            name: name,
+          },
+        };
+      }
+    });
+  }
   for (const name in moduleExports) {
     webpackMap[path] = {
       [name]: {

From 11ed7010c6d34c40342e8b829a48fec138215ae0 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Thu, 25 Aug 2022 19:03:03 +0100
Subject: [PATCH 1525/1603] [Transition Tracing] onMarkerIncomplete - Tracing
 Marker/Suspense Boundary Deletions (#24885)

This PR adds the `onMarkerIncomplete` callback for tracing marker name changes. Specifically, this PR:
* Adds the `onMarkerIncomplete` callback
* When a tracing marker is deleted, call `onMarkerIncomplete` with the `name` of the tracing marker for the tracing marker.
* When a tracing marker/suspense boundary is deleted, call `onMarkerIncomplete` for every parent tracing marker with the `name` of the tracing marker that caused the transition to be incomplete.
* Don't call `onTransitionComplete` or `onMarkerComplete` when `onMarkerIncomplete` is called for all tracing markers with the same transitions, but continue to call `onTransitionProgress`
---
 .../react-reconciler/src/ReactFiber.new.js    |   2 +
 .../react-reconciler/src/ReactFiber.old.js    |   2 +
 .../src/ReactFiberBeginWork.new.js            |  10 +-
 .../src/ReactFiberBeginWork.old.js            |  10 +-
 .../src/ReactFiberCommitWork.new.js           | 283 +++++-
 .../src/ReactFiberCommitWork.old.js           | 283 +++++-
 .../src/ReactFiberCompleteWork.new.js         |  10 -
 .../src/ReactFiberCompleteWork.old.js         |  10 -
 .../ReactFiberTracingMarkerComponent.new.js   |  73 +-
 .../ReactFiberTracingMarkerComponent.old.js   |  73 +-
 .../src/ReactFiberWorkLoop.new.js             |  36 +-
 .../src/ReactFiberWorkLoop.old.js             |  36 +-
 .../src/ReactInternalTypes.js                 |   8 +-
 .../__tests__/ReactTransitionTracing-test.js  | 841 +++++++++++++++++-
 14 files changed, 1571 insertions(+), 106 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index fc2d03109fd2..d6a6c8f7adc1 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -774,6 +774,8 @@ export function createFiberFromTracingMarker(
     tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
+    aborts: null,
+    name: pendingProps.name,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index 572c1b770ada..d8f1ef424bd1 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -774,6 +774,8 @@ export function createFiberFromTracingMarker(
     tag: TransitionTracingMarker,
     transitions: null,
     pendingBoundaries: null,
+    aborts: null,
+    name: pendingProps.name,
   };
   fiber.stateNode = tracingMarkerInstance;
   return fiber;
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 61edb46d32f2..fa417e08114c 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -89,6 +89,7 @@ import {
   StaticMask,
   ShouldCapture,
   ForceClientRender,
+  Passive,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -979,10 +980,17 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
-        pendingBoundaries: new Map(),
+        pendingBoundaries: null,
         name: workInProgress.pendingProps.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__) {
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 65403e6c8ad3..449f306e7ef8 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -89,6 +89,7 @@ import {
   StaticMask,
   ShouldCapture,
   ForceClientRender,
+  Passive,
 } from './ReactFiberFlags';
 import ReactSharedInternals from 'shared/ReactSharedInternals';
 import {
@@ -979,10 +980,17 @@ function updateTracingMarkerComponent(
       const markerInstance: TracingMarkerInstance = {
         tag: TransitionTracingMarker,
         transitions: new Set(currentTransitions),
-        pendingBoundaries: new Map(),
+        pendingBoundaries: null,
         name: workInProgress.pendingProps.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__) {
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 5d944a4d88d4..d2cd313a05ac 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -30,7 +30,11 @@ import type {
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
 import type {RootState} from './ReactFiberRoot.new';
-import type {Transition} from './ReactFiberTracingMarkerComponent.new';
+import type {
+  Transition,
+  TracingMarkerInstance,
+  TransitionAbort,
+} from './ReactFiberTracingMarkerComponent.new';
 
 import {
   enableCreateEventHandleAPI,
@@ -145,6 +149,7 @@ import {
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerProgressCallbackToPendingTransition,
+  addMarkerIncompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
   getExecutionContext,
@@ -1130,6 +1135,141 @@ function commitLayoutEffectOnFiber(
   }
 }
 
+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)
+          ) {
+            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 = 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
@@ -1175,6 +1315,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
@@ -1185,10 +1326,10 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  markerName,
                   transitions,
                   pendingBoundaries,
                 );
@@ -1212,6 +1353,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
@@ -1220,13 +1362,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  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(
@@ -1737,6 +1893,7 @@ function commitDeletionEffects(
           'a bug in React. Please file an issue.',
       );
     }
+
     commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber);
     hostParent = null;
     hostParentIsContainer = false;
@@ -1979,6 +2136,7 @@ function commitDeletionEffectsOnFiber(
         const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
         offscreenSubtreeWasHidden =
           prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
+
         recursivelyTraverseDeletionEffects(
           finishedRoot,
           nearestMountedAncestor,
@@ -2957,6 +3115,12 @@ function commitOffscreenPassiveMountEffects(
     }
 
     commitTransitionProgress(finishedWork);
+
+    // TODO: Refactor this into an if/else branch
+    if (!isHidden) {
+      instance.transitions = null;
+      instance.pendingMarkers = null;
+    }
   }
 }
 
@@ -2987,20 +3151,18 @@ function commitCachePassiveMountEffect(
 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 ||
-      instance.pendingBoundaries.size === 0)
-  ) {
-    instance.transitions.forEach(transition => {
-      addMarkerCompleteCallbackToPendingTransition(
-        finishedWork.memoizedProps.name,
-        instance.transitions,
-      );
-    });
+  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;
   }
 }
 
@@ -3102,7 +3264,7 @@ function commitPassiveMountOnFiber(
         if (enableTransitionTracing) {
           // Get the transitions that were initiatized during the render
           // and add a start transition callback for each of them
-          const root = finishedWork.stateNode;
+          const root: FiberRoot = finishedWork.stateNode;
           const incompleteTransitions = root.incompleteTransitions;
           // Initial render
           if (committedTransitions !== null) {
@@ -3116,7 +3278,9 @@ function commitPassiveMountOnFiber(
           incompleteTransitions.forEach((markerInstance, transition) => {
             const pendingBoundaries = markerInstance.pendingBoundaries;
             if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
+              if (markerInstance.aborts === null) {
+                addTransitionCompleteCallbackToPendingTransition(transition);
+              }
               incompleteTransitions.delete(transition);
             }
           });
@@ -3489,21 +3653,6 @@ function commitAtomicPassiveEffects(
       }
       break;
     }
-    case TracingMarkerComponent: {
-      if (enableTransitionTracing) {
-        recursivelyTraverseAtomicPassiveEffects(
-          finishedRoot,
-          finishedWork,
-          committedLanes,
-          committedTransitions,
-        );
-        if (flags & Passive) {
-          commitTracingMarkerPassiveMountEffect(finishedWork);
-        }
-        break;
-      }
-      // Intentional fallthrough to next branch
-    }
     // eslint-disable-next-line-no-fallthrough
     default: {
       recursivelyTraverseAtomicPassiveEffects(
@@ -3827,6 +3976,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       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 = {
+            reason: 'suspense',
+            name: current.memoizedProps.unstable_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: {
       if (enableCache) {
         const cache = current.memoizedState.cache;
@@ -3834,6 +4020,37 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       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 = {
+            reason: 'marker',
+            name: current.memoizedProps.name,
+          };
+          abortParentMarkerTransitionsForDeletedFiber(
+            current,
+            abortReason,
+            transitions,
+            null,
+            true,
+          );
+
+          if (nearestMountedAncestor !== null) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              nearestMountedAncestor,
+              abortReason,
+              transitions,
+              null,
+              false,
+            );
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 8afa97a5ab7b..70a68617763c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -30,7 +30,11 @@ import type {
 import type {HookFlags} from './ReactHookEffectTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
 import type {RootState} from './ReactFiberRoot.old';
-import type {Transition} from './ReactFiberTracingMarkerComponent.old';
+import type {
+  Transition,
+  TracingMarkerInstance,
+  TransitionAbort,
+} from './ReactFiberTracingMarkerComponent.old';
 
 import {
   enableCreateEventHandleAPI,
@@ -145,6 +149,7 @@ import {
   addTransitionProgressCallbackToPendingTransition,
   addTransitionCompleteCallbackToPendingTransition,
   addMarkerProgressCallbackToPendingTransition,
+  addMarkerIncompleteCallbackToPendingTransition,
   addMarkerCompleteCallbackToPendingTransition,
   setIsRunningInsertionEffect,
   getExecutionContext,
@@ -1130,6 +1135,141 @@ function commitLayoutEffectOnFiber(
   }
 }
 
+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)
+          ) {
+            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 = 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
@@ -1175,6 +1315,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             !pendingBoundaries.has(offscreenInstance)
@@ -1185,10 +1326,10 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  markerName,
                   transitions,
                   pendingBoundaries,
                 );
@@ -1212,6 +1353,7 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
         pendingMarkers.forEach(markerInstance => {
           const pendingBoundaries = markerInstance.pendingBoundaries;
           const transitions = markerInstance.transitions;
+          const markerName = markerInstance.name;
           if (
             pendingBoundaries !== null &&
             pendingBoundaries.has(offscreenInstance)
@@ -1220,13 +1362,27 @@ function commitTransitionProgress(offscreenFiber: Fiber) {
             if (transitions !== null) {
               if (
                 markerInstance.tag === TransitionTracingMarker &&
-                markerInstance.name !== undefined
+                markerName !== null
               ) {
                 addMarkerProgressCallbackToPendingTransition(
-                  markerInstance.name,
+                  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(
@@ -1737,6 +1893,7 @@ function commitDeletionEffects(
           'a bug in React. Please file an issue.',
       );
     }
+
     commitDeletionEffectsOnFiber(root, returnFiber, deletedFiber);
     hostParent = null;
     hostParentIsContainer = false;
@@ -1979,6 +2136,7 @@ function commitDeletionEffectsOnFiber(
         const prevOffscreenSubtreeWasHidden = offscreenSubtreeWasHidden;
         offscreenSubtreeWasHidden =
           prevOffscreenSubtreeWasHidden || deletedFiber.memoizedState !== null;
+
         recursivelyTraverseDeletionEffects(
           finishedRoot,
           nearestMountedAncestor,
@@ -2957,6 +3115,12 @@ function commitOffscreenPassiveMountEffects(
     }
 
     commitTransitionProgress(finishedWork);
+
+    // TODO: Refactor this into an if/else branch
+    if (!isHidden) {
+      instance.transitions = null;
+      instance.pendingMarkers = null;
+    }
   }
 }
 
@@ -2987,20 +3151,18 @@ function commitCachePassiveMountEffect(
 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 ||
-      instance.pendingBoundaries.size === 0)
-  ) {
-    instance.transitions.forEach(transition => {
-      addMarkerCompleteCallbackToPendingTransition(
-        finishedWork.memoizedProps.name,
-        instance.transitions,
-      );
-    });
+  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;
   }
 }
 
@@ -3102,7 +3264,7 @@ function commitPassiveMountOnFiber(
         if (enableTransitionTracing) {
           // Get the transitions that were initiatized during the render
           // and add a start transition callback for each of them
-          const root = finishedWork.stateNode;
+          const root: FiberRoot = finishedWork.stateNode;
           const incompleteTransitions = root.incompleteTransitions;
           // Initial render
           if (committedTransitions !== null) {
@@ -3116,7 +3278,9 @@ function commitPassiveMountOnFiber(
           incompleteTransitions.forEach((markerInstance, transition) => {
             const pendingBoundaries = markerInstance.pendingBoundaries;
             if (pendingBoundaries === null || pendingBoundaries.size === 0) {
-              addTransitionCompleteCallbackToPendingTransition(transition);
+              if (markerInstance.aborts === null) {
+                addTransitionCompleteCallbackToPendingTransition(transition);
+              }
               incompleteTransitions.delete(transition);
             }
           });
@@ -3489,21 +3653,6 @@ function commitAtomicPassiveEffects(
       }
       break;
     }
-    case TracingMarkerComponent: {
-      if (enableTransitionTracing) {
-        recursivelyTraverseAtomicPassiveEffects(
-          finishedRoot,
-          finishedWork,
-          committedLanes,
-          committedTransitions,
-        );
-        if (flags & Passive) {
-          commitTracingMarkerPassiveMountEffect(finishedWork);
-        }
-        break;
-      }
-      // Intentional fallthrough to next branch
-    }
     // eslint-disable-next-line-no-fallthrough
     default: {
       recursivelyTraverseAtomicPassiveEffects(
@@ -3827,6 +3976,43 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       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 = {
+            reason: 'suspense',
+            name: current.memoizedProps.unstable_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: {
       if (enableCache) {
         const cache = current.memoizedState.cache;
@@ -3834,6 +4020,37 @@ function commitPassiveUnmountInsideDeletedTreeOnFiber(
       }
       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 = {
+            reason: 'marker',
+            name: current.memoizedProps.name,
+          };
+          abortParentMarkerTransitionsForDeletedFiber(
+            current,
+            abortReason,
+            transitions,
+            null,
+            true,
+          );
+
+          if (nearestMountedAncestor !== null) {
+            abortParentMarkerTransitionsForDeletedFiber(
+              nearestMountedAncestor,
+              abortReason,
+              transitions,
+              null,
+              false,
+            );
+          }
+        }
+      }
+      break;
+    }
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 7a8843941eee..135e9290f549 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -1589,16 +1589,6 @@ function completeWork(
           popMarkerInstance(workInProgress);
         }
         bubbleProperties(workInProgress);
-
-        if (
-          current === null ||
-          (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;
     }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 1ff1a5173ec1..3fd1bffbc3a9 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -1589,16 +1589,6 @@ function completeWork(
           popMarkerInstance(workInProgress);
         }
         bubbleProperties(workInProgress);
-
-        if (
-          current === null ||
-          (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;
     }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 31cc4c06841a..1be1e7f93099 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
+import type {
+  TransitionTracingCallbacks,
+  Fiber,
+  FiberRoot,
+} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 import type {StackCursor} from './ReactFiberStack.new';
 
@@ -21,7 +25,14 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
-  markerProgress: Map<string, TracingMarkerInstance> | 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,
 };
 
@@ -36,11 +47,18 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
+// TODO: Is there a way to not include the tag or name here?
 export type TracingMarkerInstance = {|
   tag?: TracingMarkerTag,
-  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
-  name?: string,
+  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;
@@ -69,6 +87,7 @@ export function processTransitionCallbacks(
       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())
@@ -101,6 +120,48 @@ export function processTransitionCallbacks(
         });
       }
 
+      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) {
+              onMarkerIncomplete(
+                transition.name,
+                markerName,
+                transition.startTime,
+                filteredAborts,
+              );
+            }
+          });
+        });
+      }
+
       const transitionProgress = pendingTransitions.transitionProgress;
       const onTransitionProgress = callbacks.onTransitionProgress;
       if (onTransitionProgress != null && transitionProgress !== null) {
@@ -145,7 +206,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
     // 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 = workInProgress.stateNode;
+    const root: FiberRoot = workInProgress.stateNode;
 
     if (transitions !== null) {
       transitions.forEach(transition => {
@@ -154,6 +215,8 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
             tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
+            aborts: null,
+            name: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 0e3c352d7728..e88930867851 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {TransitionTracingCallbacks, Fiber} from './ReactInternalTypes';
+import type {
+  TransitionTracingCallbacks,
+  Fiber,
+  FiberRoot,
+} from './ReactInternalTypes';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 import type {StackCursor} from './ReactFiberStack.old';
 
@@ -21,7 +25,14 @@ export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
-  markerProgress: Map<string, TracingMarkerInstance> | 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,
 };
 
@@ -36,11 +47,18 @@ export type BatchConfigTransition = {
   _updatedFibers?: Set<Fiber>,
 };
 
+// TODO: Is there a way to not include the tag or name here?
 export type TracingMarkerInstance = {|
   tag?: TracingMarkerTag,
-  pendingBoundaries: PendingBoundaries | null,
   transitions: Set<Transition> | null,
-  name?: string,
+  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;
@@ -69,6 +87,7 @@ export function processTransitionCallbacks(
       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())
@@ -101,6 +120,48 @@ export function processTransitionCallbacks(
         });
       }
 
+      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) {
+              onMarkerIncomplete(
+                transition.name,
+                markerName,
+                transition.startTime,
+                filteredAborts,
+              );
+            }
+          });
+        });
+      }
+
       const transitionProgress = pendingTransitions.transitionProgress;
       const onTransitionProgress = callbacks.onTransitionProgress;
       if (onTransitionProgress != null && transitionProgress !== null) {
@@ -145,7 +206,7 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
     // 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 = workInProgress.stateNode;
+    const root: FiberRoot = workInProgress.stateNode;
 
     if (transitions !== null) {
       transitions.forEach(transition => {
@@ -154,6 +215,8 @@ export function pushRootMarkerInstance(workInProgress: Fiber): void {
             tag: TransitionRoot,
             transitions: new Set([transition]),
             pendingBoundaries: null,
+            aborts: null,
+            name: null,
           };
           root.incompleteTransitions.set(transition, markerInstance);
         }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a1416e6c4cf0..13a673b19aa2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -19,6 +19,7 @@ import type {
   PendingTransitionCallbacks,
   PendingBoundaries,
   Transition,
+  TransitionAbort,
 } from './ReactFiberTracingMarkerComponent.new';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
@@ -361,6 +362,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -376,7 +378,7 @@ export function addTransitionStartCallbackToPendingTransition(
 export function addMarkerProgressCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
-  pendingBoundaries: PendingBoundaries | null,
+  pendingBoundaries: PendingBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -385,6 +387,7 @@ export function addMarkerProgressCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: new Map(),
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -400,6 +403,34 @@ export function addMarkerProgressCallbackToPendingTransition(
   }
 }
 
+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>,
@@ -411,6 +442,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: new Map(),
       };
     }
@@ -437,6 +469,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionProgress: new Map(),
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -462,6 +495,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: [],
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 8343bad2ab48..1d8d868a37a2 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -19,6 +19,7 @@ import type {
   PendingTransitionCallbacks,
   PendingBoundaries,
   Transition,
+  TransitionAbort,
 } from './ReactFiberTracingMarkerComponent.old';
 import type {OffscreenInstance} from './ReactFiberOffscreenComponent';
 
@@ -361,6 +362,7 @@ export function addTransitionStartCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -376,7 +378,7 @@ export function addTransitionStartCallbackToPendingTransition(
 export function addMarkerProgressCallbackToPendingTransition(
   markerName: string,
   transitions: Set<Transition>,
-  pendingBoundaries: PendingBoundaries | null,
+  pendingBoundaries: PendingBoundaries,
 ) {
   if (enableTransitionTracing) {
     if (currentPendingTransitionCallbacks === null) {
@@ -385,6 +387,7 @@ export function addMarkerProgressCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: new Map(),
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -400,6 +403,34 @@ export function addMarkerProgressCallbackToPendingTransition(
   }
 }
 
+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>,
@@ -411,6 +442,7 @@ export function addMarkerCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: new Map(),
       };
     }
@@ -437,6 +469,7 @@ export function addTransitionProgressCallbackToPendingTransition(
         transitionProgress: new Map(),
         transitionComplete: null,
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
@@ -462,6 +495,7 @@ export function addTransitionCompleteCallbackToPendingTransition(
         transitionProgress: null,
         transitionComplete: [],
         markerProgress: null,
+        markerIncomplete: null,
         markerComplete: null,
       };
     }
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index e9a4b61039f6..b03a71570136 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -291,8 +291,7 @@ export type TransitionTracingCallbacks = {
     startTime: number,
     deletions: Array<{
       type: string,
-      name?: string,
-      newName?: string,
+      name?: string | null,
       endTime: number,
     }>,
   ) => void,
@@ -314,8 +313,7 @@ export type TransitionTracingCallbacks = {
     startTime: number,
     deletions: Array<{
       type: string,
-      name?: string,
-      newName?: string,
+      name?: string | null,
       endTime: number,
     }>,
   ) => void,
@@ -337,7 +335,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // 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<Array<Transition>, TracingMarkerInstance>,
+  incompleteTransitions: Map<Transition, TracingMarkerInstance>,
 |};
 
 // Exported FiberRoot type includes all properties,
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index ae4812afa8ec..a6637b55977c 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -23,6 +23,17 @@ 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();
 
@@ -1284,18 +1295,846 @@ describe('ReactInteractionTracing', () => {
   });
 
   // @gate enableTransitionTracing
-  it('warns when marker name changes', async () => {
+  it.skip('warn and calls marker incomplete if name changes before transition completes', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} markerName="marker one" />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        '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);
+      expect(() =>
+        expect(Scheduler).toFlushAndYield([
+          'Suspend [Page Two]',
+          'Loading...',
+          'onMarkerIncomplete(transition one, marker one, 1000, [{endTime: 3000, name: marker one, newName: marker two, type: marker}])',
+        ]),
+      ).toErrorDev('');
+
+      resolveText('Page Two');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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
+                    unstable_name="suspense page"
+                    fallback={<Text text="Loading..." />}>
+                    <AsyncText text="Page Two" />
+                  </Suspense>
+                </React.unstable_TracingMarker>
+              ) : (
+                <Suspense
+                  unstable_name="suspense page"
+                  fallback={<Text text="Loading..." />}>
+                  <AsyncText text="Page Two" />
+                </Suspense>
+              )}
+              <React.unstable_TracingMarker name="sibling">
+                <Suspense
+                  unstable_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);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} showMarker={true} />),
+        {
+          name: 'transition one',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading...',
+        'Suspend [Sibling Text]',
+        'Sibling Loading...',
+      ]);
+    });
+
+    resolveText('Page Two');
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+    expect(Scheduler).toFlushAndYield(['Page Two']);
+
+    resolveText('Sibling Text');
+    ReactNoop.expire(1000);
+    await advanceTimers(1000);
+    expect(Scheduler).toFlushAndYield([
+      '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.unstable_yieldValue(
           `onTransitionStart(${name}, ${startTime})`,
         );
       },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
       onTransitionComplete: (name, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
         );
       },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `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
+                      unstable_name="suspense one"
+                      fallback={<Text text="Loading One..." />}>
+                      <AsyncText text="Page One" />
+                    </Suspense>
+                  </React.unstable_TracingMarker>
+                </div>
+              ) : null}
+              <React.unstable_TracingMarker name="two">
+                <Suspense
+                  unstable_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);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} deleteOne={false} />),
+        {
+          name: 'transition',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page One]',
+        'Loading One...',
+        'Suspend [Page Two]',
+        'Loading Two...',
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading Two...',
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({navigate, deleteOne}) {
+      return (
+        <div>
+          {navigate ? (
+            <React.unstable_TracingMarker name="parent">
+              <React.unstable_TracingMarker name="one">
+                {!deleteOne ? (
+                  <Suspense
+                    unstable_name="suspense one"
+                    fallback={<Text text="Loading One..." />}>
+                    <AsyncText text="Page One" />
+                    <React.unstable_TracingMarker name="page one" />
+                    <Suspense
+                      unstable_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
+                  unstable_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);
+      expect(Scheduler).toFlushAndYield(['Page One']);
+
+      startTransition(
+        () => root.render(<App navigate={true} deleteOne={false} />),
+        {
+          name: 'transition',
+        },
+      );
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page One]',
+        'Suspend [Child]',
+        'Loading Child...',
+        'Loading One...',
+        'Suspend [Page Two]',
+        'Loading Two...',
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        'Page One',
+        'Suspend [Child]',
+        'Loading Child...',
+        '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);
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Page Two]',
+        'Loading Two...',
+        // "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);
+      expect(Scheduler).toFlushAndYield([
+        '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({show}) {
+      return (
+        <React.unstable_TracingMarker name="parent">
+          {show ? (
+            <Suspense unstable_name="appended child">
+              <AsyncText text="Appended child" />
+            </Suspense>
+          ) : null}
+          <Suspense unstable_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);
+
+      expect(Scheduler).toFlushAndYield([
+        'Suspend [Child]',
+        '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
+      expect(Scheduler).toFlushAndYield([
+        '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);
+      expect(Scheduler).toFlushAndYield(['Suspend [Child]']);
+
+      await resolveText('Child');
+      ReactNoop.expire(1000);
+      await advanceTimers(1000);
+
+      expect(Scheduler).toFlushAndYield([
+        '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerProgress: (
+        transitioName,
+        markerName,
+        startTime,
+        currentTime,
+        pending,
+      ) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onMarkerProgress(${transitioName}, ${markerName}, ${startTime}, ${currentTime}, [${suspenseNames}])`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
+      onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App({show, showSuspense}) {
+      return (
+        <React.unstable_TracingMarker name="parent">
+          {show ? (
+            <React.unstable_TracingMarker name="appended child">
+              {showSuspense ? (
+                <Suspense unstable_name="appended child">
+                  <AsyncText text="Appended child" />
+                </Suspense>
+              ) : null}
+            </React.unstable_TracingMarker>
+          ) : null}
+          <Suspense unstable_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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Child]',
+      '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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Appended child]',
+      'Suspend [Child]',
+      '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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Child]',
+      '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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+      onMarkerIncomplete: (
+        transitionName,
+        markerName,
+        startTime,
+        deletions,
+      ) => {
+        Scheduler.unstable_yieldValue(
+          `onMarkerIncomplete(${transitionName}, ${markerName}, ${startTime}, [${stringifyDeletions(
+            deletions,
+          )}])`,
+        );
+      },
       onMarkerComplete: (transitioName, markerName, startTime, endTime) => {
         Scheduler.unstable_yieldValue(
           `onMarkerComplete(${transitioName}, ${markerName}, ${startTime}, ${endTime})`,

From b6978bc38f6788c7e73982b9fd2771aabdf36f15 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 25 Aug 2022 14:12:07 -0400
Subject: [PATCH 1526/1603] experimental_use(promise) (#25084)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Internal `act`: Unwrapping resolved promises

This update our internal implementation of `act` to support React's new
behavior for unwrapping promises. Like we did with Scheduler, when
something suspends, it will yield to the main thread so the microtasks
can run, then continue in a new task.

I need to implement the same behavior in the public version of `act`,
but there are some additional considerations so I'll do that in a
separate commit.

* Move throwException to after work loop resumes

throwException is the function that finds the nearest boundary and
schedules it for a second render pass. We should only call it right
before we unwind the stack — not if we receive an immediate ping and
render the fiber again.

This was an oversight in 8ef3a7c that I didn't notice because it happens
to mostly work, anyway. What made me notice the mistake is that
throwException also marks the entire render phase as suspended
(RootDidSuspend or RootDidSuspendWithDelay), which is only supposed to
be happen if we show a fallback. One consequence was that, in the
RootDidSuspendWithDelay case, the entire commit phase was blocked,
because that's the exit status we use to block a bad fallback
from appearing.

* Use expando to check whether promise has resolved

Add a `status` expando to a thrown thenable to track when its value has
resolved.

In a later step, we'll also use `value` and `reason` expandos to track
the resolved value.

This is not part of the official JavaScript spec — think of
it as an extension of the Promise API, or a custom interface that is a
superset of Thenable. However, it's inspired by the terminology used
by `Promise.allSettled`.

The intent is that this will be a public API — Suspense implementations
can set these expandos to allow React to unwrap the value synchronously
without waiting a microtask.

* Scaffolding for `experimental_use` hook

Sets up a new experimental hook behind a feature flag, but does not
implement it yet.

* use(promise)

Adds experimental support to Fiber for unwrapping the value of a promise
inside a component. It is not yet implemented for Server Components,
but that is planned.

If promise has already resolved, the value can be unwrapped
"immediately" without showing a fallback. The trick we use to implement
this is to yield to the main thread (literally suspending the work
loop), wait for the microtask queue to drain, then check if the promise
resolved in the meantime. If so, we can resume the last attempted fiber
without unwinding the stack. This functionality was implemented in
previous commits.

Another feature is that the promises do not need to be cached between
attempts. Because we assume idempotent execution of components, React
will track the promises that were used during the previous attempt and
reuse the result. You shouldn't rely on this property, but during
initial render it mostly just works. Updates are trickier, though,
because if you used an uncached promise, we have no way of knowing
whether the underlying data has changed, so we have to unwrap the
promise every time. It will still work, but it's inefficient and can
lead to unnecessary fallbacks if it happens during a discrete update.

When we implement this for Server Components, this will be less of an
issue because there are no updates in that environment. However, it's
still better for performance to cache data requests, so the same
principles largely apply.

The intention is that this will eventually be the only supported way to
suspend on arbitrary promises. Throwing a promise directly will
be deprecated.
---
 packages/jest-react/src/internalAct.js        |  36 +-
 .../src/ReactFiberHooks.new.js                | 129 ++++++
 .../src/ReactFiberHooks.old.js                | 129 ++++++
 .../src/ReactFiberLane.new.js                 |  18 +-
 .../src/ReactFiberLane.old.js                 |  18 +-
 .../src/ReactFiberRoot.new.js                 |   1 +
 .../src/ReactFiberRoot.old.js                 |   1 +
 .../src/ReactFiberThrow.new.js                |  57 +--
 .../src/ReactFiberThrow.old.js                |  57 +--
 .../src/ReactFiberWakeable.new.js             | 124 +++++-
 .../src/ReactFiberWakeable.old.js             | 124 +++++-
 .../src/ReactFiberWorkLoop.new.js             | 402 ++++++++++++------
 .../src/ReactFiberWorkLoop.old.js             | 402 ++++++++++++------
 .../src/ReactInternalTypes.js                 |   3 +
 .../src/__tests__/ReactWakeable-test.js       | 269 +++++++++++-
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   7 +
 packages/scheduler/src/forks/SchedulerMock.js |   6 +
 packages/shared/ReactFeatureFlags.js          |   1 +
 packages/shared/ReactTypes.js                 |  36 +-
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 scripts/error-codes/codes.json                |   3 +-
 33 files changed, 1398 insertions(+), 439 deletions(-)

diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js
index 52b1d6a7c2fc..4e41f6234c92 100644
--- a/packages/jest-react/src/internalAct.js
+++ b/packages/jest-react/src/internalAct.js
@@ -23,7 +23,7 @@ import enqueueTask from 'shared/enqueueTask';
 let actingUpdatesScopeDepth = 0;
 
 export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
-  if (Scheduler.unstable_flushAllWithoutAsserting === undefined) {
+  if (Scheduler.unstable_flushUntilNextPaint === undefined) {
     throw Error(
       'This version of `act` requires a special mock build of Scheduler.',
     );
@@ -120,19 +120,31 @@ export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
 }
 
 function flushActWork(resolve, reject) {
-  // Flush suspended fallbacks
-  // $FlowFixMe: Flow doesn't know about global Jest object
-  jest.runOnlyPendingTimers();
-  enqueueTask(() => {
+  if (Scheduler.unstable_hasPendingWork()) {
     try {
-      const didFlushWork = Scheduler.unstable_flushAllWithoutAsserting();
-      if (didFlushWork) {
-        flushActWork(resolve, reject);
-      } else {
-        resolve();
-      }
+      Scheduler.unstable_flushUntilNextPaint();
     } catch (error) {
       reject(error);
     }
-  });
+
+    // If Scheduler yields while there's still work, it's so that we can
+    // unblock the main thread (e.g. for paint or for microtasks). Yield to
+    // the main thread and continue in a new task.
+    enqueueTask(() => flushActWork(resolve, reject));
+    return;
+  }
+
+  // Once the scheduler queue is empty, run all the timers. The purpose of this
+  // is to force any pending fallbacks to commit. The public version of act does
+  // this with dev-only React runtime logic, but since our internal act needs to
+  // work work production builds of React, we have to cheat.
+  // $FlowFixMe: Flow doesn't know about global Jest object
+  jest.runOnlyPendingTimers();
+  if (Scheduler.unstable_hasPendingWork()) {
+    // Committing a fallback scheduled additional work. Continue flushing.
+    flushActWork(resolve, reject);
+    return;
+  }
+
+  resolve();
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 074bad71b3bc..f52aac204c69 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -13,6 +13,8 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
   StartTransitionOptions,
+  Usable,
+  Thenable,
 } from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
@@ -32,6 +34,7 @@ import {
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
+  enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
@@ -120,6 +123,10 @@ import {
 } from './ReactFiberConcurrentUpdates.new';
 import {getTreeId} from './ReactFiberTreeContext.new';
 import {now} from './Scheduler';
+import {
+  trackUsedThenable,
+  getPreviouslyUsedThenableAtIndex,
+} from './ReactFiberWakeable.new';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -205,6 +212,9 @@ let didScheduleRenderPhaseUpdate: boolean = false;
 let didScheduleRenderPhaseUpdateDuringThisPass: 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;
+
 // 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.
@@ -403,6 +413,7 @@ export function renderWithHooks<Props, SecondArg>(
 
   // didScheduleRenderPhaseUpdate = false;
   // localIdCounter = 0;
+  // thenableIndexCounter = 0;
 
   // TODO Warn if no hooks are used at all during mount, then some are used during update.
   // Currently we will identify the update render as a mount because memoizedState === null.
@@ -441,6 +452,7 @@ export function renderWithHooks<Props, SecondArg>(
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
       localIdCounter = 0;
+      thenableIndexCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -524,6 +536,7 @@ export function renderWithHooks<Props, SecondArg>(
   didScheduleRenderPhaseUpdate = false;
   // This is reset by checkDidRenderIdHook
   // localIdCounter = 0;
+  thenableIndexCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -631,6 +644,7 @@ export function resetHooksAfterThrow(): void {
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
   localIdCounter = 0;
+  thenableIndexCounter = 0;
 }
 
 function mountWorkInProgressHook(): Hook {
@@ -722,6 +736,73 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   };
 }
 
+function use<T>(usable: Usable<T>): T {
+  if (
+    usable !== null &&
+    typeof usable === 'object' &&
+    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;
+
+    switch (thenable.status) {
+      case 'fulfilled': {
+        const fulfilledValue: T = thenable.value;
+        return fulfilledValue;
+      }
+      case 'rejected': {
+        const rejectedError = thenable.reason;
+        throw rejectedError;
+      }
+      default: {
+        const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+          index,
+        );
+        if (prevThenableAtIndex !== null) {
+          switch (prevThenableAtIndex.status) {
+            case 'fulfilled': {
+              const fulfilledValue: T = prevThenableAtIndex.value;
+              return fulfilledValue;
+            }
+            case 'rejected': {
+              const rejectedError: mixed = prevThenableAtIndex.reason;
+              throw rejectedError;
+            }
+            default: {
+              // The thenable still hasn't resolved. Suspend with the same
+              // thenable as last time to avoid redundant listeners.
+              throw prevThenableAtIndex;
+            }
+          }
+        } else {
+          // This is the first time something has been used at this index.
+          // Stash the thenable at the current index so we can reuse it during
+          // the next attempt.
+          trackUsedThenable(thenable, index);
+
+          // Suspend.
+          // TODO: 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.
+          throw thenable;
+        }
+      }
+    }
+  }
+
+  // TODO: Add support for 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<any> {
   throw new Error('Not implemented.');
 }
@@ -2421,6 +2502,9 @@ if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
+if (enableUseHook) {
+  (ContextOnlyDispatcher: Dispatcher).use = throwInvalidHookError;
+}
 if (enableUseMemoCacheHook) {
   (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
 }
@@ -2452,6 +2536,9 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
+if (enableUseHook) {
+  (HooksDispatcherOnMount: Dispatcher).use = use;
+}
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
 }
@@ -2485,6 +2572,9 @@ if (enableCache) {
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
 }
+if (enableUseHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).use = use;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2513,6 +2603,9 @@ if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseHook) {
+  (HooksDispatcherOnRerender: Dispatcher).use = use;
+}
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
 }
@@ -2691,6 +2784,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -2836,6 +2932,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -2981,6 +3080,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -3127,6 +3229,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -3289,6 +3394,14 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).use = function<T>(
+      usable: Usable<T>,
+    ): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    };
+  }
   if (enableUseMemoCacheHook) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
       size: number,
@@ -3456,6 +3569,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).use = function<T>(
+      usable: Usable<T>,
+    ): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    };
+  }
   if (enableUseMemoCacheHook) {
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
       size: number,
@@ -3624,6 +3745,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).use = function<T>(
+      usable: Usable<T>,
+    ): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    };
+  }
   if (enableUseMemoCacheHook) {
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
       size: number,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 9e461e54678b..473b8aace6cc 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -13,6 +13,8 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
   StartTransitionOptions,
+  Usable,
+  Thenable,
 } from 'shared/ReactTypes';
 import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
@@ -32,6 +34,7 @@ import {
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
+  enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
@@ -120,6 +123,10 @@ import {
 } from './ReactFiberConcurrentUpdates.old';
 import {getTreeId} from './ReactFiberTreeContext.old';
 import {now} from './Scheduler';
+import {
+  trackUsedThenable,
+  getPreviouslyUsedThenableAtIndex,
+} from './ReactFiberWakeable.old';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -205,6 +212,9 @@ let didScheduleRenderPhaseUpdate: boolean = false;
 let didScheduleRenderPhaseUpdateDuringThisPass: 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;
+
 // 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.
@@ -403,6 +413,7 @@ export function renderWithHooks<Props, SecondArg>(
 
   // didScheduleRenderPhaseUpdate = false;
   // localIdCounter = 0;
+  // thenableIndexCounter = 0;
 
   // TODO Warn if no hooks are used at all during mount, then some are used during update.
   // Currently we will identify the update render as a mount because memoizedState === null.
@@ -441,6 +452,7 @@ export function renderWithHooks<Props, SecondArg>(
     do {
       didScheduleRenderPhaseUpdateDuringThisPass = false;
       localIdCounter = 0;
+      thenableIndexCounter = 0;
 
       if (numberOfReRenders >= RE_RENDER_LIMIT) {
         throw new Error(
@@ -524,6 +536,7 @@ export function renderWithHooks<Props, SecondArg>(
   didScheduleRenderPhaseUpdate = false;
   // This is reset by checkDidRenderIdHook
   // localIdCounter = 0;
+  thenableIndexCounter = 0;
 
   if (didRenderTooFewHooks) {
     throw new Error(
@@ -631,6 +644,7 @@ export function resetHooksAfterThrow(): void {
 
   didScheduleRenderPhaseUpdateDuringThisPass = false;
   localIdCounter = 0;
+  thenableIndexCounter = 0;
 }
 
 function mountWorkInProgressHook(): Hook {
@@ -722,6 +736,73 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
   };
 }
 
+function use<T>(usable: Usable<T>): T {
+  if (
+    usable !== null &&
+    typeof usable === 'object' &&
+    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;
+
+    switch (thenable.status) {
+      case 'fulfilled': {
+        const fulfilledValue: T = thenable.value;
+        return fulfilledValue;
+      }
+      case 'rejected': {
+        const rejectedError = thenable.reason;
+        throw rejectedError;
+      }
+      default: {
+        const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+          index,
+        );
+        if (prevThenableAtIndex !== null) {
+          switch (prevThenableAtIndex.status) {
+            case 'fulfilled': {
+              const fulfilledValue: T = prevThenableAtIndex.value;
+              return fulfilledValue;
+            }
+            case 'rejected': {
+              const rejectedError: mixed = prevThenableAtIndex.reason;
+              throw rejectedError;
+            }
+            default: {
+              // The thenable still hasn't resolved. Suspend with the same
+              // thenable as last time to avoid redundant listeners.
+              throw prevThenableAtIndex;
+            }
+          }
+        } else {
+          // This is the first time something has been used at this index.
+          // Stash the thenable at the current index so we can reuse it during
+          // the next attempt.
+          trackUsedThenable(thenable, index);
+
+          // Suspend.
+          // TODO: 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.
+          throw thenable;
+        }
+      }
+    }
+  }
+
+  // TODO: Add support for 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<any> {
   throw new Error('Not implemented.');
 }
@@ -2421,6 +2502,9 @@ if (enableCache) {
   (ContextOnlyDispatcher: Dispatcher).getCacheForType = getCacheForType;
   (ContextOnlyDispatcher: Dispatcher).useCacheRefresh = throwInvalidHookError;
 }
+if (enableUseHook) {
+  (ContextOnlyDispatcher: Dispatcher).use = throwInvalidHookError;
+}
 if (enableUseMemoCacheHook) {
   (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
 }
@@ -2452,6 +2536,9 @@ if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
+if (enableUseHook) {
+  (HooksDispatcherOnMount: Dispatcher).use = use;
+}
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
 }
@@ -2485,6 +2572,9 @@ if (enableCache) {
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnUpdate: Dispatcher).useMemoCache = useMemoCache;
 }
+if (enableUseHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).use = use;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2513,6 +2603,9 @@ if (enableCache) {
   (HooksDispatcherOnRerender: Dispatcher).getCacheForType = getCacheForType;
   (HooksDispatcherOnRerender: Dispatcher).useCacheRefresh = updateRefresh;
 }
+if (enableUseHook) {
+  (HooksDispatcherOnRerender: Dispatcher).use = use;
+}
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
 }
@@ -2691,6 +2784,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -2836,6 +2932,9 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -2981,6 +3080,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -3127,6 +3229,9 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).use = use;
+  }
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
@@ -3289,6 +3394,14 @@ if (__DEV__) {
       return mountRefresh();
     };
   }
+  if (enableUseHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).use = function<T>(
+      usable: Usable<T>,
+    ): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    };
+  }
   if (enableUseMemoCacheHook) {
     (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = function(
       size: number,
@@ -3456,6 +3569,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).use = function<T>(
+      usable: Usable<T>,
+    ): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    };
+  }
   if (enableUseMemoCacheHook) {
     (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = function(
       size: number,
@@ -3624,6 +3745,14 @@ if (__DEV__) {
       return updateRefresh();
     };
   }
+  if (enableUseHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).use = function<T>(
+      usable: Usable<T>,
+    ): T {
+      warnInvalidHookAccess();
+      return use(usable);
+    };
+  }
   if (enableUseMemoCacheHook) {
     (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = function(
       size: number,
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index c3f8f5329ac7..4aebeba7a205 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -403,7 +403,11 @@ export function markStarvedLanesAsExpired(
   // 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.
-  let lanes = pendingLanes;
+  //
+  // 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 = pendingLanes & ~RetryLanes;
   while (lanes > 0) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
@@ -435,7 +439,15 @@ export function getHighestPriorityPendingLanes(root: FiberRoot) {
   return getHighestPriorityLanes(root.pendingLanes);
 }
 
-export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
+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;
@@ -646,6 +658,8 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
+  root.errorRecoveryDisabledLanes &= remainingLanes;
+
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index b3f31ec0ceac..5861e9d3d325 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -403,7 +403,11 @@ export function markStarvedLanesAsExpired(
   // 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.
-  let lanes = pendingLanes;
+  //
+  // 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 = pendingLanes & ~RetryLanes;
   while (lanes > 0) {
     const index = pickArbitraryLaneIndex(lanes);
     const lane = 1 << index;
@@ -435,7 +439,15 @@ export function getHighestPriorityPendingLanes(root: FiberRoot) {
   return getHighestPriorityLanes(root.pendingLanes);
 }
 
-export function getLanesToRetrySynchronouslyOnError(root: FiberRoot): Lanes {
+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;
@@ -646,6 +658,8 @@ export function markRootFinished(root: FiberRoot, remainingLanes: Lanes) {
 
   root.entangledLanes &= remainingLanes;
 
+  root.errorRecoveryDisabledLanes &= remainingLanes;
+
   const entanglements = root.entanglements;
   const eventTimes = root.eventTimes;
   const expirationTimes = root.expirationTimes;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index f171ca0de394..892fe78ac1b1 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -70,6 +70,7 @@ function FiberRootNode(
   this.expiredLanes = NoLanes;
   this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
+  this.errorRecoveryDisabledLanes = NoLanes;
 
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 9b37cee41eda..f7e16f0bbdcc 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -70,6 +70,7 @@ function FiberRootNode(
   this.expiredLanes = NoLanes;
   this.mutableReadLanes = NoLanes;
   this.finishedLanes = NoLanes;
+  this.errorRecoveryDisabledLanes = NoLanes;
 
   this.entangledLanes = NoLanes;
   this.entanglements = createLaneMap(NoLanes);
diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js
index c17218f83be4..d4e69b7c6694 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.new.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.new.js
@@ -57,7 +57,7 @@ import {
   onUncaughtError,
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
-  pingSuspendedRoot,
+  attachPingListener,
   restorePendingUpdaters,
 } from './ReactFiberWorkLoop.new';
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.new';
@@ -78,8 +78,6 @@ import {
   queueHydrationError,
 } from './ReactFiberHydrationContext.new';
 
-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-
 function createRootErrorUpdate(
   fiber: Fiber,
   errorInfo: CapturedValue<mixed>,
@@ -159,46 +157,6 @@ function createClassErrorUpdate(
   return update;
 }
 
-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();
-    pingCache.set(wakeable, threadIDs);
-  } else {
-    threadIDs = pingCache.get(wakeable);
-    if (threadIDs === undefined) {
-      threadIDs = new Set();
-      pingCache.set(wakeable, threadIDs);
-    }
-  }
-  if (!threadIDs.has(lanes)) {
-    // 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 resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   if (enableLazyContextPropagation) {
     const currentSourceFiber = sourceFiber.alternate;
@@ -357,7 +315,7 @@ function throwException(
   sourceFiber: Fiber,
   value: mixed,
   rootRenderLanes: Lanes,
-): Wakeable | null {
+): void {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
 
@@ -459,7 +417,7 @@ function throwException(
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      return wakeable;
+      return;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
@@ -474,7 +432,7 @@ function throwException(
         // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
-        return wakeable;
+        return;
       }
 
       // This is a sync/discrete update. We treat this case like an error
@@ -517,7 +475,7 @@ function throwException(
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
         queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
-        return null;
+        return;
       }
     } else {
       // Otherwise, fall through to the error path.
@@ -540,7 +498,7 @@ function throwException(
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
         const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
         enqueueCapturedUpdate(workInProgress, update);
-        return null;
+        return;
       }
       case ClassComponent:
         // Capture and retry
@@ -564,7 +522,7 @@ function throwException(
             lane,
           );
           enqueueCapturedUpdate(workInProgress, update);
-          return null;
+          return;
         }
         break;
       default:
@@ -572,7 +530,6 @@ function throwException(
     }
     workInProgress = workInProgress.return;
   } while (workInProgress !== null);
-  return null;
 }
 
 export {throwException, createRootErrorUpdate, createClassErrorUpdate};
diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js
index d6c5255807f3..cdc7d3c2a79e 100644
--- a/packages/react-reconciler/src/ReactFiberThrow.old.js
+++ b/packages/react-reconciler/src/ReactFiberThrow.old.js
@@ -57,7 +57,7 @@ import {
   onUncaughtError,
   markLegacyErrorBoundaryAsFailed,
   isAlreadyFailedLegacyErrorBoundary,
-  pingSuspendedRoot,
+  attachPingListener,
   restorePendingUpdaters,
 } from './ReactFiberWorkLoop.old';
 import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.old';
@@ -78,8 +78,6 @@ import {
   queueHydrationError,
 } from './ReactFiberHydrationContext.old';
 
-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-
 function createRootErrorUpdate(
   fiber: Fiber,
   errorInfo: CapturedValue<mixed>,
@@ -159,46 +157,6 @@ function createClassErrorUpdate(
   return update;
 }
 
-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();
-    pingCache.set(wakeable, threadIDs);
-  } else {
-    threadIDs = pingCache.get(wakeable);
-    if (threadIDs === undefined) {
-      threadIDs = new Set();
-      pingCache.set(wakeable, threadIDs);
-    }
-  }
-  if (!threadIDs.has(lanes)) {
-    // 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 resetSuspendedComponent(sourceFiber: Fiber, rootRenderLanes: Lanes) {
   if (enableLazyContextPropagation) {
     const currentSourceFiber = sourceFiber.alternate;
@@ -357,7 +315,7 @@ function throwException(
   sourceFiber: Fiber,
   value: mixed,
   rootRenderLanes: Lanes,
-): Wakeable | null {
+): void {
   // The source fiber did not complete.
   sourceFiber.flags |= Incomplete;
 
@@ -459,7 +417,7 @@ function throwException(
       if (suspenseBoundary.mode & ConcurrentMode) {
         attachPingListener(root, wakeable, rootRenderLanes);
       }
-      return wakeable;
+      return;
     } else {
       // No boundary was found. Unless this is a sync update, this is OK.
       // We can suspend and wait for more data to arrive.
@@ -474,7 +432,7 @@ function throwException(
         // This case also applies to initial hydration.
         attachPingListener(root, wakeable, rootRenderLanes);
         renderDidSuspendDelayIfPossible();
-        return wakeable;
+        return;
       }
 
       // This is a sync/discrete update. We treat this case like an error
@@ -517,7 +475,7 @@ function throwException(
         // Even though the user may not be affected by this error, we should
         // still log it so it can be fixed.
         queueHydrationError(createCapturedValueAtFiber(value, sourceFiber));
-        return null;
+        return;
       }
     } else {
       // Otherwise, fall through to the error path.
@@ -540,7 +498,7 @@ function throwException(
         workInProgress.lanes = mergeLanes(workInProgress.lanes, lane);
         const update = createRootErrorUpdate(workInProgress, errorInfo, lane);
         enqueueCapturedUpdate(workInProgress, update);
-        return null;
+        return;
       }
       case ClassComponent:
         // Capture and retry
@@ -564,7 +522,7 @@ function throwException(
             lane,
           );
           enqueueCapturedUpdate(workInProgress, update);
-          return null;
+          return;
         }
         break;
       default:
@@ -572,7 +530,6 @@ function throwException(
     }
     workInProgress = workInProgress.return;
   } while (workInProgress !== null);
-  return null;
 }
 
 export {throwException, createRootErrorUpdate, createClassErrorUpdate};
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.new.js b/packages/react-reconciler/src/ReactFiberWakeable.new.js
index 589d61eae814..83bfad32c5cf 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.new.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.new.js
@@ -7,38 +7,104 @@
  * @flow
  */
 
-import type {Wakeable} from 'shared/ReactTypes';
+import type {
+  Wakeable,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
 
-let suspendedWakeable: Wakeable | null = null;
-let wasPinged = false;
+let suspendedThenable: Thenable<mixed> | null = null;
 let adHocSuspendCount: number = 0;
 
+let usedThenables: Array<Thenable<any> | void> | null = null;
+let lastUsedThenable: Thenable<any> | null = null;
+
 const MAX_AD_HOC_SUSPEND_COUNT = 50;
 
-export function suspendedWakeableWasPinged() {
-  return wasPinged;
+export function isTrackingSuspendedThenable() {
+  return suspendedThenable !== null;
 }
 
-export function trackSuspendedWakeable(wakeable: Wakeable) {
-  adHocSuspendCount++;
-  suspendedWakeable = wakeable;
+export function suspendedThenableDidResolve() {
+  if (suspendedThenable !== null) {
+    const status = suspendedThenable.status;
+    return status === 'fulfilled' || status === 'rejected';
+  }
+  return false;
 }
 
-export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
-  if (wakeable === suspendedWakeable) {
-    // This ping is from the wakeable that just suspended. Mark it as pinged.
-    // When the work loop resumes, we'll immediately try rendering the fiber
-    // again instead of unwinding the stack.
-    wasPinged = true;
-    return true;
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  // If this wakeable isn't already a thenable, turn it into one now. Then,
+  // when we resume the work loop, we can check if its status is
+  // still pending.
+  // TODO: Get rid of the Wakeable type? It's superseded by UntrackedThenable.
+  const thenable: Thenable<mixed> = (wakeable: any);
+
+  if (thenable !== lastUsedThenable) {
+    // If this wakeable was not just `use`-d, it must be an ad hoc wakeable
+    // that was thrown by an older Suspense implementation. Keep a count of
+    // these so that we can detect an infinite ping loop.
+    // TODO: Once `use` throws an opaque signal instead of the actual thenable,
+    // a better way to count ad hoc suspends is whether an actual thenable
+    // is caught by the work loop.
+    adHocSuspendCount++;
+  }
+  suspendedThenable = thenable;
+
+  // 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 'pending':
+      // Since the status is already "pending", we can assume it will be updated
+      // when it resolves, either by React or something in userspace.
+      break;
+    case 'fulfilled':
+    case 'rejected':
+      // A thenable that already resolved shouldn't have been thrown, so this is
+      // unexpected. Suggests a mistake in a userspace data library. Don't track
+      // this thenable, because if we keep trying it will likely infinite loop
+      // without ever resolving.
+      // TODO: Log a warning?
+      suspendedThenable = null;
+      break;
+    default: {
+      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;
+    }
   }
-  return false;
 }
 
-export function resetWakeableState() {
-  suspendedWakeable = null;
-  wasPinged = false;
+export function resetWakeableStateAfterEachAttempt() {
+  suspendedThenable = null;
   adHocSuspendCount = 0;
+  lastUsedThenable = null;
+}
+
+export function resetThenableStateOnCompletion() {
+  usedThenables = null;
 }
 
 export function throwIfInfinitePingLoopDetected() {
@@ -48,3 +114,23 @@ export function throwIfInfinitePingLoopDetected() {
     // the render phase so that it gets the component stack.
   }
 }
+
+export function trackUsedThenable<T>(thenable: Thenable<T>, index: number) {
+  if (usedThenables === null) {
+    usedThenables = [];
+  }
+  usedThenables[index] = thenable;
+  lastUsedThenable = thenable;
+}
+
+export function getPreviouslyUsedThenableAtIndex<T>(
+  index: number,
+): Thenable<T> | null {
+  if (usedThenables !== null) {
+    const thenable = usedThenables[index];
+    if (thenable !== undefined) {
+      return thenable;
+    }
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.old.js b/packages/react-reconciler/src/ReactFiberWakeable.old.js
index 589d61eae814..83bfad32c5cf 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.old.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.old.js
@@ -7,38 +7,104 @@
  * @flow
  */
 
-import type {Wakeable} from 'shared/ReactTypes';
+import type {
+  Wakeable,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
 
-let suspendedWakeable: Wakeable | null = null;
-let wasPinged = false;
+let suspendedThenable: Thenable<mixed> | null = null;
 let adHocSuspendCount: number = 0;
 
+let usedThenables: Array<Thenable<any> | void> | null = null;
+let lastUsedThenable: Thenable<any> | null = null;
+
 const MAX_AD_HOC_SUSPEND_COUNT = 50;
 
-export function suspendedWakeableWasPinged() {
-  return wasPinged;
+export function isTrackingSuspendedThenable() {
+  return suspendedThenable !== null;
 }
 
-export function trackSuspendedWakeable(wakeable: Wakeable) {
-  adHocSuspendCount++;
-  suspendedWakeable = wakeable;
+export function suspendedThenableDidResolve() {
+  if (suspendedThenable !== null) {
+    const status = suspendedThenable.status;
+    return status === 'fulfilled' || status === 'rejected';
+  }
+  return false;
 }
 
-export function attemptToPingSuspendedWakeable(wakeable: Wakeable) {
-  if (wakeable === suspendedWakeable) {
-    // This ping is from the wakeable that just suspended. Mark it as pinged.
-    // When the work loop resumes, we'll immediately try rendering the fiber
-    // again instead of unwinding the stack.
-    wasPinged = true;
-    return true;
+export function trackSuspendedWakeable(wakeable: Wakeable) {
+  // If this wakeable isn't already a thenable, turn it into one now. Then,
+  // when we resume the work loop, we can check if its status is
+  // still pending.
+  // TODO: Get rid of the Wakeable type? It's superseded by UntrackedThenable.
+  const thenable: Thenable<mixed> = (wakeable: any);
+
+  if (thenable !== lastUsedThenable) {
+    // If this wakeable was not just `use`-d, it must be an ad hoc wakeable
+    // that was thrown by an older Suspense implementation. Keep a count of
+    // these so that we can detect an infinite ping loop.
+    // TODO: Once `use` throws an opaque signal instead of the actual thenable,
+    // a better way to count ad hoc suspends is whether an actual thenable
+    // is caught by the work loop.
+    adHocSuspendCount++;
+  }
+  suspendedThenable = thenable;
+
+  // 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 'pending':
+      // Since the status is already "pending", we can assume it will be updated
+      // when it resolves, either by React or something in userspace.
+      break;
+    case 'fulfilled':
+    case 'rejected':
+      // A thenable that already resolved shouldn't have been thrown, so this is
+      // unexpected. Suggests a mistake in a userspace data library. Don't track
+      // this thenable, because if we keep trying it will likely infinite loop
+      // without ever resolving.
+      // TODO: Log a warning?
+      suspendedThenable = null;
+      break;
+    default: {
+      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;
+    }
   }
-  return false;
 }
 
-export function resetWakeableState() {
-  suspendedWakeable = null;
-  wasPinged = false;
+export function resetWakeableStateAfterEachAttempt() {
+  suspendedThenable = null;
   adHocSuspendCount = 0;
+  lastUsedThenable = null;
+}
+
+export function resetThenableStateOnCompletion() {
+  usedThenables = null;
 }
 
 export function throwIfInfinitePingLoopDetected() {
@@ -48,3 +114,23 @@ export function throwIfInfinitePingLoopDetected() {
     // the render phase so that it gets the component stack.
   }
 }
+
+export function trackUsedThenable<T>(thenable: Thenable<T>, index: number) {
+  if (usedThenables === null) {
+    usedThenables = [];
+  }
+  usedThenables[index] = thenable;
+  lastUsedThenable = thenable;
+}
+
+export function getPreviouslyUsedThenableAtIndex<T>(
+  index: number,
+): Thenable<T> | null {
+  if (usedThenables !== null) {
+    const thenable = usedThenables[index];
+    if (thenable !== undefined) {
+      return thenable;
+    }
+  }
+  return null;
+}
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 13a673b19aa2..229756596cc1 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -254,14 +254,17 @@ import {
 } from './ReactFiberAct.new';
 import {processTransitionCallbacks} from './ReactFiberTracingMarkerComponent.new';
 import {
-  resetWakeableState,
+  resetWakeableStateAfterEachAttempt,
+  resetThenableStateOnCompletion,
   trackSuspendedWakeable,
-  suspendedWakeableWasPinged,
-  attemptToPingSuspendedWakeable,
+  suspendedThenableDidResolve,
+  isTrackingSuspendedThenable,
 } from './ReactFiberWakeable.new';
 
 const ceil = Math.ceil;
 
+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
@@ -299,6 +302,12 @@ let workInProgressRootRenderLanes: Lanes = NoLanes;
 // after this happens. If the fiber is pinged before we resume, we can retry
 // immediately instead of unwinding the stack.
 let workInProgressIsSuspended: boolean = false;
+let workInProgressThrownValue: mixed = null;
+
+// 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
@@ -1013,10 +1022,18 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       // render synchronously to block concurrent data mutations, and we'll
       // includes all pending updates are included. If it still fails after
       // the second attempt, we'll give up and commit the resulting tree.
-      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+      const originallyAttemptedLanes = lanes;
+      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
+        root,
+        originallyAttemptedLanes,
+      );
       if (errorRetryLanes !== NoLanes) {
         lanes = errorRetryLanes;
-        exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+        exitStatus = recoverFromConcurrentError(
+          root,
+          originallyAttemptedLanes,
+          errorRetryLanes,
+        );
       }
     }
     if (exitStatus === RootFatalErrored) {
@@ -1056,10 +1073,18 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 
         // We need to check again if something threw
         if (exitStatus === RootErrored) {
-          const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+          const originallyAttemptedLanes = lanes;
+          const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
+            root,
+            originallyAttemptedLanes,
+          );
           if (errorRetryLanes !== NoLanes) {
             lanes = errorRetryLanes;
-            exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+            exitStatus = recoverFromConcurrentError(
+              root,
+              originallyAttemptedLanes,
+              errorRetryLanes,
+            );
             // We assume the tree is now consistent because we didn't yield to any
             // concurrent events.
           }
@@ -1090,14 +1115,19 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   return null;
 }
 
-function recoverFromConcurrentError(root, errorRetryLanes) {
+function recoverFromConcurrentError(
+  root,
+  originallyAttemptedLanes,
+  errorRetryLanes,
+) {
   // 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;
 
-  if (isRootDehydrated(root)) {
+  const wasRootDehydrated = 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
@@ -1120,6 +1150,32 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   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.
@@ -1376,10 +1432,18 @@ function performSyncWorkOnRoot(root) {
     // synchronously to block concurrent data mutations, and we'll includes
     // all pending updates are included. If it still fails after the second
     // attempt, we'll give up and commit the resulting tree.
-    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+    const originallyAttemptedLanes = lanes;
+    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
+      root,
+      originallyAttemptedLanes,
+    );
     if (errorRetryLanes !== NoLanes) {
       lanes = errorRetryLanes;
-      exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+      exitStatus = recoverFromConcurrentError(
+        root,
+        originallyAttemptedLanes,
+        errorRetryLanes,
+      );
     }
   }
 
@@ -1596,13 +1660,16 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
       );
       interruptedWork = interruptedWork.return;
     }
-    resetWakeableState();
+    resetWakeableStateAfterEachAttempt();
+    resetThenableStateOnCompletion();
   }
   workInProgressRoot = root;
   const rootWorkInProgress = createWorkInProgress(root.current, null);
   workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = renderLanes = lanes;
   workInProgressIsSuspended = false;
+  workInProgressThrownValue = null;
+  workInProgressRootDidAttachPingListener = false;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
@@ -1621,94 +1688,65 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   return rootWorkInProgress;
 }
 
-function handleError(root, thrownValue): Wakeable | null {
-  do {
-    let erroredWork = workInProgress;
-    try {
-      // Reset module-level state that was set during the render phase.
-      resetContextDependencies();
-      resetHooksAfterThrow();
-      resetCurrentDebugFiberInDEV();
-      // TODO: I found and added this missing line while investigating a
-      // separate issue. Write a regression test using string refs.
-      ReactCurrentOwner.current = null;
-
-      if (erroredWork === null || erroredWork.return === null) {
-        // Expected to be working on a non-root fiber. This is a fatal error
-        // because there's no ancestor that can handle it; the root is
-        // supposed to capture all errors that weren't caught by an error
-        // boundary.
-        workInProgressRootExitStatus = RootFatalErrored;
-        workInProgressRootFatalError = thrownValue;
-        // 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;
-        return null;
-      }
+function handleThrow(root, thrownValue): void {
+  // Reset module-level state that was set during the render phase.
+  resetContextDependencies();
+  resetHooksAfterThrow();
+  resetCurrentDebugFiberInDEV();
+  // TODO: I found and added this missing line while investigating a
+  // separate issue. Write a regression test using string refs.
+  ReactCurrentOwner.current = null;
 
-      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.
-        stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);
-      }
+  // Setting this to `true` tells the work loop to unwind the stack instead
+  // of entering the begin phase. It's called "suspended" because it usually
+  // happens because of Suspense, but it also applies to errors. Think of it
+  // as suspending the execution of the work loop.
+  workInProgressIsSuspended = true;
+  workInProgressThrownValue = thrownValue;
+
+  const erroredWork = workInProgress;
+  if (erroredWork === null) {
+    // This is a fatal error
+    workInProgressRootExitStatus = RootFatalErrored;
+    workInProgressRootFatalError = thrownValue;
+    return;
+  }
 
-      if (enableSchedulingProfiler) {
-        markComponentRenderStopped();
+  const isWakeable =
+    thrownValue !== null &&
+    typeof thrownValue === 'object' &&
+    typeof thrownValue.then === 'function';
 
-        if (
-          thrownValue !== null &&
-          typeof thrownValue === 'object' &&
-          typeof thrownValue.then === 'function'
-        ) {
-          const wakeable: Wakeable = (thrownValue: any);
-          markComponentSuspended(
-            erroredWork,
-            wakeable,
-            workInProgressRootRenderLanes,
-          );
-        } else {
-          markComponentErrored(
-            erroredWork,
-            thrownValue,
-            workInProgressRootRenderLanes,
-          );
-        }
-      }
+  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.
+    stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);
+  }
 
-      const maybeWakeable = throwException(
-        root,
-        erroredWork.return,
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+    if (isWakeable) {
+      const wakeable: Wakeable = (thrownValue: any);
+      markComponentSuspended(
+        erroredWork,
+        wakeable,
+        workInProgressRootRenderLanes,
+      );
+    } else {
+      markComponentErrored(
         erroredWork,
         thrownValue,
         workInProgressRootRenderLanes,
       );
-      // Setting this to `true` tells the work loop to unwind the stack instead
-      // of entering the begin phase. It's called "suspended" because it usually
-      // happens because of Suspense, but it also applies to errors. Think of it
-      // as suspending the execution of the work loop.
-      workInProgressIsSuspended = true;
-
-      // Return to the normal work loop.
-      return maybeWakeable;
-    } catch (yetAnotherThrownValue) {
-      // Something in the return path also threw.
-      thrownValue = yetAnotherThrownValue;
-      if (workInProgress === erroredWork && erroredWork !== null) {
-        // If this boundary has already errored, then we had trouble processing
-        // the error. Bubble it to the next boundary.
-        erroredWork = erroredWork.return;
-        workInProgress = erroredWork;
-      } else {
-        erroredWork = workInProgress;
-      }
-      continue;
     }
-  } while (true);
+  }
+
+  if (isWakeable) {
+    const wakeable: Wakeable = (thrownValue: any);
+
+    trackSuspendedWakeable(wakeable);
+  }
 }
 
 function pushDispatcher() {
@@ -1834,7 +1872,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
       workLoopSync();
       break;
     } catch (thrownValue) {
-      handleError(root, thrownValue);
+      handleThrow(root, thrownValue);
     }
   } while (true);
   resetContextDependencies();
@@ -1872,10 +1910,15 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 function workLoopSync() {
   // Perform work without checking if we need to yield between fiber.
 
-  if (workInProgressIsSuspended && workInProgress !== null) {
+  if (workInProgressIsSuspended) {
     // The current work-in-progress was already attempted. We need to unwind
     // it before we continue the normal work loop.
-    resumeSuspendedUnitOfWork(workInProgress);
+    const thrownValue = workInProgressThrownValue;
+    workInProgressIsSuspended = false;
+    workInProgressThrownValue = null;
+    if (workInProgress !== null) {
+      resumeSuspendedUnitOfWork(workInProgress, thrownValue);
+    }
   }
 
   while (workInProgress !== null) {
@@ -1927,12 +1970,11 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       workLoopConcurrent();
       break;
     } catch (thrownValue) {
-      const maybeWakeable = handleError(root, thrownValue);
-      if (maybeWakeable !== null) {
+      handleThrow(root, thrownValue);
+      if (isTrackingSuspendedThenable()) {
         // If this fiber just suspended, it's possible the data is already
         // cached. Yield to the the main thread to give it a chance to ping. If
         // it does, we can retry immediately without unwinding the stack.
-        trackSuspendedWakeable(maybeWakeable);
         break;
       }
     }
@@ -1974,10 +2016,15 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
 function workLoopConcurrent() {
   // Perform work until Scheduler asks us to yield
 
-  if (workInProgressIsSuspended && workInProgress !== null) {
+  if (workInProgressIsSuspended) {
     // The current work-in-progress was already attempted. We need to unwind
     // it before we continue the normal work loop.
-    resumeSuspendedUnitOfWork(workInProgress);
+    const thrownValue = workInProgressThrownValue;
+    workInProgressIsSuspended = false;
+    workInProgressThrownValue = null;
+    if (workInProgress !== null) {
+      resumeSuspendedUnitOfWork(workInProgress, thrownValue);
+    }
   }
 
   while (workInProgress !== null && !shouldYield()) {
@@ -2013,27 +2060,72 @@ function performUnitOfWork(unitOfWork: Fiber): void {
   ReactCurrentOwner.current = null;
 }
 
-function resumeSuspendedUnitOfWork(unitOfWork: Fiber): void {
+function resumeSuspendedUnitOfWork(
+  unitOfWork: Fiber,
+  thrownValue: mixed,
+): void {
   // This is a fork of performUnitOfWork specifcally for resuming a fiber that
   // just suspended. In some cases, we may choose to retry the fiber immediately
   // instead of unwinding the stack. It's a separate function to keep the
   // additional logic out of the work loop's hot path.
 
-  if (!suspendedWakeableWasPinged()) {
-    // The wakeable wasn't pinged. Return to the normal work loop. This will
+  const wasPinged = suspendedThenableDidResolve();
+  resetWakeableStateAfterEachAttempt();
+
+  if (!wasPinged) {
+    // The thenable wasn't pinged. Return to the normal work loop. This will
     // unwind the stack, and potentially result in showing a fallback.
-    workInProgressIsSuspended = false;
-    resetWakeableState();
+    resetThenableStateOnCompletion();
+
+    const returnFiber = unitOfWork.return;
+    if (returnFiber === null || workInProgressRoot === null) {
+      // Expected to be working on a non-root fiber. This is a fatal error
+      // because there's no ancestor that can handle it; the root is
+      // supposed to capture all errors that weren't caught by an error
+      // boundary.
+      workInProgressRootExitStatus = RootFatalErrored;
+      workInProgressRootFatalError = thrownValue;
+      // 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;
+      return;
+    }
+
+    try {
+      // Find and mark the nearest Suspense or error boundary that can handle
+      // this "exception".
+      throwException(
+        workInProgressRoot,
+        returnFiber,
+        unitOfWork,
+        thrownValue,
+        workInProgressRootRenderLanes,
+      );
+    } 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.
+      workInProgress = returnFiber;
+      throw error;
+    }
+
+    // Return to the normal work loop.
     completeUnitOfWork(unitOfWork);
     return;
   }
 
   // The work-in-progress was immediately pinged. Instead of unwinding the
-  // stack and potentially showing a fallback, reset the fiber and try rendering
-  // it again.
+  // stack and potentially showing a fallback, unwind only the last stack frame,
+  // reset the fiber, and try rendering it again.
+  const current = unitOfWork.alternate;
+  unwindInterruptedWork(current, unitOfWork, workInProgressRootRenderLanes);
   unitOfWork = workInProgress = resetWorkInProgress(unitOfWork, renderLanes);
 
-  const current = unitOfWork.alternate;
   setCurrentDebugFiberInDEV(unitOfWork);
 
   let next;
@@ -2048,8 +2140,7 @@ function resumeSuspendedUnitOfWork(unitOfWork: Fiber): void {
   // The begin phase finished successfully without suspending. Reset the state
   // used to track the fiber while it was suspended. Then return to the normal
   // work loop.
-  workInProgressIsSuspended = false;
-  resetWakeableState();
+  resetThenableStateOnCompletion();
 
   resetCurrentDebugFiberInDEV();
   unitOfWork.memoizedProps = unitOfWork.pendingProps;
@@ -2850,7 +2941,53 @@ export function captureCommitPhaseError(
   }
 }
 
-export function pingSuspendedRoot(
+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();
+    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,
@@ -2874,31 +3011,26 @@ export function pingSuspendedRoot(
     // 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.
-    const didPingSuspendedWakeable = attemptToPingSuspendedWakeable(wakeable);
-    if (didPingSuspendedWakeable) {
-      // Successfully pinged the in-progress fiber. Don't unwind the stack.
-    } else {
-      // TODO: If we're rendering sync either due to Sync, Batched or expired,
-      // we should probably never restart.
+    // TODO: If we're rendering sync either due to Sync, Batched or expired,
+    // we should probably never restart.
 
-      // 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)
-      ) {
-        // Restart from the root.
-        prepareFreshStack(root, NoLanes);
-      } 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 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)
+    ) {
+      // Restart from the root.
+      prepareFreshStack(root, NoLanes);
+    } 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,
+      );
     }
   }
 
@@ -3172,7 +3304,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
         throw originalError;
       }
 
-      // Keep this code in sync with handleError; any changes here must have
+      // Keep this code in sync with handleThrow; any changes here must have
       // corresponding changes there.
       resetContextDependencies();
       resetHooksAfterThrow();
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 1d8d868a37a2..c4caf55518a8 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -254,14 +254,17 @@ import {
 } from './ReactFiberAct.old';
 import {processTransitionCallbacks} from './ReactFiberTracingMarkerComponent.old';
 import {
-  resetWakeableState,
+  resetWakeableStateAfterEachAttempt,
+  resetThenableStateOnCompletion,
   trackSuspendedWakeable,
-  suspendedWakeableWasPinged,
-  attemptToPingSuspendedWakeable,
+  suspendedThenableDidResolve,
+  isTrackingSuspendedThenable,
 } from './ReactFiberWakeable.old';
 
 const ceil = Math.ceil;
 
+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+
 const {
   ReactCurrentDispatcher,
   ReactCurrentOwner,
@@ -299,6 +302,12 @@ let workInProgressRootRenderLanes: Lanes = NoLanes;
 // after this happens. If the fiber is pinged before we resume, we can retry
 // immediately instead of unwinding the stack.
 let workInProgressIsSuspended: boolean = false;
+let workInProgressThrownValue: mixed = null;
+
+// 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
@@ -1013,10 +1022,18 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
       // render synchronously to block concurrent data mutations, and we'll
       // includes all pending updates are included. If it still fails after
       // the second attempt, we'll give up and commit the resulting tree.
-      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+      const originallyAttemptedLanes = lanes;
+      const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
+        root,
+        originallyAttemptedLanes,
+      );
       if (errorRetryLanes !== NoLanes) {
         lanes = errorRetryLanes;
-        exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+        exitStatus = recoverFromConcurrentError(
+          root,
+          originallyAttemptedLanes,
+          errorRetryLanes,
+        );
       }
     }
     if (exitStatus === RootFatalErrored) {
@@ -1056,10 +1073,18 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
 
         // We need to check again if something threw
         if (exitStatus === RootErrored) {
-          const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+          const originallyAttemptedLanes = lanes;
+          const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
+            root,
+            originallyAttemptedLanes,
+          );
           if (errorRetryLanes !== NoLanes) {
             lanes = errorRetryLanes;
-            exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+            exitStatus = recoverFromConcurrentError(
+              root,
+              originallyAttemptedLanes,
+              errorRetryLanes,
+            );
             // We assume the tree is now consistent because we didn't yield to any
             // concurrent events.
           }
@@ -1090,14 +1115,19 @@ function performConcurrentWorkOnRoot(root, didTimeout) {
   return null;
 }
 
-function recoverFromConcurrentError(root, errorRetryLanes) {
+function recoverFromConcurrentError(
+  root,
+  originallyAttemptedLanes,
+  errorRetryLanes,
+) {
   // 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;
 
-  if (isRootDehydrated(root)) {
+  const wasRootDehydrated = 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
@@ -1120,6 +1150,32 @@ function recoverFromConcurrentError(root, errorRetryLanes) {
   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.
@@ -1376,10 +1432,18 @@ function performSyncWorkOnRoot(root) {
     // synchronously to block concurrent data mutations, and we'll includes
     // all pending updates are included. If it still fails after the second
     // attempt, we'll give up and commit the resulting tree.
-    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(root);
+    const originallyAttemptedLanes = lanes;
+    const errorRetryLanes = getLanesToRetrySynchronouslyOnError(
+      root,
+      originallyAttemptedLanes,
+    );
     if (errorRetryLanes !== NoLanes) {
       lanes = errorRetryLanes;
-      exitStatus = recoverFromConcurrentError(root, errorRetryLanes);
+      exitStatus = recoverFromConcurrentError(
+        root,
+        originallyAttemptedLanes,
+        errorRetryLanes,
+      );
     }
   }
 
@@ -1596,13 +1660,16 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
       );
       interruptedWork = interruptedWork.return;
     }
-    resetWakeableState();
+    resetWakeableStateAfterEachAttempt();
+    resetThenableStateOnCompletion();
   }
   workInProgressRoot = root;
   const rootWorkInProgress = createWorkInProgress(root.current, null);
   workInProgress = rootWorkInProgress;
   workInProgressRootRenderLanes = renderLanes = lanes;
   workInProgressIsSuspended = false;
+  workInProgressThrownValue = null;
+  workInProgressRootDidAttachPingListener = false;
   workInProgressRootExitStatus = RootInProgress;
   workInProgressRootFatalError = null;
   workInProgressRootSkippedLanes = NoLanes;
@@ -1621,94 +1688,65 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   return rootWorkInProgress;
 }
 
-function handleError(root, thrownValue): Wakeable | null {
-  do {
-    let erroredWork = workInProgress;
-    try {
-      // Reset module-level state that was set during the render phase.
-      resetContextDependencies();
-      resetHooksAfterThrow();
-      resetCurrentDebugFiberInDEV();
-      // TODO: I found and added this missing line while investigating a
-      // separate issue. Write a regression test using string refs.
-      ReactCurrentOwner.current = null;
-
-      if (erroredWork === null || erroredWork.return === null) {
-        // Expected to be working on a non-root fiber. This is a fatal error
-        // because there's no ancestor that can handle it; the root is
-        // supposed to capture all errors that weren't caught by an error
-        // boundary.
-        workInProgressRootExitStatus = RootFatalErrored;
-        workInProgressRootFatalError = thrownValue;
-        // 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;
-        return null;
-      }
+function handleThrow(root, thrownValue): void {
+  // Reset module-level state that was set during the render phase.
+  resetContextDependencies();
+  resetHooksAfterThrow();
+  resetCurrentDebugFiberInDEV();
+  // TODO: I found and added this missing line while investigating a
+  // separate issue. Write a regression test using string refs.
+  ReactCurrentOwner.current = null;
 
-      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.
-        stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);
-      }
+  // Setting this to `true` tells the work loop to unwind the stack instead
+  // of entering the begin phase. It's called "suspended" because it usually
+  // happens because of Suspense, but it also applies to errors. Think of it
+  // as suspending the execution of the work loop.
+  workInProgressIsSuspended = true;
+  workInProgressThrownValue = thrownValue;
+
+  const erroredWork = workInProgress;
+  if (erroredWork === null) {
+    // This is a fatal error
+    workInProgressRootExitStatus = RootFatalErrored;
+    workInProgressRootFatalError = thrownValue;
+    return;
+  }
 
-      if (enableSchedulingProfiler) {
-        markComponentRenderStopped();
+  const isWakeable =
+    thrownValue !== null &&
+    typeof thrownValue === 'object' &&
+    typeof thrownValue.then === 'function';
 
-        if (
-          thrownValue !== null &&
-          typeof thrownValue === 'object' &&
-          typeof thrownValue.then === 'function'
-        ) {
-          const wakeable: Wakeable = (thrownValue: any);
-          markComponentSuspended(
-            erroredWork,
-            wakeable,
-            workInProgressRootRenderLanes,
-          );
-        } else {
-          markComponentErrored(
-            erroredWork,
-            thrownValue,
-            workInProgressRootRenderLanes,
-          );
-        }
-      }
+  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.
+    stopProfilerTimerIfRunningAndRecordDelta(erroredWork, true);
+  }
 
-      const maybeWakeable = throwException(
-        root,
-        erroredWork.return,
+  if (enableSchedulingProfiler) {
+    markComponentRenderStopped();
+    if (isWakeable) {
+      const wakeable: Wakeable = (thrownValue: any);
+      markComponentSuspended(
+        erroredWork,
+        wakeable,
+        workInProgressRootRenderLanes,
+      );
+    } else {
+      markComponentErrored(
         erroredWork,
         thrownValue,
         workInProgressRootRenderLanes,
       );
-      // Setting this to `true` tells the work loop to unwind the stack instead
-      // of entering the begin phase. It's called "suspended" because it usually
-      // happens because of Suspense, but it also applies to errors. Think of it
-      // as suspending the execution of the work loop.
-      workInProgressIsSuspended = true;
-
-      // Return to the normal work loop.
-      return maybeWakeable;
-    } catch (yetAnotherThrownValue) {
-      // Something in the return path also threw.
-      thrownValue = yetAnotherThrownValue;
-      if (workInProgress === erroredWork && erroredWork !== null) {
-        // If this boundary has already errored, then we had trouble processing
-        // the error. Bubble it to the next boundary.
-        erroredWork = erroredWork.return;
-        workInProgress = erroredWork;
-      } else {
-        erroredWork = workInProgress;
-      }
-      continue;
     }
-  } while (true);
+  }
+
+  if (isWakeable) {
+    const wakeable: Wakeable = (thrownValue: any);
+
+    trackSuspendedWakeable(wakeable);
+  }
 }
 
 function pushDispatcher() {
@@ -1834,7 +1872,7 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
       workLoopSync();
       break;
     } catch (thrownValue) {
-      handleError(root, thrownValue);
+      handleThrow(root, thrownValue);
     }
   } while (true);
   resetContextDependencies();
@@ -1872,10 +1910,15 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
 function workLoopSync() {
   // Perform work without checking if we need to yield between fiber.
 
-  if (workInProgressIsSuspended && workInProgress !== null) {
+  if (workInProgressIsSuspended) {
     // The current work-in-progress was already attempted. We need to unwind
     // it before we continue the normal work loop.
-    resumeSuspendedUnitOfWork(workInProgress);
+    const thrownValue = workInProgressThrownValue;
+    workInProgressIsSuspended = false;
+    workInProgressThrownValue = null;
+    if (workInProgress !== null) {
+      resumeSuspendedUnitOfWork(workInProgress, thrownValue);
+    }
   }
 
   while (workInProgress !== null) {
@@ -1927,12 +1970,11 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       workLoopConcurrent();
       break;
     } catch (thrownValue) {
-      const maybeWakeable = handleError(root, thrownValue);
-      if (maybeWakeable !== null) {
+      handleThrow(root, thrownValue);
+      if (isTrackingSuspendedThenable()) {
         // If this fiber just suspended, it's possible the data is already
         // cached. Yield to the the main thread to give it a chance to ping. If
         // it does, we can retry immediately without unwinding the stack.
-        trackSuspendedWakeable(maybeWakeable);
         break;
       }
     }
@@ -1974,10 +2016,15 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
 function workLoopConcurrent() {
   // Perform work until Scheduler asks us to yield
 
-  if (workInProgressIsSuspended && workInProgress !== null) {
+  if (workInProgressIsSuspended) {
     // The current work-in-progress was already attempted. We need to unwind
     // it before we continue the normal work loop.
-    resumeSuspendedUnitOfWork(workInProgress);
+    const thrownValue = workInProgressThrownValue;
+    workInProgressIsSuspended = false;
+    workInProgressThrownValue = null;
+    if (workInProgress !== null) {
+      resumeSuspendedUnitOfWork(workInProgress, thrownValue);
+    }
   }
 
   while (workInProgress !== null && !shouldYield()) {
@@ -2013,27 +2060,72 @@ function performUnitOfWork(unitOfWork: Fiber): void {
   ReactCurrentOwner.current = null;
 }
 
-function resumeSuspendedUnitOfWork(unitOfWork: Fiber): void {
+function resumeSuspendedUnitOfWork(
+  unitOfWork: Fiber,
+  thrownValue: mixed,
+): void {
   // This is a fork of performUnitOfWork specifcally for resuming a fiber that
   // just suspended. In some cases, we may choose to retry the fiber immediately
   // instead of unwinding the stack. It's a separate function to keep the
   // additional logic out of the work loop's hot path.
 
-  if (!suspendedWakeableWasPinged()) {
-    // The wakeable wasn't pinged. Return to the normal work loop. This will
+  const wasPinged = suspendedThenableDidResolve();
+  resetWakeableStateAfterEachAttempt();
+
+  if (!wasPinged) {
+    // The thenable wasn't pinged. Return to the normal work loop. This will
     // unwind the stack, and potentially result in showing a fallback.
-    workInProgressIsSuspended = false;
-    resetWakeableState();
+    resetThenableStateOnCompletion();
+
+    const returnFiber = unitOfWork.return;
+    if (returnFiber === null || workInProgressRoot === null) {
+      // Expected to be working on a non-root fiber. This is a fatal error
+      // because there's no ancestor that can handle it; the root is
+      // supposed to capture all errors that weren't caught by an error
+      // boundary.
+      workInProgressRootExitStatus = RootFatalErrored;
+      workInProgressRootFatalError = thrownValue;
+      // 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;
+      return;
+    }
+
+    try {
+      // Find and mark the nearest Suspense or error boundary that can handle
+      // this "exception".
+      throwException(
+        workInProgressRoot,
+        returnFiber,
+        unitOfWork,
+        thrownValue,
+        workInProgressRootRenderLanes,
+      );
+    } 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.
+      workInProgress = returnFiber;
+      throw error;
+    }
+
+    // Return to the normal work loop.
     completeUnitOfWork(unitOfWork);
     return;
   }
 
   // The work-in-progress was immediately pinged. Instead of unwinding the
-  // stack and potentially showing a fallback, reset the fiber and try rendering
-  // it again.
+  // stack and potentially showing a fallback, unwind only the last stack frame,
+  // reset the fiber, and try rendering it again.
+  const current = unitOfWork.alternate;
+  unwindInterruptedWork(current, unitOfWork, workInProgressRootRenderLanes);
   unitOfWork = workInProgress = resetWorkInProgress(unitOfWork, renderLanes);
 
-  const current = unitOfWork.alternate;
   setCurrentDebugFiberInDEV(unitOfWork);
 
   let next;
@@ -2048,8 +2140,7 @@ function resumeSuspendedUnitOfWork(unitOfWork: Fiber): void {
   // The begin phase finished successfully without suspending. Reset the state
   // used to track the fiber while it was suspended. Then return to the normal
   // work loop.
-  workInProgressIsSuspended = false;
-  resetWakeableState();
+  resetThenableStateOnCompletion();
 
   resetCurrentDebugFiberInDEV();
   unitOfWork.memoizedProps = unitOfWork.pendingProps;
@@ -2850,7 +2941,53 @@ export function captureCommitPhaseError(
   }
 }
 
-export function pingSuspendedRoot(
+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();
+    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,
@@ -2874,31 +3011,26 @@ export function pingSuspendedRoot(
     // 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.
-    const didPingSuspendedWakeable = attemptToPingSuspendedWakeable(wakeable);
-    if (didPingSuspendedWakeable) {
-      // Successfully pinged the in-progress fiber. Don't unwind the stack.
-    } else {
-      // TODO: If we're rendering sync either due to Sync, Batched or expired,
-      // we should probably never restart.
+    // TODO: If we're rendering sync either due to Sync, Batched or expired,
+    // we should probably never restart.
 
-      // 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)
-      ) {
-        // Restart from the root.
-        prepareFreshStack(root, NoLanes);
-      } 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 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)
+    ) {
+      // Restart from the root.
+      prepareFreshStack(root, NoLanes);
+    } 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,
+      );
     }
   }
 
@@ -3172,7 +3304,7 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
         throw originalError;
       }
 
-      // Keep this code in sync with handleError; any changes here must have
+      // Keep this code in sync with handleThrow; any changes here must have
       // corresponding changes there.
       resetContextDependencies();
       resetHooksAfterThrow();
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index b03a71570136..c8239dc2483e 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -17,6 +17,7 @@ import type {
   MutableSource,
   StartTransitionOptions,
   Wakeable,
+  Usable,
 } from 'shared/ReactTypes';
 import type {SuspenseInstance} from './ReactFiberHostConfig';
 import type {WorkTag} from './ReactWorkTags';
@@ -238,6 +239,7 @@ type BaseFiberRootProperties = {|
   pingedLanes: Lanes,
   expiredLanes: Lanes,
   mutableReadLanes: Lanes,
+  errorRecoveryDisabledLanes: Lanes,
 
   finishedLanes: Lanes,
 
@@ -353,6 +355,7 @@ type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
 export type Dispatcher = {|
+  use?: <T>(Usable<T>) => T,
   getCacheSignal?: () => AbortSignal,
   getCacheForType?: <T>(resourceType: () => T) => T,
   readContext<T>(context: ReactContext<T>): T,
diff --git a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
index 848962c696c0..7d946e5cbd03 100644
--- a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
@@ -4,6 +4,7 @@ let React;
 let ReactNoop;
 let Scheduler;
 let act;
+let use;
 let Suspense;
 let startTransition;
 
@@ -15,6 +16,7 @@ describe('ReactWakeable', () => {
     ReactNoop = require('react-noop-renderer');
     Scheduler = require('scheduler');
     act = require('jest-react').act;
+    use = React.experimental_use;
     Suspense = React.Suspense;
     startTransition = React.startTransition;
   });
@@ -45,23 +47,272 @@ describe('ReactWakeable', () => {
       );
     }
 
+    const root = ReactNoop.createRoot();
     await act(async () => {
       startTransition(() => {
-        ReactNoop.render(<App />);
+        root.render(<App />);
       });
+    });
 
+    expect(Scheduler).toHaveYielded([
       // React will yield when the async component suspends.
-      expect(Scheduler).toFlushUntilNextPaint(['Suspend!']);
+      'Suspend!',
+      'Resolve in microtask',
+
+      // Finished rendering without unwinding the stack or preparing a fallback.
+      'Async',
+    ]);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  test('if suspended fiber is pinged in a microtask, it does not block a transition from completing', async () => {
+    let resolved = false;
+    function Async() {
+      if (resolved) {
+        return <Text text="Async" />;
+      }
+      Scheduler.unstable_yieldValue('Suspend!');
+      throw Promise.resolve().then(() => {
+        Scheduler.unstable_yieldValue('Resolve in microtask');
+        resolved = true;
+      });
+    }
+
+    function App() {
+      return <Async />;
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      'Suspend!',
+      'Resolve in microtask',
+      'Async',
+    ]);
+    expect(root).toMatchRenderedOutput('Async');
+  });
+
+  test('does not infinite loop if already resolved thenable is thrown', async () => {
+    // An already resolved promise should never be thrown. Since it already
+    // resolved, 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 resolved thenable
+    const thenable = {
+      then(ping) {},
+      status: 'fulfilled',
+      value: null,
+    };
+
+    let i = 0;
+    function Async() {
+      if (i++ > 50) {
+        throw new Error('Infinite loop detected');
+      }
+      Scheduler.unstable_yieldValue('Suspend!');
+      // This thenable should never be thrown because it already resolved.
+      // 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(async () => {
+      root.render(<App />);
+    });
+    expect(Scheduler).toHaveYielded(['Suspend!', 'Loading...']);
+    expect(root).toMatchRenderedOutput('Loading...');
+  });
+
+  // @gate enableUseHook
+  test('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(async () => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    expect(Scheduler).toHaveYielded(['ABC']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
 
-      // Wait for microtasks to resolve
-      // TODO: The async form of `act` should automatically yield to microtasks
-      // when a continuation is returned, the way Scheduler does.
-      await null;
+  // @gate enableUseHook
+  test("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} />;
+    }
 
-      expect(Scheduler).toHaveYielded(['Resolve in microtask']);
+    function App() {
+      return (
+        <Suspense fallback={<Text text="Loading..." />}>
+          <Async />
+        </Suspense>
+      );
+    }
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      startTransition(() => {
+        root.render(<App />);
+      });
     });
+    expect(Scheduler).toHaveYielded(['ABC']);
+    expect(root).toMatchRenderedOutput('ABC');
+  });
+
+  // @gate enableUseHook
+  test('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(async () => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    expect(Scheduler).toHaveYielded(['Oops!', 'Oops!']);
+  });
+
+  // @gate enableUseHook
+  test('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.unstable_yieldValue('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(async () => {
+      startTransition(() => {
+        root.render(<App />);
+      });
+    });
+    expect(Scheduler).toHaveYielded([
+      // First attempt. The uncached promise suspends.
+      'Suspend! [Async]',
+      // Because the promise already resolved, 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.
 
-    // Finished rendering without unwinding the stack.
-    expect(Scheduler).toHaveYielded(['Async']);
+      // This time, the error is thrown and we commit the result.
+      'Suspend! [Async]',
+      'Caught an error: Oops!',
+    ]);
+    expect(root).toMatchRenderedOutput('Caught an error: Oops!');
   });
 });
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 65cc12a7cfc2..0bc75a353168 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -27,6 +27,7 @@ export {
   createMutableSource as unstable_createMutableSource,
   createRef,
   createServerContext,
+  experimental_use,
   forwardRef,
   isValidElement,
   lazy,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index 7bfb6bc21f05..d60351e26398 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -24,6 +24,7 @@ export {
   createFactory,
   createRef,
   createServerContext,
+  experimental_use,
   forwardRef,
   isValidElement,
   lazy,
diff --git a/packages/react/index.js b/packages/react/index.js
index 77cd739625b9..d0628ab003a7 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -49,6 +49,7 @@ export {
   createMutableSource,
   createRef,
   createServerContext,
+  experimental_use,
   forwardRef,
   isValidElement,
   lazy,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index e9e4202d7ae5..24de7511daed 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -26,6 +26,7 @@ export {
   createMutableSource as unstable_createMutableSource,
   createRef,
   createServerContext,
+  experimental_use,
   forwardRef,
   isValidElement,
   lazy,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index 701c4d1781c1..fae7ee56b758 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -55,6 +55,7 @@ import {
   useDeferredValue,
   useId,
   useCacheRefresh,
+  use,
   useMemoCache,
 } from './ReactHooks';
 import {
@@ -128,6 +129,7 @@ export {
   getCacheForType as unstable_getCacheForType,
   useCacheRefresh as unstable_useCacheRefresh,
   REACT_CACHE_TYPE as unstable_Cache,
+  use as experimental_use,
   useMemoCache as unstable_useMemoCache,
   // enableScopeAPI
   REACT_SCOPE_TYPE as unstable_Scope,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 197edfaedc55..74699ea673e0 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -14,6 +14,7 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
   StartTransitionOptions,
+  Usable,
 } from 'shared/ReactTypes';
 
 import ReactCurrentDispatcher from './ReactCurrentDispatcher';
@@ -205,6 +206,12 @@ export function useCacheRefresh(): <T>(?() => T, ?T) => void {
   return dispatcher.useCacheRefresh();
 }
 
+export function use<T>(usable: Usable<T>): T {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.use(usable);
+}
+
 export function useMemoCache(size: number): Array<any> {
   const dispatcher = resolveDispatcher();
   // $FlowFixMe This is unstable, thus optional
diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js
index a1374005ed05..68dac0a7e687 100644
--- a/packages/scheduler/src/forks/SchedulerMock.js
+++ b/packages/scheduler/src/forks/SchedulerMock.js
@@ -517,6 +517,11 @@ function unstable_flushUntilNextPaint(): void {
       isFlushing = false;
     }
   }
+  return false;
+}
+
+function unstable_hasPendingWork(): boolean {
+  return scheduledCallback !== null;
 }
 
 function unstable_flushExpired() {
@@ -644,6 +649,7 @@ export {
   unstable_flushExpired,
   unstable_clearYields,
   unstable_flushUntilNextPaint,
+  unstable_hasPendingWork,
   unstable_flushAll,
   unstable_yieldValue,
   unstable_advanceTime,
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 0bd4fc6c04ab..197124fd233e 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -117,6 +117,7 @@ export const enableCPUSuspense = __EXPERIMENTAL__;
 export const deletedTreeCleanUpLevel = 3;
 
 export const enableFloat = __EXPERIMENTAL__;
+export const enableUseHook = __EXPERIMENTAL__;
 
 // Enables unstable_useMemoCache hook, intended as a compilation target for
 // auto-memoization.
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 17aa509e89eb..7dacd489e4b8 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -174,13 +174,36 @@ export interface 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.
-export interface Thenable<+R> {
-  then<U>(
-    onFulfill: (value: R) => void | Thenable<U> | U,
-    onReject: (error: mixed) => void | Thenable<U> | U,
-  ): void | Thenable<U>;
+interface ThenableImpl<T> {
+  then(
+    onFulfill: (value: T) => mixed,
+    onReject: (error: mixed) => mixed,
+  ): void | Wakeable;
+}
+interface UntrackedThenable<T> extends ThenableImpl<T> {
+  status?: void;
+}
+
+export interface PendingThenable<T> extends ThenableImpl<T> {
+  status: 'pending';
+}
+
+export interface FulfilledThenable<T> extends ThenableImpl<T> {
+  status: 'fulfilled';
+  value: T;
 }
 
+export interface RejectedThenable<T> extends ThenableImpl<T> {
+  status: 'rejected';
+  reason: mixed;
+}
+
+export type Thenable<T> =
+  | UntrackedThenable<T>
+  | PendingThenable<T>
+  | FulfilledThenable<T>
+  | RejectedThenable<T>;
+
 export type OffscreenMode =
   | 'hidden'
   | 'unstable-defer-without-hiding'
@@ -189,3 +212,6 @@ export type OffscreenMode =
 export type StartTransitionOptions = {
   name?: string,
 };
+
+// TODO: Add Context support
+export type Usable<T> = Thenable<T>;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index ec5ae1bf63a7..785aae48b7ac 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -50,6 +50,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 2ed90a83b9a5..29e28584ca8f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 81992652fe96..ac08f57552c4 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 5d6eba8f7fbe..9408f5d7adb1 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -49,6 +49,7 @@ export const deferRenderPhaseUpdateToNextBatch = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 5e7caa5fa6cd..990d1a4a9053 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 84a2d4f84ac8..7698cde8231c 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = false;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
+export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 040e2caa2c16..e6768ca0fdb0 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -40,6 +40,7 @@ export const warnAboutSpreadingKeyToJSX = false;
 export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
+export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 90a3f9007cd6..985c593c0303 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -53,6 +53,7 @@ export const enableSuspenseAvoidThisFallback = true;
 export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableFloat = false;
+export const enableUseHook = true;
 export const enableUseMemoCacheHook = true;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 15e92133a14d..423b30de52dd 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -422,5 +422,6 @@
   "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."
+  "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"
 }

From b36f7223573c23da8ed794fcac81c607c389fe5f Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Thu, 25 Aug 2022 20:23:10 +0100
Subject: [PATCH 1527/1603] Remove ReactFiberFlags MountLayoutDev and
 MountPassiveDev (#25091)

---
 .../src/ReactFiberClassComponent.new.js       | 51 ++------------
 .../src/ReactFiberClassComponent.old.js       | 51 ++------------
 .../react-reconciler/src/ReactFiberFlags.js   | 58 +++++++--------
 .../src/ReactFiberHooks.new.js                | 70 +++----------------
 .../src/ReactFiberHooks.old.js                | 70 +++----------------
 5 files changed, 59 insertions(+), 241 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.new.js b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
index c0a3418c93ba..37aef0a84f74 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.new.js
@@ -13,19 +13,13 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import type {Flags} from './ReactFiberFlags';
 
 import * as React from 'react';
-import {
-  LayoutStatic,
-  MountLayoutDev,
-  Update,
-  Snapshot,
-} from './ReactFiberFlags';
+import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableStrictEffects,
   enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.new';
@@ -39,12 +33,7 @@ import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.new';
-import {
-  DebugTracingMode,
-  NoMode,
-  StrictLegacyMode,
-  StrictEffectsMode,
-} from './ReactTypeOfMode';
+import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -907,14 +896,7 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    let fiberFlags: Flags = Update | LayoutStatic;
-    if (
-      __DEV__ &&
-      enableStrictEffects &&
-      (workInProgress.mode & StrictEffectsMode) !== NoMode
-    ) {
-      fiberFlags |= MountLayoutDev;
-    }
+    const fiberFlags: Flags = Update | LayoutStatic;
     workInProgress.flags |= fiberFlags;
   }
 }
@@ -985,14 +967,7 @@ function resumeMountClassInstance(
     // 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') {
-      let fiberFlags: Flags = Update | LayoutStatic;
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (workInProgress.mode & StrictEffectsMode) !== NoMode
-      ) {
-        fiberFlags |= MountLayoutDev;
-      }
+      const fiberFlags: Flags = Update | LayoutStatic;
       workInProgress.flags |= fiberFlags;
     }
     return false;
@@ -1036,28 +1011,14 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      let fiberFlags: Flags = Update | LayoutStatic;
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (workInProgress.mode & StrictEffectsMode) !== NoMode
-      ) {
-        fiberFlags |= MountLayoutDev;
-      }
+      const fiberFlags: Flags = Update | LayoutStatic;
       workInProgress.flags |= fiberFlags;
     }
   } 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') {
-      let fiberFlags: Flags = Update | LayoutStatic;
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (workInProgress.mode & StrictEffectsMode) !== NoMode
-      ) {
-        fiberFlags |= MountLayoutDev;
-      }
+      const fiberFlags: Flags = Update | LayoutStatic;
       workInProgress.flags |= fiberFlags;
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.old.js b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
index aa709f7ad6cf..3211717d886f 100644
--- a/packages/react-reconciler/src/ReactFiberClassComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassComponent.old.js
@@ -13,19 +13,13 @@ import type {UpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import type {Flags} from './ReactFiberFlags';
 
 import * as React from 'react';
-import {
-  LayoutStatic,
-  MountLayoutDev,
-  Update,
-  Snapshot,
-} from './ReactFiberFlags';
+import {LayoutStatic, Update, Snapshot} from './ReactFiberFlags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
   enableDebugTracing,
   enableSchedulingProfiler,
   warnAboutDeprecatedLifecycles,
-  enableStrictEffects,
   enableLazyContextPropagation,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -39,12 +33,7 @@ import isArray from 'shared/isArray';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
-import {
-  DebugTracingMode,
-  NoMode,
-  StrictLegacyMode,
-  StrictEffectsMode,
-} from './ReactTypeOfMode';
+import {DebugTracingMode, StrictLegacyMode} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -907,14 +896,7 @@ function mountClassInstance(
   }
 
   if (typeof instance.componentDidMount === 'function') {
-    let fiberFlags: Flags = Update | LayoutStatic;
-    if (
-      __DEV__ &&
-      enableStrictEffects &&
-      (workInProgress.mode & StrictEffectsMode) !== NoMode
-    ) {
-      fiberFlags |= MountLayoutDev;
-    }
+    const fiberFlags: Flags = Update | LayoutStatic;
     workInProgress.flags |= fiberFlags;
   }
 }
@@ -985,14 +967,7 @@ function resumeMountClassInstance(
     // 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') {
-      let fiberFlags: Flags = Update | LayoutStatic;
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (workInProgress.mode & StrictEffectsMode) !== NoMode
-      ) {
-        fiberFlags |= MountLayoutDev;
-      }
+      const fiberFlags: Flags = Update | LayoutStatic;
       workInProgress.flags |= fiberFlags;
     }
     return false;
@@ -1036,28 +1011,14 @@ function resumeMountClassInstance(
       }
     }
     if (typeof instance.componentDidMount === 'function') {
-      let fiberFlags: Flags = Update | LayoutStatic;
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (workInProgress.mode & StrictEffectsMode) !== NoMode
-      ) {
-        fiberFlags |= MountLayoutDev;
-      }
+      const fiberFlags: Flags = Update | LayoutStatic;
       workInProgress.flags |= fiberFlags;
     }
   } 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') {
-      let fiberFlags: Flags = Update | LayoutStatic;
-      if (
-        __DEV__ &&
-        enableStrictEffects &&
-        (workInProgress.mode & StrictEffectsMode) !== NoMode
-      ) {
-        fiberFlags |= MountLayoutDev;
-      }
+      const fiberFlags: Flags = Update | LayoutStatic;
       workInProgress.flags |= fiberFlags;
     }
 
diff --git a/packages/react-reconciler/src/ReactFiberFlags.js b/packages/react-reconciler/src/ReactFiberFlags.js
index 9059d115c129..08c124b5cf6e 100644
--- a/packages/react-reconciler/src/ReactFiberFlags.js
+++ b/packages/react-reconciler/src/ReactFiberFlags.js
@@ -12,53 +12,49 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 export type Flags = number;
 
 // Don't change these two values. They're used by React Dev Tools.
-export const NoFlags = /*                      */ 0b00000000000000000000000000;
-export const PerformedWork = /*                */ 0b00000000000000000000000001;
+export const NoFlags = /*                      */ 0b000000000000000000000000;
+export const PerformedWork = /*                */ 0b000000000000000000000001;
 
 // You can change the rest (and add more).
-export const Placement = /*                    */ 0b00000000000000000000000010;
-export const Update = /*                       */ 0b00000000000000000000000100;
-export const ChildDeletion = /*                */ 0b00000000000000000000001000;
-export const ContentReset = /*                 */ 0b00000000000000000000010000;
-export const Callback = /*                     */ 0b00000000000000000000100000;
-export const DidCapture = /*                   */ 0b00000000000000000001000000;
-export const ForceClientRender = /*            */ 0b00000000000000000010000000;
-export const Ref = /*                          */ 0b00000000000000000100000000;
-export const Snapshot = /*                     */ 0b00000000000000001000000000;
-export const Passive = /*                      */ 0b00000000000000010000000000;
-export const Hydrating = /*                    */ 0b00000000000000100000000000;
-export const Visibility = /*                   */ 0b00000000000001000000000000;
-export const StoreConsistency = /*             */ 0b00000000000010000000000000;
+export const Placement = /*                    */ 0b000000000000000000000010;
+export const Update = /*                       */ 0b000000000000000000000100;
+export const ChildDeletion = /*                */ 0b000000000000000000001000;
+export const ContentReset = /*                 */ 0b000000000000000000010000;
+export const Callback = /*                     */ 0b000000000000000000100000;
+export const DidCapture = /*                   */ 0b000000000000000001000000;
+export const ForceClientRender = /*            */ 0b000000000000000010000000;
+export const Ref = /*                          */ 0b000000000000000100000000;
+export const Snapshot = /*                     */ 0b000000000000001000000000;
+export const Passive = /*                      */ 0b000000000000010000000000;
+export const Hydrating = /*                    */ 0b000000000000100000000000;
+export const Visibility = /*                   */ 0b000000000001000000000000;
+export const StoreConsistency = /*             */ 0b000000000010000000000000;
 
 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 = /*               */ 0b00000000000011111111111111;
+export const HostEffectMask = /*               */ 0b000000000011111111111111;
 
 // These are not really side effects, but we still reuse this field.
-export const Incomplete = /*                   */ 0b00000000000100000000000000;
-export const ShouldCapture = /*                */ 0b00000000001000000000000000;
-export const ForceUpdateForLegacySuspense = /* */ 0b00000000010000000000000000;
-export const DidPropagateContext = /*          */ 0b00000000100000000000000000;
-export const NeedsPropagation = /*             */ 0b00000001000000000000000000;
-export const Forked = /*                       */ 0b00000010000000000000000000;
+export const Incomplete = /*                   */ 0b000000000100000000000000;
+export const ShouldCapture = /*                */ 0b000000001000000000000000;
+export const ForceUpdateForLegacySuspense = /* */ 0b000000010000000000000000;
+export const DidPropagateContext = /*          */ 0b000000100000000000000000;
+export const NeedsPropagation = /*             */ 0b000001000000000000000000;
+export const Forked = /*                       */ 0b000010000000000000000000;
 
 // 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 RefStatic = /*                    */ 0b00000100000000000000000000;
-export const LayoutStatic = /*                 */ 0b00001000000000000000000000;
-export const PassiveStatic = /*                */ 0b00010000000000000000000000;
+export const RefStatic = /*                    */ 0b000100000000000000000000;
+export const LayoutStatic = /*                 */ 0b001000000000000000000000;
+export const PassiveStatic = /*                */ 0b010000000000000000000000;
 
-// These flags allow us to traverse to fibers that have effects on mount
-// without traversing the entire tree after every commit for
-// double invoking
-export const MountLayoutDev = /*               */ 0b00100000000000000000000000;
-export const MountPassiveDev = /*              */ 0b01000000000000000000000000;
-export const PlacementDEV = /*                 */ 0b10000000000000000000000000;
+// Flag used to identify newly inserted fibers. It isn't reset after commit unlike `Placement`.
+export const PlacementDEV = /*                 */ 0b100000000000000000000000;
 
 // Groups of flags that are used in the commit phase to skip over trees that
 // don't contain effects, by checking subtreeFlags.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index f52aac204c69..2c06f94d5811 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -30,7 +30,6 @@ import {
   enableNewReconciler,
   enableCache,
   enableUseRefAccessWarning,
-  enableStrictEffects,
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
@@ -38,12 +37,7 @@ import {
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
-import {
-  NoMode,
-  ConcurrentMode,
-  DebugTracingMode,
-  StrictEffectsMode,
-} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   NoLane,
   SyncLane,
@@ -71,8 +65,6 @@ import {readContext, checkIfContextChanged} from './ReactFiberNewContext.new';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
   LayoutStatic as LayoutStaticEffect,
-  MountLayoutDev as MountLayoutDevEffect,
-  MountPassiveDev as MountPassiveDevEffect,
   Passive as PassiveEffect,
   PassiveStatic as PassiveStaticEffect,
   StaticMask as StaticMaskEffect,
@@ -583,22 +575,7 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
-  // TODO: Don't need to reset the flags here, because they're reset in the
-  // complete phase (bubbleProperties).
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (workInProgress.mode & StrictEffectsMode) !== NoMode
-  ) {
-    workInProgress.flags &= ~(
-      MountPassiveDevEffect |
-      MountLayoutDevEffect |
-      PassiveEffect |
-      UpdateEffect
-    );
-  } else {
-    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
-  }
+  workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
   current.lanes = removeLanes(current.lanes, lanes);
 }
 
@@ -1788,25 +1765,12 @@ function mountEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
-  ) {
-    return mountEffectImpl(
-      MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(
-      PassiveEffect | PassiveStaticEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  }
+  return mountEffectImpl(
+    PassiveEffect | PassiveStaticEffect,
+    HookPassive,
+    create,
+    deps,
+  );
 }
 
 function updateEffect(
@@ -1834,14 +1798,7 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
-  ) {
-    fiberFlags |= MountLayoutDevEffect;
-  }
+  const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   return mountEffectImpl(fiberFlags, HookLayout, create, deps);
 }
 
@@ -1901,14 +1858,7 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
-  ) {
-    fiberFlags |= MountLayoutDevEffect;
-  }
+  const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   return mountEffectImpl(
     fiberFlags,
     HookLayout,
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 473b8aace6cc..e258a9f824e2 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -30,7 +30,6 @@ import {
   enableNewReconciler,
   enableCache,
   enableUseRefAccessWarning,
-  enableStrictEffects,
   enableLazyContextPropagation,
   enableUseMutableSource,
   enableTransitionTracing,
@@ -38,12 +37,7 @@ import {
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 
-import {
-  NoMode,
-  ConcurrentMode,
-  DebugTracingMode,
-  StrictEffectsMode,
-} from './ReactTypeOfMode';
+import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   NoLane,
   SyncLane,
@@ -71,8 +65,6 @@ import {readContext, checkIfContextChanged} from './ReactFiberNewContext.old';
 import {HostRoot, CacheComponent} from './ReactWorkTags';
 import {
   LayoutStatic as LayoutStaticEffect,
-  MountLayoutDev as MountLayoutDevEffect,
-  MountPassiveDev as MountPassiveDevEffect,
   Passive as PassiveEffect,
   PassiveStatic as PassiveStaticEffect,
   StaticMask as StaticMaskEffect,
@@ -583,22 +575,7 @@ export function bailoutHooks(
   lanes: Lanes,
 ) {
   workInProgress.updateQueue = current.updateQueue;
-  // TODO: Don't need to reset the flags here, because they're reset in the
-  // complete phase (bubbleProperties).
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (workInProgress.mode & StrictEffectsMode) !== NoMode
-  ) {
-    workInProgress.flags &= ~(
-      MountPassiveDevEffect |
-      MountLayoutDevEffect |
-      PassiveEffect |
-      UpdateEffect
-    );
-  } else {
-    workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
-  }
+  workInProgress.flags &= ~(PassiveEffect | UpdateEffect);
   current.lanes = removeLanes(current.lanes, lanes);
 }
 
@@ -1788,25 +1765,12 @@ function mountEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
-  ) {
-    return mountEffectImpl(
-      MountPassiveDevEffect | PassiveEffect | PassiveStaticEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  } else {
-    return mountEffectImpl(
-      PassiveEffect | PassiveStaticEffect,
-      HookPassive,
-      create,
-      deps,
-    );
-  }
+  return mountEffectImpl(
+    PassiveEffect | PassiveStaticEffect,
+    HookPassive,
+    create,
+    deps,
+  );
 }
 
 function updateEffect(
@@ -1834,14 +1798,7 @@ function mountLayoutEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
 ): void {
-  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
-  ) {
-    fiberFlags |= MountLayoutDevEffect;
-  }
+  const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   return mountEffectImpl(fiberFlags, HookLayout, create, deps);
 }
 
@@ -1901,14 +1858,7 @@ function mountImperativeHandle<T>(
   const effectDeps =
     deps !== null && deps !== undefined ? deps.concat([ref]) : null;
 
-  let fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
-  if (
-    __DEV__ &&
-    enableStrictEffects &&
-    (currentlyRenderingFiber.mode & StrictEffectsMode) !== NoMode
-  ) {
-    fiberFlags |= MountLayoutDevEffect;
-  }
+  const fiberFlags: Flags = UpdateEffect | LayoutStaticEffect;
   return mountEffectImpl(
     fiberFlags,
     HookLayout,

From 0de3ddf56e011c708067319d9b8e94e1cd1ea1a5 Mon Sep 17 00:00:00 2001
From: Ricky <rickhanlonii@fb.com>
Date: Thu, 25 Aug 2022 17:01:30 -0400
Subject: [PATCH 1528/1603] Remove Symbol Polyfill (again) (#25144)

---
 .../react/src/__tests__/ReactElement-test.js  | 147 -----------------
 .../src/__tests__/ReactElementJSX-test.js     | 154 ------------------
 packages/shared/ReactFeatureFlags.js          |   3 -
 packages/shared/ReactSymbols.www.js           |  93 -----------
 .../__tests__/ReactSymbols-test.internal.js   |  16 --
 .../forks/ReactFeatureFlags.native-fb.js      |   1 -
 .../forks/ReactFeatureFlags.native-oss.js     |   1 -
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 -
 .../ReactFeatureFlags.test-renderer.native.js |   1 -
 .../ReactFeatureFlags.test-renderer.www.js    |   1 -
 .../shared/forks/ReactFeatureFlags.testing.js |   1 -
 .../forks/ReactFeatureFlags.testing.www.js    |   1 -
 .../forks/ReactFeatureFlags.www-dynamic.js    |   1 -
 .../shared/forks/ReactFeatureFlags.www.js     |   1 -
 packages/shared/isValidElementType.js         |  12 +-
 scripts/jest/setupTests.www.js                |   4 -
 scripts/rollup/forks.js                       |  11 --
 17 files changed, 1 insertion(+), 448 deletions(-)
 delete mode 100644 packages/shared/ReactSymbols.www.js

diff --git a/packages/react/src/__tests__/ReactElement-test.js b/packages/react/src/__tests__/ReactElement-test.js
index 95499947b80f..0e8a72e2f388 100644
--- a/packages/react/src/__tests__/ReactElement-test.js
+++ b/packages/react/src/__tests__/ReactElement-test.js
@@ -9,26 +9,16 @@
 
 'use strict';
 
-import {enableSymbolFallbackForWWW} from 'shared/ReactFeatureFlags';
-
 let React;
 let ReactDOM;
 let ReactTestUtils;
 
 describe('ReactElement', () => {
   let ComponentClass;
-  let originalSymbol;
 
   beforeEach(() => {
     jest.resetModules();
 
-    if (enableSymbolFallbackForWWW) {
-      // Delete the native Symbol if we have one to ensure we test the
-      // unpolyfilled environment.
-      originalSymbol = global.Symbol;
-      global.Symbol = undefined;
-    }
-
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('react-dom/test-utils');
@@ -41,17 +31,6 @@ describe('ReactElement', () => {
     };
   });
 
-  afterEach(() => {
-    if (enableSymbolFallbackForWWW) {
-      global.Symbol = originalSymbol;
-    }
-  });
-
-  // @gate enableSymbolFallbackForWWW
-  it('uses the fallback value when in an environment without Symbol', () => {
-    expect((<div />).$$typeof).toBe(0xeac7);
-  });
-
   it('returns a complete element according to spec', () => {
     const element = React.createElement(ComponentClass);
     expect(element.type).toBe(ComponentClass);
@@ -301,42 +280,6 @@ describe('ReactElement', () => {
     expect(element.type.someStaticMethod()).toBe('someReturnValue');
   });
 
-  // NOTE: We're explicitly not using JSX here. This is intended to test
-  // classic JS without JSX.
-  // @gate enableSymbolFallbackForWWW
-  it('identifies valid elements', () => {
-    class Component extends React.Component {
-      render() {
-        return React.createElement('div');
-      }
-    }
-
-    expect(React.isValidElement(React.createElement('div'))).toEqual(true);
-    expect(React.isValidElement(React.createElement(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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(React.createElement('div'));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
-  });
-
   // NOTE: We're explicitly not using JSX here. This is intended to test
   // classic JS without JSX.
   it('is indistinguishable from a plain object', () => {
@@ -451,94 +394,4 @@ describe('ReactElement', () => {
     const test = ReactTestUtils.renderIntoDocument(<Test value={+undefined} />);
     expect(test.props.value).toBeNaN();
   });
-
-  // NOTE: We're explicitly not using JSX here. This is intended to test
-  // classic JS without JSX.
-  // @gate !enableSymbolFallbackForWWW
-  it('identifies elements, but not JSON, if Symbols are supported', () => {
-    class Component extends React.Component {
-      render() {
-        return React.createElement('div');
-      }
-    }
-
-    expect(React.isValidElement(React.createElement('div'))).toEqual(true);
-    expect(React.isValidElement(React.createElement(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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(React.createElement('div'));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
-  });
-
-  // NOTE: We're explicitly not using JSX here. This is intended to test
-  // classic JS without JSX.
-  it('identifies elements, but not JSON, if Symbols are supported (with polyfill)', () => {
-    // Rudimentary polyfill
-    // Once all jest engines support Symbols natively we can swap this to test
-    // WITH native Symbols by default.
-    const REACT_ELEMENT_TYPE = function() {}; // fake Symbol
-    const OTHER_SYMBOL = function() {}; // another fake Symbol
-    global.Symbol = function(name) {
-      return OTHER_SYMBOL;
-    };
-    global.Symbol.for = function(key) {
-      if (key === 'react.element') {
-        return REACT_ELEMENT_TYPE;
-      }
-      return OTHER_SYMBOL;
-    };
-
-    jest.resetModules();
-
-    React = require('react');
-
-    class Component extends React.Component {
-      render() {
-        return React.createElement('div');
-      }
-    }
-
-    expect(React.isValidElement(React.createElement('div'))).toEqual(true);
-    expect(React.isValidElement(React.createElement(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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(React.createElement('div'));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
-  });
 });
diff --git a/packages/react/src/__tests__/ReactElementJSX-test.js b/packages/react/src/__tests__/ReactElementJSX-test.js
index 16b53923ffb5..1a4f535a0b2f 100644
--- a/packages/react/src/__tests__/ReactElementJSX-test.js
+++ b/packages/react/src/__tests__/ReactElementJSX-test.js
@@ -9,8 +9,6 @@
 
 'use strict';
 
-import {enableSymbolFallbackForWWW} from 'shared/ReactFeatureFlags';
-
 let React;
 let ReactDOM;
 let ReactTestUtils;
@@ -22,18 +20,9 @@ let JSXDEVRuntime;
 // A lot of these tests are pulled from ReactElement-test because
 // this api is meant to be backwards compatible.
 describe('ReactElement.jsx', () => {
-  let originalSymbol;
-
   beforeEach(() => {
     jest.resetModules();
 
-    if (enableSymbolFallbackForWWW) {
-      // Delete the native Symbol if we have one to ensure we test the
-      // unpolyfilled environment.
-      originalSymbol = global.Symbol;
-      global.Symbol = undefined;
-    }
-
     React = require('react');
     JSXRuntime = require('react/jsx-runtime');
     JSXDEVRuntime = require('react/jsx-dev-runtime');
@@ -41,12 +30,6 @@ describe('ReactElement.jsx', () => {
     ReactTestUtils = require('react-dom/test-utils');
   });
 
-  afterEach(() => {
-    if (enableSymbolFallbackForWWW) {
-      global.Symbol = originalSymbol;
-    }
-  });
-
   it('allows static methods to be called using the type property', () => {
     class StaticMethodComponentClass extends React.Component {
       render() {
@@ -59,48 +42,6 @@ describe('ReactElement.jsx', () => {
     expect(element.type.someStaticMethod()).toBe('someReturnValue');
   });
 
-  // @gate enableSymbolFallbackForWWW
-  it('identifies valid elements', () => {
-    class Component extends React.Component {
-      render() {
-        return JSXRuntime.jsx('div', {});
-      }
-    }
-
-    expect(React.isValidElement(JSXRuntime.jsx('div', {}))).toEqual(true);
-    expect(React.isValidElement(JSXRuntime.jsx(Component, {}))).toEqual(true);
-    expect(
-      React.isValidElement(JSXRuntime.jsx(JSXRuntime.Fragment, {})),
-    ).toEqual(true);
-    if (__DEV__) {
-      expect(React.isValidElement(JSXDEVRuntime.jsxDEV('div', {}))).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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(JSXRuntime.jsx('div', {}));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(true);
-  });
-
   it('is indistinguishable from a plain object', () => {
     const element = JSXRuntime.jsx('div', {className: 'foo'});
     const object = {};
@@ -294,101 +235,6 @@ describe('ReactElement.jsx', () => {
     );
   });
 
-  // @gate !enableSymbolFallbackForWWW
-  it('identifies elements, but not JSON, if Symbols are supported', () => {
-    class Component extends React.Component {
-      render() {
-        return JSXRuntime.jsx('div', {});
-      }
-    }
-
-    expect(React.isValidElement(JSXRuntime.jsx('div', {}))).toEqual(true);
-    expect(React.isValidElement(JSXRuntime.jsx(Component, {}))).toEqual(true);
-    expect(
-      React.isValidElement(JSXRuntime.jsx(JSXRuntime.Fragment, {})),
-    ).toEqual(true);
-    if (__DEV__) {
-      expect(React.isValidElement(JSXDEVRuntime.jsxDEV('div', {}))).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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(JSXRuntime.jsx('div', {}));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
-  });
-
-  it('identifies elements, but not JSON, if Symbols are polyfilled', () => {
-    // Rudimentary polyfill
-    // Once all jest engines support Symbols natively we can swap this to test
-    // WITH native Symbols by default.
-    const REACT_ELEMENT_TYPE = function() {}; // fake Symbol
-    const OTHER_SYMBOL = function() {}; // another fake Symbol
-    global.Symbol = function(name) {
-      return OTHER_SYMBOL;
-    };
-    global.Symbol.for = function(key) {
-      if (key === 'react.element') {
-        return REACT_ELEMENT_TYPE;
-      }
-      return OTHER_SYMBOL;
-    };
-
-    jest.resetModules();
-
-    React = require('react');
-    JSXRuntime = require('react/jsx-runtime');
-
-    class Component extends React.Component {
-      render() {
-        return JSXRuntime.jsx('div');
-      }
-    }
-
-    expect(React.isValidElement(JSXRuntime.jsx('div', {}))).toEqual(true);
-    expect(React.isValidElement(JSXRuntime.jsx(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);
-    if (!__EXPERIMENTAL__) {
-      let factory;
-      expect(() => {
-        factory = React.createFactory('div');
-      }).toWarnDev(
-        'Warning: React.createFactory() is deprecated and will be removed in a ' +
-          'future major release. Consider using JSX or use React.createElement() ' +
-          'directly instead.',
-        {withoutStack: true},
-      );
-      expect(React.isValidElement(factory)).toEqual(false);
-    }
-    expect(React.isValidElement(Component)).toEqual(false);
-    expect(React.isValidElement({type: 'div', props: {}})).toEqual(false);
-
-    const jsonElement = JSON.stringify(JSXRuntime.jsx('div', {}));
-    expect(React.isValidElement(JSON.parse(jsonElement))).toBe(false);
-  });
-
   it('should warn when unkeyed children are passed to jsx', () => {
     const container = document.createElement('div');
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 197124fd233e..ba7fcb61a613 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -24,9 +24,6 @@ export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 // like migrating internal callers or performance testing.
 // -----------------------------------------------------------------------------
 
-// This is blocked on adding a symbol polyfill to www.
-export const enableSymbolFallbackForWWW = false;
-
 // This rolled out to 10% public in www, so we should be able to land, but some
 // internal tests need to be updated. The open source behavior is correct.
 export const skipUnmountedBoundaries = true;
diff --git a/packages/shared/ReactSymbols.www.js b/packages/shared/ReactSymbols.www.js
deleted file mode 100644
index 523cc1436dfc..000000000000
--- a/packages/shared/ReactSymbols.www.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- *
- * @flow
- */
-
-// ATTENTION
-// When adding new symbols to this file,
-// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-
-import {enableSymbolFallbackForWWW} from './ReactFeatureFlags';
-
-const usePolyfill =
-  enableSymbolFallbackForWWW && (typeof Symbol !== 'function' || !Symbol.for);
-
-// The Symbol used to tag the ReactElement-like types.
-export const REACT_ELEMENT_TYPE = usePolyfill
-  ? 0xeac7
-  : Symbol.for('react.element');
-export const REACT_PORTAL_TYPE = usePolyfill
-  ? 0xeaca
-  : Symbol.for('react.portal');
-export const REACT_FRAGMENT_TYPE = usePolyfill
-  ? 0xeacb
-  : Symbol.for('react.fragment');
-export const REACT_STRICT_MODE_TYPE = usePolyfill
-  ? 0xeacc
-  : Symbol.for('react.strict_mode');
-export const REACT_PROFILER_TYPE = usePolyfill
-  ? 0xead2
-  : Symbol.for('react.profiler');
-export const REACT_PROVIDER_TYPE = usePolyfill
-  ? 0xeacd
-  : Symbol.for('react.provider');
-export const REACT_CONTEXT_TYPE = usePolyfill
-  ? 0xeace
-  : Symbol.for('react.context');
-export const REACT_SERVER_CONTEXT_TYPE = usePolyfill
-  ? 0xeae6
-  : Symbol.for('react.server_context');
-export const REACT_FORWARD_REF_TYPE = usePolyfill
-  ? 0xead0
-  : Symbol.for('react.forward_ref');
-export const REACT_SUSPENSE_TYPE = usePolyfill
-  ? 0xead1
-  : Symbol.for('react.suspense');
-export const REACT_SUSPENSE_LIST_TYPE = usePolyfill
-  ? 0xead8
-  : Symbol.for('react.suspense_list');
-export const REACT_MEMO_TYPE = usePolyfill ? 0xead3 : Symbol.for('react.memo');
-export const REACT_LAZY_TYPE = usePolyfill ? 0xead4 : Symbol.for('react.lazy');
-export const REACT_SCOPE_TYPE = usePolyfill
-  ? 0xead7
-  : Symbol.for('react.scope');
-export const REACT_DEBUG_TRACING_MODE_TYPE = usePolyfill
-  ? 0xeae1
-  : Symbol.for('react.debug_trace_mode');
-export const REACT_OFFSCREEN_TYPE = usePolyfill
-  ? 0xeae2
-  : Symbol.for('react.offscreen');
-export const REACT_LEGACY_HIDDEN_TYPE = usePolyfill
-  ? 0xeae3
-  : Symbol.for('react.legacy_hidden');
-export const REACT_CACHE_TYPE = usePolyfill
-  ? 0xeae4
-  : Symbol.for('react.cache');
-export const REACT_TRACING_MARKER_TYPE = usePolyfill
-  ? 0xeae5
-  : Symbol.for('react.tracing_marker');
-export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = usePolyfill
-  ? 0xeae7
-  : Symbol.for('react.default_value');
-const MAYBE_ITERATOR_SYMBOL = usePolyfill
-  ? typeof Symbol === 'function' && Symbol.iterator
-  : Symbol.iterator;
-
-const FAUX_ITERATOR_SYMBOL = '@@iterator';
-
-export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
-  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;
-}
diff --git a/packages/shared/__tests__/ReactSymbols-test.internal.js b/packages/shared/__tests__/ReactSymbols-test.internal.js
index 4b6a2d0bc61c..53618ba3fe4f 100644
--- a/packages/shared/__tests__/ReactSymbols-test.internal.js
+++ b/packages/shared/__tests__/ReactSymbols-test.internal.js
@@ -26,20 +26,4 @@ describe('ReactSymbols', () => {
   it('Symbol values should be unique', () => {
     expectToBeUnique(Object.entries(require('shared/ReactSymbols')));
   });
-
-  // @gate enableSymbolFallbackForWWW
-  it('numeric values should be unique', () => {
-    const originalSymbolFor = global.Symbol.for;
-    global.Symbol.for = null;
-    try {
-      const entries = Object.entries(require('shared/ReactSymbols.www')).filter(
-        // REACT_ASYNC_MODE_TYPE and REACT_CONCURRENT_MODE_TYPE have the same numeric value
-        // for legacy backwards compatibility
-        ([key]) => key !== 'REACT_ASYNC_MODE_TYPE',
-      );
-      expectToBeUnique(entries);
-    } finally {
-      global.Symbol.for = originalSymbolFor;
-    }
-  });
 });
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 785aae48b7ac..76f19551875b 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -81,7 +81,6 @@ export const enableServerContext = false;
 export const enableUseMutableSource = true;
 
 export const enableTransitionTracing = false;
-export const enableSymbolFallbackForWWW = false;
 
 export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 29e28584ca8f..6de6388896c2 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -70,7 +70,6 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
-export const enableSymbolFallbackForWWW = false;
 
 export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index ac08f57552c4..1ac2ff4f2acf 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -70,7 +70,6 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
-export const enableSymbolFallbackForWWW = false;
 
 export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 9408f5d7adb1..8b3d4e230d43 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -68,7 +68,6 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
-export const enableSymbolFallbackForWWW = false;
 
 export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 990d1a4a9053..e414784563f3 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -72,7 +72,6 @@ export const enableServerContext = false;
 export const enableUseMutableSource = true;
 
 export const enableTransitionTracing = false;
-export const enableSymbolFallbackForWWW = false;
 
 export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 7698cde8231c..0d719ca3523d 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -70,7 +70,6 @@ export const enableServerContext = false;
 export const enableUseMutableSource = false;
 
 export const enableTransitionTracing = false;
-export const enableSymbolFallbackForWWW = false;
 
 export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index e6768ca0fdb0..6d2cd32d9f86 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -71,7 +71,6 @@ export const enableServerContext = false;
 export const enableUseMutableSource = true;
 
 export const enableTransitionTracing = false;
-export const enableSymbolFallbackForWWW = false;
 
 export const enableFloat = false;
 // Flow magic to verify the exports of this file match the original version.
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index dd6dcff47b30..520b102b7d3f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -28,7 +28,6 @@ export const consoleManagedByDevToolsDuringStrictMode = __VARIANT__;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = __VARIANT__;
 export const enableClientRenderFallbackOnTextMismatch = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
-export const enableSymbolFallbackForWWW = __VARIANT__;
 // Enable this flag to help with concurrent mode debugging.
 // It logs information to the console about React scheduling, rendering, and commit phases.
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 985c593c0303..2c59dde3a11b 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -110,7 +110,6 @@ export const enableUseMutableSource = true;
 
 export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
 
-export const enableSymbolFallbackForWWW = true;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 598a53666f60..87424982afc1 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -31,19 +31,9 @@ import {
   enableTransitionTracing,
   enableDebugTracing,
   enableLegacyHidden,
-  enableSymbolFallbackForWWW,
 } from './ReactFeatureFlags';
 
-let REACT_MODULE_REFERENCE;
-if (enableSymbolFallbackForWWW) {
-  if (typeof Symbol === 'function') {
-    REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-  } else {
-    REACT_MODULE_REFERENCE = 0;
-  }
-} else {
-  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-}
+const REACT_MODULE_REFERENCE: Symbol = Symbol.for('react.module.reference');
 
 export default function isValidElementType(type: mixed) {
   if (typeof type === 'string' || typeof type === 'function') {
diff --git a/scripts/jest/setupTests.www.js b/scripts/jest/setupTests.www.js
index e80448db4e07..c0058cb6e084 100644
--- a/scripts/jest/setupTests.www.js
+++ b/scripts/jest/setupTests.www.js
@@ -19,10 +19,6 @@ jest.mock('shared/ReactFeatureFlags', () => {
   return wwwFlags;
 });
 
-jest.mock('shared/ReactSymbols', () => {
-  return jest.requireActual('shared/ReactSymbols.www');
-});
-
 jest.mock('scheduler/src/SchedulerFeatureFlags', () => {
   const schedulerSrcPath = process.cwd() + '/packages/scheduler';
   jest.mock(
diff --git a/scripts/rollup/forks.js b/scripts/rollup/forks.js
index 5c3abebc5e49..d45c41a74268 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -138,17 +138,6 @@ const forks = Object.freeze({
     return null;
   },
 
-  './packages/shared/ReactSymbols.js': bundleType => {
-    switch (bundleType) {
-      case FB_WWW_DEV:
-      case FB_WWW_PROD:
-      case FB_WWW_PROFILING:
-        return './packages/shared/ReactSymbols.www.js';
-      default:
-        return './packages/shared/ReactSymbols.js';
-    }
-  },
-
   './packages/scheduler/index.js': (bundleType, entry, dependencies) => {
     switch (bundleType) {
       case UMD_DEV:

From 9ff738f53f228ea4343886a1e719ec2f1533d300 Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Fri, 26 Aug 2022 18:47:39 -0700
Subject: [PATCH 1529/1603] [devtools][easy] Fix flow type (#25147)

---
 packages/react-native-renderer/src/ReactNativeTypes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 8a9968c0a080..4d2fdcc6afc3 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -150,7 +150,7 @@ export type InspectorData = $ReadOnly<{|
 export type TouchedViewDataAtPoint = $ReadOnly<{|
   pointerY: number,
   touchedViewTag?: number,
-  closestInstance?: Object,
+  closestInstance?: mixed,
   frame: $ReadOnly<{|
     top: number,
     left: number,

From aa80a309b19d59832ffeb82dfb6235da0c93dd42 Mon Sep 17 00:00:00 2001
From: Robert Balicki <robertbalicki@fb.com>
Date: Tue, 30 Aug 2022 13:32:52 -0400
Subject: [PATCH 1530/1603] [react devtools][easy] Rename
 LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY to
 LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY (#25154)

* This more accurately describes what this constant does
---
 packages/react-devtools-shared/src/constants.js             | 2 +-
 .../src/devtools/views/Settings/SettingsContext.js          | 4 ++--
 packages/react-devtools-shared/src/utils.js                 | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index d7fafc082ce2..2406f4876d20 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -51,7 +51,7 @@ export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
 export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
   'React::DevTools::breakOnConsoleErrors';
 
-export const LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY =
+export const LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY =
   'React::DevTools::appendComponentStack';
 
 export const LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY =
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 3ee4ad0c86b9..d9c522ca689f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -20,7 +20,7 @@ import {
   COMPACT_LINE_HEIGHT,
   LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
   LOCAL_STORAGE_TRACE_UPDATES_ENABLED_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
   LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
@@ -117,7 +117,7 @@ function SettingsContextController({
     appendComponentStack,
     setAppendComponentStack,
   ] = useLocalStorageWithLog<boolean>(
-    LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+    LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
     true,
   );
   const [
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 77a75dd2c672..49179f60d58a 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -40,7 +40,7 @@ import {
   LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-  LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+  LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
   LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from './constants';
@@ -343,7 +343,7 @@ export function saveComponentFilters(
 
 export function getAppendComponentStack(): boolean {
   try {
-    const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY);
+    const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY);
     if (raw != null) {
       return JSON.parse(raw);
     }
@@ -353,7 +353,7 @@ export function getAppendComponentStack(): boolean {
 
 export function setAppendComponentStack(value: boolean): void {
   localStorageSetItem(
-    LOCAL_STORAGE_SHOULD_PATCH_CONSOLE_KEY,
+    LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
     JSON.stringify(value),
   );
 }

From a40ddf31246628423236ad1d8c6549409822e253 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Wed, 31 Aug 2022 13:50:04 -0400
Subject: [PATCH 1531/1603] Fix CI: run `yarn prettier-all` (#25163)

---
 packages/react-devtools-shared/src/utils.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 49179f60d58a..48c0ccd64892 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -343,7 +343,9 @@ export function saveComponentFilters(
 
 export function getAppendComponentStack(): boolean {
   try {
-    const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY);
+    const raw = localStorageGetItem(
+      LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
+    );
     if (raw != null) {
       return JSON.parse(raw);
     }

From 47867a772eec67f8cbefbc8575fb99f609c270f6 Mon Sep 17 00:00:00 2001
From: Robert Balicki <robertbalicki@fb.com>
Date: Wed, 31 Aug 2022 14:07:37 -0400
Subject: [PATCH 1532/1603] [react devtools][easy] Fix code highlighting in
 VSCode (#25155)

* Minor change that fixes code highlighting in VSCode in a particular file
---
 packages/react-devtools-shared/src/utils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 48c0ccd64892..5be41413e39b 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -108,8 +108,9 @@ export function getWrappedDisplayName(
   wrapperName: string,
   fallbackName?: string,
 ): string {
+  const displayName = (outerType: any).displayName;
   return (
-    (outerType: any).displayName ||
+    displayName ||
     `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
   );
 }

From 7e5322ccf2971dca90fa0cb9d7db91e60e877314 Mon Sep 17 00:00:00 2001
From: Robert Balicki <robertbalicki@fb.com>
Date: Wed, 31 Aug 2022 14:20:01 -0400
Subject: [PATCH 1533/1603] run prettier (#25164)

---
 packages/react-devtools-shared/src/utils.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 5be41413e39b..2c60fc124e00 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -110,8 +110,7 @@ export function getWrappedDisplayName(
 ): string {
   const displayName = (outerType: any).displayName;
   return (
-    displayName ||
-    `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
+    displayName || `${wrapperName}(${getDisplayName(innerType, fallbackName)})`
   );
 }
 

From 8d1b057ec1394cecdbc5a63b1c8b2cd443afa7b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 31 Aug 2022 18:40:17 -0400
Subject: [PATCH 1534/1603] [Flight] Minor error handling fixes (#25151)

* Fix error handling when the Flight client itself errors

* Serialize references to errors in the error priority queue

It doesn't make sense to emit references to future values at higher pri
than the value that they're referencing.

This ensures that we don't emit hard forward references to values that
don't yet exist.
---
 packages/react-client/src/ReactFlightClient.js         |  5 +++++
 .../src/ReactFlightDOMClient.js                        | 10 ++++++++--
 packages/react-server/src/ReactFlightServer.js         |  2 +-
 scripts/error-codes/codes.json                         |  3 ++-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 13fb0897e747..d6ae368abf12 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -312,6 +312,11 @@ export function parseModelString(
       } else {
         const id = parseInt(value.substring(1), 16);
         const chunk = getChunk(response, id);
+        if (chunk._status === PENDING) {
+          throw new Error(
+            "We didn't expect to see a forward reference. This is a bug in the React Server.",
+          );
+        }
         return readChunk(chunk);
       }
     }
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
index d8b5def41e04..32f8e794f4f7 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
@@ -35,12 +35,18 @@ function startReadingFromStream(
     }
     const buffer: Uint8Array = (value: any);
     processBinaryChunk(response, buffer);
-    return reader.read().then(progress, error);
+    return reader
+      .read()
+      .then(progress)
+      .catch(error);
   }
   function error(e) {
     reportGlobalError(response, e);
   }
-  reader.read().then(progress, error);
+  reader
+    .read()
+    .then(progress)
+    .catch(error);
 }
 
 function createFromReadableStream(
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 1577687c0040..2a994fc8f32f 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -902,7 +902,7 @@ function abortTask(task: Task, request: Request, errorId: number): void {
   // has a single value referencing the error.
   const ref = serializeByValueID(errorId);
   const processedChunk = processReferenceChunk(request, task.id, ref);
-  request.completedJSONChunks.push(processedChunk);
+  request.completedErrorChunks.push(processedChunk);
 }
 
 function flushCompletedChunks(
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 423b30de52dd..4817eadd9903 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -423,5 +423,6 @@
   "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"
+  "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."
 }

From 36c908a6c85f271358ef91936df6ded18bbc6789 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 31 Aug 2022 23:07:56 -0400
Subject: [PATCH 1535/1603] Don't use the Flight terminology in public error
 messages (#25166)

---
 packages/react-server/src/ReactFlightHooks.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index a9782c712aca..137e41cb25b0 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -26,7 +26,9 @@ export function resetHooksForRequest() {
 function readContext<T>(context: ReactServerContext<T>): T {
   if (__DEV__) {
     if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
-      console.error('Only ServerContext is supported in Flight');
+      console.error(
+        'Only createServerContext is supported in Server Components.',
+      );
     }
     if (currentCache === null) {
       console.error(

From 2c2d9a1df03f04d7aa7b37ec48d4e1e22b475dd8 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Thu, 1 Sep 2022 10:07:31 -0400
Subject: [PATCH 1536/1603] [eslint-plugin-react-hooks] only allow capitalized
 component names (#25162)

- update naming rules to disallow _component
- update eslint-plugin-react-hooks version
---
 ReactVersions.js                                  |  2 +-
 packages/eslint-plugin-react-hooks/CHANGELOG.md   |  6 ++++++
 .../__tests__/ESLintRulesOfHooks-test.js          | 15 +++++++++++++++
 packages/eslint-plugin-react-hooks/package.json   |  2 +-
 .../eslint-plugin-react-hooks/src/RulesOfHooks.js | 11 +++--------
 5 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/ReactVersions.js b/ReactVersions.js
index acb76f56c482..e8dffe7dee1b 100644
--- a/ReactVersions.js
+++ b/ReactVersions.js
@@ -25,7 +25,7 @@ const ReactVersion = '18.3.0';
 const nextChannelLabel = 'next';
 
 const stablePackages = {
-  'eslint-plugin-react-hooks': '4.7.0',
+  'eslint-plugin-react-hooks': '5.0.0',
   'jest-react': '0.15.0',
   react: ReactVersion,
   'react-art': ReactVersion,
diff --git a/packages/eslint-plugin-react-hooks/CHANGELOG.md b/packages/eslint-plugin-react-hooks/CHANGELOG.md
index 8a0882d24ec4..589574ede95c 100644
--- a/packages/eslint-plugin-react-hooks/CHANGELOG.md
+++ b/packages/eslint-plugin-react-hooks/CHANGELOG.md
@@ -1,3 +1,9 @@
+## 5.0.0 (next release)
+
+* **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)
+
+## 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))
diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
index 044cc58f40c4..ee220fa5dba3 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js
@@ -641,6 +641,21 @@ const tests = {
         functionError('useHookInsideNormalFunction', 'normalFunctionWithHook'),
       ],
     },
+    {
+      code: `
+        // These are neither functions nor hooks.
+        function _normalFunctionWithHook() {
+          useHookInsideNormalFunction();
+        }
+        function _useNotAHook() {
+          useHookInsideNormalFunction();
+        }
+      `,
+      errors: [
+        functionError('useHookInsideNormalFunction', '_normalFunctionWithHook'),
+        functionError('useHookInsideNormalFunction', '_useNotAHook'),
+      ],
+    },
     {
       code: `
         // Invalid because it's dangerous and might not warn otherwise.
diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 3f14cee36511..683d95dccf05 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",
diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
index 31d54e813ae6..1957d3ce199a 100644
--- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
+++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js
@@ -16,7 +16,7 @@
  */
 
 function isHookName(s) {
-  return /^use[A-Z0-9].*$/.test(s);
+  return /^use[A-Z0-9]/.test(s);
 }
 
 /**
@@ -42,16 +42,11 @@ function isHook(node) {
 
 /**
  * Checks if the node is a React component name. React component names must
- * always start with a non-lowercase letter. So `MyComponent` or `_MyComponent`
- * are valid component names for instance.
+ * always start with an uppercase letter.
  */
 
 function isComponentName(node) {
-  if (node.type === 'Identifier') {
-    return !/^[a-z]/.test(node.name);
-  } else {
-    return false;
-  }
+  return node.type === 'Identifier' && /^[A-Z]/.test(node.name);
 }
 
 function isReactFunction(node, functionName) {

From 2e7f422fea445c232c4723b97e0351aa93eeaa00 Mon Sep 17 00:00:00 2001
From: bubucuo <bubucuo@users.noreply.github.com>
Date: Thu, 1 Sep 2022 22:43:40 +0800
Subject: [PATCH 1537/1603] Refactor: its type is Container (#25153)

---
 packages/react-reconciler/src/ReactFiberRoot.new.js | 3 ++-
 packages/react-reconciler/src/ReactFiberRoot.old.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 892fe78ac1b1..beaa5f509bc9 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -15,6 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.new';
+import type {Container} from './ReactFiberHostConfig';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.new';
@@ -128,7 +129,7 @@ function FiberRootNode(
 }
 
 export function createFiberRoot(
-  containerInfo: any,
+  containerInfo: Container,
   tag: RootTag,
   hydrate: boolean,
   initialChildren: ReactNodeList,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index f7e16f0bbdcc..11221f86a8f4 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -15,6 +15,7 @@ import type {
 } from './ReactInternalTypes';
 import type {RootTag} from './ReactRootTags';
 import type {Cache} from './ReactFiberCacheComponent.old';
+import type {Container} from './ReactFiberHostConfig';
 
 import {noTimeout, supportsHydration} from './ReactFiberHostConfig';
 import {createHostRootFiber} from './ReactFiber.old';
@@ -128,7 +129,7 @@ function FiberRootNode(
 }
 
 export function createFiberRoot(
-  containerInfo: any,
+  containerInfo: Container,
   tag: RootTag,
   hydrate: boolean,
   initialChildren: ReactNodeList,

From f0efa1164b7ca8523b081223954d05c88e92053b Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Thu, 1 Sep 2022 12:55:59 -0400
Subject: [PATCH 1538/1603] [flow] remove custom suppress comment config
 (#25170)

---
 packages/react-dom/src/client/ReactDOM.js            |  4 ++--
 packages/react-dom/src/client/ReactDOMComponent.js   |  2 +-
 .../src/server/ReactDOMServerFormatConfig.js         |  4 ++--
 packages/react-dom/src/shared/DOMProperty.js         |  2 +-
 packages/react-native-renderer/src/ReactFabric.js    | 10 +++++-----
 .../react-native-renderer/src/ReactNativeRenderer.js |  2 +-
 packages/react-reconciler/src/ReactFiberAct.new.js   |  6 +++---
 packages/react-reconciler/src/ReactFiberAct.old.js   |  6 +++---
 packages/react-refresh/src/ReactFreshRuntime.js      | 12 ++++++------
 scripts/flow/config/flowconfig                       | 10 ----------
 10 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 1c664588407b..406cda4f266a 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -82,11 +82,11 @@ setAttemptHydrationAtPriority(runWithPriority);
 if (__DEV__) {
   if (
     typeof Map !== 'function' ||
-    // $FlowIssue Flow incorrectly thinks Map has no prototype
+    // $FlowFixMe Flow incorrectly thinks Map has no prototype
     Map.prototype == null ||
     typeof Map.prototype.forEach !== 'function' ||
     typeof Set !== 'function' ||
-    // $FlowIssue Flow incorrectly thinks Set has no prototype
+    // $FlowFixMe Flow incorrectly thinks Set has no prototype
     Set.prototype == null ||
     typeof Set.prototype.clear !== 'function' ||
     typeof Set.prototype.forEach !== 'function'
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index 8b48bae61a49..defc3d93fc03 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -420,7 +420,7 @@ export function createElement(
       const firstChild = ((div.firstChild: any): HTMLScriptElement);
       domElement = div.removeChild(firstChild);
     } else if (typeof props.is === 'string') {
-      // $FlowIssue `createElement` should be updated for Web Components
+      // $FlowFixMe `createElement` should be updated for Web Components
       domElement = ownerDocument.createElement(type, {is: props.is});
     } else {
       // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug.
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index 308e35a20b3a..c30d9673265c 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -477,7 +477,7 @@ function pushAttribute(
     // shouldRemoveAttribute
     switch (typeof value) {
       case 'function':
-      // $FlowIssue symbol is perfectly valid here
+      // $FlowFixMe symbol is perfectly valid here
       case 'symbol': // eslint-disable-line
         return;
       case 'boolean': {
@@ -586,7 +586,7 @@ function pushAttribute(
     // shouldRemoveAttribute
     switch (typeof value) {
       case 'function':
-      // $FlowIssue symbol is perfectly valid here
+      // $FlowFixMe symbol is perfectly valid here
       case 'symbol': // eslint-disable-line
         return;
       case 'boolean': {
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index b5540debb71d..f1d4ec132ea0 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -123,7 +123,7 @@ export function shouldRemoveAttributeWithWarning(
   }
   switch (typeof value) {
     case 'function':
-    // $FlowIssue symbol is perfectly valid here
+    // $FlowFixMe symbol is perfectly valid here
     case 'symbol': // eslint-disable-line
       return true;
     case 'boolean': {
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index e08a98653fb6..1010b4a4b84a 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -69,14 +69,14 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
   if (componentOrHandle == null) {
     return null;
   }
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle._nativeTag) {
-    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+    // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle;
   }
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   if (componentOrHandle.canonical && componentOrHandle.canonical._nativeTag) {
-    // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+    // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
     return componentOrHandle.canonical;
   }
   let hostInstance;
@@ -226,7 +226,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index e751195dda00..046c4f4b9373 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -222,7 +222,7 @@ function render(
   }
   updateContainer(element, root, null, callback);
 
-  // $FlowIssue Flow has hardcoded values for React DOM that don't work with RN
+  // $FlowFixMe Flow has hardcoded values for React DOM that don't work with RN
   return getPublicRootInstance(root);
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
index 27102b5e9253..bad7fd3dc52f 100644
--- a/packages/react-reconciler/src/ReactFiberAct.new.js
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -23,12 +23,12 @@ export function isLegacyActEnvironment(fiber: Fiber) {
     // to false.
 
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // $FlowExpectedError - Flow doesn't know about jest
+    // $FlowFixMe - Flow doesn't know about jest
     const jestIsDefined = typeof jest !== 'undefined';
     return (
       warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
@@ -40,7 +40,7 @@ export function isLegacyActEnvironment(fiber: Fiber) {
 export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
index bcb4ad707a1b..6358ab66a348 100644
--- a/packages/react-reconciler/src/ReactFiberAct.old.js
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -23,12 +23,12 @@ export function isLegacyActEnvironment(fiber: Fiber) {
     // to false.
 
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
 
-    // $FlowExpectedError - Flow doesn't know about jest
+    // $FlowFixMe - Flow doesn't know about jest
     const jestIsDefined = typeof jest !== 'undefined';
     return (
       warnsIfNotActing && jestIsDefined && isReactActEnvironmentGlobal !== false
@@ -40,7 +40,7 @@ export function isLegacyActEnvironment(fiber: Fiber) {
 export function isConcurrentActEnvironment() {
   if (__DEV__) {
     const isReactActEnvironmentGlobal =
-      // $FlowExpectedError – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
+      // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global
       typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined'
         ? IS_REACT_ACT_ENVIRONMENT
         : undefined;
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index 1ae5acfdfb53..d50d7ce907df 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -47,14 +47,14 @@ const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
 // We never remove these associations.
 // It's OK to reference families, but use WeakMap/Set for types.
 const allFamiliesByID: Map<string, Family> = new Map();
-const allFamiliesByType: // $FlowIssue
+const allFamiliesByType: // $FlowFixMe
 WeakMap<any, Family> | Map<any, Family> = new PossiblyWeakMap();
-const allSignaturesByType: // $FlowIssue
+const allSignaturesByType: // $FlowFixMe
 WeakMap<any, Signature> | Map<any, Signature> = new PossiblyWeakMap();
 // This WeakMap is read by React, so we only put families
 // that have actually been edited here. This keeps checks fast.
-// $FlowIssue
-const updatedFamiliesByType: // $FlowIssue
+// $FlowFixMe
+const updatedFamiliesByType: // $FlowFixMe
 WeakMap<any, Family> | Map<any, Family> = new PossiblyWeakMap();
 
 // This is cleared on every performReactRefresh() call.
@@ -74,8 +74,8 @@ 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.
-// $FlowIssue
-const rootElements: WeakMap<any, ReactNodeList> | null = // $FlowIssue
+// $FlowFixMe
+const rootElements: WeakMap<any, ReactNodeList> | null = // $FlowFixMe
   typeof WeakMap === 'function' ? new WeakMap() : null;
 
 let isPerformingRefresh = false;
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index c0647c95468a..9c10ba265dce 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -49,15 +49,5 @@ esproposal.optional_chaining=enable
 
 munge_underscores=false
 
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-suppress_type=$FlowExpectedError
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
 [version]
 ^0.97.0

From 81b79c7c2966d08eb74954805394fe6cb290b796 Mon Sep 17 00:00:00 2001
From: Brandon Chan <70081031+Bchan1999@users.noreply.github.com>
Date: Tue, 6 Sep 2022 09:06:18 -0600
Subject: [PATCH 1539/1603] Added the word 'own' to the README file for design
 consistency (#25185)

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d543ce96788e..6cbc3730a0eb 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@
 React is a JavaScript library for building user interfaces.
 
 * **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 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.
+* **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 and power mobile apps using [React Native](https://reactnative.dev/).
 
 [Learn how to use React in your project](https://reactjs.org/docs/getting-started.html).

From a9dc73cfd4db480b4cadf8624351004fe96f5a12 Mon Sep 17 00:00:00 2001
From: Tim Neutkens <tim@timneutkens.nl>
Date: Tue, 6 Sep 2022 19:03:27 +0200
Subject: [PATCH 1540/1603] Handle info, group, and groupCollapsed in Strict
 Mode logging (#25172)

* Handle info, group, and groupCollapsed in Strict Mode logging

While working on the new Next.js router which heavily relies on useReducer I noticed that `group` and `groupCollapsed` which both take labels were showing as-is in the console for the second render/dispatch in Strict Mode logs. While looking at the code I found that `info` was also not instrumented.

I've added additional handling for:
- `info`
- `group`
- `groupCollapsed`

* Remove console.log

* Fix tests
---
 .../src/__tests__/console-test.js             | 65 +++++++++++++++++++
 .../src/backend/console.js                    | 10 ++-
 packages/react-devtools-shared/src/hook.js    | 10 ++-
 3 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/console-test.js b/packages/react-devtools-shared/src/__tests__/console-test.js
index 40eb388a955c..407150b5e39b 100644
--- a/packages/react-devtools-shared/src/__tests__/console-test.js
+++ b/packages/react-devtools-shared/src/__tests__/console-test.js
@@ -16,6 +16,8 @@ let fakeConsole;
 let legacyRender;
 let mockError;
 let mockInfo;
+let mockGroup;
+let mockGroupCollapsed;
 let mockLog;
 let mockWarn;
 let patchConsole;
@@ -25,6 +27,7 @@ let rendererID;
 describe('console', () => {
   beforeEach(() => {
     const Console = require('react-devtools-shared/src/backend/console');
+
     patchConsole = Console.patch;
     unpatchConsole = Console.unpatch;
 
@@ -33,6 +36,8 @@ describe('console', () => {
     // because Jest itself has hooks into it as does our test env setup.
     mockError = jest.fn();
     mockInfo = jest.fn();
+    mockGroup = jest.fn();
+    mockGroupCollapsed = jest.fn();
     mockLog = jest.fn();
     mockWarn = jest.fn();
     fakeConsole = {
@@ -40,6 +45,8 @@ describe('console', () => {
       info: mockInfo,
       log: mockLog,
       warn: mockWarn,
+      group: mockGroup,
+      groupCollapsed: mockGroupCollapsed,
     };
 
     Console.dangerous_setTargetConsoleForTesting(fakeConsole);
@@ -69,6 +76,8 @@ describe('console', () => {
     expect(fakeConsole.info).toBe(mockInfo);
     expect(fakeConsole.log).toBe(mockLog);
     expect(fakeConsole.warn).not.toBe(mockWarn);
+    expect(fakeConsole.group).toBe(mockGroup);
+    expect(fakeConsole.groupCollapsed).toBe(mockGroupCollapsed);
   });
 
   // @reactVersion >=18.0
@@ -491,6 +500,9 @@ describe('console', () => {
       fakeConsole.log('log');
       fakeConsole.warn('warn');
       fakeConsole.error('error');
+      fakeConsole.info('info');
+      fakeConsole.group('group');
+      fakeConsole.groupCollapsed('groupCollapsed');
       return <div />;
     }
 
@@ -528,6 +540,36 @@ describe('console', () => {
       `color: ${process.env.DARK_MODE_DIMMED_ERROR_COLOR}`,
       'error',
     ]);
+
+    expect(mockInfo).toHaveBeenCalledTimes(2);
+    expect(mockInfo.mock.calls[0]).toHaveLength(1);
+    expect(mockInfo.mock.calls[0][0]).toBe('info');
+    expect(mockInfo.mock.calls[1]).toHaveLength(3);
+    expect(mockInfo.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'info',
+    ]);
+
+    expect(mockGroup).toHaveBeenCalledTimes(2);
+    expect(mockGroup.mock.calls[0]).toHaveLength(1);
+    expect(mockGroup.mock.calls[0][0]).toBe('group');
+    expect(mockGroup.mock.calls[1]).toHaveLength(3);
+    expect(mockGroup.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'group',
+    ]);
+
+    expect(mockGroupCollapsed).toHaveBeenCalledTimes(2);
+    expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
+    expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
+    expect(mockGroupCollapsed.mock.calls[1]).toHaveLength(3);
+    expect(mockGroupCollapsed.mock.calls[1]).toEqual([
+      '%c%s',
+      `color: ${process.env.DARK_MODE_DIMMED_LOG_COLOR}`,
+      'groupCollapsed',
+    ]);
   });
 
   it('should not double log if hideConsoleLogsInStrictMode is enabled in Strict mode', () => {
@@ -538,9 +580,16 @@ describe('console', () => {
     const root = ReactDOMClient.createRoot(container);
 
     function App() {
+      console.log(
+        'CALL',
+        global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__,
+      );
       fakeConsole.log('log');
       fakeConsole.warn('warn');
       fakeConsole.error('error');
+      fakeConsole.info('info');
+      fakeConsole.group('group');
+      fakeConsole.groupCollapsed('groupCollapsed');
       return <div />;
     }
 
@@ -563,6 +612,18 @@ describe('console', () => {
     expect(mockError).toHaveBeenCalledTimes(1);
     expect(mockError.mock.calls[0]).toHaveLength(1);
     expect(mockError.mock.calls[0][0]).toBe('error');
+
+    expect(mockInfo).toHaveBeenCalledTimes(1);
+    expect(mockInfo.mock.calls[0]).toHaveLength(1);
+    expect(mockInfo.mock.calls[0][0]).toBe('info');
+
+    expect(mockGroup).toHaveBeenCalledTimes(1);
+    expect(mockGroup.mock.calls[0]).toHaveLength(1);
+    expect(mockGroup.mock.calls[0][0]).toBe('group');
+
+    expect(mockGroupCollapsed).toHaveBeenCalledTimes(1);
+    expect(mockGroupCollapsed.mock.calls[0]).toHaveLength(1);
+    expect(mockGroupCollapsed.mock.calls[0][0]).toBe('groupCollapsed');
   });
 
   it('should double log in Strict mode initial render for extension', () => {
@@ -734,6 +795,8 @@ describe('console error', () => {
     // because Jest itself has hooks into it as does our test env setup.
     mockError = jest.fn();
     mockInfo = jest.fn();
+    mockGroup = jest.fn();
+    mockGroupCollapsed = jest.fn();
     mockLog = jest.fn();
     mockWarn = jest.fn();
     fakeConsole = {
@@ -741,6 +804,8 @@ describe('console error', () => {
       info: mockInfo,
       log: mockLog,
       warn: mockWarn,
+      group: mockGroup,
+      groupCollapsed: mockGroupCollapsed,
     };
 
     Console.dangerous_setTargetConsoleForTesting(fakeConsole);
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 5a85b68deac3..ee802f8ea47a 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -301,7 +301,15 @@ let unpatchForStrictModeFn: null | (() => void) = null;
 // NOTE: KEEP IN SYNC with src/hook.js:patchConsoleForInitialRenderInStrictMode
 export function patchForStrictMode() {
   if (consoleManagedByDevToolsDuringStrictMode) {
-    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+    const overrideConsoleMethods = [
+      'error',
+      'group',
+      'groupCollapsed',
+      'info',
+      'log',
+      'trace',
+      'warn',
+    ];
 
     if (unpatchForStrictModeFn !== null) {
       // Don't patch twice.
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 8adbb7534a25..29cdea1e2b0b 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -228,7 +228,15 @@ export function installHook(target: any): DevToolsHook | null {
     hideConsoleLogsInStrictMode: boolean,
     browserTheme: BrowserTheme,
   }) {
-    const overrideConsoleMethods = ['error', 'trace', 'warn', 'log'];
+    const overrideConsoleMethods = [
+      'error',
+      'group',
+      'groupCollapsed',
+      'info',
+      'log',
+      'trace',
+      'warn',
+    ];
 
     if (unpatchFn !== null) {
       // Don't patch twice.

From bfb65681e7d77ba9bd79f7f95ac57930542b57c1 Mon Sep 17 00:00:00 2001
From: mofeiZ <34200447+mofeiZ@users.noreply.github.com>
Date: Wed, 7 Sep 2022 13:09:42 -0400
Subject: [PATCH 1541/1603] experimental_use(context)(#25202)

---
 .../src/ReactFiberHooks.new.js                | 113 +++++++++---------
 .../src/ReactFiberHooks.old.js                | 113 +++++++++---------
 .../src/__tests__/ReactWakeable-test.js       |  24 ++++
 packages/shared/ReactTypes.js                 |   2 +-
 4 files changed, 141 insertions(+), 111 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 2c06f94d5811..87a65254b40f 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -36,6 +36,7 @@ import {
   enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -714,68 +715,70 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
 }
 
 function use<T>(usable: Usable<T>): T {
-  if (
-    usable !== null &&
-    typeof usable === 'object' &&
-    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;
-
-    switch (thenable.status) {
-      case 'fulfilled': {
-        const fulfilledValue: T = thenable.value;
-        return fulfilledValue;
-      }
-      case 'rejected': {
-        const rejectedError = thenable.reason;
-        throw rejectedError;
-      }
-      default: {
-        const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
-          index,
-        );
-        if (prevThenableAtIndex !== null) {
-          switch (prevThenableAtIndex.status) {
-            case 'fulfilled': {
-              const fulfilledValue: T = prevThenableAtIndex.value;
-              return fulfilledValue;
-            }
-            case 'rejected': {
-              const rejectedError: mixed = prevThenableAtIndex.reason;
-              throw rejectedError;
-            }
-            default: {
-              // The thenable still hasn't resolved. Suspend with the same
-              // thenable as last time to avoid redundant listeners.
-              throw prevThenableAtIndex;
+  if (usable !== null && typeof usable === 'object') {
+    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;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
             }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            trackUsedThenable(thenable, index);
+
+            // Suspend.
+            // TODO: 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.
+            throw thenable;
           }
-        } else {
-          // This is the first time something has been used at this index.
-          // Stash the thenable at the current index so we can reuse it during
-          // the next attempt.
-          trackUsedThenable(thenable, index);
-
-          // Suspend.
-          // TODO: 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.
-          throw thenable;
         }
       }
+    } else if (
+      usable.$$typeof != null &&
+      usable.$$typeof === REACT_CONTEXT_TYPE
+    ) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
     }
   }
 
-  // TODO: Add support for Context
-
   // eslint-disable-next-line react-internal/safe-string-coercion
   throw new Error('An unsupported type was passed to use(): ' + String(usable));
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index e258a9f824e2..fd081fe5b0a6 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -36,6 +36,7 @@ import {
   enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
+import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
 
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -714,68 +715,70 @@ function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
 }
 
 function use<T>(usable: Usable<T>): T {
-  if (
-    usable !== null &&
-    typeof usable === 'object' &&
-    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;
-
-    switch (thenable.status) {
-      case 'fulfilled': {
-        const fulfilledValue: T = thenable.value;
-        return fulfilledValue;
-      }
-      case 'rejected': {
-        const rejectedError = thenable.reason;
-        throw rejectedError;
-      }
-      default: {
-        const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
-          index,
-        );
-        if (prevThenableAtIndex !== null) {
-          switch (prevThenableAtIndex.status) {
-            case 'fulfilled': {
-              const fulfilledValue: T = prevThenableAtIndex.value;
-              return fulfilledValue;
-            }
-            case 'rejected': {
-              const rejectedError: mixed = prevThenableAtIndex.reason;
-              throw rejectedError;
-            }
-            default: {
-              // The thenable still hasn't resolved. Suspend with the same
-              // thenable as last time to avoid redundant listeners.
-              throw prevThenableAtIndex;
+  if (usable !== null && typeof usable === 'object') {
+    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;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
             }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            trackUsedThenable(thenable, index);
+
+            // Suspend.
+            // TODO: 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.
+            throw thenable;
           }
-        } else {
-          // This is the first time something has been used at this index.
-          // Stash the thenable at the current index so we can reuse it during
-          // the next attempt.
-          trackUsedThenable(thenable, index);
-
-          // Suspend.
-          // TODO: 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.
-          throw thenable;
         }
       }
+    } else if (
+      usable.$$typeof != null &&
+      usable.$$typeof === REACT_CONTEXT_TYPE
+    ) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
     }
   }
 
-  // TODO: Add support for Context
-
   // eslint-disable-next-line react-internal/safe-string-coercion
   throw new Error('An unsupported type was passed to use(): ' + String(usable));
 }
diff --git a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
index 7d946e5cbd03..c0ec87f26641 100644
--- a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
@@ -315,4 +315,28 @@ describe('ReactWakeable', () => {
     ]);
     expect(root).toMatchRenderedOutput('Caught an error: Oops!');
   });
+
+  // @gate enableUseHook
+  test('basic use(context)', () => {
+    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 />);
+    expect(Scheduler).toFlushWithoutYielding();
+    expect(root).toMatchRenderedOutput('AB');
+  });
 });
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 7dacd489e4b8..6e829a3a9f68 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -214,4 +214,4 @@ export type StartTransitionOptions = {
 };
 
 // TODO: Add Context support
-export type Usable<T> = Thenable<T>;
+export type Usable<T> = Thenable<T> | ReactContext<T>;

From c80e54116e2f9c550472116181a5c66ad97adfbf Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Wed, 7 Sep 2022 10:21:30 -0700
Subject: [PATCH 1542/1603] [DevTools][Bugfix] Don't hide fragment if it has a
 key (#25197)

resolves #25187

---

We shouldn't hide fragments that have a key because this is important information that the user might want in the future.
---
 packages/react-devtools-shared/src/backend/renderer.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index df1c5d53e077..3a893060da0a 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -468,8 +468,9 @@ export function getInternalReactConstants(
         return type;
       case HostPortal:
       case HostText:
-      case Fragment:
         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.
@@ -981,7 +982,7 @@ export function attach(
 
   // NOTICE Keep in sync with get*ForFiber methods
   function shouldFilterFiber(fiber: Fiber): boolean {
-    const {_debugSource, tag, type} = fiber;
+    const {_debugSource, tag, type, key} = fiber;
 
     switch (tag) {
       case DehydratedSuspenseComponent:
@@ -993,13 +994,14 @@ export function attach(
         return true;
       case HostPortal:
       case HostText:
-      case Fragment:
       case LegacyHiddenComponent:
       case OffscreenComponent:
         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);
 

From 7028ce74561b1585de401f8a70ce79b98d63849d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 7 Sep 2022 22:27:04 -0400
Subject: [PATCH 1543/1603] experimental_use(promise) for Server Components
 (#25207)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow up to #25084. Implements experimental_use(promise) API in
the Server Components runtime (Flight).

The implementation is much simpler than in Fiber because there is no
state. Even the "state" added in this PR — to track the result of each
promise across attempts — is reset as soon as a component
successfully renders without suspending.

There are also fewer caveats around neglecting to cache a promise
because the state of the promises is preserved even if we switch to a
different task.

Server Components is the primary runtime where this API is intended to
be used.

The last runtime where we need to implement this is the server renderer
(Fizz).
---
 .../src/ReactFiberWakeable.new.js             |   4 +
 .../src/ReactFiberWakeable.old.js             |   4 +
 .../__tests__/ReactFlightDOMBrowser-test.js   | 147 ++++++++++++++++++
 packages/react-server/src/ReactFlightHooks.js |  92 ++++++++++-
 .../react-server/src/ReactFlightServer.js     |  70 ++++++++-
 .../react-server/src/ReactFlightWakeable.js   | 111 +++++++++++++
 .../src/ReactSharedSubset.experimental.js     |   1 +
 7 files changed, 425 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-server/src/ReactFlightWakeable.js

diff --git a/packages/react-reconciler/src/ReactFiberWakeable.new.js b/packages/react-reconciler/src/ReactFiberWakeable.new.js
index 83bfad32c5cf..e494aa34fc1f 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.new.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.new.js
@@ -18,6 +18,7 @@ import type {
 let suspendedThenable: Thenable<mixed> | null = null;
 let adHocSuspendCount: number = 0;
 
+// TODO: Sparse arrays are bad for performance.
 let usedThenables: Array<Thenable<any> | void> | null = null;
 let lastUsedThenable: Thenable<any> | null = null;
 
@@ -74,6 +75,9 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       suspendedThenable = null;
       break;
     default: {
+      // TODO: 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.
       const pendingThenable: PendingThenable<mixed> = (thenable: any);
       pendingThenable.status = 'pending';
       pendingThenable.then(
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.old.js b/packages/react-reconciler/src/ReactFiberWakeable.old.js
index 83bfad32c5cf..e494aa34fc1f 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.old.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.old.js
@@ -18,6 +18,7 @@ import type {
 let suspendedThenable: Thenable<mixed> | null = null;
 let adHocSuspendCount: number = 0;
 
+// TODO: Sparse arrays are bad for performance.
 let usedThenables: Array<Thenable<any> | void> | null = null;
 let lastUsedThenable: Thenable<any> | null = null;
 
@@ -74,6 +75,9 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       suspendedThenable = null;
       break;
     default: {
+      // TODO: 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.
       const pendingThenable: PendingThenable<mixed> = (thenable: any);
       pendingThenable.status = 'pending';
       pendingThenable.then(
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 43573af1df14..1b59c72ab3e4 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -24,6 +24,7 @@ let ReactDOMServer;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let Suspense;
+let use;
 
 describe('ReactFlightDOMBrowser', () => {
   beforeEach(() => {
@@ -39,6 +40,7 @@ describe('ReactFlightDOMBrowser', () => {
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.browser.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
     Suspense = React.Suspense;
+    use = React.experimental_use;
   });
 
   async function waitForSuspense(fn) {
@@ -562,4 +564,149 @@ describe('ReactFlightDOMBrowser', () => {
 
     expect(reportedErrors).toEqual(['for reasons']);
   });
+
+  // @gate enableUseHook
+  it('basic use(promise)', async () => {
+    function Server() {
+      return (
+        use(Promise.resolve('A')) +
+        use(Promise.resolve('B')) +
+        use(Promise.resolve('C'))
+      );
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Server />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Client />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('ABC');
+  });
+
+  // @gate enableUseHook
+  it('use(promise) in multiple components', async () => {
+    function Child({prefix}) {
+      return prefix + use(Promise.resolve('C')) + use(Promise.resolve('D'));
+    }
+
+    function Parent() {
+      return (
+        <Child prefix={use(Promise.resolve('A')) + use(Promise.resolve('B'))} />
+      );
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Parent />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <Suspense fallback="Loading...">
+          <Client />
+        </Suspense>,
+      );
+    });
+    expect(container.innerHTML).toBe('ABCD');
+  });
+
+  // @gate enableUseHook
+  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 use(promiseA) + use(promiseB) + use(promiseC);
+    }
+
+    const reportedErrors = [];
+    const stream = ReactServerDOMWriter.renderToReadableStream(
+      <Server />,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    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 Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Client />
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('Oops!');
+    expect(reportedErrors.length).toBe(1);
+    expect(reportedErrors[0].message).toBe('Oops!');
+  });
+
+  // @gate enableUseHook
+  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 use(thenable);
+    }
+
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Server />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      root.render(<Client />);
+    });
+    expect(container.innerHTML).toBe('Hi');
+  });
 });
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index 137e41cb25b0..2644898f1cf5 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -9,11 +9,20 @@
 
 import type {Dispatcher as DispatcherType} from 'react-reconciler/src/ReactInternalTypes';
 import type {Request} from './ReactFlightServer';
-import type {ReactServerContext} from 'shared/ReactTypes';
+import type {ReactServerContext, Thenable, Usable} from 'shared/ReactTypes';
+import type {ThenableState} from './ReactFlightWakeable';
 import {REACT_SERVER_CONTEXT_TYPE} from 'shared/ReactSymbols';
 import {readContext as readContextImpl} from './ReactFlightNewContext';
+import {enableUseHook} from 'shared/ReactFeatureFlags';
+import {
+  getPreviouslyUsedThenableAtIndex,
+  createThenableState,
+  trackUsedThenable,
+} from './ReactFlightWakeable';
 
 let currentRequest = null;
+let thenableIndexCounter = 0;
+let thenableState = null;
 
 export function prepareToUseHooksForRequest(request: Request) {
   currentRequest = request;
@@ -23,6 +32,17 @@ export function resetHooksForRequest() {
   currentRequest = null;
 }
 
+export function prepareToUseHooksForComponent(
+  prevThenableState: ThenableState | null,
+) {
+  thenableIndexCounter = 0;
+  thenableState = prevThenableState;
+}
+
+export function getThenableStateAfterSuspending() {
+  return thenableState;
+}
+
 function readContext<T>(context: ReactServerContext<T>): T {
   if (__DEV__) {
     if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) {
@@ -83,6 +103,7 @@ export const Dispatcher: DispatcherType = {
   useMemoCache(size: number): Array<any> {
     return new Array(size);
   },
+  use: enableUseHook ? use : (unsupportedHook: any),
 };
 
 function unsupportedHook(): void {
@@ -116,3 +137,72 @@ function useId(): string {
   // 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') {
+    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;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            thenableState,
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
+            }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            if (thenableState === null) {
+              thenableState = createThenableState();
+            }
+            trackUsedThenable(thenableState, thenable, index);
+
+            // Suspend.
+            // TODO: 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.
+            throw thenable;
+          }
+        }
+      }
+    } else {
+      // TODO: Add support for Context
+    }
+  }
+
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
+}
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 2a994fc8f32f..7c6801e37875 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -16,9 +16,11 @@ import type {
   ModuleKey,
 } from './ReactFlightServerConfig';
 import type {ContextSnapshot} from './ReactFlightNewContext';
+import type {ThenableState} from './ReactFlightWakeable';
 import type {
   ReactProviderType,
   ServerContextJSONValue,
+  Wakeable,
 } from 'shared/ReactTypes';
 
 import {
@@ -44,6 +46,8 @@ import {
   Dispatcher,
   getCurrentCache,
   prepareToUseHooksForRequest,
+  prepareToUseHooksForComponent,
+  getThenableStateAfterSuspending,
   resetHooksForRequest,
   setCurrentCache,
 } from './ReactFlightHooks';
@@ -54,6 +58,7 @@ import {
   getActiveContext,
   rootContextSnapshot,
 } from './ReactFlightNewContext';
+import {trackSuspendedWakeable} from './ReactFlightWakeable';
 
 import {
   REACT_ELEMENT_TYPE,
@@ -98,6 +103,7 @@ type Task = {
   model: ReactModel,
   ping: () => void,
   context: ContextSnapshot,
+  thenableState: ThenableState | null,
 };
 
 export type Request = {
@@ -185,6 +191,7 @@ function attemptResolveElement(
   key: null | React$Key,
   ref: mixed,
   props: any,
+  prevThenableState: ThenableState | null,
 ): ReactModel {
   if (ref !== null && ref !== undefined) {
     // When the ref moves to the regular props object this will implicitly
@@ -200,6 +207,7 @@ function attemptResolveElement(
       return [REACT_ELEMENT_TYPE, type, key, props];
     }
     // This is a server-side component.
+    prepareToUseHooksForComponent(prevThenableState);
     return type(props);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
@@ -225,14 +233,27 @@ function attemptResolveElement(
         const payload = type._payload;
         const init = type._init;
         const wrappedType = init(payload);
-        return attemptResolveElement(wrappedType, key, ref, props);
+        return attemptResolveElement(
+          wrappedType,
+          key,
+          ref,
+          props,
+          prevThenableState,
+        );
       }
       case REACT_FORWARD_REF_TYPE: {
         const render = type.render;
+        prepareToUseHooksForComponent(prevThenableState);
         return render(props, undefined);
       }
       case REACT_MEMO_TYPE: {
-        return attemptResolveElement(type.type, key, ref, props);
+        return attemptResolveElement(
+          type.type,
+          key,
+          ref,
+          props,
+          prevThenableState,
+        );
       }
       case REACT_PROVIDER_TYPE: {
         pushProvider(type._context, props.value);
@@ -286,6 +307,7 @@ function createTask(
     model,
     context,
     ping: () => pingTask(request, task),
+    thenableState: null,
   };
   abortSet.add(task);
   return task;
@@ -569,6 +591,7 @@ export function resolveModelToJSON(
             element.key,
             element.ref,
             element.props,
+            null,
           );
           break;
         }
@@ -591,6 +614,11 @@ export function resolveModelToJSON(
         );
         const ping = newTask.ping;
         x.then(ping, ping);
+
+        const wakeable: Wakeable = x;
+        trackSuspendedWakeable(wakeable);
+        newTask.thenableState = getThenableStateAfterSuspending();
+
         return serializeByRefID(newTask.id);
       } else {
         logRecoverableError(request, x);
@@ -828,16 +856,22 @@ function retryTask(request: Request, task: Task): void {
     // We completed this by other means before we had a chance to retry it.
     return;
   }
+
   switchContext(task.context);
   try {
     let value = task.model;
-    while (
+    if (
       typeof value === 'object' &&
       value !== null &&
       (value: any).$$typeof === REACT_ELEMENT_TYPE
     ) {
       // TODO: Concatenate keys of parents onto children.
       const element: React$Element<any> = (value: any);
+
+      // When retrying a component, reuse the thenableState from the
+      // previous attempt.
+      const prevThenableState = task.thenableState;
+
       // Attempt to render the server component.
       // Doing this here lets us reuse this same task if the next component
       // also suspends.
@@ -847,8 +881,34 @@ function retryTask(request: Request, task: Task): void {
         element.key,
         element.ref,
         element.props,
+        prevThenableState,
       );
+
+      // Successfully finished this component. We're going to keep rendering
+      // using the same task, but we reset its thenable state before continuing.
+      task.thenableState = null;
+
+      // Keep rendering and reuse the same task. This inner loop is separate
+      // from the render above because we don't need to reset the thenable state
+      // until the next time something suspends and retries.
+      while (
+        typeof value === 'object' &&
+        value !== null &&
+        (value: any).$$typeof === REACT_ELEMENT_TYPE
+      ) {
+        // TODO: Concatenate keys of parents onto children.
+        const nextElement: React$Element<any> = (value: any);
+        task.model = value;
+        value = attemptResolveElement(
+          nextElement.type,
+          nextElement.key,
+          nextElement.ref,
+          nextElement.props,
+          null,
+        );
+      }
     }
+
     const processedChunk = processModelChunk(request, task.id, value);
     request.completedJSONChunks.push(processedChunk);
     request.abortableTasks.delete(task);
@@ -858,6 +918,10 @@ function retryTask(request: Request, task: Task): void {
       // Something suspended again, let's pick it back up later.
       const ping = task.ping;
       x.then(ping, ping);
+
+      const wakeable: Wakeable = x;
+      trackSuspendedWakeable(wakeable);
+      task.thenableState = getThenableStateAfterSuspending();
       return;
     } else {
       request.abortableTasks.delete(task);
diff --git a/packages/react-server/src/ReactFlightWakeable.js b/packages/react-server/src/ReactFlightWakeable.js
new file mode 100644
index 000000000000..c4d2e67d863b
--- /dev/null
+++ b/packages/react-server/src/ReactFlightWakeable.js
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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
+ */
+
+// Corresponds to ReactFiberWakeable module. Generally, changes to one module
+// should be reflected in the other.
+
+// TODO: Rename this module and the corresponding Fiber one to "Thenable"
+// instead of "Wakeable". Or some other more appropriate name.
+
+import type {
+  Wakeable,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+// TODO: Sparse arrays are bad for performance.
+export opaque type ThenableState = Array<Thenable<any> | void>;
+
+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 trackSuspendedWakeable(wakeable: Wakeable) {
+  // If this wakeable isn't already a thenable, turn it into one now. Then,
+  // when we resume the work loop, we can check if its status is
+  // still pending.
+  // TODO: Get rid of the Wakeable type? It's superseded by UntrackedThenable.
+  const thenable: Thenable<mixed> = (wakeable: any);
+
+  // 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 'pending':
+      // Since the status is already "pending", we can assume it will be updated
+      // when it resolves, either by React or something in userspace.
+      break;
+    case 'fulfilled':
+    case 'rejected':
+      // A thenable that already resolved shouldn't have been thrown, so this is
+      // unexpected. Suggests a mistake in a userspace data library. Don't track
+      // this thenable, because if we keep trying it will likely infinite loop
+      // without ever resolving.
+      // TODO: Log a warning?
+      break;
+    default: {
+      // TODO: 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.
+      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;
+    }
+  }
+}
+
+export function trackUsedThenable<T>(
+  thenableState: ThenableState,
+  thenable: Thenable<T>,
+  index: number,
+) {
+  // This is only a separate function from trackSuspendedWakeable for symmetry
+  // with Fiber.
+  // TODO: Disallow throwing a thenable directly. It must go through `use` (or
+  // some equivalent for internal Suspense implementations). We can't do this in
+  // Fiber yet because it's a breaking change but we can do it in Server
+  // Components because Server Components aren't released yet.
+  thenableState[index] = thenable;
+}
+
+export function getPreviouslyUsedThenableAtIndex<T>(
+  thenableState: ThenableState | null,
+  index: number,
+): Thenable<T> | null {
+  if (thenableState !== null) {
+    const thenable = thenableState[index];
+    if (thenable !== undefined) {
+      return thenable;
+    }
+  }
+  return null;
+}
diff --git a/packages/react/src/ReactSharedSubset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js
index 4a9ad873c1dc..fe096ba1dba9 100644
--- a/packages/react/src/ReactSharedSubset.experimental.js
+++ b/packages/react/src/ReactSharedSubset.experimental.js
@@ -20,6 +20,7 @@ export {
   createMutableSource as unstable_createMutableSource,
   createRef,
   createServerContext,
+  experimental_use,
   forwardRef,
   isValidElement,
   lazy,

From 79e2671168585e0200af7b301a2597479e0ba322 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 09:39:33 -0400
Subject: [PATCH 1544/1603] Bump jszip from 2.6.1 to 2.7.0 (#25208)

Bumps [jszip](https://github.com/Stuk/jszip) from 2.6.1 to 2.7.0.
- [Release notes](https://github.com/Stuk/jszip/releases)
- [Changelog](https://github.com/Stuk/jszip/blob/main/CHANGES.md)
- [Commits](https://github.com/Stuk/jszip/commits)

---
updated-dependencies:
- dependency-name: jszip
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 4f9e9225b382..d94de09d4bea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6911,7 +6911,6 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
-  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"
@@ -10682,9 +10681,9 @@ jsx-ast-utils@^2.4.1:
     object.assign "^4.1.0"
 
 jszip@^2.4.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.6.1.tgz#b88f3a7b2e67a2a048152982c7a3756d9c4828f0"
-  integrity sha1-uI86ey5noqBIFSmCx6N1bZxIKPA=
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/jszip/-/jszip-2.7.0.tgz#c420b1e1aa800490724a0dd277e8cca950bc2c41"
+  integrity sha512-JIsRKRVC3gTRo2vM4Wy9WBC3TRcfnIZU8k65Phi3izkvPH975FowRYtKGT6PxevA0XnJ/yO8b0QwV0ydVyQwfw==
   dependencies:
     pako "~1.0.2"
 
@@ -12633,12 +12632,7 @@ pako@~0.2.0:
   resolved "https://registry.yarnpkg.com/pako/-/pako-0.2.9.tgz#f3f7522f4ef782348da8161bad9ecfd51bf83a75"
   integrity sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU=
 
-pako@~1.0.2:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.10.tgz#4328badb5086a426aa90f541977d4955da5c9732"
-  integrity sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==
-
-pako@~1.0.5:
+pako@~1.0.2, 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==

From b3ebca732937587dc78f600915aea925ed274cdb Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 13:53:25 +0000
Subject: [PATCH 1545/1603] Bump moment from 2.29.1 to 2.29.4 in /fixtures/ssr
 (#24879)

---
 fixtures/ssr/yarn.lock | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/fixtures/ssr/yarn.lock b/fixtures/ssr/yarn.lock
index 3609381253bc..a24533653454 100644
--- a/fixtures/ssr/yarn.lock
+++ b/fixtures/ssr/yarn.lock
@@ -4265,7 +4265,7 @@ longest@^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.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==
@@ -4472,9 +4472,9 @@ mixin-deep@^1.2.0:
     minimist "^1.2.5"
 
 moment@^2.11.2:
-  version "2.29.1"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
-  integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
+  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"
@@ -5492,7 +5492,6 @@ react-dev-utils@^0.5.2:
 
 "react-dom@link:../../build/node_modules/react-dom":
   version "0.0.0"
-  uid ""
 
 react-scripts@0.9.5:
   version "0.9.5"
@@ -5542,7 +5541,6 @@ react-scripts@0.9.5:
 
 "react@link:../../build/node_modules/react":
   version "0.0.0"
-  uid ""
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -5945,14 +5943,6 @@ sax@^1.2.1, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
-scheduler@^0.20.1:
-  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"
-
 "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"

From a2331343bac2f50abf711d4c9277add7c8b4adbc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 13:56:07 +0000
Subject: [PATCH 1546/1603] Bump async from 2.6.3 to 2.6.4 in /fixtures/blocks
 (#24668)

---
 fixtures/blocks/yarn.lock | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/fixtures/blocks/yarn.lock b/fixtures/blocks/yarn.lock
index f4aef117a1fe..d0dcd245651d 100644
--- a/fixtures/blocks/yarn.lock
+++ b/fixtures/blocks/yarn.lock
@@ -1915,9 +1915,9 @@ async-limiter@~1.0.0:
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
 async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
@@ -6540,9 +6540,9 @@ lodash.uniq@^4.5.0:
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
 lodash@4, "lodash@>=3.5 <5", lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 loglevel@^1.6.6:
   version "1.6.7"

From 5ecc6568a1f48abb91e208bbb4711d72ce36b034 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:03:21 +0000
Subject: [PATCH 1547/1603] Bump async from 2.6.3 to 2.6.4 in /fixtures/dom
 (#24664)

---
 fixtures/dom/yarn.lock | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
index 59ad08c8297d..26f6cc7c7790 100644
--- a/fixtures/dom/yarn.lock
+++ b/fixtures/dom/yarn.lock
@@ -405,9 +405,9 @@ async-each@^1.0.1:
   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.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
@@ -5116,9 +5116,9 @@ lodash.uniq@^4.5.0:
   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.3.0:
-  version "4.17.20"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
-  integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
+  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"

From 126d3bf7493b7f96e178186e9abd05d76ca48d1d Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:14:50 +0000
Subject: [PATCH 1548/1603] Bump shell-quote in
 /fixtures/packaging/browserify/prod (#24772)

---
 fixtures/packaging/browserify/prod/yarn.lock | 21 ++------------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/fixtures/packaging/browserify/prod/yarn.lock b/fixtures/packaging/browserify/prod/yarn.lock
index 62da80fb7e8e..c85c30d03c51 100644
--- a/fixtures/packaging/browserify/prod/yarn.lock
+++ b/fixtures/packaging/browserify/prod/yarn.lock
@@ -13,18 +13,6 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-array-filter@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
-
-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"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -739,13 +727,8 @@ shasum@^1.0.0:
     sha.js "~2.4.4"
 
 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"
+  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"

From 43aa6f4c8897bc3da7fd3caddad08e7ee2428597 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:23:31 +0000
Subject: [PATCH 1549/1603] Bump jpeg-js from 0.4.3 to 0.4.4 (#24747)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index d94de09d4bea..2da9109d1315 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10444,9 +10444,9 @@ jetpack-id@1.0.0:
   integrity sha1-LPn7rkbYB0/Ba33gBxyO/rykc6Y=
 
 jpeg-js@^0.4.2:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.3.tgz#6158e09f1983ad773813704be80680550eff977b"
-  integrity sha512-ru1HWKek8octvUHFHvE5ZzQ1yAsJmIvRdGWvSoKV52XKyuyYA437QWDttXT8eZXDSbuMpHlLzPDZUPd6idIz+Q==
+  version "0.4.4"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.4.tgz#a9f1c6f1f9f0fa80cdb3484ed9635054d28936aa"
+  integrity sha512-WZzeDOEtTOBK4Mdsar0IqEU5sMr3vSV2RqkAIzUEV2BHnUfKGyswWFPFwK5EeDo93K3FohSHbLAjj0s1Wzd+dg==
 
 jpegtran-bin@^4.0.0:
   version "4.0.0"

From e1020aa52a48a4ea4e795c9135fd5f674722e97b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:24:56 +0000
Subject: [PATCH 1550/1603] Bump moment from 2.24.0 to 2.29.4 (#24875)

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2da9109d1315..5dda02018dc4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11663,9 +11663,9 @@ mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5, mkdirp@~0.5.1:
     minimist "^1.2.5"
 
 moment@^2.10.6:
-  version "2.24.0"
-  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
-  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
 move-concurrently@^1.0.1:
   version "1.0.1"

From 84d7e3720d29282bcbf474a140b03e9db1235028 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:26:04 +0000
Subject: [PATCH 1551/1603] Bump shell-quote in
 /fixtures/packaging/browserify/dev (#24773)

---
 fixtures/packaging/browserify/dev/yarn.lock | 21 ++-------------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/fixtures/packaging/browserify/dev/yarn.lock b/fixtures/packaging/browserify/dev/yarn.lock
index edcf2e696b75..2c56a370d820 100644
--- a/fixtures/packaging/browserify/dev/yarn.lock
+++ b/fixtures/packaging/browserify/dev/yarn.lock
@@ -13,18 +13,6 @@ acorn@^4.0.3:
   version "4.0.13"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
 
-array-filter@~0.0.0:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-0.0.1.tgz#7da8cf2e26628ed732803581fd21f67cacd2eeec"
-
-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"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -728,13 +716,8 @@ shasum@^1.0.0:
     sha.js "~2.4.4"
 
 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"
+  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"

From 15d6bd79b590631af908adf22f8ab3e71f54e93b Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 10:27:54 -0400
Subject: [PATCH 1552/1603] Bump terser from 4.8.0 to 4.8.1 in /fixtures/fizz
 (#24974)

Bumps [terser](https://github.com/terser/terser) from 4.8.0 to 4.8.1.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/commits)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 fixtures/fizz/yarn.lock | 24 ++++--------------------
 1 file changed, 4 insertions(+), 20 deletions(-)

diff --git a/fixtures/fizz/yarn.lock b/fixtures/fizz/yarn.lock
index 7b3eeac78715..4cc15f152c62 100644
--- a/fixtures/fizz/yarn.lock
+++ b/fixtures/fizz/yarn.lock
@@ -3171,7 +3171,7 @@ isobject@^3.0.0, isobject@^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:
+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==
@@ -3295,13 +3295,6 @@ lodash@^4.17.15, lodash@^4.17.19:
   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"
@@ -4087,7 +4080,6 @@ rc@^1.2.8:
 
 "react-dom@link:../../build/node_modules/react-dom":
   version "0.0.0"
-  uid ""
 
 react-error-boundary@^3.1.3:
   version "3.1.4"
@@ -4098,7 +4090,6 @@ react-error-boundary@^3.1.3:
 
 "react@link:../../build/node_modules/react":
   version "0.0.0"
-  uid ""
 
 read-pkg@^4.0.1:
   version "4.0.1"
@@ -4357,13 +4348,6 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-scheduler@^0.21.0:
-  version "0.21.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.21.0.tgz#6fd2532ff5a6d877b6edb12f00d8ab7e8f308820"
-  integrity sha512-1r87x5fz9MXqswA2ERLo0EbOAU74DpIUO090gIasYTqlVoJeMcl+Z1Rg7WHz+qtPujhS/hGIt9kxZOYBV3faRQ==
-  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"
@@ -4766,9 +4750,9 @@ terser-webpack-plugin@^1.4.3:
     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==
+  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"

From eaf8a138a95d8a0dd570c248cbcdf354c7701efb Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 10:49:16 -0400
Subject: [PATCH 1553/1603] Bump terser from 4.6.7 to 4.8.1 in /fixtures/blocks
 (#24970)

Bumps [terser](https://github.com/terser/terser) from 4.6.7 to 4.8.1.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/commits)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 fixtures/blocks/yarn.lock | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/fixtures/blocks/yarn.lock b/fixtures/blocks/yarn.lock
index d0dcd245651d..a21cbff63b94 100644
--- a/fixtures/blocks/yarn.lock
+++ b/fixtures/blocks/yarn.lock
@@ -2355,9 +2355,9 @@ bser@2.1.1:
     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==
+  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-indexof@^1.0.0:
   version "1.1.1"
@@ -9646,9 +9646,9 @@ source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
     urix "^0.1.0"
 
 source-map-support@^0.5.6, source-map-support@~0.5.12:
-  version "0.5.16"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.16.tgz#0ae069e7fe3ba7538c64c98515e35339eac5a042"
-  integrity sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==
+  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"
@@ -10117,9 +10117,9 @@ terser-webpack-plugin@^1.4.3:
     worker-farm "^1.7.0"
 
 terser@^4.1.2, terser@^4.4.3, terser@^4.6.3:
-  version "4.6.7"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.7.tgz#478d7f9394ec1907f0e488c5f6a6a9a2bad55e72"
-  integrity sha512-fmr7M1f7DBly5cX2+rFDvmGBAaaZyPrHYK4mMdHEDAdNTqXSZgSOfqsfGq2HqPGT/1V0foZZuCZFx8CHKgAk3g==
+  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"

From 0d095a3d960524fe766047636da24af75c516e16 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 14:55:35 +0000
Subject: [PATCH 1554/1603] Bump cross-fetch from 3.1.4 to 3.1.5 (#24462)

---
 yarn.lock | 41 ++++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 13 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 5dda02018dc4..e0709c7d8496 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5628,11 +5628,11 @@ cross-env@^3.1.4:
     is-windows "^1.0.0"
 
 cross-fetch@^3.0.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.4.tgz#9723f3a3a247bf8b89039f3a380a9244e8fa2f39"
-  integrity sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==
+  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.1"
+    node-fetch "2.6.7"
 
 cross-spawn@6.0.5, cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
@@ -11836,10 +11836,12 @@ node-environment-flags@^1.0.5:
     object.getownpropertydescriptors "^2.0.3"
     semver "^5.7.0"
 
-node-fetch@2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+node-fetch@2.6.7, node-fetch@^2.3.0, node-fetch@^2.6.0:
+  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@^1.0.1:
   version "1.7.3"
@@ -11849,11 +11851,6 @@ node-fetch@^1.0.1:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-fetch@^2.3.0, node-fetch@^2.6.0:
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
-  integrity sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==
-
 node-forge@0.9.0:
   version "0.9.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.9.0.tgz#d624050edbb44874adca12bb9a52ec63cb782579"
@@ -15918,6 +15915,11 @@ tr46@^2.0.2:
   dependencies:
     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==
+
 traverse-chain@~0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"
@@ -16649,6 +16651,11 @@ web-streams-polyfill@^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"
@@ -16908,6 +16915,14 @@ whatwg-url@8.1.0, whatwg-url@^8.0.0:
     tr46 "^2.0.2"
     webidl-conversions "^5.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.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.0.0.tgz#fde926fa54a599f3adf82dff25a9f7be02dc6edd"

From f094ee56d1027af46f77ccad43da1623c0fdca6f Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 10:57:43 -0400
Subject: [PATCH 1555/1603] Bump terser from 4.6.13 to 4.8.1 (#24971)

Bumps [terser](https://github.com/terser/terser) from 4.6.13 to 4.8.1.
- [Release notes](https://github.com/terser/terser/releases)
- [Changelog](https://github.com/terser/terser/blob/master/CHANGELOG.md)
- [Commits](https://github.com/terser/terser/commits)

---
updated-dependencies:
- dependency-name: terser
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 yarn.lock | 47 ++++++++++++++---------------------------------
 1 file changed, 14 insertions(+), 33 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index e0709c7d8496..c9009657b43e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4622,9 +4622,9 @@ buffer-fill@^1.0.0:
   integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
 
 buffer-from@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
-  integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+  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-indexof@^1.0.0:
   version "1.1.1"
@@ -5287,22 +5287,12 @@ commander@2.9.0:
   dependencies:
     graceful-readlink ">= 1.0.0"
 
-commander@^2.18.0, commander@^2.3.0, commander@^2.6.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
-  integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
-
-commander@^2.20.0, commander@^2.8.1:
+commander@^2.18.0, commander@^2.20.0, commander@^2.3.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.1:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
-  integrity sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==
-
-commander@^4.1.1:
+commander@^4.0.1, commander@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068"
   integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
@@ -14939,7 +14929,7 @@ source-map-support@0.5.16:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
-source-map-support@0.5.19, source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@~0.5.12:
+source-map-support@0.5.19:
   version "0.5.19"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
   integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
@@ -14954,10 +14944,10 @@ source-map-support@^0.4.18:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.6, source-map-support@~0.5.4:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.13.tgz#31b24a9c2e73c2de85066c0feb7d44767ed52932"
-  integrity sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==
+source-map-support@^0.5.16, source-map-support@^0.5.17, source-map-support@^0.5.6, source-map-support@~0.5.12, source-map-support@~0.5.4:
+  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"
@@ -15660,19 +15650,10 @@ terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser@^4.1.2:
-  version "4.6.13"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.13.tgz#e879a7364a5e0db52ba4891ecde007422c56a916"
-  integrity sha512-wMvqukYgVpQlymbnNbabVZbtM6PN63AzqexpwJL8tbh/mRT9LE5o+ruVduAGL7D6Fpjl+Q+06U5I9Ul82odAhw==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
-terser@^4.6.3:
-  version "4.8.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.0.tgz#63056343d7c70bb29f3af665865a46fe03a0df17"
-  integrity sha512-EAPipTNeWsb/3wLPeup1tVPaXfIaU68xMnVdPafIL1TV05OhASArYyIfFvnvJCNrR2NIOvDVNNTFRa+Re2MWyw==
+terser@^4.1.2, terser@^4.6.3:
+  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"

From fe55c0ea09f0241d4f012d3c6a69e77014d3ca52 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 8 Sep 2022 11:02:18 -0400
Subject: [PATCH 1556/1603] Bump jsdom from 16.4.0 to 16.7.0 in
 /fixtures/legacy-jsx-runtimes (#24924)

Bumps [jsdom](https://github.com/jsdom/jsdom) from 16.4.0 to 16.7.0.
- [Release notes](https://github.com/jsdom/jsdom/releases)
- [Changelog](https://github.com/jsdom/jsdom/blob/master/Changelog.md)
- [Commits](https://github.com/jsdom/jsdom/compare/16.4.0...16.7.0)

---
updated-dependencies:
- dependency-name: jsdom
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 fixtures/legacy-jsx-runtimes/yarn.lock | 541 ++++++++-----------------
 1 file changed, 163 insertions(+), 378 deletions(-)

diff --git a/fixtures/legacy-jsx-runtimes/yarn.lock b/fixtures/legacy-jsx-runtimes/yarn.lock
index fe5d0c7955c2..375b64caddc8 100644
--- a/fixtures/legacy-jsx-runtimes/yarn.lock
+++ b/fixtures/legacy-jsx-runtimes/yarn.lock
@@ -576,6 +576,11 @@
   dependencies:
     "@sinonjs/commons" "^1.7.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==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.10"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.10.tgz#ca58fc195dd9734e77e57c6f2df565623636ab40"
@@ -667,10 +672,10 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-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.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==
 
 acorn-globals@^6.0.0:
   version "6.0.0"
@@ -690,15 +695,17 @@ acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-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==
+acorn@^8.2.4:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.0.tgz#88c0187620435c7f6015803f5539dae05a9dbea8"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+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:
-    fast-deep-equal "^3.1.1"
-    fast-json-stable-stringify "^2.0.0"
-    json-schema-traverse "^0.4.1"
-    uri-js "^4.2.2"
+    debug "4"
 
 ansi-escapes@^4.2.1:
   version "4.3.1"
@@ -769,18 +776,6 @@ array-unique@^0.3.2:
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
   integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
 
-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=
-
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@@ -789,23 +784,13 @@ assign-symbols@^1.0.0:
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
-  integrity sha1-x57Zf380y48robyXkLzDZkdLS3k=
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
 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==
 
-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.10.1"
-  resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.10.1.tgz#e1e82e4f3e999e2cfd61b161280d16a111f86428"
-  integrity sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==
-
 babel-jest@^26.5.2:
   version "26.5.2"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.5.2.tgz#164f367a35946c6cf54eaccde8762dec50422250"
@@ -891,13 +876,6 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
-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"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -983,11 +961,6 @@ capture-exit@^2.0.0:
   dependencies:
     rsvp "^4.8.4"
 
-caseless@~0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
-  integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
-
 chalk@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
@@ -1076,7 +1049,7 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-combined-stream@^1.0.6, combined-stream@~1.0.6:
+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==
@@ -1105,11 +1078,6 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
-core-util-is@1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
-  integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
-
 cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
@@ -1140,20 +1108,13 @@ cssom@~0.3.6:
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
   integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
-cssstyle@^2.2.0:
+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"
 
-dashdash@^1.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/dashdash/-/dashdash-1.14.1.tgz#853cfa0f7cbe2fed5de20326b8dd581035f6e2f0"
-  integrity sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=
-  dependencies:
-    assert-plus "^1.0.0"
-
 data-urls@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/data-urls/-/data-urls-2.0.0.tgz#156485a72963a970f5d5821aaf642bef2bf2db9b"
@@ -1163,6 +1124,13 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.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@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -1182,10 +1150,10 @@ decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
-decimal.js@^10.2.0:
-  version "10.2.1"
-  resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.2.1.tgz#238ae7b0f0c793d3e3cea410108b35a2c01426a3"
-  integrity sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw==
+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==
 
 decode-uri-component@^0.2.0:
   version "0.2.0"
@@ -1193,9 +1161,9 @@ decode-uri-component@^0.2.0:
   integrity sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=
 
 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=
+  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.2.2"
@@ -1234,7 +1202,7 @@ define-property@^2.0.2:
 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=
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
 
 detect-newline@^3.0.0:
   version "3.1.0"
@@ -1253,14 +1221,6 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-ecc-jsbn@~0.1.1:
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.2.tgz#3a83a904e54353287874c564b7549386849a98c9"
-  integrity sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  dependencies:
-    jsbn "~0.1.0"
-    safer-buffer "^2.1.0"
-
 emittery@^0.7.1:
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.7.1.tgz#c02375a927a40948c0345cc903072597f5270451"
@@ -1339,13 +1299,13 @@ escape-string-regexp@^2.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz#a30304e99daa32e23b2fd20f51babd07cffca344"
   integrity sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==
 
-escodegen@^1.14.1:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.3.tgz#4e7b81fba61581dc97582ed78cab7f0e8d63f503"
-  integrity sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==
+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 "^4.2.0"
+    estraverse "^5.2.0"
     esutils "^2.0.2"
     optionator "^0.8.1"
   optionalDependencies:
@@ -1356,10 +1316,10 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-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.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"
@@ -1444,11 +1404,6 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     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==
-
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
@@ -1463,21 +1418,6 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extsprintf@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-  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"
@@ -1486,7 +1426,7 @@ fast-json-stable-stringify@^2.0.0:
 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=
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fb-watchman@^2.0.0:
   version "2.0.1"
@@ -1525,18 +1465,13 @@ for-in@^1.0.2:
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
   integrity sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=
 
-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==
+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.6"
+    combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
 fragment-cache@^0.2.1:
@@ -1595,13 +1530,6 @@ get-value@^2.0.3, get-value@^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@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
@@ -1629,19 +1557,6 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-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-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
@@ -1712,14 +1627,22 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-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=
+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:
-    assert-plus "^1.0.0"
-    jsprim "^1.2.2"
-    sshpk "^1.7.0"
+    "@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@^1.1.1:
   version "1.1.1"
@@ -1759,11 +1682,6 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-ip-regex@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"
-  integrity sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=
-
 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"
@@ -1888,10 +1806,10 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
-is-potential-custom-element-name@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
-  integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
+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.1.1:
   version "1.1.1"
@@ -1917,7 +1835,7 @@ is-symbol@^1.0.2:
   dependencies:
     has-symbols "^1.0.1"
 
-is-typedarray@^1.0.0, is-typedarray@~1.0.0:
+is-typedarray@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
@@ -1956,11 +1874,6 @@ isobject@^3.0.0, isobject@^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-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"
@@ -2386,41 +2299,37 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-jsbn@~0.1.0:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
-  integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
-
 jsdom@^16.4.0:
-  version "16.4.0"
-  resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-16.4.0.tgz#36005bde2d136f73eee1a830c6d45e55408edddb"
-  integrity sha512-lYMm3wYdgPhrl7pDcRmvzPhhrGVBeVhPIqeHjzeiHN3DFmD1RBpbExbi8vU7BJdH8VAZYovR8DMt0PNNDM7k8w==
+  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.3"
-    acorn "^7.1.1"
+    abab "^2.0.5"
+    acorn "^8.2.4"
     acorn-globals "^6.0.0"
     cssom "^0.4.4"
-    cssstyle "^2.2.0"
+    cssstyle "^2.3.0"
     data-urls "^2.0.0"
-    decimal.js "^10.2.0"
+    decimal.js "^10.2.1"
     domexception "^2.0.1"
-    escodegen "^1.14.1"
+    escodegen "^2.0.0"
+    form-data "^3.0.0"
     html-encoding-sniffer "^2.0.1"
-    is-potential-custom-element-name "^1.0.0"
+    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 "5.1.1"
-    request "^2.88.2"
-    request-promise-native "^1.0.8"
-    saxes "^5.0.0"
+    parse5 "6.0.1"
+    saxes "^5.0.1"
     symbol-tree "^3.2.4"
-    tough-cookie "^3.0.1"
+    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.0.0"
-    ws "^7.2.3"
+    whatwg-url "^8.5.0"
+    ws "^7.4.6"
     xml-name-validator "^3.0.0"
 
 jsesc@^2.5.1:
@@ -2433,21 +2342,6 @@ json-parse-even-better-errors@^2.3.0:
   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@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-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@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
@@ -2455,16 +2349,6 @@ json5@^2.1.2:
   dependencies:
     minimist "^1.2.5"
 
-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"
-
 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"
@@ -2502,7 +2386,7 @@ leven@^3.1.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=
+  integrity sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==
   dependencies:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
@@ -2519,16 +2403,16 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
-lodash.sortby@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
-  integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
-
 lodash@^4.17.19:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
 
+lodash@^4.7.0:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
@@ -2587,17 +2471,17 @@ micromatch@^4.0.2:
     braces "^3.0.1"
     picomatch "^2.0.5"
 
-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-types@^2.1.12, mime-types@~2.1.19:
-  version "2.1.27"
-  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.27.tgz#47949f98e279ea53119f5722e0f34e529bec009f"
-  integrity sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==
+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.44.0"
+    mime-db "1.52.0"
 
 mimic-fn@^2.1.0:
   version "2.1.0"
@@ -2720,14 +2604,9 @@ npm-run-path@^4.0.0:
     path-key "^3.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==
-
-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==
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/nwsapi/-/nwsapi-2.2.2.tgz#e5418863e7905df67d51ec95938d67bf801f0bb0"
+  integrity sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==
 
 object-copy@^0.1.0:
   version "0.1.0"
@@ -2837,10 +2716,10 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse5@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
-  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+parse5@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
+  integrity sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==
 
 pascalcase@^0.1.1:
   version "0.1.1"
@@ -2872,11 +2751,6 @@ path-parse@^1.0.6:
   resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.6.tgz#d62dbb5679405d72c4737ec58600e9ddcf06d24c"
   integrity sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==
 
-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.0.5:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
@@ -2904,7 +2778,7 @@ posix-character-classes@^0.1.0:
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
-  integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
+  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==
 
 pretty-format@^26.5.2:
   version "26.5.2"
@@ -2924,10 +2798,10 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.4"
 
-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==
+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@^3.0.0:
   version "3.0.0"
@@ -2937,15 +2811,15 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
-qs@~6.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==
+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==
 
 react-is@^16.12.0:
   version "16.13.1"
@@ -2994,48 +2868,6 @@ repeat-string@^1.6.1:
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
 
-request-promise-core@1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/request-promise-core/-/request-promise-core-1.1.4.tgz#3eedd4223208d419867b78ce815167d10593a22f"
-  integrity sha512-TTbAfBBRdWD7aNNOoVOBH4pN/KigV6LyapYNNlAPA8JwbovRti1E88m3sYAwsLi5ryhPKsE9APwnjFTgdUjTpw==
-  dependencies:
-    lodash "^4.17.19"
-
-request-promise-native@^1.0.8:
-  version "1.0.9"
-  resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.9.tgz#e407120526a5efdc9a39b28a5679bf47b9d9dc28"
-  integrity sha512-wcW+sIUiWnKgNY0dqCpOZkUbF/I+YPi+f09JZIDa39Ec+q82CpSYniDp+ISgTTbKmnpJWASeJBPZmoxH84wt3g==
-  dependencies:
-    request-promise-core "1.1.4"
-    stealthy-require "^1.1.1"
-    tough-cookie "^2.3.3"
-
-request@^2.88.2:
-  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"
@@ -3046,6 +2878,11 @@ require-main-filename@^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-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-3.0.0.tgz#0f0075f1bb2544766cf73ba6a6e2adfebcb13f2d"
@@ -3087,11 +2924,6 @@ rsvp@^4.8.4:
   resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
   integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
 
-safe-buffer@^5.0.1, safe-buffer@^5.1.2:
-  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.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -3104,7 +2936,7 @@ safe-regex@^1.1.0:
   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:
+"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==
@@ -3124,7 +2956,7 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-saxes@^5.0.0:
+saxes@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d"
   integrity sha512-5LBh1Tls8c9xgGjw3QrMwETmTMVk0oFgvrFSvWx62llR2hcEInrKNZ2GZCCuuy2lvWrdl5jhbpeqc5hRYKFOcw==
@@ -3312,21 +3144,6 @@ sprintf-js@~1.0.2:
   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"
-
 stack-utils@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-2.0.2.tgz#5cf48b4557becb4638d0bc4f21d23f5d19586593"
@@ -3342,11 +3159,6 @@ static-extend@^0.1.1:
     define-property "^0.2.5"
     object-copy "^0.1.0"
 
-stealthy-require@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/stealthy-require/-/stealthy-require-1.1.1.tgz#35b09875b4ff49f26a777e509b3090a3226bf24b"
-  integrity sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=
-
 string-length@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1"
@@ -3493,46 +3305,27 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
-tough-cookie@^2.3.3, 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==
+tough-cookie@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.2.tgz#e53e84b85f24e0b65dd526f46628db6c85f6b874"
+  integrity sha512-G9fqXWoYFZgTc2z8Q5zaHy/vJMjm+WV0AkAeHxVCQiEB1b+dGvWzFW6QV07cY5jQ5gRkeid2qIkzkxUnmoQZUQ==
   dependencies:
-    psl "^1.1.28"
+    psl "^1.1.33"
     punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
 
-tough-cookie@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-3.0.1.tgz#9df4f57e739c26930a018184887f4adb7dca73b2"
-  integrity sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==
-  dependencies:
-    ip-regex "^2.1.0"
-    psl "^1.1.28"
-    punycode "^2.1.1"
-
-tr46@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/tr46/-/tr46-2.0.2.tgz#03273586def1595ae08fedb38d7733cee91d2479"
-  integrity sha512-3n1qG+/5kg+jrbTzwAykB5yRYtQCTqOGKq5U5PE3b0a1/mzo6snDhjGS0zJVJunO0NrT3Dg1MLy5TjWP/UJppg==
+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"
 
-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=
+  integrity sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==
   dependencies:
     prelude-ls "~1.1.2"
 
@@ -3573,6 +3366,11 @@ union-value@^1.0.0:
     is-extendable "^0.1.1"
     set-value "^2.0.1"
 
+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==
+
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -3581,28 +3379,24 @@ unset-value@^1.0.0:
     has-value "^0.3.1"
     isobject "^3.0.0"
 
-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"
-
 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@^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"
+
 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==
 
-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==
-
 uuid@^8.3.0:
   version "8.3.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.1.tgz#2ba2e6ca000da60fce5a196954ab241131e05a31"
@@ -3625,15 +3419,6 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
-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"
-
 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"
@@ -3677,13 +3462,13 @@ whatwg-mimetype@^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:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-8.4.0.tgz#50fb9615b05469591d2b2bd6dfaed2942ed72837"
-  integrity sha512-vwTUFf6V4zhcPkWp/4CQPr1TW9Ml6SF4lVyaIMBdJw5i6qUUJ1QWM4Z6YYVkfka0OUIzVo/0aNtGVGk256IKWw==
+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.sortby "^4.7.0"
-    tr46 "^2.0.2"
+    lodash "^4.7.0"
+    tr46 "^2.1.0"
     webidl-conversions "^6.1.0"
 
 which-module@^2.0.0:
@@ -3734,10 +3519,10 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-ws@^7.2.3:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
-  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+ws@^7.4.6:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
 
 xml-name-validator@^3.0.0:
   version "3.0.0"

From a473d08fcee187f957b844b53b2eee2d2714630b Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Thu, 8 Sep 2022 11:46:07 -0400
Subject: [PATCH 1557/1603] Update to Flow from 0.97 to 0.122 (#25204)

* flow 0.122
* update ReactModel type
---
 package.json                                  |  2 +-
 packages/jest-react/src/internalAct.js        |  2 ++
 .../react-debug-tools/src/ReactDebugHooks.js  |  1 +
 .../src/backend/StyleX/utils.js               |  2 ++
 .../src/backend/renderer.js                   |  7 +++--
 .../src/backend/types.js                      |  2 +-
 .../src/devtools/views/Button.js              |  1 +
 .../NativeStyleEditor/AutoSizeInput.js        |  1 +
 .../views/Components/reach-ui/menu-button.js  |  1 +
 .../views/Components/reach-ui/tooltip.js      |  1 +
 .../react-devtools-shared/src/hydration.js    |  2 +-
 .../react-window/src/createGridComponent.js   |  1 +
 .../react-window/src/createListComponent.js   |  1 +
 .../src/registerDevToolsEventLogger.js        |  4 ++-
 packages/react-devtools-shared/src/utils.js   |  6 ++--
 .../react-dom/src/events/SyntheticEvent.js    | 31 ++++++++++++++-----
 .../src/server/ReactDOMFizzServerBrowser.js   |  4 +--
 .../src/server/ReactDOMFizzStaticBrowser.js   |  2 +-
 packages/react-fetch/src/ReactFetchNode.js    |  1 +
 .../src/legacy-events/accumulateInto.js       |  2 ++
 .../src/ReactNoopFlightServer.js              |  2 +-
 .../src/ReactChildFiber.new.js                |  1 +
 .../src/ReactChildFiber.old.js                |  1 +
 .../src/ReactFiberCommitWork.new.js           |  3 ++
 .../src/ReactFiberCommitWork.old.js           |  3 ++
 .../src/ReactFiberHotReloading.new.js         |  1 +
 .../src/ReactFiberHotReloading.old.js         |  1 +
 .../src/ReactTestSelectors.js                 |  2 +-
 .../src/ReactFlightDOMServerBrowser.js        |  6 ++--
 .../ReactFlightServerWebpackBundlerConfig.js  |  2 +-
 .../src/ReactFlightWebpackPlugin.js           |  2 +-
 .../react-server/src/ReactFlightServer.js     | 12 +++++--
 .../src/ReactFlightServerConfigStream.js      |  6 ++--
 .../src/ReactTestRenderer.js                  |  2 +-
 packages/react/src/ReactChildren.js           | 12 ++++---
 packages/react/src/ReactLazy.js               |  2 +-
 packages/shared/CheckStringCoercion.js        |  1 +
 packages/shared/ReactServerContextRegistry.js |  1 +
 packages/shared/ReactSymbols.js               |  2 +-
 packages/shared/ReactTypes.js                 | 12 +++----
 packages/shared/isValidElementType.js         |  2 +-
 scripts/flow/config/flowconfig                |  2 +-
 yarn.lock                                     |  8 ++---
 43 files changed, 109 insertions(+), 51 deletions(-)

diff --git a/package.json b/package.json
index 2e8445521b0a..47514e3ec2d3 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "0.97",
+    "flow-bin": "^0.122",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js
index 4e41f6234c92..a5a398b7e2a0 100644
--- a/packages/jest-react/src/internalAct.js
+++ b/packages/jest-react/src/internalAct.js
@@ -28,6 +28,8 @@ export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
       'This version of `act` requires a special mock build of Scheduler.',
     );
   }
+
+  // $FlowFixMe: _isMockFunction doesn't exist on function
   if (setTimeout._isMockFunction !== true) {
     throw Error(
       "This version of `act` requires Jest's timer mocks " +
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 940873725cb2..7cfb576fad37 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -683,6 +683,7 @@ function handleRenderFunctionError(error: any): void {
   // 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 Flow doesn't have this type yet.
   wrapperError.cause = error;
   throw wrapperError;
 }
diff --git a/packages/react-devtools-shared/src/backend/StyleX/utils.js b/packages/react-devtools-shared/src/backend/StyleX/utils.js
index 68bda23a2262..2167321b0c84 100644
--- a/packages/react-devtools-shared/src/backend/StyleX/utils.js
+++ b/packages/react-devtools-shared/src/backend/StyleX/utils.js
@@ -92,7 +92,9 @@ function getPropertyValueForStyleName(styleName: string): string | null {
     ]: any): CSSStyleSheet);
     // $FlowFixMe Flow doesn't konw about these properties
     const rules = styleSheet.rules || styleSheet.cssRules;
+    // $FlowFixMe `rules` is mixed
     for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+      // $FlowFixMe `rules` is mixed
       const rule = rules[ruleIndex];
       // $FlowFixMe Flow doesn't konw about these properties
       const {cssText, selectorText, style} = rule;
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 3a893060da0a..9802d4b8c03d 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -124,7 +124,7 @@ import type {
 } from 'react-devtools-shared/src/types';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
-type getTypeSymbolType = (type: any) => Symbol | number;
+type getTypeSymbolType = (type: any) => symbol | number;
 
 type ReactPriorityLevelsType = {|
   ImmediatePriority: number,
@@ -382,13 +382,14 @@ export function getInternalReactConstants(
   // End of copied code.
   // **********************************************************
 
-  function getTypeSymbol(type: any): Symbol | number {
+  function getTypeSymbol(type: any): symbol | number {
     const symbolOrNumber =
       typeof type === 'object' && type !== null ? type.$$typeof : type;
 
     // $FlowFixMe Flow doesn't know about typeof "symbol"
     return typeof symbolOrNumber === 'symbol'
-      ? symbolOrNumber.toString()
+      ? // $FlowFixMe `toString()` doesn't match the type signature?
+        symbolOrNumber.toString()
       : symbolOrNumber;
   }
 
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 81ed15b04ae7..be71a816d632 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -84,7 +84,7 @@ export type GetFiberIDForNative = (
 export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
 
 export type ReactProviderType<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   _context: ReactContext<T>,
   ...
 };
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index 82400bb8982a..bdd84b57da43 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -28,6 +28,7 @@ export default function Button({
   ...rest
 }: Props) {
   let button = (
+    // $FlowFixMe unsafe spread
     <button
       className={`${styles.Button} ${className}`}
       data-testname={testName}
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
index 48c6f304275c..c8154c6877b9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -42,6 +42,7 @@ export default function AutoSizeInput({
   const isEmpty = value === '' || value === '""';
 
   return (
+    // $FlowFixMe unsafe rest spread
     <input
       className={[styles.Input, className].join(' ')}
       data-testname={testName}
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
index cee8021a191f..ca93ac41d9d1 100644
--- 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
@@ -19,6 +19,7 @@ import useThemeStyles from '../../useThemeStyles';
 const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
   const style = useThemeStyles();
   return (
+    // $FlowFixMe unsafe spread
     <ReachMenuList style={style} {...props}>
       {children}
     </ReachMenuList>
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
index d3f07258c8b5..c6dbec7ff452 100644
--- 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
@@ -23,6 +23,7 @@ const Tooltip = ({
 }) => {
   const style = useThemeStyles();
   return (
+    // $FlowFixMe unsafe spread
     <ReachTooltip
       className={`${tooltipStyles.Tooltip} ${className}`}
       style={style}
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 0b936462d5fe..770b168e4b11 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -396,7 +396,7 @@ export function hydrate(
       parent[last] = undefined;
     } else {
       // Replace the string keys with Symbols so they're non-enumerable.
-      const replaced: {[key: Symbol]: boolean | string, ...} = {};
+      const replaced: {[key: symbol]: boolean | string, ...} = {};
       replaced[meta.inspectable] = !!value.inspectable;
       replaced[meta.inspected] = false;
       replaced[meta.name] = value.name;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
index 12d1a4cc9ebd..8f00a7929dc2 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
@@ -613,6 +613,7 @@ export default function createGridComponent({
       } else {
         itemStyleCache[key] = style = {
           position: 'absolute',
+          // $FlowFixMe computed properties are unsupported
           [direction === 'rtl' ? 'right' : 'left']: getColumnOffset(
             this.props,
             columnIndex,
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
index bf9c3e902a96..6fb6f2d540a2 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
@@ -469,6 +469,7 @@ export default function createListComponent({
 
         itemStyleCache[index] = style = {
           position: 'absolute',
+          // $FlowFixMe computed properties are unsupported
           [direction === 'rtl' ? 'right' : 'left']: isHorizontal ? offset : 0,
           top: !isHorizontal ? offset : 0,
           height: !isHorizontal ? size : '100%',
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index 5e1aeba0cd63..fffe07bad7c9 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -31,6 +31,7 @@ export function registerDevToolsEventLogger(
         let metadata = null;
         if (event.metadata != null) {
           metadata = event.metadata;
+          // $FlowFixMe: metadata is not writable and nullable
           delete event.metadata;
         }
         loggingIFrame.contentWindow.postMessage(
@@ -42,7 +43,8 @@ export function registerDevToolsEventLogger(
               version: process.env.DEVTOOLS_VERSION,
               metadata: metadata !== null ? JSON.stringify(metadata) : '',
               ...(fetchAdditionalContext != null
-                ? await fetchAdditionalContext()
+                ? // $FlowFixMe
+                  await fetchAdditionalContext()
                 : {}),
             },
           },
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 2c60fc124e00..1f4582026318 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -67,8 +67,8 @@ const encodedStringCache: LRUCache<string, Array<number>> = new LRU({
 });
 
 export function alphaSortKeys(
-  a: string | number | Symbol,
-  b: string | number | Symbol,
+  a: string | number | symbol,
+  b: string | number | symbol,
 ): number {
   if (a.toString() > b.toString()) {
     return 1;
@@ -81,7 +81,7 @@ export function alphaSortKeys(
 
 export function getAllEnumerableKeys(
   obj: Object,
-): Set<string | number | Symbol> {
+): Set<string | number | symbol> {
   const keys = new Set();
   let current = obj;
   while (current != null) {
diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 3609e6794a50..2c61b9a42ec2 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -166,7 +166,9 @@ let lastMouseEvent;
 function updateMouseMovementPolyfillState(event) {
   if (event !== lastMouseEvent) {
     if (lastMouseEvent && event.type === 'mousemove') {
+      // $FlowFixMe assuming this is a number
       lastMovementX = event.screenX - lastMouseEvent.screenX;
+      // $FlowFixMe assuming this is a number
       lastMovementY = event.screenY - lastMouseEvent.screenY;
     } else {
       lastMovementX = 0;
@@ -367,7 +369,9 @@ function getEventKey(nativeEvent) {
 
     // FireFox implements `key` but returns `MozPrintableKey` for all
     // printable characters (normalized to `Unidentified`), ignore it.
-    const key = normalizeKey[nativeEvent.key] || nativeEvent.key;
+    const key =
+      // $FlowFixMe unable to index with a `mixed` value
+      normalizeKey[nativeEvent.key] || nativeEvent.key;
     if (key !== 'Unidentified') {
       return key;
     }
@@ -375,7 +379,10 @@ function getEventKey(nativeEvent) {
 
   // Browser does not implement `key`, polyfill as much of it as we can.
   if (nativeEvent.type === 'keypress') {
-    const charCode = getEventCharCode(nativeEvent);
+    const charCode = getEventCharCode(
+      // $FlowFixMe 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.
@@ -384,6 +391,7 @@ function getEventKey(nativeEvent) {
   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 unable to index with a `mixed` value
     return translateToKey[nativeEvent.keyCode] || 'Unidentified';
   }
   return '';
@@ -441,7 +449,10 @@ const KeyboardEventInterface = {
     // 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 getEventCharCode(
+        // $FlowFixMe unable to narrow to `KeyboardEvent`
+        event,
+      );
     }
     return 0;
   },
@@ -462,7 +473,10 @@ const KeyboardEventInterface = {
     // `which` is an alias for either `keyCode` or `charCode` depending on the
     // type of the event.
     if (event.type === 'keypress') {
-      return getEventCharCode(event);
+      return getEventCharCode(
+        // $FlowFixMe unable to narrow to `KeyboardEvent`
+        event,
+      );
     }
     if (event.type === 'keydown' || event.type === 'keyup') {
       return event.keyCode;
@@ -538,7 +552,8 @@ const WheelEventInterface = {
       ? event.deltaX
       : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
       'wheelDeltaX' in event
-      ? -event.wheelDeltaX
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDeltaX
       : 0;
   },
   deltaY(event) {
@@ -546,10 +561,12 @@ const WheelEventInterface = {
       ? event.deltaY
       : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
       'wheelDeltaY' in event
-      ? -event.wheelDeltaY
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDeltaY
       : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
       'wheelDelta' in event
-      ? -event.wheelDelta
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDelta
       : 0;
   },
   deltaZ: 0,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 2f626c922aa1..25920232e871 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -57,10 +57,10 @@ function renderToReadableStream(
       const stream: ReactDOMServerReadableStream = (new ReadableStream(
         {
           type: 'bytes',
-          pull(controller) {
+          pull(controller): ?Promise<void> {
             startFlowing(request, controller);
           },
-          cancel(reason) {
+          cancel(reason): ?Promise<void> {
             abort(request);
           },
         },
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
index 38e4c948f6b9..c2c619046dff 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -50,7 +50,7 @@ function prerender(
       const stream = new ReadableStream(
         {
           type: 'bytes',
-          pull(controller) {
+          pull(controller): ?Promise<void> {
             startFlowing(request, controller);
           },
         },
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index 2b1ef5f200cb..9020529d440d 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -43,6 +43,7 @@ function nodeFetch(
     // TODO: cherry-pick supported user-passed options.
   };
   const nodeImpl = protocol === 'https:' ? https : http;
+  // $FlowFixMe: node flow type has `port` as a number
   const request = nodeImpl.request(nodeOptions, response => {
     // TODO: support redirects.
     onResolve(new Response(response));
diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
index 974c0143a550..7c9f17a75779 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js
@@ -40,9 +40,11 @@ function accumulateInto<T>(
   // certain that x is an Array (x could be a string with concat method).
   if (isArray(current)) {
     if (isArray(next)) {
+      // $FlowFixMe `isArray` does not ensure array is mutable
       current.push.apply(current, next);
       return current;
     }
+    // $FlowFixMe `isArray` does not ensure array is mutable
     current.push(next);
     return current;
   }
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightServer.js b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
index 3a84a06d0843..bd0badc535a8 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightServer.js
@@ -53,7 +53,7 @@ const ReactNoopFlightServer = ReactFlightServer({
   },
   resolveModuleMetaData(
     config: void,
-    reference: {$$typeof: Symbol, value: any},
+    reference: {$$typeof: symbol, value: any},
   ) {
     return saveModule(reference.value);
   },
diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js
index 71971c03892c..2e1a232e028d 100644
--- a/packages/react-reconciler/src/ReactChildFiber.new.js
+++ b/packages/react-reconciler/src/ReactChildFiber.new.js
@@ -80,6 +80,7 @@ if (__DEV__) {
       );
     }
 
+    // $FlowFixMe unable to narrow type from mixed to writable object
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js
index 86f75fbf65ea..c6fdbcc728a2 100644
--- a/packages/react-reconciler/src/ReactChildFiber.old.js
+++ b/packages/react-reconciler/src/ReactChildFiber.old.js
@@ -80,6 +80,7 @@ if (__DEV__) {
       );
     }
 
+    // $FlowFixMe unable to narrow type from mixed to writable object
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index d2cd313a05ac..c70e4ae3470e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -296,6 +296,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         }
       }
     } else {
+      // $FlowFixMe unable to narrow type to RefObject
       ref.current = null;
     }
   }
@@ -1522,6 +1523,7 @@ function commitAttachRef(finishedWork: Fiber) {
         }
       }
 
+      // $FlowFixMe unable to narrow type to the non-function case
       ref.current = instanceToUse;
     }
   }
@@ -1542,6 +1544,7 @@ function commitDetachRef(current: Fiber) {
         currentRef(null);
       }
     } else {
+      // $FlowFixMe unable to narrow type to the non-function case
       currentRef.current = null;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 70a68617763c..4b5076a61c51 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -296,6 +296,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         }
       }
     } else {
+      // $FlowFixMe unable to narrow type to RefObject
       ref.current = null;
     }
   }
@@ -1522,6 +1523,7 @@ function commitAttachRef(finishedWork: Fiber) {
         }
       }
 
+      // $FlowFixMe unable to narrow type to the non-function case
       ref.current = instanceToUse;
     }
   }
@@ -1542,6 +1544,7 @@ function commitDetachRef(current: Fiber) {
         currentRef(null);
       }
     } else {
+      // $FlowFixMe unable to narrow type to the non-function case
       currentRef.current = null;
     }
   }
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index 22b78280f9cb..469fbabf9ed2 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -222,6 +222,7 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
       return;
     }
     if (failedBoundaries === null) {
+      // $FlowFixMe Flow got confused by the feature check above.
       failedBoundaries = new WeakSet();
     }
     failedBoundaries.add(fiber);
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index 805176560c4b..c503c7a11121 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -222,6 +222,7 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
       return;
     }
     if (failedBoundaries === null) {
+      // $FlowFixMe Flow got confused by the feature check above.
       failedBoundaries = new WeakSet();
     }
     failedBoundaries.add(fiber);
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index adadc8ed73e8..ad1333c93614 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -39,7 +39,7 @@ if (typeof Symbol === 'function' && Symbol.for) {
   TEXT_TYPE = symbolFor('selector.text');
 }
 
-type Type = Symbol | number;
+type Type = symbol | number;
 
 type ComponentSelector = {|
   $$typeof: Type,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 93d047e4a043..2cbd609b473f 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -52,13 +52,13 @@ function renderToReadableStream(
   const stream = new ReadableStream(
     {
       type: 'bytes',
-      start(controller) {
+      start(controller): ?Promise<void> {
         startWork(request);
       },
-      pull(controller) {
+      pull(controller): ?Promise<void> {
         startFlowing(request, controller);
       },
-      cancel(reason) {},
+      cancel(reason): ?Promise<void> {},
     },
     // $FlowFixMe size() methods are not allowed on byte streams.
     {highWaterMark: 0},
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index caeed14a7b7b..8d7dccae333f 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -17,7 +17,7 @@ export type BundlerConfig = WebpackMap;
 
 // eslint-disable-next-line no-unused-vars
 export type ModuleReference<T> = {
-  $$typeof: Symbol,
+  $$typeof: symbol,
   filepath: string,
   name: string,
   async: boolean,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index 0c49d293733c..b3da107e60b9 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -25,7 +25,7 @@ import {
 import isArray from 'shared/isArray';
 
 class ClientReferenceDependency extends ModuleDependency {
-  constructor(request) {
+  constructor(request: mixed) {
     super(request);
   }
 
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 7c6801e37875..1e84a89350c0 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -86,6 +86,7 @@ export type ReactModel =
   | string
   | boolean
   | number
+  | symbol
   | null
   | Iterable<ReactModel>
   | ReactModelObject;
@@ -119,7 +120,7 @@ export type Request = {
   completedModuleChunks: Array<Chunk>,
   completedJSONChunks: Array<Chunk>,
   completedErrorChunks: Array<Chunk>,
-  writtenSymbols: Map<Symbol, number>,
+  writtenSymbols: Map<symbol, number>,
   writtenModules: Map<ModuleKey, number>,
   writtenProviders: Map<string, number>,
   identifierPrefix: string,
@@ -746,12 +747,17 @@ export function resolveModelToJSON(
     if (existingId !== undefined) {
       return serializeByValueID(existingId);
     }
-    const name = value.description;
+    // $FlowFixMe `description` might be undefined
+    const name: string = value.description;
 
+    // $FlowFixMe `name` might be undefined
     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(${value.description}) cannot be found among global symbols. ` +
+          `The symbol Symbol.for(${
+            // $FlowFixMe `description` might be undefined
+            value.description
+          }) cannot be found among global symbols. ` +
           `Remove ${describeKeyForErrorMessage(
             key,
           )} from this object, or avoid the entire object: ${describeObjectForErrorMessage(
diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js
index b9772ef6f2ea..6320f28d585b 100644
--- a/packages/react-server/src/ReactFlightServerConfigStream.js
+++ b/packages/react-server/src/ReactFlightServerConfigStream.js
@@ -94,7 +94,8 @@ export function processModelChunk(
   id: number,
   model: ReactModel,
 ): Chunk {
-  const json = stringify(model, request.toJSON);
+  // $FlowFixMe: `json` might be `undefined` when model is a symbol.
+  const json: string = stringify(model, request.toJSON);
   const row = serializeRowHeader('J', id) + json + '\n';
   return stringToChunk(row);
 }
@@ -114,7 +115,8 @@ export function processModuleChunk(
   id: number,
   moduleMetaData: ReactModel,
 ): Chunk {
-  const json = stringify(moduleMetaData);
+  // $FlowFixMe: `json` might be `undefined` when moduleMetaData is a symbol.
+  const json: string = stringify(moduleMetaData);
   const row = serializeRowHeader('M', id) + json + '\n';
   return stringToChunk(row);
 }
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 76911d701de7..43cfe6ef82c8 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -65,7 +65,7 @@ type ReactTestRendererJSON = {|
   type: string,
   props: {[propName: string]: any, ...},
   children: null | Array<ReactTestRendererNode>,
-  $$typeof?: Symbol, // Optional because we add it with defineProperty().
+  $$typeof?: symbol, // Optional because we add it with defineProperty().
 |};
 type ReactTestRendererNode = ReactTestRendererJSON | string;
 
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index d0562f53e3bc..686d39a5716a 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -137,9 +137,12 @@ function mapIntoArray(
           escapedPrefix +
             // $FlowFixMe Flow incorrectly thinks React.Portal doesn't have a key
             (mappedChild.key && (!child || child.key !== mappedChild.key)
-              ? // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
-                // eslint-disable-next-line react-internal/safe-string-coercion
-                escapeUserProvidedKey('' + mappedChild.key) + '/'
+              ? escapeUserProvidedKey(
+                  // eslint-disable-next-line react-internal/safe-string-coercion
+                  '' +
+                    // $FlowFixMe Flow incorrectly thinks existing element's key can be a number
+                    mappedChild.key,
+                ) + '/'
               : '') +
             childKey,
         );
@@ -190,6 +193,7 @@ function mapIntoArray(
       const iterator = iteratorFn.call(iterableChildren);
       let step;
       let ii = 0;
+      // $FlowFixMe `iteratorFn` might return null according to typing.
       while (!(step = iterator.next()).done) {
         child = step.value;
         nextName = nextNamePrefix + getElementKey(child, ii++);
@@ -222,7 +226,7 @@ function mapIntoArray(
   return subtreeCount;
 }
 
-type MapFunc = (child: ?React$Node) => ?ReactNodeList;
+type MapFunc = (child: ?React$Node, index: number) => ?ReactNodeList;
 
 /**
  * Maps children that are typically specified as `props.children`.
diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index 6bfa6cbdec41..4f786ed25f96 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -43,7 +43,7 @@ type Payload<T> =
   | RejectedPayload;
 
 export type LazyComponent<T, P> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   _payload: P,
   _init: (payload: P) => T,
 };
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
index 305572f8462c..e8fbf64a99b8 100644
--- a/packages/shared/CheckStringCoercion.js
+++ b/packages/shared/CheckStringCoercion.js
@@ -26,6 +26,7 @@ function typeName(value: mixed): string {
       (hasToStringTag && (value: any)[Symbol.toStringTag]) ||
       (value: any).constructor.name ||
       'Object';
+    // $FlowFixMe
     return type;
   }
 }
diff --git a/packages/shared/ReactServerContextRegistry.js b/packages/shared/ReactServerContextRegistry.js
index ab8421b3c329..d8f7c7082940 100644
--- a/packages/shared/ReactServerContextRegistry.js
+++ b/packages/shared/ReactServerContextRegistry.js
@@ -17,6 +17,7 @@ export function getOrCreateServerContext(globalName: string) {
   if (!ContextRegistry[globalName]) {
     ContextRegistry[globalName] = createServerContext(
       globalName,
+      // $FlowFixMe function signature doesn't reflect the symbol value
       REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED,
     );
   }
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 6ff9305fa7b0..50f4fba27d98 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -40,7 +40,7 @@ export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
 const MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 const FAUX_ITERATOR_SYMBOL = '@@iterator';
 
-export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
+export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<any> {
   if (maybeIterable === null || typeof maybeIterable !== 'object') {
     return null;
   }
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 6e829a3a9f68..5209c795c239 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -24,7 +24,7 @@ export type ReactNodeList = ReactEmpty | React$Node;
 export type ReactText = string | number;
 
 export type ReactProvider<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   type: ReactProviderType<T>,
   key: null | string,
   ref: null,
@@ -37,13 +37,13 @@ export type ReactProvider<T> = {
 };
 
 export type ReactProviderType<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   _context: ReactContext<T>,
   ...
 };
 
 export type ReactConsumer<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   type: ReactContext<T>,
   key: null | string,
   ref: null,
@@ -55,7 +55,7 @@ export type ReactConsumer<T> = {
 };
 
 export type ReactContext<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   Consumer: ReactContext<T>,
   Provider: ReactProviderType<T>,
   _currentValue: T,
@@ -85,7 +85,7 @@ export type ServerContextJSONValue =
 export type ReactServerContext<T: any> = ReactContext<T>;
 
 export type ReactPortal = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   key: null | string,
   containerInfo: any,
   children: ReactNodeList,
@@ -99,7 +99,7 @@ export type RefObject = {|
 |};
 
 export type ReactScope = {|
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
 |};
 
 export type ReactScopeQuery = (
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index 87424982afc1..c0e4cdc76932 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -33,7 +33,7 @@ import {
   enableLegacyHidden,
 } from './ReactFeatureFlags';
 
-const REACT_MODULE_REFERENCE: Symbol = Symbol.for('react.module.reference');
+const REACT_MODULE_REFERENCE: symbol = Symbol.for('react.module.reference');
 
 export default function isValidElementType(type: mixed) {
   if (typeof type === 'string' || typeof type === 'function') {
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 9c10ba265dce..a61f324d93e5 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -50,4 +50,4 @@ esproposal.optional_chaining=enable
 munge_underscores=false
 
 [version]
-^0.97.0
+^0.122.0
diff --git a/yarn.lock b/yarn.lock
index c9009657b43e..15c796b9b7e3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7913,10 +7913,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@0.97:
-  version "0.97.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.97.0.tgz#036ffcfc27503367a9d906ec9d843a0aa6f6bb83"
-  integrity sha512-jXjD05gkatLuC4+e28frH1hZoRwr1iASP6oJr61Q64+kR4kmzaS+AdFBhYgoYS5kpoe4UzwDebWK8ETQFNh00w==
+flow-bin@^0.122:
+  version "0.122.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.122.0.tgz#c723a2b33b1a70bd10204704ae1dc776d5d89d79"
+  integrity sha512-my8N5jgl/A+UVby9E7NDppHdhLgRbWgKbmFZSx2MSYMRh3d9YGnM2MM+wexpUpl0ftY1IM6ZcUwaAhrypLyvlA==
 
 fluent-syntax@0.13.0:
   version "0.13.0"

From d6f9628a8c8065295584d4393e51cac23fc4d3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Thu, 8 Sep 2022 13:25:10 -0400
Subject: [PATCH 1558/1603] Remove some RSC subset entry points that were
 removed in the main entry point (#25209)

---
 packages/react/src/ReactSharedSubset.experimental.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react/src/ReactSharedSubset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js
index fe096ba1dba9..076349e29383 100644
--- a/packages/react/src/ReactSharedSubset.experimental.js
+++ b/packages/react/src/ReactSharedSubset.experimental.js
@@ -17,7 +17,6 @@ export {
   SuspenseList,
   cloneElement,
   createElement,
-  createMutableSource as unstable_createMutableSource,
   createRef,
   createServerContext,
   experimental_use,
@@ -34,9 +33,7 @@ export {
   useContext,
   useDebugValue,
   useDeferredValue,
-  useDeferredValue as unstable_useDeferredValue,
   useMemo,
-  useMutableSource as unstable_useMutableSource,
   useTransition,
   version,
 } from './React';

From c28f313e6d90a13b2eca85c1b3543d1ea6f81603 Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 8 Sep 2022 21:47:33 -0400
Subject: [PATCH 1559/1603] experimental_use(promise) for SSR (#25214)

Follow up to #25084 and #25207. Implements experimental_use(promise) API
in the SSR runtime (Fizz).

This is largely a copy-paste of the Flight implementation. I have
intentionally tried to keep both as close as possible.
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 212 ++++++++++++++++++
 packages/react-server/src/ReactFizzHooks.js   | 105 ++++++++-
 packages/react-server/src/ReactFizzServer.js  | 127 ++++++++---
 .../react-server/src/ReactFizzWakeable.js     | 107 +++++++++
 packages/react-server/src/ReactFlightHooks.js |   4 +-
 .../react-server/src/ReactFlightWakeable.js   |   4 +-
 6 files changed, 525 insertions(+), 34 deletions(-)
 create mode 100644 packages/react-server/src/ReactFizzWakeable.js

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 3812baffc748..243c7dba8607 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -19,6 +19,7 @@ let Suspense;
 let SuspenseList;
 let useSyncExternalStore;
 let useSyncExternalStoreWithSelector;
+let use;
 let PropTypes;
 let textCache;
 let window;
@@ -42,6 +43,7 @@ describe('ReactDOMFizzServer', () => {
     Suspense = React.Suspense;
     if (gate(flags => flags.enableSuspenseList)) {
       SuspenseList = React.SuspenseList;
+      use = React.experimental_use;
     }
 
     PropTypes = require('prop-types');
@@ -5243,5 +5245,215 @@ describe('ReactDOMFizzServer', () => {
         console.error = originalConsoleError;
       }
     });
+
+    // @gate enableUseHook
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.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 />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('ABC');
+    });
+
+    // @gate enableUseHook
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.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 />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('ABCD');
+    });
+
+    // @gate enableUseHook
+    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 (
+          <Suspense fallback="Loading...">
+            <ErrorBoundary>
+              <Async />
+            </ErrorBoundary>
+          </Suspense>
+        );
+      }
+
+      const reportedServerErrors = [];
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.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('Loading...');
+      expect(reportedServerErrors.length).toBe(1);
+      expect(reportedServerErrors[0].message).toBe('Oops!');
+
+      const reportedClientErrors = [];
+      ReactDOMClient.hydrateRoot(container, <App />, {
+        onRecoverableError(error) {
+          reportedClientErrors.push(error);
+        },
+      });
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('Oops!');
+      expect(reportedClientErrors.length).toBe(1);
+      if (__DEV__) {
+        expect(reportedClientErrors[0].message).toBe('Oops!');
+      } else {
+        expect(reportedClientErrors[0].message).toBe(
+          'The server could not finish this Suspense boundary, likely due to ' +
+            'an error during server rendering. Switched to client rendering.',
+        );
+      }
+    });
+
+    // @gate enableUseHook
+    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(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual('Hi');
+
+      ReactDOMClient.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual('Hi');
+    });
   });
 });
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 960800e903c2..02072fabd3f3 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -15,17 +15,29 @@ import type {
   MutableSourceSubscribeFn,
   ReactContext,
   StartTransitionOptions,
+  Thenable,
+  Usable,
 } from 'shared/ReactTypes';
 
 import type {ResponseState} from './ReactServerFormatConfig';
 import type {Task} from './ReactFizzServer';
+import type {ThenableState} from './ReactFizzWakeable';
 
 import {readContext as readContextImpl} from './ReactFizzNewContext';
 import {getTreeId} from './ReactFizzTreeContext';
+import {
+  getPreviouslyUsedThenableAtIndex,
+  createThenableState,
+  trackUsedThenable,
+} from './ReactFizzWakeable';
 
 import {makeId} from './ReactServerFormatConfig';
 
-import {enableCache, enableUseMemoCacheHook} from 'shared/ReactFeatureFlags';
+import {
+  enableCache,
+  enableUseHook,
+  enableUseMemoCacheHook,
+} from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
 
 type BasicStateAction<S> = (S => S) | S;
@@ -57,6 +69,9 @@ let isReRender: boolean = false;
 let didScheduleRenderPhaseUpdate: boolean = false;
 // Counts the number of useId hooks in this component
 let localIdCounter: number = 0;
+// 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.
@@ -169,7 +184,11 @@ function createWorkInProgressHook(): Hook {
   return workInProgressHook;
 }
 
-export function prepareToUseHooks(task: Task, componentIdentity: Object): void {
+export function prepareToUseHooks(
+  task: Task,
+  componentIdentity: Object,
+  prevThenableState: ThenableState | null,
+): void {
   currentlyRenderingComponent = componentIdentity;
   currentlyRenderingTask = task;
   if (__DEV__) {
@@ -178,13 +197,14 @@ export function prepareToUseHooks(task: Task, componentIdentity: Object): void {
 
   // The following should have already been reset
   // didScheduleRenderPhaseUpdate = false;
-  // localIdCounter = 0;
   // firstWorkInProgressHook = null;
   // numberOfReRenders = 0;
   // renderPhaseUpdates = null;
   // workInProgressHook = null;
 
   localIdCounter = 0;
+  thenableIndexCounter = 0;
+  thenableState = prevThenableState;
 }
 
 export function finishHooks(
@@ -203,6 +223,7 @@ export function finishHooks(
     // restarting until no more updates are scheduled.
     didScheduleRenderPhaseUpdate = false;
     localIdCounter = 0;
+    thenableIndexCounter = 0;
     numberOfReRenders += 1;
 
     // Start over from the beginning of the list
@@ -214,6 +235,12 @@ export function finishHooks(
   return children;
 }
 
+export function getThenableStateAfterSuspending() {
+  const state = thenableState;
+  thenableState = null;
+  return state;
+}
+
 export function checkDidRenderIdHook() {
   // This should be called immediately after every finishHooks call.
   // Conceptually, it's part of the return value of finishHooks; it's only a
@@ -529,6 +556,75 @@ function useId(): string {
   return makeId(responseState, treeId, localId);
 }
 
+function use<T>(usable: Usable<T>): T {
+  if (usable !== null && typeof usable === 'object') {
+    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;
+
+      switch (thenable.status) {
+        case 'fulfilled': {
+          const fulfilledValue: T = thenable.value;
+          return fulfilledValue;
+        }
+        case 'rejected': {
+          const rejectedError = thenable.reason;
+          throw rejectedError;
+        }
+        default: {
+          const prevThenableAtIndex: Thenable<T> | null = getPreviouslyUsedThenableAtIndex(
+            thenableState,
+            index,
+          );
+          if (prevThenableAtIndex !== null) {
+            switch (prevThenableAtIndex.status) {
+              case 'fulfilled': {
+                const fulfilledValue: T = prevThenableAtIndex.value;
+                return fulfilledValue;
+              }
+              case 'rejected': {
+                const rejectedError: mixed = prevThenableAtIndex.reason;
+                throw rejectedError;
+              }
+              default: {
+                // The thenable still hasn't resolved. Suspend with the same
+                // thenable as last time to avoid redundant listeners.
+                throw prevThenableAtIndex;
+              }
+            }
+          } else {
+            // This is the first time something has been used at this index.
+            // Stash the thenable at the current index so we can reuse it during
+            // the next attempt.
+            if (thenableState === null) {
+              thenableState = createThenableState();
+            }
+            trackUsedThenable(thenableState, thenable, index);
+
+            // Suspend.
+            // TODO: 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.
+            throw thenable;
+          }
+        }
+      }
+    } else {
+      // TODO: Add support for Context
+    }
+  }
+
+  // eslint-disable-next-line react-internal/safe-string-coercion
+  throw new Error('An unsupported type was passed to use(): ' + String(usable));
+}
+
 function unsupportedRefresh() {
   throw new Error('Cache cannot be refreshed during server rendering.');
 }
@@ -574,6 +670,9 @@ if (enableCache) {
 if (enableUseMemoCacheHook) {
   Dispatcher.useMemoCache = useMemoCache;
 }
+if (enableUseHook) {
+  Dispatcher.use = use;
+}
 
 export let currentResponseState: null | ResponseState = (null: any);
 export function setCurrentResponseState(
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 7828c808f16c..5f44458e7889 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -17,6 +17,7 @@ import type {
   ReactContext,
   ReactProviderType,
   OffscreenMode,
+  Wakeable,
 } from 'shared/ReactTypes';
 import type {LazyComponent as LazyComponentType} from 'react/src/ReactLazy';
 import type {
@@ -27,6 +28,7 @@ import type {
 import type {ContextSnapshot} from './ReactFizzNewContext';
 import type {ComponentStackNode} from './ReactFizzComponentStack';
 import type {TreeContext} from './ReactFizzTreeContext';
+import type {ThenableState} from './ReactFizzWakeable';
 
 import {
   scheduleWork,
@@ -87,6 +89,7 @@ import {
   Dispatcher,
   currentResponseState,
   setCurrentResponseState,
+  getThenableStateAfterSuspending,
 } from './ReactFizzHooks';
 import {getStackByComponentStackNode} from './ReactFizzComponentStack';
 import {emptyTreeContext, pushTreeContext} from './ReactFizzTreeContext';
@@ -123,6 +126,7 @@ import {
 import assign from 'shared/assign';
 import getComponentNameFromType from 'shared/getComponentNameFromType';
 import isArray from 'shared/isArray';
+import {trackSuspendedWakeable} from './ReactFizzWakeable';
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
@@ -155,6 +159,7 @@ export type Task = {
   context: ContextSnapshot, // the current new context that this task is executing in
   treeContext: TreeContext, // the current tree context that this task is executing in
   componentStack: null | ComponentStackNode, // DEV-only component stack
+  thenableState: null | ThenableState,
 };
 
 const PENDING = 0;
@@ -297,6 +302,7 @@ export function createRequest(
   rootSegment.parentFlushed = true;
   const rootTask = createTask(
     request,
+    null,
     children,
     null,
     rootSegment,
@@ -336,6 +342,7 @@ function createSuspenseBoundary(
 
 function createTask(
   request: Request,
+  thenableState: ThenableState | null,
   node: ReactNodeList,
   blockedBoundary: Root | SuspenseBoundary,
   blockedSegment: Segment,
@@ -359,6 +366,7 @@ function createTask(
     legacyContext,
     context,
     treeContext,
+    thenableState,
   }: any);
   if (__DEV__) {
     task.componentStack = null;
@@ -592,6 +600,7 @@ function renderSuspenseBoundary(
   // on it yet in case we finish the main content, so we queue for later.
   const suspendedFallbackTask = createTask(
     request,
+    null,
     fallback,
     parentBoundary,
     boundarySegment,
@@ -665,12 +674,13 @@ function shouldConstruct(Component) {
 function renderWithHooks<Props, SecondArg>(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   Component: (p: Props, arg: SecondArg) => any,
   props: Props,
   secondArg: SecondArg,
 ): any {
   const componentIdentity = {};
-  prepareToUseHooks(task, componentIdentity);
+  prepareToUseHooks(task, componentIdentity, prevThenableState);
   const result = Component(props, secondArg);
   return finishHooks(Component, props, result, secondArg);
 }
@@ -708,13 +718,13 @@ function finishClassComponent(
         childContextTypes,
       );
       task.legacyContext = mergedContext;
-      renderNodeDestructive(request, task, nextChildren);
+      renderNodeDestructive(request, task, null, nextChildren);
       task.legacyContext = previousContext;
       return;
     }
   }
 
-  renderNodeDestructive(request, task, nextChildren);
+  renderNodeDestructive(request, task, null, nextChildren);
 }
 
 function renderClassComponent(
@@ -748,6 +758,7 @@ let hasWarnedAboutUsingContextAsConsumer = false;
 function renderIndeterminateComponent(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   Component: any,
   props: any,
 ): void {
@@ -776,7 +787,14 @@ function renderIndeterminateComponent(
     }
   }
 
-  const value = renderWithHooks(request, task, Component, props, legacyContext);
+  const value = renderWithHooks(
+    request,
+    task,
+    prevThenableState,
+    Component,
+    props,
+    legacyContext,
+  );
   const hasId = checkDidRenderIdHook();
 
   if (__DEV__) {
@@ -857,12 +875,12 @@ function renderIndeterminateComponent(
       const index = 0;
       task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
       try {
-        renderNodeDestructive(request, task, value);
+        renderNodeDestructive(request, task, null, value);
       } finally {
         task.treeContext = prevTreeContext;
       }
     } else {
-      renderNodeDestructive(request, task, value);
+      renderNodeDestructive(request, task, null, value);
     }
   }
   popComponentStackInDEV(task);
@@ -942,12 +960,20 @@ function resolveDefaultProps(Component: any, baseProps: Object): Object {
 function renderForwardRef(
   request: Request,
   task: Task,
+  prevThenableState,
   type: any,
   props: Object,
   ref: any,
 ): void {
   pushFunctionComponentStackInDEV(task, type.render);
-  const children = renderWithHooks(request, task, type.render, props, ref);
+  const children = renderWithHooks(
+    request,
+    task,
+    prevThenableState,
+    type.render,
+    props,
+    ref,
+  );
   const hasId = checkDidRenderIdHook();
   if (hasId) {
     // This component materialized an id. We treat this as its own level, with
@@ -957,12 +983,12 @@ function renderForwardRef(
     const index = 0;
     task.treeContext = pushTreeContext(prevTreeContext, totalChildren, index);
     try {
-      renderNodeDestructive(request, task, children);
+      renderNodeDestructive(request, task, null, children);
     } finally {
       task.treeContext = prevTreeContext;
     }
   } else {
-    renderNodeDestructive(request, task, children);
+    renderNodeDestructive(request, task, null, children);
   }
   popComponentStackInDEV(task);
 }
@@ -970,13 +996,21 @@ function renderForwardRef(
 function renderMemo(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   type: any,
   props: Object,
   ref: any,
 ): void {
   const innerType = type.type;
   const resolvedProps = resolveDefaultProps(innerType, props);
-  renderElement(request, task, innerType, resolvedProps, ref);
+  renderElement(
+    request,
+    task,
+    prevThenableState,
+    innerType,
+    resolvedProps,
+    ref,
+  );
 }
 
 function renderContextConsumer(
@@ -1026,7 +1060,7 @@ function renderContextConsumer(
   const newValue = readContext(context);
   const newChildren = render(newValue);
 
-  renderNodeDestructive(request, task, newChildren);
+  renderNodeDestructive(request, task, null, newChildren);
 }
 
 function renderContextProvider(
@@ -1043,7 +1077,7 @@ function renderContextProvider(
     prevSnapshot = task.context;
   }
   task.context = pushProvider(context, value);
-  renderNodeDestructive(request, task, children);
+  renderNodeDestructive(request, task, null, children);
   task.context = popProvider(context);
   if (__DEV__) {
     if (prevSnapshot !== task.context) {
@@ -1057,6 +1091,7 @@ function renderContextProvider(
 function renderLazyComponent(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   lazyComponent: LazyComponentType<any, any>,
   props: Object,
   ref: any,
@@ -1066,7 +1101,14 @@ function renderLazyComponent(
   const init = lazyComponent._init;
   const Component = init(payload);
   const resolvedProps = resolveDefaultProps(Component, props);
-  renderElement(request, task, Component, resolvedProps, ref);
+  renderElement(
+    request,
+    task,
+    prevThenableState,
+    Component,
+    resolvedProps,
+    ref,
+  );
   popComponentStackInDEV(task);
 }
 
@@ -1078,13 +1120,14 @@ function renderOffscreen(request: Request, task: Task, props: Object): void {
   } else {
     // A visible Offscreen boundary is treated exactly like a fragment: a
     // pure indirection.
-    renderNodeDestructive(request, task, props.children);
+    renderNodeDestructive(request, task, null, props.children);
   }
 }
 
 function renderElement(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   type: any,
   props: Object,
   ref: any,
@@ -1094,7 +1137,13 @@ function renderElement(
       renderClassComponent(request, task, type, props);
       return;
     } else {
-      renderIndeterminateComponent(request, task, type, props);
+      renderIndeterminateComponent(
+        request,
+        task,
+        prevThenableState,
+        type,
+        props,
+      );
       return;
     }
   }
@@ -1118,7 +1167,7 @@ function renderElement(
     case REACT_STRICT_MODE_TYPE:
     case REACT_PROFILER_TYPE:
     case REACT_FRAGMENT_TYPE: {
-      renderNodeDestructive(request, task, props.children);
+      renderNodeDestructive(request, task, null, props.children);
       return;
     }
     case REACT_OFFSCREEN_TYPE: {
@@ -1128,13 +1177,13 @@ function renderElement(
     case REACT_SUSPENSE_LIST_TYPE: {
       pushBuiltInComponentStackInDEV(task, 'SuspenseList');
       // TODO: SuspenseList should control the boundaries.
-      renderNodeDestructive(request, task, props.children);
+      renderNodeDestructive(request, task, null, props.children);
       popComponentStackInDEV(task);
       return;
     }
     case REACT_SCOPE_TYPE: {
       if (enableScopeAPI) {
-        renderNodeDestructive(request, task, props.children);
+        renderNodeDestructive(request, task, null, props.children);
         return;
       }
       throw new Error('ReactDOMServer does not yet support scope components.');
@@ -1156,11 +1205,11 @@ function renderElement(
   if (typeof type === 'object' && type !== null) {
     switch (type.$$typeof) {
       case REACT_FORWARD_REF_TYPE: {
-        renderForwardRef(request, task, type, props, ref);
+        renderForwardRef(request, task, prevThenableState, type, props, ref);
         return;
       }
       case REACT_MEMO_TYPE: {
-        renderMemo(request, task, type, props, ref);
+        renderMemo(request, task, prevThenableState, type, props, ref);
         return;
       }
       case REACT_PROVIDER_TYPE: {
@@ -1172,7 +1221,7 @@ function renderElement(
         return;
       }
       case REACT_LAZY_TYPE: {
-        renderLazyComponent(request, task, type, props);
+        renderLazyComponent(request, task, prevThenableState, type, props);
         return;
       }
     }
@@ -1237,6 +1286,9 @@ function validateIterable(iterable, iteratorFn: Function): void {
 function renderNodeDestructive(
   request: Request,
   task: Task,
+  // The thenable state reused from the previous attempt, if any. This is almost
+  // always null, except when called by retryTask.
+  prevThenableState: ThenableState | null,
   node: ReactNodeList,
 ): void {
   if (__DEV__) {
@@ -1244,7 +1296,7 @@ function renderNodeDestructive(
     // a component stack at the right place in the tree. We don't do this in renderNode
     // becuase it is not called at every layer of the tree and we may lose frames
     try {
-      return renderNodeDestructiveImpl(request, task, node);
+      return renderNodeDestructiveImpl(request, task, prevThenableState, node);
     } catch (x) {
       if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
         // This is a Wakable, noop
@@ -1259,7 +1311,7 @@ function renderNodeDestructive(
       throw x;
     }
   } else {
-    return renderNodeDestructiveImpl(request, task, node);
+    return renderNodeDestructiveImpl(request, task, prevThenableState, node);
   }
 }
 
@@ -1268,6 +1320,7 @@ function renderNodeDestructive(
 function renderNodeDestructiveImpl(
   request: Request,
   task: Task,
+  prevThenableState: ThenableState | null,
   node: ReactNodeList,
 ): void {
   // Stash the node we're working on. We'll pick up from this task in case
@@ -1282,7 +1335,7 @@ function renderNodeDestructiveImpl(
         const type = element.type;
         const props = element.props;
         const ref = element.ref;
-        renderElement(request, task, type, props, ref);
+        renderElement(request, task, prevThenableState, type, props, ref);
         return;
       }
       case REACT_PORTAL_TYPE:
@@ -1316,7 +1369,7 @@ function renderNodeDestructiveImpl(
         } else {
           resolvedNode = init(payload);
         }
-        renderNodeDestructive(request, task, resolvedNode);
+        renderNodeDestructive(request, task, null, resolvedNode);
         return;
       }
     }
@@ -1417,6 +1470,7 @@ function renderChildrenArray(request, task, children) {
 function spawnNewSuspendedTask(
   request: Request,
   task: Task,
+  thenableState: ThenableState | null,
   x: Promise<any>,
 ): void {
   // Something suspended, we'll need to create a new segment and resolve it later.
@@ -1437,6 +1491,7 @@ function spawnNewSuspendedTask(
   segment.lastPushedText = false;
   const newTask = createTask(
     request,
+    thenableState,
     task.node,
     task.blockedBoundary,
     newSegment,
@@ -1445,6 +1500,9 @@ function spawnNewSuspendedTask(
     task.context,
     task.treeContext,
   );
+
+  trackSuspendedWakeable(x);
+
   if (__DEV__) {
     if (task.componentStack !== null) {
       // We pop one task off the stack because the node that suspended will be tried again,
@@ -1472,11 +1530,13 @@ function renderNode(request: Request, task: Task, node: ReactNodeList): void {
     previousComponentStack = task.componentStack;
   }
   try {
-    return renderNodeDestructive(request, task, node);
+    return renderNodeDestructive(request, task, null, node);
   } catch (x) {
     resetHooksState();
     if (typeof x === 'object' && x !== null && typeof x.then === 'function') {
-      spawnNewSuspendedTask(request, task, x);
+      const thenableState = getThenableStateAfterSuspending();
+      spawnNewSuspendedTask(request, task, thenableState, x);
+
       // 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.blockedSegment.formatContext = previousFormatContext;
@@ -1731,7 +1791,14 @@ function retryTask(request: Request, task: Task): void {
   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.
-    renderNodeDestructive(request, task, task.node);
+
+    // 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;
+
+    renderNodeDestructive(request, task, prevThenableState, task.node);
     pushSegmentFinale(
       segment.chunks,
       request.responseState,
@@ -1748,6 +1815,10 @@ function retryTask(request: Request, task: Task): void {
       // Something suspended again, let's pick it back up later.
       const ping = task.ping;
       x.then(ping, ping);
+
+      const wakeable: Wakeable = x;
+      trackSuspendedWakeable(wakeable);
+      task.thenableState = getThenableStateAfterSuspending();
     } else {
       task.abortSet.delete(task);
       segment.status = ERRORED;
diff --git a/packages/react-server/src/ReactFizzWakeable.js b/packages/react-server/src/ReactFizzWakeable.js
new file mode 100644
index 000000000000..5a42ed396c4d
--- /dev/null
+++ b/packages/react-server/src/ReactFizzWakeable.js
@@ -0,0 +1,107 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+// Corresponds to ReactFiberWakeable and ReactFlightWakeable 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 {
+  Wakeable,
+  Thenable,
+  PendingThenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
+
+// TODO: Sparse arrays are bad for performance.
+export opaque type ThenableState = Array<Thenable<any> | void>;
+
+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 trackSuspendedWakeable(wakeable: Wakeable) {
+  // If this wakeable isn't already a thenable, turn it into one now. Then,
+  // when we resume the work loop, we can check if its status is
+  // still pending.
+  // TODO: Get rid of the Wakeable type? It's superseded by UntrackedThenable.
+  const thenable: Thenable<mixed> = (wakeable: any);
+
+  // 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 'pending':
+      // Since the status is already "pending", we can assume it will be updated
+      // when it resolves, either by React or something in userspace.
+      break;
+    case 'fulfilled':
+    case 'rejected':
+      // A thenable that already resolved shouldn't have been thrown, so this is
+      // unexpected. Suggests a mistake in a userspace data library. Don't track
+      // this thenable, because if we keep trying it will likely infinite loop
+      // without ever resolving.
+      // TODO: Log a warning?
+      break;
+    default: {
+      // TODO: 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.
+      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;
+    }
+  }
+}
+
+export function trackUsedThenable<T>(
+  thenableState: ThenableState,
+  thenable: Thenable<T>,
+  index: number,
+) {
+  // This is only a separate function from trackSuspendedWakeable for symmetry
+  // with Fiber.
+  thenableState[index] = thenable;
+}
+
+export function getPreviouslyUsedThenableAtIndex<T>(
+  thenableState: ThenableState | null,
+  index: number,
+): Thenable<T> | null {
+  if (thenableState !== null) {
+    const thenable = thenableState[index];
+    if (thenable !== undefined) {
+      return thenable;
+    }
+  }
+  return null;
+}
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index 2644898f1cf5..f4784c82e1cf 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -40,7 +40,9 @@ export function prepareToUseHooksForComponent(
 }
 
 export function getThenableStateAfterSuspending() {
-  return thenableState;
+  const state = thenableState;
+  thenableState = null;
+  return state;
 }
 
 function readContext<T>(context: ReactServerContext<T>): T {
diff --git a/packages/react-server/src/ReactFlightWakeable.js b/packages/react-server/src/ReactFlightWakeable.js
index c4d2e67d863b..c3eda3c16aee 100644
--- a/packages/react-server/src/ReactFlightWakeable.js
+++ b/packages/react-server/src/ReactFlightWakeable.js
@@ -7,8 +7,8 @@
  * @flow
  */
 
-// Corresponds to ReactFiberWakeable module. Generally, changes to one module
-// should be reflected in the other.
+// 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.

From 37cc6bf12400b76cb79bb504071926ac91b4989e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Fri, 9 Sep 2022 09:32:40 -0400
Subject: [PATCH 1560/1603] Remove useDeferredValue and useTransition from
 Flight subset (#25215)

---
 packages/react/src/ReactSharedSubset.experimental.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/ReactSharedSubset.experimental.js b/packages/react/src/ReactSharedSubset.experimental.js
index 076349e29383..b05ec07302ed 100644
--- a/packages/react/src/ReactSharedSubset.experimental.js
+++ b/packages/react/src/ReactSharedSubset.experimental.js
@@ -32,8 +32,6 @@ export {
   useCallback,
   useContext,
   useDebugValue,
-  useDeferredValue,
   useMemo,
-  useTransition,
   version,
 } from './React';

From 8a9e7b6cefb5e7e94333c7d5fe2cca6541776d5b Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Fri, 9 Sep 2022 10:13:58 -0400
Subject: [PATCH 1561/1603] Flow: implicit-inexact-object=error (#25210)

* implicit-inexact-object=error
* default everything ambiguous to exact object
* inexact where exact causes errors
---
 .../react-client/src/ReactFlightClient.js     | 29 ++++++++++--------
 .../src/ReactFlightClientHostConfigStream.js  |  4 +--
 .../react-debug-tools/src/ReactDebugHooks.js  |  8 ++---
 packages/react-devtools-shared/src/Logger.js  | 12 ++++----
 .../src/backend/console.js                    |  4 +--
 .../react-devtools-shared/src/constants.js    |  2 +-
 .../devtools/ContextMenu/useContextMenu.js    |  2 +-
 .../InspectedElementErrorsAndWarningsTree.js  |  2 +-
 .../views/Profiler/HoveredFiberInfo.js        |  4 +--
 .../views/Profiler/SnapshotCommitList.js      |  4 +--
 packages/react-devtools-shared/src/hook.js    |  4 +--
 .../src/hooks/astUtils.js                     |  4 +--
 .../src/inspectedElementCache.js              |  4 +--
 .../react-window/src/VariableSizeGrid.js      |  2 +-
 .../react-window/src/VariableSizeList.js      |  2 +-
 .../react-devtools-timeline/src/CanvasPage.js |  2 +-
 packages/react-devtools-timeline/src/types.js |  4 +--
 .../src/utils/useSmartTooltip.js              |  4 +--
 .../src/view-base/resizable/ResizableView.js  |  4 +--
 .../src/view-base/utils/scrollState.js        | 20 ++++++-------
 .../src/client/ReactDOMHostConfig.js          |  6 ++--
 .../src/events/ReactSyntheticEventType.js     | 12 ++++----
 .../react-dom/src/events/SyntheticEvent.js    |  5 ++--
 .../src/server/ReactDOMFizzServerBrowser.js   |  4 +--
 .../src/server/ReactDOMLegacyServerBrowser.js |  4 +--
 .../src/server/ReactDOMLegacyServerImpl.js    |  4 +--
 .../src/server/ReactDOMLegacyServerNode.js    |  4 +--
 .../server/ReactDOMLegacyServerNodeStream.js  |  4 +--
 .../src/server/ReactDOMServerFormatConfig.js  |  8 ++---
 .../ReactDOMServerLegacyFormatConfig.js       |  4 +--
 packages/react-fs/src/ReactFilesystem.js      | 14 ++++-----
 .../src/dom/create-event-handle/Focus.js      | 26 ++++++++--------
 .../src/ReactFabricHostConfig.js              |  6 ++--
 .../src/ReactNativeTypes.js                   | 20 ++++++-------
 .../src/legacy-events/PluginModuleType.js     |  4 +--
 .../server/ReactNativeServerFormatConfig.js   |  4 +--
 .../src/ReactFiberConcurrentUpdates.new.js    |  8 ++---
 .../src/ReactFiberConcurrentUpdates.old.js    |  8 ++---
 .../src/ReactFiberHiddenContext.new.js        |  1 +
 .../src/ReactFiberHiddenContext.old.js        |  1 +
 .../src/ReactFiberHooks.new.js                |  4 +--
 .../src/ReactFiberHooks.old.js                |  4 +--
 .../src/ReactFiberRoot.new.js                 |  4 +--
 .../src/ReactFiberRoot.old.js                 |  4 +--
 .../ReactFiberTracingMarkerComponent.new.js   | 18 +++++------
 .../ReactFiberTracingMarkerComponent.old.js   | 18 +++++------
 .../src/ReactFiberTreeContext.new.js          |  4 +--
 .../src/ReactFiberTreeContext.old.js          |  4 +--
 .../src/ReactInternalTypes.js                 | 18 +++++------
 .../src/ReactTestSelectors.js                 |  6 ++--
 .../src/ReactDOMServerFB.js                   |  8 ++---
 .../src/ReactFlightDOMRelayClient.js          |  2 ++
 .../src/ReactFlightDOMRelayProtocol.js        |  4 +--
 .../src/ReactFlightDOMRelayServer.js          |  4 +--
 .../ReactFlightDOMRelayServerHostConfig.js    |  9 ++++--
 .../src/ReactServerStreamConfigFB.js          |  4 +--
 .../ReactFlightClientWebpackBundlerConfig.js  | 12 ++++----
 .../src/ReactFlightDOMClient.js               |  4 +--
 .../src/ReactFlightDOMServerBrowser.js        |  4 +--
 .../src/ReactFlightDOMServerNode.js           |  4 +--
 .../ReactFlightServerWebpackBundlerConfig.js  | 16 +++++-----
 .../src/ReactFlightWebpackNodeLoader.js       | 26 ++++++++--------
 .../src/ReactFlightWebpackNodeRegister.js     |  4 +--
 .../src/ReactFlightWebpackPlugin.js           |  8 ++---
 .../src/ReactFlightNativeRelayClient.js       |  2 ++
 .../src/ReactFlightNativeRelayProtocol.js     |  2 +-
 .../ReactFlightNativeRelayServerHostConfig.js |  8 +++--
 .../src/ReactFizzClassComponent.js            |  4 +--
 .../src/ReactFizzComponentStack.js            | 12 ++++----
 .../react-server/src/ReactFizzNewContext.js   |  4 +--
 packages/react-server/src/ReactFizzServer.js  | 20 ++++++-------
 .../react-server/src/ReactFizzTreeContext.js  |  4 +--
 .../react-server/src/ReactFlightNewContext.js |  4 +--
 .../react-server/src/ReactFlightServer.js     | 21 +++++++------
 packages/react/src/ReactChildren.js           |  4 +--
 packages/react/src/ReactCurrentBatchConfig.js |  4 +--
 packages/react/src/ReactLazy.js               | 22 +++++++-------
 .../scheduler/src/forks/SchedulerPostTask.js  |  2 +-
 packages/shared/ReactTypes.js                 |  6 ++--
 scripts/flow/config/flowconfig                |  1 +
 scripts/flow/environment.js                   | 30 +++++++++----------
 scripts/flow/react-native-host-hooks.js       |  2 +-
 scripts/flow/react-relay-hooks.js             |  2 +-
 83 files changed, 323 insertions(+), 292 deletions(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index d6ae368abf12..584639921e51 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -34,7 +34,7 @@ export type JSONValue =
   | null
   | boolean
   | string
-  | {+[key: string]: JSONValue}
+  | {|+[key: string]: JSONValue|}
   | $ReadOnlyArray<JSONValue>;
 
 const PENDING = 0;
@@ -43,36 +43,36 @@ const RESOLVED_MODULE = 2;
 const INITIALIZED = 3;
 const ERRORED = 4;
 
-type PendingChunk = {
+type PendingChunk = {|
   _status: 0,
   _value: null | Array<() => mixed>,
   _response: Response,
   then(resolve: () => mixed): void,
-};
-type ResolvedModelChunk = {
+|};
+type ResolvedModelChunk = {|
   _status: 1,
   _value: UninitializedModel,
   _response: Response,
   then(resolve: () => mixed): void,
-};
-type ResolvedModuleChunk<T> = {
+|};
+type ResolvedModuleChunk<T> = {|
   _status: 2,
   _value: ModuleReference<T>,
   _response: Response,
   then(resolve: () => mixed): void,
-};
-type InitializedChunk<T> = {
+|};
+type InitializedChunk<T> = {|
   _status: 3,
   _value: T,
   _response: Response,
   then(resolve: () => mixed): void,
-};
-type ErroredChunk = {
+|};
+type ErroredChunk = {|
   _status: 4,
   _value: Error,
   _response: Response,
   then(resolve: () => mixed): void,
-};
+|};
 type SomeChunk<T> =
   | PendingChunk
   | ResolvedModelChunk
@@ -129,10 +129,12 @@ function readRoot<T>(): T {
 }
 
 function createPendingChunk(response: Response): PendingChunk {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(PENDING, null, response);
 }
 
 function createErrorChunk(response: Response, error: Error): ErroredChunk {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(ERRORED, error, response);
 }
 
@@ -140,6 +142,7 @@ function createInitializedChunk<T>(
   response: Response,
   value: T,
 ): InitializedChunk<T> {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(INITIALIZED, value, response);
 }
 
@@ -168,6 +171,7 @@ function createResolvedModelChunk(
   response: Response,
   value: UninitializedModel,
 ): ResolvedModelChunk {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(RESOLVED_MODEL, value, response);
 }
 
@@ -175,6 +179,7 @@ function createResolvedModuleChunk<T>(
   response: Response,
   value: ModuleReference<T>,
 ): ResolvedModuleChunk<T> {
+  // $FlowFixMe Flow doesn't support functions as constructors
   return new Chunk(RESOLVED_MODULE, value, response);
 }
 
@@ -333,7 +338,7 @@ export function parseModelString(
 
 export function parseModelTuple(
   response: Response,
-  value: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>,
+  value: {|+[key: string]: JSONValue|} | $ReadOnlyArray<JSONValue>,
 ): any {
   const tuple: [mixed, mixed, mixed, mixed] = (value: any);
 
diff --git a/packages/react-client/src/ReactFlightClientHostConfigStream.js b/packages/react-client/src/ReactFlightClientHostConfigStream.js
index 2005e8a98a9e..d56e5d43128f 100644
--- a/packages/react-client/src/ReactFlightClientHostConfigStream.js
+++ b/packages/react-client/src/ReactFlightClientHostConfigStream.js
@@ -10,11 +10,11 @@
 import type {ResponseBase} from './ReactFlightClient';
 import type {StringDecoder} from './ReactFlightClientHostConfig';
 
-export type Response = ResponseBase & {
+export type Response = ResponseBase & {|
   _partialRow: string,
   _fromJSON: (key: string, value: JSONValue) => any,
   _stringDecoder: StringDecoder,
-};
+|};
 
 export type UninitializedModel = string;
 
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 7cfb576fad37..68305e4a9369 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -51,10 +51,10 @@ type Dispatch<A> = A => void;
 
 let primitiveStackCache: null | Map<string, Array<any>> = null;
 
-type Hook = {
+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
@@ -371,12 +371,12 @@ const DispatcherProxy = new Proxy(Dispatcher, DispatcherProxyHandler);
 
 // Inspect
 
-export type HookSource = {
+export type HookSource = {|
   lineNumber: number | null,
   columnNumber: number | null,
   fileName: string | null,
   functionName: string | null,
-};
+|};
 
 export type HooksNode = {
   id: number | null,
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index ddf60f8fd70f..6ddb40f0a97e 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -34,24 +34,24 @@ export type LoggerEvent =
     |}
   | {|
       +event_name: 'select-element',
-      +metadata: {
+      +metadata: {|
         +source: string,
-      },
+      |},
     |}
   | {|
       +event_name: 'inspect-element-button-clicked',
     |}
   | {|
       +event_name: 'profiling-start',
-      +metadata: {
+      +metadata: {|
         +current_tab: string,
-      },
+      |},
     |}
   | {|
       +event_name: 'profiler-tab-changed',
-      +metadata: {
+      +metadata: {|
         +tabId: string,
-      },
+      |},
     |}
   | {|
       +event_name: 'settings-changed',
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index ee802f8ea47a..03c36c14dcf7 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -151,13 +151,13 @@ export function patch({
   showInlineWarningsAndErrors,
   hideConsoleLogsInStrictMode,
   browserTheme,
-}: {
+}: {|
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
   browserTheme: BrowserTheme,
-}): void {
+|}): void {
   // Settings may change after we've patched the console.
   // Using a shared ref allows the patch function to read the latest values.
   consoleSettingsRef.appendComponentStack = appendComponentStack;
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 2406f4876d20..8853e46f24c1 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -79,7 +79,7 @@ import type {
   DisplayDensity,
 } from './devtools/views/Settings/SettingsContext';
 
-export const THEME_STYLES: {[style: Theme | DisplayDensity]: any} = {
+export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
   light: {
     '--color-attribute-name': '#ef6632',
     '--color-attribute-name-not-editable': '#23272f',
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
index 150cb0766fc5..3493c5561570 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
@@ -22,7 +22,7 @@ export default function useContextMenu({
   data: Object,
   id: string,
   onChange?: OnChangeFn,
-  ref: {current: ElementRef<*> | null},
+  ref: {|current: ElementRef<*> | null|},
 |}) {
   const {showMenu} = useContext<RegistryContextType>(RegistryContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 7f7be4677e03..d45126c359f6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -119,7 +119,7 @@ type TreeProps = {|
   badgeClassName: string,
   actions: React$Node,
   className: string,
-  clearMessages: () => {},
+  clearMessages: () => void,
   entries: Array<[string, number]>,
   isTransitionPending: boolean,
   label: string,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
index 0dd5d67b2a16..cc3989c7b4a8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -23,9 +23,9 @@ export type TooltipFiberData = {|
   name: string,
 |};
 
-export type Props = {
+export type Props = {|
   fiberData: ChartNode,
-};
+|};
 
 export default function HoveredFiberInfo({fiberData}: Props) {
   const {profilerStore} = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 2b837f28f649..56f62e01c573 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -82,11 +82,11 @@ type ListProps = {|
   width: number,
 |};
 
-type DragState = {
+type DragState = {|
   commitIndex: number,
   left: number,
   sizeIncrement: number,
-};
+|};
 
 function List({
   commitData,
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 29cdea1e2b0b..4ed128ba9df9 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -224,10 +224,10 @@ export function installHook(target: any): DevToolsHook | null {
   function patchConsoleForInitialRenderInStrictMode({
     hideConsoleLogsInStrictMode,
     browserTheme,
-  }: {
+  }: {|
     hideConsoleLogsInStrictMode: boolean,
     browserTheme: BrowserTheme,
-  }) {
+  |}) {
     const overrideConsoleMethods = [
       'error',
       'group',
diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
index 27db408c0500..8d3c5e2fa2b0 100644
--- a/packages/react-devtools-shared/src/hooks/astUtils.js
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -18,11 +18,11 @@ export type Position = {|
   column: number,
 |};
 
-export type SourceFileASTWithHookDetails = {
+export type SourceFileASTWithHookDetails = {|
   sourceFileAST: File,
   line: number,
   source: string,
-};
+|};
 
 export const NO_HOOK_NAME = '<no-hook>';
 
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index b7f08ffa523a..b1f820405848 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -168,12 +168,12 @@ export function checkForUpdate({
   element,
   refresh,
   store,
-}: {
+}: {|
   bridge: FrontendBridge,
   element: Element,
   refresh: RefreshFunction,
   store: Store,
-}): void {
+|}): void {
   const {id} = element;
   const rendererID = store.getRendererIDForElement(id);
   if (rendererID != null) {
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
index 46d59521f197..2ce4f2d9a04c 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
@@ -19,7 +19,7 @@ type ItemMetadata = {|
   offset: number,
   size: number,
 |};
-type ItemMetadataMap = { [index: number]: ItemMetadata };
+type ItemMetadataMap = { [index: number]: ItemMetadata, ... };
 type InstanceProps = {|
   columnMetadataMap: ItemMetadataMap,
   estimatedColumnWidth: number,
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
index f4ad10323101..887641b010ee 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
@@ -18,7 +18,7 @@ type ItemMetadata = {|
   size: number,
 |};
 type InstanceProps = {|
-  itemMetadataMap: { [index: number]: ItemMetadata },
+  itemMetadataMap: { [index: number]: ItemMetadata, ... },
   estimatedItemSize: number,
   lastMeasuredIndex: number,
 |};
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 3abc8ea7a399..273b67bed170 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -80,7 +80,7 @@ function CanvasPage({profilerData, viewState}: Props) {
       className={styles.CanvasPage}
       style={{backgroundColor: COLORS.BACKGROUND}}>
       <AutoSizer>
-        {({height, width}: {height: number, width: number}) => (
+        {({height, width}: {|height: number, width: number|}) => (
           <AutoSizedCanvas
             data={profilerData}
             height={height}
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index 0d8766726ff5..429f0a2d210d 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -17,11 +17,11 @@ export type Return<T> = Return_<*, T>;
 
 // Project types
 
-export type ErrorStackFrame = {
+export type ErrorStackFrame = {|
   fileName: string,
   lineNumber: number,
   columnNumber: number,
-};
+|};
 
 export type Milliseconds = number;
 
diff --git a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
index 16cdec365f61..2a36396b8fab 100644
--- a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
+++ b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
@@ -16,11 +16,11 @@ export default function useSmartTooltip({
   canvasRef,
   mouseX,
   mouseY,
-}: {
+}: {|
   canvasRef: {|current: HTMLCanvasElement | null|},
   mouseX: number,
   mouseY: number,
-}) {
+|}) {
   const ref = useRef<HTMLElement | null>(null);
 
   // HACK: Browser extension reports window.innerHeight of 0,
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
index b56422f715a5..36b8f201e470 100644
--- a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
+++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
@@ -47,7 +47,7 @@ const HIDDEN_RECT = {
 };
 
 export class ResizableView extends View {
-  _canvasRef: {current: HTMLCanvasElement | null};
+  _canvasRef: {|current: HTMLCanvasElement | null|};
   _layoutState: LayoutState;
   _mutableViewStateKey: string;
   _resizeBar: ResizeBarView;
@@ -60,7 +60,7 @@ export class ResizableView extends View {
     frame: Rect,
     subview: View,
     viewState: ViewState,
-    canvasRef: {current: HTMLCanvasElement | null},
+    canvasRef: {|current: HTMLCanvasElement | null|},
     label: string,
   ) {
     super(surface, frame, noopLayout);
diff --git a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
index 9e9bdb4919f3..8089c81e3192 100644
--- a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
+++ b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
@@ -35,12 +35,12 @@ function clampLength({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {
+}: {|
   state: ScrollState,
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-}): ScrollState {
+|}): ScrollState {
   return {
     offset: state.offset,
     length: clamp(
@@ -62,12 +62,12 @@ export function clampState({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {
+}: {|
   state: ScrollState,
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-}): ScrollState {
+|}): ScrollState {
   return clampOffset(
     clampLength({
       state,
@@ -83,11 +83,11 @@ export function translateState({
   state,
   delta,
   containerLength,
-}: {
+}: {|
   state: ScrollState,
   delta: number,
   containerLength: number,
-}): ScrollState {
+|}): ScrollState {
   return clampOffset(
     {
       offset: state.offset + delta,
@@ -119,7 +119,7 @@ export function zoomState({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {
+}: {|
   state: ScrollState,
   multiplier: number,
   fixedPoint: number,
@@ -127,7 +127,7 @@ export function zoomState({
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-}): ScrollState {
+|}): 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).
 
@@ -164,7 +164,7 @@ export function moveStateToRange({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {
+}: {|
   state: ScrollState,
   rangeStart: number,
   rangeEnd: number,
@@ -173,7 +173,7 @@ export function moveStateToRange({
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-}): ScrollState {
+|}): 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).
 
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 52646306767c..11f527ad583d 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -733,7 +733,7 @@ export function isSuspenseInstanceFallback(instance: SuspenseInstance) {
 
 export function getSuspenseInstanceFallbackErrorDetails(
   instance: SuspenseInstance,
-): {digest: ?string, message?: string, stack?: string} {
+): {|digest: ?string, message?: string, stack?: string|} {
   const dataset =
     instance.nextSibling && ((instance.nextSibling: any): HTMLElement).dataset;
   let digest, message, stack;
@@ -1320,10 +1320,10 @@ export function setFocusIfFocusable(node: Instance): boolean {
   return didFocus;
 }
 
-type RectRatio = {
+type RectRatio = {|
   ratio: number,
   rect: BoundingRect,
-};
+|};
 
 export function setupIntersectionObserver(
   targets: Array<Instance>,
diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js
index d92777a75cce..92ab3f94c584 100644
--- a/packages/react-dom/src/events/ReactSyntheticEventType.js
+++ b/packages/react-dom/src/events/ReactSyntheticEventType.js
@@ -20,7 +20,7 @@ export type DispatchConfig = {|
   registrationName?: string,
 |};
 
-type BaseSyntheticEvent = {
+type BaseSyntheticEvent = {|
   isPersistent: () => boolean,
   isPropagationStopped: () => boolean,
   _dispatchInstances?: null | Array<Fiber | null> | Fiber,
@@ -31,14 +31,14 @@ type BaseSyntheticEvent = {
   relatedTarget?: mixed,
   type: string,
   currentTarget: null | EventTarget,
-};
+|};
 
-export type KnownReactSyntheticEvent = BaseSyntheticEvent & {
+export type KnownReactSyntheticEvent = BaseSyntheticEvent & {|
   _reactName: string,
-};
-export type UnknownReactSyntheticEvent = BaseSyntheticEvent & {
+|};
+export type UnknownReactSyntheticEvent = BaseSyntheticEvent & {|
   _reactName: null,
-};
+|};
 
 export type ReactSyntheticEvent =
   | KnownReactSyntheticEvent
diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 2c61b9a42ec2..0da906d71289 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -13,7 +13,8 @@ import assign from 'shared/assign';
 import getEventCharCode from './getEventCharCode';
 
 type EventInterfaceType = {
-  [propName: string]: 0 | ((event: {[propName: string]: mixed}) => mixed),
+  [propName: string]: 0 | ((event: {[propName: string]: mixed, ...}) => mixed),
+  ...,
 };
 
 function functionThatReturnsTrue() {
@@ -44,7 +45,7 @@ function createSyntheticEvent(Interface: EventInterfaceType) {
     reactName: string | null,
     reactEventType: string,
     targetInst: Fiber,
-    nativeEvent: {[propName: string]: mixed},
+    nativeEvent: {[propName: string]: mixed, ...},
     nativeEventTarget: null | EventTarget,
   ) {
     this._reactName = reactName;
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 25920232e871..953c31602f49 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -37,9 +37,9 @@ type Options = {|
 |};
 
 // TODO: Move to sub-classing ReadableStream.
-type ReactDOMServerReadableStream = ReadableStream & {
+type ReactDOMServerReadableStream = ReadableStream & {|
   allReady: Promise<void>,
-};
+|};
 
 function renderToReadableStream(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index 71786e4b5078..f1ca01de6b71 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -11,9 +11,9 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {version, renderToStringImpl} from './ReactDOMLegacyServerImpl';
 
-type ServerOptions = {
+type ServerOptions = {|
   identifierPrefix?: string,
-};
+|};
 
 function renderToString(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
index 504201f3c24f..acb0a3c1c04f 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -23,9 +23,9 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerLegacyFormatConfig';
 
-type ServerOptions = {
+type ServerOptions = {|
   identifierPrefix?: string,
-};
+|};
 
 function onError() {
   // Non-fatal errors are ignored.
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index 20e89de8b430..7c38c23101dc 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -15,9 +15,9 @@ import {
   renderToStaticNodeStream,
 } from './ReactDOMLegacyServerNodeStream';
 
-type ServerOptions = {
+type ServerOptions = {|
   identifierPrefix?: string,
-};
+|};
 
 function renderToString(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
index 25b88156e075..28bfadd240b3 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
@@ -25,9 +25,9 @@ import {
 
 import {Readable} from 'stream';
 
-type ServerOptions = {
+type ServerOptions = {|
   identifierPrefix?: string,
-};
+|};
 
 class ReactMarkupReadableStream extends Readable {
   request: Request;
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index c30d9673265c..b24edf264c6f 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -105,10 +105,10 @@ const scriptRegex = /(<\/|<)(s)(cript)/gi;
 const scriptReplacer = (match, prefix, s, suffix) =>
   `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
 
-export type BootstrapScriptDescriptor = {
+export type BootstrapScriptDescriptor = {|
   src: string,
   integrity?: string,
-};
+|};
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
@@ -203,10 +203,10 @@ const HTML_COLGROUP_MODE = 7;
 type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
 // Lets us keep track of contextual state and pick it back up after suspending.
-export type FormatContext = {
+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>
-};
+|};
 
 function createFormatContext(
   insertionMode: InsertionMode,
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 375562e80b56..29a4793c963b 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -28,7 +28,7 @@ import type {
 
 export const isPrimaryRenderer = false;
 
-export type ResponseState = {
+export type ResponseState = {|
   // Keep this in sync with ReactDOMServerFormatConfig
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   startInlineScript: PrecomputedChunk,
@@ -42,7 +42,7 @@ export type ResponseState = {
   sentClientRenderFunction: boolean,
   // This is an extra field for the legacy renderer
   generateStaticMarkup: boolean,
-};
+|};
 
 export function createResponseState(
   generateStaticMarkup: boolean,
diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js
index e505005e21db..acbe599010a9 100644
--- a/packages/react-fs/src/ReactFilesystem.js
+++ b/packages/react-fs/src/ReactFilesystem.js
@@ -128,7 +128,7 @@ function createLstatMap(): Map<string, Array<boolean | Record<mixed>>> {
   return new Map();
 }
 
-export function lstat(path: string, options?: {bigint?: boolean}): mixed {
+export function lstat(path: string, options?: {|bigint?: boolean|}): mixed {
   checkPathInDev(path);
   let bigint = false;
   if (options && options.bigint) {
@@ -167,7 +167,7 @@ function createReaddirMap(): Map<
 
 export function readdir(
   path: string,
-  options?: string | {encoding?: string, withFileTypes?: boolean},
+  options?: string | {|encoding?: string, withFileTypes?: boolean|},
 ): mixed {
   checkPathInDev(path);
   let encoding = 'utf8';
@@ -215,12 +215,12 @@ export function readFile(
   path: string,
   options:
     | string
-    | {
+    | {|
         encoding?: string | null,
         // Unsupported:
         flag?: string, // Doesn't make sense except "r"
         signal?: mixed, // We'll have our own signal
-      },
+      |},
 ): string | Buffer {
   checkPathInDev(path);
   const map = unstable_getCacheForType(createReadFileMap);
@@ -270,7 +270,7 @@ function createReadlinkMap(): Map<string, Array<string | Record<mixed>>> {
 
 export function readlink(
   path: string,
-  options?: string | {encoding?: string},
+  options?: string | {|encoding?: string|},
 ): mixed {
   checkPathInDev(path);
   let encoding = 'utf8';
@@ -311,7 +311,7 @@ function createRealpathMap(): Map<string, Array<string | Record<mixed>>> {
 
 export function realpath(
   path: string,
-  options?: string | {encoding?: string},
+  options?: string | {|encoding?: string|},
 ): mixed {
   checkPathInDev(path);
   let encoding = 'utf8';
@@ -350,7 +350,7 @@ function createStatMap(): Map<string, Array<boolean | Record<mixed>>> {
   return new Map();
 }
 
-export function stat(path: string, options?: {bigint?: boolean}): mixed {
+export function stat(path: string, options?: {|bigint?: boolean|}): mixed {
   checkPathInDev(path);
   let bigint = false;
   if (options && options.bigint) {
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
index 19b0b9cbee40..4f988293db93 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
@@ -14,15 +14,15 @@ const {useCallback, useEffect, useLayoutEffect, useRef} = React;
 
 type FocusEvent = SyntheticEvent<EventTarget>;
 
-type UseFocusOptions = {
+type UseFocusOptions = {|
   disabled?: boolean,
   onBlur?: ?(FocusEvent) => void,
   onFocus?: ?(FocusEvent) => void,
   onFocusChange?: ?(boolean) => void,
   onFocusVisibleChange?: ?(boolean) => void,
-};
+|};
 
-type UseFocusWithinOptions = {
+type UseFocusWithinOptions = {|
   disabled?: boolean,
   onAfterBlurWithin?: FocusEvent => void,
   onBeforeBlurWithin?: FocusEvent => void,
@@ -30,7 +30,7 @@ type UseFocusWithinOptions = {
   onFocusWithin?: FocusEvent => void,
   onFocusWithinChange?: boolean => void,
   onFocusWithinVisibleChange?: boolean => void,
-};
+|};
 
 const isMac =
   typeof window !== 'undefined' && window.navigator != null
@@ -154,7 +154,7 @@ function useFocusLifecycles() {
 }
 
 export function useFocus(
-  focusTargetRef: {current: null | Node},
+  focusTargetRef: {|current: null | Node|},
   {
     disabled,
     onBlur,
@@ -164,9 +164,10 @@ export function useFocus(
   }: UseFocusOptions,
 ): void {
   // Setup controlled state for this useFocus hook
-  const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
-    {isFocused: false, isFocusVisible: false},
-  );
+  const stateRef = useRef<null | {|
+    isFocused: boolean,
+    isFocusVisible: boolean,
+  |}>({isFocused: false, isFocusVisible: false});
   const focusHandle = useEvent('focusin');
   const blurHandle = useEvent('focusout');
   const focusVisibleHandles = useFocusVisibleInputHandles();
@@ -248,7 +249,7 @@ export function useFocus(
 
 export function useFocusWithin<T>(
   focusWithinTargetRef:
-    | {current: null | T}
+    | {|current: null | T|}
     | ((focusWithinTarget: null | T) => void),
   {
     disabled,
@@ -261,9 +262,10 @@ export function useFocusWithin<T>(
   }: UseFocusWithinOptions,
 ): (focusWithinTarget: null | T) => void {
   // Setup controlled state for this useFocus hook
-  const stateRef = useRef<null | {isFocused: boolean, isFocusVisible: boolean}>(
-    {isFocused: false, isFocusVisible: false},
-  );
+  const stateRef = useRef<null | {|
+    isFocused: boolean,
+    isFocusVisible: boolean,
+  |}>({isFocused: false, isFocusVisible: false});
   const focusHandle = useEvent('focusin');
   const blurHandle = useEvent('focusout');
   const afterBlurHandle = useEvent('afterblur');
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index c5c029006578..febd24aaf3c9 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -108,13 +108,13 @@ export type EventListenerRemoveOptions = $ReadOnly<{|
 // TODO?: this will be changed in the future to be w3c-compatible and allow "EventListener" objects as well as functions.
 export type EventListener = Function;
 
-type InternalEventListeners = {
+type InternalEventListeners = {|
   [string]: {|
     listener: EventListener,
     options: EventListenerOptions,
     invalidated: boolean,
   |}[],
-};
+|};
 
 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {
@@ -255,6 +255,8 @@ class ReactFabricHostComponent {
     const passive = optionsObj.passive || false;
     const signal = null; // TODO: implement signal/AbortSignal
 
+    /* $FlowFixMe the old version of Flow doesn't have a good way to define an
+     * empty exact object. */
     const eventListeners: InternalEventListeners = this._eventListeners || {};
     if (this._eventListeners == null) {
       this._eventListeners = eventListeners;
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 4d2fdcc6afc3..30583e45ae85 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -62,38 +62,38 @@ export type PartialAttributeConfiguration = $ReadOnly<{
   ...
 }>;
 
-export type ViewConfig = $ReadOnly<{
+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<{
+    [eventName: string]: $ReadOnly<{|
+      phasedRegistrationNames: $ReadOnly<{|
         captured: string,
         bubbled: string,
         skipBubbling?: ?boolean,
-      }>,
-    }>,
+      |}>,
+    |}>,
     ...,
   }>,
   directEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{
+    [eventName: string]: $ReadOnly<{|
       registrationName: string,
-    }>,
+    |}>,
     ...,
   }>,
   uiViewClassName: string,
   validAttributes: AttributeConfiguration,
-}>;
+|}>;
 
-export type PartialViewConfig = $ReadOnly<{
+export type PartialViewConfig = $ReadOnly<{|
   bubblingEventTypes?: $PropertyType<ViewConfig, 'bubblingEventTypes'>,
   directEventTypes?: $PropertyType<ViewConfig, 'directEventTypes'>,
   uiViewClassName: string,
   validAttributes?: PartialAttributeConfiguration,
-}>;
+|}>;
 
 export type NativeMethods = $ReadOnly<{|
   blur(): void,
diff --git a/packages/react-native-renderer/src/legacy-events/PluginModuleType.js b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
index 9488629dca6d..5790a10dcf15 100644
--- a/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
+++ b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
@@ -22,7 +22,7 @@ export type PluginName = string;
 
 export type EventSystemFlags = number;
 
-export type LegacyPluginModule<NativeEvent> = {
+export type LegacyPluginModule<NativeEvent> = {|
   eventTypes: EventTypes,
   extractEvents: (
     topLevelType: TopLevelType,
@@ -33,4 +33,4 @@ export type LegacyPluginModule<NativeEvent> = {
     container?: null | EventTarget,
   ) => ?ReactSyntheticEvent,
   tapMoveThreshold?: number,
-};
+|};
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index 92685d4f85be..cb86b4628a17 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -58,9 +58,9 @@ const SUSPENSE_UPDATE_TO_CLIENT_RENDER = new Uint8Array(1);
 SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
 
 // Per response,
-export type ResponseState = {
+export type ResponseState = {|
   nextSuspenseID: number,
-};
+|};
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(): ResponseState {
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index e49638978202..0416cc28bbee 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -33,14 +33,14 @@ import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 
-export type ConcurrentUpdate = {
+export type ConcurrentUpdate = {|
   next: ConcurrentUpdate,
   lane: Lane,
-};
+|};
 
-type ConcurrentQueue = {
+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)
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 7dd87358cf6a..5ad81a8ff3f3 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -33,14 +33,14 @@ import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 
-export type ConcurrentUpdate = {
+export type ConcurrentUpdate = {|
   next: ConcurrentUpdate,
   lane: Lane,
-};
+|};
 
-type ConcurrentQueue = {
+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)
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.new.js b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
index 6f6309d6edb9..3ce3490a3990 100644
--- a/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
@@ -22,6 +22,7 @@ type HiddenContext = {
   // 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
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
index c62fa3d12fa8..565dc4ae20e9 100644
--- a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
@@ -22,6 +22,7 @@ type HiddenContext = {
   // 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
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 87a65254b40f..ee3d118a4a5a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1032,10 +1032,10 @@ function rerenderReducer<S, I, A>(
 }
 
 type MutableSourceMemoizedState<Source, Snapshot> = {|
-  refs: {
+  refs: {|
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
     setSnapshot: Snapshot => void,
-  },
+  |},
   source: MutableSource<any>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 |};
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index fd081fe5b0a6..aaa5ed306e42 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1032,10 +1032,10 @@ function rerenderReducer<S, I, A>(
 }
 
 type MutableSourceMemoizedState<Source, Snapshot> = {|
-  refs: {
+  refs: {|
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
     setSnapshot: Snapshot => void,
-  },
+  |},
   source: MutableSource<any>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
 |};
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index beaa5f509bc9..6482f560c836 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -38,11 +38,11 @@ import {initializeUpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
-export type RootState = {
+export type RootState = {|
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-};
+|};
 
 function FiberRootNode(
   containerInfo,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 11221f86a8f4..0128418fdd47 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -38,11 +38,11 @@ import {initializeUpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
-export type RootState = {
+export type RootState = {|
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-};
+|};
 
 function FiberRootNode(
   containerInfo,
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 1be1e7f93099..9c96e6646ccc 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -19,33 +19,33 @@ import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
-export type SuspenseInfo = {name: string | null};
+export type SuspenseInfo = {|name: string | null|};
 
-export type PendingTransitionCallbacks = {
+export type PendingTransitionCallbacks = {|
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerProgress: Map<
     string,
-    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
+    {|pendingBoundaries: PendingBoundaries, transitions: Set<Transition>|},
   > | null,
   markerIncomplete: Map<
     string,
-    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
+    {|aborts: Array<TransitionAbort>, transitions: Set<Transition>|},
   > | null,
   markerComplete: Map<string, Set<Transition>> | null,
-};
+|};
 
-export type Transition = {
+export type Transition = {|
   name: string,
   startTime: number,
-};
+|};
 
-export type BatchConfigTransition = {
+export type BatchConfigTransition = {|
   name?: string,
   startTime?: number,
   _updatedFibers?: Set<Fiber>,
-};
+|};
 
 // TODO: Is there a way to not include the tag or name here?
 export type TracingMarkerInstance = {|
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index e88930867851..939a1ae0432d 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -19,33 +19,33 @@ import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
-export type SuspenseInfo = {name: string | null};
+export type SuspenseInfo = {|name: string | null|};
 
-export type PendingTransitionCallbacks = {
+export type PendingTransitionCallbacks = {|
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerProgress: Map<
     string,
-    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
+    {|pendingBoundaries: PendingBoundaries, transitions: Set<Transition>|},
   > | null,
   markerIncomplete: Map<
     string,
-    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
+    {|aborts: Array<TransitionAbort>, transitions: Set<Transition>|},
   > | null,
   markerComplete: Map<string, Set<Transition>> | null,
-};
+|};
 
-export type Transition = {
+export type Transition = {|
   name: string,
   startTime: number,
-};
+|};
 
-export type BatchConfigTransition = {
+export type BatchConfigTransition = {|
   name?: string,
   startTime?: number,
   _updatedFibers?: Set<Fiber>,
-};
+|};
 
 // TODO: Is there a way to not include the tag or name here?
 export type TracingMarkerInstance = {|
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index f9c5104ed6b1..1a5305822be9 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -64,10 +64,10 @@ import {getIsHydrating} from './ReactFiberHydrationContext.new';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
 
-export type TreeContext = {
+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
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index 840335d00c4e..dabfe8fdb6f8 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -64,10 +64,10 @@ import {getIsHydrating} from './ReactFiberHydrationContext.old';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
 
-export type TreeContext = {
+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
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index c8239dc2483e..5770adb76bcb 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -258,7 +258,7 @@ type BaseFiberRootProperties = {|
 
   onRecoverableError: (
     error: mixed,
-    errorInfo: {digest?: ?string, componentStack?: ?string},
+    errorInfo: {|digest?: ?string, componentStack?: ?string|},
   ) => void,
 |};
 
@@ -280,22 +280,22 @@ type SuspenseCallbackOnlyFiberRootProperties = {|
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
 |};
 
-export type TransitionTracingCallbacks = {
+export type TransitionTracingCallbacks = {|
   onTransitionStart?: (transitionName: string, startTime: number) => void,
   onTransitionProgress?: (
     transitionName: string,
     startTime: number,
     currentTime: number,
-    pending: Array<{name: null | string}>,
+    pending: Array<{|name: null | string|}>,
   ) => void,
   onTransitionIncomplete?: (
     transitionName: string,
     startTime: number,
-    deletions: Array<{
+    deletions: Array<{|
       type: string,
       name?: string | null,
       endTime: number,
-    }>,
+    |}>,
   ) => void,
   onTransitionComplete?: (
     transitionName: string,
@@ -307,17 +307,17 @@ export type TransitionTracingCallbacks = {
     marker: string,
     startTime: number,
     currentTime: number,
-    pending: Array<{name: null | string}>,
+    pending: Array<{|name: null | string|}>,
   ) => void,
   onMarkerIncomplete?: (
     transitionName: string,
     marker: string,
     startTime: number,
-    deletions: Array<{
+    deletions: Array<{|
       type: string,
       name?: string | null,
       endTime: number,
-    }>,
+    |}>,
   ) => void,
   onMarkerComplete?: (
     transitionName: string,
@@ -325,7 +325,7 @@ export type TransitionTracingCallbacks = {
     startTime: number,
     endTime: number,
   ) => void,
-};
+|};
 
 // The following fields are only used in transition tracing in Profile builds
 type TransitionTracingOnlyFiberRootProperties = {|
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index ad1333c93614..3efe5ddadb3f 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -506,13 +506,15 @@ export function onCommitRoot(): void {
 export type IntersectionObserverOptions = Object;
 
 export type ObserveVisibleRectsCallback = (
-  intersections: Array<{ratio: number, rect: BoundingRect}>,
+  intersections: Array<{|ratio: number, rect: BoundingRect|}>,
 ) => void;
 
 export function observeVisibleRects(
   hostRoot: Instance,
   selectors: Array<Selector>,
-  callback: (intersections: Array<{ratio: number, rect: BoundingRect}>) => void,
+  callback: (
+    intersections: Array<{|ratio: number, rect: BoundingRect|}>,
+  ) => void,
   options?: IntersectionObserverOptions,
 ): {|disconnect: () => void|} {
   if (!supportsTestSelectors) {
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index 0d7aeef6cbd4..b430beac2c50 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -26,19 +26,19 @@ import {
   createRootFormatContext,
 } from 'react-server/src/ReactServerFormatConfig';
 
-type Options = {
+type Options = {|
   identifierPrefix?: string,
   bootstrapScriptContent?: string,
   bootstrapScripts: Array<string>,
   bootstrapModules: Array<string>,
   progressiveChunkSize?: number,
   onError: (error: mixed) => void,
-};
+|};
 
-opaque type Stream = {
+opaque type Stream = {|
   destination: Destination,
   request: Request,
-};
+|};
 
 function renderToStream(children: ReactNodeList, options: Options): Stream {
   const destination = {
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
index 6ea0b861aa7a..ece3124bcf80 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
@@ -24,8 +24,10 @@ export {createResponse, close};
 
 export function resolveRow(response: Response, chunk: RowEncoding): void {
   if (chunk[0] === 'J') {
+    // $FlowFixMe unable to refine on array indices
     resolveModel(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'M') {
+    // $FlowFixMe unable to refine on array indices
     resolveModule(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'S') {
     // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
index 60d19ecef3f7..0a2e99eb9baa 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
@@ -14,8 +14,8 @@ export type JSONValue =
   | number
   | boolean
   | null
-  | {+[key: string]: JSONValue}
-  | Array<JSONValue>;
+  | {|+[key: string]: JSONValue|}
+  | $ReadOnlyArray<JSONValue>;
 
 export type RowEncoding =
   | ['J', number, JSONValue]
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
index 5e65921193ba..eb3c5fce2a83 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
@@ -19,10 +19,10 @@ import {
   startFlowing,
 } from 'react-server/src/ReactFlightServer';
 
-type Options = {
+type Options = {|
   onError?: (error: mixed) => void,
   identifierPrefix?: string,
-};
+|};
 
 function render(
   model: ReactModel,
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 0ec5b2cf0dc4..0b46fe2397ed 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -78,7 +78,7 @@ export function processErrorChunk(
 
 function convertModelToJSON(
   request: Request,
-  parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
+  parent: {|+[key: string]: ReactModel|} | $ReadOnlyArray<ReactModel>,
   key: string,
   model: ReactModel,
 ): JSONValue {
@@ -91,7 +91,9 @@ function convertModelToJSON(
       }
       return jsonArray;
     } else {
-      const jsonObj: {[key: string]: JSONValue} = {};
+      /* $FlowFixMe the old version of Flow doesn't have a good way to define
+       * an empty exact object. */
+      const jsonObj: {|[key: string]: JSONValue|} = {};
       for (const nextKey in json) {
         if (hasOwnProperty.call(json, nextKey)) {
           jsonObj[nextKey] = convertModelToJSON(
@@ -113,6 +115,7 @@ export function processModelChunk(
   id: number,
   model: ReactModel,
 ): Chunk {
+  // $FlowFixMe no good way to define an empty exact object
   const json = convertModelToJSON(request, {}, '', model);
   return ['J', id, json];
 }
@@ -159,6 +162,7 @@ export function flushBuffered(destination: Destination) {}
 export function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): void {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
 }
 
@@ -166,6 +170,7 @@ export function writeChunkAndReturn(
   destination: Destination,
   chunk: Chunk,
 ): boolean {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
   return true;
 }
diff --git a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
index d0de924db7ce..d26271ba15a8 100644
--- a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
+++ b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-export type Destination = {
+export type Destination = {|
   buffer: string,
   done: boolean,
   fatal: boolean,
   error: mixed,
-};
+|};
 
 export type PrecomputedChunk = string;
 export type Chunk = string;
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index 288f63bfdc92..64bb2b986d70 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -9,20 +9,20 @@
 
 import type {Thenable} from 'shared/ReactTypes';
 
-export type WebpackSSRMap = {
-  [clientId: string]: {
+export type WebpackSSRMap = {|
+  [clientId: string]: {|
     [clientExportName: string]: ModuleMetaData,
-  },
-};
+  |},
+|};
 
 export type BundlerConfig = null | WebpackSSRMap;
 
-export opaque type ModuleMetaData = {
+export opaque type ModuleMetaData = {|
   id: string,
   chunks: Array<string>,
   name: string,
   async: boolean,
-};
+|};
 
 // eslint-disable-next-line no-unused-vars
 export opaque type ModuleReference<T> = ModuleMetaData;
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
index 32f8e794f4f7..532e04578722 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
@@ -19,9 +19,9 @@ import {
   close,
 } from 'react-client/src/ReactFlightClientStream';
 
-export type Options = {
+export type Options = {|
   moduleMap?: BundlerConfig,
-};
+|};
 
 function startReadingFromStream(
   response: FlightResponse,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 2cbd609b473f..8f4a52bacfce 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -18,12 +18,12 @@ import {
   abort,
 } from 'react-server/src/ReactFlightServer';
 
-type Options = {
+type Options = {|
   identifierPrefix?: string,
   signal?: AbortSignal,
   context?: Array<[string, ServerContextJSONValue]>,
   onError?: (error: mixed) => void,
-};
+|};
 
 function renderToReadableStream(
   model: ReactModel,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index 69fa772a304a..c631f5b71a77 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -23,11 +23,11 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request, destination);
 }
 
-type Options = {
+type Options = {|
   onError?: (error: mixed) => void,
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
-};
+|};
 
 type PipeableStream = {|
   abort(reason: mixed): void,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index 8d7dccae333f..79107b50316b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -7,28 +7,28 @@
  * @flow
  */
 
-type WebpackMap = {
-  [filepath: string]: {
+type WebpackMap = {|
+  [filepath: string]: {|
     [name: string]: ModuleMetaData,
-  },
-};
+  |},
+|};
 
 export type BundlerConfig = WebpackMap;
 
 // eslint-disable-next-line no-unused-vars
-export type ModuleReference<T> = {
+export type ModuleReference<T> = {|
   $$typeof: symbol,
   filepath: string,
   name: string,
   async: boolean,
-};
+|};
 
-export type ModuleMetaData = {
+export type ModuleMetaData = {|
   id: string,
   chunks: Array<string>,
   name: string,
   async: boolean,
-};
+|};
 
 export type ModuleKey = string;
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 737a8502801b..6ac08cad648b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -9,37 +9,37 @@
 
 import {acorn} from 'acorn';
 
-type ResolveContext = {
+type ResolveContext = {|
   conditions: Array<string>,
   parentURL: string | void,
-};
+|};
 
 type ResolveFunction = (
   string,
   ResolveContext,
   ResolveFunction,
-) => {url: string} | Promise<{url: string}>;
+) => {|url: string|} | Promise<{|url: string|}>;
 
-type GetSourceContext = {
+type GetSourceContext = {|
   format: string,
-};
+|};
 
 type GetSourceFunction = (
   string,
   GetSourceContext,
   GetSourceFunction,
-) => Promise<{source: Source}>;
+) => Promise<{|source: Source|}>;
 
-type TransformSourceContext = {
+type TransformSourceContext = {|
   format: string,
   url: string,
-};
+|};
 
 type TransformSourceFunction = (
   Source,
   TransformSourceContext,
   TransformSourceFunction,
-) => Promise<{source: Source}>;
+) => Promise<{|source: Source|}>;
 
 type Source = string | ArrayBuffer | Uint8Array;
 
@@ -52,7 +52,7 @@ export async function resolve(
   specifier: string,
   context: ResolveContext,
   defaultResolve: ResolveFunction,
-): Promise<{url: string}> {
+): Promise<{|url: string|}> {
   // We stash this in case we end up needing to resolve export * statements later.
   stashedResolve = defaultResolve;
 
@@ -133,7 +133,7 @@ function addExportNames(names, node) {
 function resolveClientImport(
   specifier: string,
   parentURL: string,
-): {url: string} | Promise<{url: 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
@@ -151,7 +151,7 @@ function resolveClientImport(
 async function loadClientImport(
   url: string,
   defaultTransformSource: TransformSourceFunction,
-): Promise<{source: Source}> {
+): Promise<{|source: Source|}> {
   if (stashedGetSource === null) {
     throw new Error(
       'Expected getSource to have been called before transformSource',
@@ -225,7 +225,7 @@ export async function transformSource(
   source: Source,
   context: TransformSourceContext,
   defaultTransformSource: TransformSourceFunction,
-): Promise<{source: Source}> {
+): Promise<{|source: Source|}> {
   const transformed = await defaultTransformSource(
     source,
     context,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
index 0c1ec39aff90..9c89122b04ed 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js
@@ -52,7 +52,7 @@ module.exports = function register() {
             // we should resolve that with a client reference that unwraps the Promise on
             // the client.
             const then = function then(resolve, reject) {
-              const moduleReference: {[string]: any} = {
+              const moduleReference: {[string]: any, ...} = {
                 $$typeof: MODULE_REFERENCE,
                 filepath: target.filepath,
                 name: '*', // Represents the whole object instead of a particular import.
@@ -93,7 +93,7 @@ module.exports = function register() {
 
   Module._extensions['.client.js'] = function(module, path) {
     const moduleId = url.pathToFileURL(path).href;
-    const moduleReference: {[string]: any} = {
+    const moduleReference: {[string]: any, ...} = {
       $$typeof: MODULE_REFERENCE,
       filepath: moduleId,
       name: '*', // Represents the whole object instead of a particular import.
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index b3da107e60b9..7aa784a37f75 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -42,21 +42,21 @@ class ClientReferenceDependency extends ModuleDependency {
 const clientImportName = 'react-server-dom-webpack';
 const clientFileName = require.resolve('../');
 
-type ClientReferenceSearchPath = {
+type ClientReferenceSearchPath = {|
   directory: string,
   recursive?: boolean,
   include: RegExp,
   exclude?: RegExp,
-};
+|};
 
 type ClientReferencePath = string | ClientReferenceSearchPath;
 
-type Options = {
+type Options = {|
   isServer: boolean,
   clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
   chunkName?: string,
   manifestFilename?: string,
-};
+|};
 
 const PLUGIN_NAME = 'React Server Plugin';
 
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
index 42b9efa73b47..cea39ac6f264 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
@@ -24,8 +24,10 @@ export {createResponse, close};
 
 export function resolveRow(response: Response, chunk: RowEncoding): void {
   if (chunk[0] === 'J') {
+    // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
     resolveModel(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'M') {
+    // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
     resolveModule(response, chunk[1], chunk[2]);
   } else if (chunk[0] === 'S') {
     // $FlowFixMe: Flow doesn't support disjoint unions on tuples.
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
index 1c32ac0dd4d4..ce10935859c8 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
@@ -14,7 +14,7 @@ export type JSONValue =
   | number
   | boolean
   | null
-  | {+[key: string]: JSONValue}
+  | {|+[key: string]: JSONValue|}
   | Array<JSONValue>;
 
 export type RowEncoding =
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 5c9360701ab8..581ba3de85e3 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -75,7 +75,7 @@ export function processErrorChunk(
 
 function convertModelToJSON(
   request: Request,
-  parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
+  parent: {|+[key: string]: ReactModel|} | $ReadOnlyArray<ReactModel>,
   key: string,
   model: ReactModel,
 ): JSONValue {
@@ -88,7 +88,8 @@ function convertModelToJSON(
       }
       return jsonArray;
     } else {
-      const jsonObj: {[key: string]: JSONValue} = {};
+      // $FlowFixMe no good way to define an empty exact object
+      const jsonObj: {|[key: string]: JSONValue|} = {};
       for (const nextKey in json) {
         if (hasOwnProperty.call(json, nextKey)) {
           jsonObj[nextKey] = convertModelToJSON(
@@ -110,6 +111,7 @@ export function processModelChunk(
   id: number,
   model: ReactModel,
 ): Chunk {
+  // $FlowFixMe no good way to define an empty exact object
   const json = convertModelToJSON(request, {}, '', model);
   return ['J', id, json];
 }
@@ -156,6 +158,7 @@ export function flushBuffered(destination: Destination) {}
 export function beginWriting(destination: Destination) {}
 
 export function writeChunk(destination: Destination, chunk: Chunk): void {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
 }
 
@@ -163,6 +166,7 @@ export function writeChunkAndReturn(
   destination: Destination,
   chunk: Chunk,
 ): boolean {
+  // $FlowFixMe `Chunk` doesn't flow into `JSONValue` because of the `E` row type.
   emitRow(destination, chunk);
   return true;
 }
diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
index 12fbeb46f2de..9a17511dfc39 100644
--- a/packages/react-server/src/ReactFizzClassComponent.js
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -100,10 +100,10 @@ function warnNoop(
   }
 }
 
-type InternalInstance = {
+type InternalInstance = {|
   queue: null | Array<Object>,
   replace: boolean,
-};
+|};
 
 const classComponentUpdater = {
   isMounted(inst) {
diff --git a/packages/react-server/src/ReactFizzComponentStack.js b/packages/react-server/src/ReactFizzComponentStack.js
index 1fa49453d31b..5a571af43126 100644
--- a/packages/react-server/src/ReactFizzComponentStack.js
+++ b/packages/react-server/src/ReactFizzComponentStack.js
@@ -14,21 +14,21 @@ import {
 } from 'shared/ReactComponentStackFrame';
 
 // DEV-only reverse linked list representing the current component stack
-type BuiltInComponentStackNode = {
+type BuiltInComponentStackNode = {|
   tag: 0,
   parent: null | ComponentStackNode,
   type: string,
-};
-type FunctionComponentStackNode = {
+|};
+type FunctionComponentStackNode = {|
   tag: 1,
   parent: null | ComponentStackNode,
   type: Function,
-};
-type ClassComponentStackNode = {
+|};
+type ClassComponentStackNode = {|
   tag: 2,
   parent: null | ComponentStackNode,
   type: Function,
-};
+|};
 export type ComponentStackNode =
   | BuiltInComponentStackNode
   | FunctionComponentStackNode
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
index b4386399c334..fdd708748d63 100644
--- a/packages/react-server/src/ReactFizzNewContext.js
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -20,13 +20,13 @@ if (__DEV__) {
 
 // Used to store the parent path of all context overrides in a shared linked list.
 // Forming a reverse tree.
-type ContextNode<T> = {
+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.
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index 5f44458e7889..f6cccbe4652d 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -131,11 +131,11 @@ import {trackSuspendedWakeable} from './ReactFizzWakeable';
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
-type LegacyContext = {
+type LegacyContext = {|
   [key: string]: any,
-};
+|};
 
-type SuspenseBoundary = {
+type SuspenseBoundary = {|
   id: SuspenseBoundaryID,
   rootSegmentID: number,
   errorDigest: ?string, // the error hash if it errors
@@ -147,9 +147,9 @@ type SuspenseBoundary = {
   completedSegments: Array<Segment>, // completed but not yet flushed segments.
   byteSize: number, // used to determine whether to inline children boundaries.
   fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
-};
+|};
 
-export type Task = {
+export type Task = {|
   node: ReactNodeList,
   ping: () => void,
   blockedBoundary: Root | SuspenseBoundary,
@@ -160,7 +160,7 @@ export type Task = {
   treeContext: TreeContext, // the current tree context that this task is executing in
   componentStack: null | ComponentStackNode, // DEV-only component stack
   thenableState: null | ThenableState,
-};
+|};
 
 const PENDING = 0;
 const COMPLETED = 1;
@@ -170,7 +170,7 @@ const ERRORED = 4;
 
 type Root = null;
 
-type Segment = {
+type Segment = {|
   status: 0 | 1 | 2 | 3 | 4,
   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
@@ -184,13 +184,13 @@ type Segment = {
   // used to discern when text separator boundaries are needed
   lastPushedText: boolean,
   textEmbedded: boolean,
-};
+|};
 
 const OPEN = 0;
 const CLOSING = 1;
 const CLOSED = 2;
 
-export opaque type Request = {
+export opaque type Request = {|
   destination: null | Destination,
   +responseState: ResponseState,
   +progressiveChunkSize: number,
@@ -223,7 +223,7 @@ export opaque type Request = {
   // emit a different response to the stream instead.
   onShellError: (error: mixed) => void,
   onFatalError: (error: mixed) => void,
-};
+|};
 
 // 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.
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
index 3b924cf8eb3a..a06d3cf25d61 100644
--- a/packages/react-server/src/ReactFizzTreeContext.js
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -60,10 +60,10 @@
 // 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 = {
+export type TreeContext = {|
   +id: number,
   +overflow: string,
-};
+|};
 
 export const emptyTreeContext = {
   id: 1,
diff --git a/packages/react-server/src/ReactFlightNewContext.js b/packages/react-server/src/ReactFlightNewContext.js
index 3f5abaaf0793..df6332a048b1 100644
--- a/packages/react-server/src/ReactFlightNewContext.js
+++ b/packages/react-server/src/ReactFlightNewContext.js
@@ -23,13 +23,13 @@ if (__DEV__) {
 
 // Used to store the parent path of all context overrides in a shared linked list.
 // Forming a reverse tree.
-type ContextNode<T: ServerContextJSONValue> = {
+type ContextNode<T: ServerContextJSONValue> = {|
   parent: null | ContextNode<any>,
   depth: number, // Short hand to compute the depth of the tree at this node.
   context: ReactServerContext<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.
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 1e84a89350c0..01c3db8f3fda 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -91,23 +91,23 @@ export type ReactModel =
   | Iterable<ReactModel>
   | ReactModelObject;
 
-type ReactModelObject = {+[key: string]: ReactModel};
+type ReactModelObject = {|+[key: string]: ReactModel|};
 
 const PENDING = 0;
 const COMPLETED = 1;
 const ABORTED = 3;
 const ERRORED = 4;
 
-type Task = {
+type Task = {|
   id: number,
   status: 0 | 1 | 3 | 4,
   model: ReactModel,
   ping: () => void,
   context: ContextSnapshot,
   thenableState: ThenableState | null,
-};
+|};
 
-export type Request = {
+export type Request = {|
   status: 0 | 1 | 2,
   fatalError: mixed,
   destination: null | Destination,
@@ -127,7 +127,7 @@ export type Request = {
   identifierCount: number,
   onError: (error: mixed) => void,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
-};
+|};
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
@@ -272,6 +272,7 @@ function attemptResolveElement(
             );
           }
         }
+        // $FlowFixMe issue discovered when updating Flow
         return [
           REACT_ELEMENT_TYPE,
           type,
@@ -324,7 +325,7 @@ function serializeByRefID(id: number): string {
 
 function serializeModuleReference(
   request: Request,
-  parent: {+[key: string | number]: ReactModel} | $ReadOnlyArray<ReactModel>,
+  parent: {|+[key: string | number]: ReactModel|} | $ReadOnlyArray<ReactModel>,
   key: string,
   moduleReference: ModuleReference<any>,
 ): string {
@@ -465,7 +466,7 @@ function describeValueForErrorMessage(value: ReactModel): string {
 
 function describeObjectForErrorMessage(
   objectOrArray:
-    | {+[key: string | number]: ReactModel}
+    | {+[key: string | number]: ReactModel, ...}
     | $ReadOnlyArray<ReactModel>,
   expandedName?: string,
 ): string {
@@ -495,7 +496,7 @@ function describeObjectForErrorMessage(
     return str;
   } else {
     let str = '{';
-    const object: {+[key: string | number]: ReactModel} = objectOrArray;
+    const object: {+[key: string | number]: ReactModel, ...} = objectOrArray;
     const names = Object.keys(object);
     for (let i = 0; i < names.length; i++) {
       if (i > 0) {
@@ -528,7 +529,7 @@ let isInsideContextValue = false;
 
 export function resolveModelToJSON(
   request: Request,
-  parent: {+[key: string | number]: ReactModel} | $ReadOnlyArray<ReactModel>,
+  parent: {|+[key: string | number]: ReactModel|} | $ReadOnlyArray<ReactModel>,
   key: string,
   value: ReactModel,
 ): ReactJSONValue {
@@ -698,6 +699,7 @@ export function resolveModelToJSON(
       }
     }
 
+    // $FlowFixMe
     return value;
   }
 
@@ -839,6 +841,7 @@ function emitModuleChunk(
   id: number,
   moduleMetaData: ModuleMetaData,
 ): void {
+  // $FlowFixMe ModuleMetaData is not a ReactModel
   const processedChunk = processModuleChunk(request, id, moduleMetaData);
   request.completedModuleChunks.push(processedChunk);
 }
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index 686d39a5716a..73a23911f4d8 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -173,9 +173,9 @@ function mapIntoArray(
   } else {
     const iteratorFn = getIteratorFn(children);
     if (typeof iteratorFn === 'function') {
-      const iterableChildren: Iterable<React$Node> & {
+      const iterableChildren: Iterable<React$Node> & {|
         entries: any,
-      } = (children: any);
+      |} = (children: any);
 
       if (__DEV__) {
         // Warn about using Maps as children
diff --git a/packages/react/src/ReactCurrentBatchConfig.js b/packages/react/src/ReactCurrentBatchConfig.js
index 91737680b4aa..5355a575bc04 100644
--- a/packages/react/src/ReactCurrentBatchConfig.js
+++ b/packages/react/src/ReactCurrentBatchConfig.js
@@ -9,9 +9,9 @@
 
 import type {BatchConfigTransition} from 'react-reconciler/src/ReactFiberTracingMarkerComponent.new';
 
-type BatchConfig = {
+type BatchConfig = {|
   transition: BatchConfigTransition | null,
-};
+|};
 /**
  * Keeps track of the current batch's configuration such as how long an update
  * should suspend for if it needs to.
diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index 4f786ed25f96..fd08087aa403 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -16,25 +16,25 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type UninitializedPayload<T> = {
+type UninitializedPayload<T> = {|
   _status: -1,
   _result: () => Thenable<{default: T, ...}>,
-};
+|};
 
-type PendingPayload = {
+type PendingPayload = {|
   _status: 0,
   _result: Wakeable,
-};
+|};
 
-type ResolvedPayload<T> = {
+type ResolvedPayload<T> = {|
   _status: 1,
-  _result: {default: T},
-};
+  _result: {default: T, ...},
+|};
 
-type RejectedPayload = {
+type RejectedPayload = {|
   _status: 2,
   _result: mixed,
-};
+|};
 
 type Payload<T> =
   | UninitializedPayload<T>
@@ -42,11 +42,11 @@ type Payload<T> =
   | ResolvedPayload<T>
   | RejectedPayload;
 
-export type LazyComponent<T, P> = {
+export type LazyComponent<T, P> = {|
   $$typeof: symbol | number,
   _payload: P,
   _init: (payload: P) => T,
-};
+|};
 
 function lazyInitializer<T>(payload: Payload<T>): T {
   if (payload._status === Uninitialized) {
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
index c07f7f03819c..94c5876d80c1 100644
--- a/packages/scheduler/src/forks/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -77,7 +77,7 @@ type SchedulerCallback<T> = (
 export function unstable_scheduleCallback<T>(
   priorityLevel: PriorityLevel,
   callback: SchedulerCallback<T>,
-  options?: {delay?: number},
+  options?: {|delay?: number|},
 ): CallbackNode {
   let postTaskPriority;
   switch (priorityLevel) {
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 5209c795c239..9ea076b15f9e 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -80,7 +80,7 @@ export type ServerContextJSONValue =
   | number
   | null
   | $ReadOnlyArray<ServerContextJSONValue>
-  | {+[key: string]: ServerContextJSONValue};
+  | {|+[key: string]: ServerContextJSONValue|};
 
 export type ReactServerContext<T: any> = ReactContext<T>;
 
@@ -209,9 +209,9 @@ export type OffscreenMode =
   | 'unstable-defer-without-hiding'
   | 'visible';
 
-export type StartTransitionOptions = {
+export type StartTransitionOptions = {|
   name?: string,
-};
+|};
 
 // TODO: Add Context support
 export type Usable<T> = Thenable<T> | ReactContext<T>;
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index a61f324d93e5..5bae0b389a96 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -37,6 +37,7 @@
 
 [lints]
 untyped-type-import=error
+implicit-inexact-object=error
 
 [options]
 server.max_workers=4
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index f97bd32a4321..1c07cb0171a6 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -77,52 +77,52 @@ declare module 'fs/promises' {
   declare var access: (path: string, mode?: number) => Promise<void>;
   declare var lstat: (
     path: string,
-    options?: ?{bigint?: boolean},
+    options?: ?{|bigint?: boolean|},
   ) => Promise<mixed>;
   declare var readdir: (
     path: string,
     options?:
       | ?string
-      | {
+      | {|
           encoding?: ?string,
           withFileTypes?: ?boolean,
-        },
+        |},
   ) => Promise<Buffer>;
   declare var readFile: (
     path: string,
     options?:
       | ?string
-      | {
+      | {|
           encoding?: ?string,
-        },
+        |},
   ) => Promise<Buffer>;
   declare var readlink: (
     path: string,
     options?:
       | ?string
-      | {
+      | {|
           encoding?: ?string,
-        },
+        |},
   ) => Promise<mixed>;
   declare var realpath: (
     path: string,
     options?:
       | ?string
-      | {
+      | {|
           encoding?: ?string,
-        },
+        |},
   ) => Promise<mixed>;
   declare var stat: (
     path: string,
-    options?: ?{bigint?: boolean},
+    options?: ?{|bigint?: boolean|},
   ) => Promise<mixed>;
 }
 declare module 'pg' {
   declare var Pool: (
     options: mixed,
-  ) => {
+  ) => {|
     query: (query: string, values?: Array<mixed>) => void,
-  };
+  |};
 }
 
 declare module 'util' {
@@ -147,13 +147,13 @@ declare module 'util' {
     encodeInto(
       buffer: string,
       dest: Uint8Array,
-    ): {read: number, written: number};
+    ): {|read: number, written: number|};
     encoding: string;
   }
 }
 
 declare module 'pg/lib/utils' {
-  declare module.exports: {
+  declare module.exports: {|
     prepareValue(val: any): mixed,
-  };
+  |};
 }
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 896964f06364..900c0d2fa667 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -26,7 +26,7 @@ type RawEventEmitterEvent = $ReadOnly<{|
   // 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},
+  nativeEvent: {[string]: mixed, ...},
 |}>;
 
 declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface' {
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
index 9f452689976a..5344cacae248 100644
--- a/scripts/flow/react-relay-hooks.js
+++ b/scripts/flow/react-relay-hooks.js
@@ -12,7 +12,7 @@ type JSONValue =
   | boolean
   | number
   | null
-  | {+[key: string]: JSONValue}
+  | {|+[key: string]: JSONValue|}
   | $ReadOnlyArray<JSONValue>;
 
 declare module 'JSResourceReference' {

From b0593dd9645ad17b46e0156a9bef022ad0cd0d9e Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 9 Sep 2022 10:56:21 -0400
Subject: [PATCH 1562/1603] Bump async from 2.6.3 to 2.6.4 in
 /fixtures/concurrent/time-slicing (#24443)

Bumps [async](https://github.com/caolan/async) from 2.6.3 to 2.6.4.
- [Release notes](https://github.com/caolan/async/releases)
- [Changelog](https://github.com/caolan/async/blob/v2.6.4/CHANGELOG.md)
- [Commits](https://github.com/caolan/async/compare/v2.6.3...v2.6.4)

---
updated-dependencies:
- dependency-name: async
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 fixtures/concurrent/time-slicing/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/fixtures/concurrent/time-slicing/yarn.lock b/fixtures/concurrent/time-slicing/yarn.lock
index 0cab4641b789..7b531c7b2596 100644
--- a/fixtures/concurrent/time-slicing/yarn.lock
+++ b/fixtures/concurrent/time-slicing/yarn.lock
@@ -341,9 +341,9 @@ async-each@^1.0.1:
   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.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 

From 540ba5b4039cf3489a3a7d5da90211c1dc00eb39 Mon Sep 17 00:00:00 2001
From: Robert Balicki <robertbalicki@fb.com>
Date: Fri, 9 Sep 2022 11:09:30 -0400
Subject: [PATCH 1563/1603] [react devtools][easy] Change variable names, etc.
 (#25211)

* Change variable names, put stuff in constants, etc. in preparation for next diff
---
 .../src/__tests__/setupTests.js               |  6 +-
 .../react-devtools-shared/src/constants.js    |  4 +-
 .../src/devtools/store.js                     |  6 +-
 .../views/Settings/DebuggingSettings.js       |  4 +-
 .../views/Settings/SettingsContext.js         | 11 +--
 packages/react-devtools-shared/src/utils.js   | 87 +++++--------------
 6 files changed, 39 insertions(+), 79 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/setupTests.js b/packages/react-devtools-shared/src/__tests__/setupTests.js
index 37ca023381bd..ca7767845114 100644
--- a/packages/react-devtools-shared/src/__tests__/setupTests.js
+++ b/packages/react-devtools-shared/src/__tests__/setupTests.js
@@ -52,8 +52,7 @@ env.beforeEach(() => {
   const {installHook} = require('react-devtools-shared/src/hook');
   const {
     getDefaultComponentFilters,
-    saveComponentFilters,
-    setShowInlineWarningsAndErrors,
+    setSavedComponentFilters,
   } = require('react-devtools-shared/src/utils');
 
   // Fake timers let us flush Bridge operations between setup and assertions.
@@ -118,11 +117,10 @@ env.beforeEach(() => {
   };
 
   // Initialize filters to a known good state.
-  saveComponentFilters(getDefaultComponentFilters());
+  setSavedComponentFilters(getDefaultComponentFilters());
   global.__REACT_DEVTOOLS_COMPONENT_FILTERS__ = getDefaultComponentFilters();
 
   // Also initialize inline warnings so that we can test them.
-  setShowInlineWarningsAndErrors(true);
   global.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ = true;
 
   installHook(global);
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 8853e46f24c1..1ef8b4dd8083 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -30,7 +30,7 @@ export const PROFILING_FLAG_TIMELINE_SUPPORT = 0b10;
 
 export const LOCAL_STORAGE_DEFAULT_TAB_KEY = 'React::DevTools::defaultTab';
 
-export const LOCAL_STORAGE_FILTER_PREFERENCES_KEY =
+export const LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY =
   'React::DevTools::componentFilters';
 
 export const SESSION_STORAGE_LAST_SELECTION_KEY =
@@ -51,6 +51,8 @@ export const SESSION_STORAGE_RELOAD_AND_PROFILE_KEY =
 export const LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS =
   'React::DevTools::breakOnConsoleErrors';
 
+export const LOCAL_STORAGE_BROWSER_THEME = 'React::DevTools::theme';
+
 export const LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY =
   'React::DevTools::appendComponentStack';
 
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 2c5703505c96..56f1131205c1 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -23,7 +23,7 @@ import {
 import {ElementTypeRoot} from '../types';
 import {
   getSavedComponentFilters,
-  saveComponentFilters,
+  setSavedComponentFilters,
   separateDisplayNameAndHOCs,
   shallowDiffers,
   utfDecodeString,
@@ -365,7 +365,7 @@ export default class Store extends EventEmitter<{|
     this._componentFilters = value;
 
     // Update persisted filter preferences stored in localStorage.
-    saveComponentFilters(value);
+    setSavedComponentFilters(value);
 
     // Notify the renderer that filter preferences have changed.
     // This is an expensive operation; it unmounts and remounts the entire tree,
@@ -1332,7 +1332,7 @@ export default class Store extends EventEmitter<{|
   ) => {
     this._componentFilters = componentFilters;
 
-    saveComponentFilters(componentFilters);
+    setSavedComponentFilters(componentFilters);
   };
 
   onBridgeShutdown = () => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index 46b8b343721f..de05978ec3ba 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -22,7 +22,7 @@ export default function DebuggingSettings(_: {||}) {
     setBreakOnConsoleErrors,
     setShowInlineWarningsAndErrors,
     showInlineWarningsAndErrors,
-    sethideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
   } = useContext(SettingsContext);
 
   return (
@@ -72,7 +72,7 @@ export default function DebuggingSettings(_: {||}) {
             type="checkbox"
             checked={hideConsoleLogsInStrictMode}
             onChange={({currentTarget}) =>
-              sethideConsoleLogsInStrictMode(currentTarget.checked)
+              setHideConsoleLogsInStrictMode(currentTarget.checked)
             }
           />{' '}
           Hide logs during second render in Strict Mode
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index d9c522ca689f..8eda55d13dbd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -18,6 +18,7 @@ import {
 import {
   COMFORTABLE_LINE_HEIGHT,
   COMPACT_LINE_HEIGHT,
+  LOCAL_STORAGE_BROWSER_THEME,
   LOCAL_STORAGE_PARSE_HOOK_NAMES_KEY,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
@@ -52,7 +53,7 @@ type Context = {|
   setParseHookNames: (value: boolean) => void,
 
   hideConsoleLogsInStrictMode: boolean,
-  sethideConsoleLogsInStrictMode: (value: boolean) => void,
+  setHideConsoleLogsInStrictMode: (value: boolean) => void,
 
   showInlineWarningsAndErrors: boolean,
   setShowInlineWarningsAndErrors: (value: boolean) => void,
@@ -110,7 +111,7 @@ function SettingsContextController({
     'compact',
   );
   const [theme, setTheme] = useLocalStorageWithLog<Theme>(
-    'React::DevTools::theme',
+    LOCAL_STORAGE_BROWSER_THEME,
     'auto',
   );
   const [
@@ -133,7 +134,7 @@ function SettingsContextController({
   );
   const [
     hideConsoleLogsInStrictMode,
-    sethideConsoleLogsInStrictMode,
+    setHideConsoleLogsInStrictMode,
   ] = useLocalStorageWithLog<boolean>(
     LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
     false,
@@ -240,7 +241,7 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
-      sethideConsoleLogsInStrictMode,
+      setHideConsoleLogsInStrictMode,
       hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
@@ -259,7 +260,7 @@ function SettingsContextController({
       setTraceUpdatesEnabled,
       setShowInlineWarningsAndErrors,
       showInlineWarningsAndErrors,
-      sethideConsoleLogsInStrictMode,
+      setHideConsoleLogsInStrictMode,
       hideConsoleLogsInStrictMode,
       theme,
       browserTheme,
diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
index 1f4582026318..36063f4f0e0c 100644
--- a/packages/react-devtools-shared/src/utils.js
+++ b/packages/react-devtools-shared/src/utils.js
@@ -34,16 +34,14 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
-} from './constants';
-import {ElementTypeRoot} from 'react-devtools-shared/src/types';
-import {
-  LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+  LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
   LOCAL_STORAGE_OPEN_IN_EDITOR_URL,
   LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
   LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
   LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
   LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
 } from './constants';
+import {ElementTypeRoot} from 'react-devtools-shared/src/types';
 import {ComponentFilterElementType, ElementTypeHostComponent} from './types';
 import {
   ElementTypeClass,
@@ -324,7 +322,9 @@ export function getDefaultComponentFilters(): Array<ComponentFilter> {
 
 export function getSavedComponentFilters(): Array<ComponentFilter> {
   try {
-    const raw = localStorageGetItem(LOCAL_STORAGE_FILTER_PREFERENCES_KEY);
+    const raw = localStorageGetItem(
+      LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
+    );
     if (raw != null) {
       return JSON.parse(raw);
     }
@@ -332,89 +332,48 @@ export function getSavedComponentFilters(): Array<ComponentFilter> {
   return getDefaultComponentFilters();
 }
 
-export function saveComponentFilters(
+export function setSavedComponentFilters(
   componentFilters: Array<ComponentFilter>,
 ): void {
   localStorageSetItem(
-    LOCAL_STORAGE_FILTER_PREFERENCES_KEY,
+    LOCAL_STORAGE_COMPONENT_FILTER_PREFERENCES_KEY,
     JSON.stringify(componentFilters),
   );
 }
 
-export function getAppendComponentStack(): boolean {
-  try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
-    );
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return true;
+function parseBool(s: ?string): ?boolean {
+  if (s === 'true') {
+    return true;
+  }
+  if (s === 'false') {
+    return false;
+  }
 }
 
-export function setAppendComponentStack(value: boolean): void {
-  localStorageSetItem(
+export function getAppendComponentStack(): boolean {
+  const raw = localStorageGetItem(
     LOCAL_STORAGE_SHOULD_APPEND_COMPONENT_STACK_KEY,
-    JSON.stringify(value),
   );
+  return parseBool(raw) ?? true;
 }
 
 export function getBreakOnConsoleErrors(): boolean {
-  try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-    );
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return false;
-}
-
-export function setBreakOnConsoleErrors(value: boolean): void {
-  localStorageSetItem(
-    LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS,
-    JSON.stringify(value),
-  );
+  const raw = localStorageGetItem(LOCAL_STORAGE_SHOULD_BREAK_ON_CONSOLE_ERRORS);
+  return parseBool(raw) ?? false;
 }
 
 export function getHideConsoleLogsInStrictMode(): boolean {
-  try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
-    );
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return false;
-}
-
-export function sethideConsoleLogsInStrictMode(value: boolean): void {
-  localStorageSetItem(
+  const raw = localStorageGetItem(
     LOCAL_STORAGE_HIDE_CONSOLE_LOGS_IN_STRICT_MODE,
-    JSON.stringify(value),
   );
+  return parseBool(raw) ?? false;
 }
 
 export function getShowInlineWarningsAndErrors(): boolean {
-  try {
-    const raw = localStorageGetItem(
-      LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
-    );
-    if (raw != null) {
-      return JSON.parse(raw);
-    }
-  } catch (error) {}
-  return true;
-}
-
-export function setShowInlineWarningsAndErrors(value: boolean): void {
-  localStorageSetItem(
+  const raw = localStorageGetItem(
     LOCAL_STORAGE_SHOW_INLINE_WARNINGS_AND_ERRORS_KEY,
-    JSON.stringify(value),
   );
+  return parseBool(raw) ?? true;
 }
 
 export function getDefaultOpenInEditorURL(): string {

From 425f9fbba0266836a13f391aab0571193a0a4058 Mon Sep 17 00:00:00 2001
From: Robert Balicki <robertbalicki@fb.com>
Date: Fri, 9 Sep 2022 11:31:32 -0400
Subject: [PATCH 1564/1603] [react devtools] Don't check for NODE_ENV==='test'
 because it never is (#25186)

* remove useless condition
---
 .../src/backend/renderer.js                   | 48 +++++++++----------
 1 file changed, 22 insertions(+), 26 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 9802d4b8c03d..a123d96262c7 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -812,32 +812,28 @@ export function attach(
   // Patching the console enables DevTools to do a few useful things:
   // * Append component stacks to warnings and error messages
   // * Disable logging during re-renders to inspect hooks (see inspectHooksOfFiber)
-  //
-  // Don't patch in test environments because we don't want to interfere with Jest's own console overrides.
-  if (process.env.NODE_ENV !== 'test') {
-    registerRendererWithConsole(renderer, onErrorOrWarning);
-
-    // The renderer interface can't read these preferences directly,
-    // because it is stored in localStorage within the context of the extension.
-    // It relies on the extension to pass the preference through via the global.
-    const appendComponentStack =
-      window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
-    const breakOnConsoleErrors =
-      window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
-    const showInlineWarningsAndErrors =
-      window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-    const hideConsoleLogsInStrictMode =
-      window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-    const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
-
-    patchConsole({
-      appendComponentStack,
-      breakOnConsoleErrors,
-      showInlineWarningsAndErrors,
-      hideConsoleLogsInStrictMode,
-      browserTheme,
-    });
-  }
+  registerRendererWithConsole(renderer, onErrorOrWarning);
+
+  // The renderer interface can't read these preferences directly,
+  // because it is stored in localStorage within the context of the extension.
+  // It relies on the extension to pass the preference through via the global.
+  const appendComponentStack =
+    window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
+  const breakOnConsoleErrors =
+    window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
+  const showInlineWarningsAndErrors =
+    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
+  const hideConsoleLogsInStrictMode =
+    window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
+  const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
+
+  patchConsole({
+    appendComponentStack,
+    breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
+  });
 
   const debug = (
     name: string,

From bbd56b278cea8ab46f1d0439d20ad521381c36af Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Fri, 9 Sep 2022 12:16:40 -0400
Subject: [PATCH 1565/1603] Flow: enable exact_by_default (#25220)

With this change, a simple object type `{ }` means an exact object `{| |}` which most people assume.
Opting for inexact requires the extra `{ a: number, ... }` syntax at the end.

A followup, someone could replace all the `{| |}` with `{ }`.
---
 scripts/flow/config/flowconfig | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 5bae0b389a96..86fe4f9fe2ed 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -37,18 +37,17 @@
 
 [lints]
 untyped-type-import=error
-implicit-inexact-object=error
 
 [options]
 server.max_workers=4
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
 esproposal.optional_chaining=enable
+exact_by_default=true
+munge_underscores=false
 
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%
 
-munge_underscores=false
-
 [version]
 ^0.122.0

From 492c6e29e7c155e81292632e86453c5f06bcf6b9 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Fri, 9 Sep 2022 12:21:44 -0400
Subject: [PATCH 1566/1603] Flow: upgrade to 0.127 (#25221)

A smaller incremental update as some next version was changing more.
---
 package.json                                              | 2 +-
 packages/react-native-renderer/src/ReactFabric.js         | 1 +
 packages/react-native-renderer/src/ReactNativeRenderer.js | 1 +
 scripts/flow/config/flowconfig                            | 2 +-
 yarn.lock                                                 | 8 ++++----
 5 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 47514e3ec2d3..1036d8e0a691 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.122",
+    "flow-bin": "^0.127",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js
index 1010b4a4b84a..428ffe20acd3 100644
--- a/packages/react-native-renderer/src/ReactFabric.js
+++ b/packages/react-native-renderer/src/ReactFabric.js
@@ -97,6 +97,7 @@ function findHostInstance_DEPRECATED<TElementType: ElementType>(
     return (hostInstance: any).canonical;
   }
   // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[incompatible-exact]
   return hostInstance;
 }
 
diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js
index 046c4f4b9373..68241f8def7a 100644
--- a/packages/react-native-renderer/src/ReactNativeRenderer.js
+++ b/packages/react-native-renderer/src/ReactNativeRenderer.js
@@ -96,6 +96,7 @@ function findHostInstance_DEPRECATED(
     return (hostInstance: any).canonical;
   }
   // $FlowFixMe[incompatible-return]
+  // $FlowFixMe[incompatible-exact]
   return hostInstance;
 }
 
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 86fe4f9fe2ed..cb52d604a7c1 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -50,4 +50,4 @@ munge_underscores=false
 %REACT_RENDERER_FLOW_OPTIONS%
 
 [version]
-^0.122.0
+^0.127.0
diff --git a/yarn.lock b/yarn.lock
index 15c796b9b7e3..ac6d35f47ea7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7913,10 +7913,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@^0.122:
-  version "0.122.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.122.0.tgz#c723a2b33b1a70bd10204704ae1dc776d5d89d79"
-  integrity sha512-my8N5jgl/A+UVby9E7NDppHdhLgRbWgKbmFZSx2MSYMRh3d9YGnM2MM+wexpUpl0ftY1IM6ZcUwaAhrypLyvlA==
+flow-bin@^0.127:
+  version "0.127.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.127.0.tgz#0614cff4c1b783beef1feeb7108d536e09d77632"
+  integrity sha512-ywvCCdV4NJWzrqjFrMU5tAiVGyBiXjsJQ1+/kj8thXyX15V17x8BFvNwoAH97NrUU8T1HzmFBjLzWc0l2319qg==
 
 fluent-syntax@0.13.0:
   version "0.13.0"

From 8003ab9cf5c711eb00f741bbd89def56b066b999 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Fri, 9 Sep 2022 16:03:48 -0400
Subject: [PATCH 1567/1603] Flow: remove explicit object syntax (#25223)

---
 packages/react-cache/src/LRU.js               |  4 +-
 packages/react-cache/src/ReactCacheOld.js     | 12 +--
 .../react-client/src/ReactFlightClient.js     | 24 ++---
 .../src/ReactFlightClientHostConfigStream.js  |  4 +-
 .../react-debug-tools/src/ReactDebugHooks.js  | 12 +--
 .../react-devtools-core/src/standalone.js     |  8 +-
 .../flow-typed/jest.js                        | 10 +-
 packages/react-devtools-inline/src/backend.js |  4 +-
 .../react-devtools-inline/src/frontend.js     |  8 +-
 packages/react-devtools-shared/src/Logger.js  | 52 +++++------
 .../src/__tests__/profilingCache-test.js      |  5 +-
 .../src/__tests__/profilingCharts-test.js     |  4 +-
 .../__tests__/storeComponentFilters-test.js   |  2 +-
 .../setupNativeStyleEditor.js                 | 10 +-
 .../src/backend/NativeStyleEditor/types.js    | 12 +--
 .../src/backend/agent.js                      | 60 ++++++------
 .../src/backend/console.js                    |  8 +-
 .../src/backend/profilingHooks.js             |  8 +-
 .../src/backend/renderer.js                   | 20 ++--
 .../src/backend/types.js                      | 74 +++++++--------
 .../src/backend/views/Highlighter/Overlay.js  |  2 +-
 .../src/backend/views/TraceUpdates/index.js   |  4 +-
 .../react-devtools-shared/src/backendAPI.js   | 24 ++---
 packages/react-devtools-shared/src/bridge.js  | 92 +++++++++----------
 .../src/devtools/ContextMenu/ContextMenu.js   |  4 +-
 .../devtools/ContextMenu/ContextMenuItem.js   |  4 +-
 .../src/devtools/ContextMenu/Contexts.js      | 10 +-
 .../devtools/ContextMenu/useContextMenu.js    |  6 +-
 .../src/devtools/ProfilerStore.js             |  4 +-
 .../src/devtools/ProfilingCache.js            | 16 ++--
 .../src/devtools/cache.js                     | 12 +--
 .../src/devtools/index.js                     |  4 +-
 .../src/devtools/store.js                     | 24 ++---
 .../src/devtools/views/ButtonIcon.js          |  4 +-
 .../src/devtools/views/Components/Badge.js    |  4 +-
 .../views/Components/ComponentSearchInput.js  |  2 +-
 .../devtools/views/Components/Components.js   | 10 +-
 .../devtools/views/Components/EditableName.js |  4 +-
 .../views/Components/EditableValue.js         |  4 +-
 .../src/devtools/views/Components/Element.js  | 12 +--
 .../views/Components/ExpandCollapseToggle.js  |  4 +-
 .../devtools/views/Components/HocBadges.js    |  4 +-
 .../views/Components/InspectedElement.js      |  2 +-
 .../Components/InspectedElementContext.js     | 12 +--
 .../Components/InspectedElementContextTree.js |  4 +-
 .../InspectedElementErrorBoundary.js          |  4 +-
 .../InspectedElementErrorsAndWarningsTree.js  | 12 +--
 .../Components/InspectedElementHooksTree.js   | 12 +--
 .../Components/InspectedElementPropsTree.js   |  4 +-
 .../Components/InspectedElementStateTree.js   |  4 +-
 .../InspectedElementStyleXPlugin.js           |  4 +-
 .../InspectedElementSuspenseToggle.js         |  4 +-
 .../views/Components/InspectedElementView.js  | 12 +--
 .../src/devtools/views/Components/KeyValue.js |  4 +-
 .../views/Components/LoadingAnimation.js      |  4 +-
 .../NativeStyleEditor/LayoutViewer.js         |  4 +-
 .../NativeStyleEditor/StyleEditor.js          | 16 ++--
 .../Components/NativeStyleEditor/context.js   | 12 +--
 .../Components/NativeStyleEditor/index.js     |  2 +-
 .../Components/NativeStyleEditor/types.js     |  4 +-
 .../views/Components/NewArrayValue.js         |  4 +-
 .../devtools/views/Components/NewKeyValue.js  |  4 +-
 .../views/Components/OwnersListContext.js     |  8 +-
 .../devtools/views/Components/OwnersStack.js  | 16 ++--
 .../views/Components/SelectedTreeHighlight.js |  6 +-
 .../src/devtools/views/Components/Tree.js     | 10 +-
 .../devtools/views/Components/TreeContext.js  | 88 +++++++++---------
 .../Components/ViewElementSourceContext.js    |  4 +-
 .../views/Components/ViewSourceContext.js     |  4 +-
 .../src/devtools/views/Components/types.js    | 20 ++--
 .../src/devtools/views/DevTools.js            |  4 +-
 .../views/ErrorBoundary/CaughtErrorView.js    |  4 +-
 .../views/ErrorBoundary/ErrorBoundary.js      |  8 +-
 .../devtools/views/ErrorBoundary/ErrorView.js |  4 +-
 .../views/ErrorBoundary/ReportNewIssue.js     |  4 +-
 .../ErrorBoundary/SuspendingErrorView.js      |  4 +-
 .../views/ErrorBoundary/TimeoutView.js        |  4 +-
 .../UnsupportedBridgeOperationView.js         |  4 +-
 .../ErrorBoundary/UpdateExistingIssue.js      |  4 +-
 .../src/devtools/views/ErrorBoundary/cache.js | 12 +--
 .../devtools/views/ErrorBoundary/githubAPI.js |  4 +-
 .../src/devtools/views/Icon.js                |  4 +-
 .../src/devtools/views/ModalDialog.js         | 30 +++---
 .../src/devtools/views/Profiler/ChartNode.js  |  4 +-
 .../views/Profiler/CommitFlamegraph.js        | 10 +-
 .../devtools/views/Profiler/CommitRanked.js   | 10 +-
 .../views/Profiler/CommitTreeBuilder.js       |  4 +-
 .../views/Profiler/FlamegraphChartBuilder.js  | 12 +--
 .../views/Profiler/HoveredFiberInfo.js        |  8 +-
 .../devtools/views/Profiler/NoCommitData.js   |  2 +-
 .../src/devtools/views/Profiler/Profiler.js   |  2 +-
 .../views/Profiler/ProfilerContext.js         | 12 +--
 .../views/Profiler/RankedChartBuilder.js      | 12 +--
 .../devtools/views/Profiler/RecordToggle.js   |  4 +-
 .../views/Profiler/ReloadAndProfileButton.js  |  8 +-
 .../devtools/views/Profiler/RootSelector.js   |  2 +-
 .../views/Profiler/SidebarCommitInfo.js       |  2 +-
 .../views/Profiler/SidebarEventInfo.js        |  6 +-
 .../Profiler/SidebarSelectedFiberInfo.js      |  2 +-
 .../views/Profiler/SnapshotCommitList.js      | 16 ++--
 .../views/Profiler/SnapshotSelector.js        |  2 +-
 .../src/devtools/views/Profiler/Updaters.js   |  4 +-
 .../devtools/views/Profiler/WhatChanged.js    |  4 +-
 .../src/devtools/views/Profiler/types.js      | 40 ++++----
 .../src/devtools/views/ReactLogo.js           |  4 +-
 .../src/devtools/views/SearchInput.js         |  4 +-
 .../views/Settings/ComponentsSettings.js      |  6 +-
 .../views/Settings/DebuggingSettings.js       |  2 +-
 .../views/Settings/GeneralSettings.js         |  4 +-
 .../views/Settings/ProfilerSettings.js        |  2 +-
 .../views/Settings/SettingsContext.js         |  8 +-
 .../devtools/views/Settings/SettingsModal.js  |  4 +-
 .../views/Settings/SettingsModalContext.js    |  2 +-
 .../src/devtools/views/TabBar.js              |  8 +-
 .../src/devtools/views/ThemeProvider.js       |  2 +-
 .../views/UnsupportedBridgeProtocolDialog.js  |  6 +-
 .../views/UnsupportedVersionDialog.js         |  4 +-
 .../views/WarnIfLegacyBackendDetected.js      |  4 +-
 .../src/devtools/views/context.js             |  8 +-
 .../src/devtools/views/hooks.js               | 16 ++--
 .../src/dynamicImportCache.js                 | 12 +--
 packages/react-devtools-shared/src/hook.js    |  4 +-
 .../src/hookNamesCache.js                     | 12 +--
 .../src/hooks/SourceMapConsumer.js            | 16 ++--
 .../src/hooks/SourceMapMetadataConsumer.js    |  4 +-
 .../src/hooks/SourceMapTypes.js               |  8 +-
 .../src/hooks/astUtils.js                     | 10 +-
 .../src/hooks/generateHookMap.js              |  8 +-
 .../src/hooks/getHookNameForLocation.js       |  6 +-
 .../parseHookNames/loadSourceAndMetadata.js   |  4 +-
 .../parseHookNames/parseSourceAndMetadata.js  | 12 +--
 .../react-devtools-shared/src/hydration.js    |  4 +-
 .../src/inspectedElementCache.js              | 16 ++--
 .../src/inspectedElementMutableSource.js      |  4 +-
 .../src/registerDevToolsEventLogger.js        |  4 +-
 packages/react-devtools-shared/src/types.js   | 28 +++---
 .../src/app/EditableProps/index.js            |  8 +-
 .../src/app/ToDoList/List.js                  |  6 +-
 .../src/app/ToDoList/ListItem.js              |  4 +-
 .../react-devtools-timeline/src/CanvasPage.js | 10 +-
 .../src/EventTooltip.js                       | 40 ++++----
 .../react-devtools-timeline/src/Timeline.js   |  6 +-
 .../src/TimelineContext.js                    |  8 +-
 .../src/TimelineSearchContext.js              | 24 ++---
 .../src/TimelineSearchInput.js                |  2 +-
 .../src/content-views/utils/colors.js         |  6 +-
 .../src/content-views/utils/text.js           |  4 +-
 .../src/import-worker/index.js                |  6 +-
 .../src/import-worker/preprocessData.js       |  8 +-
 .../src/timelineCache.js                      | 12 +--
 packages/react-devtools-timeline/src/types.js | 76 +++++++--------
 .../src/utils/useSmartTooltip.js              |  6 +-
 .../src/view-base/Surface.js                  |  4 +-
 .../src/view-base/geometry.js                 | 10 +-
 .../src/view-base/layouter.js                 |  2 +-
 .../src/view-base/resizable/ResizableView.js  | 12 +--
 .../src/view-base/useCanvasInteraction.js     | 74 +++++++--------
 .../src/view-base/utils/normalizeWheel.js     |  4 +-
 .../src/view-base/utils/scrollState.js        | 24 ++---
 .../src/client/ReactDOMEventHandle.js         |  4 +-
 .../src/client/ReactDOMHostConfig.js          | 16 ++--
 .../react-dom/src/client/ReactDOMSelect.js    |  6 +-
 .../react-dom/src/client/ReactDOMTextarea.js  |  6 +-
 .../src/client/inputValueTracking.js          |  4 +-
 .../src/events/DOMPluginEventSystem.js        |  8 +-
 .../src/events/ReactDOMEventReplaying.js      |  8 +-
 .../src/events/ReactSyntheticEventType.js     | 20 ++--
 .../src/server/ReactDOMFizzServerBrowser.js   |  8 +-
 .../src/server/ReactDOMFizzServerNode.js      |  8 +-
 .../src/server/ReactDOMFizzStaticBrowser.js   |  8 +-
 .../src/server/ReactDOMFizzStaticNode.js      |  8 +-
 .../src/server/ReactDOMLegacyServerBrowser.js |  4 +-
 .../src/server/ReactDOMLegacyServerImpl.js    |  4 +-
 .../src/server/ReactDOMLegacyServerNode.js    |  4 +-
 .../server/ReactDOMLegacyServerNodeStream.js  |  4 +-
 .../src/server/ReactDOMServerFormatConfig.js  |  8 +-
 .../ReactDOMServerLegacyFormatConfig.js       |  4 +-
 packages/react-dom/src/shared/DOMProperty.js  |  4 +-
 .../react-dom/src/shared/ReactDOMTypes.js     |  4 +-
 packages/react-fetch/src/ReactFetchBrowser.js | 12 +--
 packages/react-fetch/src/ReactFetchNode.js    | 16 ++--
 packages/react-fs/src/ReactFilesystem.js      | 26 +++---
 .../src/dom/create-event-handle/Focus.js      | 20 ++--
 .../src/dom/create-event-handle/useEvent.js   |  8 +-
 .../src/ReactFabricHostConfig.js              | 24 ++---
 .../src/ReactNativeHostConfig.js              |  8 +-
 .../src/ReactNativeTypes.js                   | 60 ++++++------
 .../Libraries/ReactPrivate/deepDiffer.js      |  2 +-
 .../src/legacy-events/PluginModuleType.js     |  4 +-
 .../legacy-events/ReactSyntheticEventType.js  | 20 ++--
 .../ResponderTouchHistoryStore.js             |  4 +-
 .../server/ReactNativeServerFormatConfig.js   |  4 +-
 .../src/ReactNoopServer.js                    | 12 +--
 .../src/createReactNoop.js                    | 16 ++--
 packages/react-pg/src/ReactPostgres.js        | 12 +--
 .../src/ReactCapturedValue.js                 |  4 +-
 .../src/ReactFiberCacheComponent.new.js       | 12 +--
 .../src/ReactFiberCacheComponent.old.js       | 12 +--
 .../src/ReactFiberClassUpdateQueue.new.js     | 12 +--
 .../src/ReactFiberClassUpdateQueue.old.js     | 12 +--
 .../src/ReactFiberConcurrentUpdates.new.js    |  8 +-
 .../src/ReactFiberConcurrentUpdates.old.js    |  8 +-
 .../src/ReactFiberHooks.new.js                | 74 +++++++--------
 .../src/ReactFiberHooks.old.js                | 74 +++++++--------
 .../src/ReactFiberHotReloading.new.js         |  8 +-
 .../src/ReactFiberHotReloading.old.js         |  8 +-
 .../src/ReactFiberOffscreenComponent.js       | 16 ++--
 .../src/ReactFiberReconciler.new.js           |  4 +-
 .../src/ReactFiberReconciler.old.js           |  4 +-
 .../src/ReactFiberRoot.new.js                 |  4 +-
 .../src/ReactFiberRoot.old.js                 |  4 +-
 .../src/ReactFiberStack.new.js                |  2 +-
 .../src/ReactFiberStack.old.js                |  2 +-
 .../src/ReactFiberSuspenseComponent.new.js    | 12 +--
 .../src/ReactFiberSuspenseComponent.old.js    | 12 +--
 .../ReactFiberTracingMarkerComponent.new.js   | 26 +++---
 .../ReactFiberTracingMarkerComponent.old.js   | 26 +++---
 .../src/ReactFiberTreeContext.new.js          |  4 +-
 .../src/ReactFiberTreeContext.old.js          |  4 +-
 .../src/ReactInternalTypes.js                 | 46 +++++-----
 .../src/ReactTestSelectors.js                 | 32 +++----
 .../react-refresh/src/ReactFreshRuntime.js    |  8 +-
 .../src/ReactDOMServerFB.js                   |  8 +-
 .../src/ReactFlightDOMRelayProtocol.js        |  2 +-
 .../src/ReactFlightDOMRelayServer.js          |  4 +-
 .../ReactFlightDOMRelayServerHostConfig.js    |  4 +-
 .../src/ReactServerStreamConfigFB.js          |  4 +-
 .../ReactFlightClientWebpackBundlerConfig.js  | 12 +--
 .../src/ReactFlightDOMClient.js               |  4 +-
 .../src/ReactFlightDOMServerBrowser.js        |  4 +-
 .../src/ReactFlightDOMServerNode.js           |  8 +-
 .../ReactFlightServerWebpackBundlerConfig.js  | 16 ++--
 .../src/ReactFlightWebpackNodeLoader.js       | 26 +++---
 .../src/ReactFlightWebpackPlugin.js           |  8 +-
 .../src/ReactFlightNativeRelayProtocol.js     |  2 +-
 .../ReactFlightNativeRelayServerHostConfig.js |  4 +-
 .../src/ReactFizzClassComponent.js            |  4 +-
 .../src/ReactFizzComponentStack.js            | 12 +--
 packages/react-server/src/ReactFizzHooks.js   | 14 +--
 .../react-server/src/ReactFizzNewContext.js   |  4 +-
 packages/react-server/src/ReactFizzServer.js  | 20 ++--
 .../react-server/src/ReactFizzTreeContext.js  |  4 +-
 .../react-server/src/ReactFlightNewContext.js |  4 +-
 .../react-server/src/ReactFlightServer.js     | 14 +--
 .../src/ReactTestHostConfig.js                | 14 +--
 .../src/ReactTestRenderer.js                  |  4 +-
 packages/react/src/ReactChildren.js           |  4 +-
 packages/react/src/ReactCurrentBatchConfig.js |  4 +-
 packages/react/src/ReactHooks.js              |  4 +-
 packages/react/src/ReactLazy.js               | 20 ++--
 packages/scheduler/src/SchedulerMinHeap.js    |  4 +-
 .../scheduler/src/forks/SchedulerPostTask.js  |  6 +-
 packages/shared/ReactElementType.js           |  8 +-
 packages/shared/ReactTypes.js                 | 22 ++---
 .../use-subscription/src/useSubscription.js   |  4 +-
 scripts/flow/environment.js                   | 34 +++----
 scripts/flow/react-native-host-hooks.js       |  6 +-
 scripts/flow/react-relay-hooks.js             |  2 +-
 .../ReactNativeViewConfigRegistry.js          | 12 +--
 259 files changed, 1439 insertions(+), 1444 deletions(-)

diff --git a/packages/react-cache/src/LRU.js b/packages/react-cache/src/LRU.js
index 5046b3f2bc9f..9a90cc8a3ede 100644
--- a/packages/react-cache/src/LRU.js
+++ b/packages/react-cache/src/LRU.js
@@ -16,12 +16,12 @@ const {
   unstable_IdlePriority: IdlePriority,
 } = Scheduler;
 
-type Entry<T> = {|
+type Entry<T> = {
   value: T,
   onDelete: () => mixed,
   previous: Entry<T>,
   next: Entry<T>,
-|};
+};
 
 export function createLRU<T>(limit: number) {
   let LIMIT = limit;
diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
index f8b33434b7c7..8781899dc2ae 100644
--- a/packages/react-cache/src/ReactCacheOld.js
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -15,20 +15,20 @@ import {createLRU} from './LRU';
 
 type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
 
-type PendingResult = {|
+type PendingResult = {
   status: 0,
   value: Suspender,
-|};
+};
 
-type ResolvedResult<V> = {|
+type ResolvedResult<V> = {
   status: 1,
   value: V,
-|};
+};
 
-type RejectedResult = {|
+type RejectedResult = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Result<V> = PendingResult | ResolvedResult<V> | RejectedResult;
 
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 584639921e51..ddc151654b76 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -34,7 +34,7 @@ export type JSONValue =
   | null
   | boolean
   | string
-  | {|+[key: string]: JSONValue|}
+  | {+[key: string]: JSONValue}
   | $ReadOnlyArray<JSONValue>;
 
 const PENDING = 0;
@@ -43,36 +43,36 @@ const RESOLVED_MODULE = 2;
 const INITIALIZED = 3;
 const ERRORED = 4;
 
-type PendingChunk = {|
+type PendingChunk = {
   _status: 0,
   _value: null | Array<() => mixed>,
   _response: Response,
   then(resolve: () => mixed): void,
-|};
-type ResolvedModelChunk = {|
+};
+type ResolvedModelChunk = {
   _status: 1,
   _value: UninitializedModel,
   _response: Response,
   then(resolve: () => mixed): void,
-|};
-type ResolvedModuleChunk<T> = {|
+};
+type ResolvedModuleChunk<T> = {
   _status: 2,
   _value: ModuleReference<T>,
   _response: Response,
   then(resolve: () => mixed): void,
-|};
-type InitializedChunk<T> = {|
+};
+type InitializedChunk<T> = {
   _status: 3,
   _value: T,
   _response: Response,
   then(resolve: () => mixed): void,
-|};
-type ErroredChunk = {|
+};
+type ErroredChunk = {
   _status: 4,
   _value: Error,
   _response: Response,
   then(resolve: () => mixed): void,
-|};
+};
 type SomeChunk<T> =
   | PendingChunk
   | ResolvedModelChunk
@@ -338,7 +338,7 @@ export function parseModelString(
 
 export function parseModelTuple(
   response: Response,
-  value: {|+[key: string]: JSONValue|} | $ReadOnlyArray<JSONValue>,
+  value: {+[key: string]: JSONValue} | $ReadOnlyArray<JSONValue>,
 ): any {
   const tuple: [mixed, mixed, mixed, mixed] = (value: any);
 
diff --git a/packages/react-client/src/ReactFlightClientHostConfigStream.js b/packages/react-client/src/ReactFlightClientHostConfigStream.js
index d56e5d43128f..2005e8a98a9e 100644
--- a/packages/react-client/src/ReactFlightClientHostConfigStream.js
+++ b/packages/react-client/src/ReactFlightClientHostConfigStream.js
@@ -10,11 +10,11 @@
 import type {ResponseBase} from './ReactFlightClient';
 import type {StringDecoder} from './ReactFlightClientHostConfig';
 
-export type Response = ResponseBase & {|
+export type Response = ResponseBase & {
   _partialRow: string,
   _fromJSON: (key: string, value: JSONValue) => any,
   _stringDecoder: StringDecoder,
-|};
+};
 
 export type UninitializedModel = string;
 
diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 68305e4a9369..2cb6e7fbdf38 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -51,10 +51,10 @@ type Dispatch<A> = A => void;
 
 let primitiveStackCache: null | Map<string, Array<any>> = null;
 
-type Hook = {|
+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
@@ -154,7 +154,7 @@ function useReducer<S, I, A>(
   return [state, (action: A) => {}];
 }
 
-function useRef<T>(initialValue: T): {|current: T|} {
+function useRef<T>(initialValue: T): {current: T} {
   const hook = nextHook();
   const ref = hook !== null ? hook.memoizedState : {current: initialValue};
   hookLog.push({
@@ -208,7 +208,7 @@ function useEffect(
 }
 
 function useImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   inputs: Array<mixed> | void | null,
 ): void {
@@ -371,12 +371,12 @@ const DispatcherProxy = new Proxy(Dispatcher, DispatcherProxyHandler);
 
 // Inspect
 
-export type HookSource = {|
+export type HookSource = {
   lineNumber: number | null,
   columnNumber: number | null,
   fileName: string | null,
   functionName: string | null,
-|};
+};
 
 export type HooksNode = {
   id: number | null,
diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index ff69b709dab0..4b594acf6c2e 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -284,14 +284,14 @@ function connectToSocket(socket: WebSocket) {
   };
 }
 
-type ServerOptions = {|
+type ServerOptions = {
   key?: string,
   cert?: string,
-|};
+};
 
-type LoggerOptions = {|
+type LoggerOptions = {
   surface?: ?string,
-|};
+};
 
 function startServer(
   port?: number = 8097,
diff --git a/packages/react-devtools-extensions/flow-typed/jest.js b/packages/react-devtools-extensions/flow-typed/jest.js
index 39e6cae3c255..dba752e9ba30 100644
--- a/packages/react-devtools-extensions/flow-typed/jest.js
+++ b/packages/react-devtools-extensions/flow-typed/jest.js
@@ -206,7 +206,7 @@ type EnzymeMatchersType = {
   toIncludeText(text: string): void,
   toMatchElement(
     element: React$Element<any>,
-    options?: {|ignoreProps?: boolean, verbose?: boolean|}
+    options?: {ignoreProps?: boolean, verbose?: boolean}
   ): void,
   toMatchSelector(selector: string): void,
   // 7.x
@@ -1095,7 +1095,7 @@ type JestPrettyFormatPrint = any => string;
 // eslint-disable-next-line no-unused-vars
 type JestPrettyFormatStringOrNull = string | null;
 
-type JestPrettyFormatOptions = {|
+type JestPrettyFormatOptions = {
   callToJSON: boolean,
   edgeSpacing: string,
   escapeRegex: boolean,
@@ -1107,14 +1107,14 @@ type JestPrettyFormatOptions = {|
   plugins: JestPrettyFormatPlugins,
   printFunctionName: boolean,
   spacing: string,
-  theme: {|
+  theme: {
     comment: string,
     content: string,
     prop: string,
     tag: string,
     value: string,
-  |},
-|};
+  },
+};
 
 type JestPrettyFormatPlugin = {
   print: (
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index c0c87871df11..061c447909e3 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -78,9 +78,9 @@ export function activate(
   contentWindow: window,
   {
     bridge,
-  }: {|
+  }: {
     bridge?: BackendBridge,
-  |} = {},
+  } = {},
 ): void {
   if (bridge == null) {
     bridge = createBridge(contentWindow);
diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js
index 42c820126f28..b8dc2abe6adb 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -17,11 +17,11 @@ import type {Wall} from 'react-devtools-shared/src/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Props} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-type Config = {|
+type Config = {
   checkBridgeProtocolCompatibility?: boolean,
   supportsNativeInspection?: boolean,
   supportsProfiling?: boolean,
-|};
+};
 
 export function createStore(bridge: FrontendBridge, config?: Config): Store {
   return new Store(bridge, {
@@ -62,10 +62,10 @@ export function initialize(
   {
     bridge,
     store,
-  }: {|
+  }: {
     bridge?: FrontendBridge,
     store?: Store,
-  |} = {},
+  } = {},
 ): React.AbstractComponent<Props, mixed> {
   if (bridge == null) {
     bridge = createBridge(contentWindow);
diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index 6ddb40f0a97e..0998f860a99c 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -10,57 +10,57 @@
 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: '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: {|
+      +metadata: {
         +source: string,
-      |},
-    |}
-  | {|
+      },
+    }
+  | {
       +event_name: 'inspect-element-button-clicked',
-    |}
-  | {|
+    }
+  | {
       +event_name: 'profiling-start',
-      +metadata: {|
+      +metadata: {
         +current_tab: string,
-      |},
-    |}
-  | {|
+      },
+    }
+  | {
       +event_name: 'profiler-tab-changed',
-      +metadata: {|
+      +metadata: {
         +tabId: string,
-      |},
-    |}
-  | {|
+      },
+    }
+  | {
       +event_name: 'settings-changed',
       +metadata: {
         +key: string,
         +value: any,
         ...
       },
-    |};
+    };
 
 export type LogFunction = LoggerEvent => void | Promise<void>;
 
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
index 1a84be03aa50..d3ce61cbd747 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCache-test.js
@@ -202,10 +202,7 @@ describe('ProfilingCache', () => {
 
     const ModernContext = React.createContext(0);
 
-    class LegacyContextProvider extends React.Component<
-      any,
-      {|count: number|},
-    > {
+    class LegacyContextProvider extends React.Component<any, {count: number}> {
       static childContextTypes = {
         count: PropTypes.number,
       };
diff --git a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
index cf8d4aae4a71..67196274a68d 100644
--- a/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
+++ b/packages/react-devtools-shared/src/__tests__/profilingCharts-test.js
@@ -61,7 +61,7 @@ describe('profiling charts', () => {
   describe('flamegraph chart', () => {
     // @reactVersion >= 16.9
     it('should contain valid data', () => {
-      const Parent = (_: {||}) => {
+      const Parent = (_: {}) => {
         Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
@@ -211,7 +211,7 @@ describe('profiling charts', () => {
   describe('ranked chart', () => {
     // @reactVersion >= 16.9
     it('should contain valid data', () => {
-      const Parent = (_: {||}) => {
+      const Parent = (_: {}) => {
         Scheduler.unstable_advanceTime(10);
         return (
           <React.Fragment>
diff --git a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
index e9e30de830a1..d49f3f3e1b8e 100644
--- a/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
+++ b/packages/react-devtools-shared/src/__tests__/storeComponentFilters-test.js
@@ -51,7 +51,7 @@ describe('Store component filters', () => {
 
   // @reactVersion >= 16.0
   it('should support filtering by element type', () => {
-    class ClassComponent extends React.Component<{|children: React$Node|}> {
+    class ClassComponent extends React.Component<{children: React$Node}> {
       render() {
         return <div>{this.props.children}</div>;
       }
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
index 6a7921489c59..fee2847f05e6 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js
@@ -25,7 +25,7 @@ export default function setupNativeStyleEditor(
 ) {
   bridge.addListener(
     'NativeStyleEditor_measure',
-    ({id, rendererID}: {|id: number, rendererID: RendererID|}) => {
+    ({id, rendererID}: {id: number, rendererID: RendererID}) => {
       measureStyle(agent, bridge, resolveNativeStyle, id, rendererID);
     },
   );
@@ -38,13 +38,13 @@ export default function setupNativeStyleEditor(
       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),
@@ -59,12 +59,12 @@ export default function setupNativeStyleEditor(
       rendererID,
       name,
       value,
-    }: {|
+    }: {
       id: number,
       rendererID: number,
       name: string,
       value: string,
-    |}) => {
+    }) => {
       setStyle(agent, id, rendererID, name, value);
       setTimeout(() =>
         measureStyle(agent, bridge, resolveNativeStyle, id, rendererID),
diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
index f20d0d016d85..51ac03051d44 100644
--- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
+++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/types.js
@@ -7,14 +7,14 @@
  * @flow
  */
 
-export type BoxStyle = $ReadOnly<{|
+export type BoxStyle = $ReadOnly<{
   bottom: number,
   left: number,
   right: number,
   top: number,
-|}>;
+}>;
 
-export type Layout = {|
+export type Layout = {
   x: number,
   y: number,
   width: number,
@@ -23,12 +23,12 @@ export type Layout = {|
   top: number,
   margin: BoxStyle,
   padding: BoxStyle,
-|};
+};
 
 export type Style = Object;
 
-export type StyleAndLayout = {|
+export type StyleAndLayout = {
   id: number,
   style: Style | null,
   layout: Layout | null,
-|};
+};
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 222a883ce761..0d0fb5e81d7f 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -53,102 +53,102 @@ const debug = (methodName, ...args) => {
   }
 };
 
-type ElementAndRendererID = {|
+type ElementAndRendererID = {
   id: number,
   rendererID: number,
-|};
+};
 
-type StoreAsGlobalParams = {|
+type StoreAsGlobalParams = {
   count: number,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type CopyElementParams = {|
+type CopyElementParams = {
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type InspectElementParams = {|
+type InspectElementParams = {
   forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
   requestID: number,
-|};
+};
 
-type OverrideHookParams = {|
+type OverrideHookParams = {
   id: number,
   hookID: number,
   path: Array<string | number>,
   rendererID: number,
   wasForwarded?: boolean,
   value: any,
-|};
+};
 
-type SetInParams = {|
+type SetInParams = {
   id: number,
   path: Array<string | number>,
   rendererID: number,
   wasForwarded?: boolean,
   value: any,
-|};
+};
 
 type PathType = 'props' | 'hooks' | 'state' | 'context';
 
-type DeletePathParams = {|
+type DeletePathParams = {
   type: PathType,
   hookID?: ?number,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type RenamePathParams = {|
+type RenamePathParams = {
   type: PathType,
   hookID?: ?number,
   id: number,
   oldPath: Array<string | number>,
   newPath: Array<string | number>,
   rendererID: number,
-|};
+};
 
-type OverrideValueAtPathParams = {|
+type OverrideValueAtPathParams = {
   type: PathType,
   hookID?: ?number,
   id: number,
   path: Array<string | number>,
   rendererID: number,
   value: any,
-|};
+};
 
-type OverrideErrorParams = {|
+type OverrideErrorParams = {
   id: number,
   rendererID: number,
   forceError: boolean,
-|};
+};
 
-type OverrideSuspenseParams = {|
+type OverrideSuspenseParams = {
   id: number,
   rendererID: number,
   forceFallback: boolean,
-|};
+};
 
-type PersistedSelection = {|
+type PersistedSelection = {
   rendererID: number,
   path: Array<PathFrame>,
-|};
+};
 
-export default class Agent extends EventEmitter<{|
+export default class Agent extends EventEmitter<{
   hideNativeHighlight: [],
   showNativeHighlight: [NativeType],
   startInspectingNative: [],
   stopInspectingNative: [],
   shutdown: [],
   traceUpdates: [Set<NativeType>],
-|}> {
+}> {
   _bridge: BackendBridge;
   _isProfiling: boolean = false;
   _recordChangeDescriptions: boolean = false;
@@ -254,7 +254,7 @@ export default class Agent extends EventEmitter<{|
     return this._rendererInterfaces;
   }
 
-  clearErrorsAndWarnings = ({rendererID}: {|rendererID: RendererID|}) => {
+  clearErrorsAndWarnings = ({rendererID}: {rendererID: RendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -355,7 +355,7 @@ export default class Agent extends EventEmitter<{|
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
   };
 
-  getProfilingData = ({rendererID}: {|rendererID: RendererID|}) => {
+  getProfilingData = ({rendererID}: {rendererID: RendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -676,13 +676,13 @@ export default class Agent extends EventEmitter<{|
     showInlineWarningsAndErrors,
     hideConsoleLogsInStrictMode,
     browserTheme,
-  }: {|
+  }: {
     appendComponentStack: boolean,
     breakOnConsoleErrors: boolean,
     showInlineWarningsAndErrors: boolean,
     hideConsoleLogsInStrictMode: boolean,
     browserTheme: BrowserTheme,
-  |}) => {
+  }) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
     // then reinstall the console overrides.
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 03c36c14dcf7..f5718d558f3f 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -69,12 +69,12 @@ type OnErrorOrWarning = (
 
 const injectedRenderers: Map<
   ReactRenderer,
-  {|
+  {
     currentDispatcherRef: CurrentDispatcherRef,
     getCurrentFiber: () => Fiber | null,
     onErrorOrWarning: ?OnErrorOrWarning,
     workTagMap: WorkTagMap,
-  |},
+  },
 > = new Map();
 
 let targetConsole: Object = console;
@@ -151,13 +151,13 @@ export function patch({
   showInlineWarningsAndErrors,
   hideConsoleLogsInStrictMode,
   browserTheme,
-}: {|
+}: {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
   browserTheme: BrowserTheme,
-|}): void {
+}): void {
   // Settings may change after we've patched the console.
   // Using a shared ref allows the patch function to read the latest values.
   consoleSettingsRef.appendComponentStack = appendComponentStack;
diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js
index 2110545d8a66..bd08fef3505a 100644
--- a/packages/react-devtools-shared/src/backend/profilingHooks.js
+++ b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -93,11 +93,11 @@ export function setPerformanceMock_ONLY_FOR_TESTING(
 export type GetTimelineData = () => TimelineData | null;
 export type ToggleProfilingStatus = (value: boolean) => void;
 
-type Response = {|
+type Response = {
   getTimelineData: GetTimelineData,
   profilingHooks: DevToolsProfilingHooks,
   toggleProfilingStatus: ToggleProfilingStatus,
-|};
+};
 
 export function createProfilingHooks({
   getDisplayNameForFiber,
@@ -106,14 +106,14 @@ export function createProfilingHooks({
   workTagMap,
   currentDispatcherRef,
   reactVersion,
-}: {|
+}: {
   getDisplayNameForFiber: (fiber: Fiber) => string | null,
   getIsProfiling: () => boolean,
   getLaneLabelMap?: () => Map<Lane, string> | null,
   currentDispatcherRef?: CurrentDispatcherRef,
   workTagMap: WorkTagMap,
   reactVersion: string,
-|}): Response {
+}): Response {
   let currentBatchUID: BatchUID = 0;
   let currentReactComponentMeasure: ReactComponentMeasure | null = null;
   let currentReactMeasuresStack: Array<ReactMeasure> = [];
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index a123d96262c7..7ef225dee1c3 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -126,23 +126,23 @@ import type {
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
 type getTypeSymbolType = (type: any) => symbol | number;
 
-type ReactPriorityLevelsType = {|
+type ReactPriorityLevelsType = {
   ImmediatePriority: number,
   UserBlockingPriority: number,
   NormalPriority: number,
   LowPriority: number,
   IdlePriority: number,
   NoPriority: number,
-|};
+};
 
-type ReactTypeOfSideEffectType = {|
+type ReactTypeOfSideEffectType = {
   DidCapture: number,
   NoFlags: number,
   PerformedWork: number,
   Placement: number,
   Incomplete: number,
   Hydrating: number,
-|};
+};
 
 function getFiberFlags(fiber: Fiber): number {
   // The name of this field changed from "effectTag" to "flags"
@@ -157,14 +157,14 @@ const getCurrentTime =
 
 export function getInternalReactConstants(
   version: string,
-): {|
+): {
   getDisplayNameForFiber: getDisplayNameForFiberType,
   getTypeSymbol: getTypeSymbolType,
   ReactPriorityLevels: ReactPriorityLevelsType,
   ReactTypeOfSideEffect: ReactTypeOfSideEffectType,
   ReactTypeOfWork: WorkTagMap,
   StrictModeBits: number,
-|} {
+} {
   const ReactTypeOfSideEffect: ReactTypeOfSideEffectType = {
     DidCapture: 0b10000000,
     NoFlags: 0b00,
@@ -1595,10 +1595,10 @@ export function attach(
 
   type OperationsArray = Array<number>;
 
-  type StringTableEntry = {|
+  type StringTableEntry = {
     encodedString: Array<number>,
     id: number,
-  |};
+  };
 
   const pendingOperations: OperationsArray = [];
   const pendingRealUnmountedIDs: Array<number> = [];
@@ -3950,7 +3950,7 @@ export function attach(
     }
   }
 
-  type CommitProfilingData = {|
+  type CommitProfilingData = {
     changeDescriptions: Map<number, ChangeDescription> | null,
     commitTime: number,
     durations: Array<number>,
@@ -3959,7 +3959,7 @@ export function attach(
     passiveEffectDuration: number | null,
     priorityLevel: string | null,
     updaters: Array<SerializedElement> | null,
-  |};
+  };
 
   type CommitProfilingMetadataMap = Map<number, Array<CommitProfilingData>>;
   type DisplayNamesByRootID = Map<number, string>;
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index be71a816d632..1830edfef405 100644
--- a/packages/react-devtools-shared/src/backend/types.js
+++ b/packages/react-devtools-shared/src/backend/types.js
@@ -26,7 +26,7 @@ export type WorkTag = number;
 export type WorkFlags = number;
 export type ExpirationTime = number;
 
-export type WorkTagMap = {|
+export type WorkTagMap = {
   CacheComponent: WorkTag,
   ClassComponent: WorkTag,
   ContextConsumer: WorkTag,
@@ -55,22 +55,22 @@ export type WorkTagMap = {|
   SuspenseListComponent: WorkTag,
   TracingMarkerComponent: WorkTag,
   YieldComponent: WorkTag,
-|};
+};
 
 // TODO: If it's useful for the frontend to know which types of data an Element has
 // (e.g. props, state, context, hooks) then we could add a bitmask field for this
 // to keep the number of attributes small.
-export type FiberData = {|
+export type FiberData = {
   key: string | null,
   displayName: string | null,
   type: ElementType,
-|};
+};
 
 export type NativeType = Object;
 export type RendererID = number;
 
 type Dispatcher = any;
-export type CurrentDispatcherRef = {|current: null | Dispatcher|};
+export type CurrentDispatcherRef = {current: null | Dispatcher};
 
 export type GetDisplayNameForFiberID = (
   id: number,
@@ -158,16 +158,16 @@ export type ReactRenderer = {
   ...
 };
 
-export type ChangeDescription = {|
+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 = {|
+export type CommitDataBackend = {
   // Tuple of fiber ID and change description
   changeDescriptions: Array<[number, ChangeDescription]> | null,
   duration: number,
@@ -182,48 +182,48 @@ export type CommitDataBackend = {|
   priorityLevel: string | null,
   timestamp: number,
   updaters: Array<SerializedElement> | null,
-|};
+};
 
-export type ProfilingDataForRootBackend = {|
+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 = {|
+export type ProfilingDataBackend = {
   dataForRoots: Array<ProfilingDataForRootBackend>,
   rendererID: number,
   timelineData: TimelineDataExport | null,
-|};
+};
 
-export type PathFrame = {|
+export type PathFrame = {
   key: string | null,
   index: number,
   displayName: string | null,
-|};
+};
 
-export type PathMatch = {|
+export type PathMatch = {
   id: number,
   isFullMatch: boolean,
-|};
+};
 
-export type SerializedElement = {|
+export type SerializedElement = {
   displayName: string | null,
   id: number,
   key: number | string | null,
   type: ElementType,
-|};
+};
 
-export type OwnersList = {|
+export type OwnersList = {
   id: number,
   owners: Array<SerializedElement> | null,
-|};
+};
 
-export type InspectedElement = {|
+export type InspectedElement = {
   id: number,
 
   displayName: string | null,
@@ -278,48 +278,48 @@ export type InspectedElement = {|
 
   // UI plugins/visualizations for the inspected element.
   plugins: Plugins,
-|};
+};
 
 export const InspectElementErrorType = 'error';
 export const InspectElementFullDataType = 'full-data';
 export const InspectElementNoChangeType = 'no-change';
 export const InspectElementNotFoundType = 'not-found';
 
-export type InspectElementError = {|
+export type InspectElementError = {
   id: number,
   responseID: number,
   type: 'error',
   errorType: 'user' | 'unknown-hook' | 'uncaught',
   message: string,
   stack?: string,
-|};
+};
 
-export type InspectElementFullData = {|
+export type InspectElementFullData = {
   id: number,
   responseID: number,
   type: 'full-data',
   value: InspectedElement,
-|};
+};
 
-export type InspectElementHydratedPath = {|
+export type InspectElementHydratedPath = {
   id: number,
   responseID: number,
   type: 'hydrated-path',
   path: Array<string | number>,
   value: any,
-|};
+};
 
-export type InspectElementNoChange = {|
+export type InspectElementNoChange = {
   id: number,
   responseID: number,
   type: 'no-change',
-|};
+};
 
-export type InspectElementNotFound = {|
+export type InspectElementNotFound = {
   id: number,
   responseID: number,
   type: 'not-found',
-|};
+};
 
 export type InspectedElementPayload =
   | InspectElementError
@@ -328,10 +328,10 @@ export type InspectedElementPayload =
   | InspectElementNoChange
   | InspectElementNotFound;
 
-export type InstanceAndStyle = {|
+export type InstanceAndStyle = {
   instance: Object | null,
   style: Object | null,
-|};
+};
 
 type Type = 'props' | 'hooks' | 'state' | 'context';
 
@@ -411,7 +411,7 @@ 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 = {|
+export type DevToolsProfilingHooks = {
   // Scheduling methods:
   markRenderScheduled: (lane: Lane) => void,
   markStateUpdateScheduled: (fiber: Fiber, lane: Lane) => void,
@@ -449,7 +449,7 @@ export type DevToolsProfilingHooks = {|
   markComponentPassiveEffectMountStopped: () => void,
   markComponentPassiveEffectUnmountStarted: (fiber: Fiber) => void,
   markComponentPassiveEffectUnmountStopped: () => void,
-|};
+};
 
 export type DevToolsHook = {
   listeners: {[key: string]: Array<Handler>, ...},
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
index b9bfae87a86d..0b4dc5e94c2e 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -12,7 +12,7 @@ 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|};
+type Box = {top: number, left: number, width: number, height: number};
 
 const assign = Object.assign;
 
diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
index 831b47385d8e..4927d4a3cb22 100644
--- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
+++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
@@ -30,12 +30,12 @@ const getCurrentTime =
     ? () => performance.now()
     : () => Date.now();
 
-export type Data = {|
+export type Data = {
   count: number,
   expirationTime: number,
   lastMeasuredAt: number,
   rect: Rect | null,
-|};
+};
 
 const nodeToData: Map<NativeType, Data> = new Map();
 
diff --git a/packages/react-devtools-shared/src/backendAPI.js b/packages/react-devtools-shared/src/backendAPI.js
index adf0c5e8b091..efa56cfcaddf 100644
--- a/packages/react-devtools-shared/src/backendAPI.js
+++ b/packages/react-devtools-shared/src/backendAPI.js
@@ -28,10 +28,10 @@ import type {
 export function clearErrorsAndWarnings({
   bridge,
   store,
-}: {|
+}: {
   bridge: FrontendBridge,
   store: Store,
-|}): void {
+}): void {
   store.rootIDToRendererID.forEach(rendererID => {
     bridge.send('clearErrorsAndWarnings', {rendererID});
   });
@@ -41,11 +41,11 @@ export function clearErrorsForElement({
   bridge,
   id,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('clearErrorsForFiberID', {
     rendererID,
     id,
@@ -56,11 +56,11 @@ export function clearWarningsForElement({
   bridge,
   id,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('clearWarningsForFiberID', {
     rendererID,
     id,
@@ -72,12 +72,12 @@ export function copyInspectedElementPath({
   id,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('copyElementPath', {
     id,
     path,
@@ -91,13 +91,13 @@ export function inspectElement({
   id,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   forceFullData: boolean,
   id: number,
   path: Array<string | number> | null,
   rendererID: number,
-|}): Promise<InspectedElementPayload> {
+}): Promise<InspectedElementPayload> {
   const requestID = requestCounter++;
   const promise = getPromiseForRequestID<InspectedElementPayload>(
     requestID,
@@ -124,12 +124,12 @@ export function storeAsGlobal({
   id,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   id: number,
   path: Array<string | number>,
   rendererID: number,
-|}): void {
+}): void {
   bridge.send('storeAsGlobal', {
     count: storeAsGlobalCount++,
     id,
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index 0e5f837ecbc7..fe6ba4407a92 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -24,7 +24,7 @@ const BATCH_DURATION = 100;
 // 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 = {|
+export type BridgeProtocol = {
   // Version supported by the current frontend/backend.
   version: number,
 
@@ -32,7 +32,7 @@ export type BridgeProtocol = {|
   // 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.
@@ -73,121 +73,121 @@ export const BRIDGE_PROTOCOL: Array<BridgeProtocol> = [
 export const currentBridgeProtocol: BridgeProtocol =
   BRIDGE_PROTOCOL[BRIDGE_PROTOCOL.length - 1];
 
-type ElementAndRendererID = {|id: number, rendererID: RendererID|};
+type ElementAndRendererID = {id: number, rendererID: RendererID};
 
-type Message = {|
+type Message = {
   event: string,
   payload: any,
-|};
+};
 
-type HighlightElementInDOM = {|
+type HighlightElementInDOM = {
   ...ElementAndRendererID,
   displayName: string | null,
   hideAfterTimeout: boolean,
   openNativeElementsPanel: boolean,
   scrollIntoView: boolean,
-|};
+};
 
-type OverrideValue = {|
+type OverrideValue = {
   ...ElementAndRendererID,
   path: Array<string | number>,
   wasForwarded?: boolean,
   value: any,
-|};
+};
 
-type OverrideHookState = {|
+type OverrideHookState = {
   ...OverrideValue,
   hookID: number,
-|};
+};
 
 type PathType = 'props' | 'hooks' | 'state' | 'context';
 
-type DeletePath = {|
+type DeletePath = {
   ...ElementAndRendererID,
   type: PathType,
   hookID?: ?number,
   path: Array<string | number>,
-|};
+};
 
-type RenamePath = {|
+type RenamePath = {
   ...ElementAndRendererID,
   type: PathType,
   hookID?: ?number,
   oldPath: Array<string | number>,
   newPath: Array<string | number>,
-|};
+};
 
-type OverrideValueAtPath = {|
+type OverrideValueAtPath = {
   ...ElementAndRendererID,
   type: PathType,
   hookID?: ?number,
   path: Array<string | number>,
   value: any,
-|};
+};
 
-type OverrideError = {|
+type OverrideError = {
   ...ElementAndRendererID,
   forceError: boolean,
-|};
+};
 
-type OverrideSuspense = {|
+type OverrideSuspense = {
   ...ElementAndRendererID,
   forceFallback: boolean,
-|};
+};
 
-type CopyElementPathParams = {|
+type CopyElementPathParams = {
   ...ElementAndRendererID,
   path: Array<string | number>,
-|};
+};
 
-type ViewAttributeSourceParams = {|
+type ViewAttributeSourceParams = {
   ...ElementAndRendererID,
   path: Array<string | number>,
-|};
+};
 
-type InspectElementParams = {|
+type InspectElementParams = {
   ...ElementAndRendererID,
   forceFullData: boolean,
   path: Array<number | string> | null,
   requestID: number,
-|};
+};
 
-type StoreAsGlobalParams = {|
+type StoreAsGlobalParams = {
   ...ElementAndRendererID,
   count: number,
   path: Array<string | number>,
-|};
+};
 
-type NativeStyleEditor_RenameAttributeParams = {|
+type NativeStyleEditor_RenameAttributeParams = {
   ...ElementAndRendererID,
   oldName: string,
   newName: string,
   value: string,
-|};
+};
 
-type NativeStyleEditor_SetValueParams = {|
+type NativeStyleEditor_SetValueParams = {
   ...ElementAndRendererID,
   name: string,
   value: string,
-|};
+};
 
-type UpdateConsolePatchSettingsParams = {|
+type UpdateConsolePatchSettingsParams = {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
   browserTheme: BrowserTheme,
-|};
+};
 
-type SavedPreferencesParams = {|
+type SavedPreferencesParams = {
   appendComponentStack: boolean,
   breakOnConsoleErrors: boolean,
   componentFilters: Array<ComponentFilter>,
   showInlineWarningsAndErrors: boolean,
   hideConsoleLogsInStrictMode: boolean,
-|};
+};
 
-export type BackendEvents = {|
+export type BackendEvents = {
   backendVersion: [string],
   bridgeProtocol: [BridgeProtocol],
   extensionBackendInitialized: [],
@@ -211,13 +211,13 @@ export type BackendEvents = {|
 
   // React Native style editor plug-in.
   isNativeStyleEditorSupported: [
-    {|isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>|},
+    {isSupported: boolean, validAttributes: ?$ReadOnlyArray<string>},
   ],
   NativeStyleEditor_styleAndLayout: [StyleAndLayoutPayload],
-|};
+};
 
-type FrontendEvents = {|
-  clearErrorsAndWarnings: [{|rendererID: RendererID|}],
+type FrontendEvents = {
+  clearErrorsAndWarnings: [{rendererID: RendererID}],
   clearErrorsForFiberID: [ElementAndRendererID],
   clearNativeElementHighlight: [],
   clearWarningsForFiberID: [ElementAndRendererID],
@@ -226,7 +226,7 @@ type FrontendEvents = {|
   getBackendVersion: [],
   getBridgeProtocol: [],
   getOwnersList: [ElementAndRendererID],
-  getProfilingData: [{|rendererID: RendererID|}],
+  getProfilingData: [{rendererID: RendererID}],
   getProfilingStatus: [],
   highlightNativeElement: [HighlightElementInDOM],
   inspectElement: [InspectElementParams],
@@ -270,15 +270,15 @@ type FrontendEvents = {|
   overrideHookState: [OverrideHookState],
   overrideProps: [OverrideValue],
   overrideState: [OverrideValue],
-|};
+};
 
 class Bridge<
   OutgoingEvents: Object,
   IncomingEvents: Object,
-> extends EventEmitter<{|
+> extends EventEmitter<{
   ...IncomingEvents,
   ...OutgoingEvents,
-|}> {
+}> {
   _isShutdown: boolean = false;
   _messageQueue: Array<any> = [];
   _timeoutID: TimeoutID | null = null;
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
index 90be1883612a..e29a33bb3261 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -48,10 +48,10 @@ const HIDDEN_STATE = {
   pageY: 0,
 };
 
-type Props = {|
+type Props = {
   children: (data: Object) => React$Node,
   id: string,
-|};
+};
 
 export default function ContextMenu({children, id}: Props) {
   const {hideMenu, registerMenu} = useContext<RegistryContextType>(
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
index f56bad1110b8..df313307b15f 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
@@ -15,11 +15,11 @@ import styles from './ContextMenuItem.css';
 
 import type {RegistryContextType} from './Contexts';
 
-type Props = {|
+type Props = {
   children: React$Node,
   onClick: () => void,
   title: string,
-|};
+};
 
 export default function ContextMenuItem({children, onClick, title}: Props) {
   const {hideMenu} = useContext<RegistryContextType>(RegistryContext);
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
index e2caf6eefcaa..89f823b13284 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
@@ -9,7 +9,7 @@
 
 import {createContext} from 'react';
 
-export type ShowFn = ({|data: Object, pageX: number, pageY: number|}) => void;
+export type ShowFn = ({data: Object, pageX: number, pageY: number}) => void;
 export type HideFn = () => void;
 export type OnChangeFn = boolean => void;
 
@@ -38,13 +38,13 @@ function showMenu({
   onChange,
   pageX,
   pageY,
-}: {|
+}: {
   data: Object,
   id: string,
   onChange?: OnChangeFn,
   pageX: number,
   pageY: number,
-|}) {
+}) {
   const showFn = idToShowFnMap.get(id);
   if (typeof showFn === 'function') {
     // Prevent open menus from being left hanging.
@@ -75,11 +75,11 @@ function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
   };
 }
 
-export type RegistryContextType = {|
+export type RegistryContextType = {
   hideMenu: typeof hideMenu,
   showMenu: typeof showMenu,
   registerMenu: typeof registerMenu,
-|};
+};
 
 export const RegistryContext = createContext<RegistryContextType>({
   hideMenu,
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
index 3493c5561570..1a457f0de2c1 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js
@@ -18,12 +18,12 @@ export default function useContextMenu({
   id,
   onChange,
   ref,
-}: {|
+}: {
   data: Object,
   id: string,
   onChange?: OnChangeFn,
-  ref: {|current: ElementRef<*> | null|},
-|}) {
+  ref: {current: ElementRef<*> | null},
+}) {
   const {showMenu} = useContext<RegistryContextType>(RegistryContext);
 
   useEffect(() => {
diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
index 1aa84d2da53f..b74e958cefa7 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilerStore.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -21,11 +21,11 @@ import type {
   SnapshotNode,
 } from './views/Profiler/types';
 
-export default class ProfilerStore extends EventEmitter<{|
+export default class ProfilerStore extends EventEmitter<{
   isProcessingData: [],
   isProfiling: [],
   profilingData: [],
-|}> {
+}> {
   _bridge: FrontendBridge;
 
   // Suspense cache for lazily calculating derived profiling data.
diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
index 96e236b143d6..6384db8d1c62 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilingCache.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -36,10 +36,10 @@ export default class ProfilingCache {
   getCommitTree = ({
     commitIndex,
     rootID,
-  }: {|
+  }: {
     commitIndex: number,
     rootID: number,
-  |}) =>
+  }) =>
     getCommitTree({
       commitIndex,
       profilerStore: this._profilerStore,
@@ -49,10 +49,10 @@ export default class ProfilingCache {
   getFiberCommits = ({
     fiberID,
     rootID,
-  }: {|
+  }: {
     fiberID: number,
     rootID: number,
-  |}): Array<number> => {
+  }): Array<number> => {
     const cachedFiberCommits = this._fiberCommits.get(fiberID);
     if (cachedFiberCommits != null) {
       return cachedFiberCommits;
@@ -75,11 +75,11 @@ export default class ProfilingCache {
     commitIndex,
     commitTree,
     rootID,
-  }: {|
+  }: {
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  |}): FlamegraphChartData =>
+  }): FlamegraphChartData =>
     getFlamegraphChartData({
       commitIndex,
       commitTree,
@@ -91,11 +91,11 @@ export default class ProfilingCache {
     commitIndex,
     commitTree,
     rootID,
-  }: {|
+  }: {
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  |}): RankedChartData =>
+  }): RankedChartData =>
     getRankedChartData({
       commitIndex,
       commitTree,
diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js
index c98b0566d881..acbbfff00b99 100644
--- a/packages/react-devtools-shared/src/devtools/cache.js
+++ b/packages/react-devtools-shared/src/devtools/cache.js
@@ -28,20 +28,20 @@ export type {Thenable};
 
 type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
 
-type PendingResult = {|
+type PendingResult = {
   status: 0,
   value: Suspender,
-|};
+};
 
-type ResolvedResult<Value> = {|
+type ResolvedResult<Value> = {
   status: 1,
   value: Value,
-|};
+};
 
-type RejectedResult = {|
+type RejectedResult = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Result<Value> = PendingResult | ResolvedResult<Value> | RejectedResult;
 
diff --git a/packages/react-devtools-shared/src/devtools/index.js b/packages/react-devtools-shared/src/devtools/index.js
index a15999478f1d..12d8327bfef4 100644
--- a/packages/react-devtools-shared/src/devtools/index.js
+++ b/packages/react-devtools-shared/src/devtools/index.js
@@ -9,10 +9,10 @@
 
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Shell = {|
+type Shell = {
   connect: (callback: Function) => void,
   onReload: (reloadFn: Function) => void,
-|};
+};
 
 export function initDevTools(shell: Shell) {
   shell.connect((bridge: FrontendBridge) => {
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 56f1131205c1..4c9131c89678 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -62,9 +62,9 @@ const LOCAL_STORAGE_COLLAPSE_ROOTS_BY_DEFAULT_KEY =
 const LOCAL_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY =
   'React::DevTools::recordChangeDescriptions';
 
-type ErrorAndWarningTuples = Array<{|id: number, index: number|}>;
+type ErrorAndWarningTuples = Array<{id: number, index: number}>;
 
-type Config = {|
+type Config = {
   checkBridgeProtocolCompatibility?: boolean,
   isProfiling?: boolean,
   supportsNativeInspection?: boolean,
@@ -72,20 +72,20 @@ type Config = {|
   supportsReloadAndProfile?: boolean,
   supportsTimeline?: boolean,
   supportsTraceUpdates?: boolean,
-|};
+};
 
-export type Capabilities = {|
+export type Capabilities = {
   supportsBasicProfiling: boolean,
   hasOwnerMetadata: boolean,
   supportsStrictMode: boolean,
   supportsTimeline: boolean,
-|};
+};
 
 /**
  * The store is the single source of truth for updates from the backend.
  * ContextProviders can subscribe to the Store for specific things they want to provide.
  */
-export default class Store extends EventEmitter<{|
+export default class Store extends EventEmitter<{
   backendVersion: [],
   collapseNodesByDefault: [],
   componentFilters: [],
@@ -99,7 +99,7 @@ export default class Store extends EventEmitter<{|
   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;
@@ -119,7 +119,7 @@ export default class Store extends EventEmitter<{|
   // Map of ID to number of recorded error and warning message IDs.
   _errorsAndWarnings: Map<
     number,
-    {|errorCount: number, warningCount: number|},
+    {errorCount: number, warningCount: number},
   > = new Map();
 
   // At least one of the injected renderers contains (DEV only) owner metadata.
@@ -553,7 +553,7 @@ export default class Store extends EventEmitter<{|
   }
 
   // Returns a tuple of [id, index]
-  getElementsWithErrorsAndWarnings(): Array<{|id: number, index: number|}> {
+  getElementsWithErrorsAndWarnings(): Array<{id: number, index: number}> {
     if (this._cachedErrorAndWarningTuples !== null) {
       return this._cachedErrorAndWarningTuples;
     } else {
@@ -586,7 +586,7 @@ export default class Store extends EventEmitter<{|
 
   getErrorAndWarningCountForElementID(
     id: number,
-  ): {|errorCount: number, warningCount: number|} {
+  ): {errorCount: number, warningCount: number} {
     return this._errorsAndWarnings.get(id) || {errorCount: 0, warningCount: 0};
   }
 
@@ -871,10 +871,10 @@ export default class Store extends EventEmitter<{|
   onBridgeNativeStyleEditorSupported = ({
     isSupported,
     validAttributes,
-  }: {|
+  }: {
     isSupported: boolean,
     validAttributes: ?$ReadOnlyArray<string>,
-  |}) => {
+  }) => {
     this._isNativeStyleEditorSupported = isSupported;
     this._nativeStyleEditorValidAttributes = validAttributes || null;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index b384018671d9..2d0e3aafb146 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -41,10 +41,10 @@ export type IconType =
   | 'view-dom'
   | 'view-source';
 
-type Props = {|
+type Props = {
   className?: string,
   type: IconType,
-|};
+};
 
 export default function ButtonIcon({className = '', type}: Props) {
   let pathData = null;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
index 25352ee39a53..5b342f549030 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -13,12 +13,12 @@ import styles from './Badge.css';
 
 import type {ElementType} from 'react-devtools-shared/src/types';
 
-type Props = {|
+type Props = {
   className?: string,
   hocDisplayNames: Array<string> | null,
   type: ElementType,
   children: React$Node,
-|};
+};
 
 export default function Badge({
   className,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
index a43c4661b3f5..292d69e36afd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -13,7 +13,7 @@ import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
 
 import SearchInput from '../SearchInput';
 
-type Props = {||};
+type Props = {};
 
 export default function ComponentSearchInput(props: Props) {
   const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 712afdd98728..81ab6296ddf6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -41,18 +41,18 @@ type ResizeActionType =
   | 'ACTION_SET_HORIZONTAL_PERCENTAGE'
   | 'ACTION_SET_VERTICAL_PERCENTAGE';
 
-type ResizeAction = {|
+type ResizeAction = {
   type: ResizeActionType,
   payload: any,
-|};
+};
 
-type ResizeState = {|
+type ResizeState = {
   horizontalPercentage: number,
   isResizing: boolean,
   verticalPercentage: number,
-|};
+};
 
-function Components(_: {||}) {
+function Components(_: {}) {
   const wrapperElementRef = useRef<null | HTMLElement>(null);
   const resizeElementRef = useRef<null | HTMLElement>(null);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
index a8859cd4adc2..766411fa8ec5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
@@ -18,7 +18,7 @@ type OverrideNameFn = (
   newName: Array<string | number>,
 ) => void;
 
-type EditableNameProps = {|
+type EditableNameProps = {
   allowEmpty?: boolean,
   allowWhiteSpace?: boolean,
   autoFocus?: boolean,
@@ -27,7 +27,7 @@ type EditableNameProps = {|
   overrideName: OverrideNameFn,
   path: Array<string | number>,
   type: Type,
-|};
+};
 
 export default function EditableName({
   allowEmpty = false,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
index 82afe03c2ba4..6f33b2f0f612 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -14,12 +14,12 @@ import {useEditableValue} from '../hooks';
 
 type OverrideValueFn = (path: Array<string | number>, value: any) => void;
 
-type EditableValueProps = {|
+type EditableValueProps = {
   className?: string,
   overrideValue: OverrideValueFn,
   path: Array<string | number>,
   value: any,
-|};
+};
 
 export default function EditableValue({
   className = '',
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 1dab6f3f7db7..6f21512fadd4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -64,10 +64,10 @@ export default function Element({data, index, style}: Props) {
     }),
     [store, element],
   );
-  const {errorCount, warningCount} = useSubscription<{|
+  const {errorCount, warningCount} = useSubscription<{
     errorCount: number,
     warningCount: number,
-  |}>(errorsAndWarningsSubscription);
+  }>(errorsAndWarningsSubscription);
 
   const handleDoubleClick = () => {
     if (id !== null) {
@@ -225,10 +225,10 @@ const swallowDoubleClick = event => {
   event.stopPropagation();
 };
 
-type ExpandCollapseToggleProps = {|
+type ExpandCollapseToggleProps = {
   element: ElementType,
   store: Store,
-|};
+};
 
 function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
   const {children, id, isCollapsed} = element;
@@ -260,10 +260,10 @@ function ExpandCollapseToggle({element, store}: ExpandCollapseToggleProps) {
   );
 }
 
-type DisplayNameProps = {|
+type DisplayNameProps = {
   displayName: string | null,
   id: number,
-|};
+};
 
 function DisplayName({displayName, id}: DisplayNameProps) {
   const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
index 1851c75e0391..2cc19850d916 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -13,11 +13,11 @@ import ButtonIcon from '../ButtonIcon';
 
 import styles from './ExpandCollapseToggle.css';
 
-type ExpandCollapseToggleProps = {|
+type ExpandCollapseToggleProps = {
   disabled: boolean,
   isOpen: boolean,
   setIsOpen: Function,
-|};
+};
 
 export default function ExpandCollapseToggle({
   disabled,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
index 10398305c914..ac11356942ea 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
@@ -12,9 +12,9 @@ import styles from './HocBadges.css';
 
 import type {Element} from './types';
 
-type Props = {|
+type Props = {
   element: Element,
-|};
+};
 
 export default function HocBadges({element}: Props) {
   const {hocDisplayNames} = ((element: any): Element);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 9752f752f8dd..9f19dec3b3bd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -28,7 +28,7 @@ import styles from './InspectedElement.css';
 
 import type {InspectedElement} from './types';
 
-export type Props = {||};
+export type Props = {};
 
 // TODO Make edits and deletes also use transition API!
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index c02dc5bf9263..02444890df26 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -47,13 +47,13 @@ type Path = Array<string | number>;
 type InspectPathFunction = (path: Path) => void;
 export type ToggleParseHookNames = () => void;
 
-type Context = {|
+type Context = {
   hookNames: HookNames | null,
   inspectedElement: InspectedElement | null,
   inspectPaths: InspectPathFunction,
   parseHookNames: boolean,
   toggleParseHookNames: ToggleParseHookNames,
-|};
+};
 
 export const InspectedElementContext = createContext<Context>(
   ((null: any): Context),
@@ -61,9 +61,9 @@ export const InspectedElementContext = createContext<Context>(
 
 const POLL_INTERVAL = 1000;
 
-export type Props = {|
+export type Props = {
   children: ReactNodeList,
-|};
+};
 
 export function InspectedElementContextController({children}: Props) {
   const {selectedElementID} = useContext(TreeStateContext);
@@ -84,10 +84,10 @@ export function InspectedElementContextController({children}: Props) {
   // 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<{|
+  const [state, setState] = useState<{
     element: Element | null,
     path: Array<number | string> | null,
-  |}>({
+  }>({
     element: null,
     path: null,
   });
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
index 8dfe6310a360..8091055e390c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
@@ -24,12 +24,12 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementContextTree({
   bridge,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index 76b7d96bf72f..1b4208d44bca 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -18,9 +18,9 @@ import {TreeStateContext} from './TreeContext';
 import {clearCacheBecauseOfError} from '../../../inspectedElementCache';
 import styles from './InspectedElementErrorBoundary.css';
 
-type WrapperProps = {|
+type WrapperProps = {
   children: React$Node,
-|};
+};
 
 export default function InspectedElementErrorBoundaryWrapper({
   children,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index d45126c359f6..0c338a3231a6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -27,11 +27,11 @@ import {
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementErrorsAndWarningsTree({
   bridge,
@@ -115,7 +115,7 @@ export default function InspectedElementErrorsAndWarningsTree({
   );
 }
 
-type TreeProps = {|
+type TreeProps = {
   badgeClassName: string,
   actions: React$Node,
   className: string,
@@ -124,7 +124,7 @@ type TreeProps = {|
   isTransitionPending: boolean,
   label: string,
   messageClassName: string,
-|};
+};
 
 function Tree({
   badgeClassName,
@@ -163,12 +163,12 @@ function Tree({
   );
 }
 
-type ErrorOrWarningViewProps = {|
+type ErrorOrWarningViewProps = {
   badgeClassName: string,
   className: string,
   count: number,
   message: string,
-|};
+};
 
 function ErrorOrWarningView({
   className,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index f00d9dd0eb50..ab9fbe633f8e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -36,7 +36,7 @@ import type {HookNames} from 'react-devtools-shared/src/types';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 import type {ToggleParseHookNames} from './InspectedElementContext';
 
-type HooksTreeViewProps = {|
+type HooksTreeViewProps = {
   bridge: FrontendBridge,
   element: Element,
   hookNames: HookNames | null,
@@ -44,7 +44,7 @@ type HooksTreeViewProps = {|
   parseHookNames: boolean,
   store: Store,
   toggleParseHookNames: ToggleParseHookNames,
-|};
+};
 
 export function InspectedElementHooksTree({
   bridge,
@@ -121,14 +121,14 @@ export function InspectedElementHooksTree({
   }
 }
 
-type InnerHooksTreeViewProps = {|
+type InnerHooksTreeViewProps = {
   element: Element,
   hookNames: HookNames | null,
   hooks: HooksTree,
   id: number,
   inspectedElement: InspectedElement,
   path: Array<string | number>,
-|};
+};
 
 export function InnerHooksTreeView({
   element,
@@ -152,14 +152,14 @@ export function InnerHooksTreeView({
   ));
 }
 
-type HookViewProps = {|
+type HookViewProps = {
   element: Element,
   hook: HooksNode,
   hookNames: HookNames | null,
   id: number,
   inspectedElement: InspectedElement,
   path: Array<string | number>,
-|};
+};
 
 function HookView({
   element,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index eeff44d645ea..6cebd996e48f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -23,12 +23,12 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementPropsTree({
   bridge,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
index a8658fa3df80..084fc3df70a1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -20,12 +20,12 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementStateTree({
   bridge,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
index 8045803fd011..8cf20dbe86c9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
@@ -18,12 +18,12 @@ import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 import type {Element} from 'react-devtools-shared/src/devtools/views/Components/types';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   element: Element,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementStyleXPlugin({
   bridge,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
index 0b0ce0ecac8a..fdf91dca262e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
@@ -17,11 +17,11 @@ import styles from './InspectedElementSharedStyles.css';
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   inspectedElement: InspectedElement,
   store: Store,
-|};
+};
 
 export default function InspectedElementSuspenseToggle({
   bridge,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index 88b9ee63ec9f..b1ffb6e9cb2c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -45,13 +45,13 @@ import type {ToggleParseHookNames} from './InspectedElementContext';
 export type CopyPath = (path: Array<string | number>) => void;
 export type InspectPath = (path: Array<string | number>) => void;
 
-type Props = {|
+type Props = {
   element: Element,
   hookNames: HookNames | null,
   inspectedElement: InspectedElement,
   parseHookNames: boolean,
   toggleParseHookNames: ToggleParseHookNames,
-|};
+};
 
 export default function InspectedElementView({
   element,
@@ -259,10 +259,10 @@ function formatSourceForDisplay(fileName: string, lineNumber: string) {
   return `${nameOnly}:${lineNumber}`;
 }
 
-type SourceProps = {|
+type SourceProps = {
   fileName: string,
   lineNumber: string,
-|};
+};
 
 function Source({fileName, lineNumber}: SourceProps) {
   const handleCopy = () => copy(`${fileName}:${lineNumber}`);
@@ -281,13 +281,13 @@ function Source({fileName, lineNumber}: SourceProps) {
   );
 }
 
-type OwnerViewProps = {|
+type OwnerViewProps = {
   displayName: string,
   hocDisplayNames: Array<string> | null,
   id: number,
   isInStore: boolean,
   type: ElementType,
-|};
+};
 
 function OwnerView({
   displayName,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index 5e805baf1f7a..e1aab1a481ca 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -35,7 +35,7 @@ import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
 type Type = 'props' | 'state' | 'context' | 'hooks';
 
-type KeyValueProps = {|
+type KeyValueProps = {
   alphaSort: boolean,
   bridge: FrontendBridge,
   canDeletePaths: boolean,
@@ -54,7 +54,7 @@ type KeyValueProps = {|
   pathRoot: Type,
   store: Store,
   value: any,
-|};
+};
 
 export default function KeyValue({
   alphaSort,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
index eb3268cefcbb..212b4640955b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
@@ -10,9 +10,9 @@
 import * as React from 'react';
 import styles from './LoadingAnimation.css';
 
-type Props = {|
+type Props = {
   className?: string,
-|};
+};
 
 export default function LoadingAnimation({className = ''}: Props) {
   return (
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
index da5530d4a39b..a7f85e5429b0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
@@ -12,10 +12,10 @@ import styles from './LayoutViewer.css';
 
 import type {Layout} from './types';
 
-type Props = {|
+type Props = {
   id: number,
   layout: Layout,
-|};
+};
 
 export default function LayoutViewer({id, layout}: Props) {
   const {height, margin, padding, y, width, x} = layout;
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
index ae28dbde8454..6da945ff9397 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -24,10 +24,10 @@ import {sanitizeForParse} from '../../../utils';
 
 import type {Style} from './types';
 
-type Props = {|
+type Props = {
   id: number,
   style: Style,
-|};
+};
 
 type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
 type ChangeValueFn = (name: string, value: any) => void;
@@ -96,11 +96,11 @@ export default function StyleEditor({id, style}: Props) {
   );
 }
 
-type NewRowProps = {|
+type NewRowProps = {
   changeAttribute: ChangeAttributeFn,
   changeValue: ChangeValueFn,
   validAttributes: $ReadOnlyArray<string> | null,
-|};
+};
 
 function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) {
   const [key, setKey] = useState<number>(0);
@@ -141,7 +141,7 @@ function NewRow({changeAttribute, changeValue, validAttributes}: NewRowProps) {
   );
 }
 
-type RowProps = {|
+type RowProps = {
   attribute: string,
   attributePlaceholder?: string,
   changeAttribute: ChangeAttributeFn,
@@ -149,7 +149,7 @@ type RowProps = {|
   validAttributes: $ReadOnlyArray<string> | null,
   value: any,
   valuePlaceholder?: string,
-|};
+};
 
 function Row({
   attribute,
@@ -245,14 +245,14 @@ function Row({
   );
 }
 
-type FieldProps = {|
+type FieldProps = {
   className: string,
   onChange: (value: any) => void,
   onReset: () => void,
   onSubmit: () => void,
   placeholder?: string,
   value: any,
-|};
+};
 
 function Field({
   className,
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
index 1157dd4dad98..ae91fbb94e7d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -37,18 +37,18 @@ import type {
 
 export type GetStyleAndLayout = (id: number) => StyleAndLayoutFrontend | null;
 
-type Context = {|
+type Context = {
   getStyleAndLayout: GetStyleAndLayout,
-|};
+};
 
 const NativeStyleContext = createContext<Context>(((null: any): Context));
 NativeStyleContext.displayName = 'NativeStyleContext';
 
 type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;
-type InProgressRequest = {|
+type InProgressRequest = {
   promise: Thenable<StyleAndLayoutFrontend>,
   resolveFn: ResolveFn,
-|};
+};
 
 const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
 const resource: Resource<
@@ -75,9 +75,9 @@ const resource: Resource<
   {useWeakMap: true},
 );
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function NativeStyleContextController({children}: Props) {
   const bridge = useContext<FrontendBridge>(BridgeContext);
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
index 521a0642cac9..71a4abac99d0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
@@ -16,7 +16,7 @@ import LayoutViewer from './LayoutViewer';
 import StyleEditor from './StyleEditor';
 import {TreeStateContext} from '../TreeContext';
 
-type Props = {||};
+type Props = {};
 
 export default function NativeStyleEditorWrapper(_: Props) {
   const store = useContext(StoreContext);
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
index 8a24e808a1e4..58b922a940e9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/types.js
@@ -14,7 +14,7 @@ import type {
 
 export type Layout = LayoutBackend;
 export type Style = StyleBackend;
-export type StyleAndLayout = {|
+export type StyleAndLayout = {
   layout: LayoutBackend | null,
   style: StyleBackend | null,
-|};
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
index cf931e5fea45..d341d5e0a868 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
@@ -18,7 +18,7 @@ import styles from './NewArrayValue.css';
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   depth: number,
   hidden: boolean,
@@ -28,7 +28,7 @@ type Props = {|
   path: Array<string | number>,
   store: Store,
   type: 'props' | 'context' | 'hooks' | 'state',
-|};
+};
 
 export default function NewArrayValue({
   bridge,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
index a5591f0876cb..f986ad2e3de6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
@@ -18,7 +18,7 @@ import styles from './NewKeyValue.css';
 import type {InspectedElement} from './types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
-type Props = {|
+type Props = {
   bridge: FrontendBridge,
   depth: number,
   hidden: boolean,
@@ -27,7 +27,7 @@ type Props = {|
   path: Array<string | number>,
   store: Store,
   type: 'props' | 'state' | 'hooks' | 'context',
-|};
+};
 
 export default function NewKeyValue({
   bridge,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
index 83e9b37708b0..cbd0497f544e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
@@ -27,10 +27,10 @@ const OwnersListContext = createContext<Context>(((null: any): Context));
 OwnersListContext.displayName = 'OwnersListContext';
 
 type ResolveFn = (ownersList: Array<SerializedElement> | null) => void;
-type InProgressRequest = {|
+type InProgressRequest = {
   promise: Thenable<Array<SerializedElement>>,
   resolveFn: ResolveFn,
-|};
+};
 
 const inProgressRequests: WeakMap<Element, InProgressRequest> = new WeakMap();
 const resource: Resource<
@@ -57,9 +57,9 @@ const resource: Resource<
   {useWeakMap: true},
 );
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function OwnersListContextController({children}: Props) {
   const bridge = useContext(BridgeContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index cc9c43fd775f..379807a595a9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -38,23 +38,23 @@ import styles from './OwnersStack.css';
 
 type SelectOwner = (owner: SerializedElement | null) => void;
 
-type ACTION_UPDATE_OWNER_ID = {|
+type ACTION_UPDATE_OWNER_ID = {
   type: 'UPDATE_OWNER_ID',
   ownerID: number | null,
   owners: Array<SerializedElement>,
-|};
-type ACTION_UPDATE_SELECTED_INDEX = {|
+};
+type ACTION_UPDATE_SELECTED_INDEX = {
   type: 'UPDATE_SELECTED_INDEX',
   selectedIndex: number,
-|};
+};
 
 type Action = ACTION_UPDATE_OWNER_ID | ACTION_UPDATE_SELECTED_INDEX;
 
-type State = {|
+type State = {
   ownerID: number | null,
   owners: Array<SerializedElement>,
   selectedIndex: number,
-|};
+};
 
 function dialogReducer(state, action) {
   switch (action.type) {
@@ -282,11 +282,11 @@ function ElementView({isSelected, owner, selectOwner}: ElementViewProps) {
   );
 }
 
-type BackToOwnerButtonProps = {|
+type BackToOwnerButtonProps = {
   owners: Array<SerializedElement>,
   selectedIndex: number,
   selectOwner: SelectOwner,
-|};
+};
 function BackToOwnerButton({
   owners,
   selectedIndex,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
index 1d86d59a3762..8721a618fd94 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -17,12 +17,12 @@ import {useSubscription} from '../hooks';
 
 import styles from './SelectedTreeHighlight.css';
 
-type Data = {|
+type Data = {
   startIndex: number,
   stopIndex: number,
-|};
+};
 
-export default function SelectedTreeHighlight(_: {||}) {
+export default function SelectedTreeHighlight(_: {}) {
   const {lineHeight} = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 2ac3333d59ae..76e816f24201 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -41,15 +41,15 @@ import {logEvent} from 'react-devtools-shared/src/Logger';
 // Never indent more than this number of pixels (even if we have the room).
 const DEFAULT_INDENTATION_SIZE = 12;
 
-export type ItemData = {|
+export type ItemData = {
   numElements: number,
   isNavigatingWithKeyboard: boolean,
   lastScrolledIDRef: {current: number | null, ...},
   onElementMouseEnter: (id: number) => void,
   treeFocused: boolean,
-|};
+};
 
-type Props = {||};
+type Props = {};
 
 export default function Tree(props: Props) {
   const dispatch = useContext(TreeDispatcherContext);
@@ -473,8 +473,8 @@ export default function Tree(props: Props) {
 function updateIndentationSizeVar(
   innerDiv: HTMLDivElement,
   cachedChildWidths: WeakMap<HTMLElement, number>,
-  indentationSizeRef: {|current: number|},
-  prevListWidthRef: {|current: number|},
+  indentationSizeRef: {current: number},
+  prevListWidthRef: {current: number},
 ): void {
   const list = ((innerDiv.parentElement: any): HTMLDivElement);
   const listWidth = list.clientWidth;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index 0252ac350fd9..1103cc0f6c83 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -42,7 +42,7 @@ import Store from '../../store';
 
 import type {Element} from './types';
 
-export type StateContext = {|
+export type StateContext = {
   // Tree
   numElements: number,
   ownerSubtreeLeafElementID: number | null,
@@ -60,70 +60,70 @@ export type StateContext = {|
 
   // Inspection element panel
   inspectedElementID: number | null,
-|};
+};
 
-type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {
   type: 'GO_TO_NEXT_SEARCH_RESULT',
-|};
-type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {
   type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
-|};
-type ACTION_HANDLE_STORE_MUTATION = {|
+};
+type ACTION_HANDLE_STORE_MUTATION = {
   type: 'HANDLE_STORE_MUTATION',
   payload: [Array<number>, Map<number, number>],
-|};
-type ACTION_RESET_OWNER_STACK = {|
+};
+type ACTION_RESET_OWNER_STACK = {
   type: 'RESET_OWNER_STACK',
-|};
-type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_CHILD_ELEMENT_IN_TREE = {
   type: 'SELECT_CHILD_ELEMENT_IN_TREE',
-|};
-type ACTION_SELECT_ELEMENT_AT_INDEX = {|
+};
+type ACTION_SELECT_ELEMENT_AT_INDEX = {
   type: 'SELECT_ELEMENT_AT_INDEX',
   payload: number | null,
-|};
-type ACTION_SELECT_ELEMENT_BY_ID = {|
+};
+type ACTION_SELECT_ELEMENT_BY_ID = {
   type: 'SELECT_ELEMENT_BY_ID',
   payload: number | null,
-|};
-type ACTION_SELECT_NEXT_ELEMENT_IN_TREE = {|
+};
+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 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 ACTION_SELECT_NEXT_SIBLING_IN_TREE = {
   type: 'SELECT_NEXT_SIBLING_IN_TREE',
-|};
-type ACTION_SELECT_OWNER = {|
+};
+type ACTION_SELECT_OWNER = {
   type: 'SELECT_OWNER',
   payload: number,
-|};
-type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {|
+};
+type ACTION_SELECT_PARENT_ELEMENT_IN_TREE = {
   type: 'SELECT_PARENT_ELEMENT_IN_TREE',
-|};
-type ACTION_SELECT_PREVIOUS_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 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 ACTION_SELECT_PREVIOUS_SIBLING_IN_TREE = {
   type: 'SELECT_PREVIOUS_SIBLING_IN_TREE',
-|};
-type ACTION_SELECT_OWNER_LIST_NEXT_ELEMENT_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 ACTION_SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE = {
   type: 'SELECT_OWNER_LIST_PREVIOUS_ELEMENT_IN_TREE',
-|};
-type ACTION_SET_SEARCH_TEXT = {|
+};
+type ACTION_SET_SEARCH_TEXT = {
   type: 'SET_SEARCH_TEXT',
   payload: string,
-|};
-type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {|
+};
+type ACTION_UPDATE_INSPECTED_ELEMENT_ID = {
   type: 'UPDATE_INSPECTED_ELEMENT_ID',
-|};
+};
 
 type Action =
   | ACTION_GO_TO_NEXT_SEARCH_RESULT
@@ -158,7 +158,7 @@ const TreeDispatcherContext = createContext<DispatcherContext>(
 );
 TreeDispatcherContext.displayName = 'TreeDispatcherContext';
 
-type State = {|
+type State = {
   // Tree
   numElements: number,
   ownerSubtreeLeafElementID: number | null,
@@ -176,7 +176,7 @@ type State = {|
 
   // Inspection element panel
   inspectedElementID: number | null,
-|};
+};
 
 function reduceTreeState(store: Store, state: State, action: Action): State {
   let {
@@ -817,7 +817,7 @@ function reduceSuspenseState(
   return state;
 }
 
-type Props = {|
+type Props = {
   children: React$Node,
 
   // Used for automated testing
@@ -825,7 +825,7 @@ type Props = {|
   defaultOwnerID?: ?number,
   defaultSelectedElementID?: ?number,
   defaultSelectedElementIndex?: ?number,
-|};
+};
 
 // TODO Remove TreeContextController wrapper element once global Context.write API exists.
 function TreeContextController({
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
index 3dc061c35456..10d20f4a2afd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
@@ -14,10 +14,10 @@ import type {
   ViewElementSource,
 } from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export type Context = {|
+export type Context = {
   canViewElementSourceFunction: CanViewElementSource | null,
   viewElementSourceFunction: ViewElementSource | null,
-|};
+};
 
 const ViewElementSourceContext = createContext<Context>(((null: any): Context));
 ViewElementSourceContext.displayName = 'ViewElementSourceContext';
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
index 39d6ccc47087..8ea733440ea6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
@@ -11,9 +11,9 @@ import {createContext} from 'react';
 
 import type {ViewUrlSource} from 'react-devtools-shared/src/devtools/views/DevTools';
 
-export type Context = {|
+export type Context = {
   viewUrlSourceFunction: ViewUrlSource | null,
-|};
+};
 
 const ViewSourceContext = createContext<Context>(((null: any): Context));
 ViewSourceContext.displayName = 'ViewSourceContext';
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index c6789fa1e9ec..2d1c7e22ea10 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -18,7 +18,7 @@ import type {ElementType, Plugins} from 'react-devtools-shared/src/types';
 // 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 = {|
+export type Element = {
   id: number,
   parentID: number,
   children: Array<number>,
@@ -46,20 +46,20 @@ export type Element = {|
   // This element is not in a StrictMode compliant subtree.
   // Only true for React versions supporting StrictMode.
   isStrictModeNonCompliant: boolean,
-|};
+};
 
-export type SerializedElement = {|
+export type SerializedElement = {
   displayName: string | null,
   id: number,
   key: number | string | null,
   hocDisplayNames: Array<string> | null,
   type: ElementType,
-|};
+};
 
-export type OwnersList = {|
+export type OwnersList = {
   id: number,
   owners: Array<SerializedElement> | null,
-|};
+};
 
 export type InspectedElementResponseType =
   | 'error'
@@ -68,7 +68,7 @@ export type InspectedElementResponseType =
   | 'no-change'
   | 'not-found';
 
-export type InspectedElement = {|
+export type InspectedElement = {
   id: number,
 
   // Does the current renderer support editable hooks and function props?
@@ -121,11 +121,11 @@ export type InspectedElement = {|
 
   // UI plugins/visualizations for the inspected element.
   plugins: Plugins,
-|};
+};
 
 // TODO: Add profiling type
 
-export type DehydratedData = {|
+export type DehydratedData = {
   cleaned: Array<Array<string | number>>,
   data:
     | string
@@ -135,4 +135,4 @@ export type DehydratedData = {|
     | Array<Unserializable>
     | {[key: string]: string | Dehydrated | Unserializable, ...},
   unserializable: Array<Array<string | number>>,
-|};
+};
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index a78261e9fc30..c29febb62884 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -67,7 +67,7 @@ export type CanViewElementSource = (
   inspectedElement: InspectedElement,
 ) => boolean;
 
-export type Props = {|
+export type Props = {
   bridge: FrontendBridge,
   browserTheme?: BrowserTheme,
   canViewElementSourceFunction?: ?CanViewElementSource,
@@ -105,7 +105,7 @@ export type Props = {|
   fetchFileWithCaching?: ?FetchFileWithCaching,
   // TODO (Webpack 5) Hopefully we can remove this prop after the Webpack 5 migration.
   hookNamesModuleLoaderFunction?: ?HookNamesModuleLoaderFunction,
-|};
+};
 
 const componentsTab = {
   id: ('components': TabID),
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
index c4511ba0312b..c0d2f45a3b72 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
@@ -10,13 +10,13 @@
 import * as React from 'react';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   info: React$Node | null,
   componentStack: string | null,
   errorMessage: string,
-|};
+};
 
 export default function CaughtErrorView({
   callStack,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index d207fcfe4f73..84077b3fa6b8 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -22,14 +22,14 @@ 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 = {|
+type Props = {
   children: React$Node,
   canDismiss?: boolean,
   onBeforeDismissCallback?: () => void,
   store?: Store,
-|};
+};
 
-type State = {|
+type State = {
   callStack: string | null,
   canDismiss: boolean,
   componentStack: string | null,
@@ -39,7 +39,7 @@ type State = {|
   isTimeout: boolean,
   isUserError: boolean,
   isUnknownHookError: boolean,
-|};
+};
 
 const InitialState: State = {
   callStack: null,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
index 7443707496aa..f15276d50160 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -12,13 +12,13 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   componentStack: string | null,
   dismissError: Function | null,
   errorMessage: string | null,
-|};
+};
 
 export default function ErrorView({
   callStack,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index 26417c35c44b..4cf631928a98 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -21,11 +21,11 @@ const LABELS = [
 // This must match the filename in ".github/ISSUE_TEMPLATE/"
 const TEMPLATE = 'devtools_bug_report.yml';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   componentStack: string | null,
   errorMessage: string | null,
-|};
+};
 
 export default function ReportNewIssue({
   callStack,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
index f44e166b3a57..820b2076714d 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
@@ -13,11 +13,11 @@ import UpdateExistingIssue from './UpdateExistingIssue';
 import ReportNewIssue from './ReportNewIssue';
 import WorkplaceGroup from './WorkplaceGroup';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   componentStack: string | null,
   errorMessage: string | null,
-|};
+};
 
 export default function SuspendingErrorView({
   callStack,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
index 45c64312be13..36cfa3a79267 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
@@ -12,13 +12,13 @@ import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   componentStack: string | null,
   dismissError: Function,
   errorMessage: string | null,
-|};
+};
 
 export default function TimeoutView({
   callStack,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
index 5a04718bec6d..db7675d5bc5c 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
@@ -10,12 +10,12 @@
 import * as React from 'react';
 import styles from './shared.css';
 
-type Props = {|
+type Props = {
   callStack: string | null,
   children: React$Node,
   componentStack: string | null,
   errorMessage: string | null,
-|};
+};
 
 export default function UnsupportedBridgeOperationView({
   callStack,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
index ad1139d935a2..8a17808a6ce0 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
@@ -15,9 +15,9 @@ import styles from './shared.css';
 
 export default function UpdateExistingIssue({
   gitHubIssue,
-}: {|
+}: {
   gitHubIssue: GitHubIssue,
-|}) {
+}) {
   const {title, url} = gitHubIssue;
   return (
     <div className={styles.GitHubLinkRow}>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
index 047c0788c349..025ada950cec 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js
@@ -19,20 +19,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
index 714919effa81..bd9cd96b6017 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/githubAPI.js
@@ -7,10 +7,10 @@
  * @flow
  */
 
-export type GitHubIssue = {|
+export type GitHubIssue = {
   title: string,
   url: string,
-|};
+};
 
 const GITHUB_ISSUES_API = 'https://api.github.com/search/issues';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index bcf59773d06a..fb39a9fe0bb3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -28,11 +28,11 @@ export type IconType =
   | 'strict-mode-non-compliant'
   | 'warning';
 
-type Props = {|
+type Props = {
   className?: string,
   title?: string,
   type: IconType,
-|};
+};
 
 export default function Icon({className = '', title = '', type}: Props) {
   let pathData = null;
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
index 5c4acc58cfa4..5ba2390e79d4 100644
--- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -23,37 +23,37 @@ import styles from './ModalDialog.css';
 
 type ID = any;
 
-type DIALOG_ACTION_HIDE = {|
+type DIALOG_ACTION_HIDE = {
   type: 'HIDE',
   id: ID,
-|};
-type DIALOG_ACTION_SHOW = {|
+};
+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 = {|
+type Dialog = {
   canBeDismissed: boolean,
   content: React$Node | null,
   id: ID,
   title: React$Node | null,
-|};
+};
 
-type State = {|
+type State = {
   dialogs: Array<Dialog>,
-|};
+};
 
-type ModalDialogContextType = {|
+type ModalDialogContextType = {
   ...State,
   dispatch: Dispatch,
-|};
+};
 
 const ModalDialogContext = createContext<ModalDialogContextType>(
   ((null: any): ModalDialogContextType),
@@ -83,9 +83,9 @@ function dialogReducer(state, action) {
   }
 }
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function ModalDialogContextController({children}: Props) {
   const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
@@ -107,7 +107,7 @@ function ModalDialogContextController({children}: Props) {
   );
 }
 
-function ModalDialog(_: {||}) {
+function ModalDialog(_: {}) {
   const {dialogs, dispatch} = useContext(ModalDialogContext);
 
   if (dialogs.length === 0) {
@@ -136,13 +136,13 @@ function ModalDialogImpl({
   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});
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
index 82c58e86da46..e25efabe1654 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './ChartNode.css';
 
-type Props = {|
+type Props = {
   color: string,
   height: number,
   isDimmed?: boolean,
@@ -25,7 +25,7 @@ type Props = {|
   width: number,
   x: number,
   y: number,
-|};
+};
 
 const minWidthToDisplay = 35;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
index 99289ff392f3..e13606deeb05 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -27,7 +27,7 @@ import type {TooltipFiberData} from './HoveredFiberInfo';
 import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
 import type {CommitTree} from './types';
 
-export type ItemData = {|
+export type ItemData = {
   chartData: ChartData,
   onElementMouseEnter: (fiberData: TooltipFiberData) => void,
   onElementMouseLeave: () => void,
@@ -36,9 +36,9 @@ export type ItemData = {|
   selectedChartNodeIndex: number,
   selectFiber: (id: number | null, name: string | null) => void,
   width: number,
-|};
+};
 
-export default function CommitFlamegraphAutoSizer(_: {||}) {
+export default function CommitFlamegraphAutoSizer(_: {}) {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex, selectFiber} = useContext(
     ProfilerContext,
@@ -90,12 +90,12 @@ export default function CommitFlamegraphAutoSizer(_: {||}) {
   }
 }
 
-type Props = {|
+type Props = {
   chartData: ChartData,
   commitTree: CommitTree,
   height: number,
   width: number,
-|};
+};
 
 function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
   const [
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
index 9cc394cc799f..c533392b1619 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -27,7 +27,7 @@ import type {TooltipFiberData} from './HoveredFiberInfo';
 import type {ChartData} from './RankedChartBuilder';
 import type {CommitTree} from './types';
 
-export type ItemData = {|
+export type ItemData = {
   chartData: ChartData,
   onElementMouseEnter: (fiberData: TooltipFiberData) => void,
   onElementMouseLeave: () => void,
@@ -36,9 +36,9 @@ export type ItemData = {|
   selectedFiberIndex: number,
   selectFiber: (id: number | null, name: string | null) => void,
   width: number,
-|};
+};
 
-export default function CommitRankedAutoSizer(_: {||}) {
+export default function CommitRankedAutoSizer(_: {}) {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex, selectFiber} = useContext(
     ProfilerContext,
@@ -88,12 +88,12 @@ export default function CommitRankedAutoSizer(_: {||}) {
   }
 }
 
-type Props = {|
+type Props = {
   chartData: ChartData,
   commitTree: CommitTree,
   height: number,
   width: number,
-|};
+};
 
 function CommitRanked({chartData, commitTree, height, width}: Props) {
   const [
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
index 537f226f2d69..5dc425c33974 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -45,11 +45,11 @@ export function getCommitTree({
   commitIndex,
   profilerStore,
   rootID,
-}: {|
+}: {
   commitIndex: number,
   profilerStore: ProfilerStore,
   rootID: number,
-|}): CommitTree {
+}): CommitTree {
   if (!rootToCommitTreeMap.has(rootID)) {
     rootToCommitTreeMap.set(rootID, []);
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
index 7c7c9f08ddfb..32ccac9659e4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/FlamegraphChartBuilder.js
@@ -12,7 +12,7 @@ import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
 import type {CommitTree} from './types';
 
-export type ChartNode = {|
+export type ChartNode = {
   actualDuration: number,
   didRender: boolean,
   id: number,
@@ -21,16 +21,16 @@ export type ChartNode = {|
   offset: number,
   selfDuration: number,
   treeBaseDuration: number,
-|};
+};
 
-export type ChartData = {|
+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();
 
@@ -39,12 +39,12 @@ export function getChartData({
   commitTree,
   profilerStore,
   rootID,
-}: {|
+}: {
   commitIndex: number,
   commitTree: CommitTree,
   profilerStore: ProfilerStore,
   rootID: number,
-|}): ChartData {
+}): ChartData {
   const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
 
   const {fiberActualDurations, fiberSelfDurations} = commitDatum;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
index cc3989c7b4a8..b7529c1bbe5d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -18,14 +18,14 @@ import styles from './HoveredFiberInfo.css';
 
 import type {ChartNode} from './FlamegraphChartBuilder';
 
-export type TooltipFiberData = {|
+export type TooltipFiberData = {
   id: number,
   name: string,
-|};
+};
 
-export type Props = {|
+export type Props = {
   fiberData: ChartNode,
-|};
+};
 
 export default function HoveredFiberInfo({fiberData}: Props) {
   const {profilerStore} = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
index 8396232a1de5..fcad5d814682 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './NoCommitData.css';
 
-export default function NoCommitData(_: {||}) {
+export default function NoCommitData(_: {}) {
   return (
     <div className={styles.NoCommitData}>
       <div className={styles.Header}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 0d7e23f2e388..97b34809d7f9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -38,7 +38,7 @@ import {enableProfilerComponentTree} from 'react-devtools-feature-flags';
 
 import styles from './Profiler.css';
 
-function Profiler(_: {||}) {
+function Profiler(_: {}) {
   const {
     didRecordCommits,
     isProcessingData,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 5ae29122a413..c7e69f5ba23b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -22,7 +22,7 @@ import type {ProfilingDataFrontend} from './types';
 
 export type TabID = 'flame-chart' | 'ranked-chart' | 'timeline';
 
-export type Context = {|
+export type Context = {
   // Which tab is selected in the Profiler UI?
   selectedTabID: TabID,
   selectTab(id: TabID): void,
@@ -65,22 +65,22 @@ export type Context = {|
   selectedFiberID: number | null,
   selectedFiberName: string | null,
   selectFiber: (id: number | null, name: string | null) => void,
-|};
+};
 
 const ProfilerContext = createContext<Context>(((null: any): Context));
 ProfilerContext.displayName = 'ProfilerContext';
 
-type StoreProfilingState = {|
+type StoreProfilingState = {
   didRecordCommits: boolean,
   isProcessingData: boolean,
   isProfiling: boolean,
   profilingData: ProfilingDataFrontend | null,
   supportsProfiling: boolean,
-|};
+};
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function ProfilerContextController({children}: Props) {
   const store = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
index e3f6c178a5b0..635cf00b2867 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RankedChartBuilder.js
@@ -16,17 +16,17 @@ import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
 
 import type {CommitTree} from './types';
 
-export type ChartNode = {|
+export type ChartNode = {
   id: number,
   label: string,
   name: string,
   value: number,
-|};
+};
 
-export type ChartData = {|
+export type ChartData = {
   maxValue: number,
   nodes: Array<ChartNode>,
-|};
+};
 
 const cachedChartData: Map<string, ChartData> = new Map();
 
@@ -35,12 +35,12 @@ export function getChartData({
   commitTree,
   profilerStore,
   rootID,
-}: {|
+}: {
   commitIndex: number,
   commitTree: CommitTree,
   profilerStore: ProfilerStore,
   rootID: number,
-|}): ChartData {
+}): ChartData {
   const commitDatum = profilerStore.getCommitData(rootID, commitIndex);
 
   const {fiberActualDurations, fiberSelfDurations} = commitDatum;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
index 4c6aa5cf7d44..c1f03ed1317d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
@@ -15,9 +15,9 @@ import {ProfilerContext} from './ProfilerContext';
 
 import styles from './RecordToggle.css';
 
-export type Props = {|
+export type Props = {
   disabled?: boolean,
-|};
+};
 
 export default function RecordToggle({disabled}: Props) {
   const {isProfiling, startProfiling, stopProfiling} = useContext(
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
index 6d7443698a1b..c10abd983445 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -14,16 +14,16 @@ import ButtonIcon from '../ButtonIcon';
 import {BridgeContext, StoreContext} from '../context';
 import {useSubscription} from '../hooks';
 
-type SubscriptionData = {|
+type SubscriptionData = {
   recordChangeDescriptions: boolean,
   supportsReloadAndProfile: boolean,
-|};
+};
 
 export default function ReloadAndProfileButton({
   disabled,
-}: {|
+}: {
   disabled: boolean,
-|}) {
+}) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
index 4506847e7450..fe15ac8d6325 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
@@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext';
 
 import styles from './RootSelector.css';
 
-export default function RootSelector(_: {||}) {
+export default function RootSelector(_: {}) {
   const {profilingData, rootID, setRootID} = useContext(ProfilerContext);
 
   const options = [];
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
index 6619fb7c7839..284d442f8464 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -17,7 +17,7 @@ import {getCommitTree} from './CommitTreeBuilder';
 
 import styles from './SidebarCommitInfo.css';
 
-export type Props = {||};
+export type Props = {};
 
 export default function SidebarCommitInfo(_: Props) {
   const {selectedCommitIndex, rootID} = useContext(ProfilerContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
index 18bd77443eb9..26b11a8e30c1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -24,11 +24,11 @@ import {copy} from 'clipboard-js';
 
 import styles from './SidebarEventInfo.css';
 
-export type Props = {||};
+export type Props = {};
 
-type SchedulingEventProps = {|
+type SchedulingEventProps = {
   eventInfo: SchedulingEvent,
-|};
+};
 
 function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
   const {viewUrlSourceFunction} = useContext(ViewSourceContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index df6e6da1693f..c6505ce7a108 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -18,7 +18,7 @@ import ButtonIcon from '../ButtonIcon';
 
 import styles from './SidebarSelectedFiberInfo.css';
 
-export type Props = {||};
+export type Props = {};
 
 export default function SidebarSelectedFiberInfo(_: Props) {
   const {profilerStore} = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 56f62e01c573..76cd52e53a0b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -20,7 +20,7 @@ import Tooltip from './Tooltip';
 
 import styles from './SnapshotCommitList.css';
 
-export type ItemData = {|
+export type ItemData = {
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
   maxDuration: number,
@@ -30,9 +30,9 @@ export type ItemData = {|
   setHoveredCommitIndex: (index: number) => void,
   startCommitDrag: (newDragState: DragState) => void,
   totalDurations: Array<number>,
-|};
+};
 
-type Props = {|
+type Props = {
   commitData: CommitDataFrontend,
   commitTimes: Array<number>,
   filteredCommitIndices: Array<number>,
@@ -40,7 +40,7 @@ type Props = {|
   selectedFilteredCommitIndex: number | null,
   selectCommitIndex: (index: number) => void,
   totalDurations: Array<number>,
-|};
+};
 
 export default function SnapshotCommitList({
   commitData,
@@ -70,7 +70,7 @@ export default function SnapshotCommitList({
   );
 }
 
-type ListProps = {|
+type ListProps = {
   commitData: CommitDataFrontend,
   commitTimes: Array<number>,
   height: number,
@@ -80,13 +80,13 @@ type ListProps = {|
   selectCommitIndex: (index: number) => void,
   totalDurations: Array<number>,
   width: number,
-|};
+};
 
-type DragState = {|
+type DragState = {
   commitIndex: number,
   left: number,
   sizeIncrement: number,
-|};
+};
 
 function List({
   commitData,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
index 8459d8571be0..1d4fd41d798a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -18,7 +18,7 @@ import {StoreContext} from '../context';
 
 import styles from './SnapshotSelector.css';
 
-export type Props = {||};
+export type Props = {};
 
 export default function SnapshotSelector(_: Props) {
   const {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
index d35ff86d5895..bec2920f14f7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
@@ -16,10 +16,10 @@ import {ProfilerContext} from './ProfilerContext';
 import styles from './Updaters.css';
 import {ElementTypeRoot} from '../../../types';
 
-export type Props = {|
+export type Props = {
   commitTree: CommitTree,
   updaters: Array<SerializedElement>,
-|};
+};
 
 export default function Updaters({commitTree, updaters}: Props) {
   const {selectFiber} = useContext(ProfilerContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
index 7a2f9e5bf4f0..064dde43662e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
@@ -33,9 +33,9 @@ function hookIndicesToString(indices: Array<number>): string {
   }
 }
 
-type Props = {|
+type Props = {
   fiberID: number,
-|};
+};
 
 export default function WhatChanged({fiberID}: Props) {
   const {profilerStore} = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
index f495aa360d16..a496319b1e94 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/types.js
@@ -14,7 +14,7 @@ import type {
   TimelineDataExport,
 } from 'react-devtools-timeline/src/types';
 
-export type CommitTreeNode = {|
+export type CommitTreeNode = {
   id: number,
   children: Array<number>,
   displayName: string | null,
@@ -23,32 +23,32 @@ export type CommitTreeNode = {|
   parentID: number,
   treeBaseDuration: number,
   type: ElementType,
-|};
+};
 
-export type CommitTree = {|
+export type CommitTree = {
   nodes: Map<number, CommitTreeNode>,
   rootID: number,
-|};
+};
 
-export type SnapshotNode = {|
+export type SnapshotNode = {
   id: number,
   children: Array<number>,
   displayName: string | null,
   hocDisplayNames: Array<string> | null,
   key: number | string | null,
   type: ElementType,
-|};
+};
 
-export type ChangeDescription = {|
+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 = {|
+export type CommitDataFrontend = {
   // Map of Fiber (ID) to a description of what changed in this commit.
   changeDescriptions: Map<number, ChangeDescription> | null,
 
@@ -79,9 +79,9 @@ export type CommitDataFrontend = {|
 
   // Fiber(s) responsible for scheduling this update.
   updaters: Array<SerializedElement> | null,
-|};
+};
 
-export type ProfilingDataForRootFrontend = {|
+export type ProfilingDataForRootFrontend = {
   // Timing, duration, and other metadata about each commit.
   commitData: Array<CommitDataFrontend>,
 
@@ -103,10 +103,10 @@ export type ProfilingDataForRootFrontend = {|
   // 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 = {|
+export type ProfilingDataFrontend = {
   // Legacy profiling data is per renderer + root.
   dataForRoots: Map<number, ProfilingDataForRootFrontend>,
 
@@ -117,9 +117,9 @@ export type ProfilingDataFrontend = {|
   // 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 = {|
+export type CommitDataExport = {
   changeDescriptions: Array<[number, ChangeDescription]> | null,
   duration: number,
   effectDuration: number | null,
@@ -131,9 +131,9 @@ export type CommitDataExport = {|
   priorityLevel: string | null,
   timestamp: number,
   updaters: Array<SerializedElement> | null,
-|};
+};
 
-export type ProfilingDataForRootExport = {|
+export type ProfilingDataForRootExport = {
   commitData: Array<CommitDataExport>,
   displayName: string,
   // Tuple of Fiber ID and base duration
@@ -141,10 +141,10 @@ export type ProfilingDataForRootExport = {|
   operations: Array<Array<number>>,
   rootID: number,
   snapshots: Array<[number, SnapshotNode]>,
-|};
+};
 
 // Serializable version of ProfilingDataFrontend data.
-export type ProfilingDataExport = {|
+export type ProfilingDataExport = {
   version: 5,
 
   // Legacy profiling data is per renderer + root.
@@ -153,4 +153,4 @@ export type ProfilingDataExport = {|
   // 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/ReactLogo.js b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
index 8f9cfc15c24a..a473d450f910 100644
--- a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
+++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
@@ -11,9 +11,9 @@ import * as React from 'react';
 
 import styles from './ReactLogo.css';
 
-type Props = {|
+type Props = {
   className?: string,
-|};
+};
 
 export default function ReactLogo({className}: Props) {
   return (
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
index d2214f59728e..7fc620cb8026 100644
--- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -15,7 +15,7 @@ import Icon from './Icon';
 
 import styles from './SearchInput.css';
 
-type Props = {|
+type Props = {
   goToNextResult: () => void,
   goToPreviousResult: () => void,
   placeholder: string,
@@ -24,7 +24,7 @@ type Props = {|
   searchResultsCount: number,
   searchText: string,
   testName?: ?string,
-|};
+};
 
 export default function SearchInput({
   goToNextResult,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 83c3b2a61296..9df49e68ffd2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -51,7 +51,7 @@ import type {
   RegExpComponentFilter,
 } from 'react-devtools-shared/src/types';
 
-export default function ComponentsSettings(_: {||}) {
+export default function ComponentsSettings(_: {}) {
   const store = useContext(StoreContext);
   const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
 
@@ -417,10 +417,10 @@ export default function ComponentsSettings(_: {||}) {
   );
 }
 
-type ToggleIconProps = {|
+type ToggleIconProps = {
   isEnabled: boolean,
   isValid: boolean,
-|};
+};
 function ToggleIcon({isEnabled, isValid}: ToggleIconProps) {
   let className;
   if (isValid) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index de05978ec3ba..64df0f658678 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -13,7 +13,7 @@ import {SettingsContext} from './SettingsContext';
 
 import styles from './SettingsShared.css';
 
-export default function DebuggingSettings(_: {||}) {
+export default function DebuggingSettings(_: {}) {
   const {
     appendComponentStack,
     breakOnConsoleErrors,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index a781f99eb05c..71fc7ab29196 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -28,7 +28,7 @@ function getChangeLogUrl(version: ?string): string | null {
   return `${CHANGE_LOG_URL}#${versionAnchor}`;
 }
 
-export default function GeneralSettings(_: {||}) {
+export default function GeneralSettings(_: {}) {
   const {
     displayDensity,
     setDisplayDensity,
@@ -113,7 +113,7 @@ export default function GeneralSettings(_: {||}) {
   );
 }
 
-function Version({label, version}: {|label: string, version: ?string|}) {
+function Version({label, version}: {label: string, version: ?string}) {
   const changelogLink = useMemo(() => {
     return getChangeLogUrl(version);
   }, [version]);
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
index 7a2c8ede453d..cf0c237e6efb 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
@@ -15,7 +15,7 @@ import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler
 
 import styles from './SettingsShared.css';
 
-export default function ProfilerSettings(_: {||}) {
+export default function ProfilerSettings(_: {}) {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 8eda55d13dbd..82c62fc96c79 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -35,7 +35,7 @@ import type {BrowserTheme} from '../DevTools';
 export type DisplayDensity = 'comfortable' | 'compact';
 export type Theme = 'auto' | 'light' | 'dark';
 
-type Context = {|
+type Context = {
   displayDensity: DisplayDensity,
   setDisplayDensity(value: DisplayDensity): void,
 
@@ -65,7 +65,7 @@ type Context = {|
 
   traceUpdatesEnabled: boolean,
   setTraceUpdatesEnabled: (value: boolean) => void,
-|};
+};
 
 const SettingsContext = createContext<Context>(((null: any): Context));
 SettingsContext.displayName = 'SettingsContext';
@@ -88,12 +88,12 @@ function useLocalStorageWithLog<T>(
 
 type DocumentElements = Array<HTMLElement>;
 
-type Props = {|
+type Props = {
   browserTheme: BrowserTheme,
   children: React$Node,
   componentsPortalContainer?: Element,
   profilerPortalContainer?: Element,
-|};
+};
 
 function SettingsContextController({
   browserTheme,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
index 29d138f1c95f..6a6730a9f309 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
@@ -28,7 +28,7 @@ import styles from './SettingsModal.css';
 
 type TabID = 'general' | 'components' | 'profiler';
 
-export default function SettingsModal(_: {||}) {
+export default function SettingsModal(_: {}) {
   const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
@@ -57,7 +57,7 @@ export default function SettingsModal(_: {||}) {
   return <SettingsModalImpl />;
 }
 
-function SettingsModalImpl(_: {||}) {
+function SettingsModalImpl(_: {}) {
   const {setIsModalShowing} = useContext(SettingsModalContext);
   const dismissModal = useCallback(() => setIsModalShowing(false), [
     setIsModalShowing,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
index d3b500cee872..9821f25c05ca 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
@@ -22,7 +22,7 @@ type Context = {
 const SettingsModalContext = createContext<Context>(((null: any): Context));
 SettingsModalContext.displayName = 'SettingsModalContext';
 
-function SettingsModalContextController({children}: {|children: React$Node|}) {
+function SettingsModalContextController({children}: {children: React$Node}) {
   const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
 
   const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index 5c9f3f61bc72..391c1c9714db 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -16,21 +16,21 @@ import Tooltip from './Components/reach-ui/tooltip';
 
 import type {IconType} from './Icon';
 
-type TabInfo = {|
+type TabInfo = {
   icon: IconType,
   id: string,
   label: string,
   title?: string,
-|};
+};
 
-export type Props = {|
+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,
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index a353b4c6eec6..7a6deba50100 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import useThemeStyles from './useThemeStyles';
 
-export default function ThemeProvider({children}: {|children: React$Node|}) {
+export default function ThemeProvider({children}: {children: React$Node}) {
   const themeStyle = useThemeStyles();
 
   const style = React.useMemo(() => {
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
index 05f41c6211e7..07062e905d3b 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -24,7 +24,7 @@ const INSTRUCTIONS_FB_URL =
   'https://fb.me/devtools-unsupported-bridge-protocol';
 const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';
 
-export default function UnsupportedBridgeProtocolDialog(_: {||}) {
+export default function UnsupportedBridgeProtocolDialog(_: {}) {
   const {dialogs, dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
 
@@ -66,9 +66,9 @@ export default function UnsupportedBridgeProtocolDialog(_: {||}) {
 
 function DialogContent({
   unsupportedBridgeProtocol,
-}: {|
+}: {
   unsupportedBridgeProtocol: BridgeProtocol,
-|}) {
+}) {
   const {version, minNpmVersion, maxNpmVersion} = unsupportedBridgeProtocol;
 
   let instructions;
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
index 31da80c0584e..0cd383430bd7 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
@@ -18,7 +18,7 @@ import styles from './UnsupportedVersionDialog.css';
 
 type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';
 
-export default function UnsupportedVersionDialog(_: {||}) {
+export default function UnsupportedVersionDialog(_: {}) {
   const {dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
   const [state, setState] = useState<DAILOG_STATE>('dialog-not-shown');
@@ -54,7 +54,7 @@ export default function UnsupportedVersionDialog(_: {||}) {
   return null;
 }
 
-function DialogContent(_: {||}) {
+function DialogContent(_: {}) {
   return (
     <Fragment>
       <div className={styles.Row}>
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
index 4bc539d8975c..85f3cb5efdb7 100644
--- a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -14,7 +14,7 @@ import {ModalDialogContext} from './ModalDialog';
 
 import styles from './WarnIfLegacyBackendDetected.css';
 
-export default function WarnIfLegacyBackendDetected(_: {||}) {
+export default function WarnIfLegacyBackendDetected(_: {}) {
   const bridge = useContext(BridgeContext);
   const {dispatch} = useContext(ModalDialogContext);
 
@@ -75,7 +75,7 @@ export default function WarnIfLegacyBackendDetected(_: {||}) {
   return null;
 }
 
-function InvalidBackendDetected(_: {||}) {
+function InvalidBackendDetected(_: {}) {
   return (
     <Fragment>
       <p>Either upgrade React or install React DevTools v3:</p>
diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
index 169811b7b901..6f8f8ae4965e 100644
--- a/packages/react-devtools-shared/src/devtools/views/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -21,10 +21,10 @@ BridgeContext.displayName = 'BridgeContext';
 export const StoreContext = createContext<Store>(((null: any): Store));
 StoreContext.displayName = 'StoreContext';
 
-export type ContextMenuContextType = {|
+export type ContextMenuContextType = {
   isEnabledForInspectedElement: boolean,
   viewAttributeSourceFunction: ViewAttributeSource | null,
-|};
+};
 
 export const ContextMenuContext = createContext<ContextMenuContextType>({
   isEnabledForInspectedElement: false,
@@ -32,14 +32,14 @@ export const ContextMenuContext = createContext<ContextMenuContextType>({
 });
 ContextMenuContext.displayName = 'ContextMenuContext';
 
-export type OptionsContextType = {|
+export type OptionsContextType = {
   readOnly: boolean,
   hideSettings: boolean,
   hideToggleErrorAction: boolean,
   hideToggleSuspenseAction: boolean,
   hideLogAction: boolean,
   hideViewSourceAction: boolean,
-|};
+};
 
 export const OptionsContext = createContext<OptionsContextType>({
   readOnly: false,
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index a4f51b461ca6..60a2fe8dcb41 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -23,25 +23,25 @@ import {
 import {StoreContext, BridgeContext} from './context';
 import {sanitizeForParse, smartParse, smartStringify} from '../utils';
 
-type ACTION_RESET = {|
+type ACTION_RESET = {
   type: 'RESET',
   externalValue: any,
-|};
-type ACTION_UPDATE = {|
+};
+type ACTION_UPDATE = {
   type: 'UPDATE',
   editableValue: any,
   externalValue: any,
-|};
+};
 
 type UseEditableValueAction = ACTION_RESET | ACTION_UPDATE;
 type UseEditableValueDispatch = (action: UseEditableValueAction) => void;
-type UseEditableValueState = {|
+type UseEditableValueState = {
   editableValue: any,
   externalValue: any,
   hasPendingChanges: boolean,
   isValid: boolean,
   parsedValue: any,
-|};
+};
 
 function useEditableValueReducer(state, action) {
   switch (action.type) {
@@ -271,10 +271,10 @@ export function useModalDismissSignal(
 export function useSubscription<Value>({
   getCurrentValue,
   subscribe,
-}: {|
+}: {
   getCurrentValue: () => Value,
   subscribe: (callback: Function) => () => void,
-|}): Value {
+}): Value {
   const [state, setState] = useState(() => ({
     getCurrentValue,
     subscribe,
diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js
index b31d9602c6b8..3e6c2f262837 100644
--- a/packages/react-devtools-shared/src/dynamicImportCache.js
+++ b/packages/react-devtools-shared/src/dynamicImportCache.js
@@ -17,20 +17,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 4ed128ba9df9..29cdea1e2b0b 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -224,10 +224,10 @@ export function installHook(target: any): DevToolsHook | null {
   function patchConsoleForInitialRenderInStrictMode({
     hideConsoleLogsInStrictMode,
     browserTheme,
-  }: {|
+  }: {
     hideConsoleLogsInStrictMode: boolean,
     browserTheme: BrowserTheme,
-  |}) {
+  }) {
     const overrideConsoleMethods = [
       'error',
       'group',
diff --git a/packages/react-devtools-shared/src/hookNamesCache.js b/packages/react-devtools-shared/src/hookNamesCache.js
index c992f64cf97b..fa288522f3c1 100644
--- a/packages/react-devtools-shared/src/hookNamesCache.js
+++ b/packages/react-devtools-shared/src/hookNamesCache.js
@@ -27,20 +27,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
index 53c0e8c0a57a..3bb955005ba8 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js
@@ -16,21 +16,21 @@ import type {
   MixedSourceMap,
 } from './SourceMapTypes';
 
-type SearchPosition = {|
+type SearchPosition = {
   columnNumber: number,
   lineNumber: number,
-|};
+};
 
-type ResultPosition = {|
+type ResultPosition = {
   column: number,
   line: number,
   sourceContent: string,
   sourceURL: string,
-|};
+};
 
-export type SourceMapConsumerType = {|
+export type SourceMapConsumerType = {
   originalPositionFor: SearchPosition => ResultPosition,
-|};
+};
 
 type Mappings = Array<Array<Array<number>>>;
 
@@ -138,14 +138,14 @@ function BasicSourceMapConsumer(sourceMapJSON: BasicSourceMap) {
   }: any): SourceMapConsumerType);
 }
 
-type Section = {|
+type Section = {
   +generatedColumn: number,
   +generatedLine: number,
   +map: MixedSourceMap,
 
   // Lazily parsed only when/as the section is needed.
   sourceMapConsumer: SourceMapConsumerType | null,
-|};
+};
 
 function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) {
   let lastOffset = {
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
index 4882afba9a9f..acf9a2c1d70e 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapMetadataConsumer.js
@@ -83,10 +83,10 @@ export class SourceMapMetadataConsumer {
     line,
     column,
     source,
-  }: {|
+  }: {
     ...Position,
     +source: ?string,
-  |}): ?string {
+  }): ?string {
     if (source == null) {
       return null;
     }
diff --git a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
index 744cc7d30925..721dd4ca0651 100644
--- a/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
+++ b/packages/react-devtools-shared/src/hooks/SourceMapTypes.js
@@ -15,7 +15,7 @@ export type ReactSourcesArray = $ReadOnlyArray<?ReactSourceMetadata>;
 export type FBSourceMetadata = [?{...}, ?ReactSourceMetadata];
 export type FBSourcesArray = $ReadOnlyArray<?FBSourceMetadata>;
 
-export type BasicSourceMap = {|
+export type BasicSourceMap = {
   +file?: string,
   +mappings: string,
   +names: Array<string>,
@@ -25,7 +25,7 @@ export type BasicSourceMap = {|
   +version: number,
   +x_facebook_sources?: FBSourcesArray,
   +x_react_sources?: ReactSourcesArray,
-|};
+};
 
 export type IndexSourceMapSection = {
   map: IndexSourceMap | BasicSourceMap,
@@ -37,7 +37,7 @@ export type IndexSourceMapSection = {
   ...
 };
 
-export type IndexSourceMap = {|
+export type IndexSourceMap = {
   +file?: string,
   +mappings?: void, // avoids SourceMap being a disjoint union
   +sourcesContent?: void,
@@ -45,6 +45,6 @@ export type IndexSourceMap = {|
   +version: number,
   +x_facebook_sources?: FBSourcesArray,
   +x_react_sources?: ReactSourcesArray,
-|};
+};
 
 export type MixedSourceMap = IndexSourceMap | BasicSourceMap;
diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
index 8d3c5e2fa2b0..2fe1aa213774 100644
--- a/packages/react-devtools-shared/src/hooks/astUtils.js
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -13,16 +13,16 @@ import {File} from '@babel/types';
 
 import type {HooksNode} from 'react-debug-tools/src/ReactDebugHooks';
 
-export type Position = {|
+export type Position = {
   line: number,
   column: number,
-|};
+};
 
-export type SourceFileASTWithHookDetails = {|
+export type SourceFileASTWithHookDetails = {
   sourceFileAST: File,
   line: number,
   source: string,
-|};
+};
 
 export const NO_HOOK_NAME = '<no-hook>';
 
@@ -356,7 +356,7 @@ function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
  */
 export function getHookNamesMappingFromAST(
   sourceAST: File,
-): $ReadOnlyArray<{|name: string, start: Position|}> {
+): $ReadOnlyArray<{name: string, start: Position}> {
   const hookStack = [];
   const hookNames = [];
   const pushFrame = (name: string, node: Node) => {
diff --git a/packages/react-devtools-shared/src/hooks/generateHookMap.js b/packages/react-devtools-shared/src/hooks/generateHookMap.js
index d57bbb606385..fb6fea95c666 100644
--- a/packages/react-devtools-shared/src/hooks/generateHookMap.js
+++ b/packages/react-devtools-shared/src/hooks/generateHookMap.js
@@ -11,15 +11,15 @@ import {getHookNamesMappingFromAST} from './astUtils';
 import {encode, decode} from 'sourcemap-codec';
 import {File} from '@babel/types';
 
-export type HookMap = {|
+export type HookMap = {
   names: $ReadOnlyArray<string>,
   mappings: HookMapMappings,
-|};
+};
 
-export type EncodedHookMap = {|
+export type EncodedHookMap = {
   names: $ReadOnlyArray<string>,
   mappings: string,
-|};
+};
 
 // See generateHookMap below for more details on formatting
 export type HookMapEntry = [
diff --git a/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
index c65c5fb5a802..89264c493858 100644
--- a/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
+++ b/packages/react-devtools-shared/src/hooks/getHookNameForLocation.js
@@ -91,7 +91,7 @@ function binSearch<T>(
     location: Position,
     items: T[],
     index: number,
-  ) => {|index: number | null, direction: number|},
+  ) => {index: number | null, direction: number},
 ): T | null {
   let count = items.length;
   let index = 0;
@@ -141,7 +141,7 @@ function compareLinePositions(
   location: Position,
   mappings: HookMapMappings,
   index: number,
-): {|index: number | null, direction: number|} {
+): {index: number | null, direction: number} {
   const startIndex = index;
   const start = mappings[startIndex];
   if (start == null) {
@@ -200,7 +200,7 @@ function compareColumnPositions(
   location: Position,
   line: HookMapLine,
   index: number,
-): {|index: number | null, direction: number|} {
+): {index: number | null, direction: number} {
   const startIndex = index;
   const start = line[index];
   if (start == null) {
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
index 640e916a09ff..3e08302c157b 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js
@@ -68,7 +68,7 @@ const FETCH_OPTIONS = {cache: 'force-cache'};
 
 const MAX_SOURCE_LENGTH = 100_000_000;
 
-export type HookSourceAndMetadata = {|
+export type HookSourceAndMetadata = {
   // Generated by react-debug-tools.
   hookSource: HookSource,
 
@@ -86,7 +86,7 @@ export type HookSourceAndMetadata = {|
   // 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,
diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
index 7eada16a7d9e..ba3c1e096b67 100644
--- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
+++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js
@@ -33,7 +33,7 @@ import type {HookNames, LRUCache} from 'react-devtools-shared/src/types';
 
 type AST = mixed;
 
-type HookParsedMetadata = {|
+type HookParsedMetadata = {
   // API for consuming metadfata present in extended source map.
   metadataConsumer: SourceMapMetadataConsumer | null,
 
@@ -55,24 +55,24 @@ type HookParsedMetadata = {|
 
   // Alternate APIs from source-map for parsing source maps (if detected).
   sourceMapConsumer: SourceMapConsumerType | null,
-|};
+};
 
 type LocationKeyToHookParsedMetadata = Map<string, HookParsedMetadata>;
 
-type CachedRuntimeCodeMetadata = {|
+type CachedRuntimeCodeMetadata = {
   metadataConsumer: SourceMapMetadataConsumer | null,
   sourceMapConsumer: SourceMapConsumerType | null,
-|};
+};
 
 const runtimeURLToMetadataCache: LRUCache<
   string,
   CachedRuntimeCodeMetadata,
 > = new LRU({max: 50});
 
-type CachedSourceCodeMetadata = {|
+type CachedSourceCodeMetadata = {
   originalSourceAST: AST,
   originalSourceCode: string,
-|};
+};
 
 const originalURLToMetadataCache: LRUCache<
   string,
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index 770b168e4b11..bb35c4cf3488 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -30,7 +30,7 @@ export const meta = {
   unserializable: Symbol('unserializable'),
 };
 
-export type Dehydrated = {|
+export type Dehydrated = {
   inspectable: boolean,
   name: string | null,
   preview_long: string | null,
@@ -38,7 +38,7 @@ export type Dehydrated = {|
   readonly?: boolean,
   size?: number,
   type: string,
-|};
+};
 
 // Typed arrays and other complex iteratable objects (e.g. Map, Set, ImmutableJS) need special handling.
 // These objects can't be serialized without losing type information,
diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js
index b1f820405848..4ecb98ffab5e 100644
--- a/packages/react-devtools-shared/src/inspectedElementCache.js
+++ b/packages/react-devtools-shared/src/inspectedElementCache.js
@@ -26,20 +26,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: Error | string,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
@@ -168,12 +168,12 @@ export function checkForUpdate({
   element,
   refresh,
   store,
-}: {|
+}: {
   bridge: FrontendBridge,
   element: Element,
   refresh: RefreshFunction,
   store: Store,
-|}): void {
+}): void {
   const {id} = element;
   const rendererID = store.getRendererIDForElement(id);
   if (rendererID != null) {
diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
index bb687bf98d7a..96021dd2ae25 100644
--- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js
+++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js
@@ -58,12 +58,12 @@ export function inspectElement({
   element,
   path,
   rendererID,
-}: {|
+}: {
   bridge: FrontendBridge,
   element: Element,
   path: Path | null,
   rendererID: number,
-|}): Promise<InspectElementReturnType> {
+}): Promise<InspectElementReturnType> {
   const {id} = element;
 
   // This could indicate that the DevTools UI has been closed and reopened.
diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
index fffe07bad7c9..4b044cf08611 100644
--- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
+++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js
@@ -15,9 +15,9 @@ import {enableLogger} from 'react-devtools-feature-flags';
 let loggingIFrame = null;
 let missedEvents = [];
 
-type LoggerContext = {|
+type LoggerContext = {
   page_url: ?string,
-|};
+};
 
 export function registerDevToolsEventLogger(
   surface: string,
diff --git a/packages/react-devtools-shared/src/types.js b/packages/react-devtools-shared/src/types.js
index ca0943ac9234..30bf480027da 100644
--- a/packages/react-devtools-shared/src/types.js
+++ b/packages/react-devtools-shared/src/types.js
@@ -7,11 +7,11 @@
  * @flow
  */
 
-export type Wall = {|
+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).
@@ -52,26 +52,26 @@ export type ComponentFilterType = 1 | 2 | 3 | 4;
 
 // Hide all elements of types in this Set.
 // We hide host components only by default.
-export type ElementTypeComponentFilter = {|
+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 = {|
+export type RegExpComponentFilter = {
   isEnabled: boolean,
   isValid: boolean,
   type: 2 | 3,
   value: string,
-|};
+};
 
-export type BooleanComponentFilter = {|
+export type BooleanComponentFilter = {
   isEnabled: boolean,
   isValid: boolean,
   type: 4,
-|};
+};
 
 export type ComponentFilter =
   | BooleanComponentFilter
@@ -85,21 +85,21 @@ export type HookName = string | null;
 export type HookSourceLocationKey = string;
 export type HookNames = Map<HookSourceLocationKey, HookName>;
 
-export type LRUCache<K, V> = {|
+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 = {|
+export type StyleXPlugin = {
   sources: Array<string>,
   resolvedStyles: Object,
-|};
+};
 
-export type Plugins = {|
+export type Plugins = {
   stylex: StyleXPlugin | null,
-|};
+};
 
 export const StrictMode = 1;
diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js
index 306ac73b91a7..ca7bd18010b2 100644
--- a/packages/react-devtools-shell/src/app/EditableProps/index.js
+++ b/packages/react-devtools-shell/src/app/EditableProps/index.js
@@ -32,7 +32,7 @@ function reducer(state, action) {
   }
 }
 
-type StatefulFunctionProps = {|name: string|};
+type StatefulFunctionProps = {name: string};
 
 function StatefulFunction({name}: StatefulFunctionProps) {
   const [count, updateCount] = useState(0);
@@ -68,8 +68,8 @@ function StatefulFunction({name}: StatefulFunctionProps) {
 const BoolContext = createContext(true);
 BoolContext.displayName = 'BoolContext';
 
-type Props = {|name: string, toggle: boolean|};
-type State = {|cities: Array<string>, state: string|};
+type Props = {name: string, toggle: boolean};
+type State = {cities: Array<string>, state: string};
 
 class StatefulClass extends Component<Props, State> {
   static contextType = BoolContext;
@@ -102,7 +102,7 @@ class StatefulClass extends Component<Props, State> {
 const MemoizedStatefulClass = memo(StatefulClass);
 const MemoizedStatefulFunction = memo(StatefulFunction);
 
-const ForwardRef = forwardRef<{|name: string|}, HTMLUListElement>(
+const ForwardRef = forwardRef<{name: string}, HTMLUListElement>(
   ({name}, ref) => {
     const [count, updateCount] = useState(0);
     const debouncedCount = useDebounce(count, 1000);
diff --git a/packages/react-devtools-shell/src/app/ToDoList/List.js b/packages/react-devtools-shell/src/app/ToDoList/List.js
index 47dbb3f6abb0..a1b784b6e5a1 100644
--- a/packages/react-devtools-shell/src/app/ToDoList/List.js
+++ b/packages/react-devtools-shell/src/app/ToDoList/List.js
@@ -12,13 +12,13 @@ import {Fragment, useCallback, useState} from 'react';
 import ListItem from './ListItem';
 import styles from './List.css';
 
-export type Item = {|
+export type Item = {
   id: number,
   isComplete: boolean,
   text: string,
-|};
+};
 
-type Props = {||};
+type Props = {};
 
 export default function List(props: Props) {
   const [newItemText, setNewItemText] = useState<string>('');
diff --git a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
index 5d816f652c83..a382f639a1b2 100644
--- a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
+++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
@@ -13,11 +13,11 @@ import styles from './ListItem.css';
 
 import type {Item} from './List';
 
-type Props = {|
+type Props = {
   item: Item,
   removeItem: (item: Item) => void,
   toggleItem: (item: Item) => void,
-|};
+};
 
 function ListItem({item, removeItem, toggleItem}: Props) {
   const handleDelete = useCallback(() => {
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 273b67bed170..3853f5cb4d63 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -69,10 +69,10 @@ import styles from './CanvasPage.css';
 
 const CONTEXT_MENU_ID = 'canvas';
 
-type Props = {|
+type Props = {
   profilerData: TimelineData,
   viewState: ViewState,
-|};
+};
 
 function CanvasPage({profilerData, viewState}: Props) {
   return (
@@ -80,7 +80,7 @@ function CanvasPage({profilerData, viewState}: Props) {
       className={styles.CanvasPage}
       style={{backgroundColor: COLORS.BACKGROUND}}>
       <AutoSizer>
-        {({height, width}: {|height: number, width: number|}) => (
+        {({height, width}: {height: number, width: number}) => (
           <AutoSizedCanvas
             data={profilerData}
             height={height}
@@ -145,12 +145,12 @@ const EMPTY_CONTEXT_INFO: ReactEventInfo = {
   userTimingMark: null,
 };
 
-type AutoSizedCanvasProps = {|
+type AutoSizedCanvasProps = {
   data: TimelineData,
   height: number,
   viewState: ViewState,
   width: number,
-|};
+};
 
 function AutoSizedCanvas({
   data,
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index de607ddd5b19..09dab01757b5 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -36,14 +36,14 @@ import styles from './EventTooltip.css';
 
 const MAX_TOOLTIP_TEXT_LENGTH = 60;
 
-type Props = {|
-  canvasRef: {|current: HTMLCanvasElement | null|},
+type Props = {
+  canvasRef: {current: HTMLCanvasElement | null},
   data: TimelineData,
   height: number,
   hoveredEvent: ReactEventInfo | null,
   origin: Point,
   width: number,
-|};
+};
 
 function getReactMeasureLabel(type): string | null {
   switch (type) {
@@ -135,9 +135,9 @@ export default function EventTooltip({
 
 const TooltipReactComponentMeasure = ({
   componentMeasure,
-}: {|
+}: {
   componentMeasure: ReactComponentMeasure,
-|}) => {
+}) => {
   const {componentName, duration, timestamp, type, warning} = componentMeasure;
 
   let label = componentName;
@@ -182,9 +182,9 @@ const TooltipReactComponentMeasure = ({
 
 const TooltipFlamechartNode = ({
   stackFrame,
-}: {|
+}: {
   stackFrame: FlamechartStackFrame,
-|}) => {
+}) => {
   const {name, timestamp, duration, locationLine, locationColumn} = stackFrame;
   return (
     <div className={styles.TooltipSection}>
@@ -207,7 +207,7 @@ const TooltipFlamechartNode = ({
   );
 };
 
-const TooltipNativeEvent = ({nativeEvent}: {|nativeEvent: NativeEvent|}) => {
+const TooltipNativeEvent = ({nativeEvent}: {nativeEvent: NativeEvent}) => {
   const {duration, timestamp, type, warning} = nativeEvent;
 
   return (
@@ -234,9 +234,9 @@ const TooltipNativeEvent = ({nativeEvent}: {|nativeEvent: NativeEvent|}) => {
 
 const TooltipNetworkMeasure = ({
   networkMeasure,
-}: {|
+}: {
   networkMeasure: NetworkMeasure,
-|}) => {
+}) => {
   const {
     finishTimestamp,
     lastReceivedDataTimestamp,
@@ -269,10 +269,10 @@ const TooltipNetworkMeasure = ({
 const TooltipSchedulingEvent = ({
   data,
   schedulingEvent,
-}: {|
+}: {
   data: TimelineData,
   schedulingEvent: SchedulingEvent,
-|}) => {
+}) => {
   const label = getSchedulingEventLabel(schedulingEvent);
   if (!label) {
     if (__DEV__) {
@@ -335,11 +335,11 @@ 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.
@@ -365,9 +365,9 @@ const TooltipSnapshot = ({
 
 const TooltipSuspenseEvent = ({
   suspenseEvent,
-}: {|
+}: {
   suspenseEvent: SuspenseEvent,
-|}) => {
+}) => {
   const {
     componentName,
     duration,
@@ -424,10 +424,10 @@ const TooltipSuspenseEvent = ({
 const TooltipReactMeasure = ({
   data,
   measure,
-}: {|
+}: {
   data: TimelineData,
   measure: ReactMeasure,
-|}) => {
+}) => {
   const label = getReactMeasureLabel(measure.type);
   if (!label) {
     if (__DEV__) {
@@ -471,7 +471,7 @@ const TooltipReactMeasure = ({
   );
 };
 
-const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => {
+const TooltipUserTimingMark = ({mark}: {mark: UserTimingMark}) => {
   const {name, timestamp} = mark;
   return (
     <div className={styles.TooltipSection}>
@@ -485,7 +485,7 @@ const TooltipUserTimingMark = ({mark}: {|mark: UserTimingMark|}) => {
   );
 };
 
-const TooltipThrownError = ({thrownError}: {|thrownError: ThrownError|}) => {
+const TooltipThrownError = ({thrownError}: {thrownError: ThrownError}) => {
   const {componentName, message, phase, timestamp} = thrownError;
   const label = `threw an error during ${phase}`;
   return (
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index bfd2a35f733e..c4c8a1fa855c 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -32,7 +32,7 @@ import {TimelineSearchContextController} from './TimelineSearchContext';
 
 import styles from './Timeline.css';
 
-export function Timeline(_: {||}) {
+export function Timeline(_: {}) {
   const {
     file,
     inMemoryTimelineData,
@@ -143,11 +143,11 @@ const FileLoader = ({
   file,
   onFileSelect,
   viewState,
-}: {|
+}: {
   file: File | null,
   onFileSelect: (file: File) => void,
   viewState: ViewState,
-|}) => {
+}) => {
   if (file === null) {
     return null;
   }
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
index c753fe1c28d6..3032e5594772 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -27,7 +27,7 @@ import type {
 } from './types';
 import type {RefObject} from 'shared/ReactTypes';
 
-export type Context = {|
+export type Context = {
   file: File | null,
   inMemoryTimelineData: Array<TimelineData> | null,
   isTimelineSupported: boolean,
@@ -36,14 +36,14 @@ export type Context = {|
   viewState: ViewState,
   selectEvent: ReactEventInfo => void,
   selectedEvent: ReactEventInfo,
-|};
+};
 
 const TimelineContext = createContext<Context>(((null: any): Context));
 TimelineContext.displayName = 'TimelineContext';
 
-type Props = {|
+type Props = {
   children: React$Node,
-|};
+};
 
 function TimelineContextController({children}: Props) {
   const searchInputContainerRef = useRef(null);
diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js
index c545f83888e9..2535b723b4a1 100644
--- a/packages/react-devtools-timeline/src/TimelineSearchContext.js
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -12,24 +12,24 @@ import {createContext, useMemo, useReducer} from 'react';
 
 import type {ReactComponentMeasure, TimelineData, ViewState} from './types';
 
-type State = {|
+type State = {
   profilerData: TimelineData,
   searchIndex: number,
   searchRegExp: RegExp | null,
   searchResults: Array<ReactComponentMeasure>,
   searchText: string,
-|};
+};
 
-type ACTION_GO_TO_NEXT_SEARCH_RESULT = {|
+type ACTION_GO_TO_NEXT_SEARCH_RESULT = {
   type: 'GO_TO_NEXT_SEARCH_RESULT',
-|};
-type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {|
+};
+type ACTION_GO_TO_PREVIOUS_SEARCH_RESULT = {
   type: 'GO_TO_PREVIOUS_SEARCH_RESULT',
-|};
-type ACTION_SET_SEARCH_TEXT = {|
+};
+type ACTION_SET_SEARCH_TEXT = {
   type: 'SET_SEARCH_TEXT',
   payload: string,
-|};
+};
 
 type Action =
   | ACTION_GO_TO_NEXT_SEARCH_RESULT
@@ -111,7 +111,7 @@ function reducer(state: State, action: Action): State {
   };
 }
 
-export type Context = {|
+export type Context = {
   profilerData: TimelineData,
 
   // Search state
@@ -120,16 +120,16 @@ export type Context = {|
   searchRegExp: null,
   searchResults: Array<ReactComponentMeasure>,
   searchText: string,
-|};
+};
 
 const TimelineSearchContext = createContext<Context>(((null: any): Context));
 TimelineSearchContext.displayName = 'TimelineSearchContext';
 
-type Props = {|
+type Props = {
   children: React$Node,
   profilerData: TimelineData,
   viewState: ViewState,
-|};
+};
 
 function TimelineSearchContextController({
   children,
diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js
index 5a4515d1b826..68fd3eaf33e6 100644
--- a/packages/react-devtools-timeline/src/TimelineSearchInput.js
+++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js
@@ -14,7 +14,7 @@ import SearchInput from 'react-devtools-shared/src/devtools/views/SearchInput';
 import {TimelineContext} from './TimelineContext';
 import {TimelineSearchContext} from './TimelineSearchContext';
 
-type Props = {||};
+type Props = {};
 
 export default function TimelineSearchInput(props: Props) {
   const {searchInputContainerRef} = useContext(TimelineContext);
diff --git a/packages/react-devtools-timeline/src/content-views/utils/colors.js b/packages/react-devtools-timeline/src/content-views/utils/colors.js
index a1ad49b5888f..539ec54759f6 100644
--- a/packages/react-devtools-timeline/src/content-views/utils/colors.js
+++ b/packages/react-devtools-timeline/src/content-views/utils/colors.js
@@ -7,10 +7,10 @@
  * @flow
  */
 
-type ColorSpace = number | {|min: number, max: number, count?: number|};
+type ColorSpace = number | {min: number, max: number, count?: number};
 
 // Docstrings from https://www.w3schools.com/css/css_colors_hsl.asp
-type HslaColor = $ReadOnly<{|
+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. */
@@ -19,7 +19,7 @@ type HslaColor = $ReadOnly<{|
   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})`;
diff --git a/packages/react-devtools-timeline/src/content-views/utils/text.js b/packages/react-devtools-timeline/src/content-views/utils/text.js
index 9351d1685ff7..146ba344c1b2 100644
--- a/packages/react-devtools-timeline/src/content-views/utils/text.js
+++ b/packages/react-devtools-timeline/src/content-views/utils/text.js
@@ -62,11 +62,11 @@ export function trimText(
   return longestValidText;
 }
 
-type TextConfig = {|
+type TextConfig = {
   fillStyle?: string,
   fontSize?: number,
   textAlign?: 'left' | 'center',
-|};
+};
 
 export function drawText(
   text: string,
diff --git a/packages/react-devtools-timeline/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js
index 636a20ed5f7b..ef9a239c6dbd 100644
--- a/packages/react-devtools-timeline/src/import-worker/index.js
+++ b/packages/react-devtools-timeline/src/import-worker/index.js
@@ -22,9 +22,9 @@ const workerizedImportFile: ImportFileModule = window.Worker
   : importFileModule;
 
 export type ImportWorkerOutputData =
-  | {|status: 'SUCCESS', processedData: TimelineData|}
-  | {|status: 'INVALID_PROFILE_ERROR', error: Error|}
-  | {|status: 'UNEXPECTED_ERROR', error: Error|};
+  | {status: 'SUCCESS', processedData: TimelineData}
+  | {status: 'INVALID_PROFILE_ERROR', error: Error}
+  | {status: 'UNEXPECTED_ERROR', error: Error};
 
 export type importFileFunction = (file: File) => ImportWorkerOutputData;
 
diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
index 110b4e8923fb..d41bde0267c7 100644
--- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js
+++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -38,15 +38,15 @@ import InvalidProfileError from './InvalidProfileError';
 import {getBatchRange} from '../utils/getBatchRange';
 import ErrorStackParser from 'error-stack-parser';
 
-type MeasureStackElement = {|
+type MeasureStackElement = {
   type: ReactMeasureType,
   depth: number,
   measure: ReactMeasure,
   startTime: Milliseconds,
   stopTime?: Milliseconds,
-|};
+};
 
-type ProcessorState = {|
+type ProcessorState = {
   asyncProcessingPromises: Promise<any>[],
   batchUID: BatchUID,
   currentReactComponentMeasure: ReactComponentMeasure | null,
@@ -64,7 +64,7 @@ type ProcessorState = {|
   requestIdToNetworkMeasureMap: Map<string, NetworkMeasure>,
   uidCounter: BatchUID,
   unresolvedSuspenseEvents: Map<string, SuspenseEvent>,
-|};
+};
 
 const NATIVE_EVENT_DURATION_THRESHOLD = 20;
 const NESTED_UPDATE_DURATION_THRESHOLD = 20;
diff --git a/packages/react-devtools-timeline/src/timelineCache.js b/packages/react-devtools-timeline/src/timelineCache.js
index 0616f7000864..d2418d76151c 100644
--- a/packages/react-devtools-timeline/src/timelineCache.js
+++ b/packages/react-devtools-timeline/src/timelineCache.js
@@ -16,20 +16,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: Error,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js
index 429f0a2d210d..daf764ad151e 100644
--- a/packages/react-devtools-timeline/src/types.js
+++ b/packages/react-devtools-timeline/src/types.js
@@ -17,51 +17,51 @@ export type Return<T> = Return_<*, T>;
 
 // Project types
 
-export type ErrorStackFrame = {|
+export type ErrorStackFrame = {
   fileName: string,
   lineNumber: number,
   columnNumber: number,
-|};
+};
 
 export type Milliseconds = number;
 
 export type ReactLane = number;
 
-export type NativeEvent = {|
+export type NativeEvent = {
   +depth: number,
   +duration: Milliseconds,
   +timestamp: Milliseconds,
   +type: string,
   warning: string | null,
-|};
+};
 
-type BaseReactEvent = {|
+type BaseReactEvent = {
   +componentName?: string,
   +timestamp: Milliseconds,
   warning: string | null,
-|};
+};
 
-type BaseReactScheduleEvent = {|
+type BaseReactScheduleEvent = {
   ...BaseReactEvent,
   +lanes: ReactLane[],
-|};
-export type ReactScheduleRenderEvent = {|
+};
+export type ReactScheduleRenderEvent = {
   ...BaseReactScheduleEvent,
   +type: 'schedule-render',
-|};
-export type ReactScheduleStateUpdateEvent = {|
+};
+export type ReactScheduleStateUpdateEvent = {
   ...BaseReactScheduleEvent,
   +componentStack?: string,
   +type: 'schedule-state-update',
-|};
-export type ReactScheduleForceUpdateEvent = {|
+};
+export type ReactScheduleForceUpdateEvent = {
   ...BaseReactScheduleEvent,
   +type: 'schedule-force-update',
-|};
+};
 
 export type Phase = 'mount' | 'update';
 
-export type SuspenseEvent = {|
+export type SuspenseEvent = {
   ...BaseReactEvent,
   depth: number,
   duration: number | null,
@@ -70,15 +70,15 @@ export type SuspenseEvent = {|
   promiseName: string | null,
   resolution: 'rejected' | 'resolved' | 'unresolved',
   +type: 'suspense',
-|};
+};
 
-export type ThrownError = {|
+export type ThrownError = {
   +componentName?: string,
   +message: string,
   +phase: Phase,
   +timestamp: Milliseconds,
   +type: 'thrown-error',
-|};
+};
 
 export type SchedulingEvent =
   | ReactScheduleRenderEvent
@@ -97,16 +97,16 @@ export type ReactMeasureType =
 
 export type BatchUID = number;
 
-export type ReactMeasure = {|
+export type ReactMeasure = {
   +type: ReactMeasureType,
   +lanes: ReactLane[],
   +timestamp: Milliseconds,
   +duration: Milliseconds,
   +batchUID: BatchUID,
   +depth: number,
-|};
+};
 
-export type NetworkMeasure = {|
+export type NetworkMeasure = {
   +depth: number,
   finishTimestamp: Milliseconds,
   firstReceivedDataTimestamp: Milliseconds,
@@ -117,7 +117,7 @@ export type NetworkMeasure = {|
   requestMethod: string,
   sendRequestTimestamp: Milliseconds,
   url: string,
-|};
+};
 
 export type ReactComponentMeasureType =
   | 'render'
@@ -126,38 +126,38 @@ export type ReactComponentMeasureType =
   | 'passive-effect-mount'
   | 'passive-effect-unmount';
 
-export type ReactComponentMeasure = {|
+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 = {|
+export type FlamechartStackFrame = {
   name: string,
   timestamp: Milliseconds,
   duration: Milliseconds,
   scriptUrl?: string,
   locationLine?: number,
   locationColumn?: number,
-|};
+};
 
-export type UserTimingMark = {|
+export type UserTimingMark = {
   name: string,
   timestamp: Milliseconds,
-|};
+};
 
-export type Snapshot = {|
+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
@@ -177,7 +177,7 @@ export type SearchRegExpStateChangeCallback = (
 // 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 = {|
+export type ViewState = {
   horizontalScrollState: ScrollState,
   onHorizontalScrollStateChange: (
     callback: HorizontalScrollStateChangeCallback,
@@ -189,7 +189,7 @@ export type ViewState = {|
   updateHorizontalScrollState: (scrollState: ScrollState) => void,
   updateSearchRegExpState: (searchRegExp: RegExp | null) => void,
   viewToMutableViewStateMap: Map<string, mixed>,
-|};
+};
 
 export type InternalModuleSourceToRanges = Map<
   string,
@@ -198,7 +198,7 @@ export type InternalModuleSourceToRanges = Map<
 
 export type LaneToLabelMap = Map<ReactLane, string>;
 
-export type TimelineData = {|
+export type TimelineData = {
   batchUIDToMeasuresMap: Map<BatchUID, ReactMeasure[]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
@@ -216,9 +216,9 @@ export type TimelineData = {|
   startTime: number,
   suspenseEvents: SuspenseEvent[],
   thrownErrors: ThrownError[],
-|};
+};
 
-export type TimelineDataExport = {|
+export type TimelineDataExport = {
   batchUIDToMeasuresKeyValueArray: Array<[BatchUID, ReactMeasure[]]>,
   componentMeasures: ReactComponentMeasure[],
   duration: number,
@@ -238,9 +238,9 @@ export type TimelineDataExport = {|
   startTime: number,
   suspenseEvents: SuspenseEvent[],
   thrownErrors: ThrownError[],
-|};
+};
 
-export type ReactEventInfo = {|
+export type ReactEventInfo = {
   componentMeasure: ReactComponentMeasure | null,
   flamechartStackFrame: FlamechartStackFrame | null,
   measure: ReactMeasure | null,
@@ -251,4 +251,4 @@ export type ReactEventInfo = {|
   snapshot: Snapshot | null,
   thrownError: ThrownError | null,
   userTimingMark: UserTimingMark | null,
-|};
+};
diff --git a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
index 2a36396b8fab..f2559364f55f 100644
--- a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
+++ b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
@@ -16,11 +16,11 @@ export default function useSmartTooltip({
   canvasRef,
   mouseX,
   mouseY,
-}: {|
-  canvasRef: {|current: HTMLCanvasElement | null|},
+}: {
+  canvasRef: {current: HTMLCanvasElement | null},
   mouseX: number,
   mouseY: number,
-|}) {
+}) {
   const ref = useRef<HTMLElement | null>(null);
 
   // HACK: Browser extension reports window.innerHeight of 0,
diff --git a/packages/react-devtools-timeline/src/view-base/Surface.js b/packages/react-devtools-timeline/src/view-base/Surface.js
index 48cebd9cf1b6..04157cbd5485 100644
--- a/packages/react-devtools-timeline/src/view-base/Surface.js
+++ b/packages/react-devtools-timeline/src/view-base/Surface.js
@@ -16,10 +16,10 @@ import {View} from './View';
 import {zeroPoint} from './geometry';
 import {DPR} from '../content-views/constants';
 
-export type ViewRefs = {|
+export type ViewRefs = {
   activeView: View | null,
   hoveredView: View | null,
-|};
+};
 
 // hidpi canvas: https://www.html5rocks.com/en/tutorials/canvas/hidpi/
 function configureRetinaCanvas(canvas, height, width) {
diff --git a/packages/react-devtools-timeline/src/view-base/geometry.js b/packages/react-devtools-timeline/src/view-base/geometry.js
index 054d8c3e75fe..ba731dc0c6b5 100644
--- a/packages/react-devtools-timeline/src/view-base/geometry.js
+++ b/packages/react-devtools-timeline/src/view-base/geometry.js
@@ -7,9 +7,9 @@
  * @flow
  */
 
-export type Point = $ReadOnly<{|x: number, y: number|}>;
-export type Size = $ReadOnly<{|width: number, height: number|}>;
-export type IntrinsicSize = {|
+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,
@@ -18,8 +18,8 @@ export type IntrinsicSize = {|
 
   // 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|}>;
+};
+export type Rect = $ReadOnly<{origin: Point, size: Size}>;
 
 /**
  * Alternative representation of `Rect`.
diff --git a/packages/react-devtools-timeline/src/view-base/layouter.js b/packages/react-devtools-timeline/src/view-base/layouter.js
index 8f6341270e06..2021d69c1732 100644
--- a/packages/react-devtools-timeline/src/view-base/layouter.js
+++ b/packages/react-devtools-timeline/src/view-base/layouter.js
@@ -10,7 +10,7 @@
 import type {Rect} from './geometry';
 import type {View} from './View';
 
-export type LayoutInfo = {|view: View, frame: Rect|};
+export type LayoutInfo = {view: View, frame: Rect};
 export type Layout = LayoutInfo[];
 
 /**
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
index 36b8f201e470..6af75bb0587a 100644
--- a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
+++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
@@ -26,17 +26,17 @@ import {rectContainsPoint} from '../geometry';
 import {noopLayout} from '../layouter';
 import {clamp} from '../utils/clamp';
 
-type ResizingState = $ReadOnly<{|
+type ResizingState = $ReadOnly<{
   /** Distance between top of resize bar and mouseY */
   cursorOffsetInBarFrame: number,
   /** Mouse's vertical coordinates relative to canvas */
   mouseY: number,
-|}>;
+}>;
 
-type LayoutState = {|
+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;
@@ -47,7 +47,7 @@ const HIDDEN_RECT = {
 };
 
 export class ResizableView extends View {
-  _canvasRef: {|current: HTMLCanvasElement | null|};
+  _canvasRef: {current: HTMLCanvasElement | null};
   _layoutState: LayoutState;
   _mutableViewStateKey: string;
   _resizeBar: ResizeBarView;
@@ -60,7 +60,7 @@ export class ResizableView extends View {
     frame: Rect,
     subview: View,
     viewState: ViewState,
-    canvasRef: {|current: HTMLCanvasElement | null|},
+    canvasRef: {current: HTMLCanvasElement | null},
     label: string,
   ) {
     super(surface, frame, noopLayout);
diff --git a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
index f22d8d7211f9..367569e65a6a 100644
--- a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
+++ b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js
@@ -13,73 +13,73 @@ import type {Point} from './geometry';
 import {useEffect, useRef} from 'react';
 import {normalizeWheel} from './utils/normalizeWheel';
 
-export type ClickInteraction = {|
+export type ClickInteraction = {
   type: 'click',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type DoubleClickInteraction = {|
+  },
+};
+export type DoubleClickInteraction = {
   type: 'double-click',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type MouseDownInteraction = {|
+  },
+};
+export type MouseDownInteraction = {
   type: 'mousedown',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type MouseMoveInteraction = {|
+  },
+};
+export type MouseMoveInteraction = {
   type: 'mousemove',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type MouseUpInteraction = {|
+  },
+};
+export type MouseUpInteraction = {
   type: 'mouseup',
-  payload: {|
+  payload: {
     event: MouseEvent,
     location: Point,
-  |},
-|};
-export type WheelPlainInteraction = {|
+  },
+};
+export type WheelPlainInteraction = {
   type: 'wheel-plain',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
-export type WheelWithShiftInteraction = {|
+  },
+};
+export type WheelWithShiftInteraction = {
   type: 'wheel-shift',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
-export type WheelWithControlInteraction = {|
+  },
+};
+export type WheelWithControlInteraction = {
   type: 'wheel-control',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
-export type WheelWithMetaInteraction = {|
+  },
+};
+export type WheelWithMetaInteraction = {
   type: 'wheel-meta',
-  payload: {|
+  payload: {
     event: WheelEvent,
     location: Point,
     delta: NormalizedWheelDelta,
-  |},
-|};
+  },
+};
 
 export type Interaction =
   | ClickInteraction
@@ -112,7 +112,7 @@ function cacheFirstGetCanvasBoundingRect(
 }
 
 export function useCanvasInteraction(
-  canvasRef: {|current: HTMLCanvasElement | null|},
+  canvasRef: {current: HTMLCanvasElement | null},
   interactor: (interaction: Interaction) => void,
 ) {
   const isMouseDownRef = useRef<boolean>(false);
diff --git a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
index 89de907562d1..82fe9ec35c0e 100644
--- a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
+++ b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js
@@ -9,10 +9,10 @@
 
 // Adapted from: https://github.com/facebookarchive/fixed-data-table/blob/main/src/vendor_upstream/dom/normalizeWheel.js
 
-export type NormalizedWheelDelta = {|
+export type NormalizedWheelDelta = {
   deltaX: number,
   deltaY: number,
-|};
+};
 
 // Reasonable defaults
 const LINE_HEIGHT = 40;
diff --git a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
index 8089c81e3192..5c59682952bc 100644
--- a/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
+++ b/packages/react-devtools-timeline/src/view-base/utils/scrollState.js
@@ -18,10 +18,10 @@ import {clamp} from './clamp';
  *     |<-------------------length------------------->|
  * ```
  */
-export type ScrollState = {|
+export type ScrollState = {
   offset: number,
   length: number,
-|};
+};
 
 function clampOffset(state: ScrollState, containerLength: number): ScrollState {
   return {
@@ -35,12 +35,12 @@ function clampLength({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {|
+}: {
   state: ScrollState,
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-|}): ScrollState {
+}): ScrollState {
   return {
     offset: state.offset,
     length: clamp(
@@ -62,12 +62,12 @@ export function clampState({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {|
+}: {
   state: ScrollState,
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-|}): ScrollState {
+}): ScrollState {
   return clampOffset(
     clampLength({
       state,
@@ -83,11 +83,11 @@ export function translateState({
   state,
   delta,
   containerLength,
-}: {|
+}: {
   state: ScrollState,
   delta: number,
   containerLength: number,
-|}): ScrollState {
+}): ScrollState {
   return clampOffset(
     {
       offset: state.offset + delta,
@@ -119,7 +119,7 @@ export function zoomState({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {|
+}: {
   state: ScrollState,
   multiplier: number,
   fixedPoint: number,
@@ -127,7 +127,7 @@ export function zoomState({
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-|}): ScrollState {
+}): 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).
 
@@ -164,7 +164,7 @@ export function moveStateToRange({
   minContentLength,
   maxContentLength,
   containerLength,
-}: {|
+}: {
   state: ScrollState,
   rangeStart: number,
   rangeEnd: number,
@@ -173,7 +173,7 @@ export function moveStateToRange({
   minContentLength: number,
   maxContentLength: number,
   containerLength: number,
-|}): ScrollState {
+}): 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).
 
diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
index 0fd0cd159978..6ec1b6f2ee62 100644
--- a/packages/react-dom/src/client/ReactDOMEventHandle.js
+++ b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -29,9 +29,9 @@ import {
   enableCreateEventHandleAPI,
 } from 'shared/ReactFeatureFlags';
 
-type EventHandleOptions = {|
+type EventHandleOptions = {
   capture?: boolean,
-|};
+};
 
 function isValidEventTarget(target: EventTarget | ReactScopeInstance): boolean {
   return typeof (target: Object).addEventListener === 'function';
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 11f527ad583d..4510efe2b892 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -126,12 +126,12 @@ export type UpdatePayload = Array<mixed>;
 export type ChildSet = void; // Unused
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
-export type RendererInspectionConfig = $ReadOnly<{||}>;
+export type RendererInspectionConfig = $ReadOnly<{}>;
 
-type SelectionInformation = {|
+type SelectionInformation = {
   focusedElem: null | HTMLElement,
   selectionRange: mixed,
-|};
+};
 
 const SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
 
@@ -733,7 +733,7 @@ export function isSuspenseInstanceFallback(instance: SuspenseInstance) {
 
 export function getSuspenseInstanceFallbackErrorDetails(
   instance: SuspenseInstance,
-): {|digest: ?string, message?: string, stack?: string|} {
+): {digest: ?string, message?: string, stack?: string} {
   const dataset =
     instance.nextSibling && ((instance.nextSibling: any): HTMLElement).dataset;
   let digest, message, stack;
@@ -1320,20 +1320,20 @@ export function setFocusIfFocusable(node: Instance): boolean {
   return didFocus;
 }
 
-type RectRatio = {|
+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, {
diff --git a/packages/react-dom/src/client/ReactDOMSelect.js b/packages/react-dom/src/client/ReactDOMSelect.js
index ece9275e4b37..57f53b5206a8 100644
--- a/packages/react-dom/src/client/ReactDOMSelect.js
+++ b/packages/react-dom/src/client/ReactDOMSelect.js
@@ -21,9 +21,9 @@ if (__DEV__) {
   didWarnValueDefaultValue = false;
 }
 
-type SelectWithWrapperState = HTMLSelectElement & {|
-  _wrapperState: {|wasMultiple: boolean|},
-|};
+type SelectWithWrapperState = HTMLSelectElement & {
+  _wrapperState: {wasMultiple: boolean},
+};
 
 function getDeclarationErrorAddendum() {
   const ownerName = getCurrentFiberOwnerNameInDevOrNull();
diff --git a/packages/react-dom/src/client/ReactDOMTextarea.js b/packages/react-dom/src/client/ReactDOMTextarea.js
index 6834b16e4e97..065f76d16c12 100644
--- a/packages/react-dom/src/client/ReactDOMTextarea.js
+++ b/packages/react-dom/src/client/ReactDOMTextarea.js
@@ -17,9 +17,9 @@ import {disableTextareaChildren} from 'shared/ReactFeatureFlags';
 
 let didWarnValDefaultVal = false;
 
-type TextAreaWithWrapperState = HTMLTextAreaElement & {|
-  _wrapperState: {|initialValue: ToStringValue|},
-|};
+type TextAreaWithWrapperState = HTMLTextAreaElement & {
+  _wrapperState: {initialValue: ToStringValue},
+};
 
 /**
  * Implements a <textarea> host component that allows setting `value`, and
diff --git a/packages/react-dom/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js
index 499c9aa97ecc..6bec33f9b043 100644
--- a/packages/react-dom/src/client/inputValueTracking.js
+++ b/packages/react-dom/src/client/inputValueTracking.js
@@ -9,11 +9,11 @@
 
 import {checkFormFieldValueStringCoercion} from 'shared/CheckStringCoercion';
 
-type ValueTracker = {|
+type ValueTracker = {
   getValue(): string,
   setValue(value: string): void,
   stopTracking(): void,
-|};
+};
 type WrapperState = {_valueTracker?: ?ValueTracker, ...};
 type ElementWithValueTracker = HTMLInputElement & WrapperState;
 
diff --git a/packages/react-dom/src/events/DOMPluginEventSystem.js b/packages/react-dom/src/events/DOMPluginEventSystem.js
index e52b128c11da..0b1f1c498e02 100644
--- a/packages/react-dom/src/events/DOMPluginEventSystem.js
+++ b/packages/react-dom/src/events/DOMPluginEventSystem.js
@@ -72,16 +72,16 @@ import * as EnterLeaveEventPlugin from './plugins/EnterLeaveEventPlugin';
 import * as SelectEventPlugin from './plugins/SelectEventPlugin';
 import * as SimpleEventPlugin from './plugins/SimpleEventPlugin';
 
-type DispatchListener = {|
+type DispatchListener = {
   instance: null | Fiber,
   listener: Function,
   currentTarget: EventTarget,
-|};
+};
 
-type DispatchEntry = {|
+type DispatchEntry = {
   event: ReactSyntheticEvent,
   listeners: Array<DispatchListener>,
-|};
+};
 
 export type DispatchQueue = Array<DispatchEntry>;
 
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index a5d669732b4a..f60208d650c4 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -90,13 +90,13 @@ type PointerEvent = Event & {
   ...
 };
 
-type QueuedReplayableEvent = {|
+type QueuedReplayableEvent = {
   blockedOn: null | Container | SuspenseInstance,
   domEventName: DOMEventName,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
   targetContainers: Array<EventTarget>,
-|};
+};
 
 let hasScheduledReplayAttempt = false;
 
@@ -115,11 +115,11 @@ const queuedPointers: Map<number, QueuedReplayableEvent> = new Map();
 const queuedPointerCaptures: Map<number, QueuedReplayableEvent> = new Map();
 // We could consider replaying selectionchange and touchmoves too.
 
-type QueuedHydrationTarget = {|
+type QueuedHydrationTarget = {
   blockedOn: null | Container | SuspenseInstance,
   target: Node,
   priority: EventPriority,
-|};
+};
 const queuedExplicitHydrationTargets: Array<QueuedHydrationTarget> = [];
 
 export function hasQueuedDiscreteEvents(): boolean {
diff --git a/packages/react-dom/src/events/ReactSyntheticEventType.js b/packages/react-dom/src/events/ReactSyntheticEventType.js
index 92ab3f94c584..b9ee79761778 100644
--- a/packages/react-dom/src/events/ReactSyntheticEventType.js
+++ b/packages/react-dom/src/events/ReactSyntheticEventType.js
@@ -11,16 +11,16 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {DOMEventName} from './DOMEventNames';
 
-export type DispatchConfig = {|
+export type DispatchConfig = {
   dependencies?: Array<DOMEventName>,
-  phasedRegistrationNames: {|
+  phasedRegistrationNames: {
     bubbled: null | string,
     captured: null | string,
-  |},
+  },
   registrationName?: string,
-|};
+};
 
-type BaseSyntheticEvent = {|
+type BaseSyntheticEvent = {
   isPersistent: () => boolean,
   isPropagationStopped: () => boolean,
   _dispatchInstances?: null | Array<Fiber | null> | Fiber,
@@ -31,14 +31,14 @@ type BaseSyntheticEvent = {|
   relatedTarget?: mixed,
   type: string,
   currentTarget: null | EventTarget,
-|};
+};
 
-export type KnownReactSyntheticEvent = BaseSyntheticEvent & {|
+export type KnownReactSyntheticEvent = BaseSyntheticEvent & {
   _reactName: string,
-|};
-export type UnknownReactSyntheticEvent = BaseSyntheticEvent & {|
+};
+export type UnknownReactSyntheticEvent = BaseSyntheticEvent & {
   _reactName: null,
-|};
+};
 
 export type ReactSyntheticEvent =
   | KnownReactSyntheticEvent
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
index 953c31602f49..758f35058aaa 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js
@@ -24,7 +24,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
@@ -34,12 +34,12 @@ type Options = {|
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
-|};
+};
 
 // TODO: Move to sub-classing ReadableStream.
-type ReactDOMServerReadableStream = ReadableStream & {|
+type ReactDOMServerReadableStream = ReadableStream & {
   allReady: Promise<void>,
-|};
+};
 
 function renderToReadableStream(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index 6790c44bccac..facfe3f80c33 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -34,7 +34,7 @@ function createAbortHandler(request, reason) {
   return () => abort(request, new Error(reason));
 }
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   nonce?: string,
@@ -46,14 +46,14 @@ type Options = {|
   onShellError?: (error: mixed) => void,
   onAllReady?: () => void,
   onError?: (error: mixed) => ?string,
-|};
+};
 
-type PipeableStream = {|
+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) {
   return createRequest(
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
index c2c619046dff..f52901fb320e 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js
@@ -24,7 +24,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
@@ -33,11 +33,11 @@ type Options = {|
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
-|};
+};
 
-type StaticResult = {|
+type StaticResult = {
   prelude: ReadableStream,
-|};
+};
 
 function prerender(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
index b5f0022d1295..ba9b6a1fbba7 100644
--- a/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzStaticNode.js
@@ -26,7 +26,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   namespaceURI?: string,
   bootstrapScriptContent?: string,
@@ -35,11 +35,11 @@ type Options = {|
   progressiveChunkSize?: number,
   signal?: AbortSignal,
   onError?: (error: mixed) => ?string,
-|};
+};
 
-type StaticResult = {|
+type StaticResult = {
   prelude: Readable,
-|};
+};
 
 function createFakeWritable(readable): Writable {
   // The current host config expects a Writable so we create
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
index f1ca01de6b71..71786e4b5078 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerBrowser.js
@@ -11,9 +11,9 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {version, renderToStringImpl} from './ReactDOMLegacyServerImpl';
 
-type ServerOptions = {|
+type ServerOptions = {
   identifierPrefix?: string,
-|};
+};
 
 function renderToString(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
index acb0a3c1c04f..504201f3c24f 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerImpl.js
@@ -23,9 +23,9 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerLegacyFormatConfig';
 
-type ServerOptions = {|
+type ServerOptions = {
   identifierPrefix?: string,
-|};
+};
 
 function onError() {
   // Non-fatal errors are ignored.
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
index 7c38c23101dc..20e89de8b430 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNode.js
@@ -15,9 +15,9 @@ import {
   renderToStaticNodeStream,
 } from './ReactDOMLegacyServerNodeStream';
 
-type ServerOptions = {|
+type ServerOptions = {
   identifierPrefix?: string,
-|};
+};
 
 function renderToString(
   children: ReactNodeList,
diff --git a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
index 28bfadd240b3..25b88156e075 100644
--- a/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
+++ b/packages/react-dom/src/server/ReactDOMLegacyServerNodeStream.js
@@ -25,9 +25,9 @@ import {
 
 import {Readable} from 'stream';
 
-type ServerOptions = {|
+type ServerOptions = {
   identifierPrefix?: string,
-|};
+};
 
 class ReactMarkupReadableStream extends Readable {
   request: Request;
diff --git a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
index b24edf264c6f..c30d9673265c 100644
--- a/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerFormatConfig.js
@@ -105,10 +105,10 @@ const scriptRegex = /(<\/|<)(s)(cript)/gi;
 const scriptReplacer = (match, prefix, s, suffix) =>
   `${prefix}${s === 's' ? '\\u0073' : '\\u0053'}${suffix}`;
 
-export type BootstrapScriptDescriptor = {|
+export type BootstrapScriptDescriptor = {
   src: string,
   integrity?: string,
-|};
+};
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(
   identifierPrefix: string | void,
@@ -203,10 +203,10 @@ const HTML_COLGROUP_MODE = 7;
 type InsertionMode = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 
 // Lets us keep track of contextual state and pick it back up after suspending.
-export type FormatContext = {|
+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>
-|};
+};
 
 function createFormatContext(
   insertionMode: InsertionMode,
diff --git a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
index 29a4793c963b..375562e80b56 100644
--- a/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
+++ b/packages/react-dom/src/server/ReactDOMServerLegacyFormatConfig.js
@@ -28,7 +28,7 @@ import type {
 
 export const isPrimaryRenderer = false;
 
-export type ResponseState = {|
+export type ResponseState = {
   // Keep this in sync with ReactDOMServerFormatConfig
   bootstrapChunks: Array<Chunk | PrecomputedChunk>,
   startInlineScript: PrecomputedChunk,
@@ -42,7 +42,7 @@ export type ResponseState = {|
   sentClientRenderFunction: boolean,
   // This is an extra field for the legacy renderer
   generateStaticMarkup: boolean,
-|};
+};
 
 export function createResponseState(
   generateStaticMarkup: boolean,
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index f1d4ec132ea0..09f1dd2b66a3 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -48,7 +48,7 @@ export const NUMERIC = 5;
 // When falsy, it should be removed.
 export const POSITIVE_NUMERIC = 6;
 
-export type PropertyInfo = {|
+export type PropertyInfo = {
   +acceptsBooleans: boolean,
   +attributeName: string,
   +attributeNamespace: string | null,
@@ -57,7 +57,7 @@ export type PropertyInfo = {|
   +type: PropertyType,
   +sanitizeURL: boolean,
   +removeEmptyString: boolean,
-|};
+};
 
 /* eslint-disable max-len */
 export const ATTRIBUTE_NAME_START_CHAR =
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index 4e2eddb9a0d7..56f49e635897 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -15,8 +15,8 @@ export type ReactDOMEventHandle = (
   callback: (SyntheticEvent<EventTarget>) => void,
 ) => () => void;
 
-export type ReactDOMEventHandleListener = {|
+export type ReactDOMEventHandleListener = {
   callback: (SyntheticEvent<EventTarget>) => void,
   capture: boolean,
   type: DOMEventName,
-|};
+};
diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js
index 473a875c30b1..3bba1e31b6f9 100644
--- a/packages/react-fetch/src/ReactFetchBrowser.js
+++ b/packages/react-fetch/src/ReactFetchBrowser.js
@@ -15,20 +15,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord = {|
+type ResolvedRecord = {
   status: 1,
   value: mixed,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js
index 9020529d440d..c689c08a70d9 100644
--- a/packages/react-fetch/src/ReactFetchNode.js
+++ b/packages/react-fetch/src/ReactFetchNode.js
@@ -13,7 +13,7 @@ import * as http from 'http';
 import * as https from 'https';
 import {unstable_getCacheForType} from 'react';
 
-type FetchResponse = {|
+type FetchResponse = {
   // Properties
   headers: any,
   ok: boolean,
@@ -27,7 +27,7 @@ type FetchResponse = {|
   blob(): any,
   json(): any,
   text(): string,
-|};
+};
 
 function nodeFetch(
   url: string,
@@ -58,20 +58,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord<V> = {|
+type ResolvedRecord<V> = {
   status: 1,
   value: V,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Record<V> = PendingRecord | ResolvedRecord<V> | RejectedRecord;
 
diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js
index acbe599010a9..782d35728c40 100644
--- a/packages/react-fs/src/ReactFilesystem.js
+++ b/packages/react-fs/src/ReactFilesystem.js
@@ -17,23 +17,23 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
   cache: null,
-|};
+};
 
-type ResolvedRecord<T> = {|
+type ResolvedRecord<T> = {
   status: 1,
   value: T,
   cache: null | Array<mixed>,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
   cache: null,
-|};
+};
 
 type Record<T> = PendingRecord | ResolvedRecord<T> | RejectedRecord;
 
@@ -128,7 +128,7 @@ function createLstatMap(): Map<string, Array<boolean | Record<mixed>>> {
   return new Map();
 }
 
-export function lstat(path: string, options?: {|bigint?: boolean|}): mixed {
+export function lstat(path: string, options?: {bigint?: boolean}): mixed {
   checkPathInDev(path);
   let bigint = false;
   if (options && options.bigint) {
@@ -167,7 +167,7 @@ function createReaddirMap(): Map<
 
 export function readdir(
   path: string,
-  options?: string | {|encoding?: string, withFileTypes?: boolean|},
+  options?: string | {encoding?: string, withFileTypes?: boolean},
 ): mixed {
   checkPathInDev(path);
   let encoding = 'utf8';
@@ -215,12 +215,12 @@ export function readFile(
   path: string,
   options:
     | string
-    | {|
+    | {
         encoding?: string | null,
         // Unsupported:
         flag?: string, // Doesn't make sense except "r"
         signal?: mixed, // We'll have our own signal
-      |},
+      },
 ): string | Buffer {
   checkPathInDev(path);
   const map = unstable_getCacheForType(createReadFileMap);
@@ -270,7 +270,7 @@ function createReadlinkMap(): Map<string, Array<string | Record<mixed>>> {
 
 export function readlink(
   path: string,
-  options?: string | {|encoding?: string|},
+  options?: string | {encoding?: string},
 ): mixed {
   checkPathInDev(path);
   let encoding = 'utf8';
@@ -311,7 +311,7 @@ function createRealpathMap(): Map<string, Array<string | Record<mixed>>> {
 
 export function realpath(
   path: string,
-  options?: string | {|encoding?: string|},
+  options?: string | {encoding?: string},
 ): mixed {
   checkPathInDev(path);
   let encoding = 'utf8';
@@ -350,7 +350,7 @@ function createStatMap(): Map<string, Array<boolean | Record<mixed>>> {
   return new Map();
 }
 
-export function stat(path: string, options?: {|bigint?: boolean|}): mixed {
+export function stat(path: string, options?: {bigint?: boolean}): mixed {
   checkPathInDev(path);
   let bigint = false;
   if (options && options.bigint) {
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
index 4f988293db93..c6aa7829921a 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/Focus.js
@@ -14,15 +14,15 @@ const {useCallback, useEffect, useLayoutEffect, useRef} = React;
 
 type FocusEvent = SyntheticEvent<EventTarget>;
 
-type UseFocusOptions = {|
+type UseFocusOptions = {
   disabled?: boolean,
   onBlur?: ?(FocusEvent) => void,
   onFocus?: ?(FocusEvent) => void,
   onFocusChange?: ?(boolean) => void,
   onFocusVisibleChange?: ?(boolean) => void,
-|};
+};
 
-type UseFocusWithinOptions = {|
+type UseFocusWithinOptions = {
   disabled?: boolean,
   onAfterBlurWithin?: FocusEvent => void,
   onBeforeBlurWithin?: FocusEvent => void,
@@ -30,7 +30,7 @@ type UseFocusWithinOptions = {|
   onFocusWithin?: FocusEvent => void,
   onFocusWithinChange?: boolean => void,
   onFocusWithinVisibleChange?: boolean => void,
-|};
+};
 
 const isMac =
   typeof window !== 'undefined' && window.navigator != null
@@ -154,7 +154,7 @@ function useFocusLifecycles() {
 }
 
 export function useFocus(
-  focusTargetRef: {|current: null | Node|},
+  focusTargetRef: {current: null | Node},
   {
     disabled,
     onBlur,
@@ -164,10 +164,10 @@ export function useFocus(
   }: UseFocusOptions,
 ): void {
   // Setup controlled state for this useFocus hook
-  const stateRef = useRef<null | {|
+  const stateRef = useRef<null | {
     isFocused: boolean,
     isFocusVisible: boolean,
-  |}>({isFocused: false, isFocusVisible: false});
+  }>({isFocused: false, isFocusVisible: false});
   const focusHandle = useEvent('focusin');
   const blurHandle = useEvent('focusout');
   const focusVisibleHandles = useFocusVisibleInputHandles();
@@ -249,7 +249,7 @@ export function useFocus(
 
 export function useFocusWithin<T>(
   focusWithinTargetRef:
-    | {|current: null | T|}
+    | {current: null | T}
     | ((focusWithinTarget: null | T) => void),
   {
     disabled,
@@ -262,10 +262,10 @@ export function useFocusWithin<T>(
   }: UseFocusWithinOptions,
 ): (focusWithinTarget: null | T) => void {
   // Setup controlled state for this useFocus hook
-  const stateRef = useRef<null | {|
+  const stateRef = useRef<null | {
     isFocused: boolean,
     isFocusVisible: boolean,
-  |}>({isFocused: false, isFocusVisible: false});
+  }>({isFocused: false, isFocusVisible: false});
   const focusHandle = useEvent('focusin');
   const blurHandle = useEvent('focusout');
   const afterBlurHandle = useEvent('afterblur');
diff --git a/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js b/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js
index 80a20e5faf56..a72cd26ee1e6 100644
--- a/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js
+++ b/packages/react-interactions/events/src/dom/create-event-handle/useEvent.js
@@ -13,19 +13,19 @@ import * as ReactDOM from 'react-dom';
 const {useLayoutEffect, useRef} = React;
 const {unstable_createEventHandle} = ReactDOM;
 
-type UseEventHandle = {|
+type UseEventHandle = {
   setListener: (
     target: EventTarget,
     null | ((SyntheticEvent<EventTarget>) => void),
   ) => void,
   clear: () => void,
-|};
+};
 
 export default function useEvent(
   event: string,
-  options?: {|
+  options?: {
     capture?: boolean,
-  |},
+  },
 ): UseEventHandle {
   const handleRef = useRef<UseEventHandle | null>(null);
   let useEventHandle = handleRef.current;
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index febd24aaf3c9..3ae1d00e2717 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -75,15 +75,15 @@ export type HydratableInstance = Instance | TextInstance;
 export type PublicInstance = ReactFabricHostComponent;
 export type Container = number;
 export type ChildSet = Object;
-export type HostContext = $ReadOnly<{|
+export type HostContext = $ReadOnly<{
   isInAParentText: boolean,
-|}>;
+}>;
 export type UpdatePayload = Object;
 
 export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 
-export type RendererInspectionConfig = $ReadOnly<{|
+export type RendererInspectionConfig = $ReadOnly<{
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
   getInspectorDataForViewTag?: (tag: number) => Object,
   getInspectorDataForViewAtPoint?: (
@@ -92,29 +92,29 @@ export type RendererInspectionConfig = $ReadOnly<{|
     locationY: number,
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ) => void,
-|}>;
+}>;
 
 // TODO?: find a better place for this type to live
-export type EventListenerOptions = $ReadOnly<{|
+export type EventListenerOptions = $ReadOnly<{
   capture?: boolean,
   once?: boolean,
   passive?: boolean,
   signal: mixed, // not yet implemented
-|}>;
-export type EventListenerRemoveOptions = $ReadOnly<{|
+}>;
+export type EventListenerRemoveOptions = $ReadOnly<{
   capture?: boolean,
-|}>;
+}>;
 
 // TODO?: this will be changed in the future to be w3c-compatible and allow "EventListener" objects as well as functions.
 export type EventListener = Function;
 
-type InternalEventListeners = {|
-  [string]: {|
+type InternalEventListeners = {
+  [string]: {
     listener: EventListener,
     options: EventListenerOptions,
     invalidated: boolean,
-  |}[],
-|};
+  }[],
+};
 
 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 5b03399e103f..37e88d8b2747 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -35,16 +35,16 @@ export type Instance = ReactNativeFiberHostComponent;
 export type TextInstance = number;
 export type HydratableInstance = Instance | TextInstance;
 export type PublicInstance = Instance;
-export type HostContext = $ReadOnly<{|
+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 RendererInspectionConfig = $ReadOnly<{|
+export type RendererInspectionConfig = $ReadOnly<{
   // Deprecated. Replaced with getInspectorDataForViewAtPoint.
   getInspectorDataForViewTag?: (tag: number) => Object,
   getInspectorDataForViewAtPoint?: (
@@ -53,7 +53,7 @@ export type RendererInspectionConfig = $ReadOnly<{|
     locationY: number,
     callback: (viewData: TouchedViewDataAtPoint) => mixed,
   ) => void,
-|}>;
+}>;
 
 const UPDATE_SIGNAL = {};
 if (__DEV__) {
diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
index 30583e45ae85..5eef1a6dff9c 100644
--- a/packages/react-native-renderer/src/ReactNativeTypes.js
+++ b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -35,10 +35,10 @@ export type MeasureLayoutOnSuccessCallback = (
 
 export type AttributeType<T, V> =
   | true
-  | $ReadOnly<{|
+  | $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
@@ -62,40 +62,40 @@ export type PartialAttributeConfiguration = $ReadOnly<{
   ...
 }>;
 
-export type ViewConfig = $ReadOnly<{|
+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<{|
+    [eventName: string]: $ReadOnly<{
+      phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
         skipBubbling?: ?boolean,
-      |}>,
-    |}>,
+      }>,
+    }>,
     ...,
   }>,
   directEventTypes?: $ReadOnly<{
-    [eventName: string]: $ReadOnly<{|
+    [eventName: string]: $ReadOnly<{
       registrationName: string,
-    |}>,
+    }>,
     ...,
   }>,
   uiViewClassName: string,
   validAttributes: AttributeConfiguration,
-|}>;
+}>;
 
-export type PartialViewConfig = $ReadOnly<{|
+export type PartialViewConfig = $ReadOnly<{
   bubblingEventTypes?: $PropertyType<ViewConfig, 'bubblingEventTypes'>,
   directEventTypes?: $PropertyType<ViewConfig, 'directEventTypes'>,
   uiViewClassName: string,
   validAttributes?: PartialAttributeConfiguration,
-|}>;
+}>;
 
-export type NativeMethods = $ReadOnly<{|
+export type NativeMethods = $ReadOnly<{
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
@@ -106,7 +106,7 @@ export type NativeMethods = $ReadOnly<{|
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
-|}>;
+}>;
 
 export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
 
@@ -122,43 +122,43 @@ type InspectorDataProps = $ReadOnly<{
   ...,
 }>;
 
-type InspectorDataSource = $ReadOnly<{|
+type InspectorDataSource = $ReadOnly<{
   fileName?: string,
   lineNumber?: number,
-|}>;
+}>;
 
 type InspectorDataGetter = (
   <TElementType: ElementType>(
     componentOrHandle: ElementRef<TElementType> | number,
   ) => ?number,
-) => $ReadOnly<{|
+) => $ReadOnly<{
   measure: (callback: MeasureOnSuccessCallback) => void,
   props: InspectorDataProps,
   source: InspectorDataSource,
-|}>;
+}>;
 
-export type InspectorData = $ReadOnly<{|
-  hierarchy: Array<{|
+export type InspectorData = $ReadOnly<{
+  hierarchy: Array<{
     name: ?string,
     getInspectorData: InspectorDataGetter,
-  |}>,
+  }>,
   selectedIndex: ?number,
   props: InspectorDataProps,
   source: ?InspectorDataSource,
-|}>;
+}>;
 
-export type TouchedViewDataAtPoint = $ReadOnly<{|
+export type TouchedViewDataAtPoint = $ReadOnly<{
   pointerY: number,
   touchedViewTag?: number,
   closestInstance?: mixed,
-  frame: $ReadOnly<{|
+  frame: $ReadOnly<{
     top: number,
     left: number,
     width: number,
     height: number,
-  |}>,
+  }>,
   ...InspectorData,
-|}>;
+}>;
 
 /**
  * Flat ReactNative renderer bundles are too big for Flow to parse efficiently.
@@ -268,18 +268,18 @@ export type LayoutAnimationProperty =
   | 'scaleY'
   | 'scaleXY';
 
-export type LayoutAnimationAnimationConfig = $ReadOnly<{|
+export type LayoutAnimationAnimationConfig = $ReadOnly<{
   duration?: number,
   delay?: number,
   springDamping?: number,
   initialVelocity?: number,
   type?: LayoutAnimationType,
   property?: LayoutAnimationProperty,
-|}>;
+}>;
 
-export type LayoutAnimationConfig = $ReadOnly<{|
+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/deepDiffer.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
index 8bc969ffb652..0f228ba8ed2e 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/deepDiffer.js
@@ -10,7 +10,7 @@
 
 'use strict';
 
-type Options = {|+unsafelyIgnoreFunctions?: boolean|};
+type Options = {+unsafelyIgnoreFunctions?: boolean};
 
 /*
  * @returns {bool} true if different, false if equal
diff --git a/packages/react-native-renderer/src/legacy-events/PluginModuleType.js b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
index 5790a10dcf15..9488629dca6d 100644
--- a/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
+++ b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js
@@ -22,7 +22,7 @@ export type PluginName = string;
 
 export type EventSystemFlags = number;
 
-export type LegacyPluginModule<NativeEvent> = {|
+export type LegacyPluginModule<NativeEvent> = {
   eventTypes: EventTypes,
   extractEvents: (
     topLevelType: TopLevelType,
@@ -33,4 +33,4 @@ export type LegacyPluginModule<NativeEvent> = {|
     container?: null | EventTarget,
   ) => ?ReactSyntheticEvent,
   tapMoveThreshold?: number,
-|};
+};
diff --git a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
index 436507b84ac1..cf2046977c0e 100644
--- a/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
+++ b/packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js
@@ -11,27 +11,27 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {TopLevelType} from './TopLevelEventTypes';
 
-export type DispatchConfig = {|
+export type DispatchConfig = {
   dependencies?: Array<TopLevelType>,
-  phasedRegistrationNames: {|
+  phasedRegistrationNames: {
     bubbled: null | string,
     captured: null | string,
     skipBubbling?: ?boolean,
-  |},
+  },
   registrationName?: string,
-|};
+};
 
-export type CustomDispatchConfig = {|
-  phasedRegistrationNames: {|
+export type CustomDispatchConfig = {
+  phasedRegistrationNames: {
     bubbled: null,
     captured: null,
     skipBubbling?: ?boolean,
-  |},
+  },
   registrationName?: string,
   customEvent: true,
-|};
+};
 
-export type ReactSyntheticEvent = {|
+export type ReactSyntheticEvent = {
   dispatchConfig: DispatchConfig | CustomDispatchConfig,
   getPooled: (
     dispatchConfig: DispatchConfig | CustomDispatchConfig,
@@ -46,4 +46,4 @@ export type ReactSyntheticEvent = {|
   _targetInst: Fiber,
   type: string,
   currentTarget: null | EventTarget,
-|};
+};
diff --git a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
index af63b1fb21e2..dbca76d40179 100644
--- a/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
+++ b/packages/react-native-renderer/src/legacy-events/ResponderTouchHistoryStore.js
@@ -14,7 +14,7 @@ import {isStartish, isMoveish, isEndish} from './ResponderTopLevelEventTypes';
  * should typically only see IDs in the range of 1-20 because IDs get recycled
  * when touches end and start again.
  */
-type TouchRecord = {|
+type TouchRecord = {
   touchActive: boolean,
   startPageX: number,
   startPageY: number,
@@ -25,7 +25,7 @@ type TouchRecord = {|
   previousPageX: number,
   previousPageY: number,
   previousTimeStamp: number,
-|};
+};
 
 const MAX_TOUCH_BANK = 20;
 const touchBank: Array<TouchRecord> = [];
diff --git a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
index cb86b4628a17..92685d4f85be 100644
--- a/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
+++ b/packages/react-native-renderer/src/server/ReactNativeServerFormatConfig.js
@@ -58,9 +58,9 @@ const SUSPENSE_UPDATE_TO_CLIENT_RENDER = new Uint8Array(1);
 SUSPENSE_UPDATE_TO_CLIENT_RENDER[0] = SUSPENSE_UPDATE_TO_CLIENT_RENDER_TAG;
 
 // Per response,
-export type ResponseState = {|
+export type ResponseState = {
   nextSuspenseID: number,
-|};
+};
 
 // Allows us to keep track of what we've already written so we can refer back to it.
 export function createResponseState(): ResponseState {
diff --git a/packages/react-noop-renderer/src/ReactNoopServer.js b/packages/react-noop-renderer/src/ReactNoopServer.js
index e70de39ab386..7e0a33b97942 100644
--- a/packages/react-noop-renderer/src/ReactNoopServer.js
+++ b/packages/react-noop-renderer/src/ReactNoopServer.js
@@ -18,22 +18,22 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 
 import ReactFizzServer from 'react-server';
 
-type Instance = {|
+type Instance = {
   type: string,
   children: Array<Instance | TextInstance | SuspenseInstance>,
   prop: any,
   hidden: boolean,
-|};
+};
 
-type TextInstance = {|
+type TextInstance = {
   text: string,
   hidden: boolean,
-|};
+};
 
-type SuspenseInstance = {|
+type SuspenseInstance = {
   state: 'pending' | 'complete' | 'client-render',
   children: Array<Instance | TextInstance | SuspenseInstance>,
-|};
+};
 
 type Placeholder = {
   parent: Instance | SuspenseInstance,
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 858c562d48bf..f2b6fc8b255e 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -49,7 +49,7 @@ type Props = {
   top?: null | number,
   ...
 };
-type Instance = {|
+type Instance = {
   type: string,
   id: number,
   parent: number,
@@ -58,14 +58,14 @@ type Instance = {|
   prop: any,
   hidden: boolean,
   context: HostContext,
-|};
-type TextInstance = {|
+};
+type TextInstance = {
   text: string,
   id: number,
   parent: number,
   hidden: boolean,
   context: HostContext,
-|};
+};
 type HostContext = Object;
 type CreateRootOptions = {
   unstable_transitionCallbacks?: TransitionTracingCallbacks,
@@ -953,14 +953,14 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     flushWithHostCounters(
       fn: () => void,
     ):
-      | {|
+      | {
           hostDiffCounter: number,
           hostUpdateCounter: number,
-        |}
-      | {|
+        }
+      | {
           hostDiffCounter: number,
           hostCloneCounter: number,
-        |} {
+        } {
       hostDiffCounter = 0;
       hostUpdateCounter = 0;
       hostCloneCounter = 0;
diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js
index fc2302578878..85d840d0013f 100644
--- a/packages/react-pg/src/ReactPostgres.js
+++ b/packages/react-pg/src/ReactPostgres.js
@@ -17,20 +17,20 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type PendingRecord = {|
+type PendingRecord = {
   status: 0,
   value: Wakeable,
-|};
+};
 
-type ResolvedRecord = {|
+type ResolvedRecord = {
   status: 1,
   value: mixed,
-|};
+};
 
-type RejectedRecord = {|
+type RejectedRecord = {
   status: 2,
   value: mixed,
-|};
+};
 
 type Record = PendingRecord | ResolvedRecord | RejectedRecord;
 
diff --git a/packages/react-reconciler/src/ReactCapturedValue.js b/packages/react-reconciler/src/ReactCapturedValue.js
index 64b1f18515d5..abd76f03a013 100644
--- a/packages/react-reconciler/src/ReactCapturedValue.js
+++ b/packages/react-reconciler/src/ReactCapturedValue.js
@@ -11,12 +11,12 @@ import type {Fiber} from './ReactInternalTypes';
 
 import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
 
-export type CapturedValue<T> = {|
+export type CapturedValue<T> = {
   value: T,
   source: Fiber | null,
   stack: string | null,
   digest: string | null,
-|};
+};
 
 export function createCapturedValueAtFiber<T>(
   value: T,
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 268f8c02f825..2552ca7a4fa9 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -36,21 +36,21 @@ const AbortControllerLocal = enableCache
       }: AbortController)
   : (null: any);
 
-export type Cache = {|
+export type Cache = {
   controller: AbortControllerLocal,
   data: Map<() => mixed, mixed>,
   refCount: number,
-|};
+};
 
-export type CacheComponentState = {|
+export type CacheComponentState = {
   +parent: Cache,
   +cache: Cache,
-|};
+};
 
-export type SpawnedCachePool = {|
+export type SpawnedCachePool = {
   +parent: Cache,
   +pool: Cache,
-|};
+};
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index ff141e2389fe..1fd8c144bc5e 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -36,21 +36,21 @@ const AbortControllerLocal = enableCache
       }: AbortController)
   : (null: any);
 
-export type Cache = {|
+export type Cache = {
   controller: AbortControllerLocal,
   data: Map<() => mixed, mixed>,
   refCount: number,
-|};
+};
 
-export type CacheComponentState = {|
+export type CacheComponentState = {
   +parent: Cache,
   +cache: Cache,
-|};
+};
 
-export type SpawnedCachePool = {|
+export type SpawnedCachePool = {
   +parent: Cache,
   +pool: Cache,
-|};
+};
 
 // Intentionally not named imports because Rollup would
 // use dynamic dispatch for CommonJS interop named imports.
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
index d3e6996a49a2..a38d9aaecb8c 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@@ -125,7 +125,7 @@ import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.new';
 
 import assign from 'shared/assign';
 
-export type Update<State> = {|
+export type Update<State> = {
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
   eventTime: number,
@@ -136,21 +136,21 @@ export type Update<State> = {|
   callback: (() => mixed) | null,
 
   next: Update<State> | null,
-|};
+};
 
-export type SharedQueue<State> = {|
+export type SharedQueue<State> = {
   pending: Update<State> | null,
   lanes: Lanes,
   hiddenCallbacks: Array<() => mixed> | null,
-|};
+};
 
-export type UpdateQueue<State> = {|
+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;
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
index 38b43941fc1b..94908d61df5e 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
@@ -125,7 +125,7 @@ import {setIsStrictModeForDevtools} from './ReactFiberDevToolsHook.old';
 
 import assign from 'shared/assign';
 
-export type Update<State> = {|
+export type Update<State> = {
   // TODO: Temporary field. Will remove this by storing a map of
   // transition -> event time on the root.
   eventTime: number,
@@ -136,21 +136,21 @@ export type Update<State> = {|
   callback: (() => mixed) | null,
 
   next: Update<State> | null,
-|};
+};
 
-export type SharedQueue<State> = {|
+export type SharedQueue<State> = {
   pending: Update<State> | null,
   lanes: Lanes,
   hiddenCallbacks: Array<() => mixed> | null,
-|};
+};
 
-export type UpdateQueue<State> = {|
+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;
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index 0416cc28bbee..e49638978202 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -33,14 +33,14 @@ import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 
-export type ConcurrentUpdate = {|
+export type ConcurrentUpdate = {
   next: ConcurrentUpdate,
   lane: Lane,
-|};
+};
 
-type ConcurrentQueue = {|
+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)
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 5ad81a8ff3f3..7dd87358cf6a 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -33,14 +33,14 @@ import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
 
-export type ConcurrentUpdate = {|
+export type ConcurrentUpdate = {
   next: ConcurrentUpdate,
   lane: Lane,
-|};
+};
 
-type ConcurrentQueue = {|
+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)
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index ee3d118a4a5a..a87a4c27fd76 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -123,21 +123,21 @@ import {
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
-export type Update<S, A> = {|
+export type Update<S, A> = {
   lane: Lane,
   action: A,
   hasEagerState: boolean,
   eagerState: S | null,
   next: Update<S, A>,
-|};
+};
 
-export type UpdateQueue<S, A> = {|
+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;
@@ -145,36 +145,36 @@ if (__DEV__) {
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
-export type Hook = {|
+export type Hook = {
   memoizedState: any,
   baseState: any,
   baseQueue: Update<any, any> | null,
   queue: any,
   next: Hook | null,
-|};
+};
 
-export type Effect = {|
+export type Effect = {
   tag: HookFlags,
   create: () => (() => void) | void,
   destroy: (() => void) | void,
   deps: Array<mixed> | null,
   next: Effect,
-|};
+};
 
-type StoreInstance<T> = {|
+type StoreInstance<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-type StoreConsistencyCheck<T> = {|
+type StoreConsistencyCheck<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-export type FunctionComponentUpdateQueue = {|
+export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
-|};
+};
 
 type BasicStateAction<S> = (S => S) | S;
 
@@ -1031,14 +1031,14 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
-type MutableSourceMemoizedState<Source, Snapshot> = {|
-  refs: {|
+type MutableSourceMemoizedState<Source, Snapshot> = {
+  refs: {
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
     setSnapshot: Snapshot => void,
-  |},
+  },
   source: MutableSource<any>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-|};
+};
 
 function readFromUnsubscribedMutableSource<Source, Snapshot>(
   root: FiberRoot,
@@ -1651,7 +1651,7 @@ function getCallerStackFrame(): string {
     : stackFrames.slice(2, 3).join('\n');
 }
 
-function mountRef<T>(initialValue: T): {|current: T|} {
+function mountRef<T>(initialValue: T): {current: T} {
   const hook = mountWorkInProgressHook();
   if (enableUseRefAccessWarning) {
     if (__DEV__) {
@@ -1720,7 +1720,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
   }
 }
 
-function updateRef<T>(initialValue: T): {|current: T|} {
+function updateRef<T>(initialValue: T): {current: T} {
   const hook = updateWorkInProgressHook();
   return hook.memoizedState;
 }
@@ -1814,7 +1814,7 @@ function updateLayoutEffect(
 
 function imperativeHandleEffect<T>(
   create: () => T,
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
 ) {
   if (typeof ref === 'function') {
     const refCallback = ref;
@@ -1843,7 +1843,7 @@ function imperativeHandleEffect<T>(
 }
 
 function mountImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -1871,7 +1871,7 @@ function mountImperativeHandle<T>(
 }
 
 function updateImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -2615,7 +2615,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2669,7 +2669,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       mountHookTypesDev();
       return mountRef(initialValue);
@@ -2767,7 +2767,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2817,7 +2817,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return mountRef(initialValue);
@@ -2915,7 +2915,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2965,7 +2965,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3064,7 +3064,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3114,7 +3114,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3216,7 +3216,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3271,7 +3271,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -3391,7 +3391,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3446,7 +3446,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
@@ -3567,7 +3567,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3622,7 +3622,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index aaa5ed306e42..0ee167366352 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -123,21 +123,21 @@ import {
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
-export type Update<S, A> = {|
+export type Update<S, A> = {
   lane: Lane,
   action: A,
   hasEagerState: boolean,
   eagerState: S | null,
   next: Update<S, A>,
-|};
+};
 
-export type UpdateQueue<S, A> = {|
+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;
@@ -145,36 +145,36 @@ if (__DEV__) {
   didWarnAboutMismatchedHooksForComponent = new Set();
 }
 
-export type Hook = {|
+export type Hook = {
   memoizedState: any,
   baseState: any,
   baseQueue: Update<any, any> | null,
   queue: any,
   next: Hook | null,
-|};
+};
 
-export type Effect = {|
+export type Effect = {
   tag: HookFlags,
   create: () => (() => void) | void,
   destroy: (() => void) | void,
   deps: Array<mixed> | null,
   next: Effect,
-|};
+};
 
-type StoreInstance<T> = {|
+type StoreInstance<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-type StoreConsistencyCheck<T> = {|
+type StoreConsistencyCheck<T> = {
   value: T,
   getSnapshot: () => T,
-|};
+};
 
-export type FunctionComponentUpdateQueue = {|
+export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
-|};
+};
 
 type BasicStateAction<S> = (S => S) | S;
 
@@ -1031,14 +1031,14 @@ function rerenderReducer<S, I, A>(
   return [newState, dispatch];
 }
 
-type MutableSourceMemoizedState<Source, Snapshot> = {|
-  refs: {|
+type MutableSourceMemoizedState<Source, Snapshot> = {
+  refs: {
     getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
     setSnapshot: Snapshot => void,
-  |},
+  },
   source: MutableSource<any>,
   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
-|};
+};
 
 function readFromUnsubscribedMutableSource<Source, Snapshot>(
   root: FiberRoot,
@@ -1651,7 +1651,7 @@ function getCallerStackFrame(): string {
     : stackFrames.slice(2, 3).join('\n');
 }
 
-function mountRef<T>(initialValue: T): {|current: T|} {
+function mountRef<T>(initialValue: T): {current: T} {
   const hook = mountWorkInProgressHook();
   if (enableUseRefAccessWarning) {
     if (__DEV__) {
@@ -1720,7 +1720,7 @@ function mountRef<T>(initialValue: T): {|current: T|} {
   }
 }
 
-function updateRef<T>(initialValue: T): {|current: T|} {
+function updateRef<T>(initialValue: T): {current: T} {
   const hook = updateWorkInProgressHook();
   return hook.memoizedState;
 }
@@ -1814,7 +1814,7 @@ function updateLayoutEffect(
 
 function imperativeHandleEffect<T>(
   create: () => T,
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
 ) {
   if (typeof ref === 'function') {
     const refCallback = ref;
@@ -1843,7 +1843,7 @@ function imperativeHandleEffect<T>(
 }
 
 function mountImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -1871,7 +1871,7 @@ function mountImperativeHandle<T>(
 }
 
 function updateImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
@@ -2615,7 +2615,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2669,7 +2669,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       mountHookTypesDev();
       return mountRef(initialValue);
@@ -2767,7 +2767,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2817,7 +2817,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return mountRef(initialValue);
@@ -2915,7 +2915,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -2965,7 +2965,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3064,7 +3064,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3114,7 +3114,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       updateHookTypesDev();
       return updateRef(initialValue);
@@ -3216,7 +3216,7 @@ if (__DEV__) {
       return mountEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3271,7 +3271,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       mountHookTypesDev();
@@ -3391,7 +3391,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3446,7 +3446,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
@@ -3567,7 +3567,7 @@ if (__DEV__) {
       return updateEffect(create, deps);
     },
     useImperativeHandle<T>(
-      ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+      ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
       create: () => T,
       deps: Array<mixed> | void | null,
     ): void {
@@ -3622,7 +3622,7 @@ if (__DEV__) {
         ReactCurrentDispatcher.current = prevDispatcher;
       }
     },
-    useRef<T>(initialValue: T): {|current: T|} {
+    useRef<T>(initialValue: T): {current: T} {
       currentHookNameInDev = 'useRef';
       warnInvalidHookAccess();
       updateHookTypesDev();
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index 469fbabf9ed2..b40a020620e6 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -40,14 +40,14 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 
-export type Family = {|
+export type Family = {
   current: any,
-|};
+};
 
-export type RefreshUpdate = {|
+export type RefreshUpdate = {
   staleFamilies: Set<Family>,
   updatedFamilies: Set<Family>,
-|};
+};
 
 // Resolves type to a family.
 type RefreshHandler = any => Family | void;
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index c503c7a11121..866b0a757818 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -40,14 +40,14 @@ import {
   REACT_LAZY_TYPE,
 } from 'shared/ReactSymbols';
 
-export type Family = {|
+export type Family = {
   current: any,
-|};
+};
 
-export type RefreshUpdate = {|
+export type RefreshUpdate = {
   staleFamilies: Set<Family>,
   updatedFamilies: Set<Family>,
-|};
+};
 
 // Resolves type to a family.
 type RefreshHandler = any => Family | void;
diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
index 7bdaf83b9032..1c45f6135d68 100644
--- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
+++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js
@@ -15,7 +15,7 @@ import type {
   TracingMarkerInstance,
 } from './ReactFiberTracingMarkerComponent.new';
 
-export type OffscreenProps = {|
+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.
@@ -24,32 +24,32 @@ export type OffscreenProps = {|
   // 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 = {|
+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 = {|
+export type OffscreenQueue = {
   transitions: Array<Transition> | null,
   markerInstances: Array<TracingMarkerInstance> | null,
   wakeables: Set<Wakeable> | null,
-|};
+};
 
 type OffscreenVisibility = number;
 
 export const OffscreenVisible = /*                     */ 0b01;
 export const OffscreenPassiveEffectsConnected = /*     */ 0b10;
 
-export type OffscreenInstance = {|
+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/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js
index f9899c93b921..db77d28ff132 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.new.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js
@@ -120,7 +120,7 @@ type OpaqueRoot = FiberRoot;
 // Might add PROFILE later.
 type BundleType = 0 | 1;
 
-type DevToolsConfig = {|
+type DevToolsConfig = {
   bundleType: BundleType,
   version: string,
   rendererPackageName: string,
@@ -128,7 +128,7 @@ type DevToolsConfig = {|
   // Used by "inspect clicked DOM element" in React DevTools.
   findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber | null,
   rendererConfig?: RendererInspectionConfig,
-|};
+};
 
 let didWarnAboutNestedUpdates;
 let didWarnAboutFindNodeInStrictMode;
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js
index 58ee3656d501..aabd5d4b2ab3 100644
--- a/packages/react-reconciler/src/ReactFiberReconciler.old.js
+++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js
@@ -120,7 +120,7 @@ type OpaqueRoot = FiberRoot;
 // Might add PROFILE later.
 type BundleType = 0 | 1;
 
-type DevToolsConfig = {|
+type DevToolsConfig = {
   bundleType: BundleType,
   version: string,
   rendererPackageName: string,
@@ -128,7 +128,7 @@ type DevToolsConfig = {|
   // Used by "inspect clicked DOM element" in React DevTools.
   findFiberByHostInstance?: (instance: Instance | TextInstance) => Fiber | null,
   rendererConfig?: RendererInspectionConfig,
-|};
+};
 
 let didWarnAboutNestedUpdates;
 let didWarnAboutFindNodeInStrictMode;
diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js
index 6482f560c836..beaa5f509bc9 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.new.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.new.js
@@ -38,11 +38,11 @@ import {initializeUpdateQueue} from './ReactFiberClassUpdateQueue.new';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.new';
 
-export type RootState = {|
+export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-|};
+};
 
 function FiberRootNode(
   containerInfo,
diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js
index 0128418fdd47..11221f86a8f4 100644
--- a/packages/react-reconciler/src/ReactFiberRoot.old.js
+++ b/packages/react-reconciler/src/ReactFiberRoot.old.js
@@ -38,11 +38,11 @@ import {initializeUpdateQueue} from './ReactFiberClassUpdateQueue.old';
 import {LegacyRoot, ConcurrentRoot} from './ReactRootTags';
 import {createCache, retainCache} from './ReactFiberCacheComponent.old';
 
-export type RootState = {|
+export type RootState = {
   element: any,
   isDehydrated: boolean,
   cache: Cache,
-|};
+};
 
 function FiberRootNode(
   containerInfo,
diff --git a/packages/react-reconciler/src/ReactFiberStack.new.js b/packages/react-reconciler/src/ReactFiberStack.new.js
index 7cc4e330069e..da4b05320dff 100644
--- a/packages/react-reconciler/src/ReactFiberStack.new.js
+++ b/packages/react-reconciler/src/ReactFiberStack.new.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 
-export type StackCursor<T> = {|current: T|};
+export type StackCursor<T> = {current: T};
 
 const valueStack: Array<any> = [];
 
diff --git a/packages/react-reconciler/src/ReactFiberStack.old.js b/packages/react-reconciler/src/ReactFiberStack.old.js
index 7cc4e330069e..da4b05320dff 100644
--- a/packages/react-reconciler/src/ReactFiberStack.old.js
+++ b/packages/react-reconciler/src/ReactFiberStack.old.js
@@ -9,7 +9,7 @@
 
 import type {Fiber} from './ReactInternalTypes';
 
-export type StackCursor<T> = {|current: T|};
+export type StackCursor<T> = {current: T};
 
 const valueStack: Array<any> = [];
 
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
index a67a5fd8e6d1..903dcc89cea6 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.new.js
@@ -20,7 +20,7 @@ import {
   isSuspenseInstanceFallback,
 } from './ReactFiberHostConfig';
 
-export type SuspenseProps = {|
+export type SuspenseProps = {
   children?: ReactNodeList,
   fallback?: ReactNodeList,
 
@@ -29,7 +29,7 @@ export type SuspenseProps = {|
 
   unstable_expectedLoadTime?: number,
   unstable_name?: string,
-|};
+};
 
 // A null SuspenseState represents an unsuspended normal Suspense boundary.
 // A non-null SuspenseState means that it is blocked for one reason or another.
@@ -38,7 +38,7 @@ export type SuspenseProps = {|
 //     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 = {|
+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.
@@ -48,11 +48,11 @@ export type SuspenseState = {|
   // OffscreenLane is the default for dehydrated boundaries.
   // NoLane is the default for normal boundaries, which turns into "normal" pri.
   retryLane: Lane,
-|};
+};
 
 export type SuspenseListTailMode = 'collapsed' | 'hidden' | void;
 
-export type SuspenseListRenderState = {|
+export type SuspenseListRenderState = {
   isBackwards: boolean,
   // The currently rendering tail row.
   rendering: null | Fiber,
@@ -64,7 +64,7 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
-|};
+};
 
 export function findFirstSuspended(row: Fiber): null | Fiber {
   let node = row;
diff --git a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
index cdcde4fd6700..9b80ce79a8d0 100644
--- a/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberSuspenseComponent.old.js
@@ -20,7 +20,7 @@ import {
   isSuspenseInstanceFallback,
 } from './ReactFiberHostConfig';
 
-export type SuspenseProps = {|
+export type SuspenseProps = {
   children?: ReactNodeList,
   fallback?: ReactNodeList,
 
@@ -29,7 +29,7 @@ export type SuspenseProps = {|
 
   unstable_expectedLoadTime?: number,
   unstable_name?: string,
-|};
+};
 
 // A null SuspenseState represents an unsuspended normal Suspense boundary.
 // A non-null SuspenseState means that it is blocked for one reason or another.
@@ -38,7 +38,7 @@ export type SuspenseProps = {|
 //     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 = {|
+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.
@@ -48,11 +48,11 @@ export type SuspenseState = {|
   // OffscreenLane is the default for dehydrated boundaries.
   // NoLane is the default for normal boundaries, which turns into "normal" pri.
   retryLane: Lane,
-|};
+};
 
 export type SuspenseListTailMode = 'collapsed' | 'hidden' | void;
 
-export type SuspenseListRenderState = {|
+export type SuspenseListRenderState = {
   isBackwards: boolean,
   // The currently rendering tail row.
   rendering: null | Fiber,
@@ -64,7 +64,7 @@ export type SuspenseListRenderState = {|
   tail: null | Fiber,
   // Tail insertions setting.
   tailMode: SuspenseListTailMode,
-|};
+};
 
 export function findFirstSuspended(row: Fiber): null | Fiber {
   let node = row;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
index 9c96e6646ccc..c37aa3b5d165 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.new.js
@@ -19,47 +19,47 @@ import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.new';
 import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.new';
 
-export type SuspenseInfo = {|name: string | null|};
+export type SuspenseInfo = {name: string | null};
 
-export type PendingTransitionCallbacks = {|
+export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerProgress: Map<
     string,
-    {|pendingBoundaries: PendingBoundaries, transitions: Set<Transition>|},
+    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
   > | null,
   markerIncomplete: Map<
     string,
-    {|aborts: Array<TransitionAbort>, transitions: Set<Transition>|},
+    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
   > | null,
   markerComplete: Map<string, Set<Transition>> | null,
-|};
+};
 
-export type Transition = {|
+export type Transition = {
   name: string,
   startTime: number,
-|};
+};
 
-export type BatchConfigTransition = {|
+export type BatchConfigTransition = {
   name?: string,
   startTime?: number,
   _updatedFibers?: Set<Fiber>,
-|};
+};
 
 // TODO: Is there a way to not include the tag or name here?
-export type TracingMarkerInstance = {|
+export type TracingMarkerInstance = {
   tag?: TracingMarkerTag,
   transitions: Set<Transition> | null,
   pendingBoundaries: PendingBoundaries | null,
   aborts: Array<TransitionAbort> | null,
   name: string | null,
-|};
+};
 
-export type TransitionAbort = {|
+export type TransitionAbort = {
   reason: 'error' | 'unknown' | 'marker' | 'suspense',
   name?: string | null,
-|};
+};
 
 export const TransitionRoot = 0;
 export const TransitionTracingMarker = 1;
diff --git a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
index 939a1ae0432d..ede0d60fd199 100644
--- a/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberTracingMarkerComponent.old.js
@@ -19,47 +19,47 @@ import {enableTransitionTracing} from 'shared/ReactFeatureFlags';
 import {createCursor, push, pop} from './ReactFiberStack.old';
 import {getWorkInProgressTransitions} from './ReactFiberWorkLoop.old';
 
-export type SuspenseInfo = {|name: string | null|};
+export type SuspenseInfo = {name: string | null};
 
-export type PendingTransitionCallbacks = {|
+export type PendingTransitionCallbacks = {
   transitionStart: Array<Transition> | null,
   transitionProgress: Map<Transition, PendingBoundaries> | null,
   transitionComplete: Array<Transition> | null,
   markerProgress: Map<
     string,
-    {|pendingBoundaries: PendingBoundaries, transitions: Set<Transition>|},
+    {pendingBoundaries: PendingBoundaries, transitions: Set<Transition>},
   > | null,
   markerIncomplete: Map<
     string,
-    {|aborts: Array<TransitionAbort>, transitions: Set<Transition>|},
+    {aborts: Array<TransitionAbort>, transitions: Set<Transition>},
   > | null,
   markerComplete: Map<string, Set<Transition>> | null,
-|};
+};
 
-export type Transition = {|
+export type Transition = {
   name: string,
   startTime: number,
-|};
+};
 
-export type BatchConfigTransition = {|
+export type BatchConfigTransition = {
   name?: string,
   startTime?: number,
   _updatedFibers?: Set<Fiber>,
-|};
+};
 
 // TODO: Is there a way to not include the tag or name here?
-export type TracingMarkerInstance = {|
+export type TracingMarkerInstance = {
   tag?: TracingMarkerTag,
   transitions: Set<Transition> | null,
   pendingBoundaries: PendingBoundaries | null,
   aborts: Array<TransitionAbort> | null,
   name: string | null,
-|};
+};
 
-export type TransitionAbort = {|
+export type TransitionAbort = {
   reason: 'error' | 'unknown' | 'marker' | 'suspense',
   name?: string | null,
-|};
+};
 
 export const TransitionRoot = 0;
 export const TransitionTracingMarker = 1;
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index 1a5305822be9..f9c5104ed6b1 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -64,10 +64,10 @@ import {getIsHydrating} from './ReactFiberHydrationContext.new';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
 
-export type TreeContext = {|
+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
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index dabfe8fdb6f8..840335d00c4e 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -64,10 +64,10 @@ import {getIsHydrating} from './ReactFiberHydrationContext.old';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
 
-export type TreeContext = {|
+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
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 5770adb76bcb..df7398c7963d 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -70,7 +70,7 @@ export type Dependencies = {
 
 // 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 = {|
+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
@@ -197,9 +197,9 @@ export type Fiber = {|
 
   // Used to verify that the order of hooks does not change between renders.
   _debugHookTypes?: Array<HookType> | null,
-|};
+};
 
-type BaseFiberRootProperties = {|
+type BaseFiberRootProperties = {
   // The type of root (legacy, batched, concurrent, etc.)
   tag: RootTag,
 
@@ -258,16 +258,16 @@ type BaseFiberRootProperties = {|
 
   onRecoverableError: (
     error: mixed,
-    errorInfo: {|digest?: ?string, componentStack?: ?string|},
+    errorInfo: {digest?: ?string, componentStack?: ?string},
   ) => void,
-|};
+};
 
 // 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 = {|
+type UpdaterTrackingOnlyFiberRootProperties = {
   memoizedUpdaters: Set<Fiber>,
   pendingUpdatersLaneMap: LaneMap<Set<Fiber>>,
-|};
+};
 
 export type SuspenseHydrationCallbacks = {
   onHydrated?: (suspenseInstance: SuspenseInstance) => void,
@@ -276,26 +276,26 @@ export type SuspenseHydrationCallbacks = {
 };
 
 // The follow fields are only used by enableSuspenseCallback for hydration.
-type SuspenseCallbackOnlyFiberRootProperties = {|
+type SuspenseCallbackOnlyFiberRootProperties = {
   hydrationCallbacks: null | SuspenseHydrationCallbacks,
-|};
+};
 
-export type TransitionTracingCallbacks = {|
+export type TransitionTracingCallbacks = {
   onTransitionStart?: (transitionName: string, startTime: number) => void,
   onTransitionProgress?: (
     transitionName: string,
     startTime: number,
     currentTime: number,
-    pending: Array<{|name: null | string|}>,
+    pending: Array<{name: null | string}>,
   ) => void,
   onTransitionIncomplete?: (
     transitionName: string,
     startTime: number,
-    deletions: Array<{|
+    deletions: Array<{
       type: string,
       name?: string | null,
       endTime: number,
-    |}>,
+    }>,
   ) => void,
   onTransitionComplete?: (
     transitionName: string,
@@ -307,17 +307,17 @@ export type TransitionTracingCallbacks = {|
     marker: string,
     startTime: number,
     currentTime: number,
-    pending: Array<{|name: null | string|}>,
+    pending: Array<{name: null | string}>,
   ) => void,
   onMarkerIncomplete?: (
     transitionName: string,
     marker: string,
     startTime: number,
-    deletions: Array<{|
+    deletions: Array<{
       type: string,
       name?: string | null,
       endTime: number,
-    |}>,
+    }>,
   ) => void,
   onMarkerComplete?: (
     transitionName: string,
@@ -325,10 +325,10 @@ export type TransitionTracingCallbacks = {|
     startTime: number,
     endTime: number,
   ) => void,
-|};
+};
 
 // The following fields are only used in transition tracing in Profile builds
-type TransitionTracingOnlyFiberRootProperties = {|
+type TransitionTracingOnlyFiberRootProperties = {
   transitionCallbacks: null | TransitionTracingCallbacks,
   transitionLanes: Array<Set<Transition> | null>,
   // Transitions on the root can be represented as a bunch of tracing markers.
@@ -338,7 +338,7 @@ type TransitionTracingOnlyFiberRootProperties = {|
   // empty. We can represent this as a Map of transitions to suspense
   // boundary sets
   incompleteTransitions: Map<Transition, TracingMarkerInstance>,
-|};
+};
 
 // Exported FiberRoot type includes all properties,
 // To avoid requiring potentially error-prone :any casts throughout the project.
@@ -354,7 +354,7 @@ export type FiberRoot = {
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
-export type Dispatcher = {|
+export type Dispatcher = {
   use?: <T>(Usable<T>) => T,
   getCacheSignal?: () => AbortSignal,
   getCacheForType?: <T>(resourceType: () => T) => T,
@@ -366,7 +366,7 @@ export type Dispatcher = {|
     init?: (I) => S,
   ): [S, Dispatch<A>],
   useContext<T>(context: ReactContext<T>): T,
-  useRef<T>(initialValue: T): {|current: T|},
+  useRef<T>(initialValue: T): {current: T},
   useEffect(
     create: () => (() => void) | void,
     deps: Array<mixed> | void | null,
@@ -382,7 +382,7 @@ export type Dispatcher = {|
   useCallback<T>(callback: T, deps: Array<mixed> | void | null): T,
   useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T,
   useImperativeHandle<T>(
-    ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+    ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
     create: () => T,
     deps: Array<mixed> | void | null,
   ): void,
@@ -407,4 +407,4 @@ export type Dispatcher = {|
   useMemoCache?: (size: number) => Array<any>,
 
   unstable_isNewReconciler?: boolean,
-|};
+};
diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js
index 3efe5ddadb3f..48640fd6c70b 100644
--- a/packages/react-reconciler/src/ReactTestSelectors.js
+++ b/packages/react-reconciler/src/ReactTestSelectors.js
@@ -41,30 +41,30 @@ if (typeof Symbol === 'function' && Symbol.for) {
 
 type Type = symbol | number;
 
-type ComponentSelector = {|
+type ComponentSelector = {
   $$typeof: Type,
   value: React$AbstractComponent<empty, mixed>,
-|};
+};
 
-type HasPseudoClassSelector = {|
+type HasPseudoClassSelector = {
   $$typeof: Type,
   value: Array<Selector>,
-|};
+};
 
-type RoleSelector = {|
+type RoleSelector = {
   $$typeof: Type,
   value: string,
-|};
+};
 
-type TextSelector = {|
+type TextSelector = {
   $$typeof: Type,
   value: string,
-|};
+};
 
-type TestNameSelector = {|
+type TestNameSelector = {
   $$typeof: Type,
   value: string,
-|};
+};
 
 type Selector =
   | ComponentSelector
@@ -364,12 +364,12 @@ export function getFindAllNodesFailureDescription(
   return null;
 }
 
-export type BoundingRect = {|
+export type BoundingRect = {
   x: number,
   y: number,
   width: number,
   height: number,
-|};
+};
 
 export function findBoundingRects(
   hostRoot: Instance,
@@ -506,17 +506,15 @@ export function onCommitRoot(): void {
 export type IntersectionObserverOptions = Object;
 
 export type ObserveVisibleRectsCallback = (
-  intersections: Array<{|ratio: number, rect: BoundingRect|}>,
+  intersections: Array<{ratio: number, rect: BoundingRect}>,
 ) => void;
 
 export function observeVisibleRects(
   hostRoot: Instance,
   selectors: Array<Selector>,
-  callback: (
-    intersections: Array<{|ratio: number, rect: BoundingRect|}>,
-  ) => void,
+  callback: (intersections: Array<{ratio: number, rect: BoundingRect}>) => void,
   options?: IntersectionObserverOptions,
-): {|disconnect: () => void|} {
+): {disconnect: () => void} {
   if (!supportsTestSelectors) {
     throw new Error('Test selector API is not supported by this renderer.');
   }
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index d50d7ce907df..f440275c2a7a 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -21,19 +21,19 @@ import type {ReactNodeList} from 'shared/ReactTypes';
 
 import {REACT_MEMO_TYPE, REACT_FORWARD_REF_TYPE} from 'shared/ReactSymbols';
 
-type Signature = {|
+type Signature = {
   ownKey: string,
   forceReset: boolean,
   fullKey: string | null, // Contains keys of nested Hooks. Computed lazily.
   getCustomHooks: () => Array<Function>,
-|};
+};
 
-type RendererHelpers = {|
+type RendererHelpers = {
   findHostInstancesForRefresh: FindHostInstancesForRefresh,
   scheduleRefresh: ScheduleRefresh,
   scheduleRoot: ScheduleRoot,
   setRefreshHandler: SetRefreshHandler,
-|};
+};
 
 if (!__DEV__) {
   throw new Error(
diff --git a/packages/react-server-dom-relay/src/ReactDOMServerFB.js b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
index b430beac2c50..0d7aeef6cbd4 100644
--- a/packages/react-server-dom-relay/src/ReactDOMServerFB.js
+++ b/packages/react-server-dom-relay/src/ReactDOMServerFB.js
@@ -26,19 +26,19 @@ import {
   createRootFormatContext,
 } from 'react-server/src/ReactServerFormatConfig';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   bootstrapScriptContent?: string,
   bootstrapScripts: Array<string>,
   bootstrapModules: Array<string>,
   progressiveChunkSize?: number,
   onError: (error: mixed) => void,
-|};
+};
 
-opaque type Stream = {|
+opaque type Stream = {
   destination: Destination,
   request: Request,
-|};
+};
 
 function renderToStream(children: ReactNodeList, options: Options): Stream {
   const destination = {
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
index 0a2e99eb9baa..d883068c9eaa 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayProtocol.js
@@ -14,7 +14,7 @@ export type JSONValue =
   | number
   | boolean
   | null
-  | {|+[key: string]: JSONValue|}
+  | {+[key: string]: JSONValue}
   | $ReadOnlyArray<JSONValue>;
 
 export type RowEncoding =
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
index eb3c5fce2a83..5e65921193ba 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServer.js
@@ -19,10 +19,10 @@ import {
   startFlowing,
 } from 'react-server/src/ReactFlightServer';
 
-type Options = {|
+type Options = {
   onError?: (error: mixed) => void,
   identifierPrefix?: string,
-|};
+};
 
 function render(
   model: ReactModel,
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
index 0b46fe2397ed..35a1b3e16d55 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayServerHostConfig.js
@@ -78,7 +78,7 @@ export function processErrorChunk(
 
 function convertModelToJSON(
   request: Request,
-  parent: {|+[key: string]: ReactModel|} | $ReadOnlyArray<ReactModel>,
+  parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
   key: string,
   model: ReactModel,
 ): JSONValue {
@@ -93,7 +93,7 @@ function convertModelToJSON(
     } else {
       /* $FlowFixMe the old version of Flow doesn't have a good way to define
        * an empty exact object. */
-      const jsonObj: {|[key: string]: JSONValue|} = {};
+      const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
         if (hasOwnProperty.call(json, nextKey)) {
           jsonObj[nextKey] = convertModelToJSON(
diff --git a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
index d26271ba15a8..d0de924db7ce 100644
--- a/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
+++ b/packages/react-server-dom-relay/src/ReactServerStreamConfigFB.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-export type Destination = {|
+export type Destination = {
   buffer: string,
   done: boolean,
   fatal: boolean,
   error: mixed,
-|};
+};
 
 export type PrecomputedChunk = string;
 export type Chunk = string;
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index 64bb2b986d70..288f63bfdc92 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -9,20 +9,20 @@
 
 import type {Thenable} from 'shared/ReactTypes';
 
-export type WebpackSSRMap = {|
-  [clientId: string]: {|
+export type WebpackSSRMap = {
+  [clientId: string]: {
     [clientExportName: string]: ModuleMetaData,
-  |},
-|};
+  },
+};
 
 export type BundlerConfig = null | WebpackSSRMap;
 
-export opaque type ModuleMetaData = {|
+export opaque type ModuleMetaData = {
   id: string,
   chunks: Array<string>,
   name: string,
   async: boolean,
-|};
+};
 
 // eslint-disable-next-line no-unused-vars
 export opaque type ModuleReference<T> = ModuleMetaData;
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
index 532e04578722..32f8e794f4f7 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
@@ -19,9 +19,9 @@ import {
   close,
 } from 'react-client/src/ReactFlightClientStream';
 
-export type Options = {|
+export type Options = {
   moduleMap?: BundlerConfig,
-|};
+};
 
 function startReadingFromStream(
   response: FlightResponse,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
index 8f4a52bacfce..2cbd609b473f 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js
@@ -18,12 +18,12 @@ import {
   abort,
 } from 'react-server/src/ReactFlightServer';
 
-type Options = {|
+type Options = {
   identifierPrefix?: string,
   signal?: AbortSignal,
   context?: Array<[string, ServerContextJSONValue]>,
   onError?: (error: mixed) => void,
-|};
+};
 
 function renderToReadableStream(
   model: ReactModel,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index c631f5b71a77..addf3758c12a 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -23,16 +23,16 @@ function createDrainHandler(destination, request) {
   return () => startFlowing(request, destination);
 }
 
-type Options = {|
+type Options = {
   onError?: (error: mixed) => void,
   context?: Array<[string, ServerContextJSONValue]>,
   identifierPrefix?: string,
-|};
+};
 
-type PipeableStream = {|
+type PipeableStream = {
   abort(reason: mixed): void,
   pipe<T: Writable>(destination: T): T,
-|};
+};
 
 function renderToPipeableStream(
   model: ReactModel,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
index 79107b50316b..8d7dccae333f 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightServerWebpackBundlerConfig.js
@@ -7,28 +7,28 @@
  * @flow
  */
 
-type WebpackMap = {|
-  [filepath: string]: {|
+type WebpackMap = {
+  [filepath: string]: {
     [name: string]: ModuleMetaData,
-  |},
-|};
+  },
+};
 
 export type BundlerConfig = WebpackMap;
 
 // eslint-disable-next-line no-unused-vars
-export type ModuleReference<T> = {|
+export type ModuleReference<T> = {
   $$typeof: symbol,
   filepath: string,
   name: string,
   async: boolean,
-|};
+};
 
-export type ModuleMetaData = {|
+export type ModuleMetaData = {
   id: string,
   chunks: Array<string>,
   name: string,
   async: boolean,
-|};
+};
 
 export type ModuleKey = string;
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 6ac08cad648b..737a8502801b 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -9,37 +9,37 @@
 
 import {acorn} from 'acorn';
 
-type ResolveContext = {|
+type ResolveContext = {
   conditions: Array<string>,
   parentURL: string | void,
-|};
+};
 
 type ResolveFunction = (
   string,
   ResolveContext,
   ResolveFunction,
-) => {|url: string|} | Promise<{|url: string|}>;
+) => {url: string} | Promise<{url: string}>;
 
-type GetSourceContext = {|
+type GetSourceContext = {
   format: string,
-|};
+};
 
 type GetSourceFunction = (
   string,
   GetSourceContext,
   GetSourceFunction,
-) => Promise<{|source: Source|}>;
+) => Promise<{source: Source}>;
 
-type TransformSourceContext = {|
+type TransformSourceContext = {
   format: string,
   url: string,
-|};
+};
 
 type TransformSourceFunction = (
   Source,
   TransformSourceContext,
   TransformSourceFunction,
-) => Promise<{|source: Source|}>;
+) => Promise<{source: Source}>;
 
 type Source = string | ArrayBuffer | Uint8Array;
 
@@ -52,7 +52,7 @@ export async function resolve(
   specifier: string,
   context: ResolveContext,
   defaultResolve: ResolveFunction,
-): Promise<{|url: string|}> {
+): Promise<{url: string}> {
   // We stash this in case we end up needing to resolve export * statements later.
   stashedResolve = defaultResolve;
 
@@ -133,7 +133,7 @@ function addExportNames(names, node) {
 function resolveClientImport(
   specifier: string,
   parentURL: string,
-): {|url: string|} | Promise<{|url: 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
@@ -151,7 +151,7 @@ function resolveClientImport(
 async function loadClientImport(
   url: string,
   defaultTransformSource: TransformSourceFunction,
-): Promise<{|source: Source|}> {
+): Promise<{source: Source}> {
   if (stashedGetSource === null) {
     throw new Error(
       'Expected getSource to have been called before transformSource',
@@ -225,7 +225,7 @@ export async function transformSource(
   source: Source,
   context: TransformSourceContext,
   defaultTransformSource: TransformSourceFunction,
-): Promise<{|source: Source|}> {
+): Promise<{source: Source}> {
   const transformed = await defaultTransformSource(
     source,
     context,
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index 7aa784a37f75..b3da107e60b9 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -42,21 +42,21 @@ class ClientReferenceDependency extends ModuleDependency {
 const clientImportName = 'react-server-dom-webpack';
 const clientFileName = require.resolve('../');
 
-type ClientReferenceSearchPath = {|
+type ClientReferenceSearchPath = {
   directory: string,
   recursive?: boolean,
   include: RegExp,
   exclude?: RegExp,
-|};
+};
 
 type ClientReferencePath = string | ClientReferenceSearchPath;
 
-type Options = {|
+type Options = {
   isServer: boolean,
   clientReferences?: ClientReferencePath | $ReadOnlyArray<ClientReferencePath>,
   chunkName?: string,
   manifestFilename?: string,
-|};
+};
 
 const PLUGIN_NAME = 'React Server Plugin';
 
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
index ce10935859c8..1c32ac0dd4d4 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayProtocol.js
@@ -14,7 +14,7 @@ export type JSONValue =
   | number
   | boolean
   | null
-  | {|+[key: string]: JSONValue|}
+  | {+[key: string]: JSONValue}
   | Array<JSONValue>;
 
 export type RowEncoding =
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
index 581ba3de85e3..65d60ec334ea 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayServerHostConfig.js
@@ -75,7 +75,7 @@ export function processErrorChunk(
 
 function convertModelToJSON(
   request: Request,
-  parent: {|+[key: string]: ReactModel|} | $ReadOnlyArray<ReactModel>,
+  parent: {+[key: string]: ReactModel} | $ReadOnlyArray<ReactModel>,
   key: string,
   model: ReactModel,
 ): JSONValue {
@@ -89,7 +89,7 @@ function convertModelToJSON(
       return jsonArray;
     } else {
       // $FlowFixMe no good way to define an empty exact object
-      const jsonObj: {|[key: string]: JSONValue|} = {};
+      const jsonObj: {[key: string]: JSONValue} = {};
       for (const nextKey in json) {
         if (hasOwnProperty.call(json, nextKey)) {
           jsonObj[nextKey] = convertModelToJSON(
diff --git a/packages/react-server/src/ReactFizzClassComponent.js b/packages/react-server/src/ReactFizzClassComponent.js
index 9a17511dfc39..12fbeb46f2de 100644
--- a/packages/react-server/src/ReactFizzClassComponent.js
+++ b/packages/react-server/src/ReactFizzClassComponent.js
@@ -100,10 +100,10 @@ function warnNoop(
   }
 }
 
-type InternalInstance = {|
+type InternalInstance = {
   queue: null | Array<Object>,
   replace: boolean,
-|};
+};
 
 const classComponentUpdater = {
   isMounted(inst) {
diff --git a/packages/react-server/src/ReactFizzComponentStack.js b/packages/react-server/src/ReactFizzComponentStack.js
index 5a571af43126..1fa49453d31b 100644
--- a/packages/react-server/src/ReactFizzComponentStack.js
+++ b/packages/react-server/src/ReactFizzComponentStack.js
@@ -14,21 +14,21 @@ import {
 } from 'shared/ReactComponentStackFrame';
 
 // DEV-only reverse linked list representing the current component stack
-type BuiltInComponentStackNode = {|
+type BuiltInComponentStackNode = {
   tag: 0,
   parent: null | ComponentStackNode,
   type: string,
-|};
-type FunctionComponentStackNode = {|
+};
+type FunctionComponentStackNode = {
   tag: 1,
   parent: null | ComponentStackNode,
   type: Function,
-|};
-type ClassComponentStackNode = {|
+};
+type ClassComponentStackNode = {
   tag: 2,
   parent: null | ComponentStackNode,
   type: Function,
-|};
+};
 export type ComponentStackNode =
   | BuiltInComponentStackNode
   | FunctionComponentStackNode
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 02072fabd3f3..54c5627cd71e 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -43,21 +43,21 @@ import is from 'shared/objectIs';
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
 
-type Update<A> = {|
+type Update<A> = {
   action: A,
   next: Update<A> | null,
-|};
+};
 
-type UpdateQueue<A> = {|
+type UpdateQueue<A> = {
   last: Update<A> | null,
   dispatch: any,
-|};
+};
 
-type Hook = {|
+type Hook = {
   memoizedState: any,
   queue: UpdateQueue<any> | null,
   next: Hook | null,
-|};
+};
 
 let currentlyRenderingComponent: Object | null = null;
 let currentlyRenderingTask: Task | null = null;
@@ -416,7 +416,7 @@ function useMemo<T>(nextCreate: () => T, deps: Array<mixed> | void | null): T {
   return nextValue;
 }
 
-function useRef<T>(initialValue: T): {|current: T|} {
+function useRef<T>(initialValue: T): {current: T} {
   currentlyRenderingComponent = resolveCurrentlyRenderingComponent();
   workInProgressHook = createWorkInProgressHook();
   const previousRef = workInProgressHook.memoizedState;
diff --git a/packages/react-server/src/ReactFizzNewContext.js b/packages/react-server/src/ReactFizzNewContext.js
index fdd708748d63..b4386399c334 100644
--- a/packages/react-server/src/ReactFizzNewContext.js
+++ b/packages/react-server/src/ReactFizzNewContext.js
@@ -20,13 +20,13 @@ if (__DEV__) {
 
 // Used to store the parent path of all context overrides in a shared linked list.
 // Forming a reverse tree.
-type ContextNode<T> = {|
+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.
diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js
index f6cccbe4652d..5f44458e7889 100644
--- a/packages/react-server/src/ReactFizzServer.js
+++ b/packages/react-server/src/ReactFizzServer.js
@@ -131,11 +131,11 @@ import {trackSuspendedWakeable} from './ReactFizzWakeable';
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 const ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
 
-type LegacyContext = {|
+type LegacyContext = {
   [key: string]: any,
-|};
+};
 
-type SuspenseBoundary = {|
+type SuspenseBoundary = {
   id: SuspenseBoundaryID,
   rootSegmentID: number,
   errorDigest: ?string, // the error hash if it errors
@@ -147,9 +147,9 @@ type SuspenseBoundary = {|
   completedSegments: Array<Segment>, // completed but not yet flushed segments.
   byteSize: number, // used to determine whether to inline children boundaries.
   fallbackAbortableTasks: Set<Task>, // used to cancel task on the fallback if the boundary completes or gets canceled.
-|};
+};
 
-export type Task = {|
+export type Task = {
   node: ReactNodeList,
   ping: () => void,
   blockedBoundary: Root | SuspenseBoundary,
@@ -160,7 +160,7 @@ export type Task = {|
   treeContext: TreeContext, // the current tree context that this task is executing in
   componentStack: null | ComponentStackNode, // DEV-only component stack
   thenableState: null | ThenableState,
-|};
+};
 
 const PENDING = 0;
 const COMPLETED = 1;
@@ -170,7 +170,7 @@ const ERRORED = 4;
 
 type Root = null;
 
-type Segment = {|
+type Segment = {
   status: 0 | 1 | 2 | 3 | 4,
   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
@@ -184,13 +184,13 @@ type Segment = {|
   // used to discern when text separator boundaries are needed
   lastPushedText: boolean,
   textEmbedded: boolean,
-|};
+};
 
 const OPEN = 0;
 const CLOSING = 1;
 const CLOSED = 2;
 
-export opaque type Request = {|
+export opaque type Request = {
   destination: null | Destination,
   +responseState: ResponseState,
   +progressiveChunkSize: number,
@@ -223,7 +223,7 @@ export opaque type Request = {|
   // emit a different response to the stream instead.
   onShellError: (error: mixed) => void,
   onFatalError: (error: mixed) => void,
-|};
+};
 
 // 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.
diff --git a/packages/react-server/src/ReactFizzTreeContext.js b/packages/react-server/src/ReactFizzTreeContext.js
index a06d3cf25d61..3b924cf8eb3a 100644
--- a/packages/react-server/src/ReactFizzTreeContext.js
+++ b/packages/react-server/src/ReactFizzTreeContext.js
@@ -60,10 +60,10 @@
 // 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 = {|
+export type TreeContext = {
   +id: number,
   +overflow: string,
-|};
+};
 
 export const emptyTreeContext = {
   id: 1,
diff --git a/packages/react-server/src/ReactFlightNewContext.js b/packages/react-server/src/ReactFlightNewContext.js
index df6332a048b1..3f5abaaf0793 100644
--- a/packages/react-server/src/ReactFlightNewContext.js
+++ b/packages/react-server/src/ReactFlightNewContext.js
@@ -23,13 +23,13 @@ if (__DEV__) {
 
 // Used to store the parent path of all context overrides in a shared linked list.
 // Forming a reverse tree.
-type ContextNode<T: ServerContextJSONValue> = {|
+type ContextNode<T: ServerContextJSONValue> = {
   parent: null | ContextNode<any>,
   depth: number, // Short hand to compute the depth of the tree at this node.
   context: ReactServerContext<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.
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
index 01c3db8f3fda..6f26f8b88f69 100644
--- a/packages/react-server/src/ReactFlightServer.js
+++ b/packages/react-server/src/ReactFlightServer.js
@@ -91,23 +91,23 @@ export type ReactModel =
   | Iterable<ReactModel>
   | ReactModelObject;
 
-type ReactModelObject = {|+[key: string]: ReactModel|};
+type ReactModelObject = {+[key: string]: ReactModel};
 
 const PENDING = 0;
 const COMPLETED = 1;
 const ABORTED = 3;
 const ERRORED = 4;
 
-type Task = {|
+type Task = {
   id: number,
   status: 0 | 1 | 3 | 4,
   model: ReactModel,
   ping: () => void,
   context: ContextSnapshot,
   thenableState: ThenableState | null,
-|};
+};
 
-export type Request = {|
+export type Request = {
   status: 0 | 1 | 2,
   fatalError: mixed,
   destination: null | Destination,
@@ -127,7 +127,7 @@ export type Request = {|
   identifierCount: number,
   onError: (error: mixed) => void,
   toJSON: (key: string, value: ReactModel) => ReactJSONValue,
-|};
+};
 
 const ReactCurrentDispatcher = ReactSharedInternals.ReactCurrentDispatcher;
 
@@ -325,7 +325,7 @@ function serializeByRefID(id: number): string {
 
 function serializeModuleReference(
   request: Request,
-  parent: {|+[key: string | number]: ReactModel|} | $ReadOnlyArray<ReactModel>,
+  parent: {+[key: string | number]: ReactModel} | $ReadOnlyArray<ReactModel>,
   key: string,
   moduleReference: ModuleReference<any>,
 ): string {
@@ -529,7 +529,7 @@ let isInsideContextValue = false;
 
 export function resolveModelToJSON(
   request: Request,
-  parent: {|+[key: string | number]: ReactModel|} | $ReadOnlyArray<ReactModel>,
+  parent: {+[key: string | number]: ReactModel} | $ReadOnlyArray<ReactModel>,
   key: string,
   value: ReactModel,
 ): ReactJSONValue {
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index e049c3500c70..b452893ab2a9 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -12,12 +12,12 @@ import {DefaultEventPriority} from 'react-reconciler/src/ReactEventPriorities';
 
 export type Type = string;
 export type Props = Object;
-export type Container = {|
+export type Container = {
   children: Array<Instance | TextInstance>,
   createNodeMock: Function,
   tag: 'CONTAINER',
-|};
-export type Instance = {|
+};
+export type Instance = {
   type: string,
   props: Object,
   isHidden: boolean,
@@ -25,12 +25,12 @@ export type Instance = {|
   internalInstanceHandle: Object,
   rootContainerInstance: Container,
   tag: 'INSTANCE',
-|};
-export type TextInstance = {|
+};
+export type TextInstance = {
   text: string,
   isHidden: boolean,
   tag: 'TEXT',
-|};
+};
 export type HydratableInstance = Instance | TextInstance;
 export type PublicInstance = Instance | TextInstance;
 export type HostContext = Object;
@@ -40,7 +40,7 @@ export type TimeoutHandle = TimeoutID;
 export type NoTimeout = -1;
 export type EventResponder = any;
 
-export type RendererInspectionConfig = $ReadOnly<{||}>;
+export type RendererInspectionConfig = $ReadOnly<{}>;
 
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoPersistence';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
index 43cfe6ef82c8..ae2e532b270e 100644
--- a/packages/react-test-renderer/src/ReactTestRenderer.js
+++ b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -61,12 +61,12 @@ type TestRendererOptions = {
   ...
 };
 
-type ReactTestRendererJSON = {|
+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 = $Shape<{
diff --git a/packages/react/src/ReactChildren.js b/packages/react/src/ReactChildren.js
index 73a23911f4d8..686d39a5716a 100644
--- a/packages/react/src/ReactChildren.js
+++ b/packages/react/src/ReactChildren.js
@@ -173,9 +173,9 @@ function mapIntoArray(
   } else {
     const iteratorFn = getIteratorFn(children);
     if (typeof iteratorFn === 'function') {
-      const iterableChildren: Iterable<React$Node> & {|
+      const iterableChildren: Iterable<React$Node> & {
         entries: any,
-      |} = (children: any);
+      } = (children: any);
 
       if (__DEV__) {
         // Warn about using Maps as children
diff --git a/packages/react/src/ReactCurrentBatchConfig.js b/packages/react/src/ReactCurrentBatchConfig.js
index 5355a575bc04..91737680b4aa 100644
--- a/packages/react/src/ReactCurrentBatchConfig.js
+++ b/packages/react/src/ReactCurrentBatchConfig.js
@@ -9,9 +9,9 @@
 
 import type {BatchConfigTransition} from 'react-reconciler/src/ReactFiberTracingMarkerComponent.new';
 
-type BatchConfig = {|
+type BatchConfig = {
   transition: BatchConfigTransition | null,
-|};
+};
 /**
  * Keeps track of the current batch's configuration such as how long an update
  * should suspend for if it needs to.
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 74699ea673e0..7192f9aea5e3 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -94,7 +94,7 @@ export function useReducer<S, I, A>(
   return dispatcher.useReducer(reducer, initialArg, init);
 }
 
-export function useRef<T>(initialValue: T): {|current: T|} {
+export function useRef<T>(initialValue: T): {current: T} {
   const dispatcher = resolveDispatcher();
   return dispatcher.useRef(initialValue);
 }
@@ -140,7 +140,7 @@ export function useMemo<T>(
 }
 
 export function useImperativeHandle<T>(
-  ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
+  ref: {current: T | null} | ((inst: T | null) => mixed) | null | void,
   create: () => T,
   deps: Array<mixed> | void | null,
 ): void {
diff --git a/packages/react/src/ReactLazy.js b/packages/react/src/ReactLazy.js
index fd08087aa403..3dba009277e0 100644
--- a/packages/react/src/ReactLazy.js
+++ b/packages/react/src/ReactLazy.js
@@ -16,25 +16,25 @@ const Pending = 0;
 const Resolved = 1;
 const Rejected = 2;
 
-type UninitializedPayload<T> = {|
+type UninitializedPayload<T> = {
   _status: -1,
   _result: () => Thenable<{default: T, ...}>,
-|};
+};
 
-type PendingPayload = {|
+type PendingPayload = {
   _status: 0,
   _result: Wakeable,
-|};
+};
 
-type ResolvedPayload<T> = {|
+type ResolvedPayload<T> = {
   _status: 1,
   _result: {default: T, ...},
-|};
+};
 
-type RejectedPayload = {|
+type RejectedPayload = {
   _status: 2,
   _result: mixed,
-|};
+};
 
 type Payload<T> =
   | UninitializedPayload<T>
@@ -42,11 +42,11 @@ type Payload<T> =
   | ResolvedPayload<T>
   | RejectedPayload;
 
-export type LazyComponent<T, P> = {|
+export type LazyComponent<T, P> = {
   $$typeof: symbol | number,
   _payload: P,
   _init: (payload: P) => T,
-|};
+};
 
 function lazyInitializer<T>(payload: Payload<T>): T {
   if (payload._status === Uninitialized) {
diff --git a/packages/scheduler/src/SchedulerMinHeap.js b/packages/scheduler/src/SchedulerMinHeap.js
index 3a562b44cdb3..b8585e10358f 100644
--- a/packages/scheduler/src/SchedulerMinHeap.js
+++ b/packages/scheduler/src/SchedulerMinHeap.js
@@ -8,10 +8,10 @@
  */
 
 type Heap = Array<Node>;
-type Node = {|
+type Node = {
   id: number,
   sortIndex: number,
-|};
+};
 
 export function push(heap: Heap, node: Node): void {
   const index = heap.length;
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
index 94c5876d80c1..8169bf1acc94 100644
--- a/packages/scheduler/src/forks/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -17,9 +17,9 @@ declare class TaskController {
 
 type PostTaskPriorityLevel = 'user-blocking' | 'user-visible' | 'background';
 
-type CallbackNode = {|
+type CallbackNode = {
   _controller: TaskController,
-|};
+};
 
 import {
   ImmediatePriority,
@@ -77,7 +77,7 @@ type SchedulerCallback<T> = (
 export function unstable_scheduleCallback<T>(
   priorityLevel: PriorityLevel,
   callback: SchedulerCallback<T>,
-  options?: {|delay?: number|},
+  options?: {delay?: number},
 ): CallbackNode {
   let postTaskPriority;
   switch (priorityLevel) {
diff --git a/packages/shared/ReactElementType.js b/packages/shared/ReactElementType.js
index 8e61126575af..998aff18a4c9 100644
--- a/packages/shared/ReactElementType.js
+++ b/packages/shared/ReactElementType.js
@@ -7,12 +7,12 @@
  * @flow
  */
 
-export type Source = {|
+export type Source = {
   fileName: string,
   lineNumber: number,
-|};
+};
 
-export type ReactElement = {|
+export type ReactElement = {
   $$typeof: any,
   type: any,
   key: any,
@@ -26,4 +26,4 @@ export type ReactElement = {|
   _self: React$Element<any>,
   _shadowChildren: any,
   _source: Source,
-|};
+};
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 9ea076b15f9e..d29a98554dcb 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -80,7 +80,7 @@ export type ServerContextJSONValue =
   | number
   | null
   | $ReadOnlyArray<ServerContextJSONValue>
-  | {|+[key: string]: ServerContextJSONValue|};
+  | {+[key: string]: ServerContextJSONValue};
 
 export type ReactServerContext<T: any> = ReactContext<T>;
 
@@ -94,13 +94,13 @@ export type ReactPortal = {
   ...
 };
 
-export type RefObject = {|
+export type RefObject = {
   current: any,
-|};
+};
 
-export type ReactScope = {|
+export type ReactScope = {
   $$typeof: symbol | number,
-|};
+};
 
 export type ReactScopeQuery = (
   type: string,
@@ -108,12 +108,12 @@ export type ReactScopeQuery = (
   instance: mixed,
 ) => boolean;
 
-export type ReactScopeInstance = {|
+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>,
-|};
+};
 
 // Mutable source version can be anything (e.g. number, string, immutable data structure)
 // so long as it changes every time any part of the source changes.
@@ -133,7 +133,7 @@ export type MutableSourceGetVersionFn = (
   source: $NonMaybeType<mixed>,
 ) => MutableSourceVersion;
 
-export type MutableSource<Source: $NonMaybeType<mixed>> = {|
+export type MutableSource<Source: $NonMaybeType<mixed>> = {
   _source: Source,
 
   _getVersion: MutableSourceGetVersionFn,
@@ -163,7 +163,7 @@ export type MutableSource<Source: $NonMaybeType<mixed>> = {|
   // See https://github.com/facebook/react/issues/19948
   _currentlyRenderingFiber?: Fiber | null,
   _initialVersionAsOfFirstRender?: MutableSourceVersion | null,
-|};
+};
 
 // The subset of a Thenable required by things thrown by Suspense.
 // This doesn't require a value to be passed to either handler.
@@ -209,9 +209,9 @@ export type OffscreenMode =
   | 'unstable-defer-without-hiding'
   | 'visible';
 
-export type StartTransitionOptions = {|
+export type StartTransitionOptions = {
   name?: string,
-|};
+};
 
 // TODO: Add Context support
 export type Usable<T> = Thenable<T> | ReactContext<T>;
diff --git a/packages/use-subscription/src/useSubscription.js b/packages/use-subscription/src/useSubscription.js
index 3ca633a5ad57..b7987633dadf 100644
--- a/packages/use-subscription/src/useSubscription.js
+++ b/packages/use-subscription/src/useSubscription.js
@@ -22,9 +22,9 @@ export function useSubscription<Value>({
   // 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 {
+}): Value {
   return useSyncExternalStore(subscribe, getCurrentValue);
 }
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
index 1c07cb0171a6..8b9a8aa43c99 100644
--- a/scripts/flow/environment.js
+++ b/scripts/flow/environment.js
@@ -25,13 +25,13 @@ declare module 'create-react-class' {
   declare var exports: React$CreateClass;
 }
 
-declare var trustedTypes: {|
+declare var trustedTypes: {
   isHTML: (value: any) => boolean,
   isScript: (value: any) => boolean,
   isScriptURL: (value: any) => boolean,
   // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
   isURL?: (value: any) => boolean,
-|};
+};
 
 // ReactFeatureFlags www fork
 declare module 'ReactFeatureFlags' {
@@ -77,52 +77,52 @@ declare module 'fs/promises' {
   declare var access: (path: string, mode?: number) => Promise<void>;
   declare var lstat: (
     path: string,
-    options?: ?{|bigint?: boolean|},
+    options?: ?{bigint?: boolean},
   ) => Promise<mixed>;
   declare var readdir: (
     path: string,
     options?:
       | ?string
-      | {|
+      | {
           encoding?: ?string,
           withFileTypes?: ?boolean,
-        |},
+        },
   ) => Promise<Buffer>;
   declare var readFile: (
     path: string,
     options?:
       | ?string
-      | {|
+      | {
           encoding?: ?string,
-        |},
+        },
   ) => Promise<Buffer>;
   declare var readlink: (
     path: string,
     options?:
       | ?string
-      | {|
+      | {
           encoding?: ?string,
-        |},
+        },
   ) => Promise<mixed>;
   declare var realpath: (
     path: string,
     options?:
       | ?string
-      | {|
+      | {
           encoding?: ?string,
-        |},
+        },
   ) => Promise<mixed>;
   declare var stat: (
     path: string,
-    options?: ?{|bigint?: boolean|},
+    options?: ?{bigint?: boolean},
   ) => Promise<mixed>;
 }
 declare module 'pg' {
   declare var Pool: (
     options: mixed,
-  ) => {|
+  ) => {
     query: (query: string, values?: Array<mixed>) => void,
-  |};
+  };
 }
 
 declare module 'util' {
@@ -147,13 +147,13 @@ declare module 'util' {
     encodeInto(
       buffer: string,
       dest: Uint8Array,
-    ): {|read: number, written: number|};
+    ): {read: number, written: number};
     encoding: string;
   }
 }
 
 declare module 'pg/lib/utils' {
-  declare module.exports: {|
+  declare module.exports: {
     prepareValue(val: any): mixed,
-  |};
+  };
 }
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 900c0d2fa667..083b9f6e0f09 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -20,14 +20,14 @@ import type {RNTopLevelEventType} from 'react-native-renderer/src/legacy-events/
 import type {CapturedError} from 'react-reconciler/src/ReactCapturedValue';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
-type DeepDifferOptions = {|+unsafelyIgnoreFunctions?: boolean|};
-type RawEventEmitterEvent = $ReadOnly<{|
+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 module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface' {
   declare export function deepDiffer(
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
index 5344cacae248..9f452689976a 100644
--- a/scripts/flow/react-relay-hooks.js
+++ b/scripts/flow/react-relay-hooks.js
@@ -12,7 +12,7 @@ type JSONValue =
   | boolean
   | number
   | null
-  | {|+[key: string]: JSONValue|}
+  | {+[key: string]: JSONValue}
   | $ReadOnlyArray<JSONValue>;
 
 declare module 'JSResourceReference' {
diff --git a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
index de5211f09be9..7894a689b377 100644
--- a/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
+++ b/scripts/rollup/shims/react-native/ReactNativeViewConfigRegistry.js
@@ -15,19 +15,19 @@ import invariant from 'invariant';
 
 // Event configs
 const customBubblingEventTypes: {
-  [eventName: string]: $ReadOnly<{|
-    phasedRegistrationNames: $ReadOnly<{|
+  [eventName: string]: $ReadOnly<{
+    phasedRegistrationNames: $ReadOnly<{
       captured: string,
       bubbled: string,
       skipBubbling?: ?boolean,
-    |}>,
-  |}>,
+    }>,
+  }>,
   ...,
 } = {};
 const customDirectEventTypes: {
-  [eventName: string]: $ReadOnly<{|
+  [eventName: string]: $ReadOnly<{
     registrationName: string,
-  |}>,
+  }>,
   ...,
 } = {};
 

From 269c4e975f10838ab36d08763f3ddf635f24690a Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Fri, 9 Sep 2022 21:10:26 +0100
Subject: [PATCH 1568/1603] Prevent infinite re-renders in StrictMode +
 Offscreen (#25203)

* Prevent infinite re-render in StrictMode + Offscreen

* Only fire effects for Offscreen when it is revealed

* Move setting debug fiber into if branch

* Move settings of debug fiber out of if branch
---
 .../src/ReactFiberWorkLoop.new.js             |  9 ++-
 .../src/ReactFiberWorkLoop.old.js             |  9 ++-
 .../ReactOffscreenStrictMode-test.js          | 61 +++++++++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 229756596cc1..a40b5ac48072 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -3184,9 +3185,15 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    if (isInStrictMode) {
+    const isNotOffscreen = fiber.tag !== OffscreenComponent;
+    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
+    const hasOffscreenBecomeVisible =
+      isNotOffscreen ||
+      (fiber.flags & Visibility && fiber.memoizedState === null);
+    if (isInStrictMode && hasOffscreenBecomeVisible) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index c4caf55518a8..3db85b0b9b23 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -124,6 +124,7 @@ import {
   LayoutMask,
   PassiveMask,
   PlacementDEV,
+  Visibility,
 } from './ReactFiberFlags';
 import {
   NoLanes,
@@ -3184,9 +3185,15 @@ function doubleInvokeEffectsInDEV(
 ) {
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
+
   if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
     setCurrentDebugFiberInDEV(fiber);
-    if (isInStrictMode) {
+    const isNotOffscreen = fiber.tag !== OffscreenComponent;
+    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
+    const hasOffscreenBecomeVisible =
+      isNotOffscreen ||
+      (fiber.flags & Visibility && fiber.memoizedState === null);
+    if (isInStrictMode && hasOffscreenBecomeVisible) {
       disappearLayoutEffects(fiber);
       disconnectPassiveEffect(fiber);
       reappearLayoutEffects(root, fiber.alternate, fiber, false);
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
index f750a9b7ef0d..e6ab08cef547 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
@@ -71,6 +71,21 @@ describe('ReactOffscreenStrictMode', () => {
 
     log = [];
 
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="hidden">
+            <Component label="A" />
+            <Component label="B" />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    expect(log).toEqual(['A: render', 'A: render', 'B: render', 'B: render']);
+
+    log = [];
+
     act(() => {
       ReactNoop.render(
         <React.StrictMode>
@@ -91,5 +106,51 @@ describe('ReactOffscreenStrictMode', () => {
       'A: useLayoutEffect mount',
       'A: useEffect mount',
     ]);
+
+    log = [];
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="hidden">
+            <Component label="A" />
+          </Offscreen>
+        </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', () => {
+    // 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;
+    }
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <React.Suspense>
+            <App />
+          </React.Suspense>
+        </React.StrictMode>,
+      );
+    });
   });
 });

From d5ddc6543efb2d26303a8bc3f38a5ad5dfe0e4f7 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Fri, 9 Sep 2022 16:21:32 -0400
Subject: [PATCH 1569/1603] Flow: upgrade to 0.131 (#25224)

This also downgrades the new lint warning to avoid new suppressions with this upgrade.
---
 package.json                   | 2 +-
 scripts/flow/config/flowconfig | 6 +++++-
 yarn.lock                      | 9 +++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 1036d8e0a691..729772b8eb23 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.127",
+    "flow-bin": "^0.131",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index cb52d604a7c1..75e63a4375f1 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -38,6 +38,10 @@
 [lints]
 untyped-type-import=error
 
+# TODO: We might want to enable this this as a error (the default), it
+#       disallows adding undefined and numbers.
+unsafe-addition=off
+
 [options]
 server.max_workers=4
 esproposal.class_static_fields=enable
@@ -50,4 +54,4 @@ munge_underscores=false
 %REACT_RENDERER_FLOW_OPTIONS%
 
 [version]
-^0.127.0
+^0.131.0
diff --git a/yarn.lock b/yarn.lock
index ac6d35f47ea7..7468b3abbacc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6901,6 +6901,7 @@ eslint-plugin-no-unsanitized@3.1.2:
 
 "eslint-plugin-react-internal@link:./scripts/eslint-rules":
   version "0.0.0"
+  uid ""
 
 eslint-plugin-react@^6.7.1:
   version "6.10.3"
@@ -7913,10 +7914,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@^0.127:
-  version "0.127.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.127.0.tgz#0614cff4c1b783beef1feeb7108d536e09d77632"
-  integrity sha512-ywvCCdV4NJWzrqjFrMU5tAiVGyBiXjsJQ1+/kj8thXyX15V17x8BFvNwoAH97NrUU8T1HzmFBjLzWc0l2319qg==
+flow-bin@^0.131:
+  version "0.131.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.131.0.tgz#d4228b6070afdf3b2a76acdee77a7f3f8e8f5133"
+  integrity sha512-fZmoIBcDrtLhy/NNMxwJysSYzMr1ksRcAOMi3AHSoYXfcuQqTvhGJx+wqjlIOqIwz8RRYm8J4V4JrSJbIKP+Xg==
 
 fluent-syntax@0.13.0:
   version "0.13.0"

From 3613284dceac38de4ef5a7c93c4897600ee6923b Mon Sep 17 00:00:00 2001
From: mofeiZ <34200447+mofeiZ@users.noreply.github.com>
Date: Fri, 9 Sep 2022 21:19:28 -0400
Subject: [PATCH 1570/1603] experimental_use(context) for server components and
 ssr (#25226)

implements the experimental use(context) API for the server components (Flight) and SSR (Fizz) runtimes
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 48 +++++++++++++++++++
 .../src/ReactFiberHooks.new.js                |  9 ++--
 .../src/ReactFiberHooks.old.js                |  9 ++--
 .../__tests__/ReactFlightDOMBrowser-test.js   | 34 +++++++++++++
 packages/react-server/src/ReactFizzHooks.js   | 12 ++++-
 packages/react-server/src/ReactFlightHooks.js |  5 +-
 packages/shared/ReactTypes.js                 |  1 -
 7 files changed, 107 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 243c7dba8607..4d8e677e0373 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -5292,6 +5292,54 @@ describe('ReactDOMFizzServer', () => {
       expect(getVisibleChildren(container)).toEqual('ABC');
     });
 
+    // @gate enableUseHook
+    it('basic use(context)', async () => {
+      const ContextA = React.createContext('default');
+      const ContextB = React.createContext('B');
+      const ServerContext = React.createServerContext(
+        'ServerContext',
+        'default',
+      );
+      function Client() {
+        return use(ContextA) + use(ContextB);
+      }
+      function ServerComponent() {
+        return use(ServerContext);
+      }
+      function Server() {
+        return (
+          <ServerContext.Provider value="C">
+            <ServerComponent />
+          </ServerContext.Provider>
+        );
+      }
+      function App() {
+        return (
+          <>
+            <ContextA.Provider value="A">
+              <Client />
+            </ContextA.Provider>
+            <Server />
+          </>
+        );
+      }
+
+      await act(async () => {
+        const {pipe} = ReactDOMFizzServer.renderToPipeableStream(<App />);
+        pipe(writable);
+      });
+      expect(getVisibleChildren(container)).toEqual(['AB', 'C']);
+
+      // 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;
+      ServerContext._currentRenderer = null;
+      ReactDOMClient.hydrateRoot(container, <App />);
+      expect(Scheduler).toFlushAndYield([]);
+      expect(getVisibleChildren(container)).toEqual(['AB', 'C']);
+    });
+
     // @gate enableUseHook
     it('use(promise) in multiple components', async () => {
       const promiseA = Promise.resolve('A');
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index a87a4c27fd76..da2254a682eb 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -36,7 +36,10 @@ import {
   enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
-import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
 
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -771,8 +774,8 @@ function use<T>(usable: Usable<T>): T {
         }
       }
     } else if (
-      usable.$$typeof != null &&
-      usable.$$typeof === REACT_CONTEXT_TYPE
+      usable.$$typeof === REACT_CONTEXT_TYPE ||
+      usable.$$typeof === REACT_SERVER_CONTEXT_TYPE
     ) {
       const context: ReactContext<T> = (usable: any);
       return readContext(context);
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 0ee167366352..4e53c1b2545d 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -36,7 +36,10 @@ import {
   enableUseHook,
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
-import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_SERVER_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
 
 import {NoMode, ConcurrentMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
@@ -771,8 +774,8 @@ function use<T>(usable: Usable<T>): T {
         }
       }
     } else if (
-      usable.$$typeof != null &&
-      usable.$$typeof === REACT_CONTEXT_TYPE
+      usable.$$typeof === REACT_CONTEXT_TYPE ||
+      usable.$$typeof === REACT_SERVER_CONTEXT_TYPE
     ) {
       const context: ReactContext<T> = (usable: any);
       return readContext(context);
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index 1b59c72ab3e4..f477bba451a6 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -594,6 +594,40 @@ describe('ReactFlightDOMBrowser', () => {
     expect(container.innerHTML).toBe('ABC');
   });
 
+  // @gate enableUseHook
+  it('basic use(context)', async () => {
+    const ContextA = React.createServerContext('ContextA', '');
+    const ContextB = React.createServerContext('ContextB', 'B');
+
+    function ServerComponent() {
+      return use(ContextA) + use(ContextB);
+    }
+    function Server() {
+      return (
+        <ContextA.Provider value="A">
+          <ServerComponent />
+        </ContextA.Provider>
+      );
+    }
+    const stream = ReactServerDOMWriter.renderToReadableStream(<Server />);
+    const response = ReactServerDOMReader.createFromReadableStream(stream);
+
+    function Client() {
+      return response.readRoot();
+    }
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+    await act(async () => {
+      // Client uses a different renderer.
+      // We reset _currentRenderer here to not trigger a warning about multiple
+      // renderers concurrently using this context
+      ContextA._currentRenderer = null;
+      root.render(<Client />);
+    });
+    expect(container.innerHTML).toBe('AB');
+  });
+
   // @gate enableUseHook
   it('use(promise) in multiple components', async () => {
     function Child({prefix}) {
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index 54c5627cd71e..de67ccebcaf6 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -39,6 +39,10 @@ import {
   enableUseMemoCacheHook,
 } from 'shared/ReactFeatureFlags';
 import is from 'shared/objectIs';
+import {
+  REACT_SERVER_CONTEXT_TYPE,
+  REACT_CONTEXT_TYPE,
+} from 'shared/ReactSymbols';
 
 type BasicStateAction<S> = (S => S) | S;
 type Dispatch<A> = A => void;
@@ -616,8 +620,12 @@ function use<T>(usable: Usable<T>): T {
           }
         }
       }
-    } else {
-      // TODO: Add support for Context
+    } else if (
+      usable.$$typeof === REACT_CONTEXT_TYPE ||
+      usable.$$typeof === REACT_SERVER_CONTEXT_TYPE
+    ) {
+      const context: ReactContext<T> = (usable: any);
+      return readContext(context);
     }
   }
 
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index f4784c82e1cf..dfb234b15ad2 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -200,8 +200,9 @@ function use<T>(usable: Usable<T>): T {
           }
         }
       }
-    } else {
-      // TODO: Add support for Context
+    } else if (usable.$$typeof === REACT_SERVER_CONTEXT_TYPE) {
+      const context: ReactServerContext<T> = (usable: any);
+      return readContext(context);
     }
   }
 
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index d29a98554dcb..6b36a7bdffd9 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -213,5 +213,4 @@ export type StartTransitionOptions = {
   name?: string,
 };
 
-// TODO: Add Context support
 export type Usable<T> = Thenable<T> | ReactContext<T>;

From c156ecd483b4adc8e16254b8cab3ee735e893271 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Sun, 11 Sep 2022 21:53:00 -0400
Subject: [PATCH 1571/1603] Add some test coverage for some error cases
 (#25240)

---
 .../react-client/src/ReactFlightClient.js     |   5 -
 .../src/__tests__/ReactFlightDOM-test.js      | 206 +++++++++++++++---
 .../src/__tests__/utils/WebpackMock.js        |  50 ++++-
 3 files changed, 213 insertions(+), 48 deletions(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index ddc151654b76..bd78cd237640 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -317,11 +317,6 @@ export function parseModelString(
       } else {
         const id = parseInt(value.substring(1), 16);
         const chunk = getChunk(response, id);
-        if (chunk._status === PENDING) {
-          throw new Error(
-            "We didn't expect to see a forward reference. This is a bug in the React Server.",
-          );
-        }
         return readChunk(chunk);
       }
     }
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 4b6995a9edb9..9de384376415 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -19,6 +19,7 @@ global.setImmediate = cb => cb();
 
 let act;
 let clientExports;
+let clientModuleError;
 let webpackMap;
 let Stream;
 let React;
@@ -26,6 +27,7 @@ let ReactDOMClient;
 let ReactServerDOMWriter;
 let ReactServerDOMReader;
 let Suspense;
+let ErrorBoundary;
 
 describe('ReactFlightDOM', () => {
   beforeEach(() => {
@@ -33,6 +35,7 @@ describe('ReactFlightDOM', () => {
     act = require('jest-react').act;
     const WebpackMock = require('./utils/WebpackMock');
     clientExports = WebpackMock.clientExports;
+    clientModuleError = WebpackMock.clientModuleError;
     webpackMap = WebpackMock.webpackMap;
 
     Stream = require('stream');
@@ -41,6 +44,22 @@ describe('ReactFlightDOM', () => {
     ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
     ReactServerDOMReader = require('react-server-dom-webpack');
+
+    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() {
@@ -319,22 +338,6 @@ describe('ReactFlightDOM', () => {
 
     // 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;
-      }
-    }
-
     function MyErrorBoundary({children}) {
       return (
         <ErrorBoundary fallback={e => <p>{e.message}</p>}>
@@ -605,22 +608,6 @@ describe('ReactFlightDOM', () => {
   it('should be able to complete after aborting and throw the reason client-side', async () => {
     const reportedErrors = [];
 
-    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 {writable, readable} = getTestStream();
     const {pipe, abort} = ReactServerDOMWriter.renderToPipeableStream(
       <div>
@@ -661,4 +648,159 @@ describe('ReactFlightDOM', () => {
 
     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} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <ClientComponent prop={ClientReference} />
+      </div>,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      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} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <ClientComponent prop={ClientReference} />
+      </div>,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      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(async () => {
+      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} = ReactServerDOMWriter.renderToPipeableStream(
+      <div>
+        <ClientComponent />
+      </div>,
+      webpackMap,
+      {
+        onError(x) {
+          reportedErrors.push(x);
+        },
+      },
+    );
+    pipe(writable);
+
+    const response = ReactServerDOMReader.createFromReadableStream(readable);
+
+    const container = document.createElement('div');
+    const root = ReactDOMClient.createRoot(container);
+
+    function App({res}) {
+      return res.readRoot();
+    }
+
+    await act(async () => {
+      root.render(
+        <ErrorBoundary fallback={e => <p>{e.message}</p>}>
+          <Suspense fallback={<p>(loading)</p>}>
+            <App res={response} />
+          </Suspense>
+        </ErrorBoundary>,
+      );
+    });
+    expect(container.innerHTML).toBe('<p>bug in the bundler</p>');
+
+    expect(reportedErrors).toEqual([]);
+  });
 });
diff --git a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
index 78f78505b6b2..93d06bf2649a 100644
--- a/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
+++ b/packages/react-server-dom-webpack/src/__tests__/utils/WebpackMock.js
@@ -12,8 +12,12 @@ const Module = require('module');
 
 let webpackModuleIdx = 0;
 const webpackModules = {};
+const webpackErroredModules = {};
 const webpackMap = {};
 global.__webpack_require__ = function(id) {
+  if (webpackErroredModules[id]) {
+    throw webpackErroredModules[id];
+  }
   return webpackModules[id];
 };
 
@@ -36,6 +40,27 @@ Module._extensions['.client.js'] = previousLoader;
 exports.webpackMap = webpackMap;
 exports.webpackModules = webpackModules;
 
+exports.clientModuleError = function clientModuleError(moduleError) {
+  const idx = '' + webpackModuleIdx++;
+  webpackErroredModules[idx] = moduleError;
+  const path = url.pathToFileURL(idx).href;
+  webpackMap[path] = {
+    '': {
+      id: idx,
+      chunks: [],
+      name: '',
+    },
+    '*': {
+      id: idx,
+      chunks: [],
+      name: '*',
+    },
+  };
+  const mod = {exports: {}};
+  nodeLoader(mod, idx);
+  return mod.exports;
+};
+
 exports.clientExports = function clientExports(moduleExports) {
   const idx = '' + webpackModuleIdx++;
   webpackModules[idx] = moduleExports;
@@ -53,17 +78,20 @@ exports.clientExports = function clientExports(moduleExports) {
     },
   };
   if (typeof moduleExports.then === 'function') {
-    moduleExports.then(asyncModuleExports => {
-      for (const name in asyncModuleExports) {
-        webpackMap[path] = {
-          [name]: {
-            id: idx,
-            chunks: [],
-            name: name,
-          },
-        };
-      }
-    });
+    moduleExports.then(
+      asyncModuleExports => {
+        for (const name in asyncModuleExports) {
+          webpackMap[path] = {
+            [name]: {
+              id: idx,
+              chunks: [],
+              name: name,
+            },
+          };
+        }
+      },
+      () => {},
+    );
   }
   for (const name in moduleExports) {
     webpackMap[path] = {

From c739cef2fc628e50ffbb71d9f91f12c4e8e8cf36 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Mon, 12 Sep 2022 10:25:01 -0400
Subject: [PATCH 1572/1603] Flow: ReactFiberHotReloading recursive type
 (#25225)

---
 .../src/ReactFiberHotReloading.js             | 34 ++++++++++++++-----
 .../src/ReactFiberHotReloading.new.js         | 33 ++++++------------
 .../src/ReactFiberHotReloading.old.js         | 33 ++++++------------
 3 files changed, 45 insertions(+), 55 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.js b/packages/react-reconciler/src/ReactFiberHotReloading.js
index 35fa032d2116..0d3fdca45cef 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.js
@@ -7,16 +7,11 @@
  * @flow
  */
 
-import {enableNewReconciler} from 'shared/ReactFeatureFlags';
+import type {Instance} from './ReactFiberHostConfig';
+import type {FiberRoot} from './ReactInternalTypes';
+import type {ReactNodeList} from 'shared/ReactTypes';
 
-export type {
-  Family,
-  RefreshUpdate,
-  SetRefreshHandler,
-  ScheduleRefresh,
-  ScheduleRoot,
-  FindHostInstancesForRefresh,
-} from './ReactFiberHotReloading';
+import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
 import {
   setRefreshHandler as setRefreshHandler_old,
@@ -42,6 +37,27 @@ import {
   findHostInstancesForRefresh as findHostInstancesForRefresh_new,
 } from './ReactFiberHotReloading.new';
 
+export type Family = {
+  current: any,
+};
+
+export type RefreshUpdate = {
+  staleFamilies: Set<Family>,
+  updatedFamilies: Set<Family>,
+};
+
+// Resolves type to a family.
+export type RefreshHandler = any => Family | void;
+
+// Used by React Refresh runtime through DevTools Global Hook.
+export type SetRefreshHandler = (handler: RefreshHandler | null) => void;
+export type ScheduleRefresh = (root: FiberRoot, update: RefreshUpdate) => void;
+export type ScheduleRoot = (root: FiberRoot, element: ReactNodeList) => void;
+export type FindHostInstancesForRefresh = (
+  root: FiberRoot,
+  families: Array<Family>,
+) => Set<Instance>;
+
 export const setRefreshHandler = enableNewReconciler
   ? setRefreshHandler_new
   : setRefreshHandler_old;
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
index b40a020620e6..4f289fe4195e 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js
@@ -10,11 +10,19 @@
 /* eslint-disable react-internal/prod-error-codes */
 
 import type {ReactElement} from 'shared/ReactElementType';
-import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Instance} from './ReactFiberHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import type {
+  Family,
+  FindHostInstancesForRefresh,
+  RefreshHandler,
+  RefreshUpdate,
+  ScheduleRefresh,
+  ScheduleRoot,
+} from './ReactFiberHotReloading';
+
 import {
   flushSync,
   scheduleUpdateOnFiber,
@@ -40,27 +48,6 @@ import {
   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;
-export type FindHostInstancesForRefresh = (
-  root: FiberRoot,
-  families: Array<Family>,
-) => Set<Instance>;
-
 let resolveFamily: RefreshHandler | null = null;
 // $FlowFixMe Flow gets confused by a WeakSet feature check below.
 let failedBoundaries: WeakSet<Fiber> | null = null;
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
index 866b0a757818..55f0f94cf8a4 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js
@@ -10,11 +10,19 @@
 /* eslint-disable react-internal/prod-error-codes */
 
 import type {ReactElement} from 'shared/ReactElementType';
-import type {Fiber} from './ReactInternalTypes';
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Instance} from './ReactFiberHostConfig';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
+import type {
+  Family,
+  FindHostInstancesForRefresh,
+  RefreshHandler,
+  RefreshUpdate,
+  ScheduleRefresh,
+  ScheduleRoot,
+} from './ReactFiberHotReloading';
+
 import {
   flushSync,
   scheduleUpdateOnFiber,
@@ -40,27 +48,6 @@ import {
   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;
-export type FindHostInstancesForRefresh = (
-  root: FiberRoot,
-  families: Array<Family>,
-) => Set<Instance>;
-
 let resolveFamily: RefreshHandler | null = null;
 // $FlowFixMe Flow gets confused by a WeakSet feature check below.
 let failedBoundaries: WeakSet<Fiber> | null = null;

From 9328988c024800de05dfab70e55cfd0999445d8a Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Mon, 12 Sep 2022 13:44:58 -0400
Subject: [PATCH 1573/1603] Flow: fix Fiber typed as any (#25241)

---
 .../react-dom/src/events/SyntheticEvent.js    |  4 +-
 .../events/plugins/BeforeInputEventPlugin.js  | 10 ++++-
 .../src/events/plugins/ChangeEventPlugin.js   |  5 ++-
 .../events/plugins/EnterLeaveEventPlugin.js   |  8 +++-
 .../src/events/plugins/SelectEventPlugin.js   |  5 ++-
 .../src/events/plugins/SimpleEventPlugin.js   |  7 +++-
 .../src/ReactFabricEventEmitter.js            |  5 ++-
 .../src/ReactFiberCacheComponent.new.js       |  1 +
 .../src/ReactFiberCacheComponent.old.js       |  1 +
 .../src/ReactFiberConcurrentUpdates.new.js    |  2 +-
 .../src/ReactFiberConcurrentUpdates.old.js    |  2 +-
 .../src/ReactFiberLane.new.js                 |  2 +-
 .../src/ReactFiberLane.old.js                 |  2 +-
 .../src/ReactFiberTransition.new.js           |  2 +-
 .../src/ReactFiberTransition.old.js           |  2 +-
 .../src/ReactFiberTransitionPool.old.js       |  2 +-
 .../src/ReactFiberTreeContext.new.js          |  2 +
 .../src/ReactFiberTreeContext.old.js          |  2 +
 .../src/getComponentNameFromFiber.js          |  1 +
 packages/shared/ReactTypes.js                 |  2 +
 scripts/flow/react-native-host-hooks.js       | 41 +++++++++++--------
 21 files changed, 73 insertions(+), 35 deletions(-)

diff --git a/packages/react-dom/src/events/SyntheticEvent.js b/packages/react-dom/src/events/SyntheticEvent.js
index 0da906d71289..87bdad3548cd 100644
--- a/packages/react-dom/src/events/SyntheticEvent.js
+++ b/packages/react-dom/src/events/SyntheticEvent.js
@@ -9,6 +9,8 @@
 
 /* eslint valid-typeof: 0 */
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
 import assign from 'shared/assign';
 import getEventCharCode from './getEventCharCode';
 
@@ -44,7 +46,7 @@ function createSyntheticEvent(Interface: EventInterfaceType) {
   function SyntheticBaseEvent(
     reactName: string | null,
     reactEventType: string,
-    targetInst: Fiber,
+    targetInst: Fiber | null,
     nativeEvent: {[propName: string]: mixed, ...},
     nativeEventTarget: null | EventTarget,
   ) {
diff --git a/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js b/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
index 5e413a3459e1..c9f18c6abf7c 100644
--- a/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/BeforeInputEventPlugin.js
@@ -12,6 +12,7 @@ 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';
 
@@ -228,7 +229,8 @@ function extractCompositionEvent(
 
   const listeners = accumulateTwoPhaseListeners(targetInst, eventType);
   if (listeners.length > 0) {
-    const event = new SyntheticCompositionEvent(
+    // $FlowFixMe[incompatible-type]
+    const event: ReactSyntheticEvent = new SyntheticCompositionEvent(
       eventType,
       domEventName,
       null,
@@ -239,10 +241,12 @@ function extractCompositionEvent(
     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;
       }
     }
@@ -398,7 +402,8 @@ function extractBeforeInputEvent(
 
   const listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput');
   if (listeners.length > 0) {
-    const event = new SyntheticInputEvent(
+    // $FlowFixMe[incompatible-type]
+    const event: ReactSyntheticEvent = new SyntheticInputEvent(
       'onBeforeInput',
       'beforeinput',
       null,
@@ -406,6 +411,7 @@ function extractBeforeInputEvent(
       nativeEventTarget,
     );
     dispatchQueue.push({event, listeners});
+    // $FlowFixMe[incompatible-use]
     event.data = chars;
   }
 }
diff --git a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
index 8985c50c71f9..cc99bd3ad126 100644
--- a/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/ChangeEventPlugin.js
@@ -10,6 +10,8 @@ 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';
@@ -57,7 +59,8 @@ function createAndAccumulateChangeEvent(
   enqueueStateRestore(((target: any): Node));
   const listeners = accumulateTwoPhaseListeners(inst, 'onChange');
   if (listeners.length > 0) {
-    const event = new SyntheticEvent(
+    // $FlowFixMe[incompatible-type]
+    const event: ReactSyntheticEvent = new SyntheticEvent(
       'onChange',
       'change',
       null,
diff --git a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
index ea7e3fac1cd5..ef90afcec041 100644
--- a/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/EnterLeaveEventPlugin.js
@@ -11,6 +11,8 @@ 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';
@@ -21,7 +23,6 @@ import {
   isContainerMarkedAsRoot,
 } from '../../client/ReactDOMComponentTree';
 import {accumulateEnterLeaveTwoPhaseListeners} from '../DOMPluginEventSystem';
-import type {KnownReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {getNearestMountedFiber} from 'react-reconciler/src/ReactFiberTreeReflection';
@@ -133,7 +134,9 @@ function extractEvents(
   const fromNode = from == null ? win : getNodeFromInstance(from);
   const toNode = to == null ? win : getNodeFromInstance(to);
 
-  const leave = new SyntheticEventCtor(
+  // $FlowFixMe[prop-missing]
+  // $FlowFixMe[incompatible-type]
+  const leave: KnownReactSyntheticEvent = new SyntheticEventCtor(
     leaveEventType,
     eventTypePrefix + 'leave',
     from,
@@ -149,6 +152,7 @@ function extractEvents(
   // the first ancestor. Next time, we will ignore the event.
   const nativeTargetInst = getClosestInstanceFromNode((nativeEventTarget: any));
   if (nativeTargetInst === targetInst) {
+    // $FlowFixMe[prop-missing]
     const enterEvent: KnownReactSyntheticEvent = new SyntheticEventCtor(
       enterEventType,
       eventTypePrefix + 'enter',
diff --git a/packages/react-dom/src/events/plugins/SelectEventPlugin.js b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
index befa735be878..2032b0256532 100644
--- a/packages/react-dom/src/events/plugins/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SelectEventPlugin.js
@@ -11,6 +11,8 @@ 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';
@@ -114,7 +116,8 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
       'onSelect',
     );
     if (listeners.length > 0) {
-      const event = new SyntheticEvent(
+      // $FlowFixMe[incompatible-type]
+      const event: ReactSyntheticEvent = new SyntheticEvent(
         'onSelect',
         'select',
         null,
diff --git a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
index 03bf9484b2c0..07c9ec94c710 100644
--- a/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
+++ b/packages/react-dom/src/events/plugins/SimpleEventPlugin.js
@@ -12,6 +12,7 @@ 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,
@@ -172,7 +173,8 @@ function extractEvents(
     );
     if (listeners.length > 0) {
       // Intentionally create event lazily.
-      const event = new SyntheticEventCtor(
+      // $FlowFixMe[incompatible-type]
+      const event: ReactSyntheticEvent = new SyntheticEventCtor(
         reactName,
         reactEventType,
         null,
@@ -204,7 +206,8 @@ function extractEvents(
     );
     if (listeners.length > 0) {
       // Intentionally create event lazily.
-      const event = new SyntheticEventCtor(
+      // $FlowFixMe[incompatible-type]
+      const event: ReactSyntheticEvent = new SyntheticEventCtor(
         reactName,
         reactEventType,
         null,
diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
index c3b89e91779a..12ba859bf70f 100644
--- a/packages/react-native-renderer/src/ReactFabricEventEmitter.js
+++ b/packages/react-native-renderer/src/ReactFabricEventEmitter.js
@@ -11,7 +11,10 @@ import type {AnyNativeEvent} from './legacy-events/PluginModuleType';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {LegacyPluginModule} from './legacy-events/PluginModuleType';
 import type {ReactSyntheticEvent} from './legacy-events/ReactSyntheticEventType';
-import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
+import type {
+  RNTopLevelEventType,
+  TopLevelType,
+} from './legacy-events/TopLevelEventTypes';
 
 import {registrationNameModules} from './legacy-events/EventPluginRegistry';
 import {batchedUpdates} from './legacy-events/ReactGenericBatching';
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 2552ca7a4fa9..92c4f6045073 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
 import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index 1fd8c144bc5e..1955b22e9f76 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactContext} from 'shared/ReactTypes';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 
 import {enableCache} from 'shared/ReactFeatureFlags';
 import {REACT_CONTEXT_TYPE} from 'shared/ReactSymbols';
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index e49638978202..6b1ecbde7f01 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {
   UpdateQueue as HookQueue,
   Update as HookUpdate,
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 7dd87358cf6a..798506fd9b5e 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {
   UpdateQueue as HookQueue,
   Update as HookUpdate,
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 4aebeba7a205..2dcbe70ee796 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Transition} from './ReactFiberTracingMarkerComponent.new';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.new';
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 5861e9d3d325..6042a1a31c42 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Transition} from './ReactFiberTracingMarkerComponent.old';
 import type {ConcurrentUpdate} from './ReactFiberConcurrentUpdates.old';
 
diff --git a/packages/react-reconciler/src/ReactFiberTransition.new.js b/packages/react-reconciler/src/ReactFiberTransition.new.js
index 527cb89877f6..c095c8e54f14 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.new.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.new.js
@@ -6,7 +6,7 @@
  *
  * @flow
  */
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.new';
 import type {StackCursor} from './ReactFiberStack.new';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.new';
diff --git a/packages/react-reconciler/src/ReactFiberTransition.old.js b/packages/react-reconciler/src/ReactFiberTransition.old.js
index 8323559d58f8..30c2ecfd4ea6 100644
--- a/packages/react-reconciler/src/ReactFiberTransition.old.js
+++ b/packages/react-reconciler/src/ReactFiberTransition.old.js
@@ -6,7 +6,7 @@
  *
  * @flow
  */
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
diff --git a/packages/react-reconciler/src/ReactFiberTransitionPool.old.js b/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
index e78670aa3f94..e89c798be1f9 100644
--- a/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
+++ b/packages/react-reconciler/src/ReactFiberTransitionPool.old.js
@@ -6,7 +6,7 @@
  *
  * @flow
  */
-import type {FiberRoot} from './ReactInternalTypes';
+import type {Fiber, FiberRoot} from './ReactInternalTypes';
 import type {Lanes} from './ReactFiberLane.old';
 import type {StackCursor} from './ReactFiberStack.old';
 import type {Cache, SpawnedCachePool} from './ReactFiberCacheComponent.old';
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.new.js b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
index f9c5104ed6b1..f1c23f61b5a4 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.new.js
@@ -60,6 +60,8 @@
 // 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.new';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
diff --git a/packages/react-reconciler/src/ReactFiberTreeContext.old.js b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
index 840335d00c4e..69d7f75dbac1 100644
--- a/packages/react-reconciler/src/ReactFiberTreeContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberTreeContext.old.js
@@ -60,6 +60,8 @@
 // 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.old';
 import {clz32} from './clz32';
 import {Forked, NoFlags} from './ReactFiberFlags';
diff --git a/packages/react-reconciler/src/getComponentNameFromFiber.js b/packages/react-reconciler/src/getComponentNameFromFiber.js
index 979914b7c4ba..883ac838b975 100644
--- a/packages/react-reconciler/src/getComponentNameFromFiber.js
+++ b/packages/react-reconciler/src/getComponentNameFromFiber.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactContext, ReactProviderType} from 'shared/ReactTypes';
+import type {Fiber} from './ReactInternalTypes';
 
 import {enableLegacyHidden} from 'shared/ReactFeatureFlags';
 
diff --git a/packages/shared/ReactTypes.js b/packages/shared/ReactTypes.js
index 6b36a7bdffd9..5ef83306706a 100644
--- a/packages/shared/ReactTypes.js
+++ b/packages/shared/ReactTypes.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+
 export type ReactNode =
   | React$Element<any>
   | ReactPortal
diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js
index 083b9f6e0f09..86f5cabe7400 100644
--- a/scripts/flow/react-native-host-hooks.js
+++ b/scripts/flow/react-native-host-hooks.js
@@ -9,16 +9,21 @@
 
 /* eslint-disable */
 
-import type {
-  MeasureOnSuccessCallback,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  ReactNativeBaseComponentViewConfig,
-  ViewConfigGetter,
-} from 'react-native-renderer/src/ReactNativeTypes';
-import type {RNTopLevelEventType} from 'react-native-renderer/src/legacy-events/TopLevelEventTypes';
-import type {CapturedError} from 'react-reconciler/src/ReactCapturedValue';
-import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+// libdefs cannot actually import. These are supposed to be the types imported
+// from 'react-native-renderer/src/ReactNativeTypes'
+type __MeasureOnSuccessCallback = any;
+type __MeasureInWindowOnSuccessCallback = any;
+type __MeasureLayoutOnSuccessCallback = any;
+type __ReactNativeBaseComponentViewConfig = any;
+type __ViewConfigGetter = 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<{
@@ -53,7 +58,7 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
     ...
   };
   declare export var ReactFiberErrorDialog: {
-    showErrorDialog: (error: CapturedError) => boolean,
+    showErrorDialog: (error: __CapturedError) => boolean,
     ...
   };
   declare export var Platform: {OS: string, ...};
@@ -130,8 +135,8 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface'
     customDirectEventTypes: Object,
     eventTypes: Object,
 
-    register: (name: string, callback: ViewConfigGetter) => string,
-    get: (name: string) => ReactNativeBaseComponentViewConfig,
+    register: (name: string, callback: __ViewConfigGetter) => string,
+    get: (name: string) => __ReactNativeBaseComponentViewConfig,
     ...
   };
   declare export var RawEventEmitter: {
@@ -166,7 +171,7 @@ declare var nativeFabricUIManager: {
   registerEventHandler: (
     callback: (
       eventTarget: null | Object,
-      type: RNTopLevelEventType,
+      type: __RNTopLevelEventType,
       payload: Object,
     ) => void,
   ) => void,
@@ -174,22 +179,22 @@ declare var nativeFabricUIManager: {
   dispatchCommand: (node: Object, command: string, args: Array<any>) => void,
   sendAccessibilityEvent: (node: Object, eventTypeName: string) => void,
 
-  measure: (node: Node, callback: MeasureOnSuccessCallback) => void,
+  measure: (node: Node, callback: __MeasureOnSuccessCallback) => void,
   measureInWindow: (
     node: Node,
-    callback: MeasureInWindowOnSuccessCallback,
+    callback: __MeasureInWindowOnSuccessCallback,
   ) => void,
   measureLayout: (
     node: Node,
     relativeNode: Node,
     onFail: () => void,
-    onSuccess: MeasureLayoutOnSuccessCallback,
+    onSuccess: __MeasureLayoutOnSuccessCallback,
   ) => void,
   findNodeAtPoint: (
     node: Node,
     locationX: number,
     locationY: number,
-    callback: (Fiber) => void,
+    callback: (Object) => void,
   ) => void,
   setIsJSResponder: (
     node: Node,

From ba7b6f4183dacb9ce332f715bcb84ce4cc7c2b8d Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Mon, 12 Sep 2022 14:36:02 -0400
Subject: [PATCH 1574/1603] Flow: upgrade to 0.132 (#25244)

---
 package.json                                        |  2 +-
 packages/react-devtools-inline/src/backend.js       | 13 +++++--------
 packages/react-devtools-inline/src/frontend.js      |  7 ++-----
 .../src/backend/views/Highlighter/Overlay.js        |  4 ++--
 .../react-devtools-shared/src/hooks/astUtils.js     |  9 +++++++--
 .../src/hooks/generateHookMap.js                    |  4 +++-
 .../src/ReactFiberCacheComponent.new.js             |  2 +-
 .../src/ReactFiberCacheComponent.old.js             |  2 +-
 .../src/ReactFlightWebpackPlugin.js                 |  2 +-
 scripts/flow/config/flowconfig                      |  2 +-
 yarn.lock                                           |  8 ++++----
 11 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/package.json b/package.json
index 729772b8eb23..f2444f3cc2e1 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.131",
+    "flow-bin": "^0.132",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js
index 061c447909e3..234c7f5f8853 100644
--- a/packages/react-devtools-inline/src/backend.js
+++ b/packages/react-devtools-inline/src/backend.js
@@ -9,7 +9,7 @@ import setupNativeStyleEditor from 'react-devtools-shared/src/backend/NativeStyl
 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
 import type {Wall} from 'react-devtools-shared/src/types';
 
-function startActivation(contentWindow: window, bridge: BackendBridge) {
+function startActivation(contentWindow: any, bridge: BackendBridge) {
   const onSavedPreferences = data => {
     // This is the only message we're listening for,
     // so it's safe to cleanup after we've received it.
@@ -55,7 +55,7 @@ function startActivation(contentWindow: window, bridge: BackendBridge) {
   bridge.send('getSavedPreferences');
 }
 
-function finishActivation(contentWindow: window, bridge: BackendBridge) {
+function finishActivation(contentWindow: any, bridge: BackendBridge) {
   const agent = new Agent(bridge);
 
   const hook = contentWindow.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -75,7 +75,7 @@ function finishActivation(contentWindow: window, bridge: BackendBridge) {
 }
 
 export function activate(
-  contentWindow: window,
+  contentWindow: any,
   {
     bridge,
   }: {
@@ -89,10 +89,7 @@ export function activate(
   startActivation(contentWindow, bridge);
 }
 
-export function createBridge(
-  contentWindow: window,
-  wall?: Wall,
-): BackendBridge {
+export function createBridge(contentWindow: any, wall?: Wall): BackendBridge {
   const {parent} = contentWindow;
 
   if (wall == null) {
@@ -115,6 +112,6 @@ export function createBridge(
   return (new Bridge(wall): BackendBridge);
 }
 
-export function initialize(contentWindow: window): void {
+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
index b8dc2abe6adb..1e5ea336a477 100644
--- a/packages/react-devtools-inline/src/frontend.js
+++ b/packages/react-devtools-inline/src/frontend.js
@@ -33,10 +33,7 @@ export function createStore(bridge: FrontendBridge, config?: Config): Store {
   });
 }
 
-export function createBridge(
-  contentWindow: window,
-  wall?: Wall,
-): FrontendBridge {
+export function createBridge(contentWindow: any, wall?: Wall): FrontendBridge {
   if (wall == null) {
     wall = {
       listen(fn) {
@@ -58,7 +55,7 @@ export function createBridge(
 }
 
 export function initialize(
-  contentWindow: window,
+  contentWindow: any,
   {
     bridge,
     store,
diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
index 0b4dc5e94c2e..577aaf912860 100644
--- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -148,8 +148,8 @@ class OverlayTip {
 }
 
 export default class Overlay {
-  window: window;
-  tipBoundsWindow: window;
+  window: any;
+  tipBoundsWindow: any;
   container: HTMLElement;
   tip: OverlayTip;
   rects: Array<OverlayRect>;
diff --git a/packages/react-devtools-shared/src/hooks/astUtils.js b/packages/react-devtools-shared/src/hooks/astUtils.js
index 2fe1aa213774..da04a9201814 100644
--- a/packages/react-devtools-shared/src/hooks/astUtils.js
+++ b/packages/react-devtools-shared/src/hooks/astUtils.js
@@ -8,11 +8,16 @@
  */
 
 import {withSyncPerfMeasurements} from 'react-devtools-shared/src/PerformanceLoggingUtils';
-import traverse, {NodePath, Node} from '@babel/traverse';
-import {File} from '@babel/types';
+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,
diff --git a/packages/react-devtools-shared/src/hooks/generateHookMap.js b/packages/react-devtools-shared/src/hooks/generateHookMap.js
index fb6fea95c666..d3633412dd0b 100644
--- a/packages/react-devtools-shared/src/hooks/generateHookMap.js
+++ b/packages/react-devtools-shared/src/hooks/generateHookMap.js
@@ -9,7 +9,9 @@
 
 import {getHookNamesMappingFromAST} from './astUtils';
 import {encode, decode} from 'sourcemap-codec';
-import {File} from '@babel/types';
+
+// Missing types in @babel/types
+type File = any;
 
 export type HookMap = {
   names: $ReadOnlyArray<string>,
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
index 92c4f6045073..2ef2c09d793e 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.new.js
@@ -18,7 +18,7 @@ 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 = enableCache
+const AbortControllerLocal: typeof AbortController = enableCache
   ? typeof AbortController !== 'undefined'
     ? AbortController
     : (function AbortControllerShim() {
diff --git a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
index 1955b22e9f76..672867abf782 100644
--- a/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
+++ b/packages/react-reconciler/src/ReactFiberCacheComponent.old.js
@@ -18,7 +18,7 @@ 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 = enableCache
+const AbortControllerLocal: typeof AbortController = enableCache
   ? typeof AbortController !== 'undefined'
     ? AbortController
     : (function AbortControllerShim() {
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index b3da107e60b9..98d3058029fc 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -327,7 +327,7 @@ export default class ReactFlightWebpackPlugin {
             contextModuleFactory.resolveDependencies(
               fs,
               options,
-              (err2: null | Error, deps: Array<ModuleDependency>) => {
+              (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
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 75e63a4375f1..30ecf58e7e67 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -54,4 +54,4 @@ munge_underscores=false
 %REACT_RENDERER_FLOW_OPTIONS%
 
 [version]
-^0.131.0
+^0.132.0
diff --git a/yarn.lock b/yarn.lock
index 7468b3abbacc..2d71503a7a34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7914,10 +7914,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@^0.131:
-  version "0.131.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.131.0.tgz#d4228b6070afdf3b2a76acdee77a7f3f8e8f5133"
-  integrity sha512-fZmoIBcDrtLhy/NNMxwJysSYzMr1ksRcAOMi3AHSoYXfcuQqTvhGJx+wqjlIOqIwz8RRYm8J4V4JrSJbIKP+Xg==
+flow-bin@^0.132:
+  version "0.132.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.132.0.tgz#8bf80a79630db24bd1422dc2cc4b5e97f97ccb98"
+  integrity sha512-S1g/vnAyNaLUdajmuUHCMl30qqye12gS6mr4LVyswf1k+JDF4efs6SfKmptuvnpitF3LGCVf0TIffChP8ljwnw==
 
 fluent-syntax@0.13.0:
   version "0.13.0"

From 6aa38e74c7960465db4cf4377e26abb3a205f5d9 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Mon, 12 Sep 2022 16:22:50 -0400
Subject: [PATCH 1575/1603] Flow: enable unsafe-addition error (#25242)

---
 packages/react-devtools-shared/src/devtools/store.js         | 1 +
 .../src/devtools/views/Components/TreeContext.js             | 1 +
 .../src/devtools/views/Profiler/SnapshotSelector.js          | 5 ++++-
 packages/react-reconciler/src/ReactFiberCompleteWork.new.js  | 3 +++
 packages/react-reconciler/src/ReactFiberCompleteWork.old.js  | 3 +++
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js      | 1 +
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js      | 1 +
 packages/react-reconciler/src/ReactProfilerTimer.new.js      | 2 ++
 packages/react-reconciler/src/ReactProfilerTimer.old.js      | 2 ++
 scripts/flow/config/flowconfig                               | 4 ----
 10 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index 4c9131c89678..b51597f43a52 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -681,6 +681,7 @@ export default class Store extends EventEmitter<{
             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;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index 1103cc0f6c83..e975bd16fab6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -505,6 +505,7 @@ function reduceSearchState(store: Store, state: State, action: Action): State {
         if (numPrevSearchResults > 0) {
           didRequestSearch = true;
           searchIndex =
+            // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
             searchIndex + 1 < numPrevSearchResults ? searchIndex + 1 : 0;
         }
         break;
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
index 1d4fd41d798a..faf124b5c97a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -126,7 +126,10 @@ export default function SnapshotSelector(_: Props) {
         type="text"
         inputMode="numeric"
         pattern="[0-9]*"
-        value={selectedFilteredCommitIndex + 1}
+        value={
+          // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
+          selectedFilteredCommitIndex + 1
+        }
         size={`${numFilteredCommits}`.length}
         onChange={handleCommitInputChange}
         onClick={handleClick}
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
index 135e9290f549..592bef4fbd25 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js
@@ -662,8 +662,10 @@ function bubbleProperties(completedWork: Fiber) {
         // 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;
       }
@@ -712,6 +714,7 @@ function bubbleProperties(completedWork: Fiber) {
         subtreeFlags |= child.subtreeFlags & StaticMask;
         subtreeFlags |= child.flags & StaticMask;
 
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         treeBaseDuration += child.treeBaseDuration;
         child = child.sibling;
       }
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
index 3fd1bffbc3a9..f3ba7bf0799a 100644
--- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js
@@ -662,8 +662,10 @@ function bubbleProperties(completedWork: Fiber) {
         // 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;
       }
@@ -712,6 +714,7 @@ function bubbleProperties(completedWork: Fiber) {
         subtreeFlags |= child.subtreeFlags & StaticMask;
         subtreeFlags |= child.flags & StaticMask;
 
+        // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
         treeBaseDuration += child.treeBaseDuration;
         child = child.sibling;
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index a40b5ac48072..5e9edf794565 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2217,6 +2217,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         let actualDuration = completedWork.actualDuration;
         let child = completedWork.child;
         while (child !== null) {
+          // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
           actualDuration += child.actualDuration;
           child = child.sibling;
         }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 3db85b0b9b23..d8a0bc883f4d 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2217,6 +2217,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void {
         let actualDuration = completedWork.actualDuration;
         let child = completedWork.child;
         while (child !== null) {
+          // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
           actualDuration += child.actualDuration;
           child = child.sibling;
         }
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.new.js b/packages/react-reconciler/src/ReactProfilerTimer.new.js
index a5a14eae1c24..de88e711cbf7 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.new.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.new.js
@@ -122,6 +122,7 @@ function stopProfilerTimerIfRunningAndRecordDelta(
 
   if (profilerStartTime >= 0) {
     const elapsedTime = now() - profilerStartTime;
+    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
     fiber.actualDuration += elapsedTime;
     if (overrideBaseTime) {
       fiber.selfBaseDuration = elapsedTime;
@@ -215,6 +216,7 @@ function transferActualDuration(fiber: Fiber): void {
   // 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;
   }
diff --git a/packages/react-reconciler/src/ReactProfilerTimer.old.js b/packages/react-reconciler/src/ReactProfilerTimer.old.js
index a5a14eae1c24..de88e711cbf7 100644
--- a/packages/react-reconciler/src/ReactProfilerTimer.old.js
+++ b/packages/react-reconciler/src/ReactProfilerTimer.old.js
@@ -122,6 +122,7 @@ function stopProfilerTimerIfRunningAndRecordDelta(
 
   if (profilerStartTime >= 0) {
     const elapsedTime = now() - profilerStartTime;
+    // $FlowFixMe[unsafe-addition] addition with possible null/undefined value
     fiber.actualDuration += elapsedTime;
     if (overrideBaseTime) {
       fiber.selfBaseDuration = elapsedTime;
@@ -215,6 +216,7 @@ function transferActualDuration(fiber: Fiber): void {
   // 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;
   }
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 30ecf58e7e67..9b47998da988 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -38,10 +38,6 @@
 [lints]
 untyped-type-import=error
 
-# TODO: We might want to enable this this as a error (the default), it
-#       disallows adding undefined and numbers.
-unsafe-addition=off
-
 [options]
 server.max_workers=4
 esproposal.class_static_fields=enable

From f2e4ff082dc273b1958423a5fce04833af43f855 Mon Sep 17 00:00:00 2001
From: Akul Srivastava <akulsr0@gmail.com>
Date: Tue, 13 Sep 2022 06:46:29 +0530
Subject: [PATCH 1576/1603] fix: prettier ignore removed and fixed (#24811)

---
 dangerfile.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/dangerfile.js b/dangerfile.js
index 59bc43466b11..4fa16bb4a734 100644
--- a/dangerfile.js
+++ b/dangerfile.js
@@ -86,8 +86,16 @@ const header = `
 
 function row(result, baseSha, headSha) {
   const diffViewUrl = `https://react-builds.vercel.app/commits/${headSha}/files/${result.path}?compare=${baseSha}`;
-  // prettier-ignore
-  return `| [${result.path}](${diffViewUrl}) | **${change(result.change)}** | ${kbs(result.baseSize)} | ${kbs(result.headSize)} | ${change(result.changeGzip)} | ${kbs(result.baseSizeGzip)} | ${kbs(result.headSizeGzip)}`;
+  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() {

From e52fa4c575e92b27d5d453829c7110bc5193f7a0 Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Tue, 13 Sep 2022 12:08:51 +0100
Subject: [PATCH 1577/1603] Add early exit to strict mode (#25235)

---
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 5 +++++
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 5e9edf794565..fa2e8bd3ecf9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -3172,6 +3172,11 @@ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
   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) {
     doubleInvokeEffectsInDEV(root, child, isInStrictMode);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d8a0bc883f4d..57880c15e502 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -3172,6 +3172,11 @@ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
   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) {
     doubleInvokeEffectsInDEV(root, child, isInStrictMode);

From 5c43c6f02652b0a3f66678a560e84d3110c573b7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Tue, 13 Sep 2022 11:18:57 -0400
Subject: [PATCH 1578/1603] Unwind the current workInProgress if it's suspended
 (#25247)

Usually we complete workInProgress before yielding but if that's the
currently suspended one, we don't yet complete it in case we can
immediately unblock it.

If we get interrupted, however, we must unwind it. Where as we usually
assume that we've already completed it.

This shows up when the current work in progress was a Context that pushed
and then it suspends in its immediate children. If we don't unwind,
it won't pop and so we get an imbalance.
---
 .../src/ReactFiberWorkLoop.new.js             |  4 +-
 .../src/ReactFiberWorkLoop.old.js             |  4 +-
 .../src/__tests__/ReactWakeable-test.js       | 47 +++++++++++++++++++
 3 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index fa2e8bd3ecf9..6f62aa4b1c0b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1651,7 +1651,9 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   }
 
   if (workInProgress !== null) {
-    let interruptedWork = workInProgress.return;
+    let interruptedWork = workInProgressIsSuspended
+      ? workInProgress
+      : workInProgress.return;
     while (interruptedWork !== null) {
       const current = interruptedWork.alternate;
       unwindInterruptedWork(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 57880c15e502..414e2e3343ed 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1651,7 +1651,9 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber {
   }
 
   if (workInProgress !== null) {
-    let interruptedWork = workInProgress.return;
+    let interruptedWork = workInProgressIsSuspended
+      ? workInProgress
+      : workInProgress.return;
     while (interruptedWork !== null) {
       const current = interruptedWork.alternate;
       unwindInterruptedWork(
diff --git a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
index c0ec87f26641..bb15bc7a0686 100644
--- a/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactWakeable-test.js
@@ -339,4 +339,51 @@ describe('ReactWakeable', () => {
     expect(Scheduler).toFlushWithoutYielding();
     expect(root).toMatchRenderedOutput('AB');
   });
+
+  // @gate enableUseHook
+  test('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" />);
+    });
+    expect(Scheduler).toFlushUntilNextPaint([]);
+    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!" />);
+    });
+
+    expect(Scheduler).toHaveYielded(['Hello ', 'world!']);
+
+    expect(root).toMatchRenderedOutput(<div>Hello world!</div>);
+  });
 });

From 271bf90a94bf177e16e4482e6060c57f742eaf61 Mon Sep 17 00:00:00 2001
From: Robert Balicki <robertbalicki@fb.com>
Date: Tue, 13 Sep 2022 11:24:10 -0400
Subject: [PATCH 1579/1603] [react devtools][easy] Centralize calls to
 patchConsoleUsingWindowValues (#25222)

* Instead of reading from window in two separate places, do this in a single function
* Add some type safety
---
 .../src/backend/console.js                    | 34 +++++++++++++++++++
 .../src/backend/renderer.js                   | 20 ++---------
 packages/react-devtools-shared/src/hook.js    | 20 ++---------
 3 files changed, 38 insertions(+), 36 deletions(-)

diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index f5718d558f3f..0ca957f216c6 100644
--- a/packages/react-devtools-shared/src/backend/console.js
+++ b/packages/react-devtools-shared/src/backend/console.js
@@ -371,3 +371,37 @@ export function unpatchForStrictMode(): void {
     }
   }
 }
+
+export function patchConsoleUsingWindowValues() {
+  const appendComponentStack =
+    castBool(window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__) ?? true;
+  const breakOnConsoleErrors =
+    castBool(window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__) ?? false;
+  const showInlineWarningsAndErrors =
+    castBool(window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__) ?? true;
+  const hideConsoleLogsInStrictMode =
+    castBool(window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__) ??
+    false;
+  const browserTheme =
+    castBrowserTheme(window.__REACT_DEVTOOLS_BROWSER_THEME__) ?? 'dark';
+
+  patch({
+    appendComponentStack,
+    breakOnConsoleErrors,
+    showInlineWarningsAndErrors,
+    hideConsoleLogsInStrictMode,
+    browserTheme,
+  });
+}
+
+function castBool(v: any): ?boolean {
+  if (v === true || v === false) {
+    return v;
+  }
+}
+
+function castBrowserTheme(v: any): ?BrowserTheme {
+  if (v === 'light' || v === 'dark' || v === 'auto') {
+    return v;
+  }
+}
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
index 7ef225dee1c3..9e0d8c278c45 100644
--- a/packages/react-devtools-shared/src/backend/renderer.js
+++ b/packages/react-devtools-shared/src/backend/renderer.js
@@ -63,7 +63,7 @@ import {
 } from '../constants';
 import {inspectHooksOfFiber} from 'react-debug-tools';
 import {
-  patch as patchConsole,
+  patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
   patchForStrictMode as patchConsoleForStrictMode,
   unpatchForStrictMode as unpatchConsoleForStrictMode,
@@ -817,23 +817,7 @@ export function attach(
   // The renderer interface can't read these preferences directly,
   // because it is stored in localStorage within the context of the extension.
   // It relies on the extension to pass the preference through via the global.
-  const appendComponentStack =
-    window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
-  const breakOnConsoleErrors =
-    window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
-  const showInlineWarningsAndErrors =
-    window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-  const hideConsoleLogsInStrictMode =
-    window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-  const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
-
-  patchConsole({
-    appendComponentStack,
-    breakOnConsoleErrors,
-    showInlineWarningsAndErrors,
-    hideConsoleLogsInStrictMode,
-    browserTheme,
-  });
+  patchConsoleUsingWindowValues();
 
   const debug = (
     name: string,
diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
index 29cdea1e2b0b..4ebec51074bd 100644
--- a/packages/react-devtools-shared/src/hook.js
+++ b/packages/react-devtools-shared/src/hook.js
@@ -12,7 +12,7 @@ import type {BrowserTheme} from 'react-devtools-shared/src/devtools/views/DevToo
 import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
 
 import {
-  patch as patchConsole,
+  patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
 } from './backend/console';
 
@@ -343,16 +343,6 @@ export function installHook(target: any): DevToolsHook | null {
     // (See comments in the try/catch below for more context on inlining.)
     if (!__TEST__ && !__EXTENSION__) {
       try {
-        const appendComponentStack =
-          window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ !== false;
-        const breakOnConsoleErrors =
-          window.__REACT_DEVTOOLS_BREAK_ON_CONSOLE_ERRORS__ === true;
-        const showInlineWarningsAndErrors =
-          window.__REACT_DEVTOOLS_SHOW_INLINE_WARNINGS_AND_ERRORS__ !== false;
-        const hideConsoleLogsInStrictMode =
-          window.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ === true;
-        const browserTheme = window.__REACT_DEVTOOLS_BROWSER_THEME__;
-
         // The installHook() function is injected by being stringified in the browser,
         // so imports outside of this function do not get included.
         //
@@ -361,13 +351,7 @@ export function installHook(target: any): DevToolsHook | null {
         // and the object itself will be undefined as well for the reasons mentioned above,
         // so we use try/catch instead.
         registerRendererWithConsole(renderer);
-        patchConsole({
-          appendComponentStack,
-          breakOnConsoleErrors,
-          showInlineWarningsAndErrors,
-          hideConsoleLogsInStrictMode,
-          browserTheme,
-        });
+        patchConsoleUsingWindowValues();
       } catch (error) {}
     }
 

From e6a062bd2a1d53f7349a0d0950d89593b63a0c3c Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Tue, 13 Sep 2022 12:03:20 -0400
Subject: [PATCH 1580/1603] Flow: add simple explicit export types to Devtools
 (#25251)

---
 .../react-devtools-core/src/standalone.js     |  4 +-
 .../src/backend/views/utils.js                | 19 +++++-
 packages/react-devtools-shared/src/bridge.js  |  4 +-
 .../react-devtools-shared/src/constants.js    |  4 +-
 .../src/devtools/ContextMenu/Contexts.js      |  2 +-
 .../src/devtools/utils.js                     | 11 ++--
 .../src/devtools/views/ButtonIcon.js          |  2 +-
 .../src/devtools/views/Components/Badge.js    |  2 +-
 .../Components/CannotSuspendWarningMessage.js |  2 +-
 .../views/Components/ComponentSearchInput.js  |  2 +-
 .../devtools/views/Components/EditableName.js |  2 +-
 .../views/Components/EditableValue.js         |  2 +-
 .../src/devtools/views/Components/Element.js  |  2 +-
 .../devtools/views/Components/HocBadges.js    |  2 +-
 .../Components/InspectHostNodesToggle.js      |  2 +-
 .../views/Components/InspectedElement.js      |  2 +-
 .../Components/InspectedElementContextTree.js |  2 +-
 .../InspectedElementErrorBoundary.js          |  2 +-
 .../InspectedElementErrorsAndWarningsTree.js  |  2 +-
 .../Components/InspectedElementHooksTree.js   |  4 +-
 .../Components/InspectedElementPropsTree.js   |  2 +-
 .../Components/InspectedElementStateTree.js   |  2 +-
 .../InspectedElementStyleXPlugin.js           |  2 +-
 .../InspectedElementSuspenseToggle.js         |  2 +-
 .../views/Components/InspectedElementView.js  |  2 +-
 .../views/Components/LoadingAnimation.js      |  2 +-
 .../NativeStyleEditor/AutoSizeInput.js        |  2 +-
 .../NativeStyleEditor/LayoutViewer.js         |  2 +-
 .../NativeStyleEditor/StyleEditor.js          |  2 +-
 .../Components/NativeStyleEditor/index.js     |  2 +-
 .../views/Components/NewArrayValue.js         |  2 +-
 .../devtools/views/Components/NewKeyValue.js  |  2 +-
 .../devtools/views/Components/OwnersStack.js  |  2 +-
 .../views/Components/SelectedTreeHighlight.js |  2 +-
 .../src/devtools/views/Components/Tree.js     |  2 +-
 .../views/Components/reach-ui/menu-button.js  |  8 ++-
 .../views/Components/reach-ui/tooltip.js      |  2 +-
 .../src/devtools/views/DevTools.js            |  2 +-
 .../views/ErrorBoundary/CaughtErrorView.js    |  2 +-
 .../devtools/views/ErrorBoundary/ErrorView.js |  2 +-
 .../views/ErrorBoundary/ReportNewIssue.js     |  2 +-
 .../ErrorBoundary/SearchingGitHubIssues.js    |  2 +-
 .../ErrorBoundary/SuspendingErrorView.js      |  2 +-
 .../views/ErrorBoundary/TimeoutView.js        |  2 +-
 .../UnsupportedBridgeOperationView.js         |  2 +-
 .../ErrorBoundary/UpdateExistingIssue.js      |  2 +-
 .../views/ErrorBoundary/WorkplaceGroup.js     |  2 +-
 .../src/devtools/views/Icon.js                |  6 +-
 .../src/devtools/views/ModalDialog.js         |  4 +-
 .../src/devtools/views/Profiler/ChartNode.js  |  2 +-
 .../Profiler/ClearProfilingDataButton.js      |  2 +-
 .../views/Profiler/CommitFlamegraph.js        |  2 +-
 .../devtools/views/Profiler/CommitRanked.js   |  2 +-
 .../views/Profiler/HoveredFiberInfo.js        |  2 +-
 .../devtools/views/Profiler/NoCommitData.js   |  2 +-
 .../views/Profiler/NoProfilingData.js         |  2 +-
 .../devtools/views/Profiler/ProcessingData.js |  2 +-
 .../views/Profiler/ProfilerContext.js         |  2 +-
 .../Profiler/ProfilingImportExportButtons.js  |  2 +-
 .../views/Profiler/ProfilingNotSupported.js   |  2 +-
 .../devtools/views/Profiler/RecordToggle.js   |  2 +-
 .../views/Profiler/RecordingInProgress.js     |  2 +-
 .../views/Profiler/ReloadAndProfileButton.js  |  2 +-
 .../devtools/views/Profiler/RootSelector.js   |  2 +-
 .../views/Profiler/SidebarCommitInfo.js       |  2 +-
 .../views/Profiler/SidebarEventInfo.js        |  2 +-
 .../Profiler/SidebarSelectedFiberInfo.js      |  2 +-
 .../views/Profiler/SnapshotCommitList.js      |  2 +-
 .../views/Profiler/SnapshotSelector.js        |  2 +-
 .../src/devtools/views/Profiler/Tooltip.js    |  7 ++-
 .../src/devtools/views/Profiler/Updaters.js   |  2 +-
 .../devtools/views/Profiler/WhatChanged.js    |  2 +-
 .../src/devtools/views/Profiler/utils.js      | 13 +++--
 .../src/devtools/views/ReactLogo.js           |  2 +-
 .../src/devtools/views/SearchInput.js         |  2 +-
 .../views/Settings/ComponentsSettings.js      |  2 +-
 .../views/Settings/DebuggingSettings.js       |  2 +-
 .../views/Settings/GeneralSettings.js         |  2 +-
 .../views/Settings/ProfilerSettings.js        |  2 +-
 .../devtools/views/Settings/SettingsModal.js  |  2 +-
 .../Settings/SettingsModalContextToggle.js    |  2 +-
 .../src/devtools/views/TabBar.js              |  2 +-
 .../src/devtools/views/ThemeProvider.js       |  6 +-
 .../src/devtools/views/Toggle.js              |  2 +-
 .../views/WarnIfLegacyBackendDetected.js      |  2 +-
 .../src/devtools/views/hooks.js               |  5 +-
 .../react-devtools-shared/src/hydration.js    | 18 +++---
 .../src/app/DeeplyNestedComponents/index.js   |  2 +-
 .../src/app/EditableProps/index.js            |  2 +-
 .../src/app/ElementTypes/index.js             |  2 +-
 .../src/app/ErrorBoundaries/index.js          |  2 +-
 .../src/app/Hydration/index.js                |  2 +-
 .../src/app/Iframe/index.js                   |  2 +-
 .../src/app/InlineWarnings/index.js           |  2 +-
 .../InspectableElements/CircularReferences.js |  2 +-
 .../src/app/InspectableElements/Contexts.js   |  2 +-
 .../app/InspectableElements/CustomHooks.js    |  2 +-
 .../app/InspectableElements/CustomObject.js   |  2 +-
 .../InspectableElements/EdgeCaseObjects.js    |  2 +-
 .../InspectableElements.js                    |  2 +-
 .../app/InspectableElements/NestedProps.js    |  2 +-
 .../src/app/InspectableElements/SymbolKeys.js |  2 +-
 .../UnserializableProps.js                    |  2 +-
 .../src/app/PartiallyStrictApp/index.js       |  2 +-
 .../src/app/ReactNativeWeb/index.js           |  2 +-
 .../src/app/SuspenseTree/index.js             |  2 +-
 .../src/app/ToDoList/List.js                  |  2 +-
 .../src/e2e-apps/ListApp.js                   |  2 +-
 .../src/e2e-apps/ListAppLegacy.js             |  2 +-
 .../react-devtools-timeline/src/CanvasPage.js |  2 +-
 .../src/EventTooltip.js                       |  2 +-
 .../react-devtools-timeline/src/Timeline.js   |  2 +-
 .../src/TimelineNotSupported.js               |  2 +-
 .../src/TimelineSearchInput.js                |  2 +-
 .../content-views/ComponentMeasuresView.js    |  2 +-
 .../src/content-views/FlamechartView.js       |  9 ++-
 .../src/content-views/NativeEventsView.js     |  2 +-
 .../src/content-views/NetworkMeasuresView.js  |  2 +-
 .../src/content-views/ReactMeasuresView.js    |  2 +-
 .../src/content-views/SchedulingEventsView.js |  2 +-
 .../src/content-views/SnapshotsView.js        |  2 +-
 .../src/content-views/SuspenseEventsView.js   |  2 +-
 .../src/content-views/ThrownErrorsView.js     |  2 +-
 .../src/content-views/TimeAxisMarkersView.js  |  2 +-
 .../src/content-views/UserTimingMarksView.js  |  2 +-
 .../src/content-views/constants.js            | 58 ++++++++++++++++++-
 .../src/utils/formatting.js                   |  2 +-
 .../src/utils/getBatchRange.js                |  6 +-
 .../src/utils/useSmartTooltip.js              |  2 +-
 .../src/view-base/HorizontalPanAndZoomView.js |  5 +-
 .../src/view-base/resizable/ResizableView.js  | 17 +++---
 .../VerticalScrollBarView.js                  |  2 +-
 .../VerticalScrollOverflowView.js             |  4 +-
 133 files changed, 275 insertions(+), 163 deletions(-)

diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js
index 4b594acf6c2e..4a2ba8ff08e6 100644
--- a/packages/react-devtools-core/src/standalone.js
+++ b/packages/react-devtools-core/src/standalone.js
@@ -266,7 +266,7 @@ function initialize(socket: WebSocket) {
 
 let startServerTimeoutID: TimeoutID | null = null;
 
-function connectToSocket(socket: WebSocket) {
+function connectToSocket(socket: WebSocket): {close(): void} {
   socket.onerror = err => {
     onDisconnected();
     log.error('Error with websocket connection', err);
@@ -298,7 +298,7 @@ function startServer(
   host?: string = 'localhost',
   httpsOptions?: ServerOptions,
   loggerOptions?: LoggerOptions,
-) {
+): {close(): void} {
   registerDevToolsEventLogger(loggerOptions?.surface ?? 'standalone');
 
   const useHttps = !!httpsOptions;
diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js
index a677c7447efc..35e8d17192c6 100644
--- a/packages/react-devtools-shared/src/backend/views/utils.js
+++ b/packages/react-devtools-shared/src/backend/views/utils.js
@@ -39,7 +39,7 @@ export function getOwnerIframe(node: HTMLElement): HTMLElement | null {
 
 // Get a bounding client rect for a node, with an
 // offset added to compensate for its border.
-export function getBoundingClientRectWithBorderOffset(node: HTMLElement) {
+export function getBoundingClientRectWithBorderOffset(node: HTMLElement): Rect {
   const dimensions = getElementDimensions(node);
   return mergeRectOffsets([
     node.getBoundingClientRect(),
@@ -109,7 +109,22 @@ export function getNestedBoundingClientRect(
   }
 }
 
-export function getElementDimensions(domElement: Element) {
+export function getElementDimensions(
+  domElement: Element,
+): {
+  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),
diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js
index fe6ba4407a92..b5dd931ef0a3 100644
--- a/packages/react-devtools-shared/src/bridge.js
+++ b/packages/react-devtools-shared/src/bridge.js
@@ -375,7 +375,7 @@ class Bridge<
     }
   }
 
-  _flush = () => {
+  _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.
@@ -400,7 +400,7 @@ class Bridge<
 
   // Temporarily support older standalone backends by forwarding "overrideValueAtPath" commands
   // to the older message types they may be listening to.
-  overrideValueAtPath = ({
+  overrideValueAtPath: OverrideValueAtPath => void = ({
     id,
     path,
     rendererID,
diff --git a/packages/react-devtools-shared/src/constants.js b/packages/react-devtools-shared/src/constants.js
index 1ef8b4dd8083..e51ced674d20 100644
--- a/packages/react-devtools-shared/src/constants.js
+++ b/packages/react-devtools-shared/src/constants.js
@@ -395,11 +395,11 @@ export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
 //
 // 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 = parseInt(
+const COMFORTABLE_LINE_HEIGHT: number = parseInt(
   THEME_STYLES.comfortable['--line-height-data'],
   10,
 );
-const COMPACT_LINE_HEIGHT = parseInt(
+const COMPACT_LINE_HEIGHT: number = parseInt(
   THEME_STYLES.compact['--line-height-data'],
   10,
 );
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
index 89f823b13284..f8d310a02f72 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
@@ -61,7 +61,7 @@ function showMenu({
   }
 }
 
-function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn) {
+function registerMenu(id: string, showFn: ShowFn, hideFn: HideFn): () => void {
   if (idToShowFnMap.has(id)) {
     throw Error(`Context menu with id "${id}" already registered.`);
   }
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 7cbce2d771de..86c9dd6c8cef 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -13,7 +13,10 @@ import type {Element} from './views/Components/types';
 import type {StateContext} from './views/Components/TreeContext';
 import type Store from './store';
 
-export function printElement(element: Element, includeWeight: boolean = false) {
+export function printElement(
+  element: Element,
+  includeWeight: boolean = false,
+): string {
   let prefix = ' ';
   if (element.children.length > 0) {
     prefix = element.isCollapsed ? '▸' : '▾';
@@ -44,7 +47,7 @@ export function printElement(element: Element, includeWeight: boolean = false) {
 export function printOwnersList(
   elements: Array<Element>,
   includeWeight: boolean = false,
-) {
+): string {
   return elements
     .map(element => printElement(element, includeWeight))
     .join('\n');
@@ -54,7 +57,7 @@ export function printStore(
   store: Store,
   includeWeight: boolean = false,
   state: StateContext | null = null,
-) {
+): string {
   const snapshotLines = [];
 
   let rootWeight = 0;
@@ -172,7 +175,7 @@ export function smartParse(value: any) {
   }
 }
 
-export function smartStringify(value: any) {
+export function smartStringify(value: any): string {
   if (typeof value === 'number') {
     if (Number.isNaN(value)) {
       return 'NaN';
diff --git a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
index 2d0e3aafb146..80c9ef2c7c04 100644
--- a/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
+++ b/packages/react-devtools-shared/src/devtools/views/ButtonIcon.js
@@ -46,7 +46,7 @@ type Props = {
   type: IconType,
 };
 
-export default function ButtonIcon({className = '', type}: Props) {
+export default function ButtonIcon({className = '', type}: Props): React.Node {
   let pathData = null;
   switch (type) {
     case 'add':
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
index 5b342f549030..41419df5db55 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Badge.js
@@ -25,7 +25,7 @@ export default function Badge({
   hocDisplayNames,
   type,
   children,
-}: Props) {
+}: Props): React.Node {
   if (hocDisplayNames === null || hocDisplayNames.length === 0) {
     return null;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js b/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
index 3ceb481d49a8..0bf06dadd9e0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/CannotSuspendWarningMessage.js
@@ -15,7 +15,7 @@ import {
   ElementTypeSuspense,
 } from 'react-devtools-shared/src/types';
 
-export default function CannotSuspendWarningMessage() {
+export default function CannotSuspendWarningMessage(): React.Node {
   const store = useContext(StoreContext);
   const areSuspenseElementsHidden = !!store.componentFilters.find(
     filter =>
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
index 292d69e36afd..339b80e09b07 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js
@@ -15,7 +15,7 @@ import SearchInput from '../SearchInput';
 
 type Props = {};
 
-export default function ComponentSearchInput(props: Props) {
+export default function ComponentSearchInput(props: Props): React.Node {
   const {searchIndex, searchResults, searchText} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
index 766411fa8ec5..8c358076b1e7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableName.js
@@ -38,7 +38,7 @@ export default function EditableName({
   overrideName,
   path,
   type,
-}: EditableNameProps) {
+}: EditableNameProps): React.Node {
   const [editableName, setEditableName] = useState(initialValue);
   const [isValid, setIsValid] = useState(false);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
index 6f33b2f0f612..cfb42fc23fd3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/EditableValue.js
@@ -26,7 +26,7 @@ export default function EditableValue({
   overrideValue,
   path,
   value,
-}: EditableValueProps) {
+}: EditableValueProps): React.Node {
   const [state, dispatch] = useEditableValue(value);
   const {editableValue, hasPendingChanges, isValid, parsedValue} = state;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Element.js b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
index 6f21512fadd4..afaf6e463d01 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Element.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Element.js
@@ -32,7 +32,7 @@ type Props = {
   ...
 };
 
-export default function Element({data, index, style}: Props) {
+export default function Element({data, index, style}: Props): React.Node {
   const store = useContext(StoreContext);
   const {ownerFlatTree, ownerID, selectedElementID} = useContext(
     TreeStateContext,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
index ac11356942ea..b5926cdcf58a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HocBadges.js
@@ -16,7 +16,7 @@ type Props = {
   element: Element,
 };
 
-export default function HocBadges({element}: Props) {
+export default function HocBadges({element}: Props): React.Node {
   const {hocDisplayNames} = ((element: any): Element);
 
   if (hocDisplayNames === null) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
index e850417af5c3..d4751ef46fc2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
@@ -14,7 +14,7 @@ import Toggle from '../Toggle';
 import ButtonIcon from '../ButtonIcon';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 
-export default function InspectHostNodesToggle() {
+export default function InspectHostNodesToggle(): React.Node {
   const [isInspecting, setIsInspecting] = useState(false);
   const bridge = useContext(BridgeContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
index 9f19dec3b3bd..c85d769b7eb8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
@@ -32,7 +32,7 @@ export type Props = {};
 
 // TODO Make edits and deletes also use transition API!
 
-export default function InspectedElementWrapper(_: Props) {
+export default function InspectedElementWrapper(_: Props): React.Node {
   const {inspectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
   const {canViewElementSourceFunction, viewElementSourceFunction} = useContext(
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
index 8091055e390c..78420bf1c152 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContextTree.js
@@ -36,7 +36,7 @@ export default function InspectedElementContextTree({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {hasLegacyContext, context, type} = inspectedElement;
 
   const isReadOnly = type !== ElementTypeClass && type !== ElementTypeFunction;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
index 1b4208d44bca..e901743a4ee4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorBoundary.js
@@ -24,7 +24,7 @@ type WrapperProps = {
 
 export default function InspectedElementErrorBoundaryWrapper({
   children,
-}: WrapperProps) {
+}: 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 {selectedElementID} = useContext(TreeStateContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
index 0c338a3231a6..d275cde78bfa 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementErrorsAndWarningsTree.js
@@ -37,7 +37,7 @@ export default function InspectedElementErrorsAndWarningsTree({
   bridge,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const refresh = useCacheRefresh();
 
   const [
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index ab9fbe633f8e..346a23b8ff12 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -54,7 +54,7 @@ export function InspectedElementHooksTree({
   parseHookNames,
   store,
   toggleParseHookNames,
-}: HooksTreeViewProps) {
+}: HooksTreeViewProps): React.Node {
   const {hooks, id} = inspectedElement;
 
   // Changing parseHookNames is done in a transition, because it suspends.
@@ -137,7 +137,7 @@ export function InnerHooksTreeView({
   id,
   inspectedElement,
   path,
-}: InnerHooksTreeViewProps) {
+}: InnerHooksTreeViewProps): React.Node {
   // $FlowFixMe "Missing type annotation for U" whatever that means
   return hooks.map((hook, index) => (
     <HookView
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
index 6cebd996e48f..280df20966f2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementPropsTree.js
@@ -35,7 +35,7 @@ export default function InspectedElementPropsTree({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {readOnly} = React.useContext(OptionsContext);
 
   const {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
index 084fc3df70a1..f1bc6ce4b08e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStateTree.js
@@ -32,7 +32,7 @@ export default function InspectedElementStateTree({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {state} = inspectedElement;
 
   const entries = state != null ? Object.entries(state) : null;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
index 8cf20dbe86c9..1a7d29edaa91 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementStyleXPlugin.js
@@ -30,7 +30,7 @@ export default function InspectedElementStyleXPlugin({
   element,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   if (!enableStyleXFeatures) {
     return null;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
index fdf91dca262e..97827574c89d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementSuspenseToggle.js
@@ -27,7 +27,7 @@ export default function InspectedElementSuspenseToggle({
   bridge,
   inspectedElement,
   store,
-}: Props) {
+}: Props): React.Node {
   const {readOnly} = React.useContext(OptionsContext);
 
   const {id, state, type} = inspectedElement;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
index b1ffb6e9cb2c..0e3e61931cff 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -59,7 +59,7 @@ export default function InspectedElementView({
   inspectedElement,
   parseHookNames,
   toggleParseHookNames,
-}: Props) {
+}: Props): React.Node {
   const {id} = element;
   const {
     owners,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
index 212b4640955b..34519c8fb2a7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/LoadingAnimation.js
@@ -14,7 +14,7 @@ type Props = {
   className?: string,
 };
 
-export default function LoadingAnimation({className = ''}: Props) {
+export default function LoadingAnimation({className = ''}: Props): React.Node {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
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
index c8154c6877b9..3aa6dc94e066 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js
@@ -26,7 +26,7 @@ export default function AutoSizeInput({
   testName,
   value,
   ...rest
-}: Props) {
+}: Props): React.Node {
   const onFocusWrapper = event => {
     const input = event.target;
     if (input !== null) {
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
index a7f85e5429b0..ececd4d9f836 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/LayoutViewer.js
@@ -17,7 +17,7 @@ type Props = {
   layout: Layout,
 };
 
-export default function LayoutViewer({id, layout}: Props) {
+export default function LayoutViewer({id, layout}: Props): React.Node {
   const {height, margin, padding, y, width, x} = layout;
 
   return (
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
index 6da945ff9397..c1db73084e30 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/StyleEditor.js
@@ -32,7 +32,7 @@ type Props = {
 type ChangeAttributeFn = (oldName: string, newName: string, value: any) => void;
 type ChangeValueFn = (name: string, value: any) => void;
 
-export default function StyleEditor({id, style}: Props) {
+export default function StyleEditor({id, style}: Props): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
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
index 71a4abac99d0..294640487e02 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/index.js
@@ -18,7 +18,7 @@ import {TreeStateContext} from '../TreeContext';
 
 type Props = {};
 
-export default function NativeStyleEditorWrapper(_: Props) {
+export default function NativeStyleEditorWrapper(_: Props): React.Node {
   const store = useContext(StoreContext);
 
   const subscription = useMemo(
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
index d341d5e0a868..5baab8ab3cd5 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewArrayValue.js
@@ -40,7 +40,7 @@ export default function NewArrayValue({
   path,
   store,
   type,
-}: Props) {
+}: Props): React.Node {
   const [key, setKey] = useState<number>(0);
   const [isInvalid, setIsInvalid] = useState(false);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
index f986ad2e3de6..04c141e6f6cf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js
@@ -38,7 +38,7 @@ export default function NewKeyValue({
   path,
   store,
   type,
-}: Props) {
+}: Props): React.Node {
   const [newPropKey, setNewPropKey] = useState<number>(0);
   const [newPropName, setNewPropName] = useState<string>('');
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
index 379807a595a9..cc1428999a4c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersStack.js
@@ -77,7 +77,7 @@ function dialogReducer(state, action) {
   }
 }
 
-export default function OwnerStack() {
+export default function OwnerStack(): React.Node {
   const read = useContext(OwnersListContext);
   const {ownerID} = useContext(TreeStateContext);
   const treeDispatch = useContext(TreeDispatcherContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
index 8721a618fd94..05b34ab66ed7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js
@@ -22,7 +22,7 @@ type Data = {
   stopIndex: number,
 };
 
-export default function SelectedTreeHighlight(_: {}) {
+export default function SelectedTreeHighlight(_: {}): React.Node {
   const {lineHeight} = useContext(SettingsContext);
   const store = useContext(StoreContext);
   const treeFocused = useContext(TreeFocusedContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index 76e816f24201..089d98ecebad 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -51,7 +51,7 @@ export type ItemData = {
 
 type Props = {};
 
-export default function Tree(props: Props) {
+export default function Tree(props: Props): React.Node {
   const dispatch = useContext(TreeDispatcherContext);
   const {
     numElements,
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
index ca93ac41d9d1..19e7bdaba0f4 100644
--- 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
@@ -16,7 +16,13 @@ import {
 } from '@reach/menu-button';
 import useThemeStyles from '../../useThemeStyles';
 
-const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
+const MenuList = ({
+  children,
+  ...props
+}: {
+  children: React$Node,
+  ...
+}): React.Node => {
   const style = useThemeStyles();
   return (
     // $FlowFixMe unsafe spread
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
index c6dbec7ff452..db3d28a19766 100644
--- 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
@@ -20,7 +20,7 @@ const Tooltip = ({
   children: React$Node,
   className: string,
   ...
-}) => {
+}): React.Node => {
   const style = useThemeStyles();
   return (
     // $FlowFixMe unsafe spread
diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.js b/packages/react-devtools-shared/src/devtools/views/DevTools.js
index c29febb62884..879b9ba0a73b 100644
--- a/packages/react-devtools-shared/src/devtools/views/DevTools.js
+++ b/packages/react-devtools-shared/src/devtools/views/DevTools.js
@@ -146,7 +146,7 @@ export default function DevTools({
   hideToggleSuspenseAction,
   hideLogAction,
   hideViewSourceAction,
-}: Props) {
+}: Props): React.Node {
   const [currentTab, setTab] = useLocalStorage<TabID>(
     LOCAL_STORAGE_DEFAULT_TAB_KEY,
     defaultTab,
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
index c0d2f45a3b72..c05630a51387 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/CaughtErrorView.js
@@ -24,7 +24,7 @@ export default function CaughtErrorView({
   info,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
index f15276d50160..8a038cf8964e 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorView.js
@@ -26,7 +26,7 @@ export default function ErrorView({
   componentStack,
   dismissError = null,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
index 4cf631928a98..841c18ae2dd6 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ReportNewIssue.js
@@ -31,7 +31,7 @@ export default function ReportNewIssue({
   callStack,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   let bugURL = process.env.GITHUB_URL;
   if (!bugURL) {
     return null;
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
index b7f993b2395d..bf836a4ba5a9 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SearchingGitHubIssues.js
@@ -11,7 +11,7 @@ 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() {
+export default function SearchingGitHubIssues(): React.Node {
   return (
     <div className={styles.GitHubLinkRow}>
       <LoadingAnimation className={styles.LoadingIcon} />
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
index 820b2076714d..e66ce694f6b6 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/SuspendingErrorView.js
@@ -23,7 +23,7 @@ export default function SuspendingErrorView({
   callStack,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   const maybeItem =
     errorMessage !== null ? findGitHubIssue(errorMessage) : null;
 
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
index 36cfa3a79267..8abeaa6d280b 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/TimeoutView.js
@@ -26,7 +26,7 @@ export default function TimeoutView({
   componentStack,
   dismissError = null,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
index db7675d5bc5c..b03ab08f80c1 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UnsupportedBridgeOperationView.js
@@ -22,7 +22,7 @@ export default function UnsupportedBridgeOperationView({
   children,
   componentStack,
   errorMessage,
-}: Props) {
+}: Props): React.Node {
   return (
     <div className={styles.ErrorBoundary}>
       {children}
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
index 8a17808a6ce0..06c247817899 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/UpdateExistingIssue.js
@@ -17,7 +17,7 @@ export default function UpdateExistingIssue({
   gitHubIssue,
 }: {
   gitHubIssue: GitHubIssue,
-}) {
+}): React.Node {
   const {title, url} = gitHubIssue;
   return (
     <div className={styles.GitHubLinkRow}>
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
index f885f9611f5b..23d80996a348 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/WorkplaceGroup.js
@@ -13,7 +13,7 @@ import {REACT_DEVTOOLS_WORKPLACE_URL} from 'react-devtools-shared/src/constants'
 import Icon from '../Icon';
 import styles from './shared.css';
 
-export default function WorkplaceGroup() {
+export default function WorkplaceGroup(): React.Node {
   if (!isInternalFacebookBuild) {
     return null;
   }
diff --git a/packages/react-devtools-shared/src/devtools/views/Icon.js b/packages/react-devtools-shared/src/devtools/views/Icon.js
index fb39a9fe0bb3..606dbe9a9871 100644
--- a/packages/react-devtools-shared/src/devtools/views/Icon.js
+++ b/packages/react-devtools-shared/src/devtools/views/Icon.js
@@ -34,7 +34,11 @@ type Props = {
   type: IconType,
 };
 
-export default function Icon({className = '', title = '', type}: Props) {
+export default function Icon({
+  className = '',
+  title = '',
+  type,
+}: Props): React.Node {
   let pathData = null;
   switch (type) {
     case 'arrow':
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
index 5ba2390e79d4..2bfbc0ec9031 100644
--- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -87,7 +87,7 @@ type Props = {
   children: React$Node,
 };
 
-function ModalDialogContextController({children}: Props) {
+function ModalDialogContextController({children}: Props): React.Node {
   const [state, dispatch] = useReducer<State, State, Action>(dialogReducer, {
     dialogs: [],
   });
@@ -107,7 +107,7 @@ function ModalDialogContextController({children}: Props) {
   );
 }
 
-function ModalDialog(_: {}) {
+function ModalDialog(_: {}): React.Node {
   const {dialogs, dispatch} = useContext(ModalDialogContext);
 
   if (dialogs.length === 0) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
index e25efabe1654..e26b73ec8c4b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
@@ -42,7 +42,7 @@ export default function ChartNode({
   width,
   x,
   y,
-}: Props) {
+}: Props): React.Node {
   return (
     <g className={styles.Group} transform={`translate(${x},${y})`}>
       <rect
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
index 3aecbb690e2b..4e9f23ba6903 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js
@@ -15,7 +15,7 @@ import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
 import {TimelineContext} from 'react-devtools-timeline/src/TimelineContext';
 
-export default function ClearProfilingDataButton() {
+export default function ClearProfilingDataButton(): React.Node {
   const store = useContext(StoreContext);
   const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
   const {file, setFile} = useContext(TimelineContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
index e13606deeb05..c93872345f14 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -38,7 +38,7 @@ export type ItemData = {
   width: number,
 };
 
-export default function CommitFlamegraphAutoSizer(_: {}) {
+export default function CommitFlamegraphAutoSizer(_: {}): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex, selectFiber} = useContext(
     ProfilerContext,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
index c533392b1619..1d7cc26b1228 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -38,7 +38,7 @@ export type ItemData = {
   width: number,
 };
 
-export default function CommitRankedAutoSizer(_: {}) {
+export default function CommitRankedAutoSizer(_: {}): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex, selectFiber} = useContext(
     ProfilerContext,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
index b7529c1bbe5d..349308680871 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -27,7 +27,7 @@ export type Props = {
   fiberData: ChartNode,
 };
 
-export default function HoveredFiberInfo({fiberData}: Props) {
+export default function HoveredFiberInfo({fiberData}: Props): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
index fcad5d814682..5e32497dafed 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoCommitData.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './NoCommitData.css';
 
-export default function NoCommitData(_: {}) {
+export default function NoCommitData(_: {}): React.Node {
   return (
     <div className={styles.NoCommitData}>
       <div className={styles.Header}>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
index 231de1c1d5a1..b047e3355220 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/NoProfilingData.js
@@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle';
 
 import styles from './Profiler.css';
 
-export default function NoProfilingData() {
+export default function NoProfilingData(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>No profiling data has been recorded.</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
index 6827bc4407f5..3aa4b45c1bb0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProcessingData.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './Profiler.css';
 
-export default function ProcessingData() {
+export default function ProcessingData(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Processing data...</div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index c7e69f5ba23b..2d1b6d3fb63f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -82,7 +82,7 @@ type Props = {
   children: React$Node,
 };
 
-function ProfilerContextController({children}: Props) {
+function ProfilerContextController({children}: Props): React.Node {
   const store = useContext(StoreContext);
   const {selectedElementID} = useContext(TreeStateContext);
   const dispatch = useContext(TreeDispatcherContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
index cf8a9a843847..189f1af20340 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingImportExportButtons.js
@@ -27,7 +27,7 @@ import styles from './ProfilingImportExportButtons.css';
 
 import type {ProfilingDataExport} from './types';
 
-export default function ProfilingImportExportButtons() {
+export default function ProfilingImportExportButtons(): React.Node {
   const {isProfiling, profilingData, rootID} = useContext(ProfilerContext);
   const {setFile} = useContext(TimelineContext);
   const store = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
index 4dcbe64cef06..6888c885d091 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilingNotSupported.js
@@ -11,7 +11,7 @@ import * as React from 'react';
 
 import styles from './Profiler.css';
 
-export default function ProfilingNotSupported() {
+export default function ProfilingNotSupported(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Profiling not supported.</div>
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
index c1f03ed1317d..ca7f9c8d3dab 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordToggle.js
@@ -19,7 +19,7 @@ export type Props = {
   disabled?: boolean,
 };
 
-export default function RecordToggle({disabled}: Props) {
+export default function RecordToggle({disabled}: Props): React.Node {
   const {isProfiling, startProfiling, stopProfiling} = useContext(
     ProfilerContext,
   );
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
index dc91bb5c9cc4..dce197ce4b22 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RecordingInProgress.js
@@ -12,7 +12,7 @@ import RecordToggle from './RecordToggle';
 
 import styles from './Profiler.css';
 
-export default function RecordingInProgress() {
+export default function RecordingInProgress(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Profiling is in progress...</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
index c10abd983445..fe85bd5b251a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js
@@ -23,7 +23,7 @@ export default function ReloadAndProfileButton({
   disabled,
 }: {
   disabled: boolean,
-}) {
+}): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
index fe15ac8d6325..bb0d3aa9f74d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/RootSelector.js
@@ -13,7 +13,7 @@ import {ProfilerContext} from './ProfilerContext';
 
 import styles from './RootSelector.css';
 
-export default function RootSelector(_: {}) {
+export default function RootSelector(_: {}): React.Node {
   const {profilingData, rootID, setRootID} = useContext(ProfilerContext);
 
   const options = [];
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
index 284d442f8464..598a8a58b579 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarCommitInfo.js
@@ -19,7 +19,7 @@ import styles from './SidebarCommitInfo.css';
 
 export type Props = {};
 
-export default function SidebarCommitInfo(_: Props) {
+export default function SidebarCommitInfo(_: Props): React.Node {
   const {selectedCommitIndex, rootID} = useContext(ProfilerContext);
 
   const {profilerStore} = useContext(StoreContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
index 26b11a8e30c1..b64de0dd2a09 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarEventInfo.js
@@ -90,7 +90,7 @@ function SchedulingEventInfo({eventInfo}: SchedulingEventProps) {
   );
 }
 
-export default function SidebarEventInfo(_: Props) {
+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) {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index c6505ce7a108..b27aab877656 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -20,7 +20,7 @@ import styles from './SidebarSelectedFiberInfo.css';
 
 export type Props = {};
 
-export default function SidebarSelectedFiberInfo(_: Props) {
+export default function SidebarSelectedFiberInfo(_: Props): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {
     rootID,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index 76cd52e53a0b..ab967301e777 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -50,7 +50,7 @@ export default function SnapshotCommitList({
   selectedFilteredCommitIndex,
   selectCommitIndex,
   totalDurations,
-}: Props) {
+}: Props): React.Node {
   return (
     <AutoSizer>
       {({height, width}) => (
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
index faf124b5c97a..2b2c601bc91a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotSelector.js
@@ -20,7 +20,7 @@ import styles from './SnapshotSelector.css';
 
 export type Props = {};
 
-export default function SnapshotSelector(_: Props) {
+export default function SnapshotSelector(_: Props): React.Node {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
index 8e759485a64a..0d7af3e63ee4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
@@ -7,7 +7,12 @@ import styles from './Tooltip.css';
 
 const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};
 
-export default function Tooltip({children, className, label, style}: any) {
+export default function Tooltip({
+  children,
+  className,
+  label,
+  style,
+}: any): React.Node {
   const containerRef = useRef(null);
   const tooltipRef = useRef(null);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
index bec2920f14f7..71ab71832cd2 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Updaters.js
@@ -21,7 +21,7 @@ export type Props = {
   updaters: Array<SerializedElement>,
 };
 
-export default function Updaters({commitTree, updaters}: Props) {
+export default function Updaters({commitTree, updaters}: Props): React.Node {
   const {selectFiber} = useContext(ProfilerContext);
 
   const children =
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
index 064dde43662e..49bd89924723 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
@@ -37,7 +37,7 @@ type Props = {
   fiberID: number,
 };
 
-export default function WhatChanged({fiberID}: Props) {
+export default function WhatChanged({fiberID}: Props): React.Node {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
index 69134bf956d0..a861c367c2a6 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/utils.js
@@ -353,7 +353,7 @@ export function prepareProfilingDataExport(
   };
 }
 
-export const getGradientColor = (value: number) => {
+export const getGradientColor = (value: number): string => {
   const maxIndex = commitGradient.length - 1;
   let index;
   if (Number.isNaN(value)) {
@@ -366,11 +366,11 @@ export const getGradientColor = (value: number) => {
   return commitGradient[Math.round(index)];
 };
 
-export const formatDuration = (duration: number) =>
+export const formatDuration = (duration: number): number | string =>
   Math.round(duration * 10) / 10 || '<0.1';
-export const formatPercentage = (percentage: number) =>
+export const formatPercentage = (percentage: number): number =>
   Math.round(percentage * 100);
-export const formatTime = (timestamp: number) =>
+export const formatTime = (timestamp: number): number =>
   Math.round(Math.round(timestamp) / 100) / 10;
 
 export const scale = (
@@ -378,7 +378,10 @@ export const scale = (
   maxValue: number,
   minRange: number,
   maxRange: number,
-) => (value: number, fallbackValue: 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.js b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
index a473d450f910..7eb95868e9d1 100644
--- a/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
+++ b/packages/react-devtools-shared/src/devtools/views/ReactLogo.js
@@ -15,7 +15,7 @@ type Props = {
   className?: string,
 };
 
-export default function ReactLogo({className}: Props) {
+export default function ReactLogo({className}: Props): React.Node {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/react-devtools-shared/src/devtools/views/SearchInput.js b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
index 7fc620cb8026..ea24ae843200 100644
--- a/packages/react-devtools-shared/src/devtools/views/SearchInput.js
+++ b/packages/react-devtools-shared/src/devtools/views/SearchInput.js
@@ -35,7 +35,7 @@ export default function SearchInput({
   searchResultsCount,
   searchText,
   testName,
-}: Props) {
+}: Props): React.Node {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const resetSearch = () => search('');
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
index 9df49e68ffd2..281b0f101a49 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ComponentsSettings.js
@@ -51,7 +51,7 @@ import type {
   RegExpComponentFilter,
 } from 'react-devtools-shared/src/types';
 
-export default function ComponentsSettings(_: {}) {
+export default function ComponentsSettings(_: {}): React.Node {
   const store = useContext(StoreContext);
   const {parseHookNames, setParseHookNames} = useContext(SettingsContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
index 64df0f658678..8281cefd3d56 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/DebuggingSettings.js
@@ -13,7 +13,7 @@ import {SettingsContext} from './SettingsContext';
 
 import styles from './SettingsShared.css';
 
-export default function DebuggingSettings(_: {}) {
+export default function DebuggingSettings(_: {}): React.Node {
   const {
     appendComponentStack,
     breakOnConsoleErrors,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
index 71fc7ab29196..fd59913932cd 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js
@@ -28,7 +28,7 @@ function getChangeLogUrl(version: ?string): string | null {
   return `${CHANGE_LOG_URL}#${versionAnchor}`;
 }
 
-export default function GeneralSettings(_: {}) {
+export default function GeneralSettings(_: {}): React.Node {
   const {
     displayDensity,
     setDisplayDensity,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
index cf0c237e6efb..d9105da2dc0d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/ProfilerSettings.js
@@ -15,7 +15,7 @@ import {ProfilerContext} from 'react-devtools-shared/src/devtools/views/Profiler
 
 import styles from './SettingsShared.css';
 
-export default function ProfilerSettings(_: {}) {
+export default function ProfilerSettings(_: {}): React.Node {
   const {
     isCommitFilterEnabled,
     minCommitDuration,
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
index 6a6730a9f309..58377f9696b9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js
@@ -28,7 +28,7 @@ import styles from './SettingsModal.css';
 
 type TabID = 'general' | 'components' | 'profiler';
 
-export default function SettingsModal(_: {}) {
+export default function SettingsModal(_: {}): React.Node {
   const {isModalShowing, setIsModalShowing} = useContext(SettingsModalContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
index c20124d90f6f..fa234d1b711c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle.js
@@ -15,7 +15,7 @@ import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
 import {useSubscription} from '../hooks';
 
-export default function SettingsModalContextToggle() {
+export default function SettingsModalContextToggle(): React.Node {
   const {setIsModalShowing} = useContext(SettingsModalContext);
   const store = useContext(StoreContext);
   const {profilerStore} = store;
diff --git a/packages/react-devtools-shared/src/devtools/views/TabBar.js b/packages/react-devtools-shared/src/devtools/views/TabBar.js
index 391c1c9714db..89ba2d30ca82 100644
--- a/packages/react-devtools-shared/src/devtools/views/TabBar.js
+++ b/packages/react-devtools-shared/src/devtools/views/TabBar.js
@@ -39,7 +39,7 @@ export default function TabBar({
   selectTab,
   tabs,
   type,
-}: Props) {
+}: Props): React.Node {
   if (!tabs.some(tab => tab !== null && tab.id === currentTab)) {
     const firstTab = ((tabs.find(tab => tab !== null): any): TabInfo);
     selectTab(firstTab.id);
diff --git a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
index 7a6deba50100..eb8a83465d39 100644
--- a/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
+++ b/packages/react-devtools-shared/src/devtools/views/ThemeProvider.js
@@ -10,7 +10,11 @@
 import * as React from 'react';
 import useThemeStyles from './useThemeStyles';
 
-export default function ThemeProvider({children}: {children: React$Node}) {
+export default function ThemeProvider({
+  children,
+}: {
+  children: React.Node,
+}): React.Node {
   const themeStyle = useThemeStyles();
 
   const style = React.useMemo(() => {
diff --git a/packages/react-devtools-shared/src/devtools/views/Toggle.js b/packages/react-devtools-shared/src/devtools/views/Toggle.js
index f90367c3cc0b..b43c7087c9d0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Toggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Toggle.js
@@ -32,7 +32,7 @@ export default function Toggle({
   onChange,
   testName,
   title,
-}: Props) {
+}: Props): React.Node {
   let defaultClassName;
   if (isDisabled) {
     defaultClassName = styles.ToggleDisabled;
diff --git a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
index 85f3cb5efdb7..7e2307b32980 100644
--- a/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
+++ b/packages/react-devtools-shared/src/devtools/views/WarnIfLegacyBackendDetected.js
@@ -14,7 +14,7 @@ import {ModalDialogContext} from './ModalDialog';
 
 import styles from './WarnIfLegacyBackendDetected.css';
 
-export default function WarnIfLegacyBackendDetected(_: {}) {
+export default function WarnIfLegacyBackendDetected(_: {}): null {
   const bridge = useContext(BridgeContext);
   const {dispatch} = useContext(ModalDialogContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 60a2fe8dcb41..8366a221611f 100644
--- a/packages/react-devtools-shared/src/devtools/views/hooks.js
+++ b/packages/react-devtools-shared/src/devtools/views/hooks.js
@@ -329,7 +329,10 @@ export function useSubscription<Value>({
   return state.value;
 }
 
-export function useHighlightNativeElement() {
+export function useHighlightNativeElement(): {
+  clearHighlightNativeElement: () => void,
+  highlightNativeElement: (id: number) => void,
+} {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js
index bb35c4cf3488..4d3d9862b75a 100644
--- a/packages/react-devtools-shared/src/hydration.js
+++ b/packages/react-devtools-shared/src/hydration.js
@@ -19,15 +19,15 @@ import {
 import type {DehydratedData} from 'react-devtools-shared/src/devtools/views/Components/types';
 
 export const meta = {
-  inspectable: Symbol('inspectable'),
-  inspected: Symbol('inspected'),
-  name: Symbol('name'),
-  preview_long: Symbol('preview_long'),
-  preview_short: Symbol('preview_short'),
-  readonly: Symbol('readonly'),
-  size: Symbol('size'),
-  type: Symbol('type'),
-  unserializable: Symbol('unserializable'),
+  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 = {
diff --git a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
index 613914e8abfd..03cc54c1500e 100644
--- a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
+++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js
@@ -36,7 +36,7 @@ function Nested() {
 
 const DeeplyNested = wrapWithNested(Nested, 100);
 
-export default function DeeplyNestedComponents() {
+export default function DeeplyNestedComponents(): React.Node {
   return (
     <Fragment>
       <h1>Deeply nested component</h1>
diff --git a/packages/react-devtools-shell/src/app/EditableProps/index.js b/packages/react-devtools-shell/src/app/EditableProps/index.js
index ca7bd18010b2..ba92cf3fedf0 100644
--- a/packages/react-devtools-shell/src/app/EditableProps/index.js
+++ b/packages/react-devtools-shell/src/app/EditableProps/index.js
@@ -122,7 +122,7 @@ const ForwardRef = forwardRef<{name: string}, HTMLUListElement>(
   },
 );
 
-export default function EditableProps() {
+export default function EditableProps(): React.Node {
   return (
     <Fragment>
       <h1>Editable props</h1>
diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js
index 4b44a50a6653..d105bff9e1d0 100644
--- a/packages/react-devtools-shell/src/app/ElementTypes/index.js
+++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js
@@ -54,7 +54,7 @@ const LazyComponent = lazy(() =>
   }),
 );
 
-export default function ElementTypes() {
+export default function ElementTypes(): React.Node {
   return (
     <Profiler id="test" onRender={() => {}}>
       <Fragment>
diff --git a/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
index 1a4fc7927c06..df37534a69ad 100644
--- a/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
+++ b/packages/react-devtools-shell/src/app/ErrorBoundaries/index.js
@@ -53,7 +53,7 @@ function Component({label}) {
   return <div>{label}</div>;
 }
 
-export default function ErrorBoundaries() {
+export default function ErrorBoundaries(): React.Node {
   return (
     <Fragment>
       <h1>Nested error boundaries demo</h1>
diff --git a/packages/react-devtools-shell/src/app/Hydration/index.js b/packages/react-devtools-shell/src/app/Hydration/index.js
index 38347ec934fe..1d5920223e5b 100644
--- a/packages/react-devtools-shell/src/app/Hydration/index.js
+++ b/packages/react-devtools-shell/src/app/Hydration/index.js
@@ -106,7 +106,7 @@ function useInnerBaz() {
   return count;
 }
 
-export default function Hydration() {
+export default function Hydration(): React.Node {
   return (
     <Fragment>
       <h1>Hydration</h1>
diff --git a/packages/react-devtools-shell/src/app/Iframe/index.js b/packages/react-devtools-shell/src/app/Iframe/index.js
index f4b562ee311d..50beadd137aa 100644
--- a/packages/react-devtools-shell/src/app/Iframe/index.js
+++ b/packages/react-devtools-shell/src/app/Iframe/index.js
@@ -4,7 +4,7 @@ import * as React from 'react';
 import {Fragment} from 'react';
 import {createPortal} from 'react-dom';
 
-export default function Iframe() {
+export default function Iframe(): React.Node {
   return (
     <Fragment>
       <h2>Iframe</h2>
diff --git a/packages/react-devtools-shell/src/app/InlineWarnings/index.js b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
index 964323a28a04..6b7b189f7017 100644
--- a/packages/react-devtools-shell/src/app/InlineWarnings/index.js
+++ b/packages/react-devtools-shell/src/app/InlineWarnings/index.js
@@ -155,7 +155,7 @@ function ComponentWithSymbolWarning() {
   return null;
 }
 
-export default function ErrorsAndWarnings() {
+export default function ErrorsAndWarnings(): React.Node {
   const [count, setCount] = useState(0);
   const handleClick = () => setCount(count + 1);
   return (
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
index ffce696fa8ef..5ebd362c0cc9 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CircularReferences.js
@@ -18,7 +18,7 @@ const objectOne = {};
 const objectTwo = {objectOne};
 objectOne.objectTwo = objectTwo;
 
-export default function CircularReferences() {
+export default function CircularReferences(): React.Node {
   return <ChildComponent arrayOne={arrayOne} objectOne={objectOne} />;
 }
 
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
index 39c03547fe9c..700d76ada6df 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/Contexts.js
@@ -237,7 +237,7 @@ class ModernClassContextConsumerWithUpdates extends Component<any> {
   }
 }
 
-export default function Contexts() {
+export default function Contexts(): React.Node {
   return (
     <div>
       <h1>Contexts</h1>
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
index c04496544540..9b76deb01dd0 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js
@@ -114,7 +114,7 @@ function wrapWithHoc(Component) {
 }
 const HocWithHooks = wrapWithHoc(FunctionWithHooks);
 
-export default function CustomHooks() {
+export default function CustomHooks(): React.Node {
   return (
     <Fragment>
       <FunctionWithHooks />
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
index c4557e5879a1..a1a855ed340e 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomObject.js
@@ -16,7 +16,7 @@ class Custom {
   }
 }
 
-export default function CustomObject() {
+export default function CustomObject(): React.Node {
   return <ChildComponent customObject={new Custom()} />;
 }
 
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
index b747f855dae4..5c3eb7e3d5f6 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js
@@ -19,7 +19,7 @@ const objectWithNullProto = Object.create(null);
 objectWithNullProto.foo = 'abc';
 objectWithNullProto.bar = 123;
 
-export default function EdgeCaseObjects() {
+export default function EdgeCaseObjects(): React.Node {
   return (
     <ChildComponent
       objectWithModifiedHasOwnProperty={objectWithModifiedHasOwnProperty}
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
index 1403ece9f6db..4c768ef38985 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/InspectableElements.js
@@ -21,7 +21,7 @@ import SymbolKeys from './SymbolKeys';
 
 // TODO Add Immutable JS example
 
-export default function InspectableElements() {
+export default function InspectableElements(): React.Node {
   return (
     <Fragment>
       <h1>Inspectable elements</h1>
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
index 16ccad8d32e7..02ce2c9144f6 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/NestedProps.js
@@ -19,7 +19,7 @@ const object = {
   null: null,
 };
 
-export default function ObjectProps() {
+export default function ObjectProps(): React.Node {
   return (
     <ChildComponent
       object={{
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js b/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
index 3aae9c8837bc..d8de4c86c4f6 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/SymbolKeys.js
@@ -69,7 +69,7 @@ const data = Object.create(base, {
   },
 });
 
-export default function SymbolKeys() {
+export default function SymbolKeys(): React.Node {
   return <ChildComponent data={data} />;
 }
 
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
index f0f08b7d173c..97d0ef18c822 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/UnserializableProps.js
@@ -34,7 +34,7 @@ const immutable = Immutable.fromJS({
 // $FlowFixMe
 const bigInt = BigInt(123); // eslint-disable-line no-undef
 
-export default function UnserializableProps() {
+export default function UnserializableProps(): React.Node {
   return (
     <ChildComponent
       arrayBuffer={arrayBuffer}
diff --git a/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js b/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
index 068e11935bce..a407e70f8185 100644
--- a/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
+++ b/packages/react-devtools-shell/src/app/PartiallyStrictApp/index.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {StrictMode} from 'react';
 
-export default function PartiallyStrictApp() {
+export default function PartiallyStrictApp(): React.Node {
   return (
     <>
       <Child />
diff --git a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
index 89a0badca15f..82925ed1b5fd 100644
--- a/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
+++ b/packages/react-devtools-shell/src/app/ReactNativeWeb/index.js
@@ -12,7 +12,7 @@ import {Fragment, useState} from 'react';
 // $FlowFixMe
 import {Button, Text, View} from 'react-native-web';
 
-export default function ReactNativeWeb() {
+export default function ReactNativeWeb(): React.Node {
   const [backgroundColor, setBackgroundColor] = useState('purple');
   const toggleColor = () =>
     setBackgroundColor(backgroundColor === 'purple' ? 'green' : 'purple');
diff --git a/packages/react-devtools-shell/src/app/SuspenseTree/index.js b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
index 875cf60fec6d..db958df1ccfa 100644
--- a/packages/react-devtools-shell/src/app/SuspenseTree/index.js
+++ b/packages/react-devtools-shell/src/app/SuspenseTree/index.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {Fragment, Suspense, SuspenseList, useState} from 'react';
 
-function SuspenseTree() {
+function SuspenseTree(): React.Node {
   return (
     <Fragment>
       <h1>Suspense</h1>
diff --git a/packages/react-devtools-shell/src/app/ToDoList/List.js b/packages/react-devtools-shell/src/app/ToDoList/List.js
index a1b784b6e5a1..67bb6d1b4e54 100644
--- a/packages/react-devtools-shell/src/app/ToDoList/List.js
+++ b/packages/react-devtools-shell/src/app/ToDoList/List.js
@@ -20,7 +20,7 @@ export type Item = {
 
 type Props = {};
 
-export default function List(props: 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'},
diff --git a/packages/react-devtools-shell/src/e2e-apps/ListApp.js b/packages/react-devtools-shell/src/e2e-apps/ListApp.js
index 0e2c2ef8d4cf..727edf126ce0 100644
--- a/packages/react-devtools-shell/src/e2e-apps/ListApp.js
+++ b/packages/react-devtools-shell/src/e2e-apps/ListApp.js
@@ -10,7 +10,7 @@
 import * as React from 'react';
 import {useRef, useState} from 'react';
 
-export default function App() {
+export default function App(): React.Node {
   return <List />;
 }
 
diff --git a/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
index ae18b7183a05..26a4673ba7c5 100644
--- a/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
+++ b/packages/react-devtools-shell/src/e2e-apps/ListAppLegacy.js
@@ -9,7 +9,7 @@
 
 import * as React from 'react';
 
-export default function App() {
+export default function App(): React.Node {
   return <List />;
 }
 
diff --git a/packages/react-devtools-timeline/src/CanvasPage.js b/packages/react-devtools-timeline/src/CanvasPage.js
index 3853f5cb4d63..35bdfde779a6 100644
--- a/packages/react-devtools-timeline/src/CanvasPage.js
+++ b/packages/react-devtools-timeline/src/CanvasPage.js
@@ -74,7 +74,7 @@ type Props = {
   viewState: ViewState,
 };
 
-function CanvasPage({profilerData, viewState}: Props) {
+function CanvasPage({profilerData, viewState}: Props): React.Node {
   return (
     <div
       className={styles.CanvasPage}
diff --git a/packages/react-devtools-timeline/src/EventTooltip.js b/packages/react-devtools-timeline/src/EventTooltip.js
index 09dab01757b5..39bbc8b58952 100644
--- a/packages/react-devtools-timeline/src/EventTooltip.js
+++ b/packages/react-devtools-timeline/src/EventTooltip.js
@@ -69,7 +69,7 @@ export default function EventTooltip({
   hoveredEvent,
   origin,
   width,
-}: Props) {
+}: Props): React.Node {
   const ref = useSmartTooltip({
     canvasRef,
     mouseX: origin.x,
diff --git a/packages/react-devtools-timeline/src/Timeline.js b/packages/react-devtools-timeline/src/Timeline.js
index c4c8a1fa855c..36a89c866981 100644
--- a/packages/react-devtools-timeline/src/Timeline.js
+++ b/packages/react-devtools-timeline/src/Timeline.js
@@ -32,7 +32,7 @@ import {TimelineSearchContextController} from './TimelineSearchContext';
 
 import styles from './Timeline.css';
 
-export function Timeline(_: {}) {
+export function Timeline(_: {}): React.Node {
   const {
     file,
     inMemoryTimelineData,
diff --git a/packages/react-devtools-timeline/src/TimelineNotSupported.js b/packages/react-devtools-timeline/src/TimelineNotSupported.js
index 9a21df8ab8cb..9f30f105c39f 100644
--- a/packages/react-devtools-timeline/src/TimelineNotSupported.js
+++ b/packages/react-devtools-timeline/src/TimelineNotSupported.js
@@ -12,7 +12,7 @@ import {isInternalFacebookBuild} from 'react-devtools-feature-flags';
 
 import styles from './TimelineNotSupported.css';
 
-export default function TimelineNotSupported() {
+export default function TimelineNotSupported(): React.Node {
   return (
     <div className={styles.Column}>
       <div className={styles.Header}>Timeline profiling not supported.</div>
diff --git a/packages/react-devtools-timeline/src/TimelineSearchInput.js b/packages/react-devtools-timeline/src/TimelineSearchInput.js
index 68fd3eaf33e6..84307dad3084 100644
--- a/packages/react-devtools-timeline/src/TimelineSearchInput.js
+++ b/packages/react-devtools-timeline/src/TimelineSearchInput.js
@@ -16,7 +16,7 @@ import {TimelineSearchContext} from './TimelineSearchContext';
 
 type Props = {};
 
-export default function TimelineSearchInput(props: Props) {
+export default function TimelineSearchInput(props: Props): React.Node {
   const {searchInputContainerRef} = useContext(TimelineContext);
   const {dispatch, searchIndex, searchResults, searchText} = useContext(
     TimelineSearchContext,
diff --git a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
index c4fd41bdfa25..db2884a0726c 100644
--- a/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js
@@ -69,7 +69,7 @@ export class ComponentMeasuresView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/FlamechartView.js b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
index bbc8dcf13936..151c01cdafb4 100644
--- a/packages/react-devtools-timeline/src/content-views/FlamechartView.js
+++ b/packages/react-devtools-timeline/src/content-views/FlamechartView.js
@@ -102,7 +102,7 @@ class FlamechartStackLayerView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
@@ -342,7 +342,12 @@ export class FlamechartView extends View {
     this._flamechartRowViews.forEach(rowView => (rowView._onHover = onHover));
   }
 
-  desiredSize() {
+  desiredSize(): {
+    height: number,
+    hideScrollBarIfLessThanHeight?: number,
+    maxInitialHeight?: number,
+    width: number,
+  } {
     // Ignore the wishes of the background color view
     const intrinsicSize = this._verticalStackView.desiredSize();
     return {
diff --git a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
index 5db13dbc675e..2def46a6345b 100644
--- a/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/NativeEventsView.js
@@ -77,7 +77,7 @@ export class NativeEventsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
index 547af24bb26a..cd2fdf473280 100644
--- a/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/NetworkMeasuresView.js
@@ -81,7 +81,7 @@ export class NetworkMeasuresView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
index f46d435738d3..3244eb2d2031 100644
--- a/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
+++ b/packages/react-devtools-timeline/src/content-views/ReactMeasuresView.js
@@ -71,7 +71,7 @@ export class ReactMeasuresView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
index 4c35ee682894..faf8d991876d 100644
--- a/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SchedulingEventsView.js
@@ -60,7 +60,7 @@ export class SchedulingEventsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
index eaaf44659ea3..25804f91908d 100644
--- a/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SnapshotsView.js
@@ -45,7 +45,7 @@ export class SnapshotsView extends View {
     this._profilerData = profilerData;
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
index 370c8f763275..502dc2858cd4 100644
--- a/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
+++ b/packages/react-devtools-timeline/src/content-views/SuspenseEventsView.js
@@ -85,7 +85,7 @@ export class SuspenseEventsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): IntrinsicSize {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
index d2a70e9524b1..9c0cb987e353 100644
--- a/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
+++ b/packages/react-devtools-timeline/src/content-views/ThrownErrorsView.js
@@ -55,7 +55,7 @@ export class ThrownErrorsView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
index 47913dbb2265..8d8ef9502f24 100644
--- a/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
+++ b/packages/react-devtools-timeline/src/content-views/TimeAxisMarkersView.js
@@ -49,7 +49,7 @@ export class TimeAxisMarkersView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
index 36c24091ac0a..4abcd6b62707 100644
--- a/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
+++ b/packages/react-devtools-timeline/src/content-views/UserTimingMarksView.js
@@ -61,7 +61,7 @@ export class UserTimingMarksView extends View {
     };
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this._intrinsicSize;
   }
 
diff --git a/packages/react-devtools-timeline/src/content-views/constants.js b/packages/react-devtools-timeline/src/content-views/constants.js
index bf60a1fbf9a7..e92e1d53cd96 100644
--- a/packages/react-devtools-timeline/src/content-views/constants.js
+++ b/packages/react-devtools-timeline/src/content-views/constants.js
@@ -43,7 +43,63 @@ export const INTERVAL_TIMES = [
 export const MIN_INTERVAL_SIZE_PX = 70;
 
 // TODO Replace this with "export let" vars
-export let COLORS = {
+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: '',
diff --git a/packages/react-devtools-timeline/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js
index 83354afe96f1..ec51bfbe3084 100644
--- a/packages/react-devtools-timeline/src/utils/formatting.js
+++ b/packages/react-devtools-timeline/src/utils/formatting.js
@@ -11,7 +11,7 @@ import type {SchedulingEvent} from '../types';
 
 import prettyMilliseconds from 'pretty-ms';
 
-export function formatTimestamp(ms: number) {
+export function formatTimestamp(ms: number): string {
   return (
     ms.toLocaleString(undefined, {
       minimumFractionDigits: 1,
diff --git a/packages/react-devtools-timeline/src/utils/getBatchRange.js b/packages/react-devtools-timeline/src/utils/getBatchRange.js
index 8dd425d263e0..a372c7d5f14c 100644
--- a/packages/react-devtools-timeline/src/utils/getBatchRange.js
+++ b/packages/react-devtools-timeline/src/utils/getBatchRange.js
@@ -45,4 +45,8 @@ function unmemoizedGetBatchRange(
   return [startTime, stopTime];
 }
 
-export const getBatchRange = memoize(unmemoizedGetBatchRange);
+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
index f2559364f55f..1805310d3126 100644
--- a/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
+++ b/packages/react-devtools-timeline/src/utils/useSmartTooltip.js
@@ -20,7 +20,7 @@ export default function useSmartTooltip({
   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,
diff --git a/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
index 2a998493eda1..64251c92a4e2 100644
--- a/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
+++ b/packages/react-devtools-timeline/src/view-base/HorizontalPanAndZoomView.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Size, IntrinsicSize} from './geometry';
 import type {
   Interaction,
   MouseDownInteraction,
@@ -39,7 +40,7 @@ import {
 export class HorizontalPanAndZoomView extends View {
   _contentView: View;
   _intrinsicContentWidth: number;
-  _isPanning = false;
+  _isPanning: boolean = false;
   _viewState: ViewState;
 
   constructor(
@@ -103,7 +104,7 @@ export class HorizontalPanAndZoomView extends View {
     this.setScrollState(newState);
   }
 
-  desiredSize() {
+  desiredSize(): Size | IntrinsicSize {
     return this._contentView.desiredSize();
   }
 
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
index 6af75bb0587a..0be8d51b8107 100644
--- a/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
+++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizableView.js
@@ -78,7 +78,7 @@ export class ResizableView extends View {
     this._restoreMutableViewState();
   }
 
-  desiredSize() {
+  desiredSize(): {+height: number, +width: number} {
     const subviewDesiredSize = this._subview.desiredSize();
 
     if (this._shouldRenderResizeBar()) {
@@ -132,7 +132,7 @@ export class ResizableView extends View {
     this.setNeedsDisplay();
   }
 
-  _shouldRenderResizeBar() {
+  _shouldRenderResizeBar(): boolean {
     const subviewDesiredSize = this._subview.desiredSize();
     return subviewDesiredSize.hideScrollBarIfLessThanHeight != null
       ? subviewDesiredSize.height >
@@ -195,7 +195,7 @@ export class ResizableView extends View {
     });
   }
 
-  _handleClick(interaction: ClickInteraction) {
+  _handleClick(interaction: ClickInteraction): void | boolean {
     if (!this._shouldRenderResizeBar()) {
       return;
     }
@@ -216,7 +216,7 @@ export class ResizableView extends View {
     }
   }
 
-  _handleDoubleClick(interaction: DoubleClickInteraction) {
+  _handleDoubleClick(interaction: DoubleClickInteraction): void | boolean {
     if (!this._shouldRenderResizeBar()) {
       return;
     }
@@ -236,7 +236,7 @@ export class ResizableView extends View {
     }
   }
 
-  _handleMouseDown(interaction: MouseDownInteraction) {
+  _handleMouseDown(interaction: MouseDownInteraction): void | boolean {
     const cursorLocation = interaction.payload.location;
     const resizeBarFrame = this._resizeBar.frame;
     if (rectContainsPoint(cursorLocation, resizeBarFrame)) {
@@ -250,7 +250,7 @@ export class ResizableView extends View {
     }
   }
 
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {
     const {_resizingState} = this;
     if (_resizingState) {
       this._resizingState = {
@@ -279,7 +279,10 @@ export class ResizableView extends View {
     }
   }
 
-  handleInteraction(interaction: Interaction, viewRefs: ViewRefs) {
+  handleInteraction(
+    interaction: Interaction,
+    viewRefs: ViewRefs,
+  ): void | boolean {
     switch (interaction.type) {
       case 'click':
         return this._handleClick(interaction);
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
index 0195e0a7968a..2d082de2fcea 100644
--- 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
@@ -52,7 +52,7 @@ export class VerticalScrollBarView extends View {
     this._verticalScrollOverflowView = verticalScrollOverflowView;
   }
 
-  desiredSize() {
+  desiredSize(): {+height: number, +width: number} {
     return {
       width: SCROLL_BAR_SIZE,
       height: 0, // No desired height
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
index 37f96f16c244..f9875bdcb806 100644
--- 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
@@ -72,10 +72,10 @@ export class VerticalScrollOverflowView extends View {
     this.setNeedsDisplay();
   }
 
-  _onVerticalScrollViewChange = (
+  _onVerticalScrollViewChange: (
     scrollState: ScrollState,
     containerLength: number,
-  ) => {
+  ) => void = (scrollState: ScrollState, containerLength: number) => {
     const maxOffset = scrollState.length - containerLength;
     if (maxOffset === 0) {
       return;

From 5fdcd23aaa30a13eead12b7661a3a5903c6837f1 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Tue, 13 Sep 2022 13:33:43 -0400
Subject: [PATCH 1581/1603] Flow: upgrade to 0.140 (#25252)

This update range includes:

- `types_first` ([blog](https://flow.org/en/docs/lang/types-first/), all exports need annotated types) is default. I disabled this for now to make that change incremental.
- Generics that escape the scope they are defined in are an error. I fixed some with explicit type annotations and some are suppressed that I didn't easily figure out.
---
 package.json                                  |  2 +-
 packages/react-cache/src/LRU.js               | 11 ++++++--
 packages/react-cache/src/ReactCacheOld.js     |  1 +
 .../react-dom/src/client/ReactDOMInput.js     |  1 +
 .../src/server/ReactDOMFizzServerNode.js      |  3 ++-
 .../src/legacy-events/accumulate.js           |  2 ++
 .../src/legacy-events/forEachAccumulated.js   |  1 +
 .../src/ReactFiberClassUpdateQueue.new.js     |  1 +
 .../src/ReactFiberClassUpdateQueue.old.js     |  1 +
 .../src/ReactFiberHooks.new.js                | 25 +++++++++++++------
 .../src/ReactFiberHooks.old.js                | 25 +++++++++++++------
 .../react-refresh/src/ReactFreshRuntime.js    |  1 +
 .../src/ReactFlightDOMServerNode.js           |  3 ++-
 .../src/useSyncExternalStoreShimClient.js     |  5 +++-
 scripts/flow/config/flowconfig                |  3 ++-
 yarn.lock                                     |  8 +++---
 16 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index f2444f3cc2e1..b440056f54b8 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.132",
+    "flow-bin": "^0.140",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
diff --git a/packages/react-cache/src/LRU.js b/packages/react-cache/src/LRU.js
index 9a90cc8a3ede..8462849c4463 100644
--- a/packages/react-cache/src/LRU.js
+++ b/packages/react-cache/src/LRU.js
@@ -23,7 +23,14 @@ type Entry<T> = {
   next: Entry<T>,
 };
 
-export function createLRU<T>(limit: number) {
+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
@@ -135,7 +142,7 @@ export function createLRU<T>(limit: number) {
     return entry.value;
   }
 
-  function setLimit(newLimit: number) {
+  function setLimit(newLimit: number): void {
     LIMIT = newLimit;
     scheduleCleanUp();
   }
diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js
index 8781899dc2ae..9693113b49d0 100644
--- a/packages/react-cache/src/ReactCacheOld.js
+++ b/packages/react-cache/src/ReactCacheOld.js
@@ -122,6 +122,7 @@ function accessResult<I, K, V>(
       status: Pending,
       value: thenable,
     };
+    // $FlowFixMe[escaped-generic] discovered when updating Flow
     const newEntry = lru.add(newResult, deleteEntry.bind(null, resource, key));
     entriesForResource.set(key, newEntry);
     return newResult;
diff --git a/packages/react-dom/src/client/ReactDOMInput.js b/packages/react-dom/src/client/ReactDOMInput.js
index a4b8dede45a7..8d9ea1f45a43 100644
--- a/packages/react-dom/src/client/ReactDOMInput.js
+++ b/packages/react-dom/src/client/ReactDOMInput.js
@@ -177,6 +177,7 @@ export function updateWrapper(element: Element, props: Object) {
   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
diff --git a/packages/react-dom/src/server/ReactDOMFizzServerNode.js b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
index facfe3f80c33..089d24bf7b27 100644
--- a/packages/react-dom/src/server/ReactDOMFizzServerNode.js
+++ b/packages/react-dom/src/server/ReactDOMFizzServerNode.js
@@ -10,6 +10,7 @@
 import type {ReactNodeList} from 'shared/ReactTypes';
 import type {Writable} from 'stream';
 import type {BootstrapScriptDescriptor} from './ReactDOMServerFormatConfig';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
 
 import ReactVersion from 'shared/ReactVersion';
 
@@ -25,7 +26,7 @@ import {
   createRootFormatContext,
 } from './ReactDOMServerFormatConfig';
 
-function createDrainHandler(destination, request) {
+function createDrainHandler(destination: Destination, request) {
   return () => startFlowing(request, destination);
 }
 
diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js
index 0e19adc919e5..6d43ada04f0e 100644
--- a/packages/react-native-renderer/src/legacy-events/accumulate.js
+++ b/packages/react-native-renderer/src/legacy-events/accumulate.js
@@ -33,6 +33,8 @@ function accumulate<T>(
   // 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-return] if `current` is `T` and `T` an array,
+     * `isArray` might refine to the array element type of `T` */
     return current.concat(next);
   }
 
diff --git a/packages/react-native-renderer/src/legacy-events/forEachAccumulated.js b/packages/react-native-renderer/src/legacy-events/forEachAccumulated.js
index 369be5605cc4..877f026419f7 100644
--- a/packages/react-native-renderer/src/legacy-events/forEachAccumulated.js
+++ b/packages/react-native-renderer/src/legacy-events/forEachAccumulated.js
@@ -22,6 +22,7 @@ function forEachAccumulated<T>(
   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);
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
index a38d9aaecb8c..5bdc8fc6a82a 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@@ -476,6 +476,7 @@ export function processUpdateQueue<State>(
   hasForceUpdate = false;
 
   if (__DEV__) {
+    // $FlowFixMe[escaped-generic] discovered when updating Flow
     currentlyProcessingQueue = queue.shared;
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
index 94908d61df5e..bdff2ea93e70 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
@@ -476,6 +476,7 @@ export function processUpdateQueue<State>(
   hasForceUpdate = false;
 
   if (__DEV__) {
+    // $FlowFixMe[escaped-generic] discovered when updating Flow
     currentlyProcessingQueue = queue.shared;
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index da2254a682eb..3f45ec61434a 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -160,7 +160,7 @@ export type Effect = {
   tag: HookFlags,
   create: () => (() => void) | void,
   destroy: (() => void) | void,
-  deps: Array<mixed> | null,
+  deps: Array<mixed> | void | null,
   next: Effect,
 };
 
@@ -1539,7 +1539,7 @@ function updateStoreInstance<T>(
   }
 }
 
-function subscribeToStore(fiber, inst, subscribe) {
+function subscribeToStore<T>(fiber, inst: StoreInstance<T>, subscribe) {
   const handleStoreChange = () => {
     // The store changed. Check if the snapshot changed since the last time we
     // read from the store.
@@ -1552,7 +1552,7 @@ function subscribeToStore(fiber, inst, subscribe) {
   return subscribe(handleStoreChange);
 }
 
-function checkIfSnapshotChanged(inst) {
+function checkIfSnapshotChanged<T>(inst: StoreInstance<T>): boolean {
   const latestGetSnapshot = inst.getSnapshot;
   const prevValue = inst.value;
   try {
@@ -1609,7 +1609,7 @@ function rerenderState<S>(
   return rerenderReducer(basicStateReducer, (initialState: any));
 }
 
-function pushEffect(tag, create, destroy, deps) {
+function pushEffect(tag, create, destroy, deps: Array<mixed> | void | null) {
   const effect: Effect = {
     tag,
     create,
@@ -1728,7 +1728,12 @@ function updateRef<T>(initialValue: T): {current: T} {
   return hook.memoizedState;
 }
 
-function mountEffectImpl(fiberFlags, hookFlags, create, deps): void {
+function mountEffectImpl(
+  fiberFlags,
+  hookFlags,
+  create,
+  deps: Array<mixed> | void | null,
+): void {
   const hook = mountWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   currentlyRenderingFiber.flags |= fiberFlags;
@@ -1740,7 +1745,12 @@ function mountEffectImpl(fiberFlags, hookFlags, create, deps): void {
   );
 }
 
-function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
+function updateEffectImpl(
+  fiberFlags,
+  hookFlags,
+  create,
+  deps: Array<mixed> | void | null,
+): void {
   const hook = updateWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   let destroy = undefined;
@@ -2395,7 +2405,7 @@ function entangleTransitionUpdate<S, A>(
   }
 }
 
-function markUpdateInDevTools(fiber, lane, action) {
+function markUpdateInDevTools<A>(fiber, lane, action: A) {
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {
@@ -2490,6 +2500,7 @@ const HooksDispatcherOnMount: Dispatcher = {
 if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
+  // $FlowFixMe[escaped-generic] discovered when updating Flow
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
 if (enableUseHook) {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 4e53c1b2545d..5495a2992b78 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -160,7 +160,7 @@ export type Effect = {
   tag: HookFlags,
   create: () => (() => void) | void,
   destroy: (() => void) | void,
-  deps: Array<mixed> | null,
+  deps: Array<mixed> | void | null,
   next: Effect,
 };
 
@@ -1539,7 +1539,7 @@ function updateStoreInstance<T>(
   }
 }
 
-function subscribeToStore(fiber, inst, subscribe) {
+function subscribeToStore<T>(fiber, inst: StoreInstance<T>, subscribe) {
   const handleStoreChange = () => {
     // The store changed. Check if the snapshot changed since the last time we
     // read from the store.
@@ -1552,7 +1552,7 @@ function subscribeToStore(fiber, inst, subscribe) {
   return subscribe(handleStoreChange);
 }
 
-function checkIfSnapshotChanged(inst) {
+function checkIfSnapshotChanged<T>(inst: StoreInstance<T>): boolean {
   const latestGetSnapshot = inst.getSnapshot;
   const prevValue = inst.value;
   try {
@@ -1609,7 +1609,7 @@ function rerenderState<S>(
   return rerenderReducer(basicStateReducer, (initialState: any));
 }
 
-function pushEffect(tag, create, destroy, deps) {
+function pushEffect(tag, create, destroy, deps: Array<mixed> | void | null) {
   const effect: Effect = {
     tag,
     create,
@@ -1728,7 +1728,12 @@ function updateRef<T>(initialValue: T): {current: T} {
   return hook.memoizedState;
 }
 
-function mountEffectImpl(fiberFlags, hookFlags, create, deps): void {
+function mountEffectImpl(
+  fiberFlags,
+  hookFlags,
+  create,
+  deps: Array<mixed> | void | null,
+): void {
   const hook = mountWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   currentlyRenderingFiber.flags |= fiberFlags;
@@ -1740,7 +1745,12 @@ function mountEffectImpl(fiberFlags, hookFlags, create, deps): void {
   );
 }
 
-function updateEffectImpl(fiberFlags, hookFlags, create, deps): void {
+function updateEffectImpl(
+  fiberFlags,
+  hookFlags,
+  create,
+  deps: Array<mixed> | void | null,
+): void {
   const hook = updateWorkInProgressHook();
   const nextDeps = deps === undefined ? null : deps;
   let destroy = undefined;
@@ -2395,7 +2405,7 @@ function entangleTransitionUpdate<S, A>(
   }
 }
 
-function markUpdateInDevTools(fiber, lane, action) {
+function markUpdateInDevTools<A>(fiber, lane, action: A) {
   if (__DEV__) {
     if (enableDebugTracing) {
       if (fiber.mode & DebugTracingMode) {
@@ -2490,6 +2500,7 @@ const HooksDispatcherOnMount: Dispatcher = {
 if (enableCache) {
   (HooksDispatcherOnMount: Dispatcher).getCacheSignal = getCacheSignal;
   (HooksDispatcherOnMount: Dispatcher).getCacheForType = getCacheForType;
+  // $FlowFixMe[escaped-generic] discovered when updating Flow
   (HooksDispatcherOnMount: Dispatcher).useCacheRefresh = mountRefresh;
 }
 if (enableUseHook) {
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index f440275c2a7a..99d4d03199d7 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -654,6 +654,7 @@ export function createSignatureFunctionForTransform() {
         // in HOC chains like _s(hoc1(_s(hoc2(_s(actualFunction))))).
         if (!savedType) {
           // We're in the innermost call, so this is the actual type.
+          // $FlowFixMe[escaped-generic] discovered when updating Flow
           savedType = type;
           hasCustomHooks = typeof getCustomHooks === 'function';
         }
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
index addf3758c12a..88c6b85337dc 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerNode.js
@@ -8,6 +8,7 @@
  */
 
 import type {ReactModel} from 'react-server/src/ReactFlightServer';
+import type {Destination} from 'react-server/src/ReactServerStreamConfigNode';
 import type {BundlerConfig} from './ReactFlightServerWebpackBundlerConfig';
 import type {Writable} from 'stream';
 import type {ServerContextJSONValue} from 'shared/ReactTypes';
@@ -19,7 +20,7 @@ import {
   abort,
 } from 'react-server/src/ReactFlightServer';
 
-function createDrainHandler(destination, request) {
+function createDrainHandler(destination: Destination, request) {
   return () => startFlowing(request, destination);
 }
 
diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
index 4eb764091ae0..99cb6c65725c 100644
--- a/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
+++ b/packages/use-sync-external-store/src/useSyncExternalStoreShimClient.js
@@ -128,7 +128,10 @@ export function useSyncExternalStore<T>(
   return value;
 }
 
-function checkIfSnapshotChanged(inst) {
+function checkIfSnapshotChanged<T>(inst: {
+  value: T,
+  getSnapshot: () => T,
+}): boolean {
   const latestGetSnapshot = inst.getSnapshot;
   const prevValue = inst.value;
   try {
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index 9b47998da988..b5639113089a 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -45,9 +45,10 @@ esproposal.class_instance_fields=enable
 esproposal.optional_chaining=enable
 exact_by_default=true
 munge_underscores=false
+types_first=false
 
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%
 
 [version]
-^0.132.0
+^0.140.0
diff --git a/yarn.lock b/yarn.lock
index 2d71503a7a34..a3dc1a988861 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7914,10 +7914,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@^0.132:
-  version "0.132.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.132.0.tgz#8bf80a79630db24bd1422dc2cc4b5e97f97ccb98"
-  integrity sha512-S1g/vnAyNaLUdajmuUHCMl30qqye12gS6mr4LVyswf1k+JDF4efs6SfKmptuvnpitF3LGCVf0TIffChP8ljwnw==
+flow-bin@^0.140:
+  version "0.140.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.140.0.tgz#bf1a2984a0e5604daa0d1e0432138d9897af65bb"
+  integrity sha512-9P/VciKACXocClhLiDg/p1ntYmgCEEc9QrNOoTqTi2SEdEZDTiAmJLONRJfw4uglPVRZ1p/esWF9KlbZiuxqVw==
 
 fluent-syntax@0.13.0:
   version "0.13.0"

From 0556bab32c4350971619350d1efc230baf2ea147 Mon Sep 17 00:00:00 2001
From: Luna Ruan <lunaris.ruan@gmail.com>
Date: Tue, 13 Sep 2022 13:55:56 -0400
Subject: [PATCH 1582/1603] [Transition Tracing] More Accurate End Time
 (#25105)

add more accurate end time for transitions and update host configs with `requestPostPaintCallback` function and move post paint logic to another module and use it in the work loop
---
 packages/react-art/src/ReactARTHostConfig.js  |   4 +
 .../src/client/ReactDOMHostConfig.js          |  11 +-
 .../src/ReactFabricHostConfig.js              |   4 +
 .../src/ReactNativeHostConfig.js              |   4 +
 .../src/createReactNoop.js                    |   5 +
 .../src/ReactFiberWorkLoop.new.js             |  55 +++--
 .../src/ReactFiberWorkLoop.old.js             |  55 +++--
 .../src/ReactPostPaintCallback.js             |  26 ++
 .../ReactFiberHostContext-test.internal.js    |   2 +
 .../__tests__/ReactTransitionTracing-test.js  | 227 ++++++++++++++++++
 .../src/forks/ReactFiberHostConfig.custom.js  |   1 +
 .../src/ReactTestHostConfig.js                |   4 +
 12 files changed, 367 insertions(+), 31 deletions(-)
 create mode 100644 packages/react-reconciler/src/ReactPostPaintCallback.js

diff --git a/packages/react-art/src/ReactARTHostConfig.js b/packages/react-art/src/ReactARTHostConfig.js
index 47bced8a1274..dbaba801b185 100644
--- a/packages/react-art/src/ReactARTHostConfig.js
+++ b/packages/react-art/src/ReactARTHostConfig.js
@@ -451,3 +451,7 @@ export function preparePortalMount(portalInstance: any): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 4510efe2b892..c9c6e11fdfe0 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -377,7 +377,10 @@ export const cancelTimeout: any =
   typeof clearTimeout === 'function' ? clearTimeout : (undefined: any);
 export const noTimeout = -1;
 const localPromise = typeof Promise === 'function' ? Promise : undefined;
-
+const localRequestAnimationFrame =
+  typeof requestAnimationFrame === 'function'
+    ? requestAnimationFrame
+    : scheduleTimeout;
 // -------------------
 //     Microtasks
 // -------------------
@@ -1379,3 +1382,9 @@ export function setupIntersectionObserver(
     },
   };
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  localRequestAnimationFrame(() => {
+    localRequestAnimationFrame(time => callback(time));
+  });
+}
diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 3ae1d00e2717..3c66e0ad8cd0 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -611,3 +611,7 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}
diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js
index 37e88d8b2747..c26c5c389c1e 100644
--- a/packages/react-native-renderer/src/ReactNativeHostConfig.js
+++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js
@@ -510,3 +510,7 @@ export function preparePortalMount(portalInstance: Instance): void {
 export function detachDeletedInstance(node: Instance): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}
diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index f2b6fc8b255e..66919fc89239 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -473,6 +473,11 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
     logRecoverableError() {
       // no-op
     },
+
+    requestPostPaintCallback(callback) {
+      const endTime = Scheduler.unstable_now();
+      callback(endTime);
+    },
   };
 
   const hostConfig = useMutation
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 6f62aa4b1c0b..ca6bbcae278a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -261,6 +261,7 @@ import {
   suspendedThenableDidResolve,
   isTrackingSuspendedThenable,
 } from './ReactFiberWakeable.new';
+import {schedulePostPaintCallback} from './ReactPostPaintCallback';
 
 const ceil = Math.ceil;
 
@@ -361,6 +362,7 @@ export function getWorkInProgressTransitions() {
 }
 
 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
+let currentEndTime: number | null = null;
 
 export function addTransitionStartCallbackToPendingTransition(
   transition: Transition,
@@ -2643,6 +2645,36 @@ function commitRootImpl(
     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;
+        }
+      });
+    }
+  }
+
   return null;
 }
 
@@ -2784,28 +2816,21 @@ function flushPassiveEffectsImpl() {
   if (enableTransitionTracing) {
     const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
     const prevRootTransitionCallbacks = root.transitionCallbacks;
+    const prevEndTime = currentEndTime;
     if (
       prevPendingTransitionCallbacks !== null &&
-      prevRootTransitionCallbacks !== null
+      prevRootTransitionCallbacks !== null &&
+      prevEndTime !== null
     ) {
-      // TODO(luna) Refactor this code into the Host Config
-      // TODO(luna) The end time here is not necessarily accurate
-      // because passive effects could be called before paint
-      // (synchronously) or after paint (normally). We need
-      // to come up with a way to get the correct end time for both cases.
-      // One solution is in the host config, if the passive effects
-      // have not yet been run, make a call to flush the passive effects
-      // right after paint.
-      const endTime = now();
       currentPendingTransitionCallbacks = null;
-
-      scheduleCallback(IdleSchedulerPriority, () =>
+      currentEndTime = null;
+      scheduleCallback(IdleSchedulerPriority, () => {
         processTransitionCallbacks(
           prevPendingTransitionCallbacks,
-          endTime,
+          prevEndTime,
           prevRootTransitionCallbacks,
-        ),
-      );
+        );
+      });
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 414e2e3343ed..4715d3fdf4df 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -261,6 +261,7 @@ import {
   suspendedThenableDidResolve,
   isTrackingSuspendedThenable,
 } from './ReactFiberWakeable.old';
+import {schedulePostPaintCallback} from './ReactPostPaintCallback';
 
 const ceil = Math.ceil;
 
@@ -361,6 +362,7 @@ export function getWorkInProgressTransitions() {
 }
 
 let currentPendingTransitionCallbacks: PendingTransitionCallbacks | null = null;
+let currentEndTime: number | null = null;
 
 export function addTransitionStartCallbackToPendingTransition(
   transition: Transition,
@@ -2643,6 +2645,36 @@ function commitRootImpl(
     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;
+        }
+      });
+    }
+  }
+
   return null;
 }
 
@@ -2784,28 +2816,21 @@ function flushPassiveEffectsImpl() {
   if (enableTransitionTracing) {
     const prevPendingTransitionCallbacks = currentPendingTransitionCallbacks;
     const prevRootTransitionCallbacks = root.transitionCallbacks;
+    const prevEndTime = currentEndTime;
     if (
       prevPendingTransitionCallbacks !== null &&
-      prevRootTransitionCallbacks !== null
+      prevRootTransitionCallbacks !== null &&
+      prevEndTime !== null
     ) {
-      // TODO(luna) Refactor this code into the Host Config
-      // TODO(luna) The end time here is not necessarily accurate
-      // because passive effects could be called before paint
-      // (synchronously) or after paint (normally). We need
-      // to come up with a way to get the correct end time for both cases.
-      // One solution is in the host config, if the passive effects
-      // have not yet been run, make a call to flush the passive effects
-      // right after paint.
-      const endTime = now();
       currentPendingTransitionCallbacks = null;
-
-      scheduleCallback(IdleSchedulerPriority, () =>
+      currentEndTime = null;
+      scheduleCallback(IdleSchedulerPriority, () => {
         processTransitionCallbacks(
           prevPendingTransitionCallbacks,
-          endTime,
+          prevEndTime,
           prevRootTransitionCallbacks,
-        ),
-      );
+        );
+      });
     }
   }
 
diff --git a/packages/react-reconciler/src/ReactPostPaintCallback.js b/packages/react-reconciler/src/ReactPostPaintCallback.js
new file mode 100644
index 000000000000..a52623caa089
--- /dev/null
+++ b/packages/react-reconciler/src/ReactPostPaintCallback.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+import {requestPostPaintCallback} from './ReactFiberHostConfig';
+
+let postPaintCallbackScheduled = false;
+let callbacks = [];
+
+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/__tests__/ReactFiberHostContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
index 82e23de9965d..19ddc6c8262f 100644
--- a/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactFiberHostContext-test.internal.js
@@ -67,6 +67,7 @@ describe('ReactFiberHostContext', () => {
         return DefaultEventPriority;
       },
       supportsMutation: true,
+      requestPostPaintCallback: function() {},
     });
 
     const container = Renderer.createContainer(
@@ -129,6 +130,7 @@ describe('ReactFiberHostContext', () => {
       getCurrentEventPriority: function() {
         return DefaultEventPriority;
       },
+      requestPostPaintCallback: function() {},
       supportsMutation: true,
     });
 
diff --git a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
index a6637b55977c..45dba5cd3c8a 100644
--- a/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactTransitionTracing-test.js
@@ -2273,4 +2273,231 @@ describe('ReactInteractionTracing', () => {
     });
     expect(Scheduler).toHaveYielded(['Hidden Text']);
   });
+
+  // @gate enableTransitionTracing
+  it('discrete events', async () => {
+    const transitionCallbacks = {
+      onTransitionStart: (name, startTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App() {
+      return (
+        <Suspense
+          fallback={<Text text="Loading..." />}
+          unstable_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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Page Two]',
+      'Loading...',
+      '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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      '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.unstable_yieldValue(
+          `onTransitionStart(${name}, ${startTime})`,
+        );
+      },
+      onTransitionProgress: (name, startTime, endTime, pending) => {
+        const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+        Scheduler.unstable_yieldValue(
+          `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}])`,
+        );
+      },
+      onTransitionComplete: (name, startTime, endTime) => {
+        Scheduler.unstable_yieldValue(
+          `onTransitionComplete(${name}, ${startTime}, ${endTime})`,
+        );
+      },
+    };
+
+    function App() {
+      const [, setRerender] = useState(false);
+      React.useLayoutEffect(() => {
+        resolveText('Text');
+        setRerender(true);
+      });
+      return (
+        <>
+          <Suspense unstable_name="one" fallback={<Text text="Loading..." />}>
+            <AsyncText text="Text" />
+          </Suspense>
+          <Suspense
+            unstable_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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Text]',
+      'Loading...',
+      'Suspend [Text Two]',
+      'Loading Two...',
+      'Text',
+      'Suspend [Text Two]',
+      'Loading Two...',
+      'onTransitionStart(transition, 0)',
+      'onTransitionProgress(transition, 0, 1000, [two])',
+    ]);
+
+    await act(() => {
+      resolveText('Text Two');
+      ReactNoop.expire(1000);
+      advanceTimers(1000);
+    });
+    expect(Scheduler).toHaveYielded([
+      '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.unstable_yieldValue(
+            `onTransitionStart(${name}, ${startTime}) /${transitionName}/`,
+          );
+        },
+        onTransitionProgress: (name, startTime, endTime, pending) => {
+          const suspenseNames = pending.map(p => p.name || '<null>').join(', ');
+          Scheduler.unstable_yieldValue(
+            `onTransitionProgress(${name}, ${startTime}, ${endTime}, [${suspenseNames}]) /${transitionName}/`,
+          );
+        },
+        onTransitionComplete: (name, startTime, endTime) => {
+          Scheduler.unstable_yieldValue(
+            `onTransitionComplete(${name}, ${startTime}, ${endTime}) /${transitionName}/`,
+          );
+        },
+      };
+    };
+
+    function App({name}) {
+      return (
+        <>
+          <Suspense
+            unstable_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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Suspend [Text one]',
+      'Loading one...',
+      'Suspend [Text two]',
+      'Loading two...',
+      '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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      '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);
+    });
+
+    expect(Scheduler).toHaveYielded([
+      'Text two',
+      'onTransitionProgress(transition two, 0, 3000, []) /root two/',
+      'onTransitionComplete(transition two, 0, 3000) /root two/',
+    ]);
+  });
 });
diff --git a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
index 9bb5d6e271c4..517b45ead8fc 100644
--- a/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
+++ b/packages/react-reconciler/src/forks/ReactFiberHostConfig.custom.js
@@ -67,6 +67,7 @@ export const prepareScopeUpdate = $$$hostConfig.prepareScopeUpdate;
 export const getInstanceFromScope = $$$hostConfig.getInstanceFromScope;
 export const getCurrentEventPriority = $$$hostConfig.getCurrentEventPriority;
 export const detachDeletedInstance = $$$hostConfig.detachDeletedInstance;
+export const requestPostPaintCallback = $$$hostConfig.requestPostPaintCallback;
 
 // -------------------
 //      Microtasks
diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js
index b452893ab2a9..dfccf3e9ef0f 100644
--- a/packages/react-test-renderer/src/ReactTestHostConfig.js
+++ b/packages/react-test-renderer/src/ReactTestHostConfig.js
@@ -317,3 +317,7 @@ export function detachDeletedInstance(node: Instance): void {
 export function logRecoverableError(error: mixed): void {
   // noop
 }
+
+export function requestPostPaintCallback(callback: (time: number) => void) {
+  // noop
+}

From 3401e9200efbdb27815f739a90f6e18d1073de13 Mon Sep 17 00:00:00 2001
From: Joseph Savona <josephsavona@users.noreply.github.com>
Date: Tue, 13 Sep 2022 14:44:32 -0700
Subject: [PATCH 1583/1603] useMemoCache implementation (#25143)

* useMemoCache impl
* test for multiple calls in a component (from custom hook)
* Use array of arrays for multiple calls; use alternate/local as the backup
* code cleanup
* fix internal test
* oops we do not support nullable property access
* Simplify implementation, still have questions on some of the PR feedback though
* Gate all code based on the feature flag
* refactor to use updateQueue
* address feedback
* Try to eliminate size increase in prod bundle
* update to retrigger ci
---
 .../src/ReactFiberHooks.new.js                |  84 +++-
 .../src/ReactFiberHooks.old.js                |  84 +++-
 .../src/ReactInternalTypes.js                 |   5 +
 .../src/__tests__/useMemoCache-test.js        | 367 ++++++++++++++++++
 4 files changed, 528 insertions(+), 12 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/useMemoCache-test.js

diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 3f45ec61434a..602f855c76d8 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -16,7 +16,12 @@ import type {
   Usable,
   Thenable,
 } from 'shared/ReactTypes';
-import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
+import type {
+  Fiber,
+  Dispatcher,
+  HookType,
+  MemoCache,
+} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.new';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
@@ -177,6 +182,8 @@ type StoreConsistencyCheck<T> = {
 export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
+  // NOTE: optional, only set when enableUseMemoCacheHook is enabled
+  memoCache?: MemoCache | null,
 };
 
 type BasicStateAction<S> = (S => S) | S;
@@ -710,10 +717,23 @@ function updateWorkInProgressHook(): Hook {
   return workInProgressHook;
 }
 
-function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
-  return {
-    lastEffect: null,
-    stores: null,
+// NOTE: defining two versions of this function to avoid size impact when this feature is disabled.
+// Previously this function was inlined, the additional `memoCache` property makes it not inlined.
+let createFunctionComponentUpdateQueue: () => FunctionComponentUpdateQueue;
+if (enableUseMemoCacheHook) {
+  createFunctionComponentUpdateQueue = () => {
+    return {
+      lastEffect: null,
+      stores: null,
+      memoCache: null,
+    };
+  };
+} else {
+  createFunctionComponentUpdateQueue = () => {
+    return {
+      lastEffect: null,
+      stores: null,
+    };
   };
 }
 
@@ -787,7 +807,59 @@ function use<T>(usable: Usable<T>): T {
 }
 
 function useMemoCache(size: number): Array<any> {
-  throw new Error('Not implemented.');
+  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
+  // TODO: not sure how to access the current fiber here other than going through
+  // currentlyRenderingFiber.alternate
+  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 = {
+            data: currentMemoCache.data.map(array => array.slice()),
+            index: 0,
+          };
+        }
+      }
+    }
+  }
+  // Finally fall back to allocating a fresh instance of the cache
+  if (memoCache == null) {
+    memoCache = {
+      data: [],
+      index: 0,
+    };
+  }
+  if (updateQueue === null) {
+    updateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber.updateQueue = updateQueue;
+  }
+  updateQueue.memoCache = memoCache;
+
+  let data = memoCache.data[memoCache.index];
+  if (data === undefined) {
+    data = memoCache.data[memoCache.index] = new Array(size);
+  } 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 {
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 5495a2992b78..f2b024bee943 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -16,7 +16,12 @@ import type {
   Usable,
   Thenable,
 } from 'shared/ReactTypes';
-import type {Fiber, Dispatcher, HookType} from './ReactInternalTypes';
+import type {
+  Fiber,
+  Dispatcher,
+  HookType,
+  MemoCache,
+} from './ReactInternalTypes';
 import type {Lanes, Lane} from './ReactFiberLane.old';
 import type {HookFlags} from './ReactHookEffectTags';
 import type {FiberRoot} from './ReactInternalTypes';
@@ -177,6 +182,8 @@ type StoreConsistencyCheck<T> = {
 export type FunctionComponentUpdateQueue = {
   lastEffect: Effect | null,
   stores: Array<StoreConsistencyCheck<any>> | null,
+  // NOTE: optional, only set when enableUseMemoCacheHook is enabled
+  memoCache?: MemoCache | null,
 };
 
 type BasicStateAction<S> = (S => S) | S;
@@ -710,10 +717,23 @@ function updateWorkInProgressHook(): Hook {
   return workInProgressHook;
 }
 
-function createFunctionComponentUpdateQueue(): FunctionComponentUpdateQueue {
-  return {
-    lastEffect: null,
-    stores: null,
+// NOTE: defining two versions of this function to avoid size impact when this feature is disabled.
+// Previously this function was inlined, the additional `memoCache` property makes it not inlined.
+let createFunctionComponentUpdateQueue: () => FunctionComponentUpdateQueue;
+if (enableUseMemoCacheHook) {
+  createFunctionComponentUpdateQueue = () => {
+    return {
+      lastEffect: null,
+      stores: null,
+      memoCache: null,
+    };
+  };
+} else {
+  createFunctionComponentUpdateQueue = () => {
+    return {
+      lastEffect: null,
+      stores: null,
+    };
   };
 }
 
@@ -787,7 +807,59 @@ function use<T>(usable: Usable<T>): T {
 }
 
 function useMemoCache(size: number): Array<any> {
-  throw new Error('Not implemented.');
+  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
+  // TODO: not sure how to access the current fiber here other than going through
+  // currentlyRenderingFiber.alternate
+  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 = {
+            data: currentMemoCache.data.map(array => array.slice()),
+            index: 0,
+          };
+        }
+      }
+    }
+  }
+  // Finally fall back to allocating a fresh instance of the cache
+  if (memoCache == null) {
+    memoCache = {
+      data: [],
+      index: 0,
+    };
+  }
+  if (updateQueue === null) {
+    updateQueue = createFunctionComponentUpdateQueue();
+    currentlyRenderingFiber.updateQueue = updateQueue;
+  }
+  updateQueue.memoCache = memoCache;
+
+  let data = memoCache.data[memoCache.index];
+  if (data === undefined) {
+    data = memoCache.data[memoCache.index] = new Array(size);
+  } 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 {
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index df7398c7963d..004aa17e56ad 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -68,6 +68,11 @@ export type Dependencies = {
   ...
 };
 
+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 = {
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 000000000000..94684ec8c00b
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useMemoCache-test.js
@@ -0,0 +1,367 @@
+let React;
+let ReactNoop;
+let act;
+let useState;
+let useMemoCache;
+let ErrorBoundary;
+
+describe('useMemoCache()', () => {
+  beforeEach(() => {
+    jest.resetModules();
+
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    act = require('jest-react').act;
+    useState = React.useState;
+    useMemoCache = React.unstable_useMemoCache;
+
+    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;
+  });
+
+  // @gate enableUseMemoCacheHook
+  test('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(undefined);
+      return 'Ok';
+    }
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('Ok');
+  });
+
+  // @gate enableUseMemoCacheHook
+  test('update component using cache', 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];
+      }
+      if (c_x || c_n) {
+        return (cache[3] = <Text data={data} n={n} />);
+      } else {
+        return cache[3];
+      }
+    }
+    let data;
+    const Text = jest.fn(function Text(props) {
+      data = props.data;
+      return data.text;
+    });
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('Count 0');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    // Changing x should reset the data object
+    await act(async () => {
+      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(async () => {
+      forceUpdate();
+    });
+    expect(root).toMatchRenderedOutput('Count 1');
+    expect(Text).toBeCalledTimes(3);
+    expect(data).toBe(data1); // confirm that the cache persisted across renders
+  });
+
+  // @gate enableUseMemoCacheHook
+  test('update component using cache with setstate during render', async () => {
+    let setX;
+    let setN;
+    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);
+      setN = _setN;
+      const c_n = n !== cache[1];
+      cache[1] = n;
+
+      // NOTE: setstate and early return here means that x will update
+      // without the data value being updated. Subsequent renders could
+      // therefore think that c_x = false (hasn't changed) and skip updating
+      // data.
+      // The memoizing compiler will have to handle this case, but the runtime
+      // can help by falling back to resetting the cache if a setstate occurs
+      // during render (this mirrors what we do for useMemo and friends)
+      if (n === 1) {
+        setN(2);
+        return;
+      }
+
+      let data;
+      if (c_x) {
+        data = cache[2] = {text: `Count ${x}`};
+      } else {
+        data = cache[2];
+      }
+      if (c_x || c_n) {
+        return (cache[3] = <Text data={data} n={n} />);
+      } else {
+        return cache[3];
+      }
+    }
+    let data;
+    const Text = jest.fn(function Text(props) {
+      data = props.data;
+      return data.text;
+    });
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('Count 0');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    // Simultaneously trigger an update to x (should create a new data value)
+    // and trigger the setState+early return. The runtime should reset the cache
+    // to avoid an inconsistency
+    await act(async () => {
+      setX(1);
+      setN(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(async () => {
+      setN(3);
+    });
+    expect(root).toMatchRenderedOutput('Count 1');
+    expect(Text).toBeCalledTimes(3);
+    expect(data).toBe(data1); // confirm that the cache persisted across renders
+  });
+
+  // @gate enableUseMemoCacheHook
+  test('update component using cache with throw during render', async () => {
+    let setX;
+    let setN;
+    let shouldFail = true;
+    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);
+      setN = _setN;
+      const c_n = n !== cache[1];
+      cache[1] = n;
+
+      // NOTE the initial failure will trigger a re-render, after which the function
+      // will early return. This validates that the runtime resets the cache on error:
+      // if it doesn't the cache will be corrupt, with the cached version of data
+      // out of data from the cached version of x.
+      if (n === 1) {
+        if (shouldFail) {
+          shouldFail = false;
+          throw new Error('failed');
+        }
+        setN(2);
+        return;
+      }
+
+      let data;
+      if (c_x) {
+        data = cache[2] = {text: `Count ${x}`};
+      } else {
+        data = cache[2];
+      }
+      if (c_x || c_n) {
+        return (cache[3] = <Text data={data} n={n} />);
+      } else {
+        return cache[3];
+      }
+    }
+    let data;
+    const Text = jest.fn(function Text(props) {
+      data = props.data;
+      return data.text;
+    });
+
+    spyOnDev(console, 'error');
+
+    const root = ReactNoop.createRoot();
+    await act(async () => {
+      root.render(
+        <ErrorBoundary>
+          <Component />
+        </ErrorBoundary>,
+      );
+    });
+    expect(root).toMatchRenderedOutput('Count 0');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    // Simultaneously trigger an update to x (should create a new data value)
+    // and trigger the setState+early return. The runtime should reset the cache
+    // to avoid an inconsistency
+    await act(async () => {
+      // this update bumps the count
+      setX(1);
+      // this triggers a throw.
+      setN(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(async () => {
+      setN(3);
+    });
+    expect(root).toMatchRenderedOutput('Count 1');
+    expect(Text).toBeCalledTimes(3);
+    expect(data).toBe(data1); // confirm that the cache persisted across renders
+  });
+
+  // @gate enableUseMemoCacheHook
+  test('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(async () => {
+      root.render(<Component />);
+    });
+    expect(root).toMatchRenderedOutput('count 0');
+    expect(Text).toBeCalledTimes(1);
+    const data0 = data;
+
+    // Changing x should reset the data object
+    await act(async () => {
+      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(async () => {
+      forceUpdate();
+    });
+    expect(root).toMatchRenderedOutput('count 1');
+    expect(Text).toBeCalledTimes(3);
+    expect(data).toBe(data1); // confirm that the cache persisted across renders
+  });
+});

From aca7f30c9599d8724a3ae1a3df8ce3e14e48029a Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Tue, 13 Sep 2022 17:54:00 -0400
Subject: [PATCH 1584/1603] CI: extract node_modules cache key computation
 (#25258)

---
 .circleci/config.yml | 48 ++++++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2a259a76a5cd..5950e8bb933c 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -12,6 +12,11 @@ aliases:
       name: Restore yarn cache
       key: v2-node-{{ arch }}-{{ checksum "yarn.lock" }}-yarn
 
+  - &prepare_node_modules_cache_key
+    run:
+      name: Preparing node_modules cache key
+      command: yarn workspaces info | head -n -1 > workspace_info.txt
+
   - &restore_node_modules
     restore_cache:
       name: Restore node_modules cache
@@ -72,7 +77,7 @@ jobs:
 
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: node ./scripts/prettier/index
       - run: node ./scripts/tasks/eslint
@@ -87,7 +92,7 @@ jobs:
 
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: node ./scripts/tasks/flow-ci
 
@@ -97,7 +102,7 @@ jobs:
 
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           command: |
@@ -114,7 +119,7 @@ jobs:
     parallelism: 40
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn build-combined
       - persist_to_workspace:
@@ -130,7 +135,7 @@ jobs:
         type: string
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Download artifacts for revision
@@ -148,7 +153,7 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Download artifacts for base revision
@@ -177,7 +182,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
         # Compress build directory into a single tarball for easy download
@@ -197,7 +202,7 @@ jobs:
       - attach_workspace:
           at: .
       - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           command: node ./scripts/tasks/danger
@@ -209,7 +214,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Install Packages
@@ -228,7 +233,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Install Packages
@@ -254,7 +259,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Install nested packages from Yarn cache
@@ -273,7 +278,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Install nested packages from Yarn cache
@@ -301,7 +306,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn lint-build
 
@@ -312,7 +317,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn check-release-dependencies
 
@@ -323,7 +328,7 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Search build artifacts for unminified errors
@@ -340,7 +345,7 @@ jobs:
         type: string
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn test <<parameters.args>> --ci
 
@@ -355,7 +360,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Install nested packages from Yarn cache
@@ -369,7 +374,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Run DOM fixture tests
@@ -386,7 +391,7 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Run fuzz tests
@@ -406,7 +411,7 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Run publish script
@@ -425,7 +430,7 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
+      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Fetch revisions that contain an intentional fork
@@ -676,4 +681,3 @@ workflows:
           commit_sha: << pipeline.git.revision >>
           release_channel: experimental
           dist_tag: experimental
-

From 346c7d4c43a0717302d446da9e7423a8e28d8996 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Tue, 13 Sep 2022 17:57:38 -0400
Subject: [PATCH 1585/1603] straightford explicit types (#25253)

---
 .../react-debug-tools/src/ReactDebugHooks.js  |  2 +-
 .../src/client/ReactDOMHostConfig.js          |  8 ++--
 .../src/client/inputValueTracking.js          |  2 +-
 .../src/events/checkPassiveEvents.js          |  2 +-
 packages/react-dom/src/shared/DOMProperty.js  |  4 +-
 .../react-dom/src/shared/isCustomComponent.js |  2 +-
 packages/react-is/src/ReactIs.js              | 28 +++++------
 .../react-reconciler/src/ReactCurrentFiber.js |  2 +-
 .../src/ReactEventPriorities.js               |  2 +-
 .../react-reconciler/src/ReactFiber.new.js    |  7 ++-
 .../react-reconciler/src/ReactFiber.old.js    |  7 ++-
 .../react-reconciler/src/ReactFiberAct.new.js |  2 +-
 .../react-reconciler/src/ReactFiberAct.old.js |  2 +-
 .../src/ReactFiberBeginWork.new.js            |  4 +-
 .../src/ReactFiberBeginWork.old.js            |  4 +-
 .../src/ReactFiberClassUpdateQueue.new.js     |  2 +-
 .../src/ReactFiberClassUpdateQueue.old.js     |  2 +-
 .../src/ReactFiberCommitWork.new.js           |  2 +-
 .../src/ReactFiberCommitWork.old.js           |  2 +-
 .../src/ReactFiberHiddenContext.new.js        |  2 +-
 .../src/ReactFiberHiddenContext.old.js        |  2 +-
 .../src/ReactFiberHooks.new.js                |  2 +-
 .../src/ReactFiberHooks.old.js                |  2 +-
 .../src/ReactFiberHotReloading.js             | 23 +++++----
 .../src/ReactFiberHydrationContext.new.js     |  4 +-
 .../src/ReactFiberHydrationContext.old.js     |  4 +-
 .../src/ReactFiberLane.new.js                 | 24 +++++-----
 .../src/ReactFiberLane.old.js                 | 24 +++++-----
 .../src/ReactFiberNewContext.new.js           |  4 +-
 .../src/ReactFiberNewContext.old.js           |  4 +-
 .../src/ReactFiberShellHydration.js           |  2 +-
 .../src/ReactFiberSyncTaskQueue.new.js        |  2 +-
 .../src/ReactFiberSyncTaskQueue.old.js        |  2 +-
 .../src/ReactFiberWakeable.new.js             |  4 +-
 .../src/ReactFiberWakeable.old.js             |  4 +-
 .../src/ReactFiberWorkLoop.new.js             |  8 ++--
 .../src/ReactFiberWorkLoop.old.js             |  8 ++--
 packages/react-reconciler/src/clz32.js        |  4 +-
 .../react-refresh/src/ReactFreshRuntime.js    |  4 +-
 .../src/ReactFlightWebpackNodeLoader.js       |  2 +-
 .../src/ReactFlightWebpackPlugin.js           |  2 +-
 packages/react-server/src/ReactFizzContext.js |  3 +-
 packages/react-server/src/ReactFizzHooks.js   |  4 +-
 packages/react-server/src/ReactFlightHooks.js |  2 +-
 packages/react/src/BadMapPolyfill.js          |  2 +-
 .../scheduler/src/forks/SchedulerPostTask.js  |  2 +-
 packages/shared/CheckStringCoercion.js        | 18 ++++---
 packages/shared/ReactErrorUtils.js            |  2 +-
 packages/shared/ReactSymbols.js               | 48 +++++++++++--------
 .../forks/ReactFeatureFlags.www-dynamic.js    |  2 +-
 .../shared/forks/ReactFeatureFlags.www.js     |  6 +--
 packages/shared/isValidElementType.js         |  2 +-
 52 files changed, 175 insertions(+), 139 deletions(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index 2cb6e7fbdf38..a09da97f90d7 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -783,7 +783,7 @@ export function inspectHooksOfFiber(
   fiber: Fiber,
   currentDispatcher: ?CurrentDispatcherRef,
   includeHooksSource?: boolean = false,
-) {
+): 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) {
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index c9c6e11fdfe0..64195ac7f595 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -680,7 +680,7 @@ export function clearContainer(container: Container): void {
 
 export const supportsHydration = true;
 
-export function isHydratableResource(type: string, props: Props) {
+export function isHydratableResource(type: string, props: Props): boolean {
   return (
     type === 'link' &&
     typeof (props: any).precedence === 'string' &&
@@ -726,11 +726,13 @@ export function canHydrateSuspenseInstance(
   return ((instance: any): SuspenseInstance);
 }
 
-export function isSuspenseInstancePending(instance: SuspenseInstance) {
+export function isSuspenseInstancePending(instance: SuspenseInstance): boolean {
   return instance.data === SUSPENSE_PENDING_START_DATA;
 }
 
-export function isSuspenseInstanceFallback(instance: SuspenseInstance) {
+export function isSuspenseInstanceFallback(
+  instance: SuspenseInstance,
+): boolean {
   return instance.data === SUSPENSE_FALLBACK_START_DATA;
 }
 
diff --git a/packages/react-dom/src/client/inputValueTracking.js b/packages/react-dom/src/client/inputValueTracking.js
index 6bec33f9b043..2c279331e8ad 100644
--- a/packages/react-dom/src/client/inputValueTracking.js
+++ b/packages/react-dom/src/client/inputValueTracking.js
@@ -123,7 +123,7 @@ export function track(node: ElementWithValueTracker) {
   node._valueTracker = trackValueOnNode(node);
 }
 
-export function updateValueIfChanged(node: ElementWithValueTracker) {
+export function updateValueIfChanged(node: ElementWithValueTracker): boolean {
   if (!node) {
     return false;
   }
diff --git a/packages/react-dom/src/events/checkPassiveEvents.js b/packages/react-dom/src/events/checkPassiveEvents.js
index 12680a885ebd..396060867414 100644
--- a/packages/react-dom/src/events/checkPassiveEvents.js
+++ b/packages/react-dom/src/events/checkPassiveEvents.js
@@ -9,7 +9,7 @@
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 
-export let passiveBrowserEventsSupported = false;
+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
diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js
index 09f1dd2b66a3..0ae244d8c98a 100644
--- a/packages/react-dom/src/shared/DOMProperty.js
+++ b/packages/react-dom/src/shared/DOMProperty.js
@@ -63,10 +63,10 @@ export type PropertyInfo = {
 export 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';
 /* eslint-enable max-len */
-export const ATTRIBUTE_NAME_CHAR =
+export const ATTRIBUTE_NAME_CHAR: string =
   ATTRIBUTE_NAME_START_CHAR + '\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040';
 
-export const VALID_ATTRIBUTE_NAME_REGEX = new RegExp(
+export const VALID_ATTRIBUTE_NAME_REGEX: RegExp = new RegExp(
   '^[' + ATTRIBUTE_NAME_START_CHAR + '][' + ATTRIBUTE_NAME_CHAR + ']*$',
 );
 
diff --git a/packages/react-dom/src/shared/isCustomComponent.js b/packages/react-dom/src/shared/isCustomComponent.js
index aa6b2903c0e7..e94bc239d9c4 100644
--- a/packages/react-dom/src/shared/isCustomComponent.js
+++ b/packages/react-dom/src/shared/isCustomComponent.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-function isCustomComponent(tagName: string, props: Object) {
+function isCustomComponent(tagName: string, props: Object): boolean {
   if (tagName.indexOf('-') === -1) {
     return typeof props.is === 'string';
   }
diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js
index 8c5d26a08c2a..26bf7e3c6b36 100644
--- a/packages/react-is/src/ReactIs.js
+++ b/packages/react-is/src/ReactIs.js
@@ -82,7 +82,7 @@ let hasWarnedAboutDeprecatedIsAsyncMode = false;
 let hasWarnedAboutDeprecatedIsConcurrentMode = false;
 
 // AsyncMode should be deprecated
-export function isAsyncMode(object: any) {
+export function isAsyncMode(object: any): boolean {
   if (__DEV__) {
     if (!hasWarnedAboutDeprecatedIsAsyncMode) {
       hasWarnedAboutDeprecatedIsAsyncMode = true;
@@ -95,7 +95,7 @@ export function isAsyncMode(object: any) {
   }
   return false;
 }
-export function isConcurrentMode(object: any) {
+export function isConcurrentMode(object: any): boolean {
   if (__DEV__) {
     if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
       hasWarnedAboutDeprecatedIsConcurrentMode = true;
@@ -108,43 +108,43 @@ export function isConcurrentMode(object: any) {
   }
   return false;
 }
-export function isContextConsumer(object: any) {
+export function isContextConsumer(object: any): boolean {
   return typeOf(object) === REACT_CONTEXT_TYPE;
 }
-export function isContextProvider(object: any) {
+export function isContextProvider(object: any): boolean {
   return typeOf(object) === REACT_PROVIDER_TYPE;
 }
-export function isElement(object: any) {
+export function isElement(object: any): boolean {
   return (
     typeof object === 'object' &&
     object !== null &&
     object.$$typeof === REACT_ELEMENT_TYPE
   );
 }
-export function isForwardRef(object: any) {
+export function isForwardRef(object: any): boolean {
   return typeOf(object) === REACT_FORWARD_REF_TYPE;
 }
-export function isFragment(object: any) {
+export function isFragment(object: any): boolean {
   return typeOf(object) === REACT_FRAGMENT_TYPE;
 }
-export function isLazy(object: any) {
+export function isLazy(object: any): boolean {
   return typeOf(object) === REACT_LAZY_TYPE;
 }
-export function isMemo(object: any) {
+export function isMemo(object: any): boolean {
   return typeOf(object) === REACT_MEMO_TYPE;
 }
-export function isPortal(object: any) {
+export function isPortal(object: any): boolean {
   return typeOf(object) === REACT_PORTAL_TYPE;
 }
-export function isProfiler(object: any) {
+export function isProfiler(object: any): boolean {
   return typeOf(object) === REACT_PROFILER_TYPE;
 }
-export function isStrictMode(object: any) {
+export function isStrictMode(object: any): boolean {
   return typeOf(object) === REACT_STRICT_MODE_TYPE;
 }
-export function isSuspense(object: any) {
+export function isSuspense(object: any): boolean {
   return typeOf(object) === REACT_SUSPENSE_TYPE;
 }
-export function isSuspenseList(object: any) {
+export function isSuspenseList(object: any): boolean {
   return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
 }
diff --git a/packages/react-reconciler/src/ReactCurrentFiber.js b/packages/react-reconciler/src/ReactCurrentFiber.js
index 08853b384bc6..5c9fa7a05236 100644
--- a/packages/react-reconciler/src/ReactCurrentFiber.js
+++ b/packages/react-reconciler/src/ReactCurrentFiber.js
@@ -73,7 +73,7 @@ export function setIsRendering(rendering: boolean) {
   }
 }
 
-export function getIsRendering() {
+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
index 46223aa70df5..faf30c3338ad 100644
--- a/packages/react-reconciler/src/ReactEventPriorities.js
+++ b/packages/react-reconciler/src/ReactEventPriorities.js
@@ -58,7 +58,7 @@ export function getCurrentUpdatePriority(): EventPriority {
     : (getCurrentUpdatePriority_old(): any);
 }
 
-export function setCurrentUpdatePriority(priority: EventPriority) {
+export function setCurrentUpdatePriority(priority: EventPriority): void {
   return enableNewReconciler
     ? setCurrentUpdatePriority_new((priority: any))
     : setCurrentUpdatePriority_old((priority: any));
diff --git a/packages/react-reconciler/src/ReactFiber.new.js b/packages/react-reconciler/src/ReactFiber.new.js
index d6a6c8f7adc1..484f954a6f4d 100644
--- a/packages/react-reconciler/src/ReactFiber.new.js
+++ b/packages/react-reconciler/src/ReactFiber.new.js
@@ -225,7 +225,7 @@ function shouldConstruct(Component: Function) {
   return !!(prototype && prototype.isReactComponent);
 }
 
-export function isSimpleFunctionComponent(type: any) {
+export function isSimpleFunctionComponent(type: any): boolean {
   return (
     typeof type === 'function' &&
     !shouldConstruct(type) &&
@@ -355,7 +355,10 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
 }
 
 // Used to reuse a Fiber for a second pass.
-export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
+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
diff --git a/packages/react-reconciler/src/ReactFiber.old.js b/packages/react-reconciler/src/ReactFiber.old.js
index d8f1ef424bd1..60d52c2d0b82 100644
--- a/packages/react-reconciler/src/ReactFiber.old.js
+++ b/packages/react-reconciler/src/ReactFiber.old.js
@@ -225,7 +225,7 @@ function shouldConstruct(Component: Function) {
   return !!(prototype && prototype.isReactComponent);
 }
 
-export function isSimpleFunctionComponent(type: any) {
+export function isSimpleFunctionComponent(type: any): boolean {
   return (
     typeof type === 'function' &&
     !shouldConstruct(type) &&
@@ -355,7 +355,10 @@ export function createWorkInProgress(current: Fiber, pendingProps: any): Fiber {
 }
 
 // Used to reuse a Fiber for a second pass.
-export function resetWorkInProgress(workInProgress: Fiber, renderLanes: Lanes) {
+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
diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js
index bad7fd3dc52f..53a4922ad541 100644
--- a/packages/react-reconciler/src/ReactFiberAct.new.js
+++ b/packages/react-reconciler/src/ReactFiberAct.new.js
@@ -15,7 +15,7 @@ import {warnsIfNotActing} from './ReactFiberHostConfig';
 
 const {ReactCurrentActQueue} = ReactSharedInternals;
 
-export function isLegacyActEnvironment(fiber: Fiber) {
+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
diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js
index 6358ab66a348..32d3a0f27071 100644
--- a/packages/react-reconciler/src/ReactFiberAct.old.js
+++ b/packages/react-reconciler/src/ReactFiberAct.old.js
@@ -15,7 +15,7 @@ import {warnsIfNotActing} from './ReactFiberHostConfig';
 
 const {ReactCurrentActQueue} = ReactSharedInternals;
 
-export function isLegacyActEnvironment(fiber: Fiber) {
+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
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index fa417e08114c..913a054be2dd 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -281,7 +281,7 @@ let didWarnAboutModulePatternComponent;
 let didWarnAboutContextTypeOnFunctionComponent;
 let didWarnAboutGetDerivedStateOnFunctionComponent;
 let didWarnAboutFunctionRefs;
-export let didWarnAboutReassigningProps;
+export let didWarnAboutReassigningProps: boolean;
 let didWarnAboutRevealOrder;
 let didWarnAboutTailOptions;
 let didWarnAboutDefaultPropsOnFunctionComponent;
@@ -3479,7 +3479,7 @@ export function markWorkInProgressReceivedUpdate() {
   didReceiveUpdate = true;
 }
 
-export function checkIfWorkInProgressReceivedUpdate() {
+export function checkIfWorkInProgressReceivedUpdate(): boolean {
   return didReceiveUpdate;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 449f306e7ef8..382e9075716a 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -281,7 +281,7 @@ let didWarnAboutModulePatternComponent;
 let didWarnAboutContextTypeOnFunctionComponent;
 let didWarnAboutGetDerivedStateOnFunctionComponent;
 let didWarnAboutFunctionRefs;
-export let didWarnAboutReassigningProps;
+export let didWarnAboutReassigningProps: boolean;
 let didWarnAboutRevealOrder;
 let didWarnAboutTailOptions;
 let didWarnAboutDefaultPropsOnFunctionComponent;
@@ -3479,7 +3479,7 @@ export function markWorkInProgressReceivedUpdate() {
   didReceiveUpdate = true;
 }
 
-export function checkIfWorkInProgressReceivedUpdate() {
+export function checkIfWorkInProgressReceivedUpdate(): boolean {
   return didReceiveUpdate;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
index 5bdc8fc6a82a..5bf0a7a376ce 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js
@@ -164,7 +164,7 @@ let hasForceUpdate = false;
 
 let didWarnUpdateInsideUpdate;
 let currentlyProcessingQueue;
-export let resetCurrentlyProcessingQueue;
+export let resetCurrentlyProcessingQueue: () => void;
 if (__DEV__) {
   didWarnUpdateInsideUpdate = false;
   currentlyProcessingQueue = null;
diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
index bdff2ea93e70..c9918ae104c0 100644
--- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js
@@ -164,7 +164,7 @@ let hasForceUpdate = false;
 
 let didWarnUpdateInsideUpdate;
 let currentlyProcessingQueue;
-export let resetCurrentlyProcessingQueue;
+export let resetCurrentlyProcessingQueue: () => void;
 if (__DEV__) {
   didWarnUpdateInsideUpdate = false;
   currentlyProcessingQueue = null;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index c70e4ae3470e..1710bcfc861e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -320,7 +320,7 @@ let shouldFireAfterActiveInstanceBlur: boolean = false;
 export function commitBeforeMutationEffects(
   root: FiberRoot,
   firstChild: Fiber,
-) {
+): boolean {
   focusedInstanceHandle = prepareForCommit(root.containerInfo);
 
   nextEffect = firstChild;
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index 4b5076a61c51..a7a8929d2b68 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -320,7 +320,7 @@ let shouldFireAfterActiveInstanceBlur: boolean = false;
 export function commitBeforeMutationEffects(
   root: FiberRoot,
   firstChild: Fiber,
-) {
+): boolean {
   focusedInstanceHandle = prepareForCommit(root.containerInfo);
 
   nextEffect = firstChild;
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.new.js b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
index 3ce3490a3990..d44178a3efc8 100644
--- a/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.new.js
@@ -66,6 +66,6 @@ export function popHiddenContext(fiber: Fiber): void {
   pop(prevRenderLanesStackCursor, fiber);
 }
 
-export function isCurrentTreeHidden() {
+export function isCurrentTreeHidden(): boolean {
   return currentTreeHiddenStackCursor.current !== null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
index 565dc4ae20e9..1886dfef8bb5 100644
--- a/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHiddenContext.old.js
@@ -66,6 +66,6 @@ export function popHiddenContext(fiber: Fiber): void {
   pop(prevRenderLanesStackCursor, fiber);
 }
 
-export function isCurrentTreeHidden() {
+export function isCurrentTreeHidden(): boolean {
   return currentTreeHiddenStackCursor.current !== null;
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index 602f855c76d8..b602c3691471 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -571,7 +571,7 @@ export function renderWithHooks<Props, SecondArg>(
   return children;
 }
 
-export function checkDidRenderIdHook() {
+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.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index f2b024bee943..9f0cb1914581 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -571,7 +571,7 @@ export function renderWithHooks<Props, SecondArg>(
   return children;
 }
 
-export function checkDidRenderIdHook() {
+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.
diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.js b/packages/react-reconciler/src/ReactFiberHotReloading.js
index 0d3fdca45cef..385ee8bfcd8e 100644
--- a/packages/react-reconciler/src/ReactFiberHotReloading.js
+++ b/packages/react-reconciler/src/ReactFiberHotReloading.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {Fiber} from './ReactInternalTypes';
+import type {ReactElement} from '../../shared/ReactElementType';
 import type {Instance} from './ReactFiberHostConfig';
 import type {FiberRoot} from './ReactInternalTypes';
 import type {ReactNodeList} from 'shared/ReactTypes';
@@ -58,9 +60,9 @@ export type FindHostInstancesForRefresh = (
   families: Array<Family>,
 ) => Set<Instance>;
 
-export const setRefreshHandler = enableNewReconciler
-  ? setRefreshHandler_new
-  : setRefreshHandler_old;
+export const setRefreshHandler: (
+  handler: RefreshHandler | null,
+) => void = enableNewReconciler ? setRefreshHandler_new : setRefreshHandler_old;
 export const resolveFunctionForHotReloading = enableNewReconciler
   ? resolveFunctionForHotReloading_new
   : resolveFunctionForHotReloading_old;
@@ -70,18 +72,23 @@ export const resolveClassForHotReloading = enableNewReconciler
 export const resolveForwardRefForHotReloading = enableNewReconciler
   ? resolveForwardRefForHotReloading_new
   : resolveForwardRefForHotReloading_old;
-export const isCompatibleFamilyForHotReloading = enableNewReconciler
+export const isCompatibleFamilyForHotReloading: (
+  fiber: Fiber,
+  element: ReactElement,
+) => boolean = enableNewReconciler
   ? isCompatibleFamilyForHotReloading_new
   : isCompatibleFamilyForHotReloading_old;
-export const markFailedErrorBoundaryForHotReloading = enableNewReconciler
+export const markFailedErrorBoundaryForHotReloading: (
+  fiber: Fiber,
+) => void = enableNewReconciler
   ? markFailedErrorBoundaryForHotReloading_new
   : markFailedErrorBoundaryForHotReloading_old;
-export const scheduleRefresh = enableNewReconciler
+export const scheduleRefresh: ScheduleRefresh = enableNewReconciler
   ? scheduleRefresh_new
   : scheduleRefresh_old;
-export const scheduleRoot = enableNewReconciler
+export const scheduleRoot: ScheduleRoot = enableNewReconciler
   ? scheduleRoot_new
   : scheduleRoot_old;
-export const findHostInstancesForRefresh = enableNewReconciler
+export const findHostInstancesForRefresh: FindHostInstancesForRefresh = enableNewReconciler
   ? findHostInstancesForRefresh_new
   : findHostInstancesForRefresh_old;
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
index 23010daad497..66c28274ae0c 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.new.js
@@ -109,7 +109,7 @@ export function markDidThrowWhileHydratingDEV() {
   }
 }
 
-export function didSuspendOrErrorWhileHydratingDEV() {
+export function didSuspendOrErrorWhileHydratingDEV(): boolean {
   if (__DEV__) {
     return didSuspendOrErrorDEV;
   }
@@ -685,7 +685,7 @@ function popHydrationState(fiber: Fiber): boolean {
   return true;
 }
 
-function hasUnhydratedTailNodes() {
+function hasUnhydratedTailNodes(): boolean {
   return isHydrating && nextHydratableInstance !== null;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
index 28371e823e5c..10e59b1d2bf0 100644
--- a/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberHydrationContext.old.js
@@ -109,7 +109,7 @@ export function markDidThrowWhileHydratingDEV() {
   }
 }
 
-export function didSuspendOrErrorWhileHydratingDEV() {
+export function didSuspendOrErrorWhileHydratingDEV(): boolean {
   if (__DEV__) {
     return didSuspendOrErrorDEV;
   }
@@ -685,7 +685,7 @@ function popHydrationState(fiber: Fiber): boolean {
   return true;
 }
 
-function hasUnhydratedTailNodes() {
+function hasUnhydratedTailNodes(): boolean {
   return isHydrating && nextHydratableInstance !== null;
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberLane.new.js b/packages/react-reconciler/src/ReactFiberLane.new.js
index 2dcbe70ee796..36af3b95bece 100644
--- a/packages/react-reconciler/src/ReactFiberLane.new.js
+++ b/packages/react-reconciler/src/ReactFiberLane.new.js
@@ -435,7 +435,7 @@ export function markStarvedLanesAsExpired(
 
 // This returns the highest priority pending lanes regardless of whether they
 // are suspended.
-export function getHighestPriorityPendingLanes(root: FiberRoot) {
+export function getHighestPriorityPendingLanes(root: FiberRoot): Lanes {
   return getHighestPriorityLanes(root.pendingLanes);
 }
 
@@ -458,25 +458,25 @@ export function getLanesToRetrySynchronouslyOnError(
   return NoLanes;
 }
 
-export function includesSyncLane(lanes: Lanes) {
+export function includesSyncLane(lanes: Lanes): boolean {
   return (lanes & SyncLane) !== NoLanes;
 }
 
-export function includesNonIdleWork(lanes: Lanes) {
+export function includesNonIdleWork(lanes: Lanes): boolean {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
-export function includesOnlyRetries(lanes: Lanes) {
+export function includesOnlyRetries(lanes: Lanes): boolean {
   return (lanes & RetryLanes) === lanes;
 }
-export function includesOnlyNonUrgentLanes(lanes: Lanes) {
+export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
   const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
   return (lanes & UrgentLanes) === NoLanes;
 }
-export function includesOnlyTransitions(lanes: Lanes) {
+export function includesOnlyTransitions(lanes: Lanes): boolean {
   return (lanes & TransitionLanes) === lanes;
 }
 
-export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
+export function includesBlockingLane(root: FiberRoot, lanes: Lanes): boolean {
   if (
     allowConcurrentByDefault &&
     (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
@@ -492,13 +492,13 @@ export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   return (lanes & SyncDefaultLanes) !== NoLanes;
 }
 
-export function includesExpiredLane(root: FiberRoot, lanes: Lanes) {
+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 isTransitionLane(lane: Lane) {
+export function isTransitionLane(lane: Lane): boolean {
   return (lane & TransitionLanes) !== NoLanes;
 }
 
@@ -543,11 +543,11 @@ function laneToIndex(lane: Lane) {
   return pickArbitraryLaneIndex(lane);
 }
 
-export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane) {
+export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane): boolean {
   return (a & b) !== NoLanes;
 }
 
-export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane) {
+export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane): boolean {
   return (set & subset) === subset;
 }
 
@@ -569,7 +569,7 @@ export function laneToLanes(lane: Lane): Lanes {
   return lane;
 }
 
-export function higherPriorityLane(a: Lane, b: 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;
 }
diff --git a/packages/react-reconciler/src/ReactFiberLane.old.js b/packages/react-reconciler/src/ReactFiberLane.old.js
index 6042a1a31c42..38fe4700dff4 100644
--- a/packages/react-reconciler/src/ReactFiberLane.old.js
+++ b/packages/react-reconciler/src/ReactFiberLane.old.js
@@ -435,7 +435,7 @@ export function markStarvedLanesAsExpired(
 
 // This returns the highest priority pending lanes regardless of whether they
 // are suspended.
-export function getHighestPriorityPendingLanes(root: FiberRoot) {
+export function getHighestPriorityPendingLanes(root: FiberRoot): Lanes {
   return getHighestPriorityLanes(root.pendingLanes);
 }
 
@@ -458,25 +458,25 @@ export function getLanesToRetrySynchronouslyOnError(
   return NoLanes;
 }
 
-export function includesSyncLane(lanes: Lanes) {
+export function includesSyncLane(lanes: Lanes): boolean {
   return (lanes & SyncLane) !== NoLanes;
 }
 
-export function includesNonIdleWork(lanes: Lanes) {
+export function includesNonIdleWork(lanes: Lanes): boolean {
   return (lanes & NonIdleLanes) !== NoLanes;
 }
-export function includesOnlyRetries(lanes: Lanes) {
+export function includesOnlyRetries(lanes: Lanes): boolean {
   return (lanes & RetryLanes) === lanes;
 }
-export function includesOnlyNonUrgentLanes(lanes: Lanes) {
+export function includesOnlyNonUrgentLanes(lanes: Lanes): boolean {
   const UrgentLanes = SyncLane | InputContinuousLane | DefaultLane;
   return (lanes & UrgentLanes) === NoLanes;
 }
-export function includesOnlyTransitions(lanes: Lanes) {
+export function includesOnlyTransitions(lanes: Lanes): boolean {
   return (lanes & TransitionLanes) === lanes;
 }
 
-export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
+export function includesBlockingLane(root: FiberRoot, lanes: Lanes): boolean {
   if (
     allowConcurrentByDefault &&
     (root.current.mode & ConcurrentUpdatesByDefaultMode) !== NoMode
@@ -492,13 +492,13 @@ export function includesBlockingLane(root: FiberRoot, lanes: Lanes) {
   return (lanes & SyncDefaultLanes) !== NoLanes;
 }
 
-export function includesExpiredLane(root: FiberRoot, lanes: Lanes) {
+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 isTransitionLane(lane: Lane) {
+export function isTransitionLane(lane: Lane): boolean {
   return (lane & TransitionLanes) !== NoLanes;
 }
 
@@ -543,11 +543,11 @@ function laneToIndex(lane: Lane) {
   return pickArbitraryLaneIndex(lane);
 }
 
-export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane) {
+export function includesSomeLane(a: Lanes | Lane, b: Lanes | Lane): boolean {
   return (a & b) !== NoLanes;
 }
 
-export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane) {
+export function isSubsetOfLanes(set: Lanes, subset: Lanes | Lane): boolean {
   return (set & subset) === subset;
 }
 
@@ -569,7 +569,7 @@ export function laneToLanes(lane: Lane): Lanes {
   return lane;
 }
 
-export function higherPriorityLane(a: Lane, b: 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;
 }
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
index eae7b232c5eb..a311b101d3a4 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.new.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -598,7 +598,9 @@ function propagateParentContextChanges(
   workInProgress.flags |= DidPropagateContext;
 }
 
-export function checkIfContextChanged(currentDependencies: Dependencies) {
+export function checkIfContextChanged(
+  currentDependencies: Dependencies,
+): boolean {
   if (!enableLazyContextPropagation) {
     return false;
   }
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js
index cbc2d0069b35..0833d58806e9 100644
--- a/packages/react-reconciler/src/ReactFiberNewContext.old.js
+++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js
@@ -598,7 +598,9 @@ function propagateParentContextChanges(
   workInProgress.flags |= DidPropagateContext;
 }
 
-export function checkIfContextChanged(currentDependencies: Dependencies) {
+export function checkIfContextChanged(
+  currentDependencies: Dependencies,
+): boolean {
   if (!enableLazyContextPropagation) {
     return false;
   }
diff --git a/packages/react-reconciler/src/ReactFiberShellHydration.js b/packages/react-reconciler/src/ReactFiberShellHydration.js
index caadb978f69d..296c763e01b0 100644
--- a/packages/react-reconciler/src/ReactFiberShellHydration.js
+++ b/packages/react-reconciler/src/ReactFiberShellHydration.js
@@ -13,7 +13,7 @@ import type {RootState} from './ReactFiberRoot.new';
 // 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) {
+export function isRootDehydrated(root: FiberRoot): boolean {
   const currentState: RootState = root.current.memoizedState;
   return currentState.isDehydrated;
 }
diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
index 0f72c3fbc863..73c04034b7e9 100644
--- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js
@@ -48,7 +48,7 @@ export function flushSyncCallbacksOnlyInLegacyMode() {
   }
 }
 
-export function flushSyncCallbacks() {
+export function flushSyncCallbacks(): null {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrance.
     isFlushingSyncQueue = true;
diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
index 56422a38b137..12d8371b7225 100644
--- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
+++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js
@@ -48,7 +48,7 @@ export function flushSyncCallbacksOnlyInLegacyMode() {
   }
 }
 
-export function flushSyncCallbacks() {
+export function flushSyncCallbacks(): null {
   if (!isFlushingSyncQueue && syncQueue !== null) {
     // Prevent re-entrance.
     isFlushingSyncQueue = true;
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.new.js b/packages/react-reconciler/src/ReactFiberWakeable.new.js
index e494aa34fc1f..11f470cfab88 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.new.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.new.js
@@ -24,11 +24,11 @@ let lastUsedThenable: Thenable<any> | null = null;
 
 const MAX_AD_HOC_SUSPEND_COUNT = 50;
 
-export function isTrackingSuspendedThenable() {
+export function isTrackingSuspendedThenable(): boolean {
   return suspendedThenable !== null;
 }
 
-export function suspendedThenableDidResolve() {
+export function suspendedThenableDidResolve(): boolean {
   if (suspendedThenable !== null) {
     const status = suspendedThenable.status;
     return status === 'fulfilled' || status === 'rejected';
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.old.js b/packages/react-reconciler/src/ReactFiberWakeable.old.js
index e494aa34fc1f..11f470cfab88 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.old.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.old.js
@@ -24,11 +24,11 @@ let lastUsedThenable: Thenable<any> | null = null;
 
 const MAX_AD_HOC_SUSPEND_COUNT = 50;
 
-export function isTrackingSuspendedThenable() {
+export function isTrackingSuspendedThenable(): boolean {
   return suspendedThenable !== null;
 }
 
-export function suspendedThenableDidResolve() {
+export function suspendedThenableDidResolve(): boolean {
   if (suspendedThenable !== null) {
     const status = suspendedThenable.status;
     return status === 'fulfilled' || status === 'rejected';
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ca6bbcae278a..ccd1821db2c9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -357,7 +357,7 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 const RENDER_TIMEOUT_MS = 500;
 
 let workInProgressTransitions: Array<Transition> | null = null;
-export function getWorkInProgressTransitions() {
+export function getWorkInProgressTransitions(): null | Array<Transition> {
   return workInProgressTransitions;
 }
 
@@ -814,7 +814,7 @@ export function scheduleInitialHydrationOnRoot(
   ensureRootIsScheduled(root, eventTime);
 }
 
-export function isUnsafeClassRenderPhaseUpdate(fiber: Fiber) {
+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 (
@@ -1557,7 +1557,7 @@ declare function flushSync<R>(fn: () => R): R;
 // eslint-disable-next-line no-redeclare
 declare function flushSync(): void;
 // eslint-disable-next-line no-redeclare
-export function flushSync(fn) {
+export function flushSync(fn): 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 (
@@ -1596,7 +1596,7 @@ export function flushSync(fn) {
   }
 }
 
-export function isAlreadyRendering() {
+export function isAlreadyRendering(): boolean {
   // Used by the renderer to print a warning if certain APIs are called from
   // the wrong context.
   return (
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 4715d3fdf4df..dc592a912e3a 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -357,7 +357,7 @@ let workInProgressRootRenderTargetTime: number = Infinity;
 const RENDER_TIMEOUT_MS = 500;
 
 let workInProgressTransitions: Array<Transition> | null = null;
-export function getWorkInProgressTransitions() {
+export function getWorkInProgressTransitions(): null | Array<Transition> {
   return workInProgressTransitions;
 }
 
@@ -814,7 +814,7 @@ export function scheduleInitialHydrationOnRoot(
   ensureRootIsScheduled(root, eventTime);
 }
 
-export function isUnsafeClassRenderPhaseUpdate(fiber: Fiber) {
+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 (
@@ -1557,7 +1557,7 @@ declare function flushSync<R>(fn: () => R): R;
 // eslint-disable-next-line no-redeclare
 declare function flushSync(): void;
 // eslint-disable-next-line no-redeclare
-export function flushSync(fn) {
+export function flushSync(fn): 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 (
@@ -1596,7 +1596,7 @@ export function flushSync(fn) {
   }
 }
 
-export function isAlreadyRendering() {
+export function isAlreadyRendering(): boolean {
   // Used by the renderer to print a warning if certain APIs are called from
   // the wrong context.
   return (
diff --git a/packages/react-reconciler/src/clz32.js b/packages/react-reconciler/src/clz32.js
index 80a9cfb91148..fe827c4ca087 100644
--- a/packages/react-reconciler/src/clz32.js
+++ b/packages/react-reconciler/src/clz32.js
@@ -9,7 +9,9 @@
 
 // TODO: This is pretty well supported by browsers. Maybe we can drop it.
 
-export const clz32 = Math.clz32 ? Math.clz32 : clz32Fallback;
+export const clz32: (x: number) => number = Math.clz32
+  ? Math.clz32
+  : clz32Fallback;
 
 // Count leading zeros.
 // Based on:
diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js
index 99d4d03199d7..56af77a8e858 100644
--- a/packages/react-refresh/src/ReactFreshRuntime.js
+++ b/packages/react-refresh/src/ReactFreshRuntime.js
@@ -599,13 +599,13 @@ export function injectIntoGlobalHook(globalObject: any): void {
   }
 }
 
-export function hasUnrecoverableErrors() {
+export function hasUnrecoverableErrors(): boolean {
   // TODO: delete this after removing dependency in RN.
   return false;
 }
 
 // Exposed for testing.
-export function _getMountedRootCount() {
+export function _getMountedRootCount(): number {
   if (__DEV__) {
     return mountedRoots.size;
   } else {
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 737a8502801b..3182d1ab16cd 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -94,7 +94,7 @@ 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);
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
index 98d3058029fc..bbc26b6c84f8 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js
@@ -29,7 +29,7 @@ class ClientReferenceDependency extends ModuleDependency {
     super(request);
   }
 
-  get type() {
+  get type(): string {
     return 'client-reference';
   }
 }
diff --git a/packages/react-server/src/ReactFizzContext.js b/packages/react-server/src/ReactFizzContext.js
index 3834a6f1076f..005fb776fed0 100644
--- a/packages/react-server/src/ReactFizzContext.js
+++ b/packages/react-server/src/ReactFizzContext.js
@@ -17,7 +17,8 @@ if (__DEV__) {
   warnedAboutMissingGetChildContext = {};
 }
 
-export const emptyContextObject = {};
+// $FlowFixMe[incompatible-exact]
+export const emptyContextObject: {} = {};
 if (__DEV__) {
   Object.freeze(emptyContextObject);
 }
diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
index de67ccebcaf6..f6c8847a81b2 100644
--- a/packages/react-server/src/ReactFizzHooks.js
+++ b/packages/react-server/src/ReactFizzHooks.js
@@ -239,13 +239,13 @@ export function finishHooks(
   return children;
 }
 
-export function getThenableStateAfterSuspending() {
+export function getThenableStateAfterSuspending(): null | ThenableState {
   const state = thenableState;
   thenableState = null;
   return state;
 }
 
-export function checkDidRenderIdHook() {
+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.
diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
index dfb234b15ad2..c2d319074e7f 100644
--- a/packages/react-server/src/ReactFlightHooks.js
+++ b/packages/react-server/src/ReactFlightHooks.js
@@ -39,7 +39,7 @@ export function prepareToUseHooksForComponent(
   thenableState = prevThenableState;
 }
 
-export function getThenableStateAfterSuspending() {
+export function getThenableStateAfterSuspending(): null | ThenableState {
   const state = thenableState;
   thenableState = null;
   return state;
diff --git a/packages/react/src/BadMapPolyfill.js b/packages/react/src/BadMapPolyfill.js
index 9cad26144490..89615303ce4e 100644
--- a/packages/react/src/BadMapPolyfill.js
+++ b/packages/react/src/BadMapPolyfill.js
@@ -6,7 +6,7 @@
  * @flow
  */
 
-export let hasBadMapPolyfill;
+export let hasBadMapPolyfill: boolean;
 
 if (__DEV__) {
   hasBadMapPolyfill = false;
diff --git a/packages/scheduler/src/forks/SchedulerPostTask.js b/packages/scheduler/src/forks/SchedulerPostTask.js
index 8169bf1acc94..36074d5a97c3 100644
--- a/packages/scheduler/src/forks/SchedulerPostTask.js
+++ b/packages/scheduler/src/forks/SchedulerPostTask.js
@@ -59,7 +59,7 @@ let currentPriorityLevel_DEPRECATED = NormalPriority;
 
 // `isInputPending` is not available. Since we have no way of knowing if
 // there's pending input, always yield at the end of the frame.
-export function unstable_shouldYield() {
+export function unstable_shouldYield(): boolean {
   return getCurrentTime() >= deadline;
 }
 
diff --git a/packages/shared/CheckStringCoercion.js b/packages/shared/CheckStringCoercion.js
index e8fbf64a99b8..a6c72c4bbe77 100644
--- a/packages/shared/CheckStringCoercion.js
+++ b/packages/shared/CheckStringCoercion.js
@@ -73,7 +73,7 @@ function testStringCoercion(value: mixed) {
 export function checkAttributeStringCoercion(
   value: mixed,
   attributeName: string,
-) {
+): void | string {
   if (__DEV__) {
     if (willCoercionThrow(value)) {
       console.error(
@@ -87,7 +87,7 @@ export function checkAttributeStringCoercion(
   }
 }
 
-export function checkKeyStringCoercion(value: mixed) {
+export function checkKeyStringCoercion(value: mixed): void | string {
   if (__DEV__) {
     if (willCoercionThrow(value)) {
       console.error(
@@ -100,7 +100,10 @@ export function checkKeyStringCoercion(value: mixed) {
   }
 }
 
-export function checkPropStringCoercion(value: mixed, propName: string) {
+export function checkPropStringCoercion(
+  value: mixed,
+  propName: string,
+): void | string {
   if (__DEV__) {
     if (willCoercionThrow(value)) {
       console.error(
@@ -114,7 +117,10 @@ export function checkPropStringCoercion(value: mixed, propName: string) {
   }
 }
 
-export function checkCSSPropertyStringCoercion(value: mixed, propName: string) {
+export function checkCSSPropertyStringCoercion(
+  value: mixed,
+  propName: string,
+): void | string {
   if (__DEV__) {
     if (willCoercionThrow(value)) {
       console.error(
@@ -128,7 +134,7 @@ export function checkCSSPropertyStringCoercion(value: mixed, propName: string) {
   }
 }
 
-export function checkHtmlStringCoercion(value: mixed) {
+export function checkHtmlStringCoercion(value: mixed): void | string {
   if (__DEV__) {
     if (willCoercionThrow(value)) {
       console.error(
@@ -141,7 +147,7 @@ export function checkHtmlStringCoercion(value: mixed) {
   }
 }
 
-export function checkFormFieldValueStringCoercion(value: mixed) {
+export function checkFormFieldValueStringCoercion(value: mixed): void | string {
   if (__DEV__) {
     if (willCoercionThrow(value)) {
       console.error(
diff --git a/packages/shared/ReactErrorUtils.js b/packages/shared/ReactErrorUtils.js
index ae344d302f44..5a33bfceae1c 100644
--- a/packages/shared/ReactErrorUtils.js
+++ b/packages/shared/ReactErrorUtils.js
@@ -105,7 +105,7 @@ export function rethrowCaughtError() {
   }
 }
 
-export function hasCaughtError() {
+export function hasCaughtError(): boolean {
   return hasError;
 }
 
diff --git a/packages/shared/ReactSymbols.js b/packages/shared/ReactSymbols.js
index 50f4fba27d98..c68e50d5c693 100644
--- a/packages/shared/ReactSymbols.js
+++ b/packages/shared/ReactSymbols.js
@@ -12,28 +12,36 @@
 // Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
 
 // The Symbol used to tag the ReactElement-like types.
-export const REACT_ELEMENT_TYPE = Symbol.for('react.element');
-export const REACT_PORTAL_TYPE = Symbol.for('react.portal');
-export const REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-export const REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-export const REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-export const REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-export const REACT_CONTEXT_TYPE = Symbol.for('react.context');
-export const REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-export const REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-export const REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-export const REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-export const REACT_MEMO_TYPE = Symbol.for('react.memo');
-export const REACT_LAZY_TYPE = Symbol.for('react.lazy');
-export const REACT_SCOPE_TYPE = Symbol.for('react.scope');
-export const REACT_DEBUG_TRACING_MODE_TYPE = Symbol.for(
+export const REACT_ELEMENT_TYPE: symbol = Symbol.for('react.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_PROVIDER_TYPE: symbol = Symbol.for('react.provider');
+export const REACT_CONTEXT_TYPE: symbol = Symbol.for('react.context');
+export const REACT_SERVER_CONTEXT_TYPE: symbol = Symbol.for(
+  'react.server_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_DEBUG_TRACING_MODE_TYPE: symbol = Symbol.for(
   'react.debug_trace_mode',
 );
-export const REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-export const REACT_LEGACY_HIDDEN_TYPE = Symbol.for('react.legacy_hidden');
-export const REACT_CACHE_TYPE = Symbol.for('react.cache');
-export const REACT_TRACING_MARKER_TYPE = Symbol.for('react.tracing_marker');
-export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED = Symbol.for(
+export const REACT_OFFSCREEN_TYPE: symbol = Symbol.for('react.offscreen');
+export const REACT_LEGACY_HIDDEN_TYPE: symbol = Symbol.for(
+  'react.legacy_hidden',
+);
+export const REACT_CACHE_TYPE: symbol = Symbol.for('react.cache');
+export const REACT_TRACING_MARKER_TYPE: symbol = Symbol.for(
+  'react.tracing_marker',
+);
+export const REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED: symbol = Symbol.for(
   'react.default_value',
 );
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 520b102b7d3f..67812e36dae5 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -19,7 +19,7 @@ export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
 export const enableLegacyFBSupport = __VARIANT__;
 export const skipUnmountedBoundaries = __VARIANT__;
 export const enableUseRefAccessWarning = __VARIANT__;
-export const deletedTreeCleanUpLevel = __VARIANT__ ? 3 : 1;
+export const deletedTreeCleanUpLevel: number = __VARIANT__ ? 3 : 1;
 export const enableProfilerNestedUpdateScheduledHook = __VARIANT__;
 export const disableSchedulerTimeoutInWorkLoop = __VARIANT__;
 export const enableLazyContextPropagation = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 2c59dde3a11b..18a333e40f76 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -39,13 +39,13 @@ export const {
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
 // It's not used anywhere in production yet.
 
-export const enableStrictEffects =
+export const enableStrictEffects: boolean =
   __DEV__ && dynamicFeatureFlags.enableStrictEffects;
 export const debugRenderPhaseSideEffectsForStrictMode = __DEV__;
 export const enableProfilerTimer = __PROFILE__;
 export const enableProfilerCommitHooks = __PROFILE__;
 export const enableProfilerNestedUpdatePhase = __PROFILE__;
-export const enableProfilerNestedUpdateScheduledHook =
+export const enableProfilerNestedUpdateScheduledHook: boolean =
   __PROFILE__ && dynamicFeatureFlags.enableProfilerNestedUpdateScheduledHook;
 export const enableUpdaterTracking = __PROFILE__;
 
@@ -57,7 +57,7 @@ export const enableUseHook = true;
 export const enableUseMemoCacheHook = true;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
-export const enableSchedulingProfiler =
+export const enableSchedulingProfiler: boolean =
   __PROFILE__ && dynamicFeatureFlags.enableSchedulingProfiler;
 
 // Note: we'll want to remove this when we to userland implementation.
diff --git a/packages/shared/isValidElementType.js b/packages/shared/isValidElementType.js
index c0e4cdc76932..d2b4602de22b 100644
--- a/packages/shared/isValidElementType.js
+++ b/packages/shared/isValidElementType.js
@@ -35,7 +35,7 @@ import {
 
 const REACT_MODULE_REFERENCE: symbol = Symbol.for('react.module.reference');
 
-export default function isValidElementType(type: mixed) {
+export default function isValidElementType(type: mixed): boolean {
   if (typeof type === 'string' || typeof type === 'function') {
     return true;
   }

From afe664d9d7fc7c58d6a3c6eb3c2865500e00401f Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Tue, 13 Sep 2022 18:39:26 -0400
Subject: [PATCH 1586/1603] Flow: upgrade to 0.142 (#25255)

---
 package.json                   | 2 +-
 scripts/flow/config/flowconfig | 2 +-
 yarn.lock                      | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index b440056f54b8..05e7f835128a 100644
--- a/package.json
+++ b/package.json
@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.140",
+    "flow-bin": "^0.142.0",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index b5639113089a..f4f6921040b8 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -51,4 +51,4 @@ types_first=false
 %REACT_RENDERER_FLOW_OPTIONS%
 
 [version]
-^0.140.0
+^0.142.0
diff --git a/yarn.lock b/yarn.lock
index a3dc1a988861..bd0c3d15069f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7914,10 +7914,10 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-bin@^0.140:
-  version "0.140.0"
-  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.140.0.tgz#bf1a2984a0e5604daa0d1e0432138d9897af65bb"
-  integrity sha512-9P/VciKACXocClhLiDg/p1ntYmgCEEc9QrNOoTqTi2SEdEZDTiAmJLONRJfw4uglPVRZ1p/esWF9KlbZiuxqVw==
+flow-bin@^0.142.0:
+  version "0.142.0"
+  resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.142.0.tgz#b46b69de1123cf7c5a50917402968e07291df054"
+  integrity sha512-YgiapK/wrJjcgSgOWfoncbZ4vZrZWdHs+p7V9duI9zo4ehW2nM/VRrpSaWoZ+CWu3t+duGyAvupJvC6MM2l07w==
 
 fluent-syntax@0.13.0:
   version "0.13.0"

From c327b91d22d95de2d43c899c3d8eb87a3ffca048 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Wed, 14 Sep 2022 13:22:20 -0400
Subject: [PATCH 1587/1603] CI: try to make caching more reliable (#25259)

- `~/.yarn/cache` is now restored from an hierarchical cache key, if no precise match is found, we fallback to less precise ones.
- The yarn install in `fixtures/dom` is also cached. Notably, is utilizes the cache from root, but stores into its more precise key.
- Steps running in root no longer have a `yarn install` and rely on the cache from the setup step.
- Retry `yarn install` once on failure.
---
 .circleci/config.yml | 154 +++++++++++++++++++++++++------------------
 1 file changed, 90 insertions(+), 64 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 5950e8bb933c..43a299d9feb6 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -10,18 +10,93 @@ aliases:
   - &restore_yarn_cache
     restore_cache:
       name: Restore yarn cache
-      key: v2-node-{{ arch }}-{{ checksum "yarn.lock" }}-yarn
+      keys:
+        - v1-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}
+        - v1-yarn_cache-{{ arch }}-
+        - v1-yarn_cache-
+
+  - &yarn_install
+    run:
+      name: Install dependencies
+      command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+
+  - &yarn_install_retry
+    run:
+      name: Install dependencies (retry)
+      when: on_fail
+      command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+
+  - &save_yarn_cache
+    save_cache:
+      name: Save yarn cache
+      key: v1-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}
+      paths:
+        - ~/.cache/yarn
+
+  - &restore_yarn_cache_fixtures_dom
+    restore_cache:
+      name: Restore yarn cache for fixtures/dom
+      keys:
+        - v1-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}-fixtures/dom
+        - v1-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}
+        - v1-yarn_cache-{{ arch }}-
+        - v1-yarn_cache-
+
+  - &yarn_install_fixtures_dom
+    run:
+      name: Install dependencies in fixtures/dom
+      working_directory: fixtures/dom
+      command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
 
-  - &prepare_node_modules_cache_key
+  - &yarn_install_fixtures_dom_retry
     run:
-      name: Preparing node_modules cache key
-      command: yarn workspaces info | head -n -1 > workspace_info.txt
+      name: Install dependencies in fixtures/dom (retry)
+      when: on_fail
+      working_directory: fixtures/dom
+      command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+
+  - &save_yarn_cache_fixtures_dom
+    save_cache:
+      name: Save yarn cache for fixtures/dom
+      key: v1-yarn_cache-{{ arch }}-{{ checksum "yarn.lock" }}-fixtures/dom
+      paths:
+        - ~/.cache/yarn
+
+  - &save_node_modules
+    save_cache:
+      name: Save node_modules cache
+      # Cache only for the current revision to prevent cache injections from
+      # malicious PRs.
+      key: v1-node_modules-{{ arch }}-{{ .Revision }}
+      paths:
+        - node_modules
+        - packages/eslint-plugin-react-hooks/node_modules
+        - packages/react-art/node_modules
+        - packages/react-client/node_modules
+        - packages/react-devtools-core/node_modules
+        - packages/react-devtools-extensions/node_modules
+        - packages/react-devtools-inline/node_modules
+        - packages/react-devtools-shared/node_modules
+        - packages/react-devtools-shell/node_modules
+        - packages/react-devtools-timeline/node_modules
+        - packages/react-devtools/node_modules
+        - packages/react-dom/node_modules
+        - packages/react-interactions/node_modules
+        - packages/react-native-renderer/node_modules
+        - packages/react-reconciler/node_modules
+        - packages/react-server-dom-relay/node_modules
+        - packages/react-server-dom-webpack/node_modules
+        - packages/react-server-native-relay/node_modules
+        - packages/react-server/node_modules
+        - packages/react-test-renderer/node_modules
+        - packages/react/node_modules
+        - packages/scheduler/node_modules
 
   - &restore_node_modules
     restore_cache:
       name: Restore node_modules cache
       keys:
-        - v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum "workspace_info.txt" }}-node-modules
+        - v1-node_modules-{{ arch }}-{{ .Revision }}
 
   - &TEST_PARALLELISM 20
 
@@ -49,27 +124,11 @@ jobs:
           name: Nodejs Version
           command: node --version
       - *restore_yarn_cache
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
-      - run: yarn workspaces info | head -n -1 > workspace_info.txt
-      - save_cache:
-          # Store the yarn cache globally for all lock files with this same
-          # checksum. This will speed up the setup job for all PRs where the
-          # lockfile is the same.
-          name: Save yarn cache for future installs
-          key: v2-node-{{ arch }}-{{ checksum "yarn.lock" }}-yarn
-          paths:
-            - ~/.cache/yarn
-      - save_cache:
-          # Store node_modules for all jobs in this workflow so that they don't
-          # need to each run a yarn install for each job. This will speed up
-          # all jobs run on this branch with the same lockfile.
-          name: Save node_modules cache
-          # This cache key is per branch, a yarn install in setup is required.
-          key: v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-{{ checksum "workspace_info.txt" }}-node-modules
-          paths:
-            - node_modules
+      - *restore_node_modules
+      - *yarn_install
+      - *yarn_install_retry
+      - *save_yarn_cache
+      - *save_node_modules
 
   yarn_lint:
     docker: *docker
@@ -77,7 +136,6 @@ jobs:
 
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: node ./scripts/prettier/index
       - run: node ./scripts/tasks/eslint
@@ -92,7 +150,6 @@ jobs:
 
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: node ./scripts/tasks/flow-ci
 
@@ -102,7 +159,6 @@ jobs:
 
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           command: |
@@ -119,7 +175,6 @@ jobs:
     parallelism: 40
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn build-combined
       - persist_to_workspace:
@@ -135,7 +190,6 @@ jobs:
         type: string
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Download artifacts for revision
@@ -153,7 +207,6 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Download artifacts for base revision
@@ -182,7 +235,6 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
         # Compress build directory into a single tarball for easy download
@@ -202,7 +254,6 @@ jobs:
       - attach_workspace:
           at: .
       - run: echo "<< pipeline.git.revision	>>" >> build/COMMIT_SHA
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           command: node ./scripts/tasks/danger
@@ -214,11 +265,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
       - run:
           environment:
             RELEASE_CHANNEL: experimental
@@ -233,11 +280,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
-      - run:
-          name: Install Packages
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
       - run:
           name: Playwright install deps
           command: |
@@ -259,11 +302,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
-      - run:
-          name: Install nested packages from Yarn cache
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
       - run: ./scripts/circleci/download_devtools_regression_build.js << parameters.version >> --replaceBuild
       - run: node ./scripts/jest/jest-cli.js --build --project devtools --release-channel=experimental --reactVersion << parameters.version >> --ci
 
@@ -278,11 +317,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
-      - run:
-          name: Install nested packages from Yarn cache
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
       - run:
           name: Playwright install deps
           command: |
@@ -306,7 +341,6 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn lint-build
 
@@ -317,7 +351,6 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn check-release-dependencies
 
@@ -328,7 +361,6 @@ jobs:
     steps:
       - checkout
       - attach_workspace: *attach_workspace
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Search build artifacts for unminified errors
@@ -345,7 +377,6 @@ jobs:
         type: string
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run: yarn test <<parameters.args>> --ci
 
@@ -360,11 +391,7 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
-      - run:
-          name: Install nested packages from Yarn cache
-          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn
       - run: yarn test --build <<parameters.args>> --ci
 
   RELEASE_CHANNEL_stable_yarn_test_dom_fixtures:
@@ -374,15 +401,17 @@ jobs:
       - checkout
       - attach_workspace:
           at: .
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
+      - *restore_yarn_cache_fixtures_dom
+      - *yarn_install_fixtures_dom
+      - *yarn_install_fixtures_dom_retry
+      - *save_yarn_cache_fixtures_dom
       - run:
           name: Run DOM fixture tests
           environment:
             RELEASE_CHANNEL: stable
+          working_directory: fixtures/dom
           command: |
-            cd fixtures/dom
-            yarn --frozen-lockfile
             yarn prestart
             yarn test --maxWorkers=2
 
@@ -391,7 +420,6 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Run fuzz tests
@@ -411,7 +439,6 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Run publish script
@@ -430,7 +457,6 @@ jobs:
     environment: *environment
     steps:
       - checkout
-      - *prepare_node_modules_cache_key
       - *restore_node_modules
       - run:
           name: Fetch revisions that contain an intentional fork

From 2248dccfb36d735dcf6e411846e87ac8a5329ebd Mon Sep 17 00:00:00 2001
From: Srikanth Kolli <itskolli@users.noreply.github.com>
Date: Wed, 14 Sep 2022 23:20:57 +0530
Subject: [PATCH 1588/1603] [DevTools] Show DevTools icons in Edge browser
 panel (#25257)

Show DevTools icons in Edge browser panel
---
 packages/react-devtools-extensions/src/main.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js
index 15bf1e8a3289..69f5c21e7962 100644
--- a/packages/react-devtools-extensions/src/main.js
+++ b/packages/react-devtools-extensions/src/main.js
@@ -472,7 +472,7 @@ function createPanelIfReactLoaded() {
       let needsToSyncElementSelection = false;
 
       chrome.devtools.panels.create(
-        isChrome ? '⚛️ Components' : 'Components',
+        isChrome || isEdge ? '⚛️ Components' : 'Components',
         '',
         'panel.html',
         extensionPanel => {
@@ -503,7 +503,7 @@ function createPanelIfReactLoaded() {
       );
 
       chrome.devtools.panels.create(
-        isChrome ? '⚛️ Profiler' : 'Profiler',
+        isChrome || isEdge ? '⚛️ Profiler' : 'Profiler',
         '',
         'panel.html',
         extensionPanel => {

From c91a1e03be54733a7dbfcb5663d7a9e8606ab1c1 Mon Sep 17 00:00:00 2001
From: Lauren Tan <poteto@users.noreply.github.com>
Date: Wed, 14 Sep 2022 14:39:06 -0400
Subject: [PATCH 1589/1603] experimental_useEvent (#25229)

This commit adds a new hook `useEvent` per the RFC [here](https://github.com/reactjs/rfcs/pull/220), gated as experimental.

Co-authored-by: Rick Hanlon <rickhanlonii@gmail.com>
Co-authored-by: Rick Hanlon <rickhanlonii@fb.com>
Co-authored-by: Lauren Tan <poteto@users.noreply.github.com>
---
 .../src/ReactFiberCommitWork.new.js           |  50 +-
 .../src/ReactFiberCommitWork.old.js           |  50 +-
 .../src/ReactFiberHooks.new.js                | 124 ++++
 .../src/ReactFiberHooks.old.js                | 124 ++++
 .../src/ReactFiberWorkLoop.new.js             |   5 +
 .../src/ReactFiberWorkLoop.old.js             |   5 +
 .../src/ReactHookEffectTags.js                |  11 +-
 .../src/ReactInternalTypes.js                 |   2 +
 .../src/__tests__/useEvent-test.js            | 668 ++++++++++++++++++
 packages/react/index.classic.fb.js            |   1 +
 packages/react/index.experimental.js          |   1 +
 packages/react/index.js                       |   1 +
 packages/react/index.modern.fb.js             |   1 +
 packages/react/index.stable.js                |   1 +
 packages/react/src/React.js                   |   2 +
 packages/react/src/ReactHooks.js              |   6 +
 packages/shared/ReactFeatureFlags.js          |   2 +
 .../forks/ReactFeatureFlags.native-fb.js      |   1 +
 .../forks/ReactFeatureFlags.native-oss.js     |   1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |   1 +
 .../ReactFeatureFlags.test-renderer.native.js |   1 +
 .../ReactFeatureFlags.test-renderer.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.testing.js |   1 +
 .../forks/ReactFeatureFlags.testing.www.js    |   1 +
 .../shared/forks/ReactFeatureFlags.www.js     |   1 +
 scripts/error-codes/codes.json                |   3 +-
 26 files changed, 1027 insertions(+), 38 deletions(-)
 create mode 100644 packages/react-reconciler/src/__tests__/useEvent-test.js

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
index 1710bcfc861e..825652939f5e 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js
@@ -48,6 +48,7 @@ import {
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
+  enableUseEventHook,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -162,6 +163,7 @@ import {
   Layout as HookLayout,
   Insertion as HookInsertion,
   Passive as HookPassive,
+  Snapshot as HookSnapshot,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.new';
 import {doesFiberContain} from './ReactFiberTreeReflection';
@@ -407,14 +409,24 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
 
   if ((flags & Snapshot) !== NoFlags) {
     setCurrentDebugFiberInDEV(finishedWork);
+  }
 
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        break;
+  switch (finishedWork.tag) {
+    case FunctionComponent: {
+      if (enableUseEventHook) {
+        if ((flags & Update) !== NoFlags) {
+          // useEvent doesn't need to be cleaned up
+          commitHookEffectListMount(HookSnapshot | HookHasEffect, finishedWork);
+        }
       }
-      case ClassComponent: {
+      break;
+    }
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      break;
+    }
+    case ClassComponent: {
+      if ((flags & Snapshot) !== NoFlags) {
         if (current !== null) {
           const prevProps = current.memoizedProps;
           const prevState = current.memoizedState;
@@ -468,29 +480,35 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
           }
           instance.__reactInternalSnapshotBeforeUpdate = snapshot;
         }
-        break;
       }
-      case HostRoot: {
+      break;
+    }
+    case HostRoot: {
+      if ((flags & Snapshot) !== NoFlags) {
         if (supportsMutation) {
           const root = finishedWork.stateNode;
           clearContainer(root.containerInfo);
         }
-        break;
       }
-      case HostComponent:
-      case HostText:
-      case HostPortal:
-      case IncompleteClassComponent:
-        // Nothing to do for these component types
-        break;
-      default: {
+      break;
+    }
+    case HostComponent:
+    case HostText:
+    case HostPortal:
+    case IncompleteClassComponent:
+      // Nothing to do for these component types
+      break;
+    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.',
         );
       }
     }
+  }
 
+  if ((flags & Snapshot) !== NoFlags) {
     resetCurrentDebugFiberInDEV();
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
index a7a8929d2b68..57233404d6ff 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js
@@ -48,6 +48,7 @@ import {
   enableUpdaterTracking,
   enableCache,
   enableTransitionTracing,
+  enableUseEventHook,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -162,6 +163,7 @@ import {
   Layout as HookLayout,
   Insertion as HookInsertion,
   Passive as HookPassive,
+  Snapshot as HookSnapshot,
 } from './ReactHookEffectTags';
 import {didWarnAboutReassigningProps} from './ReactFiberBeginWork.old';
 import {doesFiberContain} from './ReactFiberTreeReflection';
@@ -407,14 +409,24 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
 
   if ((flags & Snapshot) !== NoFlags) {
     setCurrentDebugFiberInDEV(finishedWork);
+  }
 
-    switch (finishedWork.tag) {
-      case FunctionComponent:
-      case ForwardRef:
-      case SimpleMemoComponent: {
-        break;
+  switch (finishedWork.tag) {
+    case FunctionComponent: {
+      if (enableUseEventHook) {
+        if ((flags & Update) !== NoFlags) {
+          // useEvent doesn't need to be cleaned up
+          commitHookEffectListMount(HookSnapshot | HookHasEffect, finishedWork);
+        }
       }
-      case ClassComponent: {
+      break;
+    }
+    case ForwardRef:
+    case SimpleMemoComponent: {
+      break;
+    }
+    case ClassComponent: {
+      if ((flags & Snapshot) !== NoFlags) {
         if (current !== null) {
           const prevProps = current.memoizedProps;
           const prevState = current.memoizedState;
@@ -468,29 +480,35 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) {
           }
           instance.__reactInternalSnapshotBeforeUpdate = snapshot;
         }
-        break;
       }
-      case HostRoot: {
+      break;
+    }
+    case HostRoot: {
+      if ((flags & Snapshot) !== NoFlags) {
         if (supportsMutation) {
           const root = finishedWork.stateNode;
           clearContainer(root.containerInfo);
         }
-        break;
       }
-      case HostComponent:
-      case HostText:
-      case HostPortal:
-      case IncompleteClassComponent:
-        // Nothing to do for these component types
-        break;
-      default: {
+      break;
+    }
+    case HostComponent:
+    case HostText:
+    case HostPortal:
+    case IncompleteClassComponent:
+      // Nothing to do for these component types
+      break;
+    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.',
         );
       }
     }
+  }
 
+  if ((flags & Snapshot) !== NoFlags) {
     resetCurrentDebugFiberInDEV();
   }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
index b602c3691471..2f3f9a4761b6 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.new.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -40,6 +40,7 @@ import {
   enableTransitionTracing,
   enableUseHook,
   enableUseMemoCacheHook,
+  enableUseEventHook,
 } from 'shared/ReactFeatureFlags';
 import {
   REACT_CONTEXT_TYPE,
@@ -85,6 +86,7 @@ import {
   Layout as HookLayout,
   Passive as HookPassive,
   Insertion as HookInsertion,
+  Snapshot as HookSnapshot,
 } from './ReactHookEffectTags';
 import {
   getWorkInProgressRoot,
@@ -93,6 +95,7 @@ import {
   requestUpdateLane,
   requestEventTime,
   markSkippedUpdateLanes,
+  isInvalidExecutionContextForEventFunction,
 } from './ReactFiberWorkLoop.new';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1868,6 +1871,49 @@ function updateEffect(
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
+function mountEvent<T>(callback: () => T): () => T {
+  const hook = mountWorkInProgressHook();
+  const ref = {current: callback};
+
+  function event() {
+    if (isInvalidExecutionContextForEventFunction()) {
+      throw new Error('An event from useEvent was called during render.');
+    }
+    return ref.current.apply(undefined, arguments);
+  }
+
+  // TODO: We don't need all the overhead of an effect object since there are no deps and no
+  // clean up functions.
+  mountEffectImpl(
+    UpdateEffect,
+    HookSnapshot,
+    () => {
+      ref.current = callback;
+    },
+    [ref, callback],
+  );
+
+  hook.memoizedState = [ref, event];
+
+  return event;
+}
+
+function updateEvent<T>(callback: () => T): () => T {
+  const hook = updateWorkInProgressHook();
+  const ref = hook.memoizedState[0];
+
+  updateEffectImpl(
+    UpdateEffect,
+    HookSnapshot,
+    () => {
+      ref.current = callback;
+    },
+    [ref, callback],
+  );
+
+  return hook.memoizedState[1];
+}
+
 function mountInsertionEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
@@ -2546,6 +2592,9 @@ if (enableUseHook) {
 if (enableUseMemoCacheHook) {
   (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
 }
+if (enableUseEventHook) {
+  (ContextOnlyDispatcher: Dispatcher).useEvent = throwInvalidHookError;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -2581,6 +2630,9 @@ if (enableUseHook) {
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
 }
+if (enableUseEventHook) {
+  (HooksDispatcherOnMount: Dispatcher).useEvent = mountEvent;
+}
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -2614,6 +2666,9 @@ if (enableUseMemoCacheHook) {
 if (enableUseHook) {
   (HooksDispatcherOnUpdate: Dispatcher).use = use;
 }
+if (enableUseEventHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).useEvent = updateEvent;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2648,6 +2703,9 @@ if (enableUseHook) {
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
 }
+if (enableUseEventHook) {
+  (HooksDispatcherOnRerender: Dispatcher).useEvent = updateEvent;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2829,6 +2887,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent<T>(
+      callback: () => T,
+    ): () => T {
+      currentHookNameInDev = 'useEvent';
+      mountHookTypesDev();
+      return mountEvent(callback);
+    };
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2977,6 +3044,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      updateHookTypesDev();
+      return mountEvent(callback);
+    };
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3125,6 +3201,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent<T>(
+      callback: () => T,
+    ): () => T {
+      currentHookNameInDev = 'useEvent';
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3274,6 +3359,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3449,6 +3543,16 @@ if (__DEV__) {
       return useMemoCache(size);
     };
   }
+  if (enableUseEventHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountEvent(callback);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3624,6 +3728,16 @@ if (__DEV__) {
       return useMemoCache(size);
     };
   }
+  if (enableUseEventHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3800,4 +3914,14 @@ if (__DEV__) {
       return useMemoCache(size);
     };
   }
+  if (enableUseEventHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 }
diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
index 9f0cb1914581..1b4171118662 100644
--- a/packages/react-reconciler/src/ReactFiberHooks.old.js
+++ b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -40,6 +40,7 @@ import {
   enableTransitionTracing,
   enableUseHook,
   enableUseMemoCacheHook,
+  enableUseEventHook,
 } from 'shared/ReactFeatureFlags';
 import {
   REACT_CONTEXT_TYPE,
@@ -85,6 +86,7 @@ import {
   Layout as HookLayout,
   Passive as HookPassive,
   Insertion as HookInsertion,
+  Snapshot as HookSnapshot,
 } from './ReactHookEffectTags';
 import {
   getWorkInProgressRoot,
@@ -93,6 +95,7 @@ import {
   requestUpdateLane,
   requestEventTime,
   markSkippedUpdateLanes,
+  isInvalidExecutionContextForEventFunction,
 } from './ReactFiberWorkLoop.old';
 
 import getComponentNameFromFiber from 'react-reconciler/src/getComponentNameFromFiber';
@@ -1868,6 +1871,49 @@ function updateEffect(
   return updateEffectImpl(PassiveEffect, HookPassive, create, deps);
 }
 
+function mountEvent<T>(callback: () => T): () => T {
+  const hook = mountWorkInProgressHook();
+  const ref = {current: callback};
+
+  function event() {
+    if (isInvalidExecutionContextForEventFunction()) {
+      throw new Error('An event from useEvent was called during render.');
+    }
+    return ref.current.apply(undefined, arguments);
+  }
+
+  // TODO: We don't need all the overhead of an effect object since there are no deps and no
+  // clean up functions.
+  mountEffectImpl(
+    UpdateEffect,
+    HookSnapshot,
+    () => {
+      ref.current = callback;
+    },
+    [ref, callback],
+  );
+
+  hook.memoizedState = [ref, event];
+
+  return event;
+}
+
+function updateEvent<T>(callback: () => T): () => T {
+  const hook = updateWorkInProgressHook();
+  const ref = hook.memoizedState[0];
+
+  updateEffectImpl(
+    UpdateEffect,
+    HookSnapshot,
+    () => {
+      ref.current = callback;
+    },
+    [ref, callback],
+  );
+
+  return hook.memoizedState[1];
+}
+
 function mountInsertionEffect(
   create: () => (() => void) | void,
   deps: Array<mixed> | void | null,
@@ -2546,6 +2592,9 @@ if (enableUseHook) {
 if (enableUseMemoCacheHook) {
   (ContextOnlyDispatcher: Dispatcher).useMemoCache = throwInvalidHookError;
 }
+if (enableUseEventHook) {
+  (ContextOnlyDispatcher: Dispatcher).useEvent = throwInvalidHookError;
+}
 
 const HooksDispatcherOnMount: Dispatcher = {
   readContext,
@@ -2581,6 +2630,9 @@ if (enableUseHook) {
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnMount: Dispatcher).useMemoCache = useMemoCache;
 }
+if (enableUseEventHook) {
+  (HooksDispatcherOnMount: Dispatcher).useEvent = mountEvent;
+}
 const HooksDispatcherOnUpdate: Dispatcher = {
   readContext,
 
@@ -2614,6 +2666,9 @@ if (enableUseMemoCacheHook) {
 if (enableUseHook) {
   (HooksDispatcherOnUpdate: Dispatcher).use = use;
 }
+if (enableUseEventHook) {
+  (HooksDispatcherOnUpdate: Dispatcher).useEvent = updateEvent;
+}
 
 const HooksDispatcherOnRerender: Dispatcher = {
   readContext,
@@ -2648,6 +2703,9 @@ if (enableUseHook) {
 if (enableUseMemoCacheHook) {
   (HooksDispatcherOnRerender: Dispatcher).useMemoCache = useMemoCache;
 }
+if (enableUseEventHook) {
+  (HooksDispatcherOnRerender: Dispatcher).useEvent = updateEvent;
+}
 
 let HooksDispatcherOnMountInDEV: Dispatcher | null = null;
 let HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher | null = null;
@@ -2829,6 +2887,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent<T>(
+      callback: () => T,
+    ): () => T {
+      currentHookNameInDev = 'useEvent';
+      mountHookTypesDev();
+      return mountEvent(callback);
+    };
+  }
 
   HooksDispatcherOnMountWithHookTypesInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -2977,6 +3044,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnMountWithHookTypesInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      updateHookTypesDev();
+      return mountEvent(callback);
+    };
+  }
 
   HooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3125,6 +3201,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnUpdateInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent<T>(
+      callback: () => T,
+    ): () => T {
+      currentHookNameInDev = 'useEvent';
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 
   HooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3274,6 +3359,15 @@ if (__DEV__) {
   if (enableUseMemoCacheHook) {
     (HooksDispatcherOnRerenderInDEV: Dispatcher).useMemoCache = useMemoCache;
   }
+  if (enableUseEventHook) {
+    (HooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnMountInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3449,6 +3543,16 @@ if (__DEV__) {
       return useMemoCache(size);
     };
   }
+  if (enableUseEventHook) {
+    (InvalidNestedHooksDispatcherOnMountInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      warnInvalidHookAccess();
+      mountHookTypesDev();
+      return mountEvent(callback);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnUpdateInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3624,6 +3728,16 @@ if (__DEV__) {
       return useMemoCache(size);
     };
   }
+  if (enableUseEventHook) {
+    (InvalidNestedHooksDispatcherOnUpdateInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 
   InvalidNestedHooksDispatcherOnRerenderInDEV = {
     readContext<T>(context: ReactContext<T>): T {
@@ -3800,4 +3914,14 @@ if (__DEV__) {
       return useMemoCache(size);
     };
   }
+  if (enableUseEventHook) {
+    (InvalidNestedHooksDispatcherOnRerenderInDEV: Dispatcher).useEvent = function useEvent<
+      T,
+    >(callback: () => T): () => T {
+      currentHookNameInDev = 'useEvent';
+      warnInvalidHookAccess();
+      updateHookTypesDev();
+      return updateEvent(callback);
+    };
+  }
 }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index ccd1821db2c9..dc5efade1120 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1605,6 +1605,11 @@ export function isAlreadyRendering(): boolean {
   );
 }
 
+export function isInvalidExecutionContextForEventFunction() {
+  // Used to throw if certain APIs are called from the wrong context.
+  return (executionContext & RenderContext) !== NoContext;
+}
+
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index dc592a912e3a..d8d29c496495 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1605,6 +1605,11 @@ export function isAlreadyRendering(): boolean {
   );
 }
 
+export function isInvalidExecutionContextForEventFunction() {
+  // Used to throw if certain APIs are called from the wrong context.
+  return (executionContext & RenderContext) !== NoContext;
+}
+
 export function flushControlled(fn: () => mixed): void {
   const prevExecutionContext = executionContext;
   executionContext |= BatchedContext;
diff --git a/packages/react-reconciler/src/ReactHookEffectTags.js b/packages/react-reconciler/src/ReactHookEffectTags.js
index 54be635a623a..41b3d6be761e 100644
--- a/packages/react-reconciler/src/ReactHookEffectTags.js
+++ b/packages/react-reconciler/src/ReactHookEffectTags.js
@@ -9,12 +9,13 @@
 
 export type HookFlags = number;
 
-export const NoFlags = /*   */ 0b0000;
+export const NoFlags = /*   */ 0b00000;
 
 // Represents whether effect should fire.
-export const HasEffect = /* */ 0b0001;
+export const HasEffect = /* */ 0b00001;
 
 // Represents the phase in which the effect (not the clean-up) fires.
-export const Insertion = /*  */ 0b0010;
-export const Layout = /*    */ 0b0100;
-export const Passive = /*   */ 0b1000;
+export const Snapshot = /*  */ 0b00010;
+export const Insertion = /* */ 0b00100;
+export const Layout = /*    */ 0b01000;
+export const Passive = /*   */ 0b10000;
diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js
index 004aa17e56ad..c7ee97c69c9e 100644
--- a/packages/react-reconciler/src/ReactInternalTypes.js
+++ b/packages/react-reconciler/src/ReactInternalTypes.js
@@ -42,6 +42,7 @@ export type HookType =
   | 'useContext'
   | 'useRef'
   | 'useEffect'
+  | 'useEvent'
   | 'useInsertionEffect'
   | 'useLayoutEffect'
   | 'useCallback'
@@ -376,6 +377,7 @@ export type Dispatcher = {
     create: () => (() => void) | void,
     deps: Array<mixed> | void | null,
   ): void,
+  useEvent?: <T>(callback: () => T) => () => T,
   useInsertionEffect(
     create: () => (() => void) | void,
     deps: Array<mixed> | void | null,
diff --git a/packages/react-reconciler/src/__tests__/useEvent-test.js b/packages/react-reconciler/src/__tests__/useEvent-test.js
new file mode 100644
index 000000000000..39c0f9f316ef
--- /dev/null
+++ b/packages/react-reconciler/src/__tests__/useEvent-test.js
@@ -0,0 +1,668 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ * @jest-environment node
+ */
+
+/* eslint-disable no-func-assign */
+
+'use strict';
+
+import {useInsertionEffect} from 'react';
+
+describe('useEvent', () => {
+  let React;
+  let ReactNoop;
+  let Scheduler;
+  let act;
+  let createContext;
+  let useContext;
+  let useState;
+  let useEvent;
+  let useEffect;
+  let useLayoutEffect;
+  let useMemo;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactNoop = require('react-noop-renderer');
+    Scheduler = require('scheduler');
+
+    act = require('jest-react').act;
+    createContext = React.createContext;
+    useContext = React.useContext;
+    useState = React.useState;
+    useEvent = React.experimental_useEvent;
+    useEffect = React.useEffect;
+    useLayoutEffect = React.useLayoutEffect;
+    useMemo = React.useMemo;
+  });
+
+  function span(prop) {
+    return {type: 'span', hidden: false, children: [], prop};
+  }
+
+  function Text(props) {
+    Scheduler.unstable_yieldValue(props.text);
+    return <span prop={props.text} />;
+  }
+
+  // @gate enableUseEventHook
+  it('memoizes basic case correctly', () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const onClick = useEvent(() => updateCount(c => c + incrementBy));
+
+      return (
+        <>
+          <IncrementButton onClick={() => onClick()} ref={button} />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Counter incrementBy={1} />);
+    expect(Scheduler).toFlushAndYield(['Increment', 'Count: 0']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 0'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded(['Increment', 'Count: 1']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 1'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 2',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 2'),
+    ]);
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    expect(Scheduler).toFlushAndYield(['Increment', 'Count: 2']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 2'),
+    ]);
+
+    // Event uses the new prop
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded(['Increment', 'Count: 12']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 12'),
+    ]);
+  });
+
+  // @gate enableUseEventHook
+  it('does not preserve `this` in event functions', () => {
+    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 = useEvent(person.greet);
+
+      return (
+        <>
+          <GreetButton hello={hello} onClick={() => onClick()} ref={button} />
+          <Text text={'Greeting: ' + greeting} />
+        </>
+      );
+    }
+
+    const button = React.createRef(null);
+    ReactNoop.render(<Greeter hello={'hej'} />);
+    expect(Scheduler).toFlushAndYield(['Say hej', 'Greeting: Seb says hej']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Say hej'),
+      span('Greeting: Seb says hej'),
+    ]);
+
+    act(button.current.greet);
+    expect(Scheduler).toHaveYielded([
+      'Say hej',
+      'Greeting: undefined says hej',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Say hej'),
+      span('Greeting: undefined says hej'),
+    ]);
+  });
+
+  // @gate enableUseEventHook
+  it('throws when called in render', () => {
+    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 = useEvent(() => updateCount(c => c + incrementBy));
+
+      return (
+        <>
+          <IncrementButton onClick={() => onClick()} />
+          <Text text={'Count: ' + count} />
+        </>
+      );
+    }
+
+    ReactNoop.render(<Counter incrementBy={1} />);
+    expect(Scheduler).toFlushAndThrow(
+      'An event from useEvent was called during render',
+    );
+
+    // If something throws, we try one more time synchronously in case the error was
+    // caused by a data race. See recoverFromConcurrentError
+    expect(Scheduler).toHaveYielded(['Count: 0', 'Count: 0']);
+  });
+
+  // @gate enableUseEventHook
+  it("useLayoutEffect shouldn't re-fire when event handlers change", () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const increment = useEvent(amount =>
+        updateCount(c => c + (amount || incrementBy)),
+      );
+
+      useLayoutEffect(() => {
+        Scheduler.unstable_yieldValue('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} />);
+    expect(Scheduler).toHaveYielded([]);
+    expect(Scheduler).toFlushAndYield([
+      'Increment',
+      'Count: 0',
+      'Effect: by 2',
+      'Increment',
+      'Count: 2',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 2'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded([
+      'Increment',
+      // Effect should not re-run because the dependency hasn't changed.
+      'Count: 3',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 3'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 4',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 4'),
+    ]);
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    expect(Scheduler).toFlushAndYield([
+      'Increment',
+      'Count: 4',
+      'Effect: by 20',
+      'Increment',
+      'Count: 24',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 24'),
+    ]);
+
+    // Event uses the new prop
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 34'),
+    ]);
+  });
+
+  // @gate enableUseEventHook
+  it("useEffect shouldn't re-fire when event handlers change", () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function Counter({incrementBy}) {
+      const [count, updateCount] = useState(0);
+      const increment = useEvent(amount =>
+        updateCount(c => c + (amount || incrementBy)),
+      );
+
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('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} />);
+    expect(Scheduler).toFlushAndYield([
+      'Increment',
+      'Count: 0',
+      'Effect: by 2',
+      'Increment',
+      'Count: 2',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 2'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded([
+      'Increment',
+      // Effect should not re-run because the dependency hasn't changed.
+      'Count: 3',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 3'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 4',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 4'),
+    ]);
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    expect(Scheduler).toFlushAndYield([
+      'Increment',
+      'Count: 4',
+      'Effect: by 20',
+      'Increment',
+      'Count: 24',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 24'),
+    ]);
+
+    // Event uses the new prop
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 34'),
+    ]);
+  });
+
+  // @gate enableUseEventHook
+  it('is stable in a custom hook', () => {
+    class IncrementButton extends React.PureComponent {
+      increment = () => {
+        this.props.onClick();
+      };
+      render() {
+        return <Text text="Increment" />;
+      }
+    }
+
+    function useCount(incrementBy) {
+      const [count, updateCount] = useState(0);
+      const increment = useEvent(amount =>
+        updateCount(c => c + (amount || incrementBy)),
+      );
+
+      return [count, increment];
+    }
+
+    function Counter({incrementBy}) {
+      const [count, increment] = useCount(incrementBy);
+
+      useEffect(() => {
+        Scheduler.unstable_yieldValue('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} />);
+    expect(Scheduler).toFlushAndYield([
+      'Increment',
+      'Count: 0',
+      'Effect: by 2',
+      'Increment',
+      'Count: 2',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 2'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded([
+      'Increment',
+      // Effect should not re-run because the dependency hasn't changed.
+      'Count: 3',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 3'),
+    ]);
+
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded([
+      'Increment',
+      // Event should use the updated callback function closed over the new value.
+      'Count: 4',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 4'),
+    ]);
+
+    // Increase the increment prop amount
+    ReactNoop.render(<Counter incrementBy={10} />);
+    expect(Scheduler).toFlushAndYield([
+      'Increment',
+      'Count: 4',
+      'Effect: by 20',
+      'Increment',
+      'Count: 24',
+    ]);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 24'),
+    ]);
+
+    // Event uses the new prop
+    act(button.current.increment);
+    expect(Scheduler).toHaveYielded(['Increment', 'Count: 34']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Increment'),
+      span('Count: 34'),
+    ]);
+  });
+
+  // @gate enableUseEventHook
+  it('is mutated before all other effects', () => {
+    function Counter({value}) {
+      useInsertionEffect(() => {
+        Scheduler.unstable_yieldValue('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 = useEvent(() => {
+        Scheduler.unstable_yieldValue('Event value: ' + value);
+      });
+
+      return <></>;
+    }
+
+    ReactNoop.render(<Counter value={1} />);
+    expect(Scheduler).toFlushAndYield(['Effect value: 1', 'Event value: 1']);
+
+    act(() => ReactNoop.render(<Counter value={2} />));
+    expect(Scheduler).toHaveYielded(['Effect value: 2', 'Event value: 2']);
+  });
+
+  // @gate enableUseEventHook
+  it('integration: implements docs chat room example', () => {
+    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 = useEvent(() => {
+        Scheduler.unstable_yieldValue('Connected! theme: ' + theme);
+      });
+
+      useEffect(() => {
+        const connection = createConnection(roomId);
+        connection.on('connected', () => {
+          onConnected();
+        });
+        connection.connect();
+        return () => connection.disconnect();
+      }, [roomId, onConnected]);
+
+      return <Text text={`Welcome to the ${roomId} room!`} />;
+    }
+
+    act(() => ReactNoop.render(<ChatRoom roomId="general" theme="light" />));
+    expect(Scheduler).toHaveYielded(['Welcome to the general room!']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Welcome to the general room!'),
+    ]);
+
+    jest.advanceTimersByTime(100);
+    Scheduler.unstable_advanceTime(100);
+    expect(Scheduler).toHaveYielded(['Connected! theme: light']);
+
+    // change roomId only
+    act(() => ReactNoop.render(<ChatRoom roomId="music" theme="light" />));
+    expect(Scheduler).toHaveYielded(['Welcome to the music room!']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Welcome to the music room!'),
+    ]);
+    jest.advanceTimersByTime(100);
+    Scheduler.unstable_advanceTime(100);
+    // should trigger a reconnect
+    expect(Scheduler).toHaveYielded(['Connected! theme: light']);
+
+    // change theme only
+    act(() => ReactNoop.render(<ChatRoom roomId="music" theme="dark" />));
+    expect(Scheduler).toHaveYielded(['Welcome to the music room!']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Welcome to the music room!'),
+    ]);
+    jest.advanceTimersByTime(100);
+    Scheduler.unstable_advanceTime(100);
+    // should not trigger a reconnect
+    expect(Scheduler).toFlushWithoutYielding();
+
+    // change roomId only
+    act(() => ReactNoop.render(<ChatRoom roomId="travel" theme="dark" />));
+    expect(Scheduler).toHaveYielded(['Welcome to the travel room!']);
+    expect(ReactNoop.getChildren()).toEqual([
+      span('Welcome to the travel room!'),
+    ]);
+    jest.advanceTimersByTime(100);
+    Scheduler.unstable_advanceTime(100);
+    // should trigger a reconnect
+    expect(Scheduler).toHaveYielded(['Connected! theme: dark']);
+  });
+
+  // @gate enableUseEventHook
+  it('integration: implements the docs logVisit example', () => {
+    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 = useEvent(() => updateItems([...items, 1]));
+      const numberOfItems = items.length;
+
+      const onVisit = useEvent(visitedUrl => {
+        Scheduler.unstable_yieldValue(
+          'url: ' + url + ', numberOfItems: ' + numberOfItems,
+        );
+      });
+
+      useEffect(() => {
+        onVisit(url);
+      }, [url]);
+
+      return (
+        <AddToCartButton
+          onClick={() => {
+            onClick();
+          }}
+          ref={button}
+        />
+      );
+    }
+
+    const button = React.createRef(null);
+    act(() =>
+      ReactNoop.render(
+        <AppShell>
+          <Page url="/shop/1" />
+        </AppShell>,
+      ),
+    );
+    expect(Scheduler).toHaveYielded([
+      'Add to cart',
+      'url: /shop/1, numberOfItems: 0',
+    ]);
+    act(button.current.addToCart);
+    expect(Scheduler).toHaveYielded(['Add to cart']);
+
+    act(() =>
+      ReactNoop.render(
+        <AppShell>
+          <Page url="/shop/2" />
+        </AppShell>,
+      ),
+    );
+    expect(Scheduler).toHaveYielded([
+      'Add to cart',
+      'url: /shop/2, numberOfItems: 1',
+    ]);
+  });
+});
diff --git a/packages/react/index.classic.fb.js b/packages/react/index.classic.fb.js
index 0bc75a353168..b18fc3d7ad30 100644
--- a/packages/react/index.classic.fb.js
+++ b/packages/react/index.classic.fb.js
@@ -51,6 +51,7 @@ export {
   useDeferredValue,
   useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
+  experimental_useEvent,
   useImperativeHandle,
   useLayoutEffect,
   useInsertionEffect,
diff --git a/packages/react/index.experimental.js b/packages/react/index.experimental.js
index d60351e26398..2d36e3883614 100644
--- a/packages/react/index.experimental.js
+++ b/packages/react/index.experimental.js
@@ -43,6 +43,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
+  experimental_useEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.js b/packages/react/index.js
index d0628ab003a7..9db87fa8921a 100644
--- a/packages/react/index.js
+++ b/packages/react/index.js
@@ -71,6 +71,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
+  experimental_useEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.modern.fb.js b/packages/react/index.modern.fb.js
index 24de7511daed..ad440565309f 100644
--- a/packages/react/index.modern.fb.js
+++ b/packages/react/index.modern.fb.js
@@ -49,6 +49,7 @@ export {
   useDeferredValue,
   useDeferredValue as unstable_useDeferredValue, // TODO: Remove once call sights updated to useDeferredValue
   useEffect,
+  experimental_useEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/index.stable.js b/packages/react/index.stable.js
index 3ed868197b6f..ea6691f68f8c 100644
--- a/packages/react/index.stable.js
+++ b/packages/react/index.stable.js
@@ -33,6 +33,7 @@ export {
   useDebugValue,
   useDeferredValue,
   useEffect,
+  experimental_useEvent,
   useImperativeHandle,
   useInsertionEffect,
   useLayoutEffect,
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
index fae7ee56b758..fc6c77cbb653 100644
--- a/packages/react/src/React.js
+++ b/packages/react/src/React.js
@@ -41,6 +41,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useEvent,
   useImperativeHandle,
   useDebugValue,
   useInsertionEffect,
@@ -96,6 +97,7 @@ export {
   useCallback,
   useContext,
   useEffect,
+  useEvent as experimental_useEvent,
   useImperativeHandle,
   useDebugValue,
   useInsertionEffect,
diff --git a/packages/react/src/ReactHooks.js b/packages/react/src/ReactHooks.js
index 7192f9aea5e3..2e5046353a3a 100644
--- a/packages/react/src/ReactHooks.js
+++ b/packages/react/src/ReactHooks.js
@@ -217,3 +217,9 @@ export function useMemoCache(size: number): Array<any> {
   // $FlowFixMe This is unstable, thus optional
   return dispatcher.useMemoCache(size);
 }
+
+export function useEvent<T>(callback: T): void {
+  const dispatcher = resolveDispatcher();
+  // $FlowFixMe This is unstable, thus optional
+  return dispatcher.useEvent(callback);
+}
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index ba7fcb61a613..447d25542536 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -120,6 +120,8 @@ export const enableUseHook = __EXPERIMENTAL__;
 // auto-memoization.
 export const enableUseMemoCacheHook = __EXPERIMENTAL__;
 
+export const enableUseEventHook = __EXPERIMENTAL__;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 76f19551875b..500c4bde865f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -52,6 +52,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
+export const enableUseEventHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index 6de6388896c2..fb889cc65e73 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -42,6 +42,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
+export const enableUseEventHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 1ac2ff4f2acf..53ed7ca5a14c 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -42,6 +42,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
+export const enableUseEventHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index 8b3d4e230d43..034a605979ab 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -51,6 +51,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
+export const enableUseEventHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableStrictEffects = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index e414784563f3..239f67b9d54a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -42,6 +42,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
+export const enableUseEventHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 0d719ca3523d..6b078b93c26f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -42,6 +42,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = false;
 export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
+export const enableUseEventHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 6d2cd32d9f86..b16916483b3f 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -42,6 +42,7 @@ export const enableSuspenseAvoidThisFallbackFizz = false;
 export const enableCPUSuspense = true;
 export const enableUseHook = false;
 export const enableUseMemoCacheHook = false;
+export const enableUseEventHook = false;
 export const enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay = true;
 export const enableClientRenderFallbackOnTextMismatch = true;
 export const enableComponentStackLocations = true;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 18a333e40f76..605282c150c9 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -55,6 +55,7 @@ export const enableCPUSuspense = true;
 export const enableFloat = false;
 export const enableUseHook = true;
 export const enableUseMemoCacheHook = true;
+export const enableUseEventHook = true;
 
 // Logs additional User Timing API marks for use with an experimental profiling tool.
 export const enableSchedulingProfiler: boolean =
diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json
index 4817eadd9903..7a23215cc332 100644
--- a/scripts/error-codes/codes.json
+++ b/scripts/error-codes/codes.json
@@ -424,5 +424,6 @@
   "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."
+  "439": "We didn't expect to see a forward reference. This is a bug in the React Server.",
+  "440": "An event from useEvent was called during render."
 }

From 60fbb7b1433c5b268a88e0f693f29e6541e1a831 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 14 Sep 2022 20:13:33 -0400
Subject: [PATCH 1590/1603] [Flight] Implement FlightClient in terms of
 Thenable/Promises instead of throwing Promises (#25260)

* [Flight] Align Chunks with Thenable used with experimental_use

Use the field names used by the Thenable data structure passed to use().
These are considered public in this model.

This adds another field since we use a separate field name for "reason".

* Implement Thenable Protocol on Chunks

This doesn't just ping but resolves/rejects with the value.

* Subclass Promises

* Pass key through JSON parsing

* Wait for preloadModules before resolving module chunks

* Initialize lazy resolved values before reading the result

* Block a model from initializing if its direct dependencies are pending

If a module is blocked, then we can't complete initializing a model.
However, we can still let it parse, and then fill in the missing pieces
later.

We need to block it from resolving until all dependencies have filled in
which we can do with a ref count.

* Treat blocked modules or models as a special status

We currently loop over all chunks at the end to error them if they're
still pending. We shouldn't do this if they're pending because they're
blocked on an external resource like a module because the module might not
resolve before the Flight connection closes and that's not an error.

In an alternative solution I had a set that tracked pending chunks and
removed one at a time. While the loop at the end is faster it's more
work as we go.

I figured the extra status might also help debugging.

For modules we can probably assume no forward references, and the first
async module we can just use the promise as the chunk.

So we could probably get away with this only on models that are blocked by
modules.
---
 .../react-client/src/ReactFlightClient.js     | 407 +++++++++++++-----
 .../src/ReactFlightClientStream.js            |   2 +-
 .../src/ReactFiberWakeable.new.js             |  13 +-
 .../src/ReactFiberWakeable.old.js             |  13 +-
 .../ReactFlightDOMRelayClientHostConfig.js    |   8 +-
 .../ReactFlightClientWebpackBundlerConfig.js  |  68 +--
 .../ReactFlightNativeRelayClientHostConfig.js |   8 +-
 .../react-server/src/ReactFizzWakeable.js     |  13 +-
 .../react-server/src/ReactFlightWakeable.js   |  13 +-
 scripts/flow/react-relay-hooks.js             |   4 +-
 10 files changed, 384 insertions(+), 165 deletions(-)

diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index bd78cd237640..3ca33ff00e3d 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {Wakeable} from 'shared/ReactTypes';
+import type {Thenable} from 'shared/ReactTypes';
 import type {LazyComponent} from 'react/src/ReactLazy';
 
 import type {
@@ -37,63 +37,110 @@ export type JSONValue =
   | {+[key: string]: JSONValue}
   | $ReadOnlyArray<JSONValue>;
 
-const PENDING = 0;
-const RESOLVED_MODEL = 1;
-const RESOLVED_MODULE = 2;
-const INITIALIZED = 3;
-const ERRORED = 4;
-
-type PendingChunk = {
-  _status: 0,
-  _value: null | Array<() => mixed>,
+const PENDING = 'pending';
+const BLOCKED = 'blocked';
+const RESOLVED_MODEL = 'resolved_model';
+const RESOLVED_MODULE = 'resolved_module';
+const INITIALIZED = 'fulfilled';
+const ERRORED = 'rejected';
+
+type PendingChunk<T> = {
+  status: 'pending',
+  value: null | Array<(T) => mixed>,
+  reason: null | Array<(mixed) => mixed>,
+  _response: Response,
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): void,
+};
+type BlockedChunk<T> = {
+  status: 'blocked',
+  value: null | Array<(T) => mixed>,
+  reason: null | Array<(mixed) => mixed>,
   _response: Response,
-  then(resolve: () => mixed): void,
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): void,
 };
-type ResolvedModelChunk = {
-  _status: 1,
-  _value: UninitializedModel,
+type ResolvedModelChunk<T> = {
+  status: 'resolved_model',
+  value: UninitializedModel,
+  reason: null,
   _response: Response,
-  then(resolve: () => mixed): void,
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): void,
 };
 type ResolvedModuleChunk<T> = {
-  _status: 2,
-  _value: ModuleReference<T>,
+  status: 'resolved_module',
+  value: ModuleReference<T>,
+  reason: null,
   _response: Response,
-  then(resolve: () => mixed): void,
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): void,
 };
 type InitializedChunk<T> = {
-  _status: 3,
-  _value: T,
+  status: 'fulfilled',
+  value: T,
+  reason: null,
   _response: Response,
-  then(resolve: () => mixed): void,
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): void,
 };
-type ErroredChunk = {
-  _status: 4,
-  _value: Error,
+type ErroredChunk<T> = {
+  status: 'rejected',
+  value: null,
+  reason: mixed,
   _response: Response,
-  then(resolve: () => mixed): void,
+  then(resolve: (T) => mixed, reject: (mixed) => mixed): void,
 };
 type SomeChunk<T> =
-  | PendingChunk
-  | ResolvedModelChunk
+  | PendingChunk<T>
+  | BlockedChunk<T>
+  | ResolvedModelChunk<T>
   | ResolvedModuleChunk<T>
   | InitializedChunk<T>
-  | ErroredChunk;
+  | ErroredChunk<T>;
 
-function Chunk(status: any, value: any, response: Response) {
-  this._status = status;
-  this._value = value;
+function Chunk(status: any, value: any, reason: any, response: Response) {
+  this.status = status;
+  this.value = value;
+  this.reason = reason;
   this._response = response;
 }
-Chunk.prototype.then = function<T>(resolve: () => mixed) {
+// We subclass Promise.prototype so that we get other methods like .catch
+Chunk.prototype = (Object.create(Promise.prototype): any);
+// TODO: This doesn't return a new Promise chain unlike the real .then
+Chunk.prototype.then = function<T>(
+  resolve: (value: T) => mixed,
+  reject: (reason: mixed) => mixed,
+) {
   const chunk: SomeChunk<T> = this;
-  if (chunk._status === PENDING) {
-    if (chunk._value === null) {
-      chunk._value = [];
-    }
-    chunk._value.push(resolve);
-  } else {
-    resolve();
+  // 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:
+      resolve(chunk.value);
+      break;
+    case PENDING:
+    case BLOCKED:
+      if (resolve) {
+        if (chunk.value === null) {
+          chunk.value = [];
+        }
+        chunk.value.push(resolve);
+      }
+      if (reject) {
+        if (chunk.reason === null) {
+          chunk.reason = [];
+        }
+        chunk.reason.push(reject);
+      }
+      break;
+    default:
+      reject(chunk.reason);
+      break;
   }
 };
 
@@ -107,18 +154,26 @@ export type ResponseBase = {
 export type {Response};
 
 function readChunk<T>(chunk: SomeChunk<T>): T {
-  switch (chunk._status) {
-    case INITIALIZED:
-      return chunk._value;
+  // 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:
-      return initializeModelChunk(chunk);
+      initializeModelChunk(chunk);
+      break;
     case RESOLVED_MODULE:
-      return initializeModuleChunk(chunk);
+      initializeModuleChunk(chunk);
+      break;
+  }
+  // The status might have changed after initialization.
+  switch (chunk.status) {
+    case INITIALIZED:
+      return chunk.value;
     case PENDING:
+    case BLOCKED:
       // eslint-disable-next-line no-throw-literal
-      throw (chunk: Wakeable);
+      throw ((chunk: any): Thenable<T>);
     default:
-      throw chunk._value;
+      throw chunk.reason;
   }
 }
 
@@ -128,14 +183,22 @@ function readRoot<T>(): T {
   return readChunk(chunk);
 }
 
-function createPendingChunk(response: Response): PendingChunk {
+function createPendingChunk<T>(response: Response): PendingChunk<T> {
+  // $FlowFixMe Flow doesn't support functions as constructors
+  return new Chunk(PENDING, null, null, response);
+}
+
+function createBlockedChunk<T>(response: Response): BlockedChunk<T> {
   // $FlowFixMe Flow doesn't support functions as constructors
-  return new Chunk(PENDING, null, response);
+  return new Chunk(BLOCKED, null, null, response);
 }
 
-function createErrorChunk(response: Response, error: Error): ErroredChunk {
+function createErrorChunk<T>(
+  response: Response,
+  error: Error,
+): ErroredChunk<T> {
   // $FlowFixMe Flow doesn't support functions as constructors
-  return new Chunk(ERRORED, error, response);
+  return new Chunk(ERRORED, null, error, response);
 }
 
 function createInitializedChunk<T>(
@@ -143,36 +206,58 @@ function createInitializedChunk<T>(
   value: T,
 ): InitializedChunk<T> {
   // $FlowFixMe Flow doesn't support functions as constructors
-  return new Chunk(INITIALIZED, value, response);
+  return new Chunk(INITIALIZED, value, null, response);
 }
 
-function wakeChunk(listeners: null | Array<() => mixed>) {
-  if (listeners !== null) {
-    for (let i = 0; i < listeners.length; i++) {
-      const listener = listeners[i];
-      listener();
-    }
+function wakeChunk<T>(listeners: Array<(T) => mixed>, value: T): void {
+  for (let i = 0; i < listeners.length; i++) {
+    const listener = listeners[i];
+    listener(value);
   }
 }
 
-function triggerErrorOnChunk<T>(chunk: SomeChunk<T>, error: Error): void {
-  if (chunk._status !== PENDING) {
+function wakeChunkIfInitialized<T>(
+  chunk: SomeChunk<T>,
+  resolveListeners: Array<(T) => mixed>,
+  rejectListeners: null | Array<(mixed) => mixed>,
+): void {
+  switch (chunk.status) {
+    case INITIALIZED:
+      wakeChunk(resolveListeners, chunk.value);
+      break;
+    case PENDING:
+    case BLOCKED:
+      chunk.value = resolveListeners;
+      chunk.reason = rejectListeners;
+      break;
+    case ERRORED:
+      if (rejectListeners) {
+        wakeChunk(rejectListeners, chunk.reason);
+      }
+      break;
+  }
+}
+
+function triggerErrorOnChunk<T>(chunk: SomeChunk<T>, error: mixed): void {
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
     // We already resolved. We didn't expect to see this.
     return;
   }
-  const listeners = chunk._value;
-  const erroredChunk: ErroredChunk = (chunk: any);
-  erroredChunk._status = ERRORED;
-  erroredChunk._value = error;
-  wakeChunk(listeners);
+  const listeners = chunk.reason;
+  const erroredChunk: ErroredChunk<T> = (chunk: any);
+  erroredChunk.status = ERRORED;
+  erroredChunk.reason = error;
+  if (listeners !== null) {
+    wakeChunk(listeners, error);
+  }
 }
 
-function createResolvedModelChunk(
+function createResolvedModelChunk<T>(
   response: Response,
   value: UninitializedModel,
-): ResolvedModelChunk {
+): ResolvedModelChunk<T> {
   // $FlowFixMe Flow doesn't support functions as constructors
-  return new Chunk(RESOLVED_MODEL, value, response);
+  return new Chunk(RESOLVED_MODEL, value, null, response);
 }
 
 function createResolvedModuleChunk<T>(
@@ -180,53 +265,97 @@ function createResolvedModuleChunk<T>(
   value: ModuleReference<T>,
 ): ResolvedModuleChunk<T> {
   // $FlowFixMe Flow doesn't support functions as constructors
-  return new Chunk(RESOLVED_MODULE, value, response);
+  return new Chunk(RESOLVED_MODULE, value, null, response);
 }
 
 function resolveModelChunk<T>(
   chunk: SomeChunk<T>,
   value: UninitializedModel,
 ): void {
-  if (chunk._status !== PENDING) {
+  if (chunk.status !== PENDING) {
     // We already resolved. We didn't expect to see this.
     return;
   }
-  const listeners = chunk._value;
-  const resolvedChunk: ResolvedModelChunk = (chunk: any);
-  resolvedChunk._status = RESOLVED_MODEL;
-  resolvedChunk._value = value;
-  wakeChunk(listeners);
+  const resolveListeners = chunk.value;
+  const rejectListeners = chunk.reason;
+  const resolvedChunk: ResolvedModelChunk<T> = (chunk: any);
+  resolvedChunk.status = RESOLVED_MODEL;
+  resolvedChunk.value = value;
+  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(chunk, resolveListeners, rejectListeners);
+  }
 }
 
 function resolveModuleChunk<T>(
   chunk: SomeChunk<T>,
   value: ModuleReference<T>,
 ): void {
-  if (chunk._status !== PENDING) {
+  if (chunk.status !== PENDING && chunk.status !== BLOCKED) {
     // We already resolved. We didn't expect to see this.
     return;
   }
-  const listeners = chunk._value;
+  const resolveListeners = chunk.value;
+  const rejectListeners = chunk.reason;
   const resolvedChunk: ResolvedModuleChunk<T> = (chunk: any);
-  resolvedChunk._status = RESOLVED_MODULE;
-  resolvedChunk._value = value;
-  wakeChunk(listeners);
+  resolvedChunk.status = RESOLVED_MODULE;
+  resolvedChunk.value = value;
+  if (resolveListeners !== null) {
+    initializeModuleChunk(resolvedChunk);
+    wakeChunkIfInitialized(chunk, resolveListeners, rejectListeners);
+  }
 }
 
-function initializeModelChunk<T>(chunk: ResolvedModelChunk): T {
-  const value: T = parseModel(chunk._response, chunk._value);
-  const initializedChunk: InitializedChunk<T> = (chunk: any);
-  initializedChunk._status = INITIALIZED;
-  initializedChunk._value = value;
-  return value;
+let initializingChunk: ResolvedModelChunk<any> = (null: any);
+let initializingChunkBlockedModel: null | {deps: number, value: any} = null;
+function initializeModelChunk<T>(chunk: ResolvedModelChunk<T>): void {
+  const prevChunk = initializingChunk;
+  const prevBlocked = initializingChunkBlockedModel;
+  initializingChunk = chunk;
+  initializingChunkBlockedModel = null;
+  try {
+    const value: T = parseModel(chunk._response, chunk.value);
+    if (
+      initializingChunkBlockedModel !== null &&
+      initializingChunkBlockedModel.deps > 0
+    ) {
+      initializingChunkBlockedModel.value = value;
+      // We discovered new dependencies on modules that are not yet resolved.
+      // We have to go the BLOCKED state until they're resolved.
+      const blockedChunk: BlockedChunk<T> = (chunk: any);
+      blockedChunk.status = BLOCKED;
+      blockedChunk.value = null;
+      blockedChunk.reason = null;
+    } else {
+      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;
+  } finally {
+    initializingChunk = prevChunk;
+    initializingChunkBlockedModel = prevBlocked;
+  }
 }
 
-function initializeModuleChunk<T>(chunk: ResolvedModuleChunk<T>): T {
-  const value: T = requireModule(chunk._value);
-  const initializedChunk: InitializedChunk<T> = (chunk: any);
-  initializedChunk._status = INITIALIZED;
-  initializedChunk._value = value;
-  return value;
+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
@@ -236,7 +365,9 @@ export function reportGlobalError(response: Response, error: Error): void {
     // If this chunk was already resolved or errored, it won't
     // trigger an error but if it wasn't then we need to
     // because we won't be getting any new data to resolve it.
-    triggerErrorOnChunk(chunk, error);
+    if (chunk.status === PENDING) {
+      triggerErrorOnChunk(chunk, error);
+    }
   });
 }
 
@@ -302,9 +433,47 @@ function getChunk(response: Response, id: number): SomeChunk<any> {
   return chunk;
 }
 
+function createModelResolver<T>(
+  chunk: SomeChunk<T>,
+  parentObject: Object,
+  key: string,
+) {
+  let blocked;
+  if (initializingChunkBlockedModel) {
+    blocked = initializingChunkBlockedModel;
+    blocked.deps++;
+  } else {
+    blocked = initializingChunkBlockedModel = {
+      deps: 1,
+      value: null,
+    };
+  }
+  return value => {
+    parentObject[key] = value;
+    blocked.deps--;
+    if (blocked.deps === 0) {
+      if (chunk.status !== BLOCKED) {
+        return;
+      }
+      const resolveListeners = chunk.value;
+      const initializedChunk: InitializedChunk<T> = (chunk: any);
+      initializedChunk.status = INITIALIZED;
+      initializedChunk.value = blocked.value;
+      if (resolveListeners !== null) {
+        wakeChunk(resolveListeners, blocked.value);
+      }
+    }
+  };
+}
+
+function createModelReject<T>(chunk: SomeChunk<T>) {
+  return error => triggerErrorOnChunk(chunk, error);
+}
+
 export function parseModelString(
   response: Response,
   parentObject: Object,
+  key: string,
   value: string,
 ): any {
   switch (value[0]) {
@@ -317,7 +486,29 @@ export function parseModelString(
       } else {
         const id = parseInt(value.substring(1), 16);
         const chunk = getChunk(response, id);
-        return readChunk(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:
+            return chunk.value;
+          case PENDING:
+          case BLOCKED:
+            const parentChunk = initializingChunk;
+            chunk.then(
+              createModelResolver(parentChunk, parentObject, key),
+              createModelReject(parentChunk),
+            );
+            return null;
+          default:
+            throw chunk.reason;
+        }
       }
     }
     case '@': {
@@ -400,12 +591,32 @@ export function resolveModule(
   // 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.
-  preloadModule(moduleReference);
-
-  if (!chunk) {
-    chunks.set(id, createResolvedModuleChunk(response, moduleReference));
+  const promise = preloadModule(moduleReference);
+  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 {
+      // This can't actually happen because we don't have any forward
+      // references to modules.
+      blockedChunk = (chunk: any);
+      blockedChunk.status = BLOCKED;
+    }
+    promise.then(
+      () => resolveModuleChunk(blockedChunk, moduleReference),
+      error => triggerErrorOnChunk(blockedChunk, error),
+    );
   } else {
-    resolveModuleChunk(chunk, moduleReference);
+    if (!chunk) {
+      chunks.set(id, createResolvedModuleChunk(response, moduleReference));
+    } else {
+      // This can't actually happen because we don't have any forward
+      // references to modules.
+      resolveModuleChunk(chunk, moduleReference);
+    }
   }
 }
 
diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js
index ed27a10f6e33..d832927a0173 100644
--- a/packages/react-client/src/ReactFlightClientStream.js
+++ b/packages/react-client/src/ReactFlightClientStream.js
@@ -114,7 +114,7 @@ function createFromJSONCallback(response: Response) {
   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, value);
+      return parseModelString(response, this, key, value);
     }
     if (typeof value === 'object' && value !== null) {
       return parseModelTuple(response, value);
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.new.js b/packages/react-reconciler/src/ReactFiberWakeable.new.js
index 11f470cfab88..fad1d49f4474 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.new.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.new.js
@@ -61,10 +61,6 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
   // 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 'pending':
-      // Since the status is already "pending", we can assume it will be updated
-      // when it resolves, either by React or something in userspace.
-      break;
     case 'fulfilled':
     case 'rejected':
       // A thenable that already resolved shouldn't have been thrown, so this is
@@ -75,9 +71,12 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       suspendedThenable = null;
       break;
     default: {
-      // TODO: 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.
+      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(
diff --git a/packages/react-reconciler/src/ReactFiberWakeable.old.js b/packages/react-reconciler/src/ReactFiberWakeable.old.js
index 11f470cfab88..fad1d49f4474 100644
--- a/packages/react-reconciler/src/ReactFiberWakeable.old.js
+++ b/packages/react-reconciler/src/ReactFiberWakeable.old.js
@@ -61,10 +61,6 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
   // 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 'pending':
-      // Since the status is already "pending", we can assume it will be updated
-      // when it resolves, either by React or something in userspace.
-      break;
     case 'fulfilled':
     case 'rejected':
       // A thenable that already resolved shouldn't have been thrown, so this is
@@ -75,9 +71,12 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       suspendedThenable = null;
       break;
     default: {
-      // TODO: 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.
+      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(
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
index 308bbef0ed23..3d9f5f7bb8f9 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClientHostConfig.js
@@ -44,9 +44,9 @@ export function resolveModuleReference<T>(
   return resolveModuleReferenceImpl(moduleData);
 }
 
-function parseModelRecursively(response: Response, parentObj, value) {
+function parseModelRecursively(response: Response, parentObj, key, value) {
   if (typeof value === 'string') {
-    return parseModelString(response, parentObj, value);
+    return parseModelString(response, parentObj, key, value);
   }
   if (typeof value === 'object' && value !== null) {
     if (isArray(value)) {
@@ -55,6 +55,7 @@ function parseModelRecursively(response: Response, parentObj, value) {
         (parsedValue: any)[i] = parseModelRecursively(
           response,
           value,
+          '' + i,
           value[i],
         );
       }
@@ -65,6 +66,7 @@ function parseModelRecursively(response: Response, parentObj, value) {
         (parsedValue: any)[innerKey] = parseModelRecursively(
           response,
           value,
+          innerKey,
           value[innerKey],
         );
       }
@@ -77,5 +79,5 @@ function parseModelRecursively(response: Response, parentObj, value) {
 const dummy = {};
 
 export function parseModel<T>(response: Response, json: UninitializedModel): T {
-  return (parseModelRecursively(response, dummy, json): any);
+  return (parseModelRecursively(response, dummy, '', json): any);
 }
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index 288f63bfdc92..5c47c7736d06 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -7,7 +7,11 @@
  * @flow
  */
 
-import type {Thenable} from 'shared/ReactTypes';
+import type {
+  Thenable,
+  FulfilledThenable,
+  RejectedThenable,
+} from 'shared/ReactTypes';
 
 export type WebpackSSRMap = {
   [clientId: string]: {
@@ -56,7 +60,9 @@ const asyncModuleCache: Map<string, Thenable<any>> = new Map();
 
 // Start preloading the modules since we might need them soon.
 // This function doesn't suspend.
-export function preloadModule<T>(moduleData: ModuleReference<T>): void {
+export function preloadModule<T>(
+  moduleData: ModuleReference<T>,
+): null | Thenable<any> {
   const chunks = moduleData.chunks;
   const promises = [];
   for (let i = 0; i < chunks.length; i++) {
@@ -72,20 +78,35 @@ export function preloadModule<T>(moduleData: ModuleReference<T>): void {
     }
   }
   if (moduleData.async) {
-    const modulePromise: any = Promise.all(promises).then(() => {
-      return __webpack_require__(moduleData.id);
-    });
-    modulePromise.then(
-      value => {
-        modulePromise.status = 'fulfilled';
-        modulePromise.value = value;
-      },
-      reason => {
-        modulePromise.status = 'rejected';
-        modulePromise.reason = reason;
-      },
-    );
-    asyncModuleCache.set(moduleData.id, modulePromise);
+    const existingPromise = asyncModuleCache.get(moduleData.id);
+    if (existingPromise) {
+      if (existingPromise.status === 'fulfilled') {
+        return null;
+      }
+      return existingPromise;
+    } else {
+      const modulePromise: Thenable<T> = Promise.all(promises).then(() => {
+        return __webpack_require__(moduleData.id);
+      });
+      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(moduleData.id, modulePromise);
+      return modulePromise;
+    }
+  } else if (promises.length > 0) {
+    return Promise.all(promises);
+  } else {
+    return null;
   }
 }
 
@@ -99,23 +120,10 @@ export function requireModule<T>(moduleData: ModuleReference<T>): T {
     const promise: any = asyncModuleCache.get(moduleData.id);
     if (promise.status === 'fulfilled') {
       moduleExports = promise.value;
-    } else if (promise.status === 'rejected') {
-      throw promise.reason;
     } else {
-      throw promise;
+      throw promise.reason;
     }
   } else {
-    const chunks = moduleData.chunks;
-    for (let i = 0; i < chunks.length; i++) {
-      const chunkId = chunks[i];
-      const entry = chunkCache.get(chunkId);
-      if (entry !== null) {
-        // We assume that preloadModule has been called before.
-        // So we don't expect to see entry being undefined here, that's an error.
-        // Let's throw either an error or the Promise.
-        throw entry;
-      }
-    }
     moduleExports = __webpack_require__(moduleData.id);
   }
   if (moduleData.name === '*') {
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
index 83ab8800d459..aaa81c08726f 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClientHostConfig.js
@@ -44,9 +44,9 @@ export function resolveModuleReference<T>(
   return resolveModuleReferenceImpl(moduleData);
 }
 
-function parseModelRecursively(response: Response, parentObj, value) {
+function parseModelRecursively(response: Response, parentObj, key, value) {
   if (typeof value === 'string') {
-    return parseModelString(response, parentObj, value);
+    return parseModelString(response, parentObj, key, value);
   }
   if (typeof value === 'object' && value !== null) {
     if (isArray(value)) {
@@ -55,6 +55,7 @@ function parseModelRecursively(response: Response, parentObj, value) {
         (parsedValue: any)[i] = parseModelRecursively(
           response,
           value,
+          '' + i,
           value[i],
         );
       }
@@ -65,6 +66,7 @@ function parseModelRecursively(response: Response, parentObj, value) {
         (parsedValue: any)[innerKey] = parseModelRecursively(
           response,
           value,
+          innerKey,
           value[innerKey],
         );
       }
@@ -77,5 +79,5 @@ function parseModelRecursively(response: Response, parentObj, value) {
 const dummy = {};
 
 export function parseModel<T>(response: Response, json: UninitializedModel): T {
-  return (parseModelRecursively(response, dummy, json): any);
+  return (parseModelRecursively(response, dummy, '', json): any);
 }
diff --git a/packages/react-server/src/ReactFizzWakeable.js b/packages/react-server/src/ReactFizzWakeable.js
index 5a42ed396c4d..aea0b507c8ca 100644
--- a/packages/react-server/src/ReactFizzWakeable.js
+++ b/packages/react-server/src/ReactFizzWakeable.js
@@ -44,10 +44,6 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
   // 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 'pending':
-      // Since the status is already "pending", we can assume it will be updated
-      // when it resolves, either by React or something in userspace.
-      break;
     case 'fulfilled':
     case 'rejected':
       // A thenable that already resolved shouldn't have been thrown, so this is
@@ -57,9 +53,12 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       // TODO: Log a warning?
       break;
     default: {
-      // TODO: 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.
+      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(
diff --git a/packages/react-server/src/ReactFlightWakeable.js b/packages/react-server/src/ReactFlightWakeable.js
index c3eda3c16aee..b1ff2aa5eb3e 100644
--- a/packages/react-server/src/ReactFlightWakeable.js
+++ b/packages/react-server/src/ReactFlightWakeable.js
@@ -44,10 +44,6 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
   // 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 'pending':
-      // Since the status is already "pending", we can assume it will be updated
-      // when it resolves, either by React or something in userspace.
-      break;
     case 'fulfilled':
     case 'rejected':
       // A thenable that already resolved shouldn't have been thrown, so this is
@@ -57,9 +53,12 @@ export function trackSuspendedWakeable(wakeable: Wakeable) {
       // TODO: Log a warning?
       break;
     default: {
-      // TODO: 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.
+      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(
diff --git a/scripts/flow/react-relay-hooks.js b/scripts/flow/react-relay-hooks.js
index 9f452689976a..24dc92d5c722 100644
--- a/scripts/flow/react-relay-hooks.js
+++ b/scripts/flow/react-relay-hooks.js
@@ -62,7 +62,7 @@ declare module 'ReactFlightDOMRelayClientIntegration' {
   ): JSResourceReference<T>;
   declare export function preloadModule<T>(
     moduleReference: JSResourceReference<T>,
-  ): void;
+  ): null | Promise<void>;
   declare export function requireModule<T>(
     moduleReference: JSResourceReference<T>,
   ): T;
@@ -95,7 +95,7 @@ declare module 'ReactFlightNativeRelayClientIntegration' {
   ): JSResourceReference<T>;
   declare export function preloadModule<T>(
     moduleReference: JSResourceReference<T>,
-  ): void;
+  ): null | Promise<void>;
   declare export function requireModule<T>(
     moduleReference: JSResourceReference<T>,
   ): T;

From 975b644643a1479367fddac6b5b8dc854303d6a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 14 Sep 2022 20:20:33 -0400
Subject: [PATCH 1591/1603] [Flight] response.readRoot() -> use(response)
 (#25267)

* [Flight] Move from suspensey readRoot() to use(thenable)

* Update noop tests

These are no longer sync so they need some more significant updating.

Some of these tests are written in a non-idiomatic form too which is not
great.

* Update Relay tests

I kept these as sync for now and just assume a sync Promise.

* Updated the main tests

* Gate tests

* We need to cast through any because Thenable doesn't support unknown strings
---
 fixtures/flight-browser/index.html            |   2 +-
 fixtures/flight/src/index.js                  |   2 +-
 .../react-client/src/ReactFlightClient.js     |   7 +-
 .../src/ReactFlightClientStream.js            |   2 +-
 .../src/__tests__/ReactFlight-test.js         | 180 +++++++++---------
 .../src/ReactNoopFlightClient.js              |   6 +-
 .../src/ReactFlightDOMRelayClient.js          |   3 +-
 .../ReactFlightDOMRelay-test.internal.js      |  13 +-
 .../src/ReactFlightDOMClient.js               |  21 +-
 .../src/__tests__/ReactFlightDOM-test.js      |  67 ++++---
 .../__tests__/ReactFlightDOMBrowser-test.js   |  69 +++----
 .../src/ReactFlightNativeRelayClient.js       |   3 +-
 .../ReactFlightNativeRelay-test.internal.js   |  11 +-
 13 files changed, 194 insertions(+), 192 deletions(-)

diff --git a/fixtures/flight-browser/index.html b/fixtures/flight-browser/index.html
index ac39b6e26c6c..75654b943eb5 100644
--- a/fixtures/flight-browser/index.html
+++ b/fixtures/flight-browser/index.html
@@ -83,7 +83,7 @@ <h1>Flight Example</h1>
       }
 
       function Shell({ data }) {
-        let model = data.readRoot();
+        let model = React.experimental_use(data);
         return <div>
           <Suspense fallback="...">
             <h1>{model.title}</h1>
diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index a096ff25e897..b54a69ed7ba2 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -6,7 +6,7 @@ import ReactServerDOMReader from 'react-server-dom-webpack';
 let data = ReactServerDOMReader.createFromFetch(fetch('http://localhost:3001'));
 
 function Content() {
-  return data.readRoot();
+  return React.experimental_use(data);
 }
 
 ReactDOM.render(
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
index 3ca33ff00e3d..1dbe46ebce1c 100644
--- a/packages/react-client/src/ReactFlightClient.js
+++ b/packages/react-client/src/ReactFlightClient.js
@@ -147,7 +147,6 @@ Chunk.prototype.then = function<T>(
 export type ResponseBase = {
   _bundlerConfig: BundlerConfig,
   _chunks: Map<number, SomeChunk<any>>,
-  readRoot<T>(): T,
   ...
 };
 
@@ -177,10 +176,9 @@ function readChunk<T>(chunk: SomeChunk<T>): T {
   }
 }
 
-function readRoot<T>(): T {
-  const response: Response = this;
+export function getRoot<T>(response: Response): Thenable<T> {
   const chunk = getChunk(response, 0);
-  return readChunk(chunk);
+  return (chunk: any);
 }
 
 function createPendingChunk<T>(response: Response): PendingChunk<T> {
@@ -541,7 +539,6 @@ export function createResponse(bundlerConfig: BundlerConfig): ResponseBase {
   const response = {
     _bundlerConfig: bundlerConfig,
     _chunks: chunks,
-    readRoot: readRoot,
   };
   return response;
 }
diff --git a/packages/react-client/src/ReactFlightClientStream.js b/packages/react-client/src/ReactFlightClientStream.js
index d832927a0173..b6c61b0ba5de 100644
--- a/packages/react-client/src/ReactFlightClientStream.js
+++ b/packages/react-client/src/ReactFlightClientStream.js
@@ -137,4 +137,4 @@ export function createResponse(bundlerConfig: BundlerConfig): Response {
   return response;
 }
 
-export {reportGlobalError, close} from './ReactFlightClient';
+export {reportGlobalError, getRoot, close} from './ReactFlightClient';
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
index 505b9072ff7c..b03a7087656a 100644
--- a/packages/react-client/src/__tests__/ReactFlight-test.js
+++ b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -11,6 +11,8 @@
 'use strict';
 
 let act;
+let use;
+let startTransition;
 let React;
 let ReactNoop;
 let ReactNoopFlightServer;
@@ -24,6 +26,8 @@ describe('ReactFlight', () => {
     jest.resetModules();
 
     React = require('react');
+    startTransition = React.startTransition;
+    use = React.experimental_use;
     ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
@@ -79,7 +83,7 @@ describe('ReactFlight', () => {
     };
   }
 
-  it('can render a server component', () => {
+  it('can render a server component', async () => {
     function Bar({text}) {
       return text.toUpperCase();
     }
@@ -95,7 +99,7 @@ describe('ReactFlight', () => {
     const transport = ReactNoopFlightServer.render({
       foo: <Foo />,
     });
-    const model = ReactNoopFlightClient.read(transport);
+    const model = await ReactNoopFlightClient.read(transport);
     expect(model).toEqual({
       foo: {
         bar: (
@@ -109,7 +113,7 @@ describe('ReactFlight', () => {
     });
   });
 
-  it('can render a client component using a module reference and render there', () => {
+  it('can render a client component using a module reference and render there', async () => {
     function UserClient(props) {
       return (
         <span>
@@ -129,8 +133,8 @@ describe('ReactFlight', () => {
 
     const transport = ReactNoopFlightServer.render(model);
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       const greeting = rootModel.greeting;
       ReactNoop.render(greeting);
     });
@@ -166,15 +170,15 @@ describe('ReactFlight', () => {
 
     const transport = ReactNoopFlightServer.render(<ServerComponent />);
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       ReactNoop.render(rootModel);
     });
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
     await load();
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       ReactNoop.render(rootModel);
     });
     expect(ReactNoop).toMatchRenderedOutput(
@@ -211,8 +215,8 @@ describe('ReactFlight', () => {
 
     const transport = ReactNoopFlightServer.render(<ServerComponent />);
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       ReactNoop.render(rootModel);
     });
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
@@ -248,15 +252,15 @@ describe('ReactFlight', () => {
 
     const transport = ReactNoopFlightServer.render(<ServerComponent />);
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       ReactNoop.render(rootModel);
     });
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
     await load();
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       ReactNoop.render(rootModel);
     });
     expect(ReactNoop).toMatchRenderedOutput(
@@ -293,8 +297,8 @@ describe('ReactFlight', () => {
 
     const transport = ReactNoopFlightServer.render(<ServerComponent />);
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       ReactNoop.render(rootModel);
     });
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
@@ -331,21 +335,22 @@ describe('ReactFlight', () => {
 
     const transport = ReactNoopFlightServer.render(<ServerComponent />);
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    await act(async () => {
+      const rootModel = await ReactNoopFlightClient.read(transport);
       ReactNoop.render(rootModel);
     });
     expect(ReactNoop).toMatchRenderedOutput('Loading...');
     await load();
 
-    act(() => {
-      const rootModel = ReactNoopFlightClient.read(transport);
+    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', () => {
+  // @gate enableUseHook
+  it('should error if a non-serializable value is passed to a host component', async () => {
     function EventHandlerProp() {
       return (
         <div className="foo" onClick={function() {}}>
@@ -375,31 +380,34 @@ describe('ReactFlight', () => {
     const symbol = ReactNoopFlightServer.render(<SymbolProp />, options);
     const refs = ReactNoopFlightServer.render(<RefProp />, options);
 
-    function Client({transport}) {
-      return ReactNoopFlightClient.read(transport);
+    function Client({promise}) {
+      return use(promise);
     }
 
-    act(() => {
-      ReactNoop.render(
-        <>
-          <ErrorBoundary expectedMessage="Event handlers cannot be passed to client component props.">
-            <Client transport={event} />
-          </ErrorBoundary>
-          <ErrorBoundary expectedMessage="Functions cannot be passed directly to client components because they're not serializable.">
-            <Client transport={fn} />
-          </ErrorBoundary>
-          <ErrorBoundary expectedMessage="Only global symbols received from Symbol.for(...) can be passed to client components.">
-            <Client transport={symbol} />
-          </ErrorBoundary>
-          <ErrorBoundary expectedMessage="Refs cannot be used in server components, nor passed to client components.">
-            <Client transport={refs} />
-          </ErrorBoundary>
-        </>,
-      );
+    await act(async () => {
+      startTransition(() => {
+        ReactNoop.render(
+          <>
+            <ErrorBoundary expectedMessage="Event handlers cannot be passed to client component props.">
+              <Client promise={ReactNoopFlightClient.read(event)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Functions cannot be passed directly to client components because they're not serializable.">
+              <Client promise={ReactNoopFlightClient.read(fn)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Only global symbols received from Symbol.for(...) can be passed to client components.">
+              <Client promise={ReactNoopFlightClient.read(symbol)} />
+            </ErrorBoundary>
+            <ErrorBoundary expectedMessage="Refs cannot be used in server components, nor passed to client components.">
+              <Client promise={ReactNoopFlightClient.read(refs)} />
+            </ErrorBoundary>
+          </>,
+        );
+      });
     });
   });
 
-  it('should trigger the inner most error boundary inside a client component', () => {
+  // @gate enableUseHook
+  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.');
     }
@@ -433,16 +441,18 @@ describe('ReactFlight', () => {
       },
     });
 
-    function Client({transport}) {
-      return ReactNoopFlightClient.read(transport);
+    function Client({promise}) {
+      return use(promise);
     }
 
-    act(() => {
-      ReactNoop.render(
-        <NoErrorExpected>
-          <Client transport={data} />
-        </NoErrorExpected>,
-      );
+    await act(async () => {
+      startTransition(() => {
+        ReactNoop.render(
+          <NoErrorExpected>
+            <Client promise={ReactNoopFlightClient.read(data)} />
+          </NoErrorExpected>,
+        );
+      });
     });
   });
 
@@ -451,9 +461,7 @@ describe('ReactFlight', () => {
       const transport = ReactNoopFlightServer.render(
         <input value={new Date()} />,
       );
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
-      });
+      ReactNoopFlightClient.read(transport);
     }).toErrorDev(
       'Only plain objects can be passed to client components from server components. ',
       {withoutStack: true},
@@ -463,9 +471,7 @@ describe('ReactFlight', () => {
   it('should warn in DEV if a special object is passed to a host component', () => {
     expect(() => {
       const transport = ReactNoopFlightServer.render(<input value={Math} />);
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
-      });
+      ReactNoopFlightClient.read(transport);
     }).toErrorDev(
       'Only plain objects can be passed to client components from server components. ' +
         'Built-ins like Math are not supported.',
@@ -475,9 +481,7 @@ describe('ReactFlight', () => {
 
   it('should NOT warn in DEV for key getters', () => {
     const transport = ReactNoopFlightServer.render(<div key="a" />);
-    act(() => {
-      ReactNoop.render(ReactNoopFlightClient.read(transport));
-    });
+    ReactNoopFlightClient.read(transport);
   });
 
   it('should warn in DEV if an object with symbols is passed to a host component', () => {
@@ -485,9 +489,7 @@ describe('ReactFlight', () => {
       const transport = ReactNoopFlightServer.render(
         <input value={{[Symbol.iterator]: {}}} />,
       );
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
-      });
+      ReactNoopFlightClient.read(transport);
     }).toErrorDev(
       'Only plain objects can be passed to client components from server components. ' +
         'Objects with symbol properties like Symbol.iterator are not supported.',
@@ -503,9 +505,7 @@ describe('ReactFlight', () => {
       const transport = ReactNoopFlightServer.render(
         <input value={new Foo()} />,
       );
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
-      });
+      ReactNoopFlightClient.read(transport);
     }).toErrorDev(
       'Only plain objects can be passed to client components from server components. ',
       {withoutStack: true},
@@ -518,7 +518,7 @@ describe('ReactFlight', () => {
       return <div prop={id}>{children}</div>;
     }
 
-    it('should support useId', () => {
+    it('should support useId', async () => {
       function App() {
         return (
           <>
@@ -529,8 +529,8 @@ describe('ReactFlight', () => {
       }
 
       const transport = ReactNoopFlightServer.render(<App />);
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
       expect(ReactNoop).toMatchRenderedOutput(
         <>
@@ -540,7 +540,7 @@ describe('ReactFlight', () => {
       );
     });
 
-    it('accepts an identifier prefix that prefixes generated ids', () => {
+    it('accepts an identifier prefix that prefixes generated ids', async () => {
       function App() {
         return (
           <>
@@ -553,8 +553,8 @@ describe('ReactFlight', () => {
       const transport = ReactNoopFlightServer.render(<App />, {
         identifierPrefix: 'foo',
       });
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
       expect(ReactNoop).toMatchRenderedOutput(
         <>
@@ -591,8 +591,8 @@ describe('ReactFlight', () => {
       const transport = ReactNoopFlightServer.render(<App />);
       expect(Scheduler).toHaveYielded([]);
 
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
 
       expect(Scheduler).toHaveYielded(['ClientDoubler']);
@@ -607,7 +607,7 @@ describe('ReactFlight', () => {
 
   describe('ServerContext', () => {
     // @gate enableServerContext
-    it('supports basic createServerContext usage', () => {
+    it('supports basic createServerContext usage', async () => {
       const ServerContext = React.createServerContext(
         'ServerContext',
         'hello from server',
@@ -618,17 +618,17 @@ describe('ReactFlight', () => {
       }
 
       const transport = ReactNoopFlightServer.render(<Foo />);
-      act(() => {
+      await act(async () => {
         ServerContext._currentRenderer = null;
         ServerContext._currentRenderer2 = null;
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
 
       expect(ReactNoop).toMatchRenderedOutput(<div>hello from server</div>);
     });
 
     // @gate enableServerContext
-    it('propagates ServerContext providers in flight', () => {
+    it('propagates ServerContext providers in flight', async () => {
       const ServerContext = React.createServerContext(
         'ServerContext',
         'default',
@@ -649,10 +649,10 @@ describe('ReactFlight', () => {
       }
 
       const transport = ReactNoopFlightServer.render(<Foo />);
-      act(() => {
+      await act(async () => {
         ServerContext._currentRenderer = null;
         ServerContext._currentRenderer2 = null;
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
 
       expect(ReactNoop).toMatchRenderedOutput(<div>hi this is server</div>);
@@ -693,7 +693,7 @@ describe('ReactFlight', () => {
     });
 
     // @gate enableServerContext
-    it('propagates ServerContext and cleansup providers in flight', () => {
+    it('propagates ServerContext and cleansup providers in flight', async () => {
       const ServerContext = React.createServerContext(
         'ServerContext',
         'default',
@@ -724,8 +724,8 @@ describe('ReactFlight', () => {
       }
 
       const transport = ReactNoopFlightServer.render(<Foo />);
-      act(() => {
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
+      await act(async () => {
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
 
       expect(ReactNoop).toMatchRenderedOutput(
@@ -788,10 +788,10 @@ describe('ReactFlight', () => {
 
       expect(Scheduler).toHaveYielded(['rendered']);
 
-      act(() => {
+      await act(async () => {
         ServerContext._currentRenderer = null;
         ServerContext._currentRenderer2 = null;
-        ReactNoop.render(ReactNoopFlightClient.read(transport));
+        ReactNoop.render(await ReactNoopFlightClient.read(transport));
       });
 
       expect(ReactNoop).toMatchRenderedOutput(<div>hi this is server</div>);
@@ -828,10 +828,10 @@ describe('ReactFlight', () => {
 
       expect(Scheduler).toHaveYielded([]);
 
-      act(() => {
+      await act(async () => {
         ServerContext._currentRenderer = null;
         ServerContext._currentRenderer2 = null;
-        const flightModel = ReactNoopFlightClient.read(transport);
+        const flightModel = await ReactNoopFlightClient.read(transport);
         ReactNoop.render(flightModel.foo);
       });
 
@@ -856,8 +856,8 @@ describe('ReactFlight', () => {
         context: [['ServerContext', 'Override']],
       });
 
-      act(() => {
-        const flightModel = ReactNoopFlightClient.read(transport);
+      await act(async () => {
+        const flightModel = await ReactNoopFlightClient.read(transport);
         ReactNoop.render(flightModel);
       });
       expect(ReactNoop).toMatchRenderedOutput(<span>Override</span>);
@@ -937,8 +937,8 @@ describe('ReactFlight', () => {
       act = require('jest-react').act;
       Scheduler = require('scheduler');
 
-      act(() => {
-        const serverModel = ReactNoopFlightClient.read(transport);
+      await act(async () => {
+        const serverModel = await ReactNoopFlightClient.read(transport);
         ReactNoop.render(<ClientApp serverModel={serverModel} />);
       });
 
diff --git a/packages/react-noop-renderer/src/ReactNoopFlightClient.js b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
index 52af83c5ef62..dd19b702b9ce 100644
--- a/packages/react-noop-renderer/src/ReactNoopFlightClient.js
+++ b/packages/react-noop-renderer/src/ReactNoopFlightClient.js
@@ -20,7 +20,7 @@ import ReactFlightClient from 'react-client/flight';
 
 type Source = Array<string>;
 
-const {createResponse, processStringChunk, close} = ReactFlightClient({
+const {createResponse, processStringChunk, getRoot, close} = ReactFlightClient({
   supportsBinaryStreams: false,
   resolveModuleReference(bundlerConfig: null, idx: string) {
     return idx;
@@ -34,13 +34,13 @@ const {createResponse, processStringChunk, close} = ReactFlightClient({
   },
 });
 
-function read<T>(source: Source): T {
+function read<T>(source: Source): Thenable<T> {
   const response = createResponse(source, null);
   for (let i = 0; i < source.length; i++) {
     processStringChunk(response, source[i], 0);
   }
   close(response);
-  return response.readRoot();
+  return getRoot(response);
 }
 
 export {read};
diff --git a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
index ece3124bcf80..ecee74598c57 100644
--- a/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
+++ b/packages/react-server-dom-relay/src/ReactFlightDOMRelayClient.js
@@ -18,9 +18,10 @@ import {
   resolveSymbol,
   resolveError,
   close,
+  getRoot,
 } from 'react-client/src/ReactFlightClient';
 
-export {createResponse, close};
+export {createResponse, close, getRoot};
 
 export function resolveRow(response: Response, chunk: RowEncoding): void {
   if (chunk[0] === 'J') {
diff --git a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
index 0444add03790..4f762230d9ee 100644
--- a/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
+++ b/packages/react-server-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -31,13 +31,22 @@ describe('ReactFlightDOMRelay', () => {
   });
 
   function readThrough(data) {
-    const response = ReactDOMFlightRelayClient.createResponse(null);
+    const response = ReactDOMFlightRelayClient.createResponse();
     for (let i = 0; i < data.length; i++) {
       const chunk = data[i];
       ReactDOMFlightRelayClient.resolveRow(response, chunk);
     }
     ReactDOMFlightRelayClient.close(response);
-    const model = response.readRoot();
+    const promise = ReactDOMFlightRelayClient.getRoot(response);
+    let model;
+    let error;
+    promise.then(
+      m => (model = m),
+      e => (error = e),
+    );
+    if (error) {
+      throw error;
+    }
     return model;
   }
 
diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
index 32f8e794f4f7..d2c2dc77a8db 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightDOMClient.js
@@ -7,12 +7,15 @@
  * @flow
  */
 
+import type {Thenable} from 'shared/ReactTypes.js';
+
 import type {Response as FlightResponse} from 'react-client/src/ReactFlightClientStream';
 
 import type {BundlerConfig} from './ReactFlightClientWebpackBundlerConfig';
 
 import {
   createResponse,
+  getRoot,
   reportGlobalError,
   processStringChunk,
   processBinaryChunk,
@@ -49,21 +52,21 @@ function startReadingFromStream(
     .catch(error);
 }
 
-function createFromReadableStream(
+function createFromReadableStream<T>(
   stream: ReadableStream,
   options?: Options,
-): FlightResponse {
+): Thenable<T> {
   const response: FlightResponse = createResponse(
     options && options.moduleMap ? options.moduleMap : null,
   );
   startReadingFromStream(response, stream);
-  return response;
+  return getRoot(response);
 }
 
-function createFromFetch(
+function createFromFetch<T>(
   promiseForResponse: Promise<Response>,
   options?: Options,
-): FlightResponse {
+): Thenable<T> {
   const response: FlightResponse = createResponse(
     options && options.moduleMap ? options.moduleMap : null,
   );
@@ -75,13 +78,13 @@ function createFromFetch(
       reportGlobalError(response, e);
     },
   );
-  return response;
+  return getRoot(response);
 }
 
-function createFromXHR(
+function createFromXHR<T>(
   request: XMLHttpRequest,
   options?: Options,
-): FlightResponse {
+): Thenable<T> {
   const response: FlightResponse = createResponse(
     options && options.moduleMap ? options.moduleMap : null,
   );
@@ -103,7 +106,7 @@ function createFromXHR(
   request.addEventListener('error', error);
   request.addEventListener('abort', error);
   request.addEventListener('timeout', error);
-  return response;
+  return getRoot(response);
 }
 
 export {createFromXHR, createFromFetch, createFromReadableStream};
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
index 9de384376415..f8948c3604a5 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOM-test.js
@@ -18,6 +18,7 @@ global.TextDecoder = require('util').TextDecoder;
 global.setImmediate = cb => cb();
 
 let act;
+let use;
 let clientExports;
 let clientModuleError;
 let webpackMap;
@@ -40,6 +41,7 @@ describe('ReactFlightDOM', () => {
 
     Stream = require('stream');
     React = require('react');
+    use = React.experimental_use;
     Suspense = React.Suspense;
     ReactDOMClient = require('react-dom/client');
     ReactServerDOMWriter = require('react-server-dom-webpack/writer.node.server');
@@ -80,20 +82,6 @@ describe('ReactFlightDOM', () => {
     };
   }
 
-  async function waitForSuspense(fn) {
-    while (true) {
-      try {
-        return fn();
-      } catch (promise) {
-        if (typeof promise.then === 'function') {
-          await promise;
-        } else {
-          throw promise;
-        }
-      }
-    }
-  }
-
   const theInfinitePromise = new Promise(() => {});
   function InfiniteSuspend() {
     throw theInfinitePromise;
@@ -126,19 +114,18 @@ describe('ReactFlightDOM', () => {
     );
     pipe(writable);
     const response = ReactServerDOMReader.createFromReadableStream(readable);
-    await waitForSuspense(() => {
-      const model = response.readRoot();
-      expect(model).toEqual({
-        html: (
-          <div>
-            <span>hello</span>
-            <span>world</span>
-          </div>
-        ),
-      });
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>world</span>
+        </div>
+      ),
     });
   });
 
+  // @gate enableUseHook
   it('should resolve the root', async () => {
     // Model
     function Text({children}) {
@@ -160,7 +147,7 @@ describe('ReactFlightDOM', () => {
 
     // View
     function Message({response}) {
-      return <section>{response.readRoot().html}</section>;
+      return <section>{use(response).html}</section>;
     }
     function App({response}) {
       return (
@@ -188,6 +175,7 @@ describe('ReactFlightDOM', () => {
     );
   });
 
+  // @gate enableUseHook
   it('should not get confused by $', async () => {
     // Model
     function RootModel() {
@@ -196,7 +184,7 @@ describe('ReactFlightDOM', () => {
 
     // View
     function Message({response}) {
-      return <p>{response.readRoot().text}</p>;
+      return <p>{use(response).text}</p>;
     }
     function App({response}) {
       return (
@@ -222,6 +210,7 @@ describe('ReactFlightDOM', () => {
     expect(container.innerHTML).toBe('<p>$1</p>');
   });
 
+  // @gate enableUseHook
   it('should not get confused by @', async () => {
     // Model
     function RootModel() {
@@ -230,7 +219,7 @@ describe('ReactFlightDOM', () => {
 
     // View
     function Message({response}) {
-      return <p>{response.readRoot().text}</p>;
+      return <p>{use(response).text}</p>;
     }
     function App({response}) {
       return (
@@ -256,6 +245,7 @@ describe('ReactFlightDOM', () => {
     expect(container.innerHTML).toBe('<p>@div</p>');
   });
 
+  // @gate enableUseHook
   it('should unwrap async module references', async () => {
     const AsyncModule = Promise.resolve(function AsyncModule({text}) {
       return 'Async: ' + text;
@@ -266,7 +256,7 @@ describe('ReactFlightDOM', () => {
     });
 
     function Print({response}) {
-      return <p>{response.readRoot()}</p>;
+      return <p>{use(response)}</p>;
     }
 
     function App({response}) {
@@ -296,6 +286,7 @@ describe('ReactFlightDOM', () => {
     expect(container.innerHTML).toBe('<p>Async: Module</p>');
   });
 
+  // @gate enableUseHook
   it('should be able to import a name called "then"', async () => {
     const thenExports = {
       then: function then() {
@@ -304,7 +295,7 @@ describe('ReactFlightDOM', () => {
     };
 
     function Print({response}) {
-      return <p>{response.readRoot()}</p>;
+      return <p>{use(response)}</p>;
     }
 
     function App({response}) {
@@ -333,6 +324,7 @@ describe('ReactFlightDOM', () => {
     expect(container.innerHTML).toBe('<p>and then</p>');
   });
 
+  // @gate enableUseHook
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
 
@@ -432,7 +424,7 @@ describe('ReactFlightDOM', () => {
     };
 
     function ProfilePage({response}) {
-      return response.readRoot().rootContent;
+      return use(response).rootContent;
     }
 
     const {writable, readable} = getTestStream();
@@ -520,11 +512,12 @@ describe('ReactFlightDOM', () => {
     expect(reportedErrors).toEqual([]);
   });
 
+  // @gate enableUseHook
   it('should preserve state of client components on refetch', async () => {
     // Client
 
     function Page({response}) {
-      return response.readRoot();
+      return use(response);
     }
 
     function Input() {
@@ -605,6 +598,7 @@ describe('ReactFlightDOM', () => {
     expect(inputB.value).toBe('goodbye');
   });
 
+  // @gate enableUseHook
   it('should be able to complete after aborting and throw the reason client-side', async () => {
     const reportedErrors = [];
 
@@ -627,7 +621,7 @@ describe('ReactFlightDOM', () => {
     const root = ReactDOMClient.createRoot(container);
 
     function App({res}) {
-      return res.readRoot();
+      return use(res);
     }
 
     await act(async () => {
@@ -649,6 +643,7 @@ describe('ReactFlightDOM', () => {
     expect(reportedErrors).toEqual(['for reasons']);
   });
 
+  // @gate enableUseHook
   it('should be able to recover from a direct reference erroring client-side', async () => {
     const reportedErrors = [];
 
@@ -677,7 +672,7 @@ describe('ReactFlightDOM', () => {
     const root = ReactDOMClient.createRoot(container);
 
     function App({res}) {
-      return res.readRoot();
+      return use(res);
     }
 
     await act(async () => {
@@ -694,6 +689,7 @@ describe('ReactFlightDOM', () => {
     expect(reportedErrors).toEqual([]);
   });
 
+  // @gate enableUseHook
   it('should be able to recover from a direct reference erroring client-side async', async () => {
     const reportedErrors = [];
 
@@ -727,7 +723,7 @@ describe('ReactFlightDOM', () => {
     const root = ReactDOMClient.createRoot(container);
 
     function App({res}) {
-      return res.readRoot();
+      return use(res);
     }
 
     await act(async () => {
@@ -751,6 +747,7 @@ describe('ReactFlightDOM', () => {
     expect(reportedErrors).toEqual([]);
   });
 
+  // @gate enableUseHook
   it('should be able to recover from a direct reference erroring server-side', async () => {
     const reportedErrors = [];
 
@@ -787,7 +784,7 @@ describe('ReactFlightDOM', () => {
     const root = ReactDOMClient.createRoot(container);
 
     function App({res}) {
-      return res.readRoot();
+      return use(res);
     }
 
     await act(async () => {
diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
index f477bba451a6..7ac0a2b4aa9d 100644
--- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
+++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js
@@ -43,20 +43,6 @@ describe('ReactFlightDOMBrowser', () => {
     use = React.experimental_use;
   });
 
-  async function waitForSuspense(fn) {
-    while (true) {
-      try {
-        return fn();
-      } catch (promise) {
-        if (typeof promise.then === 'function') {
-          await promise;
-        } else {
-          throw promise;
-        }
-      }
-    }
-  }
-
   async function readResult(stream) {
     const reader = stream.getReader();
     let result = '';
@@ -121,16 +107,14 @@ describe('ReactFlightDOMBrowser', () => {
 
     const stream = ReactServerDOMWriter.renderToReadableStream(<App />);
     const response = ReactServerDOMReader.createFromReadableStream(stream);
-    await waitForSuspense(() => {
-      const model = response.readRoot();
-      expect(model).toEqual({
-        html: (
-          <div>
-            <span>hello</span>
-            <span>world</span>
-          </div>
-        ),
-      });
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>world</span>
+        </div>
+      ),
     });
   });
 
@@ -156,19 +140,18 @@ describe('ReactFlightDOMBrowser', () => {
 
     const stream = ReactServerDOMWriter.renderToReadableStream(<App />);
     const response = ReactServerDOMReader.createFromReadableStream(stream);
-    await waitForSuspense(() => {
-      const model = response.readRoot();
-      expect(model).toEqual({
-        html: (
-          <div>
-            <span>hello</span>
-            <span>world</span>
-          </div>
-        ),
-      });
+    const model = await response;
+    expect(model).toEqual({
+      html: (
+        <div>
+          <span>hello</span>
+          <span>world</span>
+        </div>
+      ),
     });
   });
 
+  // @gate enableUseHook
   it('should progressively reveal server components', async () => {
     let reportedErrors = [];
 
@@ -259,7 +242,7 @@ describe('ReactFlightDOMBrowser', () => {
     };
 
     function ProfilePage({response}) {
-      return response.readRoot().rootContent;
+      return use(response).rootContent;
     }
 
     const stream = ReactServerDOMWriter.renderToReadableStream(
@@ -456,6 +439,7 @@ describe('ReactFlightDOMBrowser', () => {
     expect(isDone).toBeTruthy();
   });
 
+  // @gate enableUseHook
   it('should allow an alternative module mapping to be used for SSR', async () => {
     function ClientComponent() {
       return <span>Client Component</span>;
@@ -491,7 +475,7 @@ describe('ReactFlightDOMBrowser', () => {
     });
 
     function ClientRoot() {
-      return response.readRoot();
+      return use(response);
     }
 
     const ssrStream = await ReactDOMServer.renderToReadableStream(
@@ -501,6 +485,7 @@ describe('ReactFlightDOMBrowser', () => {
     expect(result).toEqual('<span>Client Component</span>');
   });
 
+  // @gate enableUseHook
   it('should be able to complete after aborting and throw the reason client-side', async () => {
     const reportedErrors = [];
 
@@ -539,7 +524,7 @@ describe('ReactFlightDOMBrowser', () => {
     const root = ReactDOMClient.createRoot(container);
 
     function App({res}) {
-      return res.readRoot();
+      return use(res);
     }
 
     await act(async () => {
@@ -579,7 +564,7 @@ describe('ReactFlightDOMBrowser', () => {
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     function Client() {
-      return response.readRoot();
+      return use(response);
     }
 
     const container = document.createElement('div');
@@ -613,7 +598,7 @@ describe('ReactFlightDOMBrowser', () => {
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     function Client() {
-      return response.readRoot();
+      return use(response);
     }
 
     const container = document.createElement('div');
@@ -644,7 +629,7 @@ describe('ReactFlightDOMBrowser', () => {
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     function Client() {
-      return response.readRoot();
+      return use(response);
     }
 
     const container = document.createElement('div');
@@ -699,7 +684,7 @@ describe('ReactFlightDOMBrowser', () => {
     }
 
     function Client() {
-      return response.readRoot();
+      return use(response);
     }
 
     const container = document.createElement('div');
@@ -733,7 +718,7 @@ describe('ReactFlightDOMBrowser', () => {
     const response = ReactServerDOMReader.createFromReadableStream(stream);
 
     function Client() {
-      return response.readRoot();
+      return use(response);
     }
 
     const container = document.createElement('div');
diff --git a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
index cea39ac6f264..087b93479d42 100644
--- a/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
+++ b/packages/react-server-native-relay/src/ReactFlightNativeRelayClient.js
@@ -18,9 +18,10 @@ import {
   resolveSymbol,
   resolveError,
   close,
+  getRoot,
 } from 'react-client/src/ReactFlightClient';
 
-export {createResponse, close};
+export {createResponse, close, getRoot};
 
 export function resolveRow(response: Response, chunk: RowEncoding): void {
   if (chunk[0] === 'J') {
diff --git a/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js b/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
index 0d439154b537..35a2f6684c7c 100644
--- a/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
+++ b/packages/react-server-native-relay/src/__tests__/ReactFlightNativeRelay-test.internal.js
@@ -48,7 +48,16 @@ describe('ReactFlightNativeRelay', () => {
       ReactNativeFlightRelayClient.resolveRow(response, chunk);
     }
     ReactNativeFlightRelayClient.close(response);
-    const model = response.readRoot();
+    const promise = ReactNativeFlightRelayClient.getRoot(response);
+    let model;
+    let error;
+    promise.then(
+      m => (model = m),
+      e => (error = e),
+    );
+    if (error) {
+      throw error;
+    }
     return model;
   }
 

From c5d06fdc5daf0605a035b283207f349abb990d9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 14 Sep 2022 22:57:35 -0400
Subject: [PATCH 1592/1603] [Flight] Fix Webpack Chunk Loading (#25271)

* Fix acorn import

I'm not sure how this ever worked.

* Fix cache to wait for entries already added to the chunk cache

* Modernize API
---
 fixtures/flight/src/index.js                               | 7 +++----
 .../src/ReactFlightClientWebpackBundlerConfig.js           | 7 ++++---
 .../src/ReactFlightWebpackNodeLoader.js                    | 2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/fixtures/flight/src/index.js b/fixtures/flight/src/index.js
index b54a69ed7ba2..0c35d289c2be 100644
--- a/fixtures/flight/src/index.js
+++ b/fixtures/flight/src/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {Suspense} from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import ReactServerDOMReader from 'react-server-dom-webpack';
 
 let data = ReactServerDOMReader.createFromFetch(fetch('http://localhost:3001'));
@@ -9,9 +9,8 @@ function Content() {
   return React.experimental_use(data);
 }
 
-ReactDOM.render(
+ReactDOM.createRoot(document.getElementById('root')).render(
   <Suspense fallback={<h1>Loading...</h1>}>
     <Content />
-  </Suspense>,
-  document.getElementById('root')
+  </Suspense>
 );
diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index 5c47c7736d06..80f02f58b0ef 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -55,7 +55,7 @@ export function resolveModuleReference<T>(
 // 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> | Error> = new Map();
+const chunkCache: Map<string, null | Promise<any>> = new Map();
 const asyncModuleCache: Map<string, Thenable<any>> = new Map();
 
 // Start preloading the modules since we might need them soon.
@@ -72,9 +72,10 @@ export function preloadModule<T>(
       const thenable = __webpack_chunk_load__(chunkId);
       promises.push(thenable);
       const resolve = chunkCache.set.bind(chunkCache, chunkId, null);
-      const reject = chunkCache.set.bind(chunkCache, chunkId);
-      thenable.then(resolve, reject);
+      thenable.then(resolve);
       chunkCache.set(chunkId, thenable);
+    } else if (entry !== null) {
+      promises.push(entry);
     }
   }
   if (moduleData.async) {
diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
index 3182d1ab16cd..16efd31d7f7c 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeLoader.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {acorn} from 'acorn';
+import * as acorn from 'acorn';
 
 type ResolveContext = {
   conditions: Array<string>,

From 0b54e0047598e255bcbb7e3aff23c26d7382c54d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= <sebastian@calyptus.eu>
Date: Wed, 14 Sep 2022 23:22:27 -0400
Subject: [PATCH 1593/1603] Handle rejections to avoid uncaught rejections
 (#25272)

---
 .../src/ReactFlightClientWebpackBundlerConfig.js             | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
index 80f02f58b0ef..976f874444d2 100644
--- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
+++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js
@@ -58,6 +58,9 @@ export function resolveModuleReference<T>(
 const chunkCache: Map<string, null | Promise<any>> = new Map();
 const asyncModuleCache: Map<string, Thenable<any>> = new Map();
 
+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>(
@@ -72,7 +75,7 @@ export function preloadModule<T>(
       const thenable = __webpack_chunk_load__(chunkId);
       promises.push(thenable);
       const resolve = chunkCache.set.bind(chunkCache, chunkId, null);
-      thenable.then(resolve);
+      thenable.then(resolve, ignoreReject);
       chunkCache.set(chunkId, thenable);
     } else if (entry !== null) {
       promises.push(entry);

From fc16293f3f8fd4483f0c8f358d1f2187fbb07463 Mon Sep 17 00:00:00 2001
From: Jan Kassens <jkassens@fb.com>
Date: Thu, 15 Sep 2022 16:45:29 -0400
Subject: [PATCH 1594/1603] Flow: well_formed_exports for devtools (#25266)

---
 packages/react-devtools-shared/src/Logger.js  |   2 +-
 .../src/backend/agent.js                      | 163 +++++++++++-------
 .../src/backend/utils.js                      |   4 +-
 .../src/devtools/ContextMenu/ContextMenu.js   |   2 +-
 .../devtools/ContextMenu/ContextMenuItem.js   |   6 +-
 .../src/devtools/ContextMenu/Contexts.js      |  14 +-
 .../src/devtools/ProfilerStore.js             |  14 +-
 .../src/devtools/ProfilingCache.js            |  30 +---
 .../src/devtools/store.js                     |  37 ++--
 .../src/devtools/utils.js                     |   4 +-
 .../src/devtools/views/Button.js              |   2 +-
 .../devtools/views/Components/Components.js   |   4 +-
 .../views/Components/ExpandCollapseToggle.js  |   2 +-
 .../Components/FetchFileWithCachingContext.js |   6 +-
 .../HookNamesModuleLoaderContext.js           |   6 +-
 .../Components/InspectedElementContext.js     |   8 +-
 .../Components/InspectedElementHooksTree.js   |   5 +-
 .../src/devtools/views/Components/KeyValue.js |   2 +-
 .../Components/NativeStyleEditor/context.js   |   8 +-
 .../views/Components/OwnersListContext.js     |   8 +-
 .../devtools/views/Components/TreeContext.js  |   8 +-
 .../views/Components/TreeFocusedContext.js    |   4 +-
 .../Components/ViewElementSourceContext.js    |   6 +-
 .../views/Components/ViewSourceContext.js     |   6 +-
 .../views/ErrorBoundary/ErrorBoundary.js      |  23 ++-
 .../src/devtools/views/ModalDialog.js         |   3 +-
 .../Profiler/CommitFlamegraphListItem.js      |   7 +-
 .../views/Profiler/CommitRankedListItem.js    |   5 +-
 .../src/devtools/views/Profiler/Profiler.js   |   2 +-
 .../views/Profiler/ProfilerContext.js         |   6 +-
 .../views/Profiler/SnapshotCommitList.js      |   1 +
 .../views/Profiler/SnapshotCommitListItem.js  |   5 +-
 .../views/Settings/SettingsContext.js         |   8 +-
 .../views/Settings/SettingsModalContext.js    |  12 +-
 .../views/UnsupportedBridgeProtocolDialog.js  |   2 +-
 .../views/UnsupportedVersionDialog.js         |   2 +-
 .../src/devtools/views/context.js             |  35 ++--
 .../src/devtools/views/useThemeStyles.js      |   2 +-
 .../react-window/src/createGridComponent.js   |   2 +-
 .../react-window/src/createListComponent.js   |   2 +-
 .../app/InspectableElements/SimpleValues.js   |   4 +-
 .../src/app/ToDoList/ListItem.js              |   2 +-
 .../src/TimelineContext.js                    |   8 +-
 .../src/TimelineSearchContext.js              |   8 +-
 .../src/import-worker/index.js                |   3 +-
 .../src/utils/formatting.js                   |   2 +-
 .../src/view-base/VerticalScrollView.js       |   5 +-
 .../src/view-base/View.js                     |   4 +-
 .../src/view-base/resizable/ResizeBarView.js  |   4 +-
 scripts/flow/config/flowconfig                |   5 +
 50 files changed, 323 insertions(+), 190 deletions(-)

diff --git a/packages/react-devtools-shared/src/Logger.js b/packages/react-devtools-shared/src/Logger.js
index 0998f860a99c..f5736ff4d00f 100644
--- a/packages/react-devtools-shared/src/Logger.js
+++ b/packages/react-devtools-shared/src/Logger.js
@@ -74,7 +74,7 @@ export const logEvent: LogFunction =
       }
     : function logEvent() {};
 
-export const registerEventLogger =
+export const registerEventLogger: (logFunction: LogFunction) => () => void =
   enableLogger === true
     ? function registerEventLogger(logFunction: LogFunction): () => void {
         if (enableLogger) {
diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js
index 0d0fb5e81d7f..13394da2aea8 100644
--- a/packages/react-devtools-shared/src/backend/agent.js
+++ b/packages/react-devtools-shared/src/backend/agent.js
@@ -254,7 +254,9 @@ export default class Agent extends EventEmitter<{
     return this._rendererInterfaces;
   }
 
-  clearErrorsAndWarnings = ({rendererID}: {rendererID: RendererID}) => {
+  clearErrorsAndWarnings: ({rendererID: RendererID}) => void = ({
+    rendererID,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -263,7 +265,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  clearErrorsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+  clearErrorsForFiberID: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -272,7 +274,10 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  clearWarningsForFiberID = ({id, rendererID}: ElementAndRendererID) => {
+  clearWarningsForFiberID: ElementAndRendererID => void = ({
+    id,
+    rendererID,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -281,7 +286,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  copyElementPath = ({id, path, rendererID}: CopyElementParams) => {
+  copyElementPath: CopyElementParams => void = ({
+    id,
+    path,
+    rendererID,
+  }: CopyElementParams) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -290,7 +299,13 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  deletePath = ({hookID, id, path, rendererID, type}: DeletePathParams) => {
+  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}"`);
@@ -344,18 +359,18 @@ export default class Agent extends EventEmitter<{
     return null;
   }
 
-  getBackendVersion = () => {
+  getBackendVersion: () => void = () => {
     const version = process.env.DEVTOOLS_VERSION;
     if (version) {
       this._bridge.send('backendVersion', version);
     }
   };
 
-  getBridgeProtocol = () => {
+  getBridgeProtocol: () => void = () => {
     this._bridge.send('bridgeProtocol', currentBridgeProtocol);
   };
 
-  getProfilingData = ({rendererID}: {rendererID: RendererID}) => {
+  getProfilingData: ({rendererID: RendererID}) => void = ({rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
@@ -364,11 +379,11 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('profilingData', renderer.getProfilingData());
   };
 
-  getProfilingStatus = () => {
+  getProfilingStatus: () => void = () => {
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  getOwnersList = ({id, rendererID}: ElementAndRendererID) => {
+  getOwnersList: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -378,13 +393,13 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  inspectElement = ({
+  inspectElement: InspectElementParams => void = ({
     forceFullData,
     id,
     path,
     rendererID,
     requestID,
-  }: InspectElementParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -414,7 +429,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  logElementToConsole = ({id, rendererID}: ElementAndRendererID) => {
+  logElementToConsole: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -423,7 +438,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  overrideError = ({id, rendererID, forceError}: OverrideErrorParams) => {
+  overrideError: OverrideErrorParams => void = ({
+    id,
+    rendererID,
+    forceError,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -432,11 +451,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  overrideSuspense = ({
+  overrideSuspense: OverrideSuspenseParams => void = ({
     id,
     rendererID,
     forceFallback,
-  }: OverrideSuspenseParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -445,14 +464,14 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  overrideValueAtPath = ({
+  overrideValueAtPath: OverrideValueAtPathParams => void = ({
     hookID,
     id,
     path,
     rendererID,
     type,
     value,
-  }: OverrideValueAtPathParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -463,13 +482,13 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideContext = ({
+  overrideContext: SetInParams => void = ({
     id,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: SetInParams) => {
+  }) => {
     // 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) {
@@ -485,14 +504,14 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideHookState = ({
+  overrideHookState: OverrideHookParams => void = ({
     id,
     hookID,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: OverrideHookParams) => {
+  }) => {
     // 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) {
@@ -508,13 +527,13 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideProps = ({
+  overrideProps: SetInParams => void = ({
     id,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: SetInParams) => {
+  }) => {
     // 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) {
@@ -530,13 +549,13 @@ export default class Agent extends EventEmitter<{
 
   // Temporarily support older standalone front-ends by forwarding the older message types
   // to the new "overrideValueAtPath" command the backend is now listening to.
-  overrideState = ({
+  overrideState: SetInParams => void = ({
     id,
     path,
     rendererID,
     wasForwarded,
     value,
-  }: SetInParams) => {
+  }) => {
     // 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) {
@@ -550,7 +569,9 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  reloadAndProfile = (recordChangeDescriptions: boolean) => {
+  reloadAndProfile: (
+    recordChangeDescriptions: boolean,
+  ) => void = recordChangeDescriptions => {
     sessionStorageSetItem(SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, 'true');
     sessionStorageSetItem(
       SESSION_STORAGE_RECORD_CHANGE_DESCRIPTIONS_KEY,
@@ -563,14 +584,14 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('reloadAppForProfiling');
   };
 
-  renamePath = ({
+  renamePath: RenamePathParams => void = ({
     hookID,
     id,
     newPath,
     oldPath,
     rendererID,
     type,
-  }: RenamePathParams) => {
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -607,7 +628,9 @@ export default class Agent extends EventEmitter<{
     }
   }
 
-  setTraceUpdatesEnabled = (traceUpdatesEnabled: boolean) => {
+  setTraceUpdatesEnabled: (
+    traceUpdatesEnabled: boolean,
+  ) => void = traceUpdatesEnabled => {
     this._traceUpdatesEnabled = traceUpdatesEnabled;
 
     setTraceUpdatesEnabled(traceUpdatesEnabled);
@@ -620,7 +643,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  syncSelectionFromNativeElementsPanel = () => {
+  syncSelectionFromNativeElementsPanel: () => void = () => {
     const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
     if (target == null) {
       return;
@@ -628,12 +651,14 @@ export default class Agent extends EventEmitter<{
     this.selectNode(target);
   };
 
-  shutdown = () => {
+  shutdown: () => void = () => {
     // Clean up the overlay if visible, and associated events.
     this.emit('shutdown');
   };
 
-  startProfiling = (recordChangeDescriptions: boolean) => {
+  startProfiling: (
+    recordChangeDescriptions: boolean,
+  ) => void = recordChangeDescriptions => {
     this._recordChangeDescriptions = recordChangeDescriptions;
     this._isProfiling = true;
     for (const rendererID in this._rendererInterfaces) {
@@ -645,7 +670,7 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  stopProfiling = () => {
+  stopProfiling: () => void = () => {
     this._isProfiling = false;
     this._recordChangeDescriptions = false;
     for (const rendererID in this._rendererInterfaces) {
@@ -657,11 +682,16 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('profilingStatus', this._isProfiling);
   };
 
-  stopInspectingNative = (selected: boolean) => {
+  stopInspectingNative: (selected: boolean) => void = selected => {
     this._bridge.send('stopInspectingNative', selected);
   };
 
-  storeAsGlobal = ({count, id, path, rendererID}: StoreAsGlobalParams) => {
+  storeAsGlobal: StoreAsGlobalParams => void = ({
+    count,
+    id,
+    path,
+    rendererID,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -670,18 +700,18 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  updateConsolePatchSettings = ({
+  updateConsolePatchSettings: ({
+    appendComponentStack: boolean,
+    breakOnConsoleErrors: boolean,
+    browserTheme: BrowserTheme,
+    hideConsoleLogsInStrictMode: boolean,
+    showInlineWarningsAndErrors: boolean,
+  }) => void = ({
     appendComponentStack,
     breakOnConsoleErrors,
     showInlineWarningsAndErrors,
     hideConsoleLogsInStrictMode,
     browserTheme,
-  }: {
-    appendComponentStack: boolean,
-    breakOnConsoleErrors: boolean,
-    showInlineWarningsAndErrors: boolean,
-    hideConsoleLogsInStrictMode: boolean,
-    browserTheme: BrowserTheme,
   }) => {
     // If the frontend preference has change,
     // or in the case of React Native- if the backend is just finding out the preference-
@@ -696,7 +726,9 @@ export default class Agent extends EventEmitter<{
     });
   };
 
-  updateComponentFilters = (componentFilters: Array<ComponentFilter>) => {
+  updateComponentFilters: (
+    componentFilters: Array<ComponentFilter>,
+  ) => void = componentFilters => {
     for (const rendererID in this._rendererInterfaces) {
       const renderer = ((this._rendererInterfaces[
         (rendererID: any)
@@ -705,7 +737,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  viewAttributeSource = ({id, path, rendererID}: CopyElementParams) => {
+  viewAttributeSource: CopyElementParams => void = ({id, path, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -714,7 +746,7 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  viewElementSource = ({id, rendererID}: ElementAndRendererID) => {
+  viewElementSource: ElementAndRendererID => void = ({id, rendererID}) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
@@ -723,11 +755,11 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  onTraceUpdates = (nodes: Set<NativeType>) => {
+  onTraceUpdates: (nodes: Set<NativeType>) => void = nodes => {
     this.emit('traceUpdates', nodes);
   };
 
-  onFastRefreshScheduled = () => {
+  onFastRefreshScheduled: () => void = () => {
     if (__DEBUG__) {
       debug('onFastRefreshScheduled');
     }
@@ -735,7 +767,7 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('fastRefreshScheduled');
   };
 
-  onHookOperations = (operations: Array<number>) => {
+  onHookOperations: (operations: Array<number>) => void = operations => {
     if (__DEBUG__) {
       debug(
         'onHookOperations',
@@ -800,19 +832,22 @@ export default class Agent extends EventEmitter<{
     this._bridge.send('unsupportedRendererVersion', rendererID);
   }
 
-  _throttledPersistSelection = throttle((rendererID: number, id: number) => {
-    // This is throttled, so both renderer and selected ID
-    // might not be available by the time we read them.
-    // This is why we need the defensive checks here.
-    const renderer = this._rendererInterfaces[rendererID];
-    const path = renderer != null ? renderer.getPathForElement(id) : null;
-    if (path !== null) {
-      sessionStorageSetItem(
-        SESSION_STORAGE_LAST_SELECTION_KEY,
-        JSON.stringify(({rendererID, path}: PersistedSelection)),
-      );
-    } else {
-      sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);
-    }
-  }, 1000);
+  _throttledPersistSelection: any = throttle(
+    (rendererID: number, id: number) => {
+      // This is throttled, so both renderer and selected ID
+      // might not be available by the time we read them.
+      // This is why we need the defensive checks here.
+      const renderer = this._rendererInterfaces[rendererID];
+      const path = renderer != null ? renderer.getPathForElement(id) : null;
+      if (path !== null) {
+        sessionStorageSetItem(
+          SESSION_STORAGE_LAST_SELECTION_KEY,
+          JSON.stringify(({rendererID, path}: PersistedSelection)),
+        );
+      } else {
+        sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY);
+      }
+    },
+    1000,
+  );
 }
diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
index 5c4b1289855b..2b35ad0d5d26 100644
--- a/packages/react-devtools-shared/src/backend/utils.js
+++ b/packages/react-devtools-shared/src/backend/utils.js
@@ -119,7 +119,9 @@ export function copyWithSet(
   return updated;
 }
 
-export function getEffectDurations(root: Object) {
+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;
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
index e29a33bb3261..e167b28df6b9 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js
@@ -53,7 +53,7 @@ type Props = {
   id: string,
 };
 
-export default function ContextMenu({children, id}: Props) {
+export default function ContextMenu({children, id}: Props): React.Node {
   const {hideMenu, registerMenu} = useContext<RegistryContextType>(
     RegistryContext,
   );
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
index df313307b15f..29f49fe22438 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenuItem.js
@@ -21,7 +21,11 @@ type Props = {
   title: string,
 };
 
-export default function ContextMenuItem({children, onClick, title}: Props) {
+export default function ContextMenuItem({
+  children,
+  onClick,
+  title,
+}: Props): React.Node {
   const {hideMenu} = useContext<RegistryContextType>(RegistryContext);
 
   const handleClick = event => {
diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
index f8d310a02f72..2e30fc5c294f 100644
--- a/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
+++ b/packages/react-devtools-shared/src/devtools/ContextMenu/Contexts.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
 export type ShowFn = ({data: Object, pageX: number, pageY: number}) => void;
@@ -81,8 +83,10 @@ export type RegistryContextType = {
   registerMenu: typeof registerMenu,
 };
 
-export const RegistryContext = createContext<RegistryContextType>({
-  hideMenu,
-  showMenu,
-  registerMenu,
-});
+export const RegistryContext: ReactContext<RegistryContextType> = createContext<RegistryContextType>(
+  {
+    hideMenu,
+    showMenu,
+    registerMenu,
+  },
+);
diff --git a/packages/react-devtools-shared/src/devtools/ProfilerStore.js b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
index b74e958cefa7..979b73c79891 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilerStore.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilerStore.js
@@ -201,10 +201,10 @@ export default class ProfilerStore extends EventEmitter<{
     // We do this to avoid mismatches on e.g. CommitTreeBuilder that would cause errors.
   }
 
-  _takeProfilingSnapshotRecursive = (
+  _takeProfilingSnapshotRecursive: (
     elementID: number,
     profilingSnapshots: Map<number, SnapshotNode>,
-  ) => {
+  ) => void = (elementID, profilingSnapshots) => {
     const element = this._store.getElementByID(elementID);
     if (element !== null) {
       const snapshotNode: SnapshotNode = {
@@ -223,7 +223,7 @@ export default class ProfilerStore extends EventEmitter<{
     }
   };
 
-  onBridgeOperations = (operations: Array<number>) => {
+  onBridgeOperations: (operations: Array<number>) => void = operations => {
     // The first two values are always rendererID and rootID
     const rendererID = operations[0];
     const rootID = operations[1];
@@ -249,7 +249,9 @@ export default class ProfilerStore extends EventEmitter<{
     }
   };
 
-  onBridgeProfilingData = (dataBackend: ProfilingDataBackend) => {
+  onBridgeProfilingData: (
+    dataBackend: ProfilingDataBackend,
+  ) => void = dataBackend => {
     if (this._isProfiling) {
       // This should never happen, but if it does- ignore previous profiling data.
       return;
@@ -279,14 +281,14 @@ export default class ProfilerStore extends EventEmitter<{
     }
   };
 
-  onBridgeShutdown = () => {
+  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) => {
+  onProfilingStatus: (isProfiling: boolean) => void = isProfiling => {
     if (isProfiling) {
       this._dataBackends.splice(0);
       this._dataFrontend = null;
diff --git a/packages/react-devtools-shared/src/devtools/ProfilingCache.js b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
index 6384db8d1c62..ba4d3043247d 100644
--- a/packages/react-devtools-shared/src/devtools/ProfilingCache.js
+++ b/packages/react-devtools-shared/src/devtools/ProfilingCache.js
@@ -33,26 +33,20 @@ export default class ProfilingCache {
     this._profilerStore = profilerStore;
   }
 
-  getCommitTree = ({
-    commitIndex,
-    rootID,
-  }: {
+  getCommitTree: ({
     commitIndex: number,
     rootID: number,
-  }) =>
+  }) => CommitTree = ({commitIndex, rootID}) =>
     getCommitTree({
       commitIndex,
       profilerStore: this._profilerStore,
       rootID,
     });
 
-  getFiberCommits = ({
-    fiberID,
-    rootID,
-  }: {
+  getFiberCommits: ({
     fiberID: number,
     rootID: number,
-  }): Array<number> => {
+  }) => Array<number> = ({fiberID, rootID}) => {
     const cachedFiberCommits = this._fiberCommits.get(fiberID);
     if (cachedFiberCommits != null) {
       return cachedFiberCommits;
@@ -71,15 +65,11 @@ export default class ProfilingCache {
     return fiberCommits;
   };
 
-  getFlamegraphChartData = ({
-    commitIndex,
-    commitTree,
-    rootID,
-  }: {
+  getFlamegraphChartData: ({
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  }): FlamegraphChartData =>
+  }) => FlamegraphChartData = ({commitIndex, commitTree, rootID}) =>
     getFlamegraphChartData({
       commitIndex,
       commitTree,
@@ -87,15 +77,11 @@ export default class ProfilingCache {
       rootID,
     });
 
-  getRankedChartData = ({
-    commitIndex,
-    commitTree,
-    rootID,
-  }: {
+  getRankedChartData: ({
     commitIndex: number,
     commitTree: CommitTree,
     rootID: number,
-  }): RankedChartData =>
+  }) => RankedChartData = ({commitIndex, commitTree, rootID}) =>
     getRankedChartData({
       commitIndex,
       commitTree,
diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js
index b51597f43a52..11d4a9a5f1f3 100644
--- a/packages/react-devtools-shared/src/devtools/store.js
+++ b/packages/react-devtools-shared/src/devtools/store.js
@@ -828,10 +828,10 @@ export default class Store extends EventEmitter<{
     }
   }
 
-  _adjustParentTreeWeight = (
+  _adjustParentTreeWeight: (
     parentElement: Element | null,
     weightDelta: number,
-  ) => {
+  ) => void = (parentElement, weightDelta) => {
     let isInsideCollapsedSubTree = false;
 
     while (parentElement != null) {
@@ -869,20 +869,17 @@ export default class Store extends EventEmitter<{
     }
   }
 
-  onBridgeNativeStyleEditorSupported = ({
-    isSupported,
-    validAttributes,
-  }: {
+  onBridgeNativeStyleEditorSupported: ({
     isSupported: boolean,
     validAttributes: ?$ReadOnlyArray<string>,
-  }) => {
+  }) => void = ({isSupported, validAttributes}) => {
     this._isNativeStyleEditorSupported = isSupported;
     this._nativeStyleEditorValidAttributes = validAttributes || null;
 
     this.emit('supportsNativeStyleEditor');
   };
 
-  onBridgeOperations = (operations: Array<number>) => {
+  onBridgeOperations: (operations: Array<number>) => void = operations => {
     if (__DEBUG__) {
       console.groupCollapsed('onBridgeOperations');
       debug('onBridgeOperations', operations.join(','));
@@ -1328,15 +1325,15 @@ export default class Store extends EventEmitter<{
   // 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 = (
+  onBridgeOverrideComponentFilters: (
     componentFilters: Array<ComponentFilter>,
-  ) => {
+  ) => void = componentFilters => {
     this._componentFilters = componentFilters;
 
     setSavedComponentFilters(componentFilters);
   };
 
-  onBridgeShutdown = () => {
+  onBridgeShutdown: () => void = () => {
     if (__DEBUG__) {
       debug('onBridgeShutdown', 'unsubscribing from Bridge');
     }
@@ -1373,30 +1370,36 @@ export default class Store extends EventEmitter<{
     }
   };
 
-  onBackendStorageAPISupported = (isBackendStorageAPISupported: boolean) => {
+  onBackendStorageAPISupported: (
+    isBackendStorageAPISupported: boolean,
+  ) => void = isBackendStorageAPISupported => {
     this._isBackendStorageAPISupported = isBackendStorageAPISupported;
 
     this.emit('supportsReloadAndProfile');
   };
 
-  onBridgeSynchronousXHRSupported = (isSynchronousXHRSupported: boolean) => {
+  onBridgeSynchronousXHRSupported: (
+    isSynchronousXHRSupported: boolean,
+  ) => void = isSynchronousXHRSupported => {
     this._isSynchronousXHRSupported = isSynchronousXHRSupported;
 
     this.emit('supportsReloadAndProfile');
   };
 
-  onBridgeUnsupportedRendererVersion = () => {
+  onBridgeUnsupportedRendererVersion: () => void = () => {
     this._unsupportedRendererVersionDetected = true;
 
     this.emit('unsupportedRendererVersionDetected');
   };
 
-  onBridgeBackendVersion = (backendVersion: string) => {
+  onBridgeBackendVersion: (backendVersion: string) => void = backendVersion => {
     this._backendVersion = backendVersion;
     this.emit('backendVersion');
   };
 
-  onBridgeProtocol = (bridgeProtocol: BridgeProtocol) => {
+  onBridgeProtocol: (
+    bridgeProtocol: BridgeProtocol,
+  ) => void = bridgeProtocol => {
     if (this._onBridgeProtocolTimeoutID !== null) {
       clearTimeout(this._onBridgeProtocolTimeoutID);
       this._onBridgeProtocolTimeoutID = null;
@@ -1411,7 +1414,7 @@ export default class Store extends EventEmitter<{
     }
   };
 
-  onBridgeProtocolTimeout = () => {
+  onBridgeProtocolTimeout: () => void = () => {
     this._onBridgeProtocolTimeoutID = null;
 
     // If we timed out, that indicates the backend predates the bridge protocol,
diff --git a/packages/react-devtools-shared/src/devtools/utils.js b/packages/react-devtools-shared/src/devtools/utils.js
index 86c9dd6c8cef..1a4719f6df8f 100644
--- a/packages/react-devtools-shared/src/devtools/utils.js
+++ b/packages/react-devtools-shared/src/devtools/utils.js
@@ -149,7 +149,7 @@ export function printStore(
 // 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) {
+export function sanitizeForParse(value: any): any | string {
   if (typeof value === 'string') {
     if (
       value.length >= 2 &&
@@ -162,7 +162,7 @@ export function sanitizeForParse(value: any) {
   return value;
 }
 
-export function smartParse(value: any) {
+export function smartParse(value: any): any | void | number {
   switch (value) {
     case 'Infinity':
       return Infinity;
diff --git a/packages/react-devtools-shared/src/devtools/views/Button.js b/packages/react-devtools-shared/src/devtools/views/Button.js
index bdd84b57da43..a629e8d7b75a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Button.js
+++ b/packages/react-devtools-shared/src/devtools/views/Button.js
@@ -26,7 +26,7 @@ export default function Button({
   testName,
   title,
   ...rest
-}: Props) {
+}: Props): React.Node {
   let button = (
     // $FlowFixMe unsafe spread
     <button
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
index 81ab6296ddf6..27babd4b0ef7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js
@@ -258,4 +258,6 @@ function setResizeCSSVariable(
   }
 }
 
-export default portaledContent(Components);
+export default (portaledContent(
+  Components,
+): React$StatelessFunctionalComponent<{}>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
index 2cc19850d916..872e24f54cf8 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ExpandCollapseToggle.js
@@ -23,7 +23,7 @@ export default function ExpandCollapseToggle({
   disabled,
   isOpen,
   setIsOpen,
-}: ExpandCollapseToggleProps) {
+}: ExpandCollapseToggleProps): React.Node {
   return (
     <Button
       className={styles.ExpandCollapseToggle}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js b/packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
index 4647ebe9bf76..922748aa5a99 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/FetchFileWithCachingContext.js
@@ -7,12 +7,16 @@
  * @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 = createContext<Context>(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/HookNamesModuleLoaderContext.js b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
index c9a09e64c0e1..91701c260ddf 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/HookNamesModuleLoaderContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import type {Thenable} from 'shared/ReactTypes';
 
 import {createContext} from 'react';
@@ -16,7 +18,9 @@ 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 = createContext<Context>(null);
+const HookNamesModuleLoaderContext: ReactContext<Context> = createContext<Context>(
+  null,
+);
 HookNamesModuleLoaderContext.displayName = 'HookNamesModuleLoaderContext';
 
 export default HookNamesModuleLoaderContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 02444890df26..ccfb43fd5c8c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -55,7 +57,7 @@ type Context = {
   toggleParseHookNames: ToggleParseHookNames,
 };
 
-export const InspectedElementContext = createContext<Context>(
+export const InspectedElementContext: ReactContext<Context> = createContext<Context>(
   ((null: any): Context),
 );
 
@@ -65,7 +67,9 @@ export type Props = {
   children: ReactNodeList,
 };
 
-export function InspectedElementContextController({children}: Props) {
+export function InspectedElementContextController({
+  children,
+}: Props): React.Node {
   const {selectedElementID} = useContext(TreeStateContext);
   const fetchFileWithCaching = useContext(FetchFileWithCachingContext);
   const bridge = useContext(BridgeContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
index 346a23b8ff12..27e7ec69ce0b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js
@@ -417,5 +417,6 @@ function HookView({
   }
 }
 
-// $FlowFixMe
-export default React.memo(InspectedElementHooksTree);
+export default (React.memo(
+  InspectedElementHooksTree,
+): React.ComponentType<HookViewProps>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
index e1aab1a481ca..1da9920566d3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js
@@ -75,7 +75,7 @@ export default function KeyValue({
   pathRoot,
   store,
   value,
-}: KeyValueProps) {
+}: KeyValueProps): React.Node {
   const {readOnly: readOnlyGlobalFlag} = useContext(OptionsContext);
   canDeletePaths = !readOnlyGlobalFlag && canDeletePaths;
   canEditValues = !readOnlyGlobalFlag && canEditValues;
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
index ae91fbb94e7d..583ac1e70d83 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -41,7 +43,9 @@ type Context = {
   getStyleAndLayout: GetStyleAndLayout,
 };
 
-const NativeStyleContext = createContext<Context>(((null: any): Context));
+const NativeStyleContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 NativeStyleContext.displayName = 'NativeStyleContext';
 
 type ResolveFn = (styleAndLayout: StyleAndLayoutFrontend) => void;
@@ -79,7 +83,7 @@ type Props = {
   children: React$Node,
 };
 
-function NativeStyleContextController({children}: Props) {
+function NativeStyleContextController({children}: Props): React.Node {
   const bridge = useContext<FrontendBridge>(BridgeContext);
   const store = useContext<Store>(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
index cbd0497f544e..8d1f58ef28dc 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useCallback, useContext, useEffect} from 'react';
 import {createResource} from '../../cache';
@@ -23,7 +25,9 @@ import type {Resource, Thenable} from '../../cache';
 
 type Context = (id: number) => Array<SerializedElement> | null;
 
-const OwnersListContext = createContext<Context>(((null: any): Context));
+const OwnersListContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 OwnersListContext.displayName = 'OwnersListContext';
 
 type ResolveFn = (ownersList: Array<SerializedElement> | null) => void;
@@ -61,7 +65,7 @@ type Props = {
   children: React$Node,
 };
 
-function OwnersListContextController({children}: Props) {
+function OwnersListContextController({children}: Props): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
   const {ownerID} = useContext(TreeStateContext);
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
index e975bd16fab6..90208c5bae38 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js
@@ -24,6 +24,8 @@
 // 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,
@@ -148,12 +150,12 @@ type Action =
 
 export type DispatcherContext = (action: Action) => void;
 
-const TreeStateContext = createContext<StateContext>(
+const TreeStateContext: ReactContext<StateContext> = createContext<StateContext>(
   ((null: any): StateContext),
 );
 TreeStateContext.displayName = 'TreeStateContext';
 
-const TreeDispatcherContext = createContext<DispatcherContext>(
+const TreeDispatcherContext: ReactContext<DispatcherContext> = createContext<DispatcherContext>(
   ((null: any): DispatcherContext),
 );
 TreeDispatcherContext.displayName = 'TreeDispatcherContext';
@@ -835,7 +837,7 @@ function TreeContextController({
   defaultOwnerID,
   defaultSelectedElementID,
   defaultSelectedElementIndex,
-}: Props) {
+}: Props): React.Node {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
index 8461f97f1bb8..5abb01e3dc29 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeFocusedContext.js
@@ -7,8 +7,10 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
-const TreeFocusedContext = createContext<boolean>(false);
+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
index 10d20f4a2afd..93a68c35b643 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewElementSourceContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
 import type {
@@ -19,7 +21,9 @@ export type Context = {
   viewElementSourceFunction: ViewElementSource | null,
 };
 
-const ViewElementSourceContext = createContext<Context>(((null: any): Context));
+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/ViewSourceContext.js b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
index 8ea733440ea6..2f6390de14ba 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ViewSourceContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import {createContext} from 'react';
 
 import type {ViewUrlSource} from 'react-devtools-shared/src/devtools/views/DevTools';
@@ -15,7 +17,9 @@ export type Context = {
   viewUrlSourceFunction: ViewUrlSource | null,
 };
 
-const ViewSourceContext = createContext<Context>(((null: any): Context));
+const ViewSourceContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 ViewSourceContext.displayName = 'ViewSourceContext';
 
 export default ViewSourceContext;
diff --git a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
index 84077b3fa6b8..5fcfa3a79f89 100644
--- a/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
+++ b/packages/react-devtools-shared/src/devtools/views/ErrorBoundary/ErrorBoundary.js
@@ -56,7 +56,17 @@ const InitialState: State = {
 export default class ErrorBoundary extends Component<Props, State> {
   state: State = InitialState;
 
-  static getDerivedStateFromError(error: any) {
+  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 &&
@@ -112,7 +122,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     }
   }
 
-  render() {
+  render(): React.Node {
     const {canDismiss: canDismissProp, children} = this.props;
     const {
       callStack,
@@ -201,7 +211,10 @@ export default class ErrorBoundary extends Component<Props, State> {
     return children;
   }
 
-  _logError = (error: any, componentStack: string | null) => {
+  _logError: (error: any, componentStack: string | null) => void = (
+    error,
+    componentStack,
+  ) => {
     logEvent({
       event_name: 'error',
       error_message: error.message ?? null,
@@ -210,7 +223,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     });
   };
 
-  _dismissError = () => {
+  _dismissError: () => void = () => {
     const onBeforeDismissCallback = this.props.onBeforeDismissCallback;
     if (typeof onBeforeDismissCallback === 'function') {
       onBeforeDismissCallback();
@@ -219,7 +232,7 @@ export default class ErrorBoundary extends Component<Props, State> {
     this.setState(InitialState);
   };
 
-  _onStoreError = (error: Error) => {
+  _onStoreError: (error: Error) => void = error => {
     if (!this.state.hasError) {
       this._logError(error, null);
       this.setState({
diff --git a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
index 2bfbc0ec9031..c3563cb62fae 100644
--- a/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/ModalDialog.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
 import * as React from 'react';
 import {
   createContext,
@@ -55,7 +56,7 @@ type ModalDialogContextType = {
   dispatch: Dispatch,
 };
 
-const ModalDialogContext = createContext<ModalDialogContextType>(
+const ModalDialogContext: ReactContext<ModalDialogContextType> = createContext<ModalDialogContextType>(
   ((null: any): ModalDialogContextType),
 );
 ModalDialogContext.displayName = 'ModalDialogContext';
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index 35622433e37b..f30a294fd7e4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -25,7 +25,7 @@ type Props = {
   ...
 };
 
-function CommitFlamegraphListItem({data, index, style}: Props) {
+function CommitFlamegraphListItem({data, index, style}: Props): React.Node {
   const {
     chartData,
     onElementMouseEnter,
@@ -131,4 +131,7 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
   );
 }
 
-export default memo<Props>(CommitFlamegraphListItem, areEqual);
+export default (memo(
+  CommitFlamegraphListItem,
+  areEqual,
+): React.ComponentType<Props>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
index 6b92499eceb3..f0f0448872f1 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -80,4 +80,7 @@ function CommitRankedListItem({data, index, style}: Props) {
   );
 }
 
-export default memo<Props>(CommitRankedListItem, areEqual);
+export default (memo(
+  CommitRankedListItem,
+  areEqual,
+): React.ComponentType<Props>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
index 97b34809d7f9..84bb902f74d3 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js
@@ -196,4 +196,4 @@ const tabsWithTimeline = [
   },
 ];
 
-export default portaledContent(Profiler);
+export default (portaledContent(Profiler): React.ComponentType<{}>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
index 2d1b6d3fb63f..80230f5d2c6a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ProfilerContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useCallback, useContext, useMemo, useState} from 'react';
 import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';
@@ -67,7 +69,9 @@ export type Context = {
   selectFiber: (id: number | null, name: string | null) => void,
 };
 
-const ProfilerContext = createContext<Context>(((null: any): Context));
+const ProfilerContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 ProfilerContext.displayName = 'ProfilerContext';
 
 type StoreProfilingState = {
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
index ab967301e777..21926a12d8ac 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitList.js
@@ -99,6 +99,7 @@ function List({
   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);
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
index 02e753bb8199..648e666995c0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js
@@ -96,4 +96,7 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   );
 }
 
-export default memo<Props>(SnapshotCommitListItem, areEqual);
+export default (memo(
+  SnapshotCommitListItem,
+  areEqual,
+): React.ComponentType<Props>);
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
index 82c62fc96c79..517e68adc16a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -67,7 +69,9 @@ type Context = {
   setTraceUpdatesEnabled: (value: boolean) => void,
 };
 
-const SettingsContext = createContext<Context>(((null: any): Context));
+const SettingsContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 SettingsContext.displayName = 'SettingsContext';
 
 function useLocalStorageWithLog<T>(
@@ -100,7 +104,7 @@ function SettingsContextController({
   children,
   componentsPortalContainer,
   profilerPortalContainer,
-}: Props) {
+}: Props): React.Node {
   const bridge = useContext(BridgeContext);
 
   const [
diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
index 9821f25c05ca..ac6a00fc5918 100644
--- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModalContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useMemo, useState} from 'react';
 
@@ -19,10 +21,16 @@ type Context = {
   ...
 };
 
-const SettingsModalContext = createContext<Context>(((null: any): Context));
+const SettingsModalContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 SettingsModalContext.displayName = 'SettingsModalContext';
 
-function SettingsModalContextController({children}: {children: React$Node}) {
+function SettingsModalContextController({
+  children,
+}: {
+  children: React$Node,
+}): React.Node {
   const [isModalShowing, setIsModalShowing] = useState<boolean>(false);
 
   const value = useMemo(() => ({isModalShowing, setIsModalShowing}), [
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
index 07062e905d3b..c9975502d36a 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedBridgeProtocolDialog.js
@@ -24,7 +24,7 @@ const INSTRUCTIONS_FB_URL =
   'https://fb.me/devtools-unsupported-bridge-protocol';
 const MODAL_DIALOG_ID = 'UnsupportedBridgeProtocolDialog';
 
-export default function UnsupportedBridgeProtocolDialog(_: {}) {
+export default function UnsupportedBridgeProtocolDialog(_: {}): null {
   const {dialogs, dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
 
diff --git a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
index 0cd383430bd7..6b35e3ca168c 100644
--- a/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
+++ b/packages/react-devtools-shared/src/devtools/views/UnsupportedVersionDialog.js
@@ -18,7 +18,7 @@ import styles from './UnsupportedVersionDialog.css';
 
 type DAILOG_STATE = 'dialog-not-shown' | 'show-dialog' | 'dialog-shown';
 
-export default function UnsupportedVersionDialog(_: {}) {
+export default function UnsupportedVersionDialog(_: {}): null {
   const {dispatch} = useContext(ModalDialogContext);
   const store = useContext(StoreContext);
   const [state, setState] = useState<DAILOG_STATE>('dialog-not-shown');
diff --git a/packages/react-devtools-shared/src/devtools/views/context.js b/packages/react-devtools-shared/src/devtools/views/context.js
index 6f8f8ae4965e..edba8777b7f5 100644
--- a/packages/react-devtools-shared/src/devtools/views/context.js
+++ b/packages/react-devtools-shared/src/devtools/views/context.js
@@ -7,18 +7,21 @@
  * @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 = createContext<FrontendBridge>(
+export const BridgeContext: ReactContext<FrontendBridge> = createContext<FrontendBridge>(
   ((null: any): FrontendBridge),
 );
 BridgeContext.displayName = 'BridgeContext';
 
-export const StoreContext = createContext<Store>(((null: any): Store));
+export const StoreContext: ReactContext<Store> = createContext<Store>(
+  ((null: any): Store),
+);
 StoreContext.displayName = 'StoreContext';
 
 export type ContextMenuContextType = {
@@ -26,10 +29,12 @@ export type ContextMenuContextType = {
   viewAttributeSourceFunction: ViewAttributeSource | null,
 };
 
-export const ContextMenuContext = createContext<ContextMenuContextType>({
-  isEnabledForInspectedElement: false,
-  viewAttributeSourceFunction: null,
-});
+export const ContextMenuContext: ReactContext<ContextMenuContextType> = createContext<ContextMenuContextType>(
+  {
+    isEnabledForInspectedElement: false,
+    viewAttributeSourceFunction: null,
+  },
+);
 ContextMenuContext.displayName = 'ContextMenuContext';
 
 export type OptionsContextType = {
@@ -41,11 +46,13 @@ export type OptionsContextType = {
   hideViewSourceAction: boolean,
 };
 
-export const OptionsContext = createContext<OptionsContextType>({
-  readOnly: false,
-  hideSettings: false,
-  hideToggleErrorAction: false,
-  hideToggleSuspenseAction: false,
-  hideLogAction: false,
-  hideViewSourceAction: false,
-});
+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/useThemeStyles.js b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
index 009cf1a50d57..ee779e96d68b 100644
--- a/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
+++ b/packages/react-devtools-shared/src/devtools/views/useThemeStyles.js
@@ -11,7 +11,7 @@ import {useContext, useMemo} from 'react';
 import {SettingsContext} from './Settings/SettingsContext';
 import {THEME_STYLES} from '../../constants';
 
-const useThemeStyles = () => {
+const useThemeStyles = (): any => {
   const {theme, displayDensity, browserTheme} = useContext(SettingsContext);
 
   const style = useMemo(
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
index 8f00a7929dc2..d1da857a5496 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
@@ -191,7 +191,7 @@ export default function createGridComponent({
   initInstanceProps: InitInstanceProps,
   shouldResetStyleCacheOnItemSizeChange: boolean,
   validateProps: ValidateProps,
-|}) {
+|}): React.ComponentType<Props<mixed>> {
   return class Grid<T> extends PureComponent<Props<T>, State> {
     _instanceProps: any = initInstanceProps(this.props, this);
     _resetIsScrollingTimeoutId: TimeoutID | null = null;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
index 6fb6f2d540a2..11ff59317c5f 100644
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
+++ b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
@@ -156,7 +156,7 @@ export default function createListComponent({
   initInstanceProps: InitInstanceProps,
   shouldResetStyleCacheOnItemSizeChange: boolean,
   validateProps: ValidateProps,
-|}) {
+|}): React.ComponentType<Props<$FlowFixMe>> {
   return class List<T> extends PureComponent<Props<T>, State> {
     _instanceProps: any = initInstanceProps(this.props, this);
     _outerRef: ?HTMLDivElement;
diff --git a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
index 6623e53d03c3..73c93598813e 100644
--- a/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
+++ b/packages/react-devtools-shell/src/app/InspectableElements/SimpleValues.js
@@ -13,9 +13,9 @@ import {Component} from 'react';
 function noop() {}
 
 export default class SimpleValues extends Component {
-  anonymousFunction = () => {};
+  anonymousFunction: () => void = () => {};
 
-  render() {
+  render(): React.Node {
     return (
       <ChildComponent
         string="abc"
diff --git a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
index a382f639a1b2..f143805458ef 100644
--- a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
+++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js
@@ -46,4 +46,4 @@ function ListItem({item, removeItem, toggleItem}: Props) {
   );
 }
 
-export default memo<Props>(ListItem);
+export default (memo(ListItem): React.ComponentType<Props>);
diff --git a/packages/react-devtools-timeline/src/TimelineContext.js b/packages/react-devtools-timeline/src/TimelineContext.js
index 3032e5594772..7ccc6fb97245 100644
--- a/packages/react-devtools-timeline/src/TimelineContext.js
+++ b/packages/react-devtools-timeline/src/TimelineContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {
   createContext,
@@ -38,14 +40,16 @@ export type Context = {
   selectedEvent: ReactEventInfo,
 };
 
-const TimelineContext = createContext<Context>(((null: any): Context));
+const TimelineContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 TimelineContext.displayName = 'TimelineContext';
 
 type Props = {
   children: React$Node,
 };
 
-function TimelineContextController({children}: Props) {
+function TimelineContextController({children}: Props): React.Node {
   const searchInputContainerRef = useRef(null);
   const [file, setFile] = useState<string | null>(null);
 
diff --git a/packages/react-devtools-timeline/src/TimelineSearchContext.js b/packages/react-devtools-timeline/src/TimelineSearchContext.js
index 2535b723b4a1..4e8154428937 100644
--- a/packages/react-devtools-timeline/src/TimelineSearchContext.js
+++ b/packages/react-devtools-timeline/src/TimelineSearchContext.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ReactContext} from 'shared/ReactTypes';
+
 import * as React from 'react';
 import {createContext, useMemo, useReducer} from 'react';
 
@@ -122,7 +124,9 @@ export type Context = {
   searchText: string,
 };
 
-const TimelineSearchContext = createContext<Context>(((null: any): Context));
+const TimelineSearchContext: ReactContext<Context> = createContext<Context>(
+  ((null: any): Context),
+);
 TimelineSearchContext.displayName = 'TimelineSearchContext';
 
 type Props = {
@@ -135,7 +139,7 @@ function TimelineSearchContextController({
   children,
   profilerData,
   viewState,
-}: Props) {
+}: Props): React.Node {
   const [state, dispatch] = useReducer<State, State, Action>(reducer, {
     profilerData,
     searchIndex: -1,
diff --git a/packages/react-devtools-timeline/src/import-worker/index.js b/packages/react-devtools-timeline/src/import-worker/index.js
index ef9a239c6dbd..477bc26b9502 100644
--- a/packages/react-devtools-timeline/src/import-worker/index.js
+++ b/packages/react-devtools-timeline/src/import-worker/index.js
@@ -28,4 +28,5 @@ export type ImportWorkerOutputData =
 
 export type importFileFunction = (file: File) => ImportWorkerOutputData;
 
-export const importFile = (file: File) => workerizedImportFile.importFile(file);
+export const importFile = (file: File): Promise<ImportWorkerOutputData> =>
+  workerizedImportFile.importFile(file);
diff --git a/packages/react-devtools-timeline/src/utils/formatting.js b/packages/react-devtools-timeline/src/utils/formatting.js
index ec51bfbe3084..35c4226654e8 100644
--- a/packages/react-devtools-timeline/src/utils/formatting.js
+++ b/packages/react-devtools-timeline/src/utils/formatting.js
@@ -20,7 +20,7 @@ export function formatTimestamp(ms: number): string {
   );
 }
 
-export function formatDuration(ms: number) {
+export function formatDuration(ms: number): string {
   return prettyMilliseconds(ms, {millisecondsDecimalDigits: 1});
 }
 
diff --git a/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js b/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
index a4ef5df8d7b5..f09a5de8c586 100644
--- a/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
+++ b/packages/react-devtools-timeline/src/view-base/VerticalScrollView.js
@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Size, IntrinsicSize} from './geometry';
 import type {
   Interaction,
   MouseDownInteraction,
@@ -78,7 +79,7 @@ export class VerticalScrollView extends View {
     this._setScrollState(this._scrollState);
   }
 
-  desiredSize() {
+  desiredSize(): Size | IntrinsicSize {
     return this._contentView.desiredSize();
   }
 
@@ -195,7 +196,7 @@ export class VerticalScrollView extends View {
     }
   }
 
-  _handleMouseMove(interaction: MouseMoveInteraction) {
+  _handleMouseMove(interaction: MouseMoveInteraction): void | boolean {
     if (!this._isPanning) {
       return;
     }
diff --git a/packages/react-devtools-timeline/src/view-base/View.js b/packages/react-devtools-timeline/src/view-base/View.js
index 3e2a5a06f1cd..9ed637182b18 100644
--- a/packages/react-devtools-timeline/src/view-base/View.js
+++ b/packages/react-devtools-timeline/src/view-base/View.js
@@ -55,7 +55,7 @@ export class View {
    * @see setNeedsDisplay
    * @private
    */
-  _needsDisplay = true;
+  _needsDisplay: boolean = true;
 
   /**
    * Whether the hierarchy below this view has subviews that need display.
@@ -65,7 +65,7 @@ export class View {
    * @see setSubviewsNeedDisplay
    * @private
    */
-  _subviewsNeedDisplay = false;
+  _subviewsNeedDisplay: boolean = false;
 
   constructor(
     surface: Surface,
diff --git a/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js b/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
index d4924edf6d31..71239d7e04a3 100644
--- a/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
+++ b/packages/react-devtools-timeline/src/view-base/resizable/ResizeBarView.js
@@ -13,7 +13,7 @@ import type {
   MouseMoveInteraction,
   MouseUpInteraction,
 } from '../useCanvasInteraction';
-import type {Rect} from '../geometry';
+import type {Rect, Size} from '../geometry';
 import type {ViewRefs} from '../Surface';
 
 import {BORDER_SIZE, COLORS} from '../../content-views/constants';
@@ -42,7 +42,7 @@ export class ResizeBarView extends View {
     this._label = label;
   }
 
-  desiredSize() {
+  desiredSize(): Size {
     return this.showLabel
       ? {height: RESIZE_BAR_WITH_LABEL_HEIGHT, width: 0}
       : {height: RESIZE_BAR_HEIGHT, width: 0};
diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
index f4f6921040b8..5c241ef735ce 100644
--- a/scripts/flow/config/flowconfig
+++ b/scripts/flow/config/flowconfig
@@ -47,6 +47,11 @@ exact_by_default=true
 munge_underscores=false
 types_first=false
 
+well_formed_exports=true
+well_formed_exports.includes=<PROJECT_ROOT>/packages/react-devtools-shared
+well_formed_exports.includes=<PROJECT_ROOT>/packages/react-devtools-shell
+well_formed_exports.includes=<PROJECT_ROOT>/packages/react-devtools-timeline
+
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%
 

From e7fc04b2970197cb953833aa15597cbc9fe38f2e Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Thu, 15 Sep 2022 15:31:31 -0700
Subject: [PATCH 1595/1603] [react-dom] Reorganize react-dom internals to match
 react (#25277)

* reorganize react-dom internals to match react

* refactor and make forks work for flow and internal imports

* flew too close to the sun

* typo
---
 packages/react-dom/index.classic.fb.js        |  7 ++--
 packages/react-dom/index.experimental.js      |  2 +-
 packages/react-dom/index.js                   |  2 +-
 packages/react-dom/index.modern.fb.js         |  2 +-
 packages/react-dom/index.stable.js            |  2 +-
 .../react-dom/src/ReactDOMSharedInternals.js  | 35 +++++++++++++++++++
 packages/react-dom/src/client/ReactDOM.js     | 29 ++-------------
 packages/shared/ReactDOMSharedInternals.js    | 15 ++++++++
 scripts/jest/setupHostConfigs.js              |  6 ++++
 scripts/rollup/forks.js                       | 27 ++++++++++++++
 scripts/shared/inlinedHostConfigs.js          |  3 ++
 11 files changed, 97 insertions(+), 33 deletions(-)
 create mode 100644 packages/react-dom/src/ReactDOMSharedInternals.js
 create mode 100644 packages/shared/ReactDOMSharedInternals.js

diff --git a/packages/react-dom/index.classic.fb.js b/packages/react-dom/index.classic.fb.js
index 93cc883d0cde..fddf873d48b6 100644
--- a/packages/react-dom/index.classic.fb.js
+++ b/packages/react-dom/index.classic.fb.js
@@ -9,17 +9,16 @@
 
 import {isEnabled} from './src/events/ReactDOMEventListener';
 
-import {__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/client/ReactDOM';
+import Internals from './src/ReactDOMSharedInternals';
 
 // For classic WWW builds, include a few internals that are already in use.
-Object.assign((__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: any), {
+Object.assign((Internals: any), {
   ReactBrowserEventEmitter: {
     isEnabled,
   },
 });
 
 export {
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
   hydrateRoot,
@@ -36,3 +35,5 @@ export {
   unstable_runWithPriority, // DO NOT USE: Temporarily exposed to migrate off of Scheduler.runWithPriority.
   version,
 } from './src/client/ReactDOM';
+
+export {Internals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED};
diff --git a/packages/react-dom/index.experimental.js b/packages/react-dom/index.experimental.js
index 44f7dcfe0b1e..11cb1a262f4d 100644
--- a/packages/react-dom/index.experimental.js
+++ b/packages/react-dom/index.experimental.js
@@ -7,8 +7,8 @@
  * @flow
  */
 
+export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternals';
 export {
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
   hydrateRoot,
diff --git a/packages/react-dom/index.js b/packages/react-dom/index.js
index 18dfcf43ca9d..905754e09297 100644
--- a/packages/react-dom/index.js
+++ b/packages/react-dom/index.js
@@ -9,8 +9,8 @@
 
 // Export all exports so that they're available in tests.
 // We can't use export * from in Flow for some reason.
+export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternals';
 export {
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
   hydrateRoot,
diff --git a/packages/react-dom/index.modern.fb.js b/packages/react-dom/index.modern.fb.js
index 866a5ebe31f6..3368a3f9c9eb 100644
--- a/packages/react-dom/index.modern.fb.js
+++ b/packages/react-dom/index.modern.fb.js
@@ -7,8 +7,8 @@
  * @flow
  */
 
+export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternals';
 export {
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
   hydrateRoot,
diff --git a/packages/react-dom/index.stable.js b/packages/react-dom/index.stable.js
index 7d8b01be53e3..c0a01d666231 100644
--- a/packages/react-dom/index.stable.js
+++ b/packages/react-dom/index.stable.js
@@ -7,8 +7,8 @@
  * @flow
  */
 
+export {default as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED} from './src/ReactDOMSharedInternals';
 export {
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   createPortal,
   createRoot,
   hydrateRoot,
diff --git a/packages/react-dom/src/ReactDOMSharedInternals.js b/packages/react-dom/src/ReactDOMSharedInternals.js
new file mode 100644
index 000000000000..6b4525cffca2
--- /dev/null
+++ b/packages/react-dom/src/ReactDOMSharedInternals.js
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+import {batchedUpdates} from 'react-reconciler/src/ReactFiberReconciler';
+import {
+  enqueueStateRestore,
+  restoreStateIfNeeded,
+} from './events/ReactDOMControlledComponent';
+import {
+  getInstanceFromNode,
+  getNodeFromInstance,
+  getFiberCurrentPropsFromNode,
+} from './client/ReactDOMComponentTree';
+
+const Internals = {
+  usingClientEntryPoint: false,
+  // Keep in sync with ReactTestUtils.js.
+  // This is an array for better minification.
+  Events: [
+    getInstanceFromNode,
+    getNodeFromInstance,
+    getFiberCurrentPropsFromNode,
+    enqueueStateRestore,
+    restoreStateIfNeeded,
+    batchedUpdates,
+  ],
+};
+
+export default Internals;
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
index 406cda4f266a..bfd300f7b4c3 100644
--- a/packages/react-dom/src/client/ReactDOM.js
+++ b/packages/react-dom/src/client/ReactDOM.js
@@ -50,12 +50,7 @@ import {canUseDOM} from 'shared/ExecutionEnvironment';
 import ReactVersion from 'shared/ReactVersion';
 import {enableNewReconciler} from 'shared/ReactFeatureFlags';
 
-import {
-  getInstanceFromNode,
-  getNodeFromInstance,
-  getFiberCurrentPropsFromNode,
-  getClosestInstanceFromNode,
-} from './ReactDOMComponentTree';
+import {getClosestInstanceFromNode} from './ReactDOMComponentTree';
 import {restoreControlledState} from './ReactDOMComponent';
 import {
   setAttemptSynchronousHydration,
@@ -66,11 +61,8 @@ import {
   setAttemptHydrationAtPriority,
 } from '../events/ReactDOMEventReplaying';
 import {setBatchingImplementation} from '../events/ReactDOMUpdateBatching';
-import {
-  setRestoreImplementation,
-  enqueueStateRestore,
-  restoreStateIfNeeded,
-} from '../events/ReactDOMControlledComponent';
+import {setRestoreImplementation} from '../events/ReactDOMControlledComponent';
+import Internals from '../ReactDOMSharedInternals';
 
 setAttemptSynchronousHydration(attemptSynchronousHydration);
 setAttemptDiscreteHydration(attemptDiscreteHydration);
@@ -133,20 +125,6 @@ function renderSubtreeIntoContainer(
   );
 }
 
-const Internals = {
-  usingClientEntryPoint: false,
-  // Keep in sync with ReactTestUtils.js.
-  // This is an array for better minification.
-  Events: [
-    getInstanceFromNode,
-    getNodeFromInstance,
-    getFiberCurrentPropsFromNode,
-    enqueueStateRestore,
-    restoreStateIfNeeded,
-    batchedUpdates,
-  ],
-};
-
 function createRoot(
   container: Element | Document | DocumentFragment,
   options?: CreateRootOptions,
@@ -201,7 +179,6 @@ export {
   createPortal,
   batchedUpdates as unstable_batchedUpdates,
   flushSync,
-  Internals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
   ReactVersion as version,
   // Disabled behind disableLegacyReactDOMAPIs
   findDOMNode,
diff --git a/packages/shared/ReactDOMSharedInternals.js b/packages/shared/ReactDOMSharedInternals.js
new file mode 100644
index 000000000000..4ba19d407f7f
--- /dev/null
+++ b/packages/shared/ReactDOMSharedInternals.js
@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) Facebook, Inc. and 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 ReactDOM from 'react-dom';
+
+const ReactDOMSharedInternals =
+  ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+
+export default ReactDOMSharedInternals;
diff --git a/scripts/jest/setupHostConfigs.js b/scripts/jest/setupHostConfigs.js
index 1dc72761e03b..b82367f2f493 100644
--- a/scripts/jest/setupHostConfigs.js
+++ b/scripts/jest/setupHostConfigs.js
@@ -148,4 +148,10 @@ jest.mock('shared/ReactSharedInternals', () =>
   jest.requireActual('react/src/ReactSharedInternals')
 );
 
+// 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/rollup/forks.js b/scripts/rollup/forks.js
index d45c41a74268..34345c80a135 100644
--- a/scripts/rollup/forks.js
+++ b/scripts/rollup/forks.js
@@ -67,6 +67,33 @@ const forks = Object.freeze({
     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') {
+      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) {
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index 458c5410eaf1..977a1cae2e6b 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -36,6 +36,7 @@ module.exports = [
       'react-devtools-shell',
       'react-devtools-shared',
       'react-interactions',
+      'shared/ReactDOMSharedInternals',
     ],
     isFlowTyped: true,
     isServerSupported: true,
@@ -66,6 +67,7 @@ module.exports = [
       'react-devtools-core',
       'react-devtools-shell',
       'react-devtools-shared',
+      'shared/ReactDOMSharedInternals',
     ],
     isFlowTyped: true,
     isServerSupported: true,
@@ -85,6 +87,7 @@ module.exports = [
       'react-dom/src/server/ReactDOMLegacyServerNode.classic.fb.js',
       'react-dom/src/server/ReactDOMLegacyServerNodeStream.js', // file indirection to support partial forking of some methods in *Node
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'shared/ReactDOMSharedInternals',
     ],
     isFlowTyped: true,
     isServerSupported: true,

From 8951c5fc9dc8445747706605860421eed4b11296 Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Thu, 15 Sep 2022 18:12:46 -0700
Subject: [PATCH 1596/1603] [DevTools][BE] Read username using gh in release
 script (#25270)

* [DevTools][BE] Read username using gh in release script

* better regex & fix lint
---
 scripts/devtools/prepare-release.js | 30 +++++++++++++++++++++++------
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/scripts/devtools/prepare-release.js b/scripts/devtools/prepare-release.js
index fc5a7c893b7d..6b1f67f533b7 100755
--- a/scripts/devtools/prepare-release.js
+++ b/scripts/devtools/prepare-release.js
@@ -99,28 +99,46 @@ 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*
   `);
-  rawLog.split('\n').forEach(line => {
-    line = line.replace('[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];
-
-      formattedLog += `\n* ${title} ([USERNAME](https://github.com/USERNAME) in [#${pr}](${PULL_REQUEST_BASE_URL}${pr}))`;
+      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 = [];
 

From 6e3bc8a2e82d6fb627315b97f946f4ff2ee367de Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Fri, 16 Sep 2022 11:24:03 -0700
Subject: [PATCH 1597/1603] [DevTools] Check if Proxy exists before creating
 DispatcherProxy (#25278)

---
 packages/react-debug-tools/src/ReactDebugHooks.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
index a09da97f90d7..6409647772ef 100644
--- a/packages/react-debug-tools/src/ReactDebugHooks.js
+++ b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -367,7 +367,11 @@ const DispatcherProxyHandler = {
   },
 };
 
-const DispatcherProxy = new Proxy(Dispatcher, DispatcherProxyHandler);
+// `Proxy` may not exist on some platforms
+const DispatcherProxy =
+  typeof Proxy === 'undefined'
+    ? Dispatcher
+    : new Proxy(Dispatcher, DispatcherProxyHandler);
 
 // Inspect
 

From e099e1dc0eeaef7ef1cb2b6430533b2e962f80a9 Mon Sep 17 00:00:00 2001
From: Tianyu Yao <skyyao@fb.com>
Date: Fri, 16 Sep 2022 12:35:00 -0700
Subject: [PATCH 1598/1603] React DevTools 4.25.0 -> 4.26.0 (#25283)

---
 packages/react-devtools-core/package.json             |  2 +-
 .../react-devtools-extensions/chrome/manifest.json    |  4 ++--
 packages/react-devtools-extensions/edge/manifest.json |  4 ++--
 .../react-devtools-extensions/firefox/manifest.json   |  2 +-
 packages/react-devtools-inline/package.json           |  2 +-
 packages/react-devtools-timeline/package.json         |  2 +-
 packages/react-devtools/CHANGELOG.md                  | 11 +++++++++++
 packages/react-devtools/package.json                  |  4 ++--
 8 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json
index 2ccfa2db38a0..57596d8d1995 100644
--- a/packages/react-devtools-core/package.json
+++ b/packages/react-devtools-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-extensions/chrome/manifest.json b/packages/react-devtools-extensions/chrome/manifest.json
index ce0f47c0486b..97f43e4097f4 100644
--- a/packages/react-devtools-extensions/chrome/manifest.json
+++ b/packages/react-devtools-extensions/chrome/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.25.0",
-  "version_name": "4.25.0",
+  "version": "4.26.0",
+  "version_name": "4.26.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
index 534f4664eed4..a02cef28b4ac 100644
--- a/packages/react-devtools-extensions/edge/manifest.json
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
-  "version": "4.25.0",
-  "version_name": "4.25.0",
+  "version": "4.26.0",
+  "version_name": "4.26.0",
   "minimum_chrome_version": "60",
   "icons": {
     "16": "icons/16-production.png",
diff --git a/packages/react-devtools-extensions/firefox/manifest.json b/packages/react-devtools-extensions/firefox/manifest.json
index 954bfc9fd70d..6496e98c25f6 100644
--- a/packages/react-devtools-extensions/firefox/manifest.json
+++ b/packages/react-devtools-extensions/firefox/manifest.json
@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "applications": {
     "gecko": {
       "id": "@react-devtools",
diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json
index 44edd5c3080a..6d097904d2f4 100644
--- a/packages/react-devtools-inline/package.json
+++ b/packages/react-devtools-inline/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index c21f038bb680..1b1972635ff5 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "react-devtools-timeline",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "license": "MIT",
   "dependencies": {
     "@elg/speedscope": "1.9.0-a6f84db",
diff --git a/packages/react-devtools/CHANGELOG.md b/packages/react-devtools/CHANGELOG.md
index 433c782b2ece..69fb1586ce75 100644
--- a/packages/react-devtools/CHANGELOG.md
+++ b/packages/react-devtools/CHANGELOG.md
@@ -4,6 +4,17 @@
 
 ---
 
+### 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
 
diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json
index ac35f477877d..bc477efe10b5 100644
--- a/packages/react-devtools/package.json
+++ b/packages/react-devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.25.0",
+  "version": "4.26.0",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^11.1.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.3",
-    "react-devtools-core": "4.25.0",
+    "react-devtools-core": "4.26.0",
     "update-notifier": "^2.1.0"
   }
 }

From 3d615fc14aff7586a2080d7da182497ba7ec1bec Mon Sep 17 00:00:00 2001
From: Victoria Graf <69855483+Vicachu42@users.noreply.github.com>
Date: Mon, 19 Sep 2022 16:04:03 +0200
Subject: [PATCH 1599/1603] Grammar. Removed doubles of the word "the".
 (#25295)

---
 .../react-devtools-shared/src/__tests__/preprocessData-test.js  | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.new.js         | 2 +-
 packages/react-reconciler/src/ReactFiberWorkLoop.old.js         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
index d6d49d28c6ca..22fd7ef30ea5 100644
--- a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
+++ b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -1926,7 +1926,7 @@ describe('Timeline profiler', () => {
   });
 
   // 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 the lane-to-label matches the subsequent events/measures.
+  // That's okay; the important thing is the lane-to-label matches the subsequent events/measures.
   describe('DevTools hook (in memory)', () => {
     let store;
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index dc5efade1120..c356ed4f38e5 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1983,7 +1983,7 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       handleThrow(root, thrownValue);
       if (isTrackingSuspendedThenable()) {
         // If this fiber just suspended, it's possible the data is already
-        // cached. Yield to the the main thread to give it a chance to ping. If
+        // cached. Yield to the main thread to give it a chance to ping. If
         // it does, we can retry immediately without unwinding the stack.
         break;
       }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index d8d29c496495..6250330b6e95 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1983,7 +1983,7 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
       handleThrow(root, thrownValue);
       if (isTrackingSuspendedThenable()) {
         // If this fiber just suspended, it's possible the data is already
-        // cached. Yield to the the main thread to give it a chance to ping. If
+        // cached. Yield to the main thread to give it a chance to ping. If
         // it does, we can retry immediately without unwinding the stack.
         break;
       }

From b2748907c3cffb226447417957f2608a7c60c27d Mon Sep 17 00:00:00 2001
From: Brandon Chan <brandon.nic99@gmail.com>
Date: Mon, 19 Sep 2022 11:13:38 -0600
Subject: [PATCH 1600/1603] Updated the URL link for serve (#25296)

---
 packages/react-devtools/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-devtools/README.md b/packages/react-devtools/README.md
index e64cae6bc7d9..07d811ec223d 100644
--- a/packages/react-devtools/README.md
+++ b/packages/react-devtools/README.md
@@ -97,7 +97,7 @@ By default DevTools listen to port `8097` on `localhost`. If you need to customi
 
 ![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).
+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/).
 

From 0cac4d54c3eb144b72b7bf0ccf05b3740c6b747f Mon Sep 17 00:00:00 2001
From: Samuel Susla <samuel.susla@gmail.com>
Date: Wed, 21 Sep 2022 16:58:04 +0100
Subject: [PATCH 1601/1603] Double invoked effects on suspended children
 (#25307)

Co-authored-by: Robert Balicki <robertbalicki@fb.com>
---
 .../src/ReactFiberWorkLoop.new.js             | 61 ++++++++++++----
 .../src/ReactFiberWorkLoop.old.js             | 61 ++++++++++++----
 .../ReactOffscreenStrictMode-test.js          | 73 +++++++++++++++++++
 3 files changed, 165 insertions(+), 30 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index c356ed4f38e5..586fcda415b9 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -3211,12 +3211,20 @@ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
   }
   let child = parentFiber.child;
   while (child !== null) {
-    doubleInvokeEffectsInDEV(root, child, isInStrictMode);
+    doubleInvokeEffectsInDEVIfNecessary(root, child, isInStrictMode);
     child = child.sibling;
   }
 }
 
-function doubleInvokeEffectsInDEV(
+// Unconditionally disconnects and connects passive and layout effects.
+function doubleInvokeEffectsOnFiber(root: FiberRoot, fiber: Fiber) {
+  disappearLayoutEffects(fiber);
+  disconnectPassiveEffect(fiber);
+  reappearLayoutEffects(root, fiber.alternate, fiber, false);
+  reconnectPassiveEffects(root, fiber, NoLanes, null, false);
+}
+
+function doubleInvokeEffectsInDEVIfNecessary(
   root: FiberRoot,
   fiber: Fiber,
   parentIsInStrictMode: boolean,
@@ -3224,22 +3232,45 @@ function doubleInvokeEffectsInDEV(
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
 
-  if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
+  // 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) {
+      setCurrentDebugFiberInDEV(fiber);
+      if (isInStrictMode) {
+        doubleInvokeEffectsOnFiber(root, fiber);
+      }
+      resetCurrentDebugFiberInDEV();
+    } 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.
     setCurrentDebugFiberInDEV(fiber);
-    const isNotOffscreen = fiber.tag !== OffscreenComponent;
-    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
-    const hasOffscreenBecomeVisible =
-      isNotOffscreen ||
-      (fiber.flags & Visibility && fiber.memoizedState === null);
-    if (isInStrictMode && hasOffscreenBecomeVisible) {
-      disappearLayoutEffects(fiber);
-      disconnectPassiveEffect(fiber);
-      reappearLayoutEffects(root, fiber.alternate, fiber, false);
-      reconnectPassiveEffects(root, fiber, NoLanes, null, false);
+    if (isInStrictMode && fiber.flags & Visibility) {
+      // Double invoke effects on Offscreen's subtree only
+      // if it is visible and its visibility has changed.
+      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.
+      recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+        root,
+        fiber,
+        isInStrictMode,
+      );
     }
     resetCurrentDebugFiberInDEV();
-  } else {
-    recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode);
   }
 }
 
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 6250330b6e95..07ec677d0aaa 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -3211,12 +3211,20 @@ function recursivelyTraverseAndDoubleInvokeEffectsInDEV(
   }
   let child = parentFiber.child;
   while (child !== null) {
-    doubleInvokeEffectsInDEV(root, child, isInStrictMode);
+    doubleInvokeEffectsInDEVIfNecessary(root, child, isInStrictMode);
     child = child.sibling;
   }
 }
 
-function doubleInvokeEffectsInDEV(
+// Unconditionally disconnects and connects passive and layout effects.
+function doubleInvokeEffectsOnFiber(root: FiberRoot, fiber: Fiber) {
+  disappearLayoutEffects(fiber);
+  disconnectPassiveEffect(fiber);
+  reappearLayoutEffects(root, fiber.alternate, fiber, false);
+  reconnectPassiveEffects(root, fiber, NoLanes, null, false);
+}
+
+function doubleInvokeEffectsInDEVIfNecessary(
   root: FiberRoot,
   fiber: Fiber,
   parentIsInStrictMode: boolean,
@@ -3224,22 +3232,45 @@ function doubleInvokeEffectsInDEV(
   const isStrictModeFiber = fiber.type === REACT_STRICT_MODE_TYPE;
   const isInStrictMode = parentIsInStrictMode || isStrictModeFiber;
 
-  if (fiber.flags & PlacementDEV || fiber.tag === OffscreenComponent) {
+  // 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) {
+      setCurrentDebugFiberInDEV(fiber);
+      if (isInStrictMode) {
+        doubleInvokeEffectsOnFiber(root, fiber);
+      }
+      resetCurrentDebugFiberInDEV();
+    } 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.
     setCurrentDebugFiberInDEV(fiber);
-    const isNotOffscreen = fiber.tag !== OffscreenComponent;
-    // Checks if Offscreen is being revealed. For all other components, evaluates to true.
-    const hasOffscreenBecomeVisible =
-      isNotOffscreen ||
-      (fiber.flags & Visibility && fiber.memoizedState === null);
-    if (isInStrictMode && hasOffscreenBecomeVisible) {
-      disappearLayoutEffects(fiber);
-      disconnectPassiveEffect(fiber);
-      reappearLayoutEffects(root, fiber.alternate, fiber, false);
-      reconnectPassiveEffects(root, fiber, NoLanes, null, false);
+    if (isInStrictMode && fiber.flags & Visibility) {
+      // Double invoke effects on Offscreen's subtree only
+      // if it is visible and its visibility has changed.
+      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.
+      recursivelyTraverseAndDoubleInvokeEffectsInDEV(
+        root,
+        fiber,
+        isInStrictMode,
+      );
     }
     resetCurrentDebugFiberInDEV();
-  } else {
-    recursivelyTraverseAndDoubleInvokeEffectsInDEV(root, fiber, isInStrictMode);
   }
 }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
index e6ab08cef547..b398032d6691 100644
--- a/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
+++ b/packages/react-reconciler/src/__tests__/ReactOffscreenStrictMode-test.js
@@ -153,4 +153,77 @@ describe('ReactOffscreenStrictMode', () => {
       );
     });
   });
+
+  // @gate __DEV__ && enableStrictEffects && enableOffscreen
+  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;
+    }
+
+    act(() => {
+      ReactNoop.render(
+        <React.StrictMode>
+          <Offscreen mode="visible">
+            <Parent />
+          </Offscreen>
+        </React.StrictMode>,
+      );
+    });
+
+    log.push('------------------------------');
+
+    await act(async () => {
+      resolve();
+      shouldSuspend = false;
+    });
+
+    expect(log).toEqual([
+      'Parent rendered',
+      'Parent rendered',
+      'Child rendered',
+      'Child suspended',
+      'Parent mount',
+      'Parent unmount',
+      'Parent mount',
+      '------------------------------',
+      'Child rendered',
+      'Child rendered',
+      'Child mount',
+      'Child unmount',
+      'Child mount',
+    ]);
+  });
 });

From d1bb1c586117df11123859d1ef59228bbf7c750a Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Thu, 22 Sep 2022 11:19:54 -0400
Subject: [PATCH 1602/1603] Fix memory leak after repeated setState bailouts
 (#25309)

There's a global queue (`concurrentQueues` in the
ReactFiberConcurrentUpdates module) that is cleared at the beginning of
each render phase.

However, in the case of an eager `setState` bailout where the state is
updated to same value as the current one, we add the update to the queue
without scheduling a render. So the render phase never removes it from
the queue. This can lead to a memory leak if it happens repeatedly
without any other updates.

There's only one place where this ever happens, so the fix was pretty
straightforward.

Currently there's no great way to test this from a Jest test, so I
confirmed locally by checking in an existing test whether the array gets
reset. @sompylasar had an interesting suggestion for how to catch these
in the future: in the development build (perhaps behind a flag), use a
Babel plugin to instrument all module-level variables. Then periodically
sweep to confirm if something has leaked. The logic is that if there's
no React work scheduled, and a module-level variable points to an
object, it very likely indicates a memory leak.
---
 .../src/ReactFiberConcurrentUpdates.new.js          | 13 +++++++++++++
 .../src/ReactFiberConcurrentUpdates.old.js          | 13 +++++++++++++
 .../react-reconciler/src/ReactFiberWorkLoop.new.js  |  6 ++++++
 .../react-reconciler/src/ReactFiberWorkLoop.old.js  |  6 ++++++
 4 files changed, 38 insertions(+)

diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
index 6b1ecbde7f01..33e3bbe441ab 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.new.js
@@ -32,6 +32,7 @@ import {
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop.new';
 
 export type ConcurrentUpdate = {
   next: ConcurrentUpdate,
@@ -139,6 +140,18 @@ export function enqueueConcurrentHookUpdateAndEagerlyBailout<S, A>(
   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>(
diff --git a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
index 798506fd9b5e..0cd158010bbf 100644
--- a/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
+++ b/packages/react-reconciler/src/ReactFiberConcurrentUpdates.old.js
@@ -32,6 +32,7 @@ import {
 import {NoFlags, Placement, Hydrating} from './ReactFiberFlags';
 import {HostRoot, OffscreenComponent} from './ReactWorkTags';
 import {OffscreenVisible} from './ReactFiberOffscreenComponent';
+import {getWorkInProgressRoot} from './ReactFiberWorkLoop.old';
 
 export type ConcurrentUpdate = {
   next: ConcurrentUpdate,
@@ -139,6 +140,18 @@ export function enqueueConcurrentHookUpdateAndEagerlyBailout<S, A>(
   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>(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 586fcda415b9..0e4564538efb 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -1912,6 +1912,9 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
   workInProgressRoot = null;
   workInProgressRootRenderLanes = NoLanes;
 
+  // It's safe to process the queue now that the render phase is complete.
+  finishQueueingConcurrentUpdates();
+
   return workInProgressRootExitStatus;
 }
 
@@ -2017,6 +2020,9 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     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;
   }
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 07ec677d0aaa..496d3f91d572 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -1912,6 +1912,9 @@ function renderRootSync(root: FiberRoot, lanes: Lanes) {
   workInProgressRoot = null;
   workInProgressRootRenderLanes = NoLanes;
 
+  // It's safe to process the queue now that the render phase is complete.
+  finishQueueingConcurrentUpdates();
+
   return workInProgressRootExitStatus;
 }
 
@@ -2017,6 +2020,9 @@ function renderRootConcurrent(root: FiberRoot, lanes: Lanes) {
     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;
   }

From 112d0498c8e05100f0a1fa0c4c0cc11534ae5353 Mon Sep 17 00:00:00 2001
From: Josh Story <story@hey.com>
Date: Thu, 22 Sep 2022 12:40:30 -0700
Subject: [PATCH 1603/1603] [Fizz] Move digest from errorInfo to Error instance
 (#25313)

* suspense boundary error digest to Error instance and deprecate digest from errorInfo for onRecoverableError

* fix closure escape
---
 .../src/__tests__/ReactDOMFizzServer-test.js  | 43 ++++++++++++++++++-
 .../src/ReactFiberBeginWork.new.js            |  1 +
 .../src/ReactFiberBeginWork.old.js            |  1 +
 .../src/ReactFiberWorkLoop.new.js             | 35 +++++++++++++--
 .../src/ReactFiberWorkLoop.old.js             | 35 +++++++++++++--
 5 files changed, 108 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
index 4d8e677e0373..225d3657e046 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js
@@ -92,7 +92,7 @@ describe('ReactDOMFizzServer', () => {
   function expectErrors(errorsArr, toBeDevArr, toBeProdArr) {
     const mappedErrows = errorsArr.map(({error, errorInfo}) => {
       const stack = errorInfo && errorInfo.componentStack;
-      const digest = errorInfo && errorInfo.digest;
+      const digest = error.digest;
       if (stack) {
         return [error.message, digest, normalizeCodeLocInfo(stack)];
       } else if (digest) {
@@ -3230,6 +3230,47 @@ describe('ReactDOMFizzServer', () => {
     );
   });
 
+  it('warns in dev if you access digest from errorInfo in onRecoverableError', async () => {
+    await act(async () => {
+      const {pipe} = ReactDOMFizzServer.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(() => {
+            expect(error.digest).toBe('a digest');
+            expect(errorInfo.digest).toBe('a digest');
+          }).toErrorDev(
+            'Warning: You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
+              ' This property is deprecated and will be removed in a future version of React.' +
+              ' To access the digest of an Error look for this property on the Error instance itself.',
+            {withoutStack: true},
+          );
+        },
+      },
+    );
+    expect(Scheduler).toFlushWithoutYielding();
+  });
+
   describe('error escaping', () => {
     it('escapes error hash, message, and component stack values in directly flushed errors (html escaping)', async () => {
       window.__outlet = {};
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
index 913a054be2dd..c18bed4d808d 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js
@@ -2746,6 +2746,7 @@ function updateDehydratedSuspenseComponent(
             'client rendering.',
         );
       }
+      (error: any).digest = digest;
       const capturedValue = createCapturedValue(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,
diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
index 382e9075716a..7b1f5b9c21b5 100644
--- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js
+++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js
@@ -2746,6 +2746,7 @@ function updateDehydratedSuspenseComponent(
             'client rendering.',
         );
       }
+      (error: any).digest = digest;
       const capturedValue = createCapturedValue(error, digest, stack);
       return retrySuspenseComponentWithoutHydrating(
         current,
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
index 0e4564538efb..6d244630867b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js
@@ -2596,9 +2596,11 @@ function commitRootImpl(
     const onRecoverableError = root.onRecoverableError;
     for (let i = 0; i < recoverableErrors.length; i++) {
       const recoverableError = recoverableErrors[i];
-      const componentStack = recoverableError.stack;
-      const digest = recoverableError.digest;
-      onRecoverableError(recoverableError.value, {componentStack, digest});
+      const errorInfo = makeErrorInfo(
+        recoverableError.digest,
+        recoverableError.stack,
+      );
+      onRecoverableError(recoverableError.value, errorInfo);
     }
   }
 
@@ -2689,6 +2691,33 @@ function commitRootImpl(
   return null;
 }
 
+function makeErrorInfo(digest: ?string, componentStack: ?string) {
+  if (__DEV__) {
+    const errorInfo = {
+      componentStack,
+      digest,
+    };
+    Object.defineProperty(errorInfo, 'digest', {
+      configurable: false,
+      enumerable: true,
+      get() {
+        console.error(
+          'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
+            ' This property is deprecated and will be removed in a future version of React.' +
+            ' To access the digest of an Error look for this property on the Error instance itself.',
+        );
+        return digest;
+      },
+    });
+    return errorInfo;
+  } else {
+    return {
+      digest,
+      componentStack,
+    };
+  }
+}
+
 function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
   if (enableCache) {
     const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
index 496d3f91d572..36799208dc69 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js
@@ -2596,9 +2596,11 @@ function commitRootImpl(
     const onRecoverableError = root.onRecoverableError;
     for (let i = 0; i < recoverableErrors.length; i++) {
       const recoverableError = recoverableErrors[i];
-      const componentStack = recoverableError.stack;
-      const digest = recoverableError.digest;
-      onRecoverableError(recoverableError.value, {componentStack, digest});
+      const errorInfo = makeErrorInfo(
+        recoverableError.digest,
+        recoverableError.stack,
+      );
+      onRecoverableError(recoverableError.value, errorInfo);
     }
   }
 
@@ -2689,6 +2691,33 @@ function commitRootImpl(
   return null;
 }
 
+function makeErrorInfo(digest: ?string, componentStack: ?string) {
+  if (__DEV__) {
+    const errorInfo = {
+      componentStack,
+      digest,
+    };
+    Object.defineProperty(errorInfo, 'digest', {
+      configurable: false,
+      enumerable: true,
+      get() {
+        console.error(
+          'You are accessing "digest" from the errorInfo object passed to onRecoverableError.' +
+            ' This property is deprecated and will be removed in a future version of React.' +
+            ' To access the digest of an Error look for this property on the Error instance itself.',
+        );
+        return digest;
+      },
+    });
+    return errorInfo;
+  } else {
+    return {
+      digest,
+      componentStack,
+    };
+  }
+}
+
 function releaseRootPooledCache(root: FiberRoot, remainingLanes: Lanes) {
   if (enableCache) {
     const pooledCacheLanes = (root.pooledCacheLanes &= remainingLanes);